/* Joe Hill — site styles.
   Layout concept: a survey map sheet for the I-65 corridor, read through an
   operations console. Map paper and contour brown carry the ground, interstate
   green carries action, signal amber marks "home" and live state. */

@font-face {
  font-family: "Overpass";
  src: url("../fonts/overpass-latin-var.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Overpass Mono";
  src: url("../fonts/overpass-mono-latin-var.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Source Serif 4";
  src: url("../fonts/source-serif-4-latin-var.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Source Serif 4";
  src: url("../fonts/source-serif-4-italic-latin-var.woff2") format("woff2");
  font-weight: 300 700;
  font-style: italic;
  font-display: swap;
}

:root {
  /* Color: map paper, ink, contour, interstate sign, survey water, signal */
  --paper: #eef0e8;
  --paper-2: #e3e7da;
  --paper-3: #d7dccd;
  --ink: #16201b;
  --ink-2: #47524b;
  --ink-3: #5c6760;
  --rule: #c3c9ba; /* hairlines between content */
  --rule-strong: #79827a; /* the edge of a control: 3:1 on both papers */
  --contour: #a46f3c;
  --contour-ink: #7a4f22;
  --sign: #0e6a46; /* a fill, under --sign-ink */
  --sign-2: #0b5539;
  --sign-ink: #f4f7f1;
  --sign-fg: var(--sign); /* sign green as text or a line on paper */
  --water: #2d5d89; /* map.js reads it for the rivers; demos.css uses it too */
  --signal: #d9970e;
  --signal-ink: #1c1606;
  --link: #0b5f3e;
  --focus: #2d5d89;
  --console: var(--ink); /* the operations-console panels stay dark in both themes */
  --console-ink: var(--paper);
  --console-accent: var(--signal);
  --shadow: 0 1px 0 rgb(22 32 27 / 6%), 0 12px 32px -18px rgb(22 32 27 / 28%);

  /* Type */
  --font-display: "Overpass", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Source Serif 4", "Iowan Old Style", Georgia, serif;
  --font-mono: "Overpass Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --step--2: 0.6875rem; /* mono micro labels */
  --step--1: 0.8125rem;
  --small: 0.975rem; /* secondary text, just under body size */
  --step-0: clamp(1.0625rem, 1.02rem + 0.2vw, 1.1875rem);
  --step-1: clamp(1.25rem, 1.15rem + 0.45vw, 1.5rem);
  --step-2: clamp(1.5rem, 1.3rem + 0.9vw, 2.125rem);
  --step-3: clamp(2rem, 1.6rem + 1.9vw, 3.25rem);
  --step-4: clamp(2.5rem, 1.7rem + 3.6vw, 5rem);

  /* Space */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;
  --space-9: clamp(4rem, 3rem + 5vw, 8rem);

  --measure: 38rem;
  --wide: 76rem;
  --radius-s: 3px;
  --radius: 6px;
  --radius-l: 10px;
  --gutter-l: max(16px, env(safe-area-inset-left, 0px));
  --gutter-r: max(16px, env(safe-area-inset-right, 0px));

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0e1512;
    --paper-2: #141e19;
    --paper-3: #1b2721;
    --ink: #e4eae3;
    --ink-2: #a9b4ac;
    --ink-3: #87938b;
    --rule: #2a3830;
    --rule-strong: #62736a;
    --contour: #b98654;
    --contour-ink: #d3a273;
    --sign: #0f6c48;
    --sign-2: #0c5a3c;
    --sign-ink: #f4f7f1;
    --sign-fg: #3aa877;
    --water: #79a7d3;
    --signal: #efb33c;
    --signal-ink: #1c1606;
    --link: #7fd1a7;
    --focus: #79a7d3;
    --console: var(--paper-3);
    --console-ink: var(--ink);
    --shadow: 0 1px 0 rgb(0 0 0 / 30%), 0 14px 36px -18px rgb(0 0 0 / 70%);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #0e1512;
  --paper-2: #141e19;
  --paper-3: #1b2721;
  --ink: #e4eae3;
  --ink-2: #a9b4ac;
  --ink-3: #87938b;
  --rule: #2a3830;
  --rule-strong: #62736a;
  --contour: #b98654;
  --contour-ink: #d3a273;
  --sign: #0f6c48;
  --sign-2: #0c5a3c;
  --sign-ink: #f4f7f1;
  --sign-fg: #3aa877;
  --water: #79a7d3;
  --signal: #efb33c;
  --signal-ink: #1c1606;
  --link: #7fd1a7;
  --focus: #79a7d3;
  --console: var(--paper-3);
  --console-ink: var(--ink);
  --shadow: 0 1px 0 rgb(0 0 0 / 30%), 0 14px 36px -18px rgb(0 0 0 / 70%);
  color-scheme: dark;
}

/* Breakpoints, in rem so they follow the reader's font size
   (custom properties cannot be used in media queries):
   64rem (1024px) the business explorer's tab column turns into chips above the panel
   56rem (896px)  the nav collapses to a menu and two-column layouts stack
   40rem (640px)  status labels and the search button hide, photos go 3:2, and the fit
                  columns, case fields, résumé skills and timeline stack
   30rem (480px)  the readout figures drop a size, the header keeps name, theme glyph, menu
   23rem (368px)  the readout goes to one column
   Inside the explorer, the cards respond to the panel's own width (see Business explorer). */

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

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

/* Component display rules must never override the hidden attribute. */
[hidden] {
  display: none !important;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* Clears the sticky header, which sits below the notch on phones. */
  scroll-padding-top: calc(5rem + env(safe-area-inset-top, 0px));
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
  @view-transition {
    navigation: auto;
  }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.6;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
}

img,
svg,
canvas {
  display: block;
  max-width: 100%;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  line-height: 1.05;
  letter-spacing: -0.015em;
  margin: 0;
  text-wrap: balance;
  font-weight: 800;
}

h1 {
  font-size: var(--step-4);
  letter-spacing: -0.03em;
  line-height: 0.98;
  font-weight: 850;
}
h2 {
  font-size: var(--step-3);
  letter-spacing: -0.025em;
}
h3 {
  font-size: var(--step-1);
  line-height: 1.2;
  font-weight: 750;
  letter-spacing: -0.01em;
}

p {
  margin: 0;
  text-wrap: pretty;
}

a {
  color: var(--link);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}
a:hover {
  text-decoration-thickness: 2px;
}

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

strong {
  font-weight: 650;
}

ul,
ol {
  margin: 0;
  padding: 0;
}

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

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

.skip-link {
  position: absolute;
  left: var(--gutter-l);
  top: env(safe-area-inset-top, 0px);
  z-index: 100;
  padding: var(--space-2) var(--space-4);
  background: var(--sign);
  color: var(--sign-ink);
  font-family: var(--font-mono);
  font-size: var(--step--1);
  transform: translateY(-120%);
}
.skip-link:focus {
  transform: translateY(0);
}

/* Switching themes repaints at once instead of animating every color. */
.theme-swap *,
.theme-swap *::before,
.theme-swap *::after {
  transition: none !important;
}

/* ---------- Layout ---------- */

.wrap {
  width: 100%;
  max-width: calc(var(--wide) + var(--gutter-l) + var(--gutter-r));
  margin-inline: auto;
  padding-left: var(--gutter-l);
  padding-right: var(--gutter-r);
}

.section {
  padding-block: var(--space-9);
}
.section + .section {
  border-top: 1px solid var(--rule);
}
.section--band {
  background: var(--paper-2);
}

.stack > * + * {
  margin-top: var(--space-4);
}
.stack-lg > * + * {
  margin-top: var(--space-6);
}

.prose {
  max-width: var(--measure);
}
.prose > * + * {
  margin-top: 1em;
}

.lede {
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 36rem;
}

.section-head {
  display: grid;
  gap: var(--space-4);
  max-width: 44rem;
  margin-bottom: var(--space-7);
}
.section-head p {
  color: var(--ink-2);
}

/* Map-legend style label: mono, uppercase, tracked, with a short survey tick. */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--contour-ink);
}
.eyebrow::before {
  content: "";
  width: 1.5rem;
  height: 1px;
  background: currentColor;
}

.mono {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.06em;
}

/* ---------- Status bar ---------- */

.statusbar {
  background: var(--console);
  color: var(--console-ink);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.statusbar .wrap {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-6);
  padding-block: 0.45rem;
}
.statusbar dl {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-6);
  margin: 0;
}
.statusbar dl > div {
  display: flex;
  gap: var(--space-2);
}
.statusbar dt {
  opacity: 0.62;
}
.statusbar dd {
  margin: 0;
  min-width: 0;
}
@media (max-width: 40rem) {
  /* Phones keep the values on one line; the labels stay for screen readers. */
  .statusbar dl {
    column-gap: var(--space-4);
  }
  .statusbar dt {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}
.status-live::before {
  content: "";
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  margin-right: 0.45rem;
  border-radius: 50%;
  background: var(--console-accent);
  vertical-align: 0.05em;
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--console-accent) 60%, transparent);
}
@media (prefers-reduced-motion: no-preference) {
  .status-live::before {
    animation: pulse 2.4s ease-out infinite;
  }
}
@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--console-accent) 55%, transparent);
  }
  70%,
  100% {
    box-shadow: 0 0 0 0.45rem color-mix(in srgb, var(--console-accent) 0%, transparent);
  }
}

/* ---------- Header ---------- */

.site-header {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 40;
  background: color-mix(in srgb, var(--paper) 94%, transparent);
  backdrop-filter: saturate(1.4) blur(10px);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--rule);
}
body::before {
  content: "";
  position: fixed;
  inset: 0 0 auto;
  height: env(safe-area-inset-top, 0px);
  z-index: 50;
  background: var(--paper);
}
.site-header .wrap {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  min-height: 4rem;
}

.wordmark {
  display: grid;
  gap: 0.1rem;
  text-decoration: none;
  color: var(--ink);
  margin-right: auto;
}
.wordmark-name {
  font-family: var(--font-display);
  font-weight: 850;
  font-size: 1.25rem;
  letter-spacing: -0.02em;
  line-height: 1;
}
.wordmark-role {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  line-height: 1.2;
  /* When the nav squeezes the wordmark near the menu breakpoint, the role line breaks
     at the sentence instead of leaving "TN." on a line of its own. */
  text-wrap: pretty;
}

.site-nav ul {
  display: flex;
  gap: var(--space-1);
  list-style: none;
}
.site-nav a {
  display: block;
  padding: 0.4rem 0.7rem;
  border-radius: var(--radius);
  font-family: var(--font-display);
  font-weight: 650;
  font-size: var(--small);
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}
.site-nav a:hover {
  background: var(--paper-2);
}
.site-nav a[aria-current="page"] {
  color: var(--sign-fg);
  box-shadow: inset 0 -2px 0 var(--sign-fg);
  border-radius: 0;
}

