:root{
  --ink:#0c0c0e; --ink-2:#141417; --line:rgba(239,233,223,.12);
  --ivory:#efe9df; --mute:rgba(239,233,223,.55); --gold:#c9a96b;
  --serif:"Instrument Serif",Georgia,serif; --sans:"Inter",system-ui,sans-serif;
  --pad:clamp(16px,5vw,72px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--ink);color:var(--ivory);font:300 16px/1.7 var(--sans);overflow-x:hidden;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
::selection{background:var(--gold);color:var(--ink)}

/* film grain */
body::after{content:"";position:fixed;inset:-50%;pointer-events:none;z-index:100;opacity:.06;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 1.2s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}33%{transform:translate(-4%,3%)}66%{transform:translate(3%,-5%)}100%{transform:translate(0,0)}}

.eyebrow{font:500 11px/1 var(--sans);letter-spacing:.32em;text-transform:uppercase;color:var(--gold)}
.serif{font-family:var(--serif);font-weight:400}
em{font-style:italic;font-family:var(--serif)}

/* nav */
nav{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;justify-content:space-between;align-items:center;
  padding:22px var(--pad);mix-blend-mode:difference;font:500 11px/1 var(--sans);letter-spacing:.28em;text-transform:uppercase}
nav .mark{font:400 22px/1 var(--serif);letter-spacing:.02em;text-transform:none}
nav ul{display:flex;gap:clamp(16px,3vw,40px);list-style:none}
nav a{opacity:.75;transition:opacity .3s}
nav a:hover{opacity:1}
@media (max-width:640px){nav ul li:not(:last-child){display:none}}

