/* ===== GeoSlice — design tokens =====
   Subject: precise geographic measurement. Treat the whole UI like a
   surveying instrument giving readings, not a generic app shell.
   Colour: warm paper background, one confident solid purple (no gradients),
   teal / rust for the two split regions (purple doubles as the third,
   middle region in thirds mode - a deliberate callback, not a coincidence).
   Type: Fraunces (serif, has real character) for anything that should feel
   like a verdict or a heading; Inter for UI chrome; IBM Plex Mono for any
   number that's a measurement (percentages, populations, elevations) -
   giving those a "readout" feel appropriate to the subject. */

:root {
  --paper: #F6F2EA;
  --paper-deep: #EEE7D8;
  --ink: #241C2E;
  --ink-soft: #5B5266;
  --purple: #4A2F6B;
  --purple-deep: #2E1C46;
  --purple-tint: #EDE6F5;
  --line-hair: #DAD1BE;
  --region-a: #1F6F78;
  --region-a-tint: #E4F1F1;
  --region-b: #B5541D;
  --region-b-tint: #FBEBDE;
  --region-c: var(--purple);
  --good: #2F6B4F;
  --radius-lg: 18px;
  --radius-md: 12px;
  --radius-sm: 8px;
}

html, body {
  margin: 0; padding: 0; min-height: 100%;
  background: var(--paper);
  font-family: 'Inter', -apple-system, "Segoe UI", Arial, sans-serif;
  color: var(--ink);
  /* On mobile, a touch-drag starting near the top of the page (exactly
     where dragging a split handle often happens) can get picked up by the
     browser's own pull-to-refresh gesture instead of staying a normal
     touch event - this stops that gesture from triggering at all, so
     touches inside the map are only ever handled by Leaflet's own JS, not
     fought over with the browser. Laptop/mouse users never hit this at
     all, since there's no touch gesture to compete with in the first
     place. */
  overscroll-behavior-y: contain;
}

