/* ============================================================
   CHANNEL 88 — Gurnerman VHS / analog-horror skin
   One shared theme, loaded LAST on every page.

   The rule this file follows: the chrome is generic, the content
   is not. Overlays, OSD and palette apply everywhere; components
   are styled for what they actually hold, and each strand of the
   site keeps its own channel colour.

     01  Tokens + channel accents      11  Recovered footage
     02  Global flattening             12  P188 preview (home)
     03  CRT atmosphere + starfield    13  GSA — agency channel
     04  Camcorder OSD chrome          14  Footer
     05  Typography                    15  CoinHawk — teletext P188
     06  Header / navigation           16  Standalone game pages
     07  Buttons + forms               17  Content animation
     08  Section furniture             18  Chrome glitch layer
     09  The tape shelf                19  Mobile
     10  Panels, dossiers, articles    20  Reduced motion
   ============================================================ */

/* ---------- 01 · TOKENS + CHANNEL ACCENTS -------------------------------- */
:root{
  --c88-bg:#050505;
  --c88-panel:#101010;
  --c88-panel-2:#0a0a0a;
  --c88-line:#3a3934;
  --c88-line-soft:#26251f;

  --c88-ink:#e8e6df;
  --c88-dim:#bdb9ac;
  --c88-faint:#7d7a70;

  --c88-red:#ff3b30;
  --c88-red-soft:#ff5d52;
  --c88-green:#35d94c;
  --c88-cyan:#4cc9ff;
  --c88-yellow:#f5e13a;

  --c88-bar-blue:#001a4d;
  --c88-bar-green:#043c14;
  --c88-bar-amber:#3d2c00;

  --c88-osd:"VT323","IBM Plex Mono",ui-monospace,monospace;
  --c88-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  /* shared chrome — identical on every page, never overridden per page */
  --c88-chrome:"VT323","IBM Plex Mono",ui-monospace,monospace;
  --c88-chrome-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --c88-bar-h:26px;
  --c88-burn:1px 1px 0 #000,-1px 1px 0 #000,1px -1px 0 #000,-1px -1px 0 #000,0 0 4px rgba(0,0,0,.9);

  /* the default channel; strands below override it and it inherits down */
  --c88-accent:#ff3b30;
  --c88-accent-ink:#050505;

  /* ---- legacy site tokens, re-pointed at the Channel 88 palette ---- */
  --bg:#050505;      --bg-2:#0a0a0a;
  --ink:#e8e6df;     --muted:#bdb9ac;    --faint:#7d7a70;
  --red:#ff3b30;     --red-hot:#ff5d52;  --red-deep:#7a1a14;  --ember:#f5e13a;
  --hawk:#ff3b30;    --hawk-hot:#f5e13a;
  --chrome-1:#e8e6df; --chrome-2:#bdb9ac; --chrome-3:#7d7a70;
  --glass:#101010;   --glass-2:#161616;
  --line:#3a3934;    --line-soft:#26251f;
  --maxw:1400px;
  --radius:0;        --radius-lg:0;
  --shadow:none;     --shadow-red:none;
  --gsa-violet:#4cc9ff; --gsa-violet-hot:#4cc9ff;

  --font-display:var(--c88-osd);
  --font-brand:var(--c88-osd);
  --font-rough:var(--c88-osd);
  --font-accent:var(--c88-osd);
  --font-label:var(--c88-mono);
  --font-body:var(--c88-mono);

  color-scheme:dark;
}

