/* =========================================================
   ROBOOSH — core stylesheet
   1. Tokens
   2. Reset & base
   3. Typography
   4. Wordmark
   5. Layout primitives
   6. Components
   7. Sections
   8. Motion
   9. Responsive
   ========================================================= */

/* ---------- 1. Tokens ---------- */
/* Night palette. The ground is the same blue as the sky in the hero
   photograph, so the frame and the page read as one material.
   Token NAMES kept from the light theme; only their values inverted.
   `--paper` is still "the page ground" and `--ink` still "primary text". */
:root {
  /* surfaces */
  --paper:        #0E1B3C;   /* page ground */
  --paper-2:      #0A1430;   /* recessed band */
  --bg-deep:      #081026;   /* top strip, footer */
  --bg-lift:      #16295A;   /* raised card on hover */
  --silver-1:     #1B2E5A;   /* empty image plate */
  --silver-2:     rgba(150,195,255,.30);

  /* text */
  --ink:          #EDF3FC;   /* primary text */
  --ink-lift:     #FFFFFF;
  --ink-80:       rgba(237,243,252,.78);
  --ink-60:       rgba(237,243,252,.62);
  --ink-40:       rgba(237,243,252,.42);
  --hairline:     rgba(150,195,255,.16);
  --hairline-dk:  rgba(150,195,255,.22);

  /* kept for rules written against the old dark bands — same light text */
  --on-dark:      #EDF3FC;
  --on-dark-70:   rgba(237,243,252,.74);
  --on-dark-45:   rgba(237,243,252,.5);
  --on-dark-line: rgba(150,195,255,.18);

  /* accent — the blue of the logo glyph, lightened to hold against the ground */
  --accent:       #3D9BFF;
  --accent-soft:  #6FB6FF;
  --on-accent:    #04122B;   /* text sitting on the accent */
  --accent-glow:  rgba(61,155,255,.55);

  /* type */
  --sans:  "Archivo", ui-sans-serif, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --serif: "Bodoni Moda", ui-serif, Georgia, "Times New Roman", serif;

  /* rhythm */
  --shell: 1300px;
  --gutter: clamp(20px, 5vw, 60px);
  --section-y: clamp(84px, 12vw, 168px);
  --header-h: 66px;

  /* One radius for the whole site. Sharp read as severe and fully rounded
     reads as consumer software; this is the smallest amount of softening that
     still looks deliberate. Change it here and every component follows. */
  --radius: 6px;

  --ease: cubic-bezier(.22, .61, .36, 1);

  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
}

/* ---------- 2. Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 14px);
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-optical-sizing: auto;
  font-size: 17px;
  line-height: 1.58;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg { display: block; max-width: 100%; }
img { height: auto; }

h1, h2, h3, p, ul, figure { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; color: inherit; }

::selection { background: var(--accent); color: var(--on-accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0); clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

.skip-link {
  position: absolute; left: 50%; top: 8px; transform: translate(-50%, -220%);
  z-index: 100; background: var(--accent); color: var(--on-accent);
  padding: 10px 18px; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase;
  transition: transform .2s var(--ease);
}
.skip-link:focus { transform: translate(-50%, 0); }

/* ---------- 3. Typography ---------- */
/* Display is a high-contrast Didone — the same editorial voice as the
   brand's own posts. Archivo handles everything functional. */

/* Uppercase headline set in the bold sans, as in the brand's own posts.
   Sentence-case headings below use the Didone. */
.display {
  font-family: var(--sans);
  text-shadow: 0 0 34px var(--accent-glow);
  font-size: clamp(2.9rem, 6.4vw, 5.5rem);
  font-variation-settings: "wdth" 88;
  line-height: .92;
  font-weight: 700;
  letter-spacing: -0.032em;
  text-transform: uppercase;
  text-wrap: balance;
}
.display-sm { font-size: clamp(2.4rem, 5.4vw, 4.4rem); }

.h1 {
  font-family: var(--serif);
  font-size: clamp(2rem, 3.9vw, 3.3rem);
  font-variation-settings: "opsz" 54;
  line-height: 1.05;
  font-weight: 500;
  letter-spacing: -0.018em;
  text-wrap: balance;
}
.h1 em, .idea-title em {
  font-style: italic;
  font-weight: 500;
  color: var(--accent);
}

.lede {
  font-size: clamp(1.06rem, 1.35vw, 1.24rem);
  line-height: 1.5;
  color: var(--ink-80);
  max-width: 44ch;
}

.label {
  display: inline-flex; align-items: center; gap: 13px;
  font-size: .695rem;
  text-transform: uppercase;
  letter-spacing: .22em;
  font-weight: 600;
  font-variation-settings: "wdth" 108;
  color: var(--ink);
}
.label::before { content: ""; width: 24px; height: 2px; background: var(--accent); }

.eyebrow {
  font-size: .695rem;
  text-transform: uppercase;
  letter-spacing: .24em;
  font-weight: 600;
  font-variation-settings: "wdth" 108;
  color: var(--ink-60);
  display: flex; align-items: center; gap: 14px;
}
.eyebrow::after { content: ""; height: 1px; flex: 0 0 64px; background: var(--silver-2); }

/* ---------- 4. Wordmark ---------- */
/* The supplied brand artwork. Never redraw or approximate this mark. */
.wordmark { display: inline-flex; align-items: center; }
.wordmark img {
  height: 26px;
  width: auto;
}

