/* site.css for keywestdoc.com. One stylesheet, no build step.
   Built in the committed seven part order: tokens, base, type, layout,
   chrome, components, print and reduced motion.
   Design contract: white paper, warm ink, one gold accent, zero radius,
   zero shadows, ruled ledger borders. Committed 2026-07-04; not re-decided. */

/* 1. Custom properties */
:root {
    --paper: #FFFFFF;
    --panel: #F4F2EC;
    --ink: #1D1B16;
    --ink-soft: #4E4B42;
    --rule: #D9D6CC;
    --gold: #785F04;
    --gold-bright: #F0C428;
    --gold-pale: #FBF4D6;
    --link: #0B6183;
    --link-hover: #084A63;
    --link-visited: #094F6B;
    --danger: #9E2A24;

    --space-gutter: 20px; /* the ledger's card padding, grid gap, and page gutter */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;
    --space-8: 64px;
    --space-9: 96px;

    --fs-body: 1.125rem;
    --fs-lead: 1.25rem;
    --fs-h2: 1.5rem;
    --fs-h3: 1.1875rem;
    --fs-eyebrow: 0.84375rem;
    --fs-nav: 0.9375rem;
    --fs-btn: 1rem;
    --fs-small: 0.875rem;
    --fs-chip: 0.9375rem;
    --fs-card-name: 1.125rem;
    --fs-card-phone: 1.0625rem;
    --fs-lockup: 1.3125rem;
    --fs-h1: clamp(2.125rem, 4.5vw, 2.875rem);

    --font-display: "Merriweather", Georgia, serif;
    --font-body: "Libre Franklin", Arial, sans-serif;

    --lh-body: 1.65;
    --container: 1120px;
    --measure: 720px;
}

/* 2. Reset and base */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    font-size: 100%;
}

body {
    margin: 0;
    font-family: var(--font-body);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    color: var(--ink);
    background: var(--paper);
}

img,
svg {
    max-width: 100%;
    vertical-align: middle;
}

a {
    color: var(--link);
    text-decoration: underline;
    transition: opacity 150ms ease, text-decoration-color 150ms ease;
}

a:hover {
    color: var(--link-hover);
}

a:visited {
    color: var(--link-visited);
}

a:active {
    color: var(--ink);
}

/* Focus ring in the dark marigold: 6.1:1 on paper, 5.5:1 on panels. The bright gold reads 1.7:1 and stays a rail color. */
:focus-visible {
    outline: 3px solid var(--gold);
    outline-offset: 2px;
}

.btn:focus-visible,
.island-chip-alert:focus-visible,
ol.steps li::before {
    outline-color: var(--ink);
}

[hidden] {
    display: none;
}

hr {
    border: 0;
    border-top: 1px solid var(--rule);
    margin: var(--space-6) 0;
}

/* 3. Type roles */
h1,
h2 {
    font-family: var(--font-display);
    font-weight: 700;
    margin: 0 0 var(--space-4);
}

h1 {
    font-size: var(--fs-h1);
    line-height: 1.15;
    text-wrap: balance;
}

h2 {
    font-size: var(--fs-h2);
    line-height: 1.3;
    border-top: 2px solid var(--ink);
    padding-top: var(--space-3);
    text-wrap: pretty;
}

h3 {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: var(--fs-h3);
    line-height: 1.4;
    margin: 0 0 var(--space-2);
}

p {
    margin: 0 0 var(--space-4);
}

.lead {
    font-size: var(--fs-lead);
    line-height: 1.5;
    color: var(--ink-soft);
}

.eyebrow {
    display: block;
    font-size: var(--fs-eyebrow);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--gold);
    margin-bottom: var(--space-2);
}

.small-print,
.sources {
    font-size: var(--fs-small);
    color: var(--ink-soft);
}

/* 4. Layout */
.container {
    max-width: var(--container);
    margin: 0 auto;
    padding-left: var(--space-gutter);
    padding-right: var(--space-gutter);
}

.doc-column {
    max-width: var(--measure);
}

.section {
    padding-top: var(--space-5);
    padding-bottom: var(--space-5);
}

.grid {
    display: grid;
    gap: var(--space-gutter);
}

.grid-3 {
    grid-template-columns: repeat(3, 1fr);
}

