/* =================================================================
   CONVO — Shared design system (base layer)
   Tenant theme overrides via inline <style> block with :root vars.
   ================================================================= */

/* ============ SELF-HOSTED FONTS ============ */

/* Plus Jakarta Sans — latin-ext */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('/$/assets/fonts/plus-jakarta-sans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Plus Jakarta Sans — latin */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('/$/assets/fonts/plus-jakarta-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Fraunces italic — latin-ext */
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url('/$/assets/fonts/fraunces-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Fraunces italic — latin */
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url('/$/assets/fonts/fraunces-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ============ FALLBACK TOKENS ============ */
/* These are overridden per-tenant by the inline <style> block. */

:root {
  --brand: #2871e0;
  --brand-deep: #1a4ea8;
  --brand-bright: #5b9eff;
  --paper: #eef3fa;
  --paper-soft: #e2eaf4;
  /* Actually warm. It was #f7faff — a cool near-white under a name that promises
     the opposite, which is why the birthday letter could not use it and grew its
     own paper colour instead. */
  --paper-warm: #faf7f0;
  --card: #ffffff;
  --ink: #0f1d2e;
  /* Running text, between ink and ink-soft. Its own token because one grey for both
     a paragraph and a label makes each look like the other's mistake. */
  --body: #3f5468;
  --ink-soft: #56697d;
  /* Text on the dark surface: the strong weight and the quiet one. Solid, not the
     translucent white used elsewhere on this stylesheet — the outgoing mail reads
     the same tokens, and Outlook's Word engine drops rgba entirely. */
  --on-ink: #ffffff;
  --on-ink-soft: #a9bdd4;
  --warm: #ffd9a8;
  /* The warm accent at a weight that may be read: #ffd9a8 as text on white is
     about 2:1. This one clears 4.5:1 and is the only warm colour text is set
     from. */
  --warm-deep: #8a6d1f;
  --rule: rgba(15,29,46,0.1);
  --rule-strong: rgba(15,29,46,0.18);
  /* A hairline that has to be actually drawn — dark enough to show on --card and
     on --paper-soft both, because a rule inside a panel is the case that fails
     when the two are the same value. The translucent ones above blend over any
     background, which is right here and dropped by the mail clients. */
  --rule-line: #cfdaea;
  --font-display: 'Plus Jakarta Sans', sans-serif;
  --font-body: 'Plus Jakarta Sans', sans-serif;
  --font-accent: 'Fraunces', serif;
}

/* ============ RESET ============ */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background: var(--paper); color: var(--ink); -webkit-font-smoothing: antialiased; }
body { font-family: var(--font-body); overflow-x: hidden; font-feature-settings: 'ss01', 'cv11'; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; background: none; border: 0; outline: 0; width: 100%; }
::selection { background: var(--ink); color: var(--paper); }

/* ============ HERO (full-bleed photo) ============ */
.hero {
  position: relative;
  overflow: hidden;
  /* Every banner is this tall. It is written once, here: the variants used to
     carry a height each — 60, 68, 70, 72vh — and nobody could say why one page
     was lower than the next, because the answer was "whoever wrote that rule".

     The value clears the longest headline on the site, so no page has to grow
     past it: a banner that grows is a banner of a different height. */
  min-height: 74vh;
  padding: 28px clamp(20px, 4vw, 80px) clamp(60px, 7vw, 100px);
  display: flex;
  flex-direction: column;
  color: white;
}
/* The front page is the exception, and the only one. */
.hero.hero-tall { min-height: 88vh; }
.hero-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
}

.hero::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,30,60,0.45) 0%, rgba(10,30,60,0.05) 30%, rgba(10,30,60,0.55) 75%, rgba(10,30,60,0.85) 100%);
  z-index: 1;
}
.hero > *:not(.hero-img) { position: relative; z-index: 5; }

/* ============ NAV ============ */
.nav {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.brand {
  display: flex; align-items: center;
}
.brand-logo {
  height: 70px;
  width: auto;
  filter: brightness(0) invert(1);
  opacity: 0.95;
}
/* Stands in for the logo when a tenant has none, so the header still leads home. */
.brand-name {
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #fff;
  opacity: 0.95;
}
.nav-links {
  display: flex; gap: 36px; list-style: none;
  font-size: 14px; font-weight: 500; letter-spacing: -0.005em;
}
.nav-links a { opacity: 0.9; transition: opacity 0.2s; color: white; }
.nav-links a.active, .nav-links a:hover { opacity: 1; }
@media (max-width: 760px) { .nav-links { display: none; } }
.nav-cta {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 8px 8px 20px;
  background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.35);
  backdrop-filter: blur(14px); border-radius: 999px;
  font-size: 14px; font-weight: 500;
}
.nav-cta:hover { background: rgba(255,255,255,0.22); }
/* Icon button: hide the Unicode glyph fallback, draw a centered SVG arrow. */
.nav-cta .arr {
  width: 28px; height: 28px; background: white; color: var(--ink);
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 0; line-height: 0;
}
.nav-cta .arr::before {
  content: ''; display: block; width: 14px; height: 14px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 11.5 11.5 4.5'/%3E%3Cpath d='M5.5 4.5h6v6'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 11.5 11.5 4.5'/%3E%3Cpath d='M5.5 4.5h6v6'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* ── Dropdown navigation (grouped) ── */
.nav-links li.has-sub { position: relative; }
.nav-links .top { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; background: none; border: 0; font: inherit; color: inherit; opacity: 0.9; padding: 0; }
.nav-links .top:hover { opacity: 1; }
.nav-links .top .caret { width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); margin-top: -3px; transition: transform 0.2s; opacity: 0.7; }
.nav-links li.has-sub:hover .top .caret, .nav-links li.has-sub:focus-within .top .caret { transform: rotate(225deg); margin-top: 2px; }
.submenu {
  position: absolute; top: calc(100% + 14px); left: 50%; transform: translateX(-50%) translateY(6px);
  min-width: 230px; padding: 8px; margin: 0; list-style: none;
  background-color: #0f1d2e; isolation: isolate;
  box-shadow: 0 24px 60px rgba(0,0,0,0.4), inset 0 0 0 1px rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.16); border-radius: 16px;
  /* Interactivity is gated by visibility (not pointer-events) so the menu stays
     hoverable during its fade-out. The delayed visibility transition keeps it
     open ~0.2s after hover is lost — enough to cross the gap to the panel, so
     slow mouse movement no longer dismisses it. */
  opacity: 0; visibility: hidden; transition: opacity 0.2s, transform 0.2s, visibility 0s 0.2s;
  z-index: 200;
}
.submenu::before { content: ''; position: absolute; top: -14px; left: 0; right: 0; height: 14px; }
.nav-links li.has-sub:hover .submenu, .nav-links li.has-sub:focus-within .submenu {
  opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
  transition: opacity 0.2s, transform 0.2s, visibility 0s 0s;
}
.submenu li { display: block; }
.submenu a {
  display: flex; flex-direction: column; gap: 2px;
  padding: 10px 14px; border-radius: 10px; color: #fff; opacity: 1;
  font-size: 14px; font-weight: 600; letter-spacing: -0.01em; transition: background 0.15s;
}
.submenu a:hover { background: rgba(255,255,255,0.1); }
.submenu a .d { font-size: 12px; font-weight: 400; color: rgba(255,255,255,0.6); letter-spacing: 0; }
.submenu a.active { color: var(--brand-bright); }
/* Keep the nav (and its dropdown) above the hero content — the .hero>* rule
   sets z-index:5 and would otherwise trap the menu behind the hero body. */
.hero > .nav { z-index: 120; }

/* ── Mobile burger + drawer ── */
.nav-burger { display: none; }
@media (max-width: 760px) {
  .nav-cta { display: none; }
  .nav-burger {
    display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 42px; height: 42px; padding: 0 10px; border-radius: 10px;
    background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.28);
  }
  .nav-burger span { display: block; height: 2px; background: white; border-radius: 2px; transition: transform 0.2s, opacity 0.2s; }
}
.mobile-nav {
  position: fixed; inset: 0; z-index: 300;
  background: var(--ink); color: white;
  display: flex; flex-direction: column; gap: 8px;
  padding: clamp(72px, 12vh, 110px) clamp(24px, 7vw, 48px) 40px;
  overflow-y: auto;
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
}
.mobile-nav.open { opacity: 1; visibility: visible; transform: translateY(0); }
@media (min-width: 761px) { .mobile-nav { display: none; } }
.mobile-nav-close {
  position: absolute; top: 20px; right: 20px;
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255,255,255,0.1); color: white; font-size: 26px; line-height: 1;
  display: grid; place-items: center;
}
.mnav-list { list-style: none; display: flex; flex-direction: column; gap: 6px; }
.mnav-list > li > a, .mnav-label {
  display: block; font-family: var(--font-display); font-weight: 700;
  font-size: 26px; letter-spacing: -0.02em; padding: 8px 0; color: white;
}
.mnav-label { color: rgba(255,255,255,0.55); font-size: 14px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; padding-bottom: 2px; }
.mnav-group > ul { list-style: none; display: flex; flex-direction: column; gap: 2px; margin: 0 0 10px; }
.mnav-group > ul > li > a {
  display: block; padding: 8px 0 8px 16px; font-size: 18px; font-weight: 500;
  color: rgba(255,255,255,0.85); border-left: 2px solid rgba(255,255,255,0.15);
}
.mnav-list a.active { color: var(--brand-bright); }
.mnav-cta { margin-top: 22px; align-self: flex-start; }
body.nav-open { overflow: hidden; }
@media (prefers-reduced-motion: reduce) {
  .mobile-nav { transition: none; }
  .nav-burger span { transition: none; }
}

.hero-body {
  /* The text block is as tall as its text and sits under the navigation, so the
     spare height in a banner shows below it, as picture. Stretched to the full
     banner and pushed to the bottom — as it was — that spare height landed
     above the text instead, which is why a page with a short headline had 160px
     of empty sky over it while its neighbour had 60. */
  flex: none;
  display: flex;
  flex-direction: column;
  /* The distance from the navigation to the first line, the same on every page.
     It used to be 80 here and 60 in two of the variants, so the front page —
     the only one without an override — sat 20px lower than the rest. */
  padding-top: 60px;
  /* One rhythm for the whole block, and a trailing space that does not depend
     on which element happens to be last. Each child used to carry its own
     margin — 28 under the crumbs, 28 under the headline, 36 under the subline,
     26 above the region's facts row — so adding an element changed the spacing
     around it: on a region page the gap under the subline came out at 62px
     while every other page had 28. */
  gap: 28px;
  padding-bottom: 36px;
}
.crumbs {
  display: flex; gap: 10px; align-items: center;
  font-size: 13px;
  color: rgba(255,255,255,0.75);
  font-weight: 400;
}
.crumbs a:hover { color: white; }

/* Display headline (used in hero + section heads) */
.display {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.045em;
  line-height: 0.92;
}
.display em {
  font-style: italic; font-family: var(--font-accent); font-weight: 300;
  letter-spacing: -0.03em;
  color: var(--warm);
  font-size: 1.05em;
}
/* The banner is as tall as its text, so the headline size is what decides how
   tall it turns out. At 152px most page titles ran to two lines and their
   banners came out 170–200px taller than the ones whose title happened to fit
   on one — the difference reads as "this page's banner is smaller". */
.hero h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(44px, 6.5vw, 104px);
  line-height: 0.92;
  letter-spacing: -0.045em;
}
/* The front page still shouts. It is the one banner that may be a screenful. */
.hero-tall h1 { font-size: clamp(56px, 9.5vw, 152px); }
.hero h1 em {
  font-style: italic; font-family: var(--font-accent); font-weight: 300;
  letter-spacing: -0.03em;
  color: var(--warm);
  font-size: 1.05em;
}
.hero-sub {
  font-size: clamp(16px, 1.3vw, 19px);
  color: rgba(255,255,255,0.88); max-width: 56ch;
  line-height: 1.55;
  font-weight: 400;
}
.hero-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  border-top: 1px solid rgba(255,255,255,0.22);
  padding-top: 26px;
}
@media (max-width: 700px) { .hero-stats { grid-template-columns: 1fr 1fr; } }
.hero-stat .v {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(30px, 3.4vw, 46px);
  letter-spacing: -0.03em;
  line-height: 1;
}
.hero-stat .v sup { font-size: 0.5em; color: var(--warm); font-weight: 400; }
.hero-stat .l {
  font-size: 13px;
  color: rgba(255,255,255,0.7); margin-top: 10px;
  font-weight: 400;
}

/* ============ SECTIONS ============ */
section.block {
  padding: clamp(70px, 9vw, 130px) clamp(20px, 4vw, 80px);
}
.section-head {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 48px;
  align-items: end;
  margin-bottom: clamp(40px, 5vw, 72px);
  padding-bottom: 32px;
  border-bottom: 1px solid var(--rule-strong);
}
@media (max-width: 800px) { .section-head { grid-template-columns: 1fr; gap: 24px; align-items: start; } }
.section-head h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(40px, 6vw, 88px);
  line-height: 0.95;
  letter-spacing: -0.04em;
  color: var(--ink);
}
.section-head h2 em {
  font-style: italic; font-family: var(--font-accent); font-weight: 300;
  color: var(--brand); letter-spacing: -0.025em;
}
/* Accent from Markdown `==text==` (rendered as <mark>): brand-blue emphasis in
   body text, without the yellow highlight background or italics. */
mark {
  background: none;
  color: var(--brand);
  font-weight: 600;
}
.eyebrow {
  display: inline-block;
  font-size: 13px;
  color: var(--ink-soft);
  margin-bottom: 14px;
  font-weight: 500;
}
.eyebrow::before {
  content: ''; display: inline-block;
  width: 28px; height: 1px; background: var(--ink-soft);
  vertical-align: middle; margin-right: 12px;
}
.section-head .lead {
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 42ch;
  margin-left: auto;
}

/* ============ BUTTONS ============ */
.btn {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 14px 8px 14px 24px;
  border-radius: 999px;
  font-family: var(--font-display); font-weight: 600;
  font-size: 15px; letter-spacing: -0.01em;
  transition: transform 0.15s, box-shadow 0.15s;
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 12px 24px rgba(0,0,0,0.18); }
.btn .arr {
  width: 32px; height: 32px;
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 0; line-height: 0;
}
/* Arrow as a mask so it inherits the variant's text color (circle = background). */
.btn .arr::before {
  content: ''; display: block; width: 16px; height: 16px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8h10'/%3E%3Cpath d='M8.5 3.5 13 8l-4.5 4.5'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8h10'/%3E%3Cpath d='M8.5 3.5 13 8l-4.5 4.5'/%3E%3C/svg%3E") center/contain no-repeat;
}
.btn-primary { background: var(--ink); color: white; }
.btn-primary .arr { background: white; color: var(--ink); }
.btn-light { background: white; color: var(--ink); }
.btn-light .arr { background: var(--ink); color: white; }
.btn-outline {
  background: transparent; color: var(--ink);
  border: 1px solid rgba(15,29,46,0.2);
  padding: 14px 24px;
}
.btn-outline:hover { border-color: var(--ink); }

/* ============ FOOTER ============ */
.footer {
  padding: 60px clamp(20px, 4vw, 80px) 28px;
  background: var(--ink);
  color: white;
}
/* The brand block plus one track per stored column — the count comes from the
   view as data-cols, since the columns are the tenant's now and no longer three
   by definition. Three is the default because that is what the site has, and the
   rules below cover every count the footer accepts: the write path refuses more
   than model.FooterColumnLimit, so there is no count without a rule. */
