/* Base typography and page layout. Owner: lane "content". Uses tokens only.
   Mobile first: the base rules are the 390px phone; wider screens add columns at 48rem and 64rem.
   Section spacing is deliberately uneven (RHYTHM 2): sections that belong together sit close, and the
   two big turns of the story (letter to shop, shop to sharing) get the widest gaps. */

html[data-page="night"] { --link: var(--wax); --line: var(--wax-soft); }
html[data-page="day"]   { --link: var(--plum); --line: var(--ink); }

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; } /* controls stay hidden until share.js shows them */
html { -webkit-text-size-adjust: 100%; scroll-padding-top: var(--s-2); }
body {
  margin: 0; background: var(--bg); color: var(--fg);
  font-family: var(--book); font-size: var(--step-0); line-height: 1.6;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
/* Watercolour washes bleed past their drawings on purpose (scene.css, overflow: visible), but must never make
   the page wider than a phone. Clipped here, on main, so the clip does not pass up to the viewport;
   clip rather than hidden, so main is not a scroll box. */
main { max-width: 68rem; margin: 0 auto; padding-block: var(--s-3) var(--s-5); overflow-x: clip; }
/* A column: the reading band (scene.css) stretches the full width, and sections space themselves with
   margin-top; flex items never collapse margins. */
main { display: flex; flex-direction: column; }
h1, h2, h3 { font-family: var(--hand); font-weight: 400; letter-spacing: 0.03em; line-height: 1.1; margin: 0; text-wrap: balance; }
h1 { font-size: var(--step-3); }
h2 { font-size: var(--step-2); }
p { margin: 0; max-width: 62ch; }
ul { margin: 0; }
section { display: flex; flex-direction: column; gap: var(--s-2); }
a { color: var(--link); text-decoration-thickness: 1.5px; text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 2.5px; }
img { max-width: 100%; height: auto; display: block; }
:focus-visible { outline: 3px dashed var(--accent); outline-offset: 3px; }
html[data-page="day"] :focus-visible { outline-color: var(--plum); }

.skip { position: absolute; left: -999px; top: 0; }
.skip:focus { left: max(16px, env(safe-area-inset-left, 0px)); top: max(8px, env(safe-area-inset-top, 0px)); background: var(--bg); color: var(--fg); padding: var(--s-1) var(--s-2); z-index: 10; }

/* ---------- The drawn circle (identity motif). Fineliner weight, never filled. ---------- */
.ring { display: block; overflow: visible; color: var(--line); }
.ring path { fill: none; stroke: currentColor; stroke-width: 0.42; stroke-linecap: round; }

/* ---------- Actions. Gold (or crimson by day) is the one action on a screen; the rest are quiet. ---------- */
.action {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 var(--s-3);
  font-family: var(--hand); font-size: var(--step-1); letter-spacing: 0.02em; line-height: 1.1; text-align: center;
  background: var(--accent); color: var(--on-accent); border: 1.5px solid var(--accent); border-radius: var(--r-control);
  text-decoration: none; cursor: pointer;
}
.action:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
.action:active { transform: translateY(1px); }
.action-quiet { background: transparent; color: var(--fg); border-color: var(--line); }

/* ---------- Words that recur ---------- */
.greeting { font-family: var(--script); font-size: clamp(2.6rem, 2rem + 3vw, 3.8rem); color: var(--gold); line-height: 1; letter-spacing: 0; }
.byline { font-family: var(--hand); font-size: var(--step-1); color: var(--fg-soft); }
.intro { font-style: italic; font-size: var(--step-1); line-height: 1.4; max-width: 30ch; }

/* ---------- Night hero: a world inside one circle, like a magnet; the title sits underneath ---------- */
.night-hero { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--s-2); }
.night-hero h1 { max-width: 19ch; }
.night-hero p { margin-inline: auto; }
/* Two bands inside the circle, like the magnets: the menorah on top, the gold lettering on its own line
   under the menorah's foot. The menorah box is 70% of the circle wide (360:300), so its top corners touch
   the ring only where the drawing is sky; the greeting (about 63% wide) sits where the ring is still about
   77% wide. Children are sized in cqi, which resolves against this circle (the container's own padding
   would not), so the bands hold at every width. */
