/* ---------- Fonts (self-hosted, SIL OFL) ---------- */
@font-face {
  font-family: "Public Sans";
  src: url("../fonts/public-sans-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
/* Metric-matched stand-in (Arial-class faces) so text keeps its measure and the hero its height until the face arrives */
@font-face {
  font-family: "Public Sans Fallback";
  src: local("Arial"), local("Liberation Sans"), local("Helvetica Neue"), local("Roboto");
  size-adjust: 102%;
  ascent-override: 93%;
  descent-override: 22%;
  line-gap-override: 0%;
}

/* ---------- Tokens ---------- */
:root {
  --chrome: #0d3b42;
  --chrome-raised: #165560;
  --chrome-line: #357380;
  --on-chrome: #eef6f5;
  --on-chrome-muted: #b0cccb;
  --marigold: #f2b233;
  --on-marigold: #0d3b42;
  --rule: #cf8f17; /* the group rule on the light ground: marigold deepened to read at about 2.4:1 */

  --bg: #eef1f0;
  --line: #a4b3b0;
  --line-strong: #8a9b9e;
  --on-chrome-hover: #c3d7d4;
  --on-chrome-active: #b3cbc7;
  --on-chrome-visited: #cfdfdc; /* a Verify record already opened */
  --on-chrome-visited-pressed: #a5bfbb; /* a checked record pressed, one step past its hover */
  --text: #152326;
  --muted: #4c5e62;
  --link: #0b6572;

  /* Focus: a dark ring with a marigold halo, legible on every surface */
  --focus: #0d3b42;
  --focus-halo: #f2b233;

  --underhang: rgba(7, 26, 30, 0.2);
  --radius: 10px;
  --wrap: 1120px;
  --sans: "Public Sans", "Public Sans Fallback", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  color-scheme: light;
}

/* Night: the same world after dark. The page follows the visitor's system preference unless they
   chose a theme in the footer (data-theme); the two blocks carry the same values. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --chrome: #133a41;
    --chrome-raised: #1b4a53;
    --chrome-line: #427780;
    --on-chrome-muted: #a3d0cc;
    --bg: #0b1416;
    --line: #3a5056;
    --line-strong: #5f7a7e;
    --text: #e3eeec;
    --muted: #a0b6b5;
    --link: #74d0d8;
    --rule: #f2b233;
    --focus: #f2b233;
    --focus-halo: rgba(242, 178, 51, 0.35);
    --underhang: rgba(0, 0, 0, 0.55);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --chrome: #133a41;
  --chrome-raised: #1b4a53;
  --chrome-line: #427780;
  --on-chrome-muted: #a3d0cc;
  --bg: #0b1416;
  --line: #3a5056;
  --line-strong: #5f7a7e;
  --text: #e3eeec;
  --muted: #a0b6b5;
  --link: #74d0d8;
  --rule: #f2b233;
  --focus: #f2b233;
  --focus-halo: rgba(242, 178, 51, 0.35);
  --underhang: rgba(0, 0, 0, 0.55);
  color-scheme: dark;
}

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

/* The canvas below a short page continues the closing band instead of showing page ground */
html { scroll-behavior: smooth; scroll-padding-top: 24px; background: var(--chrome); }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 100%;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  scrollbar-color: var(--line-strong) var(--bg);
}

::selection { background: var(--marigold); color: var(--on-marigold); }

h1, h2, h3 { margin: 0; line-height: 1.15; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }

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

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  box-shadow: 0 0 0 7px var(--focus-halo);
  border-radius: 6px;
}
/* On the petrol band the ring flips to marigold so it stays visible */
.hero :focus-visible { outline-color: var(--marigold); box-shadow: 0 0 0 7px rgba(242, 178, 51, 0.3); }


.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding-inline: 24px; }

.sprite { position: absolute; }

.icon {
  width: 20px; height: 20px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.75;
  stroke-linecap: round; stroke-linejoin: round;
}

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