.footer-grid {
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 32px; margin-bottom: 36px;
}
.footer-grid[data-cols="0"] { grid-template-columns: 1fr; }
.footer-grid[data-cols="1"] { grid-template-columns: 2fr 1fr; }
.footer-grid[data-cols="2"] { grid-template-columns: 2fr 1fr 1fr; }
.footer-grid[data-cols="4"] { grid-template-columns: 2fr repeat(4, 1fr); }
.footer-grid[data-cols="5"] { grid-template-columns: 2fr repeat(5, 1fr); }
@media (max-width: 700px) {
  .footer-grid, .footer-grid[data-cols] { grid-template-columns: 1fr 1fr; }
  /* Nothing but the brand block: a second track would be an empty half. */
  .footer-grid[data-cols="0"] { grid-template-columns: 1fr; }
}
.footer-brand {
  font-family: var(--font-display); font-weight: 800; font-size: 22px;
  letter-spacing: -0.02em; margin-bottom: 12px; color: white;
}
.footer-tag { font-size: 14px; color: rgba(255,255,255,0.65); line-height: 1.55; }
.footer h4 {
  font-size: 13px; font-weight: 600; letter-spacing: -0.005em;
  color: rgba(255,255,255,0.5); margin-bottom: 14px;
}
.footer ul { list-style: none; display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
.footer a { color: rgba(255,255,255,0.85); }
.footer a:hover { color: white; }
.footer-bottom {
  padding-top: 20px; border-top: 1px solid rgba(255,255,255,0.08);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px;
  font-size: 13px; color: rgba(255,255,255,0.45);
}
/* The legal links read as the rest of this line — quiet, but they carry the
   underline from the start. They used to get it on hover only, which on a phone
   means never: nothing there hovers, so the imprint and the privacy statement were
   text that happened to be tappable. Keyboard focus is shown too, for the same
   reason. */
.footer-legal a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: rgba(255,255,255,0.3);
  text-underline-offset: 3px;
}
.footer-legal a:hover,
.footer-legal a:focus-visible {
  color: rgba(255,255,255,0.85);
  text-decoration-color: currentColor;
}

/* ============ HELP / CTA BAND ============ */
.cta-wrap {
  padding: 0 clamp(20px, 4vw, 80px);
}
.help-band {
  margin: clamp(40px, 4vw, 64px) clamp(20px, 4vw, 80px);
  padding: clamp(36px, 5vw, 64px);
  background: var(--brand);
  border-radius: 28px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 32px;
  align-items: center;
  color: white;
}
@media (max-width: 800px) { .help-band { grid-template-columns: 1fr; } }
.help-band h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(28px, 3vw, 46px);
  line-height: 1.05;
  letter-spacing: -0.035em;
  margin-bottom: 16px;
}
.help-band h3 em {
  font-family: var(--font-accent); font-style: italic; font-weight: 300;
  color: var(--warm); letter-spacing: -0.02em;
}
.help-band p {
  color: rgba(255,255,255,0.92);
  line-height: 1.6;
  max-width: 50ch;
  font-size: 16px;
}

/* ============ REVEAL ============ */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.9s ease, transform 0.9s ease;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ============ INTRO (Home) ============ */
.intro { padding: clamp(70px, 9vw, 130px) clamp(20px, 4vw, 80px); background: var(--paper); }
.intro-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
}
@media (max-width: 900px) { .intro-grid { grid-template-columns: 1fr; } }
.intro-photo {
  border-radius: 26px;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  position: relative;
}
.intro-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.intro-photo .badge {
  position: absolute; left: 20px; bottom: 20px;
  padding: 8px 14px; background: rgba(255,255,255,0.95);
  border-radius: 999px; font-size: 13px; font-weight: 500; color: var(--ink);
}
.intro-text h2 {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(40px, 5.5vw, 76px); line-height: 0.95;
  letter-spacing: -0.04em; margin-bottom: 24px;
}
.intro-text h2 em {
  font-style: italic; font-family: var(--font-accent); font-weight: 300;
  color: var(--brand); letter-spacing: -0.025em;
}
.intro-text .lead { font-size: 19px; color: var(--ink); margin-bottom: 18px; font-weight: 500; }
.intro-text p { color: var(--ink-soft); line-height: 1.65; margin-bottom: 14px; font-size: 16px; max-width: 52ch; }
.intro-link {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 18px;
  color: var(--brand); font-weight: 600;
  border-bottom: 1px solid rgba(40,113,224,0.3);
  padding-bottom: 4px;
}
.intro-link:hover { border-bottom-color: var(--brand); }

/* ============ STATS STRIP (Home) ============ */
.stats-strip {
  background: var(--ink); color: white;
  padding: clamp(40px, 5vw, 64px) clamp(20px, 4vw, 80px);
}
.stats-strip .stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
@media (max-width: 700px) { .stats-strip .stats { grid-template-columns: 1fr 1fr; } }
.stats-strip .v {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(40px, 4.5vw, 64px); letter-spacing: -0.03em; line-height: 1;
}
.stats-strip .v sup { font-size: 0.5em; color: var(--warm); font-weight: 400; }
.stats-strip .l { font-size: 13px; color: rgba(255,255,255,0.6); margin-top: 12px; }

/* ============ OFFERS LIST (Home) ============ */
.offers-list { display: flex; flex-direction: column; }
.offer-row {
  display: grid;
  grid-template-columns: 80px 1.4fr 1.6fr 200px 36px;
  gap: 32px;
  padding: 28px 0;
  border-bottom: 1px solid rgba(15,29,46,0.1);
  align-items: center;
  cursor: pointer;
  transition: padding 0.25s, background 0.25s;
  text-decoration: none;
}
.offer-row:hover { padding-left: 14px; background: rgba(40,113,224,0.05); }
.offer-row .num {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 22px; color: var(--brand);
  letter-spacing: -0.02em;
}
.offer-row h3 {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(22px, 2vw, 30px); letter-spacing: -0.03em; line-height: 1.1;
  color: var(--ink);
}
.offer-row h3 em {
  font-family: var(--font-accent); font-style: italic; font-weight: 300;
  color: var(--brand); letter-spacing: -0.02em;
}
.offer-row p {
  color: var(--ink-soft); line-height: 1.55; font-size: 15px;
}
.offer-row .meta {
  text-align: right;
  font-family: var(--font-display); font-weight: 600;
  color: var(--ink); letter-spacing: -0.01em;
  font-size: 15px;
}
.offer-row .meta small {
  display: block; color: var(--ink-soft); font-weight: 400; font-size: 13px;
  margin-top: 4px;
}
.arrow-cell {
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid rgba(15,29,46,0.2);
  display: flex; align-items: center; justify-content: center;
  color: var(--ink); transition: all 0.2s;
  font-size: 0; line-height: 0;
}
/* Crisp, centered diagonal arrow via mask (hides the Unicode glyph fallback). */
.arrow-cell::before {
  content: ''; display: block; width: 15px; height: 15px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 11.5 11.5 4.5'/%3E%3Cpath d='M5.5 4.5h6v6'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 11.5 11.5 4.5'/%3E%3Cpath d='M5.5 4.5h6v6'/%3E%3C/svg%3E") center/contain no-repeat;
}
.offer-row:hover .arrow-cell { background: var(--brand); color: white; border-color: var(--brand); }
@media (max-width: 900px) {
  .offer-row { grid-template-columns: 60px 1fr; gap: 12px; }
  .offer-row p, .offer-row .arrow-cell { display: none; }
  .offer-row .meta { grid-column: 2; text-align: left; }
}

/* ============ REVIERE GRID (Home) ============ */
.reviere-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: 240px;
  gap: 16px;
}
.revier { position: relative; border-radius: 22px; overflow: hidden; display: block; }
.revier img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s; }
.revier:hover img { transform: scale(1.04); }
.revier-fallback { width: 100%; height: 100%; background: linear-gradient(135deg, var(--ink), var(--brand)); }

/* ============ REGION DETAIL (hero meta, intro + facts, matching trips) ============ */
.hero-meta-row { display: flex; gap: 28px; flex-wrap: wrap; }
.hero-meta-row .hm .v { font-family: var(--font-display); font-weight: 600; font-size: clamp(22px,2.4vw,32px); letter-spacing: -0.02em; }
.hero-meta-row .hm .l { font-size: 12px; color: rgba(255,255,255,0.7); margin-top: 4px; }

.revier-intro { background: var(--paper); padding: clamp(60px,8vw,110px) clamp(20px,4vw,80px); }
.ri-grid { max-width: 1500px; margin: 0 auto; display: grid; grid-template-columns: 1.5fr 1fr; gap: clamp(32px,5vw,80px); align-items: start; }
.ri-grid > .ri-text:only-child { grid-column: 1 / -1; }
@media (max-width: 900px) { .ri-grid { grid-template-columns: 1fr; gap: 36px; } }
.ri-text .eyebrow { display: inline-block; font-size: 13px; color: var(--ink-soft); margin-bottom: 14px; font-weight: 500; }
.ri-text h2 { font-family: var(--font-display); font-weight: 700; font-size: 45px; letter-spacing: -0.04em; line-height: 0.98; margin-bottom: 22px; }
.ri-text h2 em { font-family: var(--font-accent); font-style: italic; font-weight: 300; color: var(--brand); }
.ri-text p { color: var(--ink-soft); line-height: 1.7; font-size: 16px; margin-bottom: 16px; max-width: 58ch; }
.facts { background: white; border: 1px solid var(--rule); border-radius: 20px; padding: 28px 30px; }
.facts h3 { font-family: var(--font-display); font-weight: 700; font-size: 16px; letter-spacing: -0.01em; margin-bottom: 8px; }
.fact { display: flex; justify-content: space-between; gap: 16px; padding: 14px 0; border-top: 1px solid var(--rule); font-size: 14px; }
.fact:first-of-type { border-top: 0; }
.fact .k { color: var(--ink-soft); }
.fact .v { font-weight: 600; color: var(--ink); text-align: right; }
.facts .btn { margin-top: 22px; width: 100%; justify-content: space-between; }

/* ============ WIND & WETTER (Revierseite) ============ */
/* Sits in the second column under the facts card. The rows are named explicitly:
   with align-items: start and auto placement, a second aside slides under the
   text block in column 1 instead. */
.ri-grid > .ri-text { grid-column: 1; grid-row: 1 / span 3; }
.ri-grid > .facts { grid-column: 2; grid-row: 1; }
.ri-grid > .wx { grid-column: 2; grid-row: 2; }
@media (max-width: 900px) {
  .ri-grid > .ri-text, .ri-grid > .facts, .ri-grid > .wx { grid-column: 1; grid-row: auto; }
}

.wx {
  border-radius: 20px; overflow: hidden; color: white;
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-deep) 100%);
  position: relative;
}
.wx::before {
  content: ''; position: absolute; top: -110px; right: -90px;
  width: 280px; height: 280px; border-radius: 50%;
  background: rgba(255,255,255,0.07); pointer-events: none;
}
.wx-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 22px; border-bottom: 1px solid rgba(255,255,255,0.15);
  position: relative; z-index: 1;
}
.wx-head h3 { font-family: var(--font-display); font-weight: 700; font-size: 15px; letter-spacing: -0.01em; }
.wx-live {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 11px; letter-spacing: 0.04em; color: rgba(255,255,255,0.78);
}
.wx-live .dot {
  width: 6px; height: 6px; border-radius: 50%; background: #7fe3a8; flex: none;
  box-shadow: 0 0 0 0 rgba(127,227,168,0.6); animation: wxpulse 2.4s infinite;
}
@keyframes wxpulse {
  0%   { box-shadow: 0 0 0 0 rgba(127,227,168,0.55); }
  70%  { box-shadow: 0 0 0 7px rgba(127,227,168,0); }
  100% { box-shadow: 0 0 0 0 rgba(127,227,168,0); }
}
.wx-body { padding: 22px; position: relative; z-index: 1; }
.wx-now { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
.wx-glyph {
  width: 58px; height: 58px; flex: none; border-radius: 16px;
  background: rgba(255,255,255,0.15); display: grid; place-items: center; font-size: 28px;
}
.wx-loc { font-size: 11px; letter-spacing: 0.06em; color: rgba(255,255,255,0.7); font-weight: 600; margin-bottom: 3px; }
.wx-t { font-family: var(--font-display); font-weight: 700; font-size: 40px; line-height: 1; letter-spacing: -0.04em; }
.wx-desc { font-size: 13px; color: rgba(255,255,255,0.78); margin-top: 4px; }
.wx-stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
  border-top: 1px solid rgba(255,255,255,0.18); padding-top: 16px;
}
.wx-stats .v { font-family: var(--font-display); font-weight: 700; font-size: 17px; letter-spacing: -0.02em; }
.wx-stats .l { font-size: 11px; color: rgba(255,255,255,0.7); margin-top: 3px; }

/* Beaufort: what the measurement means, which is the point of the panel. */
.wx-bft { margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,0.18); }
.wx-bft-top {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 9px;
}
.wx-bft-top .k { font-size: 11px; letter-spacing: 0.06em; color: rgba(255,255,255,0.7); font-weight: 600; }
.wx-bft-top .v { font-family: var(--font-display); font-weight: 700; font-size: 13px; }
.wx-scale { display: flex; gap: 3px; }
.wx-scale span { flex: 1; height: 6px; border-radius: 3px; background: rgba(255,255,255,0.22); }
.wx-scale span.on { background: rgba(255,255,255,0.95); }
.wx-scale span.peak { background: #ffd9a8; }
.wx-bft-note { font-size: 12px; color: rgba(255,255,255,0.75); line-height: 1.5; margin-top: 9px; }

/* Five-day outlook */
.wx-fc {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px;
  margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,0.18);
}
.wx-day { text-align: center; padding: 8px 2px; border-radius: 12px; transition: background .2s; }
.wx-day:hover { background: rgba(255,255,255,0.1); }
.wx-day.today { background: rgba(255,255,255,0.16); }
.wx-day .d { font-size: 10px; letter-spacing: 0.06em; color: rgba(255,255,255,0.7); font-weight: 600; }
.wx-day .g { font-size: 17px; margin: 5px 0 3px; }
.wx-day .w { font-family: var(--font-display); font-weight: 700; font-size: 12px; letter-spacing: -0.01em; }
.wx-day .wd { font-size: 10px; color: rgba(255,255,255,0.65); margin-top: 1px; }

/* The footnote is not optional: a weather panel on a page you can book from
   reads as a promise otherwise. */
.wx-foot {
  font-size: 11px; line-height: 1.5; color: rgba(255,255,255,0.62);
  margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,0.14);
}

.matches { background: var(--paper); padding: clamp(60px,8vw,110px) clamp(20px,4vw,80px); }
.matches-inner { max-width: 1500px; margin: 0 auto; }
.matches .section-head { margin-bottom: clamp(32px,4vw,56px); padding-bottom: 28px; border-bottom: 1px solid var(--rule-strong); }
.trow {
  display: grid; grid-template-columns: 120px 1.5fr 1fr 130px 36px; gap: 24px;
  padding: 22px 0; border-bottom: 1px solid var(--rule); align-items: center;
  cursor: pointer; transition: padding 0.25s, background 0.25s;
}
.trow:hover { padding-left: 14px; background: rgba(40,113,224,0.05); }
.trow .d { font-family: var(--font-display); font-weight: 600; font-size: 14px; }
.trow .d small { display: block; font-family: var(--font-body); font-weight: 400; font-size: 12px; color: var(--ink-soft); margin-top: 4px; }
.trow .nm { font-family: var(--font-display); font-weight: 600; font-size: clamp(17px,1.5vw,21px); letter-spacing: -0.02em; }
.trow .nm small { display: block; font-family: var(--font-body); font-weight: 400; font-size: 13px; color: var(--ink-soft); margin-top: 5px; }
.trow .col { font-size: 13px; color: var(--ink-soft); }
.trow .col strong { display: block; color: var(--ink); font-weight: 600; font-size: 14px; margin-bottom: 2px; }
.trow .price { font-family: var(--font-display); font-weight: 600; font-size: clamp(18px,1.6vw,22px); letter-spacing: -0.02em; text-align: right; }
.trow .ac { width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(15,29,46,0.2); display: flex; align-items: center; justify-content: center; color: var(--ink); transition: all 0.2s; font-size: 0; line-height: 0; }
.trow .ac::before {
  content: ''; display: block; width: 15px; height: 15px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 11.5 11.5 4.5'/%3E%3Cpath d='M5.5 4.5h6v6'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 11.5 11.5 4.5'/%3E%3Cpath d='M5.5 4.5h6v6'/%3E%3C/svg%3E") center/contain no-repeat;
}
.trow:hover .ac { background: var(--brand); color: white; border-color: var(--brand); }
@media (max-width: 900px) { .trow { grid-template-columns: 1fr 1fr; gap: 12px; } .trow .col, .trow .ac { display: none; } .trow .nm { grid-column: span 2; } .trow .price { text-align: left; } }

/* ============ PHOTO GALLERY (band + lightbox) ============ */
.bands { background: var(--ink); padding: clamp(16px,2.5vw,28px) 0; overflow: hidden; }
.bands-head {
  max-width: 1500px; margin: 0 auto clamp(8px,1.5vw,16px);
  padding: 0 clamp(20px,4vw,80px);
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
}
.bands-head .t { font-family: var(--font-display); font-weight: 600; color: white; font-size: clamp(18px,2vw,26px); letter-spacing: -0.02em; }
.bands-head .h { font-size: 13px; color: rgba(255,255,255,0.55); }
/* The band's speed lives here; the template only says how many tiles it holds
   (--band-tiles). One pass takes --band-step per tile, so the pace stays the same
   however full the album gets — it used to be a flat 55s for the whole pass, which
   made a big album race past. Tune the tempo by changing --band-step. */
