/* Tokens: see guest/DESIGN.md. Root garden-notebook tokens plus the guest party layer. */
:root {
  --paper: #f6f1e6;
  --paper-deep: #ece4d2;
  --card: #fffcf5;
  --ink: #1f2a21;
  --ink-soft: #4a554b;
  --line: #d8cfba;
  --moss: #2f5d3a;
  --moss-tint: #e1ecdc;
  --clay: #a3401f;
  --clay-tint: #f8e3d6;
  --focus: #1d4ed8;
  --on-moss: #fffcf5;

  --night: #1c1233;
  --night-ink: #f7f0ff;
  --party: #9b1d5c;
  --party-tint: #fbe3ef;
  --lamp: #ffd23f;
  --neon-pink: #ff4fa3;
  --neon-cyan: #2fd3f0;
  --neon-green: #7ee05a;
  --tape: rgb(255 210 63 / 0.55);

  --font-display: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --font-body: system-ui, -apple-system, "Segoe UI", "Noto Sans", sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", "DejaVu Sans Mono", monospace;

  --fs-xs: 0.875rem;
  --fs-sm: 0.9375rem;
  --fs-md: 1.0625rem;
  --fs-lg: 1.2rem;
  --fs-xl: 1.5rem;
  --fs-display: clamp(2rem, 6vw, 3.4rem);
  --fs-hero: clamp(2.25rem, 4.2vw + 1rem, 4.25rem);
  --lh-tight: 1.15;
  --lh-body: 1.55;

  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;

  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 20px;
  --r-pill: 999px;

  --border: 1px solid var(--line);
  --shadow-card: 0 1px 0 rgb(31 42 33 / 0.04), 0 10px 30px -18px rgb(31 42 33 / 0.35);
  --shadow-lift: 0 2px 0 rgb(31 42 33 / 0.05), 0 24px 48px -24px rgb(31 42 33 / 0.5);
  --stone: 14px;
  --target: 44px;
  --focus-ring: 3px solid var(--focus);

  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur: 180ms;
  --dur-slow: 520ms;
  --tilt: 1.5deg;
  --tilt-note: 0.6deg;
  --measure: 72rem;
  --measure-wide: 88rem;
  --measure-text: 38rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #121a14;
    --paper-deep: #0c120e;
    --card: #1a241d;
    --ink: #ece6d6;
    --ink-soft: #b9b4a4;
    --line: #33402f;
    --moss: #8fc79a;
    --moss-tint: #1f3324;
    --clay: #f0a27a;
    --clay-tint: #3a2219;
    --focus: #ffd166;
    --on-moss: #0c120e;

    --night: #0e0a1c;
    --party: #ff9ccb;
    --party-tint: #3a1830;
    --tape: rgb(255 210 63 / 0.35);

    --shadow-card: inset 0 1px 0 rgb(236 230 214 / 0.06), 0 14px 34px -20px rgb(0 0 0 / 0.8);
    --shadow-lift: inset 0 1px 0 rgb(236 230 214 / 0.08), 0 28px 56px -24px rgb(0 0 0 / 0.9);
  }
}

/* Base */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-padding-top: var(--s-6); background: var(--paper-deep); }

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font-body);
  font-size: var(--fs-md);
  line-height: var(--lh-body);
  color: var(--ink);
  background:
    radial-gradient(60rem 30rem at 85% -10%, color-mix(in srgb, var(--neon-pink) 10%, transparent), transparent 70%),
    radial-gradient(40rem 24rem at -10% 20%, var(--moss-tint), transparent 70%),
    linear-gradient(var(--paper), var(--paper-deep));
  background-repeat: no-repeat;
}
@media (prefers-color-scheme: dark) {
  body {
    background:
      radial-gradient(60rem 34rem at 80% -10%, color-mix(in srgb, var(--neon-pink) 14%, transparent), transparent 70%),
      radial-gradient(50rem 30rem at 0% 10%, color-mix(in srgb, var(--neon-cyan) 10%, transparent), transparent 70%),
      linear-gradient(var(--night), var(--paper) 40rem, var(--paper-deep));
    background-repeat: no-repeat;
  }
}

h1, h2, h3 { line-height: var(--lh-tight); margin: 0; }
p { margin: 0; }
ul, ol, dl, dd, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img { display: block; max-width: 100%; height: auto; }
[hidden] { display: none !important; }

a { color: var(--moss); text-underline-offset: 0.2em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: var(--focus-ring); outline-offset: 3px; border-radius: var(--r-sm); }
main:focus { outline: none; }

