/* The page is a drawing sheet, so it is laid out like one: generous margin,
 * the drawing in the field, a title block bottom-right carrying the things a
 * title block carries — what this is, at what scale, drawn from what.
 *
 * Tokens follow the-human-element so the two read as one practice. Line
 * weights follow drafting: a heavy ground line, medium object lines, fine
 * dimension and datum lines. Weight is information here, not decoration. */

:root {
  --page:#f9f9f7; --surface:#fcfcfb; --ink:#0b0b0b; --ink-2:#52514e;
  --muted:#898781; --grid:#e1e0d9; --baseline:#c3c2b7;
  --accent:#2a78d6; --accent-deep:#1c5cab; --accent-light:#9ec5f4;
  --border:rgba(11,11,11,.10);
  --paper:#fdfdfb;        /* the field the drawing sits on   */
  --graphite:#22211f;     /* object lines                    */
  --graphite-2:#6b6a66;   /* secondary linework              */
  --warn:#b4541f;         /* the stamp, and only the stamp   */
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --page:#0d0d0d; --surface:#1a1a19; --ink:#fff; --ink-2:#c3c2b7;
    --muted:#898781; --grid:#2c2c2a; --baseline:#383835;
    --accent:#3987e5; --accent-deep:#6da7ec; --accent-light:#184f95;
    --border:rgba(255,255,255,.10);
    --paper:#141413; --graphite:#e8e7e3; --graphite-2:#9b9a95; --warn:#e08a55;
  }
}
:root[data-theme="dark"] {
  --page:#0d0d0d; --surface:#1a1a19; --ink:#fff; --ink-2:#c3c2b7;
  --muted:#898781; --grid:#2c2c2a; --baseline:#383835;
  --accent:#3987e5; --accent-deep:#6da7ec; --accent-light:#184f95;
  --border:rgba(255,255,255,.10);
  --paper:#141413; --graphite:#e8e7e3; --graphite-2:#9b9a95; --warn:#e08a55;
}

* { box-sizing:border-box; }
html { background:var(--page); }
body {
  margin:0; background:var(--page); color:var(--ink);
  font-family:Georgia,'Times New Roman',serif; font-size:17px; line-height:1.6;
}
.sans, button, select, label, .tb, .notes h2, .controls { font-family:system-ui,-apple-system,"Segoe UI",sans-serif; }
.mono, .tb, .scale-note { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; }
h1,h2,h3,p { margin-top:0; }
a { color:var(--accent-deep); }
:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }

.wrap { max-width:1140px; margin-inline:auto; padding-inline:24px; padding-block:56px 96px; }

header.masthead { max-width:64ch; margin-bottom:40px; }
.kicker { font-size:11px; font-weight:650; letter-spacing:.16em; text-transform:uppercase;
          color:var(--muted); margin:0 0 20px; font-family:system-ui,-apple-system,sans-serif; }
h1 { font-size:clamp(2.6rem,7vw,4.6rem); line-height:.96; letter-spacing:-.05em;
     font-weight:500; margin:0 0 20px; max-width:11ch; text-wrap:balance; }
.deck { font-size:clamp(1.15rem,2.2vw,1.5rem); line-height:1.38; max-width:36ch;
        margin:0 0 18px; text-wrap:balance; }
.byline { font-size:13px; color:var(--ink-2); font-family:system-ui,-apple-system,sans-serif; }
.byline a { color:var(--ink-2); }

/* ---- controls ---------------------------------------------------------- */

.controls { display:flex; flex-wrap:wrap; gap:18px 26px; align-items:flex-end;
            border-top:1px solid var(--border); border-bottom:1px solid var(--border);
            padding:16px 0; margin-bottom:0; }
.field { display:flex; flex-direction:column; gap:5px; }
.field > label { font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); font-weight:650; }
select, .btn {
  font:inherit; font-size:13px; font-family:system-ui,-apple-system,sans-serif;
  color:var(--ink); background:var(--surface);
  border:1px solid var(--border); padding:7px 11px; cursor:pointer;
}
.btn:hover, select:hover { border-color:var(--baseline); }

