/* ===========================================================
   Meridian Fairways Travel
   Light throughout. Feature bands use .tint - a pale fairway wash -
   rather than a dark inversion. Every component reads the same
   tokens, so .tint restyles a whole section with no extra rules.
   Green (#1F5C46) is the golf reference and primary highlight;
   brass is kept only for prices and the 30-degree figure.
   =========================================================== */

:root {
  /* Page surface */
  --bg:      #F8F6F0;   /* warm chalk                                  */
  --surface: #EFEBE0;   /* raised panel                                */
  --rule:    #DDD7C8;   /* hairline                                    */
  --text:    #14180F;   /* primary   (16.6:1 on --bg)                  */
  --text-2:  #5C5F52;   /* secondary  (5.8:1 on --bg)                  */

  /* Green is the golf reference and the primary highlight. */
  --accent:  #1F5C46;   /* fairway green (7.4:1 on --bg)               */
  --accent-lt:#2F8562;  /* lighter green, hovers and fills             */
  --accent-2:#7C8674;   /* muted sage, structural marks                */
  --warm:    #7A6B18;   /* brass, kept for prices and the 30 degrees   */
  --hotel-red: #B23A2E; /* island-map hotel markers, distinct from the golf-green course dots */

  /* Type */
  --display: "Fraunces", Georgia, serif;
  --body:    "Archivo", system-ui, -apple-system, sans-serif;
  --mono:    "Azeret Mono", ui-monospace, "SFMono-Regular", monospace;

  /* Space scale - one ladder, used everywhere */
  --s1: .5rem;
  --s2: .85rem;
  --s3: 1.4rem;
  --s4: 2.2rem;
  --s5: clamp(2.4rem, 4vw, 3.4rem);
  --gutter: clamp(1.25rem, 5vw, 5rem);
  --band:   clamp(3.5rem, 7vw, 6.5rem);
  --maxw:   76rem;

  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* Tinted feature band - a pale fairway wash, not a dark inversion */
.tint {
  --bg:      #EDF2EA;
  --surface: #E2EAE0;
  --rule:    #CFDACB;
  background: var(--bg);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--body);
  font-size: 1rem;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3 { margin: 0; font-weight: 400; line-height: 1.06; }
p { margin: 0; }
ul, ol, dl { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

.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;
}

.skip {
  position: absolute; left: -999px; top: 0; z-index: 200;
  background: var(--accent); color: var(--bg);
  padding: .6rem 1rem; font-weight: 600;
}
.skip:focus { left: 0; }

/* coming-soon notice — every page, always visible, not dismissible */
.soon {
  display: flex; align-items: center; justify-content: center;
  padding: .7rem 1rem;
  background: var(--text); color: var(--bg);
  text-align: center;
}
.soon__text {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center;
  gap: .5rem .6rem;
  font-size: .84rem;
  max-width: 60rem;
}
.soon__badge {
  font-family: var(--mono); font-size: .62rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--warm);
  border: 1px solid currentColor; border-radius: 2px;
  padding: .15rem .45rem;
}
.soon .ilink { color: var(--bg); }
.soon .ilink:hover { color: var(--warm); }

/* --- shared -------------------------------------------------- */

.eyebrow {
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--s2);
}

.btn {
  display: inline-block;
  padding: .85rem 1.6rem;
  font-family: var(--body);
  font-size: .85rem;
  font-weight: 600;
  letter-spacing: .03em;
  border-radius: 999px;
  border: 1px solid transparent;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .22s var(--ease), color .22s var(--ease),
              border-color .22s var(--ease), transform .22s var(--ease);
}
.btn--solid { background: var(--accent); color: var(--bg); }
.btn--solid:hover { background: var(--text); transform: translateY(-2px); }
.btn--ghost { border-color: var(--rule); color: var(--text); }
.btn--ghost:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-2px); }

.section {
  max-width: var(--maxw);
  margin-inline: auto;
  padding: var(--band) var(--gutter);
}
/* A tinted band bleeds full width; its inner content keeps the measure. */
.bandwrap { background: var(--bg); }
.bandwrap > .section { background: transparent; }

.h-lg, .h-md {
  font-family: var(--display);
  letter-spacing: -.02em;
}
.h-lg {
  font-variation-settings: "opsz" 100, "wght" 350, "SOFT" 30, "WONK" 1;
  font-size: clamp(1.9rem, 4.2vw, 3.1rem);
  margin-bottom: var(--s3);
  max-width: 22ch;
}
.h-md {
  font-variation-settings: "opsz" 60, "wght" 420, "SOFT" 20, "WONK" 1;
  font-size: clamp(1.25rem, 2.2vw, 1.6rem);
}

.lede { max-width: 54ch; color: var(--text-2); font-size: clamp(1rem, 1.4vw, 1.1rem); }
.note { color: var(--text-2); font-size: .93rem; max-width: 62ch; }

/* Vertical rhythm. Blocks that follow a heading or a note get one
   consistent gap instead of per-instance inline margins. */
.h-lg + .note,
.h-lg + .lede { margin-top: calc(var(--s3) * -0.35); }

.note + .panels,  .note + .trips,
.note + .inc,     .note + .gallery, .note + .sched,
.note + .ptable,  .note + .facts,   .note + .twocol,
.note + .navcards { margin-top: var(--s5); }

.h-lg + .panels,  .h-lg + .trips,   .h-lg + .sched,
.h-lg + .inc,     .h-lg + .gallery, .h-lg + .ptable,
.h-lg + .navcards,.h-lg + .facts,   .h-lg + .twocol { margin-top: var(--s4); }

.lede + .panels,  .lede + .trips,   .lede + .facts { margin-top: var(--s5); }

.ilink {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: .18em;
  text-decoration-thickness: 1px;
  transition: color .2s var(--ease);
}
.ilink:hover { color: var(--text); }

.num { font-family: var(--mono); color: var(--accent); }

/* --- nav ----------------------------------------------------- */

/* Banner + nav stick together as one block — sticking .nav alone would let
   it cover the banner the moment the page scrolls, so the banner would
   only ever be visible before the first scroll. */
.topstack { position: sticky; top: 0; z-index: 100; }

.nav {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1.1rem;
  padding: .7rem var(--gutter) 1rem;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--rule);
}
.nav__mark {
  order: 1;
  display: flex; align-items: center; gap: .55rem;
  font-family: var(--display);
  font-variation-settings: "opsz" 30, "wght" 520, "SOFT" 20, "WONK" 1;
  font-size: 1.04rem;
  white-space: nowrap;
}
.nav__rule { width: 1px; height: 1.05em; background: var(--accent); }
.nav__mark-b { color: var(--text-2); }

.nav__links {
  order: 3;
  display: flex; gap: 1.15rem;
  font-size: .82rem;
  color: var(--text-2);
}
/* Nav labels must never wrap — German and Swedish run longer than English
   and were breaking across two lines in the bar. */
.nav__links a { white-space: nowrap; }
.nav__links a { transition: color .2s var(--ease); }
.nav__links a:hover,
.nav__links a[aria-current="page"] { color: var(--text); }

/* "Read more" nav dropdown — consolidates the lower-traffic content pages
   (gallery, reviews, blog, good-to-know) behind one hover menu instead of
   four separate top-level links, so the bar reads as fewer choices without
   actually removing any destination. Desktop only: on the mobile stacked
   menu the button is hidden and the menu is flattened inline instead,
   see the 900px query below. */
.navdrop { position: relative; display: flex; align-items: center; }
.navdrop__btn {
  font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0;
  cursor: pointer; display: inline-flex; align-items: center; gap: .32rem;
  white-space: nowrap; transition: color .2s var(--ease);
}
.navdrop__btn:hover { color: var(--text); }
.navdrop__caret {
  width: 6px; height: 6px; flex: none;
  border-right: 1.4px solid currentColor; border-bottom: 1.4px solid currentColor;
  transform: rotate(45deg) translate(-1px, -2px);
  transition: transform .2s var(--ease);
}
.navdrop:hover .navdrop__caret, .navdrop:focus-within .navdrop__caret { transform: rotate(225deg) translate(-1px, 1px); }
.navdrop__menu {
  position: absolute; top: 100%; right: 0; margin-top: .85rem;
  display: flex; flex-direction: column; min-width: 11rem;
  background: var(--bg); border: 1px solid var(--rule); border-radius: 4px;
  box-shadow: 0 10px 28px rgba(20, 24, 15, .1);
  padding: .35rem;
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity .15s var(--ease), transform .15s var(--ease), visibility .15s;
  z-index: 120;
}
.navdrop:hover .navdrop__menu, .navdrop:focus-within .navdrop__menu { opacity: 1; visibility: visible; transform: translateY(0); }
.navdrop__menu a { padding: .55rem .65rem; border-radius: 3px; }
.navdrop__menu a:hover { background: var(--surface); color: var(--text); }

