:root{
  --ground:#F3F3F2; --surface:#FFFFFF; --ink:#1A1A1A; --muted:#5E5E5E; --rule:#DADADA;
  --accent:#C21F2A; --accent-ink:#FFFFFF; --mark:#D3232F; --mark-ink:#FFFFFF;
  --band:#161616; --band-ink:#F4F4F4; --band-muted:#A9A9A9; --band-rule:#2E2E2E;
  --tint:#ECEBEA; --ok:#1E7A46; --ok-tint:#E3F2E8; --warn:#9A5B00; --warn-tint:#FBF0DC; --bad-tint:#FBE5E6;
  --display:"Archivo","Arial Narrow",system-ui,sans-serif;
  --sans:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
  --serif:"Source Serif 4",Georgia,"Times New Roman",serif;
  --mono:ui-monospace,"SF Mono",Consolas,monospace;
}
@media (prefers-color-scheme: dark){
  :root{
    color-scheme:dark;
    --ground:#121212; --surface:#1B1B1B; --ink:#EDEDED; --muted:#A3A3A3; --rule:#2E2E2E;
    --accent:#EE5A62; --accent-ink:#121212; --tint:#242424; --mark:#E0333E;
    --band:#0A0A0A; --band-ink:#EDEDED; --band-muted:#8F8F8F; --band-rule:#262626;
    --ok:#5CC98A; --ok-tint:#16281D; --warn:#E8B04B; --warn-tint:#2B2213; --bad-tint:#2E1517;
  }
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0; background:var(--ground); color:var(--ink); font-family:var(--sans); font-size:16px; line-height:1.5}
[hidden]{display:none!important}
img{max-width:100%}
a{color:var(--accent)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid var(--mark); outline-offset:2px}
.wrap{max-width:860px; margin:0 auto; padding-inline:16px}

/* top bar */
.bar{position:sticky; top:0; z-index:10; background:var(--band); color:var(--band-ink); border-bottom:1px solid var(--band-rule); padding-top:env(safe-area-inset-top,0px)}
.bar .wrap{display:flex; align-items:center; gap:12px; min-height:56px}
.wordmark{display:inline-flex; align-items:center; gap:10px; font-family:var(--display); font-stretch:75%; font-weight:850; font-size:21px; text-transform:uppercase; color:var(--band-ink); text-decoration:none}
.wordmark img{border-radius:50%; display:block}
.wordmark .slash{color:var(--mark)}
.wordmark small{font-family:var(--sans); font-stretch:100%; font-weight:600; font-size:13px; letter-spacing:.12em; color:var(--band-muted); margin-left:2px}
.bar .right{margin-left:auto; display:flex; gap:8px; align-items:center}
.bar a.lnk{color:var(--band-muted); font-size:14px; text-decoration:none}
.bar a.lnk:hover{color:var(--band-ink)}

main{padding-block:20px 120px}
h1,h2,h3{text-wrap:balance}
.page-title{font-family:var(--display); font-stretch:75%; font-weight:850; font-size:clamp(34px,8vw,56px); line-height:.95; text-transform:uppercase; margin:6px 0 10px}
.eyebrow{font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); margin:0}
.lead{font-size:17px; color:var(--muted); margin:0 0 18px; max-width:60ch}
.muted{color:var(--muted)}
.small{font-size:14px}

/* cards and panels */
.card{background:var(--surface); border:1px solid var(--rule); border-radius:8px; padding:18px}
.stack{display:flex; flex-direction:column; gap:14px}
.row{display:flex; flex-wrap:wrap; gap:10px; align-items:center}
.grid2{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px}
@media (max-width:560px){ .grid2{grid-template-columns:1fr} }