#wrap {
  position: relative; min-height: 100vh;
  width: 42vw; min-width: 380px; max-width: 720px; margin: 0 auto;
  background: #FFFDF8;
  box-shadow: 0 10px 34px rgba(46, 28, 70, 0.14);
  display: flex; flex-direction: column; align-items: stretch; box-sizing: border-box;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  overflow: hidden;
}
@media (max-width: 820px) { #wrap { width: 100vw; min-width: 0; max-width: none; box-shadow: none; border-radius: 0; } }

/* header is a full-width bar sitting OUTSIDE the narrow game card, spanning
   the entire browser width on desktop - about half the height of the old
   two-row version, everything on one line where there's room for it */
#archiveBanner {
  background: #F3E6C8; color: #6B4E1E; text-align: center; font-family: 'IBM Plex Mono', monospace;
  font-size: 12px; font-weight: 600; padding: 8px 16px; letter-spacing: 0.2px;
  align-items: center; justify-content: center; gap: 14px;
}
#archiveBanner a { color: #6B4E1E; text-decoration: underline; }
#topspace {
  width: 100%; box-sizing: border-box;
  background: var(--purple);
  border-bottom: 3px solid var(--purple-deep);
  position: relative; z-index: 6000;
}
#topspaceInner {
  max-width: 1100px; margin: 0 auto; box-sizing: border-box;
  display: flex; align-items: center; gap: 18px;
  padding: 0 20px; height: 46px;
}
#brandLeft { display: flex; align-items: center; gap: 8px; flex-shrink: 0; text-decoration: none; }
#brandLogoIcon { width: 24px; height: 24px; display: block; }
#brandTag {
  font-family: 'Fraunces', Georgia, serif; font-weight: 700; font-size: 16px;
  color: #FBF8FF; letter-spacing: 0.2px;
}
#streakBadge {
  display: inline-flex; align-items: center; gap: 3px;
  font-family: 'IBM Plex Mono', monospace; font-weight: 600; font-size: 12px;
  color: #FBF8FF; background: rgba(255,255,255,0.16); padding: 3px 8px; border-radius: 999px;
}
#modeTabs { display: flex; align-items: center; gap: 4px; min-width: 0; }
.modeTab {
  font-family: 'Inter', sans-serif; font-weight: 600; font-size: 12px;
  color: #D8C7EC; background: transparent; padding: 6px 10px; border-radius: 999px;
  box-shadow: none; white-space: nowrap;
}
.modeTab:hover { background: rgba(255,255,255,0.12); color: #fff; }
.modeTab.active { background: #FBF8FF; color: var(--purple-deep); }
.modeTab.played:not(.active) { color: #B49CD1; }
.modeTab.played::after { content: ' \2713'; }
.modeTab.disabled { opacity: 0.4; pointer-events: none; }
#hamburgerWrap { position: relative; margin-left: auto; flex-shrink: 0; }
#hamburgerBtn {
  background: rgba(255,255,255,0.14); padding: 8px 10px; display: flex; flex-direction: column;
  gap: 4px; box-shadow: none;
}
#hamburgerBtn:hover { background: rgba(255,255,255,0.24); }
#hamburgerBtn span { display: block; width: 16px; height: 2px; background: #fff; border-radius: 2px; }
#howToPlayWrap { position: relative; flex-shrink: 0; margin-left: 4px; }
#howToPlayBtn {
  background: rgba(255,255,255,0.14); color: #fff; font-size: 11px; font-weight: 600;
  padding: 6px 10px; box-shadow: none; white-space: nowrap;
}
#howToPlayBtn:hover { background: rgba(255,255,255,0.24); }
#howToPlayDropdown {
  display: none; position: absolute; top: calc(100% + 8px); left: 0; z-index: 6001;
  background: #FFFDF8; border-radius: var(--radius-md); box-shadow: 0 8px 24px rgba(46,28,70,0.25);
  padding: 14px; width: 260px; box-sizing: border-box;
}
#howToPlayDropdown.open { display: block; }
#howToModeToggle { display: flex; gap: 4px; margin-bottom: 10px; }
.htpModeBtn {
  flex: 1; font-family: 'Inter', sans-serif; font-weight: 600; font-size: 11px;
  color: var(--ink-soft); background: var(--paper-deep); padding: 6px 4px; border-radius: 999px;
  box-shadow: none;
}
.htpModeBtn.active { background: var(--purple); color: #fff; }
#howToContent { font-size: 12px; color: var(--ink); line-height: 1.5; }
#howToContent p { margin: 0 0 8px; }
#howToContent .step { display: flex; gap: 8px; margin-bottom: 6px; align-items: flex-start; }
#howToContent .step-num {
  flex-shrink: 0; width: 16px; height: 16px; border-radius: 50%; background: var(--purple);
  color: #fff; font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center;
}
#dataSourceLink {
  display: block; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line-hair);
  font-size: 11px; color: var(--ink-soft); text-decoration: none;
}
#dataSourceLink:hover { color: var(--purple); }
@media (max-width: 640px) {
  /* Anchoring to the parent button's own position (the base rule's
     right:0) doesn't guarantee that button is anywhere near the actual
     screen edge on mobile - #howToPlayWrap can sit mid-header depending
     on how the mode tabs wrap, so a near-full-viewport-width dropdown
     anchored there was extending slightly past the left edge of the
     screen. Fixed positioning relative to the viewport itself instead
     guarantees it always sits fully on-screen regardless of where the
     trigger button ends up - top is set dynamically in JS (the mobile
     header's height varies since it wraps to multiple rows), left/right
     alone are enough to guarantee it stays within the screen horizontally.
  */
  #howToPlayDropdown { position: fixed; left: 16px; right: 16px; width: auto; max-width: none; }
}
@media (max-width: 640px) {
  #topspaceInner { height: auto; flex-wrap: wrap; padding: 10px 16px; gap: 8px 14px; }
  #modeTabs { order: 3; width: 100%; }
}
#roundProgress {
  font-family: 'IBM Plex Mono', monospace; font-size: 11px;
  color: #D8C7EC; letter-spacing: 0.3px; white-space: nowrap; margin-left: 2px;
}

#mapSquare { width: 100%; aspect-ratio: 1 / 1; position: relative; flex: 0 0 auto; background: #dfe7ee; overscroll-behavior: contain; }
#map { position: absolute; inset: 0; touch-action: none; }