/* Same hover menu on the Boka CTA, so the booking-related pages (and the
   phone number) hang off the button that already means "book" instead of
   competing for room in the link list. The CTA itself stays a real link
   to boka.html — hovering reveals the shortcuts, clicking still books. */
/* Menus open left-aligned when their trigger sits early in the bar, so the
   panel does not hang off toward the page edge. */
#navlinks > .navdrop:first-child .navdrop__menu { left: 0; right: auto; }

/* The CTA leads the right-hand cluster: `margin-left: auto` lives here
   rather than on .nav__links, so the button and the links travel together
   as one group pushed to the right, with Boka first. It is a plain link
   straight to the enquiry form — no menu hanging off it. */
.nav__cta { order: 2; margin-left: auto; margin-right: .1rem; padding: .58rem 1.15rem; }

/* language + currency switchers — a distinct utility row of its own,
   above the wayfinding row, rather than crowded into the same line as
   the nav links. .switches sits after #navlinks in the HTML (so the
   mobile dropdown can show/hide them together, see the 900px media
   query below) — `order` puts it first visually regardless. */
.switches {
  order: 0;
  flex-basis: 100%;
  display: flex; align-items: center; justify-content: flex-end; gap: .9rem;
  padding-bottom: .55rem;
  margin-bottom: .1rem;
  border-bottom: 1px solid var(--rule);
}

.lang { display: flex; align-items: center; gap: .15rem; }
.lang__btn {
  display: flex; align-items: center; gap: .3rem;
  font-family: var(--mono);
  font-size: .58rem; letter-spacing: .08em; text-transform: uppercase;
  background: none; border: 1px solid transparent; cursor: pointer;
  color: var(--text-2);
  padding: .26rem .4rem;
  border-radius: 3px;
  transition: color .2s var(--ease), background-color .2s var(--ease), border-color .2s var(--ease);
}
/* Inline SVG, not emoji: Windows ships no colour flag glyphs, so
   regional-indicator emoji render as the bare letters "SE" / "GB". */
.flag {
  width: 16px; height: 10px; display: block; flex: 0 0 auto;
  border-radius: 1px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .12);
}
.lang__btn:hover { color: var(--text); background: var(--surface); }
.lang__btn[aria-pressed="true"] { color: var(--text); background: var(--surface); border-color: var(--accent); }

.cur { display: flex; align-items: center; gap: .05rem; padding-left: .9rem; border-left: 1px solid var(--rule); flex-wrap: nowrap; }
.cur__btn {
  font-family: var(--mono);
  font-size: .58rem; letter-spacing: .1em; text-transform: uppercase;
  background: none; border: 1px solid transparent; cursor: pointer;
  color: var(--text-2);
  padding: .3rem .42rem;
  border-radius: 3px;
  transition: color .2s var(--ease), background-color .2s var(--ease), border-color .2s var(--ease);
}
.cur__btn:hover { color: var(--text); background: var(--surface); }
.cur__btn[aria-pressed="true"] { color: var(--text); background: var(--surface); border-color: var(--accent); }

.money { white-space: nowrap; }

/* hamburger — the nav used to simply vanish below 900px */
.burger {
  display: none;
  margin-left: auto;
  width: 42px; height: 38px;
  background: none; border: 1px solid var(--rule); border-radius: 2px;
  cursor: pointer;
  align-items: center; justify-content: center;
  padding: 0;
}
.burger__bar { display: block; width: 17px; height: 1.5px; background: var(--text); position: relative; transition: background-color .2s var(--ease); }
.burger__bar::before, .burger__bar::after {
  content: ""; position: absolute; left: 0; width: 17px; height: 1.5px; background: var(--text);
  transition: transform .25s var(--ease), top .25s var(--ease);
}
.burger__bar::before { top: -6px; }
.burger__bar::after  { top: 6px; }
.burger[aria-expanded="true"] .burger__bar { background: transparent; }
.burger[aria-expanded="true"] .burger__bar::before { top: 0; transform: rotate(45deg); }
.burger[aria-expanded="true"] .burger__bar::after  { top: 0; transform: rotate(-45deg); }

@media (max-width: 900px) {
  .burger { display: flex; }
  .nav { flex-wrap: wrap; gap: .6rem; }

  /* While the menu is open the page behind it is frozen and the sticky
     header becomes the scroll container, so a menu taller than the screen
     scrolls itself. Without this the panel simply overflowed off-screen —
     sticky elements do not scroll their own overflow — and the page moved
     behind it instead. overscroll-behavior stops the scroll chaining back
     to the document when the menu reaches its end. Closing the menu drops
     the class and the page scrolls normally again. */
  html.nav-open, html.nav-open body { overflow: hidden; }
  html.nav-open .topstack {
    max-height: 100vh;
    max-height: 100dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  /* Collapsed bar holds only the mark, CTA and burger — language and
     currency used to sit here too as a permanent second row, which made
     the bar tall and busy before the menu was even opened. They now live
     inside the same dropdown as the page links instead (below).

     All three have to survive on ONE line at 360px: the wordmark, the
     button and the burger together were a few pixels too wide and the
     button wrapped onto a line of its own, which read as a broken header.
     The mark is allowed to shrink and the other two are held at their
     natural width so the button never gets pushed down. */
  .nav__mark { order: 1; min-width: 0; flex: 0 1 auto; font-size: .95rem; gap: .4rem; }
  .nav__cta  { order: 2; flex: none; margin-left: auto; margin-right: 0; font-size: .74rem; padding: .48rem .85rem; }
  .burger    { order: 3; flex: none; width: 38px; height: 34px; margin-left: .5rem; }

  /* Language and currency live in a permanent strip at the very top of the
     header, NOT inside the burger panel: changing currency is something a
     visitor does while reading a price, and it should never require opening
     a menu first. `order: 0` with `flex-basis: 100%` draws it as its own
     first row even though it follows #navlinks in the HTML — the source
     order is fixed by the sibling selector the desktop layout relies on.

     It is kept deliberately slim (one short line, hairline underneath)
     so the collapsed bar stays two compact rows rather than the tall
     two-block header this replaced. */
  .switches {
    order: 0;
    display: flex;
    flex-basis: 100%;
    width: 100%;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: .4rem;
    margin: 0 0 .15rem;
    padding: 0 0 .45rem;
    background: none;
    border: 0;
    border-bottom: 1px solid var(--rule);
    border-radius: 0;
  }
  .switches .lang { gap: .05rem; }
  .switches .cur {
    padding-left: .55rem; padding-top: 0;
    border-top: 0; border-left: 1px solid var(--rule);
    gap: 0;
  }
  .switches .lang__btn { padding: .22rem .28rem; gap: .25rem; }
  .switches .cur__btn { padding: .24rem .26rem; letter-spacing: .05em; }

  .nav__links {
    order: 5;
    display: none;
    width: 100%;
    flex-direction: column;
    gap: 0;
    margin-left: 0;
    border-top: 1px solid var(--rule);
    padding-top: .4rem;
  }
  .nav__links.is-open { display: flex; }
  .nav__links a {
    padding: .85rem .2rem;
    border-bottom: 1px solid var(--rule);
    font-size: 1rem;
  }
  .nav__links a:last-child { border-bottom: 0; }
  .nav__links a[aria-current="page"] { color: var(--accent); }

  /* Flatten the dropdown into the stacked list — hover has no equivalent
     on touch, so the trigger button is hidden and its menu just becomes
     part of the same vertical list of links. */
  .navdrop { display: block; width: 100%; }
  .navdrop__btn { display: none; }
  .navdrop__menu {
    position: static; opacity: 1; visibility: visible; transform: none;
    background: none; border: 0; box-shadow: none; padding: 0; margin-top: 0;
    min-width: 0;
  }
  .navdrop__menu a { padding: .85rem .2rem; border-bottom: 1px solid var(--rule); border-radius: 0; }
  .navdrop__menu a:last-child { border-bottom: 0; }

}

/* --- breadcrumbs / page hero --------------------------------- */

.crumbs {
  max-width: var(--maxw);
  margin-inline: auto;
  padding: 1.5rem var(--gutter) 0;
  font-family: var(--mono);
  font-size: .63rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-2);
  display: flex; flex-wrap: wrap; gap: .6rem;
}
.crumbs a:hover { color: var(--accent); }
.crumbs [aria-current="page"] { color: var(--accent); }

.phero {
  max-width: var(--maxw);
  margin-inline: auto;
  padding: clamp(2.2rem, 5vw, 4rem) var(--gutter) clamp(2rem, 4vw, 3rem);
  border-bottom: 1px solid var(--rule);
}
.phero__title {
  font-family: var(--display);
  font-variation-settings: "opsz" 144, "wght" 350, "SOFT" 30, "WONK" 1;
  font-size: clamp(2.1rem, 5.4vw, 4rem);
  letter-spacing: -.025em;
  margin-bottom: 1.1rem;
}