.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; font:700 16px var(--sans); text-decoration:none; border-radius:6px; padding:13px 18px; border:2px solid transparent; cursor:pointer; line-height:1.1; min-height:48px}
.btn-primary{background:var(--mark); color:var(--mark-ink)}
.btn-primary:hover{filter:brightness(1.07)}
.btn-primary:disabled{opacity:.55; cursor:default; filter:none}
.btn-line{background:transparent; border-color:var(--rule); color:var(--ink)}
.btn-line:hover{border-color:var(--ink)}
.btn-small{min-height:36px; padding:7px 12px; font-size:14px; border-radius:5px}
.btn-ok{background:var(--ok); color:#fff}
.btn-block{width:100%}
.linkbtn{background:none; border:0; padding:0; font:inherit; color:var(--accent); text-decoration:underline; cursor:pointer}

/* places meter */
.places{display:flex; flex-direction:column; gap:8px}
.places .big{font-family:var(--display); font-stretch:75%; font-weight:850; font-size:40px; line-height:1}
.places .big small{font-family:var(--sans); font-stretch:100%; font-size:15px; font-weight:600; color:var(--muted); margin-left:6px}
.meter{height:10px; background:var(--tint); border-radius:999px; overflow:hidden}
.meter span{display:block; height:100%; background:var(--mark); border-radius:999px}

.chip{display:inline-block; font-size:12px; font-weight:700; letter-spacing:.04em; padding:3px 9px; border-radius:999px; background:var(--tint); color:var(--ink); white-space:nowrap}
.chip.ok{background:var(--ok-tint); color:var(--ok)}
.chip.warn{background:var(--warn-tint); color:var(--warn)}
.chip.bad{background:var(--bad-tint); color:var(--accent)}

/* trip list */
.trips{display:flex; flex-direction:column; gap:14px}
.trip-card{display:flex; flex-direction:column; gap:10px; text-decoration:none; color:inherit}
.trip-card h2{font-family:var(--display); font-stretch:80%; font-weight:800; font-size:26px; line-height:1.05; margin:0; text-transform:uppercase}
.trip-card:hover h2{color:var(--accent)}

/* trip details (rendered markdown) */
.md{font-family:var(--serif); font-size:17px; line-height:1.65}
.md h2{font-family:var(--display); font-stretch:80%; font-weight:800; font-size:26px; line-height:1.1; text-transform:uppercase; margin:34px 0 10px; padding-top:18px; border-top:2px solid var(--ink)}
.md h2:first-child{margin-top:0}
.md h3{font-family:var(--sans); font-size:19px; margin:24px 0 6px}
.md p{margin:0 0 1em}
.md ul{margin:0 0 1em; padding-left:1.2em}
.md li{margin:0 0 .45em}
.md li::marker{color:var(--accent)}
.md strong{font-weight:600}
.table-wrap{overflow-x:auto; margin:0 0 1.2em; -webkit-overflow-scrolling:touch}
.md table{border-collapse:collapse; font-family:var(--sans); font-size:14.5px; line-height:1.45; min-width:100%}
.md th{text-align:left; font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); padding:8px 12px 8px 0; border-bottom:2px solid var(--ink)}
.md td{vertical-align:top; padding:9px 12px 9px 0; border-bottom:1px solid var(--rule)}
.md td:first-child{font-weight:600; white-space:nowrap}
.md table.wide{min-width:620px}

.routes{list-style:none; margin:0; padding:0; display:flex; flex-direction:column}
.routes li{display:flex; justify-content:space-between; gap:12px; align-items:center; padding:12px 0; border-top:1px solid var(--rule)}
.routes li:first-child{border-top:0}

/* sticky action bar on phones */
.actionbar{position:fixed; left:0; right:0; bottom:0; z-index:9; background:var(--surface); border-top:1px solid var(--rule); padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px)); display:flex; gap:12px; align-items:center}
.actionbar .info{font-size:14px; line-height:1.3}
.actionbar .info b{display:block; font-size:16px}
.actionbar .btn{margin-left:auto}

/* forms */
form{margin:0}
fieldset{border:0; margin:0; padding:0; min-width:0}
legend{padding:0}
.section-title{font-family:var(--display); font-stretch:80%; font-weight:800; font-size:24px; text-transform:uppercase; margin:0 0 4px}
.field{display:flex; flex-direction:column; gap:5px}
.field label,.field .label{font-weight:600; font-size:15px}
.field .hint{font-size:13.5px; color:var(--muted); line-height:1.4}
input[type=text],input[type=email],input[type=tel],input[type=date],input[type=number],input[type=password],select,textarea{
  font:16px var(--sans); color:var(--ink); background:var(--surface); border:1.5px solid var(--rule); border-radius:6px; padding:11px 12px; width:100%; min-height:48px}
