/* Glyphy — the palette is the renderer's, so the site and the videos are
   obviously the same product. providers/board.BOARD_BG is the green, and
   trace_anim's INK, GHOST and GUIDE are the three chalk tones. */
:root {
  --board:   #1c3a32;   /* board.BOARD_BG */
  --ink:     #f5f6f0;   /* trace_anim.INK */
  --ghost:   #3a6055;   /* trace_anim.GHOST */
  --guide:   #60927f;   /* trace_anim.GUIDE */
  --amber:   #e5943d;
  --mint:    #8fd4bb;
  --page:    #111413;
  --panel:   #1a1e1c;
  --line:    #2b302e;
  --dim:     #8e9a95;
  --wrap:    1120px;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font: 16px/1.65 ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}

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

/* Every link is amber unless a component says otherwise, and underlined
   unless it is furniture. Colour alone should not be what tells somebody a
   thing is a link. */
a { color: var(--amber); text-decoration-thickness: 1px;
    text-underline-offset: 3px; }
a:hover { color: var(--ink); }

h1, h2, h3 { line-height: 1.15; letter-spacing: -0.02em; margin: 0; }
h2 { font-size: clamp(23px, 2.5vw, 30px); margin-bottom: 12px; }
h3 { font-size: 17px; margin-bottom: 6px; }
em { font-style: normal; color: var(--amber); }
p { margin: 0 0 16px; }
.wide { max-width: 64ch; color: var(--dim); font-size: 16.5px; }
.sub  { color: var(--dim); font-size: 14px; }

/* ── top bar ──────────────────────────────────────────────────────────────── */
.bar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 24px;
  max-width: var(--wrap); margin: 0 auto; padding: 16px 24px;
  background: color-mix(in srgb, var(--page) 88%, transparent);
  backdrop-filter: blur(10px);
}
.mark { display: flex; align-items: center; gap: 10px; text-decoration: none;
        color: var(--ink); font-weight: 650; letter-spacing: -0.01em; }
.mark img { width: 30px; height: 30px; display: block; }
.bar nav { margin-left: auto; display: flex; align-items: center; gap: 22px; }
.bar nav a { color: var(--dim); text-decoration: none; font-size: 15px; }
.bar nav a:hover { color: var(--ink); }
.bar nav a.cta { color: var(--page); background: var(--amber);
                 padding: 8px 15px; border-radius: 999px; font-weight: 600; }
.bar nav a.cta:hover { filter: brightness(1.08); }
@media (max-width: 720px) { .bar nav a:not(.cta) { display: none; } }

/* ── hero: the copy, and a board that writes itself ───────────────────────────
   The board used to lie behind the words and stay blank until a cursor crossed
   it — nothing on a phone, and a scribble everywhere else, which argues against
   the page's own point about stroke order. It is now a panel of its own,
   writing real letters in real stroke order, and the headline never sits on
   top of it. */
.hero { display: grid; align-items: center; gap: clamp(26px, 4vw, 54px);
        grid-template-columns: minmax(0, 1.04fr) minmax(0, 0.96fr);
        background: var(--board); border-radius: 20px; overflow: hidden;
        width: calc(100% - 48px); max-width: var(--wrap); margin: 0 auto;
        padding: clamp(38px, 5.5vw, 68px) clamp(24px, 4vw, 56px); }
@media (max-width: 880px) { .hero { grid-template-columns: 1fr; } }

.eyebrow { font: 600 12px/1 ui-monospace, monospace; letter-spacing: 0.16em;
           text-transform: uppercase; color: var(--guide); margin-bottom: 20px; }
