/* Atlas theme — "Surveyor's Orbit" (Direction E, 2026-09-29 Phase 1).
   Was "paper and ink; the map-maker's title block" (website-redesigns/mapandsky/design-01-atlas);
   Direction E's implementation plan (docs/superpowers/plans/2026-09-29-direction-e-implementation.md)
   replaces this theme's token block with its palette/type while keeping every existing custom
   property NAME already used across the ~2000 lines below (--paper, --ink, --hairline,
   --paper-tint, --water, --contour, --accent-dark, --radius, --shadow-plate, --shadow-thumb,
   --font-display, --font-body) so every already-built component (buttons, legend, plates, swatches,
   chips, breadcrumbs, night-band, city/cities/order/404/landing pages) re-themes automatically from
   this one block, with no per-component edits needed — exactly the "site stays one system" goal.
   --accent/--night/--star-white are kept as literal aliases of the new --red/--orbit/--star so nothing
   downstream needed renaming. Tokens without a Direction E equivalent (--paper-tint, --water,
   --contour, --accent-dark, --hairline*, --shadow-plate/--shadow-thumb, --radius) are DERIVED from
   the new palette rather than dropped — dropping them would silently blank the border/shadow/tint
   colour on every one of those existing components. Loaded only when settings['site.theme'] ===
   'atlas' (see layout.eta); restyles the shared chrome (header, footer, buttons, headings, tables,
   forms) and adds the home page's own Atlas-specific hero/section classes. */

:root[data-theme="atlas"] {
  /* ---- Direction E palette, named exactly as the implementation plan specifies ---- */
  --paper: #F2EEE3;
  --ink: #142238;
  --orbit: #071322; /* night/star surface */
  --red: #B03A2E; /* primary accent — 5.19:1 on --paper (AA for small text); was #C34437 (4.31:1, failed AA) */
  --brass: #CEB66A;
  --earth: #7EA6B5;
  --star: #F7F0DE;
  --mist: #DFE0D9;
  --white: #FFFDF6;
  --rule: rgba(20, 34, 56, 0.28); /* heavier hairline used for section dividers */
  --shadow: 0 26px 70px rgba(7, 19, 34, 0.28);
  --gutter: clamp(22px, 5.7vw, 88px);
  --ease: cubic-bezier(0.2, 0.75, 0.2, 1);
  /* Set by /js/theme-atlas.js on <html> as the landing page scrolls (Phase 2) — declared here so
     var(--parallax)/var(--orbit-progress) resolve to something sane before JS runs / under
     reduced motion (in which case the script never touches them and they stay at these values). */
  --parallax: 0px;
  --orbit-progress: 0%;

  /* ---- Aliases so every pre-existing rule below keeps working unchanged ---- */
  --accent: var(--red); /* was the standalone pin red; now literally the new --red */
  --accent-dark: #9E3025; /* a darker --red, same role as before (button :hover) */
  --night: var(--orbit); /* star surfaces — .plate--night, .night-band */
  --star-white: var(--star);
  --paper-tint: #EAE6D8; /* a subtle tint of the new --paper, same relationship as before */
  --water: var(--earth); /* old --water had no Direction E name; --earth is its closest sibling */
  --contour: var(--brass); /* old --contour (#C9B26B) and --brass (#CEB66A) are nearly identical */
  --hairline: rgba(20, 34, 56, 0.14); /* new --ink (20,34,56) at the old --hairline opacity */
  --hairline-strong: rgba(20, 34, 56, 0.25);
  --radius: 2px; /* buttons, inputs — never above 3px anywhere on this site (unchanged) */
  --shadow-plate: 0 20px 44px -14px rgba(20, 34, 56, 0.38), 0 3px 10px rgba(20, 34, 56, 0.16);
  --shadow-thumb: 0 6px 14px rgba(20, 34, 56, 0.14);

  /* ---- Type ---- */
  --font-display: Oswald, "Avenir Next Condensed", Futura, sans-serif;
  --font-body: Cormorant, Georgia, serif;
  --font-mono: SpaceMono, Menlo, monospace;
  --font-ui: Inter, system-ui, sans-serif;
}

/* ---------- Shared chrome: type ---------- */

:root[data-theme="atlas"] body {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.55;
}

:root[data-theme="atlas"] h1,
:root[data-theme="atlas"] h2,
:root[data-theme="atlas"] h3,
:root[data-theme="atlas"] .wordmark,
:root[data-theme="atlas"] .site-nav a,
:root[data-theme="atlas"] .btn,
:root[data-theme="atlas"] .step-number,
:root[data-theme="atlas"] .preview-label,
:root[data-theme="atlas"] th,
:root[data-theme="atlas"] .footer-word,
:root[data-theme="atlas"] label {
  font-family: var(--font-display);
}

:root[data-theme="atlas"] h1,
:root[data-theme="atlas"] h2,
:root[data-theme="atlas"] h3 {
  font-weight: 600;
  letter-spacing: -0.005em;
}

/* ---------- Shared chrome: header ----------
   Direction E's header markup (layout.eta, atlas branch only — admin and any non-atlas theme keep
   the original bare .wordmark/.site-nav header, see layout.eta) replaces the anchor's old plain
   `.wordmark` text with a brand mark ("M+S" in a bordered square) + wordmark + small provenance
   line, and adds a bordered "Open designer" `.nav-action` alongside the existing nav links. The
   old `.wordmark`/plain `.site-nav a` rules that styled the previous markup are superseded by
   `.brand`/`.brand-mark`/`.brand-word` below; they're harmless left in the shared type-family list
   above (nothing renders that class under atlas any more) but are not duplicated here. */

:root[data-theme="atlas"] .site-header {
  min-height: 88px;
  border-bottom: 1px solid var(--ink);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 24px;
  padding: 14px var(--gutter);
}

:root[data-theme="atlas"] .brand {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  text-decoration: none;
  color: var(--ink);
}

:root[data-theme="atlas"] .brand-mark {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  border: 1px solid currentColor;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 700 17px var(--font-display);
  letter-spacing: -1px;
  white-space: nowrap;
}

:root[data-theme="atlas"] .brand-mark span {
  color: var(--red);
  padding: 0 1px;
}

:root[data-theme="atlas"] .brand-word {
  min-width: 0;
}

:root[data-theme="atlas"] .brand-word strong {
  display: block;
  font: 22px var(--font-display);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.05;
}

:root[data-theme="atlas"] .brand-word small {
  display: block;
  margin-top: 5px;
  font: 11px var(--font-mono);
  letter-spacing: 0.03em;
  color: rgba(20, 34, 56, 0.72);
}

:root[data-theme="atlas"] .site-nav {
  align-items: center;
  gap: 28px;
  font: 11px var(--font-mono);
  text-transform: uppercase;
}

:root[data-theme="atlas"] .site-nav a {
  /* The shared "type" block above also matches `.site-nav a` directly (font-family: var(--font-
     display)) — a rule that targets an element directly always wins over an inherited value
     regardless of specificity, so `.site-nav`'s own `font: … var(--font-mono)` shorthand above
     would otherwise never reach these links. Re-declared here at equal selector specificity, so
     source order (this comes later) settles it in favour of the mono nav Direction E specifies. */
  font-family: var(--font-mono);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

:root[data-theme="atlas"] .site-nav a:not(.nav-action):hover {
  border-bottom-color: var(--red);
}

:root[data-theme="atlas"] .site-nav .nav-action {
  border: 1px solid var(--ink);
  padding: 0 16px;
  transition: background 0.16s ease, color 0.16s ease;
}

:root[data-theme="atlas"] .site-nav .nav-action:hover {
  background: var(--ink);
  color: var(--paper);
}

/* Text links collapse first (≤768px), keeping only the "Open designer" action; the header itself
   only shrinks at the narrower ≤640px breakpoint (brand mark + wordmark + action). */
@media (max-width: 768px) {
  :root[data-theme="atlas"] .site-nav a:not(.nav-action) {
    display: none;
  }
}

@media (max-width: 640px) {
  :root[data-theme="atlas"] .site-header {
    min-height: 70px;
    padding: 10px 18px;
  }

  :root[data-theme="atlas"] .brand-mark {
    width: 40px;
    height: 40px;
  }

  /* The brand-mark icon itself is 40px at this width, under the 44px touch-target floor; the
     .brand link's own box is what actually needs to be 44px tall (its padding/click area can
     exceed its visible 40px icon without changing how the icon looks). */
  :root[data-theme="atlas"] .brand {
    min-height: 44px;
  }

  :root[data-theme="atlas"] .brand-word strong {
    font-size: 18px;
  }

  :root[data-theme="atlas"] .brand-word small {
    display: none;
  }
}

:root[data-theme="atlas"] .announcement {
  background: var(--ink);
  color: var(--paper);
}

:root[data-theme="atlas"] .btn {
  border-radius: 2px;
  border: 1px solid var(--accent);
  letter-spacing: 0.02em;
  /* site.css's own `.btn` already sets this to `--paper`, but `.content a` below (needed for
     inline text links) outranks it once a `.btn` sits inside `.content` — see the `.content .btn`
     override further down, which is the half of this fix that actually wins the cascade. Kept
     here too so a `.btn` outside `.content` never depends on that override. */
  color: var(--paper);
}

:root[data-theme="atlas"] .btn:hover {
  background: var(--accent-dark);
  border-color: var(--accent-dark);
}

:root[data-theme="atlas"] .btn-secondary {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
}

:root[data-theme="atlas"] .btn-secondary:hover {
  background: var(--ink);
  color: var(--paper);
}

/* ---------- Shared chrome: footer ----------
   Direction E's footer markup (layout.eta, atlas branch only) wraps the brand mark, the map/star
   data-provenance line, and the existing link set into a 3-column grid on desktop (prototype
   composition), collapsing to one column on narrow viewports; the legal name stays a full-width
   line below, as before. `.footer-links`/`.footer-legal` are the pre-existing shared classnames
   (site.css) — only their colours are re-pointed here plus the new `.footer-grid`/`.footer-brand`/
   `.footer-credits`/`.footer-nav` wrapper classes. */

:root[data-theme="atlas"] .site-footer {
  background: var(--orbit);
  color: var(--star);
  border-top: none;
}

:root[data-theme="atlas"] .footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  align-items: start;
  gap: 28px;
  padding-block: 8px 24px;
}

@media (min-width: 640px) {
  :root[data-theme="atlas"] .footer-grid {
    grid-template-columns: repeat(3, 1fr);
    align-items: end;
    gap: 40px;
  }
}

:root[data-theme="atlas"] .footer-brand .brand-mark {
  color: var(--star);
  border-color: var(--star);
}

/* `.brand-mark span` (the logo's "+") sets colour directly on the span, which always wins over
   an ancestor rule regardless of specificity — left alone, the footer's "M+S" mark would keep the
   paper-only --red (2.34:1 on the footer's --orbit background) instead of following --star here. */
:root[data-theme="atlas"] .footer-brand .brand-mark span {
  color: var(--brass);
}

:root[data-theme="atlas"] .site-footer a {
  color: var(--star);
  text-decoration: underline;
  text-underline-offset: 3px;
}

:root[data-theme="atlas"] .site-footer a:hover {
  color: var(--brass);
}

