/* Soyo: one stylesheet for every page.
   Palette: washi and persimmon (和紙と柿), the app's tokens from Palette.swift.
   Mood: light coming into daily life. Light by default; a warm ink night only when the system asks.
   Performance: motion uses only transform and opacity; no script draws per frame; motion rests off screen.
   System: Doc/brand/story-and-system.md. */

/* ============================================================
   1. Tokens
   ============================================================ */

:root {
  color-scheme: light dark;

  /* Washi and sumi */
  --paper: #EFEBE3;
  --sheet: #F8F6F1;
  --well: #E5E0D6;
  --ink: #2E2B27;
  --ink-soft: #6F6A62;
  --ink-faint: #A39D93;
  --hairline: rgb(46 43 39 / .09);
  --person: #E4DED2;

  /* The companion: persimmon, 柿 */
  --ember-core: #F29A6B;
  --ember-rim: #E8693A;
  --button-top: #E06A3B;
  --button-bottom: #CC5729;

  /* Joyful dots: old dye names */
  --kaki: #EA7A4C;       /* 柿 persimmon */
  --yamabuki: #F4B323;   /* 山吹 */
  --sakura: #E8A2A0;     /* 桜 */
  --asagi: #3FA3B6;      /* 浅葱 */
  --wakatake: #6BB592;   /* 若竹 */
  --fuji: #ABA1D0;       /* 藤 */

  /* Five moods, heavy to bright (rim values) */
  --mood-heavy: #A59ACA;
  --mood-low: #2E9BB0;
  --mood-okay: #5DAE8B;
  --mood-good: #F2A900;
  --mood-bright: #E8693A;

  /* Morning light through a window */
  --light: 255 252 245;          /* warm white */
  --light-strength: .78;
  --shade: 46 43 39;             /* the soft shadow of the window frame */
  --shade-strength: .03;
  --glow: rgb(255 251 243 / .85); /* the warm side of a lit surface */

  --shadow-rgb: 46 43 39;
  --shadow-card: 0 7px 16px -4px rgb(var(--shadow-rgb) / .07), 0 1px 2px rgb(var(--shadow-rgb) / .04);
  --shadow-lift: 0 34px 70px -34px rgb(var(--shadow-rgb) / .32), 0 2px 6px rgb(var(--shadow-rgb) / .05);

  /* Type */
  --serif: ui-serif, "New York", Georgia, serif;
  --sans: -apple-system, system-ui, sans-serif;
  --serif-ja: ui-serif, "New York", "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", serif;
  --sans-ja: -apple-system, system-ui, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Meiryo", sans-serif;

  --text-label: .8125rem;                                   /* 13 */
  --text-small: .9375rem;                                   /* 15 */
  --text-body: 1.0625rem;                                   /* 17 */
  --text-lead: clamp(1.125rem, 1.02rem + .45vw, 1.3125rem); /* 18–21 */
  --text-letter: clamp(1.2rem, 1.05rem + .6vw, 1.5rem);    /* Soyo's voice */
  --text-title: clamp(1.75rem, 1.35rem + 1.5vw, 2.75rem);  /* row titles */
  --text-statement: clamp(1.9rem, 1.1rem + 3.1vw, 4rem);   /* the big sentence */
  --text-heading: clamp(2.3rem, 1.4rem + 3.4vw, 4.6rem);   /* section titles */
  --text-display: clamp(3.2rem, 1.3rem + 6.8vw, 8.75rem);  /* the one headline */

  /* Space (4 pt base) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 56px;
  --space-10: 80px;
  --space-11: 120px;
  --space-12: 168px;
  --gutter: clamp(20px, 5vw, 64px);
  --inset: clamp(8px, 1.1vw, 16px);   /* the frame's distance from the window edge */
  --section: clamp(112px, 17vh, 200px);
  --measure: 34rem;
  --max: 1200px;

  /* Shape */
  --radius-card: 26px;
  --radius-tile: clamp(24px, 2.4vw, 32px);
  --radius-frame: clamp(26px, 3vw, 44px);
  --radius-capsule: 999px;

  /* Motion: the app's springs as CSS curves */
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-breath: cubic-bezier(.37, 0, .63, 1);
  --spring: cubic-bezier(.2, .9, .25, 1);
  --spring-soft: cubic-bezier(.2, .9, .25, 1.04);
  --spring-press: cubic-bezier(.3, 1.4, .5, 1);
  --dur-entrance: 830ms;
  --dur-soft: 1200ms;
  --dur-press: 320ms;
  --stagger: 70ms;
  --rise: 18px;
  --breath: 11s;

  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .18 0 0 0 0 .17 0 0 0 0 .15 0 0 0 .42 -.18'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

@supports (transition-timing-function: linear(0, 1)) {
  :root {
    --spring: linear(0, .0384, .13, .2476, .3728, .4937, .6034, .6985, .778, .8422, .8926, .931, .9594, .9795, .9933, 1.0022, 1.0075, 1.0101, 1.0111, 1.0108, 1.0099, 1.0087, 1.0073, 1.0059, 1.0047, 1.0036, 1.0027, 1.0019, 1);
    --spring-soft: linear(0, .0424, .1432, .2719, .4075, .5367, .6518, .7494, .8286, .8904, .9367, .9699, .9925, 1.0069, 1.0152, 1.019, 1.0199, 1.0189, 1.0168, 1.0142, 1.0115, 1.0089, 1.0067, 1.0048, 1.0032, 1.0021, 1.0012, 1.0005, 1);
    --spring-press: linear(0, .0556, .1866, .3502, .5168, .6682, .7947, .8931, .9641, 1.0112, 1.0388, 1.0516, 1.0542, 1.0501, 1.0425, 1.0335, 1.0246, 1.0166, 1.01, 1.005, 1.0014, .999, .9977, .9971, .9971, .9973, .9978, .9983, 1);
  }
}

/* Night: warm ink, a lamp instead of the sun. Only when the system asks. */
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #1C1A17;
    --sheet: #262320;
    --well: #2E2B27;
    --ink: #EDE7DC;
    --ink-soft: #A8A196;
    --ink-faint: #6E685F;
    --hairline: rgb(237 231 220 / .1);
    --person: #2D2A26;

    --ember-core: #EE9566;
    --ember-rim: #E0632F;
    --button-top: #DD6536;
    --button-bottom: #C95226;

    --kaki: #E7774A;
    --yamabuki: #EDAE2A;
    --sakura: #E09B99;
    --asagi: #45ABBE;
    --wakatake: #6CB894;
    --fuji: #A398CB;

    --mood-heavy: #9E92C6;
    --mood-low: #3AA6BA;
    --mood-okay: #63B591;
    --mood-good: #EBA614;
    --mood-bright: #E0632F;

    --light: 255 190 130;
    --light-strength: .06;
    --shade: 0 0 0;
    --shade-strength: .12;
    --glow: rgb(255 180 120 / .06);

    --shadow-rgb: 0 0 0;
    --shadow-card: 0 7px 16px -4px rgb(0 0 0 / .3), 0 0 0 1px rgb(237 231 220 / .05);
    --shadow-lift: 0 34px 70px -34px rgb(0 0 0 / .6), 0 0 0 1px rgb(237 231 220 / .05);

    --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .93 0 0 0 0 .9 0 0 0 0 .86 0 0 0 .32 -.14'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }
}

