/* =============================================================================
   The Commons — the Fora look, in MHRC's colors.

   Decided by Sonny, 2026-09-03 (evening): the entry page follows fora.so's
   layout and surfaces: a near-black ground, Inter throughout with tight
   letterspacing on headlines, pill buttons and eyebrows, glass cards with a soft
   edge light, a centered hero over a gradient sky with our own hills behind a big
   rounded app frame. Colors are the brand tokens; brass stays inside the mark.

   Load order: tokens.css -> this file. This file also carries the legacy variable
   names the ported dashboard code reads (--card, --muted, --open ...).
   ============================================================================= */

:root {
  /* the brand kit's type rule, amended for this look: Inter everywhere */
  --mh-font-display: var(--mh-font-text);

  /* the Fora surfaces, in brand values */
  --ground:      var(--mh-deep);
  --glass:       color-mix(in srgb, var(--mh-ground) 82%, transparent);
  --glass-2:     color-mix(in srgb, var(--mh-surface) 55%, transparent);
  --hair:        color-mix(in srgb, var(--mh-text) 9%, transparent);
  --hair-2:      color-mix(in srgb, var(--mh-text) 16%, transparent);
  --edge-light:  color-mix(in srgb, var(--mh-text) 10%, transparent);
  --text-soft:   color-mix(in srgb, var(--mh-text) 78%, transparent);
  --r-frame: 24px; --r-card: 20px; --r-inner: 12px; --r-pill: 999px;
  --wrap: 72rem; --gutter: clamp(1.1rem, 4vw, 2rem);
  --ease: cubic-bezier(0.23, 1, 0.32, 1);

  /* legacy names the ported dashboard code reads */
  --card: var(--mh-surface); --card2: var(--mh-surface-2); --line: var(--hair-2);
  --ink: var(--mh-text); --fg: var(--mh-text);
  --muted: var(--mh-text-muted); --faint: var(--mh-text-muted);
  --accent: var(--mh-accent); --accent-t: var(--mh-accent);
  --bg: var(--mh-ground); --bg2: var(--mh-surface);
  --sans: var(--mh-font-text); --serif: var(--mh-font-text); --brandfont: var(--mh-font-text);

  /* status, load-bearing: red = error, yellow = caution, green = success */
  --open: var(--mh-caution);  --open-t: var(--mh-caution);
  --ok: var(--mh-success);    --ok-t: var(--mh-success);
  --alert: var(--mh-error);   --alert-t: var(--mh-error);
  /* CARRIED from the validated dashboard palette, not in tokens.css:
     "with HOA management" blue: pin #4C83D8 (4.65:1 on ground), text #8FB7EF
     (8.55:1 on ground). Lost & found aubergine #3A1F52 is a fill whose white
     border carries the contrast (17.6:1); the diamond shape is the first signal. */
  --ack: #4C83D8; --ack-t: #8FB7EF;
  --lf: #3A1F52;
  --imgfilter: saturate(0.85) brightness(0.85);
  --tg-top: 0px;
}

/* --------------------------------------------------------------- base -- */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--ground); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--mh-text);
  font-family: var(--mh-font-text);
  font-size: 16px;
  line-height: 1.55;
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
h1, h2, h3, h4 { font-family: var(--mh-font-text); margin: 0; color: var(--mh-text); text-wrap: balance; }
h1 { font-size: clamp(2.5rem, 6.2vw, 4.4rem); font-weight: 400; line-height: 1.06; letter-spacing: -0.04em; }
h2 { font-size: clamp(1.9rem, 3.8vw, 2.75rem); font-weight: 500; line-height: 1.12; letter-spacing: -0.035em; }
h3 { font-size: clamp(1.4rem, 2.2vw, 1.75rem); font-weight: 500; line-height: 1.2; letter-spacing: -0.025em; }
h4 { font-size: 0.95rem; font-weight: 500; letter-spacing: -0.01em; color: var(--mh-text); }
p { margin: 0; text-wrap: pretty; }
a { color: var(--mh-accent); text-decoration: none; }
a:hover { color: var(--mh-accent-hover); }
code { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 0.92em; color: var(--mh-text); }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--mh-focus); outline-offset: 2px; border-radius: 6px; }
::selection { background: var(--mh-accent); color: var(--mh-on-accent); }
:root { caret-color: var(--mh-accent); accent-color: var(--mh-accent); }
[hidden] { display: none !important; }
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.wrap--narrow { max-width: 52rem; }
/* Keep the keyboard shortcut inside the canvas, including on RTL pages. */
.skip { position: absolute; left: 0; top: 0; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip:focus { left: 1rem; top: 1rem; width: auto; height: auto; overflow: visible; clip-path: none; white-space: normal; z-index: 100; background: var(--mh-surface); color: var(--mh-text); padding: 0.5rem 1rem; border-radius: var(--r-pill); }
.mh-mark { color: var(--mh-brass); }

/* ---------------------------------------------------------- pieces -- */
.pill {
  display: inline-flex; align-items: center; gap: 0.6rem;
  padding: 0.42rem 0.9rem; border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--mh-text) 8%, transparent);
  color: var(--text-soft); font-size: 0.85rem; font-weight: 500; letter-spacing: -0.005em;
  box-shadow: inset 0 0 0 1px var(--hair);
}
.pill--eyebrow { margin-bottom: 1.4rem; }
.pill__dot { width: 4px; height: 4px; border-radius: 50%; background: var(--mh-text-muted); }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  padding: 0.75rem 1.35rem; border-radius: var(--r-pill); border: 0;
  font-size: 0.95rem; font-weight: 500; letter-spacing: -0.01em; line-height: 1.2;
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background-color 150ms var(--ease), color 150ms var(--ease), transform 120ms var(--ease);
}
.btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--mh-accent); color: var(--mh-on-accent); }
.btn--primary:hover { background: var(--mh-accent-hover); color: var(--mh-on-accent); }
.btn--ghost { background: color-mix(in srgb, var(--mh-text) 9%, transparent); color: var(--mh-text); box-shadow: inset 0 0 0 1px var(--hair); }
.btn--ghost:hover { background: color-mix(in srgb, var(--mh-text) 14%, transparent); color: var(--mh-text); }
.btn--text { background: transparent; color: var(--text-soft); padding-inline: 0.8rem; }
.btn--text:hover { color: var(--mh-text); }
.btn--small { padding: 0.35rem 0.7rem; font-size: 0.85rem; }
.btn--icon { padding: 0.5rem; background: transparent; color: var(--mh-text); }
.btn--icon svg { width: 22px; height: 22px; }
/* the glass card: a near-opaque surface, a hairline, and a soft light in the
   top-left corner, which is what makes Fora's cards read as lit from above */
.card {
  position: relative; overflow: hidden;
  background: var(--glass); border-radius: var(--r-card);
  box-shadow: inset 0 0 0 1px var(--hair);
}
.card::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(640px at 0 0, var(--edge-light), transparent 70%);
}
.card > * { position: relative; z-index: 1; }

/* nothing parked at opacity 0: reveals are visible unless the script is running */
html.js [data-reveal] { opacity: 0; transform: translate3d(0, 14px, 0); transition: opacity 640ms var(--ease), transform 640ms var(--ease); }
html.js [data-reveal].in { opacity: 1; transform: none; }

/* ------------------------------------------------------------- nav -- */
.nav {
  position: sticky; top: 0; z-index: 60;
  padding-top: var(--tg-top);
  background: color-mix(in srgb, var(--ground) 82%, transparent);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: box-shadow 200ms var(--ease);
}
.nav.scrolled { box-shadow: 0 1px 0 var(--hair); }
.nav__inner { max-width: var(--wrap); margin-inline: auto; padding: 0.7rem var(--gutter); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; min-height: 64px; }
.nav__brand { display: flex; align-items: center; gap: 0.6rem; color: var(--mh-text); justify-self: start; }
.nav__brand .mh-mark { width: 26px; height: 24px; }
.wordmark { font-family: var(--mh-font-wordmark); font-weight: 500; letter-spacing: 0.2em; font-size: 1rem; padding-left: 0.1em; }
.nav__links { display: flex; gap: 1.6rem; justify-self: center; }
.nav__links a { color: var(--text-soft); font-size: 0.92rem; font-weight: 500; letter-spacing: -0.01em; padding: 0.4rem 0; transition: color 150ms var(--ease); }
.nav__links a:hover { color: var(--mh-text); }
.nav__right { display: flex; align-items: center; gap: 0.4rem; justify-self: end; }
.nav__burger { display: none; }
.langer { position: relative; }
.langer menu { display: none; position: absolute; inset-inline-end: 0; top: calc(100% + 8px); list-style: none; margin: 0; padding: 0.35rem; background: var(--mh-surface); border-radius: 14px; box-shadow: inset 0 0 0 1px var(--hair-2), 0 18px 40px -12px rgba(0, 0, 0, 0.6); min-width: 11rem; max-height: min(70vh, 30rem); overflow-y: auto; overscroll-behavior-y: contain; z-index: 70; }
.langer.open menu { display: block; }
.langer menu button { display: block; width: 100%; text-align: start; background: none; border: 0; padding: 0.5rem 0.75rem; color: var(--mh-text); border-radius: 9px; cursor: pointer; font-size: 0.95rem; }
.langer menu button:hover { background: var(--mh-surface-2); }
.langer menu button.on { color: var(--mh-accent); }

