/* ============ aura obscura — design system ============ */

/* Metric-matched fallbacks. The webfont stylesheet now loads without blocking the first
   paint, so text appears in a system font and swaps a moment later. These overrides make
   the stand-in occupy the same space as the real font, so the swap barely moves anything.
   Values computed from the actual font metrics (@capsizecss/metrics) — don't hand-edit. */
@font-face{
  font-family:'Nunito fallback';
  src:local('Arial'),local('Helvetica Neue'),local('Helvetica');
  size-adjust:101.39%; ascent-override:99.71%; descent-override:34.82%; line-gap-override:0%;
}
@font-face{
  font-family:'Cormorant fallback';
  src:local('Georgia'),local('Times New Roman'),local('Times');
  size-adjust:88.38%; ascent-override:104.55%; descent-override:32.47%; line-gap-override:0%;
}

:root{
  --ink:#111111;
  --paper:#ffffff;
  --cream:#faf7f2;
  --pink:#ec3ea6;
  --pink-deep:#d42a92;
  --pink-ink:#a30d66; /* headline magenta — ~5:1 contrast on the pink grain */
  --lilac:#cdb2ea;
  --rose:#f4a9c8;
  --grad:linear-gradient(135deg,#f6b8d0 0%,#eea7cd 35%,#d9aede 70%,#c3b2ef 100%);
  --serif:'Cormorant Garamond','Cormorant fallback',Georgia,serif;
  --sans:'Sora',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --disp:'Baloo 2','Arial Rounded MT Bold',var(--sans);
  --max:1120px;
  --rad:14px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--sans);color:var(--ink);background:var(--paper);font-size:16.5px;line-height:1.65;-webkit-font-smoothing:antialiased}
/* height:auto is load-bearing. The width/height attributes on <img> are presentational
   hints that map to the CSS width/height properties. Our CSS sets width but usually not
   height, so the raw pixel height (e.g. 958) would leak through and stretch the image.
   Rules that set height explicitly (.logo img, .press-row img) still win over this. */
img{max-width:100%;display:block;height:auto}
a{color:inherit}
.wrap{max-width:var(--max);margin:0 auto;padding:0 22px}

