/* G.Gale Venetian Plastering — the components, v2: built from his logo (DESIGN_SYSTEM.md).
   Tokens from tokens.css. Nothing animates except a link underline, a button fill and a focus ring. */

@font-face { font-family: "EB Garamond"; src: url("../fonts/ebgaramond.woff2") format("woff2"); font-weight: 400 600; font-display: swap; }
@font-face { font-family: "EB Garamond"; src: url("../fonts/ebgaramond-italic.woff2") format("woff2"); font-weight: 400 600; font-style: italic; font-display: swap; }
@font-face { font-family: "Cinzel"; src: url("../fonts/cinzel.woff2") format("woff2"); font-weight: 500; font-display: swap; }

/* ---- ground ------------------------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--plaster); color: var(--ink); font-family: var(--font); font-size: 16px; -webkit-text-size-adjust: 100%; }
body { margin: 0; font-size: var(--t-body); line-height: var(--lh-body); }
img, picture { display: block; max-width: 100%; height: auto; }
::selection { background: var(--blue); color: var(--gold-caps); }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.on-blue :focus-visible { outline-color: var(--gold-caps); }
a { color: inherit; }
.wrap { max-width: var(--content); margin-inline: auto; padding-inline: var(--gutter); }
.caps { font-family: var(--font-caps); font-weight: 500; text-transform: uppercase; letter-spacing: var(--track-caps); }

/* ---- header: a solid bar in the logo's own plaster tone; his logo as he made it ---------------------- */
.header { position: relative; z-index: var(--z-header); height: var(--header-h); background: var(--plaster-bar);   /* [17 Sep, Jordon] navy: the logo on its own ground */
  border-bottom: 1px solid var(--gold-caps); }
/* ---- ribbon rule: gold · blue plaster · gold, the banner the logo's lettering sits in (Jordon 17 Sep) ---- */
.ribbon { display: block; height: 10px; border-top: 1px solid var(--gold); border-bottom: 1px solid var(--gold);
  background: var(--blue) url("../assets/ground/ribbon-blue.jpg") center / cover repeat-x; }
.header .wrap { display: flex; align-items: center; justify-content: space-between; height: 100%; gap: var(--s5); max-width: 1400px; }   /* the bar uses more of the width than the reading column */
@media (max-width: 899px) { .header .header__ask.ask { display: none; } }   /* below 900 the ask lives inside the menu */
.header__mark img { height: var(--logo-h); width: auto; }
.header__mark picture { display: block; }
.header__nav { display: none; align-items: center; gap: var(--s5); }
.header__nav a { text-decoration: none; white-space: nowrap; color: var(--gold-caps); font-family: var(--font-caps); font-weight: 500; font-size: 0.8125rem; letter-spacing: 0.14em; text-transform: uppercase; }
.header__nav a.ask, .header__menu a.ask { background: var(--gold-caps); color: var(--blue-deep); border-color: var(--gold-caps); }
.header__nav a:hover { text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: .3em; }
.header__menu summary { list-style: none; cursor: pointer; color: var(--gold-caps); font-family: var(--font-caps); font-weight: 500; font-size: 0.8125rem; letter-spacing: 0.14em; text-transform: uppercase; padding: var(--s2) 0; }
.header__menu summary::-webkit-details-marker { display: none; }
/* [20 Sep, Jordon] the menu opens BELOW the bar: the logo and the toggle stay exactly where they were, the toggle reads
   Close, and the panel fills the rest of the screen on the navy. Nothing shifts. */
.nav-toggle__close { display: none; }
.header__menu[open] .nav-toggle__open { display: none; }
.header__menu[open] .nav-toggle__close { display: inline; }
.header__panel { display: none; }
.header__menu[open] .header__panel { display: block; position: fixed; top: var(--header-h); right: 0; bottom: 0; left: 0; z-index: var(--z-menu); background: var(--plaster-bar); padding: var(--s7) var(--gutter); overflow-y: auto; }
.header__menu ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s5); }
.header__menu ul a { text-decoration: none; color: var(--gold-caps); font-family: var(--font-caps); font-weight: 500; font-size: 1.25rem; letter-spacing: 0.1em; text-transform: uppercase; }
.header__menu .ask { margin-top: var(--s7); }
@media (min-width: 900px) {
  /* [17 Sep, Jordon] logo hard left, the ask hard right, the nav centred in the space between */
  .header .wrap { display: grid; grid-template-columns: auto 1fr auto; align-items: center; }
  .header__nav { display: flex; justify-content: center; gap: var(--s6); }
  .header__ask { display: inline-flex; justify-self: end; }
  .header__menu { display: none; }
}

/* ---- eyebrow · statement · display · prose --------------------------------------------------------- */
.eyebrow { margin: 0 0 var(--s3); font-family: var(--font-caps); font-weight: 500; font-size: var(--t-eyebrow); line-height: var(--lh-eyebrow);
  letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--blue); }
.eyebrow::after { content: ""; display: block; width: 32px; height: var(--rule-w); background: var(--rule-on-plaster); margin-top: var(--s2); }
.on-blue .eyebrow { color: var(--gold-caps); }
.on-blue .eyebrow::after { background: var(--rule-on-blue); }
.statement { margin: 0; font-family: var(--font-caps); font-weight: 500; font-size: var(--t-statement); line-height: var(--lh-statement);
  letter-spacing: var(--track-caps); text-transform: uppercase; text-wrap: balance; color: var(--blue); }
.on-blue .statement { color: var(--gold-caps); }
.display { margin: 0; font-size: var(--t-display); line-height: var(--lh-display); letter-spacing: var(--track-display); font-weight: 400; text-wrap: balance; }
.prose { max-width: var(--measure); text-wrap: pretty; }
.prose p { margin: 0 0 var(--s5); }
.lede { font-size: var(--t-lede); line-height: var(--lh-lede); }
.caption { font-size: var(--t-caption); line-height: var(--lh-caption); color: var(--ink-soft); }
.link { text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 1px; text-underline-offset: .18em;
  transition: text-decoration-thickness var(--dur) var(--ease); }
.link:hover { text-decoration-thickness: 2px; }

/* ---- ask: the ribbon: blue, with gold capitals ----------------------------------------------------- */
.ask { display: inline-flex; align-items: center; height: var(--control-h); padding: 0 var(--s6); background: var(--blue); color: var(--gold-caps);
  border: var(--rule-w) solid var(--gold-caps); text-decoration: none; font-family: var(--font-caps);   /* 17 Sep: the gold edge, like the banner */ font-weight: 500; font-size: 0.8125rem;
  letter-spacing: 0.14em; text-transform: uppercase; line-height: 1; white-space: nowrap;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.ask:hover { background: var(--blue-deep); color: var(--gold-light); border-color: var(--blue-deep); }
.on-blue .ask { background: var(--gold-caps); color: var(--blue-deep); border-color: var(--gold-caps); }   /* 17 Sep: solid gold on the blue; blue-deep text is the logo's pairing (white on gold fails contrast) */
.on-blue .ask:hover { background: var(--gold-light); border-color: var(--gold-light); color: var(--blue-deep); }
.ask-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s5) var(--s6); }