.wrap { width: min(100% - 2 * var(--s-4), var(--measure)); margin-inline: auto; }
.wrap--wide { width: min(100% - 2 * var(--s-4), var(--measure-wide)); }

.skip-link {
  position: absolute;
  left: var(--s-4);
  top: calc(-1 * var(--s-8));
  z-index: 3;
  display: inline-flex;
  align-items: center;
  min-height: var(--target);
  padding: var(--s-2) var(--s-4);
  background: var(--card);
  color: var(--ink);
  border: var(--border);
  border-radius: var(--r-md);
  font-weight: 600;
}
.skip-link:focus { top: var(--s-4); }

.eyebrow {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--party);
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: var(--target);
  padding: var(--s-2) var(--s-4);
  border: var(--border);
  border-radius: var(--r-md);
  background: var(--card);
  color: var(--ink);
  font: inherit;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.btn:hover { background: var(--moss-tint); transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn--primary { background: var(--moss); border-color: transparent; color: var(--on-moss); }
.btn--primary:hover { background: var(--moss); opacity: 0.92; }
.btn--quiet { background: transparent; border-color: transparent; color: var(--ink-soft); }
.btn--quiet:hover { background: var(--card); color: var(--ink); }
.btn--block { width: 100%; }
.btn[disabled] { cursor: progress; opacity: 0.7; transform: none; }

/* Chips */
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  width: fit-content;
  padding: 0 var(--s-3);
  border-radius: var(--r-pill);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.8;
  white-space: nowrap;
}
.chip--party { background: var(--party-tint); color: var(--party); }
.chip--open { background: var(--clay-tint); color: var(--clay); }
.chip--confirmed { background: var(--moss-tint); color: var(--moss); }

/* Top bar */
.topbar { padding-block: var(--s-2); }
.topbar__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
.topbar__inner .btn { white-space: nowrap; }
.topbar__brand { min-width: 0; display: flex; align-items: center; gap: var(--s-2); font-size: var(--fs-sm); font-weight: 600; color: var(--ink-soft); }
.topbar__dot {
  width: var(--s-3);
  height: var(--s-3);
  border-radius: var(--r-pill);
  background: conic-gradient(var(--neon-pink), var(--lamp), var(--neon-green), var(--neon-cyan), var(--neon-pink));
}

/* Shared state message */
.state {
  display: grid;
  gap: var(--s-3);
  justify-items: start;
  padding: var(--s-5);
  border: var(--border);
  border-radius: var(--r-lg);
  background: var(--card);
}
.state:empty { display: none; }
.state--error { background: var(--clay-tint); }
.state--quiet { color: var(--ink-soft); border-style: dashed; background: transparent; }
.state__text { max-width: var(--measure-text); }
#load-status { margin-block: var(--s-6); }

/* Hero: the artwork plus the invitation ticket */
.hero {
  display: grid;
  padding-block: var(--s-3) var(--s-7);
}
.art-pane {
  position: relative;
  padding: var(--s-3);
  border-radius: var(--r-lg);
  background: var(--night);
  box-shadow: var(--shadow-lift);
}
.art-pane::before {
  content: "";
  position: absolute;
  inset-inline: var(--s-5);
  top: calc(-1 * var(--s-1));
  height: var(--s-3);
  background:
    radial-gradient(circle, var(--lamp) 0 3px, transparent 4px) 0 50% / 24px 100% repeat-x,
    radial-gradient(circle, var(--neon-pink) 0 3px, transparent 4px) 12px 50% / 24px 100% repeat-x;
  filter: drop-shadow(0 0 4px var(--lamp));
}
.art-pane__img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--night) 70%, var(--neon-pink));
}

.ticket {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--s-4);
  align-content: start;
  margin: calc(-1 * var(--s-5)) var(--s-3) 0;
  padding: var(--s-6) var(--s-5) var(--s-5);
  background:
    radial-gradient(circle at 100% 0, color-mix(in srgb, var(--neon-pink) 18%, transparent) 0 var(--s-8), transparent calc(var(--s-8) + 1px)),
    var(--card);
  border: var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lift);
  rotate: calc(-1 * var(--tilt) / 2);
}
.ticket::before,
.ticket::after {
  content: "";
  position: absolute;
  top: calc(-1 * var(--s-3));
  width: var(--s-8);
  height: var(--s-5);
  background: var(--tape);
}
.ticket::before { left: var(--s-6); rotate: -4deg; }
.ticket::after { right: var(--s-6); rotate: 5deg; }

