:root{
  --dusk:#1b130d; --wood:#2a1d13; --sun:#f08a3c; --sun2:#ffc27a; --palm:#2f5d43; --palm2:#1e3d2c;
  --page:#fbf6ee; --ink:#231a12; --soft:rgba(35,26,18,.68); --rule:rgba(35,26,18,.14);
  --head:"Bricolage Grotesque",system-ui,sans-serif; --read:"Literata",Georgia,serif;
  --gut:clamp(20px,6vw,96px); --max:1240px; --ease:cubic-bezier(.2,.7,.1,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--page);color:var(--ink);font:400 1.1rem/1.65 var(--read);overflow-x:hidden}
main{overflow-x:clip}
img,video{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3,p,figure{margin:0}
:focus-visible{outline:3px solid var(--sun);outline-offset:3px}
.skip{position:absolute;left:-999px;background:var(--ink);color:#fff;padding:10px 14px;z-index:99}.skip:focus{left:8px;top:8px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gut)}
.narrow{max-width:780px}
.dim{color:var(--soft)}
.kicker{font:600 .82rem/1 var(--head);letter-spacing:.14em;text-transform:uppercase;color:var(--sun)}
.kicker a{text-decoration:none}
h1,h2{font-family:var(--head);font-weight:800;letter-spacing:-.025em;line-height:.98}
h1{font-size:clamp(3rem,8.4vw,7.6rem)}
h2{font-size:clamp(2rem,4.6vw,3.6rem)}
h1 em,h2 em{font-family:var(--read);font-style:italic;font-weight:400;letter-spacing:-.01em;color:var(--sun)}
.lede{font-size:clamp(1.15rem,1.6vw,1.4rem);line-height:1.55;max-width:34em}
.link{text-decoration:underline;text-decoration-color:var(--sun);text-decoration-thickness:2px;text-underline-offset:5px;font-weight:500}
.link:hover{color:var(--sun)}
.btn{display:inline-block;background:var(--sun);color:#1b130d;font:700 1.05rem/1 var(--head);padding:18px 26px;border-radius:999px 999px 999px 4px;text-decoration:none;transition:transform .3s var(--ease),background .3s}
.btn:hover{background:var(--sun2);transform:translateY(-3px) rotate(-1deg)}

/* header */
.top{position:fixed;inset:0 0 auto;z-index:30;display:flex;align-items:center;gap:20px;padding:16px var(--gut);color:#fff;transition:background .3s,color .3s,transform .4s var(--ease)}
.top.is-solid{background:rgba(251,246,238,.92);backdrop-filter:blur(10px);color:var(--ink);box-shadow:0 1px 0 var(--rule)}
.top.is-away{transform:translateY(-105%)}
.mark{font:800 1.4rem/1 var(--head);letter-spacing:-.02em;text-decoration:none;margin-right:auto}
.top nav{display:flex;gap:22px;align-items:center;font:600 .98rem/1 var(--head)}
.top nav a{text-decoration:none;padding:6px 0;border-bottom:2px solid transparent}
.top nav a:hover,.top nav a[aria-current]{border-color:var(--sun)}
.top .hire{background:var(--sun);color:#1b130d;padding:10px 16px;border-radius:999px;border:0}
.page .top,.top.on-light{color:var(--ink)}
@media (max-width:640px){.top nav{gap:14px;font-size:.88rem}.top nav a:not(.hire):nth-child(3){display:none}.mark{font-size:1.15rem}}

/* motion */
@media (prefers-reduced-motion:no-preference){
  .js [data-rise]{opacity:0;transform:translateY(30px);transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:calc(var(--i,0)*90ms)}
  .js [data-rise].in{opacity:1;transform:none}
  .js [data-split] .w{display:inline-block;overflow:hidden;vertical-align:top;padding:.08em .03em .1em;margin:-.08em -.03em -.1em}
  .js [data-split] .w>span{display:inline-block;transform:translateY(110%);transition:transform 1s var(--ease);transition-delay:calc(var(--i,0)*70ms)}
  .js [data-split].in .w>span{transform:none}
}

/* hero */
.hero{position:relative;min-height:min(100svh,980px);display:grid;align-items:end;padding:140px 0 clamp(70px,10vw,130px);color:#fff;overflow:hidden;isolation:isolate}
.hero-film{position:absolute;inset:-8% 0 -2%;z-index:-2;will-change:transform}
.hero-film video,.hero-film img{width:100%;height:100%;object-fit:cover;object-position:65% 50%}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(27,19,13,.92) 0,rgba(27,19,13,.62) 45%,rgba(27,19,13,.05) 78%),linear-gradient(0deg,rgba(27,19,13,.85),transparent 45%)}
.hero h1{max-width:11ch;margin:18px 0 26px}
.hero .lede{color:rgba(255,255,255,.86)}
.go{display:flex;flex-wrap:wrap;gap:24px;align-items:center;margin-top:34px}
.hero .link{color:#fff}
.pause{position:absolute;right:var(--gut);bottom:24px;background:rgba(27,19,13,.5);color:#fff;border:1px solid rgba(255,255,255,.3);border-radius:999px;font:600 .8rem var(--head);padding:8px 14px;cursor:pointer}
@media (max-width:820px){.hero::before{background:linear-gradient(0deg,rgba(27,19,13,.95) 20%,rgba(27,19,13,.55))}.hero-film video,.hero-film img{object-position:75% 50%}}

.sec{padding:clamp(80px,11vw,160px) 0}
.head-row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:16px;margin-bottom:clamp(30px,5vw,60px)}

/* essays */
.essays{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2vw,28px);padding-bottom:50px}
.essay-card{display:grid;gap:10px;align-content:start;padding:clamp(24px,3vw,40px);background:#fff;border-radius:28px 28px 28px 6px;text-decoration:none;box-shadow:0 1px 0 var(--rule),0 30px 60px -40px rgba(60,30,10,.5);transition:transform .45s var(--ease),box-shadow .45s}
.essay-card:nth-child(even){transform:translateY(50px)}.essay-card:nth-child(even):hover{transform:translateY(42px) rotate(-.6deg)}
.essay-card:hover{transform:translateY(-8px) rotate(-.6deg);box-shadow:0 1px 0 var(--rule),0 40px 70px -40px rgba(240,138,60,.65)}
.essay-card .num{font:800 3.4rem/1 var(--head);color:var(--sun);letter-spacing:-.04em}
.essay-card b{font:700 clamp(1.4rem,2.2vw,1.9rem)/1.12 var(--head);letter-spacing:-.015em}
.essay-card .meta{font:600 .8rem var(--head);letter-spacing:.08em;text-transform:uppercase;color:var(--palm);margin-top:6px}
@media (max-width:760px){.essays{grid-template-columns:1fr}.essay-card:nth-child(even){transform:none}}

/* fixed-picture band */
.band{position:relative;isolation:isolate;clip-path:inset(0);color:#fff;padding:clamp(120px,16vw,220px) 0}
.band-pic{position:fixed;inset:0;z-index:-1;background:var(--wood) center/cover no-repeat}
.band-pic::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(30,61,44,.92),rgba(27,19,13,.6))}
.band-in{max-width:960px}
.big-quote{font:400 clamp(2rem,4.6vw,3.8rem)/1.15 var(--read);font-style:italic;letter-spacing:-.01em;margin-bottom:24px}
.band .dim{color:rgba(255,255,255,.75)}.band .link{color:#fff}

/* run list */
.run{border-top:2px solid var(--ink)}
.run-row{display:grid;grid-template-columns:minmax(180px,280px) 1fr auto;gap:10px 30px;align-items:baseline;padding:24px 0;border-bottom:1px solid var(--rule);text-decoration:none;transition:padding .4s var(--ease),background .4s}
.run-row b{font:800 clamp(1.3rem,2.2vw,1.8rem)/1.1 var(--head);letter-spacing:-.02em}
.run-row span{color:var(--soft)}
.run-row i{font-style:normal;color:var(--sun);font-size:1.4rem;transition:transform .3s var(--ease)}
.run-row:hover{padding-left:16px;background:linear-gradient(90deg,rgba(240,138,60,.1),transparent)}
.run-row:hover i{transform:translateX(6px)}
@media (max-width:700px){.run-row{grid-template-columns:1fr auto}.run-row span{grid-column:1/-1}}
.run.full{padding-bottom:clamp(80px,10vw,140px)}

/* inner pages */
.page-top{padding:clamp(140px,16vw,210px) 0 clamp(50px,6vw,80px);background:radial-gradient(90% 120% at 100% 0,rgba(240,138,60,.22),transparent 60%),radial-gradient(70% 90% at 0 100%,rgba(47,93,67,.14),transparent 60%)}
.page-top h1{margin:16px 0 22px;max-width:14ch}
.essay h1{font-size:clamp(2.4rem,5.6vw,4.4rem);max-width:none}

/* timeline */
.timeline{position:relative;padding-bottom:clamp(60px,8vw,120px)}
.timeline .line{position:absolute;left:calc(var(--gut) + 150px);top:0;bottom:0;width:3px;background:var(--rule)}
.timeline .line i{position:absolute;inset:0;background:linear-gradient(var(--sun),var(--palm));transform-origin:0 0;transform:scaleY(var(--tl,0))}
.stop{display:grid;grid-template-columns:150px 1fr;gap:40px;padding:30px 0 30px;position:relative}
.stop::before{content:"";position:absolute;left:144px;top:42px;width:15px;height:15px;border-radius:50%;background:var(--page);border:3px solid var(--sun)}
.stop .when{font:700 .95rem/1.3 var(--head);color:var(--palm);padding-top:8px;text-align:right;padding-right:14px}
.stop h2{font-size:clamp(1.5rem,2.8vw,2.3rem);margin-bottom:8px;letter-spacing:-.02em;line-height:1.08}
.stop-pic{margin:10px 0 30px 190px;max-width:760px;border-radius:28px 28px 28px 6px;overflow:hidden;box-shadow:0 40px 80px -50px rgba(60,30,10,.7)}
.stop-pic img{width:100%;aspect-ratio:16/8;object-fit:cover}
@media (max-width:700px){
  .timeline .line{left:calc(var(--gut) + 6px)}
  .stop{grid-template-columns:1fr;gap:4px;padding-left:34px}
  .stop::before{left:0;top:36px}
  .stop .when{text-align:left;padding:0}
  .stop-pic{margin:6px 0 20px 34px}
}
.close{max-width:900px}.close .lede{margin-top:20px}

/* lists + essays */
.list{padding-bottom:clamp(70px,9vw,130px)}
.list-row{display:grid;grid-template-columns:130px 1fr;gap:6px 26px;padding:26px 0;border-top:1px solid var(--rule);text-decoration:none}
.list-row time{font:600 .85rem var(--head);color:var(--palm);padding-top:6px}
.list-row b{font:700 clamp(1.35rem,2.4vw,2rem)/1.12 var(--head);letter-spacing:-.015em}
.list-row span{grid-column:2}
.list-row:hover b{color:var(--sun)}
.more .list-row{grid-template-columns:1fr}.more .list-row span{grid-column:1}
@media (max-width:640px){.list-row{grid-template-columns:1fr}.list-row span{grid-column:1}}
.prose{margin-top:34px;font-size:1.18rem;line-height:1.75}
.prose>*+*{margin-top:1.1em}
.prose h2{font-size:clamp(1.6rem,3vw,2.2rem);margin-top:1.7em;letter-spacing:-.02em}
.prose a{text-decoration:underline;text-decoration-color:var(--sun);text-decoration-thickness:2px;text-underline-offset:4px}
.prose p:first-child::first-letter{font:800 4.2em/.8 var(--head);float:left;margin:.08em .1em 0 0;color:var(--sun)}
.sign{font:400 2.4rem var(--read);font-style:italic;color:var(--palm);margin:40px 0 0}
.more{padding:30px var(--gut) clamp(70px,9vw,120px)}
.more h2{font-size:1.6rem;margin-bottom:10px}

/* footer */
.foot{background:var(--dusk);color:#f3e9dc;padding:clamp(54px,7vw,90px) 0 30px}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:30px}
.foot-name{font:800 2.2rem/1 var(--head);letter-spacing:-.02em;color:var(--sun2);margin-bottom:8px}
.foot .dim{color:rgba(243,233,220,.65)}
.foot-h{font:700 .78rem var(--head);letter-spacing:.14em;text-transform:uppercase;color:var(--sun);margin-bottom:10px}
.foot a{display:block;padding:4px 0;text-decoration:none}.foot a:hover{color:var(--sun2)}
.foot-note{margin-top:40px;font-size:.9rem;opacity:.6}
@media (max-width:700px){.foot-grid{grid-template-columns:1fr 1fr}.foot-grid>div:first-child{grid-column:1/-1}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}html{scroll-behavior:auto}}
.mark,.top nav a{white-space:nowrap}
@media (max-width:420px){.top{gap:10px}.top nav{gap:12px}.top .hire{padding:9px 12px}.mark{font-size:1.05rem}}