/* --- thank-you landing (tack.html) ------------------------------ */

.thanks {
  max-width: 34rem;
  margin-inline: auto;
  padding: clamp(4rem, 10vw, 7rem) var(--gutter);
  text-align: center;
}
.thanks__mark {
  width: 3.2rem; height: 3.2rem;
  margin: 0 auto 1.6rem;
  color: var(--accent);
}
.thanks__title {
  font-family: var(--display);
  font-variation-settings: "opsz" 144, "wght" 350, "SOFT" 30, "WONK" 1;
  font-size: clamp(2rem, 4.6vw, 2.8rem);
  letter-spacing: -.025em;
  margin-bottom: 1rem;
}
.thanks__lede { color: var(--text-2); font-size: clamp(1rem, 1.4vw, 1.1rem); margin-bottom: 2.2rem; }
.thanks__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .8rem; }

/* --- hero (tinted band) ---------------------------------------- */

.hero {
  position: relative;
  overflow: hidden;
  padding: clamp(3rem, 7vw, 6rem) var(--gutter) 0;
}
.hero__in { max-width: var(--maxw); margin-inline: auto; position: relative; z-index: 1; }
.hero__scene { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.hero__scene::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(100deg,
    var(--bg) 0%,
    color-mix(in srgb, var(--bg) 86%, transparent) 34%,
    transparent 64%);
}
.contour { width: 100%; height: 100%; display: block; }
.contour__lines path { fill: none; stroke: var(--accent); stroke-width: 1.15; opacity: .45; }
.contour__lines path:nth-child(n + 5) { stroke: var(--accent-2); opacity: .5; }
.contour__sun { fill: var(--warm); opacity: .14; }
.contour__meridian { stroke: var(--accent); stroke-width: 1; opacity: .4; stroke-dasharray: 4 7; }

.hero__body { max-width: 46rem; }

.hero__title {
  font-family: var(--display);
  font-size: clamp(2.3rem, 6.6vw, 5rem);
  font-variation-settings: "opsz" 144, "wght" 370, "SOFT" 30, "WONK" 1;
  letter-spacing: -.025em;
  margin-bottom: 1.4rem;
}
.hero__line { display: block; }
.hero__line--em {
  color: var(--accent);
  font-style: italic;
  font-variation-settings: "opsz" 144, "wght" 300, "SOFT" 60, "WONK" 1;
}
.hero__lede { max-width: 36rem; color: var(--text-2); font-size: clamp(1rem, 1.5vw, 1.1rem); margin-bottom: 2rem; }
.hero__actions { display: flex; flex-wrap: wrap; gap: .8rem; }

.hero__stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  margin-top: clamp(2.5rem, 6vw, 4.5rem);
  background: var(--rule);
  border-top: 1px solid var(--rule);
}
.stat { background: var(--bg); padding: 1.15rem 0 1.5rem; }
.stat dt {
  font-family: var(--mono);
  font-size: .63rem; letter-spacing: .15em; text-transform: uppercase;
  color: var(--text-2);
  margin-bottom: .45rem;
}
.stat dd {
  margin: 0;
  font-family: var(--display);
  font-variation-settings: "opsz" 60, "wght" 400, "SOFT" 20, "WONK" 0;
  font-size: clamp(1.4rem, 3.2vw, 2rem);
  line-height: 1;
}
.stat__unit { font-family: var(--mono); font-size: .6rem; color: var(--text-2); margin-left: .3rem; letter-spacing: .08em; }

@media (max-width: 620px) {
  .hero__stats { grid-template-columns: repeat(2, 1fr); }
}

/* --- prose grid ---------------------------------------------- */

.pgrid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  column-gap: clamp(2rem, 5vw, 4.5rem);
  row-gap: var(--s3);
  align-items: start;
}
/* The grid owns the spacing between the two columns, so the heading
   must not also carry a bottom margin - that was doubling the gap
   every time the layout stacked. */
.pgrid > .h-lg { margin-bottom: 0; }
.pgrid__body { color: var(--text-2); display: grid; gap: var(--s3); }
.pgrid__body p { max-width: 52ch; }
@media (max-width: 860px) { .pgrid { grid-template-columns: 1fr; } }

/* --- weather -------------------------------------------------- */

.weather { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; }
@media (max-width: 860px) { .weather { grid-template-columns: 1fr; } }

.weather__now {
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: clamp(1.3rem, 3vw, 2rem);
  background: var(--bg);
}
.weather__now-k {
  font-family: var(--mono);
  font-size: .62rem; letter-spacing: .13em; text-transform: uppercase;
  color: var(--text-2);
  margin-bottom: .8rem;
  display: flex; align-items: center; gap: .5rem;
}
.weather__dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent-2);
  flex: 0 0 auto;
}
.weather__now[data-live="1"] .weather__dot { background: var(--accent); animation: pulse 2.2s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.weather__temp {
  font-family: var(--display);
  font-variation-settings: "opsz" 144, "wght" 320, "SOFT" 20, "WONK" 0;
  font-size: clamp(2.6rem, 6vw, 3.6rem);
  line-height: 1;
  margin-bottom: .3rem;
}
.weather__cond { color: var(--text-2); font-size: .92rem; }

.weather__months {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  margin-top: var(--s3);
}
.weather__month { background: var(--bg); padding: .8rem .6rem; }
.weather__month-k {
  font-family: var(--mono);
  font-size: .58rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-2);
  margin-bottom: .35rem;
}
.weather__month-v { font-family: var(--display); font-size: 1.15rem; }

/* --- panels (courses, options, inclusions) -------------------- */

/* Separators are drawn as cell borders, not as a 1px gap over a coloured
   container. With auto-fit the last row is often short, and the old trick
   painted those empty cells solid. */
.panels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 0;
  border-top: 1px solid var(--rule);
  border-left: 1px solid var(--rule);
}
.panel {
  padding: clamp(1.4rem, 2.8vw, 2.1rem);
  display: flex; flex-direction: column;
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  transition: background-color .25s var(--ease), box-shadow .25s var(--ease);
  scroll-margin-top: calc(var(--stack-h, 5.5rem) + 1.5rem);
}
.panel:hover { background: var(--surface); }
/* landed on via a link from the homepage map — confirms the click worked */
.panel:target { background: var(--surface); box-shadow: inset 3px 0 0 var(--accent); }

.panel__thumb { margin-bottom: 1.1rem; }
.panel__k {
  font-family: var(--mono);
  font-size: .62rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent);
  margin-bottom: .95rem;
}
.panel__t {
  font-family: var(--display);
  font-variation-settings: "opsz" 60, "wght" 430, "SOFT" 20, "WONK" 1;
  font-size: 1.35rem;
  margin-bottom: .4rem;
}
/* Fraunces' WONK ampersand is a decorative alternate glyph that reads as
   broken rather than stylish at heading size — swap in the plain body
   font just for the "&" in names like "X & Spa Resort". */
.panel__t .amp, .opt__t .amp { font-family: var(--body); font-variation-settings: normal; font-weight: 500; }
.panel__meta {
  font-family: var(--mono);
  font-size: .66rem; letter-spacing: .05em;
  color: var(--text-2);
  margin-bottom: 1.1rem;
  min-height: 2.4em;
}
.panel__stats { display: flex; gap: 1.8rem; margin-bottom: 1.2rem; }
.panel__stats dt {
  font-family: var(--mono);
  font-size: .56rem; letter-spacing: .13em; text-transform: uppercase;
  color: var(--text-2); margin-bottom: .3rem;
}
.panel__stats dd {
  margin: 0;
  font-family: var(--display);
  font-variation-settings: "opsz" 40, "wght" 400, "SOFT" 20, "WONK" 0;
  font-size: 1.25rem; line-height: 1;
}
.panel__body { color: var(--text-2); font-size: .92rem; margin-top: auto; }
.panel--plain { justify-content: center; }
.panel--plain .panel__body { margin-top: 0; }
/* Card faces sit in a row, so a one-line title next to a two-line one used
   to knock every row below it out of alignment. Reserving two lines for the
   title and pinning the pill row to the bottom keeps the stats and pills
   level across the row regardless of how long each name runs. */
.panels .panel__t { min-height: 2.6em; }
.panels .panel__meta { min-height: 3em; }
.panels .panel__stats { flex-wrap: wrap; gap: .6rem 1.4rem; }
.panels .panel .pills { margin-top: auto; padding-top: 1.1rem; }

.pills { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: 1.1rem; }
.pill {
  font-family: var(--mono);
  font-size: .55rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-2);
  padding: .25rem .55rem;
  border: 1px solid var(--rule);
  border-radius: 999px;
}
.pill--check { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 40%, transparent); }

/* detail modal — courses (banorna.html) and excursions (utflykter.html).
   .panel__more carries the "read more" paragraph's styling; it's reused
   unchanged inside the modal, which is why it has no [hidden] rule here
   any more — it now lives inside a <template>, never in the flowed DOM,
   so there's nothing to hide. */
