/* Tech Savage — hand-written, like site/assets/scene.svg; the HTML beside them is generated by build.py.

   The look: an analogue synthwave technical zine. A battered mission manual from an optimistic
   cassette-futurist world, printed on midnight paper in four neon spot colours, slightly misregistered,
   photocopied, taped and annotated. Tactile and imperfect, never glossy: no gradients between colours,
   no glow, no chrome. Owner decision, 10 October 2026 (docs/status.md); it replaces brief §16–17.

   Text sits in dark panels with a thin spot-colour outline and a hard offset shadow in a second colour.
   Titles are compressed display capitals (Impact); body copy is plain Arial with generous spacing.
   System fonts only: the master brief rules out buying or embedding fonts without approval. */

:root {
  --night: #0b0420;      /* the paper */
  --panel: #120830;      /* panel fill, a shade lifted off the paper */
  --white: #f4f1ff;
  --muted: #c9bcf2;
  --pink: #ff3ea5;
  --cyan: #2ee6ff;
  --green: #5cff8f;
  --amber: #ffb03b;
  --spot: var(--green);  /* each panel's outline colour */
  --ink2: var(--pink);   /* its offset shadow: the second, misregistered pass */
  --display: Impact, Haettenschweiler, "Arial Narrow Bold", "Franklin Gothic Bold", sans-serif-condensed, sans-serif;
  --body: Arial, "Helvetica Neue", Helvetica, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --halftone: radial-gradient(circle, rgba(255, 62, 165, 0.3) 1.3px, transparent 1.7px) 0 0 / 8px 8px;
}

/* Spot-colour pairs, as on the slides: the shadow is always a different ink from the outline. */
.spot-green { --spot: var(--green); --ink2: var(--pink); }
.spot-pink  { --spot: var(--pink);  --ink2: var(--cyan); }
.spot-cyan  { --spot: var(--cyan);  --ink2: var(--pink); }
.spot-amber { --spot: var(--amber); --ink2: var(--cyan); }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  color: var(--white);
  font: 1.0625rem/1.7 var(--body);
  background-color: var(--night);
  /* Faint printed grid and a couple of scuffs on the paper. */
  background-image:
    radial-gradient(ellipse at 12% 18%, rgba(255, 255, 255, 0.035), transparent 40%),
    radial-gradient(ellipse at 88% 72%, rgba(46, 230, 255, 0.03), transparent 45%),
    linear-gradient(rgba(46, 230, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(46, 230, 255, 0.045) 1px, transparent 1px);
  background-size: auto, auto, 48px 48px, 48px 48px;
  overflow-x: hidden;
}

/* Photocopier grain over everything. */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 50; pointer-events: none; opacity: 0.11;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}

img { display: block; max-width: 100%; height: auto; }
a { color: var(--cyan); text-underline-offset: 0.2em; text-decoration-thickness: 2px; }
a:hover { color: var(--green); }
:focus-visible { outline: 3px solid var(--green); outline-offset: 4px; }

.skip-link {
  position: absolute; left: -999px; top: 0.5rem; z-index: 60;
  background: var(--green); color: var(--night); padding: 0.5rem 1rem; font-weight: 700;
}
.skip-link:focus { left: 0.5rem; }

/* ---------------------------------------------------------------- shared printed pieces */

/* A text panel: solid paper, thin spot-colour outline, hard offset shadow in the second ink. */
.panel {
  position: relative;
  background: var(--panel);
  border: 2px solid var(--spot);
  box-shadow: 8px 8px 0 var(--ink2);
  padding: clamp(1.25rem, 3vw, 2.25rem);
}

/* Registration crosses on two corners of a panel. */
.panel.marked::before, .panel.marked::after {
  content: ""; position: absolute; width: 26px; height: 26px; pointer-events: none;
  background:
    linear-gradient(var(--white), var(--white)) center / 2px 100% no-repeat,
    linear-gradient(var(--white), var(--white)) center / 100% 2px no-repeat;
  border-radius: 50%; box-shadow: inset 0 0 0 2px var(--white); opacity: 0.7;
}
.panel.marked::before { top: -34px; left: -34px; }
.panel.marked::after { bottom: -40px; right: -40px; }

/* Display lettering, printed twice a hair apart. */
.display {
  font-family: var(--display); font-weight: 400; text-transform: uppercase;
  letter-spacing: 0.01em; line-height: 0.95; color: var(--spot);
  text-shadow: 3px 3px 0 var(--ink2);
}