.header-tools {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.tool-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 2.25rem;
  padding: 0 0.7rem;
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  background: transparent;
  color: var(--ink-2);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
}
.tool-btn:hover {
  color: var(--ink);
  border-color: var(--ink-3);
}
.tool-btn kbd {
  font-family: inherit;
  font-size: var(--step--2);
  padding: 0.05rem 0.3rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius-s);
  background: var(--paper-2);
}
.theme-glyph {
  width: 0.9rem;
  height: 0.9rem;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  background: linear-gradient(90deg, currentColor 50%, transparent 50%);
}
:root[data-theme="light"] .theme-glyph {
  background: transparent;
}
:root[data-theme="dark"] .theme-glyph {
  background: currentColor;
}

.menu-btn {
  display: none;
}

@media (max-width: 56rem) {
  .menu-btn {
    display: inline-flex;
  }
  .site-header .wrap {
    flex-wrap: wrap;
  }
  /* The name takes what the buttons leave, so the header stays one row on phones. */
  .wordmark {
    flex: 1 1 0;
    min-width: 0;
  }
  .site-nav {
    order: 5;
    flex-basis: 100%;
    display: none;
    padding-bottom: var(--space-4);
  }
  .site-nav.is-open {
    display: block;
  }
  .site-nav ul {
    flex-direction: column;
  }
  .site-nav a {
    padding: 0.7rem 0.25rem;
    font-size: 1.125rem;
    border-bottom: 1px solid var(--rule);
    border-radius: 0;
  }
  .site-nav a[aria-current="page"] {
    box-shadow: inset 3px 0 0 var(--sign-fg);
    padding-left: 0.75rem;
  }
  .no-js .site-nav {
    display: block;
  }
  .no-js .menu-btn {
    display: none;
  }
}

/* The contact button in the header borrows the sign face of .btn-sign. */
.header-cta {
  display: inline-flex;
  align-items: center;
  min-height: 2.25rem;
  padding: 0.35rem 0.85rem 0.25rem;
  border-radius: var(--radius);
  background: var(--sign);
  color: var(--sign-ink);
  font-family: var(--font-display);
  font-weight: 750;
  font-size: 0.9375rem;
  text-decoration: none;
  box-shadow: inset 0 0 0 2px var(--sign), inset 0 0 0 3px color-mix(in srgb, var(--sign-ink) 80%, transparent);
}
.header-cta:hover {
  background: var(--sign-2);
  box-shadow: inset 0 0 0 2px var(--sign-2), inset 0 0 0 3px color-mix(in srgb, var(--sign-ink) 80%, transparent);
}
/* Compact header between the menu breakpoint and 75rem. With the four nav labels the
   full header (role line, shortcut hint, theme name) needs about 1190px, so up to 75rem
   the wordmark is the name alone, the search button drops its shortcut hint and the
   theme button keeps only its glyph (same clip as the 30rem rule). The hint rule also
   covers the collapsed menu. The range syntax leaves no gap above the 56rem menu query,
   which a rem-based min-width would at a larger default font size. */
@media (max-width: 75rem) {
  .palette-trigger .palette-hint {
    display: none;
  }
}
@media (56rem < width <= 75rem) {
  .wordmark-role {
    display: none;
  }
  .theme-name {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}
/* Phones keep the header to one row: the search button goes first (the menu
   covers it), then the contact button (every page has its own contact route),
   and the theme button keeps only its glyph. */
@media (max-width: 40rem) {
  .palette-trigger {
    display: none;
  }
}
@media (max-width: 30rem) {
  .header-cta {
    display: none;
  }
  .theme-name {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* Controls that only work with JavaScript stay out of the way without it. */
.no-js .palette-trigger,
.no-js .theme-btn,
.no-js .copy-btn,
.no-js .calc-inputs {
  display: none;
}

/* ---------- Buttons ---------- */

/* Primary button borrows the interstate sign: green field, inset white keyline. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 3rem;
  padding: 0.7rem 1.35rem 0.6rem;
  border-radius: 8px;
  font-family: var(--font-display);
  font-weight: 750;
  font-size: 1.0625rem;
  letter-spacing: 0;
  text-decoration: none;
  cursor: pointer;
  border: 0;
  transition: background-color 0.15s ease;
}
.btn-sign {
  background: var(--sign);
  color: var(--sign-ink);
  box-shadow: inset 0 0 0 3px var(--sign), inset 0 0 0 4.5px color-mix(in srgb, var(--sign-ink) 85%, transparent);
}
.btn-sign:hover {
  background: var(--sign-2);
  box-shadow: inset 0 0 0 3px var(--sign-2), inset 0 0 0 4.5px color-mix(in srgb, var(--sign-ink) 85%, transparent);
}
.btn-quiet {
  background: transparent;
  color: var(--ink);
  box-shadow: inset 0 0 0 1.5px var(--ink-3);
}
.btn-quiet:hover {
  box-shadow: inset 0 0 0 1.5px var(--ink);
}
.btn .arrow {
  font-family: var(--font-mono);
  font-weight: 500;
}
@media (prefers-reduced-motion: no-preference) {
  .btn:hover .arrow {
    transform: translateX(2px);
  }
  .btn .arrow {
    transition: transform 0.15s ease;
  }
}
.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

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

.hero {
  padding-block: clamp(2.5rem, 1.5rem + 4vw, 5.5rem) var(--space-8);
}
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(2rem, 1rem + 4vw, 4.5rem);
  align-items: center;
}
.hero-copy {
  display: grid;
  gap: var(--space-5);
  min-width: 0;
}
.hero h1 {
  max-width: 14ch;
}
.hero--page h1 {
  max-width: 18ch;
}
/* The hiring view's headline is longer, so it is set a size down. */
.hero h1 > [data-aud="hiring"] {
  display: block;
  font-size: var(--step-3);
  line-height: 1.02;
  letter-spacing: -0.025em;
}
.hero-note {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.04em;
  color: var(--ink-3);
}

@media (max-width: 56rem) {
  .hero-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Who-is-this-for switch under the hero copy. The pressed choice inverts. */
.audience {
  display: inline-flex;
  justify-self: start;
  padding: 3px;
  border: 1px solid var(--rule-strong);
  border-radius: 999px;
  background: var(--paper-2);
}
.audience button {
  padding: 0.35rem 0.9rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink-2);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}
.audience button[aria-pressed="true"] {
  background: var(--ink);
  color: var(--paper);
}

.map-toggle {
  border: 0;
  background: none;
  padding: 0.25rem 0;
  color: var(--ink-2);
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  cursor: pointer;
}

/* The map sheet: a framed survey quad with coordinate ticks at the corners. */
.map-sheet {
  position: relative;
  min-width: 0;
  margin: 0;
  padding: 1.1rem;
  border: 1px solid var(--rule);
  background: var(--paper);
  box-shadow: var(--shadow);
}
.map-sheet::before {
  content: "";
  position: absolute;
  inset: 0.45rem;
  border: 1px solid color-mix(in srgb, var(--contour) 45%, transparent);
  pointer-events: none;
}
.map-canvas-box {
  position: relative;
  aspect-ratio: 1 / 1.02;
  max-width: 100%;
}
.map-canvas-box canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.map-fallback {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  gap: 0.25rem;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  text-align: center;
  list-style: none;
}
/* With JavaScript the town list waits for the map. If map.js has not drawn a frame
   within a few seconds (blocked, failed), the list reappears; once it draws, the list goes. */
.js .map-canvas-box:not(.is-drawn) .map-fallback {
  animation: fallback-reveal 0s linear 3s both;
}
@keyframes fallback-reveal {
  from {
    visibility: hidden;
  }
  to {
    visibility: visible;
  }
}
.map-canvas-box.is-drawn .map-fallback {
  display: none;
}
.map-tick {
  position: absolute;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.04em;
  color: var(--contour-ink);
  background: var(--paper);
  padding: 0 0.2rem;
  line-height: 1.2;
}
.map-tick--tl {
  top: 0.15rem;
  left: 0.9rem;
}
.map-tick--tr {
  top: 0.15rem;
  right: 0.9rem;
}
.map-tick--bl {
  bottom: 0.15rem;
  left: 0.9rem;
}
.map-sheet figcaption {
  margin-top: 0.75rem;
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
}

/* Page hero without a map */
.hero--page {
  border-bottom: 1px solid var(--rule);
  background:
    repeating-linear-gradient(0deg, transparent 0 47px, color-mix(in srgb, var(--rule) 55%, transparent) 47px 48px),
    repeating-linear-gradient(90deg, transparent 0 47px, color-mix(in srgb, var(--rule) 55%, transparent) 47px 48px);
}
.hero--page .hero-copy {
  max-width: 50rem;
}

/* ---------- Photos ---------- */

.portrait {
  margin: 0;
  position: relative;
  aspect-ratio: 4 / 5;
  max-width: 100%;
  border: 1px solid var(--rule);
  background: var(--paper-2);
  overflow: hidden;
}
.portrait img,
.photo-wide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Wide photos: a letterbox crop on wide screens, the native 3:2 on phones. */
.photo-wide {
  margin: 0 0 var(--space-7);
  aspect-ratio: 21 / 9;
  max-width: 100%;
  border: 1px solid var(--rule);
  background: var(--paper-2);
  overflow: hidden;
}
.photo-wide img {
  object-position: 50% 35%;
}
@media (max-width: 40rem) {
  .photo-wide {
    aspect-ratio: 3 / 2;
  }
}

/* A photo missing from the manifest: contour rings and a placeholder badge. */
.photo--missing {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  background:
    repeating-radial-gradient(circle at 30% 20%, transparent 0 22px, color-mix(in srgb, var(--contour) 18%, transparent) 22px 23px),
    var(--paper-2);
}

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 24rem);
  gap: clamp(2rem, 1rem + 5vw, 6rem);
  align-items: start;
}
@media (max-width: 56rem) {
  .split {
    grid-template-columns: minmax(0, 1fr);
  }
  .split .portrait {
    max-width: 22rem;
  }
}

/* ---------- Placeholder values ---------- */

.placeholder {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
}
.placeholder-value {
  font-family: var(--font-mono);
  background: repeating-linear-gradient(-45deg, color-mix(in srgb, var(--signal) 22%, transparent) 0 6px, transparent 6px 12px);
  padding: 0 0.3rem;
  border-radius: var(--radius-s);
}
.badge {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.15rem 0.4rem;
  border-radius: var(--radius-s);
  background: var(--signal);
  color: var(--signal-ink);
  white-space: nowrap;
}

/* ---------- Lanes (three kinds of work) ---------- */

.lanes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
  list-style: none;
}
@media (max-width: 56rem) {
  .lanes {
    grid-template-columns: minmax(0, 1fr);
  }
}
.lane {
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: var(--space-3);
  padding: var(--space-6) var(--space-5) var(--space-5);
  border-top: 3px solid var(--ink);
  background: var(--paper);
}
.lane-label {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--contour-ink);
}
.lane p {
  color: var(--ink-2);
}
.lane a {
  font-family: var(--font-display);
  font-weight: 700;
  text-decoration: none;
  margin-top: var(--space-3);
}
.lane a::after {
  content: " \2192";
  font-family: var(--font-mono);
}