.panel__more {
  margin-top: .9rem;
  padding-top: .9rem;
  border-top: 1px solid var(--rule);
  color: var(--text-2);
  font-size: .88rem;
}

.panel--detail { cursor: pointer; transition: background-color .2s var(--ease); }
.panel--detail:hover { background: var(--surface); }
.panel--detail:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

html.modal-open, html.modal-open body { overflow: hidden; }

.modal {
  position: fixed; inset: 0; z-index: 300;
  display: flex; align-items: center; justify-content: center;
  padding: var(--gutter);
}
.modal[hidden] { display: none; }
.modal__backdrop {
  position: absolute; inset: 0;
  background: color-mix(in srgb, var(--text) 55%, transparent);
}
.modal__box {
  position: relative; z-index: 1;
  background: var(--bg);
  border-radius: 4px;
  max-width: 50rem; width: 100%;
  max-height: 88vh; overflow-y: auto;
  display: grid; grid-template-columns: minmax(0, 42%) minmax(0, 1fr);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .3);
}
@media (max-width: 700px) { .modal__box { grid-template-columns: 1fr; max-height: 92vh; } }
.modal__media { background: var(--surface); aspect-ratio: 4 / 3; }
@media (min-width: 701px) { .modal__media { aspect-ratio: auto; } }
.modal__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.modal__content { padding: clamp(1.4rem, 3vw, 2.2rem); }
.modal__content .panel__stats { margin-bottom: 1.1rem; }
.modal__content .panel__body { margin-top: 0; }
.modal__content .panel__more { margin-top: .9rem; }
.modal__content .panel__more:empty { display: none; }
.modal__content .pills { margin-top: 1.1rem; }
.modal__close {
  position: absolute; top: .7rem; right: .7rem; z-index: 2;
  width: 2.1rem; height: 2.1rem; border-radius: 50%;
  background: var(--bg); border: 1px solid var(--rule);
  font-size: 1.2rem; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: var(--text);
}
.modal__close:hover { background: var(--surface); }

/* --- trips --------------------------------------------------- */

.trips { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.trip {
  background: var(--bg);
  padding: clamp(1.5rem, 3vw, 2.3rem);
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.4fr) minmax(0, .9fr);
  gap: clamp(1.2rem, 3vw, 2.5rem);
  align-items: start;
  transition: background-color .25s var(--ease);
}
.trip:hover { background: var(--surface); }
.trip--lead { background: var(--surface); }
.trip--lead:hover { background: color-mix(in srgb, var(--surface) 80%, var(--accent) 8%); }

.trip__badge {
  display: inline-block;
  font-family: var(--mono);
  font-size: .55rem; letter-spacing: .12em; text-transform: uppercase;
  background: var(--accent); color: var(--bg);
  padding: .25rem .6rem; border-radius: 999px;
  margin-bottom: .7rem;
}
.trip__name {
  font-family: var(--display);
  font-variation-settings: "opsz" 60, "wght" 430, "SOFT" 20, "WONK" 1;
  font-size: 1.45rem;
  margin-bottom: .35rem;
}
.trip__meta {
  font-family: var(--mono);
  font-size: .64rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-2);
}
.trip__body { color: var(--text-2); font-size: .93rem; }
.trip__list { display: grid; gap: .5rem; margin-top: .9rem; }
.trip__list li { font-size: .87rem; color: var(--text-2); padding-left: 1.1rem; position: relative; }
.trip__list li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 6px; height: 1px; background: var(--accent-2);
}
.trip__price {
  font-family: var(--display);
  font-variation-settings: "opsz" 100, "wght" 380, "SOFT" 20, "WONK" 0;
  font-size: clamp(1.7rem, 3.4vw, 2.3rem);
  line-height: 1; margin-bottom: .3rem;
}
.trip__from { font-family: var(--mono); font-size: .58rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-2); display: block; margin-bottom: .5rem; }
.trip__unit { font-family: var(--mono); font-size: .62rem; color: var(--text-2); margin-left: .35rem; }
.trip__cta { margin-top: 1rem; }

@media (max-width: 900px) { .trip { grid-template-columns: 1fr; } }

/* --- schedule / rhythm --------------------------------------- */

.sched { width: 100%; border-collapse: collapse; }
.sched thead th {
  text-align: left;
  font-family: var(--mono);
  font-size: .62rem; letter-spacing: .14em; text-transform: uppercase;
  font-weight: 400; color: var(--text-2);
  padding: 0 1rem 1rem 0;
  border-bottom: 1px solid var(--text-2);
}
.sched tbody th, .sched tbody td {
  padding: 1rem 1rem 1rem 0;
  border-bottom: 1px solid var(--rule);
  vertical-align: baseline; text-align: left; font-weight: 400;
}
.sched tbody th { font-family: var(--mono); font-size: .76rem; color: var(--text-2); width: 6rem; }
.sched tbody td:nth-child(2) {
  font-family: var(--display);
  font-variation-settings: "opsz" 40, "wght" 400, "SOFT" 20, "WONK" 0;
  font-size: 1.05rem;
}
.sched tr.is-golf th { color: var(--accent); }
.sched tbody td:last-child { width: 7rem; text-align: right; padding-right: 0; }

.tag {
  display: inline-block;
  font-family: var(--mono);
  font-size: .58rem; letter-spacing: .1em; text-transform: uppercase;
  padding: .28rem .65rem; border-radius: 999px;
  border: 1px solid var(--rule);
  color: var(--text-2);
}
.tag--golf { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, transparent); }

@media (max-width: 640px) {
  .sched thead { display: none; }
  .sched tbody tr { display: grid; grid-template-columns: 4.6rem 1fr auto; gap: .2rem .8rem; padding: .9rem 0; border-bottom: 1px solid var(--rule); }
  .sched tbody th, .sched tbody td { border: 0; padding: 0; width: auto; }
  .sched tbody td:last-child { width: auto; }
}

/* --- lists --------------------------------------------------- */

.twocol { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: clamp(2rem, 5vw, 4rem); }
.lst__h {
  font-family: var(--mono);
  font-size: .64rem; letter-spacing: .14em; text-transform: uppercase;
  margin-bottom: 1rem; padding-bottom: .75rem;
  border-bottom: 1px solid var(--rule);
}
.lst__h--in  { color: var(--accent); }
.lst__h--out { color: var(--text-2); }
.lst { display: grid; gap: .75rem; }
.lst li { font-size: .92rem; color: var(--text-2); padding-left: 1.2rem; position: relative; }
.lst li::before { content: ""; position: absolute; left: 0; top: .62em; width: 6px; height: 1px; background: var(--accent-2); }

.inc {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 0;
  border-top: 1px solid var(--rule); border-left: 1px solid var(--rule);
}
.inc li {
  padding: 1.2rem clamp(1.1rem, 2.2vw, 1.6rem);
  font-size: .91rem; color: var(--text-2);
  display: flex; align-items: baseline; gap: .75rem;
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.inc li::before { content: ""; flex: 0 0 auto; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); transform: translateY(-1px); }

/* --- facts --------------------------------------------------- */

.facts { display: grid; gap: clamp(1.6rem, 3.5vw, 2.4rem); }
.fact {
  padding-top: 1.3rem;
  border-top: 1px solid var(--rule);
  display: grid;
  grid-template-columns: minmax(0, 14rem) minmax(0, 1fr);
  gap: clamp(1rem, 3vw, 2.5rem);
}
.fact__h { font-family: var(--mono); font-size: .66rem; letter-spacing: .13em; text-transform: uppercase; color: var(--accent); }
.fact__b { color: var(--text-2); font-size: .94rem; display: grid; gap: .85rem; }
.fact__b strong { color: var(--text); font-weight: 500; }
@media (max-width: 720px) { .fact { grid-template-columns: 1fr; gap: .8rem; } }

/* --- price table --------------------------------------------- */

.ptable { width: 100%; border-collapse: collapse; }
.ptable + .ptable { margin-top: var(--s4); }
.ptable caption { text-align: left; margin-bottom: 1.1rem; color: var(--text-2); font-size: .9rem; }
.ptable th, .ptable td {
  text-align: left; padding: 1rem 1rem 1rem 0;
  border-bottom: 1px solid var(--rule);
  font-weight: 400; vertical-align: baseline;
}
.ptable thead th {
  font-family: var(--mono); font-size: .6rem; letter-spacing: .13em; text-transform: uppercase;
  color: var(--text-2); border-bottom-color: var(--text-2); padding-bottom: .85rem;
}
.ptable tbody th { font-family: var(--display); font-variation-settings: "opsz" 40, "wght" 420, "SOFT" 20, "WONK" 0; font-size: 1.05rem; }
.ptable td { font-family: var(--mono); font-size: .86rem; color: var(--text-2); }
.ptable .is-rec th { color: var(--accent); }
.ptable .unit { color: var(--text-2); font-size: .78em; letter-spacing: .04em; }
.ptable td:last-child, .ptable th:last-child { padding-right: 0; }
@media (max-width: 640px) {
  /* Stacking the table drops the header row, which left every cell as a
     bare number — "10 / 4 / Rs 232 245" with nothing saying which was
     which. Each cell now prints its own column name from data-label, so a
     stacked row stays readable as label/value pairs. */
  .ptable thead { display: none; }
  .ptable tbody tr { display: block; padding: 1rem 0; border-bottom: 1px solid var(--rule); }
  .ptable tbody th { display: block; border: 0; padding: 0 0 .5rem; }
  .ptable tbody td {
    display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
    border: 0; padding: .2rem 0;
  }
  .ptable tbody td[data-label]::before {
    content: attr(data-label);
    font-family: var(--mono); font-size: .58rem; letter-spacing: .12em;
    text-transform: uppercase; color: var(--text-2);
  }
}

