:root { --ink:#102022; --muted:#536466; --sand:#f4e7ce; --sea:#0d6b75; --foam:#f7fbfa; --coral:#e76f51; --card:#fffaf0; }
* { 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,#f8efe1 0%,#f7fbfa 50%,#e8f3f0 100%); }
.hero { min-height:70vh; position:relative; display:flex; align-items:end; background: url('https://commons.wikimedia.org/wiki/Special:Redirect/file/Daymer%20Bay%2C%20Camel%20Estuary%20-%20geograph.org.uk%20-%204062201.jpg') center/cover; }
.hero__shade { position:absolute; inset:0; background:linear-gradient(180deg,rgba(16,32,34,.05),rgba(16,32,34,.78)); }
.hero__content { position:relative; max-width:980px; padding:clamp(28px,6vw,80px); color:white; }
.eyebrow,.tag { text-transform:uppercase; letter-spacing:.13em; font-weight:850; font-size:.78rem; color:var(--coral); }
.hero .eyebrow { color:#ffd29d; }
h1 { font-size:clamp(3rem,8.5vw,7rem); line-height:.88; margin:.1em 0; letter-spacing:-.07em; }
h2 { font-size:clamp(1.9rem,4.4vw,3.9rem); line-height:.95; margin:.1em 0 .3em; letter-spacing:-.055em; }
.lede { font-size:clamp(1.1rem,2.2vw,1.45rem); max-width:780px; color:#f7ede0; }
.button { display:inline-block; padding:.9rem 1.15rem; background:var(--coral); color:white; text-decoration:none; border-radius:999px; font-weight:850; box-shadow:0 10px 28px rgba(0,0,0,.2); }
main { width:min(1180px, calc(100% - 28px)); margin:0 auto; }
.panel { margin:28px auto; background:rgba(255,250,240,.95); border:1px solid rgba(16,32,34,.08); border-radius:30px; padding:clamp(22px,4vw,40px); box-shadow:0 22px 70px rgba(16,32,34,.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(13,107,117,.25); background:white; border-radius:18px; 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(--card); border-radius:34px; box-shadow:0 18px 54px rgba(16,32,34,.12); border:1px solid rgba(16,32,34,.08); }
.itinerary__image { margin:0; position:relative; background:#d8e7e5; 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(16,32,34,.72); 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.18rem; line-height:1.45; margin-top:0; }
.timeline { list-style:none; margin:1.2rem 0; padding:0; border-left:3px solid rgba(13,107,117,.22); counter-reset:item; }
.timeline li { display:grid; grid-template-columns:72px 1fr; gap:12px; padding:.55rem 0 .55rem 1rem; color:#243638; }
.timeline strong { color:var(--sea); }
.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(13,107,117,.12); border-radius:20px; padding:16px; color:var(--muted); line-height:1.5; }
.map { color:var(--sea); font-weight:900; text-decoration:none; border-bottom:2px solid rgba(13,107,117,.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); }
@media (max-width:900px){ .chooser-panel,.itinerary,.detail-grid,.note-grid{ grid-template-columns:1fr; } .itinerary__image img{ min-height:300px; } .chooser-panel{ margin-top:-24px; } }
.link-section { margin-top:24px; }
.link-section h3 { margin:.2rem 0 .8rem; font-size:1.05rem; letter-spacing:-.02em; }
.link-list { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.link-card { background:white; border:1px solid rgba(13,107,117,.12); border-radius:18px; 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(--sea); font-weight:850; text-decoration:none; border-bottom:2px solid rgba(13,107,117,.18); }
@media (max-width:900px){ .link-list{ grid-template-columns:1fr; } }