/* ---- band: the ribbon as a section -------------------------------------------------------------------- */
.band { background: var(--blue); color: var(--plaster-light); padding-block: var(--section-pad); }

/* ---- hero: below the bar, a warm surface, the copy over a plaster scrim ------------------------------- */
.hero { position: relative; min-height: 560px; min-height: calc(100vh - var(--header-h)); min-height: max(560px, calc(100dvh - var(--header-h))); display: flex; align-items: center; isolation: isolate; }   /* [18 Sep, Jordon] the hero IS the first screen, at every width; three declarations = old browser, vh, dvh */   /* 17 Sep, Jordon: the words centred in the section, every breakpoint */
.hero__img { position: absolute; top: 0; right: 0; bottom: 0; left: 0; inset: 0; z-index: -2; }
.hero__img img { width: 100%; height: 100%; object-fit: cover; }
.hero__scrim { display: none; }   /* 17 Sep, Jordon: no veil - the marble in full, as clean as the board photograph */
.hero .wrap { padding-block: var(--s8); width: 100%; }
.hero__copy { max-width: 640px; }   /* [17 Sep, Jordon] left-aligned, vertically centred; the crop puts the calm of the board under the words */
.hero .display { max-width: 14ch; }
.hero__sub { margin: var(--s5) 0 0; max-width: 34ch; font-size: var(--t-lede); line-height: var(--lh-lede); }
.hero .ask-row { margin-top: var(--s7); }
.hero__phone { font-family: var(--font-caps); font-weight: 500; font-size: 1rem; letter-spacing: 0.1em; color: var(--blue); text-decoration: none; font-variant-numeric: tabular-nums; }
@media (min-width: 900px) {
  .hero { min-height: 640px; min-height: calc(100vh - var(--header-h)); min-height: max(640px, calc(100dvh - var(--header-h))); }   /* was fixed at 720 (DESIGN_SYSTEM §5); Jordon 18 Sep: full screen */
  .hero .wrap { padding-block: var(--s9); }
  .hero .display { max-width: 15ch; }
}

/* ---- page structure ----------------------------------------------------------------------------- */
.skip { position: absolute; left: -999px; top: 0; background: var(--blue); color: var(--gold-caps); padding: var(--s3) var(--s5); z-index: 1000; }
.skip:focus { left: var(--gutter); }
.section { padding-block: var(--section-pad); }
.section--opening { padding-bottom: var(--s8); }
.section--opening .display { margin-top: var(--s3); }
.placeholder { margin: var(--s5) 0 0; padding: var(--s5); border: 1px dashed var(--rule-on-plaster); color: var(--ink-soft); font-size: var(--t-caption); max-width: var(--measure); }
.contact__phone { margin: var(--s6) 0 0; font-family: var(--font-caps); font-weight: 500; font-size: var(--t-statement); letter-spacing: 0.06em; color: var(--blue); }
.contact__phone a { text-decoration: none; }

/* ---- band ---------------------------------------------------------------------------------------- */
.band__prose { max-width: var(--measure); margin: var(--s5) 0 0; font-size: var(--t-lede); line-height: var(--lh-lede); }
.band .ask-row { margin-top: var(--s7); }
.band__phone { font-family: var(--font-caps); font-weight: 500; font-size: 1rem; letter-spacing: 0.1em; color: var(--gold-caps); text-decoration: none; font-variant-numeric: tabular-nums; }
.band__ratings { margin: var(--s7) 0 0; font-size: var(--t-caption); color: var(--plaster-light); opacity: .85; }

/* ---- footer -------------------------------------------------------------------------------------- */
.footer { background: var(--blue-deep); color: var(--plaster-light); padding-block: var(--s8) var(--s7); border-top: 1px solid var(--gold-caps);   /* [17 Sep, Jordon] navy and gold, like the header */ font-size: var(--t-caption); line-height: var(--lh-caption); }
.footer__top { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s5) var(--s7); }
.footer__logo img { height: 64px; width: auto; }
.footer__tagline { margin: 0; font-size: var(--t-body); max-width: 40ch; }
.footer__cols { display: grid; gap: var(--s6); margin-top: var(--s7); }
.footer__col p { margin: 0 0 var(--s2); }
.footer__phone { font-family: var(--font-caps); font-weight: 500; letter-spacing: 0.1em; color: var(--gold-caps); text-decoration: none; font-size: 1rem; }
.footer__nav { display: flex; flex-wrap: wrap; gap: var(--s3) var(--s5); }
@media (max-width: 599px) { .footer__nav { display: grid; grid-template-columns: repeat(2, max-content); column-gap: var(--s7); } }   /* [21 Sep] two by two on the phone, not three and an orphan */
.footer__nav a, .footer__legal a { font-family: var(--font-caps); font-weight: 500; font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-caps); text-decoration: none; }
.footer__nav a:hover, .footer__legal a:hover { text-decoration: underline; text-underline-offset: .3em; }
.footer__foot { margin: var(--s7) 0 0; padding-top: var(--s5); border-top: var(--rule-w) solid var(--rule-on-blue); }
@media (min-width: 900px) {
  /* [21 Sep, Jordon] the desktop footer: three columns from one shared top; the pages and the legal pages as LISTS, one
     link per line, so nothing wraps onto a second row (Contact used to) and the two lists sit level */
  .footer__cols { grid-template-columns: 1.4fr 1fr 1fr; align-items: start; gap: var(--s8); }
  .footer__logo img { height: 80px; }
  .footer__nav, .footer__legal { display: grid; gap: var(--s3); justify-items: start; align-content: start; }
  .footer__dot { display: none; }
  .footer__foot { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s6); }   /* the copyright left, "Site by Made Digital" on its own at the right */
}

/* ---- form (structure now; finished in Prompt 5.22) --------------------------------------------------- */
.form { max-width: var(--prose); }
.form__honey { position: absolute; left: -9999px; }
.form__group { border: 0; padding: 0; margin: 0 0 var(--s6); }
.form__group legend { font-family: var(--font-caps); font-weight: 500; font-size: var(--t-eyebrow); letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--blue); margin-bottom: var(--s3); }
.form__group label { display: inline-flex; align-items: center; gap: var(--s2); margin: 0 var(--s5) var(--s3) 0; }
.form__field { display: grid; gap: var(--s2); margin: 0 0 var(--s5); }
.form__field input, .form__field textarea { width: 100%; padding: var(--s3) var(--s4); background: var(--plaster-light); border: var(--rule-w) solid var(--field-border); color: var(--ink); font: inherit; border-radius: 0; }
.form__consent { margin: var(--s6) 0; }
.form__consent label { display: flex; gap: var(--s3); align-items: flex-start; }
button.ask { font: inherit; font-family: var(--font-caps); cursor: pointer; }

