/* FyreFly Systems: the site layer over tokens.css, bundle.css and site.css.
   Tokens only (no literal colours), one weight, sentence case. Keep it small:
   anything both sites need belongs in /shared/ff/site.css instead. */

/* Anchor jumps land between the fixed bars (and under the sub-navigation where a page has one);
   main takes focus from the skip link. The bars themselves are styled in /shared/ff/site.css. */
html { scroll-padding-top: var(--topbar-height); scroll-padding-bottom: var(--ff-footer-h); }
html:has(.ff-subnav) { scroll-padding-top: calc(var(--topbar-height) + var(--ff-subnav-h)); }
body.ff-page { margin: 0; }
main:focus { outline: none; }

/* ===== Page head ===== */
.ff-pagehead__lede .ff-lede { max-width: 46ch; }
.ff-pagehead .ff-actions { margin-top: var(--space-6); }
.ff-pagehead .ff-note { margin-top: var(--space-5); }

/* ===== Running copy inside sections ===== */
.sci-copy > * { margin-top: 0; margin-bottom: 0; }
.sci-copy > * + * { margin-top: var(--space-4); }
.sci-copy p { max-width: 62ch; font-size: 16px; line-height: 1.65; }
.sci-copy > .ff-h3,
.sci-copy > .ff-table-wrap, .sci-copy > .ff-list, .sci-copy > .ff-facts, .sci-copy > .ff-defs,
.sci-copy > .ff-table-wrap + *, .sci-copy > .ff-list + *, .sci-copy > .ff-facts + *,
.sci-copy > .sci-quote + * { margin-top: var(--space-6); }
.sci-copy > .ff-cta { margin-top: var(--space-6); }
.sci-copy > .ff-h3 + * { margin-top: var(--space-3); }
.ff-section__head .ff-figure { margin-top: var(--space-6); }
.ff-split__text .ff-list { margin-top: var(--space-6); }
.ff-split__text .ff-defs { margin-top: var(--space-6); }
.ff-split__text .sci-after { margin: var(--space-5) 0 0; max-width: 52ch; font-size: 15px; line-height: 1.6; color: var(--ink-muted); }
.ff-contact .ff-actions { margin-top: var(--space-6); }
.ff-defs dd a { overflow-wrap: anywhere; }
.ff-page code {
  font-family: var(--ff-mono);
  font-size: 0.88em;
  padding: 0 var(--space-1);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--stage-200) 70%, transparent);
}

/* ===== Phonos split on the homepage ===== */
#platform .ff-split__media img { object-position: 20% center; }   /* keep the head in profile in a tall panel */
.sci-pillars { margin-top: var(--space-6); }
.sci-pillars .ff-actions { margin-top: var(--space-6); }
.sci-pillars .ff-small { margin-top: var(--space-4); max-width: 52ch; }

/* ===== Next row: a title line and a muted note inside one link ===== */
.ff-next a span.sci-next__title { display: block; margin: 0; font-size: inherit; line-height: inherit; color: inherit; }

/* ===== Quote (About us, mission) ===== */
.sci-quote { margin: 0; }
.sci-quote blockquote { margin: 0; }
.sci-quote blockquote p {
  margin: 0;
  max-width: 34ch;
  font-size: clamp(22px, 2.4vw, 28px);
  line-height: 1.35;
  letter-spacing: -0.01em;
}
.sci-quote figcaption { margin-top: var(--space-4); max-width: 52ch; font-size: 15px; line-height: 1.6; color: var(--ink-muted); }

/* ===== Model entries ===== */
.sci-models { display: grid; gap: var(--space-8); }
.sci-model h3 { font-size: 26px; line-height: 1.25; letter-spacing: -0.01em; }
.sci-model .ff-facts { grid-template-columns: max-content minmax(0, 1fr); margin-top: var(--space-5); row-gap: var(--space-3); }
.sci-model .ff-chips { margin: 0; }
.sci-table th a { color: var(--ink); }
.sci-table .sci-table__group th { padding-top: var(--space-5); font-family: var(--ff-mono); font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-muted, var(--ink)); }

