/* ==========================================================================
   Leonardo Majowka — Console
   A pill-cornered wall panel: thick elbows frame every region, sections are
   colour banks you travel between, flat blocks on void black, no gradients,
   no glow. Motion is an instant colour swap.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
  /* Material — flat, no gradients anywhere in this system */
  --void:     #000000;
  --lilac:    #c4b6ff;
  --peach:    #ffb08a;
  --gold:     #ffc52e;
  --peri:     #7fa2ff;
  --cool:     #a299c7;

  /* Ink */
  --paper:    #efeaff;  /* primary text on void */
  --ink:      #000000;  /* text on any filled block — always dark-on-bright */
  --dim:      #a299c7;  /* secondary text, tinted from the hue, never grey */

  /* Bank — the colour this section of the console is running under */
  --bank:     var(--peri);
  --active:   var(--gold);

  /* Geometry */
  --rail:     168px;   /* left rail width */
  --bar:      44px;    /* thickness of a frame rail */
  --elbow-h:  104px;   /* height of the corner piece */
  --r-elbow:  64px;
  --r-in:     22px;
  --r-block:  26px;
  --r-pill:   999px;
  --gap:      6px;     /* the black break between two segments */

  /* Type */
  --f-display: "Saira Extra Condensed", "Saira Condensed", Impact, sans-serif;
  --f-ui:      "Saira Condensed", "Saira Extra Condensed", sans-serif;
  --f-body:    "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --fs-display: clamp(3rem, 9vw, 6rem);
  --fs-h1:      clamp(2.1rem, 5vw, 3.25rem);
  --fs-h2:      clamp(1.6rem, 3.2vw, 2.35rem);
  --fs-h3:      1.3rem;
  --fs-body:    1.0625rem;
  --fs-sm:      0.9375rem;
  --fs-label:   0.8125rem;
  --fs-code:    0.75rem;

  /* Space */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px;
}

[data-bank="projects"] { --bank: var(--lilac); --active: var(--gold); }
[data-bank="invest"]   { --bank: var(--gold);  --active: var(--peach); }
[data-bank="contact"]  { --bank: var(--peach); --active: var(--gold); }

/* Per-element tone. Classes, not inline style attributes — the production CSP
   blocks style-src-attr, so an inline custom property would drop silently. */
.tone-peri  { --sys: var(--peri);  --entry: var(--peri);  --tile: var(--peri); }
.tone-gold  { --sys: var(--gold);  --entry: var(--gold);  --tile: var(--gold); }
.tone-lilac { --sys: var(--lilac); --entry: var(--lilac); --tile: var(--lilac); }
.tone-peach { --sys: var(--peach); --entry: var(--peach); --tile: var(--peach); }

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--void);
  color: var(--paper);
  font-family: var(--f-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* This world has no transitions. A press is an instant colour swap. */
a, button, input, textarea, .seg { transition: none; }

a { color: var(--bank); text-decoration: none; }
a:hover { color: var(--active); }

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

/* Authored icons carry no intrinsic size — give every one a floor so none
   can collapse inside a flex or grid cell. */
.ico { display: block; width: 20px; height: 20px; flex: none; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: var(--s4); top: -100px; z-index: 100;
  background: var(--gold); color: var(--ink);
  font-family: var(--f-ui); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; padding: var(--s3) var(--s5);
  border-radius: var(--r-pill);
}
.skip-link:focus { top: var(--s4); color: var(--ink); }

/* --------------------------------------------------------------------------
   2. Type roles
   -------------------------------------------------------------------------- */

.t-display, .t-h1, .t-h2, .t-h3 {
  font-family: var(--f-display);
  text-transform: uppercase;
  font-weight: 800;
  line-height: 0.86;
  letter-spacing: 0.005em;
  margin: 0;
  text-wrap: balance;
}
.t-display { font-size: var(--fs-display); }
.t-h1      { font-size: var(--fs-h1); }
.t-h2      { font-size: var(--fs-h2); line-height: 0.9; }
.t-h3      { font-size: var(--fs-h3); line-height: 1; font-weight: 700; }

.t-label {
  font-family: var(--f-ui);
  font-size: var(--fs-label);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--dim);
  margin: 0;
}

.t-code {
  font-family: var(--f-ui);
  font-size: var(--fs-code);
  font-weight: 500;
  letter-spacing: 0.1em;
  font-variant-numeric: tabular-nums;
  color: var(--cool);
}