#bottomspace {
  flex: 1 1 auto; padding: 18px; box-sizing: border-box;
  display: flex; flex-direction: column; gap: 14px; align-items: center;
}
.btnrow { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }

button {
  border: none; padding: 10px 18px; border-radius: var(--radius-sm);
  cursor: pointer; font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 600;
  transition: transform 0.12s ease, background-color 0.12s ease;
}
button:hover { transform: translateY(-1px); }
button:active { transform: translateY(0); }
button:disabled { opacity: 0.45; cursor: default; transform: none; }

#newRegionBtn { background: var(--paper-deep); color: var(--ink); }
#newRegionBtn:hover { background: #E5DCC7; }
#lockBtn { background: var(--purple); color: #fff; }
#rerollBtn { background: var(--paper-deep); color: var(--ink); }
#lockBtn:hover { background: var(--purple-deep); }

#nextRow { display: none; }
#playNextBtn { background: var(--region-b); color: #fff; font-size: 14px; padding: 11px 22px; }
#playNextBtn:hover { background: #9A4718; }

/* --- score reveal: the one "signature" moment in the design - a verdict
   stamping into place, not a card that just appears --- */
#score {
  width: 100%; max-width: 440px; background: #fff;
  border-radius: var(--radius-lg); box-sizing: border-box;
  box-shadow: 0 6px 20px rgba(46,28,70,0.10);
  display: none; overflow: hidden;
}
.stamp-anim { animation: stampIn 0.42s cubic-bezier(0.2, 0.9, 0.3, 1.2) both; }
@keyframes stampIn {
  0%   { transform: scale(0.85) translateY(6px); opacity: 0; }
  60%  { transform: scale(1.03) translateY(0); opacity: 1; }
  100% { transform: scale(1) translateY(0); opacity: 1; }
}
#scoreHead {
  background: var(--purple); color: #fff; padding: 14px 20px 10px;
  text-align: center;
}
#scoreHead .bignum {
  font-family: 'IBM Plex Mono', monospace; font-weight: 600; font-size: 50px;
  line-height: 1; letter-spacing: -1px; margin-bottom: 2px;
}
#scoreHead .bignum-of {
  font-size: 22px; opacity: 0.6; letter-spacing: 0;
}
#scoreHead .msg {
  font-family: 'Fraunces', Georgia, serif; font-weight: 700; font-size: 16px;
  color: #EBDFF9;
}
#scoreBody { display: flex; }
#scoreBody.final { display: block; padding: 4px 20px 18px; }
.score-side {
  flex: 1; padding: 14px 12px; text-align: center;
  border-right: 1px solid var(--line-hair);
}
.score-side:last-child { border-right: none; }
.score-side .swatch {
  width: 12px; height: 12px; border-radius: 3px; display: inline-block; margin-right: 6px;
  vertical-align: middle;
}
.score-side .label { font-size: 11px; color: var(--ink-soft); font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px; }
.score-side .pct { font-family: 'IBM Plex Mono', monospace; font-size: 22px; font-weight: 600; margin: 4px 0 2px; }
.score-side .pop { font-family: 'IBM Plex Mono', monospace; font-size: 12px; color: var(--ink-soft); }

#loading {
  position: absolute; top: 10px; left: 10px; z-index: 1001;
  background: var(--purple-deep); color: #fff; padding: 6px 12px; border-radius: 999px;
  font-family: 'IBM Plex Mono', monospace; font-size: 11px; display: none;
}
.place-label {
  background: none; border: none; box-shadow: none;
  font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 600; color: #222;
  text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff;
  white-space: nowrap; pointer-events: none;
}

