/* Kanchanaburi Taxis — the fare gets you to the town. The town is the gateway.
 *
 * The price list here is the same shape as Hua Hin's — three routes out of
 * Bangkok at one figure, plus Pattaya — so the fares cannot be what this page
 * is about, or the two sites would be the same page twice. The real fact is
 * geographic: Kanchanaburi town is 130 km from Bangkok, and everything people
 * actually come for sits between 0 and 220 km further up one road. The bridge
 * is in town. Erawan is 65. Hellfire Pass is 80. Sangkhlaburi is 220 and is
 * not a day trip, however the tour listings phrase it.
 *
 * So the page is a measuring device. The ground is ruled like graph paper, the
 * scale runs the width of it, and every place sits at its true distance with
 * the round-trip driving time attached. What fits in a day is a band on the
 * scale rather than a claim in a sentence.
 *
 * The grid rule this network has been bitten by: column widths are written
 * `.row > .col-md-6`, matching the base rule's specificity (0,2,0). Bare, they
 * are (0,1,0), the base rule's width:100% wins, and every grid collapses to
 * one column at every width.
 *
 * This sheet also carries the eight-chapter guide, replacing the Tabler CDN
 * and the inline stylesheet the renderer used to carry.
 */

*, *::before, *::after { box-sizing: border-box; }

:root {
  --sheet:   #f5f4ef;   /* drawing paper */
  --sheet-2: #ffffff;   /* raised, unruled */
  --sheet-3: #eceadf;   /* sunken */
  --grid:    #e4e2d7;   /* the ruling */
  --ink:     #1b1d18;
  --ink-2:   #52564a;
  --ink-3:   #6b6f61;   /* 4.68:1 on the sheet; #6e7264 measured 4.48 and failed AA */
  --rule:    #c7c5b7;
  --rule-2:  #9d9a8a;
  --pen:     #4d7c0f;   /* the drawing pen: scale marks, prices, links */
  --pen-2:   #365314;
  --warn:    #9a3412;   /* used once, for the distance that is not a day trip */
  --on-dark: #f2f1e8;

  --wide: 74rem;
  --read: 36rem;        /* running text stays near 65 characters */

  --display: 'Jost', 'Futura', 'Century Gothic', sans-serif;
  --body: 'Figtree', -apple-system, 'Segoe UI', sans-serif;
  --fig: 'Martian Mono', 'Courier New', monospace;

  color-scheme: light;
}

/* Chakra Petch is a squared Thai face that suits a drawing sheet and sits at
 * the same colour as Figtree, so the two languages read as one design. */
:lang(th) {
  --display: 'Chakra Petch', 'Leelawadee UI', Tahoma, sans-serif;
  --body: 'Chakra Petch', 'Leelawadee UI', Tahoma, sans-serif;
}

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  color: var(--ink);
  font-family: var(--body);
  font-size: 1.0625rem;
  line-height: 1.65;
  /* The ruling is the page-level move: no other site in this network has a
   * patterned ground, and a page about measuring should look measured. */
  background-color: var(--sheet);
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 26px 26px;
}

img, svg { max-width: 100%; }
img { height: auto; }
[hidden] { display: none !important; }

a { color: var(--pen-2); text-underline-offset: .16em; text-decoration-thickness: .06em; }
a:hover { color: var(--ink); }
:focus-visible { outline: 3px solid var(--pen); outline-offset: 2px; }

h1, h2, h3, h4 { font-family: var(--display); margin: 0 0 .5rem; text-wrap: balance; }
h1 { font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 700; line-height: 1.06; letter-spacing: -.02em; }
h2 { font-size: clamp(1.5rem, 3.2vw, 2.2rem); font-weight: 600; line-height: 1.14; letter-spacing: -.015em; }
h3 { font-size: 1.12rem; font-weight: 600; line-height: 1.25; }
p { margin: 0 0 1rem; }
strong, b { font-weight: 700; }
small { font-size: .85rem; }
hr { border: 0; border-top: 1px solid var(--rule); margin: 2rem 0; }

:lang(th) h1 { font-size: clamp(1.6rem, 3.8vw, 2.4rem); font-weight: 600; line-height: 1.45; letter-spacing: 0; }
:lang(th) h2 { font-size: clamp(1.25rem, 2.6vw, 1.8rem); font-weight: 600; line-height: 1.5; letter-spacing: 0; }
:lang(th) h3 { font-size: 1.05rem; font-weight: 600; }
:lang(th) body { line-height: 1.9; }

.sheet { width: min(100% - 2.5rem, var(--wide)); margin-inline: auto; }
.scroll-x, .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── masthead ─────────────────────────────────────────────────────────── */

