/* ============================================================
   Matcha & Ochre — theme for "Our trip · Singapore & Japan"
   ------------------------------------------------------------
   Drop this in as its own stylesheet, loaded AFTER the existing
   one, or copy the :root block into your current stylesheet and
   point your own variables at it.

   Fonts — add this to <head> before the stylesheet:
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link rel="stylesheet" href="https://fonts.googleapis.com/css2?\
family=Shippori+Mincho+B1:wght@600;800&\
family=Zen+Kaku+Gothic+New:wght@400;500;700&display=swap">

   The illustrations are inline SVG data URIs, so there are no
   image files to host or cache. To restyle the artwork, swap the
   encoded colour %232E5142 (pine) or %23B5791A (ochre sun)
   inside the url() strings below.
   ============================================================ */

:root {
  /* --- ground & ink --- */
  --tp-ground:        #E8EDE4;   /* page background, pale celadon */
  --tp-surface:       #F3F7F0;   /* cards, nav bar, raised things */
  --tp-ink:           #1A2620;   /* body text, headings */
  --tp-ink-muted:     #4A5A50;   /* secondary text  (4.7:1 on ground) */
  --tp-ink-faint:     #5A6A60;   /* labels, captions (4.6:1 on ground) */
  --tp-rule:          #CDD8C9;   /* hairlines, dividers */
  --tp-border:        #D6E0D2;   /* card borders */
  --tp-dotted:        #9AAA9E;   /* dotted timeline connectors */

  /* --- accent: ochre --- */
  --tp-accent:        #8A5F0C;   /* text + fills   (4.7:1 on ground) */
  --tp-accent-hover:  #6B4908;
  --tp-accent-bright: #B5791A;     /* DECORATIVE ONLY — the sun disc.
                                    Never put text on or in this. */
  --tp-on-accent:     #F3F7F0;   /* text on an accent fill (5.6:1) */

  /* --- deep cedar: countdown card, inverted panels --- */
  --tp-deep:          #2E5142;
  --tp-on-deep:       #E8EDE4;   /* 7.4:1 */
  --tp-on-deep-muted: #C3D2C8;   /* 5.6:1 */
  --tp-on-deep-faint: #A8BFB0;   /* 4.5:1 — smallest safe label */

  /* --- type --- */
  --tp-font-display: 'Shippori Mincho B1', Georgia, 'Times New Roman', serif;
  --tp-font-body:    'Zen Kaku Gothic New', 'Hiragino Sans', system-ui,
                     -apple-system, 'Segoe UI', sans-serif;

  /* --- shape --- */
  --tp-radius: 2px;              /* square-ish: this theme avoids soft corners */
  --tp-tracking-label: 0.18em;
  --tp-tap: 44px;                /* minimum touch target */
}

/* ------------------------------------------------------------
   1. Base
   ------------------------------------------------------------ */

body {
  margin: 0;
  background-color: var(--tp-ground);
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%27120%27 height=%27120%27%3E %3Cfilter id=%27g%27%3E%3CfeTurbulence type=%27fractalNoise%27 baseFrequency=%270.9%27 numOctaves=%274%27 stitchTiles=%27stitch%27/%3E%3CfeColorMatrix type=%27saturate%27 values=%270%27/%3E%3C/filter%3E %3Crect width=%27120%27 height=%27120%27 filter=%27url%28%23g%29%27 opacity=%270.05%27/%3E%3C/svg%3E");   /* faint washi grain, tiles at 120px */
  color: var(--tp-ink);
  font-family: var(--tp-font-body);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .tp-display {
  font-family: var(--tp-font-display);
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.08;
  margin: 0;
}

a { color: var(--tp-accent); text-decoration: none; }
a:hover { color: var(--tp-accent-hover); }
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--tp-accent);
  outline-offset: 2px;
}

/* Times, counts and countdowns read better in the display face
   with fixed-width figures so they stop jittering as they tick. */
