/* ==========================================================================
   Jökulsárlón guide — original stylesheet
   Direction: the page reads as a descent. The lagoon is Iceland's deepest
   lake, so depth is the organising device: a scale runs down the left gutter
   and every section is a station on it. Palette is taken from the place
   itself — black basalt sand, compressed glacier blue, meltwater, the pale
   rock flour that turns the water opaque, and one low arctic sun amber that
   appears only on things you can click.
   ========================================================================== */

:root {
  /* --- colour ------------------------------------------------------- */
  --basalt:    #14161a;   /* black sand */
  --basalt-2:  #1e232b;   /* raised dark surface */
  --ice-deep:  #0c3a57;   /* compressed old ice */
  --ice:       #2a83a8;   /* mid glacial blue */
  --ice-link:  #145e7e;   /* link blue that clears AA on light */
  --melt:      #8fd3e0;   /* meltwater — links on dark */
  --flour:     #dde7e8;   /* glacial rock flour */
  --paper:     #f2f5f5;
  --sun:       #e39a5c;   /* low arctic sun — interactive only */
  --muted:     #4a5560;
  --muted-dark:#93a1ac;
  --rule:      #c8d5d7;
  --rule-dark: #2f3944;

  /* --- type --------------------------------------------------------- */
  --display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --body:    'Newsreader', Georgia, 'Times New Roman', serif;
  --mono:    'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* --- space -------------------------------------------------------- */
  --s1: 0.5rem;
  --s2: 1rem;
  --s3: 1.5rem;
  --s4: 2.5rem;
  --s5: 4rem;
  --s6: 6.5rem;

  --gutter: 7.5rem;        /* width of the depth-scale gutter */
  --measure: 68ch;
  --maxw: 1180px;
}

/* --------------------------------------------------------------------
   reset + base
   -------------------------------------------------------------------- */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--basalt);
  font-family: var(--body);
  font-size: clamp(1.05rem, 0.98rem + 0.34vw, 1.2rem);
  line-height: 1.68;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--ice-link); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { color: var(--basalt); }

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

/* Clipped rather than pushed off-canvas, so it can never create a scroll area. */
.skip {
  position: absolute; top: var(--s2); left: var(--s2);
  background: var(--sun); color: var(--basalt);
  padding: var(--s2) var(--s3); font-family: var(--mono); z-index: 100;
  clip-path: inset(50%); white-space: nowrap;
}
.skip:focus { clip-path: none; }

.wrap {
  width: min(100% - 2.5rem, var(--maxw));
  margin-inline: auto;
}

/* --------------------------------------------------------------------
   type roles
   -------------------------------------------------------------------- */

.display {
  font-family: var(--display);
  font-weight: 800;
  font-stretch: 118%;          /* Archivo's width axis — monumental, signage-like */
  line-height: 0.98;
  letter-spacing: -0.02em;
  text-wrap: balance;
  margin: 0;
}

.h-xl { font-size: clamp(2.4rem, 1.5rem + 3.4vw, 4.3rem); }
.h-lg { font-size: clamp(2rem, 1.3rem + 3vw, 3.4rem); }
.h-md { font-size: clamp(1.4rem, 1.1rem + 1.3vw, 1.9rem); font-stretch: 108%; font-weight: 700; }

.eyebrow {
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ice);
  margin: 0 0 var(--s2);
}
.eyebrow-dark { color: var(--melt); }

.lede {
  font-size: 1.22em;
  line-height: 1.55;
  color: var(--muted);
  max-width: 46ch;
}

.prose { max-width: var(--measure); }
.prose p { margin: 0 0 var(--s3); }
.prose h3 {
  font-family: var(--display);
  font-stretch: 108%;
  font-weight: 700;
  font-size: 1.32rem;
  letter-spacing: -0.01em;
  margin: var(--s4) 0 var(--s2);
}
.prose ul { margin: 0 0 var(--s3); padding-left: 1.15rem; }
.prose li { margin-bottom: var(--s1); }
.prose strong { font-weight: 600; }

/* --------------------------------------------------------------------
   header
   -------------------------------------------------------------------- */

.masthead {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rule);
}
.masthead-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s3); padding: 0.85rem 0;
}

.wordmark {
  font-family: var(--display);
  font-weight: 800; font-stretch: 112%;
  font-size: 1.02rem; letter-spacing: -0.01em;
  color: var(--basalt); text-decoration: none;
  display: flex; align-items: baseline; gap: 0.5rem;
}
.wordmark:hover { color: var(--ice-link); }
.wordmark-mark {
  font-family: var(--mono); font-size: 0.66rem; font-weight: 500;
  letter-spacing: 0.1em; color: var(--ice);
}

