/* Hallmark · shape: Map / Diagram · genre: atmospheric · theme: Ribbon (deal 1/3, seed luna-latch-macos-menu-3f27·72079ecc·2026-11-01·r0) · job: try · draw: 0892e5
 * hero: Settled · nav: banner over a retracting bar · footer: letter close · imagery: screenshots 6 (the app's own views, rendered headless) · signature: the lunar cycle drawn as one curve of light, the three readings Luna Latch takes from it set beneath · ribbon: two-in-the-morning
 * axes: dark/grotesk-sans/chromatic-amber · posture: committed · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S5 R4 V4 · weakest: P, the page claims only that the moon is worth a glance; kept it calm and factual rather than inventing a bigger promise */
/* Hallmark · dismissed F15 · the 32px is the twelve-column gutter under the heads, rows and table; the 64px parts each app capture from its words in the hero, the tour and the close */
@import url("./tokens.css");
@import url("./base.css");

:root { --bar-h: 64px; }

body { font-size: 1.0625rem; line-height: 1.6; }
p { color: var(--color-muted); }
h1, h2, h3 { color: var(--color-ink); line-height: 1.04; }
h3 { font-size: var(--text-title); line-height: 1.2; letter-spacing: -0.02em; }
.lead { color: var(--color-muted); }
.num { font-variant-numeric: tabular-nums lining-nums; }
cite { font-style: italic; }

/* Skip link */
.skip { position: absolute; left: var(--space-md); top: calc(-1 * var(--space-3xl)); z-index: var(--z-toast); padding: var(--space-xs) var(--space-md); border-radius: var(--radius-part); background: var(--color-ink); color: var(--color-paper); }
.skip:focus-visible { top: var(--space-md); }

/* Banner over a bar that tucks away while you scroll down */
.banner { display: flex; align-items: center; justify-content: center; margin: 0; padding: var(--space-xs) var(--gutter); border-bottom: var(--rule-hair) solid var(--color-rule-2); font-size: var(--text-sm); text-align: center; }
.banner a { color: var(--color-ink-2); text-decoration-color: var(--color-rule); }
.banner a:hover { text-decoration-color: var(--color-accent); }
.bar { position: sticky; top: 0; z-index: var(--z-sticky-nav); border-bottom: var(--rule-hair) solid var(--color-rule-2); background: color-mix(in oklab, var(--color-paper) 88%, transparent); backdrop-filter: blur(14px); transition: transform var(--dur-long) var(--ease-in-out); }
.bar.is-tucked { transform: translateY(-100%); }
.bar__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); min-height: var(--bar-h); }
.brand { display: inline-flex; align-items: center; gap: var(--space-sm); color: var(--color-ink); font: 500 var(--text-lg)/1 var(--font-display); letter-spacing: -0.01em; text-decoration: none; white-space: nowrap; }
.brand img { border-radius: var(--radius-part); }
.bar__links { display: flex; align-items: center; gap: var(--space-lg); }
.bar__links a:not(.btn) { color: var(--color-muted); font-size: var(--text-sm); text-decoration: none; white-space: nowrap; transition: color var(--dur-short) var(--ease-out); }
.bar__links a:not(.btn):hover { color: var(--color-ink); }

/* Controls: a machined pill, and the store badge as the primary */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 var(--space-lg); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-pill); background: linear-gradient(var(--metal-hi), var(--metal-lo)); box-shadow: var(--edge-light), var(--shadow-part); color: var(--color-ink); font: 500 var(--text-sm)/1 var(--font-body); text-decoration: none; white-space: nowrap; cursor: pointer; transition: border-color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
.btn:hover { border-color: var(--color-muted); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; }
.store { display: inline-block; border-radius: var(--radius-part); transition: transform var(--dur-micro) var(--ease-out); }
.store img { width: auto; height: 52px; }
.store:hover { transform: translateY(-1px); }
.store:active { transform: translateY(1px); }
.store:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; }

