/* Wedding RSVP — εγκεκριμένο design system (docs/03). Η βάση είναι το
   prototype· στο τέλος προστίθενται runtime states & προσβασιμότητα. */
:root{
  --gold:#C6A15B; --gold-deep:#A07C2C; --gold-soft:#E3CFA4;
  --navy:#24384F; --blue:#4E6E8C; --blue-mid:#8FA9C0;
  --ink:#2B3440; --muted:#8B8578; --cream:#FBF8F2; --line:#E9E0CE;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
[hidden]{display:none !important;}
html{scroll-behavior:smooth;}
body{background:var(--cream);color:var(--ink);font-family:'Inter',system-ui,sans-serif;
  overflow-x:hidden;-webkit-font-smoothing:antialiased;}
::selection{background:var(--gold-soft);color:var(--navy);}

/* ============ ΕΝΙΑΙΟ ΦΟΝΤΟ ΓΙΑ ΟΛΗ ΤΗ ΣΕΛΙΔΑ (docs/03 §1) ============ */
#page{position:relative;overflow:hidden;
  background:linear-gradient(180deg,
    #FBF8F2 0%, #F2F4F5 9%, #E8EFF4 18%, #F4F0E7 27%,
    #EDF1F4 37%, #DFE9F0 47%, #E9EEF2 56%, #F5EFE3 66%,
    #E7EEF3 76%, #F1F0EA 86%, #F7F1E6 94%, #EFE7D7 100%);}
#atmos,#garden,#stars{position:absolute;inset:0;pointer-events:none;}
#atmos{z-index:0;} #garden{z-index:2;} #stars{z-index:3;}
#atmos .wash{position:absolute;border-radius:50%;filter:blur(60px);will-change:transform;
  animation:washin 2.2s ease-out both;}
@keyframes washin{from{opacity:0}}
#garden .flora{position:absolute;will-change:transform;}
/* Εισαγμένα florals (flora.js): τα stroke-based κρατούν λεπτή, σταθερή γραμμή
   σε κάθε κλίμακα· τα fill-based μένουν καθαρά γεμίσματα. */
.flora-art .fl-stroke path{vector-effect:non-scaling-stroke;stroke-width:1.05;fill:none;stroke:#C6A15B;}
.flora-art .fl-fill path{stroke:none;}
#stars i{position:absolute;display:block;border-radius:50%;background:var(--gold-soft);
  animation:tw 6s ease-in-out infinite;}
@keyframes tw{0%,100%{opacity:.10;transform:scale(.6)}50%{opacity:.8;transform:scale(1.2)}}

/* ============ scenes ============ */
.scene{position:relative;min-height:100svh;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;padding:104px 32px;}
.scene .inner{position:relative;z-index:6;width:100%;max-width:440px;}
.eyebrow{font-size:10.5px;letter-spacing:.38em;text-transform:uppercase;color:var(--muted);}

/* ============ reveal / draw ============ */
.rv{opacity:0;transform:translateY(28px);transition:opacity 1.1s cubic-bezier(.2,.7,.2,1),transform 1.1s cubic-bezier(.2,.7,.2,1);}
.rv.in{opacity:1;transform:none;}
.rv.d1{transition-delay:.14s}.rv.d2{transition-delay:.28s}.rv.d3{transition-delay:.42s}.rv.d4{transition-delay:.56s}
.draw path,.draw circle,.draw line{stroke:var(--gold);fill:none;stroke-linecap:round;}

/* ============ hero ============ */
#hero .mono{width:74px;height:74px;border:1px solid rgba(198,161,91,.5);border-radius:50%;
  display:flex;align-items:center;justify-content:center;margin:0 auto 22px;
  font-family:'Playfair Display',serif;font-size:19px;letter-spacing:.08em;color:var(--gold-deep);
  background:rgba(255,255,255,.4);backdrop-filter:blur(2px);}
#hero .once{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:20px;color:var(--blue);opacity:.85;}
#hero h1{font-family:'Playfair Display',serif;font-weight:400;font-size:34px;line-height:1.3;color:var(--navy);margin-top:12px;}
#hero .guest{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:clamp(36px,10.5vw,42px);color:var(--gold-deep);
  line-height:1.15;margin-top:8px;min-height:1.2em;opacity:0;filter:blur(7px);transform:scale(.975);
  transition:opacity 1.2s ease .1s,filter 1.2s ease .1s,transform 1.2s ease .1s;}
