/* =========================================================
   VEDAZ — website styles, built on the Vedaz Design System
   (Midnight theme). Token names match the design system.
   ========================================================= */
:root{
  /* brand palette */
  --midnight-indigo:#0D1B3E;
  --lapis-deep:#1C3A6B;
  --cosmic-blue:#2B5EA7;
  --silver-mist:#C8D0DC;
  --soft-gold:#C9A84C;
  --moonlight-white:#F4F6FB;
  --sacred-ember:#B84A2E;
  --warm-sand:#D4C4A8;

  /* semantic (Midnight) */
  --canvas:var(--midnight-indigo);
  --surface:var(--lapis-deep);
  --surface-warm:var(--warm-sand);
  --ink:var(--silver-mist);
  --ink-heading:var(--soft-gold);
  --ink-muted:rgba(200,208,220,.75);
  --ink-on-warm:var(--midnight-indigo);
  --action:var(--soft-gold);
  --on-action:var(--midnight-indigo);
  --accent:var(--cosmic-blue);
  --on-accent:var(--moonlight-white);
  --signal:var(--sacred-ember);
  --hairline:rgba(200,208,220,.24);
  --border-control:rgba(200,208,220,.6);
  --focus:var(--soft-gold);

  /* type */
  --font-display:"Cormorant Garamond","EB Garamond",Georgia,serif;
  --font-sans:"DM Sans",Nunito,system-ui,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,monospace;

  /* space */
  --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;
  --space-6:24px;--space-8:32px;--space-12:48px;--space-16:64px;

  /* shape */
  --radius-sm:4px;--radius-md:12px;--radius-lg:20px;--radius-full:9999px;
  --petal:var(--radius-lg) var(--radius-sm);

  /* depth */
  --glow-gold:0 0 0 1px rgba(201,168,76,.35),0 0 32px rgba(201,168,76,.18);
  --lift:0 12px 32px rgba(0,0,0,.35);

  /* motion */
  --breath:500ms cubic-bezier(.45,0,.55,1);

  --wrap:1160px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--canvas);
  color:var(--ink);
  font-family:var(--font-sans);
  font-size:1.0625rem;        /* body 17/28 */
  line-height:1.647;
  font-weight:400;
  min-height:100vh;
  overflow-x:hidden;
}
/* grain at 4% over every dark surface */
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:100;opacity:.04;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%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)'/%3E%3C/svg%3E");
}
a{color:inherit}
img,svg{display:block;max-width:100%}
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 var(--space-6)}
@media(max-width:600px){.wrap{padding:0 var(--space-4)}}

/* ---------- type ---------- */
h1,h2,h3{font-family:var(--font-display);color:var(--ink-heading);font-weight:500}
.hero-title{font-size:clamp(2.75rem,6vw,3.5rem);line-height:1.07}      /* hero 56/60 */
h1{font-size:clamp(2.1rem,4.4vw,2.5rem);line-height:1.1}              /* h1 40/44 */
h2{font-size:clamp(1.65rem,3.4vw,1.875rem);line-height:1.2}           /* h2 30/36 */
h3{font-size:1.375rem;line-height:1.27;font-weight:600}               /* h3 22/28 */
.quote{font-family:var(--font-display);font-style:italic;font-size:1.5rem;line-height:1.42;color:var(--ink-heading)}
.label{font-family:var(--font-sans);font-size:.75rem;line-height:1.33;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-muted)}
.label.gold{color:var(--ink-heading)}
.body-sm{font-size:.9375rem;line-height:1.6}
.muted{color:var(--ink-muted)}
.lede{font-size:1.125rem;line-height:1.67;max-width:36em}
.data{font-family:var(--font-mono);font-size:.8125rem;line-height:1.54}

/* ---------- header ---------- */
.site-head{position:sticky;top:0;z-index:20;background:rgba(13,27,62,.86);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--hairline)}
.site-head .wrap{display:flex;align-items:center;justify-content:space-between;height:72px;gap:var(--space-4)}
.brand{text-decoration:none;display:flex;flex-direction:column;line-height:1}
.brand b{font-family:var(--font-display);font-weight:600;letter-spacing:.08em;font-size:1.625rem;color:var(--ink-heading)}
.brand span{margin-top:5px;font-size:.625rem;line-height:1;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-muted)}
.nav{display:flex;align-items:center;gap:var(--space-6)}
.nav a:not(.btn){text-decoration:none;font-size:.75rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-muted);transition:color var(--breath)}
.nav a:not(.btn):hover{color:var(--ink)}
@media(max-width:820px){.nav a:not(.btn){display:none}}

