/* Aggressive mobile horizontal-scroll defense.
   overflow-x: hidden on html alone isn't enough on iOS Safari —
   the body element can still allow touch panning if its
   intrinsic width exceeds the viewport (a child with
   white-space: nowrap, an absolute-positioned overflow, etc.
   can push it). Clipping on both html AND body plus an
   explicit max-width: 100vw on body and a relative-positioning
   anchor catches every variant. */
html, body { overflow-x: hidden; }
body { position: relative; max-width: 100vw; }
/* Cap the big sections to the viewport — defensive in case a
   future child (a long word, a wide image) pushes its parent. */
#top-bar, #bottom-bar, #ff-animation,
.typeface-animations, .typeface-anim,
.home-showcase, .intro-body-row { max-width: 100vw; }

/* ── PAGE CONTENT ── */
/* Top-bar = nav row + 1px border + FFF logo block (200px /
   160px). Matches the padding math on finalfinal.ai / .ooo so
   the FFF brand mark sits the same height across all sites. */
#page-content { padding-top: calc(48px + 1px + 200px); padding-bottom: calc(44px + 1px); min-height: 100vh; opacity: 0; transition: opacity 0.6s ease; display: flex; flex-direction: column; }
#page-content.visible { opacity: 1; }
.home-showcase { flex: 1; }
@media (max-width: 768px) { #page-content { padding-top: calc(44px + 1px + 160px); } }

/* ── HERO TEXT ──
   Morph hover sizing + per-letter font-variation-settings
   transitions. The wrapper has moved to .intro-body-left below,
   but these rules stay because the magnetic JS targets them. */
.hero-text {
    font-family: 'FFMonoVF', 'FFMono', monospace;
    font-size: clamp(16px, 2vw, 28px);
    line-height: 1.4;
    letter-spacing: 0.02em;
    color: var(--nav-color);
    transition: color 0.4s ease;
}
.hero-text .word {
    display: inline-block;
    font-variation-settings: 'wght' 30;
    transition: font-variation-settings 0.08s ease-out;
    white-space: nowrap;
}
/* ── FONT SHOWCASE CELLS ── */
.home-showcase {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    /* Use minmax(0,1fr) instead of bare 1fr so grid items
       never expand past their declared track size based on
       their min-content — without this, a long title bar
       string can push the column wider than the viewport on
       mobile and the cells appear cut off on the right edge. */
    grid-template-columns: repeat(2, minmax(0, 1fr));
    flex: 1;
}
/* Wrapper now holds two children: the 16:9 image area + a title
   bar below (matches the commissions.html cell structure).
   min-width: 0 is required because the grid default min-width is
   the cell's min-content. A long title-bar string with
   white-space: nowrap would otherwise push the cell wider than
   its 1fr column (and on mobile, past the viewport edge). */
.home-showcase-cell {
    display: flex;
    flex-direction: column;
    background: transparent;
    position: relative;
    cursor: none;
    min-width: 0;
}
.home-showcase-cell > * { min-width: 0; }
.home-showcase-title-text,
.home-showcase-title-meta { min-width: 0; }
/* 16:9 image / letter area inside each cell. The previous
   per-cell background-fill on hover lives on this child now. */
.home-showcase-image {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 16 / 9;
    border-right: 1px solid var(--nav-color);
    border-top: 1px solid var(--nav-color);
    overflow: hidden;
    background: transparent;
    transition: background 0.15s;
}
.home-showcase-cell:nth-child(2n) .home-showcase-image { border-right: none; }
/* Black/white invert for typeface cells (no --cell-color set) */
.home-showcase-cell:hover .home-showcase-image { background: var(--nav-color); }
.home-showcase-image span {
    /* Single-glyph "A" — bumped from 14vw for more visual weight
       inside a 50vw-wide × ~28vw-tall (16:9) cell. */
    font-size: 18vw;
    line-height: 1;
    color: var(--nav-color);
    display: block;
    transition: color 0.15s;
    pointer-events: none;
}
/* Two-glyph "Aa" — shrink so both letters fit inside the cell. */
.home-showcase-image span.glyph-pair { font-size: 13vw; }
.home-showcase-cell:hover .home-showcase-image span { color: var(--bg-color); }
/* The cover image / video inside a commission cell */
.home-showcase-image img,
.home-showcase-image video {
    width: 100%; height: 100%;
    object-fit: cover;
    position: absolute; top: 0; left: 0; display: block;
    transition: filter 0.25s ease;
}
/* Blur-only hover effect for commission covers (typefaces have
   no cover so the rule is a no-op for them). */
.home-showcase-cell:hover .home-showcase-image img,
.home-showcase-cell:hover .home-showcase-image video {
    filter: blur(10px) brightness(0.6);
}
/* Title bar below the image, matching .project-title on
   commissions.html (title left, meta right). */
.home-showcase-title {
    padding: 12px 16px;
    font-family: 'FFMono', monospace;
    font-size: 10pt;
    color: var(--nav-color);
    letter-spacing: 0.02em;
    background: var(--bg-color);
    border-right: 1px solid var(--nav-color);
    border-top: 1px solid var(--nav-color);
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.home-showcase-cell:nth-child(2n) .home-showcase-title { border-right: none; }
/* On hover: title bar inverts. Commission cells supply a
   --cell-color; typeface cells fall back to --nav-color (black). */
.home-showcase-cell:hover .home-showcase-title {
    background: var(--cell-color, var(--nav-color));
    color: var(--bg-color);
    border-color: var(--cell-color, var(--nav-color));
}
.home-showcase-title-text {
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.home-showcase-title-meta {
    text-align: right;
    text-transform: uppercase;
    opacity: 0.85;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Empty/crossed cell */
.home-showcase-cell.empty .home-showcase-image::before,
.home-showcase-cell.empty .home-showcase-image::after {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none;
}
.home-showcase-cell.empty .home-showcase-image::before {
    background: linear-gradient(
        to bottom right,
        transparent calc(50% - 0.5px),
        var(--nav-color) calc(50% - 0.5px),
        var(--nav-color) calc(50% + 0.5px),
        transparent calc(50% + 0.5px)
    );
}
.home-showcase-cell.empty .home-showcase-image::after {
    background: linear-gradient(
        to bottom left,
        transparent calc(50% - 0.5px),
        var(--nav-color) calc(50% - 0.5px),
        var(--nav-color) calc(50% + 0.5px),
        transparent calc(50% + 0.5px)
    );
}
.home-showcase-cell.empty:hover .home-showcase-image { background: transparent; }
.home-showcase-cell.empty .home-showcase-title { display: none; }
@media (max-width: 768px) {
    /* Stack cells full-width on mobile so the 16:9 frame + title
       bar both have room (matches commissions.html behavior).
       minmax(0,1fr) — see desktop rule above — keeps long titles
       from pushing the column past the viewport edge. */
    .home-showcase { grid-template-columns: minmax(0, 1fr); }
    /* Frame each cell with a 1px border on every side so the
       column has clean edges like typefaces.html / commissions.html
       on mobile. The default 2-column rules drop border-right on
       the right column, so we restore it explicitly here. */
    .home-showcase-cell .home-showcase-image,
    .home-showcase-cell .home-showcase-title {
        border-left: 1px solid var(--nav-color);
    }
    .home-showcase-cell:nth-child(2n) .home-showcase-image,
    .home-showcase-cell:nth-child(2n) .home-showcase-title {
        border-right: 1px solid var(--nav-color);
    }
    /* Bigger glyph for the wider cell. */
    .home-showcase-image span { font-size: 30vw; }
    .home-showcase-image span.glyph-pair { font-size: 22vw; }
    .home-showcase-title { padding: 12px 16px; font-size: 10pt; }
}

/* ── BIG TYPEFACE ANIMATIONS ──
   One full-width 16:9 cell per typeface. Big letter animates on the
   variable axis and the text content cycles through the font name plus
   a few sample words. On hover, the axis follows the cursor's X
   position and the text snaps to the font name. */
.typeface-animations {
    display: flex;
    flex-direction: column;
    /* Pull the stack up under the FFF logo's descender area
       so the first animation cell sits visibly closer to the
       FFF letters. The page-content padding-top stays in
       lockstep with finalfinal.ai / .ooo (don't touch that);
       this margin is local to the foundry home only. */
    margin-top: -80px;
}
@media (max-width: 768px) {
    .typeface-animations { margin-top: -48px; }
}
.typeface-anim {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    /* Same min-content fix as home-showcase-cell: the big
       text inside has white-space: nowrap and could otherwise
       push the cell wider than its declared 100%. */
    min-width: 0;
    aspect-ratio: 16 / 9;
    border-top: 1px solid var(--nav-color);
    overflow: hidden;
    background: var(--bg-color);
    text-decoration: none;
    cursor: none;
}
/* First cell sits flush under the FFF logo — no top divider. */
.typeface-anim:first-child { border-top: none; }
.typeface-anim:last-child  { border-bottom: 1px solid var(--nav-color); }
/* Inverted cells (CMS-controlled via font.homeInverted): swap
   the cell's background + text colours. Both label and text use
   the (--bg-color) on a (--nav-color) background. */
.typeface-anim.is-inverted               { background: var(--nav-color); }
.typeface-anim.is-inverted .typeface-anim-text  { color: var(--bg-color); }
.typeface-anim.is-inverted .typeface-anim-label { color: var(--bg-color); }
.typeface-anim-text {
    font-size: 14vw;
    line-height: 1;
    color: var(--nav-color);
    white-space: nowrap;
    /* Receive mouse events so the axis-scrub interaction only
       fires when the cursor is actually over the typography
       (not the empty space around it in the cell). */
    pointer-events: auto;
    cursor: none;
    transition: color 0.2s ease;
}
.typeface-anim-label {
    position: absolute;
    bottom: 16px; left: 20px;
    font-family: 'FFMono', monospace;
    font-size: 8pt;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--nav-color);
    pointer-events: none;
    opacity: 0.6;
}
@media (max-width: 768px) {
    .typeface-anim-text { font-size: 22vw; }
    .typeface-anim-label { font-size: 7pt; bottom: 12px; left: 14px; }
}

/* ── INTRO + BODY TEXT ROW ──
   Two-column row below the project grid. Left cell carries the intro
   text with the same morph hover behavior the old hero had. Right cell
   carries the body description from the CMS. */
.intro-body-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-top: 1px solid var(--nav-color);
}
.intro-body-cell {
    padding: 80px 24px;
    color: var(--nav-color);
}
.intro-body-left {
    border-right: 1px solid var(--nav-color);
}
.intro-body-right {
    font-family: 'FFMono', monospace;
    font-size: 11pt;
    line-height: 1.4;
    letter-spacing: 0.02em;
}

@media (max-width: 768px) {
    .intro-body-row { grid-template-columns: 1fr; }
    .intro-body-left {
        border-right: none;
        border-bottom: 1px solid var(--nav-color);
    }
    .intro-body-cell { padding: 40px 24px; }
}