/* twocents design system, v1.
 *
 * One file, three parts, in this order:
 *   1. TOKENS      every colour, size and space on the site, as custom properties
 *   2. BASE        what plain HTML looks like on a page built on the system
 *   3. COMPONENTS  .tc-* classes, the only shapes a page should need
 *
 * Rules (DESIGN.md has the long form, /system/ shows every piece live):
 *   - Off-white, black, one red. Red marks the one thing that matters on a
 *     screen (current nav item, a "ready" pill, a hover); it is never a fill
 *     for large areas or body text.
 *   - Geist for words, Geist Mono for labels, numbers, commands and metadata.
 *   - Pictures are drawn by code (public/js/covers.js) from tokens, so they
 *     follow the theme. No stock images.
 *   - Need something new? Add a token or a .tc-* component here and show it on
 *     /system/ in the same change. Don't hand-pick a colour or size in a page.
 *
 * Every class is prefixed .tc- so this file can load on any page, including the
 * older pages that have their own .card/.grid/.pill, without touching them.
 * Theme: follows the OS; <html data-theme="light|dark"> pins it.
 */

/* 1. TOKENS ------------------------------------------------------------------ */
:root {
  /* colour */
  --tc-bg: #fafaf7;     /* page */
  --tc-card: #ffffff;   /* raised surface: cards, covers, panels */
  --tc-soft: #efeee8;   /* sunken surface: code, inputs, chips */
  --tc-ink: #141413;    /* headings, primary text */
  --tc-ink-2: #3d3d38;  /* body copy on long pages */
  --tc-muted: #6b6b64;  /* secondary text; 5.3:1 on --tc-bg, passes AA */
  --tc-rule: #e4e4de;   /* hairlines and borders */
  --tc-red: #e2432a;    /* the one accent */
  --tc-on-red: #ffffff; /* text on a red fill */

  /* type */
  --tc-sans: Geist, "Helvetica Neue", Arial, sans-serif;
  --tc-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --tc-t-display: 600 clamp(40px, 6vw, 72px)/1 var(--tc-sans);    /* section page title */
  --tc-t-h1: 600 clamp(34px, 4.6vw, 56px)/1.04 var(--tc-sans);     /* page title */
  --tc-t-h2: 600 26px/1.2 var(--tc-sans);                          /* section heading */
  --tc-t-h3: 600 18px/1.3 var(--tc-sans);                          /* card title */
  --tc-t-lede: 400 19px/1.5 var(--tc-sans);                        /* subtitle under a title */
  --tc-t-body: 400 16px/1.55 var(--tc-sans);
  --tc-t-read: 400 17px/1.65 var(--tc-sans);                       /* long-form reading */
  --tc-t-small: 400 14px/1.5 var(--tc-sans);
  --tc-t-label: 500 11px/1.3 var(--tc-mono);                       /* uppercase, tracked */
  --tc-t-meta: 400 12px/1.4 var(--tc-mono);                        /* dates, counts, commands */
  --tc-track-tight: -.035em;                                       /* big headings */
  --tc-track-label: .08em;

  /* space: a 4px base; reach for these, not raw px */
  --tc-s1: 4px; --tc-s2: 8px; --tc-s3: 12px; --tc-s4: 16px;
  --tc-s5: 24px; --tc-s6: 32px; --tc-s7: 48px; --tc-s8: 72px;

  /* shape and motion */
  --tc-r-sm: 6px;
  --tc-r: 12px;
  --tc-r-pill: 999px;
  --tc-lift: 0 18px 30px -22px rgba(0, 0, 0, .45);
  --tc-ease: .25s ease;

  /* layout */
  --tc-wide: 1180px;   /* site frame: top bar, grids, footer */
  --tc-read: 680px;    /* text column */
  --tc-gutter: 16px;

  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --tc-bg: #111110; --tc-card: #1a1a18; --tc-soft: #232321;
    --tc-ink: #f0efe9; --tc-ink-2: #cfcec7; --tc-muted: #9d9d95; --tc-rule: #2a2a27;
    --tc-red: #ff6a4f; --tc-on-red: #111110;
    --tc-lift: 0 18px 30px -22px rgba(0, 0, 0, .9);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --tc-bg: #111110; --tc-card: #1a1a18; --tc-soft: #232321;
  --tc-ink: #f0efe9; --tc-ink-2: #cfcec7; --tc-muted: #9d9d95; --tc-rule: #2a2a27;
  --tc-red: #ff6a4f; --tc-on-red: #111110;
  --tc-lift: 0 18px 30px -22px rgba(0, 0, 0, .9);
  color-scheme: dark;
}

