/* ==========================================================================
   View modes for editorial pages (Home, Contact, Playground).
   Driven by site-modes.js, which sets <html data-kb-mode="normal|pixel|ascii|ink">.
   Colour themes live in site-themes.css and work with every mode.
   Load after page CSS and before site-components.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Switcher (all modes)
   -------------------------------------------------------------------------- */
.site-layout > .site-top { position:relative; }
.kb-mode-switch { position:relative; flex:none; margin-left:auto; }
.kb-mode-switch__toggle {
  position:relative;
  display:inline-flex; align-items:center; gap:8px;
  min-height:30px; padding:0 10px;
  border:1px solid var(--kb-control-border); border-radius:var(--kb-control-radius);
  background:color-mix(in srgb, var(--kb-surface) 70%, transparent);
  color:var(--kb-purple);
  font:600 10px/1 var(--kb-font); letter-spacing:.12em;
  cursor:pointer;
  transition:border-color .18s ease, color .18s ease, background .18s ease;
}
.kb-mode-switch__toggle::after { content:""; position:absolute; inset:-8px -4px; }
.kb-mode-switch__label { color:var(--kb-muted); }
.kb-mode-switch__value { color:var(--kb-fg); }
.kb-mode-switch__chevron { flex:none; transition:transform .18s ease; }
.kb-mode-switch__toggle[aria-expanded="true"] .kb-mode-switch__chevron { transform:rotate(180deg); }
.kb-mode-switch__toggle:hover,
.kb-mode-switch__toggle[aria-expanded="true"] { border-color:var(--kb-accent); background:var(--kb-control-hover); }

.kb-mode-switch__menu {
  position:absolute; top:calc(100% + 8px); right:0; z-index:30;
  display:grid; gap:4px; min-width:168px; padding:6px;
  border:1px solid var(--kb-control-border); border-radius:var(--kb-control-radius);
  background:var(--kb-surface);
  box-shadow:0 18px 40px -16px rgba(0,0,0,.7);
}
.kb-mode-switch__menu[hidden] { display:none; }
.kb-mode-switch__menu { max-height:min(560px,calc(100dvh - 90px)); overflow-y:auto; overscroll-behavior:contain; }
.kb-mode-switch__group { display:grid; gap:4px; }
.kb-mode-switch__group + .kb-mode-switch__group { margin-top:4px; padding-top:8px; border-top:1px solid var(--kb-control-border); }
.kb-mode-switch__group-label {
  padding:4px 10px 2px; color:var(--kb-muted);
  font:600 10px/1.2 var(--kb-font); letter-spacing:.12em; text-transform:uppercase;
}
.kb-mode-switch__item {
  display:flex; align-items:center; gap:12px;
  width:100%; min-height:var(--kb-control-height); padding:0 10px;
  border:1px solid transparent; border-radius:calc(var(--kb-control-radius) - 2px);
  background:transparent; color:var(--kb-fg);
  font:600 13px/1 var(--kb-font); letter-spacing:0; text-align:left;
  cursor:pointer;
}
.kb-mode-switch__item:hover { background:var(--kb-control-hover); }
.kb-mode-switch__item[aria-checked="true"] { background:var(--kb-control-active); border-color:var(--kb-purple); }
.kb-mode-switch__item[aria-checked="true"]::after { content:""; width:6px; height:6px; margin-left:auto; border-radius:50%; background:var(--kb-purple); }
.kb-mode-switch__glyph {
  display:grid; place-items:center; flex:none; width:30px; height:26px;
  border:1px solid var(--kb-control-border); border-radius:4px;
  color:var(--kb-purple); font:800 13px/1 var(--kb-font);
}
.kb-mode-switch__glyph--pixel { font-family:"Silkscreen",ui-monospace,monospace; font-weight:400; font-size:12px; border-radius:0; }
.kb-mode-switch__glyph--ascii { font:500 12px/1 ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace; border-style:dashed; border-radius:0; }
.kb-mode-switch__glyph--ink { background:#ece6d6; border-color:#ece6d6; color:#0b0b0d; font-weight:900; border-radius:3px 6px 4px 5px; }

/* Mode-only helpers stay out of the normal view. */
.kb-ascii-arrow, .kb-ascii-heading, .kb-mode-field { display:none; }

@media(prefers-reduced-motion:reduce) {
  .kb-mode-switch__toggle, .kb-mode-switch__chevron { transition:none; }
}

/* Shared canvas layers for Pixel, ASCII and Ink */
:root:is([data-kb-mode="pixel"],[data-kb-mode="ascii"],[data-kb-mode="ink"]) .kb-mode-field {
  display:block; position:fixed; inset:0; z-index:-1;
  width:100vw; height:100vh; pointer-events:none;
}
:root:is([data-kb-mode="pixel"],[data-kb-mode="ascii"],[data-kb-mode="ink"]) main.site-layout.site-layout::before { display:none; }
/* The page ground moves to <html> so the fixed field canvas always sits above it. */
:root:is([data-kb-mode="pixel"],[data-kb-mode="ascii"],[data-kb-mode="ink"]) { background:var(--kb-bg); }
:root:is([data-kb-mode="pixel"],[data-kb-mode="ascii"],[data-kb-mode="ink"]) body:has(.site-layout) { background:transparent; }

/* --------------------------------------------------------------------------
   2. Pixel: bitmap type, square corners, hard shadows, dithered art
   -------------------------------------------------------------------------- */
:root[data-kb-mode="pixel"] {
  --kb-pixel-display:"Silkscreen",ui-monospace,monospace;
  --kb-pixel-body:"Pixelify Sans",ui-monospace,monospace;
  --kb-pixel-shadow:4px 4px 0 var(--kb-accent);
}
:root[data-kb-mode="pixel"] .kb-mode-field { image-rendering:pixelated; image-rendering:crisp-edges; }
:root[data-kb-mode="pixel"] .site-layout,
:root[data-kb-mode="pixel"] .site-layout :is(p,span,a,li,label,input,textarea,button,small):not(h1 *) {
  font-family:var(--kb-pixel-body);
  -webkit-font-smoothing:none; font-smooth:never;
}
:root[data-kb-mode="pixel"] .site-layout *,
:root[data-kb-mode="pixel"] .site-layout *::before,
:root[data-kb-mode="pixel"] .site-layout *::after { border-radius:0 !important; }
:root[data-kb-mode="pixel"] .site-layout :is(h1,h2,.site-top,.site-footer,.pg-eyebrow,.pg-count,.pg-tag,.pg-badge,.pg-free,.pg-cover-meta,.pg-art-label,.pg-chips li,.pg-cta,.editorial-number,.editorial-kicker,.kb-mode-switch__toggle),
:root[data-kb-mode="pixel"] .site-layout :is(.site-top,.site-footer,.pg-count,.pg-tag,.pg-cta,.pg-chips li,.pg-badge,.pg-free,.pg-cover-meta,.pg-art-label,.kb-mode-switch__toggle) * ,
:root[data-kb-mode="pixel"] .contact-page #contact-form label {
  font-family:var(--kb-pixel-display); font-weight:400;
}
:root[data-kb-mode="pixel"] .site-layout h1,
:root[data-kb-mode="pixel"] .site-layout h1 * { font-family:var(--kb-pixel-display); font-weight:400; letter-spacing:0; line-height:1.05; }
:root[data-kb-mode="pixel"] .home-page .profile-hero .neon-name { font-size:clamp(46px,15vw,88px); line-height:1.02; }
:root[data-kb-mode="pixel"] .home-page .neon-word:nth-child(2) { color:var(--kb-purple); }
:root[data-kb-mode="pixel"] .playground-gallery h1 { font-size:clamp(30px,8.4vw,46px); }
:root[data-kb-mode="pixel"] .contact-page.editorial-page h1 { font-size:clamp(36px,7dvh,52px); }
:root[data-kb-mode="pixel"] .site-layout h2 { letter-spacing:0; }
:root[data-kb-mode="pixel"] .site-layout :is(.bio,.value-statement,.pg-description,.pg-card p) { font-size:14px; line-height:1.45; letter-spacing:0; }
:root[data-kb-mode="pixel"] .site-layout .kb-arrow,
:root[data-kb-mode="pixel"] .site-layout svg { shape-rendering:crispEdges; stroke-linecap:square; stroke-linejoin:miter; }

