/* ============================================================
   Sitework.uk — shared blog stylesheet
   Dark brand system, matched to the main site (index.html):
   Fraunces (display) + Schibsted Grotesk (body) + JetBrains Mono.
   One file themes every post + the blog index.
   ============================================================ */

:root{
  --bg:           #0c0b0a;
  --paper:        #0c0b0a;
  --paper-deep:   oklch(0.165 0.012 60);
  --surface:      oklch(0.17 0.012 60 / .55);
  --surface-solid:oklch(0.16 0.012 60 / .78);
  --panel:        oklch(0.135 0.010 60);
  --ink:          oklch(0.95 0.008 85);
  --ink-soft:     oklch(0.82 0.012 82);
  --ink-mute:     oklch(0.66 0.012 80);
  --amber:        oklch(0.74 0.16 62);
  --amber-bright: oklch(0.80 0.16 64);
  --amber-deep:   oklch(0.80 0.16 64);
  --amber-soft:   oklch(0.74 0.16 62 / .14);
  --dark:         oklch(0.135 0.010 60);
  --dark-2:       oklch(0.115 0.008 60);
  --on-dark:      oklch(0.95 0.008 85);
  --on-dark-mute: oklch(0.72 0.012 80);
  --line:         oklch(1 0 0 / .12);
  --line-strong:  oklch(1 0 0 / .2);
  --line-dark:    oklch(1 0 0 / .12);
  --ok:           oklch(0.78 0.15 152);
  --warn:         oklch(0.74 0.15 42);
  --display: "Fraunces", Georgia, serif;
  --body: "Schibsted Grotesk", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
  --serif: "Fraunces", Georgia, serif;
  --ease: cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
html,body{margin:0;padding:0}
body{
  font-family:var(--body);font-size:16px;line-height:1.6;
  color:var(--ink);background:var(--bg);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  background-image:radial-gradient(120% 60% at 78% -8%, oklch(0.74 0.16 62 / .08), transparent 60%);
  background-attachment:fixed;
}
::selection{background:var(--amber);color:#1a1712}
a{color:var(--amber-deep)}
.mono{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:500}
.wrap{max-width:1240px;margin:0 auto;padding:0 24px}
@media(min-width:768px){.wrap{padding:0 40px}}
.narrow{max-width:780px;margin:0 auto}
em{font-style:normal}

/* ── Nav ─────────────────────────────────── */
header{position:relative;z-index:5;border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;max-width:1240px;margin:0 auto}
@media(min-width:768px){.nav{padding:18px 40px}}
.mark{font-family:var(--display);font-weight:600;font-size:21px;letter-spacing:-.01em;text-decoration:none;display:flex;align-items:center;gap:9px;color:var(--ink)}
.mark .dot{width:1.15rem;aspect-ratio:1;display:inline-block;flex:none;background:var(--amber);-webkit-mask:url("/assets/brand/sitework-mark.svg") center/contain no-repeat;mask:url("/assets/brand/sitework-mark.svg") center/contain no-repeat;filter:drop-shadow(0 0 8px rgba(244,165,42,.24))}
.nav-links{display:none;gap:28px;align-items:center}
#nav-cta-mobile{display:inline-flex}
@media(min-width:880px){.nav-links{display:flex}#nav-cta-mobile{display:none}}
.nav-links a:not(.btn){text-decoration:none;font-size:14px;font-weight:600;color:var(--ink-mute);transition:color .2s var(--ease)}
.nav-links a:not(.btn):hover{color:var(--ink)}

/* ── Buttons ─────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:var(--body);font-weight:600;font-size:15px;padding:13px 24px;border-radius:999px;text-decoration:none;cursor:pointer;border:1px solid transparent;transition:background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease),transform .2s var(--ease)}
.btn:hover{transform:translateY(-2px)}
.btn:focus-visible,a:focus-visible,summary:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
.btn-ink{background:var(--ink);color:#1a1712}
.btn-ink:hover{background:#fff}
.btn-amber{background:var(--amber);color:#1a1712}
.btn-amber:hover{background:var(--amber-bright)}
.btn-ghost{border-color:var(--line-strong);color:var(--ink);background:oklch(1 0 0 / .04)}
.btn-ghost:hover{border-color:var(--ink)}
.btn-ghost-dark{border-color:var(--line-strong);color:var(--on-dark);background:oklch(1 0 0 / .04)}
.btn-ghost-dark:hover{border-color:var(--on-dark)}
.nav .btn{padding:10px 18px;font-size:14px}

/* ── Breadcrumb ──────────────────────────── */
.crumb{padding:22px 0 0}
.crumb ol{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;font-size:13px;color:var(--ink-mute)}
.crumb a{color:var(--ink-mute);text-decoration:none}
.crumb a:hover{color:var(--ink)}
.crumb li+li::before{content:"/";margin-right:8px;color:var(--line-strong)}

/* ── Article mastheads ───────────────────── */
/* Week-1 style hero */
.post-head{padding:28px 0 4px}
.post-head .tag{color:var(--amber);display:flex;align-items:center;gap:10px;margin-bottom:18px}
.post-head .tag::before{content:"";width:26px;height:1px;background:var(--amber)}
.post-head h1{font-family:var(--display);font-weight:500;font-size:clamp(33px,6vw,58px);line-height:1.02;letter-spacing:-.025em;margin:0 0 14px;text-wrap:balance}
.post-head h1 em{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--amber)}
.post-meta{display:flex;flex-wrap:wrap;gap:18px;align-items:center}
.post-meta .mono{color:var(--ink-mute)}

/* Spec-sheet hero (comparison posts) */
.specsheet{margin:26px 0 6px;border:1px solid var(--line-strong);border-radius:16px;position:relative;background:var(--surface);backdrop-filter:blur(16px);padding:30px 26px 26px}
@media(min-width:768px){.specsheet{padding:38px 36px 32px}}
.specsheet::before,.specsheet::after{content:"";position:absolute;width:12px;height:12px;border:1.5px solid var(--amber)}
.specsheet::before{top:-1px;left:-1px;border-right:none;border-bottom:none}
.specsheet::after{bottom:-1px;right:-1px;border-left:none;border-top:none}
.specsheet .tag{color:var(--amber);display:flex;align-items:center;gap:10px;margin-bottom:18px}
.specsheet .tag::before{content:"";width:26px;height:1px;background:var(--amber)}
.specsheet h1{font-family:var(--display);font-size:clamp(31px,5.6vw,54px);line-height:1.04;letter-spacing:-.025em;font-weight:500;margin:0 0 10px;text-wrap:balance}
.specsheet h1 em{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--amber)}
.specsheet .sub{color:var(--ink-mute);font-size:14.5px;margin:0 0 22px;max-width:60ch}
.spec-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:10px;overflow:hidden}
@media(min-width:680px){.spec-grid{grid-template-columns:repeat(3,1fr)}}
.spec-cell{background:var(--panel);padding:14px 16px}
.spec-cell .k{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-mute);display:block;margin-bottom:5px}
.spec-cell .v{font-family:var(--display);font-weight:500;font-size:16px;color:var(--ink);line-height:1.2}
.spec-cell .v.win{color:var(--ok)}

