/* The site's layout and type, by role. Colours come only from theme.css
   (Negar's, generated): no colour is written here, only roles, pigments and
   mixes of them. Sizes, corners and motion are Kaman's Tokens
   (ArashOS shell/kaman/Tokens.qml), and the site's larger steps beside
   them. Logical properties (inline, block) throughout, so Persian pages can
   turn the layout right to left without redoing it (D-11.3.6). */

/* ── Fonts: served from the site, cut by scripts/cut-fonts.sh ─────────── */

@font-face {
  font-family: "IBM Plex Sans";
  src: url("../fonts/ibm-plex-sans.woff2") format("woff2");
  font-weight: 400 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("../fonts/cormorant-garamond.woff2") format("woff2");
  font-weight: 400 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("../fonts/cormorant-garamond-italic.woff2") format("woff2");
  font-weight: 400 600; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Vazirmatn";
  src: url("../fonts/vazirmatn.woff2") format("woff2");
  font-weight: 400 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Noto Nastaliq Urdu";
  src: url("../fonts/noto-nastaliq-urdu.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Cascadia Mono";
  src: url("../fonts/cascadia-mono.woff2") format("woff2");
  font-weight: 400 600; font-style: normal; font-display: swap;
}

/* ── Tokens ─────────────────────────────────────────────────────────── */

:root {
  /* Kaman's space, corners and rules. */
  --space-xs: 4px; --space-s: 8px; --space-m: 12px; --space-l: 16px;
  --space-xl: 24px; --space-xxl: 32px; --space-xxxl: 48px;
  --radius-control: 4px; --radius-card: 6px; --radius-full: 1000px;
  --rule: 1px;
  /* The site's larger steps. */
  --space-scene: clamp(64px, 12vh, 128px);
  --measure: 40rem;
  --page: 72rem;
  /* Kaman's curves and durations: the arrow's flight is the default. */
  --ease-arrow: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-bowstring: cubic-bezier(0.65, 0.05, 0.36, 1);
  --duration-state: 80ms;
  --duration-control: 140ms;
  --duration-popup: 220ms;
  /* Kaman's families. */
  --font-ui: "IBM Plex Sans", system-ui, sans-serif;
  --font-display: "Cormorant Garamond", Georgia, serif;
  --font-persian: "Vazirmatn", system-ui, sans-serif;
  --font-nastaliq: "Noto Nastaliq Urdu", "Vazirmatn", serif;
  --font-mono: "Cascadia Mono", ui-monospace, monospace;
  /* Gold for rules and ornament: the pigment, on both themes. */
  --gold: var(--pigment-zar);
}

@media (prefers-reduced-motion: reduce) {
  :root { --duration-state: 0s; --duration-control: 0s; --duration-popup: 0s; }
}

/* ── Base ───────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column;
  background: var(--background); color: var(--on-surface);
  font: 400 17px/1.6 var(--font-ui);
  overflow-x: clip;
}
main { flex: 1; }
:lang(fa) { font-family: var(--font-persian); }
img, svg { max-inline-size: 100%; }

a { color: var(--primary); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--secondary); outline-offset: 2px; border-radius: var(--radius-control); }

h1, h2, h3 {
  font-family: var(--font-display); font-weight: 500; color: var(--on-surface); text-wrap: balance;
  /* Cormorant's figures are old-style; a release number reads better level. */
  font-variant-numeric: lining-nums;
}
h1 { font-size: clamp(44px, 7vw, 76px); line-height: 1; margin: 0 0 var(--space-xl); letter-spacing: 0.01em; }
h2 { font-size: clamp(30px, 4vw, 42px); line-height: 1.1; margin: var(--space-xxxl) 0 var(--space-l); }
h3 { font-size: 24px; line-height: 1.2; margin: var(--space-xxl) 0 var(--space-s); }
p, ul, ol { margin: 0 0 var(--space-l); }
li + li { margin-block-start: var(--space-s); }
strong { font-weight: 600; }

code, kbd, pre { font-family: var(--font-mono); font-size: 0.88em; }
:not(pre) > code {
  padding: 0.1em 0.35em; border-radius: var(--radius-control);
  background: var(--surface-container-high); color: var(--on-surface);
  overflow-wrap: anywhere;
}
pre {
  margin: 0 0 var(--space-l); padding: var(--space-l);
  border-radius: var(--radius-card); border: var(--rule) solid var(--outline-variant);
  background: var(--surface-container-low); color: var(--on-surface);
  overflow-x: auto; line-height: 1.5;
  scrollbar-color: var(--outline) transparent;
}
/* One click selects a whole command (no Copy button: D-11.3.9). */
pre code { user-select: all; }

.skip {
  position: absolute; inset-inline-start: var(--space-l); inset-block-start: -100px;
  z-index: 20; padding: var(--space-s) var(--space-l); border-radius: var(--radius-control);
  background: var(--primary); color: var(--on-primary); font-weight: 600;
}
.skip:focus { inset-block-start: var(--space-l); }

