/* Fonts are linked from each page head by the build; an @import here would
   add a render-blocking round trip before any text could paint. */

:root {
  color-scheme: dark;
  --ink: #171223;
  --field: #1f1833;
  --field-raised: #271e3d;
  --ivory: #fbf5ee;
  --soft: #d8ced9;
  --muted: #a59aa8;
  --faint: #817689;
  --ember: #ffa07a;
  --lilac: #b59bea;
  --line: rgba(251, 245, 238, 0.12);
  --gutter: clamp(1.25rem, 4vw, 3.5rem);
  --measure: 46rem;
}

* { box-sizing: border-box; }
html { background: var(--ink); scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--ivory);
  background:
    radial-gradient(circle at 12% -8%, rgba(181, 155, 234, 0.13), transparent 32rem),
    radial-gradient(circle at 88% 18%, rgba(255, 160, 122, 0.09), transparent 29rem),
    var(--ink);
  font-family: "Figtree", ui-sans-serif, system-ui, sans-serif;
  font-size: 1rem;
  line-height: 1.68;
}

a { color: var(--ivory); text-decoration-color: var(--ember); text-underline-offset: 0.2em; }
a:hover { color: var(--ember); }
a:focus-visible { outline: 2px solid var(--ember); outline-offset: 4px; border-radius: 3px; }

.shell { width: min(100%, 78rem); margin: 0 auto; padding: 0 var(--gutter); }
.masthead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 5.5rem;
  border-bottom: 1px solid var(--line);
}
.brand { display: inline-flex; gap: 0.08em; align-items: baseline; font-family: "Young Serif", serif; font-size: 1.35rem; text-decoration: none; }
.brand-dot { color: var(--ember); }
.nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.65rem 1.25rem; }
.nav a { color: var(--muted); font-size: 0.88rem; font-weight: 600; letter-spacing: 0.07em; text-decoration: none; text-transform: uppercase; }
.nav a[aria-current="page"] { color: var(--ivory); }

main { padding: clamp(4.5rem, 10vw, 8.5rem) 0 6rem; }
.eyebrow { margin: 0 0 1rem; color: var(--muted); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; }
h1, h2, h3 { font-family: "Young Serif", serif; font-weight: 400; line-height: 1.08; }
h1 { max-width: 13ch; margin: 0; font-size: clamp(3rem, 8vw, 6.8rem); letter-spacing: -0.035em; }
h2 { margin: 4rem 0 1rem; font-size: clamp(1.8rem, 4vw, 2.75rem); }
h3 { margin: 2.5rem 0 0.75rem; font-size: 1.35rem; }
.lede { max-width: 42rem; margin: 2rem 0 0; color: var(--soft); font-size: clamp(1.15rem, 2.2vw, 1.45rem); }
.meta { margin-top: 2rem; color: var(--faint); font-size: 0.92rem; }
.prose { width: min(100%, var(--measure)); margin-top: 5rem; }
.prose p, .prose li { color: var(--soft); }
.prose strong { color: var(--ivory); }
.prose ul { padding-left: 1.25rem; }
.prose li + li { margin-top: 0.55rem; }
.callout {
  margin: 3rem 0;
  padding: 1.35rem 1.5rem;
  border: 1px solid rgba(255, 160, 122, 0.25);
  border-radius: 1.25rem;
  background: linear-gradient(135deg, rgba(255, 160, 122, 0.08), rgba(181, 155, 234, 0.06));
}
.callout p { margin: 0; }
.action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.2rem;
  margin-top: 1.25rem;
  padding: 0.8rem 1.25rem;
  border-radius: 999px;
  color: var(--ink);
  background: var(--ivory);
  font-weight: 600;
  text-decoration: none;
}
.action:hover { color: var(--ink); background: var(--ember); }
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); gap: 1rem; margin-top: 3rem; }
.card { min-height: 15rem; padding: 1.75rem; border: 1px solid var(--line); border-radius: 1.5rem; background: rgba(31, 24, 51, 0.72); }
.card h2 { margin: 0 0 0.75rem; font-size: 1.65rem; }
.card p { color: var(--muted); }
.card a { display: inline-block; margin-top: 1rem; font-weight: 600; }
.footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; padding: 2rem 0 3rem; border-top: 1px solid var(--line); color: var(--faint); font-size: 0.88rem; }

