/* Futurehours root background themes (v218): warm / sea / dusk / night.
   Ported from /blur/ (blur19, /workspace/fh-blur/blur.css). Random theme per page load (theme.js),
   switchable in the Info section's right column. The Info section is a gray frost over that atmosphere. */
/* =====================================================================
   Futurehours — blur / mesh-gradient atmosphere (preview)
   Dual-stack sequential transition: two .fh-bg trees, each FIXED palette.
   Theme change: fade active 1→0, then fade incoming 0→1.
   Never both stacks are visible mid-transition.
   .fh-void carries the transitioning base colour between stacks.
   UI ink/sky/base soft-fades on <html data-fh-bg> (set at hold).
   Blend modes locked. filter:blur amounts frozen (not transitioned).
   will-change: transform only — never filter.
   ===================================================================== */

@property --base { syntax: "<color>"; inherits: true; initial-value: #f4e6cf; }
@property --ink-c { syntax: "<color>"; inherits: true; initial-value: #162470; }
@property --sky-c { syntax: "<color>"; inherits: true; initial-value: #faf4e8; }
@property --orp { syntax: "<color>"; inherits: true; initial-value: #c04422; }

/* UI palette on <html> (soft-fades). Atmosphere colors below are a second copy
   on purpose: stacks must not inherit these while --base / --ink-c transition. */

html,
html[data-fh-bg="warm"] {
  --base: #f3e4cc;
  --sky: 250, 244, 232;
  --ink: 22, 36, 112;
  --sky-c: #faf4e8;
  --ink-c: #162470;
  --orp: #c04422;
}

html[data-fh-bg="sea"] {
  --base: #d9eeec;
  --sky: 240, 249, 248;
  --ink: 10, 44, 64;
  --sky-c: #f0f9f8;
  --ink-c: #0a2c40;
  --orp: #147a8c;
}

html[data-fh-bg="dusk"] {
  --base: #43295c;
  --sky: 48, 28, 66;
  --ink: 255, 247, 238;
  --sky-c: #301c42;
  --ink-c: #fff7ee;
  --orp: #e2a24c;
}

html[data-fh-bg="night"] {
  --base: #0c1017;
  --sky: 14, 18, 26;
  --ink: 236, 236, 240;
  --sky-c: #0e121a;
  --ink-c: #ececf0;
  --orp: #a9bcff;
}

html {
  /* Locked blend tokens for stacks (inherited). Never theme-swap these. */
  --blend-deep: normal;
  --blend-glow: screen;
  background: var(--base);
  transition: --base var(--duration-theme) ease, --ink-c var(--duration-theme) ease, --sky-c var(--duration-theme) ease, --orp var(--duration-theme) ease;
}

body {
  background: transparent;
  color: var(--ink-c);
  transition: color var(--duration-theme) ease;
}

/* ---------- Atmosphere palettes on stacks (NO color transition) ---------- */

.fh-bg[data-fh-theme="warm"] {
  --base: #f3e4cc;
  --c1: #ffcf45;
  --c2: #ffa66b;
  --c3: #ff98c3;
  --c4: #e3a4f2;
  --c5: #8cc4ff;
  --c6: #6e98ff;
  --c7: #6ed2c6;
  --c8: #fff4dc;
  --hi: #fffaf0;
  --shade: #4a2f6a;
  --scrim-c: #f8eedc;
  --scrim-a: 0.4;
  --blob-op: 0.92;
  --light-op: 0.55;
  --shadow-op: 0.16;
  --vig-op: 0.22;
  --grain-op: 0.18;
  --wash-op: 0.62;
}

.fh-bg[data-fh-theme="sea"] {
  --base: #d9eeec;
  --c1: #ffe39a;
  --c2: #ffc0ad;
  --c3: #9cb9ff;
  --c4: #c2b4ff;
  --c5: #5db6e8;
  --c6: #2f9fb0;
  --c7: #7fdccb;
  --c8: #f3fcf8;
  --hi: #ffffff;
  --shade: #0c3c50;
  --scrim-c: #eef8f6;
  --scrim-a: 0.4;
  --blob-op: 0.9;
  --light-op: 0.6;
  --shadow-op: 0.14;
  --vig-op: 0.2;
  --grain-op: 0.16;
  --wash-op: 0.62;
}

.fh-bg[data-fh-theme="dusk"] {
  --base: #43295c;
  --c1: #dc6a3e;
  --c2: #c4467c;
  --c3: #8f46b2;
  --c4: #3f50c2;
  --c5: #1f8a88;
  --c6: #e2a24c;
  --c7: #5e2d75;
  --c8: #f2b896;
  --hi: #ffe2cc;
  --shade: #12061e;
  --scrim-c: #2a1638;
  --scrim-a: 0.42;
  --blob-op: 0.84;
  --light-op: 0.32;
  --shadow-op: 0.34;
  --vig-op: 0.5;
  --grain-op: 0.2;
  --wash-op: 0.58;
}

.fh-bg[data-fh-theme="night"] {
  --base: #0c1017;
  --c1: #1f3a7c;
  --c2: #0f5d66;
  --c3: #4a2b66;
  --c4: #2a4e9f;
  --c5: #6a481d;
  --c6: #172840;
  --c7: #3b6d8e;
  --c8: #8a6a38;
  --hi: #a9bcff;
  --shade: #000000;
  --scrim-c: #0c1017;
  --scrim-a: 0.44;
  --blob-op: 0.88;
  --light-op: 0.18;
  --shadow-op: 0.5;
  --vig-op: 0.62;
  --grain-op: 0.22;
  --wash-op: 0.55;
}

/* ---------- layer container ---------- */

.fh-bg {
  position: fixed;
  inset: 0;
  z-index: var(--z-bg); /* above .fh-void */
  overflow: hidden;
  pointer-events: none;
  background: var(--base);
  isolation: isolate;
  contain: layout style;
  opacity: 0;
  /* Opacity flashlight is driven by rAF in bg.js (not CSS transition).
     Sequential out→hold→in; never recolor a visible stack mid-fade. */
}

/* Base-colour plate under stacks — visible while their opacity is below 1. */
.fh-void {
  position: fixed;
  inset: 0;
  z-index: var(--z-void);
  pointer-events: none;
  background: var(--base);
  transition: background var(--duration-theme) ease;
}

html.fh-switching {
  background: var(--base);
}

.fh-bg.is-show {
  opacity: 1;
}

.fh-bg.is-front {
  z-index: var(--z-bg-front);
}

.fh-bg > * {
  position: absolute;
}

.fh-wash,
.fh-blob,
.fh-light,
.fh-grain {
  will-change: transform; /* transform-only — opacity theme fades via @property, no animation restart */
}

/* 1 — conic mesh wash: whole-field color bleed (softened), rotates ~3 min */
.fh-wash {
  inset: -45vmax;
  background:
    conic-gradient(
      from 210deg at 46% 52%,
      var(--c1) 0deg,
      color-mix(in oklab, var(--c1) 50%, var(--c3)) 40deg,
      var(--c3) 85deg,
      color-mix(in oklab, var(--c3) 45%, var(--c5)) 130deg,
      var(--c5) 175deg,
      var(--c7) 220deg,
      color-mix(in oklab, var(--c7) 40%, var(--c8)) 265deg,
      var(--c2) 310deg,
      var(--c1) 360deg
    );
  /* No blur: the conic stops already blend smoothly, and a 90px blur on a rotating
     1500px layer made Safari re-rasterize it and flicker. */
  opacity: var(--wash-op);
  animation: wash-turn 180s linear infinite;
}

@keyframes wash-turn {
  to { transform: rotate(360deg); }
}

/* 2 — blobs: each = 2–3 offset multi-stop radials → lumpy organic shape */
.fh-blob {
  opacity: var(--blob-op);
  transform-origin: 50% 50%;
}

.b1 { /* big gold → apricot bloom, upper left */
  width: 78vmax; height: 58vmax; left: -22vmax; top: -24vmax;
  background:
    radial-gradient(ellipse 46% 40% at 44% 52%, var(--c8) 0%, var(--c1) 30%, color-mix(in oklab, var(--c1) 55%, var(--c2)) 52%, transparent 72%),
    radial-gradient(ellipse 30% 36% at 70% 38%, var(--c1) 0%, transparent 70%),
    radial-gradient(ellipse 26% 22% at 28% 70%, var(--c2) 0%, transparent 72%);
  filter: blur(70px);
  animation: drift-a 23s ease-in-out infinite alternate;
}

.b2 { /* pink → lilac mass, right */
  width: 62vmax; height: 74vmax; right: -24vmax; top: 2vmax;
  background:
    radial-gradient(ellipse 40% 46% at 46% 46%, var(--c3) 0%, color-mix(in oklab, var(--c3) 60%, var(--c4)) 38%, transparent 70%),
    radial-gradient(ellipse 24% 30% at 30% 68%, var(--c4) 0%, transparent 70%),
    radial-gradient(ellipse 22% 18% at 66% 24%, var(--c2) 0%, transparent 72%);
  filter: blur(80px);
  animation: drift-b 29s ease-in-out infinite alternate;
}

.b3 { /* sky → cornflower, lower left, multiplies into the gold for depth */
  width: 66vmax; height: 50vmax; left: -16vmax; bottom: -22vmax;
  background:
    radial-gradient(ellipse 44% 42% at 52% 50%, var(--c5) 0%, color-mix(in oklab, var(--c5) 50%, var(--c6)) 42%, transparent 72%),
    radial-gradient(ellipse 22% 28% at 78% 36%, var(--c6) 0%, transparent 70%);
  filter: blur(64px);
  mix-blend-mode: var(--blend-deep);
  opacity: calc(var(--blob-op) * 0.78);
  animation: drift-c 19s ease-in-out infinite alternate-reverse;
}

.b4 { /* teal tongue bleeding in from bottom right */
  width: 54vmax; height: 34vmax; right: -10vmax; bottom: -10vmax;
  background:
    radial-gradient(ellipse 48% 40% at 40% 56%, var(--c7) 0%, color-mix(in oklab, var(--c7) 45%, var(--c5)) 40%, transparent 72%),
    radial-gradient(ellipse 20% 26% at 76% 30%, var(--c5) 0%, transparent 70%);
  filter: blur(56px);
  animation: drift-d 17s ease-in-out infinite alternate;
}

.b5 { /* apricot / coral core drifting through the middle */
  width: 40vmax; height: 30vmax; left: 30vw; top: 28vh;
  background:
    radial-gradient(ellipse 42% 46% at 50% 50%, var(--c2) 0%, color-mix(in oklab, var(--c2) 50%, var(--c3)) 36%, transparent 70%),
    radial-gradient(ellipse 24% 20% at 26% 30%, var(--c1) 0%, transparent 70%);
  filter: blur(48px);
  opacity: calc(var(--blob-op) * 0.8);
  animation: drift-e 21s ease-in-out infinite alternate;
}

.b6 { /* soft paper-white bloom (glow) */
  width: 46vmax; height: 36vmax; left: 8vw; top: 18vh;
  background:
    radial-gradient(ellipse 40% 38% at 50% 50%, var(--c8) 0%, color-mix(in oklab, var(--c8) 60%, transparent) 40%, transparent 70%);
  filter: blur(60px);
  mix-blend-mode: var(--blend-glow);
  opacity: 0.7;
  animation: drift-f 27s ease-in-out infinite alternate;
}

.b7 { /* lilac / blue thread, slow rotation, narrow ellipse */
  width: 70vmax; height: 16vmax; left: 10vw; top: 58vh;
  background:
    radial-gradient(ellipse 46% 40% at 50% 50%, var(--c4) 0%, color-mix(in oklab, var(--c4) 50%, var(--c6)) 40%, transparent 72%);
  filter: blur(44px);
  opacity: calc(var(--blob-op) * 0.62);
  animation: spin-drift 31s linear infinite;
}

.b8 { /* small, sharper gold accent — the "printed spot" */
  width: 20vmax; height: 16vmax; right: 18vw; top: 14vh;
  background:
    radial-gradient(ellipse 44% 46% at 46% 50%, var(--c6) 0%, color-mix(in oklab, var(--c6) 55%, var(--c1)) 34%, transparent 66%),
    radial-gradient(ellipse 20% 22% at 70% 64%, var(--c8) 0%, transparent 70%);
  filter: blur(26px);
  opacity: calc(var(--blob-op) * 0.7);
  animation: drift-g 14s ease-in-out infinite alternate;
}

/* 3 — sharper light: ring sweep, shadow fold, hotspot */
.l1 { /* partial light ring (crescent) — sharper falloff, rotates */
  width: 90vmax; height: 90vmax; left: calc(50% - 45vmax); top: calc(50% - 45vmax);
  background: radial-gradient(circle at 50% 50%, transparent 41%, var(--hi) 46.5%, transparent 53%);
  -webkit-mask-image: conic-gradient(from 0deg, transparent 0deg, #000 50deg, #000 95deg, transparent 150deg, transparent 360deg);
          mask-image: conic-gradient(from 0deg, transparent 0deg, #000 50deg, #000 95deg, transparent 150deg, transparent 360deg);
  filter: blur(18px);
  mix-blend-mode: soft-light;
  opacity: var(--light-op);
  animation: ring-turn 46s linear infinite;
}

.l2 { /* diagonal shadow fold, like light falling across a print */
  width: 160vmax; height: 34vmax; left: calc(50% - 80vmax); top: 52vh;
  background: linear-gradient(180deg, transparent 0%, var(--shade) 46%, var(--shade) 54%, transparent 100%);
  filter: blur(36px);
  mix-blend-mode: multiply;
  opacity: var(--shadow-op);
  transform: rotate(-14deg);
  animation: fold 24s ease-in-out infinite alternate;
}

.l3 { /* tight hotspot (lens bloom) */
  width: 26vmax; height: 20vmax; left: 54vw; top: 20vh;
  background: radial-gradient(ellipse 50% 50% at 50% 50%, var(--hi) 0%, color-mix(in oklab, var(--hi) 40%, transparent) 22%, transparent 48%);
  filter: blur(14px);
  mix-blend-mode: var(--blend-glow);
  opacity: calc(var(--light-op) * 0.9);
  animation: drift-h 18s ease-in-out infinite alternate;
}

/* 4 — vignette + sheen: photographed-print edges */
.fh-vignette {
  inset: 0;
  background:
    radial-gradient(ellipse 120% 95% at 46% 42%, transparent 52%, color-mix(in oklab, var(--shade) 70%, transparent) 100%),
    linear-gradient(118deg, color-mix(in oklab, var(--hi) 30%, transparent) 0%, transparent 34%, transparent 70%, color-mix(in oklab, var(--shade) 25%, transparent) 100%);
  opacity: var(--vig-op);
  will-change: auto;
}

/* 5 — readability scrim: very soft fields under header/footer rows */
.fh-scrim {
  inset: 0;
  background:
    linear-gradient(180deg,
      color-mix(in oklab, var(--scrim-c) 100%, transparent) 0,
      transparent 16%, transparent 82%,
      color-mix(in oklab, var(--scrim-c) 100%, transparent) 100%),
    radial-gradient(ellipse 60% 14% at 50% calc(50% - 6rem), color-mix(in oklab, var(--scrim-c) 70%, transparent), transparent 100%);
  opacity: var(--scrim-a);
  will-change: auto;
}

/* 6 — analog grain: PNG tile (no SVG feTurbulence — Safari/compositor-safe) */
.fh-grain {
  inset: -40%;
  background-image: url("grain.png");
  background-size: 180px 180px;
  background-repeat: repeat;
  mix-blend-mode: soft-light;
  opacity: var(--grain-op);
  animation: grain 9s steps(10) infinite;
  pointer-events: none;
  image-rendering: auto;
}

/* ---------- motion paths (all different speeds / directions) ---------- */

@keyframes drift-a {
  0%   { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
  35%  { transform: translate3d(6vw, 4vh, 0) rotate(8deg) scale(1.08); }
  70%  { transform: translate3d(2vw, 9vh, 0) rotate(-4deg) scale(0.96); }
  100% { transform: translate3d(9vw, 2vh, 0) rotate(12deg) scale(1.12); }
}

@keyframes drift-b {
  0%   { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
  40%  { transform: translate3d(-8vw, 6vh, 0) rotate(-10deg) scale(1.1); }
  100% { transform: translate3d(-4vw, -7vh, 0) rotate(6deg) scale(0.94); }
}

@keyframes drift-c {
  0%   { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
  50%  { transform: translate3d(10vw, -6vh, 0) rotate(14deg) scale(1.14); }
  100% { transform: translate3d(4vw, -12vh, 0) rotate(-6deg) scale(1.02); }
}

@keyframes drift-d {
  0%   { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
  45%  { transform: translate3d(-12vw, -4vh, 0) rotate(-12deg) scale(1.16); }
  100% { transform: translate3d(-5vw, -10vh, 0) rotate(8deg) scale(0.92); }
}

@keyframes drift-e {
  0%   { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
  30%  { transform: translate3d(-14vw, 8vh, 0) rotate(20deg) scale(1.2); }
  65%  { transform: translate3d(8vw, 12vh, 0) rotate(-14deg) scale(0.9); }
  100% { transform: translate3d(14vw, -6vh, 0) rotate(30deg) scale(1.1); }
}

@keyframes drift-f {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(22vw, 10vh, 0) scale(1.18); }
  100% { transform: translate3d(36vw, -4vh, 0) scale(0.92); }
}

@keyframes drift-g {
  0%   { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
  50%  { transform: translate3d(-10vw, 14vh, 0) rotate(-24deg) scale(1.25); }
  100% { transform: translate3d(-22vw, 4vh, 0) rotate(18deg) scale(0.85); }
}

@keyframes drift-h {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(-16vw, 18vh, 0) scale(1.3); }
  100% { transform: translate3d(-34vw, 6vh, 0) scale(0.9); }
}

@keyframes spin-drift {
  0%   { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
  50%  { transform: translate3d(-6vw, -10vh, 0) rotate(180deg) scale(1.15); }
  100% { transform: translate3d(0, 0, 0) rotate(360deg) scale(1); }
}

@keyframes ring-turn {
  to { transform: rotate(-360deg); }
}

@keyframes fold {
  0%   { transform: translate3d(0, 0, 0) rotate(-14deg); }
  100% { transform: translate3d(-4vw, -22vh, 0) rotate(-6deg); }
}

@keyframes breathe {
  0%, 100% { opacity: var(--breathe-lo, 0.45); }
  50%      { opacity: var(--breathe-hi, 0.85); }
}

@keyframes grain {
  0%   { transform: translate(0, 0); }
  15%  { transform: translate(-3%, 2%); }
  30%  { transform: translate(2%, -4%); }
  45%  { transform: translate(-1%, 5%); }
  60%  { transform: translate(4%, 1%); }
  75%  { transform: translate(-4%, -2%); }
  90%  { transform: translate(1%, 3%); }
  100% { transform: translate(0, 0); }
}

/* ---------- UI on top of the atmosphere ---------- */

.mark {
  /* Solid like live: full ink, no watermark opacity / blend fade.
     Above atmosphere stacks (z 1–2); content stays higher. */
  z-index: var(--z-mark);
  opacity: 1;
  color: var(--ink-c);
  mix-blend-mode: normal;
  transition: color var(--duration-theme) ease; /* ink only — never fade opacity */
}

/* Keep type / chrome above the solid mark */
body > header,
body > main,
body > footer,
.notice {
  z-index: var(--z-chrome);
}

/*
  Made-panel: day plate (#eaeaea). No backdrop blur. Ink stays black.
*/
.made-panel {
  --sky: var(--day);
  --ink: 0, 0, 0;
  background: var(--panel-fill);
  color: rgb(var(--ink));
  border-color: rgb(var(--ink));
}

.made-chrome,
.made-status,
.made-controls,
.made-controls button {
  color: rgb(var(--ink));
  border-color: rgb(var(--ink));
}

.made-controls button:hover {
  background: rgb(var(--ink));
  color: rgb(var(--sky));
}

/* Contact stays open so the plate shows through.
   Pills carry their own light plate so they stay readable when the thread
   scrolls underneath the sticky row. */
.made-scroll > #contact,
.made-body > #contact {
  background: transparent;
}

.made-panel .chat-choices {
  background: transparent;
}

/* Pills: theme frost behind, plain black type (no theme tint on the text). The active one is always black. */
.made-panel .chip {
  border: 0;
  background: color-mix(in oklab, var(--ink-c) 16%, color-mix(in oklab, var(--sky-c) 72%, transparent));
  color: #000;
  -webkit-backdrop-filter: blur(20px) saturate(1.2);
          backdrop-filter: blur(20px) saturate(1.2);
  transition: background-color var(--duration-theme) ease, color var(--duration-theme) ease;
}

.made-panel .chip:hover {
  background: color-mix(in oklab, var(--ink-c) 24%, color-mix(in oklab, var(--sky-c) 80%, transparent));
}

.made-panel .chip[aria-pressed="true"] {
  background: #000;
  color: #fff;
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
}

/* Speed reader: light until it carries is-dark. */
.fh-section .read {
  background: #fff;
  color: #000;
}

.fh-section .read-progress,
.fh-section .read-line::before {
  background: #000;
}

.fh-section .read-orp {
  color: #000;
}

.fh-section .read .chip {
  border-color: #000;
  background: transparent;
  color: #000;
}

.fh-section .read .chip:hover,
.fh-section .read .chip[aria-pressed="true"]:not([data-read="shade"]) {
  background: #000;
  color: #fff;
}

.fh-section .read .chip:disabled:hover {
  background: transparent;
  color: #000;
}

.fh-section .read.is-dark {
  background: #000;
  color: #fff;
}

.fh-section .read.is-dark .read-progress,
.fh-section .read.is-dark .read-line::before {
  background: #fff;
}

.fh-section .read.is-dark .read-orp {
  color: #fff;
}

.fh-section .read.is-dark .chip {
  border-color: #fff;
  background: transparent;
  color: #fff;
}

.fh-section .read.is-dark .chip:hover,
.fh-section .read.is-dark .chip[aria-pressed="true"]:not([data-read="shade"]) {
  background: #fff;
  color: #000;
}

.fh-section .read.is-dark .chip:disabled:hover {
  background: transparent;
  color: #fff;
}

/* Directory pills (mail, close, project): theme frost, plain black type. Panel plate stays day. */
.fh-section .directory .chip {
  border: 0;
  background: color-mix(in oklab, var(--ink-c) 16%, color-mix(in oklab, var(--sky-c) 72%, transparent));
  color: #000;
  -webkit-backdrop-filter: blur(20px) saturate(1.2);
          backdrop-filter: blur(20px) saturate(1.2);
  transition: background-color var(--duration-theme) ease, color var(--duration-theme) ease;
}

.fh-section .directory .chip:hover {
  background: color-mix(in oklab, var(--ink-c) 24%, color-mix(in oklab, var(--sky-c) 80%, transparent));
  color: #000;
}

/* Incoming bubbles: border only, no sky fill */
.made-panel .bubble-in {
  background: transparent;
  color: rgb(var(--ink));
  border-color: rgb(var(--ink));
}

.made-panel .bubble-out {
  background: rgb(var(--ink));
  color: rgb(var(--sky));
  border-color: rgb(var(--ink));
}

.made-panel .text-zoom-btn {
  background: transparent;
  color: rgb(var(--ink));
  border-color: rgb(var(--ink));
}

.made-panel .text-zoom-btn:hover,
.made-panel .text-zoom-btn:hover:not(:disabled) {
  background: rgb(var(--ink));
  color: rgb(var(--sky));
}

.made-panel .text-zoom-btn:disabled:hover {
  background: transparent;
  color: rgb(var(--ink));
}

/* Page-level zoom (legal page): theme ink, no filled plates */
.text-zoom--page .text-zoom-btn,
.text-zoom--page .text-zoom-btn:disabled:hover {
  background: transparent;
  color: var(--ink-c);
  border-color: var(--ink-c);
}

.text-zoom--page .text-zoom-btn:hover:not(:disabled) {
  background: var(--ink-c);
  color: var(--sky-c);
}

.text-zoom--page {
  z-index: var(--z-chrome);
}

.notice {
  background: color-mix(in oklab, var(--sky-c) 62%, transparent);
  color: var(--ink-c);
  border-color: var(--ink-c);
  -webkit-backdrop-filter: blur(20px) saturate(1.2);
          backdrop-filter: blur(20px) saturate(1.2);
  transition: background-color var(--duration-theme) ease, color var(--duration-theme) ease, border-color var(--duration-theme) ease;
}

@media (min-width: 40.0625rem) {
  .notice {
    padding-top: var(--space-4);
    padding-bottom: var(--space-4);
  }
}

@media (max-width: 40rem) {
  /* fewer px of blur on small screens = cheaper, still soft */
  .b1, .b2 { filter: blur(52px); }
  .b3, .b4, .b6 { filter: blur(44px); }
}


/* Page chrome soft-fades with theme; panel stays locked to day/night above */
body,
body > header,
body > main,
body > footer,
body > header a,
body > main a,
body > footer a,
body > header button,
body > main button,
body > footer button {
  transition: color var(--duration-theme) ease, border-color var(--duration-theme) ease, background-color var(--duration-theme) ease, outline-color var(--duration-theme) ease;
}

/* ---------- reduced motion: freeze into a composed still ---------- */
@media (prefers-reduced-motion: reduce) {
  .fh-bg > * {
    animation: none !important;
    will-change: auto;
  }

  .b5 { transform: translate3d(-6vw, 6vh, 0) rotate(12deg) scale(1.1); }
  .b7 { transform: rotate(-8deg); }
  .l1 { transform: rotate(-40deg); }

  html,
  body,
  .fh-bg {
    transition: none;
  }
}

/* ---------- root v217: section above the atmosphere + mark ---------- */
body.fh-section .made-panel {
  z-index: var(--z-section);
}

/* Theme switch in the section's right column (styled like DE/EN) */
.theme-switch {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-4);
  margin: 0 0 var(--space-8);
  line-height: var(--leading);
}

.theme-switch-label {
  margin-right: var(--space-8);
}

.theme-switch-btn {
  padding: 0 var(--space-4);
  border: 0;
  border-radius: 0;
  background: transparent;
  color: rgb(var(--ink));
  font: inherit;
  font-size: var(--fh-fs);
  line-height: var(--leading);
  opacity: 0.45;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.theme-switch-btn:first-of-type {
  padding-left: 0;
}

.theme-switch-btn:hover {
  opacity: 1;
  background: rgb(var(--ink));
  color: rgb(var(--sky));
}

.theme-switch-btn[aria-pressed="true"] {
  opacity: 1;
  cursor: default;
}

.theme-switch-btn[aria-pressed="true"]:hover {
  background: transparent;
  color: rgb(var(--ink));
}

.theme-switch-btn:focus-visible {
  outline: 1px solid rgb(var(--ink));
  outline-offset: 2px;
}

.theme-switch-sep {
  opacity: 0.45;
}

/* ---------- v218: FF:HH ticker clip hardening ----------
   With the blur atmosphere the page has many composited layers (fixed .fh-bg stacks with
   will-change: transform, .mark at z 3). WebKit/Safari can then fail to apply overflow:hidden
   to the composited, animated .reel, so rows above/below leak out of the slot.
   clip-path + mask + paint containment make each slot (and the h1) a hard clip. */
body.fh-section h1,
body.fh-section h1 .slot {
  overflow: hidden;
  contain: paint;
  clip-path: inset(0);
  -webkit-mask-image: linear-gradient(#000, #000);
          mask-image: linear-gradient(#000, #000);
}

/* ---------- v218: right column foot: upcoming projects + Legal Info (left) / Kontakt (right) ---------- */
.fh-section .section-foot {
  margin-top: var(--space-32);
}

.fh-section .meta-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-16);
  margin-top: var(--space-8);
}

@media (min-width: 64rem) {
  .fh-section .made-scroll > #contact {
    display: flex;
    flex-direction: column;
  }

  .fh-section .section-foot {
    margin-top: auto;
    padding-top: var(--space-32);
  }
}

/* Diagnosis switch: ?calm=ink,anim,fly,blur (or ?calm=all) turns a layer off to find a flicker. */
html.calm-ink p, html.calm-ink h1, html.calm-ink h2, html.calm-ink h3, html.calm-ink li, html.calm-ink .read-line { filter: none !important; }
html.calm-anim .fh-bg *, html.calm-anim .fh-bg { animation: none !important; }
html.calm-blur .fh-bg * { filter: none !important; }
html.calm-fly .fh-fly { display: none !important; }

/* Night and dusk: the frost behind inactive pills is dark, so black type reaches only 1.7:1 (night) and 2.2:1 (dusk).
   Light type reaches 8:1 or more.
   The active pill stays black on white. */
html[data-fh-bg="night"] .made-panel .chip:not([aria-pressed="true"]),
html[data-fh-bg="night"] .fh-section .foot-drops .more-btn,
html[data-fh-bg="night"] .fh-section .directory .chip,
html[data-fh-bg="night"] .fh-section .directory .chip:hover,
html[data-fh-bg="dusk"] .made-panel .chip:not([aria-pressed="true"]),
html[data-fh-bg="dusk"] .fh-section .foot-drops .more-btn,
html[data-fh-bg="dusk"] .fh-section .directory .chip,
html[data-fh-bg="dusk"] .fh-section .directory .chip:hover {
  color: var(--ink-c);
}