.form__outcome { display: none; margin: 0 0 var(--s7); padding: var(--s5); border: var(--rule-w) solid var(--rule-on-plaster); background: var(--plaster-light); max-width: var(--prose); }
.form__outcome:target { display: block; }
.form__outcome .statement { margin-bottom: var(--s3); }
.footer__credit a { color: var(--gold-caps); }

/* ---- H2 · his intro: one screen of type, his words, set large --------------------------------------- */
.intro { padding-block: var(--s9) var(--section-pad); }
.intro__text { margin: 0; font-size: 1.5rem; font-size: clamp(1.5rem, 1.3rem + 0.9vw, 1.75rem); line-height: 1.32; font-weight: 400; text-wrap: pretty; max-width: 26ch; }
.intro__four { margin: var(--s7) 0 0; font-size: var(--t-lede); line-height: var(--lh-lede); color: var(--ink); }
@media (min-width: 600px) {   /* [18 Sep audit] centred from tablet up, not only desktop */
  .intro__wrap { text-align: center; }
  .intro__wrap .eyebrow::after { margin-inline: auto; }
  .intro__text { max-width: 900px; margin-inline: auto; font-size: 2.25rem; font-size: clamp(2rem, 1.5rem + 1.6vw, 2.75rem); line-height: 1.25; }
}

/* ---- tap-to-call: the ribbon fixed to the bottom edge on phones (Jordon, 17 Sep 2026) ------------------------
   Visible from the top; hidden once the footer (which carries the number) is in view - site.js toggles .is-hidden.
   With no JS it simply stays. Nothing else on the site is fixed. */
.tap-to-call { display: none; }
@media (max-width: 899px) {
  .tap-to-call { position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-header); display: flex; align-items: center; justify-content: center;
    height: calc(56px + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom);
    background: var(--blue); color: var(--gold-caps); border-top: var(--rule-w) solid var(--rule-on-blue);
    font-family: var(--font-caps); font-weight: 500; font-size: 0.9375rem; letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none;
    font-variant-numeric: tabular-nums; transition: transform .25s ease; }
  .tap-to-call.is-hidden { transform: translateY(110%); }
  .tap-to-call { transition: transform .3s ease; }
  .tap-to-call:focus-visible { outline: 2px solid var(--gold-caps); outline-offset: -4px; }
  body { padding-bottom: calc(56px + env(safe-area-inset-bottom)); }
  .hero { min-height: 560px; min-height: calc(100vh - var(--header-h) - 56px); min-height: max(560px, calc(100dvh - var(--header-h) - 56px - env(safe-area-inset-bottom))); }   /* the first screen ends above the bar */
}

/* ---- plate: a finish, 4:5, caption colour · product · group (DESIGN_SYSTEM §6) ------------------------ */
.plates .statement { max-width: 22ch; }
.plates__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s6) var(--s4); margin-top: var(--s7); }   /* [19 Sep, Jordon] two across on the phone: the groups condense to half the scroll and still read */
.plate { display: block; margin: 0; color: var(--ink); text-decoration: none; }   /* margin 0: a <figure> plate must not inherit the UA 40px */
.plate picture, .plate img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.plate__caption { display: block; margin-top: var(--s3); font-size: var(--t-caption); line-height: var(--lh-caption); color: var(--ink-soft); }
@media (max-width: 599px) { .plate__caption { font-size: 0.8125rem; } }
.plate:hover .plate__caption { color: var(--blue); text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: .2em; }
.plate:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; }
.plates__more { margin: var(--s7) 0 0; font-size: var(--t-lede); line-height: var(--lh-lede); }
/* three plates, two across on the phone: the odd one sits centred under the pair, never alone on the left */
@media (max-width: 899px) { .plates__grid--three:not(.plates__grid--swipe) > .plate:last-child:nth-child(odd) { grid-column: 1 / -1; width: calc(50% - var(--s2)); margin-inline: auto; } }
/* [19 Sep, Jordon] a group with more than two plates SCROLLS on the phone: one row of two in view, the rest scroll
   VERTICALLY inside the block (snap per row) before the page carries on, with a direction indicator under it. The page
   gets shorter; JS only hides the indicator once the last row has been reached. From 900 the grid takes over. */
@media (max-width: 899px) {
  .plates__scroll { position: relative; }
  /* one full row of two, plus a 44px PEEK of the next row under a soft fade: the block visibly holds more */
  .plates__grid--swipe { max-height: calc((50vw - var(--gutter) - var(--s2)) * 1.25 + 3.4rem + 44px); overflow-y: auto; overscroll-behavior-y: contain; -webkit-overflow-scrolling: touch;
    scroll-snap-type: y mandatory; padding-bottom: 0; scrollbar-width: none;
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 56px), rgba(0, 0, 0, 0) 100%); mask-image: linear-gradient(to bottom, #000 calc(100% - 56px), rgba(0, 0, 0, 0) 100%); }
  .plates__scroll.is-done .plates__grid--swipe { -webkit-mask-image: none; mask-image: none; }
  .plates__grid--swipe::-webkit-scrollbar { display: none; }
  .plates__grid--swipe > .plate { scroll-snap-align: start; }
  .plates__hint { display: flex; align-items: center; justify-content: center; gap: var(--s3); margin: var(--s4) 0 0; font-family: var(--font-caps); font-size: 0.6875rem; letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--blue); }   /* [20 Sep] the words in the blue (4.5:1 on the ivory); the chevron stays gold */
  .plates__hint svg { color: var(--gold); }
  .plates__hint::before, .plates__hint::after { content: ""; flex: 1; height: var(--rule-w); background: var(--rule-on-plaster); }
  .plates__hint svg { width: 14px; height: 14px; flex: 0 0 14px; animation: hint-nudge 2.4s var(--ease) infinite; }
  .plates__scroll.is-done .plates__hint { opacity: 0; transition: opacity var(--dur) var(--ease); }
  @keyframes hint-nudge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(3px); } }
  @media (prefers-reduced-motion: reduce) { .plates__hint svg { animation: none; } }
}
@media (min-width: 900px) { .plates__hint { display: none; } }
}
@media (min-width: 600px) { .plates__grid { grid-template-columns: 1fr 1fr; gap: var(--s7) var(--s6); margin-top: var(--s8); } }   /* [18 Sep audit] 2x2 from tablet, not one huge column */
@media (min-width: 900px) { .plates__grid { gap: var(--s8) var(--s7); } .plates__grid--four { grid-template-columns: repeat(4, 1fr); gap: var(--s7) var(--s5); } .plates__grid--three { grid-template-columns: repeat(3, 1fr); gap: var(--s7) var(--s6); }
  /* five plates in three columns: the last row sits centred, no hole (a grid of 6 tracks, each plate spanning 2) */
  .plates__grid--five { grid-template-columns: repeat(6, 1fr); gap: var(--s7) var(--s6); }
  .plates__grid--five > .plate { grid-column: span 2; }
  .plates__grid--five > .plate:nth-last-child(2):nth-child(3n+1) { grid-column: 2 / span 2; } }
