/* ==========================================================================
   Working with TCP Sockets: shared stylesheet
   Framework: Milligram 1.4.1 (grid, buttons, forms, tables) + this layer.
   Milligram sets html { font-size: 62.5% }, so 1rem = 10px in property values.
   Media queries ignore that and use the browser default (1rem = 16px), so
   breakpoints below are written in 16px rems to line up with Milligram's 40rem.
   ========================================================================== */

/* ---------- Tokens ---------- */
:root {
  --paper: #f3f0e8;
  --paper-2: #e9e4d8;
  --card: #fbf9f4;
  --ink: #14161b;
  --ink-2: #33373f;
  --muted: #646872;
  --line: #d9d3c6;
  --line-2: #bfb8a8;
  --signal: #e5481f;
  --signal-dk: #b9340f;
  --signal-soft: rgba(229, 72, 31, .14);
  --trace: #2147c9;
  --ok: #2c7a4b;
  --warn: #b7791f;
  --night: #111318;
  --night-2: #181b22;
  --night-3: #22262f;
  --night-line: rgba(243, 240, 232, .06);
  --night-edge: rgba(243, 240, 232, .16);
  --night-text: rgba(243, 240, 232, .74);
  --night-dim: rgba(243, 240, 232, .5);
  --display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  --header-h: 7rem;
}

/* ---------- Base ---------- */
html { scroll-behavior: smooth; }

body {
  background-color: var(--paper);
  background-image:
    linear-gradient(rgba(20, 22, 27, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(20, 22, 27, .035) 1px, transparent 1px);
  background-size: 2.4rem 2.4rem;
  color: var(--ink-2);
  font-family: var(--display);
  font-size: 1.7rem;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--ink);
  font-family: var(--display);
  font-stretch: 125%;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.05;
}
h1 { font-size: clamp(3.8rem, 6vw, 6.8rem); }
h2 { font-size: clamp(3rem, 4vw, 4.4rem); }
h3 { font-size: 2.2rem; font-weight: 700; letter-spacing: -.01em; line-height: 1.2; }
h4 { font-size: 1.8rem; font-weight: 700; letter-spacing: 0; line-height: 1.25; }
h5, h6 { font-size: 1.6rem; font-weight: 700; letter-spacing: 0; }

a { color: var(--trace); text-decoration: none; transition: color .2s; }
a:hover, a:focus { color: var(--signal); }
p a, dd a, td a, .checklist a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }

::selection { background: var(--signal); color: #fff; }

:focus-visible,
a:focus-visible,
.button:focus-visible,
button:focus-visible,
input:focus-visible,
summary:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; }

strong, b { color: var(--ink); font-weight: 700; }

code, kbd, samp {
  background: var(--paper-2);
  border-radius: 0;
  color: var(--ink);
  font-family: var(--mono);
  font-size: .86em;
  padding: .15rem .5rem;
}
pre {
  background: var(--night);
  border-left: 3px solid var(--signal);
  color: var(--paper);
  overflow-x: auto;
}
pre > code {
  background: transparent;
  color: inherit;
  display: block;
  font-size: 1.4rem;
  line-height: 1.7;
  padding: 1.8rem 2.2rem;
  white-space: pre;
}

hr { border-top: 1px solid var(--line); margin: 4rem 0; }

img { display: block; }

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

/* ---------- Milligram overrides: buttons ---------- */
.button, button,
input[type='button'], input[type='reset'], input[type='submit'] {
  background-color: var(--ink);
  border: 1px solid var(--ink);
  border-radius: 0;
  color: var(--paper);
  font-family: var(--mono);
  font-size: 1.25rem;
  font-weight: 600;
  height: 4.6rem;
  letter-spacing: .1em;
  line-height: 4.4rem;
  padding: 0 2.6rem;
  transition: background-color .2s, border-color .2s, color .2s, transform .2s, box-shadow .2s;
}
.button:hover, .button:focus,
button:hover, button:focus,
input[type='button']:hover, input[type='button']:focus,
input[type='reset']:hover, input[type='reset']:focus,
input[type='submit']:hover, input[type='submit']:focus {
  background-color: var(--signal);
  border-color: var(--signal);
  color: #fff;
}
.button.button-outline, button.button-outline {
  background-color: transparent;
  border-color: var(--ink);
  color: var(--ink);
}
.button.button-outline:hover, .button.button-outline:focus,
button.button-outline:hover, button.button-outline:focus {
  background-color: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}
