/* it's all right — site styles.
   A warm, quiet palette. Source Serif 4 for headlines (human, literary),
   Inter for everything else. Generous spacing, soft contrast, nothing loud. */

:root {
  --iar-bg: #f7f2ea;          /* warm paper */
  --iar-surface: #fdfaf5;     /* lighter card surface */
  --iar-ink: #38332e;         /* warm charcoal */
  --iar-ink-soft: #6f655b;    /* muted text */
  --iar-line: rgba(56, 51, 46, 0.12);
  --iar-accent: #d98c73;      /* soft dawn coral */
  --iar-accent-dark: #bf7058;
  --iar-calm: #8ca896;        /* sage — reserved for the calm/breathing pieces to come */

  /* Shared Foundation components (e.g. BackToTop) read --accent. */
  --accent: var(--iar-accent);

  --iar-measure: 38rem;       /* comfortable reading width */
  --iar-radius: 14px;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--iar-bg);
  color: var(--iar-ink);
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 1.05rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 {
  font-family: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  font-weight: 600;
  line-height: 1.2;
  color: var(--iar-ink);
}

a {
  color: var(--iar-accent-dark);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
a:hover { color: var(--iar-accent); }

p { margin: 0 0 1.1rem; }

.container {
  width: 100%;
  max-width: 60rem;
  margin-inline: auto;
  padding-inline: clamp(1.1rem, 4vw, 2rem);
}

/* Skip link — off-screen until focused. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--iar-ink);
  color: #fff;
  padding: 0.6rem 1rem;
  border-radius: 0 0 var(--iar-radius) 0;
  z-index: 100;
}
.skip-link:focus { left: 0; }

/* The router's <FocusOnNavigate> moves focus to the <h1> after each navigation
   (for screen readers) by giving it tabindex="-1" and focusing it. That
   programmatic focus must not draw a visible box around the heading. Keyboard
   focus is unaffected — tabindex="-1" elements are never reached by Tab. */
[tabindex="-1"]:focus { outline: none; }

/* Page frame: sticky footer via a flex column. */
.page {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
}
.page__main { flex: 1 0 auto; }

/* ---- Header ------------------------------------------------------------- */
.site-header { border-bottom: 1px solid var(--iar-line); }
.site-header__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  padding-block: 0.85rem;
}
.site-header__brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  color: var(--iar-ink);
  justify-self: start;
}
.site-header__brand-mark { display: block; transform-origin: center; }
/* A quiet life-sign: after a stretch of stillness the ensō logo makes one slow,
   eased full turn (logo-life.js adds .is-living, then removes it on animationend).
   One turn ≈ 9s, soft in and out — never a spinner. Off for reduced-motion. */
@keyframes iar-logo-turn { to { transform: rotate(360deg); } }
.site-header__brand-mark.is-living { animation: iar-logo-turn 9s cubic-bezier(0.45, 0, 0.55, 1); }
@media (prefers-reduced-motion: reduce) {
  .site-header__brand-mark.is-living { animation: none; }
}
.site-header__brand-text {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;   /* the wordmark stays one line — never "it's / all / right" */
}
.site-header__lang { font-size: 0.95rem; justify-self: end; }

/* ---- Emblem-trio navigation (the three places) ------------------------- */
/* Custom marks from the site's own imagery — a sprout (breathe), the open seal
   ring (anchor), a soft wave (listen). The current place is lit in coral and
   breathes; the others rest in muted sage. The shape carries identity, the
   colour carries "you are here". */
.site-nav {
  display: flex;
  align-items: flex-start;
  gap: clamp(1.1rem, 4.5vw, 2rem);
  justify-self: center;
}
.site-nav__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.28rem;
  text-decoration: none;
  color: #9aa79c;            /* muted sage-grey at rest */
  border-radius: 10px;
}
.site-nav__em {
  width: 25px;
  height: 25px;
  display: block;
  color: inherit;
  transition: color 0.3s ease, transform 0.3s ease;
}
.site-nav__label {
  font-size: 0.74rem;
  line-height: 1;
  letter-spacing: 0.01em;
  color: var(--iar-ink-soft);
}
.site-nav__item.is-active { color: var(--iar-accent); }
.site-nav__item.is-active .site-nav__label { color: var(--iar-accent-dark); font-weight: 500; }
.site-nav__item.is-active .site-nav__em {
  transform-box: fill-box;
  transform-origin: center;
  animation: iar-nav-breathe 7s ease-in-out infinite;
}
.site-nav__item:not(.is-active):hover { color: #6f8a78; }
.site-nav__item:not(.is-active):hover .site-nav__em { transform: translateY(-2px); }
.site-nav__item:not(.is-active):hover .site-nav__label { color: var(--iar-ink); }
.site-nav__item:focus-visible { outline: 2px solid var(--iar-accent); outline-offset: 4px; }
@keyframes iar-nav-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }

@media (max-width: 640px) {
  /* Brand gets the room (1fr), the compact language menu only its content width
     (auto) — so the wordmark keeps one line on narrow phones too. */
  .site-header__inner { grid-template-columns: 1fr auto; row-gap: 0.55rem; }
  .site-header__brand { grid-column: 1; grid-row: 1; }
  .site-header__lang  { grid-column: 2; grid-row: 1; }
  .site-nav { grid-column: 1 / -1; grid-row: 2; }
}