/* ============================================================
   2. Base
   ============================================================ */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background-color: var(--paper);
  background-image: var(--grain);
  background-size: 200px 200px;
}

body {
  margin: 0;
  color: var(--ink);
  font: 400 var(--text-body)/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
:lang(ja) body, body:lang(ja) {
  font-family: var(--sans-ja);
  line-height: 1.9;
  line-break: strict;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
p, h1, h2, h3, ul, ol, dl, dd, figure { margin: 0; }
h1, h2, h3 { font-weight: 400; }
ul, ol { padding: 0; }

::selection { background: color-mix(in srgb, var(--ember-rim) 22%, transparent); }

:focus-visible {
  outline: 2px solid var(--ember-rim);
  outline-offset: 3px;
  border-radius: 6px;
}

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip {
  position: absolute;
  left: 24px; top: 20px;
  z-index: 10;
  padding: 10px 18px;
  border-radius: var(--radius-capsule);
  background: var(--ink);
  color: var(--paper);
  font: 600 var(--text-small)/1 var(--sans);
  text-decoration: none;
  transform: translateY(-300%);
}
.skip:focus { transform: none; }

.wrap {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ============================================================
   3. Type
   ============================================================ */

.display {
  font-family: var(--serif);
  font-size: var(--text-display);
  line-height: .98;
  letter-spacing: -.03em;
  text-wrap: balance;
}
.heading {
  font-family: var(--serif);
  font-size: var(--text-heading);
  line-height: 1.04;
  letter-spacing: -.024em;
  text-wrap: balance;
}
.statement {
  font-family: var(--serif);
  font-size: var(--text-statement);
  line-height: 1.22;
  letter-spacing: -.018em;
  text-wrap: balance;
}
.title {
  font-family: var(--serif);
  font-size: var(--text-title);
  line-height: 1.1;
  letter-spacing: -.018em;
  text-wrap: balance;
}
.letter {
  font-family: var(--serif);
  font-size: var(--text-letter);
  line-height: 1.55;
  text-wrap: pretty;
}
.lead {
  color: var(--ink-soft);
  font-size: var(--text-lead);
  line-height: 1.6;
  text-wrap: pretty;
}
.label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink-soft);
  font: 600 var(--text-label)/1.3 var(--sans);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.label::before {
  content: "";
  flex: none;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--tone, var(--ember-rim));
}

:lang(ja) .display,
:lang(ja) .heading,
:lang(ja) .statement,
:lang(ja) .title,
:lang(ja) .letter {
  font-family: var(--serif-ja);
  letter-spacing: .02em;
  font-feature-settings: "palt";
  word-break: keep-all;
  word-break: auto-phrase;
  overflow-wrap: anywhere;
}
:lang(ja) .display { font-size: clamp(2.6rem, 1.2rem + 5.6vw, 7rem); line-height: 1.16; }
:lang(ja) .heading { font-size: clamp(2rem, 1.3rem + 2.6vw, 3.6rem); line-height: 1.36; }
:lang(ja) .statement { font-size: clamp(1.55rem, 1rem + 2.3vw, 3rem); line-height: 1.75; }
:lang(ja) .title { font-size: clamp(1.5rem, 1.2rem + 1.1vw, 2.2rem); line-height: 1.45; }
:lang(ja) .letter { font-size: clamp(1.08rem, .98rem + .4vw, 1.3rem); line-height: 2; letter-spacing: .04em; }
:lang(ja) .lead { line-height: 1.95; letter-spacing: .02em; word-break: auto-phrase; }
:lang(ja) .label { letter-spacing: .1em; }

.text-link {
  display: inline-flex;
  align-items: center;
  gap: .45em;
  min-height: 44px;
  color: var(--ink);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--ink) 26%, transparent);
  text-decoration-thickness: 1px;
  text-underline-offset: .32em;
  transition: text-decoration-color .3s var(--ease-out);
}
.text-link:hover { text-decoration-color: var(--ember-rim); }
.text-link .arrow { display: inline-block; transition: transform var(--dur-press) var(--spring-press); }
.text-link:hover .arrow { transform: translateX(3px); }

