/* ==========================================================================
   Wired Chaos Studio - Version A, "Bench at Night"
   Plain CSS. No build step, no webfont request, no external asset.

   Shape rule (documented, so it can be checked): structure is radius 0,
   interactive controls are full pill. Nothing in between, anywhere.
   ========================================================================== */

:root {
  /* Ground. Off-black, never #000. */
  --bg:        #070b09;
  --bg-raise:  #0c1310;
  --bg-sink:   #050807;

  /* Signals. Green carries structure and primary action. Blue marks anything
     operable. Amber appears three times on the page and always means "hot". */
  --green:     #7cfc9a;
  --green-dim: #3f7d55;
  --blue:      #58c4ff;
  --amber:     #ffb454;

  /* Text. Body is never neon. That is this world's failure mode. */
  --ink:       #dce8e1;
  --ink-soft:  #b3c6bb;
  --ink-mute:  #8ea79a;

  --rule:      rgba(124, 252, 154, 0.16);
  --rule-firm: rgba(124, 252, 154, 0.34);

  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", "Segoe UI Mono", "SF Mono", Menlo,
          Consolas, "Liberation Mono", monospace;

  /* One spacing rhythm for the whole page. */
  --s1: 0.5rem;  --s2: 0.75rem; --s3: 1rem;   --s4: 1.5rem;
  --s5: 2rem;    --s6: 3rem;    --s7: 4.5rem; --s8: 7rem;

  --measure: 64ch;
  --gutter: clamp(1.25rem, 5vw, 5rem);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink-soft);
  font-family: var(--sans);
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3 { color: var(--ink); line-height: 1.08; margin: 0; text-wrap: balance; }
p { margin: 0; }
ol, ul { margin: 0; padding: 0; list-style: none; }

::selection { background: var(--green); color: var(--bg); }

/* --- focus: one visible ring everywhere, never removed ------------------- */
:where(a, button):focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--green); color: var(--bg);
  padding: var(--s2) var(--s4); font-weight: 700;
  text-decoration: none;
}
.skip:focus { left: var(--s3); top: var(--s3); }

/* --- buttons: full pill, both directions of contrast checked ------------- */
.btn {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.875rem;
  letter-spacing: 0.02em;
  text-decoration: none;
  padding: 0.7rem 1.4rem;
  border-radius: 999px;
  border: 1px solid transparent;
  white-space: nowrap;              /* CTA labels never wrap */
  transition: transform 140ms var(--ease), background-color 140ms var(--ease),
              color 140ms var(--ease), border-color 140ms var(--ease);
}
.btn--solid {
  background: var(--green);
  color: var(--bg-sink);            /* 15.1:1 */
  font-weight: 700;
}
.btn--solid:hover { background: #9dffb6; }
.btn--solid:active { transform: translateY(1px); }

.btn--ghost {
  color: var(--green);              /* 15.3:1 on --bg */
  border-color: var(--rule-firm);
  background: transparent;
}
.btn--ghost:hover { border-color: var(--green); background: rgba(124, 252, 154, 0.08); }
.btn--ghost:active { transform: translateY(1px); }

.btn--lg { padding: 0.95rem 2rem; font-size: 1rem; }

/* --- top bar: one line, under 80px --------------------------------------- */
.topbar {
  position: relative; z-index: 3;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
  height: 68px;
  padding: 0 var(--gutter);
  border-bottom: 1px solid var(--rule);
  background: rgba(7, 11, 9, 0.82);
  backdrop-filter: blur(6px);
}
.topbar__mark {
  display: inline-flex; align-items: center; gap: 0.6rem;
  color: var(--ink); text-decoration: none;
  font-family: var(--mono); font-size: 0.875rem; font-weight: 700;
  letter-spacing: 0.02em;
  min-height: 32px;                  /* WCAG 2.2 target size, clears 24px */
}
.topbar__glyph {
  width: 10px; height: 10px; flex: none;
  border: 2px solid var(--green);
  background: transparent;
}
.topbar__cta { font-size: 0.8125rem; padding: 0.5rem 1.1rem; }

/* --- hero ---------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: calc(100dvh - 68px);          /* dvh, never vh */
  display: flex; align-items: flex-end;
  /* Top padding stays modest: the flex end alignment already pushes content
     down, so a tall top pad only forces the hero past the fold on short
     viewports and pushes the CTA out of sight. */
  padding: var(--s6) var(--gutter) var(--s7);
  overflow: hidden;
}
/* Short viewports (landscape phones, short windows): tighten so the CTA
   stays reachable without scrolling. */
