/* Atelier Serif Kit — engine stylesheet.
   Client tokens (colours, fonts, gutter, max width) are injected by build.py in
   a <style> block after this file, so anything here is a default that a config
   may override. Do not hard-code a client's palette into this file.

   Every animated property is transform or opacity. Nothing here animates a
   layout property, so no section can trigger a reflow while it reveals. */

/* ── Tokens ─────────────────────────────────────────────────────────── */
:root{
  --darkest:#181818;
  --lightest:#f5f5f5;
  --light-300:#f0f0f0;
  --light-600:#ebebeb;
  --accent:#787878;
  --accent-300:#c2c2c2;
  --line:#d8d8d8;

  --serif:"Cormorant",Georgia,"Times New Roman",serif;
  --sans:"Roboto",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --script:"Pinyon Script","Cormorant",cursive;

  --xxs:.25rem; --xs:.75rem; --s:1.5rem; --m:2rem; --l:3rem;
  --xl:4.5rem; --xxl:6rem; --xxxl:8rem;
  --gutter:6rem;
  --max:1440px;
  --header:6rem;

  --ease:cubic-bezier(.22,.61,.36,1);
  --slow:.9s;
}
@media (max-width:991px){
  :root{--gutter:2rem;--l:2.5rem;--xl:3rem;--xxl:4rem;--xxxl:6rem;--header:4.5rem}
}
@media (max-width:640px){
  :root{--gutter:1.25rem;--s:1.25rem;--m:1.5rem;--l:1.5rem;--xl:2rem;--xxl:3rem;--xxxl:4rem}
}

/* ── Reset ──────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--lightest);color:var(--darkest);
  font:400 clamp(.875rem,.82rem + .2vw,1rem)/1.65 var(--sans);
  overflow-x:hidden;
}
body.is-locked{overflow:hidden}
h1,h2,h3,h4,p,figure,blockquote,ul{margin:0}
ul{padding:0;list-style:none}
img,video{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
:focus-visible{outline:1px solid currentColor;outline-offset:4px}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
::selection{background:var(--darkest);color:var(--lightest)}

/* ── Type ───────────────────────────────────────────────────────────── */
.h1,.h2,.h3,.h4{font-family:var(--serif);font-weight:400;text-transform:uppercase;letter-spacing:0}
.h1{font-size:clamp(2.5rem,1.4rem + 4.4vw,4.5rem);line-height:1.08}
.h2{font-size:clamp(2rem,1.3rem + 2.6vw,3rem);line-height:1.18}
.h3{font-size:clamp(1.5rem,1.1rem + 1.6vw,2.25rem);line-height:1.3}
.h4{font-size:clamp(1.25rem,1.1rem + .5vw,1.5rem);line-height:1.4;font-weight:500}
em{font-style:italic;text-transform:none;font-size:1.12em}
.eyebrow{font:500 .75rem/1.5 var(--sans);letter-spacing:.1em;text-transform:uppercase}
.small{font-size:.8125rem}
.lede{max-width:26rem}
.center{text-align:center}
.logo-full,.loader-mark{font-family:var(--script);font-size:1.75rem;line-height:1;text-transform:none;letter-spacing:.01em}
.logo-short{font-family:var(--script);font-size:1.5rem;line-height:1}