.tp-numeral {
  font-family: var(--tp-font-display);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

/* ------------------------------------------------------------
   2. Components
   ------------------------------------------------------------ */

.tp-eyebrow {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: var(--tp-tracking-label);
  text-transform: uppercase;
  color: var(--tp-accent);
}

.tp-label {
  font-size: 9.5px;
  letter-spacing: var(--tp-tracking-label);
  text-transform: uppercase;
  color: var(--tp-ink-faint);
}

.tp-card {
  background: var(--tp-surface);
  border: 1px solid var(--tp-border);
  border-radius: var(--tp-radius);
  padding: 16px;
}

.tp-card--deep {
  position: relative;
  overflow: hidden;
  background: var(--tp-deep);
  border: none;
  color: var(--tp-on-deep);
  padding: 18px 20px;
}
.tp-card--deep .tp-label { color: var(--tp-on-deep-faint); }
.tp-card--deep p, .tp-card--deep .tp-sub { color: var(--tp-on-deep-muted); }
/* the paper plane rides in the top-right corner of the deep card */
.tp-card--deep::after {
  content: "";
  position: absolute;
  top: 0; right: 0;
  width: 160px; height: 80px;
  background: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%27160%27 height=%2780%27 viewBox=%270 0 160 80%27 fill=%27none%27%3E %3Cpath d=%27M20 70 C 50 56%2C 80 34%2C 106 14%27 stroke=%27%23E8EDE4%27 stroke-opacity=%270.28%27 stroke-width=%271%27 stroke-dasharray=%272 5%27 stroke-linecap=%27round%27/%3E %3Cpath d=%27M150 14 L112 6 L130 22 L120 34 Z%27 stroke=%27%23E8EDE4%27 stroke-opacity=%270.35%27 stroke-width=%271.1%27 stroke-linejoin=%27round%27/%3E %3Cpath d=%27M150 14 L130 22%27 stroke=%27%23E8EDE4%27 stroke-opacity=%270.35%27 stroke-width=%271.1%27/%3E%3C/svg%3E") no-repeat right top;
  pointer-events: none;
}
.tp-card--deep > * { position: relative; }

.tp-stat {
  background: var(--tp-surface);
  border: 1px solid var(--tp-border);
  border-radius: var(--tp-radius);
  padding: 12px 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.tp-stat__num {
  font-family: var(--tp-font-display);
  font-weight: 600;
  font-size: 21px;
  line-height: 1;
}
.tp-stat__label {
  font-size: 8.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tp-ink-muted);
}

.tp-chip {
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--tp-ink-muted);
  border: 1px solid var(--tp-rule);
  border-radius: var(--tp-radius);
  padding: 5px 9px;
}

.tp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tp-tap);
  padding: 0 16px;
  box-sizing: border-box;
  background: var(--tp-accent);
  color: var(--tp-on-accent);
  border: 1px solid var(--tp-accent);
  border-radius: var(--tp-radius);
  font: inherit;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
}
.tp-btn:hover { background: var(--tp-accent-hover); border-color: var(--tp-accent-hover); color: var(--tp-on-accent); }

.tp-btn--ghost {
  background: transparent;
  color: var(--tp-ink);
  border-color: var(--tp-ink);
}
.tp-btn--ghost:hover { background: var(--tp-ink); color: var(--tp-ground); }

/* The 旅 app mark */
.tp-seal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  background: var(--tp-accent);
  color: var(--tp-on-accent);
  border-radius: var(--tp-radius);
  font-family: var(--tp-font-display);
  font-size: 13px;
  line-height: 1;
}

/* Section heading: LABEL ——————— wave mark */
.tp-section-head {
  display: flex;
  align-items: center;
  gap: 10px;
}
.tp-section-head::after {
  content: "";
  flex-grow: 1;
  height: 1px;
  background: var(--tp-rule);
}
.tp-section-head.tp-section-head--mark::after {
  /* hairline, then the three-arc wave at the far right */
  background:
    url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2730%27 height=%279%27 viewBox=%270 0 30 9%27 fill=%27none%27 stroke=%27%232E5142%27 stroke-opacity=%270.45%27 stroke-width=%271%27%3E %3Cpath d=%27M1 8 A 4.5 4.5 0 0 1 10 8%27/%3E%3Cpath d=%27M10.5 8 A 4.5 4.5 0 0 1 19.5 8%27/%3E %3Cpath d=%27M20 8 A 4.5 4.5 0 0 1 29 8%27/%3E%3C/svg%3E") no-repeat right center,
    linear-gradient(var(--tp-rule), var(--tp-rule)) no-repeat left center / calc(100% - 40px) 1px;
  height: 9px;
}