/* Dark surfaces use logo-wordmark-light.png — the same artwork with only the
   letterforms repainted light. The blue glyph is untouched, never filtered. */

.footer-lockup { display: inline-flex; flex-direction: column; gap: 10px; }

.topline-mark { height: 17px; width: auto; flex: 0 0 auto; }

/* ---------- 5. Layout primitives ---------- */
.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

section { position: relative; }

.section-head { margin-bottom: clamp(44px, 5vw, 76px); }
.section-head .label { margin-bottom: 22px; }

/* dark bands share one treatment */
.band-dark {
  background: var(--paper-2);
  color: var(--on-dark);
  position: relative;
  isolation: isolate;
}
.band-dark::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background-image: var(--grain);
  opacity: .45;
  pointer-events: none;
}
.band-dark .label { color: var(--on-dark); }
.band-dark .lede { color: var(--on-dark-70); }
.band-dark .display, .band-dark .h1 { font-weight: 600; }

/* ---------- TOP STRIP ---------- */
.topline {
  background: var(--bg-deep);
  color: var(--on-dark-70);
  font-size: .655rem;
  text-transform: uppercase;
  letter-spacing: .2em;
  font-weight: 500;
  font-variation-settings: "wdth" 106;
}
.topline-inner {
  display: flex; align-items: center; gap: 12px;
  height: 36px;
}
.topline-tag { margin-right: auto; }
.topline .dot { color: var(--accent); margin-inline: 7px; }
.topline a { transition: color .2s var(--ease); }
.topline a:hover { color: var(--on-dark); }

/* ---------- HEADER ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  height: var(--header-h);
  display: flex; align-items: center;
  background: rgba(14, 27, 60, .82);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid var(--hairline);
  transition: box-shadow .3s var(--ease);
}
.site-header.is-scrolled { box-shadow: 0 1px 0 0 var(--hairline-dk), 0 10px 30px -18px rgba(0,0,0,.85); }

.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; }

.site-nav { display: flex; align-items: center; gap: clamp(22px, 3vw, 42px); margin-left: auto; }
.site-nav a {
  position: relative;
  font-size: .695rem;
  text-transform: uppercase;
  letter-spacing: .18em;
  font-weight: 600;
  font-variation-settings: "wdth" 104;
  color: var(--ink-60);
  padding-block: 7px;
  transition: color .2s var(--ease);
}
.site-nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 2px; background: var(--accent);
  box-shadow: 0 0 10px var(--accent-glow);
  transform: scaleX(0); transform-origin: left;
  transition: transform .3s var(--ease);
}
.site-nav a:hover { color: var(--ink); }
.site-nav a:hover::after, .site-nav a.is-active::after { transform: scaleX(1); }
.site-nav a.is-active { color: var(--ink); }

.ig-link { color: var(--ink-60); margin-left: clamp(18px, 2.5vw, 34px); transition: color .2s var(--ease); }
.ig-link:hover { color: var(--accent); }

/* ---------- 6. Components ---------- */

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 18px 32px;
  font-size: .725rem; font-weight: 600;
  font-variation-settings: "wdth" 104;
  text-transform: uppercase; letter-spacing: .17em;
  border: 1px solid var(--accent);
  background: var(--accent); color: var(--on-accent);
  cursor: pointer;
  box-shadow: 0 0 0 1px var(--accent-glow), 0 8px 28px -8px var(--accent-glow);
  transition: background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease), transform .2s var(--ease);
}
.btn:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.btn:active { transform: translateY(1px); }
.btn-lg { padding: 22px 46px; font-size: .78rem; }

.btn-ghost { background: transparent; color: var(--ink); border-color: var(--silver-2); box-shadow: none; }
.btn-ghost:hover { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }

.band-dark .btn { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.band-dark .btn:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }
/* That rule repaints every button in the band, which erased the difference
   between the primary and the secondary once a band carried both. */
.band-dark .btn-ghost {
  background: transparent;
  border-color: var(--on-dark-line);
  color: var(--on-dark);
}
.band-dark .btn-ghost:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}

/* Plates — image containers with a designed empty state */
.plate {
  position: relative;
  overflow: hidden;
  background: var(--silver-1);
  isolation: isolate;
}
.plate img { width: 100%; height: 100%; object-fit: cover; }

/* Placeholder for an image that has not been supplied yet: lit from the
   upper left like the hero photograph, so an empty slot still belongs to
   the night palette rather than glaring white against it. */
.plate-empty {
  background:
    radial-gradient(120% 85% at 26% 4%, rgba(120,180,255,.22) 0%, rgba(120,180,255,0) 55%),
    radial-gradient(95% 65% at 88% 100%, rgba(4,10,26,.55) 0%, rgba(4,10,26,0) 62%),
    linear-gradient(165deg, #1E3468 0%, #16295A 48%, #0C1836 100%);
}
.plate-empty::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(101deg, rgba(160,205,255,0) 36%, rgba(160,205,255,.16) 50%, rgba(160,205,255,0) 63%),
    var(--grain);
  background-blend-mode: normal, overlay;
  opacity: .85;
  pointer-events: none;
}
.plate-article.plate-empty::before {
  content: attr(data-figure);
  position: absolute; right: 20px; bottom: -10px;
  font-family: var(--sans);
  font-size: 6rem; font-weight: 700;
  font-variation-settings: "wdth" 84;
  letter-spacing: -.05em;
  color: rgba(160,205,255,.16);
  line-height: 1;
}

