/* ============================================================================
   MAT BOBBY — SERIES
   Swiss / International Typographic Style.

   Hero  : carousel — one frame held large, fed by the hidden "home" series
   Index : works in series — a uniform grid of uncropped covers
   Series: one frame held large, then the contact sheet, then the words
   Ground: rotates through mint, pale blue and pale yellow

   Everything below the token block is written against custom properties, so
   the whole palette moves to WordPress `theme.json` in one step.
   ========================================================================== */

/* ---------------------------------------------------------------- 1. TOKENS */
/* One ground, everywhere: the near-black the site already used. It is not a
   neutral — #111012 is rgb(17,16,18), a black with a faint violet cast — and
   inc/ground.php nudges that cast toward whatever photograph is on screen.
   The shift is deliberately below the threshold of "a coloured background".
   `color-scheme: dark` keeps scrollbars and form controls in the same world.
   A light palette follows, switched from Customizer → Palette. */
:root{
  color-scheme:dark;

  /* ground */
  --paper:#111012;
  --ground:var(--paper);
  /* the pastel slots are retired; kept pointing at the base so any rule still
     asking for them resolves to the one ground rather than a stale colour */
  --mint:var(--paper);
  --blue:var(--paper);
  --yellow:var(--paper);

  /* ink — opacities run higher than their light-ground equivalents, because
     white on black loses perceived contrast faster than ink on paper */
  --ink:#EDEFE8;
  --ink-70:rgba(237,239,232,.74);
  --ink-45:rgba(237,239,232,.58);
  --ink-30:rgba(237,239,232,.42);
  --rule:rgba(237,239,232,.26);
  --rule-soft:rgba(237,239,232,.13);
  --hover:rgba(237,239,232,.06);
  --accent:#F4552B;
  --plate-bg:rgba(237,239,232,.07);
  --overlay:rgba(17,16,18,.9);

  /* metrics */
  --site-max:1600px;   /* the page stops growing here and centres; see 2. ELEMENTS */
  --m:clamp(14px,3vw,42px);
  --gap:clamp(8px,1.1vw,15px);
  --bar:clamp(48px,4.2vw,58px);
  --micro:clamp(9.5px,.72vw,11.5px);

  /* type */
  /* thin open chevrons — the same drawing as the pointer would be if it could
     point; a faint dark edge keeps them legible over a bright frame */
  --cur-prev:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath d='M14.5 .5 5 10l9.5 9.5' fill='none' stroke='%23111012' stroke-opacity='.55' stroke-width='2.8'/%3E%3Cpath d='M14.5 .5 5 10l9.5 9.5' fill='none' stroke='%23EDEFE8' stroke-width='1.2'/%3E%3C/svg%3E") 10 10, w-resize;
  --cur-next:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 .5 15 10l-9.5 9.5' fill='none' stroke='%23111012' stroke-opacity='.55' stroke-width='2.8'/%3E%3Cpath d='M5.5 .5 15 10l-9.5 9.5' fill='none' stroke='%23EDEFE8' stroke-width='1.2'/%3E%3C/svg%3E") 10 10, e-resize;

  --sans:"Archivo","Helvetica Neue",Helvetica,Arial,sans-serif;
  --mono:"DM Mono","Archivo",ui-monospace,"SFMono-Regular",Menlo,monospace;
}

/* `body{color:var(--ink)}` resolves once and descendants inherit the COMPUTED
   colour — so redefining --ink further down the tree does nothing on its own.
   Every element that owns a ground re-declares colour, or an inverted section
   silently renders one theme's text on another theme's ground. */
.reel,.note-frame,.note-mount,.work-mount,.statement,
.series-index,.records,.contact,.notes-head,.note-archive,
.site-header,.site-footer,.work-body,.work-chapter,.work-facts{
  color:var(--ink);
}

/* The light palette: paper instead of near-black. Set on body, not :root, so
   every token below inherits from here — including the ones that point at
   --paper, which are restated so they resolve against THIS paper rather than
   the value :root computed. The photographs are never touched. */
body.palette-light{
  --paper:#F4F3EF;
  --ground:var(--paper);
  --mint:var(--paper);
  --blue:var(--paper);
  --yellow:var(--paper);

  --ink:#141316;
  --ink-70:rgba(20,19,22,.74);
  --ink-45:rgba(20,19,22,.56);
  --ink-30:rgba(20,19,22,.40);
  --rule:rgba(20,19,22,.24);
  --rule-soft:rgba(20,19,22,.12);
  --hover:rgba(20,19,22,.05);
  --plate-bg:rgba(20,19,22,.05);
  --overlay:rgba(244,243,239,.92);

  --cur-prev:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath d='M14.5 .5 5 10l9.5 9.5' fill='none' stroke='%23F4F3EF' stroke-opacity='.7' stroke-width='2.8'/%3E%3Cpath d='M14.5 .5 5 10l9.5 9.5' fill='none' stroke='%23111012' stroke-width='1.2'/%3E%3C/svg%3E") 10 10, w-resize;
  --cur-next:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 .5 15 10l-9.5 9.5' fill='none' stroke='%23F4F3EF' stroke-opacity='.7' stroke-width='2.8'/%3E%3Cpath d='M5.5 .5 15 10l-9.5 9.5' fill='none' stroke='%23111012' stroke-width='1.2'/%3E%3C/svg%3E") 10 10, e-resize;
}
html:has(body.palette-light){color-scheme:light}
body.palette-light .viewer::backdrop{background:rgba(244,243,239,.94)}

/* ------------------------------------------------------------- 2. ELEMENTS */
*,*::before,*::after{box-sizing:border-box}

/* The measure. Header, main and footer contents stop at --site-max and sit
   centred; the header bar and the footer ground still run edge to edge. The
   cap keeps a full-width frame inside the 2000px file the theme serves, and
   an index cover at about 500px, on any monitor. */
.site-header__inner,#main{max-width:var(--site-max);margin-inline:auto}
.site-footer > *{max-width:calc(var(--site-max) - 2 * var(--m));margin-inline:auto}

/* The nav is anchors now, so jumps are eased — and every target clears the
   sticky bar, which would otherwise sit on top of the section head. */
html{scroll-behavior:smooth}
#index,#statement,#contact,#contact-form,#top{scroll-margin-top:calc(var(--bar) + 4px)}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  /* `hidden` on one axis forces the other to `auto`, which makes body its own
     scroll container and swallows anchor jumps. `clip` clips without that
     side effect; `hidden` stays first for browsers that don't know `clip`. */
  overflow-x:hidden;
  overflow-x:clip;
}