#hero .guest.ready{opacity:1;filter:blur(0);transform:none;}
#hero .date{margin-top:28px;font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:var(--blue);}
/* Η ημερομηνία «ανοίγει» τα γράμματά της καθώς εμφανίζεται — τελετουργικό άνοιγμα. */
#hero .date.rv{letter-spacing:.48em;transition:opacity 1.1s cubic-bezier(.2,.7,.2,1),transform 1.1s cubic-bezier(.2,.7,.2,1),letter-spacing 1.8s cubic-bezier(.2,.7,.2,1);}
#hero .date.rv.in{letter-spacing:.28em;}
#hero .mono.rv{transform:translateY(14px) scale(.88);}
#hero .mono.rv.in{transform:none;}
.scrollcue{opacity:0;animation:cuein 1.2s ease 2.3s both;}
@keyframes cuein{to{opacity:1}}
.arch{position:absolute;top:9%;left:50%;transform:translateX(-50%);z-index:1;opacity:.6;
  -webkit-mask-image:linear-gradient(180deg,#000 62%,transparent 96%);
  mask-image:linear-gradient(180deg,#000 62%,transparent 96%);}
.scrollcue{position:absolute;bottom:calc(38px + env(safe-area-inset-bottom, 0px));left:50%;transform:translateX(-50%);z-index:8;
  display:flex;flex-direction:column;align-items:center;gap:10px;}
.scrollcue span{font-size:8.5px;letter-spacing:.32em;color:var(--muted);}
.scrollcue i{display:block;width:1px;height:44px;background:linear-gradient(var(--gold),transparent);
  animation:cue 2.6s ease-in-out infinite;transform-origin:top;}
@keyframes cue{0%,100%{transform:scaleY(.3);opacity:.35}50%{transform:scaleY(1);opacity:1}}

/* ============ text ============ */
h2.title{font-family:'Playfair Display',serif;font-weight:400;font-size:32px;line-height:1.3;margin:14px 0 20px;color:var(--navy);text-wrap:balance;}
p.body{font-family:'Cormorant Garamond',serif;font-size:20px;line-height:1.8;color:#54636F;}
p.body em{font-style:italic;color:var(--gold-deep);}
/* Αρχίγραμμα παραμυθιού στο πρώτο κεφάλαιο — σελίδα βιβλίου: αριστερή στοίχιση. */
p.body.lead{text-align:left;text-wrap:pretty;}
p.body.lead::first-letter{font-family:'Playfair Display',serif;font-size:52px;line-height:.9;
  float:left;padding:5px 9px 0 0;color:var(--gold-deep);}
.hair{width:46px;height:1px;background:var(--gold);opacity:.5;margin:26px auto;}

/* ============ cards ============ */
.card{position:relative;border:1px solid var(--line);background:rgba(255,255,255,.7);backdrop-filter:blur(9px);
  padding:34px 26px;box-shadow:0 14px 38px rgba(78,110,140,.08);}
@supports not (backdrop-filter: blur(9px)){.card{background:rgba(255,255,255,.92);}}
/* Χρυσές γωνίες — διακριτική πολυτέλεια χαρτικών. */
.card::before,.card::after{content:'';position:absolute;width:15px;height:15px;border:0 solid var(--gold);opacity:.7;}
.card::before{top:7px;left:7px;border-top-width:1px;border-left-width:1px;}
.card::after{bottom:7px;right:7px;border-bottom-width:1px;border-right-width:1px;}
.card .time{font-size:10px;letter-spacing:.3em;color:var(--gold-deep);text-transform:uppercase;}
.card h3{font-family:'Playfair Display',serif;font-weight:400;font-size:25px;margin:10px 0 6px;color:var(--navy);}
.card .place{font-family:'Cormorant Garamond',serif;font-size:18px;color:#63707C;line-height:1.55;}
.card .row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:18px;}
.btn-ghost{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 20px;
  min-height:44px;border:1px solid var(--gold);color:var(--gold-deep);background:transparent;cursor:pointer;
  font-family:'Inter',system-ui,sans-serif;font-size:10px;letter-spacing:.24em;text-transform:uppercase;
  text-decoration:none;transition:background .3s ease;}
.btn-ghost:hover{background:rgba(198,161,91,.08);}
.btn-ghost.blue{border-color:var(--blue-mid);color:var(--blue);}
.btn-ghost.blue:hover{background:rgba(143,169,192,.12);}

/* ============ rsvp ============ */
#rsvp .steps{display:flex;gap:6px;justify-content:center;margin-bottom:32px;}
#rsvp .steps i{width:24px;height:1.5px;background:var(--line);border-radius:2px;transition:background .45s;}
#rsvp .steps i.on{background:var(--gold);}
.stepwrap{display:grid;}
.step{grid-area:1/1;opacity:0;transform:translateX(30px);pointer-events:none;
  transition:opacity .55s ease,transform .55s cubic-bezier(.2,.7,.2,1);}
.step.active{opacity:1;transform:none;pointer-events:auto;}
.step:not(.active){visibility:hidden;height:0;overflow:hidden;}
.q{font-family:'Playfair Display',serif;font-size:26px;line-height:1.35;margin-bottom:8px;color:var(--navy);outline:none;text-wrap:balance;}
.qs{font-family:'Cormorant Garamond',serif;font-size:17px;color:var(--muted);margin-bottom:26px;line-height:1.5;}
.opt{width:100%;min-height:60px;border:1px solid var(--gold);background:rgba(255,255,255,.55);cursor:pointer;
  display:flex;align-items:center;justify-content:center;color:var(--gold-deep);font-family:'Inter',system-ui,sans-serif;
  font-size:11px;letter-spacing:.24em;text-transform:uppercase;margin-bottom:13px;transition:background .35s ease,border-color .35s ease;}
.opt:hover{background:rgba(255,255,255,.85);}
.opt.soft{border-color:var(--line);color:#a9a294;background:rgba(255,255,255,.72);}
.person{border:1px solid var(--line);background:rgba(255,255,255,.66);padding:18px 16px;margin-bottom:14px;}
.person .who{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:19px;color:var(--navy);margin-bottom:14px;}
.chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;}
.chip{padding:11px 18px;min-height:44px;border:1px solid var(--line);border-radius:999px;cursor:pointer;font-size:11px;
  letter-spacing:.06em;color:#7c7566;background:rgba(255,255,255,.9);
  transition:border-color .3s ease,color .3s ease,background-color .3s ease;
  font-family:'Inter',system-ui,sans-serif;display:inline-flex;align-items:center;}
.chip:hover{border-color:var(--gold-soft);}
.chip.sel{border-color:var(--gold);color:#fff;background:var(--gold);}
.next{width:100%;min-height:58px;background:var(--navy);color:#F2E7D2;border:none;cursor:pointer;
  font-family:'Inter',system-ui,sans-serif;font-size:11px;letter-spacing:.26em;text-transform:uppercase;margin-top:8px;
  transition:background .3s ease;}
.next:hover{background:#2d445e;}
.back{margin-top:15px;background:none;border:none;cursor:pointer;font-size:9.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--muted);padding:12px 16px;min-height:44px;font-family:'Inter',system-ui,sans-serif;}
.note{width:100%;border:1px solid var(--line);background:rgba(255,255,255,.85);padding:14px;
  font-family:'Inter',system-ui,sans-serif;font-size:13px;color:var(--ink);resize:none;height:92px;margin-bottom:6px;}
.note:focus{outline:1px solid var(--gold);}
.hint{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:15.5px;color:var(--muted);margin-top:14px;line-height:1.5;}

/* ============ success ============ */
#done{display:none;}
#done .tick{width:76px;height:76px;margin:0 auto 24px;}
#done .cal{margin-top:28px;display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:16px 24px;
  min-height:44px;border:1px solid var(--gold);color:var(--gold-deep);background:transparent;cursor:pointer;
  font-size:10px;letter-spacing:.26em;text-transform:uppercase;text-decoration:none;
  font-family:'Inter',system-ui,sans-serif;transition:background .3s ease;}
#done .cal:hover{background:rgba(198,161,91,.08);}
#done .edit{display:block;margin:26px auto 0;background:none;border:none;cursor:pointer;
  font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);
  padding:12px 16px;min-height:44px;font-family:'Inter',system-ui,sans-serif;text-decoration:underline;text-underline-offset:4px;}
#done .locked{margin-top:26px;font-family:'Cormorant Garamond',serif;font-style:italic;
  font-size:15.5px;color:var(--muted);line-height:1.5;}
.queued-note{margin-top:18px;font-family:'Cormorant Garamond',serif;font-style:italic;
  font-size:15.5px;color:var(--blue);line-height:1.5;}

footer{position:relative;z-index:6;padding:64px 30px calc(96px + env(safe-area-inset-bottom, 0px));text-align:center;}
footer .m{font-family:'Playfair Display',serif;font-size:17px;color:var(--gold-deep);letter-spacing:.14em;}
footer .f{font-size:9px;letter-spacing:.28em;text-transform:uppercase;color:#b1a794;margin-top:12px;}

/* ============ Runtime states (docs/02 §6) ============ */
#notice{display:none;min-height:100svh;align-items:center;justify-content:center;
  padding:32px;background:var(--cream);text-align:center;}
#notice .ncard{max-width:420px;width:100%;border:1px solid var(--line);background:#fff;
  padding:44px 32px;box-shadow:0 14px 38px rgba(78,110,140,.08);}