/* --------------------------------------------------------------- gate -- */
.gate { position: relative; min-height: calc(100svh - 64px); display: grid; place-items: center; padding: 3rem var(--gutter); overflow: clip; }
.gate__glow { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(200% 83% at 50% 0px, var(--mh-surface) 0%, var(--mh-ground) 40%, var(--ground) 78%); }
.gate__card { max-width: 30rem; padding: 2rem; display: grid; gap: 0.9rem; }
.gate__card .mh-mark { width: 44px; height: 40px; margin-bottom: 0.4rem; }
.gate__card h2 { font-size: 1.75rem; }
.gate__card p { color: var(--text-soft); }
.gate__note { font-size: 0.85rem; color: var(--mh-text-muted); border-top: 1px solid var(--hair); padding-top: 0.9rem; margin-top: 0.3rem; }

/* --------------------------------------------------------------- hero -- */
/* The copy starts low enough that the rocket trail (top third of the frame) sits
   above the headline, and the hero's bottom is sized to the hills' true height. */
.hero { position: relative; overflow: clip; padding: clamp(7rem, 20vw, 14rem) 0 clamp(5rem, 20vw, 18rem); text-align: center;
  /* dusk horizon: the photograph's sky just above its treeline (#4179DB, sampled)
     mixed into the surface navy. The sky fades INTO this, not into black, so the
     ridges read as silhouettes against the glow and the band between the trees
     and the hills is sky, not a gap (Sonny, 2026-09-04, round five). */
  --horizon: color-mix(in srgb, #4179DB 30%, var(--mh-surface)); }
/* The sky is our own: the SpaceX contrail at blue hour (IMG_9929), the whole frame,
   fitted to the page WIDTH so the trail is never cropped away. The hills cover its
   lower third and a fade takes the rest to the ground. */
.hero__sky { position: absolute; inset: 0; z-index: 0; background-color: var(--mh-surface);
  background-image:
    linear-gradient(to bottom, color-mix(in srgb, var(--ground) 55%, transparent) 0, transparent 6vw, transparent 17vw, color-mix(in srgb, var(--horizon) 88%, transparent) 21vw, var(--horizon) 24vw),
    url("media/sky-contrail-1600.webp?v=baac406f");
  /* slid up: the trail sits just under the nav, and the photograph's own treeline
     lands behind our hill crests instead of behind the headline */
  /* two layers, two positions: the shift is the PHOTOGRAPH's; the fade stays put
     (one shared position moved the fade up 11vw and buried the trail's beam) */
  background-repeat: no-repeat; background-size: 100% 100%, 100% auto; background-position: center 0, center -11vw; }
/* The hills at TRUE ratio: each plane is the page's width, its height follows, so
   on a phone the ridge is a small band, not a wall of trees. Crests are pushed to
   the sides (a shift and a slight enlargement per plane) so the middle dips under
   the frame the way Fora's do, and the planes are still visible as you scroll. */
.hero__hills { position: absolute; left: 0; right: 0; bottom: 0; height: 37.04vw; z-index: 1; pointer-events: none; }
.plane { position: absolute; left: 0; bottom: 0; width: 100%; height: auto; max-width: none; will-change: transform; transform-origin: 50% 100%;
  transform: translate3d(var(--sx, 0), calc(var(--py, 0px) + var(--oy, 0px)), 0) scale(var(--sc, 1)); }
/* Staggered, back to front (Sonny, 2026-09-04: the near planes towered over the
   far one and covered the rocket trail, and no layering could be seen). Each
   cutout's crest sits at a different height in its own frame (far 47%, mid 21%,
   near 6%, nearest 4% from the top, measured), so a resting offset --oy pushes
   the near planes DOWN until the crests step: far highest at about 27vw above
   the hero's bottom, then mid ~23, near ~19, nearest ~15. The whole ridge now
   stays under the trail, and the scroll rates pull the steps apart. */
/* Fora's ridges are flat silhouettes in stepped blues, and that is why its
   layers read: every crest is a hard edge against a different tone. Four
   cutouts of one photograph in one tone slid over each other invisibly (Sonny,
   2026-09-04, three rounds). So the texture is flattened per plane, back to
   front: the far ridge is a hazy blue silhouette (contrast crushed, tinted
   toward the sky), the mid ridge lighter and cooler, the near ridge keeps some
   detail, the nearest is the darkest and sharpest. */
/* The far plane, back by request (Sonny, 2026-09-04, round seven) with its
   texture kept: crushed to a flat silhouette it had read as fog. Dark, a shade
   lighter than the mid ridge in front of it, never lighter than the sky. */
.plane--far     { --sx: -9%;  --sc: 1.40; --oy: -5vw; filter: contrast(0.62) brightness(0.68) sepia(0.4) hue-rotate(170deg) saturate(1.1); }
.plane--mid     { --sx:  8%;  --sc: 1.16; --oy: 7vw;  filter: contrast(0.7) brightness(0.58) sepia(0.35) hue-rotate(170deg) saturate(1.1); }
.plane--near    { --sx: -12%; --sc: 1.24; --oy: 21vw; filter: contrast(0.85) brightness(0.55) saturate(0.7); }
.plane--nearest { --sx:  11%; --sc: 1.22; --oy: 27vw; filter: contrast(1.05) brightness(0.42) saturate(0.6); }
/* Four hill planes, back to front. Far planes are hazier (lighter, bluer), near
   planes darker: atmospheric perspective is what sells the depth before any of
   them move. Each is positioned by evening.js at its own rate. */
.plane { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 100%; will-change: transform; overflow: visible; }
svg.plane path { fill: var(--hill); }
.plane--far     { --hill: color-mix(in srgb, var(--mh-surface) 72%, var(--mh-text-muted)); }
.plane--mid     { --hill: color-mix(in srgb, var(--mh-surface) 80%, var(--mh-deep)); }
.plane--near    { --hill: color-mix(in srgb, var(--mh-ground) 75%, var(--mh-deep)); }
.plane--nearest { --hill: var(--mh-deep); }
svg.plane { filter: drop-shadow(0 -1px 0 color-mix(in srgb, var(--mh-text) 7%, transparent)); }
.hero__fade { position: absolute; left: 0; right: 0; bottom: 0; height: 18%; z-index: 2; pointer-events: none; background: linear-gradient(to bottom, transparent, var(--ground)); }
.hero__copy { position: relative; z-index: 3; display: grid; justify-items: center; }
.hero h1 { max-width: 20ch; }
.hero h1, .hero__lede { text-shadow: 0 2px 22px color-mix(in srgb, var(--mh-deep) 75%, transparent), 0 0 3px color-mix(in srgb, var(--mh-deep) 60%, transparent); }
.hero__lede { margin-top: 1.4rem; color: var(--text-soft); max-width: 36rem; font-size: 1.05rem; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: center; margin-top: 2rem; }

/* --------------------------------------------------------- the frame -- */
.frame-wrap { position: relative; z-index: 4; margin-top: clamp(-9rem, -10vw, -5rem); padding-bottom: 5rem; }
.frame {
  display: grid; grid-template-columns: 220px minmax(0, 1fr);
  max-width: 66rem; margin-inline: auto;
  /* No backdrop blur here on purpose: a filter on this box would make it the
     containing block for the map's fullscreen mode, which then pins to the frame
     instead of the screen (the "stuck at a different part of the page" bug). The
     glass is a near-opaque tint instead. */
  background: color-mix(in srgb, var(--mh-ground) 92%, transparent); border-radius: var(--r-frame);
  box-shadow: inset 0 0 0 1px var(--hair-2), 0 40px 90px -30px rgba(0, 0, 0, 0.7);
  overflow: hidden;
}
.frame__side { display: flex; flex-direction: column; gap: 0.15rem; padding: 1.1rem 0.8rem; border-right: 1px solid var(--hair); }
.frame__side [role="tab"] {
  display: flex; align-items: center; gap: 0.65rem; width: 100%; text-align: start;
  background: none; border: 0; border-radius: 10px; padding: 0.62rem 0.75rem; min-height: 44px;
  color: var(--text-soft); font-size: 0.92rem; font-weight: 500; letter-spacing: -0.01em; cursor: pointer;
  transition: background-color 150ms var(--ease), color 150ms var(--ease);
}
.frame__side [role="tab"] svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; opacity: 0.85; }
.frame__side [role="tab"]:hover { color: var(--mh-text); background: color-mix(in srgb, var(--mh-text) 5%, transparent); }
.frame__side [role="tab"][aria-selected="true"] { color: var(--mh-text); background: color-mix(in srgb, var(--mh-text) 9%, transparent); }
.frame__main { min-width: 0; padding: 0.8rem 0.8rem 0; }
.cover { position: relative; border-radius: 18px; overflow: hidden; aspect-ratio: 16 / 6.2; min-height: 200px; }
.cover__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.cover__scrim { position: absolute; inset: 0; background: linear-gradient(to top, color-mix(in srgb, var(--mh-deep) 88%, transparent) 0%, color-mix(in srgb, var(--mh-deep) 40%, transparent) 45%, transparent 75%); }
.cover__card { position: absolute; left: 1.2rem; right: 1.2rem; bottom: 1.1rem; display: flex; align-items: center; gap: 0.9rem; }
.avatar { width: 56px; height: 56px; flex: none; border-radius: 50%; background: var(--mh-deep); box-shadow: inset 0 0 0 1px var(--hair-2), 0 6px 18px -6px rgba(0, 0, 0, 0.6); display: grid; place-items: center; }
.avatar .mh-mark { width: 30px; height: 27px; }
.cover__name { font-size: clamp(1.15rem, 2vw, 1.5rem); font-weight: 500; letter-spacing: -0.025em; line-height: 1.15; }
.cover__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; margin-top: 0.4rem; }
.livepill { display: inline-flex; align-items: center; gap: 0.5rem; border: 0; background: color-mix(in srgb, var(--mh-text) 10%, transparent); box-shadow: inset 0 0 0 1px var(--hair); color: var(--mh-text); font-size: 0.82rem; font-weight: 500; padding: 0.3rem 0.7rem; min-height: 44px; border-radius: var(--r-pill); }
.livepill .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--mh-success); }
.livepill.hasalerts { cursor: pointer; }
.livepill.hasalerts .dot { background: var(--mh-error); animation: pulse 1.4s infinite; }
@keyframes pulse { 50% { opacity: 0.35; } }
.whoami { display: flex; gap: 0.4rem; align-items: center; font-size: 0.85rem; color: var(--text-soft); }
.whoami b { color: var(--mh-text); font-weight: 500; }
#whoami-out { min-height: 44px; }
.stats { display: flex; flex-wrap: wrap; gap: 0.4rem 1.6rem; padding: 1rem 0.5rem 0.2rem; }
.stat { background: none; border: 0; padding: 0; min-height: 44px; color: var(--mh-text-muted); font-size: 0.85rem; cursor: pointer; display: inline-flex; gap: 0.45rem; align-items: baseline; text-align: start; }
.stat .n { font-size: 1.35rem; font-weight: 500; letter-spacing: -0.03em; color: var(--mh-text); font-variant-numeric: tabular-nums; line-height: 1; }
.stat:hover .l { color: var(--mh-text); }
.pane { padding: 0.9rem 0.5rem 1rem; }
.pane__sub { color: var(--mh-text-muted); font-size: 0.92rem; max-width: 62ch; margin-bottom: 0.8rem; }
.frame__foot { padding: 0.9rem 0.5rem 1rem; border-top: 1px solid var(--hair); color: var(--mh-text-muted); font-size: 0.85rem; }