.plate-hero { aspect-ratio: 16 / 9; }
.plate-article {
  aspect-ratio: 4 / 3;
  margin-bottom: 24px;
  box-shadow: 0 0 0 1px var(--hairline), 0 22px 44px -28px rgba(0,0,0,.85);
}

/* Guide cover — the real artwork, framed like a physical book */
.cover {
  position: relative;
  width: min(360px, 84%);
  aspect-ratio: 880 / 1244;
  background: var(--paper-2);
  overflow: hidden;
  box-shadow:
    0 2px 4px rgba(0,0,0,.35),
    0 38px 62px -24px rgba(0,0,0,.7),
    0 84px 120px -60px rgba(0,0,0,.85);
  transform: rotate(-1.8deg);
  transition: transform .5s var(--ease);
}
.cover::before {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0; width: 14px;
  background: linear-gradient(90deg, rgba(13,22,38,.18), rgba(13,22,38,0) 70%);
}
.cover::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(116deg, rgba(255,255,255,0) 40%, rgba(255,255,255,.55) 50%, rgba(255,255,255,0) 62%);
  pointer-events: none;
}
.guide-cover:hover .cover { transform: rotate(-1.8deg) translateY(-8px); }
.cover img { width: 100%; height: 100%; object-fit: cover; }


/* Topic cards */
.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--hairline);
  border-block: 1px solid var(--hairline);
}
.topic {
  background: var(--paper);
  padding: clamp(32px, 3.4vw, 48px) clamp(26px, 2.6vw, 40px) clamp(42px, 4.4vw, 62px);
  transition: background .35s var(--ease), color .35s var(--ease);
}
.topic-index {
  display: block;
  font-size: clamp(2.6rem, 3.6vw, 3.5rem);
  font-weight: 700;
  font-variation-settings: "wdth" 84;
  letter-spacing: -.05em;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px var(--silver-2);
  margin-bottom: clamp(34px, 4.6vw, 62px);
  transition: -webkit-text-stroke-color .35s var(--ease);
}
.topic h3 {
  font-size: clamp(1.24rem, 1.8vw, 1.52rem);
  line-height: 1.14; font-weight: 600;
  font-variation-settings: "wdth" 96;
  letter-spacing: -.024em;
  margin-bottom: 16px;
  text-wrap: balance;
}
.topic p { color: var(--ink-60); font-size: .97rem; line-height: 1.58; max-width: 34ch; }

.topic:hover { background: var(--bg-lift); color: var(--ink); }
.topic:hover p { color: var(--on-dark-70); }
.topic:hover .topic-index { -webkit-text-stroke-color: var(--accent); }

/* Article cards */
.article-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(30px, 3.2vw, 46px); }
.article a { display: block; }
.article .plate { transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.article a:hover .plate {
  transform: translateY(-6px);
  box-shadow: 0 0 0 1px var(--silver-2), 0 0 40px -12px var(--accent-glow), 0 28px 50px -28px rgba(0,0,0,.9);
}
.article-kicker {
  display: inline-block;
  font-size: .635rem; text-transform: uppercase; letter-spacing: .2em;
  color: var(--on-accent); background: var(--accent);
  font-weight: 600; padding: 5px 9px; margin-bottom: 14px;
}
.article h3 {
  font-size: clamp(1.18rem, 1.6vw, 1.4rem);
  line-height: 1.16; font-weight: 600;
  font-variation-settings: "wdth" 96;
  letter-spacing: -.024em;
  margin-bottom: 12px; text-wrap: balance;
}
.article-dek { color: var(--ink-60); font-size: .94rem; line-height: 1.55; margin-bottom: 20px; }
.read-more {
  display: inline-block;
  font-size: .665rem; text-transform: uppercase; letter-spacing: .17em; font-weight: 600;
  border-bottom: 2px solid var(--silver-2); padding-bottom: 5px;
  transition: border-color .25s var(--ease);
}
.article a:hover .read-more { border-color: var(--accent); }

/* Subscribe form */
.subscribe { margin-top: clamp(32px, 3.4vw, 44px); max-width: 540px; }
.field { display: flex; gap: 0; }
.field input {
  flex: 1 1 auto; min-width: 0;
  padding: 19px 20px;
  background: transparent;
  border: 1px solid var(--on-dark-line);
  border-right: 0;
  color: var(--on-dark);
  font-size: .98rem;
  transition: border-color .25s var(--ease), background .25s var(--ease);
}
.field input::placeholder { color: var(--on-dark-45); }
.field input:focus {
  outline: none;
  border-color: var(--on-dark);
  background: rgba(242,243,244,.05);
}
.field input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.field .btn { flex: 0 0 auto; white-space: nowrap; }

.form-status {
  min-height: 1.2em; margin-top: 14px;
  font-size: .88rem; line-height: 1.45;
  color: var(--on-dark-70);
}
.form-status.is-error { color: #FF9179; }
.form-status.is-success { color: var(--on-dark); font-weight: 600; }
.form-note { margin-top: 12px; font-size: .78rem; color: var(--on-dark-45); line-height: 1.5; }

.subscribe.is-sending .btn { opacity: .6; pointer-events: none; }
.subscribe.is-done .field, .subscribe.is-done .form-note { display: none; }
.subscribe.is-done .form-status { font-size: 1.1rem; }

/* ---------- 7. Sections ---------- */

/* HERO — the image bleeds off the right edge.
   Ambient light sits behind the photograph so the frame appears to be lit
   by the city in it, rather than pasted onto a flat ground. */
.hero { padding-block: clamp(44px, 6vw, 88px) var(--section-y); overflow: hidden; }
.hero::before {
  content: "";
  position: absolute; left: 46%; top: -24%; width: 74%; height: 118%;
  background: radial-gradient(closest-side,
    rgba(61,155,255,.30), rgba(61,155,255,.09) 45%, transparent 72%);
  filter: blur(30px);
  pointer-events: none;
  z-index: 0;
}
.hero::after {
  content: "";
  position: absolute; left: -14%; bottom: -34%; width: 52%; height: 80%;
  background: radial-gradient(closest-side, rgba(120,210,255,.13), transparent 70%);
  filter: blur(42px);
  pointer-events: none;
  z-index: 0;
}
.hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 45vw);
  gap: clamp(40px, 5vw, 84px);
  align-items: center;
  padding-left: max(var(--gutter), calc((100vw - var(--shell)) / 2 + var(--gutter)));
}
.hero-copy .eyebrow { margin-bottom: clamp(24px, 3vw, 36px); }
.hero-copy .display { margin-bottom: clamp(24px, 2.6vw, 34px); }
.hero-actions { margin-top: clamp(32px, 3.4vw, 44px); }
.hero-meta {
  margin-top: clamp(30px, 3vw, 42px);
  padding-top: 24px;
  border-top: 1px solid var(--hairline);
  font-size: .69rem; text-transform: uppercase; letter-spacing: .17em;
  font-weight: 500;
  color: var(--ink-60);
}
.hero-meta span { color: var(--accent); margin-inline: 6px; }