.grid-2 {
    grid-template-columns: repeat(2, 1fr);
}

@media (max-width: 900px) {
    .section {
        padding-top: var(--space-gutter);
        padding-bottom: var(--space-gutter);
    }

    .grid-3,
    .grid-2 {
        grid-template-columns: 1fr;
    }
}

/* 5. Chrome */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--paper);
    color: var(--ink);
    padding: var(--space-2) var(--space-4);
}

.skip-link:focus {
    left: 0;
    z-index: 10;
}

.site-header {
    height: 68px;
    background: var(--paper);
    border-bottom: 1px solid var(--rule);
}

.site-header .container {
    height: 100%;
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

.lockup {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-shrink: 0;
    text-decoration: none;
    color: var(--ink);
}

.lockup:visited {
    color: var(--ink);
}

.lockup svg {
    width: 24px;
    height: 24px;
    color: var(--ink);
}

.lockup-word {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--fs-lockup);
    line-height: 1.1;
    white-space: nowrap;
}

.lockup-sub {
    display: block;
    font-size: var(--fs-eyebrow);
    color: var(--ink-soft);
    line-height: 1.2;
    white-space: nowrap;
}

.site-nav {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: var(--space-4);
    flex-shrink: 0;
}

.site-nav a {
    display: inline-block;
    font-size: var(--fs-nav);
    font-weight: 600;
    color: var(--ink);
    text-decoration: none;
    padding: var(--space-3) 0;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
}

.site-nav a:visited {
    color: var(--ink);
}

.site-nav a.active {
    border-bottom-color: var(--gold);
}

.site-nav a:hover,
.site-nav a:active {
    text-decoration: underline;
}

.bone-joint {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.bone-joint a {
    font-size: var(--fs-nav);
    font-weight: 700;
    color: var(--ink);
    text-decoration: none;
    background: var(--gold-bright);
    border: 1px solid var(--ink);
    padding: var(--space-2) var(--space-4);
}

.bone-joint a:visited {
    color: var(--ink);
}

.bone-joint a:hover {
    text-decoration: underline;
}

.bone-joint a:active {
    background: var(--gold-pale);
}

.bone-joint .bj-label {
    display: block;
    font-size: var(--fs-eyebrow);
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
}

.bone-joint .bj-phone {
    display: block;
    font-size: var(--fs-card-phone);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
    white-space: nowrap;
}

.bone-joint .bj-call {
    display: none;
}

@media (max-width: 900px) {
    .bone-joint .bj-page {
        display: none;
    }

    .bone-joint .bj-call {
        display: inline-block;
    }
}

.menu-toggle {
    display: none;
    margin-left: auto;
    min-height: 44px;
    font-family: var(--font-body);
    font-size: var(--fs-nav);
    font-weight: 600;
    color: var(--ink);
    background: var(--paper);
    border: 1px solid var(--ink);
    padding: var(--space-2) var(--space-4);
    cursor: pointer;
}

.menu-toggle:hover,
.menu-toggle[aria-expanded="true"] {
    background: var(--gold-pale);
}

.menu-panel {
    display: none;
    background: var(--paper);
    border-bottom: 1px solid var(--rule);
}

.menu-panel a {
    display: block;
    font-size: var(--fs-nav);
    font-weight: 600;
    color: var(--ink);
    text-decoration: none;
    padding: var(--space-3) var(--space-gutter);
    border-top: 1px solid var(--rule);
}

.menu-panel a:visited {
    color: var(--ink);
}

.menu-panel a:hover,
.menu-panel a:active {
    text-decoration: underline;
    background: var(--panel);
}

.menu-panel.open {
    display: block;
}

@media (max-width: 1200px) {
    .site-nav {
        display: none;
    }

    .menu-toggle {
        display: inline-block;
    }

    .bone-joint {
        margin-left: var(--space-3);
    }
}

.site-footer {
    border-top: 2px solid var(--ink);
    margin-top: var(--space-8);
    padding-top: var(--space-6);
    padding-bottom: var(--space-6);
}

.site-footer .container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-gutter);
}