/* Product frames: the app's own screens, never retouched */
.shot { justify-self: center; height: clamp(440px, calc(100svh - 240px), 640px); aspect-ratio: 340 / 570; margin: 0; border-radius: var(--radius-card); background: var(--color-slot); box-shadow: var(--shadow-panel); }
[data-slot][data-kind="product"] > img { filter: none; outline: var(--rule-hair) solid color-mix(in oklab, var(--color-ink) 10%, transparent); outline-offset: -1px; border-radius: inherit; }

/* Grounds: the night over a low horizon, with a generated grain */
.hero, .close { position: relative; isolation: isolate; background: linear-gradient(var(--color-paper), var(--color-sky)); }
.hero::before, .close::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: var(--grain, none); background-size: 160px; mix-blend-mode: soft-light; opacity: 0.45; pointer-events: none; }
.horizon { position: absolute; inset: auto 0 0; z-index: -1; height: 14%; background: linear-gradient(var(--color-land), var(--color-paper)); }
.horizon::before { content: ""; position: absolute; inset: auto 0 100%; height: 180px; background: radial-gradient(55% 100% at 50% 100%, color-mix(in oklab, var(--color-ink) 8%, transparent), transparent); pointer-events: none; }
.horizon::after { content: ""; position: absolute; inset: 0 0 auto; height: 1px; background: linear-gradient(90deg, transparent, color-mix(in oklab, var(--color-ink) 34%, transparent) 50%, transparent); }

/* Hero, settled in its screen */
.hero__inner { display: grid; grid-template-columns: auto auto; justify-content: center; gap: var(--space-2xl); align-items: center; min-height: calc(100svh - var(--bar-h) - var(--space-xl)); padding-block: var(--space-2xl); }
.hero h1 { max-width: 9em; text-wrap: balance; }
.hero .lead { max-width: 30ch; margin-top: var(--space-lg); }
.hero .store { margin-top: var(--space-xl); }

/* Head blocks split across the columns */
.split-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap-columns); align-items: end; }
.split-head h2 { grid-column: 1 / span 6; }
.split-head .lead { grid-column: 8 / span 5; }

/* The cycle, drawn as light */
.cycle { padding-block: var(--section-gap) var(--section-gap-s); }
.chart { margin: var(--space-2xl) 0 0; }
.chart__plot { position: relative; height: clamp(220px, 24vw, 340px); border-bottom: var(--rule-hair) solid var(--color-rule); }
.chart__svg { width: 100%; height: 100%; overflow: visible; }
.chart__svg stop { stop-color: var(--color-accent); }
.chart__cols { stroke: var(--color-rule); stroke-width: 1; fill: none; }
.chart__line { stroke: var(--color-ink); stroke-width: 2; fill: none; }
.node { position: absolute; left: calc(var(--x) * 100%); bottom: calc(var(--y) * 100%); width: 14px; height: 14px; translate: -50% 50%; border: 2px solid var(--color-ink); border-radius: var(--radius-pill); background: var(--color-paper); }
.node--full { width: 18px; height: 18px; border-color: var(--color-accent); background: var(--color-accent); }
.chart__between, .chart__legend { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 0 var(--space-xs); margin: 0; padding: 0; list-style: none; }
.chart__between { margin-top: var(--space-sm); font-size: var(--text-sm); color: var(--color-muted); text-align: center; }
.chart__between li { grid-column: span 2; }
.chart__legend { margin-top: var(--space-xl); }
.chart__legend li { display: grid; gap: var(--space-2xs); grid-column: span 2; text-align: center; }
.chart__legend li:first-child { grid-column: 1 / span 1; text-align: left; }
.chart__legend li:last-child { grid-column: 8 / span 1; text-align: right; }
.chart__legend .phase { color: var(--color-ink); font-weight: 500; }
.chart__legend .level { color: var(--color-ink); font: 400 var(--text-2xl)/1 var(--font-display); letter-spacing: -0.02em; }
.chart__legend .is-full .level { color: var(--color-accent); }
.chart__legend .age { font-size: var(--text-sm); color: var(--color-muted); }