/* ── Layout ─────────────────────────────────────────────────────────── */
.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)}
.scrim{position:absolute;inset:0;background:var(--darkest);opacity:var(--scrim,.5);pointer-events:none}
.bg-video,.fit{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
video{background:var(--darkest)}
video::-webkit-media-controls,video::-webkit-media-controls-start-playback-button{display:none!important;-webkit-appearance:none}

/* ── Buttons & links ────────────────────────────────────────────────── */
.btn{
  --c:var(--darkest);
  position:relative;display:inline-flex;gap:.6em;align-items:center;
  padding:var(--xs) var(--s);color:var(--c);
  font:500 .75rem/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;
  overflow:hidden;isolation:isolate;
}
.btn-light{--c:var(--lightest)}
.btn::before,.btn::after{content:"";position:absolute;background:currentColor}
.btn::before{inset:0 0 auto;height:1px;transform:scaleX(1);transform-origin:left}
.btn::after{inset:auto 0 0;height:1px;transform:scaleX(1);transform-origin:right}
.btn span{position:relative;z-index:1}
.btn svg{position:relative;z-index:1;transition:transform .45s var(--ease)}
.btn i,.btn-vert{position:absolute}
.btn::before,.btn::after{transition:transform .5s var(--ease)}
.btn:hover::before,.btn:hover::after{transform:scaleX(0)}
.btn:hover svg{transform:translateX(4px)}
.btn::marker{content:none}
/* vertical rules drawn with a wrapping box shadow, no extra elements */
.btn{box-shadow:inset 1px 0 0 currentColor,inset -1px 0 0 currentColor;transition:box-shadow .5s var(--ease),background-color .5s var(--ease),color .5s var(--ease)}
.btn:hover{box-shadow:inset 0 0 0 0 currentColor;background:var(--c);color:var(--lightest)}
.btn-light:hover{color:var(--darkest)}

.link{display:inline-flex;gap:.5em;align-items:center;font:500 .75rem/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}
.link svg{transition:transform .45s var(--ease)}

/* ── Header ─────────────────────────────────────────────────────────── */
.header{
  position:fixed;inset:0 0 auto;z-index:60;height:var(--header);
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  padding-inline:var(--gutter);
  background:var(--darkest);color:var(--lightest);
  transform:translateY(-100%);transition:transform .8s var(--ease);
}
body.ready .header{transform:none}
.social{display:flex;gap:var(--s);align-items:center}
.social a{display:block;opacity:.85;transition:opacity .3s}
.social a:hover{opacity:1}
.logo{justify-self:center;line-height:0}
.header .logo-full{display:none}
.header .logo-short{display:block}
.menu-btn{justify-self:end;position:relative;font:500 .75rem/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;height:1em;overflow:hidden}
.menu-btn span{display:block;transition:transform .5s var(--ease)}
.menu-btn[aria-expanded=true] span{transform:translateY(-100%)}

/* ── Menu overlay ───────────────────────────────────────────────────── */
.menu{
  position:fixed;inset:var(--header) 0 auto;z-index:55;
  display:grid;grid-template-rows:1fr auto;gap:var(--xl);
  min-height:calc(100dvh - var(--header));
  padding:var(--xxl) var(--gutter) var(--l);
  background:var(--darkest);color:var(--lightest);
  transform:translateY(-101%);visibility:hidden;
  transition:transform .75s var(--ease),visibility 0s linear .75s;
  will-change:transform;
}
.menu[hidden]{display:grid}
body.menu-open .menu{transform:none;visibility:visible;transition:transform .75s var(--ease),visibility 0s}
.menu-list{margin:var(--m) 0}
.menu-list a{
  display:inline-block;padding:.15em 0;
  font-family:var(--serif);font-size:clamp(2rem,1rem + 4vw,3.5rem);line-height:1.2;text-transform:uppercase;
  opacity:0;transform:translateY(1.2em);
}
body.menu-open .menu-list a{opacity:1;transform:none;transition:opacity .6s var(--ease) var(--d,0s),transform .7s var(--ease) var(--d,0s)}
.menu-list li:nth-child(2) a{--d:.06s}
.menu-list li:nth-child(3) a{--d:.12s}
.menu-list li:nth-child(4) a{--d:.18s}
.menu-list a:hover{font-style:italic;text-transform:none}
.menu-social{margin-bottom:var(--m)}
.menu .btn{align-self:start}
.menu-bottom .h4{margin-bottom:var(--xxs)}
.menu-bottom .small{color:var(--accent-300);margin-bottom:var(--s)}

/* ── Newsletter ─────────────────────────────────────────────────────── */
.newsletter{display:flex;align-items:center;gap:var(--s);max-width:22rem;border-bottom:1px solid currentColor;padding-bottom:.5rem}
.newsletter input{flex:1;min-width:0;border:0;background:none;color:inherit;font:500 .75rem/1.5 var(--sans);letter-spacing:.1em;text-transform:uppercase;padding:.25rem 0}
.newsletter input::placeholder{color:inherit;opacity:.6}
.newsletter input:focus{outline:none}
.newsletter button{line-height:0;transition:transform .45s var(--ease)}
.newsletter button:hover{transform:translateX(4px)}

/* ── Loader ─────────────────────────────────────────────────────────── */
.loader{
  position:fixed;inset:0;z-index:100;display:grid;place-content:center;gap:var(--s);justify-items:center;
  background:var(--darkest);color:var(--lightest);
  transition:transform 1s var(--ease) .15s;
}
.loader-bar{display:block;width:min(38vw,12rem);height:1px;background:rgba(245,245,245,.25);overflow:hidden}
.loader-bar i{display:block;height:100%;background:var(--lightest);transform:scaleX(0);transform-origin:left;transition:transform .5s linear}
body.ready .loader{transform:translateY(-100%)}
body.ready .loader-mark{opacity:0;transition:opacity .35s}

/* ── Hero ───────────────────────────────────────────────────────────── */
.hero{
  position:relative;background:var(--darkest);color:var(--lightest);
  padding:var(--header) var(--xl) var(--xl);
  min-height:100svh;display:grid;
}
@media (max-width:991px){.hero{padding-inline:var(--gutter);padding-bottom:var(--xxl)}}
.hero-frame{
  position:relative;overflow:hidden;display:grid;align-content:center;
  padding:var(--xxl) var(--s);isolation:isolate;
  clip-path:inset(0 0 100% 0);
}
body.ready .hero-frame{clip-path:inset(0);transition:clip-path 1.4s var(--ease) .1s}
.hero-frame>.bg-video{transform:scale(1.14);transition:transform 2.4s var(--ease) .2s}
body.ready .hero-frame>.bg-video{transform:scale(1)}
.hero-copy{position:relative;z-index:2;text-align:center;display:grid;gap:var(--s);justify-items:center}
.hero-copy .h1{max-width:64rem}
.hero-btn-l,.hero-btn-r{position:absolute;bottom:var(--s);z-index:3}
.hero-btn-l{left:var(--s)}
.hero-btn-r{right:var(--s)}
.hero-scroll{
  position:absolute;left:50%;bottom:calc(var(--xl) / 2);z-index:3;
  font:500 .625rem/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--accent-300);
  transform:translateX(-50%);animation:bob 2.6s var(--ease) infinite;
}
@keyframes bob{0%,100%{transform:translate(-50%,0);opacity:.5}50%{transform:translate(-50%,6px);opacity:1}}
@media (max-width:640px){
  .hero-frame{padding:var(--xl) var(--s) calc(var(--xxl) + var(--s))}
  .hero-btn-l,.hero-btn-r{bottom:var(--s);left:var(--s);right:var(--s);justify-content:center}
  .hero-btn-l{bottom:calc(var(--s) + 3rem)}
  .hero-scroll{display:none}
}

