@import url('https://fonts.googleapis.com/css2?family=Lora:wght@400;600;700&family=Inter:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  --ink:#1E2A28;
  --teal:#25454A;
  --teal-deep:#16302F;
  --paper:#F5F0E3;
  --mustard:#C89B3C;
  --mustard-bright:#E0B24F;
  --rust:#AE5230;
  --charcoal:#24211D;
  --line: rgba(30,42,40,0.14);
  --radius: 4px;
  --focus: 2px solid var(--rust);

  /* Fluid spacing scale — one source of truth for vertical rhythm.
     Section spacing is applied as a single gap between siblings (never
     doubled padding), so pages stay uniform regardless of content. */
  --space-section: clamp(2.75rem, 2rem + 3vw, 4.5rem);  /* ~44–72px */
  --space-lg:      clamp(2rem, 1.5rem + 2vw, 3.5rem);   /* hero/grid gaps */
  --space-md:      clamp(1.25rem, 1rem + 1vw, 2rem);
  --measure:       62ch;                                /* shared reading width */
  --wrap-pad:      clamp(1.25rem, 1rem + 1vw, 2rem);    /* fluid horizontal gutter */
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--paper);
  color:var(--charcoal);
  font-family:'Inter',sans-serif;
  line-height:1.55;
  display:flex; flex-direction:column;
  min-height:100vh; min-height:100svh;
}
main{flex:1; display:flex; flex-direction:column; gap:var(--space-section);}
h1,h2,h3{
  font-family:'Lora',serif;
  color:var(--teal-deep);
  margin:0 0 0.4em 0;
  font-weight:600;
  letter-spacing:-0.01em;
  text-wrap:balance;
}
h1{font-size:clamp(2.4rem,4.4vw,3.4rem); font-weight:700;}
h2{font-size:clamp(1.6rem,3vw,2.3rem);}
p{margin:0 0 1em 0;}
a{color:var(--teal-deep);}
.mono{font-family:'IBM Plex Mono',monospace;}

/* Layout */
/* width:100% is required because sections are flex items of <main>; without an
   explicit width a flex item shrink-wraps to its content (and margin:0 auto then
   centers it), which would make intro sections narrower and centered. Claiming
   full width up to max-width keeps every section the same 1080px, left-aligned. */
.wrap{width:100%; max-width:1080px; margin:0 auto; padding-left:var(--wrap-pad); padding-right:var(--wrap-pad);}
/* Sections have no own vertical padding — the gap on <main> provides a single,
   uniform rhythm between them so adjacent sections never double up. The first
   section gets top spacing to clear the sticky header, on every page. */
section{padding:0;}
main > section:first-child{padding-top:var(--space-section);}

/* Header / nav */
header{
  border-bottom:1px solid rgba(224,178,79,0.3);
  background:var(--teal-deep);
  position:sticky; top:0; z-index:50;
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 24px; max-width:1080px; margin:0 auto;
}
.brand{
  font-family:'Lora',serif; font-weight:700; font-size:1.3rem;
  color:var(--paper); text-decoration:none; display:flex; align-items:center; gap:10px;
}
.brand .mark{
  width:28px; height:28px; border-radius:3px; background:var(--mustard);
  display:inline-flex; align-items:center; justify-content:center;
  color:var(--teal-deep); font-family:'IBM Plex Mono',monospace; font-size:0.85rem; font-weight:500;
}
ul.links{display:flex; gap:28px; list-style:none; margin:0; padding:0;}
ul.links a{
  text-decoration:none; color:var(--paper); opacity:0.85; font-size:0.95rem; font-weight:500;
  border-bottom:2px solid transparent; padding-bottom:4px; transition:border-color .15s ease, opacity .15s ease;
}
ul.links a:hover, ul.links a.active{border-bottom-color:var(--mustard); opacity:1;}
.nav-inner{display:flex; align-items:center; gap:36px;}