.rail { background: var(--ink); color: var(--on-dark); position: sticky; top: 0; z-index: 50; }
.rail .sheet { display: flex; align-items: center; gap: .9rem; min-height: 3.4rem; flex-wrap: wrap; }
.railname {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--display); font-weight: 700; font-size: 1.05rem;
  color: var(--on-dark); text-decoration: none; margin-right: auto;
}
:lang(th) .railname { font-size: .96rem; font-weight: 600; }
.railname img { display: block; }
.sleepers { display: flex; align-items: center; gap: .1rem .9rem; flex-wrap: wrap; }
.sleepers a {
  color: var(--on-dark); text-decoration: none; font-weight: 600; font-size: .82rem;
  white-space: nowrap; padding: .25rem 0; border-bottom: 2px solid transparent;
}
.sleepers a:hover { border-bottom-color: var(--pen); }
.sleepers a.here { border-bottom-color: var(--on-dark); }
.tongues { display: inline-flex; gap: .45rem; padding-left: .3rem; }
.tongues a { padding: 0; border: 0; opacity: .5; }
.tongues a.here, .tongues a:hover { opacity: 1; }
.tongues img { display: block; border-radius: 1px; }

.hail {
  display: inline-block; white-space: nowrap;
  background: var(--pen); color: #fff; text-decoration: none;
  font-weight: 700; font-size: .82rem; padding: .46rem 1rem; border-radius: 2px; border: 0;
}
.hail:hover { background: var(--on-dark); color: var(--ink); }
.hail-2 {
  display: inline-block; background: transparent; color: var(--ink); text-decoration: none;
  font-weight: 700; font-size: .84rem; padding: .44rem 1rem;
  border: 2px solid var(--ink); border-radius: 2px;
}
.hail-2:hover { background: var(--ink); color: var(--sheet-2); }

/* ── the opening ──────────────────────────────────────────────────────── */

.origin { padding: 3rem 0 2rem; }
.origin h1 { max-width: 18ch; }
:lang(th) .origin h1 { max-width: 26ch; }
.origin h1 em { font-style: normal; color: var(--pen-2); }
.lede { max-width: var(--read); font-size: 1.13rem; color: var(--ink-2); }
.lede b { color: var(--ink); }

.plainly {
  max-width: var(--read); margin: 1.5rem 0 0;
  border-left: 4px solid var(--pen); padding: .1rem 0 .1rem 1rem; color: var(--ink-2);
  background: var(--sheet-2);
}
.plainly p { margin: 0; padding: .5rem .8rem .5rem 0; }
.plainly p + p { padding-top: 0; }

/* ── the scale ────────────────────────────────────────────────────────── */

.scale { margin: 2.4rem 0 0; }
.scale svg { display: block; width: 100%; min-width: 48rem; height: auto;
  background: var(--sheet-2); border: 1px solid var(--rule-2); border-radius: 2px; }
.scale figcaption {
  max-width: 46rem; margin-top: .8rem; padding-top: .6rem;
  border-top: 1px solid var(--rule); font-size: .93rem; color: var(--ink-2);
}
/* The drawing is the page's argument, so it gets its own chapter rather than
 * sitting at the bottom of the opening. */
.measure > .sheet > p { max-width: var(--read); color: var(--ink-2); }
.scalekey {
  display: flex; flex-wrap: wrap; gap: .3rem 1.6rem; margin: .9rem 0 0;
  padding-top: .6rem; border-top: 1px solid var(--rule);
  font-size: .86rem; color: var(--ink-2);
}
.scalekey b { color: var(--ink); font-family: var(--fig); font-size: .82rem; }

