/* site.css — the shared stylesheet for the three pages.
   HOME      the Ledger
   PORTFOLIO the Broadsheet, with the device viewer
   ABOUT     the Evidence Sheet
   One typeface: Fraunces, full variable axis. Spectral survives in exactly one
   place, inside the drawn browser window, because that is what the real
   publications are set in and the frame is showing what the page looks like. */

:root{
  --serif:'Fraunces',Georgia,serif;--display:'Fraunces',Georgia,serif;
  --sans:'Fraunces',Georgia,serif;--ui:'Fraunces',Georgia,serif;
  --ease:cubic-bezier(.16,1,.3,1);
  --paper:#f4efe3;--pink:#1c1914;--psoft:#4a4438;--pfaint:#8b8474;--prule:#d2ccbc;--pacc:#a8442f;
  --dv-line:rgba(244,241,234,.16);--dv-mute:#9a958a;--dv-ink:#f3ede1;
}
html,body{font-family:var(--serif);font-variation-settings:'SOFT' 0,'WONK' 0}
body{background:var(--bg);color:var(--ink)}
.sheet{max-width:1240px;margin:0 auto;padding:0 clamp(20px,4vw,58px)}
.lab{font-size:10px;letter-spacing:.3em;text-transform:uppercase;font-weight:500;color:var(--faint)}

/* ------------------------------------------------------------- site nav */
.topnav{position:fixed;top:0;right:0;z-index:85;padding:22px clamp(20px,4vw,58px);
  mix-blend-mode:difference;display:flex;gap:26px}
