/* Cracks in Postmodernity — site styles. Mobile-first. Palette from the brief. */
:root {
  --bone: #F3EEE4; --bone-2: #EAE3D6; --ink: #111111; --ink-2: #1b1917; --ox: #7A1E1E; --ox-2: #5f1616; --gold: #B08D57; --gold-2: #c9a76e; --fresco: #5E6B73; --mute: #5a5248;
  --fd: 'Fraunces', Georgia, serif; --ft: 'Source Serif 4', Georgia, serif; --fm: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
  --gut: clamp(18px, 5vw, 64px); --max: 1200px; --ease: cubic-bezier(.22,.8,.24,1);
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bone); color: var(--ink); font: 400 1.0625rem/1.65 var(--ft); overflow-x: clip; -webkit-font-smoothing: antialiased; }
h1, h2, h3 { font-family: var(--fd); font-weight: 400; line-height: 1.02; letter-spacing: -.02em; margin: 0 0 .5em; text-wrap: balance; font-variation-settings: "opsz" 144; }
h2.h-big { font-size: clamp(2.4rem, 1.6rem + 4vw, 5rem); font-weight: 300; }
h2.h-huge { font-size: clamp(3rem, 1.8rem + 7vw, 7.5rem); font-weight: 300; letter-spacing: -.035em; }
h3 { font-size: clamp(1.4rem, 1.2rem + .8vw, 2rem); }
em { font-style: italic; color: var(--ox); }
p { margin: 0 0 1em; } p:last-child { margin-bottom: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg, iframe { max-width: 100%; display: block; }
a { color: var(--ox); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--ox-2); }
:focus-visible { outline: 3px solid var(--fresco); outline-offset: 3px; border-radius: 3px; }
mark { background: #f7e7a1; color: #3d2f00; padding: 0 .3em; border-radius: 2px; font: 500 .72rem/1.4 var(--fm); letter-spacing: .02em; vertical-align: .1em; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: 12px; z-index: 300; padding: .6em 1em; background: var(--gold); color: var(--ink); border-radius: 4px; transform: translateY(-300%); }
.skip:focus { transform: none; }
.wrap { width: 100%; max-width: calc(var(--max) + 2 * var(--gut)); margin-inline: auto; padding-inline: var(--gut); }
.sec { position: relative; padding-block: clamp(72px, 10vw, 150px); }
.sec__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 18px 32px; margin-bottom: clamp(28px, 4vw, 56px); }
.sec__head > div:first-child { max-width: 46rem; }
.lead { font-size: clamp(1.15rem, 1.05rem + .5vw, 1.45rem); line-height: 1.5; max-width: 40rem; }
.lead--light { color: #e8e1d3; }
.fine { font: 400 .85rem/1.5 var(--fm); color: var(--mute); letter-spacing: .01em; }
.num { display: flex; align-items: center; gap: 14px; margin: 0 0 22px; font: 500 .74rem/1 var(--fm); letter-spacing: .26em; text-transform: uppercase; color: var(--ox); }
.num span { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid currentColor; border-radius: 50%; font: italic 400 1rem/1 var(--fd); text-transform: none; letter-spacing: 0; }
.num::after { content: ""; flex: 1; height: 1px; background: currentColor; opacity: .25; }
.num--light { color: var(--gold-2); }
.eyebrow { margin: 0 0 12px; font: 500 .72rem/1.3 var(--fm); letter-spacing: .26em; text-transform: uppercase; color: var(--ox); }
.eyebrow--light { color: var(--gold-2); }
.row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.grain { pointer-events: none; position: fixed; inset: -50%; z-index: 80; width: 200%; height: 200%; opacity: .045; mix-blend-mode: multiply; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); animation: grain 1.4s steps(5) infinite; }
@keyframes grain { 0% { transform: translate(0,0); } 25% { transform: translate(-2%,2%); } 50% { transform: translate(2%,-2%); } 75% { transform: translate(-1%,-1%); } 100% { transform: translate(2%,1%); } }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5em; min-height: 50px; padding: .7em 1.5em; border-radius: 2px; border: 1.5px solid transparent; font: 500 .95rem/1.2 var(--fm); letter-spacing: .04em; text-decoration: none; cursor: pointer; transition: transform .25s var(--ease), background-color .25s, color .25s, border-color .25s; will-change: transform; }
.btn--sm { min-height: 40px; padding: .5em 1.1em; font-size: .82rem; }
.btn--gold { background: var(--gold); color: var(--ink); }
.btn--gold:hover { background: var(--gold-2); color: var(--ink); }
.btn--ox { background: var(--ox); color: var(--bone); }
.btn--ox:hover { background: var(--ox-2); color: var(--bone); }
.btn--line { border-color: rgba(17,17,17,.35); color: var(--ink); background: transparent; }
.btn--line:hover { border-color: var(--ink); color: var(--ink); background: rgba(17,17,17,.05); }
.btn--light { border-color: rgba(243,238,228,.4); color: var(--bone); }
.btn--light:hover { border-color: var(--bone); color: var(--bone); background: rgba(243,238,228,.08); }
.arrow { display: inline-flex; align-items: center; gap: .5em; margin-top: 22px; color: var(--gold-2); font: 500 .9rem/1 var(--fm); letter-spacing: .06em; text-decoration: none; }
.arrow span { transition: transform .3s var(--ease); } .arrow:hover { color: var(--bone); } .arrow:hover span { transform: translateX(6px); }

