/* ============================================================================
   SAN FRANCISCO VINTAGE — the shared design system
   ============================================================================

   ONE system for the whole site. Not one per page and not one per city. This
   file supersedes sfv-vault.css, which was deleted rather than left beside it,
   because a second parallel system is the thing this project prohibits.

   Sources, in the order the brief sets:
     R42                  the functional baseline. Class names here never
                          collide with R42's own, so an interior page can adopt
                          the system one section at a time without breaking.
     One Page - The Vault the visual baseline: palette, type, object staging.
     Page Families        page compositions, heroes, TOC, timeline, galleries.

   Everything is a token first. A component that needs a new colour gets a new
   token, never a raw hex, so the two collections stay one brand.
   ========================================================================= */

/* ── tokens ──────────────────────────────────────────────────────────────── */
:root{
  /* Ground. Near-black, warm, never pure #000. */
  --ink:#0A0709;
  --ink-2:#100C0E;         /* a panel lifted off the ground */
  --ink-3:#13100F;         /* the folio sheet */
  --ink-4:#0C0809;         /* inside a frame, behind a photograph */

  /* Ink on light, and the one light section. */
  --paper:#EFE3D2;         /* warm cream, and body text on dark */
  --paper-2:#F2E7D6;       /* entered text, highest contrast */
  --paper-ink:#241A20;     /* text on the cream section */
  --paper-ink-2:#3E3038;

  --brass:#C9A25A;         /* antique brass. The accent. */
  --brass-lit:#E3C88B;     /* brass, lit: headings and hovers */
  --brass-pale:#F0DDAE;
  --oxblood:#6E2733;
  --oxblood-lit:#8E2A34;
  --rose:#D9A9A4;          /* the second accent, used sparingly */
  --alert:#E5A9A2;         /* errors */
  --ok:#C9A25A;            /* success reuses brass, never green */

  --dim:#C3B39F;           /* body copy on dark */
  --faint:#8A7A6A;         /* mono labels, captions, meta */
  --label:#A79684;         /* form labels */
  --placeholder:#9A8878;

  --rule:rgba(201,162,90,.22);
  --rule-2:rgba(201,162,90,.45);
  --rule-3:rgba(201,162,90,.13);

  /* The San Francisco collection runs cool. Same brand, different weather. */
  --city:#E6EDF5;
  --city-dim:#B9C4D0;
  --city-faint:#7E8B99;
  --city-ink:#0B0C10;

  --display:Prata,Georgia,'Times New Roman',serif;
  --serif:'EB Garamond',Georgia,'Times New Roman',serif;
  --mono:'Courier Prime',ui-monospace,'Courier New',monospace;

  /* One gutter and one set of widths, so no page invents its own margin. */
  --gut:clamp(16px,3vw,44px);
  --wide:1600px;           /* full-bleed families: maps, shop, gateway */
  --mid:1240px;            /* editorial with a figure */
  --read:760px;            /* prose measure */
  --sec:clamp(44px,5.6vw,96px);   /* vertical rhythm between sections */

  /* The pointer-tracked light on the gateway. Resting value so a phone, which
     has no pointer, is still lit. */
  --mx:38%;
  --my:30%;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:clip;scroll-behavior:smooth}
body{
  margin:0;background:var(--ink);color:var(--paper);
  font:400 16px/1.68 var(--serif);
  -webkit-font-smoothing:antialiased;overflow-x:clip;text-wrap:pretty;
}
img{max-width:100%}
a{color:var(--brass);text-decoration:none}
a:hover{color:var(--brass-lit)}
::selection{background:var(--oxblood);color:var(--brass-pale)}
[hidden]{display:none!important}

/* One focus treatment everywhere. */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:1px solid var(--brass);outline-offset:2px;
  box-shadow:0 0 0 4px rgba(201,162,90,.22);
}
:where(a,button,input,select){
  transition:background-color .3s cubic-bezier(.22,.7,.2,1),
             border-color .3s cubic-bezier(.22,.7,.2,1),
             color .3s cubic-bezier(.22,.7,.2,1);
}

/* The long vertical wash. One fixed element behind everything. */
.s-wash{
  position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.9;
  background:
    radial-gradient(58% 18% at 22% 0%,rgba(255,226,168,.06) 0%,rgba(0,0,0,0) 100%),
    radial-gradient(50% 16% at 78% 50%,rgba(217,169,164,.04) 0%,rgba(0,0,0,0) 100%);
}
.s-body{position:relative;z-index:1}

/* ── type ────────────────────────────────────────────────────────────────── */
.s-eyebrow{
  margin:0;font-family:var(--display);font-weight:400;
  font-size:clamp(10px,.85vw,11px);letter-spacing:.34em;text-transform:uppercase;
  color:var(--brass);
}
.s-label{
  margin:0;font:400 10px/1.5 var(--mono);letter-spacing:.22em;
  text-transform:uppercase;color:var(--faint);
}
.s-h1{margin:0;font-family:var(--display);font-weight:400;
  font-size:clamp(32px,4.4vw,68px);line-height:1.02;letter-spacing:-.02em;
  color:var(--brass-lit);text-wrap:balance}
.s-h2{margin:0;font-family:var(--display);font-weight:400;
  font-size:clamp(26px,3.4vw,52px);line-height:1.04;letter-spacing:-.02em;
  color:var(--brass-lit);text-wrap:balance}
.s-h3{margin:0;font-family:var(--display);font-weight:400;
  font-size:clamp(18px,1.8vw,27px);line-height:1.16;color:var(--brass-lit)}
.s-h4{margin:0;font-family:var(--display);font-weight:400;
  font-size:clamp(16px,1.3vw,20px);line-height:1.2;color:var(--brass-lit)}
/* A section rule that reads as a heading, used above tables and lists. */
.s-rule-h{
  font-family:var(--display);font-weight:400;font-size:12px;letter-spacing:.3em;
  text-transform:uppercase;color:var(--brass);
  border-bottom:1px solid var(--rule);padding-bottom:14px;margin:0 0 22px;
}
.s-lede{margin:0;font:400 clamp(16px,1.25vw,20px)/1.62 var(--serif);color:var(--dim)}
.s-p{margin:0;font:400 clamp(15px,1.1vw,18px)/1.68 var(--serif);color:var(--dim)}
.s-prose{max-width:var(--read)}
.s-prose p{margin:0 0 1.1em}
.s-prose p:last-child{margin-bottom:0}
.s-prose h2{margin:2em 0 .6em}
.s-prose h3{margin:1.6em 0 .5em}
.s-prose ul,.s-prose ol{margin:0 0 1.1em;padding-left:1.3em;color:var(--dim)}
.s-prose li{margin:0 0 .4em}
/* Gilded lettering. Used once per page at most. */
.s-gild{
  background:linear-gradient(168deg,var(--brass-pale) 0%,var(--brass) 46%,#A9822F 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* ── layout ──────────────────────────────────────────────────────────────── */
.s-shell{max-width:var(--wide);margin:0 auto;padding-inline:var(--gut)}
.s-shell--mid{max-width:var(--mid)}
.s-shell--read{max-width:calc(var(--read) + var(--gut) * 2)}
.s-section{padding-block:var(--sec)}
.s-section--ruled{border-top:1px solid var(--rule)}
.s-section--panel{background:var(--ink-2);border-block:1px solid var(--rule)}
.s-hr{border:0;border-top:1px solid var(--rule);margin:0}
/* The standard editorial split: copy beside a figure. */
.s-split{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr));
  gap:clamp(24px,3.4vw,64px);align-items:center}
.s-split--wide{grid-template-columns:1.05fr 1fr}
.s-stack{display:flex;flex-direction:column;gap:clamp(14px,1.6vw,22px)}
.s-row{display:flex;flex-wrap:wrap;gap:12px}
.s-row--between{justify-content:space-between;align-items:flex-end}

/* ── announcement bar ────────────────────────────────────────────────────── */
.s-announce{
  background:var(--oxblood);color:var(--brass-pale);
  border-bottom:1px solid var(--rule);
}
.s-announce__in{
  max-width:var(--wide);margin:0 auto;padding:10px var(--gut);
  display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;justify-content:center;
  font:400 10px/1.5 var(--mono);letter-spacing:.18em;text-transform:uppercase;
  text-align:center;
}
.s-announce a{color:var(--brass-pale);text-decoration:underline;text-underline-offset:3px}
.s-announce a:hover{color:#fff}
.s-announce__x{
  margin-left:auto;background:none;border:0;color:var(--brass-pale);cursor:pointer;
  font:400 14px/1 var(--mono);padding:4px 8px;
}
/* An announcement with nothing in it removes itself rather than leaving a band. */
.s-announce:not(:has(.s-announce__msg:not(:empty))){display:none}

/* ── header and global navigation ────────────────────────────────────────
   ONE menu. Eight top-level items plus Contact, one level of dropdown, and
   nothing below it. No second bar. */
.s-head{
  position:sticky;top:0;z-index:70;
  background:rgba(6,4,5,.96);backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(201,162,90,.3);
}
.s-head__in{
  max-width:var(--wide);margin:0 auto;padding:0 var(--gut);min-height:78px;
  display:flex;align-items:center;gap:clamp(14px,2.4vw,34px);
}
.s-logo{flex:0 0 auto;display:flex;align-items:center;min-height:48px}
.s-logo img{
  height:34px;width:auto;display:block;
  filter:brightness(0) invert(1) sepia(.55) saturate(1.4) hue-rotate(-4deg);
}
.s-nav{display:flex;align-items:center;gap:clamp(11px,1.6vw,24px);flex:0 1 auto;min-width:0}
.s-nav__item{position:relative;flex:0 0 auto}
.s-nav__top{
  cursor:pointer;background:none;border:0;padding:0 2px;min-height:48px;
  display:inline-flex;align-items:center;gap:7px;white-space:nowrap;
  font:400 12px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;
  color:var(--paper);border-bottom:2px solid transparent;
}
.s-nav__top:hover,
.s-nav__item[data-open="1"] .s-nav__top,
.s-nav__top[aria-current="page"]{color:var(--brass-lit);border-bottom-color:var(--brass)}
.s-nav__caret{
  font-size:9px;color:var(--brass);
  transition:transform .28s cubic-bezier(.22,.7,.2,1);
}
.s-nav__item[data-open="1"] .s-nav__caret{transform:rotate(180deg)}
.s-head__end{display:flex;align-items:center;gap:12px;flex:0 0 auto;margin-left:auto}
.s-bag{
  border:1px solid var(--brass);color:var(--brass);padding:12px 18px;min-height:48px;
  display:inline-flex;align-items:center;white-space:nowrap;
  font:400 11px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;
}
.s-bag:hover{background:var(--brass);color:var(--ink)}
.s-burger{
  display:none;align-items:center;justify-content:center;cursor:pointer;
  background:none;border:1px solid var(--brass);color:var(--brass);
  padding:12px 18px;min-height:48px;
  font:400 11px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;
  white-space:nowrap;margin-left:auto;
}
.s-skip{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--brass);color:var(--ink);padding:10px 16px;
  font:400 11px/1 var(--mono);letter-spacing:.2em;
}
.s-skip:focus{left:8px;top:8px}

/* Dropdowns open on click, never on hover alone, so a tap never fires a link
   the visitor could not see. */
.s-menu{
  position:absolute;left:0;top:calc(100% + 1px);z-index:80;min-width:270px;
  background:var(--ink-4);border:1px solid var(--brass);
  box-shadow:0 30px 68px rgba(0,0,0,.72);padding:8px 0;
}
.s-menu__link{
  display:block;padding:13px 20px;min-height:52px;
  font-family:var(--display);font-size:16px;line-height:1.2;color:var(--paper);
  border-left:2px solid transparent;
}
.s-menu__link:hover{background:rgba(201,162,90,.1);border-left-color:var(--brass);color:var(--brass-lit)}
.s-menu__note{
  display:block;margin-top:4px;font:400 9px/1.4 var(--mono);
  letter-spacing:.14em;text-transform:uppercase;color:var(--faint);
}

/* ── location selector ───────────────────────────────────────────────────
   One website, two collections. This is how you change which one you are
   looking at, and it is the same control on the maps, events and resources. */
.s-loc{display:flex;flex:0 0 auto;border:1px solid rgba(201,162,90,.4)}
.s-loc__btn{
  cursor:pointer;border:0;background:none;color:var(--dim);
  padding:13px 22px;min-height:56px;text-align:left;white-space:nowrap;
  font:400 11px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;
}
.s-loc__btn[aria-selected="true"]{background:var(--brass);color:var(--ink)}
.s-loc__sub{display:block;margin-top:5px;font:400 9px/1.5 var(--mono);letter-spacing:.14em;color:var(--faint)}
/* The second line is a whole clause and was being cut off at 390px. */
@media (max-width:560px){.s-loc__btn{flex:1 1 100%}.s-loc__sub{white-space:normal}}
.s-loc__btn[aria-selected="true"] .s-loc__sub{color:rgba(7,5,6,.7)}

.s-locbar{border-bottom:1px solid var(--rule);background:rgba(6,4,5,.6);padding-block:14px}
@media (max-width:560px){.s-loc{width:100%}.s-loc__btn{flex:1 1 0;text-align:center}}

/* ── page hero ───────────────────────────────────────────────────────────
   One hero component. A family varies it with a modifier, never with a fork. */
.s-hero{padding-block:clamp(30px,3.8vw,60px) clamp(24px,3vw,44px)}
.s-hero__crumbs{
  display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;
  font:400 10px/1.6 var(--mono);letter-spacing:.16em;text-transform:uppercase;
  color:var(--faint);margin-bottom:18px;
}
.s-hero__crumbs a{color:var(--faint)}
.s-hero__crumbs a:hover{color:var(--brass)}
.s-hero__sep{color:var(--rule-2)}
.s-hero__grid{display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(24px,3.4vw,60px);align-items:end}
.s-hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(20px,2.4vw,30px)}
.s-hero__meta{
  margin-top:clamp(22px,2.6vw,34px);border-top:1px solid var(--rule);padding-top:16px;
}


/* ── the map toolbar ─────────────────────────────────────────────────────
   Formerly a second <header> on the map pages, which rendered as a second site
   navigation bar under the real one. It is now a div in the page flow, and it
   is styled as what it is: the map's search, filters and counter. */
