/* Sitefold — core
   ---------------------------------------------------------------
   Tokens, grid, typography, chrome. Everything else builds on this. */

:root{
  --paper:#f2efe8;
  --paper-tint:#e9e4d9;
  --paper-deep:#ddd6c8;
  --ink:#14120f;
  --ink-soft:#4a453d;
  --ink-faint:#8c8579;
  --line:rgba(20,18,15,.16);
  --line-soft:rgba(20,18,15,.08);
  --accent:#c1440e;
  --accent-ink:#8f3009;
  --accent-wash:#f4ddd1;

  --sans:"Instrument Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
  --display:"Instrument Serif",Georgia,"Times New Roman",serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  --gut:clamp(18px,3.2vw,44px);
  --pad:clamp(20px,5vw,72px);
  --maxw:1560px;

  --nav-h:76px;

  --ease:cubic-bezier(.19,1,.22,1);
  --ease-soft:cubic-bezier(.4,0,.2,1);
  --dur:.7s;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 20px)}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:clamp(15px,.55vw + 13px,17px);
  line-height:1.55;
  font-feature-settings:"kern","liga","calt";
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:clip;
}
body.is-locked{overflow:hidden}
img,svg,video,canvas{display:block;max-width:100%}
img{height:auto}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;padding:0;cursor:pointer}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,p,figure,blockquote{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
hr{border:0;border-top:1px solid var(--line);margin:0}
::selection{background:var(--accent);color:var(--paper)}

:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
  border-radius:1px;
}
.skip{
  position:fixed;top:8px;left:8px;z-index:1000;
  padding:12px 18px;background:var(--ink);color:var(--paper);
  font:500 13px/1 var(--sans);letter-spacing:.02em;
  transform:translateY(-160%);transition:transform .3s var(--ease-soft);
}
.skip:focus-visible{transform:none}
.vh{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ---------- type ---------- */
.d1,.d2,.d3{font-family:var(--display);font-weight:400;letter-spacing:-.018em;line-height:.92}
.d1{font-size:clamp(3.1rem,11.6vw,11.4rem)}
.d2{font-size:clamp(2.6rem,7.4vw,6.6rem);line-height:.95}
.d3{font-size:clamp(1.9rem,3.9vw,3.5rem);line-height:1.02}
.d1 em,.d2 em,.d3 em{font-style:italic;letter-spacing:-.03em}

.lede{
  font-size:clamp(1.06rem,1.35vw,1.42rem);
  line-height:1.45;letter-spacing:-.012em;color:var(--ink-soft);
  max-width:34ch;
}
.body-lg{font-size:clamp(1rem,.9vw,1.12rem);line-height:1.6;color:var(--ink-soft)}
.muted{color:var(--ink-soft)}

.eyebrow{
  font:500 11px/1 var(--mono);
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint);
  display:flex;align-items:baseline;gap:.7em;
}
.eyebrow::before{
  content:"";width:26px;height:1px;background:currentColor;
  display:inline-block;transform:translateY(-3px);flex:none;
}
.eyebrow.plain::before{display:none}
.num{font:400 11px/1 var(--mono);letter-spacing:.14em;color:var(--ink-faint)}

/* ---------- layout ---------- */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}
.wrap-wide{width:100%;padding-inline:var(--pad)}
.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gut)}
section{position:relative}
.sec{padding-block:clamp(72px,10vw,168px)}
.sec-tight{padding-block:clamp(52px,6vw,92px)}
.rule{height:1px;background:var(--line);width:100%}
.rule-accent{height:1px;background:var(--accent);width:100%}

.sec-head{
  display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gut);
  align-items:end;padding-bottom:clamp(28px,3.4vw,56px);
}
.sec-head .eyebrow{grid-column:1/4}
.sec-head h2{grid-column:4/10}
.sec-head .sec-aside{grid-column:10/13;padding-bottom:.5em}
@media (max-width:900px){
  .sec-head{gap:16px}
  .sec-head .eyebrow,.sec-head h2,.sec-head .sec-aside{grid-column:1/-1}
}