/* header */
.hdr { position: fixed; inset: 0 0 auto 0; z-index: 100; color: var(--bone); transition: background-color .4s, color .4s, box-shadow .4s, transform .45s var(--ease); }
.hdr.is-light { color: var(--ink); background: rgba(243,238,228,.9); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 1px 0 rgba(17,17,17,.08); }
.hdr.is-hidden { transform: translateY(-110%); }
.hdr__in { display: flex; align-items: center; gap: 24px; min-height: 72px; padding-inline: var(--gut); max-width: calc(var(--max) + 2 * var(--gut)); margin-inline: auto; }
.wordmark { margin-right: auto; color: inherit; text-decoration: none; font: 400 1.15rem/1 var(--fd); letter-spacing: -.01em; white-space: nowrap; }
.wordmark i, .ftr__mark i, .slab__mark i { font-style: italic; font-weight: 300; opacity: .75; }
.nav { display: none; gap: 26px; }
.nav a { color: inherit; text-decoration: none; font: 500 .78rem/1 var(--fm); letter-spacing: .14em; text-transform: uppercase; opacity: .85; }
.nav a:hover { opacity: 1; text-decoration: underline; text-underline-offset: .4em; }
.hdr .btn--sm { background: var(--gold); color: var(--ink); border-color: var(--gold); display: none; }
.burger { width: 44px; height: 44px; display: grid; place-content: center; gap: 6px; background: none; border: 0; cursor: pointer; color: inherit; }
.burger span { width: 24px; height: 2px; background: currentColor; transition: transform .3s; }
.burger[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); } .burger[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); }
.mnav { display: none; flex-direction: column; padding: 8px var(--gut) 28px; background: var(--ink); color: var(--bone); }
.mnav.is-open { display: flex; }
.mnav a { padding: 16px 0; border-top: 1px solid rgba(243,238,228,.15); color: inherit; text-decoration: none; font: 300 1.7rem/1.1 var(--fd); }
@media (min-width: 900px) { .nav { display: flex; } .hdr .btn--sm { display: inline-flex; } .burger, .mnav { display: none !important; } }

