/* Buildless, system fonts, mobile-first fallbacks. */
:root {
  --cream:#f7f4ed;
  --navy:#183b45;
  --ink:#203c40;
  --green:#536b59;
  --gold:#b49250;
  --line:#d8d9cd;
  --muted:#546564;
  --white:#fff;
  --serif:Georgia,'Times New Roman',serif;
  --sans:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif}

* {
  box-sizing:border-box}
html {
  scroll-behavior:smooth;
  scroll-padding-top:110px}
body {
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.7}
img {
  max-width:100%;
  display:block}
a {
  color:inherit;
  text-decoration:none}
button {
  font:inherit;
  cursor:pointer}
button:disabled {
  cursor:default}
button,a {
  -webkit-tap-highlight-color:transparent}
button:focus-visible,a:focus-visible,summary:focus-visible {
  outline:3px solid #b27a22;
  outline-offset:5px}
h1,h2,h3,p {
  margin-top:0}
h1,h2,h3 {
  font-family:var(--serif);
  font-weight:400;
  line-height:1.08}
h1 {
  font-size:clamp(2.8rem,5.8vw,5.8rem);
  letter-spacing:-.035em}
h2 {
  font-size:clamp(2.4rem,4.1vw,4.25rem);
  letter-spacing:-.035em;
  margin-bottom:28px}
h3 {
  font-size:1.65rem}
em {
  font-weight:400;
  color:var(--green)}
p {
  margin-bottom:22px}
section[id] {
  scroll-margin-top:100px}
[hidden] {
  display:none!important}
.skip-link {
  position:fixed;
  top:10px;
  left:12px;
  background:white;
  padding:12px;
  z-index:100;
  transform:translateY(-160%)}
.skip-link:focus {
  transform:none}
.site-header {
  position:sticky;
  top:0;
  background:var(--cream);
  z-index:20;
  border-bottom:1px solid transparent;
  transition:box-shadow .2s}
.site-header.scrolled {
  box-shadow:0 3px 16px #16384014;
  border-color:var(--line)}
.header-inner {
  max-width:1440px;
  padding:13px 5%;
  margin:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  min-height:98px}
.brand {
  display:flex;
  align-items:center;
  gap:12px;
  flex-shrink:0}
.brand img {
  width:88px;
  height:66px;
  object-fit:contain;
  mix-blend-mode:multiply}
.brand>span {
  font-family:var(--serif);
  font-size:25px;
  line-height:1.15}
.brand>span>span {
  display:block;
  font:9px var(--sans);
  letter-spacing:.4em;
  margin-top:7px;
  text-align:center}
.site-header nav {
  display:flex;
  gap:29px;
  font-size:13px}
.site-header nav a {
  padding:9px 0;
  border-bottom:1px solid transparent}
.site-header nav a:hover,.site-header nav a[aria-current] {
  border-color:var(--gold)}
.menu-toggle {
  display:none;
  background:none;
  border:1px solid var(--line);
  padding:8px 12px;
  color:var(--navy)}
.hero {
  min-height:min(800px,calc(100svh - 98px));
  position:relative;
  isolation:isolate;
  background:var(--navy);
  color:white;
  display:flex;
  align-items:center}
.hero-image {
  position:absolute!important;
  inset:0;
  z-index:-2;
  aspect-ratio:auto!important}
.hero-image:after {
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,rgba(10,30,35,.68),rgba(10,30,35,.1) 78%),linear-gradient(0deg,rgba(10,30,35,.35),transparent 30%)}
.hero-image img {
  object-position:center 55%}
.hero-content {
  width:100%;
  max-width:1440px;
  margin:auto;
  padding:80px 7% 100px}
.hero h1 {
  max-width:780px;
  margin-bottom:27px}