/* ============================================================
   4. Components
   ============================================================ */

/* Header: sits inside the first frame; not fixed */
.site-header {
  position: absolute;
  inset: var(--inset) var(--inset) auto;
  z-index: 5;
}
.site-header .bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  max-width: calc(var(--max) + 2 * var(--gutter));
  margin-inline: auto;
  padding: max(var(--space-4), env(safe-area-inset-top)) var(--gutter) 0;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  color: var(--ink);
  font: 400 1.4rem/1 var(--serif);
  letter-spacing: -.01em;
  text-decoration: none;
}
.wordmark .mark { width: 23px; height: 17px; }

.lang { display: flex; align-items: center; gap: var(--space-1); font: 500 var(--text-label)/1 var(--sans); }
.lang a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 10px;
  color: var(--ink-soft);
  text-decoration: none;
  transition: color .3s var(--ease-out);
}
.lang a:hover { color: var(--ink); }
.lang a[aria-current] { color: var(--ink); }
.lang a[aria-current]::after {
  content: "";
  width: 5px; height: 5px;
  margin-left: 7px;
  border-radius: 50%;
  background: var(--ember-rim);
}

/* The mark: two flat dots side by side (the companion and the friend) */
.mark { position: relative; display: inline-block; flex: none; }
.mark::before, .mark::after { content: ""; position: absolute; border-radius: 50%; }
.mark::before { left: 0; top: 0; width: 72%; aspect-ratio: 1; background: var(--ember-rim); }
.mark::after { right: 0; bottom: 0; width: 42%; aspect-ratio: 1; background: var(--asagi); box-shadow: 0 0 0 1.5px var(--paper); }

/* Sticker dots: flat color, the later dot on top. Where dots overlap, a thin paper edge
   (--edge) cuts them apart; alone, a dot needs no edge. No shine. */
