/* App layer: semantic design tokens (approved brand palette — docs/DESIGN_SYSTEM.md),
   site chrome, page-level devices. Logical properties only — no physical directions.
   70/20/8/2 color rule: neutrals dominate; --color-primary is an accent, not a coat of paint. */

:root {
  color-scheme: light;

  /* ---- Persian editorial palette: paper, ink, clay, botanical green ---- */
  --color-navy: #24384d;
  --color-navy-dark: #1c2d3e;
  /* text that sits ON the navy chrome (header/footer): theme-invariant */
  --color-on-navy: #eee7dc;
  --color-on-navy-muted: #c7c5bd;
  --color-ivory: #f7f1e6;
  --color-cream: #f3ebdd;
  --color-white: #ffffff;
  --color-terracotta: #b85c38;
  --color-terracotta-dark: #8f4328;
  --color-gold: #b08a3e;
  --color-gold-text: #7c6023; /* text-safe deep gold — raw gold fails AA on ivory */
  --color-sage: #71836b;

  --color-background: var(--color-ivory);
  --color-surface: var(--color-white);
  --color-surface-muted: var(--color-cream);
  --color-text: var(--color-navy);
  --color-text-secondary: #6b6862;
  --color-text-muted: #8b857b;

  --color-primary: var(--color-terracotta);
  --color-primary-hover: var(--color-terracotta-dark);
  --color-primary-active: #7a3a22;
  --color-primary-text: var(--color-terracotta-dark);
  --color-on-primary: var(--color-white);

  --color-border: #ddd4c6;
  --color-border-strong: #c5b8a7;

  --color-success: #2f6b4f;
  --color-warning: #8a5a00;
  --color-error: #a4302a;
  --color-info: #344e6c; /* deep blue */

  /* section accents (2% — non-text identity per pillar; strong variants for text) */
  --color-accent-fromzero: #b85c38;
  --color-accent-philosophers: #344e6c;
  --color-accent-children: #71836b;
  --color-accent-movies: #7a3e45;
  --color-accent-lab: #b08a3e;

  /* component-level hooks */
  --card-rule: var(--color-primary);
  --focus-ring: 2px solid var(--color-primary);

  --tint-success: color-mix(in oklab, var(--color-success) 14%, #ffffff);
  --tint-warning: color-mix(in oklab, #d9a441 22%, #ffffff);
  --tint-error: color-mix(in oklab, var(--color-error) 12%, #ffffff);
  --tint-info: color-mix(in oklab, var(--color-info) 12%, #ffffff);

  --radius-sm: 3px;
  --radius-md: 8px;
  --motion: 180ms ease;
}

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

* { box-sizing: border-box; }

body {
  margin: 0;
  color: var(--color-text);
  background: var(--color-background);
  /* sticky footer: short pages (bookmarks, 404) keep the navy footer on the
     viewport floor instead of floating mid-page with ivory below it */
  min-block-size: 100dvh;
  display: flex;
  flex-direction: column;
}

.site-main { flex: 1 0 auto; }

::selection { background: color-mix(in oklab, var(--color-primary) 26%, var(--color-background)); }

:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }

/* ---------- section accent scoping (docs/DESIGN_SYSTEM.md §accents) ---------- */
.section-fromzero { --card-rule: var(--color-accent-fromzero); }
.section-philosophers { --card-rule: var(--color-accent-philosophers); }
.section-children { --card-rule: var(--color-accent-children); }
.section-movies { --card-rule: var(--color-accent-movies); }
.section-laboratory { --card-rule: var(--color-accent-lab); }

/* ---------- masthead chrome ---------- */
.site-header {
  background: var(--color-navy);
  color: var(--color-on-navy);
  border-block-end: 3px solid var(--color-terracotta);
  box-shadow: 0 8px 28px rgb(28 45 62 / 12%);
}
.site-nav {
  min-block-size: 78px;
  padding-block: 0.7rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-weight: 800;
  font-size: var(--text-lg);
  text-decoration: none;
  color: var(--color-on-navy);
}
.brand:hover { color: var(--color-on-navy); }
.brand-mark {
  display: inline-grid;
  place-items: center;
  inline-size: 2.3rem;
  block-size: 2.3rem;
  border: 1px solid var(--color-gold);
  border-radius: 50%;
  color: var(--color-gold);
  font-size: var(--text-xl);
  line-height: 1;
}
.brand-copy { display: grid; line-height: 1.25; }
.brand-copy small { color: var(--color-on-navy-muted); font-size: var(--text-xs); font-weight: 400; }
.nav-links { display: flex; gap: 1rem; list-style: none; margin: 0; padding: 0; align-items: center; }
/* buttons inside the nav keep their own variant colours, not the link colour.
   Scoped to direct children so dropdown-menu items (surface + text colours,
   components.css) never inherit the on-navy ink. */
.nav-links > li > :is(a, button):not(.btn):not(.dropdown-trigger) {
  color: var(--color-on-navy);
  text-decoration: none;
  padding-block: 0.25rem;
  transition: color var(--motion);
  /* touch minimum: every header control owns a 44px target box */
  display: inline-flex;
  align-items: center;
  min-block-size: var(--control-h, 2.75rem);
}
.nav-links > li > :is(a, button):not(.btn):not(.dropdown-trigger):hover {
  color: var(--color-on-navy);
  text-decoration: underline;
  text-underline-offset: 6px;
}
.nav-links .btn { flex: 0 0 auto; }
.nav-actions { display: flex; align-items: center; gap: var(--sp-2); }
.nav-search {
  color: var(--color-gold) !important;
  font-size: 1.7rem;
  line-height: 1;
  text-decoration: none !important;
  /* icon-only link: give it the full 44px target, not the glyph box */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: var(--control-h, 2.75rem);
  block-size: var(--control-h, 2.75rem);
}
.site-header .btn:not(.btn-primary) { border-color: color-mix(in oklab, var(--color-on-navy) 30%, transparent); background: transparent; color: var(--color-on-navy); }
.site-header .dropdown-trigger { background: transparent; border-color: color-mix(in oklab, var(--color-on-navy) 30%, transparent); color: var(--color-on-navy); }
/* the caret sits on navy too — components.css colours it for light surfaces */
.site-header .dropdown-caret { color: var(--color-on-navy-muted); }
.inline-form { display: inline; }
.link-button {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-block-size: var(--control-h);
  padding: 0;
  background: none;
  border: 0;
  color: var(--color-primary-text);
  font: inherit;
  line-height: var(--control-line);
  cursor: pointer;
  text-decoration: none;
}
.link-button:hover { text-decoration: underline; text-underline-offset: 6px; }
.link-button.danger { color: var(--color-error); }

.site-main { padding-block: var(--sp-8); }
.site-main > section:first-child,
.site-main > article:first-child { animation: page-enter 260ms ease both; }
@keyframes page-enter { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }

.site-footer {
  text-align: center;
  color: var(--color-text-secondary);
  padding-block: var(--sp-8);
  font-size: var(--text-sm);
  border-block-start: 1px solid var(--color-border);
  background: var(--color-navy-dark);
  color: var(--color-on-navy-muted);
  margin-block-start: var(--sp-12);
}
.site-footer::before { content: "✦"; display: block; color: var(--color-primary); margin-block-end: var(--sp-4); }
.site-footer .row { justify-content: center; gap: var(--sp-6); flex-wrap: wrap; }
.site-footer a {
  color: var(--color-on-navy);
  text-decoration: none;
  /* footer is a tap surface too: 44px rows, not 28px text boxes */
  display: inline-flex;
  align-items: center;
  min-block-size: var(--control-h, 2.75rem);
}
.site-footer a:hover { color: var(--color-gold); }

/* ---------- home masthead hero ---------- */
.eyebrow {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-primary-text);
  margin: 0;
}
/* shared masthead hero: pillar landings get the padding and lead measure, the h1
   stays on the global ladder (--text-4xl); only home overrides to display size */
.hero { padding-block: var(--sp-6) var(--sp-4); }
.hero .text-lead { max-inline-size: 46ch; color: var(--color-text); }
.page-home .hero { padding-block: var(--sp-8) var(--sp-6); }
.page-home .hero h1 { font-size: var(--text-display); font-weight: 800; }
.hero-rule {
  border: 0;
  border-block-start: 1px solid var(--color-border);
  margin-block: var(--sp-8);
}
.rail-heading::before { content: "✦ "; color: var(--color-primary); font-size: 0.75em; }

/* ---------- home editorial hero ---------- */
.home-hero {
  display: grid;
  gap: var(--sp-8);
  align-items: center;
  min-block-size: min(650px, calc(100vh - 100px));
  padding-block: var(--sp-8) var(--sp-12);
}
.hero-copy { position: relative; z-index: 1; max-inline-size: 34rem; }
.hero-copy .eyebrow { color: var(--color-primary-text); font-size: var(--text-lg); line-height: 1.8; }
/* the home hero h1 size is owned by `.page-home .hero h1` (typography.css):
   never reintroduce a competing clamp here — it resurrects on boost-navigated
   pages whenever the body class scope misses */
.hero-copy .text-lead { max-inline-size: 38ch; color: var(--color-text); font-size: clamp(1.05rem, 2vw, 1.35rem); }
.hero-art { position: relative; overflow: hidden; border-radius: 28px; }
.hero-art-image { display: block; inline-size: 100%; block-size: auto; }
.hero-moon, .hero-star, .hero-hill, .hero-lantern, .hero-book, .hero-cat, .hero-thinker, .hero-child { display: none; }
.hero-rule { border-block-start-color: var(--color-gold); opacity: .7; }

/* numbered pillar index — number top-start, illustration top-end (mockup layout) */
.pillar-card { position: relative; min-block-size: 220px; padding-block-start: var(--sp-6); overflow: hidden; grid-template-columns: 1fr auto; gap: var(--sp-3); }
.pillar-no {
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  font-size: var(--text-sm);
  color: var(--color-gold-text);
  justify-self: start;
  align-self: end;
}
.pillar-card .card-title,
.pillar-card .text-meta,
.pillar-arrow { grid-column: 1 / -1; }
.pillar-card .card-title { display: block; }
.pillar-icon { display: block; inline-size: auto; block-size: 3.5rem; align-self: start; justify-self: end; }
.pillar-arrow { align-self: end; justify-self: end; display: grid; place-items: center; inline-size: 2rem; block-size: 2rem; border-radius: 50%; background: var(--color-terracotta); color: var(--color-white); }

/* featured lead item spans wider on large screens */
@media (min-width: 40em) {
  .pillars-grid { grid-template-columns: repeat(2, 1fr); }
  .article-card.lead { grid-column: span 2; }
  .article-card.lead h3 { font-size: var(--text-2xl); }
  .article-card.lead p:not(.text-meta) { font-size: var(--text-lg); color: var(--color-text); }
}
@media (min-width: 64em) {
  .pillars-grid { grid-template-columns: repeat(3, 1fr); }
  .featured-grid { grid-template-columns: repeat(3, 1fr); }
  .article-card.lead { grid-column: 1 / -1; }
}

/* ---------- surfaces & folio cards ---------- */
.card {
  background: var(--color-surface-muted);
  border: 1px solid var(--color-border);
  border-block-start: 3px solid var(--card-rule);
  border-radius: var(--radius-md);
  padding: var(--sp-6);
  display: grid;
  gap: var(--sp-4);
  transition: border-color var(--motion), transform var(--motion);
}
/* grid children don't margin-collapse: UA heading/para margins + stack-*
   helpers would stack on top of the card gap — the gap is the only rhythm */
.card > * { margin-block: 0; }
.card:hover { border-color: var(--color-border-strong); }
.page-home .featured-grid .card.lead { border-block-start-width: 4px; }
.page-account .site-main { max-inline-size: 62rem; }

/* ---------- user-page rails: journal contents rows, not bullet cards ------
   The dashboard/bookmarks/history lists read as a table of contents: rows
   separated by hairlines, title start-aligned, meta end-aligned, one hover
   tone. Cards stay for the page frame; the content itself is a rail. */
.rail-list { list-style: none; margin: 0; padding: 0; }
.rail-list li { border-block-start: 1px solid var(--color-border); }
.rail-list li:first-child { border-block-start: 0; }
.rail-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  padding-block: var(--sp-2);
  min-block-size: var(--control-h);
  transition: background var(--motion);
}
.rail-row:hover { background: var(--color-surface-muted); }
.rail-row a {
  color: var(--color-primary-text);
  font-weight: 600;
  text-decoration: none;
  min-inline-size: 0;
}
.rail-row a:hover { text-decoration: underline; text-underline-offset: 4px; }
.rail-row .rail-meta {
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
  white-space: nowrap;
}

/* dashboard: the two rails sit side by side from 48em, stacked below */
.dash-grid { display: grid; gap: var(--sp-4); }
@media (min-width: 48em) {
  .dash-grid { grid-template-columns: 1fr 1fr; align-items: start; }
}

/* ---------- auth flow: one narrow centered card (login/signup/reset) -----
   A 17px form stretched across the 68rem container reads as CRUD. The auth
   family gets a ~27rem card, vertically breathing, with a full-width
   primary submit. User pages (dashboard/profile) keep .page-account width. */
.page-auth .site-main {
  max-inline-size: 27rem;
  display: grid;
  align-content: center;
}
.page-auth .card { padding-block: var(--sp-6); }
.page-auth h1 { font-size: var(--text-2xl); }
.page-auth form .btn-primary { inline-size: 100%; }
.page-auth .form-row-check { min-block-size: var(--control-h); }
a.card:hover { border-color: var(--card-rule); transform: translateY(-2px); }
a.card:active { transform: translateY(0); }

.messages { list-style: none; padding: 0; }
.message {
  padding: 0.6rem 1rem;
  border-radius: var(--radius-md);
  background: var(--tint-info);
  border-inline-start: 3px solid var(--color-info);
  margin-block-end: 0.5rem;
  color: var(--color-text);
}
.message.error { background: var(--tint-error); color: var(--color-error); border-inline-start-color: var(--color-error); }
.message.success { background: var(--tint-success); color: var(--color-success); border-inline-start-color: var(--color-success); }
.message.warning { background: var(--tint-warning); color: var(--color-warning); border-inline-start-color: var(--color-warning); }

/* ---------- links ---------- */
main a { color: var(--color-primary-text); }
main a.btn { text-decoration: none; }

/* Button geometry lives once, in components.css. Only states that need the
   app layer (spinner, active lift) are added here. */
.btn-primary:active { background: var(--color-primary-active); transform: translateY(1px); }
.btn[aria-busy="true"] { cursor: progress; }
.btn[aria-busy="true"]::after {
  content: "";
  inline-size: 0.9em;
  block-size: 0.9em;
  border: 2px solid currentColor;
  border-block-start-color: transparent;
  border-radius: 50%;
  animation: btn-spin 0.8s linear infinite;
}
@keyframes btn-spin { to { transform: rotate(360deg); } }

/* action groups: one gap, RTL-safe */
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); }

/* ---------- forms ---------- */
.form-row { display: grid; gap: var(--sp-1); }
.form-row label { font-weight: 600; }
.form-row .helptext { color: var(--color-text-secondary); font-size: 0.85rem; }
.form-row .errors { color: var(--color-error); font-size: 0.9rem; list-style: none; margin: 0; padding: 0; }
/* sizing/colours come from the shared control rules in components.css */
.form-row :is(input, select, textarea) { inline-size: 100%; }
.form-row :is(input[type="checkbox"], input[type="radio"]) { inline-size: auto; }
.form-row input::placeholder, .form-row textarea::placeholder { color: var(--color-text-muted); }
/* checkbox row: the label wraps the box — one 44px touch target, label text
   beside it, control geometry from the shared tokens */
.form-check {
  display: flex; align-items: center; gap: var(--sp-2);
  min-block-size: var(--control-h); font-weight: 600; cursor: pointer;
}
/* studio editor: fields read as an editorial column; the audit/revision
   tables outside the form keep full width */

/* filter/toolbar bars: label above control, actions bottom-aligned on the row.
   A filter row is UI chrome, not reading content — give it air below so the
   card grid doesn't crowd it. */
.filter-bar { display: flex; flex-wrap: wrap; align-items: end; gap: var(--sp-3); margin-block-end: var(--sp-8); }
.filter-field { display: grid; gap: var(--sp-1); flex: 1 1 10rem; min-inline-size: 0; }
.filter-field-wide { flex-basis: 16rem; }
.filter-field > label {
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: var(--leading-tight);
  color: var(--color-text-secondary);
}
.filter-field :is(input, select) { inline-size: 100%; }
.filter-bar .btn { flex: 0 0 auto; }
.non-field-errors { color: var(--color-error); margin: 0; }

.muted { color: var(--color-text-secondary); }
.errorlist { color: var(--color-error); list-style: none; padding: 0; }
.profile-meta { list-style: none; padding: 0; }
.avatar { border-radius: var(--radius-md); object-fit: cover; }
.profile-grid { display: grid; gap: var(--sp-4); align-items: center; }
.form-row-check { display: flex; flex-direction: row; align-items: center; gap: var(--sp-2); }
/* the glyph stays small (components.css); the label carries a 44px target */
.form-row-check label {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--control-h, 2.75rem);
  cursor: pointer;
}
.invisible { display: none; }
.danger-zone { border-block-start: 1px solid var(--color-border); padding-block-start: var(--sp-4); }
.errors { color: var(--color-error); font-size: 0.9rem; }
.site-main > section > h1:first-child,
.site-main > section > .stack-sm > h1:first-child { max-inline-size: 18ch; }
.site-main > section > h1:first-child::after,
.site-main > article > header h1::after {
  content: "";
  display: block;
  inline-size: 3.2rem;
  block-size: 3px;
  margin-block-start: var(--sp-3);
  background: var(--color-terracotta);
}

/* ---------- S4-T04 nav responsiveness ---------- */
.desktop-only { display: none; gap: var(--sp-4); align-items: center; }
.mobile-only { display: block; }
.nav-burger { background: transparent; display: inline-flex; align-items: center; justify-content: center; border: 1px solid color-mix(in oklab, var(--color-on-navy) 40%, transparent); border-radius: var(--radius-sm); min-inline-size: var(--control-h); min-block-size: var(--control-h); font-size: var(--text-xl); line-height: var(--control-line); cursor: pointer; color: var(--color-on-navy); }
.nav-links a[aria-current="page"] { color: var(--color-primary-text); font-weight: 700; text-decoration: underline; text-underline-offset: 6px; }
.mobile-backdrop {
  position: fixed; inset-block: 0; inset-inline-start: 0; inline-size: 100%;
  background: rgb(23 21 18 / 50%); z-index: 50;
}
.mobile-drawer {
  position: fixed;
  inset-block: 0;
  inset-inline-end: 0;
  inline-size: min(78vw, 20rem);
  background: var(--color-surface);
  box-shadow: 0 0 24px rgb(23 22 20 / 35%);
  padding: var(--sp-8) var(--sp-6);
  z-index: 60;
}
.mobile-drawer :is(a, button):not(.btn) {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--control-h);
  line-height: var(--control-line);
  color: var(--color-text);
  text-decoration: none;
}
.mobile-drawer :is(a, button):not(.btn):hover { color: var(--color-primary-text); text-decoration: underline; }
.mobile-drawer-head { display: flex; justify-content: flex-end; margin-block-end: var(--sp-3); }
.mobile-drawer-close { min-inline-size: var(--control-h); justify-content: center; background: none; border: 0; font-size: var(--text-xl); cursor: pointer; }
@media (min-width: 48em) {
  .desktop-only { display: flex; }
  .mobile-only { display: none; }
}
@media (min-width: 64em) {
  .home-hero { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); }
  .hero-copy { padding-inline-start: var(--sp-8); }
}
@media (min-width: 80em) {
  .pillars-grid { grid-template-columns: repeat(5, 1fr); }
}

/* ---------- S5–S7 pillar utilities ---------- */
.chip { display: inline-flex; align-items: center; justify-content: center; min-block-size: var(--control-h); padding: var(--control-pad-block) var(--control-pad-inline); border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-text); text-decoration: none; line-height: var(--control-line); font-size: var(--text-sm); transition: border-color var(--motion), color var(--motion); }
.chip:hover { border-color: var(--color-primary); color: var(--color-primary-text); }
.chip-current { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-on-primary); }
.path-step { display: inline-flex; align-items: center; gap: var(--sp-2); }
.step { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-1); min-block-size: var(--control-h); padding: var(--control-pad-block) var(--sp-3); border-radius: var(--radius-sm); border: 1px solid var(--color-border); text-decoration: none; line-height: var(--control-line); color: var(--color-text); font-size: var(--text-sm); background: var(--color-surface); }
.step-current { background: var(--color-primary); color: var(--color-on-primary); border-color: var(--color-primary); }
.module-empty { font-style: italic; }

/* ---------- path-strip (lesson reader learning-path navigation) ----------
   Markup: <ol class="path-strip"> > <li class="path-step"> > .step /
   .step-current. RTL order = path order; gap only (no connectors — lines
   look broken when the strip wraps). */
.path-strip {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
}
.path-step { display: inline-flex; align-items: center; }
.preview-banner,
.prereq-banner {
  border-inline-start: 3px solid var(--color-warning);
  background: var(--tint-warning);
  color: var(--color-warning);
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--radius-md);
  margin: 0;
}

/* S7 philosophers */
.related-phil { margin: 0; padding: 0; list-style: none; }
.ph-portrait { inline-size: 72px; block-size: 72px; object-fit: cover; border-radius: var(--radius-md); flex-shrink: 0; }
.ph-portrait-lg { inline-size: 104px; block-size: 104px; }
.ph-original { font-weight: 400; color: var(--color-text-secondary); font-size: 0.75em; }
/* the detail header keeps the name/meta block beside the portrait: a long meta
   line (Latin original name + Persian years + era) must wrap inside its own
   column, never push the whole block below the image (.row wraps globally) */
.ph-header .row { flex-wrap: nowrap; }
.ph-header .row > div { min-inline-size: 0; }

/* philosophers directory (/philosophers/): compact masthead + filter panel
   beside the card grid. The reference layout puts the panel on the inline
   start side of an RTL page — DOM order does that, no row-reverse. */
/* the reference page is wider than the reading container: the directory is a
   3-column card grid with its own sidebar, so at 68rem it wasted a good third of
   a wide screen. 90rem keeps the panel-plus-three-cards row honest; the 94%
   floor stops the outer margins growing with the viewport (reference keeps
   ~10% on each side at 1920). */
.page-philosophers-list .site-main { max-inline-size: min(90rem, 94%); }
.page-philosophers-list .ph-hero { display: grid; gap: var(--sp-4); }
/* phones: the hero is copy only — the reference art is a desktop column */
.page-philosophers-list .ph-hero-art { display: none; }
/* the masthead rule reads as the page's accent line, not the neutral divider */
.page-philosophers-list .hero-rule {
  border-block-start-color: var(--color-terracotta);
  inline-size: 5rem;
  margin-inline: 0 auto;
  margin-block: var(--sp-6) var(--sp-8);
  opacity: 1;
}
.ph-directory { display: grid; gap: var(--sp-6); align-items: start; }
.ph-filters {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--sp-4) var(--sp-4) var(--sp-6);
}
.ph-filters-title { margin: 0 0 var(--sp-4); font-size: var(--text-lg); }
/* mobile-first: below 64em the panel is a disclosure sitting above the grid,
   so the toggle and the collapsed body only exist on small screens — the
   desktop panel is always-open chrome and needs no control to reveal it */
.ph-filters-toggle {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  inline-size: 100%;
  min-block-size: var(--control-h);
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-text);
  font-family: inherit;
  font-size: var(--text-lg);
  font-weight: 700;
  cursor: pointer;
}
.ph-filters-count {
  padding-block: 1px;
  padding-inline: var(--sp-2);
  border-radius: var(--radius-sm);
  background: var(--color-primary);
  color: var(--color-on-primary);
  font-size: var(--text-xs);
  font-weight: 700;
}
.ph-filters-caret {
  inline-size: 0.5rem;
  block-size: 0.5rem;
  margin-inline-start: auto;
  /* inline-start + block-end borders are the bottom-right corner under RTL,
     which reads as a downward chevron once rotated; inline-end would point
     sideways instead */
  border-inline-start: 2px solid currentColor;
  border-block-end: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--motion);
}
.ph-filters-toggle[aria-expanded="true"] .ph-filters-caret { transform: rotate(-135deg); }
.ph-filters-body { display: none; padding-block-start: var(--sp-3); }
/* open on a phone the panel is a disclosure, not a column: cap its height and
   scroll inside it, or the 16-row school list pushes the grid off screen */
.ph-filters-body.is-open {
  display: block;
  max-block-size: min(70vh, 26rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-inline-end: var(--sp-2);
}
.ph-filters-title { display: none; }
/* the filter row is a vertical panel here, not the horizontal bar other
   listings use — the .filter-bar contract class stays on the form */
.ph-filters .filter-bar { flex-direction: column; align-items: stretch; margin-block-end: 0; }
.ph-filters .filter-field { flex: 0 1 auto; }
/* a five-option group reads better as visible radio rows than as a dropdown:
   the chosen state stays on screen while the user scans the grid */
.filter-group { display: grid; gap: var(--sp-1); border: 0; margin: 0; padding: 0; }
/* the school list is as long as the vocabulary: a bounded, scrollable box keeps
   the panel from towering over the grid and replaces the native select popup,
   which arrived as an OS-styled list with no relation to the page */
.filter-group-scroll { max-block-size: 11rem; overflow-y: auto; overscroll-behavior: contain; padding-inline-end: var(--sp-1); }
.filter-legend { padding: 0; font-size: var(--text-sm); font-weight: 600; color: var(--color-text-secondary); }
.filter-option {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding-block: var(--sp-2);
  padding-inline: var(--sp-2);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  cursor: pointer;
  transition: border-color var(--motion), background var(--motion), color var(--motion);
}
.filter-option:hover { border-color: var(--color-border); background: var(--color-surface-muted); }
.filter-option:focus-within { outline: var(--focus-ring); outline-offset: -1px; }
.filter-option:has(:checked) {
  border-color: var(--color-primary);
  background: color-mix(in oklab, var(--color-primary) 8%, var(--color-surface));
  color: var(--color-primary-text);
  font-weight: 600;
}
.filter-option input { accent-color: var(--color-primary); }
.ph-clear { display: inline-block; margin-block-start: var(--sp-3); color: var(--color-primary-text); font-size: var(--text-sm); font-weight: 600; }
.ph-clear:hover { text-decoration: underline; }
.ph-results { display: grid; gap: var(--sp-4); min-inline-size: 0; }
/* one row under the grid: the count sits at the inline-start and the shared
   pager at the inline-end, so the two stay on the same baseline. */
.ph-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-2) var(--sp-3); }
.ph-count { margin: 0; color: var(--color-text-secondary); font-size: var(--text-sm); }
.ph-active { display: flex; flex-wrap: wrap; gap: var(--sp-1); list-style: none; margin: 0; padding: 0; }
.ph-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding-block: 2px;
  padding-inline: var(--sp-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text-secondary);
  font-size: var(--text-xs);
  text-decoration: none;
  transition: border-color var(--motion), color var(--motion);
}
.ph-chip:hover { border-color: var(--color-primary); color: var(--color-primary-text); }
/* the shared .pagination component keeps its geometry; only the page-scoped
   paint changes, so every other listing keeps the default look */
.page-philosophers-list .page-links a,
.page-philosophers-list .page-links strong {
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  box-shadow: none;
  transition: border-color var(--motion), color var(--motion);
}
.page-philosophers-list .page-links a:hover { border-color: var(--color-primary); color: var(--color-primary-text); }
/* the shared component paints the current page as a filled primary chip; the
   flat outline here needs its own colours — leaving color: on-primary on a
   white surface made the current page number invisible */
.page-philosophers-list .page-links strong {
  border-color: var(--color-primary);
  background: var(--color-surface);
  color: var(--color-primary-text);
}
.ph-directory-grid { margin: 0; padding: 0; list-style: none; grid-template-columns: 1fr; gap: var(--sp-6) var(--sp-4); }

/* the directory card is its own component, not the generic .card: it is one
   whole-card link (single tab stop, no nested anchors) over a fixed-ratio
   portrait, with the CTA pinned to the bottom so a row keeps one baseline */
.ph-entry { display: grid; }
.ph-entry-link {
  display: grid;
  block-size: 100%;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  color: var(--color-text);
  text-decoration: none;
  transition: border-color var(--motion);
}
.ph-entry-link:hover { border-color: var(--color-primary); }
.ph-entry-link:focus-visible { outline: 2px solid var(--color-primary-text); outline-offset: 2px; }
/* the fixed ratio lives on the media box and the image is taken out of flow:
   a 100%-height image would otherwise resolve the box height from its own
   intrinsic ratio (portraits are 5:6), so real and placeholder cards — and
   the whole grid — would reflow differently. 21/9 is the wide banner crop of
   the reference design, so `object-fit: cover` trims the tall uploads. */
