/* ==========================================================================
   Curious Souls — design system
   Hand-written. No framework, no builder. Replaces the Tilda stack.
   ========================================================================== */

:root {
  /* Warm editorial luxury + deep forest.
     Predominantly ivory and stone; forest is a material, used for roughly a
     fifth of the page. No black anywhere — even the body text is forest-tinted. */
  --paper:      #F4F0E8;   /* Warm Ivory — page ground        */
  --paper-2:    #E3DDD2;   /* Stone — the warm band           */
  --paper-3:    #D6CFC2;

  --forest:     #1E4A41;   /* Deep Forest — primary dark       */
  --forest-2:   #315C51;   /* Lifted Forest — subtle variation */

  --ink:        #24312C;   /* body text — deep forest-tinted, never black */
  --ink-2:      #4C5852;   /* secondary text on light                     */
  --ink-3:      #7D8480;   /* muted text on light                         */
  --taupe:      #A9A296;   /* Warm Taupe — muted text on forest           */

  --line:       #DDD6C9;
  --line-soft:  #E8E2D6;

  /* Antique champagne. Accent ONLY: primary CTA, eyebrows, accordion marker,
     hairlines on forest. Never a headline, never a large fill, never a gradient. */
  --accent:     #C1A875;
  --accent-2:   #94794A;
  --accent-tint:#EFE7D6;

  /* Legacy alias — a few rules still reference the old second dark surface */
  --ink-soft:   #315C51;

  --measure:    62ch;
  --page:       min(1280px, 100% - 3rem);
  --page-wide:  min(1560px, 100% - 3rem);

  --step--1: clamp(0.82rem, 0.79rem + 0.15vw, 0.9rem);
  --step-0:  clamp(1rem, 0.96rem + 0.2vw, 1.1rem);
  --step-1:  clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
  --step-2:  clamp(1.6rem, 1.35rem + 1.2vw, 2.45rem);
  --step-3:  clamp(2.15rem, 1.6rem + 2.5vw, 3.8rem);
  --step-4:  clamp(2.9rem, 1.85rem + 4.8vw, 5.8rem);

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

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

/* The fixed header's rendered height, expressed the way it is actually built:
   rem padding plus the logo. Written as a variable so the offset below the
   header follows the reader's font size instead of drifting away from it when
   text is scaled up. */
:root {
  --header-h: calc(2.2rem + 88px + 1.5rem);
  --header-h-solid: calc(0.9rem + 58px + 0.9rem);
}
@media (max-width: 640px) {
  :root {
    --header-h: calc(2.2rem + 68px + 1.5rem);
    --header-h-solid: calc(0.9rem + 46px + 0.9rem);
  }
}

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: var(--step-0);
  font-weight: 300;
  line-height: 1.65;
  letter-spacing: 0.005em;
  -webkit-font-smoothing: antialiased;
}

img, video { max-width: 100%; display: block; }

/* --------------------------------------------------------------- typography */

/* Newsreader: generous x-height, so it wants light weight, slightly tight
   tracking, and no size compensation. Optical sizing keeps hairlines honest. */
h1, h2, h3, .display {
  font-family: 'Newsreader', Georgia, 'Times New Roman', serif;
  font-weight: 300;
  font-optical-sizing: auto;
  line-height: 1.08;
  letter-spacing: -0.012em;
  margin: 0;
  text-wrap: balance;
}
h1 { font-weight: 200; }

h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-2); }

.lede {
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 36ch;
  font-weight: 300;
}

p { margin: 0 0 1.1em; max-width: var(--measure); }
p:last-child { margin-bottom: 0; }

/* Section labels carry the accent — one decisive, repeated use of brass
   rather than three timid ones. Echoes the letterspaced CURIOUS in the logo. */
.eyebrow {
  font-size: var(--step--1);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 400;
  color: var(--accent);
  margin: 0 0 1.6rem;
  display: block;
}

/* Tagline sitting beneath the logo lockup */
.lockup-tagline {
  font-size: 0.74rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 1rem 0 0;
  padding-left: 0.34em; /* optical compensation for the tracking */
}

em, .italic { font-style: italic; }

a { color: inherit; }

/* -------------------------------------------------------------------- layout */

.wrap  { width: var(--page); margin-inline: auto; }
.wrap-wide { width: var(--page-wide); margin-inline: auto; }

section { padding-block: clamp(5rem, 11vw, 11rem); }
section.tight { padding-block: clamp(3.5rem, 7vw, 7rem); }

.dark {
  background: var(--forest);
  color: var(--paper);
}
/* Lighter forest, for a second dark moment that shouldn't repeat the first */
.dark-2 { background: var(--forest-2); }
/* Gold survives onto dark — it's the one accent that carries the premium
   register. Supporting text drops to taupe. */
.dark .eyebrow { color: var(--accent); }
.dark .lede    { color: var(--taupe); }
.dark p        { color: var(--taupe); }
.dark h1, .dark h2, .dark h3, .dark strong { color: var(--paper); }
.dark .rule { background: rgba(193,168,117,0.32); }

/* Second dark surface, for a dark section adjacent to another dark section */
.dark-soft { background: var(--forest-2); }

/* Gentle sectioning — a second paper tone rather than a dark panel */
.warm { background: var(--paper-2); }

/* ---------------------------------------------------------------- feature
   Full-bleed photography with text over it. This is the contrast device —
   it replaces dark panels, and it puts the photographs to work.
   -------------------------------------------------------------------- */
.feature {
  position: relative;
  color: var(--paper);
  display: flex;
  align-items: center;
  min-height: clamp(560px, 82vh, 860px);
  overflow: hidden;
  background: var(--forest);
}
.feature > .slot {
  position: absolute; inset: 0;
  margin: 0; border: 0;
  background: linear-gradient(150deg, #2E5C50, #1B4038);
}
.feature > .slot::before { inset: 2rem; border-color: rgba(255,255,255,0.16); }
.feature > .slot::after  { color: rgba(255,255,255,0.5); }
.feature-scrim {
  position: absolute; inset: 0; z-index: 3;
  background: linear-gradient(105deg,
    rgba(22,52,45,0.72) 0%,
    rgba(22,52,45,0.5) 42%,
    rgba(22,52,45,0.18) 72%,
    rgba(22,52,45,0.05) 100%);
}
.feature-scrim.centered {
  background: linear-gradient(to bottom,
    rgba(22,52,45,0.35), rgba(22,52,45,0.62));
}
/* Below 760px the copy runs the full width of the screen, so the 105deg scrim
   has already faded to 0.05 exactly where the arrow links sit and the gold
   lands on bare photograph. Even the wash out vertically on mobile, same
   forest, same idiom as .feature-scrim.centered. Desktop is untouched. */
@media (max-width: 759px) {
  .feature-scrim {
    background: linear-gradient(to bottom,
      rgba(22,52,45,0.45) 0%,
      rgba(22,52,45,0.66) 45%,
      rgba(22,52,45,0.80) 100%);
  }
}
.feature .wrap { position: relative; z-index: 4; }
.feature .eyebrow { color: var(--accent); }
.feature p { color: rgba(244,240,232,0.9); }
.feature-copy { max-width: 46ch; }

.feature .join-form input[type="email"] { border-color: rgba(244,240,232,0.42); }
.feature .join-form input::placeholder { color: rgba(244,240,232,0.6); }
.feature .join-form input:focus { border-color: var(--accent); }
.feature .join-note { color: rgba(244,240,232,0.68); }
.feature .btn { background: var(--paper); color: var(--forest); border-color: var(--paper); }
.feature .btn:hover { background: transparent; color: var(--paper); }

.rule { height: 1px; background: var(--line); border: 0; margin: 0; }

.cols {
  display: grid;
  gap: clamp(2rem, 5vw, 5rem);
}
@media (min-width: 860px) {
  .cols-2  { grid-template-columns: 1fr 1fr; }
  .cols-3  { grid-template-columns: repeat(3, 1fr); }
  /* asymmetric editorial split */
  .cols-ed { grid-template-columns: 5fr 7fr; align-items: center; }
  .cols-ed-r { grid-template-columns: 7fr 5fr; align-items: center; }
}

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

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.95em 1.9em;
  border: 1px solid var(--forest);
  border-radius: 100px;
  background: var(--forest);
  color: var(--paper);
  font-size: var(--step--1);
  font-weight: 400;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 0.4s var(--ease), color 0.4s var(--ease), border-color 0.4s var(--ease);
}
.btn:hover { background: transparent; color: var(--ink); }