.ticket__title {
  font-family: var(--font-display);
  font-size: var(--fs-hero);
  font-weight: 600;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.ticket__title::after {
  content: "";
  display: block;
  width: 5.5em;
  max-width: 100%;
  height: var(--s-2);
  margin-top: var(--s-3);
  border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--neon-pink), var(--lamp), var(--neon-green), var(--neon-cyan));
}
.ticket__facts { display: grid; gap: var(--s-3); }
.ticket__row {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr);
  gap: var(--s-3);
  align-items: baseline;
  padding-top: var(--s-3);
  border-top: 1px dashed var(--line);
}
.ticket__row dt {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.ticket__row dd { font-size: var(--fs-lg); font-weight: 600; }
.ticket__time { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--fs-xl); color: var(--party); }
.ticket__sub { display: block; font-size: var(--fs-sm); font-weight: 400; color: var(--ink-soft); }
.ticket__actions { display: flex; flex-wrap: wrap; gap: var(--s-2); }

@media (min-width: 900px) {
  .hero {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    align-items: center;
    padding-block: var(--s-5) var(--s-8);
  }
  .art-pane { grid-column: 1 / span 9; grid-row: 1; padding: var(--s-4); }
  .ticket {
    grid-column: 9 / -1;
    grid-row: 1;
    margin: 0 0 0 calc(-1 * var(--s-5));
    padding: var(--s-7) var(--s-6) var(--s-6);
    rotate: var(--tilt);
  }
}

/* Sections */
.sections { display: grid; gap: var(--s-8); padding-bottom: var(--s-8); }
@media (min-width: 900px) { .sections { gap: var(--s-9); } }
.section { display: grid; gap: var(--s-4); align-content: start; }
.section__title {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  font-family: var(--font-display);
  font-size: var(--fs-display);
  font-weight: 600;
  letter-spacing: -0.01em;
}
.section__title::before {
  content: "";
  flex: none;
  width: var(--s-4);
  height: var(--s-4);
  border-radius: var(--r-pill);
  background: radial-gradient(circle at 35% 35%, var(--lamp), var(--neon-pink));
  box-shadow: 0 0 0 var(--s-1) var(--party-tint);
}
.section__lead { max-width: var(--measure-text); color: var(--ink-soft); }

.prose { display: grid; gap: var(--s-3); align-content: start; max-width: var(--measure-text); font-size: var(--fs-lg); }
.prose--soft { font-size: var(--fs-md); color: var(--ink-soft); }

/* The afternoon */
.afternoon { display: grid; gap: var(--s-6); }
.afternoon__plan { display: grid; gap: var(--s-4); align-content: start; }
@media (min-width: 900px) {
  .afternoon { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-8); }
}

.path { position: relative; display: grid; gap: var(--s-4); padding-inline-start: var(--s-6); }
.path::before {
  content: "";
  position: absolute;
  inset-block: var(--s-2);
  left: calc(var(--s-3) - 1px);
  border-left: 2px dotted var(--line);
}
.stone { position: relative; font-size: var(--fs-lg); font-weight: 600; }
.stone::before {
  content: "";
  position: absolute;
  left: calc(var(--s-3) - var(--s-6) - var(--stone) / 2);
  top: 0.4em;
  width: var(--stone);
  height: var(--stone);
  border-radius: var(--r-pill);
  background: var(--stone-color, var(--neon-pink));
  box-shadow: 0 0 0 3px var(--paper);
}
.stone:nth-child(4n + 2) { --stone-color: var(--lamp); }
.stone:nth-child(4n + 3) { --stone-color: var(--neon-green); }
.stone:nth-child(4n + 4) { --stone-color: var(--neon-cyan); }

.callout {
  display: grid;
  gap: var(--s-2);
  justify-items: start;
  padding: var(--s-4);
  border-radius: var(--r-md);
  background:
    repeating-linear-gradient(135deg, transparent 0 10px, color-mix(in srgb, var(--clay) 6%, transparent) 10px 12px),
    var(--clay-tint);
}

/* Facts */
.facts {
  display: grid;
  border-top: var(--border);
}
.fact {
  display: grid;
  gap: var(--s-1) var(--s-5);
  padding-block: var(--s-4);
  border-bottom: var(--border);
}
.fact dt {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.fact dd { display: grid; gap: var(--s-1); justify-items: start; font-size: var(--fs-lg); font-weight: 600; }
.fact__extra { font-size: var(--fs-sm); font-weight: 400; color: var(--ink-soft); }
.fact--open dd { color: var(--clay); }
@media (min-width: 700px) {
  .fact { grid-template-columns: 12rem minmax(0, 1fr); align-items: baseline; }
}

/* News */
.news { display: grid; gap: var(--s-5); max-width: 48rem; }
.news__item {
  position: relative;
  display: grid;
  gap: var(--s-2);
  padding-inline-start: var(--s-6);
}
.news__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.35em;
  width: var(--s-4);
  height: var(--s-4);
  border-radius: var(--r-pill);
  background: var(--lamp);
  box-shadow: 0 0 var(--s-3) var(--lamp);
}
.news__date { font-size: var(--fs-sm); font-weight: 600; color: var(--party); }
.news__title { font-size: var(--fs-lg); font-weight: 700; }
.news__body { display: grid; gap: var(--s-2); color: var(--ink-soft); }