.ph-entry-media { position: relative; display: grid; place-items: center; align-self: start; aspect-ratio: 21 / 9; border: 1px dashed var(--color-border-strong); background: color-mix(in oklab, var(--color-surface-muted) 82%, var(--color-surface)); }
.ph-entry-img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; }
.ph-entry-img-default { inline-size: auto; block-size: 62%; margin: auto; aspect-ratio: 1; }
.ph-entry-body { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-4); }
.ph-entry-name { font-size: var(--text-lg); font-weight: 700; line-height: var(--leading-tight); }
.ph-entry-meta { display: flex; flex-wrap: wrap; gap: 0 var(--sp-2); font-size: var(--text-sm); color: var(--color-text-secondary); }
.ph-entry-years { white-space: nowrap; }
.ph-entry-tags { display: flex; flex-wrap: wrap; gap: var(--sp-1); }
.ph-tag {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding-inline: var(--sp-2);
  padding-block: 1px;
  background: var(--color-surface-muted);
  color: var(--color-text-secondary);
  font-size: var(--text-xs);
  line-height: 1.7;
}
/* the arrow badge rides the tag row at the inline-end (reference mockup). It is a
   span, not a control: the whole card is one link, so a nested button would add a
   second tab stop and an invalid click target. */
.ph-entry-foot { display: flex; align-items: center; gap: var(--sp-2); margin-block-start: auto; padding-block-start: var(--sp-2); }
.ph-entry-go {
  flex-shrink: 0;
  margin-inline-start: auto;
  display: grid;
  place-items: center;
  inline-size: 2.25rem;
  block-size: 2.25rem;
  border: 1px solid var(--color-border-strong);
  border-radius: 50%;
  color: var(--color-primary-text);
  transition: background var(--motion), border-color var(--motion), color var(--motion);
}
/* chevron built from two logical borders, same recipe as the filter caret:
   the bottom-inline-start corner rotated 135deg points at the inline-end. */
.ph-entry-go::before { content: ""; inline-size: 0.4rem; block-size: 0.4rem; border-block-end: 2px solid currentColor; border-inline-start: 2px solid currentColor; transform: rotate(135deg); }
.ph-entry-link:hover .ph-entry-go { border-color: var(--color-primary); background: var(--color-primary); color: var(--color-on-primary); }
@media (min-width: 40em) {
  .ph-directory-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 64em) {
  /* the hero mirrors the directory grid: art over the filter column, copy over
     the cards column, so the title lines up with the first card's edge */
  .page-philosophers-list .ph-hero { grid-template-columns: 18rem minmax(0, 1fr); gap: var(--sp-6); align-items: center; }
  .page-philosophers-list .ph-hero-art { position: relative; display: grid; place-items: center; }
  /* filled disc behind the bust, as in the reference; the 64x84 source is drawn
     at 9rem so the upscale stays mild */
  .page-philosophers-list .ph-hero-art::before { content: ""; position: absolute; inline-size: 7.5rem; block-size: 7.5rem; border-radius: 50%; background: color-mix(in oklab, var(--color-terracotta) 15%, transparent); }
  .page-philosophers-list .ph-hero-art-img { position: relative; block-size: 9rem; inline-size: auto; max-inline-size: 100%; object-fit: contain; }
  .ph-directory { grid-template-columns: 18rem minmax(0, 1fr); }
  /* side by side from here on: the panel is never collapsed and the heading
     replaces the toggle */
  .ph-filters-title { display: block; }
  .ph-filters-toggle { display: none; }
  .ph-filters-body,
  .ph-filters-body.is-open { display: block; padding-block-start: 0; max-block-size: none; overflow: visible; padding-inline-end: 0; }
}
/* three columns only once the panel has left the row enough width (>=80em:
   ~285px per card) — 64em would squeeze cards under 200px */
@media (min-width: 80em) {
  .ph-directory-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* philosopher profile (/philosophers/<slug>/): the reference template is a
   two-column reading page — the hero and tabbed panels share the wide reading
   column, the portrait/facts card sits on the inline-end edge. DOM order is
   hero → card → panels so phones and screen readers get the title first; the
   grid areas only move the card beside the reading column on desktop. */
.page-philosophers-detail {
  /* page-local elevation/radius: the profile cards are the one place in the
     public UI that reads as a sheet of paper on the desk, not a folio band */
  --ph-radius: 10px;
  --ph-side-w: 21rem;
  --ph-shadow: 0 18px 44px color-mix(in oklab, var(--color-navy) 8%, transparent);
  --ph-tint: color-mix(in oklab, var(--color-primary) 8%, var(--color-surface));
}
.page-philosophers-detail .site-main { max-inline-size: 100%; padding-block-start: 0; }
/* the profile is the wide editorial surface; the shared masthead stretches to
   the same measure so the brand does not float in a narrower box above it */
.page-philosophers-detail .site-header .site-nav { max-inline-size: 100%; }

/* line-icon plumbing (sprite is inlined once per profile page) */
.ph-icon-sprite { position: absolute; inline-size: 0; block-size: 0; overflow: hidden; }
.ph-icon { inline-size: 1.15em; block-size: 1.15em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ph-btn-icon { inline-size: 1.1rem; block-size: 1.1rem; }

.ph-layout { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "hero" "side" "body"; row-gap: var(--sp-6); padding-block: var(--sp-6) var(--sp-12); }
.ph-hero { grid-area: hero; position: relative; isolation: isolate; min-inline-size: 0; padding-block: var(--sp-2) var(--sp-6); }
.ph-hero-wash { position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(72% 130% at 74% 18%, color-mix(in oklab, var(--color-primary) 6%, transparent), transparent 68%); }
/* the portrait is reused as a large archival wash on the inline-start edge;
   the mask fades it into the paper so the title never fights the face */
.ph-hero-art { position: absolute; inset-block: 0; inset-inline-start: 0; inline-size: 58%; z-index: 0; overflow: hidden; pointer-events: none; mask-image: linear-gradient(to left, rgb(0 0 0) 26%, transparent 86%); -webkit-mask-image: linear-gradient(to left, rgb(0 0 0) 26%, transparent 86%); }
.ph-hero-art-img { inline-size: 100%; block-size: 100%; object-fit: cover; object-position: top center; filter: sepia(0.3) saturate(0.7) contrast(1.05); opacity: 0.14; }
.ph-hero-art-seal { display: grid; place-items: center; mask-image: none; -webkit-mask-image: none; }
.ph-hero-monogram { font-size: 8rem; font-weight: 900; line-height: 1; color: color-mix(in oklab, var(--color-primary) 22%, transparent); }
.ph-hero-inner { position: relative; z-index: 2; }
/* the portrait wash and the warm tint end at a hairline in the reference;
   this soft floor keeps the hero from cutting the image with a hard edge */
.ph-hero::after { content: ""; position: absolute; inset-inline: 0; inset-block-end: 0; z-index: 1; block-size: 5rem; background: linear-gradient(to top, var(--color-background), transparent); pointer-events: none; }
.ph-hero .breadcrumbs { margin-block-end: var(--sp-6); font-size: var(--text-xs); }
.ph-hero-copy { max-inline-size: 48rem; margin-inline: 0; text-align: start; }
.ph-hero-name { margin: 0; font-size: clamp(2.2rem, 3.5vw, 2.9rem); font-weight: 800; line-height: 1.35; }
.ph-hero-name .ph-original { font-size: 0.5em; font-weight: 500; color: var(--color-text-secondary); white-space: nowrap; }
.ph-hero-meta { margin: var(--sp-2) 0 0; color: var(--color-text-secondary); font-size: var(--text-sm); }
.ph-hero-lead { max-inline-size: 56ch; margin: var(--sp-3) 0 0; color: var(--color-text-secondary); font-size: 1.02rem; line-height: 2; }
.ph-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); justify-content: flex-start; list-style: none; margin: var(--sp-4) 0 0; padding: 0; }
.ph-hero-chip { border-color: transparent; background: color-mix(in oklab, var(--color-primary) 7%, var(--color-surface)); color: var(--color-text-secondary); font-size: var(--text-xs); }
.ph-hero-chip:hover { border-color: var(--color-primary); color: var(--color-primary-text); }

.ph-side { grid-area: side; align-self: start; min-inline-size: 0; }
.ph-side-card { display: grid; gap: var(--sp-4); padding: var(--sp-3); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--ph-radius); box-shadow: var(--ph-shadow); }
.ph-side-portrait { margin: 0; align-self: start; aspect-ratio: 4 / 3; overflow: hidden; border-radius: calc(var(--ph-radius) - 3px); background: var(--color-surface-muted); }
.ph-side-portrait img { inline-size: 100%; block-size: 100%; object-fit: cover; object-position: center 22%; }
.ph-side-portrait .ph-side-portrait-default { object-fit: contain; padding: var(--sp-6); }
.ph-side-actions { display: grid; gap: var(--sp-2); }
.ph-side-actions > a,
.ph-side-actions > form,
.ph-side-actions .btn,
.ph-side-actions .bookmark-btn,
.ph-side-actions .bookmark-btn .btn { inline-size: 100%; }
.ph-side-actions .bookmark-btn .btn { justify-content: center; }
.ph-side-actions .bookmark-btn .text-meta { margin-inline-start: var(--sp-1); }
.ph-side-actions .btn-primary { gap: var(--sp-2); }
.ph-facts { margin: 0; display: grid; }
.ph-fact { display: grid; gap: var(--sp-1); padding-block: var(--sp-3); border-block-start: 1px solid color-mix(in oklab, var(--color-border) 65%, transparent); }
.ph-fact:first-child { border-block-start: 0; padding-block-start: var(--sp-1); }
.ph-fact-label { display: flex; align-items: center; gap: var(--sp-3); color: var(--color-text-muted); font-size: var(--text-xs); line-height: 1.8; }
.ph-fact-icon { display: grid; place-items: center; flex: none; inline-size: 1.35rem; block-size: 1.35rem; }
.ph-fact-icon .ph-icon { inline-size: 1.25rem; block-size: 1.25rem; stroke-width: 1.4; }
.ph-fact-value { margin: 0; margin-inline-start: calc(1.35rem + var(--sp-3)); color: var(--color-text); font-size: var(--text-sm); font-weight: 600; line-height: 1.9; }
.ph-fact-value a { color: inherit; text-decoration: none; border-block-end: 1px solid transparent; transition: color var(--motion), border-color var(--motion); }
.ph-fact-value a:hover { color: var(--color-primary-text); border-block-end-color: currentColor; }
.ph-note { padding: var(--sp-4); border-radius: var(--ph-radius); background: var(--color-surface-muted); }
.ph-note-label { margin: 0 0 var(--sp-1); color: var(--color-primary-text); font-size: var(--text-xs); font-weight: 700; }
.ph-note-text { margin: 0; color: var(--color-text); font-size: 0.95rem; line-height: 1.95; }

.ph-body { grid-area: body; min-inline-size: 0; }
.ph-tabs { display: flex; flex-wrap: wrap; align-items: stretch; gap: 0 var(--sp-4); border-block-end: 1px solid var(--color-border); }
.ph-tab { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); min-block-size: var(--control-h); padding-block: var(--sp-2); margin-block-end: -1px; border-block-end: 2px solid transparent; color: var(--color-text-secondary); font-size: 0.92rem; font-weight: 600; text-decoration: none; transition: color var(--motion), border-color var(--motion); }
.ph-tab:hover { color: var(--color-primary-text); }
.ph-tab.is-active { color: var(--color-primary-text); border-block-end-color: var(--color-primary); }
.ph-tab-icon { inline-size: 1.05rem; block-size: 1.05rem; color: var(--color-text-muted); transition: color var(--motion); }
.ph-tab:hover .ph-tab-icon,
.ph-tab.is-active .ph-tab-icon { color: currentColor; }

.ph-panels { display: grid; gap: var(--sp-8); padding-block-start: var(--sp-6); }
.ph-panel { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--ph-radius); padding: var(--sp-6); scroll-margin-block-start: var(--sp-4); box-shadow: 0 8px 24px color-mix(in oklab, var(--color-navy) 4%, transparent); }
.ph-panel-title { display: flex; align-items: center; gap: var(--sp-2); margin: 0 0 var(--sp-3); font-size: 1.3rem; font-weight: 700; line-height: 1.5; }
.ph-panel-title::before { content: ""; inline-size: 3px; block-size: 1.05em; border-radius: 2px; background: var(--color-primary); }
.ph-intro { display: grid; gap: var(--sp-6); }
.ph-intro-copy { display: grid; align-content: start; min-inline-size: 0; }
.ph-intro-text { margin: 0; color: var(--color-text-secondary); font-size: 0.98rem; line-height: 2; }
.ph-intro-cta { justify-self: start; display: inline-flex; align-items: center; gap: var(--sp-2); min-block-size: var(--control-h); margin-block-start: var(--sp-4); padding-inline: var(--sp-4); border-radius: var(--radius-sm); background: var(--ph-tint); color: var(--color-primary-text); font-size: var(--text-sm); font-weight: 600; text-decoration: none; transition: background var(--motion), color var(--motion); }
.ph-intro-cta:hover { background: color-mix(in oklab, var(--color-primary) 15%, var(--color-surface)); color: var(--color-primary-hover); }
.ph-intro-art { position: relative; display: grid; place-items: center; align-self: stretch; min-block-size: 12rem; inline-size: 100%; overflow: hidden; border: 1px solid var(--color-border); border-radius: calc(var(--ph-radius) - 2px); background: radial-gradient(90% 120% at 50% 100%, color-mix(in oklab, var(--color-primary) 10%, var(--color-surface-muted)), var(--color-surface-muted)); }
.ph-intro-art::before { content: ""; position: absolute; inset-block: 24% 0; inset-inline: 22%; border: 1px solid color-mix(in oklab, var(--color-primary) 28%, transparent); border-block-end: 0; border-radius: 50% 50% 0 0 / 38% 38% 0 0; }
.ph-intro-monogram { position: relative; font-size: 4rem; font-weight: 800; line-height: 1; color: color-mix(in oklab, var(--color-primary-text) 46%, transparent); }
.ph-intro-caption { position: absolute; inset-block-end: var(--sp-2); inset-inline: 0; text-align: center; color: var(--color-text-muted); font-size: var(--text-xs); }
.ph-bio .prose { margin-inline: 0 auto; }
.ph-bio .ph-panel-title { margin-block-end: var(--sp-4); }

.ph-section { display: grid; gap: var(--sp-4); scroll-margin-block-start: var(--sp-4); }
.ph-section-band { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-2) var(--sp-4); }
.ph-section-title { display: flex; align-items: center; gap: var(--sp-2); margin: 0; font-size: 1.3rem; font-weight: 700; line-height: 1.6; }
.ph-section-title::before { content: "✦"; color: var(--color-primary); font-size: 0.75em; }
.ph-more { display: inline-flex; align-items: center; gap: var(--sp-1); min-block-size: var(--control-h); color: var(--color-primary-text); font-size: var(--text-sm); font-weight: 600; text-decoration: none; }
.ph-more:hover { color: var(--color-primary-hover); }
.ph-more .ph-icon { inline-size: 1rem; block-size: 1rem; }
.ph-topic-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); list-style: none; margin: 0; padding: 0; }
.ph-topic-card { display: grid; grid-template-rows: auto auto 1fr; justify-items: center; align-content: start; gap: var(--sp-2); block-size: 100%; padding: var(--sp-6) var(--sp-4) var(--sp-4); text-align: center; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--ph-radius); color: var(--color-text); text-decoration: none; box-shadow: 0 8px 24px color-mix(in oklab, var(--color-navy) 4%, transparent); transition: border-color var(--motion), transform var(--motion); }
.ph-topic-card:hover { border-color: var(--color-primary); transform: translateY(-2px); }
.ph-topic-icon { display: grid; place-items: center; inline-size: 2.5rem; block-size: 2.5rem; color: var(--color-primary-text); }
.ph-topic-icon .ph-icon { inline-size: 1.55rem; block-size: 1.55rem; stroke-width: 1.35; }
.ph-topic-grid > li:nth-child(4n + 1) .ph-topic-icon { color: var(--color-sage); }
.ph-topic-grid > li:nth-child(4n + 2) .ph-topic-icon { color: var(--color-info); }
.ph-topic-grid > li:nth-child(4n + 3) .ph-topic-icon { color: var(--color-gold-text); }
.ph-topic-grid > li:nth-child(4n + 4) .ph-topic-icon { color: var(--color-primary-text); }
.ph-topic-name { font-size: 1rem; font-weight: 700; line-height: 1.7; }
.ph-topic-desc { color: var(--color-text-secondary); font-size: var(--text-xs); line-height: 1.9; }
.ph-article-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); list-style: none; margin: 0; padding: 0; }
.ph-article-card { display: grid; grid-template-columns: minmax(0, 1fr) 5.25rem; align-items: center; gap: var(--sp-3); block-size: 100%; padding: var(--sp-2); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--ph-radius); color: var(--color-text); text-decoration: none; box-shadow: 0 8px 24px color-mix(in oklab, var(--color-navy) 4%, transparent); transition: border-color var(--motion), transform var(--motion); }
.ph-article-card:hover { border-color: var(--color-primary); }
.ph-article-art { display: grid; place-items: center; aspect-ratio: 1; overflow: hidden; border-radius: calc(var(--ph-radius) - 4px); background: radial-gradient(100% 100% at 30% 20%, color-mix(in oklab, var(--color-primary) 12%, var(--color-surface-muted)), var(--color-surface-muted)); }
.ph-article-art-photo img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.ph-article-glyph { font-size: 1.7rem; font-weight: 800; line-height: 1; color: color-mix(in oklab, var(--color-primary-text) 55%, transparent); }
.ph-article-art-work { color: var(--color-primary-text); background: var(--color-surface-muted); }
.ph-article-art-work .ph-icon { inline-size: 1.4rem; block-size: 1.4rem; }
.ph-article-body { display: grid; gap: var(--sp-2); align-content: center; min-inline-size: 0; }
.ph-article-title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; font-size: 0.92rem; font-weight: 700; line-height: 1.8; }
.ph-article-body .badge { justify-self: start; font-size: 0.7rem; }
.ph-peer-list { display: flex; flex-wrap: wrap; gap: var(--sp-2); list-style: none; margin: 0; padding: 0; }

@media (min-width: 40em) {
  .ph-hero-copy { margin-inline: auto; text-align: center; }
  .ph-chips { justify-content: center; }
  .ph-hero { padding-block-start: var(--sp-4); }
  .ph-hero-art { inline-size: 46%; }
  .ph-hero-art-img { opacity: 0.22; }
  /* tablet: the card is wide enough to put the portrait beside the facts
     instead of stacking a 700px-tall portrait above them */
  .ph-side-card { grid-template-columns: 15rem minmax(0, 1fr); grid-template-areas: "portrait actions" "portrait facts" "portrait note"; align-items: start; }
  .ph-side-portrait { grid-area: portrait; }
  .ph-side-actions { grid-area: actions; align-self: start; }
  .ph-facts { grid-area: facts; }
  .ph-note { grid-area: note; }
  .ph-topic-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ph-article-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 48em) {
  .page-philosophers-detail .site-main,
  .page-philosophers-detail .site-header .site-nav { max-inline-size: min(85rem, 94%); }
  /* 48–63em cannot fit the six-item masthead: use the drawer instead of
     letting the brand and nav wrap into three lines */
  .page-philosophers-detail .desktop-only { display: none; }
  .page-philosophers-detail .mobile-only { display: block; }
}
@media (min-width: 64em) {
  .page-philosophers-detail .desktop-only { display: flex; }
  .page-philosophers-detail .mobile-only { display: none; }
  .ph-layout { grid-template-columns: minmax(0, 1fr) var(--ph-side-w); grid-template-areas: "hero side" "body side"; column-gap: var(--sp-6); row-gap: 0; }
  .ph-side { position: sticky; inset-block-start: var(--sp-4); }
  .ph-side-card { grid-template-columns: minmax(0, 1fr); grid-template-areas: "portrait" "actions" "facts" "note"; }
  .ph-hero { padding-block: var(--sp-2) var(--sp-8); }
  .ph-hero-art { inline-size: 38%; }
  .ph-hero-art-img { opacity: 0.28; }
  .ph-hero .breadcrumbs { margin-block-end: var(--sp-6); }
  .ph-tabs { justify-content: space-between; gap: var(--sp-2); }
}
@media (min-width: 72em) {
  /* only the full reading column can carry the reference's 3/4-up card rows */
  .ph-topic-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ph-article-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 80em) {
  /* the 2-up intro card needs ~440px of copy before the 17rem image; below
     that the text collapses into a narrow column of one-word lines */
  .ph-intro { grid-template-columns: minmax(0, 1fr) 17rem; align-items: center; padding: var(--sp-6) var(--sp-8); }
  .ph-intro-cta { justify-self: end; }
}
@media (min-width: 64em) and (max-height: 60em) {
  /* a tall card pinned on a short viewport loses its lower half — let it scroll
     with the page there instead of sticking */
  .ph-side { position: static; }
}

/* S8 children landing — paper-cut hero, filter tabs, age + activity cards.
   Page-scoped 12px sheet radius and one soft shadow (the reference's playful
   cards); controls stay on --radius-sm/44px. Logical properties only. */
.kids-landing {
  --kids-radius: 12px;
  --kids-shadow: 0 12px 30px color-mix(in oklab, var(--color-navy) 6%, transparent);
  --kids-hero-bg: color-mix(in oklab, var(--color-cream) 72%, var(--color-background));
  max-inline-size: 100%;
  margin-inline: auto;
}
/* landing-only width and top padding; the other children pages keep the
   shared reading container */
.page-children:has(.kids-landing) .site-main { padding-block-start: 0; }

.kids-icon-sprite { position: absolute; inline-size: 0; block-size: 0; overflow: hidden; }
.kids-icon { inline-size: 1.15em; block-size: 1.15em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.kids-hero { position: relative; isolation: isolate; padding-block: var(--sp-6) 0; }
/* the band is a full-bleed paper sky; the shadow paints the horizontal bleed
   without changing layout width, and the clip keeps it from leaking vertically */
.kids-hero-band { position: absolute; inset-block: 0; inset-inline: 0; z-index: 0; background: var(--kids-hero-bg); box-shadow: 0 0 0 100vmax var(--kids-hero-bg); clip-path: inset(0 -100vmax); pointer-events: none; }
.kids-hero-band::before { content: ""; position: absolute; inset: 0; background: radial-gradient(50% 80% at 12% 100%, color-mix(in oklab, var(--color-sage) 12%, transparent), transparent 72%), radial-gradient(46% 70% at 92% 110%, color-mix(in oklab, var(--color-primary) 7%, transparent), transparent 74%), radial-gradient(34% 54% at 82% 12%, color-mix(in oklab, var(--color-gold) 15%, transparent), transparent 72%); }
.kids-cloud { position: absolute; z-index: 1; inline-size: 4.5rem; block-size: 1.25rem; border-radius: 999px; background: color-mix(in oklab, var(--color-white) 56%, transparent); opacity: 0.6; }
.kids-cloud::before, .kids-cloud::after { content: ""; position: absolute; border-radius: 50%; background: inherit; }
.kids-cloud::before { inset-block-end: 0.2rem; inset-inline-start: 0.9rem; inline-size: 2.2rem; block-size: 2.2rem; }
.kids-cloud::after { inset-block-end: 0.35rem; inset-inline-start: 2.7rem; inline-size: 1.5rem; block-size: 1.5rem; }
.kids-cloud-a { inset-block-start: 2.25rem; inset-inline-start: 5%; }
.kids-cloud-b { inset-block-start: 1.2rem; inset-inline-end: 13%; opacity: 0.45; inline-size: 3.6rem; display: none; }
.kids-cloud-c { inset-block-start: 5.5rem; inset-inline-start: 40%; opacity: 0.32; inline-size: 3rem; display: none; }

.kids-hero-inner { position: relative; z-index: 2; display: grid; gap: var(--sp-6); padding-block: var(--sp-2) var(--sp-6); }
.kids-hero-copy { max-inline-size: 40rem; }
.kids-hero-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-1) var(--sp-4); margin-block-end: var(--sp-2); }
.kids-hero .breadcrumbs { margin-block-end: 0; font-size: var(--text-xs); }
.kids-hero h1 { margin: 0; font-size: clamp(2.2rem, 4.3vw, 2.9rem); font-weight: 800; line-height: 1.35; }
.kids-hero-lead { max-inline-size: 48ch; margin: var(--sp-3) 0 0; color: var(--color-text-secondary); font-size: 1.02rem; line-height: 2; }
.kids-hero-guide { display: inline-flex; align-items: center; gap: var(--sp-1); min-block-size: 2.5rem; margin: 0; color: var(--color-primary-text); font-size: var(--text-xs); font-weight: 600; text-decoration: none; }
.kids-hero-guide:hover { color: var(--color-primary-hover); text-decoration: underline; text-underline-offset: 4px; }
.kids-hero-guide .kids-icon { inline-size: 0.9rem; block-size: 0.9rem; }
.kids-hero-art { display: block; align-self: end; aspect-ratio: 16 / 9; margin-block-start: var(--sp-4); border: 1px dashed var(--color-border-strong); border-radius: 14px; background: color-mix(in oklab, var(--color-surface) 35%, transparent); }
.kids-scene { display: block; inline-size: 100%; block-size: auto; }

.kids-scene-sun { fill: color-mix(in oklab, var(--color-gold) 46%, transparent); }
.kids-scene-cloud { fill: color-mix(in oklab, var(--color-white) 58%, transparent); }
.kids-scene-cloud-soft { opacity: 0.65; }
.kids-scene-hill-back { fill: color-mix(in oklab, var(--color-sage) 16%, transparent); }
.kids-scene-hill-front { fill: color-mix(in oklab, var(--color-primary) 8%, var(--color-surface-muted)); }
.kids-scene-shadow { fill: color-mix(in oklab, var(--color-navy) 9%, transparent); }
.kids-scene-book-1 { fill: var(--color-info); }
.kids-scene-book-2 { fill: var(--color-primary); }
.kids-scene-book-3 { fill: var(--color-sage); }
.kids-scene-pages { fill: var(--color-surface); }
.kids-scene-line { fill: none; stroke: color-mix(in oklab, var(--color-navy) 35%, transparent); stroke-width: 2; stroke-linecap: round; }
.kids-scene-stem { fill: none; stroke: var(--color-sage); stroke-width: 2.5; stroke-linecap: round; }
.kids-scene-leaf { fill: color-mix(in oklab, var(--color-sage) 82%, var(--color-navy)); }
.kids-scene-boat { fill: var(--color-surface); stroke: var(--color-border-strong); stroke-width: 1.7; stroke-linejoin: round; }

.kids-tabs { position: relative; z-index: 3; display: flex; flex-wrap: nowrap; gap: 0.4rem; padding-block: var(--sp-1) var(--sp-3); overflow-x: auto; overscroll-behavior-inline: contain; scrollbar-width: none; mask-image: linear-gradient(to left, rgb(0 0 0) 92%, transparent); -webkit-mask-image: linear-gradient(to left, rgb(0 0 0) 92%, transparent); }
.kids-tabs::-webkit-scrollbar { display: none; }
.kids-tab { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 0.4rem; min-block-size: var(--control-h); padding: 0 0.75rem; border: 1px solid var(--color-border); border-radius: 10px; background: var(--color-surface); color: var(--color-text); font-size: 0.82rem; font-weight: 600; text-decoration: none; box-shadow: 0 4px 14px color-mix(in oklab, var(--color-navy) 4%, transparent); transition: border-color var(--motion), color var(--motion), background var(--motion), transform var(--motion); }
.kids-tab:hover { border-color: var(--color-primary); color: var(--color-primary-text); transform: translateY(-1px); }
.kids-tab.is-current { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-on-primary); }
.kids-tab-icon { inline-size: 1.15rem; block-size: 1.15rem; color: var(--color-text-muted); }
.kids-tab.is-current .kids-tab-icon { color: currentColor; }

.kids-section { padding-block-start: 2.5rem; }
.kids-ages { padding-block-start: 2.25rem; }
.kids-latest { padding-block: 2.25rem 3.5rem; }
.kids-section-title { display: flex; align-items: center; gap: var(--sp-2); margin: 0 0 var(--sp-4); font-size: 1.35rem; font-weight: 800; line-height: 1.6; }
.kids-section-band { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-1) var(--sp-4); margin-block-end: var(--sp-4); }
.kids-section-band .kids-section-title { margin-block-end: 0; }
.kids-more { display: inline-flex; align-items: center; gap: var(--sp-1); min-block-size: 2.5rem; color: var(--color-primary-text); font-size: var(--text-xs); font-weight: 600; text-decoration: none; }
.kids-more:hover { color: var(--color-primary-hover); text-decoration: underline; text-underline-offset: 4px; }
.kids-more .kids-icon { inline-size: 1rem; block-size: 1rem; }
.kids-section-mark { display: inline-block; inline-size: 0.55rem; block-size: 0.55rem; border-radius: 50%; background: var(--color-primary); }
.kids-section-mark--spark { background: var(--color-gold); }
.kids-spark-sm { inline-size: 0.85rem; block-size: 0.85rem; }