/* ---------- Band: banner + hero share one petrol field ---------- */
.hero {
  position: relative; overflow-x: clip; /* the squiggle's overhang never widens the page */
  background: var(--chrome);
  color: var(--on-chrome);
  padding-bottom: 56px;
  border-bottom: 1px solid var(--chrome-line);
}
.hero::after {
  content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 14px;
  pointer-events: none;
  background: linear-gradient(var(--underhang), transparent);
}

.hero-grid {
  display: grid;
  /* The panel gets the slightly wider column so each credential row stays on one line at desktop widths;
     the LinkedIn link is its own grid child so phones read name, proof, then contact */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  grid-template-areas: "intro creds" "link creds";
  grid-template-rows: auto 1fr; /* the panel's extra height falls below the link, so the name and the panel share a top edge */
  gap: 24px 48px;
  align-items: start;
  padding-top: 72px;
}

.intro { grid-area: intro; }
.creds { grid-area: creds; }
.hero-grid .hero-link { grid-area: link; justify-self: start; align-self: start; margin-top: 4px; } /* 28px under the fact; the panel may run lower */

.intro h1 {
  margin-top: -0.2em; /* pulls the cap height up to the panel's top edge beside it */
  font-size: clamp(2.6rem, 6vw, 4.6rem);
  font-weight: 750;
  letter-spacing: -0.035em;
}
.role { margin-top: 14px; font-size: 1.3rem; font-weight: 700; text-wrap: balance; }
.lead {
  margin-top: 22px; max-width: 26ch;
  font-size: 1.75rem; font-weight: 650; line-height: 1.32; letter-spacing: -0.02em;
  text-wrap: balance; /* no two-word last line at tablet widths */
}
/* A hand-drawn marigold squiggle under "plumbing", drawn in once on load */
.squiggle { position: relative; display: inline-block; white-space: nowrap; }
.squiggle svg {
  position: absolute; left: -2%; bottom: -0.12em; width: 104%; height: 0.32em;
  overflow: visible; pointer-events: none;
  fill: none; stroke: var(--marigold); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.squiggle path { stroke-dasharray: 140; stroke-dashoffset: 0; animation: squiggle-draw 0.9s var(--ease) 0.4s both; }
@keyframes squiggle-draw { from { stroke-dashoffset: 140; } }

.fact { margin-top: 14px; max-width: 46ch; font-size: 1.08rem; color: var(--on-chrome); } /* the page's one scale fact, at full strength so it ranks just under the tagline */

/* Credentials block */
.creds {
  background: var(--chrome-raised);
  border: 1px solid var(--chrome-line);
  border-radius: var(--radius);
  padding: 20px 20px 8px;
}
.creds h2 {
  display: flex; align-items: center; gap: 8px;
  font-size: 1.3rem; font-weight: 750; letter-spacing: -0.01em;
  hyphens: auto; overflow-wrap: anywhere; /* the one word may break at extreme text sizes rather than overflow */
}
.creds h2 .icon { width: 22px; height: 22px; }
.creds-note { margin-top: 6px; color: var(--on-chrome-muted); font-size: 0.92rem; text-wrap: pretty; }
/* After the two credentials, once both are on screen: which one ranks higher */
.creds-rank { margin: 0 0 12px; padding-top: 12px; border-top: 1px solid var(--chrome-line); color: var(--on-chrome-muted); font-size: 0.92rem; }
.creds ul { list-style: none; margin: 14px 0 0; padding: 0; }
/* Each credential: the badge beside its name, scope line and Verify button */
.cred {
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "badge name" "badge scope" "badge btn";
  gap: 0 18px; align-items: start;
  padding: 16px 0;
  border-top: 1px solid var(--chrome-line);
}
/* The badge is the credential itself, large enough for the wordmark and the level dots to read */
.cred-badge { grid-area: badge; display: block; width: 96px; height: 96px; object-fit: contain; }
.cred:not(:has(.cred-badge)) { grid-template-columns: minmax(0, 1fr); grid-template-areas: "name" "scope" "btn"; }
.cred-name { grid-area: name; font-size: 1rem; font-weight: 600; line-height: 1.3; letter-spacing: 0; text-wrap: pretty; hyphens: auto; overflow-wrap: anywhere; }
/* What each level certifies, in Okta's terms, so the two tiers need no prior knowledge */
.cred-scope { grid-area: scope; margin-top: 4px; font-size: 0.92rem; line-height: 1.45; color: var(--on-chrome); text-wrap: pretty; } /* full on-band text, above the muted note, so the scope reads as part of the credential, not fine print */
.cred .btn { grid-area: btn; justify-self: start; margin-top: 12px; }
/* Windows High Contrast flattens backgrounds: keep the badge art on its own light tile */
@media (forced-colors: active) {
  .cred-badge { forced-color-adjust: none; background: var(--on-chrome); border: 1px solid CanvasText; border-radius: 10px; padding: 3px; }
}

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 44px; padding: 0 14px; border-radius: 8px;
  border: 1px solid transparent; /* painted in forced-colors mode, so the primary stays a button there */
  background: var(--on-chrome); color: var(--chrome);
  font-weight: 650; font-size: 0.92rem; text-decoration: none; text-align: center;
  transition: background 0.2s var(--ease), transform 0.2s var(--ease);
}
/* :visited keeps the unvisited color's alpha, so the Verify edge is opaque (the fill's own color) at rest, 2px wide, and only its color changes */
.cred .btn { border: 2px solid var(--on-chrome); padding: 0 13px; }
.cred .btn:hover { border-color: var(--on-chrome-hover); }
.cred .btn:active { border-color: var(--on-chrome-active); }
.cred .btn:visited { background-color: var(--on-chrome-visited); border-color: var(--chrome-line); } /* a petrol edge and the check below mark a record already checked; marigold stays the focus color */
.btn .icon { width: 16px; height: 16px; stroke-width: 2; }
/* A checked record ticks its glyph's box: :visited may only recolor, so the arrow and a check (inside the box, clear of the arrow) are both drawn and the one that should not show is painted in the fill */
.cred .btn .icon { width: 18px; height: 18px; } /* a size up, so the check inside the box reads */
.cred .btn .icon path { transition: stroke 0.2s var(--ease); }
.cred .btn .g-done { stroke: var(--on-chrome); stroke-width: 2.5; } /* a heavier tick, so the box reads as checked */
.cred .btn:hover .g-done { stroke: var(--on-chrome-hover); }
.cred .btn:active .g-done { stroke: var(--on-chrome-active); }
.cred .btn:visited .g-arrow { stroke: var(--on-chrome-visited); }
.cred .btn:visited .g-done { stroke: var(--chrome); }
/* Hover and press still read on a checked record */
/* the checked fill is already one step down, so its hover and press each go one step further */
.cred .btn:visited:hover { background-color: var(--on-chrome-active); }
.cred .btn:visited:active { background-color: var(--on-chrome-visited-pressed); }
.cred .btn:visited:hover .g-arrow { stroke: var(--on-chrome-active); }
.cred .btn:visited:active .g-arrow { stroke: var(--on-chrome-visited-pressed); }
@media (forced-colors: active) { .cred .btn .g-done { display: none; } }