/* Recap */
.recap { display: grid; gap: var(--s-5); }
.recap__title { font-family: var(--font-display); font-size: var(--fs-xl); font-weight: 600; }
.recap__photos { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr)); }
.recap__photo {
  display: grid;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-2) var(--s-3);
  background: var(--card);
  border: var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-card);
}
.recap__photo img { width: 100%; border-radius: var(--r-sm); background: var(--paper-deep); }
.recap__photo figcaption { padding-inline: var(--s-1); font-size: var(--fs-sm); color: var(--ink-soft); }
.recap-pending {
  display: grid;
  gap: var(--s-2);
  max-width: 44rem;
  padding: var(--s-5) var(--s-6);
  border: 2px dashed var(--line);
  border-radius: var(--r-lg);
}
.recap-pending__title { font-family: var(--font-display); font-size: var(--fs-xl); font-weight: 600; }
.recap-pending p { color: var(--ink-soft); }

/* Messages and photos */
.messages, .photos { display: grid; gap: var(--s-6); align-items: start; }
@media (min-width: 900px) {
  .messages, .photos { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-7); }
}

.compose {
  display: grid;
  gap: var(--s-4);
  padding: var(--s-5);
  background: var(--card);
  border: var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
}
.compose__privacy { font-size: var(--fs-sm); color: var(--ink-soft); }
.compose__actions { display: flex; flex-wrap: wrap; gap: var(--s-2); }

.field { display: grid; gap: var(--s-1); }
.field__label { font-weight: 700; }
.field__input {
  width: 100%;
  min-height: var(--target);
  padding: var(--s-2) var(--s-3);
  border: 1px solid color-mix(in srgb, var(--ink-soft) 60%, var(--line));
  border-radius: var(--r-md);
  background: var(--paper);
  color: var(--ink);
  font: inherit;
}
.field__input--area { min-height: 8rem; resize: vertical; }
.field__input:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }
.field__input[aria-invalid="true"] { border-color: var(--clay); border-width: 2px; }
.field__hint { font-size: var(--fs-xs); color: var(--ink-soft); }
.field__optional { font-weight: 400; color: var(--ink-soft); }
.field__input--file { padding: var(--s-1); cursor: pointer; }
.field__input--file::file-selector-button {
  min-height: calc(var(--target) - 2 * var(--s-1) - 2px);
  margin-inline-end: var(--s-3);
  padding: var(--s-1) var(--s-4);
  border: var(--border);
  border-radius: var(--r-sm);
  background: var(--card);
  color: var(--ink);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.field__input--file:hover::file-selector-button { background: var(--moss-tint); }
.counter { justify-self: end; font-size: var(--fs-xs); color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.counter--limit { color: var(--clay); font-weight: 700; }

.form-status:empty { display: none; }
.form-status {
  display: grid;
  gap: var(--s-1);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-md);
  font-size: var(--fs-sm);
}
.form-status--saving { background: var(--paper-deep); color: var(--ink); }
.form-status--success { background: var(--moss-tint); color: var(--ink); }
.form-status--error { background: var(--clay-tint); color: var(--ink); }
.form-status strong { font-weight: 700; }

.notes-wrap { display: grid; gap: var(--s-4); }
.notes { display: grid; gap: var(--s-5); padding-top: var(--s-3); }
.notes:empty { display: none; }
@media (min-width: 1200px) {
  .notes { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
}
.note-slip {
  position: relative;
  display: grid;
  gap: var(--s-2);
  padding: var(--s-5) var(--s-5) var(--s-4);
  background: var(--card);
  border: var(--border);
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-card);
  rotate: calc(-1 * var(--tilt-note));
}
.note-slip:nth-child(even) { rotate: var(--tilt-note); }
.note-slip::before {
  content: "";
  position: absolute;
  top: calc(-1 * var(--s-2));
  left: 50%;
  width: var(--s-8);
  height: var(--s-4);
  translate: -50% 0;
  background: var(--tape);
}
.note-slip--new { box-shadow: 0 0 0 2px var(--moss), var(--shadow-card); }
.note-slip__text { white-space: pre-line; overflow-wrap: anywhere; }
.note-slip__by {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--s-1) var(--s-3);
  font-size: var(--fs-sm);
  color: var(--ink-soft);
}
.note-slip__name { font-family: var(--font-display); font-style: italic; font-size: var(--fs-md); font-weight: 600; color: var(--party); overflow-wrap: anywhere; }