.sc-axis    { stroke: var(--ink); stroke-width: 2.5; }
.sc-tick    { stroke: var(--rule-2); stroke-width: 1.5; }
.sc-band    { opacity: .5; }
.sc-band-a  { fill: #dbe7c4; }   /* in and around town */
.sc-band-b  { fill: #eef1de; }   /* the day-trip belt */
.sc-band-c  { fill: #f6ece2; }   /* a full day for one thing */
.sc-band-d  { fill: #f2ded4; }   /* not a day trip */
.sc-stop    { fill: var(--pen); stroke: #fff; stroke-width: 2; }
.sc-stop-far{ fill: var(--warn); stroke: #fff; stroke-width: 2; }
.sc-name    { font-family: var(--body); font-size: 14px; font-weight: 700; fill: var(--ink); }
.sc-sub     { font-family: var(--fig); font-size: 11px; fill: var(--ink-2); }
.sc-band-t  { font-family: var(--body); font-size: 12px; font-weight: 700; fill: var(--ink-2); }
.sc-km      { font-family: var(--fig); font-size: 11px; fill: var(--ink-3); }

/* ── a stretch of the page ────────────────────────────────────────────── */

.leg { padding: 2.6rem 0; border-top: 2px solid var(--ink); }
.leg > .sheet > p { max-width: var(--read); color: var(--ink-2); }
.leg h2 + p { margin-top: .7rem; }

.aside {
  max-width: var(--read); margin: 1.4rem 0 0; padding-top: .8rem;
  border-top: 1px solid var(--rule); font-size: .95rem; color: var(--ink-2);
}

/* ── the four published fares, kept small on purpose ──────────────────── */

/* The fares are not what this page is about, so they are one compact table
 * rather than the headline. Vehicle capacities ride on its column heads —
 * a sixth distinct shape for a fact every site in this network carries. */
.fares { margin: 1.3rem 0 0; border-collapse: collapse; width: 100%; max-width: 46rem;
  background: var(--sheet-2); }
.fares caption {
  text-align: left; font-size: .82rem; font-weight: 700; color: var(--ink-2);
  padding-bottom: .5rem;
}
.fares th, .fares td { padding: .55rem .75rem; border-bottom: 1px solid var(--rule); text-align: left; }
.fares thead th {
  background: var(--ink); color: var(--on-dark);
  font-family: var(--display); font-size: .8rem; font-weight: 600; border-bottom: 0;
}
.fares thead th span { display: block; font-size: .68rem; font-weight: 400; opacity: .75; }
.fares tbody th { font-weight: 700; font-size: .95rem; }
.fares td.p { font-family: var(--fig); font-size: .92rem; color: var(--pen-2); white-space: nowrap; }
.fares td.p:empty::before { content: "—"; opacity: .45; }
.fares tr.far td.p { color: var(--warn); }

/* Two notes about the table, which is what they are: two terms and their
 * explanations, not two more paragraphs of prose. */
.faresnote { max-width: 46rem; margin: 1.3rem 0 0; }
.faresnote dt {
  font-family: var(--display); font-weight: 600; font-size: 1rem;
  padding-top: .7rem; border-top: 1px solid var(--rule);
}
.faresnote dd { margin: .2rem 0 0; font-size: .93rem; color: var(--ink-2); }

/* ── up the road ──────────────────────────────────────────────────────── */

.stops { margin: 1.3rem 0 0; padding: 0; list-style: none; max-width: 56rem; }
.stops li {
  display: grid; grid-template-columns: minmax(11rem, 22rem) 5.5rem 7rem 1fr;
  gap: .1rem .9rem; align-items: baseline;
  padding: .7rem 0; border-top: 1px solid var(--rule);
}
.stops li:first-child { border-top: 2px solid var(--ink); }
.stops b { font-weight: 700; }
.stops .km, .stops .rt { font-family: var(--fig); font-size: .82rem; color: var(--ink-2); white-space: nowrap; }
.stops .w { font-size: .92rem; color: var(--ink-2); }
.stops .note { grid-column: 1 / -1; font-size: .88rem; color: var(--ink-2); margin-top: .15rem; max-width: 44rem; }
.stops li.far .km, .stops li.far .rt { color: var(--warn); font-weight: 700; }
.stopkey {
  display: flex; flex-wrap: wrap; gap: .3rem 1.4rem;
  margin: 1.1rem 0 0; padding-top: .7rem; border-top: 1px solid var(--rule);
  font-size: .85rem; color: var(--ink-2);
}

/* ── what carries no price ────────────────────────────────────────────── */

.offlist { margin: 1.3rem 0 0; padding: 0; list-style: none; max-width: 50rem; }
.offlist li { padding: .8rem 0; border-top: 1px solid var(--rule); }
.offlist b { display: block; font-family: var(--display); font-size: 1.08rem; font-weight: 600; }
.offlist span { color: var(--ink-2); font-size: .95rem; }

.addons { max-width: 46rem; margin: 1.3rem 0 0; color: var(--ink-2); }
.addons p:last-child { margin-bottom: 0; }
.addons b { color: var(--ink); }
.coin { font-family: var(--fig); font-size: .9em; font-weight: 700; color: var(--pen-2); white-space: nowrap; }

/* ── footer ───────────────────────────────────────────────────────────── */

/* A ruled block with the imprint inside it and the links along the bottom
 * edge: a sixth distinct footer shape in this network. */
.baseline { background: var(--ink); color: var(--on-dark); padding: 2.2rem 0 1.8rem; margin-top: 2.4rem; }
.baseline a { color: var(--on-dark); }
.baseline a:hover { color: #fff; }
.imprint { max-width: 48rem; font-size: .93rem; opacity: .88; margin-bottom: 1.3rem; }
.imprint b { opacity: 1; }
.ties {
  display: flex; flex-wrap: wrap; gap: .3rem 1.3rem;
  padding-top: 1.1rem; border-top: 1px solid rgba(242,241,232,.24);
  font-size: .9rem; font-weight: 600;
}
.stamp-line { font-family: var(--fig); font-size: .74rem; opacity: .55; margin: 1rem 0 0; }

/* ══ inherited application surface ════════════════════════════════════════
 * The booking form, the contact page and the eight-chapter guide arrived on
 * Tabler loaded from a CDN. The markup works and the back office posts to it,
 * so what follows re-skins it in this site's palette and removes the CDN.
 */

.page, .container-xl { width: min(100% - 2.5rem, var(--wide)); margin-inline: auto; }
.row { display: flex; flex-wrap: wrap; margin-inline: -.5rem; }
.row > [class*="col-"] { padding-inline: .5rem; width: 100%; min-width: 0; }
.g-2 { row-gap: .5rem; } .g-3 { row-gap: 1rem; } .g-4 { row-gap: 1.5rem; }
.row > .col-6 { width: 50%; } .row > .col-12 { width: 100%; }
@media (min-width: 768px) {
  .row > .col-md-3 { width: 25%; } .row > .col-md-4 { width: 33.3333%; }
  .row > .col-md-6 { width: 50%; } .row > .col-md-8 { width: 66.6667%; }
  .text-md-start { text-align: left; } .text-md-end { text-align: right; }
  .mb-md-0 { margin-bottom: 0; } .d-md-block { display: block; }
  .d-md-inline { display: inline; } .d-md-none { display: none; }
  .justify-content-md-start { justify-content: flex-start; }
}
@media (min-width: 992px) {
  .row > .col-lg-3 { width: 25%; } .row > .col-lg-4 { width: 33.3333%; }
  .row > .col-lg-6 { width: 50%; } .row > .col-lg-8 { width: 66.6667%; }
  .row > .col-lg-10 { width: 83.3333%; }
}

.d-none { display: none; } .d-block { display: block; } .d-flex { display: flex; }
@media (min-width: 576px) { .d-sm-inline { display: inline; } }
@media print { .d-print-none { display: none; } }
.flex-wrap { flex-wrap: wrap; } .flex-fill { flex: 1 1 auto; } .flex-row { flex-direction: row; }
.align-items-center { align-items: center; } .align-items-start { align-items: flex-start; }
.justify-content-center { justify-content: center; }
.justify-content-between { justify-content: space-between; }
.gap-1 { gap: .25rem; } .gap-2 { gap: .5rem; } .gap-3 { gap: 1rem; }
.w-100 { width: 100%; } .h-100 { height: 100%; }
.ms-auto { margin-left: auto; } .mx-auto { margin-inline: auto; } .mx-2 { margin-inline: .5rem; }
.text-center { text-align: center; } .text-start { text-align: left; } .text-end { text-align: right; }
.fw-bold { font-weight: 700; } .fw-medium { font-weight: 600; } .fw-normal { font-weight: 400; }
.fs-5 { font-size: 1.1rem; } .small { font-size: .875rem; }
.text-muted { color: var(--ink-2); }
.text-dark { color: var(--ink); }
.text-white { color: var(--on-dark); }
.text-danger { color: #93140c; }
.text-success { color: var(--pen-2); }
.text-warning { color: var(--warn); }
.text-decoration-none { text-decoration: none; }
.mb-0 { margin-bottom: 0; } .mb-1 { margin-bottom: .25rem; } .mb-2 { margin-bottom: .5rem; }
.mb-3 { margin-bottom: 1rem; } .mb-4 { margin-bottom: 1.5rem; }
.mt-1 { margin-top: .25rem; } .mt-2 { margin-top: .5rem; } .mt-3 { margin-top: 1rem; }
.mt-4 { margin-top: 1.5rem; } .mt-5 { margin-top: 2.5rem; } .my-3 { margin-block: 1rem; }
.me-1 { margin-right: .25rem; } .me-2 { margin-right: .5rem; } .me-3 { margin-right: 1rem; }
.ms-2 { margin-left: .5rem; }
.p-2 { padding: .5rem; } .p-3 { padding: 1rem; } .p-4 { padding: 1.5rem; } .px-3 { padding-inline: 1rem; }
.py-1 { padding-block: .25rem; } .py-2 { padding-block: .5rem; } .py-3 { padding-block: 1rem; }
.py-4 { padding-block: 1.5rem; } .py-5 { padding-block: 2.5rem; }
.rounded { border-radius: 2px; } .rounded-circle { border-radius: 50%; }
.border-0 { border: 0; }
.shadow, .shadow-sm { box-shadow: none; }
.h3 { font-family: var(--display); font-size: 1.5rem; font-weight: 600; }
.h5 { font-family: var(--display); font-size: 1.12rem; font-weight: 600; }
.h6 { font-size: .95rem; font-weight: 700; }
.display-1 { font-family: var(--fig); font-size: clamp(2.6rem, 9vw, 5rem); font-weight: 700; color: var(--pen-2); line-height: 1; }

.card { background: var(--sheet-2); border: 1px solid var(--rule); border-radius: 2px; margin-bottom: 1.5rem; }
.card-header { background: var(--ink); color: var(--on-dark); padding: .8rem 1.1rem; }
.card-header .card-title, .card-header h2, .card-header h3 { color: var(--on-dark); margin: 0; }
.card-body { padding: 1.2rem; }
.card-title { font-family: var(--display); font-weight: 600; }

.btn {
  display: inline-block; cursor: pointer; text-decoration: none;
  font-weight: 700; font-size: .88rem; padding: .52rem 1.1rem;
  border-radius: 2px; border: 2px solid transparent;
  background: var(--pen); color: #fff; line-height: 1.4;
}
.btn:hover { background: var(--pen-2); color: #fff; }
.btn-lg { padding: .68rem 1.4rem; font-size: .98rem; }
.btn-sm { padding: .32rem .8rem; font-size: .8rem; }
.btn-dark, .btn-success, .btn-taxi { background: var(--pen); color: #fff; }
.btn-dark:hover, .btn-success:hover, .btn-taxi:hover { background: var(--pen-2); }
.btn-outline-dark { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-outline-dark:hover { background: var(--ink); color: var(--sheet-2); }
/* Every band behind a button on this site is light, so a light outline would
 * render near-invisible; this alias resolves to the dark outline. */
.btn-outline-light { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-outline-light:hover { background: var(--ink); color: var(--sheet-2); }
.btn:disabled, .btn[disabled] { opacity: .5; cursor: not-allowed; }

.form-label { display: block; margin-bottom: .3rem; font-size: .85rem; font-weight: 700; color: var(--ink-2); }
.form-control, .form-select {
  width: 100%; padding: .55rem .7rem; background: #fff; color: var(--ink);
  border: 1px solid var(--rule-2); border-radius: 2px;
  font-family: var(--body); font-size: 1rem; line-height: 1.5;
}
textarea.form-control { min-height: 7rem; }
.form-control:focus, .form-select:focus { outline: 3px solid var(--pen); outline-offset: 0; border-color: var(--pen); }
.form-control::placeholder { color: var(--ink-3); }
.input-group { display: flex; }
.input-group .form-control { border-radius: 2px 0 0 2px; }
.input-group .btn { border-radius: 0 2px 2px 0; }

.alert { padding: .85rem 1rem; border-radius: 2px; border-left: 4px solid; margin-bottom: 1rem; }
.alert-success { background: #e2ecd8; border-color: var(--pen-2); color: #2a4310; }
.alert-danger { background: #f3ded9; border-color: #93140c; color: #620d08; }

.spinner-border {
  display: inline-block; width: 1.1rem; height: 1.1rem; vertical-align: -.15em;
  border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
  animation: spin .8s linear infinite;
}
.spinner-border-sm { width: .85rem; height: .85rem; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .spinner-border { animation-duration: 2.4s; }
  * { scroll-behavior: auto !important; }
}

table { border-collapse: collapse; }
.table { width: 100%; }
.table th, .table td { padding: .55rem .7rem; border-bottom: 1px solid var(--rule); text-align: left; }
.table-sm th, .table-sm td { padding: .38rem .55rem; font-size: .93rem; }
.table-striped tbody tr:nth-child(odd) { background: var(--sheet-2); }
.table-hover tbody tr:hover { background: var(--sheet-3); }

/* booking flow */
.step-indicator { display: flex; align-items: center; padding: .5rem 1rem; border-radius: 2rem; background: var(--sheet-3); color: var(--ink-2); }
.step-indicator.active { background: var(--pen); color: #fff; }
.step-number { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
  background: rgba(0,0,0,.12); font-family: var(--fig); font-weight: 700; font-size: .78rem; }
.step-label { font-size: .8rem; font-weight: 600; }
.step-line { flex: 0 0 2rem; height: 2px; background: var(--rule-2); }

.route-grid-card {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .8rem 1rem; margin-bottom: .5rem; cursor: pointer;
  background: var(--sheet-2); border: 1px solid var(--rule);
  border-left: 4px solid var(--rule-2); border-radius: 2px;
}
.route-grid-card:hover { border-left-color: var(--pen); }
.route-grid-card.selected { border-left-color: var(--pen); box-shadow: inset 0 0 0 1px var(--pen); }
.route-from-to { font-weight: 700; }
.route-price { font-family: var(--fig); font-weight: 700; font-size: 1rem; color: var(--pen-2); white-space: nowrap; }

.car-type-btn {
  display: block; width: 100%; text-align: left; cursor: pointer;
  padding: .7rem .9rem; margin-bottom: .5rem;
  background: var(--sheet-2); border: 1px solid var(--rule); border-radius: 2px;
  font-family: var(--body); color: var(--ink);
}
.car-type-btn:hover { border-color: var(--pen); }
.car-type-btn.selected { border-color: var(--pen); box-shadow: inset 0 0 0 1px var(--pen); }
.car-name { font-weight: 700; }
.car-price, .car-price-grid, .car-price-item { font-family: var(--fig); font-weight: 700; color: var(--pen-2); font-size: .92rem; }
.car-price-grid { display: flex; flex-wrap: wrap; gap: .3rem 1rem; }
.booking-summary { background: var(--sheet-3); border-radius: 2px; padding: 1rem; }

.hero-section { padding: 2.4rem 0 1.4rem; }
.hero-title { font-family: var(--display); font-weight: 700; line-height: 1.12; font-size: clamp(1.8rem, 4.4vw, 2.8rem); letter-spacing: -.02em; }
:lang(th) .hero-title { font-size: clamp(1.45rem, 3.2vw, 2rem); font-weight: 600; line-height: 1.5; letter-spacing: 0; }
.hero-subtitle { max-width: var(--read); font-size: 1.06rem; color: var(--ink-2); }
.cta-section { padding: 2.2rem 0; background: var(--sheet-3); border-top: 2px solid var(--ink); }
.feature-card { padding: 1rem 0; border-top: 1px solid var(--rule); height: 100%; }
.feature-icon { color: var(--pen); font-size: 1.2rem; }
.feature-title { font-family: var(--display); font-weight: 600; font-size: 1.05rem; margin-bottom: .2rem; }

.qa-list { max-width: 52rem; }
.qa { border-top: 1px solid var(--rule); }
.qa summary {
  cursor: pointer; padding: .9rem 0; list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary h3 { margin: 0; font-size: 1.05rem; }
.qa summary::after { content: "+"; font-family: var(--fig); font-weight: 700; color: var(--pen); line-height: 1; }
.qa[open] summary::after { content: "\2013"; }
.qa-body { padding: 0 0 1rem; color: var(--ink-2); max-width: var(--read); }

.accordion { max-width: 52rem; }
.accordion-item { border-top: 1px solid var(--rule); }
.accordion-header { margin: 0; }
.accordion-button {
  width: 100%; text-align: left; cursor: pointer; background: transparent; border: 0;
  padding: .9rem 0; font-family: var(--display); font-weight: 600; font-size: 1.05rem;
  color: var(--ink); display: flex; justify-content: space-between; gap: 1rem; align-items: center;
}
.accordion-button::after { content: "\2013"; font-family: var(--fig); color: var(--pen); }
.accordion-button.collapsed::after { content: "+"; }
.accordion-collapse { display: block; }
.accordion-collapse.collapse:not(.show) { display: none; }
.accordion-body { padding: 0 0 1rem; color: var(--ink-2); max-width: var(--read); }

/* ══ planning a day ═══════════════════════════════════════════════════════
 *
 * The home page measures distance. This page measures the other constraint,
 * which is the one that actually ruins days here: the gates shut. So it is a
 * timetable rather than a map — a closing-time board, then the departure
 * times that fall out of it.
 */

.plan-open { border-top: 0; padding-top: 2.6rem; }
.plan-open h1 { max-width: 20ch; }
.plan-open .lede + .lede { margin-top: 1rem; }

.footnote { max-width: var(--read); font-size: .88rem; color: var(--ink-2); margin-top: 1.1rem; }

/* The board. Each site is a row, and the reason it matters is the row under
 * it — one table, not a table plus a paragraph that repeats it. */
.gates { border-collapse: collapse; width: 100%; min-width: 40rem; margin: 1.3rem 0 0;
         background: var(--sheet-2); }
.gates caption {
  caption-side: top; text-align: left; max-width: var(--read);
  font-size: .88rem; color: var(--ink-2); padding-bottom: .7rem;
}
.gates th, .gates td { padding: .55rem .75rem; text-align: left; }
.gates thead th {
  background: var(--ink); color: var(--on-dark); font-family: var(--display);
  font-size: .8rem; font-weight: 600; letter-spacing: .01em;
}
.gates tbody th { font-weight: 700; font-size: .96rem; border-top: 1px solid var(--rule); }
.gates tbody td { border-top: 1px solid var(--rule); }
.gates .n { font-family: var(--fig); font-size: .82rem; white-space: nowrap; }
/* The last admission is the number that decides the day, so it is the only
 * one the table colours. */
.gates .last { color: var(--warn); font-weight: 700; }
.gates .why td { border-top: 0; padding-top: 0; padding-bottom: .9rem;
                 font-size: .89rem; color: var(--ink-2); max-width: 46rem; }

.backwards { margin: 1.3rem 0 0; padding: 0; list-style: none; max-width: 56rem; }
.backwards li {
  display: grid; grid-template-columns: 5.5rem 1fr; gap: .15rem 1rem;
  padding: .9rem 0; border-top: 1px solid var(--rule);
}
.backwards li:first-child { border-top: 2px solid var(--ink); }
.bk-t { font-family: var(--fig); font-weight: 700; font-size: 1rem; color: var(--pen-2); }
.backwards b { font-family: var(--display); font-weight: 600; font-size: 1.05rem; }
.bk-w { grid-column: 2; font-size: .92rem; color: var(--ink-2); max-width: 46rem; }
/* The one that is not a day trip has no departure time, and reads that way. */
.backwards li:last-child .bk-t { color: var(--warn); }

/* Two doors, side by side, that are plainly doors and not cards. */
.reach { display: flex; flex-wrap: wrap; gap: .8rem; margin: 1.2rem 0 1.8rem; }
.reach-a {
  display: flex; flex-direction: column; gap: .1rem; text-decoration: none;
  padding: .7rem 1.1rem; border: 2px solid var(--ink); border-radius: 2px;
  background: var(--sheet-2); color: var(--ink); min-width: 13rem;
}
.reach-a:hover { background: var(--ink); color: var(--on-dark); }
.reach-a b { font-family: var(--display); font-size: 1.02rem; }
.reach-a span { font-family: var(--fig); font-size: .8rem; }

.ask-form { max-width: 46rem; }
.ask-form .footnote { margin-top: .9rem; }

/* ── nothing at this distance ─────────────────────────────────────────── */

/* The 404 is a kilometre post, because the rest of the site is a measuring
 * device and a dead link is just a distance nothing sits at. */
.lost { padding: 2.6rem 0 3rem; }
.lost h1 { max-width: 16ch; margin-top: 1.4rem; }
.post { display: block; height: auto; }
.post-road { font-family: var(--fig); font-size: 22px; font-weight: 700; fill: var(--ink); text-anchor: middle; }
.post-km { font-family: var(--fig); font-size: 30px; font-weight: 700; fill: var(--pen-2); text-anchor: middle; }

.waymarks { margin: 2rem 0 0; padding: 0; list-style: none; max-width: 52rem; }
.waymarks li {
  display: grid; grid-template-columns: 5rem 1fr; gap: .15rem .9rem;
  padding: .85rem 0; border-top: 1px solid var(--rule);
}
.waymarks li:first-child { border-top: 2px solid var(--ink); }
.wm-km { font-family: var(--fig); font-size: .8rem; color: var(--ink-3); padding-top: .18rem; }
.waymarks a { font-family: var(--display); font-weight: 600; font-size: 1.05rem; }
.wm-w { grid-column: 2; font-size: .93rem; color: var(--ink-2); }

.nf-link { display: block; padding: .6rem .8rem; background: var(--sheet-2); border: 1px solid var(--rule); border-radius: 2px; text-decoration: none; color: var(--ink); }
.nf-link:hover { border-color: var(--pen); }

.cf-turnstile { margin-bottom: 1rem; min-height: 65px; }

/* ══ the guide ══════════════════════════════════════════════════════════ */

.navbar { background: var(--ink); color: var(--on-dark); }
.navbar .sheet, .navbar .container-xl { display: flex; align-items: center; gap: .9rem; min-height: 3.4rem; flex-wrap: wrap; }
.navbar-brand { font-family: var(--display); font-weight: 700; font-size: 1.05rem; color: var(--on-dark); text-decoration: none; display: inline-flex; align-items: center; gap: .5rem; }
.navbar-nav { display: flex; align-items: center; gap: .1rem .9rem; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; }
.navbar-nav a, .navbar a { color: var(--on-dark); text-decoration: none; font-weight: 600; font-size: .82rem; }
.navbar-nav a:hover, .navbar a:hover { text-decoration: underline; }
/* `.navbar a` is (0,1,1) and `.hail` is (0,1,0), so without this the button
 * takes the light nav colour on its own ground. */
.navbar a.hail { color: #fff; }
.navbar a.hail:hover { color: var(--ink); }
.navbar-expand-md { flex-wrap: wrap; }
.lang-flag { display: inline-block; vertical-align: middle; }
.nav-current { border-bottom: 2px solid var(--on-dark); }

.guide-hero { padding: 2.4rem 0 1.2rem; }
.guide-hero h1 { max-width: 22ch; }
.eyebrow {
  font-family: var(--fig); font-size: .72rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--pen-2); margin-bottom: .5rem;
}
.guide-hero-fig { margin: 1.4rem 0 0; }
.guide-hero-fig img { width: 100%; border-radius: 2px; border: 1px solid var(--rule-2); }
.guide-updated { font-family: var(--fig); font-size: .76rem; color: var(--ink-3); }

.quick-answer {
  max-width: 44rem; margin: 1.4rem 0 0; padding: 1rem 1.15rem;
  background: var(--sheet-2); border: 1px solid var(--rule-2);
  border-left: 4px solid var(--pen); border-radius: 2px;
}
.qa-label {
  display: block; font-family: var(--fig); font-size: .68rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--pen-2); margin-bottom: .35rem;
}
.quick-answer p:last-child { margin-bottom: 0; }

.guide-body { max-width: 42rem; padding: 1.6rem 0 0; }
.guide-body h2 { margin-top: 2.2rem; }
.guide-body h3 { margin-top: 1.5rem; }
.guide-body ul, .guide-body ol { padding-left: 1.2rem; }
.guide-body li { margin-bottom: .4rem; }

.guide-fig { margin: 1.6rem 0; }
.guide-fig img { width: 100%; border-radius: 2px; border: 1px solid var(--rule-2); }
.guide-fig figcaption, .img-note {
  font-size: .86rem; color: var(--ink-2); margin-top: .5rem;
  padding-top: .4rem; border-top: 1px solid var(--rule);
}

.guide-callout {
  margin: 1.5rem 0; padding: .9rem 1.1rem; border-radius: 2px;
  background: var(--sheet-2); border: 1px solid var(--rule-2); border-left: 4px solid var(--ink-3);
}
.guide-callout p:last-child { margin-bottom: 0; }
.guide-callout-note { border-left-color: var(--pen); }
.guide-callout-warning { border-left-color: var(--warn); background: #f7e9e2; }

.guide-table { margin: 1.5rem 0; width: 100%; max-width: 46rem; background: var(--sheet-2); }
.guide-table th, .guide-table td { padding: .5rem .7rem; border-bottom: 1px solid var(--rule); text-align: left; font-size: .95rem; }
.guide-table thead th { background: var(--ink); color: var(--on-dark); font-family: var(--display); font-size: .85rem; font-weight: 600; }

.guide-faq { max-width: 44rem; margin: 2rem 0 0; }
.faq-item { border-top: 1px solid var(--rule); padding: .9rem 0; }
.faq-item h3 { margin: 0 0 .35rem; font-size: 1.05rem; }
.faq-item p:last-child { margin-bottom: 0; }

.guide-nav {
  display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between;
  margin: 2.2rem 0 0; padding-top: 1.2rem; border-top: 2px solid var(--ink);
  max-width: 44rem; font-weight: 600;
}
.chapter-card {
  display: grid; grid-template-columns: 2.6rem 1fr; gap: .2rem .9rem; align-items: baseline;
  padding: .9rem 0; border-top: 1px solid var(--rule); text-decoration: none; color: var(--ink);
}
.chapter-card:hover { color: var(--pen-2); }
.chapter-card .num { font-family: var(--fig); font-weight: 700; color: var(--pen-2); font-size: .85rem; }
.chapter-card h3 { grid-column: 2; margin: 0 0 .15rem; font-size: 1.05rem; }
.chapter-card p { grid-column: 2; margin: 0; font-size: .93rem; color: var(--ink-2); }

.site-footer { background: var(--ink); color: var(--on-dark); padding: 2rem 0 1.6rem; margin-top: 2.4rem; font-size: .93rem; }
.site-footer a { color: var(--on-dark); }
.dir { display: flex; flex-wrap: wrap; gap: .3rem 1.2rem; }

/* ── narrow ───────────────────────────────────────────────────────────── */

@media (max-width: 760px) {
  body { font-size: 1rem; background-size: 20px 20px; }
  .rail { position: static; }
  .rail .sheet { padding-block: .55rem; gap: .5rem; }
  .railname { margin-right: 0; width: 100%; }
  .sleepers { gap: .1rem .75rem; }
  .sleepers a { font-size: .76rem; }
  .origin { padding: 2rem 0 1.6rem; }
  .leg { padding: 2rem 0; }
  .scale { margin-inline: -1.25rem; padding-inline: 1.25rem; }
  .stops li { grid-template-columns: 1fr auto; }
  .stops .rt { grid-column: 2; }
  .stops .w { grid-column: 1 / -1; }
  .chapter-card { grid-template-columns: 2.2rem 1fr; }
  .waymarks li { grid-template-columns: 3.6rem 1fr; }
  .backwards li { grid-template-columns: 4.2rem 1fr; }
  .reach-a { min-width: 0; flex: 1 1 10rem; }
}