.handle-icon {
  box-sizing: border-box; background: var(--purple); border: 4px solid #fff; border-radius: 50%;
  width: 30px; height: 30px;
  box-shadow: 0 0 0 2px rgba(74,47,107,0.35), 0 2px 5px rgba(0,0,0,0.3);
  cursor: grab;
}
.handle-icon.center { background: var(--region-b); width: 36px; height: 36px; box-shadow: 0 0 0 3px rgba(181,84,29,0.3), 0 2px 5px rgba(0,0,0,0.35); }
.handle-icon.proxy { box-shadow: 0 0 0 2px rgba(74,47,107,0.35), 0 2px 5px rgba(0,0,0,0.3), 0 0 0 6px rgba(246,242,234,0.9), 0 0 0 8px var(--purple-deep); }
.handle-icon.proxy.center { box-shadow: 0 0 0 3px rgba(181,84,29,0.3), 0 2px 5px rgba(0,0,0,0.35), 0 0 0 6px rgba(246,242,234,0.9), 0 0 0 8px var(--purple-deep); }

/* quarters rotate handle: circle + outward-pointing arrow, like a rotation
   dial - the arrow rotates via JS to always face the current angle */
.handle-icon.quarter-rotate { background: transparent; border: none; box-shadow: none; }
.dial-inner {
  position: relative; width: 100%; height: 100%; box-sizing: border-box;
  background: var(--purple); border: 4px solid #fff; border-radius: 50%;
  box-shadow: 0 0 0 2px rgba(74,47,107,0.35), 0 2px 5px rgba(0,0,0,0.3);
  transition: transform 0.05s linear;
}
.dial-inner::after {
  content: ''; position: absolute; top: -9px; left: 50%; transform: translateX(-50%);
  width: 0; height: 0;
  border-left: 6px solid transparent; border-right: 6px solid transparent;
  border-bottom: 10px solid var(--purple);
}
.handle-icon.quarter-rotate.proxy .dial-inner {
  box-shadow: 0 0 0 2px rgba(74,47,107,0.35), 0 2px 5px rgba(0,0,0,0.3), 0 0 0 6px rgba(246,242,234,0.9), 0 0 0 8px var(--purple-deep);
}

#topRightControls { position: absolute; top: 10px; right: 10px; z-index: 1000; display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }
#topRightRow1 { display: flex; gap: 6px; }
#modeToggle, #splitToggle {
  background: rgba(255,255,255,0.95); border-radius: 999px; padding: 3px; display: flex;
  box-shadow: 0 2px 6px rgba(46,28,70,0.2); font-size: 11px; font-weight: 600;
}
#modeToggle button, #splitToggle button { border-radius: 999px; padding: 5px 10px; background: transparent; }
#modeToggle button.active, #splitToggle button.active { background: var(--purple); color: #fff; }
#backToStartBtn {
  background: rgba(255,255,255,0.95); border-radius: 999px; padding: 6px 12px;
  font-size: 11px; box-shadow: 0 2px 6px rgba(46,28,70,0.2);
}

/* percentage badges drawn on the map itself - pop in rather than appear instantly */
.pct-badge {
  font-family: 'IBM Plex Mono', monospace; font-size: 19px; font-weight: 600; color: #fff;
  padding: 5px 12px; border-radius: 999px; box-shadow: 0 3px 10px rgba(0,0,0,0.28);
  pointer-events: none; white-space: nowrap; display: inline-block;
  animation: badgePop 0.32s cubic-bezier(0.2, 0.9, 0.3, 1.3) both;
}
@keyframes badgePop {
  0%   { transform: scale(0.4); opacity: 0; }
  70%  { transform: scale(1.08); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}


/* --- modal (how to play / round info) --- */
#modalOverlay {
  display: none; position: fixed; inset: 0; z-index: 5000;
  background: rgba(36, 28, 46, 0.55);
  align-items: center; justify-content: center; padding: 20px; box-sizing: border-box;
}
#modalOverlay.open { display: flex; }
#modalBox {
  position: relative; background: #FFFDF8; border-radius: var(--radius-lg);
  max-width: 460px; width: 100%; max-height: 82vh; overflow-y: auto;
  padding: 26px 26px 22px; box-sizing: border-box;
  box-shadow: 0 20px 50px rgba(46,28,70,0.3);
  animation: modalIn 0.28s cubic-bezier(0.2, 0.9, 0.3, 1.1) both;
}
@keyframes modalIn { from { transform: scale(0.92) translateY(8px); opacity: 0; } to { transform: scale(1) translateY(0); opacity: 1; } }
#modalCloseBtn {
  position: absolute; top: 14px; right: 14px; background: var(--paper-deep); color: var(--ink);
  width: 30px; height: 30px; border-radius: 50%; font-size: 18px; line-height: 1;
  padding: 0; display: flex; align-items: center; justify-content: center;
}
#modalContent h2 {
  font-family: 'Fraunces', Georgia, serif; font-size: 21px; margin: 0 0 12px; color: var(--purple-deep);
}
#modalContent p { margin: 0 0 12px; line-height: 1.5; font-size: 14px; color: var(--ink); }
#modalContent ul { margin: 0 0 12px; padding-left: 20px; line-height: 1.6; font-size: 14px; }
#modalContent .step { display: flex; gap: 10px; margin-bottom: 10px; align-items: flex-start; }
#modalContent .step-num {
  flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; background: var(--purple);
  color: #fff; font-family: 'IBM Plex Mono', monospace; font-size: 12px; font-weight: 600;
  display: flex; align-items: center; justify-content: center; margin-top: 1px;
}