.notice {
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-md);
  background: var(--party-tint);
  color: var(--ink);
  font-size: var(--fs-sm);
}
.notice strong { font-weight: 700; }

.photo-preview { display: grid; gap: var(--s-2); justify-items: start; }
.photo-preview__img {
  max-height: 16rem;
  width: auto;
  border: var(--border);
  border-radius: var(--r-md);
  background: var(--paper-deep);
}

.gallery { padding-top: var(--s-1); }
.gallery:empty { display: none; }
.gallery__link { display: block; border-radius: var(--r-sm); }
.gallery .recap__photo img { aspect-ratio: 4 / 3; object-fit: cover; }
.gallery__caption { color: var(--ink); overflow-wrap: anywhere; }
.gallery__by {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--s-1) var(--s-3);
}
.gallery__name { font-family: var(--font-display); font-style: italic; font-weight: 600; color: var(--party); overflow-wrap: anywhere; }
.recap__photo--new { box-shadow: 0 0 0 2px var(--moss), var(--shadow-card); }

/* Footer */
.footer { padding-block: var(--s-6); border-top: var(--border); color: var(--ink-soft); font-size: var(--fs-sm); }
.footer__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3); }

/* Login page (no script; loads only this stylesheet) */
.login-page {
  display: grid;
  min-height: 100vh;
  place-items: center;
  padding: var(--s-4);
  background:
    radial-gradient(circle at 20% 15%, color-mix(in srgb, var(--neon-pink) 30%, transparent) 0 2px, transparent 3px) 0 0 / 48px 48px,
    radial-gradient(circle at 70% 60%, color-mix(in srgb, var(--lamp) 45%, transparent) 0 2px, transparent 3px) 0 0 / 64px 64px,
    radial-gradient(circle at 40% 80%, color-mix(in srgb, var(--neon-cyan) 30%, transparent) 0 2px, transparent 3px) 0 0 / 56px 56px,
    radial-gradient(60rem 30rem at 50% -10%, color-mix(in srgb, var(--neon-pink) 16%, transparent), transparent 70%),
    linear-gradient(var(--paper), var(--paper-deep));
}
.login { width: min(100%, 28rem); }
.login__card {
  position: relative;
  display: grid;
  gap: var(--s-4);
  padding: var(--s-7) var(--s-5) var(--s-5);
  background: var(--card);
  border: var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lift);
}
@media (min-width: 600px) { .login__card { padding: var(--s-7) var(--s-6) var(--s-6); } }
.login__lights {
  position: absolute;
  inset-inline: var(--s-5);
  top: var(--s-4);
  height: var(--s-3);
  background:
    radial-gradient(circle, var(--lamp) 0 3px, transparent 4px) 0 50% / 24px 100% repeat-x,
    radial-gradient(circle, var(--neon-pink) 0 3px, transparent 4px) 12px 50% / 24px 100% repeat-x;
}
.login__title { font-family: var(--font-display); font-size: var(--fs-display); font-weight: 600; text-wrap: balance; }
.login__lead, .login__hint { color: var(--ink-soft); }
.login__hint { font-size: var(--fs-sm); }
.login__form { display: grid; gap: var(--s-4); }
.login__card [role="alert"] {
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-md);
  background: var(--clay-tint);
  color: var(--ink);
  font-weight: 600;
}

/* Motion */
@media (prefers-reduced-motion: no-preference) {
  .art-pane { animation: rise var(--dur-slow) var(--ease) both; }
  .ticket { animation: settle var(--dur-slow) var(--ease) 120ms both; }
  .sections > * { animation: rise var(--dur-slow) var(--ease) both; }
  .note-slip--new, .recap__photo--new { animation: settle var(--dur-slow) var(--ease) both; }
  .topbar__dot { animation: spin 6s linear infinite; }
  @keyframes rise { from { opacity: 0; translate: 0 var(--s-3); } }
  @keyframes settle { from { opacity: 0; rotate: 0deg; translate: 0 calc(-1 * var(--s-3)); } }
  @keyframes spin { to { rotate: 1turn; } }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}