/* =========================================================
   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); box-shadow: 0 0 22px -4px var(--accent-glow); }

.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);
  box-shadow: 0 0 22px -4px var(--accent-glow);
}

/* 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-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 photograph fills the first screen.
   Its sky is `--paper`, so there is no frame: the headline stands in the
   night on the left, the robot walks on the right, and the bottom of the
   frame dissolves into the page. The scrim exists for one reason: the
   sofa and marble table sit bottom-left, under the paragraph and button,
   and white text needs a dark ground there. It fades to nothing before
   it reaches the robot. */
.hero {
  position: relative;
  min-height: calc(100svh - var(--header-h));
  display: grid;
  align-items: center;
  padding-block: clamp(56px, 8vh, 96px) clamp(72px, 10vh, 120px);
  overflow: hidden;
  isolation: isolate;
}
/* The robot's feet touch the bottom edge of the photograph, so there is no
   bottom fade: the frame ends where the floor ends and the next band
   starts. The image is anchored to the bottom, so whatever gets cropped is
   ceiling, never feet. Both side edges are masked into the ground so the
   photograph never shows a vertical edge, whichever fit applies. */
.hero-bg {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 72% 100%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 9%, #000 91%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 9%, #000 91%, transparent 100%);
}
/* Screens wider than the photograph (16:9) would otherwise scale it up and
   crop it; there the whole frame is shown at the hero's height instead, so
   the robot stands further back and in full, and the ground fills the sides. */
@media (min-width: 961px) and (min-aspect-ratio: 16 / 9) {
  .hero-bg { object-fit: contain; object-position: 100% 100%; }
}
/* Solid ground on the left, where the copy stands and where a right-aligned
   photograph's left edge would otherwise show; clear by the time it reaches
   the robot. */
.hero-scrim {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg,
    var(--paper) 0%, var(--paper) 12%, rgba(14,27,60,.93) 24%,
    rgba(14,27,60,.84) 34%, rgba(14,27,60,.42) 54%, rgba(14,27,60,0) 72%);
}
/* No photograph (file missing): the copy stands on the plain ground. */
.hero--noimg .hero-scrim { background: none; }

.hero-inner { position: relative; width: 100%; }
.hero-copy { max-width: 620px; }
.hero-copy .eyebrow { margin-bottom: clamp(24px, 3vw, 36px); }
.hero-copy .display { margin-bottom: clamp(24px, 2.6vw, 34px); }
.hero-copy .lede { text-shadow: 0 1px 18px rgba(8,16,38,.7); }
.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; }

/* 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) {
  /* Narrow screens: the photograph is the top of the hero, robot in full
     with his feet on the frame's bottom edge, and the copy follows below on
     the plain ground. No scrim: nothing sits on top of the picture. */
  .hero {
    min-height: 0;
    align-items: end;
    padding-top: calc(min(60svh, 500px) + 36px);
    padding-bottom: clamp(48px, 8vh, 72px);
  }
  .hero-bg {
    height: min(60svh, 500px); object-position: 74% 100%;
    -webkit-mask-image: none; mask-image: none;
  }
  .hero-scrim { display: none; }
  .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; }
  .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); }
/* Same neon edge as the article cards, on the picture. */
.rb-card .plate { transition: box-shadow .3s var(--ease), transform .3s var(--ease); }
/* and the picture eases in a touch inside its frame, as on the article cards */
.rb-card .plate img { transition: transform .6s var(--ease); }
.rb-card-link:hover .plate img,
.rb-card-link:focus-visible .plate img { transform: scale(1.04); }
.rb-card-link:hover .plate,
.rb-card-link:focus-visible .plate {
  transform: translateY(-2px);
  /* the picture is near-black, so the edge needs more light than the
     article cards to read as neon: a 2px line, a close glow, a wide haze */
  box-shadow:
    0 0 0 2px var(--accent),
    0 0 16px 2px rgba(61,155,255,.6),
    0 0 44px 6px rgba(61,155,255,.25);
}

/* ---- 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);
}
/* Set only when the maker supplied the photograph (robots.json `photo`). */
.rb-verified {
  display: inline-block;
  margin-right: 8px;
  padding: 2px 8px;
  border: 1px solid var(--accent);
  border-radius: 999px;
  font-size: .64rem;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-weight: 600;
  color: var(--accent);
}
.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-family { padding-bottom: 0; }

/* Earlier generations of one robot: three upright plates in a row, the
   year doing the work a headline would. */
.rb-lineage { padding-block: clamp(30px, 4vw, 56px) 0; }
.rb-lineage-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: clamp(16px, 2.4vw, 28px);
  margin-bottom: 14px;
}
.rb-lineage-item { margin: 0; }
.rb-lineage-item .plate { aspect-ratio: 4 / 5; }
.rb-lineage-item figcaption { display: grid; gap: 4px; margin-top: 12px; }
.rb-lineage-year { font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); font-weight: 600; }
.rb-lineage-name { font-weight: 600; }
.rb-lineage-note { font-size: .88rem; line-height: 1.5; color: var(--ink-60); }
.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), box-shadow .3s var(--ease);
}
/* On hover the outline lights up in the accent blue, the same glow the
   hero headline carries: a crisp 1px edge plus a soft halo outside it. */
.art-card a:hover,
.art-card a:focus-visible {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 0 0 1px rgba(61,155,255,.35), 0 0 22px -4px var(--accent-glow);
}
.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); }

/* A card with a picture: the image runs edge to edge across the top and the
   text keeps the padding it always had. Cards without one are unchanged. */
