/* Owner-approved web alternatives to New Atlas and Helvetica Neue World. */
@font-face{font-family:Inter;font-style:normal;font-weight:100 900;font-display:swap;src:url('assets/fonts/inter-variable.woff2') format('woff2')}

@font-face{font-family:SourceSerif;font-style:normal;font-weight:700;font-display:swap;src:url('assets/385ae303-b96a-4136-a450-5f18ca2ff5fb.woff2') format('woff2')}

:root{--ink:#00293b;--paper:#d2d1c5;--sea:#2a645d;--sand:#dccfa7;--sky:#9edae9;--line:var(--sea);--font-body:Inter,Arial,sans-serif;--font-heading:SourceSerif,Georgia,serif;--space:clamp(40px,6vw,80px)}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-block:24px}
body{margin:0;background:var(--paper);color:var(--ink);font:400 1.0625rem/1.65 var(--font-body);font-optical-sizing:auto;overflow-wrap:break-word}
img{max-width:100%;height:auto}
a{color:var(--ink);text-underline-offset:4px;overflow-wrap:anywhere}
a:hover{text-decoration-thickness:2px}
button{font:inherit;cursor:pointer}
a,button{scroll-margin-block:24px}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--sand);outline-offset:3px;box-shadow:0 0 0 6px var(--ink)}
[hidden]{display:none!important}
.container{width:min(1180px,calc(100% - 48px));margin-inline:auto}
.section{padding-block:var(--space)}
.section-rule{border-top:1px solid var(--line)}
h1,h2,h3{font-family:var(--font-heading);font-weight:700;line-height:1.15;margin:0 0 24px;text-wrap:balance}
h1{font-size:clamp(34px,4.2vw,54px);text-transform:uppercase}
h2{font-size:clamp(30px,3vw,40px)}
h3{font-size:28px}
p{margin:0 0 20px}
.eyebrow{font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);margin-bottom:14px}
.section-intro{max-width:65ch;margin-bottom:32px}
.skip-link{position:fixed;top:12px;left:12px;z-index:99;background:var(--ink);color:var(--sand);padding:12px 18px;transform:translateY(-300%)}
.skip-link:focus{transform:translateY(0)}

.site-header{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-block:22px;border-bottom:1px solid var(--line)}
.wordmark{display:block;width:210px}
.site-header nav{display:flex;align-items:center;flex-wrap:wrap;gap:8px 24px}
.site-header nav a{display:inline-flex;min-height:44px;align-items:center;font-size:14px;font-weight:700;text-decoration:none;color:var(--ink)}
.site-header nav .button{color:var(--paper)}
.site-header nav .button:hover{color:var(--ink)}
.button{display:inline-flex;justify-content:center;align-items:center;min-height:48px;background:var(--ink);color:var(--paper);padding:13px 22px;text-decoration:none;font-size:15px;font-weight:700;border:2px solid transparent;line-height:1.5}
.button:hover{background:var(--sand);color:var(--ink);border-color:var(--ink);text-decoration:underline}
.button-small{padding:8px 20px}
.button-outline{background:transparent;color:var(--ink);border-color:var(--ink)}
.button-outline:hover{background:var(--ink);color:var(--paper)}
.contact-actions{display:flex;align-items:center;flex-wrap:wrap;gap:12px 24px}

.hero{display:grid;grid-template-columns:1.3fr 1fr;align-items:center;gap:64px;padding-block:var(--space)}
.hero-copy{min-width:0}
.intro{font-size:18px;max-width:55ch;margin-bottom:28px}
.hero-badge{width:360px;justify-self:center}
.photo-placeholder{background:#d2d1c5;margin:0;position:relative;min-height:180px;display:flex;align-items:flex-end}
.photo-placeholder>img{position:absolute;width:56px;top:35%;left:50%;transform:translate(-50%,-50%);opacity:.22}
.photo-placeholder figcaption{position:relative;padding:16px;font-size:14px;line-height:1.5}
.photo-placeholder figcaption span{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.1em;font-weight:700;margin-bottom:4px}

.farm-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:start}
.farm-steps{list-style:none;counter-reset:steps;padding:0;margin:28px 0 0;display:grid;gap:24px}
.farm-steps li{counter-increment:steps;display:flex;gap:20px}
.farm-steps li:before{content:counter(steps,decimal-leading-zero);font:700 26px/1.3 var(--font-heading);color:var(--sea)}
.farm-steps h3{font:700 17px/1.5 var(--font-body);margin-bottom:4px}
.farm-steps p{font-size:16px;margin:0}
.work-photo{min-height:380px}
.dark-section{background:var(--ink);color:var(--paper)}
.dark-section h2{color:var(--sand)}
.dark-section .eyebrow,.dark-section a{color:var(--sky)}
.service-areas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 32px;list-style:disc;padding-left:20px;margin:28px 0 0}
.service-areas li{padding-left:4px}
.about-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:60px;align-items:center}
.portrait-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.portrait{min-height:280px}
.contact-section{text-align:center}
.contact-section p{max-width:60ch;margin-inline:auto}
.contact-section .contact-actions{justify-content:center}
.contact-monogram{width:48px;margin-bottom:20px}
.dark-section .button-light{background:var(--sand);color:var(--ink)}
.button-light:hover{background:var(--sky)}
.dark-section .button-outline{color:var(--sand);border-color:var(--sand)}
.dark-section .button-outline:hover{background:var(--sand);color:var(--ink)}
.email-address{margin-top:20px;font-size:15px}
.site-footer{background:var(--ink);color:var(--paper);border-top:1px solid var(--sand);padding-block:28px;font-size:14px}
.footer-grid{display:grid;grid-template-columns:auto 1fr auto;gap:12px 24px;align-items:center}
.footer-badge{width:64px}
.footer-name{font-weight:700;color:var(--sand)}
.site-footer p{margin-bottom:2px}
.site-footer a{color:var(--sky)}
.footer-meta{text-align:right}
.site-footer nav{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:0 24px}
.site-footer nav a{min-height:44px;display:inline-flex;align-items:center}
.site-footer .copyright{margin:0;font-size:13px}
.simple-page{max-width:800px;padding-block:48px;min-height:65vh}
.simple-page h1{text-transform:none;font-size:42px}
.simple-page h2{font-size:28px;margin-top:32px}
.back-link{display:inline-flex;align-items:center;min-height:44px;margin-bottom:24px}