.t-body { max-width: 68ch; margin: 0; color: var(--paper); text-wrap: pretty; }
.t-body + .t-body { margin-top: var(--s4); }
.t-body--dim { color: var(--dim); }
.t-lead {
  font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
  line-height: 1.55;
  max-width: 60ch;
  margin: 0;
  color: var(--paper);
  text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   3. The frame — thick elbows sweeping the whole viewport
   -------------------------------------------------------------------------- */

.console {
  min-height: 100vh;
  padding: var(--s3);
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}

/* The corner piece: one block, carved by a pseudo-element into an L.
   The vertical stub sits over the rail; the horizontal bar runs to the edge. */
.elbow {
  position: relative;
  height: var(--elbow-h);
  background: var(--bank);
  flex: none;
  animation: seg-in 260ms steps(4, end) backwards;
}
.elbow--top    { border-radius: var(--r-elbow) var(--r-in) 0 0; }
.elbow--bottom { border-radius: 0 0 var(--r-in) var(--r-elbow); }

.elbow::after {
  content: "";
  position: absolute;
  left: calc(var(--rail) + var(--gap));
  right: 0;
  background: var(--void);
}
.elbow--top::after    { top: var(--bar); bottom: 0; border-top-left-radius: var(--r-in); }
.elbow--bottom::after { bottom: var(--bar); top: 0; border-bottom-left-radius: var(--r-in); }

/* Breaks and accent segments interrupting the horizontal run of the elbow */
.elbow .brk {
  position: absolute;
  top: 0;
  height: var(--bar);
  background: var(--void);
  width: var(--gap);
}
.elbow--bottom .brk { top: auto; bottom: 0; }
.elbow .acc {
  position: absolute;
  top: 0;
  height: var(--bar);
  animation: seg-in 260ms steps(4, end) backwards;
}
.elbow--bottom .acc { top: auto; bottom: 0; }
.acc--peach { background: var(--peach); }
.acc--gold  { background: var(--gold); }
.acc--peri  { background: var(--peri); }
.acc--lilac { background: var(--lilac); }

/* Fixed positions for the breaks and accent blocks along the horizontal run */
.brk--1 { left: 46%; }
.acc--1 { left: calc(46% + var(--gap)); width: 132px; }
.brk--2 { left: calc(46% + var(--gap) + 132px); }
.acc--2 { left: calc(46% + var(--gap) * 2 + 132px); width: 58px; }
.brk--3 { left: calc(46% + var(--gap) * 2 + 190px); }

/* The elbow's vertical stub carries the section's identity code */
.elbow-tag {
  position: absolute;
  left: var(--s4);
  width: calc(var(--rail) - var(--s4) * 2);
  font-family: var(--f-ui);
  font-size: var(--fs-code);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.elbow--top .elbow-tag    { bottom: var(--s3); }
.elbow--bottom .elbow-tag { top: var(--s3); }

.console-body {
  flex: 1;
  display: grid;
  grid-template-columns: var(--rail) minmax(0, 1fr);
  gap: var(--gap);
  align-items: start;
}

/* --------------------------------------------------------------------------
   4. Left rail — navigation and status blocks
   -------------------------------------------------------------------------- */

.rail {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  position: sticky;
  top: var(--s3);
  height: calc(100vh - var(--s3) * 2);
}

/* Closes the frame: the rail runs floor to ceiling, so the elbows always
   connect down the left edge instead of trailing off into black. */
.rail-fill {
  flex: 1;
  min-height: 32px;
  /* Neutral, not the bank colour — gold and peach at low alpha go muddy brown. */
  background: var(--cool);
  opacity: 0.14;
  border-radius: 0 0 0 var(--r-block);
}

/* A rail segment: text set flush to the bottom-right inside a flat block */
.seg {
  display: block;
  background: var(--bank);
  color: var(--ink);
  font-family: var(--f-ui);
  font-size: var(--fs-label);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-align: right;
  padding: var(--s5) var(--s3) var(--s2);
  border: 0;
  cursor: pointer;
  width: 100%;
  animation: seg-in 260ms steps(4, end) backwards;
}
.seg:hover { background: var(--lilac); color: var(--ink); }
.seg:active,
.seg[aria-current="page"] { background: var(--active); color: var(--ink); }

.rail .seg:first-child { border-radius: var(--r-block) 0 0 0; }

/* Status block on the rail — flat outline, code readout */
.rail-status {
  border: 2px solid var(--cool);
  border-radius: var(--r-in);
  padding: var(--s3);
  display: grid;
  gap: var(--s1);
  margin-top: var(--s2);
}
.rail-status dt {
  font-family: var(--f-ui);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dim);
}
.rail-status dd {
  margin: 0 0 var(--s2);
  font-family: var(--f-ui);
  font-size: var(--fs-label);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--paper);
  font-variant-numeric: tabular-nums;
}
.rail-status dd:last-child { margin-bottom: 0; }