.dot {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--s);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--c);
  box-shadow: 0 0 0 var(--edge, 0px) var(--edge-color, var(--paper));
  translate: var(--jx, 0) var(--jy, 0);
  scale: var(--js, 1);
  animation: drift var(--dur, 22s) ease-in-out var(--delay, 0s) infinite alternate;
}
.dot.ring, .dot[data-fixed] { animation: none; }
.dot.ring { background: none; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--c) 60%, transparent); }
/* The companion's colour has a soft ink tone (as in the app), never a highlight. */
.dot.companion {
  background: radial-gradient(circle at 46% 44%, color-mix(in oklab, var(--ember-core), var(--ember-rim) 30%) 0%, color-mix(in oklab, var(--ember-core), var(--ember-rim) 62%) 76%, color-mix(in oklab, var(--ember-core), var(--ember-rim) 70%) 100%);
}
/* On a lit surface or a card, the paper edge takes that surface's colour. */
.lit .dot, .card .dot { --edge-color: var(--sheet); }

/* An illustration: a square of sticker dots */
.art {
  position: relative;
  width: var(--art, clamp(160px, 22vw, 260px));
  aspect-ratio: 1;
  flex: none;
}

/* A glyph: always the same size */
.glyph { position: relative; display: block; width: 48px; height: 48px; --edge: 2.5px; }

/* Inline dots inside a sentence (like small pictures set into the type) */
.inline-dot {
  display: inline-block;
  width: .62em;
  aspect-ratio: 1;
  margin: 0 .14em;
  border-radius: 50%;
  background: var(--c);
  box-shadow: 0 0 0 .07em var(--paper);
  vertical-align: .06em;
  scale: var(--js, 1);
}
.inline-pair { display: inline-block; position: relative; width: 1.02em; height: .66em; margin: 0 .16em; vertical-align: .02em; }
.inline-pair i { position: absolute; border-radius: 50%; }
.inline-pair i:first-child { left: 0; top: 0; width: .66em; height: .66em; background: var(--ember-rim); }
.inline-pair i:last-child { right: 0; bottom: -.04em; width: .4em; height: .4em; background: var(--asagi); box-shadow: 0 0 0 .06em var(--paper); }

/* Capsules */
.capsule {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6em;
  height: 56px;
  padding: 0 28px;
  border-radius: var(--radius-capsule);
  font: 700 1.1875rem/1 var(--sans);   /* 19 px bold: large text, so white on persimmon passes AA */
  text-decoration: none;
  white-space: nowrap;
  transition: transform var(--dur-press) var(--spring-press), box-shadow .4s var(--ease-out);
}
.capsule:active { transform: scale(.96); transition-duration: 0s; }
.capsule.primary {
  background: linear-gradient(180deg, var(--button-top), var(--button-bottom));
  color: #fff;
  box-shadow: 0 8px 16px -6px color-mix(in srgb, var(--button-bottom) 50%, transparent);
}
.capsule.primary:hover { box-shadow: 0 12px 22px -8px color-mix(in srgb, var(--button-bottom) 60%, transparent); }
.capsule.soon {
  height: 44px;
  padding: 0 18px 0 16px;
  background: var(--well);
  color: var(--ink);
  font: 600 var(--text-small)/1 var(--sans);
  box-shadow: inset 0 0 0 1px var(--hairline);
  cursor: default;
  -webkit-user-select: none;
  user-select: none;
}
.capsule.soon::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ember-rim); }

/* Cards */
.card {
  border-radius: var(--radius-card);
  background: var(--sheet);
  box-shadow: var(--shadow-card);
}

/* ============================================================
   5. Light: a window of morning light that drifts slowly
   ============================================================ */

/* A lit surface: warm toward the window (upper left), paper toward the room. */
.lit {
  --lit: var(--sheet);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 8% 0%, var(--glow), transparent 60%),
    linear-gradient(170deg, var(--sheet) 0%, color-mix(in oklab, var(--sheet), var(--paper) 55%) 100%);
}
/* Four soft panes of light with darker frame lines between them, falling at an angle. */
.light {
  position: absolute;
  z-index: -1;
  left: var(--lx, -6%);
  top: var(--ly, -18%);
  width: var(--lw, 64%);
  height: var(--lh, 140%);
  display: grid;
  grid-template: 1fr 1fr / 1fr 1fr;
  gap: var(--lg, 3.2%);
  transform: rotate(var(--lr, -16deg)) skewX(var(--lk, -14deg));
  transform-origin: 30% 0;
  pointer-events: none;
  animation: light-drift var(--ld, 46s) ease-in-out infinite alternate;
}
.light i {
  border-radius: 6%;
  background: radial-gradient(closest-side, rgb(var(--light) / var(--light-strength)), rgb(var(--light) / calc(var(--light-strength) * .55)) 55%, rgb(var(--light) / 0));
}
/* The faint shadow a window frame casts, beside the light */
.light::after {
  content: "";
  position: absolute;
  inset: -6% -40% -6% 100%;
  background: linear-gradient(90deg, rgb(var(--shade) / 0), rgb(var(--shade) / var(--shade-strength)) 30%, rgb(var(--shade) / 0) 85%);
  border-radius: 50%;
}