@media (max-width: 640px) {
  /* On a real phone, 82vh (or even 100vh) is taller than what's actually
     visible once the browser's own address bar/toolbar chrome is
     accounted for - dvh (dynamic viewport height) is the unit that
     actually measures what's visible right now, not the full nominal
     screen. Combined with tighter padding and smaller gaps between the
     many stacked elements on a full results screen, this meaningfully
     shrinks how much of the screen the popup actually occupies. */
  #modalBox { max-height: 78vh; max-height: 78dvh; padding: 18px 18px 16px; }
  #modalContent h2 { font-size: 18px; margin-bottom: 8px; }
  #modalContent p { font-size: 13px; margin-bottom: 8px; }
  #scoreHead { padding-bottom: 8px !important; }
  .bignum { font-size: 2rem !important; }
  .final-row { padding: 4px 0 !important; font-size: 12px !important; }
  #signupCallout { margin-top: 10px !important; padding: 10px !important; }
  .today-recap { margin-top: 10px !important; padding-top: 8px !important; }
  .post-game-comeback { margin: 8px 0 6px !important; font-size: 12px !important; }
  .post-game-ctas { gap: 6px !important; }
  .post-game-cta { padding: 10px 8px !important; font-size: 12px !important; }
  .share-dd-wrap { margin-top: 6px !important; }
}

