/* v1.0 (2026-09-29): the launch version, forked from v094. Approved colours fixed; design-options
   panel, pickers and unused presets removed. Lineage below. */
/* Working draft v0.9.2: Option 2, The Stack, with the Sep 22 decisions.
   Forked from d2/d2.css on 2026-09-23. The d2 rules below are unchanged; every
   v0.9.2 change is in the block at the end of this file, so a diff against
   d2/d2.css shows exactly what the review changed. */

/* ------------------------------------------------------------- tokens -- */
:root {
  --well: #E1DDD4;
  --sheet: #FCFBF9;
  --sheet-up: #FFFFFF;
  --sheet-2: #F1EEE8;
  --sheet-3: #E9E5DD;
  --sink: #D8D3C9;
  --sh: 28 32% 16%;
  --e1: 0 1px 1px hsl(var(--sh) / 0.08), 0 3px 6px -2px hsl(var(--sh) / 0.14);
  --e2: 0 1px 2px hsl(var(--sh) / 0.08), 0 8px 18px -6px hsl(var(--sh) / 0.20), 0 22px 44px -18px hsl(var(--sh) / 0.18);
  --e3: 0 2px 4px hsl(var(--sh) / 0.10), 0 18px 34px -10px hsl(var(--sh) / 0.28), 0 46px 84px -28px hsl(var(--sh) / 0.30);
  --lip: inset 0 1px 0 rgb(255 255 255 / 0.9);
  --press: inset 0 1px 2px hsl(var(--sh) / 0.16), inset 0 0 0 1px hsl(var(--sh) / 0.06);
  --sc-r-sm: 4px; --sc-r-md: 4px; --sc-r-lg: 4px;
  --r: 4px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --well: #090807; --sheet: #1E1C19; --sheet-up: #292621; --sheet-2: #171513; --sheet-3: #121110; --sink: #050505;
    --sh: 0 0% 0%;
    --e1: 0 1px 1px hsl(var(--sh) / 0.5), 0 3px 6px -2px hsl(var(--sh) / 0.6);
    --e2: 0 1px 2px hsl(var(--sh) / 0.5), 0 8px 18px -6px hsl(var(--sh) / 0.7), 0 22px 44px -18px hsl(var(--sh) / 0.7);
    --e3: 0 2px 4px hsl(var(--sh) / 0.5), 0 18px 34px -10px hsl(var(--sh) / 0.8), 0 46px 84px -28px hsl(var(--sh) / 0.9);
    --lip: inset 0 1px 0 rgb(255 255 255 / 0.09);
    --press: inset 0 1px 3px hsl(var(--sh) / 0.8), inset 0 0 0 1px rgb(255 255 255 / 0.04);
  }
}
:root[data-theme="dark"] {
  --well: #090807; --sheet: #1E1C19; --sheet-up: #292621; --sheet-2: #171513; --sheet-3: #121110; --sink: #050505;
  --sh: 0 0% 0%;
  --e1: 0 1px 1px hsl(var(--sh) / 0.5), 0 3px 6px -2px hsl(var(--sh) / 0.6);
  --e2: 0 1px 2px hsl(var(--sh) / 0.5), 0 8px 18px -6px hsl(var(--sh) / 0.7), 0 22px 44px -18px hsl(var(--sh) / 0.7);
  --e3: 0 2px 4px hsl(var(--sh) / 0.5), 0 18px 34px -10px hsl(var(--sh) / 0.8), 0 46px 84px -28px hsl(var(--sh) / 0.9);
  --lip: inset 0 1px 0 rgb(255 255 255 / 0.09);
  --press: inset 0 1px 3px hsl(var(--sh) / 0.8), inset 0 0 0 1px rgb(255 255 255 / 0.04);
}

/* --------------------------------------------------------------- page -- */
html { scroll-padding-top: 24px; }
body { background: var(--well); padding-bottom: calc(104px + env(safe-area-inset-bottom, 0px)); }
.wrap { width: 100%; max-width: 1312px; margin-inline: auto; padding-inline: var(--gut); }
.band { padding-block: 48px; }
h1 { font-size: 2.125rem; line-height: 1.05; letter-spacing: -0.015em; text-transform: uppercase; }
h2 { font-size: 1.75rem; line-height: 1.1; letter-spacing: -0.01em; text-transform: uppercase; }
h3 { font-size: 1.25rem; line-height: 1.15; text-transform: uppercase; letter-spacing: 0.01em; }
.kicker { font-family: var(--sc-font-display); font-weight: 700; font-size: 1rem; letter-spacing: 0.08em; text-transform: uppercase; }
.lede { font-family: var(--sc-font-display); font-weight: 600; font-size: 1.25rem; line-height: 1.3; }
.bestfor { position: relative; padding-left: 20px; font-size: 1rem; color: var(--sc-ink-soft); }
.bestfor::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 8px; height: 8px; background: var(--sc-accent); }
.btn { border-radius: var(--r); }
.btn[hidden] { display: none; }
.btn--line { background: var(--sheet); box-shadow: inset 0 0 0 1px var(--sc-ink), var(--e1); }
.theme-icon { border-radius: var(--r); }

/* A sheet: the basic raised surface. */
.sheet { position: relative; background: var(--sheet); border-radius: var(--r); box-shadow: var(--lip), var(--e2); }
/* A stack: a sheet with two more showing beneath its bottom edge. */
.stack { position: relative; isolation: isolate; }
.stack::before, .stack::after { content: ""; position: absolute; z-index: -1; top: 24px; bottom: 0; border-radius: var(--r); box-shadow: var(--e1); }
.stack::before { left: 10px; right: 10px; background: var(--sheet-2); transform: translateY(8px); }
.stack::after { left: 22px; right: 22px; background: var(--sheet-3); transform: translateY(16px); z-index: -2; }
/* A photograph lying on the page as its own panel. */
.photo { position: relative; margin: 0; border-radius: var(--r); background: var(--sheet-3); box-shadow: var(--e3); overflow: hidden; }
.photo img { width: 100%; height: 100%; object-fit: cover; }

/* ---------------------------------------------------------------- bar --
   Phone: a slim masthead that scrolls away. Desktop: a floating inset bar. */
.bar { position: relative; z-index: 60; padding: 12px 12px 0; }
.bar__in { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 56px; }
.bar__home { display: inline-flex; align-items: center; gap: 12px; min-height: 48px; padding-inline: 8px; text-decoration: none; font-family: var(--sc-font-display); font-weight: 700; font-size: 1.0625rem; letter-spacing: 0.05em; text-transform: uppercase; white-space: nowrap; border-radius: var(--r); }
.bar__home img { width: 36px; height: 36px; }
.bar__home span span { display: none; }
.bar__nav { display: none; }
.bar__side { display: flex; align-items: center; gap: 4px; }
.bar__cta { min-height: 44px; padding: 8px 16px; box-shadow: var(--e1); }
@media (max-width: 439px) { .bar__home > span { display: none; } }

.navlink { position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding-inline: 16px; font-family: var(--sc-font-display); font-weight: 700; font-size: 1rem; letter-spacing: 0.05em; text-transform: uppercase; text-decoration: none; color: inherit; background: none; border: 0; border-radius: var(--r); cursor: pointer; }
.navlink svg { width: 12px; height: 12px; transition: transform 180ms var(--sc-ease-out); }
.navlink[aria-expanded="true"] svg { transform: rotate(180deg); }
.navlink[aria-current]::after, .navlink.is-here::after { content: ""; position: absolute; left: 16px; bottom: 4px; width: 8px; height: 4px; background: var(--sc-accent); }
.navlink:active { transform: translateY(1px); }
@media (hover: hover) and (pointer: fine) { .navlink:hover { background: var(--sheet-2); } }

/* The Spaces menu, shared by the desktop panel and the phone sheet. */
.menu { position: absolute; z-index: 5; display: grid; gap: 4px; padding: 8px; background: var(--sheet); border-radius: var(--r); box-shadow: var(--lip), var(--e3); }
.menu[hidden] { display: none; }
.menu a { position: relative; display: grid; gap: 2px; min-height: 64px; align-content: center; padding: 8px 16px 8px 36px; text-decoration: none; border-radius: var(--r); }
.menu a b { font-family: var(--sc-font-display); font-weight: 700; font-size: 1.125rem; text-transform: uppercase; letter-spacing: 0.02em; }
.menu a small { font-size: 1rem; color: var(--sc-ink-soft); }
.menu a::before { content: ""; position: absolute; left: 16px; top: 50%; width: 8px; height: 8px; margin-top: -4px; background: var(--sc-ink-soft); opacity: 0.35; }
.menu a[aria-current]::before { background: var(--sc-accent); opacity: 1; }
.menu a[aria-current] { background: var(--sheet-2); box-shadow: var(--press); }
.menu a:active { transform: translateY(1px); }
@media (hover: hover) and (pointer: fine) { .menu a:hover { background: var(--sheet-2); } }
.menu--top { top: calc(100% + 12px); left: 0; width: 360px; transform-origin: top left; }
.menu--top:not([hidden]) { animation: menu-drop 200ms var(--sc-ease-out); }
@keyframes menu-drop { from { opacity: 0; transform: translateY(-8px) scale(0.98); } }