.button.button-signal { background-color: var(--signal); border-color: var(--signal); color: #fff; }
.button.button-signal:hover, .button.button-signal:focus { background-color: var(--ink); border-color: var(--ink); color: var(--paper); }
.button.button-small { font-size: 1.15rem; height: 3.8rem; line-height: 3.6rem; padding: 0 1.8rem; }
.button .arr { display: inline-block; margin-left: .6rem; transition: transform .2s; }
.button:hover .arr { transform: translateX(4px); }

/* ---------- Milligram overrides: forms ---------- */
input[type='email'], input[type='number'], input[type='search'], input[type='tel'],
input[type='text'], input[type='url'], input:not([type]), textarea, select {
  background-color: var(--card);
  border: 1px solid var(--line-2);
  border-radius: 0;
  box-shadow: none;
  color: var(--ink);
  font-family: var(--display);
  font-size: 1.6rem;
  height: 4.6rem;
  padding: .8rem 1.2rem;
  transition: border-color .2s, box-shadow .2s;
}
input[type='email']:focus, input[type='number']:focus, input[type='search']:focus, input[type='tel']:focus,
input[type='text']:focus, input[type='url']:focus, input:not([type]):focus, textarea:focus, select:focus {
  border-color: var(--signal);
  box-shadow: 0 0 0 3px var(--signal-soft);
  outline: 0;
}
select:focus {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 8" width="30"><path fill="%23e5481f" d="M0,0l6,8l6-8"/></svg>');
}
textarea { height: auto; min-height: 16rem; padding-top: 1.2rem; resize: vertical; }
::placeholder { color: #8d9097; opacity: 1; }

label, legend {
  color: var(--ink);
  font-family: var(--mono);
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: .1em;
  margin-bottom: .6rem;
  text-transform: uppercase;
}
label .opt { color: var(--muted); font-weight: 400; letter-spacing: .04em; text-transform: none; }

input[type='range'] { accent-color: var(--signal); width: 100%; margin: 1.2rem 0 .6rem; cursor: pointer; }

/* ---------- Milligram overrides: tables ---------- */
.table-wrap { margin-bottom: 2.5rem; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-wrap table { display: table; margin-bottom: 0; min-width: 56rem; width: 100%; }
th {
  border-bottom: 2px solid var(--ink);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
}
td { border-bottom: 1px solid var(--line); font-size: 1.55rem; vertical-align: top; }
td, th { padding: 1.3rem 1.4rem; }
td:last-child, th:last-child { padding-right: 0; }
td.num, th.num { font-family: var(--mono); white-space: nowrap; }
tbody tr { transition: background-color .15s; }
tbody tr:hover { background: rgba(229, 72, 31, .05); }

/* ---------- Header / navigation ---------- */
.site-header {
  background: rgba(243, 240, 232, .9);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 100;
}
.site-header .container { position: static; }
.nav-wrap { align-items: center; display: flex; gap: 2rem; justify-content: space-between; min-height: var(--header-h); }

.brand { align-items: center; color: var(--ink); display: inline-flex; gap: 1.2rem; }
.brand:hover, .brand:focus { color: var(--ink); }
.brand-mark { flex: none; height: 3.8rem; width: 3.8rem; }
.brand-mark .wave { stroke-dasharray: 60; stroke-dashoffset: 0; }
.brand:hover .brand-mark .wave { animation: markWave 1.2s linear infinite; }
@keyframes markWave { to { stroke-dashoffset: -120; } }
.brand-text { display: flex; flex-direction: column; line-height: 1; }
.brand-text small {
  color: var(--muted);
  font-family: var(--mono);
  font-size: 1.05rem;
  letter-spacing: .16em;
  margin-bottom: .45rem;
  text-transform: uppercase;
}
.brand-text strong { font-size: 2.05rem; font-stretch: 125%; font-weight: 800; letter-spacing: -.02em; }

.nav-links { align-items: center; display: flex; gap: .2rem; list-style: none; margin: 0; padding: 0; }
.nav-links li { margin: 0; }
.nav-links a {
  color: var(--ink-2);
  display: block;
  font-family: var(--mono);
  font-size: 1.3rem;
  font-weight: 500;
  padding: .8rem 1rem;
  position: relative;
  white-space: nowrap;
}
.nav-links a::after {
  background: var(--signal);
  bottom: .2rem;
  content: '';
  height: 2px;
  left: 1rem;
  position: absolute;
  right: 1rem;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s ease;
}
.nav-links a:hover, .nav-links a.active { color: var(--ink); }
.nav-links a:hover::after, .nav-links a.active::after { transform: scaleX(1); }
.nav-links a.nav-cta { background: var(--ink); color: var(--paper); margin-left: .8rem; padding: .8rem 1.6rem; }
.nav-links a.nav-cta::after { display: none; }
.nav-links a.nav-cta:hover, .nav-links a.nav-cta.active { background: var(--signal); color: #fff; }

.nav-toggle { display: none; }

@media (max-width: 67.5rem) {
  .nav-toggle {
    align-items: center;
    background: transparent;
    border: 1px solid var(--ink);
    color: var(--ink);
    display: inline-flex;
    height: 4.4rem;
    justify-content: center;
    line-height: 1;
    margin: 0;
    padding: 0;
    width: 4.4rem;
  }
  .nav-toggle:hover, .nav-toggle:focus { background: var(--ink); border-color: var(--ink); color: var(--paper); }
  .bars, .bars::before, .bars::after {
    background: currentColor;
    content: '';
    display: block;
    height: 2px;
    transition: transform .25s, background-color .25s;
    width: 1.8rem;
  }
  .bars { position: relative; }
  .bars::before { left: 0; position: absolute; top: -.6rem; }
  .bars::after { left: 0; position: absolute; top: .6rem; }
  .nav-toggle[aria-expanded='true'] .bars { background: transparent; }
  .nav-toggle[aria-expanded='true'] .bars::before { transform: translateY(.6rem) rotate(45deg); }
  .nav-toggle[aria-expanded='true'] .bars::after { transform: translateY(-.6rem) rotate(-45deg); }

  .site-nav { left: 0; position: absolute; right: 0; top: 100%; }
  .nav-links {
    align-items: stretch;
    background: var(--paper);
    border-bottom: 1px solid var(--ink);
    box-shadow: 0 18px 30px rgba(20, 22, 27, .1);
    display: none;
    flex-direction: column;
    padding: .6rem 2rem 2rem;
  }
  .nav-links.open { display: flex; }
  .nav-links a { border-bottom: 1px solid var(--line); font-size: 1.5rem; padding: 1.3rem 0; }
  .nav-links a::after { bottom: -1px; left: 0; right: auto; width: 3.2rem; }
  .nav-links a.nav-cta { border: 0; margin: 1.6rem 0 0; text-align: center; }
}

/* ---------- Generic sections ---------- */
.section { padding: 9.6rem 0; position: relative; }
.section.tight { padding: 6.4rem 0; }
.section.alt { background-color: var(--paper-2); border-bottom: 1px solid var(--line); border-top: 1px solid var(--line); }
.section + .section:not(.alt):not(.on-dark):not(.signal-band) { border-top: 1px solid var(--line); }

.sec-head { margin-bottom: 4.8rem; max-width: 74rem; }
.sec-head h2 { margin-bottom: 1.6rem; }
.sec-head p { margin-bottom: 0; }
.sec-head.split { align-items: flex-end; display: flex; flex-wrap: wrap; gap: 2rem 4rem; justify-content: space-between; max-width: none; }
.sec-head.split > div { max-width: 66rem; }
.sec-head.split .button { margin: 0; }

.eyebrow {
  color: var(--signal);
  display: inline-block;
  font-family: var(--mono);
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: .14em;
  margin-bottom: 1.6rem;
  text-transform: uppercase;
}
.eyebrow .hex { color: var(--muted); margin-right: .6rem; }
.on-dark .eyebrow .hex { color: var(--night-dim); }

.lede { color: var(--ink-2); font-size: 2rem; line-height: 1.55; }
.mono { font-family: var(--mono); }
.muted { color: var(--muted); }
.center { text-align: center; }

/* Layer tag chip */
.tag {
  border: 1px solid currentColor;
  color: var(--signal);
  display: inline-block;
  font-family: var(--mono);
  font-size: 1.05rem;
  font-stretch: 100%;
  font-weight: 600;
  letter-spacing: .08em;
  line-height: 1.5;
  padding: 0 .6rem;
  vertical-align: middle;
  white-space: nowrap;
}
.tag.ink { color: var(--ink); }
.tag.solid { background: var(--signal); border-color: var(--signal); color: #fff; }

/* ---------- Dark "instrument" surfaces ---------- */
.on-dark {
  background-color: var(--night);
  background-image:
    linear-gradient(var(--night-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--night-line) 1px, transparent 1px);
  background-size: 4.8rem 4.8rem;
  color: var(--night-text);
}
.on-dark h1, .on-dark h2, .on-dark h3, .on-dark h4, .on-dark strong, .on-dark b { color: var(--paper); }
.on-dark a:not(.button) { color: var(--paper); }
.on-dark a:not(.button):hover { color: var(--signal); }
.on-dark code { background: var(--night-3); color: var(--paper); }
.on-dark .lede { color: var(--night-text); }
.on-dark .button.button-outline { border-color: rgba(243, 240, 232, .5); color: var(--paper); }
.on-dark .button.button-outline:hover, .on-dark .button.button-outline:focus { background: var(--paper); border-color: var(--paper); color: var(--ink); }
.on-dark .button.button-signal:hover, .on-dark .button.button-signal:focus { background: var(--paper); border-color: var(--paper); color: var(--ink); }

/* ---------- Load + scroll motion ---------- */
.load-in > * { animation: rise .8s cubic-bezier(.2, .7, .2, 1) both; }
.load-in > *:nth-child(2) { animation-delay: .08s; }
.load-in > *:nth-child(3) { animation-delay: .16s; }
.load-in > *:nth-child(4) { animation-delay: .24s; }
.load-in > *:nth-child(5) { animation-delay: .32s; }
.load-in > *:nth-child(6) { animation-delay: .4s; }
@keyframes rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
.rise-late { animation: rise .9s .3s cubic-bezier(.2, .7, .2, 1) both; }

@media (min-width: 40rem) { .row .column.pad-l { padding-left: 4.8rem; } }

/* Milligram keeps column-N max-widths below its 40rem breakpoint even though rows
   stack there, so sized columns would render at 50% / 33% width on phones. */
@media (max-width: 39.99rem) {
  .row .column[class*='column-'] { flex: 1 1 auto; margin-left: 0; max-width: 100%; }
  .row:not(.cards):not(.tiles):not(.team):not(.split) > .column + .column { margin-top: 3.2rem; }
}

.js .reveal { opacity: 0; transform: translateY(20px); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1); }
.js .reveal.in { opacity: 1; transform: none; }

/* ---------- Home hero ---------- */
.hero { overflow: hidden; padding: 9.6rem 0 10.4rem; position: relative; }
.hero::after {
  background: radial-gradient(circle, rgba(229, 72, 31, .22), transparent 62%);
  bottom: -38rem;
  content: '';
  height: 76rem;
  pointer-events: none;
  position: absolute;
  right: -22rem;
  width: 76rem;
}
.hero .container { position: relative; z-index: 1; }
.hero h1 {
  font-size: clamp(4.2rem, 7vw, 8.2rem);
  letter-spacing: -.035em;
  line-height: .95;
  margin-bottom: 2.8rem;
}
.hero h1 .fn { color: var(--signal); font-family: var(--mono); font-stretch: 100%; font-weight: 500; letter-spacing: -.05em; }
.hero h1 em {
  font-style: normal;
  text-decoration: underline wavy var(--signal);
  text-decoration-skip-ink: none;
  text-decoration-thickness: .045em;
  text-underline-offset: .17em;
}
.hero .lede { font-size: 2rem; max-width: 54rem; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 1.2rem; margin: 3.6rem 0 4rem; }
.hero-ctas .button { margin: 0; }
.hero-meta {
  color: var(--night-dim);
  display: flex;
  flex-wrap: wrap;
  font-family: var(--mono);
  font-size: 1.25rem;
  gap: .8rem 2.4rem;
  list-style: none;
  margin: 0;
}
.hero-meta li { margin: 0; }
@media (max-width: 56.24rem) {
  .hero .row { flex-direction: column; }
  .hero .row .column { flex: 1 1 auto; margin-left: 0; max-width: 100%; }
  .hero .descent { margin-top: 5.6rem; max-width: 60rem; }
}
.hero-meta li::before { color: var(--signal); content: '\25A0\00a0\00a0'; font-size: .8em; }

/* Packet "descent" diagram */
.descent {
  background: rgba(17, 19, 24, .78);
  border: 1px solid var(--night-edge);
  margin-top: 1.2rem;
  padding: 2.4rem 2.4rem .8rem 5.6rem;
  position: relative;
}
.descent-head {
  background: var(--night);
  color: var(--night-dim);
  font-family: var(--mono);
  font-size: 1.1rem;
  left: 2rem;
  letter-spacing: .12em;
  padding: 0 .8rem;
  position: absolute;
  text-transform: uppercase;
  top: -1rem;
  line-height: 2rem;
}
.descent-head .dot {
  animation: blink 1.2s steps(2, start) infinite;
  background: var(--signal);
  border-radius: 50%;
  display: inline-block;
  height: .7rem;
  margin-right: .6rem;
  vertical-align: middle;
  width: .7rem;
}
@keyframes blink { to { visibility: hidden; } }

.descent-rail {
  background: repeating-linear-gradient(to bottom, rgba(243, 240, 232, .32) 0 4px, transparent 4px 8px);
  height: 29.6rem;          /* 4 row pitches of 7.4rem */
  left: 2.7rem;
  position: absolute;
  top: 5.6rem;              /* padding-top + half a row */
  width: 1px;
}
.packet {
  animation: packetDrop 6s linear infinite;
  background: var(--signal);
  box-shadow: 0 0 0 4px rgba(229, 72, 31, .25), 0 0 20px rgba(229, 72, 31, .9);
  height: 1.2rem;
  left: -.6rem;
  margin-top: -.6rem;
  position: absolute;
  top: 0;
  width: 1.2rem;
}
@keyframes packetDrop {
  0% { opacity: 0; top: 0; }
  3% { opacity: 1; }
  72% { opacity: 1; top: 100%; }
  78%, 100% { opacity: 0; top: 100%; }
}
.descent-layers { list-style: none; margin: 0; padding: 0; }
.descent-layers li {
  align-content: center;
  animation: layerHot 6s linear infinite;
  animation-delay: calc(var(--i) * 1.08s);
  background: rgba(243, 240, 232, .025);
  border: 1px solid rgba(243, 240, 232, .1);
  column-gap: 1.4rem;
  display: grid;
  grid-template-columns: 3.8rem minmax(0, 1fr);
  height: 6.4rem;
  margin: 0 0 1rem;
  padding: 0 1.4rem;
}
.descent-layers .lvl { align-self: center; color: var(--signal); font-family: var(--mono); font-size: 1.5rem; font-weight: 600; grid-row: 1 / 3; }
.descent-layers .what { color: var(--night-dim); font-family: var(--mono); font-size: 1.05rem; letter-spacing: .14em; line-height: 1.4; text-transform: uppercase; }
.descent-layers code {
  background: none;
  color: var(--paper);
  display: block;
  font-size: 1.35rem;
  line-height: 1.45;
  overflow: hidden;
  padding: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@keyframes layerHot {
  0%, 24%, 100% { background: rgba(243, 240, 232, .025); border-color: rgba(243, 240, 232, .1); }
  3%, 12% { background: rgba(229, 72, 31, .16); border-color: var(--signal); }
}
.air { display: block; height: auto; margin: .4rem 0 0 -3.2rem; width: calc(100% + 3.2rem); }
.air .wave { animation: waveFlow 1.1s linear infinite; fill: none; stroke: var(--signal); stroke-width: 2.4; }
@keyframes waveFlow { to { transform: translateX(-60px); } }
.air .ring {
  animation: ring 6s ease-out infinite;
  animation-delay: 4.3s;
  fill: none;
  opacity: 0;
  stroke: var(--signal);
  stroke-width: 1.5;
  transform-box: fill-box;
  transform-origin: center;
}
.air .ring.r2 { animation-delay: 4.65s; }
@keyframes ring {
  0% { opacity: .9; transform: scale(.4); }
  22%, 100% { opacity: 0; transform: scale(3.4); }
}
.air-cap { color: var(--night-dim); font-family: var(--mono); font-size: 1.15rem; margin: .2rem 0 1.4rem; }
.air-cap b { color: var(--signal); font-weight: 600; }

/* ---------- Inner page heads ---------- */
.page-head { overflow: hidden; padding: 7.2rem 0 8rem; position: relative; }
.page-head::before {
  animation: drift 7s linear infinite;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='48' viewBox='0 0 120 48'><path d='M0 24 Q30 0 60 24 T120 24' fill='none' stroke='%23e5481f' stroke-opacity='.45' stroke-width='1.5'/></svg>") repeat-x 0 100%;
  bottom: 0;
  content: '';
  height: 48px;
  left: 0;
  opacity: .8;
  position: absolute;
  right: 0;
}
@keyframes drift { to { background-position: -120px 100%; } }
.page-head .container { position: relative; z-index: 1; }
.req { color: var(--night-dim); display: block; font-family: var(--mono); font-size: 1.25rem; margin-bottom: 2.2rem; }
.req b { color: var(--signal); font-weight: 600; }
.page-head h1 { margin-bottom: 2.2rem; }
.page-head .lede { margin: 0; max-width: 62rem; }

.layer-rail { border: 1px solid var(--night-edge); list-style: none; margin: 0; padding: 0; }
.layer-rail li {
  align-items: center;
  border-bottom: 1px solid rgba(243, 240, 232, .07);
  color: rgba(243, 240, 232, .36);
  display: flex;
  font-family: var(--mono);
  font-size: 1.25rem;
  gap: 1.2rem;
  margin: 0;
  padding: .7rem 1.4rem;
}
.layer-rail li:last-child { border-bottom: 0; }
.layer-rail li span { font-weight: 600; width: 2.6rem; }
.layer-rail li.on { background: rgba(229, 72, 31, .14); box-shadow: inset 3px 0 0 var(--signal); color: var(--paper); }
.layer-rail li.on span { color: var(--signal); }
.rail-cap { color: var(--night-dim); font-family: var(--mono); font-size: 1.1rem; letter-spacing: .1em; margin: 0 0 1rem; text-transform: uppercase; }
.rail-note { color: var(--night-dim); font-family: var(--mono); font-size: 1.15rem; margin: 1rem 0 0; }
@media (max-width: 39.99rem) { .page-head .rail-col { margin-top: 3.6rem; } }

/* ---------- Cards ---------- */
.row.cards { flex-wrap: wrap; }
.row.cards > .column { margin-bottom: 2.4rem; }
@media (min-width: 40rem) and (max-width: 56.24rem) {
  .row.cards > .column.column-33 { flex: 0 0 50%; max-width: 50%; }
}
.card {
  background: var(--card);
  border: 1px solid var(--ink);
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;
  transition: transform .25s, box-shadow .25s;
}
.card:hover { box-shadow: 6px 6px 0 var(--ink); transform: translate(-3px, -3px); }
.card-img {
  aspect-ratio: 16 / 10;
  border-bottom: 1px solid var(--ink);
  filter: grayscale(.3) contrast(1.05);
  object-fit: cover;
  transition: filter .3s;
  width: 100%;
}
.card:hover .card-img { filter: none; }
.card-body { display: flex; flex: 1; flex-direction: column; padding: 2.2rem 2.2rem 2.4rem; }
.card-meta {
  color: var(--muted);
  font-family: var(--mono);
  font-size: 1.1rem;
  letter-spacing: .12em;
  margin-bottom: 1rem;
  text-transform: uppercase;
}
.card-meta b { color: var(--signal); font-weight: 600; }
.card h3 { font-size: 2.1rem; margin-bottom: 1.2rem; }
.card p { color: var(--ink-2); font-size: 1.55rem; margin-bottom: 2.2rem; }
.card .button { align-self: flex-start; margin: auto 0 0; }
.card-num {
  background: var(--ink);
  color: var(--paper);
  font-family: var(--mono);
  font-size: 1.2rem;
  font-weight: 600;
  left: -1px;
  letter-spacing: .1em;
  padding: .4rem .9rem;
  position: absolute;
  top: -1px;
}

/* Featured (horizontal) card */
.card.feature { flex-direction: row; }
.card.feature .card-img { aspect-ratio: auto; border-bottom: 0; border-right: 1px solid var(--ink); flex: 0 0 55%; max-width: 55%; min-height: 36rem; }
.card.feature .card-body { justify-content: center; padding: 3.6rem; }
.card.feature h3 { font-size: clamp(2.4rem, 2.6vw, 3.2rem); }
.card.feature p { font-size: 1.7rem; }
.card.feature .button { margin-top: .8rem; }
@media (min-width: 40rem) and (max-width: 56.24rem) {
  .row.cards > .column.col-feature { flex: 0 0 50%; max-width: 50%; }
}
@media (max-width: 56.24rem) {
  .card.feature { flex-direction: column; }
  .card.feature h3 { font-size: 2.1rem; }
  .card.feature p { font-size: 1.55rem; }
  .card.feature .card-img { aspect-ratio: 16 / 10; border-bottom: 1px solid var(--ink); border-right: 0; max-width: 100%; min-height: 0; }
  .card.feature .card-body { padding: 2.2rem 2.2rem 2.4rem; }
}

/* ---------- Split (image + text) ---------- */
.row.split { align-items: center; }
.split-img {
  aspect-ratio: 4 / 3;
  border: 1px solid var(--ink);
  box-shadow: 1.2rem 1.2rem 0 var(--signal);
  object-fit: cover;
  width: 100%;
}
.split-fig { margin: 0 0 4rem; position: relative; }
.split-fig figcaption {
  background: var(--ink);
  bottom: 1.6rem;
  color: var(--paper);
  font-family: var(--mono);
  font-size: 1.1rem;
  left: 1.6rem;
  letter-spacing: .1em;
  padding: .4rem .9rem;
  position: absolute;
  text-transform: uppercase;
}
.row.split.flip .split-fig { margin: 3.2rem 0 0; }
@media (min-width: 40rem) {
  .split-fig, .row.split.flip .split-fig { margin: 0; }
  .row.split > .column:last-child { padding-left: 4.8rem; }
  .row.split.flip > .column:first-child { padding-right: 4.8rem; }
  .row.split.flip > .column:last-child { padding-left: 1rem; }
}

/* ---------- Stats band ---------- */
.stats { border-left: 1px solid var(--night-edge); border-top: 1px solid var(--night-edge); display: grid; grid-template-columns: repeat(3, 1fr); }
.stat { border-bottom: 1px solid var(--night-edge); border-right: 1px solid var(--night-edge); padding: 3.2rem 2.8rem; }
.stat-num {
  color: var(--paper);
  display: block;
  font-size: clamp(4rem, 5vw, 5.8rem);
  font-stretch: 125%;
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1;
  margin-bottom: 1.4rem;
  white-space: nowrap;
}
.stat-num small { color: var(--signal); font-family: var(--mono); font-size: .38em; font-stretch: 100%; font-weight: 600; letter-spacing: 0; margin-left: .4rem; }
.stat p { color: var(--night-text); font-size: 1.5rem; margin: 0; }
@media (max-width: 50rem) { .stats { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 30rem) { .stats { grid-template-columns: 1fr; } }

/* ---------- Definitions (home teaser + glossary) ---------- */
.defs { border-top: 2px solid var(--ink); margin: 0 0 3.2rem; }
.def { border-bottom: 1px solid var(--line); display: grid; gap: .6rem 3.2rem; grid-template-columns: 26rem 1fr; margin: 0; padding: 2.2rem 0; }
.def dt { color: var(--ink); font-size: 2.1rem; font-stretch: 125%; font-weight: 800; letter-spacing: -.01em; line-height: 1.25; margin: 0; }
.def dt .tag { margin-left: .8rem; }
.def dd { margin: 0; }
.def dd p { margin: 0; }
@media (max-width: 37.5rem) { .def { grid-template-columns: 1fr; } }

/* ---------- Testimonials ---------- */
blockquote.quote { border-left: 3px solid var(--signal); margin: 0 0 3.2rem; padding: .4rem 0 .4rem 2.4rem; }
blockquote.quote p { color: var(--ink); font-size: 1.85rem; font-weight: 500; line-height: 1.5; margin-bottom: 1.4rem; }
blockquote.quote p::before { color: var(--signal); content: '> '; font-family: var(--mono); font-weight: 600; }
blockquote.quote cite { color: var(--muted); font-family: var(--mono); font-size: 1.15rem; font-style: normal; letter-spacing: .08em; text-transform: uppercase; }

/* ---------- Signal band (newsletter) ---------- */
.signal-band { background: var(--signal); color: var(--ink); overflow: hidden; position: relative; }
.signal-band::before {
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='80' viewBox='0 0 160 80'><path d='M0 40 Q40 0 80 40 T160 40' fill='none' stroke='%2314161b' stroke-opacity='.12' stroke-width='2'/></svg>") repeat;
  content: '';
  inset: 0;
  position: absolute;
}
.signal-band .container { position: relative; }
.signal-band h2 { color: var(--ink); }
.signal-band .eyebrow { color: var(--ink); }
.signal-band p { color: var(--ink); }
.inline-form { display: flex; margin-bottom: 0; max-width: 56rem; }
.inline-form input[type='email'] { background: var(--paper); border-color: var(--ink); flex: 1; margin: 0; min-width: 0; }
.inline-form .button, .inline-form button { flex: none; margin: 0; }
.signal-band .inline-form button:hover, .signal-band .inline-form button:focus { background: var(--paper); border-color: var(--ink); color: var(--ink); }
@media (max-width: 30rem) {
  .inline-form { flex-direction: column; gap: 1rem; }
}
.form-note { font-family: var(--mono); font-size: 1.2rem; margin: 1.2rem 0 0; opacity: .8; }

/* Inline form confirmation (newsletter + contact) */
.form-status {
  align-items: center;
  background: var(--ink);
  color: var(--paper);
  display: flex;
  font-family: var(--mono);
  font-size: 1.5rem;
  font-weight: 600;
  gap: 1.2rem;
  letter-spacing: .04em;
  margin-top: 1.6rem;
  padding: 1.4rem 1.8rem;
}
.form-status[hidden] { display: none; }
.form-status::before {
  align-items: center;
  background: var(--signal);
  color: #fff;
  content: '\2713';
  display: inline-flex;
  flex: none;
  height: 2.6rem;
  justify-content: center;
  width: 2.6rem;
}
.form-status.pop { animation: rise .45s cubic-bezier(.2, .7, .2, 1) both; }

/* ---------- Timeline ---------- */
.timeline { border-top: 2px solid var(--ink); list-style: none; margin: 0; padding: 0; }
.timeline li { border-bottom: 1px dashed var(--line-2); display: grid; gap: .4rem 3.2rem; grid-template-columns: 11rem 1fr; margin: 0; padding: 2.2rem 0; }
.timeline .yr { color: var(--signal); font-family: var(--mono); font-size: 2.2rem; font-weight: 600; line-height: 1.2; }
.timeline h4 { margin: 0 0 .4rem; }
.timeline p { font-size: 1.55rem; margin: 0; }
@media (max-width: 30rem) { .timeline li { grid-template-columns: 1fr; } }

/* ---------- Principles / numbered blocks ---------- */
.principles { counter-reset: pr; display: grid; gap: 0; grid-template-columns: repeat(2, 1fr); border-left: 1px solid var(--ink); border-top: 1px solid var(--ink); list-style: none; margin: 0; padding: 0; }
.principles li { background: var(--card); border-bottom: 1px solid var(--ink); border-right: 1px solid var(--ink); counter-increment: pr; margin: 0; padding: 3.2rem; }
.principles li::before { color: var(--signal); content: '0x0' counter(pr); display: block; font-family: var(--mono); font-size: 1.3rem; font-weight: 600; margin-bottom: 1.2rem; }
.principles h3 { margin-bottom: 1rem; }
.principles p { font-size: 1.6rem; margin: 0; }
@media (max-width: 37.5rem) { .principles { grid-template-columns: 1fr; } }

/* ---------- Team ---------- */
.row.team { flex-wrap: wrap; }
.member { margin-bottom: 3.2rem; }
.member img {
  aspect-ratio: 1;
  border: 1px solid var(--ink);
  filter: grayscale(1) contrast(1.08);
  object-fit: cover;
  transition: filter .3s, box-shadow .3s;
  width: 100%;
}
.member:hover img { box-shadow: 6px 6px 0 var(--signal); filter: none; }
.member h4 { margin: 1.6rem 0 .3rem; }
.member .role { color: var(--signal); display: block; font-family: var(--mono); font-size: 1.15rem; letter-spacing: .08em; margin-bottom: .8rem; text-transform: uppercase; }
.member p { font-size: 1.5rem; margin: 0; }
@media (min-width: 40rem) and (max-width: 59.99rem) {
  .row.team > .column.column-25 { flex: 0 0 50%; max-width: 50%; }
}

/* ---------- Steps (Wi-Fi association) ---------- */
.steps { border-left: 1px solid var(--ink); border-top: 1px solid var(--ink); counter-reset: step; display: grid; grid-template-columns: repeat(3, 1fr); list-style: none; margin: 0; padding: 0; }
.steps li { background: var(--card); border-bottom: 1px solid var(--ink); border-right: 1px solid var(--ink); counter-increment: step; margin: 0; padding: 2.8rem 2.6rem; position: relative; }
.steps li::before { color: var(--signal); content: counter(step, decimal-leading-zero); display: block; font-family: var(--mono); font-size: 1.3rem; font-weight: 600; margin-bottom: 1rem; }
.steps h3 { font-size: 2rem; margin-bottom: 1rem; }
.steps p { font-size: 1.55rem; margin-bottom: 1.4rem; }
.steps .frame { background: var(--paper-2); color: var(--ink); display: inline-block; font-family: var(--mono); font-size: 1.2rem; padding: .3rem .8rem; }
.steps li.final { background: var(--ink); }
.steps li.final h3 { color: var(--paper); }
.steps li.final p { color: var(--night-text); }
.steps li.final .frame { background: var(--signal); color: #fff; }
.steps li.final code { background: var(--night-3); color: var(--paper); }
@media (max-width: 50rem) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 30rem) { .steps { grid-template-columns: 1fr; } }

/* ---------- Bands (Wi-Fi) / concept tiles ---------- */
.tile { background: var(--card); border: 1px solid var(--ink); height: 100%; padding: 2.8rem 2.6rem; }
.tile .big { color: var(--ink); display: block; font-size: 4.4rem; font-stretch: 125%; font-weight: 800; letter-spacing: -.03em; line-height: 1; margin-bottom: 1.2rem; }
.tile .big small { color: var(--signal); font-family: var(--mono); font-size: .36em; font-stretch: 100%; font-weight: 600; letter-spacing: 0; margin-left: .3rem; }
.tile h3 { margin-bottom: 1rem; }
.tile p { font-size: 1.55rem; }
.tile ul { list-style: none; margin: 0; }
.tile ul li { border-top: 1px solid var(--line); font-size: 1.5rem; margin: 0; padding: .8rem 0; }
.tile ul li b { font-family: var(--mono); font-size: 1.3rem; font-weight: 600; }
.row.tiles { flex-wrap: wrap; }
.row.tiles > .column { margin-bottom: 2.4rem; }
@media (min-width: 40rem) and (max-width: 49.99rem) {
  .row.tiles > .column.column-33,
  .row.tiles > .column.column-25 { flex: 0 0 50%; max-width: 50%; }
}
.tile .pill { margin-bottom: 1.4rem; }
.tile .yr { color: var(--muted); float: right; font-family: var(--mono); font-size: 1.2rem; }
.formula {
  background: var(--paper-2);
  border-left: 3px solid var(--signal);
  color: var(--ink);
  display: block;
  font-family: var(--mono);
  font-size: 1.4rem;
  line-height: 1.6;
  margin: 0 0 1.6rem;
  overflow-x: auto;
  padding: 1rem 1.4rem;
  white-space: nowrap;
}

/* Status pills */
.pill { border: 1px solid currentColor; display: inline-block; font-family: var(--mono); font-size: 1.05rem; font-weight: 600; letter-spacing: .1em; padding: .1rem .7rem; text-transform: uppercase; white-space: nowrap; }
.pill.bad { background: var(--signal); border-color: var(--signal); color: #fff; }
.pill.warn { color: var(--warn); }
.pill.ok { color: var(--ok); }
.pill.best { background: var(--ok); border-color: var(--ok); color: #fff; }

/* ---------- Diagrams ---------- */
.diagram { background: var(--card); border: 1px solid var(--ink); margin: 0 0 2.4rem; padding: 2.4rem 2.4rem 1.6rem; }
.diagram svg { display: block; height: auto; width: 100%; }
.diagram figcaption { border-top: 1px solid var(--line); color: var(--muted); font-family: var(--mono); font-size: 1.2rem; margin-top: 1.6rem; padding-top: 1.2rem; }
.svg-label { fill: var(--muted); font-family: var(--mono); font-size: 13px; }
.svg-label.hot { fill: var(--signal); font-weight: 600; }
.svg-label.ink { fill: var(--ink); }
.svg-sm .svg-label { font-size: 10px; }
.ch-dim { fill: none; stroke: var(--line-2); stroke-dasharray: 4 4; stroke-width: 1.2; }
.ch-hot { fill: rgba(229, 72, 31, .1); stroke: var(--signal); stroke-width: 2.2; }
.axis { stroke: var(--ink); stroke-width: 1.5; }
.grid-line { stroke: var(--line); stroke-width: 1; }
.lobe { fill: rgba(229, 72, 31, .12); stroke: var(--signal); stroke-width: 2; }
.ring-guide { fill: none; stroke: var(--line-2); stroke-dasharray: 3 4; stroke-width: 1; }
.ink-stroke { fill: none; stroke: var(--ink); stroke-width: 2; }
.ink-fill { fill: var(--ink); }
.fresnel { fill: rgba(33, 71, 201, .08); stroke: var(--trace); stroke-dasharray: 6 5; stroke-width: 1.6; }
.los { stroke: var(--signal); stroke-width: 2; }
.obstacle { fill: var(--paper-2); stroke: var(--ink); stroke-width: 1.5; }

/* ---------- Interactive tools (dark panels) ---------- */
.tool {
  background-color: var(--night);
  border: 1px solid var(--ink);
  box-shadow: 1.2rem 1.2rem 0 var(--signal);
  color: var(--night-text);
  margin: 0 0 2.4rem;
  padding: 3.2rem 3.2rem 1.6rem;
  position: relative;
}
.tool-head { align-items: baseline; border-bottom: 1px solid var(--night-edge); display: flex; flex-wrap: wrap; gap: 1rem 2rem; justify-content: space-between; margin-bottom: 2.8rem; padding-bottom: 1.6rem; }
.tool-head h3 { color: var(--paper); margin: 0; }
.tool-head span { color: var(--night-dim); font-family: var(--mono); font-size: 1.15rem; }
.tool label { color: rgba(243, 240, 232, .78); }
.tool input[type='number'], .tool input[type='text'], .tool select {
  background-color: var(--night-2);
  border-color: rgba(243, 240, 232, .22);
  color: var(--paper);
  font-family: var(--mono);
}
.tool input[type='number']:focus, .tool input[type='text']:focus, .tool select:focus { border-color: var(--signal); box-shadow: 0 0 0 3px rgba(229, 72, 31, .25); }
.tool select option { background: var(--night-2); color: var(--paper); }
.field-pair { display: flex; gap: 0; }
.field-pair input { flex: 1; min-width: 0; }
.field-pair select { flex: 0 0 9.6rem; border-left: 0; }
.tool .hint { color: var(--night-dim); display: block; font-family: var(--mono); font-size: 1.1rem; margin: -1rem 0 1.6rem; }
.presets { display: flex; flex-wrap: wrap; gap: .8rem; margin: 0 0 2rem; }
.tool-sub { color: var(--night-dim); font-family: var(--mono); font-size: 1.1rem; letter-spacing: .12em; margin: .4rem 0 1rem; text-transform: uppercase; }
.inputs-grid { display: grid; gap: 0 1.6rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.inputs-grid .field input { width: 100%; }
@media (max-width: 30rem) { .inputs-grid { grid-template-columns: 1fr; } }
.readout .verdict { margin: .2rem 0 .4rem; }
.readout .verdict-desc { margin: 0; }
.tool .chip {
  background: transparent;
  border: 1px solid rgba(243, 240, 232, .28);
  color: var(--paper);
  font-size: 1.1rem;
  height: 3.2rem;
  letter-spacing: .04em;
  line-height: 3rem;
  margin: 0;
  padding: 0 1.1rem;
  text-transform: none;
}
.tool .chip:hover, .tool .chip:focus, .tool .chip.active { background: var(--signal); border-color: var(--signal); color: #fff; }
.readouts { display: grid; gap: 1.2rem; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 1.6rem; }
.readout { border: 1px solid var(--night-edge); padding: 1.4rem 1.6rem; }
.readout .k { color: var(--night-dim); display: block; font-family: var(--mono); font-size: 1.05rem; letter-spacing: .12em; margin-bottom: .4rem; text-transform: uppercase; }
.readout .v { color: var(--paper); display: block; font-family: var(--mono); font-size: clamp(2.2rem, 2.6vw, 3rem); font-weight: 500; line-height: 1.2; white-space: nowrap; }
.readout.hot { background: rgba(229, 72, 31, .12); border-color: var(--signal); }
.readout.hot .v { color: var(--signal); }
.readout.wide { grid-column: 1 / -1; }
.verdict { color: var(--paper); font-size: 2.4rem; font-stretch: 125%; font-weight: 800; margin: 0 0 .6rem; }
.verdict-desc { font-size: 1.55rem; margin-bottom: 1.6rem; }
@media (max-width: 30rem) {
  .tool { box-shadow: .8rem .8rem 0 var(--signal); padding: 2.4rem 2rem 1.2rem; }
  .readouts { grid-template-columns: 1fr; }
}

/* RSSI meter */
.rssi-scale { color: var(--night-dim); display: flex; font-family: var(--mono); font-size: 1.1rem; justify-content: space-between; margin-bottom: 2.4rem; }
.wbars { align-items: flex-end; display: inline-flex; gap: .5rem; height: 4.4rem; margin-bottom: 1.6rem; }
.wbars span { background: rgba(243, 240, 232, .14); display: block; transition: background-color .25s; width: 1.1rem; }
.wbars span:nth-child(1) { height: 25%; }
.wbars span:nth-child(2) { height: 50%; }
.wbars span:nth-child(3) { height: 75%; }
.wbars span:nth-child(4) { height: 100%; }
.wbars span.lit { background: var(--signal); }

/* ---------- Callouts & lists ---------- */
.callout { background: var(--card); border: 1px solid var(--ink); border-left: 6px solid var(--signal); margin: 0 0 2.4rem; padding: 2.4rem 2.8rem; }
.callout h4 { margin-bottom: .8rem; }
.callout p:last-child { margin-bottom: 0; }
.checklist { list-style: none; margin: 0 0 2.5rem; }
.checklist li { margin: 0; padding: 1.1rem 0 1.1rem 3.6rem; position: relative; border-bottom: 1px solid var(--line); }
.checklist li::before {
  border: 1.5px solid var(--ink);
  content: '';
  height: 1.6rem;
  left: 0;
  position: absolute;
  top: 1.65rem;
  width: 1.6rem;
}
.checklist li::after {
  border-bottom: 2px solid var(--signal);
  border-right: 2px solid var(--signal);
  content: '';
  height: 1rem;
  left: .55rem;
  position: absolute;
  top: 1.8rem;
  transform: rotate(45deg);
  width: .5rem;
}
.on-dark .checklist li { border-bottom-color: var(--night-edge); }
.on-dark .checklist li::before { border-color: var(--paper); }

/* ---------- Glossary ---------- */
.gloss-tools {
  background: rgba(243, 240, 232, .96);
  border-bottom: 1px solid var(--ink);
  margin-bottom: 4rem;
  padding: 2rem 0 1.6rem;
  position: sticky;
  top: var(--header-h);
  z-index: 20;
}
.gloss-search { align-items: flex-end; display: flex; flex-wrap: wrap; gap: 1.2rem 2.4rem; }
.gloss-search .field { flex: 1 1 32rem; }
.gloss-search input { margin-bottom: 0; }
.gloss-count { color: var(--muted); font-family: var(--mono); font-size: 1.25rem; margin: 0 0 1.2rem; }
.az { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: 1.4rem; }
.az a, .az span {
  border: 1px solid var(--ink);
  color: var(--ink);
  display: inline-flex;
  font-family: var(--mono);
  font-size: 1.25rem;
  font-weight: 600;
  height: 3rem;
  justify-content: center;
  line-height: 2.8rem;
  width: 3rem;
}
.az a:hover, .az a:focus { background: var(--signal); border-color: var(--signal); color: #fff; }
.az span { border-color: var(--line); color: var(--line-2); }
.gloss-group { display: grid; gap: 0 3.2rem; grid-template-columns: 8rem 1fr; margin-bottom: 4rem; scroll-margin-top: 26rem; }
.gloss-group[hidden] { display: none; }
.gloss-letter { color: var(--signal); font-size: 6rem; line-height: .9; margin: 0; position: sticky; top: 26rem; align-self: start; }
.gloss-group .defs { margin: 0; }
.gloss-item[hidden] { display: none; }
.gloss-group .def { grid-template-columns: 24rem 1fr; }
.gloss-empty { border: 1px dashed var(--line-2); font-family: var(--mono); padding: 3.2rem; text-align: center; }
@media (max-width: 37.5rem) {
  .gloss-group { grid-template-columns: 1fr; }
  .gloss-letter { font-size: 4.4rem; margin-bottom: 1.2rem; position: static; }
  .gloss-group .def { grid-template-columns: 1fr; }
  .gloss-tools { position: static; }
}

/* ---------- Article ---------- */
.article { margin: 0 auto; max-width: 78rem; }
.article h1 { font-size: clamp(3.6rem, 5.2vw, 6rem); letter-spacing: -.03em; margin-bottom: 3.6rem; }
.article .post-img { aspect-ratio: 2 / 1; border: 1px solid var(--ink); box-shadow: 1.2rem 1.2rem 0 var(--signal); margin: 0 0 5.6rem; object-fit: cover; width: 100%; }
.article p { color: var(--ink-2); font-size: 1.9rem; line-height: 1.78; margin-bottom: 2.6rem; }
.article .body-1 > p:first-child::first-letter {
  color: var(--signal);
  float: left;
  font-size: 7.2rem;
  font-stretch: 125%;
  font-weight: 800;
  line-height: .82;
  margin: .6rem 1.2rem 0 0;
}
.article h2 { border-top: 2px solid var(--ink); font-size: clamp(2.8rem, 3.6vw, 3.8rem); margin: 5.6rem 0 2.8rem; padding-top: 2.8rem; }
.article-foot { align-items: center; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 1.6rem 3.2rem; justify-content: space-between; margin-top: 5.6rem; padding-top: 2.8rem; }
.article-foot .byline { color: var(--muted); font-family: var(--mono); font-size: 1.25rem; }
.article-foot .button { margin: 0; }

/* ---------- Contact ---------- */
.contact-form { background: var(--card); border: 1px solid var(--ink); box-shadow: 1.2rem 1.2rem 0 var(--ink); padding: 3.6rem 3.2rem 3.2rem; }
.contact-form button[type='submit'] { margin: .6rem 0 0; min-width: 16rem; }
.contact-form h2 { font-size: clamp(2.6rem, 3vw, 3.2rem); margin-bottom: 2.8rem; }
.info-block .defs { border-top-width: 1px; }
.info-block .def { gap: .2rem 1.6rem; grid-template-columns: 9rem minmax(0, 1fr); padding: 1.4rem 0; }
.info-block .def dt {
  color: var(--muted);
  font-family: var(--mono);
  font-size: 1.15rem;
  font-stretch: 100%;
  font-weight: 600;
  letter-spacing: .12em;
  padding-top: .35rem;
  text-transform: uppercase;
}
.info-block .def dd { overflow-wrap: anywhere; }
.hours { margin-bottom: 2rem; width: 100%; }
.hours tr.today td:first-child::after { color: var(--signal); content: ' \2190 today'; font-family: var(--mono); font-size: 1.1rem; white-space: nowrap; }
@media (max-width: 30rem) { .contact-form { box-shadow: .8rem .8rem 0 var(--ink); padding: 2.4rem 2rem; } }
.map { border: 1px solid var(--ink); margin: 0 0 2.4rem; position: relative; }
.map img { aspect-ratio: 16 / 10; filter: grayscale(1) contrast(1.1) brightness(.95); object-fit: cover; width: 100%; }
.map .pin {
  background: var(--signal);
  border: 3px solid #fff;
  border-radius: 50% 50% 50% 0;
  box-shadow: 0 6px 14px rgba(0, 0, 0, .35);
  height: 3.2rem;
  left: 50%;
  position: absolute;
  top: 44%;
  transform: translate(-50%, -100%) rotate(-45deg);
  width: 3.2rem;
}
.map .pin::after { background: #fff; border-radius: 50%; content: ''; height: .9rem; left: 50%; position: absolute; top: 50%; transform: translate(-50%, -50%); width: .9rem; }
.map figcaption { background: var(--ink); color: var(--paper); font-family: var(--mono); font-size: 1.15rem; left: 0; padding: .5rem 1rem; position: absolute; top: 0; }
.info-block { margin-bottom: 3.6rem; }
.info-block h3 { margin-bottom: 1.2rem; }
.info-block address { font-style: normal; line-height: 1.7; margin-bottom: 1.6rem; }
.hours td, .hours th { font-size: 1.5rem; }
.hours td:first-child { white-space: nowrap; }
.hours tr.today td { color: var(--signal); font-weight: 600; }
.socials { display: flex; flex-wrap: wrap; gap: .8rem; list-style: none; margin: 0; }
.socials li { margin: 0; }
.socials a { border: 1px solid var(--ink); color: var(--ink); display: inline-block; font-family: var(--mono); font-size: 1.25rem; padding: .5rem 1.2rem; text-decoration: none; }
.socials a:hover, .socials a:focus { background: var(--ink); color: var(--paper); }

.faq details { border-bottom: 1px solid var(--line); }
.faq details:first-of-type { border-top: 2px solid var(--ink); }
.faq summary {
  color: var(--ink);
  cursor: pointer;
  font-size: 1.9rem;
  font-stretch: 112%;
  font-weight: 700;
  list-style: none;
  padding: 2rem 4rem 2rem 0;
  position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  color: var(--signal);
  content: '+';
  font-family: var(--mono);
  font-size: 2.4rem;
  font-weight: 500;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  transition: transform .2s;
}
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq details p { margin: 0; max-width: 72rem; padding: 0 0 2.2rem; }

/* ---------- Footer ---------- */
.site-footer { padding: 7.2rem 0 0; }
.brand-footer { color: var(--paper); margin-bottom: 2rem; }
.brand-footer:hover, .brand-footer:focus { color: var(--paper); }
.site-footer .brand-text small { color: var(--night-dim); }
.foot-blurb { color: var(--night-text); font-size: 1.55rem; max-width: 38rem; }
.foot-h { color: var(--night-dim) !important; font-family: var(--mono); font-size: 1.15rem; font-stretch: 100%; font-weight: 600; letter-spacing: .14em; margin-bottom: 1.6rem; text-transform: uppercase; }
.foot-links { columns: 2; column-gap: 2.4rem; list-style: none; margin: 0 0 3.2rem; }
.foot-links li { break-inside: avoid; margin: 0 0 .8rem; position: relative; }
.foot-links a { color: var(--paper); font-size: 1.5rem; text-decoration: none; }
.foot-links a::before { color: var(--signal); content: '\2192'; font-family: var(--mono); left: -1.8rem; opacity: 0; position: absolute; transition: opacity .2s; }
.foot-links a:hover::before { opacity: 1; }
.foot-bar {
  border-top: 1px solid var(--night-edge);
  color: var(--night-dim);
  display: flex;
  flex-wrap: wrap;
  font-family: var(--mono);
  font-size: 1.2rem;
  gap: 1rem 3rem;
  justify-content: space-between;
  margin-top: 2.4rem;
  padding: 2.4rem 0 3.2rem;
}
.foot-bar b { color: var(--signal); font-weight: 600; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .001ms !important;
  }
  .js .reveal { opacity: 1; transform: none; }
}