.btn-ghost { background: transparent; color: var(--ink); }
.btn-ghost:hover { background: var(--ink); color: var(--paper); }

/* ---------------------------------------------------------- CTA hierarchy
   PRIMARY   filled champagne gold + arrow — one per section, maximum
   SECONDARY transparent + border + arrow
   TERTIARY  .link-underline, footnotes only
   -------------------------------------------------------------------- */
.btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--forest);
}
.btn-primary:hover {
  background: var(--accent-2);
  border-color: var(--accent-2);
  color: var(--paper);
}
.dark .btn-primary,
.feature .btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--forest);
}
.dark .btn-primary:hover,
.feature .btn-primary:hover {
  background: transparent;
  color: var(--accent);
  border-color: var(--accent);
}

/* Arrow. Opt-in so existing buttons are untouched. */
.btn-arrow::after {
  content: "→";
  font-size: 1.05em;
  line-height: 1;
  transition: transform 0.35s var(--ease);
}
.btn-arrow:hover::after { transform: translateX(4px); }

/* Circular arrow — the card CTA, replacing underlined text */
.arrow-circle {
  display: inline-grid;
  place-items: center;
  width: 46px; height: 46px;
  border-radius: 50%;
  border: 1px solid var(--accent);
  color: var(--accent);
  text-decoration: none;
  font-size: 1.05rem;
  flex: none;
  transition: background 0.35s var(--ease), color 0.35s var(--ease),
              transform 0.35s var(--ease);
}
.arrow-circle::after { content: "→"; }
.arrow-circle:hover {
  background: var(--accent);
  color: var(--ink);
  transform: translateX(3px);
}

.dark .btn { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.dark .btn:hover { background: transparent; color: var(--paper); }
.dark .btn-ghost { background: transparent; color: var(--paper); border-color: rgba(244,240,232,0.4); }
.dark .btn-ghost:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); }

/* on photography */
.btn-light { background: rgba(255,255,255,0.94); color: var(--ink); border-color: transparent; }
.btn-light:hover { background: transparent; color: #fff; border-color: rgba(255,255,255,0.7); }
.btn-outline-light { background: transparent; color: #fff; border-color: rgba(255,255,255,0.55); }
.btn-outline-light:hover { background: #fff; color: var(--ink); border-color: #fff; }

.link-underline {
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 0.15em;
  font-size: var(--step--1);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  transition: opacity 0.3s var(--ease);
}
.link-underline:hover { opacity: 0.55; }

/* ======================================================================
   MEDIA SLOTS — the placeholder system
   Drop a file at the img's src path and it replaces the placeholder.
   No code change needed.
   ====================================================================== */

.slot {
  position: relative;
  margin: 0;
  overflow: hidden;
  background: linear-gradient(150deg, var(--paper-2), var(--paper-3));
  border: 1px solid var(--line);
}
.slot > img,
.slot > video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 2;
}
/* Video sits above the still and fades in once it can actually play, so a
   slow connection never shows a black rectangle. */
.slot > video {
  z-index: 3;
  opacity: 0;
  transition: opacity 1.2s var(--ease);
}
.slot > video.is-ready { opacity: 1; }

/* the label, visible only while empty */
.slot::after {
  content: attr(data-slot);
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1.5rem;
  font-family: 'Inter', sans-serif;
  font-size: 0.72rem;
  line-height: 1.6;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  white-space: pre-line;
}
.slot::before {
  content: "";
  position: absolute;
  inset: 1rem;
  border: 1px dashed var(--line);
  z-index: 0;
}
.dark .slot { background: var(--ink-soft); border-color: rgba(244,240,232,0.14); }
.dark .slot::after { color: var(--taupe); }
.dark .slot::before { border-color: rgba(244,240,232,0.14); }

/* aspect ratios */
.ar-portrait  { aspect-ratio: 3 / 4; }
.ar-square    { aspect-ratio: 1 / 1; }
.ar-landscape { aspect-ratio: 4 / 3; }
.ar-wide      { aspect-ratio: 16 / 9; }
.ar-cinema    { aspect-ratio: 21 / 9; }
.ar-tall      { aspect-ratio: 2 / 3; }

/* ---------------------------------------------------------------- fact flags */
/* Wraps anything I could not verify. Remove the class once confirmed. */
.tbc {
  border-bottom: 1px dotted #B08968;
  cursor: help;
}
.tbc::after {
  content: "?";
  font-size: 0.6em;
  vertical-align: super;
  color: #B08968;
  margin-left: 0.15em;
}

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

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  padding-block: 2.2rem 1.5rem;
  transition: background 0.45s var(--ease), padding 0.45s var(--ease),
              box-shadow 0.45s var(--ease), color 0.45s var(--ease);
  color: #fff;
}
/* Scrim behind the transparent header, so the logo and nav never dissolve
   into a pale photograph. This is what fixes logo legibility — not a
   heavier logo treatment. */
.site-header::before {
  content: "";
  position: absolute;
  inset: -1px 0 auto 0;
  height: 220%;
  background: linear-gradient(to bottom,
    rgba(22,52,45,0.62) 0%,
    rgba(22,52,45,0.30) 45%,
    rgba(22,52,45,0) 100%);
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.45s var(--ease);
  z-index: -1;
}
.site-header.is-solid::before { opacity: 0; }

.site-header.is-solid {
  background: rgba(244,240,232,0.94);
  backdrop-filter: saturate(150%) blur(14px);
  color: var(--ink);
  padding-block: 0.9rem;
  box-shadow: inset 0 -1px 0 var(--line);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}
/* Logo lockup. Over the hero it renders as a white silhouette; once the
   header goes solid it returns to full colour. */
.brand { display: block; line-height: 0; }
/* Two-tone lockup over the deep emerald hero: champagne crescent (#C5A568),
   warm ivory lettering (#F4F0E8). Generated from the original artwork by
   separating the crescent from the type in the alpha channel — same shapes,
   recoloured, nothing redrawn. Served as a background image rather than a
   mask so both colours survive. The solid header returns to the full-colour
   original. */
/* The lockup is a flex item in .header-inner. Without flex: none it shrinks
   below its own width whenever the row is tight, and because the img is
   height-fixed / width-auto the logo gets squashed horizontally instead of
   the row overflowing. That is why the mark looked missing on the English
   header and undersized on the Finnish and Russian ones. */
.brand { flex: none; }
.brand img {
  height: 88px;          /* was 64px — the mark now carries the hero */
  width: auto;
  transition: height 0.45s var(--ease), opacity 0.3s var(--ease);
}
.site-header:not(.is-solid) .brand {
  background: url("../images/brand/curious-souls-logo-duotone.png") left center / contain no-repeat;
  filter: drop-shadow(0 3px 18px rgba(18, 60, 53, 0.5));
  /* No left offset: the lockup shares the same gutter as every other
     .wrap on the page, so it aligns with the hero headline beneath it. */
}
/* the img still sizes the lockup; only its own pixels are hidden */
.site-header:not(.is-solid) .brand img { opacity: 0; }

/* Same two-tone treatment for a lockup placed on a forest panel */
.on-forest {
  background: url("../images/brand/curious-souls-logo-duotone.png") left center / contain no-repeat;
}
.on-forest img { opacity: 0; }
.site-header.is-solid .brand img { height: 58px; filter: none; }
@media (max-width: 640px) {
  .brand img { height: 68px; }
  .site-header.is-solid .brand img { height: 46px; }
}
/* The old maximum of 2.8rem over-subscribed the row above 1360px: seven
   labels, the switcher, the logo and the CTA needed more than the wrap
   allows. Nothing overflowed only because the logo was silently absorbing
   it. With the logo pinned, the gap has to be the thing that gives. */
.nav { display: none; gap: clamp(0.85rem, 1.5vw, 1.6rem); align-items: center; }
@media (min-width: 1100px) { .nav { display: flex; } }
.nav a {
  text-decoration: none;
  /* A nav label is one phrase. As flex items these shrink below their own
     text width and break mid-label, which happened in every language. */
  white-space: nowrap;
  font-size: var(--step--1);
  letter-spacing: 0.06em;
  opacity: 0.85;
  transition: opacity 0.3s var(--ease);
}
.nav a:hover { opacity: 1; }

/* The header's height is set by its tallest child, and that child is this
   button, not the logo. Let it wrap and it grows from 64px to 159px at a
   150% font size, putting the header far below where any fixed offset
   expects it. Keeping the label on one line keeps the logo the tallest
   thing in the row, which is what --header-h is calculated from. */
.header-cta {
  white-space: nowrap;
  /* Side padding gives way before the row does, so the button can stay on
     one line at large font sizes without pushing the header wider than the
     screen. */
  padding: 0.7em clamp(0.75em, 3.4vw, 1.5em);
  border: 1px solid currentColor;
  border-radius: 100px;
  text-decoration: none;
  font-size: var(--step--1);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  transition: background 0.35s var(--ease), color 0.35s var(--ease);
}
.site-header.is-solid .header-cta:hover { background: var(--ink); color: var(--paper); }
.header-cta:hover { background: #fff; color: var(--ink); }

/* The label is one phrase. From tablet up, where the nav and the language
   switcher share the row, stop flex compressing the button into two lines;
   it cannot go narrower than its own text anyway. Phones keep the previous
   behaviour: the nav is hidden there, so the switcher costs the row nothing. */
@media (min-width: 768px) {
  .header-cta { white-space: nowrap; flex: none; }
}

/* Primary header CTA — champagne gold, in both header states */
.header-cta.is-primary,
.site-header.is-solid .header-cta.is-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--ink);
}
.header-cta.is-primary:hover,
.site-header.is-solid .header-cta.is-primary:hover {
  background: var(--accent-2);
  border-color: var(--accent-2);
  color: var(--paper);
}
.header-cta.is-primary::after {
  content: "→";
  margin-left: 0.5em;
  display: inline-block;
  transition: transform 0.35s var(--ease);
}
.header-cta.is-primary:hover::after { transform: translateX(3px); }
@media (max-width: 1120px) and (min-width: 1100px) {
  .header-cta.is-primary { padding: 0.7em 1.15em; letter-spacing: 0.06em; }
}
/* Phones. The row is logo + CTA + burger with no nav, and it is tightest in
   the language whose CTA word is longest. Give the row a smaller gap and the
   button slightly less air so the logo keeps its full size in all three. */
