/* dodoLaLodge 2026 - site stylesheet
   Lives at assets/dodo/site.css. Colours are the tokens on :root (light) and [data-theme="dark"]. */
:root {
  --sand: #F6F3E9;
  --seafoam: #EFE6D2;
  --aqua: #B0592A;
  --aqua-deep: #8A4E22;
  --coral: #A8552A;
  --sun: #EFC94C;
  --ink: #4A3C31;
  --ink-soft: #6B5D51;
  --paper: #FFFDF7;
  --line: rgba(74,60,49,0.14);
  --on-accent: #FFFDF7;
  --nav-glass: rgba(255, 253, 247, 0.86);
  --radius-photo: 4px;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  box-sizing: border-box;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --sand: #221B14;
    --seafoam: #1B150F;
    --paper: #2B2219;
    --ink: #F2E8D8;
    --ink-soft: #C2AF9B;
    --line: rgba(242,232,216,0.14);
    --aqua: #E8A055;
    --aqua-deep: #F0AE66;
    --coral: #D9853A;
    --on-accent: #241B12;
    --nav-glass: rgba(43, 34, 25, 0.78);
  }
}
:root[data-theme="dark"] {
  --sand: #221B14;
  --seafoam: #1B150F;
  --paper: #2B2219;
  --ink: #F2E8D8;
  --ink-soft: #C2AF9B;
  --line: rgba(242,232,216,0.14);
  --aqua: #E8A055;
  --aqua-deep: #F0AE66;
  --coral: #D9853A;
  --on-accent: #241B12;
  --nav-glass: rgba(43, 34, 25, 0.78);
}
* { box-sizing: border-box; }
a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 2px solid var(--aqua-deep);
  outline-offset: 3px;
  border-radius: 4px;
}
.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--paper); color: var(--ink); padding: 12px 20px;
  z-index: 100; border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }
/* --nav-h is measured by site.js so anchor links never land under the sticky nav */
html { scroll-padding-top: calc(var(--nav-h, 86px) + env(safe-area-inset-top, 0px)); scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--sand);
  color: var(--ink);
  font-family: 'Karla', sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  transition: background-color .4s ease, color .4s ease;
}
section, .facilities-band, .faq-band, .postcard, .facility-item, .about-photo, .room-photo .photo,
.btn-primary, .btn-ghost, .lang-pill button, .theme-icon-btn, .thumb-row button {
  transition: background-color .4s ease, border-color .4s ease, box-shadow .4s ease, color .4s ease;
}
h1, h2, h3, .display {
  font-family: 'Newsreader', serif;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.01em;
  margin: 0;
}
img, svg { max-width: 100%; display: block; }
/* Page width and side padding. The bar below uses the same two numbers, so the logo
   lines up with the left edge of every section. */
.wrap { max-width: 1320px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 66px); }
a { color: inherit; }

.nav-bar {
  position: sticky; top: 0; z-index: 50;
  background: var(--nav-glass);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  box-shadow: 0 1px 0 rgba(74,50,30,0.08), 0 12px 24px -16px rgba(74,50,30,0.18);
  transition: transform .32s ease, box-shadow .25s ease, background-color .4s ease;
}
/* The bar slides out of the way while someone scrolls down and comes back when they
   scroll up. site.js adds and removes this class. */
.nav-bar.nav-hidden { transform: translateY(-100%); box-shadow: none; }
nav {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px clamp(20px, 5vw, 20px);
  max-width: 1320px; margin: 0 auto;
}
/* The two logos are stacked on top of each other and cross-fade when the theme changes,
   at the same speed as the page background. */