/* boards: hairline rows, the same shape for issues, alerts, lost & found and the feed */
.controls { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; margin-bottom: 0.6rem; }
.chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0 0 0.6rem; }
.controls .chips { margin: 0; }
.chip { border: 0; box-shadow: inset 0 0 0 1px var(--hair); background: transparent; color: var(--text-soft); padding: 0.4rem 0.8rem; border-radius: var(--r-pill); font-size: 0.85rem; font-weight: 500; cursor: pointer; transition: background-color 140ms var(--ease), color 140ms var(--ease); }
.chip:hover { color: var(--mh-text); background: color-mix(in srgb, var(--mh-text) 6%, transparent); }
.chip.on { color: var(--mh-on-accent); background: var(--mh-accent); box-shadow: none; }
select.ctrl { background: color-mix(in srgb, var(--mh-text) 7%, transparent); color: var(--mh-text); border: 0; box-shadow: inset 0 0 0 1px var(--hair); border-radius: var(--r-pill); padding: 0.42rem 0.8rem; font-size: 0.85rem; font-weight: 500; }
.board { display: grid; }
.board:empty { display: none; }
.issue, .card.alertcard { display: block; width: 100%; text-align: start; background: transparent; border: 0; border-top: 1px solid var(--hair); padding: 0.85rem 0.25rem; color: inherit; font: inherit; line-height: 1.5; cursor: pointer; text-decoration: none; border-radius: 0; box-shadow: none; overflow: visible; }
@keyframes mapListTarget { 50% { background: color-mix(in srgb, var(--mh-accent) 18%, transparent); } }
.board > .issue.from-map { outline: 2px solid var(--mh-accent); outline-offset: 2px; animation: mapListTarget 2.2s var(--ease); }
.card.alertcard::before { display: none; }
.board > .issue:last-child, .board > .card.alertcard:last-child { border-bottom: 1px solid var(--hair); }
.issue:hover .t > span, .alertcard:hover .t { color: var(--mh-accent-hover); }
.issue .t, .alertcard .t { display: flex; flex-wrap: wrap; gap: 0.3rem 0.6rem; align-items: baseline; font-weight: 500; letter-spacing: -0.01em; }
.issue .meta, .alertcard .meta { color: var(--mh-text-muted); font-size: 0.85rem; margin-top: 0.25rem; }
.alertcard .meta[style] { color: var(--mh-text-muted) !important; font-size: 0.85rem !important; }
.issue .conf { color: var(--mh-success); font-size: 0.85rem; margin-top: 0.2rem; }
.hasthumb { display: flex; gap: 0.8rem; align-items: center; }
.hasthumb > .cardbody { flex: 1 1 auto; min-width: 0; }
.cardthumb { flex: none; width: 56px; height: 56px; object-fit: cover; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--hair); }
.vidthumb { position: relative; flex: none; display: inline-flex; }
.vidthumb::after { content: '▶'; position: absolute; right: 4px; bottom: 3px; font-size: 10px; color: var(--mh-text); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); }
.pill.open, .pill.ack, .pill.ok, .pill.plain { padding: 0.15rem 0.6rem; font-size: 0.78rem; background: color-mix(in srgb, var(--mh-text) 7%, transparent); box-shadow: inset 0 0 0 1px var(--hair); margin: 0; }
.pill.open { color: var(--mh-caution); }
.pill.ack { color: var(--ack-t); }
.pill.ok { color: var(--mh-success); }
/* "Tracked by MHRC" (ticket 09): nothing is wrong and nobody else is holding it
   yet, so it must not borrow the caution amber. Muted ink on the shared pill
   ground -- the label carries the meaning, the color only says "no flag". */
.pill.plain { color: var(--mh-text-muted); }
.minetag { font-size: 0.8rem; color: var(--mh-accent); margin-left: 0.4rem; font-weight: 500; }
.boardnote { color: var(--mh-text-muted); font-size: 0.85rem; margin-top: 0.8rem; max-width: 62ch; }
.card.loading, .card.err { color: var(--mh-text-muted); padding: 1rem 0.25rem; border-top: 1px solid var(--hair); background: none; border-radius: 0; box-shadow: none; }
.card.loading::before, .card.err::before { display: none; }
.card.err { color: var(--mh-error); }

/* the map, in its own section under the frame, always on the page */
.mapsec { padding: 0 0 3rem; }
.mapsec__card { padding: clamp(1.2rem, 3vw, 2rem); }
.mapsec__card h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); }
.mapsec__sub { color: var(--mh-text-muted); font-size: 0.92rem; max-width: 62ch; margin: 0.5rem 0 0.9rem; }
.mapsec .chips { margin-bottom: 0.8rem; }
.mapshell { position: relative; border-radius: 14px; box-shadow: inset 0 0 0 1px var(--hair); overflow: hidden; background: var(--mh-surface); touch-action: none; cursor: grab; }
.mapshell:active { cursor: grabbing; }
/* !important on the size: the map engine writes the shell's height inline from the
   plan's aspect ratio, and fullscreen must win over that. */
