/* ================================================================
   Appia — styles.css
   Single stylesheet shared across all public pages.
   ================================================================ */

/* ── FONTS ──
   Only roman and italic Ten Oldstyle are loaded; bold variants
   are not used anywhere in the system.
*/
@font-face {
    font-family: 'Ten Oldstyle';
    src: url('fonts/tenoldstyle-regular.woff') format('woff'),
         url('fonts/tenoldstyle-regular.otf') format('opentype');
    font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Ten Oldstyle';
    src: url('fonts/tenoldstyle-italic.woff') format('woff'),
         url('fonts/tenoldstyle-italic.otf') format('opentype');
    font-weight: 400; font-style: italic; font-display: swap;
}

/* ── RESET ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

/* ── SKIP-TO-CONTENT (keyboard / screen-reader accessibility) ──
   Invisible until focused; pops down from the top of the viewport
   when a keyboard user tabs into the page.
*/
.skip-link {
    position: absolute;
    top: -100px;
    left: 16px;
    z-index: 300;
    background: var(--ink);
    color: var(--bg);
    padding: 12px 20px;
    font-family: var(--sans);
    font-size: 12px;
    font-weight: 400;
    letter-spacing: var(--track-wide);
    text-transform: uppercase;
    text-decoration: none;
    transition: top 0.2s ease;
}
.skip-link:focus {
    top: 12px;
    outline: 2px solid var(--bg);
    outline-offset: 2px;
}

/* ── TOKENS ──
   --bg     : cream page background
   --ink    : near-black text colour
   --ink-NN : ink colour at NN% opacity (used for body prose, rules, labels)
*/
:root {
    --bg:         #f4f3ef;
    --ink:        #1a1917;
    --ink-75:     rgba(26, 25, 23, 0.75);
    --ink-60:     rgba(26, 25, 23, 0.64);  /* nudged from .60 → .64: clears WCAG AA (≈4.7:1) for body prose on the cream ground */
    --ink-20:     rgba(26, 25, 23, 0.20);
    --ink-10:     rgba(26, 25, 23, 0.10);
    --serif:      'Ten Oldstyle', Georgia, serif;
    --sans:       'Karla', Helvetica, Arial, sans-serif;
    --nav-h:      96px;
    --track-wide: 0.18em;
    --track-mid:  0.10em;
    --max-prose:  680px;
    --pad-h:      80px;
    --section-v:  120px;

    /* ── LAYOUT MEASURE SYSTEM ──
       Container width by column count. Content is centred; --pad-h is the minimum
       page gutter. More columns → wider container → tighter margin. Sections pick the
       token matching their column count. Currently wired on About (html.page-about);
       roll site-wide by pointing the other pages' sections at the same tokens. */
    --w-1col:     780px;   /* single column of prose */
    --w-2col:     960px;   /* two columns (~430px each) */
    --w-3col:    1200px;   /* three columns (~357px each) */
    --gap-2col:   100px;
    --gap-3col:    64px;

    --accent:     #c8362b;   /* red clay — active-section marker (main nav + About page-nav) */
}

body {
    background: var(--bg);
    color: var(--ink);
    font-family: var(--sans);
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
}

/* ── NAV ── */
nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 260;
    height: var(--nav-h);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 var(--pad-h);
    transition: background 0.3s ease;
}
.nav-logo { position: absolute; left: var(--pad-h); }
.nav-links li:last-child { position: absolute; right: var(--pad-h); }
.nav-lock-li { position: absolute; right: var(--pad-h); }
/* About sits just left of the private-access icon, set off from the centred practice links. */
.nav-links li:nth-last-child(2) { position: absolute; right: calc(var(--pad-h) + 36px); }

nav.scrolled .nav-logo img { filter: invert(1); }
nav.scrolled .nav-links a { color: var(--ink); opacity: 1; }
nav.scrolled .nav-links a[aria-current="page"] { opacity: 1; }

nav.scrolled {
    background: rgba(244, 243, 239, 0.92);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* About: header is transparent over the image-only hero, then turns SOLID (not
   translucent) once the cream content has risen behind it, so section text doesn't
   show through the header as it scrolls out the top. Toggle timing: about.html. */
html.page-about nav.scrolled {
    background: var(--bg);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.nav-logo a { display: block; line-height: 0; text-decoration: none; }
.nav-logo img { height: 52px; width: auto; filter: none; transition: opacity 0.25s; }
.nav-logo img:hover { opacity: 0.7; }

.nav-links { list-style: none; display: flex; align-items: center; gap: 36px; }
.nav-links a {
    font-family: var(--sans);
    font-size: 15px;
    font-weight: 400;
    letter-spacing: var(--track-wide);
    text-transform: uppercase;
    color: var(--bg);
    text-decoration: none;
    opacity: 0.80;
    transition: opacity 0.2s, color 0.3s;
}
.nav-links a:hover,
.nav-links a[aria-current="page"] { opacity: 1; }
.nav-links a { position: relative; }
.nav-links a[aria-current="page"]::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -7px;
    width: 24px;
    height: 2px;
    background: var(--accent);
    animation: navMarkIn 0.5s ease both;
}
@keyframes navMarkIn { from { opacity: 0; transform: translateY(2px); } to { opacity: 1; transform: none; } }

.nav-private {
    display: flex;
    align-items: center;
    opacity: 0.50;
}
.nav-private:hover { opacity: 1; }
nav.scrolled .nav-private { color: #1a1917; }

/* ── MOBILE MENU ── */
.nav-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    z-index: 300;
    flex-direction: column;
    gap: 5px;
}
.nav-toggle span {
    display: block;
    width: 22px;
    height: 1px;
    background: var(--bg);
    transition: transform 0.3s ease, opacity 0.3s ease, background 0.3s ease;
}
nav.scrolled .nav-toggle span { background: var(--ink); }
.nav-toggle.open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.nav-mobile {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 250;
    background: var(--bg);
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: 0 48px;
}
.nav-mobile.open { display: flex; }
.nav-mobile a {
    display: block;
    font-family: var(--serif);
    font-size: clamp(2rem, 9vw, 3.2rem);
    font-weight: 400;
    color: var(--ink);
    text-decoration: none;
    line-height: 1.25;
    padding: 14px 0;
    letter-spacing: -0.01em;
    opacity: 0.65;
    transition: opacity 0.2s;
}
.nav-mobile a:hover,
.nav-mobile a[aria-current="page"] { opacity: 1; }
.nav-mobile a[aria-current="page"] { font-style: italic; }

/* ── HERO (shared base) ── */
.hero {
    background: var(--ink);
    position: relative;
    height: 100vh;
    min-height: 640px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 0 var(--pad-h);
}
.hero-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    filter: grayscale(100%);
}
.hero-overlay {
    position: absolute;
    inset: 0;
}
.hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    user-select: none;
}