.wordmark-wrap { position: relative; display: block; flex: 0 0 auto; }
.wordmark { display: block; height: 70px; width: auto; transition: opacity .4s ease; }
.wordmark-dark { position: absolute; top: 0; left: 0; opacity: 0; }
[data-theme="dark"] .wordmark-light { opacity: 0; }
[data-theme="dark"] .wordmark-dark { opacity: 1; }
.navlinks { display: flex; gap: 30px; font-size: 15px; list-style: none; padding: 0; margin: 0; }
.navlinks a { text-decoration: none; border-bottom: 1px solid transparent; padding-bottom: 2px; transition: border-color .2s ease; }
.navlinks a:hover { border-color: currentColor; }
/* ---------- language pill (single-click, two labels) ---------- */
.lang-pill {
  display: inline-flex; align-items: center;
  background: var(--seafoam); border-radius: 20px; padding: 3px; gap: 2px;
  font-family: 'Karla', sans-serif;
}
.lang-pill button {
  border: none; background: none; cursor: pointer; font: inherit;
  font-size: 12.5px; font-weight: 700; padding: 6px 13px; border-radius: 16px;
  color: var(--ink-soft); transition: color .2s ease, background-color .2s ease;
}
.lang-pill button[aria-current="true"] {
  background: var(--paper); color: var(--ink); box-shadow: 0 1px 3px rgba(74,50,30,.12);
}
.lang-pill button:not([aria-current="true"]):hover { color: var(--ink); }

/* ---------- theme icon button (single-click, swaps sun/moon glyph) ---------- */
.theme-icon-btn {
  width: 38px; height: 38px; border-radius: 50%;
  border: 1.5px solid var(--line); background: var(--paper); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--coral); transition: border-color .2s ease, transform .2s ease, background-color .4s ease;
  flex: 0 0 auto;
}
.theme-icon-btn:hover { border-color: var(--coral); }
.theme-icon-btn:active { transform: scale(.92); }
.theme-icon-btn svg { width: 18px; height: 18px; }
.theme-icon-btn .moon-icon { display: none; }
[data-theme="dark"] .theme-icon-btn .sun-icon { display: none; }
[data-theme="dark"] .theme-icon-btn .moon-icon { display: block; }

.nav-controls { display: flex; align-items: center; gap: 14px; }

/* ---------- phone menu (hamburger) ----------
   From 720px down, the four nav links leave the bar and become a panel that rolls
   down from it when the round menu button is tapped. Above 720px nothing changes. */
.nav-toggle { display: none; }
@media (max-width: 720px) {
  .nav-controls { gap: 8px; }
  .nav-toggle {
    display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
    width: 38px; height: 38px; padding: 0; border-radius: 50%;
    border: 1.5px solid var(--line); background: var(--paper); color: var(--coral); cursor: pointer;
    transition: border-color .2s ease, transform .2s ease, background-color .4s ease;
  }
  .nav-toggle:hover { border-color: var(--coral); }
  .nav-toggle:active { transform: scale(.92); }
  .nav-toggle svg { width: 18px; height: 18px; overflow: visible; }
  .nav-toggle .bar { transform-box: fill-box; transform-origin: center; transition: transform .25s ease, opacity .2s ease; }
  .nav-open .nav-toggle .bar-top { transform: translateY(5px) rotate(45deg); }
  .nav-open .nav-toggle .bar-mid { opacity: 0; }
  .nav-open .nav-toggle .bar-bot { transform: translateY(-5px) rotate(-45deg); }

  /* The panel is the "tide": it rolls down from under the bar in the sand colour of the
     Facilities band, with the same wave along its bottom edge as the section dividers.
     It is clipped at the bar's lower edge while it moves, so it never shows through the bar. */
  .navlinks {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; gap: 0;
    padding: 10px clamp(20px, 5vw, 56px) 14px;
    background: var(--seafoam);
    filter: drop-shadow(0 14px 14px rgba(74,50,30,0.16));
    transform: translateY(calc(-100% - 46px));
    clip-path: inset(calc(100% + 46px) 0 -70px 0);
    visibility: hidden;
    transition: transform .4s cubic-bezier(.5,0,.75,.3), clip-path .4s cubic-bezier(.5,0,.75,.3),
                visibility 0s linear .4s, background-color .4s ease;
  }
  .nav-open .navlinks {
    transform: none; clip-path: inset(0 0 -70px 0); visibility: visible;
    transition: transform .7s cubic-bezier(.16,.84,.3,1), clip-path .7s cubic-bezier(.16,.84,.3,1),
                visibility 0s, background-color .4s ease;
  }
  /* the wave edge: a strip twice the panel's width that drifts sideways once as the panel lands */
  .navlinks::after {
    content: ''; position: absolute; left: 0; top: calc(100% - 1px); width: 200%; height: 34px;
    background: var(--seafoam);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2400 44' preserveAspectRatio='none'%3E%3Cpath d='M0,0 L2400,0 L2400,22 C2250,0 2050,44 1800,22 C1550,0 1350,44 1200,22 C1050,0 850,44 600,22 C350,0 150,44 0,22 Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2400 44' preserveAspectRatio='none'%3E%3Cpath d='M0,0 L2400,0 L2400,22 C2250,0 2050,44 1800,22 C1550,0 1350,44 1200,22 C1050,0 850,44 600,22 C350,0 150,44 0,22 Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
    transform: translateX(-50%);
    transition: transform .4s ease, background-color .4s ease;
  }
  .nav-open .navlinks::after { transform: translateX(0); transition: transform 1.6s cubic-bezier(.2,.7,.2,1), background-color .4s ease; }
  .navlinks a {
    display: block; padding: 11px 0; border-bottom: none;
    font-family: 'Newsreader', serif; font-weight: 500; font-size: 25px; letter-spacing: -0.005em;
    transition: color .2s ease;
  }
  .navlinks a:hover { color: var(--coral); }
  /* the links fade in one after another once the panel is on its way */
  .navlinks li { opacity: 0; transition: opacity .15s ease; }
  .nav-open .navlinks li { opacity: 1; transition: opacity .5s ease; }
  .nav-open .navlinks li:nth-child(1) { transition-delay: .26s; }
  .nav-open .navlinks li:nth-child(2) { transition-delay: .32s; }
  .nav-open .navlinks li:nth-child(3) { transition-delay: .38s; }
  .nav-open .navlinks li:nth-child(4) { transition-delay: .44s; }
}
/* Narrow phones: the logo steps down so the three buttons still fit beside it. */
@media (max-width: 385px) { .wordmark { height: 56px; } }
@media (max-width: 345px) {
  .wordmark { height: 46px; }
  .nav-controls { gap: 6px; }
  .lang-pill button { padding: 6px 10px; }
}