textarea{min-height:90px; resize:vertical; line-height:1.45}
input:focus,select:focus,textarea:focus{border-color:var(--ink); outline:none}
.check{display:flex; gap:12px; align-items:flex-start; font-size:15px; line-height:1.45; cursor:pointer}
.check input{width:22px; height:22px; flex:none; margin:1px 0 0; accent-color:var(--mark)}
details.more{border-top:1px solid var(--rule); padding-top:10px}
details.more summary{cursor:pointer; font-weight:600; color:var(--accent); list-style:none; padding:4px 0}
details.more summary::-webkit-details-marker{display:none}
details.more summary::before{content:"+ "}
details.more[open] summary::before{content:"– "}
details.more .stack{padding-top:10px}
.person{position:relative}
.person-head{display:flex; align-items:center; gap:10px; justify-content:space-between}
.person-head h3{margin:0; font-size:18px}
.error{background:var(--bad-tint); color:var(--ink); border-left:4px solid var(--mark); padding:12px 14px; border-radius:4px; font-size:15px}
.error ul{margin:6px 0 0; padding-left:1.2em}
.notice{background:var(--warn-tint); border-left:4px solid var(--warn); padding:12px 14px; border-radius:4px; font-size:15px}
.success{background:var(--ok-tint); border-left:4px solid var(--ok); padding:12px 14px; border-radius:4px; font-size:15px}

/* payment details */
.paybox dl{display:grid; grid-template-columns:auto 1fr auto; gap:10px 12px; margin:0; align-items:center}
.paybox dt{color:var(--muted); font-size:14px}
.paybox dd{margin:0; font-weight:700; font-variant-numeric:tabular-nums; font-family:var(--mono); font-size:16px}
.paybox dd.ref{font-size:22px; letter-spacing:.08em; color:var(--accent)}
.copy{font:600 13px var(--sans); background:var(--tint); color:var(--ink); border:1px solid var(--rule); border-radius:4px; padding:6px 10px; cursor:pointer; white-space:nowrap}
.linkbox{display:flex; gap:8px; align-items:center; background:var(--tint); border-radius:6px; padding:8px 8px 8px 12px; min-width:0}
.linkbox code{font-family:var(--mono); font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1; min-width:0}

.money{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px}
.money div{background:var(--tint); border-radius:6px; padding:10px 12px}
.money b{display:block; font-family:var(--display); font-stretch:80%; font-size:24px; font-weight:800; font-variant-numeric:tabular-nums}
.money span{font-size:12.5px; color:var(--muted)}
@media (max-width:420px){ .money{grid-template-columns:1fr 1fr} }

table.plain{border-collapse:collapse; width:100%; font-size:14.5px}
table.plain th{text-align:left; font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); padding:6px 10px 6px 0; border-bottom:1px solid var(--rule)}
table.plain td{padding:8px 10px 8px 0; border-bottom:1px solid var(--rule); vertical-align:top}

.demo{background:var(--warn-tint); color:var(--ink); font-size:14px; padding:10px 16px; text-align:center; border-bottom:1px solid var(--rule)}
.spinner{width:18px; height:18px; border:2.5px solid currentColor; border-right-color:transparent; border-radius:50%; animation:spin .8s linear infinite; display:inline-block}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion: reduce){ .spinner{animation-duration:2.4s} }
.loading{display:flex; gap:10px; align-items:center; color:var(--muted); padding:30px 0}
.toast{position:fixed; left:50%; bottom:calc(84px + env(safe-area-inset-bottom,0px)); transform:translateX(-50%); background:var(--ink); color:var(--ground); padding:10px 16px; border-radius:6px; font-size:14px; font-weight:600; z-index:30; max-width:calc(100% - 32px)}

