/* ═══ HELHEIMRS — Home «دروازه» ═══ */
.pg-home {
  --hdr-h: calc(68px + var(--safe-t, 0px));
  /* The stage is budgeted by height, not only by width. --hero-rest is everything
     on the first screen that is not the gate (header, kicker, title, sub-line,
     buttons, the next-session chip, the hint and the gaps between them); the gate
     takes what is left, up to its full size. 1.093 is the mark's aspect. */
  --hero-rest: 470px;
  --mark-w: clamp(150px, calc((100svh - var(--hero-rest)) / 1.093), min(420px, 74vw));
  /* the hero stage is a fixed scene, not a themed surface: its own foreground ramp */
  --hero-fg: var(--frost);
  --hero-body: #D9DCD6;
  --hero-muted: #B9BDB6;
  --hero-faint: #8F948E;
  --hero-lit: #4BE2AE;
  --hero-ground: var(--void);
  --hero-light-1: rgba(75,226,174,.42);
  --hero-light-2: rgba(47,211,154,.12);
}
@media (max-width: 900px) { .pg-home { --hdr-h: calc(60px + var(--safe-t, 0px)); } }

/* ── Hero: a scroll stage with a sticky viewport ── */
.pg-home .hero { position: relative; height: 200vh; height: 200svh; margin-top: calc(-1 * var(--hdr-h)); }
.pg-home .hero.is-static { height: auto; }
.pg-home .hero__sticky {
  position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column; align-items: center; gap: clamp(6px, 1.5svh, 18px);
  padding: calc(var(--hdr-h) + var(--s-2)) var(--gutter) var(--s-4);
  background: var(--hero-ground); color: var(--hero-body);
}
.pg-home .hero.is-static .hero__sticky { position: relative; height: auto; min-height: 100vh; min-height: 100svh; }
/* the gate and its words sit centred in the room above the foot; at short heights
   the auto margins fall to zero and everything simply stacks, never overlapping */
.pg-home .hero__gate { margin-top: auto; }
.pg-home .hero__foot { margin-top: auto; padding-top: var(--s-3); }

/* ── the realm behind the gate ── */
.pg-home .realm { position: absolute; overflow: hidden; pointer-events: none; transform-origin: 0 0; }
.pg-home .hero__backdrop { position: absolute; inset: 0; z-index: 0; }
.pg-home .hero__backdrop .realm { inset: 0; }
.pg-home .hero__backdrop::after { content: ""; position: absolute; inset: 0; background: var(--hero-ground); opacity: .62; }
/* The realm is the site's own plate (HX.art.realm), drawn inline so the time of
   day and Frost reach its planes from :root. The plate holds still; the camera
   moves past it, and only its two ravens glide — slowly, a long way apart in
   phase, so they read as birds riding the air rather than a loop. Without
   motion they hold where they were drawn. */
.pg-home .realm__scene { position: absolute; inset: 0; }
.pg-home .realm__scene > svg { display: block; width: 100%; height: 100%; }
/* The ravens fly in HTML boxes of their own (the script lifts them out of the
   plate), so the compositor moves them and the page never has to restyle or
   relayout for a bird. The flock is the plate's own frame: the plate is a
   viewBox sliced to cover (xMidYMid slice), so one plate unit is
   max(width / vbw, height / vbh) on screen, about the centre — the same mapping,
   done here with container units, puts each bird where the plate drew it at
   any size of the stage. */
.pg-home .realm__flock {
  position: absolute; inset: 0; pointer-events: none; container-type: size;
  --u: max(100cqw / var(--vbw, 1600), 100cqh / var(--vbh, 900));
}
.pg-home .realm__flight {
  position: absolute; display: block;
  left: calc(50cqw + (var(--x) - var(--vbx, 0) - var(--vbw, 1600) / 2) * var(--u));
  top: calc(50cqh + (var(--y) - var(--vby, 0) - var(--vbh, 900) / 2) * var(--u));
  width: calc(var(--w) * var(--u));
  /* the bird's own origin in its drawing (-84,-112 in a 170 × 180 box) is its pivot */
  transform-origin: 49.4% 62.2%; will-change: transform;
}
.pg-home .realm__flight > svg { display: block; width: 100%; height: auto; }
.pg-home .realm__flight.is-away { display: none; }
@media (prefers-reduced-motion: no-preference) {
  :root:not([data-motion="off"]) .pg-home .realm__flight--1 { animation: hm-glide 28s ease-in-out infinite alternate; }
  :root:not([data-motion="off"]) .pg-home .realm__flight--2 { animation: hm-glide 36s ease-in-out -15s infinite alternate-reverse; }
}
/* held (not reset) wherever nobody sees them: the script sets .is-gliding only
   while the realm is in view, the tab in front and the window focused */
:root .pg-home .hero:not(.is-gliding) .realm__flight { animation-play-state: paused; }
/* They face the tree: a short way toward it, mostly rising and settling on the
   air. Distances are the bird's own size (22, 44, 56 of its 170 units across;
   16, 6 of its 180 down), so the glide scales with the plate. */
@keyframes hm-glide {
  0% { transform: translate3d(0, 0, 0) rotate(0); }
  35% { transform: translate3d(12.9%, -8.9%, 0) rotate(-2deg); }
  70% { transform: translate3d(25.9%, 3.3%, 0) rotate(1.5deg); }
  100% { transform: translate3d(32.9%, -3.3%, 0) rotate(0); }
}
/* the jade wash plus the fall to black at the foot, which is also what keeps the
   caption legible without a slab behind it */
.pg-home .realm__grade {
  position: absolute; inset: 0;
  background:
    radial-gradient(78% 52% at 50% 44%, rgba(47,211,154,.12), transparent 70%),
    linear-gradient(180deg, rgba(10,10,11,.62) 0%, rgba(10,10,11,.34) 18%, rgba(10,45,36,.28) 40%, rgba(10,10,11,.8) 86%, var(--void) 100%);
}
:root[data-realm="dusk"] .pg-home .realm__grade::after { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 38% at 50% 62%, rgba(194,58,43,.20), transparent 70%); }
/* haze: two bands of cold air at different depths — they travel at different
   rates as you arrive, which is all the depth a still painting needs */