.band {
  --band-step: 7s;
  display: flex; gap: 16px; width: max-content; will-change: transform;
  animation: scroll-l calc(var(--band-tiles, 8) * var(--band-step)) linear infinite;
}
.band + .band { margin-top: 16px; }
/* The second row runs a touch slower, so the two never march in lockstep. */
.band.b2 { --band-step: 8s; animation-name: scroll-r; }
.bands:hover .band { animation-play-state: paused; }
@keyframes scroll-l { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes scroll-r { from { transform: translateX(-50%); } to { transform: translateX(0); } }
.bshot {
  position: relative; flex: 0 0 auto;
  width: clamp(220px,26vw,340px); height: clamp(150px,17vw,220px);
  border-radius: 14px; overflow: hidden; cursor: zoom-in;
  background: rgba(255,255,255,0.05);
  padding: 0; border: 0; appearance: none; -webkit-appearance: none;
}
.bshot img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s cubic-bezier(0.2,0.7,0.2,1); }
.bshot:hover img { transform: scale(1.07); }
.bshot::after { content:''; position:absolute; inset:0; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08); border-radius:14px; }
@media (prefers-reduced-motion: reduce) { .band { animation: none !important; } }

.lightbox { position: fixed; inset: 0; z-index: 300; background: rgba(8,18,32,0.92); backdrop-filter: blur(8px); display: none; align-items: center; justify-content: center; padding: clamp(20px,4vw,64px); opacity: 0; transition: opacity 0.3s ease; }
.lightbox.open { display: flex; }
.lightbox.show { opacity: 1; }
.lb-stage { position: relative; max-width: 1100px; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.lb-img-wrap { position: relative; width: 100%; display: flex; align-items: center; justify-content: center; }
.lb-img { max-width: 100%; max-height: 78vh; border-radius: 14px; display: block; box-shadow: 0 30px 80px -20px rgba(0,0,0,0.6); transform: scale(0.97); opacity: 0; transition: transform 0.35s cubic-bezier(0.16,1,0.3,1), opacity 0.35s ease; }
.lightbox.show .lb-img { transform: scale(1); opacity: 1; }
.lb-meta { display: flex; align-items: center; gap: 14px; color: rgba(255,255,255,0.85); font-size: 14px; }
.lb-meta .lb-tag { font-size: 11px; font-weight: 600; letter-spacing: 0.04em; color: var(--ink); background: var(--warm); padding: 4px 10px; border-radius: 999px; }
.lb-meta .lb-count { color: rgba(255,255,255,0.55); font-variant-numeric: tabular-nums; }
.lb-btn { position: absolute; top: 50%; transform: translateY(-50%); width: 52px; height: 52px; border-radius: 50%; background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.25); color: white; font-size: 22px; display: grid; place-items: center; transition: background 0.2s; backdrop-filter: blur(8px); cursor: pointer; }
.lb-btn:hover { background: rgba(255,255,255,0.25); }
/* An explicit display would otherwise beat the browser's [hidden] rule. */
.lb-btn[hidden] { display: none; }
.lb-prev { left: -8px; }
.lb-next { right: -8px; }
@media (max-width: 760px) { .lb-prev { left: 0; } .lb-next { right: 0; } }
.lb-close { position: fixed; top: 24px; right: 24px; width: 46px; height: 46px; border-radius: 50%; background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.25); color: white; font-size: 22px; display: grid; place-items: center; transition: background 0.2s; backdrop-filter: blur(8px); cursor: pointer; }
.lb-close:hover { background: rgba(255,255,255,0.25); }

/* ============ GALLERY PAGE (story rows) ============ */
.stories { background: var(--paper); padding: clamp(60px,8vw,110px) 0; }
.story {
  max-width: 1500px; margin: 0 auto;
  padding: clamp(40px,5vw,72px) clamp(20px,4vw,80px);
  display: grid; grid-template-columns: 1fr 1.25fr; gap: clamp(24px,3vw,48px);
  align-items: center;
}
.story + .story { border-top: 1px solid var(--rule); }
.story:nth-child(even) .story-feature { order: 2; }
@media (max-width: 900px) { .story { grid-template-columns: 1fr; } .story:nth-child(even) .story-feature { order: 0; } }

.story-head .idx {
  font-family: var(--font-accent); font-style: italic; font-weight: 300;
  font-size: clamp(34px,4vw,56px); color: var(--brand-bright, #5b9eff); line-height: 1;
  margin-bottom: 14px;
}
.story-head h2 {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(30px,3.4vw,52px); letter-spacing: -0.035em; line-height: 0.98;
  color: var(--ink); margin-bottom: 14px;
}
.story-head h2 em { font-family: var(--font-accent); font-style: italic; font-weight: 300; color: var(--brand); }
.story-head p { color: var(--ink-soft); line-height: 1.6; font-size: 15px; max-width: 42ch; margin-bottom: 18px; }
.story-head .tagline {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 600; color: var(--brand);
}

.sstrip-wrap { display: flex; flex-direction: column; }
.story-feature {
  position: relative; display: block; width: 100%;
  border-radius: 20px; overflow: hidden;
  aspect-ratio: 16/11; background: var(--paper-soft); border: 1px solid var(--rule);
  cursor: zoom-in; padding: 0; appearance: none; -webkit-appearance: none;
}
.story-feature img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.8s cubic-bezier(0.2,0.7,0.2,1); }
.story-feature:hover img { transform: scale(1.05); }

.strip { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 6px; margin-top: 16px; scroll-snap-type: x mandatory; scrollbar-width: thin; }
.strip::-webkit-scrollbar { height: 6px; }
.strip::-webkit-scrollbar-thumb { background: var(--rule-strong); border-radius: 99px; }
.strip .sshot {
  position: relative; flex: 0 0 auto;
  width: 180px; height: 130px; border-radius: 12px; overflow: hidden;
  cursor: zoom-in; scroll-snap-align: start; background: var(--paper-soft);
  padding: 0; border: 0; appearance: none; -webkit-appearance: none;
}
.strip .sshot img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s; }
.strip .sshot:hover img { transform: scale(1.07); }
.revier::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,0.7) 100%);
}
.revier-label {
  position: absolute; left: 22px; right: 22px; bottom: 22px; color: white; z-index: 2;
}
.revier-label .num {
  font-size: 12px; color: rgba(255,255,255,0.7); margin-bottom: 6px;
  font-feature-settings: 'tnum';
}
.revier-label h3 {
  font-family: var(--font-display); font-weight: 600;
  font-size: 24px; letter-spacing: -0.025em; line-height: 1;
  margin-bottom: 4px;
}
.revier-label .sub { font-size: 13px; color: rgba(255,255,255,0.85); }
.revier-large { grid-column: span 3; grid-row: span 2; }
.revier-large .revier-label h3 { font-size: 36px; }
/* Every non-large tile spans half the grid, so the layout generalises to any
   number of data-driven regions: the first tile is large, the rest fill in
   two per row. */
.revier:not(.revier-large) { grid-column: span 3; }

/* Narrow layouts. Both rules are written as `.reviere-grid .revier` on purpose:
   the rule above is `.revier:not(.revier-large)`, and :not() carries the
   specificity of what is inside it — 0,2,0 against the 0,1,0 of a bare .revier.
   So the override that used to live here never applied to anything but the large
   tile, and the result was the one the eye catches immediately: the first region
   half the width of the page and every one after it full width.

   Two columns from a tablet down, one on a phone. Two 180px tiles side by side
   cannot hold a region's name and its list of seas. */
@media (max-width: 900px) {
  .reviere-grid { grid-template-columns: 1fr 1fr; grid-auto-rows: 200px; }
  .reviere-grid .revier { grid-column: span 1; grid-row: auto; }
}
@media (max-width: 640px) {
  .reviere-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ============ YACHT (Home) ============ */
.yacht { padding: clamp(70px, 9vw, 130px) clamp(20px, 4vw, 80px); background: var(--paper-soft); }
.yacht-card {
  border-radius: 28px; overflow: hidden;
  background: white;
  display: grid; grid-template-columns: 1.2fr 1fr;
  align-items: stretch;
}
@media (max-width: 900px) { .yacht-card { grid-template-columns: 1fr; } }
.yacht-card img { width: 100%; height: 100%; min-height: 360px; object-fit: cover; display: block; }
.yacht-content { padding: clamp(32px, 4vw, 56px); display: flex; flex-direction: column; gap: 24px; justify-content: center; }
.yacht-content h2 {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(36px, 4vw, 56px); letter-spacing: -0.04em; line-height: 0.95;
}
.yacht-content h2 em {
  font-family: var(--font-accent); font-style: italic; font-weight: 300;
  color: var(--brand); letter-spacing: -0.025em;
}
.yacht-content p { color: var(--ink-soft); line-height: 1.6; max-width: 44ch; font-size: 16px; }
.yacht-specs {
  display: grid; grid-template-columns: 1fr 1fr; gap: 20px 32px;
  border-top: 1px solid var(--rule); padding-top: 24px;
}
.yacht-specs .v {
  font-family: var(--font-display); font-weight: 600;
  font-size: 28px; letter-spacing: -0.025em; line-height: 1; color: var(--ink);
}
.yacht-specs .l { font-size: 13px; color: var(--ink-soft); margin-top: 6px; }

/* ============ CONTACT (Home) ============ */
.contact { padding: clamp(70px, 9vw, 130px) clamp(20px, 4vw, 80px); background: var(--paper); }
/* Three blocks placed by name, because the narrow layout wants a different order
   than the wide one. Wide: the invitation and the details stacked in the left
   column, the form beside them. Narrow: the invitation, then the form, then the
   details — the telephone number is the fallback for somebody who does not want to
   type into a form, so it belongs after the form and not in front of it.

   Named areas rather than `order`, because the details sit inside the intro's own
   flow on the wide layout and an order value cannot reach into a parent. */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  grid-template-areas:
    "intro form"
    "info  form";
  column-gap: 64px;
  row-gap: 0;
  align-content: start;
}
.contact-intro { grid-area: intro; }
.contact-info { grid-area: info; }
.contact-form { grid-area: form; }
@media (max-width: 900px) {
  .contact-grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "intro"
      "form"
      "info";
    row-gap: 32px;
  }
}
.contact-intro h2 {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(36px, 4.5vw, 64px); letter-spacing: -0.04em; line-height: 0.95;
  margin-bottom: 20px;
}
.contact-intro h2 em {
  font-family: var(--font-accent); font-style: italic; font-weight: 300;
  color: var(--brand); letter-spacing: -0.025em;
}
.contact-intro p { color: var(--ink-soft); line-height: 1.6; max-width: 42ch; font-size: 16px; margin-bottom: 36px; }
.contact-info {
  display: flex; flex-direction: column; gap: 20px;
  padding-top: 28px; border-top: 1px solid var(--rule);
}
.contact-info .item .l {
  font-size: 12px; color: var(--ink-soft); margin-bottom: 4px;
}
.contact-info .item .v {
  font-family: var(--font-display); font-weight: 600;
  font-size: 17px; color: var(--ink); letter-spacing: -0.015em;
}
.contact-form {
  background: white; border-radius: 26px;
  padding: clamp(28px, 3.5vw, 48px);
  border: 1px solid var(--rule);
  display: flex; flex-direction: column; gap: 22px;
}
.form-eyebrow {
  font-size: 12px; color: var(--ink-soft); margin-bottom: 6px;
}
.contact-form h3 {
  font-family: var(--font-display); font-weight: 700;
  font-size: 28px; letter-spacing: -0.03em; line-height: 1.05;
  margin-bottom: 8px;
}
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 600px) { .field-row { grid-template-columns: 1fr; } }
.field {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: 12px 16px;
  transition: border 0.2s;
}
.field:focus-within { border-color: var(--brand); }
.field .l { font-size: 11px; color: var(--ink-soft); margin-bottom: 4px; }
.field input, .field textarea { font-size: 15px; color: var(--ink); }

/* ============ LINKED TRIP ON THE CONTACT FORM ============ */
/* The card is rendered only when there is a trip, so it needs no shown/hidden
   state of its own — the server has already decided. */
.tref-card {
  display: grid; grid-template-columns: 62px 1fr auto; gap: 14px; align-items: center;
  padding: 12px 14px; border: 1px solid rgba(40,113,224,0.28);
  background: rgba(40,113,224,0.06); border-radius: 16px;
}
@media (max-width: 560px) { .tref-card { grid-template-columns: 52px 1fr; } }
.tref-thumb { width: 62px; height: 50px; border-radius: 10px; overflow: hidden; background: var(--paper-soft); }
@media (max-width: 560px) { .tref-thumb { width: 52px; height: 44px; } }
.tref-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tref-body { min-width: 0; }
.tref-kick {
  display: flex; align-items: center; gap: 7px;
  font-size: 11px; letter-spacing: 0.02em; color: var(--brand); font-weight: 600; margin-bottom: 3px;
}
.tref-kick .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--brand); flex: none; }
/* Needs to be a block: as an inline span, overflow and ellipsis do not apply and a
   long trip name grows out of the card. */
