/* =========================================================
   ONA — case study, ONA-SPECIFIC LAYOUT ONLY.
   Type hierarchy comes entirely from the home tokens in styles.css
   (.display-xxl / .display-xl / .display-l / .display-m, base body,
   .lead, .label) and the shared layout from cs2.css.
   No font sizes are declared here — one scale across the whole site.
   ========================================================= */

/* ---- HERO ---- */
.ona-hero { min-height: 100svh; display: flex; flex-direction: column; justify-content: space-between; padding: 120px var(--gutter) 48px; overflow: hidden; }
.ona-hero__top { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.ona-hero__title { margin: auto 0; }                       /* size from .display-xxl */
.ona-hero__foot { display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; flex-wrap: wrap; }
.ona-hero__cta { display: inline-flex; gap: 10px; align-items: center; }   /* size from .label */
.ona-hero__cta .arrow { display: inline-block; animation: bob 1.9s var(--ease) infinite; }

/* ---- facts reveal ("she's 32 … and she doesn't exist") ---- */
.facts { display: flex; flex-direction: column; gap: clamp(8px, 1.4vh, 18px); }
.facts .big { color: var(--accent); margin-top: 0.3em; }   /* size from .display-xl in markup */

/* ---- portrait grids ---- */
.pgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(10px, 1.4vw, 22px); }
.pgrid img, .pgrid video { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; display: block; }
/* Her world: images are portrait/full-body; crop from the top so faces are never cut */
#her-world .wide { object-position: center top; }
@media (max-width: 640px) { .pgrid { grid-template-columns: repeat(2, 1fr); } }

/* ---- dense face reference grid ---- */
.facegrid { display: grid; grid-template-columns: repeat(6, 1fr); gap: clamp(6px, 0.8vw, 12px); }
.facegrid img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; display: block; }
@media (max-width: 760px) { .facegrid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 460px) { .facegrid { grid-template-columns: repeat(3, 1fr); } }

/* ---- vertical clips row ---- */
.clips { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(12px, 2vw, 28px); }
.clips video { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; display: block; background: #1a1a18; }
@media (max-width: 640px) { .clips { grid-template-columns: 1fr 1fr; } }

/* ---- workflow flow (mono size from .label) ---- */
.flow { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; }
.flow em { font-style: normal; color: var(--accent); padding: 0 2px; }
.flow s { text-decoration: none; opacity: 0.45; }
.tools { display: flex; flex-wrap: wrap; gap: 8px 20px; color: var(--accent); margin-top: 28px; }

/* ---- learned list (size from base body) ---- */
.learned { list-style: none; display: grid; gap: clamp(10px, 1.6vh, 20px); }
.learned li { position: relative; padding-left: 1.4em; line-height: 1.5; }
.learned li::before { content: "→"; position: absolute; left: 0; color: var(--accent-ink); }