/* Masking tape holding a printout to the page. */
.taped { position: relative; }
.taped::before, .taped::after {
  content: ""; position: absolute; z-index: 2; width: 5.5rem; height: 1.5rem;
  background: rgba(240, 226, 190, 0.62);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
  clip-path: polygon(3% 8%, 97% 0, 100% 30%, 96% 55%, 100% 82%, 95% 100%, 4% 94%, 0 70%, 4% 46%, 0 22%);
}
.taped::before { top: -0.7rem; left: 12%; transform: rotate(-6deg); }
.taped::after { top: -0.6rem; right: 10%; transform: rotate(5deg); }

/* Technical-manual section heading: a circled number, the title, and a dimension line under it. */
main { counter-reset: section; }
.section-title {
  counter-increment: section;
  display: flex; align-items: center; gap: 0.9rem;
  margin: 0 0 2.25rem;
  font: 400 clamp(2rem, 5.5vw, 3.6rem)/0.95 var(--display);
  text-transform: uppercase; color: var(--cyan);
  text-shadow: 3px 3px 0 var(--pink);
}
.section-title::before {
  content: counter(section, decimal-leading-zero);
  flex: none; display: grid; place-items: center;
  width: 2.6rem; height: 2.6rem; border: 2px solid var(--white); border-radius: 50%;
  font: 700 0.85rem/1 var(--mono); color: var(--white); text-shadow: none;
}
.section-title::after {
  content: ""; flex: 1; min-width: 2rem; height: 14px; align-self: center;
  border-left: 2px solid var(--muted); border-right: 2px solid var(--muted);
  background: linear-gradient(var(--muted), var(--muted)) center / 100% 2px no-repeat;
  opacity: 0.6;
}

.section { padding-top: clamp(4rem, 9vw, 6.5rem); }

/* ---------------------------------------------------------------- header and footer */
.site-header {
  position: relative; z-index: 5;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem;
  padding: 1.25rem var(--gutter);
  border-bottom: 2px dashed rgba(201, 188, 242, 0.35);
}

/* Working wordmark only: the real one is brief §15 asset 1, still to be designed. */
.wordmark {
  font: 400 1.7rem/1 var(--display); text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--green); text-decoration: none; text-shadow: 2px 2px 0 var(--pink);
  border: 2px solid var(--green); box-shadow: 4px 4px 0 var(--pink);
  padding: 0.3rem 0.6rem 0.25rem; background: var(--panel);
}
.wordmark:hover { color: var(--cyan); border-color: var(--cyan); }

.site-nav { display: flex; flex-wrap: wrap; gap: 0.25rem 1.6rem; }
.site-nav a {
  color: var(--white); text-decoration: none; font: 700 0.82rem/1.4 var(--body);
  text-transform: uppercase; letter-spacing: 0.1em;
}
.site-nav a:hover { color: var(--green); }
.site-nav a::before { content: "▸ "; color: var(--pink); }

.site-footer {
  margin-top: 6rem; padding: 2.25rem var(--gutter);
  border-top: 2px dashed rgba(201, 188, 242, 0.35);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem 2rem; align-items: center;
  color: var(--muted); font-size: 0.9rem;
}
.site-footer p { margin: 0; }
.footer-mark { font: 700 0.75rem/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; }
.footer-mark span { color: var(--pink); }

main { padding: 0 var(--gutter); max-width: 78rem; margin: 0 auto; }

/* ---------------------------------------------------------------- home: hero */
/* Full bleed. The scene (or the commissioned illustration) fills the right; the left stays calm paper
   for the text panel; the hero shirt sits on the right, taped over the scene. */
.hero {
  position: relative;
  margin-inline: calc(50% - 50vw);
  padding: clamp(2.5rem, 7vw, 5.5rem) max(var(--gutter), calc(50vw - 39rem + var(--gutter)));
  display: grid; gap: 3rem; align-items: center;
  background: var(--hero-art, url("assets/scene.svg")) right center / cover no-repeat;
  border-bottom: 2px dashed rgba(201, 188, 242, 0.35);
  min-height: min(88vh, 52rem);
}
@media (min-width: 900px) { .hero { grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); } }
.hero > *, .product > *, .system { min-width: 0; }