.rail-block {
  background: var(--peach);
  padding: var(--s3);
  color: var(--ink);
  font-family: var(--f-ui);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: right;
}

.rail-toggle { display: none; }

/* --------------------------------------------------------------------------
   5. Stage — the content region inside the frame
   -------------------------------------------------------------------------- */

.stage {
  min-width: 0;
  padding: 0 0 var(--s7) var(--s2);
  display: flex;
  flex-direction: column;
}
.stage > * + * { margin-top: var(--s9); }
/* The masthead is chrome, not a section — it sits closer to what follows. */
.masthead + * { margin-top: var(--s7); }

.masthead {
  display: flex;
  align-items: center;
  gap: var(--gap);
}
.masthead-name {
  font-family: var(--f-display);
  font-size: 1.5rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--paper);
  line-height: 1;
}
.masthead-name:hover { color: var(--bank); }
.masthead-role {
  font-family: var(--f-ui);
  font-size: var(--fs-code);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dim);
  line-height: 1.35;
  max-width: 34ch;
  border-left: 2px solid var(--cool);
  padding-left: var(--s3);
  margin: 0 0 0 var(--s2);
}
.masthead-spacer { flex: 1; }

.section { display: grid; gap: var(--s6); }
.section-head { display: grid; gap: var(--s4); }
.section-head .t-h2 { max-width: 20ch; }

/* --------------------------------------------------------------------------
   6. Panels — outlined blocks with a numbered segment stack
   -------------------------------------------------------------------------- */

.panel {
  border: 2px solid var(--cool);
  border-radius: var(--r-block);
  padding: var(--s5);
  display: grid;
  gap: var(--s3);
  align-content: start;
  background: var(--void);
}
.panel--bank { border-color: var(--bank); }

.panel--link { border-color: var(--tile, var(--cool)); }
.panel--link h3 { color: var(--paper); }
.panel--link:hover { border-color: var(--active); }
.panel--link:hover h3 { color: var(--active); }

.panel-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s3);
  flex-wrap: wrap;
}

.auth-panel { max-width: 520px; }

.grid { display: grid; gap: var(--gap); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--wide { gap: var(--s5); }

/* --------------------------------------------------------------------------
   7. Buttons
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: stretch;
  border: 0;
  border-radius: var(--r-pill);
  overflow: hidden;
  font-family: var(--f-ui);
  font-size: var(--fs-label);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  cursor: pointer;
  background: var(--active);
  color: var(--ink);
  padding: 0;
}
.btn-mark {
  display: grid;
  place-items: center;
  padding: var(--s3);
  border-right: 2px solid rgba(0, 0, 0, 0.35);
}
.btn-mark .ico { width: 17px; height: 17px; }
.btn-label { padding: var(--s3) var(--s5); align-self: center; }
.btn:hover  { background: var(--lilac); color: var(--ink); }
.btn:active { background: var(--paper); }

.btn--ghost {
  background: transparent;
  color: var(--paper);
  box-shadow: inset 0 0 0 2px var(--cool);
}
.btn--ghost .btn-mark { border-right-color: var(--cool); }
.btn--ghost:hover { background: var(--peri); color: var(--ink); }
.btn--ghost:hover .btn-mark { border-right-color: rgba(0, 0, 0, 0.35); }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--s3); }

/* --------------------------------------------------------------------------
   8. Hero — the first viewport
   -------------------------------------------------------------------------- */

.hero { display: grid; gap: var(--s6); }

.hero-title { display: grid; gap: var(--s4); }
.hero-title .t-display { color: var(--bank); }
.hero-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: var(--s7);
  align-items: start;
}
.hero-copy { display: grid; gap: var(--s5); align-content: start; }

/* Personnel panel — the portrait as a console readout */
.portrait {
  border: 2px solid var(--bank);
  border-radius: var(--r-block) var(--r-block) var(--r-block) 0;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto auto;
}
.portrait img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center 22%;
  filter: grayscale(0.4) contrast(1.06);
}
.portrait-tag {
  background: var(--bank);
  color: var(--ink);
  font-family: var(--f-ui);
  font-size: var(--fs-code);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: var(--s2) var(--s3);
  display: flex;
  justify-content: space-between;
  gap: var(--s2);
  font-variant-numeric: tabular-nums;
}