@media (max-width: 767px) { .header-inner { gap: 1rem; } }
@media (max-width: 479px) {
  .header-cta { padding-left: 0.95em; padding-right: 0.95em; letter-spacing: 0.04em; }
}
/* The row is logo, CTA and burger. The longest labels ("Start a conversation",
   "Katso tulevat matkat" and its Russian counterpart) run to about 217px, which
   pushed the burger past the right edge, where it could not be tapped: the
   header is fixed, so the overflow never becomes a scrollbar the reader could
   reach. Three small savings recover roughly 30px between them and bring the
   widest label down to 204px, which fits from 375px up at the full type size.
   Only the very narrowest phones need the type to give a little as well. */
@media (max-width: 400px) {
  .header-inner { gap: 0.6rem; }
  .header-cta {
    padding-left: 0.7em;
    padding-right: 0.7em;
    letter-spacing: 0.02em;
  }
}
@media (max-width: 365px) {
  .header-cta { font-size: 0.76rem; }
}
/* Narrow desktop: the header has logo + six nav items + CTA in one row.
   Tighten the outer gap and scale the lockup so nothing collides. The
   champagne two-tone treatment is unchanged, only its size responds.
   The nav gap itself now clamps low enough site-wide, so it is no longer
   repeated here. */
@media (min-width: 1100px) and (max-width: 1360px) {
  .header-inner { gap: 1.25rem; }
  .site-header:not(.is-solid) .brand img { height: 68px; }
  .site-header.is-solid .brand img { height: 48px; }
}

.burger {
  display: grid; place-items: center;
  width: 44px; height: 44px;
  background: none; border: 0; color: inherit; cursor: pointer;
}
@media (min-width: 1100px) { .burger { display: none; } }
.burger span { display: block; width: 22px; height: 1px; background: currentColor; position: relative; }
.burger span::before, .burger span::after {
  content: ""; position: absolute; left: 0; width: 22px; height: 1px; background: currentColor;
}
.burger span::before { top: -7px; }
.burger span::after  { top: 7px; }

.mobile-nav {
  position: fixed; inset: 0; z-index: 99;
  background: var(--paper);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 1.6rem;
  opacity: 0; visibility: hidden;
  transition: opacity 0.4s var(--ease), visibility 0.4s;
}

/* -------------------------------------------------------- language switcher
   Plain links, no detection and no redirect: a crawler and a reader see the
   same thing. The current language is a span, not a self-link. Inside .nav on
   desktop and at the foot of the mobile panel, so it inherits the existing
   type and needs no layout of its own. */
.lang { display: inline-flex; align-items: center; gap: 0.5rem; }
.nav .lang a { opacity: 0.5; }
.nav .lang a:hover, .nav .lang a:focus-visible { opacity: 1; }
.lang-on { opacity: 0.9; }
.nav .lang-on { font-size: var(--step--1); letter-spacing: 0.06em; }
.mobile-nav .lang { gap: 1.1rem; margin-top: 0.4rem; }
.mobile-nav .lang a, .mobile-nav .lang-on {
  font-family: inherit;
  font-size: var(--step--1);
  letter-spacing: 0.1em;
  color: var(--ink-3);
}
.mobile-nav .lang-on { color: var(--ink); }
.mobile-nav.is-open { opacity: 1; visibility: visible; }
.mobile-nav a {
  font-family: 'Newsreader', Georgia, serif;
  font-size: var(--step-2);
  text-decoration: none;
  color: var(--ink);
}

/* --------------------------------------------------------------------- hero */