/* each strand of the site broadcasts on its own colour */
body.ch88 .gsa-release-feature,
body.ch88 .gsa-home-release,
body.ch88 .gsa-game-hero,
body.ch88 .gsa-game-section,
body.ch88 .gsa-final-launch,
body.ch88.gsa-game-page,
body.ch88[data-ch88-tape="15"]{ --c88-accent:#4cc9ff; }

body.ch88 .coinhawk-feature,
body.ch88 .coinhawk-launchbar,
body.ch88 .coinhawk-preview{ --c88-accent:#f5e13a; }

body.ch88[data-ch88-tape="03"],          /* books   */
body.ch88[data-ch88-tape="13"],
body.ch88[data-ch88-tape="14"]{ --c88-accent:#35d94c; }

body.ch88[data-ch88-tape="02"],          /* the lore */
body.ch88[data-ch88-tape="06"]{ --c88-accent:#4cc9ff; }

body.ch88[data-ch88-tape="05"]{ --c88-accent:#f5e13a; }   /* transmissions */

/* ---------- 02 · GLOBAL FLATTENING -------------------------------------- */
/* No rounded cards, no glassmorphism, no coloured glow. */
body.ch88 *,
body.ch88 *::before,
body.ch88 *::after{
  border-radius:0 !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  box-shadow:none !important;
  filter:none;
}

body.ch88{
  background:var(--c88-bg);
  color:var(--c88-ink);
  font-family:var(--c88-mono);
  font-size:.86rem;
  line-height:1.68;
  padding-top:var(--c88-bar-h);
  padding-bottom:var(--c88-bar-h);
  overflow-x:hidden;
}

body.ch88 ::selection{ background:var(--c88-red); color:#050505; }
body.ch88 :focus-visible{ outline:2px solid var(--c88-yellow); outline-offset:2px; }
body.ch88 .brand::after{ display:none !important; }

/* ---------- 03 · CRT ATMOSPHERE + STARFIELD ----------------------------- */
/* The starfield stays — it is the deep-space bed the whole site was built
   on. It just gets pulled back behind the tube so it reads as signal. */
body.ch88::before{
  background:
    radial-gradient(1200px 800px at 50% -10%, rgba(255,59,48,.10), transparent 62%),
    radial-gradient(900px 700px at 8% 100%, rgba(76,201,255,.06), transparent 58%),
    var(--c88-bg) !important;
  z-index:-4 !important;
}
body.ch88::after{ display:none !important; }
body.ch88 #starfield{
  display:block !important;
  z-index:-3 !important;
  opacity:.5;
  animation:c88Stars 9s steps(1,end) infinite;
}
@keyframes c88Stars{
  0%,92%{ opacity:.5; }
  93%   { opacity:.18; }
  94%   { opacity:.62; }
  95%,100%{ opacity:.5; }
}

/* scanlines and vignette live on <html> so they never fight a page's own
   body pseudo-elements */
html.ch88::before,
html.ch88::after{
  content:"";
  position:fixed;
  left:0; right:0;
  pointer-events:none;
}
html.ch88::before{
  top:-8px; bottom:-8px;
  z-index:9990;
  background:repeating-linear-gradient(0deg,
    rgba(255,255,255,.045) 0 1px,
    transparent 1px 4px);
  will-change:transform;
  animation:c88Scan 1.6s linear infinite;
}
@keyframes c88Scan{
  from{ transform:translate3d(0,0,0); }
  to  { transform:translate3d(0,4px,0); }
}
html.ch88::after{
  top:0; bottom:0;
  z-index:9991;
  background:radial-gradient(120% 100% at 50% 50%,
    transparent 40%,
    rgba(0,0,0,.34) 78%,
    rgba(0,0,0,.72) 100%);
  animation:c88Hum 5.5s ease-in-out infinite;
}
@keyframes c88Hum{
  0%,100%{ opacity:1; }
  47%    { opacity:.88; }
  49%    { opacity:1; }
  62%    { opacity:.93; }
}

.c88-track{
  position:fixed;
  left:0; right:0; top:0;
  height:130px;
  z-index:9989;
  pointer-events:none;
  background:linear-gradient(180deg,
    transparent,
    rgba(255,255,255,.02) 34%,
    rgba(76,201,255,.05) 47%,
    rgba(255,255,255,.07) 50%,
    rgba(255,59,48,.05) 53%,
    rgba(255,255,255,.02) 66%,
    transparent);
  will-change:transform;
  animation:c88Track 7s linear infinite;
}
@keyframes c88Track{
  0%  { transform:translate3d(0,-150px,0) scaleY(1);   opacity:.85; }
  46% { transform:translate3d(0,44vh,0)   scaleY(1);   opacity:.85; }
  50% { transform:translate3d(0,50vh,0)   scaleY(2.4); opacity:1; }
  54% { transform:translate3d(0,56vh,0)   scaleY(1);   opacity:.85; }
  100%{ transform:translate3d(0,100vh,0)  scaleY(1);   opacity:.85; }
}

.c88-noise{
  position:fixed;
  inset:-60px;
  z-index:9988;
  pointer-events:none;
  opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  will-change:transform;
  animation:c88Noise .32s steps(1,end) infinite, c88NoiseLvl 6s ease-in-out infinite;
}
@keyframes c88Noise{
  0%  { transform:translate3d(0,0,0); }
  20% { transform:translate3d(-28px,14px,0); }
  40% { transform:translate3d(19px,-31px,0); }
  60% { transform:translate3d(-13px,-9px,0); }
  80% { transform:translate3d(34px,22px,0); }
  100%{ transform:translate3d(-21px,7px,0); }
}
@keyframes c88NoiseLvl{
  0%,100%{ opacity:.05; }
  38%    { opacity:.09; }
  71%    { opacity:.035; }
}

.c88-tear{
  position:fixed;
  left:0; right:0; top:0;
  z-index:9992;
  height:14px;
  pointer-events:none;
  opacity:0;
  background:linear-gradient(180deg,
    rgba(255,255,255,.5),
    rgba(76,201,255,.28) 40%,
    rgba(255,59,48,.28) 60%,
    rgba(255,255,255,.4));
  mix-blend-mode:screen;
  will-change:transform,opacity;
  animation:c88Tear 9s steps(1,end) infinite;
}
.c88-tear.t2{ height:7px; animation-duration:13s; animation-delay:-4.5s; }
@keyframes c88Tear{
  0%,8%{ opacity:0; transform:translate3d(0,18vh,0) scaleY(1); }
  9%   { opacity:.9; transform:translate3d(-14px,18vh,0) scaleY(1.6); }
  10%  { opacity:0; transform:translate3d(0,18vh,0) scaleY(1); }
  33%  { opacity:0; transform:translate3d(0,63vh,0) scaleY(1); }
  34%  { opacity:.75; transform:translate3d(22px,63vh,0) scaleY(1); }
  35%  { opacity:0; transform:translate3d(0,63vh,0) scaleY(1); }
  71%  { opacity:0; transform:translate3d(0,38vh,0) scaleY(1); }
  72%  { opacity:.95; transform:translate3d(-9px,38vh,0) scaleY(2.2); }
  73.5%{ opacity:0; transform:translate3d(0,38vh,0) scaleY(1); }
  100% { opacity:0; transform:translate3d(0,84vh,0) scaleY(1); }
}

.c88-flash{
  position:fixed; inset:0;
  z-index:9994;
  pointer-events:none;
  opacity:0;
  background:#e8e6df;
  animation:c88Flash 17s steps(1,end) infinite;
}
@keyframes c88Flash{
  0%,22.4%  { opacity:0; }
  22.5%     { opacity:.2; }
  22.8%     { opacity:0; }
  23.1%     { opacity:.11; }
  23.4%,66.6%{ opacity:0; }
  66.8%     { opacity:.26; }
  67.1%,100%{ opacity:0; }
}

.c88-headswitch{
  position:fixed;
  left:0; right:0;
  bottom:var(--c88-bar-h);
  height:11px;
  z-index:9992;
  pointer-events:none;
  opacity:.5;
  background:
    repeating-linear-gradient(90deg,
      rgba(255,255,255,.4) 0 2px,
      transparent 2px 5px,
      rgba(255,255,255,.22) 5px 6px,
      transparent 6px 11px),
    rgba(30,30,30,.65);
  will-change:transform;
  animation:c88Head .18s steps(1,end) infinite;
}
@keyframes c88Head{
  0%  { transform:translate3d(0,0,0); }
  33% { transform:translate3d(-7px,0,0); }
  66% { transform:translate3d(5px,0,0); }
  100%{ transform:translate3d(-3px,0,0); }
}

/* ---------- 04 · CAMCORDER OSD CHROME ----------------------------------- */
.c88-osd{
  position:fixed;
  left:0; right:0;
  z-index:9995;
  pointer-events:none;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:10px;
  height:var(--c88-bar-h);
  padding:0 clamp(8px,2vw,20px);
  background:rgba(5,5,5,.94);
  border-color:var(--c88-line);
  border-style:solid;
  border-width:0;
  font-family:var(--c88-chrome);
  font-size:1.19rem;
  line-height:1;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--c88-dim);
  white-space:nowrap;
  overflow:hidden;
}
.c88-osd-top{ top:0; border-bottom-width:1px; }
.c88-osd-bot{ bottom:0; border-top-width:1px; }
.c88-osd b{ font-weight:400; color:var(--c88-ink); }
.c88-osd .c88-l{ justify-self:start; }
.c88-osd .c88-c{ justify-self:center; color:var(--c88-ink); }
.c88-osd .c88-r{ justify-self:end; }
.c88-osd .c88-c span{ color:var(--c88-yellow); }
.c88-osd-bot .c88-c{ color:var(--c88-faint); letter-spacing:.14em; }

.c88-rec{ color:var(--c88-red); display:inline-flex; align-items:center; gap:7px; }
.c88-rec i{
  width:9px; height:9px;
  border-radius:50% !important;
  background:var(--c88-red);
  animation:c88Rec 1.5s steps(1,end) infinite;
}
@keyframes c88Rec{ 0%,55%{opacity:1} 56%,100%{opacity:.12} }

.c88-stamp{
  position:fixed;
  left:clamp(8px,2vw,20px);
  bottom:calc(var(--c88-bar-h) + 20px);
  z-index:9993;
  pointer-events:none;
  font-family:var(--c88-chrome);
  font-size:1.13rem;
  line-height:1;
  letter-spacing:.05em;
  color:#fff;
  text-shadow:var(--c88-burn);
}

/* ---------- 05 · TYPOGRAPHY --------------------------------------------- */
body.ch88 h1,
body.ch88 h2,
body.ch88 h3,
body.ch88 h4{
  font-family:var(--c88-osd);
  font-weight:400;
  line-height:1;
  letter-spacing:.02em;
  text-transform:uppercase;
  color:var(--c88-ink);
}
body.ch88 h1{ font-size:clamp(2.3rem,5.2vw,4.2rem); margin:0 0 .2em; }
body.ch88 h2{ font-size:clamp(1.6rem,2.9vw,2.3rem); margin:0 0 .32em; }
body.ch88 h3{ font-size:clamp(1.15rem,1.7vw,1.45rem); margin:0 0 .38em; }

body.ch88 h1,
body.ch88 .c88-split{
  position:relative;
  text-shadow:3px 0 0 rgba(255,0,60,.75), -3px 0 0 rgba(0,220,255,.75);
  animation:c88Split 4.2s ease-in-out infinite;
}
@keyframes c88Split{
  0%,46%,52%,79%,82%,100%{ text-shadow:3px 0 0 rgba(255,0,60,.75), -3px 0 0 rgba(0,220,255,.75); }
  48%  { text-shadow:11px 0 0 rgba(255,0,60,.85), -9px 0 0 rgba(0,220,255,.85); }
  50%  { text-shadow:-6px 0 0 rgba(255,0,60,.8),  7px 0 0 rgba(0,220,255,.8); }
  80.5%{ text-shadow:5px 2px 0 rgba(255,0,60,.9), -5px -2px 0 rgba(0,220,255,.9); }
}

/* sliced ghost copies — the tape tears the title into bands */
body.ch88 .c88-glitch{ position:relative; isolation:isolate; }
body.ch88 .c88-glitch::before,
body.ch88 .c88-glitch::after{
  content:attr(data-text);
  position:absolute;
  left:0; top:0;
  width:100%;
  pointer-events:none;
  text-shadow:none;
  clip-path:inset(100% 0 0 0);
  will-change:transform,clip-path;
}
body.ch88 .c88-glitch::before{ color:var(--c88-cyan); animation:c88SliceA 3.4s steps(1,end) infinite; }
body.ch88 .c88-glitch::after { color:var(--c88-red);  animation:c88SliceB 5.1s steps(1,end) infinite; }
@keyframes c88SliceA{
  0%,59%,66%,100%{ clip-path:inset(100% 0 0 0); transform:translate3d(0,0,0); }
  60%{ clip-path:inset(18% 0 62% 0); transform:translate3d(-9px,0,0); }
  62%{ clip-path:inset(46% 0 31% 0); transform:translate3d(7px,0,0); }
  64%{ clip-path:inset(72% 0 12% 0); transform:translate3d(-5px,0,0); }
}
@keyframes c88SliceB{
  0%,31%,36%,87%,90%,100%{ clip-path:inset(100% 0 0 0); transform:translate3d(0,0,0); }
  32%{ clip-path:inset(64% 0 21% 0); transform:translate3d(8px,0,0); }
  34%{ clip-path:inset(11% 0 74% 0); transform:translate3d(-11px,0,0); }
  88%{ clip-path:inset(38% 0 48% 0); transform:translate3d(6px,0,0); }
}

/* the old chrome-gradient wordmark treatment is replaced by flat ink */
body.ch88 .chrome{
  background:none !important;
  -webkit-background-clip:border-box !important;
  background-clip:border-box !important;
  -webkit-text-fill-color:currentColor !important;
  color:var(--c88-ink) !important;
}
body.ch88 .red-glow{ color:var(--c88-red); text-shadow:none; }
body.ch88 strong, body.ch88 b{ color:var(--c88-ink); font-weight:600; }
body.ch88 p{ color:var(--c88-dim); }
body.ch88 .lead{
  font-family:var(--c88-mono);
  font-size:clamp(.86rem,1vw,.94rem);
  color:var(--c88-dim);
  max-width:82ch;
}

body.ch88 .eyebrow{
  display:flex;
  align-items:center;
  gap:8px;
  margin:0 0 .55rem;
  font-family:var(--c88-mono);
  font-size:.64rem;
  font-weight:600;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--c88-accent);
}
body.ch88 .eyebrow::before{
  content:"";
  width:16px; height:8px;
  background:var(--c88-accent);
  flex:none;
  animation:c88Rec 1.5s steps(1,end) infinite;
}
body.ch88 .brand-copy .eyebrow::before{ display:none; }

body.ch88 .quote blockquote{
  font-family:var(--c88-osd);
  font-size:clamp(1.6rem,3.6vw,2.6rem);
  line-height:1.1;
  color:var(--c88-ink);
  text-transform:uppercase;
  border-top:1px solid var(--c88-line);
  border-bottom:1px solid var(--c88-line);
  padding:22px 0;
  margin:0;
}
body.ch88 .quote cite{
  display:block;
  margin-top:14px;
  font-family:var(--c88-mono);
  font-size:.68rem;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--c88-faint);
  font-style:normal;
}

/* ---------- 06 · HEADER / NAVIGATION ------------------------------------ */
body.ch88 .site-header,
body.ch88 .gurnerman-taskbar{
  background:var(--c88-bg);
  border-bottom:1px solid var(--c88-line);
}
body.ch88 .site-header{ top:var(--c88-bar-h); }
body.ch88 .site-header::after,
body.ch88 .gurnerman-taskbar::after{ display:none; }
/* the Gurnerman bar is the same object on every page: same width, same
   padding, same height. CoinHawk had its own 1180px cap and its own metrics. */
body.ch88 .header-wrap,
body.ch88 .gurnerman-taskbar-wrap{
  background:transparent;
  border-bottom:0;
  max-width:var(--maxw);
  margin:0 auto;
  padding:14px clamp(14px,4vw,28px);
  min-height:73px;
  box-sizing:border-box;
}
/* and its content column lines up with every other page */
body.ch88[data-ch88="coinhawk"] .wrap{ max-width:var(--maxw); }
body.ch88 .brand img,
body.ch88 .gurnerman-brand img{
  height:46px;
  filter:drop-shadow(2px 0 0 rgba(255,0,60,.5)) drop-shadow(-2px 0 0 rgba(0,220,255,.5));
  animation:c88Emblem 6.8s steps(1,end) infinite;
}
@keyframes c88Emblem{
  0%,90%{ filter:drop-shadow(2px 0 0 rgba(255,0,60,.5)) drop-shadow(-2px 0 0 rgba(0,220,255,.5)); }
  91%   { filter:drop-shadow(7px 0 0 rgba(255,0,60,.7)) drop-shadow(-6px 0 0 rgba(0,220,255,.7)); }
  93%,100%{ filter:drop-shadow(2px 0 0 rgba(255,0,60,.5)) drop-shadow(-2px 0 0 rgba(0,220,255,.5)); }
}
/* --- the wordmark ---------------------------------------------------
   Orbitron, with the scanlines painted inside the letterforms rather than
   laid over them: the fill is a clipped gradient, so the type itself looks
   like it is being drawn by the tube. Never stops moving. */
body.ch88 .brand-copy .title,
body.ch88 .gurnerman-brand-copy .gurnerman-title{
  position:relative;
  display:inline-block;
  font-family:"Orbitron",var(--c88-chrome),sans-serif;
  font-weight:900;
  font-size:1.58rem;
  line-height:1.12;
  letter-spacing:.11em;
  text-transform:uppercase;
  background-image:
    repeating-linear-gradient(0deg,
      rgba(0,0,0,.28) 0 1px,
      transparent 1px 4px),
    linear-gradient(180deg,#ffffff 0%,var(--c88-ink) 52%,#a8a498 100%);
  background-size:100% 4px, 100% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
  text-shadow:1px 0 0 rgba(255,0,60,.38), -1px 0 0 rgba(0,220,255,.38);
  will-change:background-position,transform;
  animation:
    c88TypeScan 1.1s linear infinite,
    c88TypeSplit 3.6s ease-in-out infinite,
    c88TypeJolt 7s steps(1,end) infinite;
}
/* the scanlines crawl through the glyphs */
@keyframes c88TypeScan{
  from{ background-position:0 0, 0 0; }
  to  { background-position:0 4px, 0 0; }
}
/* the chroma keeps drifting apart and back */
@keyframes c88TypeSplit{
  0%,100%{ text-shadow:1px 0 0 rgba(255,0,60,.38), -1px 0 0 rgba(0,220,255,.38); }
  50%    { text-shadow:2px 0 0 rgba(255,0,60,.55),  -2px 0 0 rgba(0,220,255,.55); }
}
/* and every few seconds the head slips */
@keyframes c88TypeJolt{
  0%,88%,91%,100%{ transform:translate3d(0,0,0) skewX(0deg); }
  89%{ transform:translate3d(-3px,0,0) skewX(-7deg); }
  90%{ transform:translate3d(2px,0,0)  skewX(4deg); }
}
/* ghost copies tear off the wordmark on the same clock */
body.ch88 .brand-copy .title::before,
body.ch88 .brand-copy .title::after,
body.ch88 .gurnerman-brand-copy .gurnerman-title::before,
body.ch88 .gurnerman-brand-copy .gurnerman-title::after{
  content:attr(data-text);
  position:absolute;
  left:0; top:0;
  width:100%;
  background:none;
  text-shadow:none;
  -webkit-text-fill-color:currentColor;
  pointer-events:none;
  clip-path:inset(100% 0 0 0);
  will-change:transform,clip-path;
}
body.ch88 .brand-copy .title::before,
body.ch88 .gurnerman-brand-copy .gurnerman-title::before{
  color:var(--c88-cyan);
  animation:c88TypeSliceA 4.4s steps(1,end) infinite;
}
body.ch88 .brand-copy .title::after,
body.ch88 .gurnerman-brand-copy .gurnerman-title::after{
  color:var(--c88-red);
  animation:c88TypeSliceB 6.1s steps(1,end) infinite;
}
@keyframes c88TypeSliceA{
  0%,71%,77%,100%{ clip-path:inset(100% 0 0 0); transform:translate3d(0,0,0); }
  72%{ clip-path:inset(22% 0 58% 0); transform:translate3d(-5px,0,0); }
  74%{ clip-path:inset(58% 0 26% 0); transform:translate3d(4px,0,0); }
  76%{ clip-path:inset(8% 0 80% 0);  transform:translate3d(-3px,0,0); }
}
@keyframes c88TypeSliceB{
  0%,44%,48%,100%{ clip-path:inset(100% 0 0 0); transform:translate3d(0,0,0); }
  45%{ clip-path:inset(64% 0 18% 0); transform:translate3d(6px,0,0); }
  47%{ clip-path:inset(30% 0 52% 0); transform:translate3d(-4px,0,0); }
}
body.ch88 .brand-copy .eyebrow,
body.ch88 .gurnerman-brand-copy .gurnerman-kicker{ font-family:var(--c88-chrome-mono); font-size:.55rem; letter-spacing:.3em; color:var(--c88-faint); }
body.ch88 .brand-copy .sub,
body.ch88 .gurnerman-brand-copy .gurnerman-sub{ font-family:var(--c88-chrome-mono); font-size:.6rem; letter-spacing:.2em; color:var(--c88-faint); }

body.ch88 .nav{ gap:2px; }
body.ch88 .nav a,
body.ch88 .gurnerman-nav a{
  position:relative;
  font-family:var(--c88-chrome);
  font-size:1.1rem;
  font-weight:400;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--c88-dim);
  background:transparent;
  border:1px solid transparent;
  padding:2px 8px;
  transition:none;
}
body.ch88 .nav a:hover,
body.ch88 .gurnerman-nav a:hover{ color:#050505; background:var(--c88-ink); border-color:var(--c88-ink); }
body.ch88 .nav a[aria-current="page"],
body.ch88 .gurnerman-nav a[aria-current="page"]{
  color:#050505; background:var(--c88-yellow); border-color:var(--c88-yellow);
}
body.ch88 .nav a[aria-current="page"]::before,
body.ch88 .gurnerman-nav a[aria-current="page"]::before{ display:none; }
body.ch88 .nav a.nav-coinhawk,
body.ch88 .gurnerman-nav a[href="coinhawk.html"]{ color:var(--c88-red); border-color:var(--c88-red); }
/* a live-signal marker, not a page number: "P188" set this small in VT323
   reads as something else entirely */
body.ch88 .nav a.nav-coinhawk::before{
  content:"";
  display:inline-block;
  width:7px; height:7px;
  margin-right:8px;
  background:var(--c88-red);
  vertical-align:1px;
  animation:c88Rec 1.5s steps(1,end) infinite;
}
body.ch88 .nav a.nav-coinhawk:hover::before{ background:#050505; }
body.ch88 .nav a.nav-coinhawk:hover,
body.ch88 .gurnerman-nav a[href="coinhawk.html"]:hover{ color:#050505; background:var(--c88-red); border-color:var(--c88-red); }

body.ch88 .nav-toggle,
body.ch88 .gurnerman-nav-toggle{
  font-family:var(--c88-chrome);
  font-size:1.15rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--c88-ink);
  background:var(--c88-panel);
  border:1px solid var(--c88-line);
  padding:6px 14px;
}

/* ---------- 07 · BUTTONS + FORMS ---------------------------------------- */
/* Three distinct weights, not one block: solid signal, outline, and a bare
   underlined link for the "cancel / back" actions. */
body.ch88 .btn,
body.ch88 .cta,
body.ch88 button.btn,
body.ch88 .buybtn,
body.ch88 .gsa-launch-btn,
body.ch88 .coinhawk-btn{
  position:relative;
  overflow:hidden;
  font-family:var(--c88-osd) !important;
  font-size:1.05rem !important;
  font-weight:400 !important;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--c88-ink);
  background:transparent !important;
  border:1px solid var(--c88-line) !important;
  padding:8px 18px;
  transform:none !important;
  transition:none;
}
body.ch88 .btn:hover,
body.ch88 .cta:hover,
body.ch88 button.btn:hover,
body.ch88 .buybtn:hover{
  color:#050505;
  background:var(--c88-ink) !important;
  border-color:var(--c88-ink) !important;
  opacity:1;
}
/* the primary action carries the channel colour and a read-head sweep */
body.ch88 .btn.primary,
body.ch88 .cta.primary,
body.ch88 .coinhawk-btn,
body.ch88 .gsa-launch-btn,
body.ch88 button.btn{
  color:var(--c88-accent-ink) !important;
  background:var(--c88-accent) !important;
  border-color:var(--c88-accent) !important;
}
body.ch88 .btn.primary::after,
body.ch88 .cta.primary::after,
body.ch88 .coinhawk-btn::after,
body.ch88 .gsa-launch-btn::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);
  transform:translate3d(-110%,0,0);
  animation:c88Sweep 5s linear infinite;
  pointer-events:none;
}
body.ch88 .btn.primary:hover,
body.ch88 .cta.primary:hover,
body.ch88 .coinhawk-btn:hover,
body.ch88 .gsa-launch-btn:hover{
  background:var(--c88-ink) !important;
  border-color:var(--c88-ink) !important;
  color:#050505 !important;
}
/* the quiet third option is a link, not a box */
body.ch88 .btn.ghost{
  background:transparent !important;
  border-color:transparent !important;
  color:var(--c88-faint);
  padding-left:0; padding-right:0;
  margin-right:12px;
  text-decoration:underline;
  text-underline-offset:5px;
}
body.ch88 .btn.ghost:hover{ background:transparent !important; color:var(--c88-ink); }

@keyframes c88Sweep{
  0%,62%{ transform:translate3d(-110%,0,0); }
  100%  { transform:translate3d(210%,0,0); }
}

body.ch88 .field label,
body.ch88 .fld label{
  font-family:var(--c88-mono);
  font-size:.64rem;
  font-weight:600;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--c88-faint);
}
body.ch88 input,
body.ch88 select,
body.ch88 textarea{
  font-family:var(--c88-mono);
  font-size:.92rem;
  color:var(--c88-ink);
  background:var(--c88-panel-2);
  border:1px solid var(--c88-line);
  padding:11px 12px;
}
body.ch88 input::placeholder,
body.ch88 textarea::placeholder{ color:var(--c88-faint); }
body.ch88 input:focus,
body.ch88 select:focus,
body.ch88 textarea:focus{ border-color:var(--c88-yellow); outline:none; }

