/* ============================================================
   GOLDEN GATE WOODEN BOAT FOUNDATION — ggwbf.org
   Override layer over the shared drafting-room system.
   Loaded AFTER style.css. Three differences, deliberately:
     1. Accent inversion — sea/verdigris accents, brass wayfinding.
     2. Two-part wordmark: GOLDEN GATE / WOODEN BOAT FOUNDATION.
     3. Title block carries organization specs, not vessel specs.
   Everything else is inherited so the two sites read as one hand.
   Keep this file thin: upstream style.css can be re-pulled from
   yankee2026.org without merge pain as long as it stays thin.
   ============================================================ */

/* ----------------------------------------------------------
   1. ACCENT INVERSION
   The system's --brass token drives eyebrows, drop caps, rules,
   key numbers and status flags; --sea drives links. Swapping the
   values swaps the two roles site-wide without touching a rule.
   ---------------------------------------------------------- */
:root {
    --brass:   #2F5F68;   /* accent  — verdigris */
    --brass-2: #3E7B84;
    --sea:     var(--brass);   /* links — foundation teal. Bridge red retired 2026-07-30. */
    --lib:     #38766B;   /* Library accent — verdigris, green register. Atlas + Glossary. */
    --lib-2:   #2C5F56;   /* Library deep — hovers, emphasis */
}

[data-theme="dark"] {
    --brass:   #8FB6BE;
    --brass-2: #A9CBD2;
    --sea:     var(--brass);
    --lib:     #95C7B6;
    --lib-2:   #AFD8C9;
}

/* ----------------------------------------------------------
   2. WORDMARK
   Thirty-three letters, set at their true width — no scaleX, so
   the mark can never paint outside its layout box and slide
   under the nav (the pre-2026-07-30 bug). Fraunces display face
   as before. Ladder: two-line stack by default, one line from
   1240px up, and the GGWBF short mark on the smallest screens.
   ---------------------------------------------------------- */
.header-brand { display: block; min-width: 0; }
/* the wordmark is a mark, not a link underline candidate */
.header-brand, .header-brand:hover,
.header-wordmark .wm-name, .footer-wordmark .wm-name { border-bottom: 0 !important; }

.header-wordmark {
    display: block;
    font-size: 0.62rem;
    line-height: 1.4;
}
.header-wordmark .wm-name,
.footer-wordmark .wm-name {
    display: inline-block;
    letter-spacing: 0.14em;
    transform: none;
    white-space: normal;
}
/* abbreviation hidden unless the smallest screens call for it */
.wm-short { display: none; }

/* two-line stack: GOLDEN GATE / WOODEN BOAT FOUNDATION (≤1239px) */
.header-wordmark .wm-l1,
.header-wordmark .wm-l2 { display: block; }

/* one line at desk widths */
@media (min-width: 1240px) {
    .header-wordmark { font-size: clamp(0.8rem, 1.15vw, 1.06rem); line-height: 1; }
    .header-wordmark .wm-name { letter-spacing: 0.15em; white-space: nowrap; }
    .header-wordmark .wm-l1,
    .header-wordmark .wm-l2 { display: inline; }
}

/* style.css sizes the six-letter Yankee mark UP at ≤560px;
   re-assert the Foundation stack size for the 33-char name */
@media (max-width: 560px) {
    .header-wordmark { font-size: 0.62rem; }
}

/* smallest screens: the short mark carries the flag
   (spec said ~460px; set at 420 to stay on the contract ladder) */
@media (max-width: 420px) {
    .header-wordmark .wm-full { display: none; }
    .header-wordmark .wm-short {
        display: inline-block;
        font-size: 0.8rem;
        letter-spacing: 0.22em;
    }
}

/* footer: full name at reading size, free to wrap, no scaleX */
.footer-wordmark { display: block; font-size: clamp(0.82rem, 2.4vw, 1.5rem); }

/* Masthead with no figure column — the hero runs full measure. */
.hero-masthead-inner.no-figure { grid-template-columns: minmax(0, 1fr); }
.hero-masthead-inner.no-figure .hero-lead { max-width: 54rem; }

/* With the Beeston plate in the second column the copy measure is
   narrower than the system assumes — let the headline wrap. */
@media (min-width: 960px) {
    .hero-lead .lead-in { white-space: normal; }
}

/* The hero copy runs as two movements — Foundation, then Library —
   each closed by its own row of buttons. */
.hero-masthead .hero-ctas + .hero-lead {
    margin-top: 2.4rem;
    padding-top: 2rem;
    border-top: 1px solid var(--line);
}