/* a finish group on Finishes: statement, one paragraph, the plates */
/* ---- the finish groups (Finishes F2–F5). Phone: words, then the plates. 900+: a two-column composition - the words in
   one column (sticky, so they stay while the plates scroll past), the plates two across in the other; alternate groups
   swap sides (`group--flip`). [19 Sep, Jordon: "not quite finished" - four identical left-stacked blocks read as a
   template; the catalogue composition gives the page a shape of its own.] A hairline tops every group. ---- */
.group__prose { margin-top: var(--s5); max-width: var(--measure); }
.group .plates__grid { margin-top: var(--s7); }
.group__wrap { border-top: var(--rule-w) solid var(--rule-on-plaster); padding-top: var(--s7); }
.group .plates__more { margin-top: var(--s6); }
@media (min-width: 900px) {
  .group__wrap { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 5fr); column-gap: var(--s8); align-items: start; padding-top: var(--s8); }
  .group__text { position: sticky; top: calc(var(--header-h) + var(--s7)); }
  .group--flip .group__wrap { grid-template-columns: minmax(0, 5fr) minmax(0, 3fr); }
  .group--flip .group__text { order: 2; }
  .group--flip .group__plates { order: 1; }
  .group .plates__grid, .group .plates__grid--three { grid-template-columns: 1fr 1fr; gap: var(--s7) var(--s6); margin-top: 0; }
  .group .plates__grid--three:not(.plates__grid--swipe) > .plate:last-child:nth-child(odd) { grid-column: auto; width: auto; }
}

/* ---- pair: one photograph beside the words (DESIGN_SYSTEM §6 Surface + Quote) ------------------------ */
.pair__wrap { display: grid; grid-template-columns: 1fr; gap: var(--s7); }
.surface { margin: 0; }
.surface picture, .surface img { display: block; width: 100%; height: auto; }
.pair__image picture, .pair__image img { aspect-ratio: 4 / 5; object-fit: cover; }
.surface .caption { margin-top: var(--s3); }
.pair__text .prose { margin-top: var(--s6); }
.pair__more { margin: var(--s6) 0 0; font-size: var(--t-lede); line-height: var(--lh-lede); }
/* ---- quote: Garamond italic, a gold rule, the name and the platform ----------------------------------- */
.quote { margin: var(--s7) 0 0; padding-top: var(--s5); border-top: var(--rule-w) solid var(--rule-on-plaster); max-width: var(--measure); }
.quote blockquote { margin: 0; }
.quote blockquote p { margin: 0; font-style: italic; font-size: var(--t-quote); line-height: var(--lh-quote); text-wrap: pretty; }
.quote figcaption { margin-top: var(--s4); font-size: var(--t-caption); line-height: var(--lh-caption); color: var(--ink-soft); }
.quote cite { font-style: normal; color: var(--ink); }
@media (min-width: 900px) {
  .pair__wrap { grid-template-columns: 560px 1fr; gap: var(--s9); align-items: center; }
}

/* ---- the hand: typographic, short, centred from 900 (SECTIONS §H5) ------------------------------------ */
.hand__prose { margin-top: var(--s6); }
.hand__prose p { font-size: var(--t-lede); line-height: var(--lh-lede); margin: 0; }
.hand__architects { margin: var(--s6) 0 0; padding-top: var(--s5); border-top: var(--rule-w) solid var(--rule-on-plaster); max-width: var(--measure); text-wrap: pretty; }
.hand__more { margin: var(--s6) 0 0; font-size: var(--t-lede); line-height: var(--lh-lede); }
@media (min-width: 900px) {
  .hand__wrap { text-align: center; max-width: 820px; }
  .hand .eyebrow::after, .hand__prose, .hand__architects { margin-inline: auto; }
}

/* ---- band--slim: the mid-page divider - one line and the ask, in the ribbon (Jordon 17 Sep) ------------ */
.band--slim { padding-block: var(--s7); }
.band--slim__wrap { display: grid; gap: var(--s5); }
.band--slim__line { margin: 0; font-size: var(--t-lede); line-height: var(--lh-lede); color: var(--plaster-light); max-width: 34ch; text-wrap: pretty; }
.band--slim .ask-row { margin-top: 0; }
@media (min-width: 900px) { .band--slim__wrap { grid-template-columns: 1fr auto; align-items: center; gap: var(--s7); } .band--slim__line { max-width: 44ch; } }

/* ---- 17 Sep, Jordon: the ground is his plaster, a whisper of texture; the asks and the footer sit on his blue plaster ---- */
body { background: transparent; }   /* html carries the plaster; a body background would paint OVER the fixed ground image */
/* one faint image, fixed behind the page (a pseudo-element, because background-attachment: fixed is not honoured on iOS): no tiling, no seams */
/* [17 Sep, Jordon] no plaster texture on the ground - the sandy surface was the old site */
.band { position: relative; isolation: isolate; border-top: 1px solid var(--gold-caps); border-bottom: 1px solid var(--gold-caps); background: var(--blue) url("../assets/ground/blue-1600.jpg") center / cover no-repeat;
  background-image: image-set(url("../assets/ground/blue-1600.avif") type("image/avif"), url("../assets/ground/blue-1600.webp") type("image/webp"), url("../assets/ground/blue-1600.jpg") type("image/jpeg")); }
.band::before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; inset: 0; z-index: -1; background: rgba(0, 31, 77, .42); }
.quiet { padding-top: 0; }
.quiet__line { max-width: var(--measure); margin: 0; }

/* ---- the scrollbar, in the site's colours (Jordon 18 Sep) ---------------------------------------------- */
html { scrollbar-color: var(--blue) var(--plaster); scrollbar-width: thin; }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--plaster); }
::-webkit-scrollbar-thumb { background: var(--blue); border: 3px solid var(--plaster); border-radius: 0; }
::-webkit-scrollbar-thumb:hover { background: var(--blue-deep); }

/* preview only: build.js marks every link to a route still on site.json previewLock with data-locked - inert, quiet */
.preview-lock a[data-locked] { pointer-events: none; cursor: default; }

