:root { --ink:#15241e; --paper:#f6f2e9; --cream:#fcf7ed; --sage:#cfdacb; --mist:#dceae3; --coral:#df785d; --line:rgba(21,36,30,.18); --serif:"Playfair Display", Georgia, serif; --sans:"Manrope", Arial, sans-serif; --mono:"DM Mono", monospace; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:var(--sans); font-size:16px; line-height:1.6; }
a { color:inherit; text-decoration:none; }
.site-header { position:absolute; z-index:10; width:100%; top:0; display:flex; align-items:center; justify-content:space-between; padding:27px clamp(24px,5vw,76px); color:var(--cream); }
.site-header-light { position:relative; color:var(--ink); border-bottom:1px solid var(--line); }
.brand { letter-spacing:.08em; font-size:15px; font-weight:800; white-space:nowrap; }
.brand span { font-family:var(--serif); font-style:italic; letter-spacing:-.08em; font-size:23px; margin-right:2px; }
.main-nav { display:flex; align-items:center; gap:clamp(18px,2.7vw,47px); font-size:13px; font-weight:600; }
.main-nav a { opacity:.78; transition:opacity .2s; }
.main-nav a:hover,.main-nav a.active { opacity:1; }
.main-nav a.active::after { content:""; display:block; height:1px; background:currentColor; margin-top:5px; }
.menu-toggle { display:none; background:transparent; border:0; padding:8px 0 8px 10px; }
.menu-toggle i { display:block; width:26px; height:1px; background:currentColor; margin:6px 0; }
.hero { min-height:780px; height:min(100vh,940px); background:linear-gradient(90deg,rgba(9,27,20,.72) 0%,rgba(9,27,20,.31) 48%,rgba(9,27,20,.08) 100%), url('https://images.unsplash.com/photo-1534351590666-13e3e96b5017?auto=format&fit=crop&w=2000&q=85') center/cover; position:relative; display:flex; align-items:flex-end; padding:130px clamp(24px,9vw,150px) 100px; color:#fffdf6; }
.hero-content { max-width:760px; }
.eyebrow { font-family:var(--mono); text-transform:uppercase; letter-spacing:.1em; font-size:10px; font-weight:500; margin:0 0 22px; }
.eyebrow.ink { color:#3e584c; }
h1,h2,h3,p { margin-top:0; }
h1,h2 { font-family:var(--serif); font-weight:600; letter-spacing:-.045em; line-height:.99; }
h1 { font-size:clamp(58px,8.5vw,122px); margin-bottom:28px; }
h1 em,h2 em,blockquote em,.closing-line em,.color-banner em,.mini-banner em { color:var(--coral); font-weight:inherit; }
.hero h1 em { color:#e6b98c; }
.lead { font-size:17px; line-height:1.65; max-width:520px; margin-bottom:35px; }
.hero-actions { display:flex; align-items:center; flex-wrap:wrap; gap:28px; }
.button { display:inline-flex; gap:24px; align-items:center; justify-content:space-between; padding:14px 18px 14px 20px; border:1px solid transparent; font-size:12px; font-weight:700; font-family:var(--sans); cursor:pointer; transition:transform .2s,background .2s; }
.button:hover { transform:translateY(-2px); }
.button span { font-size:17px; font-weight:400; line-height:1; }
.button-dark { background:var(--ink); color:var(--cream); }
.button-cream { background:var(--cream); color:var(--ink); }
.text-link { display:inline-flex; align-items:center; gap:13px; font-size:12px; font-weight:700; border-bottom:1px solid currentColor; padding-bottom:4px; }
.text-link span { font-size:18px; line-height:1; }.light-link { color:#fffdf6; }
.hero-side-note { position:absolute; right:clamp(24px,5vw,76px); bottom:100px; display:flex; gap:20px; font:10px var(--mono); letter-spacing:.08em; writing-mode:vertical-rl; }
.image-credit { position:absolute; right:clamp(24px,5vw,76px); top:50%; transform:rotate(-90deg); transform-origin:right top; font:10px var(--mono); color:rgba(255,255,255,.7); }
.section-space { padding:clamp(70px,10vw,160px) clamp(24px,9vw,150px); }
.intro-grid { display:grid; grid-template-columns:1fr 1fr; gap:clamp(40px,10vw,180px); align-items:start; }
h2 { font-size:clamp(42px,5.5vw,80px); margin-bottom:0; }
.intro-copy { max-width:500px; padding-top:37px; }.intro-copy p { font-size:18px; line-height:1.8; margin-bottom:31px; }
.feature-band { min-height:630px; display:grid; grid-template-columns:1.05fr .95fr; background:var(--sage); }.feature-photo { min-height:480px; }.photo-canal { background:url('https://images.unsplash.com/photo-1488747279002-c8523379faaa?auto=format&fit=crop&w=1200&q=85') center/cover; }.feature-copy { align-self:center; padding:70px clamp(30px,7vw,105px); }.feature-copy h2 { max-width:550px; margin-bottom:30px; }.feature-copy > p:not(.eyebrow) { max-width:410px; margin-bottom:35px; }
.section-heading { display:flex; justify-content:space-between; gap:25px; align-items:flex-end; margin-bottom:48px; }.section-heading h2 { line-height:1.05; }.cards-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }.place-card { display:block; }.card-image { height:390px; position:relative; overflow:hidden; margin-bottom:20px; background-size:cover; background-position:center; transition:transform .3s; }.place-card:hover .card-image { transform:translateY(-5px); }.card-image span { position:absolute; top:14px; left:15px; color:white; font:11px var(--mono); }.photo-museum { background-image:url('https://images.unsplash.com/photo-1576924542622-772281b13aa8?auto=format&fit=crop&w=800&q=80'); }.photo-jordaan { background-image:url('https://images.unsplash.com/photo-1534351590666-13e3e96b5017?auto=format&fit=crop&w=800&q=80'); }.photo-noord { background-image:url('https://images.unsplash.com/photo-1531870400908-736a8886e639?auto=format&fit=crop&w=800&q=80'); }.place-card h3 { font-family:var(--serif); font-size:28px; margin:0 0 5px; font-weight:600; }.place-card p { color:#526358; font-size:13px; margin:0; }.quote-section { padding:clamp(80px,12vw,180px) 24px; text-align:center; background:#eecf94; }.quote-mark { font-family:var(--serif); font-size:92px; line-height:.5; margin:0 0 35px; }.quote-section blockquote { font-family:var(--serif); font-size:clamp(34px,5vw,70px); letter-spacing:-.04em; line-height:1.12; margin:0; }.newsletter { display:flex; justify-content:space-between; align-items:flex-end; gap:55px; }.newsletter-form { width:min(100%,480px); display:grid; grid-template-columns:1fr auto; gap:12px; }.newsletter-form input { min-width:0; border:0; border-bottom:1px solid var(--ink); background:transparent; padding:13px 0; font:15px var(--sans); color:var(--ink); border-radius:0; }.form-message { grid-column:1/-1; margin:0; min-height:24px; font-size:12px; color:#38624c; }.site-footer { display:grid; grid-template-columns:1fr 1fr 1.5fr; align-items:center; gap:20px; padding:34px clamp(24px,5vw,76px); background:var(--ink); color:var(--cream); font-size:12px; }.site-footer p { margin:0; }.footer-meta { text-align:right; opacity:.65; font:10px var(--mono); }
.page-hero { min-height:450px; padding:105px clamp(24px,9vw,150px) 75px; position:relative; overflow:hidden; color:var(--ink); }.page-hero::after { content:""; position:absolute; width:430px; height:430px; right:8%; top:30px; border-radius:50%; z-index:-1; opacity:.8; }.places-hero::after { background:var(--mist); }.routes-hero::after { background:#eccf9e; }.taste-hero::after { background:var(--sage); }.page-hero h1 { font-size:clamp(56px,8vw,108px); margin:0 0 23px; }.page-hero > p:not(.eyebrow) { max-width:400px; font-size:16px; }.places-list { padding-top:70px; }.feature-place { display:grid; grid-template-columns:70px minmax(310px,1fr) minmax(280px,.75fr); gap:clamp(26px,5vw,80px); padding:0 0 clamp(75px,10vw,150px); align-items:start; }.feature-place.reverse { grid-template-columns:70px minmax(280px,.75fr) minmax(310px,1fr); }.feature-place.reverse .place-visual { grid-column:3; }.feature-place.reverse .place-description { grid-column:2; grid-row:1; }.place-number { font:12px var(--mono); padding-top:10px; color:#3e584c; }.place-visual { height:520px; background-size:cover; background-position:center; }.photo-rijk { background-image:url('https://images.unsplash.com/photo-1518659526054-190340b35735?auto=format&fit=crop&w=1200&q=85'); }.photo-jordaan-wide { background-image:url('https://images.unsplash.com/photo-1534351590666-13e3e96b5017?auto=format&fit=crop&w=1200&q=85'); }.photo-noord-wide { background-image:url('https://images.unsplash.com/photo-1531870400908-736a8886e639?auto=format&fit=crop&w=1200&q=85'); }.place-description { padding-top:50px; }.place-description h2 { font-size:clamp(39px,4.5vw,62px); margin:0 0 22px; }.place-description > p:not(.eyebrow) { max-width:420px; margin-bottom:35px; }.place-description dl { margin:0; display:grid; gap:13px; }.place-description dl div { display:grid; grid-template-columns:125px 1fr; font-size:12px; border-top:1px solid var(--line); padding-top:11px; }.place-description dt { font-family:var(--mono); color:#527163; }.place-description dd { margin:0; }.mini-banner,.color-banner { padding:clamp(75px,11vw,150px) 24px; text-align:center; background:var(--mist); }.mini-banner h2,.color-banner h2 { margin-bottom:21px; }.mini-banner p:not(.eyebrow),.color-banner p:not(.eyebrow) { max-width:410px; margin:0 auto; }
.route-switch { padding-top:65px; }.tab-buttons { display:flex; border-bottom:1px solid var(--line); margin-bottom:55px; gap:30px; }.tab-button { border:0; padding:0 0 15px; background:transparent; color:#76877b; font:600 13px var(--sans); cursor:pointer; position:relative; }.tab-button.active { color:var(--ink); }.tab-button.active::after { content:""; height:2px; position:absolute; left:0; right:0; bottom:-1px; background:var(--ink); }.route-panel { display:none; grid-template-columns:1fr 1.35fr; gap:clamp(45px,11vw,180px); }.route-panel.active { display:grid; }.route-intro h2 { font-size:clamp(42px,5vw,72px); margin:0 0 22px; }.route-intro > p:not(.eyebrow) { max-width:370px; }.timeline { list-style:none; margin:0; padding:0; }.timeline li { border-top:1px solid var(--line); padding:19px 0 25px; display:grid; grid-template-columns:100px 1fr; gap:20px; }.timeline time { font:11px var(--mono); color:#416353; }.timeline h3 { font:600 20px var(--serif); margin:0 0 4px; }.timeline p { font-size:13px; color:#58685e; margin:0; }.route-image-band { background:var(--ink); color:var(--cream); display:grid; grid-template-columns:1.05fr .95fr; align-items:center; }.route-image { min-height:400px; }.photo-bikes { background:url('https://images.unsplash.com/photo-1533449060979-6d1d6e9d9d01?auto=format&fit=crop&w=1200&q=85') center/cover; }.route-image-band p { max-width:340px; margin:auto; font:clamp(22px,2.7vw,36px)/1.35 var(--serif); letter-spacing:-.03em; }
.taste-feature { display:grid; grid-template-columns:1.1fr .9fr; min-height:620px; background:#efe2ca; }.taste-photo { min-height:490px; }.photo-market { background:url('https://images.unsplash.com/photo-1528698827591-e19ccd7bc23d?auto=format&fit=crop&w=1200&q=85') center/cover; }.taste-feature > div:last-child { padding:80px clamp(30px,8vw,130px); align-self:center; }.taste-feature h2 { margin:0 0 24px; }.taste-feature > div:last-child > p:not(.eyebrow) { max-width:365px; }.small-note { font:11px/1.5 var(--mono); color:#597064; border-top:1px solid var(--line); padding-top:16px; margin-top:30px; }.display-number { font:80px var(--serif); color:#7f9687; line-height:.8; }.food-list { padding-top:100px; }.food-grid { display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--line); }.food-grid article { min-height:240px; padding:27px 24px 15px 0; border-right:1px solid var(--line); margin-right:24px; }.food-grid article:last-child { border-right:0; }.food-grid span { font:11px var(--mono); color:#587263; }.food-grid h3 { margin:52px 0 8px; font:600 26px var(--serif); }.food-grid p { color:#5e6f64; font-size:12px; margin:0; }.color-banner { background:var(--coral); }.color-banner em { color:var(--ink); }
.contact-main { background:var(--ink); color:var(--cream); }.contact-hero { padding:clamp(95px,13vw,180px) clamp(24px,9vw,150px) 85px; }.contact-hero h1 { margin:0 0 25px; }.contact-hero h1 em { color:#e5b88b; }.contact-hero > p:not(.eyebrow) { max-width:430px; color:#d4d8cd; }.contact-content { padding:20px clamp(24px,9vw,150px) clamp(100px,12vw,170px); display:grid; grid-template-columns:1.4fr .55fr; gap:clamp(60px,14vw,210px); }.contact-form label { display:block; font:11px var(--mono); color:#aebbb1; }.input-row { display:grid; grid-template-columns:1fr 1fr; gap:28px; }.contact-form input,.contact-form textarea { display:block; width:100%; padding:13px 0; margin:5px 0 28px; font:15px var(--sans); color:var(--cream); border:0; border-bottom:1px solid rgba(246,242,233,.35); background:transparent; resize:vertical; outline:none; border-radius:0; }.contact-form input::placeholder,.contact-form textarea::placeholder { color:#97a69c; }.contact-form .button { margin-top:4px; background:var(--cream); color:var(--ink); }.contact-form .form-message { color:#b8d1bf; }.contact-aside { border-top:1px solid rgba(246,242,233,.35); padding-top:18px; }.contact-aside .eyebrow { color:#d9e0d6; }.contact-aside a { display:block; margin:16px 0 2px; font:22px var(--serif); border-bottom:1px solid rgba(246,242,233,.32); padding-bottom:10px; }.contact-aside p:not(.eyebrow) { color:#aebbb1; font-size:12px; margin:0 0 28px; }.closing-line { background:#e5b88b; color:var(--ink); padding:clamp(70px,10vw,135px) 24px; text-align:center; }.closing-line p { font:clamp(50px,7vw,95px)/.98 var(--serif); letter-spacing:-.05em; margin:0; }.closing-line em { color:var(--coral); }
.visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
@media (max-width: 780px) { .site-header { padding:21px 24px; }.site-header-light { position:relative; }.menu-toggle { display:block; color:currentColor; z-index:2; }.main-nav { display:none; position:absolute; top:0; left:0; right:0; padding:88px 24px 25px; background:var(--ink); color:var(--cream); flex-direction:column; align-items:flex-start; gap:17px; }.site-header-light.menu-open .main-nav { background:var(--ink); color:var(--cream); }.site-header.menu-open .main-nav { display:flex; }.main-nav a { font-size:16px; }.hero { min-height:670px; height:88vh; padding:115px 24px 58px; }.hero-side-note,.image-credit { display:none; }.lead { font-size:15px; }.section-space { padding:75px 24px; }.intro-grid,.feature-band,.route-panel.active,.route-image-band,.taste-feature,.contact-content { grid-template-columns:1fr; }.intro-copy { padding-top:0; }.intro-copy p { font-size:16px; }.feature-band { min-height:0; }.feature-photo { min-height:340px; }.feature-copy { padding:62px 24px; }.section-heading { align-items:flex-start; }.section-heading .text-link { margin-top:19px; white-space:nowrap; }.cards-grid { grid-template-columns:1fr; gap:37px; }.card-image { height:410px; }.quote-section { padding:100px 20px; }.newsletter { align-items:flex-start; flex-direction:column; gap:34px; }.newsletter-form { width:100%; }.site-footer { grid-template-columns:1fr; padding:34px 24px; gap:8px; }.footer-meta { text-align:left; margin-top:10px!important; }.page-hero { min-height:420px; padding:80px 24px 62px; }.page-hero::after { width:260px; height:260px; right:-45px; top:90px; }.feature-place,.feature-place.reverse { grid-template-columns:40px 1fr; gap:16px; padding-bottom:85px; }.feature-place .place-visual,.feature-place.reverse .place-visual { grid-column:2; grid-row:1; height:340px; }.feature-place .place-description,.feature-place.reverse .place-description { grid-column:2; grid-row:2; padding-top:12px; }.place-description dl div { grid-template-columns:105px 1fr; }.tab-buttons { gap:22px; overflow-x:auto; margin-bottom:38px; }.tab-button { white-space:nowrap; }.route-panel.active { gap:35px; }.route-image { min-height:300px; }.route-image-band p { padding:58px 24px; }.taste-photo { min-height:360px; }.taste-feature > div:last-child { padding:65px 24px; }.food-grid { grid-template-columns:1fr 1fr; }.food-grid article:nth-child(2) { border-right:0; }.food-grid article { min-height:190px; margin-right:17px; padding-right:17px; }.food-grid h3 { margin-top:30px; }.display-number { font-size:52px; }.contact-hero { padding:90px 24px 58px; }.contact-content { padding:0 24px 90px; }.input-row { grid-template-columns:1fr; gap:0; }.contact-aside { margin-top:15px; }.contact-aside a { font-size:19px; } }
@media (max-width: 430px) { h1 { font-size:53px; }.hero-actions { gap:20px; }.button { padding-left:15px; gap:17px; }.card-image { height:330px; }.section-heading { display:block; }.section-heading .text-link { margin-top:25px; }.feature-place .place-visual,.feature-place.reverse .place-visual { height:290px; }.food-grid { grid-template-columns:1fr; }.food-grid article { border-right:0; border-bottom:1px solid var(--line); margin-right:0; min-height:160px; padding-right:0; }.food-grid article:last-child { border-bottom:0; } }