/* ────────────────────────────────────────────────────────────────
Davi Serrano — Case Study Template (shared)
Spec: eyebrow · H1 · sticky meta sidebar · 5 beats · 3 inserts
· outcome line · full-bleed closing hero · next link
──────────────────────────────────────────────────────────────── */
:root {
/* Ink + paper — DARK is the default. Light mode tokens override below. */
--ink: #1c1c1c;
--ink-2: #161616;
--paper: #f3f3f3;
--paper-2: #ffffff;
--muted: #aeaeae;
--muted-2: #7a7a7a;
--rule: color-mix(in srgb, var(--paper) 10%, transparent);
--rule-2: color-mix(in srgb, var(--paper) 20%, transparent);
/* Primary accent — purple */
--purple: #9747FF;
--purple-2: #c294ff;
--purple-soft: rgba(151,71,255,0.14);
/* Feedback — error. Reserved for validation states (gate password, forms).
Never decorative: if it's red, something needs the visitor's attention. */
--error: #ff6b5e;
/* v3.1 vivid accent palette — reserved for the synth presets + sparing accents.
Borrowed from neon-on-dark editorial work. Use one cell per bento, max. */
--lime: #C8E600; /* electric lime — synth · primary spark */
--magenta: #FF3D87; /* hot pink — synth · contrast */
--orange: #FF8C2E; /* warm orange — synth · energy */
--electric: #835CFC; /* electric violet — sister to --purple, slightly bluer */
--lime-soft: rgba(200,230,0,0.14);
--magenta-soft: rgba(255,61,135,0.14);
--orange-soft: rgba(255,140,46,0.14);
--electric-soft: rgba(131,92,252,0.14);
/* Type stack — Syne for display, Inter for body, Mono for spec.
The italic accent is set on Syne italic, no separate serif face. */
--display: "Syne", ui-sans-serif, system-ui, sans-serif;
--body: "Inter", ui-sans-serif, system-ui, sans-serif;
--mono: "JetBrains Mono", ui-monospace, monospace;
/* ── MOTION SYSTEM ────────────────────────────────────────────────
One easing, one duration scale, one travel distance. Restrained and
precise: motion clarifies state, it never performs. Every value here
is a token so the whole site can be retuned from one place.
--ease the house curve. Fast out, long settle. Used for
everything that moves in space.
--ease-soft symmetric curve for pure fades and colour changes,
where directional weight would read as fussy. */
--ease: cubic-bezier(.2,.7,.2,1);
--ease-soft: cubic-bezier(.4,0,.4,1);
/* Duration scale. Nothing between steps, nothing outside it. */
--t-instant: 120ms; /* colour, opacity on small controls */
--t-quick: 200ms; /* hover states, taps, badges */
--t-base: 320ms; /* the default: most micro-interactions */
--t-slow: 480ms; /* image scale, larger surfaces */
--t-reveal: 620ms; /* scroll reveals + hero entrance */
--t-layout: 680ms; /* height / expand-collapse */
/* Sequencing. Reveals cascade at one step per element so a section
resolves as a sequence rather than a single block. */
--t-stagger: 70ms;
--rise: 16px; /* travel distance for reveals */
--nudge: 4px; /* travel for arrows and small indicators */
/* Theme dissolve — the one deliberately slow beat. The whole page
crossfades between dark and light, so it reads as a scene change,
not a control state. */
--t-theme: 720ms;
}
/* Reduced motion: the whole system collapses to instant, everywhere.
Tokens are zeroed at the source so no component needs its own guard. */
@media (prefers-reduced-motion: reduce) {
:root {
--t-instant: 1ms; --t-quick: 1ms; --t-base: 1ms; --t-slow: 1ms;
--t-reveal: 1ms; --t-layout: 1ms; --t-theme: 1ms; --t-stagger: 0ms;
--rise: 0px; --nudge: 0px;
}
*, *::before, *::after {
animation-duration: 1ms !important;
animation-iteration-count: 1 !important;
transition-duration: 1ms !important;
scroll-behavior: auto !important;
}
}
/* ── Light theme — opt-in via [data-theme="light"] on ──
The Davi.theme localStorage key persists the user's choice (handled
by assets/theme.js, auto-injected on every page). Vivid accents
(lime/magenta/orange/electric) keep their hue across themes; only the
ink/paper relationship inverts. The purple accent shifts to a slightly
deeper tone in light mode for legibility on cream. */
[data-theme="light"] {
/* Cool-neutral palette — pure off-white, no warm cream tint.
Contrast checks (WCAG 2.1 AA / AAA):
paper #1c1c1c on ink #fafafa → 17.4 : 1 AAA ✓
muted #5d5d5d on ink #fafafa → 6.6 : 1 AA ✓
purple #7a3ce0 on ink #fafafa → 5.0 : 1 AA ✓ (large-text AAA)
purple-2 #5a25c8 on ink #fafafa → 7.4 : 1 AAA ✓
All token combinations pass WCAG AA for normal body text. */
--ink: #fafafa;
--ink-2: #f0f0f0;
--paper: #1c1c1c;
--paper-2: #0e0e0e;
--muted: #5d5d5d;
--muted-2: #8a8a8a;
/* Rule colors auto-flip via color-mix on --paper — no override needed. */
--purple: #7a3ce0;
--purple-2: #5a25c8;
--purple-soft: rgba(122,60,224,0.10);
--error: #d64533; /* deeper red for contrast on paper */
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html {
background: var(--ink);
transition: background-color var(--t-theme) var(--ease-soft);
/* Sideways overflow is contained HERE as well as on body. iOS Safari pans
the viewport off any element that sticks out past the right edge even
when body alone is set to hide it, which drags every heading and column
left and clips them at x=0. `clip` rather than `hidden` on purpose:
`hidden` turns this into a scroll container and kills `position: sticky`
on the nav. This is containment, not a licence to overflow: anything
genuinely too wide should still be fixed at the source. */
overflow-x: clip;
}
body {
background: var(--ink); color: var(--paper);
font-family: var(--body); font-size: 16px; line-height: 1.55;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
overflow-x: hidden;
/* Theme dissolve — slow crossfade so the swap reads as a soft blend
instead of a snap. Same easing as the unicorn stage opacity on the
homepage, so the whole site feels coordinated. */
transition: background-color var(--t-theme) var(--ease-soft),
color var(--t-theme) var(--ease-soft);
}
/* In light mode, invert the animated logo gif so it reads on the cream nav. */
[data-theme="light"] .logo-mark {
filter: invert(1) hue-rotate(180deg);
}
::selection { background: var(--purple); color: var(--paper); }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
.wrap { max-width: 1320px; margin: 0 auto; padding: 0 56px; }
.wrap-narrow { max-width: 1180px; margin: 0 auto; padding: 0 56px; }
@media (max-width: 900px) {
.wrap, .wrap-narrow { padding: 0 24px; }
}
/* ── Top nav ─────────────────────────────────────── */
.nav {
position: sticky; top: 0; z-index: 50;
backdrop-filter: blur(14px);
background: rgba(28,28,28,0.78);
border-bottom: 1px solid var(--rule);
}
.nav-inner {
max-width: 1320px; margin: 0 auto;
padding: 22px 56px;
display: flex; align-items: center; justify-content: space-between;
font-family: var(--mono); font-size: 11px;
text-transform: uppercase; letter-spacing: 0.14em;
}
@media (max-width: 900px) { .nav-inner { padding: 22px 24px; } }
.logo { display: inline-flex; align-items: center; gap: 10px; }
.logo-mark {
width: 56px; height: 32px;
object-fit: contain;
mix-blend-mode: lighten;
}
.nav-back {
display: inline-flex; align-items: center; gap: 10px;
color: var(--muted);
transition: color var(--t-quick) var(--ease-soft);
/* Push to the right edge of the nav, sit just left of the lang toggle */
margin-left: auto;
}
.nav-back:hover { color: var(--paper); }
.nav-back .arrow { transition: transform var(--t-base) var(--ease); }
.nav-back:hover .arrow { transform: translateX(calc(var(--nudge) * -1)); }
/* Tighten the gap between nav-back and lang-switch so they read as a pair */
.nav-inner > .nav-back + .lang-switch,
.nav-inner > .lang-switch { margin-left: 24px; }
/* On pages without a language toggle (e.g. the design system), theme.js drops
the picker straight after nav-back. Keep it from crowding "All Work". */
.nav-inner > .nav-back + .theme-switch,
.nav-inner > .nav-back + .nav-controls { margin-left: 24px; }
/* Language pill switcher (injected by i18n.js) */
.lang-switch {
display: inline-flex; border: 1px solid var(--rule-2);
border-radius: 999px; overflow: hidden;
font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em;
margin-left: 16px;
}
.lang-switch button {
background: transparent; border: 0; color: var(--paper);
padding: 6px 12px; cursor: pointer; opacity: 0.55;
text-transform: uppercase; font: inherit;
}
.lang-switch button.on { background: var(--paper); color: var(--ink); opacity: 1; }
.nav-inner > .lang-switch { margin-left: auto; }
/* ── Nav controls group — tight wrapper around lang-switch + theme-switch
so the parent's flex gap (e.g. .nav-menu gap: 36px on the homepage)
doesn't apply between them. The wrapper is inserted by assets/theme.js
when it lifts the lang-switch into a shared parent with the picker. */
.nav-controls {
display: inline-flex;
align-items: center;
gap: 14px;
}
/* ── Theme switcher — color-picker style.
Two small swatches (dark + light), the active one gets a purple ring.
Sits inside .nav-controls so the surrounding nav layout is unaffected. */
.theme-switch {
display: inline-flex; align-items: center;
gap: 8px;
height: 22px;
}
.theme-switch button {
background: transparent; border: 0; cursor: pointer;
padding: 2px;
width: 22px; height: 22px;
border-radius: 999px;
display: inline-flex; align-items: center; justify-content: center;
transition: box-shadow var(--t-quick) var(--ease-soft), transform var(--t-quick) var(--ease-soft);
}
.theme-switch button .swatch {
display: block;
width: 14px; height: 14px;
border-radius: 999px;
transition: transform var(--t-quick) var(--ease-soft);
}
.theme-switch button[data-mode="dark"] .swatch {
background: #1c1c1c;
border: 1px solid color-mix(in srgb, var(--paper) 32%, transparent);
}
.theme-switch button[data-mode="light"] .swatch {
background: #f4f1ea;
border: 1px solid rgba(28,28,28,0.20);
}
.theme-switch button:hover .swatch { transform: scale(1.08); }
.theme-switch button.on {
box-shadow: 0 0 0 1.5px var(--purple);
}
.theme-switch button:focus-visible {
outline: 2px solid var(--purple);
outline-offset: 2px;
}
/* In light mode, deepen the ring contrast against cream */
[data-theme="light"] .theme-switch button.on {
box-shadow: 0 0 0 1.5px var(--purple);
}
/* ── Results strip — 2–3 outcome numbers under the hero, for the
executive skim. One line of proof before the story starts. ── */
.cs-results {
border-top: 1px solid var(--rule);
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 32px;
padding: 28px 0 36px;
}
@media (max-width: 700px) { .cs-results { grid-template-columns: 1fr; gap: 20px; padding: 22px 0 28px; } }
.cs-results .r-num {
font-family: var(--display); font-weight: 700;
font-size: clamp(26px, 3vw, 38px);
letter-spacing: -0.8px; line-height: 1;
color: var(--paper);
}
.cs-results .r-num em { color: var(--purple-2); font-style: italic; font-weight: 600; }
.cs-results .r-lab {
margin-top: 8px;
font-size: 14px; line-height: 1.45;
color: var(--muted);
}
/* ── 1. Eyebrow + 2. H1 + 2-up split (headline left, visual right) ── */
.cs-hero {
padding: 80px 0 0;
border-bottom: 1px solid var(--rule);
}
.cs-eyebrow {
font-family: var(--mono); font-size: 11px;
text-transform: uppercase; letter-spacing: 0.18em;
color: var(--muted);
display: inline-flex; align-items: center; gap: 12px;
margin-bottom: 48px;
}
.cs-eyebrow .dot {
width: 6px; height: 6px; background: var(--purple); border-radius: 999px;
box-shadow: 0 0 16px var(--purple);
}
.cs-eyebrow .num { color: var(--paper); }
.cs-hero-split {
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
gap: 64px;
align-items: start;
padding-bottom: 80px;
}
@media (max-width: 1000px) {
.cs-hero-split { grid-template-columns: 1fr; gap: 40px; align-items: stretch; }
}
.cs-hero-left {
display: flex; flex-direction: column;
min-height: 100%;
min-width: 0; /* prevent flex/grid blowout if a child wants more width */
}
.cs-h1 {
font-family: var(--display); font-weight: 800;
/* Single flat clamp — caps at 80px so the longest single word in any
headline ("Rebuilding") fits inside the cs-hero-left column on the
widest monitors. The previous 1400px+ override (96–116px) overflowed
into the visual on big screens. */
font-size: clamp(30px, 4.4vw, 80px);
line-height: 1.02; letter-spacing: -2.4px;
margin: 0 0 8px;
text-wrap: balance;
padding-bottom: 0.06em;
/* Safety net — if a future headline carries an unusually long word, break
instead of overflowing into the hero visual. */
overflow-wrap: break-word;
min-width: 0;
}
.cs-h1 .accent { color: var(--purple); font-style: italic; font-weight: 700; }
.cs-hero-visual {
border: 1px solid var(--rule-2);
background:
radial-gradient(60% 70% at 50% 50%, rgba(151,71,255,0.22), transparent 70%),
repeating-linear-gradient(135deg,
color-mix(in srgb, var(--paper) 5%, transparent) 0 14px,
transparent 14px 28px),
#221a23;
aspect-ratio: 4 / 5;
position: relative; overflow: hidden;
align-self: start;
}
@media (max-width: 1000px) { .cs-hero-visual { aspect-ratio: 16 / 10; } }
.cs-hero-visual[data-label]::after {
content: attr(data-label);
position: absolute; left: 16px; bottom: 12px;
font-family: var(--mono); font-size: 10px;
text-transform: uppercase; letter-spacing: 0.14em;
color: var(--muted);
}
.cs-hero-visual .center-tag {
position: absolute; inset: 0;
display: grid; place-items: center;
font-family: var(--display); font-weight: 800;
font-size: clamp(20px, 2.6vw, 36px);
color: color-mix(in srgb, var(--paper) 50%, transparent); letter-spacing: -0.6px;
text-align: center; padding: 0 24px;
}
/* Real image rendering — when an ![]()
sits inside a hero/frame slot,
it fills the slot via object-fit: cover. The :has() rule below hides the
placeholder text + the diagonal gradient so the image stands alone. */
.cs-hero-visual > img {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover; display: block;
}
.cs-hero-visual:has(> img) {
background: var(--ink-2);
}
.cs-hero-visual:has(> img) .center-tag { display: none; }
.cs-hero-visual img {
width: 100%; height: 100%; object-fit: cover; display: block;
}
/* Meta strip — sits inside the LEFT column, under the headline.
Pushed to the bottom of the column so it bottom-aligns with the visual. */
.cs-meta-strip {
margin-top: auto;
padding-top: 40px;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 24px 40px;
border-top: 1px solid var(--rule-2);
font-family: var(--mono); font-size: 11px;
text-transform: uppercase; letter-spacing: 0.14em;
color: var(--muted);
}
@media (max-width: 1000px) {
.cs-meta-strip { margin-top: 8px; padding-top: 28px; }
}
@media (max-width: 540px) { .cs-meta-strip { grid-template-columns: 1fr; } }
.cs-meta-strip .row .k { color: var(--muted-2); margin-bottom: 6px; }
.cs-meta-strip .row .v {
color: var(--paper); font-weight: 500; line-height: 1.5;
/* Values carry bare domains (brain.daviserrano.com) with no space to break
on. In a narrow phone column an unbreakable token like that pushes past
the cell and takes the whole page sideways with it. */
overflow-wrap: anywhere;
}
.cs-meta-strip .row .v i { color: var(--purple-2); font-style: italic; font-weight: 400; }
/* Client logo cell — wordmark sits in .v slot, same flow as other rows */
.cs-meta-strip .row-logo .v {
display: flex; align-items: center;
height: 22px;
}
.cs-meta-strip .row-logo .v img {
height: 22px; width: auto; max-width: 160px; display: block;
filter: brightness(0) invert(1);
opacity: 0.92;
}
.cs-meta-strip .row-logo .v .wordmark {
font-family: var(--display); font-weight: 700;
font-size: 18px; letter-spacing: -0.3px;
text-transform: none;
color: var(--paper);
line-height: 1;
display: inline-flex; align-items: center; gap: 6px;
}
.cs-meta-strip .row-logo .v .wordmark .mark {
display: inline-block; width: 6px; height: 6px;
background: var(--purple); border-radius: 999px;
box-shadow: 0 0 10px var(--purple);
}
/* ── 3. Body — single column, centered ── */
.cs-body {
padding: 96px 0 120px;
}
/* ── Main column ── */
.cs-main { max-width: 760px; margin: 0 auto; }
/* The five beats */
.cs-beat { margin: 0 0 56px; }
.cs-beat:last-child { margin-bottom: 0; }
.cs-beat-label {
font-family: var(--mono); font-size: 11px;
text-transform: uppercase; letter-spacing: 0.16em;
color: var(--muted-2);
margin-bottom: 20px;
display: inline-flex; align-items: center; gap: 12px;
}
.cs-beat-label .n { color: var(--purple-2); }
.cs-beat h2 {
font-family: var(--display); font-weight: 700;
font-size: clamp(28px, 3.6vw, 44px);
line-height: 1.05; letter-spacing: -1px;
margin: 0 0 24px;
text-wrap: pretty;
}
.cs-beat h2 .accent { color: var(--purple); font-style: italic; font-weight: 600; }
.cs-beat p {
font-size: 19px; line-height: 1.55;
margin: 0 0 18px;
color: color-mix(in srgb, var(--paper) 92%, transparent);
text-wrap: pretty;
}
.cs-beat p:last-child { margin-bottom: 0; }
.cs-beat p i, .cs-beat p em { color: var(--purple-2); font-style: italic; }
.cs-beat p b, .cs-beat p strong { color: var(--paper); font-weight: 600; }
/* ── Insert slots — break out of cs-main's narrow column to the wider wrap ── */
.cs-insert {
margin: 80px 0;
/* Break out of cs-main's 760px to fill .wrap (1320 - 112 padding = 1208) */
width: min(1208px, calc(100vw - 112px));
margin-left: 50%;
transform: translateX(-50%);
position: relative;
}
@media (max-width: 900px) {
.cs-insert { width: calc(100vw - 48px); }
}
.cs-insert-label {
font-family: var(--mono); font-size: 10px;
text-transform: uppercase; letter-spacing: 0.22em;
color: var(--muted-2);
display: inline-flex; align-items: center; gap: 12px;
margin-bottom: 24px;
}
.cs-insert-label::before {
content: ""; display: inline-block;
width: 24px; height: 1px; background: var(--rule-2);
}
/* ── Signature moment — ONE per case study.
The page's climax insert wears the project's own vivid accent: a faint
tinted band, accent rules, accent label, spec corner brackets. Everything
else on the page stays quiet — this is where the boldness is spent.
Set the accent via a .sig-* class: lime · magenta · orange · electric · purple. */
.cs-insert.cs-signature {
--sig: var(--purple);
padding: 48px clamp(20px, 4vw, 48px) 44px;
background:
radial-gradient(60% 90% at 50% 0%, color-mix(in srgb, var(--sig) 8%, transparent), transparent 70%),
color-mix(in srgb, var(--sig) 3%, transparent);
border-top: 1px solid color-mix(in srgb, var(--sig) 40%, transparent);
border-bottom: 1px solid color-mix(in srgb, var(--sig) 40%, transparent);
}
.cs-insert.cs-signature::before,
.cs-insert.cs-signature::after {
content: ""; position: absolute;
width: 18px; height: 18px;
border: 1.5px solid var(--sig);
pointer-events: none;
}
.cs-insert.cs-signature::before { top: -1px; left: 0; border-right: 0; border-bottom: 0; }
.cs-insert.cs-signature::after { bottom: -1px; right: 0; border-left: 0; border-top: 0; }
.cs-insert.cs-signature .cs-insert-label { color: var(--sig); }
.cs-insert.cs-signature .cs-insert-label::before { background: var(--sig); }
.cs-insert.cs-signature .cs-insert-caption em { color: var(--sig); }
.cs-signature.sig-lime { --sig: var(--lime); }
.cs-signature.sig-magenta { --sig: var(--magenta); }
.cs-signature.sig-orange { --sig: var(--orange); }
.cs-signature.sig-electric { --sig: var(--electric); }
.cs-signature.sig-purple { --sig: var(--purple); }
/* Lime + orange are light hues — on the light theme they need a darker mix
for the label text to stay legible on cream. */
[data-theme="light"] .cs-signature.sig-lime .cs-insert-label,
[data-theme="light"] .cs-signature.sig-lime .cs-insert-caption em { color: color-mix(in srgb, var(--lime) 55%, #1c1c1c); }
[data-theme="light"] .cs-signature.sig-orange .cs-insert-label,
[data-theme="light"] .cs-signature.sig-orange .cs-insert-caption em { color: color-mix(in srgb, var(--orange) 70%, #1c1c1c); }
@media (max-width: 700px) {
.cs-insert.cs-signature { padding: 32px 16px 30px; }
}
.cs-insert-caption {
margin-top: 20px;
font-size: 15px; line-height: 1.55;
color: color-mix(in srgb, var(--paper) 88%, transparent);
max-width: 720px;
text-wrap: pretty;
}
.cs-insert-caption em, .cs-insert-caption i {
color: var(--purple-2); font-style: italic;
}
/* ── Insert block: Frame (single image) ── */
.frame-img {
border: 1px solid var(--rule-2);
background:
repeating-linear-gradient(135deg,
color-mix(in srgb, var(--paper) 5%, transparent) 0 14px,
transparent 14px 28px),
#1a1a1a;
position: relative; overflow: hidden;
}
.frame-img.tinted {
background:
radial-gradient(60% 70% at 50% 50%, rgba(151,71,255,0.18), transparent 70%),
repeating-linear-gradient(135deg,
color-mix(in srgb, var(--paper) 5%, transparent) 0 14px,
transparent 14px 28px),
#221a23;
}
.frame-img.ratio-21x9 { aspect-ratio: 21/9; }
.frame-img.ratio-2x1 { aspect-ratio: 2/1; }
.frame-img.ratio-16x9 { aspect-ratio: 16/9; }
.frame-img.ratio-4x3 { aspect-ratio: 4/3; }
.frame-img.ratio-3x4 { aspect-ratio: 3/4; }
.frame-img.ratio-9x16 { aspect-ratio: 9/16; }
.frame-img.ratio-1x1 { aspect-ratio: 1/1; }
.frame-img[data-label]::after {
content: attr(data-label);
position: absolute; left: 16px; bottom: 12px;
font-family: var(--mono); font-size: 10px;
text-transform: uppercase; letter-spacing: 0.14em;
color: var(--muted);
}
.frame-img .center-tag {
position: absolute; inset: 0;
display: grid; place-items: center;
font-family: var(--display); font-weight: 800;
font-size: clamp(18px, 2.5vw, 32px);
color: color-mix(in srgb, var(--paper) 45%, transparent); letter-spacing: -0.5px;
text-align: center; padding: 0 24px;
}
/* Real image rendering — same pattern as the hero slot. */
.frame-img > img {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover; display: block;
}
.frame-img:has(> img) {
background: var(--ink-2);
}
.frame-img:has(> img) .center-tag { display: none; }
/* Device variant — a phone/browser mockup sits inside the frame instead of a
flat screenshot. Drops the hatched placeholder fill (nothing is missing
here) and centres the mockup at the frame's height, so a 9:19.5 phone
lines up cleanly beside sibling 3:4 image frames in the same grid. */
.frame-img.device {
background: color-mix(in srgb, var(--paper) 3%, transparent);
display: grid; place-items: center; padding: 20px;
}
.frame-img.device > .center-tag { display: none; }
.frame-img.device .mock-phone {
height: 100%; width: auto; max-width: 100%;
aspect-ratio: 9 / 19.5;
margin: 0 auto; /* centred in the frame's inline axis */
}
/* The screen fills the shell exactly; aspect-ratio is released so the height
comes from the mockup rather than the element's own ratio. */
.frame-img.device .mock-phone .mp-screen {
height: 100%; width: 100%; aspect-ratio: auto;
}
/* When you want the image to show in full (e.g. a UI mockup or diagram),
add .contain to the frame and the image switches to object-fit: contain. */
.frame-img.contain > img { object-fit: contain; padding: 8px; }
/* Full-page screenshots: cover-crop anchored to the top so the page header/hero
shows rather than the vertical middle. */
.frame-img.crop-top > img,
.cs-hero-visual.crop-top > img { object-position: top; }
/* ── Insert block: Grid (multi-image) ── */
.frame-grid { display: grid; gap: 16px; }
.frame-grid.cols-2 { grid-template-columns: 1fr 1fr; }
.frame-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.frame-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.frame-grid.cols-5 { grid-template-columns: repeat(5, 1fr); gap: 10px; }
@media (max-width: 800px) {
.frame-grid.cols-2, .frame-grid.cols-3, .frame-grid.cols-4, .frame-grid.cols-5 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 540px) {
.frame-grid.cols-2, .frame-grid.cols-3, .frame-grid.cols-4, .frame-grid.cols-5 { grid-template-columns: 1fr; }
}
/* ── Looping video tile (muted, autoplay, no controls) ──
For Spotify-Canvas-style loops. Drop into a .frame-grid; the