.topnav a{font-family:var(--sans);font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  font-weight:500;color:#f3ede1;transition:opacity .25s}
.topnav a:hover{opacity:.55}
.topnav a[aria-current="page"]{opacity:.4}
.topnav .hm{margin-right:auto}
.topbar{position:fixed;top:0;left:0;right:0;z-index:85;display:flex;align-items:center;
  justify-content:space-between;padding:22px clamp(20px,4vw,58px);mix-blend-mode:difference;
  font-size:11px;letter-spacing:.22em;text-transform:uppercase;font-weight:500;color:#f3ede1}
.topbar a{color:inherit;transition:opacity .25s}
.topbar a:hover{opacity:.55}
.topbar .r{display:flex;gap:26px}
.topbar .r span{opacity:.4}

/* ==================================================== HOME · the Ledger */
.stack{position:relative;padding:clamp(60px,9vw,140px) 0;z-index:2;background:var(--bg)}
.fieldwrap{position:fixed;inset:0;z-index:0;pointer-events:none}
.field{position:absolute;inset:0;opacity:0;transition:opacity 1.1s var(--ease);
  background:radial-gradient(78% 62% at 50% 46%,color-mix(in srgb,var(--tone) 26%,transparent),transparent 72%)}
.field.on{opacity:1}
.list{position:relative;z-index:1;margin:0;padding:0;list-style:none;
  display:flex;flex-direction:column;align-items:center;text-align:center}
.list li{overflow:hidden;width:100%}
.item{--o:.5;display:block;padding:clamp(8px,1vw,14px) 0;color:var(--ink);opacity:var(--o);
  transition:opacity .4s cubic-bezier(.25,.46,.45,.94)}
.item:hover,.item.on,.item:focus-visible{--o:1;transition-duration:.07s}
.item .nm{display:block;font-weight:300;font-size:clamp(30px,6.2vw,74px);line-height:1.06;
  letter-spacing:-.02em;transition:color .5s var(--ease)}
.item:hover .nm,.item.on .nm{color:var(--tone)}
.item .nm::after{content:"";display:block;height:1px;background:var(--tone);margin:.14em auto 0;
  width:min(320px,60%);transform:scaleX(0);transform-origin:center;
  transition:transform .7s cubic-bezier(.85,0,.15,1)}
.item:hover .nm::after,.item.on .nm::after{transform:scaleX(1)}
.item .one{display:block;margin:6px auto 0;font-size:clamp(13px,1.35vw,16px);font-weight:400;
  line-height:1.5;color:var(--soft);max-width:46ch;opacity:0;max-height:0;
  transition:opacity .5s var(--ease),max-height .5s var(--ease)}
.item:hover .one,.item.on .one{opacity:1;max-height:80px}

/* ============================================== PORTFOLIO · the Broadsheet */
.paper{background:var(--paper);color:var(--pink);position:relative;z-index:2}
.paper ::selection{background:var(--pacc);color:#fff}
.folio2{display:flex;flex-wrap:wrap;gap:10px 26px;align-items:baseline;justify-content:space-between;
  padding:14px 0;border-bottom:2px solid var(--pink);font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;font-weight:600;color:var(--psoft)}
.lede{font-weight:200;font-size:clamp(30px,4.6vw,62px);line-height:1.06;letter-spacing:-.035em;
  color:var(--pink);margin:clamp(28px,3.4vw,48px) 0 0;max-width:18ch}
.lede em{font-style:normal;color:var(--pacc)}
.contents{padding:clamp(34px,4.4vw,64px) 0 clamp(20px,3vw,40px)}
.ent{display:grid;grid-template-columns:52px minmax(0,1fr) minmax(0,.85fr) 120px;
  gap:clamp(12px,2vw,30px);align-items:baseline;padding:16px 0;border-top:1px solid var(--prule);
  transition:background .4s cubic-bezier(.25,.46,.45,.94)}
.ent:hover{background:rgba(28,25,20,.04);transition-duration:.07s}
@media (max-width:820px){.ent{grid-template-columns:36px minmax(0,1fr)}.ent .abs,.ent .ver{grid-column:2}}
.ent .no{font-size:11px;letter-spacing:.14em;font-weight:600;color:var(--pfaint)}
.ent h3{margin:0;font-weight:400;font-size:clamp(23px,2.9vw,38px);line-height:1.02;
  letter-spacing:-.038em;color:var(--pink);transition:color .07s}
.ent:hover h3{color:var(--tone)}
.ent .abs{font-size:14px;line-height:1.55;color:var(--psoft)}
.ent .ver{font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;
  color:var(--pfaint);text-align:right}

.art{padding:clamp(46px,6vw,96px) 0;border-top:1px solid var(--prule);scroll-margin-top:20px}
.art .hd{display:grid;grid-template-columns:minmax(0,.32fr) minmax(0,1fr);gap:clamp(18px,3vw,52px);
  align-items:baseline;margin-bottom:clamp(22px,3vw,40px)}
@media (max-width:820px){.art .hd{grid-template-columns:1fr;gap:10px}}
/* SCOPED TO .hd ON PURPOSE. `.art h2` scores (0,1,1) and so does `.tr h2`
   inside the drawn phone, and this stylesheet loads last, so an unscoped rule
   silently restyles the app's own card heading and everything in the phone
   wraps. Rule 11 in CLAUDE.md: ask what else writes the property. */
.art .hd h2{margin:0;font-weight:200;font-size:clamp(34px,5.4vw,78px);line-height:.92;
  letter-spacing:-.045em;color:var(--pink)}
.art .vtag{display:inline-block;margin-top:14px;font-size:10.5px;letter-spacing:.22em;
  text-transform:uppercase;font-weight:700;color:var(--pacc);border:1px solid var(--pacc);padding:5px 10px}
.art .body{max-width:60ch;margin-bottom:clamp(26px,3.4vw,48px)}
.art .body p{font-size:16.5px;line-height:1.62;color:var(--psoft);margin:0 0 1.05em}
.art .body p.big{font-size:20px;line-height:1.45;color:var(--pink)}
.art .body p:last-of-type{margin-bottom:0}
.art .kick{display:flex;flex-wrap:wrap;gap:6px;margin-top:20px}
.art .kick i{font-style:normal;font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  font-weight:600;padding:6px 10px;border:1px solid var(--prule);color:var(--pfaint)}
.art .open{display:inline-block;margin-top:18px;font-size:11px;letter-spacing:.24em;
  text-transform:uppercase;font-weight:600;color:var(--pacc);border-bottom:2px solid currentColor;
  padding-bottom:3px}
.art .stagewrap{background:#0d0c10;padding:clamp(18px,2.4vw,32px);border:1px solid rgba(28,25,20,.16)}
.dv-note{margin:14px 0 0;font-size:11.5px;line-height:1.5;color:var(--dv-mute)}

/* ================================================ ABOUT · the Evidence Sheet */
.abtop{display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1fr);gap:clamp(24px,4vw,72px);
  align-items:center;padding:clamp(84px,11vh,132px) 0 clamp(28px,3.4vw,50px)}
@media (max-width:860px){.abtop{grid-template-columns:1fr}}
/* The studio shot is a cut-out on white, so it gets no plate and no rectangle:
   it floats over a soft field, which means there is no visible box and no
   background to be wrong. Full colour, full head, nothing clipped. */
.abtop figure{margin:0;position:relative;max-width:400px}
.abtop figure::before{content:"";position:absolute;inset:-14% -12% -6%;z-index:0;
  background:radial-gradient(56% 50% at 50% 42%,rgba(224,147,90,.20),rgba(212,96,79,.07) 52%,transparent 74%)}
.abtop img{position:relative;z-index:1;display:block;width:100%;height:auto;
  -webkit-mask-image:linear-gradient(180deg,#000 78%,rgba(0,0,0,.55) 93%,transparent);
  mask-image:linear-gradient(180deg,#000 78%,rgba(0,0,0,.55) 93%,transparent)}
.abtop h1{margin:12px 0 0;font-weight:200;font-size:clamp(46px,8.4vw,124px);line-height:.86;
  letter-spacing:-.046em;color:var(--ink)}
.abtop h1 em{font-style:normal;color:var(--accent)}
.abtop .lead{margin:clamp(20px,2.6vw,34px) 0 0;font-size:clamp(18px,2vw,26px);line-height:1.34;
  letter-spacing:-.02em;color:var(--ink);font-weight:300;max-width:24ch}

.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2.4vw,38px);
  padding:clamp(30px,4vw,58px) 0;border-top:1px solid var(--line)}
@media (max-width:1000px){.grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.grid{grid-template-columns:1fr}}
.col h3{margin:0 0 12px;font-size:9.5px;letter-spacing:.26em;text-transform:uppercase;
  font-weight:500;color:var(--accent)}
.col .e{display:block;padding:8px 0;border-bottom:1px solid rgba(243,237,225,.06)}
.col .e:last-child{border-bottom:0}
.col .e b{display:block;font-weight:400;font-size:15px;letter-spacing:-.015em;color:var(--ink);line-height:1.25}
.col .e span{display:block;margin-top:3px;font-size:12.5px;line-height:1.45;color:var(--muted)}
.col .e em{display:block;margin-top:3px;font-style:normal;font-size:9.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--faint)}
.col a.e:hover b{color:var(--accent)}

.figs{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:1px;
  background:var(--line);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.figs div{background:var(--bg);padding:clamp(20px,2.6vw,34px) clamp(12px,1.6vw,20px)}
.figs b{display:block;font-weight:200;font-size:clamp(30px,4vw,54px);line-height:.865;
  letter-spacing:-.035em;color:var(--ink)}
.figs div:nth-child(3n+1) b{color:var(--accent)}
.figs span{display:block;margin-top:10px;font-size:9.5px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--faint)}

.builds{padding:clamp(30px,4vw,58px) 0;border-top:1px solid var(--line)}
.brow{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr) 150px 92px;
  gap:clamp(12px,2vw,28px);align-items:baseline;padding:12px 0;
  border-top:1px solid rgba(243,237,225,.07);font-size:14px}
.brow:first-of-type{border-top:0}
@media (max-width:900px){.brow{grid-template-columns:minmax(0,1fr) 100px}
  .brow .bd{grid-column:1/-1;order:3}.brow .bs{order:2;text-align:right}}
.brow b{font-weight:400;letter-spacing:-.02em;color:var(--ink);font-size:16px}
.brow .bd{color:var(--muted);font-size:13px;line-height:1.5}
.brow .bv{font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:600;color:var(--accent)}
.brow .bs{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--faint);text-align:right}

.deferred{padding:clamp(40px,5.5vw,84px) 0;border-top:1px solid var(--line);
  display:grid;grid-template-columns:minmax(0,.32fr) minmax(0,1fr);gap:clamp(20px,4vw,60px)}
@media (max-width:820px){.deferred{grid-template-columns:1fr}}
.deferred p{margin:0 0 1.1em;font-size:clamp(16px,1.5vw,20px);line-height:1.6;color:var(--soft);max-width:36em}
.deferred p:last-child{margin-bottom:0}
.deferred b{font-weight:500;color:var(--ink)}

/* --------------------------------------------------------------- the exit */
.doors{border-top:1px solid var(--line)}
.door{position:relative;display:block;padding:clamp(46px,6vw,88px) 0;border-bottom:1px solid var(--line);
  overflow:hidden;--tone:var(--accent)}
.door .glow{position:absolute;inset:0;pointer-events:none;opacity:0;
  transition:opacity .7s cubic-bezier(.23,1,.32,1);
  background:radial-gradient(58% 130% at 12% 50%,color-mix(in srgb,var(--tone) 16%,transparent),transparent 68%)}
.door.b .glow{background:radial-gradient(58% 130% at 88% 50%,color-mix(in srgb,var(--tone) 15%,transparent),transparent 68%)}
.door:hover .glow{opacity:1}
.door .k{position:relative;z-index:1;font-size:10.5px;letter-spacing:.3em;text-transform:uppercase;
  font-weight:500;color:var(--tone)}
.door h2{position:relative;z-index:1;font-weight:200;font-size:clamp(44px,10vw,142px);line-height:.86;
  letter-spacing:-.05em;color:var(--ink);margin:16px 0 0;
  transition:transform .7s cubic-bezier(.23,1,.32,1),color .5s cubic-bezier(.23,1,.32,1)}
.door:hover h2{color:var(--tone);transform:translateX(clamp(6px,1.2vw,22px))}
.door .dek{position:relative;z-index:1;font-size:clamp(15px,1.6vw,19px);color:var(--soft);line-height:1.56;
  max-width:46ch;margin:20px 0 0}
.door .go{position:relative;z-index:1;display:inline-flex;align-items:center;gap:11px;margin-top:24px;
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;font-weight:500;color:var(--tone)}
.door .go i{font-style:normal;transition:transform .5s cubic-bezier(.23,1,.32,1)}
.door:hover .go i{transform:translateX(7px)}
.door .roster{position:relative;z-index:1;display:flex;flex-wrap:wrap;margin:26px 0 0;
  font-size:10.5px;letter-spacing:.19em;text-transform:uppercase;font-weight:500;color:var(--faint);
  line-height:1.7}
.door .roster span::after{content:"\00a0\00b7\00a0";color:var(--line2)}
.door .roster span:last-child::after{content:""}
.door.b .in{display:grid;grid-template-columns:minmax(0,clamp(120px,15vw,190px)) minmax(0,1fr);
  gap:clamp(24px,3.6vw,56px);align-items:center}
.door.b figure{margin:0;position:relative}
.door.b figure::before{content:"";position:absolute;inset:-16% -14% -4%;
  background:radial-gradient(56% 50% at 50% 42%,rgba(224,147,90,.2),transparent 74%)}
.door.b img{position:relative;display:block;width:100%;height:auto;
  -webkit-mask-image:linear-gradient(180deg,#000 76%,transparent);
  mask-image:linear-gradient(180deg,#000 76%,transparent)}
@media (max-width:680px){.door.b .in{grid-template-columns:1fr;gap:22px}.door.b figure{max-width:190px}}

.foot{padding:30px 0 46px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;
  border-top:1px solid var(--line)}
.paper .foot{border-top:2px solid var(--pink);color:var(--pfaint)}
.paper .foot .lab{color:var(--pfaint)}


/* reveal — the hidden state applies only when JS is running, and anything
   already on screen reveals synchronously rather than waiting on a callback
   that can queue behind a busy main thread. */
.rv{transition:opacity .9s var(--ease),transform .9s var(--ease)}
html.js .rv{opacity:0;transform:translateY(16px)}
html.js .rv.in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .field{transition-duration:2.4s}
  .item .nm::after{transition-duration:.3s}
  .ent{transition-duration:.2s}
  html.js .rv{transform:none}
  .rv{transition-duration:.4s}
  .door h2,.door .go i{transition-duration:.25s}
}