/* hero */
.hero{min-height:100svh;display:grid;place-items:center;position:relative;padding:120px var(--pad) 80px;text-align:center;
  background:radial-gradient(60% 50% at 50% 42%,rgba(201,169,107,.14),transparent 70%),
             linear-gradient(180deg,#0c0c0e 0%,#121216 60%,#0c0c0e 100%)}
.hero .face{width:clamp(140px,22vw,260px);aspect-ratio:1;height:auto;object-fit:cover;margin:0 auto clamp(24px,4vw,48px);border-radius:4px;
  box-shadow:0 40px 120px -20px rgba(201,169,107,.35),0 0 0 1px var(--line);transition:transform .2s ease-out;will-change:transform}
.hero h1{font:400 clamp(72px,19vw,300px)/.82 var(--serif);letter-spacing:-.035em}
.hero h1 span{display:inline-block;opacity:0;transform:translateY(40%);animation:rise 1.2s cubic-bezier(.2,.7,.1,1) forwards}
@keyframes rise{to{opacity:1;transform:none}}
.hero .tag{margin-top:clamp(20px,3vw,36px);font:italic 400 clamp(20px,2.4vw,30px)/1.3 var(--serif);color:var(--mute)}
.hero .meta{position:absolute;bottom:32px;left:var(--pad);right:var(--pad);display:flex;justify-content:space-between;
  font:500 10px/1 var(--sans);letter-spacing:.3em;text-transform:uppercase;color:var(--mute)}
.scroll{width:1px;height:48px;background:linear-gradient(var(--gold),transparent);position:absolute;bottom:72px;left:50%;animation:drip 2.4s ease-in-out infinite}
@keyframes drip{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* marquee */
.marquee{border-block:1px solid var(--line);overflow:hidden;padding:22px 0;white-space:nowrap}
.marquee div{display:inline-block;animation:slide 38s linear infinite;font:italic 400 clamp(28px,4vw,52px)/1 var(--serif)}
.marquee span{margin:0 .6em;color:var(--gold);font-style:normal}
@keyframes slide{to{transform:translateX(-50%)}}

section{padding:clamp(96px,14vw,200px) var(--pad);position:relative}
.wrap{max-width:1240px;margin:0 auto}
.head{display:grid;grid-template-columns:1fr 2fr;gap:40px;margin-bottom:clamp(56px,8vw,110px);align-items:end}
.head h2{font:400 clamp(48px,7vw,104px)/.95 var(--serif);letter-spacing:-.02em}
.num{font:400 14px/1 var(--serif);color:var(--mute);font-style:italic;display:block;margin-bottom:18px}
@media (max-width:820px){.head{grid-template-columns:1fr;gap:16px}}

/* origin */
.lede{font:400 clamp(28px,3.6vw,50px)/1.18 var(--serif);max-width:20ch}
.lede em{color:var(--gold)}
.story{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(24px,3vw,48px);margin-top:clamp(64px,8vw,120px)}
.story p{grid-column:span 4;color:var(--mute);font-size:15px}
.story p::first-letter{font:400 3.4em/.8 var(--serif);float:left;margin:.08em .1em 0 0;color:var(--ivory)}
@media (max-width:820px){.story p{grid-column:1/-1}}

.chapters{margin-top:clamp(80px,10vw,140px);border-top:1px solid var(--line)}
.chapter{display:grid;grid-template-columns:120px 1fr 1.4fr;gap:32px;padding:36px 0;border-bottom:1px solid var(--line);align-items:baseline;transition:background .5s}
.chapter:hover{background:linear-gradient(90deg,transparent,rgba(201,169,107,.05),transparent)}
.chapter .n{font:italic 400 18px/1 var(--serif);color:var(--gold)}
.chapter h3{font:400 clamp(26px,2.6vw,36px)/1.1 var(--serif)}
.chapter p{color:var(--mute);font-size:15px}
@media (max-width:820px){.chapter{grid-template-columns:1fr;gap:10px}}

/* quote */
.quote{text-align:center;background:var(--ink-2)}
.quote blockquote{font:400 clamp(36px,5.6vw,84px)/1.08 var(--serif);max-width:18ch;margin:0 auto;letter-spacing:-.015em}
.quote blockquote em{color:var(--gold)}
.quote cite{display:block;margin-top:40px;font:500 11px/1 var(--sans);letter-spacing:.3em;text-transform:uppercase;color:var(--mute);font-style:normal}

/* lexicon */
.lex{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);border-left:1px solid var(--line)}
.entry{padding:clamp(28px,3vw,48px);border-right:1px solid var(--line);border-bottom:1px solid var(--line);min-height:340px;display:flex;flex-direction:column;transition:background .5s}
.entry:hover{background:rgba(239,233,223,.025)}
.entry .word{font:400 clamp(40px,4vw,60px)/1 var(--serif);letter-spacing:-.02em}
.entry .pron{margin-top:12px;font:italic 400 17px/1 var(--serif);color:var(--mute)}
.entry .pos{margin-top:28px}
.entry p{margin-top:14px;color:var(--mute);font-size:15px}
.entry .ex{margin-top:auto;padding-top:28px;font:italic 400 19px/1.35 var(--serif)}
.entry.more{justify-content:center;align-items:center;text-align:center}
.entry.more .word{font-style:italic;color:var(--mute)}
@media (min-width:981px){.entry.more{grid-column:span 2}}
@media (max-width:980px){.lex{grid-template-columns:1fr 1fr}}
@media (max-width:620px){.lex{grid-template-columns:1fr}.entry{min-height:0}}

/* founders */
.founders{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.founder{background:var(--ink);padding:clamp(28px,3vw,44px) clamp(20px,2.4vw,32px);aspect-ratio:3/4;display:flex;flex-direction:column;justify-content:space-between}
.founder .i{font:italic 400 15px/1 var(--serif);color:var(--mute)}
.founder h3{font:400 clamp(34px,3.4vw,52px)/1 var(--serif)}
.founder .role{margin-top:10px}
.founder.star{background:radial-gradient(80% 60% at 50% 40%,rgba(201,169,107,.18),var(--ink))}
.founder img{width:68%;aspect-ratio:1;object-fit:contain;margin:0 auto;border-radius:3px;transition:transform .6s cubic-bezier(.2,.7,.1,1)}
.founder img.photo{object-fit:cover;object-position:top}
.founder:hover img{transform:scale(1.04) rotate(-1.5deg)}
.contributors{grid-template-columns:repeat(3,1fr);margin-top:24px}
.sub{margin-top:clamp(72px,9vw,120px)}
.founder.cta{justify-content:center;gap:24px;background:radial-gradient(80% 60% at 50% 40%,rgba(201,169,107,.10),var(--ink))}
.founder.cta h3 em{color:var(--gold)}
.founder.cta p{color:var(--mute);font-size:15px;margin-top:16px;max-width:30ch}
@media (max-width:900px){.founders{grid-template-columns:1fr 1fr}.founder.cta{grid-column:1/-1;aspect-ratio:auto}}

/* archive */
.archive{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(40px,6vw,96px);align-items:center}
.plate{position:relative;aspect-ratio:1;background:var(--ink-2);border:1px solid var(--line);display:grid;place-items:center}
.plate::before,.plate::after{content:"";position:absolute;width:24px;height:24px;border:1px solid var(--gold)}
.plate::before{top:16px;left:16px;border-right:0;border-bottom:0}
.plate::after{bottom:16px;right:16px;border-left:0;border-top:0}
.plate img{width:58%;box-shadow:0 50px 100px -30px rgba(0,0,0,.8)}
.plate .lot{position:absolute;top:24px;right:28px;font:italic 400 15px/1 var(--serif);color:var(--mute)}
.spec{margin-top:40px;border-top:1px solid var(--line)}
.spec div{display:flex;justify-content:space-between;padding:16px 0;border-bottom:1px solid var(--line);font-size:14px}
.spec dt{color:var(--mute)}
.btn{display:inline-flex;gap:14px;align-items:center;margin-top:40px;padding:18px 30px;border:1px solid var(--gold);color:var(--gold);
  font:500 11px/1 var(--sans);letter-spacing:.3em;text-transform:uppercase;transition:background .4s,color .4s}
.btn:hover{background:var(--gold);color:var(--ink)}
@media (max-width:820px){.archive{grid-template-columns:1fr}}
.lots{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:clamp(72px,9vw,120px)}
.lot-card{background:var(--ink);padding:clamp(24px,2.6vw,36px);display:flex;flex-direction:column;transition:background .5s}
.lot-card:hover{background:var(--ink-2)}
.lot-card .pic{aspect-ratio:1;display:grid;place-items:center;background:radial-gradient(60% 60% at 50% 45%,rgba(201,169,107,.10),transparent 70%)}
.lot-card .pic img{width:80%;aspect-ratio:1;object-fit:contain;transition:transform .6s cubic-bezier(.2,.7,.1,1)}
.lot-card:hover .pic img{transform:scale(1.04) rotate(-1.5deg)}
.lot-card .no{margin-top:24px;font:italic 400 16px/1 var(--serif);color:var(--gold)}
.lot-card h3{margin-top:10px;font:400 clamp(34px,3vw,46px)/1 var(--serif);letter-spacing:-.01em}
.lot-card .root{margin-top:10px;font:italic 400 18px/1.3 var(--serif);color:var(--mute)}
.lot-card p{margin-top:14px;color:var(--mute);font-size:15px}
.lot-card.open{justify-content:center;align-items:center;text-align:center}
.lot-card.open h3{font-style:italic;color:var(--mute)}
.lot-card.open a{color:var(--gold);border-bottom:1px solid currentColor}
@media (max-width:980px){.lots{grid-template-columns:1fr 1fr}}
@media (max-width:620px){.lots{grid-template-columns:1fr}}

footer{padding:clamp(80px,10vw,140px) var(--pad) 36px;border-top:1px solid var(--line);overflow:hidden}
footer .big{font:400 clamp(80px,22vw,360px)/.8 var(--serif);letter-spacing:-.04em;text-align:center;
  background:linear-gradient(180deg,var(--ivory),rgba(239,233,223,.08));-webkit-background-clip:text;background-clip:text;color:transparent}
footer .row{display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px;margin-top:48px;font:500 10px/1 var(--sans);letter-spacing:.3em;text-transform:uppercase;color:var(--mute)}

/* reveal */
.r{opacity:0;transform:translateY(40px);transition:opacity 1.2s cubic-bezier(.2,.7,.1,1),transform 1.2s cubic-bezier(.2,.7,.1,1)}
.r.in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .r,.hero h1 span{opacity:1;transform:none}
}

/* archive cards link to lore pages */
a.lot-card .more{margin-top:auto;padding-top:24px;font:500 11px/1 var(--sans);letter-spacing:.3em;text-transform:uppercase;color:var(--gold)}

/* lore pages */
.lore-hero{padding-top:clamp(120px,14vw,180px)}
.lore-hero .archive{align-items:start}
.lore-hero h1{font:400 clamp(64px,9vw,140px)/.9 var(--serif);letter-spacing:-.03em;margin-top:18px}
.lore-hero .root{margin-top:18px;font:italic 400 clamp(20px,2vw,26px)/1.3 var(--serif);color:var(--mute)}
.lore-body{padding-top:0}
.lore{max-width:62ch;margin:0 auto}
.lore .lede{max-width:none;margin-top:24px}
.lore p:not(.lede){margin-top:28px;font-size:18px;line-height:1.8;color:var(--mute)}
.lore p.first::first-letter{font:400 3.6em/.8 var(--serif);float:left;margin:.06em .12em 0 0;color:var(--ivory)}
.lore .pending{margin-top:48px;padding:28px 32px;border:1px dashed var(--line);font:italic 400 20px/1.4 var(--serif);color:var(--mute)}
.lore .pending a{color:var(--gold);border-bottom:1px solid currentColor}
.pager{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line);margin-top:clamp(96px,12vw,160px)}
.pager a{padding:40px 0;display:flex;flex-direction:column;gap:12px;transition:color .4s}
.pager a+a{text-align:right;align-items:flex-end;border-left:1px solid var(--line)}
.pager span{font:500 11px/1 var(--sans);letter-spacing:.3em;text-transform:uppercase;color:var(--gold)}
.pager strong{font:400 clamp(28px,3vw,44px)/1 var(--serif)}
.pager a:hover{color:var(--gold)}
@media (prefers-reduced-motion:no-preference){
  .lore-hero .plate,.lore-hero .archive>div:last-child{animation:up 1.2s cubic-bezier(.2,.7,.1,1) both}
  .lore-hero .archive>div:last-child{animation-delay:.12s}
}
@keyframes up{from{opacity:0;transform:translateY(40px)}}