.nav-toggle{
  display:none; flex-direction:column; justify-content:center; gap:5px;
  width:36px; height:36px; padding:0; background:none; border:none; cursor:pointer;
}
.nav-toggle span{
  display:block; width:22px; height:2px; border-radius:2px; background:var(--paper);
  transition:transform .2s ease, opacity .2s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background:var(--teal-deep); color:var(--paper); text-decoration:none; text-align:center;
  padding:12px 22px; border-radius:var(--radius); font-weight:600; font-size:0.95rem;
  border:1px solid var(--teal-deep); cursor:pointer; transition:transform .12s ease, background .15s ease;
}
.btn:hover{background:var(--teal); transform:translateY(-1px);}
.btn.secondary{background:transparent; color:var(--teal-deep);}
.btn.secondary:hover{background:rgba(30,42,40,0.06);}
header .btn{background:var(--mustard); color:var(--teal-deep); border-color:var(--mustard);}
header .btn:hover{background:var(--mustard-bright);}
.btn:focus-visible, a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{outline:var(--focus); outline-offset:2px;}

/* Hero — home landing, two-column, fills the viewport fold */
.hero{
  display:grid; grid-template-columns:1.1fr 0.9fr; gap:var(--space-lg); align-items:center;
  flex:1; align-content:center;
}

/* Standard intro on content pages: left-editorial, heading + lead, real
   content follows immediately (no forced fold). The section itself spans the
   full .wrap so text starts at the left gutter; the measure caps the text
   elements (below), never the section, so nothing gets re-centered. */
.intro h1{max-width:26ch;}
.intro p{max-width:var(--measure);}
.intro p:last-child{margin-bottom:0;}

/* Fold modifier: fills the initial viewport and vertically centers its copy —
   used where the fold IS the message (home hero, confirmation pages), so the
   next section always starts at a clean fold regardless of copy length. */