/* the toggle is the argument, so it gets to look like a switch and not a menu */
.toggle { display:flex; border:1px solid var(--border); }
.toggle button {
  font:inherit; font-size:13px; font-family:system-ui,-apple-system,sans-serif;
  background:transparent; color:var(--ink-2); border:0; padding:7px 15px; cursor:pointer;
}
.toggle button + button { border-left:1px solid var(--border); }
.toggle button[aria-pressed="true"] { background:var(--accent); color:#fff; font-weight:600; }

/* ---- the sheet --------------------------------------------------------- */

.sheet { background:var(--paper); border:1px solid var(--border); border-top:0;
         padding:0; position:relative; }
.field-area { overflow-x:auto; padding:8px 0 0; }
.field-area svg { display:block; min-width:760px; }

.stamp { color:var(--warn); font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
         font-size:12px; letter-spacing:.02em; padding:2px 20px 14px; }

.problems { color:var(--warn); font-size:14px; padding:20px; }
.problems ul { margin:8px 0 0; padding-left:1.2em; }

/* title block — bottom right, as on a real sheet */
.tb { border-top:1px solid var(--border); display:grid;
      grid-template-columns:repeat(4,minmax(0,1fr)); font-size:11px; }
.tb div { padding:12px 16px; border-left:1px solid var(--border); }
.tb div:first-child { border-left:0; }
.tb dt { color:var(--muted); letter-spacing:.06em; text-transform:uppercase; margin:0 0 4px; font-size:10px; }
.tb dd { margin:0; color:var(--ink); font-variant-numeric:tabular-nums; }
@media (max-width:720px) { .tb { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .tb div:nth-child(3) { border-left:0; }
  .tb div:nth-child(n+3) { border-top:1px solid var(--border); } }

/* ---- svg linework ------------------------------------------------------ */

.ts-title { fill:var(--ink); font:500 17px Georgia,serif; }
.ts-cut { fill:var(--muted); font:650 10px ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.14em; }
.ts-level { fill:var(--ink-2); font:12px system-ui,-apple-system,sans-serif; }
.ts-label { fill:var(--ink); font:12.5px system-ui,-apple-system,sans-serif; }
.ts-label.ts-inside { fill:var(--ink); }
.ts-axis { fill:var(--muted); font:11px ui-monospace,SFMono-Regular,Menlo,monospace; }
.ts-floor { fill:var(--graphite-2); }
.ts-unmeasured { fill:var(--warn); }
.ts-stamp-text { fill:var(--warn); font:11px ui-monospace,SFMono-Regular,Menlo,monospace; }

.ts-datum { stroke:var(--grid); stroke-width:1; }
.ts-ground { stroke:var(--graphite); stroke-width:2.4; }   /* line of visibility, heavy */
.ts-dim { stroke:var(--graphite-2); stroke-width:1; }
.ts-event { stroke:var(--accent); stroke-width:1.6; }
.ts-break { fill:none; stroke:var(--warn); stroke-width:1.6; }
.ts-hatch-line { stroke:var(--graphite-2); stroke-width:1; }

.ts-span { stroke:var(--graphite); stroke-width:1.2; }
.ts-poche { fill:var(--graphite); }                       /* present, engaged  */
.ts-hatch { fill:url(#ts-hatch); }                        /* present, waiting  */
.ts-void  { fill:none; }                                  /* absent            */
.ts-hidden { stroke-dasharray:5 3; stroke:var(--graphite-2); }

/* spread band — the interquartile range behind a median. Kept lighter than
   every object line so it reads as context and never as the span itself. */
.ts-band { fill:var(--accent-light); opacity:.34; stroke:none; }
.ts-band-tick { stroke:var(--accent-deep); stroke-width:1.2; }
.ts-band-run { stroke:var(--accent-deep); stroke-width:1.2; }
.ts-arrowhead { fill:var(--accent-deep); }
.ts-band-label { fill:var(--accent-deep); }

/* detail marker — a ring on the parent, keyed by number to a larger drawing */
.ts-detail-ring { fill:none; stroke:var(--accent); stroke-width:1.2; stroke-dasharray:4 3; }
.ts-detail-tag { fill:var(--accent); stroke:none; }
.ts-detail-num { fill:#fff; font:650 11px system-ui,-apple-system,sans-serif; }
/* Only a label sitting *inside* a solid poché needs to invert. Matching every
   label after a poché rect would hide the ones printed outside it. */
.ts-span.ts-poche + .ts-label.ts-inside { fill:var(--paper); }

/* ---- legend ------------------------------------------------------------ */

.legend { margin-top:44px; border-top:1px solid var(--border); padding-top:22px; }
.legend h2 { font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted);
             margin:0 0 16px; font-weight:650; font-family:system-ui,-apple-system,sans-serif; }
.legend ul { list-style:none; margin:0; padding:0; display:grid; gap:14px 30px;
             grid-template-columns:repeat(auto-fit,minmax(248px,1fr)); }
.legend li { display:grid; grid-template-columns:62px minmax(0,1fr); gap:13px; align-items:start; }
.legend svg { width:62px; height:26px; display:block; }
.legend b { font-size:13px; font-family:system-ui,-apple-system,sans-serif; display:block; }
.legend span { font-size:13px; color:var(--ink-2); }

/* ---- notes ------------------------------------------------------------- */

.notes { margin-top:52px; display:grid; gap:40px; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); }
.notes h2 { font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted);
            margin:0 0 14px; font-weight:650; }
.notes p, .notes li { font-size:15px; line-height:1.6; }
.notes ul { margin:0; padding-left:1.1em; }
.notes li { margin-bottom:11px; }
.sources { font-size:13px; }
.sources li { color:var(--ink-2); margin-bottom:9px; }
.sources b { color:var(--ink); font-weight:650; font-family:system-ui,-apple-system,sans-serif; }

.essay { max-width:64ch; margin-top:76px; border-top:1px solid var(--border); padding-top:44px; }
.essay h2 { font-size:clamp(1.7rem,3.4vw,2.4rem); font-weight:500; letter-spacing:-.04em;
            line-height:1.1; margin:0 0 22px; text-wrap:balance; }
.essay p { margin-bottom:1.15em; }
.essay .lede { font-size:1.12em; }

footer { border-top:1px solid var(--border); margin-top:76px; padding-top:22px;
         color:var(--muted); font-size:12px; font-family:system-ui,-apple-system,sans-serif; }
footer a { color:inherit; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition:none!important; animation:none!important; } }

/* ---- detail drawings --------------------------------------------------- */

.detail-block { margin-top:34px; }
.detail-head { font-size:14px; line-height:1.55; color:var(--ink-2); margin:0 0 10px;
               max-width:70ch; font-family:system-ui,-apple-system,sans-serif; }
.detail-head b { color:var(--ink); font-weight:650;
                 font-family:ui-monospace,SFMono-Regular,Menlo,monospace; }
.detail-block .sheet { border-top:1px solid var(--border); }
.field-area + .field-area { border-top:1px solid var(--border); }
.poche-note { margin:22px 0 0; font-size:14px; color:var(--ink-2); max-width:64ch; }