.btn-outline {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 44px; padding: 0 16px; border-radius: 8px; text-align: center;
  border: 1px solid var(--on-chrome-muted); color: var(--on-chrome);
  font-weight: 600; font-size: 0.95rem; text-decoration: none;
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease);
}
.btn-outline .icon { width: 16px; height: 16px; stroke-width: 2; }
/* A tint, never the primary's fill: the outline button stays visibly secondary on hover */
.btn-outline:hover { background: rgba(238, 246, 245, 0.2); border-color: var(--on-chrome); }
.btn-outline:active { background: rgba(238, 246, 245, 0.3); transform: translateY(1px); }
/* Hover darkens the fill a visible step; a press darkens again and settles 1px */
.btn:hover { background: var(--on-chrome-hover); color: var(--chrome); transform: translateY(-1px); }
.btn:active { background: var(--on-chrome-active); color: var(--chrome); transform: translateY(1px); }

/* ---------- Sections ---------- */
.section { padding-top: 64px; }
.section > h2 { font-size: 1.75rem; font-weight: 750; letter-spacing: -0.02em; }

/* About: the statement on the left, the aside in the space beside it */
.about-grid {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 16px 56px;
  align-items: start; margin-top: 16px;
}
.about-text { max-width: 52ch; font-size: 1.3rem; line-height: 1.5; }
.about-more { max-width: 46ch; padding-top: 5px; color: var(--text); }

