/* =========================================================
   bwai.studio: the Gate and the Catalogue (Bee's page, 2026-10-29).
   Bee's CSS as pasted, moved into this file so the site's Content-Security-Policy (style-src 'self') allows it.
   Changes from the paste, all agreed with Bee (option 1, "take only the look"):
   - the Gate lineup shows the five real muse plates (Bee's art), not drawn silhouettes;
   - no drawn stand-ins anywhere: if an image fails, nothing shows;
   - the AIM window runs Bee's approved two-step chat (first name, then email) and saves to her Sheet;
   - former inline style attributes are classes at the end of this file;
   - reduced motion turns the static flicker, the blink and smooth scrolling off.
   ========================================================= */
:root {
  --blue: #0517F3;
  --catalogue-blue: #0018FF;
  --neon-orange: #EB4E27;
  --crimson: #B80C09;
  --black: #08080A;
  --charcoal: #161618;
  --white: #FFFFFF;
  --warm-grey: #F3F2EE;
  --hairline: #D8D8DC;
  --brand-cobalt: #0A12CC;
  --brand-black: #0A0A0A;
  --brand-cream: #F3EDE3;
  --brand-pink: #F2349F;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  color: var(--black);
  background-color: var(--charcoal);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
  text-decoration: none;
}

/* =========================================================
   PART 1: GATE / SPLASH PAGE (#gate)
   ========================================================= */
.gate-section {
  position: relative;
  min-height: 100vh;
  width: 100%;
  background-color: var(--blue);
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.13) 1.5px, transparent 1.5px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.13) 1.5px, transparent 1.5px);
  background-size: 68px 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 44px 0 32px;
  overflow: hidden;
}

/* Film grain overlay across the blue grid */
.gate-section::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.22;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='grain'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23grain)'/%3E%3C/svg%3E");
}

/* Stage holds wide overhanging title & Muses */
.gate-stage {
  position: relative;
  width: min(1320px, 95vw);
  min-height: 730px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 38px 0 34px;
  z-index: 2;
}

/* Smaller White Card Background: inset so 'B', 'o', and outer Muses overhang onto the blue grid */
.gate-stage::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 9.5%;
  right: 9.5%;
  background: var(--white);
  box-shadow: 0 26px 64px rgba(2, 8, 85, 0.32);
  z-index: 0;
}

/* Subtle editorial crosshairs inside the white card */
.gate-stage::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 9.5%;
  right: 9.5%;
  background:
    linear-gradient(to bottom, transparent 49.9%, rgba(0, 0, 0, 0.055) 50%, transparent 50.1%),
    linear-gradient(32deg, transparent 49.9%, rgba(0, 0, 0, 0.04) 50%, transparent 50.1%),
    linear-gradient(-32deg, transparent 49.9%, rgba(0, 0, 0, 0.04) 50%, transparent 50.1%);
  pointer-events: none;
  z-index: 1;
}

/* Gate Top Nav (aligned inside the narrower white card) */
.gate-nav {
  position: relative;
  z-index: 3;
  padding: 0 12.5%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.gate-logo {
  font-size: 27px;
  font-weight: 800;
  letter-spacing: -0.03em;
}

.gate-links {
  display: flex;
  gap: 32px;
  font-size: 14px;
  font-weight: 700;
}

.gate-links a:hover {
  opacity: 0.65;
}

.btn-seat {
  background: var(--blue);
  color: var(--white);
  font-size: 14px;
  font-weight: 700;
  padding: 12px 22px;
  border-radius: 6px;
  transition: transform 0.15s ease;
}

.btn-seat:hover {
  transform: translateY(-1px);
}

/* Giant Overlapping Headline */
.gate-title {
  position: relative;
  z-index: 3;
  text-align: center;
  font-size: clamp(82px, 12.5vw, 170px);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 0.95;
  margin: 22px 0 8px;
  white-space: nowrap;
  user-select: none;
}

/* Animated Pitch-Black TV Static inside the Letters.
   Bee's paste named a "1.webp" static texture first; that file is not in the repo, so the built-in static below is the texture. */
.static-letters {
  background-color: #060608;
  background-image:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='tv'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.35' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0.18 0 0 0 0.02  0 0.18 0 0 0.02  0 0 0.18 0 0.02  0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' fill='%23050507'/%3E%3Crect width='100%25' height='100%25' filter='url(%23tv)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
  background-repeat: repeat;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: tv-static-flicker 0.16s steps(3, end) infinite;
}

@keyframes tv-static-flicker {
  0%   { background-position: 0px 0px; }
  33%  { background-position: -29px 17px; }
  66%  { background-position: 23px -31px; }
  100% { background-position: -15px -19px; }
}

/* Solid Neon-Orange Blinking Terminal Period */
.blink-period {
  color: var(--neon-orange);
  -webkit-text-fill-color: var(--neon-orange);
  display: inline-block;
  animation: terminal-blink 1.05s steps(2, start) infinite;
}

@keyframes terminal-blink {
  0%, 49%   { opacity: 1; }
  50%, 100% { opacity: 0; }
}

/* Gate Muses Row: overhangs left and right edges of the white card */
.gate-muses-row {
  position: relative;
  z-index: 3;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 18px;
  margin: -8px -40px 18px;
}

.gate-muse-item {
  width: 196px;
  height: 270px;
  flex-shrink: 0;
  filter: drop-shadow(-14px 18px 16px rgba(0, 0, 0, 0.22));
  transition: transform 0.2s ease;
}

.gate-muse-item:hover {
  transform: translateY(-6px);
}

.gate-muse-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}