/* Rules become 2px pixel lines */
:root[data-kb-mode="pixel"] main.site-layout.site-layout > .site-top { border-bottom:2px solid var(--kb-rule); }
:root[data-kb-mode="pixel"] main.site-layout.site-layout > .site-footer { border-top:2px solid var(--kb-rule-soft); }
:root[data-kb-mode="pixel"] .playground-gallery .pg-count { border-bottom-width:2px; }

/* Home link list: hard-shadow hover, stepped motion */
:root[data-kb-mode="pixel"] .home-page.editorial-page .elsewhere > a.link-button { border-bottom-width:2px; transition:padding .2s steps(3), background .2s steps(2); }
:root[data-kb-mode="pixel"] .home-page.editorial-page .elsewhere > a.link-button:first-of-type { border-top-width:2px; }
:root[data-kb-mode="pixel"] .home-page.editorial-page .elsewhere > a.link-button:is(:hover,:focus-visible) { background:var(--kb-control-active); }
:root[data-kb-mode="pixel"] .home-page.editorial-page .elsewhere > a.link-button span { font-size:15px; }
:root[data-kb-mode="pixel"] .home-page.editorial-page .elsewhere .editorial-number { font-size:9px; }

/* Playground cards */
:root[data-kb-mode="pixel"] .playground-gallery .pg-card { border-width:2px; transition:transform .16s steps(2), box-shadow .16s steps(2), border-color .16s steps(2); }
:root[data-kb-mode="pixel"] .playground-gallery .pg-card:is(:hover,:focus-visible) { transform:translate(-2px,-2px); box-shadow:var(--kb-pixel-shadow); }
:root[data-kb-mode="pixel"] .playground-gallery .pg-play { box-shadow:3px 3px 0 rgba(0,0,0,.55); }
:root[data-kb-mode="pixel"] .playground-gallery .pg-badge i { border-radius:0; }
:root[data-kb-mode="pixel"] .playground-gallery .pg-art-label { -webkit-backdrop-filter:none; backdrop-filter:none; font-size:8px; }
:root[data-kb-mode="pixel"] .playground-gallery :is(.pg-tag,.pg-cta) { box-shadow:2px 2px 0 var(--kb-control-border); }