.hero-visual figcaption {
  margin-top: 16px;
  font-size: .67rem; text-transform: uppercase; letter-spacing: .16em;
  font-weight: 500;
  color: var(--ink-60);
}

/* GUIDE — the dark anchor of the page */
.guide { padding-block: var(--section-y); }
.guide-grid {
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: clamp(44px, 6vw, 96px);
  align-items: center;
}
.guide-cover { display: flex; justify-content: center; }
.guide-copy .label { margin-bottom: 24px; }
.guide-copy .h1 { max-width: 19ch; margin-bottom: 18px; }
.guide-sub {
  font-family: var(--serif);
  font-variation-settings: "opsz" 22;
  font-style: italic;
  font-size: clamp(1.08rem, 1.5vw, 1.32rem);
  line-height: 1.4;
  color: var(--on-dark-70);
  margin-bottom: clamp(28px, 3vw, 38px);
}

.guide-points { display: grid; border-top: 1px solid var(--on-dark-line); max-width: 500px; }
.guide-points li {
  padding: 14px 0 14px 30px;
  border-bottom: 1px solid var(--on-dark-line);
  font-size: .98rem;
  color: var(--on-dark-70);
  position: relative;
}
.guide-points li::before {
  content: ""; position: absolute; left: 2px; top: 22px;
  width: 14px; height: 2px; background: var(--accent);
}

/* COVERS */
.covers { padding-block: var(--section-y); }

/* JOURNAL */
.journal {
  background: var(--paper-2);
  border-block: 1px solid var(--hairline);
  padding-block: var(--section-y);
}
.journal-cta {
  margin-top: clamp(50px, 5vw, 76px);
  padding-top: clamp(36px, 4vw, 52px);
  border-top: 1px solid var(--hairline);
  text-align: center;
}

/* BRAND IDEA */
/* ---------- robot calendar strip (home) ----------
   A band, not a card row: the two neighbouring sections are already a card
   grid and a centred manifesto, and this one has a single job. The copy holds
   the left, the two actions sit at the end of the row on wide screens. */
.cal-strip { padding-block: clamp(56px, 8vw, 104px); }
.cal-strip-inner {
  display: grid;
  gap: clamp(26px, 4vw, 52px);
  align-items: center;
}
.cal-strip-copy .h1 { max-width: 24ch; margin-bottom: 14px; }
.cal-strip-copy .lede { max-width: 46ch; margin-bottom: 0; }
.cal-strip-actions { display: flex; flex-wrap: wrap; gap: 12px; }

@media (min-width: 900px) {
  .cal-strip-inner { grid-template-columns: minmax(0, 1fr) auto; }
  .cal-strip-actions { flex-direction: column; align-items: stretch; }
}

.idea { padding-block: var(--section-y); }
.idea-inner {
  display: grid;
  grid-template-columns: 1.08fr .92fr;
  gap: clamp(36px, 5vw, 86px);
  align-items: start;
}
.idea-title {
  font-size: clamp(2.2rem, 4.6vw, 3.9rem);
  line-height: 1;
  max-width: 13ch;
}
.idea-copy { display: grid; gap: 24px; max-width: 46ch; }
.idea-copy p { color: var(--ink-80); font-size: clamp(1.02rem, 1.25vw, 1.15rem); line-height: 1.58; }
.idea-questions {
  font-family: var(--serif);
  font-variation-settings: "opsz" 28;
  font-size: clamp(1.3rem, 2vw, 1.75rem) !important;
  line-height: 1.34 !important;
  color: var(--ink) !important;
  padding-left: 26px;
  border-left: 2px solid var(--accent);
}