/* --- navigation cards / pager -------------------------------- */

/* Exactly six cards, so a fixed 3-up keeps the last row full. The gallery
   and journal cards were dropped when the "Läs mer" nav dropdown started
   carrying them — a seventh card left one orphan on its own row, and the
   section reads better as the six ways to actually book something. */
.navcards {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
  border-top: 1px solid var(--rule); border-left: 1px solid var(--rule);
}
.navcard {
  padding: clamp(1.5rem, 3vw, 2.1rem); display: flex; flex-direction: column;
  border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  transition: background-color .25s var(--ease);
}
@media (max-width: 900px) { .navcards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .navcards { grid-template-columns: 1fr; } }
.navcard:hover { background: var(--surface); }
.navcard__k { font-family: var(--mono); font-size: .58rem; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin-bottom: .9rem; }
.navcard__t { font-family: var(--display); font-variation-settings: "opsz" 60, "wght" 420, "SOFT" 20, "WONK" 1; font-size: 1.35rem; margin-bottom: .55rem; }
.navcard__d { color: var(--text-2); font-size: .9rem; margin-bottom: 1.5rem; }
.navcard__go { margin-top: auto; font-family: var(--mono); font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-2); }
.navcard:hover .navcard__go { color: var(--accent); }

/* Compact one-line pager. It used to be two full-width blocks with 1.5rem
   of padding and a 1.1rem display-face title each — which read as a large
   band of mostly empty space directly above the footer. Same two links,
   now a single quiet row: the kicker and title sit inline, so the whole
   thing is one line tall instead of a slab. */
.pager {
  max-width: var(--maxw); margin-inline: auto;
  padding: 1rem var(--gutter) calc(var(--band) * .45);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: .8rem 1.5rem;
  border-top: 1px solid var(--rule);
  margin-top: var(--s4);
}
.pager__link {
  display: inline-flex; align-items: baseline; gap: .55rem;
  padding: .3rem 0;
  transition: color .2s var(--ease);
}
.pager__k { font-family: var(--mono); font-size: .58rem; letter-spacing: .14em; text-transform: uppercase; color: var(--text-2); }
.pager__t { font-size: .92rem; color: var(--text-2); }
.pager__link:hover .pager__t { color: var(--accent); }

/* --- media --------------------------------------------------- */

.gallery { display: grid; grid-template-columns: repeat(6, 1fr); gap: clamp(.6rem, 1.4vw, 1.1rem); }
.gitem { min-width: 0; }
.gitem--4 { grid-column: span 4; }
.gitem--3 { grid-column: span 3; }
.gitem--2 { grid-column: span 2; }
.gitem figure { margin: 0; }

.gframe {
  display: block; position: relative; overflow: hidden;
  border-radius: 3px;
  background: var(--surface);
  border: 1px solid var(--rule);
  /* --cap bounds upscaling of low-resolution sources. */
  max-width: var(--cap, none);
  margin-inline: auto;
}
.gframe img, .gframe video {
  display: block; width: 100%; height: 100%; object-fit: cover;
  transition: transform .5s var(--ease), filter .35s var(--ease);
}
.gframe--32  { aspect-ratio: 3 / 2; }
.gframe--43  { aspect-ratio: 4 / 3; }
.gframe--169 { aspect-ratio: 16 / 9; }
.gitem--film .gframe { background: #000; }
.gitem--film .gframe video { object-fit: contain; }
.gitem:not(.gitem--film) .gframe:hover img { transform: scale(1.03); filter: brightness(1.05); }

.gcap { margin-top: .65rem; font-size: .84rem; color: var(--text-2); line-height: 1.55; }
.gcap b {
  display: block; font-family: var(--mono);
  font-size: .58rem; letter-spacing: .13em; text-transform: uppercase;
  font-weight: 400; color: var(--accent); margin-bottom: .35rem;
}
.gcap .meta { color: var(--accent-2); }

/* empty slot awaiting a licensed photograph */
.gslot {
  display: grid; place-content: center; text-align: center;
  gap: .5rem; padding: 1.5rem;
  background: repeating-linear-gradient(-45deg,
    var(--surface) 0 10px, transparent 10px 20px);
  border: 1px dashed var(--rule);
}
.gslot__k { font-family: var(--mono); font-size: .58rem; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.gslot__d { font-family: var(--mono); font-size: .62rem; color: var(--text-2); }

@media (max-width: 900px) {
  .gallery { grid-template-columns: repeat(2, 1fr); }
  .gitem--4, .gitem--3, .gitem--2 { grid-column: span 1; }
}
@media (max-width: 600px) {
  .gallery { grid-template-columns: 1fr; }
  .gitem--4, .gitem--3, .gitem--2 { grid-column: span 1; }
}

/* --- vector artwork ------------------------------------------ */

/* Opacities are tuned for the light page - the earlier dark-band values
   washed out completely against chalk. */
.art { display: block; width: 100%; height: auto; }
.art .sea   { fill: var(--accent-2); opacity: .07; }
.art .ln    { fill: none; stroke: var(--accent-2); stroke-width: 1; opacity: .85; }
.art .ln-2  { fill: none; stroke: var(--accent); stroke-width: 1.6; opacity: 1; }
.art .fill  { fill: var(--accent-2); opacity: .5; }
.art .fill-2{ fill: var(--accent); opacity: .35; }
.art .dot   { fill: var(--accent); }
.art .lbl   { font-family: var(--mono); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; fill: var(--text-2); }
.art .watermark { font-family: var(--display); font-variation-settings: "opsz" 40, "wght" 560, "SOFT" 10, "WONK" 0; font-size: 26px; letter-spacing: .07em; fill: var(--text); opacity: .62; text-transform: uppercase; }
.art .compass { fill: none; stroke: var(--text-2); opacity: .6; }
.art .compass-lbl { font-family: var(--mono); font-size: 8px; fill: var(--text-2); opacity: .7; }
.art .legend-lbl { font-family: var(--mono); font-size: 8px; letter-spacing: .04em; fill: var(--text-2); }
.art .hotel-dot { fill: var(--bg); stroke: var(--hotel-red); stroke-width: 1.6; }
.art .hotel-mark { fill: var(--hotel-red); }
.art .hotel-lbl  { font-family: var(--mono); font-size: 9px; letter-spacing: .06em; text-transform: uppercase; fill: var(--hotel-red); font-weight: 600; }
.art .hotel:hover .hotel-lbl, .art .hotel:focus-visible .hotel-lbl { fill: var(--text); }
.art .hotel:focus-visible { outline: none; }
.art .hotel:focus-visible .hotel-dot { stroke-width: 2.4; }
.art .airport-mark { fill: var(--text-2); }
/* Thin leader lines joining each off-island label back to its marker. */
.art .leaders path { fill: none; stroke: var(--accent-2); stroke-width: .8; opacity: .7; }

/* golf courses are links (to their entry on banorna.html) — a visible
   focus/hover state matters since the whole point is that they're
   clickable, not just decorative dots */
.art .course { cursor: pointer; }
.art .course .dot { transition: r .15s var(--ease); }
.art .course:hover .dot, .art .course:focus-visible .dot { r: 6; }
.art .course:hover .lbl, .art .course:focus-visible .lbl { fill: var(--accent); }
.art .course:focus-visible { outline: none; }
.art .course:focus-visible .dot { stroke: var(--accent); stroke-width: 3; }

/* cities are reference points, not destinations — smaller, muted, never
   mistaken for a course */
.art .city-dot { fill: var(--bg); stroke: var(--text-2); stroke-width: 1.3; }
.art .city-lbl { font-family: var(--mono); font-size: 8px; letter-spacing: .08em; fill: var(--text-2); opacity: .8; }
.art .cap-dot  { fill: var(--text-2); }
.art .cap-lbl  { font-weight: 600; opacity: 1; }

/* --- step builder -------------------------------------------- */

.wiz { display: grid; gap: var(--s5); }

.step {
  border-top: 1px solid var(--rule);
  padding-top: var(--s3);
  display: grid;
  grid-template-columns: minmax(0, 13rem) minmax(0, 1fr);
  gap: clamp(1rem, 3vw, 2.5rem);
  align-items: start;
}
@media (max-width: 760px) { .step { grid-template-columns: 1fr; gap: var(--s2); } }

/* --stack-h is measured by main.js from the actual banner+nav height, since
   the banner can wrap to two or three lines depending on language/width. */
.step__head { position: sticky; top: calc(var(--stack-h, 5.5rem) + 1rem); }
@media (max-width: 760px) { .step__head { position: static; } }
.step__n {
  font-family: var(--mono);
  font-size: .6rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent);
  margin-bottom: .4rem;
}
.step__t {
  font-family: var(--display);
  font-variation-settings: "opsz" 60, "wght" 430, "SOFT" 20, "WONK" 1;
  font-size: 1.3rem;
  margin-bottom: .4rem;
}
.step__d { color: var(--text-2); font-size: .86rem; }

/* nights control */
.nights { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.nights input[type="range"] { flex: 1 1 16rem; accent-color: var(--accent); min-width: 12rem; }
.nights__out {
  font-family: var(--display);
  font-variation-settings: "opsz" 60, "wght" 420, "SOFT" 20, "WONK" 0;
  font-size: 1.9rem; line-height: 1;
  min-width: 5.5rem;
}
.nights__out span { font-family: var(--mono); font-size: .62rem; color: var(--text-2); margin-left: .3rem; }

/* option cards (radio) */
/* Small group label ahead of a set of .opts or a checkbox — separates the
   builder's hotel/room/board/extras choices into distinct, named groups
   instead of one unbroken stack of controls. */
.subhead {
  font-family: var(--mono); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-2); margin: var(--s3) 0 .5rem;
}
.subhead:first-child { margin-top: 0; }
.opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: .6rem; }
.opt { position: relative; }
.opt input { position: absolute; opacity: 0; pointer-events: none; }
.opt__box {
  display: block; height: 100%;
  border: 1px solid var(--rule); border-radius: 3px;
  padding: var(--s3);
  cursor: pointer;
  transition: border-color .2s var(--ease), background-color .2s var(--ease);
}
.opt__box:hover { border-color: var(--accent-2); background: var(--surface); }
.opt input:checked + .opt__box { border-color: var(--accent); background: var(--surface); box-shadow: inset 0 0 0 1px var(--accent); }
.opt input:focus-visible + .opt__box { outline: 2px solid var(--accent); outline-offset: 2px; }
.opt__t { font-weight: 600; font-size: .95rem; margin-bottom: .3rem; }
.opt__d { color: var(--text-2); font-size: .82rem; margin-bottom: .5rem; }
.opt__p { font-family: var(--mono); font-size: .74rem; color: var(--accent); }

