:root {
  --paper: #fffdf8; --ink: #2b2a2e; --marker: #c23b33; --table: #ece4d8; --soft: #8a8178;
  --script: 'Pinyon Script', cursive; --serif: 'Cormorant Garamond', Georgia, serif; --hand: 'Caveat', 'Segoe Print', cursive;
  --ease: cubic-bezier(.22, .8, .2, 1);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--serif); color: var(--ink); font-size: 19px; line-height: 1.5; -webkit-font-smoothing: antialiased;
  background: radial-gradient(130% 80% at 50% 0%, color-mix(in srgb, var(--table) 70%, #fff), var(--table) 70%) fixed;
}
body.locked { overflow: hidden; height: 100svh; }
.app { position: relative; max-width: 480px; margin: 0 auto; min-height: 100svh; overflow: hidden; }

/* ───────── cover: the calendar page ───────── */
.cover { position: relative; min-height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 28px 16px 64px; }
.sheet {
  position: relative; width: min(100%, 400px); background: var(--paper); border-radius: 6px 6px 10px 10px; padding: 38px 20px 22px; cursor: pointer; text-align: center;
  box-shadow: 0 1px 0 rgba(0,0,0,.04), 0 18px 40px -12px rgba(60, 45, 30, .32), 0 2px 6px rgba(60, 45, 30, .08);
  background-image: radial-gradient(rgba(120, 100, 80, .045) 1px, transparent 1.2px); background-size: 6px 6px;
  animation: drop 1s var(--ease) both; outline: none; -webkit-tap-highlight-color: transparent;
}
.sheet::before { /* a second page peeking underneath */
  content: ''; position: absolute; left: 8px; right: 8px; bottom: -6px; height: 14px; background: color-mix(in srgb, var(--paper) 92%, #c9bba6); border-radius: 0 0 10px 10px; z-index: -1;
  box-shadow: 0 8px 18px -8px rgba(60, 45, 30, .3);
}
.sheet::after { /* perforation under the binding */
  content: ''; position: absolute; left: 14px; right: 14px; top: 26px; height: 2px;
  background: radial-gradient(circle, rgba(60, 45, 30, .2) 1px, transparent 1.4px) 0 0 / 7px 2px repeat-x;
}
.sheet:focus-visible { box-shadow: 0 0 0 3px color-mix(in srgb, var(--marker) 40%, transparent), 0 18px 40px -12px rgba(60, 45, 30, .32); }
@keyframes drop { from { opacity: 0; transform: translateY(-18px) rotate(-1.2deg); } }
.rings { position: absolute; left: 0; right: 0; top: -12px; display: flex; justify-content: space-between; padding: 0 22%; }
.rings i { width: 14px; height: 30px; border-radius: 8px; border: 3px solid #b8b0a4; border-bottom-color: #8f877c; background: linear-gradient(90deg, #d8d2c8, #f4f1ec 45%, #a79f93); box-shadow: 0 2px 3px rgba(0,0,0,.18); }
.kicker { font: 600 11.5px/1 var(--serif); letter-spacing: .32em; text-transform: uppercase; color: var(--soft); margin-top: 4px; }
.month { display: flex; align-items: baseline; justify-content: center; gap: 12px; margin: 6px 0 12px; }
.mname { font: 400 54px/1.05 var(--script); color: var(--ink); }
.year { font: 500 17px/1 var(--serif); letter-spacing: .24em; color: var(--soft); }
.wd, .grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.wd span { font: 600 11.5px/1 var(--serif); letter-spacing: .18em; color: var(--soft); padding: 8px 0 9px; border-bottom: 1px solid rgba(60, 45, 30, .14); }
.grid { row-gap: 2px; padding-top: 6px; }
.d { position: relative; font: 500 19px/1 var(--serif); height: clamp(36px, 10.6vw, 44px); display: grid; place-items: center; color: color-mix(in srgb, var(--ink) 82%, transparent); font-variant-numeric: lining-nums tabular-nums; }
.d.x { visibility: hidden; }
.d.on { color: var(--ink); font-weight: 600; z-index: 2; }
.ring { position: absolute; left: 50%; top: 50%; width: 220%; height: 190%; transform: translate(-50%, -50%) rotate(-8deg); overflow: visible; pointer-events: none; }
.ring path { fill: none; stroke: var(--marker); stroke-linecap: round; stroke-linejoin: round; }
.ring path:first-child { stroke-width: 4.2; opacity: .92; }
.ring path:last-child { stroke-width: 2.2; opacity: .55; }
.heart { position: absolute; right: -16px; top: -16px; font-style: normal; font-size: 18px; color: var(--marker); transform: scale(0) rotate(-20deg); transition: transform .5s cubic-bezier(.3, 1.8, .5, 1) 1.5s; }
.circled .heart { transform: scale(1) rotate(-12deg); }
.note { position: absolute; bottom: 30px; font: 600 23px/1 var(--hand); color: var(--marker); white-space: nowrap; opacity: 0; transition: opacity .6s ease 1.9s; pointer-events: none; transform: rotate(-3deg); }
.circled .note { opacity: .95; }
.arrow { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }
.arrow path { fill: none; stroke: var(--marker); stroke-width: 2; stroke-linecap: round; opacity: .85; }
.hint {
  margin-top: 18px; border: 0; background: none; font: 600 18px/1.2 var(--hand); color: var(--marker); cursor: pointer; padding: 10px 14px; min-height: 44px;
  animation: nudge 2.4s ease-in-out infinite 1.2s;
}
.circled .hint { opacity: 0; pointer-events: none; transition: opacity .4s; }
@keyframes nudge { 0%, 100% { transform: none; } 50% { transform: translateY(-3px); } }

.who { margin-top: 26px; text-align: center; opacity: 0; transform: translateY(14px); transition: opacity 1s var(--ease) 1.25s, transform 1s var(--ease) 1.25s; padding: 0 8px; }
.circled .who { opacity: 1; transform: none; }
.names { font: 400 calc(50px * var(--names-scale, 1))/1.05 var(--script); color: var(--ink); overflow-wrap: anywhere; text-wrap: balance; }
.names .amp { font-size: .62em; margin: 0 .22em; color: var(--marker); }
.tag { font: italic 400 20px/1.3 var(--serif); margin-top: 4px; }
.meta { font: 600 12px/1.6 var(--serif); letter-spacing: .22em; text-transform: uppercase; color: var(--soft); margin-top: 10px; }
.meta.city { margin-top: 0; }
.follow { font: 600 21px/1.2 var(--hand); color: var(--marker); margin-top: 10px; }
.cue { position: absolute; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom)); transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 6px; font: 600 10.5px/1 var(--serif); letter-spacing: .3em; text-transform: uppercase; color: var(--soft); opacity: 0; transition: opacity 1s ease 2s; }
.cue i { width: 1px; height: 22px; background: linear-gradient(var(--soft), transparent); animation: cue 1.8s ease-in-out infinite; }
.circled .cue { opacity: .85; }
@keyframes cue { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }

/* ───────── details ───────── */
main { background: var(--paper); margin: 0 12px 24px; border-radius: 10px; box-shadow: 0 18px 40px -16px rgba(60, 45, 30, .3); overflow: hidden; }
.sec { padding: 46px 26px; text-align: center; border-top: 1px dashed rgba(60, 45, 30, .16); }
.sec:first-child { border-top: 0; }
.k { font: 600 11.5px/1.4 var(--serif); letter-spacing: .3em; text-transform: uppercase; color: var(--marker); margin-bottom: 10px; }
.sec h2 { font: 400 42px/1.1 var(--script); margin-bottom: 12px; }
.lead { font-size: 21px; line-height: 1.55; text-wrap: pretty; }
.sec p { text-wrap: pretty; }
.soft { color: var(--soft); font-size: 17px; margin-top: 6px; }
.cdrow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; max-width: 330px; margin: 6px auto 0; }
.cdrow div { display: flex; flex-direction: column; align-items: center; }
.cdrow b { font: 500 36px/1.1 var(--serif); font-variant-numeric: lining-nums tabular-nums; }
.cdrow span { font: 600 10.5px/1 var(--serif); letter-spacing: .2em; text-transform: uppercase; color: var(--soft); margin-top: 4px; }
.cdt { font: 600 22px/1.2 var(--hand); color: var(--marker); margin-top: 14px; }
.vname { font: 400 40px/1.1 var(--script); margin-bottom: 6px; }
.plan { list-style: none; max-width: 330px; margin: 6px auto 0; text-align: left; }
.plan li { display: grid; grid-template-columns: 86px 1fr; column-gap: 12px; padding: 12px 0; border-bottom: 1px dashed rgba(60, 45, 30, .16); }
.plan time { font-weight: 600; color: var(--marker); font-variant-numeric: lining-nums; }
.plan b { font-weight: 600; }
.plan span { grid-column: 2; color: var(--soft); font-size: 17px; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 46px; margin-top: 20px; padding: 13px 26px; border-radius: 999px; border: 1.5px solid var(--ink);
  color: var(--ink); text-decoration: none; font: 600 12px/1 var(--serif); letter-spacing: .24em; text-transform: uppercase; background: transparent; cursor: pointer;
}
.btn.fill { background: var(--ink); color: var(--paper); }
.foot { padding-bottom: 54px; }
.sig { font: 600 24px/1.2 var(--hand); color: var(--ink); }
.mono { font: 400 34px/1 var(--script); color: var(--marker); margin-top: 10px; }
[data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
[data-reveal].in { opacity: 1; transform: none; }

.music-btn { position: fixed; right: max(14px, calc(50vw - 240px + 14px)); bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 50; width: 44px; height: 44px; border-radius: 50%; border: 0; background: color-mix(in srgb, var(--paper) 88%, transparent); box-shadow: 0 4px 14px rgba(0,0,0,.14); display: grid; place-items: center; cursor: pointer; }
.music-btn svg { width: 20px; height: 20px; fill: none; stroke: var(--ink); stroke-width: 1.6; }
.music-btn.playing svg { stroke: var(--marker); }

@media (max-width: 350px) {
  .sheet { padding: 34px 12px 18px; }
  .mname { font-size: 46px; }
  .d { font-size: 17px; }
  .names { font-size: calc(42px * var(--names-scale, 1)); }
}
@media (max-height: 700px) {
  .cover { padding-top: 34px; padding-bottom: 52px; }
  .sheet { padding-top: 32px; }
  .sheet::after { top: 22px; }
  .mname { font-size: 46px; }
  .month { margin: 2px 0 8px; }
  .d { height: 32px; }
  .hint { margin-top: 10px; }
  .who { margin-top: 14px; }
  .names { font-size: calc(44px * var(--names-scale, 1)); }
}
@media (prefers-reduced-motion: reduce) { .sheet, .hint, .cue i { animation: none; } }