:root{
  --bg:#062430;
  --bg-soft:#0A2E3C;
  --primary:#5FD4C8;
  --primary-deep:#8FE8DE;
  --lilac:#2C6E80;
  --plum:#EAF7F7;
  --plum-soft:#9BC0C6;
  --pink:#BDEDE6;
  --gold:#6FC3D9;
  --red:#CE3335;
  --red-on-dark:#EE6A6B;   /* the same red, lifted so it reads on --card / --bg (4.5:1) */
  --card:#0C3140;
  --ring:rgba(95,212,200,.14);
  --line:rgba(95,212,200,.28);
  --shadow:0 14px 40px -18px rgba(0,0,0,.6);
  --radius:10px;
  /* Focus ring. No single hue clears 3:1 on BOTH the deep-sea surfaces
     (#0A3542) and the parchment IP Pages (#EFD37B) - the luminance windows
     do not overlap - so the ring is teal by default and switches to ink on
     the pastel/parchment pages. Both clear 7:1 where they are used. */
  --focus:#5FD4C8;
  --focus-ink:#04202B;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
/* full-bleed blocks below use `calc(50% - 50vw)`, which overshoots by the
   scrollbar width on classic-scrollbar desktops. `clip` contains it without
   turning html/body into a scroll container (which would break sticky nav). */
html,body{overflow-x:clip}
@supports not (overflow:clip){html,body{overflow-x:hidden}}
body{font-family:'Bricolage Grotesque',system-ui,sans-serif;background:var(--bg);color:var(--plum);line-height:1.6}
h1,h2,h3{font-family:'Space Grotesk','Bricolage Grotesque',sans-serif;font-weight:700;letter-spacing:-.02em}
.serif{font-family:'Fraunces',Georgia,serif}
img{max-width:100%}
a{color:var(--primary-deep)}
.pixel{font-family:'Press Start 2P',monospace}

/* ---------- ACCESSIBILITY BASE ---------- */
/* Visually hidden, still read aloud. Never display:none - that removes it
   from the accessibility tree too. */
.sr-only{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* Skip link: hidden until focused, then above everything - the intro overlay
   is z-index 999 and the modals are 200, so this sits at 10000. */
.skip-link{position:absolute;left:-9999px;top:0;z-index:10000;
  width:1px;height:1px;overflow:hidden;clip-path:inset(50%);
  font:700 .9rem 'Bricolage Grotesque',sans-serif;letter-spacing:.06em;text-decoration:none}
.skip-link:focus,.skip-link:focus-visible{
  position:fixed;left:12px;top:12px;width:auto;height:auto;overflow:visible;clip-path:none;
  display:inline-flex;align-items:center;min-height:44px;padding:12px 22px;
  color:#04202B;background:#8FE8DE;border-radius:8px;
  box-shadow:0 10px 30px -10px rgba(0,0,0,.7);
  outline:3px solid #04202B;outline-offset:2px}

/* One focus style for everything that can hold focus. */
:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:2px}
/* Pastel park, parchment IP Pages and the story card: teal vanishes there,
   ink does not. */
#page-park :focus-visible,
#page-directory :focus-visible,
.story-card :focus-visible,
.yp-inner :focus-visible{outline-color:var(--focus-ink)}

/* ---------- NAV ---------- */
nav{position:sticky;top:0;z-index:100;background:rgba(5,30,40,.68);-webkit-backdrop-filter:blur(18px) saturate(1.5);backdrop-filter:blur(18px) saturate(1.5);border-bottom:none}
nav::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,transparent 0%,rgba(95,212,200,.35) 18%,rgba(95,212,200,.35) 82%,transparent 100%)}
.nav-inner{max-width:1360px;margin:0 auto;display:flex;align-items:center;gap:8px;padding:22px 28px;flex-wrap:wrap;transition:padding .35s ease}
nav.scrolled{background:rgba(4,24,32,.92)}
nav.scrolled .nav-inner{padding-top:12px;padding-bottom:12px}
.logo{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:1.18rem;color:var(--plum);margin-right:auto;cursor:pointer;display:flex;align-items:center;gap:16px;-webkit-user-select:none;user-select:none;letter-spacing:.02em}
.logo img{height:30px;width:auto;display:block;opacity:.96}
.logo-div{width:1px;height:24px;background:linear-gradient(rgba(95,212,200,.0),rgba(95,212,200,.45),rgba(95,212,200,.0))}
.logo em{color:var(--primary);font-style:italic;font-weight:500}
.nav-btn{border:none;background:transparent;font:600 .68rem 'Bricolage Grotesque',sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--plum-soft);padding:10px 10px;cursor:pointer;transition:color .25s;position:relative}
.nav-btn::after{content:"";position:absolute;left:15px;right:15px;bottom:4px;height:1px;background:var(--primary);transform:scaleX(0);transform-origin:left;transition:transform .3s cubic-bezier(.22,.9,.3,1)}
.nav-btn:hover{color:var(--plum)}
.nav-btn:hover::after{transform:scaleX(1)}
.nav-btn.active{color:var(--plum)}
.nav-btn.active::after{transform:scaleX(1)}