/* --- final cumulative summary --- */
#scoreBody .final-row {
  display: flex; justify-content: space-between; padding: 5px 0; border-bottom: 1px solid var(--line-hair);
  font-family: 'IBM Plex Mono', monospace; font-size: 12.5px;
}
#scoreBody .final-row:last-child { border-bottom: none; }
#scoreBody .round-nav-row {
  width: 100%; background: none; box-shadow: none; border-radius: 0; text-align: left; cursor: pointer;
}
#scoreBody .round-nav-row:hover { background: var(--purple-tint); }
#scoreBody .round-nav-row.active { background: var(--purple-tint); border-bottom-color: var(--purple); }
#scoreBody .round-nav-row.active span:first-child { color: var(--purple-deep); font-weight: 700; }
#scoreBody .final-total {
  display: flex; justify-content: space-between; padding-top: 8px; margin-top: 2px;
  font-family: 'IBM Plex Mono', monospace; font-size: 16px; font-weight: 600; color: var(--purple-deep);
}
#signupCallout {
  margin-top: 16px; padding: 14px; background: var(--purple-tint); border-radius: var(--radius-md);
}
#signupCallout p { font-size: 12px; line-height: 1.5; color: var(--ink); margin: 0 0 10px; }
#signupCallout button { background: var(--purple); color: #fff; width: 100%; }
.today-recap { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line-hair); }
.today-recap-title {
  font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 600; color: var(--ink-soft);
  text-transform: uppercase; letter-spacing: 0.3px; margin: 0 0 8px;
}
.today-recap .final-row { font-size: 12px; padding: 6px 0; }
.signup-link-note {
  text-align: center; font-size: 12px; color: var(--ink-soft); margin: 14px 0 0;
}
.signup-link-note a { color: var(--purple); text-decoration: underline; font-weight: 600; }
.archive-day-nav-row {
  display: flex; align-items: center; margin: 14px 0 10px;
}
.archive-day-nav-btn {
  flex: 1; text-align: center; padding: 10px 8px; font-family: 'Inter', sans-serif;
  font-weight: 700; font-size: 12.5px; text-decoration: none; color: var(--purple);
}
.archive-day-nav-btn.disabled { color: var(--ink-soft); opacity: 0.4; pointer-events: none; }
.archive-day-nav-row .archive-day-nav-btn:first-child { text-align: left; border-right: 1px solid var(--line-hair); }
.archive-day-nav-row .archive-day-nav-btn:last-child { text-align: right; }
.post-game-comeback { font-size: 13px; color: var(--ink-soft); text-align: center; margin: 14px 0 10px; }
.post-game-ctas { display: flex; flex-direction: column; gap: 8px; }
.post-game-cta {
  text-align: center; padding: 12px 10px; border-radius: 999px;
  font-family: 'Inter', sans-serif; font-weight: 700; font-size: 13px; text-decoration: none;
  background: var(--paper-deep); color: var(--ink);
}
.post-game-cta.primary { background: var(--purple); color: #fff; }
.premium-badge {
  display: inline-block; background: #E8C468; color: #4A2F6B;
  font-family: 'IBM Plex Mono', monospace; font-size: 9px; font-weight: 700;
  padding: 2px 8px; border-radius: 999px; text-transform: uppercase; letter-spacing: 0.4px;
  vertical-align: middle; margin-left: 5px;
}
.shareResultsBtn { background: var(--paper-deep); color: var(--ink); }
.share-dd-wrap { position: relative; margin-top: 10px; }
.share-dd-toggle {
  width: 100%; background: var(--paper-deep); color: var(--ink);
  display: flex; align-items: center; justify-content: center; gap: 6px;
}
.share-dd-arrow { font-size: 10px; transition: transform 0.15s ease; }
.share-dd-toggle.open .share-dd-arrow { transform: rotate(180deg); }
.share-dd-panel {
  display: none; position: absolute; bottom: calc(100% + 6px); left: 0; right: 0; z-index: 20;
  background: #fff; border-radius: var(--radius-md); box-shadow: 0 8px 24px rgba(46,28,70,0.18);
  overflow: hidden;
}
.share-dd-panel.open { display: block; }
.share-dd-item {
  display: block; width: 100%; text-align: left; padding: 11px 16px; background: none;
  font-family: 'Inter', sans-serif; font-weight: 600; font-size: 13px; color: var(--ink);
  box-shadow: none; border-radius: 0; border-bottom: 1px solid var(--line-hair);
}
.share-dd-item:last-child { border-bottom: none; }
.share-dd-item:hover { background: var(--purple-tint); }
.dist-chart {
  display: flex; align-items: flex-end; gap: 4px; height: 120px; padding: 0 4px;
}
.dist-bar {
  flex: 1; background: var(--paper-deep); border-radius: 3px 3px 0 0; min-height: 4px;
  transition: height 0.3s ease;
}
.dist-bar.mine { background: var(--purple); }
.dist-axis {
  display: flex; justify-content: space-between; font-family: 'IBM Plex Mono', monospace;
  font-size: 10px; color: var(--ink-soft); padding: 4px 4px 0;
}

/* --- site-wide footer (every page) --- */
.site-footer {
  max-width: 720px; margin: 0 auto; padding: 28px 24px 40px; text-align: center;
  font-family: 'Inter', sans-serif;
}
.site-footer-links { display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; margin-bottom: 10px; }
.site-footer-links a { color: var(--ink-soft); font-size: 13px; text-decoration: none; }
.site-footer-links a:hover { color: var(--purple); text-decoration: underline; }
.site-footer-copy { font-size: 12px; color: #A79E8C; }

/* --- shared content-page layout (About / Contact / Privacy / Terms) --- */
.site-header-simple {
  background: var(--purple); border-bottom: 3px solid var(--purple-deep);
  padding: 0 20px; height: 46px; box-sizing: border-box;
  display: flex; align-items: center; gap: 18px;
}
.site-header-simple a.brand {
  font-family: 'Fraunces', Georgia, serif; font-weight: 700; font-size: 16px; color: #FBF8FF;
  text-decoration: none; display: flex; align-items: center; gap: 8px; flex-shrink: 0;
}
.brand-logo-icon { width: 24px; height: 24px; display: block; }
.site-header-simple .subtitle {
  font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: #D8C7EC;
  background: rgba(255,255,255,0.14); padding: 3px 9px; border-radius: 999px; margin-left: 4px;
}
/* Replaces the old separate "back to home" link - the logo already goes
   home, and these go directly where they actually matter, so a vague
   generic back-link isn't needed. Desktop-only: no room for this inline
   next to the logo on a phone width, so the hamburger panel is the one
   and only way to reach these on mobile, not a cramped duplicate row. */
.site-header-nav { display: flex; gap: 4px; margin-left: auto; }
.site-header-nav a {
  font-family: 'Inter', sans-serif; font-weight: 600; font-size: 12.5px;
  color: #E5D9F5; text-decoration: none; padding: 7px 12px; border-radius: 999px; white-space: nowrap;
}
.site-header-nav a:hover, .site-header-nav a.current { background: rgba(255,255,255,0.16); color: #fff; }
@media (max-width: 720px) {
  .site-header-nav { display: none; }
  #hamburgerWrap { margin-left: auto; }
}

/* Redesigned hamburger menu: a real side panel you can actually read,
   not a tiny dropdown a couple of links deep. Same overlay+panel+slide
   pattern used site-wide, so it behaves identically everywhere it appears. */
#hamburgerOverlay {
  display: none; position: fixed; inset: 0; z-index: 7000;
  background: rgba(36, 28, 46, 0.55);
}
#hamburgerOverlay.open { display: block; }
#hamburgerPanel {
  position: fixed; top: 0; right: 0; bottom: 0; width: 300px; max-width: 85vw;
  background: #FFFDF8; z-index: 7001; box-shadow: -8px 0 30px rgba(46,28,70,0.25);
  transform: translateX(100%); transition: transform 0.22s ease;
  overflow-y: auto; display: flex; flex-direction: column;
}
#hamburgerOverlay.open #hamburgerPanel { transform: translateX(0); }
.hp-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 20px; border-bottom: 1px solid var(--line-hair); flex-shrink: 0;
}
.hp-header .brand { font-family: 'Fraunces', Georgia, serif; font-weight: 700; font-size: 17px; color: var(--purple-deep); display: flex; align-items: center; gap: 8px; }
.hp-header .brand img { width: 24px; height: 24px; }
#hamburgerCloseBtn {
  background: var(--paper-deep); color: var(--ink); width: 32px; height: 32px; padding: 0;
  border-radius: 999px; box-shadow: none; font-size: 16px; line-height: 1;
}
.hp-section-title {
  font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; color: var(--ink-soft);
  text-transform: uppercase; letter-spacing: 0.5px; padding: 16px 20px 6px;
}
.hp-link {
  display: flex; align-items: center; padding: 11px 20px; font-family: 'Inter', sans-serif;
  font-weight: 600; font-size: 14px; color: var(--ink); text-decoration: none;
}
.hp-link:hover { background: var(--purple-tint); }
.hp-link .premium-badge { margin-left: 8px; }

.policy-page {
  max-width: 640px; margin: 0 auto; padding: 40px 24px 20px; box-sizing: border-box;
  font-family: 'Inter', sans-serif; color: var(--ink);
}
.policy-page h1 {
  font-family: 'Fraunces', Georgia, serif; color: var(--purple-deep); font-size: 1.7rem; margin: 0 0 6px;
}
.policy-page .updated { font-size: 0.8rem; color: var(--ink-soft); margin-bottom: 28px; }
.policy-page h2 {
  font-family: 'Fraunces', Georgia, serif; color: var(--purple-deep); font-size: 1.1rem; margin: 26px 0 8px;
}
.policy-page p, .policy-page li { font-size: 0.92rem; line-height: 1.6; color: var(--ink); }
.policy-page ul { padding-left: 20px; }
.policy-page a { color: var(--purple); }
.policy-page hr { border: none; border-top: 1px solid var(--line-hair); margin: 32px 0; }