.tref-name {
  display: block; min-width: 0;
  font-family: var(--font-display); font-weight: 700; font-size: 15.5px;
  letter-spacing: -0.02em; line-height: 1.2; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tref-meta {
  display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 4px;
  font-size: 12.5px; color: var(--ink-soft);
}
.tref-meta b { color: var(--ink); font-weight: 600; }
/* The separator belongs between two values, so it is drawn from the second one on:
   a trip without a price then leaves no dangling dot. */
.tref-meta > span + span::before { content: '·'; opacity: 0.4; margin-right: 10px; }
.tref-cap {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 7px;
  font-size: 12.5px; font-weight: 600; letter-spacing: -0.005em;
}
.tref-cap .cdot { width: 8px; height: 8px; border-radius: 50%; flex: none; position: relative; }
/* The halo inherits the state colour instead of repeating it per state. */
.tref-cap .cdot::after {
  content: ''; position: absolute; inset: -4px; border-radius: 50%;
  background: inherit; opacity: 0.22;
}
/* Darkened against the light card for AA contrast — not the calendar's colours. */
.tref-cap.free  { color: #0f7a45; }
.tref-cap.free  .cdot { background: #17a45f; }
.tref-cap.tight { color: #8a6100; }
.tref-cap.tight .cdot { background: #e0a020; }
.tref-cap.full  { color: #a82a2a; }
.tref-cap.full  .cdot { background: #d64545; }
/* Sold out reframes the whole card: the form promises a waiting list, not a place. */
.tref-card.is-full { border-color: rgba(214,69,69,0.3); background: rgba(214,69,69,0.05); }
.tref-card.is-full .tref-kick { color: #d64545; }
.tref-card.is-full .tref-kick .dot { background: #d64545; }
.tref-drop {
  flex: none; width: 28px; height: 28px; border-radius: 50%; border: 1px solid rgba(15,29,46,0.16);
  background: white; color: var(--ink-soft); font-size: 15px; line-height: 1;
  display: grid; place-items: center; cursor: pointer; transition: all 0.18s;
  text-decoration: none;
}
.tref-drop:hover { border-color: var(--ink); color: var(--ink); }
@media (max-width: 560px) { .tref-drop { grid-column: 2; justify-self: start; margin-top: 8px; } }
.field textarea { resize: vertical; min-height: 90px; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.chip {
  padding: 7px 14px; background: white;
  border: 1px solid var(--rule);
  border-radius: 999px;
  font-size: 13px; color: var(--ink-soft);
  cursor: pointer; transition: all 0.2s;
}
.chip:hover { border-color: var(--ink); color: var(--ink); }
.chip.active,
input:checked + .chip { background: var(--brand); color: white; border-color: var(--brand); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }
/* A note under a pair of fields, explaining what the pair is for. Only the flexible
   window uses one: its two date fields are the question rather than the answer, and
   the range it allows has to be readable without opening the picker. Sits tight under
   the row it belongs to, against the row's own gap. */
.field-note {
  margin-top: -8px;
  font-size: 12px; line-height: 1.45; color: var(--ink-soft);
}

.submit-row {
  display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
  margin-top: 4px;
}
.submit-note { font-size: 12px; color: var(--ink-soft); max-width: 28ch; }
.submit-btn {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 14px 8px 14px 22px;
  background: var(--ink); color: white;
  border-radius: 999px;
  font-family: var(--font-display); font-weight: 600;
  font-size: 15px; letter-spacing: -0.01em;
  cursor: pointer;
}
.submit-btn .arr {
  width: 30px; height: 30px; background: white; color: var(--ink);
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 0; line-height: 0;
}
/* Hide the Unicode glyph fallback; draw a crisp, centered SVG arrow (as a mask
   so it takes the circle's text color). Matches .btn .arr / .nav-cta .arr. */
.submit-btn .arr::before {
  content: ''; display: block; width: 15px; height: 15px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8h10'/%3E%3Cpath d='M8.5 3.5 13 8l-4.5 4.5'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8h10'/%3E%3Cpath d='M8.5 3.5 13 8l-4.5 4.5'/%3E%3C/svg%3E") center/contain no-repeat;
}
/* Still while the request is out: one click is one enquiry. No pulse — the answer
   comes back at once now, and a pulse that short looked like something broken. */
.submit-btn.htmx-request {
  pointer-events: none;
}

/* ============ CONTACT SUCCESS ============ */
.thanks-wrap.contact-form {
  display: grid;
  padding: 0;
  border: none;
  gap: 0;
  background: white;
  overflow: hidden;
}
.thanks {
  display: flex;
  align-items: center; justify-content: center;
  padding: clamp(28px, 3.5vw, 48px);
}
.thanks-card {
  position: relative;
  background: transparent;
  padding: clamp(20px, 3vw, 36px);
  max-width: 560px; width: 100%;
  text-align: center;
}
.thanks-card::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 0%, rgba(40,113,224,0.08), transparent 60%);
  pointer-events: none;
}

/* mark: ring-draw → disc-fill → check-draw → pulse-rings */
.thanks-mark {
  position: relative;
  width: 96px; height: 96px;
  margin: 0 auto 28px;
}
.thanks-mark svg {
  position: relative; z-index: 1;
  width: 96px; height: 96px; display: block;
  transform: rotate(-90deg);
}
.thanks-mark .ring-draw {
  fill: none; stroke: var(--brand); stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 226; stroke-dashoffset: 226;
  animation: ring-draw 0.62s cubic-bezier(0.65, 0, 0.35, 1) 0.1s forwards;
}
@keyframes ring-draw { to { stroke-dashoffset: 0; } }
.thanks-mark .disc-fill {
  fill: var(--brand); opacity: 0;
  animation: disc-fade 0.34s ease 0.62s forwards;
}
@keyframes disc-fade { to { opacity: 1; } }
.thanks-mark .mark-check {
  fill: none; stroke: white; stroke-width: 5;
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 52; stroke-dashoffset: 52;
  animation: draw 0.42s cubic-bezier(0.65, 0, 0.45, 1) 0.92s forwards;
}
@keyframes draw { to { stroke-dashoffset: 0; } }

.thanks-mark .pulse-ring {
  position: absolute; inset: 0;
  border-radius: 50%;
  border: 2px solid var(--brand);
  opacity: 0; pointer-events: none;
  animation: ring-pulse 1.1s ease-out 1.2s 2;
}
.thanks-mark .pulse-ring.p2 { animation-delay: 1.4s; }
.thanks-mark .pulse-ring.p3 { animation-delay: 1.6s; }
@keyframes ring-pulse {
  0% { transform: scale(0.7); opacity: 0.5; }
  100% { transform: scale(2); opacity: 0; }
}

/* content rises staggered after mark completes */
.thanks-card .eyebrow,
.thanks-card h3,
.thanks-card > p,
.thanks-card .summary,
.thanks-card .actions,
.thanks-card .reply-note {
  opacity: 0; transform: translateY(10px);
}
.thanks-card .eyebrow  { animation: rise 0.5s ease 1.85s forwards; }
.thanks-card h3        { animation: rise 0.5s ease 1.95s forwards; }
.thanks-card > p       { animation: rise 0.5s ease 2.05s forwards; }
.thanks-card .summary  { animation: rise 0.5s ease 2.15s forwards; }
.thanks-card .actions  { animation: rise 0.5s ease 2.25s forwards; }
.thanks-card .reply-note { animation: rise 0.5s ease 2.35s forwards; }
@keyframes rise { to { opacity: 1; transform: translateY(0); } }

.thanks-card .eyebrow {
  color: var(--brand); display: inline-block; margin-bottom: 12px;
}
.thanks-card h3 {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(26px, 3.2vw, 36px);
  letter-spacing: -0.03em; line-height: 1.05;
  color: var(--ink); margin-bottom: 14px;
}
.thanks-card h3 em {
  font-family: var(--font-accent); font-style: italic; font-weight: 300;
  color: var(--brand); letter-spacing: -0.02em;
}
.thanks-card p {
  color: var(--ink-soft); line-height: 1.6; font-size: 16px;
  max-width: 38ch; margin: 0 auto 28px;
}
.thanks-card .summary {
  background: var(--paper-warm, var(--paper));
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: 14px 18px; margin-bottom: 26px;
  text-align: left;
  display: grid; grid-template-columns: auto 1fr; gap: 6px 14px;
  font-size: 13px;
}
.thanks-card .summary .k { color: var(--ink-soft); }
.thanks-card .summary .v { color: var(--ink); font-weight: 600; text-align: right; }
.thanks-card .actions {
  display: flex; gap: 10px; justify-content: center; flex-wrap: wrap;
}
.thanks-card .actions a, .thanks-card .actions button {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 13px 22px; border-radius: 999px;
  font-family: var(--font-display); font-weight: 600; font-size: 14px;
  cursor: pointer; transition: all 0.15s;
}
.thanks-card .actions .primary { background: var(--ink); color: white; }
.thanks-card .actions .primary:hover { background: var(--brand); }
.thanks-card .actions .ghost { background: transparent; color: var(--ink); border: 1px solid var(--rule); }
.thanks-card .actions .ghost:hover { border-color: var(--ink); }
.thanks-card .reply-note {
  margin-top: 18px; font-size: 12px; color: var(--ink-soft);
  display: flex; align-items: center; justify-content: center; gap: 8px;
}
.thanks-card .reply-note .pulse {
  width: 7px; height: 7px; border-radius: 50%; background: #2eb872;
  animation: blink 1.6s infinite;
}
@keyframes blink { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }

@media (prefers-reduced-motion: reduce) {
  .thanks-card, .thanks-card .eyebrow, .thanks-card h3, .thanks-card > p,
  .thanks-card .summary, .thanks-card .actions, .thanks-card .reply-note,
  .thanks-mark .ring-draw, .thanks-mark .disc-fill, .thanks-mark .mark-check,
  .thanks-mark .pulse-ring {
    animation: none !important; transition: none !important;
    transform: none !important; opacity: 1 !important;
    stroke-dashoffset: 0 !important;
  }
}

/* ============ MANIFESTO (About) ============ */
.manifesto { padding: clamp(70px, 9vw, 130px) clamp(20px, 4vw, 80px); background: var(--paper); }
.manifesto-grid {
  display: grid; grid-template-columns: 1fr 1.6fr;
  gap: clamp(40px, 6vw, 96px); align-items: start;
}
@media (max-width: 900px) { .manifesto-grid { grid-template-columns: 1fr; } }
.manifesto h2 {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(40px, 5.5vw, 76px); line-height: 0.95;
  letter-spacing: -0.04em;
}
.manifesto h2 em {
  font-family: var(--font-accent); font-style: italic; font-weight: 300;
  color: var(--brand); letter-spacing: -0.025em;
}
.principles { display: flex; flex-direction: column; }
.principle {
  display: grid; grid-template-columns: 60px 1fr; gap: 28px;
  padding: 28px 0; border-bottom: 1px solid var(--rule);
}
.principle:first-child { border-top: 1px solid var(--rule); }
.principle .n {
  font-family: var(--font-display); font-weight: 600;
  color: var(--brand); font-size: 22px; letter-spacing: -0.02em;
}
.principle h3 {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(22px, 2vw, 30px); letter-spacing: -0.025em;
  line-height: 1.15; margin-bottom: 10px; color: var(--ink);
}
.principle p { color: var(--ink-soft); line-height: 1.6; font-size: 15px; max-width: 60ch; }

/* ============ CREW (About) ============ */

/* Three equal columns: the two skippers and a dark tile that closes the row.
   Two cards in a grid of three would stand beside a gap, and the alternative —
   inventing a third face — is the one thing a page about who is on board may not do.

   align-items: start, so the tile keeps its own height instead of being stretched to
   whichever portrait card is tallest. */
.crew { padding: clamp(70px, 9vw, 130px) clamp(20px, 4vw, 80px); background: var(--paper-soft); }
.crew-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
  max-width: 1180px; align-items: start;
}
/* Two columns first — the tile drops to the second row and fills it — then one. */
@media (max-width: 860px) { .crew-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .crew-grid { grid-template-columns: 1fr; } }

.crew-card {
  background: white; border-radius: 24px; overflow: hidden;
  display: flex; flex-direction: column;
  border: 1px solid var(--rule);
}

/* The photograph sits inset in the card rather than bleeding to its edges, and the
   card's own white shows around it. */
.crew-img { position: relative; padding: 22px 22px 0; background: white; }

/* Narrow the box, do not crop the picture.

   The design's rule: the two portraits are composed differently — one from the
   shoulders, one close up — and forcing them to a common eye line with
   object-position, or masking them into circles, makes them read as a pair that
   failed. Narrowing the box to three quarters of the card leaves both uncropped and
   lets them read as two photographs. No object-position anywhere here.

   The design assumed square sources (420×420) and therefore a 1:1 box. Ours are not:
   243×319 and 451×610, both upright. A square box would centre-crop an upright
   photograph — through the forehead and the chin, which is the very thing the rule
   above is against. So the box takes the orientation the pictures actually have. At
   3:4 the two ratios (0.762 and 0.739) lose about a percent each, which is nothing;
   at 1:1 they would lose a quarter of their height.

   Square sources would be better and this rule would then read 1 / 1. */
.crew-portrait {
  width: 74%; margin: 0 auto;
  aspect-ratio: 3 / 4; overflow: hidden;
  background: var(--paper-soft); border-radius: 14px;
  /* Grid, so a member whose photograph has not arrived gets their placeholder in the
     middle of the box rather than in its corner. */
  display: grid; place-items: center;
}
.crew-portrait img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* A four-pixel brand stripe as the foot of the picture: it runs the full width of the
   card and so is wider than the photograph, which is what separates image from text
   without a rule or a shadow. */
.crew-img::after {
  content: ''; display: block; height: 4px; margin: 22px 0 0;
  background: linear-gradient(90deg, var(--brand) 0%, var(--brand-deep) 100%);
}

/* A member whose photograph has not arrived yet. In the portrait box, so the card
   keeps its shape and the row does not go ragged over a missing file. */
.crew-portrait .ph-tag {
  font-size: 12px; color: rgba(15,29,46,0.55);
  border: 1px dashed rgba(15,29,46,0.3);
  padding: 6px 12px; border-radius: 999px;
  background: rgba(255,255,255,0.5);
  text-align: center;
}

.crew-card .body { padding: 22px 24px 26px; display: flex; flex-direction: column; gap: 14px; }
.crew-card h3 {
  font-family: var(--font-display); font-weight: 700;
  font-size: 22px; letter-spacing: -0.025em; line-height: 1.05;
}
.role { font-size: 13px; color: var(--brand); font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; }
.crew-card p { color: var(--ink-soft); line-height: 1.55; font-size: 14px; }
.creds { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.creds span {
  font-size: 11px; color: var(--ink-soft);
  border: 1px solid var(--rule); padding: 4px 10px; border-radius: 999px;
  letter-spacing: 0.04em;
}

/* The tile. Dark, centred in itself, and shorter than the cards beside it. */
.crew-note {
  background: var(--ink); color: white; border-radius: 24px;
  padding: 32px 30px;
  display: flex; flex-direction: column; justify-content: center; gap: 14px;
}
.crew-note h3 {
  font-family: var(--font-display); font-weight: 700; font-size: 24px;
  letter-spacing: -0.025em; line-height: 1.1; color: white;
}
/* The emphasised word, as everywhere on this site — but in the warm accent rather
   than the brand blue, which on this dark ground would sit too close to the
   background to read as emphasis at all. */
.crew-note h3 em {
  font-family: var(--font-accent); font-style: italic; font-weight: 300; color: var(--warm);
}
.crew-note p { color: rgba(255,255,255,0.78); line-height: 1.65; font-size: 14.5px; }
.crew-note .n-link {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 4px;
  font-family: var(--font-display); font-weight: 600; font-size: 14px; color: var(--warm);
  text-decoration: none;
}
.crew-note .n-link:hover { text-decoration: underline; }

/* ============ APPROACH (About) ============ */
.approach { padding: clamp(70px, 9vw, 130px) clamp(20px, 4vw, 80px); background: var(--ink); color: white; }
.approach .section-head h2 { color: white; }
.approach .section-head { border-bottom-color: rgba(255,255,255,0.16); }
.approach .eyebrow { color: rgba(255,255,255,0.6); }
.approach .eyebrow::before { background: rgba(255,255,255,0.4); }
.approach .section-head .lead { color: rgba(255,255,255,0.7); }
.ap-rows { display: flex; flex-direction: column; }
.ap-row {
  display: grid; grid-template-columns: 80px 1fr;
  gap: 32px; padding: 32px 0;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  align-items: start;
}
.ap-row .n {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(28px, 2.6vw, 38px);
  color: var(--warm); letter-spacing: -0.02em; line-height: 1;
}
.ap-row h4 {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(22px, 2vw, 30px); letter-spacing: -0.02em; line-height: 1.15;
  margin-bottom: 10px;
}
.ap-row p { color: rgba(255,255,255,0.78); line-height: 1.65; font-size: 15px; max-width: 65ch; }

/* ============ CONTACT CARD (About) ============ */
.contact-card { padding: clamp(70px, 9vw, 130px) clamp(20px, 4vw, 80px); background: var(--paper); }
.cc-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0;
  border: 1px solid var(--rule); border-radius: 24px; overflow: hidden;
  background: white;
}
@media (max-width: 800px) { .cc-grid { grid-template-columns: 1fr; } }
.cc-side { padding: clamp(36px, 5vw, 56px); }
.cc-side.dark { background: var(--ink); color: white; }
.cc-side h3 {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(28px, 3vw, 42px); line-height: 1; letter-spacing: -0.03em;
  margin-bottom: 18px;
}
.cc-side h3 em {
  font-family: var(--font-accent); font-style: italic; font-weight: 300;
  color: var(--warm); letter-spacing: -0.025em;
}
.cc-side p { line-height: 1.65; color: rgba(255,255,255,0.78); margin-bottom: 28px; max-width: 42ch; }
.cc-list { display: flex; flex-direction: column; gap: 18px; }
.cc-list .item .l {
  font-size: 11px; letter-spacing: 0.08em;
  text-transform: uppercase; color: rgba(255,255,255,0.5); margin-bottom: 4px;
}
.cc-list .item .v {
  font-family: var(--font-display); font-weight: 500;
  font-size: 18px; letter-spacing: -0.01em; color: white;
}
.cc-side.light h3 { color: var(--ink); }
.cc-side.light h3 em { color: var(--brand); }
.cc-side.light p { color: var(--ink-soft); }
.cc-side.light .cc-list .item .l { color: var(--ink-soft); }
.cc-side.light .cc-list .item .v { color: var(--ink); }

/* ============ HERO VARIANTS ============ */

/* ============ FAQ ACCORDION ============ */
.faq-section {
  padding: clamp(40px, 5vw, 80px) clamp(20px, 4vw, 80px) clamp(60px, 7vw, 100px);
}
.faq-group {
  max-width: 920px; margin: 0 auto 56px;
}
.faq-group-head {
  display: flex; align-items: baseline; gap: 16px;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--rule);
}
.faq-group-head .num {
  font-family: var(--font-display); font-weight: 600;
  color: var(--brand); font-size: 14px;
  letter-spacing: 0.04em; text-transform: uppercase;
}
.faq-group-head h2 {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(28px, 3.5vw, 44px);
  letter-spacing: -0.03em; line-height: 1.05;
}
.faq-group-head h2 em {
  font-family: var(--font-accent); font-style: italic; font-weight: 300;
  color: var(--brand); letter-spacing: -0.02em;
}
details.qa {
  border-bottom: 1px solid var(--rule);
  padding: 22px 0;
  transition: padding 0.3s;
}
details.qa[open] { padding: 28px 0 32px; }
details.qa summary {
  list-style: none; cursor: pointer;
  display: grid; grid-template-columns: 1fr 32px; gap: 24px;
  align-items: center;
}
details.qa summary::-webkit-details-marker { display: none; }
details.qa summary h3 {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(18px, 1.6vw, 22px);
  letter-spacing: -0.015em; line-height: 1.3;
  color: var(--ink);
}
details.qa summary .toggle {
  width: 32px; height: 32px;
  border-radius: 50%; border: 1px solid var(--rule-strong);
  display: grid; place-items: center;
  font-size: 16px; color: var(--ink-soft);
  transition: all 0.2s;
}
details.qa[open] summary .toggle {
  background: var(--brand); color: white; border-color: var(--brand);
  transform: rotate(45deg);
}
details.qa:hover summary .toggle { border-color: var(--ink); color: var(--ink); }
details.qa .answer {
  margin-top: 18px;
  padding-right: 56px;
  color: var(--ink-soft);
  line-height: 1.7;
  font-size: 16px;
  max-width: 70ch;
}
details.qa .answer p + p { margin-top: 14px; }
details.qa .answer strong { color: var(--ink); font-weight: 600; }
details.qa .answer a { color: var(--brand); border-bottom: 1px solid currentColor; }

/* ============ TRIP CALENDAR ============ */
.calendar { padding: clamp(60px, 8vw, 120px) clamp(20px, 4vw, 80px); background: var(--paper); }
.calendar .toolbar {
  display: flex; justify-content: space-between; align-items: center;
  gap: 16px; flex-wrap: wrap;
  padding-bottom: 24px; margin-bottom: 32px;
  border-bottom: 1px solid var(--rule);
}
.calendar .filter-row { display: flex; gap: 8px; flex-wrap: wrap; }
.calendar .view-toggle {
  display: flex; border: 1px solid rgba(15,29,46,0.15);
  border-radius: 999px; overflow: hidden; background: white;
}
.calendar .view-toggle button {
  padding: 10px 20px; font-size: 14px; font-weight: 500; letter-spacing: -0.005em;
  color: var(--ink-soft);
}
.calendar .view-toggle button.active { background: var(--ink); color: var(--paper-warm); }
.calendar .info-note {
  margin: 24px 0 40px; padding: 18px 22px;
  background: rgba(20,32,44,0.04); border-left: 3px solid var(--brand);
  font-size: 14px; line-height: 1.6; color: var(--ink-soft);
}
/* The region's note is Markdown, so it arrives as paragraphs and may carry a link
   to the calendar. The paragraphs sit flush in the note; the link reads as one. */
.info-note p { margin: 0; }
.info-note p + p { margin-top: 8px; }
.info-note a { color: var(--brand); text-decoration: underline; text-underline-offset: 2px; }

.month { margin-bottom: 56px; }
.month-head {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 18px 0;
  border-bottom: 1px solid rgba(20,32,44,0.22);
}
.month-head h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(28px, 3vw, 40px);
  letter-spacing: -0.03em;
  color: var(--ink);
}
.month-head h3 .yr {
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: 300;
  color: var(--brand);
  margin-left: 4px;
}

.toern-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  /* Each row is addressable — the admin's crew list links straight at one — and a
     row landed on flush against the top of the window has lost the month heading
     that says which year it is in. */
  scroll-margin-top: 96px;
  padding: 18px 0;
  border-bottom: 1px solid rgba(20,32,44,0.1);
  align-items: center;
  cursor: pointer;
  transition: padding 0.25s, background 0.25s;
  font-size: 14px;
  color: var(--ink);
}
/* The full row is the wide case, written as a min-width rule on purpose: as a
   top-level rule it would have the same specificity as the narrow one above and
   win by source order, leaving no narrow layout at all. */
@media (min-width: 1251px) {
  /* The name column has a floor of 300px and the fixed tracks were trimmed to pay
     for it: the special trips' titles are long ("Meilentörn Teneriffa ↔ Griechenland")
     and they must not wrap, because a wrapping title makes one row taller than the
     ones around it. A column added here has to be taken out of the fixed tracks
     again, not out of this one. */
  .toern-row {
    grid-template-columns: 84px 74px 100px minmax(300px, 1.5fr) 0.85fr 0.85fr 120px 112px 124px;
    gap: 16px;
  }
}
.toern-row .num .dnum { display: block; font-weight: 700; color: var(--ink); }
.toern-row .num .dyr { display: block; margin-top: 2px; }

.trow-thumb { width: 74px; height: 56px; border-radius: 11px; overflow: hidden; background: var(--paper-soft); }
.trow-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s; }
.toern-row:hover .trow-thumb img { transform: scale(1.08); }

/* ---- Zeitfenster ------------------------------------------------------------

   A stretch of season sold without a fixed departure. The same grid as a departure's
   row, cell for cell, because it belongs to the same calendar — what sets it apart is
   the badge and the first cell, which carries a word where a date would be.

   Deliberately not a dark card and no accent: a window is not a special trip. It is an
   ordinary row that happens to have no date yet, and it should look like one. */

/* "Flexibel" where a departure prints its day. The display face rather than the row's,
   because it stands in for a numeral and has to carry the same weight at a glance. */
.toern-row.win .num .dnum.dword {
  font-family: var(--font-display);
  font-size: 15px; letter-spacing: -0.02em;
  color: var(--brand);
}

/* The badge in the title. The same mark as the banner's kicker above it — see
   .fb-kicker::before — so that the table of tariffs and the rows it prices read as one
   thing rather than two that happen to sit together. */
.win-flag {
  display: flex; width: max-content; max-width: 100%;
  align-items: center; gap: 7px;
  padding: 3px 10px 3px 8px; border-radius: 999px;
  border: 1px solid rgba(40,113,224,0.3);
  background: rgba(40,113,224,0.07);
  font-family: var(--mono);
  font-size: 9.5px; font-weight: 500; letter-spacing: 0.14em;
  text-transform: uppercase; color: #1a4ea8;
  margin-bottom: 8px;
}
.win-flag::before { content: '⇄'; font-size: 11px; line-height: 1; }

/* Which tariff the amount above it came from. Quiet, because the figure is the claim
   and this only says which column of the table it was read out of. */
.toern-row.win .price small {
  display: block; margin-top: 3px;
  font-size: 11.5px; font-weight: 400; color: var(--ink-soft);
}

/* The cell a departure fills with its berths carries .cap here too: a window is full
   when no bookable run of days is left in it, and the reader should not have to learn
   a second vocabulary for the same question. Nothing of its own to declare. */

/* The block has no heading of its own: it is the same calendar, and a title over it
   would announce a second one. Without a rule it would sit flush against the banner
   with nothing between them. */
.month.windows { border-top: 1px solid rgba(20,32,44,0.1); padding-top: 8px; }

/* Availability. The dot's halo inherits the state colour through background:
   inherit, so a state is coloured in one place. */
.cap { display: flex; flex-direction: column; gap: 7px; }
.cap-top { display: flex; align-items: center; gap: 8px; }
.cap-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; position: relative; }
.cap-dot::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; opacity: 0.22; background: inherit; }
.cap-label { font-size: 12px; font-weight: 600; letter-spacing: -0.01em; white-space: nowrap; }
.cap-track { height: 5px; border-radius: 999px; background: rgba(15,29,46,0.09); overflow: hidden; }
.cap-fill { height: 100%; border-radius: 999px; }

.cap.free .cap-dot, .cap.free .cap-fill { background: #17a45f; }
.cap.free .cap-label { color: #0f7a47; }
.cap.tight .cap-dot, .cap.tight .cap-fill { background: #e0a020; }
.cap.tight .cap-label { color: #9a6c05; }
.cap.full .cap-dot, .cap.full .cap-fill { background: #d64545; }
.cap.full .cap-label { color: #a32f2f; }

/* How far the bar is filled stands in for real occupancy, which a trip does not
   record yet — it says how full it is, not how many places it has. Driving it
   from the state class keeps the bar from ever contradicting the label. */
.cap.free .cap-fill { width: 35%; }
.cap.tight .cap-fill { width: 80%; }
.cap.full .cap-fill { width: 100%; }

@media (max-width: 1250px) { .cap-track { display: none; } }
.toern-row:hover { padding-left: 14px; background: rgba(40,113,224,0.05); }
.toern-row .num {
  font-size: 13px; font-weight: 500;
  color: var(--ink-soft);
  font-feature-settings: 'tnum';
}
.toern-row .dates .d {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px; letter-spacing: -0.01em;
  color: var(--ink);
  font-feature-settings: 'tnum';
}
.toern-row .dates .small {
  font-size: 12px; color: var(--ink-soft); margin-top: 4px; font-weight: 400;
}
.toern-row .name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(18px, 1.55vw, 22px);
  letter-spacing: -0.025em;
  line-height: 1.15;
  color: var(--ink);
}
.toern-row .name small {
  display: block;
  font-family: var(--font-body);
  font-size: 13px; font-weight: 400;
  color: var(--ink-soft);
  margin-top: 6px;
}
.toern-row .col { font-size: 13px; color: var(--ink-soft); font-weight: 400; }
.toern-row .col strong {
  display: block; color: var(--ink); font-weight: 600; margin-bottom: 2px;
  font-size: 14px; letter-spacing: -0.01em;
}
.toern-row .price {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(20px, 1.8vw, 26px);
  letter-spacing: -0.03em;
  text-align: right;
  color: var(--ink);
  font-feature-settings: 'tnum';
}
.toern-row .status {
  font-size: 12px; letter-spacing: -0.005em;
  padding: 8px 14px; text-align: center; white-space: nowrap;
  border-radius: 999px;
  font-weight: 600;
}
.toern-row .status.free { background: var(--brand); color: white; }
.toern-row .status.few { background: #fff3e0; color: #b25600; border: 1px solid #ffd6a3; }
.toern-row .status.full { background: rgba(20,32,44,0.05); color: rgba(20,32,44,0.4); text-decoration: line-through; }
.toern-row .arrow-cell {
  width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid rgba(20,32,44,0.2);
  display: grid; place-items: center;
  font-size: 14px;
  color: var(--ink);
  transition: all 0.2s;
}
.toern-row:hover .arrow-cell { background: var(--brand); color: white; border-color: var(--brand); }


/* ============ TERMIN-BANNER ============

   Stands above the first month of the calendar and explains it: while there are no
   fixed dates, this is what a week would cost.

   Its ground sits deliberately between the page (--paper) and the dark special trip
   cards — darker than the page, much lighter than a card. A dark version was tried and
   dropped: it competes with the cards as soon as more than one of them is in the list.
   Warm grounds were tried and dropped too. */
.flex-banner {
  margin: 0 auto clamp(34px, 4vw, 52px);
  padding: clamp(32px, 3.6vw, 50px) clamp(28px, 3.4vw, 46px);
  background: linear-gradient(112deg, #dfe8f6 0%, #e7eef9 60%, #eff4fb 100%);
  border: 1px solid rgba(20,32,44,0.09);
  border-radius: 22px;
  box-shadow: 0 16px 38px rgba(11,22,40,0.08);
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: 0.85fr 1.25fr;
  gap: clamp(26px, 3vw, 44px); align-items: start;
}
.flex-banner::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(56% 120% at 100% 0%, rgba(40,113,224,0.13), transparent 66%);
}
.flex-banner > * { position: relative; }
@media (max-width: 980px) { .flex-banner { grid-template-columns: 1fr; } }

.flex-banner h2 {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(23px, 2.5vw, 32px); line-height: 1.18;
  letter-spacing: -0.02em; color: var(--ink); margin: 0 0 14px;
}
.flex-banner h2 em { font-style: normal; color: var(--brand); }
.flex-banner p { font-size: 15px; line-height: 1.62; color: var(--ink-soft); margin: 0 0 12px; }

/* The same pill as a special trip's badge, in the brand colour rather than an accent —
   it belongs to the site speaking, not to one trip. */
.fb-kicker {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 3px 11px 3px 9px; border-radius: 999px;
  border: 1px solid rgba(40,113,224,0.35); background: rgba(40,113,224,0.08);
  font-family: var(--mono);
  font-size: 9.5px; font-weight: 500; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--brand);
  margin-bottom: 14px;
}
.fb-kicker::before { content: '⇄'; font-size: 11px; line-height: 1; }

/* Without this the table reads as a bookable offer. It is the sentence that says the
   dates are not fixed yet, and it is set apart so it is read before the prices. */
.fb-note {
  margin-top: 16px; padding-top: 14px;
  border-top: 1px solid rgba(20,32,44,0.12);
  font-size: 13.5px;
}
/* The emphasis in this line is a statement, not a stress: "Noch keine festen Termine"
   is the thing a reader has to take away before they read the table as an offer. The
   site's inline format writes *this* and gets an <em>, so it is made to read as bold
   here rather than asking the owner for markup the editor does not take. */
.fb-note b,
.fb-note em { font-style: normal; font-weight: 700; color: var(--ink); }

.fb-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.fb-table th {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--ink-soft); text-align: left; padding: 0 14px 11px 0;
  border-bottom: 1px solid rgba(20,32,44,0.16); white-space: nowrap;
}
.fb-table td { padding: 13px 14px 13px 0; border-bottom: 1px solid rgba(20,32,44,0.09); font-size: 14px; }
.fb-table th.num, .fb-table td.num { text-align: right; padding-right: 0; }
/* Both selectors, not one: the leisure cell has padding-right 0 so that the two
   amounts line up against each other, and without the left padding they run together
   as "690 €850 €". */
.fb-table th + th, .fb-table td + td { padding-left: 22px; }

.fb-table .rhythm { font-weight: 600; color: var(--ink); }
.fb-table .days { font-size: 12px; color: var(--ink-soft); }

/* The colour carries the point the banner makes: a leisure trip is cheaper. Both the
   same size, so the two are compared on one level. */
.fb-table .p-free { font-family: var(--font-display); font-weight: 700; font-size: 19px; color: var(--brand-deep, #1a4ea8); }
.fb-table .p-sks  { font-family: var(--font-display); font-weight: 700; font-size: 19px; color: var(--ink); }

.fb-table .exam {
  font-size: 10.5px; font-weight: 600; color: #7a5418;
  background: rgba(255,255,255,0.75); border: 1px solid rgba(20,32,44,0.14);
  border-radius: 999px; padding: 2px 8px; margin-left: 8px; white-space: nowrap;
}
@media (max-width: 560px) { .fb-table .exam { display: block; margin: 6px 0 0; width: max-content; } }

/* ---- The row's own link, and the links that sit on top of it ----

   The row used to be one <a>. It cannot be any more: it now carries links of its own,
   and an anchor inside an anchor is not valid HTML — the browser closes the outer one
   where the inner begins, which quietly breaks the row from that point rightwards.

   So the row is a div, the title is the link, and the title's ::after is stretched
   over the whole row. The reader still clicks anywhere; a screen reader still hears
   the trip's name rather than "link". The further links are lifted above that sheet
   so that "Revier" reaches the region and not the enquiry form underneath. */
.toern-row { position: relative; }
.toern-row .row-link { color: inherit; }
.toern-row .row-link::after {
  content: ''; position: absolute; inset: 0; z-index: 1;
}
.toern-row .acts { position: relative; z-index: 2; }

/* ---- The further pages a row leads to ----

   Stacked under the "Anfragen" pill in the same grid column, not in a column of their
   own: a tenth track took the width the long special trip titles need. The cell has a
   floor so that a row with two links is no taller than a row with none. */
.toern-row .act-cell {
  display: flex; flex-direction: column; gap: 9px;
  align-items: stretch; justify-content: flex-start;
  min-height: 57px;
}
.toern-row .acts { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.toern-row .acts a {
  font-size: 12px; font-weight: 600; color: var(--ink-soft);
  border-bottom: 1px solid transparent; white-space: nowrap;
}
.toern-row .acts a:hover { color: var(--brand); border-bottom-color: currentColor; }

/* The narrow row. The date used to be dropped here along with the thumbnail and the
   kind, which left a calendar with no dates in it: what remained said "7 Tage, ab
   Samstag" — a duration and a weekday, on a page whose whole job is when. It is the
   first cell now, where it is read first.

   It sits here, after every rule it overrides, and that is the whole reason it works.
   It used to stand right under .toern-row, eleven lines below a comment warning about
   exactly this: a media query adds no specificity, so `.toern-row .price` further down
   the file beat `.toern-row .price` inside the query by source order alone. Measured at
   900px the price was still right-aligned and the date still 13px body type — two of
   the four rules had never applied since the day they were written.

   Anything added here has to stay below what it overrides. */
@media (max-width: 1250px) {
  .toern-row .trow-thumb,
  .toern-row .col.kind { display: none; }
  .toern-row .name { grid-column: span 2; }
  .toern-row .price { text-align: left; }
  .toern-row .num {
    font-family: var(--font-display); font-size: 15px; font-weight: 600;
    letter-spacing: -0.015em;
  }
  .toern-row .num .dyr { font-size: 12px; font-weight: 400; color: var(--ink-soft); }

  .toern-row .act-cell { grid-column: span 2; align-items: flex-start; }
  .toern-row .acts { flex-direction: row; gap: 18px; }
}

/* ---- A departure of a special trip ----

   The dark card of its detail page, in the light list. Every theme sets exactly two
   things — the background and the accent — and every colour below is derived from
   them, so a new special trip is two values and a deco, never a new set of rules for
   text, badge and pill.

   --ac is already set per world further up, where [data-spezial] is defined for the
   detail page; only the dark ground is added here. */
.toern-row.themed {
  /* The default ground, overridden per world below. It is here and not left to the
     per-world rules because a row is a special trip's whether or not anybody has
     styled its accent: an unknown one — an older document, a hand edit — would
     otherwise leave the background unset while the text is still white, which is a
     row nobody can read. --ac has had the same safety all along, from the plain
     [data-spezial] rule on the dossier pages. */
  --sp-bg: #16181d;

  overflow: hidden; border: none; border-radius: 18px;
  padding: 26px 24px; margin: 14px -10px;
  background: var(--sp-bg); isolation: isolate;
}
.toern-row.themed:hover { padding-left: 24px; background: var(--sp-bg); }
.toern-row.themed .deco { position: absolute; inset: 0; z-index: -1; pointer-events: none; }

.toern-row.themed .name,
.toern-row.themed .name .row-link,
.toern-row.themed .col strong,
.toern-row.themed .price,
.toern-row.themed .dates .d { color: #fff; }

.toern-row.themed .name small,
.toern-row.themed .col,
.toern-row.themed .dates .small,
.toern-row.themed .num .dyr { color: rgba(255,255,255,0.58); }

.toern-row.themed .num .dnum { color: var(--ac); }
.toern-row.themed .status.free { background: var(--ac); color: var(--sp-bg); }
.toern-row.themed .acts a { color: rgba(255,255,255,0.62); }
.toern-row.themed .acts a:hover { color: var(--ac); }

/* The availability indicator keeps its three states but not its three colours: the
   greens and ambers are chosen against a white page and sit on a dark card as three
   shades of the same muddiness. On a card the state is carried by the wording and by
   how far the bar runs, in the card's own accent. */
.toern-row.themed .cap-label { color: rgba(255,255,255,0.72); }
.toern-row.themed .cap-dot,
.toern-row.themed .cap-fill { background: var(--ac); }
.toern-row.themed .cap-track { background: rgba(255,255,255,0.14); }
.toern-row.themed .cap.full .cap-label { color: rgba(255,255,255,0.45); }
.toern-row.themed .arrow-cell { border-color: rgba(255,255,255,0.25); color: #fff; }

/* Every themed row is the same height whatever its title does. The title may wrap —
   cutting it with an ellipsis was tried and shortened "Meilentörn Teneriffa ↔ …" at
   any width under about 1900px — so the floor is on the cell and the subtitle is held
   to one line. */
.toern-row.themed .name {
  min-width: 0; min-height: 92px;
  display: flex; flex-direction: column; justify-content: center;
}
.toern-row.themed .name > small {
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
}

/* The dark grounds. Paired with the accents defined where [data-spezial] is. */
.toern-row[data-spezial="medicine"]     { --sp-bg: #16181d; }
.toern-row[data-spezial="delivery"]     { --sp-bg: #06253b; }
.toern-row[data-spezial="newyear"]      { --sp-bg: #0b1020; }
.toern-row[data-spezial="christmas"]    { --sp-bg: #14231c; }
.toern-row[data-spezial="carnival"]     { --sp-bg: #241528; }
.toern-row[data-spezial="heavyweather"] { --sp-bg: #18232d; }
.toern-row[data-spezial="marina"]       { --sp-bg: #101a22; }

/* ---- The decoration ----

   All of it is light and colour, none of it is a shape near the text. A drawn cross
   for the medical trip was tried and removed: a fixed box inside a grid row full of
   text collides with something at some width, always. Every layer stays at alpha .20
   or below and is either near an edge or large and soft. */
.toern-row[data-spezial="newyear"] .deco {
  background:
    radial-gradient(42% 90% at 92% 4%, rgba(232,182,74,0.20), transparent 70%),
    radial-gradient(1.4px 1.4px at 12% 30%, rgba(255,255,255,0.85), transparent),
    radial-gradient(1.2px 1.2px at 28% 68%, rgba(255,255,255,0.65), transparent),
    radial-gradient(1.6px 1.6px at 44% 18%, rgba(255,255,255,0.75), transparent),
    radial-gradient(1.1px 1.1px at 61% 74%, rgba(255,255,255,0.55), transparent),
    radial-gradient(1.5px 1.5px at 73% 34%, rgba(255,255,255,0.70), transparent),
    radial-gradient(1.2px 1.2px at 84% 62%, rgba(255,255,255,0.60), transparent),
    radial-gradient(1.3px 1.3px at 95% 22%, rgba(255,255,255,0.65), transparent);
  animation: sil-tw 4.5s ease-in-out infinite;
}
@keyframes sil-tw { 0%, 100% { opacity: 0.75; } 50% { opacity: 1; } }

.toern-row[data-spezial="medicine"] .deco {
  background:
    linear-gradient(100deg, rgba(255,90,60,0.18) 0%, rgba(255,90,60,0.05) 34%, transparent 62%),
    radial-gradient(38% 100% at 100% 50%, rgba(255,90,60,0.08), transparent 70%),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.14) 0 1px, transparent 1px 26px)
      bottom / 100% 7px no-repeat;
}

.toern-row[data-spezial="delivery"] .deco {
  background:
    radial-gradient(52% 120% at 4% 100%, rgba(51,193,224,0.20), transparent 66%),
    repeating-linear-gradient(90deg, rgba(51,193,224,0.55) 0 14px, transparent 14px 26px)
      bottom 14px left 0 / 100% 1px no-repeat;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
}

.toern-row[data-spezial="heavyweather"] .deco {
  background:
    radial-gradient(46% 110% at 6% 0%, rgba(111,208,224,0.20), transparent 64%),
    repeating-linear-gradient(72deg, rgba(255,255,255,0.10) 0 1px, transparent 1px 46px);
}

.toern-row[data-spezial="marina"] .deco {
  background:
    radial-gradient(40% 120% at 88% 8%, rgba(157,180,199,0.16), transparent 68%),
    linear-gradient(180deg, transparent 62%, rgba(157,180,199,0.10) 100%);
}

.toern-row[data-spezial="christmas"] .deco {
  background: radial-gradient(44% 110% at 90% 6%, rgba(201,139,221,0.16), transparent 68%);
}

.toern-row[data-spezial="carnival"] .deco {
  background: radial-gradient(44% 110% at 90% 6%, rgba(242,160,61,0.18), transparent 68%);
}

/* ---- The badge ----

   Each row says what kind of thing it is in the words of its own page — the special
   trip's category. The glyph is not stored anywhere: it belongs to the world, and the
   world is the one thing the row already carries.

   display:flex with width:max-content rather than inline-flex, or it joins the title's
   line instead of standing above it. */
.sp-flag {
  display: flex; width: max-content; max-width: 100%;
  align-items: center; gap: 7px;
  padding: 3px 10px 3px 8px; border-radius: 999px;
  border: 1px solid color-mix(in oklab, var(--ac) 42%, transparent);
  background: color-mix(in oklab, var(--ac) 9%, transparent);
  /* The same mono the dossier pages use. The handoff asks for JetBrains Mono and for
     a font link to load it; there is no font link — this site self-hosts its two faces
     — and --mono is what every other small caps label here already reads. */
  font-family: var(--mono);
  font-size: 9.5px; font-weight: 500; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ac);
  margin-bottom: 8px;
}
.sp-flag::before { content: '✦'; font-size: 11px; line-height: 1; }
.toern-row[data-spezial="delivery"] .sp-flag::before     { content: '⚓'; }
.toern-row[data-spezial="heavyweather"] .sp-flag::before { content: '≋'; }
.toern-row[data-spezial="marina"] .sp-flag::before       { content: '☾'; }

/* The medical row's mark is a pulse rather than a character: it is the one world
   whose subject is time passing. */
.toern-row[data-spezial="medicine"] .sp-flag::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--ac); animation: sp-pulse 2s infinite;
}
@keyframes sp-pulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in oklab, var(--ac) 50%, transparent); }
  70%  { box-shadow: 0 0 0 7px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

/* Motion is decoration here, and both of these are ambient rather than informative. */
@media (prefers-reduced-motion: reduce) {
  .toern-row .deco,
  .sp-flag::before { animation: none; }
}

/* A second, later copy of the narrow row lived here, at a breakpoint 150px lower,
   and it hid the date again — so taking the date out of the rule above changed
   nothing below 1100px, which is every phone. What it set beyond that was either
   the base rule repeated verbatim or a column that is not in this row.
   The one narrow rule is the one at 1250px. */
@media (max-width: 1100px) {
  .toern-row .arrow-cell { display: none; }
}

/* ============ LINKS IN GESCHRIEBENEM TEXT ============

   Everything the owner writes in Markdown is wrapped in .prose (see prose.templ), so
   a link reads the same in a FAQ answer, a region's description, an article and a
   dossier page. It did not: three of those styled links and the other five left them
   at the site's default of inherited colour and no underline, which is a link that
   looks exactly like the sentence it sits in.

   Bold and italic, because the colour cannot carry it alone — inside a dossier the
   accent is already the page's own colour, and on a printed or colour-blind reading
   a hue is not a signal. The underline waits for the pointer: a paragraph with three
   permanently underlined links is a paragraph with three fences in it. */
.prose a {
  font-weight: 700;
  font-style: italic;
  /* The page's accent where there is one — a dossier sets --ac for its whole world —
     and the brand colour everywhere else. */
  color: var(--ac, var(--brand));
  text-decoration: none;
  text-underline-offset: 3px;
  transition: color 0.2s;
}
.prose a:hover,
.prose a:focus-visible { text-decoration: underline; }

/* ============ BLOG / AKTUELLES ============ */
.featured { padding: clamp(40px, 5vw, 80px) clamp(20px, 4vw, 80px) clamp(28px, 4vw, 60px); }
.featured-card {
  display: grid; grid-template-columns: 1.2fr 1fr; gap: 0; min-height: 420px;
  border-radius: 28px; overflow: hidden; background: var(--ink);
}
@media (max-width: 900px) { .featured-card { grid-template-columns: 1fr; } }
.featured-img { position: relative; min-height: 220px; }
.featured-img .badge {
  position: absolute; top: 24px; left: 24px;
  background: rgba(255,255,255,0.95); color: var(--ink);
  padding: 8px 16px; border-radius: 999px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
}
.featured-body {
  padding: clamp(32px, 4vw, 56px); color: white;
  display: flex; flex-direction: column; justify-content: center; gap: 18px;
}
.featured-body .meta { display: flex; gap: 14px; align-items: center; font-size: 13px; color: rgba(255,255,255,0.6); }
.featured-body .meta .cat { color: var(--brand-bright); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; font-size: 11px; }
.featured-body h2 { font-family: var(--font-display); font-weight: 700; font-size: clamp(28px, 3.2vw, 42px); letter-spacing: -0.025em; line-height: 1.06; }
.featured-body p { font-size: 16px; line-height: 1.65; color: rgba(255,255,255,0.78); max-width: 50ch; }
.featured-body .read-more {
  display: inline-flex; align-items: center; gap: 10px; color: white; font-weight: 600; font-size: 14px;
  border-bottom: 1px solid rgba(255,255,255,0.4); width: fit-content; padding-bottom: 4px; margin-top: 6px;
}
/* The whole card is the link now, so its cue lights up when the card is hovered
   rather than only when the two words are. Both cards keep the same geometry: the
   element changed from an article to an anchor, and grid and flex work the same on
   one — the global `a` rule already takes the underline and the colour off. */
.featured-card:hover .read-more { border-color: white; }
.post:hover .more { text-decoration: underline; }

.news-grid {
  padding: clamp(32px, 5vw, 64px) clamp(20px, 4vw, 80px) clamp(48px, 6vw, 90px);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 28px;
}
.post {
  background: white; border-radius: 20px; overflow: hidden; border: 1px solid var(--rule);
  display: flex; flex-direction: column; transition: transform 0.4s, box-shadow 0.4s;
}
.post:hover { transform: translateY(-4px); box-shadow: 0 24px 48px -24px rgba(15,29,46,0.18); }
.post-img { aspect-ratio: 16/10; position: relative; overflow: hidden; }
.post-img .cat {
  position: absolute; top: 16px; left: 16px;
  background: rgba(255,255,255,0.95); color: var(--ink);
  padding: 6px 12px; border-radius: 999px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; z-index: 2;
}
/* The ground a card shows where the post has no picture — the picture, where there is
   one, lies on top of it and covers it whole. One ground for all of them: there were
   six, chosen per post, and choosing between them was work nobody was doing for a
   surface almost nobody sees. */
.featured-img, .post-img { background: linear-gradient(160deg, #2871e0, #0f1d2e); }
.post-body { padding: 24px 24px 28px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.post-body .meta { display: flex; gap: 12px; align-items: center; font-size: 12px; color: var(--ink-soft); }
.post-body .meta .dot { width: 3px; height: 3px; background: var(--ink-soft); border-radius: 50%; opacity: 0.6; }
.post-body h3 { font-family: var(--font-display); font-weight: 700; font-size: 22px; letter-spacing: -0.018em; line-height: 1.18; color: var(--ink); }
.post-body p { font-size: 14.5px; line-height: 1.6; color: var(--ink-soft); max-width: 40ch; }
.post-body .more { margin-top: auto; color: var(--brand); font-weight: 600; font-size: 13px; display: inline-flex; align-items: center; gap: 8px; }
.post-img img, .featured-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.featured-img .badge, .post-img .cat { z-index: 2; }

/* ============ BLOG ARTICLE (detail) ============ */
.article { max-width: 760px; margin: 0 auto; padding: clamp(40px, 6vw, 80px) clamp(20px, 4vw, 32px); }
.article-meta { display: flex; gap: 12px; align-items: center; font-size: 13px; color: var(--ink-soft); margin-bottom: 28px; }
.article-meta .cat { color: var(--brand); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; font-size: 11px; }
.article-body { font-size: 17px; line-height: 1.7; color: var(--ink); }
.article-body p { margin: 0 0 18px; }
.article-body p.lead { font-size: 19px; color: var(--ink-soft); }
/* A heading inside running text, in scale with the text around it.
   It was 45px flat: nearly a section heading, more than twice its own h3, in a
   body set at 17px — and unclamped, so a phone got the same 45px. What a `##` in
   a post means is "a new part of this article", which is a step above the 20px
   h3 and well below the page's own heading. */
.article-body h2 {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(24px, 2.4vw, 30px); letter-spacing: -0.02em;
  margin: 36px 0 14px;
}
.article-body h3 { font-weight: 700; font-size: 20px; margin: 28px 0 10px; }
.article-body ul, .article-body ol { margin: 0 0 18px; padding-left: 22px; }
.article-body li { margin-bottom: 8px; }
.article-body strong { color: var(--ink); font-weight: 700; }
.article-body img { max-width: 100%; border-radius: 14px; margin: 24px 0; }
.article .back { display: inline-flex; margin-top: 40px; color: var(--brand); font-weight: 600; font-size: 14px; }

/* ============ AUSBILDUNG / COURSE PAGES ============ */

/* Register hero — large number + headline (image-free) */
.hero-reg { background: var(--ink); overflow: hidden; }
.hero-reg::after { display: none; }
.hero-reg::before { content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background: radial-gradient(100% 80% at 85% 110%, rgba(40,113,224,0.34), transparent 55%); }
.hero-reg .hero-body { position: relative; z-index: 5; }
.hero-reg .grid2 { display: grid; grid-template-columns: auto 1fr; gap: clamp(24px,5vw,72px); align-items: end; }
@media (max-width:760px){ .hero-reg .grid2 { grid-template-columns: 1fr; } }
.hero-reg .bignum { font-family: var(--font-display); font-weight: 800; font-size: clamp(120px,20vw,300px); line-height:0.78; letter-spacing:-0.05em; color: var(--brand-bright); }
.hero-reg .bignum small { display:block; font-size: 0.13em; letter-spacing:0.2em; color: rgba(255,255,255,0.5); font-weight:600; margin-top:0.4em; }
.hero-reg h1 { font-size: clamp(44px,6.5vw,104px); margin-bottom:18px; }
.hero-reg .reg { list-style:none; display:flex; flex-wrap:wrap; gap:8px 0; margin-bottom:22px; }
.hero-reg .reg li { font-size:12px; font-weight:600; letter-spacing:0.05em; text-transform:uppercase; color:rgba(255,255,255,0.7); padding:6px 16px; border:1px solid rgba(255,255,255,0.2); border-radius:999px; margin-right:8px; }
/* Reset the white card look inherited from the generic .facts (region intro),
   which would otherwise render white fact text invisibly on a white box. */
.hero-reg .facts { display:flex; flex-wrap:wrap; gap:14px 36px; margin-top:26px; background:transparent; border:0; border-top:1px solid rgba(255,255,255,0.18); border-radius:0; padding:22px 0 0; }
.hero-reg .facts .f .v { font-family:var(--font-display); font-weight:700; font-size:clamp(18px,1.8vw,26px); letter-spacing:-0.02em; color:#fff; line-height:1; }
.hero-reg .facts .f .v em { font-family:var(--font-accent); font-style:italic; font-weight:300; color:var(--warm); }
.hero-reg .facts .f .k { font-size:12px; color:rgba(255,255,255,0.55); margin-top:6px; letter-spacing:0.04em; }

/* Section shell */
.sec { padding: clamp(60px,8vw,110px) clamp(20px,4vw,80px); }
.sec-inner { max-width: 1500px; margin: 0 auto; }
.sec.alt { background: var(--paper-soft); }
.sec-eyebrow {
  display: inline-block; font-size: 13px; color: var(--ink-soft);
  margin-bottom: 14px; font-weight: 500;
}
.sec-eyebrow::before {
  content: ''; display: inline-block; width: 28px; height: 1px;
  background: var(--ink-soft); vertical-align: middle; margin-right: 12px;
}
.sec-h2 {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(30px,4vw,56px); letter-spacing: -0.04em; line-height: 0.98;
  margin-bottom: clamp(28px,4vw,48px);
}
.sec-h2 em { font-family: var(--font-accent); font-style: italic; font-weight: 300; color: var(--brand); }

/* Prose / Fließtext block */
.prose-block { display: grid; grid-template-columns: 1fr 1.4fr; gap: clamp(32px,5vw,80px); align-items: start; }
@media (max-width: 900px) { .prose-block { grid-template-columns: 1fr; gap: 24px; } }
/* The same values as .sec-h2, deliberately: an intro block's heading and a
   section's heading are one role, and two sizes for it were only ever visible
   between two pages — which is where nobody compares them and everybody feels it. */
.prose-block h2 {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(30px,4vw,56px); letter-spacing: -0.04em; line-height: 0.98;
}
.prose-block h2 em { font-family: var(--font-accent); font-style: italic; font-weight: 300; color: var(--brand); }
.prose-body p { color: var(--ink-soft); line-height: 1.75; font-size: 16px; margin-bottom: 18px; max-width: 62ch; }
.prose-body p:last-child { margin-bottom: 0; }
.prose-body p strong { color: var(--ink); font-weight: 600; }
.prose-body .pull {
  font-family: var(--font-accent); font-style: italic; font-weight: 300;
  font-size: clamp(22px,2.4vw,32px); line-height: 1.3; color: var(--ink);
  margin: 8px 0 24px; max-width: 32ch;
}

/* Curriculum / topic groups */
.curric { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 900px) { .curric { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .curric { grid-template-columns: 1fr; } }
.curric-group {
  background: white; border: 1px solid var(--rule); border-radius: 20px;
  padding: 28px 26px; transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.curric-group:hover { box-shadow: 0 16px 40px -20px rgba(15,29,46,0.3); transform: translateY(-3px); }
.curric-group .cg-n { font-family: var(--font-accent); font-style: italic; font-weight: 300; font-size: 26px; color: var(--brand-bright); line-height: 1; margin-bottom: 12px; }
.curric-group h3 { font-family: var(--font-display); font-weight: 700; font-size: 19px; letter-spacing: -0.02em; margin-bottom: 14px; }
.curric-group ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.curric-group li { position: relative; padding-left: 22px; font-size: 14px; line-height: 1.5; color: var(--ink-soft); }
.curric-group li::before { content: ''; position: absolute; left: 2px; top: 9px; width: 7px; height: 7px; border-radius: 50%; background: var(--brand); }

/* Facts / price card */
.factcard { background: white; border: 1px solid var(--rule); border-radius: 20px; padding: 28px 30px; }
.factcard.feature { background: var(--ink); color: white; border-color: transparent; }
.factcard h3 { font-family: var(--font-display); font-weight: 700; font-size: 16px; letter-spacing: -0.01em; margin-bottom: 8px; }
.factcard .price-big { font-family: var(--font-display); font-weight: 700; font-size: clamp(34px,4vw,48px); letter-spacing: -0.03em; line-height: 1; margin: 6px 0 4px; }
.factcard .price-big em { font-family: var(--font-accent); font-style: italic; font-weight: 300; color: var(--brand); font-size: 0.6em; }
.factcard.feature .price-big em { color: var(--warm); }
.factcard .price-sub { font-size: 13px; color: var(--ink-soft); margin-bottom: 18px; }
.factcard.feature .price-sub { color: rgba(255,255,255,0.6); }
.fc-row { display: flex; justify-content: space-between; gap: 16px; padding: 13px 0; border-top: 1px solid var(--rule); font-size: 14px; }
.factcard.feature .fc-row { border-top-color: rgba(255,255,255,0.12); }
.fc-row .k { color: var(--ink-soft); }
.factcard.feature .fc-row .k { color: rgba(255,255,255,0.6); }
.fc-row .v { font-weight: 600; color: var(--ink); text-align: right; }
.factcard.feature .fc-row .v { color: white; }
.factcard .note { font-size: 13px; color: var(--ink-soft); line-height: 1.5; margin-top: 16px; padding: 12px 14px; background: var(--paper); border-radius: 12px; }
.factcard.feature .note { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.8); }
.factcard .btn { margin-top: 20px; width: 100%; justify-content: space-between; }
.split-facts { display: grid; grid-template-columns: 1.5fr 1fr; gap: clamp(32px,5vw,72px); align-items: start; }
@media (max-width: 900px) { .split-facts { grid-template-columns: 1fr; gap: 32px; } }

/* Schedule / course table */
.schedule { border: 1px solid var(--rule); border-radius: 20px; overflow: hidden; background: white; }
.sched-row {
  display: grid; grid-template-columns: 1.6fr 1fr 1fr 0.8fr; gap: 20px;
  padding: 20px 26px; align-items: center; border-top: 1px solid var(--rule);
  transition: background 0.2s ease;
}
.sched-row:hover { background: rgba(40,113,224,0.04); }
.sched-row.head {
  border-top: 0; background: var(--ink); color: white;
  font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase;
}
.sched-row.head .sc { color: rgba(255,255,255,0.7); font-weight: 600; }
.sched-row .course { font-family: var(--font-display); font-weight: 600; font-size: 16px; letter-spacing: -0.015em; }
.sched-row .course small { display: block; font-family: var(--font-body); font-weight: 400; font-size: 13px; color: var(--ink-soft); margin-top: 4px; }
.sched-row .sc { font-size: 14px; color: var(--ink-soft); }
.sched-row .sc strong { display: block; color: var(--ink); font-weight: 600; margin-bottom: 2px; }
.sched-row .when { font-family: var(--font-display); font-weight: 600; font-size: 14px; }
.sched-row .when small { display: block; font-weight: 400; color: var(--ink-soft); font-size: 13px; margin-top: 4px; }
@media (max-width: 820px) {
  .sched-row { grid-template-columns: 1fr 1fr; gap: 10px 20px; }
  .sched-row.head { display: none; }
  .sched-row .course { grid-column: span 2; }
}
.sched-note { font-size: 13px; color: var(--ink-soft); margin-top: 18px; max-width: 60ch; line-height: 1.6; }

/* ===================================================================
   Spezialtörns — dark "dossier" world, deliberately set apart from the
   light region pages. Each trip's Accent picks a local colour via the
   [data-spezial] scope; all components read var(--ac).
   =================================================================== */
:root { --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

[data-spezial]            { --ac: #2871e0; --ac-deep: #1a4ea8; }
[data-spezial="medicine"] { --ac: #ff5a3c; --ac-deep: #d63e22; }
[data-spezial="delivery"] { --ac: #33c1e0; --ac-deep: #0a2f4a; }
[data-spezial="newyear"]  { --ac: #e8b64a; --ac-deep: #b5842a; }
[data-spezial="christmas"]{ --ac: #c98bdd; --ac-deep: #8e5aa8; }
[data-spezial="carnival"] { --ac: #f2a03d; --ac-deep: #c07620; }
/* These two were set on the calendar row alone at first, on the reasoning that they
   have no detail page yet. That was wrong twice over: the overview card is themed from
   this scope too and would have shown them in the default blue, and a page written
   later would have arrived unthemed with nothing to say why. A world is a world
   wherever it appears. */
[data-spezial="heavyweather"] { --ac: #6fd0e0; --ac-deep: #3d8c9c; }
[data-spezial="marina"]       { --ac: #9db4c7; --ac-deep: #6c8398; }

/* Dossier hero (dark, no full-bleed photo) */
.hero-dossier { min-height: auto; padding-bottom: 0; background: var(--ink); color: white; }
.hero-dossier::after { display: none; }
.hero-dossier .nav { position: relative; z-index: 120; }
/* The overview hero carries no data-spezial, so it needs its own neutral accent
   for the headline emphasis; its kicker stays muted (not accent-coloured). */
.hero-sp { --ac: #7fb2e8; background: radial-gradient(ellipse at 50% -10%, #1c3252 0%, #122236 42%, var(--ink) 82%); }
.hero-sp .kicker { color: rgba(255,255,255,0.6); }
.hero-sp .kicker::before { background: rgba(255,255,255,0.5); }
.dossier-hero-body {
  max-width: 1180px; margin: 0 auto; width: 100%;
  padding: clamp(48px, 8vw, 110px) clamp(20px, 4vw, 56px) clamp(40px, 6vw, 72px);
}
.dossier-badge {
  display: inline-flex; align-items: center; gap: 9px; padding: 7px 15px;
  border: 1px solid color-mix(in srgb, var(--ac) 50%, transparent); border-radius: 999px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ac); background: color-mix(in srgb, var(--ac) 10%, transparent); margin-bottom: 26px;
}
.dossier-hero-body .kicker,
.hero-dossier .kicker {
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ac); display: flex; align-items: center; gap: 12px; margin-bottom: 24px;
}
.dossier-hero-body .kicker::before { content: ''; width: 34px; height: 1px; background: var(--ac); }
.dossier-hero-body h1 {
  font-family: var(--font-display); font-weight: 700; font-size: clamp(46px, 8vw, 116px);
  line-height: 0.92; letter-spacing: -0.045em; margin-bottom: 26px; max-width: 16ch; color: white;
}
.dossier-hero-body h1 em { font-family: var(--font-accent); font-style: italic; font-weight: 300; color: var(--ac); letter-spacing: -0.03em; }
.dossier-hero-body .lead { font-size: clamp(16px, 1.4vw, 20px); line-height: 1.6; color: rgba(255,255,255,0.8); max-width: 62ch; }
.dossier-meta { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid rgba(255,255,255,0.16); margin-top: 44px; }
@media (max-width: 700px) { .dossier-meta { grid-template-columns: 1fr 1fr; } }
.dossier-meta .m { padding: 22px 28px; border-right: 1px solid rgba(255,255,255,0.1); }
.dossier-meta .m:first-child { padding-left: 0; }
.dossier-meta .m:last-child { border-right: 0; }
.dossier-meta .ml { font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,255,255,0.45); margin-bottom: 8px; }
.dossier-meta .mv { font-family: var(--font-display); font-weight: 600; font-size: clamp(17px, 1.8vw, 24px); letter-spacing: -0.02em; }

/* Dossier body — full-width dark, content centred without an inner wrapper */
.dossier {
  background: var(--ink); color: white;
  padding: clamp(56px, 8vw, 110px) max((100% - 1180px) / 2, clamp(20px, 4vw, 56px));
  counter-reset: dossier-sec;
}
.dossier-prose { font-size: clamp(16px, 1.4vw, 19px); line-height: 1.7; color: rgba(255,255,255,0.82); max-width: 68ch; margin-bottom: 44px; }
.dossier-prose p { margin-bottom: 18px; }
.dossier-prose strong, .dossier-prose b { color: white; font-weight: 600; }
.sec-head { display: flex; align-items: baseline; gap: 18px; margin-bottom: 34px; }
.sec-head .no { font-family: var(--mono); font-size: 13px; color: var(--ac); letter-spacing: 0.1em; }
.sec-head .no::before { counter-increment: dossier-sec; content: counter(dossier-sec, decimal-leading-zero); }
.sec-head h2 { font-family: var(--font-display); font-weight: 700; font-size: clamp(26px, 3.4vw, 46px); letter-spacing: -0.035em; line-height: 1; color: white; }
.sec-head h2 em { font-family: var(--font-accent); font-style: italic; font-weight: 300; color: var(--ac); }

/* Route timeline */
.route { position: relative; margin: 8px 0 44px; padding-left: 30px; }
.route::before { content: ''; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 2px; background: linear-gradient(180deg, var(--ac), color-mix(in srgb, var(--ac) 15%, transparent)); }
.route .stop { position: relative; padding: 0 0 34px; }
.route .stop:last-child { padding-bottom: 0; }
.route .stop::before { content: ''; position: absolute; left: -30px; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--ac-deep); border: 3px solid var(--ac); }
.route .sn { font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ac); margin-bottom: 6px; }
.route h4 { font-family: var(--font-display); font-weight: 600; font-size: clamp(20px, 2vw, 27px); letter-spacing: -0.025em; margin-bottom: 8px; color: white; }
.route .stop p { color: rgba(255,255,255,0.72); line-height: 1.6; font-size: 15px; max-width: 60ch; }

/* Feature / cluster cards */
.feature-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-bottom: 44px; }
@media (max-width: 800px) { .feature-cards { grid-template-columns: 1fr; } }
.feature-cards .fc { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); border-radius: 20px; padding: 30px; position: relative; overflow: hidden; }
.feature-cards .fc::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--ac); opacity: 0.7; }
.feature-cards .ct { font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ac); margin-bottom: 10px; }
.feature-cards .fc h3 { font-family: var(--font-display); font-weight: 700; font-size: 22px; letter-spacing: -0.025em; margin-bottom: 12px; color: white; }
.feature-cards .fc h3 em { font-family: var(--font-accent); font-style: italic; font-weight: 300; color: var(--ac); }
.feature-cards .fc p { color: rgba(255,255,255,0.78); line-height: 1.6; font-size: 15px; }
.fc-list { list-style: none; display: flex; flex-direction: column; gap: 12px; margin-top: 14px; }
.fc-list li { position: relative; padding-left: 22px; font-size: 15px; line-height: 1.5; color: rgba(255,255,255,0.82); }
.fc-list li::before { content: ''; position: absolute; left: 0; top: 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--ac); }

/* Tag cloud (scenarios / equipment) — scoped to the dossier so it never
   restyles the contact form's global .chips/.chip. */
.dossier .chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 44px; }
.dossier .chips .chip { font-family: var(--mono); font-size: 12px; padding: 8px 13px; border-radius: 8px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); color: rgba(255,255,255,0.85); }

/* Booking row */
.book { display: grid; grid-template-columns: 130px 1fr auto auto; gap: 24px; align-items: center; margin-bottom: 44px; padding: 24px 26px; border: 1px solid rgba(255,255,255,0.14); border-radius: 20px; background: rgba(255,255,255,0.04); }
@media (max-width: 760px) { .book { grid-template-columns: 1fr; gap: 12px; } }
.book .book-date { font-family: var(--font-display); font-weight: 700; font-size: 18px; letter-spacing: -0.02em; }
.book .book-body h4 { font-weight: 600; font-size: 17px; }
.book .book-body p { color: rgba(255,255,255,0.6); font-size: 13px; margin-top: 3px; }
.book .book-price { font-family: var(--font-display); font-weight: 700; font-size: 22px; color: var(--ac); letter-spacing: -0.02em; }

/* Photo strip */
.dossier-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 8px; }
@media (max-width: 700px) { .dossier-strip { grid-template-columns: 1fr 1fr; } }
.dossier-strip img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 14px; }

/* Overview hub + homepage teaser */
.sp { background: var(--ink); color: white; padding: clamp(48px, 6vw, 84px) max((100% - 1180px) / 2, clamp(20px, 4vw, 56px)) clamp(64px, 8vw, 110px); display: flex; flex-direction: column; gap: 20px; }
.special-teaser { background: var(--ink); color: white; }
.special-teaser .section-head .eyebrow, .special-teaser .section-head h2 { color: white; }
/* Right-align the "Alle Spezialtörns" link under the teaser cards. */
.special-teaser .intro-link { display: flex; width: fit-content; margin-left: auto; margin-top: 28px; }
.sp-teaser { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 8px; }
@media (max-width: 900px) { .sp-teaser { grid-template-columns: 1fr; } }
.sp-card { display: grid; grid-template-columns: 300px 1fr; border: 1px solid rgba(255,255,255,0.12); border-radius: 24px; overflow: hidden; background: rgba(255,255,255,0.03); text-decoration: none; color: white; transition: transform 0.25s, border-color 0.25s, box-shadow 0.25s; }
.sp-teaser .sp-card { grid-template-columns: 1fr; }
.sp-card:hover { transform: translateY(-3px); border-color: var(--ac); box-shadow: 0 22px 50px rgba(0,0,0,0.35); }
@media (max-width: 780px) { .sp-card { grid-template-columns: 1fr; } }
.sp-visual { position: relative; overflow: hidden; min-height: 220px; background: var(--ac-deep); }
.sp-visual img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s; }
.sp-card:hover .sp-visual img { transform: scale(1.06); }
.sp-visual::after { content: ''; position: absolute; inset: 0; background: linear-gradient(120deg, rgba(12,22,34,0.15), rgba(12,22,34,0.55)); }
.sp-visual .cat { position: absolute; left: 18px; top: 18px; z-index: 2; display: inline-flex; align-items: center; gap: 8px; padding: 6px 13px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: white; background: var(--ac); border-radius: 999px; font-weight: 500; }
.sp-body { padding: clamp(26px, 3vw, 40px); display: flex; flex-direction: column; justify-content: center; }
.sp-body .tags { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.sp-body .tags span { font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; color: rgba(255,255,255,0.7); border: 1px solid rgba(255,255,255,0.16); border-radius: 999px; padding: 4px 11px; }
.sp-body h2 { font-family: var(--font-display); font-weight: 700; font-size: clamp(24px, 3vw, 38px); letter-spacing: -0.035em; line-height: 1.02; margin-bottom: 12px; color: white; }
.sp-body h2 em { font-family: var(--font-accent); font-style: italic; font-weight: 300; color: var(--ac); }
.sp-body p { color: rgba(255,255,255,0.76); line-height: 1.6; font-size: 15px; max-width: 60ch; margin-bottom: 20px; }
.sp-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: auto; }
.sp-foot .meta { font-family: var(--mono); font-size: 12px; color: rgba(255,255,255,0.6); }
.sp-go { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 600; font-size: 14px; color: white; }
.sp-go .arr { width: 30px; height: 30px; border-radius: 50%; background: var(--ac); display: flex; align-items: center; justify-content: center; font-size: 0; }
.sp-go .arr::before { content: ''; display: block; width: 15px; height: 15px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8h10'/%3E%3Cpath d='M8.5 3.5 13 8l-4.5 4.5'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8h10'/%3E%3Cpath d='M8.5 3.5 13 8l-4.5 4.5'/%3E%3C/svg%3E") center/contain no-repeat; }
.sp-card:hover .sp-go .arr { transform: translateX(3px); }
.soon { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-top: 20px; }
@media (max-width: 780px) { .soon { grid-template-columns: 1fr; } }
.soon-card { border: 1px dashed rgba(255,255,255,0.2); border-radius: 20px; padding: 28px 30px; background: rgba(255,255,255,0.02); }
.soon-card .cat { font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ac); margin-bottom: 10px; }
.soon-card h3 { font-family: var(--font-display); font-weight: 700; font-size: 24px; letter-spacing: -0.03em; margin-bottom: 8px; color: white; }
.soon-card p { color: rgba(255,255,255,0.66); line-height: 1.55; font-size: 14px; }
.soon-card .badge-soon { display: inline-block; margin-top: 14px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; color: rgba(255,255,255,0.5); border: 1px solid rgba(255,255,255,0.18); border-radius: 999px; padding: 5px 12px; }
.sec-label { font-family: var(--mono); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,255,255,0.5); margin: clamp(44px,5vw,72px) 0 22px; display: flex; align-items: center; gap: 12px; }
.sec-label::before { content: ''; width: 28px; height: 1px; background: rgba(255,255,255,0.4); }
.sp-cta { margin-top: clamp(44px,5vw,72px); background: linear-gradient(135deg, var(--brand), var(--brand-deep)); border-radius: 26px; padding: clamp(36px,5vw,60px); display: grid; grid-template-columns: 1.4fr 1fr; gap: 32px; align-items: center; }
@media (max-width: 780px) { .sp-cta { grid-template-columns: 1fr; } }
.sp-cta h3 { font-family: var(--font-display); font-weight: 700; font-size: clamp(28px,3.2vw,44px); letter-spacing: -0.035em; line-height: 1.02; margin-bottom: 14px; color: white; }
.sp-cta h3 em { font-family: var(--font-accent); font-style: italic; font-weight: 300; color: #ffd9a8; }
.sp-cta p { color: rgba(255,255,255,0.9); line-height: 1.6; font-size: 16px; max-width: 46ch; }
.sp-cta-action { text-align: right; }

/* A section's top padding is meant for the gap between sections; under a banner
   it sits on top of the banner's own quiet area and reads as a hole. The front
   page keeps its air, the gallery's photo band its tight fit. Last in the file
   and with the element type named, or `section.block` and friends would win. */
.hero:not(.hero-tall) + section:not(.bands),
.hero:not(.hero-tall) + div { padding-top: clamp(56px, 7vw, 100px); }

/* ============ ERROR PAGES (404 · 410 · 500) ============ */
/* The panel is its own dark surface rather than a .hero, because it carries no
   picture and has to fill the window on its own. `color: white` is not optional:
   the nav's brand, its dropdown triggers and the CTA take their colour from the
   surrounding block, and without this they come out dark on dark. */
.err {
  position: relative;
  min-height: 100vh; display: flex; flex-direction: column;
  background: radial-gradient(ellipse at 50% -10%, #1c3252, #122236 44%, #0b1626 82%);
  color: white; overflow: hidden;
}
/* The chart lies behind everything and is decoration: aria-hidden in the markup,
   and nothing on this page depends on it being seen. */
.err-chart { position: absolute; inset: 0; opacity: 0.5; }
.err-chart svg { width: 100%; height: 100%; }
.err-grid line { stroke: rgba(255,255,255,0.07); stroke-width: 1; }
.err-course {
  fill: none; stroke: rgba(255,255,255,0.35); stroke-width: 2; stroke-linecap: round;
}
/* The part of the course past the last waypoint: dashed, thinner, fading out —
   a route that carries on without arriving. */
.err-course-lost {
  fill: none; stroke: var(--warm); stroke-width: 1.5;
  stroke-dasharray: 7 9; stroke-linecap: round; opacity: 0.45;
}
.err-pin { fill: var(--warm); }
.err-pin-ring { fill: none; stroke: var(--warm); stroke-width: 1; opacity: 0.5; }

.err-body {
  position: relative; z-index: 5;
  margin: auto; width: 100%; max-width: 1500px;
  padding: clamp(40px,6vw,80px) clamp(20px,4vw,64px);
}
.err-inner { max-width: 760px; }
.err-code {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--font-display); font-weight: 700; font-size: 12px;
  letter-spacing: 0.2em; color: var(--warm);
  margin-bottom: clamp(18px,2.4vw,28px);
}
.err-code .err-rule { width: 34px; height: 1px; background: rgba(255,217,168,0.55); }
.err h1 {
  font-family: var(--font-display); font-weight: 800; color: white;
  font-size: clamp(40px, 6.6vw, 96px); line-height: 0.95; letter-spacing: -0.05em;
  margin: 0 0 clamp(18px,2.4vw,28px);
}
.err h1 em {
  font-family: var(--font-accent); font-style: italic; font-weight: 300;
  color: var(--warm); letter-spacing: -0.035em;
}
.err-lead {
  color: rgba(255,255,255,0.84); font-size: clamp(15px,1.35vw,19px);
  line-height: 1.65; max-width: 54ch; margin: 0;
}
.err-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: clamp(26px,3.4vw,40px); }
.err-ghost {
  display: inline-flex; align-items: center;
  padding: 14px 26px; border-radius: 999px; color: white;
  border: 1px solid rgba(255,255,255,0.32);
  font-family: var(--font-display); font-weight: 600; font-size: 15px;
  transition: border-color 0.18s, background 0.18s;
}
.err-ghost:hover { border-color: white; background: rgba(255,255,255,0.08); }

/* The signposts are separated by 1px gaps showing the grid's own background. The
   spacing above sits on an unpainted wrapper: with padding on the painted grid,
   that background would show as a slab instead of as lines. */
.err-links-wrap {
  margin-top: clamp(34px,4.4vw,54px); padding-top: clamp(22px,2.6vw,30px);
  border-top: 1px solid rgba(255,255,255,0.16);
}
.err-links {
  display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 1px;
  background: rgba(255,255,255,0.13);
}
@media (max-width: 780px) { .err-links { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.err-link {
  background: #0d1a2c; padding: 18px 18px 20px;
  display: flex; flex-direction: column; gap: 5px; transition: background 0.2s;
}
.err-link:hover { background: #14263d; }
.err-link .t {
  font-family: var(--font-display); font-weight: 700; font-size: 15px;
  letter-spacing: -0.02em; color: white;
}
.err-link .d { font-size: 12.5px; color: rgba(255,255,255,0.62); line-height: 1.45; }
.err-link .go { font-size: 12px; color: var(--warm); font-weight: 600; margin-top: 3px; }

/* The server error's three rows, in place of the signposts. */
.err-status { margin-top: clamp(34px,4.4vw,54px); display: grid; gap: 1px; background: rgba(255,255,255,0.13); }
.err-row {
  background: #0d1a2c; padding: 16px 18px;
  display: grid; grid-template-columns: minmax(0,260px) minmax(0,1fr); gap: 8px 24px;
}
@media (max-width: 700px) { .err-row { grid-template-columns: 1fr; } }
.err-row .k {
  font-family: var(--font-display); font-weight: 700; font-size: 13px;
  color: var(--warm); letter-spacing: -0.01em;
}
.err-row .v { font-size: 14px; color: rgba(255,255,255,0.76); line-height: 1.55; }

.err-foot {
  margin-top: clamp(26px,3vw,40px);
  font-size: 12.5px; color: rgba(255,255,255,0.5); line-height: 1.55;
}
.err-foot a { color: rgba(255,255,255,0.72); text-decoration: underline; text-underline-offset: 2px; }
.err-foot a:hover { color: white; }

/* ============ NEWSLETTER ============ */
/* The sign-up band. Same footing as the help band — brand surface, one round
   corner radius, two columns that collapse — because they are the same kind of
   interruption in a page, and two different ones read as two different sites. */
.nl-band {
  margin: clamp(40px, 4vw, 64px) clamp(20px, 4vw, 80px);
  padding: clamp(36px, 5vw, 64px);
  background: var(--ink);
  border-radius: 28px;
  display: grid;
  grid-template-columns: 1fr minmax(0, 480px);
  gap: 32px;
  align-items: center;
  color: white;
}
@media (max-width: 900px) { .nl-band { grid-template-columns: 1fr; } }
.nl-eyebrow { color: rgba(255,255,255,0.55); }
.nl-band h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(26px, 2.6vw, 40px);
  line-height: 1.06;
  letter-spacing: -0.035em;
  margin-bottom: 14px;
}
.nl-band h3 em {
  font-family: var(--font-accent); font-style: italic; font-weight: 300;
  color: var(--warm); letter-spacing: -0.02em;
}
.nl-band p { color: rgba(255,255,255,0.86); line-height: 1.6; max-width: 46ch; font-size: 16px; }

.nl-row { display: grid; grid-template-columns: minmax(0,1.4fr) minmax(0,1fr) auto; gap: 10px; }
@media (max-width: 620px) { .nl-row { grid-template-columns: 1fr; } }
.nl-field {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 14px;
  padding: 12px 16px;
  transition: border 0.2s, background 0.2s;
}
.nl-field:focus-within { border-color: var(--brand-bright); background: rgba(255,255,255,0.12); }
.nl-field input { color: white; }
.nl-field input::placeholder { color: rgba(255,255,255,0.5); }
.nl-btn {
  background: var(--brand);
  color: white;
  border-radius: 14px;
  padding: 14px 24px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -0.01em;
  transition: background 0.2s, transform 0.15s;
}
.nl-btn:hover { background: var(--brand-bright); }
.nl-btn:active { transform: translateY(1px); }
.nl-btn.htmx-request { opacity: 0.6; pointer-events: none; }
.nl-note { margin-top: 12px; font-size: 12.5px; color: rgba(255,255,255,0.55); line-height: 1.5; }
.nl-note em { font-style: normal; color: rgba(255,255,255,0.8); }

/* What replaces the form once it has been sent. */
.nl-said { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 16px; align-items: start; }
.nl-said strong { font-family: var(--font-display); font-size: 17px; letter-spacing: -0.02em; }
.nl-said p { margin-top: 4px; font-size: 15px; color: rgba(255,255,255,0.78); }
.nl-said-mark {
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--brand); color: white;
  font-weight: 700; font-size: 16px;
}
.nl-said-warn .nl-said-mark { background: var(--warm); color: var(--ink); }

/* ============ NOTICE PAGE ============ */
/* The pages reached from a mail: confirmation and unsubscribe. Light, unlike the
   error page, because nothing has gone wrong on either of them. */
.notice { min-height: 100vh; display: flex; flex-direction: column; background: var(--paper); }
.notice-body { flex: 1; display: grid; place-items: center; padding: clamp(40px,6vw,90px) 20px; }
.notice-card {
  background: white;
  border: 1px solid var(--rule);
  border-radius: 28px;
  padding: clamp(32px, 5vw, 56px);
  max-width: 620px;
  box-shadow: 0 24px 60px rgba(15,29,46,0.07);
}
.notice-card h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.05;
  letter-spacing: -0.035em;
  margin: 10px 0 16px;
}
.notice-card p { color: var(--ink-soft); line-height: 1.65; font-size: 16px; }
.notice-mark {
  width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--brand); color: white;
  font-weight: 700; font-size: 22px;
  margin-bottom: 20px;
}
.notice-mark-quiet { background: var(--paper-soft); color: var(--ink-soft); }
.notice-list { list-style: none; margin: 22px 0; display: grid; gap: 8px; }
.notice-list li {
  padding: 12px 16px;
  border-radius: 14px;
  background: var(--paper-soft);
  font-size: 15px;
}
.notice-on { font-weight: 600; color: var(--ink); }
.notice-off { color: var(--ink-soft); text-decoration: line-through; text-decoration-thickness: 1px; }
.notice-more { margin-top: 22px; font-size: 14px; }
.notice-form { margin-top: 8px; }
.notice-actions { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 12px; }
.notice-actions .primary, .notice-actions .ghost {
  display: inline-flex; align-items: center; gap: 8px;
  border-radius: 14px; padding: 13px 22px;
  font-family: var(--font-display); font-weight: 700; font-size: 15px;
  letter-spacing: -0.01em; cursor: pointer;
  transition: background 0.2s, border 0.2s, transform 0.15s;
}
.notice-actions .primary { background: var(--brand); color: white; border: 1px solid var(--brand); }
.notice-actions .primary:hover { background: var(--brand-bright); border-color: var(--brand-bright); }
.notice-actions .ghost { background: transparent; color: var(--ink); border: 1px solid var(--rule-strong); }
.notice-actions .ghost:hover { border-color: var(--ink); }
.notice-actions .primary:active, .notice-actions .ghost:active { transform: translateY(1px); }