/* The work (#made-panel) is a full-width in-flow section that peeks into the first
   screen. The directory (#directory) is a sheet that slides in from the right.
   Loaded after styles.css; everything is scoped to body.fh-section. */

:root {
  /* First screen shows the chip row and the opening lines, cut off at the
     bottom edge so the sheet reads as continuing. */
  --fh-peek-h: clamp(12rem, 22svh, 18rem);
}

/* future:hours sits top left. Each word reels like the old letter ticker. */
.fh-section h1 {
  grid-column: 1 / 4;
  justify-self: start;
  justify-content: flex-start;
  width: max-content;
  max-width: 100%;
  column-gap: 0.08em;
}

.fh-section h1 .slot {
  width: max-content;
}

.fh-section h1 .reel {
  width: max-content;
}

.fh-section h1 .reel b {
  width: max-content;
  justify-content: flex-start;
  white-space: nowrap;
}

/* ---------- Hero = first screen minus the peek ---------- */
.fh-section main {
  flex: none;
  /* --fh-head / --fh-peek are measured in section.js (fallbacks for no-JS) */
  min-height: calc(100svh - var(--fh-head, calc(var(--space-page) + var(--space-32))) - var(--fh-peek-h));
}

/* ---------- The window: full width, in flow, fills the screen once entered ---------- */
.fh-section .made-panel {
  position: relative;
  z-index: var(--z-page);
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
  transform: none;
  flex: none;
  width: auto;
  max-width: none;
  height: auto;
  max-height: none;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0 calc(var(--space-page) * -1) var(--space-48); /* cancel body padding → edge to edge */
  border: 0;
  box-shadow: none;
  scroll-margin-top: 0;
}

/* Desktop: half a screen is enough; phones keep the full screen. Longer copy still grows it. */
@media (min-width: 40.01rem) {
  .fh-section .made-panel {
    min-height: 50vh;
    min-height: 50dvh;
  }
}

.fh-section .made-panel.is-peek {
  cursor: pointer;
}

.fh-section .made-panel.is-peek * {
  cursor: pointer !important;
}

/* Scroll hint: gentle bob while the page is at the top.
   Animates `top` (panel is position: relative), not transform: a transform
   would trap the fixed Readfast + Menu pills inside the panel on phones. */
.fh-section .made-panel.is-bobbing {
  animation: fh-peek-bob var(--duration-peek) ease-in-out infinite;
}

@keyframes fh-peek-bob {
  0%,
  100% {
    top: 0;
  }
  50% {
    top: calc(var(--space-8) * -1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .fh-section .made-panel.is-bobbing {
    animation: none;
  }
}

/* Background logo is parked (hidden on .mark). display:flex would otherwise win. */
.fh-section .mark[hidden] {
  display: none;
}

.fh-section .made-status {
  padding-left: var(--space-page);
  padding-right: var(--space-page);
  border-top: 0;
}

.fh-section .made-body {
  display: flex;
  flex-direction: column;
  flex: 1 0 auto;
  height: auto;
  max-height: none;
  overflow: visible !important;
  overscroll-behavior: auto;
  touch-action: auto;
}

.fh-section .band-foot {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-16);
  padding: calc(var(--space-page) * 3) var(--space-page) var(--space-page);
  --ink: 0, 0, 0;
  color: rgb(var(--ink));
}

.fh-section .band-mail {
  border: 0;
  background: #000;
  color: rgb(var(--day));
  text-decoration: none;
}

.fh-section .band-mail:hover {
  text-decoration: none;
  opacity: 0.72;
}

.fh-section .band-line {
  position: relative;
  margin: 0;
  max-width: min(40em, 100%);
  font-size: var(--fh-display-fs);
  white-space: pre-line;
}

/* Blinking square in place of the "→" (lang.js adds .has-bullet). Same blink as the status caret.
   Cap height of Intratopia (H = 0.7275em), sitting on the baseline. */
.fh-section .has-bullet::before {
  content: "";
  display: inline-block;
  width: 0.7275em;
  height: 0.7275em;
  margin-right: 0.3em;
  vertical-align: baseline;
  background-color: currentColor;
  animation: status-caret 1s steps(1) infinite;
}

@media (prefers-reduced-motion: reduce) {
  .fh-section .has-bullet::before {
    animation: none;
  }
}

.fh-section .sheet-foot-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-8) var(--space-24);
  margin: 0;
  padding: 0;
  list-style: none;
}

.fh-section .band-foot a:not(.band-mail),
.fh-section .sheet-foot-meta a {
  text-decoration: underline;
  text-underline-offset: var(--underline-offset);
}

.fh-section .word-band .sheet-foot-meta {
  position: absolute;
  z-index: 1;
  right: 0;
  bottom: 0;
  left: 0;
  padding: var(--space-16) var(--space-page) var(--space-page);
  color: #000;
}

.fh-section .made-scroll {
  flex: none;
  padding: 0 var(--space-page) var(--space-16);
}

.fh-section #contact {
  scroll-margin-top: var(--space-page);
  border-top: 0;
  border-left: 0;
}

/* Speech: text only, same size as the closing band line (2.5×). One reply shows at a time. Topic names live on the nav pills. */
.fh-section .made-panel .bubble,
.fh-section .made-panel .bubble-in,
.fh-section .made-panel .bubble-out {
  border: 0;
  border-radius: 0;
  background: transparent;
  color: rgb(var(--ink));
  font-size: var(--fh-display-fs);
  font-weight: 600;
  white-space: pre-line;
}

/* Wide desktop: copy runs to two thirds of the width. Tablet and phones: full width (below). */
.fh-section .made-panel #info p.bubble {
  max-width: calc(100% * 2 / 3);
}

@media (max-width: 75rem) {
  .fh-section .made-panel #info p.bubble {
    max-width: 100%;
  }
}

/* Chip row sticks with the directory pill on its right. */
.fh-section .modal-tools {
  position: sticky;
  top: 0;
  z-index: var(--z-raised);
  display: flex;
  align-items: flex-start;
  gap: var(--space-8);
}

/* Desktop: actions unwrap into the chip row (Readfast + Menu on the right). */
.fh-section .modal-actions {
  display: contents;
}

.fh-section .modal-tools .chat-choices {
  position: static;
  flex: 1 1 auto;
  min-width: 0;
  order: 0;
}

/* Workflow dropdown: Logik to Übergabe behind one pill. Fixed, so the scrolling chip row cannot clip it. */
.fh-section .chip-group::after {
  content: " ▾";
}

.fh-section .chip-group[aria-expanded="true"]::after {
  content: " ▴";
}

.fh-section .chip-menu {
  position: fixed;
  z-index: calc(var(--z-raised) + 2);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  padding: 0;
}

.fh-section .chip-menu[hidden] {
  display: none;
}

.fh-section .chip-menu .chip {
  white-space: nowrap;
}

.fh-section .read-pill,
.fh-section .directory-pill {
  order: 1;
}

.fh-section .directory-pill {
  flex: none;
  white-space: nowrap;
  margin-top: var(--space-16);
  appearance: none;
  -webkit-appearance: none;
}

/* ---------- Directory: one sheet from the right ---------- */
.fh-section .directory {
  --sky: var(--day);
  --ink: 0, 0, 0;
  position: fixed;
  z-index: calc(var(--z-section) + 10);
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  width: min(28rem, calc(100% - var(--space-64)));
  margin: 0;
  padding: 0;
  border: 0;
  border-left: 1px solid rgb(var(--ink));
  background: var(--panel-fill);
  color: rgb(var(--ink));
  color-scheme: light;
  transform: translateX(100%);
  transition: transform var(--duration-settle) var(--ease-out);
  pointer-events: none;
  overflow: hidden;
}

.fh-section .directory.is-open {
  transform: translateX(0);
  pointer-events: auto;
}

.fh-section .directory-bar {
  display: flex;
  flex: none;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-8);
  padding: var(--space-16) var(--space-page) 0;
}

.fh-section .directory-bar .chip {
  display: inline-flex;
  align-items: center;
  appearance: none;
  -webkit-appearance: none;
}

.fh-section .directory-close {
  flex: none;
}

.fh-section .directory-scroll {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: var(--space-16) var(--space-page) var(--space-16);
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--ink), 0.4) transparent;
}

.fh-section .directory #contact {
  display: flex;
  flex-direction: column;
  flex: 1 0 auto;
  margin: 0;
  padding: 0;
  border: 0;
}

.fh-section .directory .profiles {
  grid-template-columns: 1fr;
}

.fh-section .directory .chip {
  border-color: rgb(var(--ink));
  background: rgb(var(--sky));
  color: rgb(var(--ink));
}

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

.fh-section .directory .made-status {
  border-top: 1px solid rgb(var(--ink));
  padding-left: var(--space-page);
  padding-right: var(--space-page);
}

@media (prefers-reduced-motion: reduce) {
  .fh-section .directory {
    transition: none;
  }
}

/* Cookie notice: one line, fixed to the viewport bottom */
.fh-section .notice {
  bottom: 0;
  z-index: calc(var(--z-section) + 2);
}

/* ---------- Mobile ---------- */
/* --bp-mobile (40rem) in tokens.css. @media cannot read custom properties. */
@media (max-width: 40rem) {
  :root {
    /* One chip row + opening lines; brand top, peek the lower half. */
    --fh-peek-h: clamp(17rem, 55svh, 26rem);
  }

  .fh-section header {
    row-gap: var(--space-8);
  }

  .fh-section main {
    align-items: center;
    justify-content: flex-start;
    padding-top: var(--space-16);
    padding-bottom: var(--space-16);
  }

  .fh-section .band {
    gap: var(--space-8);
  }

  /* One above the bands that follow, so the fixed Readfast + Menu stay on top.
     Beats theme.css `body.fh-section .made-panel`. */
  body.fh-section .made-panel.made-section {
    z-index: calc(var(--z-section) + 1);
  }

  .fh-section .made-panel {
    width: auto;
    margin: 0 calc(var(--space-page) * -1) var(--space-40);
    left: auto;
    right: auto;
  }

  /* Still a statement, but capped through --fh-display-fs on phone widths. */
  .fh-section .made-panel .bubble,
  .fh-section .made-panel .bubble-in,
  .fh-section .made-panel .bubble-out {
    font-size: var(--fh-display-fs);
    overflow-wrap: anywhere;
    hyphens: auto;
  }

  .fh-section .band-line,
  .fh-section .start-how,
  .fh-section .profile-role,
  .fh-section .profile-bio {
    overflow-wrap: anywhere;
    hyphens: auto;
  }

  .fh-section h1 {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }

  .fh-section .lead {
    display: none;
  }

  /* Actions in the hero, sticky + right, just above the modal; chips stick under. */
  .fh-section .modal-tools {
    position: static;
    flex-wrap: wrap;
    align-items: flex-start;
    align-content: flex-start;
    justify-content: flex-start;
    gap: 0;
    min-width: 0;
    width: calc(100% + (var(--space-page) * 2));
    max-width: none;
    margin-top: 0;
    margin-left: calc(var(--space-page) * -1);
    margin-right: calc(var(--space-page) * -1);
    padding: 0;
    background: transparent;
  }

  .fh-section .modal-actions {
    display: flex;
    order: -1;
    flex: 1 1 100%;
    justify-content: flex-end;
    gap: var(--space-8);
    box-sizing: border-box;
    width: 100%;
    width: auto;
    padding: 0;
    align-items: center;
    /* Menu: fixed top right on phones, stays put while scrolling. */
    position: fixed;
    right: var(--space-page);
    top: max(var(--space-16), env(safe-area-inset-top));
    z-index: calc(var(--z-raised) + 1);
    background: transparent;
  }

  /* Base .read-pill margin-top would make Menu stretch taller. */
  .fh-section .modal-actions .read-pill {
    margin-top: 0;
  }


  .fh-section .modal-tools .chat-choices {
    flex: 1 1 100%;
    order: 1;
    flex-wrap: nowrap;
    box-sizing: border-box;
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    max-width: none;
    margin: 0;
    padding: var(--space-16) calc(var(--space-page) + 5.5rem) var(--space-8) var(--space-page); /* room for the Menu pill */
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    touch-action: pan-x pan-y;
    /* The row settles on a chip edge instead of stopping mid-label. */
    scroll-snap-type: x proximity;
    scroll-padding-inline: var(--space-page);
    position: sticky;
    top: env(safe-area-inset-top);
    z-index: var(--z-raised);
    background: var(--panel-fill);
  }

  .fh-section .modal-tools .chat-choices .chip {
    scroll-snap-align: start;
  }

  .fh-section .read-pill,
  .fh-section .directory-pill {
    flex: none;
    margin-top: 0;
  }

  .fh-section .directory {
    width: 100%;
    border-left: 0;
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
  }

  .fh-section .directory-bar {
    flex-wrap: wrap;
  }

  .fh-section .directory-close {
    margin-left: auto;
  }

  .fh-section .made-status {
    padding-left: var(--space-page);
    padding-right: var(--space-24);
  }

  .fh-section .made-scroll {
    padding: 0 var(--space-page) var(--space-16);
  }

  .fh-section:has(.notice) .made-scroll {
    padding-bottom: calc(var(--space-40) + env(safe-area-inset-bottom));
  }

  .fh-section:has(.notice) .word-band .sheet-foot-meta {
    padding-bottom: calc(var(--space-40) + env(safe-area-inset-bottom));
  }

  /* Mobile plate foot: office left, Legal Info right. */
  .fh-section .word-band .sheet-foot-meta {
    flex-wrap: nowrap;
    justify-content: space-between;
    gap: var(--space-16);
  }

  .fh-section .word-band .sheet-foot-meta [data-i18n="footPlace"],
  .fh-section .word-band .sheet-foot-meta [data-i18n="footPhone"] {
    display: none;
  }

  /* Compact right-aligned cookie notice; tint matches the panel. Wraps so the Datenschutz link is never cut off. */
  .fh-section:has(.notice) .notice {
    left: auto;
    right: var(--space-page);
    width: max-content;
    max-width: calc(100% - (var(--space-page) * 2));
    font-size: 11px;
    line-height: 1.2;
    white-space: normal;
    background: color-mix(in oklab, var(--sky-c) 92%, var(--ink-c));
  }

  .fh-section:has(.notice) .notice p {
    white-space: normal;
  }

  .fh-section footer {
    margin-top: 0;
    padding-top: 0;
  }
}