.map-toolbar{
  position:static!important;top:auto!important;z-index:auto!important;
  background:var(--ink-2)!important;
  border:1px solid var(--rule);border-bottom:0;
  box-shadow:none!important;backdrop-filter:none!important;
  display:flex;flex-wrap:wrap;align-items:center;gap:12px clamp(12px,1.8vw,24px);
  padding:clamp(12px,1.4vw,18px) clamp(14px,1.8vw,22px)!important;
}
.map-toolbar .count{
  font:400 10px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--faint);
}
.map-toolbar input[type=search],.map-toolbar input[type=text]{
  flex:1 1 220px;min-width:0;background:transparent;border:0;
  border-bottom:1px solid var(--rule-2);color:var(--paper-2);
  padding:10px 2px;min-height:44px;font:400 17px/1.3 var(--serif);
}
.map-toolbar select{
  background:transparent;border:1px solid var(--rule);color:var(--paper);
  padding:10px 12px;min-height:44px;font:400 11px/1 var(--mono);
  letter-spacing:.14em;text-transform:uppercase;
}
.map-toolbar button{
  background:none;border:1px solid var(--rule-2);color:var(--brass);
  padding:10px 14px;min-height:44px;cursor:pointer;
  font:400 10px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;
}
.map-toolbar button:hover{background:var(--brass);color:var(--ink)}
@media (max-width:640px){
  .map-toolbar{flex-direction:column;align-items:stretch}
  .map-toolbar select,.map-toolbar button{width:100%}
}

/* ── the gateway ─────────────────────────────────────────────────────────
   The front door: two collections side by side, lit from wherever the pointer
   is. The photographs are R42's registered sf.image and ac.image, so whatever
   the editor puts in them has to stay legible: the art is dimmed and a
   bottom-weighted scrim sits under the type. */
.s-gate{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr));position:relative}
.s-gate__half{
  position:relative;min-height:clamp(440px,64vh,740px);overflow:hidden;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:clamp(22px,3vw,52px);
}
.s-gate__half>*{position:relative;z-index:2}
.s-gate__art{position:absolute;inset:0;z-index:0}
.s-gate__art img{
  width:100%;height:100%;object-fit:cover;display:block;
  filter:saturate(.72) contrast(1.04) brightness(.5);
}
.s-gate__light{position:absolute;inset:0;z-index:1;pointer-events:none}
.s-gate__h{
  margin:16px 0 0;font-family:var(--display);font-weight:400;
  font-size:clamp(32px,4.2vw,68px);line-height:.98;letter-spacing:-.02em;
  color:var(--brass-lit);
}
.s-gate--city{background:var(--city-ink);
  background-image:repeating-linear-gradient(135deg,rgba(239,227,210,.035) 0 1px,transparent 1px 13px)}
.s-gate--city .s-gate__h{color:var(--city)}
.s-gate--city .s-gate__light{
  background:linear-gradient(to top,rgba(6,8,12,.95) 0%,rgba(6,8,12,.82) 34%,
               rgba(6,8,12,.4) 66%,rgba(6,8,12,.62) 100%),
             radial-gradient(46% 40% at var(--mx) var(--my),rgba(198,214,232,.3) 0%,rgba(150,170,190,.07) 42%,rgba(0,0,0,0) 68%),
             radial-gradient(124% 100% at 50% 50%,rgba(0,0,0,0) 30%,rgba(0,0,0,.82) 100%);
}
.s-gate--store{background:#140A0A;border-left:1px solid var(--rule);
  background-image:repeating-linear-gradient(45deg,rgba(201,162,90,.05) 0 1px,transparent 1px 13px)}
.s-gate--store .s-gate__light{
  background:linear-gradient(to top,rgba(10,6,5,.95) 0%,rgba(10,6,5,.82) 34%,
               rgba(10,6,5,.4) 66%,rgba(10,6,5,.62) 100%),
             radial-gradient(48% 42% at var(--mx) var(--my),rgba(255,222,160,.3) 0%,rgba(201,162,90,.07) 44%,rgba(0,0,0,0) 70%),
             radial-gradient(124% 100% at 50% 50%,rgba(0,0,0,0) 30%,rgba(0,0,0,.84) 100%);
}
.s-gate__mark-h{
  margin:0;font-family:var(--display);font-weight:400;
  font-size:clamp(15px,1.5vw,21px);line-height:1.1;letter-spacing:.02em;
  color:var(--brass-lit);
}
.s-gate__mark{
  position:absolute;left:50%;top:clamp(18px,3vw,40px);transform:translateX(-50%);
  z-index:3;pointer-events:none;text-align:center;
  padding:12px clamp(18px,2vw,28px);
  background:rgba(7,5,6,.72);border:1px solid var(--rule);backdrop-filter:blur(6px);
}
@media (max-width:900px){
  .s-gate--store{border-left:0;border-top:1px solid var(--rule)}
  .s-gate__mark-h{
  margin:0;font-family:var(--display);font-weight:400;
  font-size:clamp(15px,1.5vw,21px);line-height:1.1;letter-spacing:.02em;
  color:var(--brass-lit);
}
.s-gate__mark{position:static;transform:none;backdrop-filter:none;border:0;
    background:none;padding:clamp(20px,4vw,32px) var(--gut) 0;
    /* ORDER, BECAUSE THE MARK CARRIES THE PAGE'S h1 AND MUST COME FIRST IN THE
       DOCUMENT WITHOUT COMING FIRST ON THE SCREEN.
       Above 900px this block is position:absolute and pinned to the top, so
       document order never mattered and moving it changed nothing. Here it is
       static, so it lays out where it sits — and lifting it to the top of the
       section for the heading's sake moved it from below the two halves to
       above them, from y=1179 to y=99 at 390px. That is a visible change to an
       approved design, and it was caught by measuring rather than by assuming
       the absolute positioning held at every width.
       .s-gate is a grid, so order puts it back last on screen while the h1
       stays first for a screen reader, which is the whole point. */
    order:3}
}


/* ── the hub hero ────────────────────────────────────────────────────────
   A city hub opens on a full-bleed photograph with its type in the lower
   third. The Angels Camp hub's photograph is the registered hero.image
   background field; the San Francisco hub has none and runs on the cool
   palette instead, so neither is a blank frame. */
.s-hubhero{
  min-height:clamp(420px,60vh,680px);display:flex;flex-direction:column;
  justify-content:flex-end;padding-block:clamp(40px,6vw,90px);
}
.s-hubhero__place{
  margin:10px 0 0;font-family:var(--display);font-weight:400;
  font-size:clamp(18px,2vw,30px);line-height:1.1;color:var(--brass);
}
.s-hubhero--city{
  min-height:0;padding-block:clamp(34px,4.4vw,66px) clamp(30px,3.6vw,54px);
  background:var(--city-ink);
  background-image:repeating-linear-gradient(135deg,rgba(239,227,210,.03) 0 1px,transparent 1px 13px);
  border-bottom:1px solid var(--rule);
}

/* The service hero sits above a page whose own body is the light long-form
   variant, so it is explicitly dark and does not inherit the article colours
   that follow it. */
/* Explicit, and !important, because these three pages carry the light
   long-form variant below and its rules would otherwise paint this hero's type
   for a cream ground it is not on. */
.s-svc{background:#0A0709!important;color:#EFE3D2!important;position:relative;z-index:1}
.s-svc *{color:inherit}
/* The fact strip's own dt/dd colours are set for the light article below and
   win on specificity, so they are restated here for the dark hero. */
.s-svc .s-facts dd,.s-svc dd{color:#C3B39F!important}
.s-svc .s-facts dt,.s-svc dt{color:#8A7A6A!important}
.s-svc .s-lede{color:#C3B39F!important}
.s-svc .s-h1{color:var(--brass-lit)!important}
.s-svc .s-eyebrow{color:var(--brass)!important}
.s-svc .s-lede,.s-svc dd{color:var(--dim)}
.s-svc dt{color:var(--faint)}
.s-svc .s-tile__name{color:var(--brass-lit)!important}
.s-svc .s-tile{background:var(--ink-2)!important;box-shadow:0 0 0 1px var(--rule)}
.s-svc .s-tile__body{color:var(--dim)!important}
.s-svc .s-tile__kicker{color:var(--brass)!important}
.s-svc .s-btn--wine{background:var(--oxblood)!important;color:#F0E0BE!important;border-color:var(--oxblood)!important}
.s-svc .s-btn--ghost{color:var(--brass)!important;border-color:var(--rule-2)!important}
/* The page's own hero is now a duplicate of the one above it. */
/* The page's own hero directly follows the designed one and repeats it, on the
   cream ground with type coloured for a dark one. Matched by position rather
   than by class, because these three pages each name that band differently and
   guessing the class is how the wrong element got hidden twice. */
[data-service-hero] + section,[data-service-hero] + header{display:none}

/* ── buttons ─────────────────────────────────────────────────────────────── */
.s-btn{
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
  font:400 11px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;
  padding:14px 24px;min-height:48px;border:1px solid transparent;text-align:center;
}
.s-btn--wine{background:var(--oxblood);border-color:var(--oxblood);color:var(--brass-pale)}
.s-btn--wine:hover{background:var(--brass);border-color:var(--brass);color:var(--ink)}
.s-btn--brass{background:var(--brass);border-color:var(--brass);color:var(--ink)}
.s-btn--brass:hover{background:var(--brass-pale);border-color:var(--brass-pale);color:var(--ink)}
.s-btn--ghost{border-color:var(--rule-2);color:var(--brass)}
.s-btn--ghost:hover{background:rgba(201,162,90,.14);color:var(--brass-lit)}
.s-btn--city{background:var(--city);color:var(--city-ink)}
.s-btn--city:hover{background:#fff}
.s-btn--cityghost{border-color:rgba(230,237,245,.44);color:var(--city)}
.s-btn--cityghost:hover{background:rgba(230,237,245,.12);color:var(--city)}
.s-btn--lg{padding:16px 28px;min-height:52px;font-size:12px}
.s-btn[aria-disabled="true"],.s-btn:disabled{opacity:.45;pointer-events:none}
.s-iconbtn{
  cursor:pointer;width:44px;height:44px;background:none;
  border:1px solid var(--rule-2);color:var(--brass);font:400 14px/1 var(--serif);
}
.s-iconbtn:hover{background:var(--brass);color:var(--ink)}
.s-textlink{
  font:400 11px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--brass);
}

/* ── the gilt frame and its plate ────────────────────────────────────────
   The signature object treatment. Used for products, storefronts and the
   folio. Deliberately not applied to every box on the page: the brief calls
   thick gold borders everywhere a fault, so the frame is reserved for
   photographs and the intake sheet. */
.s-frame{
  padding:clamp(8px,.9vw,14px);
  background:linear-gradient(150deg,#8E7038 0%,#E0C489 26%,#9A7B3C 52%,#F0DDAE 74%,#8E7038 100%);
  box-shadow:0 26px 56px rgba(0,0,0,.66),inset 0 0 0 1px rgba(0,0,0,.4);
}
.s-frame--thin{padding:6px;box-shadow:0 18px 40px rgba(0,0,0,.6)}
.s-plate{
  position:relative;background:var(--ink-4);
  background-image:repeating-linear-gradient(135deg,rgba(239,227,210,.04) 0 1px,transparent 1px 13px);
  border:1px solid rgba(0,0,0,.65);overflow:hidden;
}
.s-plate>img{width:100%;height:100%;object-fit:cover;display:block}
.s-plate::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(124% 100% at 50% 50%,rgba(0,0,0,0) 34%,rgba(0,0,0,.6) 100%);
}
/* A named slot for photography that does not exist yet. It states the shot. */
.s-slot{
  position:absolute;left:12px;right:12px;bottom:12px;z-index:2;
  font:400 9px/1.55 var(--mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--faint);
}


/* ── editor-bound background photographs ────────────────────────────────
   Three of R42's photograph fields sit on the element that holds a whole
   panel, not on an <img>. sfv-content.js writes --sfv-img on those and adds
   has-photo, or adds no-photo on a deliberate clear. The contract is kept
   exactly so the same registered fields keep working. */
.s-bg{--sfv-img:none;position:relative;isolation:isolate}
.s-bg::before{
  content:'';position:absolute;inset:0;z-index:-2;
  background:var(--sfv-img) center 42%/cover no-repeat;
  filter:saturate(.72) contrast(1.04) brightness(.5);
}
.s-bg::after{
  content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(to top,rgba(10,6,5,.95) 0%,rgba(10,6,5,.8) 34%,
             rgba(10,6,5,.38) 68%,rgba(10,6,5,.6) 100%);
}
.s-bg.no-photo::before{background-image:none}

/* A framed photograph slot whose field may be cleared. The frame keeps its
   dimensions and shows the named shot instead of collapsing the layout. */
.s-vshot{
  position:relative;aspect-ratio:4/5;background:var(--ink-4);
  border:1px solid rgba(0,0,0,.65);overflow:hidden;
  display:flex;align-items:center;justify-content:center;
}
/* An editor photograph field that has no value yet carries no src, so the
   element is hidden and the named slot shows instead. An <img src=""> is a
   broken image, not an empty one, and it renders as one. */
.s-vshot>img{width:100%;height:100%;object-fit:cover;display:block}
.s-vshot>img:not([src]),.s-vshot>img[src=""],.s-vshot>img[hidden]{display:none}
.s-vshot:has(img[src]:not([src=""]):not([hidden]))>span{display:none}
.s-vshot.has-photo{background:var(--sfv-img) center/cover no-repeat}
.s-vshot.has-photo>span,.s-vshot.no-photo>span{display:none}
.s-vshot>span{
  font:400 9px/1.55 var(--mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--faint);padding:14px;text-align:center;
}


/* ── the vault product card: the approved treatment ──────────────────────
   An antique-gold frame around the photograph, a fixed responsive stage, and
   the facts below it in a fixed order: title and price on one line, era and
   fulfilment beneath, then one clear action. The frame is the signature; it is
   reserved for objects and is not applied to every box on the site. */
.v-card{display:flex;flex-direction:column;color:var(--paper);min-width:0}
.v-card__frame{
  padding:clamp(7px,.8vw,12px);
  background:linear-gradient(150deg,#8E7038 0%,#E0C489 26%,#9A7B3C 52%,#F0DDAE 74%,#8E7038 100%);
  box-shadow:0 22px 48px rgba(0,0,0,.6),inset 0 0 0 1px rgba(0,0,0,.35);
}
.v-card__stage{
  position:relative;display:block;aspect-ratio:4/5;overflow:hidden;
  background:var(--ink-4);border:1px solid rgba(0,0,0,.6);
}
/* contain, always: a tall lamp and a wide sideboard both show whole. */
.v-card__stage img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:contain;padding:clamp(10px,1.4vw,18px);
  transition:transform .6s cubic-bezier(.2,.7,.2,1);
}
.v-card:hover .v-card__stage img{transform:scale(1.03)}
.v-card__stage::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 100% at 50% 45%,rgba(0,0,0,0) 42%,rgba(0,0,0,.45) 100%);
}
.v-card__head{
  display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  padding-top:15px;
}
.v-card__title{
  font-family:var(--display);font-size:clamp(16px,1.25vw,19px);line-height:1.25;
  color:var(--paper);min-width:0;
}
.v-card:hover .v-card__title{color:var(--brass-lit)}
.v-card__price{font:700 14px/1 var(--mono);color:var(--brass);white-space:nowrap;flex:0 0 auto}
.v-card__meta{
  margin-top:9px;font:400 10px/1.6 var(--mono);letter-spacing:.16em;
  text-transform:uppercase;color:var(--faint);
}
.v-card__cta{
  margin-top:14px;display:block;text-align:center;
  border:1px solid var(--rule-2);color:var(--brass);padding:13px;
  font:400 10px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;
}
.v-card:hover .v-card__cta{background:var(--brass);color:var(--ink)}
.v-card.is-sold .v-card__stage img{filter:saturate(.14) brightness(.6)}
.v-card.is-sold .v-card__price{color:var(--faint)}

/* The horizontal gallery. Several objects at once, and the next one showing
   at the edge so it is obvious the row continues. */
.v-rail{
  display:flex;gap:clamp(16px,1.8vw,28px);overflow-x:auto;
  scroll-snap-type:x proximity;scroll-behavior:smooth;
  padding-bottom:22px;scrollbar-width:thin;
  /* the peek: the row runs to the page edge rather than stopping at the shell */
  margin-right:calc(var(--gut) * -1);padding-right:var(--gut);
}
.v-rail>*{flex:0 0 clamp(240px,22vw,300px);scroll-snap-align:start}
.v-rail::-webkit-scrollbar{height:2px}
.v-rail::-webkit-scrollbar-thumb{background:var(--rule-2)}
/* One object is a card, not a billboard. */
.v-rail.is-one{display:grid;grid-template-columns:minmax(0,300px);margin-right:0;padding-right:0}
.v-rail.is-one>*{flex:none}
.v-rail.is-two{display:grid;grid-template-columns:repeat(2,minmax(0,300px));margin-right:0;padding-right:0}
.v-rail.is-two>*{flex:none}

/* ── the colour selector ─────────────────────────────────────────────────
   Visible, never dominant. A row of swatches with the current one marked. */
.v-somm{
  display:flex;flex-wrap:wrap;align-items:center;gap:12px clamp(14px,2vw,26px);
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
  padding:16px 0;margin-top:clamp(22px,2.6vw,34px);
}
.v-somm__set{display:flex;flex-wrap:wrap;gap:10px}
.v-somm__btn{
  position:relative;cursor:pointer;background:none;
  border:1px solid var(--rule-2);color:var(--paper);
  padding:11px 16px;min-height:46px;display:inline-flex;align-items:center;gap:9px;
  font:400 10px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;
}
.v-somm__btn:hover{border-color:var(--brass);color:var(--brass-lit)}
.v-somm__btn[aria-pressed="true"]{border-color:var(--brass);color:var(--brass-lit)}
.v-somm__btn[aria-pressed="true"]::after{
  content:'';position:absolute;left:-1px;right:-1px;bottom:-1px;height:2px;background:var(--brass);
}
.v-somm__dot{
  width:12px;height:12px;border-radius:50%;display:block;flex:0 0 auto;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.28);
}
/* Without JavaScript the buttons are simply absent and the page keeps the
   default palette, which is why they are written by script rather than shipped
   in the markup as controls that would do nothing. */

/* ── product card and the shop gallery ───────────────────────────────────
   The stage is fixed and responsive, so the photograph can never size it.
   object-fit:contain, because a chair cropped to a square is a lie about the
   chair. One product stays a normal card; several become the gallery. */
.s-gallery{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,264px),1fr));
  gap:clamp(16px,1.8vw,30px);
}
.s-gallery--rail{
  display:flex;overflow-x:auto;scroll-snap-type:x proximity;scroll-behavior:smooth;
  padding-bottom:22px;scrollbar-width:thin;
}
.s-gallery--rail>*{flex:0 0 clamp(252px,24vw,320px);scroll-snap-align:start}
.s-gallery--rail::-webkit-scrollbar{height:2px}
.s-gallery--rail::-webkit-scrollbar-thumb{background:var(--rule-2)}
/* One object is a card, not a carousel and not a billboard. */
.s-gallery--one{display:grid;grid-template-columns:minmax(0,320px);gap:0}