/* ===== Team portraits ===== */
.sci-team .ff-figure img { object-position: center 30%; }

/* ===== Phonos landing: the diagonal from the former site, on tokens =====
   The render fills the upper-left triangle (it opens Phonos), the stage ground the lower
   right (it scrolls on). The page's one slot headline sits on the ground. */
.sci-landing {
  position: relative;
  height: calc(var(--ff-vh) - var(--topbar-height));
  min-height: 540px;
  max-height: 1000px;
  overflow: hidden;
  background: var(--stage-100);
}
main:has(> .ff-subnav) .sci-landing { height: calc(var(--ff-vh) - var(--topbar-height) - var(--ff-subnav-h)); }
.sci-landing__image, .sci-landing__half { position: absolute; inset: 0; }
.sci-landing__image { clip-path: polygon(0 0, 100% 0, 0 100%); background: var(--stage-300); }
.sci-landing__image img { width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 20% center; }
.sci-landing__half {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--dur-hover) var(--ease-plain);
}
.sci-landing__half--image { z-index: 1; clip-path: polygon(0 0, 100% 0, 0 100%); background: var(--scrim); color: var(--on-image); }
.sci-landing__half--image:hover, .sci-landing__half--image:focus-visible { background: color-mix(in srgb, var(--night) 62%, transparent); }
.sci-landing__half--ground { z-index: 1; clip-path: polygon(100% 0, 100% 100%, 0 100%); background: var(--stage-100); color: var(--ink); }
.sci-landing__half--ground:hover, .sci-landing__half--ground:focus-visible { background: var(--stage-200); }
.ff-page .sci-landing__half:focus-visible { outline: 3px solid var(--focus-on-image); outline-offset: -8px; }
.sci-landing__hint {
  position: absolute;
  font-size: 20px;
  line-height: 1.3;
  white-space: nowrap;
  opacity: 0;
  transform: translate(-50%, -50%) translateY(8px);
  transition: opacity var(--dur-hover) var(--ease-plain), transform var(--dur-hover) var(--ease-out-quart);
}
.sci-landing__half--image .sci-landing__hint { left: 62%; top: 18%; text-shadow: 0 1px 14px var(--scrim); }
.sci-landing__half--ground .sci-landing__hint { left: 80%; top: 46%; }
.sci-landing__half:hover .sci-landing__hint,
.sci-landing__half:focus-visible .sci-landing__hint { opacity: 1; transform: translate(-50%, -50%); }
.sci-landing__content {
  position: absolute;
  z-index: 2;
  left: var(--gutter);
  top: 16%;
  max-width: min(32ch, 40%);
  color: var(--on-image);
  pointer-events: none;
}
.sci-landing__content .ff-display { text-shadow: 2px 2px 15px var(--scrim); }
.sci-landing__content .ff-lede { margin-top: var(--space-4); text-shadow: 0 1px 14px var(--scrim); }
.sci-landing__slot {
  position: absolute;
  z-index: 2;
  right: calc(var(--gutter) + var(--space-7));
  bottom: 13%;
  margin: 0;
  color: var(--ink);
  pointer-events: none;
}
.sci-landing__slot .ff-slot { font-size: clamp(44px, 8vw, 112px); }
.sci-landing .ff-credit { z-index: 3; left: var(--space-4); right: auto; top: var(--space-4); bottom: auto; }

/* ===== Model carousel (models page): the gradient panels of the former site =====
   Slides share one grid cell, so the carousel is as tall as its longest slide. The
   countdown bar is the clock: its animation ending moves to the next model. */