/* ── Intro / jumps ──────────────────────────────────────────────────── */
.intro{padding-block:var(--xxxl)}
.intro-top{display:grid;grid-template-columns:1fr 1fr;gap:var(--xl);align-items:start}
.intro-top .eyebrow{margin-bottom:var(--s)}
.intro-fig{justify-self:end;width:min(100%,20rem)}
.intro-fig img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.intro-fig figcaption{margin-top:var(--s)}
.jumps{margin-top:var(--xxxl);border-top:1px solid var(--line)}
.jump{border-bottom:1px solid var(--line)}
.jump a{display:flex;gap:var(--s);align-items:center;justify-content:space-between;padding-block:var(--l)}
.jump .h2{transition:transform .6s var(--ease)}
.jump .link svg{transition:transform .5s var(--ease)}
@media (hover:hover){
  .jump a:hover .h2{transform:translateX(var(--s))}
  .jump a:hover .link svg{transform:translate(3px,-3px)}
}
@media (max-width:860px){
  .intro-top{grid-template-columns:1fr;gap:var(--xxl)}
  .intro-fig{justify-self:stretch;width:100%}
  .jump a{flex-direction:column;align-items:flex-start;gap:var(--m)}
}

/* ── Story ──────────────────────────────────────────────────────────── */
.story{position:relative;background:var(--light-300);padding-block:var(--xxxl)}
.story-strip{position:absolute;inset:0 0 auto;height:12.5rem;background:var(--lightest)}
.story-grid{position:relative;display:grid;grid-template-columns:1fr 1.25fr;gap:var(--xl);align-items:center}
.story-fig{position:relative;aspect-ratio:3/4}
.story-fig video{position:absolute;inset:0}
.badge{
  position:absolute;top:-3.5rem;left:-3.5rem;width:7.5rem;height:7.5rem;
  animation:spin 24s linear infinite;
}
.badge text{font:500 .6875rem/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;fill:var(--darkest)}
@keyframes spin{to{transform:rotate(360deg)}}
.story-text{display:grid;gap:var(--s)}
.story-text p{max-width:30rem}
.story-text .h2{margin-block:var(--xs) var(--xs)}
.story-text .btn{justify-self:start;margin-top:var(--s)}
.statement{margin-top:var(--xxl);font-size:clamp(1.5rem,.9rem + 2.2vw,2.25rem)}
@media (max-width:860px){
  .story-grid{grid-template-columns:1fr;gap:var(--xxl)}
  .badge{top:-2.5rem;left:-1rem;width:6rem;height:6rem}
  .statement{max-width:none}
}