@media (max-height: 44rem) {
  .hero { padding-top: var(--s4); padding-bottom: var(--s5); }
  .hero__name { font-size: clamp(2.2rem, 1rem + 5.2vw, 4rem); margin-bottom: var(--s3); }
  .hero__lead { margin-bottom: var(--s4); }
  .badge { margin-bottom: var(--s3); }
}
/* --- the trace field ------------------------------------------------------
   Fixed to the viewport and behind everything, so the current keeps running
   the whole way down the page instead of scrolling away with the hero.
   Add ?bg=hero to the URL to get the old behaviour back for comparison.
   -------------------------------------------------------------------------- */
.field {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
  pointer-events: none;      /* never intercepts a click or a text selection */
}

/* Everything real sits above the field. */
.topbar, main, .foot { position: relative; z-index: 1; }

/* --- content scrims -------------------------------------------------------
   A soft pool of ground colour behind each block of text: near solid where the
   words are, fading to nothing at the edges, so the field keeps running
   between sections instead of being boxed off by hard panels.

   This is what makes the fixed field safe. Body copy sits over the traces for
   the whole page now, and the muted ink used by the arm switch measured
   3.41:1 against a pulse head, well under AA. Under the scrim it is back to
   about 6.9:1.

   z-index -1 keeps it behind the text without needing every child raised:
   .topbar, main and .foot each create a stacking context, so a negative child
   stays inside its section and still paints above the field.
   -------------------------------------------------------------------------- */
.origin__inner,
.ratings__inner,
.builds__inner,
.contact__inner,
.foot__inner { position: relative; }

.origin__inner::before,
.ratings__inner::before,
.builds__inner::before,
.contact__inner::before,
.foot__inner::before {
  content: "";
  position: absolute;
  /* Generous bleed so the fade has somewhere to happen and no text ever
     lands in the transparent tail. */
  inset: -3rem -4rem;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(
    ellipse at center,
    rgba(7, 11, 9, 0.93) 0%,
    rgba(7, 11, 9, 0.93) 55%,
    rgba(7, 11, 9, 0.70) 76%,
    rgba(7, 11, 9, 0) 100%
  );
}

/* Comparison mode: pin the field to the first viewport at the top of the
   document so it scrolls away, which is what it did before. Absolute with no
   positioned ancestor resolves against the initial containing block. */
.bg-hero .field {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 100dvh;
  inset: auto;
}
.hero__veil {
  position: absolute; inset: 0;
  background:
    linear-gradient(to top, var(--bg) 2%, rgba(7,11,9,0.86) 34%, rgba(7,11,9,0.35) 72%),
    linear-gradient(to right, var(--bg) 0%, rgba(7,11,9,0.55) 45%, rgba(7,11,9,0) 80%);
}
/* Wide enough for the wordmark lockup to hold two lines at the TOP of the type
   scale, which is where it breaks. At 7rem "Wired Chaos" needs about 652px;
   74ch measured 652px exactly and wrapped on rounding, so this carries real
   headroom rather than passing by zero. Viewport gutters cap it naturally on
   narrow screens. The lead keeps its own 38ch measure, so widening here costs
   nothing in readability. */
.hero__body { position: relative; max-width: 80ch; }

.badge {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--green);
  border: 1px solid var(--rule-firm);
  padding: 0.4rem 0.85rem;
  margin-bottom: var(--s4);
}

