/* ==========================================================================
   TIDEGEAR.NET — core design system
   Minimal black-on-white. Hairline grids, expanded grotesque display type,
   monospace data furniture, circular dials, halftone fields.
   Reference points: The Designers Republic / WipEout / Y2K / Marathon /
   Metal Gear Ac!d 2.
   ========================================================================== */

/* --- tokens ------------------------------------------------------------- */

:root {
  --paper: #ffffff;
  --ink:   #000000;

  /* bright, used sparingly — one accent per page */
  --orange: #ff4d00;
  --volt:   #c6ff00;
  --blue:   #0a1fff;
  --cyan:   #00e5ff;
  --mag:    #ff00aa;

  /* --accent      = fills, blocks, hover plates (always the bright hue)
     --accent-lt   = the hue darkened enough to read as small text on a LIGHT ground
     --accent-text = whichever of the two suits the surface it sits on
     --on-accent   = text drawn on top of an --accent fill */
  --accent:      var(--orange);
  --accent-lt:   #b83200;
  --accent-text: var(--accent-lt);
  --on-accent:   #000000;

  --gut:  clamp(16px, 4vw, 40px);
  --maxw: 1320px;
  --hair: 1px solid currentColor;

  --mono: "Space Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --sans: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --ease: cubic-bezier(.2, .7, .2, 1);

  color-scheme: light;
}