/* ---- "Onward" invitations at the foot of each place -------------------- */
.next-invites {
  margin: 2.75rem auto 0;
  /* Flex-wrap, not inline flow: Razor strips the whitespace between the links, so
     inline boxes have no break opportunity and the (nowrap) line would overflow on
     narrow viewports. Flex items wrap at item boundaries regardless of whitespace. */
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  row-gap: 0.15rem;
  font-size: 0.95rem;
  color: var(--iar-ink-soft);
  line-height: 1.9;
}
.next-invites__lead { margin-right: 0.5rem; }
.next-invites__link {
  color: var(--iar-accent-dark);
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 1px solid transparent;
}
.next-invites__link:hover { color: var(--iar-accent); border-bottom-color: var(--iar-accent); }
.next-invites__link + .next-invites__link::before {
  content: "·";
  color: var(--iar-ink-soft);
  margin: 0 0.6rem;
}
/* The one outward link — set apart from the inward places by a fainter, wider
   divider so it reads as a different kind of step (away from the screen). */
.next-invites__out {
  color: var(--iar-accent-dark);
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 1px solid transparent;
}
.next-invites__out::before {
  content: "·";
  color: var(--iar-line);
  margin: 0 0.7rem 0 0.55rem;
}
.next-invites__out:hover { color: var(--iar-accent); border-bottom-color: var(--iar-accent); }

/* ---- Hinaus (into the open) — the quiet outward turn ------------------- */
.outside { max-width: 34rem; margin-inline: auto; text-align: center; }
.outside__em { width: 48px; height: 48px; display: block; margin: 0 auto 1.4rem; }
.outside__head { font-size: clamp(1.8rem, 5vw, 2.2rem); margin: 0 0 1.1rem; }
.outside__lead {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 1.25rem;
  line-height: 1.5;
  color: var(--iar-accent-dark);
  margin: 0 0 1.6rem;
}
.outside__body { text-align: left; }
.outside__body p { margin: 0 0 1.1rem; }
.outside__nudge {
  text-align: left;
  font-style: italic;
  color: var(--iar-ink-soft);
  border-left: 2px solid rgba(140, 168, 150, 0.6);
  padding-left: 0.9rem;
  margin: 1.6rem 0;
}
.outside__bw {
  text-align: left;
  font-size: 0.97rem;
  color: var(--iar-ink-soft);
  border-top: 1px solid var(--iar-line);
  padding-top: 1.2rem;
  margin-top: 1.8rem;
}
.outside__bw a { color: var(--iar-accent-dark); text-decoration: none; font-weight: 500; }
.outside__bw a:hover { color: var(--iar-accent); }
.outside__bw-arrow { color: var(--iar-accent-dark); }

/* ---- Hören (listen) — the soundscape ----------------------------------- */
.listen { text-align: center; }
.listen__invite { color: var(--iar-ink-soft); font-size: 1.15rem; max-width: 30rem; margin: 0 auto 1.5rem; }
.listen__app { max-width: 26rem; margin: 0 auto; }
.listen__app[hidden] { display: none; }

.listen__stage { width: min(300px, 70vw); margin: 0.5rem auto 1.75rem; }
.listen__svg { width: 100%; height: auto; display: block; }
.listen__rings circle, .listen__core { transform-box: fill-box; transform-origin: center; }
.listen__app.is-playing .listen__rings circle { animation: iar-listen-ripple 6s ease-in-out infinite; }
.listen__app.is-playing .listen__rings circle:nth-of-type(2) { animation-delay: 1.1s; }
.listen__app.is-playing .listen__rings circle:nth-of-type(3) { animation-delay: 2.2s; }
.listen__app.is-playing .listen__core { animation: iar-listen-core 6s ease-in-out infinite; }
@keyframes iar-listen-ripple { 0%, 100% { transform: scale(0.97); } 50% { transform: scale(1.05); } }
@keyframes iar-listen-core { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }

.listen__scapes {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.35rem;
  padding: 0.35rem;
  border: 1px solid var(--iar-line);
  border-radius: 999px;
  max-width: 100%;
  margin: 0 auto 1.6rem;
}
.listen__scape {
  appearance: none;
  border: 0;
  background: transparent;
  cursor: pointer;
  font: inherit;
  font-size: 0.95rem;
  color: var(--iar-ink-soft);
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  transition: background 0.25s ease, color 0.25s ease;
}
.listen__scape:hover { color: var(--iar-ink); }
.listen__scape.is-active { background: var(--iar-accent); color: #fff; }
.listen__scape:focus-visible { outline: 2px solid var(--iar-accent); outline-offset: 2px; }

/* The two appliance sounds stay tucked away until the quiet toggle is used
   (or until a returning visitor's saved sound is one of them — listen.js then
   adds .is-expanded). */
.listen__scapes:not(.is-expanded) .listen__scape--extra { display: none; }
.listen__scapes.is-expanded .listen__more { display: none; }
.listen__more {
  appearance: none;
  border: 0;
  background: transparent;
  cursor: pointer;
  font: inherit;
  font-size: 0.88rem;
  color: var(--iar-ink-soft);
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  opacity: 0.8;
  transition: opacity 0.2s ease, color 0.2s ease;
}
.listen__more:hover { opacity: 1; color: var(--iar-ink); }
.listen__more:focus-visible { outline: 2px solid var(--iar-accent); outline-offset: 2px; }

.listen__controls { display: flex; flex-direction: column; align-items: center; gap: 1.15rem; }
.listen__play {
  appearance: none;
  cursor: pointer;
  font: inherit;
  font-size: 1.05rem;
  color: var(--iar-accent-dark);
  background: transparent;
  border: 1px solid var(--iar-accent);
  border-radius: 999px;
  padding: 0.6rem 1.9rem;
  min-width: 11rem;
  transition: background 0.25s ease, color 0.25s ease;
}
.listen__play:hover { background: var(--iar-accent); color: #fff; }
.listen__play:focus-visible { outline: 2px solid var(--iar-accent); outline-offset: 3px; }

.listen__vol { display: inline-flex; align-items: center; gap: 0.6rem; width: 100%; max-width: 18rem; color: var(--iar-ink-soft); }
.listen__vol-icon { width: 20px; height: 20px; flex: none; }
.listen__vol-icon svg { width: 100%; height: 100%; display: block; }
.listen__slider {
  flex: 1;
  appearance: none;
  -webkit-appearance: none;
  height: 4px;
  border-radius: 999px;
  background: var(--iar-line);
  cursor: pointer;
}
.listen__slider::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; background: var(--iar-accent); border: 0; cursor: pointer; }
.listen__slider::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--iar-accent); border: 0; cursor: pointer; }
.listen__slider:focus-visible { outline: 2px solid var(--iar-accent); outline-offset: 4px; }

.listen__lead { color: var(--iar-ink-soft); max-width: 30rem; margin: 2rem auto 0; }
.listen__note { color: var(--iar-ink-soft); font-size: 0.92rem; max-width: 28rem; margin: 1rem auto 0; }

/* ---- Worte (words / quotes) -------------------------------------------- */
.words { text-align: center; }
.words__intro { color: var(--iar-ink-soft); max-width: 32rem; margin: 0 auto 2.5rem; }
.words__app { max-width: 40rem; margin: 0 auto; }
/* Reserve a fixed, vertically-centred area for the quote so the controls below
   don't jump when a quote changes between 1 and 2 (or 3) lines. No align-items:
   center — the text block stays full width so its line-wrapping is unchanged. */