/* ---------- Former footer (Legal Info / Kontakt / upcoming) inside the right column ---------- */
.fh-section body > footer,
body.fh-section > footer {
  display: none;
}

body.fh-section .made-panel {
  margin-bottom: 0;
}

/* Closing plate: halftone wordmark, full bleed, letters on the bottom padding. */
.fh-section .word-band {
  position: relative;
  z-index: var(--z-section);
  min-height: 100dvh;
  margin: 0 calc(var(--space-page) * -1) calc(var(--space-page) * -1);
  background: var(--panel-fill);
  overflow: hidden;
}

.fh-section .word-band-canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  cursor: none;
  touch-action: pan-y;
}

.fh-section .section-meta {
  margin-top: var(--space-16);
  padding-top: var(--space-16);
}

.fh-section .foot-pills {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-8);
  margin: 0 0 var(--space-8);
}

/* Credits +, Namche +, Case Study, Anfrage, Weiter/Zurück: plain underlined text, no pill. */
.fh-section .foot-pill {
  display: inline;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-size: var(--fh-fs);
  line-height: var(--leading);
  text-decoration: underline;
  text-underline-offset: var(--underline-offset);
  cursor: pointer;
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
}

.fh-section .foot-pill:hover {
  opacity: 0.6;
}

.fh-section .foot-pill[aria-expanded="true"] {
  text-decoration: none;
}

.fh-section .foot-pill:focus-visible {
  outline: var(--border);
  outline-offset: 2px;
}

.fh-section .foot-info {
  margin: 0 0 var(--space-8);
  max-width: 36ch;
}

.fh-section .foot-info[hidden] {
  display: none !important;
}

.fh-section .meta-item {
  margin: 0;
  line-height: var(--leading);
}

.fh-section .meta-link {
  display: inline;
  padding: 0;
  border: 0;
  background: none;
  color: rgb(var(--ink));
  font: inherit;
  font-size: var(--fh-fs);
  line-height: var(--leading);
  text-decoration: underline;
  text-underline-offset: var(--underline-offset);
  cursor: pointer;
}

.fh-section .meta-link:hover {
  opacity: 0.6;
}

/* Project film in the thread, and the zoom overlay. The project name lives in copy.js. */

.bubble-video {
  position: relative;
  width: min(40rem, 100%);
  padding: 0;
  overflow: hidden;
  line-height: 0;
  background: transparent;
  cursor: zoom-in;
}

.bubble-video .bubble-still {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  background: var(--color-media);
}

.bubble-mosaic .bubble-still {
  aspect-ratio: var(--embed-ratio, 1016 / 784);
}

.bubble-video:not(.is-playing) video,
.bubble-video:not(.is-playing) .mosaic-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
}

.bubble-video.is-playing .bubble-still {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
}

.bubble-video.is-playing video,
.bubble-video.is-playing .mosaic-frame {
  position: relative;
  z-index: 1;
}

.bubble-video > .censor-still {
  z-index: 2;
  display: grid;
  grid-template-rows: 1fr; /* one bar over the whole embed */
  padding: 0;
  pointer-events: none;
}

.bubble-video > .censor-still .censor {
  position: static;
  display: block;
  min-height: 0;
  background-color: rgb(var(--ink));
  box-shadow: none;
  border-radius: 0;
}

.bubble-video video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  background: var(--color-media);
}

.bubble-mosaic {
  position: relative;
}

.bubble-mosaic .mosaic-frame {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: var(--embed-ratio, 1016 / 784);
  border: 0;
  background: transparent;
  pointer-events: none;
}

.mosaic-zoom {
  position: absolute;
  inset: 0;
  margin: 0;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: zoom-in;
}

.mosaic-zoom:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

.project-mosaic .project-stack iframe {
  display: block;
  width: min(92vw, calc(88vh * var(--embed-rw, 1016) / var(--embed-rh, 784)));
  height: auto;
  aspect-ratio: var(--embed-ratio, 1016 / 784);
  max-height: 88vh;
  flex: none;
  border: 0;
  background: transparent;
  pointer-events: none;
}

.bubble-credit {
  align-self: flex-start;
  max-width: min(72ch, 100%);
  margin-top: 0;
  padding-top: var(--space-4);
  opacity: 0;
  font-size: var(--fh-fs);
  line-height: var(--leading);
}

.bubble-video.bubble-visible + .bubble-credit {
  opacity: 1;
}

/* Above the embed: visible with its own bubble, space below instead of above. */
.bubble-credit.bubble-credit-top.bubble-visible {
  opacity: 1;
  padding-top: 0;
  padding-bottom: var(--space-8);
}

.bubble-credit .credit-toggle {
  display: inline-flex;
}

.bubble-credit .project-credit[hidden] {
  display: none;
}

.bubble-credit .project-credit:not([hidden]) {
  margin-top: var(--space-8);
}

.bubble-credit .project-credit {
  font-size: inherit;
  line-height: inherit;
}

.bubble-credit .project-credit p {
  display: inline;
  margin: 0;
}

.bubble-credit .project-credit p + p::before {
  content: " ";
}

.project-open {
  position: fixed;
  z-index: var(--z-overlay);
  inset: var(--project-top, 0px) 0 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-page);
  background: var(--color-bg);
  color: var(--color-text);
  cursor: zoom-out;
  overflow: auto;
}

.project-stack {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: clamp(var(--space-24), 4vw, var(--space-56));
  max-width: 100%;
  cursor: zoom-out;
}

.project-stack video {
  display: block;
  width: auto;
  height: auto;
  max-width: min(92vw, calc(88vh * 4 / 5));
  max-height: 88vh;
  aspect-ratio: 4 / 5;
  object-fit: contain;
  flex: none;
  border: var(--border);
  border-radius: var(--radius-pill);
}

@media (max-width: 40rem) {
  .project-stack {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-16);
  }

  .project-stack video,
  .project-mosaic .project-stack iframe {
    max-width: 100%;
    max-height: 70vh;
  }
}

.project-credit {
  cursor: auto;
  text-align: left;
  font-size: var(--fh-fs);
}

.project-credit p {
  margin: 0 0 var(--space-8);
  line-height: 1.35;
}

.project-credit p:last-child {
  margin-bottom: 0;
}

/* Credits sit small under the project text. */
.project-credit p.credit-line {
  font-size: var(--fh-fs);
  line-height: 1.35;
}

.project-credit-title {
  font-family: var(--font);
}

/* Underlined like the footer links. */
.project-credit a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: var(--underline-offset);
  cursor: pointer;
}

.project-credit a:hover {
  opacity: 0.6;
}

/* ---------- Speed reader: one word, pivot fixed ---------- */

.fh-section .read-pill {
  flex: none;
  margin-top: var(--space-16);
  white-space: nowrap;
  appearance: none;
  -webkit-appearance: none;
}

.fh-section .read {
  position: fixed;
  z-index: var(--z-overlay);
  inset: 0;
  display: flex;
  flex-direction: column;
  padding:
    var(--space-page)
    var(--space-page)
    max(var(--space-page), env(safe-area-inset-bottom));
  background: var(--color-bg);
  color: var(--color-text);
}

.fh-section .read[hidden] {
  display: none;
}

@media (prefers-reduced-motion: no-preference) {
  .fh-section .read:not([hidden]) {
    animation: read-in 0.18s var(--ease-out);
  }
}

@keyframes read-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

html.is-reading {
  overflow: hidden;
}

.fh-section .read-progress {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--color-text);
  transform: scaleX(0);
  transform-origin: left center;
}

.fh-section .read-stage {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  width: 100%;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  overflow: hidden;
}

.fh-section .read-stage:focus {
  outline: none;
}

.fh-section .read-stage:focus-visible {
  outline: var(--border);
  outline-offset: var(--space-8);
}

.fh-section .read-kicker {
  min-height: 1.45em;
  font-size: var(--fh-fs);
  font-weight: var(--fh-weight);
  letter-spacing: var(--tracking-chrome);
  line-height: var(--leading);
}

.fh-section .read-line {
  position: relative;
  display: block;
  width: 100%;
  padding-top: 0.7em;
  text-align: center;
  font-family: var(--font);
  font-size: clamp(2.75rem, 9vw, 5.25rem);
  font-weight: 500;
  line-height: 1;
  font-variant-ligatures: none;
}

.fh-section .read-line::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: 1px;
  height: 0.42em;
  background: var(--orp);
  transform: translateX(-50%);
  pointer-events: none;
}

.fh-section .read-word {
  display: inline-block;
  white-space: pre;
}

@media (prefers-reduced-motion: no-preference) {
  .fh-section .read-word.is-arriving {
    animation: read-arrive 64ms var(--ease-out);
  }

  .fh-section .read-progress {
    transition: transform 80ms linear;
  }
}

@keyframes read-arrive {
  from {
    opacity: 0.28;
  }
  to {
    opacity: 1;
  }
}

.fh-section .read-before,
.fh-section .read-orp,
.fh-section .read-after {
  white-space: pre;
}

.fh-section .read-before,
.fh-section .read-after {
  opacity: 0.5;
}

/* Pivot letter: heavy ink bleed, no underline, no bolder weight. */
.fh-section .read-orp {
  display: inline-block;
  color: var(--orp);
  font-weight: inherit;
  text-decoration: none;
  filter: url(#ink-bleed-heavy);
}

.fh-section .read-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
}

.fh-section .read-speed {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
}

.fh-section .read-wpm {
  min-width: 3ch;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.fh-section .read .chip:disabled {
  opacity: 0.35;
  cursor: default;
}

.fh-section .read .chip:disabled:hover {
  background: rgb(var(--sky));
}

/* Small case-study link under the Namche text. */
.bubble-credit.bubble-study.bubble-visible {
  opacity: 1;
  font-size: var(--fh-fs); /* same size as the pills */
}

/* ---------- "Projekt starten" form (start.js) ---------- */
.start {
  --st-ink: 0, 0, 0;
  position: fixed;
  z-index: calc(var(--z-overlay) + 5);
  inset: 0;
  display: flex;
  flex-direction: column;
  background: rgb(var(--day));
  color: rgb(var(--st-ink));
  font: var(--fh-weight) var(--fh-fs) / var(--leading) var(--font);
}

.start[hidden] {
  display: none;
}

html.start-open {
  overflow: hidden;
}

.start-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
  padding: var(--space-page) var(--space-page) 0;
}