.intro-fold{flex:1; display:flex; flex-direction:column; justify-content:center;}
.eyebrow{
  font-family:'IBM Plex Mono',monospace; text-transform:uppercase; letter-spacing:0.12em;
  font-size:0.78rem; color:var(--rust); margin-bottom:14px; display:block;
}
.lead{font-size:1.15rem; max-width:var(--measure); color:#3b352c;}
.hero-copy p.lead{max-width:46ch;}
.hero-actions{display:flex; gap:14px; margin-top:20px; flex-wrap:wrap;}

/* Shop window panel (signature visual) */
.shopwindow{
  background:var(--teal-deep);
  border:6px solid var(--mustard);
  border-radius:6px;
  padding:0;
  position:relative;
  box-shadow: 0 18px 40px rgba(22,48,47,0.25);
  overflow:hidden;
}
.shopwindow-bar{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 16px; background:rgba(0,0,0,0.15);
  border-bottom:1px solid rgba(224,178,79,0.35);
}
.shopwindow-bar .sign{
  font-family:'IBM Plex Mono',monospace; font-size:0.75rem; color:var(--mustard-bright);
  letter-spacing:0.08em; display:flex; align-items:center; gap:8px;
}
.shopwindow-bar .dot{width:8px; height:8px; border-radius:50%; background:#5FBF8A; box-shadow:0 0 0 3px rgba(95,191,138,0.2);}
.shopwindow-body{padding:20px; min-height:260px; display:flex; flex-direction:column; gap:12px;}
.demo-msg{
  font-family:'IBM Plex Mono',monospace; font-size:0.85rem; padding:10px 14px; border-radius:4px;
  max-width:85%; line-height:1.5;
}
.demo-msg.them{background:rgba(245,240,227,0.08); color:#EDE8DA; align-self:flex-start; border:1px solid rgba(245,240,227,0.12);}
.demo-msg.us{background:var(--mustard); color:var(--ink); align-self:flex-end; font-weight:500;}

/* Feature grid */
.grid3{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-md);}
.card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:28px; position:relative;
}
.card .eyebrow{margin-bottom:10px;}
.card h3{font-size:1.15rem; margin-bottom:8px;}
.card p{color:#4a453b; font-size:0.95rem; margin:0;}

/* Process timeline (real sequence, numbering justified) */
.timeline{display:flex; flex-direction:column; gap:0; border-left:2px solid var(--line); margin-left:14px;}
.timeline .step{position:relative; padding:0 0 40px 32px;}
.timeline .step:last-child{padding-bottom:0;}
.timeline .step::before{
  content:attr(data-n); position:absolute; left:-15px; top:0;
  width:28px; height:28px; border-radius:50%; background:var(--teal-deep); color:var(--mustard-bright);
  font-family:'IBM Plex Mono',monospace; font-size:0.8rem; display:flex; align-items:center; justify-content:center;
}
.timeline h3{font-size:1.1rem; margin-bottom:6px;}
.timeline p{color:#4a453b; margin:0;}

/* Pricing */
.pricing-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-md);}
.price-card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:30px;
  display:flex; flex-direction:column; gap:14px;
}
.price-card.featured{border:2px solid var(--mustard); box-shadow:0 12px 28px rgba(200,155,60,0.16);}
.price-card .amount{font-family:'Lora',serif; font-size:2.1rem; font-weight:700; color:var(--teal-deep);}
.price-card .amount span{font-family:'Inter',sans-serif; font-size:0.9rem; font-weight:500; color:#6b6455;}
.price-card ul{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px; font-size:0.92rem;}
.price-card li::before{content:"— "; color:var(--rust);}

/* Contact form */
.form-grid{display:grid; gap:16px; max-width:520px;}
label{font-size:0.85rem; font-weight:600; color:var(--teal-deep); display:block; margin-bottom:6px;}
input, textarea{
  width:100%; padding:12px 14px; border:1px solid var(--line); border-radius:var(--radius);
  font-family:'Inter',sans-serif; font-size:0.95rem; background:#fff;
}
textarea{resize:vertical; min-height:120px;}

footer{
  border-top:1px solid rgba(224,178,79,0.3); padding:36px 0; margin-top:var(--space-section);
  background:var(--teal-deep);
}
.footer-inner{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px;}
.footer-inner p{margin:0; font-size:0.85rem; color:var(--paper); opacity:0.75;}

/* ============ Chat Widget ============ */
#fd-chat-launcher{
  position:fixed; bottom:22px; right:22px; z-index:100;
  background:var(--teal-deep); color:var(--mustard-bright);
  border:2px solid var(--mustard); border-radius:50px;
  padding:14px 20px; font-family:'IBM Plex Mono',monospace; font-size:0.85rem;
  display:flex; align-items:center; gap:10px; cursor:pointer;
  box-shadow:0 10px 30px rgba(22,48,47,0.3);
  transition:transform .15s ease, bottom .15s ease;
}
#fd-chat-launcher:hover{transform:translateY(-2px);}
#fd-chat-launcher .dot{width:8px; height:8px; border-radius:50%; background:#5FBF8A; box-shadow:0 0 0 3px rgba(95,191,138,0.25);}