/* ---- header ---- */
.topbar{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);border-bottom:1px solid #eee}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;height:64px}
.logo{font-family:var(--serif);font-size:1.55rem;letter-spacing:.01em;text-decoration:none;white-space:nowrap}
.logo em{font-style:italic}
nav.main{display:flex;align-items:center;gap:26px}
nav.main a{text-decoration:none;font-size:.95rem;opacity:.85}
nav.main a:hover{opacity:1;text-decoration:underline;text-underline-offset:5px}
.btn{display:inline-block;background:var(--ink);color:#fff;border:none;cursor:pointer;font-family:var(--sans);font-size:.95rem;font-weight:600;padding:12px 26px;border-radius:999px;text-decoration:none;transition:transform .15s ease,background .15s ease}
.btn:hover{background:var(--pink-deep);transform:translateY(-1px)}
.btn.pink{background:var(--pink)}
.btn.pink:hover{background:var(--pink-deep)}
.btn.ghost{background:transparent;color:var(--ink);border:1.5px solid var(--ink)}
.btn.ghost:hover{background:var(--ink);color:#fff;transform:none}
.btn[disabled]{opacity:.45;cursor:not-allowed;transform:none}
.nav-toggle{display:none;background:none;border:none;font-size:1.6rem;cursor:pointer}
@media(max-width:860px){
  nav.main{position:fixed;inset:64px 0 auto 0;background:#fff;flex-direction:column;align-items:flex-start;padding:20px 24px 26px;gap:18px;border-bottom:1px solid #eee;transform:translateY(-130%);transition:transform .25s ease}
  nav.main.open{transform:none}
  .nav-toggle{display:block}
}

/* ---- hero ---- */
.hero{background:var(--grad);position:relative;overflow:hidden}
.hero .wrap{padding:84px 22px 74px;position:relative}
.hero h1{font-family:var(--disp);font-weight:700;font-size:clamp(3rem,9vw,6.4rem);line-height:.95;color:var(--pink-ink);text-transform:uppercase;letter-spacing:.01em;text-shadow:0 2px 0 rgba(255,255,255,.45)}
.hero .sub{margin-top:22px;font-size:1.12rem;max-width:34em}
.hero .cta-row{margin-top:30px;display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.badge{display:inline-block;background:#fff;border-radius:999px;padding:7px 16px;font-size:.85rem;font-weight:600}

/* ---- marquee ---- */
.marquee{background:var(--ink);color:#fff;overflow:hidden;white-space:nowrap}
.marquee:hover .track{animation-play-state:paused}
.marquee .track{display:flex;width:max-content;padding:10px 0;animation:mq 28s linear infinite;font-size:.9rem;letter-spacing:.04em;will-change:transform}
.marquee .track span{flex:none;padding-right:8px}
.marquee a{color:#fff;text-decoration:none}
@keyframes mq{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---- sections ---- */
section{padding:66px 0}
section.tight{padding:44px 0}
h2.sec{font-family:var(--disp);font-weight:700;font-size:clamp(1.7rem,4vw,2.5rem);margin-bottom:14px}
h2.sec .accent{color:var(--pink)}
.lead{font-size:1.08rem;max-width:44em}
.center{text-align:center}
.center .lead{margin:0 auto}

/* ---- tour cards ---- */
.tour-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:22px;margin-top:34px}
.tour-card{border:1.5px solid var(--ink);border-radius:var(--rad);padding:26px;background:#fff;display:flex;flex-direction:column;gap:10px}
.tour-card .city{font-family:var(--disp);font-weight:700;font-size:1.5rem}
.tour-card .flag{font-size:1.3rem;margin-right:8px}
.tour-card .venue{opacity:.75;font-size:.95rem}
.tour-card .dates{font-weight:600}
.tour-card .price{font-size:.95rem}
.tour-card .price strong{font-size:1.15rem}
.tour-card .left{font-size:.85rem;color:var(--pink-deep);font-weight:600}
.tour-card .btn{margin-top:auto;align-self:flex-start}
.soldout{opacity:.55}

/* ---- gallery ---- */
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:20px;margin-top:30px;align-items:start}
.polaroid{background:#fff;border:1px solid #e5e0d8;border-radius:6px;padding:10px 10px 34px;box-shadow:0 8px 22px rgba(0,0,0,.07);transform:rotate(var(--tilt,0deg))}
.gallery figure{margin:0;transform:rotate(var(--tilt,0deg))}
.gallery figure img{width:100%;display:block}
.polaroid .ph{aspect-ratio:4/5;border-radius:3px;background:var(--g,linear-gradient(160deg,#f09,#96f))}
.polaroid figcaption{font-family:var(--serif);font-style:italic;text-align:center;padding-top:9px;font-size:.9rem}

/* ---- press ---- */
.press{background:var(--cream)}
.press-row{display:flex;flex-wrap:wrap;gap:14px 38px;justify-content:center;align-items:center;margin-top:22px;font-family:var(--serif);font-size:1.35rem}
.press-row a{text-decoration:none;opacity:.75}
.press-row a:hover{opacity:1;text-decoration:underline;text-underline-offset:4px}

/* ---- steps ---- */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:22px;margin-top:32px}
.step{border-top:3px solid var(--pink);padding-top:16px}
.step .n{font-family:var(--disp);font-weight:700;color:var(--pink);font-size:1.1rem}
.step h3{margin:6px 0 8px;font-size:1.05rem}

/* ---- aura colors ---- */
.color-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px;margin-top:32px}
.color-card{border-radius:var(--rad);padding:22px;color:#fff;min-height:170px;display:flex;flex-direction:column;gap:8px}
.color-card h3{font-family:var(--disp);font-size:1.3rem}
.color-card p{font-size:.95rem;line-height:1.55}
.color-card.dark{color:var(--ink)}

/* ---- FAQ ---- */
.faq{max-width:760px;margin:28px auto 0}
.faq details{border-bottom:1px solid #e5e0d8;padding:16px 4px}
.faq summary{cursor:pointer;font-weight:600;font-size:1.03rem;list-style:none;display:flex;justify-content:space-between;gap:16px}
.faq summary::after{content:"+";font-family:var(--disp);color:var(--pink);font-size:1.2rem}
.faq details[open] summary::after{content:"–"}
.faq .a{padding:12px 4px 4px;font-size:.98rem}
.faq .a ol{padding-left:22px;margin-top:8px}

/* ---- booking flow ---- */
.book-app{max-width:780px;margin:0 auto}
.crumbs{display:flex;gap:8px;flex-wrap:wrap;font-size:.82rem;margin-bottom:26px}
.crumbs span{padding:6px 14px;border-radius:999px;border:1.5px solid #ddd;color:#999}
.crumbs span.on{border-color:var(--ink);color:var(--ink);font-weight:600}
.crumbs span.done{border-color:var(--pink);color:var(--pink-deep);font-weight:600}
.choice-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}
.choice{border:1.5px solid var(--ink);border-radius:var(--rad);padding:22px;background:#fff;cursor:pointer;text-align:left;font-family:var(--sans);transition:box-shadow .15s ease,transform .15s ease}
.choice:hover{box-shadow:0 8px 24px rgba(0,0,0,.09);transform:translateY(-2px)}
.choice .t{font-family:var(--disp);font-weight:700;font-size:1.2rem}
.choice .d{font-size:.9rem;opacity:.8;margin-top:6px}
.choice .p{margin-top:10px;font-weight:700}
.choice .p small{font-weight:400;opacity:.7}
.slot-day{margin:20px 0 8px;font-weight:700}
.slots{display:flex;flex-wrap:wrap;gap:10px}
.slot{border:1.5px solid var(--ink);background:#fff;border-radius:999px;padding:9px 18px;font-family:var(--sans);font-size:.95rem;cursor:pointer}
.slot:hover{background:var(--pink);border-color:var(--pink);color:#fff}
.slot.sel{background:var(--ink);color:#fff}
.slots-note{font-size:.85rem;opacity:.7;margin-top:14px}
.field{margin-bottom:16px}
.field label{display:block;font-size:.88rem;font-weight:600;margin-bottom:6px}
.field input,.field select,.field textarea{width:100%;padding:12px 14px;border:1.5px solid #ccc;border-radius:10px;font-family:var(--sans);font-size:1rem;background:#fff}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--pink)}
.check{display:flex;gap:10px;align-items:flex-start;font-size:.92rem;margin-bottom:12px}
.check input{margin-top:4px;width:auto}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
@media(max-width:640px){.two-col{grid-template-columns:1fr}}
.summary-box{background:var(--cream);border-radius:var(--rad);padding:20px;margin:20px 0;font-size:.97rem}
.summary-box .row{display:flex;justify-content:space-between;padding:4px 0}
.summary-box .row.total{border-top:1.5px solid var(--ink);margin-top:8px;padding-top:10px;font-weight:700;font-size:1.05rem}
.promo-ok{color:#0a7d38;font-size:.85rem;font-weight:600}
.promo-bad{color:#c02020;font-size:.85rem;font-weight:600}
.demo-note{background:#fff8dc;border:1px solid #eadfa0;border-radius:10px;padding:12px 16px;font-size:.88rem;margin-bottom:26px}
.confirm{background:var(--grad);border-radius:var(--rad);padding:38px;text-align:center}
.confirm h2{font-family:var(--disp);font-size:2rem;color:var(--pink-deep)}
.back-link{background:none;border:none;color:inherit;cursor:pointer;font-family:var(--sans);font-size:.9rem;text-decoration:underline;margin-bottom:18px;padding:0}

/* ---- city page ---- */
.city-hero{background:var(--grad)}
.city-hero .wrap{padding:70px 22px 56px}
.city-hero h1{font-family:var(--disp);font-size:clamp(2.4rem,7vw,4.4rem);color:var(--pink-ink);text-transform:uppercase;line-height:1;text-shadow:0 2px 0 rgba(255,255,255,.45)}
.city-meta{margin-top:14px;font-size:1.05rem}
.info-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:22px;margin-top:30px}
.info-card{background:var(--cream);border-radius:var(--rad);padding:22px}
.info-card h3{font-family:var(--disp);font-size:1.1rem;margin-bottom:8px}
.price-table{width:100%;border-collapse:collapse;margin-top:26px}
.price-table th,.price-table td{text-align:left;padding:13px 14px;border-bottom:1px solid #e5e0d8}
.price-table th{font-size:.82rem;text-transform:uppercase;letter-spacing:.06em;opacity:.7}
.price-table .amt{font-weight:700;white-space:nowrap}

/* ---- events ---- */
.event-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:22px;margin-top:32px}
.event-card{border:1.5px solid var(--ink);border-radius:var(--rad);padding:24px;background:#fff}
.event-card h3{font-family:var(--disp);font-size:1.3rem;color:var(--pink-deep);margin-bottom:8px}
.event-card p{font-size:.95rem}
.inquiry{background:var(--cream);border-radius:var(--rad);padding:30px;margin-top:44px}

/* ---- prose pages ---- */
.prose{max-width:720px;margin:0 auto}
.prose h1{font-family:var(--disp);font-size:2.2rem;margin-bottom:18px}
.prose h2{font-family:var(--disp);font-size:1.3rem;margin:30px 0 10px}
.prose p,.prose li{font-size:.99rem}
.prose ul,.prose ol{padding-left:24px;margin:10px 0}
.prose .updated{font-size:.85rem;opacity:.6;margin-bottom:26px}

/* ---- footer ---- */
footer{background:var(--ink);color:#fff;margin-top:40px}
footer .wrap{padding:54px 22px 40px;display:grid;grid-template-columns:2fr 1fr 1fr;gap:36px}
@media(max-width:760px){footer .wrap{grid-template-columns:1fr}}
footer .logo{color:#fff;font-size:1.7rem}
footer p{font-size:.9rem;opacity:.8;margin-top:10px}
footer h4{font-size:.8rem;text-transform:uppercase;letter-spacing:.08em;opacity:.6;margin-bottom:12px}
footer a{color:#fff;text-decoration:none;font-size:.93rem}
footer li{list-style:none;margin-bottom:9px}
footer a:hover{text-decoration:underline}
.newsletter input{width:100%;padding:12px 14px;border-radius:10px;border:none;font-size:.95rem;margin-bottom:10px}
.newsletter .btn{width:100%;text-align:center;background:var(--pink)}
.fine{border-top:1px solid rgba(255,255,255,.15)}
.fine .wrap{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;padding:18px 22px;font-size:.8rem;opacity:.7}

/* ---- brand font: Nunito standing in for Omnes Pro (Adobe) ---- */
:root{--sans:'Nunito','Nunito fallback',-apple-system,BlinkMacSystemFont,sans-serif;--disp:'Nunito',var(--sans)}
.hero h1,h2.sec,.city-hero h1,.tour-card .city,.choice .t,.color-card h3,.confirm h2,.event-card h3,.prose h1,.prose h2,.step .n,.info-card h3,.slot-day{font-weight:900}
.press-row img{height:22px;width:auto;filter:grayscale(1);opacity:.65}
.press-row a:hover img{opacity:1}
.polaroid .ph img{width:100%;height:100%;object-fit:cover;border-radius:3px}
.phone-row{display:grid;grid-template-columns:150px 1fr;gap:10px}
.pay-methods{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:8px}
.pay-method{border:1.5px solid var(--ink);border-radius:var(--rad);padding:18px;background:#fff;cursor:pointer;text-align:center;font-family:var(--sans);font-weight:800}
.pay-method small{display:block;font-weight:400;opacity:.7;margin-top:4px}
.pay-method:hover{background:var(--cream)}
.qr-box{width:180px;height:180px;margin:14px auto;border:2px dashed #bbb;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:.8rem;opacity:.6;text-align:center}
.lang-toggle{font-size:.85rem;border:1.5px solid var(--ink);border-radius:999px;padding:5px 12px;text-decoration:none}
.sdot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:7px;vertical-align:1px}
.pill.chk{background:#e2f6e9;color:#0a7d38}.pill.nos{background:#fde3e3;color:#c02020}.pill.bkd{background:#eee;color:#555}

/* ---- hero art background ----
   Was a 3 MB PNG on Squarespace's CDN and the site's Largest Contentful Paint (17.9s on
   mobile). Now a self-hosted 361 KB WebP, preloaded in <head> so it isn't discovered late. */
.hero,.city-hero{background:url('/assets/img/hero-art-1000.webp') center/cover no-repeat,var(--grad)}
@media (min-width:821px){.hero,.city-hero{background-image:url('/assets/img/hero-art-1280.webp'),var(--grad)}}
@media (min-width:1600px){.hero,.city-hero{background-image:url('/assets/img/hero-art.webp'),var(--grad)}}

/* real wordmark logo */
.logo img{display:inline-block;vertical-align:middle}
footer .logo img{filter:invert(1)}

/* ---- split hero with real portraits ---- */
.hero .wrap{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:34px;align-items:center}
.hero-visual{position:relative;height:420px}
.hero-visual .polaroid{position:absolute;width:min(60%,250px);margin:0}
.hero-visual .hero-ph{position:absolute;width:min(58%,240px);margin:0;transform:rotate(var(--tilt,0deg))}
.hero-visual .hero-ph img{width:100%;display:block}
.hero-visual .hp1{top:0;left:3%;--tilt:-6deg;z-index:1}
.hero-visual .hp2{top:120px;right:1%;--tilt:5deg;z-index:2}
@media(max-width:860px){
  /* The hero stacks here, so the desktop padding and the fixed-height visual block leave
     a slab of empty pink under the portraits. Trim both: the images occupy ~322px, and
     the section below should start soon after them. */
  .hero .wrap{grid-template-columns:1fr;gap:8px;padding:46px 22px 34px}
  .hero-visual{height:326px;margin-top:10px}
  .hero-visual .polaroid{width:min(52%,220px)}
  .hero-visual .hero-ph{width:min(54%,210px)}
  .hero-visual .hp2{top:90px}
}

/* brand name renders in small caps everywhere — wrap it in .sc, keep the text lowercase */
.sc{font-variant-caps:small-caps;letter-spacing:.05em}

/* about page — stacked mood-ring headers */
.about-heads{display:flex;flex-direction:column;gap:8px;max-width:760px}
.about-heads span{font-family:var(--disp);font-weight:900;line-height:1.08;color:var(--pink-ink);text-shadow:0 2px 0 rgba(255,255,255,.4)}
.about-heads span:nth-child(1){font-size:clamp(1.9rem,4.6vw,3rem)}
.about-heads span:nth-child(2){font-size:clamp(1.4rem,3.2vw,2.1rem);opacity:.92}
.about-heads span:nth-child(3){font-size:clamp(1.2rem,2.6vw,1.7rem);opacity:.82}
.about-heads span:nth-child(4){font-size:clamp(1.05rem,2.2vw,1.4rem);opacity:.72}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Referral-signup surfaces: hidden across the site when admin turns the program's signup
   off (tours.js adds .refsignup-off to <html>). .js-refsignup-only is the inverse — shown
   only when signup is off, e.g. the "paused" note on the affiliate page. */
.refsignup-off .js-refsignup{display:none!important}
.js-refsignup-only{display:none}
.refsignup-off .js-refsignup-only{display:block}

/* ---- skeleton tour cards (reserve layout space before /api/tours resolves) ---- */
/* One opacity pulse per card, not a gradient sweep per bar: opacity animates on the
   compositor, so the placeholder costs no main-thread paint while it's on screen. */
.tour-card.skel{pointer-events:none;user-select:none;animation:skpulse 1.6s ease-in-out infinite;will-change:opacity}
.tour-card.skel .sk{display:flex;align-items:center}
.skel-line{display:block;border-radius:6px;background:#efece7}
.skel-line.b{border-radius:999px;background:#f3dfeb}
@keyframes skpulse{0%,100%{opacity:1}50%{opacity:.6}}
@media (prefers-reduced-motion:reduce){.tour-card.skel{animation:none}}

/* ---- press row: hold each logo's slot so the row doesn't reflow on load ---- */
.press-row a{display:inline-flex;align-items:center;justify-content:center;min-width:92px;min-height:22px}