.kids-age-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); list-style: none; margin: 0; padding: 0; }
.kids-age-card { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 4.75rem; gap: var(--sp-2); align-items: center; min-block-size: 7.25rem; padding: 0.85rem; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--kids-radius); box-shadow: var(--kids-shadow); color: var(--color-text); text-decoration: none; transition: border-color var(--motion), transform var(--motion); }
.kids-age-card:hover { border-color: var(--color-primary); transform: translateY(-2px); }
.kids-age-body { display: grid; align-content: center; gap: 0.3rem; min-inline-size: 0; padding-block-end: 0.9rem; }
.kids-age-label { font-size: 1rem; font-weight: 800; line-height: 1.6; }
.kids-age-desc { color: var(--color-text-secondary); font-size: 0.8rem; line-height: 1.9; }
.kids-age-art { display: grid; place-items: center; inline-size: 4.75rem; block-size: 4.75rem; border: 1px dashed var(--color-border-strong); border-radius: 14px; background: color-mix(in oklab, var(--color-primary) 12%, var(--color-surface)); color: var(--color-primary-text); }
.kids-age-grid > li:nth-child(4n + 2) .kids-age-art { background: color-mix(in oklab, var(--color-info) 12%, var(--color-surface)); color: var(--color-info); }
.kids-age-grid > li:nth-child(4n + 3) .kids-age-art { background: color-mix(in oklab, var(--color-gold) 16%, var(--color-surface)); color: var(--color-gold-text); }
.kids-age-grid > li:nth-child(4n + 4) .kids-age-art { background: color-mix(in oklab, var(--color-sage) 16%, var(--color-surface)); color: var(--color-sage); }
.kids-age-arrow { position: absolute; inset-block-end: 0.65rem; inset-inline-end: 1rem; color: var(--color-primary-text); }

.kids-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); list-style: none; margin: 0; padding: 0; }
.kids-card { display: grid; grid-template-columns: minmax(0, 1fr) 6rem; gap: var(--sp-3); align-items: center; block-size: 100%; padding: 0.6rem; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--kids-radius); box-shadow: var(--kids-shadow); color: var(--color-text); text-decoration: none; transition: border-color var(--motion), transform var(--motion); }
.kids-card:hover { border-color: var(--color-primary); transform: translateY(-2px); }
.kids-card-body { display: grid; align-content: center; gap: 0.4rem; min-inline-size: 0; }
.kids-card-title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; font-size: 0.95rem; font-weight: 800; line-height: 1.8; }
.kids-card-summary { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; color: var(--color-text-secondary); font-size: 0.78rem; line-height: 1.9; }
.kids-card-tags { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-block-start: 0.15rem; }
.kids-tag { display: inline-flex; align-items: center; gap: 0.3rem; min-block-size: 1.75rem; padding-inline: 0.5rem; border: 1px solid var(--color-border); border-radius: 7px; background: var(--color-surface-muted); color: var(--color-text-secondary); font-size: 0.7rem; line-height: 1.6; }
.kids-tag .kids-icon { inline-size: 0.9rem; block-size: 0.9rem; color: var(--color-text-muted); }
.kids-tag--type { border-color: color-mix(in oklab, var(--color-primary) 25%, var(--color-border)); background: color-mix(in oklab, var(--color-primary) 6%, var(--color-surface)); color: var(--color-primary-text); }
.kids-tag--type .kids-icon { color: var(--color-primary-text); }
.kids-card-art { position: relative; display: grid; place-items: center; inline-size: 6rem; block-size: 6rem; overflow: hidden; border: 1px dashed var(--color-border-strong); border-radius: 14px; background: color-mix(in oklab, var(--color-primary) 12%, var(--color-surface-muted)); color: var(--color-primary-text); }
.kids-card-icon { position: relative; inline-size: 2.5rem; block-size: 2.5rem; stroke-width: 1.5; }
.kids-card-art--question { background: color-mix(in oklab, var(--color-info) 12%, var(--color-surface-muted)); color: var(--color-info); }
.kids-card-art--game { background: color-mix(in oklab, var(--color-sage) 15%, var(--color-surface-muted)); color: var(--color-sage); }
.kids-card-art--discussion { background: color-mix(in oklab, var(--color-gold) 17%, var(--color-surface-muted)); color: var(--color-gold-text); }
.kids-card-art--situation { background: color-mix(in oklab, var(--color-primary) 9%, var(--color-surface-muted)); color: var(--color-primary-text); }

/* the landing pager: round numbers, word labels (the shared component keeps
   its chevrons everywhere else) */
.kids-landing .pagination { margin-block-start: var(--sp-8); }
.kids-landing .page-links { align-items: center; gap: 0.3rem; }
.kids-landing .page-links a,
.kids-landing .page-links strong { min-inline-size: var(--control-h); min-block-size: var(--control-h); border: 1px solid var(--color-border); border-radius: 50%; background: var(--color-surface); color: var(--color-text); font-size: var(--text-sm); box-shadow: none; }
.kids-landing .page-links strong { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-on-primary); }
.kids-landing .page-links a:hover { border-color: var(--color-primary); color: var(--color-primary-text); background: var(--color-surface); }
.kids-landing .page-links .page-prev,
.kids-landing .page-links .page-next { min-inline-size: auto; padding-inline: var(--sp-3); border-radius: 8px; }
.kids-landing .page-word { font-size: var(--text-xs); font-weight: 600; }

@media (min-width: 40em) {
  .kids-age-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kids-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 48em) {
  .kids-landing { max-inline-size: 100%; }
  /* the six-item masthead cannot fit 48–63em: use the shared drawer there */
  .page-children .desktop-only { display: none; }
  .page-children .mobile-only { display: block; }
  .kids-hero { padding-block-start: var(--sp-4); }
  .kids-hero-inner { grid-template-columns: minmax(0, 1fr) 18rem; align-items: end; gap: var(--sp-4); padding-block: var(--sp-2) var(--sp-8); padding-inline: var(--sp-2); }
  .kids-hero-art { display: block; aspect-ratio: 4 / 3; margin-block-start: 0; }
  .kids-cloud-b,
  .kids-cloud-c { display: block; }
  /* the five tabs fit from here; drop the scroll fade */
  .kids-tabs { mask-image: none; -webkit-mask-image: none; }
}
@media (min-width: 64em) {
  .page-children .desktop-only { display: flex; }
  .page-children .mobile-only { display: none; }
  .kids-hero-band { inset-block-end: 1.75rem; }
  .kids-hero-inner { grid-template-columns: minmax(0, 1fr) 24rem; gap: var(--sp-8); padding-block: var(--sp-2) 1.5rem; padding-inline: var(--sp-4); }
  .kids-hero-copy { margin-inline-start: 3rem; }
  .kids-hero h1 { font-size: clamp(2.4rem, 4.6vw, 2.7rem); }
  .kids-tabs { justify-content: center; overflow-x: visible; gap: 0.55rem; }
  .kids-age-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .kids-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Fara Lab landing — paper sheet, blank image slots, no generated artwork */
.page-fara {
  --fara-radius: 12px;
  --fara-shadow: 0 12px 30px color-mix(in oklab, var(--color-navy) 6%, transparent);
  --fara-hero-bg: color-mix(in oklab, var(--color-cream) 72%, var(--color-background));
  --fara-cta: color-mix(in oklab, var(--color-sage) 55%, var(--color-navy));
  --fara-cta-hover: color-mix(in oklab, var(--color-sage) 38%, var(--color-navy));
}
.fara-landing { max-inline-size: 100%; margin-inline: auto; }
.page-fara:has(.fara-landing) .site-main { padding-block-start: 0; }

.fara-hero { position: relative; isolation: isolate; padding-block: var(--sp-6) 0; }
.fara-hero-band { position: absolute; inset-block: 0; inset-inline: 0; z-index: 0; background: var(--fara-hero-bg); box-shadow: 0 0 0 100vmax var(--fara-hero-bg); clip-path: inset(0 -100vmax); pointer-events: none; }
.fara-hero-band::before { content: ""; position: absolute; inset: 0; background: radial-gradient(50% 80% at 12% 100%, color-mix(in oklab, var(--color-sage) 11%, transparent), transparent 72%), radial-gradient(46% 70% at 92% 110%, color-mix(in oklab, var(--color-primary) 7%, transparent), transparent 74%), radial-gradient(34% 54% at 82% 12%, color-mix(in oklab, var(--color-gold) 14%, transparent), transparent 72%); }
.fara-hero-inner { position: relative; z-index: 2; display: grid; gap: var(--sp-6); padding-block: var(--sp-2) var(--sp-6); }
.fara-hero-copy { max-inline-size: 40rem; }
.fara-hero .breadcrumbs { margin-block-end: var(--sp-2); font-size: var(--text-xs); }
.fara-eyebrow { margin: 0 0 var(--sp-2); color: var(--color-primary-text); font-size: var(--text-xs); font-weight: 700; }
.fara-hero h1 { margin: 0; font-size: clamp(2.25rem, 4.3vw, 2.8rem); font-weight: 800; line-height: 1.35; }
.fara-hero-lead { max-inline-size: 50ch; margin: var(--sp-3) 0 0; color: var(--color-text-secondary); font-size: 1.02rem; line-height: 2; }
/* deliberately empty image slots: the owner fills the artwork later */
.fara-hero-art { display: none; align-self: end; aspect-ratio: 4 / 3; border: 1px dashed var(--color-border-strong); border-radius: 14px; background: color-mix(in oklab, var(--color-surface) 35%, transparent); }

.fara-tabs { position: relative; z-index: 3; display: flex; flex-wrap: nowrap; gap: 0.45rem; padding-block: var(--sp-1) var(--sp-3); padding-inline: 2px; overflow-x: auto; overscroll-behavior-inline: contain; scrollbar-width: none; mask-image: linear-gradient(to left, rgb(0 0 0) 92%, transparent); -webkit-mask-image: linear-gradient(to left, rgb(0 0 0) 92%, transparent); }
.fara-tabs::-webkit-scrollbar { display: none; }
.fara-tab { flex: 0 0 auto; display: inline-flex; align-items: center; min-block-size: var(--control-h); padding: 0 var(--sp-4); border: 1px solid var(--color-border); border-radius: 10px; background: var(--color-surface); color: var(--color-text); font-size: var(--text-sm); font-weight: 600; text-decoration: none; box-shadow: 0 4px 14px color-mix(in oklab, var(--color-navy) 4%, transparent); transition: border-color var(--motion), color var(--motion), background var(--motion), transform var(--motion); }
.fara-tab:hover { border-color: var(--color-primary); color: var(--color-primary-text); transform: translateY(-1px); }
.fara-tab.is-current { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-on-primary); font-weight: 700; }

.fara-catalog { padding-block: 3rem 3.5rem; }
.fara-layout { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "main" "side"; gap: var(--sp-4); align-items: start; }
.fara-main { grid-area: main; min-inline-size: 0; }
.fara-side { grid-area: side; min-inline-size: 0; }
.fara-main-head { margin-block-end: var(--sp-4); }
.fara-head-title { display: flex; align-items: center; gap: var(--sp-2); margin: 0; font-size: 1.35rem; font-weight: 800; line-height: 1.6; scroll-margin-block-start: var(--sp-4); }
.fara-head-title::before { content: "✦"; color: var(--color-primary); font-size: 0.72em; }
.fara-head-desc { max-inline-size: 58ch; margin: var(--sp-1) 0 0; color: var(--color-text-secondary); font-size: var(--text-sm); line-height: 1.9; }

.fara-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); }.fara-card { display: flex; flex-direction: column; gap: var(--sp-2); block-size: 100%; padding: var(--sp-3); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--fara-radius); box-shadow: var(--fara-shadow); color: var(--color-text); text-decoration: none; transition: border-color var(--motion), transform var(--motion); }
.fara-card:hover { border-color: var(--color-primary); transform: translateY(-2px); }
.fara-card-top { display: flex; justify-content: flex-end; min-block-size: 1.35rem; }
.fara-card-tag { display: inline-flex; align-items: center; min-block-size: 1.4rem; padding-inline: var(--sp-2); border: 1px solid color-mix(in oklab, var(--color-sage) 28%, var(--color-border)); border-radius: 6px; background: color-mix(in oklab, var(--color-sage) 12%, var(--color-surface)); color: color-mix(in oklab, var(--color-sage) 70%, var(--color-navy)); font-size: 0.68rem; font-weight: 600; }
.fara-card-tag--all { border-color: var(--color-border); background: var(--color-surface-muted); color: var(--color-text-secondary); }
.fara-card-art { display: block; flex: none; inline-size: 8.5rem; aspect-ratio: 1; margin-inline: auto; border: 1px dashed var(--color-border-strong); border-radius: 12px; background: var(--color-surface-muted); }
.fara-grid > .fara-card:nth-child(4n + 2) .fara-card-art { background: color-mix(in oklab, var(--color-primary) 8%, var(--color-surface-muted)); }
.fara-grid > .fara-card:nth-child(4n + 3) .fara-card-art { background: color-mix(in oklab, var(--color-info) 8%, var(--color-surface-muted)); }
.fara-grid > .fara-card:nth-child(4n + 4) .fara-card-art { background: color-mix(in oklab, var(--color-gold) 11%, var(--color-surface-muted)); }
.fara-card-body { display: flex; flex: 1; flex-direction: column; gap: 0.35rem; min-inline-size: 0; }
.fara-card-title { margin: 0; font-size: 1rem; font-weight: 800; line-height: 1.7; }
.fara-card-summary { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; margin: 0; overflow: hidden; color: var(--color-text-secondary); font-size: 0.78rem; line-height: 1.9; }
.fara-card-meta { display: flex; flex-wrap: wrap; gap: 0.2rem 0.45rem; margin: 0.1rem 0 0; color: var(--color-text-muted); font-size: 0.68rem; }
.fara-card-meta > span + span::before { content: "•"; margin-inline-end: 0.4rem; color: var(--color-border-strong); }
.fara-card-cta { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-1); min-block-size: var(--control-h); margin-block-start: auto; padding-inline: var(--sp-3); border-radius: 6px; background: var(--fara-cta); color: var(--color-on-primary); font-size: 0.78rem; font-weight: 700; }
.fara-card:hover .fara-card-cta { background: var(--fara-cta-hover); }

.fara-side-card { display: grid; gap: var(--sp-3); padding: var(--sp-3); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--fara-radius); box-shadow: var(--fara-shadow); }
.fara-quote { margin: 0; padding: var(--sp-4); border-radius: 10px; background: var(--color-surface-muted); }
.fara-quote::before { content: "“"; display: block; block-size: 0.55em; color: var(--color-primary); font-size: 2rem; line-height: 1; }
.fara-quote p { margin: 0 0 var(--sp-2); color: var(--color-text); font-size: 0.78rem; line-height: 1.95; }
.fara-quote footer { color: var(--color-primary-text); font-size: 0.68rem; font-weight: 600; }
.fara-features { display: grid; gap: var(--sp-2); list-style: none; margin: 0; padding: 0; }
.fara-features li { display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: var(--sp-2); align-items: start; }
.fara-feature-no { display: inline-grid; place-items: center; inline-size: 2rem; block-size: 2rem; border-radius: 50%; background: color-mix(in oklab, var(--color-sage) 12%, var(--color-surface-muted)); color: var(--color-primary-text); font-size: 0.72rem; font-weight: 800; }
.fara-feature-copy { display: grid; gap: 0.05rem; }
.fara-feature-copy strong { font-size: 0.78rem; font-weight: 700; }
.fara-feature-copy small { color: var(--color-text-secondary); font-size: 0.68rem; line-height: 1.75; }
.fara-side-cta { padding: var(--sp-4); border-radius: 10px; background: var(--color-surface-muted); }
.fara-side-cta p { margin: 0 0 var(--sp-2); color: var(--color-text); font-size: 0.82rem; font-weight: 700; line-height: 1.8; }
.fara-cta-link { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-1); min-block-size: var(--control-h); padding-inline: var(--sp-3); border-radius: 6px; background: var(--fara-cta); color: var(--color-on-primary); font-size: 0.76rem; font-weight: 700; text-decoration: none; }
.fara-cta-link:hover { background: var(--fara-cta-hover); color: var(--color-on-primary); }

@media (min-width: 40em) {
  .fara-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 48em) {
  .fara-hero { padding-block-start: var(--sp-4); }
  .fara-hero-inner { grid-template-columns: minmax(0, 1fr) 18rem; align-items: end; gap: var(--sp-4); padding-block: var(--sp-2) var(--sp-8); padding-inline: var(--sp-2); }
  .fara-hero-art { display: block; }
  .fara-tabs { padding-inline: var(--sp-2); mask-image: none; -webkit-mask-image: none; }
  .page-fara .desktop-only { display: none; }
  .page-fara .mobile-only { display: block; }
}
@media (min-width: 64em) {
  .page-fara .desktop-only { display: flex; }
  .page-fara .mobile-only { display: none; }
  .fara-hero-band { inset-block-end: 1.75rem; }
  .fara-hero-inner { grid-template-columns: minmax(0, 1fr) 24rem; gap: var(--sp-8); padding-block: var(--sp-2) 1.5rem; padding-inline: var(--sp-4); }
  .fara-hero-copy { margin-inline-start: 3rem; }
  .fara-tabs { justify-content: center; overflow-x: visible; padding-inline: var(--sp-4); }
  .fara-layout { grid-template-columns: 15.5rem minmax(0, 1fr); grid-template-areas: "side main"; gap: var(--sp-6); }
  .fara-side { position: sticky; inset-block-start: var(--sp-4); }
}
@media (min-width: 72em) {
  /* with three or more experiences the reference's 3-up card row appears;
     two cards keep the 2-up row so the grid never leaves a dead third track */
  .fara-grid:has(.fara-card:nth-child(3)) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 64em) and (max-height: 52em) {
  .fara-side { position: static; }
}

/* S9 movies */
.movie-poster { inline-size: 100%; max-inline-size: 220px; block-size: auto; border-radius: 4px; }
.movie-poster-sm { inline-size: 84px; }
.movie-poster-slot { display: block; flex: none; block-size: 126px; border: 1px dashed var(--color-border-strong); border-radius: 4px; background: color-mix(in oklab, var(--color-surface-muted) 82%, var(--color-surface)); }
.depth-controls { display: flex; gap: var(--sp-1); flex-wrap: wrap; }

/* S10 laboratory */
.choice-set { display: grid; gap: var(--sp-2); border: 0; padding: 0; margin: 0; }
.choice-option { display: grid; gap: 0.1rem; border: 1px solid var(--color-border); border-radius: 4px; padding: var(--sp-3) var(--sp-4); background: var(--color-surface); cursor: pointer; transition: border-color var(--motion), background var(--motion), transform var(--motion); }
.choice-option:hover { border-color: var(--card-rule); }
.choice-option:active { transform: translateY(1px); }
.choice-option:focus-within { border-color: var(--card-rule); outline: var(--focus-ring); outline-offset: 2px; }
.choice-option:has(input:checked) { border-color: var(--card-rule); background: var(--color-surface-muted); }
.choice-option input { accent-color: var(--card-rule); }
.result-list { display: grid; gap: var(--sp-2); margin: 0; padding: 0; list-style: none; }
.result-row { align-items: center; }
.result-bar { position: relative; inline-size: max(60px, 30%); block-size: 10px; border-radius: 999px; background: var(--color-surface-muted); overflow: hidden; }
.result-bar::after { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; inline-size: calc(var(--p) * 1%); background: var(--card-rule); }
.step-progress { position: relative; block-size: 8px; max-inline-size: 320px; border-radius: 999px; background: var(--color-surface-muted); overflow: hidden; }
.step-progress::after { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; inline-size: calc(var(--p) * 1%); background: var(--card-rule); }
.context-box { border-block-start: 1px solid var(--color-border); padding-block-start: var(--sp-4); }
.argument-slot { display: block; }

/* ---------- S17 studio (staff publishing workflow) ---------- */

/* ============================================================
   Editorial redesign — From Zero landing + article/lesson reader
   (docs/DESIGN_SYSTEM.md; logical properties only, token colours)
   ============================================================ */

/* ---------- From Zero landing: paper-cut catalog + module sidebar ---------- */
.page-fromzero {
  --fz-radius: 12px;
  --fz-shadow: 0 12px 30px color-mix(in oklab, var(--color-navy) 6%, transparent);
  --fz-hero-bg: color-mix(in oklab, var(--color-cream) 72%, var(--color-background));
}
.fz-landing { max-inline-size: 100%; margin-inline: auto; }
.page-fromzero .site-main { padding-block-start: 0; }

.fz-icon-sprite { position: absolute; inline-size: 0; block-size: 0; overflow: hidden; }
.fz-icon { inline-size: 1.15em; block-size: 1.15em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.fz-hero { position: relative; isolation: isolate; padding-block: var(--sp-6) 0; }
.fz-hero-band { position: absolute; inset-block: 0; inset-inline: 0; z-index: 0; background: var(--fz-hero-bg); box-shadow: 0 0 0 100vmax var(--fz-hero-bg); clip-path: inset(0 -100vmax); pointer-events: none; }
.fz-hero-band::before { content: ""; position: absolute; inset: 0; background: radial-gradient(50% 80% at 14% 100%, color-mix(in oklab, var(--color-sage) 11%, transparent), transparent 72%), radial-gradient(46% 70% at 92% 110%, color-mix(in oklab, var(--color-primary) 7%, transparent), transparent 74%), radial-gradient(34% 54% at 82% 12%, color-mix(in oklab, var(--color-gold) 14%, transparent), transparent 72%); }
.fz-cloud { position: absolute; z-index: 1; inline-size: 4rem; block-size: 1.15rem; border-radius: 999px; background: color-mix(in oklab, var(--color-white) 56%, transparent); opacity: 0.55; }
.fz-cloud::before, .fz-cloud::after { content: ""; position: absolute; border-radius: 50%; background: inherit; }
.fz-cloud::before { inset-block-end: 0.15rem; inset-inline-start: 0.8rem; inline-size: 2rem; block-size: 2rem; }
.fz-cloud::after { inset-block-end: 0.3rem; inset-inline-start: 2.4rem; inline-size: 1.35rem; block-size: 1.35rem; }
.fz-cloud-a { inset-block-start: 2rem; inset-inline-start: 4%; }
.fz-cloud-b { inset-block-start: 1.1rem; inset-inline-end: 12%; display: none; opacity: 0.4; inline-size: 3.4rem; }

.fz-hero-inner { position: relative; z-index: 2; display: grid; gap: var(--sp-6); padding-block: var(--sp-2) var(--sp-6); }
.fz-hero-copy { max-inline-size: 40rem; }
.fz-hero .breadcrumbs { margin-block-end: var(--sp-2); font-size: var(--text-xs); }
.fz-hero h1 { margin: 0; font-size: clamp(2.25rem, 4.3vw, 2.8rem); font-weight: 800; line-height: 1.35; }
.fz-hero-lead { max-inline-size: 48ch; margin: var(--sp-3) 0 0; color: var(--color-text-secondary); font-size: 1.02rem; line-height: 2; }
.fz-hero-rule { display: block; inline-size: 3.2rem; block-size: 3px; margin-block-start: var(--sp-4); background: var(--color-primary); }
.fz-dot { color: var(--color-border-strong); }
.fz-hero-art { display: block; align-self: end; aspect-ratio: 16 / 9; margin-block-start: var(--sp-4); border: 1px dashed var(--color-border-strong); border-radius: 14px; background: color-mix(in oklab, var(--color-surface) 35%, transparent); }
.fz-scene { display: block; inline-size: 100%; block-size: auto; }

.fz-scene-sun { fill: color-mix(in oklab, var(--color-gold) 46%, transparent); }
.fz-scene-cloud { fill: color-mix(in oklab, var(--color-white) 58%, transparent); }
.fz-scene-cloud-soft { opacity: 0.65; }
.fz-scene-hill-back { fill: color-mix(in oklab, var(--color-sage) 16%, transparent); }
.fz-scene-hill-front { fill: color-mix(in oklab, var(--color-primary) 8%, var(--color-surface-muted)); }
.fz-scene-shadow { fill: color-mix(in oklab, var(--color-navy) 9%, transparent); }
.fz-scene-book-1 { fill: var(--color-info); }
.fz-scene-book-2 { fill: var(--color-primary); }
.fz-scene-book-3 { fill: var(--color-sage); }
.fz-scene-pages { fill: var(--color-surface); }
.fz-scene-line { fill: none; stroke: color-mix(in oklab, var(--color-navy) 35%, transparent); stroke-width: 2; stroke-linecap: round; }
.fz-scene-stem { fill: none; stroke: var(--color-sage); stroke-width: 2.5; stroke-linecap: round; }
.fz-scene-leaf { fill: color-mix(in oklab, var(--color-sage) 82%, var(--color-navy)); }
.fz-scene-boat { fill: var(--color-surface); stroke: var(--color-border-strong); stroke-width: 1.7; stroke-linejoin: round; }
.fz-scene-path { fill: none; stroke: color-mix(in oklab, var(--color-primary) 32%, transparent); stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 4 7; }
.fz-scene-plane { fill: var(--color-surface); stroke: var(--color-border-strong); stroke-width: 1.6; stroke-linejoin: round; }
.fz-scene-plane-line { fill: none; stroke: var(--color-border-strong); stroke-width: 1.2; }
.fz-scene-page { fill: var(--color-surface); stroke: var(--color-border); stroke-width: 1.2; }
.fz-scene-cover { fill: none; stroke: var(--color-primary); stroke-width: 2.4; stroke-linecap: round; }

.fz-tabs { position: relative; z-index: 3; display: flex; flex-wrap: nowrap; gap: 0.4rem; padding-block: var(--sp-1) var(--sp-3); padding-inline: 2px; overflow-x: auto; overscroll-behavior-inline: contain; scrollbar-width: none; mask-image: linear-gradient(to left, rgb(0 0 0) 92%, transparent); -webkit-mask-image: linear-gradient(to left, rgb(0 0 0) 92%, transparent); }
.fz-tabs::-webkit-scrollbar { display: none; }
.fz-tab { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 0.4rem; min-block-size: var(--control-h); padding: 0 var(--sp-3); border: 1px solid var(--color-border); border-radius: 10px; background: var(--color-surface); color: var(--color-text); font-size: 0.82rem; font-weight: 600; text-decoration: none; box-shadow: 0 4px 14px color-mix(in oklab, var(--color-navy) 4%, transparent); transition: border-color var(--motion), color var(--motion), background var(--motion), transform var(--motion); }
.fz-tab:hover { border-color: var(--color-primary); color: var(--color-primary-text); transform: translateY(-1px); }
.fz-tab[aria-current="true"] { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-on-primary); font-weight: 700; }
.fz-tab-icon { inline-size: 1.1rem; block-size: 1.1rem; color: var(--color-text-muted); }
.fz-tab[aria-current="true"] .fz-tab-icon { color: currentColor; }

.fz-catalog { padding-block: 4rem 3.5rem; }
.fz-layout { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "main" "side"; gap: var(--sp-4); align-items: start; }
.fz-main { grid-area: main; min-inline-size: 0; }
.fz-side { grid-area: side; min-inline-size: 0; }

.fz-panel { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--fz-radius); box-shadow: var(--fz-shadow); padding: var(--sp-4) var(--sp-4) var(--sp-6); }
.fz-panel-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-2) var(--sp-4); margin-block-end: var(--sp-4); }
.fz-panel-title { margin: 0; font-size: 1.2rem; font-weight: 800; }
.fz-panel-count { display: inline-flex; align-items: center; gap: var(--sp-1); margin: 0; color: var(--color-text-muted); font-size: var(--text-xs); }
.fz-panel-count .fz-icon { inline-size: 1rem; block-size: 1rem; color: var(--color-primary-text); }
.fz-modules { display: grid; gap: var(--sp-4); }

.fz-module { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--fz-radius); box-shadow: 0 8px 22px color-mix(in oklab, var(--color-navy) 4%, transparent); }
.fz-module-head { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; gap: var(--sp-2); align-items: start; padding: var(--sp-3) var(--sp-4); cursor: pointer; list-style: none; }
.fz-module-head::-webkit-details-marker { display: none; }
.fz-module-head:hover .fz-module-title { color: var(--color-primary-text); }
.fz-module-no { display: inline-grid; place-items: center; inline-size: 2.15rem; block-size: 2.15rem; border-radius: 50%; background: var(--color-primary); color: var(--color-on-primary); font-size: var(--text-sm); font-weight: 800; line-height: 1; }
.fz-module-icon { display: grid; place-items: center; inline-size: 2.75rem; block-size: 2.75rem; border: 1px dashed var(--color-border-strong); border-radius: 12px; background: color-mix(in oklab, var(--color-primary) 7%, var(--color-surface)); }
.fz-module-titles { display: grid; gap: 0.2rem; min-inline-size: 0; }
.fz-module-title { font-size: 1.02rem; font-weight: 800; line-height: 1.6; transition: color var(--motion); }
.fz-module-summary { color: var(--color-text-secondary); font-size: 0.78rem; line-height: 1.85; }
.fz-module-caret { color: var(--color-text-muted); transition: transform var(--motion), color var(--motion); }
.fz-module-caret .fz-icon { inline-size: 1rem; block-size: 1rem; }
.fz-module[open] .fz-module-caret { transform: rotate(90deg); }
.fz-module-body { padding: 0 var(--sp-4) var(--sp-4); }
.fz-module-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-3); margin: 0 0 var(--sp-3); color: var(--color-text-secondary); font-size: 0.72rem; }
.fz-module-meta span { display: inline-flex; align-items: center; gap: 0.25rem; }
.fz-module-meta .fz-icon { inline-size: 0.95rem; block-size: 0.95rem; color: var(--color-text-muted); }