.pg-home .realm__haze { position: absolute; inset-inline: -10%; pointer-events: none; }
.pg-home .realm__haze--far { bottom: 44%; height: 24%; background: linear-gradient(180deg, transparent, rgba(var(--fog-color), .22) 55%, rgba(var(--fog-color), .12) 78%, transparent); }
.pg-home .realm__haze--near { bottom: 16%; height: 22%; background: linear-gradient(180deg, transparent, rgba(var(--fog-color), .20) 60%, transparent); }
.pg-home .realm__mist { position: absolute; top: -12%; bottom: -12%; width: 82%; }
.pg-home .realm__mist--l { left: -18%; background: radial-gradient(58% 56% at 46% 56%, rgba(var(--fog-color), .55), rgba(var(--fog-color), .2) 42%, transparent 70%); }
.pg-home .realm__mist--r { right: -18%; background: radial-gradient(58% 56% at 54% 44%, rgba(var(--fog-color), .5), rgba(var(--fog-color), .18) 42%, transparent 70%); }
.pg-home .hero.is-static .realm__mist { opacity: .5; }

/* the line that lands once you are through the gate */
.pg-home .realm__caption {
  position: absolute; bottom: 18%; inset-inline: 0; z-index: 2; margin: 0; max-width: none; padding-inline: var(--gutter);
  text-align: center; opacity: 0; display: grid; gap: var(--s-2); justify-items: center; pointer-events: none;
}
.pg-home .realm__caption-line { font-family: var(--font-display); font-weight: 900; font-size: clamp(1.7rem, 4.2vw, 2.8rem); line-height: 1.3; color: var(--hero-fg); text-shadow: 0 2px 34px rgba(0,0,0,.85); }
.pg-home .realm__caption-sub { font-size: var(--fs-md); color: var(--hero-muted); text-shadow: 0 1px 18px rgba(0,0,0,.8); }
.pg-home .realm__caption-now { font-size: var(--fs-xs); color: var(--hero-muted); text-shadow: 0 1px 12px rgba(0,0,0,.8); }

/* ── the gate itself: the camera's transform lives on .hero__gate (origin at its
   top-left corner, the script does the maths), the ignition's on .hero__gate-in ── */
.pg-home .hero__gate { position: relative; z-index: 1; flex: none; transform-origin: 0 0; pointer-events: none; }
.pg-home .hero__gate-in { position: relative; isolation: isolate; }
/* the mark (and its front copy), not the realm plate and its ravens inside the window */
.pg-home .hero__gate svg.hx-mark { display: block; width: var(--mark-w); height: auto; overflow: visible; }
.pg-home .hero__front { position: absolute; inset: 0; width: 100% !important; height: 100% !important; z-index: 2; }
/* the window onto the realm, cut to the doorway's inner edge by the script */
.pg-home .hero__window { position: absolute; inset: 0; z-index: 1; opacity: 0; will-change: opacity; }
.pg-home .hero__window .realm { will-change: transform; }
.pg-home .hero__light { position: absolute; inset: 0; background: radial-gradient(circle var(--ar, 160px) at var(--ax, 50%) var(--ay, 52%), var(--hero-light-1), var(--hero-light-2) 48%, transparent 100%); }
.pg-home .hero__glow { position: absolute; left: 8%; right: 8%; bottom: -3%; height: 14%; z-index: -1; background: radial-gradient(ellipse at 50% 50%, rgba(47,211,154,.34), transparent 68%); filter: blur(10px); }
.pg-home .hero__mark .keeper-eye { opacity: 1; }
/* The Gatekeeper minds the cursor (the script damps --kx/--ky toward it): the hood
   turns on the neck (±6°) and the eyes follow inside it (±3 units). The robe
   panels sway a few times (±1.5°), then the figure rests. Each part carries its
   joint inline (HX.art's rig: transform-origin in the figure's own units), so
   the page sets only the turn; px inside the SVG are the figure's units. */
.pg-home .hero__front .keeper-head { transform: rotate(calc(var(--kx, 0) * 6deg)) translateY(calc(var(--ky, 0) * .8px)); }
.pg-home .hero__front .keeper-eyes { transform: translate(calc(var(--kx, 0) * 3px), calc(var(--ky, 0) * 1.2px)); }
/* twice, not three times: an SVG part is restyled and laid out on the main thread
   every frame it moves, so the figure is at rest within 12 s of the page opening */
.pg-home .hero__front .keeper-robe { animation: hm-sway 6s ease-in-out 2; }
.pg-home .hero__front .keeper-robe:nth-child(2) { animation-delay: -2s; }
.pg-home .hero__front .keeper-robe:nth-child(3) { animation-delay: -4s; }
@keyframes hm-sway { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(1.5deg); } 75% { transform: rotate(-1.5deg); } }

/* ── ignition (first visit in a session; motion only) ──
   The words do not wait for the light: the title is carved at once and the
   buttons are there inside a second. Behind them the cracks open, the frame's
   edge runs round from the keystone, and then the doorway fills with light.
   Every keyframe set ends on the resting state, so lifting the class (which the
   script does when it is over, or at the first input) changes nothing on screen. */
.pg-home.is-igniting .hero__gate-in { animation: hm-settle 1.6s var(--ease-out) both, hm-flare 620ms ease-out 1350ms both; }
@keyframes hm-settle { from { transform: scale(.955); } to { transform: none; } }
@keyframes hm-flare { 0%, 100% { filter: none; } 35% { filter: brightness(1.3); } }
.pg-home.is-igniting .hero__glow { animation: hm-fill 900ms var(--ease-out) 1400ms both; }
.pg-home.is-igniting .hero__mark .crack { stroke-dasharray: 1; animation: hm-crack 480ms var(--ease-out) both; animation-delay: calc(200ms + var(--i, 0) * 70ms); }
@keyframes hm-crack { 0% { stroke-dashoffset: 1; opacity: 0; } 15% { opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 1; } }
.pg-home.is-igniting .hero__mark .mark-frame { stroke-dasharray: 1; animation: hm-draw 650ms var(--ease-out) 900ms both; }
.pg-home.is-igniting .hero__mark .mark-frame2 { stroke-dasharray: 1; animation: hm-draw 600ms var(--ease-out) 1000ms both; }
@keyframes hm-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
.pg-home.is-igniting .hero__mark :is(.mark-inner-fill, .mark-steps-light) { animation: hm-fill 500ms var(--ease-out) 1350ms both; }
.pg-home.is-igniting .hero__mark .mark-frame-halo { animation: hm-fill 650ms var(--ease-out) 1450ms both; }
.pg-home.is-igniting .hero__mark .keeper-eye { animation: hm-fill 500ms var(--ease-out) 1700ms both; }
@keyframes hm-fill { from { opacity: 0; } }
/* the carve starts at the first letter: from the right in Persian, from the left in
   English, behind a feathered edge rather than a hard cut through the stems */