/* The hero is bottom-aligned, so a content column taller than the hero grows
   upwards — straight under the fixed header, which carries no offset of its
   own. That is why the English page looked right while the Russian and Finnish
   ones did not: longer words wrap to more lines. The top padding is a floor
   the content cannot pass; with box-sizing: border-box and bottom alignment it
   changes nothing at all while the content still fits.
   The vh line is a fallback: svh arrived in Safari 15.4 and Chrome 108, and on
   anything older the whole declaration is dropped and the hero collapses to the
   height of its text. */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: flex-start;
  padding: calc(var(--header-h) + 1rem) 0 clamp(3rem, 8vh, 7rem);
  color: #fff;
  overflow: hidden;
}
.hero .slot {
  position: absolute; inset: 0;
  border: 0; margin: 0;
  background: linear-gradient(150deg, #2A5449, #193F37);
}
.hero .slot::before { inset: 2rem; border-color: rgba(255,255,255,0.16); }
.hero .slot::after { color: rgba(255,255,255,0.5); }
/* Warm olive-charcoal rather than neutral black, and materially stronger —
   the hero photograph is high-key, so the scrim carries the contrast. */
.hero-scrim {
  position: absolute; inset: 0; z-index: 3;
  background:
    linear-gradient(to bottom,
      rgba(22,52,45,0.58) 0%,
      rgba(22,52,45,0.28) 32%,
      rgba(22,52,45,0.72) 72%,
      rgba(22,52,45,0.92) 100%),
    linear-gradient(105deg,
      rgba(30,74,65,0.45) 0%,
      rgba(30,74,65,0.10) 60%,
      rgba(30,74,65,0) 100%);
}
.hero-content { position: relative; z-index: 4; }
/* .hero and .feature are flex containers; their .wrap child is a flex item.
   A flex item defaults to min-width:auto, so a long unbreakable token — the
   nbsp-joined "travelling for." — sets a min-content floor and pushes the
   item past the viewport, which overflow:hidden then clips. min-width:0
   lets it shrink properly. */
.hero > .wrap,
.feature > .wrap { min-width: 0; max-width: 100%; }
/* Bottom-anchored while there is room, top-anchored when there is not.
   align-items: flex-end cannot do this: an item taller than the container
   overflows the start edge and slides under the fixed header, which is what
   happened on the longer Russian and Finnish headlines and at larger font
   sizes. An auto margin resolves to zero instead of overflowing. */
.hero > .wrap { margin-top: auto; }

/* Desktop size is unchanged: the clamp still tops out at 5.8rem, matching
   --step-4. Only the narrower end scales down harder so the headline always
   fits rather than overflowing. */
.hero h1 {
  max-width: min(16ch, 100%);
  font-size: clamp(2.35rem, 1.1rem + 5.3vw, 5.8rem);
  overflow-wrap: break-word;
}
.hero-sub {
  font-size: var(--step-1);
  font-weight: 300;
  max-width: 44ch;
  margin: 1.6rem 0 2.6rem;
  color: rgba(255,255,255,0.9);
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.9rem; }

/* ------------------------------------------------------------------ numbers */

.stats {
  display: grid;
  gap: clamp(2rem, 4vw, 3rem);
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 780px) {
  .stats { grid-template-columns: repeat(4, 1fr); }
  .stats-3 { grid-template-columns: repeat(3, 1fr); }
}
.stat-n {
  font-family: 'Newsreader', Georgia, serif;
  font-size: var(--step-3);
  line-height: 1;
  display: block;
  margin-bottom: 0.5rem;
}
/* Qualitative stat — sits in the numeric row without shouting */
.stat-n-text {
  font-size: var(--step-2);
  line-height: 1.08;
  font-style: italic;
}
.stat-l {
  font-size: var(--step--1);
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ink-3);
  max-width: 20ch;
}
.dark .stat-l { color: var(--taupe); }

/* ----------------------------------------------------------------- journeys */

.journey {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  padding-block: clamp(2.5rem, 5vw, 4rem);
  border-top: 1px solid var(--line);
  align-items: center;
}
@media (min-width: 860px) {
  .journey { grid-template-columns: 5fr 7fr; }
  .journey:nth-child(even) .journey-media { order: 2; }
}
.journey-meta {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 0.9rem; margin-bottom: 1.2rem;
}
.tag {
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.45em 1em;
  border-radius: 100px;
  border: 1px solid var(--line);
  color: var(--ink-3);
  white-space: nowrap;
}
.tag-open { border-color: var(--accent); color: var(--accent); background: rgba(91,99,83,0.06); }
.tag-out  { border-color: var(--line); color: var(--ink-3); }
.journey-date {
  font-size: var(--step--1);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.journey h3 { margin-bottom: 0.7rem; }
.journey-place {
  font-size: var(--step--1);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 1.4rem;
}

/* --------------------------------------------------- journey card grid
   Compact editorial cards for the Journeys hub. Hairlines rather than
   shadows, square corners, image as anchor but not as billboard — three
   journeys visible at once on desktop.
   The older full-width .journey row is still used on the homepage.
   -------------------------------------------------------------------- */
.journey-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 3.2vw, 3rem) clamp(1.6rem, 2.4vw, 2.4rem);
}
@media (min-width: 620px)  { .journey-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .journey-grid { grid-template-columns: repeat(3, 1fr); } }
/* four-up variant for the homepage teaser, so four journeys sit in one row
   rather than three plus an orphan. Same cards, same component. */
@media (min-width: 1000px) { .journey-grid--4 { grid-template-columns: repeat(4, 1fr); } }

.jcard { display: flex; flex-direction: column; }

.jcard .slot {
  aspect-ratio: 4 / 5;
  margin: 0 0 1.3rem;
  border: 0;
  border-radius: 0;
}
.jcard .slot > img { transition: transform 1.1s var(--ease); }
.jcard:hover .slot > img { transform: scale(1.03); }

/* The picture is a second way into the retreat page. The link lies over the
   image rather than wrapping it, so .slot > img stays a direct child and keeps
   its cover positioning and hover zoom. z-index 4 clears the still (2) and the
   video layer (3). The title link carries the accessible name, so this one is
   hidden from assistive tech and kept out of the tab order. */
.jcard-media { position: absolute; inset: 0; z-index: 4; }

.jcard-body { display: flex; flex-direction: column; flex: 1 1 auto; }

/* status + date sit above the title, separated by a hairline */
.jcard-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 0.9rem;
  padding-bottom: 0.85rem;
  margin-bottom: 0.95rem;
  border-bottom: 1px solid var(--line);
}
.jcard-date {
  font-size: 0.72rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.jcard .tag { font-size: 0.62rem; padding: 0.35em 0.85em; }

.jcard h3 {
  font-size: var(--step-1);
  line-height: 1.15;
  margin: 0 0 0.35rem;
}
/* Title link. Inherits the heading entirely and only shows itself on hover;
   the global :focus-visible outline covers keyboard use. */
.jcard-title-link { color: inherit; text-decoration: none; }
.jcard-title-link:hover { text-decoration: underline; text-underline-offset: 0.14em; }
/* Price shares the place paragraph, one line below it, so the figure is easy
   to find and still quieter than the title, the date and the status above. */
.jcard-price { color: var(--ink-2); }

.jcard-place {
  font-size: var(--step--1);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 0.9rem;
}
.jcard p.jcard-text {
  font-size: var(--step--1);
  line-height: 1.6;
  color: var(--ink-2);
  margin: 0;
  max-width: none;
}

/* understated text CTA, pinned to the foot so cards align */
.jcard-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  align-self: flex-start;
  margin-top: auto;
  padding-top: 1.3rem;
  font-size: var(--step--1);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--accent-2);
  transition: gap 0.3s var(--ease), color 0.3s var(--ease);
}
.jcard-cta::after { content: "→"; }
.jcard-cta:hover { gap: 0.85em; color: var(--ink); }

/* A journey you can still book gets a control rather than a line of text:
   same type, same colour, same arrow, plus a hairline and a pill so the eye
   finds the action. Waiting-list cards keep the plain treatment on purpose,
   so the two states stay distinguishable at a glance. The pill carries its
   own padding, so the breathing room above it moves to the paragraph before. */
.jcard-cta--book {
  padding: 0.55em 1em;
  border: 1px solid currentColor;
  border-radius: 100px;
  transition: gap 0.3s var(--ease), color 0.3s var(--ease),
              background 0.3s var(--ease), border-color 0.3s var(--ease);
}
/* The pill brings its own padding, so the air above it moves to the paragraph
   before. Slightly tighter than the 1.3rem the plain CTA uses, because the
   border already reads as separation. */
.jcard p.jcard-text:has(+ .jcard-cta--book) { margin-bottom: 0.85rem; }
.jcard-cta--book:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--forest);
}

/* Four-up only. At that width the cards sit shoulder to shoulder and the eye
   reads across them, so a two-line date or a two-line place on one card drags
   its title and description out of step with the rest. Reserving two lines in
   those two short fields puts the titles on one baseline and starts every
   description at the same height. Descriptions themselves stay their natural
   length: forcing those equal would trade a small misalignment for a large
   empty box. Narrower layouts already line up and are left alone. */
@media (min-width: 1000px) {
  .journey-grid .jcard-date  { min-height: 3.3em; }
  .journey-grid .jcard-place { min-height: 3.3em; margin-bottom: 0.55rem; }
}

/* past journeys — same component, deliberately quieter */
.jcard--past .jcard-meta { border-bottom-color: var(--line-soft); }
.jcard--past h3 { font-size: var(--step-0); font-weight: 400; }
.jcard--past .slot { aspect-ratio: 1 / 1; margin-bottom: 1.1rem; }