body.ch88 .auth-tab{
  font-family:var(--c88-osd);
  font-size:1.2rem;
  letter-spacing:.12em;
  color:var(--c88-dim);
  background:var(--c88-panel);
  border:1px solid var(--c88-line);
  padding:8px;
}
body.ch88 .auth-tab[aria-selected="true"]{ color:#050505; background:var(--c88-yellow); border-color:var(--c88-yellow); }

/* ---------- 08 · SECTION FURNITURE -------------------------------------- */
/* Broadcast slates that frame the page without touching its copy. */
.c88-slate{
  display:flex;
  align-items:center;
  gap:12px;
  margin:0 0 14px;
  font-family:var(--c88-chrome);
  font-size:1.15rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--c88-faint);
}
.c88-slate::before{
  content:"";
  width:10px; height:10px;
  background:var(--c88-red);
  flex:none;
  animation:c88Rec 1.5s steps(1,end) infinite;
}
.c88-slate::after{
  content:"";
  flex:1;
  height:1px;
  background:repeating-linear-gradient(90deg,var(--c88-line) 0 6px,transparent 6px 10px);
}
.c88-slate em{ font-style:normal; color:var(--c88-red); }

/* bare section headings get a channel rule rather than a sticker */
body.ch88 main > section > h2,
body.ch88 .article h2{
  display:block;
  padding:0 0 8px;
  border-bottom:2px solid var(--c88-accent);
  background:none;
  color:var(--c88-ink);
}

/* ---------- 09 · THE TAPE SHELF ----------------------------------------- */
body.ch88 .tiles{
  counter-reset:c88tape;
  position:relative;
  gap:16px;
  padding-top:38px;
  padding-bottom:14px;
}
/* the shelf label and the shelf itself */
body.ch88 .tiles::before{
  content:"Tape library";
  position:absolute;
  left:0; top:0;
  font-family:var(--c88-osd);
  font-size:1.15rem;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--c88-faint);
}
body.ch88 .tiles::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height:3px;
  background:var(--c88-line);
}

body.ch88 .tile{
  counter-increment:c88tape;
  position:relative;
  display:flex;
  flex-direction:column;
  background:var(--c88-panel);
  border:1px solid var(--c88-line);
  padding:68px 16px 18px;
  transform:none !important;
  transition:none;
}
body.ch88 .tile::before,
body.ch88 .tile::after{ display:none; }
body.ch88 .tile:hover{ border-color:var(--c88-ink); }

/* the spool window across the top of the shell */
body.ch88 .c88-shell{
  position:absolute;
  left:12px; right:12px; top:12px;
  height:48px;
  display:flex;
  align-items:center;
  justify-content:space-around;
  border:1px solid var(--c88-line);
  background:#070707;
  overflow:hidden;
}
body.ch88 .c88-shell::before{
  content:"";
  position:absolute;
  left:26%; right:26%;
  height:19px;
  background:#16160f;
  border-top:1px solid #2e2d26;
  border-bottom:1px solid #2e2d26;
}
body.ch88 .c88-shell::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.16),transparent);
  transform:translate3d(-100%,0,0);
  animation:c88Sweep 4.6s linear infinite;
}
body.ch88 .c88-spool{
  position:relative;
  z-index:1;
  width:34px; height:34px;
  flex:none;
  border-radius:50% !important;
  background:
    radial-gradient(circle 5px at 50% 50%, #8b877a 99%, transparent 100%),
    radial-gradient(circle 9px at 50% 50%, #0b0b0b 99%, transparent 100%),
    conic-gradient(from 0deg,
      #34332e 0 22deg, #0e0e0d 22deg 45deg, #34332e 45deg 67deg, #0e0e0d 67deg 90deg,
      #34332e 90deg 112deg, #0e0e0d 112deg 135deg, #34332e 135deg 157deg, #0e0e0d 157deg 180deg,
      #34332e 180deg 202deg, #0e0e0d 202deg 225deg, #34332e 225deg 247deg, #0e0e0d 247deg 270deg,
      #34332e 270deg 292deg, #0e0e0d 292deg 315deg, #34332e 315deg 337deg, #0e0e0d 337deg 360deg);
  outline:1px solid var(--c88-line);
  will-change:transform;
  animation:c88Spin 3.6s linear infinite;
}
body.ch88 .c88-spool + .c88-spool{ animation-duration:2.4s; }
@keyframes c88Spin{ to{ transform:rotate(360deg); } }

/* the handwritten label strip carries the real section name */
body.ch88 .tile h2,
body.ch88 .tile h3{
  position:relative;
  overflow:hidden;
  display:block;
  margin:0 0 12px;
  padding:5px 10px;
  font-size:clamp(1.02rem,1.5vw,1.24rem);
  line-height:1.18;
  letter-spacing:.03em;
  color:#0a0a0a;
  background:var(--c88-ink);
  border:1px solid var(--c88-ink);
  text-shadow:none;
}
body.ch88 .tile h2::before,
body.ch88 .tile h3::before{
  content:"Tape " counter(c88tape,decimal-leading-zero) " — ";
}
body.ch88 .tile h2::after,
body.ch88 .tile h3::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,59,48,.5),transparent);
  transform:translate3d(-110%,0,0);
  animation:c88Sweep 6.2s linear infinite;
  pointer-events:none;
}
body.ch88 .tile:nth-child(2n) h2::after{ animation-delay:-1.6s; }
body.ch88 .tile:nth-child(3n) h2::after{ animation-delay:-3.4s; }

/* the index sticker sits above the label, where it reads */
body.ch88 .tile > .eyebrow{ margin:0 0 7px; font-size:.58rem; letter-spacing:.2em; color:var(--c88-yellow); }
body.ch88 .tile > .eyebrow::before{ background:var(--c88-yellow); }
body.ch88 .tile p{ font-size:.83rem; color:var(--c88-dim); }
body.ch88 .tile .actions{ margin-top:auto; padding-top:10px; }

