/* One committed world: a lit board in a dark terminal. No light mode by design. */
:root{
  --void:#070A0D;        /* the terminal at night */
  --deep:#0C1116;        /* section ground */
  --panel:#111820;       /* a lit panel */
  --cell:#151E27;        /* a board cell */
  --hair:#070A0D;        /* the line between cells */
  --edge:#1E2A35;        /* panel edge */
  --brass:#D9A441;       /* the lit characters */
  --brass-lo:#BC9341;    /* brass turned down */
  --bone:#F0EBE1;        /* primary type */
  /* Three greys and no more, each one measured against the darkest thing it is ever
     laid on: --bone 14:1, --ash 8.6:1, --slate 7.1:1. AAA asks 7:1 for type this
     size, and on a dark board that is most of the page. The hierarchy between the
     last two is carried by size, weight and tracking rather than by turning one of
     them down past the point where it can be read. */
  --ash:#B5BAC1;         /* secondary */
  --slate:#A1AAB2;       /* micro labels */
  --jade:#54B091;        /* confirmed */
  --rust:#CE8960;        /* few seats */
  --signal:#FFD400;      /* signage yellow, as on the banner of a real board */
  --gate:#F5C33B;        /* what a real board prints the gate in: the number you must remember */
  --board-bg:#000000;    /* a departure board is black, not charcoal */
  --board-row:#050607;
  --board-hair:#141A20;
}
*{box-sizing:border-box}
html,body{background:var(--void);}
body{margin:0; color:var(--bone);
  font-family:Archivo,"PingFang HK","Noto Sans TC","Helvetica Neue",Arial,sans-serif;
  font-size:15px; line-height:1.6; -webkit-font-smoothing:antialiased;}
h1,h2,h3{margin:0; font-weight:400; text-wrap:balance;
  font-family:"Bodoni Moda","Noto Serif TC","Songti TC",Didot,Georgia,serif;}
.mono{font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace; font-variant-numeric:tabular-nums;
  font-feature-settings:"zero" 1;}
.wrap{width:min(1320px,100%); margin-inline:auto; padding-inline:26px;}
@media (max-width:560px){ .wrap{padding-inline:16px;} }
button{font:inherit; cursor:pointer; color:inherit;}
.lbl{font-size:9.5px; letter-spacing:.26em; text-transform:uppercase; color:var(--slate);
  font-family:Archivo,sans-serif;}
.rule{height:1px; background:linear-gradient(90deg,var(--edge),transparent);}

/* ---------- masthead ---------- */
/* hidden means hidden. Any rule that sets display beats the attribute otherwise, and
   an overlay that is display:flex goes on swallowing clicks while invisible. */
[hidden]{display:none !important;}

.mast{border-bottom:1px solid var(--edge); background:rgba(7,10,13,.92);
  backdrop-filter:blur(8px); position:sticky; top:env(safe-area-inset-top,0px); z-index:50;}
.mast .wrap{display:flex; align-items:center; gap:20px; padding-block:15px; flex-wrap:wrap;}
/* Travel Mama endorsement mark, rebuilt in markup so it scales with the type.
   The real build swaps this for the brand's own SVG. */
.brandlock{display:flex; align-items:center; gap:13px; min-width:0;}
/* On a server-rendered page the lockup is a link home. A link, but not blue: the
   masthead reads as one thing, not as a word someone underlined. */
a.brandlock{color:inherit; text-decoration:none;}
a.brandlock:hover .mark b{color:var(--gate);}
a.lang{text-decoration:none; display:flex; align-items:center;}
.bubble{position:relative; background:var(--signal); border-radius:999px;
  padding:8px 19px 9px; display:flex; align-items:baseline; gap:1px; flex:none;
  box-shadow:0 0 22px -6px rgba(255,212,0,.5);}
.bubble::after{content:''; position:absolute; right:-12px; top:50%; transform:translateY(-50%);
  border-left:14px solid var(--signal); border-top:11px solid transparent;
  border-bottom:11px solid transparent;}
.bubble .t{font-family:Archivo,sans-serif; font-weight:400; font-size:21px; color:#FFFFFF;
  letter-spacing:-.005em;}
.bubble .m{font-family:Archivo,sans-serif; font-weight:700; font-size:21px; color:#141414;
  letter-spacing:-.012em;}
.bubble .v{position:relative;}
.bubble .v .pl{position:absolute; left:50%; top:-9px; width:13px; height:13px; color:#5E5E5E;
  transform:translateX(-50%) rotate(24deg);}
/* The brand's own word, set in the board's lit yellow and clear of the bubble's tail.
   Travel Mama's logo is not touched: this sits beside it. */
.go{font-family:Archivo,sans-serif; font-weight:700; font-size:21px; color:var(--gate);
  letter-spacing:.02em; margin-left:6px; flex:none;}
.since{font-family:Archivo,sans-serif; font-size:10px; letter-spacing:.14em; color:#B9C0C8;
  font-weight:600; flex:none; margin-left:10px;}
.divider{width:1px; height:26px; background:#33404C; flex:none;}
.mark{font-family:"Bodoni Moda","Noto Serif TC",serif; font-size:22px; letter-spacing:.005em;
  display:flex; align-items:baseline; gap:10px; min-width:0;}
.mark b{font-weight:700;}
.mark span{font-family:Archivo,sans-serif; font-size:9.5px; letter-spacing:.28em;
  text-transform:uppercase; color:var(--ash); white-space:nowrap;}
@media (max-width:720px){ .since,.divider,.mark span{display:none;} }
.mnav{margin-left:auto; display:flex; align-items:center; gap:22px;}
.mlink{background:none; border:0; font-size:12.5px; color:var(--ash); padding:0;
  letter-spacing:.03em; text-decoration:none;}
.mlink:hover{color:var(--brass);}
/* The other two shops, named by what they sell rather than by what they are called.
   They leave this site, so they are links; the board's own buttons stay plain. */
.sisters{display:flex; align-items:center; gap:18px;}
.mlink.out{text-decoration:none; border-left:1px solid var(--edge); padding-left:18px;}
.langs{display:flex; border:1px solid var(--edge);}
.lang{border:0; background:transparent; color:var(--slate); font-size:10.5px;
  padding:6px 12px; letter-spacing:.14em;}
.lang[aria-pressed="true"]{background:var(--brass); color:var(--void); font-weight:600;}

/* ---------- hero ---------- */
.hero{position:relative; padding-block:clamp(34px,4.2vw,58px) clamp(26px,3.2vw,40px);
  overflow:hidden;}
.hero::before{content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(90% 60% at 18% 0%, rgba(217,164,65,.09), transparent 62%);}
.hero .wrap{position:relative; z-index:1;}
.hero h1{font-size:clamp(46px,8.2vw,104px); line-height:.96; letter-spacing:-.022em;
  max-width:16ch;}
.hero h1 em{font-style:italic; color:var(--brass); font-weight:400;}
.nobr{white-space:nowrap;}
/* The headline on the left, what a seat on these tours gets you on the right; under the
   headline once the two stop fitting side by side. */
.herotop{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,420px); gap:26px clamp(28px,4vw,64px);
  align-items:end;}
.perks{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr;
  border:1px solid var(--edge); background:rgba(17,24,32,.72);}
