/* ==========================================================================
   BASE — design tokens, reset, page furniture
   Loaded first. Everything here is shared by all three views.
   ========================================================================== */

:root{
  --paper:#E9ECF0; --card:#FFFFFF; --ink:#0E1216; --ink-soft:#59616C;
  --rule:#C6CCD4; --steel:#8D96A2;

  /* Repainted per brand by the router; reset to ink on the picker view. */
  --accent:#0E1216;

  --row-h:64px; --wrap:1120px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);
  font-family:"IBM Plex Sans",system-ui,sans-serif;font-size:16px;line-height:1.55;
  -webkit-font-smoothing:antialiased}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.display{font-family:"Archivo",system-ui,sans-serif;
  font-variation-settings:"wdth" 118,"wght" 900;
  text-transform:uppercase;line-height:.9;letter-spacing:-.01em}
.eyebrow{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-soft)}

/* kerbstone band — the circuit-kerb motif, recoloured per brand */
.kerb{height:22px;width:100%;
  background:repeating-linear-gradient(115deg,var(--accent) 0 26px,#FFFFFF 26px 52px);
  transition:background .4s}

header{background:var(--card);border-bottom:1px solid var(--rule)}
.head-inner{padding:44px 24px 38px;max-width:var(--wrap);margin:0 auto}
h1{font-size:clamp(46px,10vw,110px)}
h1 em{font-style:normal;color:var(--accent);transition:color .4s}
.lede{max-width:58ch;margin-top:20px;font-size:17px;color:var(--ink-soft)}
.lede strong{color:var(--ink);font-weight:600}

/* ---- logo ---- */
.masthead{margin-bottom:22px}
.mark{width:42px;height:42px;display:block;color:var(--ink)}
.home{display:inline-flex;align-items:center;gap:11px;background:none;border:0;padding:0;
  cursor:pointer;color:var(--ink)}
.home .mark{width:28px;height:28px}
.home .wordmark{font-family:"Archivo",sans-serif;font-variation-settings:"wdth" 112,"wght" 900;
  text-transform:uppercase;font-size:18px;letter-spacing:-.01em;line-height:1}
.home:hover .wordmark{text-decoration:underline;text-underline-offset:3px}
.home:focus-visible{outline:2px solid var(--accent);outline-offset:4px}

.back{display:inline-flex;align-items:center;gap:8px;margin-bottom:18px;
  font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-soft);text-decoration:none;
  border:1px solid var(--rule);padding:8px 13px;background:transparent;cursor:pointer}
.back:hover{border-color:var(--ink);color:var(--ink)}
.back:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

section{padding:64px 0}
.sec-head{margin-bottom:24px}
h2{font-size:clamp(26px,4.6vw,40px);margin-top:6px}
.sec-note{margin-top:10px;color:var(--ink-soft);font-size:15px;max-width:62ch}

/* ---- notes / footer ---- */
.notes{background:var(--ink);color:#C8CDD5;padding:50px 0 56px}
.notes h2{color:#fff}
.notes .grid{display:grid;gap:24px;margin-top:24px}
@media(min-width:760px){.notes .grid{grid-template-columns:1fr 1fr}}
.notes h4{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:#fff;margin-bottom:8px;
  border-left:3px solid var(--accent);padding-left:9px;transition:border-color .4s}
.notes p{font-size:14px;line-height:1.65}
footer{padding:24px 0;font-size:12px;color:var(--ink-soft);
  font-family:"IBM Plex Mono",monospace}

.hidden{display:none}