.sci-carousel {
  position: relative;
  background-image: var(--ff-grid-bg);
  background-position: var(--ff-grid-margin) 0;
  background-repeat: repeat-x;
  background-color: var(--stage-100);
  --sci-dir: 1;
}
@media print { .sci-carousel { background-image: none; } }
.sci-carousel__track { display: grid; overflow: hidden; overflow: clip; }
.sci-slide {
  grid-area: 1 / 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  min-height: min(74svh, 700px);
  opacity: 0;
  visibility: hidden;
  transform: translateX(calc(var(--sci-dir) * 30px));
  transition: opacity 600ms var(--ease-plain), transform 600ms var(--ease-reveal), visibility 0s linear 600ms;
}
.sci-slide.is-prev { transform: translateX(calc(var(--sci-dir) * -30px)); }
.sci-slide.is-active { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.sci-slide__panel { position: relative; overflow: hidden; min-height: 320px; cursor: grab; }
.sci-slide__panel:active { cursor: grabbing; }
.sci-slide:nth-child(even) .sci-slide__panel { order: 2; }
.sci-slide__panel::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, var(--scrim) 0%, transparent 55%);
  pointer-events: none;
}
.sci-slide__name {
  position: absolute;
  z-index: 1;
  left: var(--gutter);
  bottom: var(--space-7);
  color: var(--on-image);
  font-size: clamp(40px, 5.4vw, 72px);
  line-height: 1;
  letter-spacing: -0.03em;
  text-shadow: 2px 2px 15px var(--scrim);
}
.sci-slide__info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: var(--space-8) calc(var(--gutter) + var(--space-7)) var(--space-8) var(--space-8);
}
.sci-slide:nth-child(even) .sci-slide__info { padding: var(--space-8) var(--space-8) var(--space-8) var(--gutter); }
.sci-slide__title { margin: 0; font-size: clamp(32px, 4vw, 48px); line-height: 1.08; letter-spacing: -0.02em; font-weight: 400; }
.sci-slide__tagline { margin: var(--space-3) 0 0; font-size: 20px; line-height: 1.45; color: var(--accent-ink); max-width: 40ch; }
.sci-slide__desc { margin: var(--space-5) 0 0; max-width: 52ch; font-size: 16px; line-height: 1.65; color: var(--ink-muted); }
.sci-slide__meta { margin: var(--space-5) 0 0; font-family: var(--ff-mono); font-size: 12px; letter-spacing: 0.02em; line-height: 1.5; color: var(--ink-muted); }
.sci-slide .ff-cta { margin-top: var(--space-6); }

