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

   Hero  : slide mount — one plate held in a typographic frame (Direction 05)
   Index : hairline series table with a filmstrip that opens on hover
   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".
   Single-theme by intent; `color-scheme: dark` keeps scrollbars and form
   controls in the same world. */
: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 */
  --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 */
  --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. */
.mount,.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);
}

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

/* 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,#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}

@media (max-width:760px){
  .site-header__inner{grid-template-columns:1fr;justify-items:center;gap:0;padding:10px var(--m)}
  .site-header__meta{display:none}
  .main-nav ul{justify-content:center;flex-wrap:wrap;gap:14px;padding-top:8px}
}

/* --------------------------------------------------------- 5. SLIDE MOUNT */
.mount{
  background:var(--ground);
  transition:background .55s ease;
  padding:clamp(12px,1.6vw,22px) var(--m) clamp(14px,1.8vw,24px);
  min-height:calc(100svh - var(--bar));
  /* One row: the plate, and nothing else. The masthead line above it and the
     control row below it are both gone — anything outside the picture in a
     viewport-height section ends up off-screen. The controls moved onto the
     plate, into .mount__acts. */
  display:grid;grid-template-rows:minmax(0,1fr);
  gap:clamp(9px,1.1vw,15px);
}
/* Logged in, WordPress pushes the document down by the admin bar's height, so
   a 100svh mount runs exactly that far past the fold. Scoped above the mobile
   breakpoint, where .mount{min-height:0} takes over — .admin-bar .mount is the
   more specific selector and would otherwise beat it. */
@media (min-width:901px){
  .admin-bar .mount{min-height:calc(100svh - var(--bar) - 32px)}
}

/* --ground is written inline by PHP (a hex sampled from the plate) or by
   ground.js. The pastel tokens below are the fallback when neither ran. */
.mount,.note-frame,.note-mount,.work-mount,.statement{--ground:var(--paper)}

/* the four typographic margins of the mount */
.mount__margin{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:baseline;gap:clamp(12px,2vw,30px);
}
.mount__margin--top{padding-bottom:clamp(7px,.8vw,11px);border-bottom:1px solid var(--rule)}
.mount__margin--bottom{padding-top:clamp(7px,.8vw,11px);border-top:1px solid var(--rule)}
.mount__margin > :nth-child(2){text-align:center}
.mount__margin > :nth-child(3){text-align:right}
.mount__name{
  font-weight:800;font-stretch:104%;text-transform:uppercase;
  font-size:clamp(15px,1.3vw,20px);letter-spacing:-.014em;line-height:1;
}

.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;
}
.mount__side{display:flex;align-items:center;justify-content:center;min-width:0}
.mount__side span{
  writing-mode:vertical-rl;white-space:nowrap;color:var(--ink-45);
  font-family:var(--mono);font-size:var(--micro);letter-spacing:.15em;text-transform:uppercase;
}
.mount__side--left span{transform:rotate(180deg)}

.mount__frame{position:relative;min-height:0;display:grid;
  grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr)}
/* isolate: the slides stack against each other (z-index 0/1/2) for the wipe.
   Without a stacking context here those values compete with .mount__rail in
   the frame instead, and the active plate paints straight over the rail. */
.mount__plate{position:relative;min-height:0;overflow:hidden;isolation:isolate;background:var(--plate-bg)}
.mount__slides{position:absolute;inset:0}
/* A crossfade. The incoming plate fades up on z-index 2 while the outgoing one
   is held fully opaque at .is-behind on z-index 1, so the blend is always
   picture over picture and never dips through the empty plate underneath.
   main.js sets .is-behind and clears it on transitionend.

   Only the incoming slide's opacity is animated — fading the outgoing one out
   at the same time would cross both through 50%, and two half-transparent
   images over a dark ground read as a dip to grey rather than a dissolve. */
.mount__slide{
  position:absolute;inset:0;
  opacity:0;visibility:hidden;z-index:0;
}
.mount__slide.is-active{
  opacity:1;visibility:visible;z-index:2;
  transition:opacity 1s cubic-bezier(.4,0,.3,1);
}
.mount__slide.is-behind{
  opacity:1;visibility:visible;z-index:1;
}
/* the figure has to fill the slide or the plate loses its bottom edge */
.mount__slide figure{position:absolute;inset:0}
.mount__slide img{width:100%;height:100%;object-fit:cover}

/* The plate settles instead of cutting: each frame eases down from a slight
   over-scale as it becomes active. Written as an animation on .is-active
   rather than a transition into it, so the first plate does it on load too.
   Only the image moves — the caption is a sibling and stays put, and
   .mount__plate already clips the overscan. The reduced-motion block in
   section 10 flattens the duration to nothing. */
/* The Ken Burns drift, same numbers as the previous theme's `kb`. Scoped to
   the two slides that are actually on screen rather than all eight: the look
   is identical and it keeps seven idle images off the compositor. */