#notice .nmono{width:60px;height:60px;border:1px solid rgba(198,161,91,.5);border-radius:50%;
  display:flex;align-items:center;justify-content:center;margin:0 auto 20px;
  font-family:'Playfair Display',serif;font-size:16px;color:var(--gold-deep);}
#notice h1{font-family:'Playfair Display',serif;font-weight:400;font-size:24px;color:var(--navy);margin-bottom:12px;}
#notice p{font-family:'Cormorant Garamond',serif;font-size:18px;line-height:1.6;color:#54636F;}
#notice .retry{margin-top:26px;}
body[data-state="notice"] #page{display:none;}
body[data-state="notice"] #notice{display:flex;}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0;}
.skiplink{position:absolute;left:-9999px;top:0;z-index:99;background:var(--navy);color:#F2E7D2;
  padding:12px 18px;font-family:'Inter',system-ui,sans-serif;font-size:12px;letter-spacing:.1em;}
.skiplink:focus-visible{left:12px;top:12px;}

/* ============ Focus & a11y (docs/04 §8) ============ */
:is(button,a,textarea,[tabindex]):focus-visible{outline:2px solid var(--gold);outline-offset:2px;}
.chip:focus-visible{outline-offset:1px;}
:is(button,a){touch-action:manipulation;}