/* day-by-day planner */
.days { display: grid; gap: .4rem; }
.day {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr) auto;
  gap: .8rem;
  align-items: center;
  padding: .55rem .7rem;
  border: 1px solid var(--rule);
  border-radius: 3px;
  background: var(--bg);
}
.day--fixed { background: var(--surface); color: var(--text-2); }
.day__n { font-family: var(--mono); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-2); }
.day select {
  font-family: var(--body); font-size: .88rem;
  padding: .45rem .5rem;
  border: 1px solid var(--rule); border-radius: 2px;
  background: var(--bg); color: var(--text);
  width: 100%;
}
.day__p { font-family: var(--mono); font-size: .74rem; color: var(--text-2); white-space: nowrap; }
/* Day rows with no price column (every editable day — see builder.js)
   let the select stretch across the space the price used to occupy. */
.day--noprice select { grid-column: 2 / -1; }
/* Coach checkbox for a course day drops onto its own row beneath the
   select, spanning the full row width. */
.day__coach {
  grid-column: 1 / -1;
  display: flex; align-items: center; gap: .5rem;
  font-size: .82rem; color: var(--text-2);
  cursor: pointer;
}
.day__coach input[type="checkbox"] { flex: none; width: 1rem; height: 1rem; }
.day__coach-price { font-family: var(--mono); font-size: .74rem; color: var(--accent); margin-left: auto; }
@media (max-width: 560px) {
  .day { grid-template-columns: 3.6rem 1fr; row-gap: .35rem; }
  .day__p { grid-column: 2; text-align: right; }
}

/* --- package enquiry (forfragan.html) ------------------------ */

.enqgrid { display: grid; grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); gap: clamp(1.6rem, 4vw, 3rem); align-items: start; }
@media (max-width: 860px) { .enqgrid { grid-template-columns: 1fr; } }
.enq__pkg {
  border: 1px solid var(--rule); border-radius: 4px;
  background: var(--surface);
  padding: var(--s3);
  position: sticky; top: calc(var(--stack-h, 5.5rem) + 1rem);
}
@media (max-width: 860px) { .enq__pkg { position: static; } }
.enq__name {
  font-family: var(--display);
  font-variation-settings: "opsz" 60, "wght" 430, "SOFT" 20, "WONK" 1;
  font-size: 1.5rem; margin-bottom: .35rem;
}
.enq__meta { font-family: var(--mono); font-size: .68rem; letter-spacing: .05em; color: var(--text-2); margin-bottom: 1rem; }
.enq__k { display: block; font-family: var(--mono); font-size: .58rem; letter-spacing: .13em; text-transform: uppercase; color: var(--text-2); margin-bottom: .3rem; }
.enq__price { margin-bottom: 1rem; }
.enq__fig { font-family: var(--display); font-variation-settings: "opsz" 60, "wght" 400, "SOFT" 20, "WONK" 0; font-size: 1.5rem; }
.enq__pp { font-family: var(--mono); font-size: .62rem; color: var(--text-2); margin-left: .35rem; }
.enq__swap { font-size: .82rem; }
.enq__est { margin-top: 1.2rem; padding-top: 1rem; border-top: 1px solid var(--rule); }
.enq__estfig { font-family: var(--display); font-variation-settings: "opsz" 100, "wght" 400, "SOFT" 20, "WONK" 0; font-size: clamp(1.5rem, 3vw, 2rem); line-height: 1; }
.enq__estnote { font-size: .78rem; color: var(--text-2); margin-top: .5rem; }
.enq__people { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: .8rem; }

/* --- departure calendar -------------------------------------- */

.cal {
  border: 1px solid var(--rule); border-radius: 4px;
  background: var(--bg);
  padding: var(--s2);
  max-width: 40rem;
}
/* Two months side by side; they stack rather than drop one when the space
   runs out, so the whole trip stays visible on a phone too. */
.cal__months { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: .4rem 1.4rem; }
.cal__phead { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .6rem; }
.cal__navpad { width: 1.9rem; height: 1.9rem; flex: none; }
.cal__month {
  font-family: var(--display);
  font-variation-settings: "opsz" 40, "wght" 430, "SOFT" 20, "WONK" 0;
  font-size: 1rem; text-transform: capitalize;
}
.cal__nav {
  font: inherit; font-size: 1.1rem; line-height: 1;
  background: none; border: 1px solid var(--rule); border-radius: 3px;
  color: var(--text-2); cursor: pointer;
  width: 1.9rem; height: 1.9rem;
  display: flex; align-items: center; justify-content: center;
  transition: background-color .2s var(--ease), color .2s var(--ease);
}
.cal__nav:hover { background: var(--surface); color: var(--text); }
.cal__days, .cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.cal__days span {
  font-family: var(--mono); font-size: .56rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-2); text-align: center; padding-bottom: .3rem;
}
.cal__cell {
  font: inherit; font-size: .82rem;
  aspect-ratio: 1; min-height: 2rem;
  display: flex; align-items: center; justify-content: center;
  background: none; border: 0; border-radius: 2px;
  color: var(--text); cursor: pointer;
  transition: background-color .15s var(--ease), color .15s var(--ease);
}
.cal__cell--pad { cursor: default; }
.cal__cell:hover:not(:disabled):not(.is-start) { background: var(--surface); }
.cal__cell:disabled { color: color-mix(in srgb, var(--text-2) 40%, transparent); cursor: not-allowed; }
/* The whole stay is shaded, not just the departure — picking a day shows
   at a glance where the trip lands and when you get home. */
.cal__cell.is-in { background: var(--surface); }
.cal__cell.is-start, .cal__cell.is-end { background: var(--accent); color: #fff; font-weight: 600; }
.cal__cell.is-end { background: color-mix(in srgb, var(--accent) 62%, var(--bg)); }
.cal__cell:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.cal__out { margin-top: .7rem; padding-top: .6rem; border-top: 1px solid var(--rule); font-size: .82rem; }
.cal__out-k { font-family: var(--mono); font-size: .56rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-2); }
.cal__out-empty { color: var(--text-2); }