/* Contact form */
:root[data-kb-mode="pixel"] .contact-page.editorial-page #contact-form :is(input,textarea,button) { font-family:var(--kb-pixel-body); }
:root[data-kb-mode="pixel"] .contact-page.editorial-page #contact-form :is(input,textarea) { border-bottom-width:2px; font-size:14px; }
:root[data-kb-mode="pixel"] .contact-page.editorial-page #contact-form button.link-button { box-shadow:var(--kb-pixel-shadow); }
:root[data-kb-mode="pixel"] .contact-page.editorial-page #contact-form button.link-button:hover { transform:translate(-2px,-2px); box-shadow:6px 6px 0 var(--kb-accent); }

/* Switcher */
:root[data-kb-mode="pixel"] .kb-mode-switch__toggle { font-size:9px; letter-spacing:.06em; border-width:2px; box-shadow:2px 2px 0 var(--kb-control-border); }
:root[data-kb-mode="pixel"] .kb-mode-switch__menu { border-width:2px; box-shadow:var(--kb-pixel-shadow); }
:root[data-kb-mode="pixel"] .kb-mode-switch__item { font-family:var(--kb-pixel-display); font-weight:400; font-size:12px; }

@media(prefers-reduced-motion:reduce) {
  :root[data-kb-mode="pixel"] .site-layout :is(.pg-card,a.link-button) { transition:none; }
}

/* --------------------------------------------------------------------------
   3. ASCII: monospace terminal, character rules and frames, text-art media
   -------------------------------------------------------------------------- */
:root[data-kb-mode="ascii"] {
  --kb-mono:ui-monospace,"SFMono-Regular",Menlo,Consolas,"Liberation Mono",monospace;
}
:root[data-kb-mode="ascii"] .site-layout,
:root[data-kb-mode="ascii"] .site-layout :is(p,span,a,li,label,input,textarea,button,small,h2):not(h1 *) {
  font-family:var(--kb-mono); letter-spacing:0;
}
:root[data-kb-mode="ascii"] .site-layout *,
:root[data-kb-mode="ascii"] .site-layout *::before,
:root[data-kb-mode="ascii"] .site-layout *::after { border-radius:0 !important; box-shadow:none !important; }
:root[data-kb-mode="ascii"] .site-layout svg:not(.kb-mode-switch__chevron) { display:none; }
:root[data-kb-mode="ascii"] .site-layout .kb-ascii-arrow { display:inline; font-family:var(--kb-mono); font-weight:500; white-space:pre; }

/* Headings: the real text stays for screen readers and selection, the art sits on top */
:root[data-kb-mode="ascii"] .site-layout h1 { position:relative; color:transparent; }
:root[data-kb-mode="ascii"] .site-layout h1 * { color:transparent; }
:root[data-kb-mode="ascii"] .site-layout .kb-ascii-heading {
  display:block; position:absolute; inset:0; z-index:1; margin:0; overflow:hidden;
  font-family:var(--kb-mono); font-weight:700; white-space:pre;
  color:var(--kb-fg); pointer-events:none; user-select:none;
}
:root[data-kb-mode="ascii"] .home-page .neon-word:nth-child(2) { color:transparent; }

/* Character rules */
:root[data-kb-mode="ascii"] main.site-layout.site-layout > .site-top,
:root[data-kb-mode="ascii"] .playground-gallery .pg-count {
  border-bottom:0; padding-bottom:calc(var(--site-rule-gap) + 6px);
  background:var(--kb-ascii-rule) repeat-x left bottom / 7px 12px;
}
:root[data-kb-mode="ascii"] main.site-layout.site-layout > .site-footer {
  border-top:0; padding-top:calc(var(--site-rule-gap) + 6px);
  background:var(--kb-ascii-rule) repeat-x left top / 7px 12px;
}
:root[data-kb-mode="ascii"] .site-layout .site-back { gap:6px; }

/* Home: a terminal menu */
:root[data-kb-mode="ascii"] .home-page.editorial-page .profile-hero .value-statement::after {
  content:"_"; margin-left:2px; color:var(--kb-purple); animation:kb-ascii-blink 1.1s steps(1) infinite;
}
:root[data-kb-mode="ascii"] .home-page.editorial-page .elsewhere > a.link-button,
:root[data-kb-mode="ascii"] .home-page.editorial-page .elsewhere > a.link-button:first-of-type {
  border:0; padding-bottom:16px;
  background:var(--kb-ascii-rule) repeat-x left bottom / 7px 12px;
  font-weight:500; font-size:14px;
}
:root[data-kb-mode="ascii"] .home-page.editorial-page .elsewhere > a.link-button:first-of-type {
  padding-top:16px;
  background:var(--kb-ascii-rule) repeat-x left top / 7px 12px, var(--kb-ascii-rule) repeat-x left bottom / 7px 12px;
}
/* Short phones: six Home links still fit one screen in ASCII. */
@media (max-height:700px) {
  :root[data-kb-mode="ascii"] .home-page.editorial-page .elsewhere > a.link-button { min-height:44px; padding-block:8px 12px; }
}
:root[data-kb-mode="ascii"] .home-page.editorial-page .elsewhere > a.link-button:is(:hover,:focus-visible) { color:var(--kb-bg); }
:root[data-kb-mode="ascii"] .home-page.editorial-page .elsewhere > a.link-button:is(:hover,:focus-visible) > * { color:var(--kb-bg); }
:root[data-kb-mode="ascii"] .home-page.editorial-page .elsewhere > a.link-button:is(:hover,:focus-visible) {
  background:linear-gradient(var(--kb-purple),var(--kb-purple)) no-repeat left top / 100% calc(100% - 12px), var(--kb-ascii-rule) repeat-x left bottom / 7px 12px;
}
:root[data-kb-mode="ascii"] .home-page.editorial-page .elsewhere .editorial-number::before { content:"["; }
:root[data-kb-mode="ascii"] .home-page.editorial-page .elsewhere .editorial-number::after { content:"]"; }
:root[data-kb-mode="ascii"] .home-page.editorial-page .elsewhere .editorial-number { font-size:11px; }
:root[data-kb-mode="ascii"] .home-page.editorial-page .elsewhere > a.link-button { grid-template-columns:34px 1fr 24px; }

