/* ═══════════════════════════════════════════════════════════════
   SPENCER NAKAMURA — CASE #2026 (hub, Case File language)
   Forensic, cinematic, precise. Dark room, one signal red.
   Surfaces stay calm; the instrumentation is what's alive.
   Worlds live in /worlds/<name>/ as separate sites; here they
   are exhibits in a filing-cabinet strip gallery.
   ═══════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

:root {
  /* color */
  --bg: #050505;  --surface: #0a0a0a;  --surface-deep: #020202;
  --text: #e0e0e0;  --text-2: #a3a3a3;  --text-3: #8a8a8a;
  --line: #555;  --chrome: #8a8a8a;
  --accent: #ff2a2a;
  --accent-08: #ff2a2a14; --accent-20: #ff2a2a33; --accent-30: #ff2a2a4d;
  --ok: #22c55e;
  /* type */
  --font-display: "Playfair Display", "Times New Roman", serif;
  --font-body: "Inter", system-ui, sans-serif;
  --font-tech: "Rethink Sans", "Inter", sans-serif;
  --fs-h2: clamp(2.2rem, 5vw, 4.4rem);
  --fs-body: 1.05rem;  --fs-label: 0.85rem;  --fs-micro: 0.65rem;
  /* motion */
  --ease-out-expo: cubic-bezier(.19, 1, .22, 1);
  --t-fast: .3s;  --t-slow: .6s;
  /* shape */
  --pad-card: 2rem;
  --glow-accent: 0 0 8px var(--accent-30);
}

.skip {
  position: absolute; left: 12px; top: 12px; z-index: 30000;
  padding: 10px 14px;
  background: var(--accent); color: #0a0a0a; /* ≥5.3:1 on the red plate (lift v9 Step 2) */
  font-family: var(--font-tech); font-size: var(--fs-label); letter-spacing: 1px;
  text-transform: uppercase; text-decoration: none;
  clip-path: inset(50%);
}
.skip:focus {
  clip-path: none;
  outline: 2px solid #fff; outline-offset: 2px;
}
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.7;
  overflow-x: hidden;
}

/* ═══ FILM GRAIN ═════════════════════════════════════════════ */
.grain {
  position: fixed; inset: 0; z-index: 998; pointer-events: none;
  opacity: .025; /* thinned (lift v9 chrome diet) */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='500' height='500'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='500' height='500' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 500px 500px;
}

/* ═══ MOTION SCAFFOLDING (elements injected by motion.js) ════ */
.sec__title, .contact__big { position: relative; }
.strip__scan {
  position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: var(--accent); opacity: 0; pointer-events: none; z-index: 2;
}
.frame__flash {
  position: absolute; inset: 0; background: #fff; opacity: 0;
  pointer-events: none; z-index: 2;
}

/* ═══ SCROLL-PROGRESS HAIRLINE (the tape counter) ════════════ */
.scrollprog {
  position: fixed; top: 51px; left: 0; right: 0; height: 2px; z-index: 1001;
  background: var(--accent); opacity: .8;
  transform: scaleX(0); transform-origin: 0 50%;
  pointer-events: none;
}

/* ═══ FIXED HUD FRAME (quiet corner stamp only) ══════════════ */
.hudframe span {
  position: fixed; z-index: 900; pointer-events: none;
  font-family: var(--font-tech); font-size: var(--fs-micro);
  letter-spacing: 2px; text-transform: uppercase; color: var(--chrome);
  opacity: .3; /* quieted (lift v9 chrome diet) */
}
.hudframe__tl { top: 62px; left: 14px; }
@media (max-width: 900px) { .hudframe { display: none; } }

/* ═══ DOTS ═══════════════════════════════════════════════════ */
.dot { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }
.dot--sig { margin-left: 8px; opacity: .7; }

.emblem { width: 26px; height: 26px; display: inline-block; }
.emblem svg { width: 100%; height: 100%; }

/* barcode divider */
.barcode {
  width: 110px; height: 14px; margin-bottom: 26px;
  background: repeating-linear-gradient(to right, var(--line) 0 2px, transparent 2px 5px);
}

/* corner brackets — the #1 motif. 4 <i class="c c--xx"> per panel */
.c {
  position: absolute; width: 10px; height: 10px;
  border: 0 solid var(--chrome); opacity: 0;
  transition: all var(--t-fast); pointer-events: none;
}
.c--tl { top: 0; left: 0; border-width: 1px 0 0 1px; }
.c--tr { top: 0; right: 0; border-width: 1px 1px 0 0; }
.c--bl { bottom: 0; left: 0; border-width: 0 0 1px 1px; }
.c--br { bottom: 0; right: 0; border-width: 0 1px 1px 0; }
.strip:hover .c, .frame:hover .c, .tier:hover .c,
.strip:focus-within .c, .frame:focus-within .c, .tier:focus-within .c {
  opacity: 1; width: 20px; height: 20px; border-color: #fff;
}