/* FINAL CTA */
.final-cta { padding-block: clamp(96px, 13vw, 180px); }
.final-cta .cta-inner { text-align: center; display: grid; justify-items: center; gap: 24px; }
.final-cta .lede { max-width: 40ch; }
.final-cta .btn { margin-top: 18px; }

/* FOOTER */
.site-footer {
  background: var(--bg-deep);
  color: var(--on-dark-70);
  border-top: 1px solid var(--hairline-dk);
  padding-block: clamp(40px, 4.5vw, 60px);
}
.footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 26px; flex-wrap: wrap; }
.footer-nav { display: flex; gap: clamp(18px, 2.6vw, 36px); flex-wrap: wrap; }
.footer-nav a { font-size: .8rem; transition: color .2s var(--ease); }
.footer-nav a:hover { color: var(--accent-soft); }
.copyright { font-size: .75rem; color: var(--on-dark-45); }

/* ---------- 8. Motion (restrained) ---------- */
.js .reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.js .reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
  .js .reveal { opacity: 1; transform: none; }
}

/* ---------- 9. Responsive ---------- */
@media (max-width: 1080px) {
  .idea-inner { grid-template-columns: 1fr; }
  .idea-title { max-width: 17ch; }
}

@media (max-width: 960px) {
  .hero-grid {
    grid-template-columns: 1fr;
    gap: clamp(34px, 6vw, 52px);
    padding-inline: var(--gutter);
    max-width: var(--shell);
    margin-inline: auto;
  }
  .hero-visual { order: -1; }
  .plate-hero { aspect-ratio: 16 / 9; }
  .guide-grid { grid-template-columns: 1fr; }
  .guide-cover { justify-content: flex-start; }
  .cover { width: min(300px, 72%); }
  .card-grid { grid-template-columns: 1fr; }
  .article-grid { grid-template-columns: 1fr; gap: clamp(36px, 6vw, 52px); }
  .article .plate { aspect-ratio: 16 / 9; }
}

@media (max-width: 720px) {
  body { font-size: 16px; }
  .topline-tag { display: none; }
  .topline-inner { justify-content: center; }
  .nav-long { display: none; }
  .site-nav { gap: 16px; }
  .site-nav a { font-size: .635rem; letter-spacing: .13em; }
  .wordmark img { height: 21px; }
  .ig-link { display: none; }
  .hero-meta { line-height: 1.9; }
  .plate-hero { aspect-ratio: 16 / 9; }
  .lede { max-width: none; }
  .field { flex-direction: column; gap: 10px; }
  .field input { border-right: 1px solid var(--on-dark-line); }
  .field .btn { width: 100%; }
  .footer-inner { flex-direction: column; align-items: flex-start; gap: 24px; }
  .br-lg { display: none; }
}

@media (max-width: 400px) {
  .site-nav { gap: 12px; }
  .site-nav a { font-size: .6rem; letter-spacing: .1em; }
}

/* ---------- 10. Robot passports ----------
   Built on the tokens above: same hairlines, same sharp corners, same
   accent. The plate is the existing one, so a robot without a photo gets
   the designed empty plate with its name set large rather than a grey box
   or a drawn stand-in. */
.rb-head { padding-block: clamp(40px, 6vw, 84px) clamp(24px, 3vw, 40px); }
.rb-head .label { margin-bottom: 22px; }
.rb-head .h1 { max-width: 20ch; margin-bottom: 20px; }
.rb-head .lede { max-width: 56ch; }
.rb-checked {
  margin-top: 18px;
  font-size: .84rem;
  line-height: 1.55;
  color: var(--ink-60);
  max-width: 60ch;
}

.rb-list { padding-block: clamp(20px, 3vw, 36px) var(--section-y); }
.rb-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: clamp(16px, 2.2vw, 28px);
}

.rb-card { position: relative; }
.rb-card-link {
  display: grid;
  gap: 14px;
  text-decoration: none;
  color: inherit;
}
.plate-robot { aspect-ratio: 4 / 5; }
.plate-robot-hero { aspect-ratio: 3 / 4; }
.plate-word {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  padding: 0 10%;
  z-index: 1;
  font-family: var(--serif);
  font-variation-settings: "opsz" 72;
  font-size: clamp(1.5rem, 4.5cqw + .6rem, 2.6rem);
  line-height: 1.04;
  text-align: center;
  text-wrap: balance;
  color: var(--ink);
}
.rb-card .plate { container-type: inline-size; }
.rb-card-body { display: grid; gap: 6px; }
.rb-card-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  font-size: .66rem;
  text-transform: uppercase;
  letter-spacing: .16em;
  font-weight: 600;
}
.rb-status { color: var(--accent); }
.rb-status--commercial_use, .rb-status--prototype { color: var(--ink-60); }
.rb-price { color: var(--ink-60); }
.rb-card-name {
  font-size: clamp(1.15rem, 1.5vw, 1.35rem);
  line-height: 1.14;
  font-weight: 600;
  font-variation-settings: "wdth" 96;
  letter-spacing: -.022em;
}
.rb-card-line { font-size: .92rem; line-height: 1.5; color: var(--ink-80); }
.rb-card-maker { font-size: .8rem; color: var(--ink-60); }
.rb-card-link:hover .rb-card-name { color: var(--accent-soft); }
.rb-card-link:hover .plate { outline: 1px solid var(--silver-2); outline-offset: -1px; }

