/* ============================================================
   Αντρέας & Ιωάννα · 31.10.2026
   Autumn-editorial theme — cream / ink / rust-orange / puce
   Cormorant Garamond, falling leaves
   ============================================================ */

:root{
    --cream:#F6EFE4; --cream2:#EFE4D3; --ink:#3A2B23; --soft:#6B5648;
    --orange:#BC5A2C; --orange-lt:#D98A4E; --puce:#8B5B60; --brown:#6E4A38;
    --line:rgba(58,43,35,.26); --line-soft:rgba(58,43,35,.13);
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0; font-family:'Cormorant Garamond', Georgia, serif; color:var(--ink); background:var(--cream);}
h1,h2,h3,p{margin:0;}
a{color:var(--orange); text-decoration:none;}
a:hover{color:var(--puce);}
.script{font-style:italic;}
.kicker{letter-spacing:.4em; text-transform:uppercase; font-size:13px; color:var(--orange);}

/* HERO */
.hero{position:relative; min-height:100vh; display:flex; align-items:center; justify-content:center; overflow:hidden; padding:56px 24px;}
.frame{position:absolute; border:1px solid var(--line); pointer-events:none; z-index:1;}
.frame.a{inset:22px;} .frame.b{inset:30px; border-color:var(--line-soft);}
.mono-bg{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); font-style:italic; font-size:min(56vw,680px); color:rgba(139,91,96,.07); line-height:1; user-select:none; pointer-events:none; z-index:0; white-space:nowrap;}
.hero-inner{position:relative; z-index:2; text-align:center; max-width:840px;}
.hero-inner .kicker{margin-bottom:30px; padding-left:.42em;}
.names{font-style:italic; font-weight:500; line-height:.9;}
.names .n{display:block; font-size:clamp(66px,14vw,156px);}
.names .amp{display:block; font-size:clamp(30px,5vw,54px); color:var(--orange); margin:2px 0;}
.date-row{display:flex; align-items:center; justify-content:center; gap:18px; margin-top:38px; flex-wrap:wrap;}
.date-row .rule{height:1px; width:56px; background:rgba(58,43,35,.32);}
.date-row .date{font-size:clamp(20px,3vw,27px); letter-spacing:.06em;}
.place{letter-spacing:.26em; text-transform:uppercase; font-size:13px; color:var(--soft); margin-top:16px;}
.cal-link{display:inline-block; margin-top:26px; font-size:14px; letter-spacing:.18em; text-transform:uppercase; color:var(--soft); border-bottom:1px solid var(--line); padding-bottom:4px; transition:color .25s ease, border-color .25s ease;}
.cal-link:hover{color:var(--orange); border-color:var(--orange);}
.cue{position:absolute; bottom:44px; left:50%; transform:translateX(-50%); z-index:2; display:flex; flex-direction:column; align-items:center; gap:8px;}
.cue span:first-child{font-size:12px; letter-spacing:.3em; text-transform:uppercase; color:var(--soft);}
.cue .arrow{display:block; width:9px; height:9px; border-right:1px solid var(--soft); border-bottom:1px solid var(--soft); transform:rotate(45deg); animation:cue 2s ease-in-out infinite;}

.leaves{position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:1;}
.leaf{position:absolute; top:-48px; will-change:transform;}
.leaf svg{display:block; opacity:.5;}

/* SECTIONS */
section.pad{padding:clamp(80px,12vw,120px) 24px;}
.dark{background:var(--ink); color:var(--cream); text-align:center;}
.dark .kicker{color:var(--orange-lt);}
.invite p{font-weight:500; font-size:clamp(27px,4.6vw,42px); line-height:1.34; text-wrap:pretty;}
.invite .sig{font-style:italic; font-size:clamp(42px,7vw,74px); color:var(--orange-lt); margin-top:26px; line-height:1;}
.center-head{text-align:center; margin-bottom:52px;}
.center-head .kicker{margin-bottom:16px;}
.center-head h2{font-weight:500; font-size:clamp(30px,5vw,46px);}
.wrap{max-width:1000px; margin:0 auto;}
.wrap-sm{max-width:760px; margin:0 auto;}