/* Gate Bottom Footer (aligned inside the narrower white card) */
.gate-footer {
  position: relative;
  z-index: 3;
  padding: 0 12.5%;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.28;
}

.gate-badges {
  display: flex;
  align-items: center;
  gap: 10px;
}

.badge-year {
  border: 1.5px solid var(--black);
  padding: 7px 14px;
  font-size: 11px;
  font-weight: 800;
}

.badge-studio {
  background: var(--black);
  color: var(--white);
  padding: 6px 12px;
  font-size: 10px;
  font-weight: 800;
  line-height: 1.15;
}

/* Bottom Scroll / Open Catalogue Pill Button */
.open-catalogue-pill {
  position: relative;
  z-index: 3;
  margin-top: 22px;
  background: rgba(6, 10, 48, 0.78);
  color: var(--white);
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: 999px;
  padding: 10px 26px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  backdrop-filter: blur(6px);
  transition: background 0.2s ease, transform 0.2s ease;
}

.open-catalogue-pill:hover {
  background: var(--black);
  transform: translateY(2px);
}

/* =========================================================
   PART 2: INTERIOR SWISS LOOKBOOK CATALOGUE (#catalogue)
   ========================================================= */
.catalogue-wrapper {
  max-width: 1320px;
  margin: 0 auto;
  padding: 36px 40px 64px;
  background-color: var(--charcoal);
}

