/* ==========================================================================
   Citrus Prime — v3 "After Hours"
   Shared styles: tokens, type, buttons, lamp, header, footer, mute, toast.
   Page-specific styles live in each page's <style> block.
   ========================================================================== */

/* ===== Tokens ===== */
:root {
  --lemon-yellow: #F4D03F;
  --lemon-deep:   #E8A91C;
  --terracotta:   #C56A4A;
  --palm-green:   #1F3A2B;
  --brass:        #B68A3E;
  --brass-soft:   #D4B077;

  --ink:          #1C1A17;
  --ink-soft:     #4A4239;
  --paper:        #FAF6EC;
  --linen:        #ECE3CD;
  --line:         #DCD3BC;
  --pith:         #7A726A;
  --frost:        rgba(28,26,23,0.04);

  --font-display: 'Cormorant Garamond', serif;
  --font-script:  'Allura', cursive;
  --font-hand:    'Caveat', cursive;
  --font-sans:    'Inter', system-ui, sans-serif;
}
html[data-theme="dark"] {
  --ink:          #ECE3CD;
  --ink-soft:     rgba(236,227,205,0.78);
  --paper:        #161D17;
  --linen:        #1F2A1F;
  --line:         rgba(236,227,205,0.12);
  --pith:         rgba(236,227,205,0.55);
  --frost:        rgba(255,255,255,0.04);
  --lemon-yellow: #E8A91C;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  transition: background 700ms ease, color 700ms ease;
}
img { max-width: 100%; display: block; }
a { color: inherit; }

/* ===== Type system ===== */
.eyebrow { font: 500 0.74rem/1 var(--font-sans); letter-spacing: 0.28em; text-transform: uppercase; color: var(--lemon-deep); }
.eyebrow.muted { color: var(--pith); }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 400; color: var(--ink); letter-spacing: -0.005em; margin: 0; }
h1 { font-size: clamp(3rem, 7vw, 6rem); line-height: 1.0; font-weight: 300; }
h2 { font-size: clamp(2.2rem, 4.6vw, 3.8rem); line-height: 1.05; font-weight: 400; }
h3 { font-size: clamp(1.4rem, 2.4vw, 1.85rem); line-height: 1.2; font-weight: 500; }
h4 { font-size: 1.1rem; font-weight: 600; }
.script { font-family: var(--font-script); font-weight: 400; color: var(--lemon-deep); font-size: 1.4em; line-height: 0.85; vertical-align: -0.05em; }
.hand { font-family: var(--font-hand); font-weight: 500; color: var(--lemon-deep); }
p { margin: 0 0 1em; color: var(--ink-soft); }
.body-lg { font-size: 1.125rem; line-height: 1.7; }

.container { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 32px; }
@media (max-width: 640px) { .container { padding: 0 20px; } }