/* Timeline of stops */
.tp-timeline { margin: 0; padding: 0; list-style: none; }
.tp-timeline__row { display: flex; gap: 14px; }
.tp-timeline__time {
  width: 62px; flex-shrink: 0;
  font-size: 11px; line-height: 1.4;
  color: var(--tp-ink-muted);
  padding-top: 2px;
}
.tp-timeline__spine {
  width: 13px; flex-shrink: 0;
  display: flex; flex-direction: column; align-items: center;
}
.tp-timeline__dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  border: 1.2px solid var(--tp-deep);
  margin-top: 4px;
}
.tp-timeline__row--now .tp-timeline__dot {
  background: var(--tp-accent);
  border-color: var(--tp-accent);
}
.tp-timeline__spine::after {
  content: "";
  flex-grow: 1;
  border-left: 1px dotted var(--tp-dotted);
}
.tp-timeline__row:last-child .tp-timeline__spine::after { display: none; }
.tp-timeline__title {
  font-family: var(--tp-font-display);
  font-size: 17px;
  line-height: 1.2;
}

/* Bottom nav */
.tp-nav {
  background: var(--tp-surface);
  border-top: 1px solid var(--tp-rule);
  display: flex;
}
.tp-nav__item {
  flex-grow: 1;
  min-height: var(--tp-tap);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  color: var(--tp-ink-faint);
  font-size: 9.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.tp-nav__item[aria-current="page"] {
  color: var(--tp-accent);
  border-top: 2px solid var(--tp-accent);
  margin-top: -1px;
}

/* ------------------------------------------------------------
   3. Ink art
   Apply to a hero / header block. Each needs position: relative
   only if you stack text over it — the art sits in the
   background, so text in normal flow already paints on top.
   ------------------------------------------------------------ */

/* Japan hero: ochre sun, Fuji, a small torii. Top-right. */
.tp-hero--jp {
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%27200%27 height=%27240%27 viewBox=%270 0 200 240%27 fill=%27none%27%3E %3Ccircle cx=%27150%27 cy=%2760%27 r=%2726%27 fill=%27%23B5791A%27 fill-opacity=%270.9%27/%3E %3Cpath d=%27M58 186 C 78 164%2C 98 128%2C 110 106 L118 106 C 130 128%2C 156 164%2C 200 186 Z%27 fill=%27%232E5142%27 fill-opacity=%270.05%27/%3E %3Cpath d=%27M58 186 C 78 164%2C 98 128%2C 110 106 L118 106 C 130 128%2C 156 164%2C 200 186%27 stroke=%27%232E5142%27 stroke-opacity=%270.4%27 stroke-width=%271.2%27 stroke-linejoin=%27round%27/%3E %3Cpath d=%27M101 122 L107 129 L112 122 L117 129 L123 122%27 stroke=%27%232E5142%27 stroke-opacity=%270.3%27 stroke-width=%271%27/%3E %3Cg stroke=%27%232E5142%27 stroke-opacity=%270.38%27 stroke-width=%271.2%27 stroke-linecap=%27round%27%3E %3Cpath d=%27M58 156 Q83 150 108 156%27/%3E%3Cpath d=%27M62 164 L104 164%27/%3E%3Cpath d=%27M83 156 L83 164%27/%3E %3Cpath d=%27M68 156 L66 187%27/%3E%3Cpath d=%27M98 156 L100 187%27/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right top;
}

/* Singapore hero: same sun, a low skyline instead of the mountain. */
.tp-hero--sg {
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%27200%27 height=%27240%27 viewBox=%270 0 200 240%27 fill=%27none%27%3E %3Ccircle cx=%27150%27 cy=%2760%27 r=%2726%27 fill=%27%23B5791A%27 fill-opacity=%270.9%27/%3E %3Cg stroke=%27%232E5142%27 stroke-opacity=%270.38%27 stroke-width=%271.2%27 stroke-linejoin=%27round%27 fill=%27none%27%3E %3Cpath d=%27M50 200 L50 164 L68 164 L68 200%27/%3E %3Cpath d=%27M72 200 L72 136 L82 128 L92 136 L92 200%27/%3E %3Cpath d=%27M96 200 L96 154 L114 154 L114 200%27/%3E %3Cpath d=%27M118 200 L118 120 L134 120 L134 200%27/%3E %3Cpath d=%27M138 200 L138 146 L156 146 L156 200%27/%3E %3Cpath d=%27M160 200 L160 172 L180 172 L180 200%27/%3E%3C/g%3E %3Cg stroke=%27%232E5142%27 stroke-opacity=%270.22%27 stroke-width=%270.9%27%3E %3Cpath d=%27M122 132 L130 132 M122 142 L130 142 M122 152 L130 152 M122 162 L130 162%27/%3E %3Cpath d=%27M142 158 L152 158 M142 168 L152 168 M142 178 L152 178%27/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right top;
}

/* Palm fronds — pair with --sg, anchored bottom-left. */
.tp-palms {
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%27110%27 height=%2790%27 viewBox=%270 0 110 90%27 fill=%27none%27%3E %3Cg stroke=%27%232E5142%27 stroke-opacity=%270.4%27 stroke-width=%271.2%27 stroke-linecap=%27round%27 fill=%27none%27%3E %3Cpath d=%27M48 86 L50 48%27/%3E %3Cpath d=%27M50 48 C 34 38%2C 18 40%2C 8 52%27/%3E %3Cpath d=%27M50 48 C 38 32%2C 22 26%2C 8 30%27/%3E %3Cpath d=%27M50 48 C 56 30%2C 74 22%2C 90 28%27/%3E %3Cpath d=%27M50 48 C 62 38%2C 80 38%2C 92 48%27/%3E %3Cpath d=%27M50 48 C 46 32%2C 48 18%2C 56 10%27/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left bottom;
}

/* Seigaiha wave band. Give the element a height (24–32px reads
   best) and it tiles horizontally. Good as a hero base line and
   as a quiet footer band above the nav. */
.tp-waves {
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2720%27 height=%2720%27%3E %3Cg fill=%27none%27 stroke=%27%232E5142%27 stroke-opacity=%270.32%27 stroke-width=%270.9%27%3E %3Cpath d=%27M0 10 A 10 10 0 0 1 20 10%27/%3E%3Cpath d=%27M5 10 A 5 5 0 0 1 15 10%27/%3E %3Cpath d=%27M-10 20 A 10 10 0 0 1 10 20%27/%3E%3Cpath d=%27M-5 20 A 5 5 0 0 1 5 20%27/%3E %3Cpath d=%27M10 20 A 10 10 0 0 1 30 20%27/%3E%3Cpath d=%27M15 20 A 5 5 0 0 1 25 20%27/%3E %3C/g%3E%3C/svg%3E");
  background-repeat: repeat;
  height: 28px;
}
.tp-waves--quiet { opacity: 0.5; }

/* Combining layers on one hero (order = front to back): */
.tp-hero--sg.tp-palms {
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%27200%27 height=%27240%27 viewBox=%270 0 200 240%27 fill=%27none%27%3E %3Ccircle cx=%27150%27 cy=%2760%27 r=%2726%27 fill=%27%23B5791A%27 fill-opacity=%270.9%27/%3E %3Cg stroke=%27%232E5142%27 stroke-opacity=%270.38%27 stroke-width=%271.2%27 stroke-linejoin=%27round%27 fill=%27none%27%3E %3Cpath d=%27M50 200 L50 164 L68 164 L68 200%27/%3E %3Cpath d=%27M72 200 L72 136 L82 128 L92 136 L92 200%27/%3E %3Cpath d=%27M96 200 L96 154 L114 154 L114 200%27/%3E %3Cpath d=%27M118 200 L118 120 L134 120 L134 200%27/%3E %3Cpath d=%27M138 200 L138 146 L156 146 L156 200%27/%3E %3Cpath d=%27M160 200 L160 172 L180 172 L180 200%27/%3E%3C/g%3E %3Cg stroke=%27%232E5142%27 stroke-opacity=%270.22%27 stroke-width=%270.9%27%3E %3Cpath d=%27M122 132 L130 132 M122 142 L130 142 M122 152 L130 152 M122 162 L130 162%27/%3E %3Cpath d=%27M142 158 L152 158 M142 168 L152 168 M142 178 L152 178%27/%3E%3C/g%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%27110%27 height=%2790%27 viewBox=%270 0 110 90%27 fill=%27none%27%3E %3Cg stroke=%27%232E5142%27 stroke-opacity=%270.4%27 stroke-width=%271.2%27 stroke-linecap=%27round%27 fill=%27none%27%3E %3Cpath d=%27M48 86 L50 48%27/%3E %3Cpath d=%27M50 48 C 34 38%2C 18 40%2C 8 52%27/%3E %3Cpath d=%27M50 48 C 38 32%2C 22 26%2C 8 30%27/%3E %3Cpath d=%27M50 48 C 56 30%2C 74 22%2C 90 28%27/%3E %3Cpath d=%27M50 48 C 62 38%2C 80 38%2C 92 48%27/%3E %3Cpath d=%27M50 48 C 46 32%2C 48 18%2C 56 10%27/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat, no-repeat;
  background-position: right top, left bottom;
}

/* ------------------------------------------------------------
   4. Reduced motion / print
   ------------------------------------------------------------ */

@media print {
  body { background-image: none; }
  .tp-hero--jp, .tp-hero--sg, .tp-palms, .tp-waves,
  .tp-card--deep::after { background-image: none; }
}