.hero-circle {
  position: relative; width: min(100%, 26rem); aspect-ratio: 1; container-type: inline-size;
  display: flex; flex-direction: column; align-items: center; justify-content: center; margin-bottom: var(--s-1);
}
.hero-circle .ring { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-circle [data-scene="menorah"] { position: relative; flex: none; width: 70cqi; max-width: none; aspect-ratio: 360 / 300; }
.hero-circle .greeting { position: relative; flex: none; font-size: 9cqi; margin: 2.5cqi 0 6cqi; }
.hero-circle:has(.scene:empty) .greeting { font-size: 10.5cqi; margin: 0; }
.hero-circle-small { width: min(60%, 13rem); }
.hero-action { margin-top: var(--s-2); }

/* ---------- Why: Charlie's letter, a sheet tucked into the book, heading in the margin ---------- */
/* The reading band (small menorah and moons) has its own room in the page and sticks to the top as you
   read (scene.css). Nothing sits under it at rest, so no negative margin here. */
.night-hero + .scene-moons { margin-top: var(--s-4); }
.appeal { margin-top: var(--s-5); gap: var(--s-3); }
.letter {
  display: flex; flex-direction: column; gap: var(--s-2); max-width: 37rem;
  background: var(--night-2); border-radius: var(--r-drawn); padding: var(--s-3) 1.25rem var(--s-4);
  font-size: var(--step-0); line-height: 1.65;
}
.letter p:first-child { font-size: var(--step-1); line-height: 1.4; }
.proceeds { font-family: var(--hand); font-size: var(--step-1); line-height: 1.3; color: var(--fg-soft); padding-top: var(--s-2); border-top: 1px dashed var(--line); }

/* ---------- Choose: the widest spread; the form inside belongs to lane "commerce" ---------- */
.shop { margin-top: var(--s-5); gap: var(--s-3); }
.shop-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s-1) var(--s-3); padding-bottom: var(--s-2); border-bottom: 1.5px solid var(--line); }
.closed { font-family: var(--hand); font-size: var(--step-1); }
.deadline { font-style: italic; color: var(--fg-soft); }

/* ---------- Pass it on: a small circle seal with the heading, the share tools beside it ---------- */
.share { margin-top: var(--s-5); display: grid; justify-items: center; gap: var(--s-3); }
.seal { position: relative; width: 11rem; aspect-ratio: 1; display: grid; place-items: center; text-align: center; }
.seal .ring { position: absolute; inset: 0; width: 100%; height: 100%; }
.seal .ring path { stroke-width: 0.8; }
.seal h2 { position: relative; max-width: 7ch; }
.share-body { display: flex; flex-direction: column; gap: var(--s-3); width: 100%; max-width: 36rem; }
.thanks-line { font-style: italic; font-size: var(--step-1); line-height: 1.45; text-align: center; max-width: 34ch; margin-inline: auto; }

.share-tools { display: flex; flex-direction: column; gap: var(--s-2); }
.share-address { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--s-1); font-family: var(--hand); font-size: var(--step-1); }
.share-address-label { font-size: var(--step--1); color: var(--fg-soft); }
.share-address a { display: inline-flex; align-items: center; min-height: 44px; overflow-wrap: anywhere; }
.legal .link-line a { display: inline-flex; align-items: center; min-height: 44px; }
.share-buttons { display: flex; flex-wrap: wrap; gap: var(--s-1); }
.share-buttons .action { flex: 1 1 10rem; }
.share-buttons [data-share-whatsapp] { flex-basis: 100%; }
.share-status { min-height: 1.6em; font-family: var(--hand); font-size: var(--step-1); line-height: 1.3; }
.share-status:empty { min-height: 0; }

.singles { display: flex; flex-direction: column; gap: var(--s-1); }
.singles ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0 var(--s-3); font-family: var(--hand); font-size: var(--step-1); }
.singles a { display: inline-flex; align-items: center; min-height: 44px; }