/* ---------- Proof readout ---------- */

/* Six figures: three across, two below that, so no row is left half empty. */
.readout {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  list-style: none;
}
@media (max-width: 56rem) {
  .readout {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.readout li {
  display: grid;
  gap: var(--space-2);
  align-content: start;
  padding: var(--space-5);
  background: var(--paper);
  min-width: 0;
}
.readout-value {
  font-family: var(--font-display);
  font-weight: 850;
  font-size: var(--step-3);
  letter-spacing: -0.03em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.readout-label {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sign-fg);
  overflow-wrap: anywhere;
}
.readout-context {
  font-size: var(--small);
  color: var(--ink-2);
  line-height: 1.5;
}
/* Phones keep two across in tighter cells. Below 23rem a half cell is under 135px
   wide and the longer labels run to five lines, so the figures stack instead. */
@media (max-width: 30rem) {
  .readout li {
    padding: var(--space-4);
  }
  .readout-value {
    font-size: var(--step-2);
  }
  .readout-label {
    letter-spacing: 0.04em;
  }
}
@media (max-width: 23rem) {
  .readout {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------- Quote ---------- */

.pull {
  margin: 0;
  display: grid;
  gap: var(--space-5);
  max-width: 54rem;
}
.pull blockquote {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 750;
  font-size: var(--step-3);
  line-height: 1.1;
  letter-spacing: -0.025em;
}
.pull blockquote p {
  text-wrap: balance;
}
.pull blockquote p::before {
  content: "\201C";
  color: var(--contour);
}
.pull blockquote p::after {
  content: "\201D";
  color: var(--contour);
}
.pull figcaption {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* ---------- Feature (Morning Stack) ---------- */

.feature {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 1rem + 4vw, 5rem);
  align-items: start;
}
@media (max-width: 56rem) {
  .feature {
    grid-template-columns: minmax(0, 1fr);
  }
}
.inbox {
  border: 1px solid var(--rule);
  background: var(--paper);
  box-shadow: var(--shadow);
  font-family: var(--font-mono);
  font-size: var(--step--1);
  min-width: 0;
}
.inbox-bar {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 0.6rem 0.9rem;
  border-bottom: 1px solid var(--rule);
  color: var(--ink-3);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: var(--step--2);
}
.inbox-rows {
  list-style: none;
}
.inbox-rows li {
  display: grid;
  grid-template-columns: 4.2rem minmax(0, 1fr);
  gap: var(--space-3);
  padding: 0.75rem 0.9rem;
  border-bottom: 1px solid var(--rule);
}
.inbox-rows li:last-child {
  border-bottom: 0;
}
.inbox-rows .inbox-time {
  color: var(--sign-fg);
}
.inbox-rows span {
  color: var(--ink-2);
  overflow-wrap: anywhere;
}

.checklist {
  list-style: none;
  display: grid;
  gap: var(--space-3);
}
.checklist li {
  display: grid;
  grid-template-columns: 1.25rem minmax(0, 1fr);
  gap: var(--space-3);
}
.checklist li::before {
  content: "";
  width: 0.7rem;
  height: 0.7rem;
  margin-top: 0.5em;
  border: 1.5px solid var(--sign-fg);
  background: linear-gradient(var(--sign-fg), var(--sign-fg)) center / 0.3rem 0.3rem no-repeat;
}

/* ---------- Contact ---------- */

.contact {
  background: var(--sign);
  color: var(--sign-ink);
  --link: var(--sign-ink);
  --focus: var(--sign-ink); /* the blue ring would vanish on green */
}
.contact .eyebrow {
  color: color-mix(in srgb, var(--sign-ink) 88%, transparent);
}
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: clamp(2rem, 1rem + 4vw, 5rem);
}
@media (max-width: 56rem) {
  .contact-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}
.contact h2 {
  max-width: 16ch;
}
.contact p {
  max-width: 34rem;
  color: color-mix(in srgb, var(--sign-ink) 88%, transparent);
}
/* Name card at the top of the address panel. */
.contact-card {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}
.contact-headshot {
  flex: none;
  width: 5rem;
  height: 5rem;
  border-radius: var(--radius);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--sign-ink) 85%, transparent);
  object-fit: cover;
  overflow: hidden; /* keeps a placeholder badge inside the frame */
}
.contact-card p {
  display: grid;
  gap: 0.15rem;
  margin: 0;
  min-width: 0;
}
.contact-name {
  font-family: var(--font-display);
  font-weight: 750;
  font-size: var(--step-1);
  color: var(--sign-ink);
}
.contact-role {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* The address panel echoes a sign face: inset keyline, plain type. */
.contact-panel {
  display: grid;
  gap: var(--space-4);
  align-content: start;
  padding: var(--space-6) var(--space-5);
  border-radius: var(--radius-l);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--sign-ink) 85%, transparent);
  min-width: 0;
}
.contact-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}
.contact-label {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.88;
}
.contact-email {
  font-family: var(--font-display);
  font-weight: 750;
  font-size: var(--step-1);
  overflow-wrap: anywhere;
  user-select: all;
}
.contact .placeholder-value {
  background: repeating-linear-gradient(-45deg, color-mix(in srgb, var(--signal) 40%, transparent) 0 6px, transparent 6px 12px);
}
.copy-btn {
  border-color: color-mix(in srgb, var(--sign-ink) 70%, transparent);
  color: var(--sign-ink);
}
.copy-btn:hover {
  border-color: var(--sign-ink);
  color: var(--sign-ink);
}
.copy-status {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  min-height: 1.4em;
}
.contact-list {
  display: grid;
  gap: var(--space-2);
  list-style: none;
}
.contact-list li {
  display: grid;
  grid-template-columns: 1rem minmax(0, 1fr);
  gap: var(--space-2);
  color: color-mix(in srgb, var(--sign-ink) 88%, transparent);
}
.contact-list li::before {
  content: "\2192";
  font-family: var(--font-mono);
}
.contact h3 {
  font-size: var(--step-0);
  font-family: var(--font-mono);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.contact .btn-quiet {
  color: var(--sign-ink);
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--sign-ink) 60%, transparent);
}
.contact .btn-quiet:hover {
  box-shadow: inset 0 0 0 1.5px var(--sign-ink);
}

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

.site-footer {
  padding-block: var(--space-7);
  background: var(--paper);
  border-top: 1px solid var(--rule);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.site-footer .wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-4) var(--space-6);
}
.footer-line {
  font-family: var(--font-display);
  text-transform: none;
  letter-spacing: 0;
  font-size: 1rem;
  font-weight: 650;
  color: var(--ink);
}
.footer-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
}
.site-footer a {
  color: var(--ink-2);
  padding-block: 0.25rem; /* a taller target without moving the line */
}

/* ---------- Command palette ---------- */

.palette {
  width: min(36rem, calc(100vw - var(--gutter-l) - var(--gutter-r)));
  max-height: min(32rem, calc(100vh - 6rem));
  max-height: min(32rem, calc(100dvh - 6rem));
  margin: 12vh auto auto;
  padding: 0;
  border: 1px solid var(--rule);
  border-radius: var(--radius-l);
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 30px 80px -20px rgb(0 0 0 / 45%);
  overflow: hidden;
}
.palette::backdrop {
  background: rgb(14 21 18 / 45%);
  backdrop-filter: blur(3px);
}
.palette-inner {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  max-height: inherit;
}
.palette input {
  width: 100%;
  padding: 1rem 1.1rem;
  border: 0;
  border-bottom: 1px solid var(--rule);
  background: transparent;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 1.125rem;
}
/* The input is the dialog's only focus stop: a bottom rule replaces the ring. */
.palette input:focus-visible {
  outline: none;
  box-shadow: inset 0 -2px 0 var(--focus);
}
.palette input::placeholder {
  color: var(--ink-3);
  opacity: 1;
}
.palette-list {
  overflow-y: auto;
  padding: var(--space-2);
  list-style: none;
}
.palette-group {
  padding: 0.6rem 0.6rem 0.3rem;
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.palette-item {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 0.6rem 0.7rem;
  border-radius: var(--radius);
  font-family: var(--font-display);
  font-weight: 600;
  cursor: pointer;
}
/* The fill alone is under 3:1 on dark paper, so a bright edge marks the choice too. */
.palette-item[aria-selected="true"] {
  background: var(--sign);
  color: var(--sign-ink);
  box-shadow: inset 3px 0 0 var(--sign-fg);
}
.palette-item .mono {
  opacity: 0.7;
}
.palette-item[aria-selected="true"] .mono {
  opacity: 0.9;
}
.palette-empty {
  padding: 1rem;
  color: var(--ink-3);
  font-family: var(--font-mono);
  font-size: var(--step--1);
}
.palette-foot {
  padding: 0.55rem 1rem;
  border-top: 1px solid var(--rule);
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* ---------- Local facts ---------- */

.facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: var(--space-5);
  list-style: none;
  margin-top: var(--space-7);
}
.fact {
  display: grid;
  gap: var(--space-2);
  align-content: start;
  padding-top: var(--space-4);
  border-top: 1px solid var(--ink);
}
.fact-value {
  font-family: var(--font-display);
  font-weight: 850;
  font-size: var(--step-2);
  letter-spacing: -0.02em;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}
.fact-label {
  color: var(--ink-2);
  font-size: var(--small);
}
.fact-source {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.fact-source a {
  color: var(--ink-3);
  padding-block: 0.25rem;
}

/* ---------- Business explorer ---------- */

.explorer {
  display: grid;
  grid-template-columns: minmax(0, 16rem) minmax(0, 1fr);
  gap: var(--space-6);
  align-items: start;
}
.explorer-tabs {
  display: grid;
  gap: 2px;
  list-style: none;
  position: sticky;
  top: 6rem;
}
.explorer-tab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  width: 100%;
  /* The left edge leaves room for the selected bar, drawn as an inset shadow. */
  padding: 0.7rem 0.85rem 0.7rem calc(0.85rem + 3px);
  border: 0;
  background: transparent;
  color: var(--ink-2);
  font-family: var(--font-display);
  font-weight: 650;
  font-size: 1.0625rem;
  text-align: left;
  cursor: pointer;
  text-decoration: none;
}
.explorer-tab:hover {
  background: var(--paper-2);
  color: var(--ink);
}
.explorer-tab[aria-selected="true"] {
  box-shadow: inset 3px 0 0 var(--sign-fg);
  background: var(--paper-2);
  color: var(--ink);
}
.explorer-tab[aria-selected="true"]::after {
  content: "\2192";
  font-family: var(--font-mono);
  color: var(--sign-fg);
}
.explorer-panels {
  min-width: 0;
  container-type: inline-size; /* the cards below fit the panel, not the window */
}
.explorer-panel {
  display: grid;
  gap: var(--space-6);
  padding: var(--space-6);
  border: 1px solid var(--rule);
  background: var(--paper);
  box-shadow: var(--shadow);
}
/* Until explorer.js takes over (or without it), every panel shows in order. */
.explorer:not(.is-enhanced) .explorer-panel + .explorer-panel {
  margin-top: var(--space-5);
}
.explorer-panel h3 {
  font-size: var(--step-2);
}
.explorer-scenario {
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 40rem;
}
/* Three cards side by side, or one per row: never two and an orphan. */
.uses {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
  list-style: none;
}
@container (max-width: 44rem) {
  .uses {
    grid-template-columns: minmax(0, 1fr);
  }
}
.use {
  display: grid;
  gap: var(--space-2);
  align-content: start;
  padding: var(--space-4);
  border-top: 2px solid var(--sign-fg);
  background: var(--paper-2);
}
.use h5 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 750;
  font-size: 1.0625rem;
  line-height: 1.25;
}
.use p {
  font-size: var(--small);
  color: var(--ink-2);
}
.panel-sub {
  margin: 0 0 var(--space-3);
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--step--1);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--contour-ink);
}
.panel-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5);
}
@container (max-width: 36rem) {
  .panel-pair {
    grid-template-columns: minmax(0, 1fr);
  }
}
.panel-pair > div {
  min-width: 0;
}
/* Below 64rem the tab column would squeeze the panel narrower than it is once the
   tabs move on top, so the explorer stacks before the rest of the page does. */