/* ── Work ───────────────────────────────────────────────────────────── */
.work{position:relative;padding-block:var(--xxxl);overflow:hidden}
.work .eyebrow{margin-bottom:var(--xxl)}
.marquee{position:absolute;top:38%;left:0;right:0;z-index:0;overflow:hidden;user-select:none}
.marquee-track{display:flex;width:max-content;animation:slide 44s linear infinite}
.marquee span{
  font-family:var(--serif);font-size:clamp(3rem,2rem + 6vw,7rem);line-height:1;text-transform:uppercase;
  color:var(--light-600);white-space:nowrap;
}
@keyframes slide{to{transform:translate3d(-50%,0,0)}}
.cards{position:relative;z-index:1;display:grid;grid-template-columns:repeat(3,1fr);column-gap:var(--xl)}
.card{position:relative}
.card+.card::before{content:"";position:absolute;top:0;bottom:0;left:calc(var(--xl) / -2);border-left:1px solid var(--line)}
.card-media{position:relative;display:block;overflow:hidden;aspect-ratio:3/4}
.card-media img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease),opacity .6s var(--ease)}
.card-media video{opacity:0;transition:opacity .6s var(--ease)}
.card h3{margin-top:var(--s)}
@media (hover:hover){
  .card a:hover .card-media img{opacity:0;transform:scale(1.04)}
  .card a:hover .card-media video{opacity:1}
}
@media (hover:none){
  .card-media video{opacity:1}
  .card-media img{opacity:0}
}
.work .btn{margin-top:var(--xxl)}
@media (max-width:860px){
  .cards{grid-template-columns:1fr;gap:var(--xxl)}
  .card+.card::before{display:none}
  .card+.card{border-top:1px solid var(--line);padding-top:var(--xxl)}
  .marquee{top:auto;bottom:12%}
}

