/* ==================================================================================================
   catchemcord.com, the Kalos look ("Lumiose Night", picked by Adam 2026-10-26). THE SHARED CHROME.

   One file, linked LAST on every page (after the page's own <style> or stylesheet), so the few things
   that must be the same everywhere are the same everywhere: the night nav with the iron rail under it,
   the night footer, the page band (the Lumiose skyline under a page title), the brand yellow button,
   the Gen 5 text box and the Gen 5 menu plate. A page keeps its own content styles.

   WHAT THIS IS NOT. No pill badges, no icon chips, no gradient washes, no scroll-reveal, no tilted
   cards. The chrome is drawn from the games' own furniture: the text box (navy, cream double rim), the
   menu plate (cream, dark rim, a hard one-step shadow), pixel art at whole scales. Silkscreen is the
   wordmark and ONE line per page, the h1 (11-04 took it off as a template tell; 11-05 Adam: "I liked the
   pixelated look", so the pixel caps title is back). Everything under the h1 is Nunito at a real scale.

   THE ART. assets/kalos/*.png are drawn pixel by pixel by scripts/gen-kalos-ornaments.py (rooftops
   480x96, Prism Tower 84x200, rail 24x14, cobbles 32x16, lamp 14x64) and shown at 2x or 3x with
   image-rendering:pixelated. Sprites are only our own pack (assets/mon/*.gif) at whole scales.

   THE SEASON. The Halloween layer (assets/hw/season.*) is appended by the head stub only inside its
   window and scopes everything to :root[data-season="halloween"]. Nothing here depends on it, and the
   two Kalos scene blocks are hidden in season (see the end of this file) so the cemetery stays whole.

   Cached hard by _headers once it ships, so bump the ?v= in scripts/lib/site-chrome.cjs and in every
   hand-written page when this file changes (v=6 since 2026-11-05: the pixel h1 is back).
   ================================================================================================== */

:root{
  --night:#141634; --night2:#232456; --dusk:#4a3a78; --rose:#e08a78; --peach:#f3b07a;
  --lamp:#ffd56b; --cream:#fff4d6; --cream2:#cfd1f2; --iron:#0d0e22; --awn:#c2353a;
  --k-rim:#2c2414; --k-rim2:#1b1b3c;
}

/* ── the wordmark + button, shared ─────────────────────────────────────────────────────────────── */
.kn .brand{display:flex;align-items:center;gap:11px;font-family:var(--disp,"Silkscreen",system-ui,sans-serif);font-weight:400;
  font-size:1rem;color:var(--cream);text-decoration:none;letter-spacing:.02em;white-space:nowrap}