.s-card{display:block;color:var(--paper);min-width:0}
.s-card__stage{
  position:relative;display:block;aspect-ratio:4/5;overflow:hidden;
  background:var(--ink-4);border-bottom:1px solid var(--rule);
}
/* contain, so nothing is cropped or stretched; the plate supplies the ground. */
.s-card__stage img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:contain;padding:clamp(10px,1.4vw,20px);
  transition:transform .6s cubic-bezier(.2,.7,.2,1);
}
.s-card:hover .s-card__stage img{transform:scale(1.035)}
.s-card__body{display:block;padding-top:14px}
.s-card__meta{
  display:block;font:400 10px/1.4 var(--mono);letter-spacing:.18em;
  text-transform:uppercase;color:var(--brass);
}
.s-card__title{
  display:block;font-family:var(--display);font-size:clamp(15px,1.15vw,18px);
  line-height:1.3;margin-top:8px;color:var(--paper);
}
.s-card:hover .s-card__title{color:var(--brass-lit)}
.s-card__price{
  display:block;font:700 13px/1 var(--mono);color:var(--brass);margin-top:9px;
}
.s-card__cta{
  margin-top:12px;display:block;text-align:center;border:1px solid var(--rule-2);
  color:var(--brass);padding:12px;
  font:400 10px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;
}
.s-card:hover .s-card__cta{background:var(--brass);color:var(--ink)}
.s-card.is-sold .s-card__stage img{filter:saturate(.14) brightness(.62)}
.s-card.is-sold .s-card__price{color:var(--faint)}
/* Until the real photograph has loaded the stage holds its shape and shows
   nothing, rather than flashing the previous object's picture. */
.s-card__stage img[data-pending]{opacity:0}

/* ── product detail ──────────────────────────────────────────────────────── */
.s-detail{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  gap:clamp(24px,3vw,56px);align-items:start}
.s-detail__stage{position:relative;aspect-ratio:4/5;background:var(--ink-4);overflow:hidden}
.s-detail__stage img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:contain;padding:clamp(14px,2vw,28px)}
.s-detail__thumbs{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap}
.s-detail__thumb{
  width:64px;height:64px;background:var(--ink-4);border:1px solid var(--rule);
  cursor:pointer;padding:0;overflow:hidden;
}
.s-detail__thumb img{width:100%;height:100%;object-fit:contain;padding:4px}
.s-detail__thumb[aria-selected="true"]{border-color:var(--brass)}
.s-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:18px;border-top:1px solid var(--rule);padding-top:20px;margin-top:22px}
.s-facts dt{font:400 10px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--faint)}
.s-facts dd{margin:8px 0 0;font:400 16px/1.5 var(--serif);color:var(--paper)}

/* ── shopping bag ────────────────────────────────────────────────────────── */
.s-bagline{
  display:grid;grid-template-columns:88px minmax(0,1fr) auto;gap:18px;
  align-items:center;padding:18px 0;border-bottom:1px solid var(--rule-3);
}
.s-bagline__img{aspect-ratio:1/1;background:var(--ink-4);position:relative;overflow:hidden}
.s-bagline__img img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:6px}
.s-bagsum{
  border:1px solid var(--rule);background:var(--ink-2);padding:clamp(20px,2.4vw,30px);
}
.s-bagsum__row{display:flex;justify-content:space-between;gap:16px;padding:9px 0}
.s-bagsum__total{
  border-top:1px solid var(--rule);margin-top:10px;padding-top:14px;
  font-family:var(--display);font-size:20px;color:var(--brass-lit);
}

/* ── map shell and location cards ────────────────────────────────────────── */
.s-mapstage{
  position:relative;min-width:0;border:1px solid rgba(201,162,90,.3);
  background:var(--ink-4);overflow:hidden;min-height:600px;
}
.s-mapgrid{display:grid;grid-template-columns:minmax(0,1fr) 380px;
  gap:clamp(16px,2vw,26px);align-items:stretch}
.s-maplist{
  border:1px solid rgba(201,162,90,.3);background:var(--ink-2);
  display:flex;flex-direction:column;width:100%;
}
.s-maplist__head{
  padding:16px 18px;border-bottom:1px solid var(--rule);
  display:flex;justify-content:space-between;align-items:baseline;gap:12px;
}
.s-maplist__scroll{flex:1 1 auto;overflow-y:auto}
.s-maplist__scroll::-webkit-scrollbar{width:3px}
.s-maplist__scroll::-webkit-scrollbar-thumb{background:var(--rule-2)}
.s-locrow{
  cursor:pointer;display:block;width:100%;text-align:left;background:none;
  border:0;border-bottom:1px solid var(--rule-3);border-left:2px solid transparent;
  padding:17px 18px;min-height:52px;color:var(--paper);
}
.s-locrow:hover{background:rgba(201,162,90,.07)}
.s-locrow[aria-selected="true"]{background:rgba(201,162,90,.14);border-left-color:var(--brass)}
.s-pin{
  position:absolute;transform:translate(-50%,-50%);cursor:pointer;
  background:none;border:0;padding:0;
  display:flex;flex-direction:column;align-items:center;gap:6px;z-index:4;
}
.s-pin__dot{
  display:block;width:26px;height:26px;border-radius:50% 50% 50% 0;
  transform:rotate(-45deg);border:1px solid var(--brass);
  background:rgba(10,7,9,.75);box-shadow:0 8px 18px rgba(0,0,0,.6);
  transition:width .2s ease,height .2s ease,background .2s ease;
}
.s-pin[aria-selected="true"] .s-pin__dot{width:34px;height:34px;background:var(--brass);border-color:var(--brass-pale)}
.s-pin.is-featured .s-pin__dot{box-shadow:0 8px 18px rgba(0,0,0,.6),0 0 0 4px rgba(217,169,164,.22)}
.s-pin__flag{
  display:none;white-space:nowrap;background:var(--ink);border:1px solid var(--brass);
  padding:5px 9px;font:400 9px/1 var(--mono);letter-spacing:.14em;
  text-transform:uppercase;color:var(--brass-lit);
}
.s-pin:hover .s-pin__flag,.s-pin[aria-selected="true"] .s-pin__flag{display:block}
.s-drawer{
  position:absolute;left:18px;bottom:18px;width:min(380px,44%);z-index:8;
  background:rgba(8,6,7,.97);backdrop-filter:blur(10px);border:1px solid var(--brass);
  box-shadow:0 30px 68px rgba(0,0,0,.72);padding:clamp(16px,1.8vw,22px);
  max-height:82%;overflow-y:auto;
}

/* ── resource, project and press cards ───────────────────────────────────
   One tile component with modifiers. Not one per collection. */
.s-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:1px}
.s-tiles--3{grid-template-columns:repeat(3,1fr)}
/* Ten departments, two balanced rows of five. auto-fit chose six and four at
   1440px and stranded two at some widths; ten divides by five exactly, so the
   count is stated rather than negotiated, and it steps down evenly. */
/* Ten departments. Only 5, 2 and 1 divide ten without leaving an orphan on
   the last row, so those are the only counts used: four columns strands two
   cards and three strands one. Five across on desktop, two on tablet, one on
   a phone. */
.s-tiles--5{grid-template-columns:repeat(5,1fr)}
@media (max-width:1100px){.s-tiles--5{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.s-tiles--5{grid-template-columns:1fr}}
/* Equal visual weight: every card is the same height in its row, and its text
   sits at the top so the boundaries align. */
.s-tiles--5 .s-tile{display:flex;flex-direction:column;min-height:clamp(150px,15vw,210px)}
/* Names wrap to two lines at five across; the note is pinned to the bottom
   so the cards read as a grid rather than as ten different heights. */
.s-tiles--5 .s-tile__note{margin-top:auto;padding-top:10px}
@media (max-width:560px){.s-tiles--5 .s-tile{min-height:0}}
.s-tiles--2{grid-template-columns:repeat(2,1fr)}
.s-tile{
  position:relative;display:block;background:var(--ink-2);
  box-shadow:0 0 0 1px var(--rule);padding:clamp(20px,2.2vw,30px);
  color:var(--paper);transition:background .3s ease;
}
.s-tile:hover{background:rgba(110,39,51,.3)}
.s-tile__kicker,.s-tile__name,.s-tile__note,.s-tile__body{display:block}
.s-tile__kicker{font:400 10px/1 var(--mono);letter-spacing:.22em;text-transform:uppercase;color:var(--brass)}
.s-tile__name{font-family:var(--display);font-size:clamp(18px,1.7vw,25px);line-height:1.16;
  color:var(--brass-lit);margin-top:14px}
.s-tile__note{font:400 10px/1.6 var(--mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--faint);margin-top:10px}
.s-tile__body{margin-top:12px;font:400 15px/1.55 var(--serif);color:var(--dim)}
.s-tile__status{
  display:inline-block;margin-top:12px;border:1px solid var(--rule-2);
  padding:5px 9px;font:400 9px/1 var(--mono);letter-spacing:.16em;
  text-transform:uppercase;color:var(--brass);
}
.s-tile--figure{padding:0;overflow:hidden}
.s-tile--figure .s-tile__art{aspect-ratio:16/10;background:var(--ink-4);position:relative;overflow:hidden}
.s-tile--figure .s-tile__art img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.s-tile--figure:hover .s-tile__art img{transform:scale(1.04)}
.s-tile--figure .s-tile__in{padding:clamp(18px,2vw,26px)}

/* ── timeline ────────────────────────────────────────────────────────────
   History. An entry with a photograph shows it; an entry without keeps the
   year plate, so the column never collapses into a wall of text. */
.s-timeline{display:flex;flex-direction:column;gap:1px;background:var(--rule)}
.s-tl{display:grid;grid-template-columns:200px minmax(0,1fr);gap:clamp(18px,2.4vw,40px);
  background:var(--ink);padding:clamp(22px,2.6vw,38px) 0}
.s-tl__year{
  font-family:var(--display);font-size:clamp(28px,3vw,44px);line-height:1;
  color:var(--brass-lit);
}
.s-tl__plate{
  margin-top:14px;aspect-ratio:4/3;background:var(--ink-4);
  border:1px solid var(--rule);display:flex;align-items:center;justify-content:center;
  position:relative;overflow:hidden;
}
.s-tl__plate img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.s-tl__plate span{font:400 9px/1.5 var(--mono);letter-spacing:.16em;
  text-transform:uppercase;color:var(--faint);padding:12px;text-align:center}
.s-tl__note{
  margin-top:14px;border-left:2px solid var(--oxblood);padding-left:14px;
  font:400 14px/1.6 var(--serif);color:var(--dim);
}

/* ── image gallery ───────────────────────────────────────────────────────── */
.s-grid-img{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));
  gap:clamp(10px,1.2vw,18px)}
