/* ==========================================================================
   WordPress additions: real media, editable modes, The Den, articles, pages, 404
   ========================================================================== */
.skip{position:fixed;left:12px;top:-60px;z-index:200;background:var(--fox);color:var(--ink);padding:10px 16px;font-weight:600;transition:top .2s}
.skip:focus{top:12px}
.no-grain .grain{display:none}

/* ---------- hero backgrounds ---------- */
.hero__media{position:absolute;inset:0;z-index:0}
.hero__media img,.hero__media video{width:100%;height:100%;object-fit:cover}
.hero__media::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(11,10,10,var(--dim,.6)) 30%,rgba(11,10,10,calc(var(--dim,.6) * .7))),linear-gradient(0deg,var(--ink),transparent 40%)}
.hero--image .hero__fox,.hero--video .hero__fox{opacity:.04}

/* ---------- real project media ---------- */
.bw__page--img img,.ph__page--img img{width:100%;height:auto;display:block}
.ph__page--img{width:390px}
.mk-img{position:absolute;inset:0;background:var(--sc,#1c1a19);overflow:hidden}
.mk-img img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease)}
:is(.proj__a:hover,.proj.is-live .proj__a,.shot.is-live) .mk-img img{transform:scale(1.04)}
.mk-img--empty{display:grid;place-items:center;padding:10%}
.mk-img--empty span{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:clamp(28px,3vw,54px);color:var(--char);text-align:center;line-height:.9}
.mk-film video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease),filter .8s}
.mk-film.is-idle video{filter:saturate(.75) brightness(.82)}
:is(.proj__a:hover,.proj.is-live .proj__a) .mk-film video{transform:scale(1.04)}