.fz-lessons { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.45rem; }
.fz-lesson { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-2); align-items: center; padding: 0.55rem 0.65rem; border: 1px solid var(--color-border); border-radius: 8px; background: var(--color-surface); color: var(--color-text); text-decoration: none; transition: border-color var(--motion), background var(--motion), color var(--motion); }
.fz-lesson:hover { border-color: var(--color-primary); background: color-mix(in oklab, var(--color-primary) 4%, var(--color-surface)); }
.fz-lesson-title { min-inline-size: 0; font-size: 0.88rem; font-weight: 700; line-height: 1.8; }
.fz-lesson-time { color: var(--color-text-muted); font-size: 0.7rem; white-space: nowrap; display: none; }
.fz-lesson-level { display: none; padding-block: 0.1rem; padding-inline: var(--sp-2); border: 1px solid color-mix(in oklab, var(--color-primary) 18%, var(--color-border)); border-radius: 6px; background: color-mix(in oklab, var(--color-primary) 7%, var(--color-surface)); color: var(--color-primary-text); font-size: 0.68rem; white-space: nowrap; }
.fz-lesson-level--empty, .fz-lesson .fz-lesson-level--empty { display: none; }
.fz-lesson-go { color: var(--color-text-muted); }
.fz-lesson:hover .fz-lesson-go { color: var(--color-primary-text); }

.fz-side-card { display: grid; gap: var(--sp-3); padding: var(--sp-3); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--fz-radius); box-shadow: var(--fz-shadow); }
.fz-side-art { display: grid; place-items: center; aspect-ratio: 26 / 17; max-block-size: 11rem; overflow: hidden; border: 1px dashed var(--color-border-strong); border-radius: 10px; background: color-mix(in oklab, var(--color-cream) 78%, var(--color-surface)); }
.fz-side-scene { display: block; inline-size: 100%; block-size: 100%; }
.fz-side-title { margin: 0; font-size: 1.05rem; font-weight: 800; }
.fz-side-text { margin: 0; color: var(--color-text-secondary); font-size: 0.78rem; line-height: 1.95; }
.fz-side-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; padding-block: var(--sp-2); border-block: 1px solid var(--color-border); }
.fz-side-stats div { display: grid; gap: 0.1rem; justify-items: center; border-inline-end: 1px solid var(--color-border); }
.fz-side-stats div:last-child { border-inline-end: 0; }
.fz-side-stats dt { color: var(--color-text-muted); font-size: 0.66rem; }
.fz-side-stats dd { margin: 0; color: var(--color-text); font-size: 1.1rem; font-weight: 800; }
.fz-side-start { inline-size: 100%; gap: var(--sp-2); font-size: 0.8rem; }
.fz-side-start .fz-icon { inline-size: 1rem; block-size: 1rem; }
.fz-features { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.fz-features li { display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: var(--sp-2); align-items: center; }
.fz-feature-icon { display: grid; place-items: center; inline-size: 2rem; block-size: 2rem; border: 1px dashed var(--color-border-strong); border-radius: 50%; background: var(--color-surface-muted); }
.fz-feature-copy { display: grid; gap: 0.05rem; }
.fz-feature-copy strong { font-size: 0.78rem; font-weight: 700; }
.fz-feature-copy small { color: var(--color-text-secondary); font-size: 0.68rem; line-height: 1.7; }
.fz-quote { margin: 0; padding: var(--sp-3); border-radius: 10px; background: var(--color-surface-muted); }
.fz-quote::before { content: "“"; display: block; block-size: 0.55em; color: var(--color-primary); font-size: 2rem; line-height: 1; }
.fz-quote p { margin: 0 0 var(--sp-2); color: var(--color-text); font-size: 0.78rem; line-height: 1.95; }
.fz-quote footer { color: var(--color-primary-text); font-size: 0.68rem; font-weight: 600; }

@media (min-width: 48em) {
  .fz-landing { max-inline-size: 100%; }
  .section-fromzero .desktop-only { display: none; }
  .section-fromzero .mobile-only { display: block; }
  .fz-hero { padding-block-start: var(--sp-4); }
  .fz-hero-inner { grid-template-columns: minmax(0, 1fr) 15rem; align-items: end; gap: var(--sp-4); padding-block: var(--sp-2) var(--sp-8); padding-inline: var(--sp-2); }
  .fz-hero-art { display: block; aspect-ratio: 4 / 3; margin-block-start: 0; }
  .fz-cloud-b { display: block; }
  .fz-tabs { padding-inline: var(--sp-2); mask-image: none; -webkit-mask-image: none; }
  .fz-lesson { grid-template-columns: auto minmax(0, 1fr) auto auto auto; }
  .fz-lesson-time,
  .fz-lesson-level { display: inline-flex; align-items: center; }
  /* tablet: the card is wide, so the small book plate sits beside the copy and
     the feature list spans the full sheet instead of a 600px-tall illustration */
  .fz-side-card { grid-template-columns: 13rem minmax(0, 1fr); grid-template-areas: "art title" "art text" "art stats" "art start" "features features" "quote quote"; align-items: start; }
  .fz-side-art { grid-area: art; align-self: start; max-block-size: none; }
  .fz-side-title { grid-area: title; }
  .fz-side-text { grid-area: text; }
  .fz-side-stats { grid-area: stats; }
  .fz-side-start { grid-area: start; }
  .fz-features { grid-area: features; }
  .fz-quote { grid-area: quote; }
}
@media (min-width: 64em) {
  .section-fromzero .desktop-only { display: flex; }
  .section-fromzero .mobile-only { display: none; }
  .fz-hero-band { inset-block-end: 1.75rem; }
  .fz-hero-inner { grid-template-columns: minmax(0, 1fr) 21rem; gap: var(--sp-8); padding-block: var(--sp-2) 1.5rem; padding-inline: var(--sp-4); }
  .fz-hero-copy { margin-inline-start: 3rem; }
  .fz-hero-art { margin-block-end: -1.75rem; }
  .fz-tabs { overflow-x: visible; padding-inline: var(--sp-4); }
  .fz-layout { grid-template-columns: 14.5rem minmax(0, 1fr); grid-template-areas: "side main"; gap: var(--sp-6); }
  .fz-side { position: sticky; inset-block-start: var(--sp-4); }
  .fz-side-card { grid-template-columns: minmax(0, 1fr); grid-template-areas: "art" "title" "text" "stats" "start" "features" "quote"; }
  .fz-side-art { max-block-size: none; }
}
@media (min-width: 64em) and (max-height: 52em) {
  .fz-side { position: static; }
}

/* ---------- Article / lesson: editorial reading layout ---------- */
.article-shell { display: grid; gap: var(--sp-8); }
@media (min-width: 64em) {
  .article-shell { grid-template-columns: minmax(0, 1fr) 15rem; align-items: start; }
  .article-rail { position: sticky; inset-block-start: var(--sp-6); }
}
.article-main { min-inline-size: 0; max-inline-size: 46rem; }
.article-shell .prose { max-inline-size: none; margin-inline: 0; }
.article-header { display: grid; gap: var(--sp-3); padding-block-end: var(--sp-6); border-block-end: 3px solid var(--color-terracotta); margin-block-end: var(--sp-6); }
.article-kicker { margin: 0; font-size: var(--text-sm); font-weight: 700; color: var(--color-primary-text); }
.article-title { margin: 0; font-size: clamp(2.05rem, 4.6vw, 3rem); line-height: 1.24; }
.article-dek { margin: 0; font-size: var(--text-xl); color: var(--color-text-secondary); max-inline-size: 60ch; }
.article-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-4); color: var(--color-text-secondary); font-size: var(--text-sm); margin: 0; }
.article-rail { display: grid; gap: var(--sp-4); }
.rail-card { display: grid; gap: var(--sp-2); padding: var(--sp-4); background: var(--color-surface-muted); border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.rail-title { margin: 0; font-size: var(--text-sm); font-weight: 700; color: var(--color-text-secondary); }
.rail-meta { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-1); font-size: var(--text-sm); color: var(--color-text-secondary); }
.toc { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.toc a {
  display: block; padding-block: var(--sp-1); padding-inline-start: var(--sp-3);
  border-inline-start: 2px solid transparent; text-decoration: none;
  color: var(--color-text); font-size: var(--text-sm);
  transition: color var(--motion), border-color var(--motion);
}
.toc a:hover { color: var(--color-primary-text); border-inline-start-color: var(--color-primary); }
.toc .toc-3 a { padding-inline-start: var(--sp-6); color: var(--color-text-secondary); }

/* article end navigation: editorial prev/next */
.article-nav { display: grid; gap: var(--sp-3); margin-block-start: var(--sp-8); padding-block-start: var(--sp-6); border-block-start: 1px solid var(--color-border); }
.article-nav-links { display: grid; gap: var(--sp-3); }
@media (min-width: 40em) { .article-nav-links { grid-template-columns: 1fr 1fr; } }
.article-nav-link {
  display: grid; gap: var(--sp-1); padding: var(--sp-4);
  border: 1px solid var(--color-border); border-radius: var(--radius-md);
  background: var(--color-surface); color: var(--color-text); text-decoration: none;
  transition: border-color var(--motion), transform var(--motion);
}
.article-nav-link:hover { border-color: var(--color-primary); transform: translateY(-2px); }
.article-nav-link .dir { font-size: var(--text-xs); color: var(--color-text-secondary); }
.article-nav-link .to { font-weight: 700; }
.article-nav-back { justify-self: center; }

/* related: editorial list, not 3 cards */
.related-editorial { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.related-editorial a { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-4); padding-block: var(--sp-3); border-block-end: 1px solid var(--color-border); text-decoration: none; color: var(--color-text); }
.related-editorial a:hover { color: var(--color-primary-text); }
.related-editorial .badge { flex: 0 0 auto; }

/* CKEditor 5 (studio body field): Persian word-count spans render glued
   ("… : 21تعداد حروف…") — space them; toolbar/panel chrome inherits tokens */
.ck .ck-word-count { display: flex; gap: var(--sp-3); justify-content: flex-end; }

/* ═══ Movie detail — editorial redesign (page-movies scope) ═══
   IA: framed hero (poster + identity + stats) → body (68ch) → numbered
   connection ladder → related cards → cross-pillar suggestions.
   Burgundy (--movie-accent) is the cinema accent: hairlines, numerals,
   hover states; never a coat of paint. Light theme locked end to end. */
.page-movies {
  --movie-accent: var(--color-accent-movies);
}

/* ── hero: one framed editorial composition ── */
.movie-hero {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-5);
  align-items: start;
  max-inline-size: 1200px;
  padding: var(--sp-5);
  background: color-mix(in oklab, var(--movie-accent) 5%, var(--color-surface));
  border: 1px solid var(--color-cream);
  border-radius: var(--radius-md);
}
.movie-hero-poster {
  margin: 0;
  max-inline-size: 240px;
}
@media (min-width: 768px) {
  .movie-hero {
    grid-template-columns: minmax(220px, 290px) minmax(0, 1fr);
    gap: var(--sp-6);
    padding: var(--sp-6);
  }
  .movie-hero-poster { max-inline-size: 290px; }
}
.movie-hero-poster {
  inline-size: 100%;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: 0 16px 40px color-mix(in oklab, var(--movie-accent) 22%, transparent);
}
.movie-hero-poster img { display: block; inline-size: 100%; block-size: auto; }
.movie-poster-caption {
  margin-block-start: var(--sp-2);
  font-size: 0.8rem;
  color: var(--color-text-muted);
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.movie-poster-fallback {
  aspect-ratio: 2 / 3;
  display: grid;
  place-content: center;
  gap: var(--sp-2);
  text-align: center;
  background: color-mix(in oklab, var(--movie-accent) 12%, var(--color-cream));
  border: 1px solid var(--color-cream);
  color: var(--color-text-secondary);
  padding: var(--sp-4);
}
.movie-poster-fallback::before {
  content: "سینما";
  font-size: 0.8rem;
  letter-spacing: 0.2em;
  color: var(--movie-accent);
}
.movie-poster-fallback strong {
  font-size: 1.05rem;
  color: var(--color-text);
  padding-inline: var(--sp-2);
}

.movie-identity { min-inline-size: 0; align-self: center; }
.movie-title {
  font-size: clamp(1.8rem, 3.6vw, 2.8rem);
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: -0.01em;
  margin: 0;
}
.movie-title-original {
  display: block;
  margin-block-start: var(--sp-2);
  font-size: 1rem;
  font-weight: 400;
  color: var(--color-text-secondary);
}

/* metadata: one quiet row, hairline dividers, label above value */
.movie-stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4) var(--sp-5);
  margin: 0;
  margin-block-start: var(--sp-4);
  padding-block-start: var(--sp-4);
  border-block-start: 1px solid var(--color-cream);
}
.movie-stat dt, .movie-stat dd { margin: 0; }
.movie-stat dt {
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
}
.movie-stat dd {
  margin-block-start: 2px;
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text);
}

.movie-intro {
  margin-block-start: var(--sp-4);
  max-inline-size: 60ch;
  font-size: 1.12rem;
}
.movie-hero-actions { margin-block-start: var(--sp-4); }

/* ── two-column reading shell: content (wide) + connections rail (narrow) ── */
.movie-shell { display: grid; gap: var(--sp-7); max-inline-size: 1200px; }
.movie-main { min-inline-size: 0; }
.movie-body { max-inline-size: 68ch; }

@media (min-width: 64em) {
  .movie-shell.has-rail {
    grid-template-columns: minmax(0, 1fr) 20rem;
    align-items: start;
  }
  .movie-rail {
    position: sticky;
    inset-block-start: var(--sp-6);
    max-block-size: calc(100dvh - 3rem);
    overflow-y: auto;
    display: grid;
    align-content: start;
    gap: var(--sp-3);
    padding-inline: var(--sp-3);
    border-inline-start: 1px solid var(--color-cream);
  }
}

/* connections ladder (rail content) */
.movie-connections-intro {
  color: var(--color-text-secondary);
  font-size: 0.9rem;
  margin: 0;
}
.movie-connection {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--sp-3);
  padding-block: var(--sp-4);
  border-block-start: 1px solid var(--color-cream);
}
.movie-connection:first-of-type { border-block-start: 0; padding-block-start: var(--sp-2); }
.movie-connection-number {
  font-size: 1.4rem;
  font-weight: 800;
  line-height: 1.2;
  color: var(--movie-accent);
  font-variant-numeric: tabular-nums;
}
.movie-connection h3 { margin: 0; font-size: 1.05rem; }
.movie-connection .kind-label {
  font-size: 0.74rem;
  color: var(--color-text-muted);
  display: block;
  margin-block-start: 2px;
}
.movie-connection .analysis-text {
  font-size: 0.95rem;
  line-height: 1.9;
  color: var(--color-text);
  margin-block: var(--sp-2);
}
.movie-connection .depth-controls { margin-block-start: var(--sp-2); display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.movie-connection .chip { min-block-size: 1.8rem; font-size: 0.78rem; padding-block: 0.15rem; }
.movie-explore {
  display: inline-block;
  margin-block-start: var(--sp-2);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--movie-accent);
  text-decoration: none;
}
.movie-explore::after { content: " ←"; }
.movie-explore:hover { text-decoration: underline; }
.movie-connection-body {
  min-inline-size: 0;
  border-inline-start: 2px solid transparent;
  padding-inline-start: var(--sp-3);
  transition: border-color var(--motion);
}
.movie-connection:hover .movie-connection-body {
  border-inline-start-color: var(--movie-accent);
}

/* ── related: quiet card grid, not a bare link list ── */
.movie-related { max-inline-size: 1200px; }
.movie-related-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--sp-4);
  margin-block-start: var(--sp-4);
}
.movie-related-item {
  display: grid;
  gap: var(--sp-2);
  padding: var(--sp-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: border-color var(--motion), transform var(--motion), box-shadow var(--motion);
}
.movie-related-item::after {
  content: "←";
  color: var(--movie-accent);
  font-weight: 700;
  justify-self: end;
  transition: transform var(--motion);
}
.movie-related-item:hover {
  border-color: var(--movie-accent);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px color-mix(in oklab, var(--movie-accent) 14%, transparent);
}
.movie-related-item:hover::after { transform: translateX(-2px); }
.movie-related-kind {
  font-size: 0.78rem;
  color: var(--color-text-muted);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.movie-related-title {
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.6;
}

/* ── cross-pillar suggest block (shared across the five pillars) ── */
.related-problems { max-inline-size: 1200px; }
.related-problems .grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--sp-4);
}


/* pillar chip inside the cross-pillar suggest cards — accent per pillar */
.related-problem-pillar {
  border-inline-start: 3px solid var(--pillar-accent, var(--color-border));
  padding-inline-start: 8px;
  margin: 0;
}

/* Problem Hub landing — paper sheet, blank image slots, no generated art */
.page-problems {
  --problems-radius: 10px;
  --problems-shadow: 0 10px 26px color-mix(in oklab, var(--color-navy) 6%, transparent);
  --problems-hero-bg: color-mix(in oklab, var(--color-cream) 74%, var(--color-background));
  --problems-cta: color-mix(in oklab, var(--color-sage) 55%, var(--color-navy));
  --problems-cta-hover: color-mix(in oklab, var(--color-sage) 38%, var(--color-navy));
  --problems-life: color-mix(in oklab, var(--color-info) 42%, var(--color-primary));
}
.problems-landing { max-inline-size: 100%; margin-inline: auto; }
.page-problems:has(.problems-landing) .site-main { padding-block-start: 0; }

.problems-hero { position: relative; isolation: isolate; padding-block: var(--sp-6) 0; }
.problems-hero-band { position: absolute; inset-block: 0; inset-inline: 0; z-index: 0; background: var(--problems-hero-bg); box-shadow: 0 0 0 100vmax var(--problems-hero-bg); clip-path: inset(0 -100vmax); pointer-events: none; }
.problems-hero-band::before { content: ""; position: absolute; inset: 0; background: radial-gradient(48% 80% at 10% 100%, color-mix(in oklab, var(--color-sage) 13%, transparent), transparent 72%), radial-gradient(52% 78% at 90% 104%, color-mix(in oklab, var(--color-gold) 12%, transparent), transparent 74%), radial-gradient(38% 58% at 78% 8%, color-mix(in oklab, var(--color-primary) 6%, transparent), transparent 72%); }
.problems-hero-inner { position: relative; z-index: 2; display: grid; gap: var(--sp-6); padding-block: var(--sp-2) var(--sp-6); }
.problems-hero-copy { max-inline-size: 42rem; }
.problems-hero .breadcrumbs { margin-block-end: var(--sp-2); font-size: var(--text-xs); }
.problems-eyebrow { margin: 0 0 var(--sp-2); color: var(--color-primary-text); font-size: var(--text-xs); font-weight: 700; }
.problems-hero h1 { margin: 0; font-size: clamp(2.25rem, 4.6vw, 2.9rem); font-weight: 800; line-height: 1.35; }
.problems-hero-lead { max-inline-size: 54ch; margin: var(--sp-3) 0 0; color: var(--color-text-secondary); font-size: 1.02rem; line-height: 2; }
.problems-hero-art { display: none; align-self: end; aspect-ratio: 4 / 3; border: 1px dashed var(--color-border-strong); border-radius: 14px; background: color-mix(in oklab, var(--color-surface) 35%, transparent); }

.problems-tabs { position: relative; z-index: 3; display: flex; flex-wrap: nowrap; gap: 0.45rem; padding-block: var(--sp-1) var(--sp-3); padding-inline: 2px; overflow-x: auto; overscroll-behavior-inline: contain; scrollbar-width: none; mask-image: linear-gradient(to left, rgb(0 0 0) 92%, transparent); -webkit-mask-image: linear-gradient(to left, rgb(0 0 0) 92%, transparent); }
.problems-tabs::-webkit-scrollbar { display: none; }
.problems-tab { flex: 0 0 auto; display: inline-flex; align-items: center; gap: var(--sp-2); min-block-size: var(--control-h); padding: 0 var(--sp-3); border: 1px solid var(--color-border); border-radius: 10px; background: var(--color-surface); color: var(--color-text); font-size: 0.8rem; font-weight: 600; text-decoration: none; box-shadow: 0 4px 14px color-mix(in oklab, var(--color-navy) 4%, transparent); transition: border-color var(--motion), color var(--motion), background var(--motion), transform var(--motion); }
.problems-tab:hover { border-color: var(--color-primary); color: var(--color-primary-text); transform: translateY(-1px); }
.problems-tab.is-current { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-on-primary); font-weight: 700; }
.problems-tab-dot { display: inline-block; inline-size: 0.48rem; block-size: 0.48rem; flex: none; border-radius: 50%; background: var(--color-primary); }
.problems-tab-dot--identity { background: var(--color-sage); }
.problems-tab-dot--knowledge { background: var(--color-info); }
.problems-tab-dot--ethics { background: var(--color-primary); }
.problems-tab-dot--society { background: var(--color-gold); }
.problems-tab-dot--life { background: var(--problems-life); }
.problems-tab.is-current .problems-tab-dot { background: var(--color-on-primary); }

.problems-catalog { padding-block: 3rem 3.5rem; }
.problems-layout { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "main" "side"; gap: var(--sp-5); align-items: start; }
.problems-main { grid-area: main; min-inline-size: 0; }
.problems-side { grid-area: side; min-inline-size: 0; }

.problems-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); }
.problem-card { display: flex; flex-direction: column; gap: 0.4rem; block-size: 100%; padding: var(--sp-3); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--problems-radius); box-shadow: var(--problems-shadow); color: var(--color-text); text-decoration: none; transition: border-color var(--motion), transform var(--motion); }
.problem-card:hover { border-color: var(--color-primary); transform: translateY(-2px); }
.problem-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-2); min-block-size: 6rem; }
.problem-card-art { display: block; flex: none; inline-size: 6rem; aspect-ratio: 1; border: 1px dashed color-mix(in oklab, var(--color-navy) 25%, transparent); border-radius: 50%; background: color-mix(in oklab, var(--color-sage) 12%, var(--color-surface-muted)); }
.problem-card-art--identity { background: color-mix(in oklab, var(--color-sage) 16%, var(--color-surface-muted)); }
.problem-card-art--knowledge { background: color-mix(in oklab, var(--color-info) 13%, var(--color-surface-muted)); }
.problem-card-art--ethics { background: color-mix(in oklab, var(--color-primary) 10%, var(--color-surface-muted)); }
.problem-card-art--society { background: color-mix(in oklab, var(--color-gold) 16%, var(--color-surface-muted)); }
.problem-card-art--life { background: color-mix(in oklab, var(--problems-life) 12%, var(--color-surface-muted)); }
.problem-tag { display: inline-flex; align-items: center; gap: 0.35rem; min-block-size: 1.45rem; padding-inline: var(--sp-2); border: 1px solid color-mix(in oklab, var(--color-sage) 25%, var(--color-border)); border-radius: 6px; background: color-mix(in oklab, var(--color-sage) 10%, var(--color-surface)); color: color-mix(in oklab, var(--color-sage) 72%, var(--color-navy)); font-size: 0.68rem; font-weight: 600; }
.problem-tag-dot { inline-size: 0.38rem; block-size: 0.38rem; border-radius: 50%; background: currentColor; }
.problem-tag--identity { border-color: color-mix(in oklab, var(--color-sage) 35%, var(--color-border)); background: color-mix(in oklab, var(--color-sage) 13%, var(--color-surface)); color: color-mix(in oklab, var(--color-sage) 72%, var(--color-navy)); }
.problem-tag--knowledge { border-color: color-mix(in oklab, var(--color-info) 35%, var(--color-border)); background: color-mix(in oklab, var(--color-info) 11%, var(--color-surface)); color: color-mix(in oklab, var(--color-info) 70%, var(--color-navy)); }
.problem-tag--ethics { border-color: color-mix(in oklab, var(--color-primary) 35%, var(--color-border)); background: color-mix(in oklab, var(--color-primary) 9%, var(--color-surface)); color: var(--color-primary-text); }
.problem-tag--society { border-color: color-mix(in oklab, var(--color-gold) 42%, var(--color-border)); background: color-mix(in oklab, var(--color-gold) 13%, var(--color-surface)); color: color-mix(in oklab, var(--color-gold) 32%, var(--color-navy)); }
.problem-tag--life { border-color: color-mix(in oklab, var(--problems-life) 32%, var(--color-border)); background: color-mix(in oklab, var(--problems-life) 10%, var(--color-surface)); color: color-mix(in oklab, var(--problems-life) 70%, var(--color-navy)); }
.problem-tag--none { border-color: var(--color-border); background: var(--color-surface-muted); color: var(--color-text-secondary); }
.problem-card-title { margin: 0; font-size: 1rem; font-weight: 800; line-height: 1.7; }
.problem-card-summary { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; margin: 0; overflow: hidden; color: var(--color-text-secondary); font-size: 0.78rem; line-height: 1.9; }
.problem-card-meta { display: flex; flex-wrap: wrap; gap: 0.2rem 0.45rem; margin: 0.1rem 0 0; color: var(--color-text-muted); font-size: 0.68rem; }
.problem-card-meta > span + span::before { content: "•"; margin-inline-end: 0.4rem; color: var(--color-border-strong); }
.problem-card-cta { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-1); align-self: flex-start; min-block-size: 2.4rem; margin-block-start: auto; padding-inline: var(--sp-3); border: 1px solid color-mix(in oklab, var(--color-primary) 22%, var(--color-border)); border-radius: 6px; background: color-mix(in oklab, var(--color-primary) 6%, var(--color-surface)); color: var(--color-primary-text); font-size: 0.72rem; font-weight: 700; }
.problem-card:hover .problem-card-cta { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-on-primary); }

.problems-side-card { display: grid; gap: var(--sp-3); padding: var(--sp-3); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--problems-radius); box-shadow: var(--problems-shadow); }
.problems-quote { display: grid; margin: 0; padding: var(--sp-4); border-radius: 9px; background: var(--color-surface-muted); }
.problems-quote-art { display: block; inline-size: 4.5rem; aspect-ratio: 1; justify-self: end; margin-block-end: var(--sp-2); border: 1px dashed var(--color-border-strong); border-radius: 8px; background: color-mix(in oklab, var(--color-sage) 10%, var(--color-surface)); }
.problems-quote::before { content: "“"; display: block; block-size: 0.55em; color: var(--color-primary); font-size: 2rem; line-height: 1; }
.problems-quote p { margin: 0 0 var(--sp-2); color: var(--color-text); font-size: 0.8rem; line-height: 1.95; }
.problems-quote footer { color: var(--color-primary-text); font-size: 0.68rem; font-weight: 600; }
.problems-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; padding-block: var(--sp-2); border-block: 1px solid var(--color-border); }
.problems-stats div { display: grid; gap: 0.1rem; justify-items: center; border-inline-end: 1px solid var(--color-border); }
.problems-stats div:last-child { border-inline-end: 0; }
.problems-stats dt { color: var(--color-text-muted); font-size: 0.66rem; }
.problems-stats dd { margin: 0; color: var(--color-text); font-size: 1.15rem; font-weight: 800; }
.problems-side-note { display: grid; grid-template-columns: minmax(0, 1fr) 3rem; align-items: center; gap: var(--sp-2); padding: var(--sp-4); border-radius: 9px; background: var(--color-surface-muted); }
.problems-side-note p { margin: 0; color: var(--color-text); font-size: 0.82rem; font-weight: 700; line-height: 1.9; }
.problems-side-note-art { display: block; inline-size: 3rem; aspect-ratio: 1; border: 1px dashed var(--color-border-strong); border-radius: 50%; background: color-mix(in oklab, var(--color-sage) 10%, var(--color-surface)); }

@media (min-width: 40em) {
  .problems-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 48em) {
  .problems-hero { padding-block-start: var(--sp-4); }
  .problems-hero-inner { grid-template-columns: minmax(0, 1fr) 18rem; align-items: end; gap: var(--sp-4); padding-block: var(--sp-2) var(--sp-8); padding-inline: var(--sp-2); }
  .problems-hero-art { display: block; }
  .problems-tabs { padding-inline: var(--sp-2); }
  .page-problems .desktop-only { display: none; }
  .page-problems .mobile-only { display: block; }
}
@media (min-width: 64em) {
  .page-problems .desktop-only { display: flex; }
  .page-problems .mobile-only { display: none; }
  .problems-hero-band { inset-block-end: 1.75rem; }
  .problems-hero-inner { grid-template-columns: minmax(0, 1fr) 24rem; gap: var(--sp-8); padding-block: var(--sp-2) 1.5rem; padding-inline: var(--sp-4); }
  .problems-hero-copy { margin-inline-start: 3rem; }
  .problems-tabs { justify-content: center; overflow-x: visible; padding-inline: var(--sp-4); mask-image: none; -webkit-mask-image: none; }
  .problems-layout { grid-template-columns: 18rem minmax(0, 1fr); grid-template-areas: "side main"; gap: var(--sp-6); }
  .problems-side { position: sticky; inset-block-start: var(--sp-4); }
}
@media (min-width: 72em) {
  .problems-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 64em) and (max-height: 52em) {
  .problems-side { position: static; }
}