/* ============================================================
   6. The companion: a matte persimmon dot that breathes (CSS only)
   ============================================================ */

.ember {
  --d: clamp(150px, 22vmin, 236px);
  position: relative;
  width: var(--d);
  height: var(--d);
}
.ember-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--ember-rim) 45%, transparent);
  opacity: 0;
  animation: ripple 6.25s cubic-bezier(.2, .6, .35, 1) infinite;
}
.ember-ring + .ember-ring { animation-delay: -3.125s; }
.ember-body {
  position: absolute;
  inset: 0;
  animation: breathe calc(var(--breath) / 2) var(--ease-breath) infinite alternate;
}
.ember-lobe {
  position: absolute;
  inset: 0;
  border-radius: 49% 51% 50% 50% / 51% 49% 51% 49%;
  background: color-mix(in oklab, var(--ember-core), var(--ember-rim) 68%);
  animation: turn 43s linear infinite;
}
.ember-lobe + .ember-lobe {
  border-radius: 51% 49% 49% 51% / 49% 51% 50% 50%;
  animation-duration: 61s;
  animation-direction: reverse;
}
.ember-tone {
  position: absolute;
  inset: 1%;
  border-radius: 50%;
  overflow: hidden;
  background: radial-gradient(circle at 46% 44%,
    color-mix(in oklab, var(--ember-core), var(--ember-rim) 24%) 0%,
    color-mix(in oklab, var(--ember-core), var(--ember-rim) 46%) 52%,
    color-mix(in oklab, var(--ember-core), var(--ember-rim) 68%) 100%);
}
.ember-tone::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--grain);
  background-size: 140px 140px;
  opacity: .5;
  mix-blend-mode: multiply;
}
.ember-friend {
  position: absolute;
  left: 86%;
  top: 63.5%;
  width: 33%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--asagi);
  box-shadow: 0 0 0 calc(var(--d) * .014 + 2px) var(--lit, var(--paper));
  animation: arrive var(--dur-soft) var(--spring-soft) 1.1s both;
}

/* Anything that moves rests while nobody can see it. */
.is-paused, .is-paused * { animation-play-state: paused !important; }

/* ============================================================
   7. Sections
   ============================================================ */

/* The frame: a large rounded window, inset from the edges of the screen */
.frame {
  margin: var(--inset);
  border-radius: var(--radius-frame);
  box-shadow: inset 0 0 0 1px var(--hairline);
}

.section { padding-block: var(--section); }

/* 7.1 Hero */
.hero {
  min-height: calc(100vh - 2 * var(--inset));
  min-height: calc(100svh - 2 * var(--inset));
  padding: clamp(112px, 15vh, 168px) var(--gutter) clamp(32px, 6vh, 64px);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  --lx: -12%; --ly: -30%; --lw: 70%; --lh: 150%;
}
.hero .lead { max-width: 32rem; margin-top: var(--space-6); }

/* The scene: a still life in the light, where the companion breathes */
.scene {
  --lit: var(--sheet);
  position: relative;
  width: min(820px, 100%);
  aspect-ratio: 16 / 10;
  margin-top: clamp(40px, 6vh, 64px);
  border-radius: var(--radius-tile);
  box-shadow: var(--shadow-lift), inset 0 0 0 1px var(--hairline);
  --lx: -8%; --ly: -40%; --lw: 62%; --lh: 170%; --lr: -18deg; --ld: 38s;
}
@media (max-width: 640px) { .scene { aspect-ratio: 4 / 5; } }
.scene .ember { position: absolute; left: 50%; top: 58%; translate: -60% -50%; }
@media (max-width: 640px) { .scene .ember { --d: clamp(118px, 34vw, 160px); top: 60%; } }
.nobr { white-space: nowrap; }
.scene .dot { --edge: 3px; }