img{display:block;max-width:100%}
figure{margin:0}
h1,h2,h3,h4,p,dl,dd,ul{margin:0}
ul{list-style:none;padding:0}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* ---------------------------------------------------------- 3. TYPE ROLES */
.u-mono{
  font-family:var(--mono);font-weight:400;font-size:var(--micro);
  letter-spacing:.11em;text-transform:uppercase;line-height:1.5;
}
.u-mono-lg{
  font-family:var(--mono);font-size:clamp(11px,.86vw,13.5px);
  letter-spacing:.05em;line-height:1.62;
}
.u-num{font-variant-numeric:tabular-nums}
.u-caps{
  font-weight:800;font-stretch:106%;text-transform:uppercase;
  letter-spacing:-.024em;line-height:.84;
}
.u-accent{color:var(--accent)}
.u-vh{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
}

.section-head{
  display:flex;justify-content:space-between;align-items:baseline;
  gap:var(--m);flex-wrap:wrap;
  padding-bottom:clamp(8px,.9vw,12px);
  border-bottom:1px solid var(--rule);
}

/* ------------------------------------------------------- 4. SITE HEADER */
/* Nav is optically centred: the two outer columns are equal, so the list
   sits on the page's vertical axis no matter how long the side items are. */
.site-header{
  position:sticky;top:0;z-index:80;
  background:var(--overlay);
  -webkit-backdrop-filter:saturate(1.4) blur(9px);
  backdrop-filter:saturate(1.4) blur(9px);
  border-bottom:1px solid var(--rule);
}
.site-header__inner{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  gap:var(--m);min-height:var(--bar);padding:0 var(--m);
}
.site-header__mark{display:flex;align-items:center;gap:.6em;white-space:nowrap}
.site-header__mark svg{width:1.15em;height:1.15em;flex:0 0 auto}
.site-header__meta{justify-self:end;text-align:right;color:var(--ink-45)}

.main-nav ul{display:flex;gap:clamp(14px,2.2vw,34px)}
.main-nav a{position:relative;white-space:nowrap;transition:color .18s}
.main-nav a::after{
  content:"";position:absolute;left:0;right:100%;bottom:-4px;height:1px;
  background:var(--accent);transition:right .3s cubic-bezier(.2,.7,.2,1);
}
.main-nav a:hover,.main-nav a[aria-current="page"]{color:var(--accent)}
.main-nav a:hover::after,.main-nav a[aria-current="page"]::after{right:0}

/* the hamburger: three hairlines that fold into a cross; only exists on phones */
.nav-toggle{
  display:none;width:44px;height:44px;margin:-10px -10px -10px 0;padding:10px;
  border:0;background:none;color:var(--ink);cursor:pointer;
  flex-direction:column;justify-content:center;gap:5px;
}
.nav-toggle span{display:block;width:22px;height:1.5px;background:currentColor;transition:transform .25s ease,opacity .2s ease}
.nav-toggle[aria-expanded=true] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.nav-toggle[aria-expanded=true] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded=true] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
.nav-toggle:focus-visible{outline:1px solid var(--ink-45);outline-offset:-4px}

@media (max-width:760px){
  .site-header__inner{grid-template-columns:1fr auto;gap:0;padding:0 var(--m)}
  .site-header__meta{display:none}
  .nav-toggle{display:flex}
  /* open, the menu is the whole screen: the bar stays on top with its cross,
     the links fill the ground beneath it at display size. Closed, it is out
     of the flow and out of the tab order. */
  .main-nav{display:none}
  /* the bar's backdrop blur would make it the containing block for anything
     fixed inside it, so the open bar drops the blur and sits on plain ground */
  .site-header.is-open{-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--paper)}
  /* the name and the cross stay above the sheet */
  .site-header.is-open .site-header__mark,.site-header.is-open .nav-toggle{position:relative;z-index:80}
  .site-header.is-open .main-nav{
    display:flex;flex-direction:column;justify-content:center;
    position:fixed;inset:0;z-index:79;
    background:var(--paper);color:var(--ink);
    padding:calc(var(--bar) + 24px) var(--m) 24px;
  }
  .main-nav ul{display:grid;gap:0;margin:0;padding:0;list-style:none}
  .main-nav li{border-bottom:1px solid var(--rule)}
  .main-nav li:first-child{border-top:1px solid var(--rule)}
  .main-nav a{
    display:block;padding:.42em 0;
    font-family:var(--sans);font-weight:800;font-stretch:106%;
    font-size:clamp(2rem,9.5vw,3.4rem);line-height:1;letter-spacing:-.024em;text-transform:uppercase;
  }
  .main-nav a::after{display:none}
  html.menu-open{overflow:hidden}
}

/* -------------------------------------------------------- 6. SERIES INDEX */
/* A uniform grid of covers. Each one sits whole inside an equal 4:3 box and is
   anchored to the bottom and centred, so the captions share a baseline and a
   vertical cover stands narrower than its neighbours, in the middle of its cell. Nothing is
   cropped to fill a cell. */
.series-index{padding:clamp(40px,6vw,96px) var(--m) clamp(48px,6.5vw,104px)}
.series-index .section-head{margin-bottom:clamp(26px,3.2vw,48px)}
.series-index__grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(40px,4.6vw,68px) clamp(20px,3vw,48px);
}
.series-card{display:flex;flex-direction:column;gap:14px;color:inherit;text-decoration:none}
.series-card__box{
  display:flex;align-items:flex-end;justify-content:center;
  aspect-ratio:4/3;max-width:100%;overflow:hidden;
}
.series-card__box img{display:block;width:auto;height:auto;max-width:100%;max-height:100%}
.series-card__meta{display:grid;gap:3px;justify-items:start}
.series-card__title{font-size:clamp(.95rem,1.05vw,1.08rem);font-weight:600;line-height:1.3}
.series-card__count{font-size:.9rem;line-height:1.4;color:var(--ink-45)}
.series-card__kind{color:var(--ink-45);margin-top:2px}
.series-card__meta::after{content:"";width:18px;height:1px;margin-top:12px;background:var(--ink-30)}
.series-card:hover .series-card__title,
.series-card:focus-visible .series-card__title{color:var(--accent)}
@media (max-width:900px){ .series-index__grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:560px){ .series-index__grid{grid-template-columns:1fr} }