/* Top Collector Strip */
.top-strip {
  background: var(--black);
  color: var(--white);
  border: 1px solid #2e2e32;
  padding: 12px 22px;
  margin-bottom: 24px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.pill-tag {
  background: var(--catalogue-blue);
  color: var(--white);
  padding: 6px 14px;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Spread Card Base */
.spread-card {
  background: var(--white);
  width: 100%;
  margin-bottom: 26px;
  position: relative;
  overflow: hidden;
}

.spread-header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 28px;
  border-bottom: 1px solid var(--hairline);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #555558;
}

.spread-header-nav {
  display: flex;
  gap: 14px;
}

.spread-header-nav a:hover {
  color: var(--catalogue-blue);
}

.micro-label {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1.35;
}

.micro-copy {
  font-size: 11.5px;
  line-height: 1.52;
  font-weight: 500;
  color: #18181B;
}

/* ---------------------------------------------------------
   SPREAD 01: BWAI STUDIO ISSUE © (HERO SPREAD)
   --------------------------------------------------------- */
.hero-spread-grid {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 36px;
  padding: 28px;
  align-items: stretch;
}

.hero-left {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.hero-kicker {
  color: var(--catalogue-blue);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 14px;
}

.hero-display {
  font-size: clamp(54px, 6.2vw, 82px);
  font-weight: 800;
  line-height: 0.94;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  margin-bottom: 28px;
}

.hero-display .copyright-mark {
  font-size: 0.55em;
  vertical-align: baseline;
  font-weight: 600;
}

.hero-quote-box {
  border-left: 2.5px solid var(--catalogue-blue);
  padding-left: 14px;
  max-width: 390px;
  margin-bottom: 26px;   /* the standfirst sits 24 to 28px below the callout, Bee's spec of 30 Oct 2026 */
}

.hero-standfirst {
  font-size: 16px;
  line-height: 1.5;
  color: var(--brand-black);
  max-width: 50ch;
  margin-bottom: 24px;
}

.hero-pillars {
  margin: 0 0 24px;
}

.hero-pillars dt {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand-black);
}

.hero-pillars .pillar-num {
  color: var(--brand-cobalt);
}

.hero-pillars dd {
  margin: 3px 0 0;
  font-size: 14px;
  line-height: 1.45;
  color: var(--brand-black);
}

.hero-pillars dd + dt {
  margin-top: 15px;
}

.hero-quote-box .q-caps {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.45;
  margin-bottom: 8px;
}

.hero-quote-box .q-sub {
  font-size: 12px;
  color: #444;
  font-weight: 500;
}

.hero-bottom-bar {
  border-top: 1px solid #111;
  padding-top: 16px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}

.hero-meta-lines {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.6;
  color: #444;
}

.hero-big-num {
  font-size: 64px;
  font-weight: 800;
  line-height: 0.85;
  letter-spacing: -0.03em;
}

.hero-right-art {
  position: relative;
  min-height: 540px;
  background: linear-gradient(to right, var(--catalogue-blue) 0%, var(--catalogue-blue) 50%, var(--black) 50%, var(--black) 100%);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
}

.hero-right-art img {
  width: 86%;
  height: 92%;
  object-fit: contain;
  object-position: bottom center;
  position: relative;
  z-index: 2;
}

.art-top-right-label {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 3;
  color: var(--white);
  text-align: right;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.06em;
  line-height: 1.4;
  text-transform: uppercase;
}

.art-bottom-left-tag {
  position: absolute;
  bottom: 20px;
  left: 20px;
  z-index: 3;
  background: var(--black);
  color: var(--white);
  padding: 10px 14px;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.05em;
  line-height: 1.35;
  text-transform: uppercase;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

/* ---------------------------------------------------------
   SPREAD 02: TWO-COLUMN ROW (THE MISSION 01 + THE GAP)
   --------------------------------------------------------- */
.dual-spread-row {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 24px;
  margin-bottom: 26px;
}

.dual-spread-row .spread-card {
  margin-bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* Left Card: THE MISSION © 01 */
.mission-card-inner {
  padding: 24px 28px 28px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}

.mission-top-meta {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 18px;
}

.mission-upper-split {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 32px;
  margin-bottom: 32px;
}

.mission-head {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.mission-index {
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #6E6E73;
  margin-bottom: 6px;
}

/* 3px cobalt rule on the left, Bee's spec of 30 Oct 2026. */
.mission-callout {
  border-left: 3px solid var(--brand-cobalt);
  padding: 2px 0 2px 16px;
}

.mission-callout-head {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.mission-callout-sub {
  font-size: 15px;
  font-weight: 400;
  line-height: 1.45;
  margin-top: 8px;
}

.mission-portrait-box {
  width: 195px;
  height: 225px;
  background: var(--catalogue-blue);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}

.mission-portrait-box img {
  width: 90%;
  height: 92%;
  object-fit: contain;
  object-position: bottom center;
}

.mission-title-right {
  text-align: left;
  font-size: 40px;
  font-weight: 800;
  line-height: 0.96;
  letter-spacing: -0.025em;
  text-transform: uppercase;
}

.mission-title-right .muted-num {
  color: #6E6E73;
  font-weight: 600;
}

.mission-bottom-grid {
  border-top: 1px solid #111;
  padding-top: 18px;
  padding-bottom: 20px;   /* with the card's 28px, at least 48px of paper under the last line */
  display: grid;
  grid-template-columns: 0.8fr 1.5fr;
  gap: 22px;
}

.mission-left-col {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 18px;
}

.mission-index-block {
  margin: 0;
}

.mission-index-block dt {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--brand-cobalt);
}

.mission-index-block dd {
  margin: 4px 0 0;
  font-size: 11px;
  line-height: 1.45;
  color: #333;
}

.mission-index-block dd + dt {
  margin-top: 12px;
}

.mission-copy-paragraphs p + p {
  margin-top: 8px;
}

.mission-signoff {
  margin-top: 16px !important;
  font-weight: 800;
  color: var(--brand-cobalt);
}


/* Right Card: THE GAP © */
.gap-top-bar {
  padding: 16px 24px;
  display: flex;
  justify-content: space-between;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.gap-banner {
  position: relative;
  height: 190px;
  background: var(--brand-black);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 18px 24px 0;
  overflow: hidden;
}

/* Flat split, no gradient: black on the left 60%, cobalt on the right 40%. */
.gap-banner::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 40%;
  background: var(--brand-cobalt);
}

.gap-banner > * {
  position: relative;
}

.gap-banner-caption {
  color: var(--white);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.25;
  text-transform: uppercase;
  padding-bottom: 16px;
  max-width: 22ch;
}

.gap-banner-eyebrow {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand-cream);
  opacity: 0.7;
  margin-bottom: 8px;
}

.gap-banner-muse {
  width: 40%;
  height: 175px;
  margin-right: -24px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.gap-banner-muse img {
  width: auto;
  max-width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: bottom center;
}

/* Cream surface with a 4px cobalt bar, Bee's spec of 30 Oct 2026. */
.gap-callout {
  margin-top: 24px;
  background: var(--brand-cream);
  border-left: 4px solid var(--brand-cobalt);
  padding: 24px;
}

.gap-callout-eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--brand-cobalt);
}

.gap-callout-copy {
  margin-top: 8px;
  font-size: 16px;
  line-height: 1.45;
  color: var(--brand-black);
}

.gap-body {
  padding: 22px 24px;
}

.gap-heading {
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -0.025em;
  text-transform: uppercase;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--hairline);
  margin-bottom: 18px;
}

.gap-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.stat-number {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.03em;
  margin-bottom: 6px;
}

.stat-desc {
  font-size: 10px;
  line-height: 1.45;
  color: #333;
  margin-bottom: 8px;
}

.stat-source {
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: underline;
  color: var(--black);
}

.gap-black-footer {
  background: var(--black);
  color: var(--white);
  padding: 14px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.gap-black-footer .agency-mark {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.gap-black-footer .agency-sub {
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ---------------------------------------------------------
   SPREAD 03: FOUNDER © 03 (BEE.)
   --------------------------------------------------------- */
.founder-grid {
  display: grid;
  grid-template-columns: 0.72fr 1.1fr 1.38fr;
  padding: 26px 28px 30px;
  gap: 28px;
  align-items: stretch;
}

.founder-left-col {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.founder-title {
  font-size: 38px;
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -0.025em;
  text-transform: uppercase;
}

.founder-left-meta {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.05em;
  line-height: 1.5;
  text-transform: uppercase;
}

.founder-left-meta .blue-line {
  color: var(--catalogue-blue);
}

.founder-photo-box {
  background: var(--catalogue-blue);
  min-height: 360px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
  position: relative;
}

.founder-photo-box img {
  width: 92%;
  height: 95%;
  object-fit: contain;
  object-position: bottom center;
}

.founder-right-col {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.founder-kicker {
  color: var(--catalogue-blue);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.founder-name {
  font-size: 44px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  margin-bottom: 12px;
}

.founder-bio {
  font-size: 12px;
  line-height: 1.5;
  color: #333;
  margin-bottom: 20px;
}

.founder-quote {
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  padding: 18px 0;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.32;
  letter-spacing: -0.015em;
  margin-bottom: 16px;
}

.founder-bottom-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #555;
}

.founder-bottom-bar a {
  color: var(--black);
  text-decoration: underline;
}

/* ---------------------------------------------------------
   SPREAD 04: THE MUSES © (5-COLUMN ARCHIVE)
   --------------------------------------------------------- */
.muses-five-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  padding: 24px 28px 28px;
}

.muse-archive-card {
  display: flex;
  flex-direction: column;
}

.muse-portrait-frame {
  aspect-ratio: 1 / 1.12;
  width: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
  margin-bottom: 10px;
}

.bg-split-blue-black {
  background: linear-gradient(to right, var(--catalogue-blue) 0%, var(--catalogue-blue) 50%, var(--black) 50%, var(--black) 100%);
}
.bg-black { background: var(--black); }
.bg-crimson { background: var(--crimson); }
.bg-blue { background: var(--catalogue-blue); }

.muse-portrait-frame img {
  width: 88%;
  height: 92%;
  object-fit: contain;
  object-position: bottom center;
}

.muse-meta-code {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.04em;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--hairline);
  margin-bottom: 6px;
}

.muse-meta-row {
  font-size: 8.5px;
  line-height: 1.35;
  margin-bottom: 5px;
}

.muse-meta-row .lbl {
  display: block;
  color: #888;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.muse-meta-row .val {
  font-weight: 700;
  color: #111;
}

.muses-black-banner {
  background: var(--black);
  color: var(--white);
  padding: 18px 28px;
  margin-top: -12px;
  margin-bottom: 26px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.muses-black-banner h2 {
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

.muses-black-banner span {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #D0D0D5;
}

/* ---------------------------------------------------------
   SPREAD 05: SAVE MY SEAT © 04 (RETRO AIM WINDOW)
   --------------------------------------------------------- */
.seat-spread-grid {
  display: grid;
  grid-template-columns: 0.65fr 1.35fr;
  min-height: 360px;
}

.seat-left-col {
  padding: 28px;
  border-right: 1px solid var(--hairline);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.seat-heading {
  font-size: 40px;
  font-weight: 800;
  line-height: 0.96;
  letter-spacing: -0.025em;
  text-transform: uppercase;
  margin-bottom: 18px;
}

.seat-spec-list {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.8;
  text-transform: uppercase;
  color: #444;
}

.seat-left-bottom {
  border-top: 1px solid #111;
  padding-top: 14px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}

.seat-big-num {
  font-size: 48px;
  font-weight: 800;
  line-height: 0.85;
}

.seat-right-col {
  background: var(--warm-grey);
  padding: 28px 34px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Retro AIM Window */
.aim-window {
  width: 100%;
  background: var(--white);
  border: 1.5px solid #B5B5BC;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.aim-titlebar {
  background: var(--catalogue-blue);
  color: var(--white);
  padding: 8px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.aim-controls {
  display: flex;
  gap: 5px;
}

.aim-ctrl-btn {
  width: 15px;
  height: 15px;
  border: 1px solid rgba(255, 255, 255, 0.7);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  line-height: 1;
}

.aim-menubar {
  padding: 5px 14px;
  border-bottom: 1px solid var(--hairline);
  font-size: 10px;
  color: #555;
  display: flex;
  gap: 14px;
}

.aim-body {
  padding: 14px;
  display: grid;
  grid-template-columns: 1fr 110px;
  gap: 14px;
  align-items: start;
}

.aim-chat-box {
  border: 1px solid #C8C8CE;
  padding: 14px;
  font-size: 11.5px;
  line-height: 1.55;
  min-height: 138px;
  max-height: 220px;
  overflow-y: auto;
}

.aim-chat-box p + p {
  margin-top: 6px;
}

.aim-handle {
  color: var(--catalogue-blue);
  font-weight: 700;
}

.aim-avatar-col {
  text-align: center;
}

.aim-avatar-frame {
  width: 100%;
  aspect-ratio: 1 / 1;
  background: var(--catalogue-blue);
  border: 1px solid #111;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
  margin-bottom: 4px;
}

.aim-avatar-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.aim-avatar-label {
  font-size: 8.5px;
  font-weight: 800;
  color: #333;
}

.aim-footer-form {
  padding: 0 14px 14px;
}

.aim-form-prompt {
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--catalogue-blue);
  margin-bottom: 6px;
}

.aim-form-prompt.is-error {
  color: var(--crimson);
}

.aim-input-row {
  display: flex;
  gap: 8px;
}

.aim-input-row input {
  flex: 1;
  min-width: 0;
  border: 1px solid #8E8E95;
  padding: 10px 12px;
  font-size: 12px;
  font-family: inherit;
}

.aim-input-row input:focus-visible,
.aim-input-row button:focus-visible {
  outline: 3px solid var(--catalogue-blue);
  outline-offset: 2px;
}

.aim-input-row button {
  background: var(--catalogue-blue);
  color: var(--white);
  border: none;
  padding: 0 20px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
}

.aim-input-row button:disabled {
  cursor: progress;
}

/* The seat stamp after a successful save */
.aim-pass-stamp {
  margin-top: 8px;
  padding: 10px 12px;
  background: var(--warm-grey);
  border-left: 3px solid var(--catalogue-blue);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* The plain two-field form shows only without JavaScript (gate.js hides the label rows and runs one field at a time). */
.aim-field-label {
  display: block;
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #555;
  margin: 8px 0 4px;
}

#aimForm.is-live .aim-field-label, #aimForm.is-live [hidden], #aimInputRow[hidden] { display: none !important; }

.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---------------------------------------------------------
   SPREAD 06: SAVE MY SEAT, the two lanes. Square corners, flat colour, no shadows.
   --------------------------------------------------------- */
.seat-cta {
  background: var(--white);
  padding: 64px 28px 28px;
  margin-top: 26px;
}

.seat-cta-meta {
  border-top: 1px solid var(--brand-black);
  padding-top: 12px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.seat-cta-meta-left { color: var(--brand-cobalt); }
.seat-cta-meta-right { color: var(--brand-black); }

.seat-cta-title {
  margin-top: 24px;
  font-size: 40px;
  font-weight: 800;
  line-height: 0.96;
  letter-spacing: -0.025em;
  text-transform: uppercase;
  color: var(--brand-black);
}

.seat-cta-sub {
  margin-top: 16px;
  font-size: 18px;
  line-height: 1.5;
  color: var(--brand-black);
  max-width: 58ch;
}

.seat-cta-grid {
  margin-top: 40px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: stretch;
}

.seat-lane {
  padding: 40px;
  color: var(--brand-cream);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.seat-lane-community { background: var(--brand-cobalt); }
.seat-lane-enterprise { background: var(--brand-black); }

.seat-lane-eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.seat-lane-title {
  margin-top: 16px;
  font-size: 30px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.015em;
}

.seat-lane-body {
  margin-top: 16px;
  font-size: 16px;
  line-height: 1.5;
}

.seat-lane-btn {
  margin-top: auto;
  padding: 16px 24px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--brand-black);
  display: inline-block;
}

.seat-lane-body + .seat-lane-btn { margin-top: 28px; }
.seat-lane-btn-cream { background: var(--brand-cream); }
.seat-lane-btn-pink { background: var(--brand-pink); }   /* black text only on Highlighter pink */

.seat-lane-link {
  margin-top: 16px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand-cream);
  text-decoration: none;
  border-bottom: 1px solid var(--brand-cream);
  padding-bottom: 2px;
}

.seat-lane-btn:focus-visible, .seat-lane-link:focus-visible {
  outline: 2px solid var(--brand-cream);
  outline-offset: 3px;
}

.seat-cta-signoff {
  margin-top: 24px;
  border-top: 1px solid var(--brand-black);
  padding-top: 14px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--brand-black);
}

.seat-cta-signoff em { font-style: italic; text-transform: none; letter-spacing: 0; }

/* Responsive adjustments */
@media (max-width: 1024px) {
  .hero-spread-grid,
  .dual-spread-row,
  .founder-grid,
  .seat-spread-grid,
  .seat-cta-grid {
    grid-template-columns: 1fr;
  }
  .muses-five-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .seat-left-col {
    border-right: 0;
    border-bottom: 1px solid var(--hairline);
  }
}

@media (max-width: 720px) {
  .gate-section { padding: 24px 0 24px; }
  .gate-stage { min-height: 0; padding: 24px 0 22px; }
  .gate-stage::before, .gate-stage::after { left: 4%; right: 4%; }
  .gate-nav, .gate-footer { padding: 0 8%; }
  .gate-links { display: none; }
  .gate-title { font-size: clamp(44px, 15vw, 82px); margin: 18px 0 6px; }
  .gate-muses-row { gap: 0; margin: 0 -10px 12px; }
  .gate-muse-item { width: 22%; height: auto; aspect-ratio: 196 / 270; margin: 0 -2%; }
  .gate-footer { flex-direction: column; align-items: flex-start; gap: 12px; font-size: 14px; }
  .catalogue-wrapper { padding: 20px 14px 40px; }
  .top-strip { flex-direction: column; align-items: flex-start; gap: 10px; }
  .spread-header-bar { flex-wrap: wrap; gap: 8px 14px; }
  .hero-spread-grid { padding: 18px; gap: 20px; }
  .hero-right-art { min-height: 380px; }
  .mission-upper-split { flex-direction: column; gap: 20px; }
  .gap-banner-muse { width: 44%; height: 150px; }
  .gap-banner-caption { font-size: 17px; max-width: 56%; }
  .seat-cta { padding: 48px 14px 24px; }
  .seat-cta-title { font-size: 30px; }
  .seat-lane { padding: 28px 22px; }
  .seat-cta-meta, .seat-cta-signoff { flex-direction: column; gap: 6px; }
  .mission-title-right { text-align: left; }
  .mission-bottom-grid, .gap-stats-grid { grid-template-columns: 1fr; }
  .muses-five-grid { grid-template-columns: 1fr 1fr; gap: 12px; padding: 16px; }
  .aim-body { grid-template-columns: 1fr; }
  .aim-avatar-col { display: flex; align-items: center; gap: 10px; text-align: left; order: -1; }
  .aim-avatar-frame { width: 44px; margin: 0; }
  .aim-input-row { flex-direction: column; }
  .aim-input-row button { padding: 12px; }
}

/* Former inline style attributes from Bee's paste. */
.mission-copy-paragraphs p + p { margin-top: 10px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .static-letters, .blink-period { animation: none; }
  .gate-muse-item, .btn-seat, .open-catalogue-pill { transition: none; }
}