/* Alef Portal and Gimel pages (October 2026): the Phonos page rhythm.
   Pictures sit in .ff-split blocks (text on one half, the photo running to the display edge on
   the other, stacked full-width on phones), exactly as on /scientific/phonos/how-it-works/.
   Full-bleed figures inside sections use shared/ff/bleed.css. The scenes and animations
   (gm-scene, fi-anim, scn-*) keep their own styles in alef.css, gimel.css and the scene CSS. */

/* Photos: always cover their half, never letterboxed. */
.fi-photo .ff-split__media img { inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fi-photo .ff-split__media picture { display: contents; }

/* Copy inside a split, Alef/Gimel components: same spacing as the Phonos lists. */
.fi-photo .ff-split__text .ff-trail { margin-top: var(--space-6); }
.fi-photo .ff-split__text .ff-trail > * + * { margin-top: var(--space-5); }
.fi-photo .ff-split__text .ff-trail > .ff-list:first-child,
.fi-photo .ff-split__text .ff-trail > .ff-defs:first-child { margin-top: 0; }
.fi-photo .ff-split__text .ff-body,
.fi-photo .ff-split__text .ff-note { max-width: 52ch; }

/* The materials catalogue keeps its stack animation, now alone under the four materials. */
.fi-figures--one { grid-template-columns: minmax(0, 1fr); max-width: calc(50% - var(--space-5)); }
@media (max-width: 860px) { .fi-figures--one { max-width: none; } }

/* Former scene carousels, now plain item grids (Alef approach: levers and topics). */
.ff-item .fi-tagline { margin: var(--space-2) 0 0; font-size: 17px; line-height: 1.4; color: var(--ink); }
.ff-item .fi-tagline + p { margin-top: var(--space-3); }
.ff-item .fi-proof { display: block; margin-top: var(--space-3); font-size: 14px; line-height: 1.5; color: var(--ink-muted); }
.ff-item a.fi-proof { color: var(--ff-accent-ink); text-decoration: none; }
.ff-item a.fi-proof:hover { text-decoration: underline; text-underline-offset: 3px; }
.fi-proof__label { font-family: var(--ff-mono); font-size: 12px; letter-spacing: 0.02em; text-transform: uppercase; margin-right: 4px; }

/* ===== Overview pages (/scientific/alef/, /scientific/gimel/), council rework 2026-10-27 =====
   Photo hero → one ff-split paragraph → "how it works" with the one lazy scene → a photo grid with
   one tile per subpage → a second split → a black call-to-action band. Existing components only;
   these rules adapt them, no new tokens. */

/* Hero: the design system's .ff-hero, full-bleed and one screen tall between the bars. */
.ff-hero.fi-hero-photo {
  margin: 0;
  height: calc(var(--ff-vh) - var(--topbar-height) - var(--ff-subnav-h));
  min-height: 480px;
}
.fi-hero-photo picture { display: contents; }
.fi-hero-photo .ff-hero__img { object-position: center; }
.fi-hero-photo .ff-hero__title { font-size: clamp(48px, 9vw, 120px); font-weight: 400; line-height: 1; letter-spacing: -0.03em; text-shadow: 2px 2px 15px var(--scrim); }
.fi-hero-photo .ff-actions { margin-top: var(--space-6); }
.fi-hero-photo .ff-btn--line { color: var(--on-image); border-color: currentColor; }
.fi-hero-photo .ff-btn--line:hover { background: var(--on-image); color: var(--night); }

/* Photo grid: one tile per subpage, 1px rules, square corners. */
.fi-tiles {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--ff-rule-strong);
  border-left: 1px solid var(--ff-rule-strong);
}
@media (min-width: 600px) { .fi-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .fi-tiles { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.fi-tiles > li { display: flex; border-right: 1px solid var(--ff-rule-strong); border-bottom: 1px solid var(--ff-rule-strong); background: var(--stage-100); }
.fi-tile { display: flex; flex-direction: column; width: 100%; color: inherit; text-decoration: none; }
.fi-tile__img { position: relative; margin: 0; aspect-ratio: 4 / 3; overflow: hidden; background: var(--stage-200); border-bottom: 1px solid var(--ff-rule-strong); }
.fi-tile__img picture { display: contents; }
.fi-tile__img img { width: 100%; height: 100%; max-width: none; object-fit: cover; transition: transform var(--dur-panel) var(--ease-out-quart); }
.fi-tile:hover .fi-tile__img img { transform: scale(1.03); }
.fi-tile__body { display: flex; flex: 1; flex-direction: column; gap: var(--space-2); padding: var(--space-5); }
.fi-tile__body h3 { margin: 0; font-size: 20px; font-weight: 400; line-height: 1.25; }
.fi-tile__body p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--ink-muted); }
.fi-tile__go { margin-top: auto; padding-top: var(--space-3); color: var(--ff-accent-ink); font-size: 14px; }
.fi-tile:hover h3, .fi-tile:focus-visible h3 { color: var(--ff-accent-ink); }
.ff-page .fi-tile:focus-visible { outline: 3px solid var(--ff-accent); outline-offset: -3px; }
.fi-tiles-note { margin: var(--space-4) 0 0; font-size: 12px; color: var(--ink-muted); }
@media (prefers-reduced-motion: reduce) { .fi-tile__img img { transition: none; } .fi-tile:hover .fi-tile__img img { transform: none; } }

/* Black call-to-action band, the footer's colours. */
.fi-cta-band {
  padding: calc(4 * var(--ff-cell)) var(--gutter);
  background: var(--ff-footer-bg);
  color: var(--ff-footer-ink);
}
.fi-cta-band .ff-headline { margin: 0; color: inherit; }
.fi-cta-band p { max-width: 52ch; margin: var(--space-4) 0 0; font-size: 17px; line-height: 1.55; color: inherit; opacity: 0.8; }
.fi-cta-band .ff-actions { margin-top: var(--space-6); }
.fi-cta-band .ff-btn--line { color: inherit; border-color: currentColor; }
.fi-cta-band .ff-btn--line:hover { background: var(--ff-footer-ink); color: var(--ff-footer-bg); }
@media (max-width: 860px) { .fi-cta-band { padding: calc(4 * var(--ff-cell)) var(--gutter-sm); } }