/* Hallmark · genre: playful · macrostructure: Marquee Hero · theme: Hum · enrichment: licensed photo tile (Commons, CC BY-SA) + Tier A CSS character (invite + reply bubbles) · nav: N9 · footer: Ft8
 * tone: playful (joyful, not childish) · audience: people in Italian cities, Milano first · use: leave an email / follow
 * pre-emit critique: P4 H5 E4 S4 R4 V4 */
@import url("tokens.css");

*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: 1.5;
  font-feature-settings: "ss01" on, "cv11" on;
  font-variant-numeric: tabular-nums;
}
a { color: var(--color-ink); text-decoration-thickness: 2px; text-underline-offset: 0.18em; text-decoration-color: var(--color-accent-2); }
a:hover { text-decoration-color: var(--color-ink); }
a:focus-visible, input:focus-visible, button:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* one shell: every section's content shares the same edges */
.shell { max-width: var(--page-max); margin-inline: auto; padding-inline: var(--page-gutter); }

/* ---------- nav · N9 edge-aligned ---------- */
.nav { display: flex; justify-content: space-between; align-items: center; padding-block: var(--space-lg); }
.wordmark { font-family: var(--font-display); font-weight: 700; font-size: var(--text-lg); letter-spacing: -0.02em; text-decoration: none; }
.nav__link { white-space: nowrap; font-weight: 600; font-size: var(--text-sm); }

/* ---------- hero · headline + photo tile ---------- */
.hero { min-height: 82dvh; display: grid; align-items: center; gap: var(--space-xl); grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); padding-block: var(--space-xl) var(--space-2xl); }
.hero h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-display);
  line-height: 0.94;
  letter-spacing: -0.03em;
  margin: 0;
  max-width: 11ch;
  overflow-wrap: anywhere;
  min-width: 0;
}
.hl {
  background-image: linear-gradient(oklch(from var(--color-accent-3) l c h / 0.5) 0 0);
  background-repeat: no-repeat;
  background-size: 100% 0.18em;
  background-position: 0 88%;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.hero__note { font-family: var(--font-label); font-size: var(--text-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-ink-soft); margin: var(--space-lg) 0 0; }

/* the photo tile: the one off-grid moment, tilted and lifting */
.hero__photo { position: relative; margin: 0; transform: rotate(2deg); transition: transform var(--dur-mid) var(--ease-spring); }
.hero__photo:hover { transform: rotate(0deg) translateY(-4px); }
.hero__photo img { display: block; width: 100%; height: auto; border-radius: var(--radius-card); box-shadow: 0 2px 4px oklch(from var(--color-shadow) l c h / 0.12), 0 24px 48px -20px oklch(from var(--color-shadow) l c h / 0.4); }
.hero__photo figcaption { font-family: var(--font-label); font-size: var(--text-xs); letter-spacing: 0.04em; color: var(--color-ink-soft); margin-top: var(--space-sm); line-height: 1.7; }
.hero__photo figcaption > * , .hero__photo figcaption { background: var(--color-paper); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.hero__photo figcaption { display: inline; padding: 0.15em 0.4em; border-radius: 6px; }
.hero__note { display: inline-block; background: var(--color-paper); padding: 0.2em 0.4em; margin-left: -0.4em; border-radius: 6px; }
.hero__photo figcaption a { color: inherit; }

/* character: the invite and the reply, two bubbles tucked over the tile's corner. Pear asks, cyan answers a beat later. */
.bubbles { position: absolute; left: -1.4rem; top: -1.6rem; z-index: 1; display: grid; gap: 0.35rem; justify-items: start; }
.bubble {
  font-weight: 600; font-size: var(--text-sm); line-height: 1; padding: 0.55rem 0.85rem; border-radius: var(--radius-pill);
  box-shadow: 0 2px 6px oklch(from var(--color-shadow) l c h / 0.18);
  transform-origin: bottom left;
  animation: pop 360ms var(--ease-snap) both;
}
.bubble:first-child { background: var(--color-accent); color: var(--color-band-ink); border-bottom-left-radius: 4px; animation-delay: 300ms; }
.bubble:last-child { background: var(--color-accent-2); color: var(--color-paper); border-bottom-right-radius: 4px; margin-left: 2.4rem; transform-origin: bottom right; animation-delay: 1100ms; transition: transform var(--dur-mid) var(--ease-spring); }
.hero__photo:hover .bubble:last-child { transform: translateY(-3px) rotate(-4deg); }
@keyframes pop { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* ---------- pear block · the ask ---------- */
.band { background: var(--color-accent); color: var(--color-band-ink); }
.ask { padding-block: var(--space-3xl); display: grid; gap: var(--space-xl); grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; }
.ask__lead p { font-size: var(--text-xl); line-height: 1.35; margin: 0; max-width: 28ch; font-weight: 500; }
.ask__lead p + p { margin-top: var(--space-md); font-weight: 400; }
.ask__form label { display: block; font-weight: 600; margin-bottom: var(--space-sm); }
.cta-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-sm); }
.cta-form input {
  min-width: 0; min-height: 48px; padding: 0 var(--space-md);
  font: inherit; color: var(--color-ink);
  background: var(--color-paper); color-scheme: light dark; border: 2px solid transparent; border-radius: var(--radius-input);
  transition: border-color var(--dur-short) var(--ease-out);
}
.cta-form input::placeholder { color: var(--color-ink-soft); }
.cta-form input:hover { border-color: var(--color-band-ink); }
.cta-form input:focus-visible { outline: none; border-color: var(--color-accent-2); }
.cta-form input:user-invalid { border-color: var(--color-accent-3); }
.ask__alt { font-size: var(--text-md); margin: var(--space-md) 0 0; opacity: 0.8; }
.band a { color: inherit; }

/* push button: solid colour edge + soft ground shadow; the press is the feedback */
.btn {
  --btn-face: var(--color-band-ink); --btn-edge: oklch(from var(--color-band-ink) calc(l - 0.1) c h); --btn-cast: oklch(from var(--color-shadow) l c h / 0.35);
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5em; white-space: nowrap;
  padding: 0.8rem 1.4rem; min-height: 48px; font: inherit; font-weight: 600; border: 0; border-radius: var(--radius-pill);
  color: oklch(97% 0.012 95); background: var(--btn-face); cursor: pointer; position: relative; isolation: isolate;
  box-shadow: 0 4px 0 0 var(--btn-edge), 0 6px 12px -3px var(--btn-cast);
  transition: transform var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out);
}
.btn:hover  { transform: translateY(-2px); box-shadow: 0 6px 0 0 var(--btn-edge), 0 12px 22px -4px var(--btn-cast); }
.btn:active { transform: translateY(3px);  box-shadow: 0 1px 0 0 var(--btn-edge), 0 2px 6px -2px var(--btn-cast); transition-duration: 70ms; }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; pointer-events: none; transform: none; }