/* ── HERO — INDEX (home) ── */
@keyframes heroFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.hero--home .hero-bg {
    background-image: url('images/hero.jpg');
    opacity: 0.60;
}
.hero--home .hero-overlay {
    background: linear-gradient(
        to bottom,
        rgba(12,12,10,0.22) 0%,
        rgba(12,12,10,0.00) 28%,
        rgba(12,12,10,0.00) 52%,
        rgba(12,12,10,0.62) 100%
    );
}
.hero--home .hero-content {
    position: absolute;
    top: 55%;
    right: 18%;
    text-align: right;
    width: min(880px, 62vw);
    animation: heroFadeIn 1.4s cubic-bezier(0.4, 0, 0.2, 1) 0.4s both;
}
.hero-tagline {
    font-family: var(--serif);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(2.2rem, 3.6vw, 3.2rem);
    line-height: 1.22;
    letter-spacing: -0.01em;
    color: var(--bg);
}

/* Shared rule + intro — used on home and about heroes */
.hero-rule {
    width: 36px;
    height: 1px;
    background: rgba(244, 243, 239, 0.30);
}
.hero--home .hero-rule { margin: 24px 0 24px auto; }
.hero--about .hero-rule { margin: 24px 0; }

.hero-intro {
    font-family: var(--sans);
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    line-height: 1.62;
    color: rgba(244, 243, 239, 0.78);
    letter-spacing: 0.005em;
}
.hero--about .hero-intro {
    text-align: left;
    margin: 0;
    max-width: 480px;
    font-size: 18px;
    line-height: 1.45;
}

/* ── HERO — ABOUT ── */
.hero--about {
    position: sticky;
    top: 0;
    z-index: 0;
    flex-direction: column;
    align-items: flex-start;
}
.hero--about .hero-bg {
    background-image: url('images/about.jpg');
    opacity: 0.42;
}
.hero--about .hero-overlay {
    background: linear-gradient(
        to right,
        rgba(12,12,10,0.11) 0%,
        rgba(12,12,10,0.04) 65%,
        rgba(12,12,10,0.07) 100%
    );
}
.hero--about .hero-content {
    transition: opacity 0.1s linear;
    text-align: left;
    max-width: 560px;
    animation: heroFadeIn 1.4s cubic-bezier(0.4, 0, 0.2, 1) 0.4s both;
}

/* About-page content lifts over the sticky hero */
.about-content {
    position: relative;
    z-index: 1;
    background: var(--bg);
    box-shadow: 0 -2px 24px rgba(26, 25, 23, 0.07);
}

/* ── HERO — SECTION PAGES ── */
.hero--section {
    position: sticky;
    top: 0;
    z-index: 0;
}
.hero--section .hero-bg {
    opacity: 0.55;
}
.hero--section .hero-overlay {
    background: linear-gradient(
        135deg,
        rgba(12,12,10,0.09) 0%,
        rgba(12,12,10,0.02) 60%,
        rgba(12,12,10,0.06) 100%
    );
}
.hero--section .hero-content {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    padding: 0 var(--pad-h);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.1s linear;
    color: var(--bg);
}
.hero--section .hero-title {
    font-family: var(--serif);
    font-weight: 400;
    font-style: italic;
    font-size: clamp(2rem, 3.5vw, 3.8rem);
    line-height: 1.05;
    letter-spacing: -0.01em;
    white-space: nowrap;
    color: var(--bg);
}

/* Per-page background images */
.hero--art-advisory          .hero-bg { background-image: url('images/art-advisory.jpg'); background-position: center 90%; }
.hero--cultural-consultancy  .hero-bg { background-image: url('images/cultural-consultancy.jpg'); }
.hero--curatorial-editorial  .hero-bg { background-image: url('images/curatorial-editorial.jpg'); }
.hero--artist-management     .hero-bg { background-image: url('images/artist-management.jpg'); filter: none; }

/* ── PAGE-NAV (sticky, about page) ── */
.page-nav-title {
    font-family: var(--serif);
    font-size: clamp(1.1rem, 2vw, 1.6rem);
    font-weight: 400;
    letter-spacing: -0.01em;
    color: var(--ink);
    margin-right: auto;
    padding-right: 24px;
    border-right: 1px solid var(--ink-10);
}
.page-nav {
    position: sticky;
    top: var(--nav-h);
    z-index: 150;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 28px;
    padding: 16px var(--pad-h);
    background: rgba(244, 243, 239, 0.92);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--ink-10);
    opacity: 0;
    pointer-events: none;
}
.page-nav a {
    font-family: var(--sans);
    font-size: 13px; font-weight: 400;
    letter-spacing: var(--track-wide);
    text-transform: uppercase;
    color: var(--ink);
    opacity: 0.45;
    text-decoration: none;
    transition: opacity 0.2s;
}
.page-nav a { position: relative; }
.page-nav a:hover { opacity: 1; }
/* Current section: full-strength link + a short red line beneath it. */
.page-nav a.current { opacity: 1; }
.page-nav a.current::after {
    content: "";
    position: absolute;
    left: 0;
    width: 24px;
    bottom: -6px;
    height: 2px;
    background: var(--accent);
}
/* The current section's own link is hidden (toggled in about.html): Practice is the
   landing section, so its link is redundant until you scroll on. display:none lets
   the remaining links close the gap. */
