/* Hallmark · macrostructure: Photographic (drawn scene) · nav: N6 masthead · footer: Ft1 · tone: soft · theme: custom "Dijk" · anchor hue: 150 */
@font-face { font-family: "Fraunces"; src: url("../../fonts/fraunces-latin-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url("../../fonts/dm-sans-latin-wght-normal.woff2") format("woff2"); font-weight: 100 1000; font-display: swap; }
:root {
  --color-paper: oklch(96.5% 0.018 100);
  --color-paper-2: oklch(91% 0.03 130);
  --color-ink: oklch(27% 0.045 160);
  --color-ink-2: oklch(42% 0.04 160);
  --color-accent: oklch(42% 0.09 155);
  --color-on-accent: oklch(97% 0.015 100);
  --color-rule: oklch(82% 0.03 130);
  --color-sky: oklch(90% 0.045 85);
  --color-sun: oklch(84% 0.13 75);
  --color-far: oklch(70% 0.05 150);
  --color-water: oklch(76% 0.05 215);
  --color-ripple: oklch(92% 0.03 215);
  --color-dike: oklch(52% 0.09 140);
  --color-demo: oklch(88% 0.13 92);
  --color-demo-ink: oklch(21% 0.02 264);
  --font-display: "Fraunces", Georgia, serif;
  --font-body: "DM Sans", "Helvetica Neue", Arial, sans-serif;
  --text-sm: 0.9375rem;
  --text-base: 1.0625rem;
  --text-h3: 1.5rem;
  --text-h2: clamp(1.8rem, 1.2rem + 2.4vw, 2.9rem);
  --text-display: clamp(2.2rem, 1.2rem + 4.6vw, 4.5rem);
  --space-2: 0.5rem; --space-4: 1rem; --space-6: 1.5rem; --space-8: 2rem; --space-12: 3rem;
  --space-section: clamp(3rem, 2rem + 5vw, 6.5rem);
  --gutter: clamp(1rem, 4vw, 3rem);
  --radius-1: 999px;
  --radius-2: 14px;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-1: 160ms;
}
*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
html { scroll-behavior: smooth; scroll-padding-top: 4rem; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--color-paper); color: var(--color-ink); font: var(--text-base)/1.6 var(--font-body); }
h1, h2, h3 { font-family: var(--font-display); font-weight: 480; font-style: normal; line-height: 1.08; margin: 0 0 var(--space-4); letter-spacing: -0.015em; overflow-wrap: anywhere; min-width: 0; }
h1 { font-size: var(--text-display); }
h2 { font-size: var(--text-h2); max-width: 15em; }
h3 { font-size: var(--text-h3); }
p { margin: 0 0 var(--space-4); max-width: 58ch; }
a { color: var(--color-accent); }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }
.demo-bar { margin: 0; max-width: none; background: var(--color-demo); color: var(--color-demo-ink); font-size: var(--text-sm); padding: var(--space-2) var(--gutter); text-align: center; }
.demo-bar a { color: var(--color-demo-ink); white-space: nowrap; }
.top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-6); padding: var(--space-4) var(--gutter); }
.name { font: 560 1.35rem/1 var(--font-display); color: var(--color-ink); text-decoration: none; white-space: nowrap; }
.top nav { display: flex; align-items: center; gap: var(--space-6); }
.top nav a { color: var(--color-ink); text-decoration: none; font-size: var(--text-sm); white-space: nowrap; }
.top nav a:hover { text-decoration: underline; }
@media (max-width: 40rem) { .top nav a:not(.cta) { display: none; } }
.cta, .top nav a.cta { display: inline-block; background: var(--color-accent); color: var(--color-on-accent); border: 0; border-radius: var(--radius-1); padding: 0.6em 1.2em; font: 600 var(--text-sm)/1.2 var(--font-body); text-decoration: none; white-space: nowrap; cursor: pointer; transition: background var(--dur-1) var(--ease-out); }
.cta:hover, .top nav a.cta:hover { background: var(--color-ink); text-decoration: none; }
.cta.big { font-size: var(--text-base); padding: 0.85em 1.6em; }
.hero { position: relative; display: grid; }
.sky { grid-area: 1 / 1; min-height: clamp(26rem, 62vw, 40rem); }
.sky svg { display: block; width: 100%; height: 100%; }
.s1 { fill: var(--color-sky); } .sun { fill: var(--color-sun); } .far { fill: var(--color-far); }
.water { fill: var(--color-water); } .dike { fill: var(--color-dike); }
.ripple { stroke: var(--color-ripple); stroke-width: 4; stroke-linecap: round; fill: none; }
.boat { fill: var(--color-on-accent); }
.hero-text { grid-area: 1 / 1; align-self: start; padding: clamp(2rem, 6vw, 5rem) var(--gutter) 0; max-width: 46rem; }
.hero-text p { font-size: 1.15rem; max-width: 30em; }
.block { padding: var(--space-section) var(--gutter); }
.block.alt { background: var(--color-paper-2); }
.block > * { max-width: 68rem; margin-left: auto; margin-right: auto; }
.block > h2 { margin-bottom: var(--space-8); }
.rooms { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-8); }
.swatch { aspect-ratio: 5 / 3; border-radius: var(--radius-2); margin-bottom: var(--space-6); }
.swatch.a { background: linear-gradient(180deg, var(--color-sky) 0 46%, var(--color-water) 46% 78%, var(--color-dike) 78%); }
.swatch.b { background: radial-gradient(circle at 30% 60%, var(--color-dike) 0 22%, transparent 23%), radial-gradient(circle at 68% 52%, var(--color-accent) 0 26%, transparent 27%), linear-gradient(180deg, var(--color-sky) 0 70%, var(--color-far) 70%); }
.rate { color: var(--color-ink-2); font-size: var(--text-sm); }
.rate strong { font: 560 1.5rem/1 var(--font-display); color: var(--color-ink); }
.two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-8) var(--space-12); }
.near { list-style: none; padding: 0; margin-top: 0; margin-bottom: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-8); }
.near li { border-top: 2px solid var(--color-accent); padding-top: var(--space-4); }
.near strong { display: block; font: 520 var(--text-h3)/1.2 var(--font-display); }
.near span { color: var(--color-ink-2); }
.addr { color: var(--color-ink-2); overflow-wrap: anywhere; }
form { display: grid; gap: var(--space-4); }
label { display: grid; gap: var(--space-2); font-weight: 600; font-size: var(--text-sm); min-width: 0; }
input, select, textarea { font: inherit; font-weight: 400; color: var(--color-ink); background: var(--color-paper); border: 1px solid var(--color-ink-2); border-radius: var(--radius-2); padding: 0.65em 0.8em; width: 100%; min-width: 0; }
.pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
form .cta { justify-self: start; }
.status { background: var(--color-demo); color: var(--color-demo-ink); padding: var(--space-4); border-radius: var(--radius-2); margin: 0; }
.end { padding: var(--space-8) var(--gutter); font-size: var(--text-sm); color: var(--color-ink-2); text-align: center; }
.end p { margin: 0 auto; }
[hidden] { display: none !important; }
@media (max-width: 47.99rem) { .rooms, .two, .near { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 26rem) { .pair { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition-duration: 1ms !important; } }