/* ============================================================
   FORMASURA — shared stylesheet
   Cormorant Garamond (voice) + Jost (structure).
   Bodoni Moda appears twice only: the wordmark f (as vector) and
   the italic f in every exposure line.

   HIERARCHY, which the type has to carry:
     Series     — a chapter. Own page. Two-column essay.
     Subsection — a movement within it. Single-column intro, half scale.
     Plate      — one photograph and its field slip.
   ============================================================ */

:root{
  --void:#08090B;
  --ink:#0E1013;
  --rule:#1E2126;
  --rule-lt:#2C3037;
  --bone:#EDE8DF;
  --ash:#8A8B90;
  --brass:#C08A3E;
  --glacier:#93AEBE;

  --gut:clamp(1.25rem,4vw,4rem);
  --maxw:1560px;
  --teaser-h:clamp(20rem,44vh,32rem);

  --ease:cubic-bezier(.22,.61,.36,1);
  --slow:cubic-bezier(.16,1,.3,1);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}

body{
  background:var(--void);color:var(--bone);
  font-family:'Jost',system-ui,sans-serif;font-weight:400;line-height:1.7;
  overflow-x:hidden;-webkit-font-smoothing:antialiased;
}
body.locked{overflow:hidden}

img{display:block;width:100%;height:100%;object-fit:cover}
a{color:inherit}

.frame img,.lb__stage img,.hero__stack img{
  pointer-events:none;-webkit-user-drag:none;user-select:none;-webkit-touch-callout:none;
}

::selection{background:var(--brass);color:var(--void)}
:focus-visible{outline:1px solid var(--brass);outline-offset:3px}

.meta{
  font-family:'Jost',sans-serif;font-weight:500;
  text-transform:uppercase;letter-spacing:.2em;font-size:.6875rem;line-height:1.5;color:var(--ash);
}
.meta--brass{color:var(--brass)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}


/* ============================================================
   THE MARK
   ============================================================ */
.mark{
  font-family:'Bodoni Moda',serif;font-variation-settings:'opsz' 17;font-weight:400;
  text-transform:none;letter-spacing:.005em;white-space:nowrap;line-height:1;
}
.mark .f{font-style:italic;font-size:1.3em;line-height:0;margin-right:.005em}

/* ============================================================
   RAIL
   ============================================================ */
.rail{
  position:fixed;inset:0 0 auto 0;z-index:900;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1.1rem var(--gut);mix-blend-mode:difference;
}
.rail__mark{font-size:.9375rem;text-decoration:none}
/* On the home page the hero states the name at full size, so the small
   mark waits until the title sequence is behind you. Inner pages have no
   hero, so .rail--solid shows it immediately. */
.rail--fade .rail__mark{
  opacity:0;pointer-events:none;transform:translateY(-4px);
  transition:opacity .6s var(--ease),transform .6s var(--slow);
}
.rail--fade.past .rail__mark{opacity:1;pointer-events:auto;transform:none}

.rail nav{display:flex;gap:1.9rem;align-items:center}
.rail nav a{
  font-family:'Jost',sans-serif;font-weight:500;text-transform:uppercase;
  letter-spacing:.2em;font-size:.6875rem;text-decoration:none;position:relative;padding-bottom:2px;
}
.rail nav a::after{content:'';position:absolute;left:0;bottom:0;height:1px;width:0;background:currentColor;transition:width .45s var(--slow)}
.rail nav a:hover::after,.rail nav a:focus-visible::after,.rail nav a[aria-current]::after{width:100%}

.rail__toggle{display:none;background:none;border:0;color:inherit;cursor:pointer;padding:.25rem}
.rail__toggle span{display:block;width:20px;height:1px;background:currentColor;margin:5px 0;transition:transform .35s var(--ease),opacity .2s}
.rail.open .rail__toggle span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.rail.open .rail__toggle span:nth-child(2){opacity:0}
.rail.open .rail__toggle span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* ============================================================
   HERO
   ============================================================ */
