/* Site styles. Tokens (colors, type, spacing) are at the top; sections follow page order. */

/* Layout: the intro map plays on a fixed SVG stage; when it ends, the camera sits on a 3-track rail
   pinned near the left edge and the page becomes a scrolling home: transit-button nav on top,
   a hero to the right of the rail, then one "station" per project as you scroll down.
   Palette: Vignelli/Unimark-era NYC line colors on matte black. Type: Helvetica first,
   Archivo as the web fallback (closest grotesque on Google Fonts). */
:root {
  --bg: #111111;
  --fg: #f4f4f2;
  --muted: #8c8c8c;
  --bar: #0f0f0f;
  --Y: #FCCC0A; --B: #0039A6; --R: #EE352E; --G: #00933C; --O: #FF6319; --P: #B933AD;
  --BR: #996633; --GR: #A7A9AC;
  --sans: "Helvetica Neue", Helvetica, "Archivo", Arial, sans-serif;
  --content-left: max(120px, 16vw);
  --gutter: clamp(24px, 4vw, 64px);   /* right-hand margin, same on every section */
  --measure: 1180px;                   /* widest the content gets */
  --pad-r: max(var(--gutter), 100% - var(--content-left) - var(--measure));   /* where content starts, just right of the rail */
  --body: #d6d6d2; --dim: #3e3e3b; --slot: #4a4a48; --barline: #262626;
  --grain-under: .035; --grain-over: .32; --grain-blend: overlay; --grain-filter: none;
  color-scheme: dark;
  --tex-grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 1.6 -.3'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
/* LIGHT MODE: the 1972 map's paper look. Same line colors; ink-dark type; the grain flips to dark
   specks so it still shows on a light ground. Follows the system setting unless the nav toggle picks one. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: #f3ecdc; --fg: #17150f; --muted: #6b6457; --bar: #eae2cf;
    --body: #36322a; --dim: #cfc5b0; --slot: #c2b8a2; --barline: #dbd1bc;
    --grain-under: .025; --grain-over: .06; --grain-blend: multiply; --grain-filter: invert(1);
    color-scheme: light;
  }
}
:root[data-theme="light"] {
  --bg: #f3ecdc; --fg: #17150f; --muted: #6b6457; --bar: #eae2cf;
  --body: #36322a; --dim: #cfc5b0; --slot: #c2b8a2; --barline: #dbd1bc;
  --grain-under: .025; --grain-over: .06; --grain-blend: multiply; --grain-filter: invert(1);
  color-scheme: light;
}
html, body { height: 100%; background: var(--bg); color: var(--fg); }
body { margin: 0; font-family: var(--sans); overflow: hidden; }

#stage { position: fixed; inset: 0; z-index: 1; }
/* the frame: the whole page sits inside a rounded rectangle, like a button. The thick shadow paints everything outside it. */
:root { --fi: 10px; --fr: 28px; }
@media (max-width: 720px) { :root { --fi: 8px; --fr: 24px; } }
.frame {
  position: fixed; inset: var(--fi); z-index: 6; pointer-events: none;
  border-radius: var(--fr);
  box-shadow: 0 0 0 100vmax var(--bg);
}
:root:not(.framed) .frame { display: none; }
.framed .nav { top: var(--fi); left: var(--fi); right: var(--fi); border-radius: var(--fr) var(--fr) 0 0; }
#stage svg { width: 100%; height: 100%; display: block; }
.trail { fill: none; stroke-linecap: round; stroke-linejoin: round; }

/* film grain: a light layer on the wall, a stronger one over everything */
body::before, body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none;
  background-image: var(--tex-grain); background-size: 216px 216px;
}
body::before, body::after { filter: var(--grain-filter); }
body::before { z-index: 0; opacity: var(--grain-under); }
body::after  { z-index: 7; opacity: var(--grain-over); mix-blend-mode: var(--grain-blend); }

/* the scrolling page sits over the stage; it's locked until the intro finishes */
#page { position: fixed; inset: 0; z-index: 3; overflow-y: hidden; overflow-x: hidden; }

/* station-sign card: same matte as the wall, thin white band on top */
.sign {
  background: transparent;
  padding: 18px 26px 22px 0;
  border-top: 6px solid var(--fg);
  max-width: 100%;
}
.sign h1 { margin: 0; font-weight: 800; font-size: clamp(40px, 7.5vw, 104px); line-height: .95; letter-spacing: -0.02em; }
.sign p { margin: 10px 0 0; font-weight: 500; font-size: clamp(15px, 1.6vw, 20px); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.dots { display: inline-flex; gap: 5px; }
.dots i { width: 12px; height: 12px; border-radius: 50%; display: block; }
#mapSign {
  position: fixed; z-index: 4;
  left: max(16px, env(safe-area-inset-left, 0px));
  bottom: calc(84px + env(safe-area-inset-bottom, 0px));
  padding-left: 0;
}