/* ── Quick answer (GEO extract block) ────── */
.qa{margin:26px 0 8px;background:var(--surface-solid);color:var(--on-dark);border-radius:16px;padding:28px 26px;border:1px solid var(--amber);border-left-width:3px}
@media(min-width:768px){.qa{padding:32px 34px}}
.qa .mono{color:var(--amber);display:block;margin-bottom:12px}
.qa p{margin:0;font-size:clamp(17px,2.1vw,20px);line-height:1.55;color:var(--ink)}
.qa strong{color:#fff}

/* ── Prose ───────────────────────────────── */
.prose{padding:8px 0 12px}
.prose p,.prose ul,.prose li{color:var(--ink-soft)}
.prose h2{font-family:var(--display);font-weight:500;font-size:clamp(26px,3.8vw,40px);line-height:1.08;letter-spacing:-.02em;margin:52px 0 10px;color:var(--ink);text-wrap:balance}
.prose h2 em{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--amber)}
.prose .key{font-size:17.5px;color:var(--ink);margin:14px 0 16px;line-height:1.55}
.prose .key strong{color:#fff}
.prose h3{font-family:var(--display);font-weight:500;font-size:22px;letter-spacing:-.01em;margin:32px 0 6px;color:var(--ink)}
.prose p{margin:0 0 16px;line-height:1.7}
.prose ul{margin:0 0 18px;padding-left:22px}
.prose li{margin:0 0 8px;line-height:1.65}
.prose li::marker{color:var(--amber)}
.prose strong{color:var(--ink)}
.prose a{color:var(--amber-deep);text-decoration:underline;text-underline-offset:2px;text-decoration-color:oklch(0.80 0.16 64 / .4)}
.prose a:hover{text-decoration-color:var(--amber-deep)}

/* ── Comparison / spec table ─────────────── */
.table-wrap{overflow-x:auto;margin:22px 0;border:1px solid var(--line);border-radius:12px}
table{width:100%;border-collapse:collapse;font-size:14.5px}
th{font-family:var(--body);font-weight:600;text-align:left;padding:12px 14px;background:var(--panel);color:var(--ink);font-size:13px;border-bottom:1px solid var(--line-strong)}
td{padding:12px 14px;border-bottom:1px solid var(--line);color:var(--ink-soft);vertical-align:top}
tr:last-child td{border-bottom:none}
tr:nth-child(even) td{background:oklch(1 0 0 / .025)}
td:first-child{font-weight:600;color:var(--ink)}
.ok-cell{color:var(--ok);font-weight:600}
.warn-cell{color:var(--warn);font-weight:600}

/* ── Callout / source note ───────────────── */
.note{border-left:3px solid var(--amber);background:var(--surface);padding:16px 18px;border-radius:0 10px 10px 0;margin:22px 0;font-size:15px;color:var(--ink-soft)}
.note strong{color:var(--ink)}

/* ── Worked-example receipt ──────────────── */
.receipt{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:22px 24px 18px;margin:26px 0}
.receipt h3{font-family:var(--display);font-weight:600;font-size:17px;margin:0 0 14px;color:var(--ink);letter-spacing:-.01em}
.receipt table{font-size:14.5px}
.receipt td{padding:9px 0;border-bottom:1px dashed var(--line)}
.receipt td:last-child{text-align:right;font-family:var(--display);font-weight:600;color:var(--ink);white-space:nowrap}
.receipt tr:nth-child(even) td{background:none}
.receipt tr:last-child td{border-bottom:none}
.receipt td strong{color:var(--ink)}
.receipt tr:has(strong) td{border-top:1px solid var(--line-strong);border-bottom:none;padding-top:12px}
.receipt .chart-note{font-size:13px;color:var(--ink-mute);margin:14px 0 0;line-height:1.55}

/* ── Decision tree ───────────────────────── */
.tree{margin:26px 0;display:grid;gap:12px}
.tree-step{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:14px 16px 14px 18px;position:relative}
.tree-step .mono{display:block;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--amber);margin-bottom:5px}
.tree-step strong{display:block;color:var(--ink);font-size:15.5px;margin-bottom:4px;line-height:1.4}
.tree-step span.ans{display:block;color:var(--ink-soft);font-size:14.5px;line-height:1.6}
.tree-step.verdict{border-color:var(--amber);background:var(--amber-soft)}
.tree-step.verdict .mono{color:var(--amber-deep)}

/* ── Bar chart (CSS-only) ────────────────── */
.chart{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:22px 24px 18px;margin:26px 0}
.chart figcaption{font-family:var(--display);font-weight:600;font-size:15px;margin-bottom:4px;color:var(--ink)}
.chart .chart-note{font-size:13px;color:var(--ink-mute);margin-bottom:16px}
.chart .crow{display:grid;grid-template-columns:150px 1fr 88px;align-items:center;gap:12px;margin-bottom:12px;font-size:13px}
.chart .crow:last-child{margin-bottom:2px}
.chart .crow .clabel{color:var(--ink-soft);font-weight:600;line-height:1.3}
.chart .crow .cval{font-family:var(--display);font-weight:700;color:var(--ink);text-align:right}
.chart .cbar{height:14px;border-radius:99px;background:var(--line);overflow:hidden}
.chart .cbar i{display:block;height:100%;border-radius:99px;background:var(--ok)}
.chart .cbar.warn i{background:var(--warn)}
.chart .cbar.act i{background:var(--amber)}
@media(max-width:560px){.chart .crow{grid-template-columns:104px 1fr 68px}}

/* ── Checklist component ─────────────────── */
.checklist{display:grid;gap:12px}
@media(min-width:640px){.checklist{grid-template-columns:1fr 1fr}}
.check-item{display:flex;gap:12px;align-items:flex-start;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:14px 16px}
.check-icon{flex:none;width:24px;height:24px;border-radius:7px;background:var(--amber-soft);display:grid;place-items:center}
.check-icon svg{width:14px;height:14px;fill:none;stroke:var(--amber);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.check-item strong{display:block;color:var(--ink);font-size:15px;margin-bottom:2px}
.check-item span{color:var(--ink-mute);font-size:13.5px;line-height:1.45}

/* ── FAQ ─────────────────────────────────── */
.faq{padding:14px 0 6px}
.faq h2{font-family:var(--display);font-weight:500;font-size:clamp(26px,3.8vw,40px);letter-spacing:-.02em;margin:0 0 18px;color:var(--ink)}
details{border:1px solid var(--line);border-radius:12px;padding:0 18px;margin-bottom:12px;background:var(--surface)}
details[open]{border-color:var(--amber)}
summary{list-style:none;cursor:pointer;font-family:var(--display);font-weight:500;font-size:18px;padding:18px 0;display:flex;justify-content:space-between;align-items:center;gap:16px;color:var(--ink)}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-family:var(--mono);font-size:20px;color:var(--amber);transition:transform .2s var(--ease)}
details[open] summary::after{content:"\2013"}
details p{margin:0 0 18px;color:var(--ink-soft);line-height:1.65}
details a{color:var(--amber-deep)}

/* ── CTA band ────────────────────────────── */
.cta{margin:48px 0 0;background:var(--panel);color:var(--on-dark);border:1px solid var(--line);border-radius:20px;padding:44px 28px;text-align:center;background-image:radial-gradient(120% 90% at 50% 0%, oklch(0.74 0.16 62 / .12), transparent 65%)}
@media(min-width:768px){.cta{padding:56px 40px}}
.cta .mono{color:var(--amber);display:block;margin-bottom:14px}
.cta h2{font-family:var(--display);font-weight:500;font-size:clamp(28px,4.2vw,46px);line-height:1.04;letter-spacing:-.02em;margin:0 auto 14px;max-width:16ch;color:var(--ink);text-wrap:balance}
.cta h2 em{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--amber)}
.cta p{color:var(--on-dark-mute);max-width:48ch;margin:0 auto 26px}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}

/* ── Related ─────────────────────────────── */
.related{padding:44px 0 8px}
.related h2{font-family:var(--display);font-weight:500;font-size:24px;margin:0 0 16px;color:var(--ink)}
.rel-grid{display:grid;gap:14px}
@media(min-width:680px){.rel-grid{grid-template-columns:1fr 1fr}}
.rel-card{border:1px solid var(--line);border-radius:14px;padding:20px;text-decoration:none;color:var(--ink);transition:border-color .2s var(--ease),transform .2s var(--ease),background .2s var(--ease);background:var(--surface)}
.rel-card:hover{border-color:var(--amber);transform:translateY(-3px);background:var(--surface-solid)}
.rel-card .mono{color:var(--amber);display:block;margin-bottom:8px}
.rel-card strong{font-family:var(--display);font-weight:500;font-size:18px;display:block;margin-bottom:4px;letter-spacing:-.01em}
.rel-card span{color:var(--ink-mute);font-size:14px;line-height:1.5}

/* ── Blog index: masthead / feature / grid ─ */
.mast{padding:56px 0 26px}
.mast .tag{color:var(--amber);display:flex;align-items:center;gap:10px;margin-bottom:18px}
.mast .tag::before{content:"";width:28px;height:1px;background:var(--amber)}
.mast h1{font-family:var(--display);font-size:clamp(38px,6.6vw,66px);line-height:1.0;letter-spacing:-.03em;font-weight:500;margin:0 0 16px;max-width:16ch;text-wrap:balance}
.mast h1 em{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--amber)}
.mast p{color:var(--ink-soft);font-size:18px;max-width:60ch;margin:0;line-height:1.6}

.feature{margin:14px 0 8px}
.feature a{display:block;text-decoration:none;color:var(--ink);background:var(--surface);border-radius:18px;padding:34px 28px;border:1px solid var(--line-strong);transition:transform .2s var(--ease),border-color .2s var(--ease),background .2s var(--ease)}
@media(min-width:768px){.feature a{padding:46px 44px}}
.feature a:hover{transform:translateY(-3px);border-color:var(--amber);background:var(--surface-solid)}
.feature .mono{color:var(--amber);display:block;margin-bottom:14px}
.feature h2{font-family:var(--display);font-weight:500;font-size:clamp(26px,3.6vw,38px);line-height:1.06;letter-spacing:-.02em;color:var(--ink);margin:0 0 10px;max-width:20ch;text-wrap:balance}
.feature h2 em{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--amber)}
.feature span.d{color:var(--ink-mute);font-size:15.5px;display:block;max-width:62ch;line-height:1.55}

.grid{display:grid;gap:16px;padding:26px 0 8px}
@media(min-width:640px){.grid{grid-template-columns:1fr 1fr}}
@media(min-width:980px){.grid{grid-template-columns:1fr 1fr 1fr}}
.card{border:1px solid var(--line);border-radius:14px;padding:24px 22px;text-decoration:none;color:var(--ink);background:var(--surface);transition:border-color .2s var(--ease),transform .2s var(--ease),background .2s var(--ease);display:flex;flex-direction:column}
.card:hover{border-color:var(--amber);transform:translateY(-3px);background:var(--surface-solid)}
.card .mono{color:var(--amber);display:block;margin-bottom:12px}
.card h3{font-family:var(--display);font-weight:500;font-size:20px;line-height:1.16;letter-spacing:-.01em;margin:0 0 8px}
.card p{color:var(--ink-mute);font-size:14.5px;margin:0;line-height:1.5}

/* ── Footer ──────────────────────────────── */
footer{background:var(--dark-2);color:var(--on-dark-mute);border-top:1px solid var(--line);padding:36px 0;margin-top:64px}
.foot{display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between}
.foot .mark{color:var(--on-dark)}
.foot .mono{font-size:10.5px;color:var(--on-dark-mute)}
.foot a{color:var(--on-dark);text-decoration:none;font-size:14px;font-weight:600}
.foot a:hover{color:var(--amber)}

/* Stat tiles (headline numbers for data-led posts) */
.statgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin:26px 0}
@media(min-width:640px){.statgrid{grid-template-columns:repeat(4,1fr)}}
.statgrid.three{grid-template-columns:1fr}
@media(min-width:640px){.statgrid.three{grid-template-columns:repeat(3,1fr)}}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:20px 18px}
.stat b{display:block;font-family:var(--display);font-weight:700;font-size:clamp(30px,5vw,40px);line-height:1;color:var(--amber);letter-spacing:-.01em}
.stat span{display:block;margin-top:8px;font-size:13px;line-height:1.4;color:var(--ink-soft)}

/* ── Reading column + rail ─────────────────────────────────────────────
   Opt-in: a post uses .wrap.withrail instead of .wrap.narrow and adds a
   <div class="col"> around crumb/article/faq plus an <aside class="rail">.
   Posts still on .narrow are unaffected, so this rolls out post by post.

   The rail itself is NOT sticky. Sticking the whole rail means its full
   height has to fit the viewport, and on a laptop-height window that clips
   the card and cuts the button off. Instead the rail stretches to the full
   height of the reading column and only the promo card inside it sticks,
   so the card travels the length of the article and stays whole.
   ------------------------------------------------------------------ */
.withrail{max-width:1160px;margin:0 auto}
.withrail > .col{min-width:0;max-width:780px}
@media(min-width:1080px){
  .withrail{display:grid;grid-template-columns:minmax(0,1fr) 300px;column-gap:56px;align-items:start}
  .withrail > .col{grid-column:1;grid-row:1}
  .withrail > .rail{grid-column:2;grid-row:1;align-self:stretch}
  .withrail > .cta,.withrail > .related{grid-column:1 / -1}
}

.rail{margin:34px 0 0}
@media(min-width:1080px){.rail{margin:0}}
.rail > * + *{margin-top:16px}

/* Warming cards. Quieter than the promo card on purpose, so the CTA stays the
   loudest thing in the rail. They carry no internal links: the rail repeats on
   every new post, so a fixed link here would concentrate equity on one slug and
   push it straight to RED, which is the exact failure the rotation ledger exists
   to prevent. */
.rail-note{background:var(--surface);border:1px solid var(--line);border-left:2px solid var(--amber);border-radius:14px;padding:15px 16px}
.rail-note .mono{display:block;color:var(--amber);margin:0 0 8px}
.rail-note strong{display:block;font-family:var(--display);font-weight:500;font-size:16.5px;line-height:1.2;color:var(--ink);margin:0 0 7px;text-wrap:pretty}
.rail-note p{margin:0;font-size:13px;line-height:1.5;color:var(--ink-mute)}
.rail-note b{color:var(--ink-soft);font-weight:600}

/* The sticky card MUST stay the last child of the rail. Sticky keeps the
   element in flow, so any sibling after it would scroll up and overlap it. */
.rail .promo{position:sticky;top:24px;background:var(--surface-solid);border:1px solid var(--line);border-radius:18px;padding:18px 18px 20px}
.rail .promo .mono{display:block;color:var(--amber);margin:0 0 12px}
/* The cover is deliberately capped. A full-height screenshot made the rail
   taller than a laptop viewport and pushed the button out of view, which is
   the one thing a sticky card exists to prevent. */
/* height:auto is load-bearing. The width/height HTML attributes are
   presentational hints, so without it the height stays at the attribute value,
   max-height clamps that, and object-fit crops the middle out of the shot. */
.promo-cover{display:block;width:100%;height:auto;max-height:210px;object-fit:cover;object-position:top center;border-radius:10px;border:1px solid var(--line);margin:0 0 14px}
.rail .promo strong{display:block;font-family:var(--display);font-weight:500;font-size:20px;line-height:1.12;letter-spacing:-.01em;color:var(--ink);margin:0 0 8px;text-wrap:pretty}
.rail .promo p{margin:0 0 14px;font-size:13.5px;line-height:1.5;color:var(--ink-soft)}
.rail .promo .btn{display:flex;width:100%;padding:12px 16px;font-size:14.5px}

/* Below the rail breakpoint there is no sidebar, so the promo card promotes
   itself to a fixed bottom bar rather than scrolling away up the page. */
@media(max-width:1079px){
  body:has(.rail .promo){padding-bottom:84px}
  .rail{margin:30px 0 0;display:grid;gap:14px}
  @media(min-width:640px){.rail{grid-template-columns:repeat(2,minmax(0,1fr))}}
  .rail > * + *{margin-top:0}
  .rail .promo{
    position:fixed;inset:auto 0 0 0;z-index:40;margin:0;
    display:flex;align-items:center;gap:14px;
    padding:10px clamp(16px,4vw,24px);
    padding-bottom:max(10px,env(safe-area-inset-bottom));
    border:0;border-top:2px solid var(--amber);border-radius:0;
    background:var(--dark-2);backdrop-filter:blur(8px);
  }
  .rail .promo .mono,.rail .promo p{display:none}
  .rail .promo .promo-cover{width:38px;height:52px;margin:0;flex:none;border-radius:6px}
  .rail .promo strong{
    margin:0;flex:1;font-size:14.5px;line-height:1.18;
    display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;
  }
  .rail .promo .btn{width:auto;flex:none;white-space:nowrap;padding:12px 18px;font-size:14px}
}
/* Only the narrowest phones drop the thumbnail, so the bar keeps its visual
   anchor on the common 375-430px widths. */
@media(max-width:340px){
  .rail .promo .promo-cover{display:none}
}

@media (prefers-reduced-motion: reduce){
  *{scroll-behavior:auto !important;transition-duration:.01ms !important}
}

/* ── Authority-article standard (SEO client engine, Aug 2026) ──────────────
   Visible article type + named author, a rail reading list, and the closing
   source list. Applied to every post from Week 10 Day 2 onward. */
.post-meta .type{color:var(--amber);border:1px solid oklch(0.80 0.16 64 / .35);border-radius:999px;padding:3px 10px;font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase}
.post-meta .author{color:var(--ink-soft)}
.post-meta .author a{color:var(--ink-soft);text-decoration:underline;text-underline-offset:2px;text-decoration-color:oklch(0.80 0.16 64 / .4)}

.rail-links{list-style:none;margin:0;padding:0}
.rail-links li + li{margin-top:9px}
.rail-links a{display:block;color:var(--ink-soft);font-size:13px;line-height:1.4;text-decoration:underline;text-underline-offset:2px;text-decoration-color:oklch(0.80 0.16 64 / .35)}
.rail-links a:hover{color:var(--ink);text-decoration-color:var(--amber-deep)}

.sources{margin:38px 0 0;padding:20px 22px;background:var(--surface);border:1px solid var(--line);border-radius:14px}
.sources .mono{display:block;color:var(--amber);margin:0 0 12px}
.sources ol{margin:0;padding-left:20px}
.sources li{color:var(--ink-mute);font-size:14px;line-height:1.6}
.sources li + li{margin-top:8px}
.sources a{color:var(--ink-soft);text-decoration:underline;text-underline-offset:2px;text-decoration-color:oklch(0.80 0.16 64 / .4)}
.sources a:hover{color:var(--ink);text-decoration-color:var(--amber-deep)}