/* Cashtin & Daryn — Morning at Ten (Storybook) */

:root{
  --paper:oklch(0.3 0.06 250);
  --edge:oklch(0.22 0.04 255 / .85);
  --halo:oklch(0.35 0.07 250 / .7);
  --scrim:oklch(0.45 0.08 248 / .44);
  --veil:oklch(0.32 0.06 200 / .38);
  --foot:oklch(0.3 0.07 170 / .55);
  --ink:oklch(0.97 0.012 95);
  --ink-hi:oklch(0.99 0.008 95);
  --ink-lo:oklch(0.93 0.02 95);
  --accent:oklch(0.87 0.11 90);
  --accent-dim:oklch(0.9 0.05 95);
  --mute:oklch(0.45 0.06 250);
  --base:oklch(0.68 0.09 245);
  --desk:linear-gradient(oklch(0.88 0.03 235), oklch(0.79 0.05 240));
}

html,body{margin:0;padding:0}
body{background:var(--base);font-family:-apple-system,'Helvetica Neue',sans-serif}

.morn{color:var(--ink)}
/* no overflow:hidden here: it would break the sticky particle canvas */
.sheet{min-height:100vh;position:relative;background:var(--base)}
/* viewport-sized sticky canvas: iOS caps canvas dimensions, so it can't span the whole sheet */
.sheet canvas{position:sticky;top:0;left:0;width:100%;display:block;
  pointer-events:none;z-index:3}

/* the painted cover: first viewport, animated painting */
.cover{position:relative;min-height:100vh;overflow:hidden;
  display:flex;flex-direction:column;justify-content:center}
.cover .bg{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center bottom;pointer-events:none;
  transition:opacity 1.1s linear}
.cover .bg-b{opacity:0}
.cover .frame{padding-bottom:6rem}

/* the next page of the book: cream paper, dark ink */
.page{position:relative;z-index:2;
  --halo:oklch(0 0 0 / 0);
  --edge:oklch(0 0 0 / 0);
  --ink:oklch(0.37 0.05 250); --ink-hi:oklch(0.28 0.05 250); --ink-lo:oklch(0.47 0.04 250);
  --accent:oklch(0.56 0.11 75); --accent-dim:oklch(0.68 0.07 80);
  --veil:oklch(0.99 0.005 95 / .6); --mute:oklch(0.88 0.02 95);
  --paper:oklch(0.97 0.015 95);
  color:var(--ink);
  background:linear-gradient(oklch(0.965 0.018 95), oklch(0.93 0.03 92));
  border-top:1px solid oklch(0.85 0.06 85);
  box-shadow:inset 0 18px 30px -22px oklch(0.3 0.05 250 / .5)}
.page .frame{padding-top:3.4rem}
.page .frame::before{content:none}

/* desktop: the invite hangs like a print on a tinted wall */
@media (min-width:900px){
  .morn{display:grid;place-items:start center;min-height:100vh;
    padding:4rem 1.5rem 5rem;background:var(--desk)}
  .sheet{width:min(560px,92vw);min-height:0;border-radius:3px;
    box-shadow:0 40px 90px -30px oklch(0.25 0.03 60 / .45),
               0 4px 18px oklch(0.25 0.03 60 / .18)}
  .sheet .frame{padding:clamp(3rem,5vw,4.5rem) 2rem 6.5rem}
  .cover{border-radius:3px 3px 0 0}
  .page{border-radius:0 0 3px 3px}
}

.frame{position:relative;max-width:680px;margin:0 auto;z-index:2;
  padding:clamp(3rem,9vw,6rem) 1.5rem 7rem;text-align:center}
.frame::before{content:"";position:absolute;inset:-2rem 0;z-index:-1;
  background:radial-gradient(ellipse 130% 70% at 50% 42%, var(--scrim), transparent 78%)}
.frame>*{opacity:0;animation:riseUp 1.1s cubic-bezier(.16,1,.3,1) forwards}
.frame>:nth-child(2){animation-delay:.09s}
.frame>:nth-child(3){animation-delay:.18s}
.frame>:nth-child(4){animation-delay:.27s}
.frame>:nth-child(5){animation-delay:.36s}
.frame>:nth-child(6){animation-delay:.45s}
.frame>:nth-child(7){animation-delay:.54s}
.frame>:nth-child(8){animation-delay:.63s}
.frame>:nth-child(9){animation-delay:.72s}
@keyframes riseUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

.hair{width:1px;height:64px;margin:0 auto 2rem;
  background:linear-gradient(transparent, var(--accent))}
.top{font:400 .7rem/1.9 Didot,serif;letter-spacing:.36em;text-transform:uppercase;
  color:var(--ink-lo);margin:0 0 2rem}