/* ------------------------------------------------------- phone toolbar -- */
.dock { position: fixed; z-index: 58; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
.dock__row { display: flex; align-items: stretch; padding: 4px; gap: 2px; background: var(--sheet); border-radius: var(--r); box-shadow: var(--lip), var(--e3); }
.dock__row > * { flex: 1 1 auto; display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 6px; font-family: var(--sc-font-display); font-weight: 700; font-size: 1rem; letter-spacing: 0.01em; text-decoration: none; color: inherit; background: none; border: 0; border-radius: 3px; cursor: pointer; white-space: nowrap; position: relative; }
.dock__row > *:active { transform: translateY(1px); }
.dock__row > [aria-current], .dock__row > .is-here, .dock__row > [aria-expanded="true"] { background: var(--sheet-2); box-shadow: var(--press); }
.dock__row > [aria-current]::after, .dock__row > .is-here::after { content: ""; position: absolute; left: 50%; bottom: 6px; width: 8px; height: 4px; margin-left: -4px; background: var(--sc-accent); }
.dock__row > .dock__quote { background: var(--sc-accent); color: var(--sc-accent-ink); padding-inline: 12px; }
.menu--sheet { left: 0; right: 0; bottom: calc(100% + 8px); transform-origin: bottom center; }
.menu--sheet:not([hidden]) { animation: menu-rise 240ms var(--sc-ease-drawer); }
.menu--sheet h2 { font-size: 1rem; letter-spacing: 0.08em; padding: 12px 16px 4px; color: var(--sc-ink-soft); }
@keyframes menu-rise { from { opacity: 0; transform: translateY(24px); } }
@media (max-width: 359px) { .dock { left: 8px; right: 8px; } .dock__row > * { padding-inline: 4px; letter-spacing: 0; } }

/* --------------------------------------------------------------- hero -- */
.hero { padding-block: 16px 56px; }
.hero__set { position: relative; display: grid; }
.hero__logo .sheet { padding: 28px 24px; }
.hero__red { display: none; }
.hero__card { position: relative; z-index: 2; margin: -12px 0 0 28px; padding: 24px; display: grid; gap: 20px; justify-items: start; box-shadow: var(--lip), var(--e3); }
.hero__card .lede { max-width: 26ch; }

/* ------------------------------------------------------------- spaces -- */
.sec-head { display: grid; gap: 12px; margin-bottom: 32px; }
.space { position: relative; background: var(--sheet); border-radius: var(--r); box-shadow: var(--lip), var(--e2); }
.space + .space { margin-top: 40px; }
.space__tab { display: grid; gap: 4px; padding: 16px 20px; border-bottom: 1px solid var(--sc-hairline); }
.space__body { display: grid; gap: 24px; padding: 0 20px 24px; }
.space__photo { aspect-ratio: 3 / 2; margin: 20px -28px 0 8px; transition: transform 220ms var(--sc-ease-out); }
.space__text { display: grid; gap: 20px; justify-items: start; align-content: center; }
.space__text .spec { width: 100%; }
@media (hover: hover) and (pointer: fine) { .space:hover .space__photo { transform: translateY(-6px); } }

/* ------------------------------------------------------------ support -- */
.support { display: grid; gap: 40px; }
.duo { position: relative; padding: 0 0 56px 0; }
.duo .photo:first-child { aspect-ratio: 3 / 2; margin-right: 40px; }
.duo .photo + .photo { position: absolute; right: 0; bottom: 0; width: 52%; aspect-ratio: 4 / 3; }
.rooms { list-style: none; margin: 24px 0 0; padding: 0; display: grid; }
.rooms li { display: grid; gap: 4px; padding-block: 16px; border-top: 1px solid var(--sc-hairline-strong); }
.rooms li b { font-family: var(--sc-font-display); font-weight: 700; font-size: 1.125rem; text-transform: uppercase; letter-spacing: 0.02em; }
.support__text .btn { margin-top: 24px; }

/* ----------------------------------------------------------- location -- */
.where { display: grid; }
.where .photo { aspect-ratio: 3 / 2; margin-left: 28px; }
.where__card { position: relative; z-index: 2; margin: -32px 28px 0 0; padding: 24px; display: grid; gap: 16px; justify-items: start; box-shadow: var(--lip), var(--e3); }
address { font-style: normal; font-family: var(--sc-font-display); font-weight: 700; font-size: 1.5rem; line-height: 1.15; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; }

/* -------------------------------------------------------------- quote -- */
.quote { display: grid; gap: 32px; }
.quote__aside { display: grid; gap: 12px; align-content: start; }
.quote__list { font-family: var(--sc-font-display); font-weight: 700; font-size: 1.25rem; line-height: 1.2; text-transform: uppercase; }
.quote__panel { max-width: 720px; width: 100%; }
.quote__panel .sheet { padding: 24px 20px; }
form { display: grid; gap: 24px; }
.steps__meter { background: var(--sheet-3); box-shadow: var(--press); height: 6px; border-radius: 2px; }
.steps__stage { min-height: 312px; display: grid; align-content: start; }
[data-step] { display: grid; gap: 20px; align-content: start; }
[data-step] + [data-step] { margin-top: 32px; }
.is-stepped [data-step] + [data-step] { margin-top: 0; }
.q, .field > label.q { font-family: var(--sc-font-display); font-weight: 700; font-size: 1.375rem; line-height: 1.2; letter-spacing: 0; }
legend.q { padding: 0; margin-bottom: 20px; }
.picks { display: grid; gap: 12px; }
.pair { display: grid; gap: 20px; }
.field input, .field select, .field textarea { border-radius: var(--r); background: var(--sheet-2); box-shadow: var(--press); border-color: transparent; }
.field :is(input, select, textarea):hover { border-color: var(--sc-ink-soft); }
.pick__box { border-radius: var(--r); background: var(--sheet); box-shadow: inset 0 0 0 1px var(--sc-hairline-strong), var(--e1); transition: transform 160ms var(--sc-ease-out); }
.pick:hover .pick__box { box-shadow: inset 0 0 0 1px var(--sc-ink), var(--e1); }
.pick input:checked + .pick__box { background: var(--sheet-2); box-shadow: inset 0 0 0 2px var(--sc-ink), inset 0 -6px 0 var(--sc-accent); }
@media (hover: hover) and (pointer: fine) { .pick:hover input:not(:checked) + .pick__box { transform: translateY(-2px); } }
.form-error { border-radius: var(--r); background: var(--sheet-2); }
.form-done { border-radius: var(--r); background: transparent; padding: 0; box-shadow: none; }
.form-done h2 { font-size: 1.5rem; }
.form-done::before { content: ""; display: block; width: 48px; height: 8px; background: var(--sc-accent); margin-bottom: 20px; }

/* ------------------------------------------------------------- footer -- */
/* v0.9.3 (Marc, 2026-09-24): two centred lines, the address and the credit,
   smaller than the old 17px address line, with room between them. */
.foot { padding-block: 40px 16px; display: grid; justify-items: center; gap: 24px; text-align: center; }
.foot p { font-size: 0.875rem; color: var(--sc-ink-soft); }
.foot span { white-space: nowrap; } /* a phone breaks the address at the dots */

/* ------------------------------------------------------- detail pages -- */
.dtop { padding-block: 16px 40px; }
.dtop__set { display: grid; }
.dtop .photo { aspect-ratio: 3 / 2; margin-left: 28px; }
.dtop__set--duo .dhead { margin-top: -20px; }
.dhead { position: relative; z-index: 2; margin: -40px 28px 0 0; padding: 24px; display: grid; gap: 16px; box-shadow: var(--lip), var(--e3); }
.dhead .lede { max-width: 30ch; }
.dduo { position: relative; padding-bottom: 56px; }
.dduo .photo:first-child { margin-right: 48px; margin-left: 0; }
.dduo .photo + .photo { position: absolute; right: 0; bottom: 0; width: 44%; aspect-ratio: 4 / 3; margin: 0; z-index: 1; }

.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; }
.tile { position: relative; display: grid; gap: 8px; align-content: space-between; min-height: 112px; padding: 16px; background: var(--sheet); border-radius: var(--r); box-shadow: var(--lip), var(--e1); transition: transform 180ms var(--sc-ease-out); }
.tile::after { content: ""; position: absolute; inset: 0; border-radius: var(--r); box-shadow: var(--e3); opacity: 0; transition: opacity 180ms var(--sc-ease-out); pointer-events: none; z-index: -1; }
.tile dt { font-size: 1rem; color: var(--sc-ink-soft); }
.tile dd { margin: 0; font-family: var(--sc-font-display); font-weight: 700; font-size: 1.25rem; line-height: 1.2; }
.tile--tbc { background: var(--sink); box-shadow: var(--press); }
.tile--tbc dd { font-family: var(--sc-font-text); font-weight: 400; font-size: 1rem; font-style: italic; color: var(--sc-ink-soft); }
.tile--room { grid-column: 1 / -1; align-content: start; min-height: 0; gap: 8px; }
.tile--room dt { font-family: var(--sc-font-display); font-weight: 700; font-size: 1.25rem; line-height: 1.2; text-transform: uppercase; letter-spacing: 0.01em; color: var(--sc-ink); }
.tile--room dd { font-family: var(--sc-font-text); font-weight: 400; font-size: 1.0625rem; line-height: 1.5; color: var(--sc-ink-soft); }
.tile p { font-size: 1rem; color: var(--sc-ink-soft); }
@media (hover: hover) and (pointer: fine) {
  .tile:not(.tile--tbc):hover { transform: translateY(-4px); z-index: 1; }
  .tile:not(.tile--tbc):hover::after { opacity: 1; }
}
.figures { margin-top: 20px; font-size: 1rem; color: var(--sc-ink-soft); max-width: 64ch; }

.close { display: grid; gap: 0; }
.close__list { padding: 24px; display: grid; gap: 16px; align-content: start; }
.close__list h2 { font-size: 1.5rem; }
.dtop__red { display: none; }
.close__cta { position: relative; z-index: 2; margin: -12px 0 0 28px; padding: 24px; display: grid; gap: 20px; justify-items: start; align-content: center; background: var(--sc-accent); color: var(--sc-accent-ink); border-radius: var(--r); box-shadow: var(--e3); }
.close__cta :focus-visible { outline-color: var(--sc-accent-ink); }
.close__cta .btn { white-space: normal; text-align: center; box-shadow: var(--e1); }
.close__cta p { max-width: 32ch; font-weight: 500; }