.kn .brand img{width:40px;height:40px;border-radius:10px;border:2px solid rgba(255,244,214,.18);box-shadow:none}
.kn .brand:hover{text-decoration:none;color:#fff}

/* 11-04 (wiki r4 audit): jump links land under the sticky nav, not behind it. 68px bar + 14px rail on desktop, 60 + 14 on
   phones, plus a little air. Set once here, so a page never needs its own scroll-margin-top for the nav. */
html{scroll-padding-top:96px;-webkit-tap-highlight-color:transparent}
/* 11-05: the nav collapses to the burger under 960px, not 820, since the sign-in link joined the row (the 820 row overflowed at 900) */
@media(max-width:960px){html{scroll-padding-top:84px}}
/* no 300ms double-tap wait on anything you tap; the grey iOS flash is off because every control has its own :active */
a,button,summary,label,input,select,textarea,[role="button"]{touch-action:manipulation}

/* ── the nav: navy, cream type, the iron balcony rail as its bottom edge (24x14 tile at 2x) ─────── */
/* the 14px bottom margin is the rail's own row, so the page's first thing starts under the rail, not behind it */
/* opaque on purpose: a 96% navy over a blur reads the same and costs a compositing layer on every scroll (polish pass 10-26) */
nav.kn{position:sticky;top:0;z-index:40;background:var(--night);backdrop-filter:none;-webkit-backdrop-filter:none;border-bottom:0;margin:0 0 14px}
nav.kn::after{content:"";position:absolute;left:0;right:0;bottom:-14px;height:14px;z-index:-1;
  background:url("/assets/kalos/rail-night.png") repeat-x 0 0/24px 14px,var(--iron);image-rendering:pixelated;pointer-events:none}
nav.kn .row{display:flex;align-items:center;justify-content:space-between;gap:14px;height:68px;max-width:1160px;margin:0 auto;padding:0 22px}
nav.kn .links{display:flex;align-items:center;gap:2px}
nav.kn .links a.text{color:var(--cream2);padding:9px 13px;border-radius:8px;font-family:var(--body-f,"Nunito",system-ui,sans-serif);
  font-weight:700;font-size:.95rem;text-decoration:none;white-space:nowrap}
nav.kn .links a.text:hover{color:#fff;background:rgba(255,255,255,.08);text-decoration:none}
nav.kn .links a.text.on{color:var(--lamp);box-shadow:inset 0 -3px 0 var(--lamp);border-radius:0}
nav.kn .links .btn{margin-left:10px}
nav.kn .burger{display:none;background:none;border:2px solid rgba(255,244,214,.28);color:var(--cream);width:44px;height:44px;
  border-radius:8px;cursor:pointer;padding:0;place-items:center}
nav.kn .burger svg{display:block;width:20px;height:14px}
nav.kn .burger path{stroke:var(--cream);stroke-width:2.5}
nav.kn :focus-visible{outline:3px solid var(--lamp);outline-offset:3px}
@media(max-width:960px){
  nav.kn .row{height:60px;padding:0 16px}
  nav.kn .brand{font-size:.86rem}nav.kn .brand img{width:34px;height:34px}
  nav.kn .burger{display:grid}
  nav.kn .links{display:none;position:absolute;top:calc(100% + 14px);right:16px;left:16px;flex-direction:column;align-items:stretch;gap:2px;
    background:var(--night);border:3px solid var(--cream);outline:3px solid var(--night);border-radius:10px;padding:8px;z-index:40}
  nav.kn.open .links{display:flex}
  nav.kn .links a.text{padding:12px 14px;font-size:1rem}
  nav.kn .links a.text.on{box-shadow:none;color:var(--lamp)}
  nav.kn .links .btn{margin:6px 0 0;justify-content:center;min-height:44px}
}

/* ── the brand yellow button (11-05, Adam: "i don't like the look of the 'ai generated' buttons"). A flat key the way
   discord.com and linear.app draw one: solid Poke yellow, a crisp 1px edge, one inner light along the top, a soft contact
   shadow. Hover lifts 1px and the shadow blooms; a press settles back and dims. No highlight wash, no 3D lip. The home
   page's .btn (index.html) is the same key at a size up. ───────────────────────────────────────────────── */
.kn .btn,.kf .btn,.kband .btn,.btn.k{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:42px;padding:9px 18px;border-radius:10px;
  font-family:var(--body-f,"Nunito",system-ui,sans-serif);font-weight:700;font-size:.95rem;line-height:1.2;letter-spacing:-.005em;color:#2a1d00;background:#ffcb05;
  border:1px solid #b58d00;box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 1px 2px rgba(0,0,0,.2),0 6px 16px -8px rgba(255,203,5,.45);
  text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:transform .16s cubic-bezier(.2,0,0,1),box-shadow .16s cubic-bezier(.2,0,0,1),background-color .16s cubic-bezier(.2,0,0,1),border-color .16s cubic-bezier(.2,0,0,1)}
.kn .btn:hover,.kf .btn:hover,.kband .btn:hover,.btn.k:hover{background:#ffdb4d;text-decoration:none;transform:translateY(-1px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 2px 4px rgba(0,0,0,.18),0 10px 24px -8px rgba(255,203,5,.55)}
.kn .btn:active,.kf .btn:active,.kband .btn:active,.btn.k:active{background:#f0bd00;transform:translateY(0) scale(.985);transition-duration:.08s;
  box-shadow:inset 0 2px 3px rgba(0,0,0,.18),0 1px 2px rgba(0,0,0,.15)}
.btn.k.ghost{background:transparent;color:var(--cream);border-color:rgba(255,244,214,.3);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 1px 2px rgba(0,0,0,.25)}
.btn.k.ghost:hover{background:rgba(255,244,214,.14);border-color:rgba(255,244,214,.5);box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 2px 6px rgba(0,0,0,.3)}
.btn.k.ghost:active{background:rgba(255,244,214,.1);box-shadow:inset 0 2px 3px rgba(0,0,0,.3)}

/* ── the page band: a page title standing in front of Lumiose at night ──────────────────────────
   Sky (navy to dusk), the rooftops tile at 2x (960x192) on the far shore, Prism Tower at 2x on the
   right, the quay rail and one lamp. The phone drops the tower so nothing sits under the words. */
.kband{position:relative;overflow:hidden;background:var(--night);color:var(--cream);isolation:isolate}
.kband .sky{position:absolute;inset:0;z-index:0;background:linear-gradient(180deg,var(--night) 0%,var(--night2) 40%,var(--dusk) 78%,#6a4a7c 100%)}
.kband .stars{position:absolute;inset:0 0 50% 0;z-index:0;pointer-events:none;background-repeat:no-repeat;background-size:2px 2px;
  background-image:linear-gradient(#fff,#fff),linear-gradient(#ffe9a8,#ffe9a8),linear-gradient(#fff,#fff),linear-gradient(#cfd3ff,#cfd3ff),linear-gradient(#fff,#fff),linear-gradient(#ffe9a8,#ffe9a8),linear-gradient(#fff,#fff);
  background-position:6% 30%,17% 62%,29% 18%,46% 48%,61% 22%,78% 58%,93% 34%}
.kband .city{position:absolute;left:0;right:0;bottom:14px;height:192px;z-index:1;pointer-events:none;
  background:url("/assets/kalos/lumiose-night.png") repeat-x left bottom/960px 192px;image-rendering:pixelated}
.kband .tower{position:absolute;right:6%;bottom:14px;width:168px;height:400px;z-index:0;pointer-events:none;
  background:url("/assets/kalos/prism-night.png") no-repeat 0 0/168px 400px;image-rendering:pixelated}
.kband .halo{position:absolute;right:calc(6% + 84px - 110px);bottom:calc(14px + 400px - 80px - 110px);width:220px;height:220px;z-index:0;border-radius:50%;
  pointer-events:none;background:radial-gradient(circle,rgba(255,226,140,.5),rgba(255,200,90,0) 65%);animation:kbreathe 6s ease-in-out infinite}
@keyframes kbreathe{50%{transform:scale(1.1);opacity:.75}}
.kband .rail{position:absolute;left:0;right:0;bottom:0;height:14px;z-index:2;
  background:url("/assets/kalos/rail-night.png") repeat-x 0 0/24px 14px,var(--iron);image-rendering:pixelated}
.kband .lamp{position:absolute;left:4%;bottom:12px;z-index:2;width:28px;height:128px;pointer-events:none;
  background:url("/assets/kalos/lamp.png") no-repeat 0 0/28px 128px;image-rendering:pixelated}
.kband .lamp::before{content:"";position:absolute;left:-56px;top:-40px;width:140px;height:140px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,220,140,.45),rgba(255,210,120,0) 62%)}
.kband .wrap{position:relative;z-index:3;max-width:1160px;margin:0 auto;padding:44px 22px 190px}
.kband h1{font-family:var(--disp,"Silkscreen",system-ui,sans-serif);font-weight:400;color:var(--cream);text-shadow:0 4px 0 rgba(8,8,30,.45);
  font-size:clamp(1.5rem,3.4vw,2.4rem);line-height:1.18;letter-spacing:0;margin:0 0 16px;max-width:22ch;text-wrap:balance}
.kband p{color:var(--cream2);font-weight:400;font-size:1.1875rem;line-height:1.55;max-width:56ch;margin:0}
.kband p b{color:#fff}
.kband p a{color:var(--lamp);font-weight:700;text-decoration:underline}
.kband .crumb{color:#aeb0dc;font-size:.86rem;font-weight:700;margin:0 0 14px;padding:0}
.kband .crumb a{color:var(--lamp);text-decoration:underline;text-underline-offset:2px}
.kband .crumb a:hover{text-decoration-thickness:2px}
/* .sm (a secondary page): the SAME 2x art, nothing at a fractional scale. The tower stands lower, so only its lit
   top shows over the rooftops the way it does from a side street; the rooftops hide its base anyway. */
.kband.sm .wrap{padding:36px 22px 176px}
.kband.sm .tower{bottom:-110px}
.kband.sm .halo{bottom:calc(-110px + 400px - 80px - 110px)}
@media(max-width:820px){
  .kband .tower,.kband .halo{display:none}
  .kband .wrap,.kband.sm .wrap{padding:30px 16px 136px}
  .kband .city,.kband.sm .city{height:96px;background-size:480px 96px}
  .kband .lamp{left:auto;right:5%;width:14px;height:64px;background-size:14px 64px;bottom:12px}
  .kband .lamp::before{left:-40px;top:-30px;width:90px;height:90px}
}

/* ── the Gen 5 text box: navy, a cream rim with a navy line outside it, the blinking advance arrow ─ */
.gbox{position:relative;background:var(--dlg,#171d3a);color:#eef1fb;border:3px solid #e8ecf8;outline:3px solid var(--dlg,#171d3a);
  border-radius:8px;padding:16px 46px 16px 20px;font-weight:700;line-height:1.55}
.gbox p{margin:0;max-width:none;color:inherit;font-size:inherit}
.gbox p+p{margin-top:8px}
.gbox b{color:var(--lamp)}
.gbox code{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);color:var(--lamp);padding:1px 7px;border-radius:5px;font-weight:700;font-size:.92em}
.gbox::after{content:"";position:absolute;right:16px;bottom:12px;border:7px solid transparent;border-top:9px solid #ffd84d;border-bottom:0;animation:kblink 1.1s steps(2) infinite}
@keyframes kblink{50%{opacity:0}}

/* ── the Gen 5 menu plate: cream, a dark rim, a pale inner line, one hard step of shadow ─────────── */
.plate{background:var(--surface,#fdf8ea);border:3px solid var(--k-rim);border-radius:10px;box-shadow:inset 0 0 0 2px #fff,0 4px 0 var(--k-rim)}
.plate.flat{box-shadow:inset 0 0 0 2px #fff}

/* ── a night band drawn with NO child elements, for the generated pages' headers (.fhead on /features, the guides,
   /questions, /this-week, /credits; .ehead on every Pokédex entry; the Pokédex index head). The sky and stars are the
   element's own background, the tower is ::before (behind), the rooftops ::after (in front of the tower), and the rail
   is drawn by the inner .wrap/.row, which sits on top. Same art, same 2x, same phone fallback as .kband. ───────── */
.nband{position:relative;overflow:hidden;isolation:isolate;color:var(--cream);text-align:left;margin:0;padding:0;
  background-image:linear-gradient(#fff,#fff),linear-gradient(#ffe9a8,#ffe9a8),linear-gradient(#fff,#fff),linear-gradient(#cfd3ff,#cfd3ff),linear-gradient(#fff,#fff),linear-gradient(#ffe9a8,#ffe9a8),linear-gradient(#fff,#fff),
    linear-gradient(180deg,var(--night) 0%,var(--night2) 40%,var(--dusk) 78%,#6a4a7c 100%);
  background-repeat:no-repeat;
  background-size:2px 2px,2px 2px,2px 2px,2px 2px,2px 2px,2px 2px,2px 2px,100% 100%;
  background-position:6% 14%,17% 30%,29% 9%,46% 24%,61% 11%,78% 28%,93% 17%,0 0}
.nband::before{content:"";position:absolute;right:6%;bottom:-110px;width:168px;height:400px;z-index:0;pointer-events:none;
  background:url("/assets/kalos/prism-night.png") no-repeat 0 0/168px 400px;image-rendering:pixelated}
.nband::after{content:"";position:absolute;left:0;right:0;bottom:14px;height:192px;z-index:1;pointer-events:none;
  background:url("/assets/kalos/lumiose-night.png") repeat-x left bottom/960px 192px;image-rendering:pixelated}
.nband>.wrap,.nband>.row{position:relative;z-index:2;max-width:1160px;margin:0 auto;padding:36px 22px 176px}
.nband>.wrap::after,.nband>.row::after{content:"";position:absolute;left:-100vw;right:-100vw;bottom:0;height:14px;z-index:2;
  background:url("/assets/kalos/rail-night.png") repeat-x 0 0/24px 14px,var(--iron);image-rendering:pixelated}
.nband h1{font-family:var(--disp,"Silkscreen",system-ui,sans-serif);font-weight:400;color:var(--cream);text-shadow:0 4px 0 rgba(8,8,30,.45);
  font-size:clamp(1.5rem,3.4vw,2.4rem);line-height:1.18;letter-spacing:0;margin:0 0 16px;max-width:22ch;text-wrap:balance}
.nband p{color:var(--cream2);font-weight:400;font-size:1.1875rem;line-height:1.55;max-width:56ch;margin:0;text-wrap:balance}
.nband p b{color:#fff}
.nband p a{color:var(--lamp);font-weight:700;text-decoration:underline}
@media(max-width:820px){
  .nband::before{display:none}
  .nband>.wrap,.nband>.row{padding:30px 16px 136px}
  .nband::after{height:96px;background-size:480px 96px}
}

/* ── the Mega Evolution accent: the game's own Key Stone item sprite beside a Mega heading. 16px art shown at a
   whole 2x step, never smoothed (2026-11-10: the drawn gradient ball read as a blurry blob; Adam "wtf is this!") ── */
.keystone{display:inline-block;width:32px;height:32px;vertical-align:-6px;margin-right:10px;flex:none;
  background:url("/assets/key-stone.png") center/32px 32px no-repeat;image-rendering:pixelated}

/* ── the footer: the page ends on the quay. The rail on top, the wordmark, the links, the notice ─── */
footer.kf{position:relative;margin-top:64px;padding:48px 0 40px;background:var(--night);color:#aeb0dc;font-size:.92rem;text-align:left;
  border-top:0;box-shadow:none}
footer.kf::before{content:"";position:absolute;left:0;right:0;top:0;height:14px;
  background:url("/assets/kalos/rail-night.png") repeat-x 0 0/24px 14px,var(--iron);image-rendering:pixelated}
footer.kf .wrap{max-width:1160px;margin:0 auto;padding:0 22px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:22px 40px;align-items:start}
footer.kf .brand{margin-bottom:10px}
footer.kf .tag{color:var(--cream2);font-weight:600;max-width:46ch;margin:0}
footer.kf .cols{display:flex;gap:10px 44px;flex-wrap:wrap}
footer.kf .cols ul{list-style:none;margin:0;padding:0;display:grid;gap:0;min-width:140px;align-content:start}
footer.kf .cols li{margin:0;max-width:none}
footer.kf .cols a{display:inline-block;padding:4px 0;color:var(--cream2);font-weight:600;text-decoration:none}
footer.kf .cols a:hover{color:#fff;text-decoration:underline}
footer.kf .cols a.y{color:var(--lamp)}
footer.kf .disc{grid-column:1 / -1;margin:18px 0 0;padding-top:18px;border-top:1px solid rgba(255,244,214,.14);color:#8d90bf;font-size:.8rem;line-height:1.6;font-weight:600;max-width:none;text-align:left}
footer.kf .disc a{color:#8d90bf}
footer.kf :focus-visible{outline:3px solid var(--lamp);outline-offset:3px}
@media(max-width:820px){
  footer.kf .wrap{grid-template-columns:1fr;padding:0 16px}
  footer.kf .cols{gap:0 32px}
  /* a thumb-sized row for every footer link on a phone (44px, WCAG 2.5.5) */
  footer.kf .cols a{padding:12px 0;min-height:44px}
}

/* ── type: one face for reading, Nunito, on one scale (h1 52 / h2 32 / h3 19 / body 17); Silkscreen is the wordmark ─ */
.kalos h2,.kalos h3,.kalos h4{font-family:var(--body-f,"Nunito",system-ui,sans-serif);font-weight:700;letter-spacing:-.018em;color:var(--ink,#2c2414)}
.kalos h2{font-size:clamp(1.5rem,2.6vw,2rem);line-height:1.15;letter-spacing:-.024em}
.kalos h3{font-size:1.1875rem;line-height:1.3}
.kalos code,.kalos .flist code,.kalos p code,.kalos li code{font-family:var(--body-f,"Nunito",system-ui,sans-serif)}
/* three weights site-wide (400 body, 600 labels, 700 headings and emphasis). A bare <b> inside a 600 or 700 parent would
   otherwise compute to "bolder" (800-900), which Nunito is not loaded at, so the browser fakes it. */
.kalos b,.kalos strong{font-weight:700}

/* ── the console dark (2026-11-04, after the dev portal's house.css: "tge dark looks insane tho") ─────────────────
   The site's non-scene dark (the nav, the phone menu, the footer) is the portal's neutral near-black: four surface
   steps a few points apart, low-alpha white hairlines (never a solid hex), quiet grey type, ONE toned Poke yellow for
   the current page and the action. The Lumiose sky stays navy on purpose: it is the scene, not the chrome, so the
   nav now reads as the dark above the city, and the iron rail (pixel art) still closes it. */
:root{
  --c-bg:#0b0c0e; --c-surface:#111215; --c-surface2:#16171a; --c-raised:#1b1c20;
  --c-line:rgba(255,255,255,.07); --c-line2:rgba(255,255,255,.11); --c-line3:rgba(255,255,255,.17);
  --c-ink:#ededef; --c-text:#b5b6bc; --c-mut:#85868d; --c-accent:#f4c542; --c-accent-soft:rgba(244,197,66,.10);
}
nav.kn{background:var(--c-bg);box-shadow:inset 0 -1px 0 var(--c-line)}
nav.kn .links a.text{color:var(--c-text);font-weight:600}
nav.kn .links a.text:hover{color:var(--c-ink);background:rgba(255,255,255,.05)}
nav.kn .links a.text.on{color:var(--c-accent);box-shadow:inset 0 -2px 0 var(--c-accent)}
nav.kn .burger{border:1px solid var(--c-line2);border-radius:6px}
nav.kn .burger path{stroke:var(--c-ink)}
@media(max-width:960px){
  nav.kn .links{background:var(--c-surface);border:1px solid var(--c-line2);outline:0;border-radius:8px;
    box-shadow:0 0 0 1px rgba(0,0,0,.4),0 18px 40px -16px rgba(0,0,0,.7)}
  nav.kn .links a.text:hover{background:rgba(255,255,255,.035)}
}
footer.kf{background:var(--c-bg);color:var(--c-mut)}
footer.kf .tag{color:var(--c-text);font-weight:400}
footer.kf .cols a{color:var(--c-text);font-weight:400}
footer.kf .cols a:hover{color:var(--c-ink);text-decoration:none}
footer.kf .cols a.y{color:var(--c-accent)}
footer.kf .disc{border-top-color:var(--c-line);color:var(--c-mut);font-weight:400}
footer.kf .disc a{color:var(--c-mut)}

/* ── round 2 micro-interactions in the chrome (2026-11-04, micro-interactions + premium-saas-web; 11-05 the underline
   now draws from the left, the way a pen would, and the key rules moved up into the button block) ─────────────────
   The nav link draws a hairline on hover (transform only, 220ms, the UI curve); the current page keeps its solid underline. */
@media(hover:hover) and (min-width:821px){
  nav.kn .links a.text{position:relative;background:none!important}
  nav.kn .links a.text::after{content:"";position:absolute;left:13px;right:13px;bottom:5px;height:1px;background:currentColor;opacity:.7;
    transform:scaleX(0);transform-origin:left;transition:transform .22s cubic-bezier(.2,0,0,1)}
  nav.kn .links a.text:hover::after{transform:scaleX(1)}
  nav.kn .links a.text.on::after{display:none}
}
nav.kn .links a.text{transition:color .15s cubic-bezier(.2,0,0,1)}
.kn .btn:focus-visible,.kf .btn:focus-visible,.kband .btn:focus-visible,.btn.k:focus-visible{outline:2px solid var(--cream);outline-offset:3px}

/* ── motion: the one moving thing in the chrome is the tower's light and the text box arrow ──────── */
@media(prefers-reduced-motion:reduce){
  .kband .halo,.gbox::after,.kn .btn,.kf .btn,.btn.k{animation:none!important;transition:none!important}
}

/* ── in season the cemetery owns the page: the Kalos scene stays out of the way ─────────────────── */
:root[data-season="halloween"] .lumiose,
:root[data-season="halloween"] .nband::before,
:root[data-season="halloween"] .nband::after,
:root[data-season="halloween"] .nband>.wrap::after,
:root[data-season="halloween"] .nband>.row::after,
:root[data-season="halloween"] .kband .city,
:root[data-season="halloween"] .kband .tower,
:root[data-season="halloween"] .kband .halo,
:root[data-season="halloween"] .kband .lamp{display:none}
/* and with the skyline gone the band keeps only the room its words need */
:root[data-season="halloween"] .kband .wrap,
:root[data-season="halloween"] .kband.sm .wrap,
:root[data-season="halloween"] .nband>.wrap,
:root[data-season="halloween"] .nband>.row{padding-bottom:40px}

/* ── round 3 (2026-11-05, Adam: "a sign-in page maybe in the top ... we want this easy to find"; research:
   /mnt/project-files/website-rework-1105/home-r3/research.md items 1 and 6). DRAFT, not promoted.
   Sign in is the last thing in the nav and looks unlike the links: an outlined key, cream 1px edge, beside the yellow
   one (discord.com puts "Log In" there, linear.app "Log in" then "Sign up"). Signed in, the same key reads "My trainer".
   The keys lose the inner light and the yellow glow: one fill, one edge, hover changes the fill. ───────────────── */
nav.kn .links a.text#kn-me{margin-left:12px;min-height:42px;padding:9px 18px;display:inline-flex;align-items:center;
  border:1px solid rgba(255,244,214,.42);border-radius:8px;color:var(--cream,#fff4d6);background:transparent}
nav.kn .links a.text#kn-me:hover{background:rgba(255,244,214,.1)!important;border-color:rgba(255,244,214,.7);color:#fff}
nav.kn .links a.text#kn-me::after{display:none}
nav.kn .links #kn-me+.btn{margin-left:8px}
.kn .btn,.kf .btn,.kband .btn,.btn.k{border-radius:8px;box-shadow:none}
.kn .btn:hover,.kf .btn:hover,.kband .btn:hover,.btn.k:hover,.kn .btn:active,.kf .btn:active,.kband .btn:active,.btn.k:active{box-shadow:none}
@media(max-width:960px){
  nav.kn .links a.text#kn-me{margin:6px 0 0;justify-content:center;min-height:44px}
  nav.kn .links #kn-me+.btn{margin-left:0}
}
/* on a phone the key stays out of the drawer too: a small outlined Sign in beside the burger (discord.com keeps "Log In"
   visible there). Pages that carry the .me-m link show it; the rest are unchanged. */
nav.kn .me-m{display:none}
@media(max-width:960px){
  nav.kn .me-m{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;margin-left:auto;margin-right:8px;border:1px solid rgba(255,244,214,.42);
    border-radius:8px;color:var(--cream,#fff4d6);font-family:var(--body-f,"Nunito",system-ui,sans-serif);font-weight:700;font-size:.95rem;text-decoration:none}
  nav.kn .me-m:hover{background:rgba(255,244,214,.1);text-decoration:none}
  nav.kn .me-m:focus-visible{outline:3px solid var(--lamp);outline-offset:3px}
}