.site-footer h2 {
    border-top: 0;
    padding-top: 0;
    font-family: var(--font-body);
    font-size: var(--fs-nav);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.site-footer ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.site-footer li {
    margin-bottom: var(--space-2);
}

.site-footer a,
.site-footer p {
    font-size: var(--fs-nav);
}

@media (max-width: 900px) {
    .site-footer .container {
        grid-template-columns: 1fr;
    }
}

.bottom-bar {
    background: var(--panel);
    border-top: 1px solid var(--rule);
    padding: var(--space-3) 0;
}

.bottom-bar p {
    margin: 0;
    font-size: var(--fs-small);
    color: var(--ink-soft);
}

/* 6. Components */
.btn {
    display: inline-block;
    font-family: var(--font-body);
    font-size: var(--fs-btn);
    font-weight: 700;
    color: var(--ink);
    background: var(--gold-bright);
    border: 1px solid var(--ink);
    padding: var(--space-3) var(--space-5);
    text-decoration: none;
    cursor: pointer;
}

.btn:visited {
    color: var(--ink);
}

.btn:hover {
    text-decoration: underline;
}

.btn:active {
    background: var(--gold-pale);
}

.btn-secondary {
    background: var(--paper);
}

.btn-secondary:active {
    background: var(--panel);
}

.doc-title-block {
    border-bottom: 3px solid var(--gold-bright);
    padding-bottom: var(--space-5);
    margin-bottom: var(--space-4);
}

.island-chip {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    flex-wrap: wrap;
    background: var(--panel);
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
    padding: var(--space-2) var(--space-4);
    font-size: var(--fs-chip);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.island-chip-alert {
    display: inline-block;
    background: var(--danger);
    color: #FFFFFF;
    font-size: var(--fs-eyebrow);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    text-decoration: none;
    padding: var(--space-1) var(--space-2);
}

.island-chip-alert:visited {
    color: #FFFFFF;
}

.island-chip-credit {
    margin-left: auto;
    font-size: var(--fs-eyebrow);
    font-weight: 400;
    color: var(--ink-soft);
}

.need-card {
    display: block;
    background: var(--paper);
    border: 1px solid var(--rule);
    padding: var(--space-gutter);
    color: var(--ink);
    text-decoration: none;
}

.need-card:visited {
    color: var(--ink);
}

.need-card:hover,
.need-card:active {
    border-color: var(--ink);
}

.need-card h3 {
    margin-bottom: var(--space-1);
}

.need-card p {
    margin: 0;
    color: var(--ink-soft);
    font-size: var(--fs-small);
}

.need-card .arrow {
    color: var(--gold);
    font-weight: 700;
}

.verify-strip {
    border-left: 4px solid var(--gold-bright);
    background: var(--panel);
    padding: var(--space-gutter);
}

.verify-strip ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: var(--space-5);
    flex-wrap: wrap;
}

.verify-strip li {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-weight: 600;
}

.verify-strip svg {
    width: 20px;
    height: 20px;
    color: var(--ink);
    flex-shrink: 0;
}

.practice-card {
    background: var(--paper);
    border: 1px solid var(--rule);
    padding: var(--space-gutter);
    margin-bottom: var(--space-gutter);
}

.practice-card h3 {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--fs-card-name);
}

.practice-phone {
    font-weight: 700;
    font-size: var(--fs-card-phone);
    font-variant-numeric: tabular-nums;
}

.practice-phone a {
    display: inline-block;
    padding: var(--space-2) 0;
}

.practice-meta {
    font-size: var(--fs-small);
    color: var(--ink-soft);
    margin-bottom: var(--space-2);
}

.practice-note {
    font-size: var(--fs-small);
    color: var(--ink-soft);
}

.practice-empty {
    border: 1px solid var(--rule);
    background: var(--panel);
    padding: var(--space-gutter);
}

ol.steps {
    list-style: none;
    margin: 0 0 var(--space-5);
    padding: 0;
    counter-reset: step;
}

ol.steps li {
    counter-increment: step;
    position: relative;
    padding-left: 44px;
    margin-bottom: var(--space-4);
}

ol.steps li::before {
    content: counter(step);
    position: absolute;
    left: 0;
    top: 2px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--gold-bright);
    color: var(--ink);
    font-weight: 700;
    font-size: var(--fs-btn);
}

.faq details {
    border-top: 1px solid var(--rule);
}