/* ------------------------------------------------------ instagram pathway
   Instagram is the living archive; the website stays curated. A quiet
   editorial band — never an embedded feed, never a gallery, never a banner.
   -------------------------------------------------------------------- */
.ig-band {
  display: grid;
  gap: clamp(1.4rem, 4vw, 4rem);
  border-top: 1px solid var(--line);
  padding-top: clamp(2.6rem, 5vw, 3.6rem);
  margin-top: clamp(3rem, 6vw, 4.5rem);
}
@media (min-width: 860px) {
  .ig-band { grid-template-columns: 5fr 7fr; align-items: start; }
}
.ig-band h3 { font-size: var(--step-2); margin: 0; max-width: 18ch; }
.ig-band p { color: var(--ink-2); margin: 0 0 1.5rem; max-width: 54ch; }
.ig-band ul {
  list-style: none;
  margin: 0 0 1.6rem;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
}
.ig-band li {
  font-size: var(--step--1);
  color: var(--ink-3);
  position: relative;
  padding-left: 1rem;
}
.ig-band li::before {
  content: "";
  position: absolute; left: 0; top: 0.62em;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--accent);
}
.dark .ig-band { border-top-color: rgba(193,168,117,0.3); }
.dark .ig-band p, .dark .ig-band li { color: var(--taupe); }

/* generic understated arrow link, used by the Instagram pathway */
.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-size: var(--step--1);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--accent-2);
  transition: gap 0.3s var(--ease), color 0.3s var(--ease);
}
.arrow-link::after { content: "→"; }
.arrow-link:hover { gap: 0.85em; color: var(--ink); }
.dark .arrow-link, .feature .arrow-link { color: var(--accent); }
.dark .arrow-link:hover, .feature .arrow-link:hover { color: var(--paper); }

/* ------------------------------------------------------------- gather cards */

.gather { padding-top: 2.2rem; border-top: 1px solid var(--line); }
.gather .slot { margin-bottom: 1.8rem; }
.gather h3 { font-size: var(--step-2); margin-bottom: 0.9rem; }
.gather p { color: var(--ink-2); margin-bottom: 1.6rem; }

/* ------------------------------------------------------- immersive cards
   Photography-led entry points: image, gradient, text over it, circular
   arrow. Replaces the bordered card + underlined link.
   -------------------------------------------------------------------- */
.card-im {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  text-decoration: none;
  color: var(--paper);
  background: var(--ink-soft);
  border: 0;
}
.card-im .slot {
  position: absolute; inset: 0;
  margin: 0; border: 0;
  background: linear-gradient(150deg, #2A5449, #1A423A);
}
.card-im .slot::before { inset: 1.2rem; border-color: rgba(244,240,232,0.16); }
.card-im .slot::after  { color: rgba(244,240,232,0.45); }
.card-im img { transition: transform 1.2s var(--ease); }
.card-im:hover img { transform: scale(1.04); }

.card-im-scrim {
  position: absolute; inset: 0; z-index: 4;
  background: linear-gradient(to bottom,
    rgba(22,52,45,0.10) 0%,
    rgba(22,52,45,0.30) 42%,
    rgba(22,52,45,0.82) 100%);
}
.card-im-body {
  position: absolute; z-index: 5;
  inset: auto 0 0 0;
  padding: clamp(1.6rem, 2.5vw, 2.2rem);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.2rem;
}
.card-im-body h3 { font-size: var(--step-2); margin-bottom: 0.4rem; color: var(--paper); }
.card-im-tag {
  font-family: 'Newsreader', Georgia, serif;
  font-style: italic;
  font-size: var(--step-1);
  line-height: 1.25;
  color: var(--accent);
  margin: 0 0 0.6rem;
}
.card-im-body p:last-of-type {
  font-size: var(--step--1);
  color: rgba(244,240,232,0.82);
  margin: 0;
  max-width: 30ch;
}
/* No photograph yet? Render the card as a solid forest panel rather than a
   dashed placeholder box. Reads as a deliberate editorial choice instead of
   an unfinished slot — and swaps back the moment an image exists. */
.card-im--solid { background: var(--forest); }
.card-im--solid.alt { background: var(--forest-2); }
.card-im--solid .card-im-scrim {
  background: linear-gradient(to bottom,
    rgba(244,240,232,0.05) 0%, rgba(22,52,45,0.35) 100%);
}
.card-im--solid .card-im-body { position: relative; inset: auto; height: 100%; }
.card-im--solid .card-im-body > div { margin-top: auto; }

.card-im .arrow-circle { pointer-events: none; }
.card-im:hover .arrow-circle {
  background: var(--accent);
  color: var(--ink);
}

/* ------------------------------------------------------------------ split
   50% immersive photography / 50% deep olive panel. Premium executive
   register rather than a full-bleed banner.
   -------------------------------------------------------------------- */
.split {
  display: grid;
  padding: 0;
  background: var(--ink);
  overflow: hidden;
}
@media (min-width: 900px) { .split { grid-template-columns: 1fr 1fr; } }
.split-media { position: relative; min-height: clamp(340px, 46vw, 640px); }
.split-media .slot {
  position: absolute; inset: 0; margin: 0; border: 0;
  background: linear-gradient(150deg, #2A5449, #1A423A);
}
.split-media .slot::before { inset: 1.5rem; border-color: rgba(244,240,232,0.16); }
.split-media .slot::after  { color: rgba(244,240,232,0.45); }
.split-media::after {
  content: "";
  position: absolute; inset: 0; z-index: 4;
  background: linear-gradient(90deg,
    rgba(22,52,45,0) 55%, rgba(22,52,45,0.55) 100%);
}
@media (max-width: 899px) {
  .split-media::after {
    background: linear-gradient(to bottom,
      rgba(22,52,45,0) 55%, rgba(22,52,45,0.7) 100%);
  }
}
.split-panel {
  background: var(--ink);
  color: var(--paper);
  display: flex;
  align-items: center;
  padding: clamp(3rem, 6vw, 6rem) clamp(1.8rem, 5vw, 5rem);
}
.split-panel > div { max-width: 46ch; }

/* ------------------------------------------------------------- testimonials */

.quote {
  font-family: 'Newsreader', Georgia, serif;
  font-size: var(--step-2);
  line-height: 1.32;
  letter-spacing: -0.01em;
  max-width: 24ch;
}
.quote-attr {
  font-size: var(--step--1);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: 1.6rem;
}
.dark .quote-attr { color: var(--taupe); }

.reviews {
  display: grid;
  gap: 1.2rem;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 860px) { .reviews { grid-template-columns: repeat(4, 1fr); } }
.review-card { position: relative; }
.review-card .slot { margin-bottom: 1rem; }
.review-name {
  font-size: var(--step--1);
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.review-where { font-size: var(--step--1); color: var(--ink-3); }
.dark .review-where { color: var(--taupe); }
.play {
  position: absolute; z-index: 5;
  left: 50%; top: 0; transform: translate(-50%, 0);
  margin-top: 33%;
  width: 54px; height: 54px; border-radius: 50%;
  background: rgba(255,255,255,0.9);
  display: grid; place-items: center;
  pointer-events: none;
}
.play::after {
  content: ""; margin-left: 3px;
  border-left: 13px solid var(--ink);
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
}

/* ------------------------------------------------------------------ archive */

.archive-grid {
  display: grid;
  gap: 1.2rem;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 900px) { .archive-grid { grid-template-columns: repeat(4, 1fr); } }
.archive-item .slot { margin-bottom: 0.9rem; }
.archive-place {
  font-size: var(--step--1);
  letter-spacing: 0.07em;
}
.archive-when { font-size: var(--step--1); color: var(--ink-3); }
.dark .archive-when { color: var(--taupe); }

/* --------------------------------------------------------------------- join */

.join-form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  max-width: 520px;
  margin-top: 2.2rem;
}
/* Every .join-form on the site is laid out as a column, where flex-basis is
   a height, not a width. A 240px basis therefore inflated the email field
   into a tall box while the text inputs beside it stayed one line high. */
.join-form input[type="email"] {
  flex: 0 0 auto;
  padding: 1em 1.3em;
  border: 1px solid rgba(244,240,232,0.3);
  border-radius: 100px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: var(--step--1);
}
.join-form input::placeholder { color: rgba(244,240,232,0.5); }
.join-form input:focus {
  outline: none;
  border-color: var(--paper);
}
.join-form button { border: 0; cursor: pointer; font-family: inherit; }
.join-note {
  font-size: var(--step--1);
  color: var(--taupe);
  margin-top: 1.2rem;
  max-width: 48ch;
}

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

.site-footer { padding-block: clamp(3.5rem, 7vw, 6rem) 2.5rem; }
.footer-grid {
  display: grid;
  gap: 2.5rem;
  grid-template-columns: repeat(2, 1fr);
  margin-bottom: 3.5rem;
}
/* Phones: one column. The two-column layout needs 381px of column width
   before padding, which only English fits, and only exactly. */
@media (max-width: 479px) { .footer-grid { grid-template-columns: 1fr; gap: 2rem; } }
@media (min-width: 860px) { .footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr; } }
.footer-grid h4 {
  font-family: 'Inter', sans-serif;
  font-size: var(--step--1);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  font-weight: 400;
  color: var(--ink-3);
  margin: 0 0 1.2rem;
}
.footer-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; }
.footer-grid a { text-decoration: none; opacity: 0.85; }
.footer-grid a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 4px; }
.footer-bottom {
  display: flex; flex-wrap: wrap; gap: 1rem;
  justify-content: space-between;
  padding-top: 2rem;
  border-top: 1px solid var(--line);
  font-size: var(--step--1);
  color: var(--ink-3);
}

