/*
         * Field Journal — the naturalist observing the veld.
         * Warm charcoal ground, ivory type, moss panels, brass for labels and rules.
         * Cormorant Garamond for display, EB Garamond for reading. No radius, hairline rules,
         * photographs framed like plates. Rhythm (issue #17): 88px between sections, 32px card
         * gap, 72px gutter on desktop, labels 13–14px uppercase .12em, body 18px.
         * See README → Design.
         */
        :root {
            --ground: #1C1917;
            --surface: #24201B;
            --moss: #232A22;
            --moss-rule: #3F4A3B;
            --rule: #3A3128;
            --frame: #5B4F3A;
            --brass: #C4A265;
            --ivory: #EDE6D6;
            --body: #D8CFBE;
            --meta: #A89E8C;
            --faint: #8A8073;
            --oxblood: #7A2E2B;
            --font-display: "Cormorant Garamond", "Cormorant", Garamond, Georgia, serif;
            --font-body: "EB Garamond", Garamond, Georgia, serif;
            --gutter: clamp(20px, 5vw, 72px);
            --header-h: 72px;
            --section: 88px;
            --card-gap: 32px;

            /* legacy names, still used by the admin shell */
            --color-ground: var(--ground);
            --color-surface: var(--surface);
            --color-rule: var(--rule);
            --color-display: var(--ivory);
            --color-body: var(--body);
            --color-meta: var(--meta);
            --font-serif: var(--font-body);
        }
        *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
        html { -webkit-text-size-adjust: 100%; }
        body { background: var(--ground); color: var(--body); font-family: var(--font-body); font-size: 18px; line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
        img { display: block; max-width: 100%; }
        a { color: inherit; text-decoration: none; transition: color 180ms; }
        h1, h2, h3 { font-family: var(--font-display); font-weight: 500; color: var(--ivory); line-height: 1.05; text-wrap: balance; }
        h1 { font-size: clamp(2.5rem, 4.6vw, 3.75rem); }
        h2 { font-size: clamp(1.75rem, 2.8vw, 2.5rem); }
        h3 { font-size: clamp(1.4rem, 2vw, 1.9rem); }
        em, i { font-style: italic; }
        ::selection { background: var(--brass); color: var(--ground); }
        :focus-visible { outline: 1px solid var(--brass); outline-offset: 3px; }

        .container { width: 100%; max-width: 1440px; margin-inline: auto; padding-inline: var(--gutter); }
        .page-root { min-height: 100vh; background: var(--ground); }
        .page-body { padding-top: var(--header-h); }

        /* ---- Type helpers: one small-label register everywhere ---- */
        .eyebrow, .sc { font-size: 14px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--brass); }
        .eyebrow a:hover { color: var(--ivory); }
        .label { font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--meta); }
        .meta { font-size: 15px; color: var(--meta); }
        .species { font-style: italic; color: var(--meta); }
        .link-sc, .text-link, .link { font-size: 14px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--brass); border-bottom: 1px solid var(--frame); padding-bottom: 3px; }
        .link-sc:hover, .text-link:hover, .link:hover { color: var(--ivory); border-bottom-color: var(--brass); }
        .rule { border-top: 1px solid var(--rule); }
        .chip { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--brass); border: 1px solid var(--frame); padding: 8px 14px; line-height: 1.2; }
        .chip:hover { border-color: var(--brass); }

        /* ---- Header ---- */
        .site-header { position: fixed; inset: 0 0 auto 0; z-index: 50; height: var(--header-h); background: rgba(28, 25, 23, 0.96); border-bottom: 1px solid var(--rule); backdrop-filter: blur(6px); }
        .site-header .inner { display: flex; align-items: center; justify-content: space-between; height: 100%; gap: 24px; }
        .wordmark { font-family: var(--font-display); font-size: 25px; font-weight: 500; letter-spacing: 0.06em; color: var(--ivory); white-space: nowrap; line-height: 1; }
        .top-nav { display: flex; align-items: center; gap: clamp(20px, 2.4vw, 32px); }
        .top-nav a { font-size: 15px; letter-spacing: 0.08em; color: var(--body); padding: 12px 0; border-bottom: 1px solid transparent; }
        .top-nav a:hover { color: var(--brass); }
        .top-nav a.active { color: var(--ivory); border-bottom-color: var(--brass); }

        /* ---- Home hero: full-bleed, bottom scrim so the headline reads on any image ---- */
        .hero-section { position: relative; height: calc(100vh - var(--header-h)); min-height: 560px; max-height: 900px; margin-top: var(--header-h); overflow: hidden; background: var(--surface); }
        .hero-img { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; }
        .hero-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(28,25,23,0) 40%, rgba(28,25,23,0.78) 100%); pointer-events: none; }
        .hero-title-overlay { position: absolute; inset: auto 0 0 0; padding: 0 var(--gutter) clamp(40px, 8vh, 72px); display: flex; flex-direction: column; gap: 18px; align-items: flex-start; }
        .hero-eyebrow { font-size: 14px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--brass); text-shadow: 0 1px 10px rgba(0,0,0,0.6); }
        .hero-heading { font-family: var(--font-display); font-size: clamp(3rem, 5.85vw, 84px); font-weight: 500; line-height: 1.02; color: var(--ivory); max-width: 14ch; text-shadow: 0 2px 18px rgba(0,0,0,0.4); }
        .hero-cta { font-size: 14px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--brass); border-bottom: 1px solid var(--frame); padding-bottom: 3px; margin-top: 6px; }
        .hero-cta:hover { color: var(--ivory); border-bottom-color: var(--brass); }
        .plate-strip { display: flex; align-items: center; justify-content: space-between; gap: 8px 24px; flex-wrap: wrap; padding-block: 14px; border-bottom: 1px solid var(--rule); }
        .plate-strip .num { font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--meta); }
        .plate-strip .title { font-size: 15px; color: var(--body); }
        .plate-strip .right { font-size: 15px; color: var(--meta); }

        /* ---- Sections ---- */
        .section { padding-top: var(--section); }
        .section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; margin-bottom: 32px; flex-wrap: nowrap; }
        .section-head > * { min-width: 0; }
        .section-head .link { white-space: nowrap; flex: none; }
        .section-head .stack { display: flex; flex-direction: column; gap: 8px; }
        .section-head h2 { font-size: clamp(1.9rem, 2.8vw, 2.5rem); }
        .page-heading { padding-top: clamp(40px, 5vw, 56px); }
        .page-heading-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 40px; flex-wrap: wrap; padding-bottom: 16px; border-bottom: 1px solid var(--rule); }
        .page-heading-row .stack { display: flex; flex-direction: column; gap: 8px; }
        .page-h1 { margin: 0; }
        .page-intro { max-width: 60ch; color: var(--meta); font-size: 18px; margin-top: 16px; }
        .empty-note { font-style: italic; color: var(--meta); padding: 64px 0; }

        /* ---- Plates: photographs framed like plates; only two shapes, 3:2 and 2:3 ---- */
        .plate { position: relative; display: block; background: var(--surface); border: 1px solid var(--frame); overflow: hidden; }
        .plate.r32 { aspect-ratio: 3 / 2; }
        .plate.r23 { aspect-ratio: 2 / 3; }
        .plate.r169 { aspect-ratio: 16 / 9; }
        .plate img { width: 100%; height: 100%; object-fit: cover; transition: opacity 300ms; }
        .plate.natural img { height: auto; }
        .plate.missing img { display: none; }
        .plate.missing { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; }
        .plate.missing::before { content: attr(data-plate); font-family: var(--font-display); font-size: 34px; color: var(--frame); }
        .plate.missing::after { content: "Image unavailable"; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); }
        .plate.missing .plate-reveal { display: none; }
        figure.plate-fig { display: flex; flex-direction: column; gap: 10px; }
        .plate-cap { display: flex; flex-direction: column; gap: 2px; }
        .plate-cap .num { font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--meta); }
        .plate-cap .title { font-size: 17px; color: var(--ivory); line-height: 1.35; }
        .plate-cap .title a:hover { color: var(--brass); }
        .plate-cap .sub { font-size: 15px; font-style: italic; color: var(--meta); line-height: 1.4; }
        .plate-cap .sub:empty { display: none; }
        /* kept for any template not yet migrated */
        .photo-plate { background: var(--surface); border: 1px solid var(--frame); overflow: hidden; }
        .photo-plate img { width: 100%; height: 100%; object-fit: cover; }

        .grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--card-gap); }
        .grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
        .grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--card-gap); }

        /* Masonry flow for the work grid: three columns, plates keep 3:2 or 2:3 */
        .masonry { column-count: 3; column-gap: var(--card-gap); }
        .masonry > *, .masonry .plate-row > * { break-inside: avoid; margin-bottom: var(--card-gap); }
        .plate-row { display: contents; }
        .masonry.two { column-count: 2; }

        /* Feature card: the first item on an index page gets the full width */
        .feature { display: grid; grid-template-columns: 8fr 4fr; gap: 48px; align-items: end; }
        .feature .text { display: flex; flex-direction: column; gap: 14px; padding-bottom: 8px; }
        .feature .text h2 { font-size: clamp(2rem, 3.3vw, 3rem); }
        .feature .text p { color: var(--body); max-width: 36ch; }
        .feature + .rule { margin: 56px 0 48px; }
        .series-card--feature .series-card__link { align-self: flex-start; margin-top: 8px; }
        .series-grid-card .series-card__title { font-family: var(--font-display); font-size: clamp(1.5rem, 2.1vw, 30px); line-height: 1.1; }

        /* Typographic cover for a journal post without a picture */
        .type-cover { display: flex; align-items: flex-end; padding: 24px; background: var(--surface); border: 1px solid var(--frame); }
        .type-cover span { font-family: var(--font-display); font-size: clamp(1.5rem, 2.4vw, 34px); line-height: 1.1; color: var(--ivory); }

        /* Category tabs: 44px hit area, brass underline */
        .cat-tabs { display: flex; gap: 4px; flex-wrap: wrap; }
        .cat-tabs a { display: flex; align-items: center; min-height: 44px; padding: 12px 14px; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--meta); border-bottom: 1px solid transparent; white-space: nowrap; margin-bottom: -17px; }
        .cat-tabs a:hover { color: var(--ivory); }
        .cat-tabs a.active { color: var(--ivory); border-bottom-color: var(--brass); }
        .series-page .cat-tabs { flex-wrap: nowrap; }

        /* ---- Moss panel (a series on the home page) ---- */
        .moss-panel { background: var(--moss); border-block: 1px solid var(--moss-rule); margin-top: var(--section); padding-block: 72px; }
        .moss-panel .inner { display: grid; grid-template-columns: 5fr 7fr; gap: 64px; align-items: center; }
        .moss-panel .copy { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
        .moss-panel .copy h2 { font-size: clamp(2rem, 3.3vw, 3rem); }
        .moss-panel .copy p { color: var(--body); max-width: 40ch; }
        .moss-panel .plates { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; }
        .moss-panel .plates .stack { display: flex; flex-direction: column; gap: 16px; }
        .moss-panel .plate { border-color: #56634F; background: #1C221B; }

        /* ---- Prose ---- */
        .prose-masu { max-width: 60ch; font-size: 18px; line-height: 1.7; color: var(--body); }
        .prose-masu h2 { font-size: 28px; margin: 2.5rem 0 1rem; }
        .prose-masu h3 { font-size: 22px; margin: 2rem 0 .75rem; }
        .prose-masu p { margin-bottom: 1.25rem; }
        .prose-masu strong { color: var(--ivory); font-weight: 500; }
        .prose-masu a { color: var(--ivory); border-bottom: 1px solid var(--frame); }
        .prose-masu a:hover { color: var(--brass); border-bottom-color: var(--brass); }
        .prose-masu blockquote { border-left: 1px solid var(--brass); padding-left: 1.5rem; margin: 2rem 0; font-style: italic; color: var(--meta); }
        .prose-masu ul, .prose-masu ol { padding-left: 1.5rem; margin-bottom: 1.25rem; }
        .prose-masu hr { border: 0; border-top: 1px solid var(--rule); margin: 2.5rem 0; }
        .prose-masu img { border: 1px solid var(--frame); margin: 2rem 0; }

        /* ---- Photo page ---- */
        .photo-stage { height: 760px; max-height: 82vh; background: var(--surface); border: 1px solid var(--frame); display: block; position: relative; }
        .photo-stage img { width: 100%; height: 100%; object-fit: contain; }
        .photo-meta-row { display: flex; justify-content: space-between; align-items: center; gap: 16px 24px; flex-wrap: wrap; padding: 16px 0; border-bottom: 1px solid var(--rule); }
        .photo-meta-row .num { font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--meta); }
        .photo-meta-row .facts { font-size: 15px; color: var(--body); }
        .photo-meta-row .facts .how::before { content: ' · '; }
        .photo-nav { display: flex; justify-content: space-between; align-items: center; gap: 24px; font-size: 15px; color: var(--meta); }
        .photo-nav a, .photo-nav span { display: flex; align-items: center; min-height: 44px; }
        .photo-nav a:hover { color: var(--brass); }
        .photo-nav [aria-disabled] { color: var(--faint); }
        .photo-meta-row .actions { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; }
        .photo-caption-row { display: grid; grid-template-columns: 7fr 5fr; gap: 64px; padding-top: 28px; align-items: start; }
        .photo-caption-row .caption { font-size: 20px; line-height: 1.6; max-width: 60ch; color: var(--body); }
        .photo-caption-row .caption:empty { display: none; }

        /* ---- About ---- */
        .about-hero { display: grid; grid-template-columns: 2fr 3fr; gap: clamp(2.5rem, 5vw, 64px); align-items: start; padding-top: clamp(40px, 5vw, 56px); padding-bottom: 80px; }
        .about-hero.no-portrait { grid-template-columns: 1fr; }
        .about-portrait { position: sticky; top: calc(var(--header-h) + 32px); }
        .about-name { font-size: clamp(2.75rem, 5vw, 4.25rem); line-height: 1; margin-top: 12px; }
        .about-intro { font-size: clamp(1.15rem, 1.7vw, 1.4rem); font-style: italic; color: var(--meta); margin-top: 16px; max-width: 60ch; line-height: 1.45; }
        .about-band { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px; border-top: 1px solid var(--rule); padding-top: 48px; padding-bottom: 32px; }
        .about-col .eyebrow { margin-bottom: 18px; display: block; }
        .about-sub { font-size: 15px; font-style: italic; color: var(--meta); margin: 18px 0 4px; }
        .about-list { list-style: none; }
        .about-list li { border-top: 1px solid var(--rule); padding: 14px 0; }
        .about-list li:last-child { border-bottom: 1px solid var(--rule); }
        .about-list .name { display: block; font-size: 17px; color: var(--ivory); }
        .about-list .note { display: block; font-size: 15px; color: var(--meta); margin-top: 2px; line-height: 1.45; }
        .about-link { display: block; }
        .about-link:hover .name { color: var(--brass); }
        .about-note { font-size: 17px; color: var(--body); line-height: 1.6; margin-bottom: 18px; }
        .about-email { font-family: var(--font-display); font-size: clamp(1.35rem, 2vw, 1.6rem); color: var(--ivory); border-bottom: 1px solid var(--frame); word-break: break-word; }
        .about-email:hover { color: var(--brass); }
        .about-muted { color: var(--meta); }

        /* ---- Buttons ---- */
        .btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 22px; font-family: var(--font-body); font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; line-height: 1; border: 1px solid var(--brass); color: var(--brass); background: transparent; cursor: pointer; transition: background 180ms, color 180ms; }
        .btn:hover { background: var(--brass); color: var(--ground); }
        .btn.solid { background: var(--brass); color: var(--ground); }
        .btn.solid:hover { background: transparent; color: var(--brass); }
        .btn.ghost { background: transparent; color: var(--brass); }

        /* ---- Prints ---- */
        .prints-lead { display: grid; grid-template-columns: 5fr 7fr; gap: 64px; align-items: center; }
        .prints-room { display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 3; background: var(--surface); border: 1px solid var(--rule); }
        .prints-room .mount { width: 56%; aspect-ratio: 3 / 2; padding: 5%; background: var(--ivory); box-shadow: 0 30px 60px rgba(0,0,0,.5); }
        .prints-room .mount img { width: 100%; height: 100%; object-fit: cover; }
        .prints-body { display: grid; grid-template-columns: 7fr 4fr; gap: 80px; }
        .prints-how { display: flex; flex-direction: column; gap: 20px; border-left: 1px solid var(--rule); padding-left: 40px; align-items: flex-start; }
        .size-cards, .prints-cta, .mobile-only { display: none; }

        /* ---- Price table ---- */
        .price-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
        .price-table th { font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--meta); font-weight: 400; text-align: left; padding: 10px 0; border-bottom: 1px solid var(--frame); }
        .price-table th.num, .price-table td.num { text-align: right; }
        .price-table td { padding: 14px 0; border-bottom: 1px solid var(--rule); color: var(--body); font-size: 17px; }
        .price-table td.num { font-family: var(--font-display); font-size: 20px; color: var(--ivory); }
        .price-table td.num a:hover { color: var(--brass); }
        .price-table .cm { color: var(--ivory); }
        .price-table .in { color: var(--meta); font-size: 15px; }

        /* ---- Footer band ---- */
        .site-footer { background: var(--surface); border-top: 1px solid var(--rule); padding: 64px 0 40px; margin-top: var(--section); }
        .site-footer .cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px; }
        .site-footer .col { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
        .site-footer .statement { font-size: 15px; color: var(--meta); max-width: 34ch; }
        .site-footer .links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 24px; align-content: start; }
        .site-footer .links a { font-size: 15px; color: var(--body); }
        .site-footer .links a:hover { color: var(--brass); }
        .site-footer .email { font-family: var(--font-display); font-size: 24px; color: var(--ivory); border-bottom: 1px solid var(--frame); line-height: 1.2; word-break: break-word; }
        .site-footer .email:hover { color: var(--brass); }
        .site-footer .ig { font-size: 15px; color: var(--body); }
        .site-footer .ig:hover { color: var(--brass); }
        .site-footer .legal { display: flex; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; margin-top: 56px; padding-top: 20px; border-top: 1px solid var(--rule); font-size: 14px; color: var(--faint); }

        /* ---- Mobile bottom nav ---- */
        .bottom-nav, .more-sheet, .more-scrim { display: none; }

        @media (max-width: 1100px) {
            .masonry { column-count: 2; }
            .top-nav { gap: 20px; }
            .top-nav a { font-size: 14px; }
            .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
        }
        @media (max-width: 900px) {
            :root { --section: 64px; }
            .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
            .feature, .moss-panel .inner, .photo-caption-row { grid-template-columns: 1fr; }
            .feature { gap: 24px; }
            .about-hero { grid-template-columns: 1fr; }
            .about-portrait { position: static; max-width: 440px; }
            .about-band { grid-template-columns: 1fr; gap: 48px; }
            .site-footer .cols { grid-template-columns: 1fr; gap: 40px; }
            .photo-stage { height: auto; max-height: none; aspect-ratio: 3 / 2; }
        }
        @media (max-width: 768px) {
            :root { --header-h: 56px; }
            .top-nav { display: none; }
            .wordmark { font-size: 21px; }
            .bottom-nav { display: flex; position: fixed; inset: auto 0 0 0; z-index: 100; height: 64px; background: rgba(28,25,23,0.96); border-top: 1px solid var(--rule); padding: 0 4px; }
            .bottom-nav a, .bottom-nav button { display: flex; flex-direction: column; align-items: center; justify-content: center; flex: 1; min-height: 56px; gap: 4px; font-family: var(--font-body); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--meta); background: none; border: 0; cursor: pointer; }
            .bottom-nav a.active, .bottom-nav button[aria-expanded="true"] { color: var(--ivory); }
            .bottom-nav svg { width: 20px; height: 20px; }
            .more-scrim { display: block; position: fixed; inset: 0; z-index: 98; background: rgba(28,25,23,0.6); }
            .more-scrim[hidden] { display: none; }
            .more-sheet { display: flex; flex-direction: column; gap: 4px; position: fixed; inset: auto 0 calc(64px + env(safe-area-inset-bottom, 0px)) 0; z-index: 99; background: var(--surface); border-top: 1px solid var(--frame); padding: 10px 20px 20px; }
            .more-sheet[hidden] { display: none; }
            .more-sheet .handle { width: 36px; height: 3px; background: var(--frame); border-radius: 2px; align-self: center; margin-bottom: 10px; }
            .more-sheet a.row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; border-bottom: 1px solid var(--rule); font-family: var(--font-display); font-size: 24px; color: var(--ivory); }
            .more-sheet a.row .hint { font-family: var(--font-body); font-size: 13px; color: var(--meta); }
            .more-sheet .foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-top: 16px; }
            .more-sheet .foot a { display: flex; align-items: center; min-height: 44px; font-size: 13px; color: var(--body); }
            .more-sheet .foot a.link { font-size: 11px; min-height: 0; }
            .page-root { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px) + 32px); }
            .site-footer { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px) + 32px); }
            .plate-strip .right { display: none; }
        }
        @media (max-width: 640px) {
            :root { --gutter: 20px; --section: 36px; --card-gap: 16px; }
            body { font-size: 17px; line-height: 1.55; }
            h1 { font-size: 44px; }
            h2, .section-head h2 { font-size: 28px; }
            .meta { font-size: 13px; }
            .eyebrow, .sc { font-size: 12px; }
            .link-sc, .text-link, .link, .hero-cta { font-size: 11px; }
            .prose-masu { font-size: 17px; line-height: 1.55; }

            /* Tab-bar clearance: nothing ends under the bar */
            .page-root { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px) + 32px); }
            .site-footer { padding: 40px 0 calc(64px + env(safe-area-inset-bottom, 0px) + 32px); margin-top: var(--section); }
            .site-footer .legal { margin-top: 32px; flex-direction: column; gap: 4px; }
            .has-cta .page-root { padding-bottom: calc(124px + env(safe-area-inset-bottom, 0px) + 32px); }
            .has-cta .site-footer { padding-bottom: calc(124px + env(safe-area-inset-bottom, 0px) + 32px); }

            /* Grids */
            .grid-3, .grid-2, .grid-4 { grid-template-columns: 1fr; gap: 24px; }
            .grid-3.two-up, .grid-4.two-up { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; }
            .masonry, .masonry.two { column-count: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; align-items: start; }
            .masonry > *, .masonry .plate-row > * { margin-bottom: 0; }
            .plate-row.full > * { grid-column: 1 / -1; }
            .plate-row.pair .plate-cap .sub, .two-up .plate-cap .sub { display: none; }
            figure.plate-fig { gap: 8px; }
            .plate-cap .num { font-size: 11px; }
            .plate-cap .title { font-size: 15px; line-height: 1.3; }
            .plate-cap .sub { font-size: 13px; }

            /* Horizontal snap rows for related / recent sets */
            .snap { display: flex; grid-template-columns: none; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 var(--gutter) 4px; margin: 0 calc(-1 * var(--gutter)); scrollbar-width: none; -webkit-overflow-scrolling: touch; }
            .snap::-webkit-scrollbar { display: none; }
            .snap > * { flex: none; width: 280px; scroll-snap-align: start; }
            .snap.tight > * { width: 200px; }
            .snap .plate-cap .sub { display: none; }

            /* Section header on one line */
            .section-head { align-items: baseline; gap: 16px; margin-bottom: 14px; }
            .page-heading-row { flex-direction: column; align-items: stretch; gap: 12px; padding-bottom: 0; border-bottom: 0; }
            .page-heading-row .stack { gap: 6px; }

            /* Filter tabs: one row that scrolls, edge fade */
            .cat-tabs { flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; gap: 2px; padding: 0 12px 0 0; margin: 0 calc(-1 * var(--gutter)); padding-left: 8px; border-bottom: 1px solid var(--rule); -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent); }
            .cat-tabs::-webkit-scrollbar { display: none; }
            .cat-tabs a { flex: none; scroll-snap-align: start; padding: 12px 12px; font-size: 11px; margin-bottom: -1px; }
            .series-page .cat-tabs { display: none; }

            /* Home */
            .hero-section { height: min(520px, 70vh); min-height: 420px; }
            .hero-heading { font-size: 48px; }
            .hero-title-overlay { padding-bottom: 28px; gap: 12px; }
            .plate-strip { flex-wrap: nowrap; gap: 12px; padding-block: 12px; }
            .plate-strip > span:first-child { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
            .plate-strip .num { font-size: 11px; }
            .plate-strip .title { font-size: 14px; }
            .plate-strip .right { display: block; flex: none; font-size: 12px; white-space: nowrap; }
            .plate-strip .right .long { display: none; }
            .moss-panel { padding-block: 28px; }
            .moss-panel .inner { gap: 14px; }
            .moss-panel .copy { gap: 10px; }
            .moss-panel .copy h2 { font-size: 34px; }
            .moss-panel .copy p { display: none; }
            .moss-panel .plates { grid-template-columns: 1fr; }
            .moss-panel .plates .stack { display: none; }
            .notes-rows { display: flex; flex-direction: column; gap: 0; }
            .notes-rows > figure { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 14px; align-items: start; padding: 14px 0; border-top: 1px solid var(--rule); }
            .notes-rows > figure:first-child { border-top: 0; padding-top: 0; }
            .notes-rows .plate { aspect-ratio: 1 / 1; }
            .notes-rows .type-cover span { font-size: 15px; }
            .notes-rows .plate-cap .title { font-size: 16px; }
            .notes-rows .plate-cap .sub { display: none; }

            /* Feature card (series / journal lead) */
            .feature { gap: 14px; }
            .feature .text { padding-bottom: 0; gap: 10px; }
            .feature .text h2 { font-size: 34px; }
            .feature + .rule { margin: 32px 0 24px; }

            /* Series index: a single, measured hierarchy instead of two cramped columns. */
            .series-page .series-card--feature { gap: 14px; }
            .series-page .series-card--feature .series-card__image { aspect-ratio: 3 / 2; }
            .series-page .series-card--feature .text { gap: 0; }
            .series-page .series-card--feature .series-card__meta { margin-bottom: 6px; }
            .series-page .series-card--feature .series-card__title { font-size: clamp(30px, 8.21vw, 32px); line-height: 1.15; margin-bottom: 8px; text-wrap: balance; }
            .series-page .series-card--feature .series-card__blurb { margin-bottom: 14px; }
            .series-page .series-card--feature .series-card__link { margin-top: 0; }
            .series-page .series-card--feature .series-card__title + .series-card__link { margin-top: 6px; }
            .series-page .feature + .rule { margin: 28px 0; }
            .series-page .series-grid { grid-template-columns: 1fr; gap: 0; }
            .series-page .series-grid-card { gap: 14px; padding-block: 28px; }
            .series-page .series-grid-card:first-child { padding-top: 0; }
            .series-page .series-grid-card:last-child { padding-bottom: 0; }
            .series-page .series-grid-card + .series-grid-card { border-top: 1px solid var(--rule); }
            .series-page .series-grid-card .plate-cap { gap: 0; }
            .series-page .series-grid-card .series-card__meta { margin-bottom: 6px; }
            .series-page .series-grid-card .series-card__title { font-size: clamp(24px, 6.67vw, 26px); font-weight: 500; line-height: 1.15; margin-bottom: 8px; text-wrap: balance; }
            .series-page .series-grid-card .series-card__blurb { margin-bottom: 14px; }

            /* Photo page: full-bleed image, two-line meta */
            .photo-h1 { font-size: 34px; line-height: 1.08; }
            .photo-stage { height: auto; max-height: none; aspect-ratio: var(--ratio, 3 / 2); margin: 0 calc(-1 * var(--gutter)); border: 0; background: var(--ground); }
            .photo-stage img { object-fit: cover; }
            .photo-stage .plate-reveal { display: none; }
            .photo-meta-row { flex-direction: column; align-items: stretch; gap: 14px; padding: 14px 0 0; border-bottom: 0; }
            .photo-meta-row .facts { display: block; font-size: 13px; color: var(--meta); }
            .photo-meta-row .facts .where { display: block; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--meta); }
            .photo-meta-row .facts .how { display: block; }
            .photo-meta-row .facts .how::before { content: none; }
            .photo-meta-row .num { display: none; }
            .photo-meta-row .actions { justify-content: space-between; gap: 12px; }
            .photo-meta-row .chip { font-size: 11px; padding: 8px 12px; }
            .photo-caption-row { gap: 14px; padding-top: 14px; }
            .photo-caption-row .caption { font-size: 17px; line-height: 1.55; }
            .photo-nav { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: 4px 0; }

            /* Prints */
            .prints-lead { grid-template-columns: 1fr; gap: 12px; }
            .prints-lead .text { gap: 12px; }
            .prints-room { margin: 20px calc(-1 * var(--gutter)) 0; border-left: 0; border-right: 0; }
            .prints-body { grid-template-columns: 1fr; gap: 28px; }
            .prints-how { border-left: 0; padding-left: 0; }
            .price-table-wrap { display: none; }
            .size-cards { display: flex; flex-direction: column; gap: 12px; }
            .size-card { border: 1px solid var(--rule); padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
            .size-card .head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
            .size-card .head .cm { font-size: 17px; color: var(--ivory); }
            .size-card .head .in { font-size: 13px; color: var(--meta); }
            .size-card .finishes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
            .size-card .finishes > a, .size-card .finishes > div { display: flex; flex-direction: column; gap: 2px; }
            .size-card .finishes .f { font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--meta); }
            .size-card .finishes .p { font-family: var(--font-display); font-size: 20px; color: var(--ivory); font-variant-numeric: tabular-nums; }
            .prints-cta { display: flex; position: fixed; left: 0; right: 0; bottom: calc(64px + env(safe-area-inset-bottom, 0px)); z-index: 98; height: 60px; padding: 0 var(--gutter); background: rgba(28,25,23,0.96); border-top: 1px solid var(--rule); align-items: center; justify-content: space-between; gap: 12px; }
            .prints-cta .meta { font-size: 13px; white-space: nowrap; }
            .prints-cta .btn { font-size: 12px; padding: 0 18px; min-height: 40px; }
            .mobile-only { display: inline; }

            /* Contact */
            .enq-field input, .enq-field textarea, .enq-field select { min-height: 48px; font-size: 16px; }
            .enq-submit-row .btn { width: 100%; }

            /* About */
            .about-hero { padding-bottom: 40px; }
            .about-band { padding-top: 32px; gap: 32px; }
        }
        @media (prefers-reduced-motion: reduce) {
            *, *::before, *::after { transition: none !important; }
        }

