/* ============================================================================
   slumbook.css - the Slumbook: everyone's shared notes, as pages torn from a
   90s slumbook, opened over the page on warm kraft paper.

   Pages: yellowed lined paper, a red margin rule, punched holes, printed
   "Name:" and "Message to Merce & Ian:" fields answered in blue pen, the
   photo taped on with gold washi tape, a small doodle in the corner. Desktop
   gets three columns filled shortest-first (js/slumbook.js), nine at a time;
   a phone gets one whole page per screen, turned with a swipe.
   ============================================================================ */

/* ---- the way in, under the RSVP card ---- */
.slb-teaser{display:flex;align-items:center;gap:1rem;max-width:560px;margin:1.6rem auto 0;padding:.9rem 1.1rem;
  text-align:left;text-decoration:none;color:var(--ink);background:#f3e7cf;border:1px solid rgba(143,113,48,.3);border-radius:10px;
  transition:translate .25s ease,box-shadow .25s ease}
.slb-teaser:hover{translate:0 -2px;box-shadow:0 12px 24px -16px rgba(90,60,30,.6)}
.slb-teaser:focus-visible{outline:2px solid var(--olive);outline-offset:3px}
.slb-teaser-page{position:relative;flex:none;width:44px;height:54px;rotate:-5deg;border-radius:2px;
  background:repeating-linear-gradient(to bottom,transparent 0 8px,rgba(80,120,170,.3) 8px 9px) 0 6px,#fdf8e6;
  box-shadow:0 4px 8px -4px rgba(90,60,30,.6)}
.slb-teaser-page::before{content:"";position:absolute;left:9px;top:0;bottom:0;width:1px;background:rgba(200,70,70,.5)}
.slb-teaser-t{display:flex;flex-direction:column;font-family:var(--font-text);font-size:14px;color:var(--ink-mute)}
.slb-teaser-t b{font-family:var(--font-display);font-weight:500;font-size:1.3rem;color:var(--ink)}
.slb-teaser-t::after{content:"\2192";display:none}