.group {
  display: grid; gap: 24px 56px;
  padding: 32px 0;
  border-top: 1px solid var(--line);
}
/* The group head: the title across both columns, then the lede and the tools on the outcomes' own two columns, so every edge coincides and no cell runs empty */
.group-head { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 56px; align-items: start; }
.group-head h3 { grid-column: 1 / -1; }
.group-head .group-lede { grid-column: 1; }
.group-head .tools-row { grid-column: 2; align-self: start; }
.section > h2 + .group { margin-top: 20px; border-top: 0; padding-top: 12px; }
.group h3 { font-size: 1.3rem; font-weight: 750; letter-spacing: -0.01em; }
/* Drawn as a border so Windows High Contrast keeps it */
.group h3::before {
  content: ""; display: block; width: 32px; height: 0; margin-bottom: 14px;
  border-top: 4px solid var(--rule); border-radius: 2px;
}
.group-lede { margin-top: 0; color: var(--muted); max-width: 52ch; }

/* Each separator sits before its tool; the list is pulled left so the one
   starting each line is clipped, and no line starts or ends with a dot */
.tools-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-top: 0; }
.tools-label { flex: none; color: var(--muted); font-size: 0.95rem; font-weight: 600; }
.tools {
  list-style: none; margin: 0 0 0 -1.25em; padding: 0; max-width: 52ch; flex: 1 1 20ch; min-width: 0;
  clip-path: inset(0 0 0 1.25em); /* the pulled-left gutter is clipped, so a line-start separator never shows */
  color: var(--muted); font-size: 0.95rem;
  text-wrap: balance; /* inline items, so the two lines split evenly rather than leaving one name alone */
}
/* Names hold together via non-breaking spaces; the list may wrap, and a hanging indent keeps a wrapped
   item's continuation lines clear of the clipped gutter where line-start separators hide */
.tools li { display: inline-block; white-space: normal; padding-left: 1.25em; text-indent: -1.25em; }
.tools li::before { content: "·"; content: "·" / ""; display: inline-block; width: 1.25em; text-indent: 0; text-align: center; color: var(--muted); }
/* Each outcome is a label over a sentence; two abreast so the group's columns balance */
.outcomes { margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 56px; }
.outcomes dt { font-weight: 700; line-height: 1.5; margin-bottom: 2px; }
.outcomes dd { margin: 0; max-width: 56ch; text-wrap: pretty; }
.outcomes > .is-wide { grid-column: 1 / -1; } /* a single lead outcome takes the full row, so the pair beneath closes the grid evenly */
.outcomes > .is-wide dd { max-width: 56ch; } /* the outcomes' own measure */
/* Each group opens with its lead tier (the outcomes he led; in Devices, the zero-touch move across the full row): the whole first row a step up, closed by a hairline, so a skim lands on the strongest work first */
.outcomes .is-lead::after { content: ""; display: block; height: 0; margin-top: 28px; border-top: 1px solid var(--line); }
.outcomes .is-lead dt { font-size: 1.3rem; font-weight: 750; line-height: 1.3; letter-spacing: -0.01em; margin-bottom: 6px; }
.outcomes .is-lead dd { font-size: 1.06rem; } /* the label carries the rank; the sentence stays near body size, under the About statement */