/* ---------- buttons ---------- */
.btn{
  --bg:var(--ink);--fg:var(--paper);
  position:relative;display:inline-flex;align-items:center;gap:.72em;
  padding:1.02em 1.5em;background:var(--bg);color:var(--fg);
  font-size:.86rem;font-weight:500;letter-spacing:.01em;
  border:1px solid var(--bg);overflow:hidden;isolation:isolate;
  transition:color .4s var(--ease-soft),border-color .4s var(--ease-soft);
  will-change:transform;
}
.btn::after{
  content:"";position:absolute;inset:0;z-index:-1;background:var(--accent);
  transform:translateY(101%);transition:transform .5s var(--ease);
}
.btn:hover::after,.btn:focus-visible::after{transform:translateY(0)}
.btn:hover,.btn:focus-visible{border-color:var(--accent);color:#fff}
.btn .arw{transition:transform .45s var(--ease)}
.btn:hover .arw{transform:translateX(4px)}
.btn.ghost{--bg:transparent;--fg:var(--ink);border-color:var(--line)}
.btn.ghost:hover,.btn.ghost:focus-visible{color:#fff}
.btn.on-ink{--bg:var(--paper);--fg:var(--ink)}
.btn.on-ink.ghost{--bg:transparent;--fg:var(--paper);border-color:rgba(242,239,232,.3)}

/* underline link */
.ul{position:relative;display:inline-block;padding-bottom:2px}
.ul::after{
  content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:currentColor;
  transform-origin:right;transform:scaleX(0);transition:transform .5s var(--ease);
}
.ul:hover::after,.ul:focus-visible::after{transform-origin:left;transform:scaleX(1)}
.ul.on::after{transform:scaleX(1)}

/* arrow glyph */
.arw{display:inline-block;width:.72em;height:.72em;flex:none}

/* ---------- nav ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:90;
  height:var(--nav-h);display:flex;align-items:center;
  transition:transform .55s var(--ease),background-color .4s var(--ease-soft),border-color .4s;
  border-bottom:1px solid transparent;
}
.nav.solid{background:color-mix(in srgb,var(--paper) 86%,transparent);backdrop-filter:blur(14px) saturate(1.1);border-bottom-color:var(--line-soft)}
.nav.hide{transform:translateY(-102%)}
.nav-in{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad);display:flex;align-items:center;justify-content:space-between;gap:24px}

.mark{display:inline-flex;align-items:center;gap:.55em;font-family:var(--display);font-size:1.42rem;letter-spacing:-.02em;line-height:1}
.mark svg{width:19px;height:19px;overflow:visible}
.mark .fold-a,.mark .fold-b{transition:transform .55s var(--ease)}
.mark:hover .fold-b{transform:translate(1.5px,-1.5px)}
.mark:hover .fold-a{transform:translate(-1px,1px)}

.nav-links{display:flex;align-items:center;gap:clamp(14px,1.9vw,30px)}
.nav-links a{
  font-size:.83rem;letter-spacing:.005em;position:relative;padding:6px 0;color:var(--ink-soft);
  transition:color .3s var(--ease-soft);
}
.nav-links a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--ink);
  transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease);
}
.nav-links a:hover,.nav-links a:focus-visible{color:var(--ink)}
.nav-links a:hover::after,.nav-links a:focus-visible::after{transform:scaleX(1);transform-origin:left}
.nav-links a[aria-current="page"]{color:var(--ink)}
.nav-links a[aria-current="page"]::after{transform:scaleX(1);background:var(--accent)}
.nav-cta{display:flex;align-items:center;gap:18px}
.nav .btn{padding:.72em 1.15em;font-size:.8rem}
@media (max-width:1080px){.nav-links,.nav-cta .btn{display:none}}

.burger{
  display:none;width:46px;height:46px;margin-right:-10px;
  align-items:center;justify-content:center;flex-direction:column;gap:5px;
}
.burger span{display:block;width:22px;height:1.5px;background:var(--ink);transition:transform .5s var(--ease),opacity .3s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(3.25px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){transform:translateY(-3.25px) rotate(-45deg)}
@media (max-width:1080px){.burger{display:flex}}

/* fullscreen menu */
.menu{
  position:fixed;inset:0;z-index:89;background:var(--ink);color:var(--paper);
  clip-path:inset(0 0 100% 0);transition:clip-path .85s var(--ease);
  display:flex;flex-direction:column;padding-top:var(--nav-h);
  visibility:hidden;
}
.menu.open{clip-path:inset(0 0 0 0);visibility:visible}
.menu-in{flex:1;display:flex;flex-direction:column;justify-content:space-between;padding:clamp(24px,5vw,48px) var(--pad) clamp(28px,4vw,44px);overflow-y:auto}
.menu-list li{overflow:hidden;border-bottom:1px solid rgba(242,239,232,.14)}
.menu-list li:first-child{border-top:1px solid rgba(242,239,232,.14)}
.menu-list a{
  display:flex;align-items:baseline;gap:1em;padding:clamp(10px,1.8vw,18px) 0;
  font-family:var(--display);font-size:clamp(2.1rem,8.6vw,4.6rem);line-height:1;letter-spacing:-.02em;
  transform:translateY(105%);transition:transform .8s var(--ease),color .3s;
}
.menu.open .menu-list a{transform:translateY(0)}
.menu-list a .num{color:rgba(242,239,232,.4);font-size:11px}
.menu-list a:hover,.menu-list a:focus-visible{color:var(--accent)}
.menu-foot{display:flex;flex-wrap:wrap;gap:14px 32px;justify-content:space-between;align-items:end;padding-top:32px;opacity:0;transition:opacity .5s .35s}
.menu.open .menu-foot{opacity:1}
.menu-foot p{font-size:.9rem;color:rgba(242,239,232,.6);max-width:30ch}
.menu.open ~ .nav .burger span,.nav.menu-open .burger span{background:var(--paper)}
.nav.menu-open .mark{color:var(--paper)}

/* ---------- page transition ---------- */
.curtain{
  position:fixed;inset:0;z-index:200;pointer-events:none;background:var(--ink);
  transform:translateY(100%);
}
.curtain.in{animation:curtain-in .62s var(--ease-soft) forwards}
.curtain.out{animation:curtain-out .72s var(--ease) forwards}
@keyframes curtain-in{from{transform:translateY(100%)}to{transform:translateY(0)}}
@keyframes curtain-out{from{transform:translateY(0)}to{transform:translateY(-100%)}}

/* ---------- reveals ---------- */
[data-rv]{--rv-d:0ms}
[data-rv="up"]{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease) var(--rv-d),transform .9s var(--ease) var(--rv-d)}
[data-rv="fade"]{opacity:0;transition:opacity 1.1s var(--ease) var(--rv-d)}
[data-rv="clip"]{clip-path:inset(0 0 100% 0);transition:clip-path 1.1s var(--ease) var(--rv-d)}
[data-rv="scale"]{opacity:0;transform:scale(1.045);transition:opacity 1s var(--ease) var(--rv-d),transform 1.3s var(--ease) var(--rv-d)}
[data-rv].seen{opacity:1;transform:none;clip-path:inset(0 0 0 0)}

/* line-by-line text reveal */
.rv-lines .ln{display:block;overflow:hidden}
.rv-lines .ln > span{display:block;transform:translateY(102%);transition:transform 1.05s var(--ease) var(--d,0ms)}
.rv-lines.seen .ln > span{transform:translateY(0)}
/* word stagger */
.rv-words .wd{display:inline-block;overflow:hidden;vertical-align:top}
.rv-words .wd > span{display:inline-block;transform:translateY(103%);transition:transform .95s var(--ease) var(--d,0ms)}
.rv-words.seen .wd > span{transform:translateY(0)}

/* ---------- cursor ---------- */
.cursor{
  position:fixed;top:0;left:0;z-index:150;pointer-events:none;
  width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-radius:50%;
  background:var(--accent);mix-blend-mode:normal;
  transition:width .35s var(--ease),height .35s var(--ease),margin .35s var(--ease),background-color .35s,opacity .3s;
  opacity:0;
}
.cursor.on{opacity:1}
.cursor.big{width:74px;height:74px;margin:-37px 0 0 -37px;background:var(--accent)}
.cursor .cur-lb{
  position:absolute;inset:0;display:grid;place-items:center;color:var(--paper);
  font:500 10px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;
  opacity:0;transition:opacity .25s;text-align:center;
}
.cursor.big .cur-lb{opacity:1}
@media (hover:none),(pointer:coarse){.cursor{display:none}}

/* ---------- scroll progress ---------- */
.prog{position:fixed;top:0;left:0;height:2px;background:var(--accent);z-index:95;width:0;will-change:width}

/* ---------- footer ---------- */
.foot{background:var(--ink);color:var(--paper);padding-top:clamp(56px,7vw,110px);overflow:hidden}
.foot a{color:rgba(242,239,232,.66);transition:color .3s}
.foot a:hover,.foot a:focus-visible{color:var(--paper)}
.foot-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gut);padding-bottom:clamp(44px,5vw,80px)}
.foot-lede{grid-column:1/6;font-family:var(--display);font-size:clamp(1.55rem,2.6vw,2.5rem);line-height:1.08;letter-spacing:-.02em}
.foot-nav{grid-column:7/10}
.foot-meta{grid-column:10/13}
.foot h3{font:500 11px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:rgba(242,239,232,.42);margin-bottom:18px}
.foot-nav ul{display:grid;grid-template-columns:1fr 1fr;gap:8px 20px}
.foot-nav li a,.foot-meta a{font-size:.95rem}
@media (max-width:900px){
  .foot-lede{grid-column:1/-1}
  .foot-nav{grid-column:1/7;margin-top:36px}
  .foot-meta{grid-column:7/13;margin-top:36px}
}
.wordmark{
  display:block;width:100%;padding-bottom:clamp(10px,1.4vw,22px);
  color:var(--paper);
}
.wordmark svg{width:100%;height:auto;overflow:visible}
.wordmark .lt{transform:translateY(112%);transition:transform 1.1s var(--ease) var(--d,0ms)}
.wordmark.seen .lt{transform:translateY(0)}
.foot-base{display:flex;flex-wrap:wrap;gap:10px 28px;justify-content:space-between;
  border-top:1px solid rgba(242,239,232,.14);padding:22px 0 26px;
  font:400 11px/1.6 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:rgba(242,239,232,.44)}

