/* Middle sections, redesign v3. Everything here is prefixed .mx- so the kept
   top (header + #listen) and bottom (#continue + footer) are untouched. */
:root{--mx-gold:#e6c98a;--mx-card:rgba(255,255,255,.045);--mx-line:rgba(246,239,230,.14)}
.mx{position:relative;padding:clamp(4.5rem,10vw,9rem) clamp(1.2rem,5vw,5rem);background:var(--bg);overflow:clip;border-top:1px solid var(--line)}
.mx-alt{background:var(--bg2)}
.mx-wrap{max-width:1180px;margin:0 auto;position:relative;z-index:1}
.mx h2{font-size:clamp(2.1rem,4.8vw,4rem);text-wrap:balance}
.mx h3{font-size:1.45rem}
.mx p{margin:0 0 1em}
.mx .eyebrow{display:flex;align-items:center;gap:.9rem;white-space:nowrap}
.mx .eyebrow::before{content:"";width:2.2rem;height:1px;background:var(--ember);opacity:.8}
.mx-lead{font:300 clamp(1.15rem,1.7vw,1.45rem)/1.5 Fraunces,Georgia,serif;color:#eadccb}
.mx-mute{color:var(--mute)}
.mx-btn-row{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:1.6rem}
.mx-link{display:inline-flex;align-items:center;gap:.5rem;color:var(--ember);text-decoration:none;font-weight:600;font-size:.95rem;border-bottom:1px solid rgba(240,178,122,.4);padding-bottom:.15rem;transition:gap .4s var(--ease),border-color .3s}
.mx-link:hover{gap:.8rem;border-color:var(--ember)}

/* reveals */
.mx-js .mx-r{opacity:0;transform:translateY(30px);transition:opacity 1s var(--ease),transform 1.1s var(--ease);transition-delay:calc(var(--d,0) * 90ms)}
.mx-js .mx-r.in{opacity:1;transform:none}
.mx-js .mx-r.mx-r-l{transform:translateX(-36px)}.mx-js .mx-r.mx-r-rt{transform:translateX(36px)}
.mx-js .mx-r.mx-r-l.in,.mx-js .mx-r.mx-r-rt.in{transform:none}

/* ---------- 1. The book ---------- */
.mx-book{background:radial-gradient(70% 60% at 82% 30%,rgba(240,178,122,.14),transparent 70%),radial-gradient(60% 70% at 8% 90%,rgba(138,74,46,.2),transparent 70%),#1a1319}
.mx-ghost{position:absolute;left:-2vw;top:50%;margin:0;transform:translate3d(var(--gx,0),-50%,0);font:italic 300 clamp(7rem,21vw,19rem)/.82 Fraunces,serif;letter-spacing:-.04em;color:transparent;-webkit-text-stroke:1px rgba(246,239,230,.07);white-space:nowrap;pointer-events:none;user-select:none;z-index:0}
.mx-book-grid{display:grid;grid-template-columns:minmax(260px,5fr) 7fr;gap:clamp(2.4rem,7vw,7rem);align-items:center}
.mx-cover-stage{position:relative;perspective:1200px;justify-self:center;width:min(100%,380px)}
.mx-cover-stage::before{content:"";position:absolute;inset:-14% -22% -10% -22%;background:radial-gradient(closest-side,rgba(240,178,122,.28),transparent 75%);filter:blur(10px);z-index:0}
.mx-cover3d{position:relative;z-index:1;transform-style:preserve-3d;transition:transform .5s var(--ease);will-change:transform}
.mx-cover3d img{width:100%;border-radius:3px 6px 6px 3px;box-shadow:0 50px 80px -30px rgba(0,0,0,.85),0 0 0 1px rgba(255,255,255,.06),inset 6px 0 8px -4px rgba(0,0,0,.4)}
.mx-cover3d::after{content:"";position:absolute;inset:0;border-radius:3px 6px 6px 3px;background:linear-gradient(105deg,rgba(255,255,255,.22),transparent 28%,transparent 70%,rgba(0,0,0,.18));pointer-events:none;mix-blend-mode:soft-light}
.mx-book h2{margin-bottom:.35em}
.mx-facts{display:grid;grid-template-columns:repeat(4,auto);justify-content:start;gap:0;margin:2.4rem 0 0;padding:0;list-style:none;border-top:1px solid var(--mx-line)}
.mx-facts li{padding:1.1rem 1.6rem 0 0;margin-right:1.6rem;border-right:1px solid var(--mx-line)}
.mx-facts li:last-child{border:0;margin:0}
.mx-facts b{display:block;font:400 clamp(1.5rem,2.6vw,2.2rem)/1 Fraunces,serif;color:var(--ink)}
.mx-facts span{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}
@media(max-width:900px){.mx-book-grid{grid-template-columns:1fr}.mx-cover-stage{width:min(72%,320px)}}
@media(max-width:560px){.mx-facts{grid-template-columns:1fr 1fr;gap:1.2rem 0}.mx-facts li{border:0;margin:0;padding:1rem 0 0}.mx-facts li:nth-child(n+3){border-top:0}}

/* ---------- 2. Four parts, the road ---------- */
.mx-parts-grid{display:grid;grid-template-columns:minmax(260px,4fr) 7fr;gap:clamp(2rem,7vw,7rem);align-items:start}
.mx-sticky{position:sticky;top:6.5rem}
.mx-sticky p{max-width:30ch}
.mx-road{position:relative;padding-left:clamp(3rem,6vw,4.6rem)}
.mx-rail,.mx-rail-fill{position:absolute;left:11px;top:14px;width:2px;border-radius:2px}
.mx-rail{bottom:14px;background:repeating-linear-gradient(to bottom,rgba(246,239,230,.28) 0 9px,transparent 9px 18px)}
.mx-rail-fill{height:var(--p,0px);background:linear-gradient(to bottom,rgba(240,178,122,.2),var(--ember));box-shadow:0 0 14px rgba(240,178,122,.5)}
.mx-walker{position:absolute;left:3px;top:calc(14px + var(--p,0px) - 9px);width:18px;height:18px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ffe3b8,#e08a4a);box-shadow:0 0 0 5px rgba(240,178,122,.18),0 0 22px rgba(240,178,122,.8);z-index:2}
.mx-part{position:relative;padding:0 0 clamp(3rem,6vw,5rem)}
.mx-part:last-child{padding-bottom:0}
.mx-part::before{content:"";position:absolute;left:calc(-1 * clamp(3rem,6vw,4.6rem) + 6px);top:.55rem;width:12px;height:12px;border-radius:50%;background:var(--bg2);border:2px solid rgba(246,239,230,.35);transition:border-color .5s,background .5s,box-shadow .5s;z-index:1}
.mx-part.on::before{border-color:var(--ember);background:var(--ember);box-shadow:0 0 14px rgba(240,178,122,.8)}
.mx-num{display:block;font:italic 300 clamp(4.5rem,9vw,8rem)/.8 Fraunces,serif;color:transparent;-webkit-text-stroke:1px rgba(240,178,122,.55);letter-spacing:-.03em;margin:-.1rem 0 .5rem -.04em;transition:color .8s,-webkit-text-stroke-color .8s}
.mx-part.on .mx-num{color:rgba(240,178,122,.12);-webkit-text-stroke-color:rgba(240,178,122,.95)}
.mx-tag{font:600 .72rem/1 Inter;letter-spacing:.24em;text-transform:uppercase;color:var(--ember);margin:0 0 .5rem}
.mx-part h3{font-size:clamp(1.6rem,2.8vw,2.3rem);line-height:1.1;margin-bottom:.5em}
.mx-part>p:not(.mx-tag){color:#d6c8b8;max-width:52ch}
.mx-chap{list-style:none;margin:1.3rem 0 0;padding:0;max-width:600px;border-top:1px solid var(--mx-line)}
.mx-chap li{display:flex;justify-content:space-between;gap:1.2rem;padding:.7rem 0;border-bottom:1px solid var(--mx-line);font:300 1.08rem/1.3 Fraunces,serif;color:#e7dccd;transition:padding-left .4s var(--ease),color .3s}
.mx-chap li:hover{padding-left:.6rem;color:#fff}
.mx-chap li i{font:500 .78rem Inter;font-style:normal;color:var(--mute);white-space:nowrap;padding-top:.25rem;font-variant-numeric:tabular-nums}
@media(max-width:900px){.mx-parts-grid{grid-template-columns:1fr}.mx-sticky{position:static}}

/* ---------- 3. Seven hazards ---------- */
.mx-haz{background:linear-gradient(180deg,#141016,#1d1419 60%,#141016)}
.mx-tri{position:absolute;right:-8vw;top:6%;width:min(52vw,640px);color:rgba(240,178,122,.09);transform:rotate(var(--r,8deg));pointer-events:none}
.mx-lit{font:300 clamp(1.7rem,3.8vw,3.3rem)/1.22 Fraunces,Georgia,serif;letter-spacing:-.01em;max-width:21em;margin:0 0 .8rem;color:var(--ink)}
.mx-lit .lw{color:rgba(246,239,230,.2);transition:color .5s,text-shadow .5s}
.mx-lit .lw.on{color:#f6efe6}
.mx-lit .lw.hot{color:var(--ember);text-shadow:0 0 18px rgba(240,178,122,.45)}
.mx-cite{font:600 .72rem/1 Inter;letter-spacing:.22em;text-transform:uppercase;color:var(--ember);font-style:normal}
.mx-haz-head{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;margin:clamp(3rem,6vw,5rem) 0 1.6rem;flex-wrap:wrap}
.mx-haz-head h2{margin:0}
.mx-nav{display:flex;gap:.6rem}
.mx-nav button{width:52px;height:52px;border-radius:50%;border:1px solid rgba(246,239,230,.3);background:transparent;color:var(--ink);cursor:pointer;display:grid;place-items:center;transition:background .3s,border-color .3s,opacity .3s}
.mx-nav button:hover:not(:disabled){background:var(--ember);color:#1d0f05;border-color:var(--ember)}
.mx-nav button:disabled{opacity:.3;cursor:default}
.mx-nav svg{width:20px;height:20px}
.mx-track{--w:min(300px,78vw);list-style:none;--gut:max(clamp(1.2rem,5vw,5rem),calc((100vw - 1180px) / 2));margin:0 calc(-1 * var(--gut));padding:.6rem var(--gut) 1.6rem;display:flex;gap:1.1rem;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gut);scrollbar-width:none;overscroll-behavior-x:contain}
.mx-track::-webkit-scrollbar{display:none}
.mx-hz{flex:0 0 var(--w);scroll-snap-align:start;position:relative;min-height:360px;border-radius:24px;padding:1.5rem 1.5rem 1.3rem;background:linear-gradient(165deg,rgba(255,255,255,.07),rgba(255,255,255,.02));border:1px solid var(--mx-line);display:flex;flex-direction:column;overflow:hidden;transition:transform .6s var(--ease),border-color .4s,background .4s}
.mx-hz::after{content:"";position:absolute;left:0;bottom:0;height:3px;width:100%;background:var(--ember);transform:scaleX(0);transform-origin:left;transition:transform .7s var(--ease)}
.mx-hz:hover{transform:translateY(-8px);border-color:rgba(240,178,122,.5);background:linear-gradient(165deg,rgba(240,178,122,.14),rgba(255,255,255,.02))}
.mx-hz:hover .rn{-webkit-text-stroke-color:var(--ember);color:rgba(240,178,122,.14);transform:translateY(-4px)}
.mx-hz:hover .ico{transform:rotate(-8deg) scale(1.15)}
.mx-hz:hover::after{transform:scaleX(1)}
.mx-hz .rn{font:italic 300 5.6rem/.9 Fraunces,serif;color:transparent;-webkit-text-stroke:1px rgba(240,178,122,.6);letter-spacing:-.02em;transition:color .6s,-webkit-text-stroke-color .6s,transform .8s var(--ease);display:block;margin-bottom:auto;position:relative;z-index:1}
.mx-hz .ico{position:absolute;right:1.4rem;top:1.5rem;width:30px;height:27px;color:var(--ember);transition:transform .5s var(--ease)}
.mx-hz small{display:block;font:600 .7rem/1 Inter;letter-spacing:.22em;text-transform:uppercase;color:var(--ember);margin:3rem 0 .6rem}
.mx-hz h3{font-size:1.65rem;line-height:1.1;margin:0 0 1rem;position:relative}
.mx-hz .pg{font:500 .8rem Inter;color:var(--mute);border-top:1px solid var(--mx-line);padding-top:.8rem;position:relative}
.mx-prog{height:2px;background:rgba(246,239,230,.12);border-radius:2px;margin-top:.4rem;overflow:hidden}
.mx-prog i{display:block;height:100%;width:100%;background:var(--ember);transform-origin:left;transform:scaleX(var(--tp,.2))}

/* ---------- 4. Hear it ---------- */
.mx-hear{background:radial-gradient(60% 80% at 100% 0,rgba(240,178,122,.12),transparent 65%),var(--bg2)}
.mx-hear-grid{display:grid;grid-template-columns:minmax(240px,4fr) 7fr;gap:clamp(2rem,6vw,5.5rem);align-items:start}
.mx-picker{list-style:none;margin:2rem 0 0;padding:0;border-top:1px solid var(--mx-line)}
.mx-picker button{all:unset;box-sizing:border-box;width:100%;display:grid;grid-template-columns:2.4rem 1fr auto;gap:.4rem;align-items:baseline;padding:1rem 0;border-bottom:1px solid var(--mx-line);cursor:pointer;transition:padding-left .4s var(--ease)}
.mx-picker button:hover{padding-left:.5rem}
.mx-picker button:focus-visible{outline:2px solid var(--ember);outline-offset:2px}
.mx-picker .n{font:italic 300 1.3rem Fraunces,serif;color:var(--ember);opacity:.7}
.mx-picker .t{font:400 1.12rem/1.25 Fraunces,serif;color:var(--mute);transition:color .3s}
.mx-picker .d{font:500 .78rem Inter;color:var(--mute);font-variant-numeric:tabular-nums}
.mx-picker button[aria-pressed=true] .t{color:var(--ink)}.mx-picker button[aria-pressed=true] .n{opacity:1}
.mx-picker button[aria-pressed=true]{border-bottom-color:var(--ember)}
.mx-player{position:relative;border-radius:28px;padding:clamp(1.2rem,2.6vw,2.2rem);background:linear-gradient(160deg,rgba(255,255,255,.08),rgba(255,255,255,.02));border:1px solid var(--mx-line);box-shadow:0 40px 80px -40px rgba(0,0,0,.8);overflow:hidden}
.mx-player::before{content:"";position:absolute;inset:auto -20% -60% -20%;height:90%;background:radial-gradient(closest-side,rgba(240,178,122,calc(.08 + var(--lvl,0) * .35)),transparent);pointer-events:none}
.mx-pl-top{display:flex;justify-content:space-between;gap:1rem;align-items:baseline;margin-bottom:.8rem;position:relative}
.mx-pl-where{font:600 .7rem/1.3 Inter;letter-spacing:.2em;text-transform:uppercase;color:var(--ember)}
.mx-pl-time{font:500 .8rem Inter;color:var(--mute);font-variant-numeric:tabular-nums;white-space:nowrap}
.mx-pl-text{position:relative;height:clamp(13rem,26vw,16.5rem);overflow:hidden;-webkit-mask:linear-gradient(transparent,#000 8%,#000 86%,transparent);mask:linear-gradient(transparent,#000 8%,#000 86%,transparent);outline-offset:4px}
.mx-pl-text:hover,.mx-pl-text:focus{overflow-y:auto;scrollbar-width:none}
.mx-pl-text p{font:400 clamp(1.3rem,2.2vw,1.85rem)/1.38 Fraunces,Georgia,serif;margin:0;padding:.5rem 0 5rem;color:rgba(246,239,230,.28)}
.mx-pl-ctl{display:flex;align-items:center;gap:1rem;margin-top:.8rem;position:relative}
.mx-pl-ctl .rd-play{width:56px;height:56px}
.mx-pl-ctl .rd-play svg{width:22px;height:22px}
.mx-wave{flex:1;height:48px;cursor:pointer;touch-action:none;border-radius:6px}
.mx-wave canvas{width:100%;height:100%}
.mx-hint{font-size:.78rem;color:var(--mute);margin:.9rem 0 0;position:relative}
.mx-player.is-playing .rd-play .i-pause{display:block}.mx-player.is-playing .rd-play .i-play{display:none}
@media(max-width:900px){.mx-hear-grid{grid-template-columns:1fr}}

/* ---------- 5. Quotes ---------- */
.mx-quotes{background:radial-gradient(80% 70% at 15% 0,rgba(255,200,140,.12),transparent 60%),linear-gradient(165deg,#251a25 0%,#4a2b2c 55%,#7a4129 100%);border-top:1px solid var(--line)}
.mx-quotes .mx-wrap{display:grid;gap:clamp(2.2rem,5vw,4rem)}
.mx-qmark{position:absolute;left:-.06em;top:-.12em;font:italic 300 clamp(9rem,18vw,16rem)/1 Fraunces,serif;color:rgba(240,178,122,.16);pointer-events:none;user-select:none;z-index:0}
.mx-q-xl blockquote{position:relative;z-index:1}
.mx-q{margin:0;position:relative}
.mx-q blockquote{margin:0;font-family:Fraunces,Georgia,serif;font-style:italic;font-weight:300;letter-spacing:-.015em}
.mx-q figcaption{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;margin-top:1.3rem}
.mx-q cite{font:600 .72rem/1.3 Inter;letter-spacing:.2em;text-transform:uppercase;color:var(--ember);font-style:normal}
.mx-q .qw{display:inline-block;opacity:0;transform:translateY(.5em);transition:opacity .8s var(--ease),transform .9s var(--ease);transition-delay:calc(var(--i) * 45ms)}
.mx-q.in .qw,html:not(.mx-js) .mx-q .qw{opacity:1;transform:none}
.mx-q-xl{padding-top:clamp(3rem,6vw,5rem)}
.mx-q-xl blockquote{font-size:clamp(2.3rem,5.6vw,4.9rem);line-height:1.08;max-width:15em}
.mx-q-xl blockquote em{color:#ffd9a6}
.mx-q-row{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1rem,3vw,2rem)}
.mx-q-card{padding:clamp(1.5rem,3vw,2.4rem);border-radius:26px;background:rgba(20,14,20,.38);border:1px solid rgba(246,239,230,.13);backdrop-filter:blur(6px);display:flex;flex-direction:column;justify-content:space-between;gap:1.5rem}
.mx-q-card blockquote{font-size:clamp(1.55rem,2.6vw,2.15rem);line-height:1.2}
.mx-q-card figcaption{margin:0}
.mx-q-wide{display:grid;grid-template-columns:minmax(0,1fr);border-left:2px solid var(--ember);padding-left:clamp(1.2rem,3vw,2.6rem);max-width:60rem}
.mx-q-wide blockquote{font-size:clamp(1.5rem,3vw,2.5rem);line-height:1.22}
.mx-q-end{text-align:center;padding-top:1rem}
.mx-q-end blockquote{font-size:clamp(1.9rem,4vw,3.4rem);line-height:1.15;max-width:19em;margin:0 auto}
.mx-q-end figcaption{justify-content:center}
.mx-hearbtn{display:inline-flex;align-items:center;gap:.55rem;font:600 .82rem Inter;letter-spacing:.04em;color:var(--ink);background:rgba(255,255,255,.08);border:1px solid rgba(246,239,230,.3);padding:.55rem 1rem .55rem .7rem;border-radius:999px;cursor:pointer;text-decoration:none;transition:background .3s,color .3s,border-color .3s}
.mx-hearbtn:hover{background:var(--ember);color:#1d0f05;border-color:var(--ember)}
.mx-hearbtn svg{width:22px;height:22px;padding:5px;border-radius:50%;background:var(--ember);color:#1d0f05;fill:currentColor}
.mx-hearbtn:hover svg{background:#1d0f05;color:var(--ember)}
@media(max-width:760px){.mx-q-row{grid-template-columns:1fr}}

/* ---------- 6. Editions ---------- */
.mx-ed-head{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;flex-wrap:wrap;margin-bottom:2.4rem}
.mx-ed-head h2{margin:0}
.mx-ed-head p{max-width:34ch;color:var(--mute);margin:0}
.mx-audioband{position:relative;display:grid;grid-template-columns:5fr 6fr;gap:clamp(1.5rem,5vw,4rem);align-items:center;padding:clamp(1.6rem,4vw,3rem);border-radius:32px;background:linear-gradient(120deg,#2a1c26,#3a2325 55%,#4a2b27);border:1px solid rgba(240,178,122,.28);overflow:hidden}
.mx-audioband .mx-tag{margin-bottom:.8rem}
.mx-audioband h3{font-size:clamp(1.9rem,3.6vw,3rem);margin-bottom:.4em}
.mx-audioband p{color:#dccdbb;max-width:44ch}
.mx-bars{display:flex;align-items:center;justify-content:center;gap:5px;height:clamp(110px,16vw,170px)}
.mx-bars i{flex:1;max-width:9px;min-width:3px;height:100%;border-radius:6px;background:linear-gradient(to top,#d98a4c,var(--mx-gold));transform:scaleY(var(--h,.3));animation:mxbar 2.6s ease-in-out infinite;animation-delay:var(--dl,0s);box-shadow:0 0 14px rgba(230,201,138,.35)}
@keyframes mxbar{0%,100%{transform:scaleY(var(--h,.3))}50%{transform:scaleY(calc(var(--h,.3) * .35 + .1))}}
.mx-bars.is-off i{animation-play-state:paused}
.mx-formats{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2.4vw,1.8rem);margin-top:clamp(1rem,2.4vw,1.8rem)}
.mx-fmt{position:relative;border-radius:28px;overflow:hidden;background:#1b130e;border:1px solid var(--mx-line);display:flex;flex-direction:column}
.mx-fmt .pic{aspect-ratio:4/4.4;overflow:hidden;position:relative}
.mx-fmt .pic img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease)}
.mx-fmt:hover .pic img{transform:scale(1.06)}
.mx-fmt .pic::after{content:"";position:absolute;inset:auto 0 0 0;height:45%;background:linear-gradient(transparent,#1b130e);pointer-events:none}
.mx-fmt .body{padding:0 1.6rem 1.7rem;margin-top:-2.6rem;position:relative;z-index:1;display:flex;flex-direction:column;flex:1}
.mx-fmt .n{font:italic 300 1rem Fraunces,serif;color:var(--ember)}
.mx-fmt h3{font-size:1.9rem;margin:.1rem 0 .4rem}
.mx-fmt p{color:var(--mute);font-size:.95rem;flex:1;margin-bottom:1.1rem}
.mx-note{color:var(--mute);font-size:.85rem;margin-top:2rem}
@media(max-width:900px){.mx-audioband{grid-template-columns:1fr}.mx-formats{grid-template-columns:1fr}.mx-fmt{flex-direction:row;align-items:stretch}.mx-fmt .pic{flex:0 0 42%;aspect-ratio:auto}.mx-fmt .pic::after{display:none}.mx-fmt .body{margin:0;padding:1.3rem 1.2rem;justify-content:center}}
@media(max-width:520px){.mx-fmt{flex-direction:column}.mx-fmt .pic{flex:none;aspect-ratio:4/3.6}.mx-fmt .pic::after{display:block}.mx-fmt .body{margin-top:-2.4rem;padding:0 1.3rem 1.5rem}}

/* ---------- 7. About ---------- */
.mx-about{background:radial-gradient(60% 70% at 0 100%,rgba(240,178,122,.1),transparent 65%),var(--bg2)}
.mx-about-grid{display:grid;grid-template-columns:5fr 6fr;gap:clamp(2.4rem,7vw,7rem);align-items:center}
.mx-portrait{position:relative;width:min(100%,460px);justify-self:center}
.mx-portrait::before{content:"";position:absolute;inset:0;transform:translate(22px,22px);border:1px solid rgba(240,178,122,.55);border-radius:30px}
.mx-portrait .frame{position:relative;border-radius:30px;overflow:hidden;aspect-ratio:4/5;box-shadow:0 40px 70px -30px rgba(0,0,0,.8);background:#1a1418;-webkit-mask-image:radial-gradient(#000, #000);mask-image:radial-gradient(#000, #000);transform:translateZ(0)}
.mx-portrait img{position:absolute;left:0;width:100%;max-width:none;height:calc(100% + 24px);top:-8px;object-fit:cover;object-position:center top;transform:translate3d(0,var(--py,0),0);will-change:transform;background:#1a1418}
.mx-portrait figcaption{position:absolute;left:1.4rem;bottom:1.2rem;z-index:2;font:500 .72rem Inter;letter-spacing:.2em;text-transform:uppercase;color:#fff;text-shadow:0 1px 12px rgba(0,0,0,.6)}
.mx-portrait .frame::after{content:"";position:absolute;inset:auto 0 0 0;height:30%;background:linear-gradient(transparent,rgba(10,6,10,.65));pointer-events:none}
.mx-about-text p{color:#ddd0bf}
.mx-roles{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin:1.8rem 0 0;padding:1.3rem 0 0;border-top:1px solid var(--mx-line);list-style:none}
.mx-roles b{display:block;font:400 1.15rem/1.2 Fraunces,serif;color:var(--ink);margin-bottom:.2rem}
.mx-roles span{font-size:.82rem;color:var(--mute);line-height:1.4;display:block}
.mx-social{display:flex;gap:1.4rem;margin-top:1.6rem;flex-wrap:wrap}
@media(max-width:900px){.mx-about-grid{grid-template-columns:1fr}.mx-portrait{width:min(86%,400px)}}
@media(max-width:560px){.mx-roles{grid-template-columns:1fr}}

/* ---------- book.html extras ---------- */
.mx-pagehero{padding-top:clamp(5rem,9vw,8rem)}
.mx-pagehero h1{font-size:clamp(2.8rem,7.4vw,6.4rem);margin-bottom:.3em}
.mx-read{background:#1a1319}
.mx-read-grid{display:grid;grid-template-columns:minmax(220px,4fr) 7fr;gap:clamp(2rem,6vw,6rem);align-items:start}
.mx-excerpt p{font:300 clamp(1.2rem,1.8vw,1.42rem)/1.7 Fraunces,Georgia,serif;color:#e7dccd}
.mx-excerpt h3{font:italic 300 clamp(1.5rem,2.4vw,2rem)/1.15 Fraunces,serif;color:var(--ember);margin:2.4rem 0 .8rem}
.mx-excerpt h3:first-child{margin-top:0}
.mx-excerpt .first::first-letter{font:italic 300 4.6em/.8 Fraunces,serif;float:left;margin:.08em .1em 0 0;color:var(--ember)}
.mx-excerpt .brk{text-align:center;color:var(--ember);letter-spacing:.6em;margin:2.2rem 0}
.mx-facts-list{display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem 2rem;margin:1.8rem 0 0}
.mx-facts-list dt{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);margin-bottom:.2rem}
.mx-facts-list dd{margin:0;font:400 1.3rem Fraunces,serif}
@media(max-width:900px){.mx-read-grid{grid-template-columns:1fr}.mx-facts-list{grid-template-columns:1fr 1fr}}

@media(prefers-reduced-motion:reduce){
 .mx-js .mx-r,.mx-q .qw{opacity:1!important;transform:none!important;transition:none!important}
 .mx-bars i{animation:none}.mx-cover3d{transition:none}.mx-ghost{transform:translateY(-50%)!important}
}

.mx p.mx-note{margin:2rem 0 0}.mx p.mx-hint{margin:.9rem 0 0}.mx p.mx-tag{margin:0 0 .5rem}
.mx-facts-list{margin-bottom:.4rem}

/* logo (the one sanctioned change to the kept header, plus the footer) */
.brand{display:inline-flex;align-items:center;line-height:0}
.brand .logo-full{height:56px;width:auto;display:block}
.brand .logo-mark{display:none;height:38px;width:auto}
.inner .top{padding-top:.7rem;padding-bottom:.7rem}
.inner .brand .logo-full{height:46px}
@media(max-width:640px){.brand .logo-full{display:none}.brand .logo-mark{display:block}}
.foot-brand{display:flex;flex-direction:column;gap:.7rem;align-items:flex-start}
.foot-logo{height:64px;width:auto;max-width:100%;display:block}