/* Two systems, one operator — the thesis, in the console's own grammar */
.systems { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s5); }

.system { display: grid; gap: var(--gap); align-content: start; }
.system-head {
  background: var(--sys, var(--bank));
  color: var(--ink);
  border-radius: var(--r-block) var(--r-block) 0 0;
  padding: var(--s3) var(--s4);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s3);
  font-family: var(--f-display);
  font-size: 1.75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1;
}
.system-head span {
  font-family: var(--f-ui);
  font-size: var(--fs-code);
  font-weight: 600;
  letter-spacing: 0.12em;
  opacity: 0.65;
  font-variant-numeric: tabular-nums;
}
.system-row {
  display: flex;
  align-items: baseline;
  gap: var(--s3);
  padding: var(--s3) var(--s4);
  box-shadow: inset 0 0 0 2px var(--cool);
  border-radius: 4px;
}
.system-row:last-child { border-radius: 4px 4px 4px var(--r-block); }
.system-row b {
  font-family: var(--f-display);
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--sys, var(--bank));
  line-height: 1;
  flex: none;
  font-variant-numeric: tabular-nums;
  text-transform: uppercase;
}
.system-row span {
  font-family: var(--f-ui);
  font-size: var(--fs-label);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--paper);
  line-height: 1.25;
}

/* --------------------------------------------------------------------------
   9. Service record — career history as console log entries
   -------------------------------------------------------------------------- */

.record { display: grid; gap: var(--gap); }

.entry {
  display: grid;
  grid-template-columns: 148px minmax(0, 1fr);
  gap: var(--gap);
  align-items: stretch;
}
.entry-when {
  background: var(--entry, var(--bank));
  color: var(--ink);
  font-family: var(--f-ui);
  font-size: var(--fs-label);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-align: right;
  padding: var(--s4) var(--s3) var(--s3);
  display: grid;
  align-content: start;
  gap: var(--s1);
  font-variant-numeric: tabular-nums;
}
.entry:first-child .entry-when { border-radius: var(--r-block) 0 0 0; }
.entry:last-child .entry-when  { border-radius: 0 0 0 var(--r-block); }
.entry-when em {
  font-style: normal;
  font-size: 0.6875rem;
  font-weight: 600;
  opacity: 0.62;
  display: block;
}
.entry-body {
  padding: var(--s4) 0 var(--s5) var(--s4);
  display: grid;
  gap: var(--s3);
  align-content: start;
  border-bottom: 2px solid #1c1830;
}
.entry:last-child .entry-body { border-bottom: 0; }
.entry-role {
  font-family: var(--f-display);
  font-size: 1.65rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 1;
  margin: 0;
  color: var(--paper);
}
.entry-org { color: var(--entry, var(--bank)); }
.entry-body ul { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--s2); }
.entry-body li {
  position: relative;
  padding-left: var(--s5);
  color: var(--dim);
  font-size: var(--fs-sm);
  max-width: 72ch;
}
.entry-body li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.58em;
  width: 12px;
  height: 3px;
  background: var(--entry, var(--bank));
}

/* --------------------------------------------------------------------------
   10. Capability blocks — authored icon tile, title, copy, code
   -------------------------------------------------------------------------- */

.cap { display: grid; gap: var(--s4); align-content: start; }
.cap-tile {
  width: 56px;
  height: 56px;
  border-radius: var(--r-in);
  background: var(--tile, var(--bank));
  color: var(--ink);
  display: grid;
  place-items: center;
}
.cap-tile .ico { width: 28px; height: 28px; }
.cap h3 { margin: 0; }
.cap p { margin: 0; color: var(--dim); font-size: var(--fs-sm); max-width: 40ch; }

/* --------------------------------------------------------------------------
   11. Segment pills — skills, topics
   -------------------------------------------------------------------------- */

.pills { display: flex; flex-wrap: wrap; gap: var(--gap); }
.pill {
  font-family: var(--f-ui);
  font-size: var(--fs-label);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--paper);
  box-shadow: inset 0 0 0 2px var(--cool);
  border-radius: var(--r-pill);
  padding: var(--s2) var(--s4);
}