/* Playground: character-framed cards */
:root[data-kb-mode="ascii"] .playground-gallery .pg-card {
  border-style:solid; border-width:12px 7px; border-color:transparent;
  border-image:var(--kb-ascii-frame) 12 7 round;
  background:color-mix(in srgb, var(--kb-bg) 88%, transparent);
  transform:none;
}
:root[data-kb-mode="ascii"] .playground-gallery .pg-card:is(:hover,:focus-visible) { background:var(--kb-control-active); }
:root[data-kb-mode="ascii"] .playground-gallery :is(.pg-badge,.pg-art-label,.pg-cover-meta) {
  background:var(--kb-bg); color:var(--kb-fg); border:0; -webkit-backdrop-filter:none; backdrop-filter:none;
}
:root[data-kb-mode="ascii"] .playground-gallery .pg-badge i { background:var(--kb-purple); animation:kb-ascii-blink 1.1s steps(1) infinite; }
:root[data-kb-mode="ascii"] .playground-gallery .pg-play { width:auto; height:auto; padding:4px 6px; background:var(--kb-bg); color:var(--kb-fg); font-family:var(--kb-mono); }
:root[data-kb-mode="ascii"] .playground-gallery :is(.pg-tag,.pg-cta,.pg-chips li) { border:0; background:transparent; color:var(--kb-purple); padding-inline:0; }
:root[data-kb-mode="ascii"] .playground-gallery :is(.pg-tag,.pg-cta)::before { content:"[ "; }
:root[data-kb-mode="ascii"] .playground-gallery :is(.pg-tag,.pg-cta)::after { content:" ]"; }
:root[data-kb-mode="ascii"] .playground-gallery .pg-chips li::before { content:"+ "; color:var(--kb-muted); }
:root[data-kb-mode="ascii"] .playground-gallery .pg-card:is(:hover,:focus-visible) :is(.pg-tag,.pg-cta) { color:var(--kb-fg); }
:root[data-kb-mode="ascii"] .playground-gallery .pg-card--game .pg-card-body { padding-top:12px; }
:root[data-kb-mode="ascii"] .playground-gallery .pg-card p { font-size:12px; }

/* Contact form */
:root[data-kb-mode="ascii"] .contact-page.editorial-page #contact-form :is(input,textarea,button) { font-family:var(--kb-mono); }
:root[data-kb-mode="ascii"] .contact-page.editorial-page #contact-form :is(input,textarea) {
  border:0; padding-bottom:8px; background:var(--kb-ascii-rule) repeat-x left bottom / 7px 12px;
}
:root[data-kb-mode="ascii"] .contact-page.editorial-page #contact-form :is(input,textarea):focus { background:var(--kb-ascii-rule) repeat-x left bottom / 7px 12px; }
:root[data-kb-mode="ascii"] .contact-page.editorial-page #contact-form label::before { content:"> "; color:var(--kb-purple); }
:root[data-kb-mode="ascii"] .contact-page.editorial-page #contact-form button.link-button { border:1px dashed var(--kb-purple); background:transparent; color:var(--kb-fg); }
:root[data-kb-mode="ascii"] .contact-page.editorial-page #contact-form button.link-button:hover { background:var(--kb-purple); color:var(--kb-bg); }
:root[data-kb-mode="ascii"] .contact-page.editorial-page #contact-form button.link-button > span:first-child::before { content:"[ "; }
:root[data-kb-mode="ascii"] .contact-page.editorial-page #contact-form button.link-button > span:last-child::after { content:" ]"; }

/* Switcher */
:root[data-kb-mode="ascii"] .kb-mode-switch__toggle { border-style:dashed; font-family:var(--kb-mono); font-weight:500; letter-spacing:.04em; }
:root[data-kb-mode="ascii"] .kb-mode-switch__toggle::before { content:"["; color:var(--kb-muted); }
:root[data-kb-mode="ascii"] .kb-mode-switch__value::after { content:"]"; color:var(--kb-muted); margin-left:8px; }
:root[data-kb-mode="ascii"] .kb-mode-switch__toggle .kb-mode-switch__chevron { display:none; }
:root[data-kb-mode="ascii"] .kb-mode-switch__menu { border-style:dashed; }
:root[data-kb-mode="ascii"] .kb-mode-switch__item { font-family:var(--kb-mono); font-weight:500; }
:root[data-kb-mode="ascii"] .kb-mode-switch__item[aria-checked="true"]::after { content:"*"; width:auto; height:auto; background:none; color:var(--kb-purple); }

