/* css/style.css */
@font-face {
  font-family: Inter;
  src: url('/assets/fonts/inter-latin.woff2') format('woff2');
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --ink: #202422;
  --text: #464c49;
  --muted: #686e6b;
  --line: #e4e8e5;
  --accent: #28634d;
  --paper: #ffffff;
  --page: 1120px;
  --measure: 680px;
  --gutter: clamp(22px, 5vw, 64px);
  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--ink);
  background: var(--paper);
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 32px; }
body { margin: 0; font-size: 1rem; }
/* Keep the reading viewport fixed horizontally, including the oversized sky
   and decorative glows. Clip avoids introducing a nested scrolling container. */
html, body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  overscroll-behavior-x: none;
}
@supports (overflow: clip) {
  html, body { overflow-x: clip; }
}
main { min-width: 0; max-width: 100%; }
@media (max-width: 760px) {
  html, body { touch-action: pan-y pinch-zoom; }
}
::selection { background: #d7e6dc; color: var(--ink); }
a { color: inherit; text-underline-offset: .2em; }
img { display: block; max-width: 100%; height: auto; }
figure { margin: 0; }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; border-radius: 2px; }

.skip { position: fixed; top: -100px; left: 16px; z-index: 100; padding: 12px 20px; color: white; background: var(--accent); }
.skip:focus { top: 12px; }
.reading-progress { position: fixed; inset: 0 0 auto; height: 2px; z-index: 20; pointer-events: none; }
.reading-progress span { display: block; height: 100%; width: 0; background: var(--accent); }

.site-header {
  width: min(var(--page), calc(100% - var(--gutter) * 2));
  min-height: 100px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 24px;
  border-bottom: 1px solid var(--line);
}
.name { font-size: 1.125rem; font-weight: 600; letter-spacing: -.045em; text-decoration: none; white-space: nowrap; }
.name > span { color: var(--accent); }
.site-header nav { display: flex; align-items: center; gap: 32px; }
.site-header nav a { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; font-size: .875rem; color: var(--muted); text-decoration: none; }
.site-header nav a:hover { color: var(--ink); }

.hero {
  display: grid;
  grid-template-columns: 1.33fr 1fr;
  align-items: center;
  gap: clamp(36px, 5vw, 72px);
  width: min(var(--page), calc(100% - var(--gutter) * 2));
  margin: 0 auto;
  padding: clamp(48px, 6vw, 80px) 0 0;
}
.hero-copy { min-width: 0; }
h1 {
  margin: 0;
  font-size: clamp(2.5rem, 4.55vw, 3.75rem);
  font-weight: 550;
  line-height: 1.09;
  letter-spacing: -.05em;
  text-wrap: balance;
  overflow-wrap: anywhere;
}
h1 > span { color: var(--accent); }
.founder-photo { min-width: 0; }
.founder-photo img { width: 100%; border-radius: 8px; }

.article-shell { width: min(var(--measure), calc(100% - var(--gutter) * 2)); margin: 0 auto; padding: 48px 0 72px; }
.prose { color: var(--text); font-size: 1.125rem; font-weight: 400; line-height: 1.85; letter-spacing: -.013em; overflow-wrap: break-word; }
.prose > p { margin: 0 0 28px; }
.prose > p:last-child { margin-bottom: 0; }
.prose strong { color: var(--ink); font-weight: 550; }
.gaps { margin: 30px 0; padding-left: 22px; }
.gaps li { padding-left: 8px; margin-bottom: 19px; }
.gaps li::marker { color: var(--accent); font-size: .8em; }
.gaps li:last-child { margin-bottom: 0; }
.prose .decision { color: var(--ink); font-weight: 550; }
.decision a { color: var(--accent); text-decoration-thickness: 1px; }