.faq details:last-child {
    border-bottom: 1px solid var(--rule);
}

.faq summary {
    font-weight: 700;
    font-size: var(--fs-h3);
    padding: var(--space-3) 0;
    cursor: pointer;
}

.faq summary:hover {
    text-decoration: underline;
}

.faq details > div {
    padding-bottom: var(--space-4);
}

.kwco-cta {
    border-left: 4px solid var(--gold-bright);
    background: var(--panel);
    padding: var(--space-gutter);
    margin: var(--space-5) 0;
}

.kwco-cta h3 {
    margin-bottom: var(--space-2);
}

.red-flag-box {
    border-left: 4px solid var(--danger);
    background: var(--panel);
    padding: var(--space-gutter);
    margin: var(--space-5) 0;
}

.red-flag-box h3 {
    color: var(--danger);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.red-flag-box svg {
    width: 20px;
    height: 20px;
    color: var(--danger);
    flex-shrink: 0;
}

.red-flag-box ul {
    margin: 0;
    padding-left: var(--space-5);
}

.breadcrumbs {
    font-size: var(--fs-eyebrow);
    color: var(--ink-soft);
    padding: var(--space-3) 0;
}

.breadcrumbs ol {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.breadcrumbs li + li::before {
    content: "/";
    margin-right: var(--space-2);
    color: var(--ink-soft);
}

.breadcrumbs a {
    display: inline-block;
    padding: var(--space-2) 0;
}

.comparison-table {
    width: 100%;
    border-collapse: collapse;
    margin: var(--space-5) 0;
    font-size: var(--fs-btn);
}

.comparison-table th,
.comparison-table td {
    border: 1px solid var(--rule);
    padding: var(--space-3);
    text-align: left;
    vertical-align: top;
}

.comparison-table thead th {
    font-family: var(--font-body);
    font-weight: 700;
    background: var(--paper);
    border-bottom: 2px solid var(--ink);
}

.comparison-table tbody tr:nth-child(even) {
    background: var(--panel);
}

@media (max-width: 600px) {
    .comparison-table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

.decision-panel {
    border: 1px solid var(--rule);
    padding: var(--space-gutter);
}

.decision-panel fieldset {
    border: 0;
    margin: 0 0 var(--space-4);
    padding: 0;
}

.decision-panel legend {
    font-weight: 700;
    font-size: var(--fs-h3);
    padding: 0;
    margin-bottom: var(--space-2);
}

.dp-option {
    min-height: 44px;
    font-family: var(--font-body);
    font-size: var(--fs-btn);
    font-weight: 600;
    color: var(--ink);
    background: var(--paper);
    border: 1px solid var(--ink);
    padding: var(--space-2) var(--space-4);
    margin: 0 var(--space-2) var(--space-2) 0;
    cursor: pointer;
}

.dp-option:hover,
.dp-option:active {
    background: var(--panel);
}

.dp-option[aria-pressed="true"] {
    background: var(--gold-pale);
}

.dp-output {
    border-top: 1px solid var(--rule);
    padding-top: var(--space-4);
}

.dp-fallback ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.dp-fallback li {
    border-top: 1px solid var(--rule);
    padding: var(--space-2) 0;
}

.reviewer-block {
    border-top: 1px solid var(--rule);
    padding-top: var(--space-4);
    margin-top: var(--space-6);
}

.page-404 {
    padding-top: var(--space-8);
    padding-bottom: var(--space-8);
}

.verified-badge {
    display: inline-block;
    background: var(--gold-pale);
    color: var(--ink);
    font-size: var(--fs-eyebrow);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: var(--space-1) var(--space-2);
    border: 1px solid var(--gold);
}

/* 7. Print and reduced motion */
@media print {
    .site-header .site-nav,
    .menu-toggle,
    .menu-panel,
    .island-chip,
    .bone-joint,
    .skip-link {
        display: none;
    }

    body {
        color: #000000;
        background: #FFFFFF;
    }

    .sources a::after,
    .doc-column a[href^="http"]::after {
        content: " (" attr(href) ")";
        font-size: var(--fs-small);
    }

    .dp-app {
        display: none;
    }

    .dp-fallback[hidden] {
        display: block;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        transition: none !important;
    }
}