.words__quote {
  margin: 0 0 1.75rem;
  border: 0;
  padding: 0;
  min-height: 8.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  transition: opacity 0.35s ease;
}
@media (max-width: 640px) { .words__quote { min-height: 10.5rem; } }
.words__quote.is-fading { opacity: 0; }
.words__text {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: clamp(1.35rem, 3.4vw, 2rem);
  line-height: 1.5;
  color: var(--iar-ink);
  margin: 0 0 1rem;
}
.words__author { display: block; font-style: normal; font-size: 0.95rem; color: var(--iar-ink-soft); }
.words__author::before { content: "— "; }
.words__controls { display: flex; flex-wrap: wrap; gap: 0.7rem; justify-content: center; }
.words__controls[hidden] { display: none; }
.words__btn {
  appearance: none;
  font: inherit;
  cursor: pointer;
  border-radius: 999px;
  padding: 0.55rem 1.3rem;
  background: transparent;
  border: 1px solid var(--iar-line);
  color: var(--iar-ink-soft);
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.words__btn:hover { color: var(--iar-ink); border-color: var(--iar-ink-soft); }
.words__keep.is-kept { background: var(--iar-accent); color: #fff; border-color: var(--iar-accent); }
.words__return {
  appearance: none;
  font: inherit;
  font-size: 0.92rem;
  cursor: pointer;
  border: 0;
  background: transparent;
  color: var(--iar-ink-soft);
  padding: 0.55rem 0.7rem;
  border-radius: 999px;
  opacity: 0.85;
  transition: color 0.2s ease, opacity 0.2s ease;
}
.words__return::before { content: "\21A9\00a0"; }
.words__return:hover { color: var(--iar-accent-dark); opacity: 1; }
.words__return:focus-visible { outline: 2px solid var(--iar-accent); outline-offset: 2px; }
.words__return[hidden] { display: none; }
.words__btn:focus-visible { outline: 2px solid var(--iar-accent); outline-offset: 2px; }
.words__list { display: none; }
.words__note { color: var(--iar-ink-soft); font-size: 0.92rem; max-width: 28rem; margin: 2rem auto 0; }
@media (prefers-reduced-motion: reduce) { .words__quote { transition: none; } }

/* ---- Geben (give) — gratitude field + loving-kindness ------------------ */
.give { text-align: center; }
.give__head { font-size: clamp(2rem, 5vw, 2.6rem); margin: 0 0 0.6rem; }
.give__intro {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: clamp(1.15rem, 2.8vw, 1.45rem);
  color: var(--iar-ink);
  max-width: 30rem;
  margin: 0 auto 2.75rem;
}

/* The two gestures, gently separated by a hairline. */
.give__part { max-width: 34rem; margin: 0 auto; }
.give__part + .give__part { margin-top: 3.5rem; padding-top: 3rem; border-top: 1px solid var(--iar-line); }
.give__sub {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 1.5rem;
  margin: 0 0 0.5rem;
}
.give__prompt { color: var(--iar-ink-soft); max-width: 28rem; margin: 0 auto 1.4rem; }

/* Shared input row (add a good thing / name someone). */
.give__row { display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: center; margin: 0 auto 1.5rem; }
.give__input {
  appearance: none;
  font: inherit;
  flex: 1 1 16rem;
  min-width: 0;
  max-width: 22rem;
  padding: 0.6rem 1.1rem;
  color: var(--iar-ink);
  background: var(--iar-bg);
  border: 1px solid var(--iar-line);
  border-radius: 999px;
  transition: border-color 0.2s ease;
}
.give__input::placeholder { color: var(--iar-ink-soft); opacity: 0.8; }
.give__input:focus-visible { outline: none; border-color: var(--iar-accent); }
.give__btn {
  appearance: none;
  font: inherit;
  cursor: pointer;
  flex: none;
  border-radius: 999px;
  padding: 0.6rem 1.4rem;
  background: transparent;
  border: 1px solid var(--iar-accent);
  color: var(--iar-accent-dark);
  transition: background 0.2s ease, color 0.2s ease;
}
.give__btn:hover { background: var(--iar-accent); color: #fff; }
.give__btn:focus-visible { outline: 2px solid var(--iar-accent); outline-offset: 3px; }

/* Bemerken — the field of warm lights. */
.give__sky { width: min(280px, 78vw); margin: 0.5rem auto 1rem; }
.give__sky-svg { width: 100%; height: auto; display: block; overflow: visible; }
/* Each light glows (drop-shadow) so a single one already reads as a warm light,
   and a wide transparent stroke gives a comfortable tap target around the small
   dot. transform: scale (not the r attribute) drives hover/tap so the motion is
   smooth and the resting hit area stays put. */
.give__light {
  fill: var(--iar-accent);
  stroke: transparent;
  stroke-width: 10;
  pointer-events: all;
  cursor: pointer;
  transform-box: fill-box;
  transform-origin: center;
  filter: drop-shadow(0 0 3px rgba(217, 140, 115, 0.5));
  transition: fill 0.2s ease, transform 0.2s ease;
}
.give__light:hover { fill: var(--iar-accent-dark); transform: scale(1.15); }
.give__light.is-active {
  fill: var(--iar-accent-dark);
  transform: scale(1.3);
  filter: drop-shadow(0 0 5px rgba(191, 112, 88, 0.65));
}
.give__light.is-tapped { animation: iar-give-tap 0.45s ease-out 1; }
@keyframes iar-give-tap {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.6); }
  100% { transform: scale(1.3); }
}
.give__light.is-new { animation: iar-give-spark 1.5s ease-out 1; }
@keyframes iar-give-spark {
  0%   { fill: #fff; transform: scale(0.2); }
  35%  { fill: #f0997b; transform: scale(1.55); }
  100% { fill: var(--iar-accent); transform: scale(1); }
}
.give__readout {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 1.2rem;
  color: var(--iar-ink);
  min-height: 1.8rem;
  margin: 0 0 0.6rem;
}
/* Re-fade the line on every change — so even tapping the only light (whose text
   already shows) gives a visible, gentle response. */
.give__readout.is-shown { animation: iar-give-readout 0.5s ease 1; }
@keyframes iar-give-readout {
  0%   { opacity: 0; transform: translateY(3px); }
  100% { opacity: 1; transform: none; }
}
.give__field-note { color: var(--iar-ink-soft); font-size: 0.92rem; margin: 0; }

/* Weitergeben — warmth radiating outward. */
.give__radiate { width: min(220px, 62vw); margin: 1rem auto 1.25rem; }
.give__radiate svg { width: 100%; height: auto; display: block; }
.give__ray { opacity: 0; transform-box: fill-box; transform-origin: center; }
.give__radiate.is-radiating .give__ray { animation: iar-give-ray 3.4s ease-out infinite; }
.give__radiate.is-radiating .give__ray:nth-of-type(2) { animation-delay: 0.55s; }
.give__radiate.is-radiating .give__ray:nth-of-type(3) { animation-delay: 1.1s; }
@keyframes iar-give-ray {
  0%   { transform: scale(0.35); opacity: 0; }
  18%  { opacity: 0.75; }
  100% { transform: scale(1.3); opacity: 0; }
}
.give__wish {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: clamp(1.25rem, 3vw, 1.6rem);
  color: var(--iar-ink);
  min-height: 1.6rem;
  margin: 0 0 0.5rem;
}
.give__return { color: var(--iar-ink-soft); font-style: italic; margin: 0 0 1.5rem; }
.give__return[hidden] { display: none; }

.give__copy { max-width: 26rem; margin: 0 auto; }
.give__copy[hidden] { display: none; }
.give__copy-label { color: var(--iar-ink-soft); font-size: 0.95rem; margin: 0 0 0.7rem; }
.give__copy-text {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 1.15rem;
  color: var(--iar-ink);
  margin: 0 0 1rem;
  padding: 0.9rem 1.2rem;
  border-left: 2px solid var(--iar-accent);
  background: rgba(217, 140, 115, 0.07);
  border-radius: 0 var(--iar-radius) var(--iar-radius) 0;
  text-align: left;
}
.give__copy-btn.is-copied { background: var(--iar-accent); color: #fff; }

.give__note { color: var(--iar-ink-soft); font-size: 0.92rem; max-width: 28rem; margin: 2.5rem auto 0; }

@media (prefers-reduced-motion: reduce) {
  .site-nav__item.is-active .site-nav__em,
  .listen__app.is-playing .listen__rings circle,
  .listen__app.is-playing .listen__core,
  .give__light.is-new,
  .give__light.is-tapped,
  .give__readout.is-shown,
  .give__radiate.is-radiating .give__ray { animation: none; }
  .give__radiate.is-radiating .give__ray { opacity: 0.5; }
}

/* Language picker. Markup + colours + the flag stripes live in the shared
   Foundation LanguagePicker; only the two placements are site-specific:
   the header carries the compact <details> menu, the footer the full strip. */

/* The menu's drop panel sits on the warm paper surface (Foundation default is
   plain white) — the variable is read by .lang-menu__panel via inheritance. */
.site-header__lang { --lang-menu-surface: var(--iar-surface); }

/* Full language strip, quietly centred at the foot. */
.site-footer__langs {
  display: flex;
  justify-content: center;
  margin: 0.1rem 0;
}

/* Courtesy-translation notice on the non-German legal pages. */
.legal__convenience {
  font-size: 0.92rem;
  color: var(--iar-ink-soft);
  background: rgba(217, 140, 115, 0.08);
  border-left: 2px solid var(--iar-accent);
  border-radius: 0 var(--iar-radius) var(--iar-radius) 0;
  padding: 0.7rem 1rem;
  margin: 0 0 1.75rem;
}

/* ---- Hero --------------------------------------------------------------- */
.home-hero {
  background: radial-gradient(120% 90% at 50% 0%, #fdf6ec 0%, var(--iar-bg) 70%);
  text-align: center;
  padding-block: clamp(3.5rem, 12vw, 7rem);
  padding-inline: clamp(1.1rem, 5vw, 2rem);
}
.home-hero__inner { max-width: 44rem; margin-inline: auto; }
.home-hero__kicker {
  margin: 0 0 1rem;
  color: var(--iar-ink-soft);
  font-size: 0.95rem;
  letter-spacing: 0.04em;
}
.home-hero__headline {
  margin: 0 0 1.2rem;
  font-size: clamp(2.6rem, 8vw, 4.2rem);
  letter-spacing: -0.01em;
}
.home-hero__lead {
  margin: 0 auto;
  max-width: 34rem;
  font-size: 1.2rem;
  color: var(--iar-ink-soft);
}

/* ---- Home intro --------------------------------------------------------- */
.home-intro {
  max-width: var(--iar-measure);
  margin: clamp(2.5rem, 8vw, 4.5rem) auto;
  text-align: center;
}
.home-intro__lead { font-size: 1.15rem; }
.home-intro__note { color: var(--iar-ink-soft); }

/* ---- Generic page (reading column / legal) ----------------------------- */
.site-page { padding-block: clamp(2rem, 6vw, 3.5rem); }
.site-page--narrow .site-page__article { max-width: var(--iar-measure); margin-inline: auto; }
.site-page--wide .site-page__article { max-width: none; }
.site-page__head h1 { margin: 0 0 1.5rem; font-size: clamp(2rem, 5vw, 2.8rem); }

.legal h2 { margin: 2rem 0 0.6rem; font-size: 1.5rem; }
.legal h3 { margin: 1.6rem 0 0.4rem; font-size: 1.15rem; }
.legal__address { font-style: normal; line-height: 1.8; }
.legal__note { color: var(--iar-ink-soft); font-size: 0.95rem; margin-top: 2rem; }

/* ---- 404 ---------------------------------------------------------------- */
.not-found { text-align: center; padding-block: clamp(3rem, 9vw, 5rem); }
.not-found__code {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: clamp(3.5rem, 14vw, 6rem);
  color: var(--iar-accent);
  margin: 0;
  line-height: 1;
}
.not-found__head { margin: 0.5rem 0 1rem; }
.not-found__lead { max-width: 32rem; margin-inline: auto; color: var(--iar-ink-soft); }
.not-found__home { margin-top: 1.5rem; }

/* ---- Footer ------------------------------------------------------------- */
.site-footer {
  flex-shrink: 0;
  border-top: 1px solid var(--iar-line);
  margin-top: clamp(3rem, 8vw, 5rem);
  padding-block: 2.5rem;
}
.site-footer__inner {
  max-width: 40rem;
  margin-inline: auto;
  padding-inline: 1.1rem;
  text-align: center;
}
.site-footer__mark { display: inline-block; margin-bottom: 0.8rem; opacity: 0.9; }
.site-footer__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.2rem;
  justify-content: center;
  margin-bottom: 1rem;
}
.site-footer__nav a { color: var(--iar-ink-soft); text-decoration: none; }
.site-footer__nav a:hover { color: var(--iar-accent-dark); }
.site-footer__family { color: var(--iar-ink-soft); margin: 0 0 0.4rem; }
.site-footer__family a {
  color: var(--iar-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--iar-line);
}
.site-footer__family a:hover { color: var(--iar-accent-dark); border-bottom-color: var(--iar-accent); }
.site-footer__copy { color: var(--iar-ink-soft); font-size: 0.9rem; margin: 0; }

/* ---- Unhandled-error banner (#blazor-error-ui) -------------------------
   Markup is rendered by the Foundation BlazorFrameworkUi component (App.razor,
   outside Routes). The base rule (display:none until Blazor sets the inline
   style) plus the brand colours stay site-local and GLOBAL — the element isn't
   scoped, so a scoped rule would never match it. Warm amber to match the site. */
#blazor-error-ui {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #fdf3df;
  border-top: 1px solid #e3c98a;
  color: #6f5a2a;
  padding: 0.8rem 1rem;
  box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.08);
  display: none;
  z-index: 1000;
}
#blazor-error-ui[style*="display: block"] { display: block; }
#blazor-error-ui .reload { color: var(--iar-accent-dark); margin-left: 1rem; }
#blazor-error-ui .dismiss { float: right; cursor: pointer; }

/* ---- Scroll reveal (Foundation reveal.js toggles .is-visible) ----------- */
html.js .reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.6s ease, transform 0.6s ease;
  will-change: opacity, transform;
}
html.js .reveal.is-visible {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  html.js .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---- Home: gentle invitation to the breathing companion ----------------- */
.home-intro__invites {
  margin-top: 2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  justify-content: center;
}
.home-intro__invites a {
  display: inline-block;
  padding: 0.7rem 1.4rem;
  border: 1px solid var(--iar-accent);
  border-radius: 999px;
  color: var(--iar-accent-dark);
  text-decoration: none;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.home-intro__invites a:hover { background: var(--iar-accent); color: #fff; }

/* ---- Breathing companion (/atem · /breathe) ----------------------------
   Ambient CSS-only breath: the body rises on the inhale, the halo expands and
   fades, the ein/aus cue cross-fades — all on one shared 10s timeline (4s in,
   6s out, no hold). prefers-reduced-motion rests everything and swaps the cue
   for a calm static note. */
.breathe { text-align: center; padding-block: clamp(2rem, 6vw, 3.5rem); }
.breathe__head { font-size: clamp(2rem, 5vw, 2.6rem); margin: 0 0 0.6rem; }
.breathe__invite { color: var(--iar-ink-soft); font-size: 1.15rem; max-width: 30rem; margin: 0 auto 1.5rem; }
.breathe__stage { position: relative; width: min(360px, 78vw); margin: 1.5rem auto 2.75rem; --iar-breath: 10s; }
.breathe__svg { width: 100%; height: auto; display: block; overflow: visible; }

.breathe-halo {
  transform-box: fill-box;
  transform-origin: center;
  animation: iar-breathe-halo var(--iar-breath, 10s) ease-in-out infinite;
}
.breathe-body {
  transform-box: fill-box;
  transform-origin: center bottom;
  animation: iar-breathe-body var(--iar-breath, 10s) ease-in-out infinite;
}
@keyframes iar-breathe-halo {
  0%   { transform: scale(0.82); opacity: 0.5; }
  40%  { transform: scale(1.18); opacity: 0.14; }
  100% { transform: scale(0.82); opacity: 0.5; }
}
@keyframes iar-breathe-body {
  0%   { transform: scale(1, 1); }
  40%  { transform: scale(1.03, 1.06); }
  100% { transform: scale(1, 1); }
}

.breathe__cues { position: absolute; left: 0; right: 0; bottom: -1.6rem; height: 1.4rem; }
.breathe__cue {
  position: absolute;
  left: 0;
  right: 0;
  color: var(--iar-accent-dark);
  letter-spacing: 0.2em;
  font-size: 0.95rem;
}
.breathe__cue--in  { animation: iar-breathe-cue-in var(--iar-breath, 10s) ease-in-out infinite; }
.breathe__cue--out { animation: iar-breathe-cue-out var(--iar-breath, 10s) ease-in-out infinite; }
@keyframes iar-breathe-cue-in  { 0% { opacity: 0; } 8%, 36% { opacity: 1; } 46%, 100% { opacity: 0; } }
@keyframes iar-breathe-cue-out { 0%, 46% { opacity: 0; } 56%, 92% { opacity: 1; } 100% { opacity: 0; } }

/* The mouth shows the breath in the face too: open on the inhale, a soft smile
   on the exhale — cross-faded on the same --iar-breath timeline as the body. */
.breathe-mouth--in  { animation: iar-breathe-mouth-in  var(--iar-breath, 10s) ease-in-out infinite; }
.breathe-mouth--out { animation: iar-breathe-mouth-out var(--iar-breath, 10s) ease-in-out infinite; }
@keyframes iar-breathe-mouth-in  { 0% { opacity: 1; } 36% { opacity: 1; } 48% { opacity: 0; } 92% { opacity: 0; } 100% { opacity: 1; } }
@keyframes iar-breathe-mouth-out { 0% { opacity: 0; } 36% { opacity: 0; } 48% { opacity: 1; } 92% { opacity: 1; } 100% { opacity: 0; } }

/* The eyes lift a hint on the inhale — on top of the whole body rising. */
.breathe-eyes { animation: iar-breathe-eyes var(--iar-breath, 10s) ease-in-out infinite; }
@keyframes iar-breathe-eyes { 0% { transform: translateY(0); } 40% { transform: translateY(-2px); } 100% { transform: translateY(0); } }

.breathe__lead { max-width: 32rem; margin: 0 auto 1.25rem; }
.breathe__static-note { display: none; max-width: 30rem; margin: 0 auto 1.25rem; color: var(--iar-ink-soft); }
.breathe__note { color: var(--iar-ink-soft); font-size: 0.92rem; max-width: 28rem; margin: 1.5rem auto 0; }

/* Pace control — slim slider, words at the ends, a quiet breaths-per-minute hint. */
.breathe__controls { max-width: 22rem; margin: 0 auto 1.75rem; }
.breathe__control-label { display: block; font-size: 0.9rem; color: var(--iar-ink-soft); margin-bottom: 0.6rem; }
.breathe__pace { display: flex; align-items: center; gap: 0.8rem; }
.breathe__pace-end { font-size: 0.85rem; color: var(--iar-ink-soft); white-space: nowrap; }
.breathe__slider {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  border-radius: 999px;
  background: var(--iar-line);
  outline: none;
}
.breathe__slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--iar-accent);
  cursor: pointer;
  border: none;
}
.breathe__slider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--iar-accent);
  cursor: pointer;
  border: none;
}
.breathe__slider:focus-visible { outline: 2px solid var(--iar-accent); outline-offset: 4px; }
.breathe__pace-hint { font-size: 0.85rem; color: var(--iar-ink-soft); margin: 0.6rem 0 0; min-height: 1.2em; }