.s-grid-img figure{margin:0}
.s-grid-img figcaption{margin-top:9px;font:400 10px/1.5 var(--mono);
  letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.s-fig{margin:0}
.s-fig__cap{display:flex;justify-content:space-between;gap:12px;align-items:baseline;
  padding-top:12px;font:400 10px/1.5 var(--mono);letter-spacing:.14em;
  text-transform:uppercase;color:var(--faint)}

/* ── quotation ───────────────────────────────────────────────────────────── */
.s-quote{margin:0;border-left:2px solid var(--brass);padding-left:clamp(18px,2.4vw,32px)}
.s-quote p{margin:0;font-family:var(--display);font-weight:400;
  font-size:clamp(20px,2.4vw,34px);line-height:1.3;color:var(--brass-lit)}
.s-quote footer{margin-top:16px;font:400 10px/1.6 var(--mono);
  letter-spacing:.2em;text-transform:uppercase;color:var(--faint)}

/* ── statistics ──────────────────────────────────────────────────────────── */
/* Four statistics in an auto-fit grid strand the fourth beside two empty
   cells at desktop width. Two columns divides four exactly, and the modifier
   exists for counts that do not. */
.s-stats{display:grid;grid-template-columns:repeat(2,1fr);
  gap:1px;background:var(--rule);border:1px solid var(--rule)}
.s-stats--3{grid-template-columns:repeat(3,1fr)}
.s-stats--auto{grid-template-columns:repeat(auto-fit,minmax(min(100%,170px),1fr))}
@media (max-width:560px){.s-stats,.s-stats--3{grid-template-columns:1fr}}
.s-stat{background:var(--ink);padding:clamp(20px,2.2vw,30px)}
.s-stat__n{font-family:var(--display);font-size:clamp(28px,3.4vw,48px);line-height:1;
  color:var(--brass-lit)}
.s-stat__l{margin-top:10px;font:400 10px/1.5 var(--mono);letter-spacing:.18em;
  text-transform:uppercase;color:var(--faint)}

/* ── accordion ───────────────────────────────────────────────────────────── */
.s-acc{border-top:1px solid var(--rule)}
.s-acc__item{border-bottom:1px solid var(--rule)}
.s-acc__btn{
  cursor:pointer;width:100%;text-align:left;background:none;border:0;
  padding:20px 0;min-height:56px;display:flex;justify-content:space-between;
  align-items:center;gap:16px;color:var(--paper);
  font-family:var(--display);font-size:clamp(16px,1.4vw,21px);line-height:1.2;
}
.s-acc__btn:hover{color:var(--brass-lit)}
.s-acc__mark{flex:0 0 auto;font:400 18px/1 var(--mono);color:var(--brass);
  transition:transform .3s cubic-bezier(.22,.7,.2,1)}
.s-acc__btn[aria-expanded="true"] .s-acc__mark{transform:rotate(45deg)}
.s-acc__panel{padding:0 0 22px;max-width:var(--read)}

/* ── left-side table of contents, and its mobile disclosure ─────────────── */
.s-withtoc{display:grid;grid-template-columns:280px minmax(0,1fr);
  gap:clamp(26px,3.2vw,56px);align-items:start}
.s-toc{position:sticky;top:96px;min-width:0}
.s-toc__box{border:1px solid var(--rule);background:var(--ink-2)}
.s-toc__head{
  padding:17px 20px;border-bottom:1px solid var(--rule);
  font-family:var(--display);font-size:11px;letter-spacing:.3em;
  text-transform:uppercase;color:var(--brass);
}
.s-toc__link{
  display:block;padding:14px 20px;min-height:46px;
  border-left:2px solid transparent;color:var(--dim);font-size:16px;
}
.s-toc__link:hover{color:var(--brass-lit)}
.s-toc__link[aria-current="true"]{
  border-left-color:var(--brass);background:rgba(201,162,90,.13);color:var(--brass-lit);
}
.s-toc__num{font:400 10px/1 var(--mono);letter-spacing:.2em;color:var(--brass);margin-right:10px}
.s-tocm{display:none;border:1px solid var(--rule);background:var(--ink-2);margin-bottom:22px}
.s-tocm__btn{
  cursor:pointer;width:100%;text-align:left;background:none;border:0;
  padding:16px 18px;min-height:52px;display:flex;justify-content:space-between;
  align-items:center;gap:14px;color:var(--brass-lit);
  font:400 11px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;
}

/* ── forms: the private-client folio ─────────────────────────────────────
   THE RULED PAPER IS GONE. A line appears only where somebody writes. Nothing
   repeats behind labels, helper text, selects, checkboxes, uploads or errors. */
.s-folio{
  padding:clamp(10px,1.1vw,16px);
  background:linear-gradient(150deg,#8E7038 0%,#E0C489 26%,#9A7B3C 52%,#F0DDAE 74%,#8E7038 100%);
  box-shadow:0 34px 76px rgba(0,0,0,.7);
}
.s-sheet{
  position:relative;background:var(--ink-3);
  background-image:radial-gradient(120% 60% at 50% 0%,rgba(201,162,90,.05) 0%,rgba(0,0,0,0) 60%);
  border:1px solid rgba(0,0,0,.6);padding:clamp(22px,2.8vw,44px);overflow:hidden;
}
/* One vertical margin rule, inset, outside the writing column. */
.s-sheet__rule{
  position:absolute;left:clamp(18px,2vw,26px);top:clamp(22px,2.8vw,44px);
  bottom:clamp(22px,2.8vw,44px);width:1px;background:rgba(110,39,51,.45);
}
.s-sheet__in{position:relative;padding-left:clamp(16px,2vw,28px)}
.s-fsec{margin-top:clamp(26px,3vw,42px)}
.s-fsec:first-child{margin-top:0}
.s-fsec__head{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:baseline}
.s-fsec__num{font:400 10px/1 var(--mono);letter-spacing:.24em;color:var(--brass)}
.s-fsec__title{font-family:var(--display);font-size:clamp(17px,1.6vw,22px);
  line-height:1.15;color:var(--brass-lit)}
.s-fsec__fill{flex:1 1 40px;height:1px;background:rgba(201,162,90,.3);min-width:20px}
.s-fsec__note{margin:12px 0 0;max-width:60ch;font-size:15px;color:var(--dim)}
.s-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));
  gap:clamp(18px,2.2vw,30px);margin-top:20px}
.s-field{display:block;min-width:0}
.s-field--full{grid-column:1/-1}
.s-field__label{display:flex;flex-wrap:wrap;gap:8px;align-items:baseline}
.s-field__label b{font:400 10px/1 var(--mono);letter-spacing:.24em;
  text-transform:uppercase;color:var(--label)}
.s-field__req{font:400 9px/1 var(--mono);letter-spacing:.16em;
  text-transform:uppercase;color:var(--brass)}
.s-field__opt{font:400 9px/1 var(--mono);letter-spacing:.16em;
  text-transform:uppercase;color:var(--faint)}
.s-input,.s-select,.s-area{
  width:100%;margin-top:11px;background:transparent;border:0;
  border-bottom:1px solid var(--rule-2);color:var(--paper-2);
  padding:12px 2px;min-height:48px;font:400 19px/1.4 var(--serif);
}
.s-area{font-size:18px;line-height:1.6;resize:vertical;min-height:96px}
.s-input:focus,.s-select:focus,.s-area:focus{
  outline:none;border-bottom-color:var(--brass-lit);box-shadow:0 1px 0 0 var(--brass-lit);
}
.s-input::placeholder,.s-area::placeholder{color:var(--placeholder)}
.s-select option{background:var(--ink-3);color:var(--paper-2)}
.s-check{display:flex;gap:12px;align-items:flex-start;margin-top:12px;cursor:pointer}
.s-check input{
  flex:0 0 auto;width:20px;height:20px;margin:2px 0 0;accent-color:var(--brass);
}
.s-check span{font-size:16px;color:var(--paper-2)}
.s-field__err{display:block;margin-top:9px;font-size:15px;color:var(--alert)}
.s-input[aria-invalid="true"],.s-area[aria-invalid="true"]{border-bottom-color:var(--alert)}
.s-uploads{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,148px),1fr));
  gap:12px;margin-top:16px}
.s-upload{
  position:relative;aspect-ratio:1/1;min-height:120px;
  border:1px dashed rgba(201,162,90,.38);display:flex;align-items:center;
  justify-content:center;overflow:hidden;cursor:pointer;background:none;
}
.s-upload.is-filled{border-style:solid;border-color:rgba(201,162,90,.55);background:rgba(201,162,90,.1)}
.s-upload span{font:400 9px/1.5 var(--mono);letter-spacing:.14em;
  text-transform:uppercase;color:var(--label);text-align:center;padding:10px}
.s-fnote{margin-top:14px;font:400 10px/1.7 var(--mono);letter-spacing:.16em;
  text-transform:uppercase;color:var(--label)}
.s-fsubmit{
  margin-top:clamp(26px,3vw,42px);border-top:1px solid rgba(201,162,90,.3);
  padding-top:24px;display:flex;flex-wrap:wrap;align-items:center;gap:20px;
}
.s-seal{
  display:flex;align-items:center;justify-content:center;text-align:center;
  width:112px;height:112px;border-radius:50%;border:1px solid var(--oxblood-lit);
  background:radial-gradient(60% 60% at 34% 30%,#A8404A 0%,#7A2129 52%,#5A161D 100%);
  color:#F3D9B0;font-family:var(--display);font-size:10px;letter-spacing:.22em;
  text-transform:uppercase;flex:0 0 auto;
  box-shadow:0 12px 26px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.16);
}


/* ── the consignment calculator and fit finder ─────────────────────────── */
.s-vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.s-calc,.s-fit{
  border:1px solid var(--rule);background:var(--ink-2);
  padding:clamp(22px,2.6vw,38px);margin-block:clamp(24px,2.8vw,40px);
}
.s-calc__inputs{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));
  gap:clamp(18px,2.2vw,32px);margin-top:clamp(20px,2.4vw,30px);
}
.s-calc__money{display:flex;align-items:center;gap:8px}
.s-calc__money>span{font-family:var(--display);font-size:1.5rem;color:var(--faint)}
.s-calc__out{margin-top:clamp(22px,2.6vw,34px);overflow-x:auto}
.s-calc__table{width:100%;min-width:520px;border-collapse:collapse}
.s-calc__table th,.s-calc__table td{
  text-align:left;padding:14px 16px;border-bottom:1px solid var(--rule-3);
  font:400 16px/1.4 var(--serif);color:var(--dim);vertical-align:baseline;
}
.s-calc__table thead th{
  font:400 10px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;
  color:var(--faint);border-bottom:1px solid var(--rule);
}
.s-calc__table tbody th{color:var(--paper);font-weight:400}
.s-calc__you{color:var(--brass-lit);font-weight:400}
.s-fit__answers{
  display:flex;flex-wrap:wrap;gap:10px;margin-top:clamp(20px,2.4vw,28px);
}
.s-fit__answers .s-btn{text-align:left;justify-content:flex-start}
.s-fit__back{display:block;margin-top:16px;background:none;border:0;cursor:pointer;padding:0}
@media (max-width:560px){
  .s-fit__answers{flex-direction:column}
  .s-fit__answers .s-btn{width:100%}
}


/* ── the download panel ──────────────────────────────────────────────────
   A guide is a record with a version and a file, not a button. */
.s-dl{border:1px solid var(--rule);background:var(--ink-2);padding:clamp(20px,2.4vw,32px)}
.s-dl__form{margin-top:clamp(18px,2.2vw,26px);max-width:46ch}
.s-dl__done{margin-top:clamp(18px,2.2vw,26px)}
.s-dlgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));
  gap:clamp(16px,2vw,26px)}

/* ── states: loading, empty, error, success ─────────────────────────────── */
.s-state{
  border:1px solid var(--rule);background:var(--ink-2);
  padding:clamp(26px,3.4vw,48px) clamp(20px,2.4vw,32px);text-align:center;
}
.s-state__t{font-family:var(--display);font-size:clamp(19px,1.9vw,26px);
  line-height:1.2;color:var(--brass-lit)}
