/* Vision Pouya — "Obsidian & Gold" design system.
   Mobile-first; RTL-aware via logical properties; transform/opacity motion only.
   Palette/radius tokens are injected by the layout from content/settings/site.json. */

/* ---------------------------------------------------------------- fonts -- */
@font-face { font-family: 'Vazirmatn'; src: url('/assets/fonts/Vazirmatn-100-900-arabic.woff2') format('woff2');
  font-weight: 100 900; font-display: swap; unicode-range: U+0600-06FF, U+200C-200E, U+2010-2011, U+FB50-FDFF, U+FE80-FEFC; }
@font-face { font-family: 'Vazirmatn'; src: url('/assets/fonts/Vazirmatn-100-900-latin.woff2') format('woff2');
  font-weight: 100 900; font-display: swap; unicode-range: U+0000-00FF; }
@font-face { font-family: 'Inter'; src: url('/assets/fonts/Inter-var-latin.woff2') format('woff2');
  font-weight: 100 900; font-display: swap; unicode-range: U+0000-00FF, U+2010-2027, U+20AC; }

/* ---------------------------------------------------------------- reset -- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
img, video, svg { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; color: inherit; }
a { color: inherit; }

:root {
  --font-fa: 'Vazirmatn', 'Segoe UI', system-ui, sans-serif;
  --font-latin: 'Inter', system-ui, -apple-system, sans-serif;
  --gutter: clamp(16px, 4.5vw, 48px);
  --maxw: 1120px;
  --ease-out: cubic-bezier(.22, .61, .36, 1);
  --ease-sheet: cubic-bezier(.32, .72, 0, 1);
  --topbar-h: 64px;

  /* ---- theme-reactive scalars ------------------------------------------
     The palettes themselves are injected by the layout from site.json. These
     multipliers are what let ONE stylesheet serve both editions: every
     translucent gold, glow and shadow below is DERIVED from them plus a
     *-rgb triplet, so no colour is written twice.

     They exist because the day edition is not the night edition with the
     lightness flipped: gold on parchment is far quieter than gold on
     obsidian, so hairlines need more alpha — while shadows and bloom need
     drastically less, or the page turns muddy. */
  --ring-k: 1;              /* hairline + border alpha */
  --wash-k: 1;              /* gold background tints */
  --glow-k: 1;              /* gold/neon bloom — belongs to the night edition */
  --sh-k: 1;                /* shadow alpha */
  --sh-rgb: 0 0 0;          /* shadow colour */
  --glass-a: .82;           /* topbar glass opacity */
  --scrim: rgb(0 0 0 / .55);
  --hc-k: 1;                /* high-contrast hairline boost (see below) */
  --font-scale: 1;

  --ring: 1px solid rgb(var(--gold-rgb) / calc(var(--ring-k) * var(--hc-k) * .16));
}

/* --ring is a COMPOSITE token: its inner var()s are substituted on the element
   that declares it, and the finished value is what inherits. So overriding
   --gold-rgb or --ring-k further down the tree does NOT re-derive it — a night
   island would otherwise inherit the DAY hairline. Any island that re-declares
   the palette must therefore re-declare --ring as well. Same class of trap as
   the color-mix cycle above: nothing errors, the value is just quietly wrong. */
.stage-dark {
  --ring: 1px solid rgb(var(--gold-rgb) / calc(var(--ring-k) * var(--hc-k) * .16));
}

/* ---- the day edition -------------------------------------------------- */
:root[data-theme="light"] {
  --ring-k: 2; --wash-k: 1.35; --glow-k: .3;
  --sh-k: .3; --sh-rgb: 74 58 26;      /* warm brown, never neutral black on paper */
  --glass-a: .88;
  --scrim: rgb(42 34 18 / .42);
}
/* ---- the system edition — "Aurora" ------------------------------------
   The palettes come from vp_palette_defaults('auto_dark'/'auto_light'); these
   are the scalars that go with them. They are NOT the day/night numbers copied
   over: Aurora's ground is indigo, so its shadows and scrims are cold slate —
   the warm brown of the parchment edition reads as dirt on porcelain, and
   neutral black reads as a hole in indigo. */
:root[data-theme="auto"] {
  --sh-rgb: 4 8 22;
  --scrim: rgb(6 10 26 / .58);
  --glow-k: 1.15;          /* amber + violet on indigo carry a little more bloom */
}
@media (prefers-color-scheme: light) {
  :root[data-theme="auto"] {
    --ring-k: 2; --wash-k: 1.35; --glow-k: .3;
    --sh-k: .3; --sh-rgb: 30 41 72;
    --glass-a: .88;
    --scrim: rgb(16 24 48 / .42);
  }
}

/* ---- reader options --------------------------------------------------- */
/* Text size scales the ROOT, so every rem-based size on the page follows —
   including the prose measure. (The chat input stays 16px on purpose: below
   that iOS zooms the page on focus.) */
:root[data-text="s"]  { --font-scale: .92; }
:root[data-text="l"]  { --font-scale: 1.12; }
:root[data-text="xl"] { --font-scale: 1.26; }

/* High contrast pushes the quiet colours TOWARD --ink, which is the lightest
   colour in the night edition and the darkest in the day one — so one
   declaration deepens contrast correctly in both, and can never reduce it.
   Must stay after the theme blocks: it wins on source order, not specificity.

   Each mix reads the *-base copy, never the token it is defining: mixing a
   custom property with itself is a cycle, and CSS answers a cycle by throwing
   the declaration away — which looks like "high contrast does nothing" while
   actually flattening every one of these colours into --ink. The percentages
   keep a visible gap between primary and quiet text; going further erased the
   typographic hierarchy the page is built on. */
:root[data-contrast="high"],
:root[data-contrast="high"] .stage-dark {
  --ink-dim: color-mix(in oklab, var(--ink-dim-base) 48%, var(--ink));
  --gold-bright: color-mix(in oklab, var(--gold-bright-base) 62%, var(--ink));
  --neon: color-mix(in oklab, var(--neon-base) 64%, var(--ink));
  --warn-bright: color-mix(in oklab, var(--warn-bright-base) 64%, var(--ink));
  --hc-k: 2.4;              /* firmer hairlines */
  --glow-k: 0;              /* bloom softens edges — the opposite of the point */
}

html { background: var(--bg); font-size: calc(100% * var(--font-scale)); }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-latin);
  font-size: 1.0625rem;
  line-height: 1.75;
  min-height: 100vh;
  min-height: 100dvh;
  overflow-wrap: break-word;
}
:lang(fa) body, [dir="rtl"] body { font-family: var(--font-fa); line-height: 1.9; }
.ltr { direction: ltr; unicode-bidi: isolate; font-family: var(--font-latin); }

::selection { background: var(--gold); color: var(--bg); }
:focus-visible { outline: 2px solid var(--neon); outline-offset: 2px; border-radius: 4px; }

.skip-link {
  /* -80px, not -48px: Vazirmatn's tall line box let the pill's bottom edge
     peek out at the top of fa pages (found via pixel-sampling, session 16) */
  position: absolute; inset-inline-start: 12px; top: -80px; z-index: 200;
  background: var(--gold); color: var(--bg); padding: 10px 18px; border-radius: 999px;
  text-decoration: none; font-weight: 700; transition: top .15s var(--ease-out);
}
.skip-link:focus { top: 12px; }