@media (max-width: 64rem) {
  .explorer {
    grid-template-columns: minmax(0, 1fr);
  }
  /* The business types wrap as chips so all of them stay in sight. */
  .explorer-tabs {
    position: static;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
  }
  .explorer-tab {
    width: auto;
    border: 1px solid var(--rule-strong);
    border-radius: 999px;
    padding: 0.45rem 0.9rem;
    font-size: var(--small);
  }
  .explorer-tab[aria-selected="true"] {
    background: var(--sign);
    color: var(--sign-ink);
    border-color: var(--sign-fg);
    box-shadow: none;
  }
  .explorer-tab[aria-selected="true"]::after {
    content: none;
  }
  .explorer-panel {
    padding: var(--space-5);
  }
}

/* ---------- Offers ---------- */

.offers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 21rem), 1fr));
  gap: var(--space-5);
  list-style: none;
}
/* Four offers would leave one card alone on a second row of three; show them two by two. */
@media (min-width: 68rem) {
  .offers:has(> :nth-child(4):last-child) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.offer {
  display: grid;
  grid-template-rows: auto auto auto 1fr auto;
  gap: var(--space-4);
  padding: var(--space-6) var(--space-5);
  border: 1px solid var(--rule);
  background: var(--paper);
  min-width: 0;
}
.offer > p:not(.offer-bucket) {
  color: var(--ink-2);
}
.offer-bucket {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--contour-ink);
}
.offer ul {
  list-style: none;
  display: grid;
  gap: var(--space-2);
  font-size: var(--small);
}
.offer ul li {
  display: grid;
  grid-template-columns: 1rem minmax(0, 1fr);
  gap: var(--space-2);
}
.offer ul li::before {
  content: "";
  width: 0.45rem;
  height: 0.45rem;
  margin-top: 0.55em;
  background: var(--sign-fg);
}
.offer-meta {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding-top: var(--space-4);
  border-top: 1px dashed var(--rule);
  font-size: 0.9rem;
  color: var(--ink-2);
}
.offer-meta dt {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--contour-ink);
}
.offer-meta dd {
  margin: 0 0 var(--space-2);
}
.offer > .more {
  border-top: 1px dashed var(--rule);
}
.offer > .more > .offer-meta {
  padding-top: 0;
  border-top: 0;
}

/* ---------- Path (a true sequence, so it is numbered) ---------- */

.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  gap: 0;
  list-style: none;
  counter-reset: step;
  border-top: 1px solid var(--ink);
}
.step {
  counter-increment: step;
  display: grid;
  gap: var(--space-3);
  align-content: start;
  padding: var(--space-5) var(--space-5) var(--space-5) 0;
  position: relative;
}
.step::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.08em;
  color: var(--sign-fg);
}
.step::after {
  content: "";
  position: absolute;
  top: -5px;
  left: 0;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--paper);
  border: 2px solid var(--ink);
}
.step p {
  color: var(--ink-2);
  font-size: var(--small);
}

/* The path is the same numbered sequence, with each step carrying what it includes and
   how long it takes (no prices anywhere on the site). Four across, two on tablets, one on phones. */
.steps--path {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 0;
}
/* Each step carries its own stretch of the line, so the rows below the first keep it. */
.steps--path > .step {
  border-top: 1px solid var(--ink);
}
@media (max-width: 64rem) {
  .steps--path {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 40rem) {
  .steps--path {
    grid-template-columns: minmax(0, 1fr);
  }
}
.path-step {
  grid-template-rows: auto auto auto 1fr auto;
}
.path-step h3 {
  font-size: var(--step-1);
}
/* The tag sits on the number's line so all four steps keep their rows level. */
.path-step > .path-start {
  position: absolute;
  top: calc(var(--space-5) - 0.15rem);
  left: 2.5rem;
  padding: 0.15rem 0.5rem;
  background: var(--sign);
  color: var(--sign-ink);
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.path-step .checklist {
  font-size: var(--small);
}
/* One term per step (Time). The step's 1fr checklist row holds it at the bottom of the card,
   so the dashed rules line up across a row. */
.path-terms {
  margin: 0;
  padding-top: var(--space-3);
  border-top: 1px dashed var(--rule);
}
.path-terms div {
  display: grid;
  gap: 0.2rem;
}
.path-terms dt {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--contour-ink);
}
.path-terms dd {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.path-cta {
  margin-top: var(--space-5);
}

/* The three numbers every build has to move. */
.buckets {
  display: grid;
  gap: var(--space-5);
  margin-top: var(--space-7);
  padding-top: var(--space-6);
  border-top: 2px solid var(--ink);
}
.buckets-head {
  display: grid;
  gap: var(--space-2);
  max-width: 42rem;
}
.buckets-head h3 {
  font-size: var(--step-2);
}
.buckets-head p {
  color: var(--ink-2);
}
.buckets-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
  list-style: none;
}
@media (max-width: 40rem) {
  .buckets-list {
    grid-template-columns: minmax(0, 1fr);
  }
}
.buckets-list li {
  display: grid;
  gap: var(--space-2);
  align-content: start;
  padding: var(--space-4) var(--space-5);
  border-left: 3px solid var(--sign-fg);
  background: var(--paper-2);
}
.buckets-list h4 {
  font-size: var(--step-0);
}
.buckets-list p {
  color: var(--ink-2);
  font-size: var(--small);
}

/* ---------- Trust ladder ---------- */

.ladder {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 1rem + 4vw, 4rem);
  align-items: center;
}
@media (max-width: 56rem) {
  .ladder {
    grid-template-columns: minmax(0, 1fr);
  }
}
.ladder-stages {
  display: grid;
  gap: var(--space-2);
  list-style: none;
}
.ladder-stage {
  display: grid;
  grid-template-columns: 3.25rem minmax(0, 1fr);
  gap: var(--space-4);
  padding: var(--space-4);
  border: 1px solid var(--rule);
  background: var(--paper);
  text-align: left;
  color: inherit;
  font: inherit;
  width: 100%;
  cursor: default;
}
.js .ladder-stage {
  cursor: pointer;
}
.ladder-stage[aria-pressed="true"] {
  border-color: var(--sign-fg);
  box-shadow: inset 4px 0 0 var(--sign-fg);
}
.ladder-num {
  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: var(--radius);
  background: var(--paper-2);
  font-family: var(--font-display);
  font-weight: 850;
  font-size: 1.375rem;
  color: var(--ink-2);
}
.ladder-stage[aria-pressed="true"] .ladder-num {
  background: var(--sign);
  color: var(--sign-ink);
}
.ladder-body {
  display: grid;
  gap: var(--space-2);
  min-width: 0;
}
.ladder-name {
  font-family: var(--font-display);
  font-weight: 750;
  font-size: 1.125rem;
  line-height: 1.25;
}
.ladder-rule {
  color: var(--ink);
  font-size: var(--small);
}
.ladder-example {
  color: var(--ink-2);
  font-size: 0.9375rem;
}

/* The scope diagram: what widens is the target, not the capability. */
.scope {
  margin: 0;
  display: grid;
  gap: var(--space-4);
  min-width: 0;
}
.scope svg {
  width: 100%;
  height: auto;
  overflow: visible;
}
.scope-ring {
  fill: none;
  stroke: var(--rule);
  stroke-width: 1.5;
  stroke-dasharray: 6 6;
  transition: stroke 0.25s ease, fill 0.25s ease;
}
.scope-ring.is-on {
  stroke: var(--sign-fg);
  stroke-dasharray: none;
  fill: color-mix(in srgb, var(--sign-fg) 9%, transparent);
}
.scope-core {
  fill: var(--signal);
}
.scope-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  fill: var(--ink-3);
}
.scope-label.is-on {
  fill: var(--sign-fg);
}
.scope figcaption {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.04em;
  color: var(--ink-3);
}

/* ---------- Won't list ---------- */

.wont {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
  gap: var(--space-5) var(--space-6);
  list-style: none;
}
.wont li {
  display: grid;
  grid-template-columns: 1.6rem minmax(0, 1fr);
  gap: var(--space-3);
}
.wont li::before {
  content: "";
  width: 1.15rem;
  height: 1.15rem;
  margin-top: 0.2rem;
  border-radius: 50%;
  border: 2px solid var(--contour-ink);
  background: linear-gradient(45deg, transparent calc(50% - 1px), var(--contour-ink) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px));
}
.wont h3 {
  font-size: 1.125rem;
}
.wont p {
  margin-top: var(--space-1);
  color: var(--ink-2);
  font-size: var(--small);
}

/* ---------- Calculator ---------- */

.calc {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 0;
  border: 1px solid var(--rule);
  background: var(--paper);
  box-shadow: var(--shadow);
}
@media (max-width: 56rem) {
  .calc {
    grid-template-columns: minmax(0, 1fr);
  }
}
.calc-inputs {
  display: grid;
  gap: var(--space-6);
  padding: var(--space-6);
  min-width: 0;
}
.calc-field {
  display: grid;
  gap: var(--space-2);
}
.calc-field label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.0625rem;
  line-height: 1.3;
}
.calc-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 6.5rem;
  gap: var(--space-4);
  align-items: center;
}
.calc-row input[type="number"] {
  width: 100%;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  background: var(--paper-2);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
}
.calc-help {
  font-size: 0.875rem;
  color: var(--ink-3);
}
input[type="range"] {
  width: 100%;
  height: 24px; /* an easier thumb to catch on a phone */
  accent-color: var(--sign-fg);
}
.calc-out {
  display: grid;
  gap: var(--space-4);
  align-content: center;
  padding: var(--space-6);
  background: var(--console);
  color: var(--console-ink);
  min-width: 0;
}
.calc-big {
  font-family: var(--font-display);
  font-weight: 850;
  font-size: var(--step-3);
  line-height: 1.05;
  letter-spacing: -0.025em;
  font-variant-numeric: tabular-nums;
}
.calc-line {
  font-size: 1.0625rem;
  color: color-mix(in srgb, var(--console-ink) 85%, transparent);
}
.calc-half {
  padding-top: var(--space-4);
  border-top: 1px solid color-mix(in srgb, var(--console-ink) 22%, transparent);
  color: var(--console-accent);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step-1);
  line-height: 1.3;
}
.calc-note {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  color: color-mix(in srgb, var(--console-ink) 65%, transparent);
}