@media(max-width:900px){.site-header{flex-wrap:wrap}
.hero{gap:28px;grid-template-columns:1.4fr 1fr}
.hero-badge{width:270px}
.farm-grid,.about-grid{gap:28px}
}

@media(max-width:640px){.container{width:calc(100% - 40px)}
.site-header{padding-block:16px;gap:12px}
.wordmark{width:185px}
.site-header nav{width:100%;justify-content:space-between;gap:4px 12px}
.site-header nav a{font-size:13px}
.button-small{padding:6px 12px}
.hero{grid-template-columns:1fr;gap:24px;padding-top:32px}
.hero-badge{width:150px}
.intro{font-size:17px}
.contact-actions{gap:8px 20px}
.hero .contact-actions{align-items:flex-start}
.hero .button{width:100%}
.photo-placeholder{min-height:150px}
.photo-placeholder figcaption{font-size:12px;padding:12px}
.photo-placeholder>img{width:40px}
.farm-grid,.about-grid{grid-template-columns:1fr}
.work-photo{min-height:230px}
.portrait{min-height:190px}
.service-areas{grid-template-columns:1fr 1fr;gap:12px 20px;font-size:16px}
.section-intro{margin-bottom:24px}
.contact-section .button{width:100%}
.footer-grid{grid-template-columns:auto 1fr;gap:12px 16px}
.footer-badge{width:56px}
.footer-meta{grid-column:1/-1;text-align:left}
.site-footer nav{justify-content:flex-start}
.simple-page h1{font-size:34px}
}

@media(max-width:360px){
.service-areas{grid-template-columns:1fr}
.portrait-grid{grid-template-columns:1fr}
.site-header nav{gap:2px 8px}
}

@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}
}

@media(forced-colors:active){a:focus-visible,button:focus-visible{outline:3px solid LinkText}
.button{border-color:ButtonText}
}

@media print{.site-header,.skip-link{display:none!important}
body,.dark-section,.site-footer{background:white;color:black}
.dark-section h2,.dark-section a,.site-footer a{color:black}
figure{break-inside:avoid}
}


/* Real founder portraits retain the whole photograph, including faces and oysters. */
.founder-photo{margin:0;align-self:start}
.founder-photo img{display:block;width:100%;height:auto}
.founder-photo figcaption{padding-top:10px;font-size:15px;font-weight:700}

/* Young-oyster photographs introduce the farm before products go to market. */
.farm-image{margin:0;align-self:start}
.farm-image img{width:100%;height:auto;display:block}
.farm-image figcaption{font-size:14px;line-height:1.5;color:var(--ink);padding-top:10px}
@media(max-width:640px){.oyster-intro .section-intro{margin-bottom:12px}}

/* Location is a general bay overview, separate from delivery logistics. */
.location-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:48px;align-items:start}
.location-grid .service-areas{grid-template-columns:1fr 1fr;font-size:16px}
.service-heading{font:700 17px/1.5 var(--font-body);margin-top:28px;margin-bottom:12px}

.map-details{padding-top:16px;font-size:14px;line-height:1.6}
.map-details p{margin-bottom:10px}
/* OpenStreetMap requires visible attribution; it sits in the map corner like a standard map credit. */
.map-frame{position:relative}
/* Keep the linked credit readable over the attribution included in the OSM export. */
.map-credit{position:absolute;right:1px;bottom:1px;display:flex;flex-wrap:wrap;gap:0 .3em;align-items:center;justify-content:center;max-width:calc(100% - 2px);width:40%;min-height:9%;margin:0;padding:2px 8px;background:var(--paper);color:var(--ink);font-size:12px;line-height:1.6}
.map-credit a{display:inline-flex;align-items:center;min-height:24px}
.location-map .map-credit a{color:var(--ink)}
@media(max-width:900px){.location-grid{grid-template-columns:1fr;gap:24px}}
@media(max-width:360px){.location-grid .service-areas{grid-template-columns:1fr}}

/* Paired photographs show the scale of young oysters on the farm. */
.oyster-gallery{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:28px}
@media(max-width:640px){.oyster-gallery{grid-template-columns:1fr;gap:20px;margin-top:24px}}

/* A locally hosted overview keeps third-party map controls out of the page. */
.map-overview-link{display:block;position:relative;border:1px solid var(--sky)}
.map-overview-link img{display:block;width:100%;height:auto}
/* Pin tip projected from tools/rehoboth-map.json; keep aligned with the OSM link. */
.map-pin{position:absolute;left:50.00995846%;top:49.96718002%;width:30px;height:auto;transform:translate(-50%,-100%);pointer-events:none;filter:drop-shadow(0 2px 2px rgba(0,41,59,.35))}
.map-pin path{fill:var(--ink);stroke:var(--sand);stroke-width:2}
.map-pin circle{fill:var(--sand)}

.map-overview-link:hover{outline:2px solid var(--sand);outline-offset:3px}