/* ---- opening: a page that starts with words (Finishes, Work, Nationwide) ------------------------------ */
.opening__prose { margin-top: var(--s6); max-width: var(--measure); }
.opening__prose .lede { margin-bottom: var(--s5); }
@media (min-width: 900px) {
  .opening__wrap { display: grid; grid-template-columns: 1fr 1.25fr; grid-template-rows: auto auto 1fr; column-gap: var(--s9); row-gap: 0; align-items: start; }
  .opening__wrap .eyebrow { grid-column: 1; grid-row: 1; }
  .opening__wrap .display { grid-column: 1; grid-row: 2; }
  .opening__prose { grid-column: 2; grid-row: 1 / span 3; margin-top: var(--s3); max-width: 62ch; }
  .opening__more { grid-column: 1; grid-row: 3; align-self: start; }
  /* [19 Sep, Jordon: "looks too plain"] an opening WITH a surface: words and index left, the tall surface right */
  .opening--surface .opening__wrap { grid-template-columns: minmax(0, 1.3fr) minmax(300px, 1fr); grid-template-rows: auto auto auto 1fr; }
  .opening--surface .opening__prose { grid-column: 1; grid-row: 3; margin-top: var(--s6); }
  .opening--surface .opening__more { grid-row: 4; }
  .opening--surface .opening__surface { grid-column: 2; grid-row: 1 / span 4; margin: 0; align-self: stretch; }
  .opening--surface .opening__surface { display: flex; flex-direction: column; }
  .opening--surface .opening__surface picture { flex: 1; min-height: 0; }
  .opening--surface .opening__surface picture, .opening--surface .opening__surface img { height: 100%; }
  .opening--surface .opening__surface img { object-fit: cover; min-height: 520px; }
}
.opening__surface { margin: var(--s6) 0 0; }
.opening__surface img { display: block; width: 100%; height: auto; }
/* the phone FIRST (Jordon 19 Sep: "mobile first on the heroes, that's why I said full bleed"): the surface breaks out of the
   gutters and fills the width, about half the first screen under the headline; the words sit above and below it */
@media (max-width: 899px) {
  .opening__surface { margin: var(--s6) calc(-1 * var(--gutter)) 0; }
  .opening__surface img { width: 100%; height: 52vh; height: 52svh; min-height: 300px; max-height: 480px; object-fit: cover; }
  .opening__surface .caption { padding-inline: var(--gutter); }   /* the figure bleeds; its caption keeps the gutter */
}
.opening__more { margin: var(--s6) 0 0; font-size: var(--t-lede); line-height: var(--lh-lede); }
/* ---- the index (Finishes F1, Part B): the four groups as a list a thumb can use, one hairline between ---------- */
.index { list-style: none; margin: var(--s6) 0 0; padding: 0; border-top: var(--rule-w) solid var(--rule-on-plaster); max-width: var(--prose); }
.index li { margin: 0; border-bottom: var(--rule-w) solid var(--rule-on-plaster); }
.index__link { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s1); padding: var(--s4) 0; text-decoration: none; color: var(--ink); }   /* the phone: name above clause, every row the same */
.index__name { font-family: var(--font-caps); font-weight: 500; font-size: var(--t-eyebrow); letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--blue); }
.index__clause { font-size: var(--t-body); line-height: var(--lh-body); color: var(--ink-soft); }
.index__link:hover .index__name, .index__link:focus-visible .index__name { color: var(--gold); }
@media (min-width: 600px) { .index__link { flex-direction: row; align-items: baseline; gap: var(--s4); } .index__name { flex: 0 0 12.5rem; } }

/* ---- the detail (Finishes F6, Part B): an accordion (Jordon 19 Sep) - native <details>, hairline rows, a gold + that turns to a line.
   JS off: the browser opens and closes it by itself. One column on the phone, two from 900 ---- */
.qa__grid { display: grid; gap: 0; margin: var(--s7) 0 0; border-top: var(--rule-w) solid var(--rule-on-plaster); }
.qa { border-bottom: var(--rule-w) solid var(--rule-on-plaster); }
.qa__q { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s5); padding: var(--s5) 0; cursor: pointer; list-style: none;
  font-family: var(--font); font-weight: 500; font-size: var(--t-lede); line-height: var(--lh-lede); color: var(--ink); }
.qa__q::-webkit-details-marker { display: none; }
.qa__q::marker { content: ""; }
.qa__mark { position: relative; flex: 0 0 18px; width: 18px; height: 18px; align-self: center; }
.qa__mark::before, .qa__mark::after { content: ""; position: absolute; top: 50%; left: 50%; background: var(--gold); transform: translate(-50%, -50%); transition: transform var(--dur) var(--ease); }
.qa__mark::before { width: 18px; height: var(--rule-w); }
.qa__mark::after { width: var(--rule-w); height: 18px; }
.qa[open] .qa__mark::after { transform: translate(-50%, -50%) rotate(90deg); }
.qa[open] .qa__q { color: var(--blue); }
.qa__q:hover { color: var(--blue); }
.qa__q:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; }
.qa__a { margin: 0; padding: 0 var(--s8) var(--s5) 0; max-width: var(--measure); font-size: var(--t-body); line-height: var(--lh-body); color: var(--ink); }
@media (min-width: 900px) { .qa__grid { grid-template-columns: 1fr 1fr; column-gap: var(--s9); border-top: 0; } .qa:nth-child(1), .qa:nth-child(2) { border-top: var(--rule-w) solid var(--rule-on-plaster); } }

/* ---- the before / after (Work W2, Part B): two captioned photographs of the same corner; stacked on the phone, side by
   side from 600. Nothing to operate - the two pictures make the point by being next to each other. ---- */
.compare__pair { display: grid; gap: var(--s6); margin-top: var(--s7); }
.compare__pair picture, .compare__pair img { aspect-ratio: 4 / 3; object-fit: cover; }
.compare__tag { font-family: var(--font-caps); font-size: 0.6875rem; letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--blue); margin-right: var(--s2); }
.compare__words { margin-top: var(--s7); }
.compare__words .quote { margin-top: var(--s6); }
@media (min-width: 600px) { .compare__pair { grid-template-columns: 1fr 1fr; gap: var(--s6); } }
@media (min-width: 900px) { .compare__words { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--s9); align-items: start; }
  .compare__words .quote { margin-top: 0; padding-top: 0; border-top: 0; border-left: var(--rule-w) solid var(--rule-on-plaster); padding-left: var(--s6); } }

/* ---- the imagined rooms (Work W3, Part B): four 3:2 photographs of his surfaces placed in rooms by Higgsfield - one column
   on the phone, two across from 900; captioned as imagined, never as a commission (THE_HERO §3). ---- */
