@font-face{font-family:"ArchivoBlack";src:url(/assets/archivo-black.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"ArchivoBody";src:url(/assets/archivo-var.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"InstrumentSerif";src:url(/assets/instrument-serif-italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}

:root{
  --void:#0C0910;--night:#120D17;--surface:#1E1626;--surface-2:#251C2F;
  --edge:rgba(245,239,230,.10);--edge-lit:rgba(255,179,71,.30);
  --bone:#F6F0E7;--bone-dim:#C4B8AE;--smoke:#948892;
  --amber:#FFB347;--coral:#FF6B4A;--rose:#E8437E;
  --doorlight:linear-gradient(103deg,var(--amber) 0%,var(--coral) 48%,var(--rose) 100%);
  --display:"ArchivoBlack","Segoe UI",Helvetica,sans-serif;
  --sans:"ArchivoBody","Segoe UI",-apple-system,Helvetica,sans-serif;
  --deck:"InstrumentSerif",Georgia,serif;
  --mono:ui-monospace,"Cascadia Mono",Consolas,Menlo,monospace;
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.4'/%3E%3C/svg%3E");
}
*{box-sizing:border-box}
body{margin:0;background:var(--void);color:var(--bone-dim);font-family:var(--sans);font-size:17px;line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased}
body::after{content:"";position:fixed;inset:0;z-index:9999;background-image:var(--grain);opacity:.035;pointer-events:none;mix-blend-mode:overlay}
.shell{max-width:1200px;margin:0 auto;padding:0 24px}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--amber);outline-offset:4px;border-radius:3px}
h1,h2,h3{font-family:var(--display);font-weight:400;letter-spacing:-.03em;color:var(--bone);margin:0}
.lit{font-family:var(--deck);font-style:italic;background:var(--doorlight);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.lab{font-family:var(--mono);font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--amber)}

nav.bar{position:sticky;top:0;z-index:100;background:rgba(12,9,16,.84);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--edge)}
nav.bar .shell{height:62px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.brand{display:flex;align-items:center;gap:11px;font-weight:800;color:var(--bone);letter-spacing:-.02em;font-size:1.02rem}
.brand i{width:11px;height:22px;border-radius:1px 3px 3px 1px;background:var(--doorlight);display:block;box-shadow:0 0 18px rgba(255,140,80,.55)}
.navlinks{display:none;gap:30px;font-size:.88rem;color:var(--smoke)}
@media(min-width:900px){.navlinks{display:flex}}
.navlinks a:hover{color:var(--bone)}
@media(max-width:520px){.brand span{display:none}}


.burger{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;
  margin-right:-8px;background:none;border:0;cursor:pointer;color:var(--bone);flex:none}
@media(min-width:900px){.burger{display:none}}
.burger span{position:relative;display:block;width:19px;height:1.5px;background:currentColor;border-radius:2px;
  transition:transform .22s cubic-bezier(.2,.8,.3,1),opacity .16s}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:19px;height:1.5px;
  background:currentColor;border-radius:2px;transition:transform .22s cubic-bezier(.2,.8,.3,1)}
.burger span::before{top:-6px}
.burger span::after{top:6px}
.burger[aria-expanded=true] span{background:transparent}
.burger[aria-expanded=true] span::before{transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded=true] span::after{transform:translateY(-6px) rotate(-45deg)}

.mobnav{position:fixed;inset:62px 0 0;z-index:99;background:rgba(12,9,16,.97);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  padding:26px 24px 40px;overflow-y:auto;
  opacity:0;visibility:hidden;transform:translateY(-8px);
  /* visibility deliberately NOT transitioned: it must flip the instant the
     class lands, or focusing the first link races the animation — and in any
     context where frames are throttled the sheet never becomes focusable */
  transition:opacity .2s,transform .2s}
.mobnav.open{opacity:1;visibility:visible;transform:none}
@media(min-width:900px){.mobnav{display:none}}
.mobnav a{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:17px 4px;border-bottom:1px solid var(--edge);
  font-family:var(--display);font-size:1.22rem;letter-spacing:-.02em;color:var(--bone)}
.mobnav a:last-of-type{border-bottom:0}
.mobnav a span{font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--smoke)}
.mobnav a:hover span,.mobnav a:focus-visible span{color:var(--amber)}
/* .mobnav a (0,1,1) outranks .btn (0,1,0), so the CTA inherited the row layout
   and sat left-aligned with 4px of padding. Re-assert the button's own rules. */
.mobnav a.btn{width:100%;margin-top:24px;justify-content:center;
  padding:17px 28px;border-bottom:0;font-family:var(--display);font-size:.8rem;
  letter-spacing:.07em;text-transform:uppercase;color:#16100A}
body.navlock{overflow:hidden}

/* ---- share + install ---- */
.baracts{display:flex;align-items:center;gap:6px;flex:none}
.iconbtn{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;
  border-radius:100px;background:none;border:1px solid var(--edge);color:var(--bone-dim);
  cursor:pointer;transition:color .18s,border-color .18s,background .18s}
.iconbtn:hover{color:var(--bone);border-color:var(--edge-lit);background:rgba(255,179,71,.07)}
.iconbtn[hidden]{display:none}
/* The install button only exists once the browser has told us it can install,
   or on iOS where we can at least explain how. Never a dead control. */
.mobact{display:flex;align-items:center;justify-content:space-between;gap:14px;width:100%;
  padding:17px 4px;border:0;border-bottom:1px solid var(--edge);background:none;text-align:left;
  font-family:var(--display);font-size:1.22rem;letter-spacing:-.02em;color:var(--bone);cursor:pointer}
.mobact span{font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--smoke)}
.mobact:hover span,.mobact:focus-visible span{color:var(--amber)}
.mobact[hidden]{display:none}

/* Confirmation for the clipboard fallback, and the iOS instructions. Both are
   the same element: a small centred sheet that dismisses itself. */
.odtoast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,14px);z-index:200;
  max-width:min(92vw,420px);padding:14px 20px;border-radius:14px;
  border:1px solid var(--edge-lit);background:rgba(28,20,34,.97);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  color:var(--bone);font-size:.92rem;line-height:1.5;text-align:center;
  opacity:0;visibility:hidden;transition:opacity .2s,transform .2s,visibility .2s;
  box-shadow:0 18px 44px rgba(0,0,0,.5)}
.odtoast.on{opacity:1;visibility:visible;transform:translate(-50%,0)}
.odtoast b{color:var(--amber);font-weight:650}

/* Brand + CTA + burger will not all fit on a phone: at 390px the wordmark and
   the button both wrapped to two lines. The sheet carries the same CTA as its
   last item, so the bar drops it and keeps the wordmark whole. */
@media(max-width:640px){
  nav.bar .btn-sm{display:none}
  nav.bar .shell{gap:12px}
  .brand{white-space:nowrap}
}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:16px 28px;border-radius:3px;border:0;font-family:var(--display);font-size:.8rem;letter-spacing:.07em;text-transform:uppercase;line-height:1;cursor:pointer;transition:transform .16s,background .18s,color .18s}
.btn-lit{background:var(--amber);color:#16100A}
.btn-lit:hover{background:var(--bone);transform:translateY(-2px)}
.btn-ghost{background:transparent;color:var(--bone);box-shadow:inset 0 0 0 1.5px rgba(246,240,231,.30)}
.btn-ghost:hover{background:var(--bone);color:#16100A;transform:translateY(-2px)}
.btn-sm{padding:12px 20px;font-size:.7rem}

footer.foot{border-top:1px solid var(--edge);padding:56px 0 34px;background:var(--void);margin-top:70px}
footer.foot .who{font-size:.86rem;color:var(--smoke);max-width:34ch;margin:12px 0 0;line-height:1.6}

.foot-top{display:grid;gap:34px;margin-bottom:44px}
@media(min-width:700px){.foot-top{grid-template-columns:1.4fr 1fr 1fr 1fr;gap:30px}}
.foot-col h3{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--amber);margin:0 0 14px;font-weight:400}
.foot-col ul{list-style:none;padding:0;margin:0}
.foot-col li{margin-bottom:10px}
.foot-col a{font-size:.9rem;color:var(--bone-dim);transition:color .18s}
.foot-col a:hover{color:var(--bone)}

.foot-bar{border-top:1px solid var(--edge);padding-top:24px;display:flex;flex-wrap:wrap;
  gap:14px 24px;align-items:center;justify-content:space-between}
.foot-legal{display:flex;flex-wrap:wrap;gap:8px 20px;align-items:center;margin:0;padding:0;list-style:none}
.foot-legal a{font-size:.83rem;color:var(--smoke);transition:color .18s}
.foot-legal a:hover{color:var(--bone-dim)}
.foot-copy{font-size:.83rem;color:var(--smoke);margin:0}
.foot-copy b{color:var(--bone-dim);font-weight:650}

/* ---- legal pages ---- */
.legal{max-width:760px;margin:0 auto;padding:0 24px}
.legal h2{font-size:clamp(1.25rem,2.6vw,1.6rem);line-height:1.2;margin:44px 0 14px;
  padding-top:16px;position:relative}
.legal h2:first-of-type{margin-top:0}
.legal h2::before{content:"";position:absolute;top:0;left:0;width:38px;height:3px;
  border-radius:2px;background:var(--doorlight)}
.legal h3{font-size:1.02rem;margin:26px 0 9px;color:var(--bone)}
.legal p{font-size:1.02rem;line-height:1.72;margin:0 0 17px}
.legal ul{padding-left:20px;margin:0 0 17px}
.legal li{margin-bottom:9px;font-size:1rem;line-height:1.65}
.legal li::marker{color:var(--coral)}
.legal strong{color:var(--bone);font-weight:700}
.legal a:not(.btn){color:var(--amber);border-bottom:1px solid rgba(255,179,71,.35)}
.legal a:not(.btn):hover{border-color:var(--amber)}
.legal-meta{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--smoke);border:1px solid var(--edge);border-radius:100px;padding:7px 14px;
  display:inline-block;margin-bottom:30px}
