/* TensorSlice landing page.
   Look and feel of the TensorSlice reel: a black stage with drifting digital dust,
   one bold word at a time, the fiber as the bright element.
   Live text uses two open-licence faces, self-hosted from assets/fonts/ (Barlow, IBM Plex Mono;
   SIL OFL 1.1, licence texts beside the files). The TensorSlice wordmark appears only as raster
   images (assets/brand/), never as a font; tools/check_site.py allows font-face rules only here and only
   for those two families and their exact files.
   Brand accents: Sunnyday green #97d700, navy #013a73. */

/* Latin subsets from @fontsource/barlow 5.3.0 and @fontsource/ibm-plex-mono 5.3.0. */
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 200; font-display: swap;
  src: url("/assets/fonts/barlow-latin-200-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 300; font-display: swap;
  src: url("/assets/fonts/barlow-latin-300-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/assets/fonts/barlow-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("/assets/fonts/barlow-latin-600-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/assets/fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("/assets/fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --stage: #000000;
  --rule: #121a24;
  --ink: #eef2f7;
  --mute: #8a97a6;      /* reel --mute #7f8c9b lifted for small text: 7.1:1 on black (WCAG AA 4.5:1) */
  --tow: #d9e3f2;
  --signal: #97d700;    /* Sunnyday green */
  --navy: #013a73;      /* Sunnyday navy */
  --display: "Barlow", "Segoe UI", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --gutter: max(16px, 5vw);
  --wide: 1200px;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--stage); scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--stage); color: var(--ink);
  font-family: var(--display); font-weight: 400; font-size: 1.0625rem; line-height: 1.6;
  overflow-x: hidden;
}
img, video, picture { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
a:hover { color: var(--signal); }
:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; }
::selection { background: var(--signal); color: #000; }

.mono { font-family: var(--mono); font-size: 0.8125rem; letter-spacing: 0.13em; text-transform: uppercase; }

/* Digital dust: one fixed canvas under everything (assets/site.js). */
#dust { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.top, main, .foot { position: relative; z-index: 1; }

/* Header. */
.top {
  position: absolute; top: 0; left: 0; right: 0;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 20px var(--gutter);
}
.brand img { width: 184px; height: auto; }

/* Hero: the lockup, one line, the reel. */
.hero {
  min-height: 100svh; display: grid; align-content: center; justify-items: center; gap: 28px;
  padding: 104px var(--gutter) 72px; text-align: center;
}
.logo { margin: 0; line-height: 0; }
.logo img { width: clamp(200px, 28vw, 360px); height: auto; }
.line { margin: 0; font-weight: 200; font-size: clamp(1.75rem, 4.4vw, 3.4rem); line-height: 1.1; }
.reel { margin: 8px 0 0; width: min(100%, var(--wide)); }
.reel video { width: 100%; aspect-ratio: 16 / 9; background: #000; border: 1px solid var(--rule); object-fit: contain; }
@media (max-width: 640px) and (orientation: portrait) {
  /* Width set here, not taken from the poster: the tall poster replaces the wide one after load, and an
     intrinsic width made the centred hero jump (Lighthouse CLS 0.39). At most 78svh tall. */
  .reel video { aspect-ratio: 9 / 16; width: min(100%, calc(78svh * 9 / 16)); margin: 0 auto; }
}

/* Buttons. */
.btn {
  display: inline-block; font: inherit; letter-spacing: inherit; text-transform: inherit; color: var(--ink);
  background: transparent; border: 1px solid #2a3440; padding: 13px 22px; text-decoration: none; cursor: pointer; min-height: 44px;
}
.btn:hover { border-color: var(--signal); color: var(--signal); }

/* A beat: one word on its own screen, then the picture. */
.beat { max-width: var(--wide); margin: 0 auto; padding: 0 var(--gutter) 14vh; }
.word {
  margin: 0; min-height: 56svh; display: grid; place-items: center; text-align: center;
  font-weight: 200; font-size: clamp(3.5rem, 15vw, 12rem); line-height: 1; letter-spacing: 0.015em;
}
figure { margin: 0; }
figure img { width: 100%; background: #000; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
figcaption { margin-top: 16px; color: var(--mute); line-height: 1.75; max-width: 64em; }
.tag { color: var(--tow); margin-right: 0.9em; white-space: nowrap; }
.tag::before { content: ""; display: inline-block; width: 18px; height: 2px; margin-right: 10px; vertical-align: 0.3em; background: var(--signal); }

/* Registered pair: the printed part with and without its G-code course. CSS only (radio inputs).
   Where :has() is unsupported both images stack and the course view shows. */
.pair input { position: absolute; opacity: 0; pointer-events: none; }
.pair-stage { display: grid; }
.pair-stage > picture { grid-area: 1 / 1; }
.pair-course { transition: opacity 0.6s ease; }
.pair:has(#pair-photo:checked) .pair-course { opacity: 0; }
.pair-switch { display: flex; gap: 8px; margin-top: 16px; }
.pair-switch label { border: 1px solid #2a3440; padding: 9px 16px; cursor: pointer; color: var(--mute); min-height: 40px; }
.pair:has(#pair-course:checked) label[for="pair-course"],
.pair:has(#pair-photo:checked) label[for="pair-photo"] { color: #000; background: var(--tow); border-color: var(--tow); }
.pair:has(input:focus-visible) .pair-switch { outline: 2px solid var(--signal); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .pair-course { transition: none; } }

/* Real print: the webcam timelapse under the course pair. */
.timelapse { margin-top: 10vh; }
.timelapse video { width: 100%; aspect-ratio: 780 / 330; background: #000; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.files { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 10px; color: var(--mute); line-height: 1.6; }
.files a { color: var(--tow); margin-right: 0.6em; }

/* Footer. */
.foot { border-top: 1px solid var(--rule); padding: 44px var(--gutter) 40px; }
.foot > * { max-width: var(--wide); margin-left: auto; margin-right: auto; }
.foot-brand { margin-top: 0; margin-bottom: 14px; }
.foot-mark { width: 160px; height: auto; }
.small { font-size: 0.75rem; margin-top: 0; margin-bottom: 8px; color: var(--mute); }
.foot a { color: var(--ink); }
.foot a:hover { color: var(--signal); }

/* Sunnyday Technologies network footer (shared across the network's static sites). */
.sdt-netfooter { margin: 1.5rem auto 0; padding: 1.15rem 0 0; border-top: 1px solid var(--rule); display: flex; flex-wrap: wrap; align-items: baseline; gap: .45rem 1.1rem; font-size: .8rem; line-height: 1.6; color: var(--mute); }
.sdt-netfooter__label { text-transform: uppercase; letter-spacing: .09em; font-size: .66rem; width: 100%; margin-bottom: .1rem; font-family: var(--mono); }
.sdt-netfooter a { color: inherit; text-decoration: none; }
.sdt-netfooter a:hover { color: var(--signal); }
.sdt-netfooter a[aria-current="page"] { font-weight: 600; color: var(--ink); cursor: default; }

/* Plain pages (privacy, terms, 404). */
.page { max-width: 46em; margin: 0 auto; padding: 120px var(--gutter) 12vh; }
.page h1 { font-weight: 200; font-size: clamp(2.5rem, 8vw, 5rem); line-height: 1.05; margin: 0 0 12px; }
.page h2 { font-weight: 400; font-size: 1.25rem; margin: 40px 0 8px; }
.page p, .page li { font-weight: 300; color: var(--ink); }
.page .kicker { color: var(--mute); margin: 0 0 18px; }

/* Visually hidden, still read by assistive technology and search engines. */
.vh { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Scroll reveal, CSS only, where the browser supports scroll-driven animation. Elsewhere everything is visible. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .reveal { animation: rise linear both; animation-timeline: view(); animation-range: entry 5% cover 28%; }
    @keyframes rise { from { opacity: 0; transform: translateY(28px); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }
  }
}

@media (max-width: 560px) {
  .mono { font-size: 0.75rem; letter-spacing: 0.1em; }
  .brand img { width: 148px; }
}