.hero__name {
  font-size: clamp(2.9rem, 1.4rem + 7.4vw, 7rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  margin-bottom: var(--s4);
}
/* Real spaces between the words, so the accessible name is "Wired Chaos
   Studio" and not "Wired ChaosStudio", while still breaking the line.

   text-wrap is reset to wrap because the inherited `balance` from the global
   heading rule was splitting "Wired Chaos" into two lines on its own, giving a
   three line wordmark. With balance off and the container widened above, it
   holds two lines on every real viewport. Deliberately NOT nowrap: nowrap
   would guarantee the lockup but overflow the page below about 300px, and a
   graceful drop to three lines on a folding phone beats a sideways scroll. */
.hero__name { text-wrap: wrap; }
.hero__name .line { display: block; }
.hero__lead {
  font-size: clamp(1.0625rem, 0.94rem + 0.6vw, 1.4rem);
  color: var(--ink-soft);
  line-height: 1.42;
  max-width: 38ch;
  margin-bottom: var(--s5);
}
.br-lg { display: none; }
@media (min-width: 60rem) { .br-lg { display: inline; } }

/* --- shared section furniture -------------------------------------------- */
.h2 {
  font-size: clamp(1.6rem, 1.25rem + 1.5vw, 2.5rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  margin-bottom: var(--s5);          /* more space above than below, set per section */
}
.h2--lg { font-size: clamp(2rem, 1.4rem + 2.8vw, 3.6rem); }

/* --- origin: offset two column, left rule -------------------------------- */
.origin { padding: var(--s8) var(--gutter); border-top: 1px solid var(--rule); }
.origin__inner { max-width: 74rem; margin-inline: auto; }
.origin__cols { display: grid; gap: var(--s6); }
@media (min-width: 56rem) {
  .origin__cols { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: var(--s7); }
}
.origin__prose { border-left: 1px solid var(--rule); padding-left: var(--s4); }
.origin__prose p { max-width: var(--measure); }
.origin__prose p + p { margin-top: var(--s4); }

.origin__kicker { align-self: end; }
.origin__title {
  font-family: var(--mono);
  font-size: 1rem;
  color: var(--blue);                /* 10.1:1 */
  letter-spacing: 0.01em;
  margin-bottom: var(--s1);
}
.origin__sub { color: var(--ink-mute); font-size: 0.9375rem; }

/* --- ratings: the spec table in this world's own vocabulary ----------------
   Not paper. It reads as an instrument readout: raised panel, mono throughout,
   tabular figures so the columns line up, hairlines between rows only. The one
   amber row is the one whose maximum is a bad outcome, which is what amber
   means everywhere else on this page.
   -------------------------------------------------------------------------- */
.ratings { padding: var(--s8) var(--gutter); border-top: 1px solid var(--rule); }
.ratings__inner { max-width: 74rem; margin-inline: auto; }
.ratings__intro {
  color: var(--ink-mute);
  max-width: 46ch;
  margin-top: calc(var(--s5) * -1 + var(--s2));
  margin-bottom: var(--s6);
}

.tablewrap {
  overflow-x: auto;
  background: var(--bg-raise);
  border: 1px solid var(--rule);
  padding: var(--s4);
  /* Square corners: this is structure, and structure here is radius 0. */
  border-radius: 0;
}
.tablewrap:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }

.rt {
  width: 100%;
  min-width: 40rem;
  border-collapse: collapse;
  font-family: var(--mono);
  font-size: 0.8125rem;
}
.rt th, .rt td { text-align: left; padding: 0.65rem 0.9rem 0.65rem 0; vertical-align: baseline; }

.rt thead th {
  color: var(--green);                 /* 14.5:1 on the raised panel */
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding-bottom: var(--s2);
  border-bottom: 1px solid var(--rule-firm);
  white-space: nowrap;
}

.rt tbody th {
  font-family: var(--sans);
  font-size: 0.9375rem;
  font-weight: 400;
  color: var(--ink);
}
/* One hairline between rows. Never top and bottom on every row. */
.rt tbody tr + tr th,
.rt tbody tr + tr td { border-top: 1px solid var(--rule); }

.rt .num {
  text-align: right;
  padding-right: var(--s4);
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.rt .sym  { color: var(--ink-mute); white-space: nowrap; }
.rt .unit { color: var(--ink-mute); white-space: nowrap; }

/* The hot row. Amber is this page's "this one is hot" and nothing else.
   Scoped through tbody tr so it outranks `.rt tbody th` and `.rt .num`, which
   are more specific than a bare `.rt__hot th` and were winning. */
.rt tbody tr.rt__hot th,
.rt tbody tr.rt__hot .sym,
.rt tbody tr.rt__hot .num,
.rt tbody tr.rt__hot .unit { color: var(--amber); }

.note {
  margin-top: var(--s4);
  max-width: 64ch;
  font-size: 0.875rem;
  color: var(--ink-mute);
  padding-left: var(--s4);
  border-left: 1px solid var(--rule);
}
.note__k { font-family: var(--mono); color: var(--green); font-weight: 700; }

/* Screen reader only. The infinity glyph is decorative to assistive tech,
   which would otherwise read it as nothing useful. */
.sr {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* --- builds: staggered, deliberately not three equal cards ---------------- */
.builds { padding: var(--s8) var(--gutter); border-top: 1px solid var(--rule); }
.builds__inner { max-width: 74rem; margin-inline: auto; }
.builds__intro { color: var(--ink-mute); max-width: 46ch; margin-top: calc(var(--s5) * -1 + var(--s2)); margin-bottom: var(--s7); }

.builds__list { display: grid; gap: var(--s6); }
@media (min-width: 56rem) {
  .builds__list { grid-template-columns: repeat(12, 1fr); gap: var(--s6) var(--s5); }
  .build              { grid-column: 4 / span 6; }
  .build--wide        { grid-column: 1 / span 8; }
  .build--hot         { grid-column: 5 / span 8; }
}

.build { position: relative; padding-left: var(--s4); }
.build__rule {
  position: absolute; left: 0; top: 0.3rem; bottom: 0.3rem;
  width: 1px; background: var(--rule-firm);
  transition: background-color 220ms var(--ease);
}
.build:hover .build__rule,
.build:focus-within .build__rule { background: var(--green); }
.build--hot .build__rule { background: rgba(255, 180, 84, 0.42); }
.build--hot:hover .build__rule { background: var(--amber); }

.build__h {
  font-size: clamp(1.15rem, 1.02rem + 0.55vw, 1.5rem);
  font-weight: 700; letter-spacing: -0.015em;
  margin-bottom: var(--s2);
}
.build__p { max-width: 58ch; }
.build__aside {
  margin-top: var(--s3);
  font-family: var(--mono);
  font-size: 0.8125rem;
  color: var(--amber);               /* 11.2:1 */
  letter-spacing: 0.01em;
}

/* --- contact -------------------------------------------------------------- */
/* Deliberately no background fill. A solid block here would cut a hole in the
   field halfway down the page and break the one thing the fixed background is
   for. The hairline above it still does the separating. */
.contact {
  padding: var(--s8) var(--gutter);
  border-top: 1px solid var(--rule);
}
.contact__inner { max-width: 62rem; margin-inline: auto; }
.contact__p { max-width: 52ch; margin-bottom: var(--s5); }

.contact__mail { margin-bottom: var(--s5); }
.contact__link {
  display: inline-flex; align-items: center;
  min-height: 32px;                  /* WCAG 2.2 target size, clears 24px */
  font-family: var(--mono);
  font-size: clamp(1rem, 0.86rem + 0.7vw, 1.375rem);
  color: var(--blue);
  text-decoration: none;
  border-bottom: 1px solid rgba(88, 196, 255, 0.4);
  padding-bottom: 2px;
  word-break: break-word;
}
.contact__link:hover { border-bottom-color: var(--blue); }

/* --- footer --------------------------------------------------------------- */
.foot {
  padding: var(--s6) var(--gutter) var(--s7);
  border-top: 1px solid var(--rule);
}
.foot__inner { max-width: 74rem; margin-inline: auto; }

.arm { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.arm__switch {
  display: inline-flex; align-items: center; gap: 0.6rem;
  background: transparent; border: 1px solid var(--rule-firm);
  border-radius: 999px;
  padding: 0.4rem 0.9rem 0.4rem 0.5rem;
  cursor: pointer;
  font-family: var(--mono); font-size: 0.8125rem; letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-mute);
  transition: color 180ms var(--ease), border-color 180ms var(--ease);
}
.arm__switch:hover { color: var(--ink); border-color: var(--green); }
.arm__track {
  position: relative; width: 34px; height: 18px; flex: none;
  border: 1px solid var(--rule-firm); border-radius: 999px;
  background: var(--bg-sink);
  transition: border-color 180ms var(--ease), background-color 180ms var(--ease);
}
.arm__lever {
  position: absolute; top: 2px; left: 2px;
  width: 12px; height: 12px; border-radius: 999px;
  background: var(--ink-mute);
  transition: transform 200ms var(--ease), background-color 200ms var(--ease);
}
.arm__switch[aria-pressed="true"] { color: var(--amber); border-color: rgba(255,180,84,0.55); }
.arm__switch[aria-pressed="true"] .arm__track { border-color: var(--amber); }
.arm__switch[aria-pressed="true"] .arm__lever { transform: translateX(16px); background: var(--amber); }

.arm__hint { font-family: var(--mono); font-size: 0.75rem; color: var(--ink-mute); }

.stamp {
  margin-top: var(--s5);
  display: inline-block;
  font-family: var(--mono);
  font-size: clamp(0.9rem, 0.8rem + 0.5vw, 1.2rem);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--amber);
  border: 2px solid rgba(255, 180, 84, 0.5);
  padding: 0.6rem 1.1rem;
  transform: rotate(-2.5deg);
}
.stamp[hidden] { display: none; }

.foot__colophon {
  margin-top: var(--s6);
  font-size: 0.875rem;
  color: var(--ink-mute);
  max-width: 54ch;
}

/* --- motion ---------------------------------------------------------------
   Everything that moves is ambient. Nothing that carries meaning animates.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .arm__lever { transition: none; }
}

@media (prefers-reduced-transparency: reduce) {
  .topbar { backdrop-filter: none; background: var(--bg); }
}

/* --- small screens --------------------------------------------------------- */
@media (max-width: 34rem) {
  .topbar__cta { display: none; }        /* CTA still reachable in hero and contact */
  .hero { padding-top: var(--s7); }
  .origin__prose { padding-left: var(--s3); }
  .tablewrap { padding: var(--s3); }
  .note { padding-left: var(--s3); }
}