/* ---------- i. hero: the crack ---------- */
.hero { position: relative; height: 230vh; background: var(--ink); color: var(--bone); }
.hero__stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; isolation: isolate; }
.hero__under { position: absolute; inset: 0; display: grid; align-content: center; justify-items: center; text-align: center; padding: 100px var(--gut) 80px; background: radial-gradient(60rem 30rem at 50% 60%, rgba(122,30,30,.28), transparent 65%), var(--ink); opacity: 0; transform: scale(.94); }
.tagline { max-width: 20ch; margin: 0 0 30px; font-size: clamp(2rem, 1.2rem + 4.6vw, 5.4rem); font-weight: 300; line-height: 1.08; }
.tagline em { color: var(--gold-2); }
.subform { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; max-width: 480px; }
.subform__in { flex: 1 1 220px; min-width: 0; min-height: 50px; padding: .6em 1em; border-radius: 2px; border: 1.5px solid rgba(243,238,228,.35); background: rgba(243,238,228,.06); color: var(--bone); font: 400 max(16px, 1rem)/1.3 var(--ft); }
.subform__in::placeholder { color: rgba(243,238,228,.5); }
.subform__in:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 4px rgba(176,141,87,.25); }
.subform .btn { flex: 0 0 auto; }
.slab { position: absolute; inset: -2% -1%; z-index: 2; will-change: transform; }
.slab__face { position: absolute; inset: 0; background: #2a2622; background-image: radial-gradient(80rem 40rem at 20% 10%, rgba(243,238,228,.07), transparent 60%), radial-gradient(50rem 30rem at 80% 90%, rgba(176,141,87,.10), transparent 60%), linear-gradient(160deg, rgba(255,255,255,.04), transparent 40%, rgba(0,0,0,.25)), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012 .02' numOctaves='4' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 .78 0 0 0 0 .74 0 0 0 0 .66 0 0 0 .35 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E"); box-shadow: inset 0 0 120px rgba(0,0,0,.6); }
.slab--l .slab__face { clip-path: polygon(0 0, 52.2% 0, 49.2% 12%, 53.2% 24%, 47.2% 38%, 51.2% 50%, 46.2% 63%, 50.2% 75%, 45.2% 88%, 49.2% 100%, 0 100%); }
.slab--r .slab__face { clip-path: polygon(52.2% 0, 100% 0, 100% 100%, 49.2% 100%, 45.2% 88%, 50.2% 75%, 46.2% 63%, 51.2% 50%, 47.2% 38%, 53.2% 24%, 49.2% 12%); }
.slab__mark { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; padding: 0 var(--gut); color: var(--bone); }
.slab__mark b { display: block; font: 300 clamp(3rem, 1.5rem + 9vw, 9rem)/.95 var(--fd); letter-spacing: -.035em; font-variation-settings: "opsz" 144; }
.slab__mark i { display: block; margin: .1em 0; font: italic 300 clamp(1.4rem, 1rem + 2vw, 2.6rem)/1 var(--fd); color: var(--gold-2); opacity: 1; }
.slab__mark small { display: block; margin-top: 26px; font: 500 .72rem/1.5 var(--fm); letter-spacing: .22em; text-transform: uppercase; color: rgba(243,238,228,.6); }
.crack { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; pointer-events: none; }
.crack path { fill: none; stroke: var(--gold-2); stroke-width: .35; stroke-linejoin: round; vector-effect: non-scaling-stroke; stroke-width: 2px; stroke-dasharray: 1; stroke-dashoffset: 1; filter: drop-shadow(0 0 6px rgba(201,167,110,.9)); }
.hint { position: absolute; left: 0; right: 0; bottom: 22px; z-index: 4; display: flex; flex-direction: column; align-items: center; gap: 10px; margin: 0; font: 500 .66rem/1 var(--fm); letter-spacing: .3em; text-transform: uppercase; color: rgba(243,238,228,.6); transition: opacity .4s; }
.hint i { width: 1px; height: 40px; background: linear-gradient(var(--gold-2), transparent); animation: hint 2.2s ease-in-out infinite; }
@keyframes hint { 0%, 100% { opacity: .2; transform: scaleY(.6); transform-origin: top; } 50% { opacity: 1; transform: none; } }
.hero.is-open .hint { opacity: 0; }
/* no-JS and reduced motion: the slabs are already apart and the content is visible */
.no-js .hero, .reduce .hero { height: auto; min-height: 100svh; }
.no-js .hero__under, .reduce .hero__under { position: relative; opacity: 1; transform: none; min-height: 100svh; }
.no-js .slab, .reduce .slab, .no-js .crack, .reduce .crack, .no-js .hint, .reduce .hint { display: none; }

/* ---------- ii. manifesto ---------- */
.manifesto { background: var(--bone); }
.pull { margin: 0 0 clamp(40px, 6vw, 80px); max-width: 60rem; }
.pull p { font: italic 300 clamp(1.9rem, 1.2rem + 3.6vw, 4.6rem)/1.1 var(--fd); letter-spacing: -.02em; }
.pull footer { margin-top: 18px; font: 400 .85rem/1.4 var(--fm); color: var(--mute); }
.pillars { display: grid; grid-template-columns: minmax(0,1fr); gap: 0; border-top: 1px solid rgba(17,17,17,.2); }
.pillars li { position: relative; padding: 28px 0 28px 58px; border-bottom: 1px solid rgba(17,17,17,.2); }
.pillars__n { position: absolute; left: 0; top: 30px; display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--ox); border-radius: 50%; font: italic 400 1.1rem/1 var(--fd); color: var(--ox); }
.pillars h2 { font-size: clamp(1.8rem, 1.4rem + 1.6vw, 2.8rem); font-weight: 300; margin-bottom: .35em; }
.pillars p { font-size: 1.02rem; color: #2a2520; max-width: 34rem; }
@media (min-width: 820px) { .pillars { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 0 40px; } .pillars li { padding: 34px 0 40px 58px; } }
.manifesto .fine { margin-top: 22px; }

/* ---------- iii. read ---------- */
.read { background: var(--bone-2); }
.filters { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { min-height: 38px; padding: 0 16px; border-radius: 999px; border: 1px solid rgba(17,17,17,.3); background: none; color: var(--ink); font: 500 .78rem/1 var(--fm); letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--bone); border-color: var(--ink); }
.posts { display: grid; grid-template-columns: minmax(0,1fr); gap: 22px; }
.post { display: grid; grid-template-rows: auto 1fr; min-width: 0; background: var(--bone); border: 1px solid rgba(17,17,17,.12); text-decoration: none; color: var(--ink); overflow: hidden; transition: transform .4s var(--ease), box-shadow .4s; }
.post:hover { transform: translateY(-4px); box-shadow: 0 30px 50px -30px rgba(17,17,17,.5); color: var(--ink); }
.post__img { aspect-ratio: 16 / 9; background: var(--bone-2); overflow: hidden; }
.post__img img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.9) contrast(1.02); transition: transform 1.2s var(--ease); }
.post:hover .post__img img { transform: scale(1.04); }
.post__body { padding: 20px 22px 24px; }
.post__meta { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; font: 500 .7rem/1 var(--fm); letter-spacing: .14em; text-transform: uppercase; color: var(--mute); }
.post__tag { padding: 4px 8px; border-radius: 2px; background: var(--ox); color: var(--bone); }
.post__tag--essay { background: var(--fresco); }
.post h3 { font-size: clamp(1.35rem, 1.2rem + .7vw, 1.9rem); margin-bottom: .35em; }
.post p { color: #3a332c; font-size: .98rem; }
.post--feat { grid-column: 1 / -1; }
.post--feat h3 { font-size: clamp(1.9rem, 1.4rem + 2.4vw, 3.6rem); font-weight: 300; }
@media (min-width: 700px) { .posts { grid-template-columns: repeat(2, minmax(0,1fr)); } .post--feat { grid-template-columns: 1.2fr 1fr; grid-template-rows: none; } .post--feat .post__img { aspect-ratio: 4 / 3; max-height: 480px; } .post--feat .post__body { padding: 34px 36px; align-self: center; } }
@media (min-width: 1000px) { .posts { grid-template-columns: repeat(3, minmax(0,1fr)); } }
.post.is-hidden { display: none; }
.status { margin: 14px 0 0; font: 400 .85rem/1.4 var(--fm); color: var(--mute); }
.status:empty { display: none; }

/* ---------- iv. shelf ---------- */
.shelf { background: var(--bone); overflow: hidden; }
.shelf__ctrl { display: flex; gap: 8px; }
.shelf__ctrl button { width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(17,17,17,.35); background: none; color: var(--ink); font-size: 1.3rem; cursor: pointer; }
.shelf__ctrl button:hover { border-color: var(--ink); }
.shelf__wrap { position: relative; padding-bottom: 26px; }
.shelf__track { display: flex; gap: 12px; align-items: flex-end; padding: 40px var(--gut) 0; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; }
.shelf__track::-webkit-scrollbar { display: none; }
.shelf__track li { flex: none; scroll-snap-align: start; }
.spine { position: relative; display: flex; flex-direction: column; justify-content: space-between; width: 92px; height: 380px; padding: 22px 0; text-decoration: none; color: var(--bone); border-radius: 3px 3px 2px 2px; box-shadow: inset 4px 0 0 rgba(255,255,255,.12), inset -3px 0 0 rgba(0,0,0,.25), 0 20px 30px -22px #000; transform-origin: bottom center; transition: transform .5s var(--ease), width .5s var(--ease), box-shadow .5s; overflow: hidden; }
.spine__t { writing-mode: vertical-rl; transform: rotate(180deg); margin: 0 auto; font: 400 1.25rem/1 var(--fd); letter-spacing: .01em; white-space: nowrap; }
.spine__y { writing-mode: vertical-rl; transform: rotate(180deg); margin: 0 auto; font: 400 .62rem/1 var(--fm); letter-spacing: .16em; text-transform: uppercase; opacity: .8; white-space: nowrap; }
.spine__d { position: absolute; left: 100px; right: 16px; bottom: 22px; opacity: 0; font: 400 .95rem/1.4 var(--ft); transition: opacity .4s .15s; }
.spine--ox { background: linear-gradient(90deg, var(--ox-2), var(--ox)); }
.spine--ox2 { background: linear-gradient(90deg, #4a1212, #6c1b1b); }
.spine--ink { background: linear-gradient(90deg, #0c0c0c, #262321); }
.spine--fresco { background: linear-gradient(90deg, #4c575e, var(--fresco)); }
.spine--gold { background: linear-gradient(90deg, #96764a, var(--gold)); color: var(--ink); }
.spine--bone { background: linear-gradient(90deg, #ddd5c4, var(--bone)); color: var(--ink); box-shadow: inset 4px 0 0 rgba(255,255,255,.6), inset -3px 0 0 rgba(0,0,0,.12), 0 20px 30px -22px #000; }
.spine:hover, .spine:focus-visible, .spine.is-out { width: 320px; transform: translateY(-16px) rotate(-1.2deg); color: inherit; }
.spine:hover .spine__d, .spine:focus-visible .spine__d, .spine.is-out .spine__d { opacity: 1; }
.spine:hover .spine__t, .spine.is-out .spine__t { color: inherit; }
.shelf__board { height: 14px; margin: 0 var(--gut); background: linear-gradient(#5a4330, #3b2a1d); box-shadow: 0 10px 24px -8px rgba(0,0,0,.6); border-radius: 2px; }
@media (min-width: 700px) { .spine { width: 104px; height: 440px; } .spine__t { font-size: 1.45rem; } }

/* ---------- v. listen (dark) ---------- */
.listen { background: var(--ink); color: var(--bone); overflow: hidden; isolation: isolate; }
.listen__art, .join__art { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.listen__art img, .join__art img { width: 100%; height: 120%; object-fit: cover; opacity: .32; filter: saturate(.75) contrast(1.1); will-change: transform; }
.listen::after, .join::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, var(--ink), rgba(17,17,17,.35) 40%, rgba(17,17,17,.65) 80%, var(--ink)); }
.listen__grid { display: grid; grid-template-columns: minmax(0,1fr); gap: 32px; align-items: center; }
@media (min-width: 900px) { .listen__grid { grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 60px; } }
.listen h2 em { color: var(--gold-2); }
.player { min-height: 352px; border-radius: 12px; background: rgba(243,238,228,.06); border: 1px solid rgba(243,238,228,.15); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); overflow: hidden; }
.player iframe { width: 100%; height: 352px; border: 0; }
.player__load { display: grid; place-items: center; gap: 10px; width: 100%; min-height: 352px; padding: 30px; background: none; border: 0; color: var(--bone); cursor: pointer; font-family: var(--ft); }
.player__load b { font: 400 1.6rem/1.1 var(--fd); } .player__load small { font: 400 .8rem/1 var(--fm); color: rgba(243,238,228,.6); letter-spacing: .08em; }
.player__disc { width: 110px; height: 110px; border-radius: 50%; background: repeating-radial-gradient(circle, #0a0a0a 0 2px, #1c1a18 2px 4px); box-shadow: 0 0 0 1px rgba(243,238,228,.2), 0 20px 50px -20px #000; position: relative; transition: transform .6s var(--ease); }
.player__disc::after { content: ""; position: absolute; inset: 42px; border-radius: 50%; background: var(--ox); box-shadow: inset 0 0 0 10px var(--gold); }
.player__load:hover .player__disc { transform: rotate(25deg) scale(1.05); }

/* ---------- vi. zine ---------- */
.zine { background: var(--bone-2); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='z'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='1'/%3E%3CfeColorMatrix values='0 0 0 0 .1 0 0 0 0 .08 0 0 0 0 .06 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23z)'/%3E%3C/svg%3E"); overflow: hidden; }
.collage { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 22px 16px; align-items: start; }
.zcover { position: relative; margin: 0; transform: rotate(var(--t, 0deg)); transition: transform .5s var(--ease); }
.zcover:hover { transform: rotate(0) scale(1.03); z-index: 2; }
.zcover__face { aspect-ratio: 8.5 / 11; display: grid; align-content: space-between; padding: 14px; background: #fbf7ef; color: var(--ink); border: 1px solid rgba(17,17,17,.2); box-shadow: 0 30px 40px -30px #000, 0 0 0 1px rgba(255,255,255,.4) inset; background-image: repeating-linear-gradient(0deg, rgba(0,0,0,.035) 0 1px, transparent 1px 3px); }
.zcover__face--dark { background: #171412; color: var(--bone); background-image: repeating-linear-gradient(90deg, rgba(255,255,255,.04) 0 1px, transparent 1px 3px); }
.zcover__face small { font: 500 .62rem/1 var(--fm); letter-spacing: .22em; text-transform: uppercase; }
.zcover__face b { font: 400 clamp(1.6rem, 1rem + 3vw, 3.4rem)/.95 var(--fd); letter-spacing: -.03em; }
.zcover__face i { font: italic 300 clamp(1.3rem, 1rem + 1.6vw, 2.2rem)/1 var(--fd); color: var(--ox); }
.zcover__face--dark i { color: var(--gold-2); }
.zcover__face span { font: 400 .68rem/1 var(--fm); letter-spacing: .14em; text-transform: uppercase; }
.zcover figcaption { margin-top: 10px; font: 400 .78rem/1.4 var(--fm); color: var(--mute); }
.tape { position: absolute; z-index: 2; top: -12px; left: 50%; width: 110px; height: 28px; margin-left: -55px; background: rgba(243,233,200,.75); transform: rotate(-4deg); box-shadow: 0 2px 4px rgba(0,0,0,.15); }
.tape--r { left: auto; right: -30px; top: 18px; margin: 0; transform: rotate(40deg); }
.staple { position: absolute; z-index: 2; left: 12px; top: 45%; width: 4px; height: 22px; background: #777; box-shadow: 0 0 0 1px #444; }
.zcard { grid-column: 1 / -1; padding: 26px; background: var(--bone); border: 1px solid rgba(17,17,17,.14); box-shadow: 0 30px 50px -40px #000; }
.zlist { margin-top: 22px; padding-top: 16px; border-top: 1px dashed rgba(17,17,17,.25); font-size: .95rem; }
.zlist li { padding: 6px 0; }
@media (min-width: 900px) { .collage { grid-template-columns: 1fr 1fr 1.4fr; gap: 30px; } .zcard { grid-column: auto; } .zcover--i { margin-top: 20px; } .zcover--ii { margin-top: 70px; } }

/* ---------- vii. stephen ---------- */
.stephen { background: var(--bone); }
.st__grid { display: grid; grid-template-columns: minmax(0,1fr); gap: 36px; align-items: start; }
@media (min-width: 900px) { .st__grid { grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr); gap: 64px; } .portrait { position: sticky; top: 100px; } }
.portrait { margin: 0; transform: rotate(var(--t, 0deg)); }
.portrait img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 30%; border: 12px solid #fbf7ef; box-shadow: 0 40px 60px -40px #000, 0 0 0 1px rgba(17,17,17,.25); filter: contrast(1.08) saturate(.85); }
.portrait figcaption { margin-top: 12px; font: 400 .78rem/1.5 var(--fm); color: var(--mute); }
.press { margin-top: 30px; padding-top: 22px; border-top: 1px solid rgba(17,17,17,.2); }
.press__l { margin: 0 0 12px; font: 500 .7rem/1 var(--fm); letter-spacing: .26em; text-transform: uppercase; color: var(--mute); }
.press__row { display: flex; flex-wrap: wrap; gap: 10px 26px; align-items: baseline; margin-bottom: 10px; }
.press__row li { color: var(--ink); white-space: nowrap; }
.p--nyt { font: 700 1.25rem/1 'Fraunces', Georgia, serif; font-variation-settings: "opsz" 9; letter-spacing: -.01em; }
.p--wsj { font: 500 1.05rem/1 var(--fd); letter-spacing: .02em; }
.p--nw { font: 700 .95rem/1 var(--fm); letter-spacing: .06em; text-transform: uppercase; }
.p--am { font: italic 400 1.2rem/1 var(--fd); }
.p--ft { font: 400 1.05rem/1 var(--fd); letter-spacing: .12em; text-transform: uppercase; }
.book { display: grid; grid-template-columns: 110px minmax(0,1fr); gap: 22px; align-items: center; margin-top: 30px; padding: 22px; background: var(--bone-2); border: 1px solid rgba(17,17,17,.12); }
.book__cover { aspect-ratio: 2 / 3; display: grid; align-content: space-between; padding: 12px 10px; background: linear-gradient(160deg, #1c1917, #3a2a26); color: var(--bone); border-left: 5px solid var(--gold); box-shadow: 0 20px 30px -20px #000; }
.book__cover span { font: 400 1rem/1.05 var(--fd); } .book__cover small { font: 400 .55rem/1 var(--fm); letter-spacing: .14em; text-transform: uppercase; color: var(--gold-2); }
.book h3 { margin-bottom: .25em; }
.links { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 28px; font-size: .98rem; }
.links a { color: var(--ink); }
.links a:hover { color: var(--ox); }

/* ---------- viii. readers ---------- */
.readers { background: var(--bone-2); }
.quotes { display: grid; grid-template-columns: minmax(0,1fr); gap: 18px; }
@media (min-width: 800px) { .quotes { grid-template-columns: repeat(3, minmax(0,1fr)); } }
.quotes blockquote { margin: 0; height: 100%; padding: 28px 26px; background: var(--bone); border: 1px solid rgba(17,17,17,.12); display: flex; flex-direction: column; justify-content: space-between; gap: 18px; }
.quotes p { font: italic 300 clamp(1.3rem, 1.15rem + .7vw, 1.7rem)/1.3 var(--fd); }
.quotes p::before { content: "❝"; display: block; margin-bottom: 8px; font-size: 2.2rem; line-height: 1; color: var(--ox); font-style: normal; }
.quotes footer { font: 400 .8rem/1.4 var(--fm); color: var(--mute); }
.readers .fine { margin-top: 18px; }

/* ---------- ix. subscribe (dark) ---------- */
.join { background: var(--ink); color: var(--bone); overflow: hidden; isolation: isolate; text-align: center; }
.join h2 em { color: var(--gold-2); }
.tiers { display: grid; grid-template-columns: minmax(0,1fr); gap: 16px; max-width: 60rem; margin: 30px auto 0; text-align: left; }
@media (min-width: 760px) { .tiers { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.tier { padding: 26px; border: 1px solid rgba(243,238,228,.2); background: rgba(243,238,228,.05); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.tier--paid { background: var(--bone); color: var(--ink); border-color: var(--bone); }
.tier h3 { margin-bottom: .5em; }
.tier ul { margin: 0 0 18px; padding-left: 1.2em; list-style: "✦  "; }
.tier li { padding: 3px 0; }
.tier .fine { margin-bottom: 16px; }
.embed { margin: 36px auto 0; max-width: 520px; }
.embed iframe { width: 100%; margin: 0 auto; background: var(--bone); border-radius: 4px; }
.subform--fallback { margin: 14px auto 0; justify-content: center; }
.js .embed.has-frame .subform--fallback { display: none; }

/* ---------- footer ---------- */
.ftr { padding-block: 40px 34px; background: var(--ink); color: rgba(243,238,228,.7); border-top: 1px solid rgba(243,238,228,.12); font-size: .9rem; }
.ftr__in { display: grid; gap: 16px; }
.ftr__mark { margin: 0; color: var(--bone); font: 400 1.3rem/1 var(--fd); }
.ftr__links { display: flex; flex-wrap: wrap; gap: 8px 20px; font: 500 .76rem/1 var(--fm); letter-spacing: .14em; text-transform: uppercase; }
.ftr__links a { color: var(--bone); text-decoration: none; } .ftr__links a:hover { color: var(--gold-2); }
.ftr__c { margin: 0; font: 400 .78rem/1.5 var(--fm); }

/* ---------- reveal ---------- */
.js .rv { opacity: 0; transform: translateY(22px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.js .rv.in { opacity: 1; transform: none; }
.js .st > * { opacity: 0; transform: translateY(18px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.js .st.in > * { opacity: 1; transform: none; }
.js .st.in > :nth-child(2) { transition-delay: .1s; } .js .st.in > :nth-child(3) { transition-delay: .2s; }
.js .lines > span { display: block; opacity: 0; transform: translateY(.4em); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.js .lines.in > span { opacity: 1; transform: none; }
.js .lines.in > :nth-child(2) { transition-delay: .14s; } .js .lines.in > :nth-child(3) { transition-delay: .28s; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .rv, .js .st > *, .js .lines > span { opacity: 1 !important; transform: none !important; }
  .grain { display: none; }
}