/* organiser */
.tabs{display:flex; gap:4px; border-bottom:1px solid var(--rule); overflow-x:auto}
.tab{font:700 15px var(--sans); background:none; border:0; border-bottom:3px solid transparent; color:var(--muted); padding:10px 12px 10px 0; margin-right:10px; cursor:pointer; white-space:nowrap}
.tab[aria-selected="true"]{color:var(--ink); border-bottom-color:var(--mark)}
.filters{display:flex; gap:6px; flex-wrap:wrap}
.filter{font:600 13.5px var(--sans); border:1px solid var(--rule); background:var(--surface); color:var(--ink); border-radius:999px; padding:6px 12px; cursor:pointer}
.filter[aria-pressed="true"]{background:var(--ink); color:var(--ground); border-color:var(--ink)}
.stats{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px}
.stats div{background:var(--surface); border:1px solid var(--rule); border-radius:8px; padding:10px 12px}
.stats b{display:block; font-family:var(--display); font-stretch:80%; font-size:26px; font-weight:800; font-variant-numeric:tabular-nums}
.stats span{font-size:12.5px; color:var(--muted)}
@media (max-width:620px){ .stats{grid-template-columns:1fr 1fr} }
.booking{padding:0; overflow:hidden}
.booking > summary{list-style:none; cursor:pointer; padding:14px 16px; display:grid; grid-template-columns:1fr auto; gap:4px 12px}
.booking > summary::-webkit-details-marker{display:none}
.booking > summary .who{font-weight:700}
.booking > summary .meta{font-size:13.5px; color:var(--muted)}
.booking .body{padding:0 16px 16px; display:flex; flex-direction:column; gap:14px; border-top:1px solid var(--rule); padding-top:14px}
.kv{display:grid; grid-template-columns:max-content 1fr; gap:4px 14px; font-size:14.5px; margin:0}
.kv dt{color:var(--muted)}
.kv dd{margin:0; overflow-wrap:anywhere}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* wide tables become one card per row on phones */
@media (max-width:600px){
  .md table.wide{min-width:0}
  .md table.wide thead{display:none}
  .md table.wide tr{display:block; padding:12px 0; border-bottom:1px solid var(--rule)}
  .md table.wide td{display:block; border:0; padding:2px 0}
  .md table.wide td:first-child{font-family:var(--display); font-stretch:80%; font-size:18px; text-transform:uppercase; padding-bottom:4px}
  .md table.wide td[data-label]:not(:first-child)::before{content:attr(data-label) ": "; color:var(--muted); font-size:12px; letter-spacing:.06em; text-transform:uppercase; font-weight:700}
}
.grid2.keep2{grid-template-columns:1fr 1fr}
input.invalid,select.invalid,textarea.invalid{border-color:var(--mark)!important;box-shadow:0 0 0 3px var(--bad-tint)}
/* trip names read better in normal case; the bold capitals stay for page headings */
.trip-name,.trip-card h2{text-transform:none; font-stretch:88%; letter-spacing:-.005em}
.trip-name{font-size:clamp(30px,6.5vw,46px); line-height:1.05}
.trip-card h2{font-size:24px; line-height:1.15}
/* required fields */
label.req::after,legend.req::after{content:" *"; color:var(--mark); font-weight:700}
.req-star{color:var(--mark); font-weight:700}
.req-msg{color:var(--mark); font-size:13px; font-weight:600}
.invalid-group legend{color:var(--mark)}
/* date of birth / expiry as three dropdowns */
.date3{display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.5fr) minmax(0,1fr); gap:8px}
.date3 select{padding-inline:10px}

/* Organiser booking: one card per person, easy to read on a phone */
.people-list{display:flex; flex-direction:column; gap:10px}
.person-card{border:1px solid var(--rule); border-radius:10px; padding:12px 14px; display:flex; flex-direction:column; gap:8px}
.person-head{display:flex; justify-content:space-between; align-items:flex-start; gap:10px}
.person-head b{font-size:16px}
.person-card .kv{grid-template-columns:5.5em 1fr}
.person-card .linkbtn{align-self:flex-start}
h4.sub{margin:4px 0 -6px; font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted)}
.booking .kv a{color:inherit}
.spinner.small{width:13px; height:13px; border-width:2px; vertical-align:-2px; margin-right:4px}
button:disabled{opacity:.75; cursor:progress}