/* Keep fullscreen maps below the global detail dialog and its backdrop. */
.mapshell.fs { position: fixed; inset: 0; z-index: 70; border-radius: 0; height: 100dvh !important; width: 100vw !important; box-shadow: none; }
html.tg-fs .mapshell.fs { top: var(--tg-top); height: calc(100dvh - var(--tg-top)) !important; }
.mapstage { position: relative; transform-origin: 0 0; width: 100%; }
.mapstage img { display: block; width: 100%; height: auto; user-select: none; -webkit-user-drag: none; pointer-events: none; filter: var(--imgfilter); }
.tilehost { position: absolute; inset: 0; pointer-events: none; }
.tilehost img { position: absolute; user-select: none; -webkit-user-drag: none; pointer-events: none; filter: var(--imgfilter); width: auto; }
.gmaphost { position: absolute; inset: 0; display: none; background: var(--mh-surface); }
.gmaphost.on { display: block; }
.basebar { position: absolute; left: 84px; bottom: 10px; z-index: 6; display: none; gap: 2px; padding: 3px; border-radius: var(--r-pill); background: color-mix(in srgb, var(--mh-deep) 80%, transparent); box-shadow: inset 0 0 0 1px var(--hair); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.basebar.on { display: flex; }
.basebar button { border: 0; background: transparent; color: var(--text-soft); font-size: 12.5px; font-weight: 500; padding: 6px 12px; border-radius: var(--r-pill); cursor: pointer; }
.basebar button[aria-pressed="true"] { background: color-mix(in srgb, var(--mh-text) 12%, transparent); color: var(--mh-text); }
.pin { position: absolute; border-radius: 50%; width: 14px; height: 14px; border: 2px solid rgba(255, 255, 255, 0.92); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5); cursor: pointer; transform: translate(-50%, -50%) scale(calc(1 / var(--k, 1))); }
.pin.issue-open { background: var(--mh-caution); }
.pin.issue-ack { background: var(--ack); }
.pin.issue-resolved { background: var(--mh-success); }
.pin.am-none { background: var(--mh-text-muted); opacity: 0.75; width: 11px; height: 11px; }
.pin.lf { background: var(--lf); border-radius: 1px; width: 14px; height: 14px; border-color: #fff; transform: translate(-50%, -50%) rotate(45deg) scale(calc(1 / var(--k, 1))); }
.pin.cluball { width: auto; height: auto; border-radius: var(--r-pill); padding: 2px 8px; background: var(--mh-deep); border: 2px solid var(--mh-accent); color: var(--mh-text); font-size: 11.5px; font-weight: 600; white-space: nowrap; line-height: 1.45; box-shadow: 0 1px 5px rgba(0, 0, 0, 0.4); }
.pin.alert { background: var(--mh-error); animation: alertping 1.15s infinite; }
@keyframes alertping {
  0%   { box-shadow: 0 0 0 0 rgba(255, 107, 94, 0.65); opacity: 1; }
  55%  { box-shadow: 0 0 0 10px rgba(255, 107, 94, 0); opacity: 0.72; }
  100% { box-shadow: 0 0 0 0 rgba(255, 107, 94, 0); opacity: 1; }
}
.halo { position: absolute; transform: translate(-50%, -50%); border-radius: 50%; background: rgba(242, 180, 65, 0.13); border: 1px solid rgba(242, 180, 65, 0.4); pointer-events: none; height: 0; }
.halo.alert { background: rgba(255, 107, 94, 0.13); border-color: rgba(255, 107, 94, 0.45); }
.halo.approx { background: transparent; border-style: dashed; }
.mapui { position: absolute; top: 10px; right: 10px; display: flex; flex-direction: column; gap: 6px; z-index: 5; }
.mapui button { width: 44px; height: 44px; border-radius: 10px; font-size: 17px; border: 0; box-shadow: inset 0 0 0 1px var(--hair); background: color-mix(in srgb, var(--mh-deep) 85%, transparent); color: var(--mh-text); cursor: pointer; }
.maphint { position: absolute; right: 10px; bottom: 8px; z-index: 5; font-size: 11.5px; max-width: 52%; text-align: right; color: var(--mh-text-muted); pointer-events: none; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); }
.maphint--phone { display: none; }
.mapempty { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); z-index: 5; background: color-mix(in srgb, var(--mh-deep) 88%, transparent); box-shadow: inset 0 0 0 1px var(--hair); padding: 0.35rem 0.8rem; border-radius: var(--r-pill); font-size: 0.82rem; color: var(--mh-text-muted); pointer-events: none; white-space: nowrap; }
.maplegend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 10px; font-size: 0.82rem; color: var(--mh-text-muted); }
.maplegend .dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 5px; vertical-align: -1px; }
.streetsvg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 3; overflow: visible; }
.streetsvg text { fill: #fff; font-family: var(--mh-font-text); font-weight: 500; letter-spacing: 0.18em; text-anchor: middle; font-size: calc(11.5px / var(--fscale, 1) / var(--k, 1)); paint-order: stroke; stroke: rgba(6, 16, 28, 0.82); stroke-width: calc(2.2px / var(--fscale, 1) / var(--k, 1)); opacity: 0; transition: opacity 0.45s ease; }
.zoomed .streetsvg text { opacity: 0.94; }
.zoomed .streetsvg text.lodoff { opacity: 0; }
.gslabel { position: absolute; transform: translate(-50%, -50%) rotate(var(--rot, 0deg)); color: #fff; opacity: 0.95; font: 600 11px/1 var(--mh-font-text); letter-spacing: 0.2em; text-transform: uppercase; text-shadow: 0 0 2px rgba(6, 16, 28, 0.95), 0 0 4px rgba(6, 16, 28, 0.9), 0 1px 3px rgba(0, 0, 0, 0.95), 0 0 10px rgba(0, 0, 0, 0.6); pointer-events: none; white-space: nowrap; }
body.mapfs { overflow: hidden; }
.mapshell.fs .basebar { bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }

/* -------------------------------------------------------------- intro -- */
.intro { padding: clamp(4rem, 9vw, 8rem) 0; }
.intro__text p { font-size: clamp(1.35rem, 2.5vw, 1.9rem); font-weight: 400; line-height: 1.35; letter-spacing: -0.025em; color: var(--mh-text); }
.intro__text p + p { margin-top: 1.4rem; }
/* each paragraph lights up whole as it arrives, so the eye follows a thought, not a word */
html.js .intro__text p { color: color-mix(in srgb, var(--mh-text) 34%, transparent); transition: color 520ms var(--ease); }
html.js .intro__text p.on { color: var(--mh-text); }

/* --------------------------------------------------------------- rows -- */
.rows { padding: 1rem 0 clamp(4rem, 8vw, 7rem); }
.rows__head { display: grid; grid-template-columns: 1fr; gap: 1.2rem 3rem; align-items: end; margin-bottom: 2rem; }
.rows__lede { color: var(--text-soft); max-width: 34rem; }
@media (min-width: 900px) { .rows__head { grid-template-columns: 1.3fr 1fr; } .rows__lede { justify-self: end; padding-bottom: 0.4rem; } }
/* The rows stack like cards under the scroll, as on Fora: each one sticks below
   the nav and the next slides up over it; the covered card eases back a little
   and dims (evening.js writes --stack, 0 to 1). Sticky is layout, not motion, so
   it stays under reduced motion; the ease-back and dim do not. */
.row { display: grid; grid-template-columns: 1fr; margin-top: 1.25rem; position: sticky; top: calc(var(--nav-h, 64px) + 1.25rem); transform-origin: 50% 0; }
html.js .row.in { transform: scale(calc(1 - var(--stack, 0) * 0.05)); filter: brightness(calc(1 - var(--stack, 0) * 0.45)); }
.rows .row:last-of-type { margin-bottom: 0; }
/* Solid, not glass (Sonny, 2026-09-04): as one card slides over the last, the
   covered copy showed through and the two headlines read superimposed. */
.rows .row { background: color-mix(in srgb, var(--mh-ground) 70%, var(--mh-surface)); }
.row__copy { padding: clamp(1.6rem, 4vw, 3rem); display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 1rem; }
.row__copy .pill--eyebrow { margin-bottom: 0.2rem; }
.row__copy p:not(.pill) { color: var(--text-soft); max-width: 40ch; }
.row__copy .btn { margin-top: 0.4rem; }
.wayfinding { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-top: 0.4rem; }
.wayfinding .btn { min-height: 44px; margin-top: 0; }
#maps, #library { scroll-margin-top: calc(var(--nav-h, 64px) + 1.25rem); }
.row__media { padding: 0.8rem; }
.row__media img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--r-inner); aspect-ratio: 4 / 3; }
.row__media--tall img { aspect-ratio: 4 / 3; object-position: 50% 30%; }
@media (min-width: 900px) {
  .row { grid-template-columns: 1fr 1fr; }
  .row--flip .row__copy { order: 2; }
  .row--flip .row__media { order: 1; }
  .row__media img { aspect-ratio: auto; min-height: 380px; max-height: 480px; }
  .row__media--tall img { min-height: 520px; max-height: 560px; }
}