.start-pill,
.start-chip {
  display: inline-block;
  padding: var(--space-4) var(--space-8);
  border: 0;
  border-radius: var(--radius-pill);
  font: inherit;
  line-height: var(--leading);
}

.start-pill,
.start-send {
  background: #000;
  color: rgb(var(--day));
}

.start-chip {
  cursor: pointer;
}

.start-close {
  background: rgba(var(--st-ink), 0.08);
  color: inherit;
}

.start-close:hover,
.start-send:hover:not(:disabled) {
  opacity: 0.72;
}

.start-send:disabled {
  opacity: 0.5;
  cursor: default;
}

.start-chip:focus-visible,
.start input:focus-visible,
.start textarea:focus-visible {
  outline: 1px solid #000;
  outline-offset: 2px;
}

.start-scroll {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: var(--space-48) var(--space-page) max(var(--space-page), env(safe-area-inset-bottom));
}

.start-lead {
  max-width: min(28em, 100%);
  margin: 0 0 var(--space-40);
  font-size: var(--fh-display-fs);
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.start-form {
  display: grid;
  gap: var(--space-16);
  max-width: 36rem;
}

.start-field {
  display: grid;
  gap: var(--space-4);
}

.start-label {
  padding-left: var(--space-8);
}

.start input[type="text"],
.start input[type="email"],
.start textarea {
  width: 100%;
  padding: var(--space-8) var(--space-16);
  border: 1px solid #000;
  border-radius: var(--radius-pill);
  background: transparent;
  color: inherit;
  font: inherit;
  line-height: var(--leading);
}

.start textarea {
  min-height: 9rem;
  resize: vertical;
  border-radius: 1.2rem;
}

.start-trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.start-consent {
  display: flex;
  align-items: flex-start;
  gap: var(--space-8);
  padding-left: var(--space-8);
}

.start-consent input {
  flex: none;
  width: 1em;
  height: 1em;
  margin-top: 0.25em;
  accent-color: #000;
}

.start-consent a,
.start-done a {
  text-decoration: underline;
  text-underline-offset: var(--underline-offset);
}

.start-msg {
  min-height: var(--leading);
  margin: 0;
  padding-left: var(--space-8);
}

.start-send {
  justify-self: start;
}

.start-done-title {
  margin: 0 0 var(--space-8);
  font-size: var(--fh-display-fs);
  line-height: 1.25;
}

.start-done-text {
  margin: 0;
}

/* ---------- Workflow scheme: connected row of pills ---------- */
.fh-section .flow {
  margin-top: var(--space-16);
  opacity: 0;
  transition: opacity var(--duration-settle) var(--ease-out);
}

.fh-section .about-intro.bubble-visible ~ .flow,
.fh-section .flow.bubble-visible {
  opacity: 1;
}

.fh-section .about-intro[hidden] ~ .flow {
  display: none;
}

.fh-section .flow ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4) 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* The global ink-bleed filter on li blurs the type. */
.fh-section .flow li {
  display: inline-flex;
  align-items: center;
  filter: none;
}

/* Arrow between two steps. */
.fh-section .flow li:not(:last-child)::after {
  content: "→";
  padding: 0 var(--space-8);
  font-size: var(--fh-fs);
  line-height: var(--leading);
}

/* Steps are plain underlined text, like the credits links; the current one is not underlined. */
.fh-section .flow-step {
  display: inline;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-size: var(--fh-fs);
  line-height: var(--leading);
  text-decoration: underline;
  text-underline-offset: var(--underline-offset);
  white-space: nowrap;
  cursor: pointer;
}

.fh-section .flow-step:hover {
  opacity: 0.6;
}

.fh-section .flow-step[aria-current="step"] {
  text-decoration: none;
  cursor: default;
}

.fh-section .flow-step[aria-current="step"]:hover {
  opacity: 1;
}

.fh-section .flow-step:focus-visible {
  outline: var(--border);
  outline-offset: 2px;
}

/* Back left, next right, under the topic text. */
.fh-section .flow-go {
  display: flex;
  justify-content: space-between;
  gap: var(--space-16);
  margin-top: var(--space-8);
}

.fh-section .flow-go .flow-next {
  margin-left: auto;
}

/* Links that sit inside <p> keep their type sharp. */
.fh-section .foot-pill,
.fh-section .chip,
.fh-section .flow-step,
.fh-section p:has(> a.pill-link),
.fh-section p.credit-study {
  filter: none;
}

.fh-section a.pill-link {
  text-decoration: underline;
}

.fh-section a.pill-link:hover {
  opacity: 0.6;
}

.bubble-credit .project-credit p.credit-study {
  display: block;
  margin-top: var(--space-8);
}

/* Hero link under the offer line, underlined like "Humans". */
.band .col p a {
  text-decoration: underline;
  text-underline-offset: var(--underline-offset);
}

/* Namche text: "Case Study →" and "Credits +" side by side, credits unfold below. */
.bubble-study .study-row,
.bubble-credit-top .study-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-8) var(--space-24);
  margin: 0;
}

.bubble-study .study-credit {
  display: block;
  margin: var(--space-8) 0 0;
  max-width: 60ch;
}

/* Speed reader: stronger ink bleed on the whole word, heaviest on the pivot letter. */
.fh-section .read-line {
  filter: url(#ink-bleed-read);
}

/* Speed reader: Schließen sits top right, the other controls stay at the bottom. */
.fh-section .read [data-read="close"] {
  position: absolute;
  top: var(--space-page);
  right: var(--space-page);
  z-index: 2;
}

/* Speed reader on phones: word 25% smaller (was clamp(2.75rem, 9vw, 5.25rem)). */
@media (max-width: 40rem) {
  .fh-section .read-line {
    font-size: clamp(2.0625rem, 6.75vw, 3.9375rem);
  }
}

/* Back to top: phones only, a pill in the footer. */
.fh-section .to-top {
  display: none;
}

@media (max-width: 40rem) {
  .fh-section .to-top {
    display: inline-flex;
    align-self: flex-start;
    margin: var(--space-16) 0 0;
  }
}

/* Ticker FUTURE:HOURS: heavier ink bleed, same filter as the speed reader. */
/* Ticker ink bleed without an SVG filter: filters on the animated reel drop out in some browsers
   while it moves. Stroke + soft shadows are plain text paint, so the bleed stays on the whole time. */
body > header h1 {
  filter: none;
}

body > header h1 .reel b,
body > header h1 .colon {
  -webkit-text-stroke: 0.45px currentColor;
  paint-order: stroke fill;
  text-shadow:
    0 0 0.6px currentColor,
    0 0 1.6px currentColor,
    0 0 3px color-mix(in srgb, currentColor 55%, transparent);
}


/* Menu bar: Schreiben and Readfast sit together on the left, level with Schließen on the right. */
.fh-section .directory-bar > :first-child { order: 1; }

.fh-section .directory-bar .read-pill {
  order: 2;
  margin: 0;
}

.fh-section .directory-bar .directory-close {
  order: 3;
  margin-left: auto;
}

/* To top: lifted above the footer line (the footer meta is absolutely placed). */
@media (max-width: 40rem) {
  .fh-section .word-band .to-top {
    position: absolute;
    z-index: 2;
    right: var(--space-page);
    bottom: calc(var(--space-page) + 6rem + env(safe-area-inset-bottom));
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    color: #000;
    font-size: var(--fh-fs);
    text-decoration: underline;
    text-underline-offset: var(--underline-offset);
    -webkit-backdrop-filter: none;
            backdrop-filter: none;
  }

  .fh-section:has(.notice) .word-band .to-top {
    bottom: calc(var(--space-page) + 8rem + env(safe-area-inset-bottom));
  }
}

.fh-section .directory-bar .menu-jump {
  order: 2;
}

.fh-section .directory-bar .read-pill {
  order: 3;
}

.fh-section .directory-bar .directory-close {
  order: 4;
}

/* Phones: the answers under the pills and every other text at that display size are 25% smaller. Pill labels keep their size. */
@media (max-width: 40rem) {
  .fh-section .made-panel .bubble,
  .fh-section .made-panel .bubble-in,
  .fh-section .made-panel .bubble-out,
  .fh-section .band-line,
  .fh-section .start-lead,
  .fh-section .start-done-title {
    font-size: calc(var(--fh-display-fs) * 0.75);
  }
}

/* upcoming + / Namche +: a grey dropdown list between the work section and the footer.
   Row labels and the opened text use the answer-text size. */
.fh-section .foot-drops {
  position: relative;
  z-index: var(--z-section);
  margin: 0 calc(var(--space-page) * -1) var(--space-48);
  padding: var(--space-32) var(--space-page);
  background: var(--panel-fill);
  --ink: 0, 0, 0; /* black on the grey, like the answers above */
  color: rgb(var(--ink));
}

.fh-section .foot-drops .drop-btn {
  display: block;
  width: 100%;
  padding: var(--space-16) 0;
  text-align: left;
  text-decoration: none;
  font-size: var(--fh-display-fs);
  font-weight: 600;
  line-height: 1.2;
}

.fh-section .foot-drops .drop-btn:hover {
  opacity: 1;
}

.fh-section .foot-drops .drop-body {
  max-width: 60ch;
  margin: 0 0 var(--space-24);
  font-size: calc(var(--fh-fs) * 24 / 14); /* opened text: 24px at the base step, the row labels stay large */
  font-weight: 600;
  line-height: 1.85;
}

.fh-section .foot-drops .drop-body p {
  margin: 0 0 var(--space-16);
}

.fh-section .foot-drops .drop-body a {
  text-decoration: underline;
  text-underline-offset: var(--underline-offset);
}

.fh-section .foot-drops-label {
  margin: 0 0 var(--space-16);
  font-size: var(--fh-fs);
  line-height: var(--leading);
}

.fh-section .foot-drops-note {
  max-width: 60ch;
  margin: var(--space-32) 0 0;
  font-size: var(--fh-fs);
  line-height: var(--leading);
}

.fh-section .foot-drops-note a {
  text-decoration: underline;
  text-underline-offset: var(--underline-offset);
}

@media (max-width: 40rem) {
  .fh-section .foot-drops .drop-btn {
    font-size: calc(var(--fh-display-fs) * 0.75);
  }
}

/* The grey sections run into each other and into the footer: no strip of background between them. */
.fh-section .made-panel,
.fh-section .foot-drops {
  margin-bottom: 0;
}

.fh-section .foot-drops {
  margin-top: -1px; /* no hairline seam from sub-pixel heights */
}

@media (max-width: 40rem) {
  .fh-section .made-panel,
  .fh-section .foot-drops {
    margin-bottom: 0;
  }
}

/* More air between the work section and the drop list. */
.fh-section .foot-drops {
  padding-top: var(--space-80);
}

@media (max-width: 40rem) {
  .fh-section .foot-drops {
    padding-top: var(--space-64);
  }
}

/* Menu refinements: compact signature and a native theme selector. */
body.fh-section .directory .made-status { flex-wrap: wrap; }
body.fh-section .directory .made-status-left { flex: 0 0 auto; overflow: visible; }
body.fh-section .directory .made-status-left .partner-logo--wide { width: calc(var(--space-32) * 1.2); height: auto; flex: none; }
body.fh-section .directory .made-status-right { margin-left: auto; }
body.fh-section .directory .theme-select {
  appearance: none;
  -webkit-appearance: none;
  font: inherit;
  color: var(--edition-ink);
  background-color: var(--edition-chip);
  background-image: linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor);
  background-size: .6em 1px, 1px .6em;
  background-position: right var(--space-8) center;
  background-repeat: no-repeat;
  border: 0;
  border-radius: 0;
  padding: var(--space-4) calc(var(--space-16) + .6em) var(--space-4) var(--space-8);
  max-width: 100%;
  color-scheme: normal;
}
@media (max-width: 40rem) {
  body.fh-section .directory { font-size: calc(var(--fh-fs) * 1.07); }
  body.fh-section .directory :is(.chip, .theme-select, .lang-switch-btn, .text-zoom-btn) {
    font-size: calc(var(--fh-fs) * 1.07);
    min-height: var(--space-32);
  }
  body.fh-section .directory .made-status { font-size: calc(var(--fh-fs) * 1.07); }
}
body.fh-section .directory .lang-switch {
  gap: var(--space-4);
  border: 0;
  border-radius: 0;
}
body.fh-section .directory .lang-switch-btn,
body.fh-section .directory .lang-switch-btn:hover {
  min-width: var(--space-32);
  min-height: var(--space-32);
  padding: var(--space-4);
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--edition-ink);
  opacity: 1;
  text-decoration: none;
}
body.fh-section .directory .lang-switch-btn[aria-pressed="true"] {
  text-decoration: underline;
  text-underline-offset: .2em;
}
body.fh-section .directory .lang-switch-btn:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

