/* Friend-date itinerary
   Tokens are the Solenne design system; this page swaps the accent from lilac to sage. */

:root{
  --ink-1:#332E29;--ink-2:#5C544C;--ink-3:#8A8076;
  --linen-1:#FBF8F2;--linen-2:#F5EFE5;--linen-3:#ECE2D2;
  --lilac-1:#F0EBF5;--lilac-2:#D9CDE7;--lilac-3:#A98FC7;--lilac-4:#7C619B;--lilac-5:#5A4374;
  --coral-1:#FBEAE0;--coral-2:#F0B490;--coral-3:#DE8352;--rose-1:#F6E3DF;--rose-2:#E5A79E;
  --sage-1:#EAEEE4;--sage-2:#AFBEA1;--sage-3:#6F7F5F;--sage-4:#46523C;
  --gold-1:#EBDDC0;--gold-2:#B9944E;

  --surface-page:var(--linen-1);--surface-card:#FFFFFF;--surface-warm:var(--linen-2);
  --text-body:var(--ink-1);--text-secondary:var(--ink-2);--text-muted:#786E64;/* ink-3 darkened to 4.5:1 on linen for the 12–14px lines */--text-on-accent:#FBF8F2;
  --accent:var(--sage-3);--accent-strong:var(--sage-4);--accent-soft:var(--sage-2);--accent-tint:var(--sage-1);
  --positive-tint:var(--sage-1);
  --border-soft:#E8DFD0;--border-strong:#CFC3AF;--focus-ring:var(--sage-4);

  --font-display:'Libre Caslon Text',Georgia,serif;
  --font-body:'EB Garamond',Georgia,serif;
  --type-display:40px;--type-title:28px;--type-heading:21px;
  --type-body-lg:19px;--type-body:17px;--type-caption:14px;--type-label:12.5px;
  --leading-display:1.08;--leading-title:1.2;--leading-body:1.55;
  --tracking-label:0.16em;

  --radius-xs:2px;--radius-m:10px;
  --shadow-card:0 1px 2px rgba(51,46,41,.04),0 6px 18px -8px rgba(51,46,41,.10);
  --shadow-lifted:0 14px 36px -14px rgba(51,46,41,.22);
  --ease-drift:cubic-bezier(.33,.02,.2,1);--dur-quick:160ms;--dur-drift:340ms;
}

/* ---- Base ---- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html,body{margin:0;padding:0;background:var(--linen-2)}
body{
  font-family:var(--font-body);font-size:var(--type-body);line-height:var(--leading-body);color:var(--text-body);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
.page{min-height:100vh;min-height:100svh;display:flex;justify-content:center}
.card{
  width:100%;max-width:430px;background:var(--surface-page);box-shadow:var(--shadow-card);
  min-height:100vh;min-height:100svh;overflow:hidden;position:relative;container-type:inline-size;
}
h1,h2,h3{font-weight:400}

/* ---- Type ritual ---- */
.eyebrow{
  margin:0;font-size:var(--type-label);font-weight:600;letter-spacing:var(--tracking-label);
  text-transform:uppercase;color:var(--accent);
}
.rule{display:flex;align-items:center;gap:14px;max-width:280px;margin:0 auto 22px}
.rule span{flex:1;height:1px;background:var(--border-soft)}
.rule i{font-style:normal;color:var(--ink-3);font-size:13px}

/* ---- Hero ---- */
.hero{
  position:relative;padding:150px 28px 40px;text-align:center;
  background:linear-gradient(to bottom,var(--sage-1),var(--surface-page) 78%);
}
.hero-floral{left:14px;top:18px;z-index:3}
.hero-sun{right:16px;top:44px;z-index:3}
.hero-fog{left:30%;top:30px;z-index:1;opacity:.72}
.hero-gull{left:52%;top:22px;z-index:3}
.hero > .eyebrow,.hero > .name,.hero > .when,.hero > .countdown{position:relative;z-index:2}
.name{font-family:var(--font-display);font-size:clamp(36px,10.5cqw,44px);line-height:var(--leading-display);color:var(--ink-1);margin:12px 0 8px}
.when{font-family:var(--font-display);font-style:italic;font-size:clamp(16px,4.5cqw,var(--type-heading));color:var(--ink-2);margin:0}
.countdown{
  margin:14px 0 0;min-height:1.5em;font-size:var(--type-caption);letter-spacing:var(--tracking-label);
  text-transform:uppercase;color:var(--text-muted);
}