/* One reveal: the five nodes ink on, once */
.js [data-reveal] { opacity: 0; transform: scale(0.6); transition: opacity var(--dur-long) var(--ease-out), transform var(--dur-long) var(--ease-out); transition-delay: calc(var(--i, 0) * 90ms); }
.js [data-reveal].is-in { opacity: 1; transform: none; }

/* Today, Month and Year: the app's own tabs */
.tour { --tour-shot: clamp(440px, 44vw, 600px); padding-block: var(--section-gap-s) var(--section-gap); }
.tour__grid { display: grid; grid-template-columns: minmax(0, 1fr); }
.tabs { display: flex; justify-self: start; width: calc(var(--tour-shot) * 340 / 570); margin-top: var(--space-lg); gap: var(--space-2xs); padding: var(--space-2xs); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-pill); background: var(--color-paper-2); }
.tabs button { flex: 1 1 0; min-height: 44px; padding: 0 var(--space-lg); border: var(--rule-hair) solid transparent; border-radius: var(--radius-pill); background: transparent; color: var(--color-muted); font: 500 var(--text-sm)/1 var(--font-body); white-space: nowrap; cursor: pointer; transition: color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
.tabs button:hover { color: var(--color-ink); }
.tabs button:active { transform: translateY(1px); }
.tabs button:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.tabs button:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }
.tabs button[aria-selected="true"] { border-color: var(--color-rule); background: linear-gradient(var(--metal-hi), var(--metal-lo)); box-shadow: var(--edge-light), var(--shadow-part); color: var(--color-ink); }
html:not(.js) .tabs { display: none; }
.js .tabs { grid-row: 3; }
.js .panel { grid-row: 2; }
.js [data-switch]:not(.is-ready) [role="tabpanel"] ~ [role="tabpanel"] { display: none; }
.panel { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--space-2xl); align-items: center; margin-top: var(--space-2xl); }
.panel .shot { justify-self: start; height: var(--tour-shot); }
.facts { display: grid; margin: 0; }
.facts > div { padding-block: var(--space-lg); border-top: var(--rule-hair) solid var(--color-rule); }
.facts > div:last-child { border-bottom: var(--rule-hair) solid var(--color-rule); }
.facts dt { color: var(--color-ink); font: 400 var(--text-title)/1.2 var(--font-display); letter-spacing: -0.02em; }
.facts dd { max-width: 46ch; margin: var(--space-xs) 0 0; color: var(--color-muted); }

/* Settings as rows, on the lifted paper */
.settings { padding-block: var(--section-gap-s); background: var(--color-paper-2); }
.settings__inner { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap-columns); align-items: start; }
.settings__head { grid-column: 1 / span 4; }
.settings__head .lead { margin-top: var(--space-md); }
.settings__head .shot { justify-self: start; height: clamp(440px, 38vw, 540px); margin-top: var(--space-2xl); }
.rows { grid-column: 5 / span 8; margin: 0; padding: 0; list-style: none; }
.rows li { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: var(--gap-columns); align-items: baseline; padding-block: var(--space-xl); border-top: var(--rule-hair) solid var(--color-rule); }
.rows li:first-child { padding-top: 0; border-top: 0; }

/* What it needs, as a table */
.needs { padding-block: var(--section-gap-l) var(--section-gap); }
.spec { width: 100%; margin-top: var(--space-2xl); border-collapse: collapse; }
.spec th, .spec td { padding: var(--space-lg) 0; border-top: var(--rule-hair) solid var(--color-rule); text-align: left; vertical-align: baseline; }
.spec tr:last-child > * { border-bottom: var(--rule-hair) solid var(--color-rule); }
.spec th { width: 59.75%; padding-right: var(--gap-columns); color: var(--color-ink); font: 400 var(--text-title)/1.2 var(--font-display); letter-spacing: -0.02em; }
.spec td { color: var(--color-ink-2); font-size: var(--text-lg); }
.spec a, .facts a { color: var(--color-ink); text-decoration-color: var(--color-rule); }
.spec a:hover { text-decoration-color: var(--color-accent); }

