/* =========================================================================
   VISIT BJARKØY — light, minimal, image-forward
   White + soft grey, grey text, near-black headings, one clean sans.
   No decorative colour: the photography carries the page.
   ========================================================================= */

:root{
  --bg:      #ffffff;
  --soft:    #f5f4f1;   /* warm off-white for alternating bands */
  --text:    #55534f;   /* grey body */
  --strong:  #1b1a18;   /* near-black headings + links */
  --muted:   #8f8d88;   /* eyebrows, captions, meta */
  --line:    #e6e4df;   /* hairlines */
  --line-2:  #efedea;

  --ice:     #f5f4f1;
  --sans: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;

  --wrap: 1180px;
  --gutter: clamp(1.15rem, 4vw, 3rem);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  font-family:var(--sans);
  color:var(--text);
  background:var(--bg);
  line-height:1.7;
  font-size:clamp(1rem,.97rem + .15vw,1.06rem);
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }

/* ---------- layout primitives ---------- */
.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gutter); }
.section{ padding-block:clamp(3.5rem,7vw,6rem); }
.section--tight{ padding-block:clamp(2.5rem,5vw,4rem); }
.section--soft{ background:var(--soft); }

h1,h2,h3,h4{ font-family:var(--sans); color:var(--strong); font-weight:500; line-height:1.12; letter-spacing:-.015em; margin:0; }

.eyebrow{
  font-size:.72rem; font-weight:600; letter-spacing:.24em; text-transform:uppercase;
  color:var(--muted); margin:0 0 1.1rem;
}
.eyebrow--center{ text-align:center; }

h2.title{ font-size:clamp(1.9rem,1.4rem + 2.2vw,3rem); font-weight:700; color:var(--strong); letter-spacing:-.02em; }
.lede{ font-size:clamp(1.05rem,1rem + .45vw,1.25rem); color:var(--text); max-width:52ch; font-weight:400; margin:1rem 0 0; }
.lede--center{ margin-inline:auto; text-align:center; }

/* text links inside prose/meta */
.tlink{ color:var(--strong); text-decoration:none; border-bottom:1px solid var(--line); padding-bottom:1px; transition:border-color .2s ease; }
.tlink:hover{ border-color:var(--strong); }

/* buttons — quiet */
.btn{
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:var(--sans); font-weight:600; font-size:.76rem;
  letter-spacing:.14em; text-transform:uppercase; text-decoration:none;
  padding:.8rem 1.4rem; border-radius:0; cursor:pointer;
  transition:background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}