/* ---------- FAQ ---------- */

.faq {
  display: grid;
  max-width: 52rem;
  border-top: 1px solid var(--rule);
}
.faq details {
  border-bottom: 1px solid var(--rule);
}
.faq summary {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5) 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step-1);
  line-height: 1.3;
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker {
  display: none;
}
.faq summary::after {
  content: "+";
  content: "+" / "";
  font-family: var(--font-mono);
  font-weight: 400;
  color: var(--sign-fg);
  flex: none;
}
.faq details[open] summary::after {
  content: "\2212";
  content: "\2212" / "";
}
.faq .answer {
  padding: 0 0 var(--space-5);
  max-width: var(--measure);
  color: var(--ink-2);
}

/* ---------- Timeline (mile markers down a route) ---------- */

.route {
  list-style: none;
  display: grid;
  position: relative;
  max-width: 56rem;
}
.route::before {
  content: "";
  position: absolute;
  top: 0.5rem;
  bottom: 0.5rem;
  left: 4.6rem;
  width: 2px;
  background: repeating-linear-gradient(to bottom, var(--ink-3) 0 10px, transparent 10px 18px);
}
.route-stop {
  display: grid;
  grid-template-columns: 4rem minmax(0, 1fr);
  gap: var(--space-6);
  padding-bottom: var(--space-7);
  position: relative;
}
.route-stop:last-child {
  padding-bottom: 0;
}
.route-mark {
  justify-self: start;
  align-self: start;
  display: grid;
  place-items: center;
  min-width: 4rem;
  padding: 0.4rem 0.3rem 0.3rem;
  border-radius: 5px;
  background: var(--sign);
  color: var(--sign-ink);
  box-shadow: inset 0 0 0 2px var(--sign), inset 0 0 0 3px var(--sign-ink);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.9375rem;
  line-height: 1.05;
  text-align: center;
  position: relative;
  z-index: 1;
}
.route-body {
  display: grid;
  gap: var(--space-2);
  min-width: 0;
}
.route-org {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--step-2);
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.route-role {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--contour-ink);
}
.route-body p {
  color: var(--ink-2);
  max-width: var(--measure);
}
.route-body .route-lesson {
  margin-top: var(--space-2);
  padding-left: var(--space-4);
  border-left: 2px solid var(--signal);
  font-style: italic;
  color: var(--ink);
}
@media (max-width: 40rem) {
  /* Phones: the route runs down the left edge, clear of the text. */
  .route::before {
    left: 0.3rem;
  }
  .route-stop {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-3);
    padding-left: 1.5rem;
  }
}

/* ---------- Fold-aways ---------- */

/* Long passages fold behind this on phones. main.js opens them on wide screens and for print. */
.more > summary {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 2.75rem;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--sign-fg);
  cursor: pointer;
  list-style: none;
}
.more > summary::-webkit-details-marker {
  display: none;
}
.more > summary::after {
  content: "+";
  content: "+" / "";
  font-family: var(--font-mono);
  font-weight: 400;
}
.more[open] > summary::after {
  content: "\2212";
  content: "\2212" / "";
}
.more > summary + * {
  margin-top: 1em;
}
/* Room for the focus ring between the lead paragraph and the control. */
.prose + .more {
  margin-top: var(--space-2);
}
@media (min-width: 56.0625rem) {
  /* Once the script has opened a fold there is nothing to toggle up here. Without script the control stays. */
  .js .more[open] > summary {
    display: none;
  }
  /* The grid gap already spaces the folded fields under the lesson; the offer's rule does the same. */
  .case-main > .more[open] > summary + * {
    margin-top: 0;
  }
  .offer > .more[open] > summary + * {
    margin-top: var(--space-4);
  }
}

/* ---------- Case files ---------- */

.cases {
  display: grid;
  gap: var(--space-6);
  list-style: none;
}
.case {
  display: grid;
  grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
  gap: var(--space-6);
  padding: var(--space-6);
  border: 1px solid var(--rule);
  background: var(--paper);
}
@media (max-width: 56rem) {
  .case {
    grid-template-columns: minmax(0, 1fr);
    padding: var(--space-5);
  }
  /* Stacked, the numbers sit side by side instead of three rows deep. */
  .case-metrics {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 6.5rem), 1fr));
  }
}
.case-side {
  display: grid;
  gap: var(--space-4);
  align-content: start;
  min-width: 0;
}
.case-tag {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--contour-ink);
}
.case h3 {
  font-size: var(--step-2);
}
.case-metrics {
  display: grid;
  gap: var(--space-3);
  list-style: none;
}
.case-metrics li {
  display: grid;
  gap: 0.1rem;
}
.case-metrics strong {
  font-family: var(--font-display);
  font-weight: 850;
  font-size: var(--step-1);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--sign-fg);
}
.case-metrics span {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.case-fields {
  display: grid;
  grid-template-columns: 8.5rem minmax(0, 1fr);
  gap: var(--space-4) var(--space-5);
  margin: 0;
  min-width: 0;
}
.case-fields dt {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding-top: 0.3rem;
}
.case-fields dd {
  margin: 0;
  color: var(--ink-2);
}
.case-fields dd.case-lesson {
  color: var(--ink);
  font-style: italic;
}
.case-fields dd > p + p {
  margin-top: var(--space-3);
}
/* The lesson leads; problem, what I did and result follow, folded away on phones. */
.case-main {
  display: grid;
  gap: var(--space-4);
  align-content: start;
  min-width: 0;
}
@media (max-width: 40rem) {
  .case-fields {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-1);
  }
  .case-fields dd {
    margin-bottom: var(--space-3);
  }
}

/* ---------- Toolbox ---------- */

.toolbox {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: var(--space-6) var(--space-5);
  list-style: none;
}
.toolbox h3 {
  font-size: 1rem;
  font-family: var(--font-mono);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--contour-ink);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--rule);
  margin-bottom: var(--space-3);
}
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  list-style: none;
}
.chips li {
  padding: 0.2rem 0.55rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius-s);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--ink-2);
  background: var(--paper);
}
.chips--lg li {
  font-size: 1rem;
  padding: 0.35rem 0.75rem;
}
/* The Morning Stack feature's point list, set as a panel. */
.feature-points {
  align-self: center;
  padding: var(--space-6);
  border: 1px solid var(--rule);
  background: var(--paper-2);
}

/* ---------- Principles ---------- */

.toc {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  list-style: none;
  margin-top: var(--space-6);
}
.toc a {
  display: inline-block;
  padding: 0.35rem 0.75rem;
  border: 1px solid var(--rule-strong);
  border-radius: 999px;
  font-family: var(--font-display);
  font-weight: 650;
  font-size: 0.9375rem;
  color: var(--ink-2);
  text-decoration: none;
  background: var(--paper);
}
.toc a:hover {
  color: var(--ink);
  border-color: var(--ink-3);
}
.notes {
  display: grid;
  list-style: none;
}
.note {
  display: grid;
  grid-template-columns: minmax(0, 18rem) minmax(0, 1fr);
  gap: var(--space-6);
  padding-block: var(--space-7);
  border-top: 1px solid var(--rule);
}
.note:first-child {
  border-top: 0;
  padding-top: 0;
}
@media (max-width: 56rem) {
  .note {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
  }
}
.note h2 {
  font-size: var(--step-2);
}
.note .prose {
  color: var(--ink-2);
}
.note blockquote {
  margin: var(--space-5) 0 0;
  padding: var(--space-4) var(--space-5);
  border-left: 3px solid var(--sign-fg);
  background: var(--paper-2);
  font-family: var(--font-display);
  font-weight: 650;
  font-size: 1.125rem;
  line-height: 1.4;
  color: var(--ink);
}

/* ---------- Now / colophon ---------- */

.now-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: var(--space-6);
  list-style: none;
}
.now-grid h2 {
  font-size: var(--step-1);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 2px solid var(--ink);
}
.now-grid ul {
  list-style: none;
  display: grid;
  gap: var(--space-3);
}
.now-grid li li {
  display: grid;
  grid-template-columns: 1rem minmax(0, 1fr);
  gap: var(--space-2);
  color: var(--ink-2);
}
.now-grid li li::before {
  content: "\2192";
  font-family: var(--font-mono);
  color: var(--sign-fg);
}
.stamp {
  display: inline-flex;
  gap: var(--space-2);
  padding: 0.3rem 0.6rem;
  border: 1px solid var(--contour);
  border-radius: var(--radius-s);
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--contour-ink);
  justify-self: start;
}
.colophon-list {
  display: grid;
  gap: var(--space-7);
  list-style: none;
  max-width: 48rem;
}
.colophon-list h2 {
  font-size: var(--step-2);
  margin-bottom: var(--space-4);
}
.colophon-list .prose {
  color: var(--ink-2);
}

/* ---------- 404 ---------- */

.lost {
  min-height: 60vh;
  display: grid;
  align-content: center;
  gap: var(--space-5);
}
.lost-code {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.12em;
  color: var(--contour-ink);
}

/* ---------- Scroll-linked arrival (from a visible resting state) ---------- */

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .arrive {
      animation: arrive linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 55%;
      animation-range: entry 0% entry min(55%, 16rem);
    }
    @keyframes arrive {
      from {
        opacity: 0.35;
        transform: translateY(18px);
      }
      to {
        opacity: 1;
        transform: none;
      }
    }
  }
}

/* ---------- Fit ---------- */

.fit {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5);
}
@media (max-width: 40rem) {
  .fit {
    grid-template-columns: minmax(0, 1fr);
  }
}
.fit-col {
  padding: var(--space-6) var(--space-5);
  background: var(--paper);
  border-top: 3px solid var(--sign-fg);
  min-width: 0;
}
.fit-col--bad {
  border-top-color: var(--contour);
}
.fit-col h3 {
  margin-bottom: var(--space-4);
}
.fit-col ul {
  list-style: none;
  display: grid;
  gap: var(--space-3);
}
.fit-col li {
  display: grid;
  grid-template-columns: 1.25rem minmax(0, 1fr);
  gap: var(--space-2);
  color: var(--ink-2);
}
.fit-col--good li::before {
  content: "+";
  font-family: var(--font-mono);
  color: var(--sign-fg);
  font-weight: 600;
}
.fit-col--bad li::before {
  content: "\2212";
  font-family: var(--font-mono);
  color: var(--contour-ink);
  font-weight: 600;
}

/* ---------- Résumé ---------- */