/* featured cassettes — red shell, red label */
body.ch88 .tile[style*="--red"],
body.ch88 .tile.c88-featured{ border-color:var(--c88-red) !important; }
body.ch88 .tile[style*="--red"] .c88-shell,
body.ch88 .tile.c88-featured .c88-shell{ border-color:var(--c88-red); }
body.ch88 .tile[style*="--red"] .c88-spool,
body.ch88 .tile.c88-featured .c88-spool{ outline-color:var(--c88-red); }
body.ch88 .tile[style*="--red"] h2,
body.ch88 .tile.c88-featured h2{ color:#050505; background:var(--c88-red); border-color:var(--c88-red); }

/* ---------- 10 · PANELS, DOSSIERS, ARTICLES ----------------------------- */
/* A panel is a broadcast document, not a cassette: channel bar, no sticker. */
body.ch88 .panel,
body.ch88 .audio-card,
body.ch88 .control-table-wrap,
body.ch88 .gsa-final-launch,
body.ch88 .gsa-release-feature,
body.ch88 .gsa-game-hero{
  position:relative;
  background:var(--c88-panel) !important;
  border:1px solid var(--c88-line) !important;
  border-left:3px solid var(--c88-accent) !important;
  transform:none !important;
}
body.ch88 .panel::before,
body.ch88 .coinhawk-feature::before,
body.ch88 .gsa-release-feature::before,
body.ch88 .gsa-game-hero::before{ display:none !important; }

body.ch88 .panel h2{
  display:block;
  margin:0 0 14px;
  padding:0 0 7px;
  font-size:clamp(1.15rem,1.8vw,1.5rem);
  color:var(--c88-ink);
  background:none;
  border-bottom:1px solid var(--c88-line);
}
body.ch88 .panel h2::before{
  content:"\25B6 ";
  color:var(--c88-accent);
  font-size:.7em;
  vertical-align:.12em;
}

/* a .card is a factfile — dossier rule, portrait kept at size */
body.ch88 .card{
  position:relative;
  background:var(--c88-panel) !important;
  border:1px solid var(--c88-line) !important;
  transform:none !important;
}
/* the site theme draws a 42x2 accent bar here; this replaces it outright */
body.ch88 .card::before{
  content:"Factfile";
  position:absolute;
  left:auto; right:0; top:0;
  width:auto; height:auto;
  padding:2px 9px;
  font-family:var(--c88-mono);
  font-size:.54rem;
  font-weight:600;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:#050505;
  background:var(--c88-accent);
}
body.ch88 .card h3{
  margin:0 0 8px;
  padding:0 0 6px;
  font-size:clamp(1.1rem,1.6vw,1.35rem);
  color:var(--c88-accent);
  background:none;
  border-bottom:1px dashed var(--c88-line);
}

body.ch88 .list-clean li{ padding-left:22px; color:var(--c88-dim); font-size:.9rem; }
body.ch88 .list-clean li::before{
  content:"";
  position:absolute;
  left:0; top:.6em;
  width:9px; height:9px;
  background:var(--c88-accent);
  box-shadow:none;
  animation:c88Rec 2.4s steps(1,end) infinite;
}
body.ch88 .list-clean li:nth-child(2n)::before{ animation-delay:-.4s; }
body.ch88 .list-clean li:nth-child(3n)::before{ animation-delay:-.9s; }
body.ch88 .list-clean li:nth-child(5n)::before{ animation-delay:-1.5s; }

body.ch88 .article section{ border-top:1px solid var(--c88-line); padding-top:26px; }
body.ch88 .article p{ color:var(--c88-dim); font-size:.9rem; }
body.ch88 .figure{ gap:16px; }
body.ch88 .figure img{ width:120px; height:120px; object-fit:cover; border:1px solid var(--c88-line); }

body.ch88 .coinhawk-pills span,
body.ch88 .release-facts span,
body.ch88 .char-tags span{
  font-family:var(--c88-mono);
  font-size:.64rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--c88-dim);
  background:var(--c88-panel-2);
  border:1px solid var(--c88-line);
  padding:5px 9px;
}
body.ch88 .coinhawk-note,
body.ch88 .release-note,
body.ch88 .ch-disclaimer{ color:var(--c88-faint); font-size:.72rem; }

/* the interactive family tree, framed as recovered footage */
body.ch88 .tree-frame{
  position:relative;
  margin:18px 0;
  border:1px solid var(--c88-line);
  background:#070707;
  overflow:hidden;
}
body.ch88 .tree-frame iframe{
  display:block;
  width:100%;
  height:clamp(600px,86vh,1000px);
  border:0;
}
body.ch88 .tree-frame::after{
  content:"Gurnerverse lineage 4 six generations on record";
  position:absolute;
  left:10px; bottom:9px;
  z-index:2;
  font-family:var(--c88-chrome);
  font-size:1rem;
  line-height:1;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--c88-cyan);
  text-shadow:var(--c88-burn);
  pointer-events:none;
  animation:c88Blink 5.6s steps(1,end) infinite;
}
/* an embedded tree does not need its own copy of the site nav — the host page
   already has one directly above it. The controls stay. */
body.ch88.ch88-embedded .topbar a.pill,
body.ch88.ch88-embedded .topbar .brand,
body.ch88.ch88-embedded .topbar .sep{ display:none; }
body.ch88.ch88-embedded .topbar{ inset:10px 10px auto 10px; }

/* an embedded page drops the host chrome and quietens the tube */
body.ch88.ch88-embedded{ padding-top:0; padding-bottom:0; }
html.ch88 body.ch88-embedded ~ *,
body.ch88.ch88-embedded .c88-noise{ opacity:.03; }
body.ch88.ch88-embedded .c88-track{ opacity:.35; }

/* family tree — plain OSD boxes */
body.ch88 .tree{ text-align:center; font-family:var(--c88-osd); }
body.ch88 .tree .root,
body.ch88 .tree .leaf{
  display:inline-block;
  padding:8px 16px;
  font-size:1.35rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--c88-ink);
  background:var(--c88-panel-2);
  border:1px solid var(--c88-line);
}
body.ch88 .tree .root{ color:#050505; background:var(--c88-ink); }
body.ch88 .tree .leaf small{
  display:block;
  font-family:var(--c88-mono);
  font-size:.6rem;
  letter-spacing:.2em;
  color:var(--c88-faint);
}
body.ch88 .tree .connector{ width:1px; height:22px; margin:6px auto; background:var(--c88-line); }
body.ch88 .tree .branch{ display:flex; justify-content:center; gap:26px; flex-wrap:wrap; }

/* ---------- 11 · RECOVERED FOOTAGE -------------------------------------- */
body.ch88 .c88-frame{
  position:relative;
  display:block;
  border:1px solid var(--c88-line);
  background:#070707;
  overflow:hidden;
  line-height:0;
}
body.ch88 .c88-frame img{
  display:block;
  width:100%;
  height:auto;
  filter:saturate(.55) contrast(1.06) brightness(.94);
}
body.ch88 .c88-frame::before,
body.ch88 .cinema::before,
body.ch88 .banner::before,
body.ch88 .gsa-release-art::before{
  content:attr(data-ts);
  position:absolute;
  left:9px; bottom:8px;
  z-index:3;
  font-family:var(--c88-osd);
  font-size:1.06rem;
  line-height:1;
  letter-spacing:.04em;
  color:#fff;
  text-shadow:var(--c88-burn);
  pointer-events:none;
  animation:c88Blink 3.9s steps(1,end) infinite;
}
body.ch88 .c88-frame::after,
body.ch88 .banner::after{
  content:"Recovered footage — do not adjust your set";
  position:absolute;
  right:9px; top:8px;
  z-index:3;
  max-width:78%;
  font-family:var(--c88-osd);
  font-size:1rem;
  line-height:1;
  letter-spacing:.05em;
  text-align:right;
  text-transform:uppercase;
  color:var(--c88-red);
  text-shadow:var(--c88-burn);
  pointer-events:none;
  animation:c88Blink 5.6s steps(1,end) infinite;
}

body.ch88 .cinema,
body.ch88 .banner,
body.ch88 .embed,
body.ch88 .gsa-release-art,
body.ch88 .gsa-trailer-shell{
  position:relative;
  overflow:hidden;
  border:1px solid var(--c88-line);
  background:#070707;
  transform:none !important;
}
body.ch88 .cinema img,
body.ch88 .cinema video,
body.ch88 .banner img,
body.ch88 .banner video,
body.ch88 .gsa-release-art img,
body.ch88 .gsa-game-poster,
body.ch88 .cover-art{ filter:saturate(.55) contrast(1.06) brightness(.94); }
body.ch88 .cinema::after{ background:linear-gradient(180deg,transparent 55%,rgba(5,5,5,.75)); }
body.ch88 .cinema .cine-tag,
body.ch88 .release-stamp{
  font-family:var(--c88-osd);
  font-size:1.1rem;
  letter-spacing:.1em;
  color:#fff;
  background:rgba(5,5,5,.8);
  border:1px solid var(--c88-line);
  padding:2px 9px;
  text-shadow:var(--c88-burn);
}
body.ch88 .cine-tag .dot{ border-radius:50% !important; background:var(--c88-red); animation:c88Rec 1.5s steps(1,end) infinite; }

/* the tracking bar that crawls over every piece of footage */
body.ch88 .c88-roll{
  position:absolute;
  left:0; right:0; top:0;
  height:26px;
  z-index:2;
  pointer-events:none;
  background:linear-gradient(180deg,
    transparent,
    rgba(255,255,255,.07) 45%,
    rgba(255,255,255,.16) 50%,
    rgba(76,201,255,.08) 56%,
    transparent);
  will-change:transform;
  animation:c88Roll 5.4s linear infinite;
}
@keyframes c88Roll{
  from{ transform:translate3d(0,-30px,0); }
  to  { transform:translate3d(0,var(--c88-roll-h,620px),0); }
}

/* the homepage banner: emblem in, station mark out */
body.ch88 .banner{ margin-bottom:26px; }
body.ch88 .banner-copy{
  position:absolute; inset:0;
  background:rgba(5,5,5,.7);
  padding:clamp(18px,3.4vw,40px) clamp(18px,3.4vw,40px) 46px;
}
body.ch88[data-ch88-page="home"] .banner-copy::before{
  content:"";
  display:block;
  width:clamp(80px,11vw,132px);
  aspect-ratio:1;
  margin:0 0 12px;
  background:url("Gurnerman_Transparent_2000x2000 (1).png") left center / contain no-repeat;
  filter:drop-shadow(2px 0 0 rgba(255,0,60,.5)) drop-shadow(-2px 0 0 rgba(0,220,255,.5));
  animation:c88Emblem 6.8s steps(1,end) infinite;
}
body.ch88 .banner-copy::after{
  content:"AWB · CH88";
  position:absolute;
  right:clamp(14px,3vw,30px); bottom:clamp(30px,4vw,46px);
  font-family:var(--c88-osd);
  font-size:1.15rem;
  letter-spacing:.18em;
  color:var(--c88-faint);
  text-shadow:var(--c88-burn);
}

/* ---------- 12 · P188 PREVIEW ON THE HOME PAGE -------------------------- */
/* The CoinHawk block on the site pages already carries the four markets and
   what each scan does. It is re-set as a teletext page rather than a card. */
body.ch88 .coinhawk-feature{
  position:relative;
  background:var(--c88-panel) !important;
  border:1px solid var(--c88-yellow) !important;
  transform:none !important;
}
body.ch88 .coinhawk-feature .eyebrow{ color:var(--c88-yellow); }
body.ch88 .coinhawk-kicker{
  font-family:var(--c88-osd);
  font-size:clamp(1.5rem,2.6vw,2.1rem);
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--c88-ink);
  margin-bottom:.7rem;
}
body.ch88 .coinhawk-preview{
  background:var(--c88-panel-2) !important;
  border:1px solid var(--c88-line) !important;
  color:var(--c88-ink) !important;
  transform:none !important;
  padding:0 !important;
  font-family:var(--c88-mono);
}
/* header bar: P188 · LIVE MARKETS */
body.ch88 .ch-preview-top{
  align-items:center;
  padding:6px 10px;
  border-bottom:1px solid var(--c88-line);
  background:var(--c88-bar-blue);
}
body.ch88 .ch-preview-top::before{
  content:"P188";
  font-family:var(--c88-mono);
  font-weight:600;
  font-size:.78rem;
  letter-spacing:.18em;
  color:#050505;
  background:var(--c88-yellow);
  padding:0 8px;
  margin-right:10px;
  animation:c88Blink 1.8s steps(1,end) infinite;
}
body.ch88 .ch-preview-brand{ width:96px; height:32px; }
body.ch88 .ch-live{
  font-family:var(--c88-osd);
  font-size:1.15rem;
  font-weight:400;
  letter-spacing:.12em;
  color:var(--c88-green) !important;
}
body.ch88 .ch-live::before{ background:var(--c88-green); border-radius:50% !important; animation:c88Rec 1.2s steps(1,end) infinite; }