.btn:focus-visible{ outline:2px solid var(--strong); outline-offset:3px; }
.btn--solid{ background:var(--strong); color:#fff; border:1px solid var(--strong); }
.btn--solid:hover{ background:#000; border-color:#000; }
.btn--line{ background:transparent; color:var(--strong); border:1px solid var(--strong); }
.btn--line:hover{ background:var(--strong); color:#fff; }
.btn--ghost{ background:transparent; color:#fff; border:1px solid rgba(255,255,255,.7); }
.btn--ghost:hover{ background:#fff; color:var(--strong); }

/* subtle load reveal */
.reveal{ opacity:0; transform:translateY(12px); animation:reveal-up .8s cubic-bezier(.2,.7,.2,1) forwards; }
.reveal--1{ animation-delay:.04s; } .reveal--2{ animation-delay:.14s; }
.reveal--3{ animation-delay:.24s; } .reveal--4{ animation-delay:.34s; }
@keyframes reveal-up{ to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce){ .reveal{ animation:none; opacity:1; transform:none; } }

/* =========================================================================
   TOP BAR
   ========================================================================= */
.topbar{ position:sticky; top:0; z-index:50; background:rgba(255,255,255,.92); backdrop-filter:saturate(120%) blur(8px); border-bottom:1px solid var(--line); }
.topbar__inner{ max-width:var(--wrap); margin-inline:auto; padding:.7rem var(--gutter); display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.brand{ display:flex; align-items:center; gap:.7rem; text-decoration:none; color:var(--strong); }
.brand__crest{ width:30px; height:36px; object-fit:contain; }
.brand__name{ font-weight:700; letter-spacing:.2em; font-size:.8rem; text-transform:uppercase; line-height:1.1; }
.brand__coord{ display:block; font-weight:500; font-size:.58rem; letter-spacing:.26em; color:var(--muted); margin-top:2px; }

.nav{ display:flex; align-items:center; gap:.2rem; }
.nav a{ text-decoration:none; color:var(--strong); font-weight:500; font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; padding:.5rem .7rem; position:relative; opacity:.75; transition:opacity .2s ease; }
.nav a:hover{ opacity:1; }
.nav a[aria-current="page"]{ opacity:1; }
.nav a[aria-current="page"]::after{ content:""; position:absolute; left:.7rem; right:.7rem; bottom:.28rem; height:1px; background:var(--strong); }

.nav-toggle{ display:none; background:transparent; border:1px solid var(--line); border-radius:0; padding:.5rem .6rem; cursor:pointer; color:var(--strong); }
.nav-toggle svg{ display:block; }
@media (max-width:860px){
  .nav-toggle{ display:inline-flex; }
  .nav{ position:absolute; top:100%; left:0; right:0; flex-direction:column; align-items:stretch; gap:0; background:var(--bg); border-bottom:1px solid var(--line); padding:.3rem var(--gutter) 1rem; max-height:0; overflow:hidden; transition:max-height .28s ease; }
  .nav[data-open="true"]{ max-height:22rem; }
  .nav a{ padding:.85rem .2rem; border-bottom:1px solid var(--line-2); font-size:.85rem; opacity:1; }
  .nav a[aria-current="page"]::after{ display:none; }
}

/* =========================================================================
   HERO — full-bleed image, quiet text
   ========================================================================= */
.hero{ position:relative; min-height:clamp(520px,84vh,820px); display:flex; align-items:flex-end; color:#fff; overflow:hidden; background:#dcdcd8; }
.hero__bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; }
.hero__scrim{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(20,22,24,.18) 0%, rgba(20,22,24,0) 38%, rgba(20,22,24,.55) 100%); }
.hero__inner{ position:relative; z-index:2; width:100%; max-width:var(--wrap); margin-inline:auto; padding:0 var(--gutter) clamp(2.6rem,6vw,4.5rem); }
.hero__eyebrow{ font-weight:600; letter-spacing:.28em; text-transform:uppercase; font-size:.7rem; color:rgba(255,255,255,.9); margin:0 0 1rem; }
.hero__title{ font-weight:800; font-size:clamp(2.8rem,2rem + 6vw,6rem); line-height:1; letter-spacing:-.035em; margin:0 0 1.1rem; color:#fff; }
.hero__tagline{ font-weight:300; font-size:clamp(1.05rem,1rem + .8vw,1.5rem); max-width:34ch; color:rgba(255,255,255,.94); margin:0 0 1.8rem; }
.hero__cta{ display:flex; flex-wrap:wrap; gap:.7rem; }

/* =========================================================================
   FEATURE TRIO — borderless, text only
   ========================================================================= */
.special__intro{ max-width:62ch; }
.special__intro p{ color:var(--text); margin-top:.6rem; }
.feature-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.5rem,3vw,3rem); margin-top:clamp(2rem,4vw,3.2rem); }
.feature{ display:flex; flex-direction:column; gap:.6rem; text-decoration:none; color:var(--text); padding-top:1.4rem; border-top:1px solid var(--line); transition:border-color .2s ease; }
.feature:hover{ border-color:var(--strong); }
.feature__num{ display:none; }
.feature h3{ font-size:1.3rem; font-weight:500; color:var(--strong); }
.feature p{ margin:0; color:var(--text); font-size:.98rem; }
.feature__go{ margin-top:.3rem; font-weight:600; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--strong); }
@media (max-width:780px){ .feature-grid{ grid-template-columns:1fr; } }

/* =========================================================================
   EXPLORE — clean image grid, no chrome
   ========================================================================= */
.gallery{ margin-top:clamp(2rem,4vw,3rem); display:grid; grid-template-columns:repeat(3,1fr); gap:.7rem; }
.gallery figure{ position:relative; margin:0; overflow:hidden; aspect-ratio:1/1; background:var(--soft); }
.gallery img{ width:100%; height:100%; object-fit:cover; transition:transform .6s ease; }
.gallery figure:hover img{ transform:scale(1.04); }
.gallery figcaption{ position:absolute; inset:auto 0 0 0; padding:1rem .85rem .7rem; font-size:.72rem; letter-spacing:.02em; color:#fff; background:linear-gradient(transparent, rgba(20,22,24,.6)); opacity:0; transition:opacity .25s ease; }
.gallery figure:hover figcaption{ opacity:1; }
@media (max-width:820px){ .gallery{ grid-template-columns:repeat(2,1fr); } }

/* =========================================================================
   TRIO cards (Stay Local preview) — image led
   ========================================================================= */
.trio{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.2rem,3vw,2rem); margin-top:clamp(2rem,4vw,3rem); }
.tcard{ display:flex; flex-direction:column; text-decoration:none; color:var(--text); }
.tcard__img{ aspect-ratio:4/3; overflow:hidden; background:var(--soft); }
.tcard__img img{ width:100%; height:100%; object-fit:cover; transition:transform .6s ease; }
.tcard:hover .tcard__img img{ transform:scale(1.04); }
.tcard__body{ padding:1.1rem 0 0; display:flex; flex-direction:column; gap:.4rem; }
.tcard h3{ font-size:1.2rem; font-weight:500; color:var(--strong); }
.tcard p{ margin:0; color:var(--text); font-size:.95rem; }
@media (max-width:780px){ .trio{ grid-template-columns:1fr; } }

/* =========================================================================
   TWO-COLUMN media bands (map, salt & sea) — light
   ========================================================================= */
.mapband__inner{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4rem); align-items:center; }
.mapband h2{ font-size:clamp(1.8rem,1.4rem + 2vw,2.7rem); font-weight:700; }
.mapband p{ color:var(--text); max-width:42ch; margin-top:1rem; }
.mapband__art{ overflow:hidden; background:var(--soft); border:1px solid var(--line); }
.mapband__art img{ width:100%; height:100%; object-fit:cover; }
@media (max-width:820px){ .mapband__inner{ grid-template-columns:1fr; } }

.saltsea__inner{ display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(2rem,5vw,4rem); align-items:center; }
.saltsea__img{ overflow:hidden; aspect-ratio:4/5; background:var(--soft); }
.saltsea__img img{ width:100%; height:100%; object-fit:cover; }
.saltsea h2{ font-size:clamp(1.9rem,1.5rem + 2.2vw,3rem); font-weight:700; }
.saltsea__tag{ font-size:1.15rem; color:var(--muted); margin:.3rem 0 1.2rem; font-weight:400; }
.saltsea p{ color:var(--text); max-width:50ch; }
.saltsea__meta{ font-size:.92rem; color:var(--strong); border-left:2px solid var(--line); padding-left:1rem; margin:1.4rem 0; }
@media (max-width:820px){ .saltsea__inner{ grid-template-columns:1fr; } .saltsea__img{ max-width:440px; } }

/* =========================================================================
   MUSEUM + hours
   ========================================================================= */
.museum__inner{ display:grid; grid-template-columns:1.2fr .8fr; gap:clamp(2rem,5vw,3.5rem); align-items:start; }
.museum h2{ font-size:clamp(1.8rem,1.4rem + 2vw,2.7rem); font-weight:700; }
.museum p{ color:var(--text); margin-top:1rem; }
.museum__contact{ font-size:.95rem; color:var(--strong); }
.museum__contact a{ color:var(--strong); text-decoration:none; border-bottom:1px solid var(--line); }
.museum__gallery{ display:grid; grid-template-columns:1fr 1fr; gap:.7rem; margin-top:1.6rem; }
.museum__gallery img{ width:100%; aspect-ratio:4/3; object-fit:cover; background:var(--soft); }
.museum__gallery img:first-child{ grid-column:1 / -1; aspect-ratio:16/8; }
.hours{ border:1px solid var(--line); padding:1.6rem 1.5rem; background:var(--bg); }
.hours h3{ font-weight:700; font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin-bottom:1rem; }
.hours ul{ list-style:none; margin:0; padding:0; }
.hours li{ display:flex; justify-content:space-between; gap:1rem; padding:.55rem 0; border-bottom:1px solid var(--line-2); font-size:.94rem; }
.hours li:last-child{ border-bottom:0; }
.hours li span:first-child{ font-weight:500; color:var(--strong); }
.hours li span:last-child{ color:var(--muted); }
@media (max-width:820px){ .museum__inner{ grid-template-columns:1fr; } }

/* =========================================================================
   QUOTE — quiet, centered
   ========================================================================= */
.quoteband{ text-align:center; }
.quoteband blockquote{ margin:0 auto; max-width:26ch; font-weight:300; font-size:clamp(1.7rem,1.3rem + 2.4vw,2.8rem); line-height:1.2; color:var(--strong); letter-spacing:-.01em; }
.quoteband cite{ display:block; font-style:normal; font-size:.74rem; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); margin-top:1.3rem; }
.quoteband p{ color:var(--text); margin-top:1.4rem; font-size:.96rem; }
.quoteband p a{ color:var(--strong); border-bottom:1px solid var(--line); text-decoration:none; }

/* =========================================================================
   GETTING HERE — simple rows
   ========================================================================= */
.routes{ margin-top:clamp(2rem,4vw,3rem); border-top:1px solid var(--line); }
.route{ display:grid; grid-template-columns:8rem 1fr; gap:clamp(1rem,3vw,2.5rem); align-items:baseline; padding:1.5rem 0; border-bottom:1px solid var(--line); }
.route__mark{ font-size:.74rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.route h3{ font-weight:500; font-size:1.1rem; margin-bottom:.3rem; color:var(--strong); }
.route p{ margin:0; color:var(--text); font-size:.96rem; }
.route a{ color:var(--strong); text-decoration:none; border-bottom:1px solid var(--line); }
.route a:hover{ border-color:var(--strong); }
@media (max-width:640px){ .route{ grid-template-columns:1fr; gap:.4rem; } }

/* =========================================================================
   INTERIOR page header — light
   ========================================================================= */
.pagehead{ padding-block:clamp(3rem,7vw,5.5rem) clamp(2rem,4vw,3rem); border-bottom:1px solid var(--line); }
.pagehead h1{ font-size:clamp(2.2rem,1.6rem + 3.5vw,4.2rem); font-weight:800; letter-spacing:-.03em; }
.pagehead p{ color:var(--text); max-width:54ch; margin-top:1rem; font-size:1.1rem; }

/* listings */
.listing{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(1.6rem,4vw,2.6rem); margin-top:clamp(1.5rem,3vw,2.4rem); }
.listing--single{ grid-template-columns:1fr; max-width:860px; }
.place{ display:flex; flex-direction:column; }
.place__img{ aspect-ratio:16/10; overflow:hidden; background:var(--soft); }
.place__img img{ width:100%; height:100%; object-fit:cover; transition:transform .6s ease; }
.place:hover .place__img img{ transform:scale(1.03); }
.place__body{ padding:1.1rem 0 0; display:flex; flex-direction:column; gap:.5rem; }
.place__body h2,.place__body h3{ font-size:1.3rem; font-weight:500; color:var(--strong); }
.place__body h2 a,.place__body h3 a{ color:inherit; text-decoration:none; border-bottom:1px solid var(--line); }
.place__body h2 a:hover,.place__body h3 a:hover{ border-color:var(--strong); }
.place__body p{ margin:0; color:var(--text); font-size:.96rem; }
.place__meta{ margin-top:.3rem; font-size:.88rem; color:var(--muted); display:flex; flex-wrap:wrap; gap:.3rem 1.4rem; }
.place__meta span{ display:inline-flex; align-items:center; gap:.4rem; }
.place__meta a{ color:var(--strong); text-decoration:none; border-bottom:1px solid var(--line); }
.place__meta a:hover{ border-color:var(--strong); }
@media (max-width:760px){ .listing{ grid-template-columns:1fr; } }

/* prose (history) */
.prose{ max-width:68ch; }
.prose p{ color:var(--text); margin:0 0 1.2rem; }
.prose em{ color:var(--strong); font-style:italic; }
.prose h2{ font-size:clamp(1.6rem,1.3rem + 1.6vw,2.2rem); font-weight:400; color:var(--strong); margin:2.4rem 0 1rem; }
.figure{ margin:2rem 0; overflow:hidden; }
.figure img{ width:100%; }
.figure figcaption{ font-size:.84rem; color:var(--muted); padding:.7rem 0 0; }
.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.5rem,4vw,3rem); align-items:center; }
.split img{ width:100%; }
@media (max-width:760px){ .split{ grid-template-columns:1fr; } }