.plate-reveal { position: absolute; inset: auto 0 0; padding: 12px 16px; background: var(--ground); color: var(--ivory); font-size: 17px; opacity: 0; transform: translateY(6px); transition: opacity 180ms, transform 180ms; pointer-events: none; }
    .plate-reveal span { display: block; font-size: 14px; color: var(--brass); }
    .plate:hover .plate-reveal, .plate:focus-visible .plate-reveal { opacity: 1; transform: none; }
    a.plate:hover img, .plate-link:hover .plate img { transform: none; }
    [data-viewer]:focus-visible { outline: 2px solid var(--brass); outline-offset: 5px; }
    .hero-open { display: block; position: absolute; inset: 0; }
    .hero-title-overlay { pointer-events: none; }
    .hero-title-overlay a { pointer-events: auto; }
    .moss-panel .plate.natural { aspect-ratio: auto; align-self: center; }
    .photo-detail { padding-top: 48px; }
    .photo-detail-image { margin-top: 32px; }
    .photo-detail-image img { max-height: 80vh; object-fit: contain; }
    .photo-detail-notes { display: flex; justify-content: space-between; align-items: start; flex-wrap: wrap; gap: 32px; margin-top: 40px; }
    #photo-viewer { position: fixed; inset: 0; width: 100%; height: 100%; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); border: 0; background: var(--ground); color: var(--body); }
    #photo-viewer[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 12px; }
    #photo-viewer::backdrop { background: var(--ground); }
    #photo-viewer button, #photo-viewer a { font: inherit; color: var(--brass); border: 1px solid var(--rule); background: var(--ground); padding: 10px 14px; cursor: pointer; min-height: 44px; }
    #photo-viewer :focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }
    #photo-viewer button:disabled { visibility: hidden; }
    .viewer-toolbar { display: flex; justify-content: space-between; align-items: center; }
    .viewer-stage { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; min-height: 0; align-items: center; }
    .viewer-picture { height: 100%; min-height: 0; position: relative; display: grid; place-items: center; touch-action: pan-y pinch-zoom; }
    #viewer-image { width: 100%; height: 100%; min-height: 0; object-fit: contain; }
    #viewer-image.loading { visibility: hidden; }
    #viewer-status { position: absolute; padding: 20px; text-align: center; }
    .viewer-notes { max-height: 30dvh; overflow-y: auto; text-align: center; padding: 4px 12px; }
    #viewer-caption { white-space: pre-line; color: var(--meta); }
    #viewer-share-status { overflow-wrap: anywhere; user-select: text; }
    .viewer-notes nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 12px; }
    @media (max-width: 640px) { .viewer-stage { gap: 4px; } #photo-viewer button { padding: 10px; } .viewer-notes { max-height: 36dvh; } #viewer-title { font-size: 21px; } }
    @media (prefers-reduced-motion: reduce) { .plate-reveal { transition: none; } }