body.ch88 .ch-stats{ gap:1px; margin:0; background:var(--c88-line); border-bottom:1px solid var(--c88-line); }
body.ch88 .ch-stat{ background:var(--c88-panel-2) !important; border:0 !important; padding:9px 10px; }
body.ch88 .ch-stat small{ font-family:var(--c88-mono); font-size:.54rem; letter-spacing:.2em; color:var(--c88-faint); }
body.ch88 .ch-stat strong{ font-family:var(--c88-osd); font-size:1.35rem; color:var(--c88-cyan) !important; }

body.ch88 .ch-table{ background:var(--c88-panel-2) !important; border:0 !important; }
body.ch88 .ch-row{
  background:transparent !important;
  border-bottom:1px solid var(--c88-line-soft) !important;
  padding:7px 10px;
  font-size:.76rem;
}
/* the four markets take the teletext section colours */
body.ch88 .ch-row strong{ font-family:var(--c88-mono); font-weight:600; letter-spacing:.1em; text-transform:uppercase; }
body.ch88 .ch-row:nth-child(1) strong{ color:var(--c88-cyan) !important; }
body.ch88 .ch-row:nth-child(2) strong,
body.ch88 .ch-row:nth-child(3) strong{ color:var(--c88-green) !important; }
body.ch88 .ch-row:nth-child(4) strong{ color:var(--c88-yellow) !important; }
body.ch88 .ch-row span{ color:var(--c88-dim); letter-spacing:.08em; text-transform:uppercase; font-size:.68rem; }
body.ch88 .ch-row .up{ color:var(--c88-green) !important; font-family:var(--c88-osd); font-size:1.1rem; letter-spacing:.1em; }
body.ch88 .ch-row .up::before{ content:"\25B2 "; }
body.ch88 .ch-row .down{ color:var(--c88-red-soft) !important; }
body.ch88 .ch-disclaimer{ margin:0; padding:8px 10px; border-top:1px solid var(--c88-line); }

body.ch88 .coinhawk-launchbar{
  position:relative;
  background:var(--c88-panel) !important;
  border:1px solid var(--c88-red) !important;
  transform:none !important;
  padding-left:104px;
}
body.ch88 .coinhawk-launchbar::before{
  content:"";
  position:absolute;
  left:14px; top:50%;
  transform:translateY(-50%);
  width:76px; height:38px;
  background:url("coinhawk-logo-stacked-web.png") center/contain no-repeat;
}
body.ch88 .coinhawk-launchbar .launch-label{ font-family:var(--c88-mono); font-size:.6rem; letter-spacing:.24em; color:var(--c88-yellow); }
body.ch88 .coinhawk-launchbar strong{ font-family:var(--c88-osd); font-size:1.5rem; letter-spacing:.08em; color:var(--c88-ink); }
body.ch88 .coinhawk-launchbar .launch-copy{ color:var(--c88-dim); font-size:.8rem; }
body.ch88 .coinhawk-launchbar .launch-action{ font-family:var(--c88-osd); font-size:1.15rem; letter-spacing:.1em; color:var(--c88-red); }

/* ---------- 13 · GSA — THE AGENCY CHANNEL ------------------------------- */
body.ch88 .gsa-release-copy h2 span{ color:var(--c88-cyan); }
body.ch88 .gsa-release-kicker,
body.ch88 .gsa-game-subtitle{
  font-family:var(--c88-osd);
  font-size:clamp(1.25rem,2.3vw,1.8rem);
  letter-spacing:.06em;
  color:var(--c88-cyan);
}
body.ch88 .gsa-game-status{ border:1px solid var(--c88-line); background:var(--c88-panel); }
body.ch88 .gsa-game-status div{ border-right:1px solid var(--c88-line); }
body.ch88 .gsa-game-status strong{ font-family:var(--c88-osd); color:var(--c88-cyan); }
body.ch88 .gsa-game-status span{ font-family:var(--c88-mono); font-size:.62rem; letter-spacing:.16em; color:var(--c88-faint); }
body.ch88 .mission-route li{ border:1px solid var(--c88-line); border-left:3px solid var(--c88-cyan); background:var(--c88-panel); }
body.ch88 .mission-route span{ font-family:var(--c88-mono); font-size:.62rem; letter-spacing:.2em; color:var(--c88-cyan); }
body.ch88 .mission-route strong{ font-family:var(--c88-osd); font-size:1.3rem; letter-spacing:.05em; }
body.ch88 .control-table th{
  font-family:var(--c88-mono);
  font-size:.64rem;
  letter-spacing:.16em;
  color:var(--c88-cyan);
  background:var(--c88-bar-blue);
  border-bottom:1px solid var(--c88-line);
}
body.ch88 .control-table td{ color:var(--c88-dim); border-bottom:1px solid var(--c88-line-soft); font-size:.85rem; }
body.ch88 .control-table tbody tr:hover{ background:#161616; }
body.ch88 .gsa-game-rating{ background:rgba(5,5,5,.86); border:1px solid var(--c88-line); }
body.ch88 .gsa-game-rating strong,
body.ch88 .gsa-game-rating span{ font-family:var(--c88-mono); font-size:.62rem; letter-spacing:.14em; }

/* --- GSA distribution: download + install ---------------------------- */
body.ch88 .gsa-download{ --c88-accent:#4cc9ff; }
body.ch88 .dl-grid{
  display:grid;
  grid-template-columns:1.25fr 1fr;
  gap:16px;
  align-items:start;
}
body.ch88 .dl-card{
  position:relative;
  padding:clamp(18px,2.6vw,28px);
  background:var(--c88-panel);
  border:1px solid var(--c88-line);
  border-left:3px solid var(--c88-accent);
}
body.ch88 .dl-card.dl-primary{ border-color:var(--c88-accent); border-left-width:3px; }
body.ch88 .dl-plat{
  margin:0 0 10px;
  font-family:var(--c88-mono);
  font-size:.6rem;
  font-weight:600;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--c88-accent);
}
body.ch88 .dl-card h3{
  margin:0 0 12px;
  padding:0 0 7px;
  font-size:clamp(1.25rem,2vw,1.6rem);
  color:var(--c88-ink);
  border-bottom:1px solid var(--c88-line);
}
body.ch88 .dl-card p{ font-size:.9rem; }

/* a spec strip that reads like a tape label */
body.ch88 .dl-meta{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1px;
  margin:16px 0;
  background:var(--c88-line);
  border:1px solid var(--c88-line);
}
body.ch88 .dl-meta > div{ background:var(--c88-panel-2); padding:9px 11px; }
body.ch88 .dl-meta dt{
  font-family:var(--c88-mono);
  font-size:.54rem;
  font-weight:600;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--c88-faint);
}
body.ch88 .dl-meta dd{
  margin:4px 0 0;
  font-family:var(--c88-osd);
  font-size:1.3rem;
  letter-spacing:.04em;
  color:var(--c88-cyan);
}
body.ch88 .dl-hash{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:8px;
  margin:14px 0 10px;
  padding:8px 10px;
  background:var(--c88-panel-2);
  border:1px solid var(--c88-line);
}
body.ch88 .dl-hash span{
  font-family:var(--c88-mono);
  font-size:.54rem;
  font-weight:600;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--c88-faint);
  flex:none;
}
body.ch88 .dl-hash code{
  font-family:var(--c88-mono);
  font-size:.68rem;
  line-height:1.5;
  color:var(--c88-green);
  word-break:break-all;
}
body.ch88 .dl-steps{
  counter-reset:c88step;
  list-style:none;
  margin:14px 0 18px;
  padding:0;
  display:grid;
  gap:9px;
}
body.ch88 .dl-steps li{
  counter-increment:c88step;
  position:relative;
  padding-left:30px;
  font-size:.88rem;
  color:var(--c88-dim);
}
body.ch88 .dl-steps li::before{
  content:counter(c88step,decimal-leading-zero);
  position:absolute;
  left:0; top:0;
  font-family:var(--c88-osd);
  font-size:1.1rem;
  line-height:1.35;
  color:#050505;
  background:var(--c88-accent);
  padding:0 6px;
}

/* --- GSA: the animated ident ----------------------------------------
   The static patch is a transparent PNG; the animation that replaces it is an
   opaque MP4 on black. Two things were wrong: the global radius reset squared
   the circle, and the video's black ground appeared as a hard box. Screen
   blending drops the black against the near-black page, and the swap now cues
   in like a tape locking on instead of cutting. */
body.ch88 .gsa-media-toggle,
body.ch88 .gsa-media-toggle img,
body.ch88 .gsa-media-toggle video{ border-radius:50% !important; }
body.ch88 .gsa-media-toggle img{
  filter:drop-shadow(0 18px 30px rgba(0,0,0,.6));
}
body.ch88 .gsa-media-toggle video{
  mix-blend-mode:screen;
  animation:c88IdentIn .62s steps(5,end) both;
}
@keyframes c88IdentIn{
  0%  { opacity:0;   transform:scale(1.05) translate3d(-6px,0,0); filter:brightness(2.6) contrast(.45); }
  25% { opacity:.55; transform:scale(.99)  translate3d(5px,0,0);  filter:brightness(1.7) contrast(.7); }
  50% { opacity:.8;  transform:scale(1.01) translate3d(-2px,0,0); filter:brightness(1.2) contrast(.9); }
  75% { opacity:.95; transform:none; filter:none; }
  100%{ opacity:1;   transform:none; filter:none; }
}
/* the ring only appears once the ident is running */
body.ch88 .gsa-media-toggle.is-playing::after{
  content:"";
  position:absolute;
  inset:-6px;
  border:1px solid rgba(76,201,255,.28);
  border-radius:50% !important;
  pointer-events:none;
  animation:c88Blink 2.6s steps(1,end) infinite;
}
body.ch88 .gsa-play-cue{
  font-family:var(--c88-osd);
  font-size:1.05rem;
  letter-spacing:.14em;
  color:var(--c88-ink);
  background:rgba(5,5,5,.86);
  border:1px solid var(--c88-line);
  padding:3px 11px;
}
body.ch88 .gsa-identity figcaption{
  font-family:var(--c88-mono);
  font-size:.6rem;
  letter-spacing:.22em;
  color:var(--c88-faint);
}

