/* sparkbiscuit.me: one stylesheet for the home page, Filuma, and Meds Ahead.
   Native type, soft tonal surfaces without outlines, and scroll motion that only moves and fades. */

:root {
  color-scheme: light;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --paper: #f6f2eb;
  --paper-deep: #ece5da;
  --ink: #1f1b1f;
  --muted: #6c6367;
  --accent: #b6531f;
  --night: #131419;
  --night-ink: #f4eee6;
  --night-muted: #a39a96;
  --ember: #f39a58;
  --ember-soft: #ffc38f;
  --thread-core: #ffe6c4;
  --gutter: clamp(20px, 5vw, 72px);
  --radius-tile: clamp(24px, 2.6vw, 36px);
  --radius-stage: clamp(28px, 3.4vw, 48px);
  --radius-screen: 13.5% / 6.2%;
  --text-section: clamp(2.5rem, 4.4vw, 4.25rem);
  --text-lead: clamp(1.125rem, 1.5vw, 1.3125rem);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --spring: cubic-bezier(.34, 1.45, .64, 1);
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { background: var(--night); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }
body { min-height: 100vh; overflow-x: clip; background: var(--paper); color: var(--ink); font: 400 17px/1.55 var(--font); letter-spacing: -.012em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; -webkit-tap-highlight-color: transparent; }
button, input { font: inherit; color: inherit; }
button { border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 680; font-optical-sizing: auto; letter-spacing: -.045em; line-height: 1.04; text-wrap: balance; }
p { text-wrap: pretty; }
strong { font-weight: 600; }
sup { line-height: 0; }
sup a { padding: 0 2px; color: inherit; font-size: .68em; text-decoration: none; }
:focus-visible { outline: 3px solid #d9722f; outline-offset: 4px; border-radius: 10px; }
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: fixed; z-index: 50; top: 12px; left: 12px; padding: 12px 20px; border-radius: 999px; background: var(--paper); color: var(--ink); translate: 0 -200%; }
.skip:focus { translate: none; }
.shell { width: min(1180px, 100% - 2 * var(--gutter)); margin-inline: auto; }

/* Controls */
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 13px 26px; border-radius: 999px; background: var(--ink); color: var(--paper); font-size: 1.0625rem; font-weight: 600; letter-spacing: -.015em; text-decoration: none; transition: scale .3s var(--ease-out), background-color .25s ease; }
.button:hover { background: color-mix(in srgb, var(--ink) 84%, var(--ember)); }
.button:active { scale: .97; }
.link { display: inline-flex; align-items: center; gap: .4em; min-height: 44px; color: var(--accent); font-weight: 600; text-decoration: none; }
.link::after { content: ""; width: .42em; height: .42em; border: solid currentColor; border-width: 2px 2px 0 0; rotate: 45deg; transition: translate .3s var(--ease-out); }
.link:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.link:hover::after { translate: 3px 0; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; margin-top: 32px; }
.round-button { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 50%; background: rgb(255 255 255 / .1); color: inherit; transition: background-color .2s ease, scale .25s var(--ease-out), opacity .2s ease; }
.round-button:hover:not(:disabled) { background: rgb(255 255 255 / .17); }
.round-button:active:not(:disabled) { scale: .92; }
.round-button:disabled { opacity: .3; cursor: default; }
.round-button svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* Motion hooks, driven by motion.js */
[data-parallax] { translate: 0 var(--parallax, 0px); }
[data-reveal] { transition: opacity 1s var(--ease-out), translate 1s var(--ease-out); }
.motion-ready [data-reveal]:not(.is-visible) { opacity: 0; translate: 0 36px; }
.word { opacity: clamp(.16, calc((var(--progress, 1) * (var(--count) + 5) - var(--i)) / 5), 1); }