.sophia-portrait {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 38px;
  align-items: center;
  margin: 52px 0 56px;
  padding: 36px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.sophia-portrait > img { width: 100%; border-radius: 8px; }
.portrait-label { font-size: .8125rem; color: var(--ink); font-weight: 550; line-height: 1.6; margin-bottom: 21px; }
.portrait-label > span { display: block; color: var(--muted); font-weight: 400; margin-top: 2px; }
.portrait-quote { margin: 0; font-size: 1.25rem; font-weight: 450; line-height: 1.65; letter-spacing: -.032em; color: var(--ink); }

.continuum { display: grid; grid-template-columns: 1fr 1fr 1.3fr; gap: 28px; margin: 48px 0; }
.continuum > div { display: flex; flex-direction: column; border-top: 2px solid #cfd6d1; padding-top: 18px; min-width: 0; }
.continuum span { font-size: .8125rem; line-height: 1.6; color: var(--muted); letter-spacing: -.01em; }
.continuum strong { margin-top: 5px; font-size: 1.125rem; line-height: 1.4; font-weight: 500; letter-spacing: -.035em; }
.continuum > .active { border-top-color: var(--accent); }
.continuum > .active strong { color: var(--accent); }

.signature { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 20px; padding-top: 36px; margin-top: 48px; border-top: 1px solid var(--line); }
.signature > span { color: var(--ink); font-size: 1rem; font-weight: 500; }
.signature a { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: var(--accent); text-decoration: none; font-size: .875rem; }
.signature a:hover { text-decoration: underline; }
.site-footer { width: min(var(--page), calc(100% - var(--gutter) * 2)); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px 24px; min-height: 76px; padding: 16px 0; border-top: 1px solid var(--line); color: var(--muted); font-size: .8125rem; line-height: 1.7; }
.site-footer a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; color: var(--ink); }

@media (min-width: 1500px) {
  .prose { font-size: 1.125rem; }
}
@media (max-width: 1000px) {
  .hero { grid-template-columns: 1.12fr 1fr; gap: 32px; }
  h1 { font-size: 2.75rem; }
}
@media (max-width: 760px) {
  .site-header { min-height: 80px; }
  .hero { grid-template-columns: 1fr; gap: 28px; padding: 40px 0 0; }
  h1 { font-size: clamp(2.125rem, 7.65vw, 3.25rem); line-height: 1.1; letter-spacing: -.058em; }
  .founder-photo { width: 100%; }
  .article-shell { padding-top: 32px; padding-bottom: 48px; }
  .sophia-portrait { grid-template-columns: 210px minmax(0, 1fr); gap: 28px; }
  .portrait-quote { font-size: 1.125rem; }
}
@media (max-width: 520px) {
  .site-header nav { gap: 18px; }
  .site-header nav a { font-size: .875rem; }
  .name { font-size: 1rem; }
  .prose { line-height: 1.85; }
  .prose > p { margin-bottom: 24px; }
  .sophia-portrait { grid-template-columns: 1fr; gap: 24px; margin: 40px 0; padding: 28px 0; }
  .sophia-portrait > img { width: min(240px, 75%); margin-inline: auto; }
  .portrait-label { margin-bottom: 14px; }
  .portrait-label > span { display: inline; margin-left: 8px; }
  .portrait-quote { font-size: 1.125rem; }
  .continuum { gap: 16px; grid-template-columns: 1fr; margin: 36px 0; }
  .continuum > div { display: grid; grid-template-columns: 1fr; gap: 1px; padding-top: 12px; }
  .continuum strong { margin: 0; }
  .signature { margin-top: 32px; padding-top: 24px; }
}
@media print {
  :root { --gutter: 0px; }
  .skip, .reading-progress, .site-header nav, .signature a { display: none; }
  .hero { padding: 24px 0; }
  .article-shell { width: 100%; padding: 24px 0; }
  .prose { font-size: 11pt; line-height: 1.65; }
  .sophia-portrait, .continuum, .founder-photo { break-inside: avoid; }
  p { orphans: 3; widows: 3; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Separate pages share the same type, spacing, and natural image proportions. */
.site-header nav a[aria-current="page"] { color: var(--accent); }
.site-header nav { gap: clamp(16px, 3vw, 32px); }
.portrait-visual { width: 100%; }
.portrait-visual img { width: 100%; border-radius: 8px; }
.portrait-label { margin: 14px 0 0; text-align: center; }
.portrait-label > span { display: block; margin: 2px 0 0; }
.essay-preview { padding-bottom: 88px; }
.continue-block { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 24px; padding-top: 6px; }
.continue-link, .text-link { display: inline-flex; align-items: center; gap: 16px; min-height: 44px; font-size: .9375rem; font-weight: 500; color: var(--accent); text-decoration: none; }
.continue-link { border-bottom: 1px solid var(--accent); }
.continue-link > span, .text-link > span { transition: transform 180ms ease; }
.continue-link:hover > span, .text-link:hover > span { transform: translateX(3px); }
.text-link:hover { text-decoration: underline; }
.story-section, .essays-page { width: min(var(--page), calc(100% - var(--gutter) * 2)); margin-inline: auto; }
.story-section { scroll-margin-top: 30px; }
.story-intro { display: grid; grid-template-columns: minmax(180px, .65fr) minmax(0, 1.35fr); align-items: end; gap: clamp(32px, 5vw, 64px); padding: 56px 0 64px; }
.story-intro h1 { margin: 0; color: var(--ink); font-size: clamp(2rem, 3.5vw, 3rem); line-height: 1.15; font-weight: 500; letter-spacing: -.045em; text-wrap: balance; }
.story-cover { min-width: 0; }
.story-cover img { width: 100%; height: auto; border-radius: 5px; }
.story-layout { min-width: 0; padding-bottom: 64px; }
.chapters { min-width: 0; max-width: 904px; margin-inline: auto; }
.chapter { scroll-margin-top: 8rem; margin-bottom: 64px; }
.chapter > header, .chapter > .chapter-prose { max-width: var(--measure); margin-inline: auto; }
.chapter > .story-photo, .campaign-pair, .phone-gallery { margin-inline: auto; }
.chapter h2 { margin: 0 0 20px; max-width: 25ch; font-size: clamp(1.5rem, 2.4vw, 1.875rem); line-height: 1.25; letter-spacing: -.04em; font-weight: 500; text-wrap: balance; }
.chapter-prose { max-width: var(--measure); font-size: 1.125rem; line-height: 1.85; color: var(--text); letter-spacing: -.013em; }
.chapter-prose p { margin: 0 0 22px; }
.chapter-prose p:last-child { margin-bottom: 0; }
.story-photo { margin-top: 32px; min-width: 0; }
.story-photo img { width: 100%; height: auto; border-radius: 5px; }
.story-photo figcaption { font-size: .8125rem; color: var(--muted); margin-top: 12px; line-height: 1.6; }
.van-photo { max-width: 480px; margin-top: 34px; }
.photo-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
.cricket-pair { grid-template-columns: 1.77fr 1fr; }
.action-photo { max-width: 550px; }
.collection-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.community-pair { margin-top: 4px; }
.chapter-after { margin-top: 32px; }
.campaign-pair { max-width: 680px; }
.product-main { max-width: 680px; }
.product-pair .story-photo { margin-top: 24px; }
.phone-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; gap: 24px; max-width: 680px; padding: 0; }
.phone-gallery .story-photo figcaption { max-width: 21ch; }
.now-layout { display: grid; grid-template-columns: minmax(0, 1fr) 180px; align-items: start; gap: 32px; max-width: var(--measure); margin-inline: auto; }
.now-portrait { margin-top: 4px; }
.now-portrait figcaption { text-align: center; }
.now-portrait figcaption strong { display: block; color: var(--ink); font-size: .9375rem; font-weight: 550; }
.now-portrait figcaption span { display: block; margin-top: 2px; }
.chapter-now { margin-bottom: 0; border-bottom: 0; }
.chapter-now .text-link { margin-top: 24px; }
.resume-note { font-size: .8125rem; color: var(--muted); padding: 16px 0; margin-bottom: 20px; border-top: 1px solid var(--line); line-height: 1.6; }
.resume-note:not([hidden]) { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.resume-note a { color: var(--accent); }
#continue-reading { scroll-margin-top: 40px; }
#continue-reading:focus { outline: none; }
.essays-page { padding-bottom: 80px; }
.essays-heading { padding: 72px 0 40px; }
.essays-heading h1 { font-size: clamp(2.5rem, 5vw, 3.5rem); font-weight: 550; }
.essay-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.essay-list li { border-bottom: 1px solid var(--line); }
.essay-list h2 { margin: 0; font-size: clamp(1.25rem, 2.4vw, 1.75rem); line-height: 1.4; letter-spacing: -.035em; font-weight: 500; }
.essay-list a { display: block; padding: 28px 0; text-decoration: none; transition: color 180ms ease; }
.essay-list a:hover { color: var(--accent); }
/* Reveals run in JS without hiding content in the default or no-JS layout. */
@media (max-width: 1000px) {
  .now-layout { grid-template-columns: minmax(0, 1fr) 180px; gap: 30px; }
}
@media (max-width: 760px) {
  .story-intro { grid-template-columns: 1fr; gap: 24px; padding: 36px 0 40px; }
  .story-layout { padding-bottom: 48px; }
  .chapter { margin-bottom: 48px; }
  .chapter h2 { font-size: clamp(1.5rem, 4.8vw, 1.875rem); }
  .chapter-now { margin-bottom: 0; }
  .essay-preview { padding-bottom: 56px; }
  .sophia-portrait .portrait-visual { max-width: 240px; margin-inline: auto; }
  .portrait-label { margin-top: 14px; margin-bottom: 0; }
  .portrait-label > span { display: block; margin-left: 0; }
  .essays-heading { padding: 48px 0 32px; }
  .essay-list a { padding: 24px 0; }
}
@media (max-width: 520px) {
  .site-header { gap: 10px; }
  .site-header nav { gap: 16px; }
  .site-header nav a { font-size: .875rem; }
  .site-header .name { font-size: 1.0625rem; }
  .story-photo { margin-top: 26px; }
  .photo-pair { gap: 14px; }
  .cricket-pair { gap: 14px; }
  .collection-grid { gap: 10px; }
  .collection-grid figcaption { font-size: .75rem; }
  .community-pair, .product-pair { grid-template-columns: 1fr; }
  .phone-gallery { gap: 12px; }
  .phone-gallery figcaption { font-size: .75rem; }
  .now-layout { display: flex; flex-direction: column; gap: 32px; }
  .now-portrait { width: 210px; align-self: center; margin: 0; }
  .chapter h2 br { display: none; }
  .sophia-portrait { gap: 26px; }
  .sophia-portrait .portrait-quote { text-align: left; }
  .continue-block { flex-direction: column; gap: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}
@media print {
  .continue-block, .resume-note { display: none !important; }
  .story-layout { display: block; }
  .chapter { padding: 20px 0; margin: 0; }
  .chapter-prose { font-size: 11pt; }
  .story-cover, .story-photo, .chapter header { break-inside: avoid; }
}


/* A quiet ending to the story leads into the essays. */
.speaking-photo { max-width: 680px; }
.story-ending { width: min(var(--measure), calc(100% - var(--gutter) * 2)); margin: 0 auto 56px; padding-top: 28px; border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 16px 28px; flex-wrap: wrap; }
.story-ending a { display: inline-flex; align-items: center; min-height: 44px; color: var(--accent); font-size: .9375rem; text-decoration: none; }
.story-ending a:hover { text-decoration: underline; }
.story-ending .back-to-start { font-size: .8125rem; color: var(--muted); }
@media print { .story-ending { display: none; } }

/* css/atmosphere.css */
/* One continuous night surface. Content geometry stays in style.css. */
:root {
  --sky-image: url('/static/images/milky-way-lettering-1280.2414b91cb3.webp');
  color-scheme: dark;
  --paper: #05070e;
  --ink: #d0d4e1;
  --text: #c3c7d3;
  --muted: #a4acbd;
  --line: rgba(176, 187, 212, .16);
  --accent: #b2bfdc;
  --sky-drift: 0px;
  --sky-travel: 0px;
  --sky-x: 50%;
  background: var(--paper);
}
body { position: relative; isolation: isolate; min-height: 100svh; }
body::before {
  content: "";
  position: fixed;
  z-index: -1;
  inset: -28px -12px auto;
  height: calc(100vh + var(--sky-travel) + 56px);
  height: calc(100lvh + var(--sky-travel) + 56px);
  pointer-events: none;
  background-image: linear-gradient(rgba(5, 7, 14, .82), rgba(5, 7, 14, .82)), var(--sky-image), url('/assets/desert-horizon.webp');
  background-blend-mode: normal, screen, normal;
  background-size: cover;
  background-position: var(--sky-x) center;
  transform: translate3d(0, var(--sky-drift), 0);
  will-change: transform, translate;
}
::selection { color: #e0e4ef; background: #35405a; -webkit-text-fill-color: #e0e4ef; }
a:focus-visible { outline-color: var(--accent); }
.skip { color: var(--ink); background: var(--paper); }

.site-header .name { color: var(--ink); }
.site-header .name > span { color: var(--accent); }
.site-header nav a { color: var(--muted); }
.site-header nav a:hover, .site-header nav a[aria-current="page"] { color: var(--ink); }

/* The sky is visible only inside the letters, over a guaranteed silver base.
   Paragraphs keep a uniform colour so the eye never has to work around texture. */
.hero h1, .story-intro h1, .essays-heading h1, .chapter h2, .essay-list h2 a { color: var(--ink); }
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .hero h1, .story-intro h1, .essays-heading h1, .chapter h2, .essay-list h2 a {
    background-color: #bbc4d8;
    background-image: linear-gradient(rgba(187, 196, 216, .32), rgba(187, 196, 216, .32)), var(--sky-image);
    background-blend-mode: normal, screen;
    background-size: auto, 520px auto;
    background-position: center, center 44%;
    background-repeat: no-repeat;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  .essay-list h2 a:hover, .essay-list h2 a:focus-visible {
    background-image: none;
    background-color: #d2d9e9;
  }
}

/* Transparent sections retain their existing widths, gutters, and vertical gaps. */
.hero { padding-bottom: 24px; }
.article-shell { padding-top: 24px; }
.reading-surface, .story-layout, .site-footer { background: transparent; }
.story-section { width: 100%; }
.story-intro { width: min(var(--page), calc(100% - var(--gutter) * 2)); margin-inline: auto; }
.story-layout { padding-inline: var(--gutter); }
.chapter { scroll-margin-top: 32px; }


.essay-index { display: flex; flex-direction: column; }
.essay-index .site-header { flex-shrink: 0; }
.essays-page { display: flex; flex-direction: column; flex: 1; width: 100%; padding-bottom: 0; }
.essays-heading, .essay-list { width: min(var(--page), calc(100% - var(--gutter) * 2)); margin-inline: auto; }
.essay-index .reading-surface { flex: 1; }

.reading-progress { height: 1px; }
.reading-progress span { background: #8f9fc5; box-shadow: none; }
.continuum > div { border-top-color: var(--line); }
.continuum > .active { border-top-color: var(--accent); }
.continue-link { border-bottom-color: #71809f; }
.continue-link:hover, .text-link:hover, .site-footer a:hover, .signature a:hover { color: var(--ink); }
.founder-photo img, .story-cover img, .story-photo img, .portrait-visual img { box-shadow: none; filter: none; }

.site-footer {
  position: relative;
  width: 100%;
  padding-inline: max(var(--gutter), calc((100% - var(--page)) / 2));
  border-top: 0;
}
.site-footer::before { content: ""; position: absolute; top: 0; left: max(var(--gutter), calc((100% - var(--page)) / 2)); right: max(var(--gutter), calc((100% - var(--page)) / 2)); height: 1px; background: var(--line); }


/* Long, coordinated tides give the sky and lettering life without moving prose. */
.living-sky body::before {
  animation: sky-current 56s ease-in-out infinite alternate, sky-hues 48s ease-in-out infinite;
}
.living-sky :is(.hero h1, .story-intro h1, .essays-heading h1, .chapter h2, .essay-list h2 a) { animation: starlit-letters 48s ease-in-out infinite; }
.living-sky :is(.prose, .chapter-prose) { animation: reading-light 48s ease-in-out infinite; }
.living-sky .site-header .name { animation: silver-light 48s ease-in-out infinite; }
.living-sky :is(.story-photo figcaption, .portrait-label > span, .continuum span) { animation: quiet-light 48s ease-in-out infinite; }
.sky-paused body::before, .sky-paused :is(.hero h1, .story-intro h1, .essays-heading h1, .chapter h2, .essay-list h2 a, .prose, .chapter-prose, .site-header .name, .story-photo figcaption, .portrait-label > span, .continuum span) { animation-play-state: paused; }

@keyframes sky-current {
  /* Independent translation keeps ambient drift visible at any crop.
     The transform above remains dedicated to scroll movement. */
  from { translate: -8px -5px; }
  to { translate: 8px 5px; }
}
@keyframes sky-hues {
  0%, 100% { filter: hue-rotate(-12deg) saturate(1.2); }
  33% { filter: hue-rotate(38deg) saturate(1.3); }
  66% { filter: hue-rotate(-48deg) saturate(1.25); }
}
@keyframes starlit-letters {
  0%, 100% { color: #c8d3ec; background-color: #bbc9e4; background-position: center, center 44%; }
  33% { color: #dbcbe5; background-color: #d0bedb; background-position: center, 54% 48%; }
  66% { color: #c5dfd8; background-color: #b9d1ce; background-position: center, 48% 40%; }
}
@keyframes reading-light {
  0%, 100% { color: #c3c7d3; }
  33% { color: #cdc3cf; }
  66% { color: #bed0cd; }
}
@keyframes silver-light {
  0%, 100% { color: #c8d3ec; }
  33% { color: #dbcbe5; }
  66% { color: #c5dfd8; }
}
@keyframes quiet-light {
  0%, 100% { color: #a4acbd; }
  33% { color: #b4a7b8; }
  66% { color: #a3bab5; }
}

/* The essay title stays uniformly readable over the night sky. */
.living-sky body.essay-page .hero h1,
body.essay-page .hero h1,
.living-sky .essay-list h2 a,
.essay-list h2 a {
  color: #dce3f1;
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-text-fill-color: currentColor;
  animation: none;
}

@media (max-width: 760px) {
  :root { --sky-image: url('/static/images/milky-way-lettering-720.7fc3ccb7e3.webp'); }
  :root { --sky-x: 12%; }
  .hero { padding-bottom: 16px; }
  .article-shell { padding-top: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .living-sky body::before, .living-sky :is(.hero h1, .story-intro h1, .essays-heading h1, .chapter h2, .essay-list h2 a, .prose, .chapter-prose, .site-header .name, .story-photo figcaption, .portrait-label > span, .continuum span) { animation: none; }
  body::before { transform: none; translate: none; will-change: auto; }
}
@media (prefers-contrast: more) {
  :root { --text: #d5d9e5; --muted: #c4cbdc; --line: #657086; }
  body::before { display: none; }
  .hero h1, .story-intro h1, .essays-heading h1, .chapter h2, .essay-list h2 a { background: none; -webkit-text-fill-color: currentColor; }
}
@media (forced-colors: active) {
  .living-sky body.essay-page .hero h1, body.essay-page .hero h1,
  .living-sky .essay-list h2 a, .essay-list h2 a { color: CanvasText; }
  body::before { display: none; }
  .essay-page .hero h1, .hero h1, .story-intro h1, .essays-heading h1, .chapter h2, .essay-list h2 a, .site-header .name, .site-header nav a { color: CanvasText; background: none; -webkit-text-fill-color: currentColor; }
}
@media print {
  .living-sky body.essay-page .hero h1, body.essay-page .hero h1,
  .living-sky .essay-list h2 a, .essay-list h2 a { color: var(--ink); }
  :root { color-scheme: light; --paper: #ffffff; --ink: #202832; --text: #434b56; --muted: #65707e; --line: #e1e5eb; --accent: #465f86; }
  body::before { display: none; }
  .essay-page .hero h1, .hero h1, .story-intro h1, .essays-heading h1, .chapter h2, .essay-list h2 a { color: var(--ink); background: none; -webkit-text-fill-color: currentColor; }
  .hero { padding-bottom: 0; }
  .story-layout { padding-inline: 0; }
  .essay-index, .essays-page { display: block; }
}

@media (prefers-contrast: more), (forced-colors: active), print {
  .living-sky body::before, .living-sky :is(.hero h1, .story-intro h1, .essays-heading h1, .chapter h2, .essay-list h2 a, .prose, .chapter-prose, .site-header .name, .story-photo figcaption, .portrait-label > span, .continuum span) { animation: none; }
}

.motion-toggle { min-height: 44px; padding: 0; border: 0; background: transparent; color: var(--muted); font: inherit; cursor: pointer; }
.motion-toggle[hidden] { display: none; }
.motion-toggle:hover { color: var(--ink); }
.motion-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.essay-index .site-footer { justify-content: flex-end; }
@media print { .motion-toggle { display: none; } }

/* css/story.css */
/* The story has its own reading layout. The essay keeps its existing styling. */
.story-page {
  --paper: #03050b;
  --ink: #e6e8ee;
  --text: #d0d4de;
  --muted: #a9b2c5;
  --accent: #b9cdf0;
  --measure: 680px;
  --story-gallery: 780px;
  --story-serif: 'Iowan Old Style', 'Palatino Linotype', 'Book Antiqua', Palatino, Georgia, serif;
  background: var(--paper);
}

/* Keep the supplied star photograph at viewport scale rather than stretching
   one sky over the full article. A quiet centre protects the reading column. */
.story-page::before {
  height: calc(100vh + 56px);
  height: calc(100lvh + 56px);
  transform: none;
  background-image:
    linear-gradient(90deg, rgba(3, 5, 11, .48), rgba(3, 5, 11, .90) 30%, rgba(3, 5, 11, .90) 70%, rgba(3, 5, 11, .48)),
    linear-gradient(rgba(3, 5, 11, .28), rgba(3, 5, 11, .28)),
    var(--sky-image);
  background-blend-mode: normal;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

.story-page .site-header,
.story-page .story-intro {
  width: min(var(--story-gallery), calc(100% - var(--gutter) * 2));
  margin-inline: auto;
}
.story-page .site-header { min-height: 104px; }
.story-page .story-intro {
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  align-items: start;
  gap: 34px;
  padding: clamp(48px, 7vw, 84px) 0 clamp(36px, 5vw, 60px);
}
.story-page .story-intro h1 {
  width: 100%;
  text-align: center;
  font-size: clamp(2.5rem, 5vw, 3.75rem);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -.045em;
}
.story-page .founder-photo { width: 100%; margin-inline: auto; }
.story-page .founder-photo img { border-radius: 8px; }
.story-contact {
  width: 100%;
  margin-top: -18px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 20px;
  font-size: .875rem;
  line-height: 1.6;
  letter-spacing: 0;
}
.story-contact-identity { display: grid; gap: 1px; }
.story-contact-name { color: var(--text); font-size: .9375rem; font-weight: 500; }
.story-contact-location { color: var(--muted); font-size: .75rem; }
.story-contact-links { display: flex; justify-content: flex-end; gap: 2px; margin: 0; }
.story-contact-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 44px;
  color: var(--muted);
  border-radius: 4px;
  text-decoration: none;
  transition: color .2s ease;
}
.story-contact-links a:hover { color: var(--ink); }
.story-contact-links a:focus-visible { outline: 2px solid var(--accent); outline-offset: 0; }
.story-contact-links svg { display: block; width: 16px; height: 16px; }
@media (max-width: 480px) {
  .story-contact { gap: 16px; }
  .story-contact-name { font-size: .875rem; }
  .story-contact-links a { flex-shrink: 0; }
}
.story-page .chapters { max-width: var(--story-gallery); }
.story-page .chapter { margin-bottom: clamp(64px, 8vw, 104px); }
.story-page .chapter-now { margin-bottom: 0; }
.story-page .chapter > header,
.story-page .chapter > .chapter-prose,
.story-page .now-layout { width: 100%; max-width: var(--measure); margin-inline: auto; }
.story-page .chapter h2 {
  margin-bottom: 26px;
  font-size: clamp(1.65rem, 2.6vw, 2rem);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -.035em;
}
.story-page .chapter-prose {
  font-family: var(--story-serif);
  font-size: clamp(1.1875rem, 1.4vw, 1.3125rem);
  font-weight: 400;
  line-height: 1.85;
  letter-spacing: 0;
  overflow-wrap: break-word;
  color: var(--text);
}
.story-page .chapter-prose p { margin-bottom: 1.25em; }
.story-page .chapter-prose p:last-child { margin-bottom: 0; }
.story-page .chapter-prose a {
  color: var(--accent);
  text-decoration-color: rgba(185, 205, 240, .48);
  text-decoration-thickness: 1px;
  text-underline-offset: .22em;
}
.story-page .chapter-prose a:hover { color: var(--ink); text-decoration-color: currentColor; }

/* Every photograph or group shares the same centre line. Keep the originals'
   aspect ratios, and bound product screens and portraits within that column. */
.story-page .chapter > .story-photo,
.story-page .photo-pair,
.story-page .collection-grid,
.story-page .phone-gallery {
  width: 100%;
  max-width: var(--story-gallery);
  margin-inline: auto;
}
.story-page .chapter > .van-photo { max-width: 480px; }
.story-page .chapter > .action-photo { max-width: var(--measure); }
.story-page .chapter > .toss-photo { max-width: 480px; }
.story-page .chapter > .speech-photo { max-width: 300px; }
.story-page .chapter > .qull-mark {
  position: relative;
  isolation: isolate;
  mix-blend-mode: lighten;
  max-width: 680px;
  margin-block: 44px;
}
.qull-mark::before {
  content: '';
  position: absolute;
  inset: -8%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 58%, rgba(166, 188, 226, .08), transparent 68%);
}
.story-page .qull-mark img { border-radius: 0; }
.story-page .campaign-pair,
.story-page .product-pair,
.story-page .phone-gallery,
.story-page .chapter > .speaking-photo,
.story-page .chapter > .product-main { max-width: var(--measure); }
.story-page .story-photo { margin-top: 36px; }
.story-page .story-photo img { border-radius: 6px; }
.story-page .story-photo figcaption {
  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: .875rem;
  line-height: 1.6;
  text-align: center;
  color: var(--muted);
}
.story-page .photo-pair,
.story-page .collection-grid { align-items: start; }
.story-page .phone-gallery .story-photo figcaption { max-width: none; }
.story-page .phone-gallery .story-photo img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 5;
  object-fit: cover;
  object-position: center;
}
.story-page .chapter-after { margin-top: 36px; }
.story-page .chapter > :is(.story-photo, .photo-pair, .collection-grid, .phone-gallery) + .chapter-prose { margin-top: 36px; }
.story-page .chapter > .community-photo { max-width: var(--measure); }
.story-page .collection-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 540px; }
.story-page .chapter > .toronto-photo { max-width: 300px; }
.story-page .ikigai-moment {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 190px;
  align-items: center;
  gap: 36px;
  width: 100%;
  max-width: var(--measure);
  margin: 36px auto 44px;
}
.story-page .ikigai-moment .phone-photo { width: 100%; margin: 0; }
.story-page .phone-photo img { width: 100%; height: auto; aspect-ratio: 3 / 5; object-fit: cover; object-position: center; }
.story-page .now-layout { display: flex; flex-direction: column; gap: 0; }
.story-page .now-portrait { width: 220px; max-width: 70%; align-self: center; margin-inline: auto; }
.story-page .story-vision { padding-top: 30px; border-top: 1px solid var(--line); }
.story-page .story-ending { margin-top: 64px; }
.story-page .site-footer { padding-inline: max(var(--gutter), calc((100% - var(--story-gallery)) / 2)); }
.story-page .site-footer::before {
  left: max(var(--gutter), calc((100% - var(--story-gallery)) / 2));
  right: max(var(--gutter), calc((100% - var(--story-gallery)) / 2));
}

/* Motion belongs to the sky. Letterforms stay crisp and their contrast stable. */
.story-page :is(.story-intro h1, .chapter h2) {
  background: none;
  color: var(--ink);
  -webkit-text-fill-color: currentColor;
}
.living-sky .story-page :is(.story-intro h1, .chapter h2, .chapter-prose, .site-header .name, .story-photo figcaption) {
  animation: none;
}

@media (max-width: 760px) {
  .story-page { --gutter: clamp(22px, 5.5vw, 36px); }
  .story-page::before {
    background-image:
      linear-gradient(90deg, rgba(3, 5, 11, .62), rgba(3, 5, 11, .84) 20%, rgba(3, 5, 11, .84) 80%, rgba(3, 5, 11, .62)),
      linear-gradient(rgba(3, 5, 11, .25), rgba(3, 5, 11, .25)),
      var(--sky-image);
    background-position: center, center, 38% center;
  }
  .story-page .site-header { min-height: 82px; }
  .story-page .story-intro { gap: 26px; padding-top: 40px; padding-bottom: 32px; }
  .story-contact { margin-top: -12px; }
  .story-page .chapter-prose { font-size: 1.1875rem; line-height: 1.85; }
  .story-page .chapter h2 { margin-bottom: 22px; }
  .story-page .story-photo { margin-top: 28px; }
  .story-page .story-photo figcaption { font-size: .8125rem; }
  .story-page .story-ending { margin-top: 48px; }
  .story-page .chapter > .toronto-photo { width: min(280px, 80%); }
  .story-page .chapter > .qull-mark { margin-block: 32px; }
  .story-page .ikigai-moment { grid-template-columns: minmax(0, 1fr); gap: 24px; margin-block: 0 36px; }
  .story-page .ikigai-moment .phone-photo { width: min(240px, 78%); margin-inline: auto; }
}
@media (prefers-contrast: more) {
  .story-page { --text: #e4e7ef; --muted: #cad2e2; --accent: #d3e1ff; }
}
@media print {
  .story-page .chapter > .qull-mark { mix-blend-mode: normal; }
  .story-page { --paper: #fff; --ink: #202832; --text: #434b56; --muted: #65707e; --accent: #465f86; }
  .story-page .story-intro { padding: 24px 0; }
  .story-page .chapter { margin-bottom: 24px; }
  .story-page .chapter-prose { font-size: 11pt; line-height: 1.65; }
}

/* css/sophia-showcase.css */
/* Animated feature illustrations, set in the personal story's reading column. */
.story-page .sophia-showcase {
  --cream: #e6e8ee;
  --cream-16: rgba(230,232,238,.20);
  --cream-34: #a9b2c5;
  --cream-52: #bdc5d4;
  --jade: #b9cdf0;
  --sophia-surface: #03050b;
  --line: rgba(185,205,240,.28);
  --line-soft: rgba(185,205,240,.12);
  --font: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --ease: cubic-bezier(.22,1,.36,1);
  --ease-soft: cubic-bezier(.45,0,.55,1);
  width: 100%;
  max-width: var(--measure);
  margin: 44px auto;
  position: relative;
  isolation: isolate;
}
.sophia-showcase .seq-panels { list-style: none; padding: 0; margin: 0; }
.sophia-showcase .panel {
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 24px;
  margin: 0 0 44px;
  padding: 0;
  min-width: 0;
  text-align: center;
}
.sophia-showcase .sophia-panel-copy {
  align-self: center;
  width: 100%;
  max-width: 560px;
  margin: 0;
  color: var(--text);
  font: 400 clamp(1.1875rem, 1.4vw, 1.3125rem)/1.85 var(--story-serif);
  letter-spacing: 0;
  text-wrap: balance;
}
.sophia-showcase .vis {
  position: relative;
  width: min(100%, 350px);
  align-self: center;
  isolation: isolate;
}
.sophia-showcase .vis::before {
  content: '';
  position: absolute;
  inset: -12%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse, rgba(185,205,240,.07), transparent 68%);
}
.sophia-showcase .vis svg { display: block; width: 100%; height: auto; overflow: visible; }
.sophia-showcase .vis text { font-family: var(--font); }
.sophia-showcase .vis-portrait { width: min(100%, 280px); aspect-ratio: 1; }
.sophia-showcase .vis-ring { width: min(100%, 280px); }
.sophia-showcase .face { position: absolute; inset: 4.5%; margin: 0; border-radius: 50%; overflow: hidden; }
.sophia-showcase .face img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; border-radius: 50%; }
.sophia-showcase .face .image-zoom { width: 100%; height: 100%; border-radius: 50%; }
.sophia-showcase .face::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  box-shadow: inset 0 -40px 55px -16px rgba(3,5,11,.7), inset 0 0 0 1px rgba(230,232,238,.12);
}
.sophia-showcase .pring { position: absolute; inset: 0; pointer-events: none; }
.sophia-showcase .pring-track { fill: none; stroke: var(--line); stroke-width: 1; }
.sophia-showcase .pring-arc {
  fill: none; stroke: var(--jade); stroke-width: 1.8; stroke-linecap: round;
  stroke-dasharray: 150 460; transform-origin: 50% 50%; animation: sophia-spin 16s linear infinite;
}
.sophia-showcase .orbit-arcs path { fill: none; stroke: var(--jade); stroke-width: 3; stroke-linecap: round; }
.sophia-showcase .orbit-arcs { transform-origin: 50% 50%; animation: sophia-spin 30s linear infinite; }
.sophia-showcase .orbit-days text { font-size: 34px; font-weight: 500; fill: var(--cream); text-anchor: middle; dominant-baseline: middle; }
.sophia-showcase.is-enhanced .seq-panels { display: grid; }
.sophia-showcase.is-enhanced .panel {
  grid-area: 1 / 1;
  grid-template-rows: minmax(78px, auto) 290px;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity .45s var(--ease), transform .45s var(--ease), visibility 0s .45s;
}
.sophia-showcase.is-enhanced .panel.is-live {
  opacity: 1; visibility: visible; transform: none; pointer-events: auto;
  transition: opacity .45s var(--ease), transform .45s var(--ease), visibility 0s;
}
.sophia-showcase .sophia-controls { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 18px; }
.sophia-showcase .sophia-controls[hidden] { display: none; }
.sophia-showcase .sophia-dots { display: flex; gap: 0; }
.sophia-showcase .sophia-controls button {
  display: grid; place-items: center; position: relative; width: 32px; height: 44px;
  padding: 0; border: 0; border-radius: 4px; color: var(--muted); background: transparent; cursor: pointer;
}
.sophia-showcase .sophia-controls button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.sophia-showcase .sophia-dots button::after {
  content: ''; width: 6px; height: 6px; border-radius: 50%; background: #657086;
  transition: background .3s, box-shadow .3s, transform .3s;
}
.sophia-showcase .sophia-dots button[aria-current='true']::after {
  background: var(--jade); transform: scale(1.3); box-shadow: 0 0 12px rgba(185,205,240,.35);
}
.sophia-showcase .sophia-playback svg { width: 17px; height: 17px; }
.sophia-showcase .play-symbol, .sophia-showcase.is-paused .pause-symbol { display: none; }
.sophia-showcase.is-paused .play-symbol { display: block; }
.sophia-showcase .sophia-link { margin: 10px 0 0; text-align: center; font: 400 .9375rem/1.8 var(--font); }
.sophia-showcase .sophia-link a { color: var(--accent); text-underline-offset: .22em; }
@media (max-width: 760px) {
  .story-page .sophia-showcase { margin-block: 36px; }
  .sophia-showcase .vis { width: min(100%, 300px); }
  .sophia-showcase .vis-portrait, .sophia-showcase .vis-ring { width: min(100%, 250px); }
  .sophia-showcase.is-enhanced .panel { grid-template-rows: minmax(106px, auto) 260px; gap: 12px; }
}
.sophia-showcase .vis { color: var(--cream); }

.sophia-showcase.is-enhanced .panel:not(.is-live) .amb { animation-play-state: paused; }

@keyframes sophia-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes sophia-pop-in  { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: scale(1); } }
@keyframes sophia-draw    { to   { stroke-dashoffset: 0; } }
@keyframes sophia-rise    { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes sophia-spin    { to   { transform: rotate(360deg); } }
@keyframes sophia-float-y { 0%, 100% { transform: translateY(-6px); } 50% { transform: translateY(6px); } }
@keyframes sophia-twinkle { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }
@keyframes sophia-scan {
  0%        { transform: translateX(-16%); opacity: 0; }
  14%, 86%  { opacity: 1; }
  100%      { transform: translateX(104%); opacity: 0; }
}
@keyframes sophia-lw-in   { from { opacity: 0; transform: scaleY(.12); } to { opacity: 1; transform: scaleY(1); } }
@keyframes sophia-pace    { 0%, 100% { opacity: .22; transform: scale(.72); } 50% { opacity: 1; transform: scale(1.18); } }

/* ── 01 · a week that closes on itself ────────────────────────────────────── */
.sophia-showcase .wk-track { fill: none; stroke: var(--cream-16); stroke-width: 14; stroke-linecap: round; }
.sophia-showcase .wk-fill  { fill: none; stroke: var(--jade); stroke-width: 14; stroke-linecap: round;
            stroke-dasharray: 85; stroke-dashoffset: 0; }
.sophia-showcase .wk-label { fill: var(--cream-52); font-size: 13px; font-weight: 500; letter-spacing: .12em; }

.sophia-showcase.is-enhanced .panel:not(.is-live) .wk-fill { stroke-dashoffset: 85; }
.sophia-showcase.is-enhanced .panel.is-live .wk-fill { animation: sophia-draw .5s var(--ease) both; }
.sophia-showcase .d1 .wk-fill { animation-delay: .18s; } .sophia-showcase .d2 .wk-fill { animation-delay: .30s; }
.sophia-showcase .d3 .wk-fill { animation-delay: .42s; } .sophia-showcase .d4 .wk-fill { animation-delay: .54s; }
.sophia-showcase .d5 .wk-fill { animation-delay: .66s; } .sophia-showcase .d6 .wk-fill { animation-delay: .78s; }
.sophia-showcase .d7 .wk-fill { animation-delay: .90s; }

/* ── 02 · block · repetition · prolongation ───────────────────────────────── */
.sophia-showcase .lw-bar     { fill: var(--cream-16); }
.sophia-showcase .lw-bar.rep { fill: rgba(185,205,240,.5); }
.sophia-showcase .lw-bar.on  { fill: var(--jade); }
.sophia-showcase .lw-bars    { transform-box: fill-box; transform-origin: center; }
.sophia-showcase .lw-tick    { stroke: var(--line); stroke-width: 1; fill: none; }
.sophia-showcase .lw-tag     { fill: var(--cream-52); font-size: 11px; font-weight: 500; letter-spacing: .14em; }
.sophia-showcase .lw-scan    { fill: url(#sophia-scan); animation: sophia-scan 3.4s var(--ease-soft) infinite; }

.sophia-showcase.is-enhanced .panel:not(.is-live) .lw-bars { opacity: 0; transform: scaleY(.12); }
.sophia-showcase.is-enhanced .panel:not(.is-live) .lw-tick,
.sophia-showcase.is-enhanced .panel:not(.is-live) .lw-tag  { opacity: 0; }
.sophia-showcase.is-enhanced .panel.is-live .lw-bars { animation: sophia-lw-in .8s var(--ease) .1s both; }
.sophia-showcase.is-enhanced .panel.is-live .lw-tick,
.sophia-showcase.is-enhanced .panel.is-live .lw-tag  { animation: sophia-fade-in .6s var(--ease) .6s both; }

/* ── 03 · progress ────────────────────────────────────────────────────────── */
.sophia-showcase .pg-grid { stroke: var(--line-soft); stroke-width: 1; }
.sophia-showcase .pg-bar  { fill: rgba(185,205,240,.2); transform-box: fill-box; transform-origin: bottom; }
.sophia-showcase .pg-line { stroke: var(--jade); stroke-width: 3; fill: none;
           stroke-linecap: round; stroke-linejoin: round;
           stroke-dasharray: 473; stroke-dashoffset: 0; }
.sophia-showcase .pg-node { fill: var(--sophia-surface); stroke: var(--jade); stroke-width: 2.5;
           transform-box: fill-box; transform-origin: center; }
.sophia-showcase .pg-cap  { fill: var(--cream-34); font-size: 11px; font-weight: 500; letter-spacing: .16em; }

.sophia-showcase.is-enhanced .panel:not(.is-live) .pg-bar  { transform: scaleY(0); }
.sophia-showcase.is-enhanced .panel:not(.is-live) .pg-line { stroke-dashoffset: 473; }
.sophia-showcase.is-enhanced .panel:not(.is-live) .pg-node { opacity: 0; }
.sophia-showcase.is-enhanced .panel.is-live .pg-bar  { animation: sophia-rise .6s var(--ease) both; }
.sophia-showcase.is-enhanced .panel.is-live .pg-line { animation: sophia-draw 1.15s var(--ease) .3s both; }
.sophia-showcase.is-enhanced .panel.is-live .pg-node { animation: sophia-pop-in .4s var(--ease) both; }
.sophia-showcase .b1 { animation-delay: .10s; } .sophia-showcase .b2 { animation-delay: .15s; } .sophia-showcase .b3 { animation-delay: .20s; }
.sophia-showcase .b4 { animation-delay: .25s; } .sophia-showcase .b5 { animation-delay: .30s; } .sophia-showcase .b6 { animation-delay: .35s; }
.sophia-showcase .b7 { animation-delay: .40s; } .sophia-showcase .b8 { animation-delay: .45s; } .sophia-showcase .b9 { animation-delay: .50s; }
.sophia-showcase .b10 { animation-delay: .55s; } .sophia-showcase .b11 { animation-delay: .60s; } .sophia-showcase .b12 { animation-delay: .65s; }
.sophia-showcase .n1 { animation-delay: .45s; } .sophia-showcase .n6 { animation-delay: .85s; } .sophia-showcase .n12 { animation-delay: 1.30s; }

/* ── 04 · play ────────────────────────────────────────────────────────────── */
.sophia-showcase .gm-orb  { fill: none; stroke: var(--line); stroke-width: 1; stroke-dasharray: 2 8; }
.sophia-showcase .gm-card { fill: rgba(230,232,238,.05); stroke: var(--line); stroke-width: 1; }
.sophia-showcase .gm-word { fill: var(--cream); font-size: 32px; font-weight: 500; letter-spacing: -.02em; }
.sophia-showcase .gm-sub  { fill: var(--cream-34); font-size: 11px; font-weight: 500; letter-spacing: .22em; }
.sophia-showcase .gm-pace { fill: var(--jade); transform-box: fill-box; transform-origin: center;
           animation: sophia-pace 1.9s var(--ease-soft) infinite; }
.sophia-showcase .p1 { animation-delay: 0s; } .sophia-showcase .p2 { animation-delay: .2s; } .sophia-showcase .p3 { animation-delay: .4s; }
.sophia-showcase .gm-tok  { transform-box: fill-box; transform-origin: center; animation: sophia-float-y 6s var(--ease-soft) infinite; }
.sophia-showcase .gm-star { fill: var(--jade); animation: sophia-twinkle 3.2s var(--ease-soft) infinite; }
.sophia-showcase .t1 { animation-delay: -.4s;  animation-duration: 6.4s; }
.sophia-showcase .t2 { animation-delay: -1.9s; animation-duration: 7.1s; }
.sophia-showcase .t3 { animation-delay: -3.2s; animation-duration: 5.8s; }
.sophia-showcase .t4 { animation-delay: -2.4s; animation-duration: 6.9s; }
.sophia-showcase .t5 { animation-delay: -1.1s; animation-duration: 8.2s; }
.sophia-showcase .t6 { animation-delay: -4.0s; animation-duration: 7.6s; }

.sophia-showcase.is-enhanced .panel:not(.is-live) .gm-card,
.sophia-showcase.is-enhanced .panel:not(.is-live) .gm-word,
.sophia-showcase.is-enhanced .panel:not(.is-live) .gm-sub,
.sophia-showcase.is-enhanced .panel:not(.is-live) .gm-orb  { opacity: 0; }
.sophia-showcase.is-enhanced .panel.is-live .gm-orb  { animation: sophia-fade-in .7s var(--ease) .1s both; }
.sophia-showcase.is-enhanced .panel.is-live .gm-card { animation: sophia-fade-in .6s var(--ease) .16s both; }
.sophia-showcase.is-enhanced .panel.is-live .gm-sub  { animation: sophia-fade-in .6s var(--ease) .32s both; }
.sophia-showcase.is-enhanced .panel.is-live .gm-word { animation: sophia-fade-in .6s var(--ease) .4s both; }

/* ── 05 · what it costs ───────────────────────────────────────────────────── */
.sophia-showcase .vl-bar-old { fill: rgba(230,232,238,.1); transform-box: fill-box; transform-origin: bottom; }
.sophia-showcase .vl-bar-new { fill: var(--jade); transform-box: fill-box; transform-origin: bottom; }
.sophia-showcase .vl-base    { stroke: var(--line); stroke-width: 1; }
.sophia-showcase .vl-cap     { fill: var(--cream-34); font-size: 12px; font-weight: 500; letter-spacing: .18em; }
.sophia-showcase .vl-x       { fill: var(--cream); font-size: 86px; font-weight: 540; letter-spacing: -.05em;
              transform-box: fill-box; transform-origin: center; }

.sophia-showcase.is-enhanced .panel:not(.is-live) .vl-bar-old,
.sophia-showcase.is-enhanced .panel:not(.is-live) .vl-bar-new { transform: scaleY(0); }
.sophia-showcase.is-enhanced .panel:not(.is-live) .vl-x       { opacity: 0; }
.sophia-showcase.is-enhanced .panel.is-live .vl-bar-old { animation: sophia-rise .7s var(--ease) .1s both; }
.sophia-showcase.is-enhanced .panel.is-live .vl-bar-new { animation: sophia-rise .7s var(--ease) .28s both; }
.sophia-showcase.is-enhanced .panel.is-live .vl-x       { animation: sophia-pop-in .55s var(--ease) .5s both; }

/* ── what it costs: the same unit, ten against one ────────────────────────
   Both columns share a baseline and are built from the SAME money unit —
   the clinic stacks ten of it, Sophia costs exactly one. The eye can count
   the claim: this is what makes the 10x honest. */
.sophia-showcase .ct-cap  { fill: var(--cream-34); font-size: 12px; font-weight: 500; letter-spacing: .2em; }
.sophia-showcase .ct-base { stroke: var(--line); stroke-width: 1; }
.sophia-showcase .ct-unit { fill: rgba(230,232,238,.13); transform-box: fill-box; transform-origin: bottom; }
.sophia-showcase .ct-one  { fill: var(--jade); transform-box: fill-box; transform-origin: bottom; }
.sophia-showcase .ct-x    { fill: var(--jade); font-size: 30px; font-weight: 540; letter-spacing: -.02em; }

.sophia-showcase.is-enhanced .panel:not(.is-live) .ct-unit,
.sophia-showcase.is-enhanced .panel:not(.is-live) .ct-one { transform: scaleY(0); }
.sophia-showcase.is-enhanced .panel:not(.is-live) .ct-x   { opacity: 0; }
.sophia-showcase.is-enhanced .panel.is-live .ct-unit { animation: sophia-rise .34s var(--ease) both; }
.sophia-showcase.is-enhanced .panel.is-live .ct-one  { animation: sophia-rise .5s var(--ease) .96s both; }
.sophia-showcase.is-enhanced .panel.is-live .ct-x    { animation: sophia-pop-in .45s var(--ease) 1.3s both; }
.sophia-showcase .u1 { animation-delay: .10s; } .sophia-showcase .u2 { animation-delay: .18s; } .sophia-showcase .u3 { animation-delay: .26s; }
.sophia-showcase .u4 { animation-delay: .34s; } .sophia-showcase .u5 { animation-delay: .42s; } .sophia-showcase .u6 { animation-delay: .50s; }
.sophia-showcase .u7 { animation-delay: .58s; } .sophia-showcase .u8 { animation-delay: .66s; } .sophia-showcase .u9 { animation-delay: .74s; }
.sophia-showcase .u10 { animation-delay: .82s; }

/* ── 06 · any time, in any language ───────────────────────────────────────── */
.sophia-showcase .wl-globe { fill: none; stroke: rgba(230,232,238,.26); stroke-width: 1.5; }
.sophia-showcase .wl-tick  { stroke: rgba(230,232,238,.3); stroke-width: 2; stroke-linecap: round; }
.sophia-showcase .wl-sweep { fill: none; stroke: var(--jade); stroke-width: 3.5; stroke-linecap: round;
            stroke-dasharray: 214 640;
            transform-box: view-box; transform-origin: 220px 168px;
            animation: sophia-spin 11s linear infinite; }
.sophia-showcase .wl-glyph { fill: var(--jade); font-size: 19px; font-weight: 500;
            animation: sophia-soft-glow 4.4s var(--ease-soft) infinite; }
@keyframes sophia-soft-glow { 0%, 100% { opacity: .72; } 50% { opacity: 1; } }
.sophia-showcase .g1 { animation-delay: 0s; }    .sophia-showcase .g2 { animation-delay: -.3s; }
.sophia-showcase .g3 { animation-delay: -.6s; }  .sophia-showcase .g4 { animation-delay: -.9s; }
.sophia-showcase .g5 { animation-delay: -1.2s; } .sophia-showcase .g6 { animation-delay: -1.5s; }
.sophia-showcase .g7 { animation-delay: -1.8s; } .sophia-showcase .g8 { animation-delay: -2.1s; }
.sophia-showcase .g9 { animation-delay: -2.4s; } .sophia-showcase .g10 { animation-delay: -2.7s; }
.sophia-showcase .g11 { animation-delay: -3s; }  .sophia-showcase .g12 { animation-delay: -3.3s; }
.sophia-showcase .g13 { animation-delay: -3.6s; } .sophia-showcase .g14 { animation-delay: -3.9s; }

.sophia-showcase.is-enhanced .panel:not(.is-live) .wl-globe,
.sophia-showcase.is-enhanced .panel:not(.is-live) .wl-tick { opacity: 0; }
.sophia-showcase.is-enhanced .panel.is-live .wl-tick  { animation: sophia-fade-in .7s var(--ease) .1s both; }
.sophia-showcase.is-enhanced .panel.is-live .wl-globe { animation: sophia-fade-in .7s var(--ease) .28s both; }


/* Stop offscreen work and honour the site's shared motion preference. */
.sophia-showcase:not(.is-visible) *,
.sophia-showcase.is-enhanced .panel:not(.is-live) *,
.sky-paused .sophia-showcase *,
.image-viewer-open .sophia-showcase * { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce), (prefers-contrast: more), (forced-colors: active) {
  .sophia-showcase *, .sophia-showcase *::after { animation: none !important; transition: none !important; }
  .sophia-showcase .vis::before { display: none; }
}
@media print {
  .sophia-showcase.is-enhanced .seq-panels { display: block; }
  .sophia-showcase.is-enhanced .panel { display: block; opacity: 1; visibility: visible; transform: none; margin: 24px 0; break-inside: avoid; }
  .sophia-showcase .vis, .sophia-showcase .sophia-controls { display: none; }
}

/* css/image-viewer.css */
/* Native buttons and a modal dialog progressively enhance every photograph. */
.image-zoom {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: inherit;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: zoom-in;
  -webkit-tap-highlight-color: transparent;
}
.image-zoom:focus-visible { outline: 2px solid #b9cdf0; outline-offset: 5px; }
.image-zoom img { transition: filter .25s ease; }
@media (hover: hover) { .image-zoom:hover img { filter: brightness(1.05); } }
html.image-viewer-open { overflow: hidden; }
.image-viewer {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: #eef1f7;
  overflow: hidden;
  cursor: zoom-out;
  touch-action: manipulation;
}
.image-viewer[open] { display: grid; place-items: center; }
.image-viewer::backdrop { background: transparent; }
.image-viewer-shade { position: absolute; inset: 0; background: rgba(2, 4, 10, .94); backdrop-filter: blur(12px); }
.image-viewer-photo {
  position: relative;
  display: block;
  max-width: calc(100vw - 40px);
  max-height: calc(100dvh - 112px);
  object-fit: contain;
  border-radius: 6px;
  box-shadow: 0 20px 80px rgba(0, 0, 0, .35);
  transform-origin: center;
  user-select: none;
}
.image-viewer-close {
  position: absolute;
  top: max(16px, env(safe-area-inset-top));
  right: max(16px, env(safe-area-inset-right));
  z-index: 2;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(238, 241, 247, .3);
  border-radius: 50%;
  color: #eef1f7;
  background: rgba(12, 17, 28, .85);
  cursor: pointer;
}
.image-viewer-close svg { width: 20px; height: 20px; }
.image-viewer-close:focus-visible { outline: 2px solid #b9cdf0; outline-offset: 4px; }
.image-viewer-hint {
  position: absolute;
  bottom: max(12px, env(safe-area-inset-bottom));
  margin: 0;
  width: 100%;
  padding: 0 16px;
  font: 400 13px/1.5 Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: #b9c2d3;
  text-align: center;
}
@media (prefers-reduced-motion: reduce) { .image-zoom img { transition: none; } }
@media print { .image-viewer { display: none !important; } }