:root[data-theme="atlas"] .footer-line {
  font-family: var(--font-body);
  color: var(--star);
  margin: 0;
  font-size: 15px;
}

:root[data-theme="atlas"] .footer-nav .footer-links {
  margin: 0;
}

:root[data-theme="atlas"] .footer-legal {
  font-family: var(--font-body);
  color: rgba(247, 240, 222, 0.72);
  border-top-color: rgba(247, 240, 222, 0.18);
}

/* Scoped to actual inline-text contexts (not a bare `.content a`) so this never outranks a
   `.btn`/`.btn-secondary` that happens to sit inside `.content` — e.g. the order page's Download
   button lives in a `<td>`, and a bare `.content a` rule was winning the cascade over `.btn`'s
   own color, rendering red button text on the red button background (the live bug). */
:root[data-theme="atlas"] .content p a,
:root[data-theme="atlas"] .content li a,
:root[data-theme="atlas"] .content td a,
:root[data-theme="atlas"] .content dd a,
:root[data-theme="atlas"] .card-link {
  color: var(--accent);
}

/* Belt-and-suspenders: even the scoped rules above (e.g. `.content td a`) have higher specificity
   than a bare `.content .btn` would need to beat them, since `.btn` links do land inside
   `<p>`/`<td>`/etc across content pages (order.eta's Download link is a `.btn` inside a `<td>`).
   This compound selector's extra class outranks every scoped content-link rule regardless of
   which tag wraps the button, which is what actually fixes the red-on-red bug end to end. */
:root[data-theme="atlas"] .content .btn {
  color: var(--paper);
}

:root[data-theme="atlas"] .content .btn-secondary {
  color: var(--ink);
}

:root[data-theme="atlas"] input[type="text"],
:root[data-theme="atlas"] input[type="email"],
:root[data-theme="atlas"] input[type="date"],
:root[data-theme="atlas"] input[type="time"],
:root[data-theme="atlas"] select {
  font-family: var(--font-body);
  border: 1px solid var(--hairline-strong);
  border-radius: 2px;
}

:root[data-theme="atlas"] table {
  font-family: var(--font-body);
}

:root[data-theme="atlas"] button,
:root[data-theme="atlas"] input,
:root[data-theme="atlas"] select,
:root[data-theme="atlas"] textarea {
  font: inherit;
}

:root[data-theme="atlas"] input[type="range"],
:root[data-theme="atlas"] input[type="checkbox"],
:root[data-theme="atlas"] input[type="radio"] {
  accent-color: var(--accent);
}

/* ---------- Focus & accessibility ---------- */

:root[data-theme="atlas"] :focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

/* The footer sits on the navy `--ink` surface, where an ink-coloured outline would disappear. */
:root[data-theme="atlas"] .site-footer :focus-visible {
  outline-color: var(--paper);
}

:root[data-theme="atlas"] .size-table caption,
:root[data-theme="atlas"] .size-table th {
  font-family: var(--font-display);
}

/* ---------- .title-block — bare max-width wrapper (46ch). The rest of the pre-redesign "Atlas
   hero" this used to sit inside (.atlas-hero, .place-line/.pin-icon/.city-label/.hero-coords,
   .chip-row, .hero-plate + its reveal animation) was deleted in Direction E's Phase 1 pass — 0
   references left in any .eta template. Its Phase 1 successor, the "Hybrid home" section, was
   itself deleted in Phase 2 (see the "Landing (Direction E)" section near the end of this file,
   which replaces it). This bare rule survives because 404.eta / city.eta / landing-map.eta /
   landing-star.eta all still use `.title-block` directly as their own hero's max-width wrapper.
   .scale-bar / .compass just below are the same story: still reused by those same pages' own
   .title-block__scale (see the Components section further down). ---------- */
:root[data-theme="atlas"] .title-block {
  max-width: 46ch;
}

:root[data-theme="atlas"] .scale-bar {
  display: flex;
  width: 130px;
  height: 8px;
  border: 1px solid var(--ink);
}

:root[data-theme="atlas"] .scale-bar span {
  flex: 1;
  background: var(--paper);
}

:root[data-theme="atlas"] .scale-bar span:nth-child(2n) {
  background: var(--ink);
}

:root[data-theme="atlas"] .compass {
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  display: flex;
  align-items: center;
  gap: 2px;
  font-family: var(--font-display);
}

:root[data-theme="atlas"] .price-seg {
  white-space: nowrap;
}

:root[data-theme="atlas"] .swap-target {
  transition: opacity 0.22s ease;
}

:root[data-theme="atlas"] .swap-target.is-loading {
  opacity: 0.35;
}

/* ---------- Six styles strip ---------- */

:root[data-theme="atlas"] .atlas-section {
  padding-block: 3rem;
  border-top: 1px solid var(--hairline);
  max-width: 1200px;
  margin-inline: auto;
}

/* .style-grid/.style-swatch/.badge-check (the "six styles strip") were deleted here in Direction
   E's Phase 1 pass — 0 references in any .eta template. .atlas-section above survives because
   home-atlas.eta's #pricing and #faq sections both use it directly. */

/* ---------- Legend / pricing table ---------- */

:root[data-theme="atlas"] .legend-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1.75rem;
}

:root[data-theme="atlas"] .legend-table th,
:root[data-theme="atlas"] .legend-table td {
  text-align: left;
  padding: 0.6rem 0.5rem;
  border-bottom: 1px solid var(--hairline);
  font-family: var(--font-body);
}

:root[data-theme="atlas"] .legend-table thead th {
  font-family: var(--font-display);
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--ink);
}

:root[data-theme="atlas"] .legend-table .group-row th {
  font-family: var(--font-display);
  padding-top: 1.2rem;
  border-bottom: 1px solid var(--hairline);
  font-weight: 700;
}

:root[data-theme="atlas"] .legend-table td:last-child,
:root[data-theme="atlas"] .legend-table th:last-child {
  text-align: right;
}

/* A group-row's `<th>` is often its row's only/last cell, so without this it inherits the
   `:last-child { text-align: right }` rule above meant for the price column — same specificity,
   so it must come after that rule to win. */
:root[data-theme="atlas"] .legend-table .group-row th {
  text-align: left;
}

:root[data-theme="atlas"] .price-notes {
  font-family: var(--font-body);
  padding-left: 1.1rem;
}

:root[data-theme="atlas"] .price-notes li {
  list-style: disc;
  margin-bottom: 0.4rem;
}

:root[data-theme="atlas"] .price-notes li::marker {
  color: var(--contour);
}

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

:root[data-theme="atlas"] .atlas-faq-list {
  max-width: 68ch;
}

:root[data-theme="atlas"] .atlas-faq-item {
  border-bottom: 1px solid var(--hairline);
}

:root[data-theme="atlas"] .atlas-faq-item summary {
  cursor: pointer;
  list-style: none;
  padding: 1rem 0;
  font-weight: 600;
  font-size: 1.05rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  font-family: var(--font-display);
}

:root[data-theme="atlas"] .atlas-faq-item summary::-webkit-details-marker {
  display: none;
}

:root[data-theme="atlas"] .atlas-faq-item summary::after {
  content: "+";
  font-size: 1.2rem;
  flex-shrink: 0;
}

:root[data-theme="atlas"] .atlas-faq-item[open] summary::after {
  content: "\2212";
}

:root[data-theme="atlas"] .atlas-faq-item p {
  font-family: var(--font-body);
  margin: 0 0 1.1rem;
  max-width: 60ch;
}

/* ---------- How it works (shared classnames from site.css) ---------- */

:root[data-theme="atlas"] .how-it-works {
  border-top: 1px solid var(--hairline);
  padding-top: 3rem;
  max-width: 1200px;
  margin-inline: auto;
  text-align: left;
}

:root[data-theme="atlas"] .how-it-works .steps {
  text-align: left;
}

:root[data-theme="atlas"] .step-number {
  border-radius: 50%;
  background: var(--ink);
  color: var(--paper);
}

/* .star-section/.star-grid/.star-plate/.star-caption/.star-copy (the old "star cross-sell"
   section) and its paired .hero-plate reduced-motion override were deleted here in Direction E's
   Phase 1 pass — 0 references in any .eta template (the old .hero-plate itself was removed above;
   city.eta's own star band uses .city-sky/.night-band instead, both defined further down and
   untouched). */

/* Designer island: the old-Atlas hardcoded `--accent: #B8322A` override here was removed —
   --accent already cascades correctly from the :root[data-theme="atlas"] token block above (now
   var(--red), #B03A2E); the hardcoded value would otherwise have kept the designer page on the
   OLD pre-Direction-E red while the rest of the site moved to the new palette. */

/* =====================================================================
   Order and error pages (redesign 2026-09, Task 6)
   Ported from website-redesigns/mapandsky/redesign-2026-09-28/order.html and
   not-found.html — the order status page (finalising / ready / printing /
   shipped), the download-expired reissue page, and the 404/500 chrome.
   Inserted here (immediately before the shared Components section below,
   rather than appended at the file's end) so it lands on a disjoint line
   range from Task 5's own end-of-file append and both merge cleanly. None
   of the selectors below are shared with the Components layer that
   follows, so where this block sits in the cascade doesn't matter —
   nothing above or below it is touched or renamed.
   ===================================================================== */

/* ---------- .small — muted secondary text (the order page's "A copy was
   emailed to…" / shipping line). No shared component covers plain muted
   body text at a smaller size. */
:root[data-theme="atlas"] .small {
  font-family: var(--font-body);
  font-size: 0.92rem;
  color: rgba(20, 34, 56, 0.72);
}

/* ---------- Order page ---------- */
:root[data-theme="atlas"] .order-page {
  max-width: 760px;
  padding-block: 2.25rem 4rem;
}

:root[data-theme="atlas"] .order-page h1 {
  margin: 0 0 1.15rem;
}

:root[data-theme="atlas"] .order-page > p {
  font-family: var(--font-body);
  margin: 0 0 1rem;
}

:root[data-theme="atlas"] .order-layout {
  display: grid;
  grid-template-columns: minmax(140px, 200px) 1fr;
  gap: 1.75rem;
  align-items: start;
  margin-bottom: 2rem;
}

@media (max-width: 640px) {
  :root[data-theme="atlas"] .order-layout {
    grid-template-columns: 1fr;
  }
}

:root[data-theme="atlas"] .order-layout__plate,
:root[data-theme="atlas"] .order-layout__body {
  min-width: 0;
}

:root[data-theme="atlas"] .order-layout__plate .plate {
  max-width: 200px;
}

:root[data-theme="atlas"] .order-layout__body p {
  font-family: var(--font-body);
  margin: 0 0 1rem;
}

/* ---------- .status-line — the three-step Paid/Rendered/Ready (digital) or
   Paid/Printing/Shipped (print) tracker. `.is-done`/`.is-current` set the
   dot, connector and label colour; everything else stays at 50% ink. */
:root[data-theme="atlas"] .status-line {
  display: flex;
  list-style: none;
  margin: 0 0 1.6rem;
  padding: 0;
}

:root[data-theme="atlas"] .status-line__step {
  flex: 1;
  position: relative;
  text-align: center;
  padding-top: 24px;
  font-family: var(--font-display);
  font-size: 0.85rem;
  color: rgba(20, 34, 56, 0.5);
}

