:root {
  --ink:#172525;
  --muted:#5b6968;
  --channel:#0c7180;
  --moss:#637348;
  --brick:#bd573f;
  --butter:#f0bd57;
  --mist:#f7faf8;
  --paper:#fffdf5;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  margin:0;
  font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color:var(--ink);
  background:linear-gradient(180deg,#f6f1e5 0%,#f7faf8 48%,#e7efec 100%);
}
.hero {
  min-height:72vh;
  position:relative;
  display:flex;
  align-items:end;
  background:url("assets/tatihou.jpg") center/cover;
}
.hero__shade { position:absolute; inset:0; background:linear-gradient(180deg,rgba(12,28,30,.04),rgba(12,28,30,.82)); }
.hero__content { position:relative; max-width:1010px; padding:clamp(28px,6vw,80px); color:white; }
.eyebrow,.tag { text-transform:uppercase; letter-spacing:.08em; font-weight:850; font-size:.78rem; color:var(--brick); }
.hero .eyebrow { color:#ffe0a5; }
h1 { font-size:clamp(3rem,8vw,6.8rem); line-height:.9; margin:.08em 0; letter-spacing:0; }
h2 { font-size:clamp(1.8rem,4vw,3.5rem); line-height:.98; margin:.1em 0 .3em; letter-spacing:0; }
.lede { font-size:clamp(1.08rem,2vw,1.42rem); max-width:820px; color:#fff4de; line-height:1.45; }
.button { display:inline-block; padding:.9rem 1.15rem; background:var(--brick); color:white; text-decoration:none; border-radius:999px; font-weight:850; box-shadow:0 10px 28px rgba(0,0,0,.22); }
main { width:min(1180px, calc(100% - 28px)); margin:0 auto; }
.panel { margin:28px auto; background:rgba(255,253,245,.96); border:1px solid rgba(23,37,37,.08); border-radius:22px; padding:clamp(22px,4vw,40px); box-shadow:0 22px 70px rgba(23,37,37,.12); }
.chooser-panel { margin-top:-42px; position:relative; display:grid; grid-template-columns:1fr minmax(260px,420px); gap:28px; align-items:end; }
.chooser-panel p { color:var(--muted); font-size:1.05rem; line-height:1.55; }
.day-select-label { display:grid; gap:10px; font-weight:850; }
select { width:100%; border:2px solid rgba(12,113,128,.25); background:white; border-radius:14px; padding:1rem; font:inherit; color:var(--ink); }
.day-view { padding:10px 0 24px; }
.itinerary { display:grid; grid-template-columns:minmax(320px,.9fr) 1.1fr; overflow:hidden; background:var(--paper); border-radius:24px; box-shadow:0 18px 54px rgba(23,37,37,.12); border:1px solid rgba(23,37,37,.08); }
.itinerary__image { margin:0; position:relative; background:#dae7e4; min-height:100%; }
.itinerary__image img { width:100%; height:100%; min-height:560px; object-fit:cover; display:block; }
.itinerary__image figcaption { position:absolute; left:14px; bottom:14px; background:rgba(23,37,37,.76); color:white; border-radius:999px; padding:.45rem .7rem; font-size:.78rem; backdrop-filter:blur(8px); }
.itinerary__image a { color:white; }
.itinerary__body { padding:clamp(24px,4vw,46px); }
.subtitle { color:var(--muted); font-size:1.16rem; line-height:1.45; margin-top:0; }
.timeline { list-style:none; margin:1.2rem 0; padding:0; border-left:3px solid rgba(12,113,128,.24); }
.timeline li { display:grid; grid-template-columns:72px 1fr; gap:12px; padding:.55rem 0 .55rem 1rem; color:#273837; }
.timeline strong { color:var(--channel); }
.detail-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:20px 0; }
.detail-grid p { margin:0; background:white; border:1px solid rgba(12,113,128,.12); border-radius:16px; padding:16px; color:var(--muted); line-height:1.5; }
.map { color:var(--channel); font-weight:900; text-decoration:none; border-bottom:2px solid rgba(12,113,128,.25); }
.notes { margin-top:6px; }
.note-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.note-grid p { margin:0; color:var(--muted); line-height:1.55; }
footer { text-align:center; padding:34px 18px 54px; color:var(--muted); }
.link-section { margin-top:24px; }
.link-section h3 { margin:.2rem 0 .8rem; font-size:1.05rem; letter-spacing:0; }
.link-list { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.link-card { background:white; border:1px solid rgba(12,113,128,.12); border-radius:16px; padding:14px; display:grid; gap:8px; color:var(--muted); }
.link-card strong { color:var(--ink); }
.link-card em { font-style:normal; font-size:.9rem; color:var(--muted); }
.link-card span { display:flex; gap:10px; flex-wrap:wrap; }
.link-card a { color:var(--channel); font-weight:850; text-decoration:none; border-bottom:2px solid rgba(12,113,128,.18); }
@media (max-width:900px){
  .chooser-panel,.itinerary,.detail-grid,.note-grid,.link-list{ grid-template-columns:1fr; }
  .itinerary__image img{ min-height:300px; }
  .chooser-panel{ margin-top:-24px; }
  .timeline li { grid-template-columns:64px 1fr; }
}