body.fh-section .directory .theme-select:hover { background-color: var(--edition-hover); }
body.fh-section .directory .theme-select:focus-visible {
  outline: 2px solid var(--edition-ink);
  outline-offset: 2px;
}

body.fh-section #made-panel .flow-choices > .flow-action-first { margin-left: 0; }

/* Mobile actions need a full touch target even when their text highlight is small. */
@media (max-width: 40rem) and (pointer: coarse) {
  body.fh-section :is(.chip, .info-open, .meta-link, .pill-link, .foot-pill,
    .flow-mini, .flow-cta-btn, .flow-sub-link, .band-mail,
    [data-i18n="heroStart"], .notice-ok),
  body.fh-section .directory :is(.chip, .lang-switch-btn, .text-zoom-btn, .theme-select),
  body.fh-section .directory :is(.profile-bio, a.partner-link),
  body.fh-section .notice a,
  body.fh-section .sheet-foot-meta a {
    display: inline-flex;
    align-items: center;
    min-height: var(--space-48);
    min-width: var(--space-48);
    box-sizing: border-box;
    padding-block: max(0px, calc((var(--space-48) - 1lh) / 2)) !important;
    background-clip: content-box !important;
  }
}

@media (max-width: 40rem) and (pointer: coarse) {
  /* Match the inline palette rules, whose background shorthand resets clipping. */
  html body.fh-section :is(#made-panel, #projekte, #directory, #read, .word-band)
    :is(.chip, .flow-sub-link, .flow-step, .flow-mini, .flow-cta-btn),
  html body.fh-section :is(#made-panel, #projekte, #directory, #read, .word-band)
    :is(.chip, .flow-sub-link, .flow-step, .flow-mini, .flow-cta-btn):is(:hover, [aria-pressed="true"], [aria-current="true"], [aria-expanded="true"]),
  html body.fh-section > main :is(.info-open, [data-i18n="heroStart"]),
  html body.fh-section > .modal-actions #directory-open {
    background-clip: content-box !important;
  }
}

/* Show all theme choices directly in the menu. */
body.fh-section .directory .theme-switch {
  align-items: baseline;
  flex-direction: column;
  gap: var(--space-8);
}
body.fh-section .directory .theme-options {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
}
body.fh-section .directory .theme-options .chip[aria-pressed="true"] {
  background: var(--edition-ink);
  color: var(--edition-paper);
}

/* Mobile menu stays within thumb reach; reserve extra space at the page end. */
@media (max-width: 40rem) {
  html body.fh-section {
    padding-bottom: calc(var(--space-page) + var(--space-32) + env(safe-area-inset-bottom));
  }
  html body.fh-section > .modal-actions,
  html body.fh-section > .modal-actions.is-aligned-with-nav {
    top: auto;
    right: max(var(--space-32), env(safe-area-inset-right));
    bottom: calc(var(--space-32) + env(safe-area-inset-bottom));
  }
  html body.fh-section > .modal-actions #directory-open {
    font-size: calc(var(--fh-fs) * 1.5);
    line-height: 1.2;
  }
  html body.fh-section #made-panel .flow-choices { padding-right: 0; }
  html body.fh-section:has(.notice) .notice {
    bottom: calc(var(--space-32) + var(--space-48) + var(--space-16) + env(safe-area-inset-bottom));
  }
}

@media (max-width: 40rem) {
  html body.fh-section .word-band .sheet-foot-meta {
    padding-bottom: calc(var(--space-page) + var(--space-64) + env(safe-area-inset-bottom));
  }
}

/* ---------- v435 (Oct 2026) ---------- */
/* v437: section pills (.chat-choices / .flow-choices) are highlighted again on desktop (inline page styles apply);
   the no-fill look stays for phones only. Active = underline there, as the DE/EN switch. */
@media (max-width: 40rem) {
  html body.fh-section #made-panel .flow-choices > .chip,
  html body.fh-section #made-panel .flow-choices > .chip:is(:hover, :focus-visible, [aria-pressed="true"], [aria-current="true"]) {
    background: transparent !important;
    color: var(--edition-ink, #000) !important;
    box-shadow: none;
    text-decoration: none;
  }
  html body.fh-section #made-panel .flow-choices > .chip:is([aria-pressed="true"], [aria-current="true"]) {
    text-decoration: underline;
    text-underline-offset: .2em;
  }
  @media (hover: hover) {
    html body.fh-section #made-panel .flow-choices > .chip:hover {
      text-decoration: underline;
      text-underline-offset: .2em;
    }
  }
}

/* Without pill fills the sticky row keeps the panel colour, so text scrolling underneath stays out of the way. */
html body.fh-section #made-panel .modal-tools { background: var(--edition-paper, var(--panel-fill)); }

/* v437: the desktop Menu has its highlighted look again (inline page styles, as in v434). Only the phone "+" in the
   top bar drops the default fill here; its own paper pill is set further down. */
html body.fh-section > header #directory-open,
html body.fh-section > header #directory-open:is(:hover, :focus-visible, [aria-pressed="true"]) {
  background: transparent !important;
  box-shadow: none !important;
  text-decoration: none;
}

/* Phones (section.js adds html.fh-mbar-on): the FUTURE:HOURS ticker is a fixed top bar with the Menu "+",
   the directory opens inside that bar; the chip row becomes one chapter select fixed at the bottom. */