.pager { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 32px; }
.pager a { position: relative; display: grid; gap: 4px; min-height: 88px; align-content: center; padding: 16px; text-decoration: none; background: var(--sheet); border-radius: var(--r); box-shadow: var(--lip), var(--e1); transition: transform 180ms var(--sc-ease-out); }
.pager a::after { content: ""; position: absolute; inset: 0; border-radius: var(--r); box-shadow: var(--e2); opacity: 0; transition: opacity 180ms var(--sc-ease-out); pointer-events: none; }
.pager a span { font-size: 1rem; color: var(--sc-ink-soft); }
.pager a b { font-family: var(--sc-font-display); font-weight: 700; font-size: 1.25rem; text-transform: uppercase; letter-spacing: 0.01em; }
.pager a + a { text-align: right; }
.pager a:active { transform: translateY(1px); }
@media (hover: hover) and (pointer: fine) { .pager a:hover { transform: translateY(-3px); } .pager a:hover::after { opacity: 1; } }

/* The top of the pile: cards that cross another panel sit a shade lighter. */
.hero__card, .where__card, .dhead, .menu, .dock__row { background: var(--sheet-up); }

/* ------------------------------------------------------------ tablet+ -- */
@media (min-width: 700px) {
  .band { padding-block: 64px; }
  h1 { font-size: 2.5rem; }
  h2 { font-size: 2rem; }
  .picks { grid-template-columns: repeat(3, 1fr); }
  .pair { grid-template-columns: 1fr 1fr; }
  .steps__stage { min-height: 232px; }
  .quote__panel .sheet { padding: 32px; }
  .tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
  .tiles--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tiles--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tile { min-height: 128px; padding: 20px; }
  .tile--room { grid-column: auto; min-height: 0; padding: 24px; }
  .hero__logo .sheet { padding: 40px; }
  .space__body { grid-template-columns: 1fr 1fr; gap: 32px; padding: 0 32px 32px 0; }
  .space__tab { padding: 16px 32px; grid-template-columns: 1fr auto; align-items: baseline; }
  .space__photo { margin: 32px 0 0 -16px; }
  .space__text { padding-top: 32px; }
}

/* ------------------------------------------------------------ desktop -- */
@media (min-width: 900px) {
  html { scroll-padding-top: 120px; }
  body { padding-top: 96px; padding-bottom: 0; }
  .band { padding-block: 64px; }
  h1 { font-size: 3rem; }
  h2 { font-size: 2.5rem; }
  .lede { font-size: 1.375rem; }
  .dock { display: none; }

  .bar { position: fixed; top: 16px; left: 0; right: 0; padding: 0 var(--gut); pointer-events: none; }
  .bar__in { pointer-events: auto; position: relative; max-width: 1184px; margin-inline: auto; min-height: 64px; padding: 8px 8px 8px 12px; background: var(--sheet); border-radius: var(--r); box-shadow: var(--lip), var(--e3); gap: 16px; }
  .bar__home span span { display: inline; }
  .bar__nav { display: flex; align-items: center; gap: 4px; margin-right: auto; margin-left: 16px; position: relative; }
  .bar__side { gap: 8px; }
  .bar__cta { min-height: 48px; padding: 12px 24px; box-shadow: none; }

  .hero { padding-block: 24px 120px; }
  .hero__set { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; }
  .hero__logo { grid-column: 1 / 10; grid-row: 1; z-index: 1; }
  .hero__logo .sheet { padding: 48px 112px 48px 56px; }
  .hero__red { display: grid; align-content: end; grid-column: 9 / 13; grid-row: 1; margin-top: 40px; height: 52%; padding: 24px 24px 64px 120px; background: var(--sc-accent); color: var(--sc-accent-ink); border-radius: var(--r); box-shadow: var(--e1); font-family: var(--sc-font-display); font-weight: 700; font-size: 1.125rem; line-height: 1.25; letter-spacing: 0.02em; text-transform: uppercase; }
  .hero__card { grid-column: 9 / 13; grid-row: 1; align-self: end; margin: 0 0 -64px 0; padding: 32px; }

  .sec-head { grid-template-columns: 5fr 7fr; align-items: end; gap: 24px; margin-bottom: 48px; }
  .space__body { grid-template-columns: 7fr 5fr; gap: 48px; padding: 0 48px 40px 0; }
  .space__photo { margin: 32px 0 0 -32px; aspect-ratio: 16 / 9; }
  .space__tab { padding: 0 48px; min-height: 64px; align-items: center; }
  .space__text { padding-top: 32px; }
  .space + .space { margin-top: 48px; }

  .support { grid-template-columns: 7fr 5fr; gap: 72px; align-items: center; }
  .duo { padding: 0 0 88px; }
  .duo .photo:first-child { margin-right: 96px; }
  .duo .photo + .photo { width: 46%; }

  .where { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: center; }
  .where .photo { grid-column: 5 / 13; grid-row: 1; margin: 0; aspect-ratio: 16 / 10; }
  .where__card { grid-column: 1 / 7; grid-row: 1; margin: 0; padding: 40px; gap: 20px; }
  address { font-size: 2rem; }

  .quote { grid-template-columns: 4fr 8fr; gap: 64px; align-items: start; }
  .quote__aside { position: sticky; top: 128px; }
  .quote__panel { justify-self: end; }
  .quote__panel .sheet { padding: 40px; }

  .foot { padding-block: 64px 40px; }

  .dtop { padding-block: 24px 64px; }
  .dtop__set { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; }
  .dtop .photo { grid-column: 5 / 13; grid-row: 1; margin: 0; aspect-ratio: 16 / 10; }
  .dhead { grid-column: 1 / 7; grid-row: 1; align-self: end; margin: 0 0 -48px 0; padding: 40px; gap: 20px; }
  .dduo { grid-column: 4 / 13; grid-row: 1; padding-bottom: 0; }
  .dduo .photo:first-child { margin: 0 0 88px 120px; }
  .dduo .photo + .photo { left: 24%; right: auto; bottom: 0; width: 36%; z-index: 2; }
  .dtop__set--duo .dhead { grid-column: 1 / 6; align-self: start; margin: 48px 0 0; }

  .close { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: stretch; }
  .close__list { grid-column: 1 / 9; grid-row: 1; padding: 40px 120px 40px 40px; }
  .close__cta { grid-column: 8 / 13; grid-row: 1; margin: 40px 0 -40px; padding: 40px; }
  .included--2 { grid-template-columns: 1fr 1fr; gap: 12px 32px; }
  .pager { gap: 24px; margin-top: 88px; }
  .close__list h2 { font-size: 1.75rem; }
  .dtop__red { display: block; grid-column: 3 / 6; grid-row: 1; align-self: start; margin-top: 56px; height: 38%; background: var(--sc-accent); border-radius: var(--r); box-shadow: var(--e1); }
  .dtop .photo { z-index: 1; }
  .pager a { padding: 24px 32px; min-height: 104px; }
}

/* The three spaces pile up as the visitor scrolls: each card slides over the
   one before and leaves its name tab showing. Needs room and a willing eye. */
@media (min-width: 900px) and (min-height: 780px) and (prefers-reduced-motion: no-preference) {
  .space { position: sticky; top: calc(104px + var(--i, 0) * 64px); }
  .space__body { padding: 0 48px 40px 0; }
  .space__photo { margin: 32px 0 -72px 40px; }
  .spaces { padding-bottom: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .menu:not([hidden]) { animation: none; }
  .space__photo, .tile, .tile::after, .pager a, .pager a::after, .pick__box, .navlink svg { transition-duration: 1ms; }
  .space:hover .space__photo, .tile:hover, .pager a:hover { transform: none; }
}


/* ------------------------------------------------ one-screen openers --
   Marc, Sep 21: the opening block of every page fills exactly one screen,
   with a small arrow saying there is more. --opener-top is the opener's
   offset from the top of the page, measured in d2.js, so the masthead is
   counted. --dock-h is the phone toolbar, which sits over the bottom edge. */
:root { --dock-h: 84px; }
@media (min-width: 900px) { :root { --dock-h: 0px; } }
.hero, .dtop {
  position: relative; display: grid; align-content: center;
  min-height: calc(100svh - var(--opener-top, 88px));
  padding-block: 16px calc(var(--dock-h) + 64px);
}
.dtop .photo { max-height: calc(100svh - var(--opener-top, 88px) - var(--dock-h) - 260px); min-height: 160px; width: auto; }
.more {
  position: absolute; left: 50%; bottom: calc(var(--dock-h) + 8px); margin-left: -24px;
  display: grid; place-items: center; width: 48px; height: 48px; color: var(--sc-ink); border-radius: var(--r);
  animation: more-bob 2.4s var(--sc-ease-in-out, ease-in-out) infinite;
}
.more svg { width: 22px; height: 22px; }
@keyframes more-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } }
@media (min-width: 900px) {
  .hero, .dtop { padding-block: 24px 96px; }
  .dtop .photo { max-height: calc(100svh - var(--opener-top, 120px) - 200px); }
  .more { bottom: 16px; }
}
@media (prefers-reduced-motion: reduce) { .more { animation: none; } }

/* ------------------------------------------- the form fits one screen --
   On a phone the quote section is one screen tall, the toolbar included,
   so Back and Next never sit under it and no question needs a scroll. */