/* =========================================================================
   CONTACT + FOOTER — light
   ========================================================================= */
.connect{ border-top:1px solid var(--line); }
.connect__inner{ display:grid; grid-template-columns:1fr auto; gap:2rem; align-items:center; }
.connect h2{ font-size:clamp(1.6rem,1.3rem + 1.8vw,2.4rem); font-weight:700; max-width:24ch; }
.connect__card{ display:flex; align-items:center; gap:1.1rem; }
.connect__card img{ width:72px; height:72px; border-radius:50%; object-fit:cover; }
.connect__card strong{ display:block; font-size:1.02rem; color:var(--strong); font-weight:600; }
.connect__card a{ color:var(--strong); text-decoration:none; border-bottom:1px solid var(--line); font-size:.92rem; }
.connect__card a:hover{ border-color:var(--strong); }
@media (max-width:680px){ .connect__inner{ grid-template-columns:1fr; } }

.site-footer{ background:var(--soft); border-top:1px solid var(--line); color:var(--muted); }
.site-footer__inner{ padding-block:2.4rem; display:flex; flex-wrap:wrap; gap:1.2rem 2rem; align-items:center; justify-content:space-between; }
.site-footer__brand{ display:flex; align-items:center; gap:.7rem; color:var(--strong); text-decoration:none; }
.site-footer__brand img{ width:24px; height:29px; object-fit:contain; }
.site-footer__brand span{ font-weight:700; letter-spacing:.18em; font-size:.76rem; text-transform:uppercase; }
.site-footer__nav{ display:flex; flex-wrap:wrap; gap:.3rem 1.3rem; }
.site-footer__nav a{ color:var(--muted); text-decoration:none; font-size:.76rem; letter-spacing:.1em; text-transform:uppercase; }
.site-footer__nav a:hover{ color:var(--strong); }
.site-footer__legal{ width:100%; border-top:1px solid var(--line); padding-top:1.2rem; font-size:.78rem; color:var(--muted); display:flex; flex-wrap:wrap; gap:.4rem 1.5rem; justify-content:space-between; }
.site-footer__legal em{ font-style:normal; }

/* utilities */
.center{ text-align:center; }
.mt-lg{ margin-top:1.6rem; }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }