/* Single article (design: article.html) */
/* ---------- ARTICLE (single) ---------- */
/* A little more air above the title (owner, 2026-07-14). */
.article-head{padding-block:clamp(3.6rem,8vw,6.5rem) 2rem;position:relative;overflow:hidden}
.article-head::before{content:"";position:absolute;inset-block-start:-30%;inset-inline-start:-5%;width:50vw;height:50vw;
  background:var(--silver);filter:blur(70px);opacity:.12;border-radius:50%}
.kicker{font-size:var(--step--1);letter-spacing:.18em;text-transform:uppercase;color:var(--accent);font-weight:700}
.article-head h1{max-width:24ch;font-size:var(--step-2);margin-block-start:.8rem}
.byline{display:flex;flex-wrap:wrap;gap:.8rem;align-items:center;margin-block-start:1.4rem;color:var(--ink-faint);font-size:var(--step--1)}
.byline .dot{opacity:.5}
/* The article body runs at the SITE content width, aligned to the same gutters
   as the header and footer, rather than the old 68ch reading column (owner,
   2026-07-14). Size steps down slightly so the longer line still reads. */
.prose{max-width:var(--maxw);margin-inline:auto;padding-inline:clamp(1.1rem,4vw,2.4rem);
  padding-block:1.5rem 2rem;font-size:1.08rem;line-height:1.75}

/* Legal pages (privacy, cookies, terms): the text runs to the site's content
   width, like the header and footer, instead of the 68ch reading measure.
   The page's image floats to the trailing edge so the opening reads as two
   columns (text | image); once the image ends, the text runs the full width. */
.legal-prose{font-size:1.02rem;line-height:1.75;color:var(--ink-soft)}
.legal-prose::after{content:"";display:block;clear:both}
.legal-prose img{float:right;width:min(380px,38%);height:auto;border-radius:12px;
  margin-block-end:1.4rem;margin-inline-start:clamp(1.2rem,3vw,2.4rem);
  box-shadow:0 24px 44px -28px rgba(0,0,0,.55)}
[dir="rtl"] .legal-prose img{float:left}
/* Stacked on small screens: a floated image beside body text stops working. */
@media(max-width:640px){
  .legal-prose img{float:none;width:100%;margin-inline-start:0;margin-block:0 1.4rem}
}
.legal-prose h2{font-family:var(--font-display);font-weight:500;font-size:var(--step-1);color:var(--ink);margin-block:2.2rem .8rem}
.legal-prose h3,.legal-prose h4{font-family:var(--font-display);font-weight:500;font-size:1.2rem;color:var(--ink);margin-block:1.6rem .6rem}
.legal-prose p{margin-block-start:1rem}
.legal-prose ul,.legal-prose ol{margin-block-start:1rem;padding-inline-start:1.4rem}
.legal-prose li{margin-block-start:.5rem}
.legal-prose a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.legal-prose table{width:100%;border-collapse:collapse;margin-block-start:1.2rem;display:block;overflow-x:auto}
.legal-prose td,.legal-prose th{border:1px solid var(--line);padding:.6rem .8rem;text-align:start}
.prose>p{margin-block-start:1.4rem;color:var(--ink)}
.prose>p:first-child::first-letter{font-family:var(--font-display);font-size:3.6em;line-height:.8;float:inline-start;
  padding-inline-end:.08em;padding-block-start:.04em;background:var(--silver);-webkit-background-clip:text;background-clip:text;color:transparent}
[dir="rtl"] .prose{font-size:1.25rem}
.prose h2{font-family:var(--font-display);font-weight:600;font-size:1.9rem;letter-spacing:-.01em;margin-block-start:2.6rem}
.prose a{color:var(--accent);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.pullquote{font-family:var(--font-display);font-weight:400;font-size:clamp(1.5rem,1rem + 2vw,2.3rem);line-height:1.25;
  letter-spacing:-.01em;margin-block:2.4rem;padding-inline-start:1.4rem;border-inline-start:3px solid var(--accent);color:var(--ink)}
.figure{margin-block:2.2rem;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line)}
.figure .ph{aspect-ratio:16/9;background:var(--silver);opacity:.5}
.figure figcaption{font-size:var(--step--1);color:var(--ink-faint);padding:.7rem 1rem;background:var(--surface)}
.footnotes{max-width:var(--measure);margin-inline:auto;border-block-start:1px solid var(--line);margin-block-start:2.5rem;padding-block-start:1.5rem;color:var(--ink-soft);font-size:var(--step--1)}
/* Share row and post navigation sit on the same content width and gutters as the
   article body, the header, and the footer (owner, 2026-07-14). */
.share{max-width:var(--maxw);margin-inline:auto;padding-inline:clamp(1.1rem,4vw,2.4rem);
  display:flex;gap:.6rem;align-items:center;padding-block:1.2rem;color:var(--ink-faint);font-size:var(--step--1)}
.postnav{max-width:var(--maxw);margin-inline:auto;padding-inline:clamp(1.1rem,4vw,2.4rem);
  display:flex;justify-content:space-between;gap:1rem;
  border-block-start:1px solid var(--line);margin-block-start:2.5rem;padding-block-start:1.5rem;font-size:var(--step--1)}
.postnav a{color:var(--ink-soft)}
.postnav a:hover{color:var(--accent)}
.share a{border:1px solid var(--line);border-radius:99px;padding:.3rem .8rem;transition:.25s}
.share a:hover{border-color:var(--accent);color:var(--accent)}

/* ---------- SINGLE 2-COLUMN LAYOUT: content 75% + related sidebar 25% ---------- */
.single-layout{max-width:var(--maxw);margin-inline:auto;padding-inline:clamp(1.1rem,4vw,2.4rem);
  display:grid;grid-template-columns:minmax(0,3fr) minmax(0,1fr);gap:clamp(2rem,4vw,3.5rem);align-items:start}
.single-main{min-width:0}
/* Body rows fill the content column (drop their standalone site-width rules). */
.single-main .article-head,.single-main .prose,.single-main .share,.single-main .postnav,.single-main .comments{
  max-width:none;margin-inline:0;padding-inline:0}

/* Sidebar: sticky (below the sticky header), text-only related posts. */
.single-side{position:sticky;inset-block-start:5.5rem;min-width:0}
.sidecard{border-inline-start:1px solid var(--line);padding-inline-start:clamp(1.2rem,2vw,1.8rem)}
.sidecard__title{font-family:var(--font-display);font-weight:500;font-size:1.15rem;letter-spacing:-.01em;
  padding-block-end:.8rem;margin-block-end:.2rem;border-block-end:1px solid var(--line)}
.sidelist{list-style:none;margin:0;padding:0;display:grid;gap:1.5rem}
.sidelist__item{display:grid;gap:.35rem}
.sidelist__ttl{font-family:var(--font-display);font-weight:500;font-size:1.02rem;line-height:1.3;color:var(--ink);
  text-decoration:none;transition:color .2s}
.sidelist__ttl:hover,.sidelist__ttl:focus-visible{color:var(--accent)}
.sidelist__ex{margin:0;font-size:var(--step--1);line-height:1.5;color:var(--ink-soft);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.sidelist__more{font-size:.78rem;font-weight:600;color:var(--ink-faint);text-decoration:none;transition:color .2s}
.sidelist__more:hover,.sidelist__more:focus-visible{color:var(--accent)}
.sidecard__all{display:inline-block;margin-block-start:1.6rem;font-size:var(--step--1);font-weight:600;color:var(--ink-soft);text-decoration:none}
.sidecard__all:hover{color:var(--accent)}

@media(max-width:1024px){
  .single-layout{grid-template-columns:1fr;gap:2.4rem}
  .single-side{position:static}
  .sidecard{border-inline-start:0;padding-inline-start:0;border-block-start:1px solid var(--line);padding-block-start:1.6rem}
}