/* Hallmark · shape: A reel of short films, one step of the making per screen · genre: atmospheric · theme: Refract (the site's own, by request: this page shares site.css, tokens.css and base.css) · hero: custom, the head beside the whole sphere on the stage's dark ground, lit, and the sphere takes itself apart · nav: edge-aligned · footer: mast over the audience index · imagery: diagrams of the real product and of how it is made, drawn in SVG by dev/build-how-its-made.py and each named as a diagram; where a lit sphere shows its reflections, the picture inside the drawn glass is the HELIO simulator's own render (assets/made), and the first caption says so · signature: every chapter plays by itself when it comes on screen, its steps lighting in time with the picture, then idles
 * axes: dark stage/grotesk-sans/cool · posture: restrained · modes: light+dark (prefers-color-scheme), the film of chapters stays dark in both, like .try and the banner stage · job: understand (then enquire) · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S5 R4 V4 · weakest: H, nine chapters share one frame (text beside a square stage); each stage holds one film and its few steps, and only the step on screen is lit while it plays */
/* Hallmark · waive 80 · every drawing is a diagram of the real product or of a step in making it, and is named as one (class diagram, aria-label "Diagram: …") · the page exists to explain how the sphere is made, which no photograph of the finished sphere shows */
/* Hallmark · layout idea · the page is a reel: each chapter is about one screen, the text in the left column and a square stage on the right (on a phone the heading and the steps, then the stage). A chapter's film starts when its stage is mostly on screen and stops when it leaves; nothing is pinned and the page scrolls as any page does. Each stage carries Pause/Play and Replay. Without script, or with reduced motion, each chapter shows its finished step, and under reduced motion Play still plays it once */
/* Hallmark · dropped the pinned, scroll-scrubbed tracks · the owner read them as drawings, not as motion; the films now run on time and the page is a third as long */

:root {
  /* The film is dark in either theme, so its paint does not switch with the theme. Each colour is derived from a site token. */
  --made-glass: oklch(86% 0.05 212);      /* --color-shade as the light theme sets it: clear acrylic, read by its edges */
  --made-glass-hi: oklch(97% 0.02 212);   /* the same hue toward white: a highlight on the acrylic */
  --made-board: oklch(30% 0.04 245);      /* --color-ink's hue, lifted to read on the stage: a circuit board */
  --made-panel: oklch(21% 0.03 245);      /* the panel the boards are cut from, a step under them */
  --made-metal: oklch(40% 0.02 240);      /* --color-muted's hue, darker: the black band, the yoke, the fittings */
  --made-metal-hi: oklch(62% 0.02 240);   /* its lit edge */
  --made-metal-lo: oklch(25% 0.015 240);  /* its shaded side */
  --made-warm: oklch(93% 0.07 85);        /* warm white: --spec-2's hue toward white */
  --made-red: oklch(66% 0.21 27);         /* the LED's own emitters: --color-error's hue, lifted for the stage */
  --made-green: oklch(80% 0.19 150);      /* --color-success's hue, lifted */
  --made-blue: oklch(64% 0.17 265);       /* beside --spec-4's hue */
  --made-dim: oklch(62% 0.015 240);       /* --color-on-screen-3, a step down: a step the film is not showing just now */
  --made-label: 18px;                     /* label size in the drawing's own 800-unit field; larger where the stage is small */
}

/* The film: every chapter on the stage's dark ground, about one screen each */
.made-film { background: var(--color-screen); color: var(--color-on-screen); }
.made-ch__inner { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: var(--gap-columns); align-items: center; padding-block: var(--space-3xl); }
.made-text { display: grid; align-content: center; justify-items: start; gap: var(--space-lg); }
.made-text h1 { max-width: 9ch; font-size: var(--text-hero); line-height: 1.02; }
.made-text h2 { max-width: 13ch; }
.made-text .lead { max-width: 30ch; color: var(--color-on-screen-2); }
.made-note { max-width: 46ch; color: var(--color-on-screen-3); font-size: var(--text-sm); }

/* The steps of a chapter: all readable; while the film plays, the one it is showing is lit */
.made-steps { display: grid; gap: var(--space-md); margin: 0; padding: 0; list-style: none; counter-reset: made-step; }
.made-steps li { counter-increment: made-step; display: grid; grid-template-columns: var(--space-lg) minmax(0, 1fr); column-gap: var(--space-xs); max-width: 46ch; color: var(--color-on-screen); transition: color var(--dur-long) var(--ease-out); }
.made-steps li::before { content: counter(made-step); color: var(--color-on-screen-3); font-family: var(--font-display); font-variant-numeric: tabular-nums; }
.is-playing .made-steps li, .is-playing .made-steps li::before { color: var(--made-dim); }
.is-playing .made-steps li.is-on, .is-playing .made-steps li.is-on::before { color: var(--color-on-screen); }

/* The stage: one square drawing, and under it its caption and its controls */
/* It never grows past the screen's height, so the whole picture shows at once; on a very short screen it keeps a floor. */
.made-stage { display: grid; gap: var(--space-xs); justify-self: end; width: min(100%, max(18rem, calc(100svh - 2 * var(--space-lg) - var(--space-2xl)))); margin: 0; }
.made-ch--open .made-stage { width: min(100%, max(18rem, calc(100svh - var(--nav-h) - var(--space-lg) - var(--space-2xl)))); }
.made-ch--open .made-ch__inner { padding-block: var(--space-md) var(--space-3xl); }
.made-svg { display: block; width: 100%; height: auto; aspect-ratio: 1; fill: none; stroke: none; }
.made-live:not(.made-ready) .made-svg { visibility: hidden; }
.made-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-xs) var(--space-md); min-height: 44px; color: var(--color-on-screen-3); font-size: var(--text-sm); }
/* Pause/Play and Replay: the site's .pause, in the film's own ink. They need the script, so they wait for it. */
.made-cap { flex: 1 1 12rem; min-width: 0; }
.made-controls { display: none; flex: none; gap: var(--space-xs); margin-left: auto; }
.made-js .made-controls { display: inline-flex; }
.made-film .pause { border-color: var(--color-on-screen-3); color: var(--color-on-screen); }
.made-film .pause:hover { border-color: var(--color-on-screen); color: var(--color-on-screen); }
.made-film .pause:focus-visible { outline-color: var(--color-on-screen); }
html:not(.made-js) .made-film .pause { display: none; }
.made-motion { color: var(--color-on-screen-3); font-size: var(--text-sm); }
.made-motion a { display: inline-flex; align-items: center; min-height: 44px; color: var(--color-on-screen); text-decoration: underline; text-decoration-color: var(--color-on-screen-3); text-underline-offset: 0.2em; }
.made-motion a:hover { text-decoration-color: currentColor; }
.made-motion a:active { color: var(--color-on-screen-2); }
.made-motion a:focus-visible { outline: 2px solid var(--color-on-screen); outline-offset: 2px; }