.eyebrow {
  font: 600 13px/1.2 var(--font-ui); letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--primary); margin: 0 0 var(--space-l);
}
.lead { font-size: clamp(18px, 1.8vw, 21px); color: var(--on-surface-variant); }
.fine { font-size: 14px; color: var(--on-surface-variant); }

/* ── The header ─────────────────────────────────────────────────────── */

.site-header {
  position: relative; z-index: 5;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--space-s) var(--space-xl);
  max-inline-size: var(--page); margin-inline: auto; inline-size: 100%;
  padding: var(--space-l);
}
.brand {
  display: inline-flex; align-items: center; gap: var(--space-s);
  color: var(--on-surface); text-decoration: none;
  font: 600 22px/1 var(--font-display); letter-spacing: 0.04em;
}
.brand svg { inline-size: 32px; block-size: 32px; color: var(--gold); flex: none; }
.site-nav ul { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin: 0; padding: 0; list-style: none; }
.site-nav li + li { margin: 0; }
.site-nav a {
  display: block; padding: var(--space-s) var(--space-m); border-radius: var(--radius-full);
  color: var(--on-surface-variant); text-decoration: none; font-weight: 500; font-size: 15px;
  transition: background var(--duration-control) var(--ease-arrow), color var(--duration-control) var(--ease-arrow);
}
.site-nav a:hover { background: color-mix(in oklab, var(--on-surface) 8%, transparent); color: var(--on-surface); }
.site-nav a[aria-current="page"] { background: var(--secondary-container); color: var(--on-secondary-container); }

/* ── Buttons ────────────────────────────────────────────────────────── */

.actions { display: flex; flex-wrap: wrap; gap: var(--space-m); align-items: center; }
.button {
  display: inline-flex; align-items: center; gap: var(--space-s);
  padding: var(--space-m) var(--space-xl); border-radius: var(--radius-card);
  font: 600 16px/1.2 var(--font-ui); text-decoration: none;
  transition: background var(--duration-control) var(--ease-arrow),
              box-shadow var(--duration-control) var(--ease-arrow);
}
.button.primary {
  background: var(--primary); color: var(--on-primary);
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--primary) 60%, transparent),
              0 8px 32px -8px color-mix(in oklab, var(--gold) 70%, transparent);
}
.button.primary:hover { background: color-mix(in oklab, var(--primary) 88%, var(--on-primary)); }
.button.quiet { color: var(--on-surface); border: var(--rule) solid var(--outline); }
.button.quiet:hover { background: color-mix(in oklab, var(--on-surface) 8%, transparent); }
.button svg { inline-size: 20px; block-size: 20px; flex: none; }
.download-action + .fine { margin-block-start: var(--space-m); }

/* ── A page of words ────────────────────────────────────────────────── */

.page {
  max-inline-size: calc(var(--measure) + 2 * var(--space-l));
  margin-inline: auto; padding: var(--space-xxl) var(--space-l) var(--space-scene);
}
.page.wide { max-inline-size: calc(var(--page) + 2 * var(--space-l)); }
.page-head { margin-block-end: var(--space-xxxl); }
.page-head .lead { margin: 0; max-inline-size: var(--measure); }

/* A khatam rule under a page's title: gold, framing, never behind text. */
.rule {
  display: block; inline-size: 100%; block-size: 24px; margin-block: var(--space-xl) 0;
  background: var(--gold); opacity: 0.8;
  mask: url("../img/khatam.svg") repeat-x left center / auto 24px;
}

/* A card: something to read before acting. */
.card {
  padding: var(--space-xl); border-radius: var(--radius-card);
  background: var(--surface-container-low); border: var(--rule) solid var(--outline-variant);
  margin-block-end: var(--space-xl);
}
.card > :last-child { margin-block-end: 0; }
.card h2, .card h3 { margin-block-start: 0; }
.card.warn { border-inline-start: 3px solid var(--primary); }

/* Facts in two columns: what and how much. */
.facts { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-s) var(--space-xl); margin: 0 0 var(--space-xl); }
.facts dt { color: var(--on-surface-variant); }
.facts dd { margin: 0; }
@media (max-width: 30rem) {
  .card { padding: var(--space-l); }
  .card ul { padding-inline-start: var(--space-l); }
  .facts { grid-template-columns: 1fr; gap: 0; }
  .facts dd + dt { margin-block-start: var(--space-m); }
}

/* A page's sections, listed under its title. */
.contents { margin-block-end: var(--space-xxl); }
.contents ol { display: flex; flex-wrap: wrap; gap: var(--space-s) var(--space-xl); list-style: none; padding: 0; margin: 0; }
.contents li + li { margin: 0; }