/* ---------- buttons ---------- */
.btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);
  padding:var(--space-3) var(--space-6);min-height:48px;border:1px solid transparent;
  font-family:var(--font-sans);font-size:.9375rem;line-height:1.33;font-weight:500;text-decoration:none;cursor:pointer;
  transition:box-shadow var(--breath),background-color var(--breath),color var(--breath),border-color var(--breath)}
/* primary: four-petal, one per screen */
.btn.primary{background:var(--action);color:var(--on-action);border-radius:var(--petal)}
.btn.primary::after{content:"";position:absolute;inset:0;transform:translateX(-110%);background:linear-gradient(100deg,transparent 20%,rgba(244,246,251,.45) 50%,transparent 80%)}
.btn.primary:hover{box-shadow:var(--glow-gold)}
.btn.primary:hover::after{transform:translateX(110%);transition:transform 300ms ease-in-out}
/* quiet: everything else */
.btn.quiet{background:transparent;color:var(--ink);border-color:var(--border-control);border-radius:var(--radius-sm)}
.btn.quiet:hover{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.btn.sm{min-height:40px;padding:var(--space-2) var(--space-4);font-size:.875rem}
.btn.full{width:100%}
.btn[disabled]{opacity:.5;cursor:wait;box-shadow:none}
.star{width:14px;height:14px;fill:currentColor;flex:none}

/* ---------- hero (cover composition) ---------- */
.hero{position:relative;border-bottom:1px solid var(--hairline);overflow:hidden}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);min-height:min(680px,calc(100vh - 72px))}
.hero-copy{display:flex;flex-direction:column;justify-content:center;padding:var(--space-16) var(--space-12) var(--space-16) max(var(--space-6),calc((100vw - var(--wrap))/2 + var(--space-6)))}
.hero-copy .label{margin-bottom:var(--space-6)}
.hero-copy .hero-title{margin-bottom:var(--space-6)}
.hero-copy .actions{display:flex;flex-wrap:wrap;gap:var(--space-4);margin-top:var(--space-8)}
.hero-art{position:relative;display:flex}
.hero-art .band{width:32px;flex:none;background:var(--lapis-deep);position:relative}
.hero-art .band::after{content:"";position:absolute;left:0;right:0;bottom:0;height:var(--space-16);background:var(--surface-warm)}
.hero-art picture,.hero-art img{flex:1;width:100%;height:100%;object-fit:cover;object-position:50% 45%}
@media(max-width:900px){
  .hero-grid{grid-template-columns:1fr;min-height:0}
  .hero-art{order:-1;height:56vw;max-height:420px}
  .hero-art .band{width:100%;height:16px;position:absolute;bottom:0;left:0;z-index:1}
  .hero-art .band::after{left:auto;width:64px;height:100%}
  .hero-copy{padding:var(--space-12) var(--space-6) var(--space-16)}
}
@media(max-width:600px){.hero-copy{padding:var(--space-8) var(--space-4) var(--space-12)}}

/* ---------- sections ---------- */
section{padding:var(--space-16) 0 calc(var(--space-16) + var(--space-8));border-bottom:1px solid var(--hairline)}
@media(max-width:600px){section{padding:var(--space-12) 0 var(--space-16)}}
.sec-head{max-width:720px;margin-bottom:var(--space-12)}
.sec-head .label{display:block;margin-bottom:var(--space-3)}
.sec-head h2{margin-bottom:var(--space-4)}

