/* ==========================================================================
   site-ux.css — the chrome layer
   --------------------------------------------------------------------------
   Load LAST, after siris.css, siris-v2.css and siris-light.css.

   Everything in here is site furniture rather than page design: the theme
   switch, the sticky header behaviour, the mobile drawer, the scroll
   progress bar, back-to-top, the search overlay, the floating enquiry
   button, the first-paint fade, and the print sheet.

   Nothing here invents a colour. The dark theme below is the same measured
   ramp already in siris-v2.css (the ink and paper scales); it is simply
   mapped onto
   the plaster token names so that every page written against the plaster
   system flips without a single page-level edit.
   ========================================================================== */

/* ==========================================================================
   1. DARK THEME
   The plaster tokens are redefined, not replaced. Any rule anywhere in the
   site that says var(--plaster-000) or var(--on-light-2) inverts for free.
   ========================================================================== */

html[data-theme="dark"] body.v2-light{
  --plaster-000:#12100c;
  --plaster-100:#181510;
  --plaster-200:#201c16;
  --plaster-300:#2e281f;

  --umber-900:#f2ede3;
  --umber-700:#e3dccd;
  --umber-500:#c8b182;
  --sienna:#c8a86e;
  --ochre:#b9a071;
  --chalk-ochre:#8a7549;

  --on-light-1:#f2ede3;
  --on-light-2:rgba(242,237,227,.72);
  --on-light-3:rgba(242,237,227,.50);
  --on-light-4:rgba(242,237,227,.18);

  /* A filled chip inverts with the theme so it always reads as a block
     against the page rather than dissolving into it. The wall tokens
     (--wall, --wall-ink) deliberately appear nowhere here: they are a place,
     not a role, and they are the same at midnight as at midday. */
  --chip-bg:#f2ede3;
  --chip-fg:#12100c;

  /* THE LEGACY TOKENS FROM siris.css.
     --text, --secondary and --border were fixed light-theme values
     (#111111, #666666, #e8e8e8) and were never remapped here, so anything
     that set colour with them turned black-on-black the moment the theme
     flipped. That is a whole-site fault, not a one-page one: every rule in
     siris.css that names them was affected, and it only became visible
     when a page used them for large text. They now follow the theme. */
  --text:      #f2ede3;
  --secondary: rgba(242,237,227,.62);
  --border:    rgba(242,237,227,.18);
  --bg:        #12100c;
}