@media (prefers-reduced-motion: reduce) {
  .breathe-halo,
  .breathe-body,
  .breathe__cue--in,
  .breathe__cue--out,
  .breathe-mouth--in,
  .breathe-mouth--out,
  .breathe-eyes { animation: none; }
  .breathe-halo { opacity: 0.28; transform: scale(1); }
  .breathe-body { transform: none; }
  .breathe__cues { display: none; }
  /* At rest the face keeps the soft smile (no open-mouth inhale). */
  .breathe-mouth--in { display: none; }
  .breathe-mouth--out { opacity: 1; }
  .breathe__static-note { display: block; }
}

/* ---- Personal anchor (/anker · /anchor) — a unique seal you hold ---------
   The bloom is generated from the visitor's own word (anchor.js); you press &
   hold to set it and to return to it, and it grows a little with each return.
   All local (localStorage), no account, no tracking. */
.anchor { text-align: center; padding-block: clamp(2rem, 6vw, 3.5rem); }
.anchor__head { font-size: clamp(2rem, 5vw, 2.6rem); margin: 0 0 0.6rem; }
.anchor__intro { color: var(--iar-ink-soft); max-width: 34rem; margin: 0 auto 1.5rem; }
.anchor__app { max-width: 30rem; margin: 0 auto; }
.anchor__prompt { color: var(--iar-ink-soft); max-width: 28rem; margin: 0 auto 1.4rem; }
.anchor__field { max-width: 22rem; margin: 0 auto 0.4rem; text-align: left; }
.anchor__field-label { display: block; font-size: 0.95rem; color: var(--iar-ink-soft); margin-bottom: 0.4rem; }
.anchor__word {
  width: 100%;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--iar-line);
  border-radius: 10px;
  font: inherit;
  background: #fff;
  color: var(--iar-ink);
  text-align: center;
}
.anchor__word:focus { outline: 2px solid var(--iar-accent); outline-offset: 1px; border-color: var(--iar-accent); }