@keyframes mbs-kb{
  0%{transform:scale(1.04) translate(0,0)}
  100%{transform:scale(1.16) translate(-2%,-1.5%)}
}
.mount__slide .mount__img{transform:scale(1.04)}
.mount__slide.is-active .mount__img,
.mount__slide.is-behind .mount__img{
  animation:mbs-kb 22s ease-in-out infinite alternate;
  will-change:transform;
}

.mount__tag{
  position:absolute;left:0;bottom:0;
  background:var(--ground);
  padding:clamp(10px,1.2vw,17px) clamp(14px,1.6vw,24px) clamp(8px,1vw,13px) 0;
  display:flex;align-items:flex-end;gap:clamp(12px,1.5vw,22px);flex-wrap:wrap;
  width:max-content;max-width:min(100%,760px);
}
.mount__title{
  font-weight:800;font-stretch:106%;text-transform:uppercase;
  font-size:clamp(26px,3.6vw,54px);line-height:.82;letter-spacing:-.026em;
}
.mount__title .no{display:block;color:var(--accent)}
.mount__caption{color:var(--ink-70);padding-bottom:.35em}

.mount__rail{
  position:absolute;right:0;top:0;
  display:grid;gap:5px;padding:0 0 5px 5px;background:var(--ground);
}
.mount__thumb{
  position:relative;display:block;width:clamp(52px,5.4vw,84px);aspect-ratio:3/2;
  outline:1px solid transparent;outline-offset:-1px;
  transition:outline-color .2s;
}
.mount__thumb img{width:100%;height:100%;object-fit:cover}
/* Every thumbnail but the current one sits under a scrim, so the rail reads
   as one lit frame among dark ones rather than eight competing pictures.
   A real overlay rather than opacity: opacity would wash the frames out
   against the ground, this keeps them dark and saturated. */
.mount__thumb::after{
  content:"";position:absolute;inset:0;
  background:rgba(11,10,12,.62);
  transition:background .35s ease;
}
.mount__thumb:hover::after{background:rgba(11,10,12,.28)}
.mount__thumb[aria-selected="true"]::after{background:rgba(11,10,12,0)}
.mount__thumb[aria-selected="true"]{outline-color:var(--accent);outline-width:2px}

.mount__step{
  font-family:var(--mono);font-size:var(--micro);letter-spacing:.11em;
  text-transform:uppercase;transition:color .18s;
}
.mount__step:hover{color:var(--accent)}
.mount__margin--bottom > :first-child{justify-self:start}
.mount__margin--bottom > :last-child{justify-self:end}

/* Prev / Next / View project. Its own row, flush with the left edge the
   eyebrow, title and caption already share — parked beside the caption it
   started wherever that text happened to end, so it moved slide to slide. */
.mount__acts{
  flex:0 0 100%;
  display:flex;align-items:baseline;
  gap:clamp(14px,1.6vw,24px);
  margin-top:clamp(4px,.6vw,9px);
  white-space:nowrap;
}
.mount__acts .mount__step--go{color:var(--accent)}
.mount__acts .mount__step--go:hover{color:var(--ink)}

@media (max-width:900px){
  .mount{min-height:0}
  .mount__body{grid-template-columns:minmax(0,1fr)}
  .mount__side{display:none}
  .mount__frame{grid-template-rows:auto auto;gap:6px}
  .mount__plate{aspect-ratio:4/3;min-height:280px}
  .mount__rail{
    position:static;display:flex;gap:5px;padding:0;
    min-width:0;overflow-x:auto;background:none;
    scrollbar-width:none;
  }
  .mount__rail::-webkit-scrollbar{display:none}
  .mount__thumb{width:86px;flex:0 0 auto}
  /* keep prev/next reachable; the counter is the expendable one */
  .mount__margin--top{grid-template-columns:1fr auto}
  .mount__margin--top > :nth-child(2){text-align:right}
  .mount__margin--top > :nth-child(3){display:none}
  .mount__margin--bottom{grid-template-columns:auto auto}
  .mount__margin--bottom > :nth-child(2){display:none}
}

/* -------------------------------------------------------- 6. SERIES INDEX */
.series-index{
  background:var(--yellow);padding:clamp(38px,5.2vw,80px) var(--m);
  /* Content inset inside each row. The hairline rules still run the full
     width — only the type and the frames pull in from the edge. */
  --row-pad:clamp(10px,1.5vw,24px);
}
.series-index__list{border-top:2px solid var(--ink);margin-top:clamp(12px,1.5vw,20px)}
.series-index__row{
  display:block;border-bottom:1px solid var(--rule);transition:background .2s;
}
.series-index__row:hover,.series-index__row:focus-visible{background:var(--hover)}
/* position: the title's link is stretched over the whole row by the ::after
   below, so anywhere in the row navigates — except the frame count, which is
   lifted above it and toggles the preview instead. */