/* Problem detail — editorial problem sheet, blank image slots only */
.page-problem-detail .site-main { padding-block-start: 0; }
.problem-detail-hero { position: relative; isolation: isolate; padding-block: var(--sp-6) 0; }
.problem-detail-band { position: absolute; inset-block: 0; inset-inline: 0; z-index: 0; background: var(--problems-hero-bg); box-shadow: 0 0 0 100vmax var(--problems-hero-bg); clip-path: inset(0 -100vmax); pointer-events: none; }
.problem-detail-band::before { content: ""; position: absolute; inset: 0; background: radial-gradient(48% 80% at 10% 100%, color-mix(in oklab, var(--color-sage) 13%, transparent), transparent 72%), radial-gradient(52% 78% at 90% 104%, color-mix(in oklab, var(--color-gold) 12%, transparent), transparent 74%), radial-gradient(38% 58% at 78% 8%, color-mix(in oklab, var(--color-primary) 5%, transparent), transparent 72%); }
.problem-detail-inner { position: relative; z-index: 2; display: grid; gap: var(--sp-6); padding-block: var(--sp-2) var(--sp-6); }
.problem-detail-copy { max-inline-size: 44rem; padding-block-end: var(--sp-4); }
.problem-detail-copy .breadcrumbs { margin-block-end: var(--sp-2); font-size: var(--text-xs); }
.problem-detail-copy .problem-tag { margin-block-end: var(--sp-2); }
.problem-detail-copy h1 { margin: 0; font-size: clamp(2.25rem, 4.6vw, 3rem); font-weight: 800; line-height: 1.35; }
.problem-detail-lead { max-inline-size: 52ch; margin: var(--sp-3) 0 0; color: var(--color-text-secondary); font-size: 1.02rem; line-height: 2; }
.problem-detail-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.75rem; margin: var(--sp-4) 0 0; color: var(--color-text-muted); font-size: 0.72rem; }
.problem-detail-meta span + span::before { content: "•"; margin-inline-end: 0.65rem; color: var(--color-border-strong); }
.problem-detail-art { display: block; align-self: end; aspect-ratio: 16 / 9; margin-block-start: var(--sp-4); border: 1px dashed var(--color-border-strong); border-radius: 14px; background: linear-gradient(150deg, color-mix(in oklab, var(--color-surface) 48%, transparent), color-mix(in oklab, var(--color-sage) 7%, transparent)); }

.problem-detail-body { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "main" "side"; gap: var(--sp-5); padding-block: 3rem 2.5rem; }
.problem-detail-main { grid-area: main; display: grid; align-content: start; gap: var(--sp-4); min-inline-size: 0; }
.problem-detail-side { grid-area: side; min-inline-size: 0; }

.problem-overview { display: grid; gap: var(--sp-4); padding: clamp(1.15rem, 3vw, 2.25rem); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--problems-radius); box-shadow: var(--problems-shadow); }
.problem-overview-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); padding-block-end: var(--sp-3); border-block-end: 1px solid var(--color-border); }
.problem-overview-head h2 { margin: 0; font-size: 1.15rem; font-weight: 800; }
.problem-overview-mark { position: relative; inline-size: 1.45rem; block-size: 1.45rem; flex: none; border: 1px solid color-mix(in oklab, var(--color-primary) 45%, var(--color-border)); border-radius: 4px; }
.problem-overview-mark::before, .problem-overview-mark::after { content: ""; position: absolute; inset-inline: 0.27rem; block-size: 1px; background: color-mix(in oklab, var(--color-primary) 55%, transparent); }
.problem-overview-mark::before { inset-block-start: 0.5rem; box-shadow: 0 0.25rem 0 color-mix(in oklab, var(--color-primary) 55%, transparent); }
.problem-overview-mark::after { inset-block-start: 1.02rem; inline-size: 0.42rem; }
.problem-overview-kicker { margin-inline-start: auto; color: var(--color-text-muted); font-size: 0.7rem; }
.problem-prose { max-inline-size: 68ch; }
.problem-prose p { margin-block: 0 var(--sp-3); color: var(--color-text-secondary); font-size: 0.92rem; line-height: 2.1; }
.problem-prose p:last-child { margin-block-end: 0; }
.problem-prose h2 { margin-block: var(--sp-4) var(--sp-2); color: var(--color-text); font-size: 1.02rem; font-weight: 800; }
.problem-prose h2:first-child { margin-block-start: 0; }
.problem-prose a { color: var(--color-primary-text); text-decoration: underline; text-underline-offset: 3px; }
.problem-prose ul { margin: 0 0 var(--sp-3); padding-inline-start: 1.2rem; color: var(--color-text-secondary); font-size: 0.9rem; line-height: 2; }
.problem-key-question { position: relative; margin: 0; padding: var(--sp-4); border-radius: 9px; background: color-mix(in oklab, var(--color-primary) 7%, var(--color-surface-muted)); border-inline-start: 3px solid color-mix(in oklab, var(--color-primary) 66%, var(--color-border)); }
.problem-key-question-mark { display: block; block-size: 0.7em; color: var(--color-primary); font-size: 2.35rem; line-height: 0.7; }
.problem-key-question p { margin: var(--sp-2) 0 var(--sp-1); color: var(--color-text); font-size: 0.92rem; font-weight: 600; line-height: 2; }
.problem-key-question footer { color: var(--color-primary-text); font-size: 0.68rem; font-weight: 700; }
.problem-read-more { border-block-start: 1px solid var(--color-border); padding-block-start: var(--sp-3); }
.problem-read-more summary { display: flex; align-items: center; gap: var(--sp-2); inline-size: fit-content; color: var(--color-primary-text); font-size: 0.78rem; font-weight: 700; cursor: pointer; list-style: none; }
.problem-read-more summary::-webkit-details-marker, .problem-explore summary::-webkit-details-marker { display: none; }
.problem-read-more summary::after { content: ""; inline-size: 0.42rem; block-size: 0.42rem; border-inline-end: 2px solid currentColor; border-block-end: 2px solid currentColor; transform: rotate(45deg); transition: transform var(--motion); }
.problem-read-more[open] summary::after { transform: rotate(-135deg); }
.problem-read-more-body { padding-block-start: var(--sp-3); }

.problem-explore { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--problems-radius); box-shadow: var(--problems-shadow); }
.problem-explore > summary { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--sp-2); padding: var(--sp-4); color: var(--color-text); font-size: 0.86rem; font-weight: 800; cursor: pointer; list-style: none; }
.problem-explore > summary::after { content: ""; inline-size: 0.46rem; block-size: 0.46rem; border-inline-end: 2px solid var(--color-primary-text); border-block-end: 2px solid var(--color-primary-text); transform: rotate(45deg); transition: transform var(--motion); }
.problem-explore[open] > summary::after { transform: rotate(-135deg); }
.problem-explore-count { margin-inline-start: auto; color: var(--color-text-muted); font-size: 0.68rem; font-weight: 500; }
.problem-explore-body { display: grid; gap: var(--sp-5); padding: 0 var(--sp-4) var(--sp-4); }

.problem-section { display: grid; gap: var(--sp-3); }
.problem-section-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--sp-2); padding-block-end: var(--sp-2); border-block-end: 1px solid var(--color-border); }
.problem-section-head h2 { margin: 0; font-size: 1rem; font-weight: 800; }
.problem-section-count { color: var(--color-text-muted); font-size: 0.68rem; }
.problem-content-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); }
.problem-content-card { display: grid; grid-template-columns: minmax(0, 1fr) 4.5rem; gap: var(--sp-3); align-items: center; padding: var(--sp-3); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--problems-radius); box-shadow: 0 8px 20px color-mix(in oklab, var(--color-navy) 4%, transparent); color: var(--color-text); text-decoration: none; transition: border-color var(--motion), transform var(--motion); }
.problem-content-card:hover { border-color: var(--color-primary); transform: translateY(-2px); }
.problem-content-body { display: grid; gap: 0.2rem; min-inline-size: 0; }
.problem-content-kind { color: var(--color-primary-text); font-size: 0.66rem; font-weight: 700; }
.problem-content-title { margin: 0; font-size: 0.92rem; font-weight: 800; line-height: 1.7; }
.problem-content-summary { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; margin: 0; overflow: hidden; color: var(--color-text-secondary); font-size: 0.74rem; line-height: 1.85; }
.problem-content-arrow { color: var(--color-text-muted); font-size: 0.8rem; }
.problem-content-art { display: block; inline-size: 4.5rem; aspect-ratio: 1; border: 1px dashed var(--color-border-strong); border-radius: 50%; background: color-mix(in oklab, var(--color-sage) 10%, var(--color-surface-muted)); }
.problem-content-art--fromzero { background: color-mix(in oklab, var(--color-primary) 9%, var(--color-surface-muted)); }
.problem-content-art--philosophers { background: color-mix(in oklab, var(--color-sage) 13%, var(--color-surface-muted)); }
.problem-content-art--movies { background: color-mix(in oklab, var(--color-gold) 14%, var(--color-surface-muted)); }
.problem-content-art--children { background: color-mix(in oklab, var(--color-info) 10%, var(--color-surface-muted)); }
.problem-content-art--articles { background: color-mix(in oklab, var(--color-primary) 7%, var(--color-surface-muted)); }

.problem-detail-side-card { display: grid; gap: var(--sp-3); padding: var(--sp-3); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--problems-radius); box-shadow: var(--problems-shadow); }
.problem-side-art { display: block; aspect-ratio: 16 / 9; border: 1px dashed var(--color-border-strong); border-radius: 8px; background: color-mix(in oklab, var(--color-sage) 9%, var(--color-surface-muted)); }
.problem-side-question { display: grid; gap: 0.4rem; padding: var(--sp-3); border-radius: 8px; background: color-mix(in oklab, var(--color-primary) 6%, var(--color-surface-muted)); }
.problem-side-question-label { color: var(--color-primary-text); font-size: 0.66rem; font-weight: 800; }
.problem-side-question p { margin: 0; color: var(--color-text); font-size: 0.78rem; line-height: 1.95; }
.problem-side-quote { margin: 0; padding: var(--sp-3); border-radius: 8px; background: var(--color-surface-muted); }
.problem-side-quote blockquote { margin: 0; color: var(--color-text); font-size: 0.78rem; line-height: 1.95; }
.problem-side-quote blockquote::before { content: "“"; display: block; block-size: 0.6em; color: var(--color-primary); font-size: 1.7rem; line-height: 0.6; }
.problem-side-quote figcaption { margin-block-start: var(--sp-1); color: var(--color-primary-text); font-size: 0.66rem; font-weight: 700; }
.problem-side-info { display: grid; gap: var(--sp-2); }
.problem-side-info > h2 { margin: 0; font-size: 0.9rem; font-weight: 800; }
.problem-side-info-list { display: grid; gap: 0.4rem; margin: 0; }
.problem-side-info-list > div { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-2); padding-block-end: 0.4rem; border-block-end: 1px solid var(--color-border); }
.problem-side-info-list > div:last-child { border-block-end: 0; padding-block-end: 0; }
.problem-side-info-list dt { color: var(--color-text-muted); font-size: 0.7rem; }
.problem-side-info-list dd { margin: 0; color: var(--color-text); font-size: 0.74rem; font-weight: 700; }
.problem-side-cta { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-1); min-block-size: var(--control-h); padding-inline: var(--sp-3); border-radius: 6px; background: var(--color-primary); color: var(--color-on-primary); font-size: 0.76rem; font-weight: 800; text-decoration: none; transition: background var(--motion); }
.problem-side-cta:hover { background: var(--color-primary-hover); color: var(--color-on-primary); }

.problem-related { display: grid; gap: var(--sp-4); padding-block: var(--sp-5) var(--sp-6); border-block-start: 1px solid var(--color-border); }
.problem-related-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--sp-2); }
.problem-related-head h2 { margin: 0; font-size: 1.2rem; font-weight: 800; }
.problem-related-head a { color: var(--color-primary-text); font-size: 0.74rem; font-weight: 700; text-decoration: none; }
.problem-related-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); }
.problem-related-card { display: flex; flex-direction: column; gap: 0.45rem; min-inline-size: 0; padding: var(--sp-4); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--problems-radius); box-shadow: var(--problems-shadow); color: var(--color-text); text-decoration: none; transition: border-color var(--motion), transform var(--motion); }
.problem-related-card:hover { border-color: var(--color-primary); transform: translateY(-2px); }
.problem-related-top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-2); }
.problem-related-art { display: block; inline-size: 4.25rem; aspect-ratio: 1; border: 1px dashed var(--color-border-strong); border-radius: 50%; background: color-mix(in oklab, var(--color-sage) 10%, var(--color-surface-muted)); }
.problem-related-art--identity { background: color-mix(in oklab, var(--color-sage) 16%, var(--color-surface-muted)); }
.problem-related-art--knowledge { background: color-mix(in oklab, var(--color-info) 13%, var(--color-surface-muted)); }
.problem-related-art--ethics { background: color-mix(in oklab, var(--color-primary) 10%, var(--color-surface-muted)); }
.problem-related-art--society { background: color-mix(in oklab, var(--color-gold) 16%, var(--color-surface-muted)); }
.problem-related-art--life { background: color-mix(in oklab, var(--problems-life) 12%, var(--color-surface-muted)); }
.problem-related-card h3 { margin: 0; font-size: 1rem; font-weight: 800; line-height: 1.7; }
.problem-related-summary { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; margin: 0; overflow: hidden; color: var(--color-text-secondary); font-size: 0.78rem; line-height: 1.9; }
.problem-related-meta { display: flex; flex-wrap: wrap; gap: 0.2rem 0.45rem; margin: 0; color: var(--color-text-muted); font-size: 0.66rem; }
.problem-related-meta > span + span::before { content: "•"; margin-inline-end: 0.4rem; color: var(--color-border-strong); }
.problem-related-arrow { margin-block-start: auto; align-self: flex-start; color: var(--color-primary-text); font-size: 0.82rem; }

.problem-other { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); grid-template-areas: "art copy" "cta cta"; align-items: center; gap: var(--sp-2) var(--sp-4); padding: var(--sp-4); border-radius: var(--problems-radius); background: color-mix(in oklab, var(--color-cream) 66%, var(--color-surface)); border: 1px solid var(--color-border); }
.problem-other-art { display: block; inline-size: 4.5rem; aspect-ratio: 1; border: 1px dashed var(--color-border-strong); border-radius: 8px; background: color-mix(in oklab, var(--color-sage) 8%, var(--color-surface)); }
.problem-other-copy { grid-area: copy; }
.problem-other-art { grid-area: art; }
.problem-other-cta { justify-self: start; }
.problem-other-copy h2 { margin: 0; font-size: 1rem; font-weight: 800; }
.problem-other-copy p { margin: 0.25rem 0 0; color: var(--color-text-secondary); font-size: 0.78rem; line-height: 1.9; }
.problem-other-cta { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-1); min-block-size: var(--control-h); padding-inline: var(--sp-3); border-radius: 6px; background: var(--color-primary); color: var(--color-on-primary); font-size: 0.74rem; font-weight: 700; text-decoration: none; white-space: nowrap; }
.problem-other-cta:hover { background: var(--color-primary-hover); color: var(--color-on-primary); }

@media (min-width: 40em) {
  .problem-content-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .problem-related-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .problem-other { grid-template-columns: minmax(0, 1fr) auto 4.5rem; grid-template-areas: "copy cta art"; }
  .problem-other-cta { justify-self: stretch; }
  .problem-other-copy { grid-area: copy; }
  .problem-other-cta { grid-area: cta; }
  .problem-other-art { grid-area: art; }
}
@media (min-width: 48em) {
  .problem-detail-hero { padding-block-start: var(--sp-4); }
  .problem-detail-inner { grid-template-columns: minmax(0, 1fr) 18rem; align-items: center; gap: var(--sp-4); padding-block: var(--sp-2) var(--sp-8); padding-inline: var(--sp-2); }
  .problem-detail-art { display: block; aspect-ratio: 1.12 / 1; margin-block-start: 0; }
}
@media (min-width: 64em) {
  .problem-detail-inner { grid-template-columns: minmax(0, 1fr) 24rem; gap: var(--sp-8); padding-block: var(--sp-2) 1.5rem; padding-inline: var(--sp-4); }
  .problem-detail-copy { margin-inline-start: 3rem; }
  .problem-detail-body { grid-template-columns: 18rem minmax(0, 1fr); grid-template-areas: "side main"; gap: var(--sp-6); }
  .problem-detail-side { position: sticky; inset-block-start: var(--sp-4); }
  .problem-related-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 72em) {
  .problem-detail-inner { grid-template-columns: minmax(0, 1fr) 26rem; }
}
@media (min-width: 64em) and (max-height: 52em) {
  .problem-detail-side { position: static; }
}















/* Movies directory — editorial film sheet, blank image slots only */
.page-movies-list {
  --movies-radius: 10px;
  --movies-shadow: 0 10px 26px color-mix(in oklab, var(--color-navy) 6%, transparent);
  --movies-hero-bg: color-mix(in oklab, var(--color-cream) 74%, var(--color-background));
  --movies-life: color-mix(in oklab, var(--color-info) 42%, var(--color-primary));
}
.page-movies-list .site-main { max-inline-size: var(--container-max); padding-block-start: 0; }
.movies-hub { max-inline-size: 100%; margin-inline: auto; }

.movies-hero { position: relative; isolation: isolate; padding-block: var(--sp-6) 0; }
.movies-hero-band { position: absolute; inset-block: 0; inset-inline: 0; z-index: 0; background: var(--movies-hero-bg); box-shadow: 0 0 0 100vmax var(--movies-hero-bg); clip-path: inset(0 -100vmax); pointer-events: none; }
.movies-hero-band::before { content: ""; position: absolute; inset: 0; background: radial-gradient(48% 80% at 10% 100%, color-mix(in oklab, var(--color-sage) 13%, transparent), transparent 72%), radial-gradient(52% 78% at 90% 104%, color-mix(in oklab, var(--color-gold) 12%, transparent), transparent 74%), radial-gradient(38% 58% at 78% 8%, color-mix(in oklab, var(--color-primary) 6%, transparent), transparent 72%); }
.movies-hero-inner { position: relative; z-index: 2; display: grid; gap: var(--sp-6); padding-block: var(--sp-2) var(--sp-6); }
.movies-hero-copy { max-inline-size: 44rem; }
.movies-hero-copy .breadcrumbs { margin-block-end: var(--sp-2); font-size: var(--text-xs); }
.movies-badge { display: inline-flex; align-items: center; min-block-size: 1.45rem; margin-block-end: var(--sp-2); padding-inline: var(--sp-2); border: 1px solid color-mix(in oklab, var(--color-primary) 25%, var(--color-border)); border-radius: 6px; background: color-mix(in oklab, var(--color-primary) 7%, var(--color-surface)); color: var(--color-primary-text); font-size: 0.68rem; font-weight: 700; }
.movies-hero h1 { margin: 0; font-size: clamp(2.25rem, 4.6vw, 3rem); font-weight: 800; line-height: 1.35; }
.movies-hero-lead { max-inline-size: 54ch; margin: var(--sp-3) 0 0; color: var(--color-text-secondary); font-size: 1.02rem; line-height: 2; }
.movies-hero-art { display: block; align-self: end; aspect-ratio: 16 / 9; margin-block-start: var(--sp-4); border: 1px dashed var(--color-border-strong); border-radius: 14px; background: linear-gradient(150deg, color-mix(in oklab, var(--color-surface) 48%, transparent), color-mix(in oklab, var(--color-sage) 7%, transparent)); }

.movies-tabs { position: relative; z-index: 3; display: flex; flex-wrap: nowrap; gap: 0.4rem; padding-block: var(--sp-1) var(--sp-3); padding-inline: 2px; overflow-x: auto; overscroll-behavior-inline: contain; scrollbar-width: none; mask-image: linear-gradient(to left, rgb(0 0 0) 92%, transparent); -webkit-mask-image: linear-gradient(to left, rgb(0 0 0) 92%, transparent); }
.movies-tabs::-webkit-scrollbar { display: none; }
.movies-tab { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 0.4rem; min-block-size: var(--control-h); padding: 0 var(--sp-3); border: 1px solid var(--color-border); border-radius: 10px; background: var(--color-surface); color: var(--color-text); font-size: 0.8rem; font-weight: 600; text-decoration: none; box-shadow: 0 4px 14px color-mix(in oklab, var(--color-navy) 4%, transparent); transition: border-color var(--motion), color var(--motion), background var(--motion), transform var(--motion); }
.movies-tab:hover { border-color: var(--color-primary); color: var(--color-primary-text); transform: translateY(-1px); }
.movies-tab.is-current { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-on-primary); }
.movies-tab-dot { display: inline-block; inline-size: 0.45rem; block-size: 0.45rem; flex: none; border-radius: 50%; background: var(--color-primary); }
.movies-tab-dot--identity { background: var(--color-sage); }
.movies-tab-dot--knowledge { background: var(--color-info); }
.movies-tab-dot--ethics { background: var(--color-primary); }
.movies-tab-dot--society { background: var(--color-gold); }
.movies-tab-dot--life { background: var(--movies-life); }
.movies-tab.is-current .movies-tab-dot { background: var(--color-on-primary); }

.movies-layout { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "side" "main"; gap: var(--sp-5); padding-block: 2.5rem 3rem; align-items: start; }
.movies-main { grid-area: main; min-inline-size: 0; }
.movies-filters { grid-area: side; min-inline-size: 0; }
.movies-toolbar { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--sp-2); margin-block-end: var(--sp-4); }
.movies-result-count { margin: 0; color: var(--color-text-secondary); font-size: 0.78rem; }
.movies-result-count strong { color: var(--color-text); font-size: 1rem; }
.movies-clear { color: var(--color-primary-text); font-size: 0.72rem; font-weight: 700; }
.movies-clear:hover { color: var(--color-primary-hover); }

.movies-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); }
.movie-card { display: flex; flex-direction: column; min-inline-size: 0; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--movies-radius); box-shadow: var(--movies-shadow); overflow: hidden; }
.movie-card-art { position: relative; display: block; aspect-ratio: 16 / 9; border-block-end: 1px dashed var(--color-border-strong); background: linear-gradient(135deg, color-mix(in oklab, var(--color-sage) 12%, var(--color-surface-muted)), color-mix(in oklab, var(--color-primary) 8%, var(--color-surface-muted))); text-decoration: none; transition: border-color var(--motion); }
.movie-card-art:hover { border-block-end-color: var(--color-primary); }
.movie-card-tag { position: absolute; inset-block-start: 0.6rem; inset-inline-end: 0.6rem; max-inline-size: calc(100% - 1.2rem); padding-inline: var(--sp-2); padding-block: 0.15rem; border: 1px solid var(--color-border); border-radius: 5px; background: color-mix(in oklab, var(--color-surface) 92%, transparent); color: var(--color-text); font-size: 0.62rem; font-weight: 700; }
.movie-card-body { display: flex; flex: 1; flex-direction: column; gap: 0.35rem; padding: var(--sp-3); }
.movie-card-title { margin: 0; font-size: 1rem; font-weight: 800; line-height: 1.75; }
.movie-card-title a { color: var(--color-text); text-decoration: none; }
.movie-card-title a:hover { color: var(--color-primary-text); }
.movie-card-original { margin: 0; color: var(--color-text-muted); font-size: 0.72rem; direction: ltr; text-align: end; }
.movie-card-meta { display: flex; flex-wrap: wrap; gap: 0.15rem 0.4rem; margin: 0.1rem 0 0; color: var(--color-text-muted); font-size: 0.68rem; }
.movie-card-meta > span + span::before { content: "·"; margin-inline-end: 0.4rem; color: var(--color-border-strong); }
.movie-card-summary { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; margin: 0.25rem 0 0; overflow: hidden; color: var(--color-text-secondary); font-size: 0.76rem; line-height: 1.9; }
.movie-card-actions { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); margin-block-start: auto; padding-block-start: var(--sp-3); }
.movie-card-cta { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-1); min-block-size: 2.35rem; padding-inline: var(--sp-3); border-radius: 6px; background: var(--color-primary); color: var(--color-on-primary); font-size: 0.72rem; font-weight: 800; text-decoration: none; transition: background var(--motion); }
.movie-card-cta:hover { background: var(--color-primary-hover); color: var(--color-on-primary); }

.movies-filters { display: grid; gap: var(--sp-3); padding: var(--sp-3); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--movies-radius); box-shadow: var(--movies-shadow); }
.movies-filters-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-2); padding-block-end: var(--sp-2); border-block-end: 1px solid var(--color-border); }
.movies-filters-head h2 { margin: 0; font-size: 1rem; font-weight: 800; }
.movies-filter-count { color: var(--color-text-muted); font-size: 0.68rem; }
.movies-filter-body { display: grid; gap: var(--sp-3); }
.movies-filter-form { display: grid; gap: var(--sp-3); }
.movies-filters-toggle { display: none; align-items: center; justify-content: space-between; gap: var(--sp-2); flex: 1; min-block-size: var(--control-h); padding-inline: var(--sp-3); border: 1px solid var(--color-border); border-radius: 6px; background: var(--color-surface-muted); color: var(--color-text); font: inherit; font-size: 0.76rem; font-weight: 700; cursor: pointer; }
.movies-filters-caret { inline-size: 0.45rem; block-size: 0.45rem; border-inline-end: 2px solid currentColor; border-block-end: 2px solid currentColor; transform: rotate(45deg); transition: transform var(--motion); }
.movies-filters-toggle[aria-expanded="true"] .movies-filters-caret { transform: rotate(-135deg); }
.movies-filter-field { display: grid; gap: 0.3rem; }
.movies-filter-field label, .movies-filter-group legend { color: var(--color-text-secondary); font-size: 0.72rem; font-weight: 700; }
.movies-filter-field input, .movies-filter-field select { inline-size: 100%; min-block-size: 2.35rem; padding-inline: var(--sp-2); border: 1px solid var(--color-border); border-radius: 6px; background: var(--color-surface); color: var(--color-text); font: inherit; font-size: 0.78rem; }
.movies-filter-group { display: grid; gap: 0.25rem; margin: 0; padding: 0; border: 0; }
.movies-filter-option { display: flex; align-items: center; gap: var(--sp-2); min-block-size: 1.9rem; color: var(--color-text-secondary); font-size: 0.74rem; cursor: pointer; }
.movies-filter-option input { accent-color: var(--color-primary); }
.movies-filter-submit { inline-size: 100%; justify-content: center; }
.movies-filter-clear { color: var(--color-primary-text); font-size: 0.72rem; font-weight: 700; text-align: center; }
.movies-filter-clear:hover { color: var(--color-primary-hover); }
.movies-filters-head h2 { display: none; }
.movies-filters-toggle { display: flex; }
.movies-filter-body { display: none; }
.movies-filter-body.is-open { display: grid; }
.movies-filter-quote { display: grid; gap: var(--sp-2); padding-block-start: var(--sp-3); border-block-start: 1px solid var(--color-border); }
.movies-filter-art { display: block; aspect-ratio: 16 / 9; border: 1px dashed var(--color-border-strong); border-radius: 8px; background: color-mix(in oklab, var(--color-sage) 8%, var(--color-surface-muted)); }
.movies-filter-quote p { margin: 0; color: var(--color-text); font-size: 0.78rem; line-height: 1.95; }
.movies-filter-quote footer { color: var(--color-primary-text); font-size: 0.66rem; font-weight: 700; }

.movies-outro { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); grid-template-areas: "art copy" "cta cta"; align-items: center; gap: var(--sp-4); padding: var(--sp-4); border-radius: var(--movies-radius); background: color-mix(in oklab, var(--color-cream) 66%, var(--color-surface)); border: 1px solid var(--color-border); }
.movies-outro-art { display: block; inline-size: 4.5rem; aspect-ratio: 1; border: 1px dashed var(--color-border-strong); border-radius: 8px; background: color-mix(in oklab, var(--color-sage) 8%, var(--color-surface)); }
.movies-outro-copy { grid-area: copy; }
.movies-outro-cta { justify-self: start; }
.movies-outro-art { grid-area: art; }
.movies-outro-copy h2 { margin: 0; font-size: 1rem; font-weight: 800; }
.movies-outro-copy p { margin: 0.25rem 0 0; color: var(--color-text-secondary); font-size: 0.78rem; line-height: 1.9; }
.movies-outro-cta { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-1); min-block-size: var(--control-h); padding-inline: var(--sp-3); border-radius: 6px; background: var(--color-primary); color: var(--color-on-primary); font-size: 0.74rem; font-weight: 700; text-decoration: none; white-space: nowrap; }
.movies-outro-cta:hover { background: var(--color-primary-hover); color: var(--color-on-primary); }

@media (min-width: 40em) {
  .movies-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .movies-outro { grid-template-columns: minmax(0, 1fr) auto 4.5rem; grid-template-areas: "copy cta art"; }
  .movies-outro-copy { grid-area: copy; }
  .movies-outro-cta { grid-area: cta; }
  .movies-outro-art { grid-area: art; }
}
@media (min-width: 48em) {
  .movies-hero { padding-block-start: var(--sp-4); }
  .movies-hero-inner { grid-template-columns: minmax(0, 1fr) 18rem; align-items: center; gap: var(--sp-4); padding-block: var(--sp-2) var(--sp-8); padding-inline: var(--sp-2); }
  .movies-hero-art { aspect-ratio: 4 / 3; margin-block-start: 0; }
}
@media (min-width: 64em) {
  .movies-filters-head h2 { display: block; }
  .movies-filters-toggle { display: none; }
  .movies-filter-body { display: grid; }
  .movies-hero-band { inset-block-end: 1.75rem; }
  .movies-hero-inner { grid-template-columns: minmax(0, 1fr) 24rem; gap: var(--sp-8); padding-block: var(--sp-2) 1.5rem; padding-inline: var(--sp-4); }
  .movies-hero-copy { margin-inline-start: 3rem; }
  .movies-tabs { justify-content: center; overflow-x: visible; padding-inline: var(--sp-4); mask-image: none; -webkit-mask-image: none; }
  .movies-layout { grid-template-columns: 18rem minmax(0, 1fr); grid-template-areas: "side main"; gap: var(--sp-6); }
  .movies-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .movies-filters { position: sticky; inset-block-start: var(--sp-4); }
}
@media (min-width: 72em) {
  .movies-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 64em) and (max-height: 52em) {
  .movies-filters { position: static; }
}