/* The drawings' paint. Every colour is a token; a part's class says what it is made of. */
.made-svg text { fill: var(--color-on-screen); font-family: var(--font-body); font-size: var(--made-label); font-weight: 500; }
.made-svg .lbl-sub { fill: var(--color-on-screen-3); font-size: 0.86em; font-weight: 400; }
.ld { stroke: var(--color-on-screen-3); stroke-width: 1.2; }
.ld-dot { fill: var(--color-on-screen-2); }
.f-ground { fill: var(--color-screen); }
.f-ink { fill: var(--color-on-screen); }
.f-ink-2 { fill: var(--color-on-screen-2); }
.f-ink-3 { fill: var(--color-on-screen-3); }
.f-glass { fill: var(--made-glass); }
.f-board { fill: var(--made-board); }
.f-panel { fill: var(--made-panel); }
.f-metal { fill: var(--made-metal); }
.f-metal-hi { fill: var(--made-metal-hi); }
.f-metal-lo { fill: var(--made-metal-lo); }
.f-warm { fill: var(--made-warm); }
.f-red { fill: var(--made-red); }
.f-green { fill: var(--made-green); }
.f-blue { fill: var(--made-blue); }
.f-heat, .f-c1 { fill: var(--spec-1); }
.f-c2 { fill: var(--spec-2); }
.f-c3 { fill: var(--spec-3); }
.f-c4 { fill: var(--spec-4); }
.s-ground { stroke: var(--color-screen); }
.s-ink { stroke: var(--color-on-screen); }
.s-ink-2 { stroke: var(--color-on-screen-2); }
.s-ink-3 { stroke: var(--color-on-screen-3); }
.s-glass { stroke: var(--made-glass); }
.s-metal { stroke: var(--made-metal); }
.s-metal-hi { stroke: var(--made-metal-hi); }
.s-warm { stroke: var(--made-warm); }
.s-red { stroke: var(--made-red); }
.s-heat, .s-c1 { stroke: var(--spec-1); }
.s-c2 { stroke: var(--spec-2); }
.s-c3 { stroke: var(--spec-3); }
.s-c4 { stroke: var(--spec-4); }
.st-glass { stop-color: var(--made-glass); }
.st-glass-hi { stop-color: var(--made-glass-hi); }
.st-metal { stop-color: var(--made-metal); }
.st-metal-hi { stop-color: var(--made-metal-hi); }
.st-metal-lo { stop-color: var(--made-metal-lo); }
.st-warm { stop-color: var(--made-warm); }
.st-ground { stop-color: var(--color-screen); }
.st-c1 { stop-color: var(--spec-1); }
.st-c2 { stop-color: var(--spec-2); }
.st-c3 { stop-color: var(--spec-3); }
.st-c4 { stop-color: var(--spec-4); }
/* The LEDs' colours round the ring: the four spectrum tokens and two steps between each pair */
.led-0 { fill: var(--spec-1); }
.led-1 { fill: var(--spec-1); fill: color-mix(in oklch, var(--spec-1) 67%, var(--spec-2)); }
.led-2 { fill: var(--spec-1); fill: color-mix(in oklch, var(--spec-1) 33%, var(--spec-2)); }
.led-3 { fill: var(--spec-2); }
.led-4 { fill: var(--spec-2); fill: color-mix(in oklch, var(--spec-2) 67%, var(--spec-3)); }
.led-5 { fill: var(--spec-2); fill: color-mix(in oklch, var(--spec-2) 33%, var(--spec-3)); }
.led-6 { fill: var(--spec-3); }
.led-7 { fill: var(--spec-3); fill: color-mix(in oklch, var(--spec-3) 67%, var(--spec-4)); }
.led-8 { fill: var(--spec-3); fill: color-mix(in oklch, var(--spec-3) 33%, var(--spec-4)); }
.led-9 { fill: var(--spec-4); }
.led-10 { fill: var(--spec-4); fill: color-mix(in oklch, var(--spec-4) 67%, var(--spec-1)); }
.led-11 { fill: var(--spec-4); fill: color-mix(in oklch, var(--spec-4) 33%, var(--spec-1)); }

/* After the film: the way on, back on paper */
.made-film + .lp-section--l { padding-top: var(--section-gap); }

@media (max-width: 60rem) {
  :root { --made-label: 20px; }
  /* A narrow screen: the heading and the steps, then the stage with its controls, so the step that is lit sits just above the picture it describes */
  .made-ch__inner { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-md); padding-block: var(--space-2xl); }
  .made-text { gap: var(--space-sm); }
  .made-text h2 { max-width: 18ch; }
  .made-steps { gap: var(--space-xs); }
  .made-stage { justify-self: center; width: min(100%, max(15rem, calc(100svh - 9rem))); }
  .made-ch--open .made-stage { width: min(100%, max(15rem, calc(100svh - var(--nav-h) - 18rem))); }
}
@media (max-width: 45rem) { :root { --made-label: 23px; } }
@media (max-width: 30rem) { :root { --made-label: 27px; } }
@media (max-width: 60rem) and (orientation: landscape) and (max-height: 32rem) { :root { --made-label: 27px; } }
/* Reduced motion, unless the reader has opted in for the site (html.motion-on, set by made.js and scene-world.js) */
@media (prefers-reduced-motion: reduce) {
  html:not(.motion-on) .made-steps li { transition: none; }
}