/* ---------- Footer ---------- */
.band-end { background: var(--chrome); color: var(--on-chrome); border-top: 1px solid var(--chrome-line); }
.band-end :focus-visible { outline-color: var(--marigold); box-shadow: 0 0 0 7px rgba(242, 178, 51, 0.3); }
.end-body { padding-top: 48px; padding-bottom: 40px; }
.end-line { font-size: 1.3rem; font-weight: 600; margin-bottom: 18px; max-width: 32ch; text-wrap: balance; }
.end-meta p { text-wrap: balance; }
/* Each segment holds together and the separator belongs to the next one, so on phones the segments stack and no line starts with a dot */
.meta-seg { white-space: nowrap; }
.meta-seg + .meta-seg::before { content: " · "; white-space: pre; }
.end-meta {
  position: relative;
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px 24px;
  padding-top: 12px; padding-bottom: 24px;
  color: var(--on-chrome-muted); font-size: 0.9rem;
}
/* Theme choice: three radios styled as chips; hidden without JS, which is what applies the choice */
.theme { display: none; flex-wrap: wrap; align-items: center; gap: 6px; margin-left: -10px; } /* chips carry 10px side padding; the label is pushed back so wrapped rows align */
html.js .theme { display: flex; }
.theme-label { margin-left: 10px; margin-right: 6px; }
.theme-opt { position: relative; display: inline-flex; align-items: center; min-height: 44px; cursor: pointer; }
.theme-opt input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.theme-opt span {
  padding: 5px 10px; border-radius: 6px; border: 1px solid transparent;
  color: var(--on-chrome); font-weight: 500;
  transition: background 0.2s var(--ease);
}
.theme-opt input:hover + span { background: rgba(238, 246, 245, 0.12); }
.theme-opt input:checked + span { background: rgba(238, 246, 245, 0.16); border-color: var(--on-chrome-muted); }
.theme-opt input:focus-visible + span { outline: 3px solid var(--marigold); outline-offset: 2px; box-shadow: 0 0 0 7px rgba(242, 178, 51, 0.3); }
@media (forced-colors: active) {
  .theme-opt input:checked + span { border-color: CanvasText; text-decoration: underline; }
}
.end-meta::before {
  /* Rule spans the content width only, not the side padding */
  content: ""; position: absolute; top: 0; left: 24px; right: 24px; height: 1px;
  background: var(--chrome-line);
}

/* ---------- Toast (the sudo easter egg) ---------- */
.toast {
  position: fixed; left: 50%; bottom: max(80px, calc(env(safe-area-inset-bottom) + 16px)); z-index: 50; /* clears the footer meta row at the page bottom */
  width: max-content; max-width: calc(100% - 32px);
  padding: 12px 18px; border-radius: var(--radius);
  background: var(--chrome-raised); color: var(--on-chrome);
  border: 1px solid var(--on-chrome); /* a full-strength edge, no shadow, so the toast reads as a layer over the band */
  cursor: pointer;
  font-weight: 600; text-align: center;
  opacity: 0; visibility: hidden; transform: translate(-50%, 12px);
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease), visibility 0s linear 0.25s;
}
.toast.is-shown {
  opacity: 1; visibility: visible; transform: translate(-50%, 0);
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease), visibility 0s;
}
.toast-hint {
  display: inline-block; margin-left: 12px; padding: 0 6px; border-radius: 4px;
  border: 1px solid var(--on-chrome-muted); color: var(--on-chrome-muted);
  font-size: 0.75rem; line-height: 1.6; vertical-align: 1px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  /* Single columns are minmax(0, 1fr), so no item's minimum width can widen the track past the viewport */
  .hero-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "intro" "creds" "link"; grid-template-rows: auto; gap: 28px; padding-top: 56px; }
  .intro h1 { margin-top: 0; }
  .about-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .about-more { padding-top: 0; max-width: 62ch; }
  .group-head { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .group-head h3, .group-head .group-lede, .group-head .tools-row { grid-column: 1; }
  .tools-row { margin-top: 4px; }
}

@media (max-width: 640px) {
  .wrap { padding-inline: 16px; }
  .hero { padding-bottom: 28px; }
  .hero-grid { padding-top: 24px; gap: 16px; }
  .creds ul { margin-top: 10px; }
  .role { margin-top: 10px; font-size: 1.1rem; }
  .creds { padding: 14px 14px 4px; }
  .hero-grid .hero-link { justify-self: stretch; }
  .end-body .btn-outline { display: flex; }
  .cred { grid-template-areas: "badge name" "badge scope" "btn btn"; gap: 0 12px; padding: 10px 0; }
  .cred .btn { justify-self: stretch; margin-top: 10px; }
  .cred-badge { width: 72px; height: 72px; }
  .section { padding-top: 48px; }
  .section > h2 { font-size: 1.5rem; }
  .lead { font-size: 1.3rem; margin-top: 12px; }
  .fact { font-size: 1rem; margin-top: 10px; }
  .about-text { font-size: 1.15rem; }
  .outcomes { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .outcomes .is-lead dt { font-size: 1.15rem; }
  .outcomes .is-lead::after { content: none; } /* the phone hairlines already divide every outcome */
  /* A drawn hairline above each outcome after the first, so seven items read as seven */
  .outcomes div + div::before { content: ""; display: block; height: 0; border-top: 1px solid var(--line); margin-bottom: 12px; }
  .end-line { font-size: 1.15rem; }
  .toast-hint { display: none; }
  .end-meta::before { left: 16px; right: 16px; }
  .meta-seg { display: block; white-space: normal; }
  .meta-seg + .meta-seg::before { content: none; }
}

/* Narrow phones: a smaller badge keeps the credential name whole */
@media (max-width: 360px) {
  .cred-badge { width: 64px; height: 64px; }
}

/* ---------- 404 page: one petrol band, full height ---------- */
.lost-band { min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; padding-bottom: 0; border-bottom: 0; }
.lost-band::after { content: none; }
.lost-body { padding-block: 64px; }
.lost-body h1 { font-size: clamp(2.6rem, 6vw, 4.6rem); font-weight: 750; letter-spacing: -0.035em; }
.lost-code { color: var(--on-chrome-muted); }
.lost-code s { text-decoration-thickness: 2px; }
.lost-body .lead { max-width: 46ch; margin-top: 14px; font-size: 1.08rem; font-weight: 400; line-height: 1.5; letter-spacing: 0; color: var(--on-chrome-muted); } /* the diagnosis leads; the joke follows at fact size */
.lost-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.lost-path { margin-top: 18px; font-size: 1.08rem; font-weight: 400; line-height: 1.5; color: var(--on-chrome-muted); } /* the label and the hint are quiet; the path between them is the loud line */
.lost-path:empty { display: none; }
.lost-path code { display: block; margin-block: 2px; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 1.5rem; font-weight: 600; line-height: 1.3; hyphens: none; overflow-wrap: anywhere; color: var(--on-chrome); } /* the address on its own line at full measure, so it reads as an address; a long one breaks after a hyphen or slash, never before one */
.lost-hint { display: block; margin-top: 6px; } /* the advice is quieter than the diagnosis, so the failed path is the one loud line */
@media (max-width: 640px) { .lost-path { font-size: 1rem; } .lost-path code { font-size: 1.25rem; } .lost-body .lead { font-size: 1rem; } }
.lost-body .fact { max-width: 46ch; color: var(--on-chrome); text-wrap: balance; } /* the joke's measure, so the left column keeps one right edge */
@media (max-width: 640px) { .lost-actions > a { flex: 1 1 100%; } } /* one even stack on phones, like the homepage's buttons */