/* Philosophers directory — aligned with the movies/problems landing language */
.page-philosophers-list .site-main { max-inline-size: var(--container-max); padding-block-start: 0; }
.page-philosophers-list .ph-hero { position: relative; isolation: isolate; display: block; padding-block: var(--sp-6) 0; }
.page-philosophers-list .ph-hero-band { position: absolute; inset-block: 0; inset-inline: 0; z-index: 0; background: color-mix(in oklab, var(--color-cream) 74%, var(--color-background)); box-shadow: 0 0 0 100vmax color-mix(in oklab, var(--color-cream) 74%, var(--color-background)); clip-path: inset(0 -100vmax); pointer-events: none; }
.page-philosophers-list .ph-hero-band::before { content: ""; position: absolute; inset: 0; background: radial-gradient(48% 80% at 10% 100%, color-mix(in oklab, var(--color-sage) 13%, transparent), transparent 72%), radial-gradient(52% 78% at 90% 104%, color-mix(in oklab, var(--color-gold) 12%, transparent), transparent 74%), radial-gradient(38% 58% at 78% 8%, color-mix(in oklab, var(--color-primary) 6%, transparent), transparent 72%); }
.page-philosophers-list .ph-hero::after { display: none; }
.page-philosophers-list .ph-hero-inner { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "copy" "art"; justify-items: stretch; gap: var(--sp-5); padding-block: var(--sp-2) var(--sp-6); }
.page-philosophers-list .ph-hero-copy { grid-area: copy; inline-size: 100%; max-inline-size: none; justify-self: stretch; text-align: start; }
.page-philosophers-list .ph-hero-copy .breadcrumbs { margin-block-end: var(--sp-2); font-size: var(--text-xs); }
.page-philosophers-list .ph-hero-badge { display: inline-flex; align-items: center; min-block-size: 1.45rem; margin-block-end: var(--sp-2); padding-inline: var(--sp-2); border: 1px solid color-mix(in oklab, var(--color-primary) 25%, var(--color-border)); border-radius: 6px; background: color-mix(in oklab, var(--color-primary) 7%, var(--color-surface)); color: var(--color-primary-text); font-size: 0.68rem; font-weight: 700; }
.page-philosophers-list .ph-hero .eyebrow { margin-block-end: var(--sp-1); }
.page-philosophers-list .ph-hero h1 { margin: 0; font-size: clamp(2.25rem, 4.6vw, 3rem); font-weight: 800; line-height: 1.35; }
.page-philosophers-list .ph-hero .text-lead { max-inline-size: 52ch; margin: var(--sp-3) 0 0; color: var(--color-text-secondary); font-size: 1.02rem; line-height: 2; }
.page-philosophers-list .ph-hero .hero-rule { margin-block: var(--sp-4) 0; }
.page-philosophers-list .ph-hero-art { position: relative; grid-area: art; display: block; align-self: center; justify-self: stretch; inline-size: 100%; aspect-ratio: 16 / 9; margin-block-start: var(--sp-2); border: 1px dashed var(--color-border-strong); border-radius: 14px; background: linear-gradient(150deg, color-mix(in oklab, var(--color-surface) 48%, transparent), color-mix(in oklab, var(--color-sage) 7%, transparent)); overflow: visible; mask-image: none; -webkit-mask-image: none; }
.page-philosophers-list .ph-hero-art::before { content: none; }
.page-philosophers-list .ph-hero-art-img { display: none; }

.page-philosophers-list .ph-era-tabs { position: relative; z-index: 3; display: flex; flex-wrap: nowrap; gap: 0.4rem; padding-block: var(--sp-1) var(--sp-3); padding-inline: 2px; overflow-x: auto; overscroll-behavior-inline: contain; scrollbar-width: none; mask-image: linear-gradient(to left, rgb(0 0 0) 92%, transparent); -webkit-mask-image: linear-gradient(to left, rgb(0 0 0) 92%, transparent); }
.page-philosophers-list .ph-era-tabs::-webkit-scrollbar { display: none; }
.page-philosophers-list .ph-era-tab { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 0.4rem; min-block-size: var(--control-h); padding: 0 var(--sp-3); border: 1px solid var(--color-border); border-radius: 10px; background: var(--color-surface); color: var(--color-text); font-size: 0.8rem; font-weight: 600; text-decoration: none; box-shadow: 0 4px 14px color-mix(in oklab, var(--color-navy) 4%, transparent); transition: border-color var(--motion), color var(--motion), background var(--motion), transform var(--motion); }
.page-philosophers-list .ph-era-tab:hover { border-color: var(--color-primary); color: var(--color-primary-text); transform: translateY(-1px); }
.page-philosophers-list .ph-era-tab.is-current { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-on-primary); }
.page-philosophers-list .ph-era-dot { display: inline-block; inline-size: 0.45rem; block-size: 0.45rem; flex: none; border-radius: 50%; background: var(--color-primary); }
.page-philosophers-list .ph-era-dot--ancient { background: var(--color-gold); }
.page-philosophers-list .ph-era-dot--medieval { background: var(--color-sage); }
.page-philosophers-list .ph-era-dot--modern { background: var(--color-info); }
.page-philosophers-list .ph-era-dot--contemporary { background: var(--color-primary); }
.page-philosophers-list .ph-era-tab.is-current .ph-era-dot { background: var(--color-on-primary); }

.page-philosophers-list .ph-directory { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "side" "main"; gap: var(--sp-5); padding-block: 2.5rem 3rem; align-items: start; }
.page-philosophers-list .ph-filters { grid-area: side; min-inline-size: 0; }
.page-philosophers-list .ph-results { grid-area: main; min-inline-size: 0; }
.page-philosophers-list .ph-directory-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); margin: 0; padding: 0; list-style: none; }
.page-philosophers-list .ph-entry { display: block; min-inline-size: 0; }
.page-philosophers-list .ph-entry-link { display: flex; flex-direction: column; block-size: 100%; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 10px; box-shadow: 0 10px 26px color-mix(in oklab, var(--color-navy) 6%, transparent); overflow: hidden; color: var(--color-text); text-decoration: none; transition: border-color var(--motion), transform var(--motion); }
.page-philosophers-list .ph-entry-link:hover { border-color: var(--color-primary); transform: translateY(-2px); }
.page-philosophers-list .ph-entry-media { position: relative; display: block; flex: none; align-self: stretch; inline-size: 100%; aspect-ratio: 4 / 5; border: 0; border-block-end: 1px dashed var(--color-border-strong); background: linear-gradient(135deg, color-mix(in oklab, var(--color-sage) 10%, var(--color-surface-muted)), color-mix(in oklab, var(--color-primary) 7%, var(--color-surface-muted))); }
.page-philosophers-list .ph-entry-body { display: flex; flex: 1; flex-direction: column; gap: 0.35rem; padding: var(--sp-3); }
.page-philosophers-list .ph-entry-name { font-size: 1rem; font-weight: 800; line-height: 1.75; }
.page-philosophers-list .ph-entry-meta { display: flex; flex-wrap: wrap; gap: 0 var(--sp-2); color: var(--color-text-muted); font-size: 0.72rem; }
.page-philosophers-list .ph-entry-summary { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; margin: 0.25rem 0 0; overflow: hidden; color: var(--color-text-secondary); font-size: 0.76rem; line-height: 1.9; }
.page-philosophers-list .ph-entry-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; margin-block-start: auto; padding-block-start: var(--sp-3); }
.page-philosophers-list .ph-entry-tags { display: flex; flex-wrap: wrap; gap: 0.25rem; }
.page-philosophers-list .ph-tag { border: 1px solid var(--color-border); border-radius: 4px; padding-inline: var(--sp-2); padding-block: 0.05rem; background: var(--color-surface-muted); color: var(--color-text-secondary); font-size: 0.62rem; line-height: 1.7; }
.page-philosophers-list .ph-entry-more { margin-inline-start: auto; color: var(--color-primary-text); font-size: 0.7rem; font-weight: 700; }
.page-philosophers-list .ph-entry-go { inline-size: 1.9rem; block-size: 1.9rem; border-color: var(--color-border); }
.page-philosophers-list .ph-entry-go::before { inline-size: 0.34rem; block-size: 0.34rem; }

.page-philosophers-list .ph-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-2) var(--sp-3); }
.page-philosophers-list .ph-count { margin: 0; color: var(--color-text-secondary); font-size: 0.78rem; }

@media (min-width: 40em) {
  .page-philosophers-list .ph-directory-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-philosophers-list .ph-hero { padding-block: var(--sp-4) 0; }
  .page-philosophers-list .ph-hero-inner { grid-template-columns: minmax(0, 1fr) 18rem; grid-template-areas: "copy art"; align-items: center; gap: var(--sp-4); padding-block: var(--sp-2) var(--sp-8); padding-inline: var(--sp-2); }
  .page-philosophers-list .ph-hero-art { aspect-ratio: 4 / 3; margin-block-start: 0; }
}
@media (min-width: 64em) {
  .page-philosophers-list .ph-hero-band { inset-block-end: 1.75rem; }
  .page-philosophers-list .ph-hero-inner { grid-template-columns: minmax(0, 1fr) 24rem; gap: var(--sp-8); padding-block: var(--sp-2) 1.5rem; padding-inline: var(--sp-4); }
  .page-philosophers-list .ph-hero-copy { margin-inline-start: 3rem; inline-size: calc(100% - 3rem); }
  .page-philosophers-list .ph-era-tabs { justify-content: center; overflow-x: visible; padding-inline: var(--sp-4); mask-image: none; -webkit-mask-image: none; }
  .page-philosophers-list .ph-directory { grid-template-columns: 18rem minmax(0, 1fr); grid-template-areas: "side main"; gap: var(--sp-6); }
  .page-philosophers-list .ph-filters { position: sticky; inset-block-start: var(--sp-4); }
  .page-philosophers-list .ph-directory-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 64em) and (max-height: 52em) {
  .page-philosophers-list .ph-filters { position: static; }
}









/* Home landing — wide editorial system, blank media frames only.
   Scope: .page-home-landing. Other pillars keep the 68rem site shell. */
.page-home-landing {
  --home-section-gap: clamp(3rem, 3.6vw, 3.75rem);
  --home-head-gap: 1.5rem;
  --home-radius: 12px;
  --home-h1: clamp(2rem, 2.2vw, 2.15rem);
  --home-h2: clamp(1.3rem, 1.4vw, 1.4rem);
  --home-body: 0.84rem;
  --home-meta: 0.72rem;
  --home-shadow: 0 10px 28px color-mix(in oklab, var(--color-navy) 7%, transparent);
}

/* P1 — shell and chrome */
.page-home-landing .site-main { max-inline-size: var(--container-wide); padding-block: 0; }
.page-home-landing .site-header .site-nav { max-inline-size: var(--container-wide); padding-block: 1.15rem; }
.page-home-landing .site-footer .container { max-inline-size: var(--container-wide); }
@media (min-width: 72em) {
  .page-home-landing .site-nav .nav-links { gap: 1.25rem; }
  .page-home-landing .site-nav .nav-links > li > :is(a, button):not(.btn):not(.dropdown-trigger) { font-size: 1rem; font-weight: 600; }
  .page-home-landing .nav-actions { gap: 0.65rem; }
  .page-home-landing .nav-actions .btn { min-block-size: 2.5rem; padding-inline: 1.1rem; font-size: 0.82rem; }
  .page-home-landing .nav-search { display: grid; place-items: center; inline-size: 2.5rem; block-size: 2.5rem; border: 1px solid color-mix(in oklab, var(--color-on-navy) 26%, transparent); border-radius: 6px; font-size: 1.8rem; text-decoration: none; }
  .page-home-landing .brand-copy strong { font-size: 1.2rem; }
  .page-home-landing .brand-copy small { font-size: 0.72rem; }
}

/* P2 — hero */
.landing-hero { position: relative; isolation: isolate; }
.landing-hero-band { position: absolute; inset-block: 0; inset-inline: 0; z-index: 0; background: color-mix(in oklab, var(--color-cream) 76%, var(--color-background)); box-shadow: 0 0 0 100vmax color-mix(in oklab, var(--color-cream) 76%, var(--color-background)); clip-path: inset(0 -100vmax); pointer-events: none; }
.landing-hero-band::before { content: ""; position: absolute; inset: 0; background: radial-gradient(42% 84% at 9% 104%, color-mix(in oklab, var(--color-sage) 11%, transparent), transparent 72%), radial-gradient(48% 76% at 92% 108%, color-mix(in oklab, var(--color-gold) 12%, transparent), transparent 74%), radial-gradient(36% 60% at 78% 6%, color-mix(in oklab, var(--color-primary) 6%, transparent), transparent 72%); }
.landing-hero-inner { position: relative; z-index: 1; display: grid; gap: 2rem; padding-block: clamp(2rem, 3.2vw, 2.75rem) clamp(2.2rem, 3.6vw, 3rem); }
.landing-hero-copy { min-inline-size: 0; }
.landing-kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin: 0; color: var(--color-primary-text); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.01em; }
.landing-kicker-dot { display: inline-block; inline-size: 0.38rem; block-size: 0.38rem; flex: none; border-radius: 50%; background: currentColor; }
.landing-hero h1 { max-inline-size: 16ch; margin: 0.45rem 0 0; font-size: var(--home-h1); font-weight: 800; line-height: 1.35; }
.landing-hero-lead { max-inline-size: 48ch; margin: 0.7rem 0 0; color: var(--color-text); font-size: 0.9rem; line-height: 1.9; }
.landing-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1rem; margin-block-start: 1.1rem; }
.landing-cta { min-block-size: 2.75rem; padding-inline: 1.1rem; font-size: 0.82rem; }
.landing-actions-note { color: var(--color-text-secondary); font-size: 0.75rem; line-height: 1.7; }
.landing-hero-art { aspect-ratio: 16 / 9; }

/* Shared blank media frame — replaces every former image position. */
:is(.landing-hero-art, .landing-pillar-art, .landing-feature-art, .landing-newsletter-art) { position: relative; display: grid; place-items: center; overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--home-radius); background: linear-gradient(145deg, color-mix(in oklab, var(--color-surface) 48%, transparent), color-mix(in oklab, var(--color-cream) 70%, transparent)), radial-gradient(70% 90% at 20% 10%, color-mix(in oklab, var(--color-sage) 9%, transparent), transparent 70%); box-shadow: inset 0 1px 0 color-mix(in oklab, var(--color-primary) 8%, white), var(--home-shadow); }
:is(.landing-hero-art, .landing-pillar-art, .landing-feature-art, .landing-newsletter-art)::before { content: ""; position: absolute; inset: 0; background: radial-gradient(58% 80% at 82% 100%, color-mix(in oklab, var(--color-gold) 9%, transparent), transparent 72%); opacity: 0.7; pointer-events: none; }
:is(.landing-hero-art, .landing-pillar-art, .landing-feature-art, .landing-newsletter-art)::after { content: "جای تصویر"; position: relative; z-index: 1; padding: 0.24rem 0.55rem; border: 1px solid color-mix(in oklab, var(--color-border-strong) 70%, transparent); border-radius: 4px; background: color-mix(in oklab, var(--color-surface) 76%, transparent); color: var(--color-text-secondary); font-size: var(--home-meta); font-weight: 600; line-height: 1.4; white-space: nowrap; }

/* P3 — pillars */
.landing-section { margin-block-start: var(--home-section-gap); }
.landing-section-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 0.6rem 2rem; margin-block-end: var(--home-head-gap); }
.landing-section-head h2 { margin: 0.25rem 0 0; font-size: var(--home-h2); font-weight: 800; }
.landing-section-head .landing-link { margin-block-start: 0; }
.landing-section-lead { max-inline-size: 38ch; margin: 0; color: var(--color-text-secondary); font-size: 0.78rem; line-height: 1.85; }
.landing-pillar-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
.landing-pillar { display: flex; flex-direction: column; min-inline-size: 0; overflow: hidden; background: var(--color-surface); border: 1px solid var(--color-border); border-block-start: 3px solid var(--card-rule); border-radius: var(--home-radius); box-shadow: var(--home-shadow); color: var(--color-text); text-decoration: none; transition: border-color var(--motion), transform var(--motion); }
.landing-pillar:hover { border-color: var(--card-rule); transform: translateY(-2px); }
.landing-pillar-art { flex: none; aspect-ratio: 16 / 9; margin: 0.75rem 0.75rem 0; }
.landing-pillar-body { display: flex; flex: 1; flex-direction: column; gap: 0.35rem; padding: 1rem; }
.landing-pillar-no { color: var(--card-rule); font-size: var(--home-meta); font-weight: 800; letter-spacing: 0.06em; }
.landing-pillar-title { font-size: 1rem; font-weight: 800; line-height: 1.65; text-wrap: balance; }
.landing-pillar-desc { color: var(--color-text-secondary); font-size: 0.82rem; line-height: 1.85; }
.landing-pillar-arrow { display: grid; place-items: center; inline-size: 2.25rem; block-size: 2.25rem; margin-block-start: auto; margin-inline-start: auto; border-radius: 50%; background: var(--card-rule); color: var(--color-on-primary); font-size: 0.95rem; }

/* P4 — feature bands */
.landing-feature { margin-block-start: var(--home-section-gap); }
.landing-feature--children { --card-rule: var(--color-accent-children); }
.landing-feature--movies { --card-rule: var(--color-accent-movies); }
.landing-feature--lab { --card-rule: var(--color-accent-lab); }
.landing-feature-inner { display: grid; gap: 2rem; padding: clamp(1.25rem, 2vw, 2rem); overflow: hidden; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 14px; box-shadow: var(--home-shadow); }
.landing-feature--children .landing-feature-inner { background: color-mix(in oklab, var(--color-sage) 6%, var(--color-surface)); border-color: color-mix(in oklab, var(--color-sage) 26%, var(--color-border)); }
.landing-feature--movies .landing-feature-inner { background: color-mix(in oklab, var(--color-accent-movies) 6%, var(--color-surface)); border-color: color-mix(in oklab, var(--color-accent-movies) 24%, var(--color-border)); }
.landing-feature-art { aspect-ratio: 21 / 9; }
.landing-feature-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 0.35rem; min-inline-size: 0; padding-block: 0.35rem; }
.landing-feature h2 { max-inline-size: 22ch; margin: 0.35rem 0 0; font-size: var(--home-h2); font-weight: 800; line-height: 1.45; }
.landing-feature-copy > p:not(.landing-kicker):not(.landing-feature-meta) { max-inline-size: 48ch; margin: 0.5rem 0 0; color: var(--color-text-secondary); font-size: var(--home-body); line-height: 1.9; }
.landing-feature-meta { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0.6rem 0 0; }
.landing-feature-meta span { padding: 0.2rem 0.5rem; border: 1px solid color-mix(in oklab, var(--card-rule) 26%, var(--color-border)); border-radius: 4px; background: color-mix(in oklab, var(--card-rule) 7%, var(--color-surface)); color: var(--color-text-secondary); font-size: var(--home-meta); font-weight: 600; line-height: 1.7; }
.landing-link { display: inline-flex; align-items: center; gap: 0.4rem; min-block-size: 2.5rem; margin-block-start: 0.75rem; color: var(--color-primary-text); font-size: 0.8rem; font-weight: 700; text-decoration: none; }
.landing-link:hover { color: var(--color-primary-hover); text-decoration: underline; text-underline-offset: 5px; }
.landing-link span { font-size: 1rem; }
.landing-note { display: grid; gap: 0.3rem; margin-block-start: 1rem; padding: 1rem; border-inline-start: 3px solid var(--card-rule); border-radius: 6px; background: color-mix(in oklab, var(--card-rule) 7%, var(--color-surface)); }
.landing-note-mark { color: var(--card-rule); font-size: 1.8rem; font-weight: 800; line-height: 1; }
.landing-note p { margin: 0; color: var(--color-text); font-size: 0.82rem; line-height: 1.9; }
.landing-note-source { color: var(--color-text-secondary); font-size: var(--home-meta); }
.landing-feature--lab .landing-feature-inner { background: var(--color-navy); border-color: color-mix(in oklab, var(--color-gold) 34%, var(--color-navy)); box-shadow: 0 0 0 100vmax var(--color-navy); clip-path: inset(0 -100vmax); color: var(--color-on-navy); }
.landing-feature--lab .landing-feature-art { border-color: color-mix(in oklab, var(--color-gold) 44%, var(--color-navy)); background: linear-gradient(145deg, color-mix(in oklab, var(--color-gold) 16%, var(--color-navy)), color-mix(in oklab, var(--color-navy) 84%, var(--color-surface))); }
.landing-feature--lab h2 { color: var(--color-on-navy); }
.landing-feature--lab .landing-feature-copy > p:not(.landing-kicker) { color: var(--color-on-navy-muted); }
.landing-feature--lab .landing-kicker { color: var(--color-gold); }
.landing-feature--lab .landing-link { color: var(--color-on-navy); }
.landing-feature--lab .landing-link:hover { color: var(--color-gold); }
.landing-lab-steps { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.8rem 0 0; padding: 0; list-style: none; }
.landing-lab-steps li { display: flex; align-items: center; gap: 0.3rem; padding: 0.28rem 0.55rem; border: 1px solid color-mix(in oklab, var(--color-gold) 34%, var(--color-navy)); border-radius: 4px; color: var(--color-on-navy-muted); font-size: var(--home-meta); line-height: 1.6; }
.landing-lab-steps span { color: var(--color-gold); font-weight: 800; }

/* P5 — articles + newsletter */
.landing-article-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
.landing-article { display: flex; min-inline-size: 0; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--home-radius); box-shadow: var(--home-shadow); }
.landing-article-link { display: flex; flex-direction: column; gap: 0.35rem; inline-size: 100%; min-block-size: 11rem; padding: 1.1rem; color: var(--color-text); text-decoration: none; }
.landing-article-link:hover h3 { color: var(--color-primary-text); }
.landing-article-meta { margin: 0; color: var(--color-text-secondary); font-size: var(--home-meta); line-height: 1.7; }
.landing-article h3 { margin: 0.15rem 0 0; font-size: 1rem; font-weight: 800; line-height: 1.65; text-wrap: balance; transition: color var(--motion); }
.landing-article-summary { margin: 0.25rem 0 0; color: var(--color-text-secondary); font-size: 0.82rem; line-height: 1.85; }
.landing-article-more { margin-block-start: auto; padding-block-start: 0.75rem; color: var(--color-primary-text); font-size: 0.78rem; font-weight: 700; }

.landing-newsletter { margin-block: var(--home-section-gap) 0; }
.landing-newsletter-inner { display: grid; gap: 2rem; padding: clamp(1.25rem, 2vw, 2rem); background: color-mix(in oklab, var(--color-cream) 78%, var(--color-surface)); border: 1px solid color-mix(in oklab, var(--color-primary) 18%, var(--color-border)); border-radius: 14px; box-shadow: var(--home-shadow); }
.landing-newsletter-art { aspect-ratio: 16 / 9; }
.landing-newsletter-copy { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 0.35rem; min-inline-size: 0; }
.landing-newsletter h2 { margin: 0.35rem 0 0; color: var(--color-text); font-size: var(--home-h2); font-weight: 800; line-height: 1.45; }
.landing-newsletter-copy > p:not(.landing-kicker) { max-inline-size: 46ch; margin: 0.5rem 0 0; color: var(--color-text-secondary); font-size: var(--home-body); line-height: 1.9; }
.landing-newsletter-action { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; margin-block-start: 1rem; }
.landing-newsletter .btn { min-block-size: 2.75rem; padding-inline: 1.1rem; font-size: 0.82rem; }
.landing-newsletter-action span { color: var(--color-text-secondary); font-size: 0.75rem; line-height: 1.7; }

/* Footer is part of the wide home sheet, not a separate spacious page. */
.page-home-landing .site-footer { margin-block-start: 0; padding-block: 2rem; font-size: 0.9rem; }
.page-home-landing .site-footer .row { gap: 1rem; }
.page-home-landing .site-footer a { min-block-size: 2.5rem; }
.page-home-landing .site-footer p { margin-block: 0.75rem 0; font-size: 0.8rem; }
.page-home-landing .site-footer::before { margin-block-end: 0.75rem; }

@media (min-width: 20em) {
  .landing-pillar-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .landing-pillar:last-child:nth-child(odd) { grid-column: span 2; }
}
@media (min-width: 40em) {
  .landing-article-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 48em) {
  .page-home-landing .site-nav .desktop-only { display: none; }
  .page-home-landing .site-nav .mobile-only { display: block; }
  .landing-pillar-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .landing-pillar:last-child:nth-child(odd) { grid-column: auto; }
  .landing-feature-inner { padding: 1.5rem; }
  .landing-newsletter-inner { padding: 1.5rem; }
}
@media (min-width: 64em) {
  .page-home-landing .site-nav .desktop-only { display: flex; }
  .page-home-landing .site-nav .mobile-only { display: none; }
  .landing-hero-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 3rem; padding-block: clamp(2.25rem, 3vw, 2.75rem) clamp(2.5rem, 3.4vw, 3.25rem); }
  .landing-pillar-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .landing-feature-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; padding: 2rem; }
  .landing-feature--children .landing-feature-inner,
  .landing-feature--movies .landing-feature-inner { grid-template-areas: "copy art"; }
  .landing-feature--lab .landing-feature-inner { grid-template-areas: "art copy"; }
  .landing-feature-art { grid-area: art; }
  .landing-feature-copy { grid-area: copy; }
  .landing-article-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .landing-newsletter-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "art copy"; align-items: center; gap: 2rem; padding: 2rem; }
  .landing-newsletter-art { grid-area: art; }
  .landing-newsletter-copy { grid-area: copy; }
}


/* Pillar design system — six section landing pages.
   Extends the home composition tokens without touching detail/reading pages.
   Scope group: fromzero, philosophers list, children, movies, lab, problems. */

:is(.page-fromzero, .page-philosophers-list, .page-children, .page-movies-list, .page-fara, .page-problems) {
  --pillar-h1: clamp(2rem, 2.2vw, 2.15rem);
  --pillar-h2: clamp(1.3rem, 1.4vw, 1.4rem);
  --pillar-body: 0.84rem;
  --pillar-meta: 0.72rem;
  --pillar-card-title: 1rem;
  --pillar-radius: 12px;
  --pillar-shadow: 0 10px 28px color-mix(in oklab, var(--color-navy) 7%, transparent);
}

/* Shell: wider measure + same chrome rhythm as the home. */
:is(.page-fromzero, .page-philosophers-list, .page-children, .page-movies-list, .page-fara, .page-problems) .site-main {
  max-inline-size: var(--container-wide);
}
:is(.page-fromzero, .page-philosophers-list, .page-children, .page-movies-list, .page-fara, .page-problems) .site-header .site-nav {
  max-inline-size: var(--container-wide);
  padding-block: 1.15rem;
}
:is(.page-fromzero, .page-philosophers-list, .page-children, .page-movies-list, .page-fara, .page-problems) .site-footer {
  margin-block-start: 0;
  padding-block: 2rem;
  font-size: 0.9rem;
}
:is(.page-fromzero, .page-philosophers-list, .page-children, .page-movies-list, .page-fara, .page-problems) .site-footer .container {
  max-inline-size: var(--container-wide);
}
:is(.page-fromzero, .page-philosophers-list, .page-children, .page-movies-list, .page-fara, .page-problems) .site-footer .row { gap: 1rem; }
:is(.page-fromzero, .page-philosophers-list, .page-children, .page-movies-list, .page-fara, .page-problems) .site-footer a { min-block-size: 2.5rem; }
:is(.page-fromzero, .page-philosophers-list, .page-children, .page-movies-list, .page-fara, .page-problems) .site-footer p { margin-block: 0.75rem 0; font-size: 0.8rem; }
:is(.page-fromzero, .page-philosophers-list, .page-children, .page-movies-list, .page-fara, .page-problems) .site-footer::before { margin-block-end: 0.75rem; }

@media (min-width: 48em) {
  :is(.page-fromzero, .page-philosophers-list, .page-children, .page-movies-list, .page-fara, .page-problems) .site-nav .desktop-only { display: none; }
  :is(.page-fromzero, .page-philosophers-list, .page-children, .page-movies-list, .page-fara, .page-problems) .site-nav .mobile-only { display: block; }
}
@media (min-width: 64em) {
  :is(.page-fromzero, .page-philosophers-list, .page-children, .page-movies-list, .page-fara, .page-problems) .site-nav .desktop-only { display: flex; }
  :is(.page-fromzero, .page-philosophers-list, .page-children, .page-movies-list, .page-fara, .page-problems) .site-nav .mobile-only { display: none; }
}
@media (min-width: 72em) {
  :is(.page-fromzero, .page-philosophers-list, .page-children, .page-movies-list, .page-fara, .page-problems) .site-nav .nav-links { gap: 1.25rem; }
  :is(.page-fromzero, .page-philosophers-list, .page-children, .page-movies-list, .page-fara, .page-problems) .site-nav .nav-links > li > :is(a, button):not(.btn):not(.dropdown-trigger) { font-size: 1rem; font-weight: 600; }
  :is(.page-fromzero, .page-philosophers-list, .page-children, .page-movies-list, .page-fara, .page-problems) .nav-actions { gap: 0.65rem; }
  :is(.page-fromzero, .page-philosophers-list, .page-children, .page-movies-list, .page-fara, .page-problems) .nav-actions .btn { min-block-size: 2.5rem; padding-inline: 1.1rem; font-size: 0.82rem; }
  :is(.page-fromzero, .page-philosophers-list, .page-children, .page-movies-list, .page-fara, .page-problems) .nav-search { display: grid; place-items: center; inline-size: 2.5rem; block-size: 2.5rem; border: 1px solid color-mix(in oklab, var(--color-on-navy) 26%, transparent); border-radius: 6px; font-size: 1.8rem; text-decoration: none; }
  :is(.page-fromzero, .page-philosophers-list, .page-children, .page-movies-list, .page-fara, .page-problems) .brand-copy strong { font-size: 1.2rem; }
  :is(.page-fromzero, .page-philosophers-list, .page-children, .page-movies-list, .page-fara, .page-problems) .brand-copy small { font-size: 0.72rem; }
}