/* approach: goddess mark + pillars */
.approach{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:var(--space-12);align-items:start}
.figure{position:relative;border-radius:var(--radius-md);overflow:hidden;border:1px solid var(--hairline)}
.figure img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 22%}
.figure figcaption{position:absolute;left:0;right:0;bottom:0;padding:var(--space-12) var(--space-6) var(--space-6);background:linear-gradient(transparent,rgba(13,27,62,.92) 55%)}
@media(max-width:900px){.approach{grid-template-columns:1fr}.figure img{aspect-ratio:16/11}}
.pillars{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4)}
.pillar{background:var(--surface);border-radius:var(--radius-md);padding:var(--space-6)}
.pillar .num{font-family:var(--font-display);font-weight:600;font-size:1.25rem;color:var(--ink-heading)}
.pillar h3{margin:var(--space-2) 0}
.pillar p{font-size:.9375rem;line-height:1.6}
@media(max-width:560px){.pillars{grid-template-columns:1fr}}
.says{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4);margin-top:var(--space-4)}
.says>div{border-radius:var(--radius-md);padding:var(--space-6)}
.says .no{border:1px solid var(--hairline)}
.says .no p{color:var(--ink-muted);text-decoration:line-through;text-decoration-color:var(--ink-muted)}
.says .yes{background:var(--surface-warm);color:var(--ink-on-warm)}
.says .yes .label{color:var(--ink-on-warm);opacity:.8}
.says p{font-family:var(--font-display);font-size:1.375rem;line-height:1.3;font-weight:500;margin-top:var(--space-2)}
@media(max-width:560px){.says{grid-template-columns:1fr}}

/* readings */
.filter{display:flex;gap:var(--space-1);border-bottom:1px solid var(--hairline);margin-bottom:var(--space-8);overflow-x:auto}
.filter button{font:500 .75rem/1.33 var(--font-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-muted);background:none;border:0;border-bottom:2px solid transparent;margin-bottom:-1px;padding:var(--space-3) var(--space-4);cursor:pointer;white-space:nowrap;transition:color var(--breath),border-color var(--breath)}
.filter button:hover{color:var(--ink)}
.filter button[aria-pressed="true"]{color:var(--ink-heading);border-bottom-color:var(--action)}
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-8) var(--space-6)}
@media(max-width:980px){.cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.cards{grid-template-columns:1fr}}
.card{position:relative;display:flex;flex-direction:column;background:var(--surface);border:1px solid transparent;border-radius:var(--radius-md);padding:var(--space-6)}
.card.featured{border-color:var(--action);box-shadow:var(--glow-gold)}
.card .tag{position:absolute;top:-11px;left:var(--space-6);display:inline-flex;align-items:center;gap:var(--space-1);background:var(--action);color:var(--on-action);font:500 .6875rem/1.45 var(--font-sans);letter-spacing:.08em;padding:2px var(--space-2);border-radius:var(--petal)}
.card .tag .star{width:10px;height:10px}
.card .fmt{display:block;margin-bottom:var(--space-2)}
.card h3{margin-bottom:var(--space-2)}
.card .price{display:flex;align-items:baseline;gap:var(--space-2);font-family:var(--font-display);font-size:2rem;line-height:1.1;font-weight:500;color:var(--ink-heading)}
.card .price small{font:500 .75rem/1 var(--font-sans);letter-spacing:.14em;color:var(--ink-muted)}
.card .turn{font-size:.875rem;color:var(--ink-muted);margin:var(--space-1) 0 var(--space-4)}
.card .blurb{font-size:.9375rem;line-height:1.6}
.card ul{list-style:none;margin:var(--space-4) 0 var(--space-6);padding-top:var(--space-4);border-top:1px solid var(--hairline);display:grid;gap:var(--space-2);font-size:.9375rem;line-height:1.5}
.card li{display:flex;gap:var(--space-2)}
.card li::before{content:"✦";color:var(--ink-heading);font-size:.7rem;line-height:2.1;flex:none}
.card .btn{margin-top:auto}
.note{margin-top:var(--space-8);font-size:.9375rem;color:var(--ink-muted)}
.note a{color:var(--ink-heading)}