/* -------------------------------------------------------------- close -- */
section.close { padding: clamp(5rem, 12vw, 9rem) 0 clamp(4rem, 8vw, 6rem); text-align: center; background: linear-gradient(to bottom, var(--ground) 0%, var(--mh-ground) 100%); }
.close .wrap { display: grid; justify-items: center; gap: 1.2rem; }
.close p { color: var(--text-soft); max-width: 34rem; }
.close .btn { margin-top: 0.4rem; }

/* --------------------------------------------------------------- foot -- */
.foot { background: var(--mh-ground); padding: 2.5rem 0 2.5rem; border-top: 1px solid var(--hair); }
.foot__brand { display: flex; align-items: center; gap: 0.6rem; color: var(--mh-text); margin-bottom: 1rem; }
.foot__brand .mh-mark { width: 26px; height: 24px; }
.foot__bottom { color: var(--mh-text-muted); font-size: 0.85rem; display: grid; gap: 0.35rem; }
.foot__tr:empty { display: none; }

/* ---------------------------------------------- sheet, viewer, toast -- */
#overlay { position: fixed; inset: 0; background: color-mix(in srgb, var(--mh-deep) 72%, transparent); display: none; z-index: 80; }
#detail { position: fixed; z-index: 81; display: none; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(34rem, calc(100vw - 2rem)); max-height: 86dvh; overflow: auto; background: var(--mh-surface); border-radius: var(--r-card); box-shadow: inset 0 0 0 1px var(--hair-2), 0 30px 80px -20px rgba(0, 0, 0, 0.7); padding: 1.4rem 1.4rem 1.8rem; }
#detail h3 { font-size: 1.3rem; margin: 0 2.6rem 0.2rem 0; }
#detail .drow { color: var(--text-soft); font-size: 0.95rem; margin-top: 0.5rem; }
#detail .drow b { color: var(--mh-text); font-weight: 500; }
/* The counts explainer (ticket 10). Secondary to the two numbers above it, but it
   carries a promise about what the number means and why it can disagree with the
   reaction count Turrit shows -- so it keeps readable muted ink, not the faintest. */
#detail .drow.countnote { color: var(--mh-text-muted); font-size: 0.85rem; line-height: 1.5; margin-top: 0.6rem; }
/* "Key dates" (ticket 12): a heading and its rows, tighter than the rows above so
   the block reads as one thing. The DATE is the emphasized half of each row. */
#detail .drow.kdhead { margin-top: 0.9rem; }
#detail .drow.kdrow { margin-top: 0.25rem; padding-left: 0.2rem; }
#dclose, #lbclose { position: absolute; top: 0.8rem; right: 0.8rem; width: 2.2rem; height: 2.2rem; border: 0; background: color-mix(in srgb, var(--mh-text) 9%, transparent); color: var(--mh-text); border-radius: 50%; cursor: pointer; z-index: 2; }
.dphotos { display: flex; gap: 0.5rem; margin-top: 0.9rem; overflow-x: auto; }
.dphotos.one { display: block; overflow: visible; }
.dphotos.one .dphoto { flex: none; width: 100%; height: auto; }
.dphotos.one img.dphoto { cursor: zoom-in; }
.dphoto { flex: 0 0 132px; height: 96px; object-fit: cover; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--hair); }
.dbtns { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.2rem; }
.dbtn { border: 0; box-shadow: inset 0 0 0 1px var(--hair-2); color: var(--mh-text); background: color-mix(in srgb, var(--mh-text) 8%, transparent); padding: 0.55rem 1rem; border-radius: var(--r-pill); font-size: 0.9rem; font-weight: 500; cursor: pointer; text-decoration: none; display: inline-block; }
.dbtn:hover { background: color-mix(in srgb, var(--mh-text) 13%, transparent); color: var(--mh-text); }
.dbtn.act { background: var(--mh-accent); color: var(--mh-on-accent); box-shadow: none; }
.dbtn.act:hover { background: var(--mh-accent-hover); color: var(--mh-on-accent); }
.dbtn.act:disabled { opacity: 0.55; cursor: default; }
.dlist { margin-top: 0.6rem; display: grid; }
.dlist .issue { position: relative; padding-right: 2rem; }
.dlist .issue::after { content: '›'; position: absolute; right: 0.6rem; top: 50%; transform: translateY(-50%); color: var(--mh-text-muted); }
/* '›'/'‹' are Unicode bidi-mirrored characters: a browser auto-flips their glyph inside
   an RTL run, so the SAME '›' as the LTR rule above -- not '‹' -- is what actually
   renders pointing left here. Verified in headless WebKit (worker03-rtl, 2026-09-14);
   do not "fix" this back to '‹', that renders pointing right again. */
[dir="rtl"] .dlist .issue::after { content: '›'; right: auto; left: 0.6rem; }
[dir="rtl"] .dlist .issue { padding-right: 2rem; padding-left: 2rem; }
.wnote { width: 100%; min-height: 84px; margin-top: 0.8rem; padding: 0.7rem 0.9rem; border: 0; box-shadow: inset 0 0 0 1px var(--hair-2); border-radius: 12px; background: var(--mh-ground); color: var(--mh-text); font: inherit; }
.wnote:focus { outline: none; box-shadow: inset 0 0 0 1px var(--mh-accent); }
.davatar { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; margin-right: 0.5rem; }
.avatarrow { display: flex; align-items: center; }
#lightbox { position: fixed; inset: 0; z-index: 120; background: color-mix(in srgb, var(--mh-deep) 94%, transparent); display: flex; align-items: center; justify-content: center; }
#lbwrap { width: 100%; height: 100%; overflow: auto; display: flex; align-items: center; justify-content: center; }
#lbimg { max-width: 100%; max-height: 100%; object-fit: contain; cursor: zoom-in; }
#lbimg.zoom { max-width: none; max-height: none; width: 200%; cursor: zoom-out; }
#toast { position: fixed; left: 50%; bottom: 1.6rem; transform: translateX(-50%); display: none; background: var(--mh-surface); box-shadow: inset 0 0 0 1px var(--hair-2), 0 12px 30px -10px rgba(0, 0, 0, 0.6); color: var(--mh-text); padding: 0.65rem 1.1rem; border-radius: var(--r-pill); z-index: 130; font-size: 0.9rem; }

/* ------------------------------------------------- depth on the media -- */
/* Three layers, three motions: the outer box tilts toward the pointer (perspective),
   the middle layer slides a little with scroll (depth against the card), and the
   image itself drifts slowly while the card is on screen. A sheen follows the
   pointer across the surface. All of it is transform and opacity only. */
.row__media { perspective: 1100px; }
.media3d { position: relative; border-radius: var(--r-inner); overflow: hidden; transform-style: preserve-3d; transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform 320ms var(--ease); will-change: transform; height: 100%; }
.media3d__par { height: 100%; transform: translate3d(0, var(--py, 0px), 0); will-change: transform; }
.media3d img, .media3d video { width: 100%; height: 100%; object-fit: cover; border-radius: 0; display: block; transform: scale(1.08); }
.media3d img { aspect-ratio: 4 / 3; }
.row__media--tall .media3d img { object-position: 50% 30%; }
html.js .row.in .media3d img { animation: drift 22s var(--ease) infinite alternate; }
@keyframes drift { from { transform: scale(1.08) translate3d(0, 0, 0); } to { transform: scale(1.14) translate3d(-1.6%, -1.2%, 0); } }
.media3d video { aspect-ratio: 16 / 9; background: var(--mh-deep); }
.sheen { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 320ms var(--ease);
  background: radial-gradient(420px at calc(var(--mx, 50) * 1%) calc(var(--my, 50) * 1%), color-mix(in srgb, var(--mh-text) 14%, transparent), transparent 70%); }
.media3d:hover .sheen { opacity: 1; }
@media (min-width: 900px) {
  .row__media img, .media3d img { aspect-ratio: auto; min-height: 380px; max-height: 480px; }
  .row__media--tall .media3d img { min-height: 520px; max-height: 560px; }
  .media3d video { aspect-ratio: auto; min-height: 380px; max-height: 480px; }
}