.hero h1 em {
  color:#e9d5a4}
.eyebrow {
  font-size:11px;
  letter-spacing:.2em;
  font-weight:600;
  margin-bottom:24px}
.hero-intro {
  max-width:460px;
  font-size:15px;
  line-height:1.8;
  color:#f2f1eb}
.actions {
  display:flex;
  align-items:center;
  gap:25px;
  flex-wrap:wrap;
  margin-top:30px}
.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:var(--navy);
  border:1px solid var(--navy);
  color:white;
  min-height:48px;
  padding:12px 24px;
  font-size:13px;
  line-height:1.5;
  transition:background .2s}
.button:hover {
  background:#31535d}
.button.light {
  background:var(--cream);
  color:var(--navy);
  border-color:var(--cream)}
.button.light:hover {
  background:#e3ddcf}
.button.outline {
  background:transparent;
  color:var(--navy)}
.text-link {
  font-size:13px;
  display:inline-block;
  border-bottom:1px solid var(--gold);
  padding:9px 0;
  overflow-wrap:anywhere}
.hero-link {
  color:white}
.hero-bottom {
  position:absolute;
  bottom:25px;
  left:7%;
  right:7%;
  display:flex;
  justify-content:space-between;
  font-size:11px;
  letter-spacing:.08em}
.hero-bottom a {
  padding:8px}
.intro-strip {
  display:flex;
  justify-content:center;
  gap:65px;
  border-bottom:1px solid var(--line);
  padding:25px 5%;
  font:italic 18px var(--serif);
  color:var(--green)}
.section {
  max-width:1260px;
  margin:0 auto;
  padding:100px 6%}
.split {
  display:grid;
  grid-template-columns:1fr 1.1fr;
  gap:9%;
  align-items:center}
.section-copy>p:not(.eyebrow) {
  max-width:430px;
  font-size:15px;
  color:var(--muted)}
.location {
  border-left:2px solid var(--gold);
  padding-left:15px;
  margin-top:30px}
.media {
  position:relative;
  aspect-ratio:4/3;
  background:#dce3da;
  overflow:hidden;
  display:grid;
  place-items:center}
.media:before {
  content:'';
  position:absolute;
  inset:15%;
  border:1px solid #aebcaf}
.media img {
  position:absolute;
  width:100%;
  height:100%;
  object-fit:cover;
  inset:0}
.media.has-image:before,.media.has-image .image-fallback {
  display:none}
.image-fallback {
  text-align:center;
  font:22px var(--serif);
  color:#536b59;
  padding:20px}
.image-fallback span {
  display:block;
  font:11px var(--sans);
  margin-top:10px}
.cabin-image {
  aspect-ratio:4/5}
.view-section {
  position:relative;
  min-height:560px;
  display:flex;
  align-items:center;
  background:var(--navy);
  color:white;
  isolation:isolate}
.view-image {
  position:absolute;
  inset:0;
  z-index:-2;
  aspect-ratio:auto}
.view-image:after {
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,rgba(13,33,39,.72),rgba(13,33,39,.07))}
.view-copy {
  padding:85px 7%;
  width:100%;
  max-width:1440px;
  margin:auto}
.view-copy h2 em {
  color:#e9d5a4}
.view-copy p:last-child {
  max-width:370px;
  font-size:15px}
.section-heading {
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:10%;
  align-items:end;
  margin-bottom:45px}
.section-heading>p,.section-heading>div>p {
  font-size:15px;
  color:var(--muted)}
.section-heading h2 {
  margin-bottom:0}
.gallery {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:26px}
.gallery figure {
  margin:0;
  min-width:0}
.gallery-open {
  border:0;
  background:none;
  padding:0;
  width:100%;
  text-align:left;
  color:inherit}
.gallery .media {
  aspect-ratio:4/3}
.gallery-open:not(:disabled):hover img {
  transform:scale(1.025)}
.gallery img {
  transition:transform .25s}
.gallery figcaption {
  display:flex;
  gap:17px;
  padding-top:22px}
.step {
  font-size:11px;
  color:var(--green);
  padding-top:4px}
.gallery h3 {
  font-size:24px;
  margin-bottom:10px}
.gallery p {
  font-size:13px;
  color:var(--muted);
  margin:0}
.journey-note {
  margin-top:40px;
  font-size:14px;
  color:var(--muted)}
.explore-teaser {
  background:#e8ecdf}
.explore-teaser .section {
  padding-top:80px;
  padding-bottom:60px}
.explore-teaser .section-heading {
  align-items:start}
.category-list {
  padding:30px 0 0;
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  gap:20px 30px;
  border-top:1px solid #c2cbbb;
  font-size:12px}
.category-list li:before {
  content:'↗';
  margin-right:12px;
  color:var(--green)}
.contact {
  text-align:center;
  max-width:900px}
.contact .actions {
  justify-content:center}
.contact>p:not(.eyebrow) {
  color:var(--muted);
  font-size:15px}
.site-footer {
  padding:45px 6% 25px;
  background:var(--navy);
  color:#f0f2ea}
.footer-top,.footer-bottom {
  display:flex;
  justify-content:space-between;
  gap:30px;
  align-items:center;
  max-width:1120px;
  margin:auto}
.footer-top {
  padding-bottom:30px}
.footer-brand {
  font:28px var(--serif)}
.footer-top p {
  font-size:12px;
  margin:0}
.footer-bottom {
  border-top:1px solid #ffffff30;
  padding-top:25px;
  font-size:11px}
.footer-bottom p {
  margin:0}
.footer-bottom nav {
  display:flex;
  gap:25px;
  flex-wrap:wrap}
.footer-bottom a {
  padding:8px 0}
dialog {
  padding:50px 24px 20px;
  max-width:94vw;
  width:1100px;
  max-height:94svh;
  background:var(--cream);
  border:0;
  color:var(--ink)}
dialog::backdrop {
  background:#071d28dc}
dialog img {
  width:100%;
  height:auto;
  max-height:72svh;
  object-fit:contain}
dialog p {
  margin:14px 0 0;
  text-align:center}
.dialog-close {
  position:absolute;
  top:9px;
  right:16px;
  background:none;
  border:0;
  min-height:36px;
  color:var(--navy)}
.modal-open {
  overflow:hidden}
.page-heading {
  padding-top:80px;
  padding-bottom:35px}
.page-heading>p:not(.eyebrow) {
  max-width:600px}
.page-heading h1 {
  margin-bottom:30px}
.notice {
  border-left:2px solid var(--gold);
  padding:12px 18px;
  background:#eaeadd;
  font-size:14px}
.guide {
  padding-top:30px;
  padding-bottom:40px}
.guide-toolbar {
  display:flex;
  justify-content:space-between;
  gap:25px;
  align-items:center;
  border-bottom:1px solid var(--line);
  padding-bottom:25px;
  margin-bottom:30px}
.guide-toolbar h2 {
  font-size:28px;
  margin:0}
.tabs {
  display:flex;
  border:1px solid var(--line);
  padding:4px;
  flex-shrink:0}
.tabs button,.filters button {
  min-height:44px;
  background:none;
  border:0;
  padding:9px 20px;
  color:var(--navy);
  font-size:13px}
.tabs button[aria-selected=true] {
  background:var(--navy);
  color:white}
.filters {
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin:20px 0}
.filters button {
  border:1px solid var(--line);
  border-radius:2px}
.filters button[aria-pressed=true] {
  background:var(--green);
  color:white;
  border-color:var(--green)}
#results-count {
  font-size:12px;
  color:var(--muted);
  margin:22px 0}
.places-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:25px}
.place-card {
  background:#fffdf7;
  min-width:0}
.place-copy {
  padding:24px}
.place-copy .eyebrow {
  color:var(--green);
  font-size:10px;
  margin-bottom:16px}
.place-copy h3 {
  font-size:26px}
.place-copy p {
  font-size:14px}
.place-copy .badge {
  display:inline-block;
  background:#eee7d5;
  padding:3px 9px;
  font-size:11px}
.place-copy details {
  font-size:13px;
  margin-bottom:20px}
.place-copy summary {
  cursor:pointer;
  padding:8px 0}
.small {
  font-size:12px!important;
  color:var(--muted)}
.map-placeholder {
  padding:65px 25px;
  text-align:center;
  background:#e8ecdf}
.map-placeholder h3 {
  font-size:32px}
.map-placeholder .text-link {
  margin-left:20px}
.map-placeholder .button {
  margin-bottom:10px}
iframe {
  width:100%;
  border:0;
  display:block;
  min-height:400px}
.empty-state {
  grid-column:1/-1;
  padding:50px 25px;
  background:#e8ecdf;
  text-align:center}
.guide-bottom {
  padding-top:30px;
  padding-bottom:75px}
.stay-placeholder {
  min-height:60svh;
  padding-top:90px}
.travel-time {
  font-weight:600}

/* Desktop Hero: softer shading behind the text; preserve the sunrise elsewhere. */
@media(min-width:821px) {
  .hero-image:after {
    background:linear-gradient(90deg,rgba(10,30,35,.50),rgba(10,30,35,.30) 35%,transparent 72%);
  }
}

@media(min-width:1450px) {
  .hero {
  min-height:800px}
}

@media(max-width:1000px) {
  .brand img {
  width:65px}
.brand>span {
  font-size:22px}
.site-header nav {
  gap:18px}
.split {
  gap:5%}
.section {
  padding:75px 5%}
.gallery {
  gap:17px}
.intro-strip {
  gap:25px}
}

@media(max-width:820px) {
  .header-inner {
  min-height:82px;
  padding:8px 5%;
  flex-wrap:wrap;
  gap:0}
.brand img {
  width:62px;
  height:58px}
.brand>span {
  font-size:22px}
.js .menu-toggle {
  display:block}
.site-header nav {
  width:100%;
  flex-direction:column;
  gap:0;
  padding:12px 0}
.js .site-header nav {
  display:none}
.js .site-header nav.is-open {
  display:flex}
.site-header nav a {
  padding:12px 8px}
.hero {
  min-height:680px}
.hero-content {
  padding:75px 7% 100px}
.hero h1 {
  font-size:clamp(2.8rem,7.5vw,4.7rem)}
.hero-image img {
  object-position:60% center}
.intro-strip {
  gap:12px;
  justify-content:space-around;
  font-size:15px}
.split {
  grid-template-columns:1fr 1fr;
  gap:6%}
.section-copy>p:not(.eyebrow) {
  font-size:14px}
.section-heading {
  gap:5%}
.gallery {
  gap:15px}
.gallery h3 {
  font-size:21px}
.gallery figcaption {
  gap:8px}
.places-grid {
  grid-template-columns:repeat(2,minmax(0,1fr))}
.footer-top {
  align-items:flex-start}
}

@media(max-width:600px) {
  .section {
  padding:60px 7%}
h2 {
  font-size:2.7rem}
.hero {
  min-height:660px}
.hero-content {
  padding-top:60px}
.hero h1 {
  font-size:2.9rem}
.hero-intro {
  font-size:14px;
  max-width:330px}
.hero .actions {
  align-items:flex-start;
  gap:14px;
  flex-direction:column}
.hero-bottom {
  font-size:9px;
  gap:12px}
.intro-strip {
  padding:21px 7%;
  flex-wrap:wrap;
  gap:7px 16px;
  font-size:15px}
.split {
  grid-template-columns:1fr;
  gap:35px}
.cabin-image {
  aspect-ratio:4/3}
.view-section {
  min-height:490px}
.view-copy {
  padding:70px 7%}
.view-copy h2 {
  font-size:2.7rem}
.view-copy p:last-child {
  max-width:300px}
.section-heading {
  grid-template-columns:1fr;
  gap:26px;
  margin-bottom:32px}
.gallery {
  grid-template-columns:1fr;
  gap:32px}
.gallery figcaption {
  gap:15px;
  padding-top:16px}
.gallery h3 {
  font-size:26px}
.gallery p {
  font-size:14px}
.journey-note {
  margin-bottom:0}
.category-list {
  flex-direction:column;
  gap:15px}
.contact .actions {
  flex-direction:column;
  gap:15px}
.footer-top,.footer-bottom {
  flex-direction:column;
  gap:20px;
  align-items:flex-start}
.footer-brand {
  font-size:26px}
.site-footer {
  padding:40px 7% 30px}
.footer-bottom nav {
  gap:22px}
.page-heading {
  padding-bottom:15px}
.page-heading h1 {
  font-size:3.2rem}
.guide {
  padding-top:20px}
.guide-toolbar {
  flex-direction:column;
  align-items:flex-start;
  gap:20px}
.guide-toolbar h2 {
  font-size:27px}
.filters {
  gap:7px}
.filters button {
  padding:8px 14px}
.places-grid {
  grid-template-columns:1fr}
.map-placeholder {
  padding:40px 18px}
.map-placeholder .text-link {
  margin-left:0}
.stay-placeholder h1 {
  font-size:2.7rem}
}

@media(prefers-reduced-motion:reduce) {
  html {
  scroll-behavior:auto}
*,*::before,*::after {
  transition:none!important;
  animation:none!important}
}


.pending-image {
  opacity:0!important}

/* Mobile Hero: unobstructed photograph above a content-sized cream panel. */
@media (max-width:760px) {
  .hero {
    display:block;
    height:auto;
    min-height:0;
    background:var(--cream);
    color:var(--ink);
  }
  .hero-image {
    position:relative!important;
    inset:auto;
    z-index:auto;
    width:100%;
    height:clamp(260px,38svh,360px);
    min-height:260px;
    max-height:360px;
    background-image:url('/images/hero-fjord.jpg');
    background-size:cover;
    background-position:25% 55%;
    background-repeat:no-repeat;
  }
  .hero-image:after {
    display:none;
  }
  .hero-image img {
    /* Keep the existing accessible image; the background controls mobile cropping. */
    opacity:0;
  }
  .hero-content {
    margin:0;
    padding:32px 7% 40px;
    background:var(--cream);
  }
  .hero-content .eyebrow {
    margin-bottom:20px;
  }
  .hero h1 {
    font-size:42px;
    line-height:1.02;
    margin-bottom:24px;
  }
  .hero h1 em {
    color:#e9d5a4;
    font-style:italic;
  }
  .hero-intro {
    max-width:460px;
    color:var(--muted);
    font-size:15px;
  }
  .hero .actions {
    flex-direction:column;
    align-items:stretch;
    gap:14px;
    max-width:360px;
    margin-top:26px;
  }
  .hero .actions a {
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:48px;
    padding:12px 20px;
  }
  .hero .button.light {
    background:var(--navy);
    border-color:var(--navy);
    color:var(--cream);
  }
  .hero .button.light:hover {
    background:#31535d;
  }
  .hero .hero-link {
    color:var(--navy);
    border:1px solid var(--gold);
  }
  .hero-bottom {
    display:none;
  }
}