/* ── Process ────────────────────────────────────────────────────────── */
.process{position:relative;overflow:hidden;background:var(--darkest);color:var(--lightest);padding-block:var(--xxxl)}
.process>.bg-video{height:130%;top:-15%;will-change:transform}
.process-grid{position:relative;z-index:2;display:grid;grid-template-columns:1fr 1.25fr;gap:0 var(--xl);align-items:start}
.process-title{grid-column:1/-1;max-width:34rem;margin-bottom:var(--xl);margin-left:auto;margin-right:auto;text-align:center}
.process-fig{position:relative;aspect-ratio:3/4}
.process-text{display:grid;gap:var(--m);padding-top:var(--l)}
.process-text .cols{columns:2;column-gap:var(--xl);orphans:2;widows:2}
.process-text p{margin-bottom:1rem;break-inside:avoid;color:#e2e2e2}
.process-text .btn{justify-self:start}
@media (max-width:860px){
  .process-grid{grid-template-columns:1fr;gap:var(--xxl)}
  .process-title{margin-bottom:var(--xl)}
  .process-text{padding-top:0}
  .process-text .cols{columns:1}
}

/* ── Quotes ─────────────────────────────────────────────────────────── */
.quotes{padding-block:var(--xxxl)}
.quotes>.eyebrow{margin-bottom:var(--l)}
.quotes-box{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--darkest)}
.quotes-media{overflow:hidden}
.quotes-track{display:flex;width:400%;height:100%;transition:transform .9s var(--ease)}
.quotes-track img{width:25%;height:100%;object-fit:cover}
.quotes-slider{position:relative;display:grid;place-items:center;padding:var(--xxl) var(--l) calc(var(--xxl) + 1rem)}
.quotes-list{display:grid;width:100%}
.quote{grid-area:1/1;text-align:center;opacity:0;transform:translateY(1rem);transition:opacity .6s var(--ease),transform .6s var(--ease);pointer-events:none}
.quote.is-active{opacity:1;transform:none;pointer-events:auto}
.quote blockquote{max-width:30rem;margin-inline:auto}
.quote .eyebrow{margin-top:var(--m);color:var(--accent)}
.q-arrow{position:absolute;top:50%;width:2.5rem;height:2.5rem;display:grid;place-items:center;margin-top:-1.25rem;color:var(--accent);transition:color .3s,transform .45s var(--ease)}
.q-arrow:hover{color:var(--darkest)}
.q-prev{left:var(--s);transform:scaleX(-1)}
.q-prev:hover{transform:scaleX(-1) translateX(3px)}
.q-next{right:var(--s)}
.q-next:hover{transform:translateX(3px)}
.q-dots{position:absolute;bottom:var(--l);display:flex;gap:.5rem}
.q-dots button{width:6px;height:6px;border-radius:50%;background:var(--accent-300);transition:background .3s,transform .3s}
.q-dots button[aria-selected=true]{background:var(--darkest);transform:scale(1.35)}
.quotes .btn{margin-top:var(--l)}
@media (max-width:860px){
  .quotes-box{grid-template-columns:1fr}
  .quotes-media{aspect-ratio:4/3}
  .quotes-slider{padding:var(--xl) var(--xxl) calc(var(--xl) + 1rem)}
  .q-prev{left:var(--xs)}.q-next{right:var(--xs)}
}