/* ------------------------------------------------------- reduced motion -- */
@media (prefers-reduced-motion: reduce) {
  .plane { --py: 0px !important; }
  .media3d { transform: none !important; transition: none; }
  .media3d__par { transform: none !important; }
  html.js .row.in .media3d img { animation: none; }
  .sheen { display: none; }
  html.js [data-reveal] { opacity: 1; transform: none; transition: none; }
  .intro__text .w { color: var(--mh-text); transition: none; }
  .livepill .dot, .pin.alert { animation: none; }
  .board > .issue.from-map { animation: none; background: color-mix(in srgb, var(--mh-accent) 12%, transparent); }
  .btn:active { transform: none; }
  .nav__links { transform: none !important; transition: none !important; }
}

/* --------------------------------------------------------------- phone -- */
@media (max-width: 900px) {
  .nav__inner { position: relative; grid-template-columns: auto 1fr auto; }
  /* The menu hangs below the compact sticky header instead of becoming a
     second row. Physical safe-area edges stay correct in both LTR and RTL. */
  .nav__links {
    display: flex;
    position: absolute;
    grid-column: auto;
    justify-self: auto;
    top: calc(100% - 0.35rem);
    left: max(var(--gutter), var(--nav-safe-left, env(safe-area-inset-left, 0px)));
    right: max(var(--gutter), var(--nav-safe-right, env(safe-area-inset-right, 0px)));
    z-index: 1;
    width: auto;
    flex-direction: column;
    gap: 0;
    max-height: max(0px, calc(100dvh - var(--nav-h, 64px) - 0.5rem - var(--nav-safe-bottom, env(safe-area-inset-bottom, 0px))));
    margin: 0;
    padding: 0.5rem;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-0.45rem) scale(0.985);
    transform-origin: top center;
    transition: opacity 160ms var(--ease), transform 160ms var(--ease), visibility 0s linear 160ms;
    background: var(--mh-surface);
    border-radius: 16px;
    box-shadow: inset 0 0 0 1px var(--hair-2), 0 18px 40px -12px rgba(0, 0, 0, 0.6);
  }
  .nav.open .nav__links {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transform: none;
    transition-delay: 0s;
  }
  .nav__links a { padding: 0.7rem 0.8rem; border-radius: 10px; }
  .nav__links a:hover { background: var(--mh-surface-2); }
  .nav__burger { display: inline-flex; }
  .nav__cta { display: none; }
  /* the phone looks at the head of the trail (its bright loop, left of frame) */
  /* The photograph spans the WIDTH (16:9, so 56.25vw tall) and its fade is pinned
     in vw to the photograph, not to the hero's height: the trail lands at 17-21vw
     from the top, its bright head at 28vw, and the copy starts below that at
     every width the phone rules cover (a 660px window as much as a 375px phone).
     Sizing by height put bars beside the photo on wider narrow screens. */
  /* room under the button for the whole stepped ridge, and the frame overlaps
     it only a little, so the layers have somewhere to slide as you scroll */
  .hero { padding: max(10rem, 34vw) 0 11.5rem; }
  .hero__sky { background-size: 100% auto; background-position: 0 0; background-image:
    linear-gradient(to bottom, color-mix(in srgb, var(--ground) 45%, transparent) 0, transparent 6vw, transparent 22vw, color-mix(in srgb, var(--horizon) 88%, transparent) 30vw, var(--horizon) 34vw),
    url("media/sky-contrail-900.webp?v=8a2ab5f0"); }
  /* The ridge at true ratio is a sliver on a phone (37vw tall, most of it behind
     the frame), so the planes are enlarged and re-stepped: crests at about
     42 / 35 / 28 / 21 vw above the hero's bottom, same order, same measured
     crest lines. */
  .plane--far     { --sc: 1.60; --oy: -11vw; }
  .plane--mid     { --sc: 1.50; --oy: 9vw; }
  .plane--near    { --sc: 1.40; --oy: 21vw; }
  .plane--nearest { --sc: 1.35; --oy: 25vw; }
}
/* Between a phone and a desktop the same vw steps would climb into the lede
   (42vw is 370px at 880px wide), so this band steps at about 32 / 27 / 22 / 17. */
@media (min-width: 600px) and (max-width: 900px) {
  .plane--far     { --sc: 1.35; --oy: -12vw; }
  .plane--mid     { --sc: 1.28; --oy: 6vw; }
  .plane--near    { --sc: 1.20; --oy: 16vw; }
  .plane--nearest { --sc: 1.15; --oy: 21vw; }
}
@media (max-width: 900px) {
  .frame-wrap { margin-top: -1.5rem; }
  .frame { grid-template-columns: 1fr; }
  /* every item stays visible: the strip wraps onto a second line instead of clipping */
  .frame__side { flex-direction: row; flex-wrap: wrap; border-right: 0; border-bottom: 1px solid var(--hair); padding: 0.6rem; gap: 0.25rem; }
  .frame__side [role="tab"] { width: auto; white-space: nowrap; padding: 0.5rem 0.7rem; font-size: 0.88rem; }
  .cover { aspect-ratio: 16 / 10; }
  .cover__card { left: 0.9rem; right: 0.9rem; bottom: 0.8rem; align-items: flex-start; }
  .cover__text { min-width: 0; flex: 1 1 auto; }
  .cover__name { font-size: 1.05rem; }
  .cover__meta { gap: 0.35rem 0.6rem; }
  .whoami { flex-wrap: wrap; }
  .avatar { width: 40px; height: 40px; }
  .avatar .mh-mark { width: 22px; height: 20px; }
}

/* ------------------------------------------------------------ composer -- */
/* The + button (bottom right, thumb reach) and the compose sheet's pieces, carried
   from the old page and restyled on the tokens. Shown only once signed in. */
#fab { position: fixed; right: 18px; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); z-index: 55; display: none;
       width: 58px; height: 58px; border-radius: 50%; border: 0; cursor: pointer; font-size: 0; color: transparent;
       background: radial-gradient(circle at 30% 24%, rgba(255,255,255,.35), rgba(255,255,255,0) 46%),
                   linear-gradient(155deg, var(--mh-accent-hover) 0%, var(--mh-accent) 48%, var(--mh-accent-press) 100%);
       box-shadow: 0 10px 22px rgba(0,0,0,.45), inset 0 1px 1px rgba(255,255,255,.45), inset 0 -2px 5px rgba(0,0,0,.25); }
#fab::before, #fab::after { content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
       background: var(--mh-deep); border-radius: 2px; }
#fab::before { width: 22px; height: 3px; }
#fab::after  { width: 3px; height: 22px; }
#fab:active { transform: translateY(1.5px); }
#fab:focus-visible { outline: 2px solid var(--mh-focus); outline-offset: 3px; }
body.signedin #fab { display: block; }
.cwrap { display: grid; gap: 10px; margin-top: 4px; }
.ccard { display: flex; gap: 12px; align-items: center; text-align: start; padding: 14px; border-radius: var(--r-inner);
         border: 0; box-shadow: inset 0 0 0 1px var(--hair); background: var(--glass-2); color: var(--ink); cursor: pointer;
         font-family: inherit; font-size: 15px; width: 100%; }
.ccard:hover { box-shadow: inset 0 0 0 1px var(--mh-accent); }
.ccard .cem { font-size: 26px; flex: 0 0 auto; }
.ccard .csub { display: block; color: var(--muted); font-size: 12.5px; margin-top: 2px; }
.cchips { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 4px; }
.cchip { box-shadow: inset 0 0 0 1px var(--hair); border: 0; background: var(--glass-2); color: var(--ink);
         border-radius: var(--r-pill); padding: 8px 13px; font-size: 13.5px; cursor: pointer; font-family: inherit; }
.cchip.on { background: var(--mh-accent); color: var(--mh-deep); font-weight: 600; box-shadow: none; }
.cid { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); margin-bottom: 10px; }
.cid b { color: var(--ink); }
.clabel { font-size: 12.5px; color: var(--muted); margin-top: 14px; text-transform: uppercase; letter-spacing: .04em; }
.cprev { box-shadow: inset 0 0 0 1px var(--hair); border-left: 3px solid var(--mh-accent); border-radius: 10px; padding: 12px 14px;
         background: var(--glass-2); margin-top: 8px; font-size: 14px; white-space: pre-wrap; }
.cmeta { color: var(--faint); font-size: 12.5px; margin-top: 8px; }
.cerr { box-shadow: inset 0 0 0 1px var(--mh-error); border-radius: 10px; padding: 10px 12px;
        background: color-mix(in srgb, var(--mh-error) 12%, transparent); font-size: 13.5px; margin-top: 10px; }