/* Hero typography and geometry. */
:is(.page-fromzero, .page-philosophers-list, .page-children, .page-movies-list, .page-fara, .page-problems) :is(.fz-hero h1, .ph-hero h1, .kids-hero h1, .movies-hero h1, .fara-hero h1, .problems-hero h1) {
  font-size: var(--pillar-h1);
  line-height: 1.35;
}
:is(.page-fromzero, .page-philosophers-list, .page-children, .page-movies-list, .page-fara, .page-problems) :is(.fz-hero-lead, .kids-hero-lead, .fara-hero-lead, .movies-hero-lead, .problems-hero-lead, .ph-hero .text-lead) {
  font-size: 0.9rem;
  line-height: 1.9;
}
:is(.page-fromzero, .page-philosophers-list, .page-children, .page-movies-list, .page-fara, .page-problems) :is(.fz-hero, .ph-hero, .kids-hero, .movies-hero, .fara-hero, .problems-hero) {
  padding-block: var(--sp-4) 0;
}
:is(.page-fromzero, .page-philosophers-list, .page-children, .page-movies-list, .page-fara, .page-problems) :is(.fz-hero-band, .ph-hero-band, .kids-hero-band, .movies-hero-band, .fara-hero-band, .problems-hero-band) {
  inset-block-end: 1.75rem;
}
@media (min-width: 64em) {
  :is(.page-fromzero, .page-philosophers-list, .page-children, .page-movies-list, .page-fara, .page-problems) :is(.fz-hero-inner, .ph-hero-inner, .kids-hero-inner, .movies-hero-inner, .fara-hero-inner, .problems-hero-inner) {
    grid-template-columns: minmax(0, 1fr) 24rem;
    gap: var(--sp-8);
    padding-block: var(--sp-2) 1.5rem;
  }
  :is(.page-fromzero, .page-philosophers-list, .page-children, .page-movies-list, .page-fara, .page-problems) :is(.fz-tabs, .ph-era-tabs, .kids-tabs, .movies-tabs, .fara-tabs, .problems-tabs) {
    justify-content: center;
  }
}

/* Shared placeholder frame for every hero/card/side image position. */
:is(.page-fromzero, .page-philosophers-list, .page-children, .page-movies-list, .page-fara, .page-problems) :is(.fz-hero-art, .ph-hero-art, .kids-hero-art, .movies-hero-art, .fara-hero-art, .problems-hero-art, .ph-entry-media, .kids-card-art, .kids-age-art, .movie-card-art, .fara-card-art, .problem-card-art, .fz-side-art, .movies-filter-art, .movies-outro-art, .problems-quote-art, .problems-side-note-art) {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--pillar-radius);
  background: linear-gradient(145deg, color-mix(in oklab, var(--color-surface) 48%, transparent), color-mix(in oklab, var(--color-cream) 70%, transparent)), radial-gradient(70% 90% at 20% 10%, color-mix(in oklab, var(--color-sage) 9%, transparent), transparent 70%);
  box-shadow: inset 0 1px 0 color-mix(in oklab, var(--color-primary) 8%, white), var(--pillar-shadow);
}
:is(.page-fromzero, .page-philosophers-list, .page-children, .page-movies-list, .page-fara, .page-problems) :is(.fz-hero-art, .ph-hero-art, .kids-hero-art, .movies-hero-art, .fara-hero-art, .problems-hero-art, .ph-entry-media, .kids-card-art, .movie-card-art, .fara-card-art, .problem-card-art, .fz-side-art, .movies-filter-art, .movies-outro-art, .problems-quote-art)::after {
  content: "جای تصویر";
  position: relative;
  z-index: 1;
  padding: 0.22rem 0.5rem;
  border: 1px solid color-mix(in oklab, var(--color-border-strong) 70%, transparent);
  border-radius: 4px;
  background: color-mix(in oklab, var(--color-surface) 76%, transparent);
  color: var(--color-text-secondary);
  font-size: var(--pillar-meta);
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
}
:is(.page-fromzero, .page-philosophers-list, .page-children, .page-movies-list, .page-fara, .page-problems) :is(.fz-hero-art, .ph-hero-art, .kids-hero-art, .movies-hero-art, .fara-hero-art, .problems-hero-art) {
  aspect-ratio: 16 / 9;
}
:is(.page-philosophers-list) .ph-hero-art::before { content: none; }
:is(.page-fromzero, .page-philosophers-list, .page-children, .page-movies-list, .page-fara, .page-problems) :is(.fz-module-icon, .fz-feature-icon) {
  border: 1px solid var(--color-border);
  background: color-mix(in oklab, var(--color-primary) 6%, var(--color-surface-muted));
}
:is(.page-fromzero, .page-philosophers-list, .page-children, .page-movies-list, .page-fara, .page-problems) .ph-entry-media { aspect-ratio: 16 / 9; }
:is(.page-philosophers-list) .ph-entry-media { margin: 0; }
:is(.page-problems) .problem-card-art { border-radius: var(--pillar-radius); }
:is(.page-problems) .problems-quote-art { border-radius: 8px; }
:is(.page-children) .kids-age-art { border-radius: 12px; }

/* Section titles + card typography. */
:is(.page-fromzero, .page-philosophers-list, .page-children, .page-movies-list, .page-fara, .page-problems) :is(.fz-panel-title, .kids-section-title, .fara-head-title, .movies-outro h2) {
  font-size: var(--pillar-h2);
  line-height: 1.5;
}
:is(.page-fromzero, .page-philosophers-list, .page-children, .page-movies-list, .page-fara, .page-problems) :is(.fz-module-title, .fz-lesson-title, .fz-side-title, .ph-entry-name, .kids-card-title, .kids-age-label, .movie-card-title, .fara-card-title, .problem-card-title, .problem-content-title) {
  font-size: var(--pillar-card-title);
  line-height: 1.65;
}
:is(.page-fromzero, .page-philosophers-list, .page-children, .page-movies-list, .page-fara, .page-problems) :is(.fz-module-summary, .fz-side-text, .ph-entry-summary, .kids-card-summary, .kids-age-desc, .movie-card-summary, .fara-card-summary, .fara-head-desc, .problem-card-summary, .problem-content-summary, .problems-quote p, .problems-side-note p) {
  font-size: var(--pillar-body);
  line-height: 1.9;
}
:is(.page-fromzero, .page-philosophers-list, .page-children, .page-movies-list, .page-fara, .page-problems) :is(.ph-entry-meta, .ph-count, .movie-card-meta, .movie-card-original, .fara-card-meta, .problem-card-meta, .fz-module-meta, .fz-panel-count, .kids-tag, .fara-card-tag, .movie-card-tag, .ph-tag, .problem-tag, .problems-quote footer, .problems-stats dt, .fz-side-stats dt, .movies-result-count) {
  font-size: var(--pillar-meta);
}
:is(.page-fromzero, .page-philosophers-list, .page-children, .page-movies-list, .page-fara, .page-problems) :is(.movie-card-cta, .problem-card-cta, .fara-card-cta, .kids-more, .ph-more, .fz-side-start, .movies-clear, .ph-clear) {
  font-size: 0.78rem;
}

/* Card surfaces, padding and rhythm. */
:is(.page-fromzero, .page-philosophers-list, .page-children, .page-movies-list, .page-fara, .page-problems) :is(.ph-entry-link, .kids-card, .kids-age-card, .movie-card, .fara-card, .problem-card) {
  border-radius: var(--pillar-radius);
  box-shadow: var(--pillar-shadow);
}
:is(.page-fromzero, .page-philosophers-list, .page-children, .page-movies-list, .page-fara, .page-problems) :is(.ph-entry-body, .movie-card-body) { padding: 1rem; gap: 0.35rem; }
:is(.page-fromzero, .page-philosophers-list, .page-children, .page-movies-list, .page-fara, .page-problems) :is(.kids-card, .kids-age-card, .fara-card, .problem-card) { padding: 1rem; gap: 0.7rem; }
:is(.page-fromzero, .page-philosophers-list, .page-children, .page-movies-list, .page-fara, .page-problems) :is(.fz-panel, .fz-side-card) { padding: 1.25rem; }
:is(.page-fromzero, .page-philosophers-list, .page-children, .page-movies-list, .page-fara, .page-problems) :is(.fz-module-head) { padding: 0.85rem 1rem; }
:is(.page-fromzero, .page-philosophers-list, .page-children, .page-movies-list, .page-fara, .page-problems) :is(.ph-directory-grid, .kids-grid, .kids-age-grid, .movies-grid, .fara-grid, .problems-grid, .fz-modules) { gap: 1rem; }
:is(.page-fromzero, .page-philosophers-list, .page-children, .page-movies-list, .page-fara, .page-problems) :is(.ph-entry-go) { inline-size: 2rem; block-size: 2rem; }
:is(.page-fromzero, .page-philosophers-list, .page-children, .page-movies-list, .page-fara, .page-problems) :is(.kids-age-art) { inline-size: 4.75rem; block-size: 4.75rem; }

/* Section rhythm: replace the uneven catalog padding with one rhythm. */
:is(.page-fromzero, .page-philosophers-list, .page-children, .page-movies-list, .page-fara, .page-problems) :is(.fz-catalog, .kids-section, .kids-latest, .fara-catalog, .movies-layout, .ph-directory, .problems-catalog) {
  padding-block: 2.5rem 3rem;
}
:is(.page-fromzero, .page-philosophers-list, .page-children, .page-movies-list, .page-fara, .page-problems) :is(.kids-section-title, .fara-head-title, .fz-panel-title) {
  margin-block-end: 1.5rem;
}

/* Extend the widened chrome to every page inside the six pillar sections.
   Landing/list composition is handled above; detail/reader pages only take
   shell/header/footer so their reading layouts stay intact. */
:is(.section-fromzero, .section-philosophers, .section-children, .section-movies, .section-fara, .page-problems) .site-main {
  max-inline-size: var(--container-wide);
}
:is(.section-fromzero, .section-philosophers, .section-children, .section-movies, .section-fara, .page-problems) .site-header .site-nav {
  max-inline-size: var(--container-wide);
  padding-block: 1.15rem;
}
:is(.section-fromzero, .section-philosophers, .section-children, .section-movies, .section-fara, .page-problems) .site-footer {
  margin-block-start: 0;
  padding-block: 2rem;
  font-size: 0.9rem;
}
:is(.section-fromzero, .section-philosophers, .section-children, .section-movies, .section-fara, .page-problems) .site-footer .container { max-inline-size: var(--container-wide); }
:is(.section-fromzero, .section-philosophers, .section-children, .section-movies, .section-fara, .page-problems) .site-footer .row { gap: 1rem; }
:is(.section-fromzero, .section-philosophers, .section-children, .section-movies, .section-fara, .page-problems) .site-footer a { min-block-size: 2.5rem; }
:is(.section-fromzero, .section-philosophers, .section-children, .section-movies, .section-fara, .page-problems) .site-footer p { margin-block: 0.75rem 0; font-size: 0.8rem; }
:is(.section-fromzero, .section-philosophers, .section-children, .section-movies, .section-fara, .page-problems) .site-footer::before { margin-block-end: 0.75rem; }

@media (min-width: 48em) {
  :is(.section-fromzero, .section-philosophers, .section-children, .section-movies, .section-fara, .page-problems) .site-nav .desktop-only { display: none; }
  :is(.section-fromzero, .section-philosophers, .section-children, .section-movies, .section-fara, .page-problems) .site-nav .mobile-only { display: block; }
}
@media (min-width: 64em) {
  :is(.section-fromzero, .section-philosophers, .section-children, .section-movies, .section-fara, .page-problems) .site-nav .desktop-only { display: flex; }
  :is(.section-fromzero, .section-philosophers, .section-children, .section-movies, .section-fara, .page-problems) .site-nav .mobile-only { display: none; }
}
@media (min-width: 72em) {
  :is(.section-fromzero, .section-philosophers, .section-children, .section-movies, .section-fara, .page-problems) .site-nav .nav-links { gap: 1.25rem; }
  :is(.section-fromzero, .section-philosophers, .section-children, .section-movies, .section-fara, .page-problems) .site-nav .nav-links > li > :is(a, button):not(.btn):not(.dropdown-trigger) { font-size: 1rem; font-weight: 600; }
  :is(.section-fromzero, .section-philosophers, .section-children, .section-movies, .section-fara, .page-problems) .nav-actions { gap: 0.65rem; }
  :is(.section-fromzero, .section-philosophers, .section-children, .section-movies, .section-fara, .page-problems) .nav-actions .btn { min-block-size: 2.5rem; padding-inline: 1.1rem; font-size: 0.82rem; }
  :is(.section-fromzero, .section-philosophers, .section-children, .section-movies, .section-fara, .page-problems) .nav-search { display: grid; place-items: center; inline-size: 2.5rem; block-size: 2.5rem; border: 1px solid color-mix(in oklab, var(--color-on-navy) 26%, transparent); border-radius: 6px; font-size: 1.8rem; text-decoration: none; }
  :is(.section-fromzero, .section-philosophers, .section-children, .section-movies, .section-fara, .page-problems) .brand-copy strong { font-size: 1.2rem; }
  :is(.section-fromzero, .section-philosophers, .section-children, .section-movies, .section-fara, .page-problems) .brand-copy small { font-size: 0.72rem; }
}

/* Children: the two catalogs were double-padded after the shared rhythm. */
:is(.page-children) .kids-ages { padding-block: 2rem 2rem; }
:is(.page-children) .kids-latest { padding-block: 2rem 3rem; }

/* The h1 ladder also applies to reading/detail pages inside the six sections;
   body copy and article prose keep their comfortable reading sizes. */
:is(.section-fromzero, .section-philosophers, .section-children, .section-movies, .section-fara, .page-problems) main h1 {
  font-size: clamp(2rem, 2.2vw, 2.15rem);
  line-height: 1.35;
}


/* From-zero lesson reader — editorial article sheet with sticky lesson rail.
   All image positions stay as blank media frames (no SVG, no <img>). */
.page-fromzero-lesson {
  --lesson-article-max: 50rem;
  --lesson-side-width: 20rem;
  --lesson-radius: 14px;
  --lesson-shadow: 0 12px 32px color-mix(in oklab, var(--color-navy) 7%, transparent);
}

.page-fromzero-lesson .lesson-hero { position: relative; isolation: isolate; }
.page-fromzero-lesson .lesson-hero-band { position: absolute; inset-block: 0; inset-inline: 0; z-index: 0; background: color-mix(in oklab, var(--color-cream) 76%, var(--color-background)); box-shadow: 0 0 0 100vmax color-mix(in oklab, var(--color-cream) 76%, var(--color-background)); clip-path: inset(0 -100vmax); pointer-events: none; }
.page-fromzero-lesson .lesson-hero-band::before { content: ""; position: absolute; inset: 0; background: radial-gradient(42% 84% at 9% 104%, color-mix(in oklab, var(--color-sage) 11%, transparent), transparent 72%), radial-gradient(48% 76% at 92% 108%, color-mix(in oklab, var(--color-gold) 12%, transparent), transparent 74%), radial-gradient(36% 60% at 78% 6%, color-mix(in oklab, var(--color-primary) 6%, transparent), transparent 72%); }
.page-fromzero-lesson .lesson-hero-inner { position: relative; z-index: 1; display: grid; gap: 2rem; padding-block: clamp(1.5rem, 2.4vw, 2.25rem) clamp(2rem, 3vw, 2.75rem); }
.page-fromzero-lesson .lesson-hero-copy { min-inline-size: 0; }
.page-fromzero-lesson .lesson-hero-top { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.8rem; margin-block: 0.7rem 0.4rem; }
.page-fromzero-lesson .lesson-hero-badge { display: inline-flex; align-items: center; min-block-size: 1.4rem; padding-inline: 0.55rem; border: 1px solid color-mix(in oklab, var(--color-primary) 25%, var(--color-border)); border-radius: 5px; background: color-mix(in oklab, var(--color-primary) 7%, var(--color-surface)); color: var(--color-primary-text); font-size: 0.68rem; font-weight: 700; }
.page-fromzero-lesson .lesson-kicker { margin: 0; color: var(--color-primary-text); font-size: 0.72rem; font-weight: 700; line-height: 1.6; }
.page-fromzero-lesson .lesson-hero h1 { margin: 0.2rem 0 0; font-size: clamp(2.1rem, 2.8vw, 2.6rem); font-weight: 800; line-height: 1.35; }
.page-fromzero-lesson .lesson-hero-lead { max-inline-size: 50ch; margin: 0.7rem 0 0; color: var(--color-text); font-size: 0.95rem; line-height: 1.95; }
.page-fromzero-lesson .lesson-hero-art { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 9; align-self: center; overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--lesson-radius); background: linear-gradient(145deg, color-mix(in oklab, var(--color-surface) 48%, transparent), color-mix(in oklab, var(--color-cream) 70%, transparent)), radial-gradient(70% 90% at 20% 10%, color-mix(in oklab, var(--color-sage) 9%, transparent), transparent 70%); box-shadow: inset 0 1px 0 color-mix(in oklab, var(--color-primary) 8%, white), var(--lesson-shadow); }
.page-fromzero-lesson .lesson-hero-art::before { content: ""; position: absolute; inset: clamp(0.75rem, 1.6vw, 1.5rem); border: 1px solid color-mix(in oklab, var(--color-border-strong) 64%, transparent); border-radius: 14px; background: linear-gradient(145deg, color-mix(in oklab, var(--color-surface) 32%, transparent), color-mix(in oklab, var(--color-cream) 55%, transparent)); box-shadow: inset 0 1px 0 color-mix(in oklab, var(--color-primary) 8%, white); pointer-events: none; }
.page-fromzero-lesson .lesson-hero-art::after { content: "جای تصویر"; position: relative; z-index: 1; padding: 0.22rem 0.55rem; border: 1px solid color-mix(in oklab, var(--color-border-strong) 70%, transparent); border-radius: 4px; background: color-mix(in oklab, var(--color-surface) 82%, transparent); color: var(--color-text-secondary); font-size: 0.72rem; font-weight: 600; line-height: 1.4; }
.page-fromzero-lesson .breadcrumbs { margin-block-end: 0; font-size: var(--text-xs); }

.page-fromzero-lesson .preview-banner { margin-block: 1rem 0; }

.page-fromzero-lesson .lesson-layout { display: grid; gap: 2rem; padding-block: 2.5rem 3rem; align-items: start; }
.page-fromzero-lesson .lesson-article { min-inline-size: 0; max-inline-size: none; padding: clamp(1.25rem, 2.4vw, 2.5rem); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--lesson-radius); box-shadow: var(--lesson-shadow); }
.page-fromzero-lesson .lesson-article-head { display: grid; gap: 0.8rem; padding-block-end: 1.4rem; border-block-end: 1px solid var(--color-border); margin-block-end: 1.6rem; }
.page-fromzero-lesson .lesson-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.8rem; color: var(--color-text-secondary); font-size: 0.72rem; }
.page-fromzero-lesson .lesson-meta .badge { flex: none; }
.page-fromzero-lesson .lesson-bookmark { margin-inline-start: auto; }
.page-fromzero-lesson .lesson-bookmark .btn { min-block-size: 2.25rem; padding-inline: 0.7rem; font-size: 0.72rem; }
.page-fromzero-lesson .lesson-bookmark .text-meta { font-size: 0.7rem; }
.page-fromzero-lesson .lesson-article-title { margin: 0; padding-inline-start: 0.6rem; border-inline-start: 3px solid var(--color-primary); font-size: clamp(1.65rem, 2vw, 1.9rem); font-weight: 800; line-height: 1.35; }
.page-fromzero-lesson .lesson-dek { max-inline-size: 58ch; margin: 0; color: var(--color-text-secondary); font-size: 0.95rem; line-height: 1.9; }
.page-fromzero-lesson .prereq-banner { margin: 0; }

.page-fromzero-lesson .lesson-prose { max-inline-size: 68ch; margin: 0; font-size: 1rem; line-height: 2; overflow-wrap: anywhere; }
.page-fromzero-lesson .lesson-prose > :first-child { margin-block-start: 0; }
.page-fromzero-lesson .lesson-prose p { margin-block: 0 1.1em; }
.page-fromzero-lesson .lesson-prose h2 { margin-block: 1.7em 0.55em; font-size: 1.5rem; line-height: 1.4; scroll-margin-block-start: 1rem; }
.page-fromzero-lesson .lesson-prose h3 { margin-block: 1.4em 0.45em; font-size: 1.2rem; line-height: 1.5; scroll-margin-block-start: 1rem; }
.page-fromzero-lesson .lesson-prose h4 { margin-block: 1.2em 0.35em; font-size: 1.05rem; }
.page-fromzero-lesson .lesson-prose ul,
.page-fromzero-lesson .lesson-prose ol { margin-block: 0 1.15em; padding-inline-start: 1.5em; }
.page-fromzero-lesson .lesson-prose li { margin-block-end: 0.35em; }
.page-fromzero-lesson .lesson-prose blockquote { margin-block: 1.6em; padding: 1.1rem 1.25rem; border: 1px solid color-mix(in oklab, var(--color-primary) 18%, var(--color-border)); border-inline-start: 3px solid var(--color-primary); border-radius: 10px; background: color-mix(in oklab, var(--color-primary) 6%, var(--color-surface)); color: var(--color-text); font-size: 1.05rem; line-height: 1.9; }
.page-fromzero-lesson .lesson-prose blockquote p:last-child { margin-block-end: 0; }
.page-fromzero-lesson .lesson-prose pre { max-inline-size: 100%; overflow-x: auto; padding: 1rem; border-radius: 8px; background: var(--color-surface-muted); }
.page-fromzero-lesson .lesson-prose table { display: block; max-inline-size: 100%; overflow-x: auto; border-collapse: collapse; }
.page-fromzero-lesson .lesson-prose img { max-inline-size: 100%; block-size: auto; border-radius: 8px; }
.page-fromzero-lesson .lesson-prose a { text-underline-offset: 3px; }

.page-fromzero-lesson .lesson-next-nav { display: grid; gap: 1rem; margin-block-start: 2rem; padding-block-start: 1.5rem; border-block-start: 1px solid var(--color-border); }
.page-fromzero-lesson .lesson-next-links { display: grid; gap: 0.8rem; }
.page-fromzero-lesson .lesson-prev { display: grid; gap: 0.15rem; color: var(--color-text-secondary); text-decoration: none; }
.page-fromzero-lesson .lesson-prev:hover { color: var(--color-primary-text); }
.page-fromzero-lesson .lesson-next-dir { color: var(--color-text-secondary); font-size: 0.7rem; }
.page-fromzero-lesson .lesson-next-title { font-size: 0.88rem; font-weight: 700; line-height: 1.7; }
.page-fromzero-lesson .lesson-continue { display: flex; align-items: center; justify-content: space-between; gap: 1rem; inline-size: min(100%, 24rem); padding: 1rem 1.1rem; border-radius: 10px; background: var(--color-primary); color: var(--color-on-primary); text-decoration: none; transition: background var(--motion); }
.page-fromzero-lesson .lesson-continue:hover { background: var(--color-primary-hover); color: var(--color-on-primary); }
.page-fromzero-lesson .lesson-continue-copy { display: grid; gap: 0.15rem; }
.page-fromzero-lesson .lesson-continue .lesson-next-dir { color: color-mix(in oklab, var(--color-on-primary) 78%, transparent); }
.page-fromzero-lesson .lesson-continue-arrow { flex: none; font-size: 0.78rem; font-weight: 700; }
.page-fromzero-lesson .lesson-back { justify-self: start; display: inline-flex; align-items: center; min-block-size: 2.5rem; color: var(--color-primary-text); font-size: 0.78rem; font-weight: 700; text-decoration: none; }
.page-fromzero-lesson .lesson-back:hover { color: var(--color-primary-hover); text-decoration: underline; text-underline-offset: 4px; }

.page-fromzero-lesson .lesson-aside { display: grid; gap: 1rem; min-inline-size: 0; }
.page-fromzero-lesson .lesson-rail-card { display: grid; gap: 0.7rem; padding: 1.1rem; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 12px; box-shadow: var(--lesson-shadow); }
.page-fromzero-lesson .lesson-rail-title { margin: 0; color: var(--color-text-secondary); font-size: 0.82rem; font-weight: 800; }
.page-fromzero-lesson .lesson-toc { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.1rem; }
.page-fromzero-lesson .lesson-toc a { display: block; padding-block: 0.35rem; padding-inline: 0.6rem; border-inline-start: 2px solid transparent; color: var(--color-text-secondary); font-size: 0.8rem; line-height: 1.8; text-decoration: none; }
.page-fromzero-lesson .lesson-toc a:hover { color: var(--color-primary-text); border-inline-start-color: var(--color-primary); }
.page-fromzero-lesson .lesson-toc-3 a { padding-inline-start: 1.2rem; }
.page-fromzero-lesson .lesson-related { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.page-fromzero-lesson .lesson-related a { display: grid; grid-template-columns: 3.25rem minmax(0, 1fr); gap: 0.6rem; align-items: center; padding: 0.45rem; border: 1px solid var(--color-border); border-radius: 8px; color: var(--color-text); text-decoration: none; }
.page-fromzero-lesson .lesson-related a:hover { border-color: var(--color-primary); }
.page-fromzero-lesson .lesson-related-art { display: block; inline-size: 3.25rem; block-size: 3.25rem; border: 1px solid var(--color-border); border-radius: 6px; background: linear-gradient(145deg, color-mix(in oklab, var(--color-sage) 10%, var(--color-surface-muted)), color-mix(in oklab, var(--color-primary) 7%, var(--color-surface-muted))); }
.page-fromzero-lesson .lesson-related-copy { display: grid; gap: 0.2rem; min-inline-size: 0; }
.page-fromzero-lesson .lesson-related-title { font-size: 0.78rem; font-weight: 700; line-height: 1.7; }
.page-fromzero-lesson .lesson-related-kicker { color: var(--color-text-muted); font-size: 0.68rem; line-height: 1.5; }
.page-fromzero-lesson .lesson-related .badge { justify-self: start; font-size: 0.68rem; }
.page-fromzero-lesson .lesson-rail-meta { display: grid; gap: 0.4rem; margin: 0; }
.page-fromzero-lesson .lesson-rail-meta div { display: grid; gap: 0.05rem; }
.page-fromzero-lesson .lesson-rail-meta dt { color: var(--color-text-muted); font-size: 0.68rem; }
.page-fromzero-lesson .lesson-rail-meta dd { margin: 0; color: var(--color-text); font-size: 0.78rem; font-weight: 600; line-height: 1.8; }
.page-fromzero-lesson .lesson-rail-link { display: inline-flex; align-items: center; gap: 0.35rem; min-block-size: 2.2rem; color: var(--color-primary-text); font-size: 0.76rem; font-weight: 700; text-decoration: none; }
.page-fromzero-lesson .lesson-rail-link:hover { color: var(--color-primary-hover); text-decoration: underline; text-underline-offset: 4px; }

.page-fromzero-lesson .lesson-aside .path-strip { display: flex; flex-direction: column; gap: 0.25rem; margin: 0; padding: 0; list-style: none; }
.page-fromzero-lesson .lesson-aside .path-step { display: block; }
.page-fromzero-lesson .lesson-aside .path-step .step { display: block; inline-size: 100%; padding: 0.38rem 0.55rem; border: 0; background: transparent; color: var(--color-text-secondary); font-size: 0.8rem; line-height: 1.7; text-decoration: none; }
.page-fromzero-lesson .lesson-aside .path-step .step:hover { color: var(--color-primary-text); background: color-mix(in oklab, var(--color-primary) 6%, var(--color-surface)); border-radius: 5px; }
.page-fromzero-lesson .lesson-aside .path-step .step-current { color: var(--color-primary-text); font-weight: 700; background: color-mix(in oklab, var(--color-primary) 8%, var(--color-surface)); border-radius: 5px; }

@media (min-width: 64em) {
  .page-fromzero-lesson .lesson-hero-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 2.5rem; padding-block: 2rem 2.75rem; }
  .page-fromzero-lesson .lesson-hero-copy { position: relative; z-index: 2; }
  .page-fromzero-lesson .lesson-hero-art { position: relative; inset: auto; z-index: 1; inline-size: 100%; block-size: auto; aspect-ratio: 4 / 3; border: 1px solid var(--color-border); border-radius: var(--lesson-radius); box-shadow: var(--lesson-shadow); }
  .page-fromzero-lesson .lesson-hero-art::before { content: none; }
  .page-fromzero-lesson .lesson-hero-art::after { font-size: 0.82rem; }
  .page-fromzero-lesson .lesson-layout { grid-template-columns: minmax(0, 1fr) var(--lesson-side-width); gap: 2rem; }
  .page-fromzero-lesson .lesson-aside { position: sticky; inset-block-start: 1rem; max-block-size: calc(100dvh - 2rem); overflow-y: auto; overscroll-behavior: contain; padding-block-end: 0.5rem; }
}
@media (min-width: 80em) {
  .page-fromzero-lesson .lesson-layout { grid-template-columns: minmax(0, 1fr) var(--lesson-side-width); }
}