/* "You can start with…": a quiet line at the top of the scene */
.say {
  position: absolute;
  left: 50%;
  top: clamp(14px, 3.5%, 24px);
  z-index: 2;
  width: min(560px, calc(100% - 28px));
  translate: -50% 0;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  min-height: 60px;
  padding: 10px 22px;
  border-radius: var(--radius-capsule);
  background: color-mix(in srgb, var(--sheet) 90%, transparent);
  box-shadow: 0 10px 30px -14px rgb(var(--shadow-rgb) / .28), inset 0 0 0 1px var(--hairline);
  text-align: left;
}
.say-label { flex: none; color: var(--ink-soft); font: 600 var(--text-label)/1.2 var(--sans); letter-spacing: .02em; }
.say-lines { position: relative; flex: 1; display: grid; min-width: 0; }
.say-line {
  grid-area: 1 / 1;
  font: 400 clamp(1.05rem, .95rem + .45vw, 1.3rem)/1.3 var(--serif);
  color: var(--ink);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .7s var(--ease-out), transform var(--dur-entrance) var(--spring);
}
:lang(ja) .say-line { font-family: var(--serif-ja); letter-spacing: .02em; }
.say-line.is-on { opacity: 1; transform: none; }
.say-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--ember-rim); animation: breathe calc(var(--breath) / 2) var(--ease-breath) infinite alternate; }
@media (max-width: 520px) { .say-label { display: none; } .say { padding-inline: 18px; } }

/* 7.2 The big sentence */
.why { text-align: center; }
.why .statement { max-width: 24ch; margin-inline: auto; }
:lang(ja) .why .statement { max-width: 22em; }
.why .lead { max-width: 34rem; margin: var(--space-8) auto 0; }

/* 7.3 Rows: a lit tile and a few words, alternating */
.rows { display: grid; gap: clamp(72px, 12vh, 136px); list-style: none; }
.row { display: grid; gap: var(--space-8); align-items: center; }
.row .tile { width: min(100%, 460px); }
.row .title { margin-bottom: var(--space-4); }
.row p { max-width: 30rem; }
@media (min-width: 860px) {
  .row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(48px, 7vw, 120px); }
  .row:nth-child(even) .tile { order: 2; justify-self: end; }
}
.tile {
  --lit: var(--sheet);
  aspect-ratio: 1;
  border-radius: var(--radius-tile);
  box-shadow: var(--shadow-card), inset 0 0 0 1px var(--hairline);
  display: grid;
  place-items: center;
  --lx: -14%; --ly: -34%; --lw: 72%; --lh: 160%; --ld: 52s;
}
.tile .art { --art: 62%; }

/* 7.4 The story: a second frame */
.story { padding: clamp(72px, 12vh, 136px) var(--gutter); --lx: 30%; --ly: -40%; --lw: 70%; --lh: 170%; --lr: -14deg; --ld: 58s; }
.story-head { max-width: 44rem; margin: 0 auto clamp(48px, 8vh, 88px); text-align: center; }
.story-head .heading { margin-top: var(--space-5); }
.story-items {
  display: grid;
  gap: clamp(48px, 7vh, 64px) clamp(32px, 4vw, 64px);
  max-width: var(--max);
  margin-inline: auto;
  list-style: none;
}
@media (min-width: 900px) { .story-items { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.story-item .art { --art: clamp(120px, 12vw, 168px); margin-bottom: var(--space-7); }
.story-item .label { margin-bottom: var(--space-3); }
.story-item .letter { max-width: 26rem; }

/* 7.5 A gentle note */
.note { padding-block: clamp(24px, 4vh, 48px); }
.note .wrap { max-width: calc(900px + 2 * var(--gutter)); }
.care { display: grid; gap: var(--space-6); padding: clamp(32px, 5vw, 64px); }
@media (min-width: 860px) { .care { grid-template-columns: auto 1fr; gap: clamp(32px, 4vw, 56px); align-items: start; } }
.care .art { --art: 108px; }
.care .label { margin-bottom: var(--space-4); }
.care h2 { font: 400 clamp(1.5rem, 1.25rem + 1vw, 2.1rem)/1.2 var(--serif); letter-spacing: -.012em; text-wrap: balance; }
:lang(ja) .care h2 { font-family: var(--serif-ja); letter-spacing: .02em; line-height: 1.5; font-size: clamp(1.35rem, 1.15rem + .8vw, 1.8rem); }
.care p { margin-top: var(--space-4); color: var(--ink-soft); line-height: 1.65; }
.care p.now { color: var(--ink); font-weight: 600; }
:lang(ja) .care p { line-height: 1.95; letter-spacing: .02em; }
.care .text-link { margin-top: var(--space-3); }

/* 7.6 Coming soon */
.close { text-align: center; }
.close .art { --art: clamp(112px, 12vw, 148px); margin: 0 auto var(--space-9); }
.close .heading { max-width: 16ch; margin-inline: auto; }
:lang(ja) .close .heading { max-width: 14em; }
.close .lead { max-width: 30rem; margin: var(--space-6) auto 0; }
.close-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-4); margin-top: var(--space-8); }