:root[data-theme="atlas"] .status-line__step:not(:first-child)::before {
  content: "";
  position: absolute;
  top: 8px;
  left: -50%;
  width: 100%;
  height: 1px;
  background: var(--hairline-strong);
}

:root[data-theme="atlas"] .status-line__dot {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: var(--paper);
  border: 1px solid var(--hairline-strong);
}

:root[data-theme="atlas"] .status-line__step.is-done .status-line__dot,
:root[data-theme="atlas"] .status-line__step.is-current .status-line__dot {
  background: var(--ink);
  border-color: var(--ink);
}

:root[data-theme="atlas"] .status-line__step.is-current .status-line__dot {
  box-shadow: 0 0 0 4px rgba(20, 34, 56, 0.16);
}

:root[data-theme="atlas"] .status-line__step.is-done .status-line__label,
:root[data-theme="atlas"] .status-line__step.is-current .status-line__label {
  color: var(--ink);
}

:root[data-theme="atlas"] .status-line__step.is-current .status-line__label {
  font-weight: 600;
}

:root[data-theme="atlas"] .status-line__step.is-done:not(:first-child)::before,
:root[data-theme="atlas"] .status-line__step.is-current:not(:first-child)::before {
  background: var(--ink);
}

/* ---------- .progress-line — the finalising page's indeterminate sweep.
   Static (no motion, half-opacity) under reduced motion rather than just
   removed, so the page still reads as "something is happening". */
:root[data-theme="atlas"] .progress-line {
  position: relative;
  height: 2px;
  max-width: 320px;
  background: var(--hairline);
  overflow: hidden;
  margin: 0 0 1.5rem;
}

:root[data-theme="atlas"] .progress-line__bar {
  position: absolute;
  top: 0;
  left: -40%;
  height: 100%;
  width: 40%;
  background: var(--ink);
  animation: order-progress-sweep 1.4s ease-in-out infinite;
}

@keyframes order-progress-sweep {
  0% {
    left: -40%;
  }
  100% {
    left: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root[data-theme="atlas"] .progress-line__bar {
    animation: none;
    left: 0;
    width: 100%;
    opacity: 0.5;
  }
}

:root[data-theme="atlas"] .order-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 2.25rem;
  margin: 0 0 1.25rem;
}

:root[data-theme="atlas"] .order-meta div {
  margin: 0;
}

:root[data-theme="atlas"] .order-meta dt {
  font-family: var(--font-body);
  font-size: 0.92rem;
  color: rgba(20, 34, 56, 0.7);
  margin: 0 0 0.2rem;
}

:root[data-theme="atlas"] .order-meta dd {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--ink);
}

:root[data-theme="atlas"] .order-support {
  color: rgba(20, 34, 56, 0.82);
  font-family: var(--font-body);
}

:root[data-theme="atlas"] .order-support a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ---------- Download-expired / reissue page ---------- */
:root[data-theme="atlas"] .download-expired-page {
  max-width: 640px;
  padding-block: 2.25rem 4rem;
}

:root[data-theme="atlas"] .download-expired-page h1 {
  margin: 0 0 1rem;
}

:root[data-theme="atlas"] .download-expired-page > p {
  font-family: var(--font-body);
  max-width: 58ch;
  margin: 0 0 1.25rem;
}

:root[data-theme="atlas"] .reissue-form {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  max-width: 420px;
  margin: 0 0 1.5rem;
}

:root[data-theme="atlas"] .reissue-form .field {
  width: 100%;
}

/* ---------- 404 page ---------- */
:root[data-theme="atlas"] .notfound-page {
  max-width: 640px;
  padding-block: 2.75rem 4rem;
}

:root[data-theme="atlas"] .notfound-page .title-block {
  margin-bottom: 1.85rem;
}

:root[data-theme="atlas"] .notfound-page h1 {
  margin: 0 0 1rem;
}

:root[data-theme="atlas"] .notfound-page .lede {
  font-family: var(--font-body);
  max-width: 58ch;
  margin: 0 0 2rem;
}

:root[data-theme="atlas"] .button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-bottom: 2rem;
}

:root[data-theme="atlas"] .notfound-page .plate {
  max-width: 200px;
}

/* ---------- 500 page — same measure and button treatment as 404, no
   title-block (a server error isn't "nowhere", so it skips that joke). */
:root[data-theme="atlas"] .error-page {
  max-width: 640px;
  padding-block: 2.75rem 4rem;
}

:root[data-theme="atlas"] .error-page h1 {
  margin: 0 0 1rem;
}

:root[data-theme="atlas"] .error-page p {
  font-family: var(--font-body);
  max-width: 58ch;
  margin: 0 0 1.25rem;
}

/* =====================================================================
   Components (redesign 2026-09)
   Ported from website-redesigns/mapandsky/redesign-2026-09-28/shared/redesign.css
   ("Contents" section 7 there). These are additive, reusable pieces for the
   pages the redesign restyles next (city, landing, designer, order, cities
   index — Tasks 3-6); nothing above this heading is touched or renamed.
   ===================================================================== */

/* ---------- .title-block — pin + place name + coordinates + scale bar.
   `.title-block { max-width: 46ch }` already exists above (originally the home hero's wrapper;
   that hero's own markup was removed in Direction E's Phase 1 pass, but 404.eta/city.eta/
   landing-map.eta/landing-star.eta still use the bare `.title-block` class directly); these are
   its BEM-style parts, for a page that wants just the pin+name+coords+scale device. Reuses the
   existing .scale-bar/.compass rules verbatim (also still above, for the same reason).
   <div class="title-block">
     <div class="title-block__place"><svg class="title-block__pin">…</svg>
       <span class="title-block__name">Austin</span></div>
     <p class="title-block__coords">30.2672° N&nbsp;&nbsp;97.7431° W</p>
     <div class="title-block__scale"><span class="scale-bar">…</span>
       <span class="compass">…</span></div>
   </div> */
:root[data-theme="atlas"] .title-block__place {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.35rem;
}

:root[data-theme="atlas"] .title-block__pin path {
  fill: var(--accent);
}

:root[data-theme="atlas"] .title-block__pin circle {
  fill: var(--paper);
}

:root[data-theme="atlas"] .title-block__name {
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.07em;
  font-size: clamp(1.3rem, 1.05rem + 1vw, 1.9rem);
  color: var(--ink);
  font-family: var(--font-display);
}

:root[data-theme="atlas"] .title-block__coords {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.03em;
  font-size: 0.95rem;
  color: var(--ink);
  margin: 0 0 0.8rem;
  font-family: var(--font-display);
}

:root[data-theme="atlas"] .title-block__scale {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

/* ---------- .plate / .plate-caption — a poster image with the plate shadow,
   square corners, 3:4. Add .plate--night for star plates (navy background
   instead of paper while loading). .plate-caption goes directly under it.
   <div class="plate"><img src="…" alt="…" loading="lazy"></div>
   <p class="plate-caption">Classic style, Austin.</p> */
:root[data-theme="atlas"] .plate {
  position: relative;
  background: var(--paper-tint);
  box-shadow: var(--shadow-plate);
  border-radius: 0;
  overflow: hidden;
}

:root[data-theme="atlas"] .plate--night {
  background: var(--night);
}

:root[data-theme="atlas"] .plate img {
  width: 100%;
  height: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  display: block;
  background: inherit;
}

:root[data-theme="atlas"] .plate-caption {
  font-family: var(--font-body);
  font-size: 0.92rem;
  color: var(--ink);
  margin: 0.5rem 0 0;
}

:root[data-theme="atlas"] .plate-caption a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ---------- .legend — an alias of .legend-table above, so a new page can
   use either class name (and the mockup's tr.legend__group markup) and get
   byte-identical styling. Every .legend-table rule above is mirrored here
   rather than renamed, so the home page's existing markup is untouched. */
:root[data-theme="atlas"] .legend {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1.75rem;
}

:root[data-theme="atlas"] .legend th,
:root[data-theme="atlas"] .legend td {
  text-align: left;
  padding: 0.6rem 0.5rem;
  border-bottom: 1px solid var(--hairline);
  font-family: var(--font-body);
}

:root[data-theme="atlas"] .legend thead th {
  font-family: var(--font-display);
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--ink);
}

:root[data-theme="atlas"] .legend .group-row th,
:root[data-theme="atlas"] .legend tr.legend__group > th {
  font-family: var(--font-display);
  padding-top: 1.2rem;
  border-bottom: 1px solid var(--hairline);
  font-weight: 700;
}

:root[data-theme="atlas"] .legend td:last-child,
:root[data-theme="atlas"] .legend th:last-child {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Same last-child-vs-group-row ordering fix as .legend-table above: a
   group row's lone <th> also matches :last-child, so this must come after
   it to win back the left alignment. */
:root[data-theme="atlas"] .legend .group-row th,
:root[data-theme="atlas"] .legend tr.legend__group > th {
  text-align: left;
}

/* ---------- .swatches — a row of poster thumbnails (designer, style
   pickers on new pages). Distinct from the home hero's own .style-grid/
   .style-swatch above, which keeps its own name and behaviour.
   <div class="swatches" role="group" aria-label="Choose a map style">
     <button type="button" class="swatch" aria-pressed="true">
       <span class="swatch__frame"><img src="…" alt="…">
         <span class="swatch__check" aria-hidden="true">✓</span></span>
       <span class="swatch__label">Classic</span>
     </button>
   </div> */
:root[data-theme="atlas"] .swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

:root[data-theme="atlas"] .swatch {
  background: none;
  border: none;
  padding: 0;
  width: 84px;
  text-align: left;
  color: var(--ink);
}

@media (min-width: 700px) {
  :root[data-theme="atlas"] .swatch {
    width: 112px;
  }
}

:root[data-theme="atlas"] .swatch__frame {
  position: relative;
  display: block;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border: 1px solid var(--hairline-strong);
  box-shadow: var(--shadow-thumb);
  background: var(--paper-tint);
  transition: transform 0.15s ease;
}

:root[data-theme="atlas"] .swatch--night .swatch__frame {
  background: var(--night);
}

:root[data-theme="atlas"] .swatch img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

:root[data-theme="atlas"] .swatch__label {
  display: block;
  margin-top: 0.45rem;
  font-family: var(--font-body);
  font-size: 0.92rem;
}

:root[data-theme="atlas"] .swatch__check {
  display: none;
  position: absolute;
  top: 6px;
  right: 6px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--ink);
  align-items: center;
  justify-content: center;
  color: var(--paper);
  font-size: 0.7rem;
  line-height: 1;
}

:root[data-theme="atlas"] .swatch[aria-pressed="true"] .swatch__frame {
  border: 2px solid var(--ink);
}

:root[data-theme="atlas"] .swatch[aria-pressed="true"] .swatch__check {
  display: flex;
}

:root[data-theme="atlas"] .swatch:hover .swatch__frame {
  transform: translateY(-2px);
}

/* ---------- .field — label above input, 2px radius, hairline-strong
   border, 44px tall, helper text 0.92rem.
   <div class="field"><label for="q">Search for a city or address</label>
     <input id="q" type="text"><p class="field__helper">Helper text.</p></div> */
:root[data-theme="atlas"] .field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

:root[data-theme="atlas"] .field label {
  font-family: var(--font-display);
  font-size: 0.92rem;
  color: var(--ink);
}

:root[data-theme="atlas"] .field input,
:root[data-theme="atlas"] .field select,
:root[data-theme="atlas"] .field textarea {
  font: inherit;
  width: 100%;
  min-width: 0;
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink);
  min-height: 44px;
}