/* 2. BASE -------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box }
body { margin: 0; background: var(--tc-bg); color: var(--tc-ink); font: var(--tc-t-body); -webkit-font-smoothing: antialiased }
a { color: inherit }
:focus-visible { outline: 2px solid var(--tc-red); outline-offset: 3px }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important } }

/* 3. COMPONENTS -------------------------------------------------------------- */

/* Frame: the centred column every page sits in. .tc-wrap.read narrows it. */
.tc-wrap { max-width: var(--tc-wide); margin: 0 auto; padding: 0 var(--tc-gutter) var(--tc-s8) }
.tc-wrap.read { max-width: calc(var(--tc-read) + 2 * var(--tc-gutter)) }
.tc-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap }

/* Top bar: wordmark left, sections right. The same on every page. */
.tc-top { max-width: var(--tc-wide); margin: 0 auto; padding: var(--tc-s5) var(--tc-gutter); display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--tc-s2) var(--tc-s5); font: var(--tc-t-body) }
.tc-wrap > .tc-top { padding-left: 0; padding-right: 0 }
.tc-mark { font: 600 20px/1 var(--tc-sans); letter-spacing: -.02em; text-decoration: none; color: var(--tc-ink); margin-right: auto }
.tc-mark b { color: var(--tc-red); font-weight: 600 }
.tc-top nav { display: flex; gap: 20px; font-size: 15px }
.tc-top nav a { color: var(--tc-muted); text-decoration: none }
.tc-top nav a:hover, .tc-top nav a[aria-current] { color: var(--tc-ink) }
.tc-top nav a[aria-current] { box-shadow: inset 0 -2px var(--tc-red) }
/* The hub's one standing invitation (twocents is the hub for now): red text, no fill. */
.tc-top nav a.tc-make { color: var(--tc-red) }
.tc-top nav a.tc-make:hover { color: var(--tc-ink) }

/* Titles. .tc-title for a page, .tc-display for a section page, .tc-lede under either. */
.tc-display { font: var(--tc-t-display); letter-spacing: -.045em; margin: 0 0 14px; color: var(--tc-ink) }
.tc-title { font: var(--tc-t-h1); letter-spacing: -.04em; margin: 0 0 var(--tc-s4); color: var(--tc-ink); text-wrap: balance }
.tc-lede { font: var(--tc-t-lede); color: var(--tc-muted); margin: 0; max-width: 52ch }
.tc-label { font: var(--tc-t-label); letter-spacing: var(--tc-track-label); text-transform: uppercase; color: var(--tc-muted) }

/* Section heading row: title, one line, and an optional "see all" link pushed right. */
.tc-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 14px; margin: 56px 0 18px }
.tc-head h2 { font: var(--tc-t-h2); letter-spacing: -.03em; margin: 0; color: var(--tc-ink) }
.tc-head p { margin: 0; color: var(--tc-muted) }
.tc-more { margin-left: auto; font: 500 14px var(--tc-sans); text-decoration: none; border-bottom: 1px solid var(--tc-rule); padding-bottom: 2px; white-space: nowrap }
.tc-more:hover { border-color: var(--tc-red); color: var(--tc-red) }
.tc-band + .tc-band { margin-top: var(--tc-s5); border-top: 1px solid var(--tc-rule) }

/* Grid of cards: three across, two on tablets, one on phones. .two for a pair. */
.tc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 20px }
.tc-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)) }
.tc-grid.two .tc-art { aspect-ratio: 16/10 }
@media (max-width: 900px) { .tc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) } }
@media (max-width: 520px) { .tc-grid, .tc-grid.two { grid-template-columns: 1fr } .tc-head .tc-more { margin-left: 0 } }

/* Card: a cover, a title, one line, optional meta and take-home command.
   The whole card is the link; the cover animates on hover (covers.js). */