/* 7.7 Footer: quiet links, then the name, large */
.site-footer { padding: var(--space-10) 0 max(var(--space-7), env(safe-area-inset-bottom)); overflow: hidden; text-align: center; }
.footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 clamp(20px, 3vw, 40px);
  list-style: none;
}
.footer-links a {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  color: var(--ink);
  font: 400 clamp(1.2rem, 1rem + .7vw, 1.6rem)/1 var(--serif);
  text-decoration: none;
  transition: color .3s var(--ease-out);
}
.footer-links a:hover { color: var(--ember-rim); }
.footer-name {
  margin: clamp(32px, 6vh, 64px) 0 0;
  padding-bottom: .2em; /* room for the descender of the y */
  font: 400 clamp(6.5rem, 30vw, 30rem)/.78 var(--serif);
  letter-spacing: -.045em;
  color: var(--ink);
  -webkit-user-select: none;
  user-select: none;
}
.footer-name .dot-stop {
  display: inline-block;
  width: .14em;
  aspect-ratio: 1;
  margin-left: .02em;
  border-radius: 50%;
  background: var(--ember-rim);
}
.footer-base {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2) var(--space-6);
  margin-top: var(--space-4);
  color: var(--ink-soft);
  font-size: var(--text-small);
}

/* Simple footer for documents */
.doc-footer .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4) var(--space-7);
  position: relative;
  padding-top: var(--space-7);
  color: var(--ink-soft);
  font-size: var(--text-small);
}
.doc-footer .wrap::before { content: ""; position: absolute; top: 0; left: var(--gutter); right: var(--gutter); border-top: 1px solid var(--hairline); }
.doc-footer { padding: var(--space-9) 0 max(var(--space-9), env(safe-area-inset-bottom)); }
.doc-footer ul { display: flex; flex-wrap: wrap; gap: 0 var(--space-6); list-style: none; }
.doc-footer a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
.doc-footer a:hover { color: var(--ink); }

/* ============================================================
   8. Document pages (privacy, terms)
   ============================================================ */

.doc { padding: clamp(132px, 18vh, 180px) 0 var(--space-11); }
.doc .wrap { max-width: calc(760px + 2 * var(--gutter)); }
.doc-head { margin-bottom: var(--space-9); }
.doc-head .heading { margin-top: var(--space-5); }
.doc-meta { margin-top: var(--space-4); color: var(--ink-soft); font-size: var(--text-small); }
.doc-summary { margin-bottom: var(--space-9); padding: clamp(28px, 4vw, 44px); }
.doc-summary h2 { margin-bottom: var(--space-4); font: 400 1.75rem/1.2 var(--serif); }
.doc-summary ul { list-style: none; }
.doc-summary li { position: relative; padding: var(--space-2) 0 var(--space-2) 26px; line-height: 1.6; }
.doc-summary li::before { content: ""; position: absolute; left: 2px; top: 1.05em; width: 8px; height: 8px; border-radius: 50%; background: var(--tone, var(--ember-rim)); }
.toc { margin: 0 0 var(--space-8); list-style: none; columns: 2 220px; column-gap: var(--space-7); }
.toc li { break-inside: avoid; }
.toc a { display: inline-flex; align-items: center; min-height: 36px; color: var(--ink-soft); text-decoration: none; }
.toc a:hover { color: var(--ink); }
.prose { line-height: 1.7; }
.prose h2 { margin: var(--space-9) 0 var(--space-4); font: 400 clamp(1.6rem, 1.35rem + .9vw, 2.05rem)/1.2 var(--serif); letter-spacing: -.012em; scroll-margin-top: var(--space-6); }
.prose h3 { margin: var(--space-7) 0 var(--space-2); font: 600 var(--text-body)/1.4 var(--sans); }
.prose p, .prose ul, .prose ol, .prose table { margin: 0 0 var(--space-4); }
.prose ul, .prose ol { padding-left: 1.3rem; }
.prose li { margin: 6px 0; }
.prose li::marker { color: var(--ink-faint); }
.prose a { text-underline-offset: .22em; text-decoration-color: color-mix(in srgb, var(--ink) 35%, transparent); }
.prose a:hover { text-decoration-color: var(--ember-rim); }
.prose strong { font-weight: 600; }
.table-scroll { overflow-x: auto; margin: 0 0 var(--space-5); }
.prose table { width: 100%; border-collapse: collapse; font-size: var(--text-small); }
.prose th, .prose td { padding: var(--space-3) var(--space-3) var(--space-3) 0; border-bottom: 1px solid var(--hairline); text-align: left; vertical-align: top; }
.prose th { font-weight: 600; }