/* ----------------------------------------------------------- 7. STATEMENT */
.statement{background:var(--mint);padding:clamp(38px,5.2vw,80px) var(--m)}
.statement__grid{
  display:grid;gap:var(--gap) var(--m);
  /* The same split as the Enquiries block, so the two sections share one
     rhythm. The 12-column version this replaces put the left column in 1–7 and
     the prose in 9–12, which left column 8 empty as a gap down the middle. */
  grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);
  margin-top:clamp(14px,1.8vw,24px);
}
.statement__grid > *{min-width:0}
.statement__left{display:grid;gap:clamp(24px,3vw,48px);align-content:start}
.statement__pull{
  font-weight:700;font-size:clamp(1.3rem,3.3vw,2.6rem);
  line-height:1.06;letter-spacing:-.018em;text-wrap:balance;overflow-wrap:break-word;
}
.statement__pull em{font-style:normal;color:var(--accent)}
.vitals{display:grid;width:100%;max-width:480px}
.vitals div{
  display:grid;grid-template-columns:7.2em minmax(0,1fr);gap:1.2em;
  padding:.62em 0;border-bottom:1px solid var(--rule-soft);
}
.vitals div:first-child{border-top:1px solid var(--rule)}
.vitals dt{color:var(--ink-45)}
.prose{display:grid;gap:1em}
.prose p{font-size:clamp(.94rem,1vw,1.05rem);line-height:1.62;color:var(--ink-70)}
@media (max-width:820px){
  .statement__grid{grid-template-columns:minmax(0,1fr)}
}

/* ------------------------------------------------------------- 8. RECORDS */
.records{background:var(--blue);padding:clamp(38px,5.2vw,80px) var(--m)}
.records__grid{
  display:grid;gap:clamp(22px,2.8vw,42px) var(--m);
  grid-template-columns:repeat(3,minmax(0,1fr));
  margin-top:clamp(14px,1.8vw,24px);
}
@media (max-width:820px){ .records__grid{grid-template-columns:1fr} }
.records h3{padding-bottom:.5em;border-bottom:1px solid var(--rule);margin-bottom:.8em;color:var(--ink-45)}
.records dl div{
  display:grid;grid-template-columns:4.4em minmax(0,1fr);gap:1em;
  padding:.6em 0;border-bottom:1px solid var(--rule-soft);
}
.records dt{color:var(--ink-45);font-variant-numeric:tabular-nums}
.records dd b{font-weight:600;display:block}
.records dd span{color:var(--ink-45)}

/* -------------------------------------------------------------- 9. FOOTER */
.site-footer{background:var(--paper);padding:clamp(38px,5.2vw,80px) var(--m) clamp(22px,2.6vw,38px)}
.site-footer__mark{
  display:flex;align-items:center;gap:.12em;flex-wrap:wrap;
  font-weight:800;font-stretch:106%;text-transform:uppercase;
  font-size:clamp(1.5rem,5.5vw,4.4rem);line-height:.86;letter-spacing:-.022em;
  margin:clamp(10px,1.4vw,18px) auto 0;
}
.site-footer__mark a{transition:color .2s}
.site-footer__mark a:hover{color:var(--accent)}
.site-footer__mark img{
  height:.68em;width:1em;object-fit:cover;flex:0 0 auto;background:var(--plate-bg);
}
.site-footer__grid{
  display:grid;gap:var(--gap) var(--m);grid-template-columns:repeat(5,minmax(0,1fr));
  margin-top:clamp(20px,2.6vw,38px);padding-top:clamp(10px,1.2vw,16px);
  border-top:1px solid var(--rule);
}
@media (max-width:820px){ .site-footer__grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
.site-footer__grid div{display:grid;gap:.25em;align-content:start}
.site-footer__grid b{font-weight:400;color:var(--ink-45)}
.site-footer__grid a:hover{color:var(--accent)}
.colophon{
  display:flex;justify-content:space-between;gap:var(--m);flex-wrap:wrap;
  margin-top:clamp(22px,2.8vw,42px);padding-top:clamp(9px,1.1vw,14px);
  border-top:1px solid var(--rule);color:var(--ink-45);
}

/* ------------------------------------------------------------- 10. MOTION */
.reveal{opacity:0;transform:translateY(13px);
  transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.reveal.is-in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001s !important;transition-duration:.001s !important}
  .reveal{opacity:1;transform:none}
}

/* ============================================================================
   11. FIELD NOTES
   A field note is one photograph, a title and a date — nothing else in the
   data model, so nothing else is invented here. The ground under each frame is
   sampled from the photograph itself, which is what turns the archive into a
   sequence you scroll rather than a grid you scan.
   ========================================================================== */
.notes-head{background:var(--paper);padding:clamp(34px,4.6vw,72px) var(--m) clamp(18px,2.2vw,30px)}
.notes-head__lede{
  margin-top:clamp(14px,1.8vw,26px);max-width:34ch;
  font-weight:700;font-size:clamp(1.15rem,2.4vw,1.9rem);
  line-height:1.16;letter-spacing:-.015em;text-wrap:balance;
}
.notes-head__meta{margin-top:1.2em;color:var(--ink-45);max-width:44ch}

/* --- the scroll of frames --- */
.note-frame{
  background:var(--ground);
  transition:background .7s ease;
  padding:clamp(40px,6.4vw,104px) var(--m);
}
.note-frame__inner{
  display:grid;grid-template-columns:repeat(12,minmax(0,1fr));
  gap:var(--gap) var(--m);
}
.note-frame__inner > *{min-width:0}
.note-frame__link{display:block;grid-column:1/span 12}
/* scale and position vary frame to frame, the way prints are hung */
.note-frame--left  .note-frame__link{grid-column:1/span 8}
.note-frame--right .note-frame__link{grid-column:5/span 8}
.note-frame--inset .note-frame__link{grid-column:3/span 8}
.note-frame--small .note-frame__link{grid-column:2/span 5}
.note-frame--tall  .note-frame__link{grid-column:4/span 6}