/* ---------- Thank-you, 404 ---------- */
.thanks .order-status { font-size: var(--step-1); line-height: 1.4; max-width: 30ch; }
/* The order summary (thanks.js, lane commerce) reads as a list, not as centred hero text. */
.thanks #order-detail { text-align: start; align-self: stretch; max-width: 36rem; margin-inline: auto; }
.thanks #order-detail p { margin-inline: 0; }
.share-thanks > p:last-child { margin-inline: auto; }
.lost { padding-block: var(--s-4); }

/* ---------- One drawing (/magnet/<id>/): the art as art, with its name ---------- */
.one { display: grid; gap: var(--s-4); }
.one-art { margin: 0; }
.one-art img { width: 100%; max-width: 30rem; margin-inline: auto; border-radius: var(--r-magnet); box-shadow: var(--magnet-shadow); transform: rotate(-1.5deg); }
.one-words { display: flex; flex-direction: column; gap: var(--s-2); }
.one-words .greeting { font-size: var(--step-2); }
.one-words .share-tools { margin-top: var(--s-3); padding-top: var(--s-3); border-top: 1px dashed var(--line); }

/* ---------- Day page: the studio holding page ---------- */
.day-hero { display: grid; gap: var(--s-4); align-items: center; min-height: min(78dvh, 42rem); align-content: center; }
.day-words { display: flex; flex-direction: column; gap: var(--s-3); }
.day-note { font-size: var(--step-1); line-height: 1.45; max-width: 30ch; }

/* ---------- Terms and privacy: plain reading, one column ---------- */
.legal { max-width: 40rem; margin-inline: auto; display: flex; flex-direction: column; gap: var(--s-4); }
.legal-head { display: flex; flex-direction: column; gap: var(--s-2); padding-bottom: var(--s-3); border-bottom: 1.5px solid var(--line); }
.legal-intro { font-size: var(--step-1); line-height: 1.45; }
.legal-date { font-size: var(--step--1); color: var(--fg-soft); }
.legal section { gap: var(--s-1); }
.legal h2 { font-size: var(--step-1); }
.legal-back a { display: inline-flex; align-items: center; min-height: 44px; font-family: var(--hand); font-size: var(--step-1); }

/* ---------- Page foot: quiet ---------- */
.foot {
  max-width: 68rem; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 0 var(--s-3); padding-block: var(--s-2) max(var(--s-4), env(safe-area-inset-bottom, 0px));
  border-top: 1px dashed var(--line); font-family: var(--hand); color: var(--fg-soft);
}
.foot-links { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0 var(--s-3); }
.foot-links a { display: inline-flex; align-items: center; min-height: 44px; color: var(--fg-soft); }

/* ---------- Wider screens ---------- */
@media (min-width: 48rem) {
  main { padding-block: var(--s-4) var(--s-6); }
  .letter { padding: var(--s-4) var(--s-4) var(--s-5); }
  .shop, .share { margin-top: var(--s-6); }
  .share { grid-template-columns: 12rem minmax(0, 36rem); justify-content: center; align-items: center; column-gap: var(--s-5); }
  .seal { width: 12rem; }
  .thanks-line, .share-thanks > p:last-child { grid-column: 1 / -1; }
  .one { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; column-gap: var(--s-5); }
  .day-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--s-5); }
  .day-hero:has(.scene:empty) { grid-template-columns: minmax(0, 40rem); justify-content: center; }
}
@media (min-width: 64rem) {
  .appeal { display: grid; grid-template-columns: 14rem minmax(0, 37rem); justify-content: center; column-gap: var(--s-5); align-items: start; }
  .appeal h2 { text-align: right; padding-top: var(--s-4); }
}

/* ---------- Motion: ink first (the circle traces), gold last (the greeting wipes in like a pen) ---------- */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  .ring-hero path { stroke-dasharray: 1; animation: ink 1.3s var(--ease-brand) 0.1s both; }
  .hero-circle .greeting { animation: pen 0.9s var(--ease-brand) 1.2s both; }
  @supports (animation-timeline: view()) {
    .ring-seal path { stroke-dasharray: 1; animation: ink linear both; animation-timeline: view(); animation-range: entry 15% cover 45%; }
  }
}
@keyframes ink { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes pen { from { clip-path: inset(-20% 100% -20% 0); } to { clip-path: inset(-20% 0 -20% 0); } }