/* Values mirror lib/core/theme/design_tokens.dart: paper and ink grounds, ink-teal for action, claret ribbon. */
@font-face { font-family: Literata; src: url("/assets/literata-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: Literata; src: url("/assets/literata-400i.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: Literata; src: url("/assets/literata-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: Figtree; src: url("/assets/figtree-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: Figtree; src: url("/assets/figtree-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }

:root {
  --night: #15130f;
  --night-raised: #211e19;
  --night-border: #38322a;
  --moon: #f1ece3;
  --moon-muted: #bdb5a9;
  --teal-light: #8fcfc5;
  --on-teal-light: #0b2b27;
  --claret: #8e2f3c;
  --claret-light: #e59aa4;
  --danger: #f2b8b5;
  --paper: #f8f5ef;
  --paper-sunken: #efeae1;
  --paper-border: #e2dbcf;
  --ink: #1e1b17;
  --ink-muted: #5b544b;
  --teal: #1f5a55;
  --gutter: 20px;
  --radius: 14px;
  --hand: cubic-bezier(.2, .85, .25, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--night); color: var(--moon); font: 400 1.0625rem/1.65 Figtree, system-ui, sans-serif; overflow-x: clip; }
img, video { display: block; max-width: 100%; height: auto; }
h1, h2 { margin: 0; font-family: Literata, Georgia, serif; font-weight: 600; letter-spacing: -.012em; text-wrap: balance; overflow-wrap: break-word; }
/* The vw caps keep the longest words on screen at 320 wide with large text. */
h1 { font-size: min(clamp(2.5rem, 1.6rem + 4.2vw, 4rem), 13vw); line-height: 1.08; text-wrap: wrap; }
h2 { font-size: min(clamp(1.9rem, 1.4rem + 2.2vw, 3rem), 10vw); line-height: 1.14; }
h1 em, h2 em { font-weight: 400; color: var(--claret-light); }
h1 em { display: block; }
p { margin: 0; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--teal-light); outline-offset: 3px; border-radius: 4px; }

.wrap { width: min(1100px, 100%); margin-inline: auto; padding-inline: var(--gutter); }
.wrap--narrow { width: min(720px, 100%); }
.skip-link { position: absolute; inset-block-start: -80px; inset-inline-start: 12px; z-index: 20; padding: 12px 16px; border-radius: 8px; background: var(--moon); color: var(--ink); }
.skip-link:focus { inset-block-start: 12px; }

.button {
  display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 12px 22px;
  border: 0; border-radius: var(--radius); background: var(--teal-light); color: var(--on-teal-light);
  font: 600 1rem/1.2 Figtree, system-ui, sans-serif; text-align: center; text-decoration: none; cursor: pointer;
  transition: transform 100ms ease-out, background-color 180ms ease-out;
}
.button:hover { background: #a6dcd3; }
.button:active { transform: scale(.97); }
.button[disabled] { opacity: .65; cursor: progress; }
.button--quiet { min-height: 48px; padding: 8px 16px; border: 1px solid var(--night-border); background: transparent; color: var(--moon); }
.button--quiet:hover { background: var(--night-raised); }

.site-header { position: sticky; inset-block-start: 0; z-index: 10; background: rgb(21 19 15 / .9); backdrop-filter: blur(10px); }
.site-header__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 72px; }
.site-header__row > a:first-child { display: inline-flex; align-items: center; min-height: 48px; }
.logo { width: auto; height: 42px; }

.hero { padding-block: 16px 64px; background: radial-gradient(80% 70% at 78% 18%, rgb(221 179 106 / .13), transparent 70%); }
.hero__grid { display: grid; gap: 32px; }
.hero__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; min-width: 0; }
.hero__status { color: var(--moon-muted); font-size: .9375rem; }
.hero__status strong { color: var(--moon); font-weight: 600; }
.lede { max-width: 34em; text-wrap: pretty; color: var(--moon-muted); font-size: clamp(1.0625rem, 1rem + .4vw, 1.25rem); }
.hero__film { position: relative; margin: 0; justify-self: center; width: min(100%, 460px); }
.hero__film video { width: 100%; border-radius: 20px; box-shadow: 0 24px 70px rgb(0 0 0 / .55), 0 0 0 1px rgb(241 236 227 / .07); }
/* The app's bookmark, tucked into the top of the film like a book's ribbon. */
.ribbon { position: absolute; inset-block-start: -8px; inset-inline-end: 32px; z-index: 1; width: 18px; height: 84px; background: var(--claret); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 86%, 0 100%); pointer-events: none; }

.waitlist { display: flex; flex-direction: column; gap: 8px; width: 100%; max-width: 520px; }
.waitlist label { color: var(--moon-muted); font-size: .9375rem; }
.waitlist__row { display: flex; flex-wrap: wrap; gap: 10px; }
.waitlist input[type="email"] {
  flex: 1 1 220px; min-width: 0; min-height: 52px; padding: 12px 16px; border: 1px solid #7d7366; border-radius: var(--radius);
  background: var(--night-raised); color: var(--moon); font: inherit;
}
.waitlist input::placeholder { color: #9c9387; }
.waitlist input[aria-invalid="true"] { border-color: var(--danger); }
.waitlist .button { flex: 1 1 auto; }
.waitlist__trap { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.waitlist__fine { color: var(--moon-muted); font-size: .875rem; }
.waitlist__fine a { display: inline-block; padding-block: 2px; }
.waitlist__status { font-weight: 600; }
.waitlist__status:empty { display: none; }
.waitlist__status[data-kind="error"] { color: var(--danger); }
.waitlist__status[data-kind="success"] { color: var(--teal-light); }
.waitlist--center { margin-inline: auto; text-align: start; }

.shelf-band { overflow: hidden; padding-block: 20px 0; border-block-end: 12px solid #3a2a1d; background: linear-gradient(to bottom, transparent, rgb(58 42 29 / .32)); }
.shelf-band__row { display: flex; align-items: flex-end; justify-content: center; gap: 12px; width: max-content; margin-inline-start: 50%; transform: translateX(-50%); }
.shelf-band img { width: 96px; flex: none; border-radius: 2px 5px 5px 2px; box-shadow: 0 4px 10px rgb(0 0 0 / .45); transition: transform 280ms var(--hand); }
.shelf-band img:nth-child(3n) { width: 86px; }
.shelf-band img:nth-child(4n) { width: 104px; }
.shelf-band img:hover { transform: translateY(-8px); }

.chapter { padding-block: 72px; }
.chapter__grid { display: grid; gap: 40px; align-items: center; }
.chapter__copy { display: flex; flex-direction: column; gap: 16px; min-width: 0; max-width: 34em; }
.chapter__copy > p:not(.eyebrow) { color: var(--moon-muted); font-size: 1.125rem; }
.eyebrow { color: var(--teal-light); font-family: Literata, Georgia, serif; font-style: italic; font-size: 1.0625rem; }

.phone { justify-self: center; width: min(100%, 300px); margin: 0; padding: 9px; border-radius: 38px; background: #0b0a08; box-shadow: 0 24px 60px rgb(0 0 0 / .5), 0 0 0 1px rgb(241 236 227 / .13); }
.phone img { width: 100%; border-radius: 30px; }
.film-card { justify-self: center; width: min(100%, 480px); margin: 0; }
.film-card video { width: 100%; border-radius: 20px; box-shadow: 0 0 0 1px rgb(241 236 227 / .07); }

.chapter--sky { background: linear-gradient(rgb(21 19 15 / .72), rgb(21 19 15 / .86)), url("/assets/sky.webp") center / cover no-repeat; }

.chapter--paper { background: var(--paper); color: var(--ink); }
.chapter--paper h2 em { color: var(--claret); }
.chapter--paper .eyebrow { color: var(--teal); }
.chapter--paper .chapter__copy > p:not(.eyebrow) { color: var(--ink-muted); }
.chapter--paper .phone { box-shadow: 0 24px 50px rgb(30 27 23 / .24); }

.bring { padding-block: 64px; background: var(--paper-sunken); color: var(--ink); text-align: center; }
.bring__inner { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.bring h2 { max-width: 20em; font-size: clamp(1.6rem, 1.3rem + 1.4vw, 2.25rem); }
.bring p { max-width: 36em; color: var(--ink-muted); font-size: 1.125rem; }

.why { padding-block: 72px 0; }
.letter { position: relative; display: flex; flex-direction: column; gap: 18px; padding: 40px 24px; border-radius: 4px 8px 8px 4px; background: #fffdf9; color: var(--ink); box-shadow: 0 24px 60px rgb(0 0 0 / .45); }
.letter h2 { padding-inline-end: 36px; font-size: min(clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem), 10vw); }
.letter p { color: var(--ink-muted); font-family: Literata, Georgia, serif; font-size: 1.125rem; line-height: 1.7; text-wrap: pretty; }
.letter .letter__close { margin-block-start: 10px; padding-block-start: 24px; border-block-start: 1px solid var(--paper-border); color: var(--claret); font-style: italic; font-size: clamp(1.3rem, 1.15rem + .7vw, 1.625rem); line-height: 1.4; }

.faq { padding-block: 72px; }
.faq h2 { margin-block-end: 20px; }
.faq details { border-block-end: 1px solid var(--night-border); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 60px; padding-block: 12px; font-weight: 600; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; color: var(--teal-light); font-size: 1.5rem; line-height: 1; }
.faq details[open] summary::after { content: "\2212"; }
.faq details p { padding-block-end: 20px; color: var(--moon-muted); }

.closing { padding-block: 24px 88px; background: #050505; }
.closing__inner { display: flex; flex-direction: column; align-items: center; gap: 24px; text-align: center; }
.closing__key { width: min(100%, 360px); -webkit-mask-image: radial-gradient(closest-side, #000 72%, transparent); mask-image: radial-gradient(closest-side, #000 72%, transparent); }

.site-footer { padding-block: 28px; border-block-start: 1px solid var(--night-border); color: var(--moon-muted); font-size: .9375rem; }
.site-footer__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; }
.site-footer nav { display: flex; gap: 8px; }
.site-footer nav a { display: inline-flex; align-items: center; min-height: 48px; padding-inline: 8px; }

.legal { padding-block: 40px 72px; }
.legal h1 { margin-block-end: 8px; font-size: clamp(2rem, 1.6rem + 2vw, 3rem); }
.legal h2 { margin-block: 32px 8px; font-size: 1.375rem; }
.legal p, .legal ul { color: var(--moon-muted); }
.legal li + li { margin-block-start: 6px; }
.notfound { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; padding-block: 72px; }

@media (min-width: 900px) {
  .hero { padding-block: 40px 88px; }
  .hero__grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 56px; align-items: center; }
  .hero__film { justify-self: end; }
  .hero__film video { max-height: calc(100svh - 130px); width: auto; }
  .chapter { padding-block: 104px; }
  .why { padding-block-start: 104px; }
  .letter { padding: 64px; }
  .chapter__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; }
  .chapter--flip .chapter__copy { order: 2; }
  .shelf-band img { width: 128px; }
  .shelf-band img:nth-child(3n) { width: 114px; }
  .shelf-band img:nth-child(4n) { width: 138px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .button, .shelf-band img { transition: none; }
  .shelf-band img:hover { transform: none; }
}