.perk{display:flex; gap:10px; align-items:flex-start; padding:17px 15px 18px;
  border-right:1px solid var(--edge); border-bottom:1px solid var(--edge);}
.perk:nth-child(2n){border-right:0;}
.perk:nth-child(n+3){border-bottom:0;}
.perk svg{flex:0 0 22px; width:22px; height:22px; margin-top:1px; fill:none; stroke:var(--brass);
  stroke-width:1.5; stroke-linejoin:round; stroke-linecap:round;}
.perk b{display:block; color:var(--bone); font-size:15px; font-weight:600; line-height:1.35;}
.perk b+span{display:block; margin-top:4px; color:var(--ash); font-size:13px; line-height:1.55;}
.perkmore{display:inline-block; margin-top:10px; color:var(--brass); font-size:13px;
  text-decoration:none;}
.perkmore:hover{text-decoration:underline; text-underline-offset:3px;}
@media (max-width:1100px){ .herotop{grid-template-columns:1fr;} .perks{max-width:720px;} }
@media (max-width:420px){
  .perks{grid-template-columns:1fr;}
  .perk,.perk:nth-child(n){border-right:0; border-bottom:1px solid var(--edge); padding:14px 16px;}
  .perk:last-child{border-bottom:0;}
}
.herofoot{display:flex; align-items:flex-end; justify-content:space-between; gap:34px;
  margin-top:clamp(26px,3.4vw,44px); flex-wrap:wrap;}
.lede{max-width:40ch; color:var(--ash); font-size:16px;}
.stats{display:flex; gap:clamp(22px,3vw,44px);}
.stat .n{font-size:clamp(22px,2.4vw,30px); color:var(--bone); line-height:1.1;
  font-family:"IBM Plex Mono",monospace; font-variant-numeric:tabular-nums;}
.stat .l{margin-top:5px;}