/* Article meta bar: bookmark · step · reading time · publication date. */
.page-fromzero-lesson .lesson-meta { justify-content: space-between; gap: 0.6rem 0.9rem; }
.page-fromzero-lesson .lesson-meta > * { flex: 0 0 auto; }
.page-fromzero-lesson .lesson-step { display: inline-flex; align-items: center; gap: 0.35rem; color: var(--color-text); font-size: 0.78rem; font-weight: 700; line-height: 1.6; text-decoration: none; }
.page-fromzero-lesson .lesson-step:hover { color: var(--color-primary-text); }
.page-fromzero-lesson .lesson-step-chevron { inline-size: 0.34rem; block-size: 0.34rem; border-inline-start: 1.5px solid currentColor; border-block-start: 1.5px solid currentColor; transform: rotate(-45deg); }
.page-fromzero-lesson .lesson-read,
.page-fromzero-lesson .lesson-date { display: inline-flex; align-items: center; gap: 0.3rem; color: var(--color-text-secondary); font-size: 0.72rem; line-height: 1.6; white-space: nowrap; }
.page-fromzero-lesson .lesson-icon-clock { position: relative; display: inline-block; inline-size: 0.8rem; block-size: 0.8rem; flex: none; border: 1.5px solid currentColor; border-radius: 50%; }
.page-fromzero-lesson .lesson-icon-clock::before { content: ""; position: absolute; inset-block-start: 0.16rem; inset-inline-start: 0.2rem; inline-size: 0.2rem; block-size: 0.23rem; border-inline-start: 1.5px solid currentColor; border-block-start: 1.5px solid currentColor; }
.page-fromzero-lesson .lesson-icon-calendar { position: relative; display: inline-block; inline-size: 0.8rem; block-size: 0.78rem; flex: none; border: 1.5px solid currentColor; border-radius: 2px; }
.page-fromzero-lesson .lesson-icon-calendar::before { content: ""; position: absolute; inset-block-start: 0.2rem; inset-inline: 0; border-block-start: 1.5px solid currentColor; }
.page-fromzero-lesson .lesson-icon-calendar::after { content: ""; position: absolute; inset-block-end: 0.16rem; inset-inline-start: 0.17rem; inline-size: 0.14rem; block-size: 0.14rem; border-radius: 50%; background: currentColor; box-shadow: 0.28rem 0 currentColor; }
.page-fromzero-lesson .lesson-bookmark { margin-inline-start: 0; }
.page-fromzero-lesson .lesson-bookmark .bookmark-btn { display: inline-flex; }
.page-fromzero-lesson .lesson-bookmark .bookmark-toggle { position: relative; display: inline-grid; place-items: center; inline-size: 2.15rem; min-block-size: 2.15rem; padding: 0; border: 1px solid var(--color-border); border-radius: 7px; background: var(--color-surface); color: var(--color-terracotta-dark); font-size: 0; }
.page-fromzero-lesson .lesson-bookmark .bookmark-toggle:hover { border-color: var(--color-primary); background: color-mix(in oklab, var(--color-primary) 6%, var(--color-surface)); }
.page-fromzero-lesson .lesson-bookmark .bookmark-toggle::before { content: ""; inline-size: 0.72rem; block-size: 0.92rem; border: 1.5px solid currentColor; border-block-end: 0; clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 74%, 0 100%); }
.page-fromzero-lesson .lesson-bookmark .bookmark-toggle[aria-pressed="true"] { border-color: var(--color-primary); background: color-mix(in oklab, var(--color-primary) 10%, var(--color-surface)); }
.page-fromzero-lesson .lesson-bookmark .bookmark-toggle .text-meta { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Lesson balance pass — fixed vertical scale, clearer hierarchy and contrast. */
.page-fromzero-lesson {
  --lesson-gap-xs: 0.35rem;
  --lesson-gap-sm: 0.65rem;
  --lesson-gap-md: 1rem;
  --lesson-gap-lg: 1.5rem;
  --lesson-gap-xl: 2rem;
}

.page-fromzero-lesson .lesson-hero-inner { gap: var(--lesson-gap-lg); padding-block: var(--lesson-gap-lg) var(--lesson-gap-xl); }
.page-fromzero-lesson .lesson-hero-art { aspect-ratio: 16 / 10; }
.page-fromzero-lesson .breadcrumbs { font-size: 0.78rem; }
.page-fromzero-lesson .lesson-hero-badge { font-size: 0.74rem; }
.page-fromzero-lesson .lesson-kicker { font-size: 0.78rem; }
.page-fromzero-lesson .lesson-hero-lead { font-size: 1rem; line-height: 1.85; }
.page-fromzero-lesson .lesson-layout { gap: var(--lesson-gap-xl); padding-block: var(--lesson-gap-xl) var(--lesson-gap-xl); }
.page-fromzero-lesson .lesson-article { padding: clamp(1.25rem, 2vw, 2rem); }
.page-fromzero-lesson .lesson-article-head { gap: var(--lesson-gap-sm); padding-block-end: var(--lesson-gap-md); margin-block-end: var(--lesson-gap-lg); }
.page-fromzero-lesson .lesson-meta { font-size: 0.78rem; }
.page-fromzero-lesson .lesson-step { font-size: 0.84rem; }
.page-fromzero-lesson .lesson-read,
.page-fromzero-lesson .lesson-date { color: var(--color-text); font-size: 0.78rem; font-weight: 500; }
.page-fromzero-lesson .lesson-bookmark .bookmark-toggle { inline-size: 2.3rem; min-block-size: 2.3rem; }
.page-fromzero-lesson .lesson-article-title { margin-block-start: var(--lesson-gap-xs); }
.page-fromzero-lesson .lesson-prose { line-height: 1.98; }
.page-fromzero-lesson .lesson-next-nav { gap: var(--lesson-gap-sm); margin-block-start: var(--lesson-gap-lg); padding-block-start: var(--lesson-gap-md); }
.page-fromzero-lesson .lesson-next-links { gap: var(--lesson-gap-sm); }
.page-fromzero-lesson .lesson-continue { inline-size: min(100%, 22rem); padding: 0.85rem 1rem; }
.page-fromzero-lesson .lesson-back { min-block-size: 2.35rem; padding-inline: 0.8rem; border: 1px solid var(--color-border-strong); border-radius: 6px; color: var(--color-text); font-size: 0.82rem; }
.page-fromzero-lesson .lesson-back:hover { border-color: var(--color-primary); color: var(--color-primary-text); text-decoration: none; background: color-mix(in oklab, var(--color-primary) 6%, var(--color-surface)); }

.page-fromzero-lesson .lesson-aside { gap: var(--lesson-gap-sm); }
.page-fromzero-lesson .lesson-rail-card { gap: var(--lesson-gap-sm); padding: 1.15rem; }
.page-fromzero-lesson .lesson-rail-title { color: var(--color-text); font-size: 0.88rem; }
.page-fromzero-lesson .lesson-toc a { font-size: 0.84rem; line-height: 1.75; }
.page-fromzero-lesson .lesson-related a { padding: 0.55rem; gap: var(--lesson-gap-sm); }
.page-fromzero-lesson .lesson-related-title { font-size: 0.84rem; }
.page-fromzero-lesson .lesson-related-kicker { color: var(--color-text-secondary); font-size: 0.74rem; }
.page-fromzero-lesson .lesson-related .badge { font-size: 0.74rem; }
.page-fromzero-lesson .lesson-aside .path-step .step { padding: 0.4rem 0.55rem; font-size: 0.84rem; }
.page-fromzero-lesson .lesson-aside .path-step .step { color: var(--color-text-secondary); }
.page-fromzero-lesson .lesson-aside .path-step .step-current { color: var(--color-primary-text); font-weight: 700; }

.page-fromzero-lesson .site-footer { padding-block: 1.7rem; font-size: 0.95rem; }
.page-fromzero-lesson .site-footer a { font-size: 0.95rem; }
.page-fromzero-lesson .site-footer p { font-size: 0.82rem; }

@media (min-width: 64em) {
  .page-fromzero-lesson .lesson-hero-inner { padding-block: var(--lesson-gap-xl) var(--lesson-gap-xl); gap: var(--lesson-gap-xl); }
  .page-fromzero-lesson .lesson-layout { padding-block: var(--lesson-gap-xl) var(--lesson-gap-xl); }
}
@media (min-width: 72em) {
  .page-fromzero-lesson .site-nav { padding-block: 1.3rem; }
  .page-fromzero-lesson .site-nav .nav-links { gap: 1.5rem; }
  .page-fromzero-lesson .nav-actions { gap: 0.85rem; }
  .page-fromzero-lesson .nav-actions .btn { min-block-size: 2.6rem; padding-inline: 1.2rem; }
}

/* Tighten the vertical composition: header → intro → lesson → footer. */
.page-fromzero-lesson .site-main { padding-block: 0; }
.page-fromzero-lesson .lesson-hero-inner { padding-block: var(--lesson-gap-lg) var(--lesson-gap-xl); }
.page-fromzero-lesson .lesson-layout { padding-block: var(--lesson-gap-lg) var(--lesson-gap-md); }
.page-fromzero-lesson .site-footer { padding-block: 1.5rem; }

/* On phones the four meta parts become a readable 2×2 block instead of a ragged wrap. */
.page-fromzero-lesson .lesson-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem 0.8rem; justify-content: initial; }
@media (min-width: 64em) {
  .page-fromzero-lesson .lesson-hero-inner { padding-block: var(--lesson-gap-xl) var(--lesson-gap-xl); }
  .page-fromzero-lesson .lesson-layout { padding-block: var(--lesson-gap-xl) var(--lesson-gap-md); }
  .page-fromzero-lesson .lesson-meta { display: flex; justify-content: space-between; }
}

/* Prev/next pager: previous on the right, next on the left, compact controls. */
.page-fromzero-lesson .lesson-pager { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.75rem; margin-block-start: var(--lesson-gap-lg); padding-block-start: var(--lesson-gap-md); border-block-start: 1px solid var(--color-border); }
.page-fromzero-lesson .lesson-pager-prev,
.page-fromzero-lesson .lesson-pager-next { min-inline-size: 0; }
.page-fromzero-lesson .lesson-pager-link { display: flex; align-items: center; gap: 0.55rem; min-block-size: 2.8rem; padding: 0.5rem 0.65rem; border: 1px solid var(--color-border); border-radius: 8px; background: var(--color-surface); color: var(--color-text); text-decoration: none; transition: border-color var(--motion), background var(--motion); }
.page-fromzero-lesson .lesson-pager-link:hover { border-color: var(--color-primary); background: color-mix(in oklab, var(--color-primary) 5%, var(--color-surface)); }
.page-fromzero-lesson .lesson-pager-link--disabled { color: var(--color-text-secondary); background: var(--color-surface-muted); border-style: dashed; opacity: 0.85; }
.page-fromzero-lesson .lesson-pager-link--next { justify-content: flex-end; text-align: end; border-color: color-mix(in oklab, var(--color-primary) 28%, var(--color-border)); background: color-mix(in oklab, var(--color-primary) 6%, var(--color-surface)); }
.page-fromzero-lesson .lesson-pager-copy { display: grid; gap: 0.1rem; min-inline-size: 0; }
.page-fromzero-lesson .lesson-pager-dir { color: var(--color-text-secondary); font-size: 0.7rem; line-height: 1.5; }
.page-fromzero-lesson .lesson-pager-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.78rem; font-weight: 700; line-height: 1.55; }
.page-fromzero-lesson .lesson-pager-arrow { flex: none; color: var(--color-primary-text); font-size: 0.9rem; line-height: 1; }

/* Path card becomes a quiet vertical stepper, not a stack of boxed buttons. */
.page-fromzero-lesson .lesson-aside .path-strip { position: relative; display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.page-fromzero-lesson .lesson-aside .path-step { position: relative; min-inline-size: 0; padding-inline-start: 1.2rem; }
.page-fromzero-lesson .lesson-aside .path-step::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0.28rem; border-inline-start: 1px solid var(--color-border); }
.page-fromzero-lesson .lesson-aside .path-step:first-child::before { inset-block-start: 0.8rem; }
.page-fromzero-lesson .lesson-aside .path-step:last-child::before { inset-block-end: calc(100% - 0.8rem); }
.page-fromzero-lesson .lesson-aside .path-step .step { position: relative; display: block; inline-size: 100%; min-block-size: 0; padding: 0.35rem 0.4rem; border: 0; border-radius: 5px; background: transparent; color: var(--color-text-secondary); font-size: 0.82rem; line-height: 1.7; text-decoration: none; }
.page-fromzero-lesson .lesson-aside .path-step .step::before { content: ""; position: absolute; inset-block-start: 0.7rem; inset-inline-start: -1.08rem; inline-size: 0.42rem; block-size: 0.42rem; border: 1px solid var(--color-border-strong); border-radius: 50%; background: var(--color-surface); }
.page-fromzero-lesson .lesson-aside .path-step .step:hover { color: var(--color-primary-text); background: color-mix(in oklab, var(--color-primary) 5%, var(--color-surface)); }
.page-fromzero-lesson .lesson-aside .path-step .step-current { color: var(--color-primary-text); font-weight: 700; background: color-mix(in oklab, var(--color-primary) 8%, var(--color-surface)); }
.page-fromzero-lesson .lesson-aside .path-step .step-current::before { border-color: var(--color-primary); background: var(--color-primary); }

/* Bookmark: draw a proper filled ribbon, not a clipped square. */
.page-fromzero-lesson .lesson-bookmark .bookmark-toggle::before { inline-size: 0.78rem; block-size: 1rem; border: 0; background: currentColor; clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 73%, 0 100%); }
.page-fromzero-lesson .lesson-bookmark .bookmark-toggle[aria-pressed="true"]::before { background: var(--color-primary); }

@media (min-width: 40em) {
  .page-fromzero-lesson .lesson-pager { grid-template-columns: repeat(2, minmax(0, 15rem)); justify-content: space-between; }
}




/* Philosopher profile: all image positions are intentional blank media slots.
   No SVG, no <img>; labels stay until the owner drops real portraits/covers in. */
.page-philosophers-detail .ph-media-slot { position: relative; display: grid; place-items: center; overflow: hidden; border: 1px solid var(--color-border); border-radius: calc(var(--ph-radius) - 3px); background: linear-gradient(145deg, color-mix(in oklab, var(--color-surface) 44%, transparent), color-mix(in oklab, var(--color-cream) 72%, transparent)), radial-gradient(70% 90% at 20% 10%, color-mix(in oklab, var(--color-sage) 9%, transparent), transparent 70%); box-shadow: inset 0 1px 0 color-mix(in oklab, var(--color-primary) 8%, white); }
.page-philosophers-detail .ph-media-slot::after { content: "جای تصویر"; position: relative; z-index: 1; padding: 0.22rem 0.5rem; border: 1px solid color-mix(in oklab, var(--color-border-strong) 70%, transparent); border-radius: 4px; background: color-mix(in oklab, var(--color-surface) 80%, transparent); color: var(--color-text-secondary); font-size: 0.72rem; font-weight: 600; line-height: 1.4; white-space: nowrap; }
.page-philosophers-detail .ph-side-portrait.ph-media-slot { min-block-size: 0; }
.page-philosophers-detail .ph-intro-art.ph-media-slot { min-block-size: 12rem; }
.page-philosophers-detail .ph-article-art.ph-media-slot { aspect-ratio: 1; border-radius: calc(var(--ph-radius) - 4px); background: color-mix(in oklab, var(--color-sage) 8%, var(--color-surface-muted)); box-shadow: none; }
.page-philosophers-detail .ph-article-art.ph-media-slot::after { padding: 0.14rem 0.3rem; font-size: 0.58rem; }
.page-philosophers-detail .ph-intro-art::before { content: none; }

/* No line icons remain; facts use a small CSS marker. */
.page-philosophers-detail .ph-fact-label { color: var(--color-text-secondary); font-size: 0.74rem; }
.page-philosophers-detail .ph-fact-label::before { content: ""; inline-size: 0.34rem; block-size: 0.34rem; flex: none; border-radius: 50%; background: var(--color-primary); }
.page-philosophers-detail .ph-fact-value { margin-inline-start: 0; font-size: 0.84rem; }
.page-philosophers-detail .ph-topic-card { padding-block-start: var(--sp-4); }
.page-philosophers-detail .ph-topic-card::before { content: ""; justify-self: start; inline-size: 2.2rem; block-size: 2px; border-radius: 1px; background: var(--color-primary); opacity: 0.7; }
.page-philosophers-detail .ph-tab { gap: 0; }
.page-philosophers-detail .ph-intro-cta { gap: 0.35rem; }

/* Philosopher page: cross-pillar suggestions become a balanced row of
   editorial cards instead of four small boxes stranded in a 6-column grid. */
.page-philosophers-detail .related-problems { max-inline-size: 100%; margin-block-start: var(--sp-8, 2rem); padding-block-start: var(--sp-5, 1.25rem); border-block-start: 1px solid var(--color-border); }
.page-philosophers-detail .related-problems > .h3 { margin: 0 0 1rem; color: var(--color-text); font-size: 1.18rem; font-weight: 700; line-height: 1.7; }
.page-philosophers-detail .related-problems .grid { display: flex; flex-wrap: wrap; gap: 0.85rem; }
.page-philosophers-detail .related-problems .card.article-card { position: relative; display: flex; flex: 1 1 15rem; flex-direction: column; gap: 0.55rem; min-inline-size: 0; min-block-size: 10.5rem; padding: 1.1rem; border: 1px solid var(--color-border); border-radius: 12px; background: var(--color-surface); box-shadow: 0 7px 20px color-mix(in oklab, var(--color-navy) 4%, transparent); text-decoration: none; overflow: hidden; transition: border-color var(--motion), background var(--motion), transform var(--motion); }
.page-philosophers-detail .related-problems .card.article-card::before { content: ""; position: absolute; inset-block-start: 0; inset-inline: 0; block-size: 3px; background: var(--pillar-accent, var(--color-primary)); }
.page-philosophers-detail .related-problems .card.article-card:hover { border-color: var(--pillar-accent, var(--color-primary)); background: color-mix(in oklab, var(--color-primary) 4%, var(--color-surface)); transform: translateY(-2px); }
.page-philosophers-detail .related-problems .card.article-card .related-problem-pillar { display: inline-flex; align-items: center; gap: 0.35rem; margin: 0; padding: 0; border: 0; color: var(--color-text-secondary); font-size: 0.7rem; font-weight: 600; line-height: 1.6; }
.page-philosophers-detail .related-problems .card.article-card .related-problem-pillar::before { content: ""; inline-size: 0.38rem; block-size: 0.38rem; flex: none; border-radius: 50%; background: var(--pillar-accent, var(--color-primary)); }
.page-philosophers-detail .related-problems .card.article-card h3 { margin: 0; color: var(--color-text); font-size: 0.98rem; font-weight: 700; line-height: 1.7; }
.page-philosophers-detail .related-problems .card.article-card::after { content: "ادامه ←"; margin-block-start: auto; padding-block-start: 0.35rem; color: var(--color-primary-text); font-size: 0.72rem; font-weight: 600; line-height: 1.5; }





/* ── Philosophy for Children: activities listing ───────────────────────── */
.page-children-list .kids-activities {
  --kids-act-radius: 14px;
  --kids-act-border: 1px solid var(--color-border);
  --kids-act-shadow: 0 10px 28px color-mix(in oklab, var(--color-navy) 5%, transparent);
  --kids-act-hero-bg: color-mix(in oklab, var(--color-cream) 72%, var(--color-background));
  --kids-act-art-bg: linear-gradient(145deg, color-mix(in oklab, var(--color-surface) 42%, transparent), color-mix(in oklab, var(--color-cream) 74%, transparent));
}
.page-children-list:has(.kids-activities) .site-main { padding-block-start: 0; }

.kids-activities .kids-act-hero {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.25rem;
  padding-block: 1.25rem 3.4rem;
  background: var(--kids-act-hero-bg);
  box-shadow: 0 0 0 100vmax var(--kids-act-hero-bg);
  clip-path: inset(0 -100vmax);
}
.kids-activities .kids-act-hero-copy { position: relative; z-index: 2; align-self: center; }
.kids-activities .kids-act-hero .breadcrumbs { margin: 0 0 0.85rem; font-size: 0.75rem; }
.kids-activities .kids-act-kicker { display: inline-flex; align-items: center; gap: 0.4rem; margin: 0; padding: 0.26rem 0.6rem; border: 1px solid color-mix(in oklab, var(--color-primary) 22%, var(--color-border)); border-radius: 5px; background: color-mix(in oklab, var(--color-primary) 7%, var(--color-surface)); color: var(--color-primary-text); font-size: 0.72rem; font-weight: 700; line-height: 1.5; }
.kids-activities .kids-act-kicker-dot { inline-size: 0.38rem; block-size: 0.38rem; flex: none; border-radius: 50%; background: var(--color-primary); }
.kids-activities .kids-act-hero h1 { margin: 0.7rem 0 0; font-size: clamp(2rem, 3.2vw, 2.35rem); font-weight: 800; line-height: 1.35; }
.kids-activities .kids-act-lead { max-inline-size: 52ch; margin: 0.7rem 0 0; color: var(--color-text-secondary); font-size: 0.98rem; line-height: 1.95; }
.kids-activities .kids-act-hero-art { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 9; min-inline-size: 0; overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--kids-act-radius); background: var(--kids-act-art-bg); box-shadow: inset 0 1px 0 color-mix(in oklab, var(--color-primary) 7%, white); }
.kids-activities .kids-act-hero-art::after,
.kids-activities .kids-act-teacher-art::after,
.kids-activities .kids-act-card-art::after { content: "جای تصویر"; position: relative; z-index: 1; padding: 0.22rem 0.5rem; border: 1px solid color-mix(in oklab, var(--color-border-strong) 70%, transparent); border-radius: 4px; background: color-mix(in oklab, var(--color-surface) 82%, transparent); color: var(--color-text-secondary); font-size: 0.71rem; font-weight: 600; line-height: 1.4; white-space: nowrap; }

.kids-activities .kids-act-filters { position: relative; z-index: 3; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.6rem; margin-block-start: -1.4rem; padding: 0.8rem; border: var(--kids-act-border); border-radius: var(--kids-act-radius); background: var(--color-surface); box-shadow: var(--kids-act-shadow); }
.kids-activities .kids-act-field { min-inline-size: 0; }
.kids-activities .kids-act-field :is(input, select) { inline-size: 100%; min-block-size: 3rem; padding: 0 0.8rem; border: 1px solid var(--color-border); border-radius: 8px; background: color-mix(in oklab, var(--color-surface-muted) 42%, var(--color-surface)); color: var(--color-text); font: inherit; font-size: 0.84rem; line-height: 1.5; }
.kids-activities .kids-act-field :is(input, select):focus { outline: 2px solid var(--color-primary); outline-offset: 1px; border-color: var(--color-primary); }
.kids-activities .kids-act-field input::placeholder { color: var(--color-text-muted); opacity: 1; }
.kids-activities .kids-act-apply { min-block-size: 3rem; padding-inline: 1.1rem; white-space: nowrap; font-size: 0.82rem; }

.kids-activities .kids-act-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; margin: 1.75rem 0 0; padding: 0; list-style: none; }
.kids-activities .kids-act-card { display: flex; flex-direction: column; block-size: 100%; overflow: hidden; border: var(--kids-act-border); border-radius: var(--kids-act-radius); background: var(--color-surface); box-shadow: var(--kids-act-shadow); color: var(--color-text); text-decoration: none; transition: border-color var(--motion), box-shadow var(--motion), transform var(--motion); }
.kids-activities .kids-act-card:hover { border-color: var(--color-primary); box-shadow: 0 12px 30px color-mix(in oklab, var(--color-navy) 8%, transparent); transform: translateY(-2px); }
.kids-activities .kids-act-card:focus-visible { outline: 2px solid var(--color-primary-text); outline-offset: 3px; }
.kids-activities .kids-act-card-art { position: relative; display: grid; place-items: center; flex: none; aspect-ratio: 16 / 9; border-block-end: 1px solid var(--color-border); background: var(--kids-act-art-bg); }
.kids-activities .kids-act-card-chip { position: absolute; inset-block-start: 0.65rem; inset-inline-start: 0.65rem; z-index: 2; padding: 0.18rem 0.5rem; border: 1px solid var(--color-border); border-radius: 4px; background: color-mix(in oklab, var(--color-surface) 90%, transparent); color: var(--color-primary-text); font-size: 0.67rem; font-weight: 700; line-height: 1.6; }
.kids-activities .kids-act-card-body { display: flex; flex: 1; flex-direction: column; gap: 0.45rem; padding: 1rem; }
.kids-activities .kids-act-card-title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; margin: 0; font-size: 1rem; font-weight: 800; line-height: 1.7; }
.kids-activities .kids-act-card-summary { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; color: var(--color-text-secondary); font-size: 0.82rem; line-height: 1.9; }
.kids-activities .kids-act-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-block-start: auto; padding-block-start: 0.8rem; border-block-start: 1px solid var(--color-border); }
.kids-activities .kids-act-card-age { color: var(--color-text-secondary); font-size: 0.72rem; font-weight: 600; }
.kids-activities .kids-act-card-more { display: inline-flex; align-items: center; gap: 0.3rem; color: var(--color-primary-text); font-size: 0.72rem; font-weight: 700; white-space: nowrap; }

.kids-activities .kids-act-teacher { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; margin: 1.5rem 0 2.25rem; padding: 1rem; border: var(--kids-act-border); border-radius: var(--kids-act-radius); background: color-mix(in oklab, var(--color-sage) 8%, var(--color-surface)); box-shadow: var(--kids-act-shadow); }
.kids-activities .kids-act-teacher-copy { align-self: center; }
.kids-activities .kids-act-teacher-kicker { display: flex; align-items: center; gap: 0.4rem; margin: 0 0 0.45rem; color: var(--color-primary-text); font-size: 0.72rem; font-weight: 700; }
.kids-activities .kids-act-teacher-kicker::before { content: ""; inline-size: 0.38rem; block-size: 0.38rem; border-radius: 50%; background: var(--color-gold); }
.kids-activities .kids-act-teacher h2 { margin: 0; font-size: 1.15rem; font-weight: 800; line-height: 1.65; }
.kids-activities .kids-act-teacher p { max-inline-size: 58ch; margin: 0.45rem 0 0; color: var(--color-text-secondary); font-size: 0.82rem; line-height: 1.9; }
.kids-activities .kids-act-teacher-link { min-block-size: 2.6rem; margin-block-start: 0.85rem; font-size: 0.78rem; }
.kids-activities .kids-act-teacher-art { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 9; min-inline-size: 0; overflow: hidden; border: 1px solid var(--color-border); border-radius: calc(var(--kids-act-radius) - 2px); background: var(--kids-act-art-bg); }

.kids-activities .empty-state { margin-block: 1.75rem; padding: 2rem 1rem; border: var(--kids-act-border); border-radius: var(--kids-act-radius); background: var(--color-surface); }

@media (min-width: 40em) {
  .kids-activities .kids-act-hero-art { aspect-ratio: 16 / 7; }
  .kids-activities .kids-act-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kids-activities .kids-act-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-block-start: -2rem; }
  .kids-activities .kids-act-field--search { grid-column: 1 / -1; }
  .kids-activities .kids-act-apply { grid-column: 1 / -1; }
  .kids-activities .kids-act-teacher { grid-template-columns: minmax(0, 1fr) 16rem; align-items: center; }
}
@media (min-width: 64em) {
  .kids-activities .kids-act-hero { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 2.5rem; padding-block: 1.5rem 3.25rem; }
  .kids-activities .kids-act-hero-art { aspect-ratio: 16 / 7; }
  .kids-activities .kids-act-filters { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr) auto; align-items: center; }
  .kids-activities .kids-act-field--search,
  .kids-activities .kids-act-apply { grid-column: auto; }
  .kids-activities .kids-act-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.15rem; }
  .kids-activities .kids-act-teacher { grid-template-columns: minmax(0, 1fr) 18rem; padding: 1.15rem; }
}





/* Activities pagination: separate it from the grid and match the page controls. */
.kids-activities .pagination { margin-block-start: 2rem; }
.kids-activities .page-links { align-items: center; gap: 0.3rem; }
.kids-activities .page-links a,
.kids-activities .page-links strong { min-inline-size: 2.75rem; min-block-size: 2.75rem; border: 1px solid var(--color-border); border-radius: 50%; background: var(--color-surface); color: var(--color-text); font-size: 0.84rem; box-shadow: none; }
.kids-activities .page-links strong { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-on-primary); }
.kids-activities .page-links a:hover { border-color: var(--color-primary); background: var(--color-surface); color: var(--color-primary-text); }
.kids-activities .page-links .page-prev,
.kids-activities .page-links .page-next { min-inline-size: auto; padding-inline: 0.7rem; border-radius: 8px; }
.kids-activities .page-word { font-size: 0.72rem; font-weight: 600; }