/* The close: the download beside one last screen, over the same horizon */
.close { padding-block: var(--section-gap) var(--section-gap-s); }
.close__inner { display: grid; grid-template-columns: auto auto; justify-content: center; gap: var(--space-2xl); align-items: center; }
.close h2 { max-width: 9em; font-size: var(--text-display); text-wrap: balance; }
.close .store { margin-top: var(--space-xl); }
.close .shot { height: clamp(420px, 40vw, 560px); }

/* Footer: a letter close */
.footer { padding-block: var(--section-gap-s) var(--space-2xl); }
.signoff { color: var(--color-ink); font: 400 var(--text-section)/1.04 var(--font-display); letter-spacing: var(--tracking-display); }
.dateline { margin-top: var(--space-md); }
.footer a { color: var(--color-ink-2); text-decoration-color: var(--color-rule); }
.footer a:hover { text-decoration-color: var(--color-accent); }
.footer__meta { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-md) var(--space-xl); margin-top: var(--space-2xl); padding-top: var(--space-lg); border-top: var(--rule-hair) solid var(--color-rule); font-size: var(--text-sm); }
.footer__links { display: flex; flex-wrap: wrap; gap: var(--space-lg); }

/* Documents: privacy and support */
.doc { padding-block: var(--section-gap-s) var(--section-gap); }
.doc__body { max-width: 68ch; }
.doc h1 { font-size: var(--text-display-s); max-width: 18ch; }
.doc .lead { margin-top: var(--space-lg); }
.doc h2 { margin-top: var(--space-2xl); font-size: var(--text-title); line-height: 1.2; letter-spacing: -0.02em; }
.doc p, .doc li { line-height: 1.7; }
.doc h2 + p, .doc h2 + ul { margin-top: var(--space-sm); }
.doc p + p { margin-top: var(--space-md); }
.doc ul { margin: var(--space-sm) 0 0; padding-left: var(--space-lg); color: var(--color-muted); }
.doc li + li { margin-top: var(--space-xs); }
.doc a { color: var(--color-ink); text-decoration-color: var(--color-rule); }
.doc a:hover { text-decoration-color: var(--color-accent); }
.doc kbd { font: inherit; color: var(--color-ink); }

/* Narrow screens: everything stacks in reading order */
@media (max-width: 60rem) {
  .hero__inner, .panel, .close__inner { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
  .hero__inner { min-height: 0; padding-block: var(--space-2xl) var(--space-3xl); }
  .shot, .panel .shot, .close .shot, .settings__head .shot { height: auto; width: min(100%, 340px); }
  .tabs { width: min(100%, 340px); margin: var(--space-xl) 0 0; }
  .js .tabs { grid-row: 2; }
  .js .panel { grid-row: 3; margin-top: var(--space-lg); }
  .settings__head .shot { margin-block: var(--space-xl); }
  .split-head h2, .split-head .lead { grid-column: 1 / -1; }
  .settings__head, .rows { grid-column: 1 / -1; }
  .rows li { grid-template-columns: minmax(0, 1fr); gap: var(--space-xs); padding-block: var(--space-lg); }
  .rows li:first-child { padding-top: var(--space-lg); border-top: var(--rule-hair) solid var(--color-rule); }
  .chart__between { display: none; }
  .chart__legend { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-lg) var(--space-md); }
  .chart__legend li, .chart__legend li:first-child, .chart__legend li:last-child { grid-column: auto; text-align: left; }
  .spec th, .spec td { display: block; width: auto; padding: 0; }
  .spec th { padding-top: var(--space-lg); }
  .spec td { padding: var(--space-2xs) 0 var(--space-lg); border-top: 0; }
  .spec tr:last-child > th { border-bottom: 0; }
}
@media (max-width: 40rem) {
  .bar__links a:not(.btn) { display: none; }
  .banner { font-size: var(--text-xs); }
}

@media (prefers-reduced-motion: reduce) {
  .bar, .btn, .store, .tabs button, .bar__links a { transition: none; }
  .js [data-reveal] { opacity: 1; transform: none; transition: none; }
}