#pickshell { position: relative; overflow: hidden; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--hair);
             height: min(52vh, 420px); margin-top: 8px; touch-action: none; cursor: grab; background: var(--bg2); }
#pickshell:active { cursor: grabbing; }
#pickstage { position: absolute; left: 0; top: 0; width: 100%; transform-origin: 0 0; }
#pickstage img { width: 100%; display: block; user-select: none; -webkit-user-drag: none; pointer-events: none; filter: var(--imgfilter); }
/* The picker's fixed center pin — Turrit-style: the map moves, the pin does
   not, so it never scales with zoom. The head and stem lift while the map
   moves; the ground dot keeps the exact anchor visible. */
.centerpin { position: absolute; left: 50%; top: 50%; z-index: 5;
             pointer-events: none; width: 0; height: 0; }
.centerpin .cph { position: absolute; left: -11px; top: -30px; width: 22px; height: 22px;
                  border-radius: 50%; background: var(--alert); border: 3px solid #fff;
                  box-shadow: 0 3px 8px rgba(0,0,0,.45);
                  transition: transform .18s ease; }
.centerpin .cps { position: absolute; left: -1px; top: -9px; width: 2px; height: 9px;
                  background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.4);
                  transition: transform .18s ease; }
.centerpin .cpd { position: absolute; left: -3px; top: -3px; width: 6px; height: 6px;
                  border-radius: 50%; background: rgba(0,0,0,.45);
                  border: 1px solid rgba(255,255,255,.75); }
.centerpin.lift .cph, .centerpin.lift .cps { transform: translateY(-7px); }
.cphoto { margin-top: 10px; display: flex; gap: 10px; align-items: center; }
.cphoto img { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; box-shadow: inset 0 0 0 1px var(--hair); }
.spotsnap { position: relative; overflow: hidden; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--hair); height: 120px; margin-top: 10px; background: var(--bg2); }
.spotsnap img { position: absolute; left: 0; top: 0; max-width: none; filter: var(--imgfilter); }
.spotsnap .snappin { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-100%); font-size: 22px; text-shadow: 0 1px 3px rgba(0,0,0,.5); }
.spotsnap .snaplbl { position: absolute; left: 8px; bottom: 6px; z-index: 2; font-size: 11.5px; color: var(--muted);
                     background: color-mix(in srgb, var(--card) 85%, transparent); border-radius: 7px; padding: 1px 7px; }
.dlist .issue { position: relative; padding-right: 34px; }
.dlist .issue::after { content: '›'; position: absolute; right: 14px; top: 50%; transform: translateY(-58%); color: var(--faint); font-size: 20px; }
/* '›'/'‹' are Unicode bidi-mirrored characters: a browser auto-flips their glyph inside
   an RTL run, so the SAME '›' as the LTR rule above -- not '‹' -- is what actually
   renders pointing left here. Verified in headless WebKit (worker03-rtl, 2026-09-14);
   do not "fix" this back to '‹', that renders pointing right again. */
[dir="rtl"] .dlist .issue::after { content: '›'; right: auto; left: 14px; }
[dir="rtl"] .dlist .issue { padding-right: 34px; padding-left: 34px; }

/* ---------------------------------------- answers, amenities, origins -- */
/* answers.html: the answer bank, the clubhouse's own map and the origins globe. */
.page { padding-block: calc(64px + 2.5rem) 4rem; }
.page__head { max-width: 46rem; margin-bottom: 2rem; }
.page__head h1 { font-size: clamp(2rem, 4.5vw, 3.1rem); letter-spacing: -0.03em; line-height: 1.05; margin: 0.6rem 0 0.8rem; font-weight: 500; }
.page__head .lede { color: var(--text-soft); font-size: 1.08rem; line-height: 1.55; margin: 0; }
.sec { padding: 1.5rem; margin-top: 1.5rem; }
.sec h2 { font-size: clamp(1.35rem, 2.6vw, 1.7rem); letter-spacing: -0.02em; margin: 0.4rem 0 0.4rem; font-weight: 500; }
.sec .sub { color: var(--text-soft); margin: 0 0 1rem; line-height: 1.5; }
.sec .kicker { font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mh-accent); }
.sec .controls { margin-bottom: 0.8rem; }
#ansq { width: min(340px, 100%); background: var(--glass-2); color: var(--ink); box-shadow: inset 0 0 0 1px var(--hair); border: 0;
        border-radius: var(--r-pill); padding: 0.6rem 1rem; font: inherit; font-size: 0.95rem; }
#ansq::placeholder { color: var(--faint); }
#ansq:focus-visible { outline: 2px solid var(--mh-focus); outline-offset: 2px; }
.anscount { color: var(--faint); font-size: 12px; margin-top: 5px; }
.issue .t .kw { color: var(--mh-accent); }
.issue .t .kw + span { font-weight: 500; }
.amenity-row { display: flex; justify-content: space-between; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--hair);
               font-size: 14px; align-items: center; cursor: pointer; }
.amenity-row:hover span:first-child { color: var(--mh-accent); }
.amenity-row:last-child { border-bottom: 0; }
.amenity-row .cnt { color: var(--muted); font-size: 13px; white-space: nowrap; }
button.amenity-row { appearance: none; -webkit-appearance: none; font: inherit; color: inherit; text-align: start; width: 100%; margin: 0;
                     background: none; border: 0; border-bottom: 1px solid var(--hair); }
button.amenity-row:focus-visible { outline: 2px solid var(--mh-focus); outline-offset: 2px; border-radius: 6px; }
canvas { display: block; width: 100%; }
.canvascap { color: var(--muted); font-size: 13px; margin-top: 8px; }
.canvascap b { color: var(--ink); }
.globewrap { position: relative; text-align: center; padding: 6px 0 2px; }
.globelock { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; }
.globelock .ic { font-size: 26px; }
.globelock .tx { font-size: 12.5px; color: var(--muted); max-width: 240px; }
.globehero { text-align: center; margin: 10px 0 6px; }
.globehero .n { font-size: clamp(44px, 9vw, 64px); font-weight: 500; letter-spacing: -0.04em; line-height: 1; }
.globehero .c { color: var(--muted); font-size: 15px; margin-top: 2px; }
.globehero .m { color: var(--faint); font-size: 13px; margin-top: 6px; }
.countrychips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.countrychips .cc { box-shadow: inset 0 0 0 1px var(--hair); background: var(--glass-2); border-radius: var(--r-pill); padding: 4px 12px; font-size: 13px; color: var(--muted); }
.countrychips .cc b { color: var(--ink); margin-right: 5px; }
.two { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 900px) { .two { grid-template-columns: 1fr 1fr; } }

/* A3: a separate, opaque identity panel on phones. */
.cover__photo { position: absolute; inset: 0; }
@media (max-width: 600px) {
  /* Let the language selector and menu move below the brand when enlarged text
     needs the room. Keep both complete targets and the full language label. */
  .nav__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding-inline: .5rem;
    gap: .3rem;
  }
  .nav__brand { flex: 1 0 auto; }
  .nav__right { flex: 0 0 auto; margin-inline-start: auto; }
  .nav__right .btn--text { padding-inline: .6rem; }
  .hero__copy, .hero__actions, .close .wrap,
  .frame, .frame__side, .frame__main,
  .row, .row__copy, .row__media { min-width: 0; }
  .hero__copy {
    width: calc(100vw - var(--gutter) - var(--gutter));
    max-width: calc(100vw - var(--gutter) - var(--gutter));
    padding-inline: 0;
  }
  .hero__copy > * { min-width: 0; max-width: 100%; }
  .hero__copy > h1, .hero__lede, .hero__actions { width: 100%; }
  .rows__head, .row, .close .wrap { grid-template-columns: minmax(0, 1fr); }
  .rows__head > *, .row__copy > *, .close .wrap > * { min-width: 0; max-width: 100%; }
  .hero__copy > *, .intro__text p, .mapsec__card h2,
  .rows__head > *, .row__copy > *, .close .wrap > * { overflow-wrap: anywhere; }
  .hero__copy > .pill, .rows__head .pill, .row__copy > .btn,
  .chip, .livepill, .whoami, .close .btn {
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .hero__actions .btn, .frame__side [role="tab"],
  .wayfinding .btn, .close .btn {
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
    text-align: center;
  }
  .cover { aspect-ratio: auto; }
  .cover__photo { position: relative; width: 100%; aspect-ratio: 16 / 10; min-height: 200px; }
  .cover__card { position: static; flex-wrap: wrap; padding: min(.9rem, 4vw); background: var(--mh-ground); }
  .cover__text { flex: 1 1 auto; min-width: min(12rem, 100%); }
  .cover__name { overflow-wrap: break-word; }
  .cover__meta, .livepill, .whoami { width: 100%; min-width: 0; max-width: 100%; flex-wrap: wrap; }
  .livepill span, .whoami span, .whoami b { min-width: 0; overflow-wrap: anywhere; }
  .whoami .btn { max-width: 100%; }
  body.signedin .foot {
    padding-bottom: max(2.5rem, calc(58px + 4rem + env(safe-area-inset-bottom, 0px)));
  }
  /* Three 44px controls, two 6px gaps, and 10px clearance above and below. */
  #map-section .mapshell:not(.fs) { min-height: 164px; }
  #map-section .mapshell:not(.fs) #zfs { position: absolute; right: 50px; top: 0; }
  #map-section .mapshell:not(.fs) .basebar { left: 10px; }
  #map-section .mapshell:not(.fs) > .maphint { display: none; }
  #map-section .maphint--phone { display: block; position: static; max-width: none;
    margin-top: 1rem; text-align: start; text-shadow: none; }
  #map-section .mapshell.fs > .maphint { display: block; }
  #map-section .mapshell.fs + .maphint--phone { display: none; }
}