/* Masthead figure — the Beeston plate. The photograph is itself a
   link out to the current project; the caption carries it in bold. */
.hero-masthead-figure .figure-frame a { display: block; border-bottom: 0; }
.hero-fig-link {
    display: inline-block;
    margin-top: 0.55rem;
    font-family: var(--f-ui);
    font-style: normal;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--brass);
    border-bottom: 2px solid var(--brass);
    padding-bottom: 2px;
}
.hero-fig-link:hover { color: var(--ink); border-bottom-color: var(--ink); }

/* ----------------------------------------------------------
   2a. THE LIBRARY GROUP — nav
   Mission / Projects / Stewardship read as the Foundation;
   Atlas + Glossary stand apart, together: a hairline rule, a
   mono micro-label, and the Library's own verdigris register.
   The Library may one day be a site of its own; the nav already
   treats it as a wing of the building.
   ---------------------------------------------------------- */
.header-nav .nav-lib-group {
    display: flex;
    align-items: baseline;
    gap: 1.35rem;
    margin-left: 0.35rem;
    padding-left: 1.5rem;
    border-left: 1px solid var(--line-strong);
}
.header-nav .nav-lib-group a { color: var(--lib); }
.header-nav .nav-lib-group a:hover { color: var(--lib-2); border-bottom-color: var(--lib); }
.header-nav .nav-lib-group a[aria-current="page"] { color: var(--lib-2); border-bottom-color: var(--lib); }

/* mobile menu: same grouping, stacked — a rule sets the pair apart */
.mobile-menu li:not(.mobile-lib) + li.mobile-lib {
    margin-top: 0.9rem;
    padding-top: 0.9rem;
    border-top: 1px solid var(--line);
}
.mobile-menu .mobile-lib a { color: var(--lib); }
.mobile-menu .mobile-lib a:hover { color: var(--lib-2); }

/* ----------------------------------------------------------
   2b. THE DRAFTING-MARGIN LAYOUT (wide viewports)
   At desk widths every sheet becomes a two-column drawing:
   the sheet head moves into a sticky left margin rail (like a
   drawing's title notes), and the content column takes the
   remaining width. Long prose can flow in two text columns
   (.prose-cols); points and criteria run two-up. This is what
   uses a 1600px viewport instead of leaving it empty.
   ---------------------------------------------------------- */
@media (min-width: 1240px) {
    .sheet {
        display: grid;
        grid-template-columns: minmax(14rem, 19rem) minmax(0, 1fr);
        column-gap: clamp(3rem, 5vw, 6rem);
    }
    .sheet > * { grid-column: 2; min-width: 0; }
    .sheet > .sheet-head {
        grid-column: 1;
        grid-row: 1 / 99;
        position: sticky;
        top: calc(var(--header-h) + 2.5rem);
        align-self: start;
        margin-bottom: 0;
        border-top: 2px solid var(--ink);
        padding-top: 1.15rem;
    }
    .sheet .sheet-title { font-size: clamp(1.55rem, 1.9vw, 2.15rem); line-height: 1.14; }
    .sheet .sheet-deck { font-size: 0.98rem; margin-top: 0.9rem; }

    /* prose: a fuller single measure, or two columns on request */
    .sheet .prose { max-width: 66ch; }
    .sheet .prose-cols {
        columns: 2;
        column-gap: clamp(2.6rem, 3.5vw, 4.5rem);
        max-width: none;
        orphans: 2;
        widows: 2;
    }
    .prose-cols .statement,
    .prose-cols figure { break-inside: avoid; }

    /* points and criteria run two-up */
    .points { grid-template-columns: 1fr 1fr; column-gap: clamp(2.6rem, 3.5vw, 4.5rem); }
    .criteria { grid-template-columns: 1fr 1fr; column-gap: clamp(2.6rem, 3.5vw, 4.5rem); }

    /* the record ledger should not run the full drawing width */
    .record-table { max-width: 58rem; }
}

/* Project card: text and figure side by side; the figure is a
   plate in the margin, not a banner. Stacks below 960px. */
.project-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(17rem, 30%, 24rem);
    gap: clamp(1.8rem, 3vw, 3rem);
    align-items: start;
}
.project-split > figure { margin: 0; }
@media (min-width: 960px) {  /* remapped 980 -> 960 (2026-07-30) */
    .project-split > figure { position: sticky; top: calc(var(--header-h) + 2rem); }
}
@media (max-width: 959px) {  /* remapped 979 -> 959 (2026-07-30) */
    .project-split { grid-template-columns: minmax(0, 1fr); }
}