/* running total — sits in normal flow at the bottom of the builder,
   not pinned to the viewport while scrolling through the day list. */
.tally {
  margin-top: var(--s4);
  border: 1px solid var(--accent);
  border-radius: 3px;
  background: var(--bg);
  padding: var(--s3);
  display: grid; gap: .5rem;
}
.tally__rows { display: grid; gap: .3rem; font-family: var(--mono); font-size: .76rem; color: var(--text-2); }
.tally__row { display: flex; justify-content: space-between; gap: 1rem; }
.tally__sum {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  border-top: 1px solid var(--rule);
  padding-top: .6rem;
}
.tally__label { font-family: var(--mono); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-2); }
.tally__val {
  font-family: var(--display);
  font-variation-settings: "opsz" 100, "wght" 400, "SOFT" 20, "WONK" 0;
  font-size: clamp(1.6rem, 3.4vw, 2.2rem); line-height: 1;
}
.tally__note { font-family: var(--mono); font-size: .64rem; color: var(--text-2); }

/* itinerary summary */
.itin {
  border: 1px solid var(--rule);
  border-radius: 3px;
  background: var(--bg);
  padding: clamp(1.2rem, 2.6vw, 2rem);
  margin-top: var(--s4);
}
.itin__meta {
  font-family: var(--mono);
  font-size: .64rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent);
  padding-bottom: var(--s2);
  border-bottom: 1px solid var(--rule);
  margin-bottom: var(--s2);
}
.itin__list { display: grid; gap: 0; }
.itin__row {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr);
  gap: .8rem;
  padding: .4rem 0;
  border-bottom: 1px solid var(--rule);
  align-items: baseline;
}
.itin__d { font-family: var(--mono); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-2); }
.itin__w { font-size: .93rem; }

.itin__cats {
  display: grid; gap: 0;
  margin-top: var(--s2);
  padding-top: var(--s2);
  border-top: 1px solid var(--rule);
}
.itin__cat {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  padding: .3rem 0;
  font-size: .88rem;
}
.itin__cat span:first-child { color: var(--text-2); }
.itin__cat span:last-child { font-family: var(--mono); font-size: .82rem; }

.itin__total {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  padding-top: var(--s3);
  margin-top: var(--s2);
  border-top: 1px solid var(--rule);
}
.itin__total span:first-child {
  font-family: var(--mono); font-size: .66rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--text-2);
}
.itin__total span:last-child {
  font-family: var(--display);
  font-variation-settings: "opsz" 100, "wght" 400, "SOFT" 20, "WONK" 0;
  font-size: clamp(1.5rem, 3vw, 2rem);
}

.sendrow {
  display: flex; align-items: flex-end; gap: var(--s3);
  margin-top: var(--s4); flex-wrap: wrap;
}
.sendrow .field { flex: 1 1 18rem; }
.sendrow--3 .field { flex: 1 1 12rem; }
.sendrow__btn { flex: 0 0 auto; }

/* margin disclosure */
.margin {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 0;
  border-top: 1px solid var(--rule); border-left: 1px solid var(--rule);
}
.margin li { padding: var(--s3); border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.margin__k { font-family: var(--mono); font-size: .58rem; letter-spacing: .13em; text-transform: uppercase; color: var(--text-2); margin-bottom: .35rem; }
.margin__v {
  font-family: var(--display);
  font-variation-settings: "opsz" 60, "wght" 420, "SOFT" 20, "WONK" 0;
  font-size: 1.4rem;
}
.margin__v--accent { color: var(--accent); }

/* --- notice banner ------------------------------------------- */

.notice {
  max-width: var(--maxw);
  margin: var(--s4) auto 0;
  padding: var(--s3) clamp(1.1rem, 2.4vw, 1.6rem);
  margin-inline: max(var(--gutter), calc((100vw - var(--maxw)) / 2));
  border-left: 3px solid var(--accent);
  background: var(--surface);
  color: var(--text-2);
  font-size: .92rem;
}
.notice strong { color: var(--text); font-weight: 600; }
.notice--strong { border-left-color: #9A3412; background: #F6EDE6; }
.notice--strong strong { color: #7C2D12; }

.cta-row { margin-top: var(--s4); }

/* --- blog ---------------------------------------------------- */

.posts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  gap: 0;
  border-top: 1px solid var(--rule);
  border-left: 1px solid var(--rule);
}
.post {
  padding: clamp(1.5rem, 3vw, 2.2rem);
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  display: flex; flex-direction: column;
  transition: background-color .25s var(--ease);
}
.post:hover { background: var(--surface); }
.post__meta {
  font-family: var(--mono);
  font-size: .6rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--s2);
}
.post__title {
  font-family: var(--display);
  font-variation-settings: "opsz" 60, "wght" 420, "SOFT" 20, "WONK" 1;
  font-size: 1.3rem; line-height: 1.15;
  margin-bottom: var(--s2);
}
.post__title a:hover { color: var(--accent); }
.post__lede { color: var(--text-2); font-size: .92rem; margin-bottom: var(--s3); }
.post__more {
  margin-top: auto;
  font-family: var(--mono);
  font-size: .62rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-2);
}
.post:hover .post__more { color: var(--accent); }

/* --- reviews ------------------------------------------------- */

.reviews {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
}
.review {
  padding: clamp(1.5rem, 3vw, 2.1rem);
  border: 1px solid var(--rule);
  border-radius: 3px;
  background: var(--bg);
  display: flex; flex-direction: column;
}
.review__flag {
  font-family: var(--mono);
  font-size: .58rem; letter-spacing: .1em; text-transform: uppercase;
  color: #7C2D12;
  background: #F6EDE6;
  border: 1px dashed #C2724A;
  padding: .3rem .6rem;
  border-radius: 999px;
  align-self: flex-start;
  margin-bottom: var(--s3);
}
.review__quote {
  margin: 0 0 var(--s3);
  font-family: var(--display);
  font-variation-settings: "opsz" 40, "wght" 380, "SOFT" 30, "WONK" 1;
  font-size: 1.1rem; line-height: 1.45;
}
.review__quote::before { content: "\201D"; color: var(--accent); margin-right: .15em; }
.review__by {
  margin-top: auto;
  font-family: var(--mono);
  font-size: .62rem; letter-spacing: .08em;
  color: var(--text-2);
}
.review__who { color: var(--text); }

/* --- payment methods ----------------------------------------- */

.pay {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 0;
  border-top: 1px solid var(--rule);
  border-left: 1px solid var(--rule);
}
.pay li {
  padding: clamp(1.3rem, 2.6vw, 1.8rem);
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.pay__name {
  font-family: var(--display);
  font-variation-settings: "opsz" 40, "wght" 430, "SOFT" 20, "WONK" 1;
  font-size: 1.15rem;
  margin-bottom: .4rem;
}
.pay__d { color: var(--text-2); font-size: .88rem; }

/* --- form / booking ------------------------------------------ */

.bgrid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
@media (max-width: 860px) { .bgrid { grid-template-columns: 1fr; } }

.direct { font-family: var(--mono); font-size: .8rem; line-height: 2; color: var(--text-2); }
.direct a:hover { color: var(--accent); }

.form { display: grid; gap: 1rem; }
.field { display: grid; gap: .4rem; }
.field label { font-family: var(--mono); font-size: .6rem; letter-spacing: .13em; text-transform: uppercase; color: var(--text-2); }
.field input, .field select, .field textarea {
  font-family: var(--body); font-size: .95rem; padding: .75rem .85rem;
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: 2px; color: var(--text);
}
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--accent-2); }
.field textarea { min-height: 6rem; resize: vertical; }
.checks {
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: var(--s3);
  margin: 0;
  display: grid; gap: .55rem;
}
.checks legend {
  font-family: var(--mono);
  font-size: .6rem; letter-spacing: .13em; text-transform: uppercase;
  color: var(--text-2);
  padding: 0 .4rem;
}
.checks label {
  display: flex; align-items: center; gap: .6rem;
  font-size: .88rem; color: var(--text-2);
  cursor: pointer;
  padding: .18rem 0;
}
.checks label:hover { color: var(--text); }
.checks input[type="checkbox"] {
  width: 1rem; height: 1rem; flex: 0 0 auto;
  accent-color: var(--accent);
  cursor: pointer;
}

.form__btn { justify-self: start; margin-top: .3rem; }
.form__note { font-family: var(--mono); font-size: .66rem; line-height: 1.7; color: var(--text-2); }

/* --- trust --------------------------------------------------- */

.trust { display: grid; gap: 1.2rem; margin-top: clamp(2rem, 4vw, 3rem); padding-top: clamp(1.8rem, 3.5vw, 2.4rem); border-top: 1px solid var(--rule); }
.trust__h { font-family: var(--mono); font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin-bottom: .5rem; }
.trust p { color: var(--text-2); font-size: .87rem; }

/* --- footer -------------------------------------------------- */

