/* =========================================================
   CIAO TRAVELS · "Captain CIAO's World" design system
   Brand yellow #FDB61C · Poppins · Kaushan Script accent
   ========================================================= */
@import url("https://fonts.googleapis.com/css2?family=Kaushan+Script&family=Noto+Sans+Tamil:wght@400;600;800&family=Poppins:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,800&display=swap");
/* Maname (Sinhala) declared here, Sinhala range only: its own metrics report zero descent, so Poppins
   stays the line's primary font and sets the line box; vowel signs below the baseline no longer spill */
@font-face{font-family:"Maname";font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/maname/v2/gNMFW3J8RpCx9myIwlMHOo26_Pvg.woff2) format("woff2");unicode-range:U+0964-0965,U+0D81-0DF4,U+1CF2,U+200C-200D,U+25CC,U+111E1-111F4}

:root{
  --y:#FDB61C; --y-300:#FFCB4F; --y-100:#FFF1C7; --y-600:#E39800; --y-ink:#4A3300;
  --ink:#0B0B0C; --ink-2:#141416; --ink-3:#1E1E22; --ink-4:#2A2A30; --steel:#4B4F58; --mist:#A3A3AD;
  --paper:#FFFAEE; --white:#fff; --line:rgba(11,11,12,.12); --line-l:rgba(255,255,255,.12);
  --sl-maroon:#8D153A; --sl-green:#00534E; --sl-orange:#EB7400; --wa:#25D366;
  --r-s:10px; --r:22px; --r-l:36px;
  --sh:0 18px 50px -18px rgba(11,11,12,.35); --sh-y:0 20px 60px -15px rgba(253,182,28,.55); --sh-hard:6px 6px 0 var(--ink);
  --ease:cubic-bezier(.2,.8,.2,1); --ease-back:cubic-bezier(.34,1.56,.64,1);
  --f:"Poppins",system-ui,sans-serif; --f-script:"Kaushan Script",cursive; --f-si:"Maname","Poppins","Sinhala Sangam MN","Iskoola Pota",sans-serif;
  --hdr:84px; --hdr-solid:70px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--hdr) + 12px)}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{font-family:var(--f);font-size:16px;line-height:1.6;color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased;overflow-x:clip;text-rendering:optimizeLegibility}
img,svg,video,canvas{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,select,textarea{font:inherit;color:inherit}
::selection{background:var(--y);color:var(--ink)}
:focus-visible{outline:3px solid var(--y);outline-offset:3px;border-radius:6px}
.sec--y :focus-visible,.bg-y :focus-visible,.sec--paper :focus-visible,.sec--white :focus-visible,.card :focus-visible,.bubble :focus-visible,[data-hero="paper"] .phero :focus-visible,[data-hero="y"] .phero :focus-visible,.hdr.on-y:not(.is-solid) :focus-visible,.skip:focus-visible,.ftr__club :focus-visible{outline-color:var(--ink)}
.sec--y .bg-ink :focus-visible,.sec--y .sec--ink :focus-visible,.bg-y .bg-ink :focus-visible,.sec--paper .bg-ink :focus-visible{outline-color:var(--y)}
.sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:fixed;left:16px;top:-60px;z-index:999;background:var(--y);padding:.7rem 1rem;border-radius:10px;font-weight:700}
.skip:focus{top:12px}

/* grain overlay */
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:300;opacity:.05;
  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='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ---------- layout ---------- */
/* max(…, env(safe-area-inset-*)): with viewport-fit=cover, a landscape iPhone's notch sits over the page's side edge */
.wrap{width:100%;max-width:1320px;margin-inline:auto;padding-inline:max(24px,env(safe-area-inset-left)) max(24px,env(safe-area-inset-right))}
.wrap--wide{max-width:1560px}
.wrap--narrow{max-width:880px}
.sec{position:relative;padding-block:clamp(80px,10vw,160px)}
.sec--tight{padding-block:clamp(56px,6vw,96px)}
.sec--y{background:var(--y);color:var(--ink)}
.sec--y .lead,.sec--y p{color:var(--y-ink)}
/* v3: a dark panel inside a yellow section (.bg-ink, .card--ink, .pass--ink, [data-theme=ink]) keeps its own text colour */
.sec--y :where(.bg-ink,.card--ink,.pass--ink,[data-theme="ink"]) p,.sec--y :where(.bg-ink,.card--ink,.pass--ink,[data-theme="ink"]) .lead{color:inherit}
.sec--ink{background:var(--ink);color:var(--white)}
.sec--ink .lead,.sec--ink p{color:var(--mist)}
.sec--paper{background:var(--paper)}
.sec--white{background:var(--white)}
.grid{display:grid;gap:24px}
.g-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,6vw,96px);align-items:center}
.stack>*+*{margin-top:1rem}
.row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.center{text-align:center}
.mx-auto{margin-inline:auto}
@media (max-width:1024px){.g-4{grid-template-columns:repeat(2,minmax(0,1fr))}.g-3{grid-template-columns:repeat(2,minmax(0,1fr))}.split{grid-template-columns:1fr}}
@media (max-width:640px){.wrap{padding-inline:max(16px,env(safe-area-inset-left)) max(16px,env(safe-area-inset-right))}.g-2,.g-3,.g-4{grid-template-columns:1fr}}

/* ---------- type ---------- */
.display{font-weight:900;text-transform:uppercase;letter-spacing:-.045em;line-height:.86;font-size:clamp(3.2rem,10.5vw,10.5rem)}
.h1{font-weight:900;text-transform:uppercase;letter-spacing:-.04em;line-height:.9;font-size:clamp(2.6rem,6.6vw,6.2rem)}
/* heading scale (v2 · A9): H1 + every section H2 = uppercase 900 display; sentence-case 800 = H3 level only */
.h2{font-weight:900;text-transform:uppercase;letter-spacing:-.04em;word-spacing:.06em;line-height:.94;font-size:clamp(2.1rem,4.8vw,4.4rem);text-wrap:balance}
.h2 .script,.h1 .script,.display .script{text-transform:none;letter-spacing:0}
.h3{font-weight:800;letter-spacing:-.02em;line-height:1.15;font-size:clamp(1.25rem,2vw,1.6rem)}
.h4{font-weight:700;font-size:1.05rem;line-height:1.3}
.lead{font-size:clamp(1.05rem,1.35vw,1.25rem);line-height:1.6;color:var(--steel);max-width:62ch}
.small{font-size:.86rem}.tiny{font-size:.74rem;letter-spacing:.02em}
.muted{color:var(--steel)}.sec--ink .muted{color:var(--mist)}
.script{font-family:var(--f-script);font-weight:400;text-transform:none;letter-spacing:0;color:var(--y)}
.sec--y .script{color:var(--ink)}
/* Maname is Regular-only: small Sinhala stays 400, display sizes use synthesized bold */
.si{font-family:var(--f-si)}
.outline{color:transparent;-webkit-text-stroke:2px var(--outline-c,var(--ink))}
.sec--ink .outline,.bg-ink .outline{--outline-c:var(--white)}
.outline-y{color:transparent;-webkit-text-stroke:2px var(--y)}
.hl{background:linear-gradient(transparent 58%,var(--y) 58% 92%,transparent 92%);padding-inline:.08em}
.sec--y .hl{background:linear-gradient(transparent 58%,var(--white) 58% 92%,transparent 92%)}
.y{color:var(--y)}
.eyebrow{display:inline-flex;align-items:center;gap:.6rem;font-size:.78rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;margin-bottom:1.1rem}
.eyebrow::before{content:"";width:34px;height:2px;background:currentColor;opacity:.9}
.eyebrow svg{width:16px;height:16px}
.sec--ink .eyebrow{color:var(--y)}
.num{font-feature-settings:"tnum";font-variant-numeric:tabular-nums}
.balance{text-wrap:balance}