.s-state__b{margin:12px auto 0;max-width:44ch;font-size:15px;color:var(--dim)}
.s-state__cta{margin-top:18px;display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.s-state--error{border-color:rgba(142,42,52,.7);background:rgba(110,39,51,.2);text-align:left}
.s-state--error .s-state__t{color:var(--alert)}
.s-state--success{border-color:var(--brass);background:rgba(201,162,90,.09);text-align:left}
.s-skel{
  background:linear-gradient(90deg,var(--ink-2) 0%,rgba(201,162,90,.09) 50%,var(--ink-2) 100%);
  background-size:200% 100%;animation:sShimmer 1.4s linear infinite;
}
@keyframes sShimmer{from{background-position:200% 0}to{background-position:-200% 0}}
.s-skel__line{height:12px;margin-bottom:10px}
.s-skel__stage{aspect-ratio:4/5}

/* ── branded 404 ─────────────────────────────────────────────────────────── */
.s-404{min-height:56vh;display:flex;flex-direction:column;justify-content:center}

/* ── footer ──────────────────────────────────────────────────────────────
   One footer, one data source, rendered on every public page. */
.s-foot{border-top:1px solid var(--rule);background:rgba(6,4,5,.5);
  margin-top:clamp(50px,6vw,100px)}
.s-foot__grid{
  max-width:var(--wide);margin:0 auto;padding:clamp(42px,4.8vw,76px) var(--gut) 20px;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));
  gap:clamp(24px,2.8vw,46px);
}
.s-foot__head{
  font-family:var(--display);font-size:11px;letter-spacing:.3em;
  text-transform:uppercase;color:var(--brass);margin:0 0 16px;
}
.s-foot__link{
  display:flex;align-items:center;padding:7px 0;min-height:34px;
  font-size:16px;color:var(--paper);
}
.s-foot__link:hover{color:var(--brass)}
.s-foot__meta{margin-top:18px;font:400 10px/1.9 var(--mono);
  letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}
.s-foot__bar{
  max-width:var(--wide);margin:0 auto;padding:0 var(--gut) 42px;
}
.s-foot__bar-in{
  border-top:1px solid rgba(201,162,90,.18);padding-top:22px;
  display:flex;flex-wrap:wrap;gap:14px 24px;justify-content:space-between;align-items:center;
}

/* ── empty slots collapse ────────────────────────────────────────────────
   sfv-content.js hides a cleared <img> rather than its container, so a figure
   that holds nothing removes itself and leaves no empty gilded box. Optional
   fields collapse the same way. */
.s-frame:not(:has(img:not([hidden]))):not(:has(.s-slot)){display:none}
.s-card__stage:not(:has(img:not([hidden]))){display:none}
[data-optional]:empty{display:none}
.s-fig:not(:has(img:not([hidden]))):not(:has(.s-slot)){display:none}

/* ── responsive ──────────────────────────────────────────────────────────── */
/* THE HEADER SWITCHES TO THE MENU BUTTON AT A MEASURED WIDTH, NOT A ROUND ONE.
   It was 1120px, and the nine top-level items need 1037px of their own plus the
   wordmark, the Bag link and the header padding. Between about 1240 and 1121
   the nav overflowed its box and its last items — Contact, and the Sell & Ask
   caret — were painted UNDERNEATH the Bag link, which sits after it in the
   header. They were on screen, they looked normal, and clicking them opened the
   bag. Three pages were caught by the corpus at 1180; the band was far wider
   than the one width that happened to be sampled.

   1340 is where it was measured to fit, at 1330, with a little headroom for
   font metrics. Below it the menu button takes over, and nothing is lost:
   s-navm carries every link the bar does AND its own Bag entry, kept in step by
   the same paintBag over [data-s-bag].

   IF A TENTH ITEM IS EVER ADDED THIS NUMBER IS WRONG AGAIN. tnav1180.mjs sweeps
   every width from 1400 down to 320 and fails on the first one where a header
   link cannot be clicked, so the next person finds out from a test rather than
   from a visitor who could not reach Contact. */
@media (max-width:1340px){
  .s-nav{display:none}
  .s-head__end .s-bag{display:none}
  .s-burger{display:inline-flex}
  .s-hero__grid{grid-template-columns:1fr}
  .s-detail{grid-template-columns:1fr}
}
@media (max-width:1000px){
  .s-withtoc{display:flex;flex-direction:column}
  .s-toc{display:none}
  .s-tocm{display:block}
  .s-sheet__rule{display:none}
  .s-sheet__in{padding-left:0}
  .s-fields{grid-template-columns:minmax(0,1fr)}
  .s-mapgrid{display:flex;flex-direction:column;gap:clamp(14px,2vw,22px)}
  .s-mapstage{min-height:0;aspect-ratio:16/10}
  .s-maplist{max-height:560px}
  .s-maplist__scroll{max-height:420px}
  .s-tiles--3{grid-template-columns:repeat(2,1fr)}
  .s-tl{grid-template-columns:1fr;gap:16px}
  .s-split--wide{grid-template-columns:1fr}
}
@media (max-width:720px){
  .s-mapstage{aspect-ratio:4/3}
  /* On a phone the detail rises as a sheet rather than a squeezed sidebar. */
  .s-drawer{left:12px;right:12px;bottom:12px;width:auto;max-height:62%}
}
@media (max-width:560px){
  body{font-size:16px}
  .s-tiles,.s-tiles--3,.s-tiles--2{grid-template-columns:1fr}
  .s-gallery{grid-template-columns:1fr}
  .s-bagline{grid-template-columns:64px minmax(0,1fr);gap:14px}
  .s-seal{width:88px;height:88px;font-size:9px}
  .s-btn{width:100%}
  .s-hero__cta .s-btn{width:auto;flex:1 1 auto}
}

/* The mobile navigation panel. Parked off-canvas and, critically, hidden, so
   a fixed element cannot extend the document's scroll width or sit in the tab
   order while it is closed. */
.s-navm{
  position:fixed;inset:78px 0 0;z-index:65;background:var(--ink);
  overflow-y:auto;padding:8px var(--gut) 40px;
  transform:translateX(100%);visibility:hidden;
  transition:transform .3s ease,visibility 0s linear .3s;
}
.s-navm[data-open="1"]{
  transform:translateX(0);visibility:visible;
  transition:transform .3s ease,visibility 0s;
}
.s-navm__item{border-bottom:1px solid rgba(201,162,90,.16)}
.s-navm__top{
  cursor:pointer;width:100%;text-align:left;background:none;border:0;
  padding:17px 2px;min-height:52px;display:flex;justify-content:space-between;
  align-items:center;gap:14px;font-family:var(--display);font-size:18px;color:var(--paper);
}
.s-navm__sub{padding:0 0 14px 16px;border-left:1px solid rgba(201,162,90,.3);margin-left:2px}
.s-navm__link{display:block;padding:13px 2px;min-height:48px;font-size:16px;color:var(--dim)}
.s-navm__link:hover{color:var(--brass-lit)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important;
  }
}


/* ══ THE FROGS PAGE ════════════════════════════════════════════════════════
   Three components: a split introduction, the filter bar that sits on the
   map, and the note that breaks the page between the list and the embed
   offer. They restate the palette locally because the page they live on
   defines --ink, --paper and --brass with the opposite meanings, and these
   components must not change when that bridge changes. */
.fhero,.frogbar,.fnote{
  --f-ink:#0A0709; --f-panel:#100C0E; --f-paper:#EFE3D2; --f-dim:#C3B39F;
  --f-faint:#8A7A6A; --f-brass:#C9A25A; --f-lit:#E3C88B; --f-rule:rgba(201,162,90,.24);
}

/* ── the introduction ── copy on the left, the street on the right ── */
.fhero{background:var(--f-ink);padding:clamp(30px,4vw,64px) 0 clamp(26px,3vw,44px)}
.fhero__grid{display:grid;gap:clamp(24px,3.4vw,52px);grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:center}
@media (max-width:900px){.fhero__grid{grid-template-columns:1fr}}
.fhero__copy .eyebrow{font:400 10px/1 'Courier Prime',monospace;letter-spacing:.24em;text-transform:uppercase;color:var(--f-brass);margin-bottom:14px}
.fhero__copy h1{font-family:Prata,Georgia,serif;font-weight:400;color:var(--f-lit);
  font-size:clamp(2.1rem,4.6vw,3.5rem);line-height:1.04;letter-spacing:-.01em;margin-bottom:18px;text-wrap:balance}
.fhero__copy p{font-family:'EB Garamond',Georgia,serif;color:var(--f-dim);
  font-size:clamp(1rem,1.15vw,1.12rem);line-height:1.72;max-width:60ch;margin-bottom:14px;text-wrap:pretty}
.fhero__lede{color:var(--f-paper)!important;font-size:clamp(1.06rem,1.3vw,1.24rem)!important}
.fhero__copy p:last-child{margin-bottom:0}
.fhero__ask{color:var(--f-lit);text-underline-offset:3px;text-decoration-color:var(--f-rule)}
.fhero__ask:hover{color:var(--f-brass)}
.fhero__shot{margin:0}
.fhero__shot img{display:block;width:100%;height:clamp(240px,26vw,380px);object-fit:cover;
  border:1px solid var(--f-rule);filter:saturate(.82) contrast(1.03)}
.fhero__shot figcaption{margin-top:10px;font:400 10px/1.7 'Courier Prime',monospace;
  letter-spacing:.14em;text-transform:uppercase;color:var(--f-faint)}

/* ── the filter bar ── flush on top of the map frame ── */
.frogbar{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px clamp(12px,1.6vw,20px);
  background:var(--f-panel);border:1px solid var(--f-rule);border-bottom:0;
  padding:clamp(12px,1.3vw,16px) clamp(12px,1.6vw,18px);
}
.frogbar__lab{font:400 10px/1 'Courier Prime',monospace;letter-spacing:.22em;
  text-transform:uppercase;color:var(--f-faint);flex:0 0 auto}
/* Wrapping is the first answer; scrolling inside the bar is the fallback on a
   very narrow phone. Either way the overflow stays inside this box and the
   page itself never scrolls sideways. */
.frogbar__set{display:flex;flex-wrap:wrap;gap:8px;min-width:0;max-width:100%;overflow-x:auto;
  scrollbar-width:none;-webkit-overflow-scrolling:touch}
.frogbar__set::-webkit-scrollbar{display:none}
.frogbar__note{flex:1 1 100%;margin:0;font-family:'EB Garamond',Georgia,serif;
  font-size:.92rem;line-height:1.5;color:var(--f-faint);min-height:1.4em}
.frogbar .kind{
  display:inline-flex;align-items:center;gap:8px;min-height:44px;flex:0 0 auto;
  background:transparent;border:1px solid var(--f-rule);color:var(--f-dim);
  font:400 11px/1 'Courier Prime',monospace;letter-spacing:.14em;text-transform:uppercase;
  padding:11px 15px;cursor:pointer;transition:background .18s,border-color .18s,color .18s;
}
.frogbar .kind .g{font-size:1.05rem;line-height:1}
.frogbar .kind .n{font-size:10px;letter-spacing:.06em;color:var(--f-faint)}
.frogbar .kind:hover:not([disabled]){border-color:var(--f-brass);color:var(--f-paper)}
.frogbar .kind[aria-pressed="true"]{background:var(--f-brass);border-color:var(--f-brass);color:var(--f-ink)}
.frogbar .kind[aria-pressed="true"] .n{color:rgba(10,7,9,.7)}
.frogbar .kind[aria-pressed="false"]{opacity:.62}
.frogbar .kind[disabled]{opacity:.45;cursor:progress}
.frogbar .kind:focus-visible{outline:2px solid var(--f-lit);outline-offset:2px}
/* The bar and the map are one object. */
.frogbar + .mapwrap{border-top:0!important}

/* ── the three kinds, as a band ── the page's third rhythm ── */
.fkinds{
  --f-ink:#0A0709; --f-panel:#100C0E; --f-paper:#EFE3D2; --f-dim:#C3B39F;
  --f-faint:#8A7A6A; --f-brass:#C9A25A; --f-lit:#E3C88B; --f-rule:rgba(201,162,90,.24);
  margin:clamp(34px,4vw,60px) 0;border-top:1px solid var(--f-rule);padding-top:clamp(22px,2.6vw,34px);
}
.fkinds__k{margin:0 0 6px;font:400 10px/1 'Courier Prime',monospace;letter-spacing:.22em;
  text-transform:uppercase;color:var(--f-brass)}
.fkinds__h{margin:0 0 clamp(18px,2vw,28px);font-family:Prata,Georgia,serif;font-weight:400;
  font-size:clamp(1.4rem,2.4vw,2.05rem);line-height:1.15;color:var(--f-lit)}
.fkinds__set{display:grid;gap:clamp(14px,1.6vw,22px);grid-template-columns:repeat(3,1fr)}
@media (max-width:820px){.fkinds__set{grid-template-columns:1fr}}
.fkinds__card{background:var(--f-panel);border:1px solid var(--f-rule);
  padding:clamp(18px,2.2vw,28px);display:grid;gap:8px;align-content:start}
.fkinds__g{font-size:1.7rem;line-height:1}
.fkinds__card h3{margin:0;font-family:Prata,Georgia,serif;font-weight:400;
  font-size:clamp(1.05rem,1.5vw,1.3rem);color:var(--f-paper)}
.fkinds__card p{margin:0;font-family:'EB Garamond',Georgia,serif;font-size:.99rem;
  line-height:1.66;color:var(--f-dim)}

/* ── the empty state ── the guide starts at nothing and says so ── */
.fempty{
  --f-ink:#0A0709; --f-panel:#100C0E; --f-paper:#EFE3D2; --f-dim:#C3B39F;
  --f-faint:#8A7A6A; --f-brass:#C9A25A; --f-lit:#E3C88B; --f-rule:rgba(201,162,90,.24);
  grid-column:1/-1;display:grid;gap:10px;justify-items:start;
  background:var(--f-panel);border:1px solid var(--f-rule);
  padding:clamp(26px,3.4vw,48px) clamp(22px,3vw,44px);
}
.fempty__k{margin:0;font:400 10px/1 'Courier Prime',monospace;letter-spacing:.22em;
  text-transform:uppercase;color:var(--f-brass)}
.fempty__t{margin:0;font-family:Prata,Georgia,serif;font-weight:400;
  font-size:clamp(1.3rem,2.3vw,1.95rem);line-height:1.16;color:var(--f-lit);max-width:22ch}
.fempty__b{margin:0;font-family:'EB Garamond',Georgia,serif;font-size:1.03rem;line-height:1.72;
  color:var(--f-dim);max-width:62ch}
.fempty__act{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;margin:8px 0 0}
.fempty__cta{
  display:inline-flex;align-items:center;min-height:48px;padding:13px 26px;
  background:var(--f-brass);color:var(--f-ink);border:1px solid var(--f-brass);
  font:400 11px/1 'Courier Prime',monospace;letter-spacing:.18em;text-transform:uppercase;
  text-decoration:none;transition:background .2s,color .2s;
}
.fempty__cta:hover{background:transparent;color:var(--f-lit)}
.fempty__cta:focus-visible{outline:2px solid var(--f-lit);outline-offset:3px}
.fempty__to{font:400 10px/1.6 'Courier Prime',monospace;letter-spacing:.1em;color:var(--f-faint);word-break:break-all}