.sci-carousel__progress { position: relative; height: 2px; background: color-mix(in srgb, var(--rule) 45%, transparent); overflow: hidden; }
.sci-carousel__fill {
  position: absolute;
  inset: 0;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left center;
  animation: sci-countdown 10s linear forwards;
}
@keyframes sci-countdown { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.sci-carousel.is-paused .sci-carousel__fill { animation-play-state: paused; }
/* Off screen, in a background tab and on the slides out of view the gradient panels stop drifting (a filter animation repaints the panel). */
.sci-carousel.is-idle .ff-drift, .sci-slide:not(.is-active):not(.is-prev) .ff-drift { animation-play-state: paused; }
.sci-carousel__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4) var(--space-5);
  padding: var(--space-5) calc(var(--gutter) + var(--space-7)) var(--space-5) var(--gutter);
}
.sci-carousel__step { min-height: 36px; padding: 7px 14px; }
.sci-carousel__ticks { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.sci-carousel__tick {
  display: block;
  width: 28px;
  height: 20px;
  padding: 0;
  border: 0;
  background: linear-gradient(var(--rule), var(--rule)) center / 100% 2px no-repeat;
  cursor: pointer;
  transition: background-size var(--dur-hover) var(--ease-out-quart);
}
.sci-carousel__tick:hover { background-size: 100% 4px; }
.sci-carousel__tick[aria-current="true"] { background-image: linear-gradient(var(--accent), var(--accent)); background-size: 100% 4px; }
.sci-carousel__count { font-family: var(--ff-mono); font-size: 12px; letter-spacing: 0.02em; color: var(--ink-muted); }
.sci-carousel__toggle { margin-left: auto; }

/* Per-model panels: five stops each, drifting ±6deg through .ff-drift (site.css). */
.sci-grad {
  background:
    radial-gradient(120% 80% at 72% 18%, var(--g1) 0%, transparent 55%),
    radial-gradient(110% 90% at 18% 86%, var(--g2) 0%, transparent 60%),
    linear-gradient(135deg, var(--g3) 0%, var(--g4) 50%, var(--g5) 100%);
}
.sci-grad--boltz-2     { --g1: hsl(213 94% 78%); --g2: hsl(221 83% 53%); --g3: hsl(229 84% 5%);  --g4: hsl(224 64% 33%); --g5: hsl(199 93% 60%); }
.sci-grad--openfold3   { --g1: hsl(152 76% 80%); --g2: hsl(175 84% 32%); --g3: hsl(166 91% 9%);  --g4: hsl(163 94% 24%); --g5: hsl(187 92% 69%); }
.sci-grad--diffdock    { --g1: hsl(270 95% 75%); --g2: hsl(188 86% 53%); --g3: hsl(244 47% 20%); --g4: hsl(263 70% 50%); --g5: hsl(189 94% 43%); }
.sci-grad--rfdiffusion { --g1: hsl(350 90% 80%); --g2: hsl(12 85% 55%);  --g3: hsl(340 60% 18%); --g4: hsl(350 70% 45%); --g5: hsl(20 95% 65%); }
.sci-grad--proteinmpnn { --g1: hsl(48 96% 77%);  --g2: hsl(25 95% 53%);  --g3: hsl(48 96% 89%);  --g4: hsl(27 96% 61%);  --g5: hsl(17 88% 40%); }
.sci-grad--molmim      { --g1: hsl(21 100% 65%); --g2: hsl(263 69% 51%); --g3: hsl(11 100% 61%); --g4: hsl(319 51% 46%); --g5: hsl(260 64% 29%); }
.sci-grad--genmol      { --g1: hsl(176 63% 51%); --g2: hsl(224 76% 48%); --g3: hsl(222 47% 11%); --g4: hsl(194 82% 31%); --g5: hsl(173 80% 40%); }
.sci-grad--evo-2       { --g1: hsl(156 72% 67%); --g2: hsl(173 80% 40%); --g3: hsl(176 80% 10%); --g4: hsl(164 88% 20%); --g5: hsl(158 64% 52%); }
.sci-grad--diffdock, .sci-grad--molmim { animation-duration: 15s; }

/* No autoplay under reduced motion: no countdown, no toggle. */
@media (prefers-reduced-motion: reduce) {
  .sci-carousel__progress, .sci-carousel__toggle { display: none; }
  .sci-slide { transform: none; }
}

/* ===== Legal sheets: the extracted texts keep their own classes ===== */
.legal-content.lang-de { display: none; }
body.lang-de .legal-content.lang-en { display: none; }
body.lang-de .legal-content.lang-de { display: block; }
.ff-legal__sheet { overflow-wrap: break-word; }
.ff-legal__sheet ul, .ff-legal__sheet ol { padding-left: 1.25em; }
.ff-legal__sheet li { margin-bottom: var(--space-2); }
.ff-legal__sheet .text-muted { color: var(--ink-muted); font-size: 14px; }
.ff-legal__sheet .text-secondary { color: var(--ink); }
.ff-legal__sheet .legal-section { margin-bottom: var(--space-6); }
.ff-legal__sheet .legal-box,
.ff-legal__sheet .legal-highlight {
  position: relative;
  margin: var(--space-4) 0 var(--space-5);
  padding-top: var(--space-4);
}
.ff-legal__sheet .legal-box::before,
.ff-legal__sheet .legal-highlight::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: linear-gradient(to right, var(--accent) 0 var(--space-4), var(--rule) var(--space-4));
}
.ff-legal__sheet .legal-box p { margin-bottom: var(--space-2); }
.ff-legal__sheet .legal-highlight ul { margin: var(--space-3) 0 0; }
.ff-legal__sheet .legal-table th { font-size: 13px; font-weight: 400; color: var(--ink-muted); }
.ff-legal__sheet .legal-table { min-width: 560px; }
.ff-legal__sheet .contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  column-gap: var(--space-6);
  margin-top: var(--space-6);
}
.ff-legal__sheet .contact-label,
.ff-legal__sheet .contact-value {
  padding: var(--space-4) 0;
  border-top: 1px solid color-mix(in srgb, var(--rule) 60%, transparent);
}
.ff-legal__sheet .contact-label { color: var(--ink-muted); }
.ff-legal__sheet .contact-value > div + div { margin-top: var(--space-3); }