:root[data-theme="atlas"] .field input:focus-visible,
:root[data-theme="atlas"] .field select:focus-visible,
:root[data-theme="atlas"] .field textarea:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

:root[data-theme="atlas"] .field__helper {
  font-family: var(--font-body);
  font-size: 0.92rem;
  color: rgba(20, 34, 56, 0.72);
  margin: 0;
}

/* ---------- .choice-row — radio cards for sizes, three per row. Selected =
   2px ink border + check badge; :focus-within ring (the hidden-radio
   pattern needs it explicitly).
   <div class="choice-group">
     <p class="choice-group__label">Print, US shipping included</p>
     <div class="choice-row">
       <label class="choice-card"><input type="radio" name="size" value="12x16">
         <span class="choice-card__body"><span class="choice-card__title">12×16 in</span>
           <span class="choice-card__price">$34.99</span></span>
         <span class="choice-card__check" aria-hidden="true">✓</span></label>
       …
     </div>
   </div> */
:root[data-theme="atlas"] .choice-group + .choice-group {
  margin-top: 1.1rem;
}

:root[data-theme="atlas"] .choice-group__label {
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: rgba(20, 34, 56, 0.72);
  margin: 0 0 0.5rem;
}

:root[data-theme="atlas"] .choice-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.6rem;
}

:root[data-theme="atlas"] .choice-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius);
  padding: 0.7rem 0.6rem;
  cursor: pointer;
  min-height: 44px;
  justify-content: center;
}

:root[data-theme="atlas"] .choice-card input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

:root[data-theme="atlas"] .choice-card:focus-within {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

:root[data-theme="atlas"] .choice-card.is-selected {
  border: 2px solid var(--ink);
}

:root[data-theme="atlas"] .choice-card__title {
  font-family: var(--font-display);
  font-size: 0.98rem;
  color: var(--ink);
}

:root[data-theme="atlas"] .choice-card__price {
  font-family: var(--font-body);
  font-size: 0.92rem;
  color: rgba(20, 34, 56, 0.8);
  font-variant-numeric: tabular-nums;
}

:root[data-theme="atlas"] .choice-card__check {
  display: none;
  position: absolute;
  top: 6px;
  right: 6px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--paper);
  align-items: center;
  justify-content: center;
  font-size: 0.62rem;
}

:root[data-theme="atlas"] .choice-card.is-selected .choice-card__check {
  display: flex;
}

/* ---------- .section-head — small numeral in the title-block style +
   heading. Use only where the content is a real sequence (the designer's
   steps 1-4).
   <div class="section-head"><span class="section-head__num">1</span>
   <h2>Place</h2></div> */
:root[data-theme="atlas"] .section-head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

:root[data-theme="atlas"] .section-head__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  flex-shrink: 0;
}

:root[data-theme="atlas"] .section-head h2,
:root[data-theme="atlas"] .section-head h3 {
  font-size: 1.2rem;
}

/* ---------- .chips — pill links (nearby cities, country filters). Scoped
   to .chips .chip so this never collides with the home hero's own
   .chip-row/.chip toggle pills above, which keep their .is-active
   selectable behaviour unchanged.
   <ul class="chips"><li><a class="chip" href="…">Round Rock</a></li></ul> */
:root[data-theme="atlas"] .chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

:root[data-theme="atlas"] .chips .chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 1rem;
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius);
  color: var(--ink);
  text-decoration: none;
  font-family: var(--font-body);
  font-size: 0.95rem;
}

:root[data-theme="atlas"] .chips .chip:hover {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

/* ---------- .breadcrumbs restyle — the existing markup (city.eta,
   landing-map.eta, landing-star.eta):
   <nav class="breadcrumbs" aria-label="Breadcrumb">
     <a href="/">Home</a> &rsaquo; <a href="/cities">Cities</a> &rsaquo; <span>Austin</span>
   </nav> */
:root[data-theme="atlas"] .breadcrumbs {
  font-family: var(--font-display);
  font-size: 0.92rem;
  color: rgba(20, 34, 56, 0.72);
  margin-bottom: 8px;
  /* Cancel site.css's base `.breadcrumbs { opacity: 0.7 }` — the rgba() above already carries the
     fade, and the base rule would otherwise compound it (and dim the current-page span twice). */
  opacity: 1;
}

:root[data-theme="atlas"] .breadcrumbs a {
  color: var(--ink);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 0.2rem;
}

:root[data-theme="atlas"] .breadcrumbs a:hover {
  text-decoration: underline;
}

/* ---------- .night-band — a reusable navy surface (the city "sky" band,
   star cross-sell sections) with star-white text and a navy-appropriate
   secondary button. Generalises city.html's page-scoped
   .city-sky.night-surface / .btn-secondary--night into one shared class so
   every page can use it without repeating page-scoped CSS. */
:root[data-theme="atlas"] .night-band {
  background: var(--night);
  color: var(--star-white);
}

:root[data-theme="atlas"] .night-band h2,
:root[data-theme="atlas"] .night-band p,
:root[data-theme="atlas"] .night-band .plate-caption {
  color: var(--star-white);
}

:root[data-theme="atlas"] .night-band :focus-visible {
  outline-color: var(--star-white);
}

:root[data-theme="atlas"] .night-band .btn-secondary {
  background: transparent;
  border-color: var(--star-white);
  color: var(--star-white) !important;
}

:root[data-theme="atlas"] .night-band .btn-secondary:hover,
:root[data-theme="atlas"] .night-band .btn-secondary:focus-visible {
  background: var(--star-white);
  border-color: var(--star-white);
  color: var(--ink) !important;
}

/* Belt-and-suspenders (same pattern as the `.content .btn`/`.btn-secondary` colour fix above):
   site.css's own `.btn-secondary` already sets `text-decoration: none` as the self-sufficient
   base, but neither Atlas override block above (Shared chrome's ink/paper `.btn-secondary`, or
   `.night-band .btn-secondary` here) restates it, so pin it down again at Atlas specificity too —
   this is the border/text colour these two overrides already carry, just with the missing
   text-decoration declared alongside so a themed `.btn-secondary` can never regress back to an
   underlined text link. */
:root[data-theme="atlas"] .btn-secondary,
:root[data-theme="atlas"] .night-band .btn-secondary {
  text-decoration: none;
}

/* =====================================================================
   City & landing pages (redesign 2026-09, Task 4)
   Page-scoped styling for city.eta, landing-map.eta and landing-star.eta —
   ported from the redesign mockups' own <style> blocks
   (website-redesigns/mapandsky/redesign-2026-09-28/city.html and
   landing.html). Each of these is genuinely page-scoped: no selector here
   is covered by the shared component layer above (see that file's own
   "page-scoped additions" comment for why each one exists). Everything
   above this heading is untouched.
   ===================================================================== */

/* ---------- City hero ---------- */
:root[data-theme="atlas"] .city-hero {
  padding-top: 1.5rem;
}

:root[data-theme="atlas"] .city-hero h1 {
  max-width: 20ch;
}

:root[data-theme="atlas"] .city-hero__lede {
  max-width: 60ch;
  margin: 0.9rem 0 0;
  color: rgba(20, 34, 56, 0.85);
}

/* ---------- Plates row — a row of shared .poster-mount proof mounts (see the "Product diptych"
   section below for .poster-mount/.crop/.proof-index themselves, ported from home-atlas.eta's
   leaves — those selectors were never leaf-scoped, so they're reused as-is here rather than
   renamed) with a per-mount link/caption underneath. Used by city.eta (3 style mounts + "Start
   with X" links, each wrapped in a .plate-col so the link has somewhere to sit under its mount)
   and landing-map.eta/landing-star.eta (3 example mounts, no wrapper needed — .plates-row's own
   rules below target ">*" generically so both shapes lay out the same way). Below 640px this
   becomes a horizontal scroll-snap rail instead of a 3-up grid — 2026-09-29 B-lite pass. */
:root[data-theme="atlas"] .city-plates {
  padding-top: 2.2rem;
}

:root[data-theme="atlas"] .plates-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin: 1.7rem 0 1.8rem;
  min-width: 0;
}

:root[data-theme="atlas"] .plates-row .poster-mount {
  width: 100%;
  margin: 0;
}

@media (max-width: 640px) {
  :root[data-theme="atlas"] .plates-row {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    margin: 1.4rem 0 1.8rem;
    padding-bottom: 6px;
  }

  :root[data-theme="atlas"] .plates-row > * {
    flex: 0 0 78vw;
    min-width: 0;
    scroll-snap-align: start;
  }
}

:root[data-theme="atlas"] .plate-start {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: 0.5rem;
  font-family: var(--font-body);
  font-size: 0.88rem;
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 2px;
}

:root[data-theme="atlas"] .plate-start:hover {
  text-decoration-thickness: 2px;
}

/* ---------- City body copy — a 68ch measure cap, and a 3-column
   Size/Print/Framed legend (the shared .legend only right-aligns the
   *last* column; this table has three, so the middle Print column needs
   the same treatment). ---------- */
:root[data-theme="atlas"] .city-copy {
  padding-block: 2.4rem;
}

:root[data-theme="atlas"] .city-copy__text {
  max-width: 68ch;
}

:root[data-theme="atlas"] .city-copy__text p {
  margin: 0 0 1rem;
}

:root[data-theme="atlas"] .city-copy__text p:last-child {
  margin-bottom: 0;
}

:root[data-theme="atlas"] .city-legend {
  max-width: 68ch;
  margin-top: 1.8rem;
}

:root[data-theme="atlas"] .city-legend td:nth-child(2),
:root[data-theme="atlas"] .city-legend th:nth-child(2) {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ---------- City "sky" night band — .night-band above supplies the navy
   background/star-white text/secondary-button colours; this adds the
   page-specific two-column layout and padding. */
:root[data-theme="atlas"] .city-sky {
  padding-block: 3rem;
}

:root[data-theme="atlas"] .city-sky .container {
  display: grid;
  gap: 1.6rem;
  align-items: start;
}

@media (min-width: 700px) {
  :root[data-theme="atlas"] .city-sky .container {
    grid-template-columns: 1fr 280px;
    align-items: center;
    gap: 2.5rem;
  }
}

:root[data-theme="atlas"] .city-sky .plate {
  max-width: 220px;
}

/* Same sizing as .city-sky .plate above, for the night band's proof mount (2026-09-29 B-lite) —
   .poster-mount's own base rule caps at min(100%, 400px), too wide for this 280px column. */
:root[data-theme="atlas"] .city-sky .poster-mount {
  max-width: 220px;
  margin: 0;
}

/* ---------- Nearby cities ---------- */
:root[data-theme="atlas"] .city-nearby {
  padding-block: 2.4rem 3rem;
}

:root[data-theme="atlas"] .city-nearby h2 {
  margin-bottom: 0.3rem;
}

:root[data-theme="atlas"] .city-nearby p {
  margin: 0;
  color: rgba(20, 34, 56, 0.72);
}

/* ---------- Nearby-cities mono link row (2026-09-29 B-lite) — replaces the old .chips pill list
   with a plain link row in the .technical mono voice used elsewhere on the site (plate numbers,
   the closing-commission kicker). Same hrefs/names as the old chips, just restyled. */
:root[data-theme="atlas"] .nearby-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 0.9rem;
}

