:root { --ink:#172c33; --paper:#f7f2e8; --sand:#e7ba62; --rust:#963d2d; --leaf:#63836b; --muted:#58666a; --line:#d7cdbd; --card:#fffdf8; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:Georgia, 'Times New Roman', serif; font-size:18px; line-height:1.58; }
a { color:inherit; }
a:focus-visible, button:focus-visible, input:focus-visible { outline:3px solid var(--rust); outline-offset:3px; }
.skip-link { position:absolute; left:1rem; top:-4rem; background:var(--paper); padding:.55rem .8rem; z-index:4; } .skip-link:focus { top:1rem; }
.shell { max-width:1160px; margin:0 auto; padding:0 1.25rem; }
.site-header { padding:1.15rem 0; border-bottom:1px solid rgba(23,44,51,.18); } .brand { font-weight:700; text-decoration:none; letter-spacing:.02em; } .brand small { display:block; font-size:.72rem; font-family:Arial,sans-serif; letter-spacing:.13em; text-transform:uppercase; color:var(--muted); }
.nav-row { display:flex; justify-content:space-between; align-items:center; gap:1rem; }
.button { display:inline-flex; justify-content:center; align-items:center; min-height:48px; padding:.7rem 1.1rem; border:1px solid var(--ink); border-radius:999px; background:var(--ink); color:#fff; font:700 .92rem/1 Arial,sans-serif; letter-spacing:.02em; text-decoration:none; cursor:pointer; }
.button:hover { background:#29434c; } .button--quiet { background:transparent; color:var(--ink); }
.hero { display:grid; grid-template-columns:1.08fr .92fr; gap:clamp(2rem,6vw,5rem); align-items:center; padding:clamp(3rem,8vw,7rem) 0; }
.eyebrow { margin:0 0:.8rem; color:var(--rust); font:700 .77rem/1.3 Arial,sans-serif; letter-spacing:.14em; text-transform:uppercase; }
h1,h2,h3 { line-height:1.08; margin:0 0:1rem; } h1 { font-size:clamp(2.7rem,6vw,5.7rem); letter-spacing:-.055em; } h2 { font-size:clamp(2rem,4vw,3.4rem); letter-spacing:-.04em; } h3 { font-size:1.24rem; }
.lede { font-size:clamp(1.13rem,2vw,1.36rem); max-width:42rem; } .hero picture { display:block; } .hero-art { width:100%; height:auto; filter:drop-shadow(14px 14px 0 var(--sand)); object-fit:contain; aspect-ratio:1/1; }
.facts { display:flex; flex-wrap:wrap; gap:.8rem; margin:1.5rem 0 1.8rem; } .fact { padding:.62rem .8rem; border:1px solid var(--line); background:rgba(255,255,255,.42); border-radius:9px; font:700 .86rem/1.25 Arial,sans-serif; }
.band { background:var(--ink); color:var(--paper); padding:clamp(2.6rem,6vw,5rem) 0; } .details { display:grid; grid-template-columns:repeat(4,1fr); gap:1.25rem; } .detail-label { display:block; color:var(--sand); font:700 .72rem/1.3 Arial,sans-serif; letter-spacing:.1em; text-transform:uppercase; } .detail-value { font-size:1.1rem; font-weight:700; }
.departure-list { display:flex; flex-wrap:wrap; gap:.8rem; margin-top:2rem; } .departure-list a { color:var(--paper); border:1px solid rgba(247,242,232,.65); padding:.75rem .9rem; border-radius:10px; text-decoration:none; font:700 .86rem/1.3 Arial,sans-serif; } .departure-list a:hover { background:rgba(247,242,232,.12); }
.content { display:grid; grid-template-columns:minmax(0,2fr) minmax(240px,.78fr); gap:clamp(2rem,6vw,6rem); padding:clamp(3rem,8vw,7rem) 0; } .prose > * { max-width:46rem; } .prose p { margin:0 0:1.3rem; } .prose ul { padding-left:1.25rem; margin:0 0:1.4rem; }
.aside { align-self:start; position:sticky; top:1rem; padding:1.35rem; background:var(--card); border:1px solid var(--line); border-radius:16px; box-shadow:8px 8px 0 rgba(231,186,98,.5); } .aside p { font-size:.95rem; }
.callout { margin:2rem 0; padding:1.4rem; border-left:4px solid var(--rust); background:#f3e1d5; } .closing { padding:clamp(3rem,7vw,6rem) 0; text-align:center; background:#e9e1d2; } .closing p { max-width:42rem; margin:0 auto 1.4rem; }
.site-footer { padding:2rem 0 6.8rem; font: .84rem/1.5 Arial,sans-serif; color:var(--muted); } .mobile-cta { display:none; }
.book-main { padding:clamp(2.5rem,6vw,5rem) 0 5rem; } .book-intro { max-width:45rem; margin-bottom:2rem; } .booking-grid { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(260px,.75fr); gap:1.5rem; align-items:start; }
[data-departure-picker] { margin:1rem 0; } [data-departure-picker] label { display:block; margin-bottom:.35rem; font:700 .86rem/1.3 Arial,sans-serif; } [data-departure-picker] select { min-height:44px; max-width:100%; padding:.55rem .7rem; border:1px solid var(--ink); border-radius:8px; background:#fff; color:var(--ink); font:inherit; }
.ticket-list,.summary { background:var(--card); border:1px solid var(--line); border-radius:18px; } .ticket-list { overflow:hidden; } .ticket { padding:1.3rem; display:grid; grid-template-columns:1fr auto; gap:1rem; border-bottom:1px solid var(--line); } .ticket:last-child { border:0; } .ticket p { margin:.25rem 0 0; color:var(--muted); font-size:.91rem; }
.ticket-price { font:700 1.1rem Arial,sans-serif; text-align:right; } .stepper { display:flex; align-items:center; justify-content:flex-end; gap:.35rem; margin-top:.85rem; } .stepper button { width:44px; height:44px; border:1px solid var(--ink); border-radius:50%; background:#fff; color:var(--ink); font:700 1.25rem/1 Arial,sans-serif; cursor:pointer; } .stepper input { width:2.4rem; border:0; background:transparent; font:700 1rem Arial,sans-serif; text-align:center; }
.summary { position:sticky; top:1rem; padding:1.35rem; } .summary dl,.summary-lines { display:grid; grid-template-columns:1fr auto; margin:1rem 0; gap:.4rem .8rem; font: .95rem/1.4 Arial,sans-serif; } .summary-lines > div { display:contents; } .summary-lines > div span { text-align:right; } .summary dt,.summary dd { margin:0; } .summary .total { padding-top:.8rem; border-top:1px solid var(--line); font-weight:700; color:var(--ink); } .summary button { width:100%; margin-top:1rem; } .fine-print { font:.78rem/1.45 Arial,sans-serif; color:var(--muted); } .form-error { min-height:1.4rem; margin:.75rem 0 0; color:#8c2e1c; font:700 .88rem/1.4 Arial,sans-serif; }
@media (max-width:760px) { body { font-size:17px; } .hero,.content,.booking-grid { grid-template-columns:1fr; } .hero { padding-top:3rem; } .hero-art { max-width:500px; } .details { grid-template-columns:1fr 1fr; } .aside,.summary { position:static; } .mobile-cta { display:flex; position:fixed; bottom:0; left:0; right:0; z-index:3; padding:.65rem 1rem calc(.65rem + env(safe-area-inset-bottom)); background:rgba(247,242,232,.95); border-top:1px solid var(--line); backdrop-filter:blur(10px); } .mobile-cta .button { width:100%; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } * { animation:none!important; transition:none!important; } }