.art-card--img a { padding: 0; gap: 0; overflow: hidden; }
.art-card--img .art-card-media { display: block; border-bottom: 1px solid var(--hairline); }
.art-card--img .art-card-media img {
  display: block; width: 100%; height: auto; aspect-ratio: 800 / 420; object-fit: cover;
  transition: transform .6s var(--ease);
}
.art-card--img a:hover .art-card-media img { transform: scale(1.03); }
.art-card--img .art-card-body { display: grid; gap: 10px; padding: clamp(20px, 2.4vw, 28px); }

/* Questions and answers: a list of questions, each opens to its answer. */
.art .faq-item {
  margin: 0 0 10px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: linear-gradient(158deg, rgba(150,195,255,.06), rgba(150,195,255,.015) 60%, rgba(150,195,255,0));
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.art .faq-item summary {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  padding: 16px 18px;
  cursor: pointer; list-style: none;
  font-weight: 600; color: var(--ink); line-height: 1.4;
}
.art .faq-item summary::-webkit-details-marker { display: none; }
.art .faq-item summary::after {
  content: ""; flex: 0 0 auto; width: 10px; height: 10px; margin-top: 6px;
  border-right: 1.5px solid var(--accent); border-bottom: 1.5px solid var(--accent);
  transform: rotate(45deg); transition: transform .3s var(--ease);
}
.art .faq-item[open] summary::after { transform: rotate(-135deg); margin-top: 10px; }
.art .faq-item:hover,
.art .faq-item[open] {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px rgba(61,155,255,.25), 0 0 20px -6px var(--accent-glow);
}
.art .faq-item summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: var(--radius); }
.art .faq-answer { padding: 0 18px 16px; }
.art .faq-answer p { margin: 0; }

/* The article hero sits under the title, at the column's width. */
.art-hero { margin: 0 0 clamp(26px, 3vw, 36px); }
.art-hero img {
  display: block; width: 100%; height: auto;
  border-radius: var(--radius); border: 1px solid var(--hairline);
}

/* ---------- 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); }

/* With a thumbnail: small upright picture on the left, name and status on
   the right. The picture's own dark ground doubles as the card's accent. */
.cmp-pick.has-thumb .cmp-pick-add {
  grid-template-columns: 56px 1fr;
  grid-template-rows: auto 1fr;
  column-gap: 14px; row-gap: 4px;
  align-items: start;
  padding: 10px 42px 10px 10px;
}
.cmp-pick-thumb {
  grid-row: 1 / span 2;
  width: 56px; height: 70px; object-fit: cover;
  border-radius: calc(var(--radius) - 2px);
}
.cmp-pick.has-thumb .cmp-pick-name { align-self: end; margin-top: 12px; }
.cmp-pick.has-thumb .cmp-pick-meta { align-self: start; }
.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); }
/* Sort buttons fill the header cell; the arrow shows direction, a faint
   double arrow shows the column can be sorted at all. */
.cmp-table--full thead th { padding: 0; white-space: nowrap; }
.cmp-sort {
  display: inline-flex; align-items: center; gap: 8px;
  width: 100%; padding: 14px 16px;
  border: 0; background: transparent; color: inherit; font: inherit;
  text-transform: inherit; letter-spacing: inherit; text-align: left;
  cursor: pointer; transition: color .2s var(--ease);
}
.cmp-sort:hover { color: var(--accent-soft); }
.cmp-sort-ico {
  width: 8px; height: 12px; flex: 0 0 auto; opacity: .45;
  background:
    linear-gradient(45deg, transparent 50%, currentColor 50%) top / 8px 5px no-repeat,
    linear-gradient(-135deg, transparent 50%, currentColor 50%) bottom / 8px 5px no-repeat;
}
.cmp-sort.is-asc, .cmp-sort.is-desc { color: var(--accent); }
.cmp-sort.is-asc .cmp-sort-ico { opacity: 1; background-size: 8px 5px, 0 0; }
.cmp-sort.is-desc .cmp-sort-ico { opacity: 1; background-size: 0 0, 8px 5px; }

.cmp-filter { margin-bottom: clamp(16px, 2vw, 22px); display: grid; gap: 12px; }
.cmp-filter .chip-row { margin-bottom: 0; }
.cmp-filter-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.cmp-filter-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .16em; color: var(--ink-60); }
.cmp-select {
  padding: 9px 34px 9px 12px; min-height: 40px;
  border: 1px solid var(--hairline-dk); border-radius: var(--radius);
  background: var(--paper-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23EDF3FC' stroke-width='1.4'/%3E%3C/svg%3E") no-repeat right 12px center;
  color: var(--ink); font: inherit; font-size: .88rem;
  -webkit-appearance: none; appearance: none; cursor: pointer;
}
.cmp-select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.cmp-filter-count { margin: 0; font-size: .84rem; color: var(--ink-60); }
.cmp-filter-reset {
  border: 0; background: none; padding: 4px 0; font: inherit; font-size: .84rem;
  color: var(--accent); text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.cmp-table--full tbody tr[hidden] { display: none; }

/* A small picture beside each robot's name, and the row under the pointer
   lit so the eye keeps its place across ten columns. */
.cmp-row-robot { display: inline-flex; align-items: center; gap: 12px; }
.cmp-row-robot img {
  width: 36px; height: 45px; flex: 0 0 auto; object-fit: cover;
  border-radius: calc(var(--radius) - 2px);
}
.cmp-table--full tbody tr { transition: background .2s var(--ease), box-shadow .2s var(--ease); }
.cmp-table--full tbody tr:hover {
  background: rgba(61,155,255,.07);
  box-shadow: inset 3px 0 0 var(--accent);
}
.cmp-table--full tbody tr:hover th a { color: var(--accent-soft); }

.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);
}