.hero{position:relative;height:100vh;height:100svh;min-height:560px;background:var(--ink)}
.hero__stack{position:absolute;inset:0;overflow:hidden}
.hero__stack figure{position:absolute;inset:0;opacity:0;transition:opacity 2.2s var(--ease);transform:scale(1.04)}
.hero__stack figure.on{opacity:1}
.hero__stack img{filter:saturate(.88) contrast(1.04)}
.hero::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(to bottom,rgba(8,9,11,.72) 0%,rgba(8,9,11,0) 26%),
    linear-gradient(to top,rgba(8,9,11,.92) 0%,rgba(8,9,11,.28) 36%,rgba(8,9,11,0) 62%);
}
.hero__foot{
  position:absolute;left:0;right:0;bottom:0;z-index:3;
  padding:0 var(--gut) clamp(.75rem,2vw,1.5rem);
  display:grid;gap:clamp(1rem,3vw,2.25rem);
}
.hero__slip{display:flex;flex-wrap:wrap;align-items:baseline;gap:.9rem;border-left:1px solid var(--brass);padding-left:.9rem;max-width:36rem}
.hero__slip .t{font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:400;font-size:1.1875rem;color:var(--bone)}

.wordmark{
  display:flex;justify-content:space-between;align-items:baseline;width:100%;
  font-family:'Bodoni Moda',serif;font-variation-settings:'opsz' 17;font-weight:400;
  font-size:clamp(2.3rem,11.2vw,11.5rem);line-height:.82;color:var(--bone);
  padding-bottom:.390em;
}
.wordmark > *{display:block;opacity:0;transform:translateY(28px);animation:letter 1.15s var(--slow) forwards}
/* the f as vector — viewBox is the ink bounding box, so nothing can clip it */
.wordmark .wm-f{
  height:1.530em;width:auto;flex:0 0 auto;
  margin-right:-.263em;
  position:relative;top:.390em;   /* flex synthesises a replaced element's
                                     baseline from its border-box bottom */
}
@keyframes letter{to{opacity:1;transform:translateY(0)}}

.hero__cue{position:absolute;right:var(--gut);bottom:clamp(7.5rem,15vw,12rem);z-index:3;writing-mode:vertical-rl}
.hero__cue span{display:inline-block;animation:drift 3.4s var(--ease) infinite}
@keyframes drift{0%,100%{transform:translateY(0);opacity:.5}50%{transform:translateY(9px);opacity:1}}

/* ============================================================
   PAGE HEAD (inner pages — replaces the hero)
   ============================================================ */
.masthead{
  max-width:var(--maxw);margin:0 auto;
  padding:clamp(7rem,14vw,11rem) var(--gut) clamp(2.5rem,5vw,4rem);
}
.crumb{display:flex;gap:.6rem;align-items:baseline;margin-bottom:1.25rem}
.crumb a{text-decoration:none;transition:color .3s var(--ease)}
.crumb a:hover{color:var(--bone)}

/* ============================================================
   THESIS
   ============================================================ */
.thesis{
  max-width:var(--maxw);margin:0 auto;
  padding:clamp(5rem,12vw,10rem) var(--gut) clamp(4rem,9vw,7rem);
  display:grid;grid-template-columns:minmax(0,7.5rem) minmax(0,1fr);gap:clamp(1.5rem,5vw,4rem);
}
.statement{
  font-family:'Cormorant Garamond',serif;font-weight:400;
  font-size:clamp(1.5rem,3.4vw,2.75rem);line-height:1.3;max-width:27ch;text-wrap:balance;
}
.statement em{font-style:italic;color:var(--glacier)}

/* ============================================================
   SERIES  — a chapter
   ============================================================ */