/* the seal stage — the press-and-hold target */
.anchor__stage {
  position: relative;
  width: min(300px, 82vw);
  height: min(300px, 82vw);
  margin: 1.4rem auto 0.6rem;
  border-radius: 50%;
  cursor: pointer;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
  /* The press-and-hold gesture must not start a text selection (a long-press
     would otherwise select the seal's word and steal the gesture, esp. on mobile). */
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
.anchor__stage:focus-visible { outline: 2px solid var(--iar-accent); outline-offset: 6px; }
.anchor__seal, .anchor__ring, .anchor__bud { position: absolute; inset: 0; width: 100%; height: 100%; }
/* Gently hypnotic: the bloom turns very slowly (one revolution ~80s), so the
   golden-angle spiral seems to drift — meditative, attention-holding, calm.
   Stilled under prefers-reduced-motion. */
.anchor__seal {
  transform-origin: center;
  animation: iar-anchor-turn 110s linear infinite;
  opacity: 0;
  transition: opacity 0.8s ease;
}
@keyframes iar-anchor-turn { to { transform: rotate(360deg); } }
/* The bloom also breathes ever so slightly (inner group, so it doesn't fight
   the rotation transform on the svg). Barely-there scale, slow and calm. */
.anchor__seal-pulse {
  transform-box: fill-box;
  transform-origin: center;
  animation: iar-anchor-breathe 7s ease-in-out infinite;
}
@keyframes iar-anchor-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.035); } }