/* ------------------------------------------------------------- pillars
   Numbered reasons / propositions. Replaces bulleted lists.
   -------------------------------------------------------------------- */
.pillars { display: grid; gap: 0; }
@media (min-width: 860px) { .pillars { grid-template-columns: 1fr 1fr; column-gap: clamp(3rem,6vw,6rem); } }
.pillar {
  padding-block: clamp(2rem, 3.5vw, 2.8rem);
  border-top: 1px solid var(--line);
}
.pillar-n {
  font-family: 'Newsreader', Georgia, serif;
  font-size: var(--step--1);
  letter-spacing: 0.14em;
  color: var(--accent);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.9rem;
}
/* Line icons beside the numeral. Decorative — 1.2px stroke in the champagne
   accent, no fill, so they read as marks rather than UI. */
.pillar-i {
  width: 24px;
  height: 24px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  overflow: visible;
}
.pillar h3 { font-size: var(--step-1); margin-bottom: 0.8rem; }
.pillar p { color: var(--ink-2); margin-bottom: 0; }

/* --------------------------------------------------------------- schedule */
.schedule { display: grid; gap: 0; margin-top: clamp(2rem,4vw,3rem); }
.sched-row {
  display: grid;
  gap: 0.6rem clamp(2rem, 5vw, 4rem);
  padding-block: clamp(1.6rem, 3vw, 2.4rem);
  border-top: 1px solid var(--line);
  align-items: baseline;
}
@media (min-width: 780px) { .sched-row { grid-template-columns: 8rem 1fr; } }
.sched-when {
  font-size: var(--step--1);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--accent);
}
.sched-what h3 { font-size: var(--step-1); margin-bottom: 0.6rem; }
.sched-what p { color: var(--ink-2); margin-bottom: 0; }

/* -------------------------------------------------------------------- faq */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 2rem;
  padding-block: 1.5rem;
  cursor: pointer;
  list-style: none;
  font-family: 'Newsreader', Georgia, serif;
  font-size: var(--step-1);
  line-height: 1.3;
  transition: color 0.3s var(--ease);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  font-family: 'Inter', sans-serif;
  font-size: 1.2rem;
  font-weight: 300;
  color: var(--accent);
  flex: none;
  transition: transform 0.35s var(--ease);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:hover { color: var(--accent-2); }
.faq-body { padding-bottom: 1.8rem; max-width: var(--measure); color: var(--ink-2); }
.faq-body p { margin-bottom: 0.9em; }
.faq-body ul { margin: 0 0 0.9em; padding-left: 1.1em; }
.faq-body li { margin-bottom: 0.35em; }

/* --------------------------------------------------------------- callout */
.callout {
  background: var(--accent-tint);
  padding: clamp(2rem, 4vw, 3.2rem);
  border-radius: 2px;
}
.callout p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------- credits */
.credit-list { list-style: none; margin: 1.4rem 0 0; padding: 0; display: grid; gap: 0.7rem; }
.credit-list li {
  padding-left: 1.4rem;
  position: relative;
  color: var(--ink-2);
  font-size: var(--step--1);
  letter-spacing: 0.02em;
}
.credit-list li::before {
  content: "";
  position: absolute; left: 0; top: 0.62em;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
}

/* ---------------------------------------------------------------- animation */

.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
  will-change: opacity, transform;
}
.reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ------------------------------------------------------------ accessibility */

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--ink); color: var(--paper);
  padding: 1em 1.5em; text-decoration: none;
}
.skip:focus { left: 0; }

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

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Multi-field enquiry form (organisations) */
.join-form textarea {
  padding: 1em 1.3em;
  border: 1px solid rgba(255,255,255,0.45);
  border-radius: 18px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: var(--step--1);
  resize: vertical;
}
.join-form input[type="text"] {
  padding: 1em 1.3em;
  border: 1px solid rgba(255,255,255,0.45);
  border-radius: 100px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: var(--step--1);
}
.join-form textarea::placeholder,
.join-form input[type="text"]::placeholder { color: rgba(255,255,255,0.62); }
.join-form textarea:focus,
.join-form input[type="text"]:focus { outline: none; border-color: #fff; }


/* ==========================================================================
   GALLERY
   An editorial photo journal, not a contact sheet. A six-column field with
   deliberate spans and per-image ratios: rows are allowed to end a column
   early, and that empty column is the point. Everything is namespaced `g-`
   so nothing here can reach the rest of the site.
   ========================================================================== */

.gallery {
  display: grid;
  grid-template-columns: 1fr;
  align-items: start;
  gap: clamp(1rem, 3vw, 1.6rem);
}
@media (min-width: 760px) {
  .gallery {
    grid-template-columns: repeat(6, 1fr);
    gap: clamp(1.8rem, 3.4vw, 3.4rem) clamp(1.4rem, 2.2vw, 2.2rem);
  }
}

/* A breath between movements, without a heading to announce it. */
.gallery-break { grid-column: 1 / -1; height: clamp(1rem, 4vw, 3.5rem); }

.gfig {
  margin: 0;
  position: relative;
  overflow: hidden;
  background: var(--paper-2);
  aspect-ratio: 3 / 4;
}
.gfig img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 1.4s var(--ease);
}
.gfig:hover img { transform: scale(1.04); }
@media (prefers-reduced-motion: reduce) {
  .gfig img { transition: none; }
  .gfig:hover img { transform: none; }
}

/* ratios */
.g-2-1  { aspect-ratio: 2 / 1; }
.g-21-9 { aspect-ratio: 21 / 9; }
.g-16-9 { aspect-ratio: 16 / 9; }
.g-3-2  { aspect-ratio: 3 / 2; }
.g-4-3  { aspect-ratio: 4 / 3; }
.g-1-1  { aspect-ratio: 1 / 1; }
.g-4-5  { aspect-ratio: 4 / 5; }
.g-3-4  { aspect-ratio: 3 / 4; }
.g-2-3  { aspect-ratio: 2 / 3; }

/* spans. The deliberate early-ending row above is a six-column effect. Below
   760px the gallery is one column: two columns could not place a span-2 frame
   beside a span-1 one and left whole cells empty, which reads as a missing
   photograph rather than as composition. Order and crops are unchanged. */