/* ---------- 14 · FOOTER -------------------------------------------------- */
body.ch88 .site-footer{ border-top:1px solid var(--c88-line); background:var(--c88-bg); }
body.ch88 .site-footer::before{ display:none; }
body.ch88 .footer-wrap .copy{ font-family:var(--c88-chrome); font-size:1.3rem; letter-spacing:.2em; color:var(--c88-faint); }
body.ch88 .footer-links a{
  font-family:var(--c88-chrome);
  font-size:1.1rem;
  letter-spacing:.1em;
  color:var(--c88-dim);
  padding:2px 9px;
  border:1px solid transparent;
}
body.ch88 .footer-links a:hover{ color:#050505; background:var(--c88-ink); }

/* ============================================================
   15 · COINHAWK — TELETEXT SERVICE  P188
   ============================================================ */
/* These land on the root element, not the body: CoinHawk's charts read the
   palette with getComputedStyle(document.documentElement). */
html.ch88-coinhawk,
body.ch88[data-ch88="coinhawk"]{
  --bg:#050505; --surface:#101010; --surface2:#0a0a0a;
  --line:#3a3934; --hair:#26251f; --row-hover:#161616;
  --ink:#e8e6df; --ink2:#bdb9ac; --ink3:#7d7a70;
  --navy:#001a4d; --navy2:#001a4d;
  --coral:#ff3b30; --coral2:#f5e13a; --coral-ink:#ff3b30; --coral-soft:rgba(255,59,48,.12);
  --up:#35d94c; --down:#ff5d52;
  --up-soft:rgba(53,217,76,.14); --down-soft:rgba(255,93,82,.14);
  --track:#1c1c1a; --chip:#0a0a0a;
  --accent:#ff3b30; --accent-ink:#ff3b30; --accent-soft:rgba(255,59,48,.12);
  --border:#3a3934; --focus:#f5e13a;
  --shadow:none; --shadow-md:none; --shadow-lg:none;
  --r-card:0; --r-chip:0;
  --c88-accent:#f5e13a;
  font-family:var(--c88-mono);
}
body.ch88[data-ch88="coinhawk"] header.top{
  background:var(--c88-bg);
  border-bottom:1px solid var(--c88-line);
  top:var(--c88-bar-h);
}
body.ch88[data-ch88="coinhawk"] .topnav{ border-bottom:1px solid var(--c88-line); }
body.ch88[data-ch88="coinhawk"] .nav{
  font-family:var(--c88-osd);
  font-size:1.25rem;
  font-weight:400;
  letter-spacing:.07em;
  text-transform:uppercase;
  color:var(--c88-faint);
  border-bottom:2px solid transparent;
}
body.ch88[data-ch88="coinhawk"] .nav:hover{ color:var(--c88-ink); }
body.ch88[data-ch88="coinhawk"] .nav[aria-current="true"]{ color:var(--c88-yellow); border-bottom-color:var(--c88-yellow); }
body.ch88[data-ch88="coinhawk"] .topnav .site-home{ color:var(--c88-red); }
body.ch88[data-ch88="coinhawk"] .splash-strap{
  font-family:var(--c88-osd);
  font-weight:400;
  letter-spacing:.02em;
  color:var(--c88-ink);
  text-shadow:3px 0 0 rgba(255,0,60,.75), -3px 0 0 rgba(0,220,255,.75);
}
body.ch88[data-ch88="coinhawk"] .splash-sub,
body.ch88[data-ch88="coinhawk"] .feat p{ color:var(--c88-dim); }
body.ch88[data-ch88="coinhawk"] .feat h3{
  font-family:var(--c88-osd);
  font-size:1.5rem;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--c88-cyan);
}
body.ch88[data-ch88="coinhawk"] .fi{ background:var(--c88-panel-2) !important; border:1px solid var(--c88-line); color:var(--c88-yellow) !important; }
body.ch88[data-ch88="coinhawk"] .trust .tr,
body.ch88[data-ch88="coinhawk"] .lv{ background:var(--c88-panel); border:1px solid var(--c88-line); color:var(--c88-dim); }
body.ch88[data-ch88="coinhawk"] .lv .big{ font-family:var(--c88-osd); font-size:1.9rem; color:var(--c88-ink); }
body.ch88[data-ch88="coinhawk"] .lv .k{ color:var(--c88-yellow); letter-spacing:.16em; }
body.ch88[data-ch88="coinhawk"] .splash-warn{
  background:var(--c88-panel) !important;
  border:1px solid var(--c88-red) !important;
  border-left-width:4px !important;
}
body.ch88[data-ch88="coinhawk"] .splash-warn h3{ color:var(--c88-red); letter-spacing:.2em; }
body.ch88[data-ch88="coinhawk"] .sitebanner{ background:var(--c88-red); color:#050505; }
body.ch88[data-ch88="coinhawk"] .status{ font-family:var(--c88-mono); color:var(--c88-dim); background:var(--c88-panel); border:1px solid var(--c88-line); }
body.ch88[data-ch88="coinhawk"] .status.live .dot{ background:var(--c88-green); border-radius:50% !important; animation:c88Rec 1.2s steps(1,end) infinite; }
body.ch88[data-ch88="coinhawk"] .vmark,
body.ch88[data-ch88="coinhawk"] .acct-av,
body.ch88[data-ch88="coinhawk"] .who-av{ background:var(--c88-panel-2) !important; border:1px solid var(--c88-line); color:var(--c88-cyan) !important; }
body.ch88[data-ch88="coinhawk"] .vmark img,
body.ch88[data-ch88="coinhawk"] .logowrap,
body.ch88[data-ch88="coinhawk"] .coinlogo{ background:var(--c88-panel-2) !important; }

/* --- the teletext page header --------------------------------------- */
.tt-head{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:14px;
  padding:5px 12px;
  background:var(--c88-panel-2);
  border:1px solid var(--c88-line);
  font-family:var(--c88-osd);
  font-size:1.4rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--c88-ink);
  will-change:transform;
  animation:c88Osd 7.4s steps(1,end) infinite;
}
.tt-head .tt-p{
  font-family:var(--c88-mono);
  font-weight:600;
  font-size:.82rem;
  letter-spacing:.18em;
  color:#050505;
  background:var(--c88-yellow);
  padding:3px 9px;
  animation:c88Blink 1.8s steps(1,end) infinite;
}
.tt-head .tt-title{ color:var(--c88-cyan); }
.tt-head .tt-clock{ color:var(--c88-green); }

.tt-sect{
  display:block;
  margin:0 0 14px;
  padding:4px 12px;
  font-family:var(--c88-osd);
  font-size:1.5rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  border:1px solid var(--c88-line);
  border-top:0;
  background:var(--c88-bar-blue);
  color:var(--c88-cyan);
  animation:c88Sect 9s steps(1,end) infinite;
}
@keyframes c88Sect{
  0%,57%,59%,100%{ opacity:1; letter-spacing:.16em; }
  58%{ opacity:.55; letter-spacing:.2em; }
}
#terminal[data-asset="stocks"] .tt-sect,
#terminal[data-asset="us"] .tt-sect{ background:var(--c88-bar-green); color:var(--c88-green); }
#terminal[data-asset="commodities"] .tt-sect{ background:var(--c88-bar-amber); color:var(--c88-yellow); }