/* ══ PROJECTS ══════════════════════════════════════════════════════════════
   The working archive: a hero with the count, a filter bar over category and
   place, two featured records at full width and the rest as a grid. A record
   with no photograph drops the frame instead of reserving an empty one. */
.pj-hero{padding:clamp(30px,4vw,64px) 0 clamp(22px,2.6vw,38px)}
.pj-hero__grid{display:grid;gap:clamp(24px,3vw,52px);align-items:end;
  grid-template-columns:minmax(0,1.4fr) minmax(0,.6fr)}
@media (max-width:900px){.pj-hero__grid{grid-template-columns:1fr}}
.pj-hero__h{font-family:var(--display);font-weight:400;color:var(--brass-lit);
  font-size:clamp(2.1rem,4.4vw,3.4rem);line-height:1.04;letter-spacing:-.01em;
  margin:12px 0 16px;max-width:18ch;text-wrap:balance}
.pj-hero__lede{font-family:var(--body);font-size:clamp(1rem,1.2vw,1.14rem);line-height:1.72;
  color:var(--dim);max-width:60ch;margin:0;text-wrap:pretty}
.pj-hero__stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:0}
.pj-hero__stats dt{font:400 10px/1.6 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--faint)}
.pj-hero__stats dd{margin:4px 0 0;font-family:var(--display);font-size:clamp(1.5rem,2.4vw,2.1rem);
  line-height:1;color:var(--brass-lit)}

/* ── the filter bar ── */
.pj-bar{background:var(--ink-2);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
/* padding-block, not the shorthand: this element is also .s-shell and the
   shorthand was resetting the shell's own gutter to zero. */
.pj-bar__in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:12px clamp(14px,2vw,26px);padding-block:clamp(12px,1.4vw,18px)}
.pj-bar__set{display:flex;flex-wrap:wrap;gap:8px;min-width:0;flex:1 1 auto;
  overflow-x:auto;scrollbar-width:none}
.pj-bar__set::-webkit-scrollbar{display:none}
.pj-chip{display:inline-flex;align-items:center;gap:8px;min-height:44px;flex:0 0 auto;
  background:transparent;border:1px solid var(--rule-2);color:var(--dim);cursor:pointer;
  font:400 11px/1 var(--mono);letter-spacing:.13em;text-transform:uppercase;padding:11px 15px;
  transition:background .18s,border-color .18s,color .18s}
.pj-chip__n{font-size:10px;color:var(--faint)}
.pj-chip:hover{border-color:var(--brass);color:var(--paper)}
.pj-chip[aria-pressed="true"]{background:var(--brass);border-color:var(--brass);color:var(--ink)}
.pj-chip[aria-pressed="true"] .pj-chip__n{color:rgba(10,7,9,.7)}
.pj-chip:focus-visible{outline:2px solid var(--brass-lit);outline-offset:2px}
.pj-bar__place{display:inline-flex;align-items:center;gap:10px;
  font:400 10px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--faint)}
.pj-bar__place select{min-height:44px;background:transparent;color:var(--paper);
  border:1px solid var(--rule-2);padding:10px 12px;font:400 11px/1 var(--mono);letter-spacing:.1em}
.pj-bar__place select option{background:var(--ink-2);color:var(--paper)}

/* ── the records ── */
.pj-sec{padding-block:clamp(26px,3vw,46px)}
.pj-feature{display:grid;gap:clamp(16px,2vw,28px);grid-template-columns:repeat(2,1fr)}
@media (max-width:900px){.pj-feature{grid-template-columns:1fr}}
.pj-grid{display:grid;gap:clamp(16px,2vw,26px);grid-template-columns:repeat(3,1fr)}
@media (max-width:1000px){.pj-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.pj-grid{grid-template-columns:1fr}}
.pj-card{display:flex;flex-direction:column;gap:10px;background:var(--ink-2);
  border:1px solid var(--rule);padding:0 0 clamp(18px,2vw,24px);color:var(--paper);
  transition:border-color .25s ease,background .25s ease}
.pj-card:hover{border-color:var(--rule-2);background:rgba(110,39,51,.24)}
.pj-card:focus-visible{outline:2px solid var(--brass-lit);outline-offset:3px}
.pj-card__frame{position:relative;display:block;margin-bottom:4px}
.pj-card__frame img{display:block;width:100%;height:clamp(170px,15vw,220px);object-fit:cover;
  filter:saturate(.84) contrast(1.02)}