/* --------------------------------------------------------------- topbar -- */
.topbar {
  position: sticky; top: 0; z-index: 100;
  display: flex; align-items: center; gap: 16px;
  height: var(--topbar-h);
  padding-inline: var(--gutter);
  background: rgb(var(--bg-rgb) / var(--glass-a));
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: var(--ring);
  /* The bar is CHROME, and its height is a fixed 64px — so its contents are
     sized in em off this fixed base rather than in rem. The reader's text-size
     setting is for the CONTENT they came to read; letting it scale the bar too
     pushed the wordmark into an ellipsis by up to 111px at 900–1280px (measured
     at l and xl in all three languages) while the bar itself could not grow.
     Browser zoom still scales everything, so WCAG 1.4.4 is untouched. */
  font-size: 16px;
}
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; min-width: 0; }
.brand-mark { border-radius: 50%; border: 1.5px solid var(--gold); flex: none; }
.brand-name { font-weight: 700; font-size: 1.05em; letter-spacing: .01em; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.brand-latin { color: var(--ink-dim); font-size: .8em; font-weight: 500; margin-inline-start: 6px; }
/* small phones: brand yields, the lang switch never does */
@media (max-width: 479.98px) {
  .topbar { gap: 10px; }
  .brand-name { font-size: .95em; }
  .lang-switch a { padding: 7px 8px; font-size: .78em; }
  /* Adding the display button to this row left the wordmark 19–46px short of
     fitting, and an ellipsised wordmark ("V…") reads as a rendering fault
     rather than a design. The monogram opposite already carries the identity,
     so the TEXT steps aside on phones and the three working controls — language,
     display, menu — keep their full targets. Measured at 320/360/390/414px in
     all three languages: zero clipping, zero horizontal overflow. */
  .brand-name { display: none; }
}
/* The Latin suffix beside the Persian wordmark needs ~560px before it fits
   without pushing the row over. */
@media (max-width: 559.98px) {
  .brand-latin { display: none; }
}

/* The bar is two corner clusters. `auto` on whichever element comes first after
   the identity group opens the empty middle: on phones that is .topbar-actions
   (menu + display at the far corner), on desktop it is the nav, which then
   carries the actions along with it. */
.nav-desktop { display: none; gap: 4px; margin-inline-start: auto; }
.nav-desktop a {
  text-decoration: none; color: var(--ink-dim); padding: 8px 14px; border-radius: 999px;
  font-size: 1em;
  transition: color .18s var(--ease-out), background-color .18s var(--ease-out);
}
.nav-desktop a:hover { color: var(--ink); background: var(--bg-elev); }
.nav-desktop a[aria-current="page"] { color: var(--gold-bright); }

.topbar-actions { display: flex; align-items: center; gap: 10px; margin-inline-start: auto; }

/* Language switch is ALWAYS visible — never buried in the burger menu.
   Mobile shows compact codes (FA/DE/EN); desktop shows full names. */
.lang-switch { display: inline-flex; flex: none; gap: 2px; border: var(--ring); border-radius: 999px; padding: 3px; }
.lang-switch a {
  position: relative;
  text-decoration: none; color: var(--ink-dim); font-size: .82em; padding: 7px 9px;
  border-radius: 999px; transition: color .18s, background-color .18s;
}
/* invisible hit-area extension: the pill stays compact, the touch target is ≥44px */
.lang-switch a::after { content: ""; position: absolute; inset: -7px -1px; }
.lang-switch .lang-long { display: none; }
.lang-switch a:hover { color: var(--ink); }
.lang-switch a[aria-current="true"] { background: var(--gold); color: var(--bg); font-weight: 700; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 11px 22px; border-radius: 999px; border: 0; cursor: pointer;
  font-weight: 700; font-size: .95rem; text-decoration: none; line-height: 1.2;
  transition: transform .18s var(--ease-out), background-color .18s, box-shadow .18s, border-color .18s;
}
.btn:active { transform: scale(.97); }
.btn-gold { background: var(--gold); color: var(--bg); }
.btn-gold:hover { background: var(--gold-bright); box-shadow: 0 4px 24px rgb(var(--gold-rgb) / calc(var(--glow-k) * .35)); }
.btn-ghost { background: transparent; color: var(--ink); border: 1px solid rgb(var(--gold-rgb) / calc(var(--ring-k) * var(--hc-k) * .4)); }
.btn-ghost:hover { border-color: var(--gold); color: var(--gold-bright); }
.btn-lg { padding: 15px 30px; font-size: 1.05rem; }
.btn-follow { display: none; padding: 8px 18px; font-size: .88em; }

.nav-burger {
  display: grid; place-content: center; gap: 5px; width: 44px; height: 44px;
  background: none; border: var(--ring); border-radius: 12px; cursor: pointer;
}
.nav-burger span { width: 20px; height: 2px; background: var(--ink); border-radius: 2px;
  transition: transform .22s var(--ease-out), opacity .22s; }
.nav-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* --------------------------------------------------------------- drawer -- */
.drawer-overlay {
  position: fixed; inset: 0; z-index: 110; background: var(--scrim);
  opacity: 0; transition: opacity .28s var(--ease-out);
}
.drawer-overlay.open { opacity: 1; }
.drawer {
  position: fixed; z-index: 120; top: 0; bottom: 0; inset-inline-end: 0;
  width: min(84vw, 340px);
  display: flex; flex-direction: column; gap: 8px;
  background: var(--bg-elev);
  border-inline-start: var(--ring);
  padding: 24px;
  padding-top: calc(24px + env(safe-area-inset-top));
  padding-bottom: calc(24px + env(safe-area-inset-bottom));
  transform: translateX(100%);
  transition: transform .28s var(--ease-out);
}
[dir="rtl"] .drawer { transform: translateX(-100%); }
.drawer.open { transform: translateX(0); }
.drawer-close {
  align-self: flex-end; width: 44px; height: 44px; font-size: 26px; line-height: 1;
  background: none; border: var(--ring); border-radius: 12px; cursor: pointer; color: var(--ink);
}
.drawer-links { display: flex; flex-direction: column; gap: 2px; margin-top: 12px; }
.drawer-links a {
  text-decoration: none; color: var(--ink); font-size: 1.25rem; font-weight: 700;
  padding: 13px 10px; border-radius: 12px;
  transition: background-color .18s, color .18s;
}
.drawer-links a:hover { background: var(--bg-elev2); }
.drawer-links a[aria-current="page"] { color: var(--gold-bright); }
.drawer-links .drawer-minor { font-size: .95rem; font-weight: 500; color: var(--ink-dim); padding-block: 9px; }
.drawer-cta { margin-top: auto; }

/* ----------------------------------------------- display settings panel -- */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* The real radios and checkboxes stay in the accessibility tree — arrow-key
   groups, labels and checked state come from the platform, not from ARIA
   re-implementation. They are transparent and stretched over the WHOLE control
   rather than clipped to 1px, so the hit target is the entire row (right for a
   thumb) and a pointer can never land on the wrapper instead of the input. */
.seg-opt, .prefs-switch { position: relative; }
.seg-opt input, .prefs-switch input {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0;
  opacity: 0; cursor: pointer; appearance: none; -webkit-appearance: none;
}

.prefs-btn {
  position: relative; flex: none;
  display: grid; place-content: center; width: 38px; height: 38px;
  background: none; border: var(--ring); border-radius: 12px; cursor: pointer;
  color: var(--ink-dim);
  transition: color .18s var(--ease-out), border-color .18s, background-color .18s;
}
/* same trick as the language pill: compact on screen, ≥44px to the thumb */
.prefs-btn::after { content: ""; position: absolute; inset: -4px; }
.prefs-btn:hover { color: var(--gold-bright); border-color: var(--gold); }
.prefs-btn[aria-expanded="true"] { color: var(--bg); background: var(--gold); border-color: var(--gold); }

.prefs-scrim {
  position: fixed; inset: 0; z-index: 144; background: var(--scrim);
  opacity: 0; transition: opacity .26s var(--ease-out);
}
.prefs-scrim.open { opacity: 1; }

/* Phones: a bottom sheet, where the thumb already is. */
.prefs-panel {
  position: fixed; z-index: 145; inset-inline: 0; bottom: 0;
  max-height: 88dvh; overflow-y: auto; overscroll-behavior: contain;
  background: var(--bg-elev);
  border-top: var(--ring);
  border-start-start-radius: 22px; border-start-end-radius: 22px;
  padding: 22px var(--gutter) calc(22px + env(safe-area-inset-bottom));
  transform: translateY(101%);
  transition: transform .32s var(--ease-sheet);
}
.prefs-panel.open { transform: translateY(0); }
.prefs-panel[hidden], .prefs-scrim[hidden] { display: none; }

.prefs-head { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.prefs-title { flex: 1; min-width: 0; font-size: 1.15rem; font-weight: 700; }
.prefs-close {
  flex: none; width: 38px; height: 38px; font-size: 24px; line-height: 1;
  background: none; border: var(--ring); border-radius: 11px; cursor: pointer; color: var(--ink);
}
.prefs-close:hover { border-color: var(--gold); color: var(--gold-bright); }

.prefs-field { border: 0; padding: 0; margin: 0 0 20px; }
.prefs-legend {
  padding: 0; margin-bottom: 9px;
  font-size: .76rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--gold-bright);
}

.seg {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px;
  border: var(--ring); border-radius: 15px; padding: 4px;
}
.seg-text { grid-template-columns: repeat(4, 1fr); }
.seg-opt { margin: 0; cursor: pointer; }
.seg-face {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 5px; min-height: 54px; padding: 6px 4px; border-radius: 11px;
  color: var(--ink-dim); font-size: .8rem; text-align: center;
  transition: background-color .18s var(--ease-out), color .18s var(--ease-out);
}
.seg-opt:hover .seg-face { color: var(--ink); background: var(--bg-elev2); }
.seg-opt input:checked + .seg-face { background: var(--gold); color: var(--bg); font-weight: 700; }
.seg-opt input:focus-visible + .seg-face { outline: 2px solid var(--neon); outline-offset: 2px; }
.seg-lbl { line-height: 1.25; }

/* Palette chip under each mode. Fixed colours (see the --sw-* block in the
   layout): it previews the edition it switches TO. "system" shows FOUR bands —
   its day half and its night half — which is also what makes it legible as a
   third palette rather than a second name for one of the other two. */
.seg-sw {
  display: block; width: 30px; height: 6px; border-radius: 999px;
  box-shadow: 0 0 0 1px rgb(var(--ink-rgb) / .22);
}
.seg-face[data-mode="light"] .seg-sw {
  background: linear-gradient(90deg, var(--sw-light-bg) 50%, var(--sw-light-gold) 50%);
}
.seg-face[data-mode="dark"] .seg-sw {
  background: linear-gradient(90deg, var(--sw-dark-bg) 50%, var(--sw-dark-gold) 50%);
}
.seg-face[data-mode="auto"] .seg-sw {
  background: linear-gradient(90deg,
    var(--sw-auto-light-bg) 25%, var(--sw-auto-light-gold) 25% 50%,
    var(--sw-auto-dark-gold) 50% 75%, var(--sw-auto-dark-bg) 75%);
}
.seg-opt input:checked + .seg-face .seg-sw { box-shadow: 0 0 0 1px rgb(var(--bg-rgb) / .5); }

.prefs-note { margin-top: 9px; font-size: .78rem; line-height: 1.55; color: var(--ink-dim); }
/* The A samples are a fixed-px preview of the scale — they must NOT grow with
   --font-scale, or every option would look identical once the scale changes. */
.seg-a { font-weight: 700; line-height: 1; }
.seg-face[data-size] { min-height: 48px; }
.seg-face[data-size="s"] .seg-a { font-size: 12px; }
.seg-face[data-size="m"] .seg-a { font-size: 15px; }
.seg-face[data-size="l"] .seg-a { font-size: 18px; }
.seg-face[data-size="xl"] .seg-a { font-size: 22px; }

.prefs-switch { display: flex; align-items: center; gap: 14px; padding: 13px 2px; cursor: pointer; }
.prefs-switch + .prefs-switch { border-top: var(--ring); }
.ps-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ps-t { font-weight: 600; font-size: .95rem; }
.ps-h { font-size: .8rem; color: var(--ink-dim); line-height: 1.5; }
.ps-track {
  position: relative; flex: none; width: 46px; height: 27px; border-radius: 999px;
  border: var(--ring); background: var(--bg-elev2); transition: background-color .2s, border-color .2s;
}
.ps-track i {
  position: absolute; top: 3px; inset-inline-start: 3px;
  width: 19px; height: 19px; border-radius: 50%; background: var(--ink-dim);
  transition: translate .2s var(--ease-out), background-color .2s;
}
.prefs-switch input:checked ~ .ps-track { background: var(--gold); border-color: var(--gold); }
.prefs-switch input:checked ~ .ps-track i { translate: 19px 0; background: var(--bg); }
[dir="rtl"] .prefs-switch input:checked ~ .ps-track i { translate: -19px 0; }
.prefs-switch input:focus-visible ~ .ps-track { outline: 2px solid var(--neon); outline-offset: 2px; }

.prefs-reset {
  width: 100%; margin-top: 14px; padding: 12px; border-radius: 12px;
  background: none; border: var(--ring); color: var(--ink-dim); cursor: pointer;
  font-size: .88rem; transition: color .18s, border-color .18s;
}
.prefs-reset:hover { color: var(--ink); border-color: var(--gold); }

/* From tablet up: a popover anchored under the button that opened it. */
@media (min-width: 640px) {
  .prefs-panel {
    inset: auto; top: calc(var(--topbar-h) + 8px); bottom: auto;
    inset-inline-end: var(--gutter);
    width: 348px; max-height: calc(100dvh - var(--topbar-h) - 32px);
    border: var(--ring); border-radius: 18px;
    box-shadow: 0 22px 60px rgb(var(--sh-rgb) / calc(var(--sh-k) * .5));
    padding: 22px;
    transform: translateY(-10px); opacity: 0;
    transition: transform .22s var(--ease-out), opacity .22s var(--ease-out);
  }
  .prefs-panel.open { transform: none; opacity: 1; }
  .prefs-scrim { background: transparent; }
}

/* ----------------------------------------------------------------- hero -- */
.hero { padding: clamp(40px, 9vw, 96px) var(--gutter) clamp(28px, 5vw, 56px); }
.hero-inner { max-width: var(--maxw); margin-inline: auto; text-align: center; }
.hero-avatar { display: inline-block; padding: 5px; border-radius: 50%;
  background: conic-gradient(from 210deg, var(--gold), rgb(var(--gold-rgb) / calc(var(--wash-k) * .15)), var(--gold-bright), var(--gold)); }
.hero-avatar img { border-radius: 50%; width: clamp(120px, 26vw, 168px); height: auto; aspect-ratio: 1; object-fit: cover; }
.hero-avatar-sm img { width: 116px; }
.hero-title {
  font-size: clamp(2.1rem, 8vw, 4rem); font-weight: 700; line-height: 1.22;
  margin-top: 26px; letter-spacing: -.01em;
  background: linear-gradient(100deg, var(--ink) 30%, var(--gold-bright) 65%, var(--ink) 90%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-thesis { color: var(--ink-dim); font-size: clamp(1.05rem, 3vw, 1.3rem); max-width: 34em; margin: 16px auto 0; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 32px; }

/* ------------------------------------------------------------- sections -- */
.section { padding: clamp(28px, 5vw, 56px) var(--gutter); max-width: calc(var(--maxw) + 2 * var(--gutter)); margin-inline: auto; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.section-title {
  font-size: clamp(1.5rem, 5vw, 2.25rem); font-weight: 700; margin-bottom: 22px;
  display: flex; align-items: center; gap: 14px;
}
.section-title::before {
  content: ''; width: 14px; height: 14px; flex: none; border-radius: 50%;
  border: 2.5px solid var(--gold);
}
.link-more { color: var(--gold-bright); text-decoration: none; font-weight: 500; }
.link-more:hover { text-decoration: underline; }

.page-head { padding: clamp(40px, 8vw, 80px) var(--gutter) 0; max-width: calc(var(--maxw) + 2 * var(--gutter)); margin-inline: auto; text-align: center; }
.page-title { font-size: clamp(1.9rem, 7vw, 3rem); font-weight: 700; }
.page-intro { color: var(--ink-dim); margin-top: 10px; font-size: 1.1rem; }
.page-404 { padding-bottom: 80px; }
.page-404 .btn { margin-top: 24px; }
.err-code { font-size: clamp(4rem, 18vw, 8rem); font-weight: 700; color: var(--gold); opacity: .35; line-height: 1; }

/* ---------------------------------------------------------------- bento -- */
.bento { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 640px) {
  .bento { grid-template-columns: repeat(2, 1fr); }
}
/* Desktop: three equal columns — the two featured cards flank the three mini
   pillar cards, which stack vertically in the middle column and together span
   the full height of a featured card (owner directive 2026-08-20: Toosheh and
   Rostam Media equal size; the three method cards between them, small). */
@media (min-width: 960px) {
  .bento { grid-template-columns: repeat(3, 1fr); gap: 20px; }
  .bento > .pillar-stack { grid-column: auto; }
}
/* Tablet: the pillar stack drops below the two cards, full width. */
@media (min-width: 640px) and (max-width: 959px) {
  .bento > .pillar-stack { grid-column: 1 / -1; flex-direction: row; }
  .bento > .pillar-stack .pillar-mini { flex: 1; }
}

/* The three method cards, stacked in the bento's middle column. Each mini card
   is a compact whole-link card; the stack itself stretches to the row height
   so the three together match a featured card. Each mini card is HORIZONTAL:
   the badge sits beside the title+text, so the card never becomes a tall
   narrow strip — the text-only cards stay wide and readable (owner 2026-08-20). */
.pillar-stack {
  display: flex; flex-direction: column; gap: 14px;
  min-height: 0;
}
.pillar-stack .pillar-mini {
  flex: 1; padding: 16px 18px; gap: 14px;
  flex-direction: row; align-items: center;
  justify-content: flex-start;
}
.pillar-stack .pillar-mini .pillar-badge {
  width: 40px; height: 40px; border-radius: 12px; margin: 0; flex: none;
}
.pillar-stack .pillar-mini .pillar-badge .pillar-svg { width: 20px; height: 20px; }
.pillar-stack .pillar-mini .pillar-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.pillar-stack .pillar-mini .pillar-t { font-size: 1rem; }
.pillar-stack .pillar-mini .pillar-p { font-size: .84rem; line-height: 1.5; }

.card {
  background: var(--bg-elev); border: var(--ring); border-radius: var(--radius);
  overflow: hidden; position: relative;
  transition: transform .18s var(--ease-out), border-color .18s, box-shadow .18s;
}
@media (hover: hover) {
  .card:hover { transform: translateY(-3px); border-color: rgb(var(--gold-rgb) / calc(var(--ring-k) * var(--hc-k) * .5));
    box-shadow: 0 12px 40px rgb(var(--sh-rgb) / calc(var(--sh-k) * .45)); }
}
.card-link { display: flex; flex-direction: column; height: 100%; text-decoration: none; }
.card-media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--bg-elev2); }
.card-big .card-media { aspect-ratio: 16 / 11; }
.card-media img { width: 100%; height: 100%; object-fit: cover; }
.card-media-video img { filter: brightness(.85); }
.play-ring {
  position: absolute; inset: 0; margin: auto; width: 58px; height: 58px;
  display: grid; place-content: center; border-radius: 50%;
  border: 2px solid var(--gold); background: rgb(var(--bg-rgb) / .55);
  color: var(--gold-bright); backdrop-filter: blur(4px);
}
.card-body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 8px; }
.card-type {
  align-self: flex-start; font-size: .74rem; font-weight: 700; letter-spacing: .08em;
  color: var(--neon); text-transform: uppercase;
}
.card-title { font-size: 1.15rem; font-weight: 700; line-height: 1.45; }
.card-big .card-title { font-size: 1.45rem; }
.card-excerpt { color: var(--ink-dim); font-size: .95rem;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* -------------------------------------------------------------- pillars -- */
/* The method, as three cards that GO somewhere. Each one is a whole link, so
   the target is the card; the old version was a static <div> with a ring, a
   heading and one sentence, and it ended the visitor's path instead of
   continuing it (owner report 2026-08-14). */
.pillars { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 720px) { .pillars { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 720px) { .pillars-2 { grid-template-columns: repeat(2, 1fr); max-width: 760px; margin-inline: auto; } }

.pillar {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column; gap: 9px;
  background: var(--bg-elev); border: var(--ring); border-radius: var(--radius);
  padding: 26px 24px 22px; text-decoration: none;
  transition: transform .22s var(--ease-out), border-color .22s, box-shadow .22s;
}
/* A gold wash that lifts out of the leading top corner. It is a pseudo-element
   rather than a background on the card so it can fade independently of the
   border and never tint the text. */
.pillar::before {
  content: ""; position: absolute; z-index: -1; inset-inline-start: -30%; top: -60%;
  width: 90%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgb(var(--gold-rgb) / calc(var(--wash-k) * .13)), transparent 70%);
  opacity: .8; transition: opacity .28s var(--ease-out), transform .35s var(--ease-out);
}
/* The rule that runs the full width on hover — the card's "keep going" signal. */
.pillar::after {
  content: ""; position: absolute; inset-block-end: 0; inset-inline-start: 0;
  height: 2px; width: 0; background: var(--gold);
  transition: width .32s var(--ease-out);
}
@media (hover: hover) {
  .pillar:hover { transform: translateY(-4px);
    border-color: rgb(var(--gold-rgb) / calc(var(--ring-k) * var(--hc-k) * .55));
    box-shadow: 0 14px 44px rgb(var(--sh-rgb) / calc(var(--sh-k) * .42)); }
  .pillar:hover::before { opacity: 1; transform: scale(1.15); }
  .pillar:hover::after { width: 100%; }
  .pillar:hover .pillar-badge { border-color: var(--gold); color: var(--gold-bright);
    box-shadow: 0 0 26px rgb(var(--gold-rgb) / calc(var(--glow-k) * .3)); }
  .pillar:hover .pillar-go { color: var(--gold-bright); }
  .pillar:hover .pillar-go svg { translate: 4px 0; }
  [dir="rtl"] .pillar:hover .pillar-go svg { translate: -4px 0; }
}
.pillar:focus-visible { outline: 2px solid var(--neon); outline-offset: 3px; }

/* The index digit is decoration, so it is sized in px: it must not grow with
   the reader's text setting and start colliding with the badge. */
.pillar-no {
  position: absolute; top: 14px; inset-inline-end: 18px;
  font-size: 34px; font-weight: 800; line-height: 1;
  color: rgb(var(--gold-rgb) / calc(var(--wash-k) * .22)); letter-spacing: -.02em;
}
.pillar-badge {
  display: grid; place-content: center; width: 52px; height: 52px; flex: none;
  border-radius: 15px; border: 1.5px solid rgb(var(--gold-rgb) / calc(var(--ring-k) * var(--hc-k) * .45));
  background: rgb(var(--gold-rgb) / calc(var(--wash-k) * .07));
  color: var(--gold); margin-bottom: 5px;
  transition: color .22s var(--ease-out), border-color .22s, box-shadow .22s;
}
.pillar-badge .pillar-svg { width: 26px; height: 26px; }
/* The badge + title/text wrapper. On a normal (wide) pillar card the column
   layout is untouched; the mini variant flips the CARD to a row and lets the
   body column sit beside the badge. */
.pillar-body { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.pillar-t { font-size: 1.2rem; font-weight: 700; color: var(--ink); }
.pillar-p { color: var(--ink-dim); font-size: .97rem; margin: 0; }
.pillar-go {
  display: inline-flex; align-items: center; gap: 7px; margin-top: auto; padding-top: 14px;
  color: var(--gold); font-size: .88rem; font-weight: 700;
  transition: color .22s var(--ease-out);
}
.pillar-go svg { transition: translate .22s var(--ease-out); }
[dir="rtl"] .pillar-go svg { transform: scaleX(-1); }

/* ------------------------------------------------------- pillar page ---- */
.lens-hero {
  position: relative; overflow: hidden;
  padding: clamp(38px, 8vw, 84px) var(--gutter) clamp(24px, 4vw, 44px);
  border-bottom: var(--ring);
  background:
    radial-gradient(120% 130% at 12% -20%, rgb(var(--gold-rgb) / calc(var(--wash-k) * .16)), transparent 58%),
    radial-gradient(90% 120% at 100% 0%, rgb(var(--neon-rgb) / calc(var(--wash-k) * .09)), transparent 60%);
}
/* The mark again, oversized and nearly invisible — it gives the header depth
   without another image request. Hidden from assistive tech; it is the same
   glyph already shown above the title. */
.lens-watermark {
  position: absolute; inset-block-start: -12%; inset-inline-end: -8%;
  width: min(46vw, 340px); color: var(--gold); opacity: .05; pointer-events: none;
}
.lens-watermark .pillar-svg { width: 100%; height: auto; stroke-width: .9; }
.lens-hero-inner { position: relative; max-width: 780px; margin-inline: auto; text-align: center; }
.lens-kicker {
  display: inline-block; font-size: .76rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--gold-bright);
}
.lens-mark {
  display: grid; place-content: center; width: 74px; height: 74px; margin: 16px auto 0;
  border-radius: 22px; border: 1.5px solid rgb(var(--gold-rgb) / calc(var(--ring-k) * var(--hc-k) * .5));
  background: rgb(var(--gold-rgb) / calc(var(--wash-k) * .08));
  color: var(--gold-bright);
  box-shadow: 0 0 40px rgb(var(--gold-rgb) / calc(var(--glow-k) * .22));
}
.lens-mark .pillar-svg { width: 36px; height: 36px; }
.lens-title { font-size: clamp(2rem, 7vw, 3.2rem); font-weight: 700; line-height: 1.24; margin-top: 18px; }
.lens-lead { color: var(--ink-dim); font-size: clamp(1.02rem, 2.6vw, 1.22rem); margin-top: 14px; }

.lens-method { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
@media (min-width: 860px) { .lens-method { grid-template-columns: repeat(3, 1fr); } }
.lens-step {
  position: relative; background: var(--bg-elev); border: var(--ring);
  border-radius: var(--radius); padding: 24px 22px 22px;
}
.lens-step-no {
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  border: 1.5px solid var(--gold); color: var(--gold-bright);
  font-size: .92rem; font-weight: 800; margin-bottom: 14px;
}
.lens-step-h { font-size: 1.08rem; font-weight: 700; line-height: 1.45; margin-bottom: 7px; }
.lens-step-p { color: var(--ink-dim); font-size: .96rem; margin: 0; }

.lens-qs {
  border: var(--ring); border-radius: var(--radius); background: var(--bg-elev);
  padding: clamp(22px, 4vw, 34px); max-width: 820px; margin-inline: auto;
}
.lens-qs-h { font-size: clamp(1.3rem, 4vw, 1.7rem); font-weight: 700; margin-bottom: 16px; }
.lens-qs-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 2px; }
.lens-qs-list li {
  position: relative; padding: 13px 0 13px 0; padding-inline-start: 34px;
  font-size: 1.02rem; line-height: 1.7;
}
.lens-qs-list li + li { border-top: var(--ring); }
/* A question mark as the bullet: the list IS the questions, so the marker says
   so instead of repeating a generic dot. */
.lens-qs-list li::before {
  content: "?"; position: absolute; inset-inline-start: 0; top: 14px;
  width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%;
  background: rgb(var(--gold-rgb) / calc(var(--wash-k) * .16)); color: var(--gold-bright);
  font-size: .82rem; font-weight: 800; line-height: 1;
}

.lens-cta {
  text-align: center; border: 1.5px dashed rgb(var(--gold-rgb) / calc(var(--ring-k) * var(--hc-k) * .32));
  border-radius: var(--radius); padding: clamp(26px, 5vw, 40px) var(--gutter);
}
.lens-cta-t { font-size: clamp(1.1rem, 3.4vw, 1.4rem); font-weight: 700; max-width: 30em; margin-inline: auto; }
.lens-cta-row { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 22px; }

/* The pillars header is a title with a sub-line under it, not a title with a
   link opposite it — so this one head stacks instead of spreading. */
.section-pillars .section-head { display: block; }
.section-pillars .section-title { margin-bottom: 8px; }
.section-sub { color: var(--ink-dim); font-size: .97rem; margin-bottom: 22px; max-width: 46em; }

/* ---------------------------------------------------------- content page -- */
.prose-page { max-width: 760px; margin-inline: auto; padding: clamp(24px, 5vw, 48px) var(--gutter); }
.prose-head { text-align: center; margin-bottom: 28px; }
.prose-title { font-size: clamp(1.7rem, 6vw, 2.6rem); font-weight: 700; line-height: 1.3; margin-top: 10px; }
.prose-excerpt { color: var(--ink-dim); font-size: 1.12rem; margin-top: 12px; }
.prose-meta { color: var(--ink-dim); font-size: .88rem; margin-top: 14px; }
.prose-cover { border-radius: var(--radius); overflow: hidden; border: var(--ring); margin-bottom: 28px; background: var(--bg-elev); }
.prose-cover img { display: block; width: 100%; }
.prose-cover figcaption { font-size: .84rem; color: var(--ink-dim); padding: 10px 16px; border-top: var(--ring); line-height: 1.6; }
.prose { font-size: 1.0925rem; }
.prose > * + * { margin-top: 1.1em; }
.prose h2, .prose h3, .prose h4 { font-weight: 700; line-height: 1.4; margin-top: 1.8em; }
/* Section headings get a gold accent rule above — turns a text wall into
   scannable sections. */
.prose h2 {
  font-size: 1.5rem; margin-top: 2.4em; padding-top: 1.1em;
  border-top: 1px solid rgb(var(--gold-rgb) / calc(var(--ring-k) * var(--hc-k) * .22));
}
.prose h2::before {
  content: ""; display: block; width: 40px; height: 3px; margin-bottom: 14px;
  background: var(--gold); border-radius: 2px; box-shadow: 0 0 14px rgb(var(--gold-rgb) / calc(var(--glow-k) * .4));
}
.prose h2:first-child { border-top: 0; padding-top: 0; margin-top: .4em; }
/* Sub-steps (### Step N …) read as a tab off the gold spine. */
.prose h3 {
  font-size: 1.25rem; border-inline-start: 3px solid var(--gold);
  padding-inline-start: 14px; margin-top: 2em;
}
.prose a { color: var(--gold-bright); text-underline-offset: 3px; }
.prose ul, .prose ol { padding-inline-start: 1.3em; }
.prose li { margin-top: .5em; }
.prose li::marker { color: var(--gold); }
/* Persian pages count their steps in Persian numerals. */
[dir="rtl"] .prose ol { list-style-type: persian; }
.prose blockquote {
  border-inline-start: 3px solid var(--gold); padding-inline-start: 18px;
  color: var(--ink-dim); font-style: italic;
}
.prose code { background: var(--bg-elev2); border-radius: 6px; padding: 2px 7px; font-size: .9em; }
.prose pre { background: var(--bg-elev); border: var(--ring); border-radius: var(--radius);
  padding: 18px; overflow-x: auto; direction: ltr; }
.prose img { border-radius: var(--radius); }
.prose figure.prose-figure {
  margin-block: 1.7em; border-radius: var(--radius); overflow: hidden;
  border: var(--ring); background: var(--bg-elev);
}
/* Never upscale past intrinsic width — portrait phone screenshots stay sharp,
   constrained and centered instead of stretching into blurry monoliths. */
.prose-figure img { display: block; width: auto; max-width: 100%; max-height: 78vh; margin-inline: auto; border-radius: 0; }
.prose-figure figcaption {
  font-size: .84rem; color: var(--ink-dim); padding: 10px 16px;
  border-top: var(--ring); line-height: 1.6;
}
.figure-row { display: grid; gap: 14px; margin-block: 1.7em; }
.figure-row .prose-figure { margin-block: 0; display: flex; flex-direction: column; }
.figure-row .prose-figure img { flex: 1; object-fit: cover; min-height: 0; }
@media (min-width: 640px) {
  .figure-row.cols-2 { grid-template-columns: 1fr 1fr; }
  .figure-row.cols-3 { grid-template-columns: repeat(3, 1fr); }
  .figure-row .prose-figure img { aspect-ratio: 4 / 3; height: auto; }
}
.prose hr { border: 0; border-top: var(--ring); }
.prose ul, .prose ol { padding-inline-start: 1.4em; }
.prose-legal h2 { font-size: 1.2rem; }
.prose-follow { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 40px; justify-content: center; }

/* ------------------------------------- tutorial component layer -------- */
/* Series stepper (tutorial sub-pages): the reader's position on the path. */
.series-nav { display: flex; align-items: stretch; gap: 8px; margin-bottom: 24px;
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.series-nav::-webkit-scrollbar { display: none; }
.series-step {
  flex: 1 1 0; min-width: 138px; display: flex; align-items: center; gap: 10px;
  padding: 10px 13px; border: var(--ring); border-radius: 14px; text-decoration: none;
  color: var(--ink-dim); background: var(--bg-elev);
  transition: border-color .25s var(--ease-out), color .25s var(--ease-out);
}
a.series-step:hover { border-color: var(--gold); color: var(--ink); }
.series-step[aria-current="step"] {
  border-color: rgb(var(--gold-rgb) / calc(var(--ring-k) * var(--hc-k) * .75)); color: var(--ink);
  background: linear-gradient(180deg, rgb(var(--gold-rgb) / calc(var(--wash-k) * .14)), rgb(var(--gold-rgb) / calc(var(--wash-k) * .03)));
}
.series-no {
  width: 27px; height: 27px; flex: none; display: grid; place-items: center;
  border-radius: 50%; border: 1.5px solid var(--gold); color: var(--gold-bright);
  font-size: .82rem; font-weight: 700;
}
.series-step[aria-current="step"] .series-no { background: var(--gold); color: var(--bg); }
.series-txt { min-width: 0; }
.series-k { display: block; font-size: .68rem; color: var(--ink-dim); letter-spacing: .02em; }
.series-t { display: block; font-size: .84rem; font-weight: 600; line-height: 1.35; }
/* Phone widths: non-current steps collapse to their badge so all parts fit
   without scrolling and the CURRENT step is always visible with its label. */
@media (max-width: 480px) {
  .series-nav { overflow-x: visible; }
  .series-step { min-width: 0; }
  .series-step:not([aria-current="step"]) { flex: 0 0 auto; padding: 10px 11px; }
  .series-step:not([aria-current="step"]) .series-txt { display: none; }
  .series-step[aria-current="step"] { flex: 1 1 auto; }
}

/* Hub route map: the whole path as numbered stations. */
.series-map {
  margin: 4px 0 32px; border: var(--ring); border-radius: var(--radius);
  background: var(--bg-elev); padding: 20px clamp(14px, 3.5vw, 24px);
}
.series-map-head {
  font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--gold-bright); margin-bottom: 12px;
}
.series-map-item {
  position: relative; display: block; padding: 13px 12px;
  padding-inline-start: 58px; border-radius: 12px; text-decoration: none;
  transition: background .25s var(--ease-out);
}
.series-map-item:hover { background: var(--bg-elev2); }
.series-map-item:not(:last-child)::before {
  content: ""; position: absolute; inset-inline-start: 27px; top: 48px; bottom: -10px;
  width: 2px; background: rgb(var(--gold-rgb) / calc(var(--ring-k) * var(--hc-k) * .28));
}
.series-node {
  position: absolute; inset-inline-start: 12px; top: 14px;
  width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%;
  border: 1.5px solid var(--gold); color: var(--gold-bright); font-weight: 700;
  background: var(--bg); z-index: 1;
}
.series-map-item .smt { display: block; color: var(--ink); font-weight: 700; line-height: 1.45; }
.series-map-item .smx {
  display: block; color: var(--ink-dim); font-size: .88rem; margin-top: 3px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* Series pager: previous / next / hub at the end of a part. */
.series-pager { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 38px; }
.series-pager .pg {
  display: block; border: var(--ring); border-radius: 14px; padding: 12px 15px;
  background: var(--bg-elev); text-decoration: none;
  transition: border-color .25s var(--ease-out);
}
.series-pager a.pg:hover { border-color: var(--gold); }
.series-pager .pg-next { text-align: end; }
.series-pager .pg-hub { grid-column: 1 / -1; text-align: center; }
.series-pager .pg-solo { grid-column: 1 / -1; }
.pg-k { display: block; font-size: .72rem; color: var(--ink-dim); margin-bottom: 2px; }
.pg-t { display: block; font-size: .93rem; font-weight: 600; color: var(--gold-bright); }

/* Step cards: "## گام N — …" renders as a numbered card, not a wall. */
.prose .step-card {
  border: var(--ring); border-radius: var(--radius); background: var(--bg-elev);
  padding: clamp(16px, 4vw, 24px); margin-top: 1.5em;
}
.prose .step-card + .step-card { margin-top: 14px; }
.prose .step-card > * + * { margin-top: .95em; }
.prose h2.step-h {
  display: flex; align-items: center; gap: 13px; font-size: 1.18rem;
  margin-top: 0; padding-top: 0; border-top: 0;
}
.prose h2.step-h::before { content: none; }
.step-no {
  width: 38px; height: 38px; flex: none; display: grid; place-items: center;
  border-radius: 50%; background: var(--gold); color: var(--bg);
  font-size: 1.02rem; font-weight: 800;
  box-shadow: 0 0 16px rgb(var(--gold-rgb) / calc(var(--glow-k) * .35));
}
.step-t { min-width: 0; }
.prose .step-card .prose-figure { margin-block: 1.1em 0; background: var(--bg); }

/* Callouts: :::warn / :::note */
.prose .md-callout {
  position: relative; border: var(--ring); border-radius: 12px; background: var(--bg-elev);
  padding: 13px 16px; padding-inline-start: 48px;
}
.prose .md-callout > * + * { margin-top: .6em; }
.prose .md-callout::before {
  position: absolute; inset-inline-start: 14px; top: 15px;
  width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%;
  font-size: .82rem; font-weight: 800; line-height: 1;
}
.prose .md-warn { border-inline-start: 3px solid var(--warn); }
.prose .md-warn::before { content: "!"; background: rgb(var(--warn-rgb) / calc(var(--wash-k) * .18)); color: var(--warn-bright); }
.prose .md-note { border-inline-start: 3px solid var(--gold); }
.prose .md-note::before { content: "i"; background: rgb(var(--gold-rgb) / calc(var(--wash-k) * .16)); color: var(--gold-bright); font-style: italic; font-family: Georgia, serif; }

/* Params card: :::params — tuning values readable across the room.
   One column on phones (no ragged 2+1 wrap), a full row from 560px up. */
.prose .md-params { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 560px) {
  .prose .md-params { grid-template-columns: repeat(auto-fit, minmax(138px, 1fr)); }
}
.prose .md-params .md-param {
  border: var(--ring); border-radius: 12px; background: var(--bg-elev);
  padding: 13px 12px 15px; text-align: center;
}
.md-param dt { font-size: .78rem; color: var(--ink-dim); letter-spacing: .02em; }
.md-param dd { margin: 3px 0 0; font-size: 1.4rem; font-weight: 800; color: var(--gold-bright); line-height: 1.3; }

/* Numbered-callout steps: :::steps — badges mirror the screenshots' digits. */
.prose .md-steps ol { list-style: none; padding-inline-start: 0; margin: 0; }
.prose .md-steps li { position: relative; padding-inline-start: 40px; margin-top: .85em; }
.prose .md-steps li:first-child { margin-top: 0; }
.li-no {
  position: absolute; inset-inline-start: 0; top: .12em;
  width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%;
  border: 1.5px solid var(--gold); color: var(--gold-bright);
  font-size: .84rem; font-weight: 700;
}

.phone-frame {
  max-width: 340px; margin: 0 auto 28px; border-radius: 28px; overflow: hidden;
  border: 1.5px solid rgb(var(--gold-rgb) / calc(var(--ring-k) * var(--hc-k) * .45)); background: #000;
  box-shadow: 0 18px 60px rgb(var(--sh-rgb) / calc(var(--sh-k) * .5));
}
.phone-frame video { width: 100%; aspect-ratio: 9 / 16; object-fit: contain; background: #000; }

.photo-stack { display: grid; gap: 16px; margin-bottom: 28px; }
.photo-stack figure { border-radius: var(--radius); overflow: hidden; border: var(--ring); }

.tag-chips, .filter-bar { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.filter-bar { margin: 0 0 24px; }
.filter-sep { flex-basis: 100%; height: 0; }
@media (min-width: 720px) { .filter-sep { flex-basis: 0; width: 1px; align-self: stretch; background: rgb(var(--gold-rgb) / calc(var(--ring-k) * var(--hc-k) * .2)); } }
.chip {
  display: inline-flex; padding: 6px 14px; border-radius: 999px; text-decoration: none;
  border: var(--ring); color: var(--ink-dim); font-size: .88rem;
  transition: color .18s, border-color .18s, background-color .18s;
}
.chip:hover { color: var(--ink); border-color: var(--gold); }
.chip-active { background: var(--gold); color: var(--bg); font-weight: 700; border-color: var(--gold); }

.pagination { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 36px; }
.page-count { color: var(--ink-dim); }

.empty-state {
  text-align: center; color: var(--ink-dim); padding: 48px 20px;
  border: 1.5px dashed rgb(var(--gold-rgb) / calc(var(--ring-k) * var(--hc-k) * .3)); border-radius: var(--radius);
}

/* -------------------------------------------------------------- contact -- */
.contact-cards { display: grid; gap: 16px; grid-template-columns: 1fr; max-width: 760px; margin-inline: auto; }
@media (min-width: 640px) { .contact-cards { grid-template-columns: 1fr 1fr; } }
.contact-card {
  background: var(--bg-elev); border: var(--ring); border-radius: var(--radius);
  padding: 28px 24px; text-decoration: none;
  transition: transform .18s var(--ease-out), border-color .18s;
}
@media (hover: hover) { .contact-card:hover { transform: translateY(-3px); border-color: rgb(var(--gold-rgb) / calc(var(--ring-k) * var(--hc-k) * .5)); } }
/* The contact cards' accent ring. It used to live in the pillars block and was
   borrowed from here; the pillars now carry their own mark, so the ring stays
   with its only remaining user. */
.pillar-ring { display: block; width: 30px; height: 30px; border-radius: 50%;
  border: 3px solid var(--gold); margin-bottom: 16px;
  box-shadow: 0 0 18px rgb(var(--gold-rgb) / calc(var(--glow-k) * .35)); }
.contact-card h2 { font-size: 1.1rem; margin-bottom: 6px; }
.contact-card p { color: var(--gold-bright); }
.contact-note { text-align: center; color: var(--ink-dim); margin-top: 24px; }

/* ---------------------------------------------------------- internal refs -- */
/* Rendered in place of dead/forward links by vp_md_resolve_internal_links() */
.internal-ref {
  text-decoration: none;
  border-bottom: 1px dotted var(--ink-dim);
  cursor: help;
  transition: border-color .18s, color .18s;
}
.internal-ref:hover {
  border-bottom-color: var(--gold);
  color: var(--gold-bright);
}
.internal-ref.planned {
  /* Sanctioned forward-link to a planned page */
  border-bottom-color: var(--neon);
}
.internal-ref.planned:hover {
  border-bottom-color: var(--neon);
  color: var(--neon);
}
.internal-ref.dead {
  /* Dead/unplanned link — muted text, no hover brightening */
  color: var(--ink-dim);
  border-bottom-color: var(--ink-dim);
}
.internal-ref.dead:hover {
  color: var(--ink-dim);
  border-bottom-color: var(--ink-dim);
}

/* --------------------------------------------------------------- footer -- */
/* Mobile-first: the footer is a compact strip — one tight row of the three
   link columns beside the brand, nothing stacked tall. Desktop/tablet only
   widen the columns; they never add height (owner 2026-08-20: footer must be
   half its old vertical size; mobile is the primary design target). */
.footer { border-top: var(--ring); margin-top: clamp(32px, 6vw, 64px);
  padding: clamp(18px, 3.6vw, 32px) var(--gutter) calc(14px + env(safe-area-inset-bottom)); }
.footer-inner { max-width: var(--maxw); margin-inline: auto; display: grid; gap: 14px; }
.footer-brand { display: flex; align-items: center; gap: 10px; }
.footer-brand img { width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid var(--gold); }
.footer-tagline { color: var(--ink-dim); font-size: .9rem; margin: 0; }
.footer-cols { display: grid; gap: 12px; grid-template-columns: repeat(3, 1fr); }
@media (min-width: 640px) {
  .footer-cols { grid-template-columns: repeat(3, auto); justify-content: space-between; gap: 20px; }
}
.footer-nav { display: flex; flex-direction: column; gap: 6px; }
.footer-nav a { color: var(--ink-dim); text-decoration: none; font-size: .92rem; }
.footer-nav a:hover { color: var(--gold-bright); }
.footer-contact { display: flex; flex-direction: column; gap: 6px; }
.footer-contact a { color: var(--ink-dim); text-decoration: none; font-size: .92rem; }
.footer-contact a:hover { color: var(--gold-bright); }
.footer-copy { color: var(--ink-dim); font-size: .8rem; border-top: var(--ring); padding-top: 12px; }

/* ------------------------------------------------------------- chat FAB -- */
.chat-fab {
  position: fixed; z-index: 130;
  inset-inline-end: max(18px, env(safe-area-inset-right));
  bottom: max(18px, env(safe-area-inset-bottom));
  width: 58px; height: 58px; border-radius: 50%;
  display: grid; place-content: center;
  background: var(--bg-elev); color: var(--gold-bright);
  border: 2px solid var(--gold); cursor: pointer;
  box-shadow: 0 8px 30px rgb(var(--sh-rgb) / calc(var(--sh-k) * .5)), 0 0 22px rgb(var(--gold-rgb) / calc(var(--glow-k) * .22));
  transition: transform .18s var(--ease-out), box-shadow .18s;
}
[dir="rtl"] .chat-fab { inset-inline-end: auto; inset-inline-start: max(18px, env(safe-area-inset-left)); }
.chat-fab:hover { transform: translateY(-2px); box-shadow: 0 10px 34px rgb(var(--sh-rgb) / calc(var(--sh-k) * .55)), 0 0 30px rgb(var(--neon-rgb) / calc(var(--glow-k) * .3)); }

/* ------------------------------------------------------------ chat sheet -- */
/* Mobile: full-screen viewport takeover per Hive strict rules; keyboard
   tracked with --vvh/--vv-top so the input bar sits 0px above the keyboard. */
.chat-panel {
  position: fixed; z-index: 140; inset: 0; width: 100%;
  height: 100vh; height: 100dvh; height: var(--vvh, 100dvh);
  top: var(--vv-top, 0);
  display: flex; flex-direction: column;
  background: var(--bg);
  transform: translateY(100%);
  transition: transform .34s var(--ease-sheet);
  touch-action: none;
  will-change: transform;
}
.chat-panel.open { transform: translateY(0); }
.chat-panel[hidden] { display: none; }

.chat-head {
  flex: none; display: flex; align-items: center; gap: 12px;
  padding: 12px 16px;
  padding-top: calc(12px + env(safe-area-inset-top));
  border-bottom: var(--ring); background: var(--bg-elev);
}
.chat-head-avatar { width: 38px; height: 38px; border-radius: 50%; border: 1.5px solid var(--gold); }
.chat-head-info { min-width: 0; flex: 1; }
.chat-head-title { font-weight: 700; font-size: 1rem; line-height: 1.3; }
/* AI disclosure lives HERE, in the head — never below the input bar (owner order) */
.chat-head-note { font-size: .72rem; color: var(--ink-dim); line-height: 1.4;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-provider {
  display: none; font-size: .72rem; color: var(--neon); font-weight: 500;
}
.chat-provider.show { display: block; }
.chat-head button {
  width: 40px; height: 40px; flex: none; display: grid; place-content: center;
  background: none; border: var(--ring); border-radius: 10px; cursor: pointer; color: var(--ink);
  font-size: 18px;
}

.chat-list {
  flex: 1 1 0; min-height: 0; overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y; overscroll-behavior: contain;
  padding: 18px 16px; display: flex; flex-direction: column; gap: 12px;
}
.chat-msg { max-width: 84%; padding: 11px 15px; border-radius: 18px;
  white-space: pre-wrap; font-size: 1rem; line-height: 1.65; }
.chat-msg-user { align-self: flex-end; background: var(--gold); color: var(--bg);
  border-end-end-radius: 6px; font-weight: 500; }
[dir="rtl"] .chat-msg-user { align-self: flex-start; }
.chat-msg-bot { align-self: flex-start; background: var(--bg-elev); border: var(--ring);
  border-end-start-radius: 6px; }
[dir="rtl"] .chat-msg-bot { align-self: flex-end; }
.chat-msg-error { border-color: var(--danger); color: var(--danger); }
.chat-typing { display: inline-flex; gap: 5px; padding: 6px 2px; }
.chat-typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-dim);
  animation: vp-typing 1.1s infinite ease-in-out; }
.chat-typing i:nth-child(2) { animation-delay: .18s; }
.chat-typing i:nth-child(3) { animation-delay: .36s; }
@keyframes vp-typing { 0%, 60%, 100% { transform: translateY(0); opacity: .4; }
  30% { transform: translateY(-5px); opacity: 1; } }

.chat-inputbar {
  flex: none; display: flex; align-items: flex-end; gap: 10px;
  padding: 8px 12px;
  /* NO band, NO strip: just the pill + send on the panel background.
     Keyboard closed → safe-area padding; keyboard open → JS sets --kb-pad
     to 0px and the pill sits EXACTLY on the keyboard (owner order). */
  padding-bottom: var(--kb-pad, calc(10px + env(safe-area-inset-bottom)));
  border-top: 0; background: var(--bg);
}
.chat-input {
  flex: 1; resize: none; max-height: 120px; min-height: 44px;
  background: var(--bg); border: var(--ring); border-radius: 22px;
  padding: 10px 16px; color: var(--ink); line-height: 1.5;
  font-size: 16px; /* ≥16px = no iOS zoom (strict rule 3) */
}
.chat-input:focus-visible { outline: 2px solid var(--gold); outline-offset: 0; }
.chat-send {
  flex: none; width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-content: center; border: 0; cursor: pointer;
  background: var(--gold); color: var(--bg);
  transition: transform .15s var(--ease-out), background-color .15s;
}
.chat-send:hover { background: var(--gold-bright); }
.chat-send:active { transform: scale(.92); }
.chat-send:disabled { opacity: .45; cursor: default; }
.chat-send svg { transform: rotate(0); }
[dir="rtl"] .chat-send svg { transform: rotate(180deg); }

/* Desktop: floating card, page stays visible */
@media (min-width: 640px) {
  .chat-panel {
    inset: auto; inset-inline-end: 24px; bottom: 24px; top: auto;
    width: 400px; height: min(640px, calc(100vh - 96px));
    border: var(--ring); border-radius: 20px; overflow: hidden;
    box-shadow: 0 24px 80px rgb(var(--sh-rgb) / calc(var(--sh-k) * .6));
    transform: translateY(24px); opacity: 0;
    transition: transform .26s var(--ease-out), opacity .26s var(--ease-out);
  }
  [dir="rtl"] .chat-panel { inset-inline-end: auto; inset-inline-start: 24px; }
  .chat-panel.open { transform: translateY(0); opacity: 1; }
  .chat-head { padding-top: 12px; }
  .chat-inputbar { padding-bottom: 10px; }
}

/* --------------------------------------------------------------- motion -- */
.reveal { opacity: 0; transform: translateY(14px);
  transition: opacity .48s var(--ease-out), transform .48s var(--ease-out); }
.reveal.in { opacity: 1; transform: none; }
.no-io .reveal { opacity: 1; transform: none; }

/* Motion has THREE states (see vp_display_prefs): data-motion=auto follows the
   OS, =reduced is the reader's explicit request, =full is the reader explicitly
   overriding an OS preference for this site. Hence the media query is scoped to
   :not([data-motion="full"]) rather than being unconditional.
   CSS cannot OR a media query with a selector, so the body is stated twice on
   purpose; the alternative was routing all ~80 transitions through a variable. */
@media (prefers-reduced-motion: reduce) {
  :root:not([data-motion="full"]) { scroll-behavior: auto; }
  :root:not([data-motion="full"]) *,
  :root:not([data-motion="full"]) *::before,
  :root:not([data-motion="full"]) *::after {
    transition-duration: .01ms !important; animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
  :root:not([data-motion="full"]) .reveal { opacity: 1; transform: none; }
}
:root[data-motion="reduced"] { scroll-behavior: auto; }
:root[data-motion="reduced"] *,
:root[data-motion="reduced"] *::before,
:root[data-motion="reduced"] *::after {
  transition-duration: .01ms !important; animation-duration: .01ms !important;
  animation-iteration-count: 1 !important;
}
:root[data-motion="reduced"] .reveal { opacity: 1; transform: none; }

/* -------------------------------------------------------------- desktop -- */
@media (min-width: 900px) {
  .nav-desktop { display: flex; }
  /* The nav has already taken the free space, so the actions ride along beside
     it instead of pushing off on their own. Scoped to this width on purpose:
     below it the nav is display:none and the actions need the `auto` themselves
     to reach the far corner. */
  .nav-desktop + .topbar-actions { margin-inline-start: 0; }
  .btn-follow { display: inline-flex; }
  .nav-burger { display: none; }
  .drawer, .drawer-overlay { display: none; }
}
/* Spelling the languages out costs ~110px over the FA/DE/EN codes. At 900px —
   where the desktop nav, the follow CTA and the display button all switch on at
   once — that was exactly what pushed the wordmark into an ellipsis (15px short
   in fa, 53px in en). The codes are already the mobile treatment and lose
   nothing, so the full names simply wait for the room. */
@media (min-width: 980px) {
  .lang-switch .lang-long { display: inline; }
  .lang-switch .lang-abbr { display: none; }
  .lang-switch a { padding: 4px 10px; }
}