/* A5: one introduction, with direct routes to the three Answers tools. */
.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip-path: inset(50%); white-space: nowrap; border: 0 !important; }
.page__jump { display: flex; flex-wrap: wrap; gap: .4rem 1rem; margin-top: 1rem; }
.page__jump a { display: inline-flex; align-items: center; min-height: 44px; color: var(--mh-accent); text-decoration: underline; text-underline-offset: .2em; }
#answers-section, #club-section, #origins-section { scroll-margin-top: 84px; }

/* A7: keep the existing compose button and make its purpose visible. */
#fab { width: auto; height: auto; min-height: 58px; max-width: calc(100vw - 36px); padding: .7rem 1rem .7rem 3rem; border-radius: var(--r-pill); color: var(--mh-on-accent); font: 600 .85rem/1.3 var(--mh-font-text); white-space: normal; overflow-wrap: anywhere; }
#fab span { min-width: 0; }
#fab::before, #fab::after { left: 26px; }

/* A9: consistent navigation targets and a non-color current-page cue. */
.nav .btn, .nav__brand, .nav__links a { min-height: 44px; }
.nav .btn--icon { min-width: 44px; }
.nav__brand, .nav__links a { align-items: center; }
.nav__links a { display: inline-flex; }
.nav__links a[aria-current="page"] { color: var(--mh-text); font-weight: 600; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .35em; }
.chip, .cchip { min-height: 44px; }

/* Owner-private My Activity list. Report wording is allowed to wrap exactly as
   saved; photo bytes stay transient and unavailable media remains a receipt. */
.activity-state { padding: 1.25rem; color: var(--text-soft); }
.activity-state--error { color: var(--mh-error); }
.activity-state .btn { margin-top: .8rem; }
.activity-list { display: grid; gap: 1rem; }
.activity-report { padding: 1.25rem; overflow-wrap: anywhere; }
.activity-report h2 { margin: .8rem 0 .35rem; font-size: .9rem; color: var(--mh-text-muted); font-weight: 500; }
.activity-report__date { margin: 0 0 .65rem; color: var(--mh-text-muted); font-size: .85rem; }
.activity-report__status { display: inline-flex; padding: .25rem .65rem; border-radius: var(--r-pill); box-shadow: inset 0 0 0 1px currentColor; font-size: .8rem; font-weight: 600; }
.activity-report__status--pending_review, .activity-report__status--unknown { color: var(--mh-caution); }
.activity-report__status--linked { color: var(--mh-success); }
.activity-report__status--dismissed, .activity-report__status--withdrawn { color: var(--mh-text-muted); }
.activity-report__original { margin: 0; white-space: pre-wrap; line-height: 1.55; }
.activity-report__issue, .activity-report__attachments { margin: .85rem 0 0; padding-top: .75rem; border-top: 1px solid var(--hair); color: var(--text-soft); font-size: .88rem; }
.activity-report__media { margin-top: .85rem; }
.activity-report__media-toggle, .activity-report__media-more, .activity-attachment__action, .activity-photo__close { min-height: 44px; white-space: normal; }
.activity-report__media-body { margin-top: .75rem; }
.activity-report__media-status { margin: 0; color: var(--text-soft); font-size: .88rem; }
.activity-report__media-list { display: grid; gap: .75rem; }
.activity-attachment { min-width: 0; padding: .8rem; border: 1px solid var(--hair); border-radius: var(--r-md); background: color-mix(in srgb, var(--mh-surface) 82%, transparent); }
.activity-attachment__kind { margin: 0 0 .5rem; color: var(--mh-text); font-weight: 600; }
.activity-attachment__receipt, .activity-attachment__status { margin: 0; color: var(--text-soft); font-size: .88rem; }
.activity-attachment__action { margin-top: .15rem; }
.activity-photo { display: grid; gap: .65rem; justify-items: start; margin: .75rem 0 0; }
.activity-photo__image { display: block; width: auto; max-width: 100%; max-height: min(60vh, 34rem); border-radius: var(--r-md); background: var(--mh-ground); object-fit: contain; }
.activity-more { display: flex; justify-content: center; margin-top: 1.25rem; }
#activity-more, #activity-retry { min-height: 44px; }
.personal-tasks { margin-top: 2rem; padding: 1.25rem; }
.personal-tasks > h2 { margin: 0 0 .35rem; font-size: 1.05rem; }
.personal-tasks > p { margin: 0; color: var(--text-soft); font-size: .88rem; }
.bot-handoff { padding-top: 1rem; margin-top: 1rem; border-top: 1px solid var(--hair); }
.bot-handoff h3 { margin: 0 0 .55rem; font-size: .95rem; font-weight: 600; }
.bot-handoff [data-bot-command] { display: inline-block; padding: .3rem .55rem; border-radius: 6px; background: color-mix(in srgb, var(--mh-text) 8%, transparent); color: var(--mh-text); font-size: .9rem; user-select: all; -webkit-user-select: all; }
.bot-handoff__actions { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: .7rem; }
.bot-handoff__actions .btn { min-width: 44px; min-height: 44px; }
.bot-handoff__status { min-height: 1.35em; margin: .55rem 0 0; color: var(--text-soft); font-size: .82rem; }
.bot-handoff__status--success { color: var(--mh-success); }
.bot-handoff__status--caution { color: var(--mh-caution); }
.directory-privacy { max-width: 1180px; margin: 1rem auto 0; padding: 1rem 1.1rem; }
.directory-privacy > p { margin: 0; color: var(--text-soft); font-size: .88rem; }
#limbanner .bot-handoff, #admunlisted .bot-handoff { padding-top: .8rem; margin-top: .8rem; }
#limbanner .bot-handoff__actions button, #limbanner .bot-handoff__actions a,
#admunlisted .bot-handoff__actions button, #admunlisted .bot-handoff__actions a { min-width: 44px; min-height: 44px; }
@media (max-width: 600px) {
  .activity-report__media-toggle, .activity-report__media-more,
  .activity-attachment__action, .activity-photo__close { width: 100%; }
}
@media (min-width: 901px) {
  .nav__inner { grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 1rem; }
  .nav__links { justify-content: center; flex-wrap: wrap; gap: .2rem 1rem; }
}

/* Find a record without losing the current list or exposing search in a URL. */
.record-search{display:grid;gap:.65rem;margin:1rem 0 1.25rem;min-width:0}
.record-search label{font-weight:600}
.record-search input,.record-search select{font:inherit;color:var(--text, #edf2f7);background:var(--panel, #0c2233);border:1px solid var(--line, #355063);border-radius:12px;min-height:44px;padding:.7rem;min-width:0;max-width:100%}
.record-search input{width:100%}.record-search__row{display:flex;gap:.5rem;align-items:center}.record-search__row input{flex:1}
.record-search__filters{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem}.record-search__actions{display:flex;gap:.6rem;flex-wrap:wrap}
.record-search__scope,.record-search [role=status]{font-size:.8rem;color:var(--muted);margin:0}
.record-ref{direction:ltr;unicode-bidi:isolate;font-family:ui-monospace,monospace;display:inline-block;font-size:.82rem;color:var(--muted);margin:.2rem 0 .5rem}
.record-translation__note{font-size:.78rem;color:var(--muted);display:block;margin-top:.4rem}.record-translation__toggle{font:inherit;min-height:44px;margin-top:.35rem}
@media(max-width:440px){.record-search__filters{grid-template-columns:1fr}.record-search__row{flex-wrap:wrap}.record-search__row input{flex-basis:100%}}