/* ============================================================
   9. Not found
   ============================================================ */

.lost {
  display: grid;
  place-items: center;
  min-height: calc(100vh - 2 * var(--inset));
  min-height: calc(100svh - 2 * var(--inset));
  padding: 120px var(--gutter) var(--space-10);
  text-align: center;
}
.lost .art { --art: 168px; margin: 0 auto var(--space-8); }
.lost .heading { margin-top: var(--space-5); }
.lost .lead { max-width: 28rem; margin: var(--space-5) auto 0; }
.lost-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 var(--space-7); margin-top: var(--space-6); }

/* ============================================================
   10. Motion
   ============================================================ */

@media (scripting: enabled) {
  [data-reveal] {
    opacity: 0;
    transform: translateY(var(--rise));
    transition:
      opacity var(--dur-entrance) var(--ease-out),
      transform var(--dur-entrance) var(--spring);
    transition-delay: calc(var(--i, 0) * var(--stagger));
    animation: show-anyway 0s 3s forwards;
  }
  .js-ready [data-reveal] { animation: none; }
  [data-reveal].is-in { opacity: 1; transform: none; }

  /* Dots in an illustration arrive one after another (scale only: drift keeps transform). */
  [data-reveal].art, [data-reveal].tile { transform: none; }
  [data-reveal] .art .dot, [data-reveal].art .dot {
    opacity: 0;
    scale: .6;
    transition: opacity .7s var(--ease-out), scale var(--dur-soft) var(--spring-soft);
    transition-delay: calc(var(--n, 0) * var(--stagger) + 160ms);
  }
  .is-in .art .dot, .art.is-in .dot { opacity: 1; scale: var(--js, 1); }

  [data-words] { opacity: 0; animation: show-anyway 0s 3s forwards; }
  .js-ready [data-words] { opacity: 1; animation: none; }
  .words .w { display: inline-block; opacity: 0; transform: translateY(.28em); filter: blur(6px); }
  .is-in .words .w {
    opacity: 1;
    transform: none;
    filter: blur(0);
    transition: opacity .7s var(--ease-out), transform var(--dur-entrance) var(--spring), filter .7s var(--ease-out);
    transition-delay: calc(var(--i) * 90ms + 250ms);
  }
}
.words .w { white-space: nowrap; }

@keyframes breathe { from { transform: scale(.972); } to { transform: scale(1.03); } }
@keyframes turn { to { transform: rotate(1turn); } }
@keyframes ripple {
  0% { transform: scale(1.04); opacity: 0; }
  8% { opacity: .5; }
  100% { transform: scale(1.66); opacity: 0; }
}
@keyframes arrive {
  from { opacity: 0; transform: translate(46%, 24%) scale(.55); }
  to { opacity: 1; transform: none; }
}
@keyframes drift {
  from { transform: translate(0, 0); }
  to { transform: translate(var(--dx, 4px), var(--dy, -6px)); }
}
@keyframes light-drift {
  from { transform: translate3d(-3%, 0, 0) rotate(var(--lr, -16deg)) skewX(var(--lk, -14deg)); }
  to { transform: translate3d(7%, 2%, 0) rotate(calc(var(--lr, -16deg) + 2deg)) skewX(var(--lk, -14deg)); }
}
@keyframes show-anyway { to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .ember, .ember *, .dot, .light, .say-dot { animation: none !important; }
  .ember-ring { display: none; }
  [data-reveal], [data-reveal] .art .dot, [data-reveal].art .dot, .words .w, .say-line {
    transform: none !important;
    filter: none !important;
    transition: opacity .4s linear !important;
    transition-delay: 0s !important;
  }
  .capsule, .text-link .arrow { transition: none; }
}

@media print {
  html { background: #fff; }
  .lang, .light, .ember-ring { display: none !important; }
  [data-reveal], .words .w, [data-words], .art .dot { opacity: 1 !important; transform: none !important; filter: none !important; scale: none !important; }
}