@media (min-width: 760px) {
  .g-s2 { grid-column: span 2; }
  .g-s3 { grid-column: span 3; }
  .g-s4 { grid-column: span 4; }
  .g-s6 { grid-column: span 6; }
}
/* Below 760px the tall frames would be punishing at full width. */
@media (max-width: 759px) {
  .g-s6.g-2-1, .g-s6.g-21-9 { aspect-ratio: 16 / 9; }
}


/* ==========================================================================
   MAILERLITE SIGNUP
   The embed keeps every MailerLite class, name and hidden field so their
   webforms.min.js still owns validation, submission and the success swap.
   None of MailerLite's own <style> blocks are loaded: everything below
   re-dresses their markup in the Curious Souls system instead.
   Scoped to .cs-signup so nothing here can leak.
   ========================================================================== */

.cs-signup { margin-top: 2.2rem; max-width: 560px; }

/* Strip the embed's card, width limits and centring.
   IMPORTANT: display is only forced on the three outer wrappers. The two
   panels below (.ml-form-embedBody = .row-form, .ml-form-successBody =
   .row-success) are shown and hidden by MailerLite's own jQuery, which writes
   an inline display value — an !important here would defeat it and leave the
   success message visible from page load. */
.cs-signup .ml-form-embedContainer,
.cs-signup .ml-form-align-center,
.cs-signup .ml-form-embedWrapper {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  text-align: left !important;
  float: none !important;
}
.cs-signup .ml-form-embedBody,
.cs-signup .ml-form-successBody {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  text-align: left !important;
  float: none !important;
}

/* heading + description above the field */
.cs-signup .ml-form-embedContent { margin: 0 0 1.4rem; }
.cs-signup .ml-form-embedContent h3 {
  font-family: 'Newsreader', Georgia, serif;
  font-size: var(--step-1);
  font-weight: 300;
  margin: 0 0 0.5rem;
}
.cs-signup .ml-form-embedContent p { margin: 0; font-size: var(--step--1); }

/* input left, button right on desktop; consent and privacy beneath */
.cs-signup form.ml-block-form {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1rem 0.8rem;
  align-items: start;
  margin: 0;
  width: 100%;
}
.cs-signup .ml-form-formContent  { grid-column: 1; grid-row: 1; margin: 0; float: none; }
.cs-signup .ml-form-embedSubmit  { grid-column: 2; grid-row: 1; margin: 0; float: none; width: auto; }
.cs-signup .ml-form-checkboxRow  { grid-column: 1 / -1; grid-row: 2; margin: 0; float: none; }
.cs-signup .ml-form-embedPermissions { grid-column: 1 / -1; grid-row: 3; margin: 0; float: none; width: 100%; }
.cs-signup .ml-form-fieldRow { margin: 0; width: 100%; }

/* the field itself — same pill as the rest of the site */
.cs-signup input[type="email"] {
  width: 100%;
  padding: 1em 1.3em;
  border: 1px solid var(--line);
  border-radius: 100px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: var(--step--1);
}
.cs-signup input[type="email"]::placeholder { color: var(--ink-3); }
.cs-signup input[type="email"]:focus { outline: none; border-color: var(--accent-2); }

/* submit — the existing primary button, arrow included */
.cs-signup .ml-form-embedSubmit button {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  padding: 1em 1.9em;
  border: 1px solid var(--accent);
  border-radius: 100px;
  background: var(--accent);
  color: var(--forest);
  font-family: 'Inter', sans-serif;
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.35s var(--ease), color 0.35s var(--ease);
}
.cs-signup .ml-form-embedSubmit button.primary::after { content: "→"; }
.cs-signup .ml-form-embedSubmit button:hover { background: transparent; color: var(--accent); }
.cs-signup .ml-form-embedSubmit button.loading { justify-content: center; min-width: 3.4em; }
.cs-signup .ml-form-embedSubmitLoad {
  display: inline-block; width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid currentColor; border-right-color: transparent;
  animation: cs-spin 0.9s linear infinite;
}
@keyframes cs-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .cs-signup .ml-form-embedSubmitLoad { animation: none; } }

/* consent checkbox — a real box, not a MailerLite pseudo-element */
.cs-signup .ml-form-checkboxRow label.checkbox {
  display: flex; align-items: flex-start; gap: 0.7rem;
  margin: 0; padding: 0; min-height: 0; cursor: pointer;
}
.cs-signup .ml-form-checkboxRow input[type="checkbox"] {
  flex: none; width: 18px; height: 18px; margin: 0.15em 0 0;
  accent-color: var(--accent-2); cursor: pointer;
}
.cs-signup .ml-form-checkboxRow .label-description { margin: 0; }
.cs-signup .ml-form-checkboxRow .label-description p,
.cs-signup .ml-form-embedPermissions p {
  margin: 0;
  font-size: var(--step--1);
  line-height: 1.55;
  color: var(--ink-3);
}
.cs-signup .ml-form-embedPermissions a { color: inherit; text-decoration: underline; text-underline-offset: 0.2em; }

/* error state, as flagged by MailerLite's own validation */
.cs-signup .ml-error input[type="email"] { border-color: #B3543F; }
.cs-signup .ml-error .label-description p { color: #B3543F; }

/* success */
.cs-signup .ml-form-successContent h3 {
  font-family: 'Newsreader', Georgia, serif;
  font-size: var(--step-2);
  font-weight: 300;
  margin: 0 0 0.7rem;
}
.cs-signup .ml-form-successContent p { margin: 0; font-size: var(--step--1); }
.cs-signup .ml-form-successContent em { font-style: normal; }

/* on photography: light text, translucent hairlines */
.feature .cs-signup input[type="email"] { border-color: rgba(244,240,232,0.42); }
.feature .cs-signup input[type="email"]::placeholder { color: rgba(244,240,232,0.6); }
.feature .cs-signup input[type="email"]:focus { border-color: var(--accent); }
.feature .cs-signup .ml-form-checkboxRow .label-description p,
.feature .cs-signup .ml-form-embedPermissions p { color: rgba(244,240,232,0.72); }
.feature .cs-signup .ml-form-embedContent h3,
.feature .cs-signup .ml-form-successContent h3 { color: var(--paper); }
.feature .cs-signup .ml-form-embedContent p { color: rgba(244,240,232,0.9); }
.feature .cs-signup .ml-form-successContent p { color: rgba(244,240,232,0.9); }
.feature .cs-signup .ml-form-checkboxRow input[type="checkbox"] { accent-color: var(--accent); }

/* stack on small screens */
@media (max-width: 560px) {
  .cs-signup form.ml-block-form { grid-template-columns: 1fr; }
  .cs-signup .ml-form-embedSubmit { grid-column: 1; grid-row: 2; }
  .cs-signup .ml-form-embedSubmit button { width: 100%; justify-content: center; }
  .cs-signup .ml-form-checkboxRow { grid-row: 3; }
  .cs-signup .ml-form-embedPermissions { grid-row: 4; }
}


/* ==========================================================================
   CONSENT BANNER
   A hairline strip on the page ground, not a floating SaaS card. No shadow,
   no rounded panel, no overlay — it sits at the foot of the viewport and
   leaves the header and the page usable while it is open.
   ========================================================================== */

.cs-consent {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 120;
  background: var(--paper);
  border-top: 1px solid var(--line);
}

.cs-consent-inner {
  width: var(--page);
  margin-inline: auto;
  padding-block: clamp(1.1rem, 2vw, 1.5rem);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(1.2rem, 3vw, 3rem);
  flex-wrap: wrap;
}

.cs-consent-copy { flex: 1 1 30ch; min-width: 0; }

.cs-consent-title {
  font-family: 'Newsreader', Georgia, serif;
  font-size: var(--step-1);
  font-weight: 300;
  line-height: 1.2;
  margin: 0 0 0.3rem;
  color: var(--ink);
}

.cs-consent-text {
  margin: 0;
  max-width: 66ch;
  font-size: var(--step--1);
  line-height: 1.55;
  color: var(--ink-2);
}

.cs-consent-text a {
  color: var(--accent-2);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.cs-consent-actions {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  flex: 0 0 auto;
}

/* Same pill language as the rest of the site's buttons. */
.cs-consent-actions button {
  padding: 0.85em 1.6em;
  border-radius: 100px;
  border: 1px solid var(--accent);
  font-family: 'Inter', sans-serif;
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.35s var(--ease), color 0.35s var(--ease), border-color 0.35s var(--ease);
}
.cs-consent-accept { background: var(--accent); color: var(--forest); }
.cs-consent-accept:hover { background: transparent; color: var(--accent-2); }

.cs-consent-decline {
  background: transparent;
  color: var(--ink-2);
  border-color: var(--line);
}
.cs-consent-decline:hover { border-color: var(--ink-3); color: var(--ink); }

/* the footer link that reopens it */
.cs-consent-reopen { color: inherit; }

@media (max-width: 720px) {
  .cs-consent-inner { flex-direction: column; align-items: stretch; gap: 1.1rem; }
  .cs-consent-actions { width: 100%; }
  .cs-consent-actions button { flex: 1 1 0; padding-inline: 0.8em; }
}

/* ======================================================================
   LINKS PAGE  —  /links
   Where the NFC business and tarot cards point, and the single link an
   Instagram or Telegram bio allows.
   Deliberately without the site header, the navigation and the footer grid:
   the three links ARE the page, and anything else competes with them.
   One centred column, so a phone and a laptop get the same composition.
   These classes are used by links.html and nowhere else.
   ====================================================================== */

body.links-body { background: var(--forest); }

/* Fixed, so a short page and a scrolled one both keep the same still
   photograph, and so the centring below can never clip it. */
.links-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  background: var(--forest);
}
.links-bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0.5;
}
/* Forest wash over the photograph. The cards carry their own ground, so this
   only has to keep the type off the brightest part of the sky. */
.links-bg::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to bottom,
    rgba(22,52,45,0.74) 0%,
    rgba(22,52,45,0.66) 42%,
    rgba(22,52,45,0.88) 100%);
}