@media (max-width: 40rem) {
  html.fh-mbar-on body.fh-section > header {
    position: fixed !important;
    top: 0 !important;
    left: 0;
    right: 0;
    z-index: calc(var(--z-section) + 20);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0 var(--space-16);
    max-height: 100vh;
    max-height: 100dvh;
    margin: 0;
    padding: max(var(--space-page), env(safe-area-inset-top)) var(--space-page) var(--space-8);
    box-sizing: border-box;
    background: var(--edition-paper, var(--panel-fill));
    border-bottom: 1px solid var(--edition-ink, #000);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  html.fh-mbar-on body.fh-section > header h1 { margin: 0; flex: none; }
  html.fh-mbar-on body.fh-section > header h1 a { color: inherit; text-decoration: none; display: contents; }
  html.fh-mbar-on body.fh-section > header #directory-open {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    order: 0;
    margin: 0 0 0 auto;
    padding: 0;
    min-width: var(--space-48);
    min-height: var(--space-48);
    border: 0;
    border-radius: 0;
    background: transparent !important;
    color: var(--edition-ink, #000) !important;
    font-size: calc(var(--fh-fs) * 1.5);
    line-height: 1;
  }
  html.fh-mbar-on body.fh-section > header #directory-open .menu-plus { width: .716em; height: .716em; fill: currentColor; }
  html.fh-mbar-on body.fh-section > header #directory-open[aria-expanded="true"] .menu-plus rect + rect { display: none; }
  html.fh-mbar-on body.fh-section > .modal-actions { display: none !important; }
  html.fh-mbar-on body.fh-section > header > .directory {
    position: static;
    display: none;
    flex: 1 0 100%;
    width: auto;
    margin: var(--space-8) calc(var(--space-page) * -1) calc(var(--space-8) * -1);
    padding: 0;
    border: 0;
    border-top: 1px solid var(--edition-ink, #000);
    transform: none;
    transition: none;
    overflow: visible;
    z-index: auto;
    pointer-events: auto;
  }
  html.fh-mbar-on body.fh-section > header > .directory.is-open { display: flex; }
  html.fh-mbar-on body.fh-section > header > .directory:focus { outline: none; }
  html.fh-mbar-on body.fh-section > header > .directory .directory-scroll { flex: none; overflow: visible; }
  /* The hero's forced black text (homepage) must not reach the menu: it keeps the theme ink, pressed chips stay inverted. */
  html.fh-mbar-on body.fh-section > header > .directory,
  html.fh-mbar-on body.fh-section > header > .directory * { color: var(--edition-ink, #000) !important; }
  html.fh-mbar-on body.fh-section > header > .directory .theme-options .chip[aria-pressed="true"] { color: var(--edition-paper, #fbfaf7) !important; }
  /* service.html: the ticker gets the same paper mark as on the homepage hero. */
  html.fh-mbar-on body.fh-section > header.fh-mbar h1 {
    width: max-content;
    padding-inline: .1em;
    background: linear-gradient(#fbfaf7, #fbfaf7) center / 100% 1.05em no-repeat;
    color: #000;
  }
  html.fh-mbar-on body.fh-section .fh-mbar-spacer { display: block; flex: none; }
  /* Anchored sections land under the fixed bar. */
  html.fh-mbar-on body.fh-section :is(.flow-thread > .flow-block, .flow-thread > .flow-group, #projekte, #made-panel) {
    scroll-margin-top: calc(var(--fh-mbar-h, 4rem) + var(--space-8));
  }

  /* Chapter select instead of the chip row. */
  html.fh-mbar-on body.fh-section #made-panel .modal-tools { display: none; }
  html.fh-mbar-on body.fh-section .fh-chapters {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: calc(var(--z-section) + 19);
    display: flex;
    padding: var(--space-8) var(--space-page) max(var(--space-8), env(safe-area-inset-bottom));
    background: var(--edition-paper, var(--panel-fill));
    border-top: 1px solid var(--edition-ink, #000);
  }
  html.fh-mbar-on body.fh-section .fh-chapters .theme-select {
    appearance: none;
    -webkit-appearance: none;
    flex: 1 1 auto;
    min-height: var(--space-48);
    max-width: 100%;
    margin: 0;
    padding: 0 calc(var(--space-16) + .6em) 0 0;
    border: 0;
    border-radius: 0;
    font: inherit;
    font-size: calc(var(--fh-fs) * 1.5);
    line-height: 1.2;
    color: var(--edition-ink, #000);
    background-color: transparent;
    background-image: linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor);
    background-size: .6em 1px, 1px .6em;
    background-position: right 0 center, right .3em center;
    background-repeat: no-repeat;
    color-scheme: light;
  }
  html.fh-mbar-on body.fh-section .fh-chapters .theme-select:focus-visible { outline: 2px solid var(--edition-ink, #000); outline-offset: 2px; }
  html.fh-mbar-on body.fh-section { padding-bottom: calc(var(--fh-cbar-h, 4rem) + var(--space-16)) !important; }
  html.fh-mbar-on body.fh-section:has(.notice) .notice { bottom: calc(var(--fh-cbar-h, 4rem) + var(--space-8)) !important; }
}

/* Hero: offer and inquiry as two tight lines on phones too (touch target kept, highlight not stretched). */
@media (max-width: 40rem) and (pointer: coarse) {
  html body.fh-section > main [data-i18n="heroStart"] {
    display: inline;
    min-height: 0;
    min-width: 0;
    padding-block: 0 !important;
    position: relative;
  }
  html body.fh-section > main [data-i18n="heroStart"]::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: var(--space-48);
    transform: translateY(-50%);
  }
}

/* "Made by Humans": keep the space at the end of the prefix inside the inline-flex button (phones). */
.fh-section .info-open [data-i18n="madePrefix"] { white-space: pre; }

/* ---------- v436/v437: phone top bar without background; ticker and "+" pill each in a paper highlight strip ---------- */
@media (max-width: 40rem) {
  html.fh-mbar-on body.fh-section > header {
    justify-content: flex-start;
    gap: 0;
    background: transparent;
    border-bottom: 0;
    box-shadow: none;
  }
  /* v437: the "+" is its own highlighted pill on the right (same paper strip as the ticker); the ticker keeps its strip. */
  html.fh-mbar-on body.fh-section > header #directory-open {
    position: relative;
    margin: 0 0 0 auto;
    min-width: 0;
    padding: 0 .3em;
    font-size: var(--fh-fs);
    color: #000 !important;
    background: linear-gradient(#fbfaf7, #fbfaf7) center / 100% 1.05em no-repeat !important;
  }
  /* Full 48 px touch target around the small pill. */
  html.fh-mbar-on body.fh-section > header #directory-open::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: var(--space-48);
  }
}

/* ---------- v438 (Oct 2026) ---------- */
/* Desktop: the sticky chip row has no background of its own; the pills keep their highlight fill. */
html body.fh-section #made-panel .modal-tools { background: transparent; }
@media (min-width: 40.01rem) {
  html body.fh-section #made-panel .modal-tools .chat-choices { background: transparent; }
  /* section.js holds the row fixed at the top past the end of its column (down over Projekte and the footer). */
  html.fh-tools-pinned body.fh-section #made-panel { z-index: calc(var(--z-panel) + 1); }
  html.fh-tools-pinned body.fh-section #made-panel .modal-tools {
    position: fixed !important;
    top: 0 !important;
    right: auto;
    box-sizing: border-box;
  }
  html body.fh-section .fh-tools-spacer { display: block; flex: none; }
}
@media (max-width: 40rem) {
  html body.fh-section .fh-tools-spacer { display: none; }
}

/* v440: hero texts (ticker, lead, offer + inquiry, Made by Humans) are back at their pre-v438 size; the phone "+" with them. */

/* ---------- v439 (Oct 2026): service.html inquiry form inside "Projekt starten" (same fields + backend as /anfrage/) ---------- */
html body.fh-section .fh-inq { max-width: 40rem; padding-block: var(--space-32) var(--space-48); }
html body.fh-section .fh-inq-lead { margin: 0 0 var(--space-24); font-size: calc(var(--fh-fs) * 1.5); line-height: 1.35; }
html body.fh-section .fh-inq-form { display: grid; gap: var(--space-8); }
html body.fh-section .fh-inq-form label,
html body.fh-section .fh-inq-topics legend { display: block; margin: var(--space-16) 0 0; padding: 0; font-size: var(--fh-fs); line-height: 1.45; }
html body.fh-section .fh-inq-topics { margin: 0; padding: 0; border: 0; min-width: 0; }
html body.fh-section .fh-inq-topics legend { margin: 0 0 var(--space-8); }
html body.fh-section .fh-inq-pills { display: flex; flex-wrap: wrap; gap: var(--space-8); }
html body.fh-section .fh-inq-form .fh-inq-pill {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  margin: 0;
  padding: 0 .1em;
  font-size: calc(var(--fh-fs) * 1.5);
  line-height: 1.2;
  color: #000;
  background: #deddda;
  cursor: pointer;
  user-select: none;
}
html body.fh-section .fh-inq-pill input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
html body.fh-section .fh-inq-form .fh-inq-pill:has(input:checked) { background: #000; color: #fbfaf7; }
html body.fh-section .fh-inq-pill:has(input:focus-visible) { outline: 2px solid var(--edition-ink, #000); outline-offset: 4px; }
@media (hover: hover) and (pointer: fine) {
  html body.fh-section .fh-inq-form .fh-inq-pill:not(:has(input:checked)):hover { background: #c9c8c5; }
}
@media (pointer: coarse) {
  html body.fh-section .fh-inq-form .fh-inq-pill::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: var(--space-48); transform: translateY(-50%); }
  html body.fh-section .fh-inq-pills { row-gap: var(--space-16); }
}
html body.fh-section .fh-inq-form :is(input:not([type="checkbox"]), textarea) {
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  font: inherit;
  font-size: max(16px, var(--fh-fs));
  line-height: 1.45;
  color: #000;
  background: #eeede9;
  border: 1px solid #d0cfca;
  border-radius: 0;
  padding: .75rem;
}
html body.fh-section .fh-inq-form textarea { min-height: 10rem; resize: vertical; }
html body.fh-section .fh-inq-form :is(input:not([type="checkbox"]), textarea):focus { border-color: #000; outline: 1px solid #000; outline-offset: 0; background: #fbfaf7; }
html body.fh-section .fh-inq-form .fh-inq-send {
  justify-self: start;
  margin-top: var(--space-24);
  padding: 0 .1em;
  border: 0;
  border-radius: 0;
  font: inherit;
  font-size: calc(var(--fh-fs) * 1.5);
  line-height: 1.2;
  color: #fbfaf7;
  background: #000;
  cursor: pointer;
}
@media (pointer: coarse) {
  html body.fh-section .fh-inq-form .fh-inq-send { padding: .5em .4em; }
}
@media (hover: hover) and (pointer: fine) { html body.fh-section .fh-inq-form .fh-inq-send:hover { background: #333; } }
html body.fh-section .fh-inq-form .fh-inq-send:focus-visible { outline: 2px solid var(--edition-ink, #000); outline-offset: 4px; }
html body.fh-section .fh-inq-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
html body.fh-section .fh-inq-note { margin: var(--space-24) 0 0; font-size: var(--fh-fs); line-height: 1.45; opacity: .75; }
html body.fh-section .fh-inq-note a { color: inherit; text-underline-offset: .2em; }

/* ---------- v441 (Oct 2026): desktop Menu + rides at the right end of the sticky pill row, full pill size from the start.
   No small top-right state and no bottom-right placement; section.js feeds the row position (--menu-row-top). ---------- */
@media (min-width: 40.01rem) {
  html body.fh-section > .modal-actions,
  html body.fh-section > .modal-actions.is-aligned-with-nav {
    top: var(--menu-row-top, max(var(--space-page), env(safe-area-inset-top))) !important;
    right: var(--space-page);
    bottom: auto;
  }
  
  html body.fh-section > .modal-actions #directory-open,
  html body.fh-section > .modal-actions.is-aligned-with-nav #directory-open {
    font-size: calc(var(--fh-fs) * 1.5);
    line-height: 1.2;
  }
}

/* v440: FUTURE:HOURS ticker, strict clipping and no copy/paste noise. Each word slot is exactly one line tall
   (--fh-slot) and clips hard (overflow + clip-path + paint containment), so only one reel item shows at rest,
   whatever the size, zoom or breakpoint. The reel is decorative (aria-hidden); the h1 is labelled "Futurehours". */
html body.fh-section > header h1 .slot {
  overflow: hidden;
  clip-path: inset(0);
  contain: paint;
  -webkit-user-select: none;
  user-select: none;
}
html body.fh-section > header h1 .slot { height: var(--fh-slot); }
html body.fh-section > header h1 .reel b {
  flex: none;
  height: var(--fh-slot);
  overflow: hidden;
}
html body.fh-section > header h1 :is(.slot, .reel, .reel b, .colon) {
  -webkit-user-select: none;
  user-select: none;
}

/* v441: the Menu + stays hidden until section.js has placed it (no small top-right flash, any parent). */
html body.fh-section .modal-actions:not(.is-row-ready) { visibility: hidden !important; }

/* ---------- v442 (Oct 2026): phones, "Menu +" on the right of the bottom topics bar (same as the desktop topics row);
   the FUTURE:HOURS ticker stays alone in the top bar. ---------- */
@media (max-width: 40rem) {
  html.fh-mbar-on body.fh-section .fh-chapters { align-items: center; gap: var(--space-16); }
  html.fh-mbar-on body.fh-section .fh-chapters #directory-open {
    position: relative;
    display: inline-flex;
    align-items: baseline;
    flex: none;
    order: 2;
    margin: 0;
    padding: 0 .1em;
    min-width: 0;
    min-height: 0;
    border: 0;
    border-radius: 0;
    font-size: calc(var(--fh-fs) * 1.5);
    line-height: 1.2;
    white-space: nowrap;
    color: var(--edition-paper, #fbfaf7) !important;
    background: var(--edition-ink, #000) !important;
    box-shadow: none !important;
    background-clip: border-box !important;
  }
  /* 48 px touch target around the pill. */
  html.fh-mbar-on body.fh-section .fh-chapters #directory-open::after {
    content: "";
    position: absolute;
    left: -8px;
    right: -8px;
    top: 50%;
    height: var(--space-48);
    transform: translateY(-50%);
  }
}

/* ---------- v443 (Oct 2026) ---------- */
/* Phones: the FUTURE:HOURS ticker header is no longer fixed; it scrolls away with the page. Only while the menu
   panel (it opens under the ticker, triggered from "Menu +" in the bottom bar) is open does the header lie over the
   page as a full overlay, so the panel is always in view; the spacer then holds its place so nothing jumps. */
@media (max-width: 40rem) {
  html.fh-mbar-on body.fh-section > header {
    position: relative !important;
    top: auto !important;
    left: auto;
    right: auto;
    max-height: none;
    overflow: visible;
  }
  html.fh-mbar-on body.fh-section .fh-mbar-spacer { display: none; }
  html.fh-mbar-on body.fh-section > header:has(> .directory.is-open) {
    position: fixed !important;
    top: 0 !important;
    left: 0;
    right: 0;
    max-height: 100vh;
    max-height: 100dvh;
    overflow-y: auto;
    background: var(--edition-paper, var(--panel-fill));
    padding-bottom: calc(var(--fh-cbar-h, 4rem) + var(--space-16));
  }
  html.fh-mbar-on body.fh-section:has(> header > .directory.is-open) .fh-mbar-spacer { display: block; }
  html.fh-mbar-on body.fh-section .fh-chapters { z-index: calc(var(--z-section) + 21); }
  /* No fixed bar at the top any more: anchored sections land just below the viewport edge. */
  html.fh-mbar-on body.fh-section :is(.flow-thread > .flow-block, .flow-thread > .flow-group, #projekte, #made-panel) {
    scroll-margin-top: var(--space-16);
  }
}

/* ---------- v444 (Oct 2026) ---------- */
/* Ticker, hard clipping: each word slot is exactly one line (1em at line-height 1) and clips with overflow + clip-path,
   so only one reel word is visible and neighbours never show above or below the paper strip (1.05em), even mid-roll.
   The h1 keeps its former outer height (1.5em) through padding, so the hero layout does not move. */
html body.fh-section > header h1 {
  --fh-slot: 1em;
  box-sizing: border-box;
  height: 1.5em;
  padding-block: .25em;
  line-height: 1;
}
html body.fh-section > header h1 .slot {
  height: 1em !important;
  line-height: 1em !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip-path: inset(0) !important;
  contain: paint;
}
html body.fh-section > header h1 .reel b { height: 1em !important; line-height: 1; overflow: hidden; }

/* Phones, bottom bar (v443): calm and tidy. Transparent bar, only the pills carry the paper highlight (desktop pill
   style). Topics pill on the left fans out a vertical list of topic pills upwards; "Menu +" on the right.
   Touch targets ≥ 44 px, page-edge spacing, iPhone home bar respected. While the menu is open only "Menu ×" remains. */
@media (max-width: 40rem) {
  html.fh-mbar-on body.fh-section .fh-chapters {
    z-index: calc(var(--z-section) + 21);
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-16);
    padding: 0 max(var(--space-page), env(safe-area-inset-right)) max(var(--space-16), calc(env(safe-area-inset-bottom) + var(--space-8))) max(var(--space-page), env(safe-area-inset-left));
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    pointer-events: none;
  }
  html.fh-mbar-on body.fh-section .fh-chapters > * { pointer-events: auto; }
  html.fh-mbar-on body.fh-section .fh-topics { position: relative; display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
  html.fh-mbar-on body.fh-section :is(.fh-topics-toggle, .fh-topic),
  html.fh-mbar-on body.fh-section .fh-chapters #directory-open {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: .3em;
    margin: 0;
    padding: 0 .1em;
    min-width: 0;
    min-height: 0;
    border: 0;
    border-radius: 0;
    font: inherit;
    font-size: calc(var(--fh-fs) * 1.5);
    line-height: 1.2;
    white-space: nowrap;
    text-align: left;
    color: #000 !important;
    background: #fbfaf7 !important;
    background-clip: border-box !important;
    box-shadow: none !important;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  /* Active topic and open toggle: inverted, like the pressed pills on desktop. */
  html.fh-mbar-on body.fh-section .fh-topic[aria-current="true"],
  html.fh-mbar-on body.fh-section .fh-topic[aria-current="page"],
  html.fh-mbar-on body.fh-section .fh-topics-toggle[aria-expanded="true"] { color: #fbfaf7 !important; background: #000 !important; }
  /* Invisible 44 px touch targets. */
  html.fh-mbar-on body.fh-section :is(.fh-topics-toggle, .fh-topic)::after,
  html.fh-mbar-on body.fh-section .fh-chapters #directory-open::after {
    content: "";
    position: absolute;
    left: -6px;
    right: -6px;
    top: 50%;
    height: 44px;
    transform: translateY(-50%);
  }
  html.fh-mbar-on body.fh-section .fh-topics-list {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px; /* 25 px pill + 20 px gap = 45 px pitch, so the 44 px targets never overlap */
    margin: 0 0 20px;
    padding: 0;
    list-style: none;
    max-height: calc(100dvh - var(--space-48) * 3);
    overflow-y: auto;
  }
  html.fh-mbar-on body.fh-section .fh-topics-list[hidden] { display: none; }
  html.fh-mbar-on body.fh-section .fh-topics-list li { margin: 0; padding: 0; }
  html.fh-mbar-on body.fh-section .fh-chapters #directory-open { flex: none; margin-left: auto; }
  html.fh-mbar-on body.fh-section .fh-chapters #directory-open .menu-plus { width: .716em; height: .716em; fill: currentColor; flex: none; }
  html.fh-mbar-on body.fh-section :is(.fh-topics-toggle, .fh-topic, .fh-chapters #directory-open):focus-visible { outline: 2px solid var(--edition-ink, #000); outline-offset: 3px; }
  /* Menu open: only "Menu ×" stays. */
  html.fh-mbar-on body.fh-section .fh-chapters:has(#directory-open[aria-expanded="true"]) .fh-topics { display: none; }
  /* The open menu panel (header overlay) keeps room for the bar at its foot. */
  html.fh-mbar-on body.fh-section > header:has(> .directory.is-open) { padding-bottom: calc(var(--fh-cbar-h, 4rem) + var(--space-16)); }
}
@media (max-width: 40rem) {
  /* Same box for both bar pills, so Topics and "Menu +" sit on one line. */
  html.fh-mbar-on body.fh-section .fh-chapters { align-items: flex-end; }
  html.fh-mbar-on body.fh-section .fh-chapters :is(.fh-topics-toggle, #directory-open) {
    height: 1.2em !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 0 .1em !important;
    line-height: 1.2 !important;
    align-items: center !important;
    box-sizing: content-box !important;
  }
}

/* Phones, one shared edge (v444): ticker, copy, section labels, list rows and the bottom bar all start on the page
   edge (body padding); the list "+" marks, the "+" of "Menu +" and the cookie notice end on the same right edge.
   Highlight pills keep their paper padding but are pulled out by it, so their text sits on the edge. */
@media (max-width: 40rem) {
  html.fh-mbar-on body.fh-section > header:not(:has(> .directory.is-open)) { padding-left: 0 !important; padding-right: 0 !important; }
  html.fh-mbar-on body.fh-section > header h1 { margin-left: -.1em; }
  html.fh-mbar-on body.fh-section #info p.bubble { padding-left: 0; padding-right: 0; }
  html.fh-mbar-on body.fh-section .fh-chapters .fh-topics-toggle { margin-left: -.1em !important; }
  html.fh-mbar-on body.fh-section .hero-highlight { margin-left: -.1em; }
  html.fh-mbar-on body.fh-section .fh-chapters #directory-open { margin-right: -.1em !important; }
  /* Cookie notice: stacked above the bar with a gap; while it is shown the page gets room for both at its end. */
  html.fh-mbar-on body.fh-section:has(.notice) .notice { bottom: calc(var(--fh-cbar-h, 4rem) + var(--space-8)) !important; }
  html.fh-mbar-on body.fh-section:has(.notice) { padding-bottom: calc(var(--fh-cbar-h, 4rem) + var(--fh-notice-h, 6rem) + var(--space-16)) !important; }
}

/* ---------- v445 (Oct 2026) ---------- */
/* Phones: the topics / "Menu +" bar sits where the desktop topics row sits (top of the content panel, right after the
   hero) and is sticky from there, Topics on the left, "Menu +" on the right, no bar background. The FUTURE:HOURS
   ticker above still scrolls away. The topics list fans out downwards. The menu panel opens as the overlay under the
   bar (the bar stays on top of it). The cookie notice sits at the foot of the screen, and the page keeps room for it. */
@media (max-width: 40rem) {
  html.fh-mbar-on body.fh-section .fh-chapters {
    position: sticky !important;
    top: 0 !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    z-index: calc(var(--z-section) + 22) !important;
    align-items: center !important;
    margin: 0 0 var(--space-8);
    padding: var(--space-8) 0 !important;
  }
  html.fh-mbar-on body.fh-section .fh-topics { position: relative; }
  html.fh-mbar-on body.fh-section .fh-topics-list {
    position: absolute;
    top: calc(100% + 20px);
    left: 0;
    margin: 0 !important;
    max-height: calc(100dvh - var(--space-48) * 2);
  }
  /* No bar at the foot any more: the page only keeps room for the cookie notice. */
  html.fh-mbar-on body.fh-section { padding-bottom: var(--space-16) !important; }
  html.fh-mbar-on body.fh-section:has(.notice) .notice { bottom: max(var(--space-8), env(safe-area-inset-bottom)) !important; }
  html.fh-mbar-on body.fh-section:has(.notice) { padding-bottom: calc(var(--fh-notice-h, 6rem) + var(--space-16)) !important; }
  /* Menu open: the overlay starts under the bar, which stays on top with "Menu ×". */
  html.fh-mbar-on body.fh-section > header:has(> .directory.is-open) {
    padding-top: calc(var(--fh-cbar-h, 3rem) + var(--space-8)) !important;
    padding-bottom: var(--space-32) !important;
  }
  html.fh-mbar-on body.fh-section:has(> header > .directory.is-open) .fh-chapters {
    position: fixed !important;
    top: 0 !important;
    left: max(var(--space-page), env(safe-area-inset-left)) !important;
    right: max(var(--space-page), env(safe-area-inset-right)) !important;
  }
}
@media (max-width: 40rem) {
  /* Open topics list: a paper backdrop, so the page behind does not show between the pills. */
  html.fh-mbar-on body.fh-section .fh-topics-list:not([hidden]) {
    margin-left: -8px !important;
    padding: 8px !important;
    background: var(--edition-paper, #fbfaf7);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--edition-ink, #000) 12%, transparent);
  }
  /* "Up" in the footer: the page already keeps room for the cookie notice, so it stays on the footer line and no
     longer rides up into the FUTURE:HOURS wordmark. */
  html.fh-mbar-on body.fh-section:has(.notice) .word-band .to-top { bottom: calc(var(--space-page) + 6rem + env(safe-area-inset-bottom)); }
}

/* ---------- v446 (Oct 2026): menu in .made-body ---------- */
/* Desktop: Menu + sits at the right end of the topics row (.modal-tools, inside .made-body) and is sticky with it,
   within the light section only. */
@media (min-width: 40.01rem) {
  html body.fh-section #made-panel .modal-tools { align-items: center; }
  html body.fh-section #made-panel .modal-tools .modal-actions {
    position: static !important;
    inset: auto !important;
    top: auto !important;
    margin: 0 0 0 auto;
    padding: 0;
    flex: none;
    z-index: auto;
    transform: none;
    display: flex;
    align-self: center;
    pointer-events: auto;
  }
  html body.fh-section #made-panel .modal-tools .modal-actions #directory-open { font-size: calc(var(--fh-fs) * 1.5); line-height: 1.2; }
}
/* Phones: bar heads the .made-body content and sticks within it; the menu panel (also inside .made-body) opens as a
   sheet right under the stuck bar. The ticker header no longer holds the panel, so it never turns into an overlay. */
@media (max-width: 40rem) {
  html.fh-mbar-on body.fh-section #made-panel .fh-chapters { margin: 0 0 var(--space-8); }
  html.fh-mbar-on body.fh-section .directory.fh-mdir {
    position: fixed;
    display: none;
    top: var(--fh-cbar-h, 3rem);
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    height: auto;
    max-height: none;
    margin: 0;
    padding: var(--space-8) max(var(--space-page), env(safe-area-inset-right)) var(--space-32) max(var(--space-page), env(safe-area-inset-left));
    border: 0;
    border-top: 1px solid var(--edition-ink, #000);
    background: var(--edition-paper, #fbfaf7);
    transform: none;
    transition: none;
    overflow-y: auto;
    overscroll-behavior: contain;
    z-index: calc(var(--z-section) + 21);
    pointer-events: auto;
    flex-direction: column;
  }
  html.fh-mbar-on body.fh-section .directory.fh-mdir.is-open { display: flex; }
  html.fh-mbar-on body.fh-section .directory.fh-mdir:focus { outline: none; }
  html.fh-mbar-on body.fh-section .directory.fh-mdir .directory-scroll { flex: none; overflow: visible; }
  html.fh-mbar-on body.fh-section .directory.fh-mdir,
  html.fh-mbar-on body.fh-section .directory.fh-mdir * { color: var(--edition-ink, #000) !important; }
  html.fh-mbar-on body.fh-section .directory.fh-mdir .theme-options .chip[aria-pressed="true"] { color: var(--edition-paper, #fbfaf7) !important; }
  /* While open the bar stays stuck on top of the sheet. */
  html.fh-mbar-on body.fh-section:has(.directory.fh-mdir.is-open) .fh-chapters { position: sticky !important; top: 0 !important; left: auto !important; right: auto !important; }
}

/* Projects: gentle slide-in from below (class set by section.js only when motion is welcome). */
.fh-section .fh-reveal .drop {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 560ms cubic-bezier(.22, .61, .36, 1), transform 560ms cubic-bezier(.22, .61, .36, 1);
}
.fh-section .fh-reveal .drop.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .fh-section .fh-reveal .drop { opacity: 1; transform: none; transition: none; }
}

/* v446: Menu close state, shared by desktop and phones: "Menu +" becomes "Schließen ×" / "Close ×"; the × is the same
   + glyph turned 45° (same size, stroke, place). The button closes the panel, so the panel has no Close pill. While open
   the topics row (with the button) lies above the desktop menu sheet, so the button stays reachable. */
html body.fh-section #directory-open { display: inline-flex; align-items: center; gap: .3em; }
html body.fh-section #directory-open .menu-plus { flex: none; width: .716em; height: .716em; fill: currentColor; transition: transform 200ms cubic-bezier(.22, .61, .36, 1); transform-origin: 50% 50%; }
html body.fh-section #directory-open[aria-expanded="true"] .menu-plus { transform: rotate(45deg); }
html body.fh-section #directory-open[aria-expanded="true"] .menu-plus rect + rect { display: inline !important; }
html body.fh-section #directory .directory-close { display: none !important; }
html body.fh-section:has(#directory.is-open) #made-panel .modal-tools { z-index: calc(var(--z-section) + 30) !important; }
/* The light section (holding row and sheet) lies above Projekte/footer while the menu is open. */
html body.fh-section:has(#directory.is-open) #made-panel { z-index: 16 !important; }
@media (min-width: 40.01rem) { html body.fh-section #made-panel .modal-tools .flow-choices { flex: 1 1 auto; } }
@media (prefers-reduced-motion: reduce) { html body.fh-section #directory-open .menu-plus { transition: none; } }
@media (min-width: 40.01rem) {
  /* The row no longer reserves room for a fixed Menu overlay: Menu + ends on the page edge. */
  html body.fh-section #made-panel .modal-tools .flow-choices { padding-right: 0 !important; }
  /* While the sheet is open the row lies above it; only its pills catch clicks, not its empty box. */
  html body.fh-section:has(#directory.is-open) #made-panel .modal-tools,
  html body.fh-section:has(#directory.is-open) #made-panel .modal-tools .flow-choices { pointer-events: none; }
  html body.fh-section:has(#directory.is-open) #made-panel .modal-tools :is(.chip, .modal-actions, #directory-open) { pointer-events: auto; }
}
/* Menu sheet bar without its Close pill: Schreiben, Themen, Readfast sit together on the left. */
html body.fh-section #directory .directory-bar { justify-content: flex-start !important; gap: var(--space-8) var(--space-16); }
html body.fh-section #directory .directory-bar > * { margin-left: 0 !important; margin-right: 0 !important; }

/* ---------- v447 (Oct 2026) ---------- */
/* Project specs under each project text: place, disciplines (and later industry and year), one per line, small and
   muted; no separators, the disciplines are spaced with em spaces. "Bilder folgen" in the same style. */
.fh-section .foot-drops .project-specs {
  display: flex;
  flex-direction: column;
  gap: .15em;
  margin: var(--space-16) 0 0;
  font-size: var(--fh-fs);
  line-height: var(--leading);
  color: color-mix(in oklab, currentColor 58%, transparent);
}
.fh-section .foot-drops .project-specs .spec { display: flex; flex-wrap: wrap; column-gap: 1em; white-space: pre-wrap; }
.fh-section .foot-drops .project-specs [hidden],
.fh-section .foot-drops .project-specs :is(.spec-place, .spec-industry, .spec-disc, .spec-year):empty { display: none; }
.fh-section .foot-drops .project-specs .spec-note { margin-top: .35em; font-style: normal; }

/* Open menu panel: content starts on the baseline of "Schließen ×" (shift set by section.js). On phones the panel
   starts at the top, under the bar, whose topics pill is hidden while open, so the first row shares the bar's line. */
html body.fh-section #directory .directory-bar { margin-top: var(--fh-panel-shift, 0px) !important; }
@media (max-width: 40rem) {
  html.fh-mbar-on body.fh-section .directory.fh-mdir { top: 0; border-top: 0; }
  html.fh-mbar-on body.fh-section .directory.fh-mdir .directory-bar { padding-right: 8.5em; }
}
/* More air above the topics row and Menu at the top of .made-body (also while stuck): desktop 24 to 40 px, phones 8 to 16 px. */
html body.fh-section #made-panel .modal-tools { padding-top: var(--space-24) !important; }
@media (max-width: 40rem) {
  html.fh-mbar-on body.fh-section .fh-chapters { padding-top: var(--space-16) !important; }
}

/* Phones: the open menu is a full-screen paper sheet (inset 0, 100dvh, safe areas); "Schließen ×" sits at its top right
   (the bar is fixed above the sheet while open, topics pill hidden), page scroll is locked by section.js. */
html.fh-locked, html.fh-locked body { overflow: hidden !important; }
@media (max-width: 40rem) {
  html.fh-mbar-on body.fh-section:has(#directory.fh-mdir.is-open) #made-panel { z-index: 2147483000 !important; }
  html.fh-mbar-on body.fh-section .directory.fh-mdir.is-open {
    position: fixed !important;
    inset: 0 !important;
    top: 0 !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-height: none !important;
    padding-top: calc(env(safe-area-inset-top) + var(--space-16)) !important;
    background: var(--edition-paper, #fbfaf7) !important;
    opacity: 1 !important;
    z-index: 2147483001 !important;
  }
  html.fh-mbar-on body.fh-section:has(.directory.fh-mdir.is-open) .fh-chapters {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    margin: 0 !important;
    padding: calc(env(safe-area-inset-top) + var(--space-16)) max(var(--space-page), env(safe-area-inset-right)) 0 max(var(--space-page), env(safe-area-inset-left)) !important;
    background: transparent !important;
    pointer-events: none !important;
    z-index: 2147483002 !important;
  }
  html.fh-mbar-on body.fh-section:has(.directory.fh-mdir.is-open) .fh-chapters #directory-open { pointer-events: auto !important; margin-left: auto !important; }
}
/* Menü list links (service page): same highlight pills as the buttons; the current page is marked like a pressed pill. */
@media (max-width: 40rem) {
  html.fh-mbar-on body.fh-section a.fh-topic { display: inline-flex; align-items: center; text-decoration: none !important; }
}

/* ---------- v448 ---------- */
/* "Menü +" pill: same glyph, size, spacing and × transition as "Info +". */
html body.fh-section .fh-topics-toggle { display: inline-flex; align-items: center; gap: .3em; }
html body.fh-section .fh-topics-toggle .menu-plus { flex: none; width: .716em; height: .716em; fill: currentColor; transition: transform 200ms cubic-bezier(.22, .61, .36, 1); transform-origin: 50% 50%; }
html body.fh-section .fh-topics-toggle[aria-expanded="true"] .menu-plus { transform: rotate(45deg); }
@media (prefers-reduced-motion: reduce) { html body.fh-section .fh-topics-toggle .menu-plus { transition: none; } }

/* ---------- v449 ---------- */
/* Phone hero: "Made by / Humans" on two lines at the left, the offer ("Markensysteme + Art Direction") with
   "Anfrage starten →" right-aligned on the shared right edge, same size as the hero. Desktop keeps "und". */
html body.fh-section > main .offer-plus { display: none; }
@media (max-width: 40rem) {
  html body.fh-section > main .band { display: flex !important; flex-direction: row !important; flex-wrap: wrap; justify-content: space-between; align-items: flex-start !important; column-gap: var(--space-16); row-gap: var(--space-16); }
  html body.fh-section > main .band .col { display: contents; }
  html body.fh-section > main .band .info-line { order: 1; flex: 0 1 auto; margin: 0; }
  html body.fh-section > main .band .col > p:first-child { order: 2; flex: 0 1 auto; margin: 0; text-align: right; }
  html body.fh-section > main .band .col > .svc-about { order: 3; flex: 1 0 100%; margin: 0; text-align: left; }
  html body.fh-section > main .band .info-open > span { display: block; text-align: left; }
  html body.fh-section > main .band .info-open { display: inline-block; text-align: left; }
  html body.fh-section > main .offer-long { display: none; }
  html body.fh-section > main .offer-plus { display: inline; }
}
@media (max-width: 40rem) {
  html body.fh-section > main .band .info-line { align-self: flex-start; line-height: 1.1; }
  html body.fh-section > main .band .info-open { display: inline-flex !important; flex-direction: column; align-items: flex-start; min-height: 0 !important; height: auto !important; padding: 0 !important; line-height: 1.1 !important; background: none !important; vertical-align: top; }
  html body.fh-section > main .band .info-open > span { padding: 0 .1em; line-height: 1.1; background: linear-gradient(#fbfaf7, #fbfaf7) center / 100% 1.05em no-repeat; }
}

/* ---------- v450 ---------- */
/* Phone hero, swapped: offer ("Brand Systems und Art Direction") + "Anfrage starten →" stacked on the left,
   "Made by / Humans" right-aligned on the shared right edge. No "+". */
@media (max-width: 40rem) {
  html body.fh-section > main .band .col > p:first-child { order: 1 !important; text-align: left !important; }
  html body.fh-section > main .band .info-line { order: 2 !important; text-align: right; margin-left: auto !important; }
  html body.fh-section > main .band .info-open { align-items: flex-end !important; text-align: right !important; }
  html body.fh-section > main .band .info-open > span { text-align: right !important; }
}

/* ---------- v451 ---------- */
/* Service hero bottom block: occasions in the left column, the promise in the Made-by column (desktop);
   on phones left and right-aligned on the shared right edge, as on the homepage. */
@media (max-width: 40rem) {
  html body.fh-section > main .svc-band .col > p:first-child { flex: 1 1 0 !important; max-width: 48%; }
  html body.fh-section > main .svc-band .svc-occ-r { flex: 1 1 0 !important; max-width: 48%; text-align: right; line-height: 1.1; }
}
html body.fh-section > main .svc-band .svc-occ-r { line-height: 1.1; }

/* ---------- v452 ---------- */
/* The whole FUTURE:HOURS ticker is one link to the start page: no underline, visible focus ring, reels untouched. */
html body.fh-section header h1 a.fh-home,
html.fh-mbar-on body.fh-section > header h1 a.fh-home {
  display: inline-flex !important;
  align-items: inherit;
  gap: inherit;
  color: inherit !important;
  text-decoration: none !important;
  cursor: pointer;
  border-radius: 0;
}
html body.fh-section header h1 a.fh-home:hover { text-decoration: none !important; }
html body.fh-section header h1 a.fh-home:focus-visible { outline: 2px solid #000; outline-offset: 3px; }
/* Phone hero: "Made by" / "Humans" share one left edge inside the block, the block itself sits on the right. */
@media (max-width: 40rem) {
  html body.fh-section > main .band .info-line { text-align: left !important; }
  html body.fh-section > main .band .info-open { align-items: flex-start !important; text-align: left !important; }
  html body.fh-section > main .band .info-open > span { text-align: left !important; }
}
/* Desktop, Info panel open: the chapter pills wrap inside the left column (never under the 448 px panel, never
   into each other); "Schließen ×" keeps its place at the right end of the row, above the panel. */
@media (min-width: 40.0625rem) {
  html body.fh-section:has(#directory.is-open) #made-panel .modal-tools .flow-choices {
    position: relative;
    flex-wrap: wrap !important;
    row-gap: var(--space-8);
    padding-right: calc(min(448px, 100vw) + var(--space-16)) !important;
    overflow: visible;
  }
  html body.fh-section:has(#directory.is-open) #made-panel .modal-tools .flow-choices > .chip { flex: none; margin-left: 0 !important; margin-right: 0 !important; }
  html body.fh-section:has(#directory.is-open) #made-panel .modal-tools .flow-choices > .modal-actions,
  html body.fh-section:has(#directory.is-open) #made-panel .modal-tools .flow-choices > #directory-open {
    position: absolute !important;
    left: auto !important;
    right: 0 !important;
    top: 0 !important;
    margin: 0 !important;
  }
}

/* Project specs on ONE line, parts separated by " | " (wraps on narrow screens): place | industry | disciplines
   (| year) | Bilder folgen. No blinking square, no typing bars on these meta lines. */
html body.fh-section .foot-drops .project-specs { display: block !important; }
html body.fh-section .foot-drops .project-specs .spec,
html body.fh-section .foot-drops .project-specs .spec > span { display: inline !important; white-space: normal !important; margin: 0 !important; }
html body.fh-section .foot-drops .project-specs [hidden],
html body.fh-section .foot-drops .project-specs :is(.spec-place, .spec-industry, .spec-disc, .spec-year):empty { display: none !important; }
html body.fh-section .foot-drops .project-specs :is(.spec-industry, .spec-l2, .spec-year, .spec-note):not(:empty)::before {
  content: " | " !important;
  display: inline !important;
  width: auto !important; height: auto !important; margin: 0 !important;
  background: none !important; animation: none !important;
  white-space: pre;
}
html body.fh-section .foot-drops .project-specs :is(.spec-place, .spec-disc, .spec-l1)::before,
html body.fh-section .foot-drops .project-specs *::after { content: none !important; animation: none !important; background: none !important; }
html body.fh-section .foot-drops .project-specs .censor-sheet,
html body.fh-section .foot-drops .project-specs .censor { display: none !important; }

/* v454: project meta line, filled by section.js (array join). Full ink, no pseudo content, no animation. */
html body.fh-section .foot-drops .project-specs[data-specs] {
  display: block !important;
  margin: 0 0 var(--space-8) !important;
  color: inherit !important;
  opacity: 1 !important;
  font-size: var(--fh-fs);
  line-height: var(--leading);
}
html body.fh-section .foot-drops .project-specs[data-specs]::before,
html body.fh-section .foot-drops .project-specs[data-specs]::after { content: none !important; animation: none !important; }
/* v454: scroll reveal for service rows, and the accordion body slides up 8px and fades in when an item opens. */
.fh-section .fh-rv { opacity: 0; transform: translateY(20px); transition: opacity 550ms cubic-bezier(.22, .61, .36, 1), transform 550ms cubic-bezier(.22, .61, .36, 1); }
.fh-section .fh-rv.is-in { opacity: 1; transform: none; }
@keyframes fh-acc-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.fh-section .flow-index-body:not([hidden]) { animation: fh-acc-in 300ms cubic-bezier(.22, .61, .36, 1) both; }
@media (prefers-reduced-motion: reduce) {
  .fh-section .fh-rv { opacity: 1 !important; transform: none !important; transition: none !important; }
  .fh-section .flow-index-body:not([hidden]) { animation: none !important; }
}

/* v456: Namche showreel in the drop, same frame as the other case media (.flow-video: 40rem, .5em radius). */
.fh-section .fh-reel { position: relative; max-width: 40rem; margin: var(--space-16) 0 var(--space-8); }
.fh-section .fh-reel .fh-showreel { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; margin: 0; object-fit: cover; border-radius: .5em; background: var(--void, #000); }
.fh-section .fh-reel-play { position: absolute; left: var(--space-16); bottom: var(--space-16); min-width: 44px; min-height: 44px; padding: 0 .6em; border: 0; border-radius: 0; background: #fbfaf7; color: #000; font: inherit; cursor: pointer; }
.fh-section .fh-reel-play[hidden] { display: none; }
.fh-section .fh-reel-play:focus-visible { outline: 2px solid #000; outline-offset: 3px; }

/* v456: more air around the project meta line (about 1em above and below). */
html body.fh-section .foot-drops .project-specs[data-specs] { margin: var(--space-16) 0 !important; }

/* v459: project image (Poolbar ICA graphic) inside the expanded drop: max 360 px on desktop, full width on phones. */
.fh-section .foot-drops .fh-proj-pic { display: block; max-width: 360px; margin: var(--space-16) 0; }
.fh-section .foot-drops .fh-proj-pic img { display: block; width: 100%; height: auto; }
@media (max-width: 40rem) { .fh-section .foot-drops .fh-proj-pic { max-width: none; } }

/* v458: open mobile Menü list without a box: no border, panel or shadow. Each item is its own highlight pill like
   the nav pills (grey #deddda, the current one black), stacked with small gaps, left-aligned under the Menü pill.
   Focus ring only for keyboard, and subtle. */
@media (max-width: 40rem) {
  html.fh-mbar-on body.fh-section .fh-topics-list,
  html.fh-mbar-on body.fh-section .fh-topics-list:not([hidden]) {
    margin-left: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
    box-shadow: none !important;
    outline: 0 !important;
    gap: 8px !important;
    top: calc(100% + 8px) !important;
    left: 0 !important;
    align-items: flex-start !important;
  }
  html.fh-mbar-on body.fh-section .fh-topics-list .fh-topic { background: #deddda !important; color: #000 !important; outline: 0; }
  html.fh-mbar-on body.fh-section .fh-topics-list .fh-topic[aria-current="true"],
  html.fh-mbar-on body.fh-section .fh-topics-list .fh-topic[aria-current="page"] { background: #000 !important; color: #fbfaf7 !important; }
  html.fh-mbar-on body.fh-section .fh-topics-list .fh-topic:focus:not(:focus-visible) { outline: 0 !important; }
  html.fh-mbar-on body.fh-section .fh-topics-list .fh-topic:focus-visible {
    outline: 1px solid color-mix(in srgb, var(--edition-ink, #000) 45%, transparent) !important;
    outline-offset: 2px !important;
  }
  /* small gaps, so the 44 px touch targets shrink to the pill pitch instead of overlapping */
  html.fh-mbar-on body.fh-section .fh-topics-list .fh-topic::after { height: calc(100% + 8px) !important; }
}

/* ---------- v460: Info panel order: inquiry + "Projekt starten →", contact, studio line, network + partners,
   footer row (theme, DE/EN, legal, Slow Pace Society). No dots as separators. ---------- */
html body.fh-section #directory .fh-info-start { margin: 0 0 var(--space-32); }
html body.fh-section #directory .fh-info-start .start-how { margin: 0 0 var(--space-16); }
html body.fh-section #directory a.chip.fh-info-cta {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  border-color: rgb(var(--ink)) !important;
  background: rgb(var(--ink)) !important;
  color: rgb(var(--sky)) !important;
  background-clip: content-box !important;
}
html body.fh-section #directory a.chip.fh-info-cta:hover { text-decoration: underline; text-underline-offset: .15em; }
html body.fh-section #directory a.chip.fh-info-cta:focus-visible { outline: 1px solid rgb(var(--ink)); outline-offset: 2px; }
html body.fh-section #directory .fh-contact { gap: var(--space-16); margin: 0; }
html body.fh-section #directory .fh-contact .profile { display: flex; flex-direction: column; align-items: flex-start; }
html body.fh-section #directory .fh-contact .profile > * { margin: 0; }
html body.fh-section #directory .fh-info-studio { margin: var(--space-16) 0 var(--space-32); }
/* Footer row: wraps on narrow widths, the SPS mark closes the row on the right. */
html body.fh-section #directory .made-status.fh-info-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-8) var(--space-24);
  padding-top: var(--space-16);
  padding-bottom: var(--space-16);
}
html body.fh-section #directory .fh-info-foot .theme-switch { display: flex !important; flex-direction: row !important; flex-wrap: wrap; align-items: center !important; gap: var(--space-8); margin: 0 !important; padding: 0 !important; }
html body.fh-section #directory .fh-info-foot .theme-switch-label { text-align: left !important; margin: 0 !important; }
html body.fh-section #directory .fh-info-foot .theme-options { display: flex; flex-wrap: wrap; gap: var(--space-4, 4px); }
html body.fh-section #directory .fh-info-foot .lang-switch { margin: 0; }
html body.fh-section #directory .fh-info-legal { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-8) var(--space-16); }
html body.fh-section #directory .fh-info-legal a { color: inherit; text-decoration: none; }
html body.fh-section #directory .fh-info-legal a:hover { text-decoration: underline; text-underline-offset: .15em; }
html body.fh-section #directory .fh-info-foot .made-status-left { margin-left: auto; }
/* Phones: contact lines closer together (36 px targets instead of 48 px), so the block stays compact. */
@media (max-width: 40rem) {
  html body.fh-section #directory .fh-contact .profile-bio { min-height: 36px; padding-block: max(0px, calc((36px - 1lh) / 2)) !important; }
}

/* v461: project link pills (Case Study, client websites) right under the meta line: grey highlight pill,
   black with white text on hover, keyboard focus and press. Targets and rel unchanged. */
html body.fh-section .foot-drops .drop-pills.drop-links { margin: var(--space-16) 0 0 !important; }
html body.fh-section .foot-drops .drop-links + .project-specs[data-specs] { margin-top: var(--space-16) !important; }
html body.fh-section #projekte.foot-drops .drop-links a.chip.credit-pill {
  background: #deddda !important;
  color: #000 !important;
  text-decoration: none !important;
  outline: 0;
}
html body.fh-section #projekte.foot-drops .drop-links a.chip.credit-pill:is(:hover, :focus-visible, :active) {
  background: #000 !important;
  color: #fff !important;
}
html body.fh-section #projekte.foot-drops .drop-links a.chip.credit-pill:focus-visible { outline: 1px solid #000; outline-offset: 2px; }

/* ---------- v463 ---------- */
/* FUTURE:HOURS ticker in weight 500 (only the ticker; ABC Areal is forced to 450 / 400 elsewhere). */
html body.fh-section header h1,
html body.fh-section header h1 * {
  font-weight: 500 !important;
  font-variation-settings: "wght" 500 !important;
}

/* ---------- v464: reusable media slider in project drops (.fh-media) ----------
   Equal-height items (width from aspect ratio), native scroll-snap, the next item peeks in and bleeds past the
   right page edge. Controls: rectangular, ABC Areal, prev | counter | next. */
html body.fh-section .fh-media { --mh: 70vh; margin: var(--space-16) calc(-1 * var(--space-page)) var(--space-16) 0; }
html body.fh-section .fh-media-track {
  display: flex;
  gap: var(--space-8);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-padding-left: 0;
  padding-right: var(--space-page);
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  outline: 0;
  cursor: grab;
}
html body.fh-section .fh-media-track.is-drag { cursor: grabbing; scroll-snap-type: none; user-select: none; }
html body.fh-section .fh-media-track::-webkit-scrollbar { display: none; }
html body.fh-section .fh-media-track:focus-visible { outline: 1px solid rgb(var(--ink)); outline-offset: 2px; }
html body.fh-section .fh-media-item {
  position: relative;
  flex: none;
  height: var(--mh);
  aspect-ratio: var(--r, 16 / 9);
  max-width: 86vw;
  margin: 0;
  scroll-snap-align: start;
  background: #000;
  overflow: hidden;
}
html body.fh-section .fh-media-item > :is(iframe, video, img) { display: block; width: 100%; height: 100%; border: 0; object-fit: cover; }
html body.fh-section .fh-media-item.fh-reel { max-width: 86vw; margin: 0; }
html body.fh-section .fh-media-item.fh-reel .fh-showreel { height: 100%; max-width: none; aspect-ratio: auto; border-radius: 0; }
html body.fh-section .fh-media-item.is-shielded::after { content: ""; position: absolute; inset: 0; }
/* v465: minimal controls. Bare arrows and a small counter, low contrast, no frames. Arrows hide at the ends. */
html body.fh-section .fh-media-ctrl { display: flex; align-items: center; gap: 0; margin-top: var(--space-16); font-family: "ABC Areal", "Helvetica Neue", Arial, sans-serif; font-size: 13px; line-height: 1; letter-spacing: .02em; color: inherit; font-variant-numeric: tabular-nums; user-select: none; }
html body.fh-section .fh-media-ctrl[hidden] { display: none; }
html body.fh-section .fh-media-count { min-width: 3.2em; text-align: center; }
html body.fh-section .fh-media-ctrl button { appearance: none; margin: 0; padding: .5em .6em; border: 0; border-radius: 0; background: none; color: inherit; font: inherit; line-height: 1; cursor: pointer; transition: color .15s; }
html body.fh-section .fh-media-ctrl .fh-media-prev { padding-left: 0; }
html body.fh-section .fh-media-ctrl button:is(:hover, :focus-visible) { color: inherit; outline: 0; background: none; text-decoration: underline; text-underline-offset: 3px; }
html body.fh-section .fh-media-ctrl button:disabled { visibility: hidden; }
html body.fh-section .fh-media-end { flex: 0 0 auto; width: 0; scroll-snap-align: none; }
@media (max-width: 720px) {
  html body.fh-section .fh-media { --mh: min(70vh, calc(86vw * 5 / 4)); }
  html body.fh-section .fh-media:has(.fh-reel) { --mh: min(70vh, calc(86vw * 3 / 4)); }
}
/* Mobile: keep the whole artwork visible; center ratio-matched iframe animations within their slides. */
@media (max-width: 720px) {
  html body.fh-section .fh-media-item { display: grid; place-items: center; }
  html body.fh-section .fh-media-item > :is(img, video.fh-showreel) { object-fit: contain; }
  html body.fh-section .fh-media-item > iframe {
    width: 100%;
    height: auto;
    max-height: 100%;
    aspect-ratio: var(--r, 16 / 9);
  }
}
@media (prefers-reduced-motion: reduce) { html body.fh-section .fh-media-track { scroll-behavior: auto; } }

/* Journal type mode: controls stay ABC Areal at the small size. */
html.theme-journal body.fh-section .fh-media-ctrl,
html.theme-journal body.fh-section .fh-media-ctrl button { font-family: "ABC Areal", "Helvetica Neue", Arial, sans-serif !important; font-size: 13px !important; font-weight: 400 !important; background: none !important; border: 0 !important; color: inherit !important; opacity: 1 !important; }
/* v468: empty project Content coming soon */html body.fh-section .foot-drops .drop-soon{margin-left:auto;flex:none;font-family:"ABC Areal Mono","ABC Areal","Helvetica Neue",Arial,monospace;font-size:var(--fh-fs);font-weight:450;line-height:1.2;letter-spacing:.05em;text-transform:uppercase}html body.fh-section .foot-drops .drop-btn:has(.drop-soon) .drop-mark{margin-left:0}html body.fh-section .foot-drops .fh-soon{margin:var(--space-16) 0 var(--space-24);font-size:calc(var(--fh-fs)*1.5);font-weight:450;line-height:1.45}