.series{
  max-width:var(--maxw);margin:0 auto;
  padding:clamp(3.5rem,8vw,7rem) var(--gut);border-top:1px solid var(--rule);
}
.series__head{
  display:grid;grid-template-columns:minmax(0,7.5rem) minmax(0,1fr);
  gap:clamp(1.5rem,5vw,4rem);margin-bottom:clamp(2.5rem,6vw,4.5rem);
}
.series__index .n{
  display:block;font-family:'Jost',sans-serif;font-weight:200;
  font-size:clamp(2.75rem,6vw,4.5rem);line-height:.9;color:var(--rule-lt);margin-bottom:.6rem;
}
.series__body{max-width:62rem}
.series__title{
  font-family:'Cormorant Garamond',serif;font-weight:300;
  font-size:clamp(2.8rem,7.8vw,6.4rem);line-height:.96;letter-spacing:-.012em;
  margin:.6rem 0 1.6rem;text-wrap:balance;
}
.series__title a{text-decoration:none;transition:color .4s var(--ease)}
.series__title a:hover{color:var(--glacier)}
.series__title .alt{font-style:italic;color:var(--glacier);font-weight:300}

/* two columns is the series essay's signature */
.essay{columns:2;column-gap:clamp(1.75rem,4vw,3.25rem);max-width:56rem}
.essay p{
  font-family:'Jost',sans-serif;font-weight:400;font-size:1.0625rem;line-height:1.78;
  color:#CFCAC1;break-inside:avoid;margin-bottom:1.05rem;
}
.essay p:first-child::first-letter{
  float:left;font-family:'Cormorant Garamond',serif;font-weight:400;
  font-size:3.7em;line-height:.8;padding:.06em .1em 0 0;color:var(--brass);
}
.essay em{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:1.12em;color:var(--glacier)}

/* ============================================================
   SUBSECTION — a movement inside a chapter.
   Deliberately NOT a smaller copy of the series header. Different
   structure, so the eye reads rank rather than size:
     · roman numeral, not a two-digit number
     · a rule across the measure, which the series head never has
     · single column intro, against the essay's two
     · no drop cap — that belongs to the chapter opening only
   ============================================================ */
.sub{
  max-width:var(--maxw);margin:clamp(3rem,7vw,5.5rem) auto 0;
  padding:0 var(--gut);
}
.sub__head{
  border-top:1px solid var(--rule-lt);padding-top:1.25rem;
  display:grid;grid-template-columns:minmax(0,7.5rem) minmax(0,1fr);gap:clamp(1.5rem,5vw,4rem);
}
.sub__num{
  font-family:'Jost',sans-serif;font-weight:300;text-transform:lowercase;
  font-size:1.5rem;line-height:1;color:var(--brass);letter-spacing:.08em;
}
.sub__title{
  font-family:'Cormorant Garamond',serif;font-weight:300;
  font-size:clamp(1.8rem,3.6vw,3rem);line-height:1.04;letter-spacing:-.008em;margin:0 0 .9rem;
}
.sub__title .alt{font-style:italic;color:var(--glacier)}
.sub__intro{
  font-family:'Jost',sans-serif;font-weight:400;font-size:1.0625rem;line-height:1.78;
  color:#CFCAC1;max-width:54ch;
}
.sub__intro em{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:1.12em;color:var(--glacier)}
.sub .plates{margin-top:clamp(1.75rem,4vw,2.75rem)}

/* ============================================================
   PLATES
   ============================================================ */
.plates{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(.75rem,1.6vw,1.5rem);margin-top:clamp(2.5rem,6vw,4.5rem)}
.plate{grid-column:span 12}
.plate.w4{grid-column:span 4}
.plate.w5{grid-column:span 5}
.plate.w6{grid-column:span 6}
.plate.w7{grid-column:span 7}
.plate.w8{grid-column:span 8}
.plate.w12{grid-column:span 12}