.page-nav a.is-hidden { display: none; }

/* ── About: vertical section rail on the right (wide screens only) ──
   The content is centred at --w-2col, so a right-side rail only has clear margin
   from ~1280px up; below that we keep the horizontal top bar so they don't collide. */
@media (min-width: 1280px) {
    html.page-about .page-nav {
        position: fixed;
        top: 50%;
        right: 36px;
        left: auto;
        transform: translateY(-50%);
        flex-direction: column;
        align-items: flex-end;
        justify-content: center;
        gap: 14px;
        width: auto;
        padding: 0;
        background: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        border-bottom: none;
        text-align: right;
    }
    html.page-about .page-nav-title {
        margin: 0 0 10px;
        padding: 0;
        border-right: none;
    }
    html.page-about .page-nav a { text-align: right; }
}

/* Name-only variant (service pages): the bar carries just the page title,
   so drop the link separator and let the title sit flush left. */
.page-nav--bare { gap: 0; }
.page-nav--bare .page-nav-title { margin-right: 0; padding-right: 0; border-right: none; }

/* ── SHARED PROSE / LABELS ── */
.section-label {
    font-family: var(--sans); font-size: 10px; font-weight: 400;
    letter-spacing: var(--track-wide); text-transform: uppercase;
    color: var(--ink-75);
    margin-bottom: 16px;
    display: block;
}
.section-heading {
    font-family: var(--serif); font-weight: 400;
    font-size: clamp(1.5rem, 2.4vw, 2.2rem);
    line-height: 1.05;
    letter-spacing: -0.01em;
    margin-bottom: 40px;
}
.prose {
    font-family: var(--sans); font-size: 16px; font-weight: 400;
    line-height: 1.85; color: var(--ink-60);
}
.prose p + p { margin-top: 1.5em; }
.prose em { font-style: italic; }
.divider { border-top: 1px solid var(--ink-10); }

/* Sections snap to the very top (under the header). Content is vertically centred, so
   the header overlays only the empty top padding and the cream reads continuous up to
   the top — the header whitens once the section is underneath it (see about.html). */
.practice, .etymology, .principal, .identity {
    scroll-margin-top: 0;
}

/* ── I. PRACTICE OVERVIEW (about) ──
   Flex column: heading stacks above the two-column content-row (split layout).
   The two-equal-column sizing of .content-row is set per-page below (desktop). */
.practice {
    padding: var(--section-v) var(--pad-h);
    display: flex;
    flex-direction: column;
}
.practice-intro {
    font-family: var(--serif); font-style: italic; font-weight: 400;
    font-size: clamp(1.3rem, 2vw, 1.7rem);
    line-height: 1.5; color: var(--ink);
    margin-bottom: 28px;
}
.practice-facts {
    padding-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 28px;
}
.fact-item {
    border-left: 1px solid var(--ink-10);
    padding-left: 20px;
}
.fact-label {
    font-family: var(--sans); font-size: 10px; font-weight: 400;
    letter-spacing: var(--track-wide); text-transform: uppercase;
    color: var(--ink-75);
    margin-bottom: 6px;
    display: block;
}
.fact-value {
    font-family: var(--serif); font-weight: 400;
    font-size: 1.25rem; color: var(--ink); line-height: 1.2;
}

/* ── II. ETYMOLOGY (about) ── */
.etymology { padding: var(--section-v) var(--pad-h); }
/* Two columns: Via Appia image (left) | text (right). */
.etymology-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 var(--gap-2col);
    align-items: stretch;
}
.etymology-image {
    position: relative;
    overflow: hidden;
    min-height: 300px;   /* floor so the absolutely-filled image never collapses;
                            on desktop the column stretches past it to match the text */
}
.etymology-image img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(100%);
    opacity: 0.85;
    display: block;
}
/* Right column: title + label right-aligned (the prose keeps its justify). */
.etymology-text { text-align: right; }

/* ── III. PRINCIPAL (about) ── */
.principal {
    padding: var(--section-v) var(--pad-h);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 100px;
    align-items: start;
}
.principal-name {
    font-family: var(--serif); font-weight: 400;
    font-size: clamp(1.5rem, 2.4vw, 2.2rem);
    line-height: 1.05;
    letter-spacing: -0.01em;
    margin-bottom: 36px;
}
.principal-portrait { overflow: hidden; align-self: center; }
.principal-portrait img {
    width: 100%;
    max-height: 520px;
    object-fit: cover;
    object-position: center top;
    filter: grayscale(100%);
    opacity: 0.75;
    display: block;
}
.portrait-placeholder {
    width: 100%; height: 360px;
    display: flex; align-items: center; justify-content: center;
    background: var(--ink-10);
    font-family: var(--sans); font-size: 10px;
    letter-spacing: var(--track-wide); text-transform: uppercase;
    color: var(--ink-20);
}

/* ── IV. IDENTITY / LOGOMARK (about) ── */
.identity { padding: var(--section-v) var(--pad-h); }
.identity-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 64px;
    align-items: start;
    margin-top: 0;
}
/* Sketch above the final mark, stacked and centred. Each image is shown whole (never
   cropped) at its natural proportions, bounded in height so both sit comfortably, and
   centred horizontally if it ends up narrower than the column. Natural sizing (not a
   stretched fill) so the frames can't collapse. */
.identity-marks {
    display: flex;
    flex-direction: column;
    gap: 32px;
    min-height: 0;
}
.identity-marks .identity-sketch,
.identity-marks .identity-mark {
    margin: 0;
    padding: 0;
    background: none;
    max-width: none;
    text-align: center;
}
.identity-marks .mark-frame img {
    display: inline-block;
    width: auto;
    max-width: 100%;
    max-height: 220px;
    object-fit: contain;
}
/* The sketch is still a photo on mid-gray paper — multiply blends that ground into the
   page. The final mark is a transparent PNG now, so it needs no blend. */