@media (max-width: 42rem) {
  .masthead { align-items: flex-start; flex-direction: column; padding: 1.5rem 0; }
  .nav { justify-content: flex-start; }
  main { padding-top: 3.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ==========================================================================
   Marketing home page.

   The legal pages above are a single measured column. The home page is the
   only wide, sectioned layout on the site, so its rules live here rather than
   in a second stylesheet — one request, and both share the tokens and fonts
   already declared at the top of this file.

   Everything scales with clamp(). The design was drawn at desktop width with
   fixed 128px headings; a phone is the likeliest first visit, so no type size
   on this page is a fixed pixel value.
   ========================================================================== */

/* The WebP wrapper must not become a layout box of its own: the hero and
   closing backgrounds are absolutely positioned images inside one. */
picture { display: contents; }

.home { --shell: 74rem; }
/*
  The rules above are written for the legal pages, which are one measured
  column inside a padded <main>. The home page paints full-bleed sections that
  set their own rhythm, so it opts out of that padding and out of the base
  heading metrics rather than fighting them section by section.
*/
.home main { padding: 0; }
.home h1, .home h2, .home h3 { margin: 0; max-width: none; }
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 10;
  background: var(--ember); color: #1a1020; padding: .75rem 1.25rem; border-radius: 0 0 .5rem 0;
}
.skip:focus { left: 0; }
.home .shell { width: min(100% - (var(--gutter) * 2), var(--shell)); margin-inline: auto; }
.home .display {
  font-family: 'Young Serif', Georgia, serif;
  font-size: clamp(2rem, 6vw, 3.9rem);
  line-height: 1.06; letter-spacing: -0.03em; text-wrap: balance;
  margin: 0 0 1.1rem;
}
.home .lede { color: var(--soft); font-size: clamp(1.05rem, 2.1vw, 1.3rem); line-height: 1.6; margin: 0; }
.home .lede.wide { max-width: 40rem; }
.home .dim { color: var(--muted); }
.home .eyebrow {
  font-size: .8rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--faint); margin: 0 0 1rem;
}
.home .eyebrow .num { color: var(--ember); margin-right: .6rem; }