#fd-chat-panel{
  position:fixed; bottom:22px; right:22px; z-index:101;
  width:340px; max-width:calc(100vw - 32px); height:460px; max-height:calc(100vh - 100px);
  background:var(--teal-deep); border:2px solid var(--mustard); border-radius:8px;
  display:none; flex-direction:column; overflow:hidden;
  box-shadow:0 20px 50px rgba(22,48,47,0.35);
  transition:bottom .15s ease;
}
#fd-chat-panel.open{display:flex;}
.fd-chat-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 14px; background:rgba(0,0,0,0.18); border-bottom:1px solid rgba(224,178,79,0.3);
}
.fd-chat-head .title{font-family:'IBM Plex Mono',monospace; color:var(--mustard-bright); font-size:0.8rem; letter-spacing:0.06em; display:flex; align-items:center; gap:8px;}
.fd-chat-head .title .dot{width:7px; height:7px; border-radius:50%; background:#5FBF8A;}
.fd-chat-close{background:none; border:none; color:var(--mustard-bright); font-size:1.1rem; cursor:pointer; line-height:1; padding:4px;}
.fd-chat-body{flex:1; overflow-y:auto; padding:14px; display:flex; flex-direction:column; gap:10px;}
.fd-msg{font-family:'IBM Plex Mono',monospace; font-size:0.82rem; padding:9px 12px; border-radius:4px; max-width:85%; line-height:1.45;}
.fd-msg.bot{background:rgba(245,240,227,0.08); color:#EDE8DA; align-self:flex-start; border:1px solid rgba(245,240,227,0.12);}
.fd-msg.user{background:var(--mustard); color:var(--ink); align-self:flex-end; font-weight:500;}
.fd-msg.typing{color:#B9C4C0; font-style:italic;}
.fd-chat-input-row{display:flex; gap:8px; padding:12px; border-top:1px solid rgba(224,178,79,0.25);}
.fd-chat-input-row input{
  flex:1; background:rgba(245,240,227,0.06); border:1px solid rgba(245,240,227,0.18);
  color:#EDE8DA; border-radius:4px; padding:10px 12px; font-family:'Inter',sans-serif; font-size:0.88rem;
}
.fd-chat-input-row input::placeholder{color:#8FA19D;}
.fd-chat-input-row button{
  background:var(--mustard); border:none; color:var(--ink); border-radius:4px; padding:0 16px;
  font-weight:600; cursor:pointer; font-size:0.85rem;
}

/* Events & Ticketing */
.events-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:var(--space-md);}
.event-card{display:flex; flex-direction:column; gap:10px;}
.event-location{color:#4a453b; font-size:0.9rem; margin:0;}
.event-meta{display:flex; justify-content:space-between; align-items:center; margin:6px 0;}
.event-price{font-family:'Lora',serif; font-weight:700; color:var(--teal-deep); font-size:1.15rem;}
.event-spots{font-family:'IBM Plex Mono',monospace; font-size:0.82rem; color:var(--rust);}
.load-more-btn{grid-column:1/-1; justify-self:center; margin-top:var(--space-md);}

.checkout-summary{margin-bottom:32px;}
fieldset.attendee-fields{
  border:1px solid var(--line); border-radius:var(--radius); padding:16px 18px 4px;
  margin:0 0 16px 0; display:grid; gap:14px;
}
fieldset.attendee-fields legend{
  font-family:'IBM Plex Mono',monospace; font-size:0.78rem; text-transform:uppercase;
  letter-spacing:0.08em; color:var(--rust); padding:0 6px;
}
.form-error{color:var(--rust); font-size:0.9rem; margin:12px 0 0 0;}
.form-success{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:24px; margin-top:16px;
}
.rating-group{display:flex; gap:10px; margin-bottom:16px;}
.rating-group label{
  display:flex; align-items:center; justify-content:center; width:40px; height:40px;
  border:1px solid var(--line); border-radius:50%; cursor:pointer; font-weight:600;
  margin-bottom:0; color:var(--teal-deep);
}
.rating-group input{position:absolute; opacity:0; width:0; height:0;}
.rating-group input:checked + label{background:var(--mustard); border-color:var(--mustard);}

/* Tablet: step 3-col grids down to 2-col before collapsing to 1 on phones */
@media (max-width:1000px){
  .grid3, .pricing-grid{grid-template-columns:repeat(2,1fr);}
}

@media (max-width:820px){
  .events-grid{grid-template-columns:1fr;}
  .hero{grid-template-columns:1fr;}
  .grid3, .pricing-grid{grid-template-columns:1fr;}
  .nav-inner{gap:14px;}
  .nav-toggle{display:flex;}
  ul.links{
    display:none; position:absolute; top:100%; left:0; right:0;
    flex-direction:column; gap:0; background:var(--teal-deep);
    border-bottom:1px solid rgba(224,178,79,0.3); padding:4px 24px 12px; z-index:60;
  }
  ul.links.open{display:flex;}
  ul.links li{width:100%;}
  ul.links a{
    display:block; padding:14px 0; font-size:1rem;
    border-bottom:1px solid rgba(245,240,227,0.1);
  }
  ul.links li:last-child a{border-bottom:none;}
}

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