.pj-card--big .pj-card__frame img{height:clamp(220px,22vw,330px)}
.pj-card__shot{position:absolute;left:0;bottom:0;padding:7px 11px;background:rgba(10,7,9,.78);
  font:400 9px/1.5 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.pj-card.is-textonly{padding-top:clamp(18px,2vw,24px)}
.pj-card__meta,.pj-card__name,.pj-card__blurb,.pj-card__cta{padding-inline:clamp(16px,1.8vw,22px)}
.pj-card__meta{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:baseline}
.pj-card__cat{font:400 10px/1.5 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--brass)}
.pj-card__status{font:400 10px/1.5 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
.pj-card__name{font-family:var(--display);font-weight:400;font-size:clamp(1.15rem,1.8vw,1.55rem);
  line-height:1.16;color:var(--paper)}
.pj-card--big .pj-card__name{font-size:clamp(1.4rem,2.4vw,2rem);color:var(--brass-lit)}
.pj-card__blurb{font-family:var(--body);font-size:1rem;line-height:1.68;color:var(--dim);max-width:52ch}
.pj-card__cta{margin-top:auto;padding-top:6px;font:400 10px/1.6 var(--mono);
  letter-spacing:.2em;text-transform:uppercase;color:var(--brass)}
.pj-card:hover .pj-card__cta{color:var(--brass-lit)}

.pj-none{font-family:var(--body);font-size:1.04rem;line-height:1.72;color:var(--dim);max-width:64ch}

/* ── the note ── */
.pj-note{display:grid;gap:8px;border-left:2px solid var(--brass);
  padding:clamp(18px,2.2vw,28px) clamp(20px,2.6vw,32px);
  background:linear-gradient(90deg,rgba(201,162,90,.07),transparent 65%)}
.pj-note__k{margin:0;font:400 10px/1 var(--mono);letter-spacing:.22em;text-transform:uppercase;color:var(--brass)}
.pj-note__t{margin:0;font-family:var(--display);font-size:clamp(1.2rem,2vw,1.65rem);
  line-height:1.2;color:var(--brass-lit)}
.pj-note__b{margin:0 0 6px;font-family:var(--body);font-size:1.02rem;line-height:1.7;color:var(--dim);max-width:66ch}


/* ── AN EMPTY PHOTOGRAPH SLOT COLLAPSES ──────────────────────────────────
   A named slot with nothing in it used to hold a 4:3 frame open, so a page
   with two unshot photographs showed two large empty rectangles. The slot
   still names the shot it wants, because that is how the photography gets
   commissioned, but it does it in one line instead of a hole in the page.
   A frame with an actual photograph in it is untouched. */
.s-frame:has(.s-plate > .s-slot:only-child){
  border:0;padding:0;background:none;box-shadow:none;
}
.s-frame:has(.s-plate > .s-slot:only-child) .s-plate{
  aspect-ratio:auto!important;min-height:0;background:none;
  border-left:2px solid var(--rule-2);padding:10px 0 10px 14px;display:block;
}
.s-frame:has(.s-plate > .s-slot:only-child) .s-slot{
  display:block;text-align:left;padding:0;color:#A2937F;
  font:400 9.5px/1.7 'Courier Prime',monospace;letter-spacing:.14em;text-transform:uppercase;
}
.s-frame:has(.s-plate > .s-slot:only-child) .s-slot::before{
  content:'Photograph to come · ';color:#E3C88B;
}
/* And the column it sits in stops reserving the height of a photograph. */
.s-frame:has(.s-plate > .s-slot:only-child){align-self:start}
*:has(> .s-frame:has(.s-plate > .s-slot:only-child)){align-content:start}


/* ══ THE MAP HUB ═══════════════════════════════════════════════════════════
   One introduction, one compact collection control, then the map at a height
   worth having. The control is part of the introduction: it is a map control,
   not a second navigation bar, so it is a single line of small type. */
.mapsel{
  --m-brass:#C9A25A; --m-lit:#E3C88B; --m-ink:#0A0709; --m-dim:#C3B39F; --m-faint:#8A7A6A;
  display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin-top:clamp(20px,2.4vw,30px);
  border-top:1px solid rgba(201,162,90,.2);padding-top:clamp(14px,1.6vw,20px);
}
.mapsel__lab{font:400 9px/1 'Courier Prime',monospace;letter-spacing:.2em;
  text-transform:uppercase;color:var(--m-faint)}
.mapsel__btn{
  display:inline-flex;align-items:center;min-height:38px;padding:9px 15px;
  border:1px solid rgba(201,162,90,.4);color:var(--m-dim);text-decoration:none;
  font:400 10px/1 'Courier Prime',monospace;letter-spacing:.16em;text-transform:uppercase;
  transition:background .18s,color .18s,border-color .18s;
}
.mapsel__btn:hover{border-color:var(--m-brass);color:#EFE3D2}
.mapsel__btn[aria-current="page"]{background:var(--m-brass);border-color:var(--m-brass);color:var(--m-ink)}
.mapsel__btn:focus-visible{outline:2px solid var(--m-lit);outline-offset:2px}
.mapsel__end{display:flex;flex-wrap:wrap;gap:8px 16px;margin-left:auto}
.mapsel__link{font:400 9px/1 'Courier Prime',monospace;letter-spacing:.16em;
  text-transform:uppercase;color:var(--m-faint);text-decoration:none;min-height:38px;
  display:inline-flex;align-items:center}
.mapsel__link:hover{color:var(--m-lit)}

/* The map itself. 70vh on a desktop, never a strip, and never taller than the
   screen it has to sit in. */
.map-header--slim{
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding:clamp(12px,1.4vw,18px) clamp(18px,3vw,52px)!important;
}
.map-frame{position:relative;width:100%;overflow:hidden;
  height:clamp(520px,70vh,860px)}
.map-frame > iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
@media (max-width:900px){
  /* A phone has less height to give, but the map still has to be a map. */
  .map-frame{height:clamp(460px,72vh,700px)}
}


/* ══ THE R42 SERVICE PAGES, ON THE DARK GROUND ═════════════════════════════
   Seven pages share one R42 layout: a .ehero band, then a .ebody article with
   a contents rail. They were drawn for a cream ground, with #4b453d body type
   and cream hero type, and the bridge gives them the dark ground the rest of
   the site uses. Left alone that is unreadable in both directions at once,
   which is exactly what the Treasure Requests screenshot showed.

   The ground stays dark and the type moves. These rules are here, in the
   system, rather than repeated in seven page treatments, because it is one
   layout and it should have one answer. Every value below was chosen against
   a11y.mjs rather than by eye. */
.ehero{background:#0A0709;color:#EFE3D2;padding:clamp(30px,3.6vw,58px) 0 clamp(24px,2.8vw,42px)}
.ehero::after{display:none}
.ehero h1,.ehero h2{color:#E3C88B;font-family:var(--display);letter-spacing:-.01em}
.ehero p{color:#C3B39F;font-family:var(--body)}
.ehero .eyebrow{color:var(--brass);font-family:var(--mono)}
/* A .ehero that follows the system's own service hero is an introduction to
   the article, not a second hero: it loses the display size and takes a rule. */
.s-hero + * .ehero,.s-svc ~ .ehero{border-top:1px solid var(--rule)}
.s-svc ~ .ehero h2{font-size:clamp(1.5rem,2.6vw,2.1rem)}

.epage{background:#0A0709}
.ebody{max-width:1180px}
.ebody p,.ebody li,.ebody dd{color:var(--dim)}
.ebody h2{color:var(--brass-lit);font-family:var(--display)}
.ebody h3{color:var(--paper);font-family:var(--display)}
.ebody a:not([class]){color:var(--brass-lit);text-decoration-color:var(--rule-2)}
.ebody a:not([class]):hover{color:var(--brass)}
.ebody .eyebrow,.ebody .kick{color:var(--brass)}
.ebody strong,.ebody b{color:var(--paper)}
.ebody [style*="fff5e5"],.ebody [style*="FFF5E5"],.ebody [style*="rgba(255,245,229"]{color:var(--dim)!important}
.ebody blockquote,.ebody .note,.ebody .pull{color:var(--dim);border-left-color:var(--brass)}
.ebody .opt,.ebody .hint{color:#A2937F}

/* R42 drew several small panels on cream. Two behaviours, chosen per panel:
   the terms table and the form fieldset become dark panels, and the numbered
   step grids stay cream and keep dark type, because they read as printed
   cards and the cream is doing work there. */
.ebody .terms,.ebody .evf fieldset{background:var(--ink-2);border-color:var(--rule)}
.ebody .terms div{border-bottom-color:rgba(201,162,90,.16)}
.ebody .terms dt{color:var(--dim)}
.ebody .terms dd{color:var(--brass-lit);font-family:var(--display)}
.ebody .terms dd.words{color:var(--dim);font-family:var(--body);font-weight:400}
.ebody .sched div,.ebody .steps div{background:#EFE3D2}
.ebody .sched dt,.ebody .steps dt{color:var(--oxblood)}
.ebody .sched dd,.ebody .steps dd{color:#241A20;font-family:var(--body)}
/* A link inside one of those cream cards takes the cream-card link colour,
   not the dark article's. Measured at 1.29:1 before this. */
.ebody .sched a,.ebody .steps a{color:#6E2733!important;text-decoration-color:rgba(110,39,51,.4)!important}
.ebody .sched a:hover,.ebody .steps a:hover{color:#8E2A34!important}

.ebody .evf{max-width:none}
.ebody .evf legend{color:var(--brass);font-family:var(--mono)}
.ebody .evf .kind{background:transparent;border-color:rgba(201,162,90,.26)}
.ebody .evf .kind:hover{border-color:var(--brass)}
.ebody .evf .kind b{color:var(--paper);font-family:var(--body)}
.ebody .evf .kind span{color:var(--faint);font-family:var(--body);letter-spacing:0;text-transform:none;font-size:.9rem}
.ebody .evf .kind input{accent-color:var(--brass)}
.ebody .evf .kind:has(input:checked){background:rgba(201,162,90,.1);border-color:var(--brass)}
.ebody input,.ebody select,.ebody textarea{
  background:transparent;color:#F2E7D6;border-color:var(--rule-2);min-height:46px}
.ebody label{color:var(--dim)}
.ebody input::placeholder,.ebody textarea::placeholder{color:var(--faint)}

/* THE CONTENTS RAIL IS A LIFTED DARK PANEL, AND SAYS SO IN LITERAL COLOUR.
   It used to take its ground from var(--paper), which meant one thing under
   the bridge and the opposite once these pages started reading the system's
   tokens; the panel turned cream under cream type at 1.29:1. A component
   whose ground must not follow the page states its ground. */
.ebody .lf-toc,.ebody .ctoc,.ebody .toc{
  background:#100C0E;border:1px solid rgba(201,162,90,.2);
}
.ebody .lf-toc a,.ebody .ctoc a,.ebody .toc a{color:#C3B39F}
.ebody .lf-toc a:hover,.ebody .ctoc a:hover,.ebody .toc a:hover{
  color:#E3C88B;background:rgba(201,162,90,.12)}
.ebody .lf-toc a[aria-current="true"],.ebody .ctoc a[aria-current="true"],
.ebody .toc a[aria-current="true"],.ebody .toc .is-current{
  color:#E3C88B;background:rgba(201,162,90,.14);border-left-color:#C9A25A}
.ebody .toc-h,.ebody .lf-toc-h,.ebody .ctoc-h{color:#C9A25A}
.ebody .toc .num,.ebody .lf-toc .num{color:#8A7A6A}

/* THE CONTENTS RAIL STAYS WITH THE READER.
   It was a small box floating beside two thousand words. On a desktop it is
   sticky, it sits clear of the header, and it never grows past the screen. */
@media (min-width:1001px){
  .ebody .lf-wrap{grid-template-columns:minmax(220px,268px) minmax(0,1fr);gap:clamp(28px,4vw,64px)}
  .ebody .lf-toc,.ebody .ctoc{position:sticky;top:calc(78px + 18px);
    max-height:calc(100vh - 78px - 40px);overflow-y:auto}
}


/* ══ SELLING: THE APPROVED COMPOSITION ═════════════════════════════════════
   From "Selling - Consignment and Sell to Us.dc.html". The split
   introduction and the crossing between the two journeys are components of
   the system now, because Sell to Us takes the same pair. */
.chero--split,.cxo{
  --c-ink:#0A0709; --c-panel:#100C0E; --c-paper:#EFE3D2; --c-dim:#C3B39F;
  --c-faint:#8A7A6A; --c-brass:#C9A25A; --c-lit:#E3C88B; --c-ox:#6E2733;
  --c-rule:rgba(201,162,90,.24);
}
.chero--split{background:var(--c-ink);padding-block:clamp(30px,4vw,72px)}
.chero__grid{display:grid;gap:clamp(26px,3.6vw,58px);align-items:center;
  grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr)}
@media (max-width:940px){.chero__grid{grid-template-columns:1fr}}
.chero__copy .eyebrow{font:400 11px/1 Prata,Georgia,serif;letter-spacing:.34em;
  text-transform:uppercase;color:var(--c-brass);display:block;margin-bottom:18px}
.chero__copy h1{font-family:Prata,Georgia,serif;font-weight:400;color:var(--c-lit);
  font-size:clamp(2rem,4.4vw,4.2rem);line-height:1;letter-spacing:-.02em;margin:0 0 20px}
.chero__copy p{font-size:clamp(1.06rem,1.3vw,1.31rem);line-height:1.6;color:var(--c-dim);
  max-width:52ch;margin:0}
.chero__shot{margin:0}
.chero__shot img{display:block;width:100%;height:clamp(260px,30vw,460px);object-fit:cover;
  border:1px solid var(--c-rule);filter:saturate(.86)}
.chero__shot figcaption{margin-top:10px;font:400 10px/1.7 'Courier Prime',monospace;
  letter-spacing:.14em;text-transform:uppercase;color:var(--c-faint)}

/* ── the crossing ── */
.cxo{padding-block:clamp(34px,4.4vw,72px);border-top:1px solid var(--c-rule)}
.cxo__k{margin:0 0 6px;font:400 10px/1 'Courier Prime',monospace;letter-spacing:.22em;
  text-transform:uppercase;color:var(--c-brass)}
.cxo__h{margin:0 0 clamp(20px,2.4vw,32px);font-family:Prata,Georgia,serif;font-weight:400;
  font-size:clamp(1.5rem,2.8vw,2.3rem);line-height:1.14;color:var(--c-lit)}
.cxo__set{display:grid;gap:clamp(16px,2vw,26px);grid-template-columns:repeat(2,1fr)}
@media (max-width:760px){.cxo__set{grid-template-columns:1fr}}
.cxo__card{background:var(--c-panel);border:1px solid var(--c-rule);
  padding:clamp(20px,2.6vw,34px);display:grid;gap:10px;align-content:start}
.cxo__card.is-here{border-left:2px solid var(--c-brass)}
.cxo__cat{margin:0;font:400 10px/1 'Courier Prime',monospace;letter-spacing:.2em;
  text-transform:uppercase;color:var(--c-faint)}
.cxo__card.is-here .cxo__cat{color:var(--c-brass)}
.cxo__card h3{margin:0;font-family:Prata,Georgia,serif;font-weight:400;
  font-size:clamp(1.2rem,2vw,1.6rem);color:var(--c-paper)}
.cxo__card p{margin:0;font-family:'EB Garamond',Georgia,serif;font-size:1.02rem;
  line-height:1.7;color:var(--c-dim);max-width:52ch}
.cxo__go{margin-top:6px!important}
.cxo__go a{display:inline-flex;align-items:center;min-height:46px;padding:12px 24px;
  background:var(--c-brass);color:var(--c-ink);border:1px solid var(--c-brass);
  font:400 11px/1 'Courier Prime',monospace;letter-spacing:.18em;text-transform:uppercase;
  text-decoration:none}
.cxo__go a:hover{background:transparent;color:var(--c-lit)}


/* ══ GROUNDS AND THEIR INK ═════════════════════════════════════════════════
   A surface names its ground with data-ground, written into the markup by
   build/grounds.mjs from a table measured once in a browser and aggregated by
   CLASS. These tokens then resolve from the NEAREST ancestor that carries a
   ground, which is how a cream card and a dark card under the same class name
   end up with different, correct type without a script running after first
   paint. Six grounds, because the palette has six surfaces. */
:root{
  --on-heading:#E3C88B; --on-text:#C3B39F; --on-muted:#8A7A6A;
  --on-strong:#EFE3D2;  --on-link:#E3C88B; --on-link-hover:#C9A25A;
  --on-tag:#E3C88B;     --on-tag-bg:rgba(201,162,90,.14);
  --on-rule:rgba(201,162,90,.22);
}
[data-ground="ink"],[data-ground="dark"]{
  --on-heading:#E3C88B; --on-text:#C3B39F; --on-muted:#8A7A6A;
  --on-strong:#EFE3D2;  --on-link:#E3C88B; --on-link-hover:#C9A25A;
  --on-tag:#E3C88B;     --on-tag-bg:rgba(201,162,90,.14);
  --on-rule:rgba(201,162,90,.22);
}
[data-ground="cream"]{
  --on-heading:#6E2733; --on-text:#3E3038; --on-muted:#6B5A60;
  --on-strong:#241A20;  --on-link:#6E2733; --on-link-hover:#8E2A34;
  --on-tag:#6E2733;     --on-tag-bg:rgba(110,39,51,.1);
  --on-rule:rgba(36,26,32,.16);
}
[data-ground="light"]{
  --on-heading:#1B1013; --on-text:#241A20; --on-muted:#4A3F45;
  --on-strong:#0A0709;  --on-link:#1B1013; --on-link-hover:#3E3038;
  --on-tag:#1B1013;     --on-tag-bg:rgba(10,7,9,.1);
  --on-rule:rgba(10,7,9,.18);
}
[data-ground="oxblood"]{
  --on-heading:#F0E0BE; --on-text:#F0E0BE; --on-muted:#E4C9A2;
  --on-strong:#FFFFFF;  --on-link:#FFFFFF; --on-link-hover:#F0DDAE;
  --on-tag:#F0E0BE;     --on-tag-bg:rgba(255,255,255,.16);
  --on-rule:rgba(255,255,255,.28);
}
[data-ground="brass"]{
  --on-heading:#0A0709; --on-text:#0A0709; --on-muted:#241A20;
  --on-strong:#0A0709;  --on-link:#0A0709; --on-link-hover:#241A20;
  --on-tag:#0A0709;     --on-tag-bg:rgba(10,7,9,.12);
  --on-rule:rgba(10,7,9,.28);
}
[data-ground="purple"]{
  --on-heading:#FFFFFF; --on-text:#F4E9F4; --on-muted:#E2CFE3;
  --on-strong:#FFFFFF;  --on-link:#FFFFFF; --on-link-hover:#F0DDAE;
  --on-tag:#FFFFFF;     --on-tag-bg:rgba(255,255,255,.18);
  --on-rule:rgba(255,255,255,.3);
}
/* A surface also sets its own colour, so anything inside it that never
   declared one inherits the right ink. No !important: a component that states
   its colour still wins. */
[data-ground]{color:var(--on-text)}
/* The chrome is always the dark ground, whatever the page under it is, and it
   paints opaquely so a cream page cannot show through it. */
.s-head,.s-foot,.s-navm,.s-menu{
  --on-heading:#E3C88B;--on-text:#C3B39F;--on-muted:#8A7A6A;--on-strong:#EFE3D2;
  --on-link:#E3C88B;--on-tag-bg:rgba(201,162,90,.14);--on-tag:#E3C88B;
  --on-rule:rgba(201,162,90,.22);
}
.s-foot{background:#060405}

/* ══ THE STACKING SCALE ════════════════════════════════════════════════════
   Seven levels, named, all of them small. Leaflet numbers its own panes 400
   to 700 and its controls 1000, in whatever stacking context it finds itself
   in; where that was the root, a zoom control outranked the site header. The
   answer is not a larger number for the header but a context of its own for
   the map, so everything Leaflet does happens inside level 0. */
:root{
  --z-map:0;        /* the map application, and everything Leaflet puts in it */
  --z-sticky:40;    /* in-page sticky furniture: toolbars, collection bars    */
  --z-header:60;    /* the one global header                                  */
  --z-menu:70;      /* its dropdowns                                          */
  --z-navm:80;      /* the off-canvas mobile panel                            */
  --z-drawer:90;    /* the bag, the product panel                             */
  --z-modal:100;    /* dialogs, and the skip link that must clear them        */
}
/* isolation:isolate makes a stacking context without touching position, which
   matters: #map is absolutely positioned into its frame and must stay so. */
#map,.leaflet-container,.map-frame,.mapwrap{isolation:isolate}
.map-frame,.mapwrap{position:relative;z-index:var(--z-map)}
.s-head{z-index:var(--z-header)}
.s-menu{z-index:var(--z-menu)}
.s-navm{z-index:var(--z-navm)}
.s-drawer,.pane,.s-bag{z-index:var(--z-drawer)}
.s-skip{z-index:var(--z-modal)}
.map-toolbar,.s-locbar,.mapsel{z-index:var(--z-sticky)}

/* ══ THE MAP POPUP ═════════════════════════════════════════════════════════
   Three parts. The head never scrolls, so the shop's name and its category
   are readable at any zoom and at any description length. The description
   scrolls inside its own bounded region. The address and the links sit under
   it and stay visible. Leaflet's own maxHeight is not used: it bounds the
   whole popup, which is what scrolled the title away. */
.leaflet-popup-content{margin:0!important;width:auto!important}
.leaflet-popup-content-wrapper{
  padding:0!important;overflow:hidden;border-radius:2px!important;
  background:#100C0E!important;color:#EFE3D2!important;
  border:1px solid rgba(201,162,90,.35);box-shadow:0 18px 44px rgba(0,0,0,.55)!important;
}
.leaflet-popup-tip{background:#100C0E!important;border:1px solid rgba(201,162,90,.35)}
.pop{display:grid;grid-template-rows:auto minmax(0,1fr) auto;max-height:min(52vh,380px)}
.pop-head{position:sticky;top:0;z-index:2;padding:14px 40px 10px 16px;
  background:#100C0E;border-bottom:1px solid rgba(201,162,90,.22)}
.pop-head h3{margin:0 0 4px;font-family:var(--display);font-weight:400;font-size:1.06rem;
  line-height:1.24;color:#E3C88B}
.pop-head h3:focus-visible{outline:2px solid #C9A25A;outline-offset:2px}
.pop-meta{margin:0;font:400 9px/1.6 var(--mono);letter-spacing:.14em;
  text-transform:uppercase;color:#8A7A6A}
.pop-scroll{overflow-y:auto;overscroll-behavior:contain;max-height:min(30vh,190px);
  padding:10px 16px;scrollbar-width:thin;scrollbar-color:rgba(201,162,90,.5) transparent}
.pop-scroll:empty{display:none}
.pop-scroll:focus-visible{outline:2px solid #C9A25A;outline-offset:-2px}
.pop-scroll::-webkit-scrollbar{width:3px}
.pop-scroll::-webkit-scrollbar-thumb{background:rgba(201,162,90,.5)}
.pop-desc{font-family:var(--body);font-size:.95rem;line-height:1.62;color:#C3B39F;margin:0}
.pop-foot{padding:10px 16px 14px;border-top:1px solid rgba(201,162,90,.16);background:#100C0E}
.pop-addr{font-family:var(--body);font-size:.9rem;line-height:1.5;color:#C3B39F}
.pop-links{display:flex;flex-wrap:wrap;gap:8px 14px;margin-top:8px}
.pop-links a{font:400 9.5px/1.6 var(--mono);letter-spacing:.12em;text-transform:uppercase;
  color:#E3C88B;text-decoration:none;min-height:32px;display:inline-flex;align-items:center}
.pop-links a:hover{color:#C9A25A;text-decoration:underline}
.leaflet-container a.leaflet-popup-close-button{
  color:#C3B39F!important;padding:10px 12px 0 0!important;font-size:20px!important;z-index:3}
.leaflet-container a.leaflet-popup-close-button:hover{color:#E3C88B!important}
.leaflet-control-attribution{background:rgba(255,255,255,.86)!important;color:#3E3038!important}
.leaflet-control-attribution a{color:#0B4A8F!important;text-decoration:underline}
@media (max-width:640px){
  .pop{max-height:min(58vh,340px)}
  .pop-scroll{max-height:min(26vh,150px)}
}

/* ══ THREE SMALL RULES ═════════════════════════════════════════════════════ */
/* A statistics row counts its own cells, so removing a figure rebalances the
   block instead of leaving a hole where the fourth used to be. */
.s-stats:has(> :nth-child(3):last-child){grid-template-columns:repeat(3,1fr)}
.s-stats:has(> :nth-child(5):last-child){grid-template-columns:repeat(5,1fr)}
.s-stats:has(> :first-child:last-child){grid-template-columns:1fr}
@media (max-width:900px){
  .s-stats:has(> :nth-child(3):last-child),
  .s-stats:has(> :nth-child(5):last-child){grid-template-columns:repeat(2,1fr)}
  .s-stats:has(> :nth-child(3):last-child) > :last-child,
  .s-stats:has(> :nth-child(5):last-child) > :last-child{grid-column:1/-1}
}
@media (max-width:560px){
  .s-stats:has(> :nth-child(3):last-child),
  .s-stats:has(> :nth-child(5):last-child){grid-template-columns:1fr}
}
/* An anchored section clears the sticky header. */
#get-listed,#featured-placement,#founder,#homecoming,#press-contact,
[data-toc-section][id],.s-anchor{scroll-margin-top:calc(78px + 18px)}
/* An empty photograph slot collapses to the line that names the shot. */
.s-frame:has(.s-plate > .s-slot:only-child){border:0;padding:0;background:none;box-shadow:none;align-self:start}
.s-frame:has(.s-plate > .s-slot:only-child) .s-plate{
  aspect-ratio:auto!important;min-height:0;background:none;
  border-left:2px solid var(--rule-2);padding:10px 0 10px 14px;display:block}
.s-frame:has(.s-plate > .s-slot:only-child) .s-slot{
  display:block;text-align:left;padding:0;color:#A2937F;
  font:400 9.5px/1.7 'Courier Prime',monospace;letter-spacing:.14em;text-transform:uppercase}
.s-frame:has(.s-plate > .s-slot:only-child) .s-slot::before{
  content:'Photograph to come · ';color:#E3C88B}


/* ── navigation: the label navigates, the arrow opens ─────────────────
   Written by build/nav-split.mjs. The two controls are one visual item with
   two focus rings, and the arrow is deliberately more prominent than the old
   inline caret was: it is a control now, not a decoration. */
.s-nav__item--split{display:flex;align-items:stretch;gap:0}
.s-nav__top--link{display:inline-flex;align-items:center;padding-right:4px}
.s-nav__arrow{
  appearance:none;-webkit-appearance:none;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  min-width:30px;min-height:30px;padding:0 4px;margin-left:2px;
  background:transparent;border:1px solid transparent;border-radius:3px;
  color:inherit;font:inherit;line-height:1;
}
.s-nav__arrow .s-nav__caret{font-size:.72rem;transition:transform .16s ease}
.s-nav__arrow:hover{border-color:var(--on-rule,rgba(201,162,90,.4));background:rgba(201,162,90,.1)}
.s-nav__arrow[aria-expanded="true"]{background:rgba(201,162,90,.18);border-color:var(--on-link,#E3C88B)}
.s-nav__arrow[aria-expanded="true"] .s-nav__caret{transform:rotate(180deg)}
.s-nav__arrow:focus-visible,.s-nav__top--link:focus-visible{
  outline:2px solid var(--on-link,#E3C88B);outline-offset:2px}
.s-nav__top--link[aria-current="page"]{text-decoration:underline;text-underline-offset:4px}
@media (prefers-reduced-motion:reduce){.s-nav__arrow .s-nav__caret{transition:none}}

/* MOBILE: a row of two targets, both clearing 44px. */
.s-navm__row{display:flex;align-items:stretch;gap:6px}
.s-navm__top--link{flex:1 1 auto;display:flex;align-items:center;min-height:44px}
.s-navm__arrow{
  appearance:none;-webkit-appearance:none;cursor:pointer;
  flex:0 0 auto;min-width:44px;min-height:44px;
  display:inline-flex;align-items:center;justify-content:center;
  background:transparent;color:inherit;font:inherit;
  border:1px solid var(--on-rule,rgba(201,162,90,.28));border-radius:3px;
}
.s-navm__arrow .s-nav__caret{transition:transform .16s ease}
.s-navm__arrow[aria-expanded="true"]{background:rgba(201,162,90,.16)}
.s-navm__arrow[aria-expanded="true"] .s-nav__caret{transform:rotate(180deg)}
.s-navm__arrow:focus-visible{outline:2px solid var(--on-link,#E3C88B);outline-offset:2px}
.s-navm__link--overview{font-weight:600}
/* The Projects hero carries one call to action. It is a control, not a card:
   "Partner With Us" was previously only reachable as one entry among nine. */
.pj-hero__cta{margin:clamp(18px,2.2vw,26px) 0 0}
/* /sell/ — the two buying collections. Both are repeatable records; the
   difference between a personal wish-list piece and something sourced for the
   floor is the whole reason they are two lists and not one. */
.sell-buy{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:clamp(20px,3vw,44px);margin-top:clamp(24px,3vw,40px)}
.sell-buy__h{font-family:var(--display,Prata),serif;font-weight:400;
  font-size:clamp(17px,1.7vw,21px);margin:0 0 8px}
.sell-buy__note{margin:0 0 14px;color:var(--muted,#8A7A6A);font-size:15px;max-width:46ch}
.sell-buy__list{margin:0;padding:0;list-style:none}
.sell-buy__list li{padding:9px 0;border-bottom:1px solid rgba(201,162,90,.18)}
.sell-buy__disclaimer{margin:clamp(24px,3vw,40px) 0 0;max-width:68ch;
  padding-top:clamp(18px,2.2vw,26px);border-top:1px solid rgba(201,162,90,.26);
  color:var(--muted,#8A7A6A)}
.sell-buy__after{margin:clamp(18px,2.2vw,26px) 0 0}

/* HOW WE MAKE AN OFFER, on /sell/. Oxblood, compact, one block: the caveats a
   person is owed before a cash offer is discussed. It replaced the second half
   of sell.buying.disclaimer rather than joining it, because two disclaimers
   saying the same thing is how both stop being read. */
.sell-offer{margin:26px 0 0;max-width:70ch;
  border:1px solid rgba(110,39,51,.55);
  background:linear-gradient(180deg,rgba(110,39,51,.32) 0%,rgba(110,39,51,.15) 100%);
  padding:clamp(16px,2vw,22px) clamp(18px,2.2vw,26px)}
.sell-offer__h{margin:0 0 8px;font-family:'Prata',Georgia,serif;
  font-size:clamp(15px,1.4vw,18px);line-height:1.25;color:#E3C88B}
.sell-offer__b{margin:0;font-size:.9rem;line-height:1.7;color:#D9C9B6}

/* ══ THE TYPOGRAPHY FLOOR ═══════════════════════════════════════════════════
   Owner directive, 18 September 2026: readability problems on laptop and
   iPhone. No visible text below 14px; body copy and guidance at 18px.

   Measured on /consign/ before this block: 79 visible elements under 14px,
   including an H2 rendering at 12px and an H3 at 12px. Headings smaller than
   body copy is not a style, it is a mistake that survived because nobody
   measured the computed size.

   This is a FLOOR, not a restyle. It raises what is too small and leaves
   everything already above it alone. Applied here, in the sheet every page
   loads, so no page can opt out by accident.                              */
.s-skip{font-size:14px}
.s-nav__top,.s-nav__top--link,.s-bag,.s-nav__caret{font-size:14px}
.s-navm a,.s-navm span{font-size:16px}
.sc-interp{font-size:16px}
/* HEADINGS: A FLOOR, NEVER A CAP. `h2{clamp(24px,2.6vw,38px)}` capped /press/'s
   54px headings at 37px and `h1{font-size:revert}` left the homepage h1 at
   12px, because revert goes back to the UA sheet and the page's own rule had
   already been beaten. Raise the small ones; leave the large ones alone. */
/* NOTHING GENERIC HERE. `max(34px,1em)` has the same flaw as max(1em,14px):
   1em in a font-size declaration is the PARENT's size, never the element's
   own, so both forms override whatever the page declared. CSS cannot say
   "raise this only if it is below X". Only named classes are raised, below,
   with absolute values, and only ones measured to be too small. */
/* the eyebrow and mono labels stay small-caps in feel but legible in fact */
.s-eyebrow,.s-label,.eyebrow,.cat-l,.meta,.chip,.pill,.crumb,.sub{font-size:14px;letter-spacing:.12em}
/* body copy and anything a visitor must read to act */
.s-lede{font-size:clamp(18px,1.5vw,21px)}
/* REMOVED: the last surviving conditional floor. Same flaw as the two above
   it — 1em is the PARENT's size, so max(1em,16px) caps every child that
   sets something larger by class. It was still in the tree after I said
   the regression was fixed. Named classes only, absolute values only. */
.scp0,.scp1{font-size:16px}

/* ══ THE FLOOR, ON NAMED CLASSES, IN THE SHEET EVERY PAGE LOADS ════════════
   sfv-forms.css only reaches the 11 pages that link it. These are the classes
   measured below 14px across the site — micro-labels, nav items, footer meta,
   tile kickers, captions. Absolute values: a floor raises, it never caps, and
   nothing here can touch an element that already sets something larger. */
.s-eyebrow,.eyebrow,.s-label,.cat-l,.meta,.chip,.pill,.crumb,.sub,
.s-menu__note,.s-facts dt,.s-tile__note,.s-tile__kicker,.s-stat__l,.s-fig__cap,
.s-foot__meta,.s-foot__head,.s-announce__msg,.s-btn--ghost,.s-burger,
.s-nav__caret,.s-navm__arrow,.s-nav__arrow,.s-nav__top,.s-bag,.s-skip,.sc-interp,.rec__k,.fb-role,.fb-caption,
.press-headline,.pc-val,.ab-shot b,.fh-tab{font-size:14px}
.s-btn--lg,.s-btn{font-size:16px}

/* ── THE HEADER COLLIDES AT 1440 AND HAS ON EVERY PAGE ─────────────────────
   "Contact" and "Bag (0)" overlap by 3px at 1440 — measured on /, /press/,
   /consign/ and /angels-camp/, including pages that do not load the shared
   form sheet, so this predates tonight's typography work. Three separate
   review lanes reported it independently, which is what it takes to be sure a
   defect is in the shared chrome and not in one page.

   The nav row is `flex:0 1 auto` with no guaranteed separation from the bag
   control, so at the one width where the links are widest they run under it.
   A real gap and permission to shrink the link row, rather than nudging a
   magic number that will drift at the next label change. */
/* MEASURED, NOT GUESSED. My first attempt added a margin and changed nothing,
   because the collision is not a missing gap between two boxes. Reading the
   rendered DOM: .s-nav is flex:0 1 auto and IS shrinking — its box ends at
   x=1226 — but its children keep their natural width, so the "Contact" link
   runs to x=1283, past its own container, and .s-bag begins at 1280. The
   overflow is inside the nav, not between the nav and the bag.
   So the row is given enough space to fit instead: the inter-item gap and the
   header's own gap both come down at the width where it is tight. */
.s-head__in{gap:clamp(16px,1.6vw,24px)}
.s-nav{gap:clamp(10px,1.1vw,16px)}
.s-head__end{flex:0 0 auto}
.s-bag{flex:0 0 auto}

/* the ▾ glyph was 11.52px on every page — a relative size inside the arrow
   button. The floor has to name it absolutely, like everything else here. */
/* 0-2-0 BEATS 0-1-0, AND THIS IS THE THIRD TIME TONIGHT.
   `.s-nav__arrow .s-nav__caret{font-size:.72rem}` out-specifies a bare
   `.s-nav__caret`, so the floor lost the cascade and the glyph stayed
   11.52px on every page. Matched at the same specificity instead. */
.s-nav__arrow .s-nav__caret,.s-navm__arrow .s-nav__caret,.s-nav__item .s-nav__caret{font-size:14px}

/* ── THE EYEBROW FLOOR HAS TO OUTRANK THE PAGES ────────────────────────────
   `.eyebrow{font-size:14px}` above is 0-1-0 and seven pages carry an inline
   `@media (max-width:900px) .eyebrow{font-size:.6rem}` — same specificity,
   later in the cascade, so the page wins and the eyebrow renders 9.6px at 768.
   It was masked on the eleven pages that load sfv-forms.css, because that
   sheet used to restate .eyebrow with !important; it was never fixed on the
   other pages. Removing the duplicate from the form sheet exposed it here,
   which is where it belonged.

   !important is safe on this one by measurement, not assumption: every
   .eyebrow size declared anywhere in the tree is .58rem-.65rem, and the only
   14px is this floor. There is nothing for it to cap. */
.eyebrow,.s-eyebrow{font-size:14px!important}

/* THE 1341-1400 DEAD BAND, 2026-09-18. .s-nav collapses to the burger at max-width:1340px,
   but between 1341 and 1400 the desktop nav is still shown and does not fit: measured
   scrollWidth minus box width was 7px at 1380, 18px at 1366 and 38px at 1341, so header
   links there were unclickable. tnav1180 failed all five routes on it.
   The earlier attempt above (line ~1900) brought the gaps down and was not enough: 9 items
   carry 979px of content and the box is only 1059px at 1341.
   The remaining room is tracking. .2em on 12px uppercase across ~70 characters is roughly
   170px of pure letter-spacing; .16em inside this band alone recovers what is needed.
   Scoped to the band, so the nav is byte-identical at 1401 and above and the burger still
   takes over at 1340 and below. Raising the breakpoint instead would have handed every
   1366px laptop a hamburger, which is the most common laptop width there is. */
@media (min-width:1341px) and (max-width:1400px){
  .s-nav{gap:10px}
  .s-nav__top{letter-spacing:.16em;gap:5px}
}