.identity-marks .identity-sketch .mark-frame img {
    mix-blend-mode: multiply;
}
.identity-sketch img {
    width: 100%;
    filter: grayscale(100%);
    display: block;
}
.identity-sketch-label {
    font-family: var(--sans); font-size: 10px; font-weight: 400;
    letter-spacing: var(--track-wide); text-transform: uppercase;
    color: var(--ink-75);
    margin-top: 14px; display: block;
}
.identity-mark {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 32px;
    background: var(--bg);
}
.identity-mark img { width: 100%; height: auto; filter: none; }
.identity-mark-label {
    font-family: var(--sans); font-size: 10px; font-weight: 400;
    letter-spacing: var(--track-wide); text-transform: uppercase;
    color: var(--ink-75);
    margin-top: 20px; display: block;
}
.identity-quote { padding-top: 4px; }
.identity-quote p {
    font-family: var(--sans);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.85;
    color: var(--ink-60);
    margin-top: 4px;
}

/* ── V. ITERATIONS PARALLAX (about) ── */
.iterations-parallax {
    position: relative;
    height: 100vh;
    overflow: hidden;
    margin-top: var(--section-v);
}
/* Vertical oversize only — keeps horizontal flush so the body
   doesn't need overflow-x: hidden as a band-aid. */
.iterations-parallax-bg {
    position: absolute;
    inset: -20% 0;
    background-image: url('images/logo-iterations.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: fixed;
    background-color: var(--bg);
}

/* ── About page — full-page section scroll-snap (mandatory) ──
   Scoped to html.page-about so the shared stylesheet leaves other pages alone.
   Mandatory snap applies on ALL viewports (by request). Hero, iterations-parallax,
   and contact are already 100vh; the four content sections (practice/etymology/
   identity/principal) are locked to 100vh and vertically centred on desktop (below)
   so each area fills one screen. On mobile they keep natural height — a 100vh lock
   would misfire on tall single-column stacks — while still snapping.
   Existing scroll-margin-top on practice/etymology/principal/identity keeps snap
   landings clear of the fixed nav; contact gets the same offset. */
html.page-about { scroll-snap-type: y mandatory; }
html.page-about .hero--about,
html.page-about .practice,
html.page-about .etymology,
html.page-about .identity,
html.page-about .iterations-parallax,
html.page-about .principal,
html.page-about .contact { scroll-snap-align: start; }
html.page-about .contact {
    scroll-margin-top: 0;
    padding-top: var(--nav-h);
    padding-bottom: 48px;
    /* Centre a 1040 area and let the content sit in its left half, so the Contact
       statement lands at the same spot as the Practice / "Art, seriously." block. */
    padding-left: max(var(--pad-h), calc((100% - 1040px) / 2));
    padding-right: max(var(--pad-h), calc((100% - 1040px) / 2));
}

/* Practice lead — emulates the homepage "Art, seriously." block: an italic serif
   tagline acting as the left column's title, sitting close above its statement; the
   practice overview sits in the right column. Sizes mirror the homepage
   .home-statement-tagline / .home-statement-intro. */
html.page-about .practice-tagline {
    font-family: var(--serif);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(1.6rem, 2.6vw, 2.2rem);
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--ink);
    margin-bottom: 28px;
}
html.page-about .practice-statement {
    /* Matches the home page "Art, seriously." intro (sans, 16px, ink-75). */
    font-family: var(--sans);
    font-weight: 400;
    font-size: 1rem;
    line-height: 1.75;
    color: var(--ink-75);
}

/* Trial: justify the two body columns (flush both edges — the "tube" look) with
   hyphenation on, to keep word spacing even at this ~480px measure. The italic
   tagline stays ragged. Revert by removing this block. */
html.page-about .content-body,
html.page-about .prose,
html.page-about .identity-quote p {
    text-align: justify;
    -webkit-hyphens: auto;
    hyphens: auto;
}

/* Layout system: centre each section's content on the width for its column count,
   via inline padding. Keeps the full-width divider borders, floors at --pad-h on
   narrow screens, and lines every section's content edges up with the others.
   All of About's body sections are two-column (--w-2col); the 3-col token stays in
   :root for the service pages' Areas-of-Practice grid when this rolls out. */
html.page-about .identity,
html.page-about .principal {
    padding-left: max(var(--pad-h), calc((100% - var(--w-2col)) / 2));
    padding-right: max(var(--pad-h), calc((100% - var(--w-2col)) / 2));
}
/* Etymology is single-column text now → the one-column reading measure. */
html.page-about .etymology {
    padding-left: max(var(--pad-h), calc((100% - var(--w-2col)) / 2));
    padding-right: max(var(--pad-h), calc((100% - var(--w-2col)) / 2));
}
/* Column gaps follow the system tokens. */
html.page-about .etymology-body,
html.page-about .principal,
html.page-about .identity-content {
    column-gap: var(--gap-2col);
}

/* Desktop: each content area fills one screen. Mirrors the Cultural Consultancy /
   Artist Management full-page pattern (sections pinned to 100vh). Grid sections
   (practice, principal) centre via align-content; block sections (etymology,
   identity) centre via flex column. */
@media (min-width: 769px) {
    html.page-about .principal {
        min-height: 100vh;
        align-content: center;
    }
    html.page-about .practice,
    html.page-about .etymology,
    html.page-about .identity {
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        /* safe center: centre when there's room, but pin to the top (below the nav)
           rather than sliding up under it when content is taller than the viewport. */
        justify-content: safe center;
    }
    /* Practice carries more copy than the other sections (two-line heading + a
       four-paragraph body column), so its default 120px top/bottom padding leaves
       no room to centre on shorter windows. Trim it — keep nav-height top clearance. */
    html.page-about .practice,
    html.page-about .etymology,
    html.page-about .identity,
    html.page-about .principal {
        padding-top: var(--nav-h);
        padding-bottom: 48px;
    }
    /* Practice section: two-equal-column split (italic lead | body), like the service
       pages. Desktop-only so mobile keeps the base single-column .content-row collapse.
       Heading + row share a centred 1080px column so the whole block sits centred on the
       page (matching how the service pages centre their content-row). */
    html.page-about .practice .section-heading {
        max-width: 1080px;
        margin-left: auto;
        margin-right: auto;
    }
    /* Two equal columns at the homepage's geometry (80px gap, 1040px max-width). */
    /* Matches the home page "Art, seriously." grid exactly (1040 / 80px gap). */
    html.page-about .content-row {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        column-gap: 80px;
        max-width: 1040px;
        margin: 0 auto;
        align-items: stretch;
    }
    /* Lead block vertically centred in its column, capped like home-practice-text. */
    html.page-about .practice-lead {
        display: flex;
        flex-direction: column;
        justify-content: center;
        max-width: 500px;
    }
}