/* Until the input settles, a calm closed bud waits (same for everyone, reveals
   nothing). Holding it blooms it open into the unique form: .is-bloomed
   cross-fades the bud out and the seal in. */
.anchor__bud { opacity: 1; transition: opacity 0.55s ease; pointer-events: none; }
.anchor__bud-g { transform-box: fill-box; transform-origin: bottom; animation: iar-anchor-bud 6s ease-in-out infinite; }
@keyframes iar-anchor-bud { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.045); } }
.anchor__stage.is-bloomed .anchor__bud { opacity: 0; }
.anchor__stage.is-bloomed .anchor__seal { opacity: 1; }
.anchor__ring-fill {
  fill: none;
  stroke: var(--iar-accent);
  stroke-width: 2.2;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  stroke-linecap: round;
  transform: rotate(-90deg);
  transform-origin: center;
  opacity: 0.85;
}
.anchor__stage::after {
  content: '';
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  border: 2px solid var(--iar-accent);
  opacity: 0;
  pointer-events: none;
}
.anchor__stage.is-rippling::after { animation: iar-anchor-ripple 0.85s ease-out; }
@keyframes iar-anchor-ripple {
  0% { transform: scale(0.82); opacity: 0.55; }
  100% { transform: scale(1.26); opacity: 0; }
}
.anchor__bloom-word {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1.5rem;
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 1.5rem;
  color: var(--iar-ink);
  background: radial-gradient(circle, rgba(247, 242, 234, 0.9) 45%, rgba(247, 242, 234, 0) 72%);
  opacity: 0;
  transform: scale(0.92);
  transition: opacity 0.6s ease, transform 0.6s ease;
  pointer-events: none;
  word-break: break-word;
}
.anchor__bloom-word.is-shown { opacity: 1; transform: scale(1); }
.anchor__hint { color: var(--iar-ink-soft); min-height: 1.4em; margin: 0.4rem 0 0; }
.anchor__actions { display: flex; gap: 0.6rem; justify-content: center; margin-top: 1.2rem; }
/* `display: flex` would otherwise beat the weak UA `[hidden]` rule, so the
   actions stayed visible in set mode (nothing to change/let go of). */
