, since self-link is a no-op */
}
.hero-art--inline .promo-form {
width: 100%;
/* default justify-content (flex-start) leaves the row at the column's
left edge; the input field flex-grows to fill the available width */
}
/* Benchies standalone hero-illo (between sections) ======================
The .hero-illo on the Benchies page sits as a direct child of .prose,
between the 'That's what a Benchie is for.' and 'Benchies Release. 2027'
sections. Center it horizontally and shrink 30% from the homepage default
(415 × 0.7 ≈ 290). Scoped to body--benchies so the homepage illo is
unaffected. */
.body--benchies .prose > .hero-illo {
width: 290px;
max-width: 100%;
margin: 48px auto 0; /* 48px above for more separation from the paragraph */
}
/* Benchies-page bubble-hover overrides ====================================
The standalone illustration on Benchies is smaller (290px vs homepage 415)
AND repositioned, so the bubble needs its own offsets + size.
- Moved left 32px: -10 → -42
- Moved down 4px: -18 → -14
- Shrunk 18%: 95×85 → 78×70 */
.body--benchies .bubble-hover {
top: -14px;
left: -24px;
width: 78px;
height: 70px;
}
/* Bottom breathing room — 260px under every content section ==============
Stops the content from feeling like it ends with a hard cut at the bottom
of the viewport. Scoped to .prose so it lands on every text-based page
(Faye, Samira, Benchies, Manifesto, Story, Carries, Job Board, Business
Center). Homepage uses .hero-art which is vertically centered in .stage,
so it doesn't need this. */
.prose {
padding-bottom: 260px;
}
/* Cursor-following tooltip ================================================
Marker: .cursor-tooltip on a hover target. JS creates a single global
pill element (#cursor-tooltip) pinned with position:fixed, then updates
its top/left on every mousemove inside the target — 12px right + 12px
below the cursor (slight down offset keeps the pill out of the cursor
sprite). Visual matches .has-tooltip::after exactly (black pill, white
SF Mono caption, soft drop shadow). */
#cursor-tooltip {
position: fixed;
top: 0;
left: 0;
background: #0A0A0A;
color: #fff;
padding: 8px 14px;
border-radius: 8px;
font: 500 13px/1 ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
letter-spacing: 0.01em;
white-space: nowrap;
pointer-events: none;
opacity: 0;
z-index: 9999;
box-shadow: 0 4px 16px rgba(10, 10, 10, 0.18);
transition: opacity .15s ease;
will-change: transform, opacity;
}
#cursor-tooltip.is-visible {
opacity: 1;
}
.cursor-tooltip {
/* The trigger element itself just needs a position context — the actual
tooltip lives in a fixed-position element pinned to . */
}
/* Illo handler label (bio pages — vertical illustration in .two-col) ====
The .illo-frame wraps the existing img.illo so a positioned span can
sit in its bottom-left corner. Color matches unselected rail nav items
(#9A9A9A), 10pt sans uppercase, 16px padding from the bottom + left
edges (and a matching right padding so longer artist names wrap cleanly
rather than overflow the frame). */
.two-col .illo-frame {
position: relative;
display: block;
}
.two-col .illo-frame img.illo {
display: block;
margin: 0;
}
.illo-handler {
position: absolute;
left: 16px;
right: 16px;
bottom: 16px;
font-family: var(--sans);
font-size: 6pt;
font-weight: 500;
letter-spacing: 0.04em;
color: #9A9A9A;
/* text-transform removed — sentence case now comes from the markup */
pointer-events: none;
/* The .illo image has overflow:hidden via its border-radius + object-fit;
the label sits ABOVE it via z-index since both share the same stacking
context inside .illo-frame. */
z-index: 1;
}
/* Mobile nav (≤ 900px) =====================================================
Portfolio-style menu: 3-bar hamburger morphs into X on open, full-viewport
blur backdrop fades in via opacity+visibility, menu items cascade up with
staggered nth-child delays. Items remain bottom-left positioned at 24px
padding (per the TeakTime layout spec). */
/* Hide on desktop. */
.nav-hamburger,
.nav-backdrop {
display: none;
}
@media (max-width: 1024px) {
/* --- Page shell becomes a single column --- */
.page,
.body--home .page { /* override the desktop .body--home padding: 0 64px so home tracks the same single-col mobile shell as every other page */
grid-template-columns: 1fr;
padding: 0;
gap: 0;
min-height: 100vh;
}
/* --- Rail becomes a fixed top bar (centered logo only) --- */
.rail {
grid-row: auto;
align-self: auto;
width: 100%;
}
.rail-inner {
position: fixed;
top: 0;
left: 0;
right: 0;
width: 100%;
height: auto;
flex-direction: row;
justify-content: center;
align-items: center;
padding: 24px 24px; /* symmetric vertical padding — logo + hamburger sit dead-center in the bar */
/* IMPORTANT: keep .rail-inner free of backdrop-filter / non-none transform /
will-change so it does NOT become a containing block for the fixed nav
inside it. The frosted-glass effect lives on the ::before pseudo, which
can carry filter without affecting the parent's containing-block status. */
background: transparent;
z-index: 100;
transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
}
.rail-inner::before {
content: '';
position: absolute;
inset: 0;
background: rgba(255, 255, 255, 0.65);
-webkit-backdrop-filter: blur(20px) saturate(160%);
backdrop-filter: blur(20px) saturate(160%);
z-index: -1; /* sits BEHIND the logo + hamburger */
pointer-events: none;
}
.rail-inner.rail-hidden {
transform: translateY(-100%);
}
/* When the nav is open: drop the rail's transform so it stays in the
containing-block-free state and the fixed nav inside positions
relative to the viewport. Also force the pseudo's blur off so the
fullscreen menu reads cleanly over a solid backdrop. */
body.nav-open .rail-inner {
transform: none !important; /* override .rail-hidden if it was scrolled away */
}
body.nav-open .rail-inner::before {
-webkit-backdrop-filter: none;
backdrop-filter: none;
background: rgba(255, 255, 255, 0.92);
}
.rail-inner .logo {
margin-bottom: 0;
width: 140px;
aspect-ratio: auto; /* drop the desktop 555/141 constraint — let the SVG size itself naturally from width */
height: auto;
overflow: visible;
}
.rail-inner .logo img {
width: 100%;
height: auto; /* SVG draws at its natural aspect — no descender clipping */
object-fit: initial;
animation: none;
transform: none;
}
.rail nav {
display: none; /* hidden until .nav-open */
}
/* --- Hamburger (3 bars → X morph), 18×18, vertically centered with the logo ---
Rail padding is 24px top + 24px bottom; the 140px-wide logo renders ~36px
tall (SVG aspect 555:141), so the logo's vertical center sits at 24 + 18 = 42px
from viewport top. Half of 18px hamburger is 9, so top: 33px puts the
hamburger's center on the same 42px line. */
.nav-hamburger {
display: flex;
position: fixed;
top: 33px;
right: 24px;
width: 18px;
height: 18px;
padding: 3px 0; /* keeps the 3 bars centered inside the 18×18 hit box */
background: transparent;
border: 0;
cursor: pointer;
flex-direction: column;
justify-content: space-between;
align-items: stretch;
box-sizing: border-box;
z-index: 200;
-webkit-tap-highlight-color: transparent;
}
/* Expanded hit area so touch targets don't feel pixel-perfect */
.nav-hamburger::before {
content: '';
position: absolute;
inset: -16px; /* slightly more padding now that the visible target shrank */
}
.nav-hamburger .bar {
display: block;
width: 100%;
height: 2px;
background: #0A0A0A;
border-radius: 1px;
transition: transform 280ms ease, opacity 200ms ease;
transform-origin: center;
}
body.nav-open .nav-hamburger .bar:nth-child(1) {
transform: translateY(5px) rotate(45deg); /* slides to vertical center of 18×18 (12px usable, ~5px to center) */
}
body.nav-open .nav-hamburger .bar:nth-child(2) {
opacity: 0;
}
body.nav-open .nav-hamburger .bar:nth-child(3) {
transform: translateY(-5px) rotate(-45deg);
}
/* --- Backdrop (blurs main content) --- */
.nav-backdrop {
display: block;
position: fixed;
inset: 0;
background: rgba(255, 255, 255, 0.55);
backdrop-filter: blur(24px);
-webkit-backdrop-filter: blur(24px);
opacity: 0;
visibility: hidden; /* iOS Safari: makes the overlay truly uninteractive */
pointer-events: none;
z-index: 90;
/* Quick fade so the blur "sets" almost immediately — the nav-cat cascade
below fires at 0ms delay, so the menu reads as rolling in right after. */
transition: opacity 120ms ease, visibility 0ms linear 120ms;
}
body.nav-open .nav-backdrop {
opacity: 1;
visibility: visible;
pointer-events: auto;
transition: opacity 120ms ease, visibility 0ms linear 0ms;
}
/* Push main content below the top bar */
.stage,
.stage--page {
padding-top: 88px;
}
/* --- Open menu: centered in viewport, items cascade up --- */
body.nav-open .rail nav {
display: flex;
flex-direction: column;
gap: 16px;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
z-index: 95;
max-width: calc(100vw - 48px);
}
body.nav-open .rail nav .nav-cat {
margin: 0;
text-align: center;
}
body.nav-open .rail nav .nav-cat h2 {
font-size: 0.9rem;
}
body.nav-open .rail nav .nav-cat ul {
padding-left: 0;
list-style: none;
text-align: center;
}
body.nav-open .rail nav .nav-cat li {
line-height: 1.8;
text-align: center;
}
body.nav-open .rail nav a {
display: inline-block;
}
/* Cascade animation pattern (lifted from portfolio site).
The first item fires at 0ms delay so the menu starts animating the
instant the hamburger is tapped — the per-item duration (220ms) and
the 40ms stagger between items are the original "ladder" timing,
left alone. */
.rail nav .nav-cat {
opacity: 0;
transform: translateY(6px);
transition: opacity 120ms ease, transform 220ms ease;
}
body.nav-open .rail nav .nav-cat {
opacity: 1;
transform: translateY(0);
animation: nav-cascade 220ms ease backwards;
}
body.nav-open .rail nav .nav-cat:nth-child(1) { animation-delay: 0ms; }
body.nav-open .rail nav .nav-cat:nth-child(2) { animation-delay: 40ms; }
body.nav-open .rail nav .nav-cat:nth-child(3) { animation-delay: 80ms; }
body.nav-open .rail nav .nav-cat:nth-child(4) { animation-delay: 120ms; }
body.nav-open .rail nav .nav-cat:nth-child(5) { animation-delay: 160ms; }
@keyframes nav-cascade {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
.rail nav .nav-cat {
transition: opacity 120ms ease;
transform: none;
}
body.nav-open .rail nav .nav-cat {
animation: none;
transition-delay: 0ms;
}
}
/* Lock body scroll when menu is open */
body.nav-open {
overflow: hidden;
}
/* Inline hero on Benchies wraps a bit tighter on small screens too */
.hero-art--inline .hero-illo {
width: 100%;
max-width: 320px;
}
}
/* Mobile responsiveness sweep (≤ 900px) ==================================
Clean-sweep tightening across the site. Each rule below addresses a
pattern that worked at desktop widths but read cramped or overflowed on
phone-sized viewports. Lives as an additive media block — desktop CSS
above is untouched. */
/* Component breakpoints — fire EARLIER than the full layout flip (≤1024px)
so individual grids respond at the widths where they actually need to. */
/* Bio-page sketch-tile row: 4 columns → 2×2 grid at ≤1260px */
@media (max-width: 1260px) {
.illo-row {
grid-template-columns: repeat(2, 1fr);
gap: 12px;
}
}
/* Two-col text+illo blocks: stack vertically at ≤1200px (was 1024) */
@media (max-width: 1200px) {
.two-col {
grid-template-columns: 1fr;
gap: 24px;
}
}
/* Benchies character row: 4 flex items → 2×2 grid at ≤1024px (full mobile sweep
threshold — the row needs the rail-collapsed layout to have room for tiles). */
@media (max-width: 1024px) {
.benchies-row-1 {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px;
justify-content: stretch;
}
.benchies-row-1 .brow-item {
flex: initial;
width: 100%;
}
}
/* Benchies row collapses to a single column at ≤700px. Each character
illustration is shrunk 20% and centered in the column; row gap is
doubled (12 → 24) so the stacked illustrations breathe. */
@media (max-width: 700px) {
.benchies-row-1 {
grid-template-columns: 1fr;
gap: 24px; /* doubled from 12px */
}
.benchies-row-1 .brow-item {
width: 80%; /* −20% from full column width */
justify-self: center; /* keep centered on the page */
}
}
@media (max-width: 1024px) {
/* 4. Page title fluid scaling — tightened ceiling so h1 shrinks
more in proportion with the illustration + quote below it. */
.prose h1 {
font-size: clamp(1.75rem, 6.5vw, 2.25rem); /* was 2rem / 8vw / 3rem */
line-height: 1.1;
}
.prose h2 {
font-size: 1rem;
}
/* 5. Content stage padding — side breathing room + top buffer for the
mobile top bar (logo + hamburger). Default 24px each side; bio /
manifesto / story pages already use padding-top: 112px on desktop,
so use a smaller fixed value tuned for the top bar.
Also reset justify-content from the desktop's flex-end (which
hugs prose against the page's 300px right padding on wide screens)
to flex-start so the prose sits naturally at the left of the
single-column shell, matching the rest of the mobile layout. */
.stage--page {
padding: 96px 24px 0;
justify-content: center;
}
.body--faye .stage--page,
.body--samira .stage--page,
.body--manifesto .stage--page,
.body--story .stage--page {
padding-top: 96px;
}
/* 6. Hero video on bio pages: taller aspect so the character reads
clearly instead of being a horizontal sliver */
.illo-video-clip {
aspect-ratio: 16 / 9;
}
/* 7. Callout (Story page quote block) — tighten the padding so it
doesn't dominate a small viewport */
.callout {
padding: 20px;
margin: 32px 0;
}
.callout::after {
width: 24px;
height: 24px;
top: 16px;
right: 18px;
}
/* 8. Job board: tighter row padding; filter always left-aligned so the
pill anchors to the start of the row even when there's space for
the count beside it. The bar wraps the count to its own line below
the pill once the row is too narrow. */
.prose .job-item {
padding-bottom: 16px;
}
.prose .job-item-row {
gap: 16px;
align-items: flex-start; /* icon hugs the top — extra subtitle lines push down only the text column */
}
/* Filter bar stays horizontal: pill on the left, "X Available Commissions"
count anchored to the right — same x-axis as desktop, no wrap-to-next-line. */
.prose .job-filter-bar {
justify-content: space-between;
flex-wrap: nowrap;
gap: 12px;
}
.prose .job-filter {
flex-shrink: 0;
}
.prose .job-filter-count {
margin-top: 0;
text-align: right;
flex-shrink: 1;
min-width: 0;
}
.prose .job-filter-divider {
width: 100%; /* always visible across the column */
}
.prose .job-item-title {
font-size: 1rem;
}
/* Subtitle — allow the desc text to wrap to 2 lines instead of being
truncated to 1 with an ellipsis. Position-type + dot align with the
FIRST line of desc (baseline), so the dot doesn't float orphaned
above multi-line desc. Icon column (.job-item-icon) stays put at the
top via align-items: flex-start on the row. */
.prose .job-item-subtitle {
align-items: baseline; /* dot/position-type sit on desc's first-line baseline */
flex-wrap: nowrap; /* keep pos-type + dot + desc on the same "row" — desc grows downward via -webkit-box */
}
.prose .job-subtitle-desc {
white-space: normal; /* allow line wrapping */
overflow: hidden;
text-overflow: clip;
display: -webkit-box;
-webkit-line-clamp: 2; /* cap at 2 lines */
line-clamp: 2;
-webkit-box-orient: vertical;
line-height: 1.45;
}
/* Hide the floating job preview tooltip on mobile (no hover) */
.prose .job-preview {
display: none;
}
/* 9. illo-handler credit ('Handled by Sepo') — bump from 6pt to 8pt
so the line reads on a phone screen */
.illo-handler {
font-size: 8pt;
left: 12px;
right: 12px;
bottom: 12px;
}
/* 10. Lang picker — keep it tucked but not on top of menu content */
.foot {
bottom: 16px;
left: 16px;
}
/* 11. Stage homepage centering — when stacked, hero-art already responds
to the .hero-art--inline / hero-grid stack-at-1500 breakpoint, but
on a phone we also want side padding on the .hero-art container */
.hero-art {
padding-left: 24px;
padding-right: 24px;
max-width: 100%;
}
/* 12. Job board page hero — same edge padding as other content */
.body--job-board .stage--page {
padding-left: 24px;
padding-right: 24px;
}
/* 13. .prose has padding-bottom: 260px (page-end breathing room set
site-wide). At mobile that's overkill; halve it. */
.prose {
padding-bottom: 120px;
}
}
/* Mobile sweep — round 2 ==================================================
Refinements layered on top of the first mobile pass. Adds:
- text/input safety (no iOS auto-zoom, no horizontal overflow)
- section rhythm tightening at mobile (48px → 32px)
- touch-target sizing for taps
- a small-phone tier (≤ 480px) for the tightest viewports */
@media (max-width: 1024px) {
/* ---- A. Text safety ------------------------------------------------- */
/* Long words / URLs shouldn't blow out the column. */
.prose,
.prose p,
.prose h1,
.prose h2,
.prose li {
overflow-wrap: break-word;
word-wrap: break-word;
}
/* Inline links in prose: keep the underline but allow breaking on long URLs */
.prose a.inline,
.prose a[href*="://"] {
overflow-wrap: anywhere;
}
/* ---- B. Form inputs ------------------------------------------------- */
/* iOS Safari auto-zooms when tapping with font-size < 16px.
Bump every form input + textarea to at least 16px on mobile. */
.promo-input input,
input[type="email"],
input[type="text"],
input[type="search"],
textarea {
font-size: 16px;
}
/* ---- C. Section rhythm tightened ------------------------------------ */
/* Desktop uses 48px between sections — on small viewports that's a lot
of dead space. Pull it back to ~32px so more content fits on screen. */
.prose h2 {
margin: 32px 0 12px;
}
.body--faye .prose h2,
.body--samira .prose h2,
.body--manifesto .prose h2,
.body--story .prose h2 {
margin: 32px 0 8px;
}
.prose hr {
margin: 32px 0;
}
.two-col {
margin: 32px 0 0;
}
.prose h2.balanced {
margin: 32px 0 32px;
}
/* ---- D. Tap targets ------------------------------------------------- */
/* Anchor links should be tall enough to tap reliably (Apple HIG says 44px;
Material Design says 48dp). Add a touch-fudge on small links without
visually changing them. */
.prose a,
.rail nav a {
/* Prevent rapid double-tap zoom on iOS */
touch-action: manipulation;
}
/* Email submit button — bump touch area */
.promo-submit {
width: 48px;
height: 48px;
flex-shrink: 0;
}
/* Job board: each row already has enough vertical padding for tapping. */
/* ---- E. Tile sparkles ------------------------------------------------ */
/* The decorative sparkle SVG positions are absolute % of the tile. On
smaller tiles (2×2 grid), the % math still works — but the dizzy/sparkle
can look oversized. Scale down slightly. */
.illo-tile .brow-tile-sparkle--b {
width: 32px; /* was 45 at desktop */
height: 32px;
margin-left: -16px;
margin-top: -16px;
}
/* ---- F. Hero illustration on bio pages ------------------------------ */
/* The illo-video-wrap is centered. On mobile it's full width by default,
which is fine, but add a bit of margin breathing room. */
.illo-video-wrap {
margin: 16px 0;
}
/* ---- G. Title row (h1 + marker) ------------------------------------- */
/* Keep the marker SVG from dominating at small viewport. The marker SVG
is normally inline; make sure it shrinks alongside the h1. */
.body--faye .title-row,
.body--samira .title-row,
.body--manifesto .title-row {
flex-wrap: wrap;
gap: 8px;
}
.body--faye .title-marker,
.body--samira .title-marker,
.body--manifesto .title-marker,
.body--story .title-marker {
width: 32px;
height: auto;
}
/* ---- H. Lead paragraph (subtitle on bio pages) ---------------------- */
.prose .lead {
font-size: 0.95rem;
margin: 12px 0 16px;
}
/* ---- I. Job board filter dropdown ---------------------------------- */
/* Dropdown opens below pill — on mobile the dropdown can extend past the
viewport horizontally. Constrain it. */
.job-filter-dropdown {
max-width: calc(100vw - 48px);
}
/* Pill text should be readable */
.job-filter-pill {
padding: 8px 14px;
font-size: 14px;
}
/* ---- J. Job board empty state -------------------------------------- */
.job-empty-state {
padding: 24px 0 32px;
}
.job-empty-character {
width: 140px; /* was 170 at desktop */
}
/* ---- K. Story page callout — tighter ------------------------------- */
/* Already tightened in round 1, but the callout-question h2-like line
could use its own scaling. */
.callout .callout-question {
font-size: 1rem;
}
/* ---- L. Sparkle for illo-row tiles on mobile ----------------------- */
/* The hover-tilt on .illo-row tiles uses transform-origin: top-right.
On mobile (no hover), the tilt never fires, but the perspective on
.illo-row stays. Disable to keep things clean. */
.illo-row {
perspective: none;
}
/* ---- M. Benchies pop-up illustrations ------------------------------ */
/* The .brow-popup hover overlays only fire on (hover: hover), so they're
auto-disabled on touch. Make sure the popup z-index doesn't intercept
touches anyway. */
.benchies-row-1 .brow-popup {
pointer-events: none;
}
}
/* ---- N. Small-phone tier (≤ 480px) — most aggressive ------------------ */
@media (max-width: 480px) {
/* Page padding squeezed down */
.stage--page {
padding: 88px 16px 0;
}
.body--faye .stage--page,
.body--samira .stage--page,
.body--manifesto .stage--page,
.body--story .stage--page {
padding-top: 88px;
}
.hero-art {
padding-left: 16px;
padding-right: 16px;
}
/* Section rhythm even tighter on tiny screens */
.prose h2 {
margin: 28px 0 10px;
}
.prose hr {
margin: 28px 0;
}
.prose {
padding-bottom: 80px;
}
/* h1 shrinks further at the tightest tier — proportional to the
reduced illustration + quote sizes here. */
.prose h1 {
font-size: clamp(1.4rem, 5.5vw, 1.75rem); /* was 1.75rem / 8vw / 2.5rem */
}
/* Two-col gap shrinks */
.two-col {
gap: 16px;
}
/* Bio illo-row could go single column on the tiniest screens since
2 across at 320px is only ~140px per tile — readable but tight.
Keep 2×2 but reduce gap. */
.illo-row {
gap: 8px;
}
.benchies-row-1 {
gap: 10px;
}
/* Logo in top bar can shrink slightly */
.rail-inner .logo {
width: 120px;
}
/* Job listings — title size + truncate */
.prose .job-item-title {
font-size: 0.95rem;
}
.prose .job-item-icon {
width: 40px;
height: 40px;
}
.job-icon-img {
width: 30px;
height: 30px;
}
/* Position-type + dot are hidden globally; subtitle gap zero-ed everywhere
via the base rule, no per-tier override needed. */
/* Callout tighter still */
.callout {
padding: 16px;
margin: 24px 0;
}
.callout::after {
width: 20px;
height: 20px;
top: 12px;
right: 14px;
}
/* Inline hero (Benchies bottom) — illo shrinks */
.hero-art--inline .hero-illo {
width: 100%;
max-width: 280px;
}
/* Email signup form — stack input + button vertically if needed.
Keep them side-by-side since the input flexes; button stays 48px. */
/* Language picker takes less space */
.lang-picker .lang-name {
font-size: 12px;
}
/* Hide the back link on tiny screens (rare appearance now anyway) */
.prose .back {
margin-bottom: 16px;
}
}
/* ---- O. Global mobile-safety: prevent any horizontal scroll bleed -------- */
@media (max-width: 1024px) {
body, html {
overflow-x: hidden;
}
img, video, iframe, svg {
max-width: 100%;
height: auto;
}
}
/* Versioned bio header layouts (V1 + V2) ================================
V1: lead caption left + quote-mark right (flex row)
V2: centered quote-mark above centered lead caption (stacked column)
Both replace the old direct child + title-marker SVG.
The .quote-mark inherits the existing quote-glitch keyframe (originally
built for .callout::after) so the shake reads consistently across the site.
*/
.bio-caption {
margin: 24px 0 32px;
}
/* V1 — side-by-side */
.bio-caption--v1 {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 24px;
}
.bio-caption--v1 .lead {
flex: 1 1 0;
min-width: 0;
margin: 0;
}
.bio-caption--v1 .quote-mark {
flex-shrink: 0;
width: 140px; /* asset is 355×218 — wider crop so the mist reads in the row */
height: auto;
align-self: center;
}
/* V2 — centered stacked: quote-mark overlaps bottom-center of the illo,
with a soft white glow so the dark glyph reads cleanly over the artwork.
Wrap structure: .caption-illo wraps the illo-video-wrap + quote-mark.
The quote is position-absolute over the bottom edge of the illo container. */
.bio-caption--v2 {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 60px; /* illustration → subtitle: 36 + 24 (extra below to clear the mist halo over the subtitle) */
margin: 36px 0 32px; /* title → illustration: 36px */
}
.bio-caption--v2 .caption-illo {
position: relative;
width: 100%;
}
.bio-caption--v2 .caption-illo .illo-video-wrap {
position: relative;
margin: 0;
}
.bio-caption--v2 .quote-mark {
position: absolute;
left: 50%;
bottom: 0;
transform: translate(-50%, 50%);
width: clamp(160px, 48%, 288px); /* desktop max 288, smoothly tracks 48% of container on smaller screens, floored at 160 so it never goes tiny */
height: auto;
z-index: 2;
pointer-events: none;
overflow: visible; /* let the mist halo bleed past the SVG viewBox — no visible clip rectangle */
}
.bio-caption--v2 .lead {
width: 100%; /* fill the bio-caption container */
max-width: none; /* drop the 520px cap */
margin: 0;
text-align: center;
position: relative; /* establish stacking */
z-index: 3; /* sits ABOVE the quote-mark (z-index 2) so the mist halo doesn't cover the words */
}
/* Quote-mark — glitch keyframe + base setup (entrance is staged by the
bio-page sequence block further down). */
.quote-mark {
display: block;
}
.quote-mark .quote-glyph {
transform-origin: center;
transform-box: fill-box;
will-change: transform, filter;
}
@keyframes quote-rise {
from { opacity: 0; transform: translateY(28px); }
to { opacity: 1; transform: translateY(0); }
}
/* ============================================================
BIO-PAGE STAGED REVEAL (Faye, Samira)
Sequence (cumulative timeline from page load):
1. Leading illustration: opacity 0 + blur(16px) → 100% + blur(0)
over 1.6s starting at 0.05s. Slow, no translate.
2. Title (h1), subtitle (.lead), mist halo (.quote-mist) AND the
rest of the prose (hr divider, h2s, body paragraphs, illo rows,
two-col blocks, closing illos) all fade in together — 0.8s start,
0.7s duration → lands at 1.5s (just before the blur fade-in
finishes at 1.65s, so the page settles just ahead of the
illustration sharpening).
3. Quote glyph (LAST): rises + glitches. Rise 2.35s → 3.1s; glitch
begins at 3.15s and loops forever. (Page reads as fully at rest
before the glyph announces itself.)
The global `.from-nav .prose` contentIn is overridden for these
pages so each piece can stage independently regardless of how the
visitor arrived. */
/* Step 0: kill the page-wide contentIn so individual children stage on their own */
.from-nav .body--faye .prose,
.from-nav .body--samira .prose {
opacity: 1;
transform: none;
animation: none;
}
/* Step 1: leading illustration — slow blur + opacity */
.body--faye .illo-video-clip,
.body--samira .illo-video-clip {
opacity: 0;
filter: blur(16px);
animation: bio-illo-in 1.6s cubic-bezier(0.22, 1, 0.36, 1) 0.05s forwards;
will-change: opacity, filter;
}
@keyframes bio-illo-in {
to { opacity: 1; filter: blur(0); }
}
/* Bio-page lead-illustration zoom-in — the inner ![]()
starts at 80% scale
and eases back to 100% over the SAME 1.6s window as the container's blur
fade. So the photo "settles into" the frame in lockstep with the blur
resolving. Container size stays fixed; only the image content scales.
Also resets the default .illo--video scale(1.1) + 40px-down position
(which were tuned for the original eye-close-up video) so the new
1920×504 images render flush against the 610:160 frame. */
.body--faye .illo--video,
.body--samira .illo--video {
transform: scale(1);
object-position: center;
animation: bio-lead-zoom-in 1.6s cubic-bezier(0.22, 1, 0.36, 1) 0.05s both;
transform-origin: center;
will-change: transform;
}
@keyframes bio-lead-zoom-in {
from { transform: scale(0.8); }
to { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
.body--faye .illo--video,
.body--samira .illo--video { animation: none; transform: scale(1); }
}
/* Step 2: title + subtitle + mist + the rest of the prose (divider, h2s,
body paragraphs, illo rows, two-col blocks, closing illos) all fade in
together, just before the illustration lands */
.body--faye .prose > h1,
.body--samira .prose > h1,
.body--faye .bio-caption--v2 .lead,
.body--samira .bio-caption--v2 .lead,
.body--faye .quote-mark .quote-mist,
.body--samira .quote-mark .quote-mist,
.body--faye .prose > hr,
.body--samira .prose > hr,
.body--faye .prose > h2,
.body--samira .prose > h2,
.body--faye .prose > p,
.body--samira .prose > p,
.body--faye .prose > .illo-row,
.body--samira .prose > .illo-row,
/* scrollRowBubble JS wraps .illo-row in a .has-row-bubble div on Faye + Samira,
so the direct-child selectors above miss it once that wrap is in place.
Match the wrap too so the staged reveal still catches the row. */
.body--faye .prose > .has-row-bubble,
.body--samira .prose > .has-row-bubble,
.body--faye .prose > .two-col,
.body--samira .prose > .two-col,
.body--faye .prose > img.illo,
.body--samira .prose > img.illo {
opacity: 0;
animation: bio-fade-step 0.7s ease-out 0.8s forwards;
}
/* Step 3 (LAST): quote glyph — rises into position, then glitches forever,
after the rest of the page is settled. Rise lands at 3.1s
(0.7s earlier than before). */
.body--faye .quote-mark .quote-glyph,
.body--samira .quote-mark .quote-glyph {
opacity: 0;
transform: translateY(28px);
animation:
quote-rise 0.75s cubic-bezier(0.22, 1, 0.36, 1) 2.35s forwards,
quote-glitch 0.9s linear 3.15s infinite;
}
@keyframes bio-fade-step {
to { opacity: 1; }
}
/* Accessibility — skip the whole staged sequence when reduced motion is on */
@media (prefers-reduced-motion: reduce) {
.body--faye .illo-video-clip,
.body--samira .illo-video-clip,
.body--faye .prose > h1,
.body--samira .prose > h1,
.body--faye .bio-caption--v2 .lead,
.body--samira .bio-caption--v2 .lead,
.body--faye .quote-mark .quote-mist,
.body--samira .quote-mark .quote-mist,
.body--faye .quote-mark .quote-glyph,
.body--samira .quote-mark .quote-glyph,
.body--faye .prose > hr,
.body--samira .prose > hr,
.body--faye .prose > h2,
.body--samira .prose > h2,
.body--faye .prose > p,
.body--samira .prose > p,
.body--faye .prose > .illo-row,
.body--samira .prose > .illo-row,
.body--faye .prose > .has-row-bubble,
.body--samira .prose > .has-row-bubble,
.body--faye .prose > .two-col,
.body--samira .prose > .two-col,
.body--faye .prose > img.illo,
.body--samira .prose > img.illo {
opacity: 1;
transform: none;
filter: none;
animation: none;
}
}
/* V2 title centering — h1 sits dead-center above the eye illustration */
.body--faye .stage--page .prose .title-row,
.body--samira .stage--page .prose .title-row {
justify-content: center;
}
.body--faye .stage--page .prose h1,
.body--samira .stage--page .prose h1 {
text-align: center;
width: 100%;
}
/* Mobile: V1's side-by-side stacks below 640px so the quote doesn't squash
the caption. V2 stays centered (it already is). */
@media (max-width: 640px) {
.bio-caption--v1 {
flex-direction: column;
align-items: flex-start;
gap: 16px;
}
.bio-caption--v1 .quote-mark {
align-self: flex-end;
}
/* V2 quote-mark uses clamp() at the top — no abrupt mobile width override needed; it scales smoothly with the illustration. */
}
/* Tightest-tier (≤480px) — disable hover illos + stretch the email form ===
On the smallest phone screens, hover-driven illustration effects are
awkward (touch users can trigger them by accident, they get stuck open,
and they fight finger-scrolling). Disable them. Also force the Benchies
email signup row to fill the column width, since it's the primary CTA. */
@media (max-width: 480px) {
/* --- Disable hover effects on illustrations ----------------------- */
/* Bio-page .illo-tile sketch row — tilt + shadow + sparkles */
.illo-row img.illo:hover {
transform: none !important;
box-shadow: none !important;
z-index: 1 !important;
}
.illo-tile:hover .brow-tile-sparkle {
opacity: 0 !important;
animation: none !important;
}
/* Benchies character tiles — popup illustrations + spotlight blur */
.benchies-row-1 .brow-tile .brow-popup,
.benchies-row-1 .brow-tile .brow-popup--1,
.benchies-row-1 .brow-tile .brow-popup--2,
.benchies-row-1 .brow-tile .brow-popup--3 {
display: none !important;
}
.benchies-row-1 .brow-tile:hover {
transform: none !important;
}
.benchies-row-1 .brow-tile.is-spotlit .brow-tile-sparkle {
opacity: 0 !important;
animation: none !important;
}
.page-blur {
display: none !important;
}
/* Homepage + Benchies hero-illo bubble */
.hero-illo:hover .bubble-hover,
.hero-illo:hover .bubble-svg,
.hero-illo:hover .dizzy-svg {
opacity: 0 !important;
animation: none !important;
}
/* --- Benchies email form: full container width -------------------- */
.hero-art--inline .promo-form {
width: 100%;
max-width: 100%;
box-sizing: border-box;
}
.hero-art--inline .promo-input {
flex: 1 1 0;
min-width: 0; /* lets the flex item actually shrink/grow */
width: 100%;
}
.hero-art--inline .promo-input input {
width: 100%;
box-sizing: border-box;
}
/* Send button stays its 48×48 — input flex-grows to fill the rest */
.hero-art--inline .promo-submit {
flex-shrink: 0;
}
}
/* Bio-page hero illo — no frame ==========================================
The 1px stroke + light-fill background that wraps standard detail-page
imagery reads as a 'frame' / drop-shadow around the eye close-up.
Bio pages drop both so the artwork sits flush against the page. */
.body--faye .illo-video-clip,
.body--samira .illo-video-clip {
border: 0;
background: #DAD8E2; /* match the headshot tile fill color */
}
/* Samira: drop the aurora-glow on the main illustration. The conic-gradient
blur + animation on .illo-video-wrap::before is the only "drop shadow /
glow" around the eye close-up; hiding the pseudo on Samira removes it
cleanly without touching any other illo-video-wrap consumer. */
.body--samira .illo-video-wrap::before {
display: none;
}