/* ---- Host ---- */
.host{position:relative;padding:8px 28px 12px;text-align:center}
.host-bridge{left:-12px;top:150px}
.host .eyebrow{margin-bottom:16px}
.gaze-row{display:flex;justify-content:center}
.host-caption{font-family:var(--font-display);font-style:italic;color:var(--ink-2);margin:14px 0 0;font-size:var(--type-body-lg)}

/* ---- Itinerary ---- */
.itinerary{padding:36px 28px 8px}
.section-head{position:relative;text-align:center;margin-bottom:28px}
.head-cablecar{left:-10px;top:-30px}
.title{font-family:var(--font-display);font-size:var(--type-title);margin:8px 0 0;color:var(--ink-1)}
.stops{list-style:none;margin:0;padding:0;display:grid;gap:18px}
.stop{
  position:relative;background:var(--surface-card);border:1px solid var(--border-soft);border-radius:var(--radius-m);
  box-shadow:var(--shadow-card);padding:24px 22px 22px;
}
.stop-meta{margin:0;padding-right:60px;font-size:var(--type-label);font-weight:600;letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-muted)}
.stop-title{padding-right:60px;font-family:var(--font-display);font-size:var(--type-heading);color:var(--ink-1);margin:8px 0 6px}
.stop-note{margin:0;color:var(--text-secondary);font-size:var(--type-body);line-height:var(--leading-body)}
.stop-sticker{right:-6px;top:-16px}
.stop-moon{left:-10px;bottom:-14px}
.stop-star{left:44px;bottom:8px}

/* ---- RSVP ---- */
.rsvp{position:relative;padding:44px 28px 12px;text-align:center}
.rsvp-star-1{left:12%;top:58px}
.rsvp-star-2{right:14%;top:124px}
.display{font-family:var(--font-display);font-size:var(--type-display);line-height:var(--leading-display);margin:10px 0 8px;color:var(--ink-1)}
.rsvp-lede{color:var(--text-secondary);margin:0 0 26px}
.faces{display:flex;justify-content:center;align-items:flex-end;gap:2px;margin-bottom:8px}
.person{display:grid;justify-items:center;gap:6px}
.person-connor{transform:rotate(-4deg);--xfade-offset:0s}
.person-nikta{transform:rotate(3deg);--xfade-offset:-1.25s}
.person-anupam{transform:rotate(-3deg);--xfade-offset:-2.5s}
.person-sumukh{transform:rotate(4deg);--xfade-offset:-3.75s}
.person-name{margin:0;font-size:var(--type-label);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-muted)}
.faces-caption{font-family:var(--font-display);font-style:italic;color:var(--text-muted);font-size:var(--type-caption);margin:0 0 22px;min-height:1.4em}
.rsvp-accepted{
  background:var(--positive-tint);border:1px solid var(--border-soft);border-radius:var(--radius-m);padding:26px 22px;
  font-family:var(--font-display);font-style:italic;font-size:var(--type-body-lg);color:var(--sage-4);
  animation:rise var(--dur-drift) var(--ease-drift);
}
.rsvp-actions{display:grid;gap:12px;max-width:300px;margin:0 auto}
[hidden]{display:none !important}

