:root {
  --ink:#162321;
  --muted:#5d6965;
  --aqua:#097985;
  --olive:#6c7b36;
  --terracotta:#c95f3e;
  --gold:#f2b84b;
  --foam:#f7fbf8;
  --paper:#fffdf3;
}
* { 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,#f8f2df 0%,#f7fbf8 48%,#e8f0ec 100%);
}
.hero {
  min-height:72vh;
  position:relative;
  display:flex;
  align-items:end;
  background:url("https://upload.wikimedia.org/wikipedia/commons/b/bd/Ancient_Greek_theatre_in_Lindos_01.jpg") center/cover;
}
.hero__shade { position:absolute; inset:0; background:linear-gradient(180deg,rgba(10,30,34,.05),rgba(10,30,34,.82)); }
.hero__content { position:relative; max-width:1000px; padding:clamp(28px,6vw,80px); color:white; }
.eyebrow,.tag { text-transform:uppercase; letter-spacing:.08em; font-weight:850; font-size:.78rem; color:var(--terracotta); }
.hero .eyebrow { color:#ffd786; }
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(--terracotta); 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,243,.96); border:1px solid rgba(22,35,33,.08); border-radius:22px; padding:clamp(22px,4vw,40px); box-shadow:0 22px 70px rgba(22,35,33,.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(9,121,133,.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(22,35,33,.12); border:1px solid rgba(22,35,33,.08); }
.itinerary__image { margin:0; position:relative; background:#dbe8e2; 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(22,35,33,.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(9,121,133,.24); }
.timeline li { display:grid; grid-template-columns:72px 1fr; gap:12px; padding:.55rem 0 .55rem 1rem; color:#243735; }
.timeline strong { color:var(--aqua); }
.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(9,121,133,.12); border-radius:16px; padding:16px; color:var(--muted); line-height:1.5; }
.map { color:var(--aqua); font-weight:900; text-decoration:none; border-bottom:2px solid rgba(9,121,133,.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(9,121,133,.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(--aqua); font-weight:850; text-decoration:none; border-bottom:2px solid rgba(9,121,133,.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; }
}