html[data-theme="dark"] body.v2-light{ background:var(--plaster-000); color:var(--on-light-1); }
html[data-theme="dark"]{ background:#12100c; color-scheme:dark; }
html[data-theme="dark"] body.v2-light img:not([src$=".svg"]){ filter:brightness(.94); }

/* Places where a literal colour was written into a page instead of a token.
   These are the only hard-coded values the theme has to chase. */
html[data-theme="dark"] body.v2-light .band-dark{ background:#080705; }
html[data-theme="dark"] body.v2-light .plate,
html[data-theme="dark"] body.v2-light .print__plate,
html[data-theme="dark"] body.v2-light .ed-plate{
  box-shadow:0 22px 60px rgba(0,0,0,.6), 0 2px 6px rgba(0,0,0,.4);
}
html[data-theme="dark"] .site-nav{ background:#12100c; }
html[data-theme="dark"] .site-nav__mark,
html[data-theme="dark"] .site-nav__links a:hover,
html[data-theme="dark"] .site-nav__links a.active,
html[data-theme="dark"] .site-nav__toggle:hover{ color:#f2ede3; }
html[data-theme="dark"] .site-nav__links a,
html[data-theme="dark"] .site-nav__toggle{ color:rgba(242,237,227,.62); }
html[data-theme="dark"] .site-footer{ background:#181510; border-top-color:#2e281f; }
html[data-theme="dark"] .nm-logo{ filter:invert(1) brightness(1.7); }

/* The theme must not animate on the very first paint, only when switched. */
html.ux-theming body.v2-light,
html.ux-theming .site-nav,
html.ux-theming .site-footer{
  transition:background-color 320ms ease, color 320ms ease;
}


/* ==========================================================================
   2. STICKY HEADER
   .site-nav is already position:fixed in siris.css. What was missing was any
   sense that it is sitting ON something: no edge, no depth, and no reaction
   to the page moving underneath it.
   ========================================================================== */

.site-nav{
  transition:transform 380ms cubic-bezier(.4,0,.15,1),
             box-shadow 300ms ease,
             background-color 300ms ease,
             backdrop-filter 300ms ease;
  will-change:transform;
}
.site-nav.ux-stuck{
  box-shadow:0 1px 0 var(--on-light-4, rgba(26,23,14,.14)),
             0 10px 30px rgba(26,23,14,.08);
  background:color-mix(in srgb, var(--plaster-000, #f7f5f0) 88%, transparent);
  backdrop-filter:saturate(1.4) blur(12px);
  -webkit-backdrop-filter:saturate(1.4) blur(12px);
}
html[data-theme="dark"] .site-nav.ux-stuck{
  background:color-mix(in srgb, #12100c 88%, transparent);
  box-shadow:0 1px 0 rgba(242,237,227,.10), 0 10px 30px rgba(0,0,0,.5);
}
/* Out of the way when reading downward, back the instant you reach for it. */
.site-nav.ux-hidden{ transform:translateY(-102%); }
@media (prefers-reduced-motion:reduce){
  .site-nav{ transition:none; }
  .site-nav.ux-hidden{ transform:none; }
}


/* ==========================================================================
   3. NAV UTILITIES — search, theme, and the menu button
   ========================================================================== */

.site-nav__right{ display:flex; align-items:center; gap:18px; }

.ux-navbtn{
  appearance:none; background:none; border:0; padding:6px;
  display:inline-flex; align-items:center; justify-content:center;
  color:var(--on-light-3, #6b6257); cursor:pointer; border-radius:50%;
  transition:color 200ms ease, background-color 200ms ease, transform 200ms ease;
}
.ux-navbtn svg{ width:19px; height:19px; display:block; fill:none;
  stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.ux-navbtn:hover{ color:var(--umber-900, #111); background:var(--on-light-4, rgba(0,0,0,.07)); }
.ux-navbtn:active{ transform:scale(.92); }
.ux-navbtn:focus-visible{ outline:2px solid var(--sienna, #7d5e35); outline-offset:3px; }
.ux-navbtn .ux-icon-moon{ display:none; }
html[data-theme="dark"] .ux-navbtn .ux-icon-moon{ display:block; }
html[data-theme="dark"] .ux-navbtn .ux-icon-sun{ display:none; }


/* ==========================================================================
   4. MOBILE MENU
   The old version dropped the links into the header strip, which meant the
   menu was as tall as its contents and the page behind it kept scrolling.
   This is a proper panel: full height, its own backdrop, focus trapped,
   closes on Escape, on backdrop, and on choosing a destination.
   ========================================================================== */

.ux-scrim{
  position:fixed; inset:0; z-index:190;
  background:rgba(12,10,8,.5);
  backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
  opacity:0; pointer-events:none; transition:opacity 300ms ease;
}
.ux-scrim.on{ opacity:1; pointer-events:auto; }

.ux-drawer{
  position:fixed; top:0; right:0; bottom:0; z-index:200;
  width:min(84vw, 360px);
  background:var(--plaster-000, #f7f5f0);
  border-left:1px solid var(--on-light-4, rgba(26,23,14,.14));
  transform:translateX(100%);
  transition:transform 420ms cubic-bezier(.19,1,.22,1);
  display:flex; flex-direction:column;
  padding:20px clamp(22px,6vw,34px) 34px;
  overflow-y:auto; overscroll-behavior:contain;
}
.ux-drawer.on{ transform:none; }
.ux-drawer__head{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:28px; min-height:32px;
}
.ux-drawer__eyebrow{
  font-family:var(--font-sans,system-ui); font-size:10px; letter-spacing:.32em;
  text-transform:uppercase; color:var(--on-light-3,#6b6257); margin:0;
}
.ux-drawer nav{ display:flex; flex-direction:column; }
.ux-drawer nav a{
  font-family:var(--font-serif,Georgia,serif);
  font-size:26px; line-height:1.2; letter-spacing:.01em;
  color:var(--umber-900,#111); text-decoration:none;
  padding:15px 0; border-bottom:1px solid var(--on-light-4,rgba(26,23,14,.12));
  transition:color 200ms ease, padding-left 260ms cubic-bezier(.19,1,.22,1);
}
.ux-drawer nav a:hover,
.ux-drawer nav a:focus-visible{ color:var(--sienna,#7d5e35); padding-left:10px; }
.ux-drawer nav a[aria-current="page"]{ color:var(--sienna,#7d5e35); }
.ux-drawer__foot{ margin-top:auto; padding-top:32px; }
.ux-drawer__foot a{
  font-family:var(--font-sans,system-ui); font-size:13px; letter-spacing:.06em;
  color:var(--on-light-2,#4a443c); text-decoration:none; display:block; padding:5px 0;
}
.ux-drawer__foot a:hover{ color:var(--sienna,#7d5e35); }
body.ux-locked{ overflow:hidden; }

@media (prefers-reduced-motion:reduce){
  .ux-drawer, .ux-scrim{ transition:none; }
}


/* ==========================================================================
   5. SCROLL PROGRESS
   Hairline, gold, top edge. Sits above the nav so it reads as the page's
   own measure rather than a nav decoration.
   ========================================================================== */

.ux-progress{
  position:fixed; top:0; left:0; z-index:220;
  height:2px; width:100%;
  transform:scaleX(0); transform-origin:0 50%;
  background:linear-gradient(90deg, var(--sienna,#7d5e35), var(--gold,#9d8a5a));
  pointer-events:none;
}
html[data-theme="dark"] .ux-progress{
  background:linear-gradient(90deg,#9d8a5a,#c8b182);
}


/* ==========================================================================
   6. BACK TO TOP + FLOATING ENQUIRY
   One stack, bottom right, so they never argue over the same corner.
   ========================================================================== */

.ux-dock{
  position:fixed; right:clamp(16px,2.5vw,32px); bottom:clamp(16px,2.5vw,32px);
  z-index:180; display:flex; flex-direction:column; align-items:flex-end; gap:12px;
}

.ux-fab{
  display:inline-flex; align-items:center; gap:10px;
  height:50px; padding:0 20px; border-radius:26px; border:0;
  font-family:var(--font-sans,system-ui); font-size:13px;
  letter-spacing:.14em; text-transform:uppercase; white-space:nowrap;
  text-decoration:none; cursor:pointer;
  background:var(--umber-900,#1a170e); color:var(--plaster-000,#f5f1e8);
  box-shadow:0 8px 28px rgba(26,23,14,.28);
  transition:transform 260ms cubic-bezier(.19,1,.22,1),
             box-shadow 260ms ease, background-color 220ms ease, opacity 260ms ease;
}
.ux-fab svg{ width:17px; height:17px; fill:none; stroke:currentColor;
  stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; flex:none; }
.ux-fab:hover,
.ux-fab:focus-visible{
  transform:translateY(-3px);
  background:var(--sienna,#7d5e35);
  box-shadow:0 14px 36px rgba(26,23,14,.36);
}
.ux-fab:active{ transform:translateY(-1px); }
.ux-fab:focus-visible{ outline:2px solid var(--gold,#9d8a5a); outline-offset:3px; }
html[data-theme="dark"] .ux-fab{
  background:#c8b182; color:#12100c; box-shadow:0 8px 28px rgba(0,0,0,.55);
}
html[data-theme="dark"] .ux-fab:hover{ background:#e2cfa4; }

.ux-totop{
  width:46px; height:46px; padding:0; border-radius:50%;
  background:var(--plaster-000,#f5f1e8);
  color:var(--umber-900,#1a170e);
  border:1px solid var(--on-light-4,rgba(26,23,14,.18));
  box-shadow:0 6px 20px rgba(26,23,14,.16);
  opacity:0; pointer-events:none; transform:translateY(10px);
}
.ux-totop.on{ opacity:1; pointer-events:auto; transform:none; }
.ux-totop:hover,
.ux-totop:focus-visible{ background:var(--umber-900,#1a170e); color:var(--plaster-000,#f5f1e8); }
html[data-theme="dark"] .ux-totop{
  background:#201c16; color:#f2ede3; border-color:rgba(242,237,227,.2);
}
html[data-theme="dark"] .ux-totop:hover{ background:#c8b182; color:#12100c; }

/* On a short page the enquiry button is noise. JS adds .on past 40vh. */
.ux-fab--contact{ opacity:0; pointer-events:none; transform:translateY(10px); }
.ux-fab--contact.on{ opacity:1; pointer-events:auto; transform:none; }
@media (max-width:560px){
  .ux-fab--contact .ux-fab__label{ display:none; }
  .ux-fab--contact{ width:52px; padding:0; justify-content:center; border-radius:50%; height:52px; }
}


/* ==========================================================================
   7. SEARCH
   Full-site, client side, over a generated index. Opens on the search
   button, on / and on Cmd/Ctrl-K.
   ========================================================================== */

.ux-search{
  position:fixed; inset:0; z-index:240;
  display:flex; justify-content:center;
  padding:clamp(56px,12vh,140px) 20px 20px;
  background:color-mix(in srgb, var(--plaster-000,#f5f1e8) 82%, transparent);
  backdrop-filter:blur(16px) saturate(1.3);
  -webkit-backdrop-filter:blur(16px) saturate(1.3);
  opacity:0; pointer-events:none; transition:opacity 240ms ease;
}
.ux-search.on{ opacity:1; pointer-events:auto; }
html[data-theme="dark"] .ux-search{ background:color-mix(in srgb,#12100c 84%, transparent); }

.ux-search__panel{ width:min(720px,100%); display:flex; flex-direction:column; min-height:0; }
.ux-search__bar{
  display:flex; align-items:center; gap:14px;
  border-bottom:1px solid var(--on-light-1,#1a170e);
  padding-bottom:14px;
}
.ux-search__bar svg{ width:22px; height:22px; flex:none; fill:none;
  stroke:var(--on-light-3,#6b6257); stroke-width:1.5; stroke-linecap:round; }
.ux-search__input{
  flex:1 1 auto; appearance:none; background:none; border:0; outline:0;
  font-family:var(--font-serif,Georgia,serif);
  font-size:clamp(24px,3.4vw,38px); line-height:1.2;
  color:var(--umber-900,#1a170e);
}
.ux-search__input::placeholder{ color:var(--on-light-4,rgba(26,23,14,.35)); }
.ux-search__esc{
  font-family:var(--font-sans,system-ui); font-size:10px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--on-light-3,#6b6257);
  border:1px solid var(--on-light-4,rgba(26,23,14,.2)); border-radius:3px;
  padding:4px 8px; background:none; cursor:pointer; flex:none;
  transition:color 200ms ease, border-color 200ms ease;
}
.ux-search__esc:hover{ color:var(--umber-900,#1a170e); border-color:currentColor; }

.ux-search__meta{
  font-family:var(--font-sans,system-ui); font-size:11px; letter-spacing:.24em;
  text-transform:uppercase; color:var(--on-light-3,#6b6257);
  margin:18px 0 6px; min-height:14px;
}
.ux-search__results{
  list-style:none; margin:0; padding:0 0 40px;
  overflow-y:auto; overscroll-behavior:contain;
}
.ux-search__results li{ border-bottom:1px solid var(--on-light-4,rgba(26,23,14,.12)); }
.ux-search__results a{
  display:block; padding:16px 12px; text-decoration:none; color:inherit;
  transition:background-color 180ms ease, padding-left 220ms cubic-bezier(.19,1,.22,1);
}
.ux-search__results a:hover,
.ux-search__results a:focus-visible,
.ux-search__results li.is-cursor a{
  background:var(--plaster-200,#e6ddcb); padding-left:20px; outline:none;
}
.ux-res__kind{
  font-family:var(--font-sans,system-ui); font-size:10px; letter-spacing:.26em;
  text-transform:uppercase; color:var(--sienna,#7d5e35); margin:0 0 5px;
}
.ux-res__title{
  font-family:var(--font-serif,Georgia,serif); font-size:20px; line-height:1.3;
  color:var(--umber-900,#1a170e); margin:0;
}
.ux-res__snip{
  font-family:var(--font-longform,Georgia,serif); font-size:14px; line-height:1.6;
  color:var(--on-light-2,#4a443c); margin:5px 0 0;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.ux-res__snip mark{ background:none; color:var(--sienna,#7d5e35); font-weight:600; }
.ux-search__empty{
  font-family:var(--font-longform,Georgia,serif); font-style:italic;
  color:var(--on-light-2,#4a443c); padding:26px 0;
}


/* ==========================================================================
   8. SKIP LINK
   siris-light.css styles .v2-skip but several pages never had one. JS adds
   it where it is missing; this makes sure it looks the same everywhere.
   ========================================================================== */

.v2-skip, .ux-skip{
  position:absolute; left:12px; top:-60px; z-index:300;
  display:inline-block; padding:11px 18px;
  font-family:var(--font-sans,system-ui); font-size:13px; letter-spacing:.1em;
  background:var(--umber-900,#1a170e); color:var(--plaster-000,#f5f1e8);
  text-decoration:none; border-radius:0 0 3px 3px;
  transition:top 200ms cubic-bezier(.19,1,.22,1);
}
.v2-skip:focus, .ux-skip:focus{ top:0; outline:2px solid var(--gold,#9d8a5a); outline-offset:2px; }


/* ==========================================================================
   9. FIRST PAINT + LOADING
   A short, honest fade — the page is held for one frame, not faked with a
   spinner. Anything that takes real time (images, the search index) gets a
   shimmer instead.
   ========================================================================== */

html.ux-js body{ opacity:0; }
html.ux-js body.ux-ready{ opacity:1; transition:opacity 520ms ease; }
html.ux-js.ux-noanim body{ opacity:1 !important; transition:none !important; }

/* Bar under the header while something is actually loading. */
.ux-loadbar{
  position:fixed; top:0; left:0; right:0; height:2px; z-index:230;
  overflow:hidden; opacity:0; transition:opacity 220ms ease; pointer-events:none;
}
.ux-loadbar.on{ opacity:1; }
.ux-loadbar::after{
  content:""; position:absolute; inset:0; width:36%;
  background:linear-gradient(90deg,transparent,var(--gold,#9d8a5a),transparent);
  animation:uxSlide 1.1s ease-in-out infinite;
}
@keyframes uxSlide{ 0%{transform:translateX(-100%)} 100%{transform:translateX(320%)} }

/* Images fade up as they decode rather than snapping in half-drawn. */
img.ux-fade{ opacity:0; transition:opacity 700ms ease; }
img.ux-fade.ux-in{ opacity:1; }

.ux-shimmer{
  background:linear-gradient(100deg,
    var(--plaster-200,#e6ddcb) 30%,
    var(--plaster-100,#efe9dc) 50%,
    var(--plaster-200,#e6ddcb) 70%);
  background-size:220% 100%;
  animation:uxShimmer 1.4s linear infinite;
}
@keyframes uxShimmer{ 0%{background-position:120% 0} 100%{background-position:-120% 0} }

@media (prefers-reduced-motion:reduce){
  html.ux-js body{ opacity:1 !important; }
  .ux-loadbar::after, .ux-shimmer{ animation:none; }
  img.ux-fade{ opacity:1 !important; transition:none; }
}


/* ==========================================================================
   10. HOVER + FOCUS STATES
   Every interactive thing on the site now answers the pointer. Where a page
   already defines its own hover, this does not override it — these are the
   ones that had nothing.
   ========================================================================== */

button, [role="button"], .btn, input[type="submit"]{
  cursor:pointer;
  transition:color 200ms ease, background-color 200ms ease,
             border-color 200ms ease, transform 200ms ease, box-shadow 200ms ease;
}
button:active, [role="button"]:active{ transform:translateY(1px); }

.v2-cta{ transition:color 220ms ease, border-color 220ms ease, letter-spacing 300ms ease; }
.v2-cta:hover, .v2-cta:focus-visible{ letter-spacing:.02em; }

.ml-btn, .sf-subscribe{
  cursor:pointer;
  transition:color 200ms ease, border-color 200ms ease, background-color 200ms ease;
}
.ml-btn:hover, .sf-subscribe:hover,
.ml-btn:focus-visible, .sf-subscribe:focus-visible{
  color:var(--sienna,#7d5e35); border-color:var(--sienna,#7d5e35);
}

.ml-input, .sf-subinput{ transition:border-color 200ms ease, background-color 200ms ease; }
.ml-input:focus, .sf-subinput:focus{ border-color:var(--sienna,#7d5e35); }

.site-footer a, .site-nav__links a{ transition:color 180ms ease, opacity 180ms ease; }
.site-footer a:hover{ color:var(--sienna,#7d5e35); }

:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:2px solid var(--sienna,#7d5e35); outline-offset:3px; border-radius:2px;
}


/* ==========================================================================
   11. PRINT
   The site is a dark, animated, full-bleed thing. On paper none of that
   survives, and none of it should be attempted. What a printed page has to
   do is carry the words, the pictures and the URL of where it came from.
   ========================================================================== */

@media print{
  @page{ margin:18mm 16mm; }

  html, html[data-theme="dark"],
  body, body.v2-light, body.v2-dark{
    background:#fff !important; color:#000 !important;
    -webkit-print-color-adjust:exact; print-color-adjust:exact;
  }
  html[data-theme="dark"] body.v2-light img{ filter:none !important; }

  /* Chrome and page furniture: gone. */
  .site-nav, .page-subnav, .ux-dock, .ux-progress, .ux-loadbar,
  .ux-search, .ux-scrim, .ux-drawer, .v2-skip, .ux-skip,
  .sidenav-arrow, .look-cue, .v2-invitation, .sh-hero__cue,
  .sf-subform, .signup, .ml-form, #btn-explore, #ov-close,
  video, iframe, .film__poster, .ux-navbtn{
    display:none !important;
  }

  /* Nothing is hidden behind an unplayed reveal on paper. */
  [data-v2-reveal], .rise, .look-art, .eg-row, .chp, .v2-screen__body{
    opacity:1 !important; transform:none !important;
    animation:none !important; transition:none !important;
    clip-path:none !important;
  }

  /* Full-bleed stages collapse to normal flow. */
  .sh-hero, .v2-screen, .v2-aperture, .lr-stage, .lr-pin-inner, #stage{
    position:static !important; height:auto !important;
    min-height:0 !important; overflow:visible !important;
  }
  .look-scrim, .lr-wash, .v2-screen__veil, .sh-hero::after{ display:none !important; }

  main{ padding-top:0 !important; }

  body{ font-family:Georgia,'Times New Roman',serif; font-size:11pt; line-height:1.5; }
  h1,h2,h3,.v2-hero-title,.v2-section-title,.v2-sub{
    color:#000 !important; page-break-after:avoid; break-after:avoid;
  }
  h1,.v2-hero-title{ font-size:22pt; }
  h2,.v2-section-title{ font-size:16pt; margin-top:14pt; }
  p, blockquote, li{ orphans:3; widows:3; }
  blockquote, .v2-letter{ font-style:italic; border-left:2pt solid #999; padding-left:10pt; }

  img{ max-width:100% !important; height:auto !important; page-break-inside:avoid; }
  figure, .plate, .print, .ed-card{ page-break-inside:avoid; break-inside:avoid; }

  section, .v2-section{ padding:10pt 0 !important; background:#fff !important; }
  .band-dark, .band-dark *{ background:#fff !important; color:#000 !important; }

  /* Where a link goes is the one thing paper cannot show by itself. */
  a{ color:#000 !important; text-decoration:none; }
  main a[href^="http"]::after{ content:" (" attr(href) ")"; font-size:8.5pt; color:#555; }
  main a[href^="mailto:"]::after{ content:" (" attr(href) ")"; font-size:8.5pt; color:#555; }
  main a[href^="#"]::after, main a[href^="/"]::after{ content:""; }

  .site-footer{ border-top:1pt solid #ccc; background:#fff !important; }
  .site-footer__inner{ display:none !important; }
}


/* ==========================================================================
   12. NAV FIT
   The main nav went from five links to seven (Editions and Archive existed
   as pages but nothing linked to them). Seven at 18px no longer fit above
   the old 760px breakpoint, so the row tightens and the drawer takes over
   earlier rather than letting the links wrap into the logo.
   ========================================================================== */

@media (min-width:1001px){
  .site-nav__left{ gap:38px; }
  .site-nav__links{ gap:28px; }
  .site-nav__links a{ font-size:16px; }
  .site-nav__toggle{ display:none !important; }
}
@media (max-width:1000px){
  .site-nav__inner{ height:52px; min-height:52px; flex-wrap:nowrap; padding-block:0; }
  .site-nav__left, .site-nav__right{ display:flex; }
  .site-nav__links{ display:none !important; }
  .site-nav__toggle{ display:inline-flex !important; }
  .site-nav.nav-open{ background:var(--plaster-000,#f7f5f0); }
}

/* Paper cannot open an accordion, so everything folded away is unfolded for
   printing (see the beforeprint handler in js/site-ux.js). */
@media print{
  details, details[open]{ display:block !important; }
  summary{ font-weight:700; }
}


/* ==========================================================================
   13. DARK THEME — THE PLACES A TOKEN SWAP CANNOT REACH
   --------------------------------------------------------------------------
   Redefining the plaster tokens flips almost the whole site for free. Two
   kinds of rule escape it, and both were found by measuring contrast ratios
   on every page rather than by looking:

   (a) Sections that are DELIBERATELY dark on a light page — the origin
       chapter on /about, the Ordinary band on the home page. They set
       background:var(--umber-900) and then hard-code pale text on top. When
       --umber-900 inverts to cream, that pale text lands on a pale ground
       and disappears. These sections must stay dark in both themes: they are
       a change of register, not a use of the page's ground colour.

   (b) The footer, which nav.js injects and siris.css styles against the
       LIGHT palette with literal --secondary/--text values. It kept light-
       mode text colours on a dark ground on every single page.
   ========================================================================== */

/* ---- (a) sections that are dark by intent ----
   Nothing needed here any more. These sections used to be chased with
   !important overrides because they were painted with a palette token that
   the theme inverted underneath them. They now use --wall and --wall-ink,
   which no theme touches, so they are correct in both without being told. */

/* ---- (b) the injected footer ---- */
html[data-theme="dark"] .site-footer{ color:var(--on-light-1); }
html[data-theme="dark"] .sf-body,
html[data-theme="dark"] .sfcol--brand p,
html[data-theme="dark"] .sfcol__head,
html[data-theme="dark"] .sfcol nav a,
html[data-theme="dark"] .site-footer__base{ color:rgba(242,237,227,.78); }
html[data-theme="dark"] .sfcol nav a:hover,
html[data-theme="dark"] .site-footer__base a:hover{ color:#f2ede3; }
html[data-theme="dark"] .sf-subscribe,
html[data-theme="dark"] button.sf-subscribe{ color:#f2ede3; opacity:1; }
html[data-theme="dark"] .sf-subinput{
  color:#f2ede3; border-bottom-color:rgba(242,237,227,.3);
}
html[data-theme="dark"] .sf-subinput::placeholder{ color:rgba(242,237,227,.5); }
html[data-theme="dark"] .sf-subinput:focus{ border-bottom-color:#c8b182; }
html[data-theme="dark"] .sf-submsg{ color:#c8b182; }

/* The footer is the same in light mode on every page, and its secondary text
   was already sitting at about 3.2:1 there — under the 4.5:1 that normal-size
   text needs to be readable by someone with moderately reduced vision. Raised
   in both themes; this is a legibility fix, not a theme fix. */
.sf-body, .site-footer__base{ color:var(--on-light-2, #4a443c); }

/* ==========================================================================
   14. width/height ATTRIBUTES MUST NOT BECOME A LAYOUT HEIGHT
   --------------------------------------------------------------------------
   build-seo.py stamps real width and height attributes on every image, which
   is the correct fix for Cumulative Layout Shift — the browser can reserve
   the right box before the file arrives.

   What I missed is the other half of that technique, and it broke the site.
   Those attributes are presentational hints: the browser treats height="2400"
   as a height declaration. Where a rule sizes an image by width alone —
   .six img is `width:100%; aspect-ratio:3/4` with no height — the attribute
   supplies the missing height, aspect-ratio is then ignored because neither
   dimension is auto, and the image renders 187px wide by 2400px TALL. That
   is what turned the six portrait thumbnails on the home page into
   full-height vertical strips, and it did the same to the studio portrait on
   /ordinary and to the series grid on a phone.

   :where() has zero specificity, so this loses to every rule in the site that
   sets a real height — .sh-hero__painting img, .ed-plate img, .show__thumb
   img and the rest keep their height:100% and their object-fit:cover exactly
   as before. It only reaches the images whose height nothing else declares,
   which are precisely the ones the attribute was hijacking.

   Verified on the live site before shipping:
     .six img         187x2400  ->  187x249    (3:4, as designed)
     .show__thumb img 320x240   ->  320x240    (unchanged)
     hero painting    full bleed ->  full bleed (unchanged)
   ========================================================================== */

:where(img[width][height]){ height:auto; }


/* ==========================================================================
   15. THE HEADER STAYS PUT
   --------------------------------------------------------------------------
   I gave the nav a hide-on-scroll-down behaviour. It is a common pattern and
   it was the wrong call here: on a site that is largely full-bleed artwork,
   the header vanishing and reappearing is one more thing moving on a page
   whose whole argument is stillness, and it means the navigation is not where
   you left it.

   The bar now stays. It keeps the shadow and the blur it picks up once the
   page has moved under it, so it still reads as sitting ON something rather
   than floating — it simply never leaves.
   ========================================================================== */

.site-nav.ux-hidden{ transform:none; }


/* ==========================================================================
   16. REGISTERS AS A CLASS
   Any block that is a dark room on a light page gets .register-wall and
   inherits the whole contrast set. This is the hook to reach for instead of
   writing background:var(--umber-900) and then hard-coding pale text, which
   is what made dark mode unfixable the first time.
   ========================================================================== */

.register-wall{ background:var(--wall); color:var(--wall-ink); }
.register-wall .v2-eyebrow{ color:var(--wall-ink-3); }
.register-wall .v2-section-title,
.register-wall .v2-hero-title,
.register-wall .v2-sub,
.register-wall .act__lede,
.register-wall strong{ color:var(--wall-ink); }
.register-wall .v2-body,
.register-wall .v2-lead,
.register-wall p{ color:var(--wall-ink-2); }
.register-wall .v2-cta{ color:var(--wall-ink); border-bottom-color:var(--wall-line); }
.register-wall .v2-cta:hover,
.register-wall .v2-cta:focus-visible{ color:var(--wall-accent); border-bottom-color:var(--wall-accent); }
.register-wall hr, .register-wall .v2-rule{ background:var(--wall-accent); }


/* ---------------------------------------------------------------------------
   17. FOOTER LEGAL ROW
   Privacy, terms and cookies, on every page. It sits under the copyright
   line rather than beside it, so it does not compete with the contact
   address and does not change the footer's layout on any page.
   --------------------------------------------------------------------------- */
/* It sits UNDER the copyright line, on the left, not opposite it. The
   contact dock is fixed to the bottom right of every page; anything put
   in that corner of the footer ends up behind the Enquire button. */
.foot-legal{
  display:block; margin-top:6px;
  font-size:12px; letter-spacing:.04em; opacity:.72;
}
.foot-legal a{ color:inherit; text-decoration:none; border-bottom:1px solid currentColor; }
.foot-legal a:hover,
.foot-legal a:focus-visible{ opacity:1; }
.esp-foot__base .foot-legal{ margin-top:8px; }
@media print{ .foot-legal{ opacity:1; } }