@font-face{font-family:"Cormorant Garamond";src:url(/fonts/cormorant-garamond-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Cormorant Garamond";src:url(/fonts/cormorant-garamond-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Inter Tight";src:url(/fonts/inter-tight-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Inter Tight";src:url(/fonts/inter-tight-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Inter Tight";src:url(/fonts/inter-tight-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap}
:root{--sand:#FAF7F2;--slate:#1F2A30;--teal:#2F6F7E;--teal-d:#245A66;--band:#E8DCC8;--dark:#16343C;--serif:"Cormorant Garamond",Georgia,serif;--sans:"Inter Tight",system-ui,-apple-system,"Segoe UI",sans-serif}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--sand);color:var(--slate);font:400 1.0625rem/1.6 var(--sans)}
img{max-width:100%;height:auto;display:block}
figure{margin:0}
h1,h2,h3,.h3{font-family:var(--serif);font-weight:500;line-height:1.15;margin:0 0 .6em;text-wrap:balance}
h1{font-size:2rem}h2{font-size:1.75rem}h3,.h3{font-size:1.4rem}
@media(min-width:760px){h1{font-size:2.8rem}h2{font-size:1.9rem}}
p{margin:0 0 1em}
a{color:var(--teal);text-underline-offset:.15em}
a:hover{color:var(--teal-d)}
:focus-visible{outline:3px solid var(--teal);outline-offset:3px;border-radius:2px}
.dark :focus-visible,.site-footer :focus-visible{outline-color:#fff}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:.5rem;top:-4rem;background:var(--slate);color:#fff;padding:.75rem 1rem;z-index:10;border-radius:4px}
.skip:focus{top:.5rem}
main:focus{outline:none}
.wrap{width:min(1100px,100% - 2.5rem);margin-inline:auto}
.narrow{width:min(760px,100% - 2.5rem)}
main>.wrap,main>section{padding-block:2.5rem}
@media(min-width:760px){main>.wrap,main>section{padding-block:4rem}}
.site-header{background:var(--sand);border-bottom:1px solid #e6dfd3;position:sticky;top:0;z-index:5}
.bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;min-height:64px}
.brand{display:inline-flex;align-items:center;min-height:44px;padding:.5rem 0;text-decoration:none}
.logo{display:block;height:40px;width:auto}
.brand{flex-shrink:0}
@media(max-width:759px){.bar{flex-wrap:nowrap;gap:.5rem}}
@media(max-width:420px){.logo{height:38px}.nav a{padding:0 .5rem}}
@media(max-width:374px){.logo{height:32px}.nav a{padding:0 .4rem}}
@media(min-width:760px){.logo{height:58px}}
.brand-foot .logo{height:40px;width:auto}
@media(max-width:400px){.nav a{padding:0 .5rem}}
.nav{list-style:none;display:flex;gap:.25rem;margin:0;padding:0}
.nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 .75rem;color:var(--slate);text-decoration:none;font-weight:500}
.nav a:hover{color:var(--teal)}
.nav a[aria-current=page]{text-decoration:underline;text-decoration-color:var(--teal);text-decoration-thickness:2px;text-underline-offset:.4em}
/* Hero: near full-screen below the sticky header (like live), cropped to keep sky, horizon and sea. */
.hero{height:calc(100vh - 65px);height:calc(100svh - 65px);min-height:360px;max-height:1100px;overflow:hidden;background:var(--dark)}
.hero-img{width:100%;height:100%;object-fit:cover;object-position:38% 25%}
@media(min-width:760px){.hero{height:calc(100svh - 75px)}.hero-img{object-position:50% 28%}}
@media(min-aspect-ratio:16/9){.hero{max-height:none;height:min(calc(100svh - 75px),75vw)}}
main>.intro{max-width:760px}
.cta{margin:1.75rem 0 .5rem}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:.75rem 1.5rem;background:var(--teal);color:#fff;font:500 1.0625rem/1.2 var(--sans);text-decoration:none;border-radius:999px;border:2px solid var(--teal)}
.btn:hover{background:var(--teal-d);border-color:var(--teal-d);color:#fff}
.small{font-size:.9rem;margin-top:.5rem;color:#3d4a51}
.dark .small{color:#e3ebec}
.band{background:var(--band)}
main>.band{padding-block:1.75rem}
.facts{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:.5rem 1.25rem;font-weight:500}
.facts li::before{content:"·";color:var(--teal);margin-right:.4em;font-weight:700}
@media(min-width:900px){.facts{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem 1.5rem}}
.teaser{display:grid;gap:1rem}
@media(min-width:900px){.teaser{grid-template-columns:repeat(3,1fr)}}
.teaser img,.grid img,.pair img{aspect-ratio:3/2;object-fit:cover;width:100%;border-radius:6px}
.more{display:inline-flex;min-height:44px;align-items:center;margin-top:1rem;font-weight:500}
.dark{background:var(--dark);color:#fff}
.dark a:not(.btn){color:#fff}
.dark .btn{background:#fff;color:var(--dark);border-color:#fff}
.dark .btn:hover{background:var(--band);border-color:var(--band);color:var(--dark)}
.prose ul{padding-left:1.25rem}.prose li{margin-bottom:.4em}
.prose section{margin-top:2.5rem}
.pair{display:grid;gap:1rem;margin:1.5rem 0}
@media(min-width:600px){.pair{grid-template-columns:1fr 1fr}}
.wide{margin:1.5rem 0}.wide img{border-radius:6px}
.lede{font-size:1.15rem;max-width:60ch}
.grid{list-style:none;margin:2rem 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:.75rem}
@media(min-width:700px){.grid{grid-template-columns:repeat(3,1fr);gap:1rem}}
.site-footer{background:var(--slate);color:#f1eee8;padding:3rem 0 2.5rem}
.site-footer a{color:#fff;display:inline-flex;min-height:44px;align-items:center}
.foot{display:grid;gap:2rem}
@media(min-width:760px){.foot{grid-template-columns:2fr 1fr}}
.brand-foot{font:600 1.5rem var(--serif);letter-spacing:.08em;text-transform:uppercase;margin-bottom:.4em}
address{font-style:normal}
@media(prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
/* Transparent header over hero (home). Only with JS (html.js); without JS the solid sticky header stays. */
.logo-over{display:none}
.js .has-hero .site-header{position:fixed;left:0;right:0;background:transparent;border-bottom-color:transparent;box-shadow:none;transition:background-color .3s ease,box-shadow .3s ease,border-color .3s ease}
.js .has-hero .site-header::before{content:"";position:absolute;inset:0 0 -40px;z-index:-1;pointer-events:none;background:linear-gradient(rgba(10,18,22,.55),rgba(10,18,22,.25) 60%,rgba(10,18,22,0));transition:opacity .3s ease}
.js .has-hero .brand{position:relative}
.js .has-hero .site-header:not(.scrolled) .logo:not(.logo-over){opacity:0}
.js .has-hero .site-header .logo-over{display:block;position:absolute;left:0;top:50%;transform:translateY(-50%);transition:opacity .3s ease;filter:drop-shadow(0 1px 3px rgba(0,0,0,.45))}
.js .has-hero .site-header .logo{transition:opacity .3s ease}
.js .has-hero .site-header:not(.scrolled) .nav a{color:#F4F1EC;text-shadow:0 1px 3px rgba(0,0,0,.6)}
.js .has-hero .site-header:not(.scrolled) .nav a:hover{color:#fff}
.js .has-hero .site-header:not(.scrolled) .nav a[aria-current=page]{text-decoration-color:currentColor}
.js .has-hero .site-header.scrolled{background:var(--sand);border-bottom-color:#e6dfd3;box-shadow:0 2px 10px rgba(31,42,48,.12)}
.js .has-hero .site-header.scrolled::before{opacity:0}
.js .has-hero .site-header.scrolled .logo-over{opacity:0}
.js .has-hero .nav a{transition:color .3s ease,text-shadow .3s ease}
.js .has-hero .hero{height:100vh;height:100svh}
@media(min-aspect-ratio:16/9){.js .has-hero .hero{height:min(100svh,75vw)}}
.nav a:hover{color:var(--slate);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.4em}
.nav a[aria-current=page]{text-decoration-color:currentColor}
@media(prefers-reduced-motion:reduce){.js .has-hero .site-header,.js .has-hero .site-header *,.js .has-hero .site-header::before{transition:none!important}}
.site-footer .social{list-style:none;margin:1rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.25rem 1.25rem}
.site-footer .social a{color:#D3D6DA;gap:.5rem;text-decoration:none;transition:color .15s}
.site-footer .social a:hover,.site-footer .social a:focus-visible{color:#fff}
.site-footer .social svg{flex:none}
.site-footer .social .soon{display:inline-flex;align-items:center;min-height:44px;gap:.5rem;color:#D3D6DA;opacity:.55;cursor:default}