/* ============ Countdown στο hero ============ */
#heroCountdown{margin-top:12px;font-size:10px;letter-spacing:.3em;text-transform:uppercase;
  color:var(--gold-deep);opacity:.85;}

/* ============ Desktop (≥900px): η ίδια ιστορία, πιο αρχοντική ============ */
@media (min-width: 900px){
  .scene .inner{max-width:520px;}
  .scene{padding:120px 32px;}
  #hero h1{font-size:40px;}
  #hero .guest{font-size:clamp(42px,4.5vw,54px);}
  #hero .once{font-size:22px;}
  #hero .date{font-size:11px;}
  .arch{width:430px;height:588px;}
  h2.title{font-size:38px;}
  p.body{font-size:21.5px;}
  p.body.lead::first-letter{font-size:62px;}
  .eyebrow{font-size:11px;}
  .card{padding:44px 38px;}
  .card h3{font-size:28px;}
  .card .place{font-size:19px;}
  .q{font-size:30px;}
  .qs{font-size:18px;}
  .opt{min-height:64px;font-size:12px;}
  .next{min-height:62px;font-size:12px;}
  .chip{font-size:12px;padding:12px 20px;}
  #done .tick{width:86px;height:86px;}
  footer .m{font-size:19px;}
}

/* ============ Reduced motion (docs/03 §4) ============ */
@media (prefers-reduced-motion:reduce){
  #stars i,.scrollcue i{animation:none}
  html{scroll-behavior:auto;}
  .rv{transform:none;transition:opacity .6s ease;}
  .step{transform:none;transition:opacity .4s ease;}
}