:root {
  --ink: #18383a;
  --ink-light: #496367;
  --paper: #f8f5ed;
  --paper-deep: #f0eadc;
  --orange: #d9603f;
  --orange-deep: #b9422b;
  --yellow: #f4c447;
  --line: #d8d5ca;
  --white: #fffdf8;
  --shadow: 0 18px 45px rgba(24, 56, 58, .12);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: "DM Sans", Arial, sans-serif; font-size: 17px; line-height: 1.55; }
button, a { font: inherit; }
a { color: inherit; }
.skip-link { position: fixed; z-index: 10; top: -4rem; left: 1rem; background: var(--yellow); color: var(--ink); padding: .75rem 1rem; border-radius: 0 0 .5rem .5rem; font-weight: 700; }
.skip-link:focus { top: 0; }
.section-shell { width: min(1120px, calc(100% - 48px)); margin-inline: auto; }
.eyebrow { margin: 0 0 14px; color: #fff8de; letter-spacing: .14em; font-size: .76rem; font-weight: 700; }
.eyebrow.ink { color: var(--orange-deep); }
h1, h2 { margin: 0; letter-spacing: -.045em; font-family: Fraunces, Georgia, serif; line-height: .99; }
h1 { color: white; font-size: clamp(3.35rem, 7.3vw, 6.65rem); max-width: 870px; }
h1 em, h2 em { color: var(--yellow); font-style: italic; }
h2 { font-size: clamp(2.25rem, 4.1vw, 4.25rem); }

.hero { min-height: 735px; position: relative; isolation: isolate; overflow: hidden; color: white; background: var(--ink); }
.hero-photo { position: absolute; z-index: -2; inset: 0; background: center/cover url("assets/hero-netherlands.png"); }
.hero::after { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg, rgba(12, 38, 39, .84) 0%, rgba(18, 53, 54, .62) 37%, rgba(13, 38, 37, .08) 73%), linear-gradient(0deg, rgba(12, 35, 35, .58), transparent 45%); }
.nav { width: min(1220px, calc(100% - 48px)); margin: auto; height: 95px; display: flex; align-items: center; justify-content: space-between; }
.brand { text-decoration: none; font-family: Fraunces, Georgia, serif; font-size: 1.5rem; font-weight: 700; letter-spacing: -.05em; }
.brand span { margin-left: 5px; font-family: "DM Sans", sans-serif; font-size: .85rem; font-weight: 600; letter-spacing: .02em; }
.nav-links { display: flex; gap: clamp(1rem, 3vw, 2.6rem); }
.nav-links a { color: white; text-decoration: none; font-size: .92rem; font-weight: 600; opacity: .92; }
.nav-links a:hover, .nav-links a:focus-visible { color: var(--yellow); }
.hero-content { width: min(1120px, calc(100% - 48px)); margin: clamp(7.3rem, 15vw, 12.7rem) auto 0; }
.hero-copy { max-width: 520px; margin: 27px 0 29px; font-size: clamp(1.08rem, 1.5vw, 1.25rem); }
.button { display: inline-flex; align-items: center; gap: 1.2rem; padding: .85rem 1.25rem; border-radius: 100px; text-decoration: none; font-weight: 700; transition: transform .2s, background .2s; }
.button:hover { transform: translateY(-2px); }
.button-light { background: #fffdf5; color: var(--ink); }
.button span { font-size: 1.25rem; }
.hero-note { position: absolute; bottom: 29px; right: max(24px, calc((100% - 1120px) / 2)); max-width: 330px; color: #fff7db; font-size: .82rem; line-height: 1.35; }
.hero-note span { color: var(--yellow); font-size: 1.4rem; vertical-align: middle; margin-right: 6px; }

.intro { padding: 110px 0 105px; display: grid; grid-template-columns: 1fr 1fr; gap: 8vw; align-items: end; }
.intro-copy { max-width: 510px; margin: 0 0 4px; color: var(--ink-light); font-size: 1.2rem; }
.comparison { padding-bottom: 115px; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 3rem; margin-bottom: 30px; }
.section-heading p { max-width: 340px; margin: 0; color: var(--ink-light); font-size: .96rem; }
.comparison-table { overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: var(--white); box-shadow: 0 10px 28px rgba(24, 56, 58, .05); }
.table-row { min-width: 720px; display: grid; grid-template-columns: 1.05fr .74fr 1.13fr .92fr; align-items: center; gap: 1.3rem; padding: 18px 28px; border-top: 1px solid var(--line); font-size: .95rem; }
.table-head { border: 0; color: var(--ink-light); background: #f1eee5; font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; }
.featured-row { background: #fff8e6; }
.table-row strong { display: block; font-size: 1.05rem; }
.table-subtitle { color: var(--ink-light); font-size: .82rem; }
.effort { letter-spacing: -1px; font-size: 1.1rem; }
.easy { color: #78a27a; }.balanced { color: #dd9c27; }
.mini-label { display: inline-block; margin-left: 6px; padding: 2px 5px; border-radius: 4px; color: var(--orange-deep); background: #ffe4ae; letter-spacing: .04em; font-family: "DM Sans", sans-serif; font-size: .57rem; vertical-align: middle; }

.route-section { padding: 82px 0 109px; background: var(--paper-deep); }
.route-tabs { display: flex; gap: 8px; margin-bottom: 48px; border-bottom: 1px solid #ccc7ba; }
.route-tab { position: relative; padding: 0 13px 16px 0; margin-right: 25px; border: 0; color: var(--ink-light); background: transparent; cursor: pointer; font-weight: 700; }
.route-tab span { margin-right: 7px; color: var(--orange); font-size: .74rem; letter-spacing: .08em; }
.route-tab b { margin-left: 5px; color: var(--orange-deep); font-size: .65rem; letter-spacing: .02em; }
.route-tab::after { position: absolute; right: 0; bottom: -1px; left: 0; height: 3px; content: ""; background: var(--orange); transform: scaleX(0); transition: transform .2s; }
.route-tab.active { color: var(--ink); }.route-tab.active::after { transform: scaleX(1); }
.route-panel { animation: panel-in .3s ease; }.route-panel[hidden] { display: none; }
@keyframes panel-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.route-intro { display: grid; grid-template-columns: 1.08fr .92fr; align-items: end; gap: 6rem; margin-bottom: 43px; }
.route-intro h2 em { color: var(--orange); }
.route-summary { max-width: 450px; padding-bottom: 7px; color: var(--ink-light); }
.route-summary p { margin: 0 0 18px; }
.pills { display: flex; flex-wrap: wrap; gap: 7px; }.pills span { padding: 5px 11px; border: 1px solid #c7c4b9; border-radius: 30px; color: var(--ink); font-size: .76rem; font-weight: 700; }
.print-route { margin-top: 17px; padding: 0; border: 0; color: var(--orange-deep); background: transparent; cursor: pointer; font-size: .86rem; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }.print-route:hover, .print-route:focus-visible { color: var(--ink); }.print-route span { margin-right: 4px; font-size: 1rem; }
.itinerary { border-top: 1px solid #c9c4b6; }
.day-card { border-bottom: 1px solid #c9c4b6; }
.day-card summary { display: grid; grid-template-columns: 92px 1fr 28px; align-items: center; gap: 12px; padding: 21px 3px; cursor: pointer; list-style: none; }.day-card summary::-webkit-details-marker { display: none; }
.day-number { color: var(--orange-deep); font-size: .73rem; font-weight: 700; letter-spacing: .08em; }.arrival .day-number { color: #6f9473; }
.day-title strong { display: block; font-size: 1.16rem; }.day-title small { display: block; margin-top: 2px; color: var(--ink-light); font-size: .84rem; }
.chevron { font-size: 1.55rem; font-weight: 400; line-height: 1; transition: transform .2s; }.day-card[open] .chevron { transform: rotate(45deg); }
.day-detail { max-width: 690px; padding: 0 28px 22px 104px; color: var(--ink-light); font-size: .95rem; }.day-detail p { margin: 0; }.day-detail ul { display: grid; grid-template-columns: 1fr 1fr; gap: 7px 25px; padding-left: 17px; margin: 0; }.day-detail li::marker { color: var(--orange); }
.day-visual { margin: 20px 0 0; overflow: hidden; border-radius: 9px; background: #d9e4e1; }.day-visual img { display: block; width: 100%; height: 235px; object-fit: cover; }.day-visual figcaption { padding: 8px 11px; color: var(--ink); background: #fffaf0; font-size: .76rem; font-weight: 600; }.day-visual figcaption a { color: var(--orange-deep); }.day-visual-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }.day-visual-grid .day-visual { min-width: 0; }.day-visual-grid .day-visual img { height: 200px; }
.cost-box { display: grid; grid-template-columns: .9fr .9fr 1.25fr; align-items: center; gap: 25px; margin-top: 38px; padding: 22px 24px; border-radius: 12px; background: #fffaf0; box-shadow: 0 7px 20px rgba(43, 55, 42, .06); }
.cost-box > div { display: flex; align-items: center; gap: 12px; }.cost-box > div > span { font-size: 1.35rem; }.cost-box p { margin: 0; }.cost-box small { display: block; color: var(--ink-light); font-size: .63rem; letter-spacing: .07em; font-weight: 700; }.cost-box strong { display: block; font-family: Fraunces, Georgia, serif; font-size: 1.15rem; }.cost-box strong em { font-family: "DM Sans", sans-serif; color: var(--ink-light); font-size: .75rem; font-style: normal; font-weight: 500; }.cost-note { padding-left: 24px; border-left: 1px solid var(--line); color: var(--ink-light); font-size: .83rem; line-height: 1.4; }

.map-section { padding: 106px 0; background: var(--white); }.map-heading { margin-bottom: 31px; }.map-layout { display: grid; grid-template-columns: minmax(0, 1fr) 265px; gap: 24px; align-items: stretch; }.map-layout #travel-map { height: 500px; border: 1px solid var(--line); border-radius: 13px; overflow: hidden; background: #dce9e8; }.map-key { display: flex; flex-direction: column; justify-content: center; gap: 3px; padding: 17px 0; margin: 0; list-style: none; }.map-key li { display: grid; grid-template-columns: 13px 1fr; column-gap: 10px; align-items: center; padding: 13px 0; border-bottom: 1px solid var(--line); color: var(--ink-light); font-size: .9rem; }.map-key li:first-child { border-top: 1px solid var(--line); }.map-key li > span { width: 10px; height: 10px; border: 2px solid #bd4d32; border-radius: 50%; background: #df6a47; }.map-key .map-base > span { border-color: #467b65; background: #75aa89; }.map-key strong { color: var(--ink); }.map-key small { grid-column: 2; color: var(--ink-light); font-size: .78rem; }.leaflet-container { position: relative; overflow: hidden; outline: 0; }.leaflet-pane, .leaflet-tile, .leaflet-marker-icon, .leaflet-marker-shadow { position: absolute; top: 0; left: 0; }.leaflet-pane { z-index: 400; }.leaflet-tile-pane { z-index: 200; }.leaflet-overlay-pane { z-index: 400; }.leaflet-shadow-pane { z-index: 500; }.leaflet-marker-pane { z-index: 600; }.leaflet-tooltip-pane { z-index: 650; }.leaflet-map-pane svg { position: absolute; top: 0; left: 0; }.leaflet-tile { width: 256px !important; height: 256px !important; user-select: none; }.leaflet-top, .leaflet-bottom { position: absolute; z-index: 800; pointer-events: none; }.leaflet-top { top: 0; }.leaflet-bottom { bottom: 0; }.leaflet-left { left: 0; }.leaflet-right { right: 0; }.leaflet-control { position: relative; z-index: 800; pointer-events: auto; }.leaflet-control-zoom { margin: 10px; overflow: hidden; border: 1px solid var(--line); border-radius: 6px; background: var(--white); }.leaflet-control-zoom a { display: block; width: 30px; height: 30px; color: var(--ink); border-bottom: 1px solid var(--line); text-align: center; text-decoration: none; font-size: 21px; line-height: 28px; }.leaflet-control-zoom a:last-child { border-bottom: 0; }.leaflet-control-attribution { padding: 2px 5px; color: var(--ink-light); background: rgba(255, 253, 248, .82); font-size: 10px; }.leaflet-control-attribution a { color: var(--orange-deep); }.leaflet-tooltip { position: absolute; padding: 3px 6px; white-space: nowrap; pointer-events: none; }.map-label { border: 0; border-radius: 4px; color: var(--ink); background: rgba(255, 253, 248, .91); box-shadow: 0 1px 5px rgba(24, 56, 58, .18); font-family: "DM Sans", sans-serif; font-size: 11px; font-weight: 700; }.map-label::before { border-top-color: rgba(255, 253, 248, .91); }.map-label-base { color: #2f5a48; }
.recommendation { padding: 106px 0; color: white; background: var(--orange); }.recommendation-grid { display: grid; grid-template-columns: 85px 1.25fr .85fr; gap: 30px; align-items: center; }.recommendation-symbol { align-self: start; color: var(--yellow); font-size: 4.5rem; line-height: .5; }.recommendation h2 { max-width: 680px; }.recommendation > * p:not(.eyebrow) { max-width: 620px; margin: 22px 0 0; font-size: 1.08rem; }.weather-note { max-width: 590px !important; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.35); color: #fff6d8; font-size: .92rem !important; font-weight: 600; }.weather-note span { margin-right: 7px; color: var(--yellow); font-size: 1.1rem; }.choice-card { padding: 22px; border: 1px solid rgba(255,255,255,.38); border-radius: 11px; background: rgba(135, 42, 24, .21); }.choice-card p { margin: 0; font-weight: 700; }.choice-card ul { padding-left: 17px; margin: 12px 0 0; font-size: .87rem; line-height: 1.45; }.choice-card li + li { margin-top: 6px; }
footer { padding: 30px 24px; color: #d8e1da; background: var(--ink); text-align: center; font-family: Fraunces, Georgia, serif; } footer p { margin: 0; } footer span { margin: 0 7px; color: var(--yellow); }

@media (max-width: 760px) {
  body { font-size: 16px; }.section-shell { width: min(100% - 32px, 1120px); }.hero { min-height: 680px; }.hero::after { background: linear-gradient(90deg, rgba(12, 38, 39, .82), rgba(12, 35, 35, .38)), linear-gradient(0deg, rgba(12, 35, 35, .7), transparent 55%); }.nav { width: min(100% - 32px, 1220px); height: 75px; }.nav-links { display: none; }.hero-content { width: min(100% - 32px, 1120px); margin-top: 9.5rem; }.hero-note { right: 16px; left: 16px; bottom: 20px; }.intro, .route-intro { grid-template-columns: 1fr; gap: 27px; }.intro { padding: 75px 0; }.comparison { padding-bottom: 75px; }.section-heading { display: block; }.section-heading p { margin-top: 17px; }.comparison-table { overflow-x: auto; }.route-section { padding: 61px 0 75px; }.route-tabs { overflow-x: auto; white-space: nowrap; margin-bottom: 36px; }.route-tab { flex: none; margin-right: 14px; }.route-intro { margin-bottom: 31px; }.day-card summary { grid-template-columns: 63px 1fr 18px; padding: 17px 0; }.day-title strong { font-size: 1.02rem; }.day-detail { padding: 0 6px 19px 75px; font-size: .9rem; }.day-detail ul { grid-template-columns: 1fr; }.day-visual img { height: 180px; }.day-visual-grid { grid-template-columns: 1fr; gap: 0; }.day-visual-grid .day-visual { margin-top: 14px; }.day-visual-grid .day-visual img { height: 180px; }.cost-box { grid-template-columns: 1fr; gap: 15px; padding: 19px; }.cost-note { padding: 12px 0 0; border-top: 1px solid var(--line); border-left: 0; }.map-section { padding: 75px 0; }.map-layout { grid-template-columns: 1fr; }.map-layout #travel-map { height: 390px; }.map-key { padding: 0; }.recommendation { padding: 75px 0; }.recommendation-grid { grid-template-columns: 1fr; gap: 22px; }.recommendation-symbol { display: none; }.table-row { padding: 15px 20px; }.mini-label { display: none; }
}

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; } }

@media print {
  @page { margin: 1.5cm; }
  body { color: #111; background: #fff; font-size: 11pt; }
  .skip-link, .nav, .hero-photo, .hero-note, .hero::after, .hero-copy, .button, .intro, .comparison, .route-tabs, .map-section, .recommendation, footer, .print-route { display: none !important; }
  .hero { display: block; min-height: 0; padding: 0 0 18pt; color: #18383a; background: none; }
  .hero-content { width: auto; margin: 0; }.hero-content .eyebrow { color: #b9422b; }.hero-content h1 { color: #18383a; font-size: 30pt; }.hero-content h1 em { color: #b9422b; }
  .route-section { padding: 0; background: none; }.section-shell { width: auto; }.route-intro { display: block; margin: 15pt 0 18pt; }.route-summary { max-width: none; }.route-intro h2 { font-size: 24pt; }.route-intro h2 em { color: #b9422b; }
  .day-card { break-inside: avoid; }.day-card details, details { display: block; }.day-card summary { padding: 9pt 0; }.day-detail { display: block; padding: 0 0 10pt 75pt; }.day-visual img { height: auto; }.cost-box { break-inside: avoid; box-shadow: none; border: 1px solid #ccc; }.pills span { border-color: #aaa; }
}