h1{font-family:Didot,Baskerville,serif;font-weight:400;font-size:clamp(2.6rem,9vw,4.6rem);
  line-height:1.12;margin:0;color:var(--ink-hi);text-wrap:balance;
  text-shadow:0 2px 4px var(--edge),0 0 34px var(--halo),0 0 12px var(--halo)}
h1 .amp{display:block;font-family:'Snell Roundhand',cursive;font-size:.5em;
  color:var(--accent);margin:.15em 0}
.top,.sub,.when,.howdy,.confirm,.rsvp-label,.chapter{
  text-shadow:
    0 1px 2px var(--edge),0 -1px 2px var(--edge),
    1px 0 2px var(--edge),-1px 0 2px var(--edge),
    0 2px 6px var(--edge),0 0 22px var(--halo)}
.sub{font-family:Baskerville,serif;font-style:italic;font-size:1.1rem;
  color:var(--ink-lo);margin:2rem 0 0}
.when{margin-top:3rem;font:400 .82rem/2.1 Didot,serif;letter-spacing:.26em;
  text-transform:uppercase;color:var(--ink)}
.divider{display:flex;align-items:center;gap:1rem;justify-content:center;margin:3.2rem 0}
.divider::before,.divider::after{content:"";width:70px;height:1px;
  background:var(--accent-dim)}
.divider span{color:var(--accent);font-size:.8rem;text-shadow:0 0 12px var(--halo)}
.howdy{font-family:Baskerville,serif;font-style:italic;font-size:1.1rem;margin:0 0 1.5rem}
.rsvp-title{font-family:Baskerville,serif;font-style:italic;font-weight:400;
  font-size:clamp(2.2rem,7vw,3rem);letter-spacing:.06em;
  margin:-1.4rem 0 2rem;color:var(--ink-hi)}
.tipins.kids{grid-template-columns:1fr 1fr;max-width:400px;gap:1.2rem}

/* the details */
.details{margin:0 auto 2.4rem;max-width:460px;display:flex;flex-direction:column;gap:1.7rem}
.details div{margin:0}
.details dt{font:400 .64rem/2 Didot,serif;letter-spacing:.3em;text-transform:uppercase;
  color:var(--accent)}
.details dd{margin:0;font-family:Baskerville,serif;font-size:1.08rem;line-height:1.55;
  color:var(--ink)}
.details a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.cal-btn{display:inline-block;font:400 .76rem/1 Didot,serif;letter-spacing:.22em;
  text-transform:uppercase;padding:1rem 1.6rem;color:var(--ink);
  background:var(--veil);border:1px solid var(--accent-dim);text-decoration:none;
  transition:background .3s}
.cal-btn:hover{background:var(--mute)}
.cal-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.deadline{font-family:Baskerville,serif;font-style:italic;font-size:1rem;
  color:var(--ink-lo);margin:-1rem 0 2rem}
.scroll-cue{position:absolute;bottom:1.4rem;left:50%;z-index:3;
  transform:translateX(-50%);background:none;border:0;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:.55rem;
  color:oklch(0.92 0.1 90);padding:.6rem 1rem;
  filter:drop-shadow(0 1px 2px oklch(0.22 0.04 255 / .95))
         drop-shadow(0 2px 8px oklch(0.22 0.04 255 / .7));
  animation:cueBob 2.2s ease-in-out infinite}
.scroll-cue .cue-label{font:400 .66rem/1 Didot,serif;letter-spacing:.32em;
  text-transform:uppercase;color:oklch(0.97 0.03 92);padding-left:.32em}
.scroll-cue .c2{opacity:.55}
.scroll-cue:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@keyframes cueBob{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,9px)}}

/* ===== The Story So Far — book plates & tipped-in photos ===== */
.chapter{font:400 .78rem/1.9 Didot,serif;letter-spacing:.34em;text-transform:uppercase;
  color:var(--ink);margin:0 0 2.6rem}
.plate{margin:0 auto 3rem;max-width:520px}
.plate img{width:100%;display:block;border-radius:2px;
  /* feathered painted edge + palette harmonizing tint */
  mask-image:radial-gradient(115% 115% at 50% 50%, black 58%, transparent 82%);
  filter:saturate(.92) contrast(.97) sepia(.06)}
.plate figcaption{margin-top:1.2rem;font-family:Baskerville,serif;font-style:italic;
  font-size:1.02rem;color:var(--ink-lo);text-shadow:0 0 14px var(--halo)}
.plate .kicker{display:block;font:400 .62rem/2 Didot,serif;font-style:normal;
  letter-spacing:.3em;text-transform:uppercase;color:var(--accent)}
