/* Inner pages. Builds on site.css (the home page's tokens and components). */

/* ---- sail page ---- */
.shero{position:relative;overflow:hidden;color:#fff;padding:clamp(120px,16vh,170px) var(--gut) clamp(70px,9vw,120px);background:linear-gradient(180deg,var(--s1) 0%,var(--s2) 100%);display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(24px,5vw,70px);align-items:center;min-height:min(92svh,860px)}
.shero .crumb{font:600 11.5px var(--f-body);letter-spacing:.18em;text-transform:uppercase;opacity:.85}
.shero .crumb a{text-decoration:none;border-bottom:1px solid rgba(255,255,255,.4)}
.shero h1{font-size:clamp(64px,11vw,176px);font-style:italic;margin-top:14px;text-shadow:0 2px 40px rgba(0,0,0,.15)}
.shero .lede{max-width:46ch;margin-top:20px;font-size:clamp(16px,1.35vw,19px);color:rgba(255,255,255,.92)}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.chips span{border:1px solid rgba(255,255,255,.45);border-radius:999px;padding:7px 13px;font:600 11.5px var(--f-body);letter-spacing:.12em;text-transform:uppercase;background:rgba(0,0,0,.12);backdrop-filter:blur(6px)}
.shero .acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.shero .pile{position:relative;height:min(58vh,560px);min-width:0}
.shero .pile .pol{width:clamp(150px,17vw,260px)}
.shero .pile .a{left:6%;top:6%;transform:rotate(-7deg)}
.shero .pile .b{left:42%;top:16%;transform:rotate(6deg);z-index:2}
.shero .pile .c{left:20%;top:48%;transform:rotate(-2deg);z-index:3}
.shero .sun2{position:absolute;right:8%;top:14%;width:clamp(120px,15vw,220px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(255,236,200,.95),rgba(255,190,120,.4) 45%,rgba(255,190,120,0) 70%);pointer-events:none}
.shero.night .sun2{background:radial-gradient(circle,rgba(240,240,230,.9),rgba(200,210,255,.2) 40%,rgba(200,210,255,0) 65%);width:clamp(70px,8vw,110px)}
.shero .stars{position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(1.3px 1.3px at 12% 18%,#fff,transparent),radial-gradient(1px 1px at 32% 8%,#fff,transparent),radial-gradient(1.4px 1.4px at 54% 26%,#fff,transparent),radial-gradient(1px 1px at 70% 12%,#fff,transparent),radial-gradient(1.2px 1.2px at 86% 30%,#fff,transparent),radial-gradient(1px 1px at 22% 40%,#fff,transparent),radial-gradient(1.3px 1.3px at 44% 52%,#fff,transparent),radial-gradient(1px 1px at 92% 6%,#fff,transparent),radial-gradient(1px 1px at 62% 44%,#fff,transparent),radial-gradient(1.2px 1.2px at 6% 62%,#fff,transparent);opacity:0}
.shero.night .stars{opacity:.9}
@media (max-width:860px){.shero{grid-template-columns:1fr}.shero .pile{height:330px;order:-1}.shero .pile .pol{width:150px}}

.sbody{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(28px,6vw,90px);padding-block:clamp(80px,10vw,140px)}
.sbody h2{font-size:clamp(40px,5.4vw,80px);font-style:italic}
.sbody .story{font-size:clamp(18px,1.6vw,22px);line-height:1.6;margin-top:22px;max-width:52ch}
.steps{list-style:none;padding:0;margin:40px 0 0;display:grid;gap:0;border-top:1.5px solid var(--ink)}
.steps li{display:grid;grid-template-columns:90px minmax(0,1fr);gap:16px;padding:18px 0;border-bottom:1px solid var(--line)}
.steps b{font:italic 400 30px/1 var(--f-disp);color:var(--sun)}
.steps span{font-size:16px}
.facts{align-self:start;position:sticky;top:90px;background:#fffaf0;padding:clamp(22px,2.6vw,32px);box-shadow:0 24px 60px rgba(60,40,10,.14);transform:rotate(.6deg)}
.facts .pin{position:absolute;top:-14px;left:50%;width:24px;height:24px;margin-left:-12px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ff9d63,var(--sun) 55%,#b44c12);box-shadow:0 6px 10px rgba(0,0,0,.25)}
.facts dl{display:grid;grid-template-columns:auto 1fr;gap:12px 16px;margin:0}
.facts dt{font:600 10.5px var(--f-body);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);padding-top:3px}
.facts dd{margin:0;font-weight:500;font-variant-numeric:tabular-nums}
.facts .hand{display:block;font-size:22px;color:var(--sun);margin:18px 0 14px}
@media (max-width:900px){.sbody{grid-template-columns:1fr}.facts{position:relative;top:auto}}

.sgal{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(10px,1.4vw,18px);padding-bottom:clamp(70px,9vw,120px)}
.sgal figure{overflow:hidden}
.sgal img{width:100%;aspect-ratio:4/5;object-fit:cover;transition:transform 1s cubic-bezier(.2,.7,.2,1)}
.sgal figure:hover img{transform:scale(1.06)}
@media (max-width:700px){.sgal{grid-template-columns:repeat(2,minmax(0,1fr))}}

.others{background:var(--teal);color:var(--canvas);padding-block:clamp(70px,9vw,120px);position:relative;overflow:hidden}
.others h2{font-size:clamp(40px,5.4vw,80px);font-style:italic}
.orow{display:flex;gap:clamp(14px,2vw,26px);overflow-x:auto;padding:40px 4px 20px;scroll-snap-type:x mandatory;scrollbar-width:thin}
.orow a{flex:0 0 clamp(170px,17vw,230px);scroll-snap-align:start;text-decoration:none;position:relative}
.orow .pol{position:relative;transform:rotate(var(--r));transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.orow a:hover .pol{transform:rotate(0) translateY(-8px)}
.orow .pol .px{position:absolute;right:10px;top:16px;background:var(--ink);color:var(--canvas);font:600 10.5px var(--f-body);letter-spacing:.1em;padding:5px 8px}

/* ---- booking platform ---- */
.bk{padding-top:clamp(110px,14vh,140px);padding-bottom:clamp(60px,8vw,100px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,380px);gap:clamp(24px,4vw,56px);align-items:start}
.bk h1{font-size:clamp(52px,8vw,118px);font-style:italic}
.bk .intro{color:var(--muted);margin-top:12px;max-width:52ch}
.stepper{display:flex;flex-wrap:wrap;gap:6px;margin:30px 0 8px;list-style:none;padding:0}
.stepper li{font:600 11px var(--f-body);letter-spacing:.14em;text-transform:uppercase;padding:8px 12px;border:1.5px solid var(--line);border-radius:999px;color:var(--muted)}
.stepper li.on{border-color:var(--ink);color:var(--ink)}
.stepper li.ok{background:var(--ink);border-color:var(--ink);color:var(--canvas)}
.blk{border-top:1.5px solid var(--ink);padding:24px 0 34px}
.blk h2{font-size:clamp(30px,3.4vw,46px);font-style:italic;display:flex;align-items:baseline;gap:14px}
.blk h2 small{font:600 11px var(--f-body);letter-spacing:.16em;text-transform:uppercase;color:var(--sun);font-style:normal}
.opts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:18px}
label.opt{position:relative;cursor:pointer;display:block}
label.opt input{position:absolute;opacity:0;pointer-events:none}
label.opt .pol{position:relative;padding:8px 8px 0;transform:rotate(var(--r));transition:transform .3s,box-shadow .3s}
label.opt .pol figcaption{font-size:19px;padding:8px 2px 4px}
label.opt .pol small{display:block;text-align:center;font:600 10.5px var(--f-body);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding-bottom:10px}
label.opt:hover .pol{transform:rotate(0) translateY(-4px)}
label.opt input:checked+.pol{box-shadow:0 0 0 3px var(--sun),0 20px 40px rgba(8,20,20,.3);transform:rotate(0) translateY(-6px)}
label.opt input:focus-visible+.pol{outline:2px solid var(--sun);outline-offset:4px}
@media (max-width:980px){.opts{grid-template-columns:repeat(2,minmax(0,1fr))}}
.calhd{display:flex;align-items:center;gap:12px;margin-top:18px}
.calhd b{font:italic 400 30px var(--f-disp);min-width:9ch}
.calhd button{width:40px;height:40px;border-radius:50%;border:1.5px solid var(--ink);background:transparent;cursor:pointer;font-size:16px}
.calhd button:disabled{opacity:.3;cursor:default}
.cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;margin-top:14px;max-width:560px}
.cal .dw{font:600 10.5px var(--f-body);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);text-align:center;padding-bottom:4px}
.cal button{aspect-ratio:1;border:1px solid var(--line);background:#fffaf0;cursor:pointer;font:600 15px var(--f-body);font-variant-numeric:tabular-nums;position:relative;display:grid;place-items:center;transition:background .2s,transform .2s}
.cal button:hover:not(:disabled){transform:translateY(-2px);border-color:var(--ink)}
.cal button.fest:after{content:"";position:absolute;bottom:6px;left:50%;width:5px;height:5px;margin-left:-2.5px;border-radius:50%;background:var(--mustard)}
.cal button.full{background:repeating-linear-gradient(135deg,transparent 0 6px,rgba(14,29,28,.08) 6px 8px);color:var(--muted);text-decoration:line-through;cursor:not-allowed}
.cal button:disabled:not(.full){opacity:.35;cursor:default}
.cal button.sel{background:var(--ink);color:var(--canvas);border-color:var(--ink)}
.legend{display:flex;flex-wrap:wrap;gap:16px;margin-top:12px;font-size:13px;color:var(--muted)}
.legend i{display:inline-block;width:12px;height:12px;vertical-align:-1px;margin-right:6px;border:1px solid var(--line);background:#fffaf0}
.legend i.f{border-radius:50%;background:var(--mustard);border:0;width:8px;height:8px;vertical-align:1px}
.legend i.x{background:repeating-linear-gradient(135deg,transparent 0 3px,rgba(14,29,28,.2) 3px 4px)}
.step3{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:18px;max-width:640px}
.qty{display:flex;align-items:center;gap:0;border:1.5px solid var(--ink);border-radius:999px;width:max-content}
.qty button{width:44px;height:44px;border:0;background:transparent;font-size:20px;cursor:pointer}
.qty output{min-width:44px;text-align:center;font:600 18px var(--f-body);font-variant-numeric:tabular-nums}
@media (max-width:560px){.step3{grid-template-columns:1fr}}
.side{position:sticky;top:96px}
.ticket{background:var(--ink);color:var(--canvas);padding:22px;position:relative}
.ticket:before,.ticket:after{content:"";position:absolute;left:0;right:0;height:10px;background:radial-gradient(circle at 6px 0,var(--canvas) 5px,transparent 5.5px) 0 0/12px 10px repeat-x}
.ticket:before{top:-1px}.ticket:after{bottom:-1px;transform:scaleY(-1)}
.ticket .lab{color:var(--mustard)}
.ticket h3{font-size:36px;font-style:italic;margin-top:8px}
.ticket .ln{display:flex;justify-content:space-between;gap:12px;font-size:14px;color:#cfdcd8;padding:7px 0;border-bottom:1px dashed rgba(243,233,214,.18);font-variant-numeric:tabular-nums}
.ticket .ln b{color:var(--canvas);text-align:right}
.ticket .tot{display:flex;justify-content:space-between;align-items:baseline;margin-top:12px}
.ticket .tot b{font:italic 400 40px/1 var(--f-disp);color:var(--mustard)}
.ticket .pol{position:absolute;right:-14px;top:-30px;width:96px;padding:6px 6px 0;transform:rotate(8deg)}
.ticket .pol figcaption{font-size:15px;padding:5px 0 7px}
.side .note2{font:600 18px var(--f-hand);color:var(--sun);margin-top:14px;transform:rotate(-1.5deg)}
@media (max-width:980px){.bk{grid-template-columns:1fr}.side{position:relative;top:auto;order:-1}}

/* ---- crew inbox ---- */
.crew{padding-top:clamp(100px,13vh,130px);padding-bottom:80px}
.crew h1{font-size:clamp(48px,7vw,104px);font-style:italic}
.crew .intro{color:var(--muted);margin-top:10px;max-width:62ch}
.tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin-top:30px;border-top:1.5px solid var(--ink)}
.tiles div{padding:18px 18px 18px 0;border-bottom:1px solid var(--line)}
.tiles b{display:block;font:italic 400 clamp(40px,4.4vw,60px)/1 var(--f-disp);font-variant-numeric:tabular-nums}
.tiles span{font:600 10.5px var(--f-body);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
@media (max-width:700px){.tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
.filters{display:flex;flex-wrap:wrap;gap:6px;margin:28px 0 10px}
.filters button{border:1.5px solid var(--ink);background:transparent;border-radius:999px;padding:8px 14px;cursor:pointer;font:600 11px var(--f-body);letter-spacing:.12em;text-transform:uppercase}
.filters button[aria-pressed="true"]{background:var(--ink);color:var(--canvas)}
.ibox{overflow-x:auto}
.itab{width:100%;border-collapse:collapse;min-width:820px;font-variant-numeric:tabular-nums}
.itab th{font:600 10.5px var(--f-body);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);text-align:left;padding:10px;border-bottom:1.5px solid var(--ink)}
.itab td{padding:14px 10px;border-bottom:1px solid var(--line);vertical-align:top;font-size:14.5px}
.itab td b{font-weight:600}
.itab .ex{font:600 9.5px var(--f-body);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);border:1px solid var(--line);padding:2px 6px;margin-left:6px}
.st{display:inline-block;font:600 10px var(--f-body);letter-spacing:.12em;text-transform:uppercase;padding:5px 9px;border-radius:999px;white-space:nowrap}
.st.requested{background:var(--blush);color:#8a3a1c}.st.deposit{background:var(--mustard);color:var(--ink)}.st.confirmed{background:var(--teal);color:var(--canvas)}.st.done{background:var(--line);color:var(--muted)}
.itab .acts{display:flex;flex-wrap:wrap;gap:6px}
.itab .acts button,.itab .acts a{font:600 10.5px var(--f-body);letter-spacing:.1em;text-transform:uppercase;border:1px solid var(--ink);background:transparent;padding:6px 9px;cursor:pointer;text-decoration:none;color:var(--ink)}
.itab .acts button:hover,.itab .acts a:hover{background:var(--ink);color:var(--canvas)}
.ticket .ln:first-of-type{padding-right:96px}