.rooms__prose { margin-top: var(--s5); max-width: var(--measure); }
.rooms__grid { display: grid; gap: var(--s7); margin-top: var(--s7); }
.rooms__item picture, .rooms__item img { aspect-ratio: 3 / 2; object-fit: cover; }
/* phone: the rooms sit inside the gutters (they live in a scroll block, which clips a bleed) */
@media (min-width: 900px) { .rooms__grid { grid-template-columns: 1fr 1fr; gap: var(--s8) var(--s7); } }
/* the rooms scroll inside themselves on the phone too (Jordon 19 Sep): one room in view, a peek of the next under the fade */
@media (max-width: 899px) {
  .rooms__grid--swipe { max-height: calc((100vw - 48px) * 2 / 3 + 5.4rem + 44px); overflow-y: auto; overscroll-behavior-y: contain; -webkit-overflow-scrolling: touch; scroll-snap-type: y mandatory; scrollbar-width: none;
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 56px), rgba(0, 0, 0, 0) 100%); mask-image: linear-gradient(to bottom, #000 calc(100% - 56px), rgba(0, 0, 0, 0) 100%); }
  .rooms__grid--swipe::-webkit-scrollbar { display: none; }
  .rooms__grid--swipe > .rooms__item { scroll-snap-align: start; }
  .plates__scroll.is-done .rooms__grid--swipe { -webkit-mask-image: none; mask-image: none; }
}

/* ---- on Instagram (Work W4): typographic, a hairline above, the words and the one link side by side from 900 ---- */
.instagram__wrap { border-top: var(--rule-w) solid var(--rule-on-plaster); padding-top: var(--s7); display: grid; gap: var(--s5); }
.instagram__prose { max-width: var(--measure); }
.instagram__link { font-size: var(--t-lede); line-height: var(--lh-lede); }
@media (min-width: 900px) { .instagram__wrap { grid-template-columns: minmax(0, 3fr) minmax(0, 5fr); column-gap: var(--s8); align-items: start; } }

/* the El Greco words (Work W2): the paragraph, then Christos as a centred pull-quote between two gold rules */
.compare__prose { margin-top: var(--s7); max-width: var(--measure); }
.quote--pull { margin: var(--s7) auto 0; max-width: 34ch; text-align: center; padding: var(--s6) 0; border-top: var(--rule-w) solid var(--rule-on-plaster); border-bottom: var(--rule-w) solid var(--rule-on-plaster); }
.quote--pull blockquote p { text-wrap: balance; }
@media (min-width: 900px) { .quote--pull { margin-top: var(--s8); max-width: 44ch; } }

/* ---- how a commission runs (Nationwide A2): three short headed paragraphs - stacked on the phone with a hairline between,
   three columns from 900. No numbers, no icons, no arrows. ---- */
.steps__grid { display: grid; gap: 0; margin-top: var(--s7); border-top: var(--rule-w) solid var(--rule-on-plaster); }
.steps__item { padding: var(--s5) 0; border-bottom: var(--rule-w) solid var(--rule-on-plaster); }
.steps__item p { margin: var(--s2) 0 0; font-size: var(--t-body); line-height: var(--lh-body); max-width: var(--measure); }
.steps__h { margin: 0; font-family: var(--font-caps); font-weight: 500; font-size: var(--t-eyebrow); letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--blue); }
.steps__h .link { color: inherit; }
@media (min-width: 900px) { .steps__grid { grid-template-columns: repeat(3, 1fr); column-gap: var(--s8); padding-top: var(--s6); } .steps__item { padding: 0; border-bottom: 0; } }

/* ---- where it's commissioned (Nationwide A3): three rows with hairlines - heading left, paragraph right from 900 ---- */
.rows__list { margin-top: var(--s7); border-top: var(--rule-w) solid var(--rule-on-plaster); }
.rows__row { padding: var(--s5) 0; border-bottom: var(--rule-w) solid var(--rule-on-plaster); }
.rows__row p { margin: var(--s2) 0 0; font-size: var(--t-body); line-height: var(--lh-body); max-width: var(--measure); }
.rows__h { margin: 0; font-family: var(--font); font-weight: 500; font-size: var(--t-lede); line-height: var(--lh-lede); color: var(--ink); }
@media (min-width: 900px) { .rows__row { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 5fr); column-gap: var(--s8); padding: var(--s6) 0; } .rows__row p { margin-top: 0; } }
/* ---- architects and interior designers (Nationwide A4): the one space by name, the mid-page ask ---- */
.architects__wrap { display: grid; gap: var(--s5); }
.architects__prose { max-width: var(--measure); }
.architects .ask-row { margin-top: var(--s6); }
@media (min-width: 900px) { .architects__wrap { grid-template-columns: minmax(0, 3fr) minmax(0, 5fr); column-gap: var(--s8); align-items: start; } }

/* ---- who commissions it (Nationwide A3, re-planned 19 Sep): one composed section - statement one side, two paragraphs and
   the one ask the other from 900; stacked on the phone ---- */
.who__wrap { display: grid; gap: var(--s5); }
.who__prose { max-width: var(--measure); }
.who .ask-row { margin-top: var(--s6); }
@media (min-width: 900px) { .who__wrap { grid-template-columns: minmax(0, 3fr) minmax(0, 5fr); column-gap: var(--s8); align-items: start; } }

/* the Contact opening: a shorter strip on the phone (the form has to be on the next screen), the number large under the line */
@media (max-width: 899px) { .opening--contact .opening__surface img { height: 34vh; height: 34svh; min-height: 200px; max-height: 320px; } }
.opening--contact .contact__phone { margin: var(--s5) 0 0; }
.opening--contact .caption { margin-top: var(--s2); }

/* ---- the form, finished (Contact C2, Part B): the same type and rules as the rest of the site. Phone: one column, the
   quote after the form. 900+: the form left at the prose measure, Kurtis and the number beside it. ---- */
.form__wrap { display: grid; gap: var(--s8); }
.form__main { min-width: 0; }
.form__field label, .form__group legend { font-family: var(--font-caps); font-weight: 500; font-size: var(--t-eyebrow); letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--blue); }
.form__group label { font-family: var(--font); font-size: var(--t-body); letter-spacing: 0; text-transform: none; color: var(--ink); }
.form__group { padding-bottom: var(--s4); border-bottom: var(--rule-w) solid var(--rule-on-plaster); }
.form__group label { margin: var(--s2) var(--s5) var(--s2) 0; }
.form input[type="radio"], .form input[type="checkbox"] { accent-color: var(--blue); width: 18px; height: 18px; margin: 0; flex: 0 0 18px; }
.form__field input:focus-visible, .form__field textarea:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-color: var(--blue); }
.form__consent { font-size: var(--t-caption); line-height: var(--lh-caption); color: var(--ink-soft); }
.form__consent input { margin-top: 2px; }
.form__aside .quote { margin-top: var(--s5); border-top: 0; padding-top: 0; }
.form__aside-line { margin: var(--s6) 0 0; font-size: var(--t-lede); line-height: var(--lh-lede); }
@media (min-width: 900px) { .form__wrap { grid-template-columns: minmax(0, 620px) minmax(0, 1fr); column-gap: var(--s9); align-items: start; }
  .form__aside { position: sticky; top: calc(var(--header-h) + var(--s7)); padding-left: var(--s6); border-left: var(--rule-w) solid var(--rule-on-plaster); } }