.anchor__actions[hidden] { display: none; }
.anchor__back {
  appearance: none;
  font: inherit;
  font-size: 0.92rem;
  cursor: pointer;
  border: 0;
  background: transparent;
  color: var(--iar-ink-soft);
  margin-top: 1rem;
  padding: 0.4rem 0.7rem;
  border-radius: 999px;
  opacity: 0.85;
  transition: color 0.2s ease, opacity 0.2s ease;
}
.anchor__back::before { content: "\2190\00a0"; }
.anchor__back:hover { color: var(--iar-accent-dark); opacity: 1; }
.anchor__back:focus-visible { outline: 2px solid var(--iar-accent); outline-offset: 2px; }
.anchor__back[hidden] { display: none; }
.anchor__change, .anchor__clear {
  font: inherit;
  cursor: pointer;
  border-radius: 999px;
  padding: 0.55rem 1.2rem;
  background: transparent;
  border: 1px solid var(--iar-line);
  transition: background-color 0.25s ease;
}
.anchor__change { color: var(--iar-ink); }
.anchor__clear { color: var(--iar-ink-soft); }
.anchor__change:hover, .anchor__clear:hover { background: var(--iar-bg); }
.anchor__note { color: var(--iar-ink-soft); font-size: 0.92rem; max-width: 30rem; margin: 1.5rem auto 0; }
@media (prefers-reduced-motion: reduce) {
  .anchor__seal, .anchor__seal-pulse, .anchor__bud-g { animation: none; }
  .anchor__bloom-word { transition: none; }
  .anchor__stage.is-rippling::after { animation: none; }
}

/* ---- ComingSoon soft-launch splash ------------------------------------- */
.coming-soon {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 2rem;
  background: radial-gradient(120% 80% at 50% 0%, #fdf6ec 0%, var(--iar-bg) 70%);
}
.coming-soon__inner { max-width: 32rem; text-align: center; }
.coming-soon__logo { display: block; margin: 0 auto 1.2rem; }
.coming-soon__wordmark {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 1.6rem;
  margin: 0 0 1.5rem;
  letter-spacing: 0.01em;
}
.coming-soon__headline { font-size: clamp(2.4rem, 7vw, 3.4rem); margin: 0 0 1rem; }
.coming-soon__teaser { color: var(--iar-ink-soft); font-size: 1.1rem; margin: 0 auto 1.8rem; max-width: 26rem; }
.coming-soon__langs { display: flex; gap: 0.6rem; justify-content: center; align-items: center; }
.coming-soon__lang { color: var(--iar-ink-soft); text-decoration: none; }
.coming-soon__lang:hover,
.coming-soon__lang.is-active { color: var(--iar-accent-dark); }
.coming-soon__sep { color: var(--iar-line); }

/* Owner preview hint (shown when the gate is armed but bypassed). */
.preview-banner {
  background: #fdf3df;
  border-bottom: 1px solid #e3c98a;
  color: #6f5a2a;
  padding: 0.5rem 1rem;
  text-align: center;
  font-size: 0.9rem;
}
.preview-banner a { margin-left: 0.8rem; color: var(--iar-accent-dark); }