.plate{
  position:relative;cursor:pointer;background:none;border:0;padding:0;color:inherit;
  text-align:left;font:inherit;display:block;width:100%;
}
.frame{
  position:relative;overflow:hidden;aspect-ratio:var(--ar,3/2);
  background:repeating-linear-gradient(-45deg,#0D0F12 0 10px,#101317 10px 20px);
  clip-path:inset(100% 0 0 0);transition:clip-path 1.15s var(--slow);
}
/* BUGFIX: the reveal class lands on .plate for photographs but on the
   .frame itself for the portrait, which has no .plate wrapper. Without
   the second selector the portrait stayed clipped to nothing — the image
   was loading fine, it just had zero visible height. */
.plate.in .frame,.frame.in{clip-path:inset(0 0 0 0)}
.frame img{transform:scale(1.07);transition:transform 1.4s var(--slow),filter .6s var(--ease);filter:saturate(.9) contrast(1.03)}
.plate.in .frame img,.frame.in img{transform:scale(1)}
.plate:hover .frame img,.plate:focus-visible .frame img{transform:scale(1.035);filter:saturate(1) contrast(1.05)}

.frame.is-empty::after{
  content:attr(data-label);position:absolute;inset:0;display:grid;place-content:center;
  font-family:'Jost',sans-serif;font-weight:400;text-transform:uppercase;
  letter-spacing:.24em;font-size:.625rem;color:var(--rule-lt);
}

.slip{
  padding:.85rem 0 0;border-top:1px solid var(--rule);margin-top:.85rem;
  opacity:0;transform:translateY(10px);
  transition:opacity .8s var(--ease) .25s,transform .8s var(--ease) .25s;
}
.plate.in .slip{opacity:1;transform:none}
.slip__row{display:flex;justify-content:space-between;gap:1rem;align-items:baseline}
.slip__n{color:var(--brass)}
.slip__t{display:block;margin-top:.4rem;font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:400;font-size:1.25rem;line-height:1.3}
.slip__note{display:grid;grid-template-rows:0fr;transition:grid-template-rows .55s var(--slow),opacity .4s var(--ease);opacity:0}
.slip__note > span{overflow:hidden;display:block;font-family:'Jost',sans-serif;font-weight:400;font-size:.9375rem;line-height:1.6;color:var(--ash);padding-top:.45rem}
.plate:hover .slip__note,.plate:focus-visible .slip__note{grid-template-rows:1fr;opacity:1}

/* ============================================================
   TEASER — a series as it appears on the contents page.
   The plates region is capped and fades out, so the page shows a
   sample rather than the whole chapter. Nothing is hidden that
   isn't reachable: the fade and the button both lead to the page.
   ============================================================ */
.teaser__plates{
  position:relative;max-height:var(--teaser-h);overflow:hidden;
  /* mask instead of a gradient overlay, so it works over any backdrop */
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 52%,transparent 97%);
  mask-image:linear-gradient(to bottom,#000 0%,#000 52%,transparent 97%);
}
/* the slips are noise in a teaser — the story lives on the series page */
.teaser__plates .slip{display:none}
.teaser__more{
  display:flex;align-items:baseline;gap:1rem;flex-wrap:wrap;
  margin-top:clamp(1.25rem,2.5vw,2rem);
  padding-top:1.25rem;border-top:1px solid var(--rule);
}
.teaser__btn{
  font-family:'Jost',sans-serif;font-weight:500;text-transform:uppercase;
  letter-spacing:.2em;font-size:.6875rem;text-decoration:none;color:var(--bone);
  display:inline-flex;align-items:center;gap:.7rem;
  padding:.35rem 0;position:relative;
}
.teaser__btn::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--rule-lt);transition:background .4s var(--ease)}
.teaser__btn .arrow{transition:transform .45s var(--slow);display:inline-block}
.teaser__btn:hover{color:var(--brass)}
.teaser__btn:hover::after{background:var(--brass)}
.teaser__btn:hover .arrow{transform:translateX(5px)}
.teaser__count{color:#5C6068;font-size:.6875rem}

/* ============================================================
   NEXT / PREV between series pages
   ============================================================ */
.pager{
  max-width:var(--maxw);margin:0 auto;padding:clamp(3rem,7vw,5.5rem) var(--gut);
  border-top:1px solid var(--rule);
  display:flex;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;
}
.pager a{text-decoration:none;display:grid;gap:.45rem;transition:color .35s var(--ease)}
.pager a:last-child{text-align:right}
.pager a:hover{color:var(--brass)}
.pager .t{font-family:'Cormorant Garamond',serif;font-weight:300;font-size:clamp(1.4rem,3vw,2.1rem);line-height:1.1}

/* ============================================================
   ABOUT / CONTACT / FOOTER
   ============================================================ */
.about{
  max-width:var(--maxw);margin:0 auto;padding:clamp(4.5rem,10vw,8rem) var(--gut);
  border-top:1px solid var(--rule);
  display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(2rem,6vw,6rem);align-items:start;
}
/* The portrait deliberately opts OUT of the clip-path reveal. That
   mechanism starts every .frame fully clipped and relies on JS adding
   .in to open it — fine for plates, but it means a single scripting or
   observer hiccup renders the portrait invisible with no error anywhere.
   A photograph of a person is not worth that fragility: it shows by
   default and fades in only as an enhancement. */
.about__portrait .frame{
  aspect-ratio:4/5;
  clip-path:none;
  opacity:1;
  animation:portraitIn 1.1s var(--ease) both;
}
.about__portrait .frame img{transform:none}
@keyframes portraitIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.about__portrait .cap{margin-top:.85rem}
.about h2{font-family:'Cormorant Garamond',serif;font-weight:300;font-size:clamp(2.4rem,5.8vw,4.4rem);line-height:1;letter-spacing:-.01em;margin:.6rem 0 1.5rem}
.about h3{font-family:'Jost',sans-serif;font-weight:600;text-transform:uppercase;letter-spacing:.2em;font-size:.6875rem;color:var(--brass);margin:2.4rem 0 .8rem}
.about .prose{font-family:'Jost',sans-serif;font-weight:400;font-size:1.0625rem;line-height:1.78;color:#CFCAC1;max-width:56ch;margin-bottom:1.05rem}
.about .prose em{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:1.12em;color:var(--glacier)}
.about a{color:var(--glacier);text-underline-offset:4px;text-decoration-thickness:1px}

.contact{max-width:var(--maxw);margin:0 auto;padding:clamp(4.5rem,10vw,8rem) var(--gut) clamp(3rem,6vw,5rem);border-top:1px solid var(--rule)}
.contact__lead{font-family:'Cormorant Garamond',serif;font-weight:300;font-size:clamp(2.6rem,7.4vw,5.8rem);line-height:.98;letter-spacing:-.012em;margin:1rem 0 2.5rem;max-width:16ch}
.links{display:flex;flex-wrap:wrap;gap:0 clamp(2rem,6vw,5rem);border-top:1px solid var(--rule)}
.links a{
  flex:1 1 14rem;display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  padding:1.15rem 0;border-bottom:1px solid var(--rule);text-decoration:none;
  font-family:'Cormorant Garamond',serif;font-weight:400;font-size:1.3125rem;
  transition:color .35s var(--ease),padding-left .4s var(--slow);
}
.links a:hover,.links a:focus-visible{color:var(--brass);padding-left:.5rem}
.links a .go{font-family:'Jost',sans-serif;font-weight:500;text-transform:uppercase;font-size:.6875rem;letter-spacing:.18em;color:var(--ash)}

footer{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut) 3.5rem;display:grid;gap:clamp(1.5rem,3vw,2.25rem)}
.footer__mark{font-size:clamp(1.75rem,4.2vw,2.75rem);color:var(--bone);padding-bottom:.18em;border-bottom:1px solid var(--rule)}
.footer__fine{display:flex;flex-wrap:wrap;gap:.75rem 2rem;justify-content:space-between}

/* ============================================================
   LIGHTBOX
   ============================================================ */
.lb{
  position:fixed;inset:0;z-index:1000;background:rgba(4,5,6,.97);backdrop-filter:blur(14px);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,25rem);
  opacity:0;pointer-events:none;transition:opacity .45s var(--ease);
}
.lb.on{opacity:1;pointer-events:auto}
.lb__stage{position:relative;display:grid;place-items:center;padding:clamp(2.5rem,6vw,4.5rem) clamp(1rem,3vw,3rem);min-height:0}
.lb__stage img{width:auto;height:auto;max-width:100%;max-height:calc(100svh - 9rem);object-fit:contain}
.lb__panel{border-left:1px solid var(--rule);padding:clamp(4.5rem,7vw,6rem) clamp(1.5rem,3vw,2.5rem) 2rem;overflow-y:auto;display:flex;flex-direction:column;gap:1rem}
.lb__panel h3{font-family:'Cormorant Garamond',serif;font-weight:300;font-size:clamp(1.9rem,3vw,2.6rem);line-height:1.05;letter-spacing:-.01em}
.lb__panel p{font-family:'Jost',sans-serif;font-weight:400;font-size:1rem;line-height:1.75;color:#CFCAC1}
.lb__panel .divider{height:1px;background:var(--rule)}
.lb__x,.lb__nav{
  position:absolute;background:none;border:0;color:var(--bone);cursor:pointer;
  font-family:'Jost',sans-serif;font-weight:500;text-transform:uppercase;
  letter-spacing:.18em;font-size:.6875rem;padding:.6rem .75rem;transition:color .3s var(--ease);
}
.lb__x{top:1.15rem;right:1.15rem;z-index:2}
.lb__nav{bottom:1.4rem}
.lb__nav.prev{left:clamp(1rem,3vw,3rem)}
.lb__nav.next{right:clamp(1rem,3vw,3rem)}
.lb__x:hover,.lb__nav:hover{color:var(--brass)}
.lb__count{position:absolute;bottom:1.4rem;left:50%;transform:translateX(-50%)}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1080px){
  .lb{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) auto}
  .lb__stage img{max-height:52svh}
  .lb__panel{border-left:0;border-top:1px solid var(--rule);padding:1.5rem var(--gut) 5rem;max-height:44svh}
  .lb__nav{bottom:auto;top:1.15rem}
  .lb__nav.prev{left:1rem}
  .lb__nav.next{right:5.5rem}
  .lb__count{display:none}
}
@media (max-width:880px){
  .rail nav{
    position:fixed;inset:0;background:var(--void);flex-direction:column;justify-content:center;gap:1.75rem;
    clip-path:circle(0% at calc(100% - 2.5rem) 2rem);transition:clip-path .6s var(--slow);
  }
  .rail.open nav{clip-path:circle(150% at calc(100% - 2.5rem) 2rem)}
  .rail nav a{font-size:1rem}
  .rail__toggle{display:block;z-index:2}
  .rail{mix-blend-mode:normal}
  .rail:not(.open){background:linear-gradient(rgba(8,9,11,.6),transparent)}

  .thesis,.series__head,.sub__head,.about{grid-template-columns:1fr}
  .essay{columns:1}
  .plate.w4,.plate.w5,.plate.w6,.plate.w7,.plate.w8{grid-column:span 12}
  .plate.w6.pair{grid-column:span 6}
  .about__portrait{max-width:22rem}
  .hero__cue{display:none}
  .wordmark{line-height:.86}
  .hero__foot{padding-bottom:clamp(1rem,3vw,1.75rem)}
  .pager a:last-child{text-align:left}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  html{scroll-behavior:auto}
  .frame{clip-path:none}
  .slip{opacity:1;transform:none}
  .wordmark > *{opacity:1;transform:none}
}