/* ---------- transit nav ---------- */
.nav {
  position: fixed; z-index: 5; top: 0; left: 0; right: 0;
  padding: calc(14px + env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) 34px max(16px, env(safe-area-inset-left, 0px));
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: nowrap;   /* name pinned top-left, routes top-right */
  background: linear-gradient(var(--bg) calc(100% - 30px), transparent);   /* solid behind the whole buttons, fading out below them */
}
.nav .brand { font-weight: 800; font-size: 17px; letter-spacing: -0.01em; border-top: 3px solid var(--fg); padding-top: 6px; color: var(--fg); text-decoration: none; }
.nav .brand { flex: none; align-self: flex-start; margin-top: -2px; }   /* sits higher than the route buttons, tucked into the corner */
.nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; min-width: 0; }
.route {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 16px 5px 5px; border-radius: 999px;
  border: 2.5px solid var(--fg); color: var(--fg); background: transparent;
  font: 700 15px/1 var(--sans); text-decoration: none; cursor: pointer;
  transition: background .2s, color .2s;
}
.route .bullet { width: 28px; height: 28px; font-size: 12.5px; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.route:hover, .route[aria-current="page"] { background: var(--fg); color: var(--bg); }
.route:focus-visible { outline: 3px solid var(--Y); outline-offset: 3px; }

/* MTA-style route bullet: a colored circle with one letter */
.bullet {
  width: 40px; height: 40px; border-radius: 50%; flex: none;
  display: grid; place-items: center; padding-top: 2px;
  background: var(--c, var(--Y)); color: #fff;
  font: 800 21px/1 var(--sans);
}
.bullet.dark-text { color: #111; }

/* ---------- hero (first screen) ---------- */
.hero {
  height: 100vh; height: 100dvh; box-sizing: border-box;
  padding-left: var(--content-left); padding-right: var(--pad-r);
  display: grid; align-content: center; gap: 22px; justify-items: start;
}
.home-line { margin: 0; font-size: clamp(18px, 2.2vw, 28px); font-weight: 700; letter-spacing: -0.01em; max-width: 32ch; text-wrap: balance; }
.scroll-cue { margin: 0; display: flex; align-items: center; gap: 12px; font-size: 17px; font-weight: 800; color: var(--fg); }
/* MTA-style direction sign: blue disc, chunky white arrow. The arrow slides down out of the disc
   and drops back in from the top, on a loop, like it's pointing you onto the line. */
.scroll-cue .arrow {
  width: 48px; height: 48px; border-radius: 50%; background: var(--B); flex: none;
  display: grid; place-items: center; overflow: hidden;
}
.scroll-cue .arrow svg { width: 26px; height: 30px; }
/* the arrow only drops while you hover the cue; clicking it rides down to the first station */
.scroll-cue { cursor: pointer; }
@media (prefers-reduced-motion: no-preference) { .scroll-cue:hover .arrow svg { animation: drop 1.8s cubic-bezier(.6,0,.3,1) infinite; } }
@keyframes drop { 0% { transform: translateY(-150%); } 35%, 65% { transform: translateY(0); } 100% { transform: translateY(150%); } }
/* logo / icon slot next to each station name: drop an <img> inside to replace the placeholder */
.logo-slot {
  width: 52px; height: 52px; border-radius: 12px; flex: none; overflow: hidden;
  border: 2px dashed var(--slot); display: grid; place-items: center;
  font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
}
.logo-slot img { width: 100%; height: 100%; object-fit: contain; }
.logo-slot:has(img) { border: 0; background: var(--fg); }
@keyframes bob { 50% { transform: translateY(5px); } }

/* ---------- project stops ---------- */
.stop {
  min-height: 88vh; box-sizing: border-box;
  padding-left: var(--content-left); padding-right: var(--pad-r);
  display: grid; align-content: start; gap: 22px;
}
.stop-head { display: flex; align-items: center; gap: 10px; height: 52px; }
/* station-name pill, like the platform signs: outlined until the pearl arrives, then filled */
/* client logo beside the station name, recolored to the text color (white on dark, ink on cream) */
.stop-logo { height: 30px; width: auto; margin-left: 8px; filter: brightness(0) invert(1); opacity: .55; transition: opacity .3s; }
:root[data-theme="light"] .stop-logo { filter: brightness(0); }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .stop-logo { filter: brightness(0); } }
.stop.active .stop-logo { opacity: 1; }
/* logo sits on its own line under the roundel + station name (an invisible full-width break pushes it down) */
.stop-head { flex-wrap: wrap; height: auto; min-height: 52px; row-gap: 0; }
.stop-head::after { content: ""; flex-basis: 100%; height: 0; order: 1; }
.stop-head .stop-logo { order: 2; margin: 14px 0 0; display: block; }
/* footer copies inside Play, About and case pages: full-bleed, content lined up with the page column */
.site-foot--view { margin: 96px calc(-1 * max(16px, env(safe-area-inset-right, 0px))) -120px calc(-1 * max(16px, env(safe-area-inset-left, 0px)));
  padding-left: max(24px, calc((100vw - 1180px) / 2)); padding-right: max(24px, calc((100vw - 1180px) / 2)); }
@media (max-width: 480px) { .stop-logo { height: 22px; } .stop-head .stop-logo { margin-top: 12px; } }
/* posters ("Ads" in the review bar) are off by default; pick Platform poster or Car card to bring them back */
html[data-ad="none"] .poster { display: none; }
@media (min-width: 1000px) { html[data-ad="none"] .stop { grid-template-columns: minmax(0, 1fr); } }

/* THE arrow (from the design system): 100-unit box, 16-unit stroke, square ends, sharp mitered 90° tip.
   Every arrow on the site is this one drawing, turned in 45° steps with --rot and colored by currentColor. */
:root { --jc-arrow: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%20100%20100%27%3E%3Cpath%20d%3D%27M6%2050H82M50%2018l32%2032-32%2032%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%2716%27%20stroke-linejoin%3D%27miter%27/%3E%3C/svg%3E"); }
.jc-arrow { display: inline-block; width: .9em; height: .9em; flex: none; vertical-align: -0.1em; background: currentColor;
  -webkit-mask: var(--jc-arrow) center / contain no-repeat; mask: var(--jc-arrow) center / contain no-repeat; transform: rotate(var(--rot, 0deg)); }
.pill {
  display: inline-flex; align-items: center; height: 52px; padding: 0 24px; border-radius: 999px;
  border: 3px solid var(--fg); font: 800 clamp(20px, 2.6vw, 30px)/1 var(--sans); letter-spacing: -0.01em;
  transition: background .3s, color .3s, border-color .3s;
}
.stop.active .pill { background: var(--c); border-color: var(--c); color: var(--on, #fff); }
.stop-body { display: grid; gap: 14px; max-width: 84ch; min-width: 0; opacity: .7; transition: opacity .4s; }
.stop.active .stop-body { opacity: 1; }
.meta { margin: 0; font-size: 14px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.stop h2 { margin: 0; font-size: clamp(24px, 3.4vw, 44px); line-height: 1.05; letter-spacing: -0.02em; text-wrap: balance; }
.stop p.desc { margin: 0; font-size: 17px; line-height: 1.5; color: var(--body); }
/* scroll-reveal: each word starts dim and lights up as the description rides up toward the pearl */
.desc .w { color: var(--dim); transition: color .3s ease; }
.desc .w.on { color: var(--body); }
.cta {
  justify-self: start; display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 18px; border-radius: 999px; background: var(--fg); color: var(--bg);
  font: 700 15px/1 var(--sans); text-decoration: none;
}
.cta:focus-visible { outline: 3px solid var(--c); outline-offset: 3px; }
/* hover: the button fills with the station's line color and the arrow nudges forward, so it reads as clickable */
.cta { cursor: pointer; transition: background .25s var(--ease, ease), color .25s var(--ease, ease), box-shadow .25s var(--ease, ease), transform .25s var(--ease, ease); }
.stop .cta::after { content: ""; width: .9em; height: .9em; background: currentColor; -webkit-mask: var(--jc-arrow) center / contain no-repeat; mask: var(--jc-arrow) center / contain no-repeat; display: inline-block; transition: transform .25s var(--ease, ease); }
.stop .cta:hover { background: var(--c); color: var(--on, #fff); }
.footer .cta:hover { background: var(--G); color: #fff; }
.cta.ghost:hover { background: var(--fg); color: var(--bg); box-shadow: inset 0 0 0 2.5px var(--fg); }
@media (prefers-reduced-motion: no-preference) {
  .cta:hover { transform: translateY(-2px); }
  .stop .cta:hover::after { transform: translateX(4px); }
}
/* a case study that isn't ready yet: no arrow, no hover, so it doesn't promise a click */
.stop .cta[aria-disabled="true"] { background: transparent; color: var(--muted); box-shadow: inset 0 0 0 2px var(--slot); cursor: default; transform: none; }
.stop .cta[aria-disabled="true"]::after { content: none; }

/* ---------- case-study posters: the lit ad panels you pass on the way into the subway ----------
   A steel frame, a station-sign band on top (black with the thin white rule), the art, and fine print.
   To use a real image, put <img src="..." alt="..."> inside .poster-art; it covers the placeholder. */
.stop { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1000px) {
  /* every stop uses the same two columns: text on a fixed measure, the ad top-aligned with the first line of text */
  .stop { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: clamp(32px, 4vw, 64px); align-items: start; }
  .stop-head { grid-column: 1; grid-row: 1; }
  .stop-body { grid-column: 1; grid-row: 2; }
  .poster { grid-column: 2; grid-row: 1 / span 2; align-self: start; justify-self: end; max-width: 560px; }   /* top of the ad = top of the station name */
}
.poster {
  display: grid; text-decoration: none; color: #fff; max-width: 340px; width: 100%;
  background: #1d1d1c; padding: 10px; border-radius: 10px;
  box-shadow: inset 0 0 0 1px #3a3a38, 0 18px 40px -24px rgba(0,0,0,.6);
  opacity: .7; transition: opacity .4s, transform .35s cubic-bezier(.2,.8,.2,1);
}
.stop.active .poster { opacity: 1; }
.poster-sign { display: flex; align-items: center; gap: 10px; background: #111; padding: 12px 12px 11px; border-top: 3px solid #fff; border-radius: 3px 3px 0 0; }
.poster-sign .bullet { width: 30px; height: 30px; font-size: 15px; background: var(--c); }
.poster-sign b { flex: 1; font-size: 17px; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ps-go { font-weight: 700; font-size: 13px; color: #c9c9c4; white-space: nowrap; }
.ps-go span { display: inline-block; transition: transform .25s; }
.poster-art { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--c); color: var(--on, #fff); display: block; }
.poster-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 2; }
.poster-tag { position: absolute; left: 16px; top: 14px; right: 16px; z-index: 1; font-weight: 800; font-size: clamp(22px, 2vw, 28px); line-height: 1; letter-spacing: -0.03em; }
.poster-letter { position: absolute; right: -4%; bottom: -30%; font-weight: 800; font-size: 220px; line-height: 1; letter-spacing: -0.06em; opacity: .16; }
.poster-ph { position: absolute; left: 18px; bottom: 16px; z-index: 1; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  padding: 6px 10px; border-radius: 999px; border: 1.5px dashed currentColor; opacity: .8; }
.poster-foot { display: flex; justify-content: space-between; gap: 12px; padding: 9px 4px 2px; font-size: 12px; font-weight: 700; color: #a9a9a4; letter-spacing: .02em; }
.poster:focus-visible { outline: 3px solid var(--c); outline-offset: 4px; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .poster:hover { transform: translateY(-4px); opacity: 1; }
  .poster:hover .ps-go span { transform: translateX(4px); }
}
@media (max-width: 999px) { .poster { max-width: 340px; } }
@media (max-width: 480px) { .ps-go .t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .poster-sign b { font-size: 15px; } }

/* ---------- ad style option: car cards, the long ads above the windows inside a subway car ---------- */
@media (min-width: 1000px) {   /* car cards sit to the right of the case study, in a wider column than the posters */
  html[data-ad="car"] .poster { margin-top: 0; }
}
html[data-ad="car"] .poster { max-width: 560px; margin-top: 0; padding: 14px 10px 8px; border-radius: 26px 26px 8px 8px;
  background: linear-gradient(#d7d7d2, #bdbdb7); color: #111; box-shadow: inset 0 2px 0 #f2f2ee, inset 0 -2px 0 #9a9a95, 0 14px 30px -20px rgba(0,0,0,.6); }
html[data-ad="car"] .poster::before { content: ""; display: block; height: 6px; margin: -6px 22px 8px; border-radius: 3px; background: #fffbe8; box-shadow: 0 0 14px 2px rgba(255,248,214,.7); }  /* the ceiling light strip */
html[data-ad="car"] .poster-sign { display: none; }
html[data-ad="car"] .poster-art { aspect-ratio: auto; height: clamp(120px, 11vw, 150px); border-radius: 4px; display: grid; grid-template-columns: 1fr minmax(120px, 34%); }
html[data-ad="car"] .poster-tag { position: static; align-self: center; padding: 0 18px; font-size: clamp(22px, 2.4vw, 32px); }
html[data-ad="car"] .poster-letter { font-size: 260px; right: 30%; bottom: -60%; }
html[data-ad="car"] .poster-ph { position: relative; left: auto; bottom: auto; margin: 10px; border-radius: 4px; display: grid; place-items: center; text-align: center;
  background: rgba(0,0,0,.18); border: 1.5px dashed currentColor; }
html[data-ad="car"] .poster-foot { color: #3d3d3a; padding: 7px 8px 0; }
html[data-ad="car"] .poster-foot::after { content: "Case study"; font-weight: 800; color: #111; order: 3; }
html[data-ad="car"] .poster-foot span:last-child { order: 2; margin-left: auto; margin-right: 12px; }
@media (max-width: 600px) {
  html[data-ad="car"] .poster-art { height: auto; grid-template-columns: 1fr; }
  html[data-ad="car"] .poster-tag { padding: 14px 14px 0; font-size: 22px; }
  html[data-ad="car"] .poster-ph { min-height: 80px; }
  html[data-ad="car"] .poster-foot > span:first-child { display: none; }
}
/* ---------- how I work: a legible double diamond, then what I make and what people say ---------- */
.how { box-sizing: border-box; padding: 14vh max(16px, env(safe-area-inset-right, 0px)) 6vh var(--content-left); display: grid; gap: 24px; max-width: calc(var(--content-left) + 920px); }
.how h2 { margin: 0; font-size: clamp(28px, 4vw, 52px); line-height: 1.02; letter-spacing: -0.025em; text-wrap: balance; max-width: 18ch; }
.dd { width: 100%; max-width: 640px; height: auto; color: var(--muted); overflow: visible; }
.dd-shape { fill-opacity: .16; stroke-width: 3; }
.dd-mid { stroke: var(--muted); stroke-width: 1.5; stroke-dasharray: 4 5; }
.dd-l { fill: var(--fg); font: 800 17px var(--sans); text-anchor: middle; }
.dd-k { fill: var(--muted); font: 700 13px var(--sans); text-anchor: middle; letter-spacing: .06em; text-transform: uppercase; }
.dd-loop { fill: none; stroke: currentColor; stroke-width: 2; stroke-dasharray: 6 6; }
.phases { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.phases li { border-top: 5px solid var(--c); padding-top: 10px; font-size: 15px; line-height: 1.45; color: var(--body); }
.phases b { display: block; color: var(--fg); font-size: 17px; margin-bottom: 4px; }
.how-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 28px; margin-top: 12px; }
.makes { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.makes li { padding: 8px 14px; border-radius: 999px; box-shadow: inset 0 0 0 2px var(--fg); font-weight: 700; font-size: 14px; }
.quotes { display: grid; gap: 12px; margin-top: 10px; }
.quotes blockquote { margin: 0; padding: 14px 16px; border-left: 5px solid var(--P); background: color-mix(in srgb, var(--fg) 6%, transparent); border-radius: 0 8px 8px 0; }
.quotes p { margin: 0 0 6px; font-size: 17px; line-height: 1.4; }
.quotes footer { font-size: 13px; font-weight: 700; color: var(--muted); }
@media (max-width: 720px) { .how { padding-top: 10vh; } .dd-l { font-size: 24px; } .dd-k { font-size: 20px; letter-spacing: .02em; } }

/* the end of the line: contact, next to a forkful of tangled lines */
.footer {
  height: 100vh; height: 100dvh; box-sizing: border-box;
  padding: 30vh var(--pad-r) 0 var(--content-left);
}
.footer-copy { display: grid; gap: 16px; max-width: 30ch; justify-items: start; }
.footer h2 { margin: 0; font-size: clamp(34px, 5vw, 64px); line-height: .98; letter-spacing: -0.025em; text-wrap: balance; }
.footer .desc { margin: 0; font-size: 17px; line-height: 1.5; color: var(--body); }
.footer .row { display: flex; gap: 10px; flex-wrap: wrap; }
/* "ride back to": one roundel per project, ringed in its line color. Drop an <img> inside a roundel to swap the letter for the logo. */
.served { display: grid; gap: 10px; margin-top: 12px; }
.served ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 12px; flex-wrap: wrap; }
.roundel {
  width: 56px; height: 56px; box-sizing: border-box; border-radius: 50%; border: 5px solid var(--c);
  background: var(--bg); color: var(--fg); display: grid; place-items: center; overflow: hidden;
  font-weight: 800; font-size: 20px; text-decoration: none;
}
.roundel img { width: 70%; height: 70%; object-fit: contain; }
.roundel:focus-visible { outline: 3px solid var(--fg); outline-offset: 3px; }
@media (prefers-reduced-motion: no-preference) { .roundel { transition: transform .2s ease; } .roundel:hover { transform: scale(1.08); } }
.cta.ghost { background: transparent; color: var(--fg); box-shadow: inset 0 0 0 2.5px var(--fg); }
@media (max-width: 720px) { .footer { padding-top: 16vh; height: 123vh; } }


.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* hamburger (phones only) */
.menu-btn { display: none; place-content: center; gap: 5px; width: 46px; height: 46px; flex: none; border-radius: 50%; border: 2.5px solid var(--fg); background: var(--bg); cursor: pointer; padding: 0; }
.menu-btn span { display: block; width: 20px; height: 2.5px; border-radius: 2px; background: var(--fg); transition: transform .2s, opacity .2s; }
.nav.menu-open .menu-btn span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.nav.menu-open .menu-btn span:nth-child(2) { opacity: 0; }
.nav.menu-open .menu-btn span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }
.menu-btn:focus-visible, .theme-pill:focus-visible { outline: 3px solid var(--Y); outline-offset: 3px; }
/* light/dark: a pill pinned to the bottom center */
.theme-pill {
  position: fixed; z-index: 7; left: max(24px, env(safe-area-inset-left, 0px));
  bottom: calc(var(--barH, 0px) + 16px + env(safe-area-inset-bottom, 0px));
  display: inline-flex; align-items: center; gap: 8px; padding: 5px 16px 5px 5px; border-radius: 999px;
  border: 2.5px solid var(--fg); background: var(--bg); color: var(--fg); font: 700 15px/1 var(--sans); cursor: pointer;
  box-shadow: 0 10px 30px -14px rgba(0,0,0,.5);
}
.theme-pill .bullet { width: 28px; height: 28px; font-size: 15px; }
.theme-pill:hover { background: var(--fg); color: var(--bg); }

/* ---------- site footer: a station sign band across the bottom of the page ---------- */
.site-foot { position: relative; z-index: 2; background: #111; color: #fff; border-top: 5px solid #fff; box-shadow: 0 -1px 0 #333;
  padding: 48px var(--pad-r) calc(84px + var(--barH, 0px) + env(safe-area-inset-bottom, 0px)) var(--content-left); }   /* room for the theme pill */
.sf-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 32px clamp(40px, 6vw, 88px); align-items: start; }
@media (max-width: 900px) { .sf-grid { grid-template-columns: auto auto; } .sf-id { grid-column: 1 / -1; } }
@media (max-width: 560px) {
  .site-foot { padding-left: 24px; padding-right: max(24px, env(safe-area-inset-right, 0px)); }
  .sf-grid { grid-template-columns: 1fr; gap: 28px; }
}
.sf-brand { color: #fff; text-decoration: none; font-weight: 800; font-size: 26px; letter-spacing: -0.02em; }
.sf-id p { margin: 6px 0 0; color: #a9a9a4; font-size: 15px; }
.sf-id .sf-line { color: #fff; font-weight: 700; font-size: 17px; margin-top: 14px; max-width: 28ch; }
.sf-k { margin: 0 0 12px; display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #a9a9a4; }
.up { width: 16px; height: 16px; flex: none; }
.site-foot .served { margin: 0; gap: 0; }
.site-foot .roundel { --bg: #111; --fg: #fff; width: 52px; height: 52px; }
.sf-links ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.sf-links a { display: inline-flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; font-weight: 700; font-size: 16px; }
.sf-links a i { width: 26px; height: 26px; border-radius: 50%; background: var(--c); color: #fff; display: grid; place-items: center; font-style: normal; font-weight: 800; font-size: 11px; flex: none; }
.sf-links a:hover { text-decoration: underline; text-underline-offset: 4px; }
.sf-base { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 32px; padding-top: 16px; border-top: 1px solid #333; color: #a9a9a4; font-size: 14px; }
.sf-top { display: inline-flex; align-items: center; gap: 8px; color: #fff; text-decoration: none; font-weight: 700; padding: 8px 14px; border-radius: 999px; box-shadow: inset 0 0 0 2px #fff; }
.sf-top:hover { background: #fff; color: #111; }
.site-foot a:focus-visible { outline: 3px solid var(--Y); outline-offset: 3px; }
/* Review controls (not part of the real site) */
.bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 8;
  padding: 10px max(16px, env(safe-area-inset-right, 0px)) calc(10px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
  background: var(--bar); border-top: 1px solid var(--barline); color: var(--fg);
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.bar button {
  font: 700 14px/1 var(--sans); color: var(--bg); background: var(--fg);
  border: 0; border-radius: 999px; padding: 10px 16px; cursor: pointer;
}
.bar button.ghost { background: transparent; color: var(--fg); box-shadow: inset 0 0 0 1.5px var(--fg); }
.bar button:focus-visible, .bar input:focus-visible { outline: 2px solid var(--Y); outline-offset: 2px; }
.bar label { font-size: 13px; color: var(--muted); display: flex; align-items: center; gap: 6px; }
#scrub { flex: 1 1 160px; min-width: 0; accent-color: var(--Y); }
.beat { font-size: 14px; font-weight: 700; min-width: 0; display: flex; align-items: center; gap: 8px; }
.beat .num { width: 24px; height: 24px; border-radius: 50%; background: var(--Y); color: #000; display: grid; place-items: center; font-size: 13px; flex: none; }
.time { font-variant-numeric: tabular-nums; color: var(--muted); font-size: 13px; width: 4.5ch; text-align: right; }

@media (prefers-reduced-motion: reduce) { .scroll-cue .arrow svg { animation: none; } }

/* PHONES: nav keeps just the route bullets (labels stay for screen readers), content starts
   closer to the rail, and station heads wrap so long names fit. */
.lbl { white-space: nowrap; }
@media (max-width: 720px) {
  :root { --content-left: 116px; }
  .nav { padding-left: 16px; gap: 10px; }
  .nav .brand { font-size: 15px; }
  .menu-btn { display: grid; }
  .nav ul { display: none; position: absolute; top: calc(100% - 22px); left: 12px; right: 12px; flex-direction: column; gap: 8px; padding: 12px;
    background: var(--bg); border-radius: 22px; box-shadow: inset 0 0 0 2.5px var(--fg), 0 20px 40px -20px rgba(0,0,0,.5); }
  .nav.menu-open ul { display: flex; }
  .nav ul .route { width: 100%; box-sizing: border-box; padding: 6px 16px 6px 6px; font-size: 18px; }
  .nav ul .route .bullet { width: 36px; height: 36px; font-size: 15px; }
  .stop-head { flex-wrap: wrap; height: auto; row-gap: 0; }
  .stop-head .bullet { width: 34px; height: 34px; font-size: 18px; }
  .pill { height: 44px; padding: 0 16px; font-size: 19px; border-width: 2.5px; }
  .logo-slot { width: 44px; height: 44px; }
  .stop p.desc { font-size: 16px; }
  .scroll-cue { font-size: 15px; }
}

/* ---------- About: off the clock (after NYC Music OS). Tracks bundle and bend; tap a letter at the end of a line
   and the screen floods with that line's color, with what's on it. ---------- */
.about {
  position: fixed; inset: 0; z-index: 4; background: var(--bg); overflow-y: auto; overflow-x: hidden; display: none;
  padding: calc(96px + env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) 120px max(16px, env(safe-area-inset-left, 0px));
}
.about.open { display: block; }
.about-in { max-width: 1180px; margin: 0 auto; display: grid; gap: 24px; position: relative; }
.about h2 { margin: 0; font-size: clamp(34px, 5.4vw, 68px); line-height: 1; letter-spacing: -0.025em; font-weight: 800; }
.about h2 .two, .flood h3 .two { display: block; color: var(--muted); }   /* two-tone: hierarchy from color, not size */
.about-back { display: inline-flex; align-items: center; gap: 10px; font: inherit; font-weight: 700; font-size: 15px; color: var(--fg);
  background: none; border: 2px solid var(--fg); border-radius: 999px; padding: 5px 16px 5px 5px; cursor: pointer; }
.about-back:hover { background: var(--fg); color: var(--bg); }
.arrow-dot { width: 30px; height: 30px; border-radius: 50%; border: 2px solid currentColor; display: grid; place-items: center; flex: none; font-weight: 800; }
/* kiosk: the About landing reads like a ticket-machine screen (after NYC Music OS):
   a giant two-tone title, big tappable route circles, a giant arrow over a heavy rule, then big black tiles */
.kiosk-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; color: var(--muted); font-weight: 600; font-size: 18px; }
.kiosk-h { margin: 0; font-size: clamp(84px, 15vw, 230px) !important; line-height: .86 !important; letter-spacing: -0.05em !important; font-weight: 800; }
.kiosk-dots { display: flex; flex-wrap: wrap; gap: clamp(8px, 1.2vw, 14px); margin-top: 8px; }
.kdot { width: clamp(84px, 11vw, 150px); aspect-ratio: 1; border-radius: 50%; border: 0; cursor: pointer; background: var(--c); color: var(--ink);
  font: 800 clamp(40px, 5.6vw, 78px)/1 var(--sans); display: grid; place-items: center; }
.kiosk-cue { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-top: clamp(28px, 5vw, 64px); }
.cue-t { margin: 0; font-weight: 800; font-size: clamp(26px, 3vw, 40px); line-height: 1; letter-spacing: -0.03em; }
.cue-t .two { display: block; color: var(--muted); }
.cue-arrow { width: clamp(90px, 16vw, 220px); height: auto; color: var(--fg); flex: none; }
.kiosk-rule { height: clamp(6px, .8vw, 10px); background: var(--fg); border-radius: 2px; }
.kiosk-tiles { display: grid; gap: 12px; }
.tile { display: grid; grid-template-columns: clamp(100px, 15vw, 220px) minmax(0, 1fr); gap: 10px; border: 0; padding: 0; background: none; cursor: pointer; text-align: left; font: inherit; }
.tile > span { background: var(--fg); color: var(--bg); border-radius: clamp(14px, 1.6vw, 22px); min-height: clamp(100px, 13vw, 190px); }
.tile-num { display: grid; place-items: center; }
.tile-num b { width: 82%; aspect-ratio: 1; border-radius: 50%; background: var(--bg); color: var(--fg); display: grid; place-items: center;
  font-size: clamp(36px, 6vw, 92px); letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.tile-word { display: grid; align-content: space-between; padding: clamp(12px, 1.6vw, 22px) clamp(14px, 2vw, 26px); overflow: hidden; }
.tile-word .w1 { font-weight: 800; font-size: clamp(52px, 8.5vw, 140px); line-height: .82; letter-spacing: -0.05em; white-space: nowrap; }
.tile-word .w2 { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: clamp(14px, 1.4vw, 18px); }
.tile-word .w2 i { width: 28px; height: 28px; border-radius: 50%; background: var(--c); color: var(--ink); font-style: normal; font-weight: 800; display: grid; place-items: center; font-size: 14px; }
.tile-word .w2 em { font-style: normal; opacity: .6; }
@media (prefers-reduced-motion: no-preference) {
  .kdot, .tile > span { transition: transform .25s cubic-bezier(.2,.8,.2,1); }
  .kdot:hover { transform: scale(1.06); }
  .tile:hover > span { transform: translateY(-3px); }
  .about.open .kdot { animation: popIn .45s cubic-bezier(.3,1.5,.5,1) both; }
  .about.open .tile { animation: cardUp .55s cubic-bezier(.2,.8,.2,1) both; }
}
@keyframes popIn { from { opacity: 0; transform: scale(.4); } }
.kdot:focus-visible, .tile:focus-visible, .about-back:focus-visible, .fl-close:focus-visible { outline: 4px solid var(--Y); outline-offset: 4px; }
@media (max-width: 600px) { .tile { grid-template-columns: 96px minmax(0, 1fr); } .kiosk-top { font-size: 15px; } .tile-word .w2 em { display: none; } }

/* ---------- About styles to compare (review bar: "About style") ----------
   Gallery: every line is the same station sign, so the page reads as one system.
   Splash: every line is a different piece of subway ephemera (MetroCard, arrow sign, exit sign, ticket). */
.kiosk-gallery, .kiosk-splash { display: none; }
.about[data-style="gallery"] .kiosk-tiles, .about[data-style="splash"] .kiosk-tiles { display: none; }
.about[data-style="gallery"] .kiosk-gallery { display: grid; }
.about[data-style="splash"] .kiosk-splash { display: grid; }
/* gallery: station signs */
.kiosk-gallery { grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr)); gap: 12px; }
.sg { all: unset; box-sizing: border-box; cursor: pointer; display: grid; gap: 10px; align-content: start; background: #111; color: #fff;
  border-radius: 14px; padding: 12px 16px 16px; min-height: 250px; position: relative; }
.sg::before { content: ""; height: 3px; background: #fff; border-radius: 2px; }
.sg-top { display: flex; justify-content: space-between; font-size: 13px; font-weight: 600; color: #bdbdb8; }
.sg-name { font-weight: 800; font-size: clamp(38px, 4vw, 52px); line-height: .95; letter-spacing: -0.03em; }
.sg-sub { font-weight: 600; font-size: 16px; color: #d9d9d4; margin-top: -4px; }
.sg-bul { display: flex; flex-wrap: wrap; gap: 5px; margin-top: auto; }
.sg-bul i { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-weight: 800; font-size: 17px; background: #808183; color: #fff; }
.sg-bul i.L { background: var(--c); color: var(--ink); }
.sg-foot { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; border-top: 1px solid #333; padding-top: 10px; }
.sg-foot b { font-size: 20px; }
/* splash: a bento of different subway objects */
.kiosk-splash { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 760px) { .kiosk-splash { grid-template-columns: repeat(2, minmax(0, 1fr)); } .kiosk-splash > * { grid-column: span 2 !important; } .kiosk-splash > .sp-half { grid-column: span 1 !important; } }
:where(.kiosk-splash button) { all: unset; box-sizing: border-box; cursor: pointer; position: relative; overflow: hidden; }
.sp-card { grid-column: span 4; background: #fff; color: #111; box-shadow: inset 0 0 0 1.5px #d6d6d0; border-radius: 18px; min-height: 280px; display: grid; grid-template-rows: auto 1fr auto; padding: 18px 22px 0; }
.sp-card .t { display: flex; justify-content: space-between; align-items: start; font-weight: 800; font-size: clamp(36px, 4.6vw, 64px); letter-spacing: -0.04em; line-height: 1; }
.sp-card .t small { font-size: 15px; letter-spacing: 0; width: 44px; height: 44px; border-radius: 50%; background: #111; color: #fff; display: grid; place-items: center; }
.sp-card svg { width: 100%; height: 100%; min-height: 110px; }
.sp-card .strip { margin: 0 -22px; background: #111; color: #fff; display: flex; justify-content: space-between; padding: 10px 22px; font-weight: 800; font-size: 14px; letter-spacing: .04em; }
.sp-arrow { grid-column: span 2; background: #111; border-radius: 18px; padding: 16px; display: grid; gap: 12px; min-height: 280px; }
.sp-arrow .disc { aspect-ratio: 1; width: 100%; max-width: 260px; justify-self: center; border-radius: 50%; background: var(--R); display: grid; place-items: center; }
.sp-arrow .disc svg { width: 52%; }
.sp-foot { display: flex; align-items: center; gap: 8px; color: #fff; font-size: 13px; border-top: 1px solid #333; padding-top: 10px; }
.sp-foot b { font-size: 18px; font-weight: 800; }
.sp-foot span { color: #a9a9a4; flex: 1; }
.sp-foot i { width: 24px; height: 24px; border-radius: 50%; border: 2px solid #fff; display: grid; place-items: center; font-style: normal; font-weight: 800; font-size: 12px; }
.sp-exit { grid-column: span 2; background: #111; border-radius: 18px; padding: 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; min-height: 250px; }
.sp-exit .ltr { aspect-ratio: 1; border-radius: 50%; background: #fff; color: #111; display: grid; place-items: center; font-weight: 800; font-size: clamp(44px, 5vw, 72px); }
.sp-exit .arw { aspect-ratio: 1; border-radius: 50%; background: var(--B); display: grid; place-items: center; }
.sp-exit .arw svg { width: 50%; }
.sp-exit .blk { grid-column: 1 / -1; background: var(--B); color: #fff; border-radius: 6px; font-weight: 800; font-size: clamp(40px, 4.6vw, 64px); letter-spacing: -0.04em; padding: 6px 14px 10px; line-height: 1; }
.sp-exit .sp-foot { grid-column: 1 / -1; }
.sp-ticket { grid-column: span 2; background: #f4f4f1; color: #111; border-radius: 12px; padding: 16px 18px 12px; display: flex; flex-direction: column; gap: 6px; min-height: 250px; box-shadow: inset 0 0 0 1.5px #d6d6d0; }
.sp-ticket .hd { display: flex; gap: 6px; }
.sp-ticket .hd i { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-weight: 800; font-size: 13px; color: #111; background: var(--O); }
.sp-ticket .hd i + i { background: var(--G); color: #fff; }
.sp-ticket b.big { font-size: clamp(30px, 3.4vw, 44px); letter-spacing: -0.03em; line-height: 1; }
.sp-ticket small { font-size: 12px; font-weight: 700; }
.sp-ticket .perf { margin: 8px -18px; border-top: 2px dashed #b9b9b3; position: relative; }
.sp-ticket .perf::before, .sp-ticket .perf::after { content: ""; position: absolute; top: -9px; width: 16px; height: 16px; border-radius: 50%; background: var(--bg); }
.sp-ticket .perf::before { left: -8px; } .sp-ticket .perf::after { right: -8px; }
.sp-ticket .way { display: flex; justify-content: space-between; font-weight: 800; font-size: 12px; letter-spacing: .04em; margin-top: auto; }
/* beyond the screen: values (arrow disc), civic tech (exit sign), learning (ticket), hobbies (a dot per hobby) */
.sp-civic .arw { background: var(--G); }
.sp-civic .blk { background: var(--G); font-size: clamp(30px, 3vw, 46px); }
.sp-learn .hd i:first-child { background: var(--B); color: #fff; }
.sp-learn .hd i + i { background: #111; color: #fff; }
.sp-hob { grid-column: span 2; background: #111; border-radius: 18px; padding: 16px; display: grid; grid-template-rows: 1fr auto; gap: 12px; min-height: 250px; }
.sp-hob .hob-dots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; align-content: center; }
.sp-hob .hob-dots i { aspect-ratio: 1; border-radius: 50%; background: var(--c); color: #111; display: grid; place-items: center; font-style: normal; font-weight: 800; font-size: clamp(22px, 2.4vw, 34px); }
.sp-hob .hob-dots i[style*="--P"], .sp-hob .hob-dots i[style*="--R"], .sp-hob .hob-dots i[style*="--G"] { color: #fff; }
.sp-hob .hob-dots .go { background: #fff; }
.sp-hob .hob-dots .go svg { width: 46%; }
:root[data-theme="dark"] .sp-hob { box-shadow: inset 0 0 0 1.5px #3a3a38; }
.sp-letters { grid-column: span 2; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; align-content: center; padding: 6px; }
.sp-letters i { aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-weight: 800; font-size: clamp(20px, 2.4vw, 32px); color: #fff; }
/* on the dark theme, give the black pieces an edge so they don't melt into the page */
:root[data-theme="dark"] :is(.sg, .sp-arrow, .sp-exit) { box-shadow: inset 0 0 0 1.5px #3a3a38; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) :is(.sg, .sp-arrow, .sp-exit) { box-shadow: inset 0 0 0 1.5px #3a3a38; } }
.sg:focus-visible, .kiosk-splash button:focus-visible { outline: 4px solid var(--Y); outline-offset: 4px; }
@media (prefers-reduced-motion: no-preference) {
  .sg, .kiosk-splash button { transition: transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .5s cubic-bezier(.2,.8,.2,1); }
  .sg:hover, .kiosk-splash button:hover { transform: translateY(-4px) rotate(-.4deg); }
  .about.open .sg, .about.open .kiosk-splash > * { animation: cardUp .55s cubic-bezier(.2,.8,.2,1) backwards; }
}

/* ---------- About: a gallery of different stop and station signs ---------- */
.signs { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 900px) { .signs { grid-template-columns: repeat(2, minmax(0, 1fr)); } .signs > .sn { grid-column: span 2 !important; grid-row: auto !important; } .signs > .sn-access { grid-column: span 1 !important; } .signs > .sn-exit { grid-column: span 1 !important; } }
.sn { border-radius: 16px; padding: 18px; display: grid; align-content: start; gap: 12px; scroll-margin-top: 110px; }
.sn h3 { margin: 0; font-size: clamp(28px, 3vw, 42px); line-height: 1; letter-spacing: -0.03em; font-weight: 800; }
.sn h3 .two { display: block; color: inherit; opacity: .55; }
.sn p { margin: 0; font-size: 16px; line-height: 1.45; }
/* bus stop flag */
.sn-stop { grid-column: span 2; grid-row: span 2; background: #fff; color: #111; box-shadow: inset 0 0 0 1.5px #d6d6d0; }
.stop-flag { display: flex; justify-content: space-between; align-items: center; background: var(--R); color: #fff; margin: -18px -18px 4px; padding: 12px 18px; border-radius: 16px 16px 0 0; }
.flag-band { font-weight: 800; letter-spacing: .14em; text-transform: uppercase; font-size: 14px; }
.flag-no { width: 40px; height: 40px; border-radius: 50%; background: #fff; color: #111; display: grid; place-items: center; font-weight: 800; }
.sn-lede { color: #555; }
.sn-stop { display: flex; flex-direction: column; }
.stop-foot { margin-top: auto !important; padding-top: 12px; border-top: 1px solid #ddd; font-weight: 700; font-size: 15px !important; }
.route-strip { list-style: none; margin: 8px 0 0; padding: 0; position: relative; }
.route-strip::before { content: ""; position: absolute; left: 11px; top: 14px; bottom: 14px; width: 8px; background: var(--R); border-radius: 4px; }
.route-strip li { position: relative; display: grid; grid-template-columns: 30px 1fr; column-gap: 12px; padding: 8px 0; }
.route-strip i { grid-row: span 2; width: 30px; height: 30px; border-radius: 50%; background: #fff; border: 5px solid #111; box-sizing: border-box; position: relative; z-index: 1; }
.route-strip b { font-size: 20px; }
.route-strip span { color: #555; font-size: 15px; }
/* station sign */
.sn-station { grid-column: span 4; background: #111; color: #fff; }
.sn-head, .bd-head { display: flex; justify-content: space-between; font-size: 13px; font-weight: 600; color: #bdbdb8; border-top: 3px solid #fff; padding-top: 8px; }
.sn-rows { list-style: none; margin: 0; padding: 0; display: grid; }
.sn-rows li { display: grid; grid-template-columns: 40px 1fr; gap: 14px; align-items: start; padding: 12px 0; border-top: 1px solid #333; }
.sn-rows i, .sn-board i, .tr-row i { width: 40px; height: 40px; border-radius: 50%; background: var(--c); color: var(--ink, #fff); display: grid; place-items: center; font-style: normal; font-weight: 800; font-size: 18px; }
.sn-rows b { display: block; font-size: 19px; margin-bottom: 2px; }
.sn-rows span { color: #c9c9c4; font-size: 15px; line-height: 1.4; }
/* accessibility wayfinding */
.sn-access { grid-column: span 2; background: var(--B); color: #fff; align-self: start; }
.acc-ico { width: 64px; height: 64px; border-radius: 12px; background: rgba(255,255,255,.14); display: grid; place-items: center; }
.acc-ico svg { width: 46px; }
.sn-access p { font-weight: 800; letter-spacing: .06em; }
.acc-checks { list-style: none; margin: 4px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.acc-checks li { background: rgba(255,255,255,.12); border-radius: 10px; padding: 12px; display: grid; gap: 2px; font-size: 14px; font-weight: 600; }
.acc-checks b { font-size: 24px; letter-spacing: -0.02em; }
.sn-access p.acc-foot { font-weight: 600; letter-spacing: 0; font-size: 15px; opacity: .9; }
/* transfer */
.sn-transfer { grid-column: span 2; background: #FCCC0A; color: #111; }
.tr-band { margin: -18px -18px 0; padding: 10px 18px; background: #111; color: #FCCC0A; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; font-size: 14px; border-radius: 16px 16px 0 0; }
.tr-row { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 26px; }
.sn-transfer h3 { font-size: clamp(24px, 2.4vw, 32px); }
/* process sign: full width, holding the double diamond (sign is always white, so pin its colors) */
.sn-process { grid-column: 1 / -1; grid-row: auto; --fg: #111; --muted: #5d5d58; --body: #333; }
.sn-process .dd { max-width: 720px; margin: 4px 0; }
.sn-process .phases li { color: #333; }
.dd-metro .dd-track { fill: none; stroke-width: 12; stroke-linejoin: round; }
.dd-metro .dd-back { fill: none; stroke: #a3a39e; stroke-width: 8; stroke-linecap: round; }
.dd-metro .dd-stn { fill: #fff; stroke: #111; stroke-width: 5; }
.dd-metro .dd-term { fill: #111; stroke: #fff; stroke-width: 4; }
.dd-metro .dd-xfer { fill: #111; stroke: #111; stroke-width: 5; }
.dd-metro .dd-s { fill: var(--muted); font: 700 13px var(--sans); text-anchor: middle; }
@media (max-width: 720px) { .dd-metro .dd-l { font-size: 22px; } .dd-metro .dd-s { font-size: 18px; } }
/* exit card: each way out is its own exit sign */
.sn-exit { gap: 10px; }
.exit-k { font-size: 14px !important; letter-spacing: .14em !important; text-transform: uppercase; color: #bdbdb8; border-top: 3px solid #fff; padding-top: 8px; }
.exit-sign { display: flex; gap: 10px; align-items: stretch; text-decoration: none; color: #fff; border-radius: 12px; }
.exit-sign .exit-arw { width: 64px; flex: none; border-radius: 10px; background: #fff; display: grid; place-items: center; transition: transform .2s ease; }
.exit-sign .exit-arw svg { width: 58%; }
.exit-sign .exit-blk { flex: 1; background: var(--R); border-radius: 10px; padding: 10px 16px; font-weight: 800; font-size: clamp(28px, 2.8vw, 38px); line-height: 1; letter-spacing: -0.03em; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.exit-sign small { font-size: 13px; font-weight: 700; letter-spacing: .04em; opacity: .9; text-align: right; }
.exit-sign:focus-visible { outline: 4px solid var(--Y); outline-offset: 4px; }
/* Contact uses its own line color (green, as in the nav and footer); Résumé stays the red exit */
#exitContact .exit-blk { background: var(--G); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) { .exit-sign:hover .exit-arw { transform: translate(3px, -3px); } }
/* the ride, zoomed in: a horizontal line that slides past a fixed pearl, one stop at a time.
   The stops on either side wait by the round arrows. */
.ride { display: grid; gap: 16px; margin-top: 8px; }
.ride-view { --ly: 112px; --lh: 22px; position: relative; height: 168px; overflow: hidden; border-radius: 12px; background: #f4f4f1; }
.ride-track { position: absolute; left: 0; top: 0; height: 100%; display: flex; will-change: transform; }
.ride-slot { position: relative; flex: none; height: 100%; }
.ride-slot::before, .ride-slot::after { content: ""; position: absolute; top: calc(var(--ly) - var(--lh) / 2); height: var(--lh); width: 50%; }
.ride-slot::before { left: 0; background: var(--in); } .ride-slot::after { right: 0; background: var(--out); }
.ride-pill { position: absolute; left: 50%; top: 22px; transform: translateX(-50%); white-space: nowrap; display: inline-flex; align-items: center; gap: 10px; height: 48px; padding: 0 20px; border-radius: 999px;
  border: 3px solid #111; background: #f4f4f1; color: #111; font: 800 clamp(20px, 2.4vw, 28px)/1 var(--sans); letter-spacing: -0.01em; cursor: pointer; transition: background .35s, color .35s, border-color .35s, opacity .35s; opacity: .55; }
.ride-pill i { font-style: normal; font-size: 13px; letter-spacing: .08em; opacity: .7; }
.ride-slot.on .ride-pill { background: var(--c); border-color: var(--c); color: var(--ink); opacity: 1; cursor: default; }
.ride-slot.far .ride-pill { opacity: 0; }
.ride-tick { position: absolute; left: 50%; top: calc(var(--ly) - 18px); width: 6px; height: 36px; margin-left: -3px; border-radius: 3px; background: #111; }
.ride-pearl { position: absolute; left: 50%; top: var(--ly); width: 56px; height: 56px; margin: -28px 0 0 -28px; box-sizing: border-box; border-radius: 50%; background: #fff; border: 9px solid #111; z-index: 2; pointer-events: none; }
.ride-arw { all: unset; cursor: pointer; position: absolute; top: calc(var(--ly) - 30px); z-index: 3; width: 60px; height: 60px; box-sizing: border-box; border-radius: 50%; background: #111; display: grid; place-items: center; box-shadow: 0 0 0 5px #f4f4f1; }
.ride-prev { left: 12px; } .ride-next { right: 12px; }
.ride-arw svg { width: 56%; }
.ride-arw:focus-visible { outline: 4px solid var(--Y); outline-offset: 3px; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) { .ride-arw { transition: transform .2s ease; } .ride-prev:hover { transform: translateX(-3px); } .ride-next:hover { transform: translateX(3px); } }
.ride-card { background: #f4f4f1; border-radius: 12px; padding: 16px 18px; }
.ride-copy p { margin: 0; }
.ride-k { font-size: 12px !important; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #5d5d58; }
.ride-t { font-size: 24px !important; font-weight: 800; letter-spacing: -0.02em; margin: 2px 0 4px !important; }
.ride-d { color: #333; }
@media (max-width: 600px) { .ride-view { --ly: 96px; --lh: 16px; height: 140px; } .ride-pill { height: 40px; padding: 0 14px; font-size: 18px; top: 18px; } .ride-pill i { display: none; }
  .ride-arw { width: 46px; height: 46px; top: calc(var(--ly) - 23px); } .ride-prev { left: 8px; } .ride-next { right: 8px; } .ride-pearl { width: 44px; height: 44px; margin: -22px 0 0 -22px; border-width: 7px; } }
/* the map lights up the stop the rail is on: everything else dims, the current stretch of line thickens */
.dd-metro .dd-hi { fill: none; stroke-width: 20; stroke-linejoin: round; stroke-linecap: round; opacity: 0; }
.dd-metro[data-at] :where(.dd-track, .dd-back, .dd-l, .dd-k[data-ph], .dd-xfer, .dd-s) { opacity: .28; }
@media (prefers-reduced-motion: no-preference) { .dd-metro :is(.dd-track, .dd-back, .dd-l, .dd-k, .dd-xfer, .dd-s, .dd-hi) { transition: opacity .45s ease; } }
.dd-metro[data-at="0"] [data-ph="0"], .dd-metro[data-at="1"] [data-ph="1"], .dd-metro[data-at="2"] [data-ph="2"],
.dd-metro[data-at="3"] [data-ph="3"], .dd-metro[data-at="4"] [data-ph="4"] { opacity: 1; }
.dd-metro[data-at="1"] .dd-xfer, .dd-metro[data-at="2"] .dd-xfer, .dd-metro[data-at="1"] .dd-s, .dd-metro[data-at="2"] .dd-s { opacity: 1; }
/* transfer as a flip card: the front says it, the back shows it */
.sn-flip { padding: 0; background: none; perspective: 1800px; }
.flip { display: grid; transform-style: preserve-3d; cursor: pointer; }
@media (prefers-reduced-motion: no-preference) { .flip { transition: transform .8s cubic-bezier(.6,.05,.25,1); } }
.flip .face { grid-area: 1 / 1; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 16px; padding: 18px; display: grid; gap: 14px; align-content: start; }
.flip .front { background: #FCCC0A; color: #111; align-content: space-between; }
.flip .back { background: #111; color: #fff; transform: rotateY(180deg); box-shadow: inset 0 0 0 3px #FCCC0A; }
.flip.flipped { transform: rotateY(180deg); }
.flip .back .tr-band { background: #FCCC0A; color: #111; }
.flip .back .tr-flow li.tr-me { background: #FCCC0A; color: #111; }
.flip .back .tr-flow li:not(:last-child)::after { color: #FCCC0A; }
.tr-short { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.tr-short h3 { flex: 1 1 320px; }
.tr-toggle { all: unset; box-sizing: border-box; cursor: pointer; display: inline-flex; align-items: center; gap: 10px; font-weight: 800; font-size: 16px; color: #111; }
.tr-chev { width: 48px; height: 48px; flex: none; background: #111; display: grid; place-items: center; }
.tr-chev svg { width: 60%; }
.tr-toggle:focus-visible { outline: 3px solid currentColor; outline-offset: 4px; border-radius: 999px; }
.flip .front { grid-template-rows: auto 1fr; align-content: stretch; }
.flip .front .tr-short { align-self: center; }
.flip .back .tr-me .tr-k i { background: #111 !important; color: #FCCC0A !important; }
.flip .back .tr-flow li { color: #111; }
.flip .back .tr-flow li.tr-me { color: #111; }
.flip .back .tr-toggle { color: #fff; justify-self: end; }
.flip .back .tr-chev { background: #FCCC0A; } .flip .back .tr-chev path { stroke: #111; }
.tr-chev { border-radius: 50% !important; }
.tr-toggle[aria-expanded="true"] .tr-chev, .flip .tr-chev { transform: none; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) { .tr-toggle:hover .tr-chev { transform: rotate(180deg); transition: transform .4s ease; } }
@media (prefers-reduced-motion: reduce) { .flip.flipped { transform: none; } .flip .back { transform: none; visibility: hidden; } .flip.flipped .back { visibility: visible; } .flip.flipped .front { visibility: hidden; } }
/* flip, 2D: a split-flap board. The front folds shut top-to-bottom, the back folds open. */
.sn-flip { perspective: none; }
.flip, .flip.flipped { transform: none !important; transition: none !important; }
.flip .face { backface-visibility: visible; -webkit-backface-visibility: visible; transform-origin: 50% 50%; }
.flip .back { transform: none; visibility: hidden; }
.flip.flipped .back { visibility: visible; } .flip.flipped .front { visibility: hidden; }
.flip .face.out { visibility: visible !important; animation: flapOut .2s cubic-bezier(.5,0,.9,.5) forwards; }
.flip .face.in { animation: flapIn .28s cubic-bezier(.2,.9,.3,1.15) both; }
.flip .face::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 3px; margin-top: -1.5px; background: rgba(0,0,0,.35); opacity: 0; pointer-events: none; }
.flip .face { position: relative; }
.flip .face.out::after, .flip .face.in::after { opacity: 1; }
@keyframes flapOut { to { transform: scaleY(0); filter: brightness(.7); } }
@keyframes flapIn { from { transform: scaleY(0); filter: brightness(.7); } to { transform: scaleY(1); filter: none; } }
/* how I design: one clickable stack; each layer opens in place */
.sn-how { grid-template-columns: 1fr !important; }
.stack .layer { background: var(--c); color: var(--ink); border-radius: 8px; }
.stack .layer button { all: unset; box-sizing: border-box; cursor: pointer; width: 100%; padding: 14px 12px; font-weight: 800; font-size: 16px; display: flex; gap: 10px; align-items: center; }
.stack .layer button:focus-visible, .stack-a11y:focus-visible { outline: 3px solid #fff; outline-offset: 3px; border-radius: 8px; }
.stack .layer b { width: 28px; height: 28px; border-radius: 50%; background: #111; color: #fff; display: grid; place-items: center; font-size: 13px; flex: none; }
.l-plus { margin-left: auto; width: 22px; height: 22px; position: relative; flex: none; }
.l-plus::before, .l-plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 3px; margin: -1.5px 0 0 -7px; background: currentColor; border-radius: 2px; transition: transform .25s ease; }
.l-plus::after { transform: rotate(90deg); }
.stack button[aria-expanded="true"] .l-plus::after { transform: rotate(0deg); }
.stack .ld { margin: 0; padding: 0 12px 14px 50px; font-size: 15px; line-height: 1.45; font-weight: 600; }
.stack .ld[hidden] { display: none; }
@media (prefers-reduced-motion: no-preference) { .stack .ld:not([hidden]) { animation: cardUp .35s cubic-bezier(.2,.8,.2,1) both; } }
.stack-a11y { all: unset; box-sizing: border-box; cursor: pointer; grid-column: 2; grid-row: 1; border-radius: 8px; background: repeating-linear-gradient(-45deg, #2a2a28 0 8px, #1d1d1c 8px 16px); box-shadow: inset 0 0 0 2px #FCCC0A; display: grid; place-items: center; }
.stack-a11y[aria-expanded="true"] { background: #FCCC0A; } .stack-a11y[aria-expanded="true"] span { color: #111; }
.stack .ld-a11y { grid-column: 1 / -1; padding: 12px 14px; border-radius: 8px; background: #FCCC0A; color: #111; }
/* how I design: rows plus a layer stack */
.sn-how { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); column-gap: 24px; }
.sn-how > .sn-head, .sn-how > h3 { grid-column: 1 / -1; }
.stack { margin: 0; display: grid; grid-template-columns: 1fr 44px; gap: 8px; align-content: start; padding-top: 12px; }
.stack-layers { display: grid; gap: 6px; }
.stack-layers .layer { display: block; padding: 0; }
.stack-layers div[style*="--B"] { color: #fff; }
.stack-layers b { width: 26px; height: 26px; border-radius: 50%; background: #111; color: #fff; display: grid; place-items: center; font-size: 13px; flex: none; }
.stack-a11y { border-radius: 8px; background: repeating-linear-gradient(-45deg, #2a2a28 0 8px, #1d1d1c 8px 16px); box-shadow: inset 0 0 0 2px #FCCC0A; display: grid; place-items: center; }
.stack-a11y span { writing-mode: vertical-rl; transform: rotate(180deg); font-weight: 800; font-size: 12px; color: #FCCC0A; padding: 8px 0; }
.stack figcaption { grid-column: 1 / -1; color: #c9c9c4; font-size: 14px; line-height: 1.4; }
@media (max-width: 900px) { .sn-how { grid-template-columns: 1fr; } }
/* transfer, as a translation from goal to system to spec */
.sn-transfer { grid-column: 1 / -1; }
.sn-transfer h3 .two { opacity: .7; font-size: .6em; margin-top: 6px; letter-spacing: -0.01em; }
.tr-flow { list-style: none; margin: 4px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 34px; }
.tr-flow li { position: relative; background: #fff; border-radius: 12px; padding: 14px 16px 16px; display: grid; gap: 8px; align-content: start; }
.tr-flow li.tr-me { background: #111; color: #fff; }
.tr-flow li:not(:last-child)::after { content: ""; width: 18px; height: 18px; background: currentColor; -webkit-mask: var(--jc-arrow) center / contain no-repeat; mask: var(--jc-arrow) center / contain no-repeat; position: absolute; right: -28px; top: 50%; transform: translateY(-50%); font-weight: 800; font-size: 24px; color: #111; }
.tr-k { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.tr-k i { width: 28px; height: 28px; border-radius: 50%; background: var(--c); color: var(--ink, #fff); display: grid; place-items: center; font-style: normal; font-size: 13px; letter-spacing: 0; }
.tr-flow b { font-size: 18px; line-height: 1.3; }
@media (max-width: 900px) { .tr-flow { grid-template-columns: 1fr; gap: 30px; } .tr-flow li:not(:last-child)::after { transform: rotate(90deg); right: auto; left: 22px; top: auto; bottom: -30px; transform: none; } }
/* you are here */
.sn-here { grid-column: span 3; background: #fff; color: #111; box-shadow: inset 0 0 0 1.5px #d6d6d0; grid-template-columns: 120px 1fr; gap: 18px; align-items: center; }
.here-map { width: 120px; aspect-ratio: 1; border-radius: 12px; position: relative; background:
  linear-gradient(90deg, transparent 46%, #e3e3de 46% 54%, transparent 54%), linear-gradient(0deg, transparent 46%, #e3e3de 46% 54%, transparent 54%),
  linear-gradient(35deg, transparent 47%, var(--G) 47% 53%, transparent 53%), #f4f4f1; }
.here-dot { position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; margin: -11px; border-radius: 50%; background: var(--R); border: 4px solid #fff; box-shadow: 0 0 0 2px var(--R); }
.here-ring { position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; margin: -11px; border-radius: 50%; border: 3px solid var(--R); }
@media (prefers-reduced-motion: no-preference) { .about.open .here-ring { animation: ping 1.8s ease-out infinite; } }
@keyframes ping { to { transform: scale(3); opacity: 0; } }
.here-k { font-size: 13px !important; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--R); }
.sn-here p:last-child { color: #555; margin-top: 6px; }
/* departures board */
.sn-board { grid-column: span 3; background: #111; color: #fff; }
.sn-board h3 { font-size: 20px; letter-spacing: 0; }
.bd-head { align-items: end; }
.sn-board ul { list-style: none; margin: 0; padding: 0; }
.sn-board li { display: grid; grid-template-columns: 40px 1fr auto; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid #333; }
.sn-board li span { font-weight: 800; font-size: 19px; }
.sn-board small { display: block; font-weight: 500; font-size: 14px; color: #a9a9a4; }
.sn-board em { font-style: normal; font-family: "Courier New", ui-monospace, monospace; font-weight: 700; color: #FCCC0A; font-size: 14px; }
/* toolbox */
.sn-tools { grid-column: span 3; background: #f4f4f1; color: #111; box-shadow: inset 0 0 0 1.5px #d6d6d0; }
.pills { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
/* toolbox: tools grouped by what they're for, each group on its own line color */
.tool-groups { display: grid; gap: 14px; }
.tg { display: grid; gap: 8px; }
.tg-k { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #a9a9a4; }
.tg-k i { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.tool-groups .pills li { padding: 6px 12px; font-size: 14px; }
.pills li { padding: 8px 14px; border-radius: 999px; background: #111; color: #fff; font-weight: 700; font-size: 15px; }
/* exit */
.sn-exit { grid-column: span 3; background: #111; color: #fff; }
.exit-top { display: flex; gap: 10px; align-items: stretch; }
.exit-arw { width: 72px; flex: none; border-radius: 10px; background: #fff; display: grid; place-items: center; }
.exit-arw svg { width: 60%; } .exit-arw path { stroke: #111; }
.exit-blk { flex: 1; background: var(--R); color: #fff; border-radius: 10px; padding: 8px 16px 12px; font-size: clamp(40px, 4.4vw, 60px) !important; }
.exit-links { display: flex; flex-wrap: wrap; gap: 8px; }
.exit-links a { color: #fff; text-decoration: none; font-weight: 700; font-size: 16px; padding: 10px 16px; border-radius: 999px; box-shadow: inset 0 0 0 2px #fff; }
.exit-links a:hover { background: #fff; color: #111; }
.exit-links a:focus-visible, .kiosk-dots a.kdot:focus-visible { outline: 4px solid var(--Y); outline-offset: 4px; }
a.kdot { text-decoration: none; }
:root[data-theme="dark"] :is(.sn-station, .sn-board, .sn-exit) { box-shadow: inset 0 0 0 1.5px #3a3a38; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) :is(.sn-station, .sn-board, .sn-exit) { box-shadow: inset 0 0 0 1.5px #3a3a38; } }
/* (sign entrance now handled by the scroll reveal, .rv/.in) */
/* ---------- Play: a rack of bus tickets, one per fun project ---------- */
.tickets { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 14px; }
.tickets li { display: grid; }
@media (prefers-reduced-motion: no-preference) { .about.open .tickets li { animation: cardUp .55s cubic-bezier(.2,.8,.2,1) both; } }
.tk { all: unset; box-sizing: border-box; cursor: pointer; text-decoration: none; }
.sp-ticket.tk { display: flex; flex-direction: column; gap: 6px; min-height: 250px; padding: 16px 18px 12px; border-radius: 12px; background: #f4f4f1; color: #111; box-shadow: inset 0 0 0 1.5px #d6d6d0, inset 0 8px 0 var(--c); transition: transform .25s cubic-bezier(.2,.8,.2,1); }
.sp-ticket.tk .hd { margin-top: 6px; }
.sp-ticket.tk .hd i:first-child { background: var(--c); color: var(--ink); }
.sp-ticket.tk .hd i + i { background: #111; color: #fff; }
.sp-ticket.tk .go { color: #111; }
.sp-ticket.tk[aria-disabled="true"] { cursor: default; }
.sp-ticket.tk[aria-disabled="true"] .go { color: #6a6a66; }
.sp-ticket.tk:focus-visible { outline: 4px solid var(--Y); outline-offset: 4px; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) { .sp-ticket.tk:not([aria-disabled]):hover { transform: translateY(-4px) rotate(-.6deg); } }
.tk-ph { margin: 0; font-size: 13px; font-weight: 700; color: var(--muted); }

/* ---------- Play: ticket formats ----------
   Each ticket picks a format with look: in PROJECTS (js/about-play.js). Same text and link in every format;
   only the decoration changes. Art, the tag's code and the barcode stub are aria-hidden. */
.tickets { grid-template-columns: 1fr; }
@media (min-width: 640px) { .tickets { grid-template-columns: repeat(2, 1fr); } .tickets li:has(.tk--stub) { grid-column: span 2; } }
@media (min-width: 1100px) { .tickets { grid-template-columns: repeat(4, 1fr); } }
.sp-ticket.tk { position: relative; overflow: hidden; }
.tk-art { position: absolute; display: block; }
.tk-art svg { display: block; width: 100%; height: 100%; }
.tk-art--dots { background: radial-gradient(circle, var(--c) 0 13px, transparent 14px) 4px 4px / 40px 40px, #111; }

/* tag: a luggage tag, punch hole and a big code in a color band */
.sp-ticket.tk--tag { box-shadow: inset 0 0 0 1.5px #d6d6d0; padding-top: 0; }
.tk--tag::before { content: ""; position: absolute; top: 14px; right: 16px; width: 14px; height: 14px; border-radius: 50%; background: var(--bg); box-shadow: 0 0 0 4px #111; }
.tk-code { display: block; margin: 0 -18px 8px; padding: 30px 18px 12px; background: var(--c); color: var(--ink);
  font-weight: 800; font-size: clamp(56px, 6vw, 80px); letter-spacing: -0.05em; line-height: .85;
  background-image: repeating-linear-gradient(90deg, transparent 0 10px, rgba(0,0,0,.14) 10px 14px); background-size: 100% 10px; background-repeat: no-repeat; }
.tk--tag b.big { font-size: clamp(24px, 2.4vw, 32px); }

/* stub: wide ticket, art panel on the left, barcode stub on the right */
.sp-ticket.tk--stub { padding-left: calc(38% + 22px); padding-right: 92px; box-shadow: inset 0 0 0 1.5px #d6d6d0; }
.tk--stub .tk-art { left: 0; top: 0; bottom: 0; width: 38%; }
.tk--stub .perf { margin: 8px 0; }
.tk--stub .perf::before, .tk--stub .perf::after { display: none; }
.tk-stub { position: absolute; top: 0; right: 0; bottom: 0; width: 70px; background: var(--c); color: var(--ink);
  border-left: 2px dashed rgba(17,17,17,.35); display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 16px 0; box-sizing: border-box; }
.tk-stub .bars { width: 34px; flex: 1; max-height: 150px; background: repeating-linear-gradient(180deg, currentColor 0 2px, transparent 2px 4px, currentColor 4px 7px, transparent 7px 9px, currentColor 9px 10px, transparent 10px 13px); }
.tk-stub .vt { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
@media (max-width: 639px) {
  .sp-ticket.tk--stub { padding-left: 18px; padding-top: 156px; }
  .tk--stub .tk-art { right: 70px; width: auto; bottom: auto; height: 140px; }
}

/* solid: the whole ticket in its line color, shapes across the top */
.sp-ticket.tk--solid { background: var(--c); color: var(--ink); box-shadow: none; padding-top: 136px; }
.tk--solid .tk-art { top: 0; left: 0; right: 0; height: 120px; }
.sp-ticket.tk--solid .hd i:first-child { background: var(--ink); color: var(--c); }
.sp-ticket.tk--solid .hd i + i { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink); }
.sp-ticket.tk--solid .go { color: var(--ink); }
.tk--solid .perf { border-top-color: currentColor; opacity: .5; }

/* dark: black ticket, one big shape in the corner */
.sp-ticket.tk--dark { background: #222; color: var(--fg); box-shadow: inset 0 0 0 1.5px #3a3a3a, inset 0 8px 0 var(--c); }
.tk--dark .tk-art { top: 18px; right: 14px; width: 74px; height: 74px; }
.sp-ticket.tk--dark .hd i + i { background: var(--fg); color: #111; }
.sp-ticket.tk--dark .go { color: var(--fg); }
.tk--dark .perf { border-top-color: #555; }

/* strip: art on top, info below, a barcode along the bottom */
.sp-ticket.tk--strip { padding-top: 128px; box-shadow: inset 0 0 0 1.5px #d6d6d0; }
.tk--strip .tk-art { top: 0; left: 0; right: 0; height: 112px; background: #111; }
.tk--strip .tk-stub { position: static; order: 99; width: auto; flex-direction: row; align-items: center; justify-content: space-between;
  margin: 6px -18px -12px; padding: 10px 18px; border-left: 0; border-top: 2px dashed rgba(17,17,17,.35); }
.tk--strip .tk-stub .bars { width: 45%; height: 26px; flex: none; background: repeating-linear-gradient(90deg, currentColor 0 2px, transparent 2px 4px, currentColor 4px 7px, transparent 7px 9px, currentColor 9px 10px, transparent 10px 13px); }
.tk--strip .tk-stub .vt { writing-mode: horizontal-tb; transform: none; white-space: nowrap; }
/* art opened from a ticket, inside the flood */
.fl-art { aspect-ratio: 4 / 3; max-width: 820px; width: 100%; border-radius: 12px; overflow: hidden; display: grid; place-items: center;
  border: 2px dashed var(--ink); color: var(--ink); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; font-size: 13px; }
.fl-art img { width: 100%; height: 100%; object-fit: contain; display: block; }
.fl-art:has(img) { border: 0; }
.fl-sub { margin: 0; font-size: 18px; font-weight: 600; color: var(--ink); }
/* off the clock, inside About: the splash pieces on a plain backdrop */
.sn-off { grid-column: 1 / -1; padding: 6px 0 0; }
.sp-wide { grid-column: span 4; grid-template-columns: repeat(8, 1fr); align-self: center; }
@media (max-width: 760px) { .sp-wide { grid-template-columns: repeat(4, 1fr); } }
.sn-off .kiosk-splash > * { align-self: start; }
.sp-wide i { font-size: clamp(18px, 2vw, 28px) !important; }
.fl-count[hidden] { display: none !important; }
/* the flood: a full screen in the line's color, revealed as a circle growing out of the letter you tapped */
.flood {
  position: fixed; inset: 0; z-index: 6; overflow-y: auto; background: var(--fc); color: var(--ink);
  padding: calc(28px + env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) 120px max(16px, env(safe-area-inset-left, 0px));
  clip-path: circle(0 at var(--ox, 50%) var(--oy, 50%));
}
.flood.open { clip-path: circle(150vmax at var(--ox, 50%) var(--oy, 50%)); }
@media (prefers-reduced-motion: no-preference) { .flood { transition: clip-path .7s cubic-bezier(.7,0,.2,1); } }
.flood-in { max-width: 1180px; margin: 0 auto; display: grid; gap: 22px; }
.flood-top { display: flex; align-items: center; justify-content: space-between; }
.fl-pair { display: flex; gap: 8px; align-items: center; }
.fl-pair .lt { width: 56px; height: 56px; border-radius: 50%; background: #111; color: #fff; display: grid; place-items: center; font-size: 28px; font-weight: 800; }
.fl-pair .ar { width: 56px; height: 56px; border-radius: 50%; background: var(--ink); color: var(--fc); display: grid; place-items: center; }
.fl-close { width: 52px; height: 52px; border-radius: 50%; border: 2.5px solid var(--ink); background: none; color: var(--ink); display: grid; place-items: center; cursor: pointer; }
.flood h3 { margin: 0; font-size: clamp(42px, 6.2vw, 88px); line-height: .95; letter-spacing: -0.035em; font-weight: 800; }
.flood h3 .two { color: var(--ink); opacity: .5; }
.fl-count { display: flex; align-items: end; gap: 16px; border-bottom: 5px solid var(--ink); padding-bottom: 10px; }
.fl-num { font-size: clamp(90px, 14vw, 190px); font-weight: 800; line-height: .78; letter-spacing: -0.05em; font-variant-numeric: tabular-nums; }
.fl-cap { font-weight: 700; font-size: 16px; padding-bottom: 6px; }
.fl-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
@media (max-width: 600px) { .about { padding-top: calc(140px + env(safe-area-inset-top, 0px)); } }
.fl-cards li { background: #111; color: #fff; border-radius: 22px; padding: 18px 18px 20px; display: grid; grid-template-columns: 1fr auto; gap: 10px 12px; min-height: 150px; }
.fl-cards .ct { display: flex; align-items: center; justify-content: space-between; grid-column: 1 / -1; }
.fl-cards .ct .lt { width: 34px; height: 34px; border-radius: 50%; background: var(--fc); color: var(--ink); display: grid; place-items: center; font-weight: 800; }
.fl-cards .listen { display: flex; gap: 6px; }
.fl-cards .listen a { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  box-shadow: inset 0 0 0 2px #4a4a47; color: #fff; font: 800 20px/1 var(--sans); text-decoration: none; transition: background .25s, color .25s, box-shadow .25s, transform .25s; }
@media (prefers-reduced-motion: no-preference) { .fl-cards .listen a:hover { transform: rotate(45deg); } }
.fl-cards .listen a:hover { background: var(--fc); color: var(--ink); box-shadow: none; }
.fl-cards .listen a:focus-visible { outline: 3px solid var(--fc); outline-offset: 2px; }
.fl-cards b { font-size: 22px; line-height: 1.1; align-self: end; }
.fl-cards b span { display: block; color: #9a9a96; font-weight: 700; font-size: 16px; margin-top: 4px; }
.fl-cards .ix { font-size: 54px; font-weight: 800; line-height: .8; align-self: end; letter-spacing: -0.04em; }
.flood .ph { margin: 0; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; opacity: .7; }
@media (prefers-reduced-motion: no-preference) {
  .flood.open .fl-cards li { animation: cardUp .55s cubic-bezier(.2,.8,.2,1) both; }
  .flood.open h3 { animation: cardUp .6s cubic-bezier(.2,.8,.2,1) .15s both; }
}
@keyframes cardUp { from { opacity: 0; transform: translateY(24px); } }

/* ================= About, v2: one system for every sign =================
   Paper = maps and tickets (white). Signs = black with the thin white rule on top. Pictograms = a line color.
   12 columns, 16px gaps, 16px corners, 24px padding, one header style, one easing. */
:root { --ease: cubic-bezier(.2,.8,.2,1); }
.kt-end { justify-content: flex-end; }
#aboutTitle:focus, #playTitle:focus { outline: none; }
#about .signs { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
#about .signs > .sn { padding: 24px; gap: 16px; border-radius: 16px; grid-row: auto; }
#about .sn-process { grid-column: 1 / -1; }
#about .sn-how { grid-column: span 8; }
#about .sn-access { grid-column: span 4; align-self: stretch; display: flex; flex-direction: column; }
#about .sn-transfer { grid-column: 1 / -1; }
#about .sn-here, #about .sn-board { grid-column: span 6; }
#about .sn-off { grid-column: 1 / -1; padding: 0; }
#about .sn-make, #about .sn-say, #about .sn-tools { grid-column: span 4; }
#about .sn-exit { grid-column: 1 / -1; }
@media (max-width: 900px) { #about .signs > .sn { grid-column: 1 / -1 !important; } }
/* one header on every sign: thin rule, small label left, number right */
#about .sn-head { border-top: 3px solid currentColor; padding-top: 8px; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: inherit; opacity: .75; display: flex; justify-content: space-between; }
#about .sn h3 { font-size: clamp(28px, 3vw, 40px); }
/* black signs */
#about :is(.sn-make, .sn-say, .sn-tools) { background: #111; color: #fff; box-shadow: none; }
:root[data-theme="dark"] #about :is(.sn-make, .sn-say, .sn-tools, .sn-how, .sn-board, .sn-exit, .sn-transfer) { box-shadow: inset 0 0 0 1.5px #3a3a38; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) #about :is(.sn-make, .sn-say, .sn-tools, .sn-how, .sn-board, .sn-exit, .sn-transfer) { box-shadow: inset 0 0 0 1.5px #3a3a38; } }
#about .makes { margin: 0; }
#about .makes li { box-shadow: inset 0 0 0 2px #fff; color: #fff; }
#about .pills li { background: #fff; color: #111; }
#about .quotes blockquote { background: rgba(255,255,255,.06); }
#about .quotes footer { color: #a9a9a4; }

/* process: map left, the current stop right, the rail underneath */
.pr-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 24px; align-items: center; }
.pr-grid .dd { max-width: none !important; width: 100%; margin: 0 !important; }
.pr-grid .ride-card { align-self: stretch; display: flex; flex-direction: column; justify-content: center; gap: 12px; }
.ride-hint { margin: 0; font-size: 13px !important; color: #6a6a66; }
.ride-d { font-size: 19px !important; line-height: 1.4; font-weight: 600; margin-top: 6px !important; color: #111 !important; }
.ride-copy { transition: opacity .25s var(--ease), transform .35s var(--ease); }
@media (max-width: 760px) { .pr-grid { grid-template-columns: 1fr; } }
/* the highlight: same width as the track, so the active part just lights up */
.dd-metro .dd-hi { stroke-width: 12 !important; transition: opacity .45s var(--ease); }
.dd-metro :where(.dd-track, .dd-back, .dd-l, .dd-k, .dd-xfer, .dd-s) { transition: opacity .45s var(--ease); }
.dd-metro[data-at] :where(.dd-track, .dd-back, .dd-xfer, .dd-s, .dd-l, .dd-k[data-ph]) { opacity: .35; }
.dd-metro .dd-xfer { fill: #fff !important; stroke: #111 !important; stroke-width: 4 !important; }

/* how I design */
#about .sn-how { display: flex; flex-direction: column; }
#about .stack { display: grid; grid-template-columns: 20px minmax(0, 1fr) 44px; grid-template-areas: "rail layers a11y" "note note note" "cap cap cap"; gap: 10px 10px; margin: 0; padding: 0; flex: 1; align-content: start; }
.stack-rail { grid-area: rail; position: relative; }
.stack-rail::before { content: ""; position: absolute; left: 7px; top: 6px; bottom: 6px; width: 6px; border-radius: 3px; background: linear-gradient(var(--B) 0 33%, var(--O) 33% 66%, var(--Y) 66%); }
.stack-pearl { position: absolute; left: -2px; top: -12px; width: 24px; height: 24px; box-sizing: border-box; border-radius: 50%; background: #fff; border: 5px solid #111; box-shadow: 0 0 0 2px #fff; transition: transform .55s cubic-bezier(.6,.05,.25,1), opacity .3s; }
.stack.all .stack-pearl { opacity: 0; }
.stack.all .stack-rail::before { box-shadow: 0 0 0 3px #FCCC0A; }
#about .stack-layers { grid-area: layers; display: grid; gap: 8px; }
#about .stack .layer { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 0 16px; border-radius: 10px;
  background: transparent; color: #fff; box-shadow: inset 0 0 0 2.5px var(--c); font-weight: 800; font-size: 16px; transform-origin: left center;
  transition: background .35s var(--ease), color .35s var(--ease), transform .35s var(--ease), border-radius .35s var(--ease); }
/* outlined until the pearl arrives, then filled: same rule as the station pills on the home rail */
#about .stack .layer b { width: 28px; height: 28px; border-radius: 50%; background: var(--c); color: var(--ink); display: grid; place-items: center; font-size: 13px; flex: none; transition: border-radius .35s var(--ease), transform .35s var(--ease); }
#about .stack .layer[aria-pressed="true"] { background: var(--c); color: var(--ink); border-radius: 10px 30px 30px 10px; }
#about .stack .layer[aria-pressed="true"] b { border-radius: 8px; background: #111; color: #fff; }
#about .stack.all .layer { background: color-mix(in srgb, var(--c) 30%, transparent); }
#about .stack .layer:not([aria-pressed="true"]):hover { background: color-mix(in srgb, var(--c) 22%, transparent); }
#about .stack .layer:focus-visible, #about .stack-a11y:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
#about .stack-a11y { all: unset; box-sizing: border-box; cursor: pointer; grid-area: a11y; border-radius: 10px; display: grid; place-items: center;
  background: repeating-linear-gradient(-45deg, #2a2a28 0 8px, #1d1d1c 8px 16px); box-shadow: inset 0 0 0 2px #FCCC0A; transition: background .35s var(--ease); }
#about .stack-a11y span { writing-mode: vertical-rl; transform: rotate(180deg); font-weight: 800; font-size: 12px; color: #FCCC0A; }
#about .stack-a11y[aria-pressed="true"] { background: #FCCC0A; } #about .stack-a11y[aria-pressed="true"] span { color: #111; }
.stack-note { grid-area: note; min-height: 92px; box-sizing: border-box; padding: 14px 16px; border-radius: 10px; background: rgba(255,255,255,.07); transition: opacity .18s var(--ease), transform .25s var(--ease); }
.stack-note.out { opacity: 0; transform: translateY(8px); }
.stack-note p { margin: 0; }
.st-k { font-size: 12px !important; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #FCCC0A; }
.st-d { margin-top: 4px !important; font-size: 16px; line-height: 1.45; color: #e6e6e2; }
#about .stack figcaption { grid-area: cap; color: #a9a9a4; font-size: 14px; }
/* accessible: icon top, the standard at the bottom, same height as How I design */
#about .sn-access .acc-ico { width: clamp(88px, 9vw, 128px); height: clamp(88px, 9vw, 128px); border-radius: 18px; }
#about .sn-access .acc-ico svg { width: 72%; }
#about .sn-access h3 { margin-top: auto; }
#about .acc-std { margin-top: 0 !important; }
#about .acc-std { margin-top: auto !important; display: grid; gap: 6px; font-weight: 800; letter-spacing: .06em; border-top: 3px solid #fff; padding-top: 10px; }
#about .acc-std small { font-weight: 600; letter-spacing: 0; font-size: 15px; line-height: 1.4; opacity: .9; }

/* transfer: the example rides the line */
#about .sn-transfer { background: #FCCC0A; color: #111; }
#about .sn-transfer .tr-band { margin: -24px -24px 0; padding: 12px 24px; border-radius: 16px 16px 0 0; display: flex; justify-content: space-between; align-items: center; }
.tr-no { width: 32px; height: 32px; border-radius: 50%; background: #FCCC0A; color: #111; display: grid; place-items: center; letter-spacing: 0; font-size: 13px; }
.tr-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.tr-top h3 { flex: 1 1 420px; }
.tr-play { all: unset; box-sizing: border-box; cursor: pointer; display: inline-flex; align-items: center; gap: 10px; font-weight: 800; font-size: 15px; color: #111; }
.tr-play:focus-visible { outline: 3px solid #111; outline-offset: 4px; border-radius: 999px; }
.tr-play .tr-chev { width: 44px; height: 44px; border-radius: 50%; background: #111; display: grid; place-items: center; transition: transform .5s var(--ease); }
.tr-play:hover .tr-chev { transform: rotate(180deg); }
.tr-ex { margin: 0 !important; font-size: 13px !important; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.tr-ride { display: grid; gap: 14px; }
.tr-ctrl { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
/* a little LED departures board */
.tr-board { margin: 0 !important; display: grid; gap: 2px; min-width: 210px; padding: 8px 14px; border-radius: 8px; background: #111; font-family: "Courier New", ui-monospace, monospace; }
.tr-board span { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: #a9a9a4; }
.tr-board b { font-size: 16px; color: #FCCC0A; white-space: nowrap; }
.tr-board.blink b { animation: ledIn .45s steps(3) both; }
@keyframes ledIn { from { opacity: 0; } }
.tr-map { width: 100%; height: auto; display: block; overflow: visible; }
.tr-ln { fill: none; stroke-width: 14; stroke-linecap: round; }
.tr-x { fill: #fff; stroke: #111; stroke-width: 6; }
.tr-st { fill: #fff; stroke: #111; stroke-width: 6; transition: fill .3s; }
.tr-st.on { fill: var(--c); }
.tr-x.on { fill: #FCCC0A; }
.tr-bul text { font: 800 24px var(--sans); text-anchor: middle; }
.tr-nm { font: 800 19px var(--sans); text-anchor: middle; fill: #111; letter-spacing: -0.01em; }
.tr-train rect { fill: #111; stroke: #FCCC0A; stroke-width: 3; }
.tr-train circle { fill: #FCCC0A; }
#about .tr-flow { gap: 16px; }
#about .tr-flow { gap: 40px; }
#about .tr-flow li:not(:last-child)::after { content: ""; width: 18px; height: 18px; background: currentColor; -webkit-mask: var(--jc-arrow) center / contain no-repeat; mask: var(--jc-arrow) center / contain no-repeat; position: absolute; right: -31px; top: 50%; transform: translateY(-50%); font-weight: 800; font-size: 24px; color: #111; }
@media (max-width: 760px) { #about .tr-flow { gap: 16px; } #about .tr-flow li:not(:last-child)::after { content: none; } }
.tr-ride.armed .tr-flow li { opacity: .3; transform: translateY(12px) scale(.98); }
.tr-ride.armed .tr-flow li.on { opacity: 1; transform: none; }
.tr-flow li { transition: opacity .4s var(--ease), transform .5s cubic-bezier(.3,1.5,.5,1); }
@media (max-width: 760px) { #about .tr-flow { grid-template-columns: 1fr; } .tr-nm { font-size: 30px; } .tr-board { min-width: 0; } }


/* you are here / now serving: same header, same height */
.here-body { display: grid; grid-template-columns: 120px 1fr; gap: 18px; align-items: center; }
#about .sn-here { display: flex; flex-direction: column; align-items: stretch; }
#about .sn-board h3 { font-size: clamp(28px, 3vw, 40px); }

#about .sn-off .sn-head { margin: 0 0 -4px; }

/* exit: the two signs side by side */
.exit-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 760px) { .exit-row { grid-template-columns: 1fr; } }


/* make / say / toolbox: "What I make" is a departures board on the left; the two shorter signs stack on the right */
#about .sn-make { grid-column: 1 / span 7; }
#about .sn-col { grid-column: 8 / -1; display: flex; flex-direction: column; gap: 16px; }
#about .sn-col > .sn { padding: 24px; gap: 16px; border-radius: 16px; }
#about .sn-say { flex: 1; }
@media (max-width: 900px) { #about .sn-col { grid-column: 1 / -1; } }
.makes-board { list-style: none; margin: 0; padding: 0; display: grid; }
.makes-board li { display: grid; grid-template-columns: 40px 1fr; gap: 14px; align-items: center; padding: 12px 0; border-top: 1px solid #333; font-weight: 800; font-size: clamp(17px, 1.6vw, 21px); letter-spacing: -0.01em; }
.makes-board i { width: 40px; height: 40px; border-radius: 50%; background: var(--c); color: var(--ink, #fff); transition: background .25s, color .25s; display: grid; place-items: center; font-style: normal; font-size: 20px; }
#about .quotes { margin: 0; grid-template-columns: 1fr; gap: 10px; }
#about .quotes p { font-size: 18px; }
@media (max-width: 900px) { #about .sn-make, #about .sn-say, #about .sn-tools { grid-row: auto; } }
/* hover: each row / tool lights up in its own line color */
.makes-board li { margin: 0 -12px; padding-left: 12px; padding-right: 12px; border-radius: 10px; transition: background .25s var(--ease), color .25s var(--ease), transform .25s var(--ease); }
.makes-board li { color: #fff; }
.makes-board li:hover { background: var(--c); color: var(--ink, #fff); border-top-color: transparent; transform: translateX(4px); }
.makes-board li:hover + li { border-top-color: transparent; }
.makes-board li:hover i { background: #111; color: #fff; }
#about .pills li { transition: background .25s var(--ease), color .25s var(--ease), transform .25s var(--ease); }
#about .pills li:hover { background: var(--c); color: var(--ink, #fff); transform: translateY(-3px); }
/* you are here a little smaller, departures a little larger */
#about .sn-here { grid-column: span 5; }
#about .sn-board { grid-column: span 7; }
#about .sn-here h3 { font-size: clamp(24px, 2.4vw, 32px); }
#about .here-body { grid-template-columns: 96px 1fr; }
#about .here-map { width: 96px; }
@media (max-width: 900px) { #about .sn-here, #about .sn-board { grid-column: 1 / -1; } }
/* the scroll reveal: every sign uses the same move */
@media (prefers-reduced-motion: no-preference) {
  #about .sn.rv { opacity: 0; transform: translateY(28px); transition: opacity .6s var(--ease), transform .7s var(--ease); }
  #about .sn.rv.in { opacity: 1; transform: none; }
}
/* transfer: yellow outline all the way round, so the black band reads as part of the sign */
#about .sn-transfer { box-shadow: inset 0 0 0 3px #FCCC0A !important; }
#about .sn-transfer .tr-band { margin: -24px -24px 0; box-shadow: inset 0 3px 0 #FCCC0A, inset 3px 0 0 #FCCC0A, inset -3px 0 0 #FCCC0A; }
/* metro card: a white edge so its black ticket strip doesn't melt into the dark page */
#about .sp-card { box-shadow: inset 0 0 0 1.5px #d6d6d0, 0 0 0 3px #fff; }
/* process card at night: same map, on a dark sign instead of white paper */
:root[data-theme="dark"] #about .sn-process { background: #161615; color: #f4f4f2; --fg: #f4f4f2; --muted: #a9a9a4; --body: #d6d6d2; box-shadow: inset 0 0 0 1.5px #3a3a38; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) #about .sn-process { background: #161615; color: #f4f4f2; --fg: #f4f4f2; --muted: #a9a9a4; --body: #d6d6d2; box-shadow: inset 0 0 0 1.5px #3a3a38; } }
:root[data-theme="dark"] #about .sn-process .dd-metro .dd-back { stroke: #4a4a47; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) #about .sn-process .dd-metro .dd-back { stroke: #4a4a47; } }
:root[data-theme="dark"] #about .sn-process .dd-metro .dd-term { fill: #f4f4f2; stroke: #161615; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) #about .sn-process .dd-metro .dd-term { fill: #f4f4f2; stroke: #161615; } }
:root[data-theme="dark"] #about .sn-process .dd-metro .dd-xfer { fill: #161615 !important; stroke: #f4f4f2 !important; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) #about .sn-process .dd-metro .dd-xfer { fill: #161615 !important; stroke: #f4f4f2 !important; } }
:root[data-theme="dark"] #about .sn-process .ride-card, :root[data-theme="dark"] #about .sn-process .ride-view { background: #222220; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) #about .sn-process .ride-card, :root:not([data-theme="light"]) #about .sn-process .ride-view { background: #222220; } }
:root[data-theme="dark"] #about .sn-process .ride-k { color: #a9a9a4; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) #about .sn-process .ride-k { color: #a9a9a4; } }
:root[data-theme="dark"] #about .sn-process .ride-d { color: #f4f4f2 !important; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) #about .sn-process .ride-d { color: #f4f4f2 !important; } }
:root[data-theme="dark"] #about .sn-process .ride-pill { background: #222220; border-color: #f4f4f2; color: #f4f4f2; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) #about .sn-process .ride-pill { background: #222220; border-color: #f4f4f2; color: #f4f4f2; } }
:root[data-theme="dark"] #about .sn-process .ride-slot.on .ride-pill { background: var(--c); border-color: var(--c); color: var(--ink); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) #about .sn-process .ride-slot.on .ride-pill { background: var(--c); border-color: var(--c); color: var(--ink); } }
:root[data-theme="dark"] #about .sn-process .ride-tick { background: #f4f4f2; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) #about .sn-process .ride-tick { background: #f4f4f2; } }
:root[data-theme="dark"] #about .sn-process .ride-pearl { border-color: #111; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) #about .sn-process .ride-pearl { border-color: #111; } }
:root[data-theme="dark"] #about .sn-process .ride-arw { background: #f4f4f2; box-shadow: 0 0 0 5px #222220; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) #about .sn-process .ride-arw { background: #f4f4f2; box-shadow: 0 0 0 5px #222220; } }
:root[data-theme="dark"] #about .sn-process .ride-arw path { stroke: #111; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) #about .sn-process .ride-arw path { stroke: #111; } }
/* how I design, decluttered: three layers and one note, nothing else */
#about .stack { grid-template-columns: 1fr !important; grid-template-areas: "layers" "note" !important; gap: 12px !important; }
#about .stack-note { flex: 1; display: flex; flex-direction: column; justify-content: center; min-height: 0; }
#about .stack .layer { min-height: 60px; font-size: 18px; }

/* Play: "Made for fun", the cue and the rule fill the first screen; only the tops of the tickets peek in below,
   so scrolling pulls the rack up. --peek = how much of the tickets shows. */
#playView { --peek: 64px; }
#playView .play-head { display: flex; flex-direction: column; gap: 24px;
  min-height: calc(100vh - 96px - var(--barH, 0px) - var(--peek) - 24px);
  min-height: calc(100dvh - 96px - env(safe-area-inset-top, 0px) - var(--barH, 0px) - var(--peek) - 24px); }
#playView .play-head .kiosk-cue { margin-top: auto; }
@media (min-width: 761px) {
  #playView .kiosk-top { margin-bottom: -40px; }
  /* big, but sized to the window's height too, so the arrow, the rule and the ticket tops always fit on arrival */
  #playView .kiosk-h { font-size: clamp(64px, min(15vw, 14vh), 230px) !important; }
  #playView .cue-arrow { width: clamp(72px, min(16vw, 12vh), 220px); }
  #playView .play-head .kiosk-cue { padding-top: clamp(8px, 2vh, 48px); }
}
/* About: the full-size title, circles, cue and rule own the first screen; only the top edge of the
   first sign peeks in at the bottom, with white space above it, as a hint to scroll. */
#about { --peek: 56px; }
#about .about-head { display: flex; flex-direction: column; gap: 24px;
  min-height: calc(100vh - 96px - var(--barH, 0px) - var(--peek) - 24px);
  min-height: calc(100dvh - 96px - env(safe-area-inset-top, 0px) - var(--barH, 0px) - var(--peek) - 24px); }
#about .about-head .kiosk-cue { margin-top: auto; padding-top: clamp(28px, 5vw, 64px); }
@media (min-width: 761px) {
  #about .kiosk-top { margin-bottom: -40px; }
  /* big, but sized to the window's height too, so the peek of the first sign always stays on screen */
  #about .kiosk-h { font-size: clamp(72px, min(15vw, 14vh), 230px) !important; }
  #about .kdot { width: clamp(64px, min(11vw, 10vh), 150px); font-size: clamp(28px, min(5.6vw, 5vh), 78px); }
  #about .cue-arrow { width: clamp(72px, min(16vw, 12vh), 220px); }
  #about .about-head .kiosk-cue { padding-top: clamp(8px, 2vh, 48px); }
}
/* short laptop windows: the two-tone titles go on one line so the arrow and rule still fit */
@media (min-width: 761px) and (max-height: 700px) { :is(#about, #playView) .kiosk-h .two { display: inline; margin-left: .2em; } }
@media (max-width: 600px) { #about .about-head { min-height: calc(100dvh - 140px - env(safe-area-inset-top, 0px) - var(--barH, 0px) - var(--peek) - 24px); } }
@media (max-width: 600px) { #playView .play-head { min-height: calc(100dvh - 140px - env(safe-area-inset-top, 0px) - var(--barH, 0px) - var(--peek) - 24px); } }
/* the woosh: a train of line colors rushes across the screen between pages */
.woosh { position: fixed; inset: 0; z-index: 9; pointer-events: none; display: grid; grid-template-rows: repeat(5, 1fr); overflow: hidden; }
.woosh[hidden] { display: none; }
.woosh i { display: block; background: var(--c); transform: translateX(-102%); position: relative; }
.woosh i::after { content: ""; position: absolute; right: 28px; top: 50%; width: 22px; height: 22px; margin-top: -11px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 5px #111; }
.woosh i::before { content: ""; position: absolute; left: 0; right: 80px; top: 50%; height: 2px; background: rgba(255,255,255,.35); }

/* deck ticket: slide viewer inside the flood */
.fl-deck { display: grid; gap: 16px; max-width: min(900px, calc((100vh - 330px) * 16 / 9)); }
.fl-deck[hidden], .fl-art[hidden] { display: none !important; }
.dk-stage { aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: #111; box-shadow: 0 0 0 3px var(--ink); }
.dk-stage img { width: 100%; height: 100%; object-fit: contain; display: block; }
.dk-bar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.dk-arw { width: 56px; height: 56px; border-radius: 50%; border: 0; background: var(--ink); color: var(--fc); display: grid; place-items: center; cursor: pointer; }
.dk-arw svg { width: 50%; }
.dk-count { margin: 0; min-width: 84px; text-align: center; font-weight: 800; font-size: 18px; color: var(--ink); font-variant-numeric: tabular-nums; }
.dk-dl { margin-left: auto; display: inline-flex; align-items: center; gap: 10px; padding: 14px 22px; border-radius: 999px; background: var(--ink); color: var(--fc); font-weight: 800; font-size: 16px; text-decoration: none; }
.dk-dl svg { width: 20px; height: 20px; }
.dk-arw:focus-visible, .dk-dl:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; }
@media (prefers-reduced-motion: no-preference) { .dk-arw, .dk-dl { transition: transform .25s var(--ease); } .dk-arw:hover, .dk-dl:hover { transform: translateY(-2px); } }

/* the light transition: the page fades to the ground while one line zips across */
.wline { position: fixed; inset: 0; z-index: 9; pointer-events: none; background: var(--bg); opacity: 0; display: grid; align-items: center; }
.wline[hidden] { display: none; }
.wl-rail { display: block; height: 14px; background: var(--c); clip-path: inset(-30px 100% -30px 0); position: relative; }
.wl-rail i { position: absolute; right: 18%; top: 50%; width: 34px; height: 34px; margin-top: -17px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 7px #111; }

/* ---------- case studies: a full-screen view over the line, one per station ---------- */
.case { --cc: var(--Y); }
.case-in { max-width: 1240px; }
.case-grid { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 56px; align-items: start; }
@media (max-width: 900px) { .case-grid { grid-template-columns: 1fr; } .case-rail { display: none; } }
/* the stop list: a mini line down the left, the current stop filled */
.case-rail { position: sticky; top: 24px; }
.case-rail ol { list-style: none; margin: 0; padding: 0 0 0 28px; position: relative; display: grid; gap: 22px; }
.case-rail ol::before { content: ""; position: absolute; left: 8px; top: 8px; bottom: 8px; width: 6px; border-radius: 3px; background: var(--cc); }
.case-rail li { position: relative; }
.case-rail li::before { content: ""; position: absolute; left: -28px; top: 2px; width: 22px; height: 22px; box-sizing: border-box; border-radius: 50%; background: var(--bg); border: 5px solid var(--fg); transition: background .3s var(--ease), transform .3s var(--ease); }
.case-rail li.on::before { background: var(--fg); transform: scale(1.15); }
.case-rail a { color: var(--muted); text-decoration: none; font-weight: 700; font-size: 15px; line-height: 1.3; display: block; transition: color .2s; }
.case-rail li.on a, .case-rail a:hover { color: var(--fg); }
.case-rail a:focus-visible { outline: 3px solid var(--Y); outline-offset: 4px; border-radius: 4px; }
/* keyboard: the rail takes focus when a case study opens; a section takes focus when you pick it from the rail */
.case-rail:focus { outline: none; }
.case-rail:focus-visible { outline: 3px solid var(--Y); outline-offset: 10px; border-radius: 8px; }
.cs-sec:focus { outline: none; }
.cs-sec:focus-visible { outline: 3px solid var(--Y); outline-offset: 12px; border-radius: 8px; }
/* the rail, take two: no stop dots. One pearl rides the line to the section you're reading, and each stop
   is a small gray sign that fills with the line's color when the pearl reaches it */
.case-rail ol { gap: 10px; padding-left: 34px; }
.case-rail li::before { display: none; }
.case-rail a { display: inline-block; padding: 7px 14px; border-radius: 999px; color: var(--muted);
  transition: background .35s var(--ease), color .35s var(--ease), box-shadow .35s var(--ease); }
.case-rail a:hover { color: var(--fg); }
.case-rail li.on a { background: var(--cc); color: var(--cink, #fff); }
.case-rail .case-pearl { position: absolute; left: 0; top: 0; width: 22px; height: 22px; box-sizing: border-box; border-radius: 50%;
  background: #fff; border: 5px solid #111; box-shadow: 0 0 0 2px var(--bg); pointer-events: none; }
@media (prefers-reduced-motion: no-preference) { .case-rail .case-pearl { transition: transform .6s cubic-bezier(.6,.05,.25,1); } }
.case-body { display: grid; gap: 72px; min-width: 0; }
/* password gate */
.cs-lock { max-width: 680px; }
.lock-form { display: grid; gap: 10px; margin-top: 8px; }
.lock-form label { font-size: 14px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.lock-row { display: flex; gap: 10px; flex-wrap: wrap; }
.lock-row input { flex: 1 1 240px; min-height: 52px; padding: 0 18px; border-radius: 999px; border: 2px solid var(--slot, #4a4a47); background: transparent; color: var(--fg); font: 600 18px/1 var(--sans); }
.lock-row input:focus-visible { outline: 3px solid var(--cc); outline-offset: 3px; border-color: var(--fg); }
.lock-row .cta { min-height: 52px; }
.lock-msg { margin: 0; min-height: 1.4em; font-size: 15px; color: var(--body); }
.lock-ask { justify-self: start; color: var(--fg); font-weight: 700; text-underline-offset: 4px; }
.lock-ask:focus-visible { outline: 3px solid var(--cc); outline-offset: 3px; }
.cs-sec { display: grid; gap: 20px; scroll-margin-top: 96px; }   /* clears the fixed nav when the rail jumps here */
.cs-head { display: flex; align-items: center; gap: 12px; }
.cs-head .bullet { width: 52px; height: 52px; font-size: 26px; background: var(--cc); color: var(--cink, #fff); }
.cs-head .pill { height: 52px; border-color: var(--cc); background: var(--cc); color: var(--cink, #fff); }
.cs-kicker { margin: 0; font-size: 14px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.case h2.cs-title { font-size: clamp(40px, 5.6vw, 76px); line-height: .98; letter-spacing: -0.035em; text-wrap: balance; }
.case h3 { margin: 0; font-size: clamp(28px, 3vw, 40px); line-height: 1.05; letter-spacing: -0.025em; font-weight: 800; text-wrap: balance; }
.cs-lede { margin: 0; font-size: clamp(19px, 1.6vw, 22px); line-height: 1.5; color: var(--body); max-width: 62ch; }
.cs-p { margin: 0; font-size: 18px; line-height: 1.6; color: var(--body); max-width: 64ch; }
.cs-meta { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 3px solid var(--fg); }
.cs-meta div { padding: 14px 16px 0 0; display: grid; gap: 4px; align-content: start; }
.cs-meta dt { font-size: 13px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.cs-meta dd { margin: 0; font-size: 17px; font-weight: 700; line-height: 1.35; }
.cs-meta .cs-line { display: block; }   /* a list value (like Team): one person per line */
@media (max-width: 700px) { .cs-meta { grid-template-columns: 1fr 1fr; row-gap: 14px; } }
/* figures: a screen in a station-sign frame */
.cs-fig { margin: 0; display: grid; gap: 10px; }
.cs-fig .cs-frame { background: #1d1d1c; padding: 10px; border-radius: 12px; box-shadow: inset 0 0 0 1px #3a3a38; }
.cs-fig img { display: block; width: 100%; height: auto; border-radius: 6px; background: #fff; }
.cs-fig figcaption { font-size: 15px; color: var(--muted); line-height: 1.45; }
.cs-fig.tall { max-width: 380px; } .cs-fig.mid { max-width: 760px; } .cs-fig.small { max-width: 600px; }
#caseTitle:focus { outline: none; }
/* screens side by side share one height: each is cropped from the top to the row's height */
.cs-figs .cs-fig img { height: clamp(220px, 26vw, 380px); object-fit: cover; object-position: top center; }
.cs-figs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 16px; }
/* big numbers */
.cs-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); border-top: 3px solid var(--fg); }
.cs-stat { padding: 18px 20px 4px 0; display: grid; gap: 6px; align-content: start; }
.cs-stat + .cs-stat { border-left: 1px solid var(--barline); padding-left: 20px; }
.cs-stat b { font-size: clamp(44px, 5vw, 72px); line-height: 1; letter-spacing: -0.04em; font-weight: 900; }
.cs-stat b.hi { color: var(--cc-text, var(--fg)); }
.cs-stat b .was { display: flex; align-items: center; gap: .25em; font-size: .42em; height: 1.2em; line-height: 1.2; letter-spacing: -0.02em; color: var(--muted); margin-bottom: .1em; }
.cs-stat b .was i { font-style: normal; }
.cs-stats:has(.was) .cs-stat b:not(:has(.was))::before { content: "\00a0"; display: block; font-size: .42em; height: 1.2em; line-height: 1.2; margin-bottom: .1em; }   /* keep the big numbers on one baseline */
.cs-stat span { font-size: 16px; font-weight: 700; line-height: 1.35; }
.cs-stat small { font-size: 14px; color: var(--muted); line-height: 1.45; }
/* a decision: numbered like a stop, with the tradeoff beat */
.cs-dec { display: grid; gap: 18px; padding-top: 24px; border-top: 1px solid var(--barline); }
.cs-dec-n { display: flex; align-items: center; gap: 12px; }
.cs-dec-n i { width: 40px; height: 40px; border-radius: 50%; background: var(--cc); color: var(--cink, #fff); display: grid; place-items: center; font-style: normal; font-weight: 900; font-size: 18px; flex: none; }
.cs-dl { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 28px 24px; margin: 0; }   /* room between situation / choice / tradeoff / evidence */
.cs-dl dt { font-size: 14px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding-top: 3px; }
.cs-dl dd { margin: 0; font-size: 18px; line-height: 1.55; color: var(--body); }
.cs-dl dt.tr { color: var(--cc); }   /* matches the design system DecisionCard: the tradeoff is marked by its line-colored label, no box */
.cs-dl dd.tr { color: var(--fg); }
@media (max-width: 700px) { .cs-dl { grid-template-columns: 1fr; } .cs-dl dd { margin-bottom: 8px; } }
.cs-list { margin: 0; padding-left: 1.2em; display: grid; gap: 8px; font-size: 18px; line-height: 1.55; color: var(--body); max-width: 64ch; }
.cs-quote { margin: 0; padding: 18px 22px; border-left: 6px solid var(--cc); background: color-mix(in srgb, var(--fg) 5%, transparent); border-radius: 0 10px 10px 0; }
.cs-quote p { margin: 0 0 6px; font-size: 22px; line-height: 1.4; font-weight: 700; }
.cs-quote cite { font-style: normal; font-size: 14px; color: var(--muted); font-weight: 700; }
.cs-note { margin: 0; font-size: 14px; color: var(--muted); line-height: 1.5; }
.cs-next { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 24px; border-radius: 16px; background: #111; color: #fff; text-decoration: none; box-shadow: inset 0 0 0 1.5px #3a3a38; }
.cs-next b { font-size: clamp(24px, 3vw, 36px); letter-spacing: -0.02em; }
.cs-next small { display: block; font-size: 13px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #a9a9a4; margin-bottom: 4px; }
.cs-next .bullet { width: 52px; height: 52px; font-size: 24px; background: var(--nc); }
.cs-next:focus-visible { outline: 4px solid var(--Y); outline-offset: 4px; }
@media (prefers-reduced-motion: no-preference) { .case.open .cs-sec { animation: cardUp .6s var(--ease) both; } .case.open .cs-sec:nth-child(2) { animation-delay: .06s; } .case.open .cs-sec:nth-child(n+3) { animation-delay: .12s; } }

.cs-bars { display: grid; gap: 14px; border-top: 3px solid var(--fg); padding-top: 18px; }
.cs-bar { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) 96px; gap: 16px; align-items: center; }
.cs-bar .lb { font-size: 17px; font-weight: 700; line-height: 1.35; }
.cs-bar .tr { height: 22px; background: color-mix(in srgb, var(--fg) 10%, transparent); border-radius: 11px; overflow: hidden; }
.cs-bar .tr i { display: block; height: 100%; background: var(--cc); border-radius: 11px; }
.cs-bar b { font-size: 17px; font-weight: 800; text-align: right; }
@media (max-width: 700px) { .cs-bar { grid-template-columns: 1fr 72px; } .cs-bar .tr { grid-column: 1 / -1; grid-row: 2; } }

/* ---------- phone audit fixes ---------- */
.bar-tog { display: none; }
@media (max-width: 760px) {
  /* review bar: folded to a pill by default; it's a review tool, not part of the site */
  .bar .bar-tog { display: inline-flex; }
  .bar:not(.open) { right: auto; left: max(12px, env(safe-area-inset-left, 0px)); bottom: calc(12px + env(safe-area-inset-bottom, 0px)); padding: 0; border: 0; background: transparent; }
  .bar:not(.open) > :not(.bar-tog) { display: none !important; }
  .bar:not(.open) .bar-tog { background: var(--bar); color: var(--fg); box-shadow: inset 0 0 0 1.5px #4a4a48; font-size: 13px; padding: 10px 14px; opacity: .85; }
  /* 44px touch targets */
  .cta, .stop .cta, .sf-top, .lock-row .cta { min-height: 44px; box-sizing: border-box; }
  .footer .cta { min-height: 44px; }
  .sf-links ul { gap: 2px; }
  .sf-links a { min-height: 44px; }
  .roundel { min-width: 44px; min-height: 44px; }
  /* nothing smaller than 13px */
  .sf-k, .tg-k, .tk-ph { font-size: 13px; }
  .sp-ticket.tk .way, .sp-ticket.tk small, .sp-ticket small, .sp-ticket .way, .sp-foot { font-size: 13px; }
  /* the diagram is too small for its stop names on a phone; the stop pills under it name them */
  .sn-process .dd-l { display: none; }
  .sn-process .dd-k { font-size: 30px; }
  /* meta lines: keep role and dates together */
  .meta { text-wrap: balance; }
  .ride-k, .st-k { font-size: 13px !important; }
}