.hero h1 { font-size: clamp(30px, 3.4vw, 42px); font-weight: 700; }
.hero .lede { margin-top: 18px; font-size: clamp(15.5px, 1.2vw, 17px);
              color: #cfe0d8; max-width: 46ch; }
.hero .lede em { color: var(--ink); font-style: italic; }

.hero-board { margin: 0; border-radius: 16px; overflow: hidden;
              border: 1px solid var(--ghost);
              background: color-mix(in srgb, #000 15%, var(--board)); }
/* pan-y, not none: a swipe that lands here is nearly always someone scrolling
   past the hero, and taking it to draw with strands them on the first screen. */
#board { display: block; width: 100%; aspect-ratio: 4 / 3; touch-action: pan-y; }
.hero-board figcaption { display: flex; align-items: baseline; gap: 10px;
                         min-height: 46px; padding: 11px 15px 13px;
                         border-top: 1px solid var(--ghost);
                         color: var(--guide); font-size: 13.5px; }
.hero-board figcaption b { font-size: 19px; line-height: 1; font-weight: 600;
                           color: var(--ink); }

.row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }
.btn { display: inline-block; padding: 12px 22px; border-radius: 999px;
       border: 1px solid var(--guide); color: var(--ink); text-decoration: none;
       font-size: 15px; font-weight: 550; }
.btn:hover { border-color: var(--ink); }
.btn.primary { background: var(--amber); border-color: var(--amber); color: #14100a; }
.btn.primary:hover { filter: brightness(1.08); }

/* ── numbers strip ────────────────────────────────────────────────────────── */
.strip { padding: 44px 0 8px; }
.counts { display: grid; gap: 18px;
          grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.counts div { border-left: 2px solid var(--line); padding-left: 14px; }
.counts b { display: block; font-size: 26px; font-weight: 700;
            font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.counts span { display: block; color: var(--dim); font-size: 14px; }
/* The gloss. "429 barakhadi forms" means nothing to a parent in Toronto, and
   this page is read by more of them than by anyone else. */
.counts i { display: block; margin-top: 1px; font-style: normal;
            font-size: 12.5px; color: var(--guide); }

/* ── blocks ───────────────────────────────────────────────────────────────── */
.block { padding: 68px 24px; }
.cards { display: grid; gap: 16px; margin-top: 34px;
         grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.cards article { background: var(--panel); border: 1px solid var(--line);
                 border-radius: 14px; padding: 24px; }
.cards .n { display: inline-flex; align-items: center; justify-content: center;
            width: 30px; height: 30px; border-radius: 50%;
            background: var(--board); color: var(--amber);
            font: 700 15px ui-monospace, monospace; margin-bottom: 14px; }
.cards p { color: var(--dim); font-size: 15px; margin: 0; }

.two { display: grid; gap: 30px 40px; margin-top: 30px;
       grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.two p { color: var(--dim); font-size: 15px; margin: 0; }

/* ── the glyph grid, on its own board ─────────────────────────────────────── */
/* Capped like the rest of the page. Full-bleed colour is ordinary; full-bleed
   text is not, and a rounded card that runs to both edges of a 27-inch monitor
   has stopped being a card. */
.board-section { background: var(--board); padding: 76px 0; border-radius: 20px;
                 width: calc(100% - 48px); max-width: var(--wrap); margin: 0 auto; }
.board-section .wrap { padding-inline: clamp(24px, 4vw, 56px); }
.board-section .wide { color: #b9cfc6; }
/* The method section's text runs the full width of the page. */
#how .wide { max-width: none; }
.board-section .sub { color: var(--guide); }
.glyphgrid { margin: 30px 0 20px; }
.glyphrow + .glyphrow { margin-top: 26px; }
.glyphrow h3 { margin: 0 0 10px; font: 600 12.5px/1 ui-monospace, monospace;
               letter-spacing: 0.14em; text-transform: uppercase;
               color: var(--guide); }
/* auto-FILL, not auto-fit: empty tracks are kept, so a row of two Devanagari
   letters shows two tiles the size of the seven English ones rather than two
   stretched across the whole width. */
.glyphstrip { display: grid; gap: 12px;
              grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); }
.tile { position: relative; display: block; padding: 0; cursor: pointer;
        background: color-mix(in srgb, #000 14%, var(--board));
        border: 1px solid #2f5548; border-radius: 14px; overflow: hidden;
        font: inherit; color: inherit; }
.tile:hover, .tile:focus-visible { border-color: var(--amber); outline: none; }
.tile svg { display: block; width: 100%; aspect-ratio: 1; }
.tile .ghost { fill: none; stroke: var(--ghost); stroke-linecap: round;
               stroke-linejoin: round; }
.tile .live  { fill: none; stroke: var(--ink); stroke-linecap: round;
               stroke-linejoin: round; }
.tile figcaption { display: flex; justify-content: space-between; gap: 8px;
                   padding: 9px 12px 11px; font-size: 13px; color: var(--guide);
                   border-top: 1px solid #2f5548; }
.tile figcaption i { font-style: normal; color: var(--amber); }

/* ── chips, footer ────────────────────────────────────────────────────────── */
.chips { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 26px; }
.chip { display: inline-flex; gap: 7px; padding: 11px 18px; border-radius: 999px;
        background: var(--panel); border: 1px solid var(--line);
        color: var(--ink); text-decoration: none; font-size: 15px; }
.chip i { font-style: normal; color: var(--amber); }
.chip:hover { border-color: var(--amber); }

.get { text-align: center; }
.get .wide { margin-inline: auto; }
.get .row { justify-content: center; }
.get .sub { margin-top: 20px; }
/* Watch and Practise side by side: the two ways in, one card each. */
.get .ways { max-width: 860px; margin-inline: auto; }
.get .ways article { display: flex; flex-direction: column; }
.get .ways p { flex: 1; }
.get .ways .row { margin-top: 18px; flex-wrap: wrap; }

footer { border-top: 1px solid var(--line); margin-top: 40px; padding: 26px 0 50px; }
.foot { display: flex; gap: 20px; flex-wrap: wrap; align-items: center;
        color: var(--dim); font-size: 14.5px; }
.foot nav { margin-left: auto; display: flex; gap: 18px; }
.foot a { color: var(--dim); text-decoration: none; }
.foot a:hover { color: var(--ink); }

/* ── the tuning panel, at #tune ─────────────────────────────────────────────
   Deliberately plain. It is a workbench for finding numbers by eye, not part
   of the page, and it is hidden unless the URL asks for it. */
#tuner[hidden] { display: none; }
.tunegrid { display: grid; gap: 10px; max-width: 640px; margin-top: 22px; }
.tunegrid h3 { margin: 16px 0 2px; color: var(--guide);
               font: 600 12px/1 ui-monospace, monospace;
               letter-spacing: 0.14em; text-transform: uppercase; }
.tunerow { display: grid; align-items: center; gap: 4px 12px;
           grid-template-columns: 130px 1fr 82px; }
.tunerow b { font: 13px ui-monospace, monospace; color: var(--ink); }
.tunerow span { grid-column: 1 / -1; grid-row: 2; font-size: 12.5px;
                color: var(--dim); }
.tunerow input[type=range] { width: 100%; accent-color: var(--amber); }
.tunerow input[type=number] { background: #1f2422; color: var(--ink);
                              border: 1px solid var(--line); border-radius: 6px;
                              padding: 5px 7px; font: 13px ui-monospace, monospace; }
.tuneout { margin-top: 20px; padding: 14px 16px; background: var(--panel);
           border: 1px solid var(--line); border-radius: 10px; overflow-x: auto;
           font: 12.5px/1.6 ui-monospace, monospace; color: var(--mint); }
@media (max-width: 620px) { .tunerow { grid-template-columns: 110px 1fr 70px; } }
.tunehead { margin: 26px 0 4px; color: var(--ink); font-size: 15px; }
.tunepick { display: grid; gap: 10px; max-width: 640px; margin-top: 12px; }
.pickrow { grid-template-columns: 110px 1fr 58px; align-items: start; }
.pickbag { display: flex; flex-wrap: wrap; gap: 6px; }
.pickone { min-width: 30px; padding: 5px 7px; cursor: pointer;
           background: #1f2422; color: var(--dim);
           border: 1px solid var(--line); border-radius: 6px; font-size: 14px; }
.pickone:hover { border-color: var(--guide); color: var(--ink); }
.pickone.on { background: var(--board); border-color: var(--mint); color: var(--ink); }
/* Amber means it will have to be shrunk to fit — the one thing the row is
   meant not to do, so it is marked rather than silently allowed. */
.pickone.tight { border-color: var(--amber); color: var(--amber); }
.pickclear { padding: 5px 8px; cursor: pointer; background: transparent;
             color: var(--dim); border: 1px solid var(--line);
             border-radius: 6px; font-size: 12.5px; }
.pickclear:hover { color: var(--ink); border-color: var(--guide); }
#tunereset { padding: 6px 13px; font-size: 13px; }
.pickrow { grid-template-rows: auto auto; }
.pickline { grid-column: 2 / -1; width: 100%; margin-top: 6px;
            background: #1f2422; color: var(--ink);
            border: 1px solid var(--line); border-radius: 6px;
            padding: 6px 8px; font: 14px ui-monospace, monospace; }
.pickline:focus { outline: none; border-color: var(--guide); }
.warnsaved { margin-top: 14px; padding: 10px 12px; border-radius: 8px;
             background: #33261a; color: var(--amber); }
.warnsaved[hidden] { display: none; }
.foot.social { margin-top: 10px; font-size: 13.5px; }
.foot.social nav { gap: 16px; flex-wrap: wrap; }
/* The legal pages: one column, read rather than scanned. */
.legal h2 { margin-top: 34px; }
.legal ul { max-width: 64ch; color: var(--dim); font-size: 16.5px;
            padding-left: 20px; }
.legal li { margin-bottom: 6px; }
.legal .lede { font-size: 18px; color: var(--ink); max-width: 64ch; }

/* ── the odds and ends ──────────────────────────────────────────────────── */

/* Off screen until it is focused, which is the only time it is wanted: the
   first Tab on the page should be a way past the navigation. */
.skip { position: absolute; left: -9999px; top: 0; z-index: 50;
        background: var(--amber); color: #14100a; font-weight: 600;
        padding: 10px 16px; border-radius: 0 0 8px 0; text-decoration: none; }
.skip:focus { left: 0; }

/* A button that is not a link yet. It must not look pressable, because there
   is nothing behind it until the app is out. */
.btn.soon { cursor: default; opacity: .62; border-style: dashed;
            background: none; color: var(--ink); border-color: var(--guide); }
.btn.soon i { font-style: normal; color: var(--guide); font-size: 13px;
              margin-left: 6px; text-transform: uppercase; letter-spacing: .1em; }

.faq { max-width: 74ch; margin-top: 26px; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; padding: 15px 0; list-style: none;
               display: flex; align-items: baseline; gap: 12px; }
/* The question IS a heading — it is how the page is structured and how anybody
   navigating by heading will move through it. It just should not look like one
   more than the answer needs. */
.faq summary h2 { font-size: 16.5px; font-weight: 550; color: var(--ink);
                  margin: 0; letter-spacing: normal; line-height: 1.45; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before { content: "+"; color: var(--amber); font-weight: 700;
                       font-size: 17px; line-height: 1; width: 12px; flex: none; }
.faq details[open] summary::before { content: "\2212"; }
.faq summary:hover { color: var(--amber); }
.faq p { margin: 0 0 18px 24px; color: var(--dim); font-size: 15.5px;
         max-width: 64ch; }

.lost { text-align: center; padding-block: clamp(70px, 14vh, 150px); }
.lost h1 { font-size: clamp(28px, 3.2vw, 40px); margin-bottom: 14px; }
.lost .lede { color: var(--dim); max-width: 46ch; margin: 0 auto 6px; }
.lost .row { justify-content: center; }

/* ── the social row, and the line under it ──────────────────────────────── */

/* The sprite is markup, not a picture: it defines the symbols and draws
   nothing itself. */
.sprite { display: none; }
.social-row { margin-top: 14px; align-items: center; }
.social-row nav { margin-left: 0; gap: 14px; }
.social { display: inline-flex; color: var(--dim); }
.social svg { fill: currentColor; display: block; }
.social:hover, .social:focus-visible { color: var(--amber); }
/* The icons sit left, the legal line right. One row, because the row of page
   links that used to sit above them repeated the navigation at the top of every
   page and earned nothing. */
.foot-legal { margin: 0 0 0 auto; display: flex; align-items: baseline;
              gap: 14px; color: var(--dim); font-size: 13px; }
.foot-legal small { font-size: inherit; }
@media (max-width: 560px) {
  .foot-legal { margin-left: 0; width: 100%; margin-top: 12px; }
}

/* Two doors to the pages that used to be sections here. */
.twoup { display: grid; gap: 16px;
         grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.card-link { display: block; text-decoration: none; padding: 22px 24px;
             background: var(--panel); border: 1px solid var(--line);
             border-radius: 14px; color: inherit; }
.card-link:hover { border-color: var(--amber); }
.card-link h3 { color: var(--ink); margin-bottom: 8px; }
.card-link p { color: var(--dim); font-size: 15px; margin: 0; max-width: 46ch; }

.drawnote { margin-top: 24px; color: #b9cfc6; }
.drawnote em { color: var(--amber); font-style: normal; }

/* Furniture, not prose: these are controls and carry their own colour. */
.bar nav a, .foot a, .btn, .chip, .card-link, .social, .mark, .skip { text-decoration: none; }
.card-link:hover h3 { color: var(--amber); }