.pg-home.is-igniting .hero__title {
  -webkit-mask-image: linear-gradient(to left, #000 44%, transparent 56%); mask-image: linear-gradient(to left, #000 44%, transparent 56%);
  -webkit-mask-size: 225% 100%; mask-size: 225% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  animation: hm-carve 700ms var(--ease-out) 80ms both;
}
@keyframes hm-carve {
  from { -webkit-mask-position: 0 0; mask-position: 0 0; text-shadow: 0 0 26px rgba(47,211,154,.95), 0 0 60px rgba(47,211,154,.5); }
  to { -webkit-mask-position: 100% 0; mask-position: 100% 0; }
}
[dir="ltr"] .pg-home.is-igniting .hero__title { -webkit-mask-image: linear-gradient(to right, #000 44%, transparent 56%); mask-image: linear-gradient(to right, #000 44%, transparent 56%); animation-name: hm-carve-ltr; }
@keyframes hm-carve-ltr {
  from { -webkit-mask-position: 100% 0; mask-position: 100% 0; text-shadow: 0 0 26px rgba(47,211,154,.95), 0 0 60px rgba(47,211,154,.5); }
  to { -webkit-mask-position: 0 0; mask-position: 0 0; }
}
.pg-home.is-igniting .hero__kicker { animation: hm-rise 450ms var(--ease-out) 40ms both; }
.pg-home.is-igniting .hero__sub { animation: hm-rise 450ms var(--ease-out) 250ms both; }
.pg-home.is-igniting .hero__cta { animation: hm-rise 450ms var(--ease-out) 350ms both; }
.pg-home.is-igniting .hero__next { animation: hm-rise 450ms var(--ease-out) 520ms both; }
.pg-home.is-igniting .hero__hint-in { animation: hm-fill 600ms var(--ease-out) 2100ms both; }
@keyframes hm-rise { from { opacity: 0; transform: translate3d(0, 14px, 0); } }

/* ── hero copy ── */
.pg-home .hero__copy { position: relative; z-index: 2; text-align: center; max-width: 900px; display: grid; justify-items: center; }
.pg-home .hero__kicker { margin: 0 0 var(--s-2); max-width: 46em; font-size: var(--fs-md); font-weight: 500; line-height: 1.8; color: var(--hero-body); text-wrap: balance; }
.pg-home .hero__title { font-size: min(var(--fs-hero), 9svh); margin: 0 0 var(--s-2); color: var(--hero-fg); text-shadow: 0 1px 0 rgba(255,255,255,.06), 0 -1px 0 rgba(0,0,0,.8); }
/* English is 21 characters to Persian's 13: its own size keeps it on one line */
[lang="en"] .pg-home .hero__title { font-size: min(clamp(2.3rem, 5.2vw, 4.4rem), 8svh); }
.pg-home .hero__sub { margin: 0 auto var(--s-4); max-width: 46em; font-size: var(--fs-lg); line-height: 1.75; color: var(--hero-muted); text-wrap: balance; }
.pg-home .hero__cta { display: flex; gap: var(--s-3); justify-content: center; flex-wrap: wrap; }
/* the stage never follows the theme, so its controls carry the scene's own colours */
.pg-home .hero__cta .btn--ghost { color: var(--hero-lit); border-color: rgba(47,211,154,.45); }
.pg-home .hero__cta .btn--ghost:hover { background: rgba(47,211,154,.08); border-color: rgba(47,211,154,.8); }
.pg-home .hero__cta .btn--primary { --btn-bg: var(--emerald-grad); color: var(--accent-fg); }

/* ── the foot of the first screen: the next table, and the way on ── */
.pg-home .hero__foot { position: relative; z-index: 2; display: grid; justify-items: center; gap: var(--s-3); max-width: 100%; }
.pg-home .hero__next {
  display: inline-flex; align-items: center; gap: var(--s-2) var(--s-3); max-width: min(680px, 100%); min-width: 0;
  padding: 7px var(--s-4); font-size: var(--fs-sm); color: var(--hero-body); text-decoration: none;
  /* the chamfer's stroke is drawn by --facet-edges in --bd, so the outline runs
     unbroken round all six sides */
  --bd: rgba(47,211,154,.32); --facet: 8px; --next-bg: rgba(10,10,11,.5);
  border: 1px solid var(--bd); background: var(--facet-edges), var(--next-bg); clip-path: var(--clip-facet);
  transition: border-color var(--t-ui) var(--ease-stone), background-color var(--t-ui) var(--ease-stone);
}
.pg-home .hero__next:hover { text-decoration: none; --bd: rgba(47,211,154,.7); --next-bg: rgba(47,211,154,.08); }
.pg-home .hero__next-k { color: var(--hero-lit); font-weight: 700; white-space: nowrap; }
.pg-home .hero__next-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--hero-fg); font-weight: 700; }
.pg-home .hero__next-m { white-space: nowrap; color: var(--hero-muted); }
.pg-home .hero__next-s { white-space: nowrap; color: var(--hero-lit); font-weight: 700; }
.pg-home .hero__next-s.is-full { color: var(--hero-muted); }
/* hairline dividers, not a dot: a «·» beside Persian digits reads as a zero */
.pg-home .hero__next :is(.hero__next-m, .hero__next-s) { padding-inline-start: var(--s-3); border-inline-start: 1px solid rgba(185,189,182,.28); line-height: 1.2; }
:root[data-theme="light"] .pg-home .hero__next :is(.hero__next-m, .hero__next-s) { border-inline-start-color: rgba(16,32,27,.22); }
.pg-home .hero__hint { margin: 0; max-width: none; display: flex; justify-content: center; font-size: var(--fs-xs); color: var(--hero-faint); pointer-events: none; }
.pg-home .hero__hint-in { display: inline-flex; gap: var(--s-2); align-items: center; }
.pg-home .hero__hint .hero__hint-rune { color: var(--hero-lit); animation: hm-hint 2.2s ease-in-out 6; }
/* the hint bobs until it has been obeyed, then rests */
.pg-home .hero.has-scrolled .hero__hint .hero__hint-rune { animation: none; }
.pg-home .hero__hint .realm-now { color: var(--hero-muted); }
@keyframes hm-hint { 0%, 100% { transform: translateY(0); opacity: .55; } 50% { transform: translateY(5px); opacity: 1; } }
.pg-home .hero__fade { position: absolute; inset-inline: 0; bottom: 0; height: 14vh; z-index: 1; background: linear-gradient(180deg, transparent, var(--bg)); pointer-events: none; }
.pg-home .hero.is-through .hero__fade { height: 22vh; }

/* ── Frost: pale stone and dawn mist; the gate stays black basalt ── */
:root[data-theme="light"] .pg-home {
  --hero-fg: #10201B; --hero-body: #1F2C28; --hero-muted: #3C4A45; --hero-faint: #434E4A; --hero-lit: #0C5A42; --hero-ground: #E3E6E0;
  --hero-light-1: rgba(250,252,251,.9); --hero-light-2: rgba(232,240,237,.5);
}
/* Frost passes into its own plate — the mist, lifted to dawn — so the push-through
   lands in the same pale world it started in, and the caption stays ink on pale. */
:root[data-theme="light"] .pg-home .realm__grade { background: linear-gradient(180deg, rgba(230,237,235,.5) 0%, rgba(230,237,235,.12) 30%, rgba(214,224,220,.22) 62%, rgba(227,230,224,.86) 90%, var(--bg) 100%); }
:root[data-theme="light"][data-realm] .pg-home .realm__grade::after { display: none; }
:root[data-theme="light"] .pg-home .realm__caption-line, :root[data-theme="light"] .pg-home .realm__caption-sub, :root[data-theme="light"] .pg-home .realm__caption-now { text-shadow: 0 1px 14px rgba(240,244,242,.95), 0 0 2px rgba(240,244,242,.9); }
:root[data-theme="light"] .pg-home .hero__title { text-shadow: 0 1px 0 rgba(255,255,255,.5); }
:root[data-theme="light"] .pg-home .hero__cta .btn--ghost { color: #0C5A42; border-color: rgba(15,107,79,.5); }
:root[data-theme="light"] .pg-home .hero__cta .btn--ghost:hover { background: rgba(15,107,79,.08); }
/* no emerald blur on pale stone: the gate stands on a cold contact shadow */
:root[data-theme="light"] .pg-home .hero__glow { background: radial-gradient(ellipse at 50% 50%, rgba(28,44,52,.22), transparent 68%); }
:root[data-theme="light"] .pg-home .hero__mark .crack { stroke-width: 1.6px !important; stroke-opacity: .9 !important; }
:root[data-theme="light"] .pg-home .hero__next { --bd: rgba(15,107,79,.4); --next-bg: rgba(251,251,249,.72); }
:root[data-theme="light"] .pg-home .hero__next:hover { --bd: rgba(15,107,79,.75); --next-bg: #FBFBF9; }

/* ── Live strip ── */
.pg-home .live { padding-block: var(--s-6) 0; position: relative; z-index: 3; }
.pg-home .live .glow-strip { justify-content: space-between; gap: var(--s-4) var(--s-6); }
.pg-home .live__item { display: grid; gap: 2px; min-width: 0; }
.pg-home .live__item small { color: var(--fg-muted); font-size: var(--fs-xs); }
.pg-home .live__item--title { flex: 1 1 14rem; max-width: 32ch; }
.pg-home .live__name { display: grid; gap: 2px; min-width: 0; }
/* the table's own picture, where its DM gave it one: a cut stone tile beside its name */
.pg-home .live__item--title.has-cover { grid-template-columns: 72px minmax(0, 1fr); align-items: center; column-gap: var(--s-4); max-width: calc(32ch + 72px + var(--s-4)); }
:is(.pg-home .live__cover, .pg-home .quest__cover) {
  --bd: var(--line-glow); --facet: 10px; display: block; position: relative; padding: 1px;
  background: var(--bd); clip-path: var(--clip-facet);
}
/* the frame is the 1px of --bd left round the picture; the picture's own cut sits
   1px in from the frame's on the diagonal too (10px + √2 − 2px) */
:is(.pg-home .live__cover, .pg-home .quest__cover) img { --facet: 9.4px; display: block; width: 100%; height: 100%; aspect-ratio: 1; object-fit: cover; clip-path: var(--clip-facet); background: var(--bg-elev-2); }
.pg-home .live__cover { width: 72px; height: 72px; }
:root[data-theme="light"] :is(.pg-home .live__cover, .pg-home .quest__cover) { --bd: rgba(15,107,79,.45); }
/* a title or a name someone typed may be one unbroken word: it wraps inside its own
   cell, and the title stops at two lines */
.pg-home .live__title { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-lg); color: var(--fg-strong); line-height: 1.35; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pg-home .live__dm { overflow-wrap: anywhere; }
/* the strip reads right-to-left; only the clock run is isolated LTR.
   The countdown is two pieces, «۲ روز و» and the clock, and the only place it may
   break is between them: on a narrow card or at enlarged text the days take one
   line and the clock the next. Neither piece is ever split or cut; a clock that
   loses its first digits reads as a different time («۰۹:۳۱:۲۰» → «۹:۳۱:۲۰»).
   The clock's size is also held to the card: eight tabular figures and their
   tracking are ≈5.5em wide, so 17cqi of the strip keeps every digit inside even at
   200 % text on a 320 px phone. Where the card has room the cap never binds. */
.pg-home .live .glow-strip { container: hm-live / inline-size; }
.pg-home .live__timer { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-1) .3rem; unicode-bidi: isolate; }
.pg-home .live__days { font-family: var(--font-body); font-weight: 700; font-size: var(--fs-md); color: var(--fg); }
.pg-home .live__clock { direction: ltr; unicode-bidi: isolate; letter-spacing: .04em; white-space: nowrap; font-size: min(1em, 17cqi); }
/* a small halo held on the numeral itself, not a pulse across the strip */
.pg-home .live__seats { position: relative; justify-self: start; isolation: isolate; text-shadow: 0 0 10px rgba(47,211,154,.45); }
.pg-home .live__seats::before { content: ""; position: absolute; inset: -6px -12px; border-radius: 50%; background: radial-gradient(closest-side, rgba(47,211,154,.24), transparent); pointer-events: none; z-index: -1; }
.pg-home .live__seats.is-full { color: var(--fg-faint); text-shadow: none; }
.pg-home .live__seats.is-full::before { display: none; }
:root[data-theme="light"] .pg-home .live__seats { text-shadow: none; }
:root[data-theme="light"] .pg-home .live__seats::before { display: none; }
.pg-home .live__time { font-weight: 700; color: var(--fg-strong); }
@media (max-width: 700px) { .pg-home .live .glow-strip { flex-direction: column; align-items: stretch; } .pg-home .live .btn { width: 100%; } .pg-home .live__item--title { max-width: none; flex-basis: auto; } }

/* ── Sections ── */
/* A drawn rune (home.js rune() → HX.art.runes): a box the stave's own size, so the
   mark centres on the line it marks instead of riding a font's ascent and
   descent. The staves are SVG in currentColor; the run gives the colour. */
.pg-home .hm-rune { flex: none; color: var(--rune-lit); user-select: none; }
.pg-home .hm-rune > svg { display: block; }
.pg-home .sec { padding-block: var(--s-9); }
.pg-home .sec + .sec { padding-top: 0; }
.pg-home .live + .sec { padding-top: var(--s-8); }
/* One grid per head: the rune and the rule share the heading's line, the link to
   everything sits at the end of it, and the kicker runs underneath. */
.pg-home .hm-head {
  display: grid; grid-template-columns: auto auto minmax(var(--s-6), 1fr) auto;
  grid-template-areas: "rune title line more" ". kicker kicker kicker";
  align-items: center; column-gap: var(--s-4); row-gap: var(--s-1);
}
.pg-home .hm-head__rune { grid-area: rune; }
.pg-home .hm-head h2 { grid-area: title; }
.pg-home .hm-head::after { grid-area: line; min-width: 0; }
.pg-home .hm-head .sec-more { grid-area: more; margin: 0; font-weight: 700; font-size: var(--fs-sm); white-space: nowrap; }
.pg-home .hm-head .kicker { grid-area: kicker; margin: 0; max-width: 60ch; font-size: var(--fs-sm); font-weight: 400; color: var(--fg-muted); }
@media (max-width: 600px) {
  .pg-home .hm-head { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "rune title" ". kicker" ". more"; column-gap: var(--s-3); }
  .pg-home .hm-head::after { display: none; }
  .pg-home .hm-head .sec-more { justify-self: start; margin-top: var(--s-1); }
}

/* quests — every card in a row ends on the same line, so the seats line up */
.pg-home .quests { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); }
.pg-home .quest { display: flex; flex-direction: column; gap: var(--s-3); min-width: 0; }
.pg-home .quest__tags { display: flex; gap: var(--s-2); flex-wrap: wrap; }
.pg-home .quest__title { margin: 0; font-size: var(--fs-xl); overflow-wrap: anywhere; }
.pg-home .quest__top { display: grid; gap: var(--s-3); min-width: 0; }
/* a table with a picture leads with it: the tile stands beside its tags and name */
.pg-home .quest__top.has-cover { grid-template-columns: 64px minmax(0, 1fr); column-gap: var(--s-3); align-items: start; }
.pg-home .quest__top.has-cover .quest__cover { grid-row: 1 / span 2; width: 64px; height: 64px; }
.pg-home .quest__title a { color: var(--fg-strong); }
.pg-home .quest__facts { margin: 0; display: grid; gap: 4px; font-size: var(--fs-sm); }
.pg-home .quest__facts > div { display: grid; grid-template-columns: 5.5em minmax(0, 1fr); gap: var(--s-2); }
.pg-home .quest__facts dt { color: var(--fg-muted); }
.pg-home .quest__facts dd { margin: 0; min-width: 0; color: var(--fg); overflow-wrap: anywhere; }
.pg-home .quest__tones { display: flex; gap: var(--s-2); flex-wrap: wrap; }
/* The foot is one shape on every card, whatever its seat count: the shields on
   their own row, then what is open at the start and the difficulty at the end,
   on one line. A wrapping row let each card decide by its own content (six
   shields beside the ten-step bar wrapped, five did not), and the seat rows of
   one row of cards stood at three heights. Both rows are a fixed height and
   never wrap, so with the foot pushed to the card's end the shields line up. */
.pg-home .quest__foot {
  container: quest-foot / inline-size;
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "seats seats" "free diff"; grid-template-rows: 32px auto;
  align-items: center; gap: var(--s-2) var(--s-3);
  margin-top: auto; padding-top: var(--s-3); border-top: 1px solid var(--line);
}
/* eight discs at most (home.js folds the rest into «+N»), giving a little on the
   narrowest card rather than spilling; the row keeps its 32px either way */
.pg-home .quest__seats { grid-area: seats; justify-content: flex-start; align-items: center; min-width: 0; }
.pg-home .quest__seats .shield { flex: 0 1 var(--seat); min-width: 22px; width: auto; height: auto; aspect-ratio: 1; }
.pg-home .quest .shield--more { color: var(--fg-muted); }
.pg-home :is(.quest__free, .quest__diff > small) { color: var(--fg-muted); font-size: var(--fs-xs); line-height: 1.5; }
.pg-home .quest__free { grid-area: free; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pg-home .quest__diff { grid-area: diff; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
/* The longest line («جای خالی نمانده», "12 open seats") and the whole scale, word
   and all, fit a foot down to 231px in Persian and 244px in English (a three-up
   row at 1024 gives 248). Narrower than that — the first widths of a two-up or
   three-up row, a 320px phone — the word steps aside: the notches and «۵/۱۰»
   still read as the scale, and the scale's own label still names it. */
@container quest-foot (width < 244px) { :root[lang="en"] .pg-home .quest__diff > small { display: none; } }
@container quest-foot (width < 231px) { .pg-home .quest__diff > small { display: none; } }
/* the open seats are the one lit thing on the card: they are what it asks you to take */
.pg-home .quest .shield--free { background: radial-gradient(circle at 50% 38%, rgba(75,226,174,.34), rgba(47,211,154,.12) 72%); box-shadow: inset 0 0 0 1.5px rgba(47,211,154,.72); }
.pg-home .quest .shield--taken { background: var(--bg-elev-3); border-top-color: var(--line); }
.pg-home .quest .shield--taken::after { opacity: .4; }
.pg-home .quest .skulls i.on { color: var(--fg-strong); filter: none; }
/* the ten-step scale: notches and the number (quests.css draws the same on the sessions page) */
.pg-home .hdiff { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-xs); color: var(--fg-muted); white-space: nowrap; }
.pg-home .hdiff__bar { display: inline-flex; gap: 2px; align-items: flex-end; }
.pg-home .hdiff__bar i { width: 4px; height: 12px; background: var(--line-strong); transform: skewX(-12deg); }
.pg-home .hdiff__bar i.on { background: var(--fg-strong); }
.pg-home .hdiff b { color: var(--fg); font-weight: 700; font-variant-numeric: tabular-nums; }
.pg-home .hdiff b small { color: var(--fg-muted); font-weight: 400; }
:root[data-theme="light"] .pg-home .quest .shield--free { background: radial-gradient(circle at 50% 38%, rgba(15,107,79,.42), rgba(15,107,79,.2) 72%); box-shadow: inset 0 0 0 1.5px var(--jade); }
:root[data-theme="light"] .pg-home .quest .shield--taken { background: #E6E9E4; border-top-color: rgba(24,36,34,.14); }
@media (max-width: 1000px) { .pg-home .quests { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .pg-home .quests { grid-template-columns: minmax(0, 1fr); } }

/* no sessions yet: one row, not a box the size of the cards that are missing */
.pg-home .hm-empty {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--s-3) var(--s-5);
  /* solid, not dashed: dashed is the system's "disabled / pending" edge, and a
     dash cannot be closed round the chamfer */
  --bd: var(--line-strong); --facet: 12px;
  min-height: 140px; padding: var(--s-4) var(--s-6); background: var(--facet-edges), var(--bg-elev); border: 1px solid var(--bd); clip-path: var(--clip-facet);
}
.pg-home .hm-empty__keeper svg { display: block; width: 56px; height: auto; filter: drop-shadow(0 0 1px rgba(47,211,154,.55)) drop-shadow(0 6px 10px rgba(0,0,0,.35)); }
:root[data-theme="light"] .pg-home .hm-empty__keeper svg { filter: none; }
.pg-home .hm-empty h3 { margin: 0 0 var(--s-1); font-size: var(--fs-lg); }
.pg-home .hm-empty p { margin: 0; color: var(--fg-muted); }
@media (max-width: 600px) { .pg-home .hm-empty { grid-template-columns: auto minmax(0, 1fr); padding: var(--s-4); } .pg-home .hm-empty .btn { grid-column: 1 / -1; } }

/* The content row that did not open (home.js missedHall): one line under its
   head, with the retry at its end. The same faceted stone as the empty sessions
   row, cut down to a line — no Gatekeeper, no heading of its own: this is a part
   of a working page that will be back in a moment, not a state of the page. */
.pg-home .hm-miss {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3) var(--s-5);
  --bd: var(--line-strong); --facet: 10px;
  padding: var(--s-3) var(--s-5); padding-inline-start: var(--s-6);
  background: var(--facet-edges), var(--bg-elev); border: 1px solid var(--bd); clip-path: var(--clip-facet);
}
.pg-home .hm-miss__line { margin: 0; min-width: 0; flex: 1 1 auto; color: var(--fg-muted); }
.pg-home .hm-miss__retry { flex: none; }
@media (max-width: 600px) { .pg-home .hm-miss { padding: var(--s-3) var(--s-4); } }

/* hall — same card anatomy as the Hall of Spirits itself */
.pg-home .hall { display: grid; grid-template-columns: 1.45fr 1fr 1fr; grid-template-rows: auto auto; gap: var(--s-5); }
.pg-home .hall__feat { grid-row: 1 / 3; }
.pg-home .card { display: grid; gap: var(--s-3); align-content: start; min-width: 0; color: var(--fg); }
.pg-home .card:hover { text-decoration: none; }
.pg-home .card__body { display: grid; gap: var(--s-2); justify-items: start; min-width: 0; }
.pg-home .card :is(h2,h3) { margin: 0; font-size: var(--fs-lg); color: var(--fg-strong); transition: color var(--t-ui) var(--ease-stone); overflow-wrap: anywhere; }
.pg-home .hall__feat :is(h2,h3) { font-size: var(--fs-2xl); }
.pg-home .card:hover :is(h2,h3) { color: var(--accent-text); }
.pg-home .card__excerpt { margin: 0; color: var(--fg-muted); font-size: var(--fs-sm); overflow-wrap: anywhere; }
.pg-home .card__meta { margin: 0; color: var(--fg-muted); font-size: var(--fs-xs); display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; min-width: 0; }
.pg-home .card__author { color: var(--fg); font-weight: 600; overflow-wrap: anywhere; min-width: 0; }
/* the separator is the global lozenge (components.css); the row's own gap spaces it */
.pg-home .card__meta .sep { margin-inline: 0; }
.pg-home .card__likes { display: inline-flex; align-items: center; gap: 3px; }
.pg-home .cover { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--bg-elev); clip-path: var(--clip-facet); }
.pg-home .cover > :is(.hx-cover, .feat__art) { width: 100%; height: 100%; transition: transform var(--t-slow) var(--ease-stone); }
.pg-home .card:hover .cover > :is(.hx-cover, .feat__art) { transform: scale(1.04); }
.pg-home .cover::after { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 0 1px rgba(47,211,154,0); transition: box-shadow var(--t-ui) var(--ease-stone); }
.pg-home .card:hover .cover::after, .pg-home .card:focus-visible .cover::after { box-shadow: var(--glow-inset); }
/* The feature: a doorway. The roof is cut at the mark's own pitch, 32°, at
   every width — a rise of 31.25% of the width (tan 32° × ½), measured in the
   media box's container units. A percentage of the height (the old --clip-arch)
   made the pitch whatever the frame's aspect happened to be: 29° here, 14° on
   a phone. The picture inside the 2px frame is cut 1.25px lower at its edges,
   so the band is even along the slope. */
.pg-home .feat__media { container-type: inline-size; min-width: 0; }
.pg-home .hall__feat .arch-frame { --roof: 31.25cqw; clip-path: polygon(50% 0, 100% var(--roof), 100% 100%, 0 100%, 0 var(--roof)); }
.pg-home .hall__feat .arch-frame > .cover--arch { --roof: calc(31.25cqw - 1.25px); clip-path: polygon(50% 0, 100% var(--roof), 100% 100%, 0 100%, 0 var(--roof)); }
.pg-home .cover--arch { aspect-ratio: 4 / 5; }
/* one drawing per frame (home.js): the 4:5 doorway, or the square on a phone */
.pg-home .feat__art { position: absolute; inset: 0; display: block; }
.pg-home .feat__art--square { display: none; }
.pg-home .cover__play { position: absolute; inset: 0; display: grid; place-items: center; }
/* the hex is the button's stone; the glyph inside it is a 24px icon at its own stroke */
.pg-home .cover__hex { display: grid; place-items: center; width: 56px; height: 56px; clip-path: var(--clip-hex); background: rgba(10,10,11,.7); color: var(--emerald); transition: transform var(--t-ui) var(--ease-stone); }
.pg-home .card--video:hover .cover__hex { transform: scale(1.1); }
.pg-home .cover__dur { position: absolute; bottom: 8px; inset-inline-start: 8px; direction: ltr; }
/* Narrower, the feature takes the whole row and stands its doorway beside its
   words, still 4:5 — a wide doorway is no doorway (and a 4:5 drawing sliced to
   16:9 was a grey wall). On a phone it stacks, as a square. */
@media (max-width: 1000px) {
  .pg-home .hall { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
  .pg-home .hall__feat { grid-row: auto; grid-column: 1 / -1; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); align-items: center; column-gap: var(--s-6); }
}
@media (max-width: 600px) {
  .pg-home .hall { grid-template-columns: minmax(0, 1fr); }
  .pg-home .hall__feat { grid-template-columns: minmax(0, 1fr); }
  .pg-home .cover--arch { aspect-ratio: 1; }
  .pg-home .feat__art--tall { display: none; }
  .pg-home .feat__art--square { display: block; }
}

/* ── the inscription: a raised stone, the way a real runestone records deeds ── */
.pg-home .insc { --bd: var(--line); position: relative; padding: var(--s-8) clamp(var(--s-5), 5vw, var(--s-9)); background: var(--facet-edges), var(--stone-grad); border: 1px solid var(--bd); clip-path: var(--clip-facet); overflow: hidden; }
.pg-home .insc::before, .pg-home .insc::after {
  content: "ᚠᚢᚦᚨᚱᚲᚷᚹᚺᚾᛁᛃᛈᛉᛊᛏᛒᛖᛗᛚᛜᛞᛟᚠᚢᚦᚨᚱᚲᚷᚹᚺᚾᛁᛃᛈᛉᛊᛏᛒᛖᛗᛚᛜᛞᛟ";
  position: absolute; inset-inline: 0; font-family: var(--font-rune); font-size: var(--rune-sm); letter-spacing: .55em;
  color: var(--ornament); opacity: .5; white-space: nowrap; overflow: hidden; text-align: center; direction: ltr; pointer-events: none;
}
.pg-home .insc::before { top: var(--s-3); }
.pg-home .insc::after { bottom: var(--s-3); }
.pg-home .insc__text {
  margin: 0 auto; max-width: 46ch; text-align: center; text-wrap: balance;
  font-family: var(--font-display); font-weight: 700; font-size: clamp(1.05rem, 2.1vw, 1.5rem); line-height: 2;
  color: var(--fg); text-shadow: 0 1px 0 rgba(255,255,255,.04), 0 -1px 0 rgba(0,0,0,.6);
}
.pg-home .insc__n { color: var(--emerald); font-weight: 900; font-variant-numeric: tabular-nums; text-shadow: 0 0 16px rgba(47,211,154,.4); }
:root[data-theme="light"] .pg-home .insc__n { color: var(--jade); text-shadow: none; }
:root[data-theme="light"] .pg-home .insc__text { text-shadow: none; }
.pg-home .insc__cta { display: flex; justify-content: center; margin-top: var(--s-5); }
/* the founding stone is an invitation, not a monument: one carved line and the way to the first table */
.pg-home .insc--founding { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--s-4) var(--s-7); padding: var(--s-7) clamp(var(--s-5), 5vw, var(--s-8)); }
.pg-home .insc--founding .insc__text { margin: 0; max-width: 44ch; text-align: start; font-size: clamp(1.05rem, 1.7vw, 1.3rem); line-height: 1.9; }
.pg-home .insc--founding .insc__cta { margin: 0; }
/* a founding stone with nothing to press (a DM, whose «ساخت جلسه» is the row above) is one carved line, centred */
.pg-home .insc--founding.insc--still { grid-template-columns: minmax(0, 1fr); justify-items: center; }
.pg-home .insc--still .insc__text { text-align: center; }
@media (max-width: 700px) { .pg-home .insc--founding { grid-template-columns: minmax(0, 1fr); justify-items: center; } .pg-home .insc--founding .insc__text { text-align: center; } }
.pg-home .insc__chest { display: grid; justify-items: center; gap: var(--s-2); margin-top: var(--s-6); }
.pg-home .insc__chest small { color: var(--fg-faint); font-size: var(--fs-xs); }