.legal-box{border:1px solid var(--edge-lit);border-radius:14px;padding:20px 22px;margin:0 0 26px;
  background:linear-gradient(168deg,var(--surface-2),var(--surface))}
.legal-box p:last-child{margin-bottom:0}
.legal-box .k{font-family:var(--mono);font-size:9.5px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--amber);margin-bottom:10px}
table.legal-t{width:100%;border-collapse:collapse;margin:0 0 22px;font-size:.92rem}
table.legal-t th,table.legal-t td{text-align:left;padding:11px 14px 11px 0;border-bottom:1px solid var(--edge);vertical-align:top}
table.legal-t th{font-family:var(--mono);font-size:9px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--smoke);font-weight:400}
table.legal-t td:first-child{color:var(--bone);font-weight:650;white-space:nowrap;padding-right:20px}
.concepttag{font-family:var(--mono);font-size:9.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--smoke);border:1px solid var(--edge);padding:6px 12px;border-radius:100px}

/* ---------- post hero ---------- */
.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--edge);isolation:isolate}
/* no transform:scale here — it upscaled a 1376px-wide source by another 5%
   for no visual gain, and softness is the one thing this art cannot spare */
.hero .img{position:absolute;inset:0;background-size:cover;background-position:center 44%}
/* diagonal scrim: dense under the type, clear where the art earns its keep */
.hero .scrim{position:absolute;inset:0;background:
  linear-gradient(100deg,rgba(12,9,16,.95) 0%,rgba(12,9,16,.88) 32%,rgba(12,9,16,.45) 60%,rgba(12,9,16,.26) 100%),
  linear-gradient(to bottom,rgba(12,9,16,.60) 0%,transparent 26%,transparent 58%,var(--void) 100%)}
/* the same doorlight beam as the home hero, so the brand carries through */
.hero .beam{position:absolute;top:-22%;left:56%;width:40%;height:145%;pointer-events:none;
  background:linear-gradient(101deg,transparent,rgba(255,179,71,.16) 28%,rgba(255,107,74,.30) 48%,rgba(232,67,126,.13) 66%,transparent);
  transform:skewX(-10deg);filter:blur(10px);animation:beam 9s ease-in-out infinite}
@keyframes beam{0%,100%{opacity:.72;transform:skewX(-10deg) translateX(0)}
                50%{opacity:1;transform:skewX(-10deg) translateX(-18px)}}
.hero .shell{position:relative;z-index:2;padding:56px 24px 44px;min-height:330px;display:flex;flex-direction:column;justify-content:flex-end}
@media(min-width:900px){.hero .shell{padding:80px 24px 56px;min-height:420px}}

.hero .kick{align-self:flex-start;display:inline-flex;align-items:center;gap:9px;
  padding:8px 15px;border-radius:100px;border:1px solid var(--edge-lit);
  background:rgba(12,9,16,.45);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--amber);margin-bottom:26px}
.hero .kick::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--doorlight);flex:none}

.hero h1{font-size:clamp(2.3rem,6.4vw,4.1rem);line-height:.99;max-width:17ch;margin-bottom:20px;
  text-shadow:0 4px 34px rgba(0,0,0,.55)}
.hero .sub{font-size:clamp(1.02rem,1.7vw,1.2rem);max-width:50ch;color:var(--bone-dim);margin:0;
  text-shadow:0 2px 18px rgba(0,0,0,.6)}

.hero .meta{display:flex;flex-wrap:wrap;align-items:center;gap:9px 14px;margin-top:22px;
  font-family:var(--mono);font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--smoke)}
.hero .meta i{width:3px;height:3px;border-radius:50%;background:var(--coral);display:block;flex:none}

.byline{margin-top:24px;display:flex;align-items:center;gap:14px;font-size:.84rem;color:var(--smoke)}
.byline img{width:48px;height:48px;border-radius:50%;object-fit:cover;object-position:50% 16%;
  box-shadow:0 0 0 1px var(--edge-lit),0 0 0 5px rgba(255,179,71,.09)}
.byline b{color:var(--bone);font-weight:650;display:block;font-size:.94rem;margin-bottom:2px}

article.post{max-width:720px;margin:0 auto;padding:52px 24px 0}
article.post p{margin:0 0 20px;font-size:1.09rem;line-height:1.72}
article.post h2{position:relative;font-size:clamp(1.45rem,3vw,1.95rem);line-height:1.12;margin:52px 0 18px;padding-top:16px}
article.post h2::before{content:"";position:absolute;top:0;left:0;width:40px;height:3px;border-radius:2px;background:var(--doorlight)}
article.post strong{color:var(--bone);font-weight:700}
/* :not(.btn) matters — otherwise this repaints button labels amber-on-amber */
article.post a:not(.btn){color:var(--amber);border-bottom:1px solid rgba(255,179,71,.35)}
article.post a:not(.btn):hover{border-color:var(--amber)}
article.post ul{padding-left:20px;margin:0 0 20px}
article.post li{margin-bottom:10px;font-size:1.06rem;line-height:1.65}
article.post li::marker{color:var(--coral)}
article.post li strong{color:var(--bone)}

.answer{background:linear-gradient(168deg,var(--surface-2),var(--surface));border:1px solid var(--edge-lit);border-radius:16px;padding:24px 26px;margin:0 0 30px}
.answer .l{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--amber);margin-bottom:10px}
.answer p{margin:0;font-size:1.06rem;line-height:1.6}
.answer strong{color:var(--bone)}