.star-burst {
  position: absolute; width: 24px; height: 24px; margin: -12px 0 0 -12px; pointer-events: none;
  background:
    linear-gradient(90deg, transparent 47%, var(--color-accent-3) 47% 53%, transparent 53%),
    linear-gradient(0deg,  transparent 47%, var(--color-accent-3) 47% 53%, transparent 53%);
  animation: star-burst 420ms var(--ease-out) forwards;
}
@keyframes star-burst {
  0%   { transform: scale(0) rotate(0deg);    opacity: 1; }
  60%  { transform: scale(1.2) rotate(35deg); opacity: 0.9; }
  100% { transform: scale(1.4) rotate(45deg); opacity: 0; }
}

/* ---------- week rail · the off-grid moment ---------- */
.week { padding-block: var(--space-2xl) var(--space-3xl); }
.week h2 { font-family: var(--font-display); font-weight: 600; font-size: var(--text-3xl); letter-spacing: -0.025em; line-height: 1.05; margin: 0 0 var(--space-xl); max-width: 16ch; overflow-wrap: anywhere; min-width: 0; }
.days { list-style: none; margin: 0; padding: var(--space-md) 0; display: flex; gap: var(--space-md); overflow-x: auto; scrollbar-width: none; }
.days::-webkit-scrollbar { display: none; }
.days li {
  --tint: var(--color-paper-2);
  flex: 0 0 auto; width: 7.5rem; aspect-ratio: 4 / 5; padding: var(--space-md);
  display: grid; align-content: space-between;
  background: linear-gradient(var(--tint), var(--tint)) var(--color-paper); border-radius: var(--radius-card);
  box-shadow: 0 1px 2px oklch(from var(--color-shadow) l c h / 0.08), 0 12px 32px -16px oklch(from var(--color-shadow) l c h / 0.2);
  transform: rotate(var(--tilt, 0deg));
  transition: transform var(--dur-mid) var(--ease-spring), box-shadow var(--dur-mid);
}
.days li:nth-child(odd)  { --tilt: -2deg; }
.days li:nth-child(even) { --tilt: 1.5deg; }
.days li:nth-child(1) { --tint: oklch(from var(--color-accent-2) l c h / 0.12); }
.days li:nth-child(3) { --tint: oklch(from var(--color-mint) l c h / 0.2); }
.days li:nth-child(5) { --tint: oklch(from var(--color-lavender) l c h / 0.16); }
.days li:nth-child(6) { --tint: oklch(from var(--color-accent) l c h / 0.22); }
.days li.is-festivo { --tint: oklch(from var(--color-accent-3) l c h / 0.14); color: var(--color-festivo); }
.days li.is-festivo .d { color: var(--color-festivo); }
.days li:hover { transform: rotate(0deg) translateY(-6px); box-shadow: 0 2px 4px oklch(from var(--color-shadow) l c h / 0.1), 0 20px 36px -14px oklch(from var(--color-shadow) l c h / 0.3); }
.days .d { font-family: var(--font-label); font-size: var(--text-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-ink-soft); }
.days .n { font-family: var(--font-display); font-weight: 700; font-size: 2.4rem; letter-spacing: -0.03em; line-height: 1; }
.days .m { font-family: var(--font-label); font-size: var(--text-xs); letter-spacing: 0.1em; text-transform: uppercase; margin-left: 0.3rem; }
.week p { margin: var(--space-lg) 0 0; max-width: 40ch; color: var(--color-ink-soft); font-size: var(--text-lg); }