/* Nav ---------------------------------------------------------------- */
.home-nav { position: sticky; top: 0; z-index: 5; background: rgba(14, 10, 24, .82); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
.home-nav-inner {
  width: min(100% - (var(--gutter) * 2), var(--shell)); margin-inline: auto;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .9rem 0; flex-wrap: wrap;
}
.home-nav nav { display: flex; gap: clamp(.8rem, 2.4vw, 1.9rem); flex-wrap: wrap; }
.home-nav nav a { color: var(--muted); text-decoration: none; font-size: .95rem; }
.home-nav nav a:hover, .home-nav nav a:focus-visible { color: var(--ivory); }

/* Hero --------------------------------------------------------------- */
.hero { position: relative; overflow: hidden; background: var(--ink-darkest, #0e0a18); }
.hero-bg {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: .5; filter: saturate(.85);
}
.hero::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(14,10,24,.45) 0%, rgba(14,10,24,.72) 55%, var(--ink) 100%);
}
.hero-inner {
  position: relative; z-index: 1;
  width: min(100% - (var(--gutter) * 2), var(--shell)); margin-inline: auto;
  padding: clamp(3.5rem, 11vw, 8rem) 0 clamp(3rem, 8vw, 6rem);
  display: grid; gap: clamp(2.5rem, 6vw, 4rem);
  grid-template-columns: 1fr; align-items: center;
}
@media (min-width: 62rem) { .hero-inner { grid-template-columns: 1.15fr .85fr; } }
.hero h1 {
  font-family: 'Young Serif', Georgia, serif;
  font-size: clamp(3rem, 12vw, 7.5rem);
  line-height: .92; letter-spacing: -0.045em; margin: 0 0 1.4rem;
  text-shadow: 0 24px 60px rgba(0, 0, 0, .45);
}
.hero .lede { max-width: 30rem; }

.store { margin-top: 2rem; display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; }
.store-badge {
  border: 1px solid var(--line); border-radius: .7rem; padding: .5rem 1.1rem;
  color: var(--soft); font-size: .9rem; letter-spacing: .04em;
  background: rgba(251, 245, 238, .04);
}
.store-note { flex-basis: 100%; margin: .6rem 0 0; color: var(--faint); font-size: .9rem; }
.store-note a { color: var(--ember); }

/* The countdown, as markup rather than a screenshot. */
.countdown-card {
  background: linear-gradient(165deg, rgba(39, 30, 61, .92), rgba(23, 18, 35, .96));
  border: 1px solid var(--line); border-radius: 1.4rem;
  padding: clamp(1.5rem, 4vw, 2.2rem); box-shadow: 0 40px 90px rgba(0, 0, 0, .45);
  max-width: 26rem;
}
.card-eyebrow { margin: 0; color: var(--faint); font-size: .82rem; letter-spacing: .14em; text-transform: uppercase; }
.card-number { margin: .3rem 0 .2rem; display: flex; align-items: baseline; gap: .6rem; }
.card-number > span:first-child {
  font-family: 'Young Serif', Georgia, serif; font-size: clamp(3.4rem, 11vw, 5rem);
  line-height: 1; color: var(--ember);
}
.card-unit { color: var(--muted); font-size: 1.05rem; }
.card-meta { margin: 0 0 1.2rem; color: var(--soft); font-size: .95rem; }
.clocks { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; padding: 1rem 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.clocks div { display: flex; flex-direction: column; gap: .2rem; }
.clock-city { color: var(--faint); font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; }
.clock-time { font-size: 1.4rem; }
.clock-time abbr { font-size: .8rem; margin-left: .15rem; color: var(--muted); text-decoration: none; }
.card-foot { margin: 1rem 0 0; color: var(--faint); font-size: .88rem; }

/* Sections ----------------------------------------------------------- */
.idea, .features, .tonight, .archive, .privacy { padding: clamp(3.5rem, 10vw, 7.5rem) 0; }
.idea { background: var(--ink); }
.features { background: var(--ink); padding-top: 0; }
.tonight, .privacy { background: var(--ink-deep, #120e1e); }
.archive { background: var(--ink); }

.feature-list { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(3rem, 8vw, 5.5rem); }
.feature { display: grid; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; grid-template-columns: 1fr; }
@media (min-width: 54rem) {
  .feature { grid-template-columns: 1fr 1fr; }
  .feature.reverse .feature-text { order: 2; }
}
.feature h3, .room h3, .promises h3 {
  font-family: 'Young Serif', Georgia, serif; letter-spacing: -0.02em;
  font-size: clamp(1.5rem, 3.4vw, 2.2rem); line-height: 1.15; margin: 0 0 .8rem;
}
.feature-text p { color: var(--soft); line-height: 1.65; margin: 0 0 .8rem; max-width: 34rem; }
.stat { color: var(--faint) !important; font-size: .95rem; }
.stat strong { color: var(--ember); font-size: 1.6rem; font-family: 'Young Serif', Georgia, serif; margin-right: .4rem; }
.feature-art, .room-art, .archive-art { margin: 0; border-radius: 1.1rem; overflow: hidden; border: 1px solid var(--line); background: var(--field); }
.feature-art img, .room-art img, .archive-art img { display: block; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; }
.archive-art img { aspect-ratio: 3 / 4; }

/* The touch pulse: the one feature whose subject is duration, drawn rather
   than photographed, and held still for anyone who asked for less motion. */
.touch-art { aspect-ratio: 4 / 3; display: grid; place-items: center; position: relative; background: radial-gradient(circle at 50% 50%, #241a3c, #140f22); }
.pulse { position: absolute; width: 22%; aspect-ratio: 1; border-radius: 50%; border: 2px solid var(--ember); opacity: 0; animation: ripple 3.6s ease-out infinite; }
.pulse.d1 { animation-delay: 1.2s; } .pulse.d2 { animation-delay: 2.4s; }
@keyframes ripple { 0% { transform: scale(.5); opacity: .85; } 100% { transform: scale(3.2); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .pulse { animation: none; opacity: .5; } .pulse.d1 { transform: scale(1.8); opacity: .28; } .pulse.d2 { transform: scale(2.6); opacity: .14; } }

.rooms { list-style: none; margin: clamp(2.5rem, 6vw, 3.5rem) 0 0; padding: 0; display: grid; gap: clamp(1.5rem, 3.5vw, 2.2rem); grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.room p { color: var(--muted); line-height: 1.6; margin: 0; }
.room-art { margin-bottom: 1.1rem; }
.room-draw { aspect-ratio: 4 / 3; display: grid; place-items: center; background: radial-gradient(circle at 40% 40%, #241a3c, #140f22); }
.room-draw svg { width: 100%; height: 100%; }

.archive-inner { display: grid; gap: clamp(2rem, 5vw, 3.5rem); align-items: center; grid-template-columns: 1fr; }
@media (min-width: 54rem) { .archive-inner { grid-template-columns: 1.2fr .8fr; } }
.tally { display: flex; flex-wrap: wrap; gap: clamp(1.5rem, 5vw, 3rem); margin: 2.2rem 0 0; }
.tally div { display: flex; flex-direction: column-reverse; gap: .2rem; }
.tally dd { margin: 0; font-family: 'Young Serif', Georgia, serif; font-size: clamp(1.6rem, 4vw, 2.3rem); color: var(--ember); }
.tally dt { color: var(--faint); font-size: .85rem; letter-spacing: .1em; text-transform: uppercase; }

/*
  Two by two rather than auto-fit. There are exactly four of these and their
  sentences are long; auto-fit put three on one row and orphaned the fourth,
  and squeezing all four into one row made every line break mid-phrase.
*/
.promises { list-style: none; counter-reset: promise; margin: clamp(2.5rem, 6vw, 3.5rem) 0 0; padding: 0; display: grid; gap: clamp(1.5rem, 3.5vw, 2.2rem) clamp(1.5rem, 4vw, 3.5rem); grid-template-columns: 1fr; }
@media (min-width: 48rem) { .promises { grid-template-columns: 1fr 1fr; } }
.promises li { counter-increment: promise; border-top: 1px solid var(--line); padding-top: 1.4rem; }
.promises li::before { content: counter(promise, decimal-leading-zero); display: block; color: var(--ember); font-size: .85rem; letter-spacing: .12em; margin-bottom: .7rem; }
.promises p { color: var(--muted); line-height: 1.6; margin: 0; }
.read-more { margin: clamp(2rem, 5vw, 3rem) 0 0; }
.read-more a { color: var(--ember); }

.closing { position: relative; overflow: hidden; padding: clamp(4rem, 12vw, 8rem) 0; background: var(--ink-darkest, #0e0a18); text-align: center; }
.closing-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .55; }
.closing::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14,10,24,.55), rgba(14,10,24,.8)); }
.closing-inner { position: relative; z-index: 1; }
.closing .store { justify-content: center; }
.closing .lede { margin-inline: auto; }

.home-footer { background: var(--ink-darkest, #0e0a18); border-top: 1px solid var(--line); padding: clamp(3rem, 7vw, 4.5rem) 0 3rem; }
.footer-links { display: grid; gap: 1.4rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); margin-bottom: 2.5rem; }
.footer-links a { display: flex; flex-direction: column; gap: .35rem; text-decoration: none; color: var(--soft); }
.footer-links strong { color: var(--ivory); font-weight: 600; }
.footer-links span { color: var(--faint); font-size: .9rem; line-height: 1.5; }
.footer-links a:hover strong, .footer-links a:focus-visible strong { color: var(--ember); }
.footer-meta { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; color: var(--faint); font-size: .88rem; margin: 0 0 .6rem; padding-top: 1.6rem; border-top: 1px solid var(--line); }
.footer-note { margin: 0; color: var(--faint); font-size: .88rem; }