/* ===== Small screens ===== */
@media (max-width: 860px) {
  .sci-models { gap: var(--space-7); }
  .sci-landing { min-height: 560px; }
  .sci-landing__content { left: var(--gutter-sm); top: 9%; max-width: 62%; }
  .sci-landing__content .ff-lede { font-size: 17px; }
  .sci-landing__slot { right: var(--gutter-sm); bottom: 9%; }
  .sci-landing__slot .ff-slot { font-size: clamp(40px, 11vw, 64px); }
  /* The hint is hidden from view but stays the accessible name of the two halves. */
  .sci-landing__hint { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; opacity: 1; transform: none; }
  .sci-slide { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .sci-slide:nth-child(even) .sci-slide__panel { order: 0; }
  .sci-slide__panel { min-height: 0; height: 36svh; }
  .sci-slide__name { left: var(--gutter-sm); bottom: var(--space-5); }
  .sci-slide__info, .sci-slide:nth-child(even) .sci-slide__info { padding: var(--space-6) var(--gutter-sm) var(--space-7); }
  .sci-carousel__bar { padding: var(--space-4) var(--gutter-sm); }
  .sci-carousel__toggle { margin-left: 0; }
}
@media (max-width: 640px) {
  .ff-legal__sheet .contact-grid { grid-template-columns: 1fr; }
  .ff-legal__sheet .contact-value { border-top: 0; padding-top: 0; }
  .ff-legal__sheet h1 { font-size: 28px; }
}
@media (max-width: 560px) {
  .sci-model .ff-facts { grid-template-columns: minmax(0, 1fr); row-gap: 2px; }
  .sci-model .ff-facts dd { margin-bottom: var(--space-3); }
}

/* ===== Compliance page (/scientific/compliance/): report form and advisories; prefix sci- ===== */
.sci-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4) var(--space-5); max-width: 860px; }
.sci-form__row { display: flex; flex-direction: column; gap: var(--space-1); }
.sci-form__row--wide, .sci-form__checks, .sci-form .ff-actions, .sci-form__status { grid-column: 1 / -1; }
.sci-form label { font-size: 14px; color: var(--ink-muted); }
.sci-form input:not([type="checkbox"]), .sci-form select, .sci-form textarea {
  font: inherit; font-size: 16px; color: var(--ink); background: var(--paper);
  border: 1px solid var(--ff-rule-strong); border-radius: var(--radius-sm); padding: var(--space-2) var(--space-3);
}
.sci-form textarea { resize: vertical; }
.sci-form input:focus-visible, .sci-form select:focus-visible, .sci-form textarea:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.sci-form__checks { display: flex; flex-direction: column; gap: var(--space-2); }
.sci-form__checks label { display: flex; gap: var(--space-2); align-items: flex-start; color: var(--ink); font-size: 15px; line-height: 1.5; }
.sci-form__checks input { margin-top: 4px; accent-color: var(--accent); }
.sci-form__hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.sci-form__status:empty { display: none; }
.sci-form__status.is-ok { color: var(--ink); }
.sci-form__status.is-error { color: var(--accent-ink); }
.sci-advisories { display: grid; gap: var(--space-5); }
.sci-advisory { border-top: 1px solid var(--rule); padding-top: var(--space-4); }
.sci-advisory h3 { margin: 0 0 var(--space-2); font-weight: 400; font-size: 20px; }
.sci-advisory p { margin: var(--space-2) 0 0; max-width: 72ch; }
@media (max-width: 860px) { .sci-form { grid-template-columns: 1fr; } }