.series-index__line{
  position:relative;
  display:grid;
  /* 5.6em on the frame count, not 4.4: "22 frames" needs ~74px and was
     wrapping to two lines in the 70px the old value gave it. */
  grid-template-columns:2.9em minmax(0,3fr) minmax(0,1.5fr) 7.2em 5.6em 1.4em;
  align-items:baseline;gap:var(--gap);
  padding:clamp(10px,1.1vw,16px) var(--row-pad);
}
.series-index__link{display:inline;color:inherit}
.series-index__link::after{content:"";position:absolute;inset:0;z-index:0}
.series-index__link:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* Above the stretched link, so its own click is not swallowed by it. */
.series-index__frames{
  position:relative;z-index:1;
  justify-self:start;text-align:left;
  color:var(--ink-45);transition:color .2s;
}
button.series-index__frames{cursor:pointer}
button.series-index__frames:hover,
.series-index__row.is-open .series-index__frames{color:var(--accent)}
button.series-index__frames:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

.series-index__no{color:var(--ink-45);transition:color .2s}
.series-index__row:hover .series-index__no{color:var(--accent)}
.series-index__title{
  font-weight:800;font-stretch:104%;text-transform:uppercase;
  font-size:clamp(1.15rem,2.5vw,2rem);line-height:.96;letter-spacing:-.018em;
}
.series-index__arrow{justify-self:end;transition:transform .3s cubic-bezier(.2,.7,.2,1),color .2s}
.series-index__row:hover .series-index__arrow{transform:translateX(.4em);color:var(--accent)}
/* The filmstrip opens on its real height, not a guessed max-height: the
   wrapper interpolates grid-template-rows 0fr -> 1fr, so the ease is spent on
   the distance the strip actually travels instead of overshooting into empty
   space. Opening is slower and eased out; closing is quicker and plainer. */
.series-index__reveal{
  display:grid;grid-template-rows:0fr;overflow:hidden;
  /* one grid item only — a second child would land in an implicit auto row
     and stay visible while the row is closed */
  transition:grid-template-rows .28s cubic-bezier(.4,0,.7,1);
}
.series-index__row.is-open .series-index__reveal{
  grid-template-rows:1fr;
  transition:grid-template-rows .52s cubic-bezier(.2,.75,.3,1) .07s;
}
.series-index__reveal-inner{min-height:0;overflow:hidden;padding:0 var(--row-pad)}
/* spacing before the next row is a margin, not padding: a border-box item
   can never be shorter than its own padding, and this has to reach zero */
.series-index__controls{margin-bottom:clamp(10px,1.1vw,16px)}

/* The strip is a horizontal scroller: three frames visible, the rest a swipe
   or an arrow-click away. overflow-y is pinned off so the vertical reveal
   animation above never produces a second scrollbar. */
.series-index__strip{
  display:flex;gap:var(--gap);
  min-height:0;
  overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x proximity;
  scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  opacity:0;transform:translateY(7px);
  transition:opacity .22s ease,transform .28s cubic-bezier(.4,0,.7,1);
}
.series-index__strip::-webkit-scrollbar{display:none}
.series-index__strip:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.series-index__row.is-open .series-index__strip{
  opacity:1;transform:none;
  transition:opacity .4s ease .12s,transform .52s cubic-bezier(.2,.75,.3,1) .12s;
}

/* three across at any width, the rest off the right edge */
.series-index__strip img{
  flex:0 0 calc((100% - (var(--gap) * 2)) / 3);
  scroll-snap-align:start;
}

/* the arrows, centred under the frames */
.series-index__controls{
  display:flex;align-items:center;justify-content:center;gap:1.1em;
  padding-top:.7em;
  opacity:0;transition:opacity .3s ease;
}
.series-index__row.is-open .series-index__controls{opacity:1;transition-delay:.18s}
.series-index__controls[hidden]{display:none}

.series-index__nav{
  font-family:var(--mono);font-size:var(--micro);line-height:1;
  color:var(--ink-45);
  padding:.45em .8em;
  border:1px solid var(--rule-soft);
  transition:color .18s,border-color .18s,transform .18s;
}
.series-index__nav:hover:not(:disabled){color:var(--accent);border-color:var(--accent)}
.series-index__nav:active:not(:disabled){transform:scale(.94)}
.series-index__nav:disabled{opacity:.3;cursor:default}
.series-index__pos{color:var(--ink-45);min-width:5.5em;text-align:center}

@media (prefers-reduced-motion:reduce){
  .series-index__strip{scroll-behavior:auto}
}
/* A portrait cropped to this 3:2 box loses more than half its height, and a
   centred crop takes that off the top — heads first. Biasing the window up
   keeps the face; landscape frames are already 3:2 and crop nothing, so the
   offset only ever acts on the images that need it. */
.series-index__strip img{
  width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;
  object-position:50% 15%;
  background:var(--plate-bg);
}

@media (max-width:820px){
  /* The frame count is the toggle, and a button works on touch — so it stays
     and the year goes. Nothing is force-open here any more. */
  .series-index__line{grid-template-columns:2.4em minmax(0,1fr) 5.6em 1.2em;row-gap:.2em}
  .series-index__place,.series-index__years{display:none}
  .series-index__strip img{flex-basis:calc((100% - var(--gap)) / 2)}
}

/* ----------------------------------------------------------- 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(2.1rem,11vw,9rem);line-height:.84;letter-spacing:-.028em;
  margin:clamp(10px,1.4vw,18px) 0 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(4,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}
}

.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) }