/* www.hestia247.com — the Steep style (platform/www/DESIGN.md: serif at regular weight on paper, one warm pair, 24px cards,
   pill buttons, hairline borders, no shadow on content) with Hestia's warmth: the peach/sienna pair is the hearth, the one
   glowing place on the page, and the flame mark adds a single ember tone. Fonts: the reference's open substitutes. */
:root {
  --ink: #17191c;
  --paper: #ffffff;
  --mist: #f2f2f3;
  --fog: #fafafb;
  --slate: #777b86;
  --ash: #979799;
  --smoke: #a3a6af;
  --hairline: #ececec;
  --blush-peach: #fbe1d1;
  --sienna: #5d2a1a;
  --ember: #b5462a;                 /* the flame mark only: between peach and sienna, no new hue */
  --serif: "Source Serif 4", "Signifier", Georgia, ui-serif, serif;
  --sans: "Inter", "Sohne", ui-sans-serif, system-ui, sans-serif;
  --r-card: 24px;
  --r-input: 16px;
  --max: 1200px;
  --gutter: 16px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--sans); font-size: 17px; line-height: 1.35; font-weight: 400;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-family: var(--serif); font-weight: 400; margin: 0; }
h1 { font-size: clamp(44px, 7vw, 90px); line-height: 1.08; letter-spacing: -0.025em; }
h1 em { font-style: italic; }
h2 { font-size: clamp(34px, 4.5vw, 64px); line-height: 1.15; letter-spacing: -0.015em; }
h3 { font-size: 26px; line-height: 1.18; letter-spacing: -0.009em; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
.eyebrow { font-size: 15px; color: var(--slate); margin-bottom: 16px; letter-spacing: 0; }
.lede { font-size: 20px; line-height: 1.4; color: var(--ink); max-width: 36em; }
.lede.narrow { max-width: 30em; margin-left: 0; }
.sr { position: absolute; left: -9999px; }

/* pills */
.pill {
  display: inline-flex; align-items: center; justify-content: center; height: 44px; padding: 0 20px;
  border-radius: 9999px; background: var(--ink); color: var(--paper); border: 1px solid var(--ink);
  font: inherit; font-size: 16px; cursor: pointer; white-space: nowrap; transition: background .15s, color .15s;
}
.pill:hover { background: #2a2d33; border-color: #2a2d33; }
.pill.ghost { background: transparent; color: var(--ink); }
.pill.ghost:hover { background: var(--mist); }
.actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 32px; }

/* top bar: whisper-quiet */
.top {
  max-width: var(--max); margin: 0 auto; padding: 20px var(--gutter);
  display: flex; align-items: center; gap: 24px;
}
.wordmark { display: inline-flex; align-items: center; gap: 8px; font-family: var(--serif); font-size: 24px; letter-spacing: -0.01em; }
.flame { width: 18px; height: 24px; color: var(--ember); }
.flame.small { width: 12px; height: 16px; margin-right: 6px; vertical-align: -3px; }
.flame.big { width: 36px; height: 48px; margin-bottom: 20px; }
.nav { display: flex; gap: 24px; margin-left: 16px; font-size: 16px; }
.nav a { padding: 2px 0; }
.nav a:hover { text-decoration: underline; text-underline-offset: 4px; }
.top-actions { margin-left: auto; display: flex; gap: 8px; }

/* hero */
.hero {
  max-width: var(--max); margin: 0 auto; padding: 64px var(--gutter) 96px;
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 40px; align-items: center;
}
.hero-copy .lede { margin-top: 24px; }
.artifacts { position: relative; min-height: 460px; }
.artifact {
  position: absolute; background: var(--paper); border-radius: 20px; padding: 16px 20px 12px 12px;
  box-shadow: 0 0 0 1px rgba(4,23,43,.05), 0 20px 25px -5px rgba(0,0,0,.1), 0 8px 10px -6px rgba(0,0,0,.1);
  font-size: 14px;
}
.a-card { left: 0; top: 0; width: 230px; padding: 12px; }
.a-card-top { display: flex; gap: 5px; padding: 2px 4px 10px; }
.a-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--hairline); }
.a-canvas {
  aspect-ratio: 4 / 5; border-radius: 12px; position: relative; overflow: hidden; color: #fff;
  background: linear-gradient(170deg, var(--blush-peach) 0%, #e8b89c 45%, var(--sienna) 100%);
}
.a-logo { position: absolute; top: 12px; right: 12px; width: 22px; height: 22px; border-radius: 50%; background: var(--paper); opacity: .9; }
.a-headline { position: absolute; left: 12px; right: 12px; bottom: 12px; font-family: var(--serif); line-height: 1.1; }
.a-headline b { display: block; font-family: var(--sans); font-weight: 500; font-size: 11px; letter-spacing: .08em; color: var(--blush-peach); margin-bottom: 6px; }
.a-headline span { font-size: 17px; }
.a-status { right: 0; top: 48px; width: 250px; }
.a-row { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--hairline); }
.a-row:last-child { border-bottom: 0; }
.a-label { font-weight: 500; }
.a-ready { color: var(--slate); }
.a-making { color: var(--sienna); background: var(--blush-peach); border-radius: 9999px; padding: 1px 10px; }
.a-caption { left: 70px; bottom: 0; width: 320px; padding: 16px; border: 1px solid var(--hairline); box-shadow: 0 0 0 1px rgba(4,23,43,.05), 0 20px 25px -5px rgba(0,0,0,.1); }
.a-tag { font-size: 13px; color: var(--ash); }
.a-caption p { margin: 6px 44px 0 0; font-size: 15px; line-height: 1.45; }
.a-send { position: absolute; right: 14px; bottom: 14px; width: 40px; height: 40px; border-radius: 50%; background: var(--ink); }
.a-send::after { content: "→"; color: #fff; position: absolute; inset: 0; display: grid; place-items: center; font-size: 18px; }

/* the mechanism loop: three panes, one card travelling through them; loop.js steps data-step 0..11, the rules below draw each */
.loop { padding: 0 0 96px; }
.loop-inner { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.loop .lede { margin-top: 20px; color: var(--slate); }
.stage { position: relative; margin-top: 40px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.pane { position: relative; background: var(--mist); border-radius: var(--r-card); padding: 20px; min-height: 340px; font-size: 14px; overflow: hidden; transition: background .4s; }
.pane-t { display: flex; justify-content: space-between; font-weight: 500; margin-bottom: 16px; }
.pane-t .dim { color: var(--ash); font-weight: 400; }
.stage .fade, .art, .wire, .games, .chips span, .field, .mk, .p2 .card, .cap, .ok, .grid, .slot-t, .chan, .posted, .token { opacity: 0; transition: opacity .4s, transform .5s cubic-bezier(.2,.7,.2,1), background .3s, color .3s, border-color .3s; }
/* pane 1 */
.art { display: flex; gap: 10px; align-items: center; background: var(--paper); border-radius: 12px; padding: 10px 12px; margin-bottom: 8px; border: 1px solid transparent; transform: translateY(8px); }
.art i { width: 36px; height: 36px; border-radius: 8px; background: linear-gradient(135deg, #d8dbe3, #b5b9c4); flex: none; }
.art b { font-weight: 400; line-height: 1.3; }
.wire { display: flex; align-items: center; gap: 10px; margin-top: 12px; color: var(--slate); transform: translateY(8px); }
.wire i { width: 44px; height: 44px; border-radius: 10px; background: linear-gradient(160deg, #3b3f49, #0b0b0c); }
.games { display: flex; justify-content: space-between; margin-top: 12px; padding: 10px 12px; background: var(--paper); border-radius: 12px; color: var(--slate); }
.games span:first-child { color: var(--ink); font-weight: 500; }
/* pane 2 */
.chips { display: flex; gap: 8px; margin-bottom: 12px; }
.chips span { padding: 6px 12px; border-radius: 9999px; border: 1px solid var(--ink); background: var(--paper); font-size: 13px; transform: translateY(6px); }
.field { background: var(--paper); border: 1px solid var(--hairline); border-radius: 12px; padding: 10px 12px; min-height: 40px; margin-bottom: 10px; overflow: hidden; }
.field .typed { display: inline-block; white-space: nowrap; overflow: hidden; width: 0; border-right: 2px solid var(--ink); transition: width 1.6s steps(38); }
.mk { font: inherit; font-size: 14px; border-radius: 9999px; background: var(--ink); color: var(--paper); border: 0; padding: 8px 16px; transform: scale(1); }
.p2 .card { position: absolute; left: 20px; right: 20px; bottom: 20px; width: 120px; aspect-ratio: 4 / 5; padding: 0; border-radius: 10px; overflow: hidden; background: #000; color: #fff; font-family: "Anton", Impact, sans-serif; text-transform: uppercase; line-height: 1; transform: scale(.6); transform-origin: bottom left; }
.card.lasr .ph { position: absolute; inset: 0; background: radial-gradient(45% 38% at 62% 36%, rgba(255,255,255,.5), rgba(255,255,255,0)), linear-gradient(160deg, #5a4a10, #000 70%); }
.card.lasr .mark { position: absolute; top: 6px; right: 6px; font-size: 9px; color: #FFD51E; letter-spacing: .06em; }
.card.lasr .foot { position: absolute; left: 8px; right: 8px; bottom: 8px; }
.card.lasr .foot b { display: block; color: #FFD51E; font-size: 9px; margin-bottom: 3px; }
.card.lasr .foot p { margin: 0; font-size: 12px; line-height: 1.02; }
.cap { position: absolute; left: 156px; right: 20px; bottom: 54px; }
.cap-t { display: block; font-size: 12px; color: var(--ash); margin-bottom: 6px; }
.cap i { display: block; height: 8px; border-radius: 4px; background: #d8dbe3; margin-bottom: 6px; }
.cap i.short { width: 60%; }
.ok { position: absolute; left: 156px; bottom: 24px; color: var(--ink); font-weight: 500; }
/* pane 3 */
.grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; font-size: 11px; color: var(--ash); text-align: center; }
.grid i { display: block; height: 30px; border-radius: 8px; background: var(--paper); border: 1px solid var(--hairline); }
.grid i.did { background: var(--ink); border-color: var(--ink); }
.grid i.slot { border: 1.5px dashed var(--ink); }
.slot-t { margin-top: 12px; font-weight: 500; }
.chan { display: flex; gap: 8px; margin-top: 12px; }
.chan span { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--hairline); background: var(--paper); display: grid; place-items: center; font-size: 11px; color: var(--ash); transition: background .3s, color .3s; }
.posted { margin-top: 12px; display: inline-block; background: var(--ink); color: var(--paper); border-radius: 9999px; padding: 6px 14px; }
/* the travelling card */
.token { position: absolute; width: 56px; aspect-ratio: 4 / 5; border-radius: 6px; overflow: hidden; background: #000; color: #FFD51E; font-family: "Anton", Impact, sans-serif; text-transform: uppercase; font-size: 7px; z-index: 3; left: 40%; top: 50%; box-shadow: 0 8px 16px rgba(0,0,0,.2); transition: opacity .4s, left .7s cubic-bezier(.2,.7,.2,1), top .7s cubic-bezier(.2,.7,.2,1), transform .7s; }
.token .ph { position: absolute; inset: 0; background: linear-gradient(160deg, #5a4a10, #000 70%); }
.token b { position: absolute; left: 5px; bottom: 5px; }
/* steps */
.stage[data-step="0"] .art, .stage:not([data-step="0"]):not([data-step="11"]) .art { opacity: 1; transform: none; }
.stage[data-step="1"] .a2, .stage[data-step="2"] .a2, .stage[data-step="3"] .a2, .stage[data-step="4"] .a2, .stage[data-step="5"] .a2, .stage[data-step="6"] .a2, .stage[data-step="7"] .a2, .stage[data-step="8"] .a2, .stage[data-step="9"] .a2, .stage[data-step="10"] .a2 { border-color: var(--ink); }
.stage:not([data-step="0"]):not([data-step="1"]):not([data-step="11"]) .wire, .stage:not([data-step="0"]):not([data-step="1"]):not([data-step="11"]) .games { opacity: 1; transform: none; }
.stage[data-step="3"] .chips span, .stage[data-step="4"] .chips span, .stage[data-step="5"] .chips span, .stage[data-step="6"] .chips span, .stage[data-step="7"] .chips span, .stage[data-step="8"] .chips span, .stage[data-step="9"] .chips span, .stage[data-step="10"] .chips span { opacity: 1; transform: none; }
.stage[data-step="3"] .c1, .stage[data-step="4"] .c1, .stage[data-step="5"] .c1, .stage[data-step="6"] .c1, .stage[data-step="7"] .c1, .stage[data-step="8"] .c1, .stage[data-step="9"] .c1, .stage[data-step="10"] .c1 { background: var(--ink); color: var(--paper); }
.stage[data-step="4"] .field, .stage[data-step="5"] .field, .stage[data-step="6"] .field, .stage[data-step="7"] .field, .stage[data-step="8"] .field, .stage[data-step="9"] .field, .stage[data-step="10"] .field, .stage[data-step="4"] .mk, .stage[data-step="5"] .mk, .stage[data-step="6"] .mk, .stage[data-step="7"] .mk, .stage[data-step="8"] .mk, .stage[data-step="9"] .mk, .stage[data-step="10"] .mk { opacity: 1; }
.stage[data-step="4"] .typed, .stage[data-step="5"] .typed, .stage[data-step="6"] .typed, .stage[data-step="7"] .typed, .stage[data-step="8"] .typed, .stage[data-step="9"] .typed, .stage[data-step="10"] .typed { width: 100%; border-right-color: transparent; }
.stage[data-step="5"] .mk { transform: scale(.92); background: #2a2d33; }
.stage[data-step="5"] .p2 .card, .stage[data-step="6"] .p2 .card, .stage[data-step="7"] .p2 .card, .stage[data-step="8"] .p2 .card, .stage[data-step="9"] .p2 .card, .stage[data-step="10"] .p2 .card { opacity: 1; transform: scale(1); }
.stage[data-step="6"] .cap, .stage[data-step="7"] .cap, .stage[data-step="8"] .cap, .stage[data-step="9"] .cap, .stage[data-step="10"] .cap, .stage[data-step="6"] .ok, .stage[data-step="7"] .ok, .stage[data-step="8"] .ok, .stage[data-step="9"] .ok, .stage[data-step="10"] .ok { opacity: 1; }
.stage[data-step="7"] .grid, .stage[data-step="8"] .grid, .stage[data-step="9"] .grid, .stage[data-step="10"] .grid { opacity: 1; }
.stage[data-step="7"] .token, .stage[data-step="8"] .token { opacity: 1; }
.stage[data-step="8"] .grid i.slot, .stage[data-step="9"] .grid i.slot, .stage[data-step="10"] .grid i.slot { background: #FFD51E; border-color: #FFD51E; }
.stage[data-step="8"] .slot-t, .stage[data-step="9"] .slot-t, .stage[data-step="10"] .slot-t { opacity: 1; }
.stage[data-step="9"] .chan, .stage[data-step="10"] .chan { opacity: 1; }
.stage[data-step="9"] .chan span, .stage[data-step="10"] .chan span { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.stage[data-step="10"] .posted { opacity: 1; }
.stage[data-step="11"] .pane > * { opacity: 0; }
.loop-foot { display: flex; gap: 24px; align-items: flex-start; justify-content: space-between; margin-top: 24px; }
.chapters { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; flex: 1; }
.chapters li { display: grid; grid-template-columns: 28px 1fr; gap: 4px 10px; color: var(--ash); font-size: 15px; transition: color .3s; }
.chapters li b { grid-row: span 2; width: 28px; height: 28px; border-radius: 50%; border: 1px solid currentColor; display: grid; place-items: center; font-weight: 500; }
.chapters li span { grid-column: 2; font-size: 14px; line-height: 1.4; }
.chapters li.on { color: var(--ink); }
.chapters li.on b { background: var(--ink); color: var(--paper); border-color: var(--ink); }
@media (prefers-reduced-motion: reduce) { .stage * { transition: none !important; } }

/* sections */
section { scroll-margin-top: 24px; }
.band { background: var(--fog); padding: 80px 0; }
.band > *, .makes > *, .open-inner, .request-inner { max-width: var(--max); margin-left: auto; margin-right: auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 40px; }
.card { background: var(--mist); border-radius: var(--r-card); padding: 28px 24px 32px; }
.band .card { background: var(--paper); }
.num { font-size: 14px; color: var(--ash); display: block; margin-bottom: 40px; }
.card h3 { margin-bottom: 12px; }
.card p { color: var(--ink); font-size: 16px; line-height: 1.5; }

.makes { padding: 96px 0 80px; }
.makes .lede { margin-top: 20px; color: var(--slate); }
/* the gallery: layouts drawn small, repainted per industry (gallery.js sets --cb brand, --ch accent, a theme and a motif on
   the grid). Every class is prefixed g- so nothing else on the page can restyle a card. Type scales with the card (cqw). */
.industries { display: flex; flex-wrap: wrap; gap: 8px; max-width: var(--max); margin: 32px auto 0; padding: 0 var(--gutter); }
.industries button { font: inherit; font-size: 15px; height: 38px; padding: 0 16px; border-radius: 9999px; border: 1px solid var(--ink); background: transparent; color: var(--ink); cursor: pointer; }
.industries button[aria-selected="true"] { background: var(--ink); color: var(--paper); }
.gallery { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px 16px; max-width: var(--max); margin: 24px auto 0; padding: 0 var(--gutter);
  --cb: #1A2B3C; --ch: #FF6600; --g-page: #0b0b0c; --g-text: #fff; --g-dim: #b9bcc4; --g-hot: var(--ch); --g-line: rgba(255,255,255,.2); --g-glow: rgba(255,255,255,.5); }
.gallery.g-light { --g-page: #F4EFE9; --g-text: #17191c; --g-dim: #6b6f78; --g-hot: var(--ch); --g-line: rgba(23,25,28,.18); --g-glow: rgba(255,255,255,.9); }
.gallery-foot { max-width: var(--max); margin: 24px auto 0; padding: 0 var(--gutter); }
.g-cell { display: grid; grid-template-rows: auto auto; gap: 10px; align-content: start; }
.g-cap { font-size: 14px; color: var(--slate); line-height: 1.35; margin: 0; }
.g-cap b { display: block; color: var(--ink); font-weight: 500; font-size: 15px; }
.g-mini { aspect-ratio: 4 / 5; width: 100%; border-radius: 12px; overflow: hidden; position: relative; isolation: isolate; background: var(--g-page); color: var(--g-text);
  container-type: inline-size; font-family: "Anton", Impact, "Arial Narrow", sans-serif; text-transform: uppercase; line-height: 1; }
.g-reel { aspect-ratio: 9 / 16; width: 70.3%; margin: 0 auto; }
.g-mini i { font-style: normal; color: var(--g-hot); }
.g-mini p { margin: 0; }
/* the photo: a gradient in the brand's colours, treated per motif */
.g-ph { position: absolute; inset: 0; background: radial-gradient(45% 38% at 62% 38%, var(--g-glow) 0%, rgba(255,255,255,0) 100%), linear-gradient(160deg, color-mix(in srgb, var(--ch) 35%, var(--cb)) 0%, var(--cb) 50%, #000 100%); }
.g-ph::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.85) 0%, rgba(0,0,0,.25) 45%, rgba(0,0,0,0) 70%); }
.g-motif-arena .g-ph::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(115deg, rgba(255,255,255,.07) 0 2px, transparent 2px 16px); }
.g-motif-spot .g-ph { background: radial-gradient(30% 45% at 25% 20%, rgba(255,255,255,.55), rgba(255,255,255,0) 100%), radial-gradient(35% 40% at 75% 45%, color-mix(in srgb, var(--ch) 55%, transparent), transparent 100%), linear-gradient(170deg, var(--cb) 0%, #000 100%); }
.g-motif-chart .g-ph { background: linear-gradient(160deg, color-mix(in srgb, var(--ch) 20%, var(--cb)) 0%, var(--cb) 45%, #000 100%); }
.g-motif-chart .g-ph::before { content: ""; position: absolute; inset: 0; opacity: .55;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolyline points='0,78 14,70 28,74 42,58 56,62 70,44 84,36 100,22' fill='none' stroke='white' stroke-width='1.2' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") center / 100% 100% no-repeat,
  repeating-linear-gradient(to top, rgba(255,255,255,.12) 0 1px, transparent 1px 14cqw); }
.g-motif-grid .g-ph { background: radial-gradient(40% 36% at 60% 40%, color-mix(in srgb, var(--ch) 45%, transparent), transparent 100%), linear-gradient(160deg, var(--cb) 0%, #000 100%); }
.g-motif-grid .g-ph::before { content: ""; position: absolute; inset: 0; background: radial-gradient(rgba(255,255,255,.28) 1px, transparent 1.4px) 0 0 / 7cqw 7cqw; }
.g-motif-bands .g-ph { background: linear-gradient(160deg, color-mix(in srgb, var(--ch) 25%, var(--cb)) 0%, var(--cb) 50%, #000 100%); }
.g-motif-bands .g-ph::before { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 38%, color-mix(in srgb, var(--ch) 70%, transparent) 38% 52%, transparent 52% 60%, rgba(255,255,255,.35) 60% 66%, transparent 66%); }
.g-motif-soft .g-ph { background: radial-gradient(50% 42% at 55% 40%, rgba(255,255,255,.9), rgba(255,255,255,0)), linear-gradient(160deg, color-mix(in srgb, var(--ch) 45%, #fff) 0%, color-mix(in srgb, var(--ch) 30%, #e9ddd6) 60%, #cfc2bb 100%); }
.g-motif-soft .g-ph::after { background: linear-gradient(to top, rgba(244,239,233,.95) 0%, rgba(244,239,233,.3) 45%, rgba(244,239,233,0) 70%); }
.g-logo { position: absolute; top: 5cqw; right: 5cqw; width: 12cqw; height: 12cqw; border-radius: 50%; background: var(--cb); color: #fff; border: 1.5cqw solid #fff; display: grid; place-items: center; font-size: 6cqw; z-index: 2; }
.g-light .g-logo { border-color: var(--cb); background: #fff; color: var(--cb); }
.g-bottom { position: absolute; left: 6cqw; right: 6cqw; bottom: 6cqw; z-index: 2; }
.g-kick { display: block; color: var(--g-hot); font-size: 6cqw; letter-spacing: .04em; margin-bottom: 2.5cqw; }
.g-h { font-size: 10cqw; line-height: 1.02; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.g-name { font-size: 9cqw; line-height: 1; }
.g-dim { display: block; font-family: var(--sans); text-transform: none; color: var(--g-dim); font-size: 4cqw; margin: 1.5cqw 0 4cqw; }
.g-row { display: flex; align-items: baseline; gap: 3cqw; border-top: 1px solid var(--g-line); padding: 2.4cqw 0 2cqw; }
.g-row b { font-weight: 400; font-size: 10cqw; color: var(--g-hot); min-width: 34cqw; letter-spacing: -.01em; }
.g-row span { font-size: 4.6cqw; }
/* quote */
.g-quote .g-ph.g-top { bottom: 42%; }
.g-quote .g-ph.g-top::after { background: linear-gradient(to top, var(--g-page) 0%, transparent 60%); }
.g-quote .g-bottom { bottom: 7cqw; }
.g-qm { font-family: var(--serif); font-size: 28cqw; line-height: .3; color: var(--g-hot); display: block; height: 9cqw; }
.g-quote .g-h { font-size: 9cqw; -webkit-line-clamp: 4; }
.g-who { display: block; color: var(--g-hot); font-size: 5.4cqw; margin-top: 5cqw; }
.g-role { display: block; font-family: var(--sans); text-transform: none; color: var(--g-dim); font-size: 4.2cqw; margin-top: 1.5cqw; }
/* hero */
.g-hero .g-sub { font-size: 5.2cqw; text-align: center; margin-bottom: 3cqw; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.g-hero .g-word { font-size: 22cqw; text-align: center; letter-spacing: -.01em; background: linear-gradient(var(--g-text) 35%, var(--g-hot)); -webkit-background-clip: text; background-clip: text; color: transparent; white-space: nowrap; }
/* top ten */
.g-topten { display: grid; grid-template-columns: 56% 44%; gap: 3cqw; padding: 4cqw; }
.g-topten ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.6cqw; }
.g-topten li { background: var(--cb); color: #fff; border: .6cqw solid var(--g-text); border-radius: 2cqw; font-size: 4.4cqw; padding: 0 2.5cqw; height: 7.6cqw; display: flex; align-items: center; gap: 2.5cqw; white-space: nowrap; overflow: hidden; }
.g-topten li span { font-size: 3.4cqw; min-width: 4cqw; opacity: .8; }
.g-panel { position: relative; border: .6cqw solid var(--g-text); border-radius: 3cqw; overflow: hidden; display: flex; flex-direction: column; align-items: center; padding-top: 5cqw; }
.g-panel .g-t { font-size: 11cqw; line-height: .95; text-align: center; z-index: 1; }
.g-panel .g-s { margin: 2cqw 2cqw 0; font-family: var(--sans); text-transform: none; font-size: 3.4cqw; text-align: center; color: var(--g-dim); z-index: 1; }
.g-panel .g-ph { top: 40%; }
.g-panel .g-ph::after { background: none; }
/* stats, pairs */
.g-stats .g-ph, .g-pairs .g-ph { bottom: 40%; }
.g-stats .g-ph::after, .g-pairs .g-ph::after { background: linear-gradient(to top, var(--g-page) 0%, transparent 50%); }
.g-tag { display: inline-block; background: var(--g-hot); color: #0b0b0c; font-size: 4cqw; padding: 1.2cqw 3cqw; border-radius: 9999px; margin-bottom: 3cqw; }
.g-stats .g-name { margin-bottom: 3cqw; }
/* versus */
.g-versus .g-ph.g-l { right: 50%; }
.g-versus .g-ph.g-r { left: 50%; }
.g-versus .g-ph::after { background: linear-gradient(to top, var(--g-page) 0%, var(--g-page) 32%, transparent 66%); }
.g-versus::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: var(--g-text); opacity: .7; z-index: 1; }
.g-vs { position: absolute; left: 50%; top: 58%; transform: translate(-50%, -50%); width: 10cqw; height: 10cqw; border-radius: 50%; background: var(--g-text); color: var(--g-page); display: grid; place-items: center; font-size: 4cqw; z-index: 3; }
.g-versus .g-bottom { display: grid; grid-template-columns: 1fr 1fr; gap: 6cqw; text-align: center; bottom: 7cqw; left: 4cqw; right: 4cqw; }
.g-versus .g-bottom b { display: block; font-weight: 400; font-size: 14cqw; color: var(--g-hot); letter-spacing: -.02em; white-space: nowrap; }
.g-versus .g-bottom span { font-size: 4.4cqw; display: block; margin-top: 1cqw; }
/* fan question */
.g-fan .g-h { font-size: 11cqw; -webkit-line-clamp: 4; }
.g-cta { display: inline-block; margin-top: 4cqw; border: .5cqw solid var(--g-text); border-radius: 9999px; padding: 1.5cqw 4cqw; font-size: 4.2cqw; }
/* news */
.g-news .g-ph.g-top { bottom: 46%; }
.g-news .g-ph.g-top::after { background: linear-gradient(to top, var(--g-page) 0%, transparent 55%); }
.g-pill { display: inline-block; background: var(--g-hot); color: #0b0b0c; font-size: 4.2cqw; padding: 1.2cqw 3cqw; border-radius: 1.5cqw; margin-bottom: 3cqw; }
.g-news .g-h { font-size: 9.5cqw; -webkit-line-clamp: 4; }
.g-cat { display: block; margin-top: 4cqw; font-size: 4cqw; color: var(--g-dim); letter-spacing: .08em; }
/* rankings */
.g-rank { padding: 6cqw; }
.g-rank .g-head { position: relative; z-index: 2; }
.g-rank ol { list-style: none; margin: 0; padding: 0; position: relative; z-index: 2; display: grid; gap: 2cqw; }
.g-rank li { display: flex; align-items: center; gap: 3cqw; font-size: 5.6cqw; background: rgba(255,255,255,.08); border-radius: 2cqw; padding: 0 3cqw; height: 10cqw; }
.g-light .g-rank li { background: rgba(23,25,28,.06); }
.g-rank li span { font-size: 4cqw; opacity: .7; min-width: 5cqw; }
.g-rank li i { margin-left: auto; width: 0; height: 0; border-left: 2.4cqw solid transparent; border-right: 2.4cqw solid transparent; }
.g-rank li i.g-up { border-bottom: 4cqw solid #34c759; }
.g-rank li i.g-down { border-top: 4cqw solid #ff453a; }
.g-rank li i.g-same { width: 5cqw; height: .8cqw; border: 0; background: var(--g-dim); }
.g-rank .g-ph.g-band { top: auto; bottom: 0; height: 26%; }
.g-rank .g-ph.g-band::after { background: linear-gradient(to bottom, var(--g-page) 0%, transparent 60%); }
/* five rows */
.g-rows5 .g-ph.g-top { bottom: 55%; }
.g-rows5 .g-ph.g-top::after { background: linear-gradient(to top, var(--g-page) 0%, transparent 60%); }
.g-rows5 ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.8cqw; }
.g-rows5 li { display: flex; align-items: center; gap: 3cqw; font-size: 5.4cqw; height: 8.6cqw; border-bottom: 1px solid var(--g-line); }
.g-rows5 li span { width: 8cqw; height: 6.4cqw; border-radius: 1.5cqw; background: var(--g-hot); color: #0b0b0c; display: grid; place-items: center; font-size: 4cqw; }
/* reels: 9:16 */
.g-reel .g-logo { width: 14cqw; height: 14cqw; font-size: 7cqw; }
.g-trending .g-ph.g-band { top: 20%; bottom: 44%; }
.g-trending .g-ph.g-band::after { background: none; }
.g-box { position: absolute; left: 6cqw; right: 6cqw; top: 60%; background: var(--cb); color: #fff; border: .8cqw solid rgba(255,255,255,.6); border-radius: 4cqw; padding: 5cqw; text-align: center; z-index: 2; }
.g-box .g-kick { font-size: 6cqw; }
.g-box .g-h { font-size: 10cqw; }
.g-article .g-bottom { bottom: 16cqw; }
.g-article .g-h { font-size: 11cqw; -webkit-line-clamp: 4; }
.g-wave { position: absolute; left: 6cqw; right: 6cqw; bottom: 5cqw; height: 6cqw; display: flex; align-items: flex-end; gap: 1.6cqw; z-index: 2; }
.g-wave i { flex: 1; background: var(--g-hot); border-radius: 1cqw; height: 40%; }
.g-wave i:nth-child(2n) { height: 90%; } .g-wave i:nth-child(3n) { height: 65%; } .g-wave i:nth-child(5) { height: 100%; }

/* the hearth: the one peach surface on the page, on white */
.hearth-wrap { padding: 16px var(--gutter) 96px; }
.hearth {
  max-width: 880px; margin: 0 auto; background: var(--blush-peach); color: var(--sienna);
  border-radius: var(--r-card); padding: 64px 48px; text-align: center;
  background-image: radial-gradient(60% 50% at 50% 100%, rgba(255,255,255,.35), rgba(255,255,255,0));
}
.hearth h2 { margin-bottom: 24px; }
.hearth p { font-size: 20px; line-height: 1.45; max-width: 32em; margin: 0 auto 16px; }
.hearth .flame { color: var(--sienna); }

/* open your studio */
.open { background: var(--fog); padding: 80px 0; }
.open-inner, .request-inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: start; }
.open .lede, .request .lede { margin-top: 20px; color: var(--slate); }
.field {
  display: flex; align-items: center; background: var(--paper); border: 1px solid var(--hairline);
  border-radius: var(--r-input); padding: 0 16px; height: 56px;
}
.field input { flex: 1; min-width: 0; border: 0; outline: 0; font: inherit; font-size: 18px; background: transparent; color: var(--ink); }
.field input::placeholder { color: var(--smoke); }
.field input:focus { outline: none; }
.field:focus-within { border-color: var(--ink); }
.suffix { color: var(--slate); font-size: 16px; white-space: nowrap; }
.open-form .pill { margin-top: 12px; }
.hint { font-size: 14px; color: var(--ash); margin-top: 12px; }

/* request */
.request { padding: 96px 0; }
.request-form { display: grid; gap: 12px; }
.request-form label { display: grid; gap: 6px; font-size: 14px; color: var(--slate); }
.request-form input, .request-form textarea {
  font: inherit; font-size: 17px; color: var(--ink); background: var(--paper); border: 1px solid var(--hairline);
  border-radius: var(--r-input); padding: 14px 16px; width: 100%; resize: vertical;
}
.request-form input:focus, .request-form textarea:focus { outline: none; border-color: var(--ink); }
.request-form input::placeholder, .request-form textarea::placeholder { color: var(--smoke); }
.request-form .actions { margin-top: 8px; }

.foot {
  max-width: var(--max); margin: 0 auto; padding: 40px var(--gutter) 48px; border-top: 1px solid var(--hairline);
  display: flex; flex-wrap: wrap; gap: 12px 32px; font-size: 15px; color: var(--slate);
}
.foot span:first-child { color: var(--ink); }
.foot a:hover { text-decoration: underline; text-underline-offset: 4px; }

/* diagrams: ink lines on paper, the reference's chart manner (gestural, no gridlines); peach only inside the hearth card */
.flow { padding: 96px 0 40px; }
.flow-head, .day-head, .flow .diagram, .day .diagram { max-width: var(--max); margin-left: auto; margin-right: auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.flow .lede, .day .lede { margin-top: 20px; color: var(--slate); }
.diagram { margin: 40px auto 0; }
.diagram svg { width: 100%; height: auto; display: block; font-family: var(--sans); font-size: 17px; }
.diagram text { fill: var(--ink); text-anchor: middle; }
.diagram .d-sub { font-size: 13px; fill: var(--slate); }
.diagram .d-sub.left, .diagram .d-row { text-anchor: start; }
.diagram .d-row { font-family: var(--serif); font-size: 24px; }
.diagram .d-foot { font-size: 15px; fill: var(--slate); }
.d-in rect { fill: var(--mist); }
.d-out rect { fill: var(--paper); stroke: var(--hairline); }
.d-out text:not(.d-sub) { font-weight: 500; }
.d-line path { fill: none; stroke: var(--ink); stroke-width: 1.5; }
.d-line.arrows path { marker-end: url(#arr); }
.d-make circle { fill: var(--paper); stroke: var(--ink); stroke-width: 1.5; }
.d-make text { font-family: var(--serif); font-size: 22px; }
.d-make svg { color: var(--ember); }
.day { padding: 80px 0; }
.d-step rect { fill: var(--paper); stroke: var(--hairline); }
.d-step text { font-size: 14px; }
.d-step.then text { fill: var(--slate); }
.d-step.now rect { fill: var(--paper); stroke: var(--ink); }
.d-step.now text { font-size: 16px; }
.d-rule { stroke: var(--hairline); }
.d-back rect { fill: var(--ink); }
.d-back text { fill: var(--paper); font-weight: 500; }
.d-back .d-sub { fill: var(--smoke); font-weight: 400; }
.timeback { max-width: var(--max); margin: 64px auto 0; padding: 0 var(--gutter); }
.timeback > h3 { font-size: clamp(28px, 3.4vw, 44px); letter-spacing: -0.015em; }
.timeback .lede { margin-top: 16px; color: var(--slate); }
.timeback .steps { margin-top: 32px; }
.timeback .card { background: var(--paper); }
.timeback .num { margin-bottom: 20px; color: var(--slate); }
.plain .timeback { padding: 0; }
.plain .timeback .card { background: var(--mist); }

/* live stream clips: the timeline, and the calendar: the week grid */
.clips { padding: 80px 0; }
.clips-inner, .calendar-inner { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.clips .lede, .calendar .lede { margin-top: 20px; color: var(--slate); }
.c-track rect { fill: var(--mist); }
.c-track rect.hook { fill: var(--ink); }
.c-track .c-hook { fill: var(--paper); font-weight: 500; font-size: 16px; }
.c-track .c-rest { fill: var(--slate); font-size: 15px; }
.c-track .c-handle { fill: var(--paper); stroke: var(--ink); stroke-width: 1.5; }
.c-add path { stroke: var(--ink); stroke-width: 1.5; fill: none; }
.c-add rect { fill: var(--paper); stroke: var(--hairline); }
.c-add text:not(.d-sub) { font-weight: 500; }
.clips .m-clips { display: none; }
.calendar { padding: 96px 0 0; }
.calendar .diagram svg text { font-size: 15px; }
.k-days text { fill: var(--slate); }
.k-hours text { text-anchor: start; fill: var(--slate); }
.k-cells rect { fill: var(--paper); stroke: var(--hairline); }
.k-cells rect.did { fill: var(--ink); stroke: var(--ink); }
.k-cells rect.next { fill: var(--paper); stroke: var(--ink); stroke-width: 1.5; stroke-dasharray: 5 4; }
.k-sugg text { font-weight: 500; }
.k-sugg svg { color: var(--ember); }
.k-legend text { text-anchor: start; fill: var(--slate); font-size: 14px; }
.k-legend rect.did { fill: var(--ink); } .k-legend rect.next { fill: var(--paper); stroke: var(--ink); stroke-dasharray: 3 3; }
.k-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 40px; }

/* the cost calculator: the visitor's own numbers against the per-piece price */
.cost { padding: 96px 0; }
.cost-inner { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px; align-items: start; }
.cost .lede { margin-top: 20px; }
.cost .lede b { font-weight: 500; }
.cost .hint { margin-top: 16px; }
.tiers { border-collapse: collapse; margin-top: 24px; font-size: 16px; width: 100%; max-width: 420px; }
.tiers th { font-weight: 400; font-size: 13px; color: var(--ash); text-align: left; padding: 0 0 8px; }
.tiers td { padding: 10px 0; border-bottom: 1px solid var(--hairline); }
.tiers td:not(:first-child), .tiers th:not(:first-child) { text-align: right; font-variant-numeric: tabular-nums; }
.tiers td:last-child { font-weight: 500; }

/* for your team: three persona pages */
.teams { padding: 0 0 96px; }
.teams-inner, .faq-inner, .persona-inner { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.teams .lede { margin-top: 20px; color: var(--slate); }
.teams-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 40px; }
.link-card { display: grid; align-content: start; transition: background .15s; }
.link-card:hover { background: #e9e9eb; }
.link-card .num { margin-bottom: 28px; color: var(--slate); }
.link-card .more { margin-top: 20px; font-size: 16px; }
.faq { background: var(--fog); padding: 80px 0; }
.faq dl { margin: 40px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 40px; }
.faq dt { font-family: var(--serif); font-size: 26px; line-height: 1.2; letter-spacing: -0.009em; margin-bottom: 10px; }
.faq dd { margin: 0; font-size: 16px; line-height: 1.5; color: var(--ink); }

/* persona pages */
.persona-hero { max-width: var(--max); margin: 0 auto; padding: 64px var(--gutter) 80px; }
.persona-hero h1 { font-size: clamp(40px, 5.6vw, 72px); max-width: 14em; }
.persona-hero .lede { margin-top: 24px; }
.changes { padding: 0 0 96px; }
.changes .steps { margin-top: 0; }
.plain { padding: 0 0 96px; }
.plain .lede { margin-top: 20px; color: var(--slate); }
.plain ul.ticks { list-style: none; margin: 32px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 40px; font-size: 17px; }
.plain ul.ticks li { padding-left: 28px; position: relative; line-height: 1.45; }
.plain ul.ticks li::before { content: ""; position: absolute; left: 0; top: 9px; width: 14px; height: 14px; border-radius: 50%; background: var(--ink); }
.m-day.always { display: block; padding: 0; margin-top: 32px; }
.m-day.always .m-col { background: var(--mist); }
.m-day.cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.kit { background: var(--fog); padding: 80px 0; }
.kit-inner { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px; align-items: start; }
.kit .lede { margin-top: 20px; color: var(--slate); }
.kit textarea { width: 100%; font: inherit; font-size: 16px; line-height: 1.5; color: var(--ink); background: var(--paper); border: 1px solid var(--hairline); border-radius: var(--r-input); padding: 16px; resize: vertical; min-height: 220px; }
.kit textarea:focus { outline: none; border-color: var(--ink); }
.kit .actions { margin-top: 12px; }
.persona-numbers { padding: 96px 0 0; }
.persona-numbers .tiers { margin-top: 32px; }
.persona-numbers .lede { margin-top: 20px; }
.calc { background: var(--mist); border-radius: var(--r-card); padding: 28px 24px 24px; display: grid; gap: 20px; }
.range { display: grid; gap: 10px; font-size: 15px; color: var(--slate); }
.range span { display: flex; justify-content: space-between; }
.range output { color: var(--ink); font-weight: 500; font-size: 17px; }
.range input { width: 100%; accent-color: var(--ink); margin: 0; }
.bars { display: grid; gap: 12px; margin-top: 8px; padding-top: 20px; border-top: 1px solid var(--hairline); }
.bar { display: grid; grid-template-columns: 130px 1fr 90px; align-items: center; gap: 12px; font-size: 15px; }
.bar-label { color: var(--slate); }
.bar-track { height: 28px; background: var(--paper); border-radius: 9999px; overflow: hidden; }
.bar-fill { height: 100%; width: 0; border-radius: 9999px; background: var(--ink); transition: width .25s; }
.bar-fill.today { background: var(--ash); }
.bar-val { text-align: right; font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; }
.calc-foot { font-size: 15px; color: var(--slate); }
.calc-foot b { color: var(--ink); font-weight: 500; }

/* phone forms of the two flow diagrams (the SVGs scale with the page and their type would be 7px at phone width) */
.m-flow, .m-day { display: none; padding: 0 var(--gutter); margin-top: 32px; }
.m-group { background: var(--mist); border-radius: 16px; padding: 16px; display: grid; gap: 8px; }
.m-group.out { background: var(--paper); border: 1px solid var(--hairline); }
.m-k { font-size: 13px; color: var(--ash); }
.m-group b { font-weight: 500; font-size: 17px; }
.m-group i { font-style: normal; font-weight: 400; color: var(--slate); font-size: 14px; display: block; }
.m-arrow { text-align: center; color: var(--slate); font-size: 15px; padding: 12px 0; }
.m-col { background: var(--paper); border-radius: 16px; padding: 20px; margin-bottom: 12px; }
.m-col h3 { font-size: 22px; }
.m-col ol { margin: 12px 0 0; padding-left: 22px; color: var(--slate); font-size: 16px; line-height: 1.6; }
.m-col.now ol { color: var(--ink); }
.m-back { margin-top: 16px; background: var(--ink); color: var(--paper); border-radius: 9999px; padding: 12px 20px; display: grid; }
.m-back b { font-weight: 500; }
.m-back span { font-size: 13px; color: var(--smoke); }

.hearth-diagram { margin-top: 40px; }
.hearth-diagram svg { font-size: 15px; }
.hearth-diagram text { fill: var(--sienna); }
.h-line path { fill: none; stroke: var(--sienna); stroke-width: 1.2; opacity: .5; }
.h-studio rect { fill: rgba(255,255,255,.55); stroke: var(--sienna); stroke-width: 1; }
.h-core circle { fill: var(--blush-peach); stroke: var(--sienna); stroke-width: 1.5; }
.h-core svg { color: var(--sienna); }
.h-core text { font-family: var(--serif); font-size: 17px; }

@media (max-width: 960px) {
  .cost-inner { grid-template-columns: 1fr; }
  .bar { grid-template-columns: 110px 1fr 80px; }
  .stage { grid-template-columns: 1fr; }
  .pane { min-height: 0; }
  .p2 { min-height: 300px; }
  .token { display: none; }
  .loop-foot { flex-direction: column; }
  .chapters { grid-template-columns: 1fr; width: 100%; }
  .teams-grid { grid-template-columns: 1fr; }
  .k-cards { grid-template-columns: 1fr; }
  .faq dl { grid-template-columns: 1fr; }
  .kit-inner { grid-template-columns: 1fr; }
  .plain ul.ticks { grid-template-columns: 1fr; }
  .m-day.cols { grid-template-columns: 1fr; }
  .hero { grid-template-columns: 1fr; padding-bottom: 64px; }
  .artifacts { min-height: 420px; max-width: 520px; }
  .steps { grid-template-columns: 1fr; }
  .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .open-inner, .request-inner { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .nav { display: none; }
  .top-actions .ghost { display: none; }
  .hero { padding-top: 32px; }
  .artifacts { min-height: 0; display: grid; gap: 12px; }       /* stacked, not floating: no room to overlap on a phone */
  .artifact { position: static; width: auto; }
  .a-card { max-width: 220px; }
  .a-status { max-width: 280px; }
  .a-caption { max-width: 340px; }
  .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; }
  .hearth { padding: 48px 24px; }
  .hearth p { font-size: 18px; }
  .field { height: 52px; }
  .suffix { font-size: 14px; }
  .flow .diagram, .day .diagram, .clips .diagram { display: none; }
  .m-flow, .m-day, .clips .m-clips { display: block; }
  .m-clips { margin-top: 32px; }
  .m-clips .m-col { background: var(--paper); }
  .calendar .diagram svg { font-size: 22px; }
  .calendar .diagram svg text { font-size: 22px; }
  .k-legend text { font-size: 20px; }
  .hearth-diagram svg { font-size: 22px; }     /* this one scales with the card; larger type keeps it legible */
  .hearth-diagram .h-core text { font-size: 26px; }
  .bar { grid-template-columns: 1fr; gap: 6px; }
  .bar-val { text-align: left; }
}