/* Filuma: the opening. The heading, lockup, and spacing are the established ones. */
/* The landscape lifts away as a rounded sheet; clip (not hidden) keeps the sticky scene working. */
.hero-journey { position: relative; isolation: isolate; overflow: clip; border-radius: 0 0 var(--radius-stage) var(--radius-stage); background: #11151f; }
.landscape-sticky { position: sticky; top: 0; height: 100vh; height: 100lvh; min-height: 620px; overflow: clip; }
landscape-scene { position: absolute; inset: 0; display: block; overflow: clip; contain: strict; background: #11151f; }
.landscape-fallback, .scene-stars, .scene-land { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 100%; }
.scene-sky { position: absolute; inset: 0; }
.scene-sky-dusk { background: linear-gradient(#11151f 0%, #1c1f2b 26%, #332d36 44%, #6b4a44 56%, #b3714c 64%, #e59e68 71%, #f2b57f 76%); }
/* Dawn peaks halfway through the sunrise, so the sky warms instead of passing through gray. */
.scene-sky-dawn { background: linear-gradient(#3b4460 0%, #6e6477 30%, #c48a7e 52%, #eeaa7b 66%, #f7c48f 76%); opacity: calc(var(--day, 0) * (1 - var(--day, 0)) * 3.2); will-change: opacity; }
.scene-sky-day { background: linear-gradient(#b3c6d4 0%, #d3dadb 24%, #efe4d3 46%, #f8dcb7 62%, #fbe2bf 74%); opacity: var(--day, 0); will-change: opacity; }
.scene-starfield { position: absolute; inset: 0; opacity: calc(1 - var(--day, 0) * 1.6); }
.scene-stars-2 { animation: twinkle 5s ease-in-out infinite alternate; }
@keyframes twinkle { to { opacity: .3; } }
.scene-sun, .scene-sun-glow { position: absolute; left: var(--sun-x, 74%); top: var(--sun-y, 60%); aspect-ratio: 1; border-radius: 50%; translate: -50% calc(-50% - var(--rise, 0) * var(--sun-travel, 0px)); will-change: translate; }
.scene-sun-glow { width: calc(var(--sun-size, 60px) * 10); background: radial-gradient(closest-side, rgb(255 208 150 / .6), rgb(255 172 110 / .2) 38%, rgb(255 172 110 / 0)); opacity: calc(.78 + var(--day, 0) * .22); }
.scene-sun { width: var(--sun-size, 60px); background: radial-gradient(circle, #fffdf6 0 56%, #ffe7ba 68%, rgb(255 214 160 / 0) 71%); box-shadow: 0 0 calc(var(--sun-size, 60px) * .7) calc(var(--sun-size, 60px) * .1) rgb(255 214 160 / .5); }
.scene-land { translate: 0 calc(var(--rise, 0) * var(--land-sink, 0px)); will-change: translate; }
.scene-land-day { opacity: var(--day, 0); will-change: opacity, translate; }

.hero-opening { position: absolute; z-index: 5; inset: 0 0 auto; height: 100vh; height: 100svh; min-height: 620px; color: #f9f3e9; text-align: center; pointer-events: none; }
.hero-heading { position: absolute; top: clamp(52px, 9svh, 120px); left: 24px; right: 24px; opacity: var(--opening, 1); translate: 0 var(--opening-lift, 0px); }
.hero-brand { display: flex; justify-content: center; align-items: center; gap: 10px; margin-bottom: 22px; font-size: 1.35rem; font-weight: 650; letter-spacing: -.035em; }
.brand-symbol { width: 32px; height: 26px; overflow: visible; fill: none; stroke: var(--ember); stroke-width: 2; stroke-linecap: round; }
.hero-heading h1 { max-width: 13ch; margin-inline: auto; font-size: clamp(3.4rem, 6.6vw, 6.5rem); letter-spacing: -.052em; line-height: 1.015; }
.hero-heading > p:last-child { margin-top: 24px; color: #e1d1c7; font-size: clamp(1rem, 1.5vw, 1.25rem); }

.hero-thread { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; opacity: var(--opening, 1); }
.hero-thread path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.thread-halo { opacity: .09; }
.thread-halo path { stroke: var(--ember); stroke-width: calc(11px * var(--thread-scale, 1)); }
.thread-glow { opacity: .3; transition: opacity .4s ease; }
.thread-glow path { stroke: var(--ember); stroke-width: calc(4.5px * var(--thread-scale, 1)); }
.thread-core path { stroke: var(--thread-core); stroke-width: calc(1.7px * var(--thread-scale, 1)); }
.thread-leader { fill: #fff7ec; }
.thread-leader-glow, .knot-glow { fill: url(#thread-light); }
.knot-dot { fill: #fff2df; }
.knot-ring { fill: none; stroke: var(--ember-soft); stroke-width: 1; }
/* The spark is brighter and wider than the thread it travels, so it reads as light moving toward the arrow. */
.thread-spark { stroke-dasharray: 8 100; stroke-dashoffset: 8; opacity: 0; }
.spark-halo { stroke: var(--ember-soft); stroke-opacity: .22; stroke-width: calc(18px * var(--thread-scale, 1)); }
.spark-glow { stroke: #ffc88f; stroke-opacity: .65; stroke-width: calc(7px * var(--thread-scale, 1)); }
.spark-core { stroke: #fff; stroke-width: calc(3px * var(--thread-scale, 1)); }
.hero-thread.is-drawn .thread-spark { animation: thread-spark 4.6s cubic-bezier(.45, 0, .2, 1) 1.2s infinite; }
@keyframes thread-spark {
  0% { stroke-dashoffset: 8; opacity: 0; }
  6% { opacity: 1; }
  44% { stroke-dashoffset: -92; opacity: 1; }
  52%, 100% { stroke-dashoffset: -100; opacity: 0; }
}
.thread-cue { position: absolute; left: 50%; top: 90%; width: 64px; height: 84px; translate: -50% -74%; border-radius: 32px; pointer-events: auto; opacity: var(--opening, 1); }
.thread-cue:focus-visible { outline: 2px solid var(--ember-soft); outline-offset: 2px; }
.hero-opening:has(.thread-cue:hover) .thread-glow { opacity: .5; }

.hero-story { position: relative; z-index: 6; min-height: 100vh; min-height: 100svh; padding: clamp(96px, 14svh, 160px) 0 34svh; color: #26222a; }
html:not(.motion-ready) .hero-story, .hero-journey:has(landscape-scene:not(.is-ready)) .hero-story { background: var(--paper); }
.hero-story-content { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: start; gap: 8%; }
/* Heading and copy fade in on their own positions, so neither is read against the dark terrain it rises past. */
.hero-story-content > [data-scrub] { opacity: var(--progress, 1); translate: 0 calc((1 - var(--progress, 1)) * 36px); }
.hero-story h2 { max-width: 12ch; font-size: var(--text-section); }
.hero-story-copy p { max-width: 32rem; font-size: var(--text-lead); font-weight: 500; line-height: 1.5; }
.hero-story-copy .actions { margin-top: 28px; }
.hero-story .button { background: #26222a; color: #fbf7f1; }

/* Chapters */
.chapter { padding-block: clamp(104px, 13vw, 184px); }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(40px, 7vw, 112px); }
.copy h2, .chapter-head h2 { max-width: 15ch; font-size: var(--text-section); }
.copy p, .chapter-head p { max-width: 31rem; margin-top: 28px; color: var(--muted); font-size: var(--text-lead); line-height: 1.5; }
.copy p strong, .chapter-head p strong { color: var(--ink); }
.tile { border-radius: var(--radius-tile); background: var(--paper-deep); }
.device-tile { display: grid; place-items: center; margin: 0; padding: clamp(40px, 6vw, 88px) clamp(24px, 4vw, 56px); overflow: clip; }
.screen { width: min(100%, 300px); border-radius: var(--radius-screen); box-shadow: 0 2px 6px rgb(30 20 15 / .08), 0 34px 70px -28px rgb(30 20 15 / .45); }

/* Planning: an example week that rearranges itself */
.chapter-plan { padding-top: clamp(24px, 4vw, 64px); }
.chapter-head { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: end; gap: 8%; }
.chapter-head p { margin-top: 0; }
.plan-demo { position: relative; margin-top: clamp(48px, 7vw, 96px); padding: clamp(24px, 4vw, 56px); border-radius: var(--radius-tile); background: radial-gradient(110% 80% at 88% 0%, rgb(243 154 88 / .13), transparent 62%), var(--night); color: var(--night-ink); }
.plan-demo[hidden] { display: none; }
.plan-demo :focus-visible { outline-color: var(--ember-soft); }
.plan-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 40px; }
.plan-hours { display: grid; flex: 1 1 260px; max-width: 440px; gap: 4px; }
.plan-hours output { font: 650 clamp(1.625rem, 2.6vw, 2.25rem)/1.1 var(--font-display); letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.range { width: 100%; height: 44px; margin: 0; background: none; cursor: pointer; -webkit-appearance: none; appearance: none; --range-fill: 33%; }
.range::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--ember) var(--range-fill), rgb(255 255 255 / .16) var(--range-fill)); }
.range::-webkit-slider-thumb { -webkit-appearance: none; width: 28px; height: 28px; margin-top: -11px; border-radius: 50%; background: #fff; box-shadow: 0 2px 10px rgb(0 0 0 / .4); transition: scale .2s ease; }
.range:active::-webkit-slider-thumb { scale: 1.1; }
.range::-moz-range-track { height: 6px; border-radius: 3px; background: rgb(255 255 255 / .16); }
.range::-moz-range-progress { height: 6px; border-radius: 3px; background: var(--ember); }
.range::-moz-range-thumb { width: 28px; height: 28px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 2px 10px rgb(0 0 0 / .4); }
.switch { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; font-weight: 600; cursor: pointer; }
.switch input { position: relative; flex: none; width: 51px; height: 31px; margin: 0; border-radius: 999px; background: rgb(255 255 255 / .18); cursor: pointer; -webkit-appearance: none; appearance: none; transition: background-color .25s ease; }
.switch input::after { content: ""; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgb(0 0 0 / .3); transition: translate .35s var(--ease-out); }
.switch input:checked { background: var(--ember); }
.switch input:checked::after { translate: 20px 0; }
.plan-week { position: relative; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: clamp(4px, .8vw, 10px); margin-top: clamp(24px, 3.4vw, 40px); }
.plan-thread { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.plan-thread path { fill: none; stroke: var(--ember); stroke-linecap: round; stroke-linejoin: round; }
.plan-thread-glow { stroke-width: 7; stroke-opacity: .14; }
.plan-thread-core { stroke-width: 1.6; stroke-opacity: .85; }
.plan-thread.is-weaving path { transition: stroke-dashoffset .8s var(--ease-out); }
.day { position: relative; display: grid; grid-template-rows: auto 1fr auto; justify-items: center; min-height: clamp(172px, 19vw, 216px); padding: 14px 0 12px; border-radius: clamp(12px, 1.5vw, 18px); background: rgb(255 255 255 / .045); transition: background-color .3s ease, scale .35s var(--ease-out); }
.day:hover { background: rgb(255 255 255 / .08); }
.day:active, .day.is-pressing { scale: .94; }
.day[aria-pressed="true"] { background: repeating-linear-gradient(135deg, rgb(255 255 255 / .075) 0 2px, transparent 2px 9px), rgb(255 255 255 / .02); }
.day[data-safe="true"] { background: linear-gradient(rgb(243 154 88 / .2), rgb(243 154 88 / .06)); }
.day-name { color: var(--night-muted); font-size: .8125rem; font-weight: 600; }
.day-track { position: relative; width: 100%; }
.day-track i { position: absolute; z-index: 2; left: 50%; top: var(--y, 40%); width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--thread-core); box-shadow: 0 0 0 3px rgb(243 154 88 / .3), 0 0 18px 3px rgb(243 154 88 / .5); opacity: 0; scale: .2; transition: scale .55s var(--spring), opacity .25s ease; }
.day-track i + i { top: calc(var(--y, 40%) + 26px); }
.day[data-load="1"] .day-track i:first-child, .day[data-load="2"] .day-track i { opacity: 1; scale: 1; }
.day-note { min-height: 1.3em; color: var(--night-muted); font-size: .75rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.day[data-load="1"] .day-note, .day[data-load="2"] .day-note { color: var(--night-ink); }
.day[data-safe="true"] .day-note { color: var(--ember-soft); }
.plan-due { position: absolute; z-index: 2; width: 14px; height: 14px; translate: -50% -50%; border: 2px solid var(--night-muted); border-radius: 50%; background: var(--night); pointer-events: none; }
.plan-due::after { content: "Due"; position: absolute; top: 16px; left: 50%; translate: -50% 0; color: var(--night-muted); font-size: .625rem; font-weight: 600; }
.plan-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 48px; margin-top: 22px; }
.plan-status { font-size: clamp(1rem, 1.3vw, 1.125rem); font-weight: 600; letter-spacing: -.02em; }
.plan-status[data-short="true"] { color: #ffab85; }
.plan-reset { opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility 0s linear .25s, rotate .6s var(--ease-out), background-color .2s ease; }
.plan-reset.is-shown { opacity: 1; visibility: visible; transition-delay: 0s; }
.plan-reset:active { rotate: -140deg; }
.plan-screens { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 20px); margin-top: clamp(12px, 1.6vw, 20px); }

/* Focus and Weave, on a dark stage */
.chapter-night { padding-inline: clamp(8px, 1.2vw, 20px); }
.night { overflow: clip; padding-block: clamp(104px, 12vw, 176px); border-radius: var(--radius-stage); background: radial-gradient(70% 45% at 75% 18%, rgb(243 154 88 / .09), transparent 70%), radial-gradient(60% 40% at 20% 78%, rgb(111 136 242 / .07), transparent 70%), var(--night); color: var(--night-ink); }
.night .copy p { color: var(--night-muted); }
.night .copy p strong { color: var(--night-ink); }
.night .split + .split { margin-top: clamp(120px, 16vw, 240px); }
.night .screen { box-shadow: 0 40px 90px -30px rgb(0 0 0 / .8); }
.focus-stage, .weave-stage { position: relative; margin: 0; padding-block: clamp(32px, 5vw, 64px); }
.device { position: relative; width: min(100%, 300px); margin-inline: auto; }
.device .screen { position: relative; z-index: 1; width: 100%; }
/* Ring and threads scale uniformly with stroke widths in drawing units, so their pathLength dashes stay exact. */
.focus-ring { position: absolute; z-index: 0; left: 50%; top: 41%; width: 156%; max-width: none; aspect-ratio: 1; translate: -50% -50%; overflow: visible; pointer-events: none; }
.focus-ring path { fill: none; stroke-linecap: round; }
.ring-track { stroke: rgb(243 154 88 / .14); stroke-width: .32; }
.ring-light { stroke-dasharray: 1 2; stroke-dashoffset: calc(1 - var(--progress, 1)); }
.ring-halo { stroke: var(--ember); stroke-width: 2.6; stroke-opacity: .08; }
.ring-glow { stroke: var(--ember); stroke-width: 1.05; stroke-opacity: .32; }
.ring-core { stroke: var(--thread-core); stroke-width: .42; }
.ring-dot { transform: rotate(calc(var(--progress, 1) * 1turn)); transform-box: view-box; transform-origin: 50% 50%; opacity: min(1, calc(var(--progress, 1) * 20)); }
.weave-field { position: absolute; z-index: 0; left: 50%; top: 46%; width: 250%; max-width: none; height: auto; aspect-ratio: 12 / 5; translate: -50% -50%; overflow: visible; pointer-events: none; }
.weave-field path { fill: none; stroke-linecap: round; stroke-dasharray: 1 2; stroke-dashoffset: clamp(0, calc(1 - (var(--progress, 1) * 1.35 - var(--delay, 0))), 1); }
.weave-field .glow { stroke-width: 1.5; stroke-opacity: .14; }
.weave-field .core { stroke-width: .38; stroke-opacity: .78; }
.weave-field .faint .core { stroke-width: .28; stroke-opacity: .4; }
.weave-blue path { stroke: #6f88f2; }
.weave-amber path { stroke: #e8ae3e; }
.weave-green path { stroke: #4fb785; }

/* A closer look */
.chapter-gallery { overflow: clip; padding-bottom: clamp(64px, 8vw, 112px); }
.gallery-head { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: clamp(28px, 4vw, 48px); }
.gallery-head h2 { font-size: var(--text-section); }
.appearance { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--paper-deep); }
.appearance[hidden] { display: none; }
.appearance button { display: grid; place-items: center; width: 46px; height: 38px; border-radius: 999px; color: var(--muted); transition: background-color .25s ease, color .25s ease; }
.appearance button[aria-pressed="true"] { background: var(--paper); color: var(--ink); box-shadow: 0 1px 4px rgb(30 20 15 / .12); }
.appearance svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.appearance [data-appearance="dark"] svg { fill: currentColor; stroke: none; }
.gallery-rail { --inset: max(var(--gutter), (100% - 1180px) / 2); display: flex; gap: clamp(14px, 1.6vw, 22px); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--inset); padding: 12px var(--inset) 28px; scrollbar-width: none; }
.gallery-rail::-webkit-scrollbar { display: none; }
.gallery-item { flex: 0 0 clamp(220px, 23vw, 272px); margin: 0; scroll-snap-align: start; }
.gallery-item a { display: block; padding: clamp(22px, 2.4vw, 30px) clamp(18px, 2vw, 26px); border-radius: var(--radius-tile); background: var(--paper-deep); cursor: zoom-in; transition: translate .5s var(--ease-out), background-color .3s ease; }
.gallery-item a:hover { translate: 0 -6px; background: color-mix(in srgb, var(--paper-deep) 70%, #fff); }
.gallery-item img { width: 100%; border-radius: var(--radius-screen); box-shadow: 0 24px 40px -24px rgb(30 20 15 / .45); }
.gallery-item figcaption { margin-top: 14px; padding-inline: 6px; font-weight: 600; }
.gallery-controls { display: flex; justify-content: flex-end; gap: 10px; }
.gallery-controls[hidden] { display: none; }
.gallery-controls .round-button { background: var(--paper-deep); color: var(--ink); }
.gallery-controls .round-button:hover:not(:disabled) { background: color-mix(in srgb, var(--paper-deep) 88%, var(--ink)); }

.viewer { width: min(560px, 100vw - 24px); max-width: none; max-height: calc(100dvh - 24px); margin: auto; padding: 60px 24px 20px; border: 0; border-radius: 32px; background: var(--night); color: var(--night-ink); overflow: auto; }
.viewer::backdrop { background: rgb(8 8 10 / .78); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.viewer[open] { animation: viewer-in .5s var(--ease-out); }
@keyframes viewer-in { from { opacity: 0; scale: .96; translate: 0 12px; } }
.viewer figure { margin: 0; }
.viewer img { width: auto; max-width: 100%; max-height: calc(100dvh - 230px); margin-inline: auto; border-radius: var(--radius-screen); }
.viewer img[hidden] { display: none; }
.viewer figcaption { margin-top: 16px; font-weight: 600; text-align: center; }
.viewer-close { position: absolute; top: 12px; right: 12px; }
.viewer-error { margin: 12px 0; color: var(--night-muted); text-align: center; }
.viewer-error[hidden] { display: none; }
.viewer-error a { color: var(--ember-soft); }
.viewer-nav { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 14px; color: var(--night-muted); font-size: .875rem; font-variant-numeric: tabular-nums; }
.viewer :focus-visible { outline-color: var(--ember-soft); }

/* Close, notes, footer */
.chapter-close { padding-bottom: clamp(72px, 8vw, 112px); text-align: center; }
.chapter-close h2 { font-size: var(--text-section); }
.chapter-close p { max-width: 34rem; margin: 22px auto 0; color: var(--muted); font-size: var(--text-lead); }
.chapter-close .actions { justify-content: center; }
.footnotes { padding-bottom: clamp(56px, 6vw, 88px); color: var(--muted); font-size: .8125rem; line-height: 1.5; }
.footnotes ol { max-width: 60rem; padding-left: 1.2em; }
.footnotes li + li { margin-top: 8px; }
.footnotes a { color: inherit; text-decoration: none; }
.footer { padding-block: 36px calc(40px + env(safe-area-inset-bottom)); background: var(--night); color: var(--night-muted); font-size: .875rem; }
.footer-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 32px; }
.footer nav { display: flex; flex-wrap: wrap; gap: 0 24px; }
.footer a { display: inline-flex; align-items: center; min-height: 44px; color: var(--night-ink); text-decoration: none; }
.footer a:hover { color: var(--ember-soft); }
.footer :focus-visible { outline-color: var(--ember-soft); }

/* On wide layouts the Weave threads fade before they reach the copy beside them. */
@media (min-width: 735px) {
  .weave-field { -webkit-mask-image: linear-gradient(90deg, transparent 8%, #000 22%, #000 57%, transparent 73%); mask-image: linear-gradient(90deg, transparent 8%, #000 22%, #000 57%, transparent 73%); }
}

/* Meds Ahead: cool daylight, the app's own supply rings, and a privacy stage. */
.meds-page { --paper: #f3f7f8; --paper-deep: #e3ecef; --ink: #142126; --muted: #5a6a70; --accent: #2a6583; }
html:has(> body.meds-page) { background: #f3f7f8; }
.meds-page .button:hover { background: color-mix(in srgb, var(--ink) 80%, #3f7d9c); }
.meds-page :focus-visible { outline-color: #2f7da0; }
.meds-hero { overflow: clip; padding-block: clamp(40px, 6vw, 88px) clamp(56px, 8vw, 112px); background: radial-gradient(55% 65% at 80% 45%, #d9e9ef, transparent 72%); }
.meds-hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: center; gap: clamp(32px, 6vw, 96px); min-height: min(820px, 86svh); }
.app-lockup { display: flex; align-items: center; gap: 12px; margin-bottom: 30px; font-size: 1.25rem; font-weight: 650; letter-spacing: -.03em; }
.app-icon { display: grid; flex: none; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: linear-gradient(#3f7d9c, #285a75); }
.app-icon svg { width: 22px; height: 22px; fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.meds-hero h1 { font-size: clamp(3.25rem, 6.4vw, 6rem); letter-spacing: -.05em; line-height: 1.02; }
.meds-hero .lead { max-width: 29rem; margin-top: 26px; color: var(--muted); font-size: var(--text-lead); line-height: 1.5; }
.meds-hero-art { position: relative; display: grid; place-items: center; min-height: clamp(520px, 58vw, 720px); }
.meds-hero-art .screen { position: relative; z-index: 2; width: clamp(230px, 21vw, 290px); rotate: calc(-6deg + var(--progress, 0) * 10deg); translate: 0 calc(var(--progress, 0) * -60px); box-shadow: 0 2px 6px rgb(20 50 65 / .08), 0 40px 80px -30px rgb(20 50 65 / .45); }
.supply-rings { position: absolute; z-index: 1; width: min(118%, 660px); max-width: none; aspect-ratio: 1; rotate: calc(-18deg + var(--progress, 0) * 60deg); overflow: visible; }
/* The hero's turning rings and phone get their own layers, so the spin is composited instead of repainted. */
.meds-hero-art .supply-rings, .meds-hero-art .screen { will-change: transform, rotate, translate; }
.supply-rings circle { fill: none; stroke-width: 6; stroke-linecap: round; }
.rings-track { stroke: #d5e4ea; }
.rings-track-warm { stroke: #f5e2d2; }
.rings-arc { transform: rotate(-90deg); transform-origin: 100px 100px; }
.rings-arc-cool { stroke: #2f6887; stroke-dasharray: 72 100; }
.rings-arc-warm { stroke: #ec8633; stroke-dasharray: 20 100; }
.meds-statement { padding-block: clamp(40px, 6vw, 96px) clamp(24px, 4vw, 56px); }
/* The privacy stage leads with its headline at every width. */
@media (max-width: 734px) { .meds-privacy .split > .copy { order: 0; } }
.statement h2, .statement p { max-width: 26ch; font-family: var(--font-display); font-size: clamp(2rem, 3.8vw, 3.6rem); font-weight: 650; letter-spacing: -.035em; line-height: 1.12; text-wrap: pretty; }
.statement p { margin-top: .45em; }
.chapter-supply { padding-top: clamp(80px, 10vw, 140px); }
.chapter-follow { padding-top: 0; }
.chapter-stage { padding-inline: clamp(8px, 1.2vw, 20px); }
.stage { overflow: clip; padding-block: clamp(96px, 11vw, 168px); border-radius: var(--radius-stage); }
.meds-privacy { background: radial-gradient(60% 70% at 85% 15%, rgb(111 190 214 / .18), transparent 70%), #0f2e3a; color: #eef6f8; }
.meds-privacy h2 { max-width: 12ch; font-size: var(--text-section); }
.meds-privacy .copy p { margin-top: 0; color: #a7bfc6; }
.meds-privacy .link { margin-top: 20px; color: #8fd3e6; }
.meds-privacy :focus-visible { outline-color: #8fd3e6; }
.footnotes p { max-width: 60rem; margin-top: 12px; }
/* The facts under the hero button, read as a list; the dots are decoration only. */
.meds-facts { display: flex; flex-wrap: wrap; margin-top: 20px; padding: 0; list-style: none; color: var(--muted); font-size: .9375rem; font-weight: 600; letter-spacing: -.01em; }
.meds-facts li + li::before { content: "·"; content: "·" / ""; margin-inline: .5em; }
/* Also in Meds Ahead: soft tiles, each feature named inline. */
.meds-more { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 20px); margin-top: clamp(40px, 6vw, 72px); padding: 0; list-style: none; }
.meds-more li { padding: clamp(24px, 2.8vw, 36px); border-radius: var(--radius-tile); background: var(--paper-deep); }
.meds-more p { color: var(--muted); font-size: 1.0625rem; line-height: 1.5; }
.meds-more strong { color: var(--ink); }
.meds-story h2 { font-size: var(--text-section); }
.meds-story p { max-width: 36ch; margin-top: 28px; font-family: var(--font-display); font-size: clamp(1.5rem, 2.6vw, 2.25rem); font-weight: 600; letter-spacing: -.03em; line-height: 1.3; }
.meds-faq h2 { max-width: 15ch; font-size: var(--text-section); }
.faq-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(36px, 4.4vw, 56px) clamp(40px, 7vw, 112px); margin-top: clamp(40px, 6vw, 72px); }
.faq-list h3 { font-size: clamp(1.25rem, 1.7vw, 1.5rem); letter-spacing: -.025em; line-height: 1.25; }
.faq-list p { max-width: 34rem; margin-top: 10px; color: var(--muted); font-size: 1.0625rem; line-height: 1.55; }
@media (max-width: 1068px) { .meds-more { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 734px) { .meds-more, .faq-list { grid-template-columns: minmax(0, 1fr); } }

/* Home: two doorways, one for each app. */
html:has(> body.home-page) { background: #f6f2eb; }
.home-intro { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); align-items: end; column-gap: 64px; padding-block: clamp(48px, 8vw, 120px) clamp(48px, 6vw, 80px); }
.site-lockup { grid-column: 1 / -1; display: flex; align-items: center; gap: 9px; margin-bottom: clamp(40px, 6vw, 72px); font-size: 1.0625rem; font-weight: 650; letter-spacing: -.02em; }
.site-lockup svg { width: 18px; height: 18px; color: var(--accent); }
.home-intro h1 { font-size: clamp(3.2rem, 6vw, 6rem); letter-spacing: -.05em; line-height: 1.02; }
.home-intro > p:last-child { max-width: 26rem; margin-bottom: 8px; color: var(--muted); font-size: var(--text-lead); line-height: 1.5; }
.home-apps { display: grid; gap: clamp(16px, 2vw, 24px); padding-bottom: clamp(96px, 12vw, 160px); }
.home-card { position: relative; overflow: clip; isolation: isolate; border-radius: var(--radius-stage); }
.home-card-copy { position: relative; z-index: 2; max-width: 34rem; padding: clamp(32px, 5vw, 72px); }
.home-card-copy h2 { font-size: clamp(2.5rem, 4.2vw, 4rem); }
.home-card-copy > p:not(.app-lockup) { max-width: 26rem; margin-top: 20px; font-size: 1.125rem; line-height: 1.5; }
.filuma-card { min-height: clamp(640px, 64vw, 800px); background: #11151f; color: #f9f3e9; }
.filuma-card landscape-scene { z-index: -1; }
.filuma-card .home-card-copy > p:not(.app-lockup) { color: #e1d1c7; }
.filuma-card :focus-visible { outline-color: var(--ember-soft); }
.filuma-icon { background: linear-gradient(#2a2c36, #15161c); }
.filuma-icon svg { width: 24px; height: 20px; stroke: var(--ember); stroke-width: 2.4; }
.button-light { background: #f9f3e9; color: #1d1a1f; }
.button-light:hover { background: #fff; }
.home-card-screen { position: absolute; z-index: 1; top: 11%; right: 9%; width: clamp(220px, 21vw, 290px); rotate: 5deg; box-shadow: 0 30px 70px -20px rgb(0 0 0 / .6); }
.meds-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; min-height: clamp(560px, 54vw, 720px); background: radial-gradient(60% 70% at 75% 50%, #d2e5ec, transparent 72%), #e8f0f2; color: #142126; }
.meds-card .home-card-copy > p:not(.app-lockup) { color: #5a6a70; }
.meds-card .button { background: #142126; color: #f3f7f8; }
.meds-card :focus-visible { outline-color: #2f7da0; }
.meds-card-art { position: relative; display: grid; place-items: center; align-self: stretch; padding-block: 48px; }
.meds-card-art .screen { position: relative; z-index: 2; width: clamp(220px, 19vw, 264px); rotate: -5deg; box-shadow: 0 2px 6px rgb(20 50 65 / .08), 0 34px 70px -28px rgb(20 50 65 / .45); }
.meds-card .supply-rings { width: min(120%, 560px); }
.home-maker { padding-bottom: clamp(96px, 12vw, 160px); }
.home-maker h2 { max-width: 20ch; font-size: clamp(2.2rem, 4vw, 3.75rem); }
.home-maker p { max-width: 36rem; margin-top: 24px; color: var(--muted); font-size: var(--text-lead); line-height: 1.5; }
.home-maker .link { margin-top: 16px; }

@media (max-width: 1068px) {
  .split, .chapter-head, .hero-story-content { gap: 48px; }
}

@media (max-width: 734px) {
  .meds-hero-grid, .meds-card { grid-template-columns: minmax(0, 1fr); }
  .meds-hero-grid { min-height: 0; gap: 8px; }
  .meds-hero-art { min-height: 500px; }
  .supply-rings { width: 128%; }
  .statement h2, .statement p { font-size: clamp(1.75rem, 7.4vw, 2.25rem); }
  .home-intro { grid-template-columns: minmax(0, 1fr); row-gap: 20px; }
  .site-lockup { margin-bottom: 24px; }
  .filuma-card { min-height: 900px; }
  .home-card-screen { top: auto; right: 50%; bottom: -64px; width: 220px; translate: 50% var(--parallax, 0px); rotate: 4deg; }
  .meds-card-art { min-height: 500px; padding-block: 0 40px; }
}

@media (max-width: 734px) {
  body { font-size: 16px; }
  .split, .chapter-head, .hero-story-content { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .split > .copy { order: -1; }
  .device-tile { padding: 40px 24px; }
  .plan-demo { margin-inline: -6px; padding: 22px 14px 18px; }
  .plan-controls { gap: 8px 24px; }
  .plan-week { gap: 4px; }
  .day { min-height: 164px; padding-block: 10px 8px; border-radius: 11px; }
  .day-name { font-size: .6875rem; }
  .day-note { font-size: .625rem; }
  .day-track i { width: 10px; height: 10px; margin: -5px 0 0 -5px; }
  .day-track i + i { top: calc(var(--y, 40%) + 20px); }
  .plan-status { font-size: .9375rem; }
  .plan-screens .device-tile { padding: 28px 14px; }
  .night .split + .split { margin-top: 112px; }
  .gallery-item { flex-basis: min(64vw, 260px); }
  .footer-inner { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 640px) {
  .landscape-sticky, .hero-opening { min-height: 580px; }
  .hero-heading { top: 12svh; left: 20px; right: 20px; }
  .hero-brand { margin-bottom: 26px; font-size: 1.2rem; }
  .hero-heading h1 { max-width: 12ch; font-size: clamp(3.1rem, 10.8vw, 4.4rem); }
  .hero-heading > p:last-child { max-width: 22ch; margin-inline: auto; }
  .hero-story { padding: 11svh 0 30svh; }
}

@media (max-width: 374px) {
  .hero-heading h1 { font-size: 2.5rem; }
}

@media (max-height: 540px) and (min-width: 641px) {
  .landscape-sticky, .hero-opening { min-height: 540px; }
  .hero-heading { top: 32px; }
  .hero-heading h1 { font-size: 3.5rem; }
  .hero-brand { margin-bottom: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  [data-parallax] { translate: none !important; }
  .motion-ready [data-reveal]:not(.is-visible) { opacity: 1; translate: none; }
  .landscape-sticky { position: relative; border-radius: 0 0 var(--radius-stage) var(--radius-stage); }
  .hero-journey { border-radius: 0; background: var(--paper); }
  .hero-story { min-height: 0; padding-block: 96px; background: var(--paper); }
  .thread-spark { display: none; }
}

@media (prefers-contrast: more) {
  :root { --muted: var(--ink); --night-muted: var(--night-ink); }
  .hero-heading { text-shadow: 0 2px 10px rgb(0 0 0 / .7); }
}