@font-face{font-family:"Sloop Script";src:url("fonts/Sloop-Script-Regular.ttf") format("truetype");font-display:swap}
@font-face{font-family:"Sloop Script Pro";src:url("fonts/Sloop-Script-Regular.ttf") format("truetype");font-display:swap}
@font-face{font-family:"TAN Mon Cheri";src:url("fonts/tan-mon-cheri.ttf") format("truetype");font-display:swap}
@font-face{font-family:"Tan Mon Cheri";src:url("fonts/tan-mon-cheri.ttf") format("truetype");font-display:swap}
@font-face{font-family:"Garet";src:url("fonts/Garet-Book.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Garet";src:url("fonts/Garet-Heavy.woff2") format("woff2");font-weight:800;font-display:swap}
[data-theme="light"]{--bg:#f4eee8;--surface:#ebe1d6;--raise:#faf6f1;--ink:#352319;--muted:#80552e;--gold:#a97943;--line:rgba(53,35,25,.13);--line2:rgba(53,35,25,.32);--wm:url("img/veillieu-logo-dark.svg")}
[data-theme="dark"]{--bg:#1f150f;--surface:#2c1e15;--raise:#352319;--ink:#f4eee8;--muted:#d4bfac;--gold:#c99a62;--line:rgba(244,238,232,.13);--line2:rgba(244,238,232,.34);--wm:url("img/veillieu-logo-white.svg")}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink);font-family:"Garet",system-ui,sans-serif;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
a{color:var(--muted)}a:hover{color:var(--ink)}
button,input,textarea,select{font:inherit;color:inherit}
button{cursor:pointer}
input::placeholder,textarea::placeholder{color:var(--muted);opacity:.75}
#app{max-width:520px;margin:0 auto;min-height:100dvh;position:relative;background:var(--bg)}
.serif{font-family:"Cormorant Garamond",Georgia,serif;font-weight:400}
.eyebrow{font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted)}
.muted{color:var(--muted)}
.gold{color:var(--gold)}
.rise{animation:rise 520ms cubic-bezier(.2,.7,.2,1) both}
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes dot{0%,80%,100%{opacity:.25}40%{opacity:1}}
@keyframes flip{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
.page{padding:calc(env(safe-area-inset-top) + 72px) 0 calc(env(safe-area-inset-bottom) + 110px)}
.page.bare{padding-top:calc(env(safe-area-inset-top) + 28px);padding-bottom:calc(env(safe-area-inset-bottom) + 40px)}
.pad{padding:0 22px}
.stack{display:flex;flex-direction:column}
.gap4{gap:4px}.gap6{gap:6px}.gap8{gap:8px}.gap10{gap:10px}.gap12{gap:12px}.gap14{gap:14px}.gap16{gap:16px}.gap20{gap:20px}.gap24{gap:24px}
.row{display:flex;align-items:center}
.between{justify-content:space-between}
.wrap{flex-wrap:wrap}
.h1{margin:0;font-family:"Cormorant Garamond",Georgia,serif;font-weight:400;font-size:38px;line-height:1.05;text-wrap:pretty}
.h2{margin:0;font-family:"Cormorant Garamond",Georgia,serif;font-weight:400;font-size:28px;line-height:1.1;text-wrap:pretty}
.h3{font-family:"Cormorant Garamond",Georgia,serif;font-size:22px;line-height:1.15}
.body{margin:0;font-size:13.5px;line-height:1.65;text-wrap:pretty}
.small{font-size:12px;line-height:1.55}
.card{background:var(--surface);border-radius:14px;padding:22px}
.card.ink{background:#352319;color:#f4eee8}
.card.ink .eyebrow,.card.ink .muted{color:#e5d4c5}
.card.line{background:transparent;border:1px solid var(--line)}
.card.raise{background:var(--raise)}
.btn{height:54px;border:0;border-radius:999px;background:var(--ink);color:var(--bg);font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;padding:0 26px;transition:opacity 320ms ease}
.btn:active{transform:scale(.98)}
.btn:disabled{opacity:.4}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--line2)}
.btn.small{height:44px;font-size:10.5px;padding:0 20px}
.btn.light{background:#f4eee8;color:#352319}
.link{border:0;background:transparent;color:var(--muted);font-size:12.5px;text-decoration:underline;text-underline-offset:4px;min-height:44px;padding:0 4px}
.chip{flex:none;height:36px;padding:0 15px;border-radius:999px;border:1px solid var(--line2);background:transparent;font-size:12px;white-space:nowrap}
.chip.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.chips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:0 22px}
.chips::-webkit-scrollbar{display:none}
.field{display:flex;flex-direction:column;gap:6px}
.field>span{font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
.input{width:100%;height:56px;padding:0 2px;border:0;border-bottom:1px solid var(--line2);background:transparent;outline:0;font-family:"Cormorant Garamond",Georgia,serif;font-size:24px;border-radius:0}
.input:focus{border-bottom-color:var(--ink)}
textarea.input{height:auto;min-height:180px;padding:10px 2px;font-size:20px;line-height:1.45;resize:vertical}
.list>*{border-bottom:1px solid var(--line)}
.list{border-top:1px solid var(--line)}
.li{display:flex;align-items:center;gap:14px;min-height:60px;padding:10px 0;text-align:left;width:100%;border-left:0;border-right:0;border-top:0;background:transparent}
.li .t{font-size:14px}.li .s{font-size:11.5px;color:var(--muted);margin-top:3px;line-height:1.45}
.toggle{width:46px;height:28px;flex:none;border-radius:999px;background:var(--line2);position:relative;transition:background 320ms ease;border:0;padding:0}
.toggle::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#faf6f1;box-shadow:0 1px 2px rgba(53,35,25,.3);transition:left 320ms ease}
.toggle.on{background:var(--ink)}.toggle.on::after{left:21px}
.seg{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;padding:4px;border-radius:999px;background:var(--surface)}
.seg button{height:38px;border:0;border-radius:999px;background:transparent;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.seg button.on{background:var(--raise);color:var(--ink);box-shadow:0 1px 2px rgba(53,35,25,.12)}
.top{position:fixed;top:0;left:50%;transform:translateX(-50%);width:100%;max-width:520px;z-index:20;height:calc(env(safe-area-inset-top) + 60px);padding:env(safe-area-inset-top) 14px 0;display:flex;align-items:center;justify-content:space-between;background:var(--bg);border-bottom:1px solid var(--line)}
.wordmark{width:112px;height:30px;background:var(--wm) center/contain no-repeat;border:0}
.iconbtn{width:44px;height:44px;border:0;background:transparent;display:flex;align-items:center;justify-content:center;color:var(--ink)}
.iconbtn svg,.tab svg{stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.tabs{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:520px;z-index:20;padding:8px 6px calc(env(safe-area-inset-bottom) + 8px);display:grid;grid-template-columns:repeat(5,1fr);background:var(--raise);border-top:1px solid var(--line)}
.tab{border:0;background:transparent;display:flex;flex-direction:column;align-items:center;gap:4px;min-height:50px;justify-content:center;color:var(--muted);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase}
.tab.on{color:var(--ink)}
.tab.center span.orb{width:52px;height:52px;margin-top:-22px;border-radius:50%;background:var(--ink);color:var(--bg);display:flex;align-items:center;justify-content:center;box-shadow:0 8px 20px -8px rgba(53,35,25,.6)}
.back{align-self:flex-start;height:44px;margin-left:-8px;padding:0 8px;border:0;background:transparent;display:flex;align-items:center;gap:6px;color:var(--muted);font-size:12px;letter-spacing:.06em}
.sheet-bg{position:fixed;inset:0;z-index:40;background:rgba(53,35,25,.45);animation:rise 320ms ease both}
.sheet{position:fixed;left:50%;bottom:0;transform:translateX(-50%);width:100%;max-width:520px;z-index:41;background:var(--bg);border-radius:22px 22px 0 0;padding:26px 22px calc(env(safe-area-inset-bottom) + 22px);animation:rise 420ms cubic-bezier(.2,.7,.2,1) both;max-height:88dvh;overflow:auto}
.banner{margin:0 16px 14px;padding:12px 16px;border-radius:8px;background:#352319;color:#f4eee8;font-size:12px;line-height:1.55}
.toast{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom) + 96px);transform:translateX(-50%);z-index:50;padding:12px 18px;border-radius:999px;background:#352319;color:#f4eee8;font-size:12px;animation:rise 320ms ease both}
.spinner{width:18px;height:18px;border-radius:50%;border:1px solid var(--line2);border-top-color:var(--gold);animation:spin 1.2s linear infinite}
.dots span{display:inline-block;width:5px;height:5px;margin:0 2px;border-radius:50%;background:var(--muted);animation:dot 1.4s infinite}
.dots span:nth-child(2){animation-delay:.2s}.dots span:nth-child(3){animation-delay:.4s}
.big3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:2px}
.cal button{aspect-ratio:1/1.15;border:0;border-radius:8px;background:transparent;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding-top:8px;gap:4px;font-size:13px}
.cal button.today{background:var(--surface)}
.cal button.sel{background:var(--ink);color:var(--bg)}
.cal .dotrow{display:flex;gap:3px;height:6px}
.cal .dotrow i{width:5px;height:5px;border-radius:50%;background:var(--gold)}
.cal .dotrow i.c{background:var(--ink)}
.cal button.sel .dotrow i.c{background:var(--bg)}
.fan{display:flex;justify-content:center;height:220px;position:relative;margin:10px 0}
.fan button{position:absolute;top:20px;width:112px;height:176px;border-radius:9px;border:1px solid rgba(244,238,232,.25);background:#352319 url("img/back-CULVqvUQ.jpg") center/cover;box-shadow:0 10px 24px -12px rgba(53,35,25,.6);transition:transform 420ms cubic-bezier(.2,.7,.2,1)}
.cardimg{width:100%;aspect-ratio:2/3;border-radius:12px;background:var(--surface) center/cover;animation:flip 620ms cubic-bezier(.2,.7,.2,1) both}
.msg{max-width:88%;padding:14px 16px;border-radius:14px;font-size:14px;line-height:1.6;white-space:pre-wrap;text-wrap:pretty}
.msg.u{align-self:flex-end;background:var(--ink);color:var(--bg)}
.msg.o{align-self:flex-start;background:var(--surface);font-family:"Cormorant Garamond",Georgia,serif;font-size:18px;line-height:1.45}
.composer{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(env(safe-area-inset-bottom) + 74px);width:100%;max-width:520px;z-index:15;padding:10px 16px;background:var(--bg);border-top:1px solid var(--line);display:flex;gap:10px;align-items:flex-end}
.composer textarea{flex:1;min-height:46px;max-height:140px;padding:12px 16px;border-radius:22px;border:1px solid var(--line2);background:var(--raise);outline:0;resize:none;font-size:14px;line-height:1.4}
.thumb{width:64px;height:64px;flex:none;border-radius:8px;background:var(--surface) center/cover}
.hero{height:220px;border-radius:14px;background:var(--surface) center/cover;position:relative;overflow:hidden}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(53,35,25,.6),rgba(53,35,25,0) 60%)}
.hero>div{position:absolute;left:20px;right:20px;bottom:18px;z-index:1;color:#f4eee8}
svg.wheel text{font-family:"Garet",sans-serif}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

.side{display:none}
.space-grid{display:flex;flex-direction:column;gap:24px}
@media (min-width:768px){#app{max-width:760px}.tiles{grid-template-columns:repeat(3,minmax(0,1fr))!important}}
@media (min-width:1024px){
  #app{max-width:none;margin:0;padding-left:264px}
  .top,.tabs{display:none}
  .side{display:flex;position:fixed;left:0;top:0;bottom:0;width:264px;flex-direction:column;padding:30px 18px 24px;border-right:1px solid var(--line);background:var(--raise);overflow:auto;z-index:20}
  .side .wordmark{width:156px;height:42px;margin:0 0 10px 8px}
  .side .nav{height:42px;padding:0 12px;border:0;border-radius:8px;background:transparent;color:var(--muted);font-size:13.5px;display:flex;align-items:center;gap:12px;text-align:left;transition:background 320ms ease,color 320ms ease}
  .side .nav:hover{color:var(--ink)}
  .side .nav.on{background:var(--surface);color:var(--ink)}
  .side .nav svg{stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
  .page{padding:56px 64px 96px;max-width:1160px;margin:0 auto}
  .pad{padding-left:0;padding-right:0}
  .chips{padding:0}
  .page [style*="margin:0 16px"],.page [style*="margin:22px 16px 0"],.page [style*="margin:12px 16px 0"]{margin-left:0!important;margin-right:0!important;width:100%!important}
  .tiles{grid-template-columns:repeat(4,minmax(0,1fr))!important}
  .space-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:28px;align-items:start}
  .recgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:32px;border-top:0}
  .recgrid>*{border-top:1px solid var(--line)}
  .composer{left:calc(50% + 132px);bottom:0;max-width:820px;padding:16px 24px 20px}
  .h1{font-size:46px}
  .fan{height:260px}
  .sheet{max-width:520px}
  .toast{bottom:32px}
  .cal button{aspect-ratio:1/.8}
  #thread{max-width:820px}
}

/* motion: slow settle, no bounce */
:root{--ease-ritual:cubic-bezier(.2,.7,.2,1);--ease-veil:cubic-bezier(.4,0,.2,1)}
.rv{opacity:0;transform:translateY(10px);transition:opacity 620ms var(--ease-veil),transform 620ms var(--ease-veil)}
.rv.in{opacity:1;transform:none}
.tile .art{position:absolute;inset:0;background:center/cover;transition:transform 1200ms var(--ease-ritual)}
.tile:hover .art,.tile:focus-visible .art{transform:scale(1.05)}
.drift{animation:drift 26s ease-in-out infinite alternate;transform-origin:50% 40%}
@keyframes drift{from{transform:scale(1.02)}to{transform:scale(1.1) translate3d(-1.5%,-1%,0)}}
.motes{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.motes i{position:absolute;bottom:-10px;width:3px;height:3px;border-radius:50%;background:#e8cfa6;opacity:0;box-shadow:0 0 8px 2px rgba(232,207,166,.55);animation:mote linear infinite}
@keyframes mote{0%{opacity:0;transform:translate3d(0,0,0)}12%{opacity:.8}80%{opacity:.5}100%{opacity:0;transform:translate3d(18px,-90vh,0)}}
.glowcard::before{content:"";position:absolute;width:260px;height:260px;right:-90px;top:-110px;border-radius:50%;background:radial-gradient(circle,rgba(201,154,98,.28),rgba(201,154,98,0) 70%);animation:breathe 7s ease-in-out infinite}
@keyframes breathe{0%,100%{opacity:.55;transform:scale(1)}50%{opacity:1;transform:scale(1.12)}}
.glowcard>*{position:relative}
svg.wheel.draw circle{stroke-dasharray:1000;stroke-dashoffset:1000;animation:drawring 1.6s var(--ease-veil) forwards}
svg.wheel.draw circle.pl{stroke-dasharray:none;stroke-dashoffset:0;opacity:0;animation:fadein 620ms var(--ease-veil) forwards}
svg.wheel.draw line,svg.wheel.draw text{opacity:0;animation:fadein 900ms var(--ease-veil) .5s forwards}
@keyframes drawring{to{stroke-dashoffset:0}}
@keyframes fadein{to{opacity:1}}
.flipin{animation:flipin 900ms var(--ease-ritual) both}
@keyframes flipin{0%{opacity:0;transform:perspective(900px) rotateY(80deg) scale(.96)}60%{opacity:1}100%{opacity:1;transform:none}}
.fan button{animation:sway 6s ease-in-out infinite}
.fan button:nth-child(2n){animation-delay:-2s}.fan button:nth-child(3n){animation-delay:-4s}
.fan button:hover{filter:brightness(1.12)}
@keyframes sway{0%,100%{margin-top:0}50%{margin-top:-6px}}
.side .nav{position:relative}
.side .nav.on::before{content:"";position:absolute;left:0;top:12px;bottom:12px;width:2px;border-radius:2px;background:var(--gold)}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none}.motes{display:none}}

.jhero{display:flex;align-items:flex-end;padding:28px 24px}
.jhero>div{position:relative!important;left:auto!important;right:auto!important;bottom:auto!important}
.jhero::after{background:linear-gradient(180deg,rgba(31,21,15,.15) 0%,rgba(31,21,15,.55) 45%,rgba(31,21,15,.92) 100%)!important}
.jline{position:relative;border-left:1px solid var(--line2);margin-left:28px}
.jrow{display:flex;align-items:flex-start;gap:16px;width:100%;padding:16px 0 16px 0;border:0;background:transparent;position:relative;margin-left:-28px;transition:background 320ms ease}
.jrow:hover .serif{color:var(--muted)}
.jday{width:56px;flex:none;display:flex;flex-direction:column;align-items:center;gap:4px;padding-top:2px;background:var(--bg)}
.jdot{position:absolute;left:24px;top:24px;width:7px;height:7px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 4px var(--bg)}
.jrow .stack{padding-left:8px}
.jpaper{background:var(--raise);border:1px solid var(--line);border-radius:14px;padding:20px 22px}
.jpaper textarea:focus,.jpaper input:focus{border:0}

.phero{position:relative;overflow:hidden;min-height:240px;margin:0 16px 22px;border-radius:14px;background:#352319;display:flex;align-items:flex-end;padding:26px 22px}
.phero.short{min-height:180px}.phero.tall{min-height:300px}
.phero .art{position:absolute;inset:-4%;background:center/cover}
.phero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(31,21,15,.05) 0%,rgba(31,21,15,.35) 45%,rgba(31,21,15,.9) 100%)}
.phero>.stack{position:relative;z-index:1;width:100%;color:#f4eee8}
.phero .eyebrow,.phero .muted,.phero .small{color:#e5d4c5!important}
.phero .h1,.phero .h2,.phero h1{color:#f4eee8}
.phero .iconbtn{color:#f4eee8}
.phero .gold{color:#e8cfa6}
@media (min-width:1024px){.phero{min-height:320px;margin:0 0 28px;padding:40px 40px}.phero.short{min-height:220px}.phero.tall{min-height:380px}.phero .h1{font-size:56px}}

/* headline fit: no overflow, balanced wraps, no orphan words */
.h1,.h2,.h3,h1,h2,.phero .serif,.serif{overflow-wrap:break-word;hyphens:manual;text-wrap:balance}
.h1{font-size:clamp(30px,8.6vw,38px)}
.h2{font-size:clamp(22px,6.4vw,28px)}
.phero .h1,.phero h1{font-size:clamp(32px,9vw,46px)!important;line-height:1.04;max-width:16ch}
.phero.tall h1{font-size:clamp(36px,10vw,52px)!important}
.phero .eyebrow{line-height:1.6;max-width:100%}
.eyebrow{overflow-wrap:anywhere}
.card .h2,.card .h3,.hero .h2{text-wrap:balance}
.tile .serif{font-size:clamp(17px,4.6vw,21px)!important;text-wrap:balance}
.li .t,.jrow .serif{text-wrap:pretty;overflow-wrap:break-word}
.msg.o{text-wrap:pretty}
.btn{max-width:100%;white-space:normal;text-wrap:balance;line-height:1.35;height:auto;min-height:54px;padding-top:10px;padding-bottom:10px}
@media (max-width:430px){.btn{font-size:10.5px;letter-spacing:.14em;padding-left:18px;padding-right:18px}}
.seg button{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 6px}

@media (max-width:360px){.seg button{font-size:10px;letter-spacing:.08em}.btn{letter-spacing:.16em;padding:0 18px}}
@media (min-width:1024px){.h1{font-size:46px}.h2{font-size:30px}.phero .h1,.phero h1{font-size:56px!important;max-width:18ch}.phero.tall h1{font-size:64px!important}.tile .serif{font-size:22px!important}}

@media (min-width:768px){.top,.tabs,.composer{max-width:760px}.rooms{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media (min-width:1024px){.rooms{grid-template-columns:repeat(2,minmax(0,1fr))!important}.composer{max-width:820px}}

svg.moon{flex:none;display:block;animation:fadein 900ms var(--ease-veil) both}
.cal button svg.moon{margin-top:-2px}
.cal button.sel svg.moon circle:nth-child(2){fill:rgba(244,238,232,.2)}

@media (min-width:1024px){.chips{flex-wrap:wrap;overflow:visible}.cal{max-width:820px}.cal button{aspect-ratio:auto;height:84px}}

.pad>.phero{margin:0}
@media (min-width:1024px){.pad>.phero{margin:0}}

.labelhero{margin:0 auto;width:min(100%, calc(62vh * .8));border-radius:14px;overflow:hidden;aspect-ratio:4/5;background:#352319;animation:fadein 900ms var(--ease-veil) both}
.labelhero svg{display:block;width:100%;height:100%}
.labthumb{width:54px;height:68px;flex:none;border-radius:8px;overflow:hidden;display:block}
.labthumb svg{display:block}
@media (min-width:1024px){.labelhero{width:min(100%, 520px, calc(72vh * .8))}}

.tnav{display:none}
.quoteband{margin:12px 0 0;padding:56px 28px;border-radius:14px;background:#352319;color:#f4eee8;text-align:center;display:flex;flex-direction:column;gap:14px;align-items:center}
.quoteband p{margin:0;font-size:clamp(26px,5vw,40px);font-style:italic;font-weight:300;line-height:1.3;max-width:20ch;text-wrap:balance}
@media (min-width:1024px){
  body.ed .side{display:none}
  body.ed #app{padding-left:0}
  body.ed .tnav{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;position:fixed;top:0;left:0;right:0;height:80px;padding:0 36px;background:var(--bg);border-bottom:1px solid var(--line);z-index:30}
  body.ed .tnav .wordmark{width:150px;height:40px}
  body.ed .tnav .tl{height:40px;padding:0 12px;border:0;background:transparent;color:var(--muted);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;position:relative;white-space:nowrap}
  body.ed .tnav .tl:hover{color:var(--ink)}
  body.ed .tnav .tl.on{color:var(--ink)}
  body.ed .tnav .tl.on::after{content:"";position:absolute;left:12px;right:12px;bottom:4px;height:1px;background:var(--gold)}
  body.ed .page{--gut:max(64px,calc((100vw - 1240px) / 2));padding:80px var(--gut) 0;max-width:none}
  body.ed .phero{margin:0 calc(-1 * var(--gut)) 56px!important;border-radius:0;min-height:min(78vh,760px);padding:0 var(--gut) 72px}
  body.ed .phero.short{min-height:min(52vh,480px)}
  body.ed .phero.tall{min-height:calc(100vh - 80px)}
  body.ed .phero .h1,body.ed .phero h1{font-size:clamp(64px,7vw,108px)!important;line-height:.98;max-width:13ch;letter-spacing:-.01em}
  body.ed .phero .eyebrow{font-size:11px;letter-spacing:.34em}
  body.ed .phero .serif.muted,body.ed .phero p{font-size:22px!important}
  body.ed .phero>.stack{max-width:1240px}
  body.ed .space-grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:40px}
  body.ed .glowcard{padding:48px 52px 40px!important}
  body.ed .glowcard p.serif{font-size:44px!important;line-height:1.12;max-width:22ch}
  body.ed .tiles{grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:14px!important}
  body.ed .tile{aspect-ratio:3/4.6!important}
  body.ed .tile .serif{font-size:24px!important}
  body.ed .quoteband{margin:72px calc(-1 * var(--gut)) 0;border-radius:0;padding:120px var(--gut)}
  body.ed .quoteband p{font-size:60px;max-width:26ch}
  body.ed .composer{left:50%;max-width:860px}
  body.ed .toast{bottom:32px}
  body.ed .labelhero{width:min(100%,560px,calc(70vh * .8))}
  body.ed .page>.pad:first-child:not(:has(.phero)){padding-top:56px}
}

.hx{background-image:var(--hm)!important;background-size:cover;background-position:center}
.hm{background-image:var(--hm)!important;background-size:cover;background-position:center}
@media (min-width:768px){.hx{background-image:var(--hd)!important}}
.jhero.hx::after{background:linear-gradient(180deg,rgba(31,21,15,0) 0%,rgba(31,21,15,.35) 50%,rgba(31,21,15,.88) 100%)!important}

.msgcard{background:#352319 var(--msg) center/cover!important;min-height:340px;display:flex;flex-direction:column;justify-content:flex-end}
.msgcard::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(31,21,15,.1) 0%,rgba(31,21,15,.5) 45%,rgba(31,21,15,.92) 100%);z-index:0}
.msgcard::before{z-index:1}
.msgcard>*{position:relative;z-index:2}
.msgcard{box-shadow:inset 0 0 0 1px rgba(232,207,166,.28)}
@media (min-width:1024px){.msgcard{min-height:460px}}

.mooncard{position:relative;overflow:hidden;border:0;border-radius:14px;padding:24px 22px;background:#1f150f var(--mc) center 30%/cover;display:flex;flex-direction:column;gap:22px;color:#e5d4c5;box-shadow:inset 0 0 0 1px rgba(232,207,166,.25)}
.mooncard::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(31,21,15,.35),rgba(31,21,15,.88))}
.mooncard>*{position:relative}
.mooncard .eyebrow{color:#e8cfa6!important}
.mphases{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding-top:18px;border-top:1px solid rgba(232,207,166,.25)}
.quoteband{position:relative;overflow:hidden;background-size:cover;background-position:center}
.quoteband::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(31,21,15,.55),rgba(31,21,15,.78))}
.quoteband>*{position:relative}
.quoteband::after{content:"";position:absolute;inset:22px;border:1px solid rgba(232,207,166,.35);border-radius:8px;pointer-events:none}
@media (min-width:1024px){body.ed .quoteband::after{inset:40px}}

@media (min-width:1024px){
  body.ed .tnav{background:#2a1d2e;border-bottom:1px solid rgba(232,207,166,.25);--wm:url("img/veillieu-logo-white.svg")}
  body.ed .tnav .wordmark{background-image:url("img/veillieu-logo-white.svg")}
  body.ed .tnav .tl{color:#d9c6d6}
  body.ed .tnav .tl:hover,body.ed .tnav .tl.on{color:#f4eee8}
  body.ed .tnav .tl.on::after{background:#e8cfa6}
}
.top{background:#2a1d2e;border-bottom-color:rgba(232,207,166,.25)}
.top .iconbtn{color:#f4eee8}
.top .wordmark{background-image:url("img/veillieu-logo-white.svg")}
.tabs{background:#2a1d2e;border-top-color:rgba(232,207,166,.25)}
.tab{color:#bfa9bc}.tab.on{color:#f4eee8}
.tab.center span.orb{background:#e8cfa6;color:#2a1d2e}

/* recipe + ritual cards (from the recipe-card kit, v2) */

/* ---------- Brand fonts (licensed; self-host the files in ./fonts/) ----------
   Sloop Script Pro  -> script: recipe/ritual names + "Veillieu" mark
   TAN Mon Cheri     -> display serif: shelf / ritual top line
   Garet             -> sans: purpose, ingredients, meta, VAY-YOU
   Fallbacks keep the preview usable until the files are added. */





/* ---------- Veillieu recipe card system ----------
   One painted vessel background per recipe TYPE + one label component filled from recipe data.
   Drop the 8 exported JPGs into ./vessels/ (vessel-elixir.jpg, etc.). Until then a fog gradient stands in. */
:root{
  --bone:#F4EEE3; --paper:#F3EBDC; --paper-2:#EADFCB;
  --ink:#2C2838; --ink-soft:#5A5266; --gold:#A88A55; --gold-2:#C9B07E;
  --page:#F2EDE4;
  --f-script:"Sloop Script Pro","Pinyon Script",cursive;
  --f-display:"TAN Mon Cheri","Cormorant Garamond",Georgia,serif;
  --f-sans:"Garet","Helvetica Neue",Arial,sans-serif;
}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){ --page:#1d1a1f; } }
:root[data-theme="dark"]{ --page:#1d1a1f; }
*{box-sizing:border-box}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) header{color:#EDE6DA} }
.grid{max-width:1200px;margin:0 auto;padding:24px 16px 64px;display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:28px}

/* ----- card ----- */
.vcard{position:relative;aspect-ratio:4/5;border-radius:18px;overflow:hidden;container-type:inline-size;
  box-shadow:0 18px 40px -22px rgba(20,18,30,.55)}
.vcard .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vcard .fog{position:absolute;inset:0;
  background:
    radial-gradient(40% 30% at 50% 34%, var(--glow) 0%, transparent 70%),
    radial-gradient(120% 80% at 50% 0%, #9DB7BB 0%, #6F8F98 45%, #4D6873 100%)}
.vcard .fog::after{content:"";position:absolute;left:50%;top:14%;width:22%;height:44%;transform:translateX(-50%);
  border-radius:40% 40% 18% 18%/22% 22% 10% 10%;background:linear-gradient(180deg,rgba(30,30,40,.35),rgba(30,30,40,.6));
  box-shadow:0 0 60px 10px var(--glow)}
.vcard .veil{position:absolute;inset:auto 0 0 0;height:48%;
  background:linear-gradient(180deg,transparent,rgba(24,30,38,.28))}

/* ----- label ----- */
.label{position:absolute;left:50%;bottom:5%;transform:translateX(-50%);
  width:64cqi;aspect-ratio:5/4.75;filter:drop-shadow(0 10px 18px rgba(15,15,25,.35))}
.label svg.frame{position:absolute;inset:0;width:100%;height:100%}
.label .txt{position:absolute;inset:10% 12% 8%;display:flex;flex-direction:column;align-items:center;text-align:center}
.type{font:400 2.2cqi/1 var(--f-display);letter-spacing:.22em;text-transform:uppercase;color:var(--accent);margin-top:1%}
.ribbon{position:relative;width:118%;margin:3.2% 0 1.5%}
.ribbon svg{display:block;width:100%;height:auto}
.name{position:absolute;inset:0 15% 14%;display:flex;align-items:center;justify-content:center;
  font-family:var(--f-script);color:var(--ink);line-height:1;white-space:nowrap}
.purpose{font:400 2.5cqi/1.4 var(--f-sans);letter-spacing:.02em;color:var(--ink-soft);margin:1% 4% 0;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.rule{display:flex;align-items:center;gap:2.2cqi;width:56%;margin:3% 0 2.4%}
.rule i{flex:1;height:1px;background:var(--gold)}
.rule b{width:1.5cqi;height:1.5cqi;transform:rotate(45deg);border:1px solid var(--gold)}
.ingr{font:400 1.75cqi/1.55 var(--f-sans);letter-spacing:.18em;text-transform:uppercase;color:var(--ink);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;max-width:92%}
.mark{margin-top:auto;padding-top:2.5%;display:flex;flex-direction:column;align-items:center;gap:.4cqi}
.mark span:first-child{font:3.4cqi/1 var(--f-script);color:var(--ink)}
.mark span:last-child{font:400 1.3cqi/1 var(--f-sans);letter-spacing:.42em;color:var(--gold)}

/* ritual variant */
.label.ritual{width:60cqi;aspect-ratio:5/5.2}
.label.ritual .txt{inset:23% 13% 8%}
.label.ritual .type{margin-top:0;white-space:nowrap;letter-spacing:.16em;font-size:2cqi}
.label.ritual .name-plain{font-family:var(--f-script);color:var(--ink);line-height:1.05;margin:3% 0 1%;white-space:nowrap}
.meta{font:400 1.6cqi/1 var(--f-sans);letter-spacing:.28em;text-transform:uppercase;color:var(--accent);margin-top:1%}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .section-title{color:#EDE6DA} }

.vcard{container-type:inline-size}
.cardhero{width:min(100%,calc(66vh * .8));margin:0 auto}
.labthumb .vcard{border-radius:8px;box-shadow:none}

.say{margin-top:14px;display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 16px;border-radius:999px;border:1px solid rgba(232,207,166,.45);background:rgba(31,21,15,.25);color:#f4eee8}
.wmwrap{border:0;background:transparent;display:flex;flex-direction:column;align-items:center;gap:2px;padding:0}
.wmsay{font-size:8.5px;letter-spacing:.42em;color:#e8cfa6;padding-left:.42em}

.foot{margin-top:72px;padding:56px 22px calc(env(safe-area-inset-bottom) + 120px);background:#2a1d2e;color:#d9c6d6;display:flex;flex-direction:column;gap:28px;align-items:center;text-align:center}
.foot .fwm{width:min(320px,80vw);height:84px;background:url("img/veillieu-logo-white.svg") center/contain no-repeat}
.foot .fsay{font-size:9.5px;letter-spacing:.42em;color:#e8cfa6;margin-top:-18px}
.foot nav{display:flex;flex-wrap:wrap;gap:6px 22px;justify-content:center}
.foot a,.foot button.fl{color:#d9c6d6;font-size:11px;letter-spacing:.2em;text-transform:uppercase;text-decoration:none;background:none;border:0;padding:6px 0}
.foot a:hover,.foot button.fl:hover{color:#f4eee8}
.foot .fine{font-size:10.5px;line-height:1.6;color:#a9939f;max-width:520px}
.foot hr{width:72px;border:0;border-top:1px solid rgba(232,207,166,.35);margin:0}
@media (min-width:1024px){.foot{padding:80px 64px 64px}.page .foot{margin-left:calc(-1 * var(--gut,64px));margin-right:calc(-1 * var(--gut,64px))}body:not(.ed) .page .foot{margin-left:-64px;margin-right:-64px}}

.fan.tarot button{background-image:url("img/tarot/card-back.jpg")}

.top .wordmark{width:128px;height:34px}
@media (min-width:1024px){body.ed .tnav .wordmark{width:176px;height:46px}}

.hgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;border-top:1px solid var(--line)}
.hcell{display:flex;flex-direction:column;gap:6px;padding:16px 14px 16px 0;min-height:168px;border-bottom:1px solid var(--line)}
.hcell:nth-child(2n){padding-left:14px;border-left:1px solid var(--line)}
@media (min-width:768px){.hgrid{grid-template-columns:repeat(3,minmax(0,1fr))}.hcell:nth-child(2n){padding-left:0;border-left:0}.hcell:not(:nth-child(3n+1)){padding-left:16px;border-left:1px solid var(--line)}}
@media (min-width:1024px){.hgrid{grid-template-columns:repeat(4,minmax(0,1fr))}.hcell:not(:nth-child(3n+1)){padding-left:0;border-left:0}.hcell:not(:nth-child(4n+1)){padding-left:16px;border-left:1px solid var(--line)}}
.keep{--gold:#e8cfa6;background:#2a1d2e;color:#f4eee8;border-radius:16px;padding:44px 26px 32px;display:flex;flex-direction:column;gap:32px;max-width:960px;margin:0 auto;width:100%;box-shadow:inset 0 0 0 1px rgba(232,207,166,.35),inset 0 0 0 8px #2a1d2e,inset 0 0 0 9px rgba(232,207,166,.2)}
.keep .kwm{width:min(240px,60vw);height:60px;background:url("img/veillieu-logo-white.svg") center/contain no-repeat}
.keep .kwheel{background:#f4eee8;border-radius:50%;padding:14px;width:min(520px,100%);margin:0 auto;color:#352319;--ink:#352319;--line:rgba(53,35,25,.13);--line2:rgba(53,35,25,.32);--muted:#80552e}
.keep .kbig{border-top:1px solid rgba(232,207,166,.28);border-bottom:1px solid rgba(232,207,166,.28);padding:18px 0;--ink:#f4eee8;--muted:#d9c6d6;color:#f4eee8}
.keep .hgrid,.keep .hcell{border-color:rgba(232,207,166,.28)}
@media (min-width:1024px){.keep{padding:64px 56px 44px}}
@media print{body *{visibility:hidden}.keep,.keep *{visibility:visible}.keep{position:absolute;left:0;top:0;width:100%;max-width:none;border-radius:0;-webkit-print-color-adjust:exact;print-color-adjust:exact}.noprint{display:none}}

.keep .kwheel{aspect-ratio:1;display:flex;align-items:center;justify-content:center;--gold:#a97943}
.keep .kwheel{padding:4%}.keep .kwheel svg{width:100%!important;height:100%!important;max-width:none!important;display:block}
.keep .kbig .big3{text-align:center}

.keep{background:#2a1d2e url("img/covers/cover-natal.jpg") center top/100% auto no-repeat;position:relative}
.keep::before{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(180deg,rgba(14,18,28,.15) 0,rgba(14,18,28,.1) 18%,rgba(42,29,46,.55) 42%,#2a1d2e 62%);pointer-events:none}
.keep>*{position:relative}
.keep{container-type:inline-size}.keep>header{padding-top:0;padding-bottom:0;min-height:calc((100cqw + 52px) * .9 - 6px)}.keep .kbirth{top:calc((100cqw + 52px) * .86)}@media (min-width:1024px){.keep>header{min-height:calc((100cqw + 112px) * .9 - 26px)}.keep .kbirth{top:calc((100cqw + 112px) * .86)}}


.tbd{background:rgba(169,121,67,.16);color:var(--muted);padding:0 4px;border-radius:3px;font-size:.92em}
.lglist{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:8px}.lglist li{font-size:15px;line-height:1.6}

.foot .fsoc{gap:4px 6px;max-width:340px}
.foot .fsoc a{width:44px;height:44px;display:flex;align-items:center;justify-content:center;padding:0;border-radius:50%;transition:color 320ms ease,background 320ms ease}
.foot .fsoc a:hover{background:rgba(232,207,166,.12)}
.foot{gap:22px}
@media (max-width:1023px){.foot .fquick{display:none}}
@media (min-width:1024px){.foot .fsoc{max-width:none}}

@media (max-width:1023px){.foot .fsoc{display:grid;grid-template-columns:repeat(4,44px);gap:6px 18px;justify-content:center}}