/* ===== Buttons ===== */
.btn { display: inline-flex; align-items: center; gap: 10px; border-radius: 999px; font: 500 0.92rem/1 var(--font-sans); letter-spacing: 0.04em; cursor: pointer; transition: all 280ms ease; border: 1.5px solid transparent; text-decoration: none; padding: 17px 32px; }
.btn-ink { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn-ink:hover { background: var(--terracotta); border-color: var(--terracotta); color: #FAF6EC; }
.btn-ghost { border: 1.5px solid var(--ink); color: var(--ink); background: transparent; }
.btn-ghost:hover { background: var(--ink); color: var(--paper); }
.btn-ghost-light { border: 1.5px solid rgba(255,255,255,0.5); color: #FAF6EC; background: transparent; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.btn-ghost-light:hover { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.8); }
.btn-link { color: var(--ink); padding: 6px 0; font: 500 0.86rem var(--font-sans); letter-spacing: 0.16em; text-transform: uppercase; text-decoration: none; display: inline-flex; gap: 10px; align-items: center; border-bottom: 1px solid var(--line); }
.btn-link:hover { border-bottom-color: var(--terracotta); color: var(--terracotta); }
.btn-link svg { transition: transform 250ms ease; }
.btn-link:hover svg { transform: translateX(4px); }

/* ===== HANGING CAFE LAMP — vintage Edison pendant ===== */
.lamp { position: fixed; top: 0; right: 64px; width: 110px; z-index: 200; pointer-events: none; display: flex; flex-direction: column; align-items: center; }
@media (max-width: 720px) { .lamp { right: 16px; width: 78px; } }
.lamp-rosette { width: 28px; height: 7px; background: linear-gradient(180deg, #c89556 0%, #7d5a1f 100%); border-radius: 0 0 6px 6px; box-shadow: 0 1px 0 rgba(255,220,160,0.4) inset, 0 2px 4px rgba(0,0,0,0.15); }
.lamp-cord { width: 2px; flex-shrink: 0; height: 36vh; background: repeating-linear-gradient(0deg, #2a1f12 0 4px, #1a120a 4px 8px); border-radius: 999px; box-shadow: 0 0 0 1px rgba(0,0,0,0.2); position: relative; }
.lamp-cord::after { content: ""; position: absolute; top: 28%; left: 50%; transform: translateX(-50%); width: 4px; height: 4px; background: var(--brass); border-radius: 50%; box-shadow: 0 6px 0 var(--brass), 0 12px 0 var(--brass); opacity: 0.5; }
.lamp-pendant { position: relative; width: 100%; aspect-ratio: 0.85; cursor: pointer; pointer-events: auto; transform-origin: top center; animation: cp-sway 9s ease-in-out infinite; background: none; border: none; padding: 0; }
@keyframes cp-sway { 0%, 100% { transform: rotate(-1.4deg); } 50% { transform: rotate(1.4deg); } }
.lamp-svg { width: 100%; height: auto; display: block; overflow: visible; }
.lamp-svg .filament-stroke { fill: none; stroke: #FFD27A; stroke-width: 1.2; stroke-linecap: round; filter: drop-shadow(0 0 1.5px #FFC857) drop-shadow(0 0 4px #FF9E40) drop-shadow(0 0 9px #FF7F1F); transition: stroke 600ms ease, filter 600ms ease; }
.lamp-svg .glass-tint { fill: rgba(255,220,140,0.16); transition: fill 700ms ease; }
.lamp-svg .inner-glow { fill: rgba(255,210,120,0.32); transition: fill 700ms ease; }
.lamp-svg .glass-rim { stroke: rgba(255,220,140,0.4); transition: stroke 600ms ease; }
html[data-theme="dark"] .lamp-svg .filament-stroke { stroke: #FFF0B8; filter: drop-shadow(0 0 2px #FFE08A) drop-shadow(0 0 6px #FFB347) drop-shadow(0 0 14px #FF8A2F) drop-shadow(0 0 24px rgba(255,140,60,0.7)); }
html[data-theme="dark"] .lamp-svg .inner-glow { fill: rgba(255,220,140,0.55); }
html[data-theme="dark"] .lamp-svg .glass-tint { fill: rgba(255,210,120,0.28); }
html[data-theme="dark"] .lamp-svg .glass-rim { stroke: rgba(255,220,140,0.7); }
.lamp-halo { position: absolute; top: 60%; left: 50%; transform: translateX(-50%); width: 320px; height: 280px; pointer-events: none; opacity: 0.85; transition: opacity 900ms ease, filter 900ms ease, width 900ms ease, height 900ms ease, background 900ms ease; background: radial-gradient(ellipse at center top, rgba(255,210,120,0.55) 0%, rgba(255,180,80,0.28) 30%, rgba(255,170,80,0.1) 55%, transparent 75%); filter: blur(8px); z-index: -1; mix-blend-mode: screen; animation: cp-flicker 5.5s ease-in-out infinite; }
@keyframes cp-flicker { 0%, 100% { opacity: 1; } 38% { opacity: 0.92; } 41% { opacity: 1; } 72% { opacity: 0.96; } 75% { opacity: 1; } }
.lamp-cone { position: absolute; top: 90%; left: 50%; transform: translateX(-50%); width: 540px; height: 60vh; pointer-events: none; opacity: 0.7; transition: opacity 1100ms ease, background 800ms ease, width 1100ms ease, height 1100ms ease, filter 1100ms ease; background: linear-gradient(180deg, rgba(255,210,120,0.18) 0%, rgba(255,200,100,0.08) 25%, rgba(255,190,90,0.03) 50%, transparent 90%); clip-path: polygon(40% 0, 60% 0, 92% 100%, 8% 100%); filter: blur(14px); z-index: -1; mix-blend-mode: screen; }
html[data-theme="dark"] .lamp-halo { opacity: 1; width: 460px; height: 380px; background: radial-gradient(ellipse at center top, rgba(255,220,140,0.95) 0%, rgba(255,180,80,0.65) 22%, rgba(255,160,70,0.32) 45%, rgba(255,140,60,0.12) 70%, transparent 88%); filter: blur(14px); }
html[data-theme="dark"] .lamp-cone { opacity: 1; width: 720px; height: 80vh; background: linear-gradient(180deg, rgba(255,210,120,0.42) 0%, rgba(255,190,90,0.22) 18%, rgba(255,180,80,0.1) 38%, rgba(255,170,70,0.04) 60%, transparent 90%); filter: blur(22px); }
html[data-theme="dark"] body::before { content: ""; position: fixed; top: 0; right: 0; width: 60vw; height: 100vh; pointer-events: none; z-index: 1; background: radial-gradient(ellipse 50vw 80vh at calc(100% - 110px) -10vh, rgba(255,200,110,0.16) 0%, rgba(255,170,80,0.08) 18%, rgba(255,150,70,0.03) 35%, transparent 60%); mix-blend-mode: screen; }
.lamp-pendant.tugging { animation: cp-tug 700ms cubic-bezier(.34,1.56,.64,1); }
@keyframes cp-tug { 0% { transform: translateY(0) rotate(0); } 18% { transform: translateY(10px) rotate(0); } 38% { transform: translateY(-4px) rotate(2.4deg); } 58% { transform: translateY(2px) rotate(-2deg); } 78% { transform: translateY(-1px) rotate(1deg); } 100% { transform: translateY(0) rotate(0); } }

/* ===== Header ===== */
.site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 90; background: color-mix(in srgb, var(--paper) 88%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); transition: all 400ms ease; }
.header-inner { display: flex; align-items: center; justify-content: space-between; padding: 14px 32px; max-width: 1440px; margin: 0 auto; gap: 24px; }
.logo-link { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
.logo-link img { height: 52px; width: auto; transition: filter 700ms ease; }
html[data-theme="dark"] .logo-link img { filter: brightness(0) invert(1) sepia(0.2) saturate(0.5) hue-rotate(20deg); }
.logo-text { font-family: var(--font-display); font-size: 1.1rem; font-weight: 500; letter-spacing: 0.01em; color: var(--ink); }
.nav-list { display: flex; gap: 30px; list-style: none; padding: 0; margin: 0; }
.nav-link { color: var(--ink-soft); font: 500 0.84rem/1 var(--font-sans); text-decoration: none; padding: 10px 0; position: relative; }
.nav-link::after { content: ""; position: absolute; left: 50%; bottom: 4px; width: 0; height: 2px; background: var(--terracotta); transform: translateX(-50%); transition: width 220ms ease; }
.nav-link:hover { color: var(--ink); }
.nav-link:hover::after, .nav-link.active::after { width: 24px; }
.nav-link.active { color: var(--ink); }
@media (max-width: 1100px) { .nav-list { display: none; } }
.header-cta { padding: 13px 24px; }

/* ===== Section base ===== */
section { padding: 140px 0; position: relative; }
.section-head { text-align: center; max-width: 760px; margin: 0 auto 80px; display: flex; flex-direction: column; gap: 18px; align-items: center; }
.section-head .lead { font-family: var(--font-display); font-size: 1.25rem; line-height: 1.5; color: var(--ink-soft); font-weight: 300; max-width: 56ch; font-style: italic; }
.section-head.left { text-align: left; align-items: flex-start; max-width: 100%; }
.section-head.left .center-rule { margin-left: 0; }
.center-rule { width: 60px; height: 1px; background: var(--brass); margin: 8px auto 0; }

/* ===== Light-reveal helpers (used on prime-room page) =====
   Sections start dim and brighten when they come into view.
   Driven by main.js when html[data-theme-mode="light-reveal"]. */
.reveal { filter: brightness(0.35) saturate(0.55); opacity: 0.6; transition: filter 1400ms cubic-bezier(.4,0,.2,1), opacity 1400ms ease; }
.reveal.lit { filter: brightness(1) saturate(1); opacity: 1; }
html[data-theme="light"] .reveal { filter: none; opacity: 1; }

/* ===== Guestbook footer (shared) ===== */
footer.guestbook { background: var(--linen); color: var(--ink); padding: 100px 0 32px; position: relative; }
.guestbook-spread { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; max-width: 1240px; margin: 0 auto; padding: 0 32px 80px; position: relative; }
.guestbook-spread::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 80px; width: 1px; background: var(--line); transform: translateX(-50%); }
.gb-left { padding-right: 40px; }
.gb-left .seal { width: 92px; height: 92px; border-radius: 50%; background: var(--lemon-yellow); display: flex; align-items: center; justify-content: center; margin-bottom: 32px; box-shadow: inset 0 0 0 4px var(--linen), inset 0 0 0 5px var(--brass), 0 6px 16px -6px rgba(232,169,28,0.4); position: relative; transform: rotate(-6deg); }
.gb-left .seal-inner { font-family: var(--font-display); font-size: 1.4rem; font-weight: 500; color: var(--ink); letter-spacing: 0.04em; line-height: 1; text-align: center; }
.gb-left .seal-inner small { display: block; font: 600 0.5rem var(--font-sans); letter-spacing: 0.22em; text-transform: uppercase; margin-top: 4px; color: var(--ink-soft); }
.gb-left h3 { font-family: var(--font-display); font-size: 1.6rem; font-weight: 500; margin-bottom: 14px; max-width: 22ch; }
.gb-left h3 .script { color: var(--terracotta); }
.gb-left p { font-size: 0.95rem; color: var(--ink-soft); margin-bottom: 22px; max-width: 36ch; }
.gb-handwritten { font-family: var(--font-hand); font-size: 1.4rem; color: var(--brass); line-height: 1.4; margin-top: 28px; padding-top: 20px; border-top: 1px dashed var(--line); }
.gb-handwritten .signed-by, .gb-handwritten span { display: block; margin-top: 8px; font-size: 1rem; color: var(--ink-soft); }

.gb-right { display: grid; grid-template-columns: 1fr 1fr; gap: 36px 24px; }
.gb-col h4 { font: 600 0.66rem var(--font-sans); letter-spacing: 0.24em; text-transform: uppercase; color: var(--terracotta); margin-bottom: 18px; }
.gb-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.gb-col a { color: var(--ink-soft); text-decoration: none; font-size: 0.92rem; transition: color 220ms; display: inline-flex; align-items: center; gap: 8px; }
.gb-col a:hover { color: var(--terracotta); }
.gb-col a::before { content: "·"; color: var(--brass); }
.gb-contact { grid-column: span 2; padding-top: 24px; border-top: 1px dashed var(--line); margin-top: 8px; }
.gb-contact .phone { font-family: var(--font-display); font-size: 1.5rem; color: var(--ink); display: block; text-decoration: none; font-weight: 500; }
.gb-contact .email { display: block; color: var(--ink-soft); text-decoration: none; font-size: 0.92rem; margin-top: 6px; }
.gb-contact .addr { font-family: var(--font-hand); font-size: 1.1rem; color: var(--brass); margin-top: 16px; line-height: 1.4; }
.gb-contact .socials { display: flex; gap: 14px; margin-top: 18px; }
.gb-contact .socials a { color: var(--ink-soft); }
.gb-contact .socials a:hover { color: var(--terracotta); }
.gb-contact .socials a::before { display: none; }

.footer-rule { max-width: 1240px; margin: 0 auto; height: 1px; background: var(--line); }
.footer-bottom { max-width: 1240px; margin: 0 auto; padding: 28px 32px 0; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 14px; }
.footer-bottom .legal { font: 400 0.78rem var(--font-sans); color: var(--pith); }
.footer-bottom .legal a { color: var(--pith); margin-left: 18px; text-decoration: none; }
.footer-bottom .legal a:hover { color: var(--terracotta); }
.footer-bottom .powered { font: 400 0.78rem var(--font-sans); color: var(--pith); }
.footer-bottom .powered a { color: var(--terracotta); text-decoration: none; }
@media (max-width: 900px) { .guestbook-spread { grid-template-columns: 1fr; gap: 40px; } .guestbook-spread::before { display: none; } .gb-right { grid-template-columns: 1fr; } .gb-contact { grid-column: span 1; } }

/* ===== Toast ===== */
.toast { position: fixed; top: 110px; left: 50%; transform: translateX(-50%); background: var(--ink); color: var(--paper); padding: 14px 28px; border-radius: 999px; font: 500 0.9rem var(--font-sans); z-index: 250; opacity: 0; transition: opacity 220ms; pointer-events: none; box-shadow: 0 12px 30px -8px rgba(0,0,0,0.3); }
.toast.show { opacity: 1; }

/* ===== Mute toggle ===== */
.mute-toggle { position: fixed; bottom: 24px; left: 24px; width: 36px; height: 36px; border-radius: 50%; background: var(--paper); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 80; opacity: 0.6; transition: opacity 220ms; color: var(--ink-soft); }
.mute-toggle:hover { opacity: 1; }
.mute-toggle .on { display: block; }
.mute-toggle .off { display: none; }
.mute-toggle.muted .on { display: none; }
.mute-toggle.muted .off { display: block; }

/* ===== Fade-in primitive — listing arrival (rooms summary, etc.) =====
   Opt in by adding `.fade-in` to any element. main.js observes them via
   IntersectionObserver and adds `.in-view` once the element enters view. */
.fade-in { opacity: 0; transform: translateY(14px); transition: opacity 700ms ease, transform 700ms cubic-bezier(.4,0,.2,1); }
.fade-in.in-view { opacity: 1; transform: translateY(0); }
/* Stagger consecutive siblings — the cards land like dealt paper */
.fade-in.in-view:nth-child(1) { transition-delay: 0ms; }
.fade-in.in-view:nth-child(2) { transition-delay: 70ms; }
.fade-in.in-view:nth-child(3) { transition-delay: 140ms; }
.fade-in.in-view:nth-child(4) { transition-delay: 210ms; }
.fade-in.in-view:nth-child(5) { transition-delay: 280ms; }
.fade-in.in-view:nth-child(6) { transition-delay: 350ms; }

/* ===== Reduced motion — quiet path =====
   Honour OS-level "reduce motion". Lamp stops swaying, the room is already
   lit on arrival, sections don't dim, cards don't slide, the hero's hidden
   copy is shown instantly. Hover transitions on buttons/cards are kept —
   they're intent-driven state changes, not ambient motion. */
@media (prefers-reduced-motion: reduce) {
  /* Continuous brand motion — off */
  .lamp-pendant,
  .lamp-pendant.tugging,
  .lamp-halo,
  .lamp-hint { animation: none !important; }

  /* Reveal / fade primitives — instant on */
  .reveal,
  .reveal.lit { filter: none !important; opacity: 1 !important; transition: none !important; }
  .fade-in,
  .fade-in.in-view { opacity: 1 !important; transform: none !important; transition: none !important; }

  /* Hero on light-reveal pages — no slide-in stagger */
  body:not(.lights-on) .room-hero-content > *,
  body:not(.lights-on) .room-stats,
  .room-hero-content > *,
  .room-stats { opacity: 1 !important; transform: none !important; transition: none !important; }

  /* Hero photo — no Ken Burns (homepage + room hero) */
  .hero-media img,
  .room-hero-media img { animation: none !important; transition: none !important; transform: none !important; }
}