:root[data-theme="atlas"] .nearby-links a.technical {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--ink);
  text-decoration: none;
}

:root[data-theme="atlas"] .nearby-links a.technical:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

:root[data-theme="atlas"] .nearby-links__sep {
  color: rgba(20, 34, 56, 0.4);
  padding: 0 0.35rem;
}

/* ---------- Landing hero (map-poster / star-map) ---------- */
:root[data-theme="atlas"] .landing-hero {
  padding-top: 1.6rem;
}

:root[data-theme="atlas"] .landing-hero__lede {
  margin: 0.9rem 0 1.6rem;
  color: rgba(20, 34, 56, 0.85);
}

/* The h1 and lede sit outside `.title-block`'s own 46ch measure (that wrapper closes before
   either of these), so they get their own, wider caps here rather than inheriting a narrow
   one — "Custom Star Map Posters" was wrapping after ~15 characters under the old 16ch h1 cap.
   Left unconstrained below 700px, where the container is already narrow enough on its own. */
@media (min-width: 700px) {
  :root[data-theme="atlas"] .landing-hero h1 {
    max-width: 22ch;
  }

  :root[data-theme="atlas"] .landing-hero__lede {
    max-width: 60ch;
  }
}

:root[data-theme="atlas"] .landing-legend {
  max-width: 46ch;
  margin: 2.6rem 0;
}

/* ---------- .price-note — one muted line directly under a prices table (city.eta,
   landing-map.eta, landing-star.eta), stating the free-US-shipping policy. Same muted-ink
   convention as .small above (rgba of the --ink RGB triple), just scoped to this class instead of
   reusing .small so a future unrelated caller of .small isn't coupled to this copy's placement. */
:root[data-theme="atlas"] .price-note {
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: rgba(20, 34, 56, 0.72);
  margin: 0.6rem 0 0;
}

/* ---------- Landing FAQ (2026-09-29 B-lite) — now dressed with the home page's .faq-block/
   .atlas-faq-item/.section-index treatment (see the "FAQ (Direction E dress...)" rules further
   down this file, and the base .atlas-faq-list/.atlas-faq-item rules in the "FAQ" section near
   the top) instead of this section's own bare <details>/<summary> styling, which is removed here.
   .landing-faq alone no longer carries any declarations of its own; it exists only so this single
   override can out-specificity .faq-block's full-bleed 90/110px padding (meant for home's
   edge-to-edge orbit sections) with the plain in-.container padding these landing pages actually
   need — same copy, links and headings, just the shared component's visual treatment. ---------- */
:root[data-theme="atlas"] .landing-faq.faq-block {
  padding: 3rem 0;
}

/* ----------------------------------------------------------------------
   Cities index (redesign 2026-09)
   Page-scoped to /cities — no component in the shared layer above covers
   "a link list with a muted trailing count" (.place-list/.country-link)
   or a list-specific no-results message (.cities-search__empty; .field
   above only styles the input itself). Ported from the redesign study's
   cities.html, translated to this file's real tokens.
   ---------------------------------------------------------------------- */
:root[data-theme="atlas"] .cities-hero {
  padding-top: 1.6rem;
}

:root[data-theme="atlas"] .cities-hero__lede {
  max-width: 56ch;
  margin: 0.8rem 0 0;
  color: rgba(20, 34, 56, 0.85);
}

:root[data-theme="atlas"] .cities-section {
  padding-block: 2.2rem;
}

:root[data-theme="atlas"] .cities-section h2 {
  margin-bottom: 1.1rem;
}

:root[data-theme="atlas"] .place-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.1rem 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 480px) {
  :root[data-theme="atlas"] .place-list--popular {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 700px) {
  :root[data-theme="atlas"] .place-list--az {
    grid-template-columns: repeat(3, 1fr);
  }
}

:root[data-theme="atlas"] .country-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 44px;
  padding: 0 0.3rem;
  text-decoration: none;
  color: var(--ink);
  border-bottom: 1px solid var(--hairline);
  font-family: var(--font-body);
}

:root[data-theme="atlas"] .country-link:hover {
  background: var(--paper-tint);
}

:root[data-theme="atlas"] .country-link.active {
  background: var(--paper-tint);
}

:root[data-theme="atlas"] .country-link__name {
  font-size: 1rem;
}

:root[data-theme="atlas"] .country-link__count {
  font-family: var(--font-display);
  font-size: 0.85rem;
  color: rgba(20, 34, 56, 0.6);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

:root[data-theme="atlas"] .cities-search {
  max-width: 28rem;
  margin-bottom: 1.6rem;
}

:root[data-theme="atlas"] .cities-search__empty {
  font-family: var(--font-body);
  color: rgba(20, 34, 56, 0.72);
  padding: 0.9rem 0.3rem;
  display: none;
  margin: 0;
}

:root[data-theme="atlas"] .cities-search__empty.is-visible {
  display: block;
}

/* =====================================================================
   Landing (Direction E, 2026-09-29 Phase 2)
   Replaces the "Hybrid home" section above (deleted in this pass — home-atlas.eta no longer
   renders any of its markup; behaviour for THIS section lives in /js/theme-atlas.js, rewritten
   alongside it). Adapted from design-explorations/direction-e/{index.html,styles.css} — every
   background-image art-direction trick in the prototype (hero fields, product atmospheres) is
   replaced here with a real <picture>/<img> (object-fit: cover + object-position) inside a
   positioned wrapper, so the browser can actually preload/responsively-size/never-upscale the
   image; the wrapper keeps the prototype's parallax transform, clip-path reveal and gradient
   fade — the fade is now a ::after pseudo-element painted over the <img> instead of a second
   background layer. Two-product markup (Milky Way field, Sky leaf, shared datum, mobile switch)
   only exists in the DOM when flags.starMapsEnabled is on (see home-atlas.eta); the rules below
   simply don't match anything when it's off.
   ---------------------------------------------------------------------- */

:root[data-theme="atlas"] [data-reveal] {
  opacity: 0;
  transform: translateY(34px);
  transition: opacity 0.72s var(--ease), transform 0.72s var(--ease);
}
:root[data-theme="atlas"] [data-reveal].is-revealed {
  opacity: 1;
  transform: none;
}

/* ---------- Full bleed: home-atlas.eta's orbit sections (hero, product-choice diptych, making,
   data-crossing, print-ledger, closing-commission, faq-block) each carry their own inner
   --gutter padding already (.hero-grid, .orbit-leaf, .making, .data-crossing > div, .print-
   ledger, .closing-commission, .faq-block), so site.css's generic `main{padding:32px 16px 64px}`
   only needs removing, not replacing — every section's own padding takes over immediately,
   flush under the header exactly like the prototype. Scoped to main.orbit-page (set only on the
   Atlas home page, via it.mainClass in pages.ts) so no other page's <main> is affected. */
:root[data-theme="atlas"] main.orbit-page {
  padding: 0;
}

/* ---------- Orbit hero: the atmospheric prologue. ---------- */
:root[data-theme="atlas"] .orbit-hero {
  height: min(850px, calc(100vh - 88px));
  min-height: 680px;
  background: var(--orbit);
  color: var(--star);
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

:root[data-theme="atlas"] .hero-field {
  position: absolute;
  z-index: 0;
  inset: -3%;
  overflow: hidden;
  will-change: transform;
  transition: filter 0.36s ease, opacity 0.36s ease;
  transform: translate3d(0, var(--parallax), 0) scale(1.07);
}
:root[data-theme="atlas"] .hero-field picture,
:root[data-theme="atlas"] .hero-field img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
:root[data-theme="atlas"] .hero-earth {
  clip-path: inset(0 50% 0 0);
  animation: orbitRevealLeft 0.9s var(--ease) 0.1s both;
}
:root[data-theme="atlas"] .hero-earth img {
  object-position: 30% center;
}
:root[data-theme="atlas"] .hero-earth::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(7, 19, 34, 0.03) 0%, rgba(7, 19, 34, 0.08) 34%, rgba(7, 19, 34, 0.86) 62%, var(--orbit) 75%);
}
:root[data-theme="atlas"] .hero-stars {
  clip-path: inset(0 0 0 50%);
  animation: orbitRevealRight 0.9s var(--ease) 0.1s both;
}
:root[data-theme="atlas"] .hero-stars img {
  object-position: 72% center;
}
:root[data-theme="atlas"] .hero-stars::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--orbit) 23%, rgba(7, 19, 34, 0.76) 43%, rgba(7, 19, 34, 0.04) 73%, rgba(7, 19, 34, 0.14));
}
:root[data-theme="atlas"] .orbit-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(7, 19, 34, 0.28), rgba(7, 19, 34, 0.03) 48%, rgba(7, 19, 34, 0.66));
  pointer-events: none;
}

:root[data-theme="atlas"] .hero-grid {
  position: relative;
  z-index: 3;
  height: 100%;
  padding: 30px var(--gutter) 58px;
  display: grid;
  grid-template-columns: 7fr 3fr;
  grid-template-rows: auto 1fr auto;
  gap: 30px;
}

:root[data-theme="atlas"] .orbit-kicker {
  grid-column: 1 / 3;
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid rgba(247, 240, 222, 0.6);
  padding-bottom: 10px;
  font: 11px var(--font-mono);
  letter-spacing: 0.1em;
  margin: 0;
}
:root[data-theme="atlas"] .orbit-kicker span:first-child {
  color: var(--brass);
}

:root[data-theme="atlas"] .hero-grid h1 {
  grid-column: 1 / 3;
  align-self: stretch;
  font: clamp(72px, 9.8vw, 150px) / 0.8 var(--font-display);
  letter-spacing: -0.045em;
  text-transform: uppercase;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: clamp(24px, 4vw, 72px);
  position: relative;
  text-shadow: 0 4px 24px rgba(7, 19, 34, 0.35);
}
:root[data-theme="atlas"] .hero-line {
  display: block;
  min-width: 0;
  font-style: normal;
}
:root[data-theme="atlas"] .hero-line b {
  display: block;
  font-weight: inherit;
}
:root[data-theme="atlas"] .hero-line--place {
  grid-column: 1;
  align-self: start;
  text-align: left;
}
:root[data-theme="atlas"] .hero-line--place b {
  color: var(--earth);
  padding-left: 12%;
}
:root[data-theme="atlas"] .hero-line--sky {
  grid-column: 2;
  align-self: end;
  text-align: right;
}
:root[data-theme="atlas"] .hero-line--sky b {
  color: var(--brass);
  padding-right: 8%;
}
:root[data-theme="atlas"] .hero-grid h1 > .hero-line:only-child { grid-column: 1 / 3; }