/* ---- one passport ---- */
.rb-crumbs { padding-top: 22px; }
.rb-crumbs ol { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.rb-crumbs li { font-size: .8rem; color: var(--ink-60); }
.rb-crumbs li + li::before { content: "/"; margin-right: 8px; color: var(--ink-40); }
.rb-crumbs a { color: var(--ink-60); text-decoration: none; }
.rb-crumbs a:hover { color: var(--ink); }

.rb-hero { padding-block: clamp(26px, 4vw, 48px) clamp(30px, 4vw, 56px); }
.rb-hero-grid { display: grid; gap: clamp(26px, 4vw, 56px); align-items: start; }
.rb-figure { margin: 0; }
.rb-figure .plate { container-type: inline-size; }
.rb-figcaption {
  margin-top: 12px;
  font-size: .78rem;
  line-height: 1.5;
  color: var(--ink-60);
}
.rb-hero-copy .label { margin-bottom: 20px; }
.rb-hero-copy .h1 { margin-bottom: 14px; }
.rb-tagline {
  font-size: clamp(1.02rem, 1.3vw, 1.18rem);
  line-height: 1.5;
  color: var(--ink-80);
  max-width: 42ch;
  margin-bottom: clamp(24px, 3vw, 34px);
}

.rb-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0 24px;
  margin: 0 0 26px;
}
.rb-fact { padding: 12px 0; border-bottom: 1px solid var(--hairline); }
.rb-fact dt {
  font-size: .64rem;
  text-transform: uppercase;
  letter-spacing: .17em;
  font-weight: 600;
  color: var(--ink-60);
  margin-bottom: 4px;
}
.rb-fact dd { margin: 0; font-weight: 600; font-size: 1rem; line-height: 1.3; }

.rb-ready-wrap { margin-bottom: 24px; }
.rb-ready-title {
  font-size: .64rem;
  text-transform: uppercase;
  letter-spacing: .17em;
  font-weight: 600;
  color: var(--ink-60);
  margin-bottom: 10px;
}
.rb-ready { display: flex; align-items: center; gap: 7px; }
.rb-dot {
  width: 10px; height: 10px;
  border: 1px solid var(--silver-2);
}
.rb-dot.is-on { background: var(--accent); border-color: var(--accent); }
.rb-ready-label { margin-left: 6px; font-size: .8rem; color: var(--ink-60); }
.rb-nolink { font-size: .84rem; line-height: 1.55; color: var(--ink-60); max-width: 44ch; }

.rb-body { padding-block: clamp(24px, 3vw, 40px) clamp(40px, 5vw, 72px); }
.rb-body-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(22px, 3vw, 40px);
  margin-bottom: 26px;
}
.rb-block { display: grid; gap: 10px; align-content: start; }
.rb-block-title {
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .2em;
  font-weight: 600;
  font-variation-settings: "wdth" 106;
  color: var(--accent);
}
.rb-block p { font-size: .97rem; line-height: 1.6; color: var(--ink-80); max-width: 46ch; }
.rb-reality { padding: clamp(18px, 2vw, 24px); border: 1px solid var(--hairline); }
.rb-reality .rb-block-title { color: var(--ink-60); }

.rb-similar { padding-block: clamp(30px, 4vw, 56px) var(--section-y); }
.rb-similar-title { font-size: clamp(1.5rem, 2.6vw, 2.1rem); margin-bottom: clamp(22px, 3vw, 34px); }

@media (min-width: 900px) {
  .rb-hero-grid { grid-template-columns: minmax(0, 380px) minmax(0, 1fr); }
  .rb-hero-grid--noimg { grid-template-columns: minmax(0, 1fr); }
}
.rb-hero-grid--noimg .rb-tagline { max-width: 52ch; }

/* A card with no photograph yet: a bordered text card rather than an empty
   plate. Adding the image later restores the plate and this rule stops
   applying, so nothing needs rewriting when the pictures arrive. */
.rb-card--noimg .rb-card-link {
  height: 100%;
  padding: clamp(18px, 2.2vw, 26px);
  border: 1px solid var(--hairline);
  background: linear-gradient(158deg, rgba(150,195,255,.07), rgba(150,195,255,.02) 60%, rgba(150,195,255,0));
  transition: border-color .3s var(--ease), transform .3s var(--ease);
}
.rb-card--noimg .rb-card-link:hover {
  border-color: var(--silver-2);
  transform: translateY(-2px);
}
.rb-card--noimg .rb-card-name { font-size: clamp(1.25rem, 1.7vw, 1.5rem); }