/* ----------------------------------------------------------
   3. ORG SPEC STRIP
   The vessel dimension strip, repurposed. Same anatomy, so it
   reads as the same instrument measuring a different object.
   ---------------------------------------------------------- */
.dim-strip .dim-value.dim-em { color: var(--brass); }

/* ----------------------------------------------------------
   4. FOUNDATION-ONLY COMPONENTS
   ---------------------------------------------------------- */

/* The mission statement, set as an adopted instrument rather
   than a pull quote — ruled box, brass-free, no quotation marks. */
.statement {
    border-top: 2px solid var(--ink);
    border-bottom: 1px solid var(--line-strong);
    padding: 1.9rem 0 1.7rem;
    margin: 2.2rem 0;
    max-width: 54ch;
}
.statement p {
    font-family: var(--f-display);
    font-weight: 380;
    font-size: clamp(1.22rem, 2.1vw, 1.6rem);
    line-height: 1.34;
    letter-spacing: -0.012em;
    color: var(--ink);
    text-wrap: pretty;
}
.statement .statement-source {
    display: block;
    margin-top: 1.2rem;
    font-family: var(--f-mono);
    font-size: 0.65rem;
    font-weight: 400;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-3);
}

/* Numbered criteria — the project-qualification list and any
   other ordered policy set. Drafting-sheet numbering, not bullets. */
.criteria { display: grid; gap: 1.6rem; margin: 2rem 0; }
.criterion {
    display: grid;
    grid-template-columns: 3.2rem minmax(0, 1fr);
    gap: 0 1.2rem;
    padding-top: 1.1rem;
    border-top: 1px solid var(--line);
}
.criterion .crit-no {
    font-family: var(--f-mono);
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    color: var(--brass);
    padding-top: 0.28rem;
}
.criterion h3 {
    font-family: var(--f-display);
    font-weight: 460;
    font-size: 1.12rem;
    letter-spacing: -0.005em;
    color: var(--ink);
    margin-bottom: 0.45rem;
}
.criterion p { margin: 0; color: var(--ink-body); }
@media (max-width: 640px) {  /* remapped 620 -> 640 (2026-07-30) */
    .criterion { grid-template-columns: 1fr; gap: 0.5rem; }
}

/* Project card — the pointer out to a project's own site. */
.project-card {
    border: 1px solid var(--line-strong);
    background: var(--paper-2);
    padding: clamp(1.6rem, 3vw, 2.4rem);
    box-shadow: var(--shadow-soft);
}
.project-card .project-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.8rem 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--line);
    margin-bottom: 1.4rem;
}
.project-card .project-name {
    font-family: var(--f-display);
    font-weight: 460;
    font-size: clamp(1.5rem, 3vw, 2rem);
    letter-spacing: -0.01em;
    color: var(--ink);
    line-height: 1.05;
}
.project-card .project-meta {
    font-family: var(--f-mono);
    font-size: 0.68rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-3);
}
.project-card .project-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.9rem 1.6rem;
    margin-top: 1.6rem;
    padding-top: 1.3rem;
    border-top: 1px solid var(--line);
}

/* The record — a ruled ledger of organizational facts. */
.record-table { width: 100%; border-collapse: collapse; margin: 1.8rem 0; }
.record-table th,
.record-table td {
    text-align: left;
    vertical-align: baseline;
    padding: 0.85rem 1.2rem 0.85rem 0;
    border-bottom: 1px solid var(--line);
}
.record-table th {
    width: 34%;
    font-family: var(--f-ui);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-3);
    white-space: nowrap;
}
.record-table td {
    font-family: var(--f-mono);
    font-size: 0.82rem;
    line-height: 1.6;
    color: var(--ink);
}
@media (max-width: 640px) {  /* remapped 620 -> 640 (2026-07-30) */
    .record-table th, .record-table td { display: block; width: 100%; border-bottom: 0; padding-bottom: 0.2rem; }
    .record-table td { padding-bottom: 1rem; border-bottom: 1px solid var(--line); }
}

/* Points — the presentation-scale bullet.
   For sheets that carry no photograph: a small number of large,
   plainly-worded statements, each with a mono index and a rule.
   Set in the display face at slide scale so a section without an
   image still has something to look at. Four items maximum; if you
   need five, the section is doing two jobs. */