/* ── what is this place: the realms, as one index row ── */
.pg-home .realms { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--s-3); }
.pg-home .realm-card {
  position: relative; isolation: isolate; overflow: hidden; display: grid; align-content: start; gap: var(--s-2);
  --bd: var(--line); --facet: 12px;
  min-height: 160px; padding: var(--s-4); background: var(--facet-edges), linear-gradient(165deg, rgba(47,211,154,.07), transparent 62%), var(--bg-elev);
  border: 1px solid var(--bd); clip-path: var(--clip-facet); transition: border-color var(--t-ui) var(--ease-stone);
}
/* The realm's sign, carved large into the tile: its picture. It is a UI glyph
   blown up, so its stroke is thinned to 1 unit (4.7px at 112, 3.2px at 76) to
   stay a carving, not a slab, and it sits whole inside the tile, 12px in from
   the edges — clear of the chamfer — rather than cropped by them. */
.pg-home .realm-card__art { position: absolute; inset-inline-end: 12px; bottom: 12px; width: 112px; height: 112px; z-index: -1; color: var(--accent-text); opacity: .13; transition: opacity var(--t-ui) var(--ease-stone), transform var(--t-slow) var(--ease-stone); }
.pg-home .realm-card__art svg { display: block; width: 100%; height: 100%; max-width: none; stroke-width: 1; }
.pg-home .realm-card:hover, .pg-home .realm-card:focus-within { --bd: var(--line-glow); }
.pg-home .realm-card:hover .realm-card__art { opacity: .24; transform: translateY(-3px); }
.pg-home .realm-card__name { margin: 0; font-size: var(--fs-md); font-weight: 800; line-height: 1.5; }
.pg-home .realm-card__link { color: var(--fg-strong); text-decoration: none; }
.pg-home .realm-card__link:hover { color: var(--accent-text); text-decoration: none; }
/* the whole tile is the link */
.pg-home .realm-card__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.pg-home .realm-card__link:focus-visible { outline: none; box-shadow: none; }
.pg-home .realm-card:has(.realm-card__link:focus-visible) { border-color: var(--accent); box-shadow: inset 0 0 0 2px var(--accent); }
.pg-home .realm-card__plain { margin: 0; color: var(--fg-muted); font-size: var(--fs-sm); line-height: 1.75; }
.pg-home .realm-card__soon { justify-self: start; margin-top: auto; padding: 0 6px; font-size: var(--fs-2xs); color: var(--fg-muted); border: 1px solid var(--line-strong); border-radius: var(--r-1); }
/* a part still behind the gate: named and tagged, not a link (as in the header),
   its stone left uncut — no lit wash, no hover */