.foot {
  border-top: 1px solid var(--rule);
  padding: clamp(2.5rem, 6vw, 4.5rem) var(--gutter) 2.5rem;
  max-width: var(--maxw); margin-inline: auto;
}
.foot__grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: clamp(1.8rem, 4vw, 3rem); }
.foot__grid > * { min-width: 0; }
.foot__col p, .foot__col a { overflow-wrap: anywhere; }
.foot__mark { font-family: var(--display); font-variation-settings: "opsz" 60, "wght" 500, "SOFT" 20, "WONK" 1; font-size: 1.35rem; margin-bottom: .45rem; }
.foot__slogan { font-family: var(--body); font-style: italic; font-size: .82rem; color: var(--text-2); max-width: 20rem; }
.foot__h { font-family: var(--mono); font-size: .63rem; letter-spacing: .15em; text-transform: uppercase; color: var(--text-2); margin-bottom: .85rem; }
.foot__col p { color: var(--text-2); font-size: .86rem; margin-bottom: .45rem; }
.foot__col a:hover { color: var(--accent); }
.foot__fine {
  margin-top: clamp(2rem, 5vw, 3.5rem); padding-top: 1.4rem;
  border-top: 1px solid var(--rule);
  font-family: var(--mono); font-size: .64rem; letter-spacing: .08em; color: var(--text-2);
}
@media (max-width: 860px) { .foot__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .foot__grid { grid-template-columns: 1fr; } }

/* --- motion -------------------------------------------------- */

.contour__lines path {
  stroke-dasharray: var(--len, 2000);
  stroke-dashoffset: var(--len, 2000);
  animation: draw 1.9s var(--ease) forwards;
  animation-delay: calc(var(--d, 0) * 120ms);
}
@keyframes draw { to { stroke-dashoffset: 0; } }

.eyebrow, .hero__line, .hero__lede, .hero__actions, .stat { animation: rise .9s var(--ease) both; }
.hero__title .hero__line:nth-child(1) { animation-delay: .14s; }
.hero__title .hero__line:nth-child(2) { animation-delay: .22s; }
.hero__lede { animation-delay: .3s; }
.hero__actions { animation-delay: .38s; }
.hero__stats .stat:nth-child(1) { animation-delay: .44s; }
.hero__stats .stat:nth-child(2) { animation-delay: .5s; }
.hero__stats .stat:nth-child(3) { animation-delay: .56s; }
.hero__stats .stat:nth-child(4) { animation-delay: .62s; }

@keyframes rise { from { opacity: 0; transform: translateY(1.1rem); } to { opacity: 1; transform: none; } }

/* Scoped to html.js: with JavaScript off the content is simply visible,
   never hidden behind an animation that will never run. The failsafe
   animation covers the worse case — js class set, then main.js throws
   before adding .is-in. After 2.5s the content appears regardless. */
html.js .reveal { opacity: 0; transform: translateY(1.3rem); animation: revealFailsafe 0s linear 2.5s forwards; }
html.js .reveal.is-in { opacity: 1; transform: none; animation: none; transition: opacity .8s var(--ease), transform .8s var(--ease); }
@keyframes revealFailsafe { to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-delay: 0ms !important;
    transition-duration: .01ms !important; transition-delay: 0ms !important;
  }
  .contour__lines path { stroke-dashoffset: 0; }
  html.js .reveal { opacity: 1; transform: none; animation: none; }
  .gitem:not(.gitem--film) .gframe:hover img { transform: none; }
}

/* --- long-form article body (blogg-*.html) --------------------------
   The blog is the only place on the site with sustained prose. Every
   other page is cards, tables and short blocks, so the measure and
   rhythm here are set once rather than inherited from a grid that was
   never meant to carry six paragraphs in a row. */
.prose { max-width: 62ch; }
.prose p { margin: 0 0 1.15rem; line-height: 1.72; color: var(--text); }
.prose p:last-child { margin-bottom: 0; }
.prose h2 {
  margin: 2.6rem 0 .9rem;
  font-size: clamp(1.25rem, 2vw, 1.6rem);
  line-height: 1.22;
  letter-spacing: -.01em;
}
.prose h2:first-child { margin-top: 0; }
.prose strong { font-weight: 600; }
.prose a { color: inherit; text-decoration: underline; text-underline-offset: .18em; }

.prose__back { margin: 0 0 .6rem; }
.prose__cta {
  margin: 0; max-width: 62ch; color: var(--text-2);
  padding-top: 1.1rem; border-top: 1px solid var(--rule);
}

/* the article's own dateline, reusing the teaser style from blogg.html */
.phero .post__meta { margin: 0 0 .5rem; }

/* --- thank-you page: what happens next -----------------------------
   This is the highest-intent moment on the site — someone has just
   asked to be sold to. Telling them exactly what happens and when is
   what stops the "did that go through?" email two days later. */
.thanks__steps {
  list-style: none; margin: 2rem auto 0; padding: 0;
  max-width: 46ch; text-align: left; display: grid; gap: 1.05rem;
}
.thanks__steps li { display: grid; grid-template-columns: 2rem 1fr; gap: .85rem; align-items: start; }
.thanks__num {
  display: grid; place-items: center;
  width: 2rem; height: 2rem; border-radius: 50%;
  border: 1px solid var(--rule); font-size: .82rem; color: var(--text-2);
}
.thanks__steps b { font-weight: 600; }
.thanks__hurry { margin: 1.9rem auto 0; max-width: 46ch; color: var(--text-2); }
.thanks__spam { margin: 1.6rem auto 0; max-width: 46ch; font-size: .88rem; color: var(--text-2); }

/* ==================================================================
   UI pass — affordance, reachability, resilience
   ================================================================== */

/* --- 1. clickable cards need to look clickable ---------------------
   .panel--detail opens a dialog, but the only cue was :hover, which
   does not exist on touch. A persistent chevron says "there is more
   here" without adding a word that would need translating. */
.panel--detail { position: relative; }
.panel--detail::after {
  content: "";
  position: absolute; right: clamp(1.4rem, 2.8vw, 2.1rem); bottom: clamp(1.4rem, 2.8vw, 2.1rem);
  width: .55rem; height: .55rem;
  border-right: 1.5px solid var(--text-2);
  border-bottom: 1.5px solid var(--text-2);
  transform: rotate(-45deg);
  opacity: .55;
  transition: opacity .2s var(--ease), transform .2s var(--ease), border-color .2s var(--ease);
}
.panel--detail:hover::after,
.panel--detail:focus-visible::after {
  opacity: 1; border-color: var(--accent); transform: rotate(-45deg) translate(2px, 2px);
}

/* --- 4. calendar: say why half the month is unavailable ------------
   Disabled days already carry cursor:not-allowed, but nothing explained
   the rule. People clicked a grey date and assumed the picker was
   broken. The hint is rendered by calendar.js so it translates. */
.cal__hint {
  margin: .5rem 0 0;
  font-size: .74rem;
  color: var(--text-2);
}
.cal__cell:disabled {
  color: color-mix(in srgb, var(--text-2) 34%, transparent);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in srgb, var(--text-2) 22%, transparent);
}

/* --- 2. running total, visible while you build (mobile) ------------
   The tally sits in normal flow by design on desktop, where it is on
   screen anyway. On a phone the day list pushes it far below the fold,
   so the number that makes the whole tool worth using is invisible
   during the part where choices are made. This bar mirrors it. */
.bprice {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 120;
  display: none;
  align-items: baseline; justify-content: space-between; gap: 1rem;
  padding: .7rem clamp(1rem, 4vw, 1.5rem);
  padding-bottom: calc(.7rem + env(safe-area-inset-bottom, 0px));
  background: var(--bg);
  border-top: 1px solid var(--accent);
  box-shadow: 0 -6px 18px -12px rgba(0,0,0,.5);
  transform: translateY(100%);
  transition: transform .28s var(--ease);
}
.bprice.is-on { transform: none; }
.bprice__k { font-family: var(--mono); font-size: .6rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-2); }
.bprice__v { font-family: var(--display); font-size: 1.15rem; }

@media (max-width: 760px) {
  .bprice { display: flex; }
  /* keep the send button clear of the bar */
  body.has-bprice .tally { margin-bottom: 3.5rem; }
}
@media (prefers-reduced-motion: reduce) {
  .bprice { transition: none; }
}

/* --- 5. switcher tap targets --------------------------------------
   The strip was compact enough to fit but not to hit: the buttons were
   roughly 26px tall against a 44px guideline. Padding is unchanged;
   min-height does the work, so the strip looks the same and stops
   missing. Overflow scrolls rather than wrapping into a second row. */
@media (max-width: 900px) {
  .switches { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .switches::-webkit-scrollbar { display: none; }
  .switches .lang, .switches .cur { flex: 0 0 auto; }
  .switches .lang__btn,
  .switches .cur__btn {
    min-height: 2.5rem;
    display: inline-flex; align-items: center;
  }
}