/* Observed on chiangway-travel.com, 2026-09-10. Keep photography in its original colours. */
:root {
  --cream: #fbf9f5;
  --cream-deep: #f5f0e6;
  --accent: #f7c009;
  --ink: #302d28;
  --muted: #6e685e;
  --line: #ded7ca;
  --gold: #866315;
  color: var(--ink);
  background: var(--cream);
  color-scheme: light;
}

body { background: var(--cream); }
.phone { background: var(--cream); border-color: var(--line); box-shadow: 0 22px 75px #51412618; }
.brand { color: var(--ink); }
.brand-logo { display: block; height: 64px; width: auto; }
.brand small { color: var(--muted); }
.editorial h1 { color: var(--ink); }
.editorial h1 em { color: #8c6b2a; }
.editorial-copy { color: var(--muted); }
.chapters { border-color: var(--line); }
.chapters li { color: var(--muted); border-color: var(--line); }
.chapters li span { color: var(--gold); }
.chapters .current { color: var(--ink); }

.topbar { background: linear-gradient(#fbf9f5, #fbf9f5ed 77%, #fbf9f500); }
.tiny-mark { color: var(--ink); text-shadow: none; }
.preview-label { color: #6e685e; }
.icon-button { color: #403b32; border-color: #cfc6b7; background: #fbf9f5dc; }
.icon-button[aria-pressed="true"] { color: #f1e9d6; border-color: #15372b; background: #15372bec; }
.music-button[aria-pressed="true"] .music-off { display: none; }
.view-caption { color: #302d28; text-shadow: none; }
.seat-label, .view-caption p:last-child {
  display: table;
  width: fit-content;
  max-width: 100%;
  padding: 5px 8px;
  border-radius: 5px;
  background: #fbf9f5e8;
  color: #403b32;
}
.seat-label { margin-bottom: 4px; }
.look-feedback { background: #fbf9f5f2; border-color: #d9cdb5; color: #493e2f; }
.vignette { background: linear-gradient(transparent 0, transparent 62%, #fbf9f540 81%, #fbf9f5 100%); }

.controls { background: linear-gradient(#fbf9f500, #fbf9f5f5 25%, #fbf9f5 100%); color: var(--ink); }
.speed > span { color: #58544c; }
.speed small, .route-caption { color: #71695d; }
.progress-label { color: #504a40; }
.progress-label span:last-child { color: #6e685e; }
.route-rail { background: #e7dfcd; border-color: #cabd9e; }
.route-rail > div { background: #e5be5760; }
.route-rail > span { background: #f7c009; border-color: #74603a; box-shadow: 0 0 7px #cbac5c30; }
.passenger-controls { border-color: var(--line); }
.passenger-controls > div > span, .driver-side > span, .pad-help { color: #6e685e; }
.light-button { color: #403b32; background: #fffefa; border: 1px solid #d4c8ad; }
.light-button:active { background: #eee3cb; }
.primary-button { background: var(--accent); color: #332d1c; }
.primary-button:active { background: #e3af00; }
.drive-pad { color: #403b32; background: linear-gradient(125deg, #f7f2e7, #eee5d0); border-color: #cbb993; }
.drive-pad.active { border-color: #ad791a; background: #f9e6b3; box-shadow: inset 0 0 24px #f7c00918; }
.drive-pad.braking { border-color: #9a6442; background: #efd7c4; }
.pad-arrows { color: #83704b; }
.pad-dot { background: #ae760d; box-shadow: 0 0 15px #c29b4d66; }

.overlay { background: linear-gradient(#fbf9f514, transparent 40%, #fbf9f5d9 77%, #fbf9f5); }
.intro-copy {
  align-self: flex-start;
  padding: 18px 20px;
  border: 1px solid #fff9;
  border-radius: 14px;
  background: #fbf9f5e6;
  backdrop-filter: blur(8px);
}
.intro .eyebrow { color: #866315; }
.intro-copy h2 { color: #352f25; text-shadow: none; }
.intro-copy > p:last-child { color: #51493a; text-shadow: none; }
.pause-overlay { background: #fbf9f5f2; }
.overlay-card > p:not(.eyebrow) { color: #665e51; }
.overlay-card h2 { color: #352f25; }
dialog { color: var(--ink); background: var(--cream); border-color: var(--line); box-shadow: 0 30px 100px #3e32243d; }
dialog::backdrop { background: #49413572; }
dialog p { color: #635c50; }
.dialog-footnote { color: #756b59 !important; }
.noscript { color: var(--ink); background: var(--cream); }
button:focus-visible, a:focus-visible { outline-color: #95701c; }

@media (max-height: 710px) and (orientation: portrait) {
  .intro-copy { padding: 13px 16px; }
}
@media (orientation: landscape) and (max-height: 600px) {
  .phone, .controls, .intro { background: var(--cream); }
  .intro-copy { padding: 0; border: 0; border-radius: 0; backdrop-filter: none; background: none; }
  .vignette { background: none; }
  .view-caption p:last-child { display: none; }
}