.resume {
  padding-block: var(--space-8);
  max-width: calc(52rem + var(--gutter-l) + var(--gutter-r));
  display: grid;
  gap: var(--space-7);
}
.resume-head {
  display: grid;
  gap: var(--space-3);
  padding-bottom: var(--space-6);
  border-bottom: 2px solid var(--ink);
}
.resume-head h1 {
  font-size: var(--step-3);
}
.resume-headline {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step-1);
  color: var(--sign-fg);
}
.resume-location,
.resume-note {
  color: var(--ink-3);
  text-transform: uppercase;
}
.resume-summary {
  color: var(--ink-2);
  max-width: var(--measure);
}
.resume-section {
  display: grid;
  gap: var(--space-5);
}
.resume-section > h2 {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--step--1);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--contour-ink);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--rule);
}
.resume-entry {
  display: grid;
  gap: var(--space-2);
}
.resume-entry-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-2) var(--space-4);
}
.resume-entry-head h3 {
  font-size: var(--step-1);
}
.resume-role {
  font-family: var(--font-display);
  font-weight: 650;
  color: var(--ink-2);
}
.resume-place {
  font-weight: 400;
  color: var(--ink-3);
}
.resume-entry ul {
  display: grid;
  gap: var(--space-2);
  padding-left: 1.1rem;
  color: var(--ink-2);
  max-width: 46rem;
}
.resume-skills {
  display: grid;
  grid-template-columns: minmax(0, 12rem) minmax(0, 1fr);
  gap: var(--space-3) var(--space-5);
  margin: 0;
}
.resume-skills dt {
  font-family: var(--font-display);
  font-weight: 700;
}
.resume-skills dd {
  margin: 0;
  color: var(--ink-2);
}
@media (max-width: 40rem) {
  .resume-skills {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-1);
  }
  .resume-skills dd {
    margin-bottom: var(--space-3);
  }
}
/* ---------- Page-specific photo placements ---------- */
/* Kept last on purpose: they adjust .split and .portrait for one page each. */

.invite .split {
  align-items: center;
}
.invite .section-head {
  margin-bottom: 0;
}
.hiring-side .portrait {
  max-width: 20rem;
  margin-bottom: var(--space-5);
}

/* ---------- Forced colors (Windows High Contrast and friends) ---------- */
/* Shadows and background fills are dropped when colors are forced, so every
   state they carry gets a system-color outline or border here instead. */
@media (forced-colors: active) {
  .btn,
  .header-cta {
    border: 2px solid ButtonText;
  }
  .site-nav a[aria-current="page"] {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 0.3em;
  }
  .palette input:focus-visible,
  .palette-item[aria-selected="true"] {
    outline: 2px solid Highlight;
    outline-offset: -2px;
  }
  .explorer-tab[aria-selected="true"],
  .ladder-stage[aria-pressed="true"],
  .audience button[aria-pressed="true"] {
    outline: 3px solid Highlight;
    outline-offset: -3px;
  }
  /* Small marks drawn with backgrounds: paint them in the text color. */
  .offer ul li::before,
  .status-live::before {
    forced-color-adjust: none;
    background: CanvasText;
  }
  .checklist li::before {
    forced-color-adjust: none;
    border-color: CanvasText;
    background: linear-gradient(CanvasText, CanvasText) center / 0.3rem 0.3rem no-repeat;
  }
  .route::before,
  .wont li::before {
    forced-color-adjust: none;
  }
  .route::before {
    background: repeating-linear-gradient(to bottom, CanvasText 0 10px, transparent 10px 18px);
  }
  .wont li::before {
    border-color: CanvasText;
    background: linear-gradient(45deg, transparent calc(50% - 1px), CanvasText calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px));
  }
  .readout li {
    outline: 1px solid CanvasText;
    outline-offset: -1px;
  }
  .route-mark {
    border: 1px solid CanvasText;
  }
  .theme-glyph {
    forced-color-adjust: none;
    border-color: ButtonText;
    background: linear-gradient(90deg, ButtonText 50%, transparent 50%);
  }
  :root[data-theme="light"] .theme-glyph {
    background: transparent;
  }
  :root[data-theme="dark"] .theme-glyph {
    background: ButtonText;
  }
}

/* ---------- Print ---------- */
/* Background fills do not print, so anything set light-on-fill turns black. */
@media print {
  .statusbar,
  .site-header,
  .contact,
  .palette,
  .map-sheet,
  .explorer-tabs,
  .calc-inputs,
  .resume-note,
  .site-footer,
  .audience,
  .more[open] > summary {
    display: none !important;
  }
  body {
    background: #fff;
    color: #000;
  }
  .calc-out,
  .btn-sign,
  .route-mark,
  .ladder-num,
  .path-start {
    background: none !important;
    color: #000 !important;
    box-shadow: none !important;
    border: 1px solid #000;
  }
  .calc-line,
  .calc-half,
  .calc-note {
    color: #000 !important;
  }
  .calc-half {
    border-top-color: #000;
  }
  /* With the tabs and the inputs gone, their columns go too. */
  .explorer,
  .calc {
    grid-template-columns: minmax(0, 1fr);
  }
  /* Every business type prints, not only the one on screen. */
  .explorer-panel[hidden] {
    display: grid !important;
  }
  .explorer-panel + .explorer-panel {
    margin-top: var(--space-5);
  }
  .arrive {
    animation: none;
  }
  .resume {
    padding-block: 0;
    gap: 1.25rem;
  }
  .resume-headline {
    color: #000;
  }
}

/* ---------- Working demos ---------- */
/* The missed-calls demo (pages/demo-calls.mjs, js/calls-demo.js). The page carries every
   version of every step; the options that are on sit in .calls[data-on] and the end of this
   file hides whatever they rule out. Without script the panels read in order in the all-on
   setup; .is-enhanced adds the controls, tabs and playback. */

.demo-back {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.04em;
}
.demo-back a {
  display: inline-flex;
  gap: var(--space-2);
  padding-block: 0.35rem;
  color: var(--ink-2);
}
.demo-notice {
  max-width: 40rem;
  padding: var(--space-3) var(--space-4);
  border-left: 3px solid var(--signal);
  background: var(--paper);
  color: var(--ink-2);
  font-size: var(--small);
}

.calls {
  --calls-sticky: calc(4.5rem + env(safe-area-inset-top, 0px)); /* under the site header */
  display: grid;
  gap: var(--space-6);
}
.calls .btn-small {
  min-height: 2.5rem;
  padding: 0.45rem 1rem 0.4rem;
  font-size: 1rem;
}
.calls .tool-btn:disabled {
  opacity: 0.55;
  cursor: default;
}

/* Panels: the options, then the three steps */
.calls-setup,
.calls-panel {
  display: grid;
  gap: var(--space-5);
  padding: var(--space-6);
  border: 1px solid var(--rule);
  background: var(--paper);
  box-shadow: var(--shadow);
  min-width: 0;
}
.calls-panel:focus {
  outline: none;
}
.calls-setup-head,
.calls-panel-head {
  display: grid;
  gap: var(--space-3);
  max-width: 42rem;
}
.calls-setup-head h2,
.calls-panel-head h2 {
  font-size: var(--step-2);
}
.calls-setup-head p,
.calls-panel-head p {
  color: var(--ink-2);
}
@media (max-width: 40rem) {
  .calls-setup,
  .calls-panel {
    padding: var(--space-5) var(--space-4);
  }
}

/* Small mono labels: option groups, the tag key, the calendar, the folds */
.calls-group-label,
.calls-legend-head,
.calls-cal-head,
.calls-fold > summary {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--contour-ink);
}

/* ---------- Pick your fix ---------- */
.calls-group {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.calls-group-label {
  margin-bottom: var(--space-3);
  padding: 0;
}
.calls-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: var(--space-3);
}
.calls-options--catch {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
}
.calls-option {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "text control"
    "tags tags";
  gap: var(--space-2) var(--space-3);
  align-content: start;
  padding: var(--space-4);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  background: var(--paper-2);
}
.calls-option-input {
  grid-area: control;
}
.calls-option-text {
  grid-area: text;
  display: grid;
  gap: var(--space-1);
  min-width: 0;
}
.calls-option-tags {
  grid-area: tags;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}
.calls-option-name {
  font-family: var(--font-display);
  font-weight: 750;
  font-size: 1.0625rem;
  line-height: 1.25;
}
.calls-option-note {
  font-size: var(--small);
  line-height: 1.45;
  color: var(--ink-2);
}
/* The whole card is the control's label once the control is there. */
.calls.is-enhanced .calls-option-name::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  cursor: pointer;
}
.calls-option:has(.calls-option-input:checked) {
  border-color: var(--sign-fg);
  background: color-mix(in srgb, var(--sign-fg) 7%, var(--paper-2));
  box-shadow: inset 0 0 0 1px var(--sign-fg);
}
.calls-option:has(.calls-option-input:focus-visible) {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}
@supports selector(:has(a)) {
  .calls-option-input:focus-visible {
    outline: none;
  }
}
.calls-option-input[type="radio"] {
  appearance: none;
  position: relative;
  width: 1.5rem;
  height: 1.5rem;
  margin: 0;
  border: 1.5px solid var(--rule-strong);
  border-radius: 50%;
  background: var(--paper);
}
.calls-option-input[type="radio"]:checked {
  border-color: var(--sign-fg);
}
.calls-option-input[type="radio"]:checked::before {
  content: "";
  position: absolute;
  inset: 0.25rem;
  border-radius: 50%;
  background: var(--sign-fg);
}
.calls-always {
  max-width: 44rem;
  font-size: var(--small);
  color: var(--ink-2);
}
.calls-always > .tag {
  margin-right: var(--space-2);
  vertical-align: 0.1em;
}
.calls-setup-foot {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: var(--space-5) var(--space-7);
  align-items: start;
  padding-top: var(--space-4);
  border-top: 1px solid var(--rule);
}
@media (max-width: 56rem) {
  .calls-setup-foot {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* On/off switches: the options and the sick-day control. */
.calls input[role="switch"] {
  appearance: none;
  flex: none;
  position: relative;
  width: 2.9rem;
  height: 1.6rem;
  margin: 0;
  border: 1.5px solid var(--rule-strong);
  border-radius: 999px;
  background: var(--paper-3);
  cursor: pointer;
}
.calls input[role="switch"]::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0.2rem;
  width: 1.05rem;
  height: 1.05rem;
  border-radius: 50%;
  background: var(--ink-3);
  transform: translateY(-50%);
}
.calls input[role="switch"]:checked {
  border-color: var(--contour-ink);
  background: var(--signal);
}
.calls input[role="switch"]:checked::before {
  left: calc(100% - 1.25rem);
  background: var(--signal-ink);
}
@media (prefers-reduced-motion: no-preference) {
  .calls input[role="switch"]::before {
    transition: left 0.15s ease;
  }
}

/* Fold-aways: the assistant's script, the dispatch rules and each conversation. main.js
   opens them on wide screens and for print; the summary stays as their heading. */
.calls-fold > summary {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 2.75rem;
  list-style: none;
  cursor: pointer;
}
.calls-fold > summary::-webkit-details-marker {
  display: none;
}
.calls-fold > summary::after {
  content: "+";
  content: "+" / "";
}
.calls-fold[open] > summary::after {
  content: "\2212";
  content: "\2212" / "";
}
.calls-fold > summary + * {
  margin-top: var(--space-3);
}
.calls-rules ol,
.calls-script ol {
  display: grid;
  gap: var(--space-2);
  list-style: none;
  counter-reset: rule;
}
.calls-rules li,
.calls-script li {
  display: grid;
  grid-template-columns: 1.5rem minmax(0, 1fr);
  gap: var(--space-2);
  font-size: var(--small);
  color: var(--ink-2);
  counter-increment: rule;
}
.calls-rules li::before,
.calls-script li::before {
  content: counter(rule);
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--ink-3);
  padding-top: 0.15rem;
}