.tipins{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:1.6rem;margin:0 auto 1rem;max-width:560px}
.tipin{margin:0;background:oklch(0.96 0.015 95);padding:.55rem;
  box-shadow:0 10px 26px -8px oklch(0.25 0.05 250 / .5);transform:rotate(-1.4deg)}
.tipin:nth-child(2n){transform:rotate(1.1deg)}
.tipin img{width:100%;display:block;filter:saturate(.92) contrast(.97) sepia(.06)}
.tipin figcaption{margin-top:.6rem;font-family:Baskerville,serif;font-style:italic;
  font-size:.86rem;color:oklch(0.4 0.05 250);text-shadow:none}

/* ===== RSVP flow ===== */
.rsvp-label{display:block;font:400 .68rem/1.9 Didot,serif;letter-spacing:.3em;
  text-transform:uppercase;color:var(--ink-lo);margin-bottom:1rem}
.dd{position:relative;max-width:360px;margin:0 auto}
.dd-btn{width:100%;display:flex;justify-content:space-between;align-items:center;gap:1rem;
  font:400 .8rem/1.4 Didot,serif;letter-spacing:.14em;
  padding:1.15rem 1.4rem;color:var(--ink);text-align:left;
  background:var(--veil);border:1px solid var(--accent-dim);border-radius:0;cursor:pointer}
.dd-btn .dd-arrow{color:var(--accent);font-size:.8rem;transition:transform .25s}
.dd.open .dd-arrow{transform:rotate(180deg)}
.dd-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.dd-list{position:absolute;top:calc(100% + .6rem);left:0;right:0;z-index:10;
  margin:0;padding:.9rem 0 1.1rem;list-style:none;text-align:left;
  background:oklch(0.98 0.008 95);border:1px solid var(--accent-dim);
  box-shadow:0 18px 44px -12px oklch(0.25 0.05 250 / .45);
  max-height:360px;overflow-y:auto;
  transform-origin:top;animation:ddOpen .22s cubic-bezier(.16,1,.3,1)}
.dd-list[hidden]{display:none}
.dd.up .dd-list{top:auto;bottom:calc(100% + .6rem);transform-origin:bottom;
  animation-name:ddOpenUp}
@keyframes ddOpen{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@keyframes ddOpenUp{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.dd-group{font:400 .62rem/2 Didot,serif;letter-spacing:.28em;text-transform:uppercase;
  color:var(--accent);padding:1.1rem 1.5rem .4rem}
.dd-group:first-child{padding-top:.4rem}
.dd-list [role=option]{font-family:Baskerville,serif;font-size:1rem;line-height:1.4;
  padding:.85rem 1.5rem;cursor:pointer;color:oklch(0.32 0.05 250)}
.dd-list [role=option]:hover,.dd-list [role=option]:focus{
  background:oklch(0.93 0.035 90);outline:none}
.dd-list [role=option][aria-selected="true"]{color:oklch(0.5 0.11 75)}
.dd-list [role=option][aria-selected="true"]::after{content:" ✦";font-size:.7em}
.party-confirm{margin-top:1.6rem}
.party-confirm[hidden]{display:none}
.party-name{font-family:Baskerville,serif;font-style:italic;font-size:1.15rem;
  margin:0 0 1.2rem;color:var(--ink-hi);text-shadow:0 0 14px var(--halo)}
.rsvp-pair{display:flex;gap:.9rem;justify-content:center;flex-wrap:wrap}
.rsvp-pair button{font:400 .76rem/1 Didot,serif;letter-spacing:.22em;text-transform:uppercase;
  padding:1rem 1.6rem;cursor:pointer;background:var(--veil);
  border:1px solid var(--accent-dim);color:var(--ink);
  transition:background .3s,color .3s,border-color .3s}
.rsvp-pair button.yes.sel{background:var(--accent);color:var(--paper);border-color:var(--accent)}
.rsvp-pair button.no.sel{background:var(--mute);border-color:var(--mute)}
.rsvp-pair button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.confirm{min-height:1.5rem;margin-top:1.5rem;font-family:Baskerville,serif;
  font-style:italic;font-size:1.05rem;color:var(--ink-lo)}
.confirm.pop{animation:pop .9s cubic-bezier(.16,1,.3,1)}
@keyframes pop{0%{opacity:0;transform:scale(.9) translateY(8px)}
  60%{opacity:1;transform:scale(1.03)}100%{transform:none}}
.change{background:none;border:0;margin-top:.4rem;cursor:pointer;
  font-family:Baskerville,serif;font-style:italic;font-size:.85rem;
  color:var(--ink-lo);text-decoration:underline;text-underline-offset:3px}
.change[hidden]{display:none}

@media (prefers-reduced-motion: reduce){
  .frame>*{animation:none;opacity:1}
  .confirm.pop{animation:none}
  .scroll-cue{animation:none}}