.note-frame__figure img{
  width:100%;height:auto;background:var(--plate-bg);
}
.note-frame__line{
  display:flex;justify-content:space-between;align-items:baseline;gap:1.5em;
  margin-top:.85em;padding-top:.6em;
  border-top:1px solid var(--rule);
  transition:border-color .3s;
}
.note-frame__title{
  font-weight:700;font-stretch:102%;text-transform:uppercase;
  font-size:clamp(.95rem,1.5vw,1.35rem);letter-spacing:-.008em;line-height:1;
  transition:color .2s;
}
.note-frame__date{color:var(--ink-45);white-space:nowrap;transition:color .2s}
.note-frame__link:hover .note-frame__title,
.note-frame__link:focus-visible .note-frame__title{color:var(--accent)}
.note-frame__link:hover .note-frame__line{border-top-color:var(--accent)}
.note-frame__link:hover .note-frame__date{color:var(--ink-70)}

@media (max-width:820px){
  .note-frame{padding:clamp(28px,7vw,48px) var(--m)}
  .note-frame__link{grid-column:1/span 12 !important}
}

/* --- the archive at the foot: every note, by date --- */
.note-archive{background:var(--paper);padding:clamp(38px,5.2vw,80px) var(--m)}
.note-archive__list{border-top:2px solid var(--ink);margin-top:clamp(12px,1.5vw,20px)}
.note-archive__row{
  display:grid;grid-template-columns:7.6em minmax(0,1fr) 1.4em;
  align-items:baseline;gap:var(--gap);
  padding:clamp(9px,1vw,14px) 0;
  border-bottom:1px solid var(--rule);
  transition:background .2s;
}
.note-archive__row:hover{background:var(--hover)}
.note-archive__date{color:var(--ink-45);transition:color .2s}
.note-archive__row:hover .note-archive__date{color:var(--accent)}
.note-archive__name{
  font-weight:700;font-stretch:102%;text-transform:uppercase;
  font-size:clamp(1rem,1.9vw,1.5rem);letter-spacing:-.01em;line-height:1.05;
}
.note-archive__arrow{justify-self:end;transition:transform .3s cubic-bezier(.2,.7,.2,1),color .2s}
.note-archive__row:hover .note-archive__arrow{transform:translateX(.4em);color:var(--accent)}

/* ============================================================================
   12. SINGLE FIELD NOTE
   The mount again, minus the rail: one frame, its ground, and the type set in
   the margins around it.
   ========================================================================== */
.note-mount{
  background:var(--ground);
  transition:background .7s ease;
  padding:clamp(12px,1.6vw,22px) var(--m) clamp(14px,1.8vw,24px);
  min-height:calc(100svh - var(--bar));
  display:grid;grid-template-rows:auto minmax(0,1fr) auto;
  gap:clamp(9px,1.1vw,15px);
}
.note-mount__body{
  display:grid;grid-template-columns:clamp(56px,6vw,92px) minmax(0,1fr) clamp(56px,6vw,92px);
  gap:clamp(8px,1vw,15px);min-height:0;
}
.note-mount__plate{
  min-height:0;display:grid;place-items:center;
}
.note-mount__plate img{
  max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;
}
.note-mount__title{
  font-weight:800;font-stretch:106%;text-transform:uppercase;
  font-size:clamp(24px,3.4vw,50px);line-height:.84;letter-spacing:-.026em;
}
@media (max-width:900px){
  .note-mount{min-height:0}
  .note-mount__body{grid-template-columns:minmax(0,1fr)}
  .note-mount__plate img{max-height:none}
}

/* ============================================================================
   13. SINGLE BODY OF WORK
   ========================================================================== */
.work-mount{
  background:var(--ground);transition:background .7s ease;
  padding:clamp(12px,1.6vw,22px) var(--m) clamp(26px,3.4vw,52px);
  display:grid;gap:clamp(9px,1.1vw,15px);
}
.work-mount__plate{overflow:hidden;max-height:78svh}
.work-mount__plate img{width:100%;height:100%;object-fit:cover;background:var(--plate-bg)}
.work-mount__title-row{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(10px,1.6vw,26px) var(--m);align-items:end;
}
.work-mount__title{
  font-weight:800;font-stretch:106%;text-transform:uppercase;
  font-size:clamp(2rem,6.4vw,5.4rem);line-height:.84;letter-spacing:-.026em;
}
.work-mount__intro{color:var(--ink-70);max-width:44ch;padding-bottom:.5em}
@media (max-width:820px){
  .work-mount__title-row{grid-template-columns:1fr}
  .work-mount__plate{max-height:none;aspect-ratio:4/3}
}

.work-facts{padding:clamp(20px,2.4vw,34px) var(--m) 0}
.work-facts__list{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--m);
  border-top:1px solid var(--rule);padding-top:clamp(9px,1vw,14px);
}
.work-facts__list div{display:grid;gap:.3em}
.work-facts__list dt{color:var(--ink-45)}
.work-facts__list dd{margin:0;color:var(--ink)}
@media (max-width:640px){ .work-facts__list{grid-template-columns:1fr 1fr} }

.work-body{padding:clamp(28px,3.6vw,56px) var(--m)}
.work-body__prose{max-width:62ch;font-size:clamp(1rem,1.05vw,1.1rem);line-height:1.62;color:var(--ink-70)}
.work-body__prose p{margin:0 0 1em}
.work-body__prose a{text-decoration:underline;text-underline-offset:.18em}
.work-body__prose a:hover{color:var(--accent)}
.work-body__lead{margin-bottom:clamp(18px,2.2vw,32px)}
.work-body__lead img{width:100%;height:auto}

.work-chapter{padding:clamp(26px,3.4vw,56px) var(--m)}
.work-chapter .section-head{margin-bottom:clamp(14px,1.8vw,26px)}

/* frames hung on the 12-column grid, sized from their own aspect ratio */
.plates{
  display:grid;grid-template-columns:repeat(12,minmax(0,1fr));
  gap:clamp(26px,3.6vw,64px) var(--m);
}
.plates__item{min-width:0}
.plates__item img{width:100%;height:auto;background:var(--plate-bg)}
.plates__caption{padding-top:.55em;color:var(--ink-45)}
@media (max-width:820px){
  .plates{gap:clamp(20px,5vw,34px) var(--m)}
  .plates__item{grid-column:1 / span 12 !important}
}

/* the gallery run: masonry columns, nothing cropped.
   Multi-column rather than grid, because a grid item that spans rows leaves a
   hole under a short frame instead of letting the next one rise into it. The
   gutter is deliberately tighter than .plates — a mosaic reads as one mesh,
   where the hang above reads as one print at a time. */
