:root{
  --paper:#EEF2EC; --ink:#2B2D2B; --sage:#7A9E7E; --sage-soft:#A3B5A0; --text:#333333; --hair:#C9D2C6; --ink-text:#D5DDD3; --ground:#E1E8DE;
  --serif:'Instrument Serif','Times New Roman',serif; --sans:'Familjen Grotesk','Helvetica Neue',Arial,sans-serif; --mono:'JetBrains Mono',ui-monospace,monospace;
  --ease:cubic-bezier(.77,0,.18,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ground);color:var(--text);font-family:var(--sans);-webkit-font-smoothing:antialiased}
img{display:block}
a{color:var(--sage)}
.page{max-width:440px;margin:0 auto;background:var(--paper);min-height:100vh;box-shadow:0 0 60px rgba(43,45,43,.08);overflow:clip;position:relative}
.pad{padding-left:20px;padding-right:20px}
.serif{font-family:var(--serif);font-weight:400}
.label{margin:0;font-size:13px;letter-spacing:.02em;color:var(--sage);font-weight:500}
.rule{border-top:1px solid var(--ink);transform-origin:left center}
h1,h2,h3{text-wrap:balance}

/* ---- fixed chapter counter ---- */
.chapter{position:fixed;top:14px;right:max(14px,calc(50% - 206px));z-index:20;width:44px;height:44px;border:1px solid var(--ink);background:var(--paper);display:grid;place-items:center;overflow:hidden;font-family:var(--serif);font-size:22px;color:var(--ink);opacity:0;transition:opacity .4s}
.chapter.on{opacity:1}
.chapter span{display:block;line-height:1}
.chapter.flip span{animation:flip .5s var(--ease)}
@keyframes flip{0%{transform:translateY(-120%)}100%{transform:translateY(0)}}

/* ---- top bar ---- */
.bar{display:flex;justify-content:space-between;align-items:center;margin:0 20px;padding:14px 56px 10px 0;border-bottom:1px solid var(--ink);font-size:12px;color:var(--ink);position:relative}
.bar::before{content:"";position:absolute;left:0;right:0;top:0;border-top:3px solid var(--ink);transform-origin:left;animation:draw .9s .1s var(--ease) both}
.bar>span:first-child{font-family:var(--serif);font-size:17px}
.bar>span:last-child{color:var(--sage)}
@keyframes draw{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* ---- hero ---- */
.hero{position:relative;margin-top:16px}
.hero-photo{overflow:hidden;height:min(120vw,470px)}
.hero-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 22%;animation:kb 14s cubic-bezier(.2,.6,.2,1) both}
@keyframes kb{from{transform:scale(1.14)}to{transform:scale(1)}}
.name{position:relative;margin:-96px 44px 0 0;background:var(--paper);padding:22px 20px 0}
.name .line{overflow:hidden}
.name .line>span{display:block;font-family:var(--serif);font-size:clamp(64px,21vw,84px);line-height:.88;letter-spacing:-.02em;color:var(--ink);animation:rise .9s var(--ease) both}
.name .line:nth-child(1)>span{animation-delay:.25s}
.name .line:nth-child(2)>span{animation-delay:.4s;font-style:italic;color:var(--sage)}
.name .line:nth-child(3)>span{animation-delay:.55s;font-size:clamp(48px,15.5vw,62px);line-height:.95}
@keyframes rise{from{transform:translateY(110%)}to{transform:translateY(0)}}
.sub{margin:22px 20px 0;font-size:14px;line-height:1.4;color:var(--sage);font-weight:500;animation:fade 1s 1s both}
@keyframes fade{from{opacity:0}to{opacity:1}}

/* ---- claim ---- */
.claim{padding:44px 20px 48px}
.claim p:first-child{margin:0;font-family:var(--serif);font-size:clamp(34px,10vw,40px);line-height:1.02;letter-spacing:-.015em;color:var(--ink)}
.claim p+p{margin:18px 0 0;font-size:18px;line-height:1.55;max-width:34em}

/* ---- facts ---- */
.facts{margin:0 20px;padding-top:14px}
.fact{display:flex;flex-direction:column;gap:4px;align-items:flex-start}
.fact.r{align-items:flex-end;text-align:right}
.fact .n{font-family:var(--serif);font-size:clamp(88px,28vw,108px);line-height:.78;letter-spacing:-.05em;color:var(--sage);will-change:transform}
.fact.r .n{color:var(--ink)}
.fact p{margin:0;font-size:17px;line-height:1.5;max-width:300px}
.facts-list{padding-top:26px;display:flex;flex-direction:column;gap:40px}