/* ═══ HUD TOP BAR ════════════════════════════════════════════ */
.hud {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 12px clamp(14px, 3vw, 32px);
  background: #050505e6; backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.hud__left { display: flex; align-items: center; gap: 14px; min-width: 0; overflow: hidden; }
.hud__wordmark {
  font-family: var(--font-display); font-size: 1.15rem; font-weight: 600;
  letter-spacing: -0.02em; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.hud__wordmark em { color: var(--accent); font-style: italic; }
.hud__links { display: flex; gap: clamp(12px, 2.5vw, 28px); }
.hud__links a {
  font-family: var(--font-tech); font-size: var(--fs-micro); letter-spacing: 2px;
  color: var(--text-2); text-transform: uppercase;
  transition: color var(--t-fast);
}
.hud__links a:hover { color: var(--accent); }
.hud__right {
  display: flex; align-items: center; gap: 16px;
  font-family: var(--font-tech); font-size: var(--fs-micro); letter-spacing: 2px;
  color: var(--text-2); text-transform: uppercase; white-space: nowrap;
}
@media (max-width: 900px) { .hud__case { display: none; } }
@media (max-width: 680px) {
  .hud { gap: 10px; }
  .hud__right { display: none; }
  .hud__links a { padding: 8px 2px; letter-spacing: 1.5px; }
}

/* ═══ HERO — shop window ═══════════════════════════════════ */
.hero {
  min-height: auto;
  display: grid; place-content: start center; text-align: center;
  gap: 14px; padding: 88px 20px 28px; position: relative;
  max-width: 1120px; margin: 0 auto;
}
.hero__kicker {
  font-family: var(--font-tech); font-size: var(--fs-label); letter-spacing: 3px;
  color: var(--text-2); text-transform: uppercase;
}
.hero__offer {
  font-family: var(--font-tech); font-weight: 700;
  font-size: clamp(1.85rem, 4.6vw, 3.25rem); letter-spacing: -0.03em; line-height: 1.05;
  color: var(--text); text-transform: uppercase;
}
.hero__offer span { color: var(--accent); }
.hero__offer::after {
  content: ""; display: block; width: 64px; height: 2px;
  background: var(--accent); margin: 16px auto 0;
}
.hero__byline {
  font-family: var(--font-display); font-style: italic; font-weight: 400;
  font-size: clamp(1.05rem, 2vw, 1.35rem); color: var(--text-2);
}
.hero__actions {
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: center;
  margin-top: 6px;
}
.hero__cta {
  font-family: var(--font-tech); font-size: var(--fs-micro); letter-spacing: 2px;
  color: var(--text-2); text-transform: uppercase; white-space: nowrap;
  border: 1px solid var(--line); padding: 12px 18px;
  transition: all var(--t-fast);
}
.hero__cta:hover { border-color: var(--accent); color: var(--text); box-shadow: var(--glow-accent); }
/* primary = a real button: larger, bolder, solid accent fill, dark label (≈5.5:1) */
.hero__cta--primary {
  border-color: var(--accent); color: #0a0a0a; font-weight: 700;
  font-size: 0.92rem; padding: 15px 24px;
  background: var(--accent);
}
.hero__cta--primary:hover { background: #ff4747; color: #0a0a0a; box-shadow: var(--glow-accent); }

/* fold material peeks — product objects in the shop window */
.hero__peeks {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  width: min(100%, 980px);
  margin: 22px auto 0;
  text-align: left;
}
.peek {
  position: relative;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 8px;
  min-height: 200px;
  padding: 0;
  border: 1px solid #6f6f6f;
  overflow: hidden;
  transition: border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
}
.peek:hover { transform: translateY(-3px); }
.peek__glass {
  flex: 1; min-height: 120px; position: relative; overflow: hidden;
  border-bottom: 1px solid #ffffff18;
}
.peek__meta { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 4px; }
.peek__name {
  font-size: clamp(0.95rem, 1.6vw, 1.25rem); line-height: 1.05;
  color: inherit; overflow-wrap: anywhere;
}
.peek__for {
  font-family: var(--font-tech); font-size: 0.6rem; letter-spacing: 1.5px;
  text-transform: uppercase; opacity: .78;
}
@media (max-width: 860px) {
  .hero__peeks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .peek:last-child { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
  .hero__peeks { grid-template-columns: 1fr; }
  .peek:last-child { grid-column: auto; }
  .peek { min-height: 170px; }
}

/* ═══ SECTIONS ═══════════════════════════════════════════════ */
.sec { padding: clamp(80px, 12vw, 140px) clamp(18px, 5vw, 56px); }
.sec--deep { background: var(--surface-deep); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.sec > * { max-width: 1120px; margin-left: auto; margin-right: auto; }
.sec__kicker {
  font-family: var(--font-tech); font-size: var(--fs-label); letter-spacing: 3px;
  color: var(--text-2); text-transform: uppercase; margin-bottom: 18px;
}
.sec__kicker::before { content: "// "; color: var(--accent); }
.sec__title {
  font-family: var(--font-display); font-weight: 600;
  font-size: var(--fs-h2); letter-spacing: -0.04em; line-height: 1.02;
  margin-bottom: 22px;
}
.sec__title em { font-style: italic; color: var(--accent); }
.sec__body { color: #ccc; max-width: 620px; margin-bottom: 48px; }
.sec__footnote {
  margin-top: 26px; font-family: var(--font-tech); font-size: var(--fs-micro);
  letter-spacing: 2px; color: var(--text-3); text-transform: uppercase;
}

/* ═══ ACTIVE CASES — evidence strips (specimen gallery) ══════
   Layout is the LOOK LIFT v6/v7 grid below; this block owns the
   card chrome only. */
.strips { position: relative; }
.strip {
  position: relative; min-width: 0;
  display: flex; flex-direction: column; gap: 10px;
  background: var(--surface-deep);
  border: 1px solid #6f6f6f;
  padding: var(--pad-card) 1.4rem;
  overflow: hidden;
  transition: border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
}
.strip:hover, .strip:focus-within {
  border-color: var(--accent);
  box-shadow: var(--glow-accent);
}
.strip:hover { background: #060404; }
.strip__id {
  font-family: var(--font-tech); font-size: var(--fs-micro); letter-spacing: 2px;
  color: var(--text-2); text-transform: uppercase; display: flex; align-items: center;
}
.strip__name { font-size: clamp(1.3rem, 2.4vw, 2rem); line-height: 1.05; color: var(--text); overflow-wrap: anywhere; }
.strip__for, .strip__band {
  font-family: var(--font-tech); font-size: var(--fs-micro); letter-spacing: 1.5px;
  color: var(--text-2); text-transform: uppercase;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.strip__band { color: var(--text-3); }
.strip__bones {
  font-family: var(--font-tech); font-size: var(--fs-micro); letter-spacing: .5px;
  color: var(--text-3);
  max-height: 0; opacity: 0; overflow: hidden;
  transition: all var(--t-slow) var(--ease-out-expo);
}
.strip:hover .strip__bones,
.strip:focus-within .strip__bones { max-height: 3em; opacity: 1; }
.strip__cta {
  font-family: var(--font-tech); font-size: var(--fs-micro); letter-spacing: 2px;
  color: var(--accent); text-transform: uppercase;
  border-top: 1px solid var(--line); padding-top: 12px; margin-top: 4px;
}
.strip:hover .strip__cta,
.strip:focus-within .strip__cta { color: #fff; }

/* each specimen keeps its world's face — evidence, not chrome */
.strip__name--ritual   { font-family: 'Pirata One', 'Palatino Linotype', Palatino, Georgia, serif; letter-spacing: .05em; }
.strip__name--zine     { font-family: 'Permanent Marker', 'Segoe Print', cursive; transform: rotate(-1.5deg); }
.strip__name--tape     { font-family: 'Share Tech Mono', Consolas, 'Courier New', monospace; }
.strip__name--chapbook { font-family: 'Italiana', 'EB Garamond', Georgia, 'Times New Roman', serif; font-style: normal; letter-spacing: .04em; }
.strip__name--terminal { font-family: 'IBM Plex Mono', Consolas, 'Courier New', monospace; font-weight: 600; }

/* material peeks — strips read as objects before click */
.strip--zine {
  background:
    radial-gradient(rgba(20, 18, 16, 0.06) 1px, transparent 1.4px),
    #f2f0eb;
  background-size: 9px 11px, auto;
  color: #141210;
  border-color: #c8c4bc;
}
.strip--zine .strip__id,
.strip--zine .strip__for,
.strip--zine .strip__band,
.strip--zine .strip__bones { color: #3d3934; }
.strip--zine .strip__name { color: #141210; }
.strip--zine .strip__cta { color: #d0342c; border-top-color: #c8c4bc; }
.strip--zine:hover {
  background:
    radial-gradient(rgba(20, 18, 16, 0.07) 1px, transparent 1.4px),
    #ebe8e0;
  background-size: 9px 11px, auto;
  border-color: #d0342c;
  box-shadow: 0 0 0 1px #d0342c55;
}
.strip--zine:hover .strip__cta { color: #8b1e18; }
.strip--zine:hover .c { border-color: #141210; }

.strip--chapbook {
  background: #f6efe3;
  color: #2e2419;
  border-color: rgba(46, 36, 25, 0.3);
}
.strip--chapbook .strip__id,
.strip--chapbook .strip__for,
.strip--chapbook .strip__band,
.strip--chapbook .strip__bones { color: #4d4030; }
.strip--chapbook .strip__name { color: #2e2419; }
.strip--chapbook .strip__cta { color: #9c4a2f; border-top-color: rgba(46, 36, 25, 0.3); }
.strip--chapbook:hover {
  background: #f0e6d6;
  border-color: #9c4a2f;
  box-shadow: none;
}
.strip--chapbook:hover .strip__cta { color: #6e3220; }
.strip--chapbook:hover .c { border-color: #2e2419; }

/* Ritual — tarot stock + brass edge */
.strip--ritual {
  background:
    repeating-linear-gradient(
      -18deg,
      transparent 0 7px,
      rgba(139, 105, 20, 0.05) 7px 8px
    ),
    linear-gradient(145deg, #1a1410 0%, #0c0908 55%, #100c0a 100%);
  color: #e8dcc8;
  border-color: #2a221c;
  box-shadow: inset 0 0 0 1px #8b691455, inset 0 2px 10px #c9a22722;
}
.strip--ritual .strip__id,
.strip--ritual .strip__for,
.strip--ritual .strip__band,
.strip--ritual .strip__bones { color: #b8a88a; }
.strip--ritual .strip__name { color: #f0e6d2; }
.strip--ritual .strip__cta { color: #c9a227; border-top-color: #3a3024; }
.strip--ritual:hover {
  border-color: #c9a227;
  box-shadow: inset 0 0 0 1px #c9a22788, inset 0 2px 14px #c9a22733;
  background:
    repeating-linear-gradient(
      -18deg,
      transparent 0 7px,
      rgba(139, 105, 20, 0.08) 7px 8px
    ),
    linear-gradient(145deg, #221a14 0%, #120e0c 55%, #16100c 100%);
}
.strip--ritual:hover .strip__cta { color: #e8d080; }
.strip--ritual:hover .c { border-color: #c9a227; }

/* Tape — VHS label band + CRT scanlines */
.strip--tape {
  background:
    repeating-linear-gradient(
      0deg,
      transparent 0 2px,
      rgba(255, 255, 255, 0.035) 2px 3px
    ),
    linear-gradient(#0b0d0c, #0b0d0c);
  color: #d8e0d4;
  border-color: #1a1f1c;
  box-shadow: inset 0 0 0 3px #1a1f1c, inset 0 0 22px #000;
  padding-top: calc(var(--pad-card) + 10px);
}
.strip--tape::before {
  content: "";
  position: absolute; left: 0; right: 0; top: 0; height: 26px;
  background: linear-gradient(#efe06a, #c4a020);
  border-bottom: 1px solid #8a7010;
  pointer-events: none;
}
.strip--tape .strip__id,
.strip--tape .strip__for,
.strip--tape .strip__band,
.strip--tape .strip__bones { color: #9aab9a; }
.strip--tape .strip__name { color: #e8f0e4; }
.strip--tape .strip__cta { color: #e8d44d; border-top-color: #2a322c; }
.strip--tape:hover {
  border-color: #e8d44d;
  box-shadow: inset 0 0 0 3px #1a1f1c, inset 0 0 22px #000, 0 0 0 1px #e8d44d55;
  background:
    repeating-linear-gradient(
      0deg,
      transparent 0 2px,
      rgba(255, 255, 255, 0.05) 2px 3px
    ),
    linear-gradient(#101412, #0b0d0c);
}
.strip--tape:hover .strip__cta { color: #fff3a0; }
.strip--tape:hover .c { border-color: #e8d44d; }

/* Terminal — phosphor grid + receipt stripe */
.strip--terminal {
  background:
    radial-gradient(rgba(51, 255, 102, 0.12) 0.7px, transparent 1.1px),
    #0a0c0a;
  background-size: 8px 8px, auto;
  color: #c8f5d4;
  border-color: #2a2e35;
  border-left: 3px dashed #33ff66;
  opacity: 1;
}
.strip--terminal .strip__id,
.strip--terminal .strip__for,
.strip--terminal .strip__band,
.strip--terminal .strip__bones { color: #7cbc8a; }
.strip--terminal .strip__name {
  color: #b8ffcc;
  text-shadow: 0 0 8px rgba(51, 255, 102, 0.35);
}
.strip--terminal .strip__cta { color: #33ff66; border-top-color: #1e3224; }
.strip--terminal:hover {
  border-color: #33ff66;
  box-shadow: 0 0 0 1px #33ff6644, inset 0 0 18px #33ff6611;
  background:
    radial-gradient(rgba(51, 255, 102, 0.16) 0.7px, transparent 1.1px),
    #0c100c;
  background-size: 8px 8px, auto;
}
.strip--terminal:hover .strip__cta { color: #9dffb5; }
.strip--terminal:hover .c { border-color: #33ff66; }

@media (max-width: 860px) {
  .strip__bones { max-height: 3em; opacity: 1; }
  .strip__name { white-space: normal; }
}

/* ═══ EVIDENCE — contact sheet ═══════════════════════════════ */
.sheet { display: grid; gap: 4px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.frame {
  aspect-ratio: 4 / 5; position: relative; overflow: hidden;
  border: 1px solid var(--line); background: var(--surface);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.frame:hover { border-color: var(--accent); box-shadow: var(--glow-accent); }
.frame img {
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(.25) contrast(1.05);
  transition: filter var(--t-slow) var(--ease-out-expo);
}
.frame:hover img { filter: grayscale(0) contrast(1.02); }
.frame figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 10px 12px;
  font-family: var(--font-tech); font-size: var(--fs-micro); letter-spacing: 1px;
  text-transform: uppercase;
  background: linear-gradient(transparent, #000000cc);
  color: #ccc;
}
.frame figcaption em { display: block; font-style: normal; color: var(--text-3); letter-spacing: 2px; margin-top: 3px; }

/* ═══ FIELD LOG — manifest table ═════════════════════════════ */
.log { border-top: 1px solid var(--line); }
.log__row {
  display: grid; grid-template-columns: 105px 190px 1fr auto;
  gap: 16px; align-items: baseline;
  padding: 14px 10px; border-bottom: 1px solid var(--line);
  transition: background var(--t-fast), border-color var(--t-fast);
}
.log__row:not(.log__row--head):hover { background: var(--accent-08); border-bottom-color: var(--accent); }
.log__row--head span {
  font-family: var(--font-tech); font-size: var(--fs-micro); letter-spacing: 3px;
  color: var(--text-3); text-transform: uppercase;
}
.log__date, .log__venue {
  font-family: var(--font-tech); font-size: var(--fs-label); letter-spacing: 1px;
  color: var(--text-2);
}
.log__act { font-family: var(--font-tech); font-size: .95rem; letter-spacing: .5px; color: var(--text); text-transform: uppercase; }
.log__chip {
  font-family: var(--font-tech); font-size: var(--fs-micro); letter-spacing: 2px;
  color: #bbb; border: 1px solid var(--line); padding: 2px 8px;
  background: #0000004d; text-transform: uppercase;
}
.log__row:hover .log__chip { border-color: var(--accent); color: #fff; background: var(--accent-08); }
@media (max-width: 720px) {
  .log__row { grid-template-columns: 1fr auto; }
  .log__row--head { display: none; }
  .log__date { order: 1; } .log__chip { order: 2; }
  .log__act { order: 3; grid-column: 1 / -1; } .log__venue { order: 4; grid-column: 1 / -1; }
}

.log__window { position: relative; }

/* ═══ ENGAGEMENT — tier ladder (three different objects) ═════ */
.tiers { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); align-items: stretch; }
.tier {
  position: relative;
  border: 1px solid var(--line); background: var(--surface);
  padding: var(--pad-card);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.tier:hover { border-color: var(--accent); box-shadow: var(--glow-accent); }
.tier--dispatcher { padding: 1.25rem 1.2rem; background: var(--surface-deep); }
.tier--dispatcher .tier__desc { font-size: .92rem; }
.tier--feature, .tier--poster {
  border-color: var(--accent-20); background: var(--accent-08);
  padding: calc(var(--pad-card) + 6px) var(--pad-card);
  box-shadow: inset 0 0 0 1px var(--accent-20);
}
.tier--handoff {
  border-style: dashed; border-color: var(--text-3);
  background:
    repeating-linear-gradient(-12deg, transparent 0 10px, #ffffff05 10px 11px),
    var(--surface-deep);
}
.tier__kind {
  font-family: var(--font-tech); font-size: var(--fs-micro); letter-spacing: 2px;
  color: var(--text-3); text-transform: uppercase; margin-bottom: 10px;
}
.tier__stamp {
  position: absolute; top: 14px; right: 14px;
  font-family: var(--font-tech); font-size: .55rem; letter-spacing: 1.5px;
  color: var(--accent); border: 1px solid var(--accent); padding: 4px 6px;
  transform: rotate(6deg); opacity: .9;
}
.tier__name {
  font-family: var(--font-tech); font-size: .95rem; font-weight: 700;
  letter-spacing: 1.5px; color: var(--accent); text-transform: uppercase;
  margin-bottom: 14px;
}
.tier--poster .tier__name { font-size: 1.05rem; }
.tier__desc { color: #ccc; font-size: .98rem; margin-bottom: 18px; }
.tier__meta {
  font-family: var(--font-tech); font-size: var(--fs-micro); letter-spacing: 2px;
  color: var(--text-2); text-transform: uppercase;
}

/* ═══ BOOKING FORM ═══════════════════════════════════════════ */
.contact { text-align: center; }
.contact .barcode { display: none; }
.contact__big {
  font-family: var(--font-display); font-weight: 600;
  font-size: var(--fs-h2); letter-spacing: -0.04em; margin-bottom: 34px;
}
.contact__big em { font-style: italic; color: var(--accent); }
.contact__cta {
  display: inline-block;
  font-family: var(--font-tech); font-size: var(--fs-label); letter-spacing: 2px;
  color: var(--text); text-transform: uppercase;
  border: 1px solid var(--accent); padding: 1rem 2rem;
  background: var(--accent-08);
  transition: all var(--t-fast);
}
.contact__cta:hover { background: var(--accent-20); box-shadow: var(--glow-accent); color: #fff; }
.contact__small {
  margin-top: 26px; font-family: var(--font-tech); font-size: var(--fs-micro);
  letter-spacing: 2px; color: var(--text-3); text-transform: uppercase;
}
.transmit__privacy {
  margin-top: 12px; font-family: var(--font-tech); font-size: var(--fs-micro);
  letter-spacing: 0.5px; color: var(--text-3);
}
@media (max-width: 680px) {
  .contact__cta { letter-spacing: 1px; padding: 1rem 1.2rem; }
}

/* ═══ TRANSMIT — booking form ════════════════════════════════ */
.contact__lead {
  max-width: 540px; margin: 0 auto 34px;
  color: #ccc; font-size: 1rem;
}
.transmit {
  max-width: 560px; margin: 0 auto; text-align: left;
}
.transmit__grid {
  display: grid; gap: 16px; grid-template-columns: 1fr 1fr;
}
.transmit__row { margin-bottom: 16px; }
.transmit__grid .transmit__row { margin-bottom: 0; }
.transmit__l {
  display: block; margin-bottom: 7px;
  font-family: var(--font-tech); font-size: var(--fs-micro); letter-spacing: 1.5px;
  color: var(--text-2); text-transform: none;
}
.transmit__i {
  width: 100%; display: block;
  background: var(--surface-deep); color: var(--text);
  border: 1px solid var(--line); border-radius: 0;
  padding: 12px 14px;
  font-family: var(--font-tech); font-size: .92rem; letter-spacing: .5px;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.transmit__i:focus {
  outline: none; border-color: var(--accent); box-shadow: var(--glow-accent);
}
textarea.transmit__i { resize: vertical; min-height: 96px; line-height: 1.5; }
select.transmit__i { text-transform: none; cursor: inherit; }
.transmit__hp {
  position: absolute; left: -9999px; width: 1px; height: 1px;
  opacity: 0; pointer-events: none;
}
.transmit .contact__cta {
  display: block; width: 100%; margin-top: 22px; cursor: inherit;
  font-family: var(--font-tech); text-transform: uppercase;
}
.transmit .contact__cta:disabled { opacity: .6; }
.transmit__status {
  min-height: 1.4em; margin-top: 14px; text-align: center;
  font-family: var(--font-tech); font-size: var(--fs-micro); letter-spacing: 2px;
  text-transform: uppercase; color: var(--text-2);
}
.transmit__status[data-kind="ok"] { color: var(--ok); }
.transmit__status[data-kind="err"] { color: var(--accent); }
@media (max-width: 560px) {
  .transmit__grid { grid-template-columns: 1fr; gap: 16px; }
  .transmit__grid .transmit__row { margin-bottom: 16px; }
}

/* ═══ STATUS STRIP ═══════════════════════════════════════════ */
.strip-status {
  display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  border-top: 1px solid var(--line);
  padding: 16px clamp(14px, 3vw, 32px) 18px;
  font-family: var(--font-tech); font-size: var(--fs-micro); letter-spacing: 2px;
  color: var(--text-3); text-transform: uppercase;
}
.strip-status__mid { color: var(--text-2); }

/* ═══ REDUCED MOTION ═════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .grain { opacity: 0; }
  .dot--sig, .emblem svg { animation: none !important; }
  .strip, .strip__bones, .peek { transition: none; }
}

/* ═══════════════════════════════════════════════════════════════
   LOOK LIFT v4 — real world UI in the shop window, tier ladder,
   inclusive + reflow floor. Appended so it wins on equal specificity.
   ═══════════════════════════════════════════════════════════════ */

/* ── Fold peeks = a NON-clickable proof strip, subordinate to the §01 gallery ── */
.hero__peeks { align-items: stretch; gap: 6px; width: min(100%, 720px); margin: 16px auto 0; }
.peek {
  min-height: 176px; padding: 0; cursor: default;
  background: #0b0b0b; border-color: #ffffff1a;
}
.peek:hover { transform: none; box-shadow: none; }
.peek__glass {
  flex: 1; min-height: 0; border-bottom: none;
  background: #070707;
}
.peek__glass img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.peek__meta { padding: 9px 11px 11px; gap: 3px; }
.peek .peek__name {
  font-family: var(--font-tech); font-weight: 600; letter-spacing: .5px;
  text-transform: uppercase; font-size: .74rem; color: var(--text); transform: none;
}
.peek .peek__for { color: var(--text-2); opacity: 1; }
@media (max-width: 860px) {
  .hero__peeks { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .peek:last-child { grid-column: auto; }
  .peek { min-height: 118px; }
}
@media (max-width: 480px) {
  .hero__peeks { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
  .peek:last-child { grid-column: auto; }
  .peek { min-height: 92px; }
}

/* ── Tier ladder: three DIFFERENT objects, money tier dominant ── */
.tiers { grid-template-columns: 0.82fr 1.18fr 0.9fr; align-items: stretch; gap: 12px; }
.tier__list { list-style: none; margin: 2px 0 16px; padding: 0; }
.tier__list li {
  font-family: var(--font-tech); font-size: .78rem; letter-spacing: .2px; line-height: 1.35;
  color: #d6d6d6; padding: 6px 0 6px 18px; position: relative;
  border-bottom: 1px solid #ffffff12;
}
.tier__list li::before { content: "+"; position: absolute; left: 0; color: var(--accent); font-weight: 700; }
.tier--dispatcher .tier__list li::before { content: "·"; color: var(--text-2); }
.tier--handoff .tier__list li::before { content: "▪"; color: var(--text-2); font-size: .7em; top: 7px; }
.tier--poster {
  transform: translateY(-12px);
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent-30), 0 12px 34px #ff2a2a1a;
  padding-top: calc(var(--pad-card) + 20px);
}
.tier__ribbon {
  position: absolute; top: 0; left: 0; right: 0;
  font-family: var(--font-tech); font-size: var(--fs-micro); font-weight: 600;
  letter-spacing: 2px; text-transform: uppercase; text-align: center;
  color: #0a0a0a; background: var(--accent); padding: 6px 4px;
}
.tier--handoff .tier__stamp {
  position: static; display: inline-block; transform: rotate(-2deg);
  font-size: .62rem; margin-bottom: 12px; padding: 5px 8px;
}
@media (max-width: 820px) {
  .tiers { grid-template-columns: 1fr; }
  .tier--poster { transform: none; }
}

/* ── Reflow / HUD floor: drop the right stamp before the nav wraps ── */
@media (max-width: 1040px) { .hud__right { display: none; } }
/* clip transient horizontal projection from below-fold reveal transforms (tier tilt) */
main { overflow-x: clip; }
@media (max-width: 400px) {
  .hud__links { gap: 8px; }
  .hud__links a { letter-spacing: 1px; padding-left: 0; padding-right: 0; }
  .hud__wordmark { font-size: 1rem; }
}

/* ── §01 strips now carry a real interior screenshot of each world ── */
.strip__screen {
  display: block; flex: 1 1 auto; min-height: 96px;
  margin: 8px 0 12px; overflow: hidden; position: relative;
  border: 1px solid rgba(130,130,130,.3);
  background: #0a0a0a;
}
.strip__screen img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.strip--zine .strip__screen, .strip--chapbook .strip__screen { border-color: rgba(60,50,40,.28); }
.strip:hover .strip__screen, .strip:focus-within .strip__screen { border-color: currentColor; }

/* ── Field log: native scrollable region (reel de-jacked, a11y) ── */
@media (min-width: 721px) {
  .log__window {
    max-height: 434px; overflow-y: auto;
    scrollbar-width: thin; scrollbar-color: var(--line) transparent;
  }
  .log__window:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
  .log__window::-webkit-scrollbar { width: 10px; }
  .log__window::-webkit-scrollbar-thumb { background: var(--line); border: 3px solid var(--bg); }
}

/* ═══════════════════════════════════════════════════════════════
   LOOK LIFT v6 — product back in the shop window (jury v6, RESHAPE 7/7).
   A · fold gets legible product (two variants behind <body data-fold>)
   B · §01 worlds read as five distinct sites AT REST (no hover needed)
   C · craft + inclusive floor (ghost-CTA 1.4.11, focus-on-cream, HUD
       occlusion, H1 tracking) — production floor untouched.
   Appended so it wins on source order.
   ═══════════════════════════════════════════════════════════════ */

/* ── C · craft + inclusive floor ─────────────────────────────── */
html { scroll-padding-top: 64px; }                 /* fixed HUD ≈51px + air (WCAG 2.4.11) */
.sec[id], .strip { scroll-margin-top: 64px; }
.hero__cta:not(.hero__cta--primary) { border-color: #6f6f6f; }  /* was #555 2.74:1 → ~3.9:1 (1.4.11) */
.strip--zine:focus-visible, .strip--chapbook:focus-visible { outline-color: #c01810; } /* red on cream ≈5:1 */
.hero__offer { letter-spacing: -0.015em; }
.hero__offer span { display: block; letter-spacing: -0.005em; font-size: 0.9em; margin-top: 4px; }
.hero__byline {          /* off Playfair in the fold → one grotesk/mono system (cohesion, not a critical-path cut) */
  font-family: var(--font-body); font-style: normal;
  letter-spacing: 0.02em; color: var(--text-3);
}

/* ── B · §01 worlds: legible 3+2 grid, specimens read at rest ─── */
.strips {
  display: grid; grid-template-columns: repeat(6, 1fr);
  gap: 14px; min-height: 0; align-items: stretch;
}
.strip--zine     { grid-column: 1 / 3; }
.strip--chapbook { grid-column: 3 / 5; }
.strip--ritual   { grid-column: 5 / 7; }
.strip--tape     { grid-column: 2 / 4; }
.strip--terminal { grid-column: 4 / 6; }
.strip {           /* expand→lift: grid ignores flex-grow; keep a light hover cue */
  transition: transform var(--t-fast), border-color var(--t-fast),
              box-shadow var(--t-fast), background var(--t-fast);
}
.strip:hover, .strip:focus-within { transform: translateY(-3px); }
.strip__screen { flex: none; aspect-ratio: 5 / 4; min-height: 0; }  /* screenshot reads as a real site */
.strip__bones { max-height: none; opacity: 1; overflow: visible; }  /* mechanics surfaced AT REST */
@media (max-width: 1100px) {
  .strips { grid-template-columns: 1fr 1fr; }
  .strip { grid-column: auto; }
}
@media (max-width: 700px) {
  .strips { grid-template-columns: 1fr; }
  .strip { grid-column: auto; }
}

/* ── A · fold product ────────────────────────────────────────── */
/* Shared teaser styling (used by variant A1 = data-fold="teaser"). */
.hero__peeks {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px; width: min(100%, 900px); margin: 20px auto 0; text-align: center;
}
.hero__peeks .peek {
  min-height: 190px; cursor: pointer; padding: 0;
  background: #0b0b0b; border: 1px solid #6f6f6f;
  display: flex; flex-direction: column; overflow: hidden;
  transition: transform var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast);
}
.hero__peeks .peek:hover, .hero__peeks .peek:focus-visible {
  transform: translateY(-3px); border-color: var(--accent); box-shadow: var(--glow-accent);
}
.hero__peeks .peek__glass { flex: 1; min-height: 0; overflow: hidden; border-bottom: none; }
.hero__peeks .peek__glass img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
.hero__peeks .peek__meta { padding: 8px 8px 10px; }
.hero__peeks .peek__name { font-size: .95rem; line-height: 1.05; color: var(--text); }
.hero__peeks .peek__name--zine     { font-family: 'Permanent Marker', 'Segoe Print', cursive; transform: rotate(-1.5deg); display: inline-block; }
.hero__peeks .peek__name--chapbook { font-family: 'Italiana', 'EB Garamond', Georgia, serif; letter-spacing: .04em; }
.hero__peeks .peek__name--ritual   { font-family: 'Pirata One', 'Palatino Linotype', Palatino, Georgia, serif; letter-spacing: .05em; }
.hero__peeks .peek__name--tape     { font-family: 'Share Tech Mono', Consolas, monospace; }
.hero__peeks .peek__name--terminal { font-family: 'IBM Plex Mono', Consolas, monospace; font-weight: 600; }

/* Variant A2 (DEFAULT, data-fold="lifted"): no teaser; compress the hero
   and pull §01 up so the enlarged worlds enter the fold as ONE surface
   (also satisfies the prior IA council: worlds appear once). */
body[data-fold="lifted"] .hero__peeks { display: none; }
body[data-fold="lifted"] .hero { padding: 40px 20px 10px; gap: 8px; }
/* lift v9 Step 1 — hero ≤300px @1920: smaller H1, price demoted to a quiet sub-line,
   pitch removed (HTML), founding flag folded into the actions row */
body[data-fold="lifted"] .hero__offer { font-size: clamp(1.7rem, 3.4vw, 2.55rem); }
body[data-fold="lifted"] .hero__offer span { font-size: 0.58em; font-weight: 600; letter-spacing: 0; margin-top: 2px; }
body[data-fold="lifted"] .hero__offer::after { margin: 10px auto 0; }
body[data-fold="lifted"] .hero__byline { font-size: clamp(0.95rem, 1.6vw, 1.1rem); }
body[data-fold="lifted"] .hero__cta--primary { padding: 12px 20px; }
body[data-fold="lifted"] .hero__actions { align-items: center; }
body[data-fold="lifted"] #cases { padding-top: clamp(20px, 2vw, 26px); }
body[data-fold="lifted"] #cases .sec__body { margin-bottom: 10px; max-width: 72ch; }
/* lift v9 Step 1 — tighter §01 header stack so firstStripTop ≤520 @1920 */
body[data-fold="lifted"] #cases .sec__kicker { margin-bottom: 10px; }
body[data-fold="lifted"] #cases .sec__title { margin-bottom: 12px; font-size: clamp(2.1rem, 3.4vw, 3.6rem); }
body[data-fold="lifted"] #cases .barcode { margin-bottom: 14px; }

/* Variant A1 (data-fold="teaser"): keep the fold teaser strip visible. */
body[data-fold="teaser"] .hero__peeks { display: grid; }

@media (max-width: 860px) {
  .hero__peeks { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; }
  .hero__peeks .peek { min-height: 118px; }
  .hero__peeks .peek__meta { padding: 5px 3px 6px; }
  .hero__peeks .peek__name { font-size: .62rem; }
}

/* ═══════════════════════════════════════════════════════════════
   LOOK LIFT v7 — path to a clean 8 (jury v7, 4 GREEN / 3 RESHAPE).
   1 · §01 reorder: dark–cream–dark fold row + left-anchored bottom
   2 · a11y layer: body 400, micro ~12px, quieter tracking
   3 · Poster height crown + red price; side tiers quieted ~90%
   4 · taste: grain off cream cards; Zine owns deeper ink-red
   Appended so it wins on source order.
   ═══════════════════════════════════════════════════════════════ */

/* ── 1 · §01 grid: left-anchored 3+2, no orphan gutter, no cream cluster ── */
/* LOOK LIFT v8 override below: Tape · Zine · Ritual in fold (punk + doom ≤5s). */
@media (min-width: 1101px) {
  .strip--tape     { grid-column: 1 / 3; }
  .strip--chapbook { grid-column: 3 / 5; }
  .strip--terminal { grid-column: 5 / 7; }
  .strip--zine     { grid-column: 1 / 3; }
  .strip--ritual   { grid-column: 3 / 5; }
}
/* Re-assert responsive reset AFTER the desktop placement (v6 media queries sit above this block). */
@media (max-width: 1100px) {
  .strips { grid-template-columns: 1fr 1fr; }
  .strip { grid-column: auto; }
}
@media (max-width: 700px) {
  .strips { grid-template-columns: 1fr; }
  .strip { grid-column: auto; }
}

/* ── 2 · a11y layer (low-vision weight/size; contrast already passes) ── */
body { font-weight: 400; }
:root { --fs-micro: 0.75rem; }            /* ~12px floor @16px root (was 0.65rem) */
.strip__id, .strip__for, .strip__band, .strip__bones,
.tier__kind, .tier__meta, .hud__links a, .hud__right,
.contact__small, .sec__footnote,
.log__date, .log__chip, .peek__for {
  letter-spacing: 0.08em;                 /* ≤ ~0.08em on micro type — was 2–3px */
}

/* ── 3 · Poster height dominance + red price; quiet the flanks ── */
.tier--poster {
  padding-bottom: calc(var(--pad-card) + 28px);
  min-height: 100%;
  align-self: stretch;
  transform: translateY(-18px) scale(1.02);
  transform-origin: center top;
}
.tier--poster .tier__meta {
  color: var(--accent);
  font-weight: 600;
  letter-spacing: 0.08em;
}
.tier--dispatcher,
.tier--handoff {
  opacity: 0.9;
  transform: scale(0.98);
  transform-origin: center top;
}
.tier--dispatcher:hover,
.tier--handoff:hover { opacity: 1; }
@media (max-width: 820px) {
  .tier--poster { transform: none; padding-bottom: calc(var(--pad-card) + 12px); }
  .tier--dispatcher,
  .tier--handoff { transform: none; opacity: 1; }
}

/* ── 4 · taste: grain off cream; Zine ink-red distinct from hub signal ── */
.strip--zine,
.strip--chapbook {
  position: relative;
  z-index: 999;                           /* above .grain (998); below HUD (1000) */
}
.strip--zine .strip__cta { color: #b42318; }          /* deeper ink — not hub #ff2a2a */
.strip--zine:hover { border-color: #b42318; box-shadow: 0 0 0 1px #b4231855; }
.strip--zine:hover .strip__cta { color: #8b1e18; }

/* ═══════════════════════════════════════════════════════════════
   PERSONA LIFT v4 — conversion + trust (blind 6-persona council,
   2026-07-17). The page proved the product and lost the sale:
   1 · the founding free-build offer moves footnote → own block
   2 · hero states what a site does that a link list can't
   3 · a reachable human next to the form (IG now, email pending)
   Appended so it wins on source order.
   ═══════════════════════════════════════════════════════════════ */

/* ── 2 · hero: a flag down to the offer (pitch line removed, lift v9 Step 1) ── */
.hero__flag {
  display: inline-block; justify-self: center;
  margin-top: 2px; padding: 7px 14px;
  font-family: var(--font-tech); font-size: var(--fs-micro); font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--accent); border: 1px dashed var(--accent); /* ≥3:1 border floor (lift v9) */
  background: var(--accent-08);
  transition: border-color var(--t-fast), background var(--t-fast), color var(--t-fast);
}
.hero__flag:hover { border-color: var(--accent); background: var(--accent-20); color: #fff; }
.hero__flag span { margin-left: 4px; }

/* ── 1 · founding block: the loudest thing in §04, above the ladder ── */
.founding {
  position: relative;
  margin-bottom: 30px; padding: calc(var(--pad-card) - 2px) var(--pad-card);
  border: 1px solid var(--accent-30);
  background:
    repeating-linear-gradient(-12deg, transparent 0 12px, #ff2a2a08 12px 13px),
    var(--accent-08);
}
.founding__stamp {
  display: inline-block; margin-bottom: 12px; padding: 5px 9px;
  font-family: var(--font-tech); font-size: var(--fs-micro); font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--accent); border: 1px solid var(--accent);
  transform: rotate(-1.5deg);
}
.founding__head {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.6rem, 3.4vw, 2.5rem); letter-spacing: -0.03em; line-height: 1.05;
  margin-bottom: 14px;
}
.founding__head em { font-style: italic; color: var(--accent); }
.founding__body { color: #ddd; max-width: 62ch; margin-bottom: 10px; }
.founding__after {
  color: var(--text-2); font-size: .92rem; max-width: 62ch; margin-bottom: 20px;
}
.founding__cta {
  display: inline-block;
  font-family: var(--font-tech); font-size: var(--fs-label); font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  color: #0a0a0a; background: var(--accent);
  border: 1px solid var(--accent); padding: 13px 22px;
  transition: background var(--t-fast), box-shadow var(--t-fast);
}
.founding__cta:hover { background: #ff4747; box-shadow: var(--glow-accent); }
.founding:hover .c, .founding:focus-within .c {
  opacity: 1; width: 20px; height: 20px; border-color: #fff;
}
@media (max-width: 560px) {
  .founding { padding: 1.4rem 1.15rem; }
  .founding__cta { display: block; text-align: center; }
}

/* ── 3 · a human beside the form ─────────────────────────────── */
.contact__human {
  max-width: 540px; margin: -18px auto 30px;
  color: var(--text-2); font-size: .94rem;
}
.contact__ig {
  color: var(--accent);
  border-bottom: 1px solid var(--accent-30);
  transition: border-color var(--t-fast);
}
.contact__ig:hover { border-bottom-color: var(--accent); }

/* ═══════════════════════════════════════════════════════════════
   LOOK LIFT v8 — path to 8 (jury v8 Audience genre trade + micros).
   1 · §01 fold: Tape · Zine · Ritual (punk + doom ≤5s); Chapbook · Terminal below
   2 · byline hierarchy --text-2; Handoff solid deed (Poster stays crowned)
   Appended so it wins on source order.
   ═══════════════════════════════════════════════════════════════ */

/* ── 1 · fold genre pick ─────────────────────────────────────── */
@media (min-width: 1101px) {
  .strip--tape     { grid-column: 1 / 3; }
  .strip--zine     { grid-column: 3 / 5; }
  .strip--ritual   { grid-column: 5 / 7; }
  .strip--chapbook { grid-column: 1 / 3; }  /* bottom left */
  .strip--terminal { grid-column: 3 / 5; }
}
@media (max-width: 1100px) {
  .strips { grid-template-columns: 1fr 1fr; }
  .strip { grid-column: auto; }
}
@media (max-width: 700px) {
  .strips { grid-template-columns: 1fr; }
  .strip { grid-column: auto; }
}

/* ── 2 · inclusive + Handoff micro ───────────────────────────── */
.hero__byline { color: var(--text-2); font-weight: 500; }
.tier--handoff {
  opacity: 1;
  transform: none;
  border-style: solid;
  border-color: var(--line);
}
.tier--dispatcher {
  opacity: 0.9;
  transform: scale(0.98);
  transform-origin: center top;
}
.tier--dispatcher:hover { opacity: 1; }
@media (max-width: 820px) {
  .tier--dispatcher { transform: none; opacity: 1; }
}