:root[data-theme="atlas"] .hero-note {
  grid-column: 1 / -1;
  justify-self: center;
  width: min(100%, 620px);
  text-align: center;
  align-self: end;
  position: relative;
  isolation: isolate;
  border-top: 1px solid rgba(247, 240, 222, 0.6);
  padding-top: 14px;
}
/* A soft dark pool behind the copy + button — the Milky Way image underneath can be bright
   enough in places (a dense star field, a bright galactic core) to drop --star text below AA on
   its own. No visible box edge: it's a radial fade, not a panel, and sits below the hairline rule
   (z-index -1, isolation: isolate on the parent keeps it from ever landing above the border/text). */
:root[data-theme="atlas"] .hero-note::before {
  content: "";
  position: absolute;
  inset: -28px -24px -20px;
  z-index: -1;
  background: radial-gradient(ellipse at 50% 60%, rgba(7, 19, 34, 0.78), rgba(7, 19, 34, 0.55) 55%, rgba(7, 19, 34, 0) 100%);
  pointer-events: none;
}
:root[data-theme="atlas"] .hero-note p {
  font-size: 18px;
  line-height: 1.42;
  margin: 0 0 18px;
  margin-inline: auto;
  max-width: 52ch;
}
:root[data-theme="atlas"] .hero-note .hero-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: fit-content;
  min-width: 260px;
  min-height: 56px;
  padding: 12px 15px;
  background: var(--red);
  border: 1px solid var(--red);
  color: #fff;
  font: 12px var(--font-mono);
  text-transform: uppercase;
  text-decoration: none;
  transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease;
  margin-inline: auto;
}
:root[data-theme="atlas"] .hero-note .hero-action:hover {
  background: var(--star);
  border-color: var(--star);
  color: var(--orbit);
}

:root[data-theme="atlas"] .orbit-path {
  position: absolute;
  z-index: 2;
  inset: 34% 0 auto;
  height: 280px;
  pointer-events: none;
}
:root[data-theme="atlas"] .orbit-path svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}
:root[data-theme="atlas"] .orbit-path path {
  fill: none;
  stroke: rgba(247, 240, 222, 0.75);
  stroke-width: 1;
  stroke-dasharray: 1 8;
  vector-effect: non-scaling-stroke;
  animation: orbitDraw 1.25s var(--ease) 0.3s both;
}
:root[data-theme="atlas"] .orbit-node {
  position: absolute;
  left: 50%;
  top: 48%;
  width: 36px;
  height: 36px;
  border: 1px solid var(--brass);
  border-radius: 50%;
  display: grid;
  place-items: center;
  transform: translate(-50%, -50%) scale(0);
  animation: orbitRegister 0.48s var(--ease) 1.2s forwards;
}
:root[data-theme="atlas"] .orbit-node i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--brass);
}

:root[data-theme="atlas"] .hero-coordinate {
  position: absolute;
  z-index: 3;
  bottom: 22px;
  font: 10px var(--font-mono);
  letter-spacing: 0.08em;
}
:root[data-theme="atlas"] .hero-coordinate--left {
  left: var(--gutter);
}
:root[data-theme="atlas"] .hero-coordinate--right {
  right: var(--gutter);
}

:root[data-theme="atlas"] .mobile-product-switch {
  display: none;
}

/* ---------- Product diptych: Place vs Sky. ---------- */
:root[data-theme="atlas"] .product-orbit {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  isolation: isolate;
  background: var(--orbit);
  border-bottom: 1px solid var(--ink);
  overflow: hidden;
}
:root[data-theme="atlas"] .product-atmosphere {
  position: absolute;
  inset: -6%;
  z-index: -2;
  overflow: hidden;
  will-change: transform;
  transform: translate3d(0, calc(var(--parallax) * 0.16), 0) scale(1.12);
  transition: opacity 0.34s var(--ease), filter 0.34s var(--ease);
}
:root[data-theme="atlas"] .product-atmosphere picture,
:root[data-theme="atlas"] .product-atmosphere img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
:root[data-theme="atlas"] .atmosphere-earth {
  right: 50%;
}
:root[data-theme="atlas"] .atmosphere-earth::after {
  content: "";
  position: absolute;
  inset: 0;
  /* Strengthened for AA: the raw Earth image under the leaf's ink copy (left-most ~40% of this
     layer, where .leaf-heading's padding places the text) measured as low as 2.6:1 with the
     original 0.08 starting alpha. Only the overlay's stops change here — never the image. */
  background: linear-gradient(90deg, rgba(242, 238, 227, 0.55), rgba(242, 238, 227, 0.86) 55%, var(--paper) 92%);
}
:root[data-theme="atlas"] .atmosphere-stars {
  left: 50%;
}
:root[data-theme="atlas"] .atmosphere-stars::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--orbit), rgba(7, 19, 34, 0.5) 55%, rgba(7, 19, 34, 0.05));
}

:root[data-theme="atlas"] .shared-datum {
  position: absolute;
  z-index: 5;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 36px;
  transform: translateX(-50%);
  background: var(--paper);
  border-inline: 1px solid var(--ink);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 54px 0;
  color: var(--ink);
  font: 10px var(--font-mono);
  letter-spacing: 0.06em;
}
:root[data-theme="atlas"] .shared-datum span {
  writing-mode: vertical-rl;
}
:root[data-theme="atlas"] .shared-datum i {
  height: 32%;
  border-left: 1px dashed var(--ink);
}
:root[data-theme="atlas"] .shared-datum b {
  position: absolute;
  top: var(--orbit-progress);
  left: 50%;
  width: 17px;
  height: 17px;
  border: 1px solid var(--red);
  background: var(--paper);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: top 0.12s linear;
}
:root[data-theme="atlas"] .shared-datum b::before,
:root[data-theme="atlas"] .shared-datum b::after {
  content: "";
  position: absolute;
  background: var(--red);
}
:root[data-theme="atlas"] .shared-datum b::before {
  height: 1px;
  width: 25px;
  left: -5px;
  top: 7px;
}
:root[data-theme="atlas"] .shared-datum b::after {
  width: 1px;
  height: 25px;
  top: -5px;
  left: 7px;
}

:root[data-theme="atlas"] .orbit-leaf {
  padding: 80px clamp(32px, 4.2vw, 100px) 82px;
  min-width: 0;
  color: var(--ink);
  position: relative;
  transition: filter 0.36s var(--ease), opacity 0.36s var(--ease), transform 0.36s var(--ease);
}
:root[data-theme="atlas"] .sky-leaf {
  color: var(--star);
}

:root[data-theme="atlas"] .leaf-heading {
  min-height: 280px;
  position: relative;
}
:root[data-theme="atlas"] .leaf-heading h2 {
  font: clamp(68px, 7vw, 105px) / 0.8 var(--font-display);
  letter-spacing: -0.045em;
  text-transform: uppercase;
  margin: 24px 0 34px;
}
:root[data-theme="atlas"] .leaf-heading > p:last-child {
  font-size: 20px;
  line-height: 1.42;
  max-width: 33ch;
  margin: 0;
}

