@import url("https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,500..800&family=Instrument+Sans:ital,wght@0,400..700;1,400..700&display=swap");
/* ---------- Tokens ---------- */
:root {
  --ink: #161616;
  --ink-soft: #4a4a48;
  --ink-faint: #7a7a76;
  --paper: #fbfaf6;
  --rule: #e4e1d8;

  /* Project spine colours (muted, after the "tenets" reference) */
  --c-intro: #fbfaf6;
  --c-voyager: #bcd6e6;
  --c-agentic: #7a9a88;
  --c-homebot: #f3d6cd;
  --c-archive: #a99a42;
  --c-about: #cdc3b0;

  --font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --measure: 38rem;
  --gutter: clamp(1rem, 4vw, 3rem);
  --ease: cubic-bezier(.65, 0, .35, 1);
  --header-h: 3.75rem;
  --spine: clamp(3.25rem, 4.5vw, 5rem);
  --panel-inset: clamp(.25rem, 1vw, 1rem);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--ink);
  background: var(--paper);
}

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

a { color: inherit; text-underline-offset: .2em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

.skip {
  position: absolute; left: -999px; top: 0;
  background: var(--ink); color: var(--paper); padding: .5rem 1rem; z-index: 10;
}
.skip:focus { left: 1rem; top: 1rem; }

/* Draft marker for facts Sarah still needs to confirm. Remove before launch. */
.confirm {
  background: none;
  color: inherit;
  border-bottom: 2px dashed #d0623f;
}
.confirm::after {
  content: " [confirm]";
  font-size: .7em;
  font-weight: 600;
  color: #d0623f;
  letter-spacing: .04em;
}

/* ---------- Site header ---------- */
.site-header {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .5rem 1.5rem;
  min-height: var(--header-h);
  padding: .5rem var(--gutter);
  font-size: .9rem;
}
.site-header .name { font-weight: 600; text-decoration: none; letter-spacing: -.01em; }
.site-header nav { display: flex; gap: 1.25rem; flex-wrap: wrap; }
.site-header nav a { text-decoration: none; color: var(--ink-soft); }
.site-header nav a:hover { color: var(--ink); text-decoration: underline; }

/* ---------- Tenets accordion (homepage) ---------- */
/* Full-bleed: fills the viewport below the header, edge to edge. */
.tenets {
  display: flex;
  margin: 0;
  height: calc(100vh - var(--header-h));
  height: calc(100svh - var(--header-h));
  min-height: 32rem;
  border-top: 1px solid rgba(0,0,0,.18);
}

.tenet {
  display: flex;
  flex: 0 0 var(--spine);
  min-width: 0;
  background: var(--tone);
  border-left: 1px solid rgba(0,0,0,.18);
  transition: flex-grow .7s var(--ease), flex-basis .7s var(--ease);
  overflow: hidden;
}
.tenet:first-child { border-left: 0; }
.tenet.is-open { flex: 1 1 auto; }

.tenet-tab {
  all: unset;
  box-sizing: border-box;
  flex: 0 0 var(--spine);
  display: flex; align-items: flex-end; justify-content: center;
  padding: 1.5rem 0;
  cursor: pointer;
}
.tenet-tab:focus-visible { outline: 2px solid var(--ink); outline-offset: -4px; }
.tenet-tab span {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
}
.tenet.is-open .tenet-tab { cursor: default; }

.tenet-panel {
  flex: 1 1 auto;
  min-width: 0;
  padding: clamp(1.5rem, 5vh, 4rem) clamp(1.5rem, 5vw, 6rem) clamp(1.5rem, 5vh, 4rem) var(--panel-inset);
  display: flex; flex-direction: column;
  overflow-y: auto;
  opacity: 0;
  transition: opacity .35s ease;
}
.tenet.is-open .tenet-panel { opacity: 1; transition-delay: .3s; }
.tenet-panel[hidden] { display: none; }

.tenet-panel .eyebrow {
  font-size: .78rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  margin: 0 0 1rem;
}
.tenet-panel h2 {
  font-size: clamp(1.6rem, 3.4vw, 3.4rem);
  line-height: 1.12;
  letter-spacing: -.025em;
  font-weight: 500;
  margin: 0 0 1.25rem;
  max-width: 22ch;
}
.tenet-panel .lede { font-size: clamp(1.05rem, 1.6vw, 1.3rem); line-height: 1.45; max-width: 34ch; margin: 0 0 1.5rem; }
.tenet-panel dl { display: grid; grid-template-columns: max-content 1fr; gap: .35rem 1.25rem; margin: 0 0 1.75rem; font-size: .95rem; max-width: 36rem; }
.tenet-panel dt { font-weight: 600; }
.tenet-panel dd { margin: 0; }
.tenet-panel .read {
  margin-top: auto;
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .7rem 1.1rem;
  border: 1px solid var(--ink);
  border-radius: 999px;
  text-decoration: none;
  font-weight: 600; font-size: .95rem;
}
.tenet-panel .read:hover { background: var(--ink); color: var(--paper); }

.tenet-panel .mark { width: min(16rem, 60%); margin: 0 0 1.5rem auto; opacity: .9; }
.tenet--intro .tenet-panel h1 {
  font-size: clamp(2rem, 4.6vw, 4.75rem);
  line-height: 1.05;
  letter-spacing: -.035em;
  font-weight: 500;
  margin: 0 0 1.5rem;
  max-width: 18ch;
}

/* Phone / narrow: stack vertically */
@media (max-width: 760px) {
  .tenets { flex-direction: column; height: auto; min-height: 0; }
  .site-header { min-height: 0; padding-block: 1rem; }
  .tenet { flex: 0 0 auto; flex-direction: column; border-left: 0; border-top: 1px solid rgba(0,0,0,.18); }
  .tenet:first-child { border-top: 0; }
  .tenet.is-open { flex: 0 0 auto; }
  .tenet-tab { flex: 0 0 auto; justify-content: flex-start; padding: 1rem 1.25rem; }
  .tenet-tab span { writing-mode: horizontal-tb; transform: none; }
  .tenet-panel { padding: 0 1.25rem 1.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .tenet, .tenet-panel { transition: none !important; }
}

/* ---------- Footer ---------- */
.site-footer {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem;
  padding: 2rem var(--gutter) 3rem;
  border-top: 1px solid var(--rule);
  font-size: .9rem; color: var(--ink-soft);
}
.site-footer ul { list-style: none; padding: 0; margin: 0; display: flex; gap: 1.25rem; flex-wrap: wrap; }

/* ---------- Case study ---------- */
.cs-hero {
  background: var(--tone, var(--c-voyager));
  padding: clamp(2.5rem, 7vw, 6rem) var(--gutter) clamp(2rem, 5vw, 4rem);
  border-block: 1px solid var(--ink);
}
.cs-hero .eyebrow { font-size: .8rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; margin: 0 0 1.25rem; }
.cs-hero h1 {
  font-size: clamp(2rem, 5vw, 4rem); line-height: 1.04; letter-spacing: -.035em; font-weight: 500;
  margin: 0 0 1.5rem; max-width: 20ch;
}
.cs-hero .lede { font-size: clamp(1.1rem, 1.8vw, 1.4rem); line-height: 1.45; max-width: 42ch; margin: 0; }

.facts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 1.5rem 2rem;
  margin: clamp(2rem, 4vw, 3rem) 0 0; padding: 1.5rem 0 0; border-top: 1px solid rgba(0,0,0,.25);
  max-width: 64rem;
}
.facts div { min-width: 0; }
.facts dt { font-size: .78rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; margin-bottom: .35rem; }
.facts dd { margin: 0; font-size: .98rem; }

.cs-body { padding: 0 var(--gutter); }

.cs-section {
  display: grid;
  grid-template-columns: minmax(10rem, 16rem) minmax(0, var(--measure));
  gap: 1rem clamp(2rem, 5vw, 5rem);
  padding: clamp(2.5rem, 6vw, 5rem) 0;
  border-bottom: 1px solid var(--rule);
}
.cs-section > h2 {
  font-size: .82rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  margin: .35rem 0 0; color: var(--ink-soft);
}
.cs-section > .content > :first-child { margin-top: 0; }
.cs-section h3 { font-size: 1.35rem; line-height: 1.25; letter-spacing: -.015em; font-weight: 600; margin: 2.25rem 0 .75rem; }
.cs-section p { margin: 0 0 1rem; }
.cs-section .big { font-size: clamp(1.25rem, 2.2vw, 1.6rem); line-height: 1.35; letter-spacing: -.015em; }
.cs-section ul { padding-left: 1.2rem; margin: 0 0 1rem; }
.cs-section li { margin-bottom: .35rem; }

@media (max-width: 760px) {
  .cs-section { grid-template-columns: 1fr; }
}

.wide { grid-column: 1 / -1; }

.decision {
  border-top: 1px solid var(--ink);
  padding-top: 1.25rem;
  margin-top: 2.5rem;
}
.decision .options { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1rem; margin: 1rem 0; }
.decision .options div { border: 1px solid var(--rule); padding: 1rem; background: #fff; }
.decision .options .chosen { border-color: var(--ink); }
.decision .options strong { display: block; margin-bottom: .25rem; }

/* Image placeholder: says what goes here and what it proves */
.shot {
  margin: 2rem 0;
  border: 1px dashed var(--ink-faint);
  background: repeating-linear-gradient(-45deg, transparent 0 12px, rgba(0,0,0,.025) 12px 24px);
  aspect-ratio: 16 / 10;
  max-width: 100%;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 1rem;
  font-size: .88rem; color: var(--ink-soft);
}
.shot strong { color: var(--ink); }
figure { margin: 2rem 0; }
figcaption { font-size: .88rem; color: var(--ink-soft); margin-top: .6rem; }

.diagram { overflow-x: auto; }
.diagram svg { min-width: 30rem; width: 100%; height: auto; }

.callout {
  border-left: 3px solid var(--ink);
  padding: .25rem 0 .25rem 1.25rem;
  margin: 1.5rem 0;
}

.next {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem;
  padding: 3rem var(--gutter);
  font-size: 1.1rem;
}

/* Locked / on-request page */
.locked {
  min-height: 60vh;
  display: grid; place-content: center;
  padding: 3rem var(--gutter);
  text-align: left;
}
.locked > * { max-width: 36rem; }

/* Archive tiles */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1.5rem; padding: 2rem var(--gutter) 4rem; }
.tile { border: 1px solid var(--ink); background: #fff; display: flex; flex-direction: column; }
.tile .shot { margin: 0; border: 0; border-bottom: 1px dashed var(--ink-faint); aspect-ratio: 4 / 3; }
.tile .body { padding: 1.25rem; }
.tile h2 { font-size: 1.2rem; margin: 0 0 .25rem; letter-spacing: -.01em; }
.tile .meta { font-size: .85rem; color: var(--ink-soft); margin: 0 0 .75rem; }
.tile p { margin: 0 0 .75rem; font-size: .97rem; }

/* Case-study screenshots */
.cs-body figure img { border: 1px solid var(--ink); background: #000; }
.cs-body figure.wide img { max-width: 56rem; margin-inline: auto; }
.cs-body figure.wide figcaption { max-width: 56rem; margin-inline: auto; }
.cs-section figure img { max-height: 90vh; width: auto; }

/* ---------- Inline case study (homepage) ---------- */
.detail { border-top: 1px solid var(--ink); background: var(--paper); }
.detail-bar {
  position: sticky; top: 0; z-index: 5;
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: .75rem var(--gutter);
  background: var(--tone, var(--paper));
  border-bottom: 1px solid rgba(0,0,0,.18);
  font-size: .9rem; font-weight: 600; letter-spacing: .02em;
}
.detail-close {
  all: unset; cursor: pointer;
  padding: .35rem .8rem; border: 1px solid var(--ink); border-radius: 999px;
  font-weight: 600;
}
.detail-close:hover { background: var(--ink); color: var(--paper); }
.detail-close:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.detail-body:focus { outline: none; }
.detail-body > .cs-hero { border-top: 0; }
.detail.is-loading .detail-body { min-height: 50vh; opacity: .4; }

/* ---------- Compact accordion while a case study is open ---------- */
:root { --compact-h: 3.25rem; }
.tenets { transition: height .55s var(--ease); }
.tenets.is-compact {
  position: sticky; top: 0; z-index: 6;
  height: var(--compact-h);
  min-height: 0;
  border-bottom: 1px solid var(--ink);
}
.tenets.is-compact .tenet { flex: 1 1 0; }
.tenets.is-compact .tenet.is-open { flex: 1.6 1 0; }
.tenets.is-compact .tenet-panel { display: none !important; }
.tenets.is-compact .tenet-tab {
  flex: 1 1 auto;
  align-items: center; justify-content: flex-start;
  padding: 0 1rem;
  cursor: pointer;
}
.tenets.is-compact .tenet-tab span { writing-mode: horizontal-tb; transform: none; }
.tenets.is-compact .tenet.is-open .tenet-tab span { text-decoration: underline; text-underline-offset: .35em; text-decoration-thickness: 2px; }

.detail { scroll-margin-top: var(--compact-h); }
.detail-bar { top: var(--compact-h); padding-block: .5rem; }

@media (max-width: 760px) {
  .tenets.is-compact { flex-direction: row; overflow-x: auto; scrollbar-width: none; }
  .tenets.is-compact::-webkit-scrollbar { display: none; }
  .tenets.is-compact .tenet,
  .tenets.is-compact .tenet.is-open { flex: 0 0 auto; border-top: 0; border-left: 1px solid rgba(0,0,0,.18); }
  .tenets.is-compact .tenet:first-child { border-left: 0; }
}
@media (prefers-reduced-motion: reduce) { .tenets { transition: none; } }

/* =====================================================================
   Editorial restyle: light serif display type, boxed nav, lime pills,
   pastel tags, rounded media, and a big type band.
   ===================================================================== */
:root {
  --ink: #2b1d16;
  --ink-soft: #5b4a40;
  --ink-faint: #8c7c70;
  --paper: #f4f1ec;
  --rule: rgba(43, 29, 22, .18);
  --lime: #e6f26a;
  --serif: "Newsreader", "Iowan Old Style", "Times New Roman", Georgia, serif;

  --c-intro: #f4f1ec;
  --c-voyager: #dcc3ea;
  --c-agentic: #e6f26a;
  --c-homebot: #f6b7a1;
  --c-archive: #a9d79b;
  --c-about: #ebe3d5;
}

/* Display type */
.tenet--intro .tenet-panel h1,
.tenet-panel h2,
.cs-hero h1,
.cs-section h3,
.cs-section .big,
.tile h2,
.locked h2 {
  font-family: var(--serif);
  font-weight: 300;
  letter-spacing: -.015em;
  font-variation-settings: "opsz" 72;
}
.tenet--intro .tenet-panel h1 { font-size: clamp(2.6rem, 6vw, 6rem); line-height: 1; max-width: 16ch; }
.tenet-panel h2 { font-size: clamp(2rem, 4.2vw, 4.25rem); line-height: 1.02; }
.cs-hero h1 { font-size: clamp(2.5rem, 6vw, 5.5rem); line-height: 1; }
.cs-section h3 { font-size: 1.9rem; line-height: 1.1; }
.cs-section .big { font-size: clamp(1.5rem, 2.6vw, 2.1rem); line-height: 1.2; }
.tile h2 { font-size: 1.8rem; }
.callout { font-family: var(--serif); font-weight: 300; border-left-color: var(--ink); }

/* Boxed header: cells split by rules, lime CTA at the end */
.site-header {
  padding: 0;
  gap: 0;
  align-items: stretch;
  border-bottom: 1px solid var(--ink);
  background: var(--paper);
}
.site-header .name {
  display: flex; align-items: center;
  padding: 0 var(--gutter);
  font-family: var(--serif); font-weight: 400; font-size: 1.35rem; letter-spacing: -.01em;
}
.site-header nav { gap: 0; align-items: stretch; }
/* On the homepage the name sits on the same left edge as the panel copy */
body:has(.tenets) .site-header .name { padding-left: calc(var(--spine) + var(--panel-inset)); }
.site-header nav a {
  display: flex; align-items: center;
  padding: 0 1.4rem;
  font-size: .75rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink);
}
.site-header nav a:hover { background: rgba(0,0,0,.04); text-decoration: none; }
.site-header nav a.cta {
  margin: .55rem .75rem;
  padding: 0 1rem;
  border: 1px solid var(--ink);
  border-radius: 999px;
  background: var(--lime);
}
.site-header nav a.cta:hover { background: var(--ink); color: var(--lime); }
/* Tab dividers use the same ink rule as the header, so it reads as one grid */
.tenets { border-top: 0; }
.tenet { border-left-color: var(--ink); }
.tenets.is-compact .tenet { border-left-color: var(--ink); }
@media (max-width: 760px) {
  .tenet { border-top-color: var(--ink); }
  body:has(.tenets) .site-header .name { padding-left: 1.25rem; }
  .site-header { flex-direction: column; }
  .site-header .name { padding: .9rem var(--gutter); border-bottom: 1px solid var(--ink); }
  .site-header nav { flex-wrap: wrap; }
  .site-header nav a { padding: .8rem 1rem; }
}

/* Lime pill buttons */
.tenet-panel .read,
.detail-close {
  background: var(--lime);
  border: 1px solid var(--ink);
  color: var(--ink);
  border-radius: 999px;
  font-size: .78rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  padding: .75rem 1.3rem;
}
.detail-close { padding: .45rem .9rem; font-size: .72rem; }
.tenet-panel .read:hover, .detail-close:hover { background: var(--ink); color: var(--lime); }

/* Section labels become pastel tags */
.cs-section > h2 {
  align-self: start; justify-self: start;
  display: inline-block;
  margin-top: .5rem;
  padding: .3rem .8rem;
  border: 1px solid var(--ink);
  border-radius: 999px;
  background: var(--tag, var(--lime));
  color: var(--ink);
  font-size: .7rem; letter-spacing: .08em;
}
.cs-section:nth-of-type(4n+2) > h2 { --tag: #dcc3ea; }
.cs-section:nth-of-type(4n+3) > h2 { --tag: #f6b7a1; }
.cs-section:nth-of-type(4n+4) > h2 { --tag: #a9d79b; }

/* Rounded media and cards */
.cs-body figure img,
.shot,
.decision .options div,
.tile { border-radius: 14px; }
.cs-body figure img { overflow: hidden; }
.tile { overflow: hidden; }
.decision { border-top-color: var(--rule); }
.decision .options div { background: rgba(255,255,255,.55); }
.decision .options .chosen { background: var(--lime); }

/* Line marks in panels take the ink colour */
.tenet-panel .mark { color: var(--ink); opacity: .85; }

/* Big type band */
.band {
  overflow: hidden;
  padding: clamp(1.5rem, 4vw, 3.5rem) 0;
  border-top: 1px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(3rem, 10vw, 9rem);
  line-height: .92;
  letter-spacing: -.03em;
  user-select: none;
}
.band-row { display: flex; width: max-content; animation: band 38s linear infinite; }
.band-row--rev { animation-direction: reverse; animation-duration: 46s; color: transparent; -webkit-text-stroke: 1.5px var(--ink); }
.band-row span { padding-right: .3em; white-space: nowrap; }
@keyframes band { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .band-row { animation: none; } }

/* Footer echoes the header rules */
.site-footer { border-top: 1px solid var(--ink); color: var(--ink-soft); }
.site-footer > span { font-family: var(--serif); font-size: 1.5rem; color: var(--ink); }

/* ---------- More imagery ---------- */
figure.pair {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; align-items: start;
}
figure.pair figcaption { grid-column: 1 / -1; }
figure.pair.phones { grid-template-columns: repeat(2, minmax(0, 14rem)); justify-content: center; }
@media (max-width: 760px) { figure.pair { grid-template-columns: 1fr; } }

.tile .tile-img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: top;
  border-bottom: 1px solid var(--ink);
  background: #fff;
}

/* Project image inside each homepage panel (decorative; the panel text says what it is) */
.tenet-panel { position: relative; }
.tenet-panel .panel-media {
  position: absolute; right: clamp(1.5rem, 4vw, 4rem); top: clamp(1.5rem, 6vh, 4rem);
  width: min(34%, 28rem); max-height: 62%;
  object-fit: cover; object-position: top;
  border: 1px solid var(--ink); border-radius: 14px;
  box-shadow: 0 18px 40px rgba(43, 29, 22, .18);
  transform: rotate(2deg);
}
.tenet.is-open .panel-media { animation: lift .6s var(--ease) .25s both; }
@keyframes lift { from { opacity: 0; transform: translateY(16px) rotate(4deg); } to { opacity: 1; transform: rotate(2deg); } }
.tenet-panel h2 { max-width: 15ch; }
.tenet-panel .lede, .tenet-panel dl { max-width: min(34ch, 52%); }
@media (max-width: 1000px) { .tenet-panel .panel-media { display: none; } .tenet-panel .lede, .tenet-panel dl { max-width: 34ch; } }
@media (prefers-reduced-motion: reduce) { .tenet.is-open .panel-media { animation: none; } }

/* Outside work: lighter-weight link tiles under the earlier work */
.side { padding: 0 var(--gutter); border-top: 1px solid var(--ink); }
.side-h {
  display: inline-block; margin: 2.5rem 0 .75rem;
  padding: .3rem .8rem; border: 1px solid var(--ink); border-radius: 999px;
  background: var(--lime);
  font-size: .7rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
}
.side-lede { margin: 0; color: var(--ink-soft); }
.side .tiles { padding-inline: 0; }
.tile--link { color: inherit; text-decoration: none; transition: transform .2s ease; }
.tile--link:hover { transform: translateY(-3px); }
.tile--link:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.tile .out { font-size: .75rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
@media (prefers-reduced-motion: reduce) { .tile--link { transition: none; } }

/* About timeline: stacked colour bands (after the "services" reference),
   palette from "A Year of Conscious Practice". */
:root {
  --tl-lime: #dcfa8c;
  --tl-orange: #e9583a;
  --tl-blue: #5aa7f0;
  --tl-green: #5a9179;
  --tl-slate: #85808f;
  --tl-maroon: #8e3b3c;
  --tl-lilac: #dccbe5;
  --tl-sage: #bdb9a3;
}
.timeline {
  list-style: none; margin: 0 0 2rem; padding: 0;
  border: 1px solid var(--ink);
  container-type: inline-size;
}
.tl-band {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.1fr);
  grid-template-areas:
    "when when img"
    "name name img"
    "desc list img";
  column-gap: 1.5rem;
  padding: 1.25rem 1.5rem 1.5rem;
  background: var(--band);
  color: var(--ink);
}
.tl-band + .tl-band { border-top: 1px solid var(--ink); }
.tl-band--dark { color: #fbf3ea; }
.tl-band--dark a { color: inherit; }
.tl-when { grid-area: when; margin: 0; font-size: .75rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.tl-name {
  grid-area: name; margin: .1rem 0 1.25rem;
  font-family: var(--font); font-weight: 500;
  font-size: clamp(2.2rem, 5cqi, 3.75rem); line-height: 1; letter-spacing: -.035em;
}
.tl-desc { grid-area: desc; margin: 0; font-size: .95rem; line-height: 1.4; max-width: 30ch; align-self: end; }
.tl-desc strong { font-weight: 600; }
.tl-list { grid-area: list; margin: 0; padding: 0; list-style: none; font-size: .8rem; line-height: 1.5; align-self: end; }
.tl-img {
  grid-area: img; align-self: center;
  width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top;
  border: 1px solid var(--ink); border-radius: 10px;
}
.tl-band:not(:has(.tl-img)) { grid-template-areas: "when when when" "name name name" "desc list list"; }
@container (max-width: 40rem) {
  .tl-band, .tl-band:not(:has(.tl-img)) {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "when" "name" "desc" "list" "img";
  }
  .tl-name { margin-bottom: .75rem; }
  .tl-list { margin-top: .75rem; }
  .tl-img { margin-top: 1rem; }
}

/* ---------- Illustrations ---------- */
:root { --c-illus: #a9cbe8; }

/* Art in panels: no frame, just the drawing */
.tenet-panel .panel-media.art {
  border: 0; border-radius: 0; box-shadow: none; transform: none;
  object-fit: contain; object-position: top right;
  width: min(30%, 24rem); max-height: 58%;
  background: transparent;
}
.tenet.is-open .panel-media.art { animation: rise .6s var(--ease) .25s both; }
@keyframes rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.tenet-panel .panel-media.portrait { width: min(22%, 16rem); }

/* Illustrated circles floating over the type band, after the reference */
.band { position: relative; }
.band-dot {
  position: absolute; z-index: 2;
  width: clamp(5rem, 12vw, 10rem); aspect-ratio: 1;
  object-fit: contain; padding: .6rem;
  background: var(--paper); border: 1px solid var(--ink); border-radius: 50%;
  box-shadow: 0 12px 30px rgba(43, 29, 22, .15);
}
.band-dot--1 { left: 12%; top: 8%; background: var(--lime); }
.band-dot--2 { left: 52%; top: 42%; background: #f6b7a1; }
.band-dot--3 { right: 8%; top: 4%; background: #dcc3ea; }

/* Illustration gallery */
.art-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 1.25rem; padding: 2rem var(--gutter) 4rem;
}
.art-card {
  margin: 0; display: flex; flex-direction: column;
  border: 1px solid var(--ink); border-radius: 14px; overflow: hidden; background: #fff;
}
.art-card img { width: 100%; aspect-ratio: 1; object-fit: contain; padding: 1rem; border-bottom: 1px solid var(--ink); }
.art-card figcaption { margin: 0; padding: .75rem 1rem; font-size: .9rem; color: var(--ink); }

/* Deck vibe: full-bleed statement slides and colour-block menu */
:root {
  --deck-blue: #b3c6d4;
  --deck-rust: #a8452b;
  --deck-blush: #ebcac6;
  --deck-green: #234733;
  --deck-mustard: #ecc76a;
  --deck-cream: #f6f1e8;
  --caps: "League Spartan", "Futura", "Avenir Next", var(--font);
}
.slide {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.25rem;
  min-height: min(80vh, 46rem);
  padding: clamp(3rem, 8vw, 7rem) var(--gutter);
  border-top: 1px solid var(--ink);
  text-align: center;
}
.slide--green { background: var(--deck-green); color: var(--deck-cream); }
.slide-serif {
  margin: 0; font-family: var(--serif); font-weight: 300;
  font-size: clamp(1.4rem, 2.6vw, 2.2rem); line-height: 1.2;
}
.slide-caps {
  margin: 0; max-width: 20ch;
  font-family: var(--caps); font-weight: 700; text-transform: uppercase;
  font-size: clamp(2rem, 5.2vw, 4.75rem); line-height: .98; letter-spacing: -.005em;
  color: var(--deck-mustard);
}
.slide-caps em { font-style: normal; color: var(--deck-cream); }

.blocks { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--ink); }
.block {
  display: flex; align-items: center; justify-content: center;
  min-height: clamp(12rem, 30vh, 20rem); padding: 2rem;
  font-family: var(--caps); font-weight: 700; text-transform: uppercase;
  font-size: clamp(1.4rem, 2.6vw, 2.4rem); line-height: 1; text-align: center;
  text-decoration: none;
  transition: filter .2s ease;
}
.block + .block { border-left: 1px solid var(--ink); }
.block:hover { filter: saturate(1.3) brightness(.95); }
.block:focus-visible { outline: 3px solid var(--ink); outline-offset: -6px; }
.block--blue { background: var(--deck-blue); color: var(--deck-rust); }
.block--rust { background: var(--deck-rust); color: var(--deck-mustard); }
.block--blush { background: var(--deck-blush); color: var(--deck-rust); }
@media (max-width: 760px) {
  .blocks { grid-template-columns: 1fr; }
  .block + .block { border-left: 0; border-top: 1px solid var(--ink); }
  .block { min-height: 8rem; }
}

/* Drop the white backgrounds baked into the illustration renders */
.tenet-panel .panel-media.art { mix-blend-mode: multiply; }
.tenet--intro .tenet-panel .panel-media.art {
  top: auto; bottom: clamp(1.5rem, 6vh, 4rem);
  width: min(30%, 20rem); max-height: 45%;
  object-position: bottom right;
}
.tenet-panel .panel-media.portrait { width: auto; height: min(13rem, 28%); max-height: none; }
.band-dot { display: grid; place-items: center; overflow: hidden; }
.band-dot img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }

/* =====================================================================
   Case studies, presentation style: full-height title slides,
   statement slides, stat tiles, and small data charts.
   Charts are plain HTML/CSS so they work when a case study loads
   inside the homepage. Only real numbers go in here.
   ===================================================================== */
.cs-hero {
  min-height: min(88vh, 56rem);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding-block: clamp(3rem, 10vh, 7rem) clamp(2rem, 6vh, 4rem);
}
.cs-hero h1 { font-size: clamp(2.75rem, 7vw, 7rem); max-width: 18ch; }

/* Full-bleed statement slide inside .cs-body */
.cs-slide {
  margin: clamp(3rem, 8vw, 6rem) calc(-1 * var(--gutter));
  padding: clamp(4rem, 12vw, 9rem) var(--gutter);
  border-block: 1px solid var(--ink);
  background: var(--slide-bg, var(--deck-green));
  color: var(--slide-fg, var(--deck-cream));
  text-align: center;
}
.cs-slide p { margin: 0 auto; }
.cs-slide .slide-caps { max-width: 22ch; color: var(--slide-accent, var(--deck-mustard)); }
.cs-slide .slide-caps em { color: var(--slide-fg, var(--deck-cream)); }
.cs-slide .slide-serif { margin-bottom: 1.25rem; }
.cs-slide--rust { --slide-bg: var(--deck-rust); --slide-fg: var(--deck-cream); --slide-accent: var(--deck-mustard); }
.cs-slide--blue { --slide-bg: var(--deck-blue); --slide-fg: var(--ink); --slide-accent: var(--deck-rust); }

/* Section label for a chart block */
.viz-h {
  margin: 0 0 1.25rem;
  font-family: var(--caps); font-weight: 700; text-transform: uppercase;
  font-size: clamp(1.6rem, 3.4vw, 2.75rem); line-height: 1; letter-spacing: -.005em;
}
.viz-note { font-size: .85rem; color: var(--ink-soft); margin: .75rem 0 0; }

/* Stat tiles (big number, short label) */
.stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: .75rem;
  margin: clamp(2.5rem, 6vw, 4.5rem) 0; padding: 0; list-style: none;
}
.stat {
  display: flex; flex-direction: column; justify-content: space-between; gap: 1.5rem;
  min-height: 13rem; padding: 1.25rem 1.35rem 1.4rem;
  border-radius: 22px;
  background: var(--bg, var(--deck-cream)); color: var(--fg, var(--ink));
}
.stat-k { margin: 0; font-family: var(--serif); font-style: italic; font-size: 1.1rem; }
.stat-n {
  margin: 0; font-family: var(--caps); font-weight: 700;
  font-size: clamp(3.25rem, 6vw, 5rem); line-height: .85; letter-spacing: -.02em;
  color: var(--num, currentColor);
}
.stat-n small { font-size: .38em; margin-left: .08em; letter-spacing: 0; }
.stat-l { margin: 0; font-size: .92rem; line-height: 1.35; max-width: 24ch; }
.stat--wide { grid-column: span 2; }
@media (max-width: 760px) { .stat--wide { grid-column: auto; } }
.s-lime  { --bg: var(--tl-lime); }
.s-blush { --bg: var(--deck-blush); --num: var(--deck-rust); }
.s-blue  { --bg: var(--deck-blue); }
.s-green { --bg: var(--deck-green); --fg: var(--deck-cream); --num: var(--deck-mustard); }
.s-rust  { --bg: var(--deck-rust); --fg: var(--deck-cream); --num: var(--deck-mustard); }
.s-ink   { --bg: #2b1d16; --fg: #fbf3ea; --num: var(--tl-lime); }
.s-lilac { --bg: var(--tl-lilac); }
.s-mustard { --bg: var(--deck-mustard); }

/* Hover / focus tooltip for chart marks */
[data-tip] { position: relative; }
[data-tip]:hover::after, [data-tip]:focus-visible::after {
  content: attr(data-tip);
  position: absolute; left: 50%; bottom: calc(100% + .5rem); transform: translateX(-50%);
  z-index: 3; width: max-content; max-width: 16rem;
  padding: .45rem .65rem; border-radius: 8px;
  background: #2b1d16; color: #fbf3ea;
  font: 500 .8rem/1.3 var(--font); text-transform: none; letter-spacing: 0; text-align: left;
  pointer-events: none;
}
[data-tip]:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

/* Hanging bars: values drop from a shared baseline */
.hang {
  margin: 2rem 0; padding: 1.5rem 1.5rem 2rem; border-radius: 22px;
  background: var(--hang-bg, var(--deck-blush));
}
.hang-cols { display: grid; grid-template-columns: repeat(var(--n, 2), minmax(0, 1fr)); gap: .5rem; border-top: 2px solid var(--ink); }
.hang-col { display: flex; flex-direction: column; }
.hang-label { order: -1; margin: 0 0 .6rem; font-weight: 600; font-size: .95rem; transform: translateY(-100%); height: 0; overflow: visible; }
.hang-bar {
  display: flex; flex-direction: column; justify-content: flex-end;
  height: calc(var(--v) / 100 * var(--hang-max, 16rem));
  min-height: 6rem;
  padding: .9rem 1rem;
  margin-top: 2px;
  border-radius: 0 0 16px 16px;
  background: var(--hang-fill, var(--tl-lime));
}
.hang-bar .stat-n { font-size: clamp(2.75rem, 6vw, 4.5rem); }
.hang-bar p { margin: .35rem 0 0; font-size: .85rem; line-height: 1.3; }
.hang-head { display: grid; grid-template-columns: repeat(var(--n, 2), minmax(0, 1fr)); gap: .5rem; margin: 0 0 .5rem; }
.hang-head span { font-weight: 600; font-size: .95rem; }

/* Range strip: N cells, a highlighted span */
.range { margin: 2rem 0; }
.range-cells { display: grid; grid-template-columns: repeat(20, 1fr); gap: 3px; }
.range-cells span { aspect-ratio: 1 / 1.6; border-radius: 4px; border: 1px solid var(--ink); background: transparent; }
.range-cells span.on { background: var(--deck-rust); border-color: var(--deck-rust); }
.range-axis { display: grid; grid-template-columns: repeat(20, 1fr); gap: 3px; margin-top: .35rem; font-size: .75rem; color: var(--ink-soft); }
.range-axis span { text-align: center; }

/* Step chart (log scale) for tier thresholds */
.steps { margin: 2rem 0; padding: 1.5rem 1.5rem 1.25rem; border-radius: 22px; background: #14121a; color: #f3efe9; }
.steps .viz-h { color: #f3efe9; }
.steps-plot { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px; align-items: end; height: 15rem; border-bottom: 1px solid rgba(243,239,233,.5); }
.step {
  height: calc((var(--log) - 2) / 3 * 100%);
  border-radius: 4px 4px 0 0;
  background: var(--tier);
  display: flex; align-items: flex-start; justify-content: center; padding-top: .6rem;
  font-family: var(--caps); font-weight: 700; font-size: clamp(1rem, 2vw, 1.5rem); color: #fff;
}
.steps-x { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px; margin-top: .6rem; }
.steps-x span { text-align: center; font-size: .85rem; font-weight: 600; }
.steps .viz-note { color: rgba(243,239,233,.75); }

/* Targets (not results): dashed rings */
.targets { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: .75rem; margin: 2rem 0; }
.target {
  display: grid; grid-template-columns: auto 1fr; gap: 1.25rem; align-items: center;
  padding: 1.25rem; border-radius: 22px; border: 2px dashed var(--ink);
}
.target svg { width: 6.5rem; height: 6.5rem; transform: rotate(-90deg); }
.target .track { fill: none; stroke: rgba(43,29,22,.12); stroke-width: 10; }
.target .goal { fill: none; stroke: var(--deck-rust); stroke-width: 10; stroke-dasharray: var(--v) 100; stroke-linecap: round; }
.target .stat-n { font-size: 3rem; }
.target p { margin: .25rem 0 0; font-size: .9rem; }
.target .tag { display: inline-block; margin: 0 0 .4rem; padding: .15rem .55rem; border: 1px solid var(--ink); border-radius: 999px; font-size: .68rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }

/* Big-number chip on archive tiles */
.tile-stat { display: flex; align-items: baseline; gap: .5rem; margin: 0 0 .75rem; }
.tile-stat b { font-family: var(--caps); font-weight: 700; font-size: 2.6rem; line-height: .9; color: var(--deck-rust); }
.tile-stat span { font-size: .85rem; line-height: 1.25; color: var(--ink-soft); }

@media (max-width: 760px) {
  .hang-cols, .hang-head { --n: 1; }
  .steps-plot { height: 11rem; }
}
.target--hit { border-style: solid; background: var(--tl-lime); }
.target--hit .goal { stroke: var(--deck-green); }
.target--miss .goal { stroke: var(--deck-rust); }

/* =====================================================================
   DESIGN SYSTEM: one palette, three typefaces, one card style.
   This layer wins over everything above. Older token names (--tl-*,
   --deck-*, --c-*) are remapped here so every component draws from
   the same set.

   Palette
     paper / ink ............ page and text
     lime ................... the one accent: CTAs, highlights, tags
     lilac, sky, blush,
     sage, sand ............. light project tints (surfaces)
     forest, rust ........... deep tints (statement slides, dark tiles)
     mustard ................ accent on deep tints only

   Each project keeps one tint everywhere it appears:
     Voyager = lilac · Designing in code = lime · Homebot = blush
     Earlier work = sage · Illustration = sky · About = sand

   Type
     Newsreader 300 ......... titles and headlines
     League Spartan 700 ..... big caps moments and big numbers
     Inter .................. body copy and small uppercase labels
   ===================================================================== */
:root {
  --paper: #f4f1ec;
  --ink: #2b1d16;
  --ink-soft: #5b4a40;
  --ink-faint: #8c7c70;
  --rule: rgba(43, 29, 22, .18);

  --lime: #e6f26a;
  --lilac: #dcc3ea;
  --sky: #b7d0e3;
  --blush: #f2bfad;
  --sage: #b5d7a3;
  --sand: #ebe3d5;
  --forest: #234733;
  --rust: #a8452b;
  --mustard: #ecc76a;

  /* project tints */
  --c-intro: var(--paper);
  --c-voyager: var(--lilac);
  --c-agentic: var(--lime);
  --c-homebot: var(--blush);
  --c-archive: var(--sage);
  --c-illus: var(--sky);
  --c-about: var(--sand);

  /* older names, remapped */
  --tl-lime: var(--lime);
  --tl-orange: var(--blush);
  --tl-blue: var(--sky);
  --tl-green: var(--sage);
  --tl-slate: var(--sand);
  --tl-maroon: var(--rust);
  --tl-lilac: var(--lilac);
  --tl-sage: var(--sage);
  --deck-blue: var(--sky);
  --deck-blush: var(--blush);
  --deck-green: var(--forest);
  --deck-rust: var(--rust);
  --deck-mustard: var(--mustard);
  --deck-cream: var(--paper);

  --radius: 14px;
  --shadow: 0 14px 34px rgba(43, 29, 22, .16);
  --label: 600 .72rem/1.2 var(--font);
}

body { background: var(--paper); color: var(--ink); }

/* ---- Type roles ---- */
.tl-name,
.tile h2,
.art-card figcaption strong { font-family: var(--serif); font-weight: 300; letter-spacing: -.015em; font-variation-settings: "opsz" 72; }
.tl-name { font-size: clamp(2.2rem, 5cqi, 3.5rem); line-height: 1; }

.band { font-family: var(--caps); font-weight: 700; letter-spacing: -.01em; line-height: .95; }

/* One small-label style everywhere */
.eyebrow, .cs-hero .eyebrow, .tenet-panel .eyebrow, .facts dt, .tl-when,
.site-header nav a, .tenet-tab span, .detail-bar, .tile .out, .tile .meta,
.cs-section > h2, .side-h, .target .tag, .tenet-panel .read, .detail-close {
  font: var(--label);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.tile .meta { color: var(--ink-soft); }

/* ---- One card style: 1px ink border, 14px corners ---- */
.cs-body figure img, .shot, .decision .options div, .tile, .art-card,
.stat, .hang, .steps, .target, .tl-img, .tenet-panel .panel-media:not(.art) {
  border-radius: var(--radius);
}
.stat, .hang, .steps { border: 1px solid var(--ink); }
.target { border: 1px dashed var(--ink); }
.tenet-panel .panel-media:not(.art), .band-dot { box-shadow: var(--shadow); }

/* ---- Section tags: always the lime accent ---- */
.cs-section > h2,
.cs-section:nth-of-type(n) > h2,
.side-h { --tag: var(--lime); background: var(--lime); }

/* ---- Deep surfaces use ink, forest, or rust, nothing else ---- */
.steps { background: var(--ink); color: var(--paper); }
.steps .viz-h, .steps .viz-note { color: var(--paper); }
.s-ink { --bg: var(--ink); --fg: var(--paper); --num: var(--lime); }
[data-tip]:hover::after, [data-tip]:focus-visible::after { background: var(--ink); color: var(--paper); border-radius: 8px; }
.tl-band--dark { color: var(--paper); }

/* Charts pick up the page palette */
.hang { --hang-bg: var(--blush); --hang-fill: var(--lime); }
.range-cells span.on { background: var(--rust); border-color: var(--rust); }
.target .goal { stroke: var(--rust); }
.target--hit { background: var(--lime); }
.target--hit .goal { stroke: var(--forest); }

/* ---- Band circles use project tints ---- */
.band-dot--1 { background: var(--lime); }
.band-dot--2 { background: var(--blush); }
.band-dot--3 { background: var(--lilac); }

/* ---- Footer and header share the same rule weight ---- */
.site-header, .site-footer { border-color: var(--ink); }
.site-footer { background: var(--paper); }

/* ---- Draft markers stay readable on every tint ---- */
.confirm { border-bottom-color: var(--rust); }
.confirm::after { color: var(--rust); }

/* ---- Big numbers: rust on light cards, lime on the ink card ---- */
:root { --card: #fffdf8; }
.stat:not(.s-ink) { --bg: var(--card); --fg: var(--ink); --num: var(--rust); }
.hang { --hang-bg: var(--card); }
.tile, .art-card { background: var(--card); }
.decision .options div { background: var(--card); }

/* ---- Full-height titles only for case studies (pages with a facts row) ---- */
.cs-hero:not(:has(.facts)) {
  min-height: 0;
  padding-block: clamp(4rem, 12vh, 7rem) clamp(2rem, 5vh, 3rem);
}

/* Illustration gallery, presentation style: art straight on colour blocks,
   mixed sizes, caps captions. Overrides the earlier boxed cards. */
:root {
  --art-mustard: var(--deck-mustard);
  --art-blue: var(--deck-blue);
  --art-blush: var(--deck-blush);
  --art-lime: var(--tl-lime);
  --art-rust: #e9b49f;
  --art-cream: var(--deck-cream);
  --art-lilac: var(--tl-lilac);
  --art-green: #c9dccd;
}
.art-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-auto-rows: clamp(14rem, 22vw, 20rem);
  grid-auto-flow: dense;
  gap: .75rem;
}
.art-card {
  grid-column: span 2;
  position: relative;
  border: 0; border-radius: 22px;
  background: var(--art-bg, var(--deck-cream));
}
.art-card--feature { grid-column: span 3; grid-row: span 2; }
.art-card--wide { grid-column: span 4; }
.art-card img {
  flex: 1 1 auto; min-height: 0;
  width: 100%; height: 100%; aspect-ratio: auto;
  object-fit: contain; padding: clamp(1rem, 3vw, 2.5rem) clamp(1rem, 3vw, 2.5rem) 3.25rem;
  border: 0; mix-blend-mode: multiply;
  transition: transform .5s var(--ease);
}
.art-card:hover img { transform: scale(1.04) rotate(-1deg); }
.art-card figcaption {
  position: absolute; left: 1.1rem; bottom: .9rem; right: 1.1rem;
  padding: 0;
  font-family: var(--caps); font-weight: 700; text-transform: uppercase;
  font-size: clamp(1rem, 1.6vw, 1.35rem); line-height: 1;
}
.art-kind {
  display: block; margin-bottom: .3rem;
  font-family: var(--serif); font-style: italic; font-weight: 400; text-transform: none;
  font-size: .9rem; color: var(--ink-soft);
}
@media (max-width: 900px) {
  .art-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 16rem; }
  .art-card, .art-card--wide { grid-column: span 1; }
  .art-card--feature { grid-column: span 2; grid-row: span 2; }
}
@media (max-width: 520px) {
  .art-grid { grid-template-columns: 1fr; }
  .art-card, .art-card--wide, .art-card--feature { grid-column: auto; grid-row: span 1; }
  .art-card--feature { grid-row: span 2; }
}
@media (prefers-reduced-motion: reduce) { .art-card img { transition: none; } }

/* ---- Intro: the "clear enough" statement lives in the hero ---- */
.intro-foot { margin-top: auto; max-width: min(36rem, 58%); }
.intro-quote {
  margin: 0 0 1.25rem;
  font-family: var(--caps); font-weight: 700; text-transform: uppercase;
  font-size: clamp(1.15rem, 1.9vw, 1.7rem); line-height: 1.08; letter-spacing: -.005em;
}
.intro-quote span {
  display: block; margin-bottom: .45rem;
  font-family: var(--serif); font-weight: 300; font-style: italic; text-transform: none;
  font-size: .8em; letter-spacing: 0; color: var(--ink-soft);
}
.intro-quote mark { background: var(--lime); color: inherit; padding: 0 .15em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.intro-hint { margin: 0; font: var(--label); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
@media (max-width: 1000px) { .intro-foot { max-width: 36rem; } }

/* Earlier history: one quiet line under the timeline */
.tl-foot { margin: -1rem 0 2rem; max-width: 60ch; font-size: .9rem; line-height: 1.5; color: var(--ink-soft); }

/* Intro: the computer-desk illustration as a tilted card, bottom right */
.tenet--intro .tenet-panel .panel-media.intro-card {
  top: auto; bottom: clamp(1.5rem, 6vh, 4rem);
  width: auto; height: min(52%, 26rem); max-height: none;
  aspect-ratio: 2 / 3; object-fit: cover;
  transform: rotate(-3deg);
}
.tenet--intro.is-open .panel-media.intro-card { animation: lift-l .6s var(--ease) .25s both; }
@keyframes lift-l { from { opacity: 0; transform: translateY(16px) rotate(-5deg); } to { opacity: 1; transform: rotate(-3deg); } }

/* Designing in code: the workflow diagram as a card */
.tenet-panel .panel-media.diagram-card {
  object-fit: contain; background: var(--card);
  width: min(42%, 34rem); max-height: none; height: auto;
}
@media (prefers-reduced-motion: reduce) { .tenet--intro.is-open .panel-media.intro-card { animation: none; } }

/* ---- Statement sections match the homepage quote:
        cream card, italic serif lead, ink caps, lime highlight ---- */
.cs-slide,
.cs-slide--rust,
.cs-slide--blue {
  --slide-bg: var(--card); --slide-fg: var(--ink); --slide-accent: var(--ink);
  margin: clamp(2.5rem, 6vw, 4.5rem) 0;
  padding: clamp(2rem, 5vw, 3.5rem) clamp(1.5rem, 5vw, 4rem);
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  background: var(--card);
  color: var(--ink);
  text-align: left;
}
.cs-slide p { margin: 0; }
.cs-slide .slide-serif {
  margin-bottom: .75rem;
  font-style: italic; color: var(--ink-soft);
  font-size: clamp(1.15rem, 2vw, 1.5rem);
}
.cs-slide .slide-caps {
  max-width: 26ch;
  color: var(--ink);
  font-size: clamp(1.6rem, 3.6vw, 3rem); line-height: 1.05;
}
.cs-slide .slide-caps em {
  font-style: normal; color: var(--ink);
  background: var(--lime); padding: 0 .12em;
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
}

/* Intro: Sarah's office line drawing, bottom right, no frame */
.tenet--intro .tenet-panel .panel-media.office {
  top: auto; bottom: clamp(1.5rem, 6vh, 4rem);
  width: min(44%, 36rem); height: auto; max-height: 58%;
  object-fit: contain; object-position: bottom right;
}
.tenet--intro .tenet-panel .panel-media.office { width: min(34%, 30rem); max-height: 50%; }
.tenet--intro .intro-foot { max-width: min(36rem, 52%); }

/* =====================================================================
   SPREADS: case study laid out like a brand-guidelines document.
   Cover, table of contents, then one "page" per section with a
   running header, a big bold circled title, and a footer with page no.
   ===================================================================== */
:root {
  --loop: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 100' preserveAspectRatio='none'%3E%3Cpath d='M168 10C88 4 10 18 8 50s72 44 152 42 136-20 134-48S214 2 118 14' fill='none' stroke='%23a47cc4' stroke-width='2.2' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
  --page-gap: #d9d0c2;
}

/* Cover */
.spread-cover { position: relative; overflow: hidden; }
.spread-cover h1 {
  font-family: var(--caps); font-weight: 700; text-transform: none;
  font-size: clamp(3rem, 8vw, 7.5rem); line-height: .95; letter-spacing: -.035em;
  max-width: 14ch;
}
.spread-cover .cover-art {
  position: absolute; right: clamp(1.5rem, 5vw, 5rem); bottom: clamp(5rem, 12vh, 8rem);
  width: min(26%, 20rem); mix-blend-mode: multiply; pointer-events: none;
}
.spread-cover .facts { max-width: min(64rem, 70%); }
.cover-meta {
  display: flex; flex-wrap: wrap; gap: 1rem clamp(2rem, 6vw, 5rem);
  margin: clamp(2rem, 5vh, 3.5rem) 0 0; padding: 0; list-style: none;
  font-size: .8rem; line-height: 1.3;
}
.cover-meta li, .spread-foot span { display: grid; grid-template-columns: auto auto; column-gap: .6rem; }
.cover-meta li::before, .spread-foot span::before { content: "→"; grid-row: span 2; color: var(--rust); }
.cover-meta span { grid-column: 2; }

/* The pages */
.spreads { background: var(--page-gap); padding-block: clamp(1.5rem, 3vw, 2.5rem); }
.spreads > * { margin-top: 0; }
.spreads > .stats, .spreads > figure.wide { margin-block: 0 clamp(1rem, 2vw, 1.5rem); }
.spreads .cs-slide { margin-block: 0 clamp(1rem, 2vw, 1.5rem); }

.spread {
  position: relative;
  grid-template-columns: minmax(12rem, 22rem) minmax(0, 1fr);
  column-gap: clamp(2rem, 6vw, 6rem);
  margin: 0 0 clamp(1rem, 2vw, 1.5rem);
  padding: 1.25rem clamp(1.25rem, 4vw, 3rem) 1.25rem;
  background: var(--card);
  border: 0; border-radius: 4px;
  box-shadow: 0 1px 0 rgba(43,29,22,.08), 0 12px 30px rgba(43,29,22,.08);
}
.spread > .content { padding-block: clamp(1.5rem, 4vw, 3rem); max-width: 46rem; }

.spread-head, .spread-foot { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 1rem; font-size: .7rem; color: var(--ink-soft); }
.spread-head { padding-bottom: .75rem; }
.spread-head span:nth-child(2) { flex: 1; text-align: center; }

.spread-foot {
  align-items: end; padding-top: 1.5rem; margin-top: auto;
  border-top: 1px solid var(--rule);
}
.spread-foot b { font-family: var(--caps); font-weight: 700; font-size: 1.35rem; letter-spacing: -.02em; color: var(--ink); line-height: 1; }
.spread-foot i { font-style: normal; font-family: var(--caps); font-weight: 700; font-size: 1.5rem; color: var(--ink); line-height: 1; }
@media (max-width: 760px) { .spread-foot span, .spread-head span:nth-child(2) { display: none; } }

/* Big circled title (overrides the pill tag) */
.spreads .spread > h2 {
  position: relative; align-self: start; justify-self: start;
  margin: clamp(1.5rem, 4vw, 3rem) 0 0; padding: .1em .15em;
  border: 0; border-radius: 0; background: none;
  font-family: var(--caps); font-weight: 700; text-transform: none;
  font-size: clamp(2rem, 3.6vw, 3.25rem); line-height: 1; letter-spacing: -.03em;
  color: var(--ink);
}
.spreads .spread > h2::after {
  content: ""; position: absolute; inset: -.35em -.55em -.3em -.45em;
  background: var(--loop) center / 100% 100% no-repeat; pointer-events: none;
}

/* Table of contents */
.toc { list-style: none; margin: 0; padding: 0; counter-reset: none; }
.toc a {
  display: grid; grid-template-columns: 2.5rem auto 1fr auto; align-items: baseline; gap: .5rem;
  padding: .55rem 0; color: var(--ink); text-decoration: none;
}
.toc a::after { content: ""; grid-column: 3; grid-row: 1; border-bottom: 1px dotted var(--ink-faint); transform: translateY(-.3em); }
.toc .toc-n { font-size: .75rem; color: var(--ink-soft); }
.toc .toc-t { font-family: var(--caps); font-weight: 700; font-size: clamp(1.15rem, 1.8vw, 1.5rem); letter-spacing: -.01em; }
.toc .toc-p { grid-column: 4; font-size: .85rem; }
.toc a:hover .toc-t { text-decoration: underline; text-underline-offset: .2em; }
.spread--toc > .content { align-self: center; }

@media (max-width: 760px) {
  .spread { grid-template-columns: 1fr; }
  .spread-cover .cover-art { display: none; }
  .spread-cover .facts { max-width: none; }
}
/* Wide line drawings on covers sit a little larger */
.spread-cover .cover-art[src*="office"] { width: min(32%, 26rem); }
.spread-cover .cover-art[src*="portrait"] { width: min(18%, 13rem); }
.spread-cover .cover-art[src*="office"] { top: clamp(6rem, 14vh, 9rem); bottom: auto; width: min(30%, 24rem); }
/* Statement cards sit in the stack like another page */
.spreads .cs-slide { border: 0; border-radius: 4px; box-shadow: 0 1px 0 rgba(43,29,22,.08), 0 12px 30px rgba(43,29,22,.08); }

/* =====================================================================
   SHEET: one board of rounded panels (after the brand guideline sheet).
   Short sections sit side by side; visual sections run full width.
   Spans come from --span on each panel (out of 12).
   ===================================================================== */
.sheet {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(.75rem, 1.4vw, 1.25rem);
  align-items: stretch;
  background: var(--paper);
  padding-block: clamp(1.5rem, 3vw, 2.5rem) clamp(2.5rem, 5vw, 4rem);
}
.sheet > * { grid-column: span var(--span, 12); margin: 0 !important; min-width: 0; }

/* Panels */
.sheet > .spread, .sheet > .cs-slide, .sheet > .collage {
  display: flex; flex-direction: column;
  padding: clamp(1.25rem, 2.4vw, 2rem);
  background: var(--card);
  border: 1px solid var(--rule); border-radius: 16px;
  box-shadow: none;
}
.sheet > .spread > .content { padding: 0; max-width: none; }
.sheet > .spread > .content > p, .sheet > .spread > .content > ul,
.sheet > .spread > .content > .callout { max-width: 46rem; }

/* Panel label: small bold caps with the hand-drawn loop */
.sheet .spread > h2 {
  margin: 0 0 1.25rem; align-self: flex-start;
  font-family: var(--caps); font-weight: 700; text-transform: uppercase;
  font-size: clamp(.95rem, 1.2vw, 1.1rem); letter-spacing: .06em; line-height: 1.1;
  padding: .35em .7em;
}
.sheet .spread > h2::after { inset: -.25em -.35em; }

/* Type scaled for panels */
.sheet .cs-section .big { font-size: clamp(1.3rem, 2vw, 1.75rem); }
.sheet .cs-section h3 { font-size: clamp(1.35rem, 1.8vw, 1.6rem); margin-top: 1.75rem; }
.sheet .decision { margin-top: 1.75rem; padding-top: 1.25rem; }
.sheet .decision:first-child { margin-top: 0; border-top: 0; padding-top: 0; }

/* Stats row and the hero image sit in the sheet too */
.sheet > .stats { margin: 0; }
.sheet > figure.wide img { max-width: none; width: 100%; border-radius: 16px; }
.sheet > figure.wide figcaption { max-width: none; }

/* Statement panels */
.sheet > .cs-slide { justify-content: center; text-align: left; background: var(--lime); border-color: var(--ink); }
.sheet > .cs-slide .slide-caps { font-size: clamp(1.4rem, 2.6vw, 2.4rem); max-width: 24ch; }
.sheet > .cs-slide .slide-caps em { background: var(--paper); }

/* Closing collage */
.collage {
  display: grid !important; gap: .75rem;
  grid-template-columns: 2fr 1.4fr .8fr;
  grid-template-rows: 15rem 15rem auto;
  grid-template-areas: "a b c" "a d c" "cap cap cap";
}
.collage img { width: 100%; height: 100%; object-fit: cover; border-radius: 12px; border: 1px solid var(--ink); }
.collage .c-a { grid-area: a; } .collage .c-b { grid-area: b; } .collage .c-c { grid-area: c; object-position: top; background: #000; }
.collage .c-d { grid-area: d; object-position: top; } .collage figcaption { grid-area: cap; margin: 0; }

@media (max-width: 900px) {
  .sheet > * { grid-column: 1 / -1; }
  .collage { grid-template-columns: 1fr 1fr; grid-template-rows: 12rem 12rem 12rem auto; grid-template-areas: "a a" "b c" "d c" "cap cap"; }
}
/* Keep images in proportion to the sheet */
.sheet > figure.wide img { max-height: min(70vh, 40rem); object-fit: cover; object-position: top; }
.sheet figure.pair:not(.phones) img { max-height: 30rem; object-fit: cover; object-position: top; width: 100%; }
.sheet .spread figure img { max-height: 34rem; }
/* Narrow panels: smaller pull quotes */
.sheet .spread[style*="--span:4"] .big,
.sheet .spread[style*="--span:5"] .big { font-size: clamp(1.15rem, 1.5vw, 1.4rem); }
.sheet .diagram svg { max-width: 54rem; }

/* Phone strip (six mobile screens in a row) */
.phones-strip {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .75rem;
  padding: clamp(1rem, 2vw, 1.5rem); background: var(--card); border: 1px solid var(--rule); border-radius: 16px;
}
.phones-strip img { width: 100%; height: auto; border-radius: 14px; border: 1px solid var(--ink); }
.phones-strip figcaption { grid-column: 1 / -1; margin: 0; }
@media (max-width: 900px) { .phones-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---- Balance: every project snapshot is the same size and sits
        centred on the right of its panel ---- */
.tenet-panel .panel-media:not(.art) {
  top: 0; bottom: 0; margin-block: auto;
  width: min(42%, 34rem); height: auto; max-height: none;
  aspect-ratio: 4 / 3;
  object-fit: cover; object-position: top center;
  background: var(--card);
}
.tenet-panel .panel-media.diagram-card { object-fit: contain; padding: 1.25rem; }
/* Illustration panel art sits centred too */
.tenet[data-id="illustration"] .panel-media.art { top: 0; bottom: 0; margin-block: auto; height: min(50%, 24rem); width: auto; max-height: none; }
@media (max-width: 1000px) { .tenet-panel .panel-media { display: none; } }
.tenet-panel .panel-media:not(.art) { width: min(40%, 32rem); aspect-ratio: 16 / 10; }
.tenet-panel h2 { max-width: min(15ch, 52%); }
.tenet-panel .lede, .tenet-panel dl { max-width: min(34ch, 50%); }

/* =====================================================================
   SPROUTS: bright, friendly restyle (after the South Bay Sprouts
   Instagram reference). Warm beige paper, near-black ink, saturated
   lime / teal / pink / orange, one geometric sans (Poppins), thick
   2px outlines, outlined pill buttons and big rounded corners.
   This layer wins over everything above.

   Project tints
     Voyager = teal · Designing in code = lime · Homebot = pink
     Earlier work = orange · Illustration = sky · About = sand
   ===================================================================== */
:root {
  --paper: #ebe5d9;
  --card: #f7f3ea;
  --ink: #1f1f1f;
  --ink-soft: #4a4744;
  --ink-faint: #85807a;
  --rule: rgba(31, 31, 31, .22);

  --lime: #cbdc3f;
  --teal: #3fb6b2;
  --pink: #e9489b;
  --orange: #f28b40;
  --sky: #8fcbe8;
  --sand: #e0d6c4;
  --forest: #1f1f1f;
  --rust: #e9489b;
  --mustard: #cbdc3f;

  /* keep older names pointing at the new set */
  --lilac: var(--teal);
  --blush: var(--pink);
  --sage: var(--orange);

  --c-intro: var(--paper);
  --c-voyager: var(--teal);
  --c-agentic: var(--lime);
  --c-homebot: var(--pink);
  --c-archive: var(--orange);
  --c-illus: var(--sky);
  --c-about: var(--sand);

  --font: "Poppins", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --serif: var(--font);
  --caps: var(--font);

  --line: 2px;
  --radius: 22px;
  --shadow: none;
  --label: 600 .74rem/1.2 var(--font);

  --page-gap: var(--paper);
  --loop: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 100' preserveAspectRatio='none'%3E%3Cpath d='M168 10C88 4 10 18 8 50s72 44 152 42 136-20 134-48S214 2 118 14' fill='none' stroke='%23e9489b' stroke-width='2.6' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
}

body { font-family: var(--font); background: var(--paper); color: var(--ink); }

/* ---- Type: one geometric sans, bold headlines, no italics-as-serif ---- */
.tenet--intro .tenet-panel h1, .tenet-panel h2, .cs-hero h1, .cs-section h3,
.cs-section .big, .tile h2, .locked h2, .tl-name, .art-card figcaption strong,
.spread-cover h1, .site-footer > span, .callout {
  font-family: var(--font);
  font-weight: 600;
  font-variation-settings: normal;
  letter-spacing: -.025em;
}
.tenet--intro .tenet-panel h1 { font-size: clamp(2.4rem, 5.2vw, 5.25rem); line-height: 1.04; }
.tenet-panel h2 { font-size: clamp(1.9rem, 3.8vw, 3.75rem); line-height: 1.05; }
.cs-hero h1 { line-height: 1.02; }
.cs-section .big, .callout { font-weight: 500; letter-spacing: -.015em; }
.band, .intro-quote, .slide-caps, .tile-stat b, .spread-foot b, .spread-foot i,
.toc .toc-t, .art-card figcaption { font-family: var(--font); font-weight: 700; }
.intro-quote span, .cs-slide .slide-serif, .art-kind, .stat-k {
  font-family: var(--font); font-style: normal; font-weight: 400;
}
.site-header .name { font-family: var(--font); font-weight: 700; font-size: 1.15rem; letter-spacing: -.02em; }

/* ---- Thick ink outlines everywhere ---- */
.site-header, .site-footer { border-width: var(--line) !important; border-color: var(--ink); }
.site-header { border-bottom: var(--line) solid var(--ink); }
.tenet { border-left: var(--line) solid var(--ink); }
.tenet:first-child { border-left: 0; }
.stat, .hang, .steps, .tile, .cs-slide, .decision .options div,
.sheet > .spread, .sheet > .cs-slide, .sheet > .collage, .phones-strip {
  border: var(--line) solid var(--ink);
  border-radius: var(--radius);
}
.target { border: var(--line) dashed var(--ink); border-radius: var(--radius); }
.cs-body figure img, .shot, .tl-img, .collage img, .phones-strip img,
.sheet > figure.wide img, .tenet-panel .panel-media:not(.art) {
  border: var(--line) solid var(--ink);
  border-radius: var(--radius);
}
.tile .tile-img { border-bottom: var(--line) solid var(--ink); }
.spread, .spreads .cs-slide { box-shadow: none; border: var(--line) solid var(--ink); border-radius: var(--radius); }

/* ---- Pill buttons: outlined on paper, fill on hover ---- */
.tenet-panel .read, .detail-close, .site-header nav a.cta {
  background: transparent;
  border: var(--line) solid var(--ink);
  border-radius: 999px;
  color: var(--ink);
  font-weight: 500; letter-spacing: .02em; text-transform: none;
  font-size: .9rem;
}
.tenet-panel .read { padding: .6rem 1.6rem; }
.site-header nav a.cta { background: var(--lime); }
.tenet-panel .read:hover, .detail-close:hover, .site-header nav a.cta:hover {
  background: var(--ink); color: var(--paper);
}
/* On bright panels the button sits on paper so it reads as a chip */
.tenet:not(.tenet--intro) .tenet-panel .read { background: var(--card); }
.tenet:not(.tenet--intro) .tenet-panel .read:hover { background: var(--ink); }

/* Nav links: sentence case, like the profile buttons */
.site-header nav a { text-transform: none; letter-spacing: 0; font-size: .9rem; font-weight: 500; }

/* ---- Section tags: solid bright pills, rotating through the palette ---- */
.cs-section > h2, .side-h {
  border: var(--line) solid var(--ink);
  background: var(--tag, var(--lime));
  color: var(--ink);
}
.cs-section:nth-of-type(4n+1) > h2 { --tag: var(--lime); background: var(--lime); }
.cs-section:nth-of-type(4n+2) > h2 { --tag: var(--teal); background: var(--teal); }
.cs-section:nth-of-type(4n+3) > h2 { --tag: var(--pink); background: var(--pink); }
.cs-section:nth-of-type(4n+4) > h2 { --tag: var(--orange); background: var(--orange); }

/* ---- Statement panels: big colour blocks like the post tiles ---- */
.sheet > .cs-slide { background: var(--orange); }
.sheet > .cs-slide:nth-of-type(3n+2) { background: var(--pink); }
.sheet > .cs-slide:nth-of-type(3n+3) { background: var(--lime); }
.cs-slide .slide-caps em, .sheet > .cs-slide .slide-caps em, .intro-quote mark {
  background: var(--card); border-radius: 6px;
}
.intro-quote mark { background: var(--lime); }

/* ---- Big numbers ---- */
.stat:not(.s-ink) { --num: var(--pink); }
.tile-stat b { color: var(--pink); }
.s-ink { --bg: var(--ink); --fg: var(--paper); --num: var(--lime); }

/* ---- Band circles: the highlight bubbles ---- */
.band-dot { border: var(--line) solid var(--ink); }
.band-dot--1 { background: var(--teal); }
.band-dot--2 { background: var(--pink); }
.band-dot--3 { background: var(--lime); }
.band-row--rev { -webkit-text-stroke: 2px var(--ink); }

/* ---- Charts ---- */
.hang { --hang-bg: var(--card); --hang-fill: var(--teal); }
.range-cells span.on { background: var(--pink); border-color: var(--ink); }
.target .goal, .target--miss .goal { stroke: var(--pink); }
.target--hit { background: var(--lime); }
.target--hit .goal { stroke: var(--ink); }
.decision .options .chosen { background: var(--lime); }

/* Panel labels in sheets */
.sheet .spread > h2 { font-weight: 700; }

/* Draft markers stay visible on pink */
.confirm { border-bottom-color: var(--ink); }
.confirm::after { color: var(--ink); background: var(--card); padding: 0 .25em; border-radius: 4px; }
/* Panel labels: clean outlined pills (no hand-drawn loop) */
.sheet .spread > h2, .spreads .spread > h2 {
  padding: .4em .95em; border: var(--line) solid var(--ink); border-radius: 999px;
  font-size: .8rem; letter-spacing: .08em;
}
.sheet .spread > h2::after, .spreads .spread > h2::after { content: none; }
.cs-hero { border-bottom-width: var(--line); }

/* =====================================================================
   ILLUSTRATION AND BRANDING: same hero and panel board as the case
   studies. Each project is a .spread panel; its artwork sits in
   rounded, outlined colour blocks (.panel) and photos (.photo).
   ===================================================================== */
.ill-proj .big { margin-bottom: 0; }
.ill-row {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 1rem; margin-top: 1.5rem;
}
.ill-row--one { grid-template-columns: 1fr; }
.ill-row--split { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
.ill-row--lead { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); }
.ill-row + .ill-row { margin-top: 1rem; }

.panel, .photo {
  position: relative; overflow: hidden;
  min-height: clamp(16rem, 28vw, 26rem);
  border: var(--line) solid var(--ink); border-radius: var(--radius);
}
.panel {
  display: flex; align-items: center; justify-content: center;
  padding: clamp(1.25rem, 3vw, 2.5rem);
  background: var(--bg, var(--card));
}
.panel > img { width: auto; height: auto; max-width: 100%; max-height: clamp(14rem, 24vw, 22rem); object-fit: contain; }
.ill-row--one .panel > img { max-height: clamp(16rem, 34vw, 30rem); }
.photo { background: var(--card); }
.photo img { position: absolute; inset: 0; width: 100%; height: 100%; max-height: none; object-fit: cover; }

.set {
  display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr));
  gap: clamp(1rem, 2.5vw, 2rem); align-items: center; justify-items: center; width: 100%;
}
.set img { width: 100%; height: auto; max-height: 9rem; object-fit: contain; }

@media (max-width: 900px) {
  .ill-row--split, .ill-row--lead { grid-template-columns: 1fr; }
  .set { --cols: 2 !important; }
}
/* Half-width panels side by side: artwork stretches to fill the taller one */
.sheet > .ill-proj > .content { display: flex; flex-direction: column; flex: 1; }
.ill-proj .ill-row:last-child { flex: 1; }

/* =====================================================================
   BALANCED CASE STUDY PANELS: text beside media inside wide panels,
   tall screenshots capped, one bold takeaway leading each panel.
   ===================================================================== */
.split {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start;
}
.split > div > :first-child { margin-top: 0; }
.split > div > :last-child { margin-bottom: 0; }
.sheet .spread .split figure { margin: 0 0 1.25rem; }
.sheet .spread .split figure:last-child { margin-bottom: 0; }
.sheet .split > div:last-child > figure:not(.steps):not(.pair) img,
.sheet .split > div:last-child > .shot { max-height: 38rem; width: 100%; object-fit: cover; object-position: top; }
.sheet .spread .content > p, .sheet .split p { max-width: 42rem; }

/* Decision panels: heading reads as the headline */
.decision-panel h3 { margin: 0 0 1rem; font-size: clamp(1.4rem, 2.2vw, 1.9rem); line-height: 1.15; }
.decision-panel .options { margin-bottom: 1rem; }
.decision-panel .split + figure { margin-top: 1.75rem; }

/* Narrow panels: images fit the column */
.sheet .spread[style*="--span:5"] figure img,
.sheet .spread[style*="--span:7"] figure:not(.pair) img { max-height: 30rem; object-fit: contain; object-position: top left; }
.sheet .spread[style*="--span:5"] .stats { grid-template-columns: 1fr; }
#s-mobile figure.pair.phones { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* Looking back closes the story as a lime statement */
.lookback { background: var(--lime); border-color: var(--ink); }
.lookback .big { font-size: clamp(1.5rem, 2.6vw, 2.2rem); }

@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }
.decision-panel .split > .decision { margin: 0; padding: 0; border: 0; }
.decision-panel .options { grid-template-columns: 1fr 1fr; }
.sheet > .spread.lookback { background: var(--lime); border-color: var(--ink); }
#s-admin figure img { margin-inline: auto; object-position: top center; }
#s-admin figure figcaption { text-align: center; }
/* Pairs inside a split column stay side by side and align to the top */
.split figure.pair { align-items: start; gap: .75rem; }

/* Phones: panel copy uses the full width (the snapshot column is hidden) */
@media (max-width: 1000px) {
  .tenet-panel h2, .tenet-panel .lede, .tenet-panel dl,
  .tenet--intro .intro-foot, .tenet--intro .tenet-panel h1 { max-width: none; }
}

/* =====================================================================
   HIGGSFIELD: dark, cinematic restyle (after higgsfield.ai).
   Near-black canvas, charcoal cards with a hairline white edge,
   Space Grotesk bold uppercase display type, Inter body, IBM Plex Mono
   for labels, neon lime as the one loud accent, pink gradient tags.
   This layer wins over everything above (including SPROUTS).
   ===================================================================== */
:root {
  --paper: #0f1113;
  --card: #1c1e20;
  --card-2: #16181a;
  --ink: #f7f7f8;
  --ink-soft: #b4b6b9;
  --ink-faint: #7d8085;
  --rule: rgba(255, 255, 255, .1);
  --edge: rgba(255, 255, 255, .14);
  --edge-strong: rgba(255, 255, 255, .28);

  --lime: #d1fe17;
  --lime-deep: #9cbf00;
  --pink: #ed1572;
  --pink-hot: #f920d1;
  --cyan: #3ee0ff;
  --orange: #ff8a1f;
  --violet: #8f7bff;
  --sand: #c9c0ad;
  --teal: var(--cyan);
  --sky: var(--violet);
  --on-lime: #131517;

  --c-intro: var(--lime);
  --c-voyager: var(--cyan);
  --c-agentic: var(--lime);
  --c-homebot: var(--pink);
  --c-archive: var(--orange);
  --c-illus: var(--violet);
  --c-about: var(--sand);

  --font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --display: "Space Grotesk", var(--font);
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --serif: var(--font);
  --caps: var(--display);

  --line: 1px;
  --radius: 20px;
  --label: 600 .72rem/1.2 var(--mono);
  --page-gap: var(--paper);
  --pink-grad: radial-gradient(40% 137% at 52% 117%, var(--pink-hot) 0%, var(--pink) 100%);
}

html { background: var(--paper); color-scheme: dark; }
body { background: var(--paper); color: var(--ink); font-family: var(--font); }
::selection { background: var(--lime); color: var(--on-lime); }
:focus-visible { outline-color: var(--lime); }

/* ---- Display type: bold, tight, uppercase ---- */
.tenet--intro .tenet-panel h1, .tenet-panel h2, .cs-hero h1, .cs-section h3,
.tile h2, .locked h2, .tl-name, .spread-cover h1, .site-footer > span,
.decision-panel h3, .slide-caps, .band {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: -.04em;
  text-transform: uppercase;
  color: var(--ink);
}
.tenet--intro .tenet-panel h1, .tenet-panel h2, .cs-hero h1 {
  background: linear-gradient(180deg, #ffffff 0%, #ffffff 45%, #8d9096 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: .98;
}
.tenet--intro .tenet-panel h1 { font-size: clamp(2.4rem, 5.4vw, 5.5rem); }
.tenet-panel h2 { font-size: clamp(1.9rem, 3.8vw, 3.8rem); }
.cs-section .big, .callout, .sheet .spread .big {
  font-family: var(--font); font-weight: 600; letter-spacing: -.02em; color: var(--ink);
}
p, li, dd, figcaption, .lede { color: var(--ink-soft); }
.lede { color: #d6d8db; }
strong, b { color: var(--ink); }
.tenet-panel h1 mark, .intro-quote mark {
  background: var(--lime); color: var(--on-lime); -webkit-text-fill-color: var(--on-lime);
  border-radius: 6px; padding: 0 .2em;
}
.intro-quote, .intro-quote span { color: var(--ink); font-family: var(--font); font-weight: 500; }

/* Mono labels: eyebrows, dt, timeline dates, panel tags */
.eyebrow, .cs-hero .eyebrow, .tenet-panel .eyebrow, .facts dt, .tl-when,
.tenet-panel dt, .stat-k, .art-kind, .intro-hint, .detail-bar, figcaption {
  font-family: var(--mono);
  letter-spacing: .02em;
}
.eyebrow, .cs-hero .eyebrow, .tenet-panel .eyebrow {
  color: var(--tone, var(--lime)); text-transform: uppercase; font-weight: 500; font-size: .75rem;
}
.tenet-panel dt { color: var(--ink-faint); text-transform: uppercase; font-size: .72rem; }
.tenet-panel dd { color: var(--ink); }

/* ---- Header: thin dark nav bar ---- */
.site-header {
  background: rgba(15, 17, 19, .88);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--rule) !important;
  position: sticky; top: 0; z-index: 20;
}
.site-header .name { font-family: var(--display); font-weight: 700; text-transform: uppercase; letter-spacing: -.03em; color: var(--ink); }
.site-header nav { align-items: center; }
.site-header nav a { color: var(--ink-faint); font-weight: 500; }
.site-header nav a:hover { color: var(--ink); text-decoration: none; }
.site-header nav a:first-child { color: var(--lime); }

/* ---- Lime CTA: chunky key with a darker bottom lip ---- */
.site-header nav a.cta, .tenet-panel .read {
  background: var(--lime) !important;
  color: var(--on-lime) !important;
  border: 0 !important;
  border-radius: 12px !important;
  box-shadow: inset 0 -3px 0 var(--lime-deep), 0 0 24px rgba(209, 254, 23, .18);
  font-weight: 600; letter-spacing: 0; text-transform: none;
  transition: transform .15s ease, box-shadow .15s ease;
}
.site-header nav a.cta { padding: .45rem 1rem; }
.tenet-panel .read { padding: .75rem 1.5rem; }
.site-header nav a.cta:hover, .tenet-panel .read:hover {
  transform: translateY(-1px);
  box-shadow: inset 0 -3px 0 var(--lime-deep), 0 0 36px rgba(209, 254, 23, .35);
}
.detail-close {
  background: var(--card) !important; color: var(--ink) !important;
  border: 1px solid var(--edge-strong) !important; border-radius: 10px !important;
}
.detail-close:hover { background: #2a2c2f !important; }

/* ---- Accordion: one rounded frame, hairline dividers between the tabs;
        the tone shows up as a neon accent ---- */
.tenets { border-top: 0; gap: 0; padding: 6px; background: var(--paper); }
.tenets:not(.is-compact) { position: relative; }
/* The frame hangs from the nav: no gap on top, the nav's bottom rule is its
   top edge, so only the bottom corners are rounded */
.tenets:not(.is-compact) { padding-top: 0; }
.tenets::after {
  content: ""; position: absolute; inset: 0 6px 6px; z-index: 2; pointer-events: none;
  border: 1px solid var(--rule); border-top: 0; border-radius: 0 0 var(--radius) var(--radius);
}
.tenet, .tenet:first-child {
  background: var(--card-2);
  border: 0 !important;
  border-radius: 0;
  position: relative;
}
.tenet + .tenet { border-left: 1px solid var(--rule) !important; }
.tenet:first-child { border-radius: 0 0 0 var(--radius); }
.tenet:last-child { border-radius: 0 0 var(--radius) 0; }
@media (max-width: 760px) {
  .tenets:not(.is-compact) .tenet + .tenet { border-left: 0 !important; border-top: 1px solid var(--rule) !important; }
  .tenets:not(.is-compact) .tenet:first-child { border-radius: 0; }
  .tenets:not(.is-compact) .tenet:last-child { border-radius: 0 0 var(--radius) var(--radius); }
}
.tenet::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: radial-gradient(120% 70% at 85% 110%, color-mix(in srgb, var(--tone) 22%, transparent) 0%, transparent 60%);
  opacity: 0; transition: opacity .6s ease;
}
.tenet.is-open { background: var(--card); }
.tenet.is-open::before { opacity: 1; }
.tenet-tab span { color: var(--ink-faint); font-family: var(--display); font-weight: 700; letter-spacing: .02em; }
.tenet-tab span::after {
  content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--tone); margin-block-start: .6em; box-shadow: 0 0 10px var(--tone);
}
.tenet:hover .tenet-tab span, .tenet.is-open .tenet-tab span { color: var(--ink); }
.tenet-panel { position: relative; }
.tenet-panel .panel-media:not(.art) { border: 1px solid var(--edge) !important; border-radius: 16px !important; }
.tenet-panel .panel-media.art { filter: drop-shadow(0 20px 40px rgba(0,0,0,.5)); }

/* ---- Timeline ---- */
.tl-band { border-color: var(--rule) !important; }
.tl-when { color: var(--band, var(--lime)); }
.tl-list li { color: var(--ink-soft); }
.tl-img { border: 1px solid var(--edge) !important; border-radius: 14px !important; }

/* ---- Hairline-edged cards replace the thick ink outlines ---- */
.stat, .hang, .steps, .tile, .cs-slide, .decision .options div,
.sheet > .spread, .sheet > .cs-slide, .sheet > .collage, .phones-strip,
.panel, .photo, .spread, .spreads .cs-slide {
  border: 0 !important;
  box-shadow: inset 0 0 0 1px var(--edge) !important;
  border-radius: var(--radius) !important;
  background-color: var(--card);
}
.cs-body figure img, .shot, .collage img, .phones-strip img,
.sheet > figure.wide img {
  border: 1px solid var(--edge) !important; border-radius: 14px !important;
}
.tile .tile-img { border-bottom: 1px solid var(--edge) !important; }
.target { border: 1px dashed var(--edge-strong) !important; }
.panel { background: var(--bg, #232528); }

/* ---- Case-study hero: cinematic gradient banner ---- */
.cs-hero {
  background:
    radial-gradient(90% 120% at 100% 0%, color-mix(in srgb, var(--tone, var(--lime)) 26%, transparent) 0%, transparent 55%),
    linear-gradient(180deg, #17191b 0%, var(--paper) 100%) !important;
  border: 0 !important;
  border-bottom: 1px solid var(--rule) !important;
  color: var(--ink);
}
.detail { background: var(--paper); border-top: 1px solid var(--rule); }
.detail-bar {
  background: rgba(15, 17, 19, .9) !important; color: var(--ink);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--rule) !important;
  text-transform: uppercase;
}
.detail-title { color: var(--tone, var(--lime)); }

/* ---- Section and panel tags: Higgsfield's little badges ---- */
.cs-section > h2, .side-h,
.sheet .spread > h2, .spreads .spread > h2 {
  background: rgba(209, 254, 23, .14) !important;
  color: var(--lime) !important;
  border: 0 !important;
  border-radius: 6px !important;
  font-family: var(--display); font-weight: 700; text-transform: uppercase;
  letter-spacing: .02em; font-size: .78rem; padding: .3em .65em;
}
.cs-section:nth-of-type(3n+2) > h2, .sheet .spread:nth-of-type(3n+2) > h2 {
  background: var(--pink-grad) !important; color: #fff !important;
}

/* ---- Statement slides: big dark banners, lime + pink accents ---- */
.sheet > .cs-slide, .sheet > .cs-slide:nth-of-type(3n+2), .sheet > .cs-slide:nth-of-type(3n+3) {
  background:
    radial-gradient(70% 120% at 0% 100%, rgba(209, 254, 23, .16) 0%, transparent 60%),
    #141618 !important;
  color: var(--ink);
}
.sheet > .cs-slide:nth-of-type(3n+2) {
  background: radial-gradient(70% 120% at 100% 100%, rgba(237, 21, 114, .22) 0%, transparent 60%), #141618 !important;
}
.cs-slide, .cs-slide * { color: var(--ink); }
.cs-slide .slide-caps em, .sheet > .cs-slide .slide-caps em {
  background: none; color: var(--lime); font-style: normal;
}
.lookback, .sheet > .spread.lookback {
  background: var(--lime) !important; box-shadow: none !important;
}
.lookback, .lookback * { color: var(--on-lime) !important; -webkit-text-fill-color: var(--on-lime); }
.lookback > h2 { background: rgba(19, 21, 23, .12) !important; }

/* ---- Numbers and charts ---- */
.stat { --num: var(--lime); }
.stat:not(.s-ink) { --num: var(--lime); }
.stat b, .stat strong, .tile-stat b { font-family: var(--display); letter-spacing: -.04em; }
.tile-stat b { color: var(--lime); }
.s-ink { --bg: #232528; --fg: var(--ink); --num: var(--lime); }
.hang { --hang-bg: #232528; --hang-fill: var(--lime); }
.range-cells span { border-color: var(--edge-strong); }
.range-cells span.on { background: var(--lime); border-color: var(--lime); }
.target .goal, .target--miss .goal { stroke: var(--pink); }
.target--hit { background: rgba(209, 254, 23, .12); }
.target--hit .goal { stroke: var(--lime); }
.decision .options .chosen { background: rgba(209, 254, 23, .12) !important; box-shadow: inset 0 0 0 1px var(--lime) !important; }
.band-dot { border-color: var(--edge-strong); }
.band-dot--1 { background: var(--cyan); }
.band-dot--2 { background: var(--pink); }
.band-dot--3 { background: var(--lime); }
.band-row--rev { -webkit-text-stroke: 1.5px var(--ink); }

/* ---- Links, rules, footer ---- */
main a:not(.read):not(.cta) { color: var(--ink); text-decoration-color: var(--lime); }
main a:not(.read):not(.cta):hover { color: var(--lime); }
hr { border-color: var(--rule); }
.site-footer { background: var(--paper); border-top: 1px solid var(--rule) !important; color: var(--ink-faint); }
.site-footer a { color: var(--ink-soft); }
.site-footer a:hover { color: var(--lime); }

/* Draft markers: keep them loud on dark */
.confirm { border-bottom-color: var(--pink); }
.confirm::after { color: #fff; background: var(--pink-grad); padding: 0 .3em; border-radius: 4px; }

/* Nav and buttons use Inter, sentence case, like Higgsfield's top bar */
.site-header nav a, .tenet-panel .read, .detail-close {
  font: 500 .875rem/1.2 var(--font); letter-spacing: 0; text-transform: none;
}
.tenet-panel .read, .site-header nav a.cta { font-weight: 600; }
figcaption { font-family: var(--font); color: var(--ink-faint); letter-spacing: 0; }
/* Office drawing: white lines on the dark canvas (invert, then screen drops the fills) */
.tenet--intro .tenet-panel .panel-media.office { filter: invert(1); mix-blend-mode: screen; opacity: 1; }
.stat { background-color: var(--bg, var(--card)) !important; }
.steps .viz-h, .steps span { color: var(--ink); }
.steps .viz-note { color: var(--ink-soft); }
.hang-bar, .hang-bar * { color: var(--on-lime) !important; }
.hang-cols { border-top-color: var(--edge-strong); }
/* Spine dots: centre the dot on the label's axis */
.tenet-tab span { display: inline-flex; align-items: center; gap: .6em; }
.tenet-tab span::after { margin: 0; flex: none; }

/* ---- Workflow diagram: dark pills, hairline edges, lime for the code step ---- */
.diagram svg { font-family: var(--font); overflow: visible; }
.diagram svg rect { fill: #232528; stroke: var(--edge-strong); stroke-width: 1; }
.diagram svg rect:nth-of-type(2) { fill: var(--lime); stroke: none; filter: drop-shadow(0 0 14px rgba(209, 254, 23, .35)); }
.diagram svg rect:nth-of-type(5) { fill: rgba(209, 254, 23, .1); stroke: var(--lime); }
.diagram svg rect:nth-of-type(6) { fill: rgba(62, 224, 255, .08); stroke: rgba(62, 224, 255, .55); }
.diagram svg text { fill: var(--ink); font-weight: 600; }
.diagram svg text[font-size="11"] { fill: var(--ink-faint); font-weight: 400; }
.diagram svg text:nth-of-type(3), .diagram svg text:nth-of-type(4) { fill: var(--on-lime); }
.diagram svg text:nth-of-type(9) { fill: var(--lime); }
.diagram svg text:nth-of-type(10) { fill: rgba(209, 254, 23, .7); }
.diagram svg line { stroke: var(--edge-strong); }
.diagram svg marker path { fill: var(--edge-strong); }
.diagram svg > text { fill: var(--ink-faint); }
.sheet .diagram svg { max-width: 60rem; }
.sheet .spread .content > .diagram { max-width: none; }

/* =====================================================================
   FLOW: workflow as round icon nodes on one hairline, with a light
   streak travelling along it. Build (the code step) glows.
   ===================================================================== */
.flow { --node: 4.5rem; --cols: 5; margin: 2.5rem 0 .5rem; }
.flow-track {
  list-style: none; margin: 0; padding: 0; position: relative;
  display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: 1rem;
}
/* the line, centre of first node to centre of last */
.flow-track::before, .flow-track::after {
  content: ""; position: absolute; top: calc(var(--node) / 2); height: 1px;
  left: calc(50% / var(--cols)); right: calc(50% / var(--cols));
}
.flow-track::before { background: linear-gradient(90deg, var(--edge-strong), rgba(255,255,255,.18), var(--edge-strong)); }
.flow-track::after {
  height: 2px; margin-top: -.5px; right: auto; width: 14%;
  background: linear-gradient(90deg, transparent, rgba(209, 254, 23, .9), #fff, transparent);
  filter: blur(.5px); border-radius: 2px;
  animation: flow-streak 4.5s cubic-bezier(.55, 0, .45, 1) infinite;
}
@keyframes flow-streak {
  0% { transform: translateX(0); opacity: 0; }
  10% { opacity: 1; }
  85% { opacity: 1; }
  100% { transform: translateX(470%); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .flow-track::after { display: none; } }

.flow-step { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; }
.flow-node {
  width: var(--node); height: var(--node); border-radius: 50%;
  display: grid; place-items: center;
  background: radial-gradient(circle at 50% 30%, #23262a, #121416 70%);
  box-shadow: inset 0 0 0 1px var(--edge), 0 8px 24px rgba(0, 0, 0, .45);
}
.flow-node svg {
  width: 40%; height: 40%; fill: none; stroke: var(--ink);
  stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
.flow-step b {
  margin-top: 1.1rem; font-family: var(--display); font-weight: 600;
  font-size: clamp(1.15rem, 1.6vw, 1.45rem); letter-spacing: -.02em; color: var(--ink);
}
.flow-step small { margin-top: .4rem; font-size: .82rem; line-height: 1.35; color: var(--ink-faint); max-width: 12rem; }

/* Build: the step that changed */
.flow-step.is-key .flow-node {
  background: radial-gradient(circle at 50% 35%, #2a2f1a, #121416 72%);
  box-shadow: inset 0 0 0 1px rgba(209, 254, 23, .6), 0 0 0 6px rgba(209, 254, 23, .06), 0 0 32px rgba(209, 254, 23, .28);
}
.flow-step.is-key .flow-node svg { stroke: var(--lime); stroke-width: 2.2; }
.flow-step.is-end .flow-node svg { stroke: var(--lime); }

/* Shared review hangs off Build */
.flow-side {
  display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: 1rem;
  margin-top: 1.25rem;
}
.flow-side > * { grid-column: 2 / span 3; }
.flow-tag {
  position: relative; display: block; height: 3rem;
  padding-left: calc(100% / 6 + .75rem); padding-top: .9rem;
  font-family: var(--mono); font-size: .72rem; letter-spacing: .02em; color: var(--ink-faint);
}
.flow-tag::before {
  content: ""; position: absolute; top: -1rem; bottom: 0; left: calc(100% / 6);
  border-left: 1px dashed var(--edge-strong);
}
.flow-card {
  display: flex; align-items: center; gap: 1rem; padding: 1rem 1.25rem;
  border-radius: 999px; background: rgba(62, 224, 255, .05);
  box-shadow: inset 0 0 0 1px rgba(62, 224, 255, .3);
}
.flow-node--sm { --node: 2.75rem; flex: none; width: var(--node); height: var(--node); }
.flow-node--sm svg { stroke: var(--cyan); }
.flow-card b { display: block; font-weight: 600; color: var(--ink); }
.flow-card small { display: block; font-size: .82rem; color: var(--ink-faint); }

/* Phones: a vertical timeline */
@media (max-width: 700px) {
  .flow { --node: 3.25rem; }
  .flow-track { grid-template-columns: 1fr; gap: 1.25rem; }
  .flow-track::before { top: calc(var(--node) / 2); bottom: calc(var(--node) / 2); left: calc(var(--node) / 2); right: auto; width: 1px; height: auto;
    background: linear-gradient(180deg, var(--edge-strong), rgba(255,255,255,.18)); }
  .flow-track::after { display: none; }
  .flow-step { display: grid; grid-template-columns: var(--node) 1fr; column-gap: 1rem; align-items: center; text-align: left; }
  .flow-node { grid-row: span 2; }
  .flow-step b { margin: 0; align-self: end; }
  .flow-step small { margin: .15rem 0 0; align-self: start; max-width: none; }
  .flow-side { grid-template-columns: 1fr; }
  .flow-side > * { grid-column: 1; }
  .flow-tag { padding-left: 0; height: auto; padding-top: 0; margin-bottom: .6rem; }
  .flow-tag::before { display: none; }
  .flow-card { border-radius: var(--radius); }
}

/* =====================================================================
   HORIZON (password-protected case study): stats row, timeline of
   moments, problem/decision/evidence rows, screen pairs, audit table.
   ===================================================================== */
.hz-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.hz-stats > div { padding: 1.25rem 1.25rem 1.1rem; border-radius: 16px; background: #232528; box-shadow: inset 0 0 0 1px var(--edge); display: flex; flex-direction: column; gap: .35rem; }
.hz-stats b { font-family: var(--display); font-size: clamp(2.4rem, 4.5vw, 3.6rem); line-height: 1; letter-spacing: -.04em; color: var(--lime); }
.hz-stats span { color: var(--ink); font-weight: 600; font-size: .95rem; }
.hz-stats small { color: var(--ink-faint); font-family: var(--mono); font-size: .72rem; }

.hz-moments { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.75rem 1.25rem; position: relative; }
.hz-moments li { position: relative; padding-top: 1.4rem; }
.hz-moments li::before { content: ""; position: absolute; top: 0; left: 0; width: 9px; height: 9px; border-radius: 50%; background: var(--ink-faint); }
.hz-moments li::after { content: ""; position: absolute; top: 4px; left: 16px; right: -1.25rem; height: 1px; background: var(--rule); }
.hz-moments li:nth-child(5n)::after { display: none; }
.hz-moments li.is-key::before { background: var(--lime); box-shadow: 0 0 12px rgba(209, 254, 23, .6); }
.hz-moments time { display: block; font-family: var(--mono); font-size: .75rem; color: var(--ink-faint); margin-bottom: .35rem; }
.hz-moments li.is-key time { color: var(--lime); }
.hz-moments p { margin: 0; font-size: .92rem; line-height: 1.4; color: var(--ink); }

.hz-pdes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; margin: 1.75rem 0 0; padding-top: 1.25rem; border-top: 1px solid var(--rule); }
.hz-pdes--stack { grid-template-columns: 1fr; }
.hz-pdes dt { font-family: var(--mono); font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--lime); margin-bottom: .4rem; }
.hz-pdes dd { margin: 0; font-size: .92rem; line-height: 1.5; color: var(--ink-soft); }

.hz-shots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; margin-top: 1.5rem; }
.hz-shots figure, .sheet .spread .split .hz-shots figure { margin: 0; }
.hz-shots img { width: 100%; height: auto; }

.hz-table { overflow-x: auto; margin-top: 1.5rem; border-radius: 16px; box-shadow: inset 0 0 0 1px var(--edge); }
.hz-table table { width: 100%; min-width: 44rem; border-collapse: collapse; font-size: .88rem; }
.hz-table th { text-align: left; font-family: var(--mono); font-weight: 500; font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-faint); padding: .9rem 1rem; border-bottom: 1px solid var(--rule); }
.hz-table td { padding: .85rem 1rem; border-bottom: 1px solid var(--rule); color: var(--ink-soft); vertical-align: top; }
.hz-table tr:last-child td { border-bottom: 0; }
.hz-table td:first-child { color: var(--ink); font-weight: 500; }
.hz-table td.ok { color: var(--lime); }
.hz-note { margin-top: 1rem; font-size: .9rem; color: var(--ink-faint); }

.hz-ways { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.25rem; }
.hz-ways li { padding-top: 1rem; border-top: 2px solid var(--lime); display: flex; flex-direction: column; gap: .5rem; }
.hz-ways b { font-family: var(--display); font-size: 1.15rem; letter-spacing: -.02em; color: var(--ink); }
.hz-ways span { font-size: .9rem; line-height: 1.5; color: var(--ink-soft); }

@media (max-width: 900px) {
  .hz-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hz-moments { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hz-moments li::after { display: none; }
  .hz-pdes, .hz-shots { grid-template-columns: 1fr; }
  .hz-ways { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) { .hz-ways, .hz-moments { grid-template-columns: 1fr; } }
.sheet .spread .content > .hz-ways, .sheet .spread .content > .hz-moments,
.sheet .spread .content > .hz-pdes, .sheet .spread .content > .hz-table,
.sheet .spread .content > .hz-stats, .sheet .spread .content > .hz-shots { max-width: none; width: 100%; }

/* =====================================================================
   DAY / NIGHT: the toggle in the header, and the light ("day") theme.
   Night is the default (everything above). Day keeps the same type,
   cards and lime accent, on a warm off-white canvas. theme.js sets
   html[data-theme="light"] and injects the switch.
   ===================================================================== */

/* ---- The switch: a little sky with a sun or a moon ---- */
.theme-toggle {
  --tt-w: 3.6rem; --tt-h: 1.9rem; --tt-pad: .2rem;
  --tt-knob: calc(var(--tt-h) - var(--tt-pad) * 2);
  position: relative; flex: none; align-self: center;
  width: var(--tt-w); height: var(--tt-h);
  margin: 0 .5rem 0 .75rem; padding: 0;
  border: 0; border-radius: 999px; cursor: pointer;
  background: linear-gradient(180deg, #11163a 0%, #262c6b 100%);
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, .55), 0 0 0 1px var(--edge-strong), 0 0 0 4px rgba(255, 255, 255, .04);
  overflow: hidden;
  transition: background .5s var(--ease), box-shadow .5s var(--ease);
}
.theme-toggle:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; }
.tt-sky, .tt-sky i { position: absolute; display: block; }
.tt-sky { inset: 0; border-radius: inherit; }

/* Stars: twinkle at night, fade out by day */
.tt-star { width: 2px; height: 2px; border-radius: 50%; background: #fff; box-shadow: 0 0 3px #fff; transition: opacity .4s ease, transform .5s var(--ease); }
.tt-star--1 { left: 18%; top: 28%; }
.tt-star--2 { left: 34%; top: 60%; width: 1.5px; height: 1.5px; }
.tt-star--3 { left: 46%; top: 22%; width: 3px; height: 3px; }
.tt-star--4 { left: 12%; top: 66%; width: 1.5px; height: 1.5px; }
@media (prefers-reduced-motion: no-preference) {
  .tt-star { animation: tt-twinkle 2.4s ease-in-out infinite; }
  .tt-star--2 { animation-delay: .6s; } .tt-star--3 { animation-delay: 1.2s; } .tt-star--4 { animation-delay: 1.8s; }
}
@keyframes tt-twinkle { 50% { opacity: .35; } }

/* Clouds and a strip of hill: hidden at night, slide in by day */
.tt-cloud {
  height: 6px; border-radius: 6px; background: #fff;
  opacity: 0; transform: translateX(40%);
  transition: opacity .4s ease, transform .5s var(--ease);
}
.tt-cloud::before { content: ""; position: absolute; left: 25%; bottom: 2px; width: 55%; height: 7px; border-radius: 50%; background: inherit; }
.tt-cloud--1 { right: 12%; top: 28%; width: 16px; }
.tt-cloud--2 { right: 30%; top: 56%; width: 12px; transition-delay: .05s; }
.tt-hill {
  left: -10%; right: -10%; bottom: -55%; height: 80%; border-radius: 50%;
  background: linear-gradient(180deg, #a8d48c, #7dbb6a);
  opacity: 0; transform: translateY(40%);
  transition: opacity .4s ease, transform .5s var(--ease);
}

/* Knob: the moon sits right at night, the sun left by day */
.tt-knob {
  position: absolute; top: var(--tt-pad); left: var(--tt-pad);
  width: var(--tt-knob); height: var(--tt-knob); border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fffdf3 0%, #ece6d2 60%, #d4ccb3 100%);
  box-shadow: 0 0 10px rgba(255, 250, 225, .55), inset -2px -2px 4px rgba(0, 0, 0, .12);
  transform: translateX(calc(var(--tt-w) - var(--tt-knob) - var(--tt-pad) * 2));
  transition: transform .5s var(--ease), background .5s var(--ease), box-shadow .5s var(--ease);
}
.tt-crater, .tt-knob::before, .tt-knob::after {
  content: ""; position: absolute; border-radius: 50%; background: rgba(150, 140, 115, .35);
  transition: opacity .3s ease;
}
.tt-crater { position: absolute; display: block; left: 52%; top: 22%; width: 26%; height: 26%; }
.tt-knob::before { left: 22%; top: 48%; width: 20%; height: 20%; }
.tt-knob::after { left: 56%; top: 62%; width: 14%; height: 14%; }

.theme-toggle[aria-checked="true"] {
  background: linear-gradient(180deg, #8cc7ef 0%, #cfe8f7 100%);
  box-shadow: inset 0 2px 5px rgba(30, 80, 130, .3), 0 0 0 1px var(--edge-strong), 0 0 0 4px rgba(15, 17, 19, .04);
}
.theme-toggle[aria-checked="true"] .tt-star { opacity: 0; transform: translateY(-6px); animation: none; }
.theme-toggle[aria-checked="true"] .tt-cloud { opacity: 1; transform: none; }
.theme-toggle[aria-checked="true"] .tt-hill { opacity: 1; transform: none; }
.theme-toggle[aria-checked="true"] .tt-knob {
  transform: none;
  background: radial-gradient(circle at 38% 32%, #fff6c9 0%, #ffd34d 45%, #f6ae2d 100%);
  box-shadow: 0 0 0 3px rgba(255, 210, 80, .28), 0 0 14px rgba(255, 190, 60, .7);
}
.theme-toggle[aria-checked="true"] .tt-crater,
.theme-toggle[aria-checked="true"] .tt-knob::before,
.theme-toggle[aria-checked="true"] .tt-knob::after { opacity: 0; }
.theme-toggle:hover .tt-knob { filter: brightness(1.06); }
@media (prefers-reduced-motion: reduce) {
  .theme-toggle, .theme-toggle * , .theme-toggle *::before, .theme-toggle *::after { transition: none !important; }
}
@media (max-width: 760px) { .theme-toggle { margin: .55rem .25rem .55rem .75rem; } }

/* Brief cross-fade while switching themes */
html.theme-anim body, html.theme-anim .site-header, html.theme-anim .tenet,
html.theme-anim .tenets, html.theme-anim .site-footer, html.theme-anim .detail, html.theme-anim .detail-bar {
  transition: background-color .45s ease, color .45s ease, border-color .45s ease, box-shadow .45s ease,
    flex-grow .7s var(--ease), flex-basis .7s var(--ease) !important;
}

/* ---- Day theme ---- */
html[data-theme="light"] {
  --paper: #f3f2ee;
  --card: #ffffff;
  --card-2: #e9e8e3;
  --ink: #0f1113;
  --ink-soft: #4a4d52;
  --ink-faint: #74777d;
  --rule: rgba(15, 17, 19, .1);
  --edge: rgba(15, 17, 19, .12);
  --edge-strong: rgba(15, 17, 19, .24);

  /* Lime is still the loud fill; text that used lime gets a deeper olive
     so it stays readable on white. Tone-coloured labels darken the same way. */
  --lime-deep: #a8cc00;
  --lime-ink: #4f6800;
  --pink-grad: radial-gradient(40% 137% at 52% 117%, var(--pink-hot) 0%, var(--pink) 100%);
  color-scheme: light;
}
html[data-theme="light"] .lede { color: #34373b; }
html[data-theme="light"] .tenet--intro .tenet-panel h1,
html[data-theme="light"] .tenet-panel h2,
html[data-theme="light"] .cs-hero h1 {
  background: linear-gradient(180deg, #0f1113 0%, #0f1113 45%, #5d6168 100%);
  -webkit-background-clip: text; background-clip: text;
}
html[data-theme="light"] .eyebrow,
html[data-theme="light"] .cs-hero .eyebrow,
html[data-theme="light"] .tenet-panel .eyebrow,
html[data-theme="light"] .detail-title { color: color-mix(in srgb, var(--tone, var(--lime)) 42%, #1a1c1e); }
html[data-theme="light"] .tl-when { color: color-mix(in srgb, var(--band, var(--lime)) 42%, #1a1c1e); }

/* Header + case-study bar: frosted white */
html[data-theme="light"] .site-header,
html[data-theme="light"] .detail-bar { background: rgba(243, 242, 238, .86) !important; }
html[data-theme="light"] .site-header nav a:first-child { color: var(--lime-ink); }
html[data-theme="light"] .site-header nav a.cta,
html[data-theme="light"] .tenet-panel .read {
  box-shadow: inset 0 -3px 0 var(--lime-deep), 0 0 0 1px rgba(79, 104, 0, .25), 0 6px 18px rgba(156, 191, 0, .22);
}
html[data-theme="light"] .site-header nav a.cta:hover,
html[data-theme="light"] .tenet-panel .read:hover {
  box-shadow: inset 0 -3px 0 var(--lime-deep), 0 0 0 1px rgba(79, 104, 0, .3), 0 10px 26px rgba(156, 191, 0, .32);
}
html[data-theme="light"] .detail-close:hover { background: var(--card-2) !important; }

/* Accordion: soft grey spines, the open card is white with the tone glow */
html[data-theme="light"] .tenet::before {
  background: radial-gradient(120% 70% at 85% 110%, color-mix(in srgb, var(--tone) 30%, transparent) 0%, transparent 60%);
}
html[data-theme="light"] .tenet-tab span::after { box-shadow: 0 0 0 1px rgba(15, 17, 19, .15); }
html[data-theme="light"] .tenet-panel .panel-media.art { filter: drop-shadow(0 18px 30px rgba(15, 17, 19, .12)); }
/* Office drawing: back to dark lines on the light card */
html[data-theme="light"] .tenet--intro .tenet-panel .panel-media.office { filter: none; mix-blend-mode: multiply; }

/* Cards and panels */
html[data-theme="light"] .panel { background: var(--bg, var(--card-2)); }
html[data-theme="light"] .s-ink { --bg: #0f1113; --fg: #f7f7f8; --num: var(--lime); }
html[data-theme="light"] .s-ink, html[data-theme="light"] .s-ink * { color: #f7f7f8; }
html[data-theme="light"] .stat:not(.s-ink) { --num: var(--lime-ink); }
html[data-theme="light"] .tile-stat b { color: var(--lime-ink); }
html[data-theme="light"] .hang { --hang-bg: var(--card-2); }
html[data-theme="light"] .target--hit { background: rgba(209, 254, 23, .25); }
html[data-theme="light"] .decision .options .chosen { background: rgba(209, 254, 23, .2) !important; box-shadow: inset 0 0 0 1px var(--lime-deep) !important; }

/* Case-study hero */
html[data-theme="light"] .cs-hero {
  background:
    radial-gradient(90% 120% at 100% 0%, color-mix(in srgb, var(--tone, var(--lime)) 34%, transparent) 0%, transparent 55%),
    linear-gradient(180deg, #ffffff 0%, var(--paper) 100%) !important;
}

/* Section tags */
html[data-theme="light"] .cs-section > h2, html[data-theme="light"] .side-h,
html[data-theme="light"] .sheet .spread > h2, html[data-theme="light"] .spreads .spread > h2 {
  background: var(--lime) !important; color: var(--on-lime) !important;
}
html[data-theme="light"] .cs-section:nth-of-type(3n+2) > h2,
html[data-theme="light"] .sheet .spread:nth-of-type(3n+2) > h2 { background: var(--pink-grad) !important; color: #fff !important; }

/* Statement slides: white banners with a soft lime / pink wash */
html[data-theme="light"] .sheet > .cs-slide,
html[data-theme="light"] .sheet > .cs-slide:nth-of-type(3n+3) {
  background: radial-gradient(70% 120% at 0% 100%, rgba(209, 254, 23, .35) 0%, transparent 60%), var(--card) !important;
}
html[data-theme="light"] .sheet > .cs-slide:nth-of-type(3n+2) {
  background: radial-gradient(70% 120% at 100% 100%, rgba(237, 21, 114, .16) 0%, transparent 60%), var(--card) !important;
}
html[data-theme="light"] .cs-slide .slide-caps em,
html[data-theme="light"] .sheet > .cs-slide .slide-caps em {
  color: var(--on-lime); background: var(--lime); border-radius: 6px; padding: 0 .15em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}

/* Links and footer */
html[data-theme="light"] main a:not(.read):not(.cta) { text-decoration-color: var(--lime-deep); }
html[data-theme="light"] main a:not(.read):not(.cta):hover,
html[data-theme="light"] .site-footer a:hover { color: var(--lime-ink); }

/* Workflow diagram (inline SVG) */
html[data-theme="light"] .diagram svg rect { fill: var(--card-2); }
html[data-theme="light"] .diagram svg rect:nth-of-type(2) { filter: none; }
html[data-theme="light"] .diagram svg rect:nth-of-type(5) { fill: rgba(209, 254, 23, .25); stroke: var(--lime-deep); }
html[data-theme="light"] .diagram svg rect:nth-of-type(6) { fill: rgba(62, 224, 255, .12); stroke: #1aa6c4; }
html[data-theme="light"] .diagram svg text:nth-of-type(9) { fill: var(--lime-ink); }
html[data-theme="light"] .diagram svg text:nth-of-type(10) { fill: rgba(79, 104, 0, .8); }

/* Flow nodes: white buttons on a grey line */
html[data-theme="light"] .flow-track::before { background: linear-gradient(90deg, var(--edge-strong), rgba(15, 17, 19, .12), var(--edge-strong)); }
html[data-theme="light"] .flow-track::after { background: linear-gradient(90deg, transparent, var(--lime-deep), var(--lime), transparent); }
html[data-theme="light"] .flow-node {
  background: radial-gradient(circle at 50% 30%, #ffffff, #ecebe6 75%);
  box-shadow: inset 0 0 0 1px var(--edge), 0 8px 20px rgba(15, 17, 19, .08);
}
html[data-theme="light"] .flow-step.is-key .flow-node {
  background: radial-gradient(circle at 50% 35%, #f6ffd0, #ffffff 72%);
  box-shadow: inset 0 0 0 1px var(--lime-deep), 0 0 0 6px rgba(209, 254, 23, .2), 0 0 28px rgba(156, 191, 0, .3);
}
html[data-theme="light"] .flow-step.is-key .flow-node svg,
html[data-theme="light"] .flow-step.is-end .flow-node svg { stroke: var(--lime-ink); }
html[data-theme="light"] .flow-card { background: rgba(62, 224, 255, .1); box-shadow: inset 0 0 0 1px rgba(26, 166, 196, .45); }
html[data-theme="light"] .flow-node--sm svg { stroke: #138aa3; }
@media (max-width: 700px) {
  html[data-theme="light"] .flow-track::before { background: linear-gradient(180deg, var(--edge-strong), rgba(15, 17, 19, .12)); }
}
.cs-section a.read {
  display: inline-block; padding: .7rem 1.4rem; border-radius: 12px; text-decoration: none;
  background: var(--lime); color: var(--on-lime) !important; font-weight: 600;
  box-shadow: inset 0 -3px 0 var(--lime-deep), 0 0 24px rgba(209, 254, 23, .18);
}

/* =====================================================================
   PERSONA TABLE (Homebot): four personas side by side. Mono row labels,
   rounded cells on hairline cards, Felicia's column lit in lime.
   The wrap bleeds out by the border-spacing so the outer cards sit
   flush with the content edges above and below.
   ===================================================================== */
.persona-wrap { --gap: .5rem; margin: 2.5rem calc(var(--gap) * -1) 0; overflow-x: auto; }
.persona-table {
  width: 100%; min-width: 42rem;
  border-collapse: separate; border-spacing: var(--gap);
  table-layout: fixed;
  font-family: var(--font);
}
.persona-table caption {
  caption-side: top; text-align: left; padding: 0 var(--gap) 1.25rem;
  font: var(--label); text-transform: uppercase; color: var(--ink-faint);
}
.persona-table col.label-col { width: 10rem; }

/* Header: identical cards, content centred both ways */
.persona-table thead th {
  position: relative; height: 9.5rem; padding: 1rem .75rem;
  vertical-align: middle; text-align: center; font-weight: 500;
  background: var(--card-2); border-radius: 16px; box-shadow: inset 0 0 0 1px var(--edge);
}
.persona-table thead img {
  display: block; width: 3.5rem; height: 3.5rem; margin: 0 auto .75rem;
  border-radius: 50%; object-fit: cover; clip-path: circle(46%);
  box-shadow: 0 0 0 2px var(--edge-strong);
}
.persona-table thead span { display: block; font-size: .8rem; line-height: 1.2; color: var(--ink-soft); }
.persona-table thead b {
  display: block; margin-top: .15rem;
  font-family: var(--display); font-weight: 700; font-size: 1.15rem; line-height: 1.1;
  text-transform: uppercase; letter-spacing: -.02em; color: var(--ink);
}
/* "Designed for first": a badge riding the top edge, so it doesn't push Felicia's content down */
.persona-table thead em {
  position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%);
  white-space: nowrap; padding: .3em .65em; border-radius: 6px;
  font: 500 .66rem/1.2 var(--mono); font-style: normal; text-transform: uppercase; letter-spacing: .02em;
  background: var(--on-lime); color: var(--lime);
  box-shadow: 0 0 0 2px var(--lime);
}

/* Row labels: left on the content edge, centred on the row; any
   [confirm] tag drops onto its own line instead of wrapping mid-label */
.persona-table tbody th {
  padding: 0 .75rem 0 0; text-align: left; vertical-align: middle;
  font: var(--label); text-transform: uppercase; color: var(--ink-faint); white-space: nowrap;
}
.persona-table tbody th .confirm { display: inline-flex; flex-direction: column; align-items: flex-start; gap: .3rem; border-bottom: 0; }
.persona-table tbody th .confirm::after { content: "confirm"; line-height: 1.4; }

.persona-table tbody td {
  height: 3.25rem; padding: .5rem .75rem; text-align: center; vertical-align: middle;
  background: var(--card-2); border-radius: 12px; box-shadow: inset 0 0 0 1px var(--rule);
  font-size: .95rem; line-height: 1.25; color: var(--ink);
}

/* Felicia: the persona the product was designed for */
.persona-table .is-focus {
  background: var(--lime) !important; box-shadow: inset 0 -3px 0 var(--lime-deep) !important;
}
.persona-table td.is-focus { color: var(--on-lime); font-weight: 600; }
.persona-table th.is-focus span { color: rgba(19, 21, 23, .7); }
.persona-table th.is-focus b { color: var(--on-lime); }
.persona-table th.is-focus img { box-shadow: 0 0 0 2px var(--on-lime); }
html:not([data-theme="light"]) .persona-table thead th.is-focus { box-shadow: inset 0 -3px 0 var(--lime-deep), 0 0 28px rgba(209, 254, 23, .2) !important; }

/* =====================================================================
   SUNRISE / SUNSET: while the theme switches, a soft wash of light
   passes over the page. Sunrise rises from below, warm gold into rose;
   sunset sinks from above, amber into dusk violet. theme.js adds the
   .sky-sweep element and centres the glow on the toggle (--sx).
   ===================================================================== */
.sky-sweep {
  position: fixed; inset: -10% 0; z-index: 9999; pointer-events: none;
  opacity: 0; will-change: transform, opacity;
}
.sky-sweep--rise {
  background:
    radial-gradient(60% 55% at var(--sx, 85%) 100%, rgba(255, 222, 140, .55) 0%, rgba(255, 170, 110, .32) 35%, transparent 70%),
    linear-gradient(0deg, rgba(255, 150, 110, .30) 0%, rgba(240, 120, 150, .16) 40%, rgba(140, 170, 230, .08) 70%, transparent 100%);
  animation: sky-rise 1.3s cubic-bezier(.3, .1, .3, 1) forwards;
}
.sky-sweep--set {
  background:
    radial-gradient(60% 55% at var(--sx, 85%) 0%, rgba(255, 190, 110, .45) 0%, rgba(245, 120, 90, .26) 35%, transparent 70%),
    linear-gradient(180deg, rgba(250, 140, 90, .22) 0%, rgba(200, 80, 130, .20) 40%, rgba(70, 50, 140, .26) 75%, rgba(20, 22, 60, .30) 100%);
  animation: sky-set 1.3s cubic-bezier(.3, .1, .3, 1) forwards;
}
@keyframes sky-rise {
  0%   { opacity: 0; transform: translateY(30%); }
  35%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(-20%); }
}
@keyframes sky-set {
  0%   { opacity: 0; transform: translateY(-30%); }
  35%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(20%); }
}
@media (prefers-reduced-motion: reduce) { .sky-sweep { display: none; } }

/* Slower colour cross-fade so it lands with the light */
html.theme-anim body, html.theme-anim .site-header, html.theme-anim .tenet,
html.theme-anim .tenets, html.theme-anim .site-footer, html.theme-anim .detail, html.theme-anim .detail-bar,
html.theme-anim .sheet > *, html.theme-anim .cs-hero {
  transition: background-color .9s ease, background .9s ease, color .9s ease, border-color .9s ease, box-shadow .9s ease,
    flex-grow .7s var(--ease), flex-basis .7s var(--ease) !important;
}

/* =====================================================================
   ABOUT TIMELINE, dark: each role is a charcoal card instead of a
   bright colour band. The band colour becomes the accent: a glowing
   edge, the dates, a soft corner wash, and the list markers.
   Uses theme tokens, so the day theme follows automatically.
   ===================================================================== */
.timeline { border: 0 !important; display: grid; gap: .75rem; }
.tl-band, .tl-band + .tl-band {
  position: relative; overflow: hidden;
  background:
    radial-gradient(60% 120% at 100% 0%, color-mix(in srgb, var(--band) 14%, transparent) 0%, transparent 60%),
    var(--card) !important;
  color: var(--ink) !important;
  border: 0 !important; border-radius: var(--radius);
  box-shadow: inset 0 0 0 1px var(--edge);
  padding: 1.5rem 1.75rem 1.75rem 2rem;
}
.tl-band::before {
  content: ""; position: absolute; left: 0; top: 1.25rem; bottom: 1.25rem; width: 3px;
  border-radius: 0 3px 3px 0; background: var(--band);
  box-shadow: 0 0 14px color-mix(in srgb, var(--band) 60%, transparent);
}
.tl-when { color: var(--band) !important; font-family: var(--mono); font-weight: 500; letter-spacing: .04em; }
.tl-name {
  font-family: var(--display) !important; font-weight: 700 !important; text-transform: uppercase;
  letter-spacing: -.04em; color: var(--ink) !important;
}
.tl-desc { color: var(--ink-soft) !important; font-size: 1rem; line-height: 1.5; max-width: 34ch; }
.tl-desc strong { color: var(--ink) !important; }
.tl-list li { position: relative; padding-left: 1rem; color: var(--ink) !important; font-size: .9rem; line-height: 1.7; }
.tl-list li::before {
  content: ""; position: absolute; left: 0; top: .72em; width: 6px; height: 6px; border-radius: 50%;
  background: var(--band);
}
.tl-list a { color: var(--ink) !important; text-decoration-color: var(--band); }
.tl-list a:hover { color: var(--band) !important; }
.tl-img { border: 0 !important; box-shadow: 0 0 0 1px var(--edge), 0 12px 32px rgba(0, 0, 0, .35); }
html[data-theme="light"] .tl-when { color: color-mix(in srgb, var(--band) 55%, #1a1c1e) !important; }
html[data-theme="light"] .tl-list a:hover { color: color-mix(in srgb, var(--band) 55%, #1a1c1e) !important; }
html[data-theme="light"] .tl-img { box-shadow: 0 0 0 1px var(--edge), 0 10px 24px rgba(15, 17, 19, .08); }

/* =====================================================================
   RALLY MAP, night version: invert the white map to charcoal, then
   rotate hues back so the red (west) and navy (east) routes keep their
   colours. Day theme shows the original artwork.
   ===================================================================== */
html:not([data-theme="light"]) img[src*="archive-mini"] {
  filter: invert(.92) hue-rotate(180deg) saturate(1.6) contrast(.95);
  background: #121416;
}

/* =====================================================================
   ACCORDION MEETS THE FOOTER (desktop): no bottom gap and no rounded
   bottom, so the frame sides and the dividers between tabs run straight
   down into the footer's top rule instead of stopping short of it.
   ===================================================================== */
@media (min-width: 761px) {
  .tenets:not(.is-compact) { padding-bottom: 0; }
  .tenets:not(.is-compact)::after { bottom: 0; border-bottom: 0; border-radius: 0; }
  .tenets:not(.is-compact) .tenet,
  .tenets:not(.is-compact) .tenet:first-child,
  .tenets:not(.is-compact) .tenet:last-child { border-radius: 0; }
}

/* Rally map: show the whole map (no crop), with breathing room. The white
   padding is inverted along with the map in night mode, so it matches. */
.tenet-panel .panel-media[src*="archive-mini"],
.tl-img[src*="archive-mini"] {
  object-fit: contain !important; object-position: center !important;
  padding: clamp(.75rem, 1.6vw, 1.5rem); background: #fff !important;
}

/* =====================================================================
   COMPACT TAB BAR (case study open): no box and no dividers between the
   tabs, just a hairline above and below so it reads as a strip between
   the page's sections. The open tab keeps its underline and card fill.
   ===================================================================== */
.tenets.is-compact {
  padding: 0; background: var(--paper);
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
}
.tenets.is-compact::after { display: none; }
.tenets.is-compact .tenet,
.tenets.is-compact .tenet:first-child,
.tenets.is-compact .tenet:last-child,
.tenets.is-compact .tenet + .tenet {
  border: 0 !important; border-radius: 0; background: transparent;
}
.tenets.is-compact .tenet.is-open { background: var(--card); }

/* Tile stats (Other work): the label's last line sits on the number's
   baseline, so a two-line label locks up with the number instead of
   hanging below it. Centred as a fallback where last-baseline isn't supported. */
.tile-stat { align-items: center; align-items: last baseline; gap: .65rem; }
.tile-stat b { line-height: 1; flex: none; }
.tile-stat span { padding-bottom: .1em; }

/* =====================================================================
   GETHR PREVIEW: the whole phone screen on a soft stage instead of a
   cropped slice. The phone rises from the bottom edge, tilted a touch,
   with a glow in Gethr's own mint. Day theme gets a light stage.
   ===================================================================== */
.tile-stage {
  position: relative; overflow: hidden; aspect-ratio: 4 / 3;
  border-bottom: 1px solid var(--edge);
  background:
    radial-gradient(60% 75% at 50% 100%, rgba(150, 222, 214, .30) 0%, rgba(150, 222, 214, .08) 45%, transparent 72%),
    radial-gradient(40% 40% at 85% 10%, rgba(209, 254, 23, .07) 0%, transparent 70%),
    linear-gradient(180deg, #191b1e 0%, #111315 100%);
}
.tile-stage::after { /* faint floor line the phone stands behind */
  content: ""; position: absolute; left: 12%; right: 12%; bottom: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(150, 222, 214, .5), transparent);
}
.tile-phone {
  position: absolute; left: 50%; top: 10%; width: 44%; height: auto;
  transform: translateX(-50%) rotate(-5deg); transform-origin: 50% 100%;
  border-radius: 22px;
  box-shadow: 0 0 0 5px #24272a, 0 0 0 6px rgba(255, 255, 255, .16), 0 30px 60px rgba(0, 0, 0, .55), 0 0 60px rgba(150, 222, 214, .18);
  transition: transform .5s var(--ease);
}
.tile:hover .tile-phone { transform: translateX(-50%) rotate(-3deg) translateY(-4%); }
@media (prefers-reduced-motion: reduce) { .tile-phone { transition: none; } }
html[data-theme="light"] .tile-stage {
  background:
    radial-gradient(60% 75% at 50% 100%, rgba(120, 205, 196, .38) 0%, rgba(120, 205, 196, .10) 45%, transparent 72%),
    linear-gradient(180deg, #f7f6f2 0%, #ebe9e3 100%);
}
html[data-theme="light"] .tile-phone {
  box-shadow: 0 0 0 5px #ffffff, 0 0 0 6px rgba(15, 17, 19, .12), 0 24px 48px rgba(15, 17, 19, .16), 0 0 50px rgba(120, 205, 196, .25);
}
.tile-stage--gethr {
  background:
    radial-gradient(60% 75% at 50% 100%, rgba(150, 222, 214, .42) 0%, rgba(150, 222, 214, .12) 45%, transparent 72%),
    radial-gradient(40% 40% at 85% 10%, rgba(209, 254, 23, .07) 0%, transparent 70%),
    linear-gradient(180deg, #191b1e 0%, #111315 100%);
}
html[data-theme="light"] .tile-stage--gethr {
  background:
    radial-gradient(60% 75% at 50% 100%, rgba(120, 205, 196, .45) 0%, rgba(120, 205, 196, .12) 45%, transparent 72%),
    linear-gradient(180deg, #f7f6f2 0%, #ebe9e3 100%);
}
.tile .tile-img[src*="archive-mini"] {
  object-fit: contain !important; object-position: center !important;
  padding: clamp(.75rem, 1.6vw, 1.25rem); background: #fff !important;
}

/* Sticky stack while a case study is open: nav, then the tab bar just
   below it, then the case-study title bar below that. --header-live is
   the nav's measured height (main.js); --header-h is the fallback. */
.tenets.is-compact { top: var(--header-live, var(--header-h)); }
.detail-bar { top: calc(var(--header-live, var(--header-h)) + var(--compact-h)); }
.detail { scroll-margin-top: calc(var(--header-live, var(--header-h)) + var(--compact-h)); }

/* Gethr preview, v2: three onboarding screens fanned out, welcome in front */
.tile-stage--gethr .tile-phone {
  top: 13%; width: 30%; border-radius: 10% / 5.5%;
}
.tile-stage--gethr .tile-phone--c { z-index: 3; top: 9%; width: 32%; transform: translateX(-50%) rotate(0deg); }
.tile-stage--gethr .tile-phone--l { z-index: 1; transform: translateX(-112%) rotate(-9deg); filter: brightness(.85); }
.tile-stage--gethr .tile-phone--r { z-index: 2; transform: translateX(12%) rotate(9deg); filter: brightness(.85); }
.tile:hover .tile-stage--gethr .tile-phone--c { transform: translateX(-50%) translateY(-4%); }
.tile:hover .tile-stage--gethr .tile-phone--l { transform: translateX(-122%) rotate(-12deg); }
.tile:hover .tile-stage--gethr .tile-phone--r { transform: translateX(22%) rotate(12deg); }
html[data-theme="light"] .tile-stage--gethr .tile-phone--l,
html[data-theme="light"] .tile-stage--gethr .tile-phone--r { filter: none; }
.tile-stage--gethr .tile-phone { top: 16%; width: 25%; }
.tile-stage--gethr .tile-phone--c { top: 10%; width: 28%; }
.tile-stage--gethr .tile-phone--l { transform: translateX(-118%) rotate(-9deg); }
.tile-stage--gethr .tile-phone--r { transform: translateX(18%) rotate(9deg); }
.tile:hover .tile-stage--gethr .tile-phone--l { transform: translateX(-126%) rotate(-11deg); }
.tile:hover .tile-stage--gethr .tile-phone--r { transform: translateX(26%) rotate(11deg); }

/* =====================================================================
   PERSONA CARD (homepage Homebot panel): Flustered Felicia rebuilt in
   the site's type and colours instead of a cropped slide. Dark stats
   rail on the left, Homebot pink as the accent. Sizes scale with the
   card (container units).
   ===================================================================== */
.tenet-panel .panel-media.persona-card {
  container-type: inline-size;
  display: grid; grid-template-columns: 31% 1fr;
  top: 50%; bottom: auto; margin: 0;
  width: min(42%, 34rem); height: auto; aspect-ratio: auto !important;
  padding: 0; overflow: hidden;
  background: var(--card) !important;
  border: 0 !important; border-radius: 18px !important;
  box-shadow: inset 0 0 0 1px var(--edge), 0 24px 60px rgba(0, 0, 0, .45), 0 0 80px color-mix(in srgb, var(--pink) 12%, transparent);
  transform: translateY(-50%) rotate(2deg);
  font-family: var(--font); text-align: left;
}
.tenet.is-open .panel-media.persona-card { animation: pc-lift .6s var(--ease) .25s both; }
@keyframes pc-lift {
  from { opacity: 0; transform: translateY(calc(-50% + 16px)) rotate(4deg); }
  to   { opacity: 1; transform: translateY(-50%) rotate(2deg); }
}
@media (prefers-reduced-motion: reduce) { .tenet.is-open .panel-media.persona-card { animation: none; } }

.persona-card .pc-side {
  padding: 7cqi 5cqi; background: color-mix(in srgb, var(--paper) 70%, #000);
  box-shadow: inset -1px 0 0 var(--edge);
  display: flex; flex-direction: column; gap: 4cqi;
}
.persona-card dl { margin: 0; display: grid; gap: 3.6cqi; }
.persona-card dt, .persona-card .pc-k {
  margin: 0; font-family: var(--mono); font-size: 2cqi; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint);
}
.persona-card dd { margin: .6cqi 0 0; font-family: var(--display); font-weight: 700; font-size: 4.6cqi; letter-spacing: -.03em; color: var(--ink); }
.persona-card .pc-side ul { margin: -2.4cqi 0 0; padding: 0; list-style: none; font-size: 2.3cqi; line-height: 1.6; color: var(--ink-soft); }

.persona-card .pc-main { padding: 6cqi 6cqi 6cqi 5.5cqi; display: flex; flex-direction: column; gap: 3cqi; }
.persona-card .pc-eyebrow { margin: 0; font-family: var(--mono); font-size: 2cqi; letter-spacing: .06em; text-transform: uppercase; color: var(--pink); }
.persona-card .pc-name { display: flex; align-items: center; gap: 2.4cqi; }
.persona-card .pc-name img {
  width: 8.5cqi; height: 8.5cqi; border-radius: 50%; flex: none;
  box-shadow: 0 0 0 .5cqi var(--card), 0 0 0 .8cqi var(--pink);
}
.persona-card .pc-name span {
  font-family: var(--display); font-weight: 700; font-size: 6.4cqi; line-height: .95;
  letter-spacing: -.04em; text-transform: uppercase; color: var(--ink);
}
.persona-card .pc-bio { margin: 0; font-size: 3.2cqi; line-height: 1.35; font-weight: 600; letter-spacing: -.01em; color: var(--ink); }
.persona-card .pc-tags { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 1.2cqi; }
.persona-card .pc-tags li {
  padding: .7cqi 1.8cqi; border-radius: 999px; font-size: 2.1cqi; font-weight: 500; color: var(--ink-soft);
  box-shadow: inset 0 0 0 1px var(--edge-strong);
}
.persona-card .pc-tags li:first-child { color: #fff; background: var(--pink-grad); box-shadow: none; }
.persona-card .pc-quote {
  margin: .5cqi 0 0; padding-left: 2cqi; border-left: 2px solid var(--pink);
  font-size: 2.6cqi; font-style: italic; color: var(--ink-soft);
}
html[data-theme="light"] .tenet-panel .panel-media.persona-card {
  box-shadow: inset 0 0 0 1px var(--edge), 0 18px 40px rgba(15, 17, 19, .10), 0 0 60px color-mix(in srgb, var(--pink) 10%, transparent);
}
html[data-theme="light"] .persona-card .pc-side { background: color-mix(in srgb, var(--paper) 85%, #000); }
.tenet-panel .persona-card dl {
  display: flex !important; flex-direction: column; gap: 3.6cqi; max-width: none !important;
  margin: 0 !important; padding: 0 !important; border: 0 !important; grid-template-columns: none !important;
}
.tenet-panel .persona-card dl > div { display: block; padding: 0; border: 0; }
.tenet-panel .persona-card dt { font-size: 2cqi !important; color: var(--ink-faint) !important; }
.tenet-panel .persona-card dd { font-size: 4.6cqi !important; color: var(--ink) !important; margin: .6cqi 0 0 !important; }
html[data-theme="light"] .persona-card .pc-side { background: color-mix(in srgb, var(--paper) 94%, #000); }

/* =====================================================================
   COMPACT TAB CLOSE: the open tab in the compact bar carries the close
   button (main.js), so the separate case-study title bar is gone. The
   .detail scroll margin above still lands the case study below the bar.
   ===================================================================== */
.detail-bar { display: none !important; }
.tenet .tab-close { display: none; }
.tenets.is-compact .tenet.is-open { display: flex; align-items: center; }
.tenets.is-compact .tenet.is-open .tab-close {
  display: grid; place-items: center; flex: none;
  width: 1.75rem; height: 1.75rem; margin-right: .75rem; padding: 0;
  border: 0; border-radius: 50%; cursor: pointer;
  background: transparent; color: var(--ink-soft);
  box-shadow: inset 0 0 0 1px var(--edge-strong);
  font: 600 .75rem/1 var(--font);
  transition: background .2s ease, color .2s ease, box-shadow .2s ease;
}
.tenets.is-compact .tenet.is-open .tab-close:hover {
  background: var(--lime); color: var(--on-lime); box-shadow: none;
}
.tenets.is-compact .tenet.is-open .tab-close:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
html[data-theme="light"] .tenets.is-compact .tenet.is-open .tab-close:hover { color: var(--on-lime); }

/* =====================================================================
   TRAVELERS HAVEN PREVIEW: the booking page as a dimmed browser window
   at the back, the "Step 1 is complete" dialog lifted out in front.
   Same stage as Gethr, with Travelers Haven's blue as the glow.
   ===================================================================== */
.tile-stage--th {
  background:
    radial-gradient(60% 70% at 62% 62%, rgba(40, 120, 220, .30) 0%, rgba(40, 120, 220, .08) 45%, transparent 72%),
    radial-gradient(40% 40% at 10% 10%, rgba(209, 254, 23, .06) 0%, transparent 70%),
    linear-gradient(180deg, #191b1e 0%, #111315 100%);
}
.tile-stage--th::after { background: linear-gradient(90deg, transparent, rgba(80, 150, 240, .5), transparent); }
.th-window {
  position: absolute; left: 7%; top: 11%; width: 78%;
  border-radius: 10px; overflow: hidden; background: #fff;
  transform: rotate(-4deg); transform-origin: 30% 60%;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .14), 0 26px 50px rgba(0, 0, 0, .55);
  transition: transform .5s var(--ease);
}
.th-chrome { display: flex; gap: 4px; padding: 6px 8px; background: #2a2d31; }
.th-chrome i { width: 6px; height: 6px; border-radius: 50%; background: #5b5f66; }
.th-chrome i:first-child { background: #ff6159; } .th-chrome i:nth-child(2) { background: #ffbd2e; } .th-chrome i:nth-child(3) { background: #28c941; }
.th-window img { display: block; width: 100%; height: auto; filter: brightness(.55) saturate(.8); }
.th-dialog {
  position: absolute; right: 6%; bottom: 12%; width: 54%; height: auto;
  border-radius: 8px; transform: rotate(2deg);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .2), 0 30px 60px rgba(0, 0, 0, .6), 0 0 50px rgba(40, 120, 220, .35);
  transition: transform .5s var(--ease);
}
.tile:hover .th-window { transform: rotate(-5deg) translateY(-2%); }
.tile:hover .th-dialog { transform: rotate(0deg) translateY(-6%); }
@media (prefers-reduced-motion: reduce) { .th-window, .th-dialog { transition: none; } }
html[data-theme="light"] .tile-stage--th {
  background:
    radial-gradient(60% 70% at 62% 62%, rgba(40, 120, 220, .22) 0%, rgba(40, 120, 220, .06) 45%, transparent 72%),
    linear-gradient(180deg, #f7f6f2 0%, #ebe9e3 100%);
}
html[data-theme="light"] .th-window { box-shadow: 0 0 0 1px rgba(15, 17, 19, .1), 0 20px 40px rgba(15, 17, 19, .14); }
html[data-theme="light"] .th-window img { filter: brightness(.8) saturate(.85); }
html[data-theme="light"] .th-dialog { box-shadow: 0 0 0 1px rgba(15, 17, 19, .1), 0 24px 48px rgba(15, 17, 19, .2), 0 0 40px rgba(40, 120, 220, .25); }

/* Designing in code panel: the workflow card hugs the diagram instead of
   sitting in the shared 16:10 snapshot frame (the diagram is a wide strip,
   so 16:10 left most of the card empty) */
.tenet-panel .panel-media.diagram-card {
  aspect-ratio: 820 / 175; height: auto;
  padding: clamp(1rem, 2vw, 1.75rem) clamp(1rem, 2vw, 1.5rem);
  box-sizing: content-box; width: min(40%, 32rem);
}

/* =====================================================================
   DAY THEME, ATELIER: warm paper, soft near-black ink, black pill
   buttons, white cards with soft shadows, and ember orange + lavender
   as the colours (clouds behind the page, the accents in front). Lime
   is remapped to ember in day mode, so every lime accent follows.
   Night mode is untouched.
   ===================================================================== */
html[data-theme="light"] {
  --paper: #faf8f5;
  --card: #ffffff;
  --card-2: #f4f0ea;
  --ink: #1c1a19;
  --ink-soft: #57524d;
  --ink-faint: #8c857e;
  --rule: rgba(28, 26, 25, .08);
  --edge: rgba(28, 26, 25, .09);
  --edge-strong: rgba(28, 26, 25, .18);
  --ember: #e5582b;
  --ember-soft: #f6b79c;
  --lavender: #a596ff;
  --lime: var(--ember);
  --lime-deep: #c4441a;
  --lime-ink: #c2461b;
  --on-lime: #ffffff;
  --soft-shadow: 0 1px 2px rgba(28, 26, 25, .04), 0 14px 36px rgba(28, 26, 25, .07);
}

/* Paper with the two colour clouds, fixed behind everything */
html[data-theme="light"] body {
  background:
    radial-gradient(38% 46% at -4% 72%, rgba(165, 150, 255, .30) 0%, rgba(165, 150, 255, .10) 45%, transparent 72%),
    radial-gradient(36% 44% at 104% 48%, rgba(229, 88, 43, .26) 0%, rgba(229, 88, 43, .08) 45%, transparent 72%),
    var(--paper);
  background-attachment: fixed;
}

/* Type: soft ink, no grey fade on headlines */
html[data-theme="light"] .tenet--intro .tenet-panel h1,
html[data-theme="light"] .tenet-panel h2,
html[data-theme="light"] .cs-hero h1 {
  background: linear-gradient(180deg, #1c1a19 0%, #1c1a19 55%, #4a4541 100%);
  -webkit-background-clip: text; background-clip: text;
}
html[data-theme="light"] .lede { color: #3d3935; }
html[data-theme="light"] .site-header nav a:first-child { color: var(--ink); }

/* Header: frosted paper */
html[data-theme="light"] .site-header { background: rgba(250, 248, 245, .82) !important; }

/* Buttons: black pills, white text */
html[data-theme="light"] .site-header nav a.cta,
html[data-theme="light"] .tenet-panel .read,
html[data-theme="light"] .cs-section a.read {
  background: #1c1a19 !important; color: #fff !important;
  border-radius: 999px !important;
  box-shadow: 0 1px 2px rgba(28, 26, 25, .2), 0 8px 20px rgba(28, 26, 25, .14) !important;
}
html[data-theme="light"] .site-header nav a.cta:hover,
html[data-theme="light"] .tenet-panel .read:hover,
html[data-theme="light"] .cs-section a.read:hover {
  background: #000 !important;
  box-shadow: 0 1px 2px rgba(28, 26, 25, .2), 0 12px 28px rgba(28, 26, 25, .2) !important;
}
html[data-theme="light"] .tenet-panel .read { padding: .7rem 1.5rem; }

/* Section tags: small black chips, every third one ember */
html[data-theme="light"] .cs-section > h2, html[data-theme="light"] .side-h,
html[data-theme="light"] .sheet .spread > h2, html[data-theme="light"] .spreads .spread > h2 {
  background: #1c1a19 !important; color: #fff !important; border-radius: 6px !important;
}
html[data-theme="light"] .cs-section:nth-of-type(3n+2) > h2,
html[data-theme="light"] .sheet .spread:nth-of-type(3n+2) > h2 { background: var(--ember) !important; color: #fff !important; }

/* Cards: white with soft shadow instead of a hard edge */
html[data-theme="light"] .stat, html[data-theme="light"] .hang, html[data-theme="light"] .steps,
html[data-theme="light"] .tile, html[data-theme="light"] .cs-slide,
html[data-theme="light"] .sheet > .spread, html[data-theme="light"] .sheet > .cs-slide,
html[data-theme="light"] .sheet > .collage, html[data-theme="light"] .spread,
html[data-theme="light"] .tl-band, html[data-theme="light"] .tl-band + .tl-band {
  box-shadow: inset 0 0 0 1px var(--edge), var(--soft-shadow) !important;
}

/* Accordion: open panel gets the lavender + ember clouds */
html[data-theme="light"] .tenet { background: var(--card-2); }
html[data-theme="light"] .tenet.is-open { background: #fff; }
html[data-theme="light"] .tenet::before {
  background:
    radial-gradient(55% 60% at 102% 92%, rgba(229, 88, 43, .26) 0%, rgba(229, 88, 43, .08) 45%, transparent 70%),
    radial-gradient(50% 55% at 38% 112%, rgba(165, 150, 255, .28) 0%, rgba(165, 150, 255, .08) 45%, transparent 70%);
}
html[data-theme="light"] .tenets.is-compact { background: rgba(250, 248, 245, .9); }

/* Case-study hero: same two clouds */
html[data-theme="light"] .cs-hero {
  background:
    radial-gradient(45% 80% at 100% 10%, rgba(229, 88, 43, .22) 0%, transparent 65%),
    radial-gradient(40% 70% at 0% 100%, rgba(165, 150, 255, .22) 0%, transparent 65%),
    linear-gradient(180deg, #ffffff 0%, var(--paper) 100%) !important;
}

/* Statement slides and highlights */
html[data-theme="light"] .sheet > .cs-slide,
html[data-theme="light"] .sheet > .cs-slide:nth-of-type(3n+3) {
  background: radial-gradient(70% 120% at 0% 100%, rgba(165, 150, 255, .22) 0%, transparent 60%), #fff !important;
}
html[data-theme="light"] .sheet > .cs-slide:nth-of-type(3n+2) {
  background: radial-gradient(70% 120% at 100% 100%, rgba(229, 88, 43, .18) 0%, transparent 60%), #fff !important;
}
html[data-theme="light"] .lookback, html[data-theme="light"] .sheet > .spread.lookback {
  background: radial-gradient(80% 140% at 100% 0%, rgba(229, 88, 43, .55), transparent 60%), var(--ember-soft) !important;
}
html[data-theme="light"] .lookback, html[data-theme="light"] .lookback * { color: #1c1a19 !important; -webkit-text-fill-color: #1c1a19; }
html[data-theme="light"] .target--hit { background: rgba(229, 88, 43, .1); }
html[data-theme="light"] .decision .options .chosen { background: rgba(229, 88, 43, .08) !important; box-shadow: inset 0 0 0 1px var(--ember) !important; }
html[data-theme="light"] .tenet-panel h1 mark, html[data-theme="light"] .intro-quote mark { background: var(--ember); color: #fff; -webkit-text-fill-color: #fff; }

/* Flow diagram key node and streak */
html[data-theme="light"] .flow-track::after { background: linear-gradient(90deg, transparent, var(--lavender), var(--ember), transparent); }
html[data-theme="light"] .flow-step.is-key .flow-node {
  background: radial-gradient(circle at 50% 35%, #fff1ea, #ffffff 72%);
  box-shadow: inset 0 0 0 1px var(--ember), 0 0 0 6px rgba(229, 88, 43, .1), 0 0 28px rgba(229, 88, 43, .25);
}

/* Links */
html[data-theme="light"] main a:not(.read):not(.cta) { text-decoration-color: var(--ember); }
html[data-theme="light"] main a:not(.read):not(.cta):hover,
html[data-theme="light"] .site-footer a:hover { color: var(--lime-ink); }
html[data-theme="light"] ::selection { background: var(--ember); color: #fff; }
html[data-theme="light"] .tenet::before {
  background:
    radial-gradient(48% 62% at 104% 88%, rgba(229, 88, 43, .46) 0%, rgba(240, 130, 90, .18) 42%, transparent 70%),
    radial-gradient(46% 58% at 30% 115%, rgba(165, 150, 255, .48) 0%, rgba(180, 168, 255, .16) 42%, transparent 70%);
}
html[data-theme="light"] .cs-hero {
  background:
    radial-gradient(45% 85% at 102% 8%, rgba(229, 88, 43, .34) 0%, rgba(240, 130, 90, .1) 45%, transparent 68%),
    radial-gradient(40% 75% at -2% 100%, rgba(165, 150, 255, .36) 0%, rgba(180, 168, 255, .1) 45%, transparent 68%),
    linear-gradient(180deg, #ffffff 0%, var(--paper) 100%) !important;
}

/* Workflow card in day mode: the diagram is a dark artwork, so the card
   takes its fill and reads as one dark card instead of a strip on white */
html[data-theme="light"] .tenet-panel .panel-media.diagram-card {
  background: #1c1e20; border-color: rgba(15, 17, 19, .2) !important;
}

/* =====================================================================
   WHAT I BRING (About panel): six strengths as small cards, line icons
   in the accent colour (lime at night, ember by day).
   ===================================================================== */
.bring { margin: 0 0 2rem; }
.bring h3 { margin: 0 0 .4rem; font-family: var(--display); font-weight: 700; font-size: clamp(1.3rem, 2vw, 1.7rem); letter-spacing: -.03em; text-transform: uppercase; color: var(--ink); }
.bring-lede { margin: 0 0 1.25rem; max-width: 52ch !important; color: var(--ink-soft); }
.bring-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; }
.bring-list li {
  display: grid; grid-template-columns: auto 1fr; column-gap: .75rem; row-gap: .2rem; align-items: start;
  padding: 1rem 1.1rem; border-radius: 16px; background: var(--card);
  box-shadow: inset 0 0 0 1px var(--edge);
}
.bring-list svg {
  grid-row: span 2; width: 2rem; height: 2rem; padding: .4rem; border-radius: 50%;
  fill: none; stroke: var(--lime); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
  background: color-mix(in srgb, var(--lime) 12%, transparent);
}
.bring-list b { font-weight: 600; color: var(--ink); font-size: .95rem; }
.bring-list span { font-size: .88rem; line-height: 1.45; color: var(--ink-soft); }
html[data-theme="light"] .bring-list li { box-shadow: inset 0 0 0 1px var(--edge), var(--soft-shadow); }
@media (max-width: 1100px) { .bring-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .bring-list { grid-template-columns: 1fr; } }

/* =====================================================================
   VOYAGER TIER TRACK: the dashboard's tier track rebuilt in the site's
   style, with a rocket you can fly between tiers (tier-track.js).
   --at is the current stop (0–4); stops sit at 0, 25, 50, 75, 100%.
   ===================================================================== */
.trk {
  --at: 1; --trk-tone: #3d7bff;
  position: relative; overflow: hidden;
  padding: clamp(1.25rem, 3vw, 2.25rem) clamp(1.25rem, 3vw, 2.5rem) 1.25rem;
  margin-bottom: 1rem;
  border-radius: var(--radius);
  background:
    radial-gradient(60% 120% at calc(var(--at) * 25%) 120%, color-mix(in srgb, var(--trk-tone) 26%, transparent) 0%, transparent 70%),
    var(--card);
  box-shadow: inset 0 0 0 1px var(--edge);
  transition: background .6s ease;
}
.trk-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem 2rem; flex-wrap: wrap; }
.trk-k { margin: 0; font: var(--label); text-transform: uppercase; color: var(--ink-faint); }
.trk-readout { display: grid; justify-items: end; gap: .2rem; text-align: right; min-height: 4.6rem; }
.trk-name {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--display); font-weight: 700; text-transform: uppercase;
  font-size: clamp(1.5rem, 3vw, 2.25rem); line-height: 1; letter-spacing: -.03em; color: var(--ink);
}
.trk-name::before {
  content: ""; width: .5em; height: .5em; border-radius: 50%;
  background: var(--trk-tone); box-shadow: 0 0 14px var(--trk-tone);
}
.trk-spend { font: var(--label); text-transform: uppercase; color: var(--ink-faint); }
.trk-perk { font-size: .95rem; color: var(--ink-soft); }

/* Rail: the line, the fill up to the current tier, the stops and the rocket */
.trk-rail { position: relative; height: 6.5rem; margin: 1.5rem clamp(2.5rem, 6vw, 4rem) 0; }
.trk-line { position: absolute; left: 0; right: 0; top: 2.25rem; height: 2px; border-radius: 2px; background: var(--edge-strong); }
.trk-fill {
  height: 100%; width: calc(var(--at) * 25%); border-radius: inherit;
  background: linear-gradient(90deg, color-mix(in srgb, var(--trk-tone) 40%, transparent), var(--trk-tone));
  box-shadow: 0 0 12px color-mix(in srgb, var(--trk-tone) 60%, transparent);
  transition: width .8s cubic-bezier(.6, 0, .3, 1), background .6s ease;
}
.trk-stops { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; }
.trk-stops li { position: absolute; top: 0; transform: translateX(-50%); }
.trk-stops li:nth-child(1) { left: 0; }
.trk-stops li:nth-child(2) { left: 25%; }
.trk-stops li:nth-child(3) { left: 50%; }
.trk-stops li:nth-child(4) { left: 75%; }
.trk-stops li:nth-child(5) { left: 100%; }
.trk-stop {
  all: unset; box-sizing: border-box; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 1.6rem;
  padding: 1.75rem .5rem .25rem; border-radius: 10px;
}
.trk-stop:focus-visible { outline: 2px solid var(--trk-tone); outline-offset: 2px; }
.trk-stop i {
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--card); box-shadow: inset 0 0 0 2px var(--edge-strong);
  transition: transform .3s ease, background .3s ease, box-shadow .3s ease;
}
.trk-stop span {
  font: 600 .72rem/1.2 var(--mono); text-transform: uppercase; letter-spacing: .02em;
  color: var(--ink-faint); white-space: nowrap; transition: color .3s ease;
}
.trk-stop:hover span, .trk-stop[aria-pressed="true"] span { color: var(--ink); }
.trk-stop:hover i { transform: scale(1.25); }
.trk-stop.is-passed i { background: var(--tone); box-shadow: none; }
.trk-stop[aria-pressed="true"] i { opacity: 0; } /* the rocket sits here */

/* The rocket: rides the line to the current tier, nose to the right */
.trk-rocket {
  all: unset; box-sizing: border-box; cursor: pointer;
  position: absolute; top: 2.25rem; left: calc(var(--at) * 25%); z-index: 2;
  width: 4.25rem; height: 4.25rem; margin: -2.125rem 0 0 -2.125rem;
  display: grid; place-items: center; border-radius: 50%;
  transition: left .8s cubic-bezier(.6, 0, .3, 1);
}
.trk-rocket:focus-visible { outline: 2px solid var(--trk-tone); outline-offset: 2px; }
.trk-rocket svg { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 0 10px color-mix(in srgb, var(--trk-tone) 55%, transparent)); }
.trk-body { fill: var(--ink); }
.trk-window { fill: var(--trk-tone); stroke: var(--card); stroke-width: 1.5; transition: fill .6s ease; }
.trk-fin { fill: var(--trk-tone); transition: fill .6s ease; }
.trk-flame { fill: #ff9a3c; opacity: 0; transform-origin: 12px 24px; transform: scaleX(.4); transition: opacity .2s ease, transform .2s ease; }
.trk-rocket:hover .trk-flame { opacity: .7; transform: scaleX(.8); }
.trk.is-flying .trk-flame { opacity: 1; transform: scaleX(1.6); }
@media (prefers-reduced-motion: no-preference) {
  .trk-rocket svg { animation: trk-bob 2.6s ease-in-out infinite; }
  .trk.is-flying .trk-rocket svg { animation: trk-thrust .9s ease-out; }
  .trk.is-flying .trk-flame { animation: trk-flicker .12s linear infinite alternate; }
}
@keyframes trk-bob { 50% { transform: translateY(-3px); } }
@keyframes trk-thrust { 0% { transform: rotate(0); } 25% { transform: translateY(-6px) rotate(-8deg); } 100% { transform: rotate(0); } }
@keyframes trk-flicker { to { transform: scaleX(2); opacity: .75; } }
@media (prefers-reduced-motion: reduce) { .trk-fill, .trk-rocket, .trk { transition: none; } }

.trk-hint { margin: .25rem 0 0; font-size: .82rem; color: var(--ink-faint); }
.trk-figure .trk-shot { margin-top: 0; }

/* Narrow: tighter rail, tier names drop to short labels via smaller type */
@media (max-width: 700px) {
  .trk-readout { justify-items: start; text-align: left; }
  .trk-rail { margin-inline: 1.75rem; }
  .trk-stop span { font-size: .58rem; white-space: normal; text-align: center; width: 4.5rem; }
}

/* =====================================================================
   MENTORSHIP BOARD (Homebot): the old board screenshot rebuilt as cards.
   "How it works" on the left, the eight weekly challenges in a grid,
   each card tinted by a project colour; the Homebot one sits on ink.
   ===================================================================== */
.board-intro { max-width: 46rem; }
.board {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: .75rem;
  margin: 2rem 0 0;
}
.board figcaption { grid-column: 1 / -1; }
.board-how {
  padding: 1.5rem; border-radius: var(--radius);
  background: radial-gradient(120% 60% at 0% 0%, color-mix(in srgb, var(--lime) 14%, transparent), transparent 60%), var(--card-2, var(--card));
  box-shadow: inset 0 0 0 1px var(--edge);
}
.board-k { margin: 0 0 .6rem; font: var(--label); text-transform: uppercase; color: var(--ink-faint); }
.board-lede { margin: 0 0 1rem; font-size: .95rem; color: var(--ink); }
.board-steps { margin: 0 0 1.25rem; padding: 0; list-style: none; counter-reset: s; display: grid; gap: .6rem; }
.board-steps li { counter-increment: s; display: grid; grid-template-columns: 1.6rem 1fr; gap: .5rem; font-size: .85rem; line-height: 1.4; color: var(--ink-soft); }
.board-steps li::before {
  content: counter(s); display: grid; place-items: center; width: 1.4rem; height: 1.4rem; border-radius: 50%;
  font: 600 .68rem/1 var(--mono); color: var(--ink); box-shadow: inset 0 0 0 1px var(--edge-strong);
}
.board-goals { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; }
.board-goals li {
  padding: .3em .7em; border-radius: 999px; font-size: .78rem; color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--edge-strong);
}
.board-grid { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.board-card {
  --c: var(--lime);
  position: relative; padding: 1.15rem 1.25rem 1.2rem 1.4rem; border-radius: 16px;
  background: radial-gradient(90% 120% at 100% 0%, color-mix(in srgb, var(--c) 16%, transparent), transparent 60%), var(--card);
  box-shadow: inset 0 0 0 1px var(--edge);
}
.board-card::before {
  content: ""; position: absolute; left: 0; top: 1.1rem; bottom: 1.1rem; width: 3px; border-radius: 0 3px 3px 0; background: var(--c);
}
.board-card:nth-child(4n+2) { --c: var(--cyan, #3ee0ff); }
.board-card:nth-child(4n+3) { --c: var(--orange, #ff8a1f); }
.board-card:nth-child(4n+4) { --c: var(--violet, #8f7bff); }
.board-card b {
  display: block; margin-bottom: .35rem;
  font-family: var(--display); font-weight: 700; font-size: 1.05rem; text-transform: uppercase; letter-spacing: -.02em; color: var(--ink);
}
.board-card p { margin: 0; font-size: .85rem; line-height: 1.45; color: var(--ink-soft); }
.board-card.is-home { --c: var(--pink, #ed1572); }
.board-card.is-home b::after {
  content: "Homebot"; margin-left: .5rem; padding: .15em .45em; border-radius: 5px; vertical-align: .2em;
  font: 500 .6rem/1.2 var(--mono); letter-spacing: .02em; color: #fff; background: var(--pink, #ed1572);
}
@media (max-width: 900px) { .board { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .board-grid { grid-template-columns: 1fr; } }
.board .board-goals { padding: 0 !important; margin: 0 !important; }

/* Voyager tier chart: one ramp in the case study's accent instead of four
   unrelated brand colours. The tiers are a rising scale, so each bar is a
   stronger mix of the Voyager tone, ending at full strength for Galactic. */
.steps-plot .step { --tier-c: var(--c-voyager, #3ee0ff); color: var(--ink); }
.steps-plot .step:nth-child(1) { background: color-mix(in srgb, var(--tier-c) 22%, var(--card)); }
.steps-plot .step:nth-child(2) { background: color-mix(in srgb, var(--tier-c) 42%, var(--card)); }
.steps-plot .step:nth-child(3) { background: color-mix(in srgb, var(--tier-c) 68%, var(--card)); }
.steps-plot .step:nth-child(4) {
  background: var(--tier-c); color: #0f1113;
  box-shadow: 0 0 28px color-mix(in srgb, var(--tier-c) 35%, transparent);
}
.steps-plot .step:nth-child(3) { color: #0f1113; }

/* =====================================================================
   TOGGLE, ILLUSTRATED: the day/night switch redrawn in Sarah's
   illustration style (bold ink outlines, flat fills, no gradients or
   glows). The scenes are inline SVG backgrounds, so theme.js is untouched.
   ===================================================================== */
.theme-toggle {
  --tt-ink: #1c1a19;
  border: 0; box-sizing: border-box;
  box-shadow: none !important;
  background: #2b3270 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 38'%3E%3Cg fill='%23fff3c8'%3E%3Cpath d='M12 9l1.3 3.2 3.2 1.3-3.2 1.3L12 18l-1.3-3.2L7.5 13.5l3.2-1.3z'/%3E%3Cpath d='M27 21l1 2.4 2.4 1-2.4 1-1 2.4-1-2.4-2.4-1 2.4-1z'/%3E%3Ccircle cx='22' cy='9' r='1.1'/%3E%3Ccircle cx='9' cy='27' r='1'/%3E%3Ccircle cx='33' cy='12' r='.9'/%3E%3C/g%3E%3C/svg%3E") center / cover no-repeat !important;
}
html[data-theme="light"] .theme-toggle, .theme-toggle[aria-checked="true"] {
  background: #9fd3f2 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 38'%3E%3Cpath d='M-4 40c10-11 30-14 46-10s28 3 34 1v12H-4z' fill='%239bd17f'/%3E%3Cpath d='M41 15c0-2.6 2.2-4.4 4.6-4 1-2.6 3.8-3.8 6.4-2.6 1.6-1.6 4.6-1.4 5.8.8 2.6-.2 4.2 1.8 4 4 1.6.4 2.4 2.2 1.6 3.6H42.6c-1.4-.2-2-1-1.6-1.8z' fill='%23fff'/%3E%3Cpath d='M51 25c0-1.8 1.6-3 3.2-2.6.8-1.6 2.8-2.2 4.4-1.2 1.4-.8 3.2 0 3.6 1.6 1.4.2 2.2 1.4 1.8 2.6H52c-.8-.1-1.2-.2-1-.4z' fill='%23fff'/%3E%3C/svg%3E") center / cover no-repeat !important;
}
/* the old gradient scene pieces give way to the drawings */
.theme-toggle .tt-sky { display: none; }
.theme-toggle .tt-crater, .theme-toggle .tt-knob::before, .theme-toggle .tt-knob::after { display: none; }

/* Knob: a flat moon with outlined craters, or a sun with ink rays */
.theme-toggle .tt-knob {
  --tt-pad: .12rem;
  top: var(--tt-pad); left: var(--tt-pad);
  width: calc(var(--tt-h) - var(--tt-pad) * 2); height: calc(var(--tt-h) - var(--tt-pad) * 2);
  transform: translateX(calc(var(--tt-w) - var(--tt-h)));
  box-shadow: none !important; filter: none !important;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Ccircle cx='20' cy='20' r='17' fill='%23f6eed6'/%3E%3Cg fill='%23ddd2b4'%3E%3Ccircle cx='24.5' cy='14' r='3.6'/%3E%3Ccircle cx='14' cy='18.5' r='2.3'/%3E%3Ccircle cx='26' cy='23.5' r='1.6'/%3E%3Ccircle cx='15.5' cy='27' r='3'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat !important;
}
.theme-toggle[aria-checked="true"] .tt-knob {
  transform: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cg stroke='%23f2a516' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M20 1.5v4M20 34.5v4M1.5 20h4M34.5 20h4M6.9 6.9l2.8 2.8M30.3 30.3l2.8 2.8M6.9 33.1l2.8-2.8M30.3 9.7l2.8-2.8'/%3E%3C/g%3E%3Ccircle cx='20' cy='20' r='12' fill='%23ffcd3c'/%3E%3C/svg%3E") center / contain no-repeat !important;
}
.theme-toggle:hover .tt-knob { filter: none !important; transform: translateX(calc(var(--tt-w) - var(--tt-h))) rotate(-12deg); }
.theme-toggle[aria-checked="true"]:hover .tt-knob { transform: rotate(25deg); }
.theme-toggle:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; }
.site-header .name {
  box-sizing: content-box; align-self: center;
  background-clip: content-box;
  -webkit-mask-origin: content-box; mask-origin: content-box;
  -webkit-mask-clip: content-box; mask-clip: content-box;
}
.tenet--intro .tenet-panel h1, .tenet-panel h2, .cs-hero h1 { font-weight: 650; }
.site-header .name { width: 4.5rem; height: 3.35rem; }

/* =====================================================================
   DAY CLOUDS IN EACH PROJECT'S COLOUR: the open panel's glow (and each
   case study's hero) uses that project's own accent, e.g. Homebot pink,
   Voyager cyan, Other work orange. Intro keeps the ember + lavender pair.
   Designing in code gets a real green in day mode (lime is remapped to
   ember there), and About gets lavender instead of a near-invisible sand.
   ===================================================================== */
html[data-theme="light"] {
  --c-agentic: #8cc63f;
  --c-about: #a596ff;
}
html[data-theme="light"] .tenet:not(.tenet--intro)::before {
  background:
    radial-gradient(48% 62% at 104% 88%, color-mix(in srgb, var(--tone) 48%, transparent) 0%, color-mix(in srgb, var(--tone) 16%, transparent) 42%, transparent 70%),
    radial-gradient(46% 58% at 30% 115%, color-mix(in srgb, var(--tone) 30%, transparent) 0%, color-mix(in srgb, var(--tone) 10%, transparent) 42%, transparent 70%);
}
html[data-theme="light"] .cs-hero:not([style*="--c-intro"]) {
  background:
    radial-gradient(45% 85% at 102% 8%, color-mix(in srgb, var(--tone, var(--ember)) 38%, transparent) 0%, color-mix(in srgb, var(--tone, var(--ember)) 12%, transparent) 45%, transparent 68%),
    radial-gradient(40% 75% at -2% 100%, color-mix(in srgb, var(--tone, var(--lavender)) 24%, transparent) 0%, transparent 65%),
    linear-gradient(180deg, #ffffff 0%, var(--paper) 100%) !important;
}
/* The thin rule and floor glow under the compact tab follow the tone too */
html[data-theme="light"] .tenets.is-compact .tenet.is-open { box-shadow: inset 0 -2px 0 var(--tone); }

/* =====================================================================
   NIGHT CASE STUDIES, TEAL: case studies in night mode move from
   near-black + neon lime to a deep teal-slate with soft mint (after
   Sarah's dark references): glassy cards with mint-tinted hairlines,
   outlined sentence-case pill tags, letter-spaced caps labels.
   Scoped to case study pages and the inline case study on the homepage.
   ===================================================================== */
html:not([data-theme="light"]) body:has(.cs-hero),
html:not([data-theme="light"]) :is(body:has(.cs-hero) main, .detail) {
  --paper: #0e1a1f;
  --card: #15242b;
  --card-2: #122027;
  --ink: #eef5f1;
  --ink-soft: #a8bcb5;
  --ink-faint: #74898a;
  --rule: rgba(150, 220, 190, .1);
  --edge: rgba(150, 220, 190, .14);
  --edge-strong: rgba(150, 220, 190, .28);
  --lime: #86e3a0;
  --lime-deep: #58b876;
  --on-lime: #0c1a13;
  --mint: #86e3a0;
  --mint-soft: rgba(134, 227, 160, .12);
}
html:not([data-theme="light"]) body:has(.cs-hero),
html:not([data-theme="light"]) body:has(.cs-hero) .site-footer { background: #0e1a1f; }
html:not([data-theme="light"]) body:has(.cs-hero) .site-header { background: rgba(14, 26, 31, .86); }
html:not([data-theme="light"]) :is(body:has(.cs-hero) main, .detail) {
  background:
    radial-gradient(80% 50% at 85% 0%, rgba(70, 150, 140, .16), transparent 60%),
    radial-gradient(60% 40% at 0% 60%, rgba(134, 227, 160, .05), transparent 70%),
    #0e1a1f;
}

/* Hero: teal haze with a mint glint instead of the neon wash */
html:not([data-theme="light"]) :is(body:has(.cs-hero) main, .detail) .cs-hero {
  background:
    radial-gradient(70% 110% at 100% 0%, color-mix(in srgb, var(--tone, var(--mint)) 18%, transparent), transparent 55%),
    radial-gradient(50% 80% at 0% 100%, rgba(134, 227, 160, .08), transparent 60%),
    linear-gradient(180deg, #13232a 0%, #0e1a1f 100%) !important;
}

/* Glassy cards: a faint top sheen and a mint-tinted hairline */
html:not([data-theme="light"]) :is(body:has(.cs-hero) main, .detail) :is(.sheet > .spread, .stat, .tile, .board-how, .board-card, .trk, .steps, .decision .options div, .hang) {
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .035), transparent 40%) !important;
  background-color: var(--card) !important;
  box-shadow: inset 0 0 0 1px var(--edge), 0 24px 50px rgba(0, 0, 0, .28) !important;
}
html:not([data-theme="light"]) :is(body:has(.cs-hero) main, .detail) .board-card {
  background-image: radial-gradient(90% 120% at 100% 0%, color-mix(in srgb, var(--c) 12%, transparent), transparent 60%), linear-gradient(180deg, rgba(255, 255, 255, .035), transparent 40%) !important;
}

/* Section tags: outlined pills in sentence case, mint by default,
   neutral on alternate sections (like the references' grey chips) */
html:not([data-theme="light"]) :is(body:has(.cs-hero) main, .detail) :is(.cs-section > h2, .side-h, .sheet .spread > h2, .spreads .spread > h2) {
  background: var(--mint-soft) !important; color: #a9f0be !important;
  box-shadow: inset 0 0 0 1px rgba(134, 227, 160, .45);
  border-radius: 999px !important; padding: .35em .85em;
  font: 600 .8rem/1.2 var(--font); text-transform: none; letter-spacing: 0;
}
html:not([data-theme="light"]) :is(body:has(.cs-hero) main, .detail) :is(.cs-section:nth-of-type(3n+2) > h2, .sheet .spread:nth-of-type(3n+2) > h2) {
  background: rgba(255, 255, 255, .05) !important; color: var(--ink) !important;
  box-shadow: inset 0 0 0 1px var(--edge-strong);
}

/* Small labels: letter-spaced caps, mint for the active ones */
html:not([data-theme="light"]) :is(body:has(.cs-hero) main, .detail) :is(.stat-k, .facts dt, .board-k, .trk-k) {
  font-family: var(--font); font-weight: 700; font-size: .68rem; letter-spacing: .14em; text-transform: uppercase;
}
html:not([data-theme="light"]) :is(body:has(.cs-hero) main, .detail) .cs-hero .eyebrow { letter-spacing: .14em; font-weight: 700; }

/* Statement slides: deep teal panels with a mint glow */
html:not([data-theme="light"]) :is(body:has(.cs-hero) main, .detail) :is(.sheet > .cs-slide, .sheet > .cs-slide:nth-of-type(3n+3)) {
  background: radial-gradient(70% 120% at 0% 100%, rgba(134, 227, 160, .14), transparent 60%), #13232a !important;
  box-shadow: inset 0 0 0 1px var(--edge) !important;
}
html:not([data-theme="light"]) :is(body:has(.cs-hero) main, .detail) .sheet > .cs-slide:nth-of-type(3n+2) {
  background: radial-gradient(70% 120% at 100% 100%, rgba(70, 150, 140, .28), transparent 60%), #13232a !important;
}

/* Step numbers on the board become lettered-chip style circles */
html:not([data-theme="light"]) :is(body:has(.cs-hero) main, .detail) .board-steps li::before {
  background: rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 1px var(--edge-strong); color: var(--ink);
}
html:not([data-theme="light"]) :is(body:has(.cs-hero) main, .detail) .board-steps li:first-child::before {
  background: var(--mint); color: var(--on-lime); box-shadow: none;
}
html:not([data-theme="light"]) :is(body:has(.cs-hero) main, .detail) .board-goals li {
  background: var(--mint-soft); color: #a9f0be; box-shadow: inset 0 0 0 1px rgba(134, 227, 160, .4);
}

/* =====================================================================
   WORKFLOW CARD, DAY VERSION: index.html carries both artworks; night
   shows the dark one, day shows workflow-light.svg (white card, green
   Build step to match the Designing in code tab). Overrides the dark
   card fill in day mode.
   ===================================================================== */
.tenet-panel .panel-media.diagram-card--day { display: none; }
html[data-theme="light"] .tenet-panel .panel-media.diagram-card--night { display: none; }
html[data-theme="light"] .tenet-panel .panel-media.diagram-card--day { display: block; }
html[data-theme="light"] .tenet-panel .panel-media.diagram-card--day {
  background: #ffffff !important;
  border: 0 !important;
  box-shadow: 0 0 0 1px rgba(28, 26, 25, .08), 0 1px 2px rgba(28, 26, 25, .04), 0 20px 44px rgba(28, 26, 25, .10), 0 0 60px rgba(140, 198, 63, .14) !important;
}
@media (max-width: 1000px) { html[data-theme="light"] .tenet-panel .panel-media.diagram-card--day { display: none; } }

/* Designing in code, day mode: the flow diagram's highlight is green,
   matching the tab, the homepage card and the hero clouds */
html[data-theme="light"] { --code-green: #6aa513; }
html[data-theme="light"] .flow-track::after { background: linear-gradient(90deg, transparent, var(--code-green), transparent); }
html[data-theme="light"] .flow-step.is-key .flow-node {
  background: radial-gradient(circle at 50% 35%, #f1fbe2, #ffffff 72%);
  box-shadow: inset 0 0 0 1px var(--code-green), 0 0 0 6px rgba(106, 165, 19, .12), 0 0 28px rgba(106, 165, 19, .28);
}
html[data-theme="light"] .flow-step.is-key .flow-node svg,
html[data-theme="light"] .flow-step.is-end .flow-node svg { stroke: var(--code-green); }

/* =====================================================================
   HOVER GLOWS: cards pick up an accent edge and a soft outer glow on
   hover, like a lit bento grid. --glow is the card's own colour where
   it has one, else the theme accent (lime by night, ember by day, mint
   on night case studies).
   ===================================================================== */
:is(.bring-list li, .tl-band, .stat, .tile, .board-card, .decision .options div) {
  --glow: var(--lime);
  transition: box-shadow .35s ease, transform .35s ease, border-color .35s ease;
}
.tl-band { --glow: var(--band, var(--lime)); }
.board-card { --glow: var(--c, var(--lime)); }
:is(.bring-list li, .tl-band, .stat, .tile, .board-card, .decision .options div):hover {
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--glow) 70%, transparent),
    0 0 0 1px color-mix(in srgb, var(--glow) 25%, transparent),
    0 10px 40px -6px color-mix(in srgb, var(--glow) 38%, transparent) !important;
  transform: translateY(-2px);
}
/* Closed project tabs: a faint glow in the project's colour */
.tenet:not(.is-open):hover::before { opacity: .55; }
.tenet:not(.is-open):hover .tenet-tab span::after { box-shadow: 0 0 14px 2px var(--tone); }
@media (prefers-reduced-motion: reduce) {
  :is(.bring-list li, .tl-band, .stat, .tile, .board-card, .decision .options div) { transition: none; }
  :is(.bring-list li, .tl-band, .stat, .tile, .board-card, .decision .options div):hover { transform: none; }
}

/* =====================================================================
   FLOW CARD (homepage, Designing in code): the workflow as a live
   component instead of an image. flow-card.js moves .is-active along the
   steps and sets --p (0..1) for the line fill. Lime at night, the
   project green by day. Sizes scale with the card (container units).
   ===================================================================== */
.tenet-panel .panel-media.flow-card {
  --fc-accent: var(--lime);
  --fc-glow: rgba(209, 254, 23, .35);
  container-type: inline-size;
  top: 50%; bottom: auto; margin: 0;
  width: min(42%, 34rem); height: auto; aspect-ratio: auto !important;
  padding: 7cqi 4cqi 5cqi; box-sizing: border-box;
  background: var(--card) !important; border: 0 !important; border-radius: 18px !important;
  box-shadow: inset 0 0 0 1px var(--edge), 0 24px 60px rgba(0, 0, 0, .45) !important;
  transform: translateY(-50%) rotate(2deg);
}
.tenet.is-open .panel-media.flow-card { animation: pc-lift .6s var(--ease) .25s both; }
html[data-theme="light"] .tenet-panel .panel-media.flow-card {
  --fc-accent: var(--code-green, #6aa513);
  --fc-glow: rgba(106, 165, 19, .28);
  background: #fff !important;
  box-shadow: 0 0 0 1px rgba(28, 26, 25, .08), 0 20px 44px rgba(28, 26, 25, .10), 0 0 60px rgba(140, 198, 63, .14) !important;
}

.fc-track {
  list-style: none; margin: 0; padding: 0; position: relative;
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
}
.fc-line {
  position: absolute; top: 6.5cqi; left: 10%; right: 10%; height: 1px;
  background: var(--edge-strong);
}
.fc-fill {
  position: absolute; inset: 0 auto 0 0; height: 2px; margin-top: -.5px;
  width: calc(var(--p, 0) * 100%);
  background: linear-gradient(90deg, color-mix(in srgb, var(--fc-accent) 40%, transparent), var(--fc-accent));
  box-shadow: 0 0 10px var(--fc-glow);
  transition: width .7s var(--ease);
}
.fc-step {
  all: unset; box-sizing: border-box; cursor: pointer; width: 100%;
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: .4cqi;
  position: relative; z-index: 1;
}
.fc-node {
  width: 13cqi; height: 13cqi; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 50% 30%, #23262a, #121416 70%);
  box-shadow: inset 0 0 0 1px var(--edge), 0 6px 18px rgba(0, 0, 0, .4);
  transition: transform .35s var(--ease), box-shadow .35s ease, background .35s ease;
}
.fc-node svg {
  width: 42%; height: 42%; fill: none; stroke: var(--ink); stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round; transition: stroke .3s ease;
}
.fc-step b { margin-top: 2.2cqi; font-family: var(--display); font-weight: 650; font-size: 3.6cqi; letter-spacing: -.02em; color: var(--ink-soft); transition: color .3s ease; }
.fc-step small { font-size: 2.3cqi; color: var(--ink-faint); }
.fc-step.is-done .fc-node { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fc-accent) 45%, transparent), 0 6px 18px rgba(0, 0, 0, .35); }
.fc-step.is-done .fc-node svg { stroke: color-mix(in srgb, var(--fc-accent) 75%, var(--ink)); }
.fc-step.is-active .fc-node {
  transform: scale(1.12);
  box-shadow: inset 0 0 0 1.5px var(--fc-accent), 0 0 0 1.4cqi color-mix(in srgb, var(--fc-accent) 10%, transparent), 0 0 28px var(--fc-glow);
}
.fc-step.is-active .fc-node svg { stroke: var(--fc-accent); stroke-width: 2.1; }
.fc-step.is-active b { color: var(--ink); }
.fc-step:focus-visible .fc-node { outline: 2px solid var(--fc-accent); outline-offset: 3px; }
html[data-theme="light"] .fc-node {
  background: radial-gradient(circle at 50% 30%, #ffffff, #f1ede7 75%);
  box-shadow: inset 0 0 0 1px rgba(28, 26, 25, .1), 0 6px 16px rgba(28, 26, 25, .08);
}
html[data-theme="light"] .fc-step.is-active .fc-node { background: radial-gradient(circle at 50% 35%, #f1fbe2, #ffffff 72%); }
.fc-note {
  margin: 5cqi auto 0; max-width: 34em; min-height: 2.6em;
  text-align: center; font-size: 2.9cqi; line-height: 1.4; color: var(--ink-soft);
}
@media (prefers-reduced-motion: reduce) {
  .fc-fill, .fc-node, .fc-node svg, .fc-step b { transition: none; }
  .tenet.is-open .panel-media.flow-card { animation: none; }
}
.tenet-panel .panel-media.flow-card { display: block !important; }
.flow-card .fc-track { width: 100%; }
.tenet-panel .panel-media.flow-card { padding: clamp(1.4rem, 2.6vw, 2.25rem) clamp(.75rem, 1.6vw, 1.25rem) clamp(1rem, 2vw, 1.6rem) !important; }

/* =====================================================================
   TYPE + NAME (restored): friendlier pairing. Bricolage Grotesque for
   display (modern, a little quirky), Instrument Sans for text, IBM Plex
   Mono stays for small labels. Headlines in sentence case. The header
   and footer name is Sarah's script wordmark, drawn as a mask so it takes
   the theme's ink colour. Fonts load via the @import on line 1.
   ===================================================================== */
:root {
  --font: "Instrument Sans", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --display: "Bricolage Grotesque", "Instrument Sans", ui-sans-serif, system-ui, sans-serif;
}
body { font-family: var(--font); }

.tenet--intro .tenet-panel h1, .tenet-panel h2, .cs-hero h1, .cs-section h3,
.tile h2, .locked h2, .tl-name, .spread-cover h1, .decision-panel h3,
.slide-caps, .band, .bring h3, .flow-step b, .hz-ways b, .hz-stats b,
.persona-card .pc-name span, .stat b, .stat strong, .tile-stat b, .stat-n, .fc-step b {
  font-family: var(--display) !important;
  text-transform: none !important;
  font-variation-settings: "opsz" 96;
}
.tenet--intro .tenet-panel h1, .tenet-panel h2, .cs-hero h1 {
  font-weight: 650; letter-spacing: -.045em; line-height: 1;
}
.tenet--intro .tenet-panel h1 { font-size: clamp(2.6rem, 5.6vw, 5.75rem); }
.tenet-panel h2 { font-size: clamp(2rem, 4vw, 4rem); }
.cs-section h3, .tile h2, .tl-name, .decision-panel h3, .bring h3 { font-weight: 700; letter-spacing: -.035em; }
.slide-caps { font-weight: 700; letter-spacing: -.035em; line-height: 1.05; }
.intro-quote, .intro-quote span { font-family: var(--font); text-transform: none !important; }
.cs-section .big, .callout, .sheet .spread .big { font-family: var(--font); font-weight: 600; letter-spacing: -.02em; }

.tenet-tab span { font-family: var(--display) !important; text-transform: none !important; letter-spacing: -.01em !important; font-size: .9rem !important; font-weight: 600 !important; }
.tenets.is-compact .tenet-tab span { font-size: .85rem !important; }
.cs-section > h2, .side-h, .sheet .spread > h2, .spreads .spread > h2 {
  font-family: var(--font) !important; text-transform: none !important; letter-spacing: 0 !important; font-weight: 600 !important; font-size: .8rem !important;
}
.site-header nav a, .tenet-panel .read, .detail-close, .tab-close { font-family: var(--font); }

/* Header name: the script wordmark (sits inside the header's padding) */
.site-header .name {
  display: block; flex: none; box-sizing: content-box; align-self: center;
  width: 4.5rem; height: 3.35rem;
  font-size: 0; color: transparent; text-decoration: none;
  background: var(--ink); background-clip: content-box;
  -webkit-mask: url("assets/sarahleach-logo.png") left center / contain no-repeat;
          mask: url("assets/sarahleach-logo.png") left center / contain no-repeat;
  -webkit-mask-origin: content-box; mask-origin: content-box;
  -webkit-mask-clip: content-box; mask-clip: content-box;
  transition: background-color .25s ease, transform .3s var(--ease);
}
.site-header .name:hover { background-color: var(--lime); transform: rotate(-3deg); }
.site-header .name:focus-visible { outline: 2px solid var(--lime); outline-offset: 4px; }

/* Footer: wordmark plus a small copyright (full text stays for screen readers) */
.site-footer > span {
  display: inline-flex; align-items: center; gap: .9rem;
  font-size: 0 !important; color: var(--ink-faint);
}
.site-footer > span::before {
  content: ""; width: 4.6rem; height: 3.4rem; background: var(--ink);
  -webkit-mask: url("assets/sarahleach-logo.png") left center / contain no-repeat;
          mask: url("assets/sarahleach-logo.png") left center / contain no-repeat;
}
.site-footer > span::after { content: "© 2026"; font: 500 .85rem/1 var(--font); letter-spacing: 0; text-transform: none; }

/* =====================================================================
   VOYAGER SCREENS, STAGED: every screenshot sits on a soft stage with
   Voyager's cyan glow (like the Other work tiles), with one rounding and
   shadow, so the screens read as part of the case study. Phones get a
   device edge. Day mode uses a light stage.
   ===================================================================== */
.cs-body figure.stage {
  --st: var(--c-voyager);
  position: relative; overflow: hidden;
  padding: clamp(1rem, 3vw, 2.5rem) clamp(1rem, 3vw, 2.5rem) clamp(.9rem, 2vw, 1.4rem);
  border-radius: 20px;
  background:
    radial-gradient(70% 80% at 50% 105%, color-mix(in srgb, var(--st) 26%, transparent) 0%, color-mix(in srgb, var(--st) 8%, transparent) 45%, transparent 72%),
    radial-gradient(40% 50% at 100% 0%, rgba(209, 254, 23, .05), transparent 70%),
    linear-gradient(180deg, #17191c 0%, #101214 100%);
  box-shadow: inset 0 0 0 1px var(--edge);
}
.cs-body figure.stage img, .sheet figure.stage img {
  border: 0 !important; border-radius: 12px !important;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .12), 0 22px 50px rgba(0, 0, 0, .5) !important;
  background: #fff;
}
.cs-body figure.stage.pair { align-items: center; gap: clamp(.75rem, 2vw, 1.5rem); }
.cs-body figure.stage.phones img {
  border-radius: 22px !important;
  box-shadow: 0 0 0 5px #24272a, 0 0 0 6px rgba(255, 255, 255, .16), 0 26px 50px rgba(0, 0, 0, .5) !important;
}
.cs-body figure.stage figcaption {
  margin-top: clamp(.9rem, 2vw, 1.3rem); text-align: center;
  font-size: .85rem; color: var(--ink-faint); max-width: 60ch; margin-inline: auto;
}
/* tall screens shown as a window: fade the cut-off bottom instead of a hard crop */
.sheet .split > div:last-child > figure.stage:not(.pair) img {
  -webkit-mask-image: linear-gradient(180deg, #000 82%, transparent);
          mask-image: linear-gradient(180deg, #000 82%, transparent);
}
html[data-theme="light"] .cs-body figure.stage {
  background:
    radial-gradient(70% 80% at 50% 105%, color-mix(in srgb, var(--st) 30%, transparent) 0%, color-mix(in srgb, var(--st) 10%, transparent) 45%, transparent 72%),
    linear-gradient(180deg, #f7f6f2 0%, #ece9e3 100%);
  box-shadow: inset 0 0 0 1px var(--edge);
}
html[data-theme="light"] .cs-body figure.stage img { box-shadow: 0 0 0 1px rgba(28, 26, 25, .08), 0 18px 40px rgba(28, 26, 25, .14) !important; }
html[data-theme="light"] .cs-body figure.stage.phones img { box-shadow: 0 0 0 5px #fff, 0 0 0 6px rgba(28, 26, 25, .12), 0 20px 40px rgba(28, 26, 25, .16) !important; }

/* Chart titles follow the new display type */
.viz-h { font-family: var(--display) !important; text-transform: none !important; letter-spacing: -.03em; font-weight: 700; }

/* =====================================================================
   VOYAGER PERSONA BOARD: the persona slide rebuilt in the site's type.
   Identity + quote, traits, three small bar charts, and needs, with the
   need that shaped Voyager highlighted. Cyan accent (Voyager).
   ===================================================================== */
.vp-persona {
  --vp: var(--c-voyager);
  margin: 0 0 1.25rem; padding: clamp(1.1rem, 2.4vw, 1.75rem);
  border-radius: 20px; background: var(--card);
  box-shadow: inset 0 0 0 1px var(--edge);
  display: grid; gap: 1.4rem;
}
html[data-theme="light"] .vp-persona { --vp: color-mix(in srgb, var(--c-voyager) 55%, #0b3a4a); box-shadow: inset 0 0 0 1px var(--edge), var(--soft-shadow); }
.vp-k { margin: 0 0 .45rem; font-family: var(--mono); font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); }
.vp-top { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 1.5rem; }
.vp-id .vp-k { color: var(--vp); }
.vp-role { margin: 0 0 .8rem; font-family: var(--display); font-weight: 700; font-size: 1.25rem; letter-spacing: -.03em; color: var(--ink); line-height: 1.15; }
.vp-id blockquote {
  margin: 0; padding-left: .9rem; border-left: 2px solid var(--vp);
  font-size: .95rem; line-height: 1.5; font-style: italic; color: var(--ink-soft);
}
.vp-traits .vp-k:not(:first-child) { margin-top: .9rem; }
.vp-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem; }
.vp-chips li { padding: .25rem .65rem; border-radius: 999px; font-size: .78rem; font-weight: 500; color: var(--ink); box-shadow: inset 0 0 0 1px var(--edge-strong); }
.vp-scale { position: relative; display: flex; justify-content: space-between; padding-top: .9rem; font-size: .7rem; color: var(--ink-faint); }
.vp-scale::before { content: ""; position: absolute; left: 0; right: 0; top: .3rem; height: 2px; border-radius: 2px; background: var(--edge-strong); }
.vp-scale i {
  position: absolute; top: 0; left: calc(var(--at) * 100%); width: .8rem; height: .8rem; margin-left: -.4rem;
  border-radius: 50%; background: var(--vp); box-shadow: 0 0 0 3px color-mix(in srgb, var(--vp) 25%, transparent), 0 0 12px color-mix(in srgb, var(--vp) 50%, transparent);
}
.vp-data { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; padding-top: 1.2rem; border-top: 1px solid var(--rule); }
.vp-bars ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.vp-bars li { display: grid; grid-template-columns: 1fr auto; column-gap: .5rem; align-items: center; font-size: .8rem; color: var(--ink); }
.vp-bars li span { grid-column: 1 / -1; margin-bottom: .2rem; }
.vp-bars li i {
  display: block; height: .45rem; border-radius: 999px; width: calc(var(--v) * 100%);
  background: linear-gradient(90deg, color-mix(in srgb, var(--vp) 45%, transparent), var(--vp));
}
.vp-bars li b { font-family: var(--mono); font-weight: 500; font-size: .72rem; color: var(--ink-faint); }
.vp-needs { padding-top: 1.2rem; border-top: 1px solid var(--rule); }
.vp-needs ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.vp-needs li { position: relative; padding: .5rem .75rem .5rem 1.6rem; border-radius: 10px; font-size: .88rem; color: var(--ink-soft); }
.vp-needs li::before { content: ""; position: absolute; left: .7rem; top: 1rem; width: 6px; height: 6px; border-radius: 50%; background: var(--edge-strong); }
.vp-needs li b { color: var(--ink); font-weight: 600; }
.vp-needs li.is-key { background: color-mix(in srgb, var(--vp) 12%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--vp) 45%, transparent); color: var(--ink); }
.vp-needs li.is-key::before { background: var(--vp); box-shadow: 0 0 8px var(--vp); }
.vp-growth { margin: .9rem 0 0; font-size: .82rem; color: var(--ink-faint); }
.vp-growth b { color: var(--ink); }
.vp-persona figcaption { font-size: .85rem; color: var(--ink-faint); margin: 0; }
@media (max-width: 700px) { .vp-top, .vp-data { grid-template-columns: 1fr; } }

/* =====================================================================
   DAY PALETTE: Marigold, Stone, Hydrangea, Cobalt, Waffle Knit, Willow,
   Wasabi. Overrides the Atelier day colours. Willow is the dark (buttons,
   tags, ink tint); Marigold the accent; each project gets its own hue.
   ===================================================================== */
html[data-theme="light"] {
  --marigold: #f5490d;
  --stone: #e2e1c9;
  --hydrangea: #ed9bf4;
  --cobalt: #457cd2;
  --waffle: #154ca4;
  --willow: #02513d;
  --wasabi: #329f84;

  --paper: #f6f5ec;
  --card: #fffffb;
  --card-2: #ecebd9;
  --ink: #14211c;
  --ink-soft: #46514b;
  --ink-faint: #7d857c;
  --rule: rgba(2, 81, 61, .1);
  --edge: rgba(2, 81, 61, .12);
  --edge-strong: rgba(2, 81, 61, .22);

  --ember: var(--marigold);
  --ember-soft: #fbc7a9;
  --lavender: var(--hydrangea);
  --lime: var(--marigold);
  --lime-deep: #c93a08;
  --lime-ink: #b83506;
  --on-lime: #ffffff;
  --code-green: var(--wasabi);

  --c-intro: var(--marigold);
  --c-voyager: var(--cobalt);
  --c-agentic: var(--wasabi);
  --c-homebot: var(--hydrangea);
  --c-archive: var(--marigold);
  --c-illus: var(--hydrangea);
  --c-about: var(--waffle);
  --soft-shadow: 0 1px 2px rgba(2, 81, 61, .05), 0 14px 36px rgba(2, 81, 61, .08);
}
html[data-theme="light"] body {
  background:
    radial-gradient(38% 46% at -4% 72%, rgba(237, 155, 244, .32) 0%, rgba(237, 155, 244, .1) 45%, transparent 72%),
    radial-gradient(36% 44% at 104% 48%, rgba(245, 73, 13, .22) 0%, rgba(245, 73, 13, .07) 45%, transparent 72%),
    var(--paper);
  background-attachment: fixed;
}
html[data-theme="light"] .tenet--intro::before {
  background:
    radial-gradient(48% 62% at 104% 88%, rgba(245, 73, 13, .40) 0%, rgba(245, 73, 13, .14) 42%, transparent 70%),
    radial-gradient(46% 58% at 30% 115%, rgba(237, 155, 244, .52) 0%, rgba(237, 155, 244, .16) 42%, transparent 70%) !important;
}
html[data-theme="light"] .tenet--intro .tenet-panel h1,
html[data-theme="light"] .tenet-panel h2,
html[data-theme="light"] .cs-hero h1 {
  background: linear-gradient(180deg, #14211c 0%, #14211c 55%, #02513d 100%);
  -webkit-background-clip: text; background-clip: text;
}
html[data-theme="light"] .site-header { background: rgba(246, 245, 236, .85) !important; }
html[data-theme="light"] .tenets.is-compact { background: rgba(246, 245, 236, .92); }

/* Buttons and tags: Willow */
html[data-theme="light"] .site-header nav a.cta,
html[data-theme="light"] .tenet-panel .read,
html[data-theme="light"] .cs-section a.read {
  background: var(--willow) !important; color: #fff !important;
  box-shadow: 0 1px 2px rgba(2, 81, 61, .25), 0 8px 20px rgba(2, 81, 61, .18) !important;
}
html[data-theme="light"] .site-header nav a.cta:hover,
html[data-theme="light"] .tenet-panel .read:hover,
html[data-theme="light"] .cs-section a.read:hover { background: #013829 !important; }
html[data-theme="light"] .cs-section > h2, html[data-theme="light"] .side-h,
html[data-theme="light"] .sheet .spread > h2, html[data-theme="light"] .spreads .spread > h2 {
  background: var(--willow) !important; color: #fff !important;
}
html[data-theme="light"] .cs-section:nth-of-type(3n+2) > h2,
html[data-theme="light"] .sheet .spread:nth-of-type(3n+2) > h2 { background: var(--marigold) !important; }

/* Looking back: Stone with a Marigold glow */
html[data-theme="light"] .lookback, html[data-theme="light"] .sheet > .spread.lookback {
  background: radial-gradient(80% 140% at 100% 0%, rgba(245, 73, 13, .35), transparent 60%), var(--stone) !important;
}
html[data-theme="light"] .lookback, html[data-theme="light"] .lookback * { color: var(--ink) !important; -webkit-text-fill-color: var(--ink); }

/* Workflow card + flow diagram: Wasabi */
html[data-theme="light"] .tenet-panel .panel-media.flow-card {
  --fc-accent: var(--wasabi); --fc-glow: rgba(50, 159, 132, .3);
  box-shadow: 0 0 0 1px rgba(2, 81, 61, .08), 0 20px 44px rgba(2, 81, 61, .10), 0 0 60px rgba(50, 159, 132, .16) !important;
}
html[data-theme="light"] .fc-step.is-active .fc-node { background: radial-gradient(circle at 50% 35%, #e6f5f0, #ffffff 72%); }
html[data-theme="light"] .flow-step.is-key .flow-node {
  background: radial-gradient(circle at 50% 35%, #e6f5f0, #ffffff 72%);
  box-shadow: inset 0 0 0 1px var(--wasabi), 0 0 0 6px rgba(50, 159, 132, .12), 0 0 28px rgba(50, 159, 132, .28);
}
html[data-theme="light"] ::selection { background: var(--marigold); color: #fff; }

/* Voyager screens: no white backing (modal PNGs have transparent corners) */
.cs-body figure.stage img, .sheet figure.stage img { background: transparent !important; }
.cs-body figure.stage img[src$=".png"] { box-shadow: 0 22px 50px rgba(0, 0, 0, .5) !important; border-radius: 14px !important; }
html[data-theme="light"] .cs-body figure.stage img[src$=".png"] { box-shadow: 0 18px 40px rgba(2, 81, 61, .16) !important; }
.split.split--solo { grid-template-columns: minmax(0, 1fr); max-width: 52rem; }

/* =====================================================================
   PRINCIPLES: "Pocket Guide" poster grid (work/principles.html).
   Posters keep their own paper colours in both themes.
   ===================================================================== */
:root {
  --pg-paper: #f1eee8; --pg-blue: #2f4fc4; --pg-orange: #e9772f;
  --pg-beige: #e7e1d6; --pg-green: #9fcf98; --pg-salmon: #f0a091;
  --pg-yellow: #f4e46c;
}
.pg-hero h1 { max-width: 14ch; }
.pg-north {
  margin-top: clamp(2rem, 4vw, 3.5rem); max-width: 60rem;
  border-left: 3px solid var(--lime); padding-left: clamp(1rem, 2.5vw, 2rem);
}
.pg-north-label { font: var(--label); text-transform: uppercase; letter-spacing: .08em; color: var(--lime); margin: 0 0 .75rem; }
.pg-north-big { font-family: var(--font); font-weight: 600; letter-spacing: -.02em; font-size: clamp(1.4rem, 2.8vw, 2.3rem); line-height: 1.2; color: var(--ink); margin: 0 0 1rem; }
.pg-north-sub { font-size: clamp(1rem, 1.5vw, 1.2rem); line-height: 1.5; margin: 0; max-width: 48ch; }

.pg-grid {
  list-style: none; margin: 0; padding: 0 var(--gutter, 24px) clamp(3rem, 6vw, 6rem);
  display: grid; gap: clamp(12px, 1.6vw, 22px);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr));
}
.pg-card {
  position: relative; aspect-ratio: 3 / 4; padding: clamp(1.1rem, 2vw, 1.6rem);
  display: flex; flex-direction: column; justify-content: center; gap: 1.1rem;
  border-radius: 6px; overflow: hidden; color: var(--c); background: var(--bg);
  transition: transform .25s ease;
}
.pg-card:hover { transform: translateY(-4px) rotate(-.4deg); }
@media (prefers-reduced-motion: reduce) { .pg-card, .pg-card:hover { transition: none; transform: none; } }
.pg-card h2, .pg-card p { color: inherit; -webkit-text-fill-color: currentColor; margin: 0; text-transform: none; letter-spacing: normal; }
.pg-card h2 { line-height: .95; }
.pg-card p { font: 500 .88rem/1.35 var(--font); max-width: 26ch; }
.pg-num { position: absolute; top: .9rem; right: 1.1rem; font: 300 clamp(1.6rem, 2.6vw, 2.2rem)/1 var(--font); opacity: .45; }

.pg-1 { --bg: var(--pg-paper); --c: #4a7cc0; }
.pg-1 h2 { font: 700 clamp(1.9rem, 3vw, 2.5rem)/.98 var(--display); letter-spacing: -.03em; }
.pg-2 { --bg: var(--pg-blue); --c: #fff; text-align: center; align-items: center; }
.pg-2 h2 { font: 400 clamp(2.6rem, 4.6vw, 3.8rem)/.9 "Anton", var(--display); text-transform: uppercase; hyphens: manual; }
.pg-3 { --bg: var(--pg-orange); --c: #8f1f12; }
.pg-3 h2 { font: 700 clamp(2rem, 3.2vw, 2.7rem)/.95 var(--display); letter-spacing: -.03em; }
.pg-3 p { font-weight: 700; }
.pg-4 { --bg: var(--pg-beige); --c: #3b3833; font-family: "Instrument Serif", serif; }
.pg-4 h2 { font: italic 400 clamp(1.7rem, 2.6vw, 2.2rem)/1.05 "Instrument Serif", serif; display: flex; flex-direction: column; }
.pg-4 h2 span:nth-child(2) { align-self: flex-end; }
.pg-4 p { font: italic 400 1.1rem/1.3 "Instrument Serif", serif; }
.pg-5 { --bg: var(--pg-green); --c: #2f7a37; }
.pg-5 h2 { font: 500 clamp(1.8rem, 2.8vw, 2.3rem)/1 var(--font); display: flex; flex-direction: column; }
.pg-5 h2 span:nth-child(2) { padding-left: 1.4em; } .pg-5 h2 span:nth-child(3) { padding-left: 2.6em; }
.pg-5 h2 span:nth-child(4) { align-self: flex-end; } .pg-5 h2 span:nth-child(5) { padding-left: .6em; }
.pg-5 p { color: #23602b; -webkit-text-fill-color: #23602b; }
.pg-6 { --bg: var(--pg-salmon); --c: #1f1f1f; }
.pg-6 h2 { font: 800 clamp(2rem, 3.4vw, 2.9rem)/.92 var(--font); text-transform: uppercase; letter-spacing: -.04em; }
.pg-7 { --bg: var(--pg-yellow); --c: #161616; }
.pg-7 h2 { font: 700 clamp(2.4rem, 4.4vw, 3.6rem)/.95 var(--display); letter-spacing: -.04em; }
.pg-7 p { font-size: 1rem; font-weight: 600; max-width: 34ch; }
@media (min-width: 1100px) {
  .pg-grid { grid-template-columns: repeat(4, 1fr); }
  .pg-7 { grid-column: span 2; aspect-ratio: auto; }
}

/* Looking back stays the accent panel at night. The glassy-card rule above
   repainted it dark but left its dark on-accent text. */
html:not([data-theme="light"]) :is(body:has(.cs-hero) main, .detail) .sheet > .spread.lookback {
  background-image: radial-gradient(80% 140% at 100% 0%, rgba(255, 255, 255, .22), transparent 60%) !important;
  background-color: var(--lime) !important;
  box-shadow: 0 24px 50px rgba(0, 0, 0, .28) !important;
}

/* =====================================================================
   HOMEBOT FRAMEWORKS: the Research Council agenda and the two kickoff
   tools rebuilt in the site's type (the original slides were unreadable
   at panel size). Homebot accent.
   ===================================================================== */
.hb-agenda { list-style: none; margin: 1.25rem 0 0; padding: 0; display: grid; gap: .5rem; counter-reset: hb; }
.hb-agenda li {
  counter-increment: hb; display: grid; grid-template-columns: 2rem 1fr; column-gap: .75rem; align-items: baseline;
  padding: .7rem .9rem; border-radius: 12px; background: var(--card-2, rgba(255,255,255,.04));
  box-shadow: inset 0 0 0 1px var(--edge); font-size: .92rem; color: var(--ink-soft);
}
.hb-agenda li::before { content: "0" counter(hb); grid-row: span 2; font-family: var(--mono); font-size: .72rem; color: var(--c-homebot); }
.hb-agenda b { color: var(--ink); font-weight: 600; }

.hb-fw { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; margin-top: 1.5rem; }
.hb-fw-card {
  --hb: var(--c-homebot);
  margin: 0; padding: clamp(1.1rem, 2.4vw, 1.6rem); border-radius: 20px;
  background: radial-gradient(90% 60% at 100% 0%, color-mix(in srgb, var(--hb) 12%, transparent), transparent 60%), var(--card);
  box-shadow: inset 0 0 0 1px var(--edge);
  display: flex; flex-direction: column; gap: .9rem;
}
html[data-theme="light"] .hb-fw-card { --hb: color-mix(in srgb, var(--c-homebot) 60%, #5a1a5e); box-shadow: inset 0 0 0 1px var(--edge), var(--soft-shadow); }
.hb-k { margin: 0; font-family: var(--mono); font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; color: var(--hb); }
.hb-title { margin: -.4rem 0 .2rem; font-family: var(--display); font-weight: 700; font-size: 1.3rem; line-height: 1.15; letter-spacing: -.03em; color: var(--ink); }
.hb-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; counter-reset: st; }
.hb-steps li {
  counter-increment: st; display: grid; grid-template-columns: 1.6rem 6.5rem 1fr; column-gap: .6rem; align-items: baseline;
  padding: .45rem 0; border-top: 1px solid var(--rule); font-size: .86rem; color: var(--ink-soft);
}
.hb-steps li:first-child { border-top: 0; }
.hb-steps li::before { content: counter(st); font-family: var(--mono); font-size: .72rem; color: var(--hb); }
.hb-steps b { color: var(--ink); font-weight: 600; }
.hb-tip { margin: auto 0 0; padding: .6rem .8rem; border-radius: 10px; font-size: .82rem; color: var(--ink-soft); background: color-mix(in srgb, var(--hb) 10%, transparent); }
.hb-start, .hb-reframe { margin: 0; font-size: .95rem; line-height: 1.45; color: var(--ink); }
.hb-start span, .hb-reframe span { display: block; margin-bottom: .3rem; font-family: var(--mono); font-size: .66rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); }
.hb-start { padding: .8rem .9rem; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--edge-strong); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--hb) 70%, transparent); }
.hb-start span { text-decoration: none; display: block; }
.hb-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.hb-checks li {
  position: relative; padding: .6rem .8rem .6rem 2rem; border-radius: 10px; font-size: .86rem; color: var(--ink-soft);
  box-shadow: inset 0 0 0 1px var(--edge);
}
.hb-checks li::before { content: "?"; position: absolute; left: .75rem; top: .6rem; font-family: var(--mono); font-size: .8rem; font-weight: 600; color: var(--hb); }
.hb-checks li.is-ok::before { content: "\2713"; }
.hb-checks b { display: block; color: var(--ink); font-weight: 600; }
.hb-reframe { margin-top: auto; padding: .9rem 1rem; border-radius: 12px; background: color-mix(in srgb, var(--hb) 14%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--hb) 45%, transparent); font-family: var(--display); font-weight: 600; letter-spacing: -.01em; }
@media (max-width: 760px) {
  .hb-fw { grid-template-columns: 1fr; }
  .hb-steps li { grid-template-columns: 1.4rem 1fr; }
  .hb-steps li span { grid-column: 2; }
}

/* Travelers Haven tile, take two: no popup. The property list in a window,
   with the lease card (where Check Availability now comes first) lifted out.
   The source screenshot sat under a modal scrim, so both crops are lifted
   back to full brightness. */
.tile-stage--th .th-window {
  left: 9%; top: 9%; width: 44%;
  transform: rotate(-4deg); transform-origin: 50% 100%;
}
.tile-stage--th .th-window img,
html[data-theme="light"] .tile-stage--th .th-window img { filter: brightness(1.42) contrast(1.06) saturate(1.05); }
.th-lease {
  position: absolute; right: 9%; top: 20%; width: 38%; height: auto;
  border-radius: 10px; transform: rotate(3deg);
  filter: brightness(1.42) contrast(1.06);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .2), 0 30px 60px rgba(0, 0, 0, .55), 0 0 50px rgba(40, 120, 220, .35);
  transition: transform .5s var(--ease);
}
html[data-theme="light"] .th-lease { box-shadow: 0 0 0 1px rgba(15, 17, 19, .1), 0 24px 48px rgba(15, 17, 19, .2), 0 0 40px rgba(40, 120, 220, .25); }
.tile:hover .tile-stage--th .th-window { transform: rotate(-5deg) translateY(-2%); }
.tile:hover .th-lease { transform: rotate(1deg) translateY(-5%); }
@media (prefers-reduced-motion: reduce) { .th-lease { transition: none; } }

/* Tiles: no divider line between the image and the text. */
.tile .tile-img, .tile .tile-stage, .tile .shot { border-bottom: 0 !important; }
.tile-stage::after { display: none; }

/* Timeline cards: the accent bar runs the full height of the card; the
   card's rounded corners clip it. */
.tl-band::before { top: 0 !important; bottom: 0 !important; border-radius: 0 !important; }

/* Travelers Haven on the About timeline: the same staged window + lease
   card as the Other work tile, in the timeline's 16:10 frame. */
.tl-img.tile-stage--th { aspect-ratio: 16 / 10; padding: 0; }
.tl-img.tile-stage--th .th-window { left: 12%; top: 12%; width: 38%; }
.tl-img.tile-stage--th .th-lease { right: 12%; top: 16%; width: 31%; }
.tl-band:hover .tile-stage--th .th-window { transform: rotate(-5deg) translateY(-2%); }
.tl-band:hover .th-lease { transform: rotate(1deg) translateY(-5%); }

/* =====================================================================
   DAY HARMONY: one family. Each project takes its own colour from the
   day palette (no repeats), all softened to the same weight so they sit
   together on Stone. Open panels are warm paper, not white, tinted with
   their project's colour; closed tabs carry a whisper of it.
   ===================================================================== */
html[data-theme="light"] {
  --c-intro: #e8582c;   /* Marigold, softened */
  --c-voyager: #4f78c4; /* Cobalt */
  --c-agentic: #3c9a7f; /* Wasabi */
  --c-homebot: #c97ad0; /* Hydrangea, deep enough to read on cream */
  --c-archive: #2f5fae; /* Waffle Knit */
  --c-about: #1f6b52;   /* Willow, lifted */
  --c-illus: #c97ad0;
  --card: #fdfcf6;
  --card-2: #eceada;
}
html[data-theme="light"] body {
  background:
    radial-gradient(38% 46% at -4% 72%, rgba(201, 122, 208, .16) 0%, transparent 70%),
    radial-gradient(36% 44% at 104% 48%, rgba(232, 88, 44, .14) 0%, transparent 70%),
    var(--paper);
}
html[data-theme="light"] .site-header,
html[data-theme="light"] .detail-bar { background: rgba(246, 245, 236, .88) !important; }

/* Tabs: closed ones lean toward their colour; the open one is warm paper */
html[data-theme="light"] .tenet { background: color-mix(in srgb, var(--tone) 7%, var(--card-2)); }
html[data-theme="light"] .tenet.is-open { background: var(--card); }
html[data-theme="light"] .tenet.is-open::before,
html[data-theme="light"] .tenet:not(.tenet--intro).is-open::before {
  background:
    radial-gradient(55% 70% at 100% 0%, color-mix(in srgb, var(--tone) 16%, transparent) 0%, transparent 70%),
    radial-gradient(50% 60% at 100% 100%, color-mix(in srgb, var(--tone) 22%, transparent) 0%, color-mix(in srgb, var(--tone) 6%, transparent) 45%, transparent 72%) !important;
}
html[data-theme="light"] .tenet--intro.is-open::before {
  background:
    radial-gradient(48% 62% at 104% 88%, rgba(232, 88, 44, .30) 0%, rgba(232, 88, 44, .09) 42%, transparent 70%),
    radial-gradient(46% 58% at 30% 115%, rgba(201, 122, 208, .24) 0%, rgba(201, 122, 208, .07) 42%, transparent 70%) !important;
}

/* Case-study heroes: same two-corner wash in the project's colour */
html[data-theme="light"] .cs-hero:not([style*="--c-intro"]) {
  background:
    radial-gradient(45% 85% at 102% 8%, color-mix(in srgb, var(--tone, var(--c-intro)) 24%, transparent) 0%, transparent 68%),
    radial-gradient(40% 75% at -2% 100%, color-mix(in srgb, var(--tone, var(--c-intro)) 12%, transparent) 0%, transparent 65%),
    linear-gradient(180deg, var(--card) 0%, var(--paper) 100%) !important;
}

/* Travelers Haven: the list is cropped to two listings so the whole window
   sits inside the frame; its right edge fades out instead of cutting text. */
.tile-stage--th .th-window { top: 15%; }
.tl-img.tile-stage--th .th-window { top: 14%; }
.tile-stage--th .th-window img {
  -webkit-mask-image: linear-gradient(90deg, #000 82%, transparent 100%);
          mask-image: linear-gradient(90deg, #000 82%, transparent 100%);
}
.tile-stage--th .th-window { background: #eef0f2; }
/* Current page wins the lime nav highlight over the first link. */
.site-header nav:has([aria-current="page"]) a:first-child { color: var(--ink-faint); }
.site-header nav a[aria-current="page"] { color: var(--lime); }
html[data-theme="light"] .site-header nav:has([aria-current="page"]) a:first-child { color: var(--ink-faint); }
html[data-theme="light"] .site-header nav a[aria-current="page"] { color: var(--ink); }

/* =====================================================================
   ILLUSTRATION CANVAS: a dotted board with die-cut stickers and stacked
   project cards scattered around a centred title. Cards jump to their
   section below. Items are placed with --x/--y/--w/--r (left, top,
   width, tilt) in percent of the board; on phones they fall into a grid.
   ===================================================================== */
#ill-canvas {
  --dot: rgba(255, 255, 255, .09);
  --sticker-edge: #fff;
  position: relative; overflow: hidden;
  min-height: clamp(40rem, 62vw, 56rem);
  margin: 0; padding: 0 !important; max-width: none !important;
  background:
    radial-gradient(circle at 1px 1px, var(--dot) 1px, transparent 1.5px) 0 0 / 22px 22px,
    radial-gradient(40% 50% at 50% 45%, color-mix(in srgb, var(--c-illus, #ff6fb5) 12%, transparent), transparent 70%),
    var(--paper) !important;
  border: 0 !important; box-shadow: none !important;
}
html[data-theme="light"] #ill-canvas {
  --dot: rgba(2, 81, 61, .16);
  background:
    radial-gradient(circle at 1px 1px, var(--dot) 1px, transparent 1.5px) 0 0 / 22px 22px,
    radial-gradient(40% 50% at 50% 45%, color-mix(in srgb, var(--c-illus) 10%, transparent), transparent 70%),
    var(--paper) !important;
}
#ill-canvas::before, #ill-canvas::after { display: none !important; }

.ic-head {
  position: absolute; left: 50%; top: 38%; transform: translate(-50%, -50%);
  width: min(92%, 40rem); text-align: center; z-index: 2; pointer-events: none;
}
.ic-head .eyebrow { margin: 0 0 .9rem; }
.ic-head h1 {
  margin: 0; font-family: var(--display); font-weight: 700; letter-spacing: -.045em; line-height: .95;
  font-size: clamp(2.6rem, 6vw, 5rem); text-transform: none;
  background: none !important; -webkit-text-fill-color: var(--ink) !important; color: var(--ink) !important;
}
.ic-head h1 mark {
  background: linear-gradient(transparent 12%, color-mix(in srgb, var(--lime) 70%, transparent) 12%, color-mix(in srgb, var(--lime) 70%, transparent) 88%, transparent 88%);
  color: inherit; -webkit-text-fill-color: currentColor; padding: 0 .12em; border-radius: .12em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
html:not([data-theme="light"]) .ic-head h1 mark { -webkit-text-fill-color: var(--on-lime) !important; color: var(--on-lime) !important; }
.ic-sub { margin: 1.1rem 0 0; font-family: var(--mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); }

/* Scattered pieces */
.ic-stack, .ic-sticker {
  position: absolute; left: var(--x); top: var(--y); width: var(--w);
  transform: rotate(var(--r)); transition: transform .35s var(--ease, ease);
  z-index: 1;
}
.ic-sticker {
  height: auto;
  filter:
    drop-shadow(3px 0 0 var(--sticker-edge)) drop-shadow(-3px 0 0 var(--sticker-edge))
    drop-shadow(0 3px 0 var(--sticker-edge)) drop-shadow(0 -3px 0 var(--sticker-edge))
    drop-shadow(0 12px 18px rgba(0, 0, 0, .22));
}
.ic-sticker--card { border-radius: 10px; }
.ic-sticker:hover { transform: rotate(calc(var(--r) * -1)) scale(1.06); }

.ic-stack { display: block; text-decoration: none; color: var(--ink); text-align: center; }
.ic-card {
  position: relative; display: block; padding: 7px 7px 9px; border-radius: 12px;
  background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .12), 0 16px 32px rgba(0, 0, 0, .22);
}
.ic-card::before, .ic-card::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; background: #fff; z-index: -1;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .1), 0 8px 18px rgba(0, 0, 0, .12);
}
.ic-card::before { transform: translate(5px, 5px) rotate(3deg); }
.ic-card::after { transform: translate(9px, 9px) rotate(6deg); background: #f3f1ea; }
.ic-card img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 7px; }
.ic-card--dark img { background: #1e1618; object-fit: contain; padding: 6%; }
.ic-label { display: block; margin-top: 1rem; font-family: var(--display); font-weight: 600; font-size: clamp(1rem, 1.3vw, 1.2rem); letter-spacing: -.02em; }
.ic-tags { display: flex; justify-content: center; flex-wrap: wrap; gap: .3rem; margin-top: .45rem; }
.ic-tags i {
  font-style: normal; font-family: var(--mono); font-size: .58rem; letter-spacing: .08em; text-transform: uppercase;
  padding: .2rem .5rem; border-radius: 999px; color: var(--ink-faint); box-shadow: inset 0 0 0 1px var(--edge-strong);
}
.ic-stack:hover { transform: rotate(0deg) translateY(-6px); z-index: 3; }
.ic-stack:hover .ic-card::before { transform: translate(8px, 4px) rotate(6deg); }
.ic-stack:hover .ic-card::after { transform: translate(14px, 6px) rotate(10deg); }
.ic-stack:focus-visible { outline: 2px solid var(--lime); outline-offset: 6px; border-radius: 12px; }

.ic-dock {
  position: absolute; left: 50%; bottom: 3%; transform: translateX(-50%); z-index: 2;
  display: flex; gap: .4rem; padding: .4rem; border-radius: 999px;
  background: var(--card); box-shadow: inset 0 0 0 1px var(--edge), 0 12px 30px rgba(0, 0, 0, .18);
}
.ic-dock a { padding: .5rem .95rem; border-radius: 999px; font-size: .85rem; font-weight: 500; color: var(--ink); text-decoration: none; }
.ic-dock a:hover { background: color-mix(in srgb, var(--lime) 18%, transparent); }

@media (prefers-reduced-motion: reduce) { .ic-stack, .ic-sticker { transition: none; } }

/* Phones and narrow windows: the board becomes a loose two-column grid */
@media (max-width: 820px) {
  #ill-canvas { min-height: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 2.2rem 1.25rem; padding: 2rem 16px 2.5rem !important; }
  .ic-head, .ic-dock { position: static; transform: none; grid-column: 1 / -1; width: auto; }
  .ic-head { margin: 1rem 0 .5rem; }
  .ic-dock { justify-self: center; flex-wrap: wrap; justify-content: center; }
  .ic-stack, .ic-sticker { position: static; width: auto; max-width: 100%; }
  .ic-sticker { width: 70%; justify-self: center; }
  .ic-sticker--card { grid-column: 1 / -1; width: 80%; }
}
.ic-head { top: 42%; }
.ic-head h1 mark {
  background: linear-gradient(transparent 52%, color-mix(in srgb, var(--lime) 55%, transparent) 52%, color-mix(in srgb, var(--lime) 55%, transparent) 92%, transparent 92%) !important;
  padding: 0 .06em;
}
html:not([data-theme="light"]) .ic-head h1 mark { -webkit-text-fill-color: var(--ink) !important; color: var(--ink) !important; }
#ill-canvas { min-height: clamp(42rem, 64vw, 58rem); }

/* Voyager teaser: numbered decisions list */
.vt-list { margin: .5rem 0 2rem; padding-left: 1.4rem; display: grid; gap: 1.6rem; }
.vt-list li { color: var(--ink-soft); line-height: 1.5; }
.vt-list b { display: block; color: var(--ink); font-size: clamp(1.15rem, 1.6vw, 1.4rem); line-height: 1.25; margin-bottom: .35rem; }

/* =====================================================================
   DAY PALETTE (Sarah's ten): Warm Ivory paper, Forest Black ink and
   buttons, Vibrant Coral accent. Each category owns one colour and uses
   it everywhere it appears: home tab, hero wash, eyebrow, section labels.
     Intro + Principles  Vibrant Coral    Voyager       Electric Blue
     Designing in code   Emerald          Homebot       Soft Pink
     Other work          Tangerine        Illustration  Lavender
     About               Golden Yellow    Links/hover   Deep Blue
   Overrides the earlier day palettes by redefining their names.
   ===================================================================== */
html[data-theme="light"] {
  --ivory: #f8f4eb;
  --soft-pink: #f5a6bc;
  --coral: #f34f43;
  --deep-blue: #1559ab;
  --forest-black: #10271f;
  --golden: #fbc12d;
  --tangerine: #ff8a30;
  --lavender-2: #c49bdf;
  --electric-blue: #2879e2;
  --emerald: #087a59;

  /* earlier day names, remapped */
  --marigold: var(--coral);
  --stone: #efe6d3;
  --hydrangea: var(--soft-pink);
  --cobalt: var(--electric-blue);
  --waffle: var(--deep-blue);
  --willow: var(--forest-black);
  --wasabi: var(--emerald);
  --ember: var(--coral);
  --ember-soft: #f9b8b2;
  --lavender: var(--lavender-2);

  --paper: var(--ivory);
  --card: #fffdf8;
  --card-2: #efe9dc;
  --ink: var(--forest-black);
  --ink-soft: #44524b;
  --ink-faint: #7a847e;
  --rule: rgba(16, 39, 31, .1);
  --edge: rgba(16, 39, 31, .12);
  --edge-strong: rgba(16, 39, 31, .22);
  --lime: var(--coral);
  --lime-deep: #d63a2f;
  --lime-ink: #c7362b;
  --on-lime: #ffffff;
  --soft-shadow: 0 1px 2px rgba(16, 39, 31, .05), 0 14px 36px rgba(16, 39, 31, .08);

  --c-intro: var(--coral);
  --c-voyager: var(--electric-blue);
  --c-agentic: var(--emerald);
  --c-homebot: var(--soft-pink);
  --c-archive: var(--tangerine);
  --c-illus: var(--lavender-2);
  --c-about: var(--golden);
}

/* Page tone: case-study pages pick up their category for labels */
html[data-theme="light"] body { --page-tone: var(--coral); --page-on: #fff; }
html[data-theme="light"] body:has(.cs-hero[style*="--c-voyager"]) { --page-tone: var(--electric-blue); --page-on: #fff; }
html[data-theme="light"] body:has(.cs-hero[style*="--c-agentic"]) { --page-tone: var(--emerald); --page-on: #fff; }
html[data-theme="light"] body:has(.cs-hero[style*="--c-homebot"]) { --page-tone: var(--soft-pink); --page-on: var(--forest-black); }
html[data-theme="light"] body:has(.cs-hero[style*="--c-archive"]) { --page-tone: var(--tangerine); --page-on: var(--forest-black); }
html[data-theme="light"] body:has(.cs-hero[style*="--c-illus"]) { --page-tone: var(--lavender-2); --page-on: var(--forest-black); }

html[data-theme="light"] body {
  background:
    radial-gradient(38% 46% at -4% 72%, color-mix(in srgb, var(--page-tone) 18%, transparent) 0%, transparent 72%),
    radial-gradient(36% 44% at 104% 48%, rgba(251, 193, 45, .16) 0%, transparent 72%),
    var(--paper);
  background-attachment: fixed;
}
html[data-theme="light"] .cs-section > h2, html[data-theme="light"] .side-h,
html[data-theme="light"] .sheet .spread > h2, html[data-theme="light"] .spreads .spread > h2,
html[data-theme="light"] .cs-section:nth-of-type(3n+2) > h2,
html[data-theme="light"] .sheet .spread:nth-of-type(3n+2) > h2 {
  background: var(--page-tone) !important; color: var(--page-on) !important; -webkit-text-fill-color: var(--page-on);
}
html[data-theme="light"] .cs-hero:not([style*="--c-intro"]) {
  background:
    radial-gradient(45% 85% at 102% 8%, color-mix(in srgb, var(--tone) 38%, transparent) 0%, transparent 68%),
    radial-gradient(40% 75% at -2% 100%, color-mix(in srgb, var(--tone) 14%, transparent) 0%, transparent 65%),
    linear-gradient(180deg, var(--card) 0%, var(--paper) 100%) !important;
}

/* Home: each closed tab carries its category colour */
html[data-theme="light"] .tenet { background: color-mix(in srgb, var(--tone) 26%, var(--card-2)); }
html[data-theme="light"] .tenet.is-open { background: var(--card); }
html[data-theme="light"] .tenet--intro::before,
html[data-theme="light"] .tenet--intro.is-open::before {
  background:
    radial-gradient(48% 62% at 104% 88%, rgba(243, 79, 67, .28) 0%, rgba(243, 79, 67, .08) 42%, transparent 70%),
    radial-gradient(46% 58% at 30% 115%, rgba(251, 193, 45, .32) 0%, rgba(251, 193, 45, .1) 42%, transparent 70%) !important;
}

/* Type, header, buttons, links */
html[data-theme="light"] .tenet--intro .tenet-panel h1,
html[data-theme="light"] .tenet-panel h2,
html[data-theme="light"] .cs-hero h1 {
  background: linear-gradient(180deg, var(--forest-black) 0%, var(--forest-black) 60%, #1f4a3b 100%);
  -webkit-background-clip: text; background-clip: text;
}
html[data-theme="light"] .site-header,
html[data-theme="light"] .detail-bar { background: rgba(248, 244, 235, .88) !important; }
html[data-theme="light"] .tenets.is-compact { background: rgba(248, 244, 235, .92); }
html[data-theme="light"] .site-header nav a.cta,
html[data-theme="light"] .tenet-panel .read,
html[data-theme="light"] .cs-section a.read {
  background: var(--forest-black) !important; color: #fff !important;
  box-shadow: 0 1px 2px rgba(16, 39, 31, .25), 0 8px 20px rgba(16, 39, 31, .18) !important;
}
html[data-theme="light"] .site-header nav a.cta:hover,
html[data-theme="light"] .tenet-panel .read:hover,
html[data-theme="light"] .cs-section a.read:hover { background: var(--deep-blue) !important; }
html[data-theme="light"] main a:not([class]):hover { color: var(--deep-blue); }
html[data-theme="light"] ::selection { background: var(--coral); color: #fff; }

/* Looking back: Stone with a glow in the page's colour */
html[data-theme="light"] .lookback, html[data-theme="light"] .sheet > .spread.lookback {
  background:
    radial-gradient(80% 140% at 100% 0%, color-mix(in srgb, var(--page-tone) 34%, transparent), transparent 60%),
    radial-gradient(60% 120% at 0% 100%, rgba(251, 193, 45, .24), transparent 60%),
    var(--stone) !important;
}

/* Workflow card + flow diagram (Designing in code): Emerald */
html[data-theme="light"] .tenet-panel .panel-media.flow-card {
  --fc-accent: var(--emerald); --fc-glow: rgba(8, 122, 89, .3);
  box-shadow: 0 0 0 1px rgba(16, 39, 31, .08), 0 20px 44px rgba(16, 39, 31, .10), 0 0 60px rgba(8, 122, 89, .14) !important;
}
html[data-theme="light"] .fc-step.is-active .fc-node,
html[data-theme="light"] .flow-step.is-key .flow-node { background: radial-gradient(circle at 50% 35%, #e1f2ec, #ffffff 72%); }
html[data-theme="light"] .flow-step.is-key .flow-node {
  box-shadow: inset 0 0 0 1px var(--emerald), 0 0 0 6px rgba(8, 122, 89, .12), 0 0 28px rgba(8, 122, 89, .26);
}
html[data-theme="light"] .cs-body figure.stage img[src$=".png"] { box-shadow: 0 18px 40px rgba(16, 39, 31, .16) !important; }

/* Principles posters: the same ten colours in day mode */
html[data-theme="light"] {
  --pg-paper: var(--tangerine); --pg-blue: var(--deep-blue); --pg-orange: var(--coral);
  --pg-beige: var(--lavender-2); --pg-green: var(--emerald); --pg-salmon: var(--soft-pink);
  --pg-yellow: var(--golden);
}
html[data-theme="light"] .pg-1 { --c: var(--forest-black); }
html[data-theme="light"] .pg-3 { --c: var(--ivory); }
html[data-theme="light"] .pg-4 { --c: var(--forest-black); }
html[data-theme="light"] .pg-5 { --c: var(--ivory); }
html[data-theme="light"] .pg-5 p { color: var(--ivory); -webkit-text-fill-color: var(--ivory); }
html[data-theme="light"] .pg-6, html[data-theme="light"] .pg-7 { --c: var(--forest-black); }

/* Voyager diagram in day mode: highlights follow the page colour */
html[data-theme="light"] .diagram svg rect:nth-of-type(2) { fill: var(--page-tone); stroke: none; }
html[data-theme="light"] .diagram svg text:nth-of-type(4) { fill: var(--page-on); }
html[data-theme="light"] .diagram svg text:nth-of-type(3),
html[data-theme="light"] .diagram svg text:nth-of-type(10) { fill: var(--ink-soft); }
html[data-theme="light"] .diagram svg rect:nth-of-type(5) { fill: color-mix(in srgb, var(--page-tone) 14%, var(--card)); stroke: var(--page-tone); }
html[data-theme="light"] .diagram svg text:nth-of-type(9) { fill: var(--page-ink); }

/* Big numbers and coloured text: the page's colour where it reads on
   Ivory; Forest Black on the light-toned pages */
html[data-theme="light"] body { --page-ink: var(--lime-ink); }
html[data-theme="light"] body:has(.cs-hero[style*="--c-voyager"]) { --page-ink: var(--deep-blue); --lime-ink: var(--deep-blue); }
html[data-theme="light"] body:has(.cs-hero[style*="--c-agentic"]) { --page-ink: var(--emerald); --lime-ink: var(--emerald); }
html[data-theme="light"] body:has(.cs-hero[style*="--c-homebot"]),
html[data-theme="light"] body:has(.cs-hero[style*="--c-archive"]),
html[data-theme="light"] body:has(.cs-hero[style*="--c-illus"]) { --page-ink: var(--forest-black); --lime-ink: var(--forest-black); }
html[data-theme="light"] .s-ink { --bg: var(--forest-black); --num: var(--page-tone); }

/* Travelers Haven tile: the screenshots now have the modal scrim removed
   (travelers-*-clean.jpg), so day mode shows them at true brightness on
   Ivory with a wash in the section's colour. Night keeps its dimmed look. */
.tile-stage--th .th-window img, .th-lease { filter: brightness(.72) contrast(1.06); }
html[data-theme="light"] .tile-stage--th .th-window img,
html[data-theme="light"] .th-lease { filter: none; }
html[data-theme="light"] .tile-stage--th .th-window { background: #f4f4f4; }
html[data-theme="light"] .tile-stage--th {
  background:
    radial-gradient(60% 70% at 62% 62%, color-mix(in srgb, var(--tone, var(--page-tone)) 26%, transparent) 0%, transparent 72%),
    radial-gradient(45% 50% at 12% 10%, rgba(251, 193, 45, .14) 0%, transparent 70%),
    linear-gradient(180deg, var(--card) 0%, var(--card-2) 100%);
}
html[data-theme="light"] .tile-stage--th .th-window { box-shadow: 0 0 0 1px rgba(16, 39, 31, .1), 0 20px 40px rgba(16, 39, 31, .16); }
html[data-theme="light"] .th-lease { box-shadow: 0 0 0 1px rgba(16, 39, 31, .1), 0 24px 48px rgba(16, 39, 31, .2), 0 0 40px rgba(40, 121, 226, .2); }

/* =====================================================================
   DAY SPECTRUM BANDS (Sarah's reference, 2026-10-15): vertical strips that
   run Electric Blue → periwinkle → Soft Pink → a pale horizon → Golden
   Yellow → Tangerine → Coral, deepest (with dark ends) in the middle
   strips and softest at the edges, all under a fine paper grain.
   Category colours stay on the tab dots, eyebrows and section labels.
   ===================================================================== */
html[data-theme="light"] {
  --sp-blue: #2a6ed9;
  --sp-peri: #9298e2;
  --sp-pink: #f2a6c6;
  --sp-haze: #f1eee6;
  --sp-yellow: #f6c53a;
  --sp-orange: #f38a2b;
  --sp-red: #e4511f;
  --sp-night: 14, 13, 18;
  --spectrum: linear-gradient(180deg,
    var(--sp-blue) 0%, var(--sp-peri) calc(var(--sp-h, 48%) - 26%),
    var(--sp-pink) calc(var(--sp-h, 48%) - 13%), var(--sp-haze) var(--sp-h, 48%),
    var(--sp-yellow) calc(var(--sp-h, 48%) + 14%), var(--sp-orange) calc(var(--sp-h, 48%) + 32%),
    var(--sp-red) 100%);
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Paper grain over the whole day site */
html[data-theme="light"] body::after {
  content: ""; position: fixed; inset: 0; z-index: 9999; pointer-events: none;
  background: var(--grain); opacity: .09; mix-blend-mode: multiply;
}

/* Page: a sky at the top, sunrise at the bottom, Ivory in between */
html[data-theme="light"] body {
  background:
    linear-gradient(180deg, rgba(42, 110, 217, .05) 0%, rgba(242, 166, 198, .04) 14%, transparent 30%),
    linear-gradient(0deg, rgba(243, 138, 43, .06) 0%, rgba(246, 197, 58, .04) 14%, transparent 32%),
    var(--paper);
  background-attachment: fixed;
}

/* Home: each closed tab is one soft gradient in its category colour,
   pale at the top and deepening toward the label, like one strip of the
   reference */
html[data-theme="light"] .tenet:not(.is-open) {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--tone) 10%, var(--paper)) 0%,
    color-mix(in srgb, var(--tone) 22%, var(--paper)) 45%,
    color-mix(in srgb, var(--tone) 48%, var(--paper)) 100%);
  border-left-color: rgba(var(--sp-night), .10) !important;
  box-shadow: inset 8px 0 12px -10px rgba(var(--sp-night), .14);
}
html[data-theme="light"] .tenet:not(.is-open):hover {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--tone) 16%, var(--paper)) 0%,
    color-mix(in srgb, var(--tone) 32%, var(--paper)) 45%,
    color-mix(in srgb, var(--tone) 62%, var(--paper)) 100%);
}
html[data-theme="light"] .tenet:not(.is-open) .tenet-tab span { color: var(--forest-black); text-shadow: none; }
html[data-theme="light"] .tenet:not(.is-open) .tenet-tab span::after { box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .85); }

/* Open panel: the horizon glows up from the bottom */
html[data-theme="light"] .tenet.is-open::before,
html[data-theme="light"] .tenet--intro.is-open::before {
  background:
    radial-gradient(70% 38% at 70% 108%, rgba(243, 138, 43, .16) 0%, rgba(246, 197, 58, .10) 40%, transparent 72%),
    radial-gradient(40% 50% at 104% -6%, rgba(42, 110, 217, .09) 0%, rgba(242, 166, 198, .07) 45%, transparent 72%) !important;
}

/* Case-study hero: one soft gradient in the page's colour, from the right */
html[data-theme="light"] .cs-hero:not([style*="--c-intro"]) {
  background:
    linear-gradient(90deg, var(--paper) 0%, var(--paper) 40%, transparent 100%),
    linear-gradient(180deg, color-mix(in srgb, var(--tone) 14%, var(--paper)) 0%, color-mix(in srgb, var(--tone) 40%, var(--paper)) 100%) !important;
}

/* Looking back: a softer horizon */
html[data-theme="light"] .lookback, html[data-theme="light"] .sheet > .spread.lookback {
  background:
    linear-gradient(180deg, rgba(42, 110, 217, .16) 0%, rgba(242, 166, 198, .16) 30%, transparent 52%, rgba(246, 197, 58, .2) 74%, rgba(243, 138, 43, .26) 100%),
    var(--stone) !important;
}
@media (max-width: 760px) {
  html[data-theme="light"] .tenets:not(.is-compact) .tenet:not(.is-open) {
    background: linear-gradient(90deg, color-mix(in srgb, var(--tone) 40%, var(--paper)) 0%, color-mix(in srgb, var(--tone) 10%, var(--paper)) 100%);
    box-shadow: none;
  }
}

/* Day heroes melt into the page: no rule, no glow pinned to the bottom
   edge, and the last stretch fades to Ivory so there is no seam */
html[data-theme="light"] .cs-hero { border-bottom: 0 !important; }
html[data-theme="light"] .cs-hero[style*="--c-intro"] {
  background:
    radial-gradient(55% 70% at 100% 0%, color-mix(in srgb, var(--tone) 22%, transparent) 0%, transparent 70%),
    radial-gradient(45% 55% at 0% 0%, rgba(246, 197, 58, .10) 0%, transparent 70%),
    linear-gradient(180deg, transparent 0%, transparent 100%) !important;
}
html[data-theme="light"] .cs-hero:not([style*="--c-intro"]) {
  background:
    linear-gradient(180deg, transparent 0%, transparent 45%, var(--paper) 82%),
    linear-gradient(90deg, var(--paper) 0%, var(--paper) 40%, transparent 100%),
    linear-gradient(180deg, color-mix(in srgb, var(--tone) 14%, var(--paper)) 0%, color-mix(in srgb, var(--tone) 34%, var(--paper)) 100%) !important;
}
/* Let the page show through below the hero so the two never meet on a
   painted seam (a hairline appeared at fractional zoom levels) */
html[data-theme="light"] .cs-body.sheet { background: transparent !important; }
/* Home: Work and About take turns being the current link */
.site-header nav a:first-child[aria-current="page"] { color: var(--lime); }
html[data-theme="light"] .site-header nav a:first-child[aria-current="page"] { color: var(--ink); }
/* Compact tab bar (while reading a case study): opaque, so the page never
   shows through; each tab keeps a light wash of its colour */
html[data-theme="light"] .tenets.is-compact { background: var(--paper) !important; }
html[data-theme="light"] .tenets.is-compact .tenet:not(.is-open) {
  background: linear-gradient(180deg, var(--paper) 0%, color-mix(in srgb, var(--tone) 16%, var(--paper)) 100%) !important;
  box-shadow: none;
}
html[data-theme="light"] .tenets.is-compact .tenet.is-open { background: var(--card) !important; }

/* =====================================================================
   ILLUSTRATION: project artwork as small framed cards, the same size and
   feel as the collage at the top of the page (white frame, soft shadow,
   a slight tilt) instead of full-width panels.
   ===================================================================== */
.ill-proj .ill-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1.75rem 1.5rem;
  margin-top: 1.75rem; padding: 7px;
}
.ill-proj .ill-row:last-child { flex: none; }
.ill-proj .ill-row .panel, .ill-proj .ill-row .photo {
  flex: 0 0 auto; min-height: 0; height: 11rem;
  border: 7px solid #fff; border-radius: 12px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .12), 0 14px 28px rgba(0, 0, 0, .16);
  transform: rotate(var(--tilt, -1.5deg));
  transition: transform .3s var(--ease);
}
.ill-proj .ill-row > :nth-child(even) { --tilt: 1.5deg; }
.ill-proj .ill-row > :nth-child(3n) { --tilt: -.75deg; }
.ill-proj .ill-row .panel:hover, .ill-proj .ill-row .photo:hover { transform: rotate(0deg) translateY(-4px); }
.ill-proj .ill-row .photo { width: 14.5rem; }
.ill-proj .ill-row .panel { padding: .9rem; max-width: 22rem; }
.ill-proj .ill-row .panel > img { max-height: 100%; max-width: 100%; }
.ill-proj .ill-row .panel:has(.set) { height: auto; min-height: 11rem; width: 22rem; }
.ill-proj .ill-row .set { gap: .6rem; }
.ill-proj .ill-row .set img { max-height: 3.25rem; }
html[data-theme="light"] .ill-proj .ill-row .panel,
html[data-theme="light"] .ill-proj .ill-row .photo { box-shadow: 0 1px 2px rgba(16, 39, 31, .1), 0 14px 28px rgba(16, 39, 31, .12); }
@media (max-width: 760px) {
  .ill-proj .ill-row { justify-content: center; }
}
/* A project's rows flow side by side instead of stacking */
.sheet > .ill-proj > .content { display: block; }
.ill-proj .ill-row { display: inline-flex; vertical-align: middle; margin-right: 1.5rem; }
.ill-proj .ill-row + .ill-row { margin-top: 1.75rem; }
.ill-proj .ill-row .panel > img { height: 100%; width: auto; max-width: 20rem; object-fit: contain; }
.ill-proj .ill-row .panel:not(:has(.set)) { min-width: 8rem; }
/* All of a project's cards flow together in one wrapping row */
.sheet > .ill-proj > .content { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 1.6rem 1.4rem; align-content: flex-start; }
.sheet > .ill-proj > .content > :not(.ill-row) { flex: 0 0 100%; margin-bottom: 0; }
.ill-proj .ill-row, .ill-proj .ill-row + .ill-row { display: contents; }
.sheet > .ill-proj > .content > .ill-row:first-of-type > :first-child { margin-left: 7px; }
/* The gradient stops short of the hero's edge; the last stretch is plain
   Ivory, so there is no hairline where the hero meets the page */
html[data-theme="light"] .cs-hero.cs-hero:is([style*="--c-intro"], :not([style*="--c-intro"])) {
  background-color: var(--paper) !important;
  background-size: 100% 82% !important;
  background-repeat: no-repeat !important;
}

/* =====================================================================
   ILLUSTRATION DECKS: one small stack per project, like the collage at
   the top. Click a stack to flip to its next piece.
   ===================================================================== */
.ill-decks {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 3.5rem 2.5rem; padding: clamp(2.5rem, 5vw, 4.5rem) var(--page-pad, clamp(1rem, 4vw, 3rem)) clamp(4rem, 8vw, 6rem);
  max-width: 1280px; margin: 0 auto;
}
.deck { margin: 0; text-align: center; scroll-margin-top: 6rem; }
.deck-card {
  all: unset; box-sizing: border-box; display: block; width: 100%; cursor: pointer;
  position: relative; padding: 7px 7px 9px; border-radius: 12px; background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .12), 0 16px 32px rgba(0, 0, 0, .18);
  transform: rotate(var(--r, 0deg)); transition: transform .35s var(--ease, ease);
}
.deck-card[disabled] { cursor: default; }
.deck-card:focus-visible { outline: 2px solid var(--lime); outline-offset: 6px; }
.deck:hover .deck-card { transform: rotate(0deg) translateY(-6px); }
.deck:hover .deck-card::before { transform: translate(8px, 4px) rotate(6deg); }
.deck:hover .deck-card::after { transform: translate(14px, 6px) rotate(10deg); }
.deck-card[disabled]::after { display: none; }
.deck-card img { display: block; width: 100%; aspect-ratio: 4 / 3; border-radius: 7px; background: var(--bg, var(--card)); }
.deck-card img[hidden] { display: none; }
.deck-card img.fit-cover { object-fit: cover; }
.deck-card img.fit-contain { object-fit: contain; padding: 9%; box-sizing: border-box; }
.deck figcaption { margin-top: 1.1rem; display: grid; gap: .35rem; justify-items: center; }
.deck .ic-label { margin-top: 0; }
.deck-note { font-size: .88rem; line-height: 1.4; color: var(--ink-soft); max-width: 26ch; }
.deck-count {
  font-family: var(--mono); font-size: .62rem; letter-spacing: .08em; color: var(--ink-faint);
  padding: .2rem .55rem; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--edge-strong);
}
html[data-theme="light"] .deck-card { box-shadow: 0 1px 2px rgba(16, 39, 31, .1), 0 16px 32px rgba(16, 39, 31, .14); }
@media (prefers-reduced-motion: reduce) { .deck-card { transition: none; } }
.ill-decks { grid-template-columns: repeat(3, minmax(0, 17rem)); justify-content: center; gap: 3.5rem clamp(2.5rem, 6vw, 5rem); }
@media (max-width: 900px) { .ill-decks { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.75rem 1.5rem; padding-inline: 16px; } }
@media (max-width: 480px) { .ill-decks { grid-template-columns: minmax(0, 18rem); } }

/* About panel: the principles, as a row of mini posters */
.about-pg { margin: 0 0 2.25rem; }
.about-pg h3 { margin: 0 0 .4rem; font-family: var(--display); font-weight: 700; font-size: clamp(1.3rem, 2vw, 1.7rem); letter-spacing: -.035em; text-transform: uppercase; color: var(--ink); }
.about-pg-north { margin: 0 0 1.1rem; max-width: 52ch !important; color: var(--ink-soft); }
.about-pg-list {
  list-style: none; margin: 0 0 1rem; padding: 0;
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .6rem;
}
.about-pg-list a {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: .4rem;
  aspect-ratio: 3 / 4; padding: .7rem .65rem; border-radius: 6px; text-decoration: none;
  background: var(--bg); color: var(--c); transition: transform .25s ease;
}
.about-pg-list a:hover { transform: translateY(-3px) rotate(-.6deg); }
.about-pg-list a:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.about-pg-n { position: absolute; top: .5rem; right: .6rem; font: 300 .95rem/1 var(--font); opacity: .55; }
.about-pg-list b { font: 700 clamp(.8rem, 1vw, .95rem)/1.05 var(--display); letter-spacing: -.02em; }
.about-pg-list .pg-4 b { font: italic 400 1.02rem/1.05 "Instrument Serif", Georgia, serif; letter-spacing: 0; }
.about-pg-more { font-weight: 600; color: var(--ink); }
@media (prefers-reduced-motion: reduce) { .about-pg-list a, .about-pg-list a:hover { transition: none; transform: none; } }
@media (max-width: 1100px) { .about-pg-list { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 520px) { .about-pg-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } .about-pg-list a { aspect-ratio: 4 / 3; } }
.pg-card { scroll-margin-top: calc(var(--header-h) + 1.5rem); }
.about-pg-list a, .about-pg-list a b, .about-pg-list a .about-pg-n { color: var(--c) !important; -webkit-text-fill-color: var(--c); text-align: left; align-items: stretch; }

/* Timeline boxes glow in their own band colour (the shared hover rule's
   :is() list outranked .tl-band), and their links underline in it too */
.tenet-panel .tl-band.tl-band { --glow: var(--band, var(--lime)); }
main .tl-list a:not(.read):not(.cta) { text-decoration-color: var(--band) !important; }

/* =====================================================================
   FOOTER (after sarahleach.design): two contact rows with illustrations
   beside the office drawing, then a bar with copyright, a joke and
   social icons. Uses this site's tokens in both themes.
   ===================================================================== */
.site-footer.ft {
  display: block; padding: 0; margin-top: clamp(3rem, 6vw, 5rem);
  border-top: 1px solid var(--rule) !important; background: var(--paper); color: var(--ink-soft);
}
.ft-cta {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  max-width: 1200px; margin: 0 auto; border-inline: 1px solid var(--rule);
}
.ft-rows { display: grid; border-right: 1px solid var(--rule); }
.ft-row {
  display: grid; grid-template-columns: clamp(6rem, 11vw, 8.5rem) 1fr; align-items: stretch;
  text-decoration: none !important; color: var(--ink) !important;
}
.ft-row + .ft-row { border-top: 1px solid var(--rule); }
.ft-art {
  display: grid; place-items: center; overflow: hidden;
  background: color-mix(in srgb, var(--soft-pink, #f5a6bc) 45%, var(--paper));
  border-right: 1px solid var(--rule);
}
.ft-art img { width: 100%; height: 100%; object-fit: cover; object-position: center 60%; transition: transform .35s var(--ease, ease); }
.ft-art--doc svg { width: 58%; fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .35s var(--ease, ease); }
.ft-copy { display: grid; align-content: center; gap: .55rem; padding: clamp(1.1rem, 2.4vw, 1.8rem) clamp(1rem, 2.4vw, 1.8rem); }
.ft-copy b { font-family: var(--display); font-weight: 600; font-size: clamp(1.1rem, 1.7vw, 1.45rem); line-height: 1.2; letter-spacing: -.02em; color: var(--ink); max-width: 24ch; }
.ft-copy u { justify-self: start; font-size: .9rem; font-weight: 600; text-decoration-color: var(--lime); text-underline-offset: .25em; }
.ft-row:hover .ft-art img, .ft-row:hover .ft-art svg { transform: scale(1.06) rotate(-2deg); }
.ft-row:hover u { color: var(--lime-ink, var(--lime)); }
.ft-row:focus-visible { outline: 2px solid var(--lime); outline-offset: -2px; }
.ft-office { display: grid; place-items: end center; padding: 1.25rem 1.5rem 0; overflow: hidden; }
.ft-office img { width: min(100%, 26rem); height: auto; display: block; }
html:not([data-theme="light"]) .ft-office img { filter: invert(1) brightness(.85); mix-blend-mode: screen; }
html[data-theme="light"] .ft-office img { mix-blend-mode: multiply; }

.ft-bar {
  display: flex; align-items: center; flex-wrap: wrap; gap: .75rem 1.75rem;
  padding: 1.1rem var(--gutter, 24px); border-top: 1px solid var(--rule);
  background: var(--ink); color: var(--paper);
  font-size: .85rem;
}
.ft-bar .ft-copy-mark { font-family: inherit !important; font-size: inherit !important; color: inherit !important; }
.ft-joke { opacity: .75; }
.ft-social { list-style: none; margin: 0 0 0 auto; padding: 0; display: flex; gap: .4rem; }
.ft-social a { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 8px; color: var(--paper) !important; }
.ft-social a:hover { background: color-mix(in srgb, var(--paper) 14%, transparent); color: var(--lime) !important; }
.ft-social svg { width: 1.3rem; height: 1.3rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
html:not([data-theme="light"]) .ft-bar { background: #0b0c0d; color: var(--ink); }
html:not([data-theme="light"]) .ft-social a { color: var(--ink) !important; }
html:not([data-theme="light"]) .ft-social a:hover { background: rgba(255, 255, 255, .08); color: var(--lime) !important; }

@media (max-width: 760px) {
  .ft-cta { grid-template-columns: 1fr; border-inline: 0; }
  .ft-rows { border-right: 0; }
  .ft-office { border-top: 1px solid var(--rule); }
  .ft-social { margin-left: 0; }
}
.site-footer .ft-bar .ft-social { margin: 0 0 0 auto; gap: .4rem; }
@media (max-width: 760px) { .site-footer .ft-bar .ft-social { margin-left: -.5rem; } }
/* Footer sits right under the page's next/back links, full width */
.site-footer.ft { margin-top: clamp(1.5rem, 3vw, 2.5rem); }
.ft-cta { max-width: none; border-inline: 0; padding-inline: var(--gutter, 24px); }
.ft-rows { border-left: 1px solid var(--rule); }
.ft-office { border-right: 1px solid var(--rule); }
@media (max-width: 760px) { .ft-cta { padding-inline: 0; } .ft-rows, .ft-office { border-inline: 0; } }
.ill-decks { padding-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.site-footer.ft { margin-top: 0; }
/* Stacks wrap in centred rows, so an odd one out sits in the middle */
.ill-decks { display: flex; flex-wrap: wrap; justify-content: center; max-width: calc(3 * 17rem + 2 * clamp(2.5rem, 6vw, 5rem) + 2 * var(--gutter, 24px)); }
.ill-decks > .deck { flex: 0 1 17rem; }
@media (max-width: 900px) { .ill-decks > .deck { flex-basis: calc(50% - .75rem); } }
@media (max-width: 480px) { .ill-decks > .deck { flex-basis: 18rem; } }

/* Wide screens: the project stacks scatter like the collage at the top */
@media (min-width: 1180px) {
  .ill-decks {
    display: block; position: relative; max-width: 1400px; margin: 0 auto;
    aspect-ratio: auto; height: calc(min(100vw, 1400px) * .62 + 17rem); padding: 0; margin-block: clamp(2rem, 4vw, 3.5rem) clamp(1rem, 2vw, 2rem);
  }
  .ill-decks > .deck {
    position: absolute; left: var(--x); top: var(--y); width: var(--w); max-width: none;
    transform: rotate(var(--r)); transition: transform .35s var(--ease, ease); z-index: 1;
  }
  .ill-decks > .deck .deck-card { transform: none; }
  .ill-decks > .deck:hover { transform: rotate(0deg) translateY(-6px); z-index: 3; }
  .ill-decks > .deck:hover .deck-card { transform: none; }
}

/* =====================================================================
   DAY BOLD (Sarah, 2026-10-15): flat, solid blocks of the ten colours,
   like the Pocket Guide posters. No washes or gradients in day mode.
   --on is the text colour that reads on each block.
   ===================================================================== */
html[data-theme="light"] { --cream: #fbf7ee; }
html[data-theme="light"] body { background: var(--paper) !important; }
html[data-theme="light"] body { --page-on: var(--cream); }
html[data-theme="light"] body:has(.cs-hero[style*="--c-homebot"]),
html[data-theme="light"] body:has(.cs-hero[style*="--c-archive"]),
html[data-theme="light"] body:has(.cs-hero[style*="--c-illus"]),
html[data-theme="light"] body:has(.cs-hero[style*="--c-about"]) { --page-on: var(--forest-black); }

/* Home: closed tabs are solid blocks; labels in the colour that reads */
html[data-theme="light"] .tenet[data-id="voyager"], html[data-theme="light"] .tenet[data-id="code"],
html[data-theme="light"] .tenet[data-id="intro"] { --on: var(--cream); }
html[data-theme="light"] .tenet { --on: var(--forest-black); }
html[data-theme="light"] .tenet[data-id="voyager"], html[data-theme="light"] .tenet[data-id="code"],
html[data-theme="light"] .tenet--intro { --on: var(--cream); }
html[data-theme="light"] .tenet:not(.is-open),
html[data-theme="light"] .tenet:not(.is-open):hover {
  background: var(--tone) !important; box-shadow: none !important; filter: none !important;
  border-left-color: var(--paper) !important; border-left-width: 6px !important;
}
html[data-theme="light"] .tenet:not(.is-open):hover { background: color-mix(in srgb, var(--tone) 88%, #000) !important; }
html[data-theme="light"] .tenet:not(.is-open) .tenet-tab span { color: var(--on) !important; text-shadow: none !important; }
html[data-theme="light"] .tenet:not(.is-open) .tenet-tab span::after { background: var(--on); box-shadow: none !important; }
html[data-theme="light"] .tenet.is-open::before, html[data-theme="light"] .tenet--intro.is-open::before { background: none !important; }
@media (max-width: 760px) {
  html[data-theme="light"] .tenets:not(.is-compact) .tenet:not(.is-open) { background: var(--tone) !important; border-left-width: 0 !important; border-top: 4px solid var(--paper) !important; }
}
/* Compact bar while reading: solid blocks too, open tab stays paper */
html[data-theme="light"] .tenets.is-compact .tenet:not(.is-open) { background: var(--tone) !important; }
html[data-theme="light"] .tenets.is-compact .tenet.is-open { background: var(--card) !important; }
html[data-theme="light"] .tenets.is-compact .tenet.is-open .tenet-tab span { color: var(--ink) !important; }

/* Case-study heroes: one solid block of the page colour */
html[data-theme="light"] .cs-hero:not(.ill-canvas).cs-hero {
  background: var(--tone) !important; background-size: auto !important;
  --rule: color-mix(in srgb, var(--page-on) 35%, transparent);
}
html[data-theme="light"] .cs-hero:not(.ill-canvas) :is(h1, h2, h3, p, li, span, dt, dd, b, strong, a, .eyebrow, mark) {
  color: var(--page-on) !important; -webkit-text-fill-color: var(--page-on) !important; background: none !important;
  text-decoration-color: var(--page-on);
}
html[data-theme="light"] .cs-hero:not(.ill-canvas) :is(.facts, .cover-meta, hr) { border-color: color-mix(in srgb, var(--page-on) 35%, transparent) !important; }
html[data-theme="light"] .pg-north { border-left-color: var(--page-on) !important; }

/* Looking back and the dark stat card: solid page colour */
html[data-theme="light"] .lookback, html[data-theme="light"] .sheet > .spread.lookback { background: var(--page-tone) !important; }
html[data-theme="light"] .lookback :is(h2, h3, p, li, span, b, strong, em, a) { color: var(--page-on) !important; -webkit-text-fill-color: var(--page-on) !important; }
html[data-theme="light"] .lookback > h2 { background: var(--page-on) !important; color: var(--page-tone) !important; -webkit-text-fill-color: var(--page-tone) !important; }
html[data-theme="light"] .s-ink { --bg: var(--page-tone); }
html[data-theme="light"] .s-ink, html[data-theme="light"] .s-ink * { color: var(--page-on) !important; -webkit-text-fill-color: var(--page-on) !important; }

/* Footer illustration tiles: solid colours */
html[data-theme="light"] .ft-row:first-child .ft-art { background: var(--soft-pink); }
html[data-theme="light"] .ft-art--doc { background: var(--golden); }
/* Voyager's block uses Deep Blue, matching the poster palette */
html[data-theme="light"] { --c-voyager: var(--deep-blue); }
html[data-theme="light"] body:has(.cs-hero[style*="--c-voyager"]) { --page-tone: var(--deep-blue); }

/* Home tabs, day mode: light tabs with the label in the category colour
   (like night mode). The light colours are deepened a touch so the
   label stays readable on Ivory; the dot keeps the pure colour. */
html[data-theme="light"] .tenet { --label: var(--tone); }
html[data-theme="light"] .tenet:is([data-id="homebot"], [data-id="archive"], [data-id="about"]) { --label: color-mix(in srgb, var(--tone) 62%, var(--forest-black)); }
html[data-theme="light"] .tenet:not(.is-open),
html[data-theme="light"] .tenets.is-compact .tenet:not(.is-open) {
  background: var(--card) !important;
  border-left: 1px solid var(--rule) !important;
}
html[data-theme="light"] .tenet:not(.is-open):hover,
html[data-theme="light"] .tenets.is-compact .tenet:not(.is-open):hover { background: color-mix(in srgb, var(--tone) 12%, var(--card)) !important; }
html[data-theme="light"] .tenet .tenet-tab span,
html[data-theme="light"] .tenet:not(.is-open) .tenet-tab span { color: var(--label) !important; }
html[data-theme="light"] .tenet .tenet-tab span::after,
html[data-theme="light"] .tenet:not(.is-open) .tenet-tab span::after { background: var(--tone) !important; box-shadow: none !important; }
@media (max-width: 760px) {
  html[data-theme="light"] .tenets:not(.is-compact) .tenet:not(.is-open) { background: var(--card) !important; border-top: 1px solid var(--rule) !important; }
}
.tl-foot + .about-pg { margin-top: clamp(2rem, 4vw, 3rem); }
.about-pg-list { margin-bottom: 0; }

/* How I work cards: Sarah's hand lettering, tinted to each card's ink */
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.about-pg-list a { justify-content: center; align-items: center; padding: 1.6rem .7rem 1rem; }
.about-pg-art {
  display: block; width: 100%; flex: 1 1 auto; min-height: 0;
  background: var(--c);
  -webkit-mask: var(--art) center / contain no-repeat; mask: var(--art) center / contain no-repeat;
  transition: transform .3s var(--ease, ease);
}
.about-pg-list a:hover .about-pg-art { transform: scale(1.05) rotate(-2deg); }
html[data-theme="light"] .about-pg-list .pg-2 { --c: var(--cream, #fbf7ee); }
@media (prefers-reduced-motion: reduce) { .about-pg-list a:hover .about-pg-art { transform: none; } }

/* Principles posters: Sarah's hand lettering, tinted to each poster's ink */
.pg-card { justify-content: flex-start; padding-top: clamp(2.8rem, 4vw, 3.4rem); }
.pg-art {
  display: block; width: 100%; flex: 1 1 auto; min-height: 7rem;
  background: var(--c);
  -webkit-mask: var(--art) center / contain no-repeat; mask: var(--art) center / contain no-repeat;
  transition: transform .3s var(--ease, ease);
}
.pg-card:hover .pg-art { transform: scale(1.03) rotate(-1.5deg); }
.pg-card p { flex: 0 0 auto; }
.pg-2 { align-items: stretch; }
html[data-theme="light"] .pg-2 { --c: var(--cream, #fbf7ee); }
@media (prefers-reduced-motion: reduce) { .pg-card:hover .pg-art { transform: none; } }
.pg-hero .visually-hidden + .pg-north { margin-top: 1rem; }
.pg-2 { text-align: left; } .pg-2 p { align-self: flex-start; }

/* Line breaks: use the width that's there, and never strand one word.
   Short statements get room to run long; headings balance their lines;
   paragraphs avoid a lone last word. */
.pg-north { max-width: none; }
.pg-north-sub { max-width: 72ch; }
.about-pg-north { max-width: none !important; }
.bring-lede { max-width: 80ch !important; }
.cs-hero .lede { max-width: 60ch; }
h1, h2, h3, h4, .big, .pg-north-big, .slide-serif, .slide-caps, .ic-label, .deck-note, .tl-name, .ft-copy b { text-wrap: balance; }
p, li, dd, dt, figcaption, blockquote, .tl-desc, .stat-l { text-wrap: pretty; }
/* Case-study fact row uses the hero's full width so short lists don't
   wrap into narrow columns */
.spread-cover .facts { max-width: min(80rem, 100%); }
.facts dd { text-wrap: balance; }
/* Short card text and list items: balance lines so none ends on one word */
.stat p, .stat span, .stat-l, .content li, .tile-stat span, .board-card p, .board-card li { text-wrap: balance; }
.tile .body p { text-wrap: balance; }
/* Principles: breathing room between the coral header and the posters */
.pg-hero.cs-hero { padding-bottom: clamp(3rem, 6vw, 5rem) !important; }
.pg-hero + .pg-grid { margin-top: clamp(2rem, 4vw, 3.5rem); }
/* Poster 04's line uses the same type as the other posters */
.pg-4 { font-family: var(--font); }
.pg-card.pg-4 p { font: 500 .88rem/1.35 var(--font); font-style: normal; }
/* Marty, sitting next to his credit in the footer */
.ft-joke { display: inline-flex; align-items: center; gap: .5rem; }
.ft-marty { height: 2.6rem; width: auto; margin-block: -.9rem -.6rem; transform: rotate(-4deg); transition: transform .3s var(--ease, ease); }
.ft-joke:hover .ft-marty { transform: rotate(4deg) translateY(-2px); }
@media (prefers-reduced-motion: reduce) { .ft-joke:hover .ft-marty { transform: rotate(-4deg); } }
.ft-joke { opacity: 1; color: color-mix(in srgb, currentColor 75%, transparent); }
.ft-marty { height: 3.1rem; margin-block: -1.2rem -.8rem; }

/* Homebot case study: Felicia as the same coded persona card as the
   home panel, in place of the old slide screenshot */
.persona-card--cs {
  container-type: inline-size;
  display: grid; grid-template-columns: 31% 1fr;
  width: 100%; max-width: 46rem; margin: .5rem auto 0;
  overflow: hidden; text-align: left; font-family: var(--font);
  background: var(--card); border-radius: 18px;
  box-shadow: inset 0 0 0 1px var(--edge), 0 24px 60px rgba(0, 0, 0, .35), 0 0 80px color-mix(in srgb, var(--pink) 12%, transparent);
  transform: rotate(1.5deg);
}
html[data-theme="light"] .persona-card--cs { box-shadow: inset 0 0 0 1px var(--edge), 0 18px 40px rgba(15, 17, 19, .10), 0 0 60px color-mix(in srgb, var(--pink) 10%, transparent); }
.persona-card--cs dl { display: flex !important; flex-direction: column; gap: 3.6cqi; max-width: none !important; margin: 0 !important; padding: 0 !important; border: 0 !important; }
.persona-card--cs dl > div { display: block; padding: 0; border: 0; }
.persona-card--cs dt { font-size: 2cqi !important; color: var(--ink-faint) !important; }
.persona-card--cs dd { font-size: 4.6cqi !important; color: var(--ink) !important; margin: .6cqi 0 0 !important; }
.persona-card--cs p, .persona-card--cs li { max-width: none; }
.persona-card--cs .pc-side ul, .persona-card--cs .pc-tags { margin-left: 0; }
.persona-card--cs .pc-side li { list-style: none; padding: 0; }
.persona-card--cs .pc-side li::before, .persona-card--cs .pc-tags li::before { display: none; }
figure:has(> .persona-card--cs) figcaption { margin-top: 1.5rem; }
@media (prefers-reduced-motion: reduce) { .persona-card--cs { transform: none; } }
.persona-card--cs .pc-name img {
  width: 8.5cqi !important; height: 8.5cqi !important; max-width: none !important; aspect-ratio: 1 !important;
  object-fit: cover; border-radius: 50% !important; margin: 0 !important; border: 0 !important;
  box-shadow: 0 0 0 .5cqi var(--card), 0 0 0 .8cqi var(--pink) !important;
}
.tl + .about-pg, ol + .about-pg { margin-top: clamp(2.5rem, 5vw, 3.5rem); }

/* Product screenshots shown as an app window on a tinted stage */
.app-shot { margin: 1.5rem 0 0; }
.app-shot .app-window {
  position: relative; overflow: hidden; border-radius: 12px; background: #1a1b1f;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .06), 0 24px 50px rgba(0, 0, 0, .35),
              0 0 70px color-mix(in srgb, var(--c-homebot, #f5a6bc) 22%, transparent);
  transform: rotate(-1deg); transition: transform .4s var(--ease, ease);
}
.app-shot:hover .app-window { transform: rotate(0deg) translateY(-4px); }
.app-chrome { display: flex; align-items: center; gap: 6px; padding: 9px 12px; background: #2a2d31; }
.app-chrome i { width: 9px; height: 9px; border-radius: 50%; background: #ff6159; }
.app-chrome i:nth-child(2) { background: #ffbd2e; } .app-chrome i:nth-child(3) { background: #28c941; }
.app-chrome b { margin: 0 auto; padding: 2px 14px; border-radius: 6px; background: #1d1f22; color: #9aa0a6; font: 500 .7rem/1.4 var(--mono); letter-spacing: .02em; }
.sheet .app-shot .app-window img, .app-shot .app-window img {
  display: block; width: 100%; height: auto; max-height: none !important; margin: 0;
  border: 0 !important; border-radius: 0 !important; box-shadow: none !important; object-fit: initial;
}
.app-shot figcaption { margin-top: 1.25rem; }
html[data-theme="light"] .app-shot .app-window {
  box-shadow: 0 0 0 1px rgba(16, 39, 31, .1), 0 20px 44px rgba(16, 39, 31, .18),
              0 0 70px color-mix(in srgb, var(--soft-pink) 40%, transparent);
}
@media (prefers-reduced-motion: reduce) { .app-shot .app-window, .app-shot:hover .app-window { transform: none; transition: none; } }
/* Tall screenshots: show the top, fade out, click for the whole thing */
.app-full { display: block; position: relative; text-decoration: none !important; }
.app-shot .app-window img { aspect-ratio: 1345 / 860; object-fit: cover !important; object-position: top !important; }
.app-full::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 32%;
  background: linear-gradient(180deg, transparent, #1a1b1f 88%); pointer-events: none;
}
.app-more {
  position: absolute; left: 50%; bottom: 1.1rem; transform: translateX(-50%); z-index: 1;
  padding: .45rem 1rem; border-radius: 999px; background: #f15ba7; color: #fff !important;
  font: 600 .8rem/1.2 var(--font); white-space: nowrap; transition: transform .25s var(--ease, ease);
}
.app-full:hover .app-more { transform: translateX(-50%) translateY(-2px); }
.app-full:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; }

/* Principles header, day mode: light background, dark text; coral stays
   as the accent on the labels and the North Star rule */
html[data-theme="light"] .cs-hero.pg-hero.pg-hero { background: var(--paper) !important; }
html[data-theme="light"] .pg-hero :is(h1, h2, p, span) { color: var(--ink) !important; -webkit-text-fill-color: var(--ink) !important; }
html[data-theme="light"] .pg-hero .pg-north-sub { color: var(--ink-soft) !important; -webkit-text-fill-color: var(--ink-soft) !important; }
html[data-theme="light"] .pg-hero :is(.eyebrow, .pg-north-label) { color: var(--lime-ink) !important; -webkit-text-fill-color: var(--lime-ink) !important; }
html[data-theme="light"] .pg-hero .pg-north { border-left-color: var(--coral) !important; }
html[data-theme="light"] .cs-hero.pg-hero.pg-hero:not(.ill-canvas) :is(h1, h2, p, span, .pg-north-big) { color: var(--ink) !important; -webkit-text-fill-color: var(--ink) !important; }
html[data-theme="light"] .cs-hero.pg-hero.pg-hero:not(.ill-canvas) .pg-north-sub { color: var(--ink-soft) !important; -webkit-text-fill-color: var(--ink-soft) !important; }
html[data-theme="light"] .cs-hero.pg-hero.pg-hero:not(.ill-canvas) :is(.eyebrow, .pg-north-label) { color: var(--lime-ink) !important; -webkit-text-fill-color: var(--lime-ink) !important; }
html[data-theme="light"] .cs-hero.pg-hero.pg-hero .pg-north { border-left-color: var(--coral) !important; }

/* =====================================================================
   THEME SWITCH, seamless: with the View Transitions API the old and new
   pages are two pictures. The new one is revealed through a feathered
   band that rises from the bottom (sunrise) or sinks from the top
   (sunset); the sky-sweep glow rides along on top.
   ===================================================================== */
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
::view-transition-group(root) { animation-duration: 1.25s; }
html[data-sky] ::view-transition-new(root) {
  -webkit-mask-size: 100% 300%; mask-size: 100% 300%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  animation: 1.25s cubic-bezier(.45, 0, .25, 1) both;
}
html[data-sky="rise"] ::view-transition-new(root) {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, transparent 35%, #000 65%, #000 100%);
          mask-image: linear-gradient(to bottom, transparent 0%, transparent 35%, #000 65%, #000 100%);
  animation-name: sky-reveal-up;
}
html[data-sky="set"] ::view-transition-new(root) {
  -webkit-mask-image: linear-gradient(to top, transparent 0%, transparent 35%, #000 65%, #000 100%);
          mask-image: linear-gradient(to top, transparent 0%, transparent 35%, #000 65%, #000 100%);
  animation-name: sky-reveal-down;
}
@keyframes sky-reveal-up   { from { -webkit-mask-position: 0 0%;   mask-position: 0 0%; }   to { -webkit-mask-position: 0 100%; mask-position: 0 100%; } }
@keyframes sky-reveal-down { from { -webkit-mask-position: 0 100%; mask-position: 0 100%; } to { -webkit-mask-position: 0 0%;   mask-position: 0 0%; } }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}
/* Voyager diagram: "pays for all" matches the other arrow labels */
.diagram svg text:nth-of-type(3) { fill: var(--ink-faint) !important; }
html[data-theme="light"] .diagram svg text:nth-of-type(3) { fill: var(--ink-faint) !important; }
/* Key phrase inside a statement: the page's own colour */
.big .hl { color: var(--page-ink, var(--lime)); -webkit-text-fill-color: var(--page-ink, var(--lime)); }
html:not([data-theme="light"]) .big .hl { color: var(--lime); -webkit-text-fill-color: var(--lime); }

/* Felicia column, quieter: a light tint and a thin outline in the accent
   instead of a solid block; text stays in the page's ink */
.persona-table .is-focus.is-focus {
  background: color-mix(in srgb, var(--lime) 13%, var(--card)) !important;
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--lime) 55%, transparent) !important;
}
.persona-table td.is-focus.is-focus { color: var(--ink); font-weight: 600; }
.persona-table th.is-focus.is-focus span { color: var(--ink-soft); }
.persona-table th.is-focus.is-focus b { color: var(--ink); }
.persona-table th.is-focus.is-focus img { box-shadow: 0 0 0 2px color-mix(in srgb, var(--lime) 70%, transparent); }
html:not([data-theme="light"]) .persona-table thead th.is-focus.is-focus { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--lime) 55%, transparent) !important; }

/* Header links, day mode: no box on hover; the text darkens and a thin
   coral line slides in under the word */
html[data-theme="light"] .site-header nav a:not(.cta) { position: relative; background: none !important; }
html[data-theme="light"] .site-header nav a:not(.cta)::after {
  content: ""; position: absolute; left: 50%; right: 50%; bottom: .45rem; height: 2px; border-radius: 2px;
  background: var(--coral); transition: left .25s var(--ease, ease), right .25s var(--ease, ease);
}
html[data-theme="light"] .site-header nav a:not(.cta):hover,
html[data-theme="light"] .site-header nav a:not(.cta):focus-visible { color: var(--ink); background: none !important; }
html[data-theme="light"] .site-header nav a:not(.cta):hover::after,
html[data-theme="light"] .site-header nav a:not(.cta):focus-visible::after { left: 1rem; right: 1rem; }
@media (prefers-reduced-motion: reduce) { html[data-theme="light"] .site-header nav a:not(.cta)::after { transition: none; } }
html[data-theme="light"] .site-header nav a:not(.cta)::after { bottom: -5px; }
html[data-theme="light"] .site-header nav a:not(.cta):hover::after,
html[data-theme="light"] .site-header nav a:not(.cta):focus-visible::after { left: 1.4rem; right: 1.4rem; }

/* Header CTA, night: a modern pill. No bottom ledge; a soft highlight on
   top, a quiet glow, and a small lift on hover */
html:not([data-theme="light"]) .site-header nav a.cta {
  border-radius: 999px !important; padding: .5rem 1.15rem !important;
  background: linear-gradient(180deg, color-mix(in srgb, var(--lime) 88%, #fff) 0%, var(--lime) 100%) !important;
  color: var(--on-lime) !important; font-weight: 600; letter-spacing: -.005em;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 0 0 1px color-mix(in srgb, var(--lime) 60%, transparent),
              0 6px 18px -6px color-mix(in srgb, var(--lime) 55%, transparent) !important;
  transition: transform .2s var(--ease, ease), box-shadow .2s var(--ease, ease), filter .2s ease;
}
html:not([data-theme="light"]) .site-header nav a.cta:hover,
html:not([data-theme="light"]) .site-header nav a.cta:focus-visible {
  transform: translateY(-1px); filter: brightness(1.05);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 0 0 1px var(--lime),
              0 10px 26px -8px color-mix(in srgb, var(--lime) 75%, transparent) !important;
}
html:not([data-theme="light"]) .site-header nav a.cta:active { transform: translateY(0); filter: brightness(.97); }
@media (prefers-reduced-motion: reduce) { html:not([data-theme="light"]) .site-header nav a.cta { transition: none; } }
/* Night: 'Read the case study' and other primary buttons match the
   header CTA pill */
html:not([data-theme="light"]) :is(.tenet-panel .read, .cs-section a.read) {
  border-radius: 999px !important;
  background: linear-gradient(180deg, color-mix(in srgb, var(--lime) 88%, #fff) 0%, var(--lime) 100%) !important;
  color: var(--on-lime) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 0 0 1px color-mix(in srgb, var(--lime) 60%, transparent),
              0 6px 18px -6px color-mix(in srgb, var(--lime) 55%, transparent) !important;
  transition: transform .2s var(--ease, ease), box-shadow .2s var(--ease, ease), filter .2s ease;
}
html:not([data-theme="light"]) :is(.tenet-panel .read, .cs-section a.read):hover {
  transform: translateY(-1px); filter: brightness(1.05);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 0 0 1px var(--lime),
              0 10px 26px -8px color-mix(in srgb, var(--lime) 75%, transparent) !important;
}
/* Compact tab bar: the open tab has no underline or bottom rule; its
   lighter fill and close button already mark it */
.tenets.is-compact .tenet.is-open .tenet-tab span { text-decoration: none !important; }
.tenets.is-compact .tenet.is-open, html[data-theme="light"] .tenets.is-compact .tenet.is-open { box-shadow: none !important; }

/* Smoother theme switch: no per-element transitions while the page
   swaps, a wider feathered edge, gentler easing, and the old picture
   dissolving out at the end */
html.theme-snap *, html.theme-snap *::before, html.theme-snap *::after { transition: none !important; }
html[data-sky] ::view-transition-new(root) {
  -webkit-mask-size: 100% 400%; mask-size: 100% 400%;
  animation-duration: 1.5s !important; animation-timing-function: cubic-bezier(.65, 0, .35, 1) !important;
}
html[data-sky="rise"] ::view-transition-new(root) {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, transparent 25%, #000 75%, #000 100%);
          mask-image: linear-gradient(to bottom, transparent 0%, transparent 25%, #000 75%, #000 100%);
}
html[data-sky="set"] ::view-transition-new(root) {
  -webkit-mask-image: linear-gradient(to top, transparent 0%, transparent 25%, #000 75%, #000 100%);
          mask-image: linear-gradient(to top, transparent 0%, transparent 25%, #000 75%, #000 100%);
}
html[data-sky] ::view-transition-old(root) { animation: sky-old-out 1.5s cubic-bezier(.65, 0, .35, 1) both; }
@keyframes sky-old-out { 0%, 55% { opacity: 1; } 100% { opacity: 0; } }
::view-transition-group(root) { animation-duration: 1.5s; }

/* =====================================================================
   MOTION (motion.js): panels ease in on scroll, numbers count up, a thin
   reading-progress line, and gentle hover on figures. Only applies when
   the script has run and the reader hasn't asked for reduced motion.
   ===================================================================== */
html.motion .reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease, ease) var(--d, 0ms), transform .7s var(--ease, ease) var(--d, 0ms); }
html.motion .reveal.is-in { opacity: 1; transform: none; }
.read-progress {
  position: fixed; left: 0; right: 0; top: 0; height: 2px; z-index: 1000; pointer-events: none;
  background: var(--page-tone, var(--lime)); transform: scaleX(0); transform-origin: 0 50%;
}
html.motion .cs-body figure img, html.motion .collage img { transition: transform .5s var(--ease, ease), box-shadow .5s var(--ease, ease); }
html.motion .cs-body figure:hover img, html.motion .collage img:hover { transform: scale(1.015); }
html.motion .stat, html.motion .tile, html.motion .board-card { transition: transform .35s var(--ease, ease), box-shadow .35s var(--ease, ease); }
@media (prefers-reduced-motion: reduce) { .read-progress { display: none; } }
/* Looking back, night: the label's chip fill is near-invisible on the
   panel, so drop it and line the text up with the statement below */
html:not([data-theme="light"]) :is(.lookback, .sheet > .spread.lookback) > h2 { background: none !important; box-shadow: none !important; padding-left: 0 !important; padding-right: 0 !important; }
/* Tilted stacks keep their angle: they fade in without the slide */
html.motion .ill-decks > .deck.reveal, html.motion .ill-decks > .deck.reveal.is-in { transform: rotate(var(--r, 0deg)); }
@media (max-width: 1179px) { html.motion .ill-decks > .deck.reveal, html.motion .ill-decks > .deck.reveal.is-in { transform: none; } }
/* Extreme ownership: warm off-white like the Designing for change poster,
   not pure white */
.pg-2, .about-pg-list .pg-2 { --c: var(--pg-paper, #f1eee8); }
html[data-theme="light"] .pg-2, html[data-theme="light"] .about-pg-list .pg-2 { --c: var(--ivory, #f8f4eb); }

/* Toggle hover: the sun turns its rays, the moon rocks */
.theme-toggle .tt-knob { transition: transform .9s cubic-bezier(.34, 1.3, .5, 1) !important; }
.theme-toggle:hover .tt-knob { transform: translateX(calc(var(--tt-w) - var(--tt-h))) rotate(-40deg) !important; }
.theme-toggle[aria-checked="true"]:hover .tt-knob { transform: rotate(180deg) !important; }
@media (prefers-reduced-motion: reduce) { .theme-toggle .tt-knob { transition: none !important; } }

/* Slower light/dark switch */
html[data-sky] ::view-transition-new(root) { animation-duration: 2.4s !important; }
html[data-sky] ::view-transition-old(root) { animation-duration: 2.4s !important; }
::view-transition-group(root) { animation-duration: 2.4s; }

/* =====================================================================
   END-OF-PAGE ACTIONS: previous / next case study as two cards; the next
   one carries the page colour on hover. Standalone pages use links, the
   home page's inline case studies use buttons (.next-link).
   ===================================================================== */
.next { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; padding: clamp(2rem, 4vw, 3rem) var(--gutter) clamp(2.5rem, 5vw, 4rem); max-width: none; }
.next > a, .next > .next-link {
  all: unset; box-sizing: border-box; cursor: pointer;
  display: flex; flex-direction: column; justify-content: center; gap: .3rem; min-height: 6.5rem;
  padding: 1.25rem 1.5rem; border-radius: 18px; background: var(--card);
  box-shadow: inset 0 0 0 1px var(--edge);
  font-family: var(--display); font-weight: 650; font-size: clamp(1.15rem, 1.8vw, 1.5rem); letter-spacing: -.02em;
  color: var(--ink) !important; text-decoration: none !important;
  transition: transform .3s var(--ease, ease), box-shadow .3s var(--ease, ease), background-color .3s ease;
}
.next > a:last-child, .next > .next-link--next { text-align: right; align-items: flex-end; }
.next > a:only-child { grid-column: 2; }
.next small { font: 500 .7rem/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); }
.next > a:hover, .next > .next-link:hover, .next > a:focus-visible, .next > .next-link:focus-visible {
  transform: translateY(-3px);
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--page-tone, var(--lime)) 70%, transparent), 0 14px 34px -14px color-mix(in srgb, var(--page-tone, var(--lime)) 60%, transparent);
}
.next > a:last-child:hover, .next > .next-link--next:hover { background: color-mix(in srgb, var(--page-tone, var(--lime)) 12%, var(--card)); }
.next--inline { padding-inline: 0; margin-top: 1rem; }
@media (max-width: 640px) { .next { grid-template-columns: 1fr; } .next > a:only-child { grid-column: auto; } }
@media (prefers-reduced-motion: reduce) { .next > a, .next > .next-link { transition: none; } }
.next.next--inline { padding-inline: var(--gutter, 24px); margin-top: 0; }
/* Slower, smoother sun turn on hover */
.theme-toggle[aria-checked="true"] .tt-knob { transition: transform 2.2s cubic-bezier(.25, .8, .35, 1) !important; }

/* Screenshot modal */
.shot-modal {
  width: min(1100px, calc(100vw - 32px)); max-width: none; max-height: calc(100vh - 48px);
  padding: 0; border: 0; border-radius: 16px; overflow: auto; overscroll-behavior: contain;
  background: #1a1b1f; box-shadow: 0 30px 80px rgba(0, 0, 0, .5);
}
.shot-modal::backdrop { background: rgba(10, 12, 14, .72); backdrop-filter: blur(6px); }
.shot-modal img { display: block; width: 100%; height: auto; }
.shot-close {
  position: sticky; top: 12px; float: right; margin: 12px 12px -56px 0; z-index: 1;
  width: 44px; height: 44px; border: 0; border-radius: 999px; cursor: pointer;
  background: rgba(20, 22, 24, .78); color: #fff; font-size: 1.6rem; line-height: 1;
  backdrop-filter: blur(6px); box-shadow: 0 0 0 1px rgba(255, 255, 255, .15);
}
.shot-close:hover { background: rgba(20, 22, 24, .95); }
.shot-close:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
html.shot-open { overflow: hidden; }
@media (prefers-reduced-motion: no-preference) {
  .shot-modal[open] { animation: shot-in .3s var(--ease, ease); }
  @keyframes shot-in { from { opacity: 0; transform: translateY(12px) scale(.98); } }
}
/* Previous / next: plain text links, no boxes */
.next > a, .next > .next-link {
  background: none !important; box-shadow: none !important; border-radius: 0; padding: .5rem 0; min-height: 0;
}
.next > a:hover, .next > .next-link:hover, .next > a:focus-visible, .next > .next-link:focus-visible,
.next > a:last-child:hover, .next > .next-link--next:hover {
  background: none !important; box-shadow: none !important; transform: none;
  color: var(--page-ink, var(--lime)) !important;
}
html:not([data-theme="light"]) .next > a:hover, html:not([data-theme="light"]) .next > .next-link:hover { color: var(--lime) !important; }
.next > a:hover small, .next > .next-link:hover small { color: inherit; }
.next { border-top: 1px solid var(--rule); }
.next.next--inline { margin-top: clamp(1rem, 3vw, 2rem); }

/* Case-study headers, day mode: a soft tint of the page colour instead of
   a solid block; text in the page's ink, the label in a deepened tone */
html[data-theme="light"] .cs-hero.cs-hero:not(.ill-canvas):not(.pg-hero) {
  background: var(--paper) !important;
}
html[data-theme="light"] .cs-hero.cs-hero:not(.ill-canvas):not(.pg-hero) :is(h1, h2, p, li, span, dt, dd, b, strong, a, mark) {
  color: var(--ink) !important; -webkit-text-fill-color: var(--ink) !important;
}
html[data-theme="light"] .cs-hero.cs-hero:not(.ill-canvas):not(.pg-hero) :is(.lede, dd, .cover-meta span) {
  color: var(--ink-soft) !important; -webkit-text-fill-color: var(--ink-soft) !important;
}
html[data-theme="light"] .cs-hero.cs-hero:not(.ill-canvas):not(.pg-hero) .eyebrow {
  color: color-mix(in srgb, var(--tone) 65%, var(--forest-black)) !important;
  -webkit-text-fill-color: color-mix(in srgb, var(--tone) 65%, var(--forest-black)) !important;
}
html[data-theme="light"] .cs-hero.cs-hero:not(.ill-canvas):not(.pg-hero) :is(.facts, .cover-meta, hr) { border-color: var(--rule) !important; }

/* =====================================================================
   PHONES: header on one line; persona card hidden like the other
   home-tab images (it would sit on top of the text)
   ===================================================================== */
@media (max-width: 760px) {
  .site-header { flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; padding: 0 .75rem !important; min-height: 3.5rem; }
  .site-header .name { width: 3.6rem !important; height: 2.7rem !important; padding: 0 !important; border-bottom: 0 !important; flex: none; }
  body:has(.tenets) .site-header .name { padding-left: 0 !important; }
  .site-header nav { flex-wrap: nowrap !important; align-items: center; gap: 0 !important; margin-left: auto; }
  .site-header nav a:not(.cta) { padding: .5rem .55rem !important; font-size: .82rem; }
  .site-header nav a.cta { margin: 0 0 0 .4rem !important; padding: .42rem .8rem !important; font-size: .8rem; white-space: nowrap; }
  .site-header .theme-toggle { --tt-w: 2.9rem; --tt-h: 1.55rem; margin: 0 .2rem 0 .35rem !important; flex: none; }
  .tenet-panel .panel-media.persona-card { display: none !important; }
}
@media (max-width: 420px) {
  .site-header { padding: 0 .6rem !important; }
  .site-header .name { width: 3.2rem !important; height: 2.4rem !important; }
  .site-header nav a:not(.cta) { padding: .5rem .4rem !important; font-size: .78rem; }
  .site-header nav a.cta { padding: .4rem .65rem !important; font-size: .78rem; }
}
@media (max-width: 370px) {
  .site-header nav a[href*="linkedin.com"] { display: none !important; }
}