/* Rasm — the site.

   Same palette, same typeface and same rules as the app: D2 pastel ink on
   dark, Inter 400 only, nothing rounded, no gradient, and the letterform is
   the highest-contrast thing on any screen it appears on.

   ZERO THIRD-PARTY REQUESTS, and that is not a performance decision. This site
   exists largely to host the claim that nothing the app does leaves your
   phone; loading a webfont from Google would send every visitor's address to
   Google on the page making that claim. Inter is served from this origin. No
   analytics, no tag manager, no embeds, no cookies — and therefore no cookie
   banner, because there is nothing to ask about. */

@font-face {
  font-family: 'Inter';
  src: url('assets/inter.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}

:root {
  --ground: #16181C;
  --ground2: #1A1D22;
  --rule: #2A2E34;
  --text: #9BA0A5;
  --muted: #7E838A;
  --ink: #C4DAD2;
  --ink-dim: #657D78;
  --harakat: #B98B58;

  --inset: 24px;
  --measure: 42rem;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--text);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.65;
  letter-spacing: 0.015em;
  -webkit-font-smoothing: antialiased;
}

.wrap {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 0 var(--inset);
}

/* ---- type ------------------------------------------------------------- */

h1, h2, h3 { font-weight: 400; color: var(--ink); margin: 0; line-height: 1.2; }
h1 { font-size: 2rem; letter-spacing: 0.01em; }
h2 { font-size: 1.4rem; }
h3 { font-size: 1.05rem; color: var(--text); }

p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--rule); }
a:hover { border-bottom-color: var(--ink); }

.label {
  font-size: 0.75rem;
  color: var(--muted);
  letter-spacing: 0.06em;
  margin: 0 0 0.5rem;
}
.lede { font-size: 1.15rem; color: var(--text); }
.quiet { color: var(--muted); font-size: 0.9rem; }

/* ---- chrome ----------------------------------------------------------- */

header.top {
  border-bottom: 1px solid var(--rule);
  padding: 1.25rem 0;
}
header.top .wrap { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
header.top .name { color: var(--ink); font-size: 1.25rem; border: 0; }
header.top nav { display: flex; gap: 1.25rem; font-size: 0.9rem; }
header.top nav a { color: var(--muted); border: 0; }
header.top nav a:hover { color: var(--ink); }

footer.bottom {
  border-top: 1px solid var(--rule);
  margin-top: 5rem;
  padding: 2rem 0 4rem;
}
footer.bottom .wrap { display: flex; flex-wrap: wrap; gap: 1.25rem; justify-content: space-between; }
footer.bottom a { color: var(--muted); border: 0; font-size: 0.9rem; }
footer.bottom a:hover { color: var(--ink); }

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

section { padding: 4rem 0; border-top: 1px solid var(--rule); }
section:first-of-type { border-top: 0; }
section > .wrap > * + * { margin-top: 1rem; }

.hero { padding: 5rem 0 4rem; text-align: left; }
.hero .mark { width: 100%; max-width: 260px; display: block; margin: 0 0 2.5rem; }
.hero h1 { font-size: 2.4rem; }

/* A figure made of real letterforms. The stage colour is the drill's. */
figure {
  margin: 2rem 0 0;
  background: var(--ground2);
  padding: 2rem var(--inset);
}
figure img { display: block; width: 100%; height: auto; }
figcaption { margin-top: 1rem; color: var(--muted); font-size: 0.85rem; }

/* Three panels of one comparison. The 1px gap IS the rule between them —
   the grid's own background shows through, so there is no border to keep on
   the right side of the last cell. */
.triptych { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--rule); }
.triptych > div { background: var(--ground2); padding: 1.5rem 1rem; text-align: center; }
/* These are <img>, not inline <svg>. The rule used to say `svg` and therefore
   matched nothing, which let every panel render at the file's intrinsic size.
   The height is capped rather than the width because the three share one
   window: cap the height and the skeleton is identical in all three, which is
   the entire claim the figure is making. */
.triptych img { display: block; width: 100%; height: auto; max-height: 104px; object-fit: contain; }
.triptych span { display: block; margin-top: 0.75rem; color: var(--muted); font-size: 0.75rem; }

/* A question and its answer are ONE thing. Left as a bare run of h3 + p they
   inherited the same colour, near enough the same size and exactly the same
   spacing as each other, so seven questions and seven answers read as fourteen
   equal paragraphs. The hairline groups the pair and the ink separates the
   question — the same two devices the app uses for a list, and no new ones. */
.qa { border-top: 1px solid var(--rule); padding-top: 1.25rem; }
.qa h3 { color: var(--ink); margin-bottom: 0.35rem; }
.qa:last-of-type { border-bottom: 1px solid var(--rule); padding-bottom: 1.25rem; }

.facts { list-style: none; padding: 0; margin: 1.5rem 0 0; }
.facts li { padding: 0.75rem 0; border-top: 1px solid var(--rule); }
.facts li:last-child { border-bottom: 1px solid var(--rule); }

/* An action is a word on a rule. There are no buttons in the app either. */
.action {
  display: inline-block;
  margin-top: 2rem;
  padding: 0.75rem 0;
  color: var(--ink);
  font-size: 1.05rem;
  border: 0;
  border-bottom: 1px solid var(--ink);
}
.action.pending { color: var(--muted); border-bottom-color: var(--rule); }

/* A line that trails a figure or a list rather than opening a paragraph run.
   Here so that no element on this site carries a style attribute of its own —
   same reason src/ui/tokens.ts is the only file in the app allowed to hold a
   number like this. */
.note { margin-top: 1.5rem; }

@media (max-width: 34rem) {
  .hero h1 { font-size: 1.9rem; }
  .triptych { grid-template-columns: 1fr; }
  section { padding: 3rem 0; }
}

/* Nothing on this site moves. Declared anyway, so that stays true. */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}