.links {
  position: relative;
  z-index: 1;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  padding: clamp(2rem, 7vw, 4rem) 1.4rem;
  color: var(--paper);
}
/* margin:auto rather than justify-content:center — auto margins collapse to 0
   when the column is taller than the viewport, so a small screen or a large
   font size scrolls instead of losing the logo off the top. */
.links-inner {
  margin: auto;
  width: 100%;
  max-width: 30rem;
  text-align: center;
}

.links-logo {
  width: clamp(112px, 26vw, 150px);
  height: auto;
  margin: 0 auto 1.4rem;
}
.links-tagline {
  font-size: 0.72rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 1.5rem;
  padding-left: 0.34em; /* optical compensation for the tracking */
}
.links-line {
  font-family: 'Newsreader', Georgia, 'Times New Roman', serif;
  font-size: var(--step-1);
  font-weight: 300;
  line-height: 1.25;
  letter-spacing: -0.012em;
  color: var(--paper);
  max-width: 22ch;
  margin: 0 auto 0.85rem;
}

/* Most of this page is tapped from a physical card, by someone holding it
   for the first time. The tagline alone does not say what Curious Souls is,
   so one plain line does. */
.links-intro {
  text-wrap: balance;
  font-size: var(--step--1);
  line-height: 1.45;
  color: rgba(244,240,232,0.88);
  max-width: 34ch;
  margin: 0 auto clamp(2.2rem, 6vw, 3rem);
}

/* ------------------------------------------------------------- the links */

.links-list {
  display: grid;
  gap: 0.85rem;
  margin-bottom: clamp(2.2rem, 6vw, 3rem);
}
.links-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  text-align: left;
  padding: 0.95rem 1.1rem;
  border: 1px solid rgba(193,168,117,0.44);
  border-radius: 20px;
  color: var(--paper);
  text-decoration: none;

  /* Liquid glass. The card is genuinely see-through: the lake is still there
     behind it, blurred and dimmed, not hidden under a flat panel.
     brightness() is what makes that affordable. It darkens what is BEHIND
     the glass instead of thickening the glass, so the tint can drop to a
     quarter and the labels still clear AA over the brightest sky. */
  background-color: rgba(22,52,45,0.26);
  /* Specular sheen: lit at the top-left corner, gone by the middle, the way
     a curved edge catches light. */
  background-image: linear-gradient(150deg,
    rgba(255,255,255,0.22) 0%,
    rgba(255,255,255,0.08) 26%,
    rgba(255,255,255,0) 54%);
  -webkit-backdrop-filter: blur(24px) saturate(170%) brightness(0.72);
  backdrop-filter: blur(24px) saturate(170%) brightness(0.72);
  /* A lit top edge and a shaded bottom one give the pane its thickness; the
     outer shadow floats it off the photograph. */
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.32),
    inset 0 -1px 0 rgba(0,0,0,0.10),
    0 8px 24px rgba(8,20,17,0.22);

  /* background-image is left out: the base has one gradient layer and the
     hover has two, so it cannot interpolate and would only pretend to. */
  transition: background-color 0.35s var(--ease), border-color 0.35s var(--ease),
              transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}

.links-item:hover,
.links-item:focus-visible {
  /* Thicker glass and a warmer cast, rather than a different colour: the
     champagne is laid over the same ground so the label never loses it. */
  background-color: rgba(22,52,45,0.34);
  background-image:
    linear-gradient(150deg,
      rgba(255,255,255,0.30) 0%,
      rgba(255,255,255,0.10) 28%,
      rgba(255,255,255,0) 56%),
    linear-gradient(rgba(193,168,117,0.16), rgba(193,168,117,0.16));
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.42),
    inset 0 -1px 0 rgba(0,0,0,0.12),
    0 14px 36px rgba(10,26,22,0.32);
}

/* No backdrop-filter means nothing dims the photograph behind the card, and
   a quarter-opacity tint would leave the labels sitting on bare sunset. The
   glass look is the thing that degrades here, not the legibility. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .links-item {
    background-color: rgba(22,52,45,0.74);
    background-image: none;
  }
  .links-item:hover,
  .links-item:focus-visible {
    background-color: rgba(22,52,45,0.80);
    background-image: linear-gradient(rgba(193,168,117,0.16), rgba(193,168,117,0.16));
  }
}

.links-icon {
  flex: none;
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(193,168,117,0.45);
  color: var(--accent);
  transition: background 0.35s var(--ease), color 0.35s var(--ease),
              border-color 0.35s var(--ease);
}
.links-icon svg { width: 21px; height: 21px; }
.links-item:hover .links-icon {
  background: var(--accent);
  color: var(--forest);
  border-color: var(--accent);
}

.links-text { min-width: 0; }
.links-label {
  display: block;
  font-size: var(--step-0);
  font-weight: 400;
  line-height: 1.25;
}
.links-sub {
  display: block;
  margin-top: 0.15rem;
  font-size: var(--step--1);
  line-height: 1.35;
  color: rgba(244,240,232,0.78);
}

.links-arrow {
  margin-left: auto;
  flex: none;
  color: var(--accent);
  font-size: 1.05rem;
  line-height: 1;
  transition: transform 0.35s var(--ease);
}
.links-item:hover .links-arrow { transform: translateX(4px); }

/* --------------------------------------------------------------- footing */

.links-foot {
  display: grid;
  gap: 0.85rem;
  font-size: var(--step--1);
  color: rgba(244,240,232,0.66);
}
.links-foot p { margin: 0; max-width: none; }
.links-foot a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid rgba(244,240,232,0.28);
  padding-bottom: 0.12em;
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.links-foot a:hover { color: var(--paper); border-color: var(--accent); }

.links-lang {
  display: flex;
  justify-content: center;
  gap: 1.1rem;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

@media (max-width: 380px) {
  .links-item { gap: 0.8rem; padding: 0.85rem 0.9rem; }
  .links-icon { width: 42px; height: 42px; }
}

@media (prefers-reduced-motion: reduce) {
  .links-item:hover, .links-item:focus-visible { transform: none; }
  .links-item:hover .links-arrow { transform: none; }
}