/* =========================================================
   Ruby Wu — v2 layer
   Centered single-column reading, left progress rail,
   short story-driven case studies. Loads after style.css.
   ========================================================= */

:root {
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --col:  680px;    /* reading column */
  --wide: 1040px;   /* media column */
  --radius: 14px;
  --rail-w: 190px;
  --nav-h: clamp(3.4rem, 6vw, 4.6rem);
  --accent: #211E1A;
}

/* Shared label voice: tiny mono caps (used on every page incl. About) */
.mono, .eyebrow, .section-label, .footer__col h4, .menu__meta {
  font-family: var(--font-mono);
  font-weight: 400;
  letter-spacing: 0.06em;
}
.eyebrow, .section-label { font-size: 0.75rem; text-transform: uppercase; }

.col  { width: 100%; max-width: calc(var(--col)  + var(--pad-x) * 2); margin-inline: auto; padding-inline: var(--pad-x); }
.wide { width: 100%; max-width: calc(var(--wide) + var(--pad-x) * 2); margin-inline: auto; padding-inline: var(--pad-x); }

/* Menu: 4th link + small arrow for external */
body.menu-open .menu__links a:nth-child(4) { transition-delay: 0.26s; }
.menu__links .ext { font-size: 0.4em; vertical-align: 0.9em; margin-left: 0.15em; color: var(--muted); }
.menu__links a[aria-current="page"] { color: var(--muted); }

/* =========================================================
   Home — compact intro
   ========================================================= */
.intro-hero {
  position: relative;
  min-height: 72svh;
  display: flex;
  align-items: flex-end;
  padding: calc(var(--nav-h) + 3rem) 0 clamp(3rem, 7vh, 5rem);
  overflow: hidden;
}
.intro-hero .hero__shader { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.42; pointer-events: none; }
.intro-hero::after { /* fade shader into paper */
  content: ""; position: absolute; inset: auto 0 0 0; height: 40%;
  background: linear-gradient(to bottom, transparent, var(--paper));
  pointer-events: none;
}
.intro-hero__inner { position: relative; z-index: 1; text-align: center; }
.intro-hero__name {
  font-size: clamp(3.5rem, 11vw, 8.5rem);
  line-height: 0.92;
  letter-spacing: -0.045em;
  font-weight: 500;
}
.intro-hero__name .serif { letter-spacing: -0.02em; }
.intro-hero__line {
  margin: clamp(1.25rem, 3vh, 2rem) auto 0;
  max-width: 34ch;
  font-size: var(--fs-lead);
  line-height: 1.35;
  letter-spacing: -0.012em;
  color: var(--ink-soft);
  text-wrap: balance;
}
.intro-hero__meta {
  margin-top: clamp(1.5rem, 4vh, 2.5rem);
  display: flex; justify-content: center; flex-wrap: wrap; gap: 0.5rem 1.5rem;
  font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--muted);
}
.intro-hero__meta .dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #3FA46A; margin-right: 0.5em; vertical-align: 0.1em; box-shadow: 0 0 0 0 rgba(63,164,106,.5); animation: ping 2.4s infinite; }
@keyframes ping { 0% { box-shadow: 0 0 0 0 rgba(63,164,106,.45); } 70%,100% { box-shadow: 0 0 0 8px rgba(63,164,106,0); } }

/* Section header (home lists) */
.list-head {
  display: flex; justify-content: space-between; align-items: baseline;
  border-bottom: 1px solid var(--hair);
  padding-bottom: 0.9rem; margin-bottom: clamp(2rem, 5vw, 3.5rem);
}
.list-head h2 { font-family: var(--font-mono); font-size: 0.75rem; font-weight: 400; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }

/* Project cards — single centered column */
.work-list { display: grid; gap: clamp(4rem, 10vw, 7.5rem); padding-bottom: clamp(5rem, 10vw, 8rem); }
.pcard { display: block; scroll-margin-top: calc(var(--nav-h) + 1.5rem); }
.pcard__media {
  position: relative; overflow: hidden;
  border-radius: var(--radius);
  aspect-ratio: 16 / 10;
  background: var(--paper-2);
  box-shadow: inset 0 0 0 1px rgba(33,30,26,.06);
  isolation: isolate;
}
.pcard__media img, .pcard__media video {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.1s var(--ease);
}
.pcard:hover .pcard__media img, .pcard:hover .pcard__media video { transform: scale(1.025); }
.pcard__idx {
  position: absolute; top: 1rem; left: 1rem; z-index: 2;
  font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.05em;
  padding: 0.3rem 0.55rem; border-radius: 999px;
  background: rgba(247,246,243,.82); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.pcard__body {
  display: grid; grid-template-columns: 1fr auto; gap: 0.35rem 1.5rem;
  max-width: var(--col); margin: 1.4rem auto 0; text-align: left;
}
.pcard__title { font-size: var(--fs-title); letter-spacing: -0.025em; line-height: 1.1; font-weight: 500; }
.pcard__year { font-family: var(--font-mono); font-size: 0.75rem; color: var(--muted); padding-top: 0.45rem; }
.pcard__desc { grid-column: 1 / -1; color: var(--ink-soft); max-width: 52ch; }
.pcard__tags { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.5rem; }
.tag {
  font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.04em; text-transform: uppercase;
  padding: 0.28rem 0.6rem; border-radius: 999px; border: 1px solid var(--hair-strong); color: var(--ink-soft);
}

/* Cursor-follow "View case" pill (desktop pointer only) */
.cursor-pill {
  position: fixed; left: 0; top: 0; z-index: 120; pointer-events: none;
  padding: 0.6rem 1rem; border-radius: 999px;
  background: var(--ink); color: var(--paper);
  font-size: 0.875rem; white-space: nowrap;
  transform: translate(-50%, -50%) scale(0.4); opacity: 0;
  transition: opacity .25s var(--ease), transform .35s var(--ease);
}
.cursor-pill.is-on { opacity: 1; transform: translate(-50%, -50%) scale(1); }
@media (hover: none), (pointer: coarse) { .cursor-pill { display: none; } }

/* Playground teaser + page grid */
.play-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(0.75rem, 2vw, 1.25rem); }
.ptile { display: block; }
.ptile__media {
  position: relative; aspect-ratio: 4 / 5; border-radius: var(--radius); overflow: hidden;
  background: var(--paper-2); box-shadow: inset 0 0 0 1px rgba(33,30,26,.06);
  transition: transform .6s var(--ease);
}
.ptile:hover .ptile__media { transform: translateY(-4px) rotate(-0.6deg); }
.ptile:nth-child(even):hover .ptile__media { transform: translateY(-4px) rotate(0.6deg); }
.ptile__media img, .ptile__media video { width: 100%; height: 100%; object-fit: cover; }
.ptile__media--empty {
  display: grid; place-items: center; text-align: center;
  background: repeating-linear-gradient(-45deg, var(--paper-2) 0 10px, var(--paper) 10px 20px);
  color: var(--muted); font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: .05em; text-transform: uppercase;
}
.ptile__cap { display: flex; justify-content: space-between; gap: 1rem; margin-top: 0.75rem; font-size: 0.95rem; }
.ptile__cap span:last-child { font-family: var(--font-mono); font-size: 0.75rem; color: var(--muted); padding-top: 0.15rem; }
.play-head { padding: calc(var(--nav-h) + clamp(3rem, 9vh, 6rem)) 0 clamp(2.5rem, 6vw, 4rem); text-align: center; }
.play-head h1 { font-size: var(--fs-h1); letter-spacing: -0.035em; }
.play-head p { color: var(--ink-soft); max-width: 44ch; margin: 1rem auto 0; text-wrap: balance; }
.play-filter { display: flex; justify-content: center; flex-wrap: wrap; gap: 0.4rem; margin-top: 1.75rem; }
.play-filter button {
  font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: .05em; text-transform: uppercase;
  padding: 0.4rem 0.8rem; border-radius: 999px; border: 1px solid var(--hair-strong); background: none; cursor: pointer; color: var(--ink-soft);
  transition: background .3s var(--ease), color .3s var(--ease);
}
.play-filter button[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.ptile.is-hidden { display: none; }

.more-link { display: inline-flex; gap: .5rem; align-items: center; font-size: 1rem; border-bottom: 1px solid var(--hair-strong); padding-bottom: 2px; }
.more-link .arrow { transition: transform .4s var(--ease); }
.more-link:hover .arrow { transform: translateX(5px); }

/* =========================================================
   Left progress rail (home + case studies)
   ========================================================= */
.rail {
  position: fixed; z-index: 90;
  left: var(--pad-x); top: 50%; transform: translateY(-50%);
  width: var(--rail-w);
  display: none;
  opacity: 0; transition: opacity .5s var(--ease);
}
.rail.is-on { opacity: 1; }
.rail__back {
  display: inline-flex; gap: .45rem; align-items: center;
  font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 1.25rem; transition: color .3s var(--ease);
}
.rail__back:hover { color: var(--ink); }
.rail__list { list-style: none; display: grid; gap: 0.15rem; counter-reset: rail; }
.rail__list a {
  --p: 0;
  display: grid; grid-template-columns: 28px 1fr; align-items: center; gap: 0.6rem;
  padding: 0.32rem 0; font-size: 0.875rem; color: var(--muted-2);
  transition: color .3s var(--ease);
}
.rail__list a:hover { color: var(--ink-soft); }
.rail__bar { position: relative; height: 2px; border-radius: 2px; background: var(--hair); overflow: hidden; width: 14px; transition: width .4s var(--ease); }
.rail__bar i { position: absolute; inset: 0; background: var(--ink); transform-origin: left; transform: scaleX(var(--p)); }
.rail__list a.is-done { color: var(--muted); }
.rail__list a.is-active { color: var(--ink); }
.rail__list a.is-active .rail__bar { width: 28px; }
.rail__total {
  margin-top: 1.25rem; font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: .05em; color: var(--muted-2);
}
@media (min-width: 1240px) { .rail { display: block; } }

/* Compact progress bar (tablet + phone) */
.mobar {
  position: fixed; z-index: 95; left: 50%; bottom: max(1rem, env(safe-area-inset-bottom));
  transform: translate(-50%, 140%);
  transition: transform .5s var(--ease);
  width: min(92vw, 420px);
}
.mobar.is-on { transform: translate(-50%, 0); }
.mobar__btn {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0.75rem 1rem 0.85rem; border-radius: 999px; border: 1px solid var(--hair);
  background: color-mix(in srgb, var(--paper) 86%, transparent);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  box-shadow: 0 10px 30px -12px rgba(33,30,26,.35);
  cursor: pointer; position: relative; overflow: hidden; color: var(--ink);
}
.mobar__btn::after { /* overall progress */
  content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%;
  background: var(--ink); transform-origin: left; transform: scaleX(var(--total, 0));
}
.mobar__now { font-size: 0.9rem; font-weight: 500; }
.mobar__count { font-family: var(--font-mono); font-size: 0.75rem; color: var(--muted); letter-spacing: .05em; }
.mobar__sheet {
  position: absolute; left: 0; right: 0; bottom: calc(100% + 0.5rem);
  background: var(--paper); border: 1px solid var(--hair); border-radius: 18px;
  box-shadow: 0 20px 50px -20px rgba(33,30,26,.4);
  padding: 0.5rem; display: grid;
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
}
.mobar.is-open .mobar__sheet { opacity: 1; visibility: visible; transform: none; }
.mobar__sheet a { display: flex; justify-content: space-between; padding: 0.7rem 0.8rem; border-radius: 10px; font-size: 0.95rem; color: var(--ink-soft); }
.mobar__sheet a.is-active { background: var(--paper-2); color: var(--ink); }
.mobar__sheet a span:last-child { font-family: var(--font-mono); font-size: 0.75rem; color: var(--muted-2); padding-top: .2rem; }
@media (min-width: 1240px) { .mobar { display: none; } }

/* =========================================================
   Case study ("story") layout
   ========================================================= */
.story main { padding-top: calc(var(--nav-h) + clamp(2rem, 6vh, 4rem)); }
.story [data-section] { scroll-margin-top: calc(var(--nav-h) + 1rem); }

.s-head { text-align: center; }
.s-kicker { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.s-title { font-size: clamp(2.6rem, 7vw, 5.25rem); letter-spacing: -0.04em; line-height: 0.98; margin-top: 1rem; }
.s-sub { font-size: var(--fs-lead); color: var(--ink-soft); margin: 1.1rem auto 0; max-width: 30ch; line-height: 1.35; text-wrap: balance; }

.s-media { margin-top: clamp(2rem, 5vw, 3.5rem); }
.s-media figure, figure.s-fig { margin: 0; }
.s-fig img, .s-fig video {
  width: 100%; border-radius: var(--radius); background: var(--paper-2);
  box-shadow: inset 0 0 0 1px rgba(33,30,26,.06);
}
.s-fig--ink img, .s-fig--ink video { background: #4C6670; }
.s-fig figcaption {
  margin-top: 0.75rem; font-size: 0.875rem; color: var(--muted); text-align: center; text-wrap: balance;
}
.s-fig--zoom img { cursor: zoom-in; }

/* Meta row */
.s-meta {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem;
  margin-top: clamp(2rem, 5vw, 3rem); padding-top: 1.5rem; border-top: 1px solid var(--hair);
}
.s-meta dt { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.45rem; }
.s-meta dd { font-size: 0.9375rem; color: var(--ink-soft); line-height: 1.45; }

/* TL;DR — problem / reframe / outcome */
.s-tldr { display: grid; gap: 0; margin-top: clamp(2.5rem, 6vw, 4rem); border-top: 1px solid var(--ink); }
.s-tldr > div { display: grid; grid-template-columns: 7.5rem 1fr; gap: 1.5rem; padding: 1.25rem 0; border-bottom: 1px solid var(--hair); }
.s-tldr h3 { font-family: var(--font-mono); font-size: 0.75rem; font-weight: 400; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding-top: 0.3rem; }
.s-tldr p { font-size: 1.0625rem; line-height: 1.5; }
.s-jump {
  display: inline-flex; align-items: center; gap: 0.55rem; margin-top: 2rem;
  padding: 0.7rem 1.15rem; border-radius: 999px; background: var(--ink); color: var(--paper);
  font-size: 0.9375rem; transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.s-jump:hover { transform: translateY(-2px); box-shadow: 0 10px 24px -10px rgba(33,30,26,.5); }
.s-jump .arrow { transition: transform .4s var(--ease); }
.s-jump:hover .arrow { transform: translateY(3px); }

/* Sections */
.s-sec { padding-top: clamp(5rem, 12vw, 8.5rem); }
.s-label {
  display: flex; align-items: center; gap: 0.75rem;
  font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
  margin-bottom: 1rem;
}
.s-label b { font-weight: 400; color: var(--ink); }
.s-h2 { font-size: var(--fs-h2); letter-spacing: -0.03em; line-height: 1.08; text-wrap: balance; margin-bottom: 1.25rem; }
.s-h3 { font-size: 1.25rem; letter-spacing: -0.015em; line-height: 1.25; margin-bottom: 0.5rem; }
.s-p { color: var(--ink-soft); font-size: 1.0625rem; line-height: 1.62; max-width: 62ch; }
.s-p + .s-p { margin-top: 1rem; }
.s-p strong { color: var(--ink); font-weight: 500; }
.s-block { margin-top: clamp(2rem, 5vw, 3rem); }

/* Two-up figures */
.s-two { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(0.75rem, 2vw, 1.25rem); align-items: start; }
.s-three { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(0.75rem, 2vw, 1.25rem); align-items: start; }

/* Insight cards */
.s-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.s-cards--2 { grid-template-columns: 1fr 1fr; }
.s-card {
  padding: 1.25rem 1.25rem 1.4rem; border-radius: var(--radius);
  background: var(--paper-2); border: 1px solid var(--hair);
}
.s-card .n { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: .05em; color: var(--muted); display: block; margin-bottom: 1.6rem; }
.s-card h3 { font-size: 1.0625rem; letter-spacing: -0.01em; line-height: 1.3; margin-bottom: 0.45rem; font-weight: 500; }
.s-card p { font-size: 0.9375rem; color: var(--ink-soft); line-height: 1.5; }

/* Quotes */
.s-quote { padding: clamp(1.5rem, 4vw, 2.25rem) 0; border-top: 1px solid var(--hair); }
.s-quote:last-child { border-bottom: 1px solid var(--hair); }
.s-quote blockquote { font-family: var(--font-serif); font-size: clamp(1.5rem, 3vw, 2.1rem); line-height: 1.2; letter-spacing: -0.01em; text-wrap: balance; }
.s-quote cite { display: block; margin-top: 0.75rem; font-style: normal; font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }

/* HMW statement */
.s-hmw {
  font-family: var(--font-serif); font-size: clamp(1.9rem, 4.6vw, 3.25rem); line-height: 1.12;
  letter-spacing: -0.015em; text-align: center; text-wrap: balance;
}
.s-hmw em { font-style: italic; color: var(--muted); }

/* Assumed / learned flip card */
.flip { perspective: 1400px; cursor: pointer; display: block; width: 100%; background: none; border: 0; text-align: left; color: inherit; }
.flip__inner { position: relative; display: grid; transition: transform .8s var(--ease); transform-style: preserve-3d; }
.flip.is-flipped .flip__inner { transform: rotateY(180deg); }
.flip__face {
  grid-area: 1 / 1; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  border-radius: var(--radius); padding: clamp(1.75rem, 5vw, 3rem);
  min-height: 15rem; display: flex; flex-direction: column; justify-content: space-between; gap: 2rem;
}
.flip__face--front { background: var(--paper-2); border: 1px solid var(--hair); }
.flip__face--back { background: var(--ink); color: var(--paper); transform: rotateY(180deg); }
.flip__face .k { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: .06em; text-transform: uppercase; opacity: .6; }
.flip__face p { font-family: var(--font-serif); font-size: clamp(1.6rem, 3.6vw, 2.4rem); line-height: 1.15; text-wrap: balance; }
.flip__hint { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: .05em; text-transform: uppercase; opacity: .55; }

/* Tabs (product trio, directions, flows) */
.tabs__list { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.4rem; margin-bottom: 1.5rem; }
.tabs__list button {
  padding: 0.55rem 1rem; border-radius: 999px; border: 1px solid var(--hair-strong);
  background: none; cursor: pointer; color: var(--ink-soft); font-size: 0.9375rem;
  transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.tabs__list button:hover { border-color: var(--ink); color: var(--ink); }
.tabs__list button[aria-selected="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.tabs__list button small { font-family: var(--font-mono); font-size: 0.75rem; opacity: .6; margin-right: 0.4rem; }
.tabs__panel { animation: fadeUp .6s var(--ease); }
.tabs__panel[hidden] { display: none; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.tabs__copy { max-width: var(--col); margin: 1.5rem auto 0; text-align: center; }
.tabs__copy .s-p { margin-inline: auto; }
.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.4rem; margin-top: 1rem; }

/* Horizontal scroll gallery */
.s-gallery {
  display: grid; grid-auto-flow: column; grid-auto-columns: min(78%, 560px);
  gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory;
  padding-bottom: 1rem; cursor: grab; scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
.s-gallery.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.s-gallery > * { scroll-snap-align: center; }
.s-gallery img { pointer-events: none; user-select: none; }
.s-hint { text-align: center; font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: .05em; text-transform: uppercase; color: var(--muted-2); margin-top: 0.5rem; }

/* Demo frame (interactive moments) */
.demo {
  border-radius: calc(var(--radius) + 6px); background: var(--paper-2); border: 1px solid var(--hair);
  padding: clamp(1.25rem, 4vw, 2.5rem);
}
.demo__tag {
  display: inline-flex; align-items: center; gap: .45rem;
  font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
  margin-bottom: 1.25rem;
}
.demo__tag::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #E2A33B; }

/* ---- Yubai: Pulse dial → Loom ---- */
.pulse { display: grid; grid-template-columns: 1fr 1.25fr; gap: clamp(1.25rem, 4vw, 2.5rem); align-items: center; }
.pulse__dial-wrap { display: grid; justify-items: center; gap: 1rem; }
.pulse__dial {
  --a: 0deg;
  width: clamp(130px, 22vw, 170px); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff 0%, #E9E5DC 45%, #CFC8BA 100%);
  box-shadow: inset 0 -6px 14px rgba(0,0,0,.12), 0 14px 30px -12px rgba(33,30,26,.45), 0 0 0 10px rgba(33,30,26,.04);
  position: relative; cursor: grab; touch-action: none; outline: none;
}
.pulse__dial:focus-visible { box-shadow: 0 0 0 3px var(--paper), 0 0 0 5px var(--ink); }
.pulse__dial::before { /* knurl */
  content: ""; position: absolute; inset: 8%; border-radius: 50%;
  background: repeating-conic-gradient(rgba(33,30,26,.08) 0 3deg, transparent 3deg 9deg);
}
.pulse__dial::after { /* indicator */
  content: ""; position: absolute; left: 50%; top: 12%; width: 4px; height: 18%; border-radius: 4px; background: var(--ink);
  transform-origin: 50% 211%; transform: translateX(-50%) rotate(var(--a));
}
.pulse__scale { display: flex; justify-content: space-between; width: clamp(150px, 24vw, 190px); font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.loom {
  --q: 0;  /* quietness 0..1 */
  position: relative; aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden;
  background: #FBFAF7; border: 10px solid #E8E2D6; box-shadow: 0 18px 40px -22px rgba(33,30,26,.5);
  padding: clamp(0.9rem, 2.5vw, 1.4rem); font-family: var(--font-serif); color: #3A362F;
  transition: background .6s var(--ease);
}
.loom__greet { font-size: clamp(1.1rem, 2.6vw, 1.6rem); }
.loom__date { font-family: var(--font-sans); font-size: .625rem; color: var(--muted); margin-top: .15rem; }
.loom__quote { font-style: italic; font-size: clamp(.75rem, 1.6vw, .9rem); color: var(--muted); margin-top: .6rem; max-width: 26ch; }
.loom__cards { position: absolute; left: clamp(.9rem,2.5vw,1.4rem); right: clamp(.9rem,2.5vw,1.4rem); bottom: clamp(.9rem,2.5vw,1.4rem); display: flex; gap: .5rem; transition: opacity .5s var(--ease), transform .5s var(--ease); }
.loom__card { flex: 1; background: #fff; border: 1px solid var(--hair); border-radius: 6px; padding: .5rem .6rem; font-family: var(--font-sans); font-size: .625rem; line-height: 1.35; color: var(--ink-soft); }
.loom__card b { display: block; font-weight: 500; color: var(--ink); margin-bottom: .15rem; }
.loom__flower { position: absolute; right: 6%; top: 8%; width: 22%; opacity: .55; transition: opacity .6s var(--ease); }
.loom__veil {
  position: absolute; inset: 0; display: grid; place-items: center; text-align: center;
  background: rgba(58, 54, 47, calc(var(--q) * 0.88)); color: #F3EFE6;
  opacity: 0; transition: opacity .6s var(--ease);
  font-family: var(--font-sans);
}
.loom__veil span { font-family: var(--font-mono); font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; display: block; opacity: .7; margin-bottom: .35rem; }
.loom__veil p { font-family: var(--font-serif); font-size: clamp(1.1rem, 2.6vw, 1.5rem); }
.loom.is-quiet .loom__veil { opacity: 1; }
.loom.is-quiet .loom__cards { opacity: 0; transform: translateY(8px); }
.pulse__status { margin-top: 1rem; font-size: .875rem; color: var(--muted); text-align: center; min-height: 1.4em; }

/* ---- Arca: privacy state indicator ---- */
.arca-demo { display: grid; grid-template-columns: auto 1fr; gap: clamp(1.5rem, 5vw, 3rem); align-items: center; }
.cam {
  --c: #30A46C; --ring: 1; --mic: 1; --pulse: none;
  width: clamp(150px, 24vw, 200px); aspect-ratio: 1; border-radius: 28%;
  background: linear-gradient(160deg, #FDFCFA, #E6E1D7); position: relative;
  box-shadow: 0 20px 40px -18px rgba(33,30,26,.5), inset 0 -4px 10px rgba(0,0,0,.06);
}
.cam__ring {
  position: absolute; inset: 22%; border-radius: 50%;
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--c) calc(var(--ring) * 100%), #D9D3C7), 0 0 calc(var(--ring) * 26px) calc(var(--ring) * 4px) color-mix(in srgb, var(--c) 55%, transparent);
  background: radial-gradient(circle at 40% 35%, #4A4A4A, #111 70%);
  animation: var(--pulse);
  transition: box-shadow .6s var(--ease);
}
.cam__ring::after { content: ""; position: absolute; inset: 30%; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #6C7A86, #1A1F24 70%); }
.cam__mic {
  position: absolute; left: 50%; bottom: 9%; width: 8px; height: 8px; border-radius: 50%; transform: translateX(-50%);
  background: color-mix(in srgb, var(--c) calc(var(--mic) * 100%), #CFC8BA);
  box-shadow: 0 0 calc(var(--mic) * 10px) color-mix(in srgb, var(--c) 70%, transparent);
  transition: background .6s var(--ease), box-shadow .6s var(--ease);
}
.cam[data-state="on"]     { --c: #30A46C; --ring: 1;   --mic: 1; }
.cam[data-state="medium"] { --c: #E2A33B; --ring: .9;  --mic: .9; --pulse: breathe 2.8s ease-in-out infinite; }
.cam[data-state="strong"] { --c: #3E7BFA; --ring: .55; --mic: 0;  --pulse: breathe 4.5s ease-in-out infinite; }
.cam[data-state="off"]    { --c: #D9D3C7; --ring: 0;   --mic: 0; }
@keyframes breathe { 50% { filter: brightness(.82) saturate(.7); } }
.states { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.states button {
  text-align: left; padding: .75rem .9rem; border-radius: 12px; border: 1px solid var(--hair-strong);
  background: var(--paper); cursor: pointer; color: var(--ink-soft); font-size: .9375rem;
  display: flex; align-items: center; gap: .55rem;
  transition: border-color .3s var(--ease), background .3s var(--ease);
}
.states button i { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.states button[aria-pressed="true"] { border-color: var(--ink); background: #fff; color: var(--ink); }
.states__desc { margin-top: 1rem; min-height: 3.2em; color: var(--ink-soft); font-size: .9375rem; line-height: 1.5; }

/* ---- Discord: swipe-to-catch-up ---- */
.swipe { display: grid; justify-items: center; gap: 1.1rem; }
.swipe__phone {
  width: min(100%, 340px); border-radius: 34px; padding: 14px; background: #2B2D31;
  box-shadow: 0 30px 60px -28px rgba(33,30,26,.6);
}
.swipe__screen { border-radius: 22px; background: #313338; padding: 14px; color: #DBDEE1; font-family: var(--font-sans); }
.swipe__top { display: flex; justify-content: space-between; align-items: center; font-size: .8rem; color: #B5BAC1; margin-bottom: .75rem; }
.swipe__top b { color: #fff; font-weight: 600; }
.swipe__stack { position: relative; height: 250px; }
.scard {
  position: absolute; inset: 0; border-radius: 16px; background: #fff; color: #1E1F22; padding: 1rem;
  box-shadow: 0 8px 22px -10px rgba(0,0,0,.6);
  touch-action: pan-y; cursor: grab; user-select: none;
  transition: transform .45s var(--ease), opacity .45s var(--ease);
}
.scard:nth-last-child(2) { transform: translateY(10px) scale(.96); opacity: .7; }
.scard:nth-last-child(3) { transform: translateY(20px) scale(.92); opacity: .4; }
.scard:nth-last-child(n+4) { opacity: 0; }
.scard.is-drag { transition: none; cursor: grabbing; }
.scard__server { font-size: .75rem; font-family: var(--font-mono); letter-spacing: .04em; color: #5865F2; text-transform: uppercase; }
.scard__who { display: flex; align-items: center; gap: .5rem; margin: .6rem 0 .5rem; font-weight: 600; font-size: .9rem; }
.scard__av { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: .75rem; }
.scard p { font-size: .875rem; line-height: 1.45; color: #313338; }
.scard__stamp {
  position: absolute; top: 1rem; padding: .25rem .55rem; border-radius: 6px; font-size: .75rem; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; opacity: 0; border: 2px solid currentColor;
}
.scard__stamp--read { right: 1rem; color: #23A55A; transform: rotate(8deg); }
.scard__stamp--keep { left: 1rem;  color: #5865F2; transform: rotate(-8deg); }
.swipe__btns { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin-top: .9rem; }
.swipe__btns button { padding: .65rem; border-radius: 10px; border: 0; cursor: pointer; font-size: .85rem; font-weight: 600; }
.swipe__btns .keep { background: #fff; color: #1E1F22; }
.swipe__btns .read { background: #23A55A; color: #fff; }
.swipe__done { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; color: #fff; }
.swipe__done p { font-size: 1.1rem; font-weight: 600; }
.swipe__done button { margin-top: .6rem; background: none; border: 1px solid #6D6F78; color: #DBDEE1; border-radius: 999px; padding: .4rem .9rem; cursor: pointer; font-size: .8rem; }
.swipe__log { font-family: var(--font-mono); font-size: .75rem; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }

/* ---- iOS: tap-for-haptics goal ---- */
.goal { display: grid; justify-items: center; gap: 1rem; text-align: center; }
.goal__btn { border: 0; background: none; cursor: pointer; padding: 0; position: relative; -webkit-tap-highlight-color: transparent; }
.goal__btn img { width: clamp(110px, 18vw, 150px); transition: transform .25s cubic-bezier(.3,1.8,.5,1); }
.goal__btn:active img, .goal__btn.is-pop img { transform: scale(.86); }
.goal__count { font-family: var(--font-mono); font-size: .75rem; color: var(--muted); letter-spacing: .05em; text-transform: uppercase; }
.goal__bar { width: min(320px, 80%); height: 8px; border-radius: 99px; background: var(--hair); overflow: hidden; }
.goal__bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #FF6B8A, #FF2D55); border-radius: inherit; transition: width .45s var(--ease); }
.goal__toast { opacity: 0; transform: translateY(10px) scale(.96); transition: opacity .5s var(--ease), transform .5s cubic-bezier(.3,1.6,.5,1); max-width: 360px; }
.goal__toast.is-on { opacity: 1; transform: none; }
.confetti { position: fixed; pointer-events: none; z-index: 200; width: 8px; height: 12px; border-radius: 2px; }

/* Next project */
.s-next { margin-top: clamp(6rem, 14vw, 10rem); border-top: 1px solid var(--hair); padding: clamp(2.5rem, 6vw, 4rem) 0 clamp(3rem, 8vw, 5rem); }
.s-next a { display: grid; grid-template-columns: 1fr minmax(160px, 34%); gap: clamp(1.25rem, 4vw, 2.5rem); align-items: center; }
.s-next .t { font-size: var(--fs-h2); letter-spacing: -0.03em; line-height: 1.05; margin-top: .4rem; }
.s-next .d { color: var(--ink-soft); margin-top: .5rem; }
.s-next .m { aspect-ratio: 16/10; border-radius: var(--radius); overflow: hidden; background: var(--paper-2); }
.s-next .m img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.s-next a:hover .m img { transform: scale(1.04); }
.s-next .arrow { transition: transform .4s var(--ease); }
.s-next a:hover .arrow { transform: translateX(6px); }

/* Lightbox */
.lightbox {
  position: fixed; inset: 0; z-index: 300; display: grid; place-items: center;
  background: rgba(247,246,243,.94); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  padding: 4vw; opacity: 0; visibility: hidden; transition: opacity .35s var(--ease), visibility .35s; cursor: zoom-out;
}
.lightbox.is-on { opacity: 1; visibility: visible; }
.lightbox img { max-width: 100%; max-height: 92vh; border-radius: 10px; box-shadow: 0 30px 80px -30px rgba(33,30,26,.5); }

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 900px) {
  .s-meta { grid-template-columns: 1fr 1fr; }
  .s-cards { grid-template-columns: 1fr; }
  .s-cards--2 { grid-template-columns: 1fr; }
  .pulse, .arca-demo { grid-template-columns: 1fr; justify-items: center; }
  .arca-demo .states-wrap { width: 100%; }
  .s-three { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .s-two { grid-template-columns: 1fr; }
  .s-three { grid-template-columns: 1fr; }
  .s-tldr > div { grid-template-columns: 1fr; gap: .35rem; }
  .play-grid { grid-template-columns: 1fr 1fr; }
  .pcard__body { grid-template-columns: 1fr; }
  .pcard__year { padding-top: 0; order: -1; }
  .s-next a { grid-template-columns: 1fr; }
  .intro-hero { min-height: 64svh; }
  .states { grid-template-columns: 1fr 1fr; }
  .story main { padding-bottom: 5rem; } /* room for floating progress */
}
@media (max-width: 420px) {
  .play-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .flip__inner, .scard, .tabs__panel { transition: none; animation: none; }
  .cam__ring { animation: none; }
}

/* About: same content, title scale matched to case-study titles */
.about-hero h1 { font-size: clamp(2.6rem, 7vw, 5.25rem); letter-spacing: -0.04em; line-height: 0.98; }
.goal__btn img { mix-blend-mode: multiply; }

/* =========================================================
   Typography v2.1 — Satoshi body, DM Sans headers + labels
   (swap --font-display to "Inter" to try Inter instead)
   ========================================================= */
:root {
  --font-body:    "Satoshi", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --font-display: "DM Sans", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --font-sans:  var(--font-body);
  --font-mono:  var(--font-display);
  --font-serif: var(--font-display);
}
body { font-family: var(--font-body); font-feature-settings: normal; }

/* Latin in DM Sans; CJK (余白) falls back to a proper Chinese serif */
.serif { font-family: var(--font-display), "Songti SC", "Noto Serif SC", "Source Han Serif SC", serif; font-weight: inherit; }

/* Headers */
h1, h2, h3, h4, .display, .nav__logo, .menu__links a, .wordmark,
.intro-hero__name, .pcard__title, .play-head h1,
.s-title, .s-h2, .s-h3, .s-card h3, .s-next .t,
.about-hero h1, .intro__statement, .acc__head {
  font-family: var(--font-display);
}
.s-title, .intro-hero__name, .about-hero h1 { font-weight: 600; letter-spacing: -0.045em; }
.s-h2, .pcard__title, .s-next .t { font-weight: 600; letter-spacing: -0.03em; }

/* Subtext / labels: DM Sans caps, a touch heavier so small sizes stay legible */
.mono, .eyebrow, .section-label, .footer__col h4, .s-kicker, .s-label, .s-meta dt, .s-tldr h3,
.s-card .n, .s-quote cite, .list-head h2, .pcard__idx, .pcard__year, .tag, .rail__back,
.rail__total, .mobar__count, .demo__tag, .s-hint, .flip__face .k, .flip__hint,
.play-filter button, .ptile__cap span:last-child, .intro-hero__meta, .goal__count, .swipe__log {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: 0.05em;
  font-variant-numeric: tabular-nums;
}

/* Quotes, HMW, flip card: readable sans instead of condensed serif */
.s-quote blockquote {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(1.3rem, 2.4vw, 1.75rem); line-height: 1.32; letter-spacing: -0.018em;
}
.s-hmw {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(1.6rem, 3.6vw, 2.6rem); line-height: 1.22; letter-spacing: -0.028em;
}
.s-hmw em { font-style: normal; color: var(--muted); }
.flip__face p {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(1.4rem, 3vw, 2rem); line-height: 1.25; letter-spacing: -0.02em;
}
.intro__quote { font-family: var(--font-body); }

/* Body copy: Satoshi at a comfortable reading size */
.s-p, .s-tldr p, .s-card p, .pcard__desc, .tabs__copy .s-p, .s-sub, .intro-hero__line, .s-meta dd {
  font-family: var(--font-body);
}
.s-sub, .intro-hero__line { letter-spacing: -0.005em; }

/* Image + stacked notes side by side (setup guide) */
.s-split { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(1rem, 3vw, 2rem); align-items: center; }
.s-stack { display: grid; gap: 0.75rem; }
.s-stack .s-card .n { margin-bottom: 0.9rem; }

/* FAQ (native details/summary) */
.faq { border-top: 1px solid var(--ink); }
.faq details { border-bottom: 1px solid var(--hair); }
.faq summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: 1.15rem 0; font-family: var(--font-display); font-weight: 500; font-size: 1.15rem; letter-spacing: -0.015em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 1.4rem; font-weight: 400; color: var(--muted); transition: transform .4s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 0 1.25rem; color: var(--ink-soft); line-height: 1.6; max-width: 58ch; }

/* Phone screen recordings, shown at device scale */
.s-phones { display: flex; justify-content: center; align-items: flex-start; gap: clamp(1rem, 4vw, 2.5rem); flex-wrap: wrap; }
.s-phone { width: min(300px, 44%); margin: 0; }
.s-phone video, .s-phone img {
  width: 100%; display: block; border-radius: clamp(18px, 3vw, 32px); background: #111;
  box-shadow: 0 24px 50px -24px rgba(33,30,26,.55), 0 0 0 1px rgba(33,30,26,.08);
}
.s-phone figcaption { margin-top: 0.8rem; font-size: 0.875rem; color: var(--muted); text-align: center; }
.s-phone--soft video { background: #F1EFF6; }

@media (max-width: 760px) {
  .s-split { grid-template-columns: 1fr; }
}
@media (max-width: 420px) {
  .s-phone { width: 46%; }
}

/* =========================================================
   Mini prototype: iPhone 16 Pro frame + auto-advancing screens
   ========================================================= */
.proto { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(1.5rem, 5vw, 4rem); align-items: center; max-width: 820px; margin-inline: auto; }
.proto__device {
  position: relative; width: clamp(230px, 26vw, 300px); aspect-ratio: 402 / 874;
  padding: 4px; border-radius: 17% / 7.9%;
  background: linear-gradient(140deg, #D9D4CC 0%, #9C968E 18%, #EDE9E3 42%, #8D8780 70%, #C9C3BA 100%);
  box-shadow: 0 40px 70px -40px rgba(33,30,26,.65), 0 2px 0 rgba(255,255,255,.6) inset;
}
.proto__device::before, .proto__device::after { /* side buttons */
  content: ""; position: absolute; width: 3px; border-radius: 2px; background: #A49E96; z-index: -1;
}
.proto__device::before { left: -2px; top: 22%; height: 9%; }
.proto__device::after  { right: -2px; top: 26%; height: 11%; }
.proto__bezel { position: relative; width: 100%; height: 100%; padding: 3.2%; border-radius: inherit; background: #0B0B0C; }
.proto__screen { position: relative; width: 100%; height: 100%; border-radius: 13.5% / 6.3%; overflow: hidden; background: #F4F4F4; isolation: isolate; }
.proto__island { position: absolute; z-index: 3; top: 1.7%; left: 50%; width: 31%; height: 3.6%; transform: translateX(-50%); border-radius: 99px; background: #000; }
.proto[data-island="false"] .proto__island { display: none; }
.proto__slide {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top;
  opacity: 0; transform: translateX(14%); transition: opacity .55s var(--ease), transform .7s var(--ease);
}
.proto__slide.is-active { opacity: 1; transform: none; z-index: 2; }
.proto__slide.is-prev { opacity: 0; transform: translateX(-8%); z-index: 1; }
.proto__slide.is-tall { height: auto; object-fit: initial; }
.proto__slide.is-tall.is-active { animation: protoScroll var(--dur-tall, 5s) ease-in-out .6s forwards; }
@keyframes protoScroll { to { transform: translateY(var(--shift, -40%)); } }

.proto__steps { list-style: none; display: grid; gap: 0.25rem; counter-reset: s; }
.proto__steps button {
  --p: 0;
  width: 100%; text-align: left; border: 0; background: none; cursor: pointer; color: var(--muted);
  display: grid; grid-template-columns: 2.1rem 1fr; gap: 0 .75rem; padding: .7rem .8rem; border-radius: 12px;
  font: inherit; transition: background .3s var(--ease), color .3s var(--ease); position: relative; overflow: hidden;
}
.proto__steps button:hover { background: var(--paper-2); color: var(--ink-soft); }
.proto__steps button .n { font-family: var(--font-display); font-weight: 500; font-size: .75rem; letter-spacing: .05em; padding-top: .2rem; font-variant-numeric: tabular-nums; }
.proto__steps button b { font-family: var(--font-display); font-weight: 500; font-size: 1rem; letter-spacing: -.01em; display: block; }
.proto__steps button span.d { display: block; grid-column: 2; font-size: .9rem; line-height: 1.45; max-height: 0; opacity: 0; overflow: hidden; transition: max-height .5s var(--ease), opacity .4s var(--ease), margin .4s var(--ease); }
.proto__steps button::after { /* per-step timer */
  content: ""; position: absolute; left: .8rem; right: .8rem; bottom: .3rem; height: 2px; border-radius: 2px;
  background: var(--ink); transform-origin: left; transform: scaleX(var(--p)); opacity: 0;
}
.proto__steps button[aria-current="step"] { background: var(--paper-2); color: var(--ink); }
.proto__steps button[aria-current="step"] span.d { max-height: 6rem; opacity: 1; margin-top: .3rem; color: var(--ink-soft); }
.proto__steps button[aria-current="step"]::after { opacity: .9; }
.proto__group { font-family: var(--font-display); font-weight: 500; font-size: .7rem; letter-spacing: .07em; text-transform: uppercase; color: var(--muted-2); padding: .9rem .8rem .2rem; }
.proto__controls { display: flex; align-items: center; gap: .5rem; margin-top: .9rem; padding-left: .8rem; }
.proto__controls button {
  width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--hair-strong); background: var(--paper);
  cursor: pointer; color: var(--ink); display: grid; place-items: center; font-size: .9rem;
}
.proto__controls button:hover { border-color: var(--ink); }
.proto__controls .state { font-family: var(--font-display); font-size: .75rem; color: var(--muted); letter-spacing: .04em; margin-left: .25rem; }

@media (max-width: 760px) {
  .proto { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 1.25rem; }
  .proto__device { width: min(62vw, 260px); }
  .proto__side { width: 100%; min-width: 0; }
  .proto__steps { min-width: 0; }
  .proto__steps { grid-auto-flow: column; grid-auto-columns: minmax(150px, 70%); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: .4rem; gap: .5rem; }
  .proto__steps li { scroll-snap-align: start; }
  .proto__steps button { border: 1px solid var(--hair); height: 100%; align-content: start; }
  .proto__group { display: none; }
  .proto__controls { justify-content: center; padding-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .proto__slide { transition: none; }
  .proto__slide.is-tall.is-active { animation: none; }
}
.goal__toast { width: 100%; }

/* =========================================================
   v2.2 — no boxes around images
   ========================================================= */
.s-fig img, .s-fig video, .s-fig--ink img, .s-fig--ink video { background: none; box-shadow: none; }

/* =========================================================
   Full-screen case heroes (old-portfolio concept)
   ========================================================= */
.story main { padding-top: 0; }
.s-hero {
  --hp: 0;
  position: relative; height: 100svh; min-height: 560px; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end; align-items: center; text-align: center;
  padding: calc(var(--nav-h) + 2rem) var(--pad-x) clamp(3.5rem, 11vh, 7rem);
  background: var(--hero-bg, var(--paper-2));
}
.s-hero__media { position: absolute; inset: 0; z-index: 0; transform-origin: 50% 40%;
  transform: translateY(calc(var(--hp) * 14%)) scale(calc(1 + var(--hp) * .08)); }
.s-hero__media > * { width: 100%; height: 100%; object-fit: cover; object-position: var(--hero-pos, center); display: block;
  opacity: 0; transform: scale(1.12); transition: opacity 1.4s var(--ease), transform 2.2s var(--ease); }
.s-hero.is-in .s-hero__media > * { opacity: 1; transform: none; }
.s-hero__fade { /* bottom fade into the page; deepens as you scroll */
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to bottom, rgba(247,246,243,0) 38%, rgba(247,246,243,.72) 72%, var(--paper) 97%);
}
.s-hero__fade::after { content: ""; position: absolute; inset: 0; background: var(--paper); opacity: calc(var(--hp) * 1.15); }
.s-hero__text { position: relative; z-index: 2; max-width: 900px;
  transform: translateY(calc(var(--hp) * -60px)); opacity: calc(1 - var(--hp) * 1.6); }
.s-hero__kicker { font-family: var(--font-display); font-weight: 500; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft);
  opacity: 0; transform: translateY(12px); transition: opacity .9s var(--ease) .15s, transform .9s var(--ease) .15s; }
.s-hero__title { font-family: var(--font-display); font-weight: 600; font-size: clamp(3.2rem, 10vw, 8.5rem); line-height: .95; letter-spacing: -.05em; margin-top: .6rem; }
.s-hero__title .w { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .08em; margin-bottom: -.08em; }
.s-hero__title .w > span { display: inline-block; transform: translateY(105%); transition: transform 1.1s var(--ease); }
.s-hero__sub { font-family: var(--font-body); font-size: var(--fs-lead); color: var(--ink-soft); margin: 1rem auto 0; max-width: 32ch; text-wrap: balance;
  opacity: 0; transform: translateY(12px); transition: opacity .9s var(--ease) .55s, transform .9s var(--ease) .55s; }
.s-hero.is-in .s-hero__kicker, .s-hero.is-in .s-hero__sub { opacity: 1; transform: none; }
.s-hero.is-in .s-hero__title .w > span { transform: none; }
.s-hero__cue { position: absolute; z-index: 2; left: 50%; bottom: 1.4rem; transform: translateX(-50%); display: grid; justify-items: center; gap: .4rem;
  font-family: var(--font-display); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); opacity: calc(1 - var(--hp) * 4); }
.s-hero__cue i { width: 1px; height: 34px; background: linear-gradient(var(--muted), transparent); animation: cue 2s ease-in-out infinite; transform-origin: top; }
@keyframes cue { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }
.s-hero + .col .s-meta { margin-top: 0; }

/* Arca: title on top, product fills below (old layout) */
.s-hero--top { justify-content: flex-start; padding-top: calc(var(--nav-h) + clamp(1rem, 5vh, 3rem)); --hero-bg: #fff; }
.s-hero--top .s-hero__media { top: 30%; }
.s-hero--top .s-hero__fade { background: linear-gradient(to bottom, rgba(247,246,243,0) 60%, rgba(247,246,243,.8) 86%, var(--paper) 100%); }

/* Discord: blurple, "Work hard. Play hard." beside the phones */
.s-hero--split { --hero-bg: #5865F2; flex-direction: row; align-items: center; justify-content: center; gap: clamp(1rem, 5vw, 5rem); text-align: left; padding-bottom: clamp(4rem, 12vh, 8rem); }
.s-hero--split .s-hero__media { position: relative; inset: auto; flex: 0 1 46%; height: min(78vh, 720px); order: 2; }
.s-hero--split .s-hero__media > * { object-fit: contain; }
.s-hero--split .s-hero__text { flex: 0 1 44%; order: 1; color: #fff; }
.s-hero--split .s-hero__kicker, .s-hero--split .s-hero__sub { color: rgba(255,255,255,.85); }
.s-hero--split .s-hero__sub { margin-left: 0; }
.s-hero--split .s-hero__fade { background: linear-gradient(to bottom, rgba(247,246,243,0) 78%, var(--paper) 100%); }
.s-hero--split .s-hero__cue { color: rgba(255,255,255,.75); }
body.hero-dark .nav:not(.scrolled) .nav__logo, body.hero-dark .nav:not(.scrolled) .nav__toggle { color: #fff; }
body.hero-dark.menu-open .nav .nav__logo, body.hero-dark.menu-open .nav .nav__toggle { color: var(--ink); }

@media (max-width: 760px) {
  .s-hero { min-height: 520px; height: 88svh; }
  .s-hero--top .s-hero__media { top: 34%; }
  .s-hero--split { flex-direction: column; justify-content: flex-start; text-align: center; padding-top: calc(var(--nav-h) + 1.5rem); gap: .5rem; height: 100svh; }
  .s-hero--split .s-hero__media { flex: 1 1 auto; width: 100%; height: auto; min-height: 0; }
  .s-hero--split .s-hero__text { flex: none; }
  .s-hero--split .s-hero__sub { margin-left: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .s-hero__media, .s-hero__text { transform: none !important; }
  .s-hero__media > *, .s-hero__title .w > span, .s-hero__kicker, .s-hero__sub { transition: none; transform: none; opacity: 1; }
}

/* =========================================================
   Phone frame for a single screen (reuses prototype frame)
   ========================================================= */
.phone-fig { margin: 0; display: grid; justify-items: center; }
.phone-fig .proto__device { width: min(100%, 280px); }
.phone-fig .proto__screen > video, .phone-fig .proto__screen > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.phone-fig figcaption { margin-top: .9rem; font-size: .875rem; color: var(--muted); text-align: center; text-wrap: balance; max-width: 30ch; }
.phone-fig figcaption b { display: block; font-family: var(--font-display); font-weight: 500; font-size: .7rem; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: .2rem; }

/* =========================================================
   Apple Health: feel your resting heart rate
   ========================================================= */
.hr { display: grid; justify-items: center; gap: 1rem; text-align: center; }
.hr__btn { border: 0; background: none; cursor: pointer; padding: 0; -webkit-tap-highlight-color: transparent; }
.hr__btn img { width: clamp(110px, 18vw, 150px); mix-blend-mode: multiply; transform-origin: 50% 60%; }
.hr__btn.is-beat img { animation: lubdub .62s cubic-bezier(.3,1.5,.5,1); }
@keyframes lubdub { 0% { transform: scale(1); } 14% { transform: scale(1.14); } 28% { transform: scale(.97); } 42% { transform: scale(1.08); } 100% { transform: scale(1); } }
.hr__ecg { width: min(360px, 90%); height: 60px; overflow: visible; }
.hr__ecg path { fill: none; stroke: #FF2D55; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 520; stroke-dashoffset: 520; }
.hr__ecg.is-beat path { animation: ecg .95s linear forwards; }
@keyframes ecg { to { stroke-dashoffset: 0; } }
.hr__bpm { font-family: var(--font-display); font-weight: 600; font-size: clamp(2.2rem, 5vw, 3rem); letter-spacing: -.03em; line-height: 1; color: #FF2D55; }
.hr__bpm small { font-size: .8rem; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-left: .35rem; }
.hr__note { color: var(--ink-soft); font-size: .95rem; max-width: 36ch; min-height: 3em; text-wrap: balance; }

/* =========================================================
   Discord: interactive catch-up cards (Figma card system)
   Built at design size (393×852) and scaled to the phone screen.
   ========================================================= */
.dc-demo { display: grid; justify-items: center; gap: 1rem; }
.dc-demo .proto__device { width: clamp(250px, 30vw, 320px); }
.dc { position: absolute; left: 0; top: 0; width: 393px; height: 852px; transform: scale(var(--k, .75)); transform-origin: 0 0;
  background: #5865F2; color: #fff; font-family: var(--font-display); overflow: hidden; user-select: none; -webkit-user-select: none; }
.dc__status { height: 44px; display: flex; align-items: center; justify-content: space-between; padding: 0 16px 0 34px; font-size: 14px; font-weight: 600; }
.dc__status span { display: flex; gap: 5px; align-items: center; }
.dc__nav { height: 56px; display: flex; align-items: center; justify-content: space-between; padding: 12px; font-size: 16px; font-weight: 500; }
.dc__nav img { width: 30px; height: 30px; transform: scaleX(-1); }
.dc__nav button { background: none; border: 0; color: #fff; font: inherit; cursor: pointer; padding: 4px; }
.dc__nav button:disabled { opacity: .45; cursor: default; }
.dc__chips { display: flex; gap: 10px; padding: 0 20px; overflow: hidden; }
.dc__chips span { flex: none; height: 27px; padding: 0 20px; border-radius: 10px; display: grid; place-items: center; background: #B1B8FF; color: #4D5057; font-size: 16px; }
.dc__chips span:first-child { background: #fff; color: #545454; font-size: 14px; }
.dc__stack { position: absolute; left: 20px; top: 172px; width: 353px; height: 541px; }
.dc-card {
  position: absolute; left: 0; right: 0; top: 45px; height: 496px; border-radius: 24px; background: #E0E3FF; color: #000;
  box-shadow: 0 0 14px rgba(0,0,0,.25); overflow: hidden; touch-action: pan-y; cursor: grab;
  transition: transform .45s var(--ease), opacity .45s var(--ease); transform-origin: 50% 0;
}
.dc-card[data-depth="1"] { transform: translateY(-24px) scale(.943); }
.dc-card[data-depth="2"] { transform: translateY(-45px) scale(.85); }
.dc-card[data-depth="3"], .dc-card[data-depth="4"] { opacity: 0; transform: translateY(-45px) scale(.85); }
.dc-card.is-drag { transition: none; cursor: grabbing; }
.dc-card__since { text-align: center; color: #797979; font-size: 12.36px; padding: 5px 10px; }
.dc-card__bell { position: absolute; right: 20px; top: 33px; width: 38px; height: 38px; }
.dc-card__body { position: absolute; left: 20px; top: 71px; width: 313px; display: grid; gap: 16px; }
.dc-card__pic { width: 104px; height: 104px; border-radius: 10px; overflow: hidden; background: #E1FF00; display: grid; place-items: center; }
.dc-card__pic img { width: 99px; height: auto; }
.dc-card__pic--fill img { width: 100%; height: 100%; object-fit: cover; }
.dc-card__pic--dark { background: #060608; }
.dc-card__pic--dark img { width: 92px; }
.dc-card h4 { font-size: 24px; font-weight: 500; line-height: 1.2; letter-spacing: -.01em; }
.dc-card__meta { display: flex; gap: 36px; font-size: 10px; color: #2C2E32; margin-top: 2px; }
.dc-card p { font-family: var(--font-body); font-size: 16px; line-height: 1.32; }
.dc-card__view { background: #5865F2; color: #fff; border-radius: 16.76px; padding: 6px 12px; text-align: center; font-size: 14.37px; }
.dc-card__active { position: absolute; left: 20px; bottom: 30px; font-size: 12.8px; }
.dc-card__avatars { display: flex; align-items: center; gap: 6.4px; margin-top: 4px; font-size: 11.2px; }
.dc-card__avatars i { width: 31.2px; height: 31.2px; border-radius: 50%; margin-right: -12px; background-size: cover; background-position: center; display: inline-block; border: 0; }
.dc-card__avatars i:last-of-type { margin-right: 6px; }
.dc-card__swipe { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; pointer-events: none; font-size: 40px; font-weight: 700; letter-spacing: -.02em; }
.dc-card__swipe--read { background: #1F8A4E; color: #fff; }
.dc-card__swipe--keep { background: #fff; color: #5865F2; }
.dc-card__swipe div { display: grid; justify-items: center; gap: 10px; transform: rotate(-8deg); }
.dc-card__swipe--keep div { transform: rotate(8deg); }
.dc-card__swipe svg { width: 64px; height: 64px; }
.dc__done { position: absolute; left: 30px; right: 30px; top: 380px; text-align: center; opacity: 0; transition: opacity .5s var(--ease); pointer-events: none; }
.dc__done.is-on { opacity: 1; pointer-events: auto; }
.dc__done b { display: block; font-size: 35px; line-height: 1; font-weight: 700; letter-spacing: -.02em; }
.dc__done button { margin-top: 18px; background: rgba(255,255,255,.18); border: 0; color: #fff; border-radius: 99px; padding: 8px 18px; font: inherit; font-size: 15px; cursor: pointer; }
.dc__btns { position: absolute; left: 20px; right: 20px; top: 772px; display: flex; justify-content: space-between; }
.dc__btns button { border: 0; border-radius: 15px; padding: 10px 18px; font-family: var(--font-display); font-size: 16px; cursor: pointer; }
.dc__btns .keep { width: 174px; background: #fff; color: #000; }
.dc__btns .read { width: 159px; background: #419F6B; color: #fff; }
.dc__btns button:active { transform: scale(.97); }
.dc__done span { display: block; margin-top: 10px; font-size: 20px; font-weight: 600; line-height: 1.2; }
.s-hero--split .s-hero__title { font-size: clamp(3rem, 7vw, 6.75rem); }
.s-fig--ink img, .s-fig--ink video { border-radius: 0; }

/* =========================================================
   v2.3 — Arca hero: title on top, product fully visible below
   ========================================================= */
.s-hero--top { --hero-bg: #FCFCFC; justify-content: flex-start; }
.s-hero--top .s-hero__text { order: 1; flex: none; }
.s-hero--top .s-hero__media {
  position: relative; inset: auto; top: auto; order: 2; flex: 1 1 auto; min-height: 0; width: 100%;
  margin: clamp(.5rem, 2vh, 1.5rem) 0 calc(-1 * clamp(3.5rem, 11vh, 7rem));
}
.s-hero--top .s-hero__media > * { object-fit: contain; object-position: center bottom; }
.s-hero--top .s-hero__title { font-size: clamp(3rem, 8vw, 7rem); }
.s-hero--top .s-hero__sub { margin-top: .6rem; }
.s-hero--top .s-hero__fade { background: linear-gradient(to bottom, rgba(247,246,243,0) 72%, var(--paper) 100%); }
@media (max-width: 760px) { .s-hero--top .s-hero__media { top: auto; } }

/* =========================================================
   Discord: pain points as an animated chat (old-portfolio style)
   ========================================================= */
.chat { --blurple: #5865F2; background: #EEF0FD; border-radius: 24px; padding: clamp(1.25rem, 4vw, 3rem); display: grid; gap: clamp(1.25rem, 3vw, 2rem); color: var(--blurple); }
.chat__pain { background: #E2E5FB; border-radius: 14px; overflow: hidden; border: 1px solid #D6DAF8; }
.chat__pain h3 { display: inline-block; background: #5D66EA; color: #fff; font-family: var(--font-display); font-weight: 500; font-size: 1.05rem; letter-spacing: -.01em; padding: .55rem 1.4rem; border-radius: 0 0 10px 0; }
.chat__pain p { padding: 1rem clamp(1.1rem, 3vw, 2.2rem) 1.4rem; font-size: 1.02rem; line-height: 1.55; color: #4F59D6; }
.chat__msg { display: flex; align-items: flex-start; gap: .9rem; max-width: 560px;
  opacity: 0; transform: translateY(16px); transition: opacity .5s var(--ease), transform .6s var(--ease); }
.chat__msg.is-in { opacity: 1; transform: none; }
.chat__msg--right { flex-direction: row-reverse; justify-self: end; text-align: right; }
.chat__av { position: relative; flex: none; width: 48px; height: 48px; }
.chat__av img, .chat__av span { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; display: block; background: #4F5BE0; }
.chat__av::after { content: ""; position: absolute; right: -2px; bottom: -2px; width: 14px; height: 14px; border-radius: 50%; background: #3BA55C; border: 3px solid #EEF0FD; }
.chat__who { display: block; font-family: var(--font-display); font-weight: 500; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; margin: .2rem .2rem .45rem; }
.chat__bubble { position: relative; display: inline-block; text-align: left; background: #fff; border: 1px solid var(--blurple); border-radius: 18px; padding: .8rem 1.1rem; font-size: 1.02rem; line-height: 1.45; color: #4F59D6;
  transform-origin: 0 0; }
.chat__msg--right .chat__bubble { transform-origin: 100% 0; }
.chat__text { display: none; }
.chat__dots { display: inline-flex; gap: 5px; padding: .3rem .1rem; }
.chat__dots i { width: 7px; height: 7px; border-radius: 50%; background: #A3AAF5; animation: dots 1s infinite ease-in-out; }
.chat__dots i:nth-child(2) { animation-delay: .15s; } .chat__dots i:nth-child(3) { animation-delay: .3s; }
@keyframes dots { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } }
.chat__msg.is-said .chat__dots { display: none; }
.chat__msg.is-said .chat__text { display: inline; }
.chat__msg.is-said .chat__bubble { animation: pop .45s cubic-bezier(.3,1.5,.5,1); }
@keyframes pop { from { transform: scale(.88); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .chat__msg { opacity: 1; transform: none; } .chat__dots { display: none; } .chat__text { display: inline; } }

/* Discord: Slack competitive-analysis section */
.slack { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(1.5rem, 5vw, 4rem); align-items: center; max-width: 900px; margin-inline: auto; }
.slack .phone-fig .proto__device { width: clamp(230px, 24vw, 280px); }
.slack__list { list-style: none; display: grid; gap: 1.4rem; }
.slack__list li { display: grid; grid-template-columns: 2rem 1fr; gap: .2rem .8rem; }
.slack__list .n { font-family: var(--font-display); font-weight: 500; font-size: .75rem; letter-spacing: .05em; color: var(--muted); padding-top: .25rem; grid-row: span 2; }
.slack__list h3 { font-family: var(--font-display); font-weight: 500; font-size: 1.1rem; letter-spacing: -.01em; }
.slack__list p { color: var(--ink-soft); font-size: .98rem; line-height: 1.55; }
.slack__list li.is-gap h3 { color: #5865F2; }
@media (max-width: 760px) { .slack { grid-template-columns: minmax(0, 1fr); justify-items: center; } }

/* Apple Health: press-and-hold heart */
.hr__btn { touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.hr__btn.is-holding img { filter: drop-shadow(0 0 18px rgba(255,45,85,.45)); }
.hr__hint { font-family: var(--font-display); font-weight: 500; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
@media (max-width: 760px) { .s-hero--top .s-hero__media > * { object-fit: cover; object-position: center; } }

/* =========================================================
   v2.4 — chat avatars carry their own online dot; full-bleed panel
   ========================================================= */
.chat__av::after { display: none; }
.chat__av img { border-radius: 0; background: none; object-fit: contain; width: 52px; height: 52px; }
.chat__av { width: 52px; height: 52px; }
.chat-bleed { background: #EEF0FD; padding-block: clamp(2.5rem, 7vw, 5rem); }
.chat-bleed .chat { background: none; padding: 0; max-width: 960px; margin-inline: auto; }

/* Rail: compact, grouped, and only where there's real margin for it */
.rail { left: clamp(16px, 1.8vw, 32px); width: 132px; }
.rail__list a { grid-template-columns: 22px 1fr; gap: .5rem; }
.rail__list a.is-active .rail__bar { width: 22px; }
.rail__bar { width: 12px; }
@media (min-width: 1240px) { .rail { display: none; } .mobar { display: block; } }
@media (min-width: 1400px) { .rail { display: block; } .mobar { display: none; } }

/* =========================================================
   v2.5 — Apple Health: original hero, scroll-driven steps, dark research
   ========================================================= */
.s-hero--ios { --hero-bg: var(--paper); }
.s-hero--ios .s-hero__title { font-size: clamp(2.8rem, 7.5vw, 6.5rem); }
.s-hero--ios .s-hero__kicker { margin-top: .8rem; color: var(--muted); }
.s-hero--ios .s-hero__media > * { object-position: center 85%; }

/* Scroll-driven steps: one giant statement at a time, swapped by scroll */
.scrolly { position: relative; height: calc(var(--n) * 75vh + 25vh); margin-top: clamp(2rem, 5vw, 4rem); }
.scrolly__sticky {
  position: sticky; top: 0; height: 100vh; height: 100svh; display: grid; grid-template-columns: auto minmax(0, 1fr);
  align-items: center; gap: clamp(1.5rem, 5vw, 5rem); max-width: calc(var(--wide) + var(--pad-x) * 2); margin-inline: auto; padding-inline: var(--pad-x);
}
.scrolly__nav { list-style: none; display: grid; gap: 1.1rem; font-family: var(--font-display); font-weight: 500; font-size: .85rem; letter-spacing: .05em; font-variant-numeric: tabular-nums; }
.scrolly__nav li { --p: 0; position: relative; color: var(--muted-2); padding-left: 1.1rem; transition: color .4s var(--ease); }
.scrolly__nav li::before { content: ""; position: absolute; left: 0; top: -.2rem; bottom: -.2rem; width: 2px; border-radius: 2px; background: var(--hair); }
.scrolly__nav li::after { content: ""; position: absolute; left: 0; top: -.2rem; bottom: -.2rem; width: 2px; border-radius: 2px; background: var(--ink); transform-origin: top; transform: scaleY(var(--p)); }
.scrolly__nav li.is-active { color: var(--ink); }
.scrolly__stage { position: relative; min-height: 60vh; display: grid; align-items: center; }
.scrolly__item { grid-area: 1 / 1; opacity: 0; transform: translateY(48px) scale(.98); transition: opacity .6s var(--ease), transform .8s var(--ease); pointer-events: none; }
.scrolly__item.is-active { opacity: 1; transform: none; }
.scrolly__item.is-past { opacity: 0; transform: translateY(-48px) scale(.98); }
.scrolly__k { font-family: var(--font-display); font-weight: 500; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 1.2rem; }
.scrolly__big { font-family: var(--font-display); font-weight: 600; font-size: clamp(2.4rem, 6.2vw, 5.6rem); line-height: 1.02; letter-spacing: -.045em; text-wrap: balance; max-width: 15ch; }
.scrolly__d { margin-top: 1.4rem; font-size: var(--fs-lead); line-height: 1.4; color: var(--ink-soft); max-width: 36ch; }
.scrolly__item.is-active .scrolly__big { animation: bigIn .9s var(--ease); }
@keyframes bigIn { from { letter-spacing: -.02em; filter: blur(6px); } to { letter-spacing: -.045em; filter: none; } }

/* Dark, full-bleed research section */
.s-sec--dark { background: #0B0B0C; color: #F3F1EC; padding-bottom: clamp(3rem, 8vw, 6rem); margin-top: 0; padding-top: clamp(5rem, 12vw, 8.5rem); }
.s-sec--dark .s-label { color: rgba(243,241,236,.55); }
.s-sec--dark .s-label b { color: #F3F1EC; }
.s-sec--dark .s-p { color: rgba(243,241,236,.72); }
.scrolly--dark .scrolly__nav li { color: rgba(243,241,236,.35); }
.scrolly--dark .scrolly__nav li.is-active { color: #F3F1EC; }
.scrolly--dark .scrolly__nav li::before { background: rgba(243,241,236,.18); }
.scrolly--dark .scrolly__nav li::after { background: #F3F1EC; }
.scrolly--dark .scrolly__k { color: rgba(243,241,236,.5); }
.scrolly--dark .scrolly__d { color: rgba(243,241,236,.72); }
.scrolly--dark [data-tone="muted"] .scrolly__big { color: rgba(243,241,236,.45); text-decoration: line-through; text-decoration-thickness: .06em; text-decoration-color: rgba(255,45,85,.8); }
.scrolly--dark [data-tone="accent"] .scrolly__big { color: #FF6B8A; }
.rail.is-dark .rail__back, .rail.is-dark .rail__total { color: rgba(243,241,236,.55); }
.rail.is-dark .rail__list a { color: rgba(243,241,236,.45); }
.rail.is-dark .rail__list a.is-active { color: #F3F1EC; }
.rail.is-dark .rail__bar { background: rgba(243,241,236,.2); }
.rail.is-dark .rail__bar i { background: #F3F1EC; }

@media (max-width: 760px) {
  .scrolly { height: calc(var(--n) * 70vh + 30vh); }
  .scrolly__sticky { grid-template-columns: minmax(0, 1fr); align-content: center; gap: 1.5rem; }
  .scrolly__nav { grid-auto-flow: column; justify-content: start; gap: 1.4rem; }
  .scrolly__nav li { padding-left: 0; padding-bottom: .5rem; }
  .scrolly__nav li::before, .scrolly__nav li::after { top: auto; bottom: 0; left: 0; right: 0; width: auto; height: 2px; transform-origin: left; transform: none; }
  .scrolly__nav li::after { transform: scaleX(var(--p)); }
  .scrolly__stage { min-height: 52vh; align-items: start; }
}
@media (prefers-reduced-motion: reduce) {
  .scrolly { height: auto; }
  .scrolly__sticky { position: static; height: auto; display: block; }
  .scrolly__nav { display: none; }
  .scrolly__stage { display: grid; gap: 3rem; min-height: 0; }
  .scrolly__item { grid-area: auto; opacity: 1; transform: none; }
}
body.nav-on-dark .nav.scrolled { background: rgba(11,11,12,.72); border-bottom-color: rgba(255,255,255,.08); }
body.nav-on-dark .nav .nav__logo, body.nav-on-dark .nav .nav__toggle { color: #F3F1EC; }
body.nav-on-dark.menu-open .nav .nav__logo, body.nav-on-dark.menu-open .nav .nav__toggle { color: var(--ink); }

/* Discord: research section takes the chat's lavender, edge to edge */
.s-sec--lav { background: #EEF0FD; margin-top: clamp(5rem, 12vw, 8.5rem); padding-top: clamp(4rem, 10vw, 7rem); padding-bottom: clamp(4rem, 10vw, 7rem); }
.s-sec--lav .s-label, .s-sec--lav .s-label b { color: #5865F2; }
.s-sec--lav .s-h2 { color: #2B2F8F; }
.s-sec--lav .s-p { color: #4A4F7A; }
.s-sec--lav .chat-bleed { background: none; padding-block: clamp(1.5rem, 4vw, 3rem) 0; }
.s-sec--lav .s-fig figcaption { color: #6B70A0; }

/* Lavender (Discord research) and dark tints for nav, rail and progress pill */
body.nav-on-lav .nav.scrolled { background: rgba(238,240,253,.88); border-bottom-color: rgba(88,101,242,.16); }
body.nav-on-lav .nav .nav__logo, body.nav-on-lav .nav .nav__toggle { color: #2B2F8F; }
.rail.is-lav .rail__back, .rail.is-lav .rail__total { color: rgba(43,47,143,.6); }
.rail.is-lav .rail__list a { color: rgba(43,47,143,.45); }
.rail.is-lav .rail__list a.is-active { color: #2B2F8F; }
.rail.is-lav .rail__bar { background: rgba(88,101,242,.2); }
.rail.is-lav .rail__bar i { background: #5865F2; }
.mobar.is-lav .mobar__btn { background: rgba(238,240,253,.92); border-color: rgba(88,101,242,.25); color: #2B2F8F; }
.mobar.is-lav .mobar__btn::after { background: #5865F2; }
.mobar.is-lav .mobar__count { color: rgba(43,47,143,.6); }
.mobar.is-lav .mobar__sheet { background: #EEF0FD; border-color: rgba(88,101,242,.2); }
.mobar.is-lav .mobar__sheet a.is-active { background: rgba(88,101,242,.12); color: #2B2F8F; }
.mobar.is-dark .mobar__btn { background: rgba(28,28,30,.9); border-color: rgba(255,255,255,.1); color: #F3F1EC; }
.mobar.is-dark .mobar__btn::after { background: #F3F1EC; }
.mobar.is-dark .mobar__count { color: rgba(243,241,236,.55); }
.mobar.is-dark .mobar__sheet { background: #1C1C1E; border-color: rgba(255,255,255,.1); }
.mobar.is-dark .mobar__sheet a { color: rgba(243,241,236,.7); }
.mobar.is-dark .mobar__sheet a.is-active { background: rgba(255,255,255,.08); color: #F3F1EC; }

/* Prototype: phone + steps sit together as a centered pair */
.proto { grid-template-columns: auto minmax(0, 340px); justify-content: center; max-width: none; }
.proto__steps button { padding: .6rem .75rem; }
@media (max-width: 760px) { .proto { grid-template-columns: minmax(0, 1fr); } }

/* Apple Health heart: no box, one centered stack */
.demo--plain { background: none; border: 0; padding: 0; text-align: center; }
.demo--plain .demo__tag { justify-content: center; width: 100%; }
.hr { gap: .9rem; min-height: 0; }
.hr__btn { display: grid; place-items: center; margin-inline: auto; }
.hr__ecg { margin-top: -.25rem; }
.hr__ecg::before { content: none; }
.hr__ecg .base { stroke: rgba(255,45,85,.18); stroke-dasharray: none; stroke-dashoffset: 0; animation: none; }

/* Heart: transparent cut-out (no white square), truly centered, no tap/focus box */
.hr__btn { -webkit-tap-highlight-color: transparent; outline: none; border-radius: 50%; }
.hr__btn:focus-visible { outline: 2px solid #FF2D55; outline-offset: 8px; }
.hr__btn img { width: clamp(84px, 10vw, 104px); mix-blend-mode: normal; display: block; }
.hr__btn.is-holding img { filter: drop-shadow(0 6px 18px rgba(255,45,85,.45)); }

/* Yubai reflection: scroll steps over the 余白 card, full-bleed */
.scrolly--bg .scrolly__sticky {
  max-width: none; padding-inline: max(var(--pad-x), calc((100vw - var(--wide)) / 2));
  background:
    linear-gradient(90deg, rgba(247,246,243,.9) 0%, rgba(247,246,243,.62) 40%, rgba(247,246,243,0) 66%),
    #E9E9E9 url("../assets/hq/yubai/yubai-card-v2.webp") 85% 55% / cover no-repeat;
}
@media (max-width: 760px) {
  .scrolly--bg .scrolly__sticky {
    background:
      linear-gradient(180deg, rgba(247,246,243,.92) 0%, rgba(247,246,243,.74) 55%, rgba(247,246,243,.1) 100%),
      #E9E9E9 url("../assets/hq/yubai/yubai-card-v2.webp") 70% 100% / cover no-repeat;
  }
}

/* Reflection: heading lives inside the image panel so the background starts at "07 Reflection" */
.s-sec--flush { padding-top: clamp(4rem, 9vw, 6rem); }
.s-sec--flush .scrolly { margin-top: 0; }
.scrolly__head { grid-column: 1 / -1; align-self: end; }
.scrolly__head .s-h2 { margin-bottom: 0; }
.scrolly--bg .scrolly__sticky { grid-template-rows: auto 1fr; align-content: stretch; padding-top: calc(var(--nav-h) + clamp(1.5rem, 5vh, 3.5rem)); padding-bottom: clamp(1.5rem, 5vh, 3rem); row-gap: clamp(1rem, 4vh, 2.5rem); }
.scrolly--bg .scrolly__nav { align-self: center; }
.scrolly--bg .scrolly__stage { min-height: 0; align-self: center; }
@media (max-width: 760px) {
  .scrolly--bg .scrolly__sticky { grid-template-rows: auto auto 1fr; align-content: start; }
  .scrolly--bg .scrolly__nav { align-self: start; }
  .scrolly--bg .scrolly__stage { align-self: start; }
}

/* Yubai: interview quotes loop in the middle, one at a time */
.qloop { text-align: center; max-width: 900px; margin-inline: auto; }
.qloop__stage { position: relative; display: grid; min-height: clamp(15rem, 34vh, 20rem); align-items: center; }
.qloop__item { grid-area: 1 / 1; margin: 0; opacity: 0; transform: translateY(24px); filter: blur(4px);
  transition: opacity .45s var(--ease), transform .55s var(--ease), filter .45s var(--ease); pointer-events: none; }
.qloop__item.is-active { opacity: 1; transform: none; filter: none; pointer-events: auto; }
.qloop__item.is-leaving { opacity: 0; transform: translateY(-24px); filter: blur(4px); }
.qloop__item blockquote { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.6rem, 3.6vw, 2.75rem); line-height: 1.18; letter-spacing: -.025em; text-wrap: balance; }
.qloop__item figcaption { margin-top: 1.4rem; font-size: .95rem; color: var(--muted); }
.qloop__item figcaption b { display: block; font-family: var(--font-display); font-weight: 500; font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: .3rem; }
.qloop__nav { display: flex; justify-content: center; gap: clamp(.75rem, 3vw, 2rem); margin-top: 2rem; }
.qloop__nav button { --p: 0; background: none; border: 0; cursor: pointer; padding: .35rem 0; display: grid; gap: .5rem; min-width: 64px;
  font-family: var(--font-display); font-weight: 500; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted-2); }
.qloop__nav button[aria-current="true"] { color: var(--ink); }
.qloop__nav i { position: relative; height: 2px; border-radius: 2px; background: var(--hair); overflow: hidden; }
.qloop__nav i::after { content: ""; position: absolute; inset: 0; background: var(--ink); transform-origin: left; transform: scaleX(var(--p)); }

/* Vertical numbered list (replaces card grids) */
.vlist { list-style: none; margin-top: 1rem; border-top: 1px solid var(--ink); }
.vlist li { display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: 1rem; padding: 1.4rem 0; border-bottom: 1px solid var(--hair); }
.vlist .n { font-family: var(--font-display); font-weight: 500; font-size: .8rem; letter-spacing: .05em; color: var(--muted); padding-top: .35rem; font-variant-numeric: tabular-nums; }
.vlist h3 { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.2rem, 2.2vw, 1.5rem); letter-spacing: -.02em; line-height: 1.2; }
.vlist p { margin-top: .4rem; color: var(--ink-soft); line-height: 1.55; max-width: 56ch; }
@media (prefers-reduced-motion: reduce) { .qloop__item { transition: none; filter: none; } }

/* =========================================================
   How might we: full-bleed color, pinned while words light up on scroll
   ========================================================= */
.s-sec--hmw { padding: 0; margin-top: clamp(5rem, 12vw, 8.5rem); --hmw-bg: #1C1915; --hmw-fg: #F6F1E8; --hmw-dim: rgba(246,241,232,.2); --hmw-accent: #E9C48F; background: var(--hmw-bg); }
.hmw--blurple { --hmw-bg: #5865F2; --hmw-fg: #FFFFFF; --hmw-dim: rgba(255,255,255,.28); --hmw-accent: #FEE75C; }
.hmw { position: relative; height: 210vh; }
.hmw__sticky { position: sticky; top: 0; height: 100vh; height: 100svh; display: grid; place-items: center; text-align: center; }
.s-sec--hmw .s-label, .s-sec--hmw .s-label b { color: var(--hmw-fg); opacity: .65; }
.s-sec--hmw .s-hmw { color: var(--hmw-dim); font-size: clamp(1.9rem, 4.4vw, 3.4rem); }
.s-hmw .hw { transition: color .35s var(--ease), text-shadow .35s var(--ease); }
.s-hmw .hw.is-lit { color: var(--hmw-fg); }
.s-hmw .hw.is-em { font-style: normal; }
.s-hmw .hw.is-em.is-lit { color: var(--hmw-accent); }
.s-hmw em { color: inherit; font-style: normal; }
@media (max-width: 760px) { .hmw { height: 180vh; } }
@media (prefers-reduced-motion: reduce) { .hmw { height: auto; } .hmw__sticky { position: static; height: auto; padding-block: 6rem; } .s-hmw .hw { color: var(--hmw-fg); } .s-hmw .hw.is-em { color: var(--hmw-accent); } }

/* Yubai setup guide: centered pair, plain list instead of cards */
.s-split--center { max-width: calc(940px + var(--pad-x) * 2); grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.5rem, 5vw, 4rem); align-items: center; }
.vlist--named { margin-top: 0; }
.vlist--named li { grid-template-columns: 4rem minmax(0, 1fr); }
.vlist--named .n { text-transform: uppercase; letter-spacing: .08em; font-size: .72rem; }
@media (max-width: 760px) { .s-split--center { grid-template-columns: minmax(0, 1fr); } }
.s-split__text .vlist--named { margin-top: 1.75rem; }

/* Arca privacy states: real device art from the guide, centered, no boxes */
.arca-states { display: grid; justify-items: center; }
.arca-states .cam {
  width: clamp(170px, 24vw, 230px); aspect-ratio: 388 / 452; border-radius: 0; background: none; box-shadow: none;
  display: grid; margin-top: 1.75rem; filter: drop-shadow(0 26px 28px rgba(33,30,26,.16));
}
.arca-states .cam img { grid-area: 1 / 1; width: 100%; height: auto; opacity: 0; transition: opacity .5s var(--ease); }
.arca-states .cam[data-state="on"] [data-s="on"],
.arca-states .cam[data-state="medium"] [data-s="medium"],
.arca-states .cam[data-state="strong"] [data-s="strong"],
.arca-states .cam[data-state="off"] [data-s="off"] { opacity: 1; }
.arca-states .states { display: flex; flex-wrap: wrap; justify-content: center; gap: .25rem 1.75rem; margin-top: 2.25rem; }
.arca-states .states button { padding: .5rem 0; border: 0; border-bottom: 1.5px solid transparent; border-radius: 0; background: none; }
.arca-states .states button[aria-pressed="true"] { border-bottom-color: var(--ink); background: none; }
.arca-states .states__desc { text-align: center; max-width: 46ch; margin-inline: auto; }
@media (max-width: 760px) { .arca-states .states { gap: .25rem 1.25rem; } }

/* Case studies: text follows the centered flow */
.story .col { text-align: center; }
.story .col .s-label { justify-content: center; }
.story .col .s-p { margin-inline: auto; }
.story .col .s-meta dd, .story .col .s-meta dt { text-align: center; }
/* lists read better left-aligned, in their original label + text layout */
.story .col .s-tldr, .story .col .vlist, .story .faq { text-align: left; }

/* Small header or description sitting right above a list: left-aligned with the list */
.story .col :is(.s-h3, .s-p):has(+ :is(.vlist, .s-tldr, .faq)) { text-align: left; margin-inline: 0; max-width: none; }

/* Scroll sections: intro pinned on top of the statements, left-aligned with them */
.scrolly--headed { margin-top: 0; }
.scrolly--headed .scrolly__sticky {
  grid-template-rows: auto auto; align-content: center; align-items: start;
  row-gap: clamp(1.5rem, 5vh, 3rem); padding-top: var(--nav-h);
}
.scrolly--headed .scrolly__head { grid-column: 2; align-self: end; }
.scrolly--headed .scrolly__head .s-p { margin-top: .9rem; max-width: 62ch; }
.scrolly--headed .scrolly__nav { grid-row: 2; align-self: center; }
.scrolly--headed .scrolly__stage { min-height: clamp(260px, 42vh, 440px); align-items: start; }
@media (max-width: 760px) {
  .scrolly--headed .scrolly__head { grid-column: 1; }
  .scrolly--headed .scrolly__nav { grid-row: auto; }
}


/* Prototypes: phone centered, clickable step row + caption below, soft fade-in screens */
.proto { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: clamp(1.5rem, 4vw, 2.25rem); max-width: 980px; margin-inline: auto; }
.proto__side { width: 100%; min-width: 0; display: grid; justify-items: center; gap: 1.1rem; }
.proto__steps { display: flex; flex-wrap: wrap; justify-content: center; gap: .25rem 1.6rem; overflow: visible; padding: 0; }
.proto__group { display: none; }
.proto__steps button {
  width: auto; display: flex; align-items: baseline; gap: .5rem; padding: .55rem 0 .75rem; border: 0; border-radius: 0;
  background: none; color: var(--muted); height: auto;
}
.proto__steps button:hover { background: none; color: var(--ink-soft); }
.proto__steps button[aria-current="step"] { background: none; color: var(--ink); }
.proto__steps button span.d { display: none; }
.proto__steps button .n { padding-top: 0; }
.proto__steps button::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 2px; background: var(--hair); }
.proto__steps button::after { left: 0; right: 0; bottom: 0; opacity: 1; }
.proto__caption { text-align: center; max-width: 46ch; min-height: 5.6em; }
.proto__caption .k { font-family: var(--font-display); font-weight: 500; font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); min-height: 1em; }
.proto__caption .t { font-family: var(--font-display); font-weight: 500; font-size: 1.15rem; letter-spacing: -.01em; margin-top: .25rem; }
.proto__caption .d { color: var(--ink-soft); line-height: 1.5; margin-top: .3rem; }
.proto__caption.is-in { animation: capIn .7s var(--ease); }
@keyframes capIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.proto__controls { justify-content: center; padding-left: 0; margin-top: 0; }

.proto__slide { opacity: 0; transform: scale(.975); transition: opacity 1s var(--ease), transform 1.2s var(--ease); }
.proto__slide.is-active { opacity: 1; transform: none; z-index: 2; }
.proto__slide.is-prev { opacity: 1; transform: none; z-index: 1; transition: opacity 0s 1s, transform 0s 1s; }
@media (max-width: 760px) {
  .proto__steps { gap: .25rem 1.1rem; }
  .proto__steps button b { display: none; }
  .proto__steps button { padding-inline: .1rem; }
}

/* Prototypes, compact: ← screen name → with description below (step row hidden, kept for data) */
.proto--compact .proto__steps, .proto--compact .proto__controls { display: none; }
.proto--compact .proto__caption { max-width: 520px; width: 100%; min-height: 0; }
.proto__nav { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; gap: 1rem; }
.proto__nav button {
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--hair-strong); background: transparent;
  color: var(--ink); cursor: pointer; display: grid; place-items: center; font-size: 1rem;
  transition: border-color .3s var(--ease), background .3s var(--ease), transform .3s var(--ease);
}
.proto__nav button:hover { border-color: var(--ink); background: var(--paper-2); }
.proto__nav button:active { transform: scale(.94); }
.proto__mid { display: grid; justify-items: center; gap: .3rem; min-width: 0; }
.proto__mid .k { font-family: var(--font-display); font-weight: 500; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-variant-numeric: tabular-nums; }
.proto__mid .t { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.15rem, 2.2vw, 1.4rem); letter-spacing: -.015em; line-height: 1.2; }
.proto__mid .bar { --p: 0; position: relative; width: 56px; height: 2px; border-radius: 2px; background: var(--hair); overflow: hidden; margin-top: .35rem; }
.proto__mid .bar::after { content: ""; position: absolute; inset: 0; background: var(--ink); transform-origin: left; transform: scaleX(var(--p)); }
.proto--compact .proto__caption .d { margin-top: .9rem; color: var(--ink-soft); line-height: 1.5; min-height: 3em; }
.proto--compact .proto__caption.is-in .t, .proto--compact .proto__caption.is-in .d { animation: capIn .6s var(--ease); }
.proto--compact .proto__caption.is-in { animation: none; }

/* Arca Find Device: two screens side by side. Left loops collapsed <-> locator; right is "found" with a pulsing ring */
.find-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 340px)); justify-content: center; align-items: start; gap: clamp(1.5rem, 5vw, 4rem); }
.find { display: grid; justify-items: center; margin: 0; }
.find__card { --loop: 7s; position: relative; width: 100%; filter: drop-shadow(0 30px 40px rgba(33,30,26,.12)); }
/* reserve the fully-open height (top 1056 + panel 574 + bottom 210 at 746 wide) so the caption never moves */
.find__card { aspect-ratio: 746 / 1840; }
.find__card > img, .find__top img, .find__inner img { display: block; width: 100%; height: auto; }
.find__top { position: relative; }
.find__panel { display: grid; grid-template-rows: 0fr; animation: findOpen var(--loop) var(--ease) infinite; }
.find__inner { position: relative; min-height: 0; overflow: hidden; }
.find__ring {
  position: absolute; left: 49.66%; top: 35.8%; width: 26.8%; aspect-ratio: 1; border-radius: 50%;
  transform: translate(-50%, -50%); box-shadow: 0 0 0 3px rgba(255,255,255,.95), 0 0 18px 4px rgba(46,204,90,.55);
  animation: findPulse 1.8s ease-out infinite;
}
.find__ring--2 { animation-delay: .9s; }
.find__tap {
  position: absolute; left: 19.3%; top: 95.5%; width: 34px; height: 34px; border-radius: 50%;
  transform: translate(-50%, -50%) scale(.6); background: rgba(255,255,255,.55); box-shadow: 0 0 0 1px rgba(0,0,0,.08);
  opacity: 0; pointer-events: none; animation: findTap var(--loop) ease infinite;
}
.find figcaption { margin-bottom: 1.25rem; max-width: 32ch; text-align: center; color: var(--muted); font-size: .875rem; line-height: 1.5; text-wrap: balance; }
.find figcaption b { display: block; color: var(--ink); font-family: var(--font-display); font-weight: 500; font-size: 1rem; margin-bottom: .2rem; }
@keyframes findOpen { 0%, 18% { grid-template-rows: 0fr; } 32%, 82% { grid-template-rows: 1fr; } 94%, 100% { grid-template-rows: 0fr; } }
@keyframes findPulse { 0% { transform: translate(-50%, -50%) scale(1); opacity: .95; } 100% { transform: translate(-50%, -50%) scale(1.45); opacity: 0; } }
@keyframes findTap { 0%, 9% { opacity: 0; transform: translate(-50%, -50%) scale(.6); } 13% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 19%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.5); } }
@media (max-width: 760px) {
  .find-pair { grid-template-columns: minmax(0, 300px); }
}
@media (prefers-reduced-motion: reduce) {
  .find__panel { animation: none; grid-template-rows: 1fr; }
  .find__ring { animation: none; }
  .find__tap { display: none; }
}
/* caption placed above its image */
.s-fig > figcaption:first-child { margin-top: 0; margin-bottom: .75rem; }

/* Arca aging parent: "Hey Arca" voice card over the phone screen */
.call-fig { position: relative; container-type: inline-size; }
.call {
  position: absolute; left: 16.5%; width: 64%; top: 29%; z-index: 2; pointer-events: none;
  background: #fff; border-radius: 6cqw; padding: 6cqw 5.5cqw 7cqw; box-shadow: 0 2cqw 8cqw rgba(20,20,20,.18), 0 0 0 1px rgba(0,0,0,.04);
  font-family: var(--font-display); color: #111; text-align: left;
  opacity: 0; transform: translateY(6%) scale(.92); transition: opacity .5s var(--ease), transform .7s cubic-bezier(.2,1.3,.4,1);
}
.call.is-in { opacity: 1; transform: none; }
.call.is-out { opacity: 0; transform: translateY(-3%) scale(.97); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.call__wave { display: flex; justify-content: center; align-items: center; gap: 1.6cqw; height: 11cqw; }
.call__wave i { width: .9cqw; min-width: 2px; height: 100%; border-radius: 9px; background: #5AD866; transform: scaleY(.35); }
.call.is-in:not(.is-calling) .call__wave i { animation: callWave 1s ease-in-out infinite; }
.call__wave i:nth-child(1), .call__wave i:nth-child(7) { animation-delay: -.6s !important; }
.call__wave i:nth-child(2), .call__wave i:nth-child(6) { animation-delay: -.3s !important; }
.call__wave i:nth-child(3), .call__wave i:nth-child(5) { animation-delay: -.15s !important; }
.call.is-calling .call__wave i { transform: scaleY(.25); transition: transform .5s var(--ease); }
@keyframes callWave { 0%, 100% { transform: scaleY(.3); } 50% { transform: scaleY(1); } }
.call__hey { margin-top: 5cqw; min-height: 1.2em; text-align: right; font-weight: 700; font-size: 6.4cqw; letter-spacing: -.01em; }
.call__who { margin-top: 5cqw; opacity: 0; transform: translateY(8px); transition: opacity .5s var(--ease), transform .6s var(--ease); }
.call.is-calling .call__who { opacity: 1; transform: none; }
.call__who img { width: 13cqw; height: 13cqw; border-radius: 50%; display: block; }
.call__name { margin-top: 2.5cqw; min-height: 1.2em; font-weight: 700; font-size: 6.4cqw; letter-spacing: -.01em; }
.call__hey:not(:empty)::after, .call__name:not(:empty)::after { content: ""; display: inline-block; width: 2px; height: .9em; margin-left: 2px; vertical-align: -.1em; background: #5AD866; animation: caret .8s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }

/* Top heroes (Arca, Apple Health): bigger product. The media gets its own tall area that runs past the fold. */
@media (min-width: 761px) {
  .s-hero--top { height: auto; min-height: 100svh; }
  .s-hero--top .s-hero__media { flex: none; height: clamp(480px, 84vh, 980px); }
  .s-hero--top.s-hero--ios .s-hero__media { height: clamp(520px, 92vh, 1080px); }
}

/* Discord swipe demo: grey band runs edge to edge, phone a touch larger */
.dc-band { background: var(--paper-2); padding-block: clamp(3rem, 8vw, 5.5rem); }
.demo--band { background: none; border: 0; border-radius: 0; text-align: center; max-width: calc(var(--col) + var(--pad-x) * 2); margin-inline: auto; padding: 0 var(--pad-x); }
.demo--band .demo__tag { justify-content: center; }
.dc-band .dc-demo .proto__device { width: clamp(262px, 31vw, 332px); }
/* the phone screen is a touch taller than the 393x852 Discord screen: fill the leftover strip with the same blue */
.dc-demo .proto__screen { background: #5865F2; }
/* Yubai quotes: the bar under the user whose quote is showing is solid; the others stay empty */
.qloop__nav button[aria-current="true"] i::after { transform: none; }
/* Yubai quotes: same width as the paragraph above, so the edges line up */
.qloop { max-width: var(--col); }
.qloop__item blockquote { font-size: clamp(1.5rem, 3vw, 2.25rem); }

/* Arca context: same room view twice; the second is masked for privacy */
.s-fig--masked .mask { position: relative; overflow: hidden; border-radius: var(--radius); }
.s-fig--masked .mask img { filter: blur(14px) saturate(.85); transform: scale(1.08); }
.mask__chip {
  position: absolute; left: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: .4rem;
  padding: .35rem .7rem; border-radius: 99px; background: rgba(20,20,20,.72); color: #fff;
  font-family: var(--font-display); font-weight: 500; font-size: .75rem; letter-spacing: .01em; backdrop-filter: blur(6px);
}
.mask__chip i { width: 7px; height: 7px; border-radius: 50%; background: #F2CC6C; }
/* Apple Health hero, full-bleed like Yubai and Arca: keep the top of the phone clear of the menu bar */
.s-hero--full.s-hero--ios .s-hero__media > * { object-position: center 25%; }

/* Discord chat: keep cards, bubbles and avatars off the screen edges on phones and tablets */
.chat-bleed .chat { padding-inline: var(--pad-x); box-sizing: content-box; }
/* Single tall phone screenshot: cap its width so it never fills a whole phone screen */
.s-fig--screen { justify-self: center; width: 100%; max-width: 280px; margin-inline: auto; }
@media (max-width: 760px) { .s-fig--screen { max-width: 220px; } }
/* Playground header: keep the column's side padding */
.play-head { padding-inline: var(--pad-x); }
/* Arca Find Device: smaller on phones so each screen fits on screen */
@media (max-width: 760px) { .find-pair { grid-template-columns: minmax(0, 236px); } }
/* Tall zoomable diagrams never get taller than the screen (tap to zoom for detail) */
.s-fig--zoom > img { display: block; max-height: 86svh; width: auto; max-width: 100%; margin-inline: auto; }
/* Arca Find Device on tablets: a bit smaller so each screen fits */
@media (min-width: 761px) and (max-width: 1100px) { .find-pair { grid-template-columns: repeat(2, minmax(0, 296px)); } }
/* Tall phone-shaped visuals also respect short (landscape) screens */
.find-pair { grid-template-columns: repeat(2, minmax(0, min(340px, 33svh))); }
@media (min-width: 761px) and (max-width: 1100px) { .find-pair { grid-template-columns: repeat(2, minmax(0, min(296px, 33svh))); } }
@media (max-width: 760px) { .find-pair { grid-template-columns: minmax(0, min(236px, 33svh)); } }
.s-phone { width: min(300px, 44%, 36svh); }
@media (max-width: 760px) { .s-phone { width: min(46%, 36svh); } }

/* Project-to-project navigation: previous + next side by side; first page has next only, last page previous only */
.s-next--pair { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 3rem); }
.s-next--pair a { grid-template-columns: minmax(0, 1fr); align-content: start; }
.s-next--pair a .m { order: -1; }
.s-next--pair .t { font-size: clamp(1.6rem, 3.2vw, 2.6rem); }
.s-next__next { text-align: right; }
.s-next__prev .arrow { display: inline-block; }
.s-next__prev:hover .arrow { transform: translateX(-6px); }
@media (max-width: 760px) {
  .s-next--pair { grid-template-columns: minmax(0, 1fr); }
  .s-next__next { text-align: left; }
}

/* Home: selected work media runs edge to edge (full-bleed), roughly a screen tall */
.pcard__media {
  width: 100vw; margin-inline: calc(50% - 50vw); border-radius: 0; box-shadow: none;
  aspect-ratio: auto; height: min(100svh, 62vw); min-height: 420px;
}
.pcard__idx { left: max(var(--pad-x), calc((100vw - var(--wide)) / 2)); top: calc(var(--nav-h) + .75rem); }
@media (max-width: 760px) {
  .pcard__media { height: 72svh; min-height: 0; }
  .pcard__idx { top: 1rem; }
}

/* Home: project title + description sit over the full-bleed media, on a dark fade for contrast */
.pcard { position: relative; }
.pcard__media::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to bottom, rgba(14,13,12,0) 34%, rgba(14,13,12,.5) 60%, rgba(14,13,12,.88) 100%);
}
.pcard__body {
  position: absolute; left: 0; right: 0; bottom: clamp(1.75rem, 5vh, 3.5rem); z-index: 2; margin: 0 auto;
  width: 100%; max-width: calc(var(--col) + var(--pad-x) * 2); padding-inline: var(--pad-x);
  color: #fff; pointer-events: none; text-shadow: 0 1px 14px rgba(0,0,0,.45);
}
.pcard__title { color: #fff; }
.pcard__year { color: rgba(255,255,255,.72); }
.pcard__desc { color: rgba(255,255,255,.88); }
.pcard__body .tag { color: #fff; border-color: rgba(255,255,255,.45); background: rgba(255,255,255,.1); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); text-shadow: none; }
@media (max-width: 760px) {
  .pcard__media::after { background: linear-gradient(to bottom, rgba(14,13,12,0) 28%, rgba(14,13,12,.55) 52%, rgba(14,13,12,.9) 100%); }
  .pcard__body { bottom: 1.25rem; }
}

/* Home: tighter gaps between projects; the one in view is sharp, the rest soften */
.work-list { gap: 0; }
.work-list.is-focusing .pcard { transition: opacity .7s var(--ease), filter .7s var(--ease), transform .9s var(--ease); }
.work-list.is-focusing .pcard:not(.is-focus) { opacity: .35; filter: blur(5px) saturate(.8); }

/* =========================================================
   About page, matched to the Framer version
   ========================================================= */
.ab-label { font-family: var(--font-display); font-size: .875rem; color: var(--muted); letter-spacing: 0; text-transform: none; margin-bottom: 1.25rem; }

/* Opener: title | photo, then the track slides left to reveal the introduction */
.ab-h { position: relative; height: calc(100svh + 130vw); }
.ab-h__sticky { position: sticky; top: 0; height: 100svh; overflow: hidden; }
.ab-h__track { display: flex; height: 100%; width: max-content; will-change: transform; }
.ab-h__title { width: 50vw; height: 100%; display: grid; place-items: center; }
.ab-h__title h1 { font-family: var(--font-display); font-weight: 400; font-size: clamp(3rem, 6.4vw, 6.25rem); letter-spacing: -.04em; line-height: 1; }
.ab-h__title b { font-weight: 700; }
.ab-h__photo { width: 50vw; height: 100%; overflow: hidden; }
.ab-h__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 30%; display: block; }
.ab-h__intro { width: 90vw; height: 100%; display: flex; flex-direction: column; justify-content: center; padding: 0 var(--pad-x) 0 22vw; }
.ab-h__intro > * { max-width: 46rem; }
.ab-h__statement { font-family: var(--font-display); font-size: clamp(1.5rem, 2.25vw, 2.1rem); line-height: 1.42; letter-spacing: -.01em; color: var(--ink); }
.ab-h__quote { margin-top: 1.75rem; font-size: clamp(1rem, 1.5vw, 1.375rem); line-height: 1.55; color: var(--muted); }
.ab-h__quote b { color: var(--ink); font-weight: 700; }

/* Experience: label + cycling thumbnail on the left, list on the right */
.ab-exp { display: grid; grid-template-columns: 34% minmax(0, 1fr); gap: 0 var(--pad-x); padding: clamp(5rem, 12vw, 10rem) var(--pad-x) 0; align-items: start; }
.ab-exp__thumb { position: relative; width: clamp(160px, 15.3vw, 240px); aspect-ratio: 4 / 5; overflow: hidden; background: var(--paper-2); }
.ab-exp__thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .6s var(--ease); }
.ab-exp__thumb img.is-on { opacity: 1; }
.ab-acc { margin-top: calc(.875rem * 1.6 + 1.25rem - 1.4rem); }
.ab-acc .acc__item, .ab-acc .acc__item:last-child { border: 0; }
.ab-acc .acc__head { padding: 1.4rem 0; font-family: var(--font-display); font-weight: 400; font-size: clamp(1.4rem, 2vw, 1.85rem); letter-spacing: -.015em; }
.ab-acc .acc__icon { width: 40px; height: 40px; }
.ab-acc .acc__icon::before, .ab-acc .acc__icon::after { background: var(--ink-soft); }
.ab-acc .acc__icon::before { height: 1px; }
.ab-acc .acc__icon::after { width: 1px; }
.ab-acc .acc__panel-inner { max-width: 62ch; font-size: .95rem; line-height: 1.55; padding-bottom: 1.5rem; }

/* Other interests: 3 x 2 photo grid with captions */
.ab-int { padding: clamp(5rem, 12vw, 10rem) var(--pad-x) clamp(5rem, 10vw, 8rem); }
.ab-int__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.25rem, 2.2vw, 2rem) clamp(.75rem, 1.4vw, 1.25rem); }
.ab-int__item { margin: 0; }
.ab-int__media { aspect-ratio: 4 / 5; overflow: hidden; background: var(--paper-2); }
.ab-int__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ab-int__item figcaption { margin-top: .6rem; font-size: .875rem; color: var(--muted); }

@media (max-width: 760px) {
  .ab-h { height: auto; }
  .ab-h__sticky { position: static; height: auto; overflow: visible; }
  .ab-h__track { display: block; width: auto; transform: none !important; }
  .ab-h__title { width: 100%; height: auto; min-height: 46svh; padding: calc(var(--nav-h) + 2rem) var(--pad-x) 2rem; place-items: end start; }
  .ab-h__photo { width: 100%; height: auto; aspect-ratio: 375 / 260; }
  .ab-h__intro { width: 100%; height: auto; padding: clamp(3rem, 12vw, 4.5rem) var(--pad-x) 0; }
  .ab-exp { grid-template-columns: minmax(0, 1fr); }
  .ab-exp__thumb { display: none; }
  .ab-acc { margin-top: 0; }
  .ab-int__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  .ab-h { height: auto; }
  .ab-h__sticky { position: static; height: auto; }
  .ab-h__track { flex-wrap: wrap; width: auto; transform: none !important; }
  .ab-h__title, .ab-h__photo { height: 100svh; }
  .ab-h__intro { width: 100%; height: auto; padding: 5rem var(--pad-x) 0 22vw; }
}
/* same crop as the Framer photo frame (image at 135%, nudged left and up) */
.ab-h__photo { position: relative; }
.ab-h__photo img { position: absolute; width: 135%; height: 135%; left: -6.3%; top: -35%; object-position: center; }
@media (max-width: 760px) { .ab-h__photo img { width: 100%; height: 100%; left: 0; top: 0; object-position: 45% 45%; } }
/* About photo: Ruby centered in the frame (max-width lifted so the zoomed crop applies) */
.ab-h__photo img { max-width: none; left: -2.5%; object-position: center; }
@media (max-width: 760px) { .ab-h__photo img { width: 140%; height: 140%; left: -7%; top: -22%; object-position: 50% 40%; } }

/* Phone recordings that play on hover (desktop) or tap (touch) */
.hp { position: relative; cursor: pointer; }
.hp video { display: block; }
.hp__badge {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: inline-flex; align-items: center; gap: .5rem; padding: .55rem .95rem .55rem .7rem; border-radius: 99px;
  background: rgba(20,20,20,.62); color: #fff; font-family: var(--font-display); font-weight: 500; font-size: .8rem; white-space: nowrap;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); pointer-events: none;
  transition: opacity .35s var(--ease), transform .35s var(--ease);
}
.hp__badge i { width: 0; height: 0; border-style: solid; border-width: 6px 0 6px 10px; border-color: transparent transparent transparent #fff; }
.hp.is-playing .hp__badge { opacity: 0; transform: translate(-50%, -50%) scale(.92); }

/* =========================================================
   Archive case studies: Nomtopia + Kenya Hara
   ========================================================= */
.s-four { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(0.75rem, 2vw, 1.25rem); align-items: start; }
@media (max-width: 900px) { .s-four { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.nom-photos .s-fig img { aspect-ratio: 4 / 3; object-fit: cover; }
.nom-pack { align-items: center; }
.nom-screens { max-width: 980px; margin-inline: auto; }

/* Character lineup */
.chars { list-style: none; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: clamp(.5rem, 1.6vw, 1.25rem); align-items: end; }
.chars li { display: grid; justify-items: center; gap: .6rem; }
.chars img { width: 100%; height: auto; display: block; }
.chars span { font-family: var(--font-display); font-weight: 700; font-size: clamp(.8rem, 1.2vw, 1rem); letter-spacing: .06em; color: var(--ink); }
@media (max-width: 760px) { .chars { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 1.5rem; } }

/* "Check out the video" + click-to-load YouTube */
.nom-video { display: grid; justify-items: center; text-align: center; }
.nom-video__head { width: 96px; height: auto; }
.nom-video__title { margin-top: .5rem; font-family: var(--font-display); font-weight: 700; font-size: clamp(1.25rem, 2.4vw, 1.6rem); color: #D9733F; }
.yt { position: relative; max-width: 900px; margin-inline: auto; aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; background: #111; cursor: pointer; }
.yt img, .yt iframe { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; }
.yt__play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 72px; height: 72px; border-radius: 50%; border: 0; background: rgba(20,20,20,.7); cursor: pointer; display: grid; place-items: center; transition: transform .3s var(--ease), background .3s var(--ease); }
.yt__play i { width: 0; height: 0; border-style: solid; border-width: 11px 0 11px 18px; border-color: transparent transparent transparent #fff; margin-left: 4px; }
.yt:hover .yt__play { transform: translate(-50%, -50%) scale(1.06); background: rgba(20,20,20,.85); }
.yt.is-playing .yt__play, .yt.is-playing img { display: none; }

/* Kenya Hara poster + detail rows */
.kh-poster { max-width: 640px; margin-inline: auto; }
.kd { display: grid; gap: clamp(2rem, 5vw, 3.5rem); margin-top: clamp(3rem, 8vw, 5rem); }
.kd__row { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(1.25rem, 4vw, 3rem); align-items: center; }
.kd__text .n { font-family: var(--font-display); font-weight: 500; font-size: .8rem; letter-spacing: .05em; color: var(--muted); }
.kd__text h3 { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.2rem, 2.2vw, 1.5rem); letter-spacing: -.02em; margin-top: .4rem; }
.kd__text p { margin-top: .5rem; color: var(--ink-soft); line-height: 1.55; max-width: 40ch; }
@media (max-width: 760px) { .kd__row { grid-template-columns: minmax(0, 1fr); } }
figure.kh-poster, figure.nom-screens { margin-inline: auto; }

/* =========================================================
   Spotify Debrief: animated logo (tile + full-screen hero)
   Hero timeline: oversized logo scales into center → heartbeat with ripples →
   settles into a slow breathing glow with a light sweep.
   ========================================================= */
.spot { position: relative; overflow: hidden; display: grid; place-items: center; background: radial-gradient(120% 90% at 50% 45%, #0d1410 0%, #050605 60%, #000 100%); isolation: isolate; }
.spot__stage { --logo: clamp(120px, 22vmin, 240px); position: relative; width: var(--logo); aspect-ratio: 1; isolation: isolate; }
.spot__glow { position: absolute; inset: -140%; border-radius: 50%; background: radial-gradient(circle, rgba(30,215,96,.55) 0%, rgba(30,215,96,.18) 28%, rgba(30,215,96,0) 62%); opacity: 0; z-index: -1; }
.spot__rings { position: absolute; inset: 0; }
.spot__rings i { position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid rgba(30,215,96,.42); box-shadow: 0 0 24px rgba(30,215,96,.25), 0 0 70px rgba(30,215,96,.12); opacity: 0; filter: blur(1.5px); -webkit-mask: radial-gradient(circle, transparent 0 68%, #000 78% 88%, transparent 98%); mask: radial-gradient(circle, transparent 0 68%, #000 78% 88%, transparent 98%); }
.spot--hero .spot__rings i:nth-child(1) { filter: blur(1px); }
.spot--hero .spot__rings i:nth-child(2) { filter: blur(2px); }
.spot--hero .spot__rings i:nth-child(3) { filter: blur(3px); }
.spot--hero .spot__rings i { will-change: transform, opacity; } /* blur is drawn once, then only moved */
.spot__zoom, .spot__beat, .spot__logo { position: absolute; inset: 0; }
.spot__logo svg { width: 100%; height: 100%; display: block; overflow: visible; transform-origin: center; }
/* Glow sits behind the logo (not on it), so nothing has to be re-drawn while the logo scales */
.spot__stage::before { content: ""; position: absolute; inset: -24%; border-radius: 50%; z-index: -1; pointer-events: none; background: radial-gradient(circle, rgba(30,215,96,.4) 0%, rgba(30,215,96,.14) 46%, rgba(30,215,96,0) 70%); }
.spot__zoom { transform-origin: 50% 50%; will-change: transform; backface-visibility: hidden; }
.spot__sheen { position: absolute; inset: 1%; border-radius: 50%; overflow: hidden; pointer-events: none; }
.spot__sheen::after { content: ""; position: absolute; top: -20%; bottom: -20%; width: 38%; left: -60%; transform: skewX(-20deg); background: linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent); opacity: 0; }

/* Full-screen hero: plays the intro once, then idles.
   One continuous glide from oversized into the center (no mid-way keyframe, so it never stops and restarts).
   The title is revealed by story.js as the logo lands, so the two are always in sync. */
.spot--hero .spot__glow { animation: spGlowIn 1.8s ease-out .2s forwards, spGlowBreath 4.2s ease-in-out 4.6s infinite; }
.spot--hero .spot__logo { opacity: 0; animation: spLogoIn .7s ease-out .05s forwards; }
.spot--hero .spot__stage::before { opacity: 0; animation: spLogoIn .9s ease-out 1.6s forwards; }
.spot--hero .spot__beat { animation: spHeartbeat 1.4s ease-in-out 2.6s 1, spBreathe 3.6s ease-in-out 4.6s infinite; }
.spot--hero .spot__rings i { animation: spRipple 2.8s cubic-bezier(.2,.6,.3,1) infinite; }
.spot--hero .spot__rings i:nth-child(1) { animation-delay: 2.65s; }
.spot--hero .spot__rings i:nth-child(2) { animation-delay: 3.1s; }
.spot--hero .spot__rings i:nth-child(3) { animation-delay: 3.55s; }
.spot--hero .spot__zoom { animation: spZoomReveal 2.4s linear 0s 1 both; }
.spot--hero .spot__sheen::after { animation: spSheen 4.5s ease-in-out 5s infinite; }

/* Archive tile: the idle state, looping */
.spot--tile .spot__stage { --logo: 34%; }
.spot--tile .spot__glow { opacity: .8; animation: spGlowBreath 4.2s ease-in-out infinite; }
.spot--tile .spot__beat { animation: spTileBeat 3.2s ease-in-out infinite; }
.spot--tile .spot__rings i { animation: spRipple 3.2s cubic-bezier(.2,.6,.3,1) infinite; }
.spot--tile .spot__rings i:nth-child(2) { animation-delay: .45s; }
.spot--tile .spot__rings i:nth-child(3) { animation-delay: .9s; }
.spot--tile .spot__sheen::after { animation: spSheen 4.5s ease-in-out 1s infinite; }
.ptile:hover .spot--tile .spot__zoom { transform: scale(1.12); transition: transform .8s cubic-bezier(.2,.8,.2,1); }
.spot--tile .spot__zoom { transition: transform .8s cubic-bezier(.2,.8,.2,1); }

@keyframes spGlowIn { from { opacity: 0; transform: scale(.35); } to { opacity: .9; transform: scale(1); } }
@keyframes spGlowBreath { 0%, 100% { opacity: .75; transform: scale(1); } 50% { opacity: 1; transform: scale(1.08); } }
@keyframes spLogoIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes spHeartbeat { 0%, 100% { transform: scale(1); } 14% { transform: scale(1.12); } 28% { transform: scale(.97); } 42% { transform: scale(1.08); } 62% { transform: scale(1); } }
@keyframes spTileBeat { 0%, 60%, 100% { transform: scale(1); } 8% { transform: scale(1.08); } 16% { transform: scale(.98); } 24% { transform: scale(1.05); } 36% { transform: scale(1); } }
@keyframes spBreathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04); } }
@keyframes spRipple { 0% { opacity: .7; transform: scale(1); } 100% { opacity: 0; transform: scale(2.8); } }
/* short hold while it fades in, then a single long ease-out (expo) glide into the center */
@keyframes spZoomReveal {
  0%   { transform: scale(6); animation-timing-function: linear; }
  12%  { transform: scale(6); animation-timing-function: cubic-bezier(.16,1,.3,1); }
  100% { transform: scale(1); }
}
@keyframes spSheen { 0% { left: -60%; opacity: 0; } 15% { opacity: 1; } 45% { left: 120%; opacity: 0; } 100% { left: 120%; opacity: 0; } }

/* Spotify Debrief page */
.sp-hero { min-height: 100svh; color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(2rem, 6vh, 3.5rem); padding: var(--nav-h) var(--pad-x) 2rem; }
.sp-hero__text { position: relative; z-index: 2; text-align: center; opacity: 0; transform: translateY(12px); transition: opacity .7s ease, transform .9s cubic-bezier(.16,1,.3,1); }
.sp-hero.is-landed .sp-hero__text { opacity: 1; transform: none; }
.sp-hero__kicker { font-family: var(--font-display); font-weight: 500; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.6); }
.sp-hero__title { margin-top: .6rem; font-family: var(--font-display); font-weight: 600; font-size: clamp(2.6rem, 7vw, 5.5rem); letter-spacing: -.035em; line-height: 1; }
.sp-hero__soon { margin-top: 1rem; font-family: var(--font-display); font-weight: 500; font-size: clamp(1.4rem, 3vw, 2.1rem); color: #1ED760; letter-spacing: -.01em; text-shadow: 0 0 24px rgba(30,215,96,.45); }
@keyframes spTextIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.sp-gallery { grid-auto-columns: auto; align-items: center; }
.sp-gallery .s-fig { margin: 0; }
.sp-gallery img { height: clamp(300px, 52vh, 480px); width: auto; max-width: none; display: block; border-radius: 14px; }
@media (max-width: 760px) { .sp-gallery img { height: 52svh; } }

@media (prefers-reduced-motion: reduce) {
  .spot *, .spot *::after, .sp-hero__text { animation: none !important; }
  .spot__logo, .sp-hero__text, .spot__stage::before { opacity: 1 !important; }
  .sp-hero__text { transform: none !important; }
  .spot__glow { opacity: .8 !important; }
}

/* ===== Home hero: calm focus-in =====
   The name arrives large, pale and out of focus (like the Yubai 余白 card),
   then glides down to its resting size and sharpens, centred above the tagline.
   Only after it settles do the tagline and role fade in, so the eye reads one
   thing at a time: name, then line, then role. One-time, transform/filter only. */
.intro-hero__name {
  font-size: clamp(3.5rem, 10vw, 8.5rem);
  color: #3B3936;
  transform-origin: 50% 55%;
  animation: heroNameSettle 2.4s cubic-bezier(.16,1,.3,1) .15s both;
  will-change: transform, filter, opacity;
}
.intro-hero__line, .intro-hero__meta { animation: heroFadeUp 1s cubic-bezier(.16,1,.3,1) both; }
.intro-hero__line { animation-delay: 1.55s; }
.intro-hero__meta { animation-delay: 1.8s; }
@keyframes heroNameSettle {
  0%   { opacity: 0; transform: scale(2.3); filter: blur(16px); color: #C9C5BE; }
  22%  { opacity: 1; }
  100% { opacity: 1; transform: none;      filter: blur(0);    color: #3B3936; }
}
@keyframes heroFadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .intro-hero__name, .intro-hero__line, .intro-hero__meta { animation: none; }
}