/* ---------- buttons ---------- */
.btn{--bg:var(--ink);--fg:var(--white);position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.7rem;min-height:52px;padding:.9rem 1.6rem;border-radius:999px;background:var(--bg);color:var(--fg);font-weight:700;font-size:.95rem;letter-spacing:.01em;line-height:1;white-space:nowrap;overflow:hidden;isolation:isolate;transition:transform .35s var(--ease),box-shadow .35s var(--ease),background .25s}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--hov,var(--y));transform:translateY(101%);border-radius:inherit;transition:transform .45s var(--ease)}
.btn:hover::before{transform:translateY(0)}
.btn:hover{color:var(--hfg,var(--ink));transform:translateY(-2px)}
.btn:active{transform:translateY(0) scale(.98)}
.btn--y{--bg:var(--y);--fg:var(--ink);--hov:var(--ink);--hfg:var(--y);box-shadow:var(--sh-y)}
.btn--ink{--bg:var(--ink);--fg:var(--white);--hov:var(--y);--hfg:var(--ink)}
.btn--light{--bg:var(--white);--fg:var(--ink);--hov:var(--y);--hfg:var(--ink)}
.btn--ghost{--bg:transparent;--fg:currentColor;box-shadow:inset 0 0 0 2px currentColor;--hov:var(--y);--hfg:var(--ink)}
.sec--y .btn--ghost{--hov:var(--ink);--hfg:var(--y)}
/* WhatsApp (v2 · A10): an ink pill with a small green glyph; a yellow pill on ink. #25D366 = glyph + "copied" only */
.btn--wa{--bg:var(--ink);--fg:var(--white);--hov:var(--y);--hfg:var(--ink)}
.btn--wa .icon{width:22px;height:22px;stroke-width:2.2}
.btn--wa .icon path:first-child{fill:var(--wa);stroke:var(--wa)}
.btn--wa .icon path:nth-child(2){stroke:var(--white)}
.sec--y .btn--wa,.bg-y .btn--wa,.finale:not(.finale--ink) .btn--wa,.ftr__wall .btn--wa{--hov:var(--white);--hfg:var(--ink)}
.sec--ink .btn--wa,.bg-ink .btn--wa,[data-theme="ink"] .btn--wa,.finale--ink .btn--wa,.btn--wa.btn--on-ink{--bg:var(--y);--fg:var(--ink);--hov:var(--white);--hfg:var(--ink)}
.sec--ink .sec--y .btn--wa,.bg-ink .bg-y .btn--wa,.sec--ink .bg-y .btn--wa{--bg:var(--ink);--fg:var(--white)}
.sec--y .sec--ink .btn--wa,.bg-y .bg-ink .btn--wa,.sec--paper .bg-ink .btn--wa,.sec--paper .sec--ink .btn--wa{--bg:var(--y);--fg:var(--ink)}
/* v3: a light surface inside ink (a white/paper card, .on-light, or .btn--on-light) gets the ink pill back */
.sec--ink :is(.card:not(.card--ink),.sec--paper,.sec--white,.on-light) .btn--wa,.bg-ink :is(.card:not(.card--ink),.sec--paper,.sec--white,.on-light) .btn--wa,[data-theme="ink"] :is(.card:not(.card--ink),.on-light) .btn--wa,.on-light .btn--wa,.btn--wa.btn--on-light{--bg:var(--ink);--fg:var(--white);--hov:var(--y);--hfg:var(--ink)}
.btn--wa.is-copied{--bg:var(--wa);--fg:#06321a}
.btn--wa.is-copied .icon path:first-child{fill:#06321a;stroke:#06321a}
.btn--sm{min-height:42px;padding:.65rem 1.1rem;font-size:.85rem}
.btn--lg{min-height:62px;padding:1.1rem 2rem;font-size:1.02rem}
.btn--block{width:100%}
.btn--comic{border:2.5px solid var(--ink);box-shadow:var(--sh-hard)}
.btn--comic:hover{box-shadow:2px 2px 0 var(--ink);transform:translate(4px,4px)}
.btn--ink.btn--comic{box-shadow:6px 6px 0 var(--y)}.btn--ink.btn--comic:hover{box-shadow:2px 2px 0 var(--y)}
.sec--y .btn--ink.btn--comic,.bg-y .btn--ink.btn--comic{box-shadow:6px 6px 0 var(--white)}.sec--y .btn--ink.btn--comic:hover,.bg-y .btn--ink.btn--comic:hover{box-shadow:2px 2px 0 var(--white)}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}
.plane{display:inline-block;width:20px;height:20px;flex:none;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21 16v-2l-8-5V3.5a1.5 1.5 0 0 0-3 0V9l-8 5v2l8-2.5V19l-2 1.5V22l3.5-1 3.5 1v-1.5L13 19v-5.5z' transform='rotate(90 12 12)'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21 16v-2l-8-5V3.5a1.5 1.5 0 0 0-3 0V9l-8 5v2l8-2.5V19l-2 1.5V22l3.5-1 3.5 1v-1.5L13 19v-5.5z' transform='rotate(90 12 12)'/%3E%3C/svg%3E") center/contain no-repeat;transition:transform .5s var(--ease)}
.btn:hover .plane{animation:takeoff .7s var(--ease) forwards}
@keyframes takeoff{0%{transform:translate(0,0)}45%{transform:translate(26px,-14px);opacity:0}46%{transform:translate(-26px,14px);opacity:0}100%{transform:translate(0,0);opacity:1}}
.icon{width:22px;height:22px;flex:none;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.icon-btn{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:var(--white);color:var(--ink);box-shadow:var(--sh);transition:background .25s var(--ease),color .25s var(--ease),transform .25s var(--ease),box-shadow .25s var(--ease)}
.icon-btn:hover{background:var(--y);transform:translateY(-2px)}

/* ---------- chips / badges / stamps ---------- */
.chip{display:inline-flex;align-items:center;gap:.45rem;min-height:44px;padding:.55rem 1.05rem;border-radius:999px;border:2px solid var(--ink);background:transparent;font-weight:600;font-size:.88rem;transition:.2s var(--ease)}
.chip:hover{background:var(--y-100)}
.chip.is-on,.chip[aria-pressed="true"]{background:var(--ink);color:var(--y)}
.sec--ink .chip{border-color:var(--ink-4);color:var(--white)}
.sec--ink .chip:hover{border-color:var(--y)}
.sec--ink .chip.is-on,.sec--ink .chip[aria-pressed="true"]{background:var(--y);color:var(--ink);border-color:var(--y)}
.badge{display:inline-flex;align-items:center;gap:.35rem;padding:.3rem .7rem;border-radius:999px;background:var(--ink);color:var(--y);font-size:.72rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.badge--y{background:var(--y);color:var(--ink)}
.badge--light{background:var(--white);color:var(--ink)}
.tag-stamp{display:inline-grid;place-items:center;text-align:center;padding:.55rem .9rem;border:3px double currentColor;border-radius:12px;font-weight:900;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;transform:rotate(-8deg);opacity:.9;color:var(--sl-maroon)}
.tag-stamp--round{border-radius:50%;width:112px;height:112px;padding:0;line-height:1.1}

/* ---------- boarding pass ---------- */
.pass{--notch:16px;--pbg:var(--white);position:relative;display:grid;grid-template-columns:1fr 132px;background:var(--pbg);border-radius:var(--r);box-shadow:var(--sh);color:var(--ink);
  -webkit-mask:radial-gradient(circle var(--notch) at calc(100% - 132px) 0,#0000 98%,#000) top/100% 51% no-repeat,radial-gradient(circle var(--notch) at calc(100% - 132px) 100%,#0000 98%,#000) bottom/100% 51% no-repeat;
  mask:radial-gradient(circle var(--notch) at calc(100% - 132px) 0,#0000 98%,#000) top/100% 51% no-repeat,radial-gradient(circle var(--notch) at calc(100% - 132px) 100%,#0000 98%,#000) bottom/100% 51% no-repeat}
.pass__main{padding:22px 24px;min-width:0}
.pass__stub{position:relative;padding:22px 16px;display:flex;flex-direction:column;justify-content:space-between;align-items:center;text-align:center;border-left:2px dashed rgba(11,11,12,.22)}
.pass--y{--pbg:var(--y)}
.pass--ink{--pbg:var(--ink-2);color:var(--white)}
.pass--ink .pass__stub{border-left-color:rgba(255,255,255,.18)}
.pass__label{font-size:.66rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;opacity:.6}
.pass__code{font-weight:900;font-size:2rem;letter-spacing:-.03em;line-height:1}
.barcode{width:100%;height:46px;background:repeating-linear-gradient(90deg,currentColor 0 2px,transparent 2px 4px,currentColor 4px 5px,transparent 5px 8px,currentColor 8px 11px,transparent 11px 12px);opacity:.85}
.pass--v{grid-template-columns:1fr;grid-template-rows:1fr auto;
  -webkit-mask:radial-gradient(circle var(--notch) at 0 calc(100% - 92px),#0000 98%,#000) left/51% 100% no-repeat,radial-gradient(circle var(--notch) at 100% calc(100% - 92px),#0000 98%,#000) right/51% 100% no-repeat;
  mask:radial-gradient(circle var(--notch) at 0 calc(100% - 92px),#0000 98%,#000) left/51% 100% no-repeat,radial-gradient(circle var(--notch) at 100% calc(100% - 92px),#0000 98%,#000) right/51% 100% no-repeat}
.pass--v .pass__stub{border-left:0;border-top:2px dashed rgba(11,11,12,.22);height:92px;flex-direction:row;gap:14px;padding:16px 22px}
@media (max-width:520px){.pass:not(.pass--v){grid-template-columns:1fr 96px;-webkit-mask-position:0 0,0 100%;mask-position:0 0,0 100%}.pass{--notch:12px}.pass:not(.pass--v) .pass__stub{padding:16px 10px}}

/* ---------- comic bubble ---------- */
.bubble{position:relative;display:inline-block;max-width:340px;padding:16px 20px;background:var(--white);color:var(--ink);border:3px solid var(--ink);border-radius:22px;font-weight:600;font-size:.95rem;line-height:1.45;box-shadow:var(--sh-hard)}
.bubble::after{content:"";position:absolute;bottom:-17px;left:34px;width:26px;height:20px;background:var(--white);border:3px solid var(--ink);border-top:0;border-left:0;clip-path:polygon(0 0,100% 0,100% 100%);transform:skewX(-25deg);background:linear-gradient(to top right,var(--ink) calc(50% + 3px),var(--white) calc(50% + 3px))}
.bubble--right::after{left:auto;right:34px;transform:skewX(25deg) scaleX(-1)}
.bubble--top::after{bottom:auto;top:-17px;transform:skewX(-25deg) scaleY(-1)}
.bubble b,.bubble strong{background:var(--y);padding:0 .2em}
.bubble__who{display:block;font-size:.68rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--y-ink);margin-bottom:4px}
.sec--ink .bubble,.sec--y .bubble,.sec--ink .bubble p,.sec--y .bubble p{color:var(--ink)}

/* ---------- mascot ---------- */
.captain{position:relative;pointer-events:none;user-select:none;filter:drop-shadow(0 22px 20px rgba(74,51,0,.22))}
@media (prefers-reduced-motion:no-preference){
  .captain{animation:hover 6s ease-in-out infinite}
  .captain--fly{animation:fly 5s ease-in-out infinite}
}
/* v3: the float animates the individual translate/rotate properties, so a page's own transform (JS choreography,
   entrance keyframes on `transform`) composes with it instead of being overridden */
@keyframes hover{0%,100%{translate:0 0}50%{translate:0 -16px}}
@keyframes fly{0%,100%{translate:0 0;rotate:-4deg}50%{translate:10px -22px;rotate:2deg}}

/* ---------- marquee ---------- */
.marquee{overflow:hidden;white-space:nowrap;border-block:2px solid currentColor;padding-block:18px;user-select:none}
.marquee__track{display:inline-flex;gap:3rem;align-items:center;animation:marq var(--dur,38s) linear infinite;padding-right:3rem}
.marquee--rev .marquee__track{animation-direction:reverse}
.marquee__item{display:inline-flex;align-items:center;gap:3rem;font-weight:900;font-size:clamp(1.6rem,3.6vw,3.2rem);text-transform:uppercase;letter-spacing:-.03em}
.marquee__item::after{content:"";width:.6em;height:.6em;background:currentColor;-webkit-mask:var(--star) center/contain no-repeat;mask:var(--star) center/contain no-repeat}
:root{--star:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0l2.6 9.4L24 12l-9.4 2.6L12 24l-2.6-9.4L0 12l9.4-2.6z'/%3E%3C/svg%3E")}
@keyframes marq{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.marquee__track{animation:none}}

/* ---------- tilt ---------- */
.tilt{transform-style:preserve-3d;transform:perspective(1000px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .5s var(--ease);will-change:transform}
.tilt.is-tilting{transition:transform .08s linear}
.tilt__layer{transform:translateZ(calc(var(--d,30) * 1px))}
.tilt__glare{position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(circle at var(--gx,50%) var(--gy,50%),rgba(255,255,255,.35),transparent 55%);opacity:0;transition:opacity .3s}
.tilt.is-tilting .tilt__glare{opacity:1}

/* ---------- photo cards ---------- */
.photo{position:relative;display:block;overflow:hidden;border-radius:var(--r);background:var(--ink-3);isolation:isolate;aspect-ratio:4/5}
.photo--wide{aspect-ratio:16/10}.photo--tall{aspect-ratio:3/4.4}.photo--sq{aspect-ratio:1}
.photo img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.photo:hover img{transform:scale(1.07)}
.photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(11,11,12,.82));z-index:1;pointer-events:none}
.photo__cap{position:absolute;left:20px;right:20px;bottom:18px;z-index:2;color:var(--white)}
.photo__cap .h3{color:var(--white)}
.photo__tl{position:absolute;top:16px;left:16px;z-index:2}

/* ---------- cards ---------- */
.card{background:var(--white);border-radius:var(--r);padding:28px;box-shadow:var(--sh);position:relative}
.card--ink{background:var(--ink-2);color:var(--white)}
.card--y{background:var(--y)}
.card--line{background:transparent;box-shadow:none;border:2px solid var(--ink)}
.card--comic{border:2.5px solid var(--ink);box-shadow:var(--sh-hard)}
.sec--ink .card--line{border-color:var(--ink-4)}

/* ---------- stats ---------- */
.stat__n{font-weight:900;font-size:clamp(2.8rem,6vw,5.4rem);line-height:.9;letter-spacing:-.05em}
.stat__l{font-size:.86rem;font-weight:600;opacity:.75;margin-top:.4rem}

/* ---------- backgrounds ---------- */
.halftone{background-image:radial-gradient(rgba(11,11,12,.16) 1.4px,transparent 1.6px);background-size:14px 14px}
.halftone-y{background-image:radial-gradient(rgba(253,182,28,.22) 1.4px,transparent 1.6px);background-size:14px 14px}
.bg-y{background:var(--y)}.bg-ink{background:var(--ink);color:var(--white)}
.rays{background:repeating-conic-gradient(from 0deg at 50% 60%,rgba(255,255,255,.18) 0 6deg,transparent 6deg 18deg)}
.cape{display:block;width:100%;height:clamp(50px,7vw,110px);margin-block:-1px}
.cape path{fill:currentColor}

/* ---------- departure board ---------- */
.board{display:inline-flex;gap:4px;font-family:ui-monospace,"SF Mono",Menlo,monospace;font-weight:700}
.board span{display:inline-grid;place-items:center;min-width:1.15em;padding:.18em .12em;background:var(--ink-2);color:var(--y);border-radius:5px;position:relative;box-shadow:inset 0 -1px 0 rgba(255,255,255,.06)}
.board span::after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:rgba(0,0,0,.6)}

/* ---------- forms ---------- */
.field{display:grid;gap:8px}
.field>label,.label{font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.input,.select,.textarea{width:100%;min-height:54px;padding:.85rem 1.05rem;border-radius:14px;border:2px solid var(--ink);background:var(--white);color:var(--ink);font-size:1rem;transition:box-shadow .2s,border-color .2s;appearance:none}
.textarea{min-height:120px;resize:vertical}
.select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B0B0C' stroke-width='2.5'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:18px;padding-right:44px}
.input:focus,.select:focus,.textarea:focus{outline:none;box-shadow:4px 4px 0 var(--ink)}
.sec--ink .input:focus,.sec--ink .select:focus,.sec--ink .textarea:focus,.bg-ink .input:focus,.bg-ink .select:focus,.bg-ink .textarea:focus{box-shadow:4px 4px 0 var(--y);border-color:var(--y)}
.ftr__club .input:focus{box-shadow:4px 4px 0 var(--ink)}
.sec--ink .input,.sec--ink .select,.sec--ink .textarea{background-color:var(--ink-3);border-color:var(--ink-4);color:var(--white)}
.sec--ink .select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FDB61C' stroke-width='2.5'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")}
.seg{display:inline-flex;padding:4px;border-radius:999px;background:rgba(11,11,12,.08);gap:4px;flex-wrap:wrap}
.seg button{min-height:44px;padding:.5rem 1rem;border-radius:999px;font-weight:700;font-size:.88rem}
.seg button[aria-pressed="true"],.seg button.is-on{background:var(--ink);color:var(--y)}
.sec--ink .seg{background:var(--ink-3)}
.sec--ink .seg button[aria-pressed="true"],.sec--ink .seg button.is-on{background:var(--y);color:var(--ink)}
.stepper{display:inline-flex;align-items:center;gap:10px}
.stepper button{width:44px;height:44px;border-radius:50%;border:2px solid currentColor;font-size:1.3rem;font-weight:700;display:grid;place-items:center}
.stepper button:hover{background:var(--y);color:var(--ink);border-color:var(--ink)}
.stepper output{min-width:2ch;text-align:center;font-weight:900;font-size:1.5rem}
input[type=range]{width:100%;accent-color:var(--ink)}
.check{display:flex;gap:.7rem;align-items:flex-start;cursor:pointer}
.check input{width:22px;height:22px;accent-color:var(--ink);flex:none;margin-top:2px}

/* ---------- accordion / tabs ---------- */
.acc{border-top:2px solid currentColor}
.acc details{border-bottom:2px solid currentColor}
.acc summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 4px;font-weight:700;font-size:1.08rem}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{content:"";width:28px;height:28px;flex:none;border-radius:50%;background:var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FDB61C' stroke-width='3'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center/14px no-repeat;transition:transform .35s var(--ease)}
.sec--ink .acc summary::after{background-color:var(--y);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B0B0C' stroke-width='3'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E")}
.acc details[open] summary::after{transform:rotate(45deg)}
.acc__body{padding:0 4px 24px;max-width:72ch}
.tabs{display:flex;gap:6px;flex-wrap:wrap;border-bottom:2px solid currentColor;margin-bottom:28px}
.tab{min-height:48px;padding:.7rem 1.1rem;font-weight:700;border-radius:12px 12px 0 0;opacity:.6}
.tab[aria-selected="true"]{opacity:1;background:var(--ink);color:var(--y)}
.sec--ink .tab[aria-selected="true"]{background:var(--y);color:var(--ink)}

/* ---------- modal / drawer ---------- */
.modal{position:fixed;inset:0;z-index:220;display:grid;place-items:center;padding:20px;background:rgba(11,11,12,.7);backdrop-filter:blur(6px);opacity:0;visibility:hidden;transition:.3s}
.modal.is-open{opacity:1;visibility:visible;transition:opacity .3s,visibility 0s}
.modal[hidden]{display:none}
.modal__box{position:relative;width:min(760px,100%);max-height:88vh;overflow:auto;background:var(--paper);border-radius:var(--r-l);padding:clamp(24px,4vw,44px);transform:translateY(30px) scale(.97);transition:transform .45s var(--ease)}
.modal.is-open .modal__box{transform:none}
.modal__x{position:absolute;top:16px;right:16px}

/* ---------- reveal motion ---------- */
@media (prefers-reduced-motion:no-preference){
  .js .reveal{opacity:0;transform:translateY(40px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
  .js .reveal.is-in{opacity:1;transform:none}
  .js .reveal.is-in.tilt{transform:perspective(1000px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}
  .js .reveal[data-delay="1"]{transition-delay:.08s}.js .reveal[data-delay="2"]{transition-delay:.16s}.js .reveal[data-delay="3"]{transition-delay:.24s}
  .js .reveal[data-delay="4"]{transition-delay:.32s}.js .reveal[data-delay="5"]{transition-delay:.4s}.js .reveal[data-delay="6"]{transition-delay:.48s}
  .js .reveal--scale{transform:scale(.92)}
  .js .reveal--left{transform:translateX(-50px)}
  .js .reveal--right{transform:translateX(50px)}
  .split-w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.06em;margin-bottom:-.06em}
  .split-w>span{display:inline-block;transform:translateY(105%);transition:transform 1s var(--ease)}
  .is-in .split-w>span,.split-w.is-in>span{transform:none}
}

/* =========================================================
   GLOBAL CHROME (header, menu, footer, dock, loader, cursor)
   ========================================================= */
.hdr{position:fixed;inset:0 0 auto;z-index:150;height:var(--hdr);display:flex;align-items:center;color:var(--ink);transition:background .35s,color .35s,transform .45s var(--ease),height .35s}
.hdr.is-dark{color:var(--white)}
.hdr.is-solid{background:rgba(11,11,12,.86);backdrop-filter:blur(14px) saturate(140%);color:var(--white);height:var(--hdr-solid)}
.hdr.is-hidden{transform:translateY(-100%);backdrop-filter:none}
.hdr.is-hidden .hdr__cta{box-shadow:none}
.hdr__in{display:flex;align-items:center;gap:20px;width:100%}
.hdr__logo{display:flex;align-items:center;gap:10px;flex:none}
.hdr__logo img{height:44px;width:auto;transition:height .3s}
.hdr.is-solid .hdr__logo img{height:38px}
.hdr__logo .logo-ink{display:none}
.hdr.on-y:not(.is-solid) .logo-y{display:none}
.hdr.on-y:not(.is-solid) .logo-ink{display:block}
.nav{display:flex;align-items:center;gap:4px;margin-inline:auto}
.nav>a,.nav__dd>button{position:relative;display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:.5rem .85rem;white-space:nowrap;font-weight:600;font-size:.9rem;border-radius:999px;transition:background .2s,color .2s}
.nav>a:hover,.nav__dd>button:hover{background:rgba(127,127,127,.14)}
.nav>a[aria-current="page"]::after,.nav__dd.is-current>button::after{content:"";position:absolute;left:50%;bottom:4px;width:6px;height:6px;border-radius:50%;background:var(--y);transform:translateX(-50%)}
.hdr.on-y:not(.is-solid) .nav>a[aria-current="page"]::after,.hdr.on-y:not(.is-solid) .nav__dd.is-current>button::after{background:var(--ink)}
.nav__dd{position:static}
.nav__dd>button svg{width:14px;height:14px;transition:transform .3s}
.nav__dd.is-open>button svg{transform:rotate(180deg)}
.mega{position:absolute;top:calc(100% - 8px);left:50%;width:min(940px,calc(100vw - 32px));transform:translate(-50%,10px);opacity:0;visibility:hidden;transition:.3s var(--ease);background:var(--ink);color:var(--white);border-radius:var(--r-l);padding:28px;display:grid;grid-template-columns:1.1fr 1fr 230px;gap:24px;box-shadow:0 40px 80px -20px rgba(0,0,0,.6);border:1px solid var(--line-l)}
.nav__dd.is-open .mega{opacity:1;visibility:visible;transform:translate(-50%,0)}
.mega h6{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--y);margin-bottom:12px}
.mega__link{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;font-weight:600;font-size:.92rem;transition:.2s}
.mega__link small{color:var(--mist);font-weight:500}
.mega__link:hover{background:var(--ink-3);color:var(--y)}
/* tour column (ciao.js MEGA_TOURS): at most 6 links, past that the 6th is "Tutti i tour"; no published tour → no column */
.mega__link--all{color:var(--y)}
.mega--no-tours{width:min(640px,calc(100vw - 32px));grid-template-columns:1fr 230px;left:calc(50% - min(470px,50vw - 16px));transform:translate(0,10px)}
.nav__dd.is-open .mega--no-tours{transform:translate(0,0)}
.mega__promo{position:relative;border-radius:22px;background:var(--y);color:var(--ink);padding:18px;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;min-height:310px}
.mega__promo img{position:absolute;right:10px;top:12px;width:126px;height:auto;max-width:none}
.mega__promo b{font-weight:900;font-size:1.25rem;line-height:1;text-transform:uppercase;letter-spacing:-.03em;position:relative}
.hdr__r{display:flex;align-items:center;gap:10px;flex:none}
.hdr.on-y:not(.is-solid) .hdr__cta{--bg:var(--ink);--fg:var(--y);--hov:var(--white);--hfg:var(--ink);box-shadow:none}
.hdr.on-y:not(.is-solid) .burger{background:var(--ink);color:var(--y)}
.lang{display:inline-flex;padding:3px;border-radius:999px;border:2px solid currentColor}
.lang button{min-width:38px;min-height:32px;border-radius:999px;font-size:.75rem;font-weight:800;letter-spacing:.06em}
.lang button[aria-pressed="true"]{background:var(--y);color:var(--ink)}
.hdr.on-y:not(.is-solid) .lang button[aria-pressed="true"]{background:var(--ink);color:var(--y)}
.open-pill{display:inline-flex;align-items:center;gap:8px;font-size:.76rem;font-weight:700;white-space:nowrap}
.open-pill i{width:9px;height:9px;border-radius:50%;background:#9a9a9a}
.open-pill.is-open i{background:#2BD46B;box-shadow:0 0 0 0 rgba(43,212,107,.6);animation:pulse 2s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 9px rgba(43,212,107,0)}100%{box-shadow:0 0 0 0 rgba(43,212,107,0)}}
.burger{display:none;width:48px;height:48px;border-radius:50%;background:var(--y);color:var(--ink);place-items:center}
.burger span{display:block;width:20px;height:2.5px;background:currentColor;border-radius:2px;position:relative;transition:.3s}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:20px;height:2.5px;background:currentColor;border-radius:2px;transition:.3s}
.burger span::before{top:-7px}.burger span::after{top:7px}
.menu-open .burger span{background:transparent}
.menu-open .burger span::before{top:0;transform:rotate(45deg)}
.menu-open .burger span::after{top:0;transform:rotate(-45deg)}
@media (max-width:1320px){.open-pill{display:none}}
@media (max-width:1240px){.nav{gap:0}.nav>a,.nav__dd>button{padding:.5rem .6rem;font-size:.86rem}}
@media (max-width:1060px){.nav,.hdr__cta{display:none}.burger{display:grid}.hdr__r{margin-left:auto}}

.mnav{position:fixed;inset:0;z-index:140;background:var(--y);color:var(--ink);padding:calc(var(--hdr) + 20px) max(24px,env(safe-area-inset-right)) 40px max(24px,env(safe-area-inset-left));display:flex;flex-direction:column;gap:6px;overflow:auto;clip-path:circle(0 at calc(100% - 48px) 42px);transition:clip-path .7s var(--ease);visibility:hidden}
.menu-open .mnav{clip-path:circle(150% at calc(100% - 48px) 42px);visibility:visible}
.mnav a.mnav__l{font-weight:900;font-size:clamp(2rem,9vw,3.4rem);text-transform:uppercase;letter-spacing:-.04em;word-spacing:.06em;line-height:1.05;padding:4px 0;display:flex;align-items:baseline;gap:14px}
.mnav a.mnav__l small{font-size:.8rem;font-weight:700;letter-spacing:.1em;opacity:.55}
.mnav a.mnav__l[aria-current="page"]{-webkit-text-stroke:2px var(--ink);color:transparent}
.mnav__foot{margin-top:auto;padding-top:24px;display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.mnav .captain{position:absolute;right:-30px;bottom:90px;width:min(46vw,240px);opacity:.95}
.menu-open{overflow:hidden}

/* footer (v2 · A18): the office — a yellow wall, the CIAO logotype standing on a black desk, Captain CIAO sitting on it */
.ftr{position:relative;color:var(--ink);background:var(--ink);overflow:hidden}
.ftr__wall{position:relative;background:var(--y);padding-top:clamp(36px,3.4vw,48px);overflow:hidden}
/* the wall: a hard ink cut on top (a new comic panel, so a yellow finale above never melts into it), a comic
   halftone fading down from that edge and a warm lamp glow behind the logo */
.ftr__wall{border-top:3px solid var(--ink)}
.ftr__wall::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(70% 90% at 22% 100%,rgba(255,231,166,.55),rgba(253,182,28,0) 70%)}
.ftr__wall::after{content:"";position:absolute;left:0;right:0;top:0;height:min(220px,60%);pointer-events:none;background-image:radial-gradient(rgba(11,11,12,.13) 1.3px,transparent 1.6px);background-size:12px 12px;-webkit-mask:linear-gradient(#000,transparent);mask:linear-gradient(#000,transparent)}
.ftr__wallin{position:relative;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(28px,5vw,88px);align-items:end}
/* the CIAO letters (viewBox cropped to the wordmark) stand on the desk; Captain CIAO's seat (56% of his height)
   sits on their top edge: logo margin-top = 0.56 × cap height − the 2.5% letter inset, all as % of the brand width */
.ftr__brand{position:relative;width:min(100%,480px);line-height:0}
.ftr__logo{display:block;margin-top:19.4%;color:var(--ink);border-radius:8px}
.ftr__logo svg{display:block;width:100%;height:auto}
.ftr__cap{position:absolute;left:64.5%;top:0;margin-top:1.4%;width:31%;height:auto;max-width:none;pointer-events:none;user-select:none;filter:drop-shadow(0 14px 14px rgba(74,51,0,.25));transition:opacity .35s var(--ease),transform .7s var(--ease-back)}
/* one Captain per viewport: while the finale's flying Captain is on screen he hasn't "landed" on the logo yet */
.fin-fly-on .ftr__cap{opacity:0;transform:translateY(-36px) rotate(-6deg);transition:opacity .2s,transform 0s .2s}
@media (prefers-reduced-motion:reduce){.ftr__cap,.fin-fly-on .ftr__cap{transition:none;transform:none}}
.ftr__say{padding-bottom:clamp(26px,3vw,44px);min-width:0}
.ftr__hello{display:flex;flex-direction:column;align-items:flex-start;gap:0;font-weight:900;font-size:clamp(1.55rem,2.5vw,2.4rem);line-height:1.22;letter-spacing:-.035em}
.ftr__pair{display:inline-flex;align-items:center;gap:.42em;white-space:nowrap}
.ftr__hello .si,.ftr__hello .ta{font-weight:800;letter-spacing:0;font-size:.86em}
.ftr__hello i{width:.2em;height:.2em;border-radius:50%;background:currentColor;flex:none}
.ftr__club{margin-top:clamp(18px,2vw,26px);max-width:470px}
.ftr__clubh{font-size:.9rem;line-height:1.4;color:var(--y-ink)}
.ftr__clubh b{display:inline-block;margin-right:.35em;padding:.15em .55em;border-radius:6px;background:var(--ink);color:var(--y);font-size:.68rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;vertical-align:.12em}
.ftr__club form{display:flex;gap:8px;margin-top:10px}
.ftr__club .input{min-height:48px;border-radius:999px;background:var(--white)}
.ftr__club .btn{flex:none}
.ftr__desk{position:relative;background:var(--ink);color:var(--white);padding:clamp(32px,3vw,40px) 0 16px}
.ftr__desk::before{content:"";position:absolute;left:0;right:0;top:0;height:12px;background:linear-gradient(180deg,#2A2A30,#141416);box-shadow:0 1px 0 rgba(255,255,255,.04)}
.ftr__grid{display:grid;grid-template-columns:1fr 1fr 1.15fr 1.1fr;gap:28px clamp(20px,3vw,48px)}
.ftr__h{font-size:.7rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--y);margin-bottom:8px}
.ftr__links{list-style:none;display:grid;gap:0;font-size:.9rem;color:#d7d7dc}
.ftr__links a{display:inline-flex;align-items:center;min-height:29px}
.ftr__links--num a{font-variant-numeric:tabular-nums}
.ftr a:hover{color:var(--y)}
.ftr__addr{font-size:.92rem;line-height:1.5;color:#d7d7dc;max-width:26ch}
.ftr__air{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:4px 30px;margin-top:clamp(18px,2vw,24px);padding-top:10px;border-top:1px solid var(--line-l)}
.ftr__air img{height:32px;width:auto;filter:brightness(0) invert(1);opacity:.45;transition:opacity .3s,filter .3s}
.ftr__air img:hover{opacity:1;filter:brightness(0) invert(77%) sepia(66%) saturate(1200%) hue-rotate(358deg)}
.ftr__legal{margin-top:10px;padding-right:96px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 24px;font-size:.74rem;color:var(--mist)}
.ftr :focus-visible{outline-color:var(--y)}
.ftr__wall :focus-visible{outline-color:var(--ink)}
.soc{display:flex;gap:10px;margin-top:14px}
.soc a{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;border:1.5px solid var(--ink-4);transition:.25s}
.soc a:hover{background:var(--y);color:var(--ink);border-color:var(--y)}
@media (max-width:900px){.ftr__grid{grid-template-columns:1fr 1fr}}
@media (max-width:640px){
  .ftr__wallin{grid-template-columns:1fr;gap:26px}
  .ftr__say{order:-1;padding-bottom:0}
  .ftr__brand{width:min(100%,430px)}
}
@media (max-width:560px){
  .ftr__club form{flex-direction:column}
  .ftr__club .btn{width:100%}
  .ftr__grid{gap:24px 16px}
  .ftr__legal{padding-right:0;padding-bottom:env(safe-area-inset-bottom)}
  .ftr__air{display:grid;grid-template-columns:repeat(5,auto);justify-content:space-between;gap:2px 10px}.ftr__air img{height:28px}

}

/* captain dock */
.dock{position:fixed;right:calc(20px + env(safe-area-inset-right));bottom:calc(20px + env(safe-area-inset-bottom));z-index:160;display:flex;flex-direction:column;align-items:flex-end;gap:12px;pointer-events:none;transition:opacity .3s var(--ease),transform .45s var(--ease),visibility 0s}
/* v2 · A6/A1: ciao.js adds .is-away while the finale, the footer or a big Captain is in view (and on phones while scrolling down) */
.dock.is-away:not(.is-open){opacity:0;visibility:hidden;transform:translateY(18px);transition:opacity .25s var(--ease),transform .45s var(--ease),visibility 0s .25s}
.dock>*{pointer-events:auto}.dock:not(.is-open) .dock__panel{pointer-events:none}
.dock__btn{position:relative;width:74px;height:74px;border-radius:50%;background:var(--y);border:3px solid var(--ink);box-shadow:4px 4px 0 var(--ink);overflow:hidden;transition:transform .3s var(--ease-back)}
.dock__btn:hover{transform:translateY(-3px) rotate(-6deg)}
.dock__btn:focus-visible{outline:3px solid var(--ink);outline-offset:3px;box-shadow:4px 4px 0 var(--ink),0 0 0 9px var(--y)}
.dock__btn img{position:absolute;width:150%;max-width:none;left:-12%;top:-8%}
.dock__ping{position:absolute;top:2px;right:2px;width:16px;height:16px;border-radius:50%;background:var(--sl-maroon);border:2px solid var(--white)}
.dock__panel{width:min(380px,calc(100vw - 32px));background:var(--paper);border:3px solid var(--ink);border-radius:26px;box-shadow:6px 6px 0 var(--ink);overflow:hidden;transform-origin:bottom right;transform:scale(.6) translateY(20px);opacity:0;visibility:hidden;transition:.35s var(--ease-back)}
.dock.is-open .dock__panel{transform:none;opacity:1;visibility:visible}
.dock__head{display:flex;align-items:center;gap:12px;padding:16px 18px;background:var(--ink);color:var(--white)}
.dock__head img{width:46px;height:46px;border-radius:50%;background:var(--y);object-fit:cover;object-position:50% 8%}
.dock__head b{display:block;font-size:.98rem}
.dock__head small{color:var(--y);font-weight:600}
.dock__body{padding:16px;max-height:min(420px,56vh);overflow:auto;display:flex;flex-direction:column;gap:10px}
.dock__msg{align-self:flex-start;max-width:88%;background:var(--white);border:2px solid var(--ink);border-radius:18px 18px 18px 4px;padding:10px 14px;font-size:.9rem;font-weight:500;line-height:1.45}
.dock__msg--me{align-self:flex-end;background:var(--ink);color:var(--white);border-radius:18px 18px 4px 18px}
.dock__quick{display:flex;flex-wrap:wrap;gap:6px;padding:0 16px 16px}
.dock__quick button,.dock__quick a{min-height:38px;padding:.45rem .85rem;border-radius:999px;border:2px solid var(--ink);font-size:.8rem;font-weight:700;background:var(--white)}
.dock__quick button:hover,.dock__quick a:hover{background:var(--y)}
@media (max-width:767px){.dock{right:calc(14px + env(safe-area-inset-right));bottom:calc(14px + env(safe-area-inset-bottom))}.dock__btn{width:52px;height:52px;border-width:2.5px;box-shadow:3px 3px 0 var(--ink)}.dock__ping{width:13px;height:13px;top:1px;right:1px}}
.menu-open .dock{opacity:0;visibility:hidden}

/* loader + page wipe */
.loader{position:fixed;inset:0;z-index:400;background:var(--y);display:grid;place-items:center;overflow:hidden;isolation:isolate;transition:clip-path .9s var(--ease) .1s;clip-path:inset(0 0 0 0)}
.loader.is-done{clip-path:inset(0 0 100% 0)}
.loader::before{content:"";position:absolute;left:50%;top:50%;width:250vmax;height:250vmax;translate:-50% -50%;z-index:-1;background:repeating-conic-gradient(from 0deg,rgba(255,255,255,.26) 0 5deg,transparent 5deg 15deg);animation:ldrays 12s linear infinite}
.loader::after{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(60% 50% at 50% 52%,rgba(255,231,166,.9),rgba(253,182,28,0) 70%)}
.loader__word{position:relative;z-index:1;font-weight:900;font-size:clamp(5rem,22vw,18rem);letter-spacing:-.06em;line-height:.8;color:var(--ink)}
.loader__word span{display:inline-block;animation:pop .6s var(--ease-back) both}
.loader__word span:nth-child(2){animation-delay:.08s}.loader__word span:nth-child(3){animation-delay:.16s}.loader__word span:nth-child(4){animation-delay:.24s}.loader__word span:nth-child(5){animation-delay:.32s}
.loader.is-go .loader__word{animation:ldgust .55s ease-out .5s both}
.loader__cloud{position:absolute;z-index:0;width:min(560px,70vw);max-width:none;pointer-events:none;animation:ldcloud 2.1s linear both;
  -webkit-mask-image:radial-gradient(50% 50% at 50% 50%,#000 42%,transparent 96%);mask-image:radial-gradient(50% 50% at 50% 50%,#000 42%,transparent 96%)}
.loader__cloud--a{top:6%;right:-12%}
.loader__cloud--b{bottom:4%;left:-6%;animation-duration:2.6s}
/* Captain CIAO, Superman pose: in from bottom-left, past the word, out top-right */
.loader__fly{position:absolute;left:0;top:0;z-index:2;width:min(640px,80vw);transform:translate(-115%,64vh) rotate(-4deg);will-change:transform}
.loader.is-go .loader__fly{animation:ldfly 1.35s cubic-bezier(.4,.06,.32,1) forwards}
.loader__fly img{display:block;width:100%;height:auto;max-width:none;filter:drop-shadow(0 26px 22px rgba(74,51,0,.28))}
.loader__fly i{position:absolute;right:80%;height:6px;border-radius:6px;background:var(--white);transform-origin:right center;animation:ldline .45s ease-out infinite alternate}
.loader__fly i:nth-child(2){top:36%;width:44%}
.loader__fly i:nth-child(3){top:50%;width:62%;height:4px;animation-delay:.12s}
.loader__fly i:nth-child(4){top:64%;width:36%;animation-delay:.24s}
@keyframes pop{from{transform:translateY(60%) scale(.6);opacity:0}}
@keyframes ldrays{to{rotate:360deg}}
@keyframes ldcloud{from{transform:translateX(26vw)}to{transform:translateX(-34vw)}}
@keyframes ldfly{0%{transform:translate(-115%,64vh) rotate(-4deg)}46%{transform:translate(calc(50vw - 50%),calc(50vh - 62%)) rotate(-8deg)}100%{transform:translate(112vw,-12vh) rotate(-15deg) scale(.82)}}
@keyframes ldline{from{transform:scaleX(.5);opacity:.35}to{transform:scaleX(1);opacity:.9}}
@keyframes ldgust{35%{transform:skewX(-9deg) translateX(-1.5%)}70%{transform:skewX(3deg)}}
.wipe{position:fixed;inset:0;z-index:390;background:var(--y);pointer-events:none;transform:translateY(100%)}
.wipe.is-in{transition:transform .55s var(--ease);transform:none}

/* cursor */
.cur{position:fixed;left:0;top:0;z-index:500;pointer-events:none;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:var(--y);box-shadow:0 0 0 2px var(--ink);transition:width .3s,height .3s,margin .3s,opacity .3s,background .3s;opacity:0}
.cur.is-on{opacity:1}
.cur.is-link{width:54px;height:54px;margin:-27px 0 0 -27px;background:rgba(253,182,28,.28)}
@media (hover:none),(pointer:coarse){.cur{display:none}}

/* toast */
.toast{position:fixed;left:50%;bottom:28px;width:max-content;max-width:calc(100vw - 32px);display:flex;align-items:center;gap:8px;z-index:450;transform:translate(-50%,calc(100% + 48px));pointer-events:none;background:var(--ink);color:var(--white);padding:14px 20px;border-radius:16px;border:2px solid var(--y);font-weight:600;font-size:.92rem;transition:transform .45s var(--ease-back);max-width:calc(100vw - 32px)}
.toast.is-on{transform:translate(-50%,0)}

/* page hero (inner pages) */
.phero{position:relative;padding:calc(var(--hdr) + clamp(40px,7vw,110px)) 0 clamp(60px,8vw,120px);overflow:hidden}
.phero__crumb{display:flex;gap:8px;align-items:center;font-size:.8rem;font-weight:600;margin-bottom:20px;opacity:.75}
.phero__crumb a{display:inline-block;padding:12px 6px;margin:-12px -6px}
.phero__crumb a:hover{text-decoration:underline}

/* utility */
.mt-0{margin-top:0}.mt-1{margin-top:.5rem}.mt-2{margin-top:1rem}.mt-3{margin-top:1.5rem}.mt-4{margin-top:2rem}.mt-6{margin-top:3rem}.mt-8{margin-top:4rem}
.mb-2{margin-bottom:1rem}.mb-4{margin-bottom:2rem}.mb-6{margin-bottom:3rem}
.w-full{width:100%}.rel{position:relative}.hide-m{}
@media (max-width:640px){.hide-m{display:none!important}}
@media (min-width:641px){.show-m{display:none!important}}
.noscroll{overflow:hidden}
.canvas3d{position:relative;width:100%;height:100%}
.canvas3d canvas{width:100%!important;height:100%!important;outline:none}
.fallback3d{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}

/* ---------- shared fixes promoted from page reviews ---------- */
[hidden]{display:none!important}
.ta{font-family:"Noto Sans Tamil",var(--f)}
.list-reset{list-style:none;padding:0;margin:0}
.sec--ink .acc,.sec--ink .acc details{border-color:var(--ink-4)}
.toast .icon{width:18px;height:18px;color:var(--y);flex:none}

/* =========================================================
   SYSTEM v2 · shared components (DESIGN.md § System v2)
   status · price · route · tcard · finale · openers · subnav
   ========================================================= */
:root{--subnav-h:64px}

/* ---------- status line (A11) · filled by ciao.js from [data-status] ---------- */
.status{display:inline-flex;align-items:center;gap:.6em;font-weight:700;font-size:.86rem;line-height:1.35}
.status::before{content:"";flex:none;width:9px;height:9px;border-radius:50%;background:#9a9a9a}
.status.is-open::before{background:#2BD46B;box-shadow:0 0 0 0 rgba(43,212,107,.6);animation:pulse 2s infinite}
.status--pill{padding:.62em 1.1em;border-radius:999px;background:var(--ink);color:var(--white)}
.sec--ink .status--pill,.bg-ink .status--pill,[data-theme="ink"] .status--pill{background:var(--ink-3);color:var(--white)}
.sec--y .status--pill,.bg-y .status--pill{color:var(--white)}
@media (prefers-reduced-motion:reduce){.status.is-open::before,.open-pill.is-open i{animation:none}}

/* ---------- price atom (A20) ---------- */
.price{display:inline-flex;flex-direction:column;align-items:flex-start;gap:4px;line-height:1;color:var(--ink)}
.price__top{display:inline-flex;align-items:baseline;gap:.32em;white-space:nowrap}
.price__from{font-size:.7rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--steel)}
.price__n{font-weight:900;font-size:1.6rem;letter-spacing:-.035em}
.price__fn{align-self:flex-start;margin-left:1px;font-size:.78rem;font-weight:800;color:inherit;opacity:.7}
a.price__fn{position:relative;z-index:2;display:inline-grid;place-items:center;min-width:24px;min-height:24px;margin:-8px -8px 0 -9px;text-decoration:none;border-radius:50%}
a.price__fn:hover{opacity:1;background:var(--y)}
.price__pp{font-size:.64rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--steel);white-space:nowrap}
.price--lg .price__n{font-size:clamp(2.3rem,4.2vw,3.4rem)}
.price--lg .price__from{font-size:.8rem}
.price--lg .price__pp{font-size:.72rem}
.price--inv{color:var(--white)}
.price--inv .price__n{color:var(--y)}
.price--inv .price__from,.price--inv .price__pp{color:var(--mist)}
.sec--y .price:not(.price--inv) .price__from,.sec--y .price:not(.price--inv) .price__pp,.bg-y .price:not(.price--inv) .price__from,.bg-y .price:not(.price--inv) .price__pp{color:var(--y-ink)}
/* v3: USD tours (tour.currency "USD") — a small currency tag before the amount, so "US$" reads as deliberate next to € */
.price__cur{display:inline-block;margin-right:.26em;padding:.3em .46em .26em;border-radius:.42em;background:var(--ink);color:var(--y);font-size:.4em;font-weight:800;letter-spacing:.06em;line-height:1;text-decoration:none;vertical-align:.5em;font-variant-numeric:normal}
.price--inv .price__cur,.sec--ink .price:not(.price--inv) .price__cur,.bg-ink .price:not(.price--inv) .price__cur{background:var(--y);color:var(--ink)}
.price--lg .price__cur{font-size:.3em;vertical-align:.95em}

/* ---------- route strip (A4): CMB · KDY · … · CMB ---------- */
.route{display:block}
.route__c{display:flex;flex-wrap:wrap;align-items:center;gap:3px 7px;font-weight:800;font-size:.7rem;letter-spacing:.1em;line-height:1.5;font-variant-numeric:tabular-nums}
.route__c i{width:3px;height:3px;flex:none;border-radius:50%;background:currentColor;opacity:.6}
.route__c b{font-weight:900}
.route__c em{font-style:normal;padding:0 .45em;border:1.5px solid currentColor;border-radius:999px;font-size:.62rem;line-height:1.45;letter-spacing:.04em;opacity:.9}
/* v3 · .route--fit (tour cards): one line; ciao.js folds the last middle stops into "+N" until it fits, the closing code stays */
.route--fit .route__c{flex-wrap:nowrap;white-space:nowrap;overflow:hidden}
.route--fit .route__c>*{flex:none}

/* ---------- the ONE tour card: a CIAO boarding pass (A4) ---------- */
.tcard{--tc-bg:var(--white);--tc-fg:var(--ink);--tc-mute:var(--steel);--tc-perf:rgba(11,11,12,.24);--tc-line:rgba(11,11,12,.16);--tc-stub:88px;--tc-notch:13px;--tc-pad:22px;--tc-hard:var(--ink);--tc-soft:rgba(11,11,12,.18);
  position:relative;display:flex;min-width:0;color:var(--tc-fg);filter:drop-shadow(0 16px 22px var(--tc-soft));transition:transform .45s var(--ease),filter .45s var(--ease)}
.tcard__pass{position:relative;display:flex;flex-direction:column;width:100%;min-width:0;background:var(--tc-bg);border-radius:var(--r);overflow:hidden;
  -webkit-mask:radial-gradient(circle var(--tc-notch) at 0 calc(100% - var(--tc-stub)),#0000 98%,#000) left/51% 100% no-repeat,radial-gradient(circle var(--tc-notch) at 100% calc(100% - var(--tc-stub)),#0000 98%,#000) right/51% 100% no-repeat;
  mask:radial-gradient(circle var(--tc-notch) at 0 calc(100% - var(--tc-stub)),#0000 98%,#000) left/51% 100% no-repeat,radial-gradient(circle var(--tc-notch) at 100% calc(100% - var(--tc-stub)),#0000 98%,#000) right/51% 100% no-repeat}
.tcard__ph{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--ink-3);isolation:isolate}
.tcard__ph img{width:100%;height:100%;object-fit:cover;object-position:50% 0;transform-origin:50% 0;transition:transform 1.2s var(--ease)}
/* the photo carries the agency watermark top-right and faintly low-centre (A5): the ink corner + tab and the
   bottom route gradient bury both */
.tcard__ph::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(44% 62% at 100% 0%,rgba(11,11,12,.7) 0,rgba(11,11,12,.32) 45%,rgba(11,11,12,0) 72%),linear-gradient(0deg,rgba(11,11,12,.97) 0,rgba(11,11,12,.93) 21%,rgba(11,11,12,.66) 32%,rgba(11,11,12,.22) 46%,rgba(11,11,12,0) 58%)}
.tcard__tab{position:absolute;top:0;right:0;z-index:2;display:flex;flex-direction:column;align-items:flex-end;padding:12px 16px 13px 20px;background:var(--ink);color:var(--y);border-bottom-left-radius:18px;font-weight:900;font-size:1.32rem;line-height:.95;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.tcard__tab small{margin-bottom:4px;font-size:.54rem;font-weight:800;letter-spacing:.22em;text-transform:uppercase;color:var(--mist)}
.tcard__badge{position:absolute;left:14px;top:14px;z-index:2;display:inline-flex;align-items:center;padding:.36rem .72rem;border-radius:999px;background:var(--y);color:var(--ink);font-size:.68rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;line-height:1.1}
.tcard__route{position:absolute;left:var(--tc-pad);right:var(--tc-pad);bottom:13px;z-index:2;color:var(--white)}
.tcard__route .route__c{flex-wrap:nowrap;overflow:hidden;white-space:nowrap}
.tcard__route .route__c b{color:var(--y)}
.tcard__main{flex:1;display:flex;flex-direction:column;gap:8px;padding:18px var(--tc-pad) 20px}
.tcard__name{font-weight:800;font-size:clamp(1.3rem,1.7vw,1.55rem);line-height:1.08;letter-spacing:-.03em;text-wrap:balance}
.tcard__link{color:inherit;text-decoration:none}
.tcard__link::after{content:"";position:absolute;inset:0;z-index:1}
.tcard .tcard__dn{display:flex;align-items:center;gap:9px;font-size:.74rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--tc-mute)}
.tcard__dn i{width:4px;height:4px;border-radius:50%;background:currentColor;opacity:.7}
.tcard__stub{position:relative;flex:none;height:var(--tc-stub);display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 calc(var(--tc-pad) - 4px) 0 var(--tc-pad);border-top:2px dashed var(--tc-perf)}
.tcard__acts{position:relative;z-index:2;display:flex;align-items:center;gap:8px;flex:none}
.tcard__slot{display:inline-flex;align-items:center}
.tcard__heart{width:44px;height:44px;flex:none;display:grid;place-items:center;border-radius:50%;border:2px solid var(--tc-line);color:var(--tc-fg);transition:background .25s,border-color .25s,transform .35s var(--ease-back)}
.tcard__heart .icon{width:19px;height:19px}
.tcard__heart:hover{border-color:currentColor;transform:scale(1.06)}
.tcard__heart[aria-pressed="true"]{background:var(--y);border-color:var(--y);color:var(--ink)}
.tcard__heart[aria-pressed="true"] .icon{fill:currentColor}
.tcard__go{width:44px;height:44px;flex:none;display:grid;place-items:center;border-radius:50%;background:var(--ink);color:var(--y);transition:transform .4s var(--ease)}
.tcard__go .icon{width:19px;height:19px}
.tcard:hover{transform:translateY(-6px);filter:drop-shadow(6px 6px 0 var(--tc-hard)) drop-shadow(0 22px 26px var(--tc-soft))}
.tcard:hover .tcard__ph img{transform:scale(1.05)}
.tcard:hover .tcard__go{transform:translateX(4px)}
.tcard :focus-visible{outline-color:var(--ink)}
@supports selector(:has(*)){
  .tcard__link:focus-visible{outline:none}
  .tcard:has(.tcard__link:focus-visible){outline:3px solid var(--tc-hard);outline-offset:5px;border-radius:calc(var(--r) + 4px)}
}
/* sizes */
.tcard--rail{--tc-pad:18px;--tc-stub:82px;flex:none;width:clamp(272px,25vw,326px)}
.tcard--rail .tcard__name{font-size:clamp(1.18rem,1.45vw,1.36rem)}
.tcard--rail .price__n{font-size:1.42rem}
.tcard--rail .tcard__tab{font-size:1.16rem;padding:10px 14px 11px 17px}
.tcard--rail .route__c{gap:3px 5px;font-size:.66rem;letter-spacing:.07em}
/* dark theme (on ink sections, e.g. services packages) */
.tcard--dark{--tc-bg:var(--ink-3);--tc-fg:var(--white);--tc-mute:var(--mist);--tc-perf:rgba(255,255,255,.22);--tc-line:rgba(255,255,255,.2);--tc-hard:var(--y);--tc-soft:rgba(0,0,0,.45)}
.tcard--dark .tcard__go{background:var(--y);color:var(--ink)}
.tcard--dark .tcard__tab{background:var(--ink)}
.tcard--dark :focus-visible{outline-color:var(--y)}
@media (prefers-reduced-motion:reduce){.tcard,.tcard__ph img,.tcard__go{transition:none}.tcard:hover{transform:none}.tcard:hover .tcard__ph img{transform:none}}
/* layout helpers */
/* v3: narrow cards (≈300–380px, e.g. 3 columns at 1024 or a 360px phone) with a page slot in the stub: tighter stub,
   the "a persona · indicativo" line may wrap, and below 340px the decorative arrow gives its room to the slot */
.tcard{container:tcard / inline-size}
@container tcard (max-width:380px){
  .tcard__stub:has(.tcard__slot){gap:8px;padding-inline:16px 12px}
  .tcard__stub:has(.tcard__slot) .tcard__acts{gap:6px}
  .tcard__stub:has(.tcard__slot) .price__pp{white-space:normal;max-width:8.6em;line-height:1.25}
}
@container tcard (max-width:340px){.tcard__acts:has(.tcard__slot) .tcard__go{display:none}}
.tcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:clamp(20px,2.2vw,32px);align-items:stretch}
.tcards--rail{display:flex;gap:clamp(16px,1.8vw,26px);overflow-x:auto;scroll-snap-type:x mandatory;padding:6px 4px 26px;margin-inline:-4px;scrollbar-width:none}
.tcards--rail::-webkit-scrollbar{display:none}
.tcards--rail>.tcard{scroll-snap-align:start}

/* ---------- the shared finale: "Ultima chiamata / Last call" (A2) ---------- */
.finale{--fin-bg:var(--y);--fin-fg:var(--ink);--fin-sub:var(--y-ink);--fin-line-c:var(--ink);position:relative;isolation:isolate;overflow:hidden;background:var(--fin-bg);color:var(--fin-fg);padding:clamp(150px,13vw,200px) 0 clamp(76px,8vw,124px)}
.finale--ink{--fin-bg:var(--ink);--fin-fg:var(--white);--fin-sub:var(--mist)}
.finale__in{position:relative;z-index:2}
.finale__board{display:inline-flex;flex-direction:column;gap:12px;max-width:100%;padding:14px 18px 18px;background:var(--ink);color:var(--y);border-radius:16px;box-shadow:0 0 0 2px var(--ink),8px 8px 0 rgba(11,11,12,.16)}
.finale--ink .finale__board{background:var(--ink-2);box-shadow:inset 0 0 0 1px var(--line-l)}
.finale__meta{display:flex;justify-content:space-between;align-items:center;gap:28px;font-size:.66rem;font-weight:800;letter-spacing:.22em;text-transform:uppercase;color:var(--mist)}
.finale__meta b{color:var(--white);font-weight:900;letter-spacing:.16em}
.finale__state{display:inline-flex;align-items:center;gap:8px;color:var(--y)}
.finale__state i{width:8px;height:8px;border-radius:50%;background:var(--y);box-shadow:0 0 0 3px rgba(253,182,28,.22)}
.finale__flap{display:flex;flex-wrap:wrap;gap:8px 14px;font-size:clamp(1.12rem,2.3vw,1.95rem)}
.finale__w.board{gap:3px;font-weight:800}
.finale__w.board span{min-width:1.08em;padding:.17em .1em;border-radius:5px;background:var(--ink-3);color:var(--y)}
.finale--ink .finale__w.board span{background:var(--ink-4)}
.finale__line{margin-top:clamp(26px,3.2vw,42px);max-width:12.5ch;font-weight:900;text-transform:uppercase;letter-spacing:-.045em;word-spacing:.06em;line-height:.92;font-size:clamp(3rem,8.4vw,8rem);text-wrap:balance}
.finale__line .script{display:inline-block;font-size:.84em;line-height:.9;letter-spacing:0;text-transform:none;color:var(--fin-line-c);rotate:-4deg;padding-inline:.04em}
.finale--ink .finale__line .script{--fin-line-c:var(--y)}
/* v3: the Kaushan word (tilted -4deg) drops its f/g/j/p/y tail below the .92 line box: room for it above the sub */
.finale__line--script{padding-bottom:.2em}
.finale__sub{margin-top:clamp(16px,1.8vw,24px);max-width:44ch;font-size:clamp(1.05rem,1.3vw,1.22rem);font-weight:500;line-height:1.5;color:var(--fin-sub)}
.finale__acts{margin-top:clamp(24px,2.6vw,34px);display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px}
.finale__wa{box-shadow:6px 6px 0 var(--white)}
.finale--ink .finale__wa{box-shadow:6px 6px 0 rgba(255,255,255,.18)}
.finale__link{display:inline-flex;align-items:center;gap:10px;min-height:44px;font-weight:800;font-size:1rem}
.finale__link span{background:linear-gradient(currentColor,currentColor) 0 100%/100% 2px no-repeat;padding-bottom:2px;transition:background-size .35s var(--ease)}
.finale__link .icon{width:20px;height:20px;transition:transform .35s var(--ease)}
.finale__link:hover span{background-size:0 2px;background-position:100% 100%}
.finale__link:hover .icon{transform:translateX(4px)}
.finale__status{margin-top:clamp(22px,2.4vw,30px)}
.finale :focus-visible{outline-color:var(--ink)}
.finale--ink :focus-visible{outline-color:var(--y)}
/* Captain CIAO (Superman pose) leaving the frame top-right, speed lines behind him */
.finale__fly{position:absolute;z-index:1;top:clamp(14px,2.6vw,40px);right:-10%;width:clamp(300px,40vw,640px);rotate:-12deg;pointer-events:none}
.finale__fly img{position:relative;display:block;width:100%;height:auto;max-width:none;filter:drop-shadow(0 26px 22px rgba(74,51,0,.28))}
.finale--ink .finale__fly img{filter:drop-shadow(0 26px 30px rgba(0,0,0,.6))}
.finale__fly i{position:absolute;right:84%;height:5px;border-radius:5px;background:var(--white);opacity:.75;transform-origin:right center}
.finale__fly i:nth-child(1){top:30%;width:34%}
.finale__fly i:nth-child(2){top:44%;width:52%;height:4px}
.finale__fly i:nth-child(3){top:58%;width:28%}
.finale--ink .finale__fly i{background:var(--y);opacity:.35}
.finale__rays{position:absolute;z-index:0;left:80%;top:18%;width:clamp(1100px,150vw,2100px);aspect-ratio:1;translate:-50% -50%;pointer-events:none;
  background:repeating-conic-gradient(from 0deg,rgba(255,255,255,.2) 0 6deg,rgba(255,255,255,0) 6deg 18deg);
  -webkit-mask:radial-gradient(closest-side,#000 30%,transparent 100%);mask:radial-gradient(closest-side,#000 30%,transparent 100%)}
@media (prefers-reduced-motion:no-preference){
  .finale__fly{transition:transform 1.4s var(--ease);transform:translate(-10%,14%)}
  .finale.is-live .finale__fly{transform:none}
  .finale.is-live .finale__fly img{animation:finbob 5.5s ease-in-out infinite}
  .finale.is-live .finale__fly i{animation:ldline .5s ease-out infinite alternate}
  .finale.is-live .finale__fly i:nth-child(2){animation-delay:.15s}.finale.is-live .finale__fly i:nth-child(3){animation-delay:.3s}
  .finale.is-live .finale__state i{animation:finblink 1.2s steps(2,jump-none) infinite}
  .finale__rays{animation:finrays 150s linear infinite;animation-play-state:paused}
  .finale.is-live .finale__rays{animation-play-state:running}
}
@keyframes finbob{0%,100%{transform:translate(0,0)}50%{transform:translate(12px,-14px)}}
@keyframes finblink{0%{opacity:1}100%{opacity:.25}}
@keyframes finrays{to{rotate:360deg}}
@media (max-width:860px){
  .finale{padding-top:clamp(190px,52vw,250px)}
  .finale__fly{top:12px;right:-20%;width:min(72vw,430px)}
  .finale__line{max-width:none}
}
@media (max-width:560px){
  .finale{padding-bottom:88px}
  .finale__board{padding:12px 14px 14px;width:100%}
  .finale__flap{gap:6px 10px}
  .finale__w.board{gap:2px}
  .finale__line{font-size:clamp(2.5rem,12.5vw,3.6rem)}
  .finale__acts{flex-direction:column;align-items:stretch}
  .finale__acts .btn{width:100%;white-space:normal}
  .finale__link{justify-content:center}
  .finale__status{display:flex;border-radius:18px;align-items:flex-start}
  .finale__status::before{margin-top:.35em}
}

/* ---------- section openers (A0): rotate them, never the same one twice in a row ---------- */
/* (a) comic caption box */
.op-cap{--cap-bg:var(--y);--cap-fg:var(--ink);--cap-bd:var(--ink);--cap-sh:var(--ink);--cap-tilt:-1.2deg;position:relative;display:block;width:fit-content;max-width:min(100%,46rem);margin-bottom:clamp(30px,4vw,56px);padding:clamp(24px,2.6vw,34px) clamp(20px,2.6vw,34px) clamp(18px,2.2vw,26px);background:var(--cap-bg);color:var(--cap-fg);border:3px solid var(--cap-bd);box-shadow:7px 7px 0 var(--cap-sh);rotate:var(--cap-tilt)}
.op-cap--r{--cap-tilt:1deg;margin-left:auto}
.op-cap .op-cap__n{position:absolute;left:-3px;top:0;translate:0 -55%;padding:.34em .8em .3em;background:var(--ink);color:var(--y);font-size:.68rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase;line-height:1.2;white-space:nowrap}
.op-cap :is(h2,.h2,.h1){color:inherit}
.op-cap__note{margin-top:.7rem;max-width:46ch;font-weight:600;font-size:1rem;line-height:1.45;color:inherit;opacity:.85}
.sec--y .op-cap,.bg-y .op-cap{--cap-bg:var(--white)}
.sec--ink .op-cap,.bg-ink .op-cap,[data-theme="ink"] .op-cap{--cap-bg:var(--y);--cap-bd:var(--y);--cap-sh:var(--white)}
.sec--ink .op-cap p,.bg-ink .op-cap p,[data-theme="ink"] .op-cap p{color:var(--ink)}
.sec--ink .op-cap .op-cap__n,.bg-ink .op-cap .op-cap__n,[data-theme="ink"] .op-cap .op-cap__n{background:var(--white);color:var(--ink)}
.sec--y .op-cap .op-cap__n,.bg-y .op-cap .op-cap__n{color:var(--y)}
/* v3 colour variants: .op-cap--ink (ink box, white type, yellow hard shadow) and .op-cap--paper (paper box, ink type) */
.op-cap.op-cap--ink{--cap-bg:var(--ink);--cap-fg:var(--white);--cap-bd:var(--ink);--cap-sh:var(--y)}
.sec--y .op-cap.op-cap--ink,.bg-y .op-cap.op-cap--ink{--cap-sh:var(--white)}
.sec--ink .op-cap.op-cap--ink,.bg-ink .op-cap.op-cap--ink,[data-theme="ink"] .op-cap.op-cap--ink{--cap-bg:var(--ink-3);--cap-bd:var(--y);--cap-sh:var(--y)}
.op-cap.op-cap--ink .op-cap__note{color:var(--white)}
.op-cap.op-cap--ink .op-cap__n{background:var(--y);color:var(--ink)}
.sec--y .op-cap.op-cap--ink .op-cap__n,.bg-y .op-cap.op-cap--ink .op-cap__n{background:var(--white);color:var(--ink)}
.op-cap.op-cap--paper{--cap-bg:var(--paper);--cap-fg:var(--ink);--cap-bd:var(--ink);--cap-sh:var(--ink)}
.sec--ink .op-cap.op-cap--paper,.bg-ink .op-cap.op-cap--paper,[data-theme="ink"] .op-cap.op-cap--paper{--cap-bd:var(--paper);--cap-sh:var(--y)}
.op-cap.op-cap--paper .op-cap__note{color:var(--ink)}
.op-cap.op-cap--paper .op-cap__n{background:var(--ink);color:var(--y)}

/* (b) departure-board header */
.op-board{margin-bottom:clamp(30px,4vw,56px)}
.op-board__meta{display:flex;flex-wrap:wrap;gap:6px clamp(26px,4vw,64px);margin-bottom:12px;font-size:.66rem;font-weight:800;letter-spacing:.24em;text-transform:uppercase;opacity:.62}
.op-board__meta:empty{display:none}
.op-board__meta b{font-weight:900;letter-spacing:.16em}
.op-board__h{--bw:8;display:flex;flex-wrap:wrap;gap:.16em .34em;font-weight:900;line-height:1;text-transform:uppercase;font-size:min(clamp(1.75rem,4.6vw,3.7rem),calc((100vw - 56px) / (var(--bw) * 1.14)))}
.op-board__w.board{gap:.07em;font-family:var(--f);font-weight:900}
.op-board__w.board span{min-width:.96em;padding:.12em .05em .08em;border-radius:.13em;background:var(--ink-2);color:var(--y);box-shadow:0 2px 0 rgba(0,0,0,.22)}
.op-board__w.board span::after{background:rgba(0,0,0,.55)}
.sec--ink .op-board__w.board span,.bg-ink .op-board__w.board span,[data-theme="ink"] .op-board__w.board span{background:var(--ink-3);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.op-board .op-board__sub{margin-top:clamp(14px,1.6vw,20px);max-width:52ch}
.sec--ink .op-board__meta,.bg-ink .op-board__meta{color:var(--y);opacity:.85}

/* (c) full-bleed type over a photo · watermark buried by the top-right + bottom gradients (A5) */
.op-photo{position:relative;isolation:isolate;display:flex;align-items:flex-end;min-height:clamp(340px,58vh,620px);overflow:hidden;background:var(--ink);color:var(--white);margin-bottom:clamp(40px,5vw,80px)}
.sec>.op-photo:first-child{margin-top:calc(-1 * clamp(80px,10vw,160px))}
.sec--tight>.op-photo:first-child{margin-top:calc(-1 * clamp(56px,6vw,96px))}
.op-photo__img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;max-width:none;object-fit:cover;object-position:var(--op-pos,50% 50%)}
.op-photo::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:
  radial-gradient(58% 80% at 100% 0%,rgba(11,11,12,.92),rgba(11,11,12,.62) 36%,rgba(11,11,12,0) 70%),
  linear-gradient(0deg,rgba(11,11,12,.94) 0%,rgba(11,11,12,.66) 32%,rgba(11,11,12,.16) 64%,rgba(11,11,12,.42) 100%),
  linear-gradient(90deg,rgba(11,11,12,.62),rgba(11,11,12,.2) 48%,rgba(11,11,12,0) 70%)}
.op-photo__in{position:relative;padding-block:clamp(30px,4.4vw,64px)}
.op-photo :is(h2,.h1,.h2){color:var(--white);max-width:15ch;line-height:.96;text-shadow:0 2px 34px rgba(0,0,0,.4)}
.op-photo .op-photo__k{margin-bottom:14px;font-size:.72rem;font-weight:800;letter-spacing:.22em;text-transform:uppercase;color:var(--y)}
.op-photo p:not(.op-photo__k){margin-top:14px;max-width:48ch;color:#e4e4e8}
.op-photo--inset{border-radius:var(--r-l);min-height:clamp(300px,46vh,520px);margin-top:0!important}
.op-photo--inset .op-photo__in{padding-inline:clamp(22px,3.4vw,48px)}

/* (d) Captain bubble opener: ≤20 words, small round avatar under the tail, then the H2 */
.op-bubble{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;column-gap:clamp(14px,1.8vw,22px);margin-bottom:clamp(30px,4vw,56px)}
.op-bubble__b{grid-column:1 / -1;justify-self:start;max-width:min(100%,30rem);margin-bottom:24px;font-size:1rem;text-wrap:pretty}
.op-bubble__b::after{left:26px}
.op-bubble__av{position:relative;width:clamp(64px,6vw,78px);aspect-ratio:1;border-radius:50%;overflow:hidden;background:var(--y);border:3px solid var(--ink);box-shadow:3px 3px 0 var(--ink)}
.op-bubble__av img{position:absolute;left:var(--av-x,-62%);top:var(--av-y,5%);width:var(--av-w,224%);height:auto;max-width:none}
.op-bubble :is(h2,.h2,.h1){min-width:0}
.sec--y .op-bubble__av,.bg-y .op-bubble__av{background:var(--white)}
.sec--ink .op-bubble__av,.bg-ink .op-bubble__av,[data-theme="ink"] .op-bubble__av{border-color:var(--y);box-shadow:3px 3px 0 var(--y)}

/* (e) editorial side label (no eyebrow on the heading) */
.op-side{display:grid;grid-template-columns:clamp(26px,3.2vw,44px) minmax(0,1fr);column-gap:clamp(14px,3vw,48px)}
.op-side__l{position:sticky;top:calc(var(--hdr-offset,0px) + 28px);align-self:start;justify-self:center;display:flex;align-items:center;gap:14px;writing-mode:vertical-rl;rotate:180deg;font-size:.7rem;font-weight:800;letter-spacing:.24em;text-transform:uppercase;white-space:nowrap;transition:top .45s var(--ease)}
.op-side__l::before{content:"";width:2px;height:clamp(40px,6vw,84px);background:currentColor}
.op-side__c{min-width:0}
.op-side__c>:first-child{margin-top:0}
.sec--ink .op-side__l,.bg-ink .op-side__l{color:var(--y)}
/* v3: inside a sub-nav wrapper (the chapters that follow a .subnav) the label sticks under the strip, not under it */
.subnav~* .op-side__l,.subnav~.op-side>.op-side__l{top:calc(var(--hdr-offset,0px) + var(--subnav-h,64px) + 22px)}
@media (max-width:560px){.op-side__l{font-size:.6rem;letter-spacing:.2em}}

/* ---------- sticky sub-nav (A22) ---------- */
.subnav{position:sticky;top:var(--hdr-offset,0px);z-index:120;transition:top .45s var(--ease)}
.subnav__strip{display:flex;align-items:center;gap:8px;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;padding:10px 12px;background:rgba(255,250,238,.9);-webkit-backdrop-filter:blur(14px) saturate(150%);backdrop-filter:blur(14px) saturate(150%);border:2px solid var(--ink);border-radius:18px;box-shadow:0 14px 26px -18px rgba(11,11,12,.5);transition:border-radius .3s var(--ease)}
.subnav__strip::-webkit-scrollbar{display:none}
.subnav.is-stuck .subnav__strip{border-top-color:transparent;border-radius:0 0 18px 18px}
.subnav__label{flex:none;padding:0 6px 0 4px;font-size:.64rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase;opacity:.6}
.subnav .chip{flex:none;min-height:42px;padding:.45rem .95rem;font-size:.84rem;background:var(--white);white-space:nowrap}
.subnav .chip:hover{background:var(--y-100)}
.subnav .chip.is-on,.subnav .chip[aria-current="true"]{background:var(--ink);color:var(--y);border-color:var(--ink)}
.subnav--y .subnav__strip{background:rgba(253,182,28,.94)}
.subnav--ink .subnav__strip{background:rgba(20,20,22,.9);border-color:var(--ink-4);color:var(--white)}
.subnav--ink .chip{background:transparent;color:var(--white);border-color:var(--ink-4)}
.subnav--ink .chip.is-on,.subnav--ink .chip[aria-current="true"]{background:var(--y);color:var(--ink);border-color:var(--y)}
.subnav :focus-visible{outline-color:var(--ink);outline-offset:-2px}
.subnav--ink :focus-visible{outline-color:var(--y)}
/* html already pads fragment jumps by --hdr + 12px; a jump down hides the header, so take --hdr back off: the chapter lands 12px under the strip */
.subnav-target{scroll-margin-top:calc(var(--subnav-h,64px) - var(--hdr,84px))}
@media (prefers-reduced-motion:reduce){.subnav,.op-side__l{transition:none}}

/* =========================================================
   STATIC COPY (DESIGN.md § 15): #tStatic, a page as plain HTML in its snapshot (tour.html: assets/data/tour/<id>.html,
   tours.html: assets/data/tour/_tours.html), for crawlers and readers without JavaScript. The head script sets .js
   before the first paint, so visitors never see it (tour.js / tours.js remove it); without scripts it is the page: one
   readable column, the template's empty frames stay out.
   ========================================================= */
.js .t-static{display:none}
html:not(.js) #main:has(> .t-static) > :not(.t-static){display:none}
.t-static{max-width:880px;margin-inline:auto;padding:clamp(32px,6vw,64px) max(16px,env(safe-area-inset-right)) 72px max(16px,env(safe-area-inset-left))}
.t-static :is(h1,h2){font-weight:900;text-transform:uppercase;letter-spacing:-.03em;line-height:1.02}
.t-static h1{font-size:clamp(2.2rem,7vw,3.6rem);margin:6px 0 14px}
.t-static h2{font-size:clamp(1.4rem,3.4vw,1.9rem);margin:44px 0 14px;padding-top:18px;border-top:3px solid var(--ink)}
.t-static h3{font-size:1.05rem;font-weight:800;line-height:1.3;margin:22px 0 6px}
.t-static :is(p,ul,.t-static__tbl){margin-bottom:12px}
.t-static ul{padding-left:1.25em}
.t-static li+li{margin-top:4px}
.t-static a{text-decoration:underline;text-underline-offset:3px}
.t-static__crumb{font-size:.85rem;color:var(--steel);margin-bottom:24px}
.t-static__k{font-size:.75rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--steel)}
.t-static__tag{font-size:clamp(1.1rem,2.4vw,1.3rem);font-weight:600}
ul.t-static__facts{list-style:none;padding:16px 20px;background:var(--y-100);border-radius:var(--r-s)}
.t-static :is(.t-static__days,.t-static__tours){list-style:none}
.t-static__meta{font-size:.9rem;color:var(--steel)}
.t-static__tbl{overflow-x:auto}
.t-static table{border-collapse:collapse;min-width:100%;font-size:.92rem}
.t-static caption{text-align:left;font-size:.85rem;color:var(--steel);padding-bottom:6px}
.t-static :is(th,td){padding:8px 10px;border:1px solid var(--line);text-align:left;vertical-align:top}
.t-static thead th{background:var(--y)}