.mosaic{
  --mosaic-gap:clamp(14px,1.7vw,26px);
  columns:3;
  column-gap:var(--mosaic-gap);
}
.mosaic__item{
  break-inside:avoid;
  -webkit-column-break-inside:avoid;
  page-break-inside:avoid;
  display:block;
  margin:0 0 var(--mosaic-gap);
}
.mosaic__item img{width:100%;height:auto;display:block;background:var(--plate-bg)}
.mosaic__caption{padding-top:.5em;color:var(--ink-45)}

/* ---------------------------------------------------------------- VIEWER */
/* Every gallery frame is wrapped in a link to its large file, so this has to
   behave like a block, not like text. */
.frame-link{display:block;position:relative;border:0;text-decoration:none;cursor:zoom-in}
.frame-link:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

/* A native <dialog>, so Esc, the focus trap and the backdrop come from the
   browser rather than from code that has to be kept correct by hand.

   The dialog deliberately fills the viewport and centres the photograph with
   flex, rather than shrink-wrapping it. Left to size itself it stretches to
   the viewport anyway — inset:0 with width:auto resolves the auto margins to
   zero — which pinned the picture to the top-left corner and left the <img>
   sitting under the cursor everywhere, so a click meant for the background
   landed on the photograph instead. Filling on purpose fixes both. */
.viewer{
  position:fixed;inset:0;
  width:100vw;max-width:100vw;
  height:100vh;max-height:100vh;
  height:100dvh;max-height:100dvh;
  margin:0;border:0;padding:0;
  background:transparent;
  overflow:hidden;
}
.viewer[open]{display:flex;align-items:center;justify-content:center}
.viewer::backdrop{background:rgba(8,8,9,.93)}
/* The box is computed from the frame's own ratio and the viewport, NOT from
   the intrinsic size of whichever file happens to be loaded. With width:auto
   the element takes the natural size of its current src, so the small gallery
   file rendered small and the large one then snapped it bigger — the jump.
   Sizing from --ar (set by main.js) means both files land in exactly the same
   box and the swap is invisible. */
.viewer__img{
  --ar:1.5;                     /* replaced per frame; only a guard */
  /* Reserve room for the discs on both sides, so "left and right of the image"
     stays literally true and a control never lands on a photograph. A wide
     frame would otherwise fill to 94vw and leave them nowhere to stand. */
  --viewer-w:min(94vw, calc(100vw - 144px));
  --viewer-h:92vh;
  display:block;
  width:min(var(--viewer-w), calc(var(--viewer-h) * var(--ar)));
  height:auto;
  aspect-ratio:var(--ar);
  object-fit:contain;
  background:var(--plate-bg);   /* the box is exact, so this reads as a plate */
}
@supports (height:92dvh){ .viewer__img{--viewer-h:92dvh} }
@media (max-width:640px){
  .viewer__img{--viewer-w:min(74vw, calc(100vw - 96px))}
}
.viewer__close{
  position:absolute;top:clamp(10px,2vw,22px);right:clamp(10px,2vw,22px);
  width:44px;height:44px;
  display:flex;align-items:center;justify-content:center;
  background:none;border:0;cursor:pointer;
  color:var(--ink);font-size:19px;line-height:1;
}
.viewer__close:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

/* Prev and next: a pale disc with a thin chevron, pinned to the edges and
   vertically centred. They sit clear of the photograph at every width — the
   narrow-screen rule above gives the image less room so these never cover it. */
.viewer__nav{
  position:absolute;top:50%;transform:translateY(-50%);
  width:var(--nav-size,40px);height:var(--nav-size,40px);
  display:flex;align-items:center;justify-content:center;
  padding:0;border:0;border-radius:50%;
  background:var(--ink);color:var(--paper);
  cursor:pointer;
  opacity:.88;
  transition:opacity .18s ease, transform .18s ease;
}
/* display:flex above outranks the UA's [hidden]{display:none}, so hiding these
   from JS silently did nothing until this rule existed. */
.viewer__nav[hidden]{display:none}
.viewer__nav:hover{opacity:1}
.viewer__nav:focus-visible{opacity:1;outline:2px solid var(--ink);outline-offset:3px}
/* A slightly larger share of a smaller disc, so the chevron stays legible. */
.viewer__nav svg{width:48%;height:48%;display:block}
.viewer__nav--prev{left:clamp(6px,1.4vw,20px)}
.viewer__nav--prev svg{transform:rotate(180deg)}
.viewer__nav--next{right:clamp(6px,1.4vw,20px)}
@media (max-width:640px){
  .viewer__nav{--nav-size:34px}
}
@media (prefers-reduced-motion:no-preference){
  .viewer__nav:active{transform:translateY(-50%) scale(.94)}
}

.viewer__count{
  position:absolute;left:0;right:0;bottom:clamp(8px,1.6vw,18px);
  text-align:center;color:var(--ink-45);pointer-events:none;
}
/* The dim and the frame arrive together, so the photograph does not appear to
   land before the room has darkened. */
@media (prefers-reduced-motion:no-preference){
  .viewer[open]{animation:mbs-viewer-in .22s ease-out}
  .viewer[open]::backdrop{animation:mbs-viewer-dim .22s ease-out}
}
@keyframes mbs-viewer-in{from{opacity:0;transform:scale(.985)}to{opacity:1;transform:none}}
@keyframes mbs-viewer-dim{from{opacity:0}to{opacity:1}}
@media (max-width:1100px){ .mosaic{columns:2} }
@media (max-width:640px){ .mosaic{columns:1;--mosaic-gap:clamp(18px,5vw,30px)} }

.work-nav{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:baseline;
  gap:var(--m);padding:clamp(20px,2.6vw,38px) var(--m) clamp(30px,4vw,60px);
  border-top:1px solid var(--rule);margin:0 var(--m);
}
.work-nav > :nth-child(2){text-align:center}
.work-nav > :nth-child(3){text-align:right}
.work-nav a:hover{color:var(--accent)}
@media (max-width:640px){
  .work-nav{grid-template-columns:1fr 1fr;row-gap:.6em}
  .work-nav > :nth-child(2){grid-column:1 / -1;order:3;text-align:left}
}

/* the eyebrow that replaced the plate number in the mount tag */
.mount__eyebrow{display:block;color:var(--accent);margin-bottom:.5em}