.rb-teaser { padding-block: var(--section-y); }
.rb-teaser .rb-grid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.rb-teaser-more { margin-top: clamp(24px, 3vw, 36px); }
.rb-teaser-more a {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: .7rem; text-transform: uppercase; letter-spacing: .19em;
  font-weight: 600; color: var(--accent);
  padding-bottom: 6px; border-bottom: 1px solid var(--hairline);
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.rb-teaser-more a:hover { color: var(--accent-soft); border-color: var(--accent); }

/* Sits under the price when the number needs a sentence to stay honest:
   a target rather than a price, or a listing with checkout switched off. */
.rb-pricenote {
  margin: -12px 0 20px;
  font-size: .84rem;
  line-height: 1.55;
  color: var(--ink-60);
  max-width: 46ch;
}

/* The home page teases the guide; the form itself lives on /guide. */
.guide-actions { margin-top: clamp(24px, 3vw, 32px); }

/* ---------- 11. Corner radius ----------
   Applied from one token so the whole site keeps a single shape system.
   Listed explicitly rather than set with a wildcard, because a blanket rule
   would round the page bands and the header too. */
.btn,
.chip,
.plate,
.cover,
.ev,
.topic,
.rb-reality,
.rb-dot,
.field input,
.subscribe input,
.cal-widget,
.cw-nav,
.cw-d--on a,
.rb-card--noimg .rb-card-link { border-radius: var(--radius); }

/* The status pill inside an event card is small enough that the same radius
   would read as a rectangle; it gets the pill treatment its size asks for. */
.ev-status { border-radius: 999px; }

/* ---------- 12. Articles ----------
   Long-form reading on a dark ground. The measure is the main lever: light
   text on dark needs a shorter line and a little more leading than the same
   text would need on paper, or the eye loses its place on the return sweep. */
.art { padding-block: clamp(24px, 3vw, 40px) clamp(50px, 6vw, 90px); }
.art-shell { max-width: 720px; }
.art .label { margin-bottom: 20px; }
.art-title { margin-bottom: 14px; }
.art-title { margin-bottom: clamp(22px, 3vw, 32px); }

.art p {
  font-size: 1.02rem;
  line-height: 1.72;
  color: var(--ink-80);
  margin-bottom: 1.15em;
}
/* The opening paragraph is the answer, and the one an assistant quotes. */
.art-title + p {
  font-size: 1.14rem;
  line-height: 1.6;
  color: var(--ink);
}
.art h2 {
  font-family: var(--serif);
  font-variation-settings: "opsz" 40;
  font-size: clamp(1.35rem, 2.2vw, 1.75rem);
  line-height: 1.2;
  font-weight: 500;
  letter-spacing: -.012em;
  margin: clamp(34px, 4vw, 52px) 0 16px;
  text-wrap: balance;
}
.art h3 {
  font-size: 1.02rem;
  font-weight: 600;
  margin: 28px 0 10px;
}
.art a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.art a:hover { color: var(--accent-soft); }
.art strong { color: var(--ink); font-weight: 600; }
.art hr { border: 0; border-top: 1px solid var(--hairline); margin: clamp(34px, 4vw, 50px) 0; }
.art ul, .art ol { margin: 0 0 1.15em; padding-left: 1.3em; }
.art ul { list-style: disc; }
.art ol { list-style: decimal; }
.art li { font-size: 1rem; line-height: 1.66; color: var(--ink-80); margin-bottom: .5em; }
.art li::marker { color: var(--ink-40); }
.art table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 1.4em;
  font-size: .93rem;
}
.art th, .art td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--hairline); }
.art th { font-size: .68rem; text-transform: uppercase; letter-spacing: .14em; color: var(--ink-60); }
/* A wide table must scroll inside itself, never push the page sideways. */
.art .table-wrap { overflow-x: auto; }

/* ---------- articles index ---------- */
.art-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: clamp(14px, 2vw, 22px);
}
.art-card a {
  display: grid;
  gap: 10px;
  height: 100%;
  align-content: start;
  padding: clamp(20px, 2.4vw, 28px);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: linear-gradient(158deg, rgba(150,195,255,.07), rgba(150,195,255,.02) 60%, rgba(150,195,255,0));
  transition: border-color .3s var(--ease), transform .3s var(--ease);
}
.art-card a:hover { border-color: var(--silver-2); transform: translateY(-2px); }
.art-card-pillar {
  font-size: .62rem;
  text-transform: uppercase;
  letter-spacing: .19em;
  font-weight: 600;
  color: var(--accent);
}
.art-card-title {
  font-size: clamp(1.08rem, 1.4vw, 1.25rem);
  line-height: 1.22;
  font-weight: 600;
  font-variation-settings: "wdth" 96;
  letter-spacing: -.02em;
}
.art-card a:hover .art-card-title { color: var(--accent-soft); }
.art-card-dek { font-size: .9rem; line-height: 1.55; color: var(--ink-60); }

/* ---------- 13. Compare ----------
   The picker is a list of buttons, not a form: nothing is submitted and
   nothing leaves the browser. The tables scroll inside their own box so a
   twenty-row comparison never pushes the page sideways. */
.cmp-tool { padding-block: clamp(24px, 3vw, 40px) clamp(40px, 5vw, 72px); }

.cmp-board {
  border: 1px solid var(--hairline-dk);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(150,195,255,.075), rgba(150,195,255,.02));
  padding: clamp(16px, 2.2vw, 24px);
  margin-bottom: clamp(28px, 3.5vw, 44px);
}
.cmp-board-head {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 16px;
}
.cmp-board-title, .cmp-picker-title {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .18em;
  font-weight: 600; color: var(--ink);
}
.cmp-board-actions { display: flex; gap: 8px; }