body.ch88[data-ch88="coinhawk"] .ab{
  font-family:var(--c88-osd) !important;
  font-size:1.2rem !important;
  font-weight:400 !important;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--c88-dim) !important;
  background:var(--c88-panel) !important;
  border:1px solid var(--c88-line) !important;
  padding:5px 13px;
}
body.ch88[data-ch88="coinhawk"] .ab svg{ display:none; }
body.ch88[data-ch88="coinhawk"] .ab .cnt{ font-family:var(--c88-mono); font-size:.6rem; color:var(--c88-faint); }
body.ch88[data-ch88="coinhawk"] .ab[aria-selected="true"]{ color:#050505 !important; background:var(--c88-cyan) !important; border-color:var(--c88-cyan) !important; }
body.ch88[data-ch88="coinhawk"] .ab[aria-selected="true"] .cnt{ color:#050505; }
body.ch88[data-ch88="coinhawk"] .chipbtn,
body.ch88[data-ch88="coinhawk"] .tab,
body.ch88[data-ch88="coinhawk"] .mtab,
body.ch88[data-ch88="coinhawk"] .gchip{
  font-family:var(--c88-mono) !important;
  font-size:.68rem !important;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--c88-dim) !important;
  background:var(--c88-panel) !important;
  border:1px solid var(--c88-line) !important;
}
body.ch88[data-ch88="coinhawk"] .tab svg{ display:none; }
body.ch88[data-ch88="coinhawk"] .chipbtn[aria-pressed="true"],
body.ch88[data-ch88="coinhawk"] .tab[aria-selected="true"],
body.ch88[data-ch88="coinhawk"] .mtab[aria-selected="true"],
body.ch88[data-ch88="coinhawk"] .gchip[aria-selected="true"]{
  color:#050505 !important; background:var(--c88-yellow) !important; border-color:var(--c88-yellow) !important;
}

body.ch88[data-ch88="coinhawk"] .ticker{
  border-top:1px solid var(--c88-line);
  border-bottom:1px solid var(--c88-line);
  background:var(--c88-panel-2);
  padding:7px 0;
  font-family:var(--c88-mono);
  font-size:.78rem;
}
body.ch88[data-ch88="coinhawk"] .ticker .tk::before{ content:"+++"; color:var(--c88-faint); margin-right:10px; }
body.ch88[data-ch88="coinhawk"] .ticker .tk .s{ color:var(--c88-cyan); font-weight:600; }
body.ch88[data-ch88="coinhawk"] .ticker .tk .p{ color:var(--c88-ink); }
body.ch88[data-ch88="coinhawk"] .ticker .pos{ color:var(--c88-green); }
body.ch88[data-ch88="coinhawk"] .ticker .neg{ color:var(--c88-red-soft); }
body.ch88[data-ch88="coinhawk"] .ticker .flat{ color:var(--c88-faint); }

body.ch88[data-ch88="coinhawk"] .tablewrap{ border:1px solid var(--c88-line); background:var(--c88-panel-2); overflow-x:auto; }
body.ch88[data-ch88="coinhawk"] table{ font-family:var(--c88-mono); font-variant-numeric:tabular-nums; border-collapse:collapse; width:100%; }
body.ch88[data-ch88="coinhawk"] thead th{
  font-family:var(--c88-osd);
  font-size:.62rem;
  font-weight:800;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--c88-yellow);
  background:var(--c88-bar-blue);
  border-bottom:1px solid var(--c88-line);
  padding:7px 10px;
  white-space:nowrap;
}
#terminal[data-asset="stocks"] thead th,
#terminal[data-asset="us"] thead th{ background:var(--c88-bar-green); color:var(--c88-green); }
#terminal[data-asset="commodities"] thead th{ background:var(--c88-bar-amber); color:var(--c88-yellow); }
body.ch88[data-ch88="coinhawk"] tbody td{
  font-size:.8rem;
  padding:6px 10px;
  border-bottom:1px solid var(--c88-line-soft);
  color:var(--c88-dim);
  background:transparent;
}
body.ch88[data-ch88="coinhawk"] tbody tr:hover td{ background:#141414; }
body.ch88[data-ch88="coinhawk"] td.rk{ color:var(--c88-yellow); font-weight:600; }
/* asset logos stay — they are how you find a row at a glance. They sit on a
   warm off-white chip so brand marks drawn for light backgrounds still read. */
body.ch88[data-ch88="coinhawk"] .coincell .logowrap{
  width:26px; height:26px;
  background:var(--c88-ink) !important;
  border:1px solid var(--c88-line);
  overflow:hidden;
}
body.ch88[data-ch88="coinhawk"] .coincell .coinlogo{
  background:var(--c88-ink) !important;
  padding:3px;
}
body.ch88[data-ch88="coinhawk"] .coincell .mono-av{
  font-family:var(--c88-mono);
  font-size:11px;
  font-weight:700;
}
body.ch88[data-ch88="coinhawk"] .coincell .nm{
  font-family:var(--c88-osd);
  font-size:.86rem;
  font-weight:700;
  letter-spacing:-.01em;
  text-transform:none;
  color:var(--c88-cyan);
}
body.ch88[data-ch88="coinhawk"] .coincell .sym{ color:var(--c88-faint); }
body.ch88[data-ch88="coinhawk"] .tierchip,
body.ch88[data-ch88="coinhawk"] .exchangechip{
  font-family:var(--c88-osd);
  font-size:.58rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--c88-faint);
  background:transparent;
  border:1px solid var(--c88-line);
  padding:1px 5px;
}
body.ch88[data-ch88="coinhawk"] td[data-px]{ color:#ffffff; font-weight:500; }
body.ch88[data-ch88="coinhawk"] .pos{ color:var(--c88-green) !important; }
body.ch88[data-ch88="coinhawk"] .neg{ color:var(--c88-red-soft) !important; }
body.ch88[data-ch88="coinhawk"] .flat,
body.ch88[data-ch88="coinhawk"] .dim{ color:var(--c88-faint) !important; }
body.ch88[data-ch88="coinhawk"] tbody .pos::before{ content:"\25B2 "; }
body.ch88[data-ch88="coinhawk"] tbody .neg::before{ content:"\25BC "; }

/* signal strength drawn as block characters ████░ */
body.ch88[data-ch88="coinhawk"] .scorecell{ display:flex; align-items:center; gap:8px; }
body.ch88[data-ch88="coinhawk"] .scorebar{
  position:relative;
  display:block;
  width:62px; height:13px;
  flex:none;
  background:#1c1c1a;
  overflow:hidden;
}
body.ch88[data-ch88="coinhawk"] .scorebar i{
  display:block;
  height:100%;
  background:var(--c88-green) !important;
  animation:c88Sig 2.8s steps(1,end) infinite;
}
@keyframes c88Sig{ 0%,88%,94%,100%{opacity:1} 89%,93%{opacity:.35} }
body.ch88[data-ch88="coinhawk"] .scorebar::after{
  content:"";
  position:absolute;
  inset:0;
  background:repeating-linear-gradient(90deg, transparent 0 10.4px, #050505 10.4px 12.4px);
}
body.ch88[data-ch88="coinhawk"] .scoreval{ color:var(--c88-green); font-size:.72rem; }

.tt-strip{
  margin:26px 0 0;
  padding:7px 12px;
  background:var(--c88-panel-2);
  border:1px solid var(--c88-line);
  font-family:var(--c88-osd);
  font-size:1.25rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  text-align:center;
  color:var(--c88-dim);
}
.tt-strip b{ color:var(--c88-red); font-weight:400; animation:c88Blink 1.4s steps(1,end) infinite; }

.tt-fastext{ display:grid; grid-template-columns:repeat(4,1fr); gap:4px; margin:8px 0 26px; }
.tt-fastext button{
  font-family:var(--c88-osd) !important;
  font-size:1.25rem !important;
  font-weight:400 !important;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#050505 !important;
  border:0 !important;
  padding:9px 6px;
  cursor:pointer;
  line-height:1;
}
.tt-fastext .fx-red{ background:var(--c88-red) !important; }
.tt-fastext .fx-green{ background:var(--c88-green) !important; }
.tt-fastext .fx-yellow{ background:var(--c88-yellow) !important; }
.tt-fastext .fx-blue{ background:var(--c88-cyan) !important; }
.tt-fastext button:hover{ color:#050505 !important; opacity:.82; }

body.ch88[data-ch88="coinhawk"] .panel,
body.ch88[data-ch88="coinhawk"] .mform,
body.ch88[data-ch88="coinhawk"] .mout,
body.ch88[data-ch88="coinhawk"] .cat,
body.ch88[data-ch88="coinhawk"] .gquiet{ background:var(--c88-panel) !important; border:1px solid var(--c88-line) !important; }
body.ch88[data-ch88="coinhawk"] .phead h2{
  font-family:var(--c88-osd);
  font-size:1.5rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--c88-ink);
  background:none;
  border:0;
  padding:0;
}
body.ch88[data-ch88="coinhawk"] .phead h2::before{ content:none; }
body.ch88[data-ch88="coinhawk"] .pmeta,
body.ch88[data-ch88="coinhawk"] .maplegend,
body.ch88[data-ch88="coinhawk"] .tab-note,
body.ch88[data-ch88="coinhawk"] .note,
body.ch88[data-ch88="coinhawk"] .mnote,
body.ch88[data-ch88="coinhawk"] .hlabel{ color:var(--c88-faint); }
body.ch88[data-ch88="coinhawk"] .overlay{ background:rgba(5,5,5,.86); }
body.ch88[data-ch88="coinhawk"] footer{ border-top:1px solid var(--c88-line); }

/* --- CoinHawk typography ---------------------------------------------
   The teletext colour language stays; the lettering does not. CoinHawk is a
   data product people make money decisions against, so it is set in a modern
   humanist sans with a real mono for figures. Both faces are already loaded
   by the page, so this costs nothing extra. Swapping the two font tokens
   flows the change through every CoinHawk rule above; the sizes below then
   re-tune for a proportional face, since VT323 sits very small on its em. */
html.ch88-coinhawk,
body.ch88[data-ch88="coinhawk"]{
  --c88-osd:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --c88-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}

body.ch88[data-ch88="coinhawk"] h1,
body.ch88[data-ch88="coinhawk"] h2,
body.ch88[data-ch88="coinhawk"] h3,
body.ch88[data-ch88="coinhawk"] h4{
  font-weight:800;
  line-height:1.14;
  letter-spacing:-.02em;
  text-transform:none;
}
body.ch88[data-ch88="coinhawk"] h1{ font-size:clamp(1.9rem,3.4vw,2.8rem); }
body.ch88[data-ch88="coinhawk"] h2{ font-size:clamp(1.3rem,2.2vw,1.75rem); }
body.ch88[data-ch88="coinhawk"] h3{ font-size:clamp(1rem,1.5vw,1.2rem); }

/* the scanner is a reading surface: no chroma tearing on its headings */
body.ch88[data-ch88="coinhawk"] h1,
body.ch88[data-ch88="coinhawk"] .splash-strap{
  text-shadow:none;
  animation:none;
}
body.ch88[data-ch88="coinhawk"] .c88-glitch::before,
body.ch88[data-ch88="coinhawk"] .c88-glitch::after{ display:none; }
body.ch88[data-ch88="coinhawk"] .splash-strap{
  font-weight:800;
  font-size:clamp(1.9rem,3.6vw,3rem);
  letter-spacing:-.035em;
  line-height:1.08;
  text-transform:none;
}

body.ch88[data-ch88="coinhawk"] .nav{
  font-size:.84rem;
  font-weight:700;
  letter-spacing:-.005em;
  text-transform:none;
}
body.ch88[data-ch88="coinhawk"] .ab{
  font-size:.84rem !important;
  font-weight:700 !important;
  letter-spacing:-.005em;
  text-transform:none;
  padding:7px 14px;
}
body.ch88[data-ch88="coinhawk"] .btn,
body.ch88[data-ch88="coinhawk"] .cta,
body.ch88[data-ch88="coinhawk"] button.btn,
body.ch88[data-ch88="coinhawk"] .buybtn{
  font-size:.84rem !important;
  font-weight:700 !important;
  letter-spacing:-.005em;
  text-transform:none;
  padding:10px 18px;
}
body.ch88[data-ch88="coinhawk"] .feat h3{
  font-size:1.05rem;
  font-weight:800;
  letter-spacing:-.02em;
  text-transform:none;
}
body.ch88[data-ch88="coinhawk"] .lv .big{
  font-family:var(--c88-mono);
  font-size:1.4rem;
  font-weight:700;
  letter-spacing:-.03em;
}
body.ch88[data-ch88="coinhawk"] .phead h2{
  font-size:1.05rem;
  font-weight:800;
  letter-spacing:-.02em;
  text-transform:none;
}

/* teletext furniture keeps its shape, at sans proportions */
body.ch88[data-ch88="coinhawk"] .tt-head{
  font-size:.86rem;
  font-weight:700;
  letter-spacing:.02em;
  text-transform:none;
  padding:9px 12px;
}
body.ch88[data-ch88="coinhawk"] .tt-sect{
  font-size:.76rem;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  padding:7px 12px;
}
body.ch88[data-ch88="coinhawk"] .tt-strip{
  font-size:.76rem;
  font-weight:600;
  letter-spacing:.1em;
  padding:10px 12px;
}
body.ch88[data-ch88="coinhawk"] .tt-fastext button{
  font-size:.78rem !important;
  font-weight:800 !important;
  letter-spacing:.12em;
  padding:11px 6px;
}

/* tabs and filter chips are controls, not readouts */
body.ch88[data-ch88="coinhawk"] .chipbtn,
body.ch88[data-ch88="coinhawk"] .tab,
body.ch88[data-ch88="coinhawk"] .mtab,
body.ch88[data-ch88="coinhawk"] .gchip{
  font-family:var(--c88-osd) !important;
  font-size:.78rem !important;
  font-weight:700;
  letter-spacing:-.005em;
  text-transform:none;
  padding:7px 13px;
}
body.ch88[data-ch88="coinhawk"] .status,
body.ch88[data-ch88="coinhawk"] .refresh-ctl,
body.ch88[data-ch88="coinhawk"] .fld label,
body.ch88[data-ch88="coinhawk"] .field label{
  font-family:var(--c88-osd);
  font-size:.68rem;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:none;
}

/* CoinHawk is a data tool, not found footage: no tube, no scanlines, no
   starfield, no glitch — flat dark theme and motion only where the UI
   itself needs it (live dots, hover states). */
html.ch88-coinhawk::before,
html.ch88-coinhawk::after{ display:none !important; }
html.ch88-coinhawk #starfield{ display:none !important; }
html.ch88-coinhawk .c88-noise,
html.ch88-coinhawk .c88-track,
html.ch88-coinhawk .c88-tear,
html.ch88-coinhawk .c88-flash,
html.ch88-coinhawk .c88-headswitch,
html.ch88-coinhawk .c88-osd,
html.ch88-coinhawk .c88-stamp{ display:none !important; }
html.ch88-coinhawk .panel{ animation:none !important; }

/* ---------- 16 · STANDALONE GAME PAGES ---------------------------------- */
body.ch88[data-ch88="game"]{
  --glass:#101010; --glass2:#161616; --glass-2:#161616;
  --stroke:#3a3934;
  --text:#e8e6df; --muted:#bdb9ac;
  --accent:#35d94c; --danger:#ff3b30;
  --hot:#ff3b30; --lime:#35d94c;
  --ring0:#e8e6df; --ring1:#4cc9ff; --ring2:#f5e13a; --ring3:#35d94c;
  --ring4:#ff3b30; --ring5:#bdb9ac; --ring6:#4cc9ff;
}
body.ch88[data-ch88="game"] header,
body.ch88[data-ch88="game"] .topbar{
  background:var(--c88-bg) !important;
  border-bottom:1px solid var(--c88-line);
  color:var(--c88-ink);
}
body.ch88[data-ch88="game"] .topbar{ top:calc(var(--c88-bar-h) + 10px); }
body.ch88[data-ch88="game"] header h1,
body.ch88[data-ch88="game"] .site-title{ font-family:var(--c88-osd); letter-spacing:.06em; text-transform:uppercase; }
body.ch88[data-ch88="game"] .site-sub,
body.ch88[data-ch88="game"] header .sub{ font-family:var(--c88-mono); font-size:.68rem; letter-spacing:.14em; color:var(--c88-faint); }
body.ch88[data-ch88="game"] .site-logo img{ filter:drop-shadow(2px 0 0 rgba(255,0,60,.5)) drop-shadow(-2px 0 0 rgba(0,220,255,.5)); }
body.ch88[data-ch88="game"] .panel,
body.ch88[data-ch88="game"] .stage,
body.ch88[data-ch88="game"] .pill{ background:var(--c88-panel) !important; border:1px solid var(--c88-line) !important; }
body.ch88[data-ch88="game"] button,
body.ch88[data-ch88="game"] .pill{ font-family:var(--c88-mono); letter-spacing:.1em; text-transform:uppercase; color:var(--c88-ink); }
/* never touch the drawn game surface itself */
body.ch88[data-ch88="game"] canvas{ filter:none; animation:none; }

/* ============================================================
   17 · CONTENT ANIMATION
   The page does not just sit under the glitch — it plays in.
   ============================================================ */

/* sections lock on as the head finds them */
body.ch88 .reveal{ opacity:0; transform:none; transition:none; }
body.ch88 .reveal.in{ animation:c88SigIn .52s steps(5,end) both; }
@keyframes c88SigIn{
  0%  { opacity:0;   transform:translate3d(-22px,0,0) skewX(11deg); }
  30% { opacity:.45; transform:translate3d(14px,0,0)  skewX(-7deg); }
  60% { opacity:.8;  transform:translate3d(-6px,0,0)  skewX(3deg); }
  100%{ opacity:1;   transform:none; }
}

/* children stagger in behind their section */
body.ch88 .reveal.in > *,
body.ch88 .tiles.in .tile,
body.ch88 .grid-2.in > *{ animation:c88ChildIn .42s steps(4,end) both; }
body.ch88 .reveal.in > *:nth-child(2),
body.ch88 .tiles.in .tile:nth-child(2){ animation-delay:.07s; }
body.ch88 .reveal.in > *:nth-child(3),
body.ch88 .tiles.in .tile:nth-child(3){ animation-delay:.14s; }
body.ch88 .reveal.in > *:nth-child(4),
body.ch88 .tiles.in .tile:nth-child(4){ animation-delay:.21s; }
body.ch88 .reveal.in > *:nth-child(n+5){ animation-delay:.28s; }
@keyframes c88ChildIn{
  0%  { opacity:0;   transform:translate3d(0,10px,0); }
  50% { opacity:.6;  transform:translate3d(-4px,0,0); }
  100%{ opacity:1;   transform:none; }
}

/* list items type down the page, once their section has locked on */
body.ch88 .reveal.in .list-clean li{ animation:c88ChildIn .4s steps(4,end) both; }
body.ch88 .reveal.in .list-clean li:nth-child(2){ animation-delay:.06s; }
body.ch88 .reveal.in .list-clean li:nth-child(3){ animation-delay:.12s; }
body.ch88 .reveal.in .list-clean li:nth-child(4){ animation-delay:.18s; }
body.ch88 .reveal.in .list-clean li:nth-child(5){ animation-delay:.24s; }
body.ch88 .reveal.in .list-clean li:nth-child(n+6){ animation-delay:.3s; }

/* the whole shell locks on at load */
body.ch88 main,
body.ch88 .wrap{ animation:c88Lock .55s steps(4,end) both; }
@keyframes c88Lock{
  0%  { opacity:0;  transform:translate3d(0,-14px,0) skewX(9deg); }
  40% { opacity:.6; transform:translate3d(6px,5px,0) skewX(-4deg); }
  70% { opacity:.9; transform:translate3d(-3px,0,0)  skewX(2deg); }
  100%{ opacity:1;  transform:none; }
}

/* panels breathe on their channel edge */
body.ch88 .panel{ animation:c88Edge 6.5s steps(1,end) infinite; }
@keyframes c88Edge{
  0%,88%,92%,100%{ border-left-color:var(--c88-accent); }
  89%,91%{ border-left-color:var(--c88-line); }
}

/* cassettes jolt on approach */
body.ch88 .tile:hover{ animation:c88Jolt .3s steps(2,end) 2; }
@keyframes c88Jolt{
  0%,100%{ transform:translate3d(0,0,0); }
  25%{ transform:translate3d(-3px,1px,0); }
  50%{ transform:translate3d(3px,-1px,0); }
  75%{ transform:translate3d(-2px,0,0); }
}
body.ch88 .nav a:hover,
body.ch88 .gurnerman-nav a:hover,
body.ch88 .btn:hover,
body.ch88 .cta:hover,
body.ch88 button.btn:hover,
body.ch88 .footer-links a:hover,
body.ch88 .tt-fastext button:hover{ animation:c88Jolt .22s steps(2,end) 3; }

/* footage rolls and drops chroma */
body.ch88 .c88-frame img,
body.ch88 .cinema img,
body.ch88 .cinema video,
body.ch88 .banner img,
body.ch88 .banner video,
body.ch88 .gsa-release-art img{ will-change:transform; animation:c88Footage 11s steps(1,end) infinite; }
@keyframes c88Footage{
  0%,40%,43%,82%,84%,100%{ transform:translate3d(0,0,0) scale(1); }
  41%{ transform:translate3d(-9px,0,0) scale(1.012); }
  42%{ transform:translate3d(6px,2px,0) scale(1.012); }
  83%{ transform:translate3d(4px,-3px,0) scale(1.008); }
}

@keyframes c88Blink{ 0%,72%,85%,100%{opacity:1} 73%,84%{opacity:.25} }
@keyframes c88Osd{
  0%,87%,90%,100%{ transform:translate3d(0,0,0); }
  88%{ transform:translate3d(-3px,0,0); }
  89%{ transform:translate3d(2px,-1px,0); }
}

/* ---------- 18 · CHROME GLITCH LAYER ------------------------------------ */
.c88-osd{ will-change:transform; animation:c88Osd 6.3s steps(1,end) infinite; }
.c88-osd-bot{ animation-duration:8.1s; animation-delay:-2s; }
.c88-osd .c88-c span{ animation:c88Blink 2.2s steps(1,end) infinite; }
.c88-stamp{ animation:c88Osd 4.7s steps(1,end) infinite; }

/* ============================================================
   18a · THE ROOT SCALE LEVER
   Every size in this theme is in rem, so the root font-size scales the whole
   design in one move. A narrow CSS viewport on a physically wide window means
   the browser or OS is scaling up (Windows display scaling, or a browser zoom
   set once and forgotten); the design steps down to compensate so the page
   stays a desktop page instead of a magnified phone one.
   ============================================================ */
/* One fluid lever instead of stepped breakpoints: the root size tracks the
   viewport continuously, so the design is proportional at ANY width. A window
   reporting 600 CSS px (heavy display scaling or browser zoom) gets an 11px
   root; a true 1600px desktop gets 16px. There is no width at which the page
   can render as a magnified phone layout. */
html.ch88{ font-size:clamp(10.5px, 0.62vw + 7.4px, 16px); }

/* The site theme swaps the nav for a hamburger at 880px, which is a phone
   pattern on what is still a desktop-shaped window. The Channel 88 nav is far
   more compact, so it stays a real nav — wrapping onto a second row if it must
   — until the viewport is genuinely narrow. */
@media (min-width:601px){
  body.ch88 .nav-toggle{ display:none !important; }
  body.ch88 .nav{
    position:static !important;
    flex-direction:row !important;
    flex-wrap:wrap;
    justify-content:flex-end;
    align-items:center;
    margin:0 !important;
    padding:0 !important;
    min-width:0 !important;
    background:none !important;
    border:0 !important;
    display:flex !important;
    gap:1px 2px;
  }
  body.ch88 .nav a{ padding:2px 6px !important; }
}

/* ---------- 18b · COMPACT DESKTOP ---------------------------------------
   Plenty of people run Windows display scaling at 125-200%, or a browser zoom
   they set once and forgot. A 1920px monitor at 200% reports an ~880px CSS
   viewport, which tripped the site theme's mobile nav and made every page read
   as a blown-up phone layout. These tiers keep it a desktop page down to 760px
   and pull the chrome in as the viewport narrows. */
@media (max-width:1300px){
  :root{ --c88-bar-h:24px; }
  .c88-osd{ font-size:1.06rem; }
  .c88-stamp{ font-size:1rem; }
  body.ch88 h1{ font-size:clamp(2rem,4.4vw,3.2rem); }
  body.ch88 h2{ font-size:clamp(1.4rem,2.5vw,1.95rem); }
  body.ch88 .brand img,
  body.ch88 .gurnerman-brand img{ height:38px; }
  body.ch88 .brand-copy .title,
  body.ch88 .gurnerman-brand-copy .gurnerman-title{ font-size:1.3rem; letter-spacing:.09em; }
  body.ch88 .header-wrap,
  body.ch88 .gurnerman-taskbar-wrap{ padding:10px 16px; min-height:0; }
  body.ch88 .nav a,
  body.ch88 .gurnerman-nav a{ font-size:1rem; padding:2px 6px; }
}

/* keep the real nav rather than the site theme's 880px dropdown */
@media (min-width:761px) and (max-width:880px){
  body.ch88 .nav-toggle{ display:none !important; }
  body.ch88 .nav{
    position:static;
    flex-direction:row;
    flex-wrap:wrap;
    justify-content:flex-end;
    margin:0;
    padding:0;
    min-width:0;
    background:none;
    border:0;
    display:flex;
  }
  body.ch88 .nav a{ padding:2px 5px; font-size:.94rem; }
}

@media (max-width:1050px){
  /* the burned-in page stamp starts colliding with body copy here, and the
     OSD bars already carry the same identity */
  .c88-stamp{ display:none; }
  body.ch88 .brand-copy .eyebrow,
  body.ch88 .gurnerman-brand-copy .gurnerman-kicker{ display:none; }
  body.ch88 h1{ font-size:clamp(1.9rem,5.2vw,2.6rem); }
  body.ch88 .nav a,
  body.ch88 .gurnerman-nav a{ font-size:.9rem; padding:2px 4px; letter-spacing:.05em; }
  body.ch88 .c88-slate{ font-size:1rem; letter-spacing:.16em; }
  body.ch88 .tiles::before{ font-size:1rem; }
  body.ch88 .lead{ font-size:.9rem; }
}

/* ---------- 19 · MOBILE -------------------------------------------------- */
@media (max-width:860px){
  :root{ --c88-bar-h:24px; }
  .c88-osd{ font-size:1rem; letter-spacing:.03em; gap:6px; padding:0 8px; }
  .c88-osd .c88-wide{ display:none; }
  .c88-osd-bot .c88-c{ display:none; }
  .c88-headswitch{ height:8px; }
  .c88-stamp{ font-size:.94rem; }
  body.ch88 .c88-frame::after,
  body.ch88 .banner::after{ font-size:.75rem; max-width:58%; }
  body.ch88 .nav{ background:var(--c88-bg); border:1px solid var(--c88-line); border-top:0; }
  body.ch88 .nav a{ padding:9px 12px; }
  body.ch88 .tiles{ grid-template-columns:1fr; }
  body.ch88 .tile{ padding-top:70px; }
}
@media (max-width:900px){
  body.ch88 .dl-grid{ grid-template-columns:1fr; }
}
@media (max-width:640px){
  body.ch88 .dl-meta{ grid-template-columns:1fr; }
  body.ch88 .banner-copy,
  body.ch88 .panel,
  body.ch88 .card{ padding:18px 14px; }
  body.ch88 .banner-copy{ padding-bottom:44px; }
  /* teletext grids scroll sideways rather than crush */
  body.ch88[data-ch88="coinhawk"] .tablewrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
  body.ch88[data-ch88="coinhawk"] table{ min-width:640px; }
  .tt-fastext{ grid-template-columns:repeat(2,1fr); }
  .tt-head{ font-size:1.15rem; gap:8px; }
  .tt-strip{ font-size:1.05rem; }
}

/* ---------- 19 · GSA: LOST IN SPACE — LIVE PREVIEW ---------------------- */
/* The flagship poster reads as footage actively playing on the tube, not a
   still photo: the frame itself breathes with a slow handheld zoom while a
   dedicated scanline sweep sits over the art. */
body.ch88 .gsa-release-art,
body.ch88 .gsa-game-poster-wrap{
  overflow:hidden;
  animation:c88CrtZoom 13s ease-in-out infinite;
  transform-origin:52% 40%;
  will-change:transform;
}
body.ch88 .gsa-game-poster-wrap{ border-radius:18px; }
@keyframes c88CrtZoom{
  0%,100%{ transform:scale(1); }
  50%{ transform:scale(1.045); }
}
body.ch88 .gsa-release-art::after,
body.ch88 .gsa-game-poster-wrap::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:4;
  pointer-events:none;
  background:repeating-linear-gradient(0deg,
    rgba(255,255,255,.07) 0 1px,
    transparent 1px 3px);
  mix-blend-mode:overlay;
  will-change:transform;
  animation:c88Scan 1.6s linear infinite;
}

/* ---------- 20 · REDUCED MOTION ----------------------------------------- */
/* Everything above is decorative. If the viewer asks for less motion the
   whole thing stops dead and settles into a still frame. */
@media (prefers-reduced-motion:reduce){
  html.ch88::before,
  html.ch88::after,
  body.ch88 *,
  body.ch88 *::before,
  body.ch88 *::after{ animation:none !important; transition:none !important; }
  .c88-tear, .c88-flash{ display:none; }
  .c88-track{ opacity:.4; }
  .c88-noise{ opacity:.04; }
  body.ch88 .c88-glitch::before,
  body.ch88 .c88-glitch::after,
  body.ch88 .brand-copy .title::before,
  body.ch88 .brand-copy .title::after,
  body.ch88 .gurnerman-brand-copy .gurnerman-title::before,
  body.ch88 .gurnerman-brand-copy .gurnerman-title::after{ display:none; }
  body.ch88 .reveal{ opacity:1 !important; }
  body.ch88 main,
  body.ch88 .wrap,
  body.ch88 .reveal.in > *,
  body.ch88 .list-clean li{ opacity:1; transform:none; }
}