/* --------------------------------------------------------------------------
   12. Parts list — projects as a bill of materials
   -------------------------------------------------------------------------- */

.part {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 52px;
  gap: var(--gap);
  align-items: stretch;
}
.part-main {
  border: 2px solid var(--cool);
  border-radius: var(--r-block) 0 0 var(--r-block);
  padding: var(--s5);
  display: grid;
  gap: var(--s3);
  align-content: start;
}
.part:hover .part-main { border-color: var(--bank); }
.part-head { display: flex; align-items: baseline; gap: var(--s3); flex-wrap: wrap; }
.part-head h3 { margin: 0; flex: none; }
.part-what {
  font-family: var(--f-ui);
  font-size: var(--fs-label);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--bank);
}
.part p { margin: 0; color: var(--dim); font-size: var(--fs-sm); max-width: 52ch; }
.part-link {
  font-family: var(--f-ui);
  font-size: var(--fs-label);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--paper);
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  justify-self: start;
}
.part-link:hover { color: var(--active); }
.part-link .ico { width: 16px; height: 16px; }

/* the item number down the right edge of every part — a real bill-of-materials mark */
.part-no {
  background: var(--cool);
  color: var(--ink);
  border-radius: 0 var(--r-in) var(--r-in) 0;
  display: grid;
  justify-items: center;
  align-content: start;
  padding-top: var(--s5);
  font-family: var(--f-ui);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
}
.part:hover .part-no { background: var(--bank); }

.status {
  font-family: var(--f-ui);
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  padding: 3px var(--s3);
  border-radius: var(--r-pill);
  background: var(--peri);
  color: var(--ink);
  margin-left: auto;
}
.status--building { background: var(--gold); }
.status--ongoing  { background: var(--lilac); }

/* --------------------------------------------------------------------------
   13. Readouts — invest page figures
   -------------------------------------------------------------------------- */

.readout {
  border: 2px solid var(--cool);
  border-radius: var(--r-block);
  padding: var(--s5);
  display: grid;
  gap: var(--s2);
  align-content: start;
}
.readout b {
  font-family: var(--f-display);
  font-size: clamp(1.9rem, 3.4vw, 2.75rem);
  font-weight: 800;
  text-transform: uppercase;
  line-height: 0.9;
  color: var(--bank);
}
.readout span {
  font-family: var(--f-ui);
  font-size: var(--fs-label);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--dim);
}

/* Numbered criteria rows */
.criteria { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--gap); }
.criteria li {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: var(--s4);
  align-items: center;
}
.criteria li i {
  font-style: normal;
  background: var(--bank);
  color: var(--ink);
  font-family: var(--f-ui);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.06em;
  display: grid;
  place-items: center;
  height: 100%;
  min-height: 40px;
  border-radius: 4px;
  font-variant-numeric: tabular-nums;
}
.criteria li:first-child i { border-radius: var(--r-in) 4px 4px 4px; }
.criteria li:last-child i  { border-radius: 4px 4px 4px var(--r-in); }
.criteria li span { color: var(--paper); font-size: var(--fs-sm); }
.criteria li i .ico { width: 16px; height: 16px; }

/* A grid whose children size to their content instead of stretching to the
   tallest sibling column. */
.grid--hug { align-content: start; }

/* --------------------------------------------------------------------------
   14. Forms — outlined pill with an end segment
   -------------------------------------------------------------------------- */

.form { display: grid; gap: var(--s4); max-width: 780px; }
.form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); }
.field { display: grid; gap: var(--s2); }
.field label {
  font-family: var(--f-ui);
  font-size: var(--fs-code);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--dim);
}
.field input,
.field textarea {
  font-family: var(--f-body);
  font-size: var(--fs-body);
  color: var(--paper);
  background: var(--void);
  border: 2px solid var(--cool);
  border-radius: var(--r-pill);
  padding: var(--s3) var(--s5);
  width: 100%;
}
.field textarea {
  border-radius: var(--r-block);
  resize: vertical;
  min-height: 140px;
  line-height: 1.55;
}
.field input::placeholder,
.field textarea::placeholder { color: #7a7291; }
.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--gold);
  color: var(--paper);
}

/* --------------------------------------------------------------------------
   15. Flash
   -------------------------------------------------------------------------- */

.flash {
  display: flex;
  align-items: center;
  gap: var(--s3);
  border-radius: var(--r-pill);
  padding: var(--s3) var(--s5);
  font-family: var(--f-ui);
  font-size: var(--fs-label);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink);
  background: var(--peri);
  margin-bottom: var(--s5);
}
.flash--error { background: var(--peach); }