.cmp-board-scroll { overflow-x: auto; }
.cmp-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.cmp-table th, .cmp-table td {
  text-align: left; padding: 11px 14px; vertical-align: top;
  border-bottom: 1px solid var(--hairline);
}
.cmp-table thead th {
  font-size: .95rem; font-weight: 600; letter-spacing: -.015em;
  border-bottom-color: var(--silver-2);
  white-space: nowrap;
}
.cmp-table thead th a { color: var(--ink); }
.cmp-table thead th a:hover { color: var(--accent-soft); }
.cmp-table tbody th {
  font-size: .64rem; text-transform: uppercase; letter-spacing: .16em;
  font-weight: 600; color: var(--ink-60); white-space: nowrap;
}
.cmp-table td { color: var(--ink-80); min-width: 180px; }
/* Where all three say the same thing there is nothing to compare. */
.cmp-table tr.is-same td { color: var(--ink-40); }
.cmp-nil { color: var(--ink-40); font-style: italic; }

.cmp-drop {
  margin-left: 8px; width: 22px; height: 22px;
  border: 1px solid var(--hairline); border-radius: var(--radius);
  background: transparent; color: var(--ink-60);
  font-size: .9rem; line-height: 1; cursor: pointer;
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.cmp-drop:hover { color: var(--ink); border-color: var(--silver-2); }
.cmp-note { margin-top: 12px; font-size: .84rem; color: var(--ink-60); min-height: 1.3em; }

/* ---- picker ---- */
.cmp-picker-head {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 14px; margin-bottom: 18px;
}
.cmp-pick-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 10px; list-style: none; margin: 0; padding: 0;
}
.cmp-pick { position: relative; }
.cmp-pick-add {
  display: grid; gap: 4px; width: 100%; height: 100%;
  text-align: left; padding: 14px 42px 14px 16px;
  border: 1px solid var(--hairline); border-radius: var(--radius);
  background: transparent; color: inherit; cursor: pointer;
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.cmp-pick-add:hover { border-color: var(--silver-2); }
.cmp-pick.is-on .cmp-pick-add {
  border-color: var(--accent);
  background: rgba(61, 155, 255, .12);
}
.cmp-pick-name { font-weight: 600; font-size: .97rem; line-height: 1.2; }
.cmp-pick-meta { font-size: .76rem; color: var(--ink-60); }
.cmp-pick-state {
  position: absolute; right: 14px; bottom: 14px;
  width: 16px; height: 16px;
  border: 1px solid var(--silver-2); border-radius: var(--radius);
}
.cmp-pick.is-on .cmp-pick-state {
  background: var(--accent); border-color: var(--accent);
}
.cmp-pick.is-on .cmp-pick-state::after {
  content: ""; position: absolute; inset: 3px 3px 4px 3px;
  border-left: 2px solid var(--on-accent); border-bottom: 2px solid var(--on-accent);
  transform: rotate(-45deg);
}
.cmp-fav {
  position: absolute; top: 10px; right: 10px;
  width: 26px; height: 26px; display: grid; place-items: center;
  border: 0; background: transparent; color: var(--ink-40); cursor: pointer;
  transition: color .2s var(--ease);
}
.cmp-fav:hover { color: var(--accent-soft); }
.cmp-pick.is-fav .cmp-fav { color: var(--accent); }
.cmp-pick.is-fav .cmp-fav svg path { fill: currentColor; }

.cmp-empty, .cmp-privacy {
  margin-top: 16px; font-size: .84rem; line-height: 1.55; color: var(--ink-60);
  max-width: 60ch;
}
.cmp-privacy { color: var(--ink-40); }

.cmp-all { padding-block: clamp(30px, 4vw, 56px) var(--section-y); }
.cmp-all-title { font-size: clamp(1.5rem, 2.6vw, 2.1rem); margin-bottom: 12px; }
.cmp-all .lede { margin-bottom: clamp(22px, 3vw, 32px); }
.cmp-table--full tbody th { text-transform: none; letter-spacing: 0; font-size: .92rem; color: var(--ink); }
.cmp-table--full tbody th a { color: var(--ink); }
.cmp-table--full tbody th a:hover { color: var(--accent-soft); }


/* ---------- 14. Chips ----------
   Moved out of calendar.css: the calendar, the article index and the compare
   tool all use them, and only the calendar loads that file. Left there, a
   chip on the other two fell back to the browser's default button, which is
   a light grey box, and the site's light text on it scored 1:1. */
.chip-row {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-bottom: 8px;
}
.chip-row:last-of-type { margin-bottom: 0; }
.chip-row--years { margin-top: 4px; }
.chip {
  font: inherit;
  font-size: .655rem;
  text-transform: uppercase;
  letter-spacing: .15em;
  font-weight: 600;
  font-variation-settings: "wdth" 104;
  color: var(--ink-60);
  background: transparent;
  border: 1px solid var(--hairline);
  padding: 8px 14px;
  cursor: pointer;
  white-space: nowrap;
  transition: color .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease);
}
.chip:hover { color: var(--ink); border-color: var(--silver-2); }
.chip.is-on {
  color: var(--on-accent);
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 0 18px -6px var(--accent-glow);
}
.chip--year.is-on { box-shadow: none; }

/* A filter bar that is not the calendar's. */
.rb-filters {
  padding-block: 16px 14px;
  border-block: 1px solid var(--hairline);
}