/* how it works */
.how{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--space-12);align-items:center}
.how .figure img{aspect-ratio:16/10;object-position:50% 50%}
.steps{list-style:none;display:grid;gap:var(--space-6);counter-reset:s}
.steps li{counter-increment:s;display:grid;grid-template-columns:56px 1fr;gap:var(--space-4);align-items:start}
.steps li::before{content:counter(s,upper-roman);display:grid;place-items:center;width:48px;height:48px;border:1px solid var(--hairline);border-radius:var(--radius-full);font-family:var(--font-display);font-weight:600;font-size:1.25rem;color:var(--ink-heading)}
.steps h3{margin-bottom:var(--space-1)}
.steps p{font-size:.9375rem;line-height:1.6}
@media(max-width:900px){.how{grid-template-columns:1fr}.how .figure{order:-1}}

/* faq */
.faq{max-width:820px}
.faq details{border-bottom:1px solid var(--hairline);padding:var(--space-6) 0}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:var(--space-4);font-family:var(--font-display);font-size:1.375rem;line-height:1.27;font-weight:600;color:var(--ink-heading)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--font-sans);font-weight:400;color:var(--ink-muted);transition:transform var(--breath)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{margin-top:var(--space-3);max-width:44em}
.faq details a{color:var(--ink-heading)}

/* agency panel — closing ceremony */
.agency{display:flex;flex-direction:column;gap:var(--space-3);padding:var(--space-8);background:var(--surface);border:1px solid var(--action);border-radius:var(--radius-md);max-width:820px}
.agency h2{font-style:italic}
.agency p{font-size:1.125rem;line-height:1.67}
.agency .actions{margin-top:var(--space-3)}
.coil{display:block;width:120px;height:16px;margin:0 auto var(--space-12);color:var(--ink-muted)}

/* acknowledgement + footer */
.ack p.quote{color:var(--ink);font-size:1.25rem;max-width:46em}
footer{padding:var(--space-12) 0 var(--space-16);font-size:.875rem;color:var(--ink-muted)}
footer .wrap{display:flex;flex-wrap:wrap;gap:var(--space-6) var(--space-12);justify-content:space-between;align-items:flex-start}
footer nav{display:flex;flex-wrap:wrap;gap:var(--space-6)}
footer nav a{text-decoration:none;font-size:.75rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase}
footer a:hover{color:var(--ink)}
footer p{margin-top:var(--space-2)}

/* ---------- booking ---------- */
.page{padding:var(--space-12) 0 var(--space-16)}
.banner{position:relative;height:220px;border-bottom:1px solid var(--hairline);overflow:hidden}
.banner img{width:100%;height:100%;object-fit:cover;object-position:50% 52%}
.banner::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(13,27,62,.15),rgba(13,27,62,.85))}
@media(max-width:600px){.banner{height:150px}}
.book-grid{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:var(--space-8);align-items:start}
@media(max-width:920px){.book-grid{grid-template-columns:1fr}}
.panel{background:var(--surface);border-radius:var(--radius-md);padding:var(--space-8)}
@media(max-width:600px){.panel{padding:var(--space-6) var(--space-4)}}
.panel+.panel{margin-top:var(--space-6)}
.panel h2 .num{font-weight:600;margin-right:var(--space-2)}
.panel .hint{color:var(--ink-muted);font-size:.9375rem;margin:var(--space-1) 0 var(--space-6)}
.choice{display:grid;gap:var(--space-2)}
.choice label{display:flex;gap:var(--space-4);align-items:flex-start;border:1px solid var(--hairline);border-radius:var(--radius-md);padding:var(--space-4);cursor:pointer;transition:border-color var(--breath),background-color var(--breath)}
.choice label:hover{border-color:var(--border-control)}
.choice input{accent-color:var(--soft-gold);margin-top:7px;flex:none;width:18px;height:18px}
.choice label:has(input:checked){border-color:var(--action);background:rgba(13,27,62,.35)}
.choice .c-name{font-family:var(--font-display);font-size:1.375rem;line-height:1.27;font-weight:600;color:var(--ink-heading)}
.choice .c-meta{font-size:.875rem;color:var(--ink-muted)}
.choice .c-price{margin-left:auto;font-family:var(--font-display);font-size:1.375rem;font-weight:500;color:var(--ink-heading);white-space:nowrap}
.field{display:grid;gap:var(--space-2);margin-bottom:var(--space-6)}
.row{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4)}
@media(max-width:560px){.row{grid-template-columns:1fr}}
.field label,.legend{font-size:.9375rem;color:var(--ink)}
.opt{color:var(--ink-muted);font-size:.8125rem}
input[type=text],input[type=email],input[type=date],input[type=time],textarea{
  width:100%;font:400 1rem/1.5 var(--font-sans);color:var(--moonlight-white);background:var(--canvas);
  border:1px solid var(--border-control);border-radius:var(--radius-sm);padding:var(--space-3) var(--space-4);min-height:48px;
  transition:border-color var(--breath),box-shadow var(--breath)}
