:root{
  --bg:#111111;--bg2:#171717;--paper:#f3eee4;--ink:#171717;--cream:#efe6d6;
  --wine:#6f1f2b;--gold:#c7a368;--muted:#a9a29a;--line:rgba(239,230,214,.16)
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--cream);font-family:"DM Sans",system-ui,sans-serif;line-height:1.65;overflow-x:hidden}
.grain{position:fixed;inset:0;pointer-events:none;opacity:.035;z-index:50;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E")}
.progress{position:fixed;left:0;right:0;top:0;height:2px;z-index:100;background:transparent}
.progress span{display:block;height:100%;width:0;background:var(--gold)}
.topbar{position:fixed;z-index:40;top:0;left:0;right:0;height:62px;display:flex;align-items:center;gap:18px;padding:0 24px;background:linear-gradient(to bottom,rgba(17,17,17,.92),rgba(17,17,17,.35),transparent);backdrop-filter:blur(3px)}
.mark{font-family:"Playfair Display",serif;color:var(--cream);text-decoration:none;font-size:1.35rem;font-weight:700}
.topbar-copy{font-size:.7rem;letter-spacing:.18em;font-weight:700;color:#8f8981}
.topbar-link{margin-left:auto;text-decoration:none;color:var(--cream);font-size:.78rem}
.section{width:min(1080px,calc(100% - 40px));margin:0 auto;padding:112px 0;position:relative}
.hero{min-height:100vh;display:flex;align-items:center;padding-top:90px}
.hero-inner{width:100%}
.eyebrow,.section-kicker{letter-spacing:.22em;font-size:.74rem;font-weight:700;color:var(--gold)}
.hero h1{font-family:"Playfair Display",serif;font-size:clamp(4.8rem,16vw,12rem);line-height:.76;margin:20px 0 35px;letter-spacing:-.055em}
.hero h1 span{color:var(--wine)}
.hero-copy{font-family:"Playfair Display",serif;font-size:clamp(1.25rem,2.4vw,2rem);color:#d8d0c4;max-width:720px}
.hero-meta{margin-top:36px;padding-top:18px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:20px;color:#817b73;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase}
.scroll-cue{display:inline-block;color:var(--cream);text-decoration:none;margin-top:42px;font-size:.9rem;opacity:.72}
.section-number{position:absolute;top:78px;right:0;font-family:"Playfair Display",serif;font-size:4rem;color:rgba(255,255,255,.055)}
h2{font-family:"Playfair Display",serif;font-size:clamp(2.8rem,7vw,5.8rem);line-height:.98;margin:14px 0 28px;letter-spacing:-.04em}
.lede{max-width:790px;font-size:1.16rem;color:#c6beb4}
.timeline{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:55px}
.timeline-card{padding:31px;border:1px solid var(--line);background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.012));border-radius:18px;transition:transform .25s ease,border-color .25s ease;position:relative;overflow:hidden}
.timeline-card:hover{transform:translateY(-3px);border-color:rgba(199,163,104,.4)}
.timeline-card.featured{grid-row:span 2;display:flex;flex-direction:column;justify-content:center}
.timeline-card span,.receipt-card span{color:var(--gold);letter-spacing:.14em;font-size:.68rem;font-weight:700}
.timeline-card h3{font-family:"Playfair Display",serif;font-size:1.72rem;margin:10px 0 12px}
.timeline-card p{color:#beb5aa}
.outage-card:before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent,rgba(111,31,43,.1));pointer-events:none}
.outage-mini{margin-top:18px;display:flex;align-items:center;gap:10px;color:#8f8981;font-size:.72rem;text-transform:uppercase;letter-spacing:.12em}
.outage-mini .dot{width:8px;height:8px;border-radius:50%;background:var(--gold);box-shadow:0 0 10px rgba(199,163,104,.5);animation:pulse 1.4s infinite}
.outage-mini .dot:nth-child(2){animation-delay:.15s}
.outage-mini .dot:nth-child(3){animation-delay:.3s}
@keyframes pulse{0%,100%{transform:scale(.7);opacity:.6}50%{transform:scale(1);opacity:1}}

.photo-section{padding:0 0 30px;overflow:hidden}
.photo-track{display:flex;gap:14px;width:max-content;padding:0 20px}
.photo-track img{height:360px;width:auto;max-width:520px;object-fit:cover;border-radius:16px;border:1px solid var(--line)}
.hidden{display:none}

.contrast{width:100%;max-width:none;background:var(--paper);color:var(--ink);padding-left:max(20px,calc((100% - 1080px)/2));padding-right:max(20px,calc((100% - 1080px)/2))}
.contrast .section-number{right:max(20px,calc((100% - 1080px)/2));color:rgba(0,0,0,.08)}
.contrast .section-kicker{color:var(--wine)}
.receipt-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:45px}
.receipt-card{background:white;padding:27px;min-height:220px;display:flex;flex-direction:column;justify-content:space-between;border-radius:14px;box-shadow:0 8px 25px rgba(0,0,0,.06);position:relative;overflow:hidden}
.receipt-card p{font-family:"Playfair Display",serif;font-size:1.3rem;line-height:1.3;margin:0 0 24px}
.receipt-card span{color:var(--wine)}
.notification-card:after{content:"";position:absolute;inset:auto 18px 18px auto;width:74px;height:74px;border-radius:18px;background:linear-gradient(135deg,rgba(111,31,43,.12),rgba(199,163,104,.18))}
.air-visual{margin-top:auto;padding:12px 0 14px}
.air-visual .window{height:54px;border:2px solid #ddd2c5;border-radius:10px;display:flex;gap:10px;padding:8px;margin-bottom:12px;background:#f8f5ee;overflow:hidden}
.air-visual .window span{display:block;flex:1;border-radius:8px;background:linear-gradient(180deg,#fbfaf7,#eef2f5);position:relative}
.air-visual .window span:after{content:"✦";position:absolute;top:4px;left:50%;transform:translateX(-50%);font-size:10px;color:#9eb1c6;opacity:.7}
.air-visual .table{height:14px;border-radius:10px;background:#6f4c36;position:relative;margin:0 18px}
.air-visual .table:after{content:"";position:absolute;left:12px;right:12px;bottom:-18px;height:18px;border-left:4px solid #6f4c36;border-right:4px solid #6f4c36}
.air-visual .mattress{height:18px;margin:-30px 36px 8px;background:linear-gradient(180deg,#efe6d6,#e4dac7);border:2px solid #d3c4aa;border-radius:999px;position:relative;z-index:2}
.air-visual .sleeper{width:38px;height:16px;background:#2f2f2f;border-radius:999px;margin-left:52%;margin-top:-24px;position:relative;z-index:3}
.air-visual .sleeper:before{content:"";position:absolute;width:12px;height:12px;border-radius:50%;background:#2f2f2f;left:-7px;top:2px}
.air-visual .stars,.air-visual .elevation{font-size:.63rem;letter-spacing:.12em;color:#8f7b63;margin-top:10px}
.route-visual{margin-top:auto;padding:6px 0 12px}
.route-labels{display:flex;justify-content:space-between;color:#78695a;font-size:.75rem;font-weight:700}
.route-line{display:flex;align-items:center;gap:10px;margin:8px 0}
.route-dot{width:10px;height:10px;border-radius:50%;background:var(--wine)}
.route-dot.end{background:var(--gold)}
.route-dashes{flex:1;height:2px;background:repeating-linear-gradient(90deg,#8c8072 0 10px,transparent 10px 18px)}
.route-arrow{font-size:1.2rem;color:var(--wine);animation:routeMove 1.4s ease-in-out infinite}
@keyframes routeMove{0%,100%{transform:translateX(0)}50%{transform:translateX(8px)}}
.route-tag{font-size:.68rem;letter-spacing:.15em;color:var(--wine);font-weight:700}

.lessons{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--line);margin-top:55px}
.lessons article{background:var(--bg);padding:35px;position:relative;overflow:hidden}
.lessons h3{font-family:"Playfair Display",serif;font-size:1.86rem;margin:0 0 12px;position:relative;z-index:2}
.lessons p{color:#c3bbb0;position:relative;z-index:2}
.lesson-note:after{
  content:"acidity  •  balance  •  texture  •  seasoning  •  tannin  •  finish  •  structure  •  menu notes  •  wine notes";
  position:absolute;inset:auto -40px 20px 20px;color:rgba(199,163,104,.09);font-size:1.2rem;line-height:1.35;
  font-family:"Playfair Display",serif;transform:rotate(-8deg);pointer-events:none
}

.quote-section{min-height:68vh;display:flex;align-items:center;justify-content:center}
.big-quote{font-family:"Playfair Display",serif;font-style:italic;text-align:center;font-size:clamp(3.4rem,9vw,8.5rem);line-height:.95;color:var(--paper);max-width:1050px}
.prose,.letter{max-width:800px;font-family:"Playfair Display",serif;font-size:clamp(1.2rem,2.2vw,1.72rem);line-height:1.62}
.prose p,.letter p{margin:0 0 1.18em}
.emphasis{font-size:1.55em;color:var(--gold);font-style:italic}

.gift-section{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.gift-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:45px}
.gift-card{position:relative;overflow:hidden;padding:36px;border-radius:22px;min-height:330px;background:radial-gradient(circle at 100% 0,rgba(111,31,43,.35),transparent 38%),linear-gradient(135deg,#2b2b2b,#171717);border:1px solid rgba(255,255,255,.12)}
.gift-top{display:flex;justify-content:space-between;align-items:flex-start}
.gift-value{font-family:"Playfair Display",serif;font-size:4.7rem;line-height:1}
.gift-badge{border:1px solid rgba(255,255,255,.16);border-radius:999px;padding:5px 9px;color:#8d877f;font-size:.7rem}
.gift-brand{color:var(--gold);letter-spacing:.15em;font-weight:700;font-size:.8rem;margin-top:8px}
.gift-card p{max-width:470px;color:#c9c1b7}
.gift-placeholder{position:absolute;left:36px;right:36px;bottom:30px;padding-top:15px;border-top:1px solid rgba(255,255,255,.11);font-size:.72rem;color:#817c75}

.final-letter{padding-top:140px;padding-bottom:150px}
.final-letter h2{font-style:italic}
.seriously-break{margin-bottom:18px;color:#9f978d;text-transform:uppercase;letter-spacing:.22em;font-size:.72rem}
.signature{font-size:1.4em;color:var(--gold);margin-top:45px!important}

footer{padding:75px 20px;text-align:center;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:8px;letter-spacing:.06em;align-items:center}
footer strong{font-family:"Playfair Display",serif;font-size:2rem;color:var(--gold)}
footer span{color:#777;font-size:.75rem}
.still-here-btn{margin-top:18px;padding:12px 20px;border-radius:999px;border:1px solid rgba(239,230,214,.2);background:rgba(255,255,255,.03);color:var(--cream);cursor:pointer;transition:transform .2s ease,border-color .2s ease}
.still-here-btn:hover{transform:translateY(-2px);border-color:rgba(199,163,104,.5)}

.outage-overlay{position:fixed;inset:0;background:rgba(0,0,0,.88);display:grid;place-items:center;z-index:200;opacity:0;pointer-events:none;transition:opacity .25s ease}
.outage-overlay.show{opacity:1}
.outage-console{width:min(640px,calc(100% - 30px));padding:28px;border:1px solid rgba(199,163,104,.35);border-radius:18px;background:#0f0f0f;color:#f0ebe0;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;box-shadow:0 20px 60px rgba(0,0,0,.55)}
.outage-console span{display:block;padding:8px 0;border-bottom:1px solid rgba(255,255,255,.07);letter-spacing:.12em;font-size:.95rem}
.outage-console span:last-child{border-bottom:none}
.outage-console .ok{color:var(--gold)}
body.glitch-active main, body.glitch-active header, body.glitch-active footer{animation:glitchFlicker .12s linear 10}
@keyframes glitchFlicker{
  0%{transform:translateX(0);filter:none}
  20%{transform:translateX(2px);filter:hue-rotate(10deg)}
  40%{transform:translateX(-2px)}
  60%{transform:translateX(1px);filter:contrast(1.15)}
  100%{transform:translateX(0);filter:none}
}

.late-note{
  position:fixed;top:74px;right:18px;z-index:180;width:min(340px,calc(100% - 32px));
  background:rgba(248,244,236,.97);color:#171717;border-radius:18px;padding:18px 18px 16px;
  box-shadow:0 18px 40px rgba(0,0,0,.22);transform:translateY(-18px);opacity:0;pointer-events:none;
  transition:transform .35s ease,opacity .35s ease;border:1px solid rgba(0,0,0,.06)
}
.late-note.show{transform:translateY(0);opacity:1}
.note-time,.note-from{font-size:.7rem;letter-spacing:.18em;font-weight:700;color:#7b736a;text-transform:uppercase}
.note-body{font-family:"Playfair Display",serif;font-size:1.6rem;line-height:1.1;margin:8px 0 10px}
.note-reply{font-size:.9rem;color:#5f5750}

.still-overlay{position:fixed;inset:0;background:#000;z-index:220;display:grid;place-items:center;opacity:0;pointer-events:none;transition:opacity .3s ease}
.still-overlay.show{opacity:1;pointer-events:auto}
.still-close{position:absolute;top:18px;right:20px;background:none;border:none;color:#8a8a8a;font-size:2rem;cursor:pointer}
.still-message{padding:24px;text-align:center;max-width:900px}
.still-line{font-family:"Playfair Display",serif;line-height:1.05;opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s ease;color:#f5efe6}
.still-line.one{font-size:clamp(2.5rem,8vw,6rem)}
.still-line.two{font-size:clamp(1.4rem,3.2vw,2.6rem);color:var(--gold);margin-top:18px}
.still-overlay.reveal-one .still-line.one{opacity:1;transform:translateY(0)}
.still-overlay.reveal-two .still-line.two{opacity:1;transform:translateY(0)}

@media(max-width:760px){
  .topbar{padding:0 14px}.topbar-copy{display:none}
  .section{width:min(100% - 28px,1080px);padding:82px 0}.section-number{top:54px}
  .hero{min-height:94vh}.hero h1{font-size:clamp(4.3rem,24vw,7.2rem)}
  .hero-meta{flex-direction:column;gap:6px}
  .timeline,.lessons,.gift-grid{grid-template-columns:1fr}.timeline-card.featured{grid-row:auto}
  .receipt-grid{grid-template-columns:1fr}.contrast{padding-left:14px;padding-right:14px}
  .contrast .section-number{right:14px}.receipt-card{min-height:170px}.photo-track img{height:270px}
  .late-note{top:68px;right:14px}.outage-console span{font-size:.82rem}
}

@media (prefers-reduced-motion: reduce){
  *, *:before, *:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}