/* ---- the book ---- */
.slb{position:fixed;inset:0;z-index:90;display:flex;flex-direction:column;overflow-y:auto;overscroll-behavior:contain;
  background:
    radial-gradient(circle at 20% 30%,rgba(255,255,255,.10) 0 1px,transparent 1.5px) 0 0/7px 7px,
    radial-gradient(circle at 70% 60%,rgba(120,80,40,.07) 0 1px,transparent 1.6px) 0 0/9px 9px,
    radial-gradient(ellipse at 50% 0%,rgba(255,250,235,.55),transparent 65%),
    linear-gradient(160deg,#e3cba4,#d6b88d 55%,#dcc198)}
.slb[hidden]{display:none}
/* the way back on the left, where a back arrow belongs; the title centred
   between it and an empty column the same width */
.slb-head{position:sticky;top:0;z-index:5;flex:none;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;
  padding:calc(12px + env(safe-area-inset-top,0px)) 20px 12px;
  background:rgba(251,248,242,.94);border-bottom:1px solid rgba(36,28,23,.12)}
.slb-title{display:flex;align-items:center;gap:12px;margin:0;font-family:var(--font-display);font-size:1.6rem;line-height:1.1;color:var(--ink)}
.slb-title small{display:block;font-family:var(--font-ui);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--olive)}
.slb-mono{height:30px;color:var(--burgundy)}
.slb-back{justify-self:start;display:inline-flex;align-items:center;gap:.5em;min-height:42px;padding:0 1.1rem;
  border:1px solid rgba(36,28,23,.2);border-radius:999px;background:#fff;color:var(--ink);cursor:pointer;
  font-family:var(--font-ui);font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;
  transition:border-color .25s ease,box-shadow .25s ease}
.slb-back span[aria-hidden]{font-size:16px;letter-spacing:0}
.slb-back:hover{border-color:rgba(36,28,23,.45);box-shadow:0 6px 14px -8px rgba(90,60,30,.5)}
.slb-back:focus-visible,.slb-more:focus-visible,.slb-arrow:focus-visible{outline:2px solid var(--olive);outline-offset:2px}
.slb-lead{flex:none;max-width:640px;margin:24px auto 0;padding:0 20px;text-align:center;
  font-family:var(--font-display);font-style:italic;font-size:1.15rem;line-height:1.45;color:#4a3a28}
.slb-state{flex:none;margin:30px auto 0;padding:0 20px;text-align:center;font-family:var(--font-text);font-size:15px;color:#5f4a32}
.slb-state:empty{display:none}
.slb-state a{color:var(--burgundy)}
/* loading: paw prints walk left to right, left foot, right foot, and fade
   behind the dog; under reduced motion they simply stand there */
.slb-walk{display:flex;justify-content:center;align-items:center;gap:12px;height:34px;margin:0 auto 8px}
.slb-walk svg{width:15px;height:14px;fill:var(--burgundy);rotate:90deg;opacity:0;
  animation:slbStep 2.2s ease-out infinite}
.slb-walk svg:nth-child(odd){translate:0 -7px}
.slb-walk svg:nth-child(even){translate:0 7px}
.slb-walk svg:nth-child(2){animation-delay:.3s}
.slb-walk svg:nth-child(3){animation-delay:.6s}
.slb-walk svg:nth-child(4){animation-delay:.9s}
.slb-walk svg:nth-child(5){animation-delay:1.2s}
@keyframes slbStep{0%{opacity:0;transform:scale(.6)}8%{opacity:.75;transform:none}45%{opacity:.75}75%,100%{opacity:0}}

/* ---- a page ---- */
.slb-pg{position:relative;padding:22px 22px 30px 46px;rotate:var(--r,0deg);
  background:
    linear-gradient(90deg,transparent 33px,rgba(200,70,70,.45) 33px,rgba(200,70,70,.45) 35px,transparent 35px),
    repeating-linear-gradient(to bottom,transparent 0,transparent 29px,rgba(80,120,170,.28) 29px,rgba(80,120,170,.28) 30px),
    linear-gradient(#fdf8e6,#f8efd6);
  background-position:0 0,0 14px,0 0;
  box-shadow:0 1px 1px rgba(90,60,30,.18),0 14px 24px -12px rgba(90,60,30,.55);border-radius:2px 3px 3px 2px}
/* punched holes down the margin */
.slb-pg::before{content:"";position:absolute;left:12px;top:26px;bottom:26px;width:10px;
  background:radial-gradient(circle at 5px 5px,#d6b88d 4px,transparent 4.5px) 0 0/10px 70px repeat-y}
.slb-f{font-family:var(--font-ui);font-size:9.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#9a8a6c;line-height:30px}
.slb-v{font-family:var(--font-hand);font-size:1.75rem;line-height:30px;color:#2d3f6e;overflow-wrap:anywhere}
.slb-name{display:flex;gap:10px;align-items:baseline}
.slb-msg{margin:0;white-space:pre-wrap}
.slb-photo{position:relative;display:block;width:82%;margin:10px auto 14px;padding:7px;background:#fff;rotate:var(--pr,-2deg);
  box-shadow:0 6px 14px -8px rgba(0,0,0,.5)}
.slb-photo img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;background:#eee4cf}
.slb-photo::before,.slb-photo::after{content:"";position:absolute;top:-10px;width:62px;height:20px;opacity:.85;
  background:repeating-linear-gradient(45deg,rgba(201,162,75,.7) 0 6px,rgba(220,190,120,.7) 6px 12px)}
.slb-photo::before{left:-14px;rotate:-38deg}
.slb-photo::after{right:-14px;rotate:34deg}
.slb-doodle{position:absolute;right:14px;bottom:10px;width:34px;height:34px;opacity:.6}
.slb-new{position:absolute;top:-10px;right:-8px;padding:.25rem .6rem;border-radius:3px;rotate:6deg;background:var(--burgundy);color:#fff;
  font-family:var(--font-ui);font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  box-shadow:0 4px 10px -4px rgba(0,0,0,.5)}

/* ---- DESKTOP: three columns, nine pages at a time ---- */
.slb-grid{display:flex;gap:26px;align-items:flex-start;width:100%;max-width:1120px;margin:0 auto;padding:26px 20px 20px}
.slb-col{flex:1;min-width:0;display:flex;flex-direction:column;gap:30px}
.slb-more{display:block;flex:none;margin:10px auto 60px;padding:.8rem 1.6rem;border:0;border-radius:999px;background:var(--burgundy);
  color:#fff;cursor:pointer;font-family:var(--font-ui);font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  box-shadow:0 10px 20px -10px rgba(78,25,38,.7)}
.slb-more[hidden],.slb-deck[hidden]{display:none}

/* ---- PHONE: one whole page per screen, turned with a swipe ---- */
@media (max-width:760px){
  .slb{overflow:hidden}
  .slb-head{padding-left:14px;padding-right:14px;gap:8px}
  .slb-back{padding:0 .9rem}
  .slb-back-long{display:none}
  .slb-title{font-size:1.35rem;gap:8px}
  .slb-mono{height:26px}
  .slb-lead{margin:14px auto 0;font-size:1rem}
  .slb-grid{flex:1;min-height:0;align-items:stretch;gap:0;padding:12px 0 4px;overflow-x:auto;overflow-y:hidden;
    scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .slb-grid::-webkit-scrollbar{display:none}
  .slb-slot{flex:0 0 100%;scroll-snap-align:center;overflow-y:auto;display:flex;flex-direction:column;
    padding:14px 22px 18px}
  /* a page keeps its full height and a long note scrolls inside the screen;
     auto margins centre a short one without clipping the top of a tall one */
  .slb-slot .slb-pg{flex:none;margin:auto 0;min-height:min(100%,560px)}
  .slb-more{display:none}
  .slb-deck{flex:none;display:flex;align-items:center;justify-content:center;gap:18px;padding:8px 0 calc(12px + env(safe-area-inset-bottom,0px))}
  .slb-arrow{width:44px;height:44px;border:1px solid rgba(36,28,23,.25);border-radius:50%;background:rgba(255,255,255,.75);
    font-size:20px;cursor:pointer;color:var(--ink)}
  .slb-arrow:disabled{opacity:.35}
  .slb-pos{min-width:80px;text-align:center;font-family:var(--font-ui);font-size:13px;color:#4a3a28}
}
@media (min-width:761px){ .slb-deck{display:none !important} }
/* ---- the rail's way in: a little lined page off the end of the trail ---- */
.rail-slb{position:absolute;left:13px;top:calc(100% + 26px);pointer-events:auto;text-decoration:none;line-height:1;display:block;padding:4px 0}
.rail-slb-page{display:block;width:11px;height:14px;rotate:-6deg;border-radius:1px;opacity:.7;
  background:repeating-linear-gradient(to bottom,transparent 0 3px,rgba(80,120,170,.45) 3px 4px) 0 2px,#fdf8e6;
  box-shadow:0 0 0 1px rgba(36,28,23,.25);transition:opacity .4s ease,rotate .4s ease}
.rail-slb:hover .rail-slb-page,.rail-slb:focus-visible .rail-slb-page{opacity:1;rotate:4deg}
.rail-slb:focus-visible{outline:none}
/* the trail's line carries on down to it (the progress fill stops at the RSVP) */
.rail-slb::before{content:"";position:absolute;left:-13px;top:-26px;bottom:0;width:1px;background:var(--rule-ink)}
.rail-slb:focus-visible .rail-slb-page{box-shadow:0 0 0 2px var(--burgundy)}
.rail:hover .rail-slb .rail-l,.rail:focus-within .rail-slb .rail-l{opacity:.55}
.rail .rail-slb:hover .rail-l,.rail .rail-slb:focus-visible .rail-l{opacity:1;color:var(--ink)}

@media (prefers-reduced-motion:reduce){
  .slb-teaser{transition:none}
  .slb-walk svg{animation:none;opacity:.5}
  .slb-back,.rail-slb-page{transition:none}
}