@media (max-width: 899px) {
  #quote { min-height: 100svh; padding-block: 20px calc(var(--dock-h) + 16px); display: grid; align-content: start; scroll-margin-top: 0; }
  #quote .quote { gap: 16px; }
  #quote .quote__aside { gap: 4px; }
  #quote .quote__aside .kicker, #quote .quote__list { display: none; }
  #quote .quote__panel .sheet { padding: 20px; }
  #quote form { gap: 16px; }
  #quote .steps__stage { min-height: 236px; }
  #quote .picks { gap: 8px; }
  #quote .pick__box { min-height: 56px; padding: 8px 16px; grid-template-columns: auto 1fr; align-items: center; column-gap: 12px; }
  #quote .pick__box small { text-align: right; }
  #quote .field textarea { min-height: 120px; }
}
/* Short phones (an iPhone SE is 568 to 667 tall): tighten rather than spill. */
@media (max-width: 899px) and (max-height: 700px) {
  #quote { padding-top: 12px; }
  #quote .quote__aside p { display: none; }
  #quote .steps__stage { min-height: 0; }
  #quote .quote__panel .sheet { padding: 16px; }
  #quote form { gap: 12px; }
  #quote .pick__box { min-height: 48px; }
  #quote .pick__box small { display: none; }
  #quote .field textarea { min-height: 96px; }
  .hero, .dtop { padding-block: 8px calc(var(--dock-h) + 52px); }
  .dtop .photo { max-height: 18svh; min-height: 96px; }
  .dduo .photo + .photo { display: none; }
  .dduo { padding-bottom: 0; }
  .dhead { padding: 16px; gap: 8px; margin-top: -24px; }
  .dhead .kicker { display: none; }
  .dhead h1, .dhead h2 { font-size: 1.5rem; }
  .dhead .lede { font-size: 1rem; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .more { bottom: calc(var(--dock-h) + 2px); }
}

/* The opener already ends under the phone toolbar, so the section after it
   needs almost no top padding of its own. */
@media (max-width: 899px) { .hero + .band, .dtop + .band { padding-top: 8px; } }

/* Marc, Sep 21: one Request a quote on screen at a time. On phones the toolbar's
   Quote is the one, so the top bar drops its own. The opener has none. */
@media (max-width: 899px) { .bar__cta { display: none; } }


/* =====================================================================
   v0.9.2 CHANGES (Sep 22 review, ledger D1 to D7)
   ===================================================================== */

/* D5: Play 700 until Brian's Erbaum embed arrives (see ERBAUM in build.mjs). */
@font-face { font-family: "Play"; font-weight: 700; font-display: swap; src: url("../assets/fonts/play-latin-700.woff2") format("woff2"); }

/* D4: the brighter red, and white on it everywhere. */
:root {
  --sc-accent: #FF2B00;
  --sc-accent-ink: #FFFFFF;
  --sc-font-display: "Play", "Arial Narrow", system-ui, sans-serif;
}
h1, h2, h3, .kicker, .lede, .navlink, .btn, .q, .menu a b, .tile dd, .pager a b, address, .quote__list, .dock__row > * { font-weight: 700; }
.btn--onred { background: #100F0E; color: #FFFFFF; }
.btn--onred::before { background: #FFFFFF; }
@media (hover: hover) and (pointer: fine) { .btn--onred:hover { color: #100F0E; } }
.close__cta, .close__cta p, .hero__red, .dock__row > .dock__quote { color: #FFFFFF; }

/* D4: type sized for older readers on a phone. Nothing reads below 16px,
   body copy is 18px. */
@media (max-width: 699px) {
  :root { --body: 1.125rem; }
  .soft, .measure, .tile dt, .menu a small, .figures, .bestfor, .foot p { font-size: 1rem; }
  .lede { font-size: 1.3125rem; }
  .q, .field > label.q { font-size: 1.4375rem; }
}

/* D4: sun and moon. The icon shows the mode a press switches to. */
.theme-icon svg { width: 22px; height: 22px; }
.theme-icon .ic-moon { display: none; }
:root[data-theme="light"] .theme-icon .ic-sun { display: none; }
:root[data-theme="light"] .theme-icon .ic-moon { display: block; }

/* D4: the reworked top bar. Flat and full width, not a floating card, so it
   reads as the page's frame rather than one more sheet on the pile. */
.bar__side { position: relative; }
.menu--contact { right: 0; left: auto; width: 320px; }
.menu--amen { left: 150px; }
@media (min-width: 900px) {
  body { padding-top: 80px; }
  html { scroll-padding-top: 104px; }
  .bar { top: 0; padding: 0; }
  .bar__in { max-width: none; min-height: 72px; padding: 8px var(--gut); border-radius: 0; background: var(--sheet-up); box-shadow: 0 1px 0 var(--sc-hairline-strong), var(--e1); }
  .bar__nav { margin-left: 24px; }
  .bar__cta { min-height: 48px; padding: 12px 24px; }
  .space { top: calc(96px + var(--i, 0) * 64px); }
  .quote__aside { top: 104px; }
}
:root[data-theme="dark"] .bar__in { background: #0B0A09; }
/* Phones keep Contact in the toolbar; the top bar is the name and the switch. */

/* The contact panel: call first, then the form (D3). */
.call { display: flex; align-items: center; gap: 16px; min-height: 64px; padding: 12px 20px; border-radius: var(--r); text-decoration: none; background: var(--sc-accent); color: #FFFFFF; box-shadow: var(--e1); }
.call svg { width: 28px; height: 28px; flex: none; }
.call span { display: grid; gap: 2px; }
.call small, .menu .call small { font-size: 1rem; font-weight: 500; color: #FFFFFF; }
.call b { font-family: var(--sc-font-display); font-size: 1.5rem; line-height: 1.1; letter-spacing: 0.02em; }
.call:active { transform: translateY(1px); }
@media (hover: hover) and (pointer: fine) { .call:hover { background: #E02600; } }
.call--menu { margin: 4px; }
.call--onred { background: #100F0E; justify-self: stretch; }
@media (hover: hover) and (pointer: fine) { .call--onred:hover { background: #2A2724; } }
.call--big { margin-top: 8px; justify-self: start; }
.call__note { font-size: 0.9375rem; color: var(--sc-ink-soft); padding-inline: 8px; }
.close__cta .call__note { color: #FFFFFF; opacity: 0.85; padding: 0; }
.menu .call { display: flex; padding: 12px 20px; min-height: 72px; }
.menu .call::before { display: none; }
.menu__quote b, .menu__all b { font-family: var(--sc-font-display); }
.steps__minute { font-size: 1rem; color: var(--sc-ink-soft); }
.steps__bar { display: grid; gap: 4px; }

/* D2: the hero is Option 2's, with the logo standing on the page instead of a
   card (Marc, Sep 23). The opening film's logo and line are placed on exactly
   these two elements, so when the film fades they are already where they land. */
.hero__logo { position: relative; z-index: 1; padding: 20px 8px 28px; }
.hero__replay { justify-self: start; min-height: 44px; padding: 0; background: none; border: 0; cursor: pointer; font-size: 1rem; color: var(--sc-ink-soft); }
@media (min-width: 700px) { .hero__logo { padding: 32px 16px; } }
@media (min-width: 900px) { .hero__logo { padding: 48px 112px 48px 56px; } }

/* D2: the opening overlay. Hidden unless the head script or the replay button
   has set .film-open, so the page never flashes a film nobody will see. */
.film { display: none; }
.film-open .film { position: fixed; inset: 0; z-index: 100; display: block; background: #0B0A09; transition: opacity 1800ms ease-in-out; }
.film-open { overflow: hidden; }
.film.is-leaving { opacity: 0; pointer-events: none; }
.film video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* The logo and line are fixed to the rectangles of their hero twins, measured
   in v092.js, so they appear over the dragon exactly where the page has them. */
.film__word, .film__line { position: fixed; z-index: 1; margin: 0; }
.film .on-light { display: none; }
.film .on-dark { display: block; }
.film__word { filter: drop-shadow(0 4px 24px rgb(0 0 0 / 0.55)); }
.film__line { font-family: var(--sc-font-display); color: #FFFFFF; text-shadow: 0 2px 16px rgb(0 0 0 / 0.7); }
.film__word, .film__line { opacity: 0; transform: translateY(28px); transition: opacity 700ms var(--sc-ease-out), transform 900ms var(--sc-ease-out); }
.film__line { transition-delay: 350ms; }
.film.has-words .film__word, .film.has-words .film__line { opacity: 1; transform: none; }
.film__skip { position: absolute; z-index: 2; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); min-height: 48px; padding: 10px 20px; font: 700 1rem/1 var(--sc-font-display); letter-spacing: 0.04em; text-transform: uppercase; color: #FFFFFF; background: rgb(11 10 9 / 0.6); border: 1px solid rgb(255 255 255 / 0.5); border-radius: var(--r); cursor: pointer; }
@media (hover: hover) and (pointer: fine) { .film__skip:hover { background: var(--sc-accent); border-color: var(--sc-accent); } }

/* D1: bigger pictures in the stack. */
@media (min-width: 700px) {
  .space__body { grid-template-columns: 3fr 2fr; }
}
@media (min-width: 900px) {
  .space__body { grid-template-columns: 8fr 4fr; gap: 40px; }
  .space__photo { aspect-ratio: 3 / 2; }
}
@media (min-width: 900px) and (min-height: 780px) and (prefers-reduced-motion: no-preference) {
  .space__photo { margin: 24px 0 -40px 24px; aspect-ratio: auto; height: min(56svh, 36vw); }
}

/* D1: any picture opens full frame on a layer, with an X. */
[data-zoom] { cursor: zoom-in; }
.zoom { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgb(6 5 5 / 0.96); color: #FFFFFF; }
.zoom::backdrop { background: rgb(6 5 5 / 0.96); }
.zoom[open] { display: grid; place-items: center; animation: zoom-in 200ms var(--sc-ease-out); }
.zoom img { width: 100%; height: 100%; object-fit: contain; padding: 64px 12px 24px; }
.zoom figcaption { position: absolute; left: 16px; right: 80px; bottom: 16px; font-size: 1rem; color: rgb(255 255 255 / 0.85); }
.zoom__x { position: absolute; top: 12px; right: 12px; display: grid; place-items: center; width: 56px; height: 56px; color: #FFFFFF; background: rgb(255 255 255 / 0.12); border: 1px solid rgb(255 255 255 / 0.4); border-radius: var(--r); cursor: pointer; }
.zoom__x svg { width: 24px; height: 24px; }
@media (hover: hover) and (pointer: fine) { .zoom__x:hover { background: var(--sc-accent); border-color: var(--sc-accent); } }
html:has(.zoom[open]) { overflow: hidden; }
@keyframes zoom-in { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .zoom[open] { animation: none; } }

/* ---------------------------------------------------------------------
   DRG260: three state options for Brian, switched from the footer.
   A · Bar: a full-width red bar under the current page.
   B · Dot: a larger red square before the current page.
   C · Fill: the current page filled red with white type.
   Every option: hover shows a quieter version, a press sinks 1px.
   --------------------------------------------------------------------- */
.navlink[aria-current]::after, .navlink.is-here::after,
.dock__row > [aria-current]::after, .dock__row > .is-here::after { content: none; }
.menu a::before { display: none; }
.menu a { padding-left: 20px; }

/* A · Bar (default) */
.navlink::after { content: ""; position: absolute; left: 16px; right: 16px; bottom: 6px; width: auto; height: 4px; background: var(--sc-accent); transform: scaleX(0); transform-origin: left; transition: transform 180ms var(--sc-ease-out); }
.navlink[aria-current]::after, .navlink.is-here::after { content: ""; left: 16px; right: 16px; width: auto; bottom: 6px; transform: scaleX(1); }

/* Brian, Sep 25: the hover line is red (it was --sc-ink-soft gray). On the
   red nav bar the accent is black, so there the line is black. */
@media (hover: hover) and (pointer: fine) { .navlink:not([aria-current]):not(.is-here):hover::after { transform: scaleX(1); background: var(--sc-accent); height: 2px; } .navlink:hover { background: none; } }
.dock__row > [aria-current]::after, .dock__row > .is-here::after { content: ""; position: absolute; left: 16%; right: 16%; bottom: 6px; height: 4px; background: var(--sc-accent); }
.menu a[aria-current] { box-shadow: inset 4px 0 0 var(--sc-accent); background: var(--sheet-2); }

/* B · Dot */


/* C · Fill */


.navlink:active, .dock__row > *:active, .menu a:active { transform: translateY(1px); }

/* The switcher itself moved to the design-options panel (Phase 2b); its
   buttons reuse .options-row button below. */


/* =====================================================================
   HERO (Marc, Sep 23: option C, "the pile begins"). The line and address
   stand under the logo with no card; the three space tabs sit on the right as
   the top of the pile and scroll down to their cards in the stack.
   ===================================================================== */
.hero--opts .hero__logo { padding: 0; width: 100%; max-width: 760px; }
.hero--opts .hero__set { gap: 28px; }
.hero__text { position: relative; z-index: 2; display: grid; gap: 16px; justify-items: start; }
.hero__text .lede { max-width: 24ch; font-size: 1.5rem; }
.hero__addr { display: flex; align-items: center; gap: 12px; font-family: var(--sc-font-display); font-weight: 700; font-size: 1rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sc-ink-soft); }
.hero__addr i { width: 12px; height: 12px; background: var(--sc-accent); flex: none; }
.hero__peek { display: grid; gap: 0; margin-top: 8px; }
.hero__peek a { position: relative; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px; min-height: 60px; padding: 12px 20px; text-decoration: none; background: var(--sheet); border-radius: var(--r) var(--r) 0 0; box-shadow: var(--lip), 0 -1px 0 var(--sc-hairline), var(--e1); transition: transform 180ms var(--sc-ease-out); }
.hero__peek a + a { margin-top: -8px; }
.hero__peek a:nth-child(2) { margin-inline: 10px; background: var(--sheet-2); }
.hero__peek a:nth-child(3) { margin-inline: 22px; background: var(--sheet-3); }
.hero__peek b { font-family: var(--sc-font-display); font-size: 1.125rem; text-transform: uppercase; letter-spacing: 0.02em; }
.hero__peek small { font-size: 1rem; color: var(--sc-ink-soft); }
@media (hover: hover) and (pointer: fine) { .hero__peek a:hover { transform: translateY(-6px); } }
@media (max-width: 699px) { .hero__peek small { display: none; } }

/* Scroll targets for the pile's tabs. Plain flow elements in front of each
   card; the margin matches where each card sticks. */
.space-anchor { display: block; height: 0; scroll-margin-top: 16px; }
@media (min-width: 900px) { .space-anchor { scroll-margin-top: 96px; } }
@media (min-width: 900px) and (min-height: 780px) and (prefers-reduced-motion: no-preference) {
  .space-anchor { scroll-margin-top: calc(96px + var(--i, 0) * 64px); }
}

@media (min-width: 900px) {
  .hero--opts .hero__set { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 32px; }
  .hero--opts .hero__logo { grid-column: 1 / 9; grid-row: 1; max-width: none; }
  .hero--opts .hero__text { grid-column: 1 / 7; grid-row: 2; }
  .hero__text .lede { font-size: 2rem; }
  .hero__peek { grid-column: 8 / 13; grid-row: 2; align-self: end; margin: 0; }
  .hero__peek a { min-height: 72px; padding: 16px 24px; }
  .hero__peek b { white-space: nowrap; }
}
/* The anchors sit between cards, so Option 2's ".space + .space" gap is restated. */
.space + .space-anchor { margin-top: 40px; }

/* =====================================================================
   Design options tab + panel (Phase 2b). Praxis Signal green tab, fixed to
   the right edge on all 6 pages. Card and background colour presets are
   data attributes on <html> (set before paint by the head script) driving
   the custom properties below; "Current" is always the default, no
   override. Reference: Prx-Core_BrandStrategy_v5.md § Signal green
   principle, Signal #A3FF12. Text on the tab is a near-black ink, not
   white: #A3FF12 is a light, high-luminance green, so black-on-green is
   the pairing that clears WCAG AA (about 15:1; white-on-green is under 2:1
   and fails).
   ===================================================================== */
:root {
  --dg-signal: #A3FF12;
  --dg-signal-ink: #100F0E;
  --card-bg: var(--sheet);
  --page-bg: var(--well);
}
.space { background: var(--card-bg); }
body { background: var(--page-bg); }

/* Card and background presets, reworked 2026-09-23 (Marc): every preset
   reads as its own colour at a glance, no warm or brown tones (Taupe is the
   one brown-gray, desaturated), one gradient per group, each defined for
   dark and light. The --cp-* and --bp-* values feed both the page and the
   swatch that previews it in the panel, so the swatch is the real colour.
   Card text is --sc-ink / --sc-ink-soft; every card value below clears AA
   for both against it (v092-check.mjs measures it). */
:root {
  --cp-current: var(--sheet);
  --bp-current: var(--well);
}
:root[data-theme="dark"] {
  --cp-slate: #1F2833;
  --cp-stone: #2E2E2E;
  --cp-taupe: #3B3835;
  --cp-fade: linear-gradient(160deg, #3A4047 0%, #141619 100%);
  --bp-slate: #111A24;
  --bp-stone: #202020;
  --bp-taupe: #37322E;
  --bp-fade: linear-gradient(180deg, #2B3036 0%, #0A0B0C 70%, #000000 100%);
  --dg-soft: rgb(128 122 116 / 0.6);
  --dg-soft-hover: rgb(128 122 116 / 0.3);
}
:root[data-theme="light"] {
  --cp-slate: #DCE4EC;
  --cp-stone: #E2E2E2;
  --cp-taupe: #CBC7C3;
  --cp-fade: linear-gradient(160deg, #FFFFFF 0%, #CED4DA 100%);
  --bp-slate: #C9D2DC;
  --bp-stone: #D9D9D9;
  --bp-taupe: #CCC4BC;
  --bp-fade: linear-gradient(180deg, #F2F3F4 0%, #C3C8CD 100%);
  --dg-soft: rgb(128 122 116 / 0.6);
  --dg-soft-hover: rgb(128 122 116 / 0.3);
}


:root[data-card="fade"] { --card-bg: var(--cp-fade); }
/* DRG300 fix (2026-09-23, Marc): the preset used to reach .space only, the
   homepage stack, where the photo covers most of the card. Every other card
   a visitor sees (the where card, the pile tabs, the inner-page head sheets,
   room and spec tiles, the close list, the pager, the Equipment cards) paints
   from --sheet, --sheet-up or --sheet-2 directly, so the preset never touched
   them. With a preset picked, every card surface paints --card-bg. Current
   sets no attribute, so the original layered shades stay as they were.
   Chrome (bar, menus, dock, panel, form fields) is left alone. */
:root[data-card] :is(.space, .sheet:not(.menu), .tile:not(.tile--tbc), .pager a, .eq-card, .hero__peek a) { background: var(--card-bg); }


/* Fade: one fixed, viewport-sized layer behind everything, so the gradient
   never restarts per section and never bands at a seam. The body colour
   under it is the gradient's last stop. */
:root[data-theme="dark"][data-bg="fade"] { --page-bg: #000000; }
:root[data-theme="light"][data-bg="fade"] { --page-bg: #C3C8CD; }
:root[data-bg="fade"] body::before { content: ""; position: fixed; inset: 0; z-index: -10; pointer-events: none; background: var(--bp-fade); }

/* Tab, slimmed 2026-09-23 (Marc): smaller type and padding. Desktop short
   axis ~34px (a fine pointer, still easy to hit); phone keeps 44px. */


/* Panel, narrowed 2026-09-23 (Marc): a compact floating card attached to
   the tab on desktop (280px, height fits content, scrolls inside if the
   window is short), a compact bottom sheet on phone. The backdrop is a
   near-clear veil so the page stays visible; it only exists so a tap
   outside lands on the dialog and closes it. */


@media (min-width: 900px) { .space + .space-anchor { margin-top: 48px; } }

/* =====================================================================
   Equipment page (7th page, 2026-09-23, from Tammie via Marc). Option 2's
   stack: a raised head sheet, then the list sheet with the red call card
   overlapping it. Two outbound catalog cards, each with a visible
   new-tab cue naming the real domain.
   ===================================================================== */
.eq-top { padding-block: 16px 8px; }
.eq-head { padding: 24px; display: grid; gap: 14px; background: var(--sheet-up); box-shadow: var(--lip), var(--e3); max-width: 760px; }
.eq-head h1 { font-size: clamp(1.75rem, 5vw, 3rem); line-height: 1.05; }
.eq-placeholder { font-size: 0.875rem; color: var(--sc-ink-soft); font-style: italic; }
.eq-cards { display: grid; gap: 12px; }
.eq-card { display: grid; gap: 6px; padding: 18px 20px; min-height: 44px; color: inherit; text-decoration: none; background: var(--sheet-2); border-radius: var(--r); box-shadow: var(--press); border-left: 4px solid var(--sc-accent); transition: transform 180ms var(--sc-ease-out); }
.eq-card b { font-family: var(--sc-font-display); font-size: 1.5rem; line-height: 1.1; }
.eq-card__cue { display: inline-flex; align-items: center; gap: 6px; font-size: 0.875rem; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.eq-card__cue .ext { width: 14px; height: 14px; flex: none; }
.eq-card:active { transform: translateY(1px); }
@media (hover: hover) and (pointer: fine) { .eq-card:hover { transform: translateY(-3px); } }
@media (min-width: 700px) { .eq-cards { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) {
  .eq-top { padding-block: 32px 16px; }
  .eq-head { padding: 40px; }
}

/* Five items in the phone dock since Equipment joined (2026-09-23): tighter
   type and padding so Contact stays whole at 390px and down to 360px. */
@media (max-width: 899px) {
  .dock__row { gap: 1px; }
  .dock__row > * { flex: 1 1 auto; min-width: 0; padding: 0 5px; font-size: 0.8125rem; letter-spacing: 0; }
  .dock__row > .dock__quote { padding-inline: 8px; }
}
@media (max-width: 374px) { .dock__row > * { padding: 0 3px; font-size: 0.75rem; } .dock__row > .dock__quote { padding-inline: 6px; } }

/* Panel swatches (2026-09-23): each preset button previews its real colour
   or gradient in the current theme. */


/* States, four options now: two per row so every label stays readable. */


/* D · Soft fill (2026-09-23): the current page on a brown-gray fill at 60%,
   the same family as the Taupe card, never red. Type stays --sc-ink. */


/* Nav bar presets (DRG300, 2026-09-23, Marc). One colour for the top bar,
   its dropdowns and the phone toolbar, so they always match. Same rules as
   the card and background groups: no warm or brown tones (Taupe is the one
   desaturated brown-gray), each defined for dark and light, and the --np-*
   values feed both the bar and its swatch. Current sets no attribute.
   Contrast (v092-check.mjs measures it on all 7 pages): nav text, toggle and
   menu text 4.5:1; the red current-page mark and Contact 3:1 on the bar. On
   the tinted light bars the accent deepens one step to #C42100 so it keeps
   3:1; on Red (black type since 2026-09-28) the accent turns black. */
:root[data-theme="dark"] {
  --np-current: #0B0A09;
  --np-slate: #1E2A38;
  --np-stone: #282828;
  --np-taupe: #312D2A;
  --np-red: #FF2B00;
}
:root[data-theme="light"] {
  --np-current: var(--sheet-up);
  --np-slate: #D3DCE6;
  --np-stone: #DCDCDC;
  --np-taupe: #D2CDC8;
  --np-red: #FF2B00;
}


:root[data-nav="red"] { --nav-bg: var(--np-red); }
:root[data-theme="dark"][data-nav] :is(.bar__in, .dock) { --sheet-2: rgb(255 255 255 / 0.05); }
:root[data-theme="light"][data-nav] :is(.bar__in, .dock) { --sheet-2: rgb(0 0 0 / 0.05); }
:root[data-nav] .bar__in, :root[data-nav] .dock__row, :root[data-nav] :is(.bar__in, .dock) .menu { background: var(--nav-bg); }
:root[data-theme="light"][data-nav]:not([data-nav="red"]):not([data-nav="reddepth"]) :is(.bar__in, .dock) { --sc-accent: #C42100; }
/* v0.9.3: the phone bar is flat and full width at the end of this file. */

/* Red, reworked 2026-09-28 to Brian's original comp (Sep 11): #FF2B00 in
   both themes with black type, like his red bar. Black on #FF2B00 is about
   5.1:1; white on it is about 3.8:1, which is why the old white-type preset
   used a darker red. The accent turns black, so the current-page mark and
   the hover line are black here, and Contact, the phone Quote button and the
   in-menu call panel are black with white type. The emblem is the ink one
   in both themes. */
:root:is([data-nav="red"], [data-nav="reddepth"]) :is(.bar__in, .dock) {
  --sc-ink: #100F0E; --sc-ink-soft: #100F0E; --sc-accent: #100F0E; --sc-accent-ink: #FFFFFF; --sc-canvas: var(--nav-bg);
  --sheet-2: rgb(0 0 0 / 0.12);
  /* State D (Soft fill): gray at 60% over red blends to about 4:1 with black
     type, so on this bar the soft fill is white at 60% (about 10:1). */
  --dg-soft: rgb(255 255 255 / 0.6); --dg-soft-hover: rgb(255 255 255 / 0.3);
  color: #100F0E;
}
:root:is([data-nav="red"], [data-nav="reddepth"]) .menu .call, :root:is([data-nav="red"], [data-nav="reddepth"]) .menu .call small, :root:is([data-nav="red"], [data-nav="reddepth"]) .dock__row > .dock__quote { color: #FFFFFF; }
@media (hover: hover) and (pointer: fine) { :root:is([data-nav="red"], [data-nav="reddepth"]) .menu .call:hover { background: #2A2724; } }

:root:is([data-nav="red"], [data-nav="reddepth"]) .bar__home .on-dark { display: none; }
:root:is([data-nav="red"], [data-nav="reddepth"]) .bar__home .on-light { display: block; }


/* Red (depth), 2026-09-28 (Marc): the second red, beside Red flat. Same
   #FF2B00 at its core with the lift the Fade cards have: lighter at the top,
   a shade deeper at the bottom, and a thin highlight on the top edge. Top to
   bottom, so it reads as a raised bar and not a sideways fade. The bottom
   stop is #F02900, the deepest red that keeps black type at 4.5:1. Every
   other rule is Red flat's (the :is() list above). */
:root { --np-reddepth: linear-gradient(180deg, #FF5A30 0%, #FF2B00 55%, #F02900 100%); }
:root[data-nav="reddepth"] { --nav-bg: var(--np-red); }
:root[data-nav="reddepth"] :is(.bar__in, .dock__row, .bar__in .menu, .dock .menu) { background-image: var(--np-reddepth); }
:root[data-nav="reddepth"] :is(.bar__in, .dock__row) { box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.28), 0 1px 0 var(--sc-hairline-strong), var(--e1); }

/* Nav text White (2026-09-28, Marc), on the two red bars only: white type,
   a white current-page mark and hover line, Contact and the in-menu call
   panel white with black type, the paper emblem, and state D as a dark soft
   fill. A review option: white on #FF2B00 is about 3.8:1 and on the
   gradient's top stop about 3.1:1, under the 4.5:1 AA line for this size. */


/* Six nav presets: three to a row, so "Red flat" reads whole. */


/* =====================================================================
   Phase 3, rough inner pages (R9 Amenities, R10 Location), 2026-09-23.
   Option 2's stack: raised sheets and tiles on the well. One placeholder
   tag style (.ph-tag) everywhere, dashed and in ink so it reads on every
   card preset in both themes. Room sheets, slot tiles and the district
   card are .sheet or .tile, so the card presets repaint them.
   ===================================================================== */
.ph-tag { display: inline-block; padding: 2px 8px; border: 1.5px dashed currentColor; border-radius: var(--r); color: var(--sc-ink); font-family: var(--sc-font-text); font-size: 0.8125rem; font-weight: 700; font-style: normal; letter-spacing: 0.04em; text-transform: uppercase; line-height: 1.5; white-space: nowrap; }
.rooms { display: grid; gap: 12px; }
.room { display: grid; gap: 12px; align-content: start; padding: 24px; scroll-margin-top: 96px; box-shadow: var(--lip), var(--e1); }
.room h3 { font-size: 1.375rem; }
.room__facts { display: grid; gap: 0; margin: 4px 0 0; }
.room__facts > div { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding-block: 10px; border-top: 1px solid hsl(var(--sh) / 0.14); }
:root[data-theme="dark"] .room__facts > div { border-top-color: rgb(255 255 255 / 0.08); }
.room__facts dt { font-size: 1rem; color: var(--sc-ink-soft); }
.room__facts dd { margin: 0; }
.room--link { color: inherit; text-decoration: none; border-left: 4px solid var(--sc-accent); transition: transform 180ms var(--sc-ease-out); }
.room--link .kicker { color: var(--sc-ink-soft); font-size: 0.875rem; }
.room__go { font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.room--link:active { transform: translateY(1px); }
@media (hover: hover) and (pointer: fine) { .room--link:hover { transform: translateY(-3px); } }

.loc { padding-block: 32px; }
.loc .sec-head .ph-tag { margin-left: 4px; vertical-align: 1px; }
.loc-go { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 20px; }
.loc-cue { display: inline-flex; align-items: center; gap: 6px; font-size: 0.875rem; color: var(--sc-ink-soft); }
.loc-cue .ext { width: 14px; height: 14px; flex: none; }
.loc-slots { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tile--slot { align-content: start; min-height: 0; }
.tile--slot dt { font-family: var(--sc-font-display); font-weight: 700; font-size: 1.125rem; text-transform: uppercase; color: var(--sc-ink); }
.tile--slot dd { display: grid; gap: 8px; justify-items: start; font-family: var(--sc-font-text); font-weight: 400; font-size: 1rem; line-height: 1.4; }
.tile--slot dd .soft { font-size: 0.9375rem; }
.loc-link { display: grid; gap: 10px; padding: 24px; color: inherit; text-decoration: none; border-left: 4px solid var(--sc-accent); box-shadow: var(--lip), var(--e2); max-width: 760px; transition: transform 180ms var(--sc-ease-out); }
.loc-link h2 { font-size: 1.5rem; }
.loc-link .kicker { color: var(--sc-ink-soft); font-size: 0.875rem; }
.loc-link .loc-cue { color: var(--sc-ink); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.loc-link:active { transform: translateY(1px); }
@media (hover: hover) and (pointer: fine) { .loc-link:hover { transform: translateY(-3px); } }
.loc-beatles { max-width: 44ch; font-family: var(--sc-font-display); font-weight: 700; font-size: 1.375rem; line-height: 1.3; }
.loc-beatles .ph-tag { margin-top: 10px; vertical-align: middle; }
@media (min-width: 700px) {
  .rooms { grid-template-columns: 1fr 1fr; }
  .loc-slots--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .loc-slots--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
  .room { padding: 32px; }
  .loc { padding-block: 48px; }
  .loc-slots--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .loc-link { padding: 40px; }
  .loc-link h2 { font-size: 2rem; }
  .loc-beatles { font-size: 1.75rem; }
}
@media (max-width: 420px) { .ph-tag { white-space: normal; } }

/* ------------------------------------------------ v0.9.3 phone top bar --
   Marc, 2026-09-24: on phones the top bar stays on screen. Flat and full
   width, the same frame the desktop bar is (D4), so the page scrolls under
   it rather than past a floating card. Anchors and the one-screen quote
   section leave room for it. */
@media (max-width: 899px) {
  :root { --bar-h: 64px; }
  html { scroll-padding-top: calc(var(--bar-h) + 16px); }
  .bar { position: sticky; top: 0; padding: 0; }
  .bar__in, :root[data-nav] .bar__in { min-height: calc(var(--bar-h) + env(safe-area-inset-top, 0px)); padding: env(safe-area-inset-top, 0px) 12px 0 8px; border-radius: 0; box-shadow: 0 1px 0 var(--sc-hairline-strong), var(--e1); }
  :root[data-theme="light"]:not([data-nav]) .bar__in { background: var(--sheet-up); }
  /* The quote screen starts right under the bar and fits between it and the
     toolbar. To make room, the placeholder-number note (a review note that
     goes when the real number lands, DRG210) is left off this one screen. */
  #quote { min-height: calc(100svh - var(--bar-h)); scroll-margin-top: -16px; }
  #quote .call__note { display: none; }
}
/* Short phones (iPhone SE) lose the bar's 64px too: tighter spacing, taps
   still 44px or more. */
@media (max-width: 899px) and (max-height: 700px) {
  #quote { padding-top: 8px; }
  #quote .quote { gap: 12px; }
  #quote form { gap: 8px; }
  #quote .pick__box { min-height: 44px; }
}

/* ------------------------------------- v0.9.3 Location: getting here --
   Marc, 2026-09-24: Getting Here sits in the Location hero as two direction
   buttons on one row. Buttons, not cards: a see-through fill over whatever
   the card preset paints, a hairline edge and a red tick. */
:root[data-theme="dark"] { --go-fill: rgb(255 255 255 / 0.06); }
:root[data-theme="light"] { --go-fill: rgb(255 255 255 / 0.6); }
.go { display: grid; gap: 12px; margin-top: 8px; }
.dhead .go__title { font-size: 1.125rem; line-height: 1.2; }
.go__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.go__btn { position: relative; display: grid; gap: 2px; align-content: start; padding: 14px 12px 14px 18px; border-radius: var(--r); text-decoration: none; color: var(--sc-ink); background: var(--go-fill); box-shadow: inset 0 0 0 1px var(--sc-hairline-strong), var(--e1); transition: transform 180ms var(--sc-ease-out), box-shadow 180ms var(--sc-ease-out); }
.go__btn::before { content: ""; position: absolute; left: 0; top: 16px; width: 4px; height: 24px; background: var(--sc-accent); border-radius: 0 2px 2px 0; }
.go__btn:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 3px; }
.go__from { font-size: 0.875rem; color: var(--sc-ink-soft); }
.go__place { font-family: var(--sc-font-display); font-weight: 700; font-size: 1.375rem; line-height: 1.15; text-transform: uppercase; }
.go__time { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; font-weight: 700; white-space: nowrap; }
.go__time .go__icon { width: 14px; height: 14px; flex: none; color: var(--sc-accent); }
@media (hover: hover) and (pointer: fine) { .go__btn:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px var(--sc-ink), var(--e3); } }
/* Phones: "Directions from" at the 16px floor (D4) needs about 118px, so the
   Location card takes the full width and tighter padding, which keeps both
   buttons on one row with no broken words down to a 360px phone. */
@media (max-width: 699px) {
  .go__from { font-size: 1rem; }
  .dhead--go { margin-right: 0; padding-inline: 16px; }
  /* Marc, Sep 24 (iPhone): the Location page opens with both direction
     buttons above the bottom menu. iOS reports a viewport taller than 700px
     while showing about 685, so the short-phone block never fires there.
     This compaction is keyed to width alone, on the Location page only. */
  .dtop:has(.dhead--go) { padding-top: 8px; }
  /* Round 2 (Marc, Sep 24): the photo stays in view and the card sits lower.
     Fixed pixels, not viewport units, because iOS sizes vh units differently
     from what it shows. The photo is 148px with 24px under the card, so 124px
     shows, and the kicker goes (as the short-phone block already does). Tuned
     to a 683px-tall visible area: the buttons clear the menu by about 11px. */
  .dtop:has(.dhead--go) .photo { aspect-ratio: auto; width: auto; height: 148px; min-height: 0; max-height: none; }
  .dhead--go { padding-block: 16px; gap: 8px; margin-top: -24px; }
  .dhead--go .kicker { display: none; }
  .dhead--go h1 { font-size: 1.75rem; }
  .dhead--go .go { margin-top: 4px; gap: 8px; }
  .go__row { gap: 8px; }
  .go__btn { padding: 12px 8px 12px 14px; }
  .go__btn::before { top: 14px; }
  .go__place { font-size: 1.25rem; }
}
@media (max-width: 699px) and (max-height: 680px) {
  .dtop:has(.dhead--go) .photo { height: 124px; }
}
@media (min-width: 900px) {
  .go { margin-top: 12px; gap: 16px; }
  .dhead .go__title { font-size: 1.25rem; }
  .go__row { gap: 16px; }
  .go__btn { padding: 18px 20px 18px 24px; }
  .go__place { font-size: 1.625rem; }
}

/* v0.9.3: the map dialog now carries longer headings ("Directions from DFW"),
   so on phones Open in tab stays one small line and the heading wraps. */
.map-dialog__head h2 { min-width: 0; }
.map-dialog [data-map-tab] { flex: none; white-space: nowrap; }
@media (max-width: 699px) { .map-dialog [data-map-tab] { padding: 8px 12px; } }

/* ------------------------------------------- v0.9.3 quote form fixes --
   Marc, 2026-09-24, from his iPhone. */
/* With @view-transition on (end of this file), iOS Safari sends no click for
   a tap on the invisible input that shared.css stretches over each card, so
   the cards never ticked (iPhone 17 simulator, iOS 26.5, 2026-09-24; v0.9.2
   has no transition and ticks). Taps now land on the label, which ticks its
   input in every browser; keyboard focus is unchanged. */
.pick input { pointer-events: none; }
/* Project type: six cards, two to a row on a phone, three from 700px. */
.picks--type { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 700px) { .picks--type { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 899px) { #quote .picks--type .pick__box { grid-template-columns: 1fr; padding: 8px 12px; } }
/* Marc, 2026-09-24: the form card opens on "Message us", and the count line
   starts at question 2 (on question 1 it only repeated what the card says). */
.steps__title { margin: 0; font-family: var(--sc-font-display); font-weight: 700; font-size: 1.75rem; line-height: 1.1; letter-spacing: 0.02em; text-transform: uppercase; }
form[data-steps]:has(> .steps__stage > [data-step]:first-child:not([hidden])) .steps__count { display: none; }
/* The date field: iOS drew it wider than the card and centred its text. */
.field input[type="date"] { -webkit-appearance: none; appearance: none; display: block; min-width: 0; max-width: 100%; text-align: left; }
.field input[type="date"]::-webkit-date-and-time-value { text-align: left; margin: 0; }
/* While typing on a phone (v093.js): no toolbar or design-options tab over
   the form, and the top bar scrolls away with the page. */
@media (max-width: 899px) {
  .is-typing .dock { display: none; }
  .is-typing .bar { position: relative; }
  html.is-typing { scroll-padding-top: 12px; }
}

/* ------------------------------------- v0.9.3 calmer page changes --
   Marc, 2026-09-24: every tap loads a new page, so the top bar, the phone
   toolbar and the options tab redrew each time and the site felt glitchy.
   A cross-document view transition keeps those three still while the page
   under them cross-fades (Safari 18.2+, Chrome 126+; elsewhere nothing
   changes). */
@view-transition { navigation: auto; }
.bar__in { view-transition-name: dragon-bar; }
.dock__row { view-transition-name: dragon-dock; }

::view-transition-group(dragon-bar), ::view-transition-group(dragon-dock) { animation-duration: 0s; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 160ms; }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }

/* ------------------------------------------------------ v0.9.4 hotels --
   Marc, 2026-09-24: Jeff's five hotels on the Location page. Each card is a
   raised .tile (so the card presets repaint it) with the hotel's photo, a
   $ to $$$$ price guide, the distance, one line and a small "Check out this
   hotel" button. Phones get compact rows with a square thumbnail; Virgin,
   first in Jeff's list, leads full width with a large photo. */
.hotels { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.hotel { display: grid; grid-template-columns: 104px minmax(0, 1fr); align-items: start; align-content: start; gap: 14px; min-height: 0; padding: 12px; }
.hotel__img { margin: 0; aspect-ratio: 1; overflow: hidden; border-radius: 2px; background: var(--sheet-3); }
.hotel__img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hotel__text { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; height: 100%; }
.hotel__text .kicker { color: var(--sc-ink-soft); font-size: 0.8125rem; }
.hotel h3 { font-size: 1.0625rem; line-height: 1.2; }
.hotel__brand { display: block; margin-top: 3px; font-family: var(--sc-font-text); font-weight: 400; font-size: 0.875rem; line-height: 1.3; text-transform: none; letter-spacing: 0; color: var(--sc-ink-soft); }
.hotel__meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; font-size: 0.9375rem; }
.hotel__dot { color: var(--sc-ink-soft); }
.hotel__line { font-size: 0.9375rem; line-height: 1.45; margin-bottom: 6px; }
.hotel__btn { margin-top: auto; min-height: 44px; padding: 8px 14px; font-size: 0.8125rem; }
.price { font-family: var(--sc-font-display); font-weight: 700; letter-spacing: 0.1em; white-space: nowrap; }
.price__off { opacity: 0.28; }
.hotel--lead { grid-template-columns: minmax(0, 1fr); }
.hotel--lead .hotel__img { aspect-ratio: 16 / 10; }
.hotel--lead h3 { font-size: 1.375rem; }
/* Phones, D4 floor: nothing on a card below 16px. The name and price sit
   beside the thumbnail; the line and the button run under both, so the
   16px button fits on one line without widening the card. */
@media (max-width: 699px) {
  .hotel__brand, .hotel__text .kicker, .hotel__btn { font-size: 1rem; }
  .hotel:not(.hotel--lead) { grid-template-columns: 96px minmax(0, 1fr); column-gap: 14px; row-gap: 8px; }
  .hotel:not(.hotel--lead) .hotel__text { display: contents; }
  .hotel:not(.hotel--lead) .hotel__img { grid-row: 1 / span 2; }
  .hotel:not(.hotel--lead) h3 { grid-column: 2; align-self: end; }
  .hotel:not(.hotel--lead) .hotel__meta { grid-column: 2; align-self: start; }
  .hotel:not(.hotel--lead) :is(.hotel__line, .hotel__btn) { grid-column: 1 / -1; justify-self: start; }
  .hotel:not(.hotel--lead) .hotel__line { margin: 4px 0 0; }
}
@media (min-width: 700px) {
  .hotels { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .hotel { grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 14px; }
  .hotel__img { aspect-ratio: 4 / 3; }
  .hotel__text { padding: 0 4px 4px; }
  .hotel--lead { grid-column: 1 / -1; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: center; gap: 28px; }
  .hotel--lead .hotel__img { aspect-ratio: 16 / 10; }
  .hotel--lead .hotel__text { height: auto; gap: 10px; }
  .hotel--lead h3 { font-size: 1.75rem; }
  .hotel--lead .hotel__line { font-size: 1.0625rem; }
  .hotel--lead .hotel__btn { margin-top: 8px; }
}
@media (min-width: 1100px) {
  .hotels { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .hotel--lead { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 40px; padding: 16px; }
  .hotel--lead h3 { font-size: 2rem; }
}

/* The hotel dialog: shared.css's room dialog, with Open in tab beside the
   close button (as in the map dialog), then photo and facts beside a Google
   map of the hotel. */
dialog.hotel-dialog { width: min(1040px, calc(100vw - 24px)); }
.hotel-dialog .room-dialog__head { justify-content: flex-start; gap: 8px; }
.hotel-dialog .room-dialog__head h2 { margin-right: auto; min-width: 0; font-size: 1.25rem; }
.hotel-dialog .room-dialog__head .btn { flex: none; min-height: 44px; padding: 8px 16px; font-size: 1rem; white-space: nowrap; }
.hotel-dialog__body { display: grid; gap: 20px; padding: 20px; }
.hotel-dialog__info { display: grid; gap: 16px; align-content: start; }
.hotel-dialog__img { margin: 0; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 2px; background: var(--sheet-3); }
.hotel-dialog__img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hotel-dialog__about { font-size: 1.0625rem; line-height: 1.5; }
.hotel-dialog .room__facts dd { text-align: right; }
.hotel-dialog .room__facts a { color: inherit; font-weight: 700; text-underline-offset: 3px; }
.hotel-dialog__map { display: block; width: 100%; height: 280px; border: 0; border-radius: 2px; background: var(--sheet-3); }
@media (min-width: 800px) {
  .hotel-dialog__body { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; padding: 32px; }
  .hotel-dialog__map { height: 100%; min-height: 440px; }
}
@media (max-width: 699px) {
  .hotel-dialog .room-dialog__head { padding-left: 16px; }
  .hotel-dialog .room-dialog__head h2 { font-size: 1rem; }
  .hotel-dialog .room-dialog__head .btn { padding: 8px 12px; }
}

/* ------------------------------------------------- v0.9.4 restaurants --
   Tammie, 2026-09-28: four restaurant cards, the hotel card without a lead.
   Phones: the hotel rows. 700 to 1099: one card per row, photo beside the
   text, so the button never squeezes. 1100 and up: four across, like the
   hotel cards (The Charles added as the fourth, 2026-09-28). */
@media (min-width: 700px) {
  .hotels--eat { grid-template-columns: minmax(0, 1fr); }
  .hotel--eat { grid-template-columns: 240px minmax(0, 1fr); align-items: center; gap: 24px; }
  .hotel--eat .hotel__text { height: auto; padding: 0; }
}
@media (min-width: 1100px) {
  .hotels--eat { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .hotel--eat { grid-template-columns: minmax(0, 1fr); align-items: start; gap: 16px; }
  .hotel--eat .hotel__text { height: 100%; padding: 0 4px 4px; }
}
/* Phones and four across: food and distance stack, so the dot never hangs
   at a line end. */
@media (max-width: 699px), (min-width: 1100px) {
  .hotel--eat .hotel__meta { flex-direction: column; gap: 0; }
  .hotel--eat .hotel__dot { display: none; }
}

/* 2026-09-28: Erbaum (Brian's Adobe Fonts kit) sets wider than Play, and "Original" clipped in the
   9px swatch names of the design-options panel. The panel is a review tool, not the site, so its
   swatch names stay in Play. */


/* ------------------------------------------- v0.9.4 Erbaum phone fit --
   Marc, 2026-09-28, from his iPhone (390 x 683) after Erbaum went live:
   Erbaum sets wider than Play 700, so the dock labels crowded and the quote
   form's Back and Next sat under the dock.
   Dock: labels 12px, no letter-spacing (Marc's call). */
@media (max-width: 899px) {
  .dock__row > * { font-size: 0.75rem; letter-spacing: 0; }
}
/* Quote form: the question and the six project tiles one size down, so each
   question fits in two lines and FOOD / TABLETOP stays on one line; Back and
   Next share one row; and the form reserves the dock's height, safe area
   included. When something still pushes it down (the error line, a very short
   screen), Back and Next hold above the dock instead of sliding under it.
   While typing the dock is hidden (v0.9.3), so the hold is off and the
   keyboard behaviour is unchanged. */
@media (max-width: 899px) {
  :root { --dock-reserve: calc(var(--dock-h) + env(safe-area-inset-bottom, 0px)); }
  #quote { padding-bottom: calc(var(--dock-reserve) + 16px); }
  #quote .quote__panel .sheet { padding-inline: 12px; }
  #quote .q, #quote .field > label.q { font-size: 1.25rem; }
  #quote legend.q { margin-bottom: 16px; }
  #quote .pair { gap: 12px; }
  #quote .picks--type .pick__box { padding: 8px; }
  #quote .picks--type .pick__box b { font-size: 0.9375rem; letter-spacing: 0; white-space: nowrap; }
  #quote .steps__nav { flex-wrap: nowrap; gap: 12px; position: sticky; bottom: var(--dock-reserve); z-index: 2; background: var(--sheet); box-shadow: 0 -8px 0 var(--sheet); }
  #quote .steps__nav .btn { flex: 1 1 auto; min-width: 0; padding-inline: 16px; white-space: nowrap; }
  .is-typing #quote .steps__nav { position: static; box-shadow: none; }
}
/* Sweep, same day: on the home page "One Monster Prep Kitchen details" no
   longer fits one line on a phone in Erbaum (395px in a 310px column), so it
   wraps inside the column instead of running off the screen. */
@media (max-width: 699px) {
  .space__text .btn { max-width: 100%; white-space: normal; }
}
@media (max-width: 389px) {
  .dock { left: 8px; right: 8px; }
  #quote .picks--type .pick__box b { font-size: 0.875rem; }
}

/* Quote form honeypot (DRG330): off screen for people, filled only by bots. */
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* v1.0 (2026-09-29): a second, quieter line inside a figure tile, for the
   power and load-in door facts (connector type, drive-in). */
.tile dd .tile__note { display: block; margin-top: 6px; font-family: var(--sc-font-text); font-weight: 400; font-size: 0.8125rem; line-height: 1.35; letter-spacing: 0; text-transform: none; color: var(--sc-ink-soft); }