.cta{background:radial-gradient(120% 130% at 50% -20%,rgba(255,107,74,.18),transparent 62%),linear-gradient(168deg,var(--surface-2),#140E1A);border:1px solid var(--edge-lit);border-radius:20px;padding:34px 30px;margin:46px 0 0;text-align:center}
.cta h3{font-size:clamp(1.2rem,2.4vw,1.55rem);line-height:1.15;margin:0 auto 12px;max-width:22ch}
.cta p{font-size:.98rem;max-width:46ch;margin:0 auto 22px}
.cta .row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* ---------- in-article visual system ---------- */
.stats{display:grid;gap:1px;background:var(--edge);border:1px solid var(--edge);border-radius:16px;overflow:hidden;margin:32px 0}
@media(min-width:620px){.stats.three{grid-template-columns:repeat(3,1fr)}.stats.two{grid-template-columns:repeat(2,1fr)}}
.stats .s{background:linear-gradient(168deg,var(--surface-2),var(--surface));padding:24px 20px}
.stats .n{font-family:var(--display);font-size:2.15rem;line-height:1;letter-spacing:-.045em;background:var(--doorlight);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:9px}
.stats .c{font-size:.87rem;color:var(--smoke);line-height:1.45}

.pull{margin:36px 0;padding:2px 0 2px 24px;border-left:3px solid var(--amber)}
.pull p{font-family:var(--deck);font-style:italic;font-size:clamp(1.3rem,2.7vw,1.72rem);line-height:1.38;color:var(--bone);margin:0}

.scale{margin:32px 0;border:1px solid var(--edge);border-radius:16px;padding:24px 26px;background:linear-gradient(168deg,var(--surface-2),var(--surface))}
.scale .cap{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--smoke);margin-bottom:14px}
.scale .bar{height:13px;border-radius:100px;overflow:hidden;display:flex;margin-bottom:16px}
.scale .bar i{display:block;height:100%}
.scale .z{display:grid;gap:12px}
@media(min-width:640px){.scale .z{grid-template-columns:repeat(3,1fr)}}
.scale .z .r{font-family:var(--mono);font-size:11px;letter-spacing:.1em;margin-bottom:4px}
.scale .z p{font-size:.87rem;color:var(--smoke);margin:0;line-height:1.45}

.dims{display:grid;gap:12px;margin:28px 0}
@media(min-width:620px){.dims{grid-template-columns:1fr 1fr}}
.dim{background:linear-gradient(168deg,var(--surface-2),var(--surface));border:1px solid var(--edge);border-radius:14px;padding:19px 21px}
.dim .l{font-family:var(--display);font-size:1.55rem;line-height:1;background:var(--doorlight);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:9px}
.dim .t{font-family:var(--sans);font-weight:700;color:var(--bone);font-size:.99rem;margin-bottom:5px}
.dim .d{font-size:.9rem;color:var(--smoke);margin:0;line-height:1.5}

ol.steps{counter-reset:s;margin:28px 0;padding:0;list-style:none}
ol.steps li{counter-increment:s;position:relative;padding-left:50px;margin-bottom:18px;font-size:1.04rem;line-height:1.62}
ol.steps li::before{content:counter(s);position:absolute;left:0;top:0;width:32px;height:32px;border-radius:50%;background:var(--doorlight);color:#16100A;font-family:var(--display);font-size:.85rem;display:flex;align-items:center;justify-content:center}
ol.steps li strong{color:var(--bone)}

/* ---------- the book module ---------- */
.bookmod{display:grid;grid-template-columns:1fr;gap:22px;align-items:center;margin:44px 0 0;padding:26px;border:1px solid var(--edge-lit);border-radius:18px;background:radial-gradient(120% 130% at 12% -20%,rgba(255,107,74,.16),transparent 60%),linear-gradient(168deg,var(--surface-2),#140E1A)}
@media(min-width:600px){.bookmod{grid-template-columns:200px 1fr;gap:26px}}
.bookmod .cov{width:100%;max-width:190px;height:auto;justify-self:center;filter:drop-shadow(0 14px 28px rgba(0,0,0,.75))}
.bookmod .l{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--amber);margin-bottom:9px}
.bookmod h3{font-size:1.32rem;line-height:1.15;margin-bottom:9px}
.bookmod p{font-size:.95rem;color:var(--bone-dim);margin:0 0 14px}
.bookmod .rate{display:flex;align-items:center;gap:9px;font-size:.85rem;color:var(--smoke);margin-bottom:16px}
.bookmod .rate .s{color:var(--amber);letter-spacing:.08em}
.bookmod .rate b{color:var(--bone)}

/* ---------- share ---------- */
.share{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:44px 0 0;padding-top:26px;border-top:1px solid var(--edge)}
.share .l{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--smoke);margin-right:2px}
.share a,.share button{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:50%;border:1px solid var(--edge);background:linear-gradient(168deg,var(--surface-2),var(--surface));color:var(--bone-dim);cursor:pointer;transition:border-color .2s,color .2s,transform .16s;padding:0}
.share a:hover,.share button:hover{border-color:var(--edge-lit);color:var(--amber);transform:translateY(-2px)}
.share svg{width:17px;height:17px;fill:currentColor}
.share .msg{font-size:.82rem;color:var(--jade);opacity:0;transition:opacity .25s}
.share .msg.on{opacity:1}

.faq{margin-top:46px;border-top:1px solid var(--edge);padding-top:30px}
.faq h2{font-size:1.3rem;margin:0 0 20px}
.faq .q{font-family:var(--sans);font-weight:700;color:var(--bone);font-size:1.02rem;margin:0 0 6px}
.faq .a{margin:0 0 20px;font-size:1.02rem}

.more{border-top:1px solid var(--edge);margin-top:46px;padding-top:30px}
.more .l{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--smoke);margin-bottom:18px}
.more .grid{display:grid;gap:14px}
@media(min-width:700px){.more .grid{grid-template-columns:1fr 1fr}}
a.card{display:block;background:linear-gradient(168deg,var(--surface-2),var(--surface));border:1px solid var(--edge);border-radius:14px;padding:18px 20px;transition:border-color .2s,transform .16s}
a.card:hover{border-color:var(--edge-lit);transform:translateY(-2px)}
a.card .t{font-family:var(--display);font-size:1rem;line-height:1.25;color:var(--bone);margin-bottom:6px}
a.card .d{font-size:.87rem;color:var(--smoke)}

/* ---------- index ---------- */
.top{position:relative;border-bottom:1px solid var(--edge);overflow:hidden}
.top::before{content:"";position:absolute;top:-25%;left:50%;width:44%;height:150%;background:linear-gradient(101deg,transparent,rgba(255,179,71,.13) 26%,rgba(255,107,74,.28) 46%,rgba(232,67,126,.14) 64%,transparent);transform:skewX(-10deg);filter:blur(8px)}
.top .shell{position:relative;z-index:2;padding:80px 24px 64px}
.top .lab{display:block;margin-bottom:20px}
.top h1{font-size:clamp(2.2rem,6vw,3.7rem);line-height:1.0;max-width:17ch;margin-bottom:18px}
.top p{max-width:52ch;font-size:1.08rem;color:var(--bone-dim);margin:0}
.list{padding:54px 0 0}
.grid{display:grid;gap:22px}
@media(min-width:820px){.grid{grid-template-columns:1fr 1fr}}
/* The index goes three across once there is room. At two across, fourteen
   articles read as a short list; at three they read as a publication, which
   is what it now is. Scoped to .list so the two-card "keep reading" block at
   the foot of each article is not left sitting in a three-column grid. */
@media(min-width:1180px){.list .grid{grid-template-columns:repeat(3,1fr)}}
a.entry{display:block;background:linear-gradient(168deg,var(--surface-2),var(--surface));border:1px solid var(--edge);border-radius:18px;overflow:hidden;transition:border-color .2s,transform .18s}
a.entry:hover{border-color:var(--edge-lit);transform:translateY(-3px)}
a.entry .thumb{aspect-ratio:16/9;background-size:cover;background-position:center 45%;position:relative}
a.entry .thumb::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,transparent 40%,rgba(30,22,38,.92) 100%)}
a.entry .meat{padding:22px 24px 26px}
a.entry .kick{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--amber);margin-bottom:10px}
a.entry h2{font-size:1.3rem;line-height:1.18;margin-bottom:10px}
a.entry p{font-size:.94rem;color:var(--smoke);margin:0}
/* Cards stretch to the tallest in the row, so a one-line headline used to
   leave its date floating mid-card while the two-line one beside it sat
   lower. Flex the card and push the date down: the meta line now rules off
   at the same height right across a row. */
a.entry{display:flex;flex-direction:column}
a.entry .meat{flex:1;display:flex;flex-direction:column}
a.entry .when{margin-top:auto;padding-top:14px;font-family:var(--mono);font-size:9.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--smoke)}

/* ============================================================
   COMMERCE + BOOKING PAGES  (/book/, /bulk/, /speaking/)
   Every class here is compound-named on purpose. The generic
   single-letter classes above (.l .t .d .n .c .s .r) are already
   claimed by the article system, and .band/.card/.entry/.top
   all mean something specific elsewhere. Nothing below reuses
   a name that exists above.
   ============================================================ */
.sect{padding:72px 0}
/* Opening-screen atmosphere for the pages that had none.
   The landing page, /speaking/ and every article carry something on the right
   of the first screen. /companion/, /careers/ and /bulk/ carried nothing, so
   beside the others they read as unfinished at desktop width. This is the same
   doorlight gradient the brand uses everywhere, pushed far enough back with
   blur to be atmosphere rather than ornament: no extra request, no layout
   shift, and nothing for the text to compete with because it sits on the
   opposite side and behind. Only header.sect is targeted, so the many
   section.sect blocks down each page are untouched.
   overflow is safe here: the sticky nav is a sibling of this element, not a
   descendant, so clipping cannot strand it. */
header.sect{position:relative;overflow:hidden;isolation:isolate}
header.sect > *{position:relative;z-index:1}
header.sect::after{content:"";position:absolute;top:-40%;right:-6%;width:52%;height:180%;
  z-index:0;pointer-events:none;transform:skewX(-11deg);filter:blur(46px);
  background:linear-gradient(101deg,transparent 0%,rgba(255,179,71,.10) 26%,
    rgba(255,107,74,.19) 48%,rgba(232,67,126,.09) 68%,transparent 100%)}