/* ---------- the board ---------- */
.boardwrap{padding-bottom:clamp(50px,7vw,96px);}
.panel{border:1px solid var(--edge); background:var(--panel);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.045), 0 40px 90px -46px rgba(0,0,0,1);}
.phead{display:flex; align-items:center; gap:13px; padding:14px 20px;
  background:var(--signal); color:#000;}
.phead svg{width:26px; height:26px; flex:none;}
/* icon, Chinese and English travel together; the clock no longer drags the icon down */
.pmark{display:flex; align-items:baseline; gap:13px; min-width:0;}
.pmark svg{align-self:center;}
.phead .ptitle{font-family:"Bodoni Moda","Noto Serif TC",serif; font-size:clamp(21px,2.6vw,30px);
  font-weight:700; letter-spacing:-.005em; line-height:1; align-self:baseline;}
.phead .psub{font-size:9.5px; letter-spacing:.3em; text-transform:uppercase; color:#4A3D00;
  align-self:baseline; font-weight:600;}
.phead .live{display:flex; align-items:center; gap:7px; color:#3D3200;
  font-size:9.5px; letter-spacing:.24em; text-transform:uppercase; font-weight:600;}
.phead .spacer{margin-left:auto;}
.clock{background:#000; color:var(--gate); font-family:"IBM Plex Mono",monospace;
  font-variant-numeric:tabular-nums; padding:5px 12px; display:flex; flex-direction:column;
  align-items:center; line-height:1.15; border:1px solid #6B5200;}
.clock .dd{font-size:10px; letter-spacing:.16em;}
.clock .tt{font-size:15px; letter-spacing:.14em; font-weight:500;}
@media (max-width:620px){ .clock{display:none;} }

/* At phone width the panel banner is three things competing for one line: the name,
   its English twin, and a count long enough to be a sentence. Flexbox takes the space
   out of the Chinese, which then wraps one character per line. Give each its own row. */
@media (max-width:620px){
  .phead{flex-wrap:wrap; gap:7px 12px; padding:12px 16px;}
  .pmark{flex:1 1 100%; align-items:center; gap:10px;}
  /* The English twin is two short words and may not break; the Chinese title may be a
     whole tour name, and telling that not to wrap pushes the page sideways. */
  .phead .psub{white-space:nowrap;}
  .phead .ptitle{min-width:0; overflow-wrap:anywhere;}
  .phead .spacer{display:none;}
  .phead .count{flex:1 1 100%; letter-spacing:.12em; line-height:1.55;}
}

/* On a phone the header has more in it than a row holds, and letting the nav wrap
   inside itself left the labels hugging the right edge with the language switch
   stranded on a third row — tidy in the stylesheet, ragged on the screen.
   The nav stops being a box of its own instead. Its children join the header's own
   row, so the language switch can sit up beside the logo and the four labels take the
   full width underneath, reading from the left like everything else on the page. */
@media (max-width:720px){
  .mast .wrap{gap:11px 14px; align-items:center;}
  /* The nav stops being a box of its own so its parts can be placed on the header's
     own rows: the language switch up beside the logo, the four labels underneath,
     reading from the left like everything else on the page. */
  .mnav, .sisters{display:contents;}
  .langs{order:1; margin-left:auto;}
  .mlink{order:2; white-space:nowrap; font-size:13px;}
  .mlink.out{padding-left:14px;}
  /* 保證出發 is the first thing the page says in type five times this size, and the
     yellow banner below repeats it. On a phone it is what stops the logo row from
     having room for anything else, so here it goes. */
  .brandlock .mark{display:none;}
}

/* ---------- the desk, when there is someone at it ---------- */
/* Outside office hours the button goes and the sentence changes. A button that reaches
   nobody at two in the morning is worse than no button; so is telling someone to come
   back tomorrow when they could have booked in the next three minutes. */
.wa{border-top:1px solid var(--edge); background:var(--panel); padding:44px 0 48px;}
.wa .walbl{font-size:10.5px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--slate); font-weight:600;}
.wa h3{margin:.55rem 0 .7rem; font-size:1.3rem; font-weight:600; color:var(--bone);}
.wa p{margin:0; max-width:46rem; color:var(--ash); line-height:1.75;}
.wa.open .walbl{color:#5fd08a;}
.wabtn{display:inline-flex; align-items:center; gap:9px; margin-top:20px;
  background:#25D366; color:#062b13; text-decoration:none; font-weight:600;
  font-size:14px; padding:12px 22px;}
.wabtn svg{width:19px; height:19px;}
.wabtn:hover{background:#1fbb59;}
.wahours{margin-top:18px; font-size:11.5px; letter-spacing:.1em; color:var(--slate);}

/* ---------- what the visitor keeps: a shortlist, a comparison, a trail ---------- */
/* The bar only exists once there is something in it, so an empty shortlist costs the
   page nothing — no chrome, no explaining, no row of zeros. */
.keepbar{position:fixed; left:0; right:0; bottom:0; z-index:60; background:var(--signal);
  color:#000; border-top:1px solid #6B5200; padding-block:9px;}
.keepbar .wrap{display:flex; align-items:center; gap:14px;}
.keepbar .spacer{margin-left:auto;}
.kcount{font-size:11.5px; letter-spacing:.14em; font-weight:600; color:#2A2200;}
.kbtn{background:#000; color:var(--signal); border:0; font:inherit; font-size:12px;
  letter-spacing:.12em; padding:8px 18px; cursor:pointer;}
.kbtn:hover{background:#1a1a1a;}

.keepbtns{display:flex; gap:10px; margin:18px 0 4px; flex-wrap:wrap;}
.kb{display:inline-flex; align-items:center; gap:7px; background:rgba(7,10,13,.55);
  border:1px solid var(--edge); color:var(--bone); font:inherit; font-size:12.5px;
  padding:9px 15px; cursor:pointer; backdrop-filter:blur(4px);}
.kb svg{width:15px; height:15px; opacity:.75;}
.kb:hover{border-color:var(--brass); color:var(--brass);}
.kb.on{background:var(--signal); border-color:var(--signal); color:#000;}
.kb.on svg{opacity:1;}

.keepwrap{position:fixed; inset:0; z-index:90; background:rgba(4,6,9,.72);
  display:flex; align-items:flex-start; justify-content:center; padding:36px 16px;
  overflow:auto; backdrop-filter:blur(3px);}
.keepcard{width:100%; max-width:860px; background:var(--panel); border:1px solid var(--edge);}
#kbody{padding:4px 22px 26px;}
.ksec{margin-top:22px;}
.khead{display:flex; align-items:baseline; gap:14px; margin-bottom:12px;}
.khead h4{margin:0; font-size:12px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--slate); font-weight:600;}
.kclear{margin-left:auto; background:none; border:0; color:var(--slate); font:inherit;
  font-size:11.5px; cursor:pointer; text-decoration:underline; text-underline-offset:3px;}
.kclear:hover{color:var(--brass);}
.kx2{background:none; border:1px solid var(--edge); color:var(--slate); font:inherit;
  font-size:11px; padding:5px 10px; cursor:pointer; white-space:nowrap;}
.kx2:hover{border-color:#ff8579; color:#ff8579;}
.kchips{display:flex; flex-wrap:wrap; gap:8px; margin-top:12px;}
.kchip{background:none; border:1px solid var(--edge); color:var(--ash); font:inherit;
  font-size:11.5px; padding:6px 11px; cursor:pointer;}
.kchip:hover{border-color:#ff8579; color:#ff8579;}
table.cmp th{text-align:left; color:var(--slate); font-weight:500; vertical-align:top;}
table.cmp tbody th{width:15%; white-space:nowrap; font-size:11.5px; letter-spacing:.1em;}
table.cmp thead th{color:var(--bone); font-size:13px; line-height:1.3;}
table.cmp td{vertical-align:top; font-size:13px;}
@media (max-width:620px){
  .keepwrap{padding:0;}
  .keepcard{max-width:none; min-height:100vh; border:0;}
  table.cmp tbody th{width:30%; white-space:normal;}
}

/* the same banner heads every panel, which is how a board separates its zones */
.phead.info svg{width:24px; height:24px;}
.infolist{background:var(--board-bg);}
.inforow{display:grid; grid-template-columns:26px minmax(0,1fr); gap:16px;
  padding:26px 22px 30px; border-bottom:1px solid var(--board-hair); align-items:start;}
.inforow:last-child{border-bottom:0;}
.imark{width:22px; height:22px; border-radius:50%; border:1.5px solid var(--gate);
  color:var(--gate); display:grid; place-items:center; font-size:12px; font-weight:700;
  font-family:Georgia,serif; margin-top:2px;}
.inforow h3{font-size:17px; margin-bottom:6px; line-height:1.3;}
.inforow p{margin:0; color:var(--ash); font-size:13.5px; max-width:66ch; line-height:1.7;}
@media (min-width:821px){
  .infolist{display:grid; grid-template-columns:repeat(3,1fr);}
  .inforow{border-bottom:0; border-right:1px solid var(--board-hair);}
  .inforow:last-child{border-right:0;}
}
.dot{width:6px; height:6px; border-radius:50%; background:#1E7A56;}
@media (prefers-reduced-motion:no-preference){ .dot{animation:pulse 2.6s ease-in-out infinite;} }
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.2}}
.panes{display:grid; grid-template-columns:1fr 1fr; background:var(--board-bg);}
@media (max-width:1040px){ .panes{grid-template-columns:1fr;} }
.pane{border-right:1px solid var(--board-hair); min-width:0;}
.pane:last-child{border-right:0;}
@media (max-width:1040px){ .pane{border-right:0;} .pane:last-child{border-top:1px solid var(--board-hair);} }
.bhead,.brow{display:grid; grid-template-columns:112px minmax(0,1fr) 34px 96px 78px;
  gap:11px; align-items:center;}
.bhead{padding:8px 16px; border-bottom:1px solid var(--board-hair); background:#0A0C0F;}
.bhead span:nth-child(n+3){text-align:right;}
.brow{padding:9px 16px; border-bottom:1px solid var(--board-hair); background:var(--board-row);
  width:100%; border-left:0; border-right:0; border-top:0; text-align:left;
  transition:background .12s;}
.brow{color:inherit; text-decoration:none;}
.brow:last-of-type{border-bottom:0;}
.brow:hover{background:#101820;}
.brow:focus-visible{outline:1px solid var(--brass); outline-offset:-1px;}
.brow .d{font-size:12.5px; color:#FFFFFF; letter-spacing:.02em;}
.brow .d s{text-decoration:none; color:var(--slate); margin-left:5px; font-size:11px;}
.brow .dest{font-size:13.5px; color:#FFFFFF; overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap; letter-spacing:.005em; line-height:1.3;}
.brow .dest small{display:block; font-size:9px; color:var(--slate); letter-spacing:.17em;
  text-transform:uppercase; margin-top:2px; overflow:hidden; text-overflow:ellipsis;}
/* the operator's own name, kept beside a Chinese one so a client can quote either */
.dest .en{color:var(--slate); font-size:11px; margin-left:8px; letter-spacing:0;
  text-transform:none;}
.dhero .en{display:block; margin-top:9px; font-family:Archivo,sans-serif; font-size:13px;
  letter-spacing:.06em; color:var(--slate);}
.brow .n,.brow .p{text-align:right; font-size:12.5px;}
.brow .n{color:var(--ash);}
.brow .p{color:var(--gate); font-size:13px; font-weight:500;}
.brow .st{text-align:right;}
.status{font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:#3FD18F;
  white-space:nowrap; font-weight:600;}
.status.low{color:#FF6B4A;}
.allplaces{margin:18px 0 0; text-align:right;}
.allplaces a{color:var(--gate); font-size:12.5px; text-decoration:none;
  border-bottom:1px solid transparent; padding-bottom:2px;}
.allplaces a:hover{border-bottom-color:var(--gate);}

/* A wall of places. Dense on purpose: 53 countries and 746 cities is the point, and
   a grid of them says so faster than a sentence. */
.placegrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(178px,1fr));
  gap:1px; background:var(--hair); border-top:1px solid var(--hair);}
.placecell{display:block; padding:13px 16px; background:var(--board-row); color:inherit;
  text-decoration:none; transition:background .12s;}
.placecell:hover{background:#101820;}
.placecell .pn{display:block; font-size:14px; color:var(--bone);}
.placecell .pe{display:block; font-size:10.5px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--slate); margin-top:4px;}
.placecell .pc{display:block; font-size:11.5px; color:var(--gate); margin-top:6px;
  font-family:"IBM Plex Mono",monospace;}
.pager{display:flex; flex-wrap:wrap; gap:8px; margin-top:26px;}
.pager a,.pager .here{font-family:"IBM Plex Mono",monospace; font-size:12.5px;
  padding:7px 12px; border:1px solid var(--edge); color:var(--ash); text-decoration:none;}
.pager a:hover{border-color:var(--gate); color:var(--gate);}
.pager .here{background:var(--gate); color:var(--void); border-color:var(--gate);}

/* ---------------------------------------------------------------- site footer
   Where the legal pages live. Quiet, but present on every view: a travel agent that
   hides its terms looks like one worth worrying about. */
footer.site{border-top:1px solid var(--edge); background:var(--deep); margin-top:64px;}
footer.site .wrap{display:flex; align-items:baseline; gap:18px; flex-wrap:wrap;
  padding-top:26px; padding-bottom:30px;}
.sfbrand{font-family:Archivo,sans-serif; font-size:13px; color:var(--bone); flex:none;}
.sfbrand b{font-weight:600; letter-spacing:.04em;}
.sfbrand span{display:block; font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--slate); margin-top:5px;}
.sflinks{display:flex; gap:20px; flex-wrap:wrap; margin-left:auto;}
.sflinks a{color:var(--ash); font-size:12.5px; text-decoration:none;
  border-bottom:1px solid transparent; padding-bottom:2px;}
.sflinks a:hover{color:var(--gate); border-bottom-color:var(--gate);}
.sfnote{flex-basis:100%; font-size:11px; color:var(--slate); letter-spacing:.03em;}

/* A legal document reads as a numbered list, because that is how it is argued over. */
ol.legal{margin:0; padding:6px 26px 20px 46px; counter-reset:c;}
ol.legal li{color:#C7CED6; font-size:13.5px; line-height:1.85; padding:7px 0;
  border-bottom:1px solid var(--hair);}
ol.legal li:last-child{border-bottom:0;}
@media (max-width:620px){ ol.legal{padding:6px 15px 16px 34px;} }

/* While a tour's details are on their way. One line, in the panel's own type, so the
   wait does not look like a broken page. */
.dload{padding:90px 26px; text-align:center; color:var(--slate); font-size:13px;
  letter-spacing:.08em;}
.dload.bad{color:var(--rust);}

/* ------------------------------------------------------------- booking form
   The last screen before the bank, so it is deliberately quiet: no photographs, no
   animation, the amount in the same monospace as the board. */
.bkwrap{position:fixed; inset:0; z-index:90; background:rgba(3,5,7,.86);
  display:flex; align-items:flex-start; justify-content:center; overflow-y:auto;
  padding:34px 16px 48px; backdrop-filter:blur(2px);}
.bkcard{width:100%; max-width:560px; background:var(--panel); border:1px solid var(--edge);
  box-shadow:0 26px 70px rgba(0,0,0,.6);}
.bkhead{display:flex; align-items:baseline; justify-content:space-between; gap:14px;
  padding:19px 24px 15px; border-bottom:1px solid var(--edge); background:var(--cell);}
.bktitle{font-family:Archivo,sans-serif; font-size:14px; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase; color:var(--bone);}
.bkhead s{display:block; text-decoration:none; font-size:10.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--slate); margin-top:5px;}
.bkx{background:transparent; border:0; color:var(--ash); font-size:22px; line-height:1;
  padding:0 4px; cursor:pointer;}
.bkx:hover{color:var(--gate);}
.bksum{margin:0; padding:15px 24px 17px; border-bottom:1px solid var(--edge);}
.bksum div{display:flex; justify-content:space-between; gap:16px; padding:5px 0;}
.bksum dt{font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ash);
  padding-top:3px; white-space:nowrap;}
.bksum dd{margin:0; text-align:right; font-size:13px; color:var(--bone);}
.bksum dd.big{font-size:19px; color:var(--gate); font-weight:600;}
#bkform{padding:19px 24px 24px;}
.bkrow{display:flex; gap:12px; margin-bottom:12px;}
.bkrow.two{flex-wrap:wrap;}
.bkrow.two .bkf{flex:1 1 190px;}
.bkf{flex:1 1 auto; min-width:0; display:block; margin-bottom:12px;}
/* --slate is for labels beside something that already says what it is. On this form
   the label is the only thing telling you what to type, at 10.5px on a lit panel,
   which came to 3.05:1 and is not readable. --ash is 5.74:1. Same for the consent
   line and the summary: the last screen before a card is charged is the wrong place
   to be elegant about contrast. */
.bkf span{display:block; font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ash); margin-bottom:6px;}
/* A placeholder is an example, so it has to sit below what you type and above the
   background. Left to the browser it was brighter than the label above it, which
   made an empty field look filled in. */
.bkf input::placeholder,.bkf textarea::placeholder{color:var(--slate); opacity:1;}
.bkf.sex{flex:0 0 96px;}
.bkf.age{flex:0 0 160px;}
.bkf input,.bkf select,.bkf textarea{width:100%; box-sizing:border-box;
  background:var(--void); border:1px solid var(--edge); color:var(--bone);
  font-family:inherit; font-size:14px; padding:10px 11px; border-radius:0;}
.bkf input:focus,.bkf select:focus,.bkf textarea:focus{outline:0; border-color:var(--gate);}
.bkf textarea{resize:vertical;}
.bksep{font-size:11px; color:var(--ash); line-height:1.6; margin:4px 0 14px;
  padding-top:14px; border-top:1px solid var(--edge);}
.bkerr{margin:2px 0 12px; font-size:12px; color:var(--rust);}
.bkagree{margin:0 0 10px; font-size:11px; line-height:1.65; color:var(--ash);}
.bkgo{display:flex; gap:12px; margin-top:16px;}
.bkback{flex:0 0 auto; background:transparent; border:1px solid var(--edge);
  color:var(--ash); font-family:inherit; font-size:13px; padding:12px 18px; cursor:pointer;}
.bkback:hover{border-color:var(--ash); color:var(--bone);}
.bksubmit{flex:1 1 auto; background:var(--gate); color:var(--void); border:0;
  font-family:Archivo,sans-serif; font-size:13.5px; font-weight:600; letter-spacing:.06em;
  padding:13px 20px; cursor:pointer;}
.bksubmit:hover{background:#FFD873;}
.bksubmit:disabled{background:#2A3540; color:#5C6670; cursor:default;}
@media (max-width:620px){
  .bkwrap{padding:0;}
  .bkcard{max-width:none; min-height:100vh; border:0;}
  .bkgo{flex-direction:column-reverse;}
  .bkback{width:100%;}
}
@media (max-width:620px){
  .bhead,.brow{grid-template-columns:92px minmax(0,1fr) auto; gap:4px 9px; padding-inline:13px;}
  .bhead span:nth-child(3),.bhead span:nth-child(4),.brow .n,.brow .p{display:none;}
  .brow::after{content:attr(data-price); grid-column:3; grid-row:1; text-align:right;
    color:var(--gate); font-family:"IBM Plex Mono",monospace; font-size:13px; font-weight:500;}
  .brow .st{grid-column:3; grid-row:2; text-align:right;}
  /* The price sits above the status in the third column, so the name is given both
     rows to stand in. Without this the second row is a status and two thirds of
     nothing, and every row on the board is half empty. */
  .brow .dest{grid-column:2; grid-row:1 / span 2;}
  .brow .d{grid-column:1; grid-row:1 / span 2;}
}
/* A saved or recently viewed row looks like a board row but has its own three columns:
   name, price, button. Written as .brow.krow and after the board's rules, because the
   board's five columns, declared later with the same weight, won and put the name in
   the 112px date column. A shortlist is read, not scanned: the whole name, over two
   lines if that is what it takes. */
.brow.krow{grid-template-columns:minmax(0,1fr) 96px auto; gap:12px; padding:11px 15px;}
.brow.krow .dest{grid-column:auto; grid-row:auto; white-space:normal; overflow:visible;
  text-overflow:clip;}
.brow.krow .p{display:block; grid-column:auto; grid-row:auto;}
.brow.krow .st{grid-column:auto; grid-row:auto;}
.brow.krow::after{content:none;}
.brow.krow:hover .again,.brow.krow:focus-visible .again{border-color:var(--brass); color:var(--brass);}
@media (max-width:620px){
  .brow.krow{grid-template-columns:minmax(0,1fr) auto; gap:4px 10px; padding-inline:13px;}
  .brow.krow .dest{grid-column:1; grid-row:1 / span 2;}
  .brow.krow .p{grid-column:2; grid-row:1; text-align:right;}
  .brow.krow .st{grid-column:2; grid-row:2; text-align:right;}
}
/* Stacked, the two halves of the board are one list, and the second half's column
   headings would otherwise appear again in the middle of it. */
@media (max-width:1040px){ .pane:last-child .bhead{display:none;} }

/* The tour page heading: the subject at display size, the route it takes at reading
   size beneath it. */
.tourname{font-family:"Bodoni Moda","Noto Serif TC",serif; font-size:clamp(26px,5.6vw,34px);
  line-height:1.16; margin:0; letter-spacing:-.01em;}
.tourname .route{display:block; font-family:inherit; font-size:.62em; font-weight:400;
  color:var(--ash); letter-spacing:.01em; margin-top:5px;}
.pfoot{padding:15px 18px; border-top:1px solid var(--board-hair); background:#0A0C0F;
  display:flex; gap:11px; align-items:center; flex-wrap:wrap;}
.cta{background:var(--brass); color:var(--void); border:0; padding:11px 22px;
  font-size:12.5px; font-weight:600; letter-spacing:.09em; text-transform:uppercase;}
.cta:hover{background:#EBBC62;}
.cta.ghost{background:transparent; color:var(--brass); border:1px solid var(--edge);}
.cta.ghost:hover{border-color:var(--brass);}
.pfoot .fine{margin-left:auto; font-size:11px; color:var(--slate); letter-spacing:.04em;}

/* ---------- destinations, also a board ---------- */
.band{padding-block:clamp(50px,7vw,100px); border-top:1px solid var(--edge);
  background:var(--deep);}
/* a section opens the way terminal signage does: a marked rule, a label, then the figures */
.bandhead{margin-bottom:30px;}
.signbody{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,34ch); gap:20px 54px;
  align-items:end;}
.signbody h2{font-size:clamp(34px,5.6vw,64px); line-height:1.02; letter-spacing:-.02em;}
.signbody p{color:var(--ash); margin:0 0 6px; font-size:14.5px;}
@media (max-width:820px){
  .signbody{grid-template-columns:1fr; gap:14px; align-items:start;}
  .signbody p{margin-bottom:0;}
}
.rrow{display:grid; grid-template-columns:minmax(0,1fr) 92px 122px; gap:14px 30px;
  align-items:center; padding:22px 20px; border-bottom:1px solid var(--board-hair);
  background:var(--board-row); width:100%; border-left:0; border-right:0; border-top:0;
  text-align:left; transition:background .14s; position:relative;}
a.rrow{color:inherit; text-decoration:none;}
.rrow:first-of-type{border-top:1px solid var(--edge);}
.rrow:last-of-type{border-bottom:1px solid var(--edge);}
.rrow:hover{background:#101820;}
.rrow:hover .rn{color:var(--gate);}
.rrow:focus-visible{outline:1px solid var(--gate); outline-offset:-1px;}
.rn{font-family:"Bodoni Moda","Noto Serif TC",serif; font-size:clamp(21px,2.3vw,28px);
  line-height:1.15; transition:color .14s; display:block;}
/* the countries a region actually covers: the row's substance, not decoration */
.rwhere{display:block; margin-top:7px; font-size:10px; letter-spacing:.17em;
  text-transform:uppercase; color:var(--slate); line-height:1.7;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.rrow .c{text-align:right;}
.rrow .c b{display:block; font-family:"IBM Plex Mono",monospace; font-size:clamp(23px,2.5vw,30px);
  font-weight:400; color:#FFFFFF; line-height:1; font-variant-numeric:tabular-nums;}
.rrow .c span{display:block; margin-top:6px; font-size:9px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--slate);}
.rrow .f{text-align:right;}
.rrow .f b{display:block; font-family:"IBM Plex Mono",monospace; font-size:16px;
  font-weight:500; color:var(--gate); font-variant-numeric:tabular-nums;}
.rrow .f span{display:block; margin-top:6px; font-size:9px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--slate);}
@media (max-width:760px){
  .rrow{grid-template-columns:minmax(0,1fr) auto; gap:10px 20px; padding:18px 15px;}
  .rrow .c{grid-column:2; grid-row:1;}
  .rrow .f{grid-column:2; grid-row:2; align-self:start;}
  .rwhere{white-space:normal;}
}

/* ---------- the three points ---------- */
.points{display:grid; grid-template-columns:repeat(3,1fr); gap:0;
  border-top:1px solid var(--edge);}
.point{padding:30px 30px 34px; border-right:1px solid var(--edge);}
.point:last-child{border-right:0;}
.point .k{font-family:"IBM Plex Mono",monospace; font-size:11px; color:var(--brass-lo);
  letter-spacing:.2em;}
.point h3{font-size:clamp(19px,2vw,24px); margin:13px 0 9px; line-height:1.2;}
.point p{margin:0; color:var(--ash); font-size:14px; max-width:34ch;}
@media (max-width:820px){
  .points{grid-template-columns:1fr;}
  .point{border-right:0; border-bottom:1px solid var(--edge); padding:26px 0 28px;}
  .point:last-child{border-bottom:0;}
}

/* ---------- browse ---------- */
.layout{display:grid; grid-template-columns:236px 1fr; gap:46px; padding-block:34px 60px;}
@media (max-width:900px){ .layout{grid-template-columns:1fr; gap:24px;} }
.rail{display:flex; flex-direction:column; gap:22px; align-self:start;}
@media (min-width:901px){ .rail{position:sticky; top:86px;} }
.fgroup{display:flex; flex-direction:column; gap:9px;}
select{font:inherit; font-size:13.5px; padding:9px 11px; color:var(--bone);
  background:var(--cell); border:1px solid var(--edge); border-radius:0; width:100%;}
select:focus-visible{outline:1px solid var(--brass); outline-offset:-1px;}
input[type=range]{width:100%; accent-color:var(--brass);}
.chips{display:flex; flex-wrap:wrap; gap:6px;}
.chip{font-size:12px; padding:6px 11px; border:1px solid var(--edge); background:transparent;
  color:var(--ash); letter-spacing:.04em;}
.chip[aria-pressed="true"]{background:var(--brass); border-color:var(--brass);
  color:var(--void); font-weight:600;}
.reset{align-self:flex-start; background:none; border:0; color:var(--brass); font-size:12px;
  padding:0; letter-spacing:.14em; text-transform:uppercase;}
.rows{list-style:none; margin:0; padding:0; background:var(--board-bg);}
.empty{padding:60px 0; color:var(--ash); text-align:center; background:var(--board-bg);}
/* how far down the list you are, and the way further down it */
.more{padding:20px 18px 26px; text-align:center; background:var(--board-bg);
  border-top:1px solid var(--board-hair);}
.morebtn{background:transparent; border:1px solid var(--edge); color:var(--ash);
  font:inherit; font-size:12.5px; letter-spacing:.06em; padding:11px 22px;
  cursor:pointer; border-radius:0;}
.morebtn:hover{border-color:var(--gate); color:var(--gate);}
/* the banner carries the count, so the board reads as one instrument */
.phead .count{font-size:10px; letter-spacing:.2em; text-transform:uppercase;
  color:#3D3200; font-weight:600;}

/* ---------- itinerary: day rows in the board's own grammar ---------- */
.daylist{background:var(--board-bg);}
.day{display:grid; grid-template-columns:58px minmax(0,1fr) 78px 150px; gap:6px 18px;
  padding:15px 18px; border-bottom:1px solid var(--board-hair); align-items:start;}
.day:last-child{border-bottom:0;}
.dnum{font-family:"IBM Plex Mono",monospace; font-size:21px; color:var(--gate);
  font-variant-numeric:tabular-nums; line-height:1.15;}
.dnum span{display:block; font-size:8.5px; letter-spacing:.2em; color:var(--slate);
  text-transform:uppercase; margin-top:2px;}
.droutex{font-size:15px; color:#FFFFFF; line-height:1.4;}
.dkm{text-align:right; font-family:"IBM Plex Mono",monospace; font-size:13px; color:var(--ash);
  font-variant-numeric:tabular-nums;}
.dmeals{display:flex; gap:5px; flex-wrap:wrap; justify-content:flex-end;}
.mbadge{font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:#3FD18F;
  border:1px solid #1E6B4D; padding:2px 7px; white-space:nowrap;}
/* the timed stops sit under the route the way a board prints its second line */
/* A stop's description, with whatever did not fit behind a disclosure. <details> is
   native, so the server-rendered page opens it with no script at all. The marker is
   removed because the row already reads as a line of text rather than a control, and
   the word 詳情 carries the affordance. */
/* Named dmore, not more. The board's own "load more" footer is .more, and it carries
   padding:20px 18px 26px, text-align:center, a background and a border-top. An
   itinerary disclosure sharing that name inherited all four: every stop with a 詳情
   link sat 18px right of the stops without one, drew a hairline above itself, and
   centred whatever wrapped. On the page that read as sentences at the wrong place on
   the line, on most of the catalogue. */
.dstop details.dmore{display:inline;}
.dstop details.dmore>summary{display:inline; list-style:none; cursor:pointer;}
.dstop details.dmore>summary::-webkit-details-marker{display:none;}
.dstop details.dmore>summary i{font-style:normal; color:var(--brass); white-space:nowrap;}
.dstop details.dmore>summary i::after{content:" \203A";}
.dstop details.dmore[open]>summary i{display:none;}
.dstop details.dmore>summary:focus-visible{outline:2px solid var(--brass); outline-offset:2px;}
.dstops{grid-column:2/-1; margin-top:7px; display:flex; flex-direction:column; gap:3px;}
.dstop{font-size:12px; color:var(--slate); display:flex; gap:10px; line-height:1.5;}
.dstop b{font-family:"IBM Plex Mono",monospace; font-weight:400; color:var(--brass-lo);
  flex:none; min-width:62px;}
/* A day the operator gave no times for. Written from the day's own facts rather than
   left blank, because an empty row under a date reads as a broken page. */
.dnote{grid-column:2/-1; margin-top:7px; font-size:12px; color:var(--slate); line-height:1.65;
  max-width:62ch;}
@media (max-width:760px){
  .dnote{grid-column:2/-1;}
  .day{grid-template-columns:44px minmax(0,1fr) auto; gap:5px 13px; padding:14px 14px;}
  .dkm{grid-column:3; grid-row:1; font-size:12px;}
  .dmeals{grid-column:2/-1; grid-row:2; justify-content:flex-start; margin-top:4px;}
  .dstops{grid-column:2/-1;}
  .dstop b{min-width:54px;}
}
/* the reason to click, in the row where people are choosing */
.hl{display:block; margin-top:4px; font-size:11.5px; color:var(--gate); letter-spacing:.04em;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; opacity:.92;}
.hl s{text-decoration:none; color:var(--slate); margin:0 6px;}
/* the guide's language decides whether a Hong Kong customer can join at all,
   so a Mandarin-guided tour says so on the row */
.lang-badge{display:inline-block; font-size:9px; letter-spacing:.14em; padding:1px 6px;
  border:1px solid #1E6B4D; color:#3FD18F; margin-left:8px; vertical-align:1px;}
.lang-badge.un{border-color:#6B5200; color:var(--gate);}
/* the same list, given room, at the top of the tour page */
.hlstrip{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  background:var(--board-bg);}
.hlcell{padding:20px; border-right:1px solid var(--board-hair); display:flex; gap:13px;
  align-items:flex-start;}
.hlcell:last-child{border-right:0;}
.hlcell .i{width:22px; height:22px; border:1.5px solid var(--gate); color:var(--gate);
  display:grid; place-items:center; font-family:"IBM Plex Mono",monospace; font-size:10px;
  flex:none; margin-top:1px;}
.hlcell .b{min-width:0;}
.hlcell .t{font-size:16px; color:#FFFFFF; line-height:1.3;
  font-family:"Bodoni Moda","Noto Serif TC",serif;}
.hlcell .r{display:block; margin-top:7px; font-size:13px; color:var(--ash); line-height:1.65;}
@media (max-width:640px){
  .hlstrip{grid-template-columns:1fr;}
  .hlcell{border-right:0; border-bottom:1px solid var(--board-hair);}
  .hlcell:last-child{border-bottom:0;}
}
/* what the price covers, as the operator declares it */
.inclist{background:var(--board-bg);}
.incrow{display:grid; grid-template-columns:132px minmax(0,1fr); gap:18px; padding:14px 18px;
  border-bottom:1px solid var(--board-hair); align-items:baseline;}
.incrow:last-child{border-bottom:0;}
.incrow .k{font-size:11px; letter-spacing:.12em; color:var(--gate); text-align:right;}
.incrow .k b{display:block; font-family:"IBM Plex Mono",monospace; font-size:16px;
  color:#FFFFFF; letter-spacing:0; margin-bottom:3px; font-weight:400;}
.incrow .v{font-size:14px; color:#D8DDE3; line-height:1.7;}
@media (max-width:640px){
  .incrow{grid-template-columns:1fr; gap:5px; padding:13px 15px;}
  .incrow .k{text-align:left;}
  .incrow .k b{display:inline; margin-right:7px;}
}
.srcnote{padding:13px 18px; background:#0A0C0F; border-top:1px solid var(--board-hair);
  font-size:11.5px; color:var(--slate); line-height:1.7;}
/* a note about money rather than about where the facts came from */
.srcnote.warn{color:var(--brass);}

/* what the price does not cover, and the operator's own clauses behind it */
.exclist{background:var(--board-bg);}
.exclist .incrow .k{color:var(--rust);}
.hotellist{background:var(--board-bg);}
.hotel{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:4px 20px;
  padding:14px 18px; border-bottom:1px solid var(--board-hair); align-items:baseline;}
.hotel:last-child{border-bottom:0;}
.hotel .hn{font-size:14.5px; color:#FFFFFF;}
.hotel .hs{color:var(--gate); font-size:12px; letter-spacing:.08em; white-space:nowrap;}
.hotel .ha{grid-column:1/-1; font-size:11.5px; color:var(--slate); line-height:1.6;}
.hotel .ha i{font-style:normal; color:var(--slate); margin:0 7px;}
.hotel .ha b{color:var(--slate); font-weight:400; font-family:"IBM Plex Mono",monospace;
  margin-right:9px;}
.terms{background:var(--board-bg);}
.termrow{border-bottom:1px solid var(--board-hair);}
.termrow:last-child{border-bottom:0;}
.termrow summary{padding:14px 18px; cursor:pointer; display:grid;
  grid-template-columns:minmax(0,1fr) auto; gap:16px; align-items:baseline;
  list-style:none;}
.termrow summary::-webkit-details-marker{display:none}
.termrow summary .t{font-size:14.5px; color:#FFFFFF;}
.termrow summary .e{font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--slate);}
.termrow summary:hover .t{color:var(--gate);}
.termrow[open] summary .t{color:var(--gate);}
.termrow .body{padding:2px 18px 18px; font-size:13px; color:var(--ash); line-height:1.85;
  max-width:84ch;}
/* the agency's own clauses, which are the ones the customer contracts on */
.houselist{background:var(--board-bg);}
.housegrp{border-bottom:1px solid var(--board-hair); padding:16px 18px;}
.housegrp:last-child{border-bottom:0;}
.housegrp .g{font-size:11px; letter-spacing:.16em; color:var(--gate); margin-bottom:9px;}
.housegrp ul{margin:0; padding-left:18px; list-style:none;}
.housegrp li{font-size:13.5px; color:#D8DDE3; line-height:1.85; margin-bottom:8px;
  position:relative;}
.housegrp li:last-child{margin-bottom:0;}
.housegrp li::before{content:'·'; position:absolute; left:-14px; color:var(--slate);}
.housegrp li b{color:var(--gate); font-weight:400;}
/* the cities on the route, as pictures */
.gallery{display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
  background:var(--board-bg); gap:1px;}
.shotcell{position:relative; aspect-ratio:3/2; overflow:hidden; background:#0A0C0F;
  border:0; padding:0; margin:0; display:block; width:100%;}
.shotcell img{width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .5s cubic-bezier(.2,.8,.2,1);}
.shotcell:hover img{transform:scale(1.045);}
.shotcell figcaption{position:absolute; left:0; right:0; bottom:0; padding:22px 12px 9px;
  font-size:12px; color:#FFFFFF; letter-spacing:.04em; text-align:left;
  background:linear-gradient(to top, rgba(7,10,13,.92), transparent);}
.shotcell figcaption s{text-decoration:none; display:block; font-size:9.5px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--slate); margin-top:2px;}
@media (max-width:520px){
  .gallery{grid-template-columns:repeat(2,1fr);}
  .shotcell figcaption{font-size:11px; padding:18px 9px 7px;}
}
/* ---------- booking: the board's gate, where a date becomes a seat ---------- */
tbody tr.pick td{background:#14201A; box-shadow:inset 2px 0 0 var(--gate);}
tbody tr[data-pick]{cursor:pointer;}
.bookbar{position:sticky; bottom:0; z-index:4; background:#0B1015;
  border-top:1px solid var(--gate); box-shadow:0 -18px 40px -24px rgba(0,0,0,1);}
.bookbar .wrap{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:14px 26px;
  align-items:end; padding-block:16px;}
.bookpick{display:flex; gap:clamp(16px,2.4vw,34px); flex-wrap:wrap; align-items:flex-end;}
.bookpick .f{display:flex; flex-direction:column; gap:5px;}
/* A departure that has closed since the link was made. Rust rather than white,
   because it is the one line in the bar that is telling the reader something
   went wrong, and it wraps because it is a sentence rather than a date. */
.bookpick .f .v.warn{color:var(--rust); font-family:inherit; font-size:14.5px;
  letter-spacing:0; white-space:normal; max-width:44ch;}
.bookpick .f .v{font-family:"IBM Plex Mono",monospace; font-size:17px; color:#FFFFFF;
  font-variant-numeric:tabular-nums;}
.occ{display:flex; border:1px solid var(--edge);}
.occ button{background:transparent; border:0; color:var(--ash); font-size:12px;
  padding:7px 11px; letter-spacing:.04em; white-space:nowrap;}
.occ button[aria-pressed="true"]{background:var(--gate); color:var(--void); font-weight:600;}
.occ button:disabled{color:#3A4753; cursor:not-allowed;}
.pax{display:flex; align-items:center; border:1px solid var(--edge);}
.pax button{background:transparent; border:0; color:var(--gate); font-size:15px; padding:5px 12px;}
/* Still a control a person reads to see why it will not move: at #3A4753 the
   minus sign was 2:1 on the panel and looked like a rendering fault. */
.pax button:disabled{color:var(--slate);}
.pax span{font-family:"IBM Plex Mono",monospace; font-size:15px; color:#FFFFFF;
  min-width:26px; text-align:center;}
.total{text-align:right;}
.total .t{font-family:"IBM Plex Mono",monospace; font-size:clamp(22px,2.6vw,30px);
  color:var(--gate); font-variant-numeric:tabular-nums; line-height:1.1;}
.total .n{font-size:11px; color:var(--slate); margin-top:5px; letter-spacing:.06em;}
.bookgo{background:var(--gate); color:var(--void); border:0; padding:13px 26px;
  font-size:13px; font-weight:600; letter-spacing:.09em; text-transform:uppercase;
  margin-top:11px; white-space:nowrap;}
.bookgo:hover{background:#FFD873;}
.bookgo:disabled{background:#2A3540; color:#BEC4CB;}
.bookhint{grid-column:1/-1; font-size:11.5px; color:var(--slate); letter-spacing:.04em;}
.bookhint .warn{color:var(--rust); display:inline;}
.bookhint .paylink{color:var(--brass); text-decoration:none;
  border-bottom:1px solid rgba(217,164,65,.4);}
.bookhint .paylink:hover{color:var(--gate); border-bottom-color:var(--gate);}
/* The room, the party and the per-person price: three fields on a desk, one folded
   line on a phone. display:contents so that on a wide screen they sit in the bar's
   own flex row exactly as they did before there was a wrapper around them. */
.bkopts{display:contents;}
.bkoptsbtn{display:none;}
@media (max-width:760px){
  .bookbar .wrap{grid-template-columns:1fr; align-items:stretch;}
  .total{text-align:left;}
  .bookgo{width:100%;}
}
@media (max-width:620px){
  .bkoptsbtn{display:flex; align-items:center; gap:8px; width:100%;
    background:transparent; border:1px solid var(--edge); color:var(--ash);
    font:inherit; font-size:12.5px; letter-spacing:.04em; padding:10px 12px;
    cursor:pointer; border-radius:0; text-align:left;}
  .bkoptsbtn .cv{margin-left:auto; color:var(--gate);}
  .bkoptsbtn:hover{border-color:var(--gate);}
  .bkopts{display:none;}
  .bkopts.open{display:flex; flex-wrap:wrap; gap:16px 22px; width:100%;}
  /* The date is a label and a value; on a phone they sit on one line rather than two. */
  .bookpick>.f{flex-direction:row; align-items:baseline; gap:12px; width:100%;}
  .bookpick>.f .lbl{flex:0 0 auto;}
  /* The toggle already says how many are travelling. */
  .total .n{display:none;}
}
.optnote{display:none; width:100%; font-size:11.5px; color:var(--slate); letter-spacing:.04em;}
.bkopts.open .optnote{display:block;}
/* ---------- detail ---------- */
/* A tour is a page, not a window over one: it sits in the flow between the masthead
   and the footer, so the brand, the nav, the licence number and the way to the other
   pages are all still there while somebody decides to spend four figures. */
.detail{background:var(--void);}
.dbar{border-bottom:1px solid var(--edge); padding-block:14px;}
.back{background:none; border:0; color:var(--brass); padding:0; font-size:12px;
  letter-spacing:.16em; text-transform:uppercase;}
.dhero{padding-block:clamp(34px,5vw,64px) clamp(26px,3vw,40px); position:relative;
  border-bottom:1px solid var(--edge); background-size:cover; background-position:center 38%;}
.dhero::before{content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(80% 70% at 12% 0%, rgba(217,164,65,.08), transparent 60%);}
/* With a photo the hero keeps the left column dark enough to read on, and lets the
   image breathe to the right. With none, nothing shows and the hero is as it was. */
.dhero.shot{padding-block:clamp(58px,8vw,116px) clamp(34px,4vw,56px); min-height:clamp(300px,34vw,460px);
  display:flex; align-items:flex-end;}
.dhero.shot::after{content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(100deg, rgba(7,10,13,.97) 0%, rgba(7,10,13,.90) 38%,
    rgba(7,10,13,.55) 72%, rgba(7,10,13,.38) 100%),
    linear-gradient(to top, rgba(7,10,13,.92) 0%, transparent 46%);}
.dhero.shot .wrap{position:relative; z-index:1; width:100%;}
/* Over a photograph, so no fixed colour can promise a ratio: a city name in
   the corner of a bright sky was 3.6:1. The shadow gives it its own dark ground
   whatever the picture underneath is doing. */
.credit{position:absolute; right:14px; bottom:10px; z-index:2; font-size:9px;
  letter-spacing:.16em; text-transform:uppercase; color:rgba(240,235,225,.72);
  text-shadow:0 1px 3px rgba(0,0,0,.92), 0 0 8px rgba(0,0,0,.7);}
@media (max-width:620px){
  .dhero.shot::after{background:linear-gradient(to top, rgba(7,10,13,.97) 18%,
    rgba(7,10,13,.86) 52%, rgba(7,10,13,.55) 100%);}
  .dhero.shot{min-height:270px;}
}
.dhero .wrap{position:relative;}
.dhero h2{font-size:clamp(30px,5.2vw,62px); line-height:1.02; letter-spacing:-.02em; max-width:17ch;}
.dhook{margin-top:16px; font-family:"Bodoni Moda","Noto Serif TC",serif;
  font-size:clamp(17px,2.1vw,23px); color:var(--gate); line-height:1.4; max-width:34ch;}
.dsum{margin-top:14px; color:#B6BEC7; font-size:14.5px; line-height:1.9; max-width:60ch;}
.droute{margin-top:20px; color:var(--ash); font-size:13px; line-height:1.85; max-width:76ch;}
.dfacts{display:flex; gap:clamp(24px,3.6vw,52px); flex-wrap:wrap; margin-top:30px;
  padding-top:24px; border-top:1px solid var(--edge);}
.fact .v{font-size:clamp(21px,2.4vw,28px); margin-top:6px; line-height:1;
  font-family:"IBM Plex Mono",monospace; font-variant-numeric:tabular-nums;}
.fact .v.brass{color:var(--brass);}
.fact .v.small{font-family:Archivo,sans-serif; font-size:15px; line-height:1.4;}
/* the supplier's reference: a code, so it keeps the mono face at the small size */
.fact .v.code{font-size:15px; line-height:1.4; letter-spacing:.05em; color:var(--ash);}
.dsec{padding-block:clamp(36px,5vw,64px);}
.dtitle{display:flex; align-items:baseline; gap:18px; margin-bottom:9px; flex-wrap:wrap;}
.dtitle h3{font-size:clamp(23px,3vw,32px);}
.sortbtn{background:none; border:0; font-size:11px; color:var(--brass); padding:0;
  letter-spacing:.16em; text-transform:uppercase;}
.note{font-size:13.5px; color:var(--ash); margin:0 0 22px; max-width:62ch;}
.tblwrap{overflow-x:auto; background:var(--board-bg);}
table{border-collapse:collapse; width:100%; min-width:560px;}
thead th{font-size:9.5px; letter-spacing:.24em; text-transform:uppercase; color:var(--slate);
  text-align:left; font-weight:400; padding:9px 16px; background:#0A0C0F;
  border-bottom:1px solid var(--board-hair);}
th.num,td.num{text-align:right;}
tbody td{padding:11px 16px; border-bottom:1px solid var(--board-hair); font-size:13.5px;
  background:var(--board-row); color:#FFFFFF;}
tbody td.mono{font-family:"IBM Plex Mono",monospace; font-variant-numeric:tabular-nums;}
tbody td.gate{color:var(--gate); font-weight:500;}
tbody td.muted{color:var(--ash);}
tbody td s{text-decoration:none; color:var(--slate); margin-left:9px; font-size:12.5px;}
/* A departure row is a control. On the board it carries role="button" and answers the
   keyboard; on the server-rendered page it carries one link stretched over the row, so
   the whole row is the target and Tab stops on it once. Both show where the focus is. */
tbody tr.pickrow{position:relative;}
.pickgo{color:inherit; text-decoration:none;}
.pickgo::after{content:''; position:absolute; inset:0;}
tbody tr[data-pick]{cursor:pointer;}
tbody tr[data-pick]:focus-visible,
tbody tr.pickrow:focus-within{outline:2px solid var(--gate); outline-offset:-2px;}
tbody tr[data-pick]:focus{outline:none;}
tbody tr[data-pick]:focus-visible{outline:2px solid var(--gate);}
table{table-layout:fixed;}
tbody tr:hover td{background:#101820;}
tbody tr:last-child td{border-bottom:0;}
tbody tr.best td{background:#0A1410;}
tbody tr.best:hover td{background:#0E1B15;}
.tagbest{font-size:9px; letter-spacing:.18em; text-transform:uppercase; color:#3FD18F;
  margin-left:8px;}
.foot{border-top:1px solid var(--edge); padding-block:26px 44px; font-size:12px;
  color:var(--slate); max-width:78ch; letter-spacing:.02em; line-height:1.8;}