/* Mihail Tirdea · tirdeamihai.com
   The page is a mimic board: a pale tile ground, engraved plates, and lines
   that carry meaning by colour and weight (380 kV red, 220 kV green, 110 kV ink).
   Amber is reserved for lamps and the contact action. */

/* ---------- Faces ---------- */

@font-face { font-family: "DINish"; src: url("../fonts/dinish-regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "DINish"; src: url("../fonts/dinish-bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "DINish Condensed"; src: url("../fonts/dinish-condensed-regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "DINish Condensed"; src: url("../fonts/dinish-condensed-bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

/* Metric-matched fallbacks keep the layout still while the faces arrive. */
@font-face { font-family: "DINish Fallback"; src: local("Arial"), local("Helvetica Neue"), local("Helvetica"); size-adjust: 92.7%; ascent-override: 110.6%; descent-override: 26.1%; line-gap-override: 0%; }
@font-face { font-family: "DINish Condensed Fallback"; src: local("Arial Narrow Bold"), local("ArialNarrow-Bold"), local("Arial Narrow"), local("Helvetica Neue Condensed Bold"); size-adjust: 91%; ascent-override: 112.7%; descent-override: 26.6%; line-gap-override: 0%; }

/* ---------- Tokens ---------- */

:root {
  --ground: #dde3dc;
  --plate: #f8f9f5;
  --plate-edge: #929e96;
  --ink: #121715;
  --ink-2: #3a4541;
  --ink-3: #56625c;
  --rule: #b6c0b8;
  --muted-line: #b3bdb5;

  --v380: #c8102e;
  --v220: #08794a;
  --cobalt: #1f4fa8;
  --lamp: #f5a400;
  --lamp-hi: #ffc53f;
  --lamp-deep: #8f5400;
  --lamp-ink: #1c1200;
  --desk-2: #a9b5ae;
  --desk-line: #2c3631;
  --desk-edge: #56625c;

  --tile: 48px;
  --tiles: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48'%3E%3Cpath d='M0 47.5H48M47.5 0V48' stroke='%23d1d8d0'/%3E%3Cpath d='M0 .5H47M.5 0V47' stroke='%23e3e8e2'/%3E%3C/svg%3E");
  --hatch: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M-2 2l4-4M0 8l8-8M6 10l4-4' stroke='%2356625c' stroke-width='1'/%3E%3C/svg%3E");
  --arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 10'%3E%3Cpath d='M0 5h17M13 1.5L17.5 5 13 8.5' fill='none' stroke='black' stroke-width='1.6'/%3E%3C/svg%3E");

  --font-text: "DINish", "DINish Fallback", "Helvetica Neue", Arial, sans-serif;
  --font-display: "DINish Condensed", "DINish Condensed Fallback", "DINish", "Arial Narrow", sans-serif;
  --font-code: ui-monospace, "SF Mono", "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;

  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-snap: cubic-bezier(.2, 0, 0, 1);

  --edge: 20px;
  --strip-h: 56px;
  --portrait-w: 0px;
  --section-gap: 104px;
}

@media (min-width: 40em) { :root { --edge: 32px; --section-gap: 128px; } }
@media (min-width: 64em) {
  :root {
    --edge: max(48px, calc((100vw - 1440px) / 2 + 48px));
    --strip-h: 72px;
    --portrait-w: clamp(340px, 34vw, 680px);
    --section-gap: 160px;
  }
}

/* ---------- Base ---------- */

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

html {
  background: var(--ground);
  color: var(--ink);
  font: 400 1.0625rem/1.6 var(--font-text);
  font-kerning: normal;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scrollbar-color: var(--ink-3) var(--ground);
  color-scheme: light;
  hanging-punctuation: first;
}
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

body { margin: 0; min-width: 320px; }

::selection { background: var(--ink); color: var(--plate); }

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

a {
  color: inherit;
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .2em;
  text-decoration-color: color-mix(in oklab, currentColor 35%, transparent);
  transition: text-decoration-color 160ms ease-out;
}
a:hover { text-decoration-color: currentColor; }

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

code { font: 500 .92em/1 var(--font-code); }

time, .tnum { font-variant-numeric: tabular-nums; }

[hidden] { display: none !important; }
.js-only, .struct__body { display: none; }
.js .js-only { display: inline; }
.js .struct__body { display: block; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

.skip {
  position: absolute; left: 12px; top: -64px; z-index: 10;
  padding: 10px 14px;
  background: var(--ink); color: var(--plate);
  font: 700 .9375rem/1 var(--font-display); letter-spacing: .08em; text-transform: uppercase; text-decoration: none;
}
.skip:focus { top: 12px; }

/* Range arrow: the face has no arrow glyph, so it is drawn. */
.to {
  display: inline-block;
  width: 1em; height: .5em;
  margin: 0 .3em;
  vertical-align: .1em;
  background: currentColor;
  -webkit-mask: var(--arrow) center / contain no-repeat;
  mask: var(--arrow) center / contain no-repeat;
}

/* ---------- Strip ---------- */

.strip {
  display: flex; align-items: center; gap: 20px;
  height: var(--strip-h);
  padding: 0 var(--edge);
  background: var(--ground) var(--tiles);
  position: relative; z-index: 3;
}
.nav { display: flex; gap: 6px; margin-left: auto; }
.nav a {
  padding: 7px 8px 6px;
  background: var(--plate);
  border: 1px solid var(--plate-edge);
  font: 700 .75rem/1 var(--font-display); letter-spacing: .1em; text-transform: uppercase;
  text-decoration: none;
  transition: border-color 160ms ease-out, background-color 160ms ease-out;
}
.nav a:hover { border-color: var(--ink); background: #fff; }
@media (min-width: 40em) { .nav { gap: 8px; } .nav a { padding: 8px 11px 7px; font-size: .8125rem; } }
@media (min-width: 64em) {
  .strip { position: absolute; top: 0; left: 0; right: var(--portrait-w); background: none; padding-right: 48px; }
  .strip--solo { right: 0; padding-right: var(--edge); }
}

/* ---------- Hero board ---------- */

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "intro" "portrait" "grid";
  background: var(--ground) var(--tiles);
  border-bottom: 1px solid var(--ink);
  position: relative;
}

/* The first screen says what and for whom; the career panel waits below the fold. */
.hero__intro { grid-area: intro; display: flex; flex-direction: column; padding: 20px var(--edge) 36px; }
.hero__kicker {
  font: 700 .75rem/1.3 var(--font-display); letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-2);
}
.hero__lead { margin-block: auto; }
.hero__title {
  margin-top: 14px;
  font: 700 clamp(2.375rem, 4.8vw, 4.5rem)/.98 var(--font-display);
  letter-spacing: -.005em;
  text-wrap: balance;
}
.hero__offer { display: grid; gap: 6px; margin-top: 22px; padding: 0; list-style: none; }
.hero__offer li {
  display: flex; align-items: baseline; gap: 12px;
  font: 700 clamp(1.125rem, 1.55vw, 1.375rem)/1.3 var(--font-display); letter-spacing: .01em;
}
.hero__offer li::before { content: ""; flex: none; width: 10px; height: 10px; background: var(--ink); }
.hero__facts {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 40px;
  border-top: 1px solid var(--ink);
}
.hero__facts > div { display: grid; align-content: space-between; gap: 6px; padding: 12px 12px 0 0; }
.hero__facts > div + div { padding-left: 14px; border-left: 1px solid var(--rule); }
.hero__facts dt { font: 700 .6875rem/1.3 var(--font-display); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.hero__facts dd { font: 700 clamp(1.75rem, 2.6vw, 2.5rem)/1 var(--font-display); letter-spacing: .01em; font-variant-numeric: tabular-nums; }
.hero__facts a { display: inline-flex; align-items: flex-start; gap: .12em; }
.hero__facts .ext { width: .34em; height: .34em; margin-top: .08em; }
@media (max-width: 39.999em) {
  .hero__facts { grid-template-columns: minmax(0, 1fr); }
  .hero__facts > div { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 11px 0; }
  .hero__facts > div + div { padding-left: 0; border-left: 0; border-top: 1px solid var(--rule); }
  .hero__facts dd { flex: none; font-size: 1.5rem; }
}

.hero__portrait {
  grid-area: portrait;
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #1c2420;
}
.hero__portrait img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 54% 18%;
}

.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; margin-top: 28px; }
@media (max-width: 39.999em) {
  .hero__actions .lamp-button { width: 100%; justify-content: center; }
}

.hero__panel {
  grid-area: grid;
  position: relative;
  display: flex; flex-direction: column; gap: 14px;
  margin: 0;
  padding: 36px var(--edge) 32px;
}

@media (min-width: 40em) and (max-width: 63.999em) {
  .hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "intro portrait" "grid grid"; }
  .hero__intro { padding-top: 28px; }
  .hero__panel { padding-top: 40px; border-top: 1px solid var(--ink); }
  .hero__portrait { aspect-ratio: auto; min-height: 340px; box-shadow: inset 1px 0 0 var(--ink); }
}

@media (min-width: 64em) {
  .hero {
    grid-template-columns: minmax(0, 1fr) var(--portrait-w);
    grid-template-rows: minmax(max(40rem, 100svh), auto) auto;
    grid-template-areas: "intro portrait" "grid grid";
  }
  .hero__intro { padding: calc(var(--strip-h) + 24px) 48px clamp(28px, 5svh, 48px) var(--edge); }
  .hero__portrait { aspect-ratio: auto; box-shadow: inset 1px 0 0 var(--ink); }
  .hero__portrait img { object-position: 46% 30%; }
  .hero__panel {
    gap: clamp(14px, 2.4svh, 24px);
    padding: 40px var(--edge);
    border-top: 1px solid var(--ink);
  }
}

/* ---------- Controls ---------- */

.lamp-button {
  display: inline-flex; align-items: center; gap: 12px;
  min-height: 48px;
  padding: 0 20px 0 14px;
  background: var(--lamp);
  color: var(--lamp-ink);
  border: 1px solid var(--ink);
  font: 700 .9375rem/1 var(--font-display); letter-spacing: .1em; text-transform: uppercase;
  text-decoration: none;
  transition: background-color 160ms ease-out, transform 120ms var(--ease-snap);
}
.lamp-button .lamp { width: 18px; height: 18px; flex: none; }
.lamp-button .lamp circle { fill: var(--lamp-hi); stroke: var(--ink); stroke-width: 1.5; }
.lamp-button .lamp path { stroke: var(--ink); stroke-width: 1.5; fill: none; }
.lamp-button:hover { background: var(--lamp-hi); }
.lamp-button:hover .lamp circle { fill: #fff3cf; }
.lamp-button:active { transform: translateY(1px); background: var(--lamp); }
.lamp-button:focus-visible { outline-offset: 4px; }

.plate-link {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 48px;
  padding: 0 16px;
  background: var(--plate);
  border: 1px solid var(--plate-edge);
  font: 700 .9375rem/1 var(--font-display); letter-spacing: .1em; text-transform: uppercase;
  text-decoration: none;
  transition: border-color 160ms ease-out, background-color 160ms ease-out;
}
.plate-link:hover { border-color: var(--ink); background: #fff; }

.quiet-link {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 44px;
  font: 700 .875rem/1 var(--font-display); letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-2);
  text-decoration: none;
}
.quiet-link:hover { color: var(--ink); text-decoration: underline; text-underline-offset: .35em; }

.ext { width: 9px; height: 9px; flex: none; }
.ext path { fill: none; stroke: currentColor; stroke-width: 1.6; }

.text-link {
  display: inline-flex; align-items: center; gap: 10px;
  font: 700 .875rem/1 var(--font-display); letter-spacing: .1em; text-transform: uppercase;
  text-decoration: none;
  padding: 10px 0;
}
.text-link::after {
  content: ""; width: 18px; height: 9px; background: currentColor;
  -webkit-mask: var(--arrow) center / contain no-repeat; mask: var(--arrow) center / contain no-repeat;
  transition: transform 200ms var(--ease-out);
}
.text-link:hover::after { transform: translateX(4px); }

/* ---------- Annunciator panel: the career, year by year ---------- */

.panel__head { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 18px; row-gap: 4px; }
.panel__year {
  display: inline-flex;
  font: 700 clamp(2.5rem, 6svh, 3.5rem)/1 var(--font-display);
  letter-spacing: .01em;
  font-variant-numeric: tabular-nums;
}
.panel__digit { position: relative; display: inline-block; overflow: hidden; height: 1em; }
.panel__digit > span { display: block; }
.panel__digit > span.is-out { position: absolute; left: 0; top: 0; }
.panel__readout { font: 700 .9375rem/1.4 var(--font-display); letter-spacing: .02em; color: var(--ink-2); }
/* On phones the readout gets its own row, two lines tall, so the playing years never move the panel. */
@media (max-width: 39.999em) { .panel__readout { flex-basis: 100%; min-height: 2.8em; } }

.annun { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
@media (min-width: 40em) { .annun { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 64em) { .annun { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.win {
  --c: var(--ink);
  position: relative;
  display: grid; align-content: space-between; gap: 8px;
  min-height: 58px;
  padding: 10px 12px 13px;
  border: 1px solid var(--rule);
  background: var(--ground);
  transition: background-color 180ms ease-out, border-color 180ms ease-out;
}
.win[data-volt="380"] { --c: var(--v380); }
.win[data-volt="220"] { --c: var(--v220); }
.win[data-volt="cobalt"] { --c: var(--cobalt); }
.win[data-volt="study"] { --c: var(--ink-3); }
/* The right padding keeps a long name clear of the lamp. */
.win__name { padding-right: 12px; font: 700 .875rem/1.1 var(--font-display); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); transition: color 180ms ease-out; }
.win__span { font: 700 .75rem/1 var(--font-display); letter-spacing: .06em; text-transform: uppercase; font-variant-numeric: tabular-nums; color: var(--ink-3); }
.win::before {
  content: ""; position: absolute; top: 10px; right: 10px;
  width: 9px; height: 9px; border-radius: 50%;
  border: 1.5px solid var(--ink-3);
  transition: background-color 120ms linear, border-color 120ms linear;
}
.win::after {
  content: ""; position: absolute; left: -1px; right: -1px; bottom: -1px; height: 3px;
  background: var(--c);
  transform: scaleX(0); transform-origin: left center;
  transition: transform 320ms var(--ease-out);
}
.win.is-lit { background: var(--plate); border-color: var(--ink); }
.win.is-lit .win__name { color: var(--ink); }
.win.is-lit .win__span { color: var(--ink-2); }
.win.is-lit::before { background: var(--lamp); border-color: var(--ink); }
.win.is-lit::after { transform: scaleX(1); }
.win.is-warming { background: color-mix(in oklab, var(--plate) 55%, var(--ground)); }
@media (min-width: 64em) { .win { min-height: clamp(60px, 10.5svh, 108px); } }

.panel__rail { position: relative; padding-top: 4px; }
.rail {
  -webkit-appearance: none; appearance: none;
  display: block; width: 100%; height: 32px; margin: 0;
  background: transparent; cursor: pointer;
}
.rail::-webkit-slider-runnable-track { height: 1px; background: var(--ink-2); }
.rail::-moz-range-track { height: 1px; background: var(--ink-2); }
.rail::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 14px; height: 26px; margin-top: -12.5px;
  background: var(--ink); border: 0; border-radius: 0;
  box-shadow: inset 0 0 0 5px var(--ink), inset 0 0 0 6px var(--plate);
}
.rail::-moz-range-thumb { width: 14px; height: 26px; background: var(--ink); border: 0; border-radius: 0; box-shadow: inset 0 0 0 5px var(--ink), inset 0 0 0 6px var(--plate); }
.rail:focus-visible { outline: none; }
.rail:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--ink); outline-offset: 3px; }
.rail:focus-visible::-moz-range-thumb { outline: 2px solid var(--ink); outline-offset: 3px; }
.rail__ticks { position: relative; height: 18px; margin-top: -8px; }
.rail__tick { position: absolute; top: 0; width: 1px; height: 4px; background: var(--ink-3); }
.rail__tick--major { height: 7px; background: var(--ink-2); }
.rail__label {
  position: absolute; top: 9px; transform: translateX(-50%);
  font: 700 .6875rem/1 var(--font-display); letter-spacing: .06em; text-transform: uppercase;
  font-variant-numeric: tabular-nums; color: var(--ink-3);
}
.rail__label.is-on { color: var(--ink); }

/* ---------- Sections ---------- */

.section { padding: var(--section-gap) var(--edge) 0; scroll-margin-top: 8px; }
.section > * { max-width: 1344px; }

.feeder {
  --volt: var(--ink); --volt-w: 2px;
  position: relative;
  display: flex; align-items: center;
  margin-bottom: clamp(28px, 3.4vw, 44px);
}
.feeder[data-volt="380"] { --volt: var(--v380); --volt-w: 4px; }
.feeder[data-volt="220"] { --volt: var(--v220); --volt-w: 3px; }
.feeder::before, .feeder::after {
  content: "";
  position: absolute; left: 0; right: 0;
  top: calc(50% - var(--volt-w) / 2 + .02em);
  height: var(--volt-w);
}
.feeder::before { background: var(--muted-line); }
.feeder::after {
  background: var(--volt);
  transform-origin: left center;
  transition: transform 1000ms var(--ease-out) 120ms;
}
.js .feeder:not(.is-live)::after { transform: scaleX(0); }

.breaker {
  position: relative; z-index: 1;
  width: 12px; height: 12px; flex: none;
  border: 2px solid var(--ink);
  background: var(--ink);
  transition: background-color 120ms var(--ease-snap);
}
.js .feeder:not(.is-live) .breaker { background: var(--ground); }
.feeder[data-volt="lamp"] .breaker {
  width: 20px; height: 20px; border-radius: 50%;
  border-width: 1.5px; background: var(--lamp);
}
.feeder[data-volt="lamp"] .breaker::before, .feeder[data-volt="lamp"] .breaker::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 20px; height: 1.5px; margin: -.75px 0 0 -10px;
  background: var(--lamp-deep); transform: rotate(45deg);
}
.feeder[data-volt="lamp"] .breaker::after { transform: rotate(-45deg); }
.js .feeder[data-volt="lamp"]:not(.is-live) .breaker { background: var(--ground); }
.js .feeder[data-volt="lamp"]:not(.is-live) .breaker::before, .js .feeder[data-volt="lamp"]:not(.is-live) .breaker::after { background: var(--ink); }

.feeder__title {
  position: relative; z-index: 1;
  margin-left: 18px;
  padding: 0 16px;
  background: var(--ground);
  font: 700 clamp(1.875rem, 3.2vw, 2.75rem)/1 var(--font-display);
  letter-spacing: 0;
}

.notfound { max-width: 34em; color: var(--ink-2); font-size: clamp(1.0625rem, 1.2vw, 1.1875rem); }
.notfound + .hero__actions { margin-top: 24px; }

/* Board panels */

.board--panel {
  margin: 0;
  background: var(--ground) var(--tiles);
  border: 1px solid var(--ink-3);
  padding: clamp(16px, 2.2vw, 28px);
  position: relative;
}

/* ---------- Circuits (In service and Record) ---------- */

.record { border-top: 0; }
.record > .circuit:first-child { padding-top: 4px; }

.circuit {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  column-gap: 14px;
  padding: 24px 0 26px;
  border-bottom: 1px solid var(--rule);
  scroll-margin-top: 24px;
}
.circuit:target { background: color-mix(in oklab, var(--plate) 55%, transparent); }

.circuit__head { display: contents; }

.state {
  grid-column: 1; grid-row: 1;
  align-self: center;
  width: 12px; height: 12px;
  border: 2px solid var(--ink);
  background: var(--ground);
}
.state--on { background: var(--ink); }
.circuit--studies .state { border-style: dotted; }

.circuit__span {
  grid-column: 2; grid-row: 1;
  font: 700 .8125rem/1.4 var(--font-display); letter-spacing: .08em; text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  color: var(--ink-3);
  align-self: center;
}
.circuit__name {
  grid-column: 2;
  margin-top: 6px;
  font: 700 clamp(1.375rem, 2vw, 1.75rem)/1.05 var(--font-display);
  letter-spacing: .005em;
}
.circuit__role { grid-column: 2; margin-top: 4px; color: var(--ink-2); font-size: .9375rem; }

.projects { grid-column: 2; margin-top: 16px; }
.project + .project { margin-top: 18px; padding-top: 18px; border-top: 1px dotted var(--rule); }
.project__name { font: 700 1.125rem/1.2 var(--font-display); letter-spacing: .01em; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.project__span { font: 700 .75rem/1 var(--font-display); letter-spacing: .08em; text-transform: uppercase; font-variant-numeric: tabular-nums; color: var(--ink-3); }
.project__what { max-width: 40em; color: var(--ink-2); text-wrap: pretty; }
.project__name + .project__what { margin-top: 4px; }
.project__stack { margin-top: 6px; font: 700 .875rem/1.45 var(--font-display); letter-spacing: .01em; color: var(--ink-3); }

@media (min-width: 52em) {
  .circuit { grid-template-columns: 18px 8.5rem minmax(0, 1fr) minmax(0, 1.65fr); column-gap: 22px; }
  .circuit__span { grid-column: 2; grid-row: 1; }
  .circuit__name { grid-column: 3; grid-row: 1; margin-top: 0; }
  .circuit__role { grid-column: 3; grid-row: 2; }
  .projects { grid-column: 4; grid-row: 1 / span 3; margin-top: 3px; }
  .state { align-self: start; margin-top: 7px; }
  .circuit__span { align-self: start; margin-top: 5px; }
}

/* Three flows, one home: the Powercloud panel beside its row */

.flow { grid-column: 1 / -1; margin-top: 26px; container-type: inline-size; }
@media (min-width: 52em) { .flow { grid-column: 2 / -1; } }
.flow__in { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "text" "pick" "fig" "say"; gap: 18px; }
.flow__text { grid-area: text; }
.flow__title { font: 700 clamp(1.375rem, 2vw, 1.75rem)/1.1 var(--font-display); letter-spacing: .005em; }
.flow__lede { margin-top: 10px; max-width: 34em; color: var(--ink-2); text-wrap: pretty; }
.flow__fig { grid-area: fig; margin-top: 6px; }
/* The three captions share one cell, so the panel keeps the height of the longest. */
.flow__say { grid-area: say; display: grid; }
.flow__say > p { grid-area: 1 / 1; max-width: 34em; color: var(--ink-2); text-wrap: pretty; visibility: hidden; }

.flow__svg { width: 100%; height: auto; overflow: visible; }
.flow__svg--wide { display: none; }
.flow__svg--tall { max-width: 360px; }

@container (min-width: 640px) {
  .flow__in {
    grid-template-columns: minmax(0, 1fr) minmax(0, 320px);
    grid-template-rows: auto auto minmax(0, 1fr);
    grid-template-areas: "text fig" "pick fig" "say fig";
    column-gap: clamp(28px, 6cqi, 72px);
  }
  .flow__fig { margin: 0; }
  .flow__say { align-self: start; }
}
@container (min-width: 960px) {
  .flow__in { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: "text" "pick" "fig" "say"; }
  .flow__fig { margin: 8px 0 4px; }
  .flow__svg--wide { display: block; }
  .flow__svg--tall { display: none; }
}

/* The flow selector: adjoining plates, the chosen one closed like a breaker */
.pick { grid-area: pick; justify-self: start; display: inline-flex; margin: 0; padding: 0; border: 0; min-width: 0; }
.pick__opt {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 44px; padding: 0 16px 0 14px;
  background: var(--ground); border: 1px solid var(--plate-edge);
  font: 700 .875rem/1 var(--font-display); letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-2); cursor: pointer;
  transition: background-color 160ms ease-out, border-color 160ms ease-out, color 160ms ease-out;
}
.pick__opt + .pick__opt { margin-left: -1px; }
.pick__opt input {
  -webkit-appearance: none; appearance: none;
  flex: none; width: 12px; height: 12px; margin: 0;
  border: 2px solid var(--ink-3); border-radius: 0; background: transparent;
  cursor: pointer;
  transition: background-color 120ms var(--ease-snap), border-color 120ms var(--ease-snap);
}
.pick__opt input:checked { background: var(--ink); border-color: var(--ink); }
.pick__opt:has(input:checked) { position: relative; z-index: 1; background: var(--plate); border-color: var(--ink); color: var(--ink); }
.pick__opt:not(:has(input:checked)):hover { border-color: var(--ink-3); color: var(--ink); }
.pick__opt input:focus-visible { outline: none; }
.pick__opt:has(input:focus-visible) { position: relative; z-index: 2; outline: 2px solid var(--ink); outline-offset: 3px; }
/* On a phone the three options share the panel's width. */
@container (max-width: 399px) {
  .pick { display: flex; justify-self: stretch; }
  .pick__opt { flex: 1 1 0; justify-content: center; gap: 8px; padding: 0 10px; }
}

/* The drawing: six plates and the routes between them */
.flow__svg text { font-family: var(--font-display); font-weight: 700; font-size: 17px; letter-spacing: .06em; fill: var(--pl-ink, var(--ink-3)); transition: fill 180ms ease-out; }
.flow__svg .fl-tag { font-size: 15px; letter-spacing: .08em; fill: var(--v380); }
.flow__svg .fl-unit { font-family: var(--font-text); font-size: 14px; letter-spacing: .02em; }
/* The tall drawing can render at 0.65 scale on a 320px phone, so its type and lines are heavier. */
.flow__svg--tall text { font-size: 19px; }
.flow__svg--tall .fl-tag { font-size: 17px; }
.flow__svg--tall .fl-unit { font-size: 17px; }

.fl-plate { fill: var(--pl-fill, var(--ground)); stroke: var(--pl-edge, var(--rule)); stroke-width: var(--pl-weight, 1); transition: fill 180ms ease-out, stroke 180ms ease-out; }
.fl-sym { fill: none; stroke: var(--pl-ink, var(--ink-3)); stroke-width: 1.5; transition: stroke 180ms ease-out; }
/* The checked option drives every state below, with or without script. A plate lights while its role takes part in the chosen flow. */
.flow:has([value="energy"]:checked) .fl-pl[data-on~="energy"],
.flow:has([value="data"]:checked) .fl-pl[data-on~="data"],
.flow:has([value="money"]:checked) .fl-pl[data-on~="money"] { --pl-fill: var(--plate); --pl-edge: var(--ink); --pl-weight: 1.5; --pl-ink: var(--ink); }
.flow:has([value="energy"]:checked) .flow__say [data-flow="energy"],
.flow:has([value="data"]:checked) .flow__say [data-flow="data"],
.flow:has([value="money"]:checked) .flow__say [data-flow="money"] { visibility: visible; }

/* Routes: a dead line under each, the chosen flow live over it (energy in 380 kV red, data and money in ink) */
.fl-base { fill: none; stroke: var(--muted-line); stroke-width: 2; }
.fl-live { fill: none; stroke: var(--ink-2); stroke-width: 2; opacity: 0; transition: opacity 160ms ease-out; }
.fl-live[data-flow="energy"] { stroke: var(--v380); stroke-width: 4; }
.flow:has([value="energy"]:checked) .fl-live[data-flow="energy"],
.flow:has([value="data"]:checked) .fl-live[data-flow="data"],
.flow:has([value="money"]:checked) .fl-live[data-flow="money"] { opacity: 1; }
/* Script holds the first flow back until the board is seen, then draws it in. */
.flow[data-wait] .fl-live { visibility: hidden; }

/* Flux, one hand per flow: light dashes through a live wire, blocks of data, a stream of payments */
.fl-flux { fill: none; opacity: 0; transition: opacity 300ms ease-out; animation: fl-flux .9s linear infinite paused; }
.fl-flux[data-flow="energy"] { stroke: var(--plate); stroke-width: 1.5; stroke-dasharray: 2 14; animation-duration: .7s; }
.fl-flux[data-flow="data"] { stroke: var(--ink); stroke-width: 5; stroke-dasharray: 4 12; }
.fl-flux[data-flow="money"] { stroke: var(--ink); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 0 16; animation-duration: 1.15s; }
/* Only with script, which starts it once the flow is drawn and pauses it off screen; without it the flow stays solid. */
.js .flow[data-flux="energy"] .fl-flux[data-flow="energy"],
.js .flow[data-flux="data"] .fl-flux[data-flow="data"],
.js .flow[data-flux="money"] .fl-flux[data-flow="money"] { opacity: 1; animation-play-state: running; }
.js .flow.is-away[data-flux] .fl-flux[data-flow] { animation-play-state: paused; }
@keyframes fl-flux { to { stroke-dashoffset: -16; } }

.flow__svg--tall .fl-base, .flow__svg--tall .fl-live { stroke-width: 2.5; }
.flow__svg--tall .fl-live[data-flow="energy"] { stroke-width: 5; }
.flow__svg--tall .fl-flux[data-flow="energy"] { stroke-width: 2; }
.flow__svg--tall .fl-flux:not([data-flow="energy"]) { stroke-width: 6; }

/* ---------- Field notes ---------- */

.code {
  margin: 0;
  padding: 14px 18px;
  background: var(--plate);
  color: var(--ink);
  font: 500 .875rem/1.65 var(--font-code);
  overflow-x: auto;
  border: 1px solid var(--plate-edge);
}
.code code { font: inherit; }
.code__line { display: block; white-space: pre; position: relative; }
.code__fields .code__line { transition: background-color 200ms ease-out; }
.code .k { color: var(--ink-2); }
.code .t { color: var(--ink); font-weight: 700; }
.code .c { color: var(--ink-3); }
.code__line.is-hot { background: var(--ground); }

.struct__top { display: grid; gap: 18px; }
.struct__body { container-type: inline-size; margin-top: 20px; }
.struct__mem {
  --gap: 4px;
  --cell: calc((100cqi - 7 * var(--gap)) / 8);
  position: relative;
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  grid-template-rows: repeat(4, var(--cell));
  gap: var(--gap);
}
.mem {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--ink);
  font: 700 clamp(.6875rem, 2cqi, 1rem)/1 var(--font-display); letter-spacing: .06em; text-transform: uppercase;
  overflow: hidden;
  white-space: nowrap;
}
.mem--slot { border: 1px dashed var(--ink-3); background: none; z-index: 0; }
.mem--field, .mem--pad { z-index: 1; }
.mem--field { background: var(--ink); color: var(--plate); }
.mem--pad { background: var(--plate) var(--hatch); color: var(--ink-2); border-style: dashed; border-color: var(--ink-3); }
.mem__size { position: absolute; right: 7px; bottom: 6px; font-size: clamp(.625rem, 1.4cqi, .75rem); }
.mem.is-hot { box-shadow: 0 0 0 3px var(--ground), 0 0 0 4px var(--ink); z-index: 1; }
.mem.is-leaving { opacity: 0; transform: scale(.6); transition: opacity 240ms ease-out, transform 240ms ease-out; }
.struct__saved {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: calc(var(--cell) * 2 + var(--gap));
  display: grid; place-items: center;
  font: 700 clamp(1.125rem, 3cqi, 1.625rem)/1 var(--font-display);
  color: var(--ink-2);
  opacity: 0; transform: translateY(6px);
  transition: opacity 320ms ease-out, transform 420ms var(--ease-out);
  pointer-events: none;
}
.struct__saved.is-on { opacity: 1; transform: none; }
.struct__meter { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }

.switch {
  display: inline-flex; align-items: center; gap: 12px;
  min-height: 44px; padding: 0;
  background: none; border: 0; color: var(--ink); cursor: pointer;
  font: 700 .875rem/1 var(--font-display); letter-spacing: .1em; text-transform: uppercase;
}
.switch__track { position: relative; width: 52px; height: 26px; background: var(--plate); border: 1.5px solid var(--ink); }
.switch__knob {
  position: absolute; top: 3px; left: 3px; width: 17px; height: 17px;
  background: var(--ink);
  transition: transform 240ms var(--ease-snap);
}
.switch[aria-pressed="true"] .switch__knob { transform: translateX(26px); }
.switch:hover .switch__track { background: #fff; }
.struct__size { display: grid; gap: 2px; font: 700 .75rem/1.35 var(--font-display); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.struct__size b { font: 700 clamp(2.25rem, 4vw, 3rem)/.9 var(--font-display); letter-spacing: 0; color: var(--ink); font-variant-numeric: tabular-nums; }
.struct__note { margin-top: 14px; font: 400 .875rem/1.45 var(--font-text); color: var(--ink-2); }

/* The ledger's first rows choose the example in the monitor; the rest link to posts.
   On narrow screens the monitor sits right under its rows, so the chosen example stays near its row. */
.notes-wrap { display: grid; align-items: start; }
.notes-wrap > * { min-width: 0; }
.notes__lede { margin-bottom: 18px; max-width: 32em; color: var(--ink-2); }
.monitors { display: grid; gap: 16px; margin: 16px 0 28px; }
.notes-more { margin-top: 20px; }
@media (min-width: 64em) {
  .notes-wrap {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    grid-template-rows: auto auto auto 1fr;
    grid-template-areas: "screen lede" "screen pick" "screen list" "screen more";
    column-gap: clamp(28px, 3vw, 48px);
  }
  .notes__lede { grid-area: lede; }
  .notes--ch { grid-area: pick; }
  .monitors { grid-area: screen; margin: 0; }
  .notes-wrap > .notes--links { grid-area: list; border-top: 0; }
  .notes-more { grid-area: more; }
}

.notes { border-top: 1px solid var(--ink); }
.note__row {
  display: grid; grid-template-columns: minmax(0, 1fr) 18px; align-items: baseline; gap: 2px 20px;
  padding: 15px 10px 16px;
  border-bottom: 1px solid var(--rule);
  text-decoration: none; cursor: pointer; list-style: none;
}
.note__title { font: 700 1.125rem/1.25 var(--font-display); letter-spacing: .005em; }
.note__topic { grid-row: 2; font: 700 .8125rem/1.3 var(--font-display); letter-spacing: .02em; color: var(--ink-3); }
.note__row > :last-child { grid-column: 2; grid-row: 1; align-self: center; }
@media (min-width: 40em) and (max-width: 63.999em), (min-width: 80em) {
  .note__row { grid-template-columns: minmax(0, 1fr) auto 18px; }
  .note__topic { grid-row: auto; text-align: right; }
  .note__row > :last-child { grid-column: 3; }
}
.note__row:not(:has(input:checked)):hover .note__title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; }
.note:target .note__row { background: color-mix(in oklab, var(--plate) 55%, transparent); }

/* A link row ends in the drawn arrow. */
.note__go { width: 18px; height: 9px; background: var(--ink-3); -webkit-mask: var(--arrow) center / contain no-repeat; mask: var(--arrow) center / contain no-repeat; transition: transform 200ms var(--ease-out), background-color 160ms ease-out; }
.note__row:hover .note__go { background: var(--ink); transform: translateX(3px); }

/* A channel row is a native radio: its lamp lights while the monitor shows its example. */
.notes--ch { min-width: 0; margin: 0; padding: 0; border: 0; border-top: 1px solid var(--ink); }
.note__row:has(input:checked) { background: color-mix(in oklab, var(--plate) 60%, transparent); }
.note__row:has(input:focus-visible) { outline: 2px solid var(--ink); outline-offset: 3px; }
.note__lamp { justify-self: end; width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid var(--ink-3); background: var(--ground); transition: background-color 120ms var(--ease-snap), border-color 120ms var(--ease-snap); }
.note__row:has(input:checked) .note__lamp { border-color: var(--ink); background: var(--lamp-hi); }

/* Each channel names its panel by ID; a new channel adds its pair here. Hidden panels take no space or focus.
   Without :has() every panel shows, one after another. */
@supports selector(:has(*)) {
  .monitors > .monitor { display: none; }
  .notes-wrap:has(#ch-php:checked) #note-php,
  .notes-wrap:has(#ch-struct:checked) #note-struct { display: grid; }
}

.monitor { display: grid; gap: 16px; min-width: 0; padding: 16px; background: var(--ink); color: var(--desk-2); border: 1px solid var(--desk-edge); scroll-margin-top: calc(var(--strip-h) + 24px); }
.monitor__title { color: var(--plate); font: 700 clamp(1.5rem, 2.4vw, 2rem)/1.05 var(--font-display); }
.monitor__caption { font-size: .9375rem; line-height: 1.55; text-wrap: pretty; }
.monitor__caption code { color: var(--plate); }
.monitor > .text-link { color: var(--plate); justify-self: start; }
.monitor > a:focus-visible { outline-color: var(--plate); }
.monitor .struct__rig, .monitor .php__rig { padding: 16px; }
.monitor .code { padding: 12px; font-size: .75rem; }
@media (min-width: 40em) and (max-width: 63.999em) {
  .monitor .struct__top { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .monitor .struct__meter { align-content: center; }
  .monitor .struct__mem { --cell: 42px; }
}

/* PHP rig: the checked change drives the code line, the reading and the meter, with or without script. */
.php__rig { display: grid; gap: 16px; container-type: inline-size; }
.php__rig .pick { grid-area: auto; }
.php__rig .code__line { white-space: pre-wrap; padding-left: 2ch; text-indent: -2ch; }
@container (max-width: 499px) {
  .php__rig .pick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); justify-self: stretch; }
  .php__rig .pick__opt { justify-content: flex-start; gap: 8px; padding: 0 10px; line-height: 1.15; }
  .php__rig .pick__opt + .pick__opt { margin-left: 0; }
  .php__rig .pick__opt:nth-of-type(even) { margin-left: -1px; }
  .php__rig .pick__opt:nth-of-type(n + 3) { margin-top: -1px; }
}
.php__say { display: grid; gap: 12px; }
.php__say > p { color: var(--ink-2); font-size: .875rem; line-height: 1.45; text-wrap: pretty; }
.php__mib { display: block; margin-bottom: 8px; font: 700 1.125rem/1 var(--font-display); letter-spacing: .02em; color: var(--ink); }
.php__mib b { font-size: clamp(2.25rem, 4vw, 3rem); line-height: .9; letter-spacing: 0; font-variant-numeric: tabular-nums; }
@supports selector(:has(*)) {
  .php__swap { display: grid; }
  .php__swap > *, .php__say > * { grid-area: 1 / 1; align-self: start; visibility: hidden; }
  .php__rig:has([value="list"]:checked) [data-change="list"],
  .php__rig:has([value="numeric"]:checked) [data-change="numeric"],
  .php__rig:has([value="string"]:checked) [data-change="string"],
  .php__rig:has([value="wrapper"]:checked) [data-change="wrapper"] { visibility: visible; }
}
/* The meter reads live memory on a 7.5 MiB scale: each width is recorded bytes over 7,864,320. */
.php__meter { padding-top: 18px; }
.php__track { position: relative; height: 24px; background: var(--plate); border: 1px solid var(--plate-edge); }
.php__fill { position: absolute; inset: 0 auto 0 0; width: 26.88%; background: var(--ink); transition: width 420ms var(--ease-out); }
.php__peak { position: absolute; top: -6px; bottom: -6px; left: 0; width: 93.54%; border: 1px dashed var(--ink-3); border-left: 0; opacity: 0; transition: opacity 200ms ease-out; }
.php__peak span { position: absolute; right: 0; bottom: 100%; margin-bottom: 4px; font: 700 .6875rem/1 var(--font-display); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; color: var(--ink-3); }
.php__rig:has([value="string"]:checked) .php__fill { width: 66.67%; }
.php__rig:has([value="string"]:checked) .php__peak { opacity: 1; }
.php__ticks { position: relative; height: 22px; font: 700 .75rem/1 var(--font-display); font-variant-numeric: tabular-nums; color: var(--ink-3); }
.php__ticks span { position: absolute; top: 8px; transform: translateX(-50%); }
.php__ticks [data-at="0"] { left: 0; transform: none; }
.php__ticks [data-at="2"] { left: 26.667%; }
.php__ticks [data-at="4"] { left: 53.333%; }
.php__ticks [data-at="6"] { left: 80%; }
.php__ticks [data-at="unit"] { right: 0; transform: none; }

/* ---------- Profile ---------- */

.profile { display: grid; gap: 44px; }
@media (min-width: 64em) { .profile { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(48px, 5vw, 96px); } }
.profile__lead { font: 700 clamp(1.25rem, 1.8vw, 1.5rem)/1.25 var(--font-display); letter-spacing: .005em; max-width: 24em; text-wrap: balance; }
.profile__bio > p + p { margin-top: 12px; color: var(--ink-2); max-width: 32em; }

.quote { margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--ink); }
.quote blockquote p { font: 400 clamp(1.125rem, 1.5vw, 1.3125rem)/1.4 var(--font-display); color: var(--ink-2); text-wrap: pretty; }
.quote figcaption { margin-top: 12px; font: 700 .75rem/1.4 var(--font-display); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }

.spec { border-top: 1px solid var(--ink); }
.spec > div { display: grid; grid-template-columns: 1fr; gap: 4px; padding: 13px 0; border-bottom: 1px solid var(--rule); }
@media (min-width: 40em) { .spec > div { grid-template-columns: 12rem minmax(0, 1fr); gap: 20px; } }
.spec dt { font: 700 .75rem/1.85 var(--font-display); letter-spacing: .1em; text-transform: uppercase; }
.spec dd { color: var(--ink-2); text-wrap: pretty; }

/* ---------- Contact: the control desk ---------- */

.section--contact {
  margin-top: var(--section-gap);
  padding: clamp(64px, 8vw, 112px) var(--edge) clamp(56px, 7vw, 96px);
  background: var(--ink);
  color: var(--plate);
}
.section--contact ::selection, .footer ::selection { background: var(--plate); color: var(--ink); }
.section--contact :focus-visible, .footer :focus-visible { outline-color: var(--plate); }
.section--contact .feeder::before { background: var(--desk-line); }
.section--contact .feeder::after { background: var(--desk-edge); }
.section--contact .feeder__title { background: var(--ink); color: var(--plate); }
.section--contact .breaker { border-color: var(--plate); }
.js .section--contact .feeder[data-volt="lamp"]:not(.is-live) .breaker { background: var(--ink); }
.js .section--contact .feeder[data-volt="lamp"]:not(.is-live) .breaker::before,
.js .section--contact .feeder[data-volt="lamp"]:not(.is-live) .breaker::after { background: var(--plate); }
.section--contact .feeder.is-live .breaker { border-color: var(--lamp-hi); }
.contact__lede { font: 400 clamp(1.25rem, 2vw, 1.625rem)/1.35 var(--font-display); color: var(--desk-2); max-width: 26em; text-wrap: balance; }
.contact__mail { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; margin-top: 28px; }
.lamp-button--xl {
  min-height: 60px; padding: 0 24px 0 18px; gap: 14px;
  border-color: var(--lamp-hi);
  font: 700 clamp(1.0625rem, 2vw, 1.4375rem)/1 var(--font-display);
  letter-spacing: .01em; text-transform: none;
  max-width: 100%;
}
.lamp-button--xl span { overflow-wrap: anywhere; }
.lamp-button--xl .lamp { width: 22px; height: 22px; }
.copy {
  min-height: 48px; padding: 0 16px;
  background: transparent; color: var(--plate);
  border: 1px solid var(--desk-edge);
  font: 700 .8125rem/1 var(--font-display); letter-spacing: .1em; text-transform: uppercase;
  cursor: pointer;
  transition: border-color 160ms ease-out;
}
.copy:hover, .copy.is-done { border-color: var(--plate); }

.elsewhere { display: flex; flex-wrap: wrap; gap: 8px 28px; margin-top: 30px; }
.elsewhere a { font: 700 .875rem/1 var(--font-display); letter-spacing: .1em; text-transform: uppercase; padding: 12px 0; display: inline-block; color: var(--plate); }

/* ---------- Footer ---------- */

.footer {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px;
  padding: 22px var(--edge) 30px;
  background: var(--ink);
  box-shadow: inset 0 1px 0 var(--desk-line);
  font: 700 .8125rem/1.5 var(--font-display); letter-spacing: .02em;
  color: var(--desk-2);
}
.footer a { color: var(--plate); }

/* ---------- Motion preferences ---------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    transition-delay: 0ms !important;
  }
  .fl-flux { display: none; }
}

@media print {
  .strip, .panel__rail, .lamp-button .lamp, .switch, .pick, .struct__mem { display: none !important; }
  .hero, .board--panel { background: none; }
  a { text-decoration: none; }
}