/* Moods: which face is showing */
.face{position:absolute;inset:0;opacity:0;transition:opacity .22s var(--ease-drift)}
[data-mood="hopeful"] .face-hopeful,
[data-mood="nervous"] .face-nervous,
[data-mood="delighted"] .face-delighted{opacity:1}
.face .xf{position:absolute;inset:0;animation:solenne-xfade 7.5s linear infinite}
.face .xf-1{animation-delay:var(--xfade-offset,0s)}
.face .xf-2{animation-delay:calc(var(--xfade-offset,0s) - 5s)}
.face .xf-3{animation-delay:calc(var(--xfade-offset,0s) - 2.5s)}
@keyframes solenne-xfade{0%{opacity:1}29%{opacity:1}34%{opacity:0}94%{opacity:0}100%{opacity:1}}
[data-mood="nervous"] .face-nervous{animation:tremble .16s ease-in-out infinite}
@keyframes tremble{
  0%,100%{transform:translate(0,0) rotate(0)}
  25%{transform:translate(-.6px,.3px) rotate(-.7deg)}
  75%{transform:translate(.6px,-.3px) rotate(.7deg)}
}

/* ---- Footer ---- */
.footer{text-align:center;padding:40px 28px calc(48px + env(safe-area-inset-bottom))}
.footer .rule{max-width:260px;margin-bottom:16px}
.colophon{margin:0;font-family:var(--font-display);font-style:italic;color:var(--text-muted);font-size:var(--type-caption)}

/* ---- Motion primitives (driven by app.js) ---- */
.float{position:absolute;display:inline-block;will-change:transform}
.float-bob{display:block;will-change:transform}
.gaze{position:relative;display:inline-block;transform-style:preserve-3d;will-change:transform}
.gaze-host{width:160px;height:160px}
.gaze-rsvp{--face:clamp(64px,20cqw,84px);width:var(--face);height:var(--face)}
.gaze-face{position:absolute;inset:0}
.gaze-eyes{position:absolute;inset:0;pointer-events:none;will-change:transform}
/* LivePortrait puppets draw into a canvas over the static images, which stay as the fallback */
.gaze canvas.puppet{position:absolute;top:0;height:100%;pointer-events:none;transform-origin:50% 60%}
/* the static cut-outs share the puppets' wide (11:8) geometry and overflow the square slot sideways */
.gaze .gaze-face img.slot,.companion .gaze > img{position:absolute;top:0;left:-18.75%;width:137.5%;height:100%;object-fit:contain}
.gaze.has-puppet > .gaze-face,.gaze.has-puppet > img{visibility:hidden}

/* ---- Image slots ----
   A <div class="slot" data-label="…"> draws a dashed placeholder.
   Swap it for <img class="slot" src="assets/….png" alt=""> and the chrome disappears. */
.slot{position:relative;display:block;width:100%;height:100%;border-radius:6px;color:var(--ink-2);user-select:none;-webkit-user-select:none}
.slot::before{content:"";position:absolute;inset:0;border:1.5px dashed currentColor;border-radius:inherit;opacity:.28;background:rgba(51,46,41,.035)}
.slot::after{
  content:attr(data-label);position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  padding:8px;text-align:center;font-family:var(--font-display);font-style:italic;font-size:12px;line-height:1.25;opacity:.55;
}
img.slot{object-fit:contain;-webkit-user-drag:none}
.slot-76{width:76px;height:76px}
.slot-84{width:84px;height:84px}
.slot-96{width:96px;height:96px}
.slot-160{width:160px;height:160px}
.slot-fog{width:132px;height:88px}
.slot-gull{width:62px;height:62px}
.slot-cablecar{width:70px;height:54px}
.slot-bridge{width:92px;height:70px}
.slot-moon{width:44px;height:50px}
.slot-star{width:30px;height:30px}
.slot-star-s{width:20px;height:20px}

/* ---- Buttons ---- */
.btn{
  appearance:none;width:100%;min-height:44px;font-family:var(--font-body);font-size:12.5px;font-weight:600;
  letter-spacing:var(--tracking-label);text-transform:uppercase;padding:11px 22px;border-radius:var(--radius-xs);
  cursor:pointer;line-height:1;transition:all var(--dur-quick) var(--ease-drift);
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;
}
.btn-lg{min-height:48px;font-size:13.5px;padding:14px 30px}
.btn-primary{background:var(--accent);color:var(--text-on-accent);border:1px solid var(--accent)}
.btn-ghost{
  background:transparent;color:var(--accent);border:1px solid transparent;
  text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--accent-soft);
}
@media (hover:hover){
  .btn-primary:hover{background:var(--accent-strong);border-color:var(--accent-strong)}
  .btn-ghost:hover{text-decoration-color:var(--accent)}
}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
.dialog-footer .btn{width:auto}