/* ---------- LAYOUT ---------- */
.page{display:none;max-width:1150px;margin:0 auto;padding:36px 24px 90px;animation:fadeIn .35s ease}
.page.visible{display:block}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.eyebrow{display:flex;align-items:center;gap:14px;font:600 .7rem 'Bricolage Grotesque',sans-serif;letter-spacing:.22em;text-transform:uppercase;color:var(--primary);margin-bottom:20px}
.eyebrow::before{content:"";height:1px;width:34px;background:#8E8EA0}
.page h1{font-size:clamp(2rem,4.5vw,3.4rem);font-weight:700;letter-spacing:-.015em;margin-bottom:14px}
.lede{font-size:1.05rem;color:var(--plum-soft);max-width:660px;margin-bottom:38px}

/* ---------- HERO ---------- */
.hero{position:relative;text-align:left;padding:84px 24px 60px;overflow:hidden}
.hero-inner{max-width:1100px;margin:0 auto;position:relative}
.hero h1{font-size:clamp(2.6rem,6vw,4.4rem);margin:0 0 20px;max-width:700px;line-height:1.08;font-weight:700}
.hero h1 em{font-style:italic;color:var(--gold);font-weight:500}
.hero .lede{margin:0 0 34px}
.btn{display:inline-flex;align-items:center;gap:8px;border:none;cursor:pointer;font:600 .92rem 'Bricolage Grotesque',sans-serif;padding:13px 26px;border-radius:999px;transition:.2s;letter-spacing:.01em}
.btn.primary{background:#E9E9F0;color:#1d1430}
.btn.primary:hover{background:#fff;transform:translateY(-1px)}
.btn.ghost{background:transparent;color:var(--plum);border:1px solid var(--line)}
.btn.ghost:hover{border-color:var(--primary);color:var(--primary-deep)}
.factbar{margin:64px auto 0;max-width:1100px;border-left:2px solid var(--gold);padding:6px 0 6px 22px;font-size:.95rem;color:var(--plum-soft)}
.factbar strong{display:block;font:600 .68rem 'Bricolage Grotesque',sans-serif;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-bottom:6px}

/* ---------- BASICS ---------- */
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px}
.kcard{background:var(--card);border:1px solid var(--ring);border-radius:var(--radius);padding:28px;transition:border-color .25s}
.kcard:hover{border-color:var(--line)}
.kcard .tag{display:inline-block;font:600 .68rem 'Bricolage Grotesque',sans-serif;letter-spacing:.18em;text-transform:uppercase;padding:0 0 6px;border-bottom:1px solid currentColor;margin-bottom:14px;background:none !important}
.kcard h3{font-size:1.3rem;margin-bottom:8px}
.kcard p{font-size:.94rem;color:var(--plum-soft)}
.kcard ul{margin:10px 0 0 18px;font-size:.9rem;color:var(--plum-soft)}
.kcard li{margin-bottom:5px}
.symbols{display:flex;gap:14px;flex-wrap:wrap;margin-top:36px}
.sym{flex:1;min-width:200px;background:transparent;border:1px solid var(--ring);border-radius:var(--radius);padding:20px;text-align:center}
.sym .big{font-family:'Fraunces',serif;font-size:2.1rem;font-weight:700;color:var(--gold)}
.sym p{font-size:.85rem;color:var(--plum-soft)}
details.faq{background:transparent;border-bottom:1px solid var(--ring);margin-bottom:0}
details.faq summary{cursor:pointer;padding:18px 4px;font-weight:600;list-style:none;display:flex;justify-content:space-between;align-items:center}
details.faq summary::after{content:"+";font-size:1.3rem;color:var(--gold);font-weight:300}
details.faq[open] summary::after{content:"-"}
details.faq .ans{padding:0 4px 20px;font-size:.94rem;color:var(--plum-soft);max-width:720px}

/* ---------- DIRECTORY ---------- */
.dir-tools{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:22px;align-items:center}
.search{flex:1;min-width:220px;padding:13px 18px;border:1px solid var(--line);border-radius:4px;font:500 .95rem 'Bricolage Grotesque',sans-serif;background:var(--bg-soft);color:var(--plum);transition:border-color .2s}
.search::placeholder{color:var(--plum-soft);opacity:.7}
.search:focus{border-color:var(--primary)}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{border:1px solid var(--ring);background:transparent;color:var(--plum-soft);font:600 .78rem 'Bricolage Grotesque',sans-serif;padding:8px 14px;border-radius:4px;cursor:pointer;transition:.2s;letter-spacing:.03em}
.chip:hover{border-color:var(--primary);color:var(--plum)}
.chip.on{background:rgba(168,134,224,.12);border-color:var(--primary);color:var(--primary-deep)}
.dir-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:16px}
.firm{background:var(--card);border:1px solid var(--ring);border-radius:var(--radius);padding:24px;transition:border-color .25s;display:flex;flex-direction:column;gap:8px}
.firm:hover{border-color:var(--primary)}
.firm .top{display:flex;align-items:baseline;gap:12px;border-bottom:1px solid var(--ring);padding-bottom:12px;margin-bottom:4px}
.firm h3{font-size:1.05rem;line-height:1.3;font-weight:700}
.firm .meta{font-size:.76rem;color:var(--plum-soft);display:flex;gap:14px;flex-wrap:wrap;letter-spacing:.04em;text-transform:uppercase}
.firm .meta span{background:none;padding:0}
.firm .meta span+span::before{content:"·";margin-right:14px;color:var(--line)}
.firm p{font-size:.88rem;color:var(--plum-soft);flex:1}
.firm a{font:600 .85rem 'Bricolage Grotesque',sans-serif;text-decoration:none;color:var(--primary)}
.firm a:hover{color:var(--primary-deep)}
.dir-empty{display:none;text-align:center;color:var(--plum-soft);padding:50px 0}
.dir-note{margin-top:30px;font-size:.85rem;color:var(--plum-soft);border-left:2px solid var(--line);padding:4px 0 4px 18px}

/* ---------- LINKS ---------- */
.link-section{margin-bottom:36px}
.link-section h2{font-size:1.35rem;margin-bottom:16px;display:flex;align-items:center;gap:16px}
.link-section h2::after{content:"";flex:1;height:1px;background:var(--ring)}
.link-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.lcard{background:var(--card);border:1px solid var(--ring);border-radius:var(--radius);padding:16px 18px;text-decoration:none;transition:border-color .2s;display:block}
.lcard:hover{border-color:var(--primary)}
.lcard b{display:block;color:var(--plum);font-size:.95rem}
.lcard span{font-size:.82rem;color:var(--plum-soft)}

/* ---------- GRAVEYARD ---------- */
#page-graveyard{max-width:100%;padding:0 0 60px;background:linear-gradient(180deg,#03151d 0%,#062430 100%);min-height:calc(100vh - 63px);min-height:calc(100dvh - 63px)}
.grave-head{text-align:center;padding:44px 20px 10px;color:#e7dcf5}
.grave-head h1{color:#5FD4C8;font-size:clamp(1.1rem,3vw,1.8rem);text-shadow:0 0 18px rgba(95,212,200,.5);margin-bottom:14px}
.grave-head p{color:#9BC0C6;font-size:.95rem;max-width:640px;margin:0 auto}
.grave-head .keys{margin-top:12px;font-size:.68rem;color:#6FA3AD}
.game-wrap{display:flex;justify-content:center;padding:22px 12px}
#game{image-rendering:crisp-edges;image-rendering:pixelated;border:4px solid #14424F;border-radius:8px;box-shadow:0 0 40px rgba(95,212,200,.30);max-width:100%;height:auto;background:#02131a;touch-action:none}
.dpad{display:none;justify-content:center;gap:8px;padding:10px}
.dpad .col{display:flex;flex-direction:column;gap:8px;align-items:center}
.dpad button{width:56px;height:56px;min-width:44px;min-height:44px;border-radius:12px;border:2px solid #1B5566;background:#0A3542;color:#5FD4C8;font-size:1.3rem;cursor:pointer}
.dpad button:active{background:#14424F}
@media (pointer:coarse){.dpad{display:flex}}
#tomb-modal{position:fixed;inset:0;background:rgba(2,19,26,.82);display:none;place-items:center;z-index:200;padding:20px}
#tomb-modal.open{display:grid}
.tomb-card{background:#062A36;border:4px solid #5FD4C8;border-radius:4px;max-width:520px;width:100%;padding:28px;color:#e7dcf5;box-shadow:0 0 60px rgba(95,212,200,.45);position:relative}
.tomb-card .rip{font-family:'Press Start 2P',monospace;color:#5FD4C8;font-size:1rem;margin-bottom:4px;text-shadow:0 0 12px rgba(240,171,252,.6)}
.tomb-card .years{font-family:'Press Start 2P',monospace;font-size:.6rem;color:#6FA3AD;margin-bottom:16px}
.tomb-card .story{font-size:.93rem;line-height:1.65;color:#C2DEE2}
.tomb-card .moral{margin-top:14px;font-size:.8rem;color:#E8B04B;border-top:1px dashed #14424F;padding-top:12px}
/* close buttons: the glyph is ~13px, the target must not be */
.tomb-card .close-x{position:absolute;top:4px;right:6px;min-width:44px;min-height:44px;display:grid;place-items:center;line-height:1;border-radius:8px;background:none;border:none;color:#6FA3AD;font-size:1.4rem;cursor:pointer}
.tomb-card .close-x:hover{color:#5FD4C8}
.grave-legend{max-width:760px;margin:10px auto 0;padding:0 20px;text-align:center;font-size:.78rem;color:#6E9EA9}

/* ---------- PREMIUM MOTION & POLISH ---------- */
::selection{background:var(--primary);color:#04202B}
::-webkit-scrollbar{width:11px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:#2C6E80;border-radius:8px;border:2px solid var(--bg)}

.kcard,.firm,.lcard,.sym{position:relative;overflow:hidden}

@keyframes rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
.page.visible .kcard,.page.visible .lcard,.page.visible .sym{animation:rise .55s cubic-bezier(.22,.9,.36,1) backwards}
.page.visible .kcard:nth-child(1),.page.visible .lcard:nth-child(1){animation-delay:.05s}
.page.visible .kcard:nth-child(2),.page.visible .lcard:nth-child(2){animation-delay:.12s}
.page.visible .kcard:nth-child(3),.page.visible .lcard:nth-child(3){animation-delay:.19s}
.page.visible .kcard:nth-child(4),.page.visible .lcard:nth-child(4){animation-delay:.26s}
.page.visible .kcard:nth-child(5),.page.visible .lcard:nth-child(5){animation-delay:.33s}
.page.visible .kcard:nth-child(6),.page.visible .lcard:nth-child(6){animation-delay:.4s}
.dir-grid .firm:nth-child(3n+1){animation-delay:.05s}.dir-grid .firm:nth-child(3n+2){animation-delay:.12s}.dir-grid .firm:nth-child(3n+3){animation-delay:.19s}

/* stats */
.stats{display:flex;gap:0;justify-content:flex-start;flex-wrap:wrap;margin:64px auto 0;max-width:1100px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.stat{flex:1;min-width:150px;background:transparent;padding:22px 24px;border-right:1px solid var(--ring);text-align:left}
.stat:last-child{border-right:none}
.stat .num{font-family:'Space Grotesk',sans-serif;font-size:2.4rem;font-weight:700;color:var(--plum)}
.stat .lbl{font-size:.72rem;color:var(--plum-soft);text-transform:uppercase;letter-spacing:.18em;font-weight:600}

/* fallen-brands ticker */
.ticker-wrap{margin:72px calc(50% - 50vw) 0;background:#04202B;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:14px 0;overflow:hidden}
.ticker{display:flex;width:max-content;animation:tick 36s linear infinite;gap:0}
.ticker span{font:600 .72rem 'Bricolage Grotesque',sans-serif;letter-spacing:.22em;text-transform:uppercase;color:#C3ADE0;padding:0 28px;white-space:nowrap;transition:color .2s}
.ticker span b{color:var(--gold)}
.ticker-wrap:hover .ticker span,
.ticker-wrap:focus-within .ticker span,
.ticker-wrap.is-paused .ticker span{color:#D9BFEF}
@keyframes tick{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* pause on hover, on keyboard focus, and when app.js says so */
.ticker-wrap:hover .ticker,
.ticker-wrap:focus-within .ticker,
.ticker-wrap.is-paused .ticker{animation-play-state:paused}

/* graveyard title glow */
@keyframes glowPulse{0%,100%{text-shadow:0 0 18px rgba(95,212,200,.5),0 0 4px rgba(95,212,200,.8)}50%{text-shadow:0 0 34px rgba(95,212,200,.95),0 0 8px #fff}}
.grave-head h1{animation:glowPulse 3.2s ease-in-out infinite}
@keyframes modalPop{from{opacity:0;transform:scale(.85) translateY(20px)}to{opacity:1;transform:none}}
#tomb-modal.open .tomb-card{animation:modalPop .3s cubic-bezier(.34,1.4,.64,1)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
  /* the infinite ones must stop where they are, not snap to their last frame */
  .ticker,.hero-photo,.grave-head h1,.scroll-cue::after,
  .hero-kicker span,.wordmark em::after{animation:none !important}
  #cursor{display:none}
}

/* ---------- CLASS 45 SIGNATURE ---------- */
.wink{display:inline-block;margin-top:8px;font-size:.76rem;opacity:.75}
.ticker-zone{position:relative;margin-top:72px}
.ticker-zone .ticker-wrap{margin-top:0}
.mascot{position:absolute;top:-48px;left:8%;width:44px;height:48px;z-index:3;cursor:pointer;transition:transform .2s}
.mascot canvas{width:44px;height:48px;image-rendering:crisp-edges;image-rendering:pixelated;display:block}
.mascot.flip canvas{transform:scaleX(-1)}
.mascot .bubble{position:absolute;bottom:52px;left:50%;transform:translateX(calc(-50% + var(--nudge,0px))) scale(0);transform-origin:bottom center;background:var(--card);border:1px solid var(--line);border-radius:8px;border-bottom-left-radius:0;padding:8px 12px;font-size:.74rem;color:var(--plum);white-space:nowrap;transition:transform .25s cubic-bezier(.34,1.4,.64,1)}
.mascot .bubble.show{transform:translateX(calc(-50% + var(--nudge,0px))) scale(1)}
.mascot:hover{transform:translateY(-3px)}

/* ---------- ADS / YELLOW PAGES / COLLAB ---------- */
.ad-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px;max-width:1100px;margin:56px auto 0}
.ad-slot{border:1px dashed var(--line);border-radius:14px;padding:20px 22px;text-align:center;cursor:pointer;transition:.25s;color:var(--plum-soft)}
.ad-slot:hover{border-color:#8E8EA0}
.ad-slot .adlbl{font:700 .6rem 'Bricolage Grotesque',sans-serif;letter-spacing:.32em;text-transform:uppercase;display:block;margin-bottom:8px;opacity:.7}
.ad-slot b{font-family:'Space Grotesk',sans-serif;font-size:1.05rem;color:#E9E9F0}
.ad-slot p{font-size:.85rem;margin-top:4px}
/* IP Pages - vintage phone book */
#page-directory{max-width:100%;padding:0;background-color:#EFD37B;background-image:radial-gradient(1100px 480px at 50% -8%,rgba(255,251,225,.85),transparent),repeating-linear-gradient(45deg,rgba(140,100,30,.05) 0 3px,transparent 3px 8px);color:#33240F}
.yp-inner{max-width:1150px;margin:0 auto;padding:44px 24px 90px}
.yp-mast{text-align:center;border-bottom:4px double #33240F;padding-bottom:20px;margin-bottom:20px}
.yp-title{font-family:'Alfa Slab One','Fraunces',serif;font-weight:400;font-size:clamp(2.2rem,6.5vw,4.8rem);line-height:1;color:#33240F;text-shadow:3px 3px 0 rgba(206,51,53,.3)}
.yp-title span{color:#B3272B}
.yp-ad{border:4px double #33240F;background:#FBF0C8;padding:16px 20px;text-align:center;margin:0 0 26px;cursor:pointer;transition:.2s}
.yp-ad:hover{background:#FDF6DC}
.yp-ad .adlbl{font:700 .58rem 'Bricolage Grotesque',sans-serif;letter-spacing:.34em;color:#5f4a20}
.yp-ad b{font-family:'Fraunces',serif;font-size:1.2rem;color:#B3272B;letter-spacing:.02em}
.yp-ad p{font-size:.85rem;color:#5c4520;margin-top:4px}
#page-directory .search{background:#FBF0C8;border:2px solid #33240F;border-radius:8px;color:#33240F}
#page-directory .search::placeholder{color:#6b5330;opacity:1}
#page-directory .search:focus{border-color:#B3272B;box-shadow:none}
#page-directory .chip{border:2px solid #33240F;color:#33240F;border-radius:8px;font-weight:700;background:transparent}
#page-directory .chip:hover{color:#B3272B;border-color:#B3272B}
#page-directory .chip.on{background:#33240F;border-color:#33240F;color:#EFD37B}
#page-directory .firm{background:#FBF0C8;border:2px solid #33240F;border-radius:8px;box-shadow:4px 4px 0 rgba(51,36,15,.22)}
#page-directory .firm:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 rgba(51,36,15,.28);border-color:#33240F}
#page-directory .firm .top{border-bottom:1px dotted #8a6d35}
#page-directory .firm h3{color:#2A1D0C}
#page-directory .firm .meta,#page-directory .firm p{color:#5c4520}
#page-directory .firm .meta span+span::before{color:#B3272B}
#page-directory .firm a{color:#B3272B}
#page-directory .dir-note{border-left:2px solid #B3272B;color:#5c4520}
#page-directory .dir-empty{color:#5c4520}
/* Collaborate */
.ccard{background:var(--card);border:1px solid var(--ring);border-radius:var(--radius);padding:28px;transition:border-color .25s}
.ccard:hover{border-color:#8E8EA0}
.ccard .fmt{font:700 .66rem 'Bricolage Grotesque',sans-serif;letter-spacing:.22em;text-transform:uppercase;color:#9A9AAC}
.ccard h3{margin:12px 0 8px;font-size:1.25rem}
.ccard p{font-size:.9rem;color:var(--plum-soft)}
.ccard .price{margin-top:16px;font-family:'Fraunces',serif;font-style:italic;color:var(--gold)}
.foot-logo{height:40px;width:auto;opacity:.95;margin-bottom:12px}
footer a{color:var(--primary)}

/* featured listing + live ad */
.feat-ribbon{position:absolute;top:-12px;right:12px;background:#B3272B;color:#FBF0C8;font:700 .58rem 'Bricolage Grotesque',sans-serif;letter-spacing:.18em;padding:4px 10px;border-radius:3px}
.ad-slot.live{border:1px solid rgba(233,233,240,.3);text-decoration:none;display:block}
.ad-slot.live:hover{border-color:#E9E9F0;background:rgba(233,233,240,.04)}
.ad-slot.live .ad-logo{height:30px;width:auto;margin:2px auto 10px;display:block;opacity:.95}
.ad-slot.live b{display:block}
.ad-slot.live .ad-cta{display:inline-block;margin-top:8px;font:600 .82rem 'Bricolage Grotesque',sans-serif;color:#E9E9F0}

/* High Water intro.
   The overlay is opaque and only JS ever takes it away, so it must not exist
   without JS. app.js sets `.js` on <html> as its very first statement. */
#intro{display:none;position:fixed;inset:0;z-index:999;background:#03151d;transition:opacity 1s ease}
html.js #intro{display:block}
#intro.done{opacity:0;pointer-events:none}
#intro canvas{display:block;width:100%;height:100%}
html.js body:not(.intro-done) .mn{animation-play-state:paused}
html.js body.intro-done .mn{animation-play-state:running}
/* Without JS the intro never finishes, so the homepage's main navigation
   must not depend on it. */
html:not(.js) .mn{opacity:1;transform:none;animation:none}
@media (prefers-reduced-motion:reduce){#intro,html.js #intro{display:none}}
/* The escape hatch app.js injects: visible, keyboard-reachable, 44px target. */

/* ---------- NOIR HERO - type as interface, silhouette depth ---------- */
.hero-photo{position:absolute;inset:-4%;z-index:0;background:url(hero.jpg) center/cover no-repeat;background:image-set(url(hero.webp) type("image/webp"), url(hero.jpg) type("image/jpeg")) center/cover no-repeat;animation:kenburns 26s ease-in-out infinite alternate;will-change:transform}
@keyframes kenburns{from{transform:scale(1) translateY(0)}to{transform:scale(1.09) translateY(-1.6%)}}
.hero-photo-wash{position:absolute;inset:0;z-index:0;background:linear-gradient(100deg,rgba(4,22,30,.88) 0%,rgba(4,22,30,.55) 45%,rgba(4,22,30,.18) 75%),linear-gradient(0deg,rgba(4,22,30,.72) 0%,transparent 40%)}

/* The decorative dot/ring rides ALONGSIDE the real cursor - it never
   replaces it. (A `body{cursor:none}` block used to live here.) */
#cursor{position:fixed;left:0;top:0;z-index:9999;pointer-events:none;mix-blend-mode:difference}
.c-dot{position:absolute;width:6px;height:6px;border-radius:50%;background:#5FD4C8;transform:translate(-50%,-50%)}
.c-ring{position:absolute;width:34px;height:34px;border-radius:50%;border:1px solid rgba(95,212,200,.6);transform:translate(-50%,-50%);transition:width .25s,height .25s}
#cursor.big .c-ring{width:58px;height:58px}
@media (pointer:coarse){#cursor{display:none}}

.depth-field{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.dg{position:absolute;left:var(--x);top:var(--y);font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:var(--s);line-height:1;color:rgba(255,255,255,.05);will-change:transform;user-select:none}
.dg.far{color:transparent;-webkit-text-stroke:1px rgba(95,212,200,.10);filter:blur(2px)}

.mega-nav{display:flex;flex-direction:column;gap:6px;margin:8px 0 0}
.mn{position:relative;width:fit-content;text-decoration:none;cursor:pointer;display:block;opacity:0;transform:translateY(30px);animation:mnRise .7s cubic-bezier(.22,.9,.3,1) forwards}
.mn[data-i="0"]{animation-delay:.15s}.mn[data-i="1"]{animation-delay:.25s}.mn[data-i="2"]{animation-delay:.35s}.mn[data-i="3"]{animation-delay:.45s}.mn[data-i="4"]{animation-delay:.55s}
@keyframes mnRise{to{opacity:1;transform:none}}
.mn-word{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:clamp(2.6rem,7.2vw,5.8rem);line-height:1.04;letter-spacing:-.02em;color:transparent;-webkit-text-stroke:1px rgba(234,247,247,.5);transition:color .28s,-webkit-text-stroke-color .28s,transform .28s;display:inline-block}
.mn:hover .mn-word{color:#5FD4C8;-webkit-text-stroke-color:transparent;transform:translateX(16px) skewX(-3deg)}
.mn.sm .mn-word{font-size:clamp(1.3rem,2.6vw,1.9rem);-webkit-text-stroke-color:rgba(234,247,247,.6);font-weight:500}
.mn.sm:hover .mn-word{color:var(--plum);transform:translateX(10px)}
.mn-label{position:absolute;left:calc(100% + 28px);top:50%;transform:translate(-14px,-50%);white-space:nowrap;font:500 .72rem 'Courier New',monospace;letter-spacing:.22em;text-transform:uppercase;color:var(--plum-soft);opacity:0;transition:opacity .28s,transform .28s}
/* keyboard and touch get the description too, not just the mouse */
.mn:hover .mn-label,
.mn:focus .mn-label,
.mn:focus-visible .mn-label,
.mn:focus-within .mn-label{opacity:1;transform:translate(0,-50%)}
@media (max-width:820px){
  /* no room beside the word, so put it under it - shown, not hidden */
  .mn-label{position:static;display:block;transform:none;opacity:1;white-space:normal;
    font-size:.68rem;letter-spacing:.18em;margin-top:2px;transition:none}
}

/* ---------- OCEAN HERO ---------- */
#hero3d{pointer-events:auto}
.hero-kicker{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:clamp(2rem,4.6vw,3.6rem);line-height:1;letter-spacing:-.02em;color:#F4FBFB;margin-bottom:34px}

/* ---------- MODERN 3D HERO ---------- */
.hero{padding:0 24px 60px}
/* one declaration, folded from the three that used to be spread over the file */
.hero-stage{position:relative;overflow:hidden;border-radius:0;min-height:calc(100vh - 76px);min-height:calc(100dvh - 76px);display:flex;align-items:center}
#hero3d{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.hero-content{position:relative;z-index:1;max-width:780px}
.scroll-cue{position:absolute;bottom:16px;left:2px;z-index:1;font:600 .66rem 'Bricolage Grotesque',sans-serif;letter-spacing:.3em;text-transform:uppercase;color:var(--plum-soft);display:flex;align-items:center;gap:12px}
.scroll-cue::after{content:"";width:1px;height:36px;background:linear-gradient(var(--primary),transparent);animation:cueDrop 1.8s ease infinite}
@keyframes cueDrop{0%{transform:scaleY(0);transform-origin:top;opacity:1}70%{transform:scaleY(1);opacity:1}100%{transform:scaleY(1);opacity:0}}

/* ---------- NOOMO CONTENT PASS ---------- */
.peek-duck{position:fixed;bottom:0;right:44px;z-index:90;transform:translateY(105%);transition:transform .6s cubic-bezier(.34,1.3,.64,1);cursor:pointer;pointer-events:auto}
.peek-duck.up{transform:translateY(0)}
.peek-duck canvas{width:90px;height:78px;image-rendering:crisp-edges;image-rendering:pixelated;display:block}
.peek-bubble{position:absolute;bottom:84px;right:0;transform:scale(0);transform-origin:bottom right;background:var(--card);border:1px solid var(--line);border-radius:8px;border-bottom-right-radius:0;padding:9px 13px;font-size:.78rem;color:var(--plum);white-space:nowrap;transition:transform .25s cubic-bezier(.34,1.4,.64,1)}
.peek-duck.up .peek-bubble.show{transform:scale(1)}
@media (max-width:700px){.peek-duck{right:12px}.peek-bubble{white-space:normal;max-width:220px}}
.pond-scene{position:relative;margin:70px 0 0;width:min(440px,92vw);cursor:pointer}
.pond-scene canvas{width:100%;height:auto;display:block}
.pond-bubble{position:absolute;bottom:110px;left:50%;transform:translateX(-50%) scale(0);transform-origin:bottom center;background:var(--card);border:1px solid var(--line);border-radius:8px;border-bottom-left-radius:0;padding:8px 12px;font-size:.76rem;color:var(--plum);white-space:nowrap;transition:transform .25s cubic-bezier(.34,1.4,.64,1);pointer-events:none}
.pond-bubble.show{transform:translateX(-50%) scale(1)}
.page h1{font-size:clamp(2.6rem,6vw,5rem);letter-spacing:-.03em;line-height:.98;margin-bottom:22px}
.page{position:relative}
.lede{font-size:1.02rem;max-width:560px;margin-bottom:56px}
.grid2{gap:26px}
.kcard{background:transparent;border:1px solid rgba(95,212,200,.12);border-radius:16px;padding:34px;transition:.35s cubic-bezier(.22,.9,.3,1)}
.kcard:hover{background:rgba(95,212,200,.04);border-color:rgba(95,212,200,.35);transform:translateY(-4px)}
.kcard h3{font-size:1.45rem;margin-bottom:10px}
.kcard ul{list-style:none;margin:14px 0 0 0;padding:0}
.kcard li{position:relative;padding-left:22px;margin-bottom:8px}
.kcard li::before{content:"→";position:absolute;left:0;color:var(--primary);font-weight:600}
.kcard .tag{border-bottom:none;padding:5px 12px;border:1px solid currentColor;border-radius:999px;opacity:.9}
.stats{border:none;gap:0;margin-top:80px}
.stat{border-right:1px solid rgba(95,212,200,.10);padding:10px 28px}
.stat .num{font-size:clamp(2.8rem,5vw,4.2rem);background:linear-gradient(180deg,#EAF7F7 30%,#5FD4C8);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.stat .lbl{font-size:.66rem;letter-spacing:.24em;margin-top:2px}
.factbar{border-left:none;padding:0;margin-top:90px;max-width:900px}
.factbar strong{color:var(--primary);font-size:.66rem;letter-spacing:.3em;margin-bottom:14px}
.factbar #fact-text{font-family:'Space Grotesk',sans-serif;font-weight:500;font-size:clamp(1.15rem,2.2vw,1.7rem);line-height:1.4;color:var(--plum)}
.link-grid{gap:16px}
.lcard{position:relative;background:transparent;border:1px solid rgba(95,212,200,.12);border-radius:14px;padding:22px 24px;transition:.3s}
.lcard:hover{background:rgba(95,212,200,.04);border-color:rgba(95,212,200,.35);transform:translateY(-3px)}
.lcard::after{content:"↗";position:absolute;top:16px;right:18px;color:var(--primary);opacity:0;transform:translate(-6px,6px);transition:.3s}
.lcard:hover::after{opacity:1;transform:none}
.lcard b{font-size:1.02rem;margin-bottom:4px}
.link-section{margin-bottom:64px}
.link-section h2{font-size:1.1rem;letter-spacing:.02em;text-transform:uppercase;font-size:.85rem;letter-spacing:.22em;color:var(--plum-soft)}
.ccard{background:transparent;border:1px solid rgba(95,212,200,.12);border-radius:16px;padding:34px;transition:.35s}
.ccard:hover{background:rgba(95,212,200,.04);border-color:rgba(95,212,200,.35);transform:translateY(-4px)}
.ad-slot{border-radius:16px}
/* scroll reveals */
/* Scroll reveal. Only arms itself when JS is present (app.js sets html.js),
   otherwise the content would be permanently invisible without JavaScript. */
html.js .rv{opacity:0;transform:translateY(30px);transition:opacity .8s cubic-bezier(.22,.9,.3,1),transform .8s cubic-bezier(.22,.9,.3,1)}
html.js .rv.in{opacity:1;transform:none}
.page.visible .kcard,.page.visible .lcard,.page.visible .sym{animation:none}

/* ---------- SEAMLESS HERO (full-bleed, soft blends) ---------- */
nav.mega-nav{background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;position:relative;top:auto;z-index:1}
nav.mega-nav::after{display:none}
#page-home{padding:0 0 90px;max-width:100%}
#page-home .hero{padding:0 0 40px}
#page-home .hero-inner{max-width:none;margin:0}
.hero-photo{inset:-4% -2%}
.hero-photo-wash{background:
 linear-gradient(90deg,rgb(6,36,48) 0%,rgba(6,36,48,.88) 24%,rgba(6,36,48,.48) 52%,rgba(6,36,48,.05) 78%,rgba(6,36,48,.38) 100%),
 linear-gradient(180deg,rgba(6,36,48,.75) 0%,rgba(6,36,48,0) 24%,rgba(6,36,48,0) 58%,rgb(6,36,48) 97%)}
.hero-content{padding-left:clamp(24px,7vw,110px)}
.scroll-cue{left:clamp(26px,7vw,112px)}
#page-home .stats,#page-home .factbar,#page-home .ad-strip{margin-left:auto;margin-right:auto;padding-left:24px;padding-right:24px}

/* ---------- FOOTER ---------- */
footer{border-top:1px solid var(--line);padding:34px 24px;text-align:center;font-size:.83rem;color:var(--plum-soft)}
footer .legal{display:block;margin-top:14px;font-size:.72rem;color:var(--plum-soft);opacity:.75;max-width:760px;margin-left:auto;margin-right:auto;line-height:1.6}
footer i{font-family:'Fraunces',serif;color:var(--primary)}
#page-graveyard ~ footer{display:none}

nav a.nav-btn,a.logo{text-decoration:none}
a.mn{cursor:pointer}
.entry-wrap{max-width:760px;margin:0 auto;padding:40px 24px 90px}
.entry-wrap .kcard{margin-top:26px}
.entry-nav{display:flex;gap:14px;margin-top:34px;flex-wrap:wrap}
.entry-nav a{color:var(--primary);text-decoration:none;font:600 .85rem 'Bricolage Grotesque',sans-serif}
.entry-nav a:hover{color:var(--primary-deep)}
.grave-links{max-width:1150px;margin:30px auto 0;padding:0 20px;display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.grave-links a{color:#6FA3AD;font:500 .72rem 'Courier New',monospace;letter-spacing:.1em;text-decoration:none;border:1px solid rgba(95,212,200,.2);border-radius:6px;padding:6px 10px}
.grave-links a:hover{color:#5FD4C8;border-color:#5FD4C8}
/* The graveyard's row of gravestone links is hidden from sighted visitors who
   have JavaScript - they walk in and read the epitaphs instead. It stays in
   the document for crawlers and screen readers, and it returns to view when
   there is no JS, because that is exactly when the game cannot work.
   `html.js` is set as the first statement of app.js. The --quiet modifier
   scopes this to the graveyard: the IP Park's own row is untouched. */
html.js .grave-links--quiet{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}


/* ================= QUACKMARK wordmark ================= */
.wordmark{position:relative;display:inline-flex;align-items:baseline;line-height:1;letter-spacing:.01em}
.wordmark em{position:relative;font-family:'Fraunces',serif;font-style:italic;font-weight:600;font-size:1.08em;color:var(--primary);margin-left:1px}
.wordmark em::after{content:'';position:absolute;left:2px;right:0;bottom:-5px;height:4px;opacity:.75;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='4'%3E%3Cpath d='M0 2 Q3 0 6 2 T12 2 T18 2 T24 2' fill='none' stroke='%235FD4C8' stroke-width='1.2'/%3E%3C/svg%3E") repeat-x 0 0}
/* The lockup is two separate destinations now: the DO mark opens the firm's
   site, the wordmark goes home. .logo is the flex wrapper and no longer a
   link itself, so the anchors inside it need the reset that a.logo had. */
.logo a{text-decoration:none;color:inherit;display:flex;align-items:center}
.logo-qm:hover .wordmark em::after{animation:wmFlow 1.4s linear infinite}
.logo-do{opacity:.96;transition:opacity .2s}
.logo-do:hover{opacity:1}
@keyframes wmFlow{to{background-position-x:24px}}
@media (prefers-reduced-motion:reduce){.logo-qm:hover .wordmark em::after{animation:none}}


/* eight nav items: keep them on one line
   (base max-width/padding/letter-spacing folded into the rules above) */
@media (max-width:1320px){
  .nav-btn{font-size:.62rem;letter-spacing:.07em;padding:10px 7px}
  .nav-inner{gap:4px}
}


/* 'IP made fun!' — letters ride the swell */
.hero-kicker span{display:inline-block;animation:kickBob 3.2s ease-in-out infinite;animation-delay:calc(var(--i)*.13s)}
.hero-kicker .k-sp{animation:none;width:.32em}
.hero-kicker .k-fun{color:var(--primary)}
.hero-kicker .k-fun:last-child{color:var(--gold);animation:kickPop 3.2s ease-in-out infinite;animation-delay:calc(var(--i)*.13s);transform-origin:50% 90%}
.hero-kicker:hover span{animation-duration:1.4s}
@keyframes kickBob{0%,100%{transform:translateY(0)}30%{transform:translateY(-.09em)}60%{transform:translateY(.04em)}}
@keyframes kickPop{0%,100%{transform:translateY(0) rotate(0)}30%{transform:translateY(-.14em) rotate(8deg)}60%{transform:translateY(.03em) rotate(-3deg)}}
@media (prefers-reduced-motion:reduce){.hero-kicker span,.hero-kicker .k-fun:last-child{animation:none}}


/* ================= small screens: nav becomes a swipe row ================= */
@media (max-width:1000px){
  .nav-inner{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;gap:2px;padding:14px 16px}
  .nav-inner::-webkit-scrollbar{display:none}
  /* the row scrolls but the scrollbar is hidden, so fade the right edge to
     show there is more. Sits above the row, takes no pointer events. */
  nav::before{content:"";position:absolute;top:0;bottom:1px;right:0;width:52px;z-index:2;pointer-events:none;
    background:linear-gradient(90deg,rgba(5,30,40,0) 0%,rgba(4,24,32,.92) 78%,rgba(4,24,32,.98) 100%)}
  nav.mega-nav::before{display:none}
  .nav-btn{flex:0 0 auto;display:inline-flex;align-items:center;min-height:44px;font-size:.72rem;padding:14px 10px}
  .logo{flex:0 0 auto;gap:10px}
  .logo img{height:24px}
  .wordmark{font-size:1rem}
}
@media (max-width:560px){
  .logo-do{display:none}
  .logo-div{display:none}
}

/* ---------- THE IP PARK (pastel daylight) ---------- */
#page-park{max-width:100%;padding:0 0 60px;background:linear-gradient(180deg,#CDE9F8 0%,#E4F5EA 55%,#DBF0DD 100%);min-height:calc(100vh - 63px);min-height:calc(100dvh - 63px)}
#page-park .grave-head h1{color:#BE266C;text-shadow:0 1px 0 rgba(255,255,255,.55);animation:none}
#page-park .grave-head p{color:#496856}
#page-park .grave-head p b,#page-park .grave-head p i{color:#3C5A4A}
#page-park .grave-head .keys{color:#4F6B5B}
#park{image-rendering:crisp-edges;image-rendering:pixelated;border:4px solid #F2A9C4;border-radius:8px;box-shadow:0 16px 40px rgba(122,168,190,.35);max-width:100%;height:auto;background:#CDE9F8;touch-action:none}
#page-park .dpad button{border-color:#F2A9C4;background:#FFF6FA;color:#BE266C}
#page-park .dpad button:active{background:#FBDCE8}
#page-park .grave-legend{color:#4F6B5B}
#page-park ~ footer{display:none}
#story-modal{position:fixed;inset:0;background:rgba(64,92,104,.45);display:none;place-items:center;z-index:200;padding:20px}
#story-modal.open{display:grid}
#story-modal.open .tomb-card{animation:modalPop .3s cubic-bezier(.34,1.4,.64,1)}
.story-card{background:#FFF9FB;border-color:#F2A9C4;color:#3C4A42;box-shadow:0 24px 60px rgba(90,130,150,.4)}
.story-card .rip{color:#BE266C;text-shadow:none}
.story-card .years{color:#5C7A69}
.story-card .story{color:#41544B}
.story-card .moral{color:#8A6420;border-top-color:#F2C9D9}
.story-card .close-x{color:#5C7A69}
.story-card .close-x:hover{color:#BE266C}
.tomb-card .story p{margin:0 0 10px}
.tomb-card .story p:last-child{margin:0}
.story-card{max-height:84vh;overflow-y:auto}
/* park sponsor unit: pink accents on the pastel page */
#page-park .ad-sponsor{border-left-color:#F2A9C4}
#page-park .ad-sponsor:hover{border-left-color:#D96FA0}
#page-park .ad-sponsor .ad-cta{color:#D96FA0}
/* IP Pages: get-listed invite */
.yp-invite{display:block;text-align:center;border:2px dashed #33240F;background:#FBF0C8;margin:34px 0;padding:26px 20px;text-decoration:none;color:#33240F;transition:background .25s,transform .25s}
.yp-invite:hover{background:#FDF6DC;transform:translateY(-2px)}
.yp-invite b{display:block;font-family:'Fraunces',serif;font-size:1.5rem;color:#B3272B}
.yp-invite span{display:block;margin-top:6px;font:400 .95rem 'Bricolage Grotesque',sans-serif;color:#6b5330}
.yp-invite .yp-invite-cta{margin-top:12px;font:700 .78rem 'Bricolage Grotesque',sans-serif;letter-spacing:.08em;text-transform:uppercase;color:#B3272B}

/* placeholder park stories (app.js adds .story-stub when there is no copy) */
.story-card .story.story-stub p{font-style:italic;color:#4B6157}
/* directory result count (app.js injects #dir-status before #dir-grid) */
.dir-status{margin:0 0 14px;font:600 .78rem 'Bricolage Grotesque',sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--plum-soft)}
#page-directory .dir-status{color:#5c4520}

/* vacant ad slots: headline and CTA on their own lines */
.ad-slot b{display:block}
.ad-slot .ad-cta{display:inline-block;margin-top:10px;font:600 .82rem 'Bricolage Grotesque',sans-serif;color:var(--primary)}
.ad-slot p + .ad-cta{margin-top:8px}

/* ==========================================================================
   REBUILD ADDITIONS — elements introduced by tools/rebuild.py and by the
   accessibility pass. Keep in sync with tools/rebuild.py.
   ========================================================================== */

/* Card headings were <h3> under an <h1>, which skipped a level. They are now
   <h2>; these rules keep the visual weight exactly where it was. */
.kcard h2,.ccard h2,.firm h2,.lcard h2,.entry-wrap .kcard h2{
  font-size:1.3rem;margin-bottom:8px;font-family:'Space Grotesk','Bricolage Grotesque',sans-serif;
  font-weight:700;letter-spacing:-.02em}
@media(min-width:900px){.kcard h2{font-size:1.45rem;margin-bottom:10px}}
.firm h2{font-size:1.05rem;line-height:1.3}
#page-directory .firm h2{color:#2A1D0C}
.ccard h2{margin:12px 0 8px;font-size:1.25rem}

/* Footnote inside the graveyard / park modal (injected by app.js) */
.tomb-note,#tomb-note{margin-top:14px;padding-top:12px;border-top:1px solid rgba(111,163,173,.25);
  font-size:.8rem;line-height:1.5;color:#8FB8C0}
.tomb-note strong{color:#BFE3E8}
.story-card .tomb-note{border-top-color:rgba(92,122,105,.25);color:#5C7A69}
.story-card .tomb-note strong{color:#3F5A4B}

/* Legal links row in the footer */
.foot-nav{margin:10px 0 6px;font-size:.85rem}
.foot-nav a{color:var(--primary-deep,#7FD8CE);text-decoration:underline;text-underline-offset:3px}
.foot-nav a:hover{text-decoration-thickness:2px}

/* Shown only when JavaScript is unavailable */
.noscript-note{max-width:900px;margin:18px auto 0;padding:14px 18px;border-radius:12px;
  background:rgba(95,212,200,.10);border:1px solid rgba(95,212,200,.35);
  color:#CFEFEC;font-size:.92rem;line-height:1.55;text-align:center}

/* Park story spots rendered as plain HTML below the canvas */
.park-story--stub{opacity:.72}
.park-story--stub .years{font-style:italic}


/* --------------------------------------------------------------------------
   IP PARK — plain-text story section.
   The park page is pale, but .entry-wrap / .kcard / .lede are styled for the
   dark theme, which left this section at ~2:1 contrast. Re-skin it to match
   the .story-card palette used by the park's own modal.
   -------------------------------------------------------------------------- */
#page-park .entry-wrap{color:#2F473A}
#page-park .entry-wrap h2,
#page-park .entry-wrap h3{color:#1F3329}
#page-park .entry-wrap .lede{color:#3F5A4B}
#page-park .entry-wrap p,
#page-park .entry-wrap li{color:#2F473A}
#page-park .entry-wrap strong,
#page-park .entry-wrap b{color:#173028}
#page-park .entry-wrap .eyebrow{color:#A63B6F}
#page-park .entry-wrap a{color:#8E2A5F;text-decoration:underline;text-underline-offset:3px}
#page-park .entry-wrap a:hover{color:#6D1F49}
#page-park .kcard{background:#FFF9FB;border:1px solid rgba(92,122,105,.30);
  box-shadow:0 2px 10px rgba(47,71,58,.06)}
#page-park .kcard .years,
#page-park .kcard .rv-meta{color:#5C7A69}
#page-park .grave-links a{color:#8E2A5F;border-color:rgba(142,42,95,.35)}
#page-park .grave-links a:hover{color:#6D1F49;border-color:rgba(109,31,73,.6)}
#page-park .park-story--stub{opacity:1;color:#4F6B5B}

@media (prefers-reduced-motion: reduce){
  html.js .rv{opacity:1;transform:none;transition:none}
}

/* ==========================================================================
   CROSS-PLATFORM HARDENING
   Small screens, touch input, and the engines that are not Chromium.
   Everything here is additive: nothing above this block was restyled, and
   every rule is either a fallback, a floor, or a touch-only refinement.
   ========================================================================== */

/* iOS and Android both "helpfully" inflate text in some orientations. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}

/* Honour a reduced-motion preference for scrolling too, not just animation. */
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* --- touch input -------------------------------------------------------- */
@media (pointer:coarse){
  /* iOS Safari zooms the whole page when a focused input is under 16px.
     The search fields were 15.2px, so every tap on them zoomed the page and
     left the visitor stranded at 1.4x with no way back but a pinch. */
  .search,.link-filter,input[type="search"],input,textarea,select{font-size:16px}

  /* The nav lockup is two links now; at 18-24px tall they were below any
     reasonable tap target. Padding only - the visual size is unchanged. */
  .logo-do,.logo-qm{min-height:44px;display:flex;align-items:center}

  /* Standalone calls to action get a real target. Prose links are left
     alone: inflating them would break the line boxes they sit in. */
  .entry-nav a,.news-archive a,.press-item .news-link a,.foot-nav a,
  .link-card-cta,.yp-invite-cta{display:inline-flex;align-items:center;min-height:44px}

  /* Holding a d-pad button used to scroll the page and pop the iOS
     magnifier. The game needs the press, not the gesture. */
  .dpad button{touch-action:none;-webkit-user-select:none;user-select:none;
    -webkit-tap-highlight-color:transparent}

  /* Canvas scenes are decorative; long-pressing one should not start a
     selection or offer to save an image. */
  #game,#park,.di-scene,.pond-scene,.reader-scene,.coffee-duck,.bills-scene,
  .peek-duck,.mascot{-webkit-user-select:none;user-select:none;
    -webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
}

/* --- the small-screen legibility floor ---------------------------------- */
/* Labels can be small on a 27" display and still read. On a 320px phone the
   same labels were 9.9-11.5px, which is below what most people can read at
   arm's length. These raise the floor without touching the desktop sizes. */
/* 860px covers phones and portrait tablets; laptops start at 1024. */
@media (max-width:860px){
  /* Two things to watch in here. Specificity: `footer .legal` and
     `.grave-head .keys` outrank a bare class, so these selectors match them.
     Source order: style.css is loaded FIRST, before soundings.css, so an
     equal-specificity rule over there wins - hence the qualified selectors
     for .press-meta, which lives in soundings.css.
     .78rem = 12.5px, the floor worth defending at arm's length. */
  footer .legal,.legal{font-size:.78rem;line-height:1.6}
  .eyebrow,.snd-kicker{font-size:.78rem}
  .grave-head .keys,.keys{font-size:.78rem;line-height:1.5}
  .mn-label{font-size:.78rem}
  .wink{font-size:.8rem}
  .ticker span{font-size:.78rem}
  .press-room .press-meta,.press-room .press-meta span,
  .news-latest .press-meta,.news-latest .press-meta span{font-size:.78rem}
  /* .snd-kicker is declared in soundings.css, which loads after this file,
     so a bare class here loses. Qualify it to win the cascade. */
  .about-block .snd-kicker,.page .snd-kicker,section .snd-kicker{font-size:.78rem}
  .press-side .news-toc h2,.ad-inline .adlbl,.ad-sponsor .adlbl{font-size:.72rem}
}

/* --- very small screens ------------------------------------------------- */
/* 320px is the narrowest phone still in circulation. Nothing should need a
   sideways scroll to be read there. */
@media (max-width:360px){
  .nav-inner{padding-left:12px;padding-right:12px}
  .entry-wrap{padding-left:16px;padding-right:16px}
  .btn{padding:12px 18px}
  .dpad button{width:52px;height:52px}
}

/* ==========================================================================
   THE NAV, ON SMALL SCREENS
   Ten destinations will not fit on a phone. They used to sit in a sideways
   scroller, which hides items behind a gesture nobody performs. Below 900px
   the row collapses into a disclosure menu instead: one button, everything
   visible when it is open, nothing guessed at.
   Desktop is untouched - .nav-menu is a plain flex row and the toggle is
   not rendered at all.
   ========================================================================== */
.nav-menu{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.nav-toggle{display:none}

@media (max-width:900px){
  .nav-inner{flex-wrap:wrap;overflow:visible;gap:8px;padding:12px 16px;position:relative}

  .nav-toggle{
    display:inline-flex;align-items:center;gap:9px;margin-left:auto;
    min-height:44px;padding:8px 14px;cursor:pointer;
    background:rgba(95,212,200,.08);border:1px solid var(--ring);border-radius:999px;
    color:var(--plum);font:600 .82rem 'Bricolage Grotesque',sans-serif;
    letter-spacing:.02em;-webkit-tap-highlight-color:transparent}
  .nav-toggle:hover{border-color:var(--primary)}
  .nav-toggle[aria-expanded="true"]{background:rgba(95,212,200,.16);border-color:var(--primary)}

  /* three bars that become a cross, drawn rather than typed */
  .nav-bars{position:relative;width:18px;height:2px;background:var(--primary);
    border-radius:2px;transition:background .2s}
  .nav-bars::before,.nav-bars::after{content:"";position:absolute;left:0;width:18px;height:2px;
    background:var(--primary);border-radius:2px;transition:transform .25s ease,top .25s ease}
  .nav-bars::before{top:-6px}
  .nav-bars::after{top:6px}
  .nav-toggle[aria-expanded="true"] .nav-bars{background:transparent}
  .nav-toggle[aria-expanded="true"] .nav-bars::before{top:0;transform:rotate(45deg)}
  .nav-toggle[aria-expanded="true"] .nav-bars::after{top:0;transform:rotate(-45deg)}

  /* the panel: full width under the bar, animated open from nothing */
  .nav-menu{
    flex-basis:100%;flex-direction:column;align-items:stretch;gap:0;
    max-height:0;overflow:hidden;
    transition:max-height .3s ease,opacity .2s ease;opacity:0}
  .nav-menu.open{max-height:min(72vh,640px);overflow-y:auto;opacity:1;
    margin-top:6px;border-top:1px solid var(--ring)}
  .nav-menu .nav-btn{
    display:flex;align-items:center;min-height:48px;padding:12px 6px;
    font-size:.92rem;letter-spacing:.01em;
    border-bottom:1px solid rgba(95,212,200,.10)}
  .nav-menu .nav-btn:last-child{border-bottom:none}
  .nav-menu .nav-btn.active{color:var(--primary)}
  .nav-menu .nav-btn.active::before{content:"";width:3px;align-self:stretch;
    background:var(--primary);border-radius:2px;margin-right:12px}

  /* the fade that hinted at the old sideways scroll has nothing left to hint at */
  nav::before{display:none}
}

@media (prefers-reduced-motion:reduce){
  .nav-menu,.nav-bars,.nav-bars::before,.nav-bars::after{transition:none}
}

/* On a phone the longest lines made a bubble wider than the screen, which no
   amount of nudging can rescue. Let it wrap, capped to the viewport. */
@media (max-width:620px){
  .mascot .bubble{white-space:normal;width:max-content;max-width:min(74vw,250px);line-height:1.35}
}