/* --------------------------------------------------------------------------
   16. Footer
   -------------------------------------------------------------------------- */

.console-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s5);
  padding: var(--s5) 0 var(--s3) var(--s2);
  font-family: var(--f-ui);
  font-size: var(--fs-label);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--dim);
}
.console-footer a { color: var(--paper); }
.console-footer a:hover { color: var(--active); }
.console-footer .spacer { flex: 1; }

.audio-toggle {
  background: transparent;
  border: 0;
  box-shadow: inset 0 0 0 2px var(--cool);
  border-radius: var(--r-pill);
  color: var(--dim);
  font-family: var(--f-ui);
  font-size: var(--fs-code);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  padding: var(--s2) var(--s4);
  cursor: pointer;
}
.audio-toggle[aria-pressed="true"] { background: var(--gold); color: var(--ink); box-shadow: none; }

/* --------------------------------------------------------------------------
   17. Motion — one authored moment: the console powers up.
        Chrome only. Content is visible from the first frame.
   -------------------------------------------------------------------------- */

@keyframes seg-in {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}

.elbow--top          { animation-delay: 0ms; }
.rail .seg:nth-child(1) { animation-delay: 90ms; }
.rail .seg:nth-child(2) { animation-delay: 130ms; }
.rail .seg:nth-child(3) { animation-delay: 170ms; }
.rail .seg:nth-child(4) { animation-delay: 210ms; }
.elbow--bottom       { animation-delay: 260ms; }

@media (prefers-reduced-motion: reduce) {
  .elbow, .elbow .acc, .seg { animation: none; }
}

/* --------------------------------------------------------------------------
   18. Responsive — the elbow rotates to run across the top, pills stack below
   -------------------------------------------------------------------------- */

@media (max-width: 1080px) {
  .hero-main { grid-template-columns: minmax(0, 1fr) 240px; gap: var(--s6); }
  .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
  :root {
    --rail: 116px;
    --elbow-h: 78px;
    --bar: 34px;
    --r-elbow: 42px;
  }

  .console { padding: var(--s2); }

  .console-body { grid-template-columns: minmax(0, 1fr); }

  .rail {
    position: static;
    height: auto;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--gap);
  }
  .rail .seg {
    flex: 1 1 auto;
    width: auto;
    text-align: center;
    padding: var(--s3) var(--s4);
    border-radius: var(--r-pill) !important;
  }
  .rail-status, .rail-block, .rail-fill { display: none; }

  .stage { padding-left: 0; }
  .stage > * + * { margin-top: var(--s7); }
  .masthead + * { margin-top: var(--s6); }
  .masthead { flex-wrap: wrap; gap: var(--s3); }
  .masthead-role { border-left: 0; padding-left: 0; margin-left: 0; max-width: none; }

  .hero-main { grid-template-columns: minmax(0, 1fr); }
  .portrait { max-width: 260px; }
  .systems { grid-template-columns: minmax(0, 1fr); }

  .entry { grid-template-columns: minmax(0, 1fr); }
  .entry-when {
    text-align: left;
    display: flex;
    align-items: baseline;
    gap: var(--s3);
    padding: var(--s2) var(--s4);
    border-radius: var(--r-pill) !important;
  }
  .entry-body { padding: var(--s4) 0 var(--s5); }

  .grid--2, .grid--3, .form-row { grid-template-columns: minmax(0, 1fr); }

  .part { grid-template-columns: minmax(0, 1fr); }
  .part-main { border-radius: var(--r-block) var(--r-block) 0 0; }
  .part-no {
    border-radius: 0 0 var(--r-block) var(--r-block);
    padding: var(--s1) 0;
    align-content: center;
  }

  .criteria li { grid-template-columns: 38px minmax(0, 1fr); gap: var(--s3); }
}

/* The elbow's accent blocks are absolutely positioned; at fixed pixel widths
   they run past the frame on small phones. Below this width they go
   proportional and the trailing pair drops out. */
@media (max-width: 620px) {
  .acc--1 { width: 22%; }
  .brk--2 { left: calc(46% + var(--gap) + 22%); }
  .acc--2, .brk--3 { display: none; }
}

@media (max-width: 520px) {
  :root { --elbow-h: 64px; --bar: 28px; --r-elbow: 32px; }
  .elbow-tag { display: none; }
  .rail .seg { flex: 1 1 44%; }
}