/* ---------- prove stage + mega with real media ---------- */
.bw--real .bw__url:empty{visibility:hidden}
.bb--img{position:absolute;overflow:hidden;background:var(--coal-2)}
.bb--img img{width:100%;height:100%;object-fit:cover;display:block}
.bb--i0{left:14%;top:12%;width:36%;aspect-ratio:1}
.bb--i1{left:54%;top:10%;width:32%;aspect-ratio:1.3}
.bb--i2{left:54%;top:44%;width:28%;aspect-ratio:1.5}
.bb--i3{left:26%;top:58%;width:26%;aspect-ratio:1.6;transform:rotate(-6deg)}
.bb--i4{left:72%;top:62%;width:18%;aspect-ratio:.8}
.pst--img{position:relative;aspect-ratio:3/4;overflow:hidden;background:var(--coal-2)}
.pst--img img{width:100%;height:100%;object-fit:cover;display:block}
.st__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* ---------- design canvas: uploaded pieces ---------- */
.swap__good--img,.swap__good--layers{background:#111;padding:0}
.swap__good--img img{width:100%;height:100%;object-fit:cover;display:block}
.swap__good--layers .sw-layer{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:1}
.swap__good--layers .sw-layer:not(:first-child){opacity:0}
.swap__good h4 em{color:inherit;font-style:normal}
.swap__good h4 .w em{color:var(--white)}
.swap__bad--img{padding:0;display:block}
.swap__bad--img img{width:100%;height:100%;object-fit:cover;display:block}

/* ---------- film lightbox ---------- */
.lb__media iframe,.lb__media video{position:absolute;inset:0;width:100%;height:100%;border:0;background:#000}
.lb__btns{display:flex;flex-wrap:wrap;align-items:center;gap:6px 22px}
.lb__btns .tlink[hidden]{display:none}

/* ---------- homepage odds and ends ---------- */
.work__empty{max-width:var(--max);display:grid;gap:18px}
.work__empty .proj{grid-column:auto}
.work__empty .mono{color:var(--mute)}
.den__feat.has-img .den__art{padding:0}
.den__feat.has-img .den__art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.den__feat.has-img:hover .den__art img{transform:scale(1.04)}
.den__all{max-width:var(--max);margin-top:30px}
.cta__contact a{color:inherit}
.cta__contact a:hover,.foot__col a:hover{color:var(--fox)}
body.cf-previewing .intro{display:none!important}

/* ---------- case study additions ---------- */
.cs-sum{margin-top:22px;color:var(--soft);font-size:clamp(17px,1.3vw,20px);max-width:30em}
.cs-hero--film .cs-fullmedia video.cs-bgvid,.cs-hero--film .cs-fullmedia img.cs-bgimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cs-player{position:absolute;inset:9vh 0;width:100%;height:calc(100% - 18vh);border:0;z-index:4;background:#000;object-fit:contain}
.cs-hero--film.is-cinema .cs-fullmedia::after{opacity:0}
.cs-hero--film.is-cinema .cs-playbig{top:auto;bottom:calc(9vh + 20px);margin-top:0;width:90px;height:90px;z-index:5}
.cs-hero--film .cs-meta button.btn{border:0;cursor:pointer}
.ba--img .ba__after,.ba--img .ba__before{background:#fff}
.ba--img img{width:100%;height:100%;object-fit:cover;object-position:top;display:block}
.ba--wide{aspect-ratio:16/9}.ba--square{aspect-ratio:1;max-width:min(80vh,900px)}
.ba--natural{aspect-ratio:auto}
.ba--natural .ba__after{position:relative}
.ba--natural img{height:auto}
.wt--real{background:#000}
.wt--real .wt__video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;cursor:pointer}
.wt--real .wt__chap{left:3%;top:4%;background:rgba(0,0,0,.6);padding:5px 9px}
.wt--real .wt__chap:empty{display:none}
.wt__mark{position:absolute;top:50%;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-radius:50%;background:var(--amber);border:0;padding:0;z-index:2;cursor:pointer}
.wt__snd{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--soft);flex:none;padding:6px 10px;border:1px solid rgba(255,255,255,.2)}
.wt__snd.is-on{color:var(--ink);background:var(--fox);border-color:var(--fox)}
.gal__it--img img{width:100%;height:auto;display:block;pointer-events:none}
.stills--img .still img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.stills--img .still:nth-child(n+5){grid-column:span 6;aspect-ratio:16/9}
.sys--real .sys__logo img{max-width:46%;max-height:60%;object-fit:contain}
.sys--real .sys__app img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cs-video{margin:0;position:relative;aspect-ratio:16/9;background:#000;box-shadow:0 50px 100px -30px rgba(0,0,0,.8)}
.cs-video iframe,.cs-video video{position:absolute;inset:0;width:100%;height:100%;border:0}
.cs-video figcaption,.cs-img figcaption{position:absolute;left:0;top:100%;margin-top:14px;font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.cs-img{margin:0;position:relative}
.cs-img img{width:100%;height:auto}
.cs-block--bleed{padding-inline:0}
.cs-block--bleed .cs-img figcaption{left:var(--gutter)}
.cs-prose{max-width:44em;color:var(--soft);font-size:clamp(17px,1.3vw,20px);line-height:1.65}
.cs-prose p+p{margin-top:1em}
.cs-prose b{color:var(--white);font-weight:600}
.cs-ask{text-align:center;display:flex;flex-direction:column;align-items:center}
.cs-ask .cs-label{justify-content:center}

/* ---------- shared page chrome ---------- */
.page-main{min-height:70vh}
.page-main .note{font-family:var(--hand);color:var(--fox);font-size:clamp(24px,2vw,30px);display:inline-block;transform:rotate(-3deg);line-height:1.1}
.den-hero,.page-hero,.post-hero{position:relative;padding:calc(var(--nav-h) + clamp(60px,10vh,120px)) var(--gutter) clamp(40px,6vw,80px);overflow:hidden;max-width:calc(var(--max) + var(--gutter) * 2)}
.den-hero__ghost{position:absolute;right:-3vw;top:calc(var(--nav-h) - 2vw);font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:30vw;line-height:.8;color:transparent;-webkit-text-stroke:1px rgba(246,242,236,.06);pointer-events:none;white-space:nowrap}
.den-hero__t,.page-hero__t{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:clamp(84px,14vw,240px);line-height:.82;margin:22px 0 calc(24px + .11em);position:relative;text-wrap:balance}
.page-hero__t{font-size:clamp(60px,9vw,160px)}
.den-hero__t em,.page-hero__t em,.post-hero__t em{color:var(--fox);font-style:normal}
.den-hero .lead,.page-hero .lead{position:relative}
.den-cats{position:relative;display:flex;flex-wrap:wrap;gap:8px;margin-top:34px}
.den-cats a{height:36px;padding:0 16px;border-radius:999px;border:1px solid var(--line);font-size:13px;color:var(--soft);display:inline-flex;align-items:center;gap:6px;transition:all .3s}
.den-cats a sup{font-family:var(--mono);font-size:9px;color:var(--mute)}
.den-cats a:hover{color:var(--white);border-color:var(--char)}
.den-cats a.is-on{background:var(--fox);border-color:var(--fox);color:var(--ink);font-weight:600}
.den-cats a.is-on sup{color:var(--ink)}
.den-search{position:relative;display:flex;max-width:420px;margin-top:26px;border-bottom:1px solid var(--line)}
.den-search input{flex:1;background:transparent;border:0;color:var(--white);font:inherit;font-size:16px;padding:12px 0;outline:0}
.den-search input::placeholder{color:var(--mute)}
.den-search button{width:44px;color:var(--fox)}
.den-search button .arr{width:18px;height:10px}
.den-search:focus-within{border-color:var(--fox)}

/* ---------- article cards ---------- */
.den-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(50px,6vw,90px) clamp(20px,2.4vw,40px);padding:clamp(30px,4vw,60px) var(--gutter) clamp(80px,8vw,140px);max-width:calc(var(--max) + var(--gutter) * 2)}
.den-card a{display:block}
.den-card__art{aspect-ratio:16/10;background:var(--coal-2);position:relative;overflow:hidden;display:flex;align-items:flex-end;padding:7%}
.den-card.has-img .den-card__art{padding:0}
.den-card__art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.den-card a:hover .den-card__art img{transform:scale(1.04)}
.den-card__big{font-family:var(--display);font-weight:700;font-size:clamp(90px,9vw,170px);line-height:.75;color:var(--fox);display:flex;align-items:flex-end;gap:8px;transition:transform .8s var(--ease)}
.den-card__big small{font-size:.2em;color:var(--soft);font-family:var(--body);font-stretch:125%;letter-spacing:.2em;padding-bottom:.4em}
.den-card a:hover .den-card__big{transform:translateY(-8px)}
.den-card__bar{position:absolute;left:7%;right:7%;top:9%;height:3px;background:rgba(255,255,255,.1)}
.den-card__bar i{position:absolute;inset:0 40% 0 0;background:var(--fox)}
.den-card__meta{display:flex;flex-wrap:wrap;gap:6px 16px;margin:20px 0 10px;color:var(--fox);font-size:10.5px}
.den-card__meta span+span{color:var(--mute)}
.den-card__t{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:clamp(26px,2.1vw,36px);line-height:.95;text-wrap:balance;transition:color .3s}
.den-card__t em{color:var(--fox);font-style:normal}
.den-card a:hover .den-card__t{color:var(--fox)}
.den-card--feat{grid-column:1/-1;display:block}
.den-card--feat a{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:20px clamp(30px,4vw,70px);align-items:end}
.den-card--feat .den-card__art{grid-row:1/4;aspect-ratio:16/10}
.den-card--feat .den-card__big{font-size:clamp(150px,17vw,300px)}
.den-card--feat .den-card__t{font-size:clamp(44px,4.6vw,82px)}
.den-card--feat .den-card__meta{margin-top:0;align-self:end}
.den-card__ex{color:var(--soft);font-size:clamp(17px,1.3vw,20px);max-width:28em}
.den-pages{padding:0 var(--gutter) 80px;display:flex;gap:8px;flex-wrap:wrap}
.den-pages .page-numbers{min-width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;padding:0 14px;border:1px solid var(--line);font-family:var(--mono);font-size:12px;color:var(--soft)}
.den-pages .page-numbers.current{background:var(--fox);border-color:var(--fox);color:var(--ink)}
.den-pages a.page-numbers:hover{border-color:var(--fox);color:var(--white)}
.den-empty{padding:40px var(--gutter) 140px;display:flex;flex-direction:column;align-items:flex-start;gap:24px}

/* ---------- article ---------- */
.read-line{position:fixed;left:0;right:0;top:0;height:3px;z-index:81;pointer-events:none}
.read-line i{position:absolute;inset:0;background:var(--fox);transform:scaleX(0);transform-origin:left}
.post-hero{max-width:none}
.post-hero .cs-back{margin-bottom:26px}
.post-hero__meta{display:flex;flex-wrap:wrap;gap:8px 20px;font-size:11px;color:var(--mute)}
.post-hero__meta a{color:var(--fox)}
.post-hero__t{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:clamp(56px,8.4vw,150px);line-height:.92;margin:20px 0 0;max-width:13em;text-wrap:balance}
.post-hero__dek{margin-top:26px;font-size:clamp(20px,1.8vw,28px);font-weight:300;line-height:1.35;color:var(--soft);max-width:30em}
.post-hero__by{display:flex;align-items:center;gap:12px;margin-top:30px;color:var(--mute);font-size:14px}
.post-hero__by img{border-radius:50%;width:44px;height:44px;object-fit:cover;background:#1b1918}
.post-hero__by img.is-fox{object-fit:contain;padding:5px;border:1px solid #2e2a28}
.post-hero__by b{color:var(--white);font-weight:600}
.post-img{margin:0 0 clamp(50px,6vw,90px);padding:0 var(--gutter)}
.post-img img{width:100%;max-height:86vh;object-fit:cover}
.prose{max-width:760px;margin:0 auto;padding:0 var(--gutter) 40px;box-sizing:content-box;font-size:clamp(18px,1.3vw,20px);line-height:1.72;color:#E4DED5}
.prose>*+*{margin-top:1.1em}
.prose h2,.prose h3,.prose h4{font-family:var(--display);font-weight:700;text-transform:uppercase;line-height:.95;color:var(--white);margin-top:1.8em}
.prose h2{font-size:clamp(38px,3.4vw,58px)}
.prose h3{font-size:clamp(28px,2.4vw,40px)}
.prose h4{font-size:24px}
.prose a{color:var(--fox);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.prose a:hover{color:var(--amber)}
.prose strong,.prose b{color:var(--white)}
.prose ul,.prose ol{padding-left:1.2em}
.prose ul{list-style:none;padding-left:0}
.prose ul li{position:relative;padding-left:26px}
.prose ul li::before{content:"";position:absolute;left:0;top:.72em;width:10px;height:2px;background:var(--fox)}
.prose ol{list-style:decimal}
.prose ol li::marker{color:var(--fox);font-family:var(--mono);font-size:.8em}
.prose li+li{margin-top:.45em}
.prose blockquote,.prose .wp-block-quote{margin:1.8em 0;padding:0 0 0 30px;border-left:2px solid var(--fox);font-size:1.3em;line-height:1.4;font-weight:300;color:var(--white)}
.prose blockquote cite{display:block;margin-top:12px;font-size:.62em;font-style:normal;font-family:var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.prose .wp-block-pullquote{border:0;padding:0;text-align:left}
.prose .wp-block-pullquote blockquote{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:clamp(40px,4vw,70px);line-height:.9;border:0;padding:0}
.prose figure{margin:2em 0}
.prose img{height:auto}
.prose figcaption{margin-top:10px;font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
.prose .alignwide{margin-left:calc(-1 * min(12vw,180px));margin-right:calc(-1 * min(12vw,180px))}
.prose .alignfull{margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);max-width:100vw}
.prose hr{border:0;height:1px;background:var(--line);margin:3em 0}
.prose code{font-family:var(--mono);font-size:.85em;background:var(--coal-2);color:var(--amber);padding:2px 6px}
.prose pre{background:var(--coal);padding:20px;overflow:auto;font-size:14px;border:1px solid var(--line)}
.prose table{width:100%;border-collapse:collapse;font-size:.9em}
.prose th,.prose td{border-bottom:1px solid var(--line);padding:10px 8px;text-align:left}
.prose th{font-family:var(--body);font-stretch:125%;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--mute)}
.prose .wp-block-button__link{display:inline-flex;background:var(--fox);color:var(--ink);text-decoration:none;font-stretch:125%;font-weight:600;font-size:12.5px;letter-spacing:.18em;text-transform:uppercase;padding:18px 28px;border-radius:0;clip-path:polygon(12px 0,100% 0,calc(100% - 12px) 100%,0 100%)}
.prose .wp-block-embed iframe{width:100%;aspect-ratio:16/9;height:auto}
.post-end{max-width:760px;margin:0 auto;padding:30px var(--gutter) 80px;box-sizing:content-box;display:flex;flex-direction:column;gap:30px}
.share{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.share .wide{margin-right:10px;color:var(--mute);font-size:10.5px}
.share a,.share button{height:38px;padding:0 16px;border:1px solid var(--line);display:inline-flex;align-items:center;font-size:13px;color:var(--soft);transition:all .3s}
.share a:hover,.share button:hover{border-color:var(--fox);color:var(--white)}
.share .share__native{background:var(--fox);border-color:var(--fox);color:var(--ink);font-weight:600}.share .share__native[hidden]{display:none}
.post-tags{display:flex;flex-wrap:wrap;gap:12px;font-family:var(--mono);font-size:12px;color:var(--mute)}
.post-tags a:hover{color:var(--fox)}
.post-more{border-top:1px solid var(--line);padding-top:clamp(60px,7vw,110px)}
.post-more .eyebrow{padding:0 var(--gutter)}
.den-list--3{padding-top:30px}
.post-cta{padding:clamp(80px,9vw,150px) var(--gutter);text-align:center;border-top:1px solid var(--line);display:flex;flex-direction:column;align-items:center;gap:40px}

/* ---------- pages ---------- */
.page-art .prose{padding-bottom:clamp(80px,8vw,140px)}

/* ---------- 404 ---------- */
.lost{min-height:100svh;padding:calc(var(--nav-h) + 40px) var(--gutter) 80px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.lost__num{display:flex;align-items:center;justify-content:center;gap:2vw;font-family:var(--display);font-weight:700;font-size:clamp(150px,26vw,420px);line-height:.8;color:transparent;-webkit-text-stroke:1.5px var(--fox)}
.lost__fox{width:clamp(120px,19vw,300px);height:auto;cursor:pointer;animation:lostLook 5s var(--ease) infinite}
.lost__fox.is-spin{animation:lostSpin .9s var(--ease)}
@keyframes lostLook{0%,40%,100%{transform:rotate(0)}48%,60%{transform:rotate(-10deg) translateX(-8px)}68%,80%{transform:rotate(9deg) translateX(8px)}}
@keyframes lostSpin{to{transform:rotate(360deg)}}
.lost__t{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:clamp(46px,6vw,100px);line-height:.88;margin-top:30px}
.lost__t em{color:var(--fox);font-style:normal}
.lost .lead{margin:22px auto 0}
.lost__links{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px 30px;margin-top:40px}

/* ---------- responsive ---------- */
@media (max-width:1080px){
  .den-list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .den-card--feat a{grid-template-columns:1fr}
  .den-card--feat .den-card__art{grid-row:auto}
}
@media (max-width:760px){
  .den-list{grid-template-columns:1fr;gap:60px}
  .prose .alignwide{margin-left:0;margin-right:0}
  .post-img{padding:0}
  .lost__num{gap:4px}
  .cs-player{inset:0;height:100%}
}
@media (prefers-reduced-motion:reduce){
  .lost__fox{animation:none}
}

/* ============ THE DEN: series marks, the featured flag, The Fox's Verdict, Next in ============ */
.den-mark{width:1.25em;height:1.25em;margin-right:.45em;vertical-align:-.28em;flex:none}
.den-card__meta span:first-child{display:inline-flex;align-items:center}
.post-hero__meta a{display:inline-flex;align-items:center}
.den-card__flag{margin:0 0 4px;display:inline-flex;align-items:center;gap:10px;color:var(--fox);font-size:11px;letter-spacing:.24em;text-transform:uppercase}
.den-card__flag::before{content:"";width:26px;height:1px;background:var(--fox)}
@media (min-width:1081px){.den-card--feat .den-card__art{grid-row:1/6}.den-card--feat .den-card__flag{align-self:end}.den-card--feat .den-card__meta{align-self:start}}
.verdict{position:relative;max-width:760px;margin:clamp(30px,4vw,50px) auto clamp(40px,5vw,70px);padding:clamp(28px,3.4vw,44px) clamp(24px,3.2vw,44px);box-sizing:border-box;background:linear-gradient(135deg,rgba(243,113,33,.12),rgba(243,113,33,.02) 60%),var(--coal-2,#161311);border:1px solid rgba(243,113,33,.35);border-radius:4px;overflow:hidden}
.verdict::after{content:"";position:absolute;right:-40px;bottom:-60px;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,rgba(243,113,33,.22),transparent 70%);pointer-events:none}
.verdict__k{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.verdict__k img{width:46px;height:auto}
.verdict__l{margin:0;color:var(--fox);font-family:var(--body);font-stretch:125%;font-weight:700;font-size:12px;letter-spacing:.26em;text-transform:uppercase}
.verdict__line{position:relative;margin:0;font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:clamp(30px,3.2vw,48px);line-height:.98;color:var(--white);text-wrap:balance}
.verdict__line em{color:var(--fox);font-style:normal}
.verdict__take{position:relative;margin:16px 0 0;color:var(--soft);font-size:clamp(16.5px,1.2vw,19px);line-height:1.62;max-width:40em}
@media (max-width:760px){.verdict{margin-left:var(--gutter);margin-right:var(--gutter)}}
.den-next{max-width:calc(var(--max) + var(--gutter) * 2);margin:0 auto;padding:0 var(--gutter) clamp(50px,6vw,90px);box-sizing:border-box}
.den-next a{display:grid;grid-template-columns:minmax(0,1fr) auto auto;grid-template-areas:"k img arr" "t img arr";align-items:center;gap:6px clamp(18px,2.4vw,36px);padding:clamp(20px,2.4vw,30px) 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);color:var(--white);text-decoration:none}
.den-next__k{grid-area:k;display:inline-flex;align-items:center;color:var(--fox);font-size:11px;letter-spacing:.22em;text-transform:uppercase}
.den-next__t{grid-area:t;font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:clamp(28px,3vw,46px);line-height:.95;transition:color .3s}
.den-next__t em{color:var(--fox);font-style:normal}
.den-next__img{grid-area:img;width:clamp(120px,14vw,200px);aspect-ratio:16/10;object-fit:cover;border-radius:2px}
.den-next .arr{grid-area:arr;width:28px;height:14px;color:var(--fox);transition:transform .35s var(--ease,ease)}
.den-next a:hover .den-next__t{color:var(--fox)}.den-next a:hover .arr{transform:translateX(6px)}
.den-next a:focus-visible{outline:2px solid var(--fox);outline-offset:6px}
@media (max-width:700px){.den-next a{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"k arr" "t arr"}.den-next__img{display:none}}

/* ============ THE DEN 1.4.1: one headline per page, covers instead of title cards, a real reading layout ============ */

/* ---------- the cover: an article without a photo gets its series mark and its number, never its headline ---------- */
.den-cover{position:absolute;inset:0;display:block;overflow:hidden;background:linear-gradient(160deg,#1c1714 0%,#0e0c0b 72%);container-type:size;pointer-events:none}
.den-cover__grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:44px 44px;-webkit-mask-image:radial-gradient(120% 90% at 80% 20%,#000 0%,transparent 75%);mask-image:radial-gradient(120% 90% at 80% 20%,#000 0%,transparent 75%)}
.den-cover__glow{position:absolute;right:-28%;top:-40%;width:95%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(243,113,33,.45) 0%,rgba(243,113,33,.14) 38%,transparent 68%)}
.den-cover__mark{position:absolute;right:6%;top:9%;height:78%;width:auto;color:var(--fox);transform:rotate(-7deg);transform-origin:60% 40%;filter:drop-shadow(0 0 22px rgba(243,113,33,.35));transition:transform 1.1s var(--ease)}
.den-cover__k{position:absolute;left:6%;top:8%;display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:max(9.5px,3.2cqh);letter-spacing:.24em;text-transform:uppercase;color:var(--soft)}
.den-cover__k::before{content:"";width:2.4em;height:1px;background:var(--fox)}
.den-cover__no{position:absolute;left:5.5%;bottom:5%;display:flex;flex-direction:column;line-height:1}
.den-cover__no small{font-family:var(--mono);font-size:max(9.5px,3.2cqh);letter-spacing:.24em;text-transform:uppercase;color:var(--fox);margin:0 0 1.6cqh .3em}
.den-cover__no b{font-family:var(--display);font-weight:700;font-size:56cqh;line-height:.78;letter-spacing:-.01em;color:transparent;-webkit-text-stroke:max(1px,.35cqh) rgba(244,239,232,.72)}
.den-cover--v1 .den-cover__glow{right:auto;left:-30%;top:auto;bottom:-45%}.den-cover--v1 .den-cover__mark{transform:rotate(6deg)}
.den-cover--v2 .den-cover__glow{right:-10%;top:-55%;width:120%}.den-cover--v2 .den-cover__mark{top:13%;height:72%}
.den-cover--v3 .den-cover__glow{right:-35%;top:20%}.den-cover--v3 .den-cover__mark{transform:rotate(-12deg);right:3%}
.den-cover--v4 .den-cover__glow{right:auto;left:15%;top:-60%;width:110%}.den-cover--v4 .den-cover__mark{transform:rotate(4deg)}
a:hover .den-cover__mark{transform:rotate(-2deg) scale(1.05)}
.den-card.has-img .den-card__art,.den__feat.has-img .den__art{padding:0}
.den-card__art .den-cover,.den__art .den-cover{transition:transform 1.2s var(--ease)}

/* ---------- the Den page: the title once, the series beside it ---------- */
.den-hero--idx{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:40px clamp(40px,6vw,110px);align-items:end;max-width:calc(var(--max) + var(--gutter) * 2)}
.den-hero--idx .den-hero__t{margin-top:0}
.den-hero--idx .cs-back{margin-bottom:24px}
.den-series{position:relative;align-self:end}
.den-series__k{margin:0 0 6px;color:var(--fox);font-size:10.5px;letter-spacing:.24em}
.den-series ul{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.den-series li{border-bottom:1px solid var(--line)}
.den-series a{position:relative;display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:4px 16px;align-items:center;padding:15px 0;color:var(--white);transition:color .3s}
.den-series a::before{content:"";position:absolute;left:0;bottom:-1px;height:1px;width:0;background:var(--fox);transition:width .6s var(--ease)}
.den-series a:hover::before,.den-series a.is-on::before{width:100%}
.den-series__m{display:flex;color:var(--fox)}
.den-series__m .den-mark{width:24px;height:24px;margin:0}
.den-series__m i{width:10px;height:10px;background:var(--fox);transform:rotate(45deg);margin-left:6px}
.den-series__t{display:flex;flex-direction:column;gap:3px;min-width:0}
.den-series__t b{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:clamp(20px,1.55vw,25px);line-height:1;letter-spacing:.01em;transition:color .3s,transform .5s var(--ease)}
.den-series__t small{font-size:13.5px;line-height:1.4;color:var(--mute);transition:color .3s}
.den-series__n{font-size:11px;color:var(--mute)}
.den-series a:hover b,.den-series a.is-on b{color:var(--fox)}
.den-series a:hover b{transform:translateX(4px)}
.den-series a:hover small{color:var(--soft)}
.den-series--compact a{padding:11px 0}.den-series--compact small{display:none}
.den-series a:focus-visible{outline:2px solid var(--fox);outline-offset:4px}

/* the lead story */
.den-card--feat a{align-items:center}
.den-card--feat .den-card__t{font-size:clamp(40px,4vw,72px)}
.den-card__go{margin-top:6px;align-self:start;justify-self:start}

/* ---------- the article ---------- */
.post-hero__t{font-size:clamp(50px,6.6vw,118px);max-width:12.5em}
.post-hero__no{color:var(--white)}
.post-hero--art .den-cover--hero{inset:0 0 0 auto;width:min(46vw,760px);background:none;-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 35%);mask-image:linear-gradient(90deg,transparent 0%,#000 35%)}
.den-cover--hero .den-cover__grid{-webkit-mask-image:radial-gradient(90% 80% at 70% 45%,#000 0%,transparent 72%);mask-image:radial-gradient(90% 80% at 70% 45%,#000 0%,transparent 72%)}
.den-cover--hero .den-cover__glow{right:-20%;top:-10%;width:100%;opacity:.75}
.den-cover--hero .den-cover__mark{top:auto;bottom:10%;right:8%;height:62%;opacity:.55}
.den-cover--hero .den-cover__k{display:none}
.den-cover--hero .den-cover__no{left:auto;right:7%;top:calc(var(--nav-h) + 4%);bottom:auto;align-items:flex-end}
.den-cover--hero .den-cover__no b{font-size:34cqh;-webkit-text-stroke:1px rgba(244,239,232,.16)}
.den-cover--hero .den-cover__no small{display:none}
.post-hero>:not(.den-cover){position:relative}
@media (min-width:1081px){.post-hero--art .post-hero__t,.post-hero--art .post-hero__dek{max-width:min(12.5em,64vw)}.post-hero--art .post-hero__dek{max-width:min(30em,56vw)}}
@media (max-width:1080px){.post-hero--art .den-cover--hero{width:70vw;opacity:.35}.den-cover--hero .den-cover__no{display:none}}

/* the reading column, with the article's sections beside it on wide screens */
.post-body{position:relative;padding:clamp(10px,2vw,30px) var(--gutter) 0}
.post-body .prose{padding:0 0 40px}
.post-toc{display:none}
@media (min-width:1240px){
  .post-body.has-toc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,760px) minmax(0,1fr);column-gap:clamp(40px,4vw,80px)}
  .post-body.has-toc .prose{grid-column:2;grid-row:1;max-width:none;margin:0}
  .post-toc{display:block;grid-column:1;grid-row:1;justify-self:end;align-self:start;position:sticky;top:calc(var(--nav-h) + 36px);width:min(250px,100%)}
}
.post-toc__k{margin:0 0 12px;color:var(--fox);font-size:10.5px;letter-spacing:.24em}
.post-toc ol{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.post-toc li{border-bottom:1px solid var(--line)}
.post-toc a{position:relative;display:grid;grid-template-columns:30px minmax(0,1fr);gap:6px;padding:11px 0;font-size:13.5px;line-height:1.35;color:var(--mute);transition:color .3s}
.post-toc a span{font-size:10.5px;padding-top:2px;color:var(--char,#5b534d);transition:color .3s}
.post-toc a::after{content:"";position:absolute;left:0;bottom:-1px;height:1px;width:0;background:var(--fox);transition:width .5s var(--ease)}
.post-toc a:hover{color:var(--white)}
.post-toc a.is-on{color:var(--white)}.post-toc a.is-on span{color:var(--fox)}.post-toc a.is-on::after{width:100%}
.post-toc__time{margin:14px 0 0;font-size:11px;color:var(--mute);letter-spacing:.06em}

/* the sections: numbered, ruled, a size that reads instead of shouts */
.post-body .prose{counter-reset:sec}
.post-body .prose>p:first-of-type{font-size:1.2em;line-height:1.55;color:var(--white)}
.post-body .prose h2{counter-increment:sec;font-size:clamp(32px,2.9vw,48px);line-height:.98;margin-top:1.7em;padding-top:.9em;border-top:1px solid var(--line);scroll-margin-top:calc(var(--nav-h) + 24px)}
.post-body .prose h2::before{content:counter(sec,decimal-leading-zero);display:block;margin-bottom:16px;font-family:var(--mono);font-weight:400;font-size:12px;letter-spacing:.22em;color:var(--fox)}
.post-body .prose h2+*{margin-top:.8em}
.post-body .prose h3{font-size:clamp(24px,1.9vw,30px)}
.post-body .prose blockquote{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:clamp(30px,2.6vw,42px);line-height:1;letter-spacing:.005em;border-left-width:3px;padding-left:28px}
.post-img{max-width:calc(1180px + var(--gutter) * 2);box-sizing:border-box;margin-left:auto;margin-right:auto}
.post-img img{display:block;width:100%;height:auto;max-height:none;object-fit:contain}

/* ---------- phones ---------- */
@media (max-width:1080px){
  .den-hero--idx{grid-template-columns:1fr;align-items:start}
}
@media (max-width:700px){
  .den-series ul{display:flex;gap:8px;overflow-x:auto;border:0;margin:0 calc(-1 * var(--gutter));padding:2px var(--gutter) 6px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .den-series ul::-webkit-scrollbar{display:none}
  .den-series li{border:0;flex:none}
  .den-series a{grid-template-columns:auto auto auto;gap:8px;height:44px;padding:0 14px;border:1px solid var(--line);border-radius:999px}
  .den-series a::before{display:none}
  .den-series a.is-on{border-color:var(--fox)}
  .den-series__m .den-mark{width:18px;height:18px}
  .den-series__t b{font-size:16px;white-space:nowrap}
  .den-series__t small{display:none}
  .den-series a:hover b{transform:none}
  .post-body .prose>p:first-of-type{font-size:1.12em}
}

/* the homepage Den section with one article: the cover and the headline side by side instead of a half-empty grid */
.den__grid.is-solo{grid-template-columns:1fr}
.den__grid.is-solo .den__list{display:none}
@media (min-width:901px){
  .den__grid.is-solo .den__feat{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);grid-template-rows:1fr auto auto 1fr;column-gap:clamp(30px,5vw,80px)}
  .den__grid.is-solo .den__art{grid-row:1/5;aspect-ratio:16/10}
  .den__grid.is-solo .den__meta{grid-row:2;grid-column:2;margin-top:0}
  .den__grid.is-solo .den__feat h3{grid-row:3;grid-column:2;font-size:clamp(40px,3.8vw,66px)}
}

/* a lead story whose picture is the Bridge's title card: the picture carries the headline, the text side carries the rest */
.den-card--feat.is-card .den-card__t{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.den-card--feat.is-card .den-card__ex{font-size:clamp(19px,1.5vw,24px);line-height:1.45;color:var(--white);max-width:24em}
.den__ex{margin:6px 0 0;color:var(--soft);font-size:clamp(17px,1.3vw,21px);line-height:1.5;max-width:30em}
@media (min-width:901px){.den__grid.is-solo .den__ex{grid-row:3;grid-column:2}}
/* the featured image under the article's title: framed so it reads as a picture, even when it is dark like the page */
.post-img{max-width:calc(980px + var(--gutter) * 2)}
.post-img img{border:1px solid rgba(244,239,232,.14);border-radius:4px;box-shadow:0 40px 90px -30px rgba(0,0,0,.95),0 0 0 6px rgba(244,239,232,.03),0 0 70px -10px rgba(243,113,33,.18)}

/* ---------- article top, 1.4.5: say each thing once ---------- */
.post-hero--cover{max-width:calc(1180px + var(--gutter) * 2);margin:0 auto;box-sizing:border-box;padding-top:calc(var(--nav-h) + clamp(28px,4vw,56px));padding-bottom:clamp(36px,4vw,60px)}
.post-cover{margin:0}
.post-cover img{display:block;width:100%;height:auto;border:1px solid rgba(244,239,232,.14);border-radius:4px;box-shadow:0 50px 100px -40px rgba(0,0,0,.95),0 0 80px -10px rgba(243,113,33,.16)}
.post-meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px 24px;margin:24px 0 0;font-size:11px;letter-spacing:.2em;color:var(--mute)}
.post-meta>span:first-child{color:var(--white)}
.post-meta__by{display:inline-flex;align-items:center;gap:10px;margin-left:auto;font-family:var(--body);font-stretch:100%;font-size:13.5px;letter-spacing:0;text-transform:none;color:var(--mute)}
.post-meta__by b{color:var(--white);font-weight:600}
.post-meta__by img{width:26px;height:26px;border-radius:50%;object-fit:cover;background:#1b1918}
.post-meta__by img.is-fox{object-fit:contain;padding:3px;border:1px solid #2e2a28}
.post-meta--top{margin:0 0 22px;gap:14px}
.post-meta--top a{color:var(--fox);display:inline-flex;align-items:center}
.post-meta--top a+a::before{content:"/";margin-right:14px;color:var(--mute)}
.post-meta--top>a:first-child{color:var(--white)}
.post-hero .post-meta:not(.post-meta--top){max-width:min(100%,1180px)}
@media (max-width:700px){.post-meta__by{margin-left:0;flex-basis:100%}.post-hero--cover{padding-left:0;padding-right:0}.post-cover img{border-radius:0;border-left:0;border-right:0}.post-hero--cover .post-meta{padding:0 var(--gutter)}}

/* ============ ABOUT ============ */
.ab{--abw:calc(var(--max) + var(--gutter) * 2);position:relative}
.ab-hero{position:relative;isolation:isolate;overflow:clip;overflow-clip-margin:0;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(30px,5vw,90px);align-items:end;max-width:var(--abw);margin:0 auto;box-sizing:border-box;padding:calc(var(--nav-h) + clamp(50px,8vh,100px)) var(--gutter) clamp(60px,7vw,110px)}
.ab-hero__t{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:clamp(58px,7.4vw,132px);line-height:.88;margin:22px 0 28px;text-wrap:balance}
.ab-hero__t em{color:var(--fox);font-style:normal}
.ab-hero .lead{max-width:26em;font-size:clamp(19px,1.55vw,24px);line-height:1.5}
.ab-hero__pic{position:relative;margin:0;aspect-ratio:4/5;overflow:hidden;background:#141211}
.ab-hero__pic::before{content:"";position:absolute;inset:14px;border:1px solid rgba(243,113,33,.55);z-index:2;pointer-events:none;clip-path:polygon(0 0,34% 0,34% 1px,1px 1px,1px 34%,0 34%,0 66%,1px 66%,1px calc(100% - 1px),34% calc(100% - 1px),34% 100%,66% 100%,66% calc(100% - 1px),calc(100% - 1px) calc(100% - 1px),calc(100% - 1px) 66%,100% 66%,100% 34%,calc(100% - 1px) 34%,calc(100% - 1px) 1px,66% 1px,66% 0,100% 0,100% 100%,0 100%)}
.ab-hero__pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:40% 30%}
.ab-hero__pic::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(11,10,10,.85) 0%,rgba(11,10,10,0) 38%);pointer-events:none}
.ab-hero__pic figcaption{position:absolute;left:28px;right:28px;bottom:24px;z-index:3;display:flex;justify-content:space-between;gap:12px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--soft)}
.ab-hero__pic figcaption span:first-child{color:var(--white)}
.ab-sec{max-width:var(--abw);margin:0 auto;box-sizing:border-box;padding:clamp(70px,8vw,130px) var(--gutter);border-top:1px solid var(--line)}
.ab-story__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:24px clamp(40px,6vw,110px);align-items:start}
.ab-h{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:clamp(40px,4.4vw,76px);line-height:.92;text-wrap:balance}
.ab-h em{color:var(--fox);font-style:normal}
.ab-copy p{font-size:clamp(17.5px,1.3vw,20px);line-height:1.68;color:#E4DED5}
.ab-copy p+p{margin-top:1.05em}
.ab-copy p:first-child{font-size:clamp(20px,1.6vw,25px);line-height:1.5;color:var(--white)}
.ab-desk{position:relative;min-height:min(86vh,820px);display:grid;align-items:end;overflow:hidden;background:#0c0b0a}
.ab-desk__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 45%}
.ab-desk::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(11,10,10,.92) 0%,rgba(11,10,10,.6) 38%,rgba(11,10,10,0) 70%),linear-gradient(0deg,rgba(11,10,10,.85) 0%,rgba(11,10,10,0) 45%)}
.ab-desk__txt{position:relative;z-index:2;width:100%;max-width:var(--abw);box-sizing:border-box;margin:0 auto;padding:0 var(--gutter) clamp(50px,7vw,100px)}.ab-desk__txt>*{max-width:520px}
.ab-desk__txt p{margin-top:22px;font-size:clamp(18px,1.4vw,22px);line-height:1.55;color:#E4DED5}
.ab-ask{padding:clamp(90px,10vw,160px) var(--gutter);border-top:1px solid var(--line);text-align:center;display:flex;flex-direction:column;align-items:center;gap:40px}
.ab-ask .h-sec{max-width:14em}
.ab-ask__row{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:24px 40px}
@media (max-width:1000px){
  .ab-hero{grid-template-columns:1fr;align-items:start}
  .ab-hero__pic{max-width:520px;aspect-ratio:1}
  .ab-story__grid{grid-template-columns:1fr}
  .ab-how__list{grid-template-columns:1fr}
  }
@media (max-width:700px){
  .ab-desk{min-height:0;flex-direction:column;align-items:stretch}
  .ab-desk__img{position:relative;height:auto;aspect-ratio:3/2}
  .ab-desk::before{display:none}
  .ab-desk__txt{max-width:none;padding:34px var(--gutter) 60px;margin:0}.ab-desk__txt>*{max-width:none}
  .ab-hero__pic figcaption{left:22px;right:22px;bottom:18px}
}
.ab-eye{margin-bottom:clamp(26px,3vw,40px)}

/* ---- About, round two: the thread, the file card, the timeline, the seal, the ticker, the quote ---- */
.ab-thread{position:absolute;left:0;top:0;width:100%;pointer-events:none;z-index:4;overflow:visible}
.ab-thread path{fill:none;stroke:var(--fox);stroke-width:1.4;stroke-linejoin:round}
.ab-thread #abThreadTip{fill:#FFD9B8}
@media (prefers-reduced-motion:reduce){.ab-thread circle{display:none}}
.ab-ghost{position:absolute;z-index:-1;left:calc(var(--gutter) - .06em);top:calc(var(--nav-h) + 10px);font-family:var(--display);font-weight:700;font-size:clamp(260px,34vw,620px);line-height:.8;color:transparent;-webkit-text-stroke:1px rgba(246,242,236,.09);pointer-events:none;user-select:none;will-change:transform}
.ab-card{position:relative;z-index:1}
.ab-card .ab-hero__pic{z-index:1;box-shadow:0 40px 90px -40px rgba(0,0,0,.9)}

.ab-story__side{position:sticky;top:calc(var(--nav-h) + 40px);align-self:start}
.ab-tl{position:relative;list-style:none;margin:clamp(34px,4vw,56px) 0 0;padding:0 0 0 30px;display:grid;gap:clamp(14px,1.6vw,22px)}
.ab-tl__rail{position:absolute;left:5px;top:8px;bottom:8px;width:1px;background:var(--line)}
.ab-tl__rail i{position:absolute;left:0;top:0;width:1px;height:var(--fill,0%);background:var(--fox);transition:height .6s var(--ease)}
.ab-tl__i{position:relative;display:grid;grid-template-columns:clamp(70px,6.4vw,96px) minmax(0,1fr);gap:16px;align-items:baseline;opacity:.32;transition:opacity .5s var(--ease)}
.ab-tl__i::before{content:"";position:absolute;left:-30px;top:.45em;width:11px;height:11px;border-radius:50%;background:var(--ink);border:1px solid var(--char);box-sizing:border-box;transition:background .4s,border-color .4s,box-shadow .4s}
.ab-tl__i b{font-weight:500;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--fox)}
.ab-tl__i span{font-size:clamp(16px,1.15vw,18px);line-height:1.45;color:var(--white)}
.ab-tl__i.is-on{opacity:.75}
.ab-tl__i.is-on::before{border-color:var(--fox);background:var(--fox)}
.ab-tl__i.is-cur{opacity:1}
.ab-tl__i.is-cur::before{box-shadow:0 0 0 5px rgba(243,113,33,.2),0 0 18px rgba(243,113,33,.6)}
.ab-tl__i:last-child span{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:clamp(24px,2vw,32px);line-height:1}

.ab-where__side{display:flex;flex-direction:column;align-items:flex-start;gap:clamp(30px,4vw,56px)}
.ab-seal{position:relative;width:clamp(150px,13vw,200px);aspect-ratio:1}
.ab-seal__ring{position:absolute;inset:0;width:100%;height:100%;animation:abSpin 26s linear infinite}
.ab-seal__ring text{font-family:var(--body);font-stretch:125%;font-weight:600;font-size:13px;letter-spacing:.12em;fill:var(--soft)}
.ab-seal::before{content:"";position:absolute;inset:15%;border-radius:50%;border:1px solid rgba(243,113,33,.6);background:radial-gradient(circle at 50% 40%,rgba(243,113,33,.16),rgba(243,113,33,0) 70%)}
.ab-seal__in{position:absolute;inset:15%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px}
.ab-seal__in img{width:38%;height:auto}
.ab-seal__in b{font-family:var(--display);font-weight:700;font-size:clamp(17px,1.5vw,22px);letter-spacing:.04em;color:var(--white)}
@keyframes abSpin{to{transform:rotate(360deg)}}
.ab-brands{margin-top:clamp(50px,6vw,90px);padding-top:28px;border-top:1px solid var(--line)}
.ab-brands__l{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--fox);margin-bottom:18px}
.ab-brands ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:6px 0}
.ab-brands li{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:clamp(30px,3.4vw,58px);line-height:1;color:var(--white);transition:color .3s}
.ab-brands li{display:inline-flex;align-items:center}
.ab-brands li:not(:last-child)::after{content:"";flex:none;width:.16em;height:.16em;margin:0 .42em;background:var(--fox);transform:translateY(.05em) rotate(45deg)}
.ab-brands li:hover{color:var(--fox)}
.ab-tick{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:clamp(18px,2vw,28px) 0;background:var(--ink-2)}
.ab-tick__track{display:flex;width:max-content;animation:abTick 60s linear infinite}
.ab-tick:hover .ab-tick__track{animation-play-state:paused}
.ab-tick__set{display:flex;align-items:center;flex:none}
.ab-tick__set>span{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:clamp(54px,7vw,120px);line-height:.95;color:transparent;-webkit-text-stroke:1px rgba(246,242,236,.42);white-space:nowrap;padding:0 .2em}
.ab-tick__set>span.is-solid{color:var(--white);-webkit-text-stroke:0}
.ab-tick__set>i{width:clamp(14px,1.4vw,22px);height:clamp(14px,1.4vw,22px);margin:0 clamp(18px,2vw,34px);background:var(--fox);transform:rotate(45deg);flex:none}
@keyframes abTick{to{transform:translateX(-50%)}}

.ab-quote{max-width:var(--abw);margin:0 auto;box-sizing:border-box;padding:clamp(90px,11vw,180px) var(--gutter)}
.ab-quote__t{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:clamp(56px,8.2vw,150px);line-height:.88;max-width:12em;text-wrap:balance}
.ab-quote__t .w{color:#3A3633;transition:color .35s}
.ab-quote__t .w.is-lit{color:var(--white)}
.ab-quote__t em{font-style:normal;color:inherit}
.ab-quote__t .w.is-lit em{color:var(--fox)}


.ab-eyes{width:min(460px,80vw);margin-bottom:-10px}
.cta__eyes{position:relative}
.cta__eyes canvas{display:block;width:100%;aspect-ratio:2.6;cursor:pointer;-webkit-tap-highlight-color:transparent}
.cta__poke{position:absolute;left:0;right:0;bottom:-6px;text-align:center;color:var(--amber);opacity:0;transition:opacity .4s}
.cta__poke.is-on{opacity:1}

@media (max-width:1000px){
  .ab-story__side{position:static}
  .ab-card{max-width:520px}
    .ab-where__side{flex-direction:row;align-items:center;justify-content:space-between;gap:24px}
  .ab-seal{width:130px;flex:none}
}
@media (max-width:700px){
  .ab-ghost{font-size:72vw;top:calc(var(--nav-h) + 20px)}
            .ab-where__side{flex-direction:column;align-items:flex-start}
  .ab-tl__i{grid-template-columns:72px minmax(0,1fr);gap:12px}
}
@media (prefers-reduced-motion:reduce){
  .ab-seal__ring,.ab-tick__track,  .ab-quote__t .w{color:var(--white)}
}

/* ---- Where I've been: both paragraphs read the same ---- */
.ab-where .ab-copy p,.ab-where .ab-copy p:first-child{font-size:clamp(18.5px,1.4vw,22px);line-height:1.62;color:#ECE6DC}

/* ---- How I work: three cards, each with its own little scene ---- */
.ab-how__wrap{position:relative}
.ab-how__list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,1.6vw,26px);perspective:1400px}
.ab-how__i{position:relative;overflow:hidden;display:flex;flex-direction:column;padding:clamp(24px,2.2vw,36px);background:linear-gradient(160deg,#1A1716 0%,#110F0E 70%);border:1px solid var(--line);border-radius:6px;transform-style:preserve-3d;transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .5s var(--ease),border-color .4s,box-shadow .5s}
.ab-how__i::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--fox);transform:scaleX(.18);transform-origin:0 50%;transition:transform .7s var(--ease)}
.ab-how__i::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),rgba(243,113,33,.13),transparent 60%);opacity:0;transition:opacity .4s}
.ab-how__i:hover{border-color:rgba(243,113,33,.55);box-shadow:0 40px 80px -40px rgba(0,0,0,.9)}
.ab-how__i:hover::before,.ab-how__i.is-in::before{transform:scaleX(1)}
.ab-how__i:hover::after{opacity:1}
.ab-how__n{position:absolute;right:clamp(14px,1.6vw,26px);top:clamp(4px,.8vw,12px);font-family:var(--display);font-weight:700;font-size:clamp(90px,8.6vw,150px);line-height:1;color:transparent;-webkit-text-stroke:1px rgba(246,242,236,.1);transition:-webkit-text-stroke-color .4s}
.ab-how__i:hover .ab-how__n{-webkit-text-stroke-color:rgba(243,113,33,.45)}
.ab-scene{position:relative;height:clamp(150px,12vw,200px);margin:6px 0 clamp(22px,2.4vw,34px);border-bottom:1px dashed #2E2A28}
.ab-scene svg{position:absolute;left:0;bottom:10px;height:100%;width:auto;max-width:100%;overflow:visible;fill:none;stroke:var(--white);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ab-how__i h3{position:relative;font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:clamp(40px,3.6vw,64px);line-height:.9}
.ab-how__i h3 em{color:var(--fox);font-style:normal}
.ab-how__i p{position:relative;margin-top:16px;color:var(--soft);font-size:clamp(16.5px,1.15vw,18.5px);line-height:1.6;max-width:26em}
/* scene parts */
.ab-scene .sc-win{stroke:#4A4643}.ab-scene .sc-dot{fill:#4A4643;stroke:none}
.ab-scene .sc-faint{stroke:#3B3735}
.ab-scene .sc-btn{stroke:var(--fox);fill:rgba(243,113,33,0)}
.ab-scene .sc-btnl{stroke:var(--fox)}
.ab-scene .sc-ring{stroke:var(--fox);opacity:0;transform-box:fill-box;transform-origin:center}
.ab-scene .sc-hand{transform:translate(120px,40px)}
.ab-scene .sc-off{stroke:var(--fox);transform:translate(9px,7px)}
.ab-scene .sc-guide{stroke:var(--fox);stroke-dasharray:3 4;opacity:0}
.ab-scene .sc-lens{transform:translate(60px,40px)}
.ab-scene .sc-lens circle{fill:rgba(11,10,10,.4)}
.ab-scene .sc-slot{stroke:var(--fox);stroke-dasharray:4 5;fill:rgba(243,113,33,0)}
.ab-scene .sc-piece path{stroke:var(--white);fill:#1F1C1A}
.ab-scene .sc-tick{stroke:var(--ink);stroke-width:3;opacity:0}
.ab-scene .sc-spark{transform-box:fill-box;transform-origin:center}
.ab-scene .sc-spark path{stroke:var(--fox)}
.ab-how__i.is-in .sc-hand{animation:scHand 4.6s var(--ease) infinite}
.ab-how__i.is-in .sc-btn{animation:scBtn 4.6s linear infinite}
.ab-how__i.is-in .sc-btnl{animation:scBtnL 4.6s linear infinite}
.ab-how__i.is-in .sc-ring{animation:scRing 4.6s ease-out infinite}
.ab-how__i.is-in .sc-lens{animation:scLens 5.2s cubic-bezier(.6,0,.3,1) infinite}
.ab-how__i.is-in .sc-off{animation:scOff 5.2s cubic-bezier(.3,1.6,.5,1) infinite}
.ab-how__i.is-in .sc-guide{animation:scGuide 5.2s linear infinite}
.ab-how__i.is-in .sc-piece{animation:scPiece 4.4s cubic-bezier(.6,0,.2,1) infinite}
.ab-how__i.is-in .sc-slot{animation:scSlot 4.4s linear infinite}
.ab-how__i.is-in .sc-tick{animation:scTick 4.4s linear infinite}
.ab-how__i.is-in .sc-spark{animation:scSpark 3s ease-in-out infinite}
@keyframes scHand{0%{transform:translate(120px,40px)}30%{transform:translate(0,0)}36%{transform:translate(0,4px) scale(.97)}44%{transform:translate(0,0)}70%{transform:translate(0,0)}100%{transform:translate(120px,40px)}}
@keyframes scBtn{0%,34%{fill:rgba(243,113,33,0)}37%,70%{fill:rgba(243,113,33,1)}90%,100%{fill:rgba(243,113,33,0)}}
@keyframes scBtnL{0%,34%{stroke:var(--fox)}37%,70%{stroke:var(--ink)}90%,100%{stroke:var(--fox)}}
@keyframes scRing{0%,34%{opacity:0;transform:scale(.5)}38%{opacity:1}60%,100%{opacity:0;transform:scale(2.4)}}
@keyframes scLens{0%{transform:translate(60px,40px)}25%{transform:translate(150px,40px)}42%,62%{transform:translate(172px,96px)}85%{transform:translate(70px,96px)}100%{transform:translate(60px,40px)}}
@keyframes scOff{0%,44%{transform:translate(9px,7px);stroke:var(--fox)}52%,90%{transform:translate(0,0);stroke:var(--white)}100%{transform:translate(9px,7px);stroke:var(--fox)}}
@keyframes scGuide{0%,44%{opacity:0}48%,60%{opacity:1}70%,100%{opacity:0}}
@keyframes scPiece{0%,10%{transform:translate(0,0) rotate(-8deg)}48%{transform:translate(104px,0) rotate(0deg)}52%{transform:translate(104px,0) scale(1.04)}56%,82%{transform:translate(104px,0) scale(1)}100%{transform:translate(0,0) rotate(-8deg)}}
@keyframes scSlot{0%,50%{fill:rgba(243,113,33,0)}54%,82%{fill:rgba(243,113,33,.9)}92%,100%{fill:rgba(243,113,33,0)}}
@keyframes scTick{0%,54%{opacity:0}58%,82%{opacity:1}88%,100%{opacity:0}}
@keyframes scSpark{0%,100%{transform:scale(.85) rotate(0)}50%{transform:scale(1.06) rotate(45deg)}}
.ab-scene .sc-piece{transform-box:view-box;transform-origin:56px 80px}
/* the sticky note, stuck to the corner of the last card */
.ab-sticky{position:absolute;z-index:3;right:clamp(-14px,-1vw,-6px);top:-38px;width:clamp(190px,15vw,230px);padding:24px 20px 20px;background:#F3E3B5;color:#2A2118;transform:rotate(4deg);box-shadow:0 22px 40px -18px rgba(0,0,0,.85),inset 0 -14px 24px -18px rgba(120,80,20,.35);transition:transform .4s var(--ease)}
.ab-sticky p{font-family:var(--hand);font-size:clamp(24px,1.9vw,29px);line-height:1.05}
.ab-sticky__tape{position:absolute;left:50%;top:-12px;width:80px;height:24px;margin-left:-40px;background:rgba(246,242,236,.38);transform:rotate(-4deg)}
.ab-sticky:hover{transform:rotate(0deg) scale(1.04)}
.ab-how .ab-eye{margin-bottom:clamp(44px,5vw,70px)}
@media (max-width:1000px){
  .ab-how__list{grid-template-columns:1fr}
  .ab-sticky{position:relative;top:auto;right:auto;margin:34px 0 0 auto}
}

/* ---- the peeking fox: its paws rest on an edge of the photo, it sits behind it, and it slides out from behind ---- */
.ab-fox{position:absolute;z-index:0;width:clamp(96px,9vw,150px);height:auto;transform-origin:50% 100%;transform:translate(-50%,-100%) rotate(calc(var(--r,0deg) + var(--tilt,0deg))) scale(var(--s,1)) translateY(108%);transition:transform .32s cubic-bezier(.5,0,.75,0);filter:drop-shadow(0 -4px 14px rgba(0,0,0,.55));pointer-events:none}
.ab-fox.is-up{transform:translate(-50%,-100%) rotate(calc(var(--r,0deg) + var(--tilt,0deg))) scale(var(--s,1)) translateY(var(--out,4%));transition:transform .75s cubic-bezier(.3,1.55,.5,1)}
.ab-fox.no-t{transition:none!important}
@media (max-width:700px){.ab-fox{width:88px}}

/* ---- The home team: a quick, compact look at the life behind the studio ---- */
.ab-home{padding-top:clamp(64px,7vw,110px);padding-bottom:clamp(64px,7vw,110px)}
.ab-home__grid{display:grid;grid-template-columns:minmax(0,330px) minmax(0,1fr) minmax(0,1.05fr);gap:clamp(50px,5vw,90px);align-items:center}
.ab-home__pics{position:relative;margin:30px 0 clamp(30px,3vw,46px) 0;max-width:330px}
.ab-home__main{position:relative;display:block;aspect-ratio:5/6;overflow:hidden;background:#141211}
.ab-home__main img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%;transition:transform 1.4s var(--ease)}
.ab-home__pics:hover .ab-home__main img{transform:scale(1.03)}
.ab-home__main::after{content:"";position:absolute;inset:12px;border:1px solid rgba(243,113,33,.55);pointer-events:none;clip-path:polygon(0 0,22% 0,22% 1px,1px 1px,1px 22%,0 22%,0 100%,22% 100%,22% calc(100% - 1px),1px calc(100% - 1px),1px 78%,0 78%,0 0,100% 0,100% 22%,calc(100% - 1px) 22%,calc(100% - 1px) 1px,78% 1px,78% 0,100% 0,100% 100%,78% 100%,78% calc(100% - 1px),calc(100% - 1px) calc(100% - 1px),calc(100% - 1px) 78%,100% 78%,100% 100%)}
.ab-home__inset{position:absolute;right:calc(-1 * clamp(50px,5vw,80px));bottom:calc(-1 * clamp(30px,3vw,46px));width:42%;aspect-ratio:4/5;overflow:hidden;border:6px solid var(--ink);box-shadow:0 30px 60px -24px rgba(0,0,0,.9)}
.ab-home__inset img{width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.ab-home__note{position:absolute;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--soft);white-space:nowrap;display:flex;align-items:center;gap:10px}
.ab-home__note::before{content:"";width:22px;height:1px;background:var(--fox)}
.ab-home__note--a{left:0;top:-30px}
.ab-home__note--b{left:0;bottom:-30px;color:var(--mute)}
.ab-home__h{font-size:clamp(40px,4vw,68px)}
.ab-home__txt .ab-eye{margin-bottom:clamp(20px,2.4vw,30px)}
.ab-home__copy{margin-top:clamp(20px,2.4vw,30px);max-width:34em}
.ab-home__copy p{font-size:clamp(17.5px,1.3vw,20px);line-height:1.66;color:#E4DED5}
.ab-home__copy p+p{margin-top:1em}
@media (max-width:1000px){
  .ab-home__grid{grid-template-columns:1fr}
  .ab-home__pics{max-width:min(340px,70%);margin-top:30px}
}
@media (max-width:700px){
  .ab-home__pics{max-width:68%;margin-right:22%}
  .ab-home__inset{width:46%;right:-34%;bottom:-22px}
  .ab-home__note--b{bottom:-54px}
  .ab-home__pics{margin-bottom:64px}
}

/* lights out: the family hides in the dark, nine pairs of eyes give them away, the pointer is a flashlight */
.ab-dark{position:relative;margin:0;align-self:center;max-width:480px;width:100%;justify-self:end}
.ab-dark__top{display:flex;justify-content:space-between;gap:16px;margin-bottom:14px;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}
.ab-dark__top>span:first-child::before{content:"";display:inline-block;width:7px;height:7px;margin-right:10px;border-radius:50%;background:#2A2624;box-shadow:inset 0 0 0 1px #4A4643;vertical-align:1px}
.ab-dark__count{color:var(--soft)}.ab-dark__count b{font-weight:500;color:var(--fox)}
.ab-dark__stage{position:relative;aspect-ratio:1100/820;cursor:none;touch-action:pan-y;-webkit-tap-highlight-color:transparent;--mx:50%;--my:45%;--r:clamp(70px,8vw,110px)}
.ab-dark__stage img{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;user-select:none}
.ab-dark__base{filter:brightness(.09) saturate(.4)}
.ab-dark__lit{-webkit-mask-image:var(--mask,radial-gradient(circle var(--r) at var(--mx) var(--my),#000 35%,transparent 72%));mask-image:var(--mask,radial-gradient(circle var(--r) at var(--mx) var(--my),#000 35%,transparent 72%));filter:brightness(.92) saturate(.9)}
.ab-dark__all{opacity:0;transition:opacity 1.6s var(--ease);filter:brightness(.82) saturate(.85)}
.ab-dark.is-all .ab-dark__all{opacity:1}
.ab-dark__eyes{position:absolute;inset:0;pointer-events:none;transition:opacity .6s}
.ab-dark__eyes i{position:absolute;width:2.5%;aspect-ratio:1.55;transform:translate(-50%,-50%) rotate(var(--a,0deg));border-radius:50% 50% 50% 50% / 62% 62% 38% 38%;background:radial-gradient(ellipse at 50% 55%,#FFE2A8 0%,#F9A13A 45%,#C2410C 100%);box-shadow:0 0 8px 2px rgba(249,161,58,.55),0 0 20px 6px rgba(243,113,33,.18);transition:scale .09s ease-in}
.ab-dark__eyes i::after{content:"";display:block;width:24%;height:78%;margin:12% auto 0;border-radius:50%;background:#1A0A02}
.ab-dark__eyes.is-blink i{scale:1 .08}
.ab-dark__eyes.is-found{opacity:0}
.ab-dark__hint{position:absolute;left:50%;bottom:6%;transform:translateX(-50%);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--mute);transition:opacity .5s;pointer-events:none}
.ab-dark.is-on .ab-dark__hint{opacity:0}
.ab-dark__done{margin-top:14px;min-height:1.4em;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--amber);opacity:0;transform:translateY(6px);transition:opacity .6s .4s,transform .6s .4s}
.ab-dark.is-all .ab-dark__done{opacity:1;transform:none}
.ab-dark.is-all .ab-dark__top>span:first-child::before{background:var(--amber);box-shadow:0 0 10px rgba(249,161,58,.8)}
@media (max-width:1240px){
  .ab-home__grid{grid-template-columns:minmax(0,330px) minmax(0,1fr)}
  .ab-dark{grid-column:2;justify-self:start;margin-top:10px}
}
@media (max-width:1000px){
  .ab-home__grid{grid-template-columns:1fr}
  .ab-dark{grid-column:auto;max-width:460px;margin:10px 0 24px}
}
@media (prefers-reduced-motion:reduce){.ab-dark__all{transition:none}}

/* ============ LISTEN: the article read aloud ============ */
.listen{display:inline-flex;align-items:center;gap:10px;height:34px;padding:0 14px 0 5px;margin-left:6px;border-radius:999px;background:var(--fox);color:var(--ink);font-family:var(--body);font-stretch:125%;font-weight:600;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;cursor:pointer;transition:background .3s,transform .3s var(--ease)}
.listen:hover{background:var(--amber);transform:translateY(-1px)}
.listen[hidden]{display:none}
.listen__ic{width:24px;height:24px;border-radius:50%;background:var(--ink);display:grid;place-items:center}
.listen__ic svg{width:12px;height:12px;fill:var(--fox);margin-left:1px}
.listen__t{font-weight:500;opacity:.7}
.listen.is-playing .listen__ic{animation:lPulse 1.4s ease-out infinite}
@keyframes lPulse{0%{box-shadow:0 0 0 0 rgba(11,10,10,.45)}80%,100%{box-shadow:0 0 0 8px rgba(11,10,10,0)}}
.prose .is-reading{position:relative;color:var(--white);transition:color .3s}
.prose .is-reading::before{content:"";position:absolute;left:-22px;top:.2em;bottom:.2em;width:3px;border-radius:2px;background:var(--fox);box-shadow:0 0 14px rgba(243,113,33,.6)}
.cf-listen-on .prose{cursor:pointer}
.cf-listen-on .prose :is(p,li,h2,h3,h4,blockquote):not(.is-reading){color:var(--soft);transition:color .4s}
.lbar{position:fixed;left:50%;bottom:18px;z-index:90;display:flex;align-items:center;gap:6px;width:min(640px,calc(100vw - 24px));padding:10px 10px 10px 18px;box-sizing:border-box;background:rgba(20,18,17,.94);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid rgba(246,242,236,.12);border-radius:16px;box-shadow:0 30px 60px -20px rgba(0,0,0,.85);overflow:hidden;transform:translate(-50%,calc(100% + 40px));transition:transform .55s cubic-bezier(.2,.9,.2,1)}
.lbar.is-on{transform:translate(-50%,0)}
.lbar__line{position:absolute;left:0;right:0;top:0;height:2px;background:rgba(246,242,236,.08)}
.lbar__line b{position:absolute;inset:0;background:var(--fox);transform-origin:0 50%;transform:scaleX(0);transition:transform .5s}
.lbar__wave{display:flex;align-items:center;gap:3px;height:22px;flex:none;margin-right:6px}
.lbar__wave i{width:3px;height:30%;border-radius:2px;background:var(--fox)}
.lbar.is-playing .lbar__wave i{animation:lWave 1s ease-in-out infinite}
.lbar__wave i:nth-child(2){animation-delay:-.6s!important}.lbar__wave i:nth-child(3){animation-delay:-.3s!important}.lbar__wave i:nth-child(4){animation-delay:-.8s!important}
@keyframes lWave{0%,100%{height:25%}50%{height:100%}}
.lbar__txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.lbar__txt b{font-weight:500;font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--fox)}
.lbar__ttl{font-size:13px;color:var(--white);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lbar__b{width:38px;height:38px;flex:none;display:grid;place-items:center;border-radius:50%;color:var(--soft);transition:background .25s,color .25s;cursor:pointer}
.lbar__b:hover{background:rgba(246,242,236,.08);color:var(--white)}
.lbar__b svg{width:16px;height:16px;fill:currentColor;stroke:currentColor;stroke-width:0}
.lbar__x svg{fill:none;stroke-width:2;stroke-linecap:round;width:14px;height:14px}
.lbar__play{width:46px;height:46px;background:var(--fox);color:var(--ink)}
.lbar__play:hover{background:var(--amber);color:var(--ink)}
.lbar__play svg{width:18px;height:18px}
.lbar__play .is-play{display:none;margin-left:2px}
.lbar:not(.is-playing) .lbar__play .is-pause{display:none}
.lbar:not(.is-playing) .lbar__play .is-play{display:block}
.lbar__rate{flex:none;min-width:46px;height:30px;padding:0 8px;border:1px solid rgba(246,242,236,.18);border-radius:8px;font-size:11px;color:var(--white);cursor:pointer}
.lbar__rate:hover{border-color:var(--fox)}
html.cf-listen-on .cfa-roam,html.cf-listen-on .totop{opacity:0;pointer-events:none}
@media (max-width:700px){
  .lbar{bottom:12px;padding:8px 6px 8px 12px;gap:2px}
  .lbar__wave{display:none}
  .lbar__b{width:34px;height:34px}
  .lbar__play{width:42px;height:42px}
  html.cf-bar-on .lbar{bottom:calc(12px + var(--thumb-h,64px))}
  .prose .is-reading::before{left:-12px}
  .listen{margin:6px 0 0}
}
@media (prefers-reduced-motion:reduce){.lbar__wave i,.listen.is-playing .listen__ic{animation:none}.lbar{transition:none}}

/* ============ THE DEN: everything older than the first seven, as rich rows ============ */
.den-arch{max-width:calc(var(--max) + var(--gutter) * 2);margin:0 auto;box-sizing:border-box;padding:0 var(--gutter) clamp(70px,7vw,120px)}
.den-arch__k{font-size:10.5px;color:var(--fox);margin-bottom:10px;display:flex;align-items:center;gap:14px}
.den-arch__k::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--line),transparent)}
.den-rows{list-style:none;margin:0;padding:0}
.den-row{position:relative;border-bottom:1px solid var(--line)}
.den-row::before{content:"";position:absolute;left:0;bottom:-1px;height:1px;width:100%;background:var(--fox);transform:scaleX(0);transform-origin:0 50%;transition:transform .7s var(--ease);z-index:1}
.den-row a{position:relative;display:grid;grid-template-columns:56px clamp(170px,17vw,260px) minmax(0,1fr) auto;align-items:center;gap:clamp(18px,2.6vw,44px);padding:clamp(22px,2.4vw,32px) clamp(10px,1.2vw,20px);color:var(--white);border-radius:6px;transition:background .5s var(--ease)}
.den-row a::after{content:"";position:absolute;inset:0;border-radius:6px;background:radial-gradient(600px circle at 20% 50%,rgba(243,113,33,.07),transparent 60%);opacity:0;transition:opacity .5s;pointer-events:none}
.den-row__n{font-family:var(--display);font-weight:700;font-size:clamp(34px,3vw,48px);line-height:1;color:transparent;-webkit-text-stroke:1px rgba(246,242,236,.18);transition:-webkit-text-stroke-color .4s}
.den-row__pic{position:relative;display:block;aspect-ratio:16/10;overflow:hidden;border-radius:4px;background:var(--coal-2);box-shadow:0 20px 40px -24px rgba(0,0,0,.9)}
.den-row__pic>*{position:absolute;inset:0;width:100%;height:100%}
.den-row__pic img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease),filter .6s;filter:saturate(.85) brightness(.9)}
.den-row__body{display:flex;flex-direction:column;gap:10px;min-width:0}
.den-row__s{display:flex;align-items:center;gap:8px;font-size:10px;color:var(--fox)}
.den-row__s svg{width:13px;height:13px;flex:none}
.den-row__t{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:clamp(26px,2.4vw,40px);line-height:.92;text-wrap:balance;transition:transform .6s var(--ease)}
.den-row__t em{color:var(--fox);font-style:normal}
.den-row__ex{color:var(--soft);font-size:15.5px;line-height:1.5;max-width:46em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.den-row__m{display:flex;flex-direction:column;align-items:flex-end;gap:8px;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute);white-space:nowrap;text-align:right}
.den-row__go{display:inline-flex;align-items:center;gap:10px;margin-top:8px;font-family:var(--body);font-stretch:125%;font-weight:600;font-size:10.5px;letter-spacing:.18em;color:var(--white);opacity:.55;transition:opacity .3s,color .3s}
.den-row__go .arr{width:20px;transition:transform .4s var(--ease)}
.den-row:hover::before{transform:scaleX(1)}
.den-row:hover a::after{opacity:1}
.den-row:hover .den-row__n{-webkit-text-stroke-color:var(--fox)}
.den-row:hover .den-row__pic img{transform:scale(1.06);filter:none}
.den-row:hover .den-row__t{transform:translateX(6px)}
.den-row:hover .den-row__go{opacity:1;color:var(--fox)}
.den-row:hover .den-row__go .arr{transform:translateX(5px)}
@media (max-width:1000px){
  .den-row a{grid-template-columns:clamp(130px,26vw,200px) minmax(0,1fr);gap:14px 20px;padding:20px 0}
  .den-row__n{display:none}
  .den-row__m{grid-column:2;flex-direction:row;flex-wrap:wrap;align-items:center;gap:6px 16px;text-align:left}
  .den-row__go{margin:0}
}
@media (max-width:600px){
  .den-row a{grid-template-columns:110px minmax(0,1fr);align-items:start}
  .den-row__t{font-size:22px}
  .den-row__ex{display:none}
  .den-row__m{grid-column:1/-1}
  .den-row__go{display:none}
}