/* ===== Compliance statement: prints as a plain paper ===== */
@media print {
  .ff-topbar, .ff-footer, .ff-dots, .ff-consent, .ff-modal, .ff-skip, .ff-subnav, .sci-noprint, .ff-next { display: none !important; }
  body.ff-page { padding: 0; }
  body[data-page="statement"] { background: #fff; color: #000; }
  /* The slot headline rolls its letters; the paper carries its full title in the line below. */
  body[data-page="statement"] .ff-pagehead__title { display: none; }
  body[data-page="statement"] [data-ff-reveal] { --ff-p: 1 !important; transform: none !important; opacity: 1 !important; }
  body[data-page="statement"] .ff-section, body[data-page="statement"] .ff-pagehead { padding: 12pt 0; break-inside: avoid; background: none; }
  body[data-page="statement"] a { color: inherit; }
}

/* ===== Sub-navigation of a page group (generated by scripts/build-scientific.py) =====
   First child of <main>: one tab per page of the group, the current one underlined. It sticks
   directly under the fixed header and scrolls sideways when the tabs do not fit. */
.ff-subnav {
  position: sticky;
  top: var(--topbar-height);
  z-index: 90;
  display: flex;
  align-items: stretch;
  gap: 0 var(--space-6);
  height: var(--ff-subnav-h);
  padding: 0 var(--gutter);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  background: var(--ff-bar-bg);
  border-bottom: 1px solid var(--rule);
  font-size: 0.8rem;
  line-height: 1.3;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.ff-subnav::-webkit-scrollbar { display: none; }
.ff-subnav a {
  display: inline-flex;
  align-items: center;
  flex: none;
  white-space: nowrap;
  color: var(--ink-muted);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color var(--dur-hover) var(--ease-plain), border-color var(--dur-hover) var(--ease-plain);
}
.ff-subnav a:hover { color: var(--accent-ink); }
.ff-subnav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--accent-ink); }
.ff-page .ff-subnav a:focus-visible { outline-offset: -4px; }   /* the row scrolls, so an outer ring would be clipped */
/* Second row for a parent page and its children (Phonos > Models > Structure, Docking …): it opens
   with the accent tick, speaks mono and scrolls away with the page; only the first row sticks. */
.ff-subnav-sub {
  display: flex;
  align-items: stretch;
  gap: 0 var(--space-5);
  height: 40px;
  padding: 0 var(--gutter);
  overflow-x: auto;
  scrollbar-width: none;
  border-bottom: 1px solid var(--rule);
  font-family: var(--ff-mono);
  font-size: 12px;
  line-height: 1.3;
  letter-spacing: 0.02em;
}
.ff-subnav-sub::-webkit-scrollbar { display: none; }
.ff-subnav-sub::before { content: ''; flex: none; align-self: center; width: var(--space-4); height: 1px; background: var(--accent); }
.ff-subnav-sub a {
  display: inline-flex;
  align-items: center;
  flex: none;
  white-space: nowrap;
  color: var(--ink-muted);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color var(--dur-hover) var(--ease-plain), border-color var(--dur-hover) var(--ease-plain);
}
.ff-subnav-sub a:hover { color: var(--accent-ink); }
.ff-subnav-sub a[aria-current="page"] { color: var(--accent-ink); border-bottom-color: var(--accent-ink); }
.ff-page .ff-subnav-sub a:focus-visible { outline-offset: -4px; }
@media print { .ff-subnav-sub { display: none !important; } }
/* The Phonos dropdown in the header: Φ marks the product, its pages sit indented under it. */
.ff-nav__item--phonos .ff-nav__mark { color: var(--ember-ink); }
@media (max-width: 860px) {
  .ff-subnav-sub { gap: 0 var(--space-4); padding: 0 var(--space-6) 0 var(--gutter-sm); }
  .ff-subnav { gap: 0 var(--space-5); padding: 0 var(--space-6) 0 var(--gutter-sm); }
  /* A soft edge on the right says "more to scroll". */
  .ff-subnav::after {
    content: '';
    position: sticky;
    right: 0;
    flex: none;
    width: var(--space-5);
    margin-left: calc(-1 * var(--space-5));
    background: linear-gradient(to right, transparent, var(--ff-bar-bg));
    pointer-events: none;
  }
}