/* ---------- footer · Ft8 marquee ---------- */
.foot { background: var(--color-foot); color: var(--color-foot-ink); border-top: var(--rule-thick) solid var(--color-foot); overflow: hidden; }
.foot__track { display: flex; gap: 0.32em; white-space: nowrap; padding-block: var(--space-lg); animation: foot-marquee 40s linear infinite; width: max-content; }
.foot__track span { font-family: var(--font-display); font-weight: 700; letter-spacing: 0.06em; font-size: clamp(1rem, 2.5vw, 1.5rem); color: var(--color-accent); }
@keyframes foot-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.foot__meta { display: flex; flex-wrap: wrap; gap: var(--space-md) var(--space-lg); padding-block: var(--space-md) var(--space-xl); font-size: var(--text-sm); border-top: 1px solid oklch(from var(--color-foot-ink) l c h / 0.18); }
.foot__meta a { color: var(--color-foot-ink); white-space: nowrap; }
.foot__meta span { color: oklch(from var(--color-foot-ink) l c h / 0.7); }
.theme-toggle { margin-left: auto; font: inherit; font-family: var(--font-label); font-size: var(--text-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-foot-ink); background: none; border: 1px solid oklch(from var(--color-foot-ink) l c h / 0.4); border-radius: var(--radius-pill); padding: 0.35rem 0.7rem; cursor: pointer; white-space: nowrap; transition: border-color var(--dur-short) var(--ease-out); }
.theme-toggle:hover { border-color: var(--color-foot-ink); }
.theme-toggle:active { transform: translateY(1px); }

/* ---------- mobile ---------- */
@media (max-width: 48rem) {
  .hero { min-height: 0; grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); padding-block: var(--space-lg) var(--space-2xl); }
  .hero__photo { transform: rotate(1deg); }
  .bubbles { left: -0.4rem; top: -1.2rem; }
  .ask { grid-template-columns: minmax(0, 1fr); padding-block: var(--space-2xl); gap: var(--space-lg); }
  .cta-form { grid-template-columns: minmax(0, 1fr); }
  .days li { width: 6rem; }
}

@media (prefers-reduced-motion: reduce) {
  .bubble, .foot__track { animation: none; }
  .hero__photo:hover .bubble:last-child { transform: none; }
  .hero__photo, .hero__photo:hover { transform: none; transition: none; }
  .days li { transition: box-shadow var(--dur-short); transform: none; }
  .days li:hover { transform: none; }
  .btn, .btn:hover, .btn:active { transition: none; transform: none; }
  .star-burst { display: none; }
}

/* grazie page: reuse the pear band, headline at section scale */
.week-h { font-family: var(--font-display); font-weight: 600; font-size: var(--text-3xl); letter-spacing: -0.025em; line-height: 1.05; margin: 0 0 var(--space-md); }

/* ---------- map wash · contour lines behind the two quiet sections ---------- */
.hero, .week { position: relative; isolation: isolate; }
.hero::before, .week::before {
  content: ""; position: absolute; inset: 0; left: calc(50% - 50vw); right: calc(50% - 50vw); z-index: -1; pointer-events: none;
  background: url("assets/topo-light.v6.svg") center / cover no-repeat;
}
.week::before { background-position: left 4% bottom 0; background-size: 125% auto; }
:root[data-theme="dark"] .hero::before, :root[data-theme="dark"] .week::before { background-image: url("assets/topo-dark.v6.svg"); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .hero::before, :root:not([data-theme="light"]) .week::before { background-image: url("assets/topo-dark.v6.svg"); }
}

/* ---------- prose pages (privacy) ---------- */
.prose { max-width: 42rem; margin-inline: auto; padding-block: var(--space-xl) var(--space-3xl); }
.prose h1 { font-family: var(--font-display); font-weight: 600; font-size: var(--text-3xl); letter-spacing: -0.025em; line-height: 1.05; margin: 0 0 var(--space-sm); }
.prose h2 { font-family: var(--font-display); font-weight: 600; font-size: var(--text-xl); letter-spacing: -0.015em; margin: var(--space-xl) 0 var(--space-sm); }
.prose p { margin: 0 0 var(--space-md); max-width: 62ch; }
.prose__meta { font-family: var(--font-label); font-size: var(--text-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-ink-soft); }
.prose__back { margin-top: var(--space-2xl); }
.ask__privacy { font-size: var(--text-sm); margin: var(--space-sm) 0 0; opacity: 0.8; }