/* ---- figure ---- */
.fig{padding:56px 0 0 20px}
.fig .clip{overflow:hidden}
.fig img{width:100%;height:250px;object-fit:cover;will-change:transform}
.cap{margin:8px 20px 0 0;font-family:var(--mono);font-size:10px;color:var(--sage);letter-spacing:.02em}

/* ---- story (dark) ---- */
.story{margin-top:44px;position:relative;color:#fff;padding:48px 20px 0;isolation:isolate}
.story::before{content:"";position:absolute;inset:0;background:var(--ink);z-index:-1;transform-origin:top;transition:transform 1s var(--ease)}
html.js .story.pre::before{transform:scaleY(0)}
.story .label{color:var(--sage-soft)}
.story h2{margin:16px 0 20px;font-family:var(--serif);font-weight:400;font-size:clamp(42px,13vw,50px);line-height:.96;letter-spacing:-.02em;color:#fff}
.story .lead{margin:0;font-size:18px;line-height:1.6;color:var(--ink-text)}
.story .lead .cap-letter{float:left;font-family:var(--serif);font-size:74px;line-height:.78;padding:8px 10px 0 0;color:var(--sage)}
.chapters{margin-top:38px;display:flex;flex-direction:column;gap:26px}
.ch{display:flex;gap:14px;align-items:flex-start;text-decoration:none;color:#fff;border-top:1px solid rgba(255,255,255,.18);padding-top:18px}
.ch .n{flex:none;font-family:var(--serif);font-size:54px;line-height:.8;letter-spacing:-.04em;color:var(--sage)}
.ch .t{display:flex;align-items:baseline;gap:10px}
.ch .t>span:first-child{font-family:var(--serif);font-size:27px;line-height:1.05}
.ch .lead-dots{flex:1;border-bottom:1px dotted #6B756A;transform:translateY(-6px)}
.ch svg{flex:none;transition:transform .35s var(--ease)}
.ch:hover svg,.ch:focus-visible svg{transform:translateX(6px)}
.ch p{margin:8px 0 0;font-size:15px;line-height:1.5;color:var(--sage-soft)}
.btc{position:relative;width:min(82%,320px);height:220px;object-fit:cover;margin:44px 0 -64px auto;box-shadow:0 16px 36px rgba(0,0,0,.22);will-change:transform}

/* ---- timeline ---- */
.tl{padding:116px 20px 0;position:relative}
.tl-head{padding-top:14px}
.tl-list{position:relative;margin-top:6px;padding-left:18px}
.spine{position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--hair)}
.spine::after{content:"";position:absolute;left:0;top:0;width:100%;height:100%;background:var(--sage);transform-origin:top;transform:scaleY(var(--p,0))}
.tl-row{display:flex;flex-direction:column;gap:2px;padding:16px 0;border-bottom:1px solid var(--hair);transition:opacity .6s,transform .6s var(--ease)}
.tl-row:last-child{border-bottom:0}
.tl-row.alt{padding-left:44px}
.tl-row .y{font-family:var(--serif);font-size:34px;line-height:1;letter-spacing:-.03em;color:var(--hair);transition:color .6s}
.tl-row.lit .y{color:var(--sage)}
.tl-row.alt.lit .y{color:var(--ink)}
.tl-row.lit.today .y{font-style:italic;color:var(--ink)}
.tl-row .d{font-size:16px;line-height:1.4}
html.js .tl-row:not(.lit){opacity:.35;transform:translateX(-6px)}
html.js .tl-row.alt:not(.lit){transform:translateX(6px)}

/* ---- roviny ---- */
.rov{padding:64px 20px 0}
.rov-head{padding-top:14px;margin-bottom:26px}
.rov-list{display:flex;flex-direction:column;gap:40px}
.rv .frame{position:relative}
.rv .clip{overflow:hidden}
.rv img{width:100%;height:236px;object-fit:cover;will-change:transform}
.rv h3{position:absolute;left:0;bottom:-14px;margin:0;background:var(--paper);padding:8px 16px 0 0;font-family:var(--serif);font-weight:400;font-size:40px;line-height:.9;letter-spacing:-.02em;color:var(--ink)}
.rv.r h3{left:auto;right:0;padding:8px 0 0 16px}
.rv p{margin:26px 0 0;font-size:16px;line-height:1.5}
.rv.r p{text-align:right}

/* ---- cta ---- */
.cta{margin-top:64px;background:var(--sage);color:var(--ink);padding:46px 20px 50px;position:relative;overflow:hidden}
.cta .label{color:var(--ink)}
.cta h2{margin:14px 0 26px;font-family:var(--serif);font-weight:400;font-size:clamp(38px,11.5vw,44px);line-height:.98;letter-spacing:-.02em;color:var(--ink)}
.btn{display:inline-flex;align-items:center;gap:12px;background:var(--ink);color:var(--paper);text-decoration:none;font-size:16px;font-weight:600;padding:17px 24px;border-radius:999px;transition:transform .3s var(--ease),box-shadow .3s}
.btn span{font-weight:400;opacity:.7}
.btn svg{animation:nudge 3s ease-in-out infinite}
.btn:hover,.btn:focus-visible{transform:translateY(-2px);box-shadow:0 10px 24px rgba(43,45,43,.25);outline:none}
@keyframes nudge{0%,70%,100%{transform:translateX(0)}80%{transform:translateX(5px)}90%{transform:translateX(0)}}
.ticker{margin:40px -20px 0;border-top:1px solid rgba(43,45,43,.25);padding-top:14px;overflow:hidden;white-space:nowrap}
.ticker div{display:inline-flex;gap:0;animation:ticker 26s linear infinite}
.ticker span{font-family:var(--serif);font-style:italic;font-size:22px;color:var(--ink);padding-right:34px}

@keyframes ticker{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---- social / footer ---- */
.social{margin:44px 20px 0;padding-top:14px}
.social .list{display:flex;flex-direction:column;margin-top:10px}
.social a{display:flex;justify-content:space-between;align-items:baseline;padding:12px 0;border-bottom:1px solid var(--hair);text-decoration:none;color:var(--ink);position:relative}
.social a:last-child{border-bottom:0}
.social a::after{content:"";position:absolute;left:0;bottom:-1px;height:1px;width:100%;background:var(--sage);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.social a:hover::after,.social a:focus-visible::after{transform:scaleX(1)}
.social a>span:first-child{font-family:var(--serif);font-size:23px}
.social a>span:last-child{font-size:12px;color:var(--sage)}
.mail{display:inline-block;margin-top:8px;font-family:var(--serif);font-size:23px;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--sage)}
.foot{margin:48px 20px 0;padding:14px 0 28px;border-top:3px solid var(--ink);display:flex;justify-content:space-between;font-size:12px;color:var(--sage)}
.foot span:first-child{color:var(--ink)}

/* ---- reveal system (JS only; page is complete without it) ---- */
html.js [data-reveal].pre{opacity:0;transform:translateY(26px)}
html.js [data-reveal]{transition:opacity .8s var(--ease),transform .8s var(--ease)}
html.js [data-reveal="wipe"].pre{opacity:1;transform:none;clip-path:inset(0 100% 0 0)}
html.js [data-reveal="wipe"]{transition:clip-path 1s var(--ease)}
html.js [data-reveal="rule"].pre{opacity:1;transform:scaleX(0)}
html.js [data-reveal="rule"]{transition:transform .9s var(--ease)}
html.js [data-reveal="photo"].pre{opacity:1;transform:none;clip-path:inset(0 0 100% 0)}
html.js [data-reveal="photo"]{transition:clip-path 1s var(--ease)}
html.js [data-words].pre .w{opacity:0;transform:translateY(.55em)}
html.js [data-words] .w{display:inline-block;transition:opacity .6s var(--ease),transform .6s var(--ease);transition-delay:calc(var(--i)*55ms)}
html.js [data-reveal="none"].pre{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html.js [data-reveal].pre,html.js [data-words].pre .w,.story.pre::before{opacity:1;transform:none;clip-path:none}
  html.js .tl-row:not(.lit){opacity:1;transform:none}
  .tl-row .y{color:var(--sage)}.tl-row.alt .y{color:var(--ink)}
  .hero-photo img{transform:none}
}

/* ---- chapter accordion ---- */
.chapter-item{display:flex;flex-direction:column}
.ch{width:100%;background:none;border:0;border-top:1px solid rgba(255,255,255,.18);padding:18px 0 0;font:inherit;text-align:left;cursor:pointer;color:#fff}
.ch:focus-visible{outline:1px solid var(--sage);outline-offset:6px}
.ch[aria-expanded="true"] svg{transform:rotate(90deg)}
.ch-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .55s var(--ease)}
.ch-body>div{overflow:hidden;min-height:0}
.ch-body.open{grid-template-rows:1fr}
.ch-body .inner{padding:10px 0 14px;color:var(--ink-text);font-size:15.5px;line-height:1.65}
.ch-body .inner p{margin:0 0 14px}
.ch-body .inner p:last-child{margin-bottom:0}
.ch-body img{width:100%;height:200px;object-fit:cover;margin:4px 0 18px}
.text-link{color:inherit;text-decoration:underline;text-decoration-color:var(--sage);text-decoration-thickness:1.5px;text-underline-offset:3px}
.text-link:hover{color:var(--sage)}

/* ---- tablet ---- */
@media (min-width:600px){
  .page{max-width:680px}
  .hero-photo{height:520px}
}

/* ---- desktop ---- */
@media (min-width:960px){
  .page{max-width:1240px;box-shadow:none}
  .chapter{top:22px;right:max(20px,calc(50% - 598px));width:54px;height:54px;font-size:26px}
  .bar{margin:0 48px;padding:18px 80px 12px 0;font-size:13px}
  .bar>span:first-child{font-size:21px}

  /* hero: name left, photo right, name tab overlaps the photo */
  .hero{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-template-rows:1fr auto;margin:28px 48px 0}
  .hero-photo{grid-column:2;grid-row:1/3;height:min(78vh,720px)}
  .name{grid-column:1;grid-row:1;align-self:end;margin:0 -170px 0 0;padding:30px 44px 0 0;position:relative;z-index:2}
  .name .line>span{font-size:clamp(96px,9.4vw,138px)}
  .name .line:nth-child(3)>span{font-size:clamp(70px,6.9vw,100px)}
  .sub{grid-column:1;grid-row:2;margin:24px 0 0;font-size:15px;position:relative;z-index:2}

  .claim{padding:80px 48px 72px;display:grid;grid-template-columns:7fr 5fr;column-gap:56px;align-items:end}
  .claim p:first-child{font-size:clamp(48px,5.2vw,66px)}
  .claim p+p{margin:0 0 6px;font-size:20px;line-height:1.55}

  .facts{margin:0 48px}
  .facts-list{display:grid;grid-template-columns:1fr 1fr;gap:64px 72px;padding-top:44px}
  .fact,.fact.r{align-items:flex-start;text-align:left}
  .fact .n{font-size:152px}
  .fact p{max-width:40ch;font-size:18px}

  .fig{padding:88px 48px 0}
  .fig img{height:560px}
  .cap{margin-right:0}

  .story{margin-top:72px;padding:80px 48px 0;display:grid;grid-template-columns:5fr 7fr;column-gap:72px}
  .story .label{grid-column:1/-1;grid-row:1}
  .story h2{grid-column:1;grid-row:2;font-size:clamp(56px,6vw,82px);margin:18px 0 26px}
  .story .lead{grid-column:1;grid-row:3;font-size:19px;max-width:44ch}
  .story .lead .cap-letter{font-size:86px}
  .chapters{grid-column:2;grid-row:2/4;margin-top:22px;align-self:start}
  .ch .t>span:first-child{font-size:32px}
  .ch p{font-size:16px}
  .ch-body .inner{font-size:16.5px;max-width:60ch}
  .btc{grid-column:1/-1;grid-row:4;width:540px;height:360px;margin:64px 0 -88px auto}

  .tl{padding:168px 48px 0}
  .tl-list{padding-left:32px;margin-top:10px}
  .tl-row,.tl-row.alt{display:grid;grid-template-columns:220px 1fr;align-items:baseline;column-gap:32px;padding:22px 0 22px 0}
  .tl-row .y{font-size:44px}
  .tl-row .d{font-size:18px;max-width:60ch}
  html.js .tl-row.alt:not(.lit){transform:translateX(-6px)}

  .rov{padding:104px 48px 0}
  .rov-list{display:grid;grid-template-columns:repeat(3,1fr);gap:48px}
  .rv img{height:320px}
  .rv h3{font-size:44px}
  .rv.r h3{left:0;right:auto;padding:8px 16px 0 0}
  .rv.r p{text-align:left}

  .cta{margin-top:104px;padding:80px 48px 72px;display:grid;grid-template-columns:7fr 5fr;column-gap:56px;align-items:center}
  .cta .label{grid-column:1/-1}
  .cta h2{grid-column:1;margin:16px 0 0;font-size:clamp(52px,5.6vw,74px);max-width:14ch}
  .btn{grid-column:2;justify-self:end;font-size:18px;padding:20px 30px}
  .ticker{grid-column:1/-1;margin:64px -48px 0}

  .social{margin:72px 48px 0}
  .social .list{display:grid;grid-template-columns:1fr 1fr;column-gap:72px}
  .social a,.social a:last-child{border-bottom:1px solid var(--hair)}
  .social a>span:first-child{font-size:26px}
  .foot{margin:72px 48px 0;padding-bottom:36px}
}