/* ---- the cinematic opening (Work, 20 Sep - Jordon: every page its own hero): a compact headline row, then the
   photograph edge to edge across the viewport - 4:3 on the phone, 21:9 from 900 - with the caption back in the wrap ---- */
.cine { padding-bottom: 0; }
.cine__head { display: grid; gap: var(--s5); }
.cine__prose { max-width: var(--measure); }
.cine__figure { margin: var(--s7) 0 0; }
.cine__figure picture, .cine__figure img { display: block; width: 100%; height: auto; }
.cine__figure img { aspect-ratio: 4 / 3; object-fit: cover; }
.cine__figure .caption { margin-top: var(--s3); }
@media (min-width: 900px) {
  .cine__head { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--s9); align-items: end; }
  .cine__prose { padding-bottom: var(--s2); }
  .cine__figure img { aspect-ratio: 21 / 9; max-height: 70vh; }
}

/* ---- the split opening (Nationwide, 20 Sep): the photograph FIRST - full width on the phone, and from 900 a square
   bleeding to the left edge of the viewport with the words in the right half, vertically centred ---- */
.split { padding-top: 0; }
.split__figure { margin: 0; }
.split__figure picture, .split__figure img { display: block; width: 100%; height: auto; }
.split__figure img { aspect-ratio: 3 / 2; object-fit: cover; }
.split__text { padding: var(--s7) var(--gutter) 0; max-width: calc(var(--content) / 2); }
.split__text .prose { margin-top: var(--s6); }
@media (min-width: 900px) {
  .split__wrap { display: grid; grid-template-columns: 1fr 1fr; align-items: center; }
  .split__figure img { aspect-ratio: 1 / 1; max-height: 78vh; }
  .split__text { padding: var(--s8) var(--gutter) var(--s8) var(--s9); justify-self: start; }
}
@media (min-width: 1440px) { .split__text { padding-left: var(--s10); padding-right: calc((100vw - var(--content)) / 2 + var(--gutter)); max-width: none; } }

/* ---- the invitation (Contact opening, 20 Sep): the page opens on his blue plaster like a card - gold eyebrow, the headline
   in the light plaster, the number in gold caps. The Band's ground and gold rules, none of its content. ---- */
.invite { padding-block: var(--s9) var(--s8); }
.invite__wrap { max-width: var(--content); }
.invite__h { color: var(--plaster-light); max-width: 16ch; }
.invite__lede { margin: var(--s6) 0 0; max-width: var(--measure); font-size: var(--t-lede); line-height: var(--lh-lede); color: var(--plaster-light); }
.invite__phone { margin: var(--s7) 0 0; font-family: var(--font-caps); font-weight: 500; font-size: var(--t-statement); letter-spacing: 0.06em; }
.invite__phone a { color: var(--gold-caps); text-decoration: none; }
.invite__place { margin: var(--s2) 0 0; font-size: var(--t-caption); line-height: var(--lh-caption); color: var(--gold-caps); }
.form__surface { margin: 0 0 var(--s6); }
.form__surface picture, .form__surface img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
@media (max-width: 899px) { .form__surface { display: none; } }   /* the phone: the form is the screen; the quote follows it */
@media (min-width: 900px) { .invite { padding-block: var(--s10) var(--s9); } .invite__wrap { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--s9); }
  .invite__wrap .eyebrow, .invite__h { grid-column: 1; } .invite__lede { grid-column: 2; grid-row: 1 / span 2; align-self: end; margin-top: 0; }
  .invite__phone, .invite__place { grid-column: 1; } }

/* ---- the legal pages (privacy, cookies, terms): one column of plain sentences under small caps heads ---- */
.legal__date { margin: var(--s3) 0 0; }
.legal__prose { margin-top: var(--s7); max-width: var(--measure); }
.legal__h { margin: var(--s7) 0 var(--s2); font-family: var(--font-caps); font-weight: 500; font-size: var(--t-eyebrow); letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--blue); }
.legal__h:first-child { margin-top: 0; }

/* ---- the cookie choice (only rendered when analytics.ga4_measurement_id is set): the blue plaster, gold rule, two equal buttons ---- */
.consent { position: fixed; right: 0; bottom: 0; left: 0; z-index: var(--z-consent); border-top: var(--rule-w) solid var(--gold-caps); background: var(--blue-deep); padding: var(--s5) 0 calc(var(--s5) + env(safe-area-inset-bottom, 0px)); }
.consent__wrap { display: grid; gap: var(--s4); }
.consent__line { margin: 0; font-size: var(--t-caption); line-height: var(--lh-caption); color: var(--plaster-light); max-width: 60ch; }
.consent__line .link { color: var(--gold-caps); }
.consent__row { display: flex; gap: var(--s3); flex-wrap: wrap; }
.consent .ask { padding-block: var(--s2); }
.consent .consent__reject { background: transparent; color: var(--gold-caps); }
@media (min-width: 900px) { .consent__wrap { grid-template-columns: 1fr auto; align-items: center; } }

/* ---- tap targets (Prompt 9, breakpoint_audit): every control at least 44px tall - the menu toggle and the phone links in
   the ask rows were 37 and 26px. Padding, not a layout change. ---- */
.nav-toggle { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--s2); margin-right: calc(-1 * var(--s2)); }
.hero__phone, .band__phone, .form__aside-line a, .invite__phone a { display: inline-flex; align-items: center; min-height: 44px; }