/* ---------- hero ---------- */
.hero {
  display: grid; grid-template-columns: 0.86fr 1.14fr; gap: 40px; align-items: center;
  padding-top: 48px; padding-bottom: 60px;
}
@media (max-width: 860px) { .hero { grid-template-columns: 1fr; } }
.hero .place { font-size: 15px; color: var(--aqua-deep); font-weight: 600; margin-bottom: 24px; }
.hero h1 { font-size: clamp(38px, 5.2vw, 56px); line-height: 1.05; max-width: 11ch; }
.hero h1 em { font-style: italic; color: var(--coral); }
.hero p.lede { font-size: 18px; color: var(--ink-soft); max-width: 46ch; margin-top: 20px; }
.hero p.lede + p.lede { margin-top: 14px; }
.hero-ctas { display: flex; gap: 14px; margin-top: 30px; flex-wrap: wrap; }
.btn-primary {
  background: var(--aqua-deep); color: var(--on-accent); text-decoration: none;
  padding: 14px 26px; border-radius: 30px; font-weight: 600; font-size: 15px;
  transition: transform .2s ease, box-shadow .2s ease;
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 20px rgba(169,97,43,0.28); }
.btn-ghost {
  background: var(--aqua-deep); color: var(--on-accent); text-decoration: none;
  padding: 14px 22px; border-radius: 30px; font-weight: 600; font-size: 15px;
  border: none; transition: transform .2s ease, box-shadow .2s ease;
}
.btn-ghost:hover { transform: translateY(-2px); box-shadow: 0 10px 20px rgba(169,97,43,0.28); }