.hero-panel { max-width: 36rem; }
.hero-title { margin: 0; font-size: clamp(3.4rem, 12vw, 8rem); }
.hero-line { margin: 1.4rem 0 0; font-size: clamp(1.2rem, 2.4vw, 1.55rem); line-height: 1.4; font-weight: 700; }
.hero-actions { margin: 2rem 0 0; display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; align-items: center; }

.hero-art {
  justify-self: center; display: block; width: min(100%, 27rem);
  color: var(--white); text-decoration: none; transform: rotate(2deg);
}
.hero-art .printout { padding: 1rem; }
.hero-art img { margin: 0 auto; }
.hero-caption {
  display: flex; align-items: center; gap: 0.6rem; margin-top: 1rem;
  font: 700 0.78rem/1.3 var(--mono); text-transform: uppercase; letter-spacing: 0.08em;
}
.hero-caption::before {
  content: ""; flex: none; width: 1.4rem; height: 1.4rem; border: 2px solid var(--green); border-radius: 50%;
}
.hero-art:hover .hero-caption { color: var(--green); }

@media (max-width: 899px) {
  .hero { background-size: 180% auto; background-position: 85% 100%; min-height: 0; }
  .hero-art { transform: rotate(1.5deg); }
}

/* ---------------------------------------------------------------- buttons */
.button {
  display: inline-block; justify-self: start;
  border: 2px solid var(--night); background: var(--green); color: var(--night);
  box-shadow: 5px 5px 0 var(--pink);
  font: 400 1.25rem/1 var(--display); text-transform: uppercase; letter-spacing: 0.04em; text-decoration: none;
  padding: 0.85rem 1.3rem 0.75rem; cursor: pointer;
}
.button:hover { background: var(--cyan); color: var(--night); }
.button:active { transform: translate(3px, 3px); box-shadow: 2px 2px 0 var(--pink); }
.button:disabled {
  background: transparent; color: var(--muted); border-color: var(--muted); border-style: dashed;
  box-shadow: none; cursor: not-allowed; transform: none;
}
.text-link { font-weight: 700; }
.text-link::after { content: " →"; }

/* ---------------------------------------------------------------- the item label (brief §14) */
.plate {
  margin: 0; font: 0.8rem/1.35 var(--mono); display: grid; gap: 0.3rem;
  border-top: 2px solid var(--spot); padding-top: 0.75rem;
}
.plate div { display: grid; grid-template-columns: 7.5rem 1fr; gap: 0.75rem; }
.plate dt { color: var(--muted); text-transform: uppercase; letter-spacing: 0.1em; }
.plate dd { margin: 0; text-transform: uppercase; font-weight: 700; }

/* Shirts without approved artwork yet: the name, set big on a halftone panel. */
.type-panel {
  display: grid; place-items: center; aspect-ratio: 1; width: 100%;
  padding: 1.5rem; text-align: center; container-type: inline-size;
  background: var(--halftone), var(--night);
}
/* Sized from the panel's own width so the longest word (OVERCLOCKED) never breaks mid-word. */
.type-panel span {
  font: 400 clamp(1.4rem, 16cqi, 5rem)/0.95 var(--display); text-transform: uppercase;
  color: var(--spot); text-shadow: 3px 3px 0 var(--ink2); overflow-wrap: break-word;
}

/* ---------------------------------------------------------------- home: current systems */
.systems {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 3.5rem 2.25rem; grid-template-columns: repeat(auto-fill, minmax(min(17rem, 100%), 1fr));
}
.system a { display: block; color: var(--white); text-decoration: none; }
/* Printouts taped to the page at slightly different angles. */
.printout {
  background: var(--panel); border: 2px solid var(--spot); box-shadow: 7px 7px 0 var(--ink2);
  padding: 0.9rem 0.9rem 1.1rem; display: grid; gap: 1rem;
}
.system:nth-child(3n+1) .printout { transform: rotate(-1.2deg); }
.system:nth-child(3n+2) .printout { transform: rotate(0.8deg); }
.system:nth-child(3n) .printout { transform: rotate(-0.4deg); }
.system-art { display: grid; place-items: center; aspect-ratio: 1; background: var(--night); overflow: hidden; }
.system-art img { width: 90%; height: 90%; object-fit: contain; }
.system a:hover .printout { border-color: var(--white); }
.system a:hover .plate dd { color: var(--spot); }
.system a:focus-visible { outline-offset: 10px; }

