/* Self-hosted: Google Fonts is unreliable from Iran. */
@font-face {
  font-family: "Vazirmatn";
  src: url(assets/fonts/vazirmatn-arabic-wght-normal.woff2) format("woff2");
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+200C-200E, U+2010-2011, U+204F, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
  font-family: "Vazirmatn";
  src: url(assets/fonts/vazirmatn-latin-wght-normal.woff2) format("woff2");
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-200B, U+2012-206F, U+20AC, U+2122, U+2212;
}

/* The three bands are the app's three themes (Sources/Tamarkoz/Theme.swift). */
:root {
  --dusk-base: #1a0d21;
  --dusk-wine: #8c2a4a;
  --dusk-violet: #43195c;
  --dusk-ink: #fcf1e6;
  --dusk-muted: #d2bec0;
  --dusk-accent: #ffd49a;
  --dusk-accent2: #ff9270;
  --dusk-on-accent: #2a1020;

  --dawn-base: #fff7ee;
  --dawn-ink: #2b1530;
  --dawn-muted: #5f4a5e;
  --dawn-accent: #8e2f5c;

  --aurora-base: #0a1322;
  --aurora-teal: #0a5558;
  --aurora-indigo: #3b2d94;
  --aurora-ink: #eef7f4;
  --aurora-muted: #b5c8ce;
  --aurora-accent: #a4f2d2;

  --gutter: clamp(20px, 5vw, 72px);
  --display: "Vazirmatn", system-ui, sans-serif;
  --text: "Vazirmatn", system-ui, sans-serif;
  --calm: cubic-bezier(.3, .1, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; background: var(--dusk-base); color-scheme: dark; }
button, a { touch-action: manipulation; }
body {
  margin: 0;
  font-family: var(--text);
  font-size: clamp(1rem, .96rem + .12vw, 1.0625rem);
  line-height: 1.85;
  color: var(--dusk-ink);
  overflow-x: clip;
}
:lang(en) body, :lang(de) body, html:lang(en), html:lang(de) { line-height: 1.6; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
p, h1, h2, h3, ul, ol, dl, dd, figure, blockquote { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: inherit; }
button, input { font: inherit; color: inherit; }
b { font-weight: 650; }

:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; border-radius: 4px; }

h1, h2 {
  font-family: var(--display);
  font-weight: 750;
  text-wrap: balance;
  line-height: 1.32;
}
h2 { font-size: clamp(1.625rem, 1.2rem + 1.3vw, 2.375rem); }
h3 { font-weight: 650; font-size: 1.1em; line-height: 1.5; }

.skip {
  position: absolute; inset-inline-start: 12px; top: -80px; z-index: 10;
  padding: 10px 18px; background: var(--dusk-accent); color: var(--dusk-on-accent); border-radius: 10px;
}
.skip:focus { top: 12px; }

/* ---------- Bands ---------- */

.band--dusk { background: var(--dusk-base); color: var(--dusk-ink); --muted: var(--dusk-muted); --accent: var(--dusk-accent); --rule: #fcf1e62e; }
.band--dawn { background: var(--dawn-base); color: var(--dawn-ink); --muted: var(--dawn-muted); --accent: var(--dawn-accent); --rule: #2b153024; }
.band--aurora {
  --muted: var(--aurora-muted); --accent: var(--aurora-accent); --rule: #eef7f42e;
  color: var(--aurora-ink);
  background:
    radial-gradient(80% 90% at 100% 0, var(--aurora-teal), transparent 70%),
    radial-gradient(60% 70% at 0 100%, #3b2d9470, transparent 70%),
    var(--aurora-base);
}

.moment {
  padding-inline: var(--gutter);
  padding-block: clamp(56px, 6.5vw, 96px);
  max-width: 1240px;
  margin-inline: auto;
}
.time {
  display: flex; align-items: center; gap: 14px;
  color: var(--accent);
  font-weight: 600;
  font-size: 1.2em;
  margin-bottom: 18px;
}
.time::after { content: ""; height: 1px; width: min(120px, 18vw); background: currentColor; opacity: .5; }
.lead { max-width: 34em; margin-top: 1.1em; }
.lead, .hero__lede, .urge__copy p, .facts dd, .steps li { text-wrap: pretty; }

/* ---------- Top ---------- */

.top {
  position: absolute; inset-inline: 0; top: 0; z-index: 2;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px;
  padding: 18px var(--gutter);
}
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 650; min-height: 44px; }
.langs { display: flex; flex-wrap: wrap; gap: 2px 4px; font-size: .95rem; }
.langs a {
  display: inline-flex; align-items: center; min-height: 44px; padding-inline: 10px;
  text-decoration: none; color: var(--dusk-muted); border-bottom: 2px solid transparent;
}
.langs a:hover { color: var(--dusk-ink); }
.langs a[aria-current] { color: var(--dusk-ink); border-bottom-color: var(--dusk-accent); }

/* ---------- Hero ---------- */

.opening {
  background:
    radial-gradient(70% 60% at 100% 0, var(--dusk-wine), transparent 72%),
    radial-gradient(70% 55% at 0 72%, var(--dusk-violet), transparent 72%),
    var(--dusk-base);
}
.hero {
  position: relative;
  min-height: min(88svh, 720px);
  max-width: 1240px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  align-items: center;
  gap: clamp(24px, 4vw, 72px);
  padding: 104px var(--gutter) clamp(40px, 4vw, 56px);
}
.hero__for { color: var(--dusk-accent); font-weight: 600; margin-bottom: 16px; }
h1 { font-size: clamp(2rem, 1.25rem + 2.5vw, 3.5rem); line-height: 1.35; font-weight: 800; }
:lang(de) h1 { font-size: clamp(1.875rem, 1.2rem + 2.2vw, 3.125rem); }
.hero__lede { max-width: 32em; margin-top: 1.4em; color: var(--dusk-ink); }
.hero__links { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; margin-top: 2.2em; }

.pill {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 50px; padding: 6px 28px; border: 0; border-radius: 14px;
  font-weight: 700; text-decoration: none; cursor: pointer;
  color: var(--dusk-on-accent);
  background: linear-gradient(135deg, var(--dusk-accent), var(--dusk-accent2));
  transition: opacity .15s, transform .15s var(--calm);
}
.pill:hover { opacity: .9; }
.pill:active { transform: scale(.985); }
.pill--plum { color: #fff; background: linear-gradient(135deg, #8e2f5c, #6d2a58); }
.quiet { min-height: 44px; display: inline-flex; align-items: center; text-underline-offset: 6px; text-decoration-thickness: 1px; }
.quiet:hover { text-decoration-thickness: 2px; }
.quiet-button:hover { background: #2b153012; }
.warn__thought button:hover { text-decoration: underline; text-underline-offset: 5px; }
.warn__back:not(:disabled):hover, .dl:not(.dl--soon):hover { opacity: .9; }
.brand:hover span { text-decoration: underline; text-underline-offset: 5px; }
.quiet-button {
  min-height: 52px; padding: 6px 24px; border-radius: 14px; cursor: pointer;
  background: transparent; border: 1px solid var(--rule); color: var(--dawn-ink);
}

.hero__clock { justify-self: center; width: min(100%, 300px); }
#clock { width: 100%; height: auto; }
.c-track { fill: none; stroke: #fcf1e624; stroke-width: 15; }
.c-face { fill: #fcf1e612; }
.c-ticks line { stroke: #fcf1e680; stroke-width: 2.5; stroke-linecap: round; }
.c-arc { fill: none; stroke: url(#arc); stroke-width: 15; stroke-linecap: round; }
.c-nums text { fill: var(--dusk-ink); font-family: var(--text); font-weight: 600; font-size: 25px; }
.c-hour, .c-min { stroke: var(--dusk-ink); stroke-linecap: round; }
.c-hour { stroke-width: 9; }
.c-min { stroke-width: 5.5; }
.c-pin { fill: var(--dusk-accent); }
#clockCaption { margin-top: 16px; text-align: center; color: var(--dusk-muted); font-size: .95rem; line-height: 1.7; text-wrap: balance; }

/* ---------- Preface: a quiet line between dusk and dawn ---------- */

.preface { max-width: 1240px; margin-inline: auto; padding: 0 var(--gutter) clamp(56px, 6vw, 88px); }
.preface span {
  display: block; max-width: 34em;
  font-family: var(--display); font-weight: 500; font-size: clamp(1.125rem, 1.05rem + .3vw, 1.3125rem); line-height: 1.9;
}

/* ---------- 09:00, demo ---------- */

.demo { display: grid; margin-top: 16px; }
.demo > * { grid-area: 1 / 1; min-width: 0; }
.demo[data-warn="on"] .demo__desk { visibility: hidden; }

.words { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 clamp(12px, 1.3vw, 18px); }
.word {
  background: none; border: 0; padding: 0; min-height: 44px;
  font-family: var(--display); font-weight: 600; line-height: 1.6;
  font-size: clamp(1.0625rem, 1rem + .3vw, 1.25rem);
  color: var(--dawn-ink);
  transition: opacity .9s var(--calm), color .9s var(--calm);
}
.word:disabled { cursor: default; color: var(--dawn-ink); }
[data-state="locked"] .word { cursor: pointer; }
[data-state="locked"] .word[data-kind="blocked"] { opacity: .2; }
[data-state="locked"] .word[data-kind="blocked"]:hover,
[data-state="locked"] .word[data-kind="blocked"]:focus-visible { opacity: .42; transition-duration: .2s; }
[data-state="locked"] .word[data-kind="allowed"] { color: var(--dawn-accent); }
.words li:nth-child(3n) .word { transition-delay: .12s; }
.words li:nth-child(3n + 1) .word { transition-delay: .24s; }

.demo__controls { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; margin-top: 16px; }
.demo__note { flex: 1 1 18em; max-width: 34em; color: var(--dawn-muted); min-height: 3.4em; display: flex; align-items: center; }

.kept { margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--rule); }
.kept h3 { font-size: 1rem; color: var(--dawn-muted); }
.kept li { font-weight: 550; overflow-wrap: anywhere; }

.warn {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: clamp(28px, 3.5vw, 44px) clamp(20px, 4vw, 48px);
  border-radius: 24px;
  color: var(--dusk-ink);
  background:
    radial-gradient(90% 90% at 100% 0, var(--dusk-wine), transparent 70%),
    radial-gradient(90% 90% at 0 100%, var(--dusk-violet), transparent 70%),
    var(--dusk-base);
  animation: appear .5s var(--calm);
}
.warn[hidden] { display: none; }
@keyframes appear { from { opacity: 0; } }
.warn__dot {
  width: 22px; height: 22px; margin: 10px; border-radius: 50%;
  background: var(--dusk-accent);
  box-shadow: 0 0 0 11px #fcf1e61f;
  animation: breathe 5s ease-in-out infinite;
}
@keyframes breathe { 50% { transform: scale(.72); opacity: .7; } }
.warn__quote {
  max-width: 19em; margin-top: 24px; outline: 0;
  font-family: var(--display); font-weight: 700; line-height: 1.5; text-wrap: balance;
  font-size: clamp(1.25rem, 1.1rem + .6vw, 1.625rem);
}
.warn__wait { margin-top: 14px; color: var(--dusk-muted); }
.warn__thought { width: min(100%, 40em); margin-top: 28px; text-align: start; }
.warn__thought label { display: block; font-size: .95rem; color: var(--dusk-muted); margin-bottom: 8px; }
.warn__thought div {
  display: flex; align-items: center;
  border: 1px solid #fcf1e640; border-radius: 16px; background: #fcf1e612;
}
.warn__thought input {
  flex: 1; min-width: 0; min-height: 50px; padding-inline: 18px; background: none; border: 0; outline-offset: -3px; border-radius: 16px;
}
.warn__thought input::placeholder { color: var(--dusk-muted); opacity: 1; }
.warn__thought button { min-height: 50px; padding-inline: 18px; background: none; border: 0; cursor: pointer; font-weight: 650; color: var(--dusk-accent); }
.warn__back {
  position: relative; overflow: hidden;
  min-width: min(100%, 280px); min-height: 50px; margin-top: 20px; padding: 6px 28px;
  border: 0; border-radius: 14px; font-weight: 700; cursor: pointer;
  color: var(--dusk-on-accent);
  background: linear-gradient(135deg, var(--dusk-accent), var(--dusk-accent2));
}
.warn__back:disabled { cursor: default; color: var(--dusk-ink); background: #fcf1e621; }
.warn__fill {
  position: absolute; inset: 0; transform: scaleX(0); transform-origin: left center;
  background: #fcf1e62e;
}
[dir="rtl"] .warn__fill { transform-origin: right center; }
.warn__back:not(:disabled) .warn__fill { display: none; }
#warnBackLabel { position: relative; }

/* ---------- 09:07 ---------- */

.moment--urge { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 5vw, 88px); align-items: center; padding-block-start: 0; }
.urge__copy > p:last-child { margin-top: 1.4em; color: var(--dawn-muted); max-width: 32em; }
.pause-intro { margin-top: 1.6em; font-weight: 600; }
.pauses {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px clamp(10px, 1.4vw, 20px); margin-top: 6px;
  font-family: var(--display); color: var(--dawn-accent); line-height: 1.3;
}
.pauses li { font-size: calc(1.0625rem + var(--step) * .22rem); font-weight: 750; }
.pause-unit { color: var(--dawn-muted); font-size: 1rem; }

.shot img { border-radius: 16px; }
.shot figcaption { margin-top: 14px; color: var(--muted); font-size: 1rem; }

/* ---------- 09:12 ---------- */

.moment--thought { padding-block-start: 0; }
.thought__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 28px 56px; margin-top: 28px; }
.thought__row .lead { margin-top: 0; }
.keys { display: flex; gap: 12px; }
kbd {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-width: 64px; aspect-ratio: 1;
  font-family: system-ui, -apple-system, sans-serif;
  background: #fff; color: var(--dawn-ink);
  border: 1px solid var(--rule); border-bottom-width: 4px; border-radius: 12px;
}
kbd b { font-size: 1.5rem; font-weight: 500; line-height: 1.1; }
kbd small { font-size: .75rem; color: var(--dawn-muted); }
.shot--panel { margin-top: clamp(24px, 3vw, 36px); max-width: 520px; }
.shot--panel img { border-radius: 28px;  }

/* ---------- 09:25 ---------- */

.modes {
  background:
    radial-gradient(60% 70% at 0 0, var(--dusk-violet), transparent 72%),
    var(--dusk-base);
}
.mode { margin-top: clamp(28px, 3vw, 40px); }
.mode h3 { font-family: var(--display); font-weight: 750; font-size: 1.25rem; line-height: 1.5; }
.mode > p:first-of-type { color: var(--dusk-muted); max-width: 36em; }
.bar { display: flex; gap: 2px; margin-top: 12px; height: 40px; }
.seg { display: flex; align-items: center; justify-content: center; flex-basis: 0; min-width: 0; font-weight: 650; font-size: .95rem; border-radius: 4px; }
.seg--work { color: var(--dusk-on-accent); background: linear-gradient(135deg, var(--dusk-accent), var(--dusk-accent2)); }
.seg--free { background: #fcf1e630; }
/* Hatched, so a locked break differs from a free one without relying on color. */
.seg--locked { background: repeating-linear-gradient(135deg, var(--dusk-ink) 0 2px, #fcf1e622 2px 6px); }
.mode__total { margin-top: 8px; color: var(--dusk-muted); font-size: 1rem; }
.legend { display: flex; flex-wrap: wrap; gap: 8px 28px; margin-top: 28px; font-size: .95rem; }
.legend li { display: flex; align-items: center; gap: 10px; }
.legend i { display: block; width: 26px; height: 16px; flex: none; }
.modes__note { margin-top: 10px; color: var(--dusk-muted); font-size: .95rem; }

/* ---------- 10:40 ---------- */

.oneway { margin-top: clamp(28px, 3vw, 40px); max-width: 720px; display: grid; gap: 16px; }
.oneway__line {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: clamp(14px, 2.4vw, 40px); align-items: center;
  font-family: var(--display); font-weight: 750; font-size: clamp(1.25rem, 1.1rem + .8vw, 1.75rem); line-height: 1.4;
}
.oneway__mid { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; }
.oneway__mid small { font-family: var(--text); font-weight: 500; font-size: .95rem; line-height: 1.4; color: var(--accent); text-align: center; }
.arrow { position: relative; display: block; width: 100%; height: 0; border-top: 2px solid var(--accent); }
.arrow::after {
  content: ""; position: absolute; inset-inline-end: 0; top: -8px; width: 13px; height: 13px;
  border-top: 2px solid var(--accent); border-inline-end: 2px solid var(--accent);
  transform: rotate(45deg);
}
[dir="rtl"] .arrow::after { transform: rotate(-45deg); }
.oneway__line--no { color: var(--muted); }
.oneway__line--no small { color: var(--muted); }
.oneway__line--no .arrow { border-top: 2px dashed var(--muted); }
.oneway__line--no .arrow::after { display: none; }

.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px clamp(32px, 5vw, 64px); margin-top: clamp(32px, 4vw, 48px); padding-top: 24px; border-top: 1px solid var(--rule); }
.facts dt { font-weight: 650; }
.facts dd { color: var(--muted); }

/* ---------- 11:15 ---------- */

.exit__row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 28px clamp(40px, 5vw, 72px); margin-top: clamp(24px, 3vw, 36px); }
.exit__nums { display: flex; gap: clamp(32px, 5vw, 64px); }
.exit__nums p { display: flex; flex-direction: column; }
.exit__nums b { font-family: var(--display); font-weight: 800; color: var(--dawn-accent); font-size: clamp(3rem, 2.4rem + 2vw, 4.25rem); line-height: 1.2; }
.exit__nums span { color: var(--dawn-muted); max-width: 14em; }
blockquote { font-family: var(--display); font-weight: 600; line-height: 1.6; text-wrap: balance; }
.exit blockquote { flex: 1 1 12em; max-width: 22em; font-size: clamp(1.125rem, 1.05rem + .4vw, 1.375rem); }

/* ---------- 12:30 ---------- */

.done .moment { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 88px); align-items: start; }
.done blockquote { margin-top: 1.2em; color: var(--dusk-accent); font-size: clamp(1.125rem, 1.05rem + .3vw, 1.3125rem); max-width: 24em; }
.done__themes { margin-top: 1.6em; color: var(--dusk-muted); max-width: 32em; font-size: 1rem; }
.done .shot { order: -1; }

/* ---------- Install ---------- */

.install h2 { font-size: clamp(1.875rem, 1.3rem + 1.6vw, 2.75rem); line-height: 1.3; font-weight: 800; }
.platforms { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 44px clamp(24px, 3vw, 44px); margin-top: clamp(28px, 3vw, 40px); }
.platforms article { border-top: 2px solid var(--dawn-ink); padding-top: 18px; }
.platforms h3 { font-family: var(--display); font-weight: 750; font-size: 1.5rem; line-height: 1.4; }
.req { color: var(--dawn-muted); font-size: 1rem; margin-top: 4px; }

.dl {
  display: inline-flex; align-items: center; gap: 14px;
  min-height: 50px; margin-top: 16px; padding: 6px 24px; border-radius: 14px;
  font-weight: 700; text-decoration: none; color: #fff;
  background: linear-gradient(135deg, #8e2f5c, #6d2a58);
}
.dl--soon { color: var(--dawn-muted); background: none; border: 1px dashed #2b153066; }
.dl--soon small { font-size: .95rem; font-weight: 500; color: var(--dawn-accent); }

.steps { counter-reset: step; margin-top: 22px; }
.steps li {
  counter-increment: step; position: relative;
  padding-inline-start: 2.2em; padding-block: .7em; border-top: 1px solid var(--rule);
}
.steps li::before {
  content: counter(step);
  position: absolute; inset-inline-start: 0; top: .25em;
  font-family: var(--display); font-weight: 750; font-size: 1.2em; line-height: 1.6; color: var(--dawn-accent);
}
:lang(fa) .steps { list-style: none; }
:lang(fa) .steps li::before { content: counter(step, persian); }
.path { display: block; direction: ltr; overflow-wrap: anywhere; margin-top: .25em; font-size: .94em; font-weight: 550; }
[dir="rtl"] .path { text-align: right; }
.steps b { unicode-bidi: isolate; }
.install__langs { margin-top: 28px; color: var(--dawn-muted); }

/* ---------- Foot ---------- */

.foot { padding: clamp(40px, 5vw, 64px) var(--gutter) 28px; }
.foot__line { font-family: var(--display); font-weight: 750; font-size: clamp(1.25rem, 1.1rem + .7vw, 1.625rem); line-height: 1.5; }
.foot .langs { margin-top: 24px; margin-inline-start: -10px; }

/* ---------- Latin pages ---------- */

:lang(en) h1, :lang(de) h1, :lang(en) h2, :lang(de) h2 { letter-spacing: -.02em; line-height: 1.14; }
:lang(en) .preface span, :lang(de) .preface span, :lang(en) blockquote, :lang(de) blockquote, :lang(en) .warn__quote, :lang(de) .warn__quote { line-height: 1.35; }

/* ---------- Narrow screens ---------- */

@media (max-width: 960px) {
  .hero { grid-template-columns: minmax(0, 1fr); align-items: start; padding-top: 128px; min-height: 0; }
  .hero__clock { width: min(68%, 240px); margin-top: 16px; }
  .moment--urge, .done .moment { grid-template-columns: minmax(0, 1fr); }
  .done .shot { order: 0; }
  .platforms { grid-template-columns: minmax(0, 1fr); }
  .preface span { margin-inline-start: 0; }
  .facts { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .word, .pill { transition: none; }
  .warn { animation: none; }
  .warn__dot { animation: none; }
  .warn__fill { display: none; }
}