/* Business name and average job fields */
.calls-name,
.calls-ticket {
  display: grid;
  gap: var(--space-2);
  align-content: start;
}
.calls-name label,
.calls-ticket label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.0625rem;
  line-height: 1.3;
}
.calls-name input,
.calls-ticket input,
.job-editor textarea {
  width: 100%;
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-size: 1rem; /* 16px keeps iOS from zooming into the field */
}
.calls-name input::placeholder {
  color: var(--ink-3);
}
.calls-ticket input {
  max-width: 10rem;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}
.calls-hint {
  font-size: 0.875rem;
  color: var(--ink-3);
}

/* The tag key */
.calls-legend {
  display: grid;
  gap: var(--space-3);
}
.calls-legend dl {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
  gap: var(--space-2) var(--space-6);
  margin: 0;
}
.calls-legend dl > div {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr);
  gap: var(--space-3);
  align-items: baseline;
}
.calls-legend dt {
  margin: 0;
}
.calls-legend dd {
  margin: 0;
  font-size: var(--small);
  color: var(--ink-2);
}

/* The three tags: plain automation, AI, a person. Each carries its name as text, so color
   is never the only signal. */
.tag {
  display: inline-block;
  padding: 0.2rem 0.45rem 0.15rem;
  border: 1px solid;
  border-radius: var(--radius-s);
  font-family: var(--font-mono);
  font-size: var(--step--2);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}
.tag--automation {
  color: var(--sign-fg);
  border-color: color-mix(in srgb, var(--sign-fg) 50%, transparent);
  background: color-mix(in srgb, var(--sign-fg) 10%, transparent);
}
.tag--ai {
  color: var(--water);
  border-color: color-mix(in srgb, var(--water) 50%, transparent);
  background: color-mix(in srgb, var(--water) 10%, transparent);
}
.tag--person {
  color: var(--contour-ink);
  border-color: color-mix(in srgb, var(--signal) 70%, transparent);
  background: color-mix(in srgb, var(--signal) 16%, transparent);
}

/* Step tabs */
.calls-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
  list-style: none;
}
.calls-tab {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  height: 100%;
  min-height: 3rem;
  padding: 0.55rem 0.8rem;
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink-2);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--small);
  line-height: 1.2;
  text-decoration: none;
}
.calls-tab:hover {
  color: var(--ink);
  border-color: var(--ink-3);
}
.calls-tab[aria-selected="true"] {
  background: var(--sign);
  border-color: var(--sign-fg);
  color: var(--sign-ink);
}
.calls-tab-num {
  flex: none;
  display: grid;
  place-items: center;
  width: 1.6rem;
  height: 1.6rem;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  font-family: var(--font-mono);
  font-size: var(--step--1);
}
@media (max-width: 30rem) {
  .calls-tab {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-1);
    padding: 0.5rem 0.6rem;
  }
}

/* ---------- The night ---------- */
/* A sticky console bar with the clock, then the messages as they come in. */
.calls-player {
  --focus: var(--console-ink); /* the blue ring would vanish on the dark bar */
  position: sticky;
  top: var(--calls-sticky);
  z-index: 30;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius);
  background: var(--console);
  color: var(--console-ink);
}
.calls-clock {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
}
.calls-clock-label {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.7;
}
.calls-clock-time {
  font-family: var(--font-mono);
  font-size: var(--step-1);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--console-accent);
}
.calls-player-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.calls-player .tool-btn {
  color: var(--console-ink);
  border-color: color-mix(in srgb, var(--console-ink) 45%, transparent);
}
.calls-player .tool-btn:hover {
  border-color: var(--console-ink);
}

.night,
.calls-later {
  container-type: inline-size; /* each message sits beside what happened once there's room */
}
.night {
  display: grid;
  gap: var(--space-5);
  list-style: none;
}
.night-event {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr);
  gap: var(--space-4);
}
.night-time {
  padding-top: 0.1rem;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  font-variant-numeric: tabular-nums;
  color: var(--ink-3);
}
.night-body {
  display: grid;
  gap: var(--space-3);
  min-width: 0;
  padding-left: var(--space-4);
  border-left: 1px solid var(--rule);
}
.night-event--emergency .night-body {
  border-left: 3px solid var(--signal);
}
.night-said {
  display: grid;
  gap: var(--space-2);
  min-width: 0;
}
@container (min-width: 46rem) {
  .night-body {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: var(--space-5);
    align-items: start;
  }
}
.night-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-1) var(--space-3);
}
.night-channel {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--contour-ink);
}
.night-caller {
  font-family: var(--font-display);
  font-weight: 750;
}
.night-town {
  font-size: var(--small);
  color: var(--ink-3);
}
.night-message {
  margin: 0;
  font-style: italic;
  color: var(--ink-2);
}
.night-event--spam .night-message {
  color: var(--ink-3);
}
@media (max-width: 40rem) {
  .night-event {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-2);
  }
}

/* A call the assistant answered, as a transcript: who spoke, then what they said. */
.convo {
  display: grid;
  gap: var(--space-2);
  list-style: none;
}
.convo--call {
  padding: var(--space-3) var(--space-4);
  border-left: 2px solid var(--water);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: color-mix(in srgb, var(--water) 6%, var(--paper));
}
.convo--call .convo-line {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr);
  gap: var(--space-2);
  font-size: var(--small);
  line-height: 1.45;
}
.convo-who {
  padding-top: 0.15rem;
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  overflow-wrap: anywhere;
}
.convo-line--shop .convo-who {
  color: var(--water);
}
.convo-line--caller .convo-text {
  font-style: italic;
  color: var(--ink-2);
}
@container (max-width: 26rem) {
  .convo--call .convo-line {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }
}
/* A text conversation: the shop's texts on the right, the customer's on the left. */
.convo--text .convo-line {
  display: grid;
}
.convo-fold > summary {
  min-height: 2.5rem;
  color: var(--water);
}
.convo-fold > summary + * {
  margin-top: var(--space-1);
}

/* What the assistant took down, shown while its call is folded away. */
.calls-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  list-style: none;
}
.calls-chips li {
  padding: 0.1rem 0.45rem;
  border-radius: var(--radius-s);
  background: color-mix(in srgb, var(--water) 16%, transparent);
  font-size: var(--small);
  line-height: 1.4;
}
/* With the call open, its marked words say the same thing, so the step goes. */
.night-body:has(.night-said .convo-fold[open]) .calls-step:has(> .calls-chips) {
  display: none;
}

/* What the AI pulled out of each message or call. */
.night-message mark,
.convo mark {
  padding: 0 0.12em;
  border-radius: 2px;
  background: color-mix(in srgb, var(--water) 20%, transparent);
  color: var(--ink);
  font-style: normal;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* One labelled step: the tag, its caption, then whatever it produced. */
.calls-steps {
  display: grid;
  gap: var(--space-3);
  list-style: none;
}
.calls-step {
  display: grid;
  gap: var(--space-2);
  min-width: 0;
}
/* The tag leads the caption's first line, and the caption wraps under it like text. */
.calls-step-head > .tag {
  margin-right: var(--space-2);
  vertical-align: 0.1em;
}
.calls-step-caption {
  font-family: var(--font-display);
  font-weight: 650;
  font-size: var(--small);
  line-height: 1.3;
  color: var(--ink-2);
}
.calls-step-caption time {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  font-variant-numeric: tabular-nums;
}
.calls-step-note {
  font-size: var(--small);
  color: var(--ink-2);
}

/* A text message as a phone would show it: sent by the shop on the right, received
   (from a customer, or to the owner) on the left. */
.bubble {
  justify-self: end;
  max-width: min(30rem, 92%);
  padding: 0.6rem 0.85rem;
  border: 1.5px solid var(--sign);
  border-radius: 16px 16px 4px 16px;
  background: var(--sign);
  color: var(--sign-ink);
  font-size: var(--small);
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.bubble--in {
  justify-self: start;
  border-color: var(--rule-strong);
  border-radius: 16px 16px 16px 4px;
  background: var(--paper-2);
  color: var(--ink);
}

/* Playback (script only): messages, lines and steps appear as the clock reaches them.
   On screen only, so a printout has the whole night. */
@media screen {
  .calls.is-enhanced [data-night] > .night-event:not(.is-in),
  .calls.is-enhanced [data-night] .night-said .convo-line:not(.is-in),
  .calls.is-enhanced [data-night] .calls-steps > :not(.is-in),
  .calls.is-enhanced [data-night] .calls-steps .convo-line:not(.is-in) {
    display: none;
  }
  .calls.is-enhanced [data-night] > .night-event:not(.is-read) mark {
    background: transparent;
    color: inherit;
    font-style: inherit;
  }
}
.calls.is-enhanced:not([data-playback="done"]) [data-night-done] {
  display: none;
}
@media (prefers-reduced-motion: no-preference) {
  .calls.is-enhanced [data-night] .is-in {
    animation: calls-in 0.35s ease-out both;
  }
  .calls.is-enhanced [data-night] mark {
    transition: background-color 0.4s ease, color 0.4s ease;
  }
}
@keyframes calls-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
}

.calls-next {
  display: flex;
  justify-content: flex-end;
}

/* ---------- The morning ---------- */
/* The rules and controls beside the day, stacked on phones. */
.calls-board {
  display: grid;
  grid-template-columns: minmax(0, 17rem) minmax(0, 1fr);
  gap: var(--space-6);
  align-items: start;
}
@media (max-width: 56rem) {
  .calls-board {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
  }
}
.calls-side,
.calls-main {
  display: grid;
  gap: var(--space-5);
  min-width: 0;
}
@media (min-width: 56.0625rem) and (min-height: 52rem) {
  .calls-side {
    position: sticky;
    top: var(--calls-sticky);
  }
}
.calls-controls {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--paper-2);
}
.calls-switch {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 2.75rem;
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.25;
  cursor: pointer;
}
.calls-status {
  min-height: 1.4em;
  font-size: 0.875rem;
  color: var(--contour-ink);
}
.calls-approvals {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--rule);
}
.calls-progress {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  font-variant-numeric: tabular-nums;
}

/* The 7 AM text to the owner */
.calls-summary {
  display: grid;
  gap: var(--space-2);
  max-width: 34rem;
}