/* COUNTDOWN */
.cd{text-align:center; background:var(--cream);}
.cd h2{font-weight:500; font-size:clamp(28px,4.4vw,40px); margin-top:2px;}
.cd .kicker{margin-bottom:18px;}
.cd-grid{display:flex; flex-wrap:wrap; justify-content:center; gap:clamp(20px,5vw,54px); margin-top:48px;}
.cd-unit{min-width:76px;}
.cd-num{font-weight:500; font-size:clamp(46px,8vw,78px); color:var(--orange); line-height:1; font-variant-numeric:tabular-nums;}
.cd-lbl{letter-spacing:.24em; text-transform:uppercase; font-size:12px; color:var(--soft); margin-top:12px;}

/* PROGRAM */
.prog{background:var(--cream2);}
.prog .wrap-tl{max-width:680px; margin:0 auto;}
.tl-row{display:flex; gap:22px; align-items:stretch;}
.tl-time{flex:0 0 68px; text-align:right; font-weight:600; font-size:21px; color:var(--orange); padding-top:1px;}
.tl-mid{flex:0 0 14px; display:flex; flex-direction:column; align-items:center;}
.tl-dot{width:12px; height:12px; border-radius:50%; background:var(--orange); margin-top:4px;}
.tl-line{flex:1; width:1px; background:rgba(58,43,35,.24);}
.tl-body{flex:1; padding-bottom:40px;}
.tl-row:last-child .tl-body{padding-bottom:0;}
.tl-body .t{font-weight:600; font-size:22px;}
.tl-body .s{color:var(--soft); font-size:17px; margin-top:4px;}

/* VENUES */
.venue-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:28px;}
.card{background:#fff; border:1px solid rgba(58,43,35,.14); padding:48px 38px; text-align:center;}
.card svg{margin-bottom:22px;}
.card .tag{letter-spacing:.3em; text-transform:uppercase; font-size:12px; color:var(--puce); margin-bottom:14px;}
.card h3{font-weight:600; font-size:clamp(22px,3vw,28px); margin-bottom:10px;}
.card .loc{color:var(--soft); font-size:18px;}
.card .time{font-weight:600; font-size:22px; color:var(--orange); margin-top:12px;}
.card .maps{display:inline-block; margin-top:20px; font-size:14px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink); border-bottom:1px solid var(--line); padding-bottom:4px; transition:color .25s ease, border-color .25s ease;}
.card .maps:hover{color:var(--orange); border-color:var(--orange);}

/* PARENTS */
.parents h2{font-style:italic; font-weight:500; font-size:clamp(40px,7vw,66px); margin:0 0 44px;}
.parents .kicker{margin-bottom:16px;}
.parents-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:36px;}
.parents-grid .fam{font-size:clamp(22px,3vw,27px); font-weight:500;}

/* FOOTER */
.foot{background:var(--cream2); text-align:center; padding:clamp(72px,10vw,100px) 24px;}
.foot .mono{font-style:italic; font-size:clamp(56px,10vw,96px); color:var(--orange); line-height:1;}
.foot .who{letter-spacing:.16em; text-transform:uppercase; font-size:15px; color:var(--ink); margin-top:22px;}
.foot .drow{display:flex; align-items:center; justify-content:center; gap:14px; margin-top:14px;}
.foot .drow .rule{height:1px; width:34px; background:rgba(58,43,35,.3);}
.foot .drow .d{font-size:15px; letter-spacing:.24em; color:var(--soft);}
.foot .close{font-style:italic; font-size:clamp(26px,4vw,34px); color:var(--puce); margin-top:22px;}

@keyframes fall{0%{transform:translateY(-48px) rotate(0deg);}100%{transform:translateY(112vh) rotate(340deg);}}
@keyframes sway{0%,100%{margin-left:-8px;}50%{margin-left:8px;}}
@keyframes cue{0%,100%{transform:rotate(45deg) translate(0,0); opacity:.5;}50%{transform:rotate(45deg) translate(5px,5px); opacity:1;}}

@media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto;}
    .leaf, .cue .arrow{animation:none;}
}