.points {
    list-style: none;
    display: grid;
    gap: 0;
    margin: 2.4rem 0 0;
    counter-reset: point;
    border-top: 1px solid var(--line-strong);
}
.points > li {
    counter-increment: point;
    display: grid;
    grid-template-columns: 3.6rem minmax(0, 1fr);
    gap: 0 1.4rem;
    padding: clamp(1.3rem, 2.6vh, 1.9rem) 0;
    border-bottom: 1px solid var(--line);
}
.points > li::before {
    content: counter(point, decimal-leading-zero);
    grid-column: 1;
    grid-row: 1;
    font-family: var(--f-mono);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    color: var(--brass);
    padding-top: 0.62rem;
}
/* explicit placement — without this, auto-flow drops the note back
   into the narrow number column (one word per line) */
.points .point-head { grid-column: 2; grid-row: 1; }
.points .point-note { grid-column: 2; grid-row: 2; }
.points .point-head {
    display: block;
    font-family: var(--f-display);
    font-optical-sizing: auto;
    font-weight: 380;
    font-size: clamp(1.35rem, 2.6vw, 2.05rem);
    line-height: 1.12;
    letter-spacing: -0.018em;
    color: var(--ink);
    text-wrap: balance;
}
.points .point-head em { font-style: italic; }
.points .point-note {
    display: block;
    margin-top: 0.55rem;
    font-family: var(--f-text);
    font-size: 1rem;
    line-height: 1.62;
    color: var(--ink-2);
    max-width: 52ch;
    text-wrap: pretty;
}
@media (max-width: 640px) {  /* remapped 620 -> 640 (2026-07-30) */
    .points > li { grid-template-columns: minmax(0, 1fr); gap: 0.35rem; }
    .points > li::before { padding-top: 0; font-size: 0.66rem; grid-row: auto; }
    .points .point-head, .points .point-note { grid-column: 1; grid-row: auto; }
}

/* A closing line under a points block — the section's one sentence
   of case, set apart so it does not read as a fifth bullet. */
.points-close {
    margin-top: 1.8rem;
    font-family: var(--f-display);
    font-weight: 360;
    font-style: italic;
    font-size: clamp(1.05rem, 1.8vw, 1.32rem);
    line-height: 1.4;
    color: var(--ink-body);
    max-width: 46ch;
}

/* Fact chips as links — the Atlas section directory. */
a.fact-chip {
    color: var(--ink-2);
    border-bottom: 1px solid var(--line);
    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
a.fact-chip:hover {
    color: var(--ink);
    border-color: var(--line-strong);
    background: var(--paper-3);
}

/* A small mono aside inside prose — status pointers, cross-refs. */
.anno-note {
    font-family: var(--f-mono);
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    color: var(--ink-2);
    border-top: 1px solid var(--line);
    padding-top: 1rem;
    margin-top: 1.8rem;
}

/* Library cards — the two reference works, as shelf plates. */
.library-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
    gap: 1.8rem;
    margin: 2.4rem 0 0;
}
.library-card {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    border: 1px solid var(--line-strong);
    background: var(--paper-2);
    padding: clamp(1.5rem, 2.6vw, 2.2rem);
    color: var(--ink-body);
    box-shadow: var(--shadow-soft);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.library-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); color: var(--ink-body); }
.library-card .library-kind {
    font-family: var(--f-mono);
    font-size: 0.63rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--brass);
}
.library-card .library-name {
    font-family: var(--f-display);
    font-weight: 440;
    font-size: clamp(1.5rem, 2.6vw, 1.95rem);
    letter-spacing: -0.01em;
    line-height: 1.08;
    color: var(--ink);
}
.library-card .library-desc { margin: 0; font-size: 0.98rem; line-height: 1.64; }
.library-card .library-foot {
    margin-top: auto;
    padding-top: 1rem;
    font-family: var(--f-ui);
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--lib);
}
.library-card:hover .library-foot { color: var(--ink); }

/* Board grid — reuse of the card idiom at director scale. */
.board-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
    gap: 1.6rem;
    margin-top: 2rem;
}
.board-card {
    border: 1px solid var(--line);
    background: var(--paper-2);
    padding: 1.5rem 1.4rem;
}
.board-card .board-name {
    font-family: var(--f-display);
    font-weight: 470;
    font-size: 1.16rem;
    color: var(--ink);
    line-height: 1.15;
}
.board-card .board-role {
    display: block;
    margin: 0.3rem 0 0.9rem;
    font-family: var(--f-mono);
    font-size: 0.63rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--brass);
}
.board-card p { font-size: 0.95rem; line-height: 1.62; margin: 0; }