@media(max-width:900px){header.sect::after{width:88%;right:-26%;opacity:.5}}
.sect.dim{background:var(--night);border-top:1px solid var(--edge);border-bottom:1px solid var(--edge)}
.sect-head{max-width:640px;margin-bottom:38px}
.sect-head.ctr{margin-left:auto;margin-right:auto;text-align:center}
.sect-head .lab{display:block;margin-bottom:14px}
.sect-head h2{font-size:clamp(1.8rem,4.2vw,2.7rem);line-height:1.05;margin-bottom:14px}
.sect-head p{font-size:1.04rem;margin:0;max-width:56ch}
.sect-head.ctr p{margin-left:auto;margin-right:auto}

/* ---- book hero ---- */
.bh-wrap{display:grid;gap:38px;align-items:center}
@media(min-width:900px){.bh-wrap{grid-template-columns:.85fr 1.15fr;gap:56px}}
.bh-shot{position:relative;display:flex;align-items:center;justify-content:center;min-height:340px}
.bh-shot::before{content:"";position:absolute;width:76%;height:76%;border-radius:50%;
  background:radial-gradient(circle,rgba(255,140,80,.32),rgba(232,67,126,.10) 46%,transparent 70%);filter:blur(46px)}
.bh-cover{position:relative;z-index:1;width:100%;max-width:400px;height:auto;
  filter:drop-shadow(0 24px 44px rgba(0,0,0,.8))}
.bh-rate{display:flex;align-items:center;gap:10px;margin-bottom:18px;font-size:.9rem;color:var(--smoke)}
.bh-rate .stars{color:var(--amber);letter-spacing:.1em;font-size:1rem}
.bh-rate b{color:var(--bone)}
.bh-facts{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 26px;padding:0;list-style:none}
.bh-facts li{font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;
  border:1px solid var(--edge);border-radius:100px;padding:7px 13px;color:var(--bone-dim)}

/* ---- format chooser ---- */
.fmt-grid{display:grid;gap:16px}
@media(min-width:640px){.fmt-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1040px){.fmt-grid{grid-template-columns:repeat(4,1fr)}}
.fmt{display:flex;flex-direction:column;border:1px solid var(--edge);border-radius:18px;padding:26px 24px;
  background:linear-gradient(168deg,var(--surface-2),var(--surface));transition:border-color .2s,transform .18s}
.fmt:hover{border-color:var(--edge-lit);transform:translateY(-3px)}
.fmt.pick{border-color:var(--edge-lit);box-shadow:0 22px 54px -32px rgba(255,107,74,.55);position:relative}
/* label comes from data-flag — never hardcode a sales claim we can't verify */
.fmt.pick::before{content:attr(data-flag);position:absolute;top:-11px;left:24px;font-family:var(--mono);
  font-size:9px;letter-spacing:.16em;text-transform:uppercase;background:var(--doorlight);color:#1A0E08;
  padding:5px 12px;border-radius:100px;font-weight:700}
.fmt-name{font-family:var(--mono);font-size:10.5px;letter-spacing:.17em;text-transform:uppercase;color:var(--amber);margin-bottom:14px}
.fmt-price{font-family:var(--display);font-size:2.5rem;letter-spacing:-.045em;color:var(--bone);line-height:1;margin-bottom:6px}
.fmt-price sup{font-size:.42em;vertical-align:super;font-weight:400;margin-right:1px}
.fmt-note{font-size:.85rem;color:var(--smoke);margin-bottom:20px;min-height:2.6em}
.fmt-spec{list-style:none;padding:0;margin:0 0 22px;font-size:.85rem}
.fmt-spec li{display:flex;justify-content:space-between;gap:10px;padding:7px 0;border-bottom:1px solid var(--edge);color:var(--bone-dim)}
.fmt-spec li:last-child{border-bottom:0}
.fmt-spec li span{color:var(--smoke);font-family:var(--mono);font-size:.72rem;letter-spacing:.06em}
.fmt .btn{margin-top:auto;width:100%}

/* ---- chapter list ---- */
.chap-grid{display:grid;gap:1px;background:var(--edge);border:1px solid var(--edge);border-radius:16px;overflow:hidden}
@media(min-width:760px){.chap-grid{grid-template-columns:1fr 1fr}}
.chap{background:linear-gradient(168deg,var(--surface-2),var(--surface));padding:16px 20px;display:flex;gap:15px;align-items:baseline}
.chap-no{font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;color:var(--amber);flex:none;min-width:22px}
.chap-ttl{font-size:.95rem;color:var(--bone);font-weight:650;line-height:1.35}
.chap-sub{display:block;font-weight:400;color:var(--smoke);font-size:.85rem;margin-top:3px}

/* ---- forms ---- */
.oform{border:1px solid var(--edge-lit);border-radius:20px;padding:30px 26px;
  background:radial-gradient(120% 130% at 50% -20%,rgba(255,107,74,.14),transparent 62%),
             linear-gradient(168deg,var(--surface-2),#140E1A)}
@media(min-width:760px){.oform{padding:38px 34px}}
.ofield{display:grid;gap:16px;margin-bottom:16px}
@media(min-width:640px){.ofield.two{grid-template-columns:1fr 1fr}.ofield.three{grid-template-columns:repeat(3,1fr)}}
.olab{display:block}
.olab>span{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--smoke);margin-bottom:8px}
.olab>span em{font-style:normal;color:var(--coral);margin-left:3px}
.oform input,.oform select,.oform textarea{width:100%;font-family:var(--sans);font-size:.97rem;color:var(--bone);
  background:rgba(12,9,16,.55);border:1px solid var(--edge);border-radius:10px;padding:13px 14px;transition:border-color .18s}
.oform textarea{min-height:104px;resize:vertical;line-height:1.55}
.oform input:hover,.oform select:hover,.oform textarea:hover{border-color:rgba(245,239,230,.2)}
.oform input:focus,.oform select:focus,.oform textarea:focus{outline:0;border-color:var(--amber)}
.oform input::placeholder,.oform textarea::placeholder{color:#6E626A}
/* the native dark-on-dark dropdown list is unreadable on Windows without this */
.oform select{appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:38px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238B7F87' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center}
.oform select option{background:#1A1420;color:var(--bone)}
.ohint{font-size:.83rem;color:var(--smoke);margin:0 0 22px;line-height:1.5}
.oform .btn{width:100%}
@media(min-width:640px){.oform .btn{width:auto;min-width:260px}}
.onote{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--smoke);margin-top:16px}
/* status line: reserves its own height so the form doesn't jump on submit */
.ostat{margin-top:18px;font-size:.93rem;line-height:1.5;min-height:1.5em}
.ostat.err{color:var(--coral)}
.ostat.ok{color:#3FBFA0}
.ostat.busy{color:var(--smoke)}

/* ---- bulk tiers ---- */
.tier-grid{display:grid;gap:16px}
@media(min-width:820px){.tier-grid{grid-template-columns:repeat(3,1fr)}}
.tierbox{border:1px solid var(--edge);border-radius:18px;padding:28px 26px;
  background:linear-gradient(168deg,var(--surface),#150F1C);display:flex;flex-direction:column}
.tierbox.lit{border-color:var(--edge-lit);background:linear-gradient(168deg,#2C1E2C,#1A1220)}
.tier-qty{font-family:var(--display);font-size:2.1rem;letter-spacing:-.04em;color:var(--bone);line-height:1;margin-bottom:6px}
.tier-qty small{font-size:.34em;color:var(--smoke);letter-spacing:0;margin-left:4px}
.tier-for{font-family:var(--mono);font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--amber);margin-bottom:18px}
.tier-list{list-style:none;padding:0;margin:0 0 24px;font-size:.92rem}
.tier-list li{display:flex;gap:11px;margin-bottom:10px;color:var(--bone-dim);line-height:1.5}
.tier-list li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--coral);flex:none;margin-top:9px}
/* Per-copy price inside a tier box. Emitted only when BULK is priced in
   site.config.js, so these rules match nothing until Dr. Crosse sets his
   numbers — no dead styling, but no edit needed on the day either. */
.tier-price{margin:0 0 18px;padding:14px 0;border-top:1px solid var(--edge);border-bottom:1px solid var(--edge)}
.tier-pp{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin-bottom:6px}
.tier-pp:last-child{margin-bottom:0}
.tier-pp b{font-family:var(--display);font-size:1.5rem;color:var(--bone);letter-spacing:-.03em;font-weight:600}
.tier-pp span{font-size:.82rem;color:var(--smoke)}
/* Live order estimate under the quote form. [hidden] must beat the display
   rule or the box shows empty before a quantity is typed. */
.bulkcalc{display:block;margin:-4px 0 18px;padding:16px 18px;border:1px solid var(--edge-lit);
  border-radius:14px;background:linear-gradient(168deg,#2C1E2C,#1A1220)}
.bulkcalc[hidden]{display:none}
.bulkcalc b{display:block;font-family:var(--display);font-size:1.9rem;letter-spacing:-.035em;
  color:var(--bone);line-height:1.1;font-weight:600}
.bulkcalc span{display:block;font-size:.9rem;color:var(--bone-dim);margin-top:2px}
.bulkcalc b~b{margin-top:12px}
.bulkcalc em{display:block;font-style:normal;font-family:var(--mono);font-size:10px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--amber);margin-top:12px}
.bulkcalc a{color:var(--amber);border-bottom:1px solid rgba(255,179,71,.35)}
.tierbox .btn{margin-top:auto}

/* ---- proof strip ---- */
.strip{display:grid;gap:1px;background:var(--edge);border:1px solid var(--edge);border-radius:16px;overflow:hidden}
@media(min-width:640px){.strip.four{grid-template-columns:repeat(4,1fr)}.strip.three{grid-template-columns:repeat(3,1fr)}}
.strip-cell{background:linear-gradient(168deg,var(--surface-2),var(--surface));padding:22px 20px}
.strip-n{font-family:var(--display);font-size:1.8rem;line-height:1;letter-spacing:-.04em;
  background:var(--doorlight);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:8px}
.strip-c{font-family:var(--mono);font-size:9.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--smoke);line-height:1.5}

/* ---- speaking: talk cards ---- */
.talk-grid{display:grid;gap:16px}
@media(min-width:760px){.talk-grid{grid-template-columns:1fr 1fr}}
.talk{border:1px solid var(--edge);border-radius:18px;padding:26px 24px;
  background:linear-gradient(168deg,var(--surface-2),var(--surface));transition:border-color .2s,transform .18s}
.talk:hover{border-color:var(--edge-lit);transform:translateY(-3px)}
.talk-src{font-family:var(--mono);font-size:9.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--amber);margin-bottom:12px}
.talk h3{font-size:1.28rem;line-height:1.16;margin-bottom:11px}
.talk p{font-size:.94rem;color:var(--bone-dim);margin:0 0 16px;line-height:1.6}
.talk-tags{display:flex;flex-wrap:wrap;gap:7px;margin:0;padding:0;list-style:none}
.talk-tags li{font-family:var(--mono);font-size:9px;letter-spacing:.11em;text-transform:uppercase;
  border:1px solid var(--edge);border-radius:100px;padding:5px 11px;color:var(--smoke)}

/* ---- on-stage proof shot (/speaking/) ---- */
.onstage{margin:0;position:relative;border-radius:20px;overflow:hidden;border:1px solid var(--edge)}
.onstage img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;object-position:50% 32%}
.onstage::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(12,9,16,.88) 0%,rgba(12,9,16,.15) 34%,transparent 60%)}
.onstage figcaption{position:absolute;left:22px;right:22px;bottom:18px;z-index:2;
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--bone-dim)}
.onstage figcaption em{font-style:normal;color:var(--amber)}
@media(min-width:900px){.onstage img{aspect-ratio:21/9;object-position:50% 30%}}