/* ---------- hero gallery (swappable) ---------- */
.gallery-wrap { position: relative; }
.gallery-stage {
  position: relative;
  aspect-ratio: 5 / 4.1;
  border-radius: var(--radius-photo);
  border: 7px solid var(--paper);
  box-shadow: 0 20px 40px rgba(74,50,30,0.16);
  overflow: hidden;
}
.gallery-slide {
  position: absolute; inset: 0; opacity: 0;
  transform: scale(1.04);
  transition: opacity 1s ease, transform 1.4s ease;
}
.gallery-slide.active { opacity: 1; transform: scale(1); z-index: 2; }
.gallery-slide .swatch { width: 100%; height: 100%; }
img.swatch { width: 100%; height: 100%; object-fit: cover; display: block; }
/* For a portrait photo in the landscape carousel frame: show the lower part of the
   photo instead of the middle. The second number is how far down (0% top, 100% bottom). */
img.swatch.focus-low { object-position: 50% 80%; }
.gallery-slide figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; margin: 0;
  padding: 34px 18px 14px; font-size: 12.5px; font-style: italic;
  color: #FBF6EC;
  background: linear-gradient(to top, rgba(15,12,8,0.72) 0%, rgba(15,12,8,0.38) 60%, transparent 100%);
}
.gallery-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 38px; height: 38px; border-radius: 50%; border: none;
  background: rgba(255,255,255,0.9); color: #3A2C22;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  z-index: 3; transition: background .2s ease, transform .2s ease;
}
.gallery-arrow:hover { background: #fff; transform: translateY(-50%) scale(1.08); }
.gallery-arrow.prev { left: 12px; } .gallery-arrow.next { right: 12px; }
.gallery-dots { display: flex; gap: 8px; justify-content: center; margin-top: 16px; }
.gallery-dots button {
  width: 8px; height: 8px; border-radius: 50%; border: none;
  background: var(--line); cursor: pointer; padding: 0; transition: background .2s ease, width .2s ease;
}
.gallery-dots button.active { background: var(--coral); width: 22px; border-radius: 6px; }
/* Wave dividers: one sits at every change of background colour.
   .wave-seafoam        sand above, seafoam below (goes right before a seafoam band)
   .wave-sand-on-seafoam  seafoam above, sand below (goes right after a seafoam band) */
.wave { display: block; width: 100%; height: 44px; margin-top: -1px; }
.wave, .wave path { transition: fill .4s ease, background-color .4s ease; }
.wave-seafoam path { fill: var(--seafoam); }
.wave-sand-on-seafoam { background: var(--seafoam); }
.wave-sand-on-seafoam path { fill: var(--sand); }

section { padding: 64px 0; }
.about-section { padding-top: 20px; }  /* "Around the lodge" sits closer to the hero */
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; margin-bottom: 34px; flex-wrap: wrap; }
.section-head h2 { font-size: clamp(26px, 3.4vw, 38px); }
.section-head p { color: var(--ink-soft); max-width: 40ch; margin: 8px 0 0; }
.section-head.wide p { max-width: none; }
.section-head.wide p + p { margin-top: 14px; }
.section-head.flush { margin-bottom: 0; }
/* Staggered intro ("Around the lodge"): first paragraph on the left, second pushed to
   the right. Same plain text style for both, and both stop short of the full width. */
.section-head.stagger > div { width: 100%; }
.section-head.stagger p { max-width: min(100%, 620px); margin-top: 14px; }
.section-head.stagger p + p { margin: 26px 0 0 auto; }
@media (max-width: 760px) {
  .section-head.stagger p { max-width: none; }
  .section-head.stagger p + p { margin: 14px 0 0; }
}