:root[data-theme="atlas"] .plate-number,
:root[data-theme="atlas"] .technical {
  font: 11px / 1.55 var(--font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin: 0;
}
/* --ink, not --red: this label sits over the pale Earth-band overlay, not true paper — measured
   as low as 2.49:1 (1440) / 3.82:1 (390) against the brightest pixel behind it, below AA. Red
   stays reserved for text that's genuinely on --paper/--mist (see the accent-contrast fix above). */
:root[data-theme="atlas"] .map-leaf .plate-number {
  color: var(--ink);
}
:root[data-theme="atlas"] .sky-leaf .plate-number {
  color: var(--brass);
}

:root[data-theme="atlas"] .poster-mount {
  position: relative;
  margin: 34px auto 36px;
  width: min(100%, 400px);
  padding: 16px;
  background: #d8d5cc;
  box-shadow: var(--shadow);
  transition: transform 0.36s var(--ease), box-shadow 0.36s var(--ease);
}
:root[data-theme="atlas"] .orbit-leaf:hover .poster-mount,
:root[data-theme="atlas"] .orbit-leaf:focus-within .poster-mount {
  transform: translateY(-9px);
  box-shadow: 0 36px 90px rgba(7, 19, 34, 0.4);
}
:root[data-theme="atlas"] .poster-mount img {
  width: 100%;
  /* height: auto (not the default 'auto' you'd expect to already win) — every .poster-mount img
     carries real HTML width/height attributes (e.g. 675x900) for CLS, and the browser maps those
     attributes to a low-priority presentational height that DOES still beat an unset CSS height,
     leaving height stuck at the attribute's raw 900px regardless of the box's actual (scaled-down)
     width. That silently turned every mount — including the home page's own leaves — into a tall,
     over-cropped sliver: aspect-ratio only resolves the dimension that's actually auto. Explicit
     height: auto here lets aspect-ratio do its job (2026-09-29 B-lite pass, found while reusing
     this component on city.eta/landing-map.eta/landing-star.eta). */
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}
:root[data-theme="atlas"] .poster-mount figcaption {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding-top: 12px;
  color: var(--ink);
  font: 10px var(--font-mono);
}
/* #23334b, not var(--orbit) — var(--orbit) is the SAME colour as the .product-orbit/.night-band
   surface the mount sits on (#071322), so the mount's own paper/mat effectively disappeared into
   its background. #23334b is the original Direction E prototype's value
   (design-explorations/direction-e/styles.css) — restored here, along with the shared use of
   .poster-mount/.sky-treatment across the home leaf, city night band and both landing pages
   (2026-09-29 B-lite pass), so the star mount reads as a distinct frame everywhere it appears. */
:root[data-theme="atlas"] .sky-treatment {
  background: #23334b;
}
:root[data-theme="atlas"] .sky-treatment figcaption {
  color: var(--star);
}
:root[data-theme="atlas"] .proof-index {
  position: absolute;
  right: -26px;
  top: -30px;
  color: currentColor;
  font: 62px / 0.8 var(--font-display);
  opacity: 0.22;
}

:root[data-theme="atlas"] .crop {
  position: absolute;
  width: 14px;
  height: 14px;
  z-index: 5;
  pointer-events: none;
  transition: transform 0.24s var(--ease);
}
:root[data-theme="atlas"] .crop::before,
:root[data-theme="atlas"] .crop::after {
  content: "";
  position: absolute;
  background: var(--red);
}
:root[data-theme="atlas"] .crop::before {
  height: 1px;
  width: 14px;
  top: 6px;
}
:root[data-theme="atlas"] .crop::after {
  width: 1px;
  height: 14px;
  left: 6px;
}
:root[data-theme="atlas"] .crop-tl { top: 5px; left: 5px; }
:root[data-theme="atlas"] .crop-tr { top: 5px; right: 5px; }
:root[data-theme="atlas"] .crop-bl { bottom: 25px; left: 5px; }
:root[data-theme="atlas"] .crop-br { bottom: 25px; right: 5px; }
:root[data-theme="atlas"] .poster-mount:hover .crop-tl { transform: translate(-5px, -5px); }
:root[data-theme="atlas"] .poster-mount:hover .crop-tr { transform: translate(5px, -5px); }
:root[data-theme="atlas"] .poster-mount:hover .crop-bl { transform: translate(-5px, 5px); }
:root[data-theme="atlas"] .poster-mount:hover .crop-br { transform: translate(5px, 5px); }

:root[data-theme="atlas"] .leaf-action {
  border-top: 1px solid currentColor;
  padding-top: 21px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}
:root[data-theme="atlas"] .leaf-action p {
  font: 11px var(--font-mono);
  margin: 0;
  text-align: right;
}
:root[data-theme="atlas"] .primary-action,
:root[data-theme="atlas"] .secondary-action {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  min-height: 52px;
  padding: 13px 17px;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  font: 11px var(--font-mono);
  text-transform: uppercase;
  text-decoration: none;
  letter-spacing: 0.03em;
  cursor: pointer;
  border-radius: 0;
  transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease;
}
:root[data-theme="atlas"] .primary-action:hover {
  background: var(--red);
  border-color: var(--red);
}
:root[data-theme="atlas"] .leaf-action .map-action {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
}
:root[data-theme="atlas"] .leaf-action .map-action:hover {
  background: var(--ink);
  border-color: var(--ink);
}
:root[data-theme="atlas"] .leaf-action .sky-action {
  background: var(--brass);
  border-color: var(--brass);
  color: var(--orbit);
}
:root[data-theme="atlas"] .leaf-action .sky-action:hover {
  background: var(--star);
  border-color: var(--star);
}
:root[data-theme="atlas"] .secondary-action {
  background: transparent;
  color: var(--ink);
}
:root[data-theme="atlas"] .secondary-action:hover {
  background: var(--ink);
  color: var(--paper);
}

:root[data-theme="atlas"][data-focus="map"] .sky-leaf {
  opacity: 0.58;
  filter: saturate(0.55);
}
:root[data-theme="atlas"][data-focus="sky"] .map-leaf {
  opacity: 0.58;
  filter: saturate(0.55);
}

/* ---------- Editorial follow-through: making, data provenance, ledger, closing. ---------- */
:root[data-theme="atlas"] .section-index {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 10px;
  font: 11px var(--font-mono);
  letter-spacing: 0.1em;
}
:root[data-theme="atlas"] .making,
:root[data-theme="atlas"] .print-ledger {
  padding: 105px var(--gutter);
}
:root[data-theme="atlas"] .making-grid {
  display: grid;
  grid-template-columns: 4fr 7fr;
  gap: 8.33%;
  padding-top: 58px;
}
:root[data-theme="atlas"] .making-title-block h2,
:root[data-theme="atlas"] .print-ledger h2,
:root[data-theme="atlas"] .closing-commission h2 {
  font: clamp(50px, 5.5vw, 80px) / 0.9 var(--font-display);
  text-transform: uppercase;
  letter-spacing: -0.035em;
  margin: 18px 0 30px;
}
:root[data-theme="atlas"] .making-title-block > p:last-child {
  font-size: 20px;
  max-width: 34ch;
  margin: 0;
}
:root[data-theme="atlas"] .process-list {
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 1px solid var(--ink);
}
:root[data-theme="atlas"] .process-list li {
  display: grid;
  grid-template-columns: 140px 1fr;
  column-gap: 28px;
  padding: 26px 0;
  border-bottom: 1px solid var(--rule);
}
:root[data-theme="atlas"] .process-list span {
  grid-row: span 2;
  font: 11px var(--font-mono);
  color: var(--red);
}
:root[data-theme="atlas"] .process-list strong {
  font: 27px var(--font-display);
  text-transform: uppercase;
  font-weight: 400;
}
:root[data-theme="atlas"] .process-list p {
  margin: 7px 0 0;
  font-size: 17px;
}

:root[data-theme="atlas"] .data-crossing {
  display: grid;
  grid-template-columns: 1fr 78px 1fr;
  background: var(--orbit);
  color: var(--star);
  min-height: 330px;
}
:root[data-theme="atlas"] .data-crossing.single-source {
  grid-template-columns: 1fr;
}
:root[data-theme="atlas"] .data-crossing > div:not(.crossing-mark) {
  padding: 74px var(--gutter);
  margin: 0;
}
:root[data-theme="atlas"] .data-crossing strong {
  display: block;
  font: clamp(31px, 3.5vw, 52px) var(--font-display);
  text-transform: uppercase;
  margin: 20px 0;
}
:root[data-theme="atlas"] .data-crossing p:last-child {
  max-width: 40ch;
  margin: 0;
}
:root[data-theme="atlas"] .crossing-ground {
  background: linear-gradient(110deg, rgba(126, 166, 181, 0.23), transparent);
}
:root[data-theme="atlas"] .crossing-sky {
  background: linear-gradient(250deg, rgba(206, 182, 106, 0.13), transparent);
}
:root[data-theme="atlas"] .crossing-mark {
  background: var(--paper);
  color: var(--ink);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  font: 10px var(--font-mono);
}
:root[data-theme="atlas"] .crossing-mark i {
  height: 65px;
  border-left: 1px solid var(--ink);
}
:root[data-theme="atlas"] .crossing-mark b {
  width: 38px;
  height: 38px;
  border: 1px solid var(--red);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--red);
  font: 24px var(--font-display);
  font-style: normal;
}

:root[data-theme="atlas"] .print-ledger {
  display: grid;
  grid-template-columns: 4fr 7fr;
  gap: 4% 8.33%;
  background: var(--mist);
  border-block: 1px solid var(--ink);
}
:root[data-theme="atlas"] .ledger-table {
  border-top: 2px solid var(--ink);
}
:root[data-theme="atlas"] .ledger-table > div {
  display: grid;
  grid-template-columns: 1.2fr 1.5fr 1fr;
  gap: 18px;
  padding: 17px 0;
  border-bottom: 1px solid var(--rule);
  align-items: center;
}
:root[data-theme="atlas"] .ledger-table span {
  font-family: var(--font-ui);
  font-size: 14px;
}
:root[data-theme="atlas"] .ledger-table span:last-child {
  text-align: right;
  font-family: var(--font-mono);
}
:root[data-theme="atlas"] .ledger-table .ledger-head,
:root[data-theme="atlas"] .ledger-table .ledger-head span {
  font: 11px var(--font-mono);
}
:root[data-theme="atlas"] .ledger-note {
  grid-column: 2;
  font: 11px / 1.6 var(--font-mono);
  margin: 0;
}

:root[data-theme="atlas"] .closing-commission {
  padding: 135px var(--gutter);
  text-align: center;
  position: relative;
  overflow: hidden;
}
:root[data-theme="atlas"] .closing-orbit {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(80vw, 900px);
  height: min(42vw, 420px);
  border: 1px dashed var(--earth);
  border-radius: 50%;
  transform: translate(-50%, -50%) rotate(-8deg);
  opacity: 0.6;
}
:root[data-theme="atlas"] .closing-orbit::before {
  content: "";
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--red);
  left: 12%;
  top: 13%;
}
:root[data-theme="atlas"] .closing-commission > *:not(.closing-orbit) {
  position: relative;
}
:root[data-theme="atlas"] .closing-commission h2 {
  font-size: clamp(56px, 8vw, 110px);
  margin: 18px auto 42px;
}
:root[data-theme="atlas"] .closing-commission > div:last-child {
  display: flex;
  justify-content: center;
  gap: 14px;
}

/* ---------- FAQ (Direction E dress, Phase 2 fix). Reuses .section-index (the same mono
   kicker-plus-hairline component "making" uses above) and the existing .atlas-faq-list/
   .atlas-faq-item rules from the pre-Direction-E FAQ section further up this file — those
   already set the right font families and a 60ch measure, so only the deltas the brief actually
   asks for are overridden here: summary size, the mono +/- marker, and answer size. ---------- */
:root[data-theme="atlas"] .faq-block {
  padding: 90px var(--gutter) 110px;
}
:root[data-theme="atlas"] .faq-block h2 {
  font: clamp(32px, 4vw, 48px) / 1 var(--font-display);
  text-transform: uppercase;
  letter-spacing: -0.02em;
  margin: 22px 0 34px;
}
:root[data-theme="atlas"] .faq-block .atlas-faq-item summary {
  font-size: 20px;
}
:root[data-theme="atlas"] .faq-block .atlas-faq-item summary::after {
  font-family: var(--font-mono);
  font-size: 16px;
  color: var(--red);
}
:root[data-theme="atlas"] .faq-block .atlas-faq-item p {
  font-size: 18px;
}
:root[data-theme="atlas"] .faq-more {
  margin-top: 26px;
}
:root[data-theme="atlas"] .faq-more a {
  font: 11px var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-decoration: underline;
  text-underline-offset: 4px;
}

@keyframes orbitRevealLeft {
  from { clip-path: inset(0 100% 0 0); opacity: 0.2; }
  to { clip-path: inset(0 50% 0 0); opacity: 1; }
}
@keyframes orbitRevealRight {
  from { clip-path: inset(0 0 0 100%); opacity: 0.2; }
  to { clip-path: inset(0 0 0 50%); opacity: 1; }
}
@keyframes orbitDraw {
  from { stroke-dashoffset: 520; opacity: 0; }
  to { stroke-dashoffset: 0; opacity: 1; }
}
@keyframes orbitRegister {
  to { transform: translate(-50%, -50%) scale(1); }
}
@keyframes orbitFocusLeaf {
  from { opacity: 0.1; transform: translateX(20px); }
  to { opacity: 1; transform: none; }
}

@media (min-width: 1280px) {
  :root[data-theme="atlas"] .orbit-leaf {
    display: grid;
    grid-template-columns: minmax(0, 0.88fr) minmax(220px, 1.12fr);
    grid-template-rows: auto 1fr;
    column-gap: clamp(28px, 2.4vw, 48px);
    align-items: start;
  }
  :root[data-theme="atlas"] .leaf-heading { grid-column: 1; grid-row: 1; min-height: 0; }
  :root[data-theme="atlas"] .leaf-action {
    grid-column: 1;
    grid-row: 2;
    align-self: start;
    display: grid;
    grid-template-columns: 1fr;
    gap: 13px;
    margin-top: 28px;
  }
  :root[data-theme="atlas"] .leaf-action .primary-action { width: 100%; min-height: 58px; }
  :root[data-theme="atlas"] .leaf-action p { text-align: left; }
  /* Scoped to .orbit-leaf .poster-mount (was a bare .poster-mount selector) — .poster-mount is no
     longer only the home page's leaf mount now that city.eta and the two landing pages reuse it
     (2026-09-29 B-lite pass); unscoped, this placed EVERY .poster-mount on the page into grid
     column 2 / rows 1-3 at this breakpoint, stacking all three of a .plates-row's mounts on top of
     each other. */
  :root[data-theme="atlas"] .orbit-leaf .poster-mount { grid-column: 2; grid-row: 1 / 3; align-self: center; width: min(100%, 420px); margin: 0 auto; }
}

@media (max-width: 1024px) {
  :root[data-theme="atlas"] .orbit-hero { min-height: 650px; }
  :root[data-theme="atlas"] .hero-grid h1 { font-size: clamp(62px, 11vw, 110px); }
  :root[data-theme="atlas"] .orbit-leaf { padding-inline: clamp(28px, 6vw, 62px); }
  :root[data-theme="atlas"] .leaf-heading { min-height: 260px; }
  :root[data-theme="atlas"] .shared-datum { width: 28px; }
  :root[data-theme="atlas"] .making-grid,
  :root[data-theme="atlas"] .print-ledger { grid-template-columns: 1fr; }
  :root[data-theme="atlas"] .process-list { margin-top: 36px; }
  :root[data-theme="atlas"] .ledger-note { grid-column: 1; }
}