.nav { display: flex; gap: var(--s3); align-items: center; flex-wrap: wrap; }
.nav a {
  font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.03em;
  color: var(--muted); text-decoration: none;
}
.nav a:hover, .nav a[aria-current='page'] { color: var(--basalt); }
.nav a[aria-current='page'] { box-shadow: 0 2px 0 var(--sun); }

/* --------------------------------------------------------------------
   hero — the descent
   -------------------------------------------------------------------- */

.hero {
  position: relative;
  background:
    radial-gradient(120% 78% at 24% -8%, #2c6d8d 0%, transparent 58%),
    linear-gradient(178deg, var(--ice-deep) 0%, #082c42 46%, var(--basalt) 100%);
  color: var(--flour);
  overflow: hidden;
  padding: clamp(3.5rem, 2rem + 8vw, 8rem) 0 clamp(3rem, 2rem + 5vw, 6rem);
}

/* faint suspended-sediment texture */
.hero::after {
  content: '';
  position: absolute; inset: 0; z-index: 1;
  background-image:
    repeating-linear-gradient(101deg, rgba(143, 211, 224, 0.045) 0 1px, transparent 1px 76px),
    repeating-linear-gradient(-8deg, rgba(143, 211, 224, 0.03) 0 1px, transparent 1px 124px);
  pointer-events: none;
}

.hero-grid {
  position: relative; z-index: 2;
  display: grid;
  grid-template-columns: var(--gutter) minmax(0, 1fr);
  gap: 0 var(--s4);
  align-items: start;
}

/* The photograph lives behind the hero's content column only. It is held at
   low opacity and feathered away at the edges, so it reads as part of the
   gradient rather than as a rectangle pasted on top of it. The mask is on
   this pseudo-element, never on .hero-grid itself — masking the container
   would fade the headline along with the picture. */
.hero-grid::before {
  content: '';
  position: absolute; inset: -2rem -1.5rem; z-index: 0;
  background-image: url('/assets/img/hero-1920.jpg');
  background-image: image-set(url('/assets/img/hero-1920.webp') type('image/webp'),
                              url('/assets/img/hero-1920.jpg') type('image/jpeg'));
  background-size: cover;
  background-position: center 46%;
  background-repeat: no-repeat;
  opacity: 0.38;
  -webkit-mask-image: radial-gradient(120% 104% at 50% 46%, #000 18%, rgba(0,0,0,0.45) 62%, transparent 94%);
  mask-image: radial-gradient(120% 104% at 50% 46%, #000 18%, rgba(0,0,0,0.45) 62%, transparent 94%);
  pointer-events: none;
}

/* Keep the actual content above the photographic layer. */
.hero-grid > * { position: relative; z-index: 1; }

.hero-copy, .hero-aside { grid-column: 2; min-width: 0; }
.hero-copy { max-width: 26ch; }
.hero .display { color: #fff; }
.hero-lede { color: #c2d6dc; max-width: 42ch; margin: var(--s3) 0 var(--s4); }

.hero-actions { display: flex; flex-wrap: wrap; gap: var(--s2); }

/* Wide screens: headline and supporting text sit side by side, baselines low,
   so the hero fills its width instead of stranding a third of it. */
@media (min-width: 1100px) {
  .hero-grid {
    grid-template-columns: var(--gutter) minmax(0, 1.1fr) minmax(0, 0.9fr);
    align-items: end;
  }
  .hero-aside { grid-column: 3; padding-bottom: 0.35rem; }
  .hero-copy { max-width: 15ch; }
  .hero-lede { margin-top: 0; }
}

/* The depth scale.
   Ticks are laid out with space-between rather than absolute percentages.
   The readings are evenly spaced in reality (0, −50, −100, −150, −200) and
   the floor at −248 is within 1% of the next even step, so even distribution
   is both truthful and structurally safe: labels can never collide however
   short the column gets, which absolute percentage tops could not guarantee. */
.scale {
  position: relative;
  height: 100%; min-height: 22rem;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 0.2rem 0 3.4rem 2.1rem;
}
.scale-line {
  position: absolute; left: 1.05rem; top: 0.45rem; bottom: 3.6rem; width: 1px;
  background: linear-gradient(to bottom, var(--melt), rgba(143, 211, 224, 0.08));
  transform-origin: top;
}
.scale-tick {
  position: relative;
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.04em;
  line-height: 1.25;
  color: var(--muted-dark); white-space: nowrap;
}
/* dash crosses the vertical line */
.scale-tick::before {
  content: '';
  position: absolute; left: -1.45rem; top: 0.42em;
  width: 14px; height: 1px; background: var(--melt); opacity: 0.55;
}
.scale-tick-major { color: var(--melt); font-weight: 500; }
.scale-tick-major::before { left: -1.75rem; width: 22px; opacity: 1; }

/* Sits clear below the deepest tick. Hidden until there is room beside the
   copy for it, since the caption is wider than the gutter it lives in. */
/* Sits in the padding reserved at the foot of the column, so it can never
   ride up over the deepest tick. */
.scale-floor {
  position: absolute; bottom: 0.6rem; left: 0.65rem;
  font-family: var(--mono); font-size: 0.64rem; color: var(--muted-dark);
  line-height: 1.45; white-space: nowrap;
}

/* --------------------------------------------------------------------
   page head — inner pages; the hero's quieter sibling
   -------------------------------------------------------------------- */

.pagehead {
  background: linear-gradient(172deg, var(--ice-deep) 0%, #0a3049 62%, var(--basalt) 100%);
  color: var(--flour);
  padding: clamp(2.75rem, 2rem + 4vw, 5rem) 0 clamp(2.25rem, 1.75rem + 3vw, 3.75rem);
}
.pagehead .display { color: #fff; }
.pagehead .lede { color: #c2d6dc; max-width: 52ch; margin-top: var(--s3); }

.crumb {
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.04em;
  color: var(--muted-dark); margin: 0 0 var(--s3);
}
.crumb a { color: var(--melt); text-decoration: none; }
.crumb a:hover { color: #fff; text-decoration: underline; }

/* --------------------------------------------------------------------
   data strip
   -------------------------------------------------------------------- */

.strip {
  background: var(--basalt);
  color: var(--flour);
  border-top: 1px solid var(--rule-dark);
  padding: var(--s4) 0;
}
.strip-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  gap: var(--s3) var(--s4);
}
.datum-k {
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--muted-dark);
  margin: 0 0 0.35rem;
}
.datum-v {
  font-family: var(--display); font-weight: 700; font-stretch: 112%;
  font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.7rem);
  line-height: 1.1; margin: 0; color: #fff;
}
.datum-n {
  font-family: var(--mono); font-size: 0.7rem; color: var(--muted-dark);
  margin: 0.3rem 0 0;
}

/* --------------------------------------------------------------------
   sections — each is a station on the scale
   -------------------------------------------------------------------- */

/* .station is the in-flow variant (sits inside .wrap).
   .station-band is the full-bleed variant: it owns the background and the
   padding, and wraps a .wrap.station-grid to keep the same two-column rhythm. */
.station,
.station-grid {
  display: grid;
  grid-template-columns: var(--gutter) minmax(0, 1fr);
  gap: 0 var(--s4);
}
.station {
  padding: var(--s6) 0;
  border-top: 1px solid var(--rule);
}
.station:first-of-type { border-top: 0; }

.station-band { padding: var(--s6) 0; }

.station-mark {
  position: relative;
  font-family: var(--mono); font-size: 0.7rem; line-height: 1.5;
  color: var(--ice); letter-spacing: 0.04em;
  padding-top: 0.4rem;
}
.station-mark::after {
  content: '';
  position: absolute; left: 0; top: 3.2rem; bottom: -6.5rem; width: 1px;
  background: linear-gradient(to bottom, var(--rule), transparent);
}
.station:last-of-type .station-mark::after { display: none; }
.station-depth { display: block; color: var(--muted); }

.station-dark {
  background: var(--basalt);
  color: var(--flour);
  border-top: 0;
}
.station-dark .station-mark { color: var(--melt); }
.station-dark .station-depth { color: var(--muted-dark); }
.station-dark .station-mark::after { background: linear-gradient(to bottom, var(--rule-dark), transparent); }
.station-dark .display { color: #fff; }
.station-dark .lede, .station-dark .prose { color: #c2d6dc; }
.station-dark .prose strong { color: #fff; }
.station-dark a { color: var(--melt); }
.station-dark a:hover { color: #fff; }

.station-body { min-width: 0; }
.station-head { margin-bottom: var(--s4); }

/* --------------------------------------------------------------------
   tour cards
   -------------------------------------------------------------------- */

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: var(--s3);
}

.card {
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: var(--s3);
  display: flex; flex-direction: column; gap: var(--s2);
}
.station-dark .card {
  background: var(--basalt-2);
  border-color: var(--rule-dark);
}

.card-title {
  font-family: var(--display); font-weight: 700; font-stretch: 110%;
  font-size: 1.22rem; letter-spacing: -0.01em; margin: 0;
}
.station-dark .card-title { color: #fff; }

.card-spec {
  font-family: var(--mono); font-size: 0.72rem; line-height: 1.9;
  color: var(--muted); margin: 0; list-style: none; padding: 0;
  border-top: 1px solid var(--rule); padding-top: var(--s2);
}
.station-dark .card-spec { color: var(--muted-dark); border-color: var(--rule-dark); }
.card-spec li { display: flex; justify-content: space-between; gap: var(--s2); }
.card-spec b { font-weight: 500; color: var(--basalt); }
.station-dark .card-spec b { color: var(--flour); }

.card-note { font-size: 0.95rem; color: var(--muted); margin: 0; flex: 1; }
.station-dark .card-note { color: #c2d6dc; }

/* --------------------------------------------------------------------
   photographs
   -------------------------------------------------------------------- */

/* Figures share the prose measure so their left AND right edges line up with
   the running text. Without the cap they overhang the column and read as
   misaligned. */
.shot { margin: 0 0 var(--s4); max-width: var(--measure); }
.shot img {
  width: 100%; display: block;
  aspect-ratio: 16 / 9; object-fit: cover;
  border-radius: 3px;
  background: var(--rule);           /* placeholder tone while decoding */
}
.shot figcaption {
  font-family: var(--mono); font-size: 0.68rem; line-height: 1.6;
  color: var(--muted); margin-top: 0.55rem;
}
.station-dark .shot figcaption { color: var(--muted-dark); }
.station-dark .shot img { background: var(--rule-dark); }

.shot-wide img { aspect-ratio: 2 / 1; }

/* Where a figure sits above full-width content (the tour card grid) rather
   than above running text, it takes that width instead of the measure. */
.shot-full { max-width: none; }

/* --------------------------------------------------------------------
   buttons
   -------------------------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; gap: 0.55rem;
  font-family: var(--mono); font-size: 0.79rem; font-weight: 500;
  letter-spacing: 0.04em;
  padding: 0.78rem 1.3rem;
  border-radius: 2px; border: 1px solid transparent;
  text-decoration: none; cursor: pointer;
  transition: transform 0.16s ease, background-color 0.16s ease, color 0.16s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn::after { content: '→'; font-size: 0.95em; }

.btn-primary { background: var(--sun); color: var(--basalt); }
.btn-primary:hover { background: #f0ae74; color: var(--basalt); }

.btn-ghost { border-color: currentColor; color: var(--flour); background: transparent; }
.btn-ghost:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }

.btn-quiet {
  border-color: var(--rule); color: var(--basalt); background: transparent;
}
.btn-quiet:hover { border-color: var(--basalt); color: var(--basalt); }

/* --------------------------------------------------------------------
   season table
   -------------------------------------------------------------------- */

.season { width: 100%; border-collapse: collapse; font-size: 0.94rem; }
.season caption {
  font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--muted);
  text-align: left; padding-bottom: var(--s2);
}
.season th, .season td {
  text-align: left; padding: 0.7rem 0.9rem 0.7rem 0;
  border-bottom: 1px solid var(--rule); vertical-align: top;
}
.season th {
  font-family: var(--mono); font-size: 0.7rem; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted);
}
.season td:first-child {
  font-family: var(--mono); font-size: 0.78rem; color: var(--basalt); white-space: nowrap;
}

/* --------------------------------------------------------------------
   faq
   -------------------------------------------------------------------- */

.faq { max-width: var(--measure); }
.faq-item { border-bottom: 1px solid var(--rule); }
.faq-q {
  font-family: var(--display); font-weight: 600; font-stretch: 106%;
  font-size: 1.06rem; letter-spacing: -0.005em;
  padding: var(--s3) 2rem var(--s3) 0;
  cursor: pointer; list-style: none; position: relative;
}
.faq-q::-webkit-details-marker { display: none; }
.faq-q::after {
  content: '+'; position: absolute; right: 0; top: 50%;
  transform: translateY(-50%);
  font-family: var(--mono); font-size: 1.15rem; color: var(--ice);
}
.faq-item[open] .faq-q::after { content: '−'; }
.faq-a { padding: 0 0 var(--s3); color: var(--muted); }
.faq-a p { margin: 0 0 var(--s2); }
.faq-a p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------
   callouts
   -------------------------------------------------------------------- */

.note {
  border-left: 2px solid var(--sun);
  padding: var(--s2) 0 var(--s2) var(--s3);
  margin: var(--s4) 0;
  font-size: 0.98rem; color: var(--muted);
}
.note-k {
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--basalt);
  display: block; margin-bottom: 0.35rem;
}
.station-dark .note { color: #c2d6dc; }
.station-dark .note-k { color: #fff; }

.disclose {
  font-family: var(--mono); font-size: 0.72rem; line-height: 1.7;
  color: var(--muted); background: #e6eded;
  border: 1px solid var(--rule); border-radius: 3px;
  padding: var(--s2) var(--s3); margin: var(--s4) 0 0;
}

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

.foot {
  background: var(--basalt); color: var(--muted-dark);
  padding: var(--s5) 0 var(--s4);
  font-size: 0.92rem;
}
.foot-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: var(--s4); padding-bottom: var(--s4);
  border-bottom: 1px solid var(--rule-dark);
}
.foot-k {
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--flour); margin: 0 0 var(--s2);
}
.foot-list { list-style: none; margin: 0; padding: 0; }
.foot-list li { margin-bottom: 0.45rem; }
.foot a { color: var(--muted-dark); text-decoration: none; }
.foot a:hover { color: var(--melt); }
.foot-base {
  padding-top: var(--s3);
  display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4);
  justify-content: space-between;
  font-family: var(--mono); font-size: 0.7rem; color: var(--muted-dark);
}

/* --------------------------------------------------------------------
   motion — one page-load reveal, one scroll reveal, nothing else
   -------------------------------------------------------------------- */

/* Scoped to .js so that with scripting off — or if site.js fails to load —
   every section stays visible instead of the page rendering blank. */
.js .rise { opacity: 0; transform: translateY(14px); }
.js .rise-on { opacity: 1; transform: none; transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.3, 1); }
.rise-1 { transition-delay: 0.06s; }
.rise-2 { transition-delay: 0.14s; }
.rise-3 { transition-delay: 0.22s; }

.scale-line { transform: scaleY(0); transition: transform 1.5s cubic-bezier(0.3, 0.8, 0.3, 1) 0.2s; }
.scale-ready .scale-line { transform: scaleY(1); }
.scale-tick, .scale-floor { opacity: 0; transition: opacity 0.5s ease; }
.scale-ready .scale-tick, .scale-ready .scale-floor { opacity: 1; }
.scale-ready .scale-tick:nth-child(2) { transition-delay: 0.5s; }
.scale-ready .scale-tick:nth-child(3) { transition-delay: 0.7s; }
.scale-ready .scale-tick:nth-child(4) { transition-delay: 0.9s; }
.scale-ready .scale-tick:nth-child(5) { transition-delay: 1.1s; }
.scale-ready .scale-tick:nth-child(6) { transition-delay: 1.3s; }
.scale-ready .scale-floor { transition-delay: 1.5s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .rise, .js .rise-on { opacity: 1; transform: none; transition: none; }
  .scale-line { transform: scaleY(1); transition: none; }
  .scale-tick, .scale-floor { opacity: 1; transition: none; }
  .btn { transition: none; }
  .btn:hover { transform: none; }
}

/* --------------------------------------------------------------------
   responsive — the gutter folds away first
   -------------------------------------------------------------------- */

@media (max-width: 860px) {
  :root { --gutter: 0px; --s6: 4rem; }

  .hero-grid, .station, .station-grid { grid-template-columns: minmax(0, 1fr); gap: var(--s3); }

  .scale { display: none; }

  .station-mark {
    padding-top: 0;
    display: flex; gap: var(--s2); align-items: baseline;
    border-left: 2px solid var(--ice); padding-left: 0.7rem;
  }
  .station-mark::after { display: none; }
  .station-dark .station-mark { border-left-color: var(--melt); }

  .masthead-inner { flex-direction: column; align-items: flex-start; gap: var(--s1); }
  .nav { gap: var(--s2) var(--s3); width: 100%; }

  .hero-copy, .hero-aside { grid-column: 1; max-width: none; }
}

@media (max-width: 480px) {
  .card-spec li { flex-direction: column; gap: 0; }
  .foot-base { flex-direction: column; }
}