.facilities-band { background: var(--seafoam); }
.about-grid {
  display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 0px;
}
.about-photo {
  border-radius: 10px; overflow: hidden; position: relative;
  box-shadow: 0 10px 26px rgba(74,50,30,0.12);
}
.about-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.about-photo.reception { grid-column: 1; grid-row: 1; aspect-ratio: 4 / 3; }
.about-photo.parking { grid-column: 1; grid-row: 2; aspect-ratio: 4 / 3; }
.about-photo.door { grid-column: 2; grid-row: 1 / span 2; }
.about-photo.kitchen { grid-column: 3; grid-row: 1; aspect-ratio: 4 / 3; }
.about-photo.flower { grid-column: 3; grid-row: 2; aspect-ratio: 4 / 3; }
@media (max-width: 760px) {
  .about-grid { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto auto; }
  .about-photo.door { grid-column: 1 / span 2; grid-row: 1; aspect-ratio: 3 / 4; }
  .about-photo.kitchen { grid-column: 1; grid-row: 2; }
  .about-photo.reception { grid-column: 2; grid-row: 2; }
  .about-photo.flower { grid-column: 1; grid-row: 3; }
  .about-photo.parking { grid-column: 2; grid-row: 3; }
}
.about-photo figcaption {
  position: absolute; bottom: 0; left: 0; right: 0; padding: 16px 18px 14px;
  font-size: 13.5px; color: #FBF6EC;
  background: linear-gradient(to top, rgba(20,15,10,0.62), transparent);
}
.facilities-list {
  display: grid; grid-template-columns: 1fr 1fr; column-gap: 48px;
}
.facility-item {
  display: flex; gap: 16px; padding: 22px 0; border-bottom: 1px dashed var(--line);
}
@media (min-width: 641px) { .facility-item:nth-last-child(-n+2) { border-bottom: none; } }
@media (max-width: 640px) {
  .facilities-list { grid-template-columns: 1fr; }
  .facility-item:last-child { border-bottom: none; }
}
.facility-item .icon {
  width: 26px; height: 26px; flex: 0 0 auto; margin-top: 2px; color: var(--aqua-deep);
  transition: color .2s ease;
}
.facility-item:hover .icon { color: var(--coral); }
.facility-item h3 { font-size: 16px; font-weight: 600; font-family: 'Karla', sans-serif; margin-bottom: 4px; }
.facility-item p { font-size: 14px; color: var(--ink-soft); margin: 0; }

.room-row {
  display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 68px; align-items: start;
  padding: 40px 0; border-bottom: 1px dashed var(--line);
}
.room-row:last-child { border-bottom: none; }
.room-row.reverse { grid-template-columns: 1.15fr 0.85fr; }
.room-row.reverse .room-copy { order: 2; } .room-row.reverse .room-photo { order: 1; }
@media (max-width: 760px) {
  .room-row, .room-row.reverse { grid-template-columns: 1fr; }
  .room-row.reverse .room-copy, .room-row.reverse .room-photo { order: initial; }
}
.room-photo { position: relative; }
.room-photo .photo {
  position: static; width: 100%; height: 280px; border-width: 0;
  border-radius: 10px; overflow: hidden;
  box-shadow: 0 10px 26px rgba(74,50,30,0.12);
}
.photo .swatch { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo img.swatch { transition: opacity .3s ease; }
/* Thumbnails sit centred under the main photo. On large screens the photo is 40px to the
   right of its column (the browser's default figure margin), so the row shifts with it. */
.thumb-row { display: flex; justify-content: center; gap: 8px; margin-top: 10px; position: relative; left: 40px; }
.thumb-row button {
  width: 52px; height: 40px; padding: 0; border-radius: 6px; overflow: hidden;
  border: 2px solid transparent; cursor: pointer; opacity: 0.6;
  transition: opacity .2s ease, border-color .2s ease;
}
.thumb-row button img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb-row button:hover { opacity: 0.85; }
.thumb-row button.active { opacity: 1; border-color: var(--coral); }
.room-copy h3 { font-size: 26px; margin-bottom: 6px; }
.room-copy p.desc { color: var(--ink-soft); margin-top: 0; margin-bottom: 16px; }
/* Everything under a room title sits 5px in from the title. */
.room-copy p.desc, .room-copy .room-highlight, .room-copy .room-feats { margin-left: 5px; }
.room-feats { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 20px; font-size: 14px; }
.room-feats + .room-feats { margin-top: 6px; }
.room-copy p.desc + p.desc { margin-top: -8px; }
.room-feats li { display: flex; gap: 8px; align-items: center; }
.room-feats li::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--aqua); flex: 0 0 auto; }
.room-highlight {
  display: inline-block; font-weight: 700; color: var(--coral); font-size: 13.5px;
  letter-spacing: 0.02em; margin-bottom: 12px;
}