@media (max-width: 768px) {
  :root[data-theme="atlas"] .orbit-hero { height: 720px; }
  :root[data-theme="atlas"] .hero-grid { grid-template-columns: minmax(0, 1fr); padding-bottom: 40px; min-width: 0; }
  :root[data-theme="atlas"] .orbit-kicker,
  :root[data-theme="atlas"] .hero-grid h1 { grid-column: 1; min-width: 0; }
  :root[data-theme="atlas"] .hero-grid h1 { display: block; align-self: center; font-size: clamp(70px, 15vw, 110px); line-height: 0.8; }
  :root[data-theme="atlas"] .hero-grid h1 .hero-line { display: block; text-align: left; margin: 0; padding: 0; }
  :root[data-theme="atlas"] .hero-grid h1 .hero-line b { padding: 0 0 0 18%; }
  :root[data-theme="atlas"] .hero-note { grid-column: 1; width: 100%; max-width: 520px; min-width: 0; justify-self: center; }
  :root[data-theme="atlas"] .hero-earth { clip-path: inset(0 0 48% 0); }
  :root[data-theme="atlas"] .hero-earth img { object-position: 25% 30%; }
  :root[data-theme="atlas"] .hero-stars { clip-path: inset(48% 0 0 0); }
  :root[data-theme="atlas"] .hero-stars img { object-position: 70% 70%; }
  :root[data-theme="atlas"] .orbit-path { top: 36%; }

  :root[data-theme="atlas"] .product-orbit { grid-template-columns: 1fr; }
  :root[data-theme="atlas"] .shared-datum { display: none; }
  :root[data-theme="atlas"] .orbit-leaf { padding: 70px clamp(34px, 12vw, 96px); }
  :root[data-theme="atlas"] .sky-leaf { border-top: 1px solid var(--star); }
  :root[data-theme="atlas"] .leaf-heading { min-height: auto; }
  /* Scoped to .orbit-leaf .poster-mount for the same reason as the 1280px rule above. */
  :root[data-theme="atlas"] .orbit-leaf .poster-mount { width: min(100%, 470px); }
  :root[data-theme="atlas"] .data-crossing { grid-template-columns: 1fr; }
  :root[data-theme="atlas"] .crossing-mark { height: 62px; flex-direction: row; }
  :root[data-theme="atlas"] .crossing-mark i { height: auto; width: 80px; border-left: 0; border-top: 1px solid var(--ink); }
}

/* ---------- Tablet product bands (641-768px, Phase 2 fix). Above this range the two atmosphere
   layers split the viewport left/right behind a side-by-side diptych; the 768px breakpoint above
   already stacks the leaves into a single column but leaves the atmospheres doing their
   ≥769px left/right split — which visually cuts each stacked, full-width leaf in half between a
   pale Earth gradient and a dark Milky Way gradient, making one side of the map-leaf's ink text
   sit on a navy background (and vice versa for the sky-leaf). Here each atmosphere is
   repositioned to sit in the SAME grid cell as its own leaf (named-area overlap: Earth shares
   "place" with .map-leaf, Milky Way shares "sky" with .sky-leaf), stretched by the grid's default
   `align-items: stretch` to exactly the leaf's own content height instead of the container's,
   giving each leaf a correctly-matched, full-width atmosphere band with the same --ink/--star
   text contrast the ≥1024px layout already gets. The shared datum is already `display: none` from
   the 768px block above (nothing to bridge once the leaves aren't side by side); the poster mount
   keeps centring itself via its own `margin: auto` from the base rule, unaffected by this. */
@media (min-width: 641px) and (max-width: 768px) {
  :root[data-theme="atlas"] .product-orbit {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas: "place" "sky";
  }
  :root[data-theme="atlas"] .atmosphere-earth,
  :root[data-theme="atlas"] .atmosphere-stars {
    position: relative;
    inset: auto;
    z-index: 0;
    overflow: hidden;
  }
  :root[data-theme="atlas"] .atmosphere-earth {
    grid-area: place;
    right: auto;
  }
  :root[data-theme="atlas"] .atmosphere-stars {
    grid-area: sky;
    left: auto;
  }
  :root[data-theme="atlas"] .map-leaf {
    grid-area: place;
  }
  :root[data-theme="atlas"] .sky-leaf {
    grid-area: sky;
  }
}

@media (max-width: 640px) {
  :root[data-theme="atlas"] .orbit-hero { height: 650px; min-height: 650px; }
  :root[data-theme="atlas"] .hero-grid { padding: 22px 20px 36px; width: 100%; max-width: 100%; }
  :root[data-theme="atlas"] .orbit-kicker span:last-child { display: none; }
  :root[data-theme="atlas"] .hero-grid h1 { font-size: 59px; max-width: 100%; overflow: hidden; }
  :root[data-theme="atlas"] .hero-note { font-size: 16px; width: 100%; max-width: 100%; margin-left: 0; justify-self: stretch; text-align: center; }
  :root[data-theme="atlas"] .hero-note p { font-size: 16px; }
  :root[data-theme="atlas"] .hero-note .hero-action { width: 100%; min-width: 0; }
  :root[data-theme="atlas"] .hero-coordinate { display: none; }
  :root[data-theme="atlas"] .orbit-path { top: 38%; height: 210px; }
  :root[data-theme="atlas"] .orbit-node { width: 28px; height: 28px; }

  /* A zero-height marker placed just above .mobile-product-switch in the DOM (home-atlas.eta) so
     theme-atlas.js can tell, via IntersectionObserver, the exact moment the switch (position:
     sticky; top: 0) locks to the top of the viewport — see initStickySwitch there. */
  :root[data-theme="atlas"] .switch-sentinel {
    height: 0;
  }
  :root[data-theme="atlas"] .mobile-product-switch {
    position: sticky;
    top: 0;
    z-index: 15;
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: var(--paper);
    /* A firmer boundary than the hairline elsewhere on the page — this bar sits directly over
       scrolling content once stuck, so it reads as UI chrome rather than more page content. */
    border-block: 2px solid var(--ink);
  }
  /* Extra lift once actually pinned to the viewport top (is-stuck, toggled by theme-atlas.js) —
     the border alone doesn't read as "floating above the content now scrolling underneath it". */
  :root[data-theme="atlas"] .mobile-product-switch.is-stuck {
    box-shadow: 0 6px 14px rgba(7, 19, 34, 0.18);
  }
  :root[data-theme="atlas"] .mobile-product-switch button {
    min-height: 52px;
    border: 0;
    border-right: 1px solid var(--ink);
    background: transparent;
    font: 11px var(--font-mono);
    cursor: pointer;
  }
  :root[data-theme="atlas"] .mobile-product-switch button:last-child { border: 0; }
  :root[data-theme="atlas"] .mobile-product-switch button b { color: var(--red); margin-right: 6px; }
  :root[data-theme="atlas"] .mobile-product-switch button.is-active { background: var(--ink); color: var(--star); }
  /* .is-active swaps the tab to an --ink background, but `button b` above sets colour directly on
     the digit and always wins over the ancestor's colour regardless of specificity — left alone,
     the "01"/"02" badge would stay --red (a paper-only accent) on the now-dark --ink tab. */
  :root[data-theme="atlas"] .mobile-product-switch button.is-active b { color: var(--brass); }

  :root[data-theme="atlas"] .product-orbit { min-height: 850px; }
  :root[data-theme="atlas"] .product-atmosphere { inset: 0; transition: opacity 0.34s var(--ease); }
  :root[data-theme="atlas"] .atmosphere-earth { right: 0; }
  :root[data-theme="atlas"] .atmosphere-earth img { object-position: 36% center; }
  :root[data-theme="atlas"] .atmosphere-earth::after { background: linear-gradient(180deg, rgba(242, 238, 227, 0.84), var(--paper) 72%); }
  :root[data-theme="atlas"] .atmosphere-stars { left: 0; }
  :root[data-theme="atlas"] .atmosphere-stars img { object-position: 68% center; }
  :root[data-theme="atlas"] .atmosphere-stars::after { background: linear-gradient(180deg, rgba(7, 19, 34, 0.18), var(--orbit) 72%); }
  :root[data-theme="atlas"][data-focus="map"] .atmosphere-stars { opacity: 0; }
  :root[data-theme="atlas"][data-focus="sky"] .atmosphere-earth { opacity: 0; }

  :root[data-theme="atlas"] .orbit-leaf { display: none; padding: 56px 20px 60px; min-height: 850px; }
  :root[data-theme="atlas"] .orbit-leaf.is-active { display: block; animation: orbitFocusLeaf 0.48s var(--ease) both; }
  :root[data-theme="atlas"] .leaf-heading h2 { font-size: 70px; margin-top: 17px; }
  :root[data-theme="atlas"] .leaf-heading > p:last-child { font-size: 18px; }
  /* Scoped to .orbit-leaf .poster-mount for the same reason as the 1280px rule above. */
  :root[data-theme="atlas"] .orbit-leaf .poster-mount { width: calc(100% - 40px); margin-top: 50px; }
  :root[data-theme="atlas"] .proof-index { right: -16px; }
  :root[data-theme="atlas"] .leaf-action { display: block; }
  :root[data-theme="atlas"] .leaf-action .primary-action { width: 100%; }
  :root[data-theme="atlas"] .leaf-action p { text-align: left; margin-top: 12px; }
  :root[data-theme="atlas"][data-focus="map"] .sky-leaf,
  :root[data-theme="atlas"][data-focus="sky"] .map-leaf { opacity: 1; filter: none; }

  :root[data-theme="atlas"] .making,
  :root[data-theme="atlas"] .print-ledger { padding: 70px 20px; }
  :root[data-theme="atlas"] .making-grid { padding-top: 36px; }
  :root[data-theme="atlas"] .making-title-block h2,
  :root[data-theme="atlas"] .print-ledger h2 { font-size: 47px; }
  :root[data-theme="atlas"] .process-list li { grid-template-columns: 1fr; }
  :root[data-theme="atlas"] .process-list span { grid-row: auto; margin-bottom: 8px; }
  :root[data-theme="atlas"] .process-list strong { font-size: 23px; }
  :root[data-theme="atlas"] .data-crossing > div:not(.crossing-mark) { padding: 55px 20px; }
  :root[data-theme="atlas"] .data-crossing strong { font-size: 36px; }
  :root[data-theme="atlas"] .ledger-table > div { grid-template-columns: 1fr auto; }
  :root[data-theme="atlas"] .ledger-table > div span:nth-child(2) { display: none; }
  :root[data-theme="atlas"] .ledger-note { margin-top: 15px; }
  :root[data-theme="atlas"] .closing-commission { padding: 85px 20px; }
  :root[data-theme="atlas"] .closing-commission h2 { font-size: 55px; }
  :root[data-theme="atlas"] .closing-commission > div:last-child { display: grid; }
  :root[data-theme="atlas"] .closing-commission a { width: 100%; }
  :root[data-theme="atlas"] .closing-orbit { width: 135vw; height: 72vw; }
}