@keyframes kb-ascii-blink { 50% { opacity:0; } }
@media(prefers-reduced-motion:reduce) {
  :root[data-kb-mode="ascii"] .home-page.editorial-page .profile-hero .value-statement::after,
  :root[data-kb-mode="ascii"] .playground-gallery .pg-badge i { animation:none; }
}

/* --------------------------------------------------------------------------
   4. Ink: Bestiary paper, black ink, pen-drawn rules. Card art stays as it is.
   -------------------------------------------------------------------------- */
:root[data-kb-mode="ink"] {
  --kb-ink-paper:#ece6d6;
  --kb-ink-paper-deep:#e1d9c4;
  --kb-ink:#0b0b0d;
  --kb-ink-soft:#4b473f;
  --kb-ink-faint:#8b8577;
  --kb-ink-seal:#9b2a1f;
  /* The shared tokens follow, so token-based layers turn to paper and ink on their own. */
  --kb-bg:var(--kb-ink-paper);
  --kb-fg:var(--kb-ink);
  --kb-purple:var(--kb-ink);
  --kb-accent:var(--kb-ink-seal);
  --kb-muted:var(--kb-ink-soft);
  --kb-secondary:var(--kb-ink-soft);
  --kb-rule:rgba(11,11,13,.62);
  --kb-rule-soft:rgba(11,11,13,.38);
  --kb-surface:var(--kb-ink-paper-deep);
  --kb-surface-hover:#d6cdb5;
  --kb-border:rgba(11,11,13,.28);
  --kb-error:var(--kb-ink-seal);
  --kb-focus:var(--kb-ink);
  --kb-control-border:var(--kb-ink);
  --kb-control-hover:#d6cdb5;
  --kb-control-active:#cfc5ab;
  --kb-page-background:var(--kb-ink-paper);
  --kb-ink-line:linear-gradient(var(--kb-ink),var(--kb-ink)) center / 100% 1.6px no-repeat;
  color-scheme:light;
}
:root[data-kb-mode="ink"] body:has(.site-layout),
:root[data-kb-mode="ink"] .site-layout { color:var(--kb-ink); }
:root[data-kb-mode="ink"] ::selection { background:var(--kb-ink); color:var(--kb-ink-paper); }