.tc-card { display: flex; flex-direction: column; min-width: 0; width: 100%; text-decoration: none; color: var(--tc-ink) }
.tc-art { position: relative; display: block; aspect-ratio: 4/3; border-radius: var(--tc-r); overflow: hidden; background: var(--tc-card); border: 1px solid var(--tc-rule); transition: transform var(--tc-ease), box-shadow var(--tc-ease) }
.tc-art canvas { position: absolute; inset: 0; width: 100%; height: 100% }
.tc-card:hover .tc-art, .tc-card:focus-visible .tc-art { transform: translateY(-4px); box-shadow: var(--tc-lift) }
.tc-art .tc-pill { position: absolute; top: 10px; left: 10px }
.tc-card b { font: var(--tc-t-h3); letter-spacing: -.015em; margin-top: var(--tc-s3) }
.tc-card i { font-style: normal; color: var(--tc-muted); font-size: 15px; margin-top: 3px }
.tc-card .tc-meta { margin-top: 6px }
.tc-meta { font: var(--tc-t-meta); color: var(--tc-muted) }
.tc-take { display: block; font: var(--tc-t-meta); color: var(--tc-muted); margin-top: var(--tc-s2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.tc-take b { font: 500 12px var(--tc-mono); margin: 0 6px 0 0; color: var(--tc-ink) }

/* Pill: how far along a thing is. Red only for "ready". .dot is the 7px version. */
.tc-pill { display: inline-block; font: var(--tc-t-label); letter-spacing: .06em; text-transform: uppercase; padding: 3px 8px; border-radius: var(--tc-r-pill); background: var(--tc-bg); color: var(--tc-muted); border: 1px solid var(--tc-rule) }
.tc-pill.playable { color: var(--tc-red); border-color: var(--tc-red) }
.tc-pill.dot { width: 7px; height: 7px; padding: 0; border: 0; background: var(--tc-red); vertical-align: 1px }
.tc-pill.dot.done { background: var(--tc-ink) }

/* Cover: the big drawing at the top of an item's page, wider than the text column. */
.tc-cover { position: relative; display: block; width: min(960px, calc(100vw - 2 * var(--tc-gutter))); margin: 0 0 28px 50%; transform: translateX(-50%); aspect-ratio: 16/7; border-radius: 14px; overflow: hidden; background: var(--tc-card); border: 1px solid var(--tc-rule) }
.tc-cover[hidden] { display: none }
.tc-cover canvas { position: absolute; inset: 0; width: 100%; height: 100% }
@media (max-width: 600px) { .tc-cover { aspect-ratio: 4/3 } }

/* Buttons. Default is outlined; .solid is the one primary action on a screen. */
.tc-btn { display: inline-flex; align-items: center; gap: var(--tc-s2); font: 500 14px/1 var(--tc-sans); padding: 10px 16px; border-radius: var(--tc-r-pill); border: 1px solid var(--tc-rule); background: var(--tc-card); color: var(--tc-ink); text-decoration: none; cursor: pointer; transition: border-color var(--tc-ease) }
.tc-btn:hover { border-color: var(--tc-ink) }
.tc-btn.solid { background: var(--tc-ink); border-color: var(--tc-ink); color: var(--tc-bg) }
.tc-btn.solid:hover { background: var(--tc-red); border-color: var(--tc-red); color: var(--tc-on-red) }
.tc-btn:disabled { opacity: .45; cursor: not-allowed }

/* Command: a line to copy into a terminal. */
.tc-cmd { display: block; font: 400 13px/1.6 var(--tc-mono); background: var(--tc-soft); border: 1px solid var(--tc-rule); border-radius: var(--tc-r-sm); padding: var(--tc-s3) 14px; overflow-x: auto; white-space: pre; color: var(--tc-ink) }

/* Breadcrumb. */
.tc-crumbs { font: var(--tc-t-meta); color: var(--tc-muted) }
.tc-crumbs a { text-decoration: none }
.tc-crumbs a:hover { color: var(--tc-red) }

/* Footer: one mono line of links, the same on every page. */
.tc-foot { max-width: var(--tc-wide); margin: var(--tc-s8) auto 0; padding: 18px var(--tc-gutter) var(--tc-s7); border-top: 1px solid var(--tc-rule); display: flex; flex-wrap: wrap; gap: var(--tc-s2) 20px; font: 400 13px/1.5 var(--tc-mono); color: var(--tc-muted) }
.tc-foot a { text-decoration: none; color: var(--tc-ink) }
.tc-foot a:hover { color: var(--tc-red) }
.tc-wrap > .tc-foot { padding-left: 0; padding-right: 0 }

/* Floating chip: a small fixed link in the bottom-right corner (the pin-a-note link). */
.tc-chip { position: fixed; right: var(--tc-s4); bottom: var(--tc-s4); z-index: 50; font: 500 13px/1 var(--tc-sans); padding: 10px 14px; border-radius: var(--tc-r-pill); background: var(--tc-card); color: var(--tc-ink); border: 1px solid var(--tc-rule); box-shadow: var(--tc-lift); text-decoration: none }
.tc-chip:hover { border-color: var(--tc-red); color: var(--tc-red) }