/* ---------- shared bits ---------- */
.tag{
  display:inline-flex;align-items:center;gap:.5em;padding:.42em .72em;border:1px solid var(--line);
  font:500 10px/1 var(--mono);letter-spacing:.13em;text-transform:uppercase;color:var(--ink-soft);
  white-space:nowrap;
}
.tag.accent{border-color:var(--accent);color:var(--accent)}
.concept-flag{
  display:inline-flex;align-items:center;gap:.55em;
  font:500 10px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--accent);
}
.concept-flag::before{content:"";width:5px;height:5px;background:var(--accent);border-radius:50%;flex:none}

.marq{display:flex;overflow:hidden;user-select:none;mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.marq-run{display:flex;flex:none;gap:var(--mg,3rem);padding-right:var(--mg,3rem);animation:marq var(--ms,38s) linear infinite}
.marq:hover .marq-run{animation-play-state:paused}
@keyframes marq{to{transform:translateX(-100%)}}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important;
  }
  [data-rv]{opacity:1!important;transform:none!important;clip-path:none!important}
  .rv-lines .ln>span,.rv-words .wd>span,.wordmark .lt{transform:none!important}
  .menu{transition:none}
  .cursor{display:none}
}

.ul .arw{margin-left:.4em}

/* pages that open on a dark full-bleed hero */
.nav-light .nav:not(.solid) .mark,
.nav-light .nav:not(.solid) .nav-links a{color:rgba(244,240,232,.86)}
.nav-light .nav:not(.solid) .nav-links a::after{background:var(--paper)}
.nav-light .nav:not(.solid) .burger span{background:rgba(244,240,232,.9)}
.nav-light .nav:not(.solid) .btn{--bg:rgba(244,240,232,.95);--fg:#14120f;border-color:rgba(244,240,232,.95)}

/* ---------- currency switcher ---------- */
.cur{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px}
.cur-lab{font:500 10px/1 var(--mono);letter-spacing:.15em;text-transform:uppercase;color:var(--ink-faint)}
.cur-seg{display:flex;flex-wrap:wrap;border:1px solid var(--line);padding:3px;gap:2px}
.cur-seg button{
  padding:.5em .78em;font:500 11px/1 var(--mono);letter-spacing:.09em;color:var(--ink-faint);
  transition:background-color .3s var(--ease-soft),color .3s var(--ease-soft);
}
.cur-seg button:hover{color:var(--ink)}
.cur-seg button.on{background:var(--ink);color:var(--paper)}
.cur-note{font:400 11px/1.6 var(--mono);letter-spacing:.05em;color:var(--ink-faint);max-width:52ch}
.on-ink-block .cur-seg{border-color:rgba(242,239,232,.25)}
.on-ink-block .cur-seg button{color:rgba(242,239,232,.55)}
.on-ink-block .cur-seg button:hover{color:var(--paper)}
.on-ink-block .cur-seg button.on{background:var(--paper);color:var(--ink)}
.on-ink-block .cur-lab,.on-ink-block .cur-note{color:rgba(242,239,232,.5)}

/* ---------- embed mode ----------
   The same pages, shown inside a frame elsewhere on the site. Real pages,
   not pictures of pages: the chrome is hidden and everything else stays. */
.embed .nav,.embed .menu,.embed .curtain,.embed .prog,.embed .skip,.embed .foot,.embed .cursor{display:none!important}
.embed body{background:var(--paper)}
.embed .ph,.embed .hero{padding-top:clamp(28px,5vh,64px)}
.embed [data-rv],.embed .rv-lines .ln>span,.embed .rv-words .wd>span{opacity:1!important;transform:none!important;clip-path:none!important}
.embed ::-webkit-scrollbar{width:0;height:0}
.embed{scrollbar-width:none}

/* frames holding a live page */
.live{position:relative;background:var(--paper);overflow:hidden}
.live iframe{position:absolute;top:0;left:0;border:0;transform-origin:0 0;background:var(--paper)}
.live.static iframe{pointer-events:none}
.live-badge{
  position:absolute;right:10px;bottom:10px;z-index:3;
  font:500 9px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;
  background:color-mix(in srgb,var(--ink) 86%,transparent);color:var(--paper);padding:.55em .7em;
  pointer-events:none;
}

/* ---------- DailyOS lockup ---------- */
.parent{
  display:flex;align-items:center;gap:.55em;margin-left:clamp(12px,1.6vw,22px);padding-left:clamp(12px,1.6vw,22px);
  border-left:1px solid var(--line);color:var(--ink-faint);
  font:500 9.5px/1.35 var(--mono);letter-spacing:.13em;text-transform:uppercase;white-space:nowrap;
  transition:color .35s var(--ease-soft);
}
.parent b{font-weight:500;color:var(--ink-soft);transition:color .35s var(--ease-soft)}
.nav:hover .parent,.nav:hover .parent b{color:var(--ink)}
.dos-mark{width:15px;height:15px;flex:none;overflow:visible}
.parent .dos-mark{transition:transform .6s var(--ease)}
.nav:hover .parent .dos-mark{transform:rotate(-8deg)}
@media (max-width:1240px){.parent span{display:none}}
@media (max-width:1080px){.parent{margin-left:10px;padding-left:10px}}
.nav-light .nav:not(.solid) .parent,.nav-light .nav:not(.solid) .parent b{color:rgba(244,240,232,.7)}
.menu-parent{color:rgba(242,239,232,.45)}
.foot-parent{display:inline-flex;align-items:center;gap:.7em}
.foot-parent .dos-mark{width:14px;height:14px;color:rgba(242,239,232,.6)}
.foot-parent b{font-weight:500;color:rgba(242,239,232,.72)}