/* ---- polish (Prompt 10) ---- */
:target, .group, #form, #the-detail, #questions { scroll-margin-top: calc(var(--header-h) + var(--s5)); }   /* the four finish anchors and the form land under the bar, not behind it */
.prose p, .lede, .band__prose, .steps__item p, .rows__row p, .qa__a { text-wrap: pretty; }
@media print {
  .header, .footer, .tap-to-call, .consent, .band, .form__aside, .nav-toggle { display: none !important; }
  body { background: #fff; color: #000; }
  .invite { background: none !important; color: #000; border: 0; padding: 0; }
  .invite__h, .invite__lede, .invite__place { color: #000 !important; } .invite__phone a { color: #000 !important; }
  .form__field input, .form__field textarea { border: 1px solid #000; min-height: 2.5em; }
  a[href^="tel:"]::after { content: none; }
}

/* ---- back to the top (Jordon, 20 Sep): a small navy disc with a gold hairline and a gold chevron, fixed bottom right. It
   appears once the first screen has gone, hides near the top and while the footer is in view; on the phone it sits above
   the tap-to-call bar. With JS off it stays hidden (the browser's own scroll does the job). ---- */
.to-top { position: fixed; right: var(--s5); bottom: var(--s5); z-index: calc(var(--z-header) - 1); width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--blue-deep); color: var(--gold-caps); border: var(--rule-w) solid var(--gold-caps); box-shadow: 0 2px 12px rgb(0 31 77 / .25);
  opacity: 0; transform: translateY(8px); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); pointer-events: none; }
.to-top svg { width: 16px; height: 16px; }
.to-top.is-shown { opacity: 1; transform: none; pointer-events: auto; }
.to-top:hover, .to-top:focus-visible { background: var(--blue); color: var(--gold-light); border-color: var(--gold-light); }
.to-top:focus-visible { outline: 2px solid var(--gold-caps); outline-offset: 3px; }
@media (max-width: 899px) { .to-top { bottom: calc(var(--s5) + 52px + env(safe-area-inset-bottom, 0px)); right: var(--s4); } }   /* above the call bar */
@media (prefers-reduced-motion: reduce) { .to-top { transition: none; } }

/* ---- a plaster wash behind one movement (Jordon, 20 Sep: Nationwide "a bit plain… a light venetian finish background,
   subtle, classy"): his champagne venetian texture under an ivory veil, gold hairlines top and bottom. Contrast stays
   the ivory's (the veil is 86% of the ground). Used once per page at most. ---- */
.section--plaster { position: relative; isolation: isolate; border-top: var(--rule-w) solid var(--rule-on-plaster); border-bottom: var(--rule-w) solid var(--rule-on-plaster);
  background: var(--plaster) url("../assets/ground/plaster-wash-1600.jpg") center / cover no-repeat;
  background-image: image-set(url("../assets/ground/plaster-wash-1600.avif") type("image/avif"), url("../assets/ground/plaster-wash-1600.webp") type("image/webp"), url("../assets/ground/plaster-wash-1600.jpg") type("image/jpeg")); }
.section--plaster::before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; background: rgb(245 241 234 / .58); }   /* [20 Sep, Jordon: "not as subtle"] the veil at 58%: the champagne texture and its warmth read; ink stays above 10:1 on it */
@media (max-width: 899px) { .section--plaster { background-image: url("../assets/ground/plaster-wash-768.jpg"); background-image: image-set(url("../assets/ground/plaster-wash-768.avif") type("image/avif"), url("../assets/ground/plaster-wash-768.webp") type("image/webp"), url("../assets/ground/plaster-wash-768.jpg") type("image/jpeg")); } }

/* ---- pinned plate scroll (Jordon, 20 Sep: "make it part of the page scroll… lock the viewport and scroll through all the
   cards"). On the phone, when JS is present and motion is allowed, the group (its words and one row of two plates)
   STICKS near the top of the screen and the page scroll drives the next rows up through the window, then releases;
   the spacer after the group carries the travel. The inner overflow scroll (the JS-off fallback) is off while pinned. ---- */
@media (max-width: 899px) {
  .is-stuck { position: sticky; top: var(--s4); }                          /* the group (Finishes) or the block (Work); the header scrolls away on the phone */
  .plates__scroll.is-pinned .plates__window { position: relative; overflow: hidden; }   /* height set by JS: one row and a peek */
  .plates__scroll.is-pinned { margin-top: var(--s7); }
  .plates__scroll.is-pinned .plates__grid, .plates__scroll.is-pinned .rooms__grid { margin-top: 0; }   /* the grid's top margin moves to the box: inside the clipped window it pushed the last captions out of sight (Jordon, 21 Sep) */
  .plates__scroll.is-pinned .plates__grid--swipe, .plates__scroll.is-pinned .rooms__grid--swipe { max-height: none; overflow: visible; -webkit-mask-image: none; mask-image: none; scroll-snap-type: none; will-change: transform; }
  .plates__scroll.is-pinned .plates__hint { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding-block: var(--s2) 0; background: linear-gradient(to top, var(--plaster) 60%, rgba(245, 241, 234, 0)); }
  .plates__scroll.is-pinned.is-done .plates__hint { opacity: 0; }
  html.is-pinning .to-top { opacity: 0; transform: translateY(8px); pointer-events: none; }   /* the disc would cover the last row's right caption */
}

/* ---- §12 (20 Sep, Jordon: "little hints of subtle class... easier for people to buy") THE PLATE VIEW ----
   Tap any plate (Finishes) or room (Work) and it opens large on the ivory, with its name and two quiet asks that carry the
   finish to the form. A native <dialog>: Esc, the backdrop and the disc close it; focus returns to the plate. ---- */
.plate--view, .rooms__item--view { cursor: zoom-in; }
.plate--view:focus-visible, .rooms__item--view:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
.view { border: 0; padding: 0; margin: auto; max-width: min(92vw, 960px); width: auto; max-height: 100dvh; background: var(--plaster); color: var(--ink); box-shadow: 0 24px 80px rgb(0 31 77 / .35); }
.view::backdrop { background: rgb(0 31 77 / .82); }
.view__inner { display: grid; gap: var(--s5); padding: var(--s5) var(--s5) var(--s6); max-height: 100dvh; overflow-y: auto; }
.view__figure { margin: 0; }
.view__figure picture, .view__figure img { display: block; width: auto; max-width: 100%; height: auto; max-height: 64dvh; margin-inline: auto; object-fit: contain; }
.view__words { display: grid; gap: var(--s2); }
.view__eyebrow { margin: 0; font-family: var(--font-caps); font-size: var(--t-eyebrow); letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--gold); }
.view__name { margin: 0; font-size: var(--t-lede); line-height: var(--lh-lede); }
.view__acts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s4) var(--s6); padding-top: var(--s4); border-top: var(--rule-w) solid var(--rule-on-plaster); }
.view__close { position: absolute; top: var(--s4); right: var(--s4); width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%;
  background: var(--blue-deep); color: var(--gold-caps); border: var(--rule-w) solid var(--gold-caps); cursor: pointer; padding: 0; }
.view__close svg { width: 14px; height: 14px; }
@media (min-width: 900px) {
  .view__inner { grid-template-columns: minmax(0, 3fr) minmax(260px, 2fr); align-items: end; gap: var(--s7); padding: var(--s6) var(--s7) var(--s7); }
  .view__figure picture, .view__figure img { max-height: 76dvh; margin-inline: 0; }
  .view__acts { flex-direction: column; align-items: flex-start; }
}
@media (prefers-reduced-motion: no-preference) { .view[open] { animation: view-in var(--dur) var(--ease); } @keyframes view-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } }
/* the line under a group's words that says the plates open: caption size, ink-soft, no rule */
.group__tap { margin: var(--s4) 0 0; font-size: var(--t-body); line-height: var(--lh-body); color: var(--ink-soft); }
.rooms__prose .group__tap { margin-top: 0; }
/* the form: the line that names the finish a plate tap carried over (hidden until site.js reads ?finish=) */
.form__about { display: flex; align-items: baseline; gap: var(--s3); margin: 0 0 var(--s6); padding-bottom: var(--s4); border-bottom: var(--rule-w) solid var(--rule-on-plaster); font-size: var(--t-body); line-height: var(--lh-body); color: var(--ink-soft); }
.form__about[hidden] { display: none; }
.form__about strong { font-weight: 400; color: var(--ink); }