[data-accent="orange"] { --accent: var(--orange); --accent-lt: #b83200; --on-accent: #000; }
[data-accent="blue"]   { --accent: var(--blue);   --accent-lt: var(--blue); --on-accent: #fff; }
[data-accent="mag"]    { --accent: var(--mag);    --accent-lt: #b8007a; --on-accent: #000; }
[data-accent="volt"]   { --accent: var(--volt);   --accent-lt: #536b00; --on-accent: #000; }
[data-accent="cyan"]   { --accent: var(--cyan);   --accent-lt: #006b7d; --on-accent: #000; }

/* Negative plate is the default (set in the markup). On a dark ground the
   undimmed hue is the legible one, so --accent-text flips to the bright value.
   A .plate--ink band is the opposite of whatever the page is, so it flips back
   — see the rule beside .plate--ink below. */
:root[data-invert="on"] {
  --paper: #000000;
  /* Not pure white. On a black page the light surfaces are large (header,
     plate bands, the wedge) and #fff glares; this also stops body text
     haloing. Still 16:1 against black, so contrast is untouched. */
  --ink: #e3e3e0;
  --accent-text: var(--accent);
  color-scheme: dark;
}

/* --- reset -------------------------------------------------------------- */

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
h1, h2, h3, h4, p, ul, ol, figure, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }

a { color: inherit; text-decoration: none; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

::selection { background: var(--accent); color: var(--on-accent); }

/* --- type --------------------------------------------------------------- */

.display {
  font-weight: 900;
  font-stretch: 125%;
  text-transform: uppercase;
  letter-spacing: -0.025em;
  line-height: 0.82;
  margin: 0;
}

.t-xxl { font-size: clamp(3rem, 13.5vw, 10.5rem); }
/* for titles in a full-width hero, with no side plate to collide with */
.t-long { font-size: clamp(2.4rem, 9vw, 7.5rem); }

/* Hero headlines beside a plate are sized against their OWN column rather
   than the viewport, so they fill the space exactly however the sidebar and
   gutter work out at a given width.
   --fit comes from measuring the title's longest word in Archivo 900 at
   wdth 125: a word measuring W px at font-size 100px fills its column at
   (100 / W * 100)cqi. Measured: WARNING 18.98, CORNCOB 18.40, SIMULATOR
   15.78, HIGH-MACS 16.13. Each page sets a slightly smaller value. */
.hero__col { container-type: inline-size; }

.t-fit { font-size: clamp(2.2rem, 9vw, 7.5rem); }   /* pre-container-query fallback */
@supports (container-type: inline-size) {
  .t-fit { font-size: min(var(--fit, 18cqi), var(--fit-max, 10.5rem)); }
}
.t-xl  { font-size: clamp(2.2rem, 7.5vw,  5.2rem); }
.t-l   { font-size: clamp(1.6rem, 4.2vw,  2.9rem); }

.lede {
  font-size: clamp(1.05rem, 1.9vw, 1.45rem);
  line-height: 1.45;
  letter-spacing: -0.01em;
  max-width: 62ch;
}

.body { font-size: 1rem; line-height: 1.6; max-width: 68ch; }
.body + .body { margin-top: 1em; }

.mono {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.4;
}

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

.dim { opacity: 0.5; }
.hot { color: var(--accent-text); }
.em  { font-style: italic; }

strong, .strong { font-weight: 700; }

/* inline links inside prose */
.body a, .lede a, .li-text a {
  font-weight: 700;
  box-shadow: inset 0 -1px 0 var(--ink);
  transition: background .15s var(--ease), box-shadow .15s var(--ease), color .15s var(--ease);
}
.body a:hover, .lede a:hover, .li-text a:hover {
  background: var(--accent);
  color: var(--on-accent);
  box-shadow: inset 0 -1px 0 transparent;
}

/* --- layout ------------------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gut);
}

.section { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.section--tight { padding-block: clamp(2rem, 5vw, 3.5rem); }

.grid { display: grid; gap: clamp(1.25rem, 3vw, 2.5rem); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--sidebar { grid-template-columns: minmax(0, 1fr) clamp(230px, 25vw, 320px); }

@media (max-width: 900px) {
  .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* A sidebar layout must not become 50/50 — that starves the main column and
     long display headlines overflow it. Stack instead. */
  .grid--sidebar { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .grid--2, .grid--3, .grid--sidebar { grid-template-columns: minmax(0, 1fr); }
}

/* --- viewport furniture ------------------------------------------------- */

.regs { position: fixed; inset: 0; pointer-events: none; z-index: 60; }
.regs span { position: absolute; width: 9px; height: 9px; opacity: .65; }
.regs span::before, .regs span::after { content: ""; position: absolute; background: var(--ink); }
.regs span::before { left: 0; right: 0; top: 50%; height: 1px; }
.regs span::after  { top: 0; bottom: 0; left: 50%; width: 1px; }
.regs .tl { top: 10px;    left: 10px; }
.regs .tr { top: 10px;    right: 10px; }
.regs .bl { bottom: 10px; left: 10px; }
.regs .br { bottom: 10px; right: 10px; }
@media (max-width: 760px) { .regs { display: none; } }

.rail {
  position: fixed; top: 0; bottom: 0; width: 10px; z-index: 55;
  pointer-events: none;
  background-image: repeating-linear-gradient(to bottom, var(--ink) 0 1px, transparent 1px 16px);
  opacity: .22;
}
.rail--l { left: 0; }
.rail--r { right: 0; }
@media (max-width: 1200px) { .rail { display: none; } }

/* --- header ------------------------------------------------------------- */

.hdr {
  position: sticky; top: 0; z-index: 50;
  background: var(--paper);
  border-bottom: var(--hair);
}

.hdr__bar { display: flex; align-items: center; gap: 1rem; height: 48px; }

.brand {
  display: flex; align-items: center; gap: .5rem;
  font-weight: 900; font-stretch: 112%;
  text-transform: uppercase; letter-spacing: -0.01em;
  font-size: .95rem; white-space: nowrap;
}
.brand .mark {
  width: 14px; height: 14px; background: var(--accent); flex: none;
  transition: border-radius .2s var(--ease);
}
.brand:hover .mark { border-radius: 50%; }

.hdr__nav { display: flex; align-items: center; margin-left: auto; }

.navlink {
  font-family: var(--mono); font-size: .625rem; letter-spacing: .18em;
  text-transform: uppercase;
  padding: .45rem .7rem;
  border-left: var(--hair);
  transition: background .12s var(--ease), color .12s var(--ease);
  white-space: nowrap;
}
.navlink:last-child { border-right: var(--hair); }
.navlink:hover { background: var(--ink); color: var(--paper); }
.navlink[aria-current="page"] { background: var(--accent); color: var(--on-accent); }

.navlink--toggle {
  cursor: pointer; background: none; color: inherit;
  border: 0; border-left: var(--hair);
  font-family: var(--mono); font-size: .625rem; letter-spacing: .18em; text-transform: uppercase;
}

@media (max-width: 760px) {
  .hdr__bar { height: auto; flex-wrap: wrap; padding-block: .5rem; row-gap: .4rem; }
  .hdr__nav { margin-left: 0; width: 100%; overflow-x: auto; scrollbar-width: none; }
  .hdr__nav::-webkit-scrollbar { display: none; }
  .navlink, .navlink--toggle { padding: .4rem .55rem; }
}

/* hazard strip */
/* The stops carry a ~0.7px ramp. A hard stop on a 45-degree gradient is not
   antialiased by the compositor, so the stripe edges come out visibly jagged. */
.hazard {
  height: 7px;
  background-image: repeating-linear-gradient(-45deg,
    var(--ink) 0, var(--ink) 5.4px, transparent 6.1px,
    transparent 11.4px, var(--ink) 12px);
}
.hazard--accent {
  background-image: repeating-linear-gradient(-45deg,
    var(--accent) 0, var(--accent) 5.4px, transparent 6.1px,
    transparent 11.4px, var(--accent) 12px);
}

/* --- ticker ------------------------------------------------------------- */

.ticker { border-block: var(--hair); overflow: hidden; background: var(--paper); }
.ticker__track { display: flex; width: max-content; animation: tg-slide 42s linear infinite; }
.ticker__set { display: flex; flex: none; }
.ticker__item {
  font-family: var(--mono); font-size: .625rem; letter-spacing: .2em;
  text-transform: uppercase;
  padding: .45rem 0;
  white-space: nowrap;
}
.ticker__item::after {
  content: "\273F"; color: var(--accent-text);
  margin-inline: 1.4rem; font-size: .5rem; vertical-align: middle;
}
@keyframes tg-slide { to { transform: translateX(-50%); } }

/* --- section heads ------------------------------------------------------ */

.shead {
  display: flex; align-items: baseline; gap: 1rem;
  border-bottom: 3px double currentColor;
  padding-bottom: .55rem;
  margin-bottom: clamp(1.25rem, 3vw, 2rem);
}
.shead__n {
  font-family: var(--mono); font-size: .625rem; letter-spacing: .16em;
  background: var(--accent); color: var(--on-accent);
  padding: .2rem .45rem; flex: none;
}
.shead__t {
  font-weight: 900; font-stretch: 118%; text-transform: uppercase;
  letter-spacing: -0.015em;
  font-size: clamp(1.05rem, 2.4vw, 1.6rem);
  line-height: 1;
}
.shead__m {
  margin-left: auto;
  font-family: var(--mono); font-size: .5625rem; letter-spacing: .16em;
  text-transform: uppercase; opacity: .45; white-space: nowrap;
}
@media (max-width: 560px) { .shead__m { display: none; } }

/* --- index rows (big menu) ---------------------------------------------- */

.rows { border-top: var(--hair); }

.row {
  position: relative;
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr) auto 2.5rem;
  align-items: center;
  gap: 1rem;
  padding: clamp(1rem, 2.6vw, 1.6rem) 0;
  border-bottom: var(--hair);
  transition: background .18s var(--ease), color .18s var(--ease), padding-inline .18s var(--ease);
}
.row::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 0;
  background: var(--accent);
  transition: width .18s var(--ease);
}
.row:hover, .row:focus-visible {
  background: var(--ink); color: var(--paper);
  padding-inline: 1rem;
  outline: none;
}
.row:hover::before, .row:focus-visible::before { width: 4px; }

.row__n { font-family: var(--mono); font-size: .6875rem; letter-spacing: .14em; opacity: .55; }
.row:hover .row__n, .row:focus-visible .row__n { color: var(--accent); opacity: 1; }

.row__t {
  font-weight: 900; font-stretch: 118%; text-transform: uppercase;
  letter-spacing: -0.02em; line-height: .95;
  font-size: clamp(1.35rem, 4.4vw, 2.6rem);
}
.row__m {
  font-family: var(--mono); font-size: .5625rem; letter-spacing: .16em;
  text-transform: uppercase; opacity: .55; text-align: right;
}
.row__a { font-size: 1.1rem; justify-self: end; transition: transform .18s var(--ease); }
.row:hover .row__a, .row:focus-visible .row__a { transform: translateX(6px); color: var(--accent); }

@media (max-width: 760px) {
  .row { grid-template-columns: 2.6rem minmax(0, 1fr) 1.5rem; row-gap: .25rem; }
  .row__m { grid-column: 2 / 3; text-align: left; }
  .row__a { grid-row: 1 / 3; grid-column: 3; align-self: center; }
}

/* --- panels ------------------------------------------------------------- */

.panel { border: var(--hair); }

.panel__hd {
  display: flex; align-items: center; gap: .6rem;
  padding: .4rem .7rem;
  border-bottom: var(--hair);
  font-family: var(--mono); font-size: .5625rem; letter-spacing: .18em;
  text-transform: uppercase;
}
.panel__hd .dot { width: 6px; height: 6px; background: var(--accent); flex: none; border-radius: 50%; }
.panel__hd .pos { margin-left: auto; opacity: .45; }
.panel__bd { padding: clamp(.9rem, 2vw, 1.25rem); }

.panel--solid { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.panel--solid .panel__hd { border-bottom-color: color-mix(in srgb, var(--paper) 35%, transparent); }

/* spec list with dotted leaders */
.spec { font-family: var(--mono); font-size: .625rem; letter-spacing: .1em; text-transform: uppercase; }
.spec div { display: flex; align-items: baseline; gap: .5rem; padding: .32rem 0; }
.spec div + div { border-top: 1px dotted color-mix(in srgb, currentColor 35%, transparent); }
.spec dt { opacity: .45; flex: none; }
.spec dd { margin: 0; margin-left: auto; text-align: right; font-weight: 700; }

/* --- buttons ------------------------------------------------------------ */

.btn {
  display: inline-flex; align-items: center; gap: .7rem;
  background: var(--ink); color: var(--paper);
  padding: .7rem 1.1rem;
  font-family: var(--mono); font-size: .6875rem; letter-spacing: .16em;
  text-transform: uppercase; font-weight: 700;
  clip-path: polygon(0 0, calc(100% - 11px) 0, 100% 11px, 100% 100%, 11px 100%, 0 calc(100% - 11px));
  transition: background .15s var(--ease), color .15s var(--ease);
}
.btn:hover { background: var(--accent); color: var(--on-accent); }
.btn__a { transition: transform .15s var(--ease); }
.btn:hover .btn__a { transform: translateX(4px); }

.btn--ghost {
  background: transparent; color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--ink);
  clip-path: none;
}
.btn--ghost:hover { background: var(--ink); color: var(--paper); }

.btn--sm { padding: .5rem .8rem; font-size: .5625rem; }

.btn-row { display: flex; flex-wrap: wrap; gap: .6rem; }

/* --- download list ------------------------------------------------------ */

.dl { border-top: var(--hair); }
.dl__item {
  display: grid;
  grid-template-columns: 2.4rem minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: center;
  padding: 1.1rem 0;
  border-bottom: var(--hair);
}
.dl__n { font-family: var(--mono); font-size: .625rem; letter-spacing: .14em; color: var(--accent-text); }
.dl__t {
  font-weight: 700; font-stretch: 108%; letter-spacing: -0.005em;
  font-size: 1.0625rem; line-height: 1.25; text-transform: uppercase;
}
.dl__d { font-size: .875rem; line-height: 1.5; opacity: .72; margin-top: .35rem; max-width: 62ch; }
.dl__links { display: flex; flex-wrap: wrap; gap: .5rem; justify-self: end; }
@media (max-width: 760px) {
  .dl__item { grid-template-columns: 2.2rem minmax(0, 1fr); }
  .dl__links { grid-column: 2; justify-self: start; }
}

/* --- link grid ---------------------------------------------------------- */

.lgrid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  border-left: var(--hair); border-top: var(--hair);
}
.lgrid a {
  position: relative;
  display: flex; flex-direction: column; gap: .35rem;
  padding: 1rem .9rem 1.1rem;
  border-right: var(--hair); border-bottom: var(--hair);
  transition: background .15s var(--ease), color .15s var(--ease);
  min-height: 96px;
}
.lgrid a:hover { background: var(--accent); color: var(--on-accent); }
.lgrid .k { font-family: var(--mono); font-size: .5625rem; letter-spacing: .18em; text-transform: uppercase; opacity: .5; }
.lgrid a:hover .k { opacity: .85; }
.lgrid .v {
  font-weight: 900; font-stretch: 112%; text-transform: uppercase;
  letter-spacing: -0.01em; font-size: 1.15rem; line-height: 1; margin-top: auto;
}
.lgrid .x {
  position: absolute; top: .7rem; right: .8rem; font-size: .75rem; opacity: .4;
  transition: transform .15s var(--ease), opacity .15s;
}
.lgrid a:hover .x { opacity: 1; transform: translate(3px, -3px); }

/* --- bullet list -------------------------------------------------------- */

.li { display: grid; gap: .55rem; }
.li li { display: grid; grid-template-columns: 1.4rem minmax(0, 1fr); align-items: start; }
.li li::before { content: "\25B6"; font-size: .5rem; line-height: 1.9; color: var(--accent-text); }
.li-text { font-size: .9375rem; line-height: 1.55; }

/* --- figures ------------------------------------------------------------ */

/* Screenshots sit at their native pixel size, so nothing is resampled and the
   edges stay clean; below that they scale down with normal smoothing. */
.shot { border: var(--hair); background: var(--ink); width: fit-content; max-width: 100%; }
.shot img { width: auto; max-width: 100%; height: auto; margin-inline: auto; }
.shot figcaption {
  border-top: var(--hair);
  background: var(--paper); color: var(--ink);
  padding: .35rem .6rem;
  font-family: var(--mono); font-size: .5625rem; letter-spacing: .16em;
  text-transform: uppercase; opacity: .6;
}

/* --- dials / halftone / grid (MGA2 furniture) --------------------------- */

.dial .spin { transform-origin: 50% 50%; animation: tg-spin 24s linear infinite; }
.dial .spin--rev { animation-duration: 38s; animation-direction: reverse; }
@keyframes tg-spin { to { transform: rotate(360deg); } }

.halftone {
  background-image: radial-gradient(currentColor .75px, transparent 1.9px);
  background-size: 7px 7px;
  opacity: .22;
}

.gridfield {
  background-image:
    repeating-linear-gradient(to right,  color-mix(in srgb, currentColor 13%, transparent) 0 1px, transparent 1px 44px),
    repeating-linear-gradient(to bottom, color-mix(in srgb, currentColor 13%, transparent) 0 1px, transparent 1px 44px);
}

/* --- footer ------------------------------------------------------------- */

.ftr { border-top: var(--hair); margin-top: clamp(3rem, 7vw, 5rem); }
.ftr__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.ftr__cell { padding: 1.1rem 0; }
.ftr__cell + .ftr__cell { border-left: var(--hair); padding-left: 1.1rem; }
@media (max-width: 760px) {
  .ftr__cell + .ftr__cell { border-left: 0; border-top: var(--hair); padding-left: 0; }
}
.ftr__k { font-family: var(--mono); font-size: .5625rem; letter-spacing: .18em; text-transform: uppercase; opacity: .45; margin-bottom: .35rem; }
.ftr__v { font-size: .875rem; font-weight: 700; line-height: 1.45; }
.ftr__v a { box-shadow: inset 0 -1px 0 currentColor; }
.ftr__v a:hover { color: var(--accent-text); }

.ftr__base {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.5rem;
  border-top: var(--hair);
  padding-block: .8rem;
  font-family: var(--mono); font-size: .5625rem; letter-spacing: .16em;
  text-transform: uppercase; opacity: .55;
}
.ftr__base .sp { margin-left: auto; }

/* --- misc --------------------------------------------------------------- */

.hr { border: 0; border-top: var(--hair); }

.tag {
  display: inline-block;
  font-family: var(--mono); font-size: .5625rem; letter-spacing: .18em; text-transform: uppercase;
  padding: .18rem .45rem;
  box-shadow: inset 0 0 0 1px currentColor;
}
.tag--fill { background: var(--accent); color: var(--on-accent); box-shadow: none; }
.tag--ink  { background: var(--ink); color: var(--paper); box-shadow: none; }
.tag--volt { background: var(--volt); color: #000; box-shadow: none; }

.taglist { display: flex; flex-wrap: wrap; gap: .35rem; }

.skip {
  position: absolute; left: -9999px;
  background: var(--ink); color: var(--paper); padding: .6rem 1rem;
  font-family: var(--mono); font-size: .6875rem; letter-spacing: .14em; text-transform: uppercase;
  z-index: 100;
}
.skip:focus { left: var(--gut); top: .5rem; }

.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ==========================================================================
   PLATES — full-bleed bands of flat colour.
   Everything inside a plate paints from currentColor, so hairlines, borders
   and fields invert automatically.
   ========================================================================== */

.plate         { background: var(--paper); color: var(--ink); }
.plate--ink    { background: var(--ink);    color: var(--paper); --accent-text: var(--accent); }
.plate--accent { background: var(--accent); color: var(--on-accent); --accent-text: currentColor; }

/* An ink plate is always the inverse of the page, so on a negative page it is
   a LIGHT band and the accent has to darken again to stay readable on it. */
:root[data-invert="on"] .plate--ink { --accent-text: var(--accent-lt); }

/* section heads */
.plate--accent .shead__n { background: var(--ink); color: var(--paper); }

/* big menu rows: on black, the hover plate is the accent */
.plate--ink .row:hover,
.plate--ink .row:focus-visible { background: var(--accent); color: var(--on-accent); }
.plate--ink .row:hover::before,
.plate--ink .row:focus-visible::before { background: var(--ink); }
.plate--ink .row:hover .row__n,
.plate--ink .row:focus-visible .row__n,
.plate--ink .row:hover .row__a,
.plate--ink .row:focus-visible .row__a { color: inherit; opacity: 1; }

.plate--accent .row:hover,
.plate--accent .row:focus-visible { background: var(--ink); color: var(--paper); }
.plate--accent .row:hover .row__n,
.plate--accent .row:focus-visible .row__n,
.plate--accent .row:hover .row__a,
.plate--accent .row:focus-visible .row__a { color: var(--accent); opacity: 1; }

/* buttons invert so they stay visible on a dark plate */
.plate--ink .btn { background: var(--paper); color: var(--ink); }
.plate--ink .btn:hover { background: var(--accent); color: var(--on-accent); }
.plate--ink .btn--ghost { background: transparent; color: var(--paper); box-shadow: inset 0 0 0 1px currentColor; }
.plate--ink .btn--ghost:hover { background: var(--paper); color: var(--ink); }

/* on an accent plate the accent hover would vanish — flip to paper instead */
.plate--accent .btn:hover { background: var(--paper); color: var(--ink); }

/* prose links */
.plate--ink .body a:hover, .plate--ink .lede a:hover, .plate--ink .li-text a:hover {
  background: var(--accent); color: var(--on-accent);
}
.plate--accent .body a:hover, .plate--accent .lede a:hover, .plate--accent .li-text a:hover {
  background: var(--ink); color: var(--paper);
}

/* a solid panel inside a plate would vanish — draw it as an outline instead */
.plate--ink .panel--solid,
.plate--accent .panel--solid { background: transparent; color: inherit; border-color: currentColor; }

.plate--accent .panel__hd .dot,
.plate--accent .brand .mark { background: var(--ink); }

/* --- header / footer on black ------------------------------------------- */

.hdr--ink { background: var(--ink); color: var(--paper); }
.hdr--ink .navlink:hover,
.hdr--ink .navlink[aria-current="page"] { background: var(--accent); color: var(--on-accent); }

/* --- ticker variants ----------------------------------------------------- */

.ticker--accent { background: var(--accent); color: var(--on-accent); }
.ticker--ink    { background: var(--ink);    color: var(--paper); }
.ticker--accent .ticker__item::after,
.ticker--ink .ticker__item::after { color: inherit; opacity: .55; }
.ticker--ink .ticker__item::after { color: var(--accent); opacity: 1; }

/* --- multicolour tile grid ----------------------------------------------- */

.lgrid--color a { color: #000; }
.lgrid--color a:nth-child(6n+1) { background: var(--orange); }
.lgrid--color a:nth-child(6n+2) { background: var(--volt); }
.lgrid--color a:nth-child(6n+3) { background: var(--cyan); }
.lgrid--color a:nth-child(6n+4) { background: var(--mag); }
.lgrid--color a:nth-child(6n+5) { background: var(--blue); color: #fff; }
.lgrid--color a:nth-child(6n+6) { background: var(--ink); color: var(--paper); }
.lgrid--color .k { opacity: .7; }
.lgrid--color a:hover { background: var(--ink); color: var(--paper); }
.lgrid--color a:nth-child(6n+6):hover { background: var(--accent); color: var(--on-accent); }

/* ==========================================================================
   FLAT-VECTOR HUD FURNITURE
   Hard technical framing (brackets, segment bars, angled cuts, outline type)
   set against a soft botanical mark — the contrast CICADAMATA runs on.
   ========================================================================== */

/* outline display type. The transparent fill is inside @supports so that a
   browser without text-stroke renders solid type instead of nothing. */
.hollow { -webkit-text-stroke: clamp(1.5px, .3vw, 4px) var(--stroke, var(--ink)); }
@supports (-webkit-text-stroke: 1px black) { .hollow { color: transparent; } }
.plate--ink    { --stroke: var(--paper); }
.plate--accent { --stroke: var(--on-accent); }

/* angled transition into a dark band */
.wedge {
  height: clamp(22px, 4vw, 56px);
  background: var(--ink);
  clip-path: polygon(0 100%, 100% 0, 100% 100%);
}

/* HUD corner brackets */
.brackets { position: relative; }
.brackets::before, .brackets::after {
  content: ""; position: absolute; width: 18px; height: 18px;
  border: 2px solid currentColor; pointer-events: none;
}
.brackets::before { top: 7px; left: 7px;  border-right: 0; border-bottom: 0; }
.brackets::after  { bottom: 7px; right: 7px; border-left: 0;  border-top: 0; }

/* segmented readout bar */
.segbar { display: flex; gap: 3px; height: 9px; }
.segbar i { flex: 1 1 0; background: currentColor; display: block; }
.segbar i:nth-child(n+9) { opacity: .28; }

/* duotone plates — the real colours come back on hover or keyboard focus */
.shot--duo { background: var(--accent); isolation: isolate; }
.shot--duo img {
  filter: grayscale(1) contrast(1.08);
  mix-blend-mode: multiply;
  transition: filter .2s var(--ease);
}
.shot--duo:hover img,
.shot--duo:focus-within img { filter: none; mix-blend-mode: normal; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}