/* Headings: ink that bled into the paper */
:root[data-kb-mode="ink"] .site-layout h1,
:root[data-kb-mode="ink"] .site-layout h1 * { color:var(--kb-ink); }
:root[data-kb-mode="ink"] .site-layout h1 { filter:url(#kb-ink-bleed); }
:root[data-kb-mode="ink"] .home-page .neon-word:nth-child(2) { color:var(--kb-ink); }

/* Text on paper */
:root[data-kb-mode="ink"] .site-layout :is(.bio,.pg-description,.pg-card p,#thank-you p) { color:var(--kb-ink-soft); }
:root[data-kb-mode="ink"] .home-page.editorial-page .profile-hero .value-statement { color:var(--kb-ink); }
:root[data-kb-mode="ink"] .site-layout :is(.editorial-kicker,.pg-eyebrow,.pg-count,.site-back,.editorial-topline) { color:var(--kb-ink); }
:root[data-kb-mode="ink"] .site-top .site-back:hover { color:var(--kb-ink-seal); }

/* Pen-drawn rules replace hairlines (a pseudo line keeps the filter off the text) */
:root[data-kb-mode="ink"] main.site-layout.site-layout > .site-top { border-bottom-color:transparent; }
:root[data-kb-mode="ink"] main.site-layout.site-layout > .site-footer { border-top-color:transparent; position:relative; }
:root[data-kb-mode="ink"] .playground-gallery .pg-count { border-bottom-color:transparent; position:relative; }
:root[data-kb-mode="ink"] main.site-layout.site-layout > .site-top::after,
:root[data-kb-mode="ink"] main.site-layout.site-layout > .site-footer::before,
:root[data-kb-mode="ink"] .playground-gallery .pg-count::after {
  content:""; position:absolute; left:0; right:0; height:8px; pointer-events:none;
  background:var(--kb-ink-line); filter:url(#kb-ink-rough);
}
:root[data-kb-mode="ink"] main.site-layout.site-layout > .site-top::after,
:root[data-kb-mode="ink"] .playground-gallery .pg-count::after { bottom:-4px; }
:root[data-kb-mode="ink"] main.site-layout.site-layout > .site-footer::before { top:-4px; opacity:.55; }

/* Home and 404 link list */
:root[data-kb-mode="ink"] .home-page.editorial-page .elsewhere > a.link-button,
:root[data-kb-mode="ink"] .home-page.editorial-page .elsewhere > a.link-button:first-of-type {
  position:relative; border-color:transparent; color:var(--kb-ink);
}
:root[data-kb-mode="ink"] .home-page.editorial-page .elsewhere > a.link-button::after,
:root[data-kb-mode="ink"] .home-page.editorial-page .elsewhere > a.link-button:first-of-type::before {
  content:""; position:absolute; left:0; right:0; height:8px; pointer-events:none;
  background:var(--kb-ink-line); filter:url(#kb-ink-rough);
}
:root[data-kb-mode="ink"] .home-page.editorial-page .elsewhere > a.link-button::after { bottom:-4px; }
:root[data-kb-mode="ink"] .home-page.editorial-page .elsewhere > a.link-button:first-of-type::before { top:-4px; }
:root[data-kb-mode="ink"] .home-page.editorial-page .elsewhere > a.link-button:is(:hover,:focus-visible) {
  background:rgba(11,11,13,.06); border-bottom-color:transparent; color:var(--kb-ink-seal);
}
:root[data-kb-mode="ink"] .home-page.editorial-page .elsewhere > a.link-button:is(:hover,:focus-visible) .link-arrow { color:var(--kb-ink-seal); }
:root[data-kb-mode="ink"] .home-page.editorial-page .elsewhere .editorial-number { color:var(--kb-ink-faint); }
:root[data-kb-mode="ink"] .home-page.editorial-page .elsewhere > a.link-button > .link-arrow { color:var(--kb-ink); }

/* Playground: paper cards with a pen frame; the cover art inside is untouched */
:root[data-kb-mode="ink"] .playground-gallery .pg-card,
:root[data-kb-mode="ink"] .playground-gallery :is(.pg-card--game,.pg-card--vigil) {
  position:relative; border-color:transparent; border-radius:4px;
  background:var(--kb-ink-paper-deep); box-shadow:none; color:var(--kb-ink);
}
:root[data-kb-mode="ink"] .playground-gallery .pg-card::after {
  content:""; position:absolute; inset:2px; z-index:3; pointer-events:none;
  border:1.6px solid var(--kb-ink); border-radius:3px; filter:url(#kb-ink-rough);
}
:root[data-kb-mode="ink"] .playground-gallery .pg-card:is(:hover,:focus-visible) {
  border-color:transparent; box-shadow:none; background:var(--kb-ink-paper); transform:translateY(-2px) rotate(-.3deg);
}
:root[data-kb-mode="ink"] .playground-gallery h2 { color:var(--kb-ink); }
:root[data-kb-mode="ink"] .playground-gallery :is(.pg-free,.pg-card--vigil .pg-free) { color:var(--kb-ink-soft); }
:root[data-kb-mode="ink"] .playground-gallery :is(.pg-chips li,.pg-card--vigil .pg-chips li) {
  color:var(--kb-ink); background:transparent; border-color:var(--kb-ink-faint);
}
:root[data-kb-mode="ink"] .playground-gallery :is(.pg-cta,.pg-card--vigil .pg-cta) { background:var(--kb-ink); color:var(--kb-ink-paper); }
:root[data-kb-mode="ink"] .playground-gallery .pg-card:hover :is(.pg-cta,.pg-card--vigil .pg-cta),
:root[data-kb-mode="ink"] .playground-gallery .pg-card--game:hover .pg-cta { background:var(--kb-ink-seal); color:var(--kb-ink-paper); }
:root[data-kb-mode="ink"] .playground-gallery .pg-tag { color:var(--kb-ink); border-color:var(--kb-ink); }
:root[data-kb-mode="ink"] .playground-gallery .pg-card:is(:hover,:focus-visible) .pg-tag { background:var(--kb-ink); color:var(--kb-ink-paper); }
/* UI chips that sit on the art read as paper labels */
:root[data-kb-mode="ink"] .playground-gallery :is(.pg-badge,.pg-card--vigil .pg-badge) { background:var(--kb-ink-paper); color:var(--kb-ink); }
:root[data-kb-mode="ink"] .playground-gallery :is(.pg-badge i,.pg-card--vigil .pg-badge i) { background:var(--kb-ink-seal); }
:root[data-kb-mode="ink"] .playground-gallery :is(.pg-play,.pg-card--vigil .pg-play) { background:var(--kb-ink-paper); color:var(--kb-ink); box-shadow:0 0 0 5px rgba(236,230,214,.25); }
:root[data-kb-mode="ink"] .playground-gallery .pg-art-label { background:var(--kb-ink-paper); color:var(--kb-ink); border-color:var(--kb-ink); -webkit-backdrop-filter:none; backdrop-filter:none; }

/* Say Hello form */
:root[data-kb-mode="ink"] .contact-page.editorial-page #contact-form label { color:var(--kb-ink); }
:root[data-kb-mode="ink"] .contact-page.editorial-page #contact-form :is(input,textarea) { color:var(--kb-ink); border-bottom:1.6px solid var(--kb-ink); }
:root[data-kb-mode="ink"] .contact-page.editorial-page #contact-form :is(input,textarea)::placeholder { color:var(--kb-ink-faint); }
:root[data-kb-mode="ink"] .contact-page.editorial-page #contact-form :is(input,textarea):focus { border-bottom-color:var(--kb-ink-seal); }
:root[data-kb-mode="ink"] .contact-page.editorial-page #contact-form .input-error { border-bottom:1.6px solid var(--kb-ink-seal) !important; background:transparent; }
:root[data-kb-mode="ink"] .contact-page.editorial-page #contact-form button.link-button { background:var(--kb-ink); color:var(--kb-ink-paper); }
:root[data-kb-mode="ink"] .contact-page.editorial-page #contact-form button.link-button:hover { background:var(--kb-ink-seal); }

/* Switcher */
:root[data-kb-mode="ink"] .kb-mode-switch__toggle { background:var(--kb-ink-paper); border-color:var(--kb-ink); color:var(--kb-ink); }
:root[data-kb-mode="ink"] .kb-mode-switch__menu { background:var(--kb-ink-paper); border-color:var(--kb-ink); box-shadow:3px 4px 0 rgba(11,11,13,.85); }
:root[data-kb-mode="ink"] .kb-mode-switch__item[aria-checked="true"]::after { background:var(--kb-ink-seal); }

@media(prefers-reduced-motion:reduce) {
  :root[data-kb-mode="ink"] .playground-gallery .pg-card:is(:hover,:focus-visible) { transform:none; }
}

/* --------------------------------------------------------------------------
   5. Switching between modes
   -------------------------------------------------------------------------- */
@property --kb-reveal { syntax:"<length>"; inherits:false; initial-value:0px; }
::view-transition-group(root) { animation-duration:.48s; }
::view-transition-old(root),
::view-transition-new(root) { animation:none; mix-blend-mode:normal; }
/* Normal and ASCII: soft crossfade (ASCII headings scramble in on top) */
:root[data-kb-transition="normal"]::view-transition-old(root),
:root[data-kb-transition="ascii"]::view-transition-old(root),
:root[data-kb-transition="theme"]::view-transition-old(root) { animation:kb-mode-out .42s ease both; }
:root[data-kb-transition="normal"]::view-transition-new(root),
:root[data-kb-transition="ascii"]::view-transition-new(root),
:root[data-kb-transition="theme"]::view-transition-new(root) { animation:kb-mode-in .42s ease both; }
/* Pixel: the new view grows in as a grid of square blocks */
:root[data-kb-transition="pixel"]::view-transition-new(root) {
  -webkit-mask:
    repeating-linear-gradient(90deg,#000 0 var(--kb-reveal),transparent var(--kb-reveal) 16px),
    repeating-linear-gradient(#000 0 var(--kb-reveal),transparent var(--kb-reveal) 16px);
  -webkit-mask-composite:source-in;
  mask:
    repeating-linear-gradient(90deg,#000 0 var(--kb-reveal),transparent var(--kb-reveal) 16px),
    repeating-linear-gradient(#000 0 var(--kb-reveal),transparent var(--kb-reveal) 16px);
  mask-composite:intersect;
  animation:kb-pixel-reveal .48s steps(8,end) both;
}
:root[data-kb-transition="pixel"]::view-transition-old(root) { animation:kb-mode-out .48s steps(4,end) both; }
@keyframes kb-pixel-reveal { from { --kb-reveal:0px; } to { --kb-reveal:16px; } }
@keyframes kb-mode-out { to { opacity:0; } }
@keyframes kb-mode-in { from { opacity:0; } }
/* Ink: the new page spreads out from the switch like a drop of ink */
@property --kb-ink-size { syntax:"<length>"; inherits:false; initial-value:0px; }
:root[data-kb-transition="ink"]::view-transition-new(root) {
  --kb-ink-blot:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 3c9 0 13 7 21 9s17-1 20 8-3 14-1 22 9 15 4 23-14 6-19 13-6 17-16 19-13-6-21-7-17 5-22-3 1-15-2-23-12-14-8-22 13-7 17-14 5-17 14-21 6-4 13-4z'/%3E%3C/svg%3E");
  -webkit-mask:var(--kb-ink-blot) no-repeat;
  mask:var(--kb-ink-blot) no-repeat;
  -webkit-mask-size:var(--kb-ink-size) var(--kb-ink-size);
  mask-size:var(--kb-ink-size) var(--kb-ink-size);
  -webkit-mask-position:calc(var(--kb-ink-x,90%) - var(--kb-ink-size) / 2) calc(var(--kb-ink-y,40px) - var(--kb-ink-size) / 2);
  mask-position:calc(var(--kb-ink-x,90%) - var(--kb-ink-size) / 2) calc(var(--kb-ink-y,40px) - var(--kb-ink-size) / 2);
  animation:kb-ink-spread .62s cubic-bezier(.3,.1,.2,1) both;
}
:root[data-kb-transition="ink"]::view-transition-old(root) { animation:none; }
:root[data-kb-transition="ink"]::view-transition-group(root) { animation-duration:.62s; }
@keyframes kb-ink-spread { from { --kb-ink-size:0px; } to { --kb-ink-size:320vmax; } }
/* Browsers without View Transitions */
.kb-mode-fading .site-layout { animation:kb-mode-in .4s ease both; }
.kb-mode-fading .kb-mode-field { animation:kb-mode-in .4s ease both; }
@media(prefers-reduced-motion:reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation:none !important; }
}

/* Playground category filter chips per view mode */
:root[data-kb-mode="pixel"] .playground-gallery .pg-filter__chip{border-radius:0;border-width:2px;font-family:var(--kb-pixel-display);font-weight:400;font-size:9px;letter-spacing:.06em;box-shadow:2px 2px 0 var(--kb-control-border)}
:root[data-kb-mode="pixel"] .playground-gallery .pg-filter__chip[aria-pressed="true"]{box-shadow:3px 3px 0 var(--kb-purple)}
:root[data-kb-mode="ascii"] .playground-gallery .pg-filter__chip{border-style:dashed;border-radius:0;background:transparent;font-family:var(--kb-mono);font-weight:500;letter-spacing:0;padding:0 6px;gap:3px;font-size:9.5px}
:root[data-kb-mode="ascii"] .playground-gallery .pg-filter__chip::before{content:"[";color:var(--kb-muted)}
:root[data-kb-mode="ascii"] .playground-gallery .pg-filter__chip .pg-filter__n::after{content:"]";color:var(--kb-muted);margin-left:4px}
:root[data-kb-mode="ascii"] .playground-gallery .pg-filter__chip[aria-pressed="true"]{border-style:solid;background:transparent;color:var(--kb-fg);border-color:var(--kb-purple)}

/* --------------------------------------------------------------------------
   6. 3D: red/cyan anaglyph for 3D glasses (red lens left, cyan lens right).
   Headings and card frames float in front of the page, the field sits behind it,
   body text stays on the screen plane so it still reads without glasses.
   Card art (covers, .pg-art) is never touched. Colour themes don't apply here:
   anaglyph needs a neutral dark ground.
   -------------------------------------------------------------------------- */
:root[data-kb-mode="anaglyph"] {
  --kb-bg:#0a0a0c; --kb-surface:#141417; --kb-fg:#ececec; --kb-muted:#9a9a9a; --kb-secondary:#b8b8b8;
  --kb-purple:#e6e6e6; --kb-accent:#d8d8d8; --kb-rule:rgba(255,255,255,.22); --kb-control-border:#3a3a40;
  --kb-on-accent:#0a0a0c; --kb-accent-hover:#ffffff;
  --kb-3d-red:rgba(255,40,40,.9); --kb-3d-cyan:rgba(0,230,255,.9);
  --kb-3d-near:3px;
  color-scheme:dark;
}
:root[data-kb-mode="anaglyph"] .kb-mode-field {
  display:block; position:fixed; inset:0; z-index:-1; width:100vw; height:100vh; pointer-events:none;
}
:root[data-kb-mode="anaglyph"] main.site-layout.site-layout::before { display:none; }
:root[data-kb-mode="anaglyph"] { background:var(--kb-bg); }
:root[data-kb-mode="anaglyph"] body:has(.site-layout) { background:transparent; }

/* Headings: real text hidden under a red and a cyan copy, screen-blended so overlaps turn white */
:root[data-kb-mode="anaglyph"] .site-layout :is(h1,h2):has(> .kb-3d-heading) { position:relative; color:transparent; }
:root[data-kb-mode="anaglyph"] .site-layout :is(h1,h2):has(> .kb-3d-heading) * { color:transparent; }
:root[data-kb-mode="anaglyph"] .site-layout .kb-3d-heading { display:block; position:absolute; inset:0; pointer-events:none; isolation:isolate; }
:root[data-kb-mode="anaglyph"] .site-layout .kb-3d-heading > span { position:absolute; inset:0; display:inherit; flex-direction:inherit; align-items:inherit; justify-content:inherit; gap:inherit; text-align:inherit; mix-blend-mode:screen; white-space:inherit; }
:root[data-kb-mode="anaglyph"] .site-layout .kb-3d-heading > span * { color:inherit !important; text-shadow:none !important; -webkit-text-fill-color:currentColor; }
:root[data-kb-mode="anaglyph"] .site-layout .kb-3d-heading > .kb-3d-l { color:var(--kb-3d-red) !important; transform:translateX(calc(var(--kb-3d-near) / 2)); }
:root[data-kb-mode="anaglyph"] .site-layout .kb-3d-heading > .kb-3d-r { color:var(--kb-3d-cyan) !important; transform:translateX(calc(var(--kb-3d-near) / -2)); }
:root[data-kb-mode="anaglyph"] .site-layout h1 { --kb-3d-near:5px; }

/* Card frames and controls float a little in front */
:root[data-kb-mode="anaglyph"] .site-layout :is(.pg-card,.kb-button,.link-button) {
  box-shadow:1.5px 0 0 var(--kb-3d-red), -1.5px 0 0 var(--kb-3d-cyan);
}
:root[data-kb-mode="anaglyph"] .site-layout :is(.pg-card,.kb-button,.link-button):hover {
  box-shadow:3px 0 0 var(--kb-3d-red), -3px 0 0 var(--kb-3d-cyan);
}
/* Rules sit just behind the text */
:root[data-kb-mode="anaglyph"] .site-layout hr,
:root[data-kb-mode="anaglyph"] .site-layout .site-top { border-color:rgba(255,255,255,.18); }

.kb-mode-switch__glyph--anaglyph { color:#ececec; text-shadow:1.5px 0 rgba(255,40,40,.95), -1.5px 0 rgba(0,230,255,.95); font-weight:900; }
.kb-3d-heading { display:none; }

/* Switching into or out of 3D: crossfade */
:root[data-kb-transition="anaglyph"]::view-transition-old(root) { animation:kb-mode-out .42s ease both; }
:root[data-kb-transition="anaglyph"]::view-transition-new(root) { animation:kb-mode-in .42s ease both; }