input[type=date],input[type=time]{font-family:var(--font-mono);font-size:.9375rem;color-scheme:dark}
input::placeholder,textarea::placeholder{color:rgba(200,208,220,.55)}
textarea{min-height:128px;resize:vertical}
input:hover,textarea:hover{border-color:var(--silver-mist)}
input:focus,textarea:focus{outline:none;border-color:var(--focus);box-shadow:0 0 0 1px var(--focus)}
input:disabled{opacity:.5}
.radios{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.radios label{display:inline-flex;align-items:center;gap:var(--space-2);border:1px solid var(--border-control);border-radius:var(--radius-sm);padding:var(--space-2) var(--space-4);font-size:.9375rem;cursor:pointer;transition:background-color var(--breath),border-color var(--breath)}
.radios label:has(input:checked){background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.radios input{accent-color:var(--soft-gold)}
.check{display:flex;gap:var(--space-3);align-items:flex-start;font-size:.9375rem;line-height:1.6;margin-bottom:var(--space-4)}
.check input{accent-color:var(--soft-gold);width:18px;height:18px;margin-top:4px;flex:none}
.check a{color:var(--ink-heading)}
.hidden{display:none!important}
.summary{position:sticky;top:96px;border:1px solid var(--action)}
.summary .s-name{font-family:var(--font-display);font-size:1.875rem;line-height:1.2;font-weight:500;color:var(--ink-heading);margin:var(--space-2) 0 var(--space-1)}
.summary .s-price{font-family:var(--font-display);font-size:2.5rem;line-height:1.1;font-weight:500;color:var(--ink-heading);margin-top:var(--space-3)}
.summary hr{border:0;border-top:1px solid var(--hairline);margin:var(--space-6) 0}
.summary p{font-size:.9375rem;line-height:1.6}
.summary .btn{margin-top:var(--space-6)}
.privacy-line{margin-top:var(--space-4);font-size:.8125rem;color:var(--ink-muted)}
.err{color:#EC9F88;font-size:.9375rem;margin-top:var(--space-3)} /* sacred-ember lifted for small-text contrast on lapis */
.err:not(:empty){border-left:2px solid var(--signal);padding-left:var(--space-3)}
.err a{color:var(--ink-heading)}

/* ---------- simple pages ---------- */
.prose{max-width:760px}
.prose h1{margin:var(--space-3) 0 var(--space-6)}
.prose h2{margin:var(--space-12) 0 var(--space-3)}
.prose p,.prose li{margin-bottom:var(--space-3)}
.prose ul{padding-left:var(--space-6)}
.prose a{color:var(--ink-heading)}
.prose strong{color:var(--moonlight-white);font-weight:500}
.center{text-align:center;margin-left:auto;margin-right:auto}
.thanks-emblem{width:144px;height:144px;border-radius:var(--radius-full);object-fit:cover;margin:0 auto var(--space-8);border:1px solid var(--action);box-shadow:var(--glow-gold)}

/* ---------- motion ---------- */
.reveal{opacity:0;transform:translateY(12px);transition:opacity 600ms cubic-bezier(.45,0,.55,1),transform 600ms cubic-bezier(.45,0,.55,1)}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
  .btn,.btn.primary:hover::after{transition:none}
  .btn.primary:hover::after{transform:translateX(-110%)}
}

:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
input:focus-visible,textarea:focus-visible{outline:none}
.skip{position:absolute;left:-999px}
.skip:focus{left:16px;top:12px;z-index:99;background:var(--action);color:var(--on-action);padding:var(--space-2) var(--space-4);border-radius:var(--radius-sm)}