.faq-band { background: var(--seafoam); }
.faq-list { max-width: 850px; }
details { border-bottom: 1px dashed var(--line); padding: 20px 0; }
details summary {
  list-style: none; cursor: pointer; display: flex; align-items: center;
  justify-content: space-between; gap: 20px; font-family: 'Newsreader', serif; font-weight: 500; font-size: 19px;
}
details summary::-webkit-details-marker { display: none; }
details summary .mark {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center; font-size: 15px; color: var(--aqua-deep);
  transition: transform 0.25s ease;
}
details[open] summary .mark { transform: rotate(45deg); }
.faq-q { display: flex; align-items: center; gap: 14px; }
.faq-icon { width: 26px; height: 26px; flex: 0 0 auto; color: var(--aqua-deep); }
details .faq-a { padding-top: 12px; color: var(--ink-soft); max-width: 80ch; }
details[open] .faq-a { animation: faqIn .35s ease; }
@keyframes faqIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }

.postcard {
  background: var(--paper); border: 1px solid var(--line); border-radius: 6px;
  padding: clamp(28px, 5vw, 56px); display: grid; grid-template-columns: 1fr auto; gap: 40px;
}
@media (max-width: 700px) { .postcard { grid-template-columns: 1fr; } }
.postcard-msg h2 { font-size: clamp(26px, 3.2vw, 36px); margin-bottom: 16px; }
.postcard-msg .contact-sub { color: var(--ink-soft); max-width: 60ch; }
.postcard-msg .lines { margin-top: 18px; display: flex; flex-direction: column; gap: 14px; }
.postcard-msg .line { display: flex; gap: 12px; font-size: 15px; align-items: flex-start; }
.postcard-msg .line .icon { width: 20px; height: 20px; color: var(--aqua-deep); flex: 0 0 auto; margin-top: 2px; }
.postcard-msg .line a, .faq-a a { text-decoration: none; border-bottom: 1px solid var(--line); transition: border-color .2s ease; }
.postcard-msg .line a:hover, .faq-a a:hover { border-color: currentColor; }
.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.postcard-stamp {
  width: 250px; display: flex; flex-direction: column; align-items: center; gap: 16px;
  border-left: 1px dashed var(--line); padding-left: 40px; justify-content: center;
}
@media (max-width: 700px) {
  .postcard-stamp { border-left: none; border-top: 1px dashed var(--line); padding-left: 0; padding-top: 24px; flex-direction: row; }
}
.stamp {
  width: 94px; height: 120px;
  border: 3px solid var(--paper); outline: 1px solid var(--line); position: relative;
  overflow: hidden;
}
.stamp img { width: 100%; height: 100%; object-fit: cover; display: block; }
.postmark {
  width: 84px; height: 64px; border-radius: 50%; border: 1.5px solid var(--ink-soft);
  display: flex; align-items: center; justify-content: center; text-align: center;
  font-size: 9px; line-height: 1.3; color: var(--ink-soft); font-family: 'Newsreader', serif;
  font-style: italic; opacity: 0.75;
}

/* Photo spacing. Browsers give every <figure> a default margin of 16px top/bottom and
   40px left/right, which is where the wide gaps between photos came from.
   "Around the lodge" mosaic: 8px around each photo on large screens (16px between photos).
   Phones: 5px around the mosaic photos and the room photos. */
.about-photo { margin: 8px; }
@media (max-width: 760px) {
  .about-photo, .room-photo .photo { margin: 5px; }
  .room-photo .photo { width: auto; }
  .thumb-row { left: 0; }
}

footer { padding: 30px 0 50px; text-align: center; font-size: 13px; color: var(--ink-soft); }
.footer-credit { margin-top: 6px; font-size: 12px; }  /* designer credit, same muted colour as the copyright line */

@media (prefers-reduced-motion: reduce) {
  .gallery-slide, .facility-item .icon, .btn-ghost, .btn-primary, .room-photo .photo, .photo img.swatch, details .faq-a { transition: none !important; animation: none !important; }
  body, section, .facilities-band, .faq-band, .postcard, .facility-item, .about-photo, .nav-bar,
  .lang-pill button, .thumb-row button, .theme-icon-btn, .wave, .wave path, .wordmark,
  .navlinks, .navlinks::after, .navlinks li, .nav-toggle, .nav-toggle .bar { transition: none !important; }
}