/* ============================================================================
   14. CONTACT
   ========================================================================== */
.contact{background:var(--mint);padding:clamp(38px,5.2vw,80px) var(--m)}
.contact__grid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);
  gap:clamp(26px,3.4vw,56px) var(--m);
  margin-top:clamp(16px,2vw,28px);
}
.contact__lede{
  font-weight:700;font-size:clamp(1.3rem,3.2vw,2.4rem);
  line-height:1.08;letter-spacing:-.018em;text-wrap:balance;margin-bottom:1.2em;
}
.contact__prose{margin-top:1.6em;color:var(--ink-70)}
.contact__fallback{color:var(--ink-70)}
@media (max-width:820px){ .contact__grid{grid-template-columns:1fr} }

/* The same form sitting inside the footer's say-hello block: the footer
   already supplies the ground and the padding, so this drops both. */
.contact--inline{
  background:none;padding:0;
  margin-top:clamp(26px,3.4vw,52px);
  padding-top:clamp(24px,3vw,44px);
  border-top:1px solid var(--rule);
}
.contact--inline .contact__grid{margin-top:0}
.contact--inline .contact__lede{margin-bottom:0}

/* Gravity Forms, reset into the type system */
.contact__form .gform_wrapper{margin:0}
.contact__form .gform_fields{display:grid;gap:clamp(14px,1.8vw,24px);grid-template-columns:1fr}
.contact__form .gfield_label,
.contact__form legend{
  display:block;font-family:var(--mono);font-size:var(--micro);
  letter-spacing:.11em;text-transform:uppercase;color:var(--ink-45);
  margin-bottom:.5em;font-weight:400;
}
.contact__form input[type="text"],
.contact__form input[type="email"],
.contact__form input[type="tel"],
.contact__form input[type="url"],
.contact__form textarea,
.contact__form select{
  width:100%;background:transparent;color:var(--ink);
  border:0;border-bottom:1px solid var(--rule);border-radius:0;
  padding:.55em 0;font-family:var(--sans);font-size:1rem;
  transition:border-color .2s;
}
.contact__form textarea{min-height:9em;resize:vertical}
.contact__form input:focus,
.contact__form textarea:focus{outline:none;border-bottom-color:var(--accent)}
.contact__form .gfield_required{color:var(--accent)}
.contact__form .gform_footer{margin-top:clamp(18px,2.2vw,32px)}
.contact__form .gform_button,
.contact__form button[type="submit"],
.contact__form input[type="submit"]{
  font-family:var(--mono);font-size:var(--micro);letter-spacing:.11em;
  text-transform:uppercase;
  background:var(--ink);color:var(--paper);
  border:0;border-radius:0;padding:1em 1.8em;cursor:pointer;
  transition:background .2s;
}
.contact__form .gform_button:hover,
.contact__form button[type="submit"]:hover,
.contact__form input[type="submit"]:hover{background:var(--accent)}
.contact__form .gform_validation_errors,
.contact__form .validation_message{
  font-family:var(--mono);font-size:var(--micro);letter-spacing:.08em;
  color:var(--accent);border:0;background:none;padding:.4em 0;
}
.contact__form .gform_confirmation_message{font-family:var(--mono);color:var(--ink)}

/* ============================================================================
   15. ODDS AND ENDS
   ========================================================================== */
.statement__portrait{max-width:min(100%,420px)}
.statement__portrait img{width:100%;height:auto;background:var(--plate-bg)}

.mbs-more{transition:color .2s}
.mbs-more:hover{color:var(--accent)}

.mbs-pagination{padding:clamp(22px,3vw,44px) var(--m)}
.mbs-pagination ul{display:flex;gap:.9em;flex-wrap:wrap}
.mbs-pagination .current{color:var(--accent)}
.mbs-pagination a:hover{color:var(--accent)}

.mbs-skip:focus{
  position:fixed;top:8px;left:8px;width:auto;height:auto;
  clip:auto;clip-path:none;z-index:200;
  background:var(--ink);color:var(--paper);padding:.7em 1em;
  font-family:var(--mono);font-size:var(--micro);letter-spacing:.11em;text-transform:uppercase;
}

.wp-caption-text,.blocks-gallery-caption{font-family:var(--mono);font-size:var(--micro);
  letter-spacing:.09em;text-transform:uppercase;color:var(--ink-45);padding-top:.5em}

/* ============================================================================
   16. GRAVITY FORMS
   Gravity Forms' "orbital" framework ships its own colour system and a reset
   that re-declares control colours from literals, deeper in the tree than a
   wrapper-level override reaches. Two things are needed:

   1. Its colour tokens, set on the wrapper AND its descendants, because the
      framework re-declares them on inner elements.
   2. Scoped !important on the controls themselves, because the reset beats
      ordinary specificity. Confined to .contact so nothing else is affected.

   Scoped to .contact rather than .contact__form so the form is styled whether
   it comes from the template or from a block in the page content.
   ========================================================================== */
.contact .gform_wrapper,
.contact .gform_wrapper *{
  --gf-color-primary:var(--accent);
  --gf-color-primary-contrast:var(--paper);

  --gf-color-out-ctrl-dark:var(--ink);
  --gf-color-out-ctrl-dark-darker:var(--ink);
  --gf-color-out-ctrl-dark-lighter:var(--ink-70);
  --gf-color-out-ctrl-light:var(--rule);
  --gf-color-out-ctrl-light-darker:var(--rule);
  --gf-color-out-ctrl-light-lighter:var(--rule-soft);

  --gf-color-in-ctrl:transparent;
  --gf-color-in-ctrl-darker:transparent;
  --gf-color-in-ctrl-lighter:transparent;
  --gf-color-in-ctrl-dark:var(--ink);
  --gf-color-in-ctrl-dark-lighter:var(--ink-45);
  --gf-color-in-ctrl-light:var(--rule);
  --gf-color-in-ctrl-light-darker:var(--rule);
  --gf-color-in-ctrl-primary:var(--accent);

  --gf-ctrl-label-color-primary:var(--ink);
  --gf-ctrl-label-color-secondary:var(--ink-70);
  --gf-ctrl-label-color-req:var(--accent);
  --gf-ctrl-desc-color:var(--ink-45);
  --gf-ctrl-placeholder-color:var(--ink-45);
  --gf-ctrl-color:var(--ink);
  --gf-ctrl-bg-color:transparent;
  --gf-ctrl-border-color:var(--rule);
  --gf-ctrl-radius:0;
  --gf-ctrl-btn-bg-color-primary:var(--ink);
  --gf-ctrl-btn-color-primary:var(--paper);
  --gf-ctrl-btn-radius:0;
}

.contact .gfield_label,
.contact .gform-field-label{ color:var(--ink) }
.contact .gfield_description,
.contact .gform_fileupload_rules{ color:var(--ink-45) }
.contact .gfield_required{ color:var(--accent) }

.contact input[type="text"],
.contact input[type="email"],
.contact input[type="tel"],
.contact input[type="url"],
.contact input[type="number"],
.contact textarea,
.contact select{
  background-color:transparent !important;
  color:var(--ink) !important;
  border:0 !important;
  border-bottom:1px solid var(--rule) !important;
  border-radius:0 !important;
  box-shadow:none !important;
  padding:.6em 0 !important;
  font-family:var(--sans) !important;
  font-size:1rem !important;
}
.contact textarea{ min-height:9em !important; resize:vertical !important }
.contact input:focus,
.contact textarea:focus,
.contact select:focus{
  border-bottom-color:var(--accent) !important;
  outline:none !important;
}
.contact ::placeholder{ color:var(--ink-45) !important; opacity:1 }

.contact input[type="submit"],
.contact button[type="submit"],
.contact .gform_button{
  background-color:var(--ink) !important;
  color:var(--paper) !important;
  border:0 !important;
  border-radius:0 !important;
  font-family:var(--mono) !important;
  font-size:var(--micro) !important;
  letter-spacing:.11em !important;
  text-transform:uppercase !important;
  padding:1.1em 2.2em !important;
  cursor:pointer;
  transition:background-color .2s;
}
.contact input[type="submit"]:hover,
.contact button[type="submit"]:hover,
.contact .gform_button:hover{ background-color:var(--accent) !important }

.contact .gform_confirmation_message,
.contact .gform_validation_errors{
  font-family:var(--mono);font-size:var(--micro);letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink);
  background:none;border:0;box-shadow:none;padding:.6em 0;
}
.contact .gform_validation_errors{ color:var(--accent) }

/* ============================================================================
   SERIES PAGE
   One frame held large, a strip at the foot of the first screen, the contact
   sheet, then the words. The stage is a fixed box on wide screens so the strip
   stays put while the frames change; on phones it takes each frame's own shape,
   because a landscape floating in a portrait-sized box is mostly empty screen.
   ========================================================================== */
.series{color:var(--ink);
  --series-cap:24px;
  --series-strip:58px;
}
.series-crumb,.series-viewer,.series-strip,.series-thumbs,.series-about{margin-inline:var(--m)}
#frames{scroll-margin-top:calc(var(--bar) + var(--series-strip))}

.series-back{display:inline-flex;align-items:center;color:var(--ink-45)}
.series-back:hover,.series-back:focus-visible{color:var(--ink)}
.series-back svg{display:block;width:21px;height:auto}
.series-crumb{
  display:none;justify-content:space-between;align-items:center;
  height:38px;border-bottom:1px solid var(--rule-soft);
  font-size:.82rem;font-weight:600;
}

.series-viewer{display:grid;gap:8px;padding-top:clamp(14px,1.8vw,26px)}
.series-stage{
  position:relative;min-height:260px;
  /* fill the first screen, but never taller than a 3:2 frame at full width
     needs — that keeps the caption against the picture on a tall window */
  height:min(
    calc(100svh - var(--bar) - clamp(14px,1.8vw,26px) - 8px - var(--series-cap) - var(--series-strip)),
    calc((min(100vw, var(--site-max)) - 2 * var(--m)) * .68)
  );
}
.series-stage__img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:contain;object-position:center bottom;
  opacity:0;transition:opacity .85s ease;
}
.series-stage__img.is-on{opacity:1}
.series-stage__img.is-instant{transition:none}
.series-stage__step{
  position:absolute;top:0;bottom:0;width:50%;
  padding:0;border:0;background:none;appearance:none;
}
.series-stage__step--prev{left:0;cursor:var(--cur-prev)}
.series-stage__step--next{right:0;cursor:var(--cur-next)}
.series-stage__step:focus-visible{outline:1px solid var(--ink-45);outline-offset:-1px}
.series-caption{
  margin:0;height:var(--series-cap);line-height:var(--series-cap);
  font-size:.82rem;color:var(--ink-45);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

.series-strip{
  display:flex;justify-content:space-between;align-items:center;gap:var(--m);
  height:var(--series-strip);border-top:1px solid var(--rule-soft);
}
.series-strip__title{margin:0;font-size:clamp(.95rem,1.05vw,1.08rem);font-weight:600;line-height:1.3}
.series-strip__right{display:flex;align-items:center;gap:20px;color:var(--ink-45)}
.series-grid{display:grid;grid-template-columns:repeat(2,10px);gap:3px;padding:6px;margin:-6px;color:var(--ink-45)}
.series-grid:hover,.series-grid:focus-visible{color:var(--ink)}
.series-grid i{width:10px;height:8px;border:1px solid currentColor}.series-thumbs{
  /* Masonry: three columns, each frame at its own height. Multi-column
     rather than grid, so a tall frame does not leave a hole beneath it.
     Nothing is cropped here — the box no longer fixes a ratio. */
  columns:3;
  column-gap:clamp(18px,2.4vw,40px);
  padding-top:clamp(20px,2.2vw,30px);
}.series-thumbs__chapter{
  column-span:all;margin:0;padding-bottom:10px;
  color:var(--ink-45);border-bottom:1px solid var(--rule-soft);
}
.series-thumbs__chapter:not(:first-child){margin-top:clamp(14px,1.8vw,28px)}.series-thumb{
  display:flex;flex-direction:column;gap:10px;
  break-inside:avoid;-webkit-column-break-inside:avoid;page-break-inside:avoid;
  margin:0 0 clamp(30px,3.2vw,48px);
  color:inherit;text-decoration:none;
}.series-thumb__box{display:block;max-width:100%;overflow:hidden}.series-thumb__box img{display:block;width:100%;height:auto}
.series-thumb__cap{font-size:.82rem;line-height:1.4;color:var(--ink-45)}
.series-thumb::after{content:"";width:18px;height:2px;background:transparent}
.series-thumb[aria-current]::after{background:var(--accent)}
.series-thumb[aria-current] .series-thumb__cap{color:var(--ink)}

.series-about{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);
  gap:clamp(20px,2.4vw,32px) clamp(20px,3vw,48px);
  margin-top:clamp(56px,7vw,110px);padding-block:clamp(18px,2vw,28px) clamp(40px,5vw,80px);
  border-top:1px solid var(--rule);
}
.series-about__head{display:grid;gap:18px;align-content:start}
.series-about__title{margin:0;font-size:clamp(.95rem,1.05vw,1.08rem);font-weight:600;line-height:1.3}
.series-about__facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px var(--m);margin:0}
.series-about__facts div{display:grid;gap:.3em}
.series-about__facts dt{color:var(--ink-45)}
.series-about__facts dd{margin:0;color:var(--ink)}
.series-about__prose{max-width:62ch;font-size:clamp(1rem,1.05vw,1.1rem);line-height:1.62;color:var(--ink-70)}
.series-about__prose p{margin:0 0 1em}
.series-about__prose a{text-decoration:underline;text-underline-offset:.18em}
.series-about__prose a:hover{color:var(--accent)}
.series-about__lede{color:var(--ink)}

@media (max-width:900px){.series-thumbs{columns:2} }
@media (max-width:560px){
  .series-crumb{display:flex}
  .series-back--strip{display:none}
  .series-viewer{padding-top:14px}
  /* main.js sets --stage-h to the tallest frame in the run (at this width,
     capped at 60svh) so the strip does not jump as the frames change; the
     aspect-ratio is only the first paint, before that has run */
  /* no aspect-ratio here: with a height set it would size the box from that
     height and a landscape would run past the screen; before the script has
     measured, the box is a 3:2 of the width */
  .series-stage{width:100%;height:var(--stage-h,62vw);min-height:0;aspect-ratio:auto;max-height:60svh}
  .series-stage__img,.reel__slide img{object-position:center center}.series-thumbs{columns:1}
  .series-about{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){ .series-stage__img{transition:none} }

/* ============================================================================
   HOME CAROUSEL (.reel — not .home, which WordPress puts on <body> there)
   The series stage again — same box, same chevron cursors — with every slide
   printed and only the showing one lit — or two, when a pair of portraits is
   hung side by side at the same height on a wide screen; on a phone the two
   show one after the other. The strip under it is a caption and a
   counter; there is no title, because these are not a series.
   ========================================================================== */
.reel{margin-inline:var(--m);padding-top:clamp(14px,1.8vw,26px);display:grid;gap:8px;--home-strip:40px}
.reel__stage{
  height:min(
    calc(100svh - var(--bar) - clamp(14px,1.8vw,26px) - 8px - var(--home-strip)),
    calc((min(100vw, var(--site-max)) - 2 * var(--m)) * .62)
  );
}
.reel__slide{position:absolute;inset:0;opacity:0;transition:opacity .45s ease}
.reel__slide.is-on{opacity:1}
.reel__slide img{display:block;width:100%;height:100%;object-fit:contain;object-position:center bottom}
/* a pair on a wide screen: main.js sizes each frame's box so the two share a
   height and sit centred with the gap between; these rules only anchor the
   boxes to the bottom and let the script own left/width/height */
.reel__stage.is-pair .reel__slide[data-side]{top:auto;right:auto;bottom:0;width:calc(50% - var(--gap) / 2)}
.reel__stage.is-pair .reel__slide[data-side=left]{left:0}
.reel__stage.is-pair .reel__slide[data-side=right]{left:calc(50% + var(--gap) / 2)}
@media (prefers-reduced-motion:reduce){ .reel__slide{transition:none} }
.reel__strip{
  display:flex;justify-content:space-between;align-items:center;gap:var(--m);
  height:var(--home-strip);border-bottom:1px solid var(--rule-soft);color:var(--ink-45);
}
.reel__strip .series-caption{flex:1 1 auto;min-width:0}
.reel + .series-index{padding-top:clamp(26px,3.4vw,56px)}
@media (max-width:560px){
  .reel{padding-top:14px}
  /* edge to edge on a phone: a landscape fills the viewport width, and the
     box is as tall as the tallest portrait (main.js sets --stage-h) */
  .reel__stage{width:calc(100% + 2 * var(--m));margin-inline:calc(-1 * var(--m));height:var(--stage-h,66vw);min-height:0;aspect-ratio:auto;max-height:60svh}
  .reel__stage,.series-stage{touch-action:pan-y pinch-zoom;overscroll-behavior-x:contain}
  /* stated again here because the reel's own rule above says bottom */
  .reel__stage .reel__slide img{object-position:center center}
}


/* ------------------------------------------------------------------ DOORS */
/* The entry page: two ways in, side by side. Both covers are cropped to one
   shared cell so the pair matches in size and orientation — a deliberate
   exception to the no-cropping rule the index states, made here because the
   two doors have to read as a pair rather than as two photographs. The label
   sits above its picture, left, small. */
.doors{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(24px,3vw,56px);
  padding:clamp(40px,6vw,96px) var(--m) clamp(48px,6.5vw,104px);
}
.door{display:flex;flex-direction:column;gap:clamp(8px,.9vw,13px);color:inherit;text-decoration:none}
.door__label{
  text-align:left;text-transform:uppercase;
  font-size:clamp(11px,.86vw,13.5px);letter-spacing:.08em;line-height:1.2;
  color:var(--ink);
}
.door__box{
  position:relative;display:block;aspect-ratio:4/5;overflow:hidden;
  background:var(--plate-bg);
}
.door__box img{display:block;width:100%;height:100%;object-fit:cover}
/* The scrim: the page colour laid over the photograph, absent until pointed
   at. --paper rather than a fixed hex, so it follows the palette — near-black
   on midnight, cream on a light set — and never fights a palette change. */
.door__box::after{
  content:"";position:absolute;inset:0;
  background:var(--paper);opacity:0;
  transition:opacity .35s ease;
  pointer-events:none;
}
.door:hover .door__box::after,
.door:focus-visible .door__box::after{opacity:.42}
@media (prefers-reduced-motion:reduce){
  .door__box::after{transition:none}
}
.door:hover .door__label,
.door:focus-visible .door__label{color:var(--accent)}
@media (max-width:760px){
  .doors{grid-template-columns:1fr;gap:clamp(30px,7vw,48px)}
}