/* Today's calendar: people across, time windows down. */
.calls-cal {
  display: grid;
  gap: var(--space-3);
  min-width: 0;
}
.cal-scroll {
  overflow-x: auto;
}
.cal {
  width: 100%;
  min-width: 15rem;
  border-collapse: separate;
  border-spacing: 3px;
  table-layout: fixed;
  font-size: var(--small);
  line-height: 1.25;
}
.cal thead td {
  width: 4.75rem;
}
.cal th {
  text-align: left;
  font-weight: 400;
}
.cal thead th {
  padding: 0 0.45rem 0.25rem;
  font-family: var(--font-display);
  font-weight: 750;
  vertical-align: bottom;
}
.cal tbody th {
  padding: 0.45rem 0.3rem 0 0;
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.04em;
  color: var(--ink-3);
  vertical-align: top;
  white-space: nowrap;
}
.cal-out {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--step--2);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--contour-ink);
}
.cal-cell {
  height: 3.25rem;
  padding: 0.4rem 0.45rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius-s);
  background: var(--paper-2);
  vertical-align: top;
}
/* On a small phone the window labels wrap, which leaves each name room to break between
   words rather than inside one. */
@media (max-width: 30rem) {
  .cal {
    font-size: var(--step--1);
  }
  .cal thead td {
    width: 3.25rem;
  }
  .cal thead th {
    padding-inline: 0.3rem;
  }
  .cal tbody th {
    white-space: normal;
  }
  .cal-cell {
    padding-inline: 0.3rem;
  }
}
.cal-name,
.cal-note {
  display: block;
  overflow-wrap: break-word;
}
.cal-note {
  margin-top: 0.15rem;
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.04em;
  color: var(--contour-ink);
}
.cal-cell.is-open {
  border-style: dashed;
  background: transparent;
  color: var(--ink-3);
}
.cal-cell.is-earlier {
  background: var(--paper-3);
  color: var(--ink-3);
}
.cal-cell.is-job {
  border-color: color-mix(in srgb, var(--sign-fg) 45%, transparent);
  background: color-mix(in srgb, var(--sign-fg) 12%, var(--paper));
  color: var(--ink);
  font-weight: 650;
}
.cal-cell.is-waiting {
  border-style: dashed;
  border-color: var(--rule-strong);
  background: var(--paper);
}
.cal-cell.is-out {
  background: repeating-linear-gradient(135deg, var(--paper-2) 0 6px, var(--paper-3) 6px 12px);
}
.cal-tomorrow {
  font-size: var(--small);
  color: var(--ink-2);
}
.cal-tomorrow-label {
  margin-right: var(--space-1);
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--contour-ink);
}

.jobs {
  display: grid;
  gap: var(--space-4);
  list-style: none;
  min-width: 0;
  container-type: inline-size; /* the text moves beside the facts once there's room */
}
.job {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5) var(--space-5);
  border-top: 2px solid var(--sign-fg);
  background: var(--paper-2);
  min-width: 0;
}
@container (min-width: 40rem) {
  .job {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-5);
    align-items: start;
  }
}
@media (max-width: 40rem) {
  .job {
    padding: var(--space-4);
  }
}
.job-main,
.job-draft,
.job-review {
  display: grid;
  gap: var(--space-2);
  min-width: 0;
}
.job-facts {
  display: grid;
  gap: var(--space-2);
  margin-top: var(--space-1);
  list-style: none;
}
.calls-fact {
  font-size: var(--small);
  line-height: 1.45;
}
.calls-fact > .tag {
  margin-right: 0.3rem;
  vertical-align: 0.08em;
}
.job[data-tier="1"] {
  border-top-color: var(--signal);
}
.job-head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.job-rank {
  flex: none;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border: 1.5px solid var(--ink);
  border-radius: 50%;
  font-family: var(--font-mono);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.job-reason {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--contour-ink);
}
.job-name {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 var(--space-3);
  font-size: var(--step-1);
}
.job-town {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--small);
  color: var(--ink-3);
}
.job-source {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.06em;
  color: var(--ink-3);
}
.job-slot [data-slot] {
  font-weight: 650;
}
/* On a phone, a job that's booked and needs nothing shows only who, where and when; the
   night already showed what was said. */
@media (max-width: 40rem) {
  .job.is-confirmed .job-source,
  .job.is-confirmed .calls-fact:not(.calls-fact--slot) {
    display: none;
  }
}
.job-slot [data-person] {
  margin-left: 0.35rem;
  color: var(--ink-2);
}
.job-slot [data-person]::before {
  content: "\00B7  ";
  content: "\00B7  " / "";
  color: var(--ink-3);
}
.job.is-moved .job-slot [data-slot] {
  color: var(--contour-ink);
}
.job.is-moved .job-slot [data-slot]::before {
  content: "\21BB  ";
  content: "\21BB  " / "";
}

/* A drafted text waits with a dashed edge; once approved it fills in like a sent message. */
.job .bubble {
  border-style: dashed;
  border-color: var(--rule-strong);
  background: var(--paper);
  color: var(--ink);
}
.job.is-approved .bubble {
  border-style: solid;
  border-color: var(--sign);
  background: var(--sign);
  color: var(--sign-ink);
}
@media (prefers-reduced-motion: no-preference) {
  .job .bubble {
    transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
  }
}
.job-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-2);
}
.job-actions .tool-btn,
.calls [data-approve-all] {
  min-height: 2.5rem;
}
.job-booked,
.job-sent {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--sign-fg);
}
.job-sent {
  justify-self: end;
}
.job-booked::before,
.job-sent::before {
  content: "\2713  ";
  content: "\2713  " / "";
}
.job-sent:focus,
.calls-progress:focus {
  outline: none;
}
.job-editor {
  display: grid;
  gap: var(--space-2);
}
.job-editor textarea {
  font-family: var(--font-body);
  line-height: 1.45;
  resize: vertical;
}

/* Later that day: one call and the alert it sends. */
.calls-later {
  display: grid;
  gap: var(--space-4);
  padding-top: var(--space-5);
  border-top: 1px solid var(--rule);
}
.calls-later h3 {
  font-size: var(--step-1);
}

/* ---------- The tally ---------- */
.tally {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr));
  gap: var(--space-4);
  margin: 0;
}
.tally-item {
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-end;
  gap: var(--space-1);
  padding-top: var(--space-3);
  border-top: 1px solid var(--ink);
}
.tally-item dt {
  font-size: var(--small);
  line-height: 1.3;
  color: var(--ink-2);
}
.tally-item dd {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 850;
  font-size: var(--step-2);
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}
/* Your average job beside what the night is worth at that figure. */
.tally-money {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: var(--space-5);
  align-items: stretch;
}
@media (max-width: 40rem) {
  .tally-money {
    grid-template-columns: minmax(0, 1fr);
  }
}
.tally-value {
  display: grid;
  gap: var(--space-2);
  align-content: center;
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius);
  background: var(--console);
  color: var(--console-ink);
}
/* Without script the figure stands alone at the starting example. */
.calls-ticket[hidden] + .tally-value {
  grid-column: 1 / -1;
}
.tally-value-label {
  font-size: var(--small);
  color: color-mix(in srgb, var(--console-ink) 80%, transparent);
}
.tally-value-amount {
  font-family: var(--font-display);
  font-weight: 850;
  font-size: var(--step-3);
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--console-accent);
}
.tally-note {
  max-width: 42rem;
  color: var(--ink-2);
}
.tally-bucket {
  display: inline-flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sign-fg);
}
.tally-bucket::before {
  content: "";
  flex: none;
  width: 1.5rem;
  height: 1px;
  margin-top: 0.7em; /* level with the first line when the label wraps */
  background: currentColor;
}

/* How it runs in a real shop: the picker's use cards, as their own grid. */
.calls-how {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
}
.calls-how h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 750;
  font-size: 1.0625rem;
  line-height: 1.25;
}
.calls-honest {
  max-width: 44rem;
  margin-top: var(--space-6);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
  line-height: 1.6;
  color: var(--ink-3);
}

/* The picker panel's link to its demo. */
.panel-demo {
  padding-top: var(--space-2);
}

@media (forced-colors: active) {
  .tag,
  .calls-tab,
  .bubble,
  .calls-option,
  .calls input[role="switch"],
  .calls-option-input[type="radio"],
  .calls-player,
  .convo--call,
  .cal-cell {
    border: 1px solid CanvasText;
  }
  .calls-tab[aria-selected="true"],
  .calls-option:has(.calls-option-input:checked) {
    border-width: 3px;
  }
  .calls input[role="switch"]::before,
  .calls-option-input[type="radio"]:checked::before {
    background: CanvasText;
  }
  .calls input[role="switch"]:checked {
    background: Highlight;
  }
  .night-message mark,
  .convo mark {
    background: Mark;
    color: MarkText;
  }
  .job .bubble,
  .cal-cell.is-open,
  .cal-cell.is-waiting {
    border-style: dashed;
  }
  .job.is-approved .bubble {
    border-style: solid;
    border-width: 3px;
  }
}

@media print {
  .calls [data-enhanced],
  .calls-next,
  .job-actions {
    display: none !important;
  }
  .calls-panel[hidden] {
    display: grid !important;
  }
  .calls-setup,
  .calls-panel {
    box-shadow: none;
    break-inside: auto;
  }
  .calls-option,
  .night-event,
  .job,
  .cal {
    break-inside: avoid;
  }
  /* Fills don't print: texts and the dollar figure get a black edge on white instead. */
  .bubble,
  .job.is-approved .bubble,
  .tally-value {
    background: none !important;
    color: #000 !important;
    border: 1px solid #000;
    box-shadow: none;
  }
  .tally-value-amount,
  .tally-value-label,
  .job-booked,
  .job-sent,
  .calls-status,
  .calls-step-caption {
    color: #000 !important;
  }
  .night-message mark,
  .convo mark {
    background: none;
    color: #000;
    text-decoration: underline;
  }
}

/* ---------- The options at work ---------- */
/* Whatever the picked options rule out. Last in the file and !important so nothing above
   brings back a step that doesn't belong to this setup. The tokens are TOKENS in
   calls-plan.js. */
.calls:not([data-on~="answer"]) [data-if~="answer"],
.calls:not([data-on~="text"]) [data-if~="text"],
.calls:not([data-on~="book"]) [data-if~="book"],
.calls:not([data-on~="no-book"]) [data-if~="no-book"],
.calls:not([data-on~="calendar"]) [data-if~="calendar"],
.calls:not([data-on~="no-calendar"]) [data-if~="no-calendar"],
.calls:not([data-on~="summary"]) [data-if~="summary"],
.calls:not([data-on~="no-summary"]) [data-if~="no-summary"],
.calls:not([data-on~="alerts"]) [data-if~="alerts"],
.calls:not([data-on~="no-alerts"]) [data-if~="no-alerts"],
.calls:not([data-on~="repeat"]) [data-if~="repeat"],
.calls:not([data-on~="no-repeat"]) [data-if~="no-repeat"] {
  display: none !important;
}