/* Teaser tiles on the overview pages of the page groups (a titled item with a call to action): the calls to action line up along the bottom of the row
   and keep the width of their text. */
.cat-grid .ff-item { display: flex; flex-direction: column; align-items: flex-start; }
.cat-grid .ff-item > p { flex: 1 0 auto; }

/* Five tiles (Models categories, Alef subpages): three above, the last two centred below them. */
@media (min-width: 1101px) {
  .cat-grid--five { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .cat-grid--five > .ff-item { grid-column: span 2; }
  .cat-grid--five > .ff-item:nth-child(4) { grid-column: 2 / span 2; }
  .cat-grid--five > .ff-item:nth-child(5) { grid-column: 4 / span 2; }
}

/* One corner for every picture window: figures, bands, the Alef/Gimel scenes, split halves and the hero
   are all square (radius 0), as the live site is. */
.ff-band, .scn-scene, .scn-gasket__fig { border-radius: 0; overflow: hidden; overflow: clip; }

/* The footer's pause switch (html.ff-paused): the CSS animations stop where they are and state changes
   are instant. The scripts that animate (headlines, scenes, video, carousels) read the same class. */
html.ff-paused *, html.ff-paused *::before, html.ff-paused *::after {
  animation-play-state: paused !important;
  transition-duration: 0s !important;
  transition-delay: 0s !important;
  scroll-behavior: auto !important;
}
.ff-footer__links button[aria-pressed="true"] { text-decoration: underline; text-underline-offset: 3px; }

/* Open-source credits: the same column widths in every table, so the lists line up. */
[data-page="credits"] .ff-table { table-layout: fixed; min-width: 560px; }
[data-page="credits"] .ff-table th:nth-child(1) { width: 32%; }
[data-page="credits"] .ff-table th:nth-child(2) { width: 28%; }
[data-page="credits"] .ff-table td, [data-page="credits"] .ff-table th { overflow-wrap: anywhere; }


/* ===== Legal pages: one page for the company, one subpoint per product (For Phonos / For Alef / For Gimel) =====
   The existing sections keep their text; inside a subpoint they sit one heading level lower (h3, h4). */
.ff-legal__sheet .legal-scope { margin: var(--space-5) 0 var(--space-7); }
.ff-legal__sheet .legal-scope p { max-width: 62ch; }
.ff-legal__sheet .legal-subnav { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); margin: var(--space-4) 0 0; padding: var(--space-3) 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); font-family: var(--ff-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; }
.ff-legal__sheet .legal-subnav a { color: var(--ink); text-decoration: none; padding: 4px 0; border-bottom: 1px solid transparent; }
.ff-legal__sheet .legal-subnav a:hover { color: var(--accent-ink); border-bottom-color: var(--accent-ink); }
.ff-legal__sheet .legal-sub { margin-top: var(--space-8); padding-top: var(--space-6); border-top: 1px solid var(--ink); }
.ff-legal__sheet .legal-sub:first-of-type { margin-top: var(--space-6); }
.ff-legal__sheet .legal-sub__title { margin: 0 0 var(--space-5); font-size: clamp(26px, 3vw, 34px); line-height: 1.15; letter-spacing: -0.02em; font-weight: 400; }
.ff-legal__sheet .legal-sub__title::before { content: attr(data-sub-index); display: block; margin-bottom: var(--space-2); font-family: var(--ff-mono); font-size: 12px; letter-spacing: 0.1em; color: var(--accent-ink); }
.ff-legal__sheet .legal-sub h3 { font-size: 22px; line-height: 1.3; font-weight: 400; margin: var(--space-7) 0 var(--space-3); }
.ff-legal__sheet .legal-sub h4 { font-size: 18px; line-height: 1.35; font-weight: 400; margin: var(--space-6) 0 var(--space-2); }
.ff-legal__sheet .legal-sub h5 { font-size: 16px; line-height: 1.4; font-weight: 400; margin: var(--space-5) 0 var(--space-2); }