.systems-small { grid-template-columns: repeat(auto-fill, minmax(min(10rem, 100%), 1fr)); gap: 2.5rem 1.5rem; }
.systems-small .printout { padding: 0.6rem 0.6rem 0.8rem; gap: 0.7rem; box-shadow: 5px 5px 0 var(--ink2); }
.systems-small .plate div { grid-template-columns: 1fr; gap: 0; }
.systems-small .plate div:first-child dt { display: none; }

/* ---------------------------------------------------------------- home: what is Tech Savage */
/* A torn scrap of hot-pink paper, printed in midnight ink. */
.torn {
  background: var(--pink); color: var(--night);
  padding: clamp(2.25rem, 5vw, 3.5rem) clamp(1.5rem, 5vw, 3.5rem);
  transform: rotate(-0.8deg);
  clip-path: polygon(0 3%, 6% 0, 13% 2%, 21% 0, 30% 3%, 38% 1%, 47% 3%, 55% 0, 63% 2%, 72% 0, 80% 3%, 88% 1%, 95% 3%, 100% 0,
                     100% 97%, 94% 100%, 86% 97%, 78% 100%, 69% 98%, 61% 100%, 52% 97%, 44% 100%, 35% 98%, 27% 100%, 18% 97%, 10% 100%, 4% 98%, 0 100%);
}
.about-lines p { margin: 0; font: 400 clamp(1.8rem, 5vw, 3.4rem)/1.02 var(--display); text-transform: uppercase; }
.about-lines p:last-child { margin-top: 0.4em; color: var(--white); text-shadow: 3px 3px 0 var(--night); }

/* ---------------------------------------------------------------- rabbit holes */
.rabbit-hole-feature .panel, .rabbit-hole .panel { max-width: 50rem; }
.rabbit-hole-feature h3, .rabbit-hole h3 { margin: 0 0 1.1rem; font-size: clamp(1.9rem, 4vw, 2.8rem); }
.rabbit-hole-feature p, .rabbit-hole p { max-width: 62ch; margin: 0 0 1.1rem; }
.sources { color: var(--muted); font-size: 0.9rem; }
.sources a { color: var(--muted); }

/* ---------------------------------------------------------------- product */
.breadcrumbs ol {
  list-style: none; margin: 0; padding: 2rem 0 0;
  display: flex; flex-wrap: wrap; gap: 0.5rem;
  font: 700 0.78rem/1.4 var(--mono); text-transform: uppercase; letter-spacing: 0.08em;
}
.breadcrumbs li + li::before { content: "/"; margin-right: 0.5rem; color: var(--pink); }
.breadcrumbs [aria-current] { color: var(--muted); }

.product { display: grid; gap: 3rem; padding-top: 2.5rem; align-items: start; }
@media (min-width: 900px) { .product { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); } }
.product-art .printout { transform: rotate(-1deg); padding: 1.1rem; }
.product-art img { margin: 0 auto; }
.art-credit { margin: 1.4rem 0 0; color: var(--muted); font-size: 0.85rem; }

.product-buy h1 { margin: 1.4rem 0 0.4rem; font-size: clamp(2.6rem, 6vw, 4.4rem); }
.product-buy h2 {
  margin: 2.25rem 0 0.5rem; font: 700 0.8rem/1.4 var(--mono);
  text-transform: uppercase; letter-spacing: 0.14em; color: var(--spot);
}
.product-buy h2 + p { margin-top: 0; }
.product-price { font: 400 2rem/1 var(--display); margin: 1rem 0 0; }

.product-form { display: grid; gap: 1.2rem; margin-top: 1.75rem; }
.option { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.option legend {
  padding: 0; margin-bottom: 0.5rem; width: 100%;
  font: 700 0.78rem/1.4 var(--mono); text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted);
}
.option label {
  display: inline-flex; align-items: center; gap: 0.4rem;
  border: 2px solid var(--muted); padding: 0.35rem 0.75rem; font: 700 0.9rem/1.4 var(--mono);
}
.option label:has(input:disabled) { color: var(--muted); border-style: dashed; }
.product-note { margin: 0; color: var(--muted); font-size: 0.9rem; }

/* ---------------------------------------------------------------- 404 */
.not-found { padding-top: clamp(3rem, 8vw, 6rem); }
.not-found .panel { max-width: 40rem; }
.not-found h1 { margin: 0 0 1.25rem; font-size: clamp(3rem, 10vw, 6rem); }
.not-found p { max-width: 50ch; }

@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; } }