/* ── SCROLL CUE (light, over a dark hero) — used on the About image-only hero.
   Mirrors the homepage cue (which carries its own inline copy). ── */
.scroll-cue {
    position: absolute;
    left: 50%;
    bottom: 40px;
    transform: translateX(-50%);
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    transition: opacity 0.5s ease;
}
.scroll-cue.hidden { opacity: 0; pointer-events: none; }
.scroll-cue-label {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    font-family: var(--sans);
    font-size: 10px;
    font-weight: 400;
    letter-spacing: var(--track-wide);
    text-transform: uppercase;
    color: rgba(244, 243, 239, 0.70);
}
.scroll-cue-line {
    width: 1px;
    height: 56px;
    background: linear-gradient(to bottom, rgba(244,243,239,0.55), rgba(244,243,239,0));
    position: relative;
    overflow: hidden;
}
.scroll-cue-line::after {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 40%;
    background: rgba(244, 243, 239, 0.95);
    animation: scrollCue 1.9s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
@keyframes scrollCue {
    0%   { transform: translateY(-100%); opacity: 0; }
    25%  { opacity: 1; }
    100% { transform: translateY(240%);  opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .scroll-cue-line::after { animation: none; }
    .nav-links a[aria-current="page"]::after { animation: none; }
}

/* ── Art Advisory — three-column capabilities + full-page section snap ──
   Scoped to html.page-art-advisory; the other practice pages keep their
   adaptive grid and normal scroll. */

/* Areas of Practice → three columns at ≥769px (six items = two rows of three);
   the existing max-width:768px rule still collapses it to one column on mobile. */
@media (min-width: 769px) {
    html.page-art-advisory .capabilities-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Full-page section snap (hero fills the screen, then content). */
html.page-art-advisory { scroll-snap-type: y mandatory; }
html.page-art-advisory .hero--section,
html.page-art-advisory .content,
html.page-art-advisory .area-practice,
html.page-art-advisory .editorial-parallax { scroll-snap-align: start; }

/* Header stays transparent over the cream sections (no opaque bar mid-slide);
   links stay dark via nav.scrolled for legibility. */
html.page-art-advisory nav.scrolled {
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* Areas of Practice — three-column grid sized for a single screen. */
html.page-art-advisory .capabilities-grid {
    max-width: 1040px;
    column-gap: 56px;
    row-gap: 48px;
}
html.page-art-advisory .capability-item { padding-left: 24px; }
html.page-art-advisory .capability-title {
    font-size: clamp(1.25rem, 1.7vw, 1.5rem);
    line-height: 1.2;
    letter-spacing: -0.01em;
    margin-bottom: 12px;
}
html.page-art-advisory .capability-desc {
    font-size: 15px;
    line-height: 1.7;
}

/* Areas of Practice — centred block: label + grid sit on the page midline;
   item text stays left so the border-left accent still reads. */
html.page-art-advisory .capabilities-label { text-align: center; }
html.page-art-advisory .capabilities-grid { margin-left: auto; margin-right: auto; }

/* Closing — footer sits on the white close, so dark type. */
.editorial-parallax--advisory .site-footer {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    z-index: 2;
    background: transparent;
    border-top: none;
    color: var(--ink-60);
}
.editorial-parallax--advisory .site-footer a { color: var(--ink-60); }
.editorial-parallax--advisory .site-footer a:hover { color: var(--ink); }

/* Content — one screen: italic lead (left) + body (right). */
html.page-art-advisory .content {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: calc(var(--nav-h) + 40px);   /* centre below the fixed header, not under it */
    padding-bottom: 40px;
}
html.page-art-advisory .content-row {
    grid-template-columns: 0.9fr 1.1fr;
    column-gap: 80px;
    max-width: 1040px;
    margin: 0 auto;
    align-items: center;
}
html.page-art-advisory .content-kicker {
    font-family: var(--serif);
    font-style: normal;
    font-weight: 400;
    font-size: clamp(1.5rem, 2vw, 1.85rem);
    line-height: 1.1;
    letter-spacing: -0.01em;
    color: var(--ink);
    margin-bottom: 18px;
}
html.page-art-advisory .content-intro {
    margin-bottom: 0;
    font-size: clamp(1.1rem, 1.4vw, 1.3rem);
    line-height: 1.55;
}
html.page-art-advisory .content-body { text-align: justify; }

/* Areas of Practice — three-column grid held on a single full screen,
   vertically centred; the grid itself is centred via margin auto above. */
html.page-art-advisory .area-practice {
    position: relative;   /* own paint layer, so the hero's fixed bg can't show through */
    z-index: 1;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: var(--bg);
    padding: calc(var(--nav-h) + 48px) var(--pad-h) 64px;
}

/* ── VI. CONTACT (about) ── */
.contact {
    min-height: 100vh;
    padding: var(--section-v) var(--pad-h);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;   /* content sits at the left, like the statement blocks */
}
.contact-sentence {
    font-family: var(--sans); font-size: 16px; font-weight: 400;
    line-height: 1.85; color: var(--ink-60);
    margin-bottom: 48px;
    max-width: 500px;
}
.contact-email {
    display: block;
    font-family: var(--serif); font-size: clamp(1.5rem, 2.4vw, 2.2rem);
    font-weight: 400; color: var(--ink);
    letter-spacing: -0.01em;
    text-decoration: none; margin-bottom: 28px;
    transition: opacity 0.2s;
}
.contact-email:hover { opacity: 0.65; }
.contact-address {
    font-family: var(--sans); font-size: 13px; font-weight: 400;
    font-style: normal; line-height: 1.7; color: var(--ink-60);
}

/* ── SECTION PAGES (art-advisory, cultural-consultancy, curatorial-editorial, artist-management) ── */
.content {
    position: relative;
    z-index: 1;
    background: var(--bg);
    box-shadow: 0 -2px 24px rgba(26, 25, 23, 0.07);
    padding: 32px var(--pad-h) 120px;
}
.content-intro {
    font-family: var(--serif);
    font-weight: 400;
    font-size: clamp(1.5rem, 2.5vw, 2rem);
    line-height: 1.5;
    color: var(--ink);
    max-width: var(--max-prose);
    margin-bottom: 64px;
    font-style: italic;
}
.content-body {
    font-family: var(--sans);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.85;
    color: var(--ink-60);
    max-width: var(--max-prose);
}
.content-body p + p { margin-top: 1.5em; }

/* About — Practice right column: a unified profile ledger (when / where / scope,
   then Specialisation). fact-item label/value styling is shared with the other
   pages; the Specialisation entry carries a short stacked list, not a single value. */
html.page-about .practice .content-row { align-items: start; }
html.page-about .practice .content-body { text-align: left; }
html.page-about .facts-inline {
    display: flex;
    gap: 40px;
}
html.page-about .facts-inline .fact-item { flex: 1; }
html.page-about .spec-list {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
html.page-about .spec-name {
    display: block;
    font-family: var(--serif);
    font-size: 1.1rem;
    line-height: 1.25;
    color: var(--ink);
}
html.page-about .spec-note {
    display: block;
    margin-top: 5px;
    font-family: var(--sans);
    font-size: 12px;
    line-height: 1.5;
    color: var(--ink-60);
}

/* Sticky page title that fades in once the hero is covered */
.content-title {
    position: sticky;
    top: var(--nav-h);
    z-index: 5;
    background: var(--bg);
    border-bottom: 1px solid var(--ink-10);
    font-family: var(--serif);
    font-weight: 400;
    font-size: clamp(1.5rem, 2.4vw, 2.2rem);
    line-height: 1.1;
    letter-spacing: -0.01em;
    color: var(--ink);
    padding: 18px 0 22px;
    margin-bottom: 64px;
    opacity: 0;
    transition: opacity 0.4s ease;
}

/* ── EDITORIAL FIGURES ── */

/* Base figure: shared image rules + caption styling.
   Specific sizing is set by the modifier classes below. */
.editorial-figure {
    margin: 0;
    width: 100%;
}
.editorial-figure img {
    width: 100%;
    height: auto;
    display: block;
}
.editorial-figure figcaption {
    font-family: var(--sans);
    font-size: 10px;
    font-weight: 400;
    letter-spacing: var(--track-wide);
    text-transform: uppercase;
    color: var(--ink-75);
    margin-top: 16px;
}

/* Variant: aside — image sits in a column of a content-row grid (alongside text) */
.editorial-figure--aside {
    /* width is controlled by the grid track */
}

/* Variant: wide — centred image breaking past the prose column.
   Used between body and capabilities for landscape / single-display images. */
.editorial-figure--wide {
    max-width: 880px;
    margin: 96px auto;
}

/* Content-row: two-column grid for body/intro text + aside image.
   Default orientation: text on the left, image on the right. */
.content-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
    column-gap: 80px;
    align-items: start;
    margin: 0 0 80px;
    max-width: 1040px;
}

/* Reversed orientation: image on the left, text on the right. */
.content-row--reversed {
    grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
}

/* Inside a content-row, prose blocks shouldn't impose their own max-width
   — the grid controls width. */
.content-row .content-body,
.content-row .content-intro {
    max-width: none;
}

/* ── EDITORIAL PARALLAX (full-bleed closing image) ── */
.editorial-parallax {
    position: relative;
    z-index: 1;
    height: 100vh;
    overflow: hidden;
}
.editorial-parallax-bg {
    position: absolute;
    inset: 0;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

/* Closing — Tobey cartoon as a transparent PNG on white; its soft vignette
   edges fade into the white surround, so there's no hard square edge. */
.editorial-parallax--advisory {
    background: var(--bg);
}
.editorial-parallax--advisory .editorial-parallax-bg {
    background-image: url('images/advisory-tobey-Photoroom.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: scroll;   /* not fixed, so contain respects the reduced box */
    filter: none;
    top: 120px;      /* keep the image below the header */
    bottom: 100px;   /* reserve a band for the footer; lifts the image up */
}

/* Cultural-consultancy close: RGJ line drawing (transparent paper) sits contained on the
   cream surround — its ink strokes read as black on cream; a dark surround would swallow them. */
.editorial-parallax--cultural-consultancy {
    background: var(--bg);
}
.editorial-parallax--cultural-consultancy .editorial-parallax-bg {
    background-image: url('images/cultural-consultancy-rgj.png');
    background-size: contain;
}

/* Artist-management close: Schulz "never really suffered" at full viewport width,
   anchored to the bottom (image fills width, dark surround above if image is shorter
   than viewport, or top crop if taller) */
.editorial-parallax--artist-management {
    background: var(--ink);
}
.editorial-parallax--artist-management .editorial-parallax-bg {
    background-image: url('images/artist-management-schulz.jpg');
    background-size: 100% auto;
    background-position: center 85%;
}

/* Curatorial-editorial close: Pullman page fills the full viewport (cover), cream surround */
.editorial-parallax--curatorial-editorial {
    background: var(--bg);
}
.editorial-parallax--curatorial-editorial .editorial-parallax-bg {
    background-image: url('images/curatorial-editorial-pullman.jpg');
    background-size: cover;
    background-position: center;
}

/* Closing-image shade: a subtle darkening over the parallax image only (painted under
   the footer/credit, which sit at z-index 2-3). Gentle on the light Schulz comic so the
   dark footer text still reads; deeper and bottom-weighted on the busy Pullman page so
   the light footer text carries. */
.editorial-parallax--artist-management .editorial-parallax-bg::after,
.editorial-parallax--curatorial-editorial .editorial-parallax-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.editorial-parallax--artist-management .editorial-parallax-bg::after {
    background: linear-gradient(to bottom, rgba(0,0,0,0.05), rgba(0,0,0,0.15));
}
.editorial-parallax--curatorial-editorial .editorial-parallax-bg::after {
    background: linear-gradient(to bottom, rgba(0,0,0,0.12), rgba(0,0,0,0.30));
}

/* ── IMAGE CREDIT — small transparent title over hero & parallax images.
   Borrows the figcaption treatment (10px uppercase, wide tracking, sans) and
   fades in/out with the image via .is-visible (toggled in image-credits.js).
   Transparency lives in the colour alpha; the transition only animates opacity. ── */
.image-credit {
    position: absolute;
    right: var(--pad-h);
    z-index: 3;
    margin: 0;
    max-width: min(62vw, 360px);
    font-family: var(--sans);
    font-size: 10px;
    font-weight: 400;
    letter-spacing: var(--track-wide);
    text-transform: uppercase;
    text-align: right;
    line-height: 1.5;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.8s ease;
}
.image-credit.is-visible { opacity: 1; }

/* Hero: cream type over the (dark, grayscaled) image */
.hero .image-credit {
    bottom: 28px;
    color: rgba(244, 243, 239, 0.62);
}

/* About hero: credit moves to the lower LEFT (the about image is empty there,
   and there is content lower-right). Inherits the hero colour + bottom from above. */
html.page-about .hero .image-credit {
    left: var(--pad-h);
    right: auto;
    text-align: left;
}

/* Parallax: lift clear of the footer band; tone matched to each closing image
   (same logic as each page's footer-link colour). */
.editorial-parallax .image-credit { bottom: 92px; }
.editorial-parallax--advisory .image-credit,
.editorial-parallax--cultural-consultancy .image-credit,
.editorial-parallax--artist-management .image-credit { color: var(--ink-60); }
.editorial-parallax--curatorial-editorial .image-credit { color: rgba(244, 243, 239, 0.7); }

/* Capability grid */
.capabilities {
    margin-top: 80px;
    padding-top: 56px;
    border-top: 1px solid var(--ink-10);
}
.capabilities-label {
    font-family: var(--sans);
    font-size: 10px;
    font-weight: 400;
    letter-spacing: var(--track-wide);
    text-transform: uppercase;
    color: var(--ink-75);
    margin-bottom: 40px;
}
.capabilities-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 32px 48px;
}
.capability-item {
    border-left: 1px solid var(--ink-10);
    padding-left: 20px;
}
.capability-title {
    font-family: var(--serif);
    font-size: 1.125rem;
    font-weight: 400;
    line-height: 1.25;
    margin-bottom: 8px;
}
.capability-desc {
    font-family: var(--sans);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.7;
    color: var(--ink-60);
}

/* ── CURATORIAL · EDITORIAL split layout ── */
.split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 80px;
    margin-top: 80px;
    padding-top: 56px;
    border-top: 1px solid var(--ink-10);
}
.split-col-label {
    font-family: var(--sans);
    font-size: 10px;
    font-weight: 400;
    letter-spacing: var(--track-wide);
    text-transform: uppercase;
    color: var(--ink-75);
    margin-bottom: 16px;
}
.split-col-title {
    font-family: var(--serif);
    font-weight: 400;
    font-size: clamp(1.5rem, 2.4vw, 2.2rem);
    line-height: 1.1;
    letter-spacing: -0.01em;
    color: var(--ink);
    margin-bottom: 36px;
}
.capability-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 28px;
}
.capability-list li {
    border-left: 1px solid var(--ink-10);
    padding-left: 20px;
}
.capability-list h3 {
    font-family: var(--serif);
    font-size: 1.125rem;
    font-weight: 400;
    line-height: 1.25;
    margin-bottom: 8px;
    color: var(--ink);
}

/* ── FOOTER (on section pages only) ──
   Must sit above the sticky section-page hero (z-index 0) and have
   its own opaque background, otherwise the hero shows through.
*/
.site-footer {
    position: relative;
    z-index: 1;
    background: var(--bg);
    border-top: 1px solid var(--ink-10);
    padding: 32px var(--pad-h);
    font-family: var(--sans);
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0.05em;
    color: var(--ink-60);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    text-align: center;
}
.site-footer a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s;
}
.site-footer a:hover { color: var(--ink); }
.site-footer .dot {
    display: inline-block;
    opacity: 0.5;
}

/* ── RESPONSIVE ── */
@media (max-width: 1024px) {
    :root { --pad-h: 48px; }
    /* Below this width the centred practice links would crowd the floated About, so let it rejoin the row. */
    .nav-links li:nth-last-child(2) { position: static; right: auto; }
    nav { padding: 0 48px; }
    .nav-links { gap: 24px; }
    .practice, .principal { gap: 0 64px; }
    .etymology-body { gap: 0 56px; }
    .identity-content { gap: 0 40px; }
    .split { gap: 0 56px; }
    .content { padding: 28px var(--pad-h) 96px; }
    .content-title { font-size: clamp(1.3rem, 2vw, 1.8rem); padding: 16px 0 20px; margin-bottom: 48px; }
    .hero--home .hero-content { right: 10%; width: min(760px, 80vw); }
}

@media (max-width: 768px) {
    :root { --pad-h: 28px; --section-v: 72px; }
    nav { padding: 0 28px; }
    .nav-links { display: none; }
    .nav-toggle { display: flex; }

    .hero { padding: 0 28px; }
    .hero--about { padding-bottom: 56px; }
    .hero--home .hero-content {
        top: 30%;
        right: 28px; left: 28px;
        width: auto;
        text-align: left;
    }
    /* Keep the prose intro visible on mobile — reduced size, let it wrap naturally */
    .hero--home .hero-intro {
        font-size: 16px;
        line-height: 1.55;
    }
    .hero-rule { margin: 18px 0; }

    .content { padding: 24px var(--pad-h) 80px; }
    .content-title { font-size: clamp(1.2rem, 5vw, 1.5rem); padding: 14px 0 16px; margin-bottom: 40px; }

    .practice,
    .etymology-body,
    .principal,
    .identity-content,
    .split {
        grid-template-columns: 1fr;
        gap: 48px 0;
    }
    .practice-facts { padding-top: 0; }
    .etymology-image { max-height: 300px; }
    .etymology-image img { max-height: 300px; }
    .identity-content { gap: 40px 0; }
    .capabilities-grid { grid-template-columns: 1fr; }
    .contact { min-height: auto; }

    /* Content-row collapses to single column on mobile */
    .content-row,
    .content-row--reversed {
        grid-template-columns: 1fr;
        column-gap: 0;
        row-gap: 48px;
        max-width: none;
    }

    /* Advisory hero image: align center-right on mobile (show right portion of frame) */
    .hero--art-advisory .hero-bg {
        background-position: right center;
    }
    .editorial-figure--wide {
        max-width: 100%;
        margin: 64px auto;
    }

    /* Page-nav: horizontal scroll on small screens */
    .page-nav {
        justify-content: flex-start;
        gap: 20px;
        padding: 12px 28px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .page-nav::-webkit-scrollbar { display: none; }
    .page-nav a { white-space: nowrap; font-size: 11px; }
    .page-nav-title { font-size: 1rem; white-space: nowrap; padding-right: 16px; }

    /* Footer stacks on narrow screens */
    .site-footer {
        flex-direction: column;
        gap: 6px;
        padding: 28px var(--pad-h);
    }
    .site-footer .dot { display: none; }
    /* Footer stacks taller here, so lift the parallax credit clear of it. */
    .editorial-parallax .image-credit { bottom: 132px; }
}

@media (max-width: 480px) {
    :root { --pad-h: 24px; }
    .nav-mobile { padding: 0 28px; }
    .identity-mark { padding: 32px 20px; }
}

/* iOS: background-attachment: fixed is unsupported on touch devices */
@media (hover: none) and (pointer: coarse) {
    .hero-bg { background-attachment: scroll; }
    .iterations-parallax-bg {
        background-attachment: scroll;
        inset: 0;
    }
    .editorial-parallax-bg {
        background-attachment: scroll;
    }
}

/* ── REDUCED MOTION ──
   Honour prefers-reduced-motion across the system: near-instant animations and
   transitions (elements jump to their final/visible state rather than moving),
   and no smooth scroll. The staged homepage reveal still resolves to its shown
   state because the .shown class is applied regardless; only the motion is removed.
   The homepage splash and scroll-cue carry their own reduced-motion rules inline. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-delay: 0s !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

/* ── MOBILE QA REFINEMENTS (2026-05) ──
   Pre-launch mobile pass. Each rule below overrides a desktop/page rule that leaked
   onto phones. Scoped to <=768px so desktop is untouched. Remove this whole block to
   revert every change here at once. (The matching nav-opacity fix lives in each
   service page's inline <style>, because that is where the transparent override sits.) */
@media (max-width: 768px) {
    /* P1 — Art Advisory intro: the desktop two-column split (html.page-art-advisory
       .content-row, ~line 969) out-specifies the base .content-row mobile collapse, so
       it stayed two ~150px JUSTIFIED columns on phones — effectively unreadable.
       Collapse to one left-aligned column and drop the forced 100vh centring (~line 961)
       so the section flows as normal stacked content. */
    html.page-art-advisory .content {
        min-height: 0;
        display: block;
        justify-content: normal;
        padding-top: calc(var(--nav-h) + 32px);
        padding-bottom: 64px;
    }
    html.page-art-advisory .content-row {
        grid-template-columns: 1fr;
        column-gap: 0;
        row-gap: 28px;
        align-items: start;
        max-width: none;
    }
    html.page-art-advisory .content-body { text-align: left; }

    /* P3 — body copy: justified text gaps badly in a ~390px column. Art Advisory had
       no hyphenation; About (~line 763) is a deliberate justify+hyphens trial but still
       gaps at phone measure. Left-align on mobile. To keep About justified, delete the
       .page-about line below only. */
    html.page-about .content-body,
    html.page-about .prose,
    html.page-about .identity-quote p { text-align: left; }

    /* P2a — soften mandatory scroll-snap to proximity on the two pages that set it
       unwrapped (about ~line 719, art-advisory ~line 913). Several sections are taller
       than a phone viewport, and y-mandatory traps the reader inside them. Proximity
       keeps a gentle pull without trapping. (The other service pages already gate snap
       behind min-width:769px, so they need no change.) */
    html.page-about,
    html.page-art-advisory { scroll-snap-type: y proximity; }

    /* P3 — primary nav: enlarge the hamburger to the ~44px touch-target minimum
       (was ~29x38) while keeping the bars centred. */
    .nav-toggle {
        min-width: 44px;
        min-height: 44px;
        padding: 10px;
        align-items: center;
        justify-content: center;
    }

    /* P3 — in-page section nav: links were ~13px tall. Grow the tap area to ~42px and
       nudge the active underline to stay tucked under the text. */
    .page-nav { padding-top: 2px; padding-bottom: 2px; }
    .page-nav a { padding: 13px 0; }
    .page-nav a.current::after { bottom: 10px; }
}


/* PROTOTYPE: mobile menu close-affordance fix.
   The hamburger already morphs into an X, but nav (z-index now 260) lifts it
   above the .nav-mobile overlay (250) so it is visible and tappable. These two
   rules keep the X and logo legible (dark) over the cream menu. */
.nav-toggle.open span { background: var(--ink); }
nav:has(.nav-toggle.open) .nav-logo img { filter: invert(1); }
@media (max-width: 768px) {
    /* PROTOTYPE: menu/close control sits in the upper-right corner */
    .nav-toggle { margin-left: auto; }
    /* PROTOTYPE: enlarge the dashboard-login lock in the mobile menu (was 11x14) */
    .nav-mobile .nav-private svg { width: 17px; height: 22px; }
}