/* ---- talk tabs (/speaking/) ---- */
/* Narrow screens scroll the tab row; from 900px up it wraps instead, because a
   tab hanging off the right edge of a desktop window reads as broken content
   rather than as something you can swipe. */
.tabs{display:flex;gap:8px;overflow-x:auto;padding-bottom:12px;margin-bottom:22px;
  scrollbar-width:thin;-webkit-overflow-scrolling:touch}
@media(min-width:900px){.tabs{flex-wrap:wrap;overflow:visible;padding-bottom:0;margin-bottom:24px}}
.tabs::-webkit-scrollbar{height:4px}
.tabs::-webkit-scrollbar-thumb{background:var(--edge);border-radius:100px}
.tab{flex:0 0 auto;font-family:var(--sans);font-size:.88rem;font-weight:650;color:var(--smoke);
  background:linear-gradient(168deg,var(--surface-2),var(--surface));border:1px solid var(--edge);
  border-radius:100px;padding:11px 18px;cursor:pointer;white-space:nowrap;
  transition:color .18s,border-color .18s,background .18s}
.tab:hover{color:var(--bone);border-color:rgba(245,239,230,.22)}
.tab[aria-selected=true]{color:#16100A;background:var(--amber);border-color:transparent}
.tab .tnum{font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;opacity:.7;margin-right:8px}

.tpanel{border:1px solid var(--edge-lit);border-radius:20px;overflow:hidden;
  background:linear-gradient(168deg,var(--surface-2),#140E1A)}
.tpanel[hidden]{display:none}
.tp-top{padding:28px 26px 24px;border-bottom:1px solid var(--edge)}
@media(min-width:760px){.tp-top{padding:34px 34px 28px}}
.tp-src{font-family:var(--mono);font-size:9.5px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--amber);margin-bottom:12px}
.tp-top h3{font-size:clamp(1.4rem,3.2vw,2rem);line-height:1.1;margin-bottom:13px}
.tp-lead{font-size:1.02rem;color:var(--bone-dim);margin:0;line-height:1.62;max-width:64ch}

.tp-meta{display:grid;gap:1px;background:var(--edge);border-bottom:1px solid var(--edge)}
@media(min-width:620px){.tp-meta{grid-template-columns:repeat(4,1fr)}}
.tp-m{background:linear-gradient(168deg,var(--surface-2),var(--surface));padding:15px 18px}
.tp-mk{font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--smoke);margin-bottom:5px}
.tp-mv{font-size:.9rem;color:var(--bone);font-weight:650;line-height:1.3}

.tp-body{display:grid;gap:0}
@media(min-width:860px){.tp-body{grid-template-columns:1.1fr .9fr}}
.tp-col{padding:26px}
@media(min-width:760px){.tp-col{padding:30px 34px}}
@media(min-width:860px){.tp-col+.tp-col{border-left:1px solid var(--edge)}}
@media(max-width:859px){.tp-col+.tp-col{border-top:1px solid var(--edge)}}
.tp-h{font-family:var(--mono);font-size:9.5px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--amber);margin-bottom:13px}
.tp-h+.tp-h{margin-top:26px}
.tp-list{list-style:none;padding:0;margin:0}
.tp-list li{display:flex;gap:11px;font-size:.93rem;color:var(--bone-dim);margin-bottom:10px;line-height:1.55}
.tp-list li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--coral);flex:none;margin-top:9px}
.tp-do{border-left:2px solid var(--amber);padding-left:16px;margin:0 0 6px}
.tp-do p{font-size:.93rem;color:var(--bone-dim);margin:0 0 9px;line-height:1.58}
.tp-do p:last-child{margin-bottom:0}
.tp-chips{display:flex;flex-wrap:wrap;gap:7px;margin:0;padding:0;list-style:none}
.tp-chips li{font-family:var(--mono);font-size:9px;letter-spacing:.11em;text-transform:uppercase;
  border:1px solid var(--edge-lit);border-radius:100px;padding:6px 12px;color:var(--bone-dim)}
.tp-cite{font-size:.83rem;color:var(--smoke);line-height:1.55;margin:0 0 9px;padding-left:14px;
  border-left:1px solid var(--edge)}
.tp-cite:last-child{margin-bottom:0}
.tp-cite b{color:var(--bone-dim);font-weight:650}
.tp-foot{border-top:1px solid var(--edge);padding:20px 26px;display:flex;flex-wrap:wrap;gap:12px;
  align-items:center;justify-content:space-between}
@media(min-width:760px){.tp-foot{padding:22px 34px}}
.tp-note{font-size:.85rem;color:var(--smoke);margin:0;max-width:52ch}

/* ---- pull quote with attribution ---- */
.endorse{border-left:3px solid;border-image:var(--doorlight) 1;padding:6px 0 6px 24px;margin:0}
.endorse p{font-family:var(--deck);font-style:italic;font-size:clamp(1.15rem,2.4vw,1.5rem);line-height:1.45;
  color:var(--bone);margin:0 0 14px}
.endorse cite{font-style:normal;font-size:.86rem;color:var(--smoke);display:block}
.endorse cite b{color:var(--bone-dim);font-weight:650;display:block;font-size:.95rem;margin-bottom:2px}