.pg-home .realm-card.is-soon { background: var(--facet-edges), var(--bg-elev); }
.pg-home .realm-card.is-soon:hover { --bd: var(--line); }
.pg-home .realm-card.is-soon:hover .realm-card__art { opacity: .13; transform: none; }
.pg-home .realm-card__label { color: var(--fg); }
.pg-home .realm-card.is-soon .realm-card__art { opacity: .08; }
/* The Gatekeeper's first word, in line above the map it introduces: a strip of
   the page, not a bubble over it. It goes when put away (home.js folds it). */
.pg-home .hm-welcome {
  --bd: var(--line-glow); --facet: 12px;
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--s-3) var(--s-5);
  margin-block-end: var(--s-7); padding: var(--s-3) var(--s-5);
  background: var(--facet-edges), linear-gradient(to left, rgba(47,211,154,.09), transparent 62%), var(--bg-elev);
  border: 1px solid var(--bd); clip-path: var(--clip-facet);
}
[dir="ltr"] .pg-home .hm-welcome { background: var(--facet-edges), linear-gradient(to right, rgba(47,211,154,.09), transparent 62%), var(--bg-elev); }
.pg-home .hm-welcome__keeper svg { display: block; width: 48px; height: auto; filter: drop-shadow(0 0 1px rgba(47,211,154,.55)); }
:root[data-theme="light"] .pg-home .hm-welcome__keeper svg { filter: none; }
.pg-home .hm-welcome__text { display: grid; gap: 2px; min-width: 0; }
.pg-home .hm-welcome__who { margin: 0; font-size: var(--fs-xs); font-weight: 700; color: var(--accent-text); }
.pg-home .hm-welcome__line { margin: 0; max-width: 72ch; font-size: var(--fs-sm); line-height: 1.85; color: var(--fg); }
@media (max-width: 600px) {
  .pg-home .hm-welcome { grid-template-columns: auto minmax(0, 1fr); padding: var(--s-3) var(--s-4); column-gap: var(--s-3); }
  .pg-home .hm-welcome__keeper { align-self: start; padding-top: 2px; }
  .pg-home .hm-welcome__ok { grid-column: 2; justify-self: start; }
}
.pg-home .realms-why { margin-top: var(--s-4); }
.pg-home .realms-why > summary { display: inline-flex; align-items: center; gap: var(--s-2); min-height: 44px; cursor: pointer; color: var(--accent-text); font-weight: 600; font-size: var(--fs-sm); list-style: none; }
.pg-home .realms-why > summary::-webkit-details-marker { display: none; }
.pg-home .realms-why__rune { color: var(--ornament); transition: transform var(--t-ui) var(--ease-press); }
.pg-home .realms-why[open] .realms-why__rune { transform: rotate(90deg); }
.pg-home .realms-why dl { margin: var(--s-3) 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); gap: var(--s-4) var(--s-6); }
.pg-home .realms-why dt { font-weight: 800; color: var(--fg-strong); margin-bottom: var(--s-1); }
.pg-home .realms-why__for { margin-inline-start: var(--s-2); font-weight: 400; font-size: var(--fs-xs); color: var(--fg-muted); }
.pg-home .realms-why dd { margin: 0; color: var(--fg-muted); font-size: var(--fs-sm); line-height: 1.9; }
@media (max-width: 1099px) { .pg-home .realms { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 600px) {
  .pg-home .realms { grid-template-columns: minmax(0, 1fr); gap: var(--s-2); }
  .pg-home .realm-card { min-height: 0; padding: var(--s-3) var(--s-4); padding-inline-end: 100px; }
  .pg-home .realm-card__art { width: 76px; height: 76px; bottom: auto; top: 50%; margin-top: -38px; inset-inline-end: 12px; }
}

/* ── the first screen at its real sizes: laptops are short, phones are narrow ── */
@media (min-width: 1100px) { .pg-home { --hero-rest: 440px; } }
@media (max-height: 760px) and (min-width: 601px) { .pg-home { --hero-rest: 430px; } .pg-home .hero__kicker { margin-bottom: 0; } .pg-home .hero__sub { margin-bottom: var(--s-3); } }
/* too short for the chip: the next table is the first thing below the gate instead */
@media (max-height: 719px) and (min-width: 601px) { .pg-home { --hero-rest: 380px; } .pg-home .hero__next { display: none; } }
@media (max-width: 900px) {
  /* the bottom nav owns the floor: the foot stands on it, not under it */
  .pg-home .hero__sticky { padding-bottom: calc(84px + var(--s-3)); }
  .pg-home { --hero-rest: 560px; }
}
@media (max-width: 600px) {
  /* a shorter stage: the push is a gesture on a phone, not a journey */
  .pg-home .hero { height: 160vh; height: 160svh; }
  .pg-home { --hero-rest: 520px; --mark-w: clamp(150px, calc((100svh - var(--hero-rest)) / 1.093), 72vw); }
  .pg-home .hero__sticky { gap: var(--s-2); }
  .pg-home .hero__kicker { font-size: var(--fs-sm); line-height: 1.75; margin-bottom: 0; }
  /* the page's one H1 stays a clear step above the section heads (32px here) */
  .pg-home .hero__title { font-size: clamp(2.5rem, 11vw, 3rem); margin-bottom: var(--s-1); }
  [lang="en"] .pg-home .hero__title { font-size: clamp(2.3rem, 9.8vw, 2.7rem); }
  .pg-home .hero__sub { font-size: var(--fs-sm); margin-bottom: var(--s-3); }
  .pg-home .hero__cta { gap: var(--s-2); }
  .pg-home .hero__cta .btn--lg { min-height: 46px; padding: 0 var(--s-4); font-size: var(--fs-sm); --facet: 10px; }
  .pg-home .hero__next { font-size: var(--fs-xs); padding: 6px var(--s-3); }
  .pg-home .hero__next-m { display: none; }
  .pg-home .hero__hint { font-size: var(--fs-2xs); }
  .pg-home .insc { padding: var(--s-7) var(--s-4); }
  .pg-home .insc__text { font-size: var(--fs-md); line-height: 1.95; }
}
/* a short phone keeps the proposition and the buttons, and lets the mood line go */
@media (max-width: 600px) and (max-height: 700px) { .pg-home { --hero-rest: 440px; } .pg-home .hero__sub { display: none; } }

/* ── Reduced motion / motion switch off: everything at rest, at once ──
   (the ignition is only ever set up when motion is on; this covers a switch made
   while it is running) */
@media (prefers-reduced-motion: reduce) {
  .pg-home .hero *, .pg-home .hero__gate-in, .pg-home .live__seats::before { animation: none !important; transition: none !important; }
  .pg-home .hero__title { -webkit-mask-image: none !important; mask-image: none !important; }
  .pg-home .hero__mark :is(.crack, .mark-frame, .mark-frame2) { stroke-dasharray: none !important; }
  .pg-home .cover > :is(.hx-cover, .feat__art), .pg-home .realm-card__art { transition: none; }
}
:root[data-motion="off"] .pg-home .hero *, :root[data-motion="off"] .pg-home .hero__gate-in { animation: none !important; transition: none !important; }
:root[data-motion="off"] .pg-home .hero__title { -webkit-mask-image: none !important; mask-image: none !important; }
:root[data-motion="off"] .pg-home .hero__mark :is(.crack, .mark-frame, .mark-frame2) { stroke-dasharray: none !important; }