/* ---- Dialog ---- */
.dialog{padding:0;border:0;background:transparent;width:calc(100% - 48px);max-width:440px;margin:auto;overflow:visible}
.dialog::backdrop{background:rgba(51,46,41,.35)}
.dialog[open]{animation:rise var(--dur-drift) var(--ease-drift)}
.dialog[open]::backdrop{animation:fade var(--dur-drift) ease}
.dialog-card{background:var(--surface-card);border-radius:var(--radius-m);box-shadow:var(--shadow-lifted);padding:32px;position:relative;text-align:left}
.dialog-close{
  position:absolute;top:14px;right:14px;border:0;background:none;cursor:pointer;color:var(--ink-3);
  font-size:14px;line-height:1;padding:6px;min-width:32px;min-height:32px;-webkit-tap-highlight-color:transparent;
}
.dialog-close:hover,.dialog-close:focus-visible{color:var(--ink-1)}
.dialog-close:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
.dialog .eyebrow{margin-bottom:8px}
.dialog-title{font-family:var(--font-display);font-size:var(--type-title);line-height:var(--leading-title);margin:0 0 12px;color:var(--ink-1)}
.dialog-body{margin:0;color:var(--text-secondary)}
.dialog-footer{display:flex;justify-content:flex-end;gap:12px;margin-top:24px}
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}

/* ---- Scroll companions (fixed at the edges; app.js drives enter/exit, bob, lean, mood) ---- */
.gallery{position:fixed;top:50%;z-index:20;pointer-events:none;display:grid;transform:translateY(-50%)}
.gallery-left{left:max(-18px,calc(50% - 215px - 40px))}
.gallery-right{right:max(-18px,calc(50% - 215px - 40px))}
.gallery-right .companion + .companion{margin-top:-14px}
.companion{--c:clamp(64px,19vw,80px);width:var(--c);height:var(--c);will-change:transform;transform:translateX(140%)}
/* while companions run the show, the inline RSVP faces stay hidden until the companions have taken their seats */
body.has-companions .faces{opacity:0}
body.has-companions .rsvp.is-docked .faces{opacity:1}
.gallery-left .companion{transform:translateX(-140%)}
.companion .gaze{width:100%;height:100%;filter:drop-shadow(0 6px 10px rgba(51,46,41,.16))}
.companion-connor .gaze{rotate:-4deg}
.companion-nikta .gaze{rotate:3deg}
.companion-anupam .gaze{rotate:-3deg}
.companion-sumukh .gaze{rotate:4deg}
.companion img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;transition:opacity .22s var(--ease-drift);-webkit-user-drag:none}
[data-mood="hopeful"] > .gaze > .c-hopeful,
[data-mood="curious"] > .gaze > .c-curious,
[data-mood="peek"] > .gaze > .c-peek,
[data-mood="nervous"] > .gaze > .c-nervous,
[data-mood="delighted"] > .gaze > .c-delighted{opacity:1}

/* ---- Petals (on accept) ---- */
.petals{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:50}
.petal{
  position:absolute;top:-20px;left:var(--x);width:11px;height:15px;background:var(--c);opacity:0;
  border-radius:70% 70% 55% 55% / 80% 80% 45% 45%;
  animation:petal-fall var(--d) var(--delay) cubic-bezier(.3,.1,.6,1) forwards;
}
@keyframes petal-fall{
  0%{opacity:0;transform:translate(0,0) rotate(0) scale(var(--s))}
  10%{opacity:.95}
  100%{opacity:.85;transform:translate(var(--drift),108vh) rotate(var(--r)) scale(var(--s))}
}

/* ---- Reduced motion: everything settles ---- */
@media (prefers-reduced-motion:reduce){
  .face .xf{animation:none}
  .xf-2,.xf-3{display:none}
  [data-mood="nervous"] .face-nervous{animation:none}
  .face,.companion img{transition:none}
  .dialog[open],.dialog[open]::backdrop,.rsvp-accepted{animation:none}
}