/* ---- split feature ---- */
.split{display:grid;gap:34px;align-items:center}
@media(min-width:880px){.split{grid-template-columns:.85fr 1.15fr;gap:52px}}
.split-img{border-radius:20px;overflow:hidden;border:1px solid var(--edge);position:relative}
.split-img img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 12%;aspect-ratio:4/5}
.split-img::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(12,9,16,.8),transparent 46%)}
.split-tag{position:absolute;left:18px;right:18px;bottom:16px;z-index:2;font-family:var(--mono);
  font-size:9.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--amber)}
.credbox{display:grid;gap:1px;background:var(--edge);border:1px solid var(--edge);border-radius:14px;overflow:hidden;margin-top:24px}
@media(min-width:620px){.credbox{grid-template-columns:repeat(2,1fr)}}
.credcell{background:var(--surface);padding:15px 18px}
.credcell .ck{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--smoke);margin-bottom:4px}
.credcell .cv{font-size:.93rem;color:var(--bone);font-weight:650}

/* ---- crosslink banner ---- */
.xlink{border:1px solid var(--edge-lit);border-radius:22px;padding:40px 30px;text-align:center;
  background:radial-gradient(120% 130% at 50% -20%,rgba(255,107,74,.20),transparent 62%),
             linear-gradient(168deg,var(--surface-2),#140E1A)}
.xlink h2{font-size:clamp(1.6rem,3.6vw,2.4rem);line-height:1.06;margin:12px auto 14px;max-width:22ch}
.xlink p{max-width:52ch;margin:0 auto 26px}
.xlink .row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* ============================================================
   COMPANION  (/companion/)
   ============================================================ */
/* ---- chapter accordion ---- */
.chx{display:grid;gap:1px;background:var(--edge);border:1px solid var(--edge);border-radius:16px;overflow:hidden}
details.chd{background:linear-gradient(168deg,var(--surface-2),var(--surface))}
details.chd>summary{list-style:none;cursor:pointer;padding:17px 20px;display:flex;gap:15px;align-items:baseline;
  transition:background .18s}
details.chd>summary::-webkit-details-marker{display:none}
details.chd>summary:hover{background:#2C2136}
details.chd[open]>summary{background:#2C2136}
.chd-no{font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;color:var(--amber);flex:none;min-width:22px}
.chd-h{flex:1;min-width:0}
.chd-t{font-size:.98rem;color:var(--bone);font-weight:650;line-height:1.32}
.chd-s{display:block;font-weight:400;color:var(--smoke);font-size:.85rem;margin-top:3px}
.chd-x{font-family:var(--mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--smoke);
  flex:none;align-self:center;border:1px solid var(--edge);border-radius:100px;padding:4px 9px}
details.chd[open] .chd-x{color:var(--amber);border-color:var(--edge-lit)}
.chd-body{padding:2px 20px 22px 57px}
@media(max-width:560px){.chd-body{padding-left:20px}.chd-x{display:none}}
.chd-body .fw{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--amber);margin-bottom:9px}
.chd-body p{font-size:.94rem;line-height:1.62;margin:0 0 13px;color:var(--bone-dim)}
.chd-body ul{margin:0 0 13px;padding-left:17px;font-size:.92rem;color:var(--bone-dim)}
.chd-body li{margin-bottom:6px;line-height:1.5}
.chd-body li::marker{color:var(--coral)}
.chd-do{border-left:2px solid var(--amber);padding:2px 0 2px 15px;margin:0 0 6px}
.chd-do .k{font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--amber);margin-bottom:6px}
.chd-none{font-size:.88rem;color:var(--smoke);font-style:italic;margin:0}

/* ---- 14-day tracker ---- */
.trk{border:1px solid var(--edge-lit);border-radius:20px;overflow:hidden;
  background:linear-gradient(168deg,var(--surface-2),#140E1A)}
.trk-top{display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;align-items:center;
  padding:22px 24px;border-bottom:1px solid var(--edge)}
.trk-score{display:flex;align-items:baseline;gap:10px}
.trk-n{font-family:var(--display);font-size:2.1rem;letter-spacing:-.045em;line-height:1;
  background:var(--doorlight);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.trk-of{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--smoke)}
.trk-bar{flex:1 1 180px;height:7px;border-radius:100px;background:rgba(246,240,231,.10);overflow:hidden;min-width:120px}
.trk-bar i{display:block;height:100%;width:0;background:var(--doorlight);transition:width .35s cubic-bezier(.2,.8,.3,1)}
.trk-reset{font-family:var(--mono);font-size:9px;letter-spacing:.13em;text-transform:uppercase;color:var(--smoke);
  background:none;border:1px solid var(--edge);border-radius:100px;padding:7px 13px;cursor:pointer;transition:color .18s,border-color .18s}
.trk-reset:hover{color:var(--coral);border-color:var(--coral)}

.trk-scroll{overflow-x:auto}
.trk-grid{width:100%;border-collapse:collapse;min-width:330px}
.trk-grid th,.trk-grid td{border-bottom:1px solid var(--edge);border-right:1px solid var(--edge)}
.trk-grid th:last-child,.trk-grid td:last-child{border-right:0}
.trk-grid tr:last-child td{border-bottom:0}
.trk-grid thead th{font-family:var(--mono);font-size:8.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--smoke);font-weight:400;padding:12px 4px;text-align:center;vertical-align:bottom;line-height:1.3}
.trk-grid thead th:first-child{text-align:left;padding-left:20px}
.trk-day{font-family:var(--mono);font-size:.74rem;color:var(--bone-dim);padding:0 8px 0 20px;white-space:nowrap;width:1%}
.trk-grid tr.done .trk-day{color:var(--amber)}
.trk-cell{padding:0;text-align:center}
.trk-box{width:100%;min-height:42px;background:none;border:0;cursor:pointer;display:flex;
  align-items:center;justify-content:center;padding:0;transition:background .16s}
.trk-box:hover{background:rgba(255,179,71,.07)}
.trk-box i{width:17px;height:17px;border-radius:5px;border:1.5px solid rgba(245,239,230,.24);display:block;
  transition:background .16s,border-color .16s;position:relative}
.trk-box[aria-pressed=true] i{background:var(--doorlight);border-color:transparent}
.trk-box[aria-pressed=true] i::after{content:"";position:absolute;left:5px;top:1.5px;width:4px;height:9px;
  border:solid #16100A;border-width:0 2px 2px 0;transform:rotate(45deg)}
.trk-foot{padding:16px 22px;font-size:.85rem;color:var(--smoke);line-height:1.5;border-top:1px solid var(--edge)}
.trk-foot b{color:var(--bone-dim)}

/* point key under the tracker */
.ptkey{display:grid;gap:12px;margin-top:22px}
@media(min-width:700px){.ptkey{grid-template-columns:repeat(5,1fr)}}
.pt{border:1px solid var(--edge);border-radius:12px;padding:15px 16px;
  background:linear-gradient(168deg,var(--surface-2),var(--surface))}
.pt-n{font-family:var(--mono);font-size:9px;letter-spacing:.13em;text-transform:uppercase;color:var(--amber);margin-bottom:7px}
.pt-d{font-size:.86rem;color:var(--bone-dim);line-height:1.48;margin:0}
.pt-alt{display:block;font-size:.76rem;color:var(--smoke);margin-top:6px}

/* ---- 14-day certificate ---- */
.cert{border:1px solid var(--edge-lit);border-radius:18px;padding:24px 26px;margin-top:22px;
  background:linear-gradient(168deg,var(--surface-2),#140E1A);max-width:900px}
.cert h3{font-size:1.16rem;line-height:1.2;margin-bottom:9px}
.cert p{font-size:.92rem;color:var(--bone-dim);margin:0 0 16px;line-height:1.55;max-width:62ch}
.cert-row{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end}
.cert-row label{flex:1 1 240px;min-width:0}
.cert-row label span{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--smoke);margin-bottom:8px}
.cert-row input{width:100%;font-family:var(--sans);font-size:.97rem;color:var(--bone);
  background:rgba(12,9,16,.55);border:1px solid var(--edge);border-radius:10px;padding:13px 14px}
.cert-row input:focus{outline:0;border-color:var(--amber)}
.cert-row input::placeholder{color:#6E626A}
.cert-note{font-family:var(--mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--smoke);margin:14px 0 0}
.cert-locked{font-size:.88rem;color:var(--smoke);margin:0;line-height:1.55}
.cert-locked b{color:var(--bone-dim)}

/* The printable sheet. Hidden on screen entirely; on paper it is the only
   thing left standing. Light stock deliberately — the site is near-black and
   nobody should burn a cartridge to keep a record of their own work. */
.cert-sheet{display:none}
@media print{
  body{background:#fff !important}
  body::after{display:none !important}
  /* visibility:hidden still reserves layout — the first attempt printed a
     twelve-page document of blank paper. The sheet is a direct child of body
     precisely so every sibling can be removed from flow instead. */
  body > *:not(.cert-sheet){display:none !important}
  .cert-sheet{display:block !important;padding:0.6in 0.7in;min-height:9.4in;position:relative;
    background:#fff;color:#1a1420;font-family:var(--sans)}
  .cert-sheet .cs-rule{height:6px;border-radius:3px;background:var(--doorlight);
    width:120px;margin-bottom:0.34in;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .cert-sheet .cs-k{font-family:var(--mono);font-size:8.5pt;letter-spacing:.2em;
    text-transform:uppercase;color:#9a7a20;margin-bottom:0.16in}
  .cert-sheet h1{font-family:var(--display);font-size:30pt;line-height:1.04;letter-spacing:-.02em;
    color:#141019;margin:0 0 0.1in}
  .cert-sheet .cs-name{font-family:var(--display);font-size:22pt;color:#141019;
    border-bottom:2px solid #141019;display:inline-block;padding:0 0.2in 0.06in 0;margin:0.14in 0 0.2in}
  .cert-sheet p{font-size:11pt;line-height:1.55;color:#3a3340;margin:0 0 0.14in;max-width:6in}
  .cert-sheet .cs-stat{display:flex;gap:0.5in;margin:0.24in 0}
  .cert-sheet .cs-stat div{border-left:2px solid #d9d2c8;padding-left:0.14in}
  .cert-sheet .cs-n{font-family:var(--display);font-size:20pt;color:#141019;line-height:1}
  .cert-sheet .cs-c{font-family:var(--mono);font-size:7.5pt;letter-spacing:.13em;
    text-transform:uppercase;color:#6b6270;margin-top:4pt}
  .cert-sheet ol{margin:0.1in 0 0.2in 0.24in;padding:0}
  .cert-sheet li{font-size:10.5pt;line-height:1.5;color:#3a3340;margin-bottom:5pt}
  .cert-sheet .cs-foot{position:absolute;left:0.7in;right:0.7in;bottom:0.55in;
    border-top:1px solid #d9d2c8;padding-top:0.14in}
  .cert-sheet .cs-sig{font-size:10pt;color:#141019;margin-bottom:3pt}
  .cert-sheet .cs-fine{font-size:8pt;line-height:1.5;color:#6b6270;max-width:5.4in}
  @page{size:letter portrait;margin:0}
}

/* ---- framework quick-reference ---- */
.tool-grid{display:grid;gap:14px}
@media(min-width:640px){.tool-grid{grid-template-columns:1fr 1fr}}
@media(min-width:1040px){.tool-grid{grid-template-columns:repeat(3,1fr)}}
.tool{border:1px solid var(--edge);border-radius:16px;padding:22px 21px;
  background:linear-gradient(168deg,var(--surface-2),var(--surface))}
.tool-h{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:12px}
.tool-n{font-family:var(--display);font-size:1.12rem;letter-spacing:-.02em;color:var(--bone);line-height:1.15}
.tool-c{font-family:var(--mono);font-size:8.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--smoke);flex:none}
.tool-steps{list-style:none;padding:0;margin:0 0 12px}
.tool-steps li{display:flex;gap:10px;font-size:.86rem;color:var(--bone-dim);margin-bottom:6px;line-height:1.45}
.tool-steps li b{color:var(--amber);font-family:var(--mono);font-size:.74rem;min-width:15px;flex:none}
.tool-use{font-size:.82rem;color:var(--smoke);border-top:1px solid var(--edge);padding-top:11px;margin:0;line-height:1.48}

/* ---- workshop exercises ---- */
.ws{border:1px solid var(--edge-lit);border-radius:20px;padding:28px 26px;
  background:radial-gradient(120% 130% at 50% -20%,rgba(255,107,74,.13),transparent 62%),
             linear-gradient(168deg,var(--surface-2),#140E1A)}
@media(min-width:760px){.ws{padding:34px 32px}}
.ws-k{font-family:var(--mono);font-size:9.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--amber);margin-bottom:11px}
.ws h3{font-size:1.35rem;line-height:1.16;margin-bottom:10px}
.ws-lead{font-size:.95rem;color:var(--bone-dim);margin:0 0 24px;line-height:1.6;max-width:60ch}
.ws-field{margin-bottom:20px}
.ws-stem{display:block;font-size:.95rem;color:var(--bone);font-weight:650;margin-bottom:9px;line-height:1.4}
.ws-stem span{font-family:var(--mono);font-size:9px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--smoke);font-weight:400;display:block;margin-top:4px}
.ws textarea{width:100%;font-family:var(--sans);font-size:.98rem;color:var(--bone);line-height:1.55;
  background:rgba(12,9,16,.55);border:1px solid var(--edge);border-radius:10px;padding:13px 14px;
  min-height:74px;resize:vertical;transition:border-color .18s}
.ws textarea:hover{border-color:rgba(245,239,230,.2)}
.ws textarea:focus{outline:0;border-color:var(--amber)}
.ws textarea::placeholder{color:#6E626A}
.ws-bar{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;
  border-top:1px solid var(--edge);padding-top:18px;margin-top:4px}
.ws-meta{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--smoke)}
.ws-meta b{color:var(--amber)}
.ws-acts{display:flex;gap:10px;flex-wrap:wrap}
.ws-btn{font-family:var(--mono);font-size:9px;letter-spacing:.13em;text-transform:uppercase;color:var(--bone-dim);
  background:none;border:1px solid var(--edge);border-radius:100px;padding:8px 14px;cursor:pointer;
  transition:color .18s,border-color .18s}
.ws-btn:hover{color:var(--amber);border-color:var(--edge-lit)}
.ws-btn.live{color:var(--coral);border-color:var(--coral)}
/* read-aloud timer */
.ws-timer{font-family:var(--display);font-size:1.5rem;letter-spacing:-.03em;color:var(--bone);
  font-variant-numeric:tabular-nums;line-height:1}
.ws-timer.over{color:var(--coral)}
.ws-out{margin-top:20px;padding:18px 20px;border:1px solid var(--edge);border-radius:14px;
  background:rgba(12,9,16,.4)}
.ws-out .l{font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--smoke);margin-bottom:9px}
.ws-out p{font-family:var(--deck);font-style:italic;font-size:1.12rem;line-height:1.5;color:var(--bone);margin:0}
.ws-out p.empty{font-family:var(--sans);font-style:normal;font-size:.9rem;color:var(--smoke)}

/* FROM doors */
.doors{display:grid;gap:14px;margin-bottom:6px}
@media(min-width:700px){.doors{grid-template-columns:1fr 1fr}}
.door{border:1px solid var(--edge);border-radius:14px;padding:18px 19px;background:rgba(12,9,16,.34)}
.door-l{font-family:var(--display);font-size:1.5rem;line-height:1;letter-spacing:-.04em;
  background:var(--doorlight);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;margin-bottom:8px}
.door-n{font-size:.95rem;color:var(--bone);font-weight:650;margin-bottom:5px}
.door-d{font-size:.86rem;color:var(--smoke);margin:0 0 13px;line-height:1.5}
.door textarea{min-height:56px;font-size:.92rem}

/* ============================================================
   CAREER EXPLORER (/careers/)  — all classes prefixed cx-
   ============================================================ */
.cx-tabs{display:flex;gap:8px;margin-bottom:20px;flex-wrap:wrap}
.cx-tab{font-family:var(--sans);font-size:.86rem;font-weight:650;color:var(--smoke);
  background:linear-gradient(168deg,var(--surface-2),var(--surface));border:1px solid var(--edge);
  border-radius:100px;padding:10px 17px;cursor:pointer;transition:color .18s,border-color .18s,background .18s}
.cx-tab:hover{color:var(--bone);border-color:rgba(245,239,230,.22)}
.cx-tab[aria-selected=true]{color:#16100A;background:var(--amber);border-color:transparent}

.cx-search{position:relative;margin-bottom:14px}
.cx-search input{width:100%;font-family:var(--sans);font-size:1.05rem;color:var(--bone);
  background:rgba(12,9,16,.55);border:1px solid var(--edge);border-radius:12px;
  padding:16px 16px 16px 46px;transition:border-color .18s}
.cx-search input:focus{outline:0;border-color:var(--amber)}
.cx-search input::placeholder{color:#6E626A}
.cx-search svg{position:absolute;left:16px;top:50%;transform:translateY(-50%);
  width:17px;height:17px;color:var(--smoke);pointer-events:none}

.cx-filters{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:18px;align-items:center}
/* display:flex beats the user-agent [hidden]{display:none}, so the language
   picker stayed visible on the US tab until this was made explicit */
.cx-filters[hidden]{display:none}
.cx-filters .cx-lab{font-family:var(--mono);font-size:9px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--smoke);margin-right:4px}
.cx-zone{font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--bone-dim);background:none;border:1px solid var(--edge);border-radius:100px;
  padding:7px 12px;cursor:pointer;transition:color .18s,border-color .18s}
.cx-zone:hover{color:var(--bone);border-color:rgba(245,239,230,.24)}
.cx-zone[aria-pressed=true]{color:var(--amber);border-color:var(--edge-lit);background:rgba(255,179,71,.09)}

.cx-count{font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--smoke);margin:0 0 12px}

.cx-grid{display:grid;gap:20px}
@media(min-width:940px){.cx-grid{grid-template-columns:.9fr 1.1fr;align-items:start}}

.cx-list{display:flex;flex-direction:column;gap:1px;background:var(--edge);
  border:1px solid var(--edge);border-radius:14px;overflow:hidden;max-height:520px;overflow-y:auto}
.cx-item{display:block;width:100%;text-align:left;background:linear-gradient(168deg,var(--surface-2),var(--surface));
  border:0;padding:14px 17px;cursor:pointer;transition:background .16s;font-family:var(--sans)}
.cx-item:hover{background:#2C2136}
.cx-item[aria-current=true]{background:#33253C}
.cx-item .cx-t{font-size:.96rem;color:var(--bone);font-weight:650;line-height:1.3;margin-bottom:3px}
.cx-item .cx-m{font-family:var(--mono);font-size:8.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--smoke)}
.cx-empty{padding:30px 18px;text-align:center;color:var(--smoke);font-size:.9rem;
  background:linear-gradient(168deg,var(--surface-2),var(--surface))}

.cx-detail{border:1px solid var(--edge-lit);border-radius:18px;overflow:hidden;
  background:linear-gradient(168deg,var(--surface-2),#140E1A);min-height:260px}
.cx-d-top{padding:24px 24px 20px;border-bottom:1px solid var(--edge)}
.cx-d-top h3{font-size:1.42rem;line-height:1.15;margin-bottom:9px}
.cx-d-top p{font-size:.95rem;color:var(--bone-dim);margin:0;line-height:1.6}
.cx-alias{display:flex;flex-wrap:wrap;gap:6px;margin:13px 0 0;padding:0;list-style:none}
.cx-alias li{font-family:var(--mono);font-size:8.5px;letter-spacing:.09em;text-transform:uppercase;
  border:1px solid var(--edge);border-radius:100px;padding:5px 10px;color:var(--smoke)}
.cx-d-body{padding:22px 24px}
.cx-h{font-family:var(--mono);font-size:9.5px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--amber);margin-bottom:11px}
.cx-h+.cx-h{margin-top:22px}
.cx-ul{list-style:none;padding:0;margin:0 0 4px}
.cx-ul li{display:flex;gap:10px;font-size:.92rem;color:var(--bone-dim);margin-bottom:9px;line-height:1.52}
.cx-ul li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--coral);flex:none;margin-top:8px}
.cx-chips{display:flex;flex-wrap:wrap;gap:7px;margin:0;padding:0;list-style:none}
.cx-chips li,.cx-chips button{font-family:var(--mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;
  border:1px solid var(--edge-lit);border-radius:100px;padding:6px 12px;color:var(--bone-dim);
  background:none;cursor:default}
.cx-chips button{cursor:pointer;transition:color .18s,border-color .18s}
.cx-chips button:hover{color:var(--amber)}
.cx-prep{border:1px solid var(--edge);border-radius:12px;padding:15px 17px;background:rgba(12,9,16,.4);margin-bottom:4px}
.cx-prep .cx-pn{font-size:.95rem;color:var(--bone);font-weight:650;margin-bottom:6px}
.cx-prep p{font-size:.87rem;color:var(--smoke);margin:0 0 7px;line-height:1.5}
.cx-prep p:last-child{margin-bottom:0}
.cx-d-foot{border-top:1px solid var(--edge);padding:18px 24px;display:flex;gap:12px;
  flex-wrap:wrap;align-items:center;justify-content:space-between}
.cx-note{font-size:.83rem;color:var(--smoke);margin:0}

/* shortlist — Chapter 11 asks for exactly three */
.cx-short{border:1px solid var(--edge-lit);border-radius:16px;padding:20px 22px;margin-bottom:22px;
  background:radial-gradient(120% 130% at 50% -30%,rgba(255,107,74,.14),transparent 62%),
             linear-gradient(168deg,var(--surface-2),#140E1A)}
.cx-short .cx-h{margin-bottom:12px}
.cx-slots{display:grid;gap:10px}
@media(min-width:620px){.cx-slots{grid-template-columns:repeat(3,1fr)}}
.cx-slot{border:1px dashed var(--edge);border-radius:11px;padding:13px 15px;min-height:64px;
  display:flex;align-items:center;justify-content:space-between;gap:10px}
.cx-slot.filled{border-style:solid;border-color:var(--edge-lit);background:rgba(12,9,16,.4)}
.cx-slot .cx-sn{font-size:.9rem;color:var(--bone);font-weight:650;line-height:1.3}
.cx-slot .cx-se{font-family:var(--mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--smoke)}
.cx-slot button{background:none;border:0;color:var(--smoke);cursor:pointer;font-size:1.1rem;
  line-height:1;padding:2px 4px;flex:none}
.cx-slot button:hover{color:var(--coral)}

.cx-attr{font-size:.8rem;color:var(--smoke);line-height:1.55;margin:26px 0 0;
  border-top:1px solid var(--edge);padding-top:18px}
.cx-attr a{color:var(--bone-dim);border-bottom:1px solid var(--edge)}
.cx-attr a:hover{color:var(--amber)}

.cx-lang{font-family:var(--sans);font-size:.9rem;color:var(--bone);background:rgba(12,9,16,.55);
  border:1px solid var(--edge);border-radius:10px;padding:10px 34px 10px 12px;cursor:pointer;
  appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238B7F87' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center}
.cx-lang option{background:#1A1420;color:var(--bone)}
.cx-loading{padding:26px 18px;text-align:center;color:var(--smoke);font-size:.9rem}

/* ---- further reading shelf ---- */
.shelf{display:grid;gap:16px}
@media(min-width:760px){.shelf{grid-template-columns:repeat(3,1fr)}}
.shelf-item{display:flex;gap:16px;border:1px solid var(--edge);border-radius:16px;padding:18px;
  background:linear-gradient(168deg,var(--surface-2),var(--surface))}
@media(min-width:760px){.shelf-item{flex-direction:column}}
.shelf-item img{width:74px;height:auto;flex:none;border-radius:4px;align-self:flex-start;
  box-shadow:0 8px 18px rgba(0,0,0,.6)}
@media(min-width:760px){.shelf-item img{width:96px}}
.shelf-ch{font-family:var(--mono);font-size:9px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--amber);margin-bottom:7px}
.shelf-t{font-size:1.02rem;color:var(--bone);font-weight:650;line-height:1.25;margin-bottom:3px}
.shelf-a{font-size:.85rem;color:var(--smoke);margin-bottom:9px}
.shelf-w{font-size:.86rem;color:var(--bone-dim);line-height:1.5;margin:0 0 10px}
.shelf-l{font-family:var(--mono);font-size:9px;letter-spacing:.11em;text-transform:uppercase;color:var(--smoke)}
.shelf-l:hover{color:var(--amber)}
.refs{list-style:none;padding:0;margin:22px 0 0;column-gap:34px}
@media(min-width:820px){.refs{columns:2}}
.refs li{break-inside:avoid;font-size:.85rem;color:var(--smoke);line-height:1.5;margin-bottom:11px;
  padding-left:14px;border-left:1px solid var(--edge)}
.refs li b{color:var(--bone-dim);font-weight:650}

/* ---- glossary ---- */
.gloss{columns:1;column-gap:34px}
@media(min-width:760px){.gloss{columns:2}}
.gterm{break-inside:avoid;margin-bottom:18px}
.gterm dt{font-size:.95rem;color:var(--bone);font-weight:650;margin-bottom:4px}
.gterm dt span{font-family:var(--mono);font-size:8.5px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--smoke);font-weight:400;margin-left:7px}
.gterm dd{margin:0;font-size:.87rem;color:var(--bone-dim);line-height:1.52}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
}