/* The public site in the Dawn look.
   Direction: first light over a still horizon, and the same sky at night. A calm page where the
   people are the colour; one loud element per screen; orbits that turn very slowly.
   Tokens first (day, then night, then Persian). Logical properties only. Motion only when welcome. */

@font-face { font-family: "Outfit"; src: url("/assets/fonts/outfit-latin-v1.woff2") format("woff2"); font-weight: 500 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Albert Sans"; src: url("/assets/fonts/albert-sans-latin-v1.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Vazirmatn"; src: url("/assets/fonts/vazirmatn-arabic-v1.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }
/* Only the letters of the language names in the switcher, so an English page does not fetch a whole Persian font for one word. */
@font-face { font-family: "Site Endonyms"; src: url("/assets/fonts/endonyms-v1.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }

:root {
  color-scheme: light dark;

  /* ---- day ---- */
  --paper: #F6F2EE;
  --raised: #FFFFFF;
  --sunk: #ECE8EE;
  --ink: #1B1538;
  --ink-2: #45405F;
  --ink-3: #5A5573;
  --ink-4: rgba(27, 21, 56, .3);
  --ink-faint: #837D94;
  --line: rgba(27, 21, 56, .1);
  --line-2: rgba(27, 21, 56, .2);
  --on-ink: #FFF8EA;
  --accent: #B93A16;
  --ok: #1F7A52;

  --sky-1: #CFE2F5; --sky-2: #E3ECF5; --sky-3: #F4F0EC; --sky-4: #FBEDE1; --sky-5: #FFE2C9;
  --sky: linear-gradient(180deg, var(--sky-1) 0%, var(--sky-2) 26%, var(--sky-3) 55%, var(--sky-4) 82%, var(--sky-5) 100%);
  /* the home hero: a clear morning, blue overhead and warm at the horizon, with the sun in the orbit */
  --sky-hero: linear-gradient(180deg, #8DC2F0 0%, #B6D8F5 24%, #E4E8F0 50%, #FFE3CB 76%, #FFC898 100%);
  /* the sun at the centre of every orbit: the logo's sun and the app's (front/apps/web, --sun-1..4).
     The four stops are the same by day and by night; only the halo may change at night.
     scripts/check.py fails if these values change or a theme block redefines a stop. */
  --sun-1: #fff4c6; --sun-2: #ffc23d; --sun-3: #ff8a34; --sun-4: #ee4b2b;
  --sun-ball: radial-gradient(ellipse 78% 78% at 38% 32%, var(--sun-1) 0%, var(--sun-2) 36%, var(--sun-3) 72%, var(--sun-4) 100%);
  --sun-halo: #ffb36b; --sun-halo-o: .62;
  --sun-halo-night: #ff9a4d; --sun-halo-night-o: .5;
  --orbit-glow: rgba(255, 179, 107, .34);
  --ring-sky: rgba(255, 255, 255, .78);
  --ring-sky-2: rgba(255, 255, 255, .5);
  --world-glow: 0;
  --stars-o: 0;
  --horizon: rgba(27, 21, 56, .22);
  --sun: radial-gradient(circle at 50% 100%, var(--sun-1) 0%, var(--sun-2) 30%, var(--sun-3) 62%, var(--sun-4) 100%);
  --sun-glow: radial-gradient(closest-side, rgba(255, 158, 66, .55), rgba(255, 186, 112, .22) 55%, rgba(255, 200, 140, 0));
  --sun-text: linear-gradient(120deg, #F2652E, #FF9A3A 55%, #E8A019);
  --glow: rgba(255, 170, 90, .42);

  --card: #FFFDFB;
  --card-bd: rgba(255, 255, 255, .9);
  --sh: 0 18px 44px -26px rgba(52, 40, 110, .45), 0 1px 2px rgba(52, 40, 110, .06);
  --sh-lift: 0 34px 70px -34px rgba(52, 40, 110, .55), 0 2px 4px rgba(52, 40, 110, .06);
  --bezel: #17132F;
  --bezel-rim: rgba(255, 255, 255, .06);
  --ring: rgba(27, 21, 56, .2);
  --ring-faint: rgba(27, 21, 56, .1);
  --label-halo: rgba(246, 242, 238, .9);
  --band: linear-gradient(130deg, #FFEBD6 0%, #FFD7B0 55%, #FFC392 100%);
  --wash: radial-gradient(60% 70% at 30% 40%, rgba(255, 190, 110, .35), rgba(255, 190, 110, 0));

  --night-1: #0A0E2D; --night-2: #151A48; --night-3: #3A1F45;
  --night-ink: #FFF3E0; --night-ink-2: #D9D2E4; --night-ink-3: #ABA5C6;
  --night-line: rgba(255, 243, 224, .14);

  /* the six worlds (the same by day and night), the self and a remembered pearl */
  --h-clay: #E8503F; --h-ochre: #F28A1E; --h-sand: #EFC22F; --h-sage: #2FA36B; --h-dusk: #1E9FC0; --h-plum: #7B61C9;
  --h-self: #3A3078; --h-pearl: #C9C3D6;

  /* type */
  --f-display: "Outfit", "Albert Sans", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --f-text: "Albert Sans", "Avenir Next", "Segoe UI", system-ui, -apple-system, sans-serif;
  --w-display: 600;
  --fs-hero: clamp(2.6rem, 1.25rem + 5.2vw, 6.1rem);
  --fs-d2: clamp(2.5rem, 1.3rem + 4.6vw, 5.6rem);
  --fs-h2: clamp(2.05rem, 1.35rem + 2.5vw, 3.6rem);
  --fs-h3: clamp(1.45rem, 1.2rem + .8vw, 1.9rem);
  --fs-h4: 1.375rem;
  --fs-lead: clamp(1.1875rem, 1.08rem + .4vw, 1.4rem);
  --fs-body: 1.125rem;
  --lh-display: .98;
  --lh-h: 1.06;
  --lh-body: 1.62;
  --track: -.032em;

  --wrap: 1240px;
  --gutter: clamp(20px, 4.4vw, 56px);
  --sec: clamp(60px, 7.5vw, 112px);
  --r-2: 16px;
  --r-3: 28px;
  --dirx: 1;
  --ease: cubic-bezier(.2, .85, .25, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #121640;
    --raised: #1E2353;
    --sunk: #191D4A;
    --ink: #FFF3E0;
    --ink-2: #D9D2E4;
    --ink-3: #ABA5C6;
    --ink-4: rgba(255, 243, 224, .34);
    --ink-faint: #8E88A6;
    --line: rgba(255, 243, 224, .11);
    --line-2: rgba(255, 243, 224, .22);
    --on-ink: #1B1538;
    --accent: #FF9A4D;
    --ok: #6FD3A2;

    --sky: linear-gradient(180deg, #070A24 0%, #0C1036 38%, #171A49 70%, #34204A 100%);
    --sky-hero: linear-gradient(180deg, #03051A 0%, #080B2E 36%, #141444 66%, #2E1A48 88%, #4A2240 100%);
    --sun-halo: var(--sun-halo-night); --sun-halo-o: var(--sun-halo-night-o);
    --orbit-glow: rgba(255, 154, 77, .24);
    --ring-sky: rgba(255, 228, 196, .3);
    --ring-sky-2: rgba(255, 228, 196, .16);
    --world-glow: 1;
    --stars-o: .85;
    --horizon: rgba(255, 210, 160, .3);
    --sun: radial-gradient(circle at 50% 100%, #FFFBEA 0%, #FFE9B8 45%, #F8C98A 100%);
    --sun-glow: radial-gradient(closest-side, rgba(255, 150, 80, .38), rgba(255, 120, 70, .14) 55%, rgba(255, 120, 70, 0));
    --sun-text: linear-gradient(120deg, #FF9A4D, #FFC86A 60%, #FFE08A);
    --glow: rgba(255, 150, 80, .26);

    --card: #1C2152;
    --card-bd: rgba(255, 243, 224, .08);
    --sh: 0 22px 50px -26px rgba(0, 0, 0, .7), 0 1px 2px rgba(0, 0, 0, .3);
    --sh-lift: 0 38px 80px -34px rgba(0, 0, 0, .85), 0 2px 4px rgba(0, 0, 0, .3);
    --bezel: #05061A;
    --bezel-rim: rgba(255, 243, 224, .14);
    --ring: rgba(255, 243, 224, .22);
    --ring-faint: rgba(255, 243, 224, .1);
    --label-halo: rgba(12, 16, 54, .85);
    --band: linear-gradient(130deg, #2B1C4D 0%, #4A2145 55%, #6E2F35 100%);
    --wash: radial-gradient(60% 70% at 30% 40%, rgba(255, 140, 70, .2), rgba(255, 140, 70, 0));

    --night-1: #010210; --night-2: #060826; --night-3: #22102E;
    --h-self: #6E63C9; --h-pearl: #D9D4E6;
  }
}

:root:lang(fa) {
  --f-display: "Vazirmatn", "Tahoma", system-ui, sans-serif;
  --f-text: "Vazirmatn", "Tahoma", system-ui, sans-serif;
  --w-display: 700;
  --fs-hero: clamp(2.3rem, 1.2rem + 4.2vw, 5rem);
  --fs-d2: clamp(2.2rem, 1.2rem + 3.8vw, 4.6rem);
  --fs-h2: clamp(1.85rem, 1.3rem + 2vw, 3rem);
  --fs-body: 1.0625rem;
  --lh-display: 1.32;
  --lh-h: 1.4;
  --lh-body: 1.95;
  --track: 0;
  --dirx: -1;
}

/* ---- base ---- */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-block-start: 24px; }
body {
  margin: 0; min-block-size: 100vh; background: var(--paper); color: var(--ink);
  font-family: var(--f-text); font-size: var(--fs-body); line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip;
}
h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; }
img, svg { display: block; max-inline-size: 100%; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; border-radius: 6px; }
::selection { background: rgba(255, 170, 80, .4); }
.vh { position: absolute; inline-size: 1px; block-size: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.wrap { inline-size: 100%; max-inline-size: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }

.skip { position: absolute; inset-inline-start: 12px; inset-block-start: -80px; z-index: 50; padding: 12px 18px; border-radius: 12px; background: var(--ink); color: var(--on-ink); font-weight: 600; text-decoration: none; }
.skip:focus { inset-block-start: 12px; }

.display { font-family: var(--f-display); font-weight: var(--w-display); font-size: var(--fs-hero); line-height: var(--lh-display); letter-spacing: var(--track); text-wrap: balance; }
.display--2 { font-size: var(--fs-d2); }
.display--page { font-size: clamp(2.5rem, 1.5rem + 3.6vw, 4.5rem); }
.display--art { font-size: clamp(2.2rem, 1.3rem + 3.4vw, 4.2rem); line-height: 1.04; }
:lang(fa) .display--art { line-height: 1.38; }
.h2 { font-family: var(--f-display); font-weight: var(--w-display); font-size: var(--fs-h2); line-height: var(--lh-h); letter-spacing: var(--track); text-wrap: balance; }
.h3 { font-family: var(--f-display); font-weight: var(--w-display); font-size: var(--fs-h3); line-height: 1.15; letter-spacing: -.02em; text-wrap: balance; }
.h4 { font-family: var(--f-display); font-weight: var(--w-display); font-size: var(--fs-h4); line-height: 1.2; letter-spacing: -.012em; text-wrap: balance; }
:lang(fa) .h3, :lang(fa) .h4 { line-height: 1.55; letter-spacing: 0; }
.lead { font-size: var(--fs-lead); line-height: 1.5; color: var(--ink-2); max-inline-size: 36em; text-wrap: pretty; }
:lang(fa) .lead { line-height: 1.9; }
.small { font-size: .9375rem; color: var(--ink-3); }
.note { margin-block-start: 22px; font-size: .875rem; color: var(--ink-3); }

.kicker { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; font-size: .9375rem; color: var(--ink-2); letter-spacing: .01em; }
.kicker__sun { inline-size: 11px; block-size: 11px; border-radius: 50%; background: var(--sun); box-shadow: 0 0 0 4px rgba(255, 160, 70, .18); flex: none; }
.kicker--plain { color: var(--ink-3); margin-block-end: 14px; display: block; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55em; min-block-size: 56px; padding-inline: 26px;
  border-radius: var(--r-2); background: var(--ink); color: var(--on-ink); font-weight: 600; font-size: 1.0625rem; line-height: 1.2;
  text-decoration: none; box-shadow: 0 14px 30px -18px rgba(27, 21, 56, .8); transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 20px 36px -18px rgba(27, 21, 56, .8); }
.btn--ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line-2); }
.btn--ghost:hover { box-shadow: inset 0 0 0 1.5px var(--ink); }
.arr { inline-size: 1.15em; block-size: 1.15em; flex: none; }
[dir="rtl"] .arr { transform: scaleX(-1); }
.link { font-weight: 600; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; text-decoration-color: var(--line-2); display: inline-flex; align-items: center; gap: .4em; min-block-size: 44px; }
.link:hover { text-decoration-color: currentColor; }
.link--strong { text-decoration: none; font-size: 1.0625rem; }
.link--strong:hover { text-decoration: underline; text-underline-offset: 5px; }

.status { display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px 8px 12px; border-radius: 999px; background: color-mix(in oklab, var(--raised) 70%, transparent); box-shadow: inset 0 0 0 1px var(--line); font-size: .875rem; font-weight: 600; color: var(--ink-2); margin-block-end: clamp(22px, 3vw, 34px); }
.status__dot { inline-size: 8px; block-size: 8px; border-radius: 50%; background: var(--accent); flex: none; }

/* ---- the lockup (logo B): the symbol, then the lower-case name in Outfit 500 ----
   Measured from the final set in ../brand/: the symbol is 2.25 x-heights tall (Outfit's x-height is .48em,
   so 1.08em), the gap is .62 x-height (.3em), and the symbol is centred on the x-height, which is what
   vertical-align: middle does. In Persian the name is Vazirmatn 550 at 1.06 times the size, so the alef
   stands as tall as the l; the symbol keeps its size and sits at the line's start. */

.brand { display: inline-flex; align-items: center; min-block-size: 48px; color: var(--ink); text-decoration: none; border-radius: 12px; }
.wm { --wm-mark: 1.08em; --wm-gap: .3em; display: inline-block; white-space: nowrap; font-family: "Outfit", var(--f-display); font-weight: 500; font-size: 2rem; line-height: 1; letter-spacing: -.012em; }
.wm__mark { display: inline-block; vertical-align: middle; margin-inline-end: var(--wm-gap); }
.wm__mark img { display: block; block-size: var(--wm-mark); inline-size: auto; }
.wm__name { vertical-align: baseline; }
.wm--big { font-size: clamp(2.6rem, 1.8rem + 3vw, 4.25rem); }
:lang(fa) .wm { font-family: "Vazirmatn", var(--f-display); font-weight: 550; letter-spacing: 0; }
:lang(fa) .wm__name { font-size: 1.06em; }

/* ---- the top bar lies over the sky on every page ---- */

.top { position: absolute; inset-inline: 0; inset-block-start: 0; z-index: 10; }
.top__in { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-block-size: 84px; }
.top__nav { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; justify-content: end; }
.top__link, .lang { display: inline-flex; align-items: center; min-block-size: 44px; padding-inline: 14px; border-radius: 12px; color: var(--ink-2); font-weight: 600; font-size: .9875rem; text-decoration: none; }
.top__link:hover, .lang:hover { color: var(--ink); background: var(--line); }
.top__link[aria-current="page"] { color: var(--ink); }
.lang { font-family: "Site Endonyms", var(--f-text); }
:lang(fa) .lang:lang(en) { font-family: "Albert Sans", var(--f-text); }
@media (max-width: 760px) { .top__link--wide { display: none; } .wm { font-size: 1.75rem; } }

/* ---- worlds: lit spheres in the six colours ---- */

.world {
  --h: var(--h-plum); display: inline-block; flex: none; border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, color-mix(in oklab, var(--h) 30%, #fff) 0%, var(--h) 46%, color-mix(in oklab, var(--h) 58%, #000) 100%);
  box-shadow: 0 10px 24px -10px var(--h), 0 0 0 6px color-mix(in oklab, var(--h) 12%, transparent);
}
.world--s { inline-size: 14px; block-size: 14px; box-shadow: 0 0 0 4px color-mix(in oklab, var(--h) 16%, transparent); }
.world--m { inline-size: 38px; block-size: 38px; }
.world--l { inline-size: 54px; block-size: 54px; }
.hue-clay { --h: var(--h-clay); } .hue-ochre { --h: var(--h-ochre); } .hue-sand { --h: var(--h-sand); }
.hue-sage { --h: var(--h-sage); } .hue-dusk { --h: var(--h-dusk); } .hue-plum { --h: var(--h-plum); }
.hue-pearl { --h: var(--h-pearl); }
.world--far { outline: 1.5px dotted color-mix(in oklab, var(--h) 70%, transparent); outline-offset: 6px; }
.world--kept { outline: 1.5px dotted var(--ink-4); outline-offset: 7px; box-shadow: 0 0 0 0 transparent; }
.world--dim { opacity: .62; }
.world--new { background: transparent; box-shadow: none; outline: 1.5px dashed var(--ink-4); outline-offset: -1.5px; }

/* ---- the sun: the centre of every orbit, drawn as the logo draws it (lit from the upper left),
   with the app's halo at 300/178 of its size ---- */

.sun { position: relative; display: block; inline-size: var(--sun-d); block-size: var(--sun-d); border-radius: 50%; background: var(--sun-ball); }
.sun::before { content: ""; position: absolute; inset: calc(var(--sun-d) * -.343); z-index: -1; border-radius: 50%; opacity: var(--sun-halo-o);
  background: radial-gradient(closest-side, var(--sun-halo) 0%, color-mix(in srgb, var(--sun-halo) 42%, transparent) 45%, transparent 100%); }

/* ---- the drawn orbit ---- */

.orbit { --sun-d: 60px; position: relative; inline-size: min(100%, 620px); aspect-ratio: 1; margin-inline: auto; direction: ltr; }
.orbit__glow { position: absolute; inset: 14%; border-radius: 50%; background: radial-gradient(closest-side, var(--glow), transparent); }
.orbit__ring { position: absolute; border-radius: 50%; border: 1.5px dotted var(--ring); }
.orbit__ring--1 { inset: 31%; }
.orbit__ring--2 { inset: 17%; border-style: solid; border-width: 1px; }
.orbit__ring--3 { inset: 3%; border: 1px solid var(--ring-faint); }
.lane { position: absolute; inset: 0; --d: 160s; }
.lane--2 { --d: 240s; }
.lane--3 { --d: 340s; }
.body { --by: 19px; position: absolute; display: grid; justify-items: center; gap: 4px; transform: translate(-50%, calc(-1 * var(--by))); transform-origin: 50% var(--by); text-align: center; }
.body__name { font-family: var(--f-display); font-weight: 600; font-size: .9375rem; line-height: 1.2; color: var(--ink); white-space: nowrap; text-shadow: 0 0 4px var(--label-halo), 0 0 10px var(--label-halo); }
.body__name small { display: block; font-family: var(--f-text); font-weight: 500; font-size: .75rem; color: var(--ink-3); }
.body--you { inset-inline-start: 50%; inset-block-start: 50%; transform: translate(-50%, calc(var(--sun-d) / -2)); }
.body--you .body__name { font-size: 1rem; }
/* each person stands on its ring: centre = 50% + radius x (cos, sin) of its angle. Ruth (the card's
   person) stands at the left of the inner ring and Sam high on the middle one, so the lower half
   stays clear for the card and no one stands beside the text.
   The orbit is drawn left to right (direction: ltr); in a right-to-left page the people stand
   mirrored, so the side that faces the text holds the same people in both languages. */
.lane .body { inset-inline-start: var(--bx); inset-block-start: var(--bxy); }
[dir="rtl"] .lane .body { inset-inline-start: calc(100% - var(--bx)); }
.b1 { --bx: 65.6%; --bxy: 39.1%; }
.b2 { --bx: 32.1%; --bxy: 43.5%; }
.b3 { --bx: 28.8%; --bxy: 24.7%; }
.b4 { --bx: 81.9%; --bxy: 41.5%; }
.b5 { --bx: 33.9%; --bxy: 5.8%; }
.b6 { --bx: 73.5%; --bxy: 9.3%; }
.b6 .world { inline-size: 30px; block-size: 30px; }
.b6 .body__name { font-family: var(--f-text); font-weight: 500; font-size: .8125rem; color: var(--ink-3); }
@media (max-width: 560px) {
  .orbit .world--m { inline-size: 28px; block-size: 28px; }
  .orbit .world--l { inline-size: 44px; block-size: 44px; }
  .body { --by: 14px; }
  .body__name { font-size: .8125rem; }
  .b6 .world { inline-size: 24px; block-size: 24px; }
}

/* ---- the horizon: one line, and the sun on it (the moon by night) ---- */

.horizon { position: absolute; inset-inline: 0; inset-block-end: 0; block-size: 160px; pointer-events: none; }
.horizon__line { position: absolute; inset-inline: 0; inset-block-end: 56px; block-size: 1px; background: linear-gradient(90deg, transparent, var(--horizon) 15%, var(--horizon) 85%, transparent); }
.horizon__sun { position: absolute; inset-block-end: 57px; inset-inline-end: 22%; inline-size: 132px; block-size: 66px; border-radius: 132px 132px 0 0; background: var(--sun); }
.horizon__sun::before { content: ""; position: absolute; inset: -110px -150px -60px; background: var(--sun-glow); z-index: -1; }
@media (max-width: 760px) { .horizon__sun { display: none; } }
@media (prefers-color-scheme: dark) { .horizon__sun { inline-size: 54px; block-size: 54px; border-radius: 50%; inset-block-end: 74px; } }

/* ---- the hero ---- */

.hero { position: relative; isolation: isolate; overflow-x: clip; padding-block: calc(84px + clamp(28px, 6vw, 80px)) clamp(150px, 16vw, 220px); }
.hero__sky { position: absolute; inset: 0; z-index: -1; background: var(--sky); overflow: hidden; }
.stars {
  position: absolute; inset: 0; opacity: var(--stars-o); pointer-events: none;
  background-image:
    radial-gradient(1.2px 1.2px at 12% 18%, #FFF6E5 99%, transparent), radial-gradient(1px 1px at 28% 62%, #FFF6E5 99%, transparent),
    radial-gradient(1.4px 1.4px at 47% 12%, #FFF6E5 99%, transparent), radial-gradient(1px 1px at 63% 44%, #FFF6E5 99%, transparent),
    radial-gradient(1.2px 1.2px at 81% 24%, #FFF6E5 99%, transparent), radial-gradient(1px 1px at 92% 71%, #FFF6E5 99%, transparent),
    radial-gradient(1.6px 1.6px at 6% 84%, #FFE7C2 99%, transparent), radial-gradient(1px 1px at 38% 33%, #FFF6E5 99%, transparent),
    radial-gradient(1.2px 1.2px at 72% 88%, #FFF6E5 99%, transparent), radial-gradient(1px 1px at 55% 78%, #FFF6E5 99%, transparent);
  background-size: 420px 380px;
  -webkit-mask-image: linear-gradient(180deg, #000 0, #000 96px, transparent 150px); mask-image: linear-gradient(180deg, #000 0, #000 96px, transparent 150px);
}
.hero__in { display: grid; gap: clamp(36px, 6vw, 64px); align-items: center; }
@media (min-width: 1000px) { .hero__in { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); } }
.hero__say { position: relative; z-index: 2; }
.hero__lede { font-size: var(--fs-lead); line-height: 1.5; color: var(--ink-2); max-inline-size: 31em; margin-block: clamp(22px, 3vw, 32px) clamp(28px, 3.4vw, 40px); text-wrap: pretty; }
:lang(fa) .hero__lede { line-height: 1.95; }
.hero__lede + .hero__lede { margin-block-start: -18px; }
.acts { display: flex; flex-wrap: wrap; gap: 12px; }
.hero__show { position: relative; display: grid; justify-items: center; }
.hero__show .card { position: relative; z-index: 3; margin-block-start: -17%; inline-size: min(88%, 400px); margin-inline-start: 8%; justify-self: start; }
@media (max-width: 999px) { .hero__show .orbit { inline-size: min(86%, 480px); } }
@media (max-width: 560px) {
  .hero { padding-block-start: calc(72px + 20px); }
  .status { font-size: .8125rem; padding: 6px 12px 6px 10px; gap: 8px; }
  .hero__lede { font-size: 1.125rem; margin-block: 18px 26px; }
  .acts .btn { min-block-size: 52px; padding-inline: 20px; font-size: 1rem; }
  .top__in { min-block-size: 72px; }
}

/* the home hero: a large orbit with the sun in its middle, bleeding off the edge of the page.
   On a phone it stands between the promise and the paragraph, so the first screen shows both. */
.hero--home { overflow: clip; padding-block: calc(72px + 18px) clamp(56px, 7vw, 96px); }
.hero--home .hero__sky { background: var(--sky-hero); }
.hero--home .horizon__line { inset-block-end: 18px; }
@media (min-width: 561px) and (max-width: 999px) { .hero--home { padding-block-start: calc(84px + 28px); } }
.hero--home .hero__in { gap: 0; }
.hero--home .hero__say--top { padding-block-end: 4px; }
.hero--home .display { font-size: clamp(2.6rem, 1.2rem + 4.6vw, 5.5rem); }
:lang(fa) .hero--home .display { font-size: clamp(2.3rem, 1.2rem + 3.4vw, 4.2rem); }
.hero--home .hero__lede { margin-block-start: clamp(18px, 2.4vw, 28px); }
.hero--home .hero__show { --ow: min(106vw, 560px); display: block; position: relative; z-index: 1; }
.hero--home .orbit { inline-size: var(--ow); max-inline-size: none; margin-inline: calc((100% - var(--ow)) / 2); margin-block: 14px 0; }
.hero--home .card { position: relative; z-index: 3; inline-size: min(92%, 400px); margin-block-start: calc(var(--ow) * -.31); margin-inline: 0; }
.hero--home .card__text { font-size: 1.375rem; }

/* the orbit as a sky: the sun in the middle, rings drawn in light, stars only inside it at night */
.orbit__stars { position: absolute; inset: -6%; border-radius: 50%; opacity: var(--stars-o); pointer-events: none;
  background-image:
    radial-gradient(1.4px 1.4px at 12% 22%, #FFF6E5 99%, transparent), radial-gradient(1px 1px at 27% 64%, #FFF6E5 99%, transparent),
    radial-gradient(1.6px 1.6px at 46% 9%, #FFF6E5 99%, transparent), radial-gradient(1px 1px at 61% 41%, #FFE7C2 99%, transparent),
    radial-gradient(1.2px 1.2px at 83% 27%, #FFF6E5 99%, transparent), radial-gradient(1px 1px at 91% 69%, #FFF6E5 99%, transparent),
    radial-gradient(1.8px 1.8px at 8% 81%, #FFE7C2 99%, transparent), radial-gradient(1px 1px at 37% 35%, #FFF6E5 99%, transparent),
    radial-gradient(1.2px 1.2px at 71% 90%, #FFF6E5 99%, transparent), radial-gradient(1px 1px at 54% 77%, #FFF6E5 99%, transparent);
  background-size: 210px 190px;
  -webkit-mask-image: radial-gradient(closest-side, #000 34%, transparent 58%); mask-image: radial-gradient(closest-side, #000 34%, transparent 58%); }
.hero--home .orbit { --sun-d: 64px; }
@media (min-width: 561px) { .hero--home .orbit { --sun-d: 84px; } }
.hero--home .orbit__glow { inset: 6%; background: radial-gradient(closest-side, var(--orbit-glow), transparent); }
.hero--home .orbit__ring { border-color: var(--ring-sky); }
.hero--home .orbit__ring--1 { border-width: 2px; }
.hero--home .orbit__ring--2 { border-width: 1.5px; }
.hero--home .orbit__ring--3 { border-color: var(--ring-sky-2); border-width: 1.5px; }
.hero--home .orbit .world--m { inline-size: 44px; block-size: 44px; }
.hero--home .orbit .world--l { inline-size: 66px; block-size: 66px; }
.hero--home .body { --by: 22px; }
.hero--home .body__name { font-size: .9375rem; }
.hero--home .orbit .world { box-shadow: 0 12px 28px -10px var(--h), 0 0 0 7px color-mix(in oklab, var(--h) 16%, transparent), 0 0 calc(var(--world-glow) * 34px) color-mix(in oklab, var(--h) 75%, transparent); }
.hero--home .orbit .world--new { box-shadow: none; }
@media (min-width: 1000px) {
  .hero--home { padding-block: calc(84px + clamp(24px, 3.4vw, 48px)) clamp(80px, 8vw, 120px); }
  .hero--home .hero__in { grid-template-columns: minmax(0, 1.14fr) minmax(0, .86fr); grid-template-areas: "top show" "end show"; column-gap: clamp(32px, 4vw, 64px); }
  .hero--home .hero__say--top { grid-area: top; align-self: end; }
  .hero--home .hero__say--end { grid-area: end; align-self: start; }
  .hero--home .hero__show { --ow: clamp(720px, 64vw, 940px); grid-area: show; min-block-size: 600px; }
  /* the sun sits a little past the middle of its column and a little below the middle of the screen;
     the outer ring runs off the page on the far side */
  .hero--home .hero__show { --sun-y: 360px; --sun-big: 112px; }
  /* on a laptop screen the sun rises a little, so the whole card is on the first screen */
  @media (max-height: 860px) { .hero--home .hero__show { --sun-y: 322px; } }
  .hero--home .orbit { position: absolute; margin: 0; inset-inline-start: calc(60% - var(--ow) / 2); inset-block-start: calc(var(--sun-y) - var(--ow) / 2); }
  /* the card hangs below the sun and its "You" label, never over them (scripts/layout.mjs measures it) */
  .hero--home .card { position: absolute; margin: 0; inset-inline-start: -8%; inset-block-start: calc(var(--sun-y) + var(--sun-big) / 2 + 48px); inline-size: min(96%, 450px); }
  .hero--home .orbit .world--m { inline-size: 58px; block-size: 58px; }
  .hero--home .orbit .world--l { inline-size: 92px; block-size: 92px; }
  .hero--home .body { --by: 29px; }
  .hero--home .orbit { --sun-d: var(--sun-big); }
  .hero--home .body__name { font-size: 1.0625rem; }
  .hero--home .b6 .world { inline-size: 40px; block-size: 40px; }
}

/* doors: one real screen with the card leaning on it */
.hero--door { padding-block-end: clamp(140px, 14vw, 200px); }
.hero__show--door { grid-template-columns: 1fr; justify-items: center; }
.hero__show--door .card { margin-block-start: -38%; margin-inline-start: 0; justify-self: center; transform: translateX(calc(var(--dirx) * -18%)); }
@media (max-width: 560px) { .hero__show--door .card { transform: none; inline-size: 94%; } }
.hero--quiet .hero__sky { background: linear-gradient(180deg, #DDE3EE 0%, #ECEAEE 55%, #F3EFEE 100%); }
@media (prefers-color-scheme: dark) { .hero--quiet .hero__sky { background: linear-gradient(180deg, #070A22 0%, #0D1135 60%, #14163A 100%); } }

/* ---- the card, as the Dawn look draws it ---- */

.card { --h: var(--h-plum); background: var(--card); border: 1px solid var(--card-bd); border-radius: var(--r-3); padding: 20px 22px 18px; box-shadow: var(--sh-lift); text-align: start; }
.card__label { font-size: .8125rem; font-weight: 600; color: var(--ink-3); margin-block-end: 12px; display: flex; align-items: center; gap: 8px; }
.card__label::before { content: ""; inline-size: 7px; block-size: 7px; border-radius: 50%; background: var(--accent); }
.card__head { display: flex; align-items: center; gap: 14px; }
.card__head .world--l { inline-size: 46px; block-size: 46px; }
.card__who { display: grid; line-height: 1.25; }
.card__who b { font-family: var(--f-display); font-weight: 600; font-size: 1.125rem; }
.card__who span { font-size: .9375rem; color: var(--ink-3); }
.card__meta { margin-inline-start: auto; font-size: .875rem; font-weight: 600; color: var(--ink-2); text-align: end; }
.card__text { font-family: var(--f-display); font-weight: var(--w-display); font-size: 1.375rem; line-height: 1.25; letter-spacing: -.012em; margin-block: 14px 12px; text-wrap: balance; }
:lang(fa) .card__text { line-height: 1.65; letter-spacing: 0; font-size: 1.25rem; }
.card__quote { margin-block: 4px 14px; padding-inline-start: 14px; border-inline-start: 3px solid color-mix(in oklab, var(--h) 70%, transparent); color: var(--ink-2); font-size: 1.0625rem; }
.card__quote footer { font-size: .8125rem; color: var(--ink-3); margin-block-start: 4px; }
.card__action { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 18px; background: var(--sunk); font-weight: 600; line-height: 1.35; }
.check { inline-size: 24px; block-size: 24px; flex: none; border-radius: 50%; border: 2px solid color-mix(in oklab, var(--h) 80%, var(--ink)); }
.card--lead .card__text { font-size: 1.5rem; }

/* ---- a real screen, inside a phone the stylesheet draws ---- */

.phone { inline-size: min(100%, 300px); margin-inline: auto; }
.phone__glass { padding: 9px; border-radius: 46px; background: var(--bezel); box-shadow: var(--sh-lift), inset 0 0 0 1.5px var(--bezel-rim); }
.phone img { inline-size: 100%; block-size: auto; border-radius: 37px; }
.phone--hero { inline-size: min(78vw, 320px); }

/* ---- sections ---- */

.sec { padding-block: var(--sec); }
.sec__head { max-inline-size: 820px; margin-block-end: clamp(40px, 6vw, 80px); }
.sec__head .h2 { margin-block-start: 14px; }
.sec__head .lead { margin-block-start: 20px; }
.sec__head--row { max-inline-size: none; display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 16px 40px; }

/* how it works: three phones standing on the horizon */
.how, .share, .companion { overflow-x: clip; }
.how { position: relative; }
.steps { list-style: none; position: relative; display: grid; gap: 64px; }
.steps::before { content: ""; position: absolute; inset-inline: -10vw; inset-block-start: 46%; block-size: 1px; background: linear-gradient(90deg, transparent, var(--horizon) 20%, var(--horizon) 80%, transparent); }
.step { position: relative; display: grid; gap: 28px; justify-items: center; }
.step__say { max-inline-size: 330px; inline-size: 100%; }
.step__n { display: block; font-family: var(--f-display); font-weight: 600; font-size: 3rem; line-height: 1; letter-spacing: -.04em; margin-block-end: 10px; background: var(--sun-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.step__say p { color: var(--ink-2); margin-block-start: 10px; }
@media (min-width: 760px) {
  .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 44px); align-items: start; }
  .step--1, .step--3 { margin-block-start: 88px; }
}
.how .note { text-align: center; }

/* the night band: everyone has an orbit */
.night {
  --sun-halo: var(--sun-halo-night); --sun-halo-o: var(--sun-halo-night-o);
  --ink: var(--night-ink); --ink-2: var(--night-ink-2); --ink-3: var(--night-ink-3); --ink-4: rgba(255, 243, 224, .34); --line: var(--night-line);
  --label-halo: rgba(10, 14, 45, .8); --stars-o: .9;
  position: relative; isolation: isolate; overflow: hidden; color: var(--ink); padding-block: var(--sec);
  background: radial-gradient(90% 60% at 50% 115%, rgba(255, 128, 64, .35), transparent 70%), linear-gradient(180deg, var(--night-1) 0%, var(--night-2) 62%, var(--night-3) 100%);
}
.night::after { content: ""; position: absolute; z-index: -1; inset-inline: 0; inset-block-end: 0; block-size: 1px; background: linear-gradient(90deg, transparent, rgba(255, 170, 100, .55), transparent); }
.night__in { position: relative; }
.night__head { max-inline-size: 860px; margin-block-end: clamp(56px, 7vw, 96px); }
@media (min-width: 1100px) { .night__head { max-inline-size: 640px; } }

.nsky { --ns: min(150vw, 560px); position: relative; inline-size: var(--ns); aspect-ratio: 1; margin-inline: calc((100% - var(--ns)) / 2); margin-block: calc(var(--sec) * -1 - var(--ns) * .26) -10px; pointer-events: none; }
.nsky__stars { position: absolute; inset: -4%; border-radius: 50%; opacity: .9;
  background-image:
    radial-gradient(1.4px 1.4px at 14% 24%, #FFF6E5 99%, transparent), radial-gradient(1px 1px at 29% 61%, #FFF6E5 99%, transparent),
    radial-gradient(1.7px 1.7px at 48% 12%, #FFE7C2 99%, transparent), radial-gradient(1px 1px at 63% 43%, #FFF6E5 99%, transparent),
    radial-gradient(1.2px 1.2px at 85% 29%, #FFF6E5 99%, transparent), radial-gradient(1px 1px at 92% 72%, #FFF6E5 99%, transparent),
    radial-gradient(1.8px 1.8px at 7% 83%, #FFE7C2 99%, transparent), radial-gradient(1px 1px at 39% 36%, #FFF6E5 99%, transparent),
    radial-gradient(1.2px 1.2px at 73% 88%, #FFF6E5 99%, transparent), radial-gradient(1px 1px at 56% 79%, #FFF6E5 99%, transparent);
  background-size: 160px 150px;
  -webkit-mask-image: radial-gradient(closest-side, #000 50%, transparent); mask-image: radial-gradient(closest-side, #000 50%, transparent); }
.nsky__glow { position: absolute; inset: 8%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 168, 92, .6), rgba(255, 120, 70, .22) 45%, rgba(110, 80, 200, .1) 75%, transparent); }
.nsky__ring { position: absolute; border-radius: 50%; border: 1.5px solid rgba(255, 214, 170, .28); }
.nsky__ring--1 { inset: 30%; border-style: dotted; border-color: rgba(255, 214, 170, .5); }
.nsky__ring--2 { inset: 17%; }
.nsky__ring--3 { inset: 4%; border-color: rgba(255, 214, 170, .16); }
.nsky__you { --sun-d: calc(var(--ns) * .16); position: absolute; inset-inline-start: calc(50% - var(--sun-d) / 2); inset-block-start: calc(50% - var(--sun-d) / 2); }
.nsky__lane { position: absolute; inset: 0; }
.nsky__w { position: absolute; transform: translate(-50%, -50%); line-height: 0; }
.nsky .world { inline-size: 40px; block-size: 40px; box-shadow: 0 0 0 6px color-mix(in oklab, var(--h) 18%, transparent), 0 0 26px color-mix(in oklab, var(--h) 80%, transparent), 0 0 70px color-mix(in oklab, var(--h) 45%, transparent); }
.nsky .world--new { box-shadow: none; outline-color: rgba(255, 214, 170, .55); }
.nsky .world--kept { outline-color: rgba(255, 243, 224, .4); }
/* on the rings: near on the inner, far on the middle, remembered and still to come on the outer */
.nsky__w--1 { inset-inline-start: 63%; inset-block-start: 36%; }
.nsky__w--2 { inset-inline-start: 18.5%; inset-block-start: 61%; }
.nsky__w--3 { inset-inline-start: 22%; inset-block-start: 31%; }
.nsky__w--4 { inset-inline-start: 73%; inset-block-start: 88%; }
@media (min-width: 1100px) {
  .nsky { --ns: 640px; position: absolute; margin: 0; inset-inline-end: calc(var(--gutter) - 110px); inset-block-start: calc(var(--sec) * .5 - 130px); }
  .nsky .world { inline-size: 50px; block-size: 50px; }
}
.night__head .lead { margin-block-start: 26px; font-size: clamp(1.25rem, 1.1rem + .5vw, 1.5rem); }
.kinds { list-style: none; display: grid; gap: 0 clamp(24px, 3vw, 48px); }
@media (min-width: 700px) { .kinds { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .kinds { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.kind { padding-block: 26px 32px; border-block-start: 1px solid var(--line); }
.kind .world--s { inline-size: 16px; block-size: 16px; box-shadow: 0 0 0 4px color-mix(in oklab, var(--h) 20%, transparent), 0 0 16px color-mix(in oklab, var(--h) 80%, transparent); }
.kind .world--new { box-shadow: none; }
.kind__tag { display: flex; align-items: center; gap: 12px; font-size: .875rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); margin-block-end: 18px; }
:lang(fa) .kind__tag { letter-spacing: 0; }
.kind p { color: var(--ink-2); margin-block-start: 12px; }
.kind .link { color: var(--ink); }

/* sharing: what each person sees */
.share__in { display: grid; gap: clamp(48px, 7vw, 96px); }
@media (min-width: 1000px) { .share__in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; } .sig { grid-column: 1 / -1; } }
.share__say .h2 { margin-block-start: 14px; }
.share__say .lead { margin-block-start: 22px; }
.levels { list-style: none; margin-block-start: 36px; }
.level { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 4px 16px; padding-block: 18px; border-block-start: 1px solid var(--line); }
.level:last-child { border-block-end: 1px solid var(--line); }
.level::before { content: ""; grid-row: 1 / 3; inline-size: 20px; block-size: 20px; margin-block-start: .3em; border-radius: 50%; border: 2px solid var(--ink); }
.level--1::before { background: linear-gradient(90deg, var(--ink) 50%, transparent 50%); }
.level--2::before { background: var(--ink); }
.level b { font-family: var(--f-display); font-weight: var(--w-display); font-size: 1.375rem; line-height: 1.3; }
.level span { color: var(--ink-2); }
.share__her { margin-block-start: 24px; color: var(--ink-3); font-size: 1rem; max-inline-size: 34em; }
.pair { position: relative; display: grid; grid-template-columns: 1fr 1fr; align-items: start; max-inline-size: 560px; margin-inline: auto; }
.pair .phone { inline-size: 100%; }
.phone--back { transform: translateY(56px) rotate(calc(var(--dirx) * -4deg)); margin-inline-end: -14%; position: relative; z-index: 1; opacity: .96; }
.phone--front { position: relative; z-index: 2; transform: rotate(calc(var(--dirx) * 2deg)); }
.share__show .note { text-align: center; margin-block-start: 80px; }
.sig { margin-block-start: clamp(16px, 4vw, 40px); padding-block-start: clamp(40px, 6vw, 72px); border-block-start: 1px solid var(--line); }
.sig__lead { color: var(--ink-3); font-weight: 600; margin-block-end: 18px; }
.sig__big { display: grid; gap: 0 .35em; font-family: var(--f-display); font-weight: var(--w-display); font-size: clamp(2rem, 1rem + 4.2vw, 5.2rem); line-height: 1.04; letter-spacing: var(--track); }
@media (min-width: 760px) { .sig__big { grid-template-columns: auto minmax(0, 1fr); } }
:lang(fa) .sig__big { line-height: 1.45; }
.sig__list { list-style: none; }
.sig__list li { display: flex; align-items: center; gap: .3em; color: var(--ink-faint); }
.sig__list li.is-on { color: var(--ink); }
.sig__mark { inline-size: .42em; block-size: .42em; border-radius: 50%; flex: none; border: .07em solid currentColor; }
.sig__mark--0 { background: currentColor; }
.sig__mark--1 { background: linear-gradient(90deg, currentColor 50%, transparent 50%); }
.sig__mark--2 { border-color: var(--accent); }
.sig__mark--3 { background: currentColor; inline-size: .3em; block-size: .3em; box-shadow: .38em 0 0 -.04em currentColor; margin-inline-end: .2em; }
/* each state in a world colour, so the line that is on reads at a glance */
.sig__mark--0 { color: var(--h-sage); } .sig__mark--1 { color: var(--h-ochre); } .sig__mark--2 { color: var(--h-clay); border-color: currentColor; } .sig__mark--3 { color: var(--h-dusk); }

/* the companion */
.companion { position: relative; isolation: isolate; }
.companion::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--wash); }
.companion__in { display: grid; gap: clamp(48px, 7vw, 96px); align-items: center; }
@media (min-width: 1000px) { .companion__in { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); } }
.companion__show { position: relative; display: grid; justify-items: center; padding-block-start: 70px; }
.companion__show .orb { position: absolute; inset-block-start: 0; inset-inline-start: calc(50% - 210px); z-index: 3; }
.companion__show .note { text-align: center; }
.phone--tilt { transform: rotate(calc(var(--dirx) * -2.5deg)); }
.companion__say .h2 { margin-block: 14px 26px; }
.companion__say p:not(.kicker) { color: var(--ink-2); margin-block-start: 16px; max-inline-size: 34em; font-size: 1.1875rem; }
.companion__say p:first-of-type:not(.kicker) { font-size: var(--fs-lead); color: var(--ink); }

.orb { position: relative; inline-size: 150px; block-size: 150px; }
.orb__halo { position: absolute; inset: -40%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 170, 70, .45), rgba(255, 170, 70, 0)); }
.orb__ball { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 34% 28%, #FFE9A8 0%, #FFC043 28%, #F68A2E 66%, #E9512B 100%); box-shadow: 0 30px 60px -24px rgba(233, 81, 43, .7), inset -10px -14px 30px rgba(170, 50, 20, .35); }
.orb__face { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; }
.orb__matrix circle { fill: rgba(140, 50, 10, .14); }
.orb__lit circle { fill: #2A1650; }
@media (max-width: 560px) { .orb { inline-size: 110px; block-size: 110px; } .companion__show .orb { inset-inline-start: 4%; } }

/* promises */
.promises { display: grid; gap: clamp(36px, 6vw, 80px); }
@media (min-width: 1000px) { .promises { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); } }
.promises__head .lead { margin-block-start: 22px; }
.promises__list { list-style: none; counter-reset: p; }
.promises__list li { counter-increment: p; display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 16px; padding-block: 22px; border-block-start: 1px solid var(--line); font-size: 1.1875rem; line-height: 1.5; }
.promises__list li:last-child { border-block-end: 1px solid var(--line); }
.promises__list li::before { content: counter(p, decimal-leading-zero); font-family: var(--f-display); font-weight: 600; font-size: 1.5rem; line-height: 1.2; background: var(--sun-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
:lang(fa) .promises__list li::before { content: counter(p, persian); }

/* the tool band: it works today */
.toolband { position: relative; overflow: hidden; display: grid; gap: 40px; align-items: center; padding: clamp(32px, 6vw, 80px); border-radius: 40px; background: var(--band); }
@media (min-width: 900px) { .toolband { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(40px, 5vw, 80px); } }
.toolband .h2 { margin-block-start: 14px; }
.toolband .lead { margin-block: 18px 30px; color: var(--ink-2); }
.toolband__label { font-weight: 600; color: var(--ink-2); margin-block-end: 12px; }
.cpairs { list-style: none; display: grid; gap: 10px; }
.cpair { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-block-size: 60px; padding: 10px 22px; border-radius: 20px; background: var(--raised); box-shadow: var(--sh); color: var(--ink); font-family: var(--f-display); font-weight: var(--w-display); font-size: 1.25rem; line-height: 1.25; text-decoration: none; transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
.cpair:hover { transform: translateY(-2px); box-shadow: var(--sh-lift); }
.cpair .arr { color: var(--ink-3); }
.cpair .world--s { inline-size: 16px; block-size: 16px; }
.cpair .world--far { outline-offset: 3px; }

/* guides as tiles */
.tiles { display: grid; gap: 20px; }
@media (min-width: 760px) { .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tile { position: relative; display: flex; flex-direction: column; gap: 14px; padding: clamp(24px, 3vw, 34px); border-radius: var(--r-3); background: var(--raised); box-shadow: var(--sh); transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.tile:hover { transform: translateY(-4px); box-shadow: var(--sh-lift); }
.tile--big { background: var(--sky); }
.tile__tags { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: .8125rem; font-weight: 600; color: var(--ink-3); }
.tile__tags li { display: inline-flex; align-items: center; gap: 7px; }
.tile__tags li::before { content: ""; inline-size: 6px; block-size: 6px; border-radius: 50%; background: var(--sun); }
.tile__title { font-family: var(--f-display); font-weight: var(--w-display); font-size: 1.5rem; line-height: 1.2; letter-spacing: -.015em; text-wrap: balance; }
:lang(fa) .tile__title { line-height: 1.6; letter-spacing: 0; font-size: 1.375rem; }
.tile__title a { text-decoration: none; }
.tile__title a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.tile__title a:focus-visible { outline: none; }
.tile:has(a:focus-visible) { outline: 3px solid var(--ink); outline-offset: 3px; }
.tile__text { color: var(--ink-2); font-size: 1rem; }
.tile__meta { margin-block-start: auto; padding-block-start: 8px; font-size: .875rem; color: var(--ink-3); }

/* what it is not, and where things stand */
.isnot { max-inline-size: calc(860px + 2 * var(--gutter)); padding-block-end: 0; }
.isnot__list { list-style: none; margin-block-start: 18px; }
.isnot__list li { padding-block: 16px; border-block-start: 1px solid var(--line); color: var(--ink-2); }
.isnot__list li:last-child { border-block-end: 1px solid var(--line); }
#status { max-inline-size: calc(860px + 2 * var(--gutter)); padding-block-start: clamp(48px, 6vw, 72px); }
.state { padding: clamp(24px, 4vw, 40px); border-radius: var(--r-3); background: var(--sunk); }
.state p { margin-block-start: 12px; color: var(--ink-2); }
.state p:first-of-type { color: var(--ink); font-weight: 600; }
.state a { font-weight: 600; text-underline-offset: 4px; }

/* the waitlist form, inside the state box (only while the waitlist is switched on) */
.wl { margin-block-start: 22px; }
.wl label { display: block; font-weight: 600; color: var(--ink); margin-block-end: 8px; }
.wl__row { display: flex; flex-wrap: wrap; gap: 10px; }
.wl__in { flex: 1 1 16em; min-inline-size: 0; min-block-size: 56px; padding-inline: 16px; border: 0; border-radius: var(--r-2); background: var(--raised); box-shadow: inset 0 0 0 1.5px var(--line-2); color: var(--ink); font: inherit; }
.wl__in:focus-visible { outline: none; box-shadow: inset 0 0 0 2.5px var(--ink); }
.wl .btn { flex: 0 0 auto; border: 0; cursor: pointer; font-family: inherit; }
.wl .btn:disabled { opacity: .6; cursor: progress; }
.state .wl p.wl__consent { font-weight: 400; color: var(--ink-3); margin-block-start: 10px; }
.state .wl p.wl__out { color: var(--ink); font-weight: 600; min-block-size: 1.6em; }

/* doors */
.lines { list-style: none; max-inline-size: 860px; }
.lines li { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 16px; padding-block: 26px; border-block-start: 1px solid var(--line); font-size: clamp(1.1875rem, 1.1rem + .4vw, 1.375rem); line-height: 1.45; }
.lines li:last-child { border-block-end: 1px solid var(--line); }
.lines__n { font-family: var(--f-display); font-weight: 600; font-size: 2.25rem; line-height: 1; background: var(--sun-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lines__after { margin-block-start: 28px; }
.house { text-align: center; display: grid; justify-items: center; }
.house .lead { margin-block: 24px 8px; }

/* ---- plain pages ---- */

.page { position: relative; isolation: isolate; padding-block-start: calc(84px + clamp(24px, 5vw, 64px)); }
.page__sky { position: absolute; inset-inline: 0; inset-block-start: 0; block-size: 560px; z-index: -1; background: var(--sky); -webkit-mask-image: linear-gradient(180deg, #000 40%, transparent); mask-image: linear-gradient(180deg, #000 40%, transparent); }
.prose-page { max-inline-size: calc(860px + 2 * var(--gutter)); }
.prose-page .display { margin-block-end: 24px; }
.prose-page .h3 { margin-block: 48px 8px; }
.prose-page > p, .prose-page .lead { margin-block-start: 16px; }
.notfound { padding-block-end: var(--sec); }
.other { margin-block-start: 48px; padding-block-start: 32px; border-block-start: 1px solid var(--line); font-family: "Vazirmatn", var(--f-text); }

.crumbs { margin-block-end: 28px; font-size: .9375rem; }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 0 10px; }
.crumbs li { display: inline-flex; align-items: center; gap: 10px; color: var(--ink-3); }
.crumbs li + li::before { content: "/"; color: var(--ink-4); }
.crumbs a { color: var(--ink-2); text-decoration: none; font-weight: 600; display: inline-flex; align-items: center; min-block-size: 44px; }
.crumbs a:hover { text-decoration: underline; text-underline-offset: 4px; }

.listhead { max-inline-size: 820px; margin-block-end: clamp(40px, 5vw, 64px); }
.listhead .lead { margin-block-start: 20px; }
.tagnav ul { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin-block-start: 28px; }
.tagnav a { display: inline-flex; align-items: center; min-block-size: 44px; padding-inline: 18px; border-radius: 999px; box-shadow: inset 0 0 0 1.5px var(--line-2); text-decoration: none; font-weight: 600; font-size: .9375rem; color: var(--ink-2); }
.tagnav a:hover { color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
.pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-block-start: 48px; color: var(--ink-3); }

/* ---- an article ---- */

.art__head { max-inline-size: calc(1100px + 2 * var(--gutter)); margin-inline: auto; padding-block-end: clamp(36px, 5vw, 56px); }
.art__head > * { max-inline-size: 940px; }
@media (min-width: 1040px) { .art__head { padding-inline-start: calc(var(--gutter) + 322px); } }
.art__tags { margin-block-end: 18px; }
.art__tags a { text-decoration: none; display: inline-flex; align-items: center; min-block-size: 44px; }
.art__tags a:hover { text-decoration: underline; text-underline-offset: 4px; }
.art__lede { font-size: clamp(1.25rem, 1.1rem + .6vw, 1.55rem); line-height: 1.5; color: var(--ink-2); margin-block-start: 26px; max-inline-size: 36em; text-wrap: pretty; }
:lang(fa) .art__lede { line-height: 1.9; }
.art__meta { display: flex; flex-wrap: wrap; gap: 4px 22px; margin-block-start: 26px; font-size: .9375rem; color: var(--ink-3); }
.art__meta a { color: var(--ink-2); font-weight: 600; text-underline-offset: 4px; }
.art__grid { display: grid; gap: 32px; max-inline-size: calc(1100px + 2 * var(--gutter)); margin-inline: auto; padding-block-end: clamp(24px, 4vw, 48px); }
@media (min-width: 1040px) {
  .art__grid { grid-template-columns: 250px minmax(0, 720px); gap: 72px; }
  .art__side { position: sticky; inset-block-start: 28px; align-self: start; }
}
.toc { padding: 22px 22px 16px; border-radius: 22px; background: var(--sunk); font-size: .9375rem; }
.toc__title { font-weight: 700; margin-block-end: 6px; }
.toc ol { list-style: none; counter-reset: t; }
.toc li { counter-increment: t; display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 6px; }
.toc li::before { content: counter(t); color: var(--ink-3); font-weight: 600; padding-block-start: 10px; }
:lang(fa) .toc li::before { content: counter(t, persian); }
.toc a { display: block; padding-block: 10px; color: var(--ink-2); text-decoration: none; line-height: 1.35; }
.toc a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.other-lang { margin-block-start: 20px; padding: 18px 22px; border-radius: 22px; box-shadow: inset 0 0 0 1px var(--line-2); font-size: .9375rem; }
.other-lang p { color: var(--ink-3); }
.other-lang ul { list-style: none; }
.other-lang a { display: inline-flex; min-block-size: 44px; align-items: center; font-weight: 600; text-underline-offset: 4px; }
.other-lang a:lang(fa) { font-family: "Vazirmatn", var(--f-text); }
.other-lang a:lang(en) { font-family: "Albert Sans", var(--f-text); }

.prose { font-size: 1.1875rem; line-height: 1.72; }
:lang(fa) .prose { font-size: 1.125rem; line-height: 2; }
.prose > * + * { margin-block-start: 1.05em; }
.prose h2 { font-family: var(--f-display); font-weight: var(--w-display); font-size: clamp(1.6rem, 1.3rem + 1vw, 2.15rem); line-height: 1.18; letter-spacing: -.02em; margin-block-start: 2.1em; scroll-margin-block-start: 24px; text-wrap: balance; }
.prose h3 { font-family: var(--f-display); font-weight: var(--w-display); font-size: 1.3125rem; line-height: 1.3; margin-block-start: 1.7em; }
:lang(fa) .prose h2, :lang(fa) .prose h3 { line-height: 1.6; letter-spacing: 0; }
.prose h2 + *, .prose h3 + * { margin-block-start: .55em; }
.prose ul, .prose ol { padding-inline-start: 1.3em; }
.prose li + li { margin-block-start: .45em; }
.prose li::marker { color: var(--ink-3); font-weight: 600; }
:lang(fa) .prose ol { list-style-type: persian; }
.prose a { text-decoration-thickness: 2px; text-underline-offset: 4px; text-decoration-color: #F2913A; font-weight: 600; }
.prose a:hover { text-decoration-color: currentColor; }
.prose strong { font-weight: 700; }
.prose blockquote { padding: 22px 26px; border-radius: 22px; background: var(--raised); box-shadow: var(--sh); border-inline-start: 4px solid #F2913A; font-size: 1.25rem; line-height: 1.55; }
:lang(fa) .prose blockquote { line-height: 1.9; }
.prose hr { border: 0; block-size: 1px; background: var(--line); margin-block: 2.4em; }
.faq { margin-block-start: 2.6em; }
.faq h2 { margin-block-end: .6em; }
.faq details { border-block-start: 1px solid var(--line); }
.faq details:last-child { border-block-end: 1px solid var(--line); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-block-size: 56px; padding-block: 12px; cursor: pointer; font-weight: 700; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; inline-size: 12px; block-size: 12px; flex: none; border-inline-end: 2px solid var(--ink-3); border-block-end: 2px solid var(--ink-3); transform: rotate(45deg); margin-block-start: -6px; }
.faq details[open] summary::after { transform: rotate(225deg); margin-block-start: 6px; }
.faq details p { padding-block-end: 18px; color: var(--ink-2); }
.art__foot { margin-block-start: 3em; padding-block-start: 28px; border-block-start: 1px solid var(--line); font-size: 1rem; }
.art__author { color: var(--ink-2); }
.art__author b { color: var(--ink); }
.door { margin-block-start: 24px; padding: 24px 28px; border-radius: 24px; background: var(--band); }
.door p:first-child { font-family: var(--f-display); font-weight: var(--w-display); font-size: 1.25rem; }
.related { padding-block-start: clamp(48px, 6vw, 80px); }
.related .h3 { margin-block-end: 28px; }

/* ---- facts, help, what it is not, changelog: checked statements, one card each ---- */

.factshead { max-inline-size: calc(1100px + 2 * var(--gutter)); margin-block-end: clamp(32px, 4vw, 52px); }
.factshead .display { margin-block: 16px 20px; }
.factshead > :not(.crumbs) { max-inline-size: 820px; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; margin-block-start: 26px; }
.chip { display: inline-flex; align-items: center; gap: 9px; min-block-size: 40px; padding-inline: 16px; border-radius: 999px; background: color-mix(in oklab, var(--raised) 75%, transparent); box-shadow: inset 0 0 0 1px var(--line); font-size: .9375rem; font-weight: 600; color: var(--ink-2); }
.chip time { color: var(--ink); }
.facts { display: grid; gap: 18px; max-inline-size: calc(1100px + 2 * var(--gutter)); }
@media (min-width: 860px) { .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; } .fact--wide, .fact--loud { grid-column: 1 / -1; } }
.fact { position: relative; padding: clamp(22px, 3vw, 34px); border-radius: var(--r-3); background: var(--raised); box-shadow: var(--sh); scroll-margin-block-start: 24px; }
.fact .h4 { margin-block-end: 10px; }
.fact p + p { margin-block-start: 10px; }
.fact p { color: var(--ink-2); max-inline-size: 62ch; }
.fact--loud { background: var(--band); box-shadow: var(--sh-lift); }
.fact--loud .h4 { font-size: var(--fs-h3); }
.fact--loud p { font-family: var(--f-display); font-weight: var(--w-display); font-size: clamp(1.3rem, 1.1rem + .9vw, 1.85rem); line-height: 1.3; color: var(--ink); letter-spacing: -.01em; }
:lang(fa) .fact--loud p { line-height: 1.75; letter-spacing: 0; }
.fact__tag { position: absolute; inset-block-start: clamp(22px, 3vw, 34px); inset-inline-end: clamp(22px, 3vw, 34px); display: inline-flex; align-items: center; gap: 7px; font-size: .8125rem; font-weight: 700; color: var(--ink-3); }
.fact__tag::before { content: ""; inline-size: 7px; block-size: 7px; border-radius: 50%; background: var(--h-dusk); }
.fact:has(.fact__tag) .h4 { padding-inline-end: 7.5em; }
.fact__note { font-size: .9375rem; margin-block-end: 6px; }
.ticks { list-style: none; display: grid; gap: 0 32px; }
@media (min-width: 860px) { .fact--wide .ticks { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ticks li { position: relative; padding-block: 12px; padding-inline-start: 22px; border-block-start: 1px solid var(--line); color: var(--ink-2); }
.ticks li::before { content: ""; position: absolute; inset-inline-start: 2px; inset-block-start: 1.32em; inline-size: 8px; block-size: 8px; border-radius: 50%; background: var(--sun); }
.facts--list { list-style: none; }
.qgroup { max-inline-size: calc(1100px + 2 * var(--gutter)); }
.qgroup + .qgroup { margin-block-start: clamp(36px, 5vw, 56px); }
.qgroup > .h3 { margin-block-end: 18px; }
.fact--empty p { font-size: var(--fs-lead); }
/* dates and words */
.date__big { font-family: var(--f-display); font-weight: var(--w-display); font-size: clamp(1.3rem, 1.1rem + .8vw, 1.7rem); line-height: 1.25; color: var(--ink); letter-spacing: -.01em; }
:lang(fa) .date__big { line-height: 1.7; letter-spacing: 0; }
.date .date__big + p:not(.date__big) { margin-block-start: 12px; }
.date b { color: var(--ink); }
@media (min-width: 1100px) { .dates { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cardlink { text-decoration: none; }
.cardlink::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.cardlink:focus-visible { outline: none; }
.fact:has(.cardlink:focus-visible) { outline: 3px solid var(--ink); outline-offset: 3px; }
.fact:has(.cardlink):hover { box-shadow: var(--sh-lift); }

/* comparisons */
.cmpwrap { max-inline-size: calc(1100px + 2 * var(--gutter)); margin-block-end: clamp(32px, 4vw, 52px); }
.cmpwrap > .h3 { margin-block-end: 18px; }
@media (min-width: 1100px) {
  .cmps--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cmps--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cmp--us { grid-column: 1 / -1; }
  .cmp--us .cmp__rows { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); grid-auto-flow: column; grid-template-rows: auto auto; column-gap: 24px; }
}
.cmp__q { display: block; font-family: "Albert Sans", var(--f-text); text-align: start; color: var(--ink); font-weight: 600; }
.cmp__v { display: block; }
.cmp__meta { display: block; font-size: .8125rem; color: var(--ink-3); }
.cmp .h4 a { text-decoration: none; }
.cmp .h4 a:hover { text-decoration: underline; text-underline-offset: 4px; }
.cmp__rows { margin: 0; }
.cmp__rows dt { margin-block-start: 14px; padding-block-start: 12px; border-block-start: 1px solid var(--line); font-size: .8125rem; font-weight: 700; color: var(--ink-3); }
.cmp__rows dd { margin: 4px 0 0; color: var(--ink-2); }
.cmp__src { display: inline-flex; align-items: center; min-block-size: 44px; font-weight: 600; color: var(--ink-2); text-underline-offset: 3px; }
.cmp__none { color: var(--ink-3); font-style: italic; }
.cmp--us { background: var(--sky); box-shadow: var(--sh-lift); }

/* city pairs */
.cpairs--grid { margin-block-start: 22px; }
@media (min-width: 700px) { .cpairs--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .cpairs--grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pairsidx { max-inline-size: calc(1100px + 2 * var(--gutter)); }
.pairsidx .lead { margin-block-start: 10px; }
.pairnote { max-inline-size: calc(1100px + 2 * var(--gutter)); margin-block: clamp(32px, 4vw, 48px) 0; }
.pairnote .door { margin: 0; padding: clamp(24px, 3.4vw, 40px); }
.pairnote .door p { font-family: var(--f-text); font-weight: 400; font-size: var(--fs-lead); line-height: 1.5; color: var(--ink); max-inline-size: 44em; }
:lang(fa) .pairnote .door p { line-height: 1.9; }
.pairnote .door p + p { margin-block-start: 12px; }
.pairnote .door .h4 { margin-block-end: 12px; }
.pairnote .door p.small { font-size: .9375rem; color: var(--ink-2); }
.ringtitle { max-inline-size: calc(920px + 2 * var(--gutter)); margin-block-end: 16px; }
.is-pair .ring, .is-pair .ringtitle, .is-pair .pairnote, .is-pair .sec.wrap { max-inline-size: calc(1100px + 2 * var(--gutter)); }
.pairlead { margin-block: 10px 24px; }
.fact__when { font-size: .9375rem; font-weight: 700; color: var(--ink-3); margin-block-end: 6px; }
.changes { margin-block-start: 22px; }
@media (min-width: 1100px) { .periods { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pairsrc { margin-block-start: 18px; max-inline-size: 70ch; }
.more { max-inline-size: calc(1100px + 2 * var(--gutter)); margin-block-start: clamp(36px, 5vw, 56px); }
ul.more { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 28px; }
.more ul { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 28px; margin-block-start: 6px; }

/* ---- the tool: When can I ring? ---- */

.toolhead { max-inline-size: calc(920px + 2 * var(--gutter)); }
.toolhead .lead { margin-block: 18px clamp(32px, 4vw, 48px); }
.ring { max-inline-size: calc(920px + 2 * var(--gutter)); }
.ring__panel { padding: clamp(20px, 4vw, 40px); border-radius: 32px; background: var(--raised); box-shadow: var(--sh-lift); }
.ring__pick { display: grid; gap: 10px; align-items: end; }
@media (min-width: 720px) { .ring__pick { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 16px; } }
.field label, .hours label { display: block; margin-block-end: 6px; font-size: .9375rem; font-weight: 600; color: var(--ink-2); }
.sel {
  appearance: none; -webkit-appearance: none; inline-size: 100%; min-block-size: 56px; margin: 0;
  padding-block: 12px; padding-inline: 16px 44px; border: 0; border-radius: var(--r-2);
  background: var(--sunk) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235F5A78' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat;
  background-size: 18px 18px; background-position: right 16px center;
  box-shadow: inset 0 0 0 1.5px var(--line-2);
  color: var(--ink); font: inherit; font-weight: 600; line-height: 1.4; text-overflow: ellipsis;
}
[dir="rtl"] .sel { background-position: left 16px center; }
.sel:focus-visible { outline: none; box-shadow: inset 0 0 0 2.5px var(--ink); }
@media (prefers-color-scheme: dark) { .sel { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ABA5C6' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); } }
.sel--s { inline-size: auto; min-block-size: 46px; padding-inline: 14px 40px; font-weight: 500; }
.swap { justify-self: center; display: inline-flex; align-items: center; justify-content: center; inline-size: 56px; block-size: 56px; padding: 0; border: 0; border-radius: 50%; background: var(--ink); color: var(--on-ink); cursor: pointer; }
.swap:hover { transform: rotate(180deg); transition: transform .4s var(--ease); }
@media (max-width: 719px) { .swap svg { transform: rotate(90deg); } }
.ring__out { margin-block-start: 32px; }
.ring__msg { color: var(--ink-2); }
.ring__best { font-family: var(--f-display); font-weight: var(--w-display); font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem); line-height: 1.15; letter-spacing: var(--track); text-wrap: balance; }
:lang(fa) .ring__best { line-height: 1.6; }
.ring__out p + p { margin-block-start: 10px; }
.ring__there { font-size: 1.1875rem; color: var(--ink-2); }
.ring__facts { list-style: none; margin-block-start: 22px; color: var(--ink-2); }
.ring__facts li { padding-block: 12px; border-block-start: 1px solid var(--line); }
.ring__chart { margin-block-start: 28px; padding: 20px; border-radius: 22px; background: var(--sunk); }
.ring__chart[hidden] { display: none; }
.row + .row { margin-block-start: 18px; }
.row__name { display: flex; justify-content: space-between; gap: 12px; font-size: .875rem; font-weight: 600; color: var(--ink-2); }
.track { position: relative; display: flex; block-size: 32px; margin-block-start: 6px; border-radius: 10px; overflow: hidden; background: var(--raised); box-shadow: inset 0 0 0 1px var(--line); }
.seg { flex: 1 1 0; min-inline-size: 0; }
.seg.is-up { background: var(--ink-4); }
.seg.is-best { background: var(--ok); }
.now { position: absolute; inset-block: 0; inline-size: 3px; margin-inline-start: -1.5px; background: var(--ink); border-radius: 2px; }
.ticks-row { position: relative; block-size: 22px; margin-block-start: 4px; font-size: .75rem; font-weight: 500; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.ticks-row span { position: absolute; inset-block-start: 0; transform: translateX(calc(var(--dirx) * -50%)); white-space: nowrap; }
@media (max-width: 599px) { .ticks-row .minor { display: none; } }
.legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-block-start: 14px; font-size: .8125rem; color: var(--ink-2); }
.legend span { display: inline-flex; align-items: center; gap: 7px; }
.legend i { inline-size: 14px; block-size: 10px; border-radius: 3px; background: var(--raised); box-shadow: inset 0 0 0 1px var(--line-2); }
.legend i.k-up { background: var(--ink-4); box-shadow: none; }
.legend i.k-best { background: var(--ok); box-shadow: none; }
.legend i.k-now { inline-size: 3px; block-size: 14px; border-radius: 2px; background: var(--ink); box-shadow: none; }
.ring__hours { margin-block-start: 28px; padding-block: 6px; border-block: 1px solid var(--line); }
.ring__hours summary { display: flex; align-items: center; min-block-size: 48px; font-weight: 600; cursor: pointer; }
.ring__hours p { color: var(--ink-2); max-inline-size: 60ch; }
.hours { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-block: 14px; }
.hours label { margin: 0; }

/* ---- the footer: the same night, every page ---- */

.foot {
  --ink: var(--night-ink); --ink-2: var(--night-ink-2); --ink-3: var(--night-ink-3); --line: var(--night-line);
  position: relative; color: var(--ink); margin-block-start: var(--sec);
  background: linear-gradient(180deg, var(--night-2), var(--night-1));
}
.foot::before { content: ""; position: absolute; inset-inline: 0; inset-block-start: -1px; block-size: 1px; background: linear-gradient(90deg, transparent, rgba(255, 190, 120, .5), transparent); }
.foot .brand { color: var(--ink); }
.foot__top { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 18px 40px; padding-block: clamp(56px, 7vw, 96px) 36px; border-block-end: 1px solid var(--line); }
.foot__tag { font-family: var(--f-display); font-weight: var(--w-display); font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2.2rem); letter-spacing: -.02em; color: var(--ink-2); }
.foot__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(150px, 40%), 1fr)); gap: 28px 32px; padding-block: 40px; }
.foot__col h2 { font-size: .8125rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin-block-end: 8px; }
:lang(fa) .foot__col h2 { letter-spacing: 0; font-size: .875rem; }
.foot__col ul { list-style: none; }
.foot__col a { display: inline-flex; align-items: center; min-block-size: 44px; color: var(--ink-2); text-decoration: none; font-size: .9875rem; line-height: 1.3; padding-block: 4px; }
.foot__col .lang { padding-inline: 0; font-size: 1.0625rem; }
.foot__col a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
.foot__note { display: flex; align-items: center; gap: 10px; padding-block: 24px 40px; border-block-start: 1px solid var(--line); font-size: .875rem; color: var(--ink-3); }
.foot :focus-visible { outline-color: var(--ink); }

/* ---- motion, only when it is welcome ---- */

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  .lane { animation: spin var(--d) linear infinite; will-change: transform; }
  .lane .body { animation: unspin var(--d) linear infinite; }
  .lane--2 { animation-direction: reverse; }
  .lane--2 .body { animation-direction: reverse; }
  .orbit__glow { animation: breathe 9s ease-in-out infinite; }
  .sun::before { animation: shine 11s ease-in-out infinite; }
  .nsky__lane { animation: spin 420s linear infinite; }
  .hero__say, .hero__show { animation: rise .9s var(--ease) both; }
  .hero__show { animation-delay: .12s; }
  .orb__ball { animation: float 7s ease-in-out infinite; }
  .orb__lit { animation: blink 6s steps(1, end) infinite; transform-origin: 50% 45%; }
}
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes unspin { from { transform: translate(-50%, calc(-1 * var(--by))) rotate(0deg); } to { transform: translate(-50%, calc(-1 * var(--by))) rotate(-360deg); } }
@keyframes breathe { 50% { transform: scale(1.06); opacity: .85; } }
@keyframes shine { 50% { transform: scale(1.06); } }
@keyframes rise { from { transform: translateY(18px); } }
@keyframes float { 50% { transform: translateY(-8px); } }
@keyframes blink { 0%, 96% { transform: scaleY(1); } 97%, 99% { transform: scaleY(.15); } }

@media (forced-colors: active) {
  .world, .orbit__ring, .check, .level::before { forced-color-adjust: none; }
}