/* ── Footer ─────────────────────────────────────────────────────────── */
.footer{background:var(--darkest);color:var(--lightest)}
.cta{position:relative;margin:0 var(--gutter);overflow:hidden;display:grid;place-items:center;min-height:70svh;padding:var(--xxxl) var(--gutter)}
.cta-copy{position:relative;z-index:2;display:grid;gap:var(--s);justify-items:center;text-align:center;max-width:52ch}
.cta-copy .h2{max-width:34rem}
.cta-copy p{color:#e2e2e2}
.foot-grid{display:grid;grid-template-columns:1.1fr .9fr .8fr 1.2fr;gap:var(--xl);padding-block:var(--xxl) var(--xxl)}
.foot-logo{margin-bottom:var(--s)}
.foot-grid .eyebrow{margin-top:var(--s);margin-bottom:var(--xxs);color:var(--accent-300)}
.foot-grid a{transition:opacity .3s}
.foot-grid a:hover{opacity:.65}
.foot-grid .social{margin-top:var(--m)}
.foot-gallery{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;align-content:start;max-width:16rem}
.foot-gallery img{width:100%;height:auto;aspect-ratio:1;object-fit:cover}
.foot-nav ul{display:grid;gap:.6rem;margin-top:var(--s)}
.foot-news{align-self:start}
.foot-news .small{color:var(--accent-300);margin-bottom:var(--s)}
.foot-base{display:flex;flex-wrap:wrap;gap:var(--s);justify-content:space-between;padding-block:var(--m);border-top:1px solid #333;color:var(--accent-300)}
.foot-base ul{display:flex;gap:var(--s)}
@media (max-width:991px){
  .foot-grid{grid-template-columns:1fr 1fr;gap:var(--xxl) var(--l)}
  .cta{margin-inline:var(--gutter)}
}
@media (max-width:640px){
  .foot-grid{grid-template-columns:1fr}
  .foot-gallery{max-width:none}
  .cta{margin-inline:0;min-height:60svh}
}

/* ── Motion ─────────────────────────────────────────────────────────── */
/* Every hidden-before-reveal state is gated behind html.js, which main.js sets
   as its FIRST act. Without that gate a visitor with JS off — or a crawler, or a
   headless screenshot, or a page whose script 404s — gets a page of invisible
   text: 20 elements at opacity 0 and nothing to turn them on. The animation is
   an enhancement; the content is not. */
.js .reveal{opacity:0;transform:translate3d(0,2.5rem,0);transition:opacity .8s var(--ease),transform .9s var(--ease)}
.js .reveal.in{opacity:1;transform:none}
.split .line{display:block;overflow:hidden}
.js .split .line>span{display:block;transform:translate3d(0,105%,0);transition:transform 1s var(--ease) var(--d,0s)}
.js .split.in .line>span{transform:none}
.js .split:not(.in) .line>span{will-change:transform}
/* Same for the splash: no JS means no lift, so never cover the page in the
   first place. */
html:not(.js) #splash{display:none}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .js .reveal{opacity:1;transform:none}
  .js .split .line>span{transform:none}
  .hero-frame{clip-path:none}
}

/* ── ?noanim ────────────────────────────────────────────────────────────
   Land in the settled state. Headless capture otherwise photographs a
   half-finished reveal, and the loader curtain hides the page entirely. */
body.noanim .loader,body.noanim #splash{display:none}
body.noanim .reveal{opacity:1;transform:none}
body.noanim .split .line>span{transform:none}
body.noanim .hero-frame{clip-path:none}
body.noanim .hero-frame>.bg-video{transform:none}
body.noanim .header{transform:none}

/* Provenance line: where the page's facts came from. Quiet, but present. */
.foot-credit{padding-bottom:var(--m);color:var(--dark-300, #727272)}
.foot-credit p{color:var(--accent)}

/* Belt and braces: the intro figure is a normal-flow image. If a future call
   site ever hands it .fit, it must not escape into the viewport. */
.intro-fig img,.intro-fig video{position:static;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}

/* Footer social links: logo plus handle. A bare glyph in a footer is a guess —
   people scan for a name they recognise, so give them one. */
.social-rows{display:grid;gap:.55rem;margin-top:var(--xxs)}
.social-rows a{display:inline-flex;align-items:center;gap:.7rem;transition:opacity .3s}
.social-rows svg{flex:none;opacity:.75;transition:opacity .3s}
.social-rows a:hover svg{opacity:1}
.social-rows span{border-bottom:1px solid transparent;transition:border-color .3s}
.social-rows a:hover span{border-color:currentColor}