/* Numbered steps. */
.steps { counter-reset: step; list-style: none; padding: 0; }
.steps > li { counter-increment: step; position: relative; padding-inline-start: var(--space-xxxl); }
.steps > li + li { margin-block-start: var(--space-xl); }
.steps > li::before {
  content: counter(step); position: absolute; inset-inline-start: 0; inset-block-start: 0;
  inline-size: 32px; block-size: 32px; border-radius: 50%; display: grid; place-items: center;
  border: var(--rule) solid var(--gold); color: var(--primary);
  font: 600 15px/1 var(--font-ui);
}
.steps h3 { margin-block-start: 0; font-size: 22px; }

/* A long value (a checksum, a fingerprint) that must wrap, not overflow. */
.value {
  display: block; font-family: var(--font-mono); font-size: 14px; line-height: 1.5;
  /* Break anywhere, in even lines, so no line holds one stray character. */
  word-break: break-all; text-wrap: balance; user-select: all;
  padding: var(--space-m) var(--space-l); border-radius: var(--radius-card);
  background: var(--surface-container-low); border: var(--rule) solid var(--outline-variant);
  margin: 0 0 var(--space-l);
}

/* A screenshot (templates/partials/shot.html): framed like Kaman's windows,
   a hairline of gold and a soft shadow, at its own 16:10. Pressed, it
   opens full size in a popover. */
.shot { margin: 0; display: grid; gap: var(--space-s); min-inline-size: 0; }
.shot-open {
  display: block; padding: 0; border: 0; background: none; cursor: zoom-in;
  border-radius: var(--radius-card);
}
.shot img {
  display: block; inline-size: 100%; block-size: auto; aspect-ratio: 16 / 10;
  border-radius: var(--radius-card); background: var(--surface-container-low);
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--gold) 25%, transparent),
              0 24px 64px -24px light-dark(color-mix(in oklab, var(--pigment-morakkab) 35%, transparent), var(--shadow));
  transition: box-shadow var(--duration-control) var(--ease-arrow);
}
.shot-open:hover img { box-shadow: 0 0 0 1px var(--gold),
  0 24px 64px -24px light-dark(color-mix(in oklab, var(--pigment-morakkab) 35%, transparent), var(--shadow)); }
.shot figcaption { font-size: 12px; color: var(--on-surface-variant); }
.shot figcaption cite { font-style: italic; }

/* Full size: the picture as wide as the window allows, over the page
   dimmed; Close at its top corner. */
.shot-full {
  padding: 0; border: 0; background: none; overflow: visible;
  inline-size: min(96vw, calc(94vh * 16 / 10)); max-inline-size: none; max-block-size: none;
}
.shot-full img { box-shadow: 0 0 0 1px var(--gold), 0 24px 96px -16px var(--shadow); cursor: default; }
.shot-full::backdrop { background: color-mix(in oklab, var(--background) 82%, transparent); }
.shot-close {
  position: absolute; inset-block-start: var(--space-s); inset-inline-end: var(--space-s);
  min-block-size: 44px; min-inline-size: 44px;
  font: inherit; font-size: 14px; color: var(--on-surface); cursor: pointer;
  padding: var(--space-xs) var(--space-m); border-radius: var(--radius-control);
  background: var(--surface-container-high); border: var(--rule) solid var(--outline);
}
.shot-close:hover { border-color: var(--gold); }

/* Read by screen readers, not shown. */
.sr {
  position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* The release's own notes, as published. */
.notes h2 { font-size: 30px; margin-block-start: var(--space-xxl); }

/* A list of releases. */
.release-list { list-style: none; padding: 0; }
.release-list li { display: flex; flex-wrap: wrap; gap: var(--space-s) var(--space-l); align-items: baseline;
  padding-block: var(--space-m); border-block-end: var(--rule) solid var(--outline-variant); margin: 0; }
.release-list a { font: 500 24px/1.2 var(--font-display); }

/* ── The footer ─────────────────────────────────────────────────────── */

.site-footer {
  background: var(--surface-container-lowest);
  border-block-start: var(--rule) solid var(--outline-variant);
  padding: var(--space-xxxl) var(--space-l) var(--space-xxl);
  color: var(--on-surface-variant); font-size: 15px;
}
.site-footer .inner { max-inline-size: var(--page); margin-inline: auto; display: grid; gap: var(--space-xl); }
.verse { text-align: center; margin: 0; }
.verse .fa { display: block; font: 400 28px/2.2 var(--font-nastaliq); color: var(--primary); }
.verse .en { display: block; font: italic 400 19px/1.4 var(--font-display); }
.site-footer nav ul { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-s) var(--space-xl); list-style: none; margin: 0; padding: 0; }
.site-footer nav li + li { margin: 0; }
.site-footer a { color: var(--on-surface); }
.site-footer .small { text-align: center; margin: 0; font-size: 13px; }

/* ── Not found ──────────────────────────────────────────────────────── */

.lost { text-align: center; padding-block: var(--space-scene); }
.lost h1 { margin-block-end: var(--space-l); }