/* ============================================================
RD · PORTFOLIO · V6 — "FRAME"
Swiss-editorial · monochrome + accent · framed viewport
Massive type · section-driven · dark/light rhythm
============================================================ */
/* Fonts are loaded via in each page — an @import here would
serialise HTML → CSS → font CSS → font files and delay first paint. */
/* ---------- Tokens ---------- */
:root {
--bg: #f5f5f0;
--bg-dark: #0a0a0f;
--bg-dark2: #141420;
--ink: #0a0a0f;
--ink-2: #555;
--ink-3: #706f6f;
--border: #ddd;
--border-dk:#2a2a3a;
--accent: #d42d39;
--accent-on-dark: #e8414e;
/* Diagram palette — the inline SVG wireframes hardcode these as presentation
attributes. Keep the literals in the markup in step with these values:
structure #2563eb (--blue) annotation #d42d39 (--accent)
label #9a9aa8 caption #7a7a88 faint #5f5f6e */
--blue: #2563eb;
--sans: "Inter",-apple-system,system-ui,sans-serif;
/* The label/meta typeface — nav indices, captions, doc lines, micro-labels.
Serif against Inter's sans: the contrast is what marks this text as meta
rather than body. Named --mono from when it was Space Mono; it is now
proportional, so runtime-changing digits need font-variant-numeric.
Loaded variable on the opsz axis — small labels get sturdier serifs
automatically via the browser's default font-optical-sizing:auto. */
--mono: "Source Serif 4",Georgia,serif;
--max: 1320px;
--frame-h: 72px;
--ease: cubic-bezier(.22,1,.36,1);
/* Type scale — one ladder for the whole site.
Body copy and UI text snap to these; display sizes stay per-component. */
--fs-micro: .68rem; /* uppercase micro-labels */
--fs-label: .75rem; /* standard meta/label — the site default */
--fs-sm: .875rem; /* secondary body: card copy, captions in prose */
--fs-md: .9375rem; /* primary small body: list items, table values */
--fs-base: 1rem; /* article body */
--fs-h4: 1.0625rem;/* card + row titles */
--fs-h3: 1.15rem; /* nav links, intro paragraphs, resume job titles */
--fs-h2: 1.3rem; /* lead paragraphs, pull quotes, wordmark */
--fs-h1: 1.5rem; /* column headings, outcome figures */
--fs-stat: 1.75rem; /* work-row metrics */
--fs-display: 3rem; /* about-stat numerals */
/* Anything larger is display type and uses clamp(rem,vw,rem) per component. */
/* Letter-spacing — two steps: uppercase labels vs. meta */
--ls-label: .08em;
--ls-meta: .04em;
/* Case-study page gutter — one value drives sidebar, bars, figures, body */
--cs-pad: 56px;
/* Corner radius. Circles keep a literal 50% — that is geometry, not a step
on this scale. Nested surfaces go outward: img sm, frame md, card lg. */
--r-sm: 4px; /* tags, chips, inline controls */
--r-md: 8px; /* buttons, small panels */
--r-lg: 12px; /* media frames, cards, carousels */
--r-pill: 999px; /* fully rounded */
/* Layer order */
--z-cursor: 10000;
--z-grain: 9990;
}
/* ---------- Reset ---------- */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
/* Root type size — the single lever for overall scale. A percentage, not px,
so it multiplies whatever the reader has set in their browser rather than
overriding it. 112.5% = 18px at the 16px default, which puts --fs-base
(article body) at 18px and lifts the whole token ladder with it.
Display type is clamp(rem,vw,rem) and stays viewport-driven. */
html{font-size:112.5%;scroll-behavior:smooth;scroll-padding-top:calc(var(--frame-h) + 24px)}
body{
font-family:var(--sans);
background:var(--bg);
color:var(--ink);
font-size:var(--fs-base); /* inherits the root scale — was a hardcoded 16px */
line-height:1.6;
-webkit-font-smoothing:antialiased;
overflow-x:hidden;
}
/* Film-grain texture overlay — tactile depth */
body::after{
content:'';
position:fixed;inset:0;z-index:var(--z-grain);
pointer-events:none;
opacity:.08;
background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.65' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
background-size:200px 200px;
}
::selection{background:var(--accent);color:#fff}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
/* ---------- Utility ---------- */
.wrap{max-width:var(--max);margin:0 auto;padding:0 56px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
/* ---------- Skip ---------- */
.skip{
position:absolute;top:-100%;left:16px;z-index:999;
padding:10px 20px;background:var(--accent);color:#fff;
font-family:var(--mono);font-size:var(--fs-label);text-decoration:none;border-radius:var(--r-md);
}
.skip:focus{top:12px}
/* ============================================================
TOP FRAME BAR (sticky nav — 3 columns)
============================================================ */
.frame-top{
position:sticky;top:0;z-index:100;
background:rgba(255,255,255,.82);
-webkit-backdrop-filter:blur(14px) saturate(180%);
backdrop-filter:blur(14px) saturate(180%);
border-bottom:1px solid rgba(0,0,0,.06);
}
.frame-top-inner{
display:grid;grid-template-columns:1fr 1fr 1fr;
max-width:var(--max);margin:0 auto;
}
.frame-cell{
display:flex;align-items:center;justify-content:space-between;
padding:0 32px;height:var(--frame-h);
border-right:1px solid var(--border);
font-family:var(--sans);font-size:var(--fs-h3);font-weight:500;
color:var(--ink);
text-decoration:none;
transition:all .3s var(--ease);
cursor:pointer;
}
.frame-cell:last-child{border-right:none}
.frame-cell .no{
font-family:var(--mono);font-size:var(--fs-label);color:var(--ink-3);
letter-spacing:var(--ls-meta);
font-weight:400;
}
.frame-cell:hover{background:var(--bg)}
.frame-cell.active{background:var(--ink);color:#fff}
.frame-cell.active .no{color:var(--accent-on-dark)}
/* Resume is the only home-nav item that leaves the page. Accent its arrow so a
recruiter scanning the bar finds it without hunting — same treatment the
inner-page nav already gives its Contact cell. */
.resume-cell .no{color:var(--accent)}
/* Internal-page nav — same frame system as home, adapted to brand + 4 links */
.frame-top--page .frame-top-inner{grid-template-columns:1.6fr 1fr 1fr 1fr 1fr}
.frame-top--page .brand-cell{font-weight:700}
.frame-top--page .contact-cell .no{color:var(--accent)}
/* `aria-current="page"` on the page's own link, `aria-current="true"` on a
case study's parent section — both read as "you are here" in the frame. */
.frame-top--page .frame-cell.active,
.frame-top--page .frame-cell[aria-current]{background:var(--ink);color:#fff}
.frame-top--page .frame-cell.active .no,
.frame-top--page .frame-cell[aria-current] .no{color:var(--accent-on-dark)}
/* ============================================================
BOTTOM FRAME BAR (sticky — 3 columns)
============================================================ */
.frame-bottom{
position:fixed;bottom:0;left:0;right:0;z-index:100;
background:rgba(10,10,15,.82);
-webkit-backdrop-filter:blur(14px) saturate(180%);
backdrop-filter:blur(14px) saturate(180%);
border-top:1px solid rgba(255,255,255,.06);
}
.frame-bottom-inner{
display:grid;grid-template-columns:1fr 1fr 1fr;
max-width:var(--max);margin:0 auto;
}
.frame-bottom .frame-cell{
color:#fff;border-right-color:var(--border-dk);
font-size:var(--fs-base);
}
.frame-bottom .frame-cell .no{color:rgba(255,255,255,.6)}
.frame-bottom .frame-cell:hover{background:var(--bg-dark2)}
.frame-bottom .frame-cell.active{background:var(--accent);color:#fff}
.frame-bottom .frame-cell.active .no{color:rgba(255,255,255,.7)}
/* Page body padding for bottom bar */
body{padding-bottom:var(--frame-h)}
/* ============================================================
HERO — Massive name, minimal info
============================================================ */
.hero{
min-height:calc(100vh - var(--frame-h) - var(--frame-h));
display:flex;
padding:0;
/* Wash → photo → base. The wash pulls the cool photo toward the warm site
palette, keeps type contrast up, and fades to solid --bg at the seam. */
background:
linear-gradient(to bottom,
rgba(245,245,240,.62) 0%,
rgba(245,245,240,.40) 50%,
rgba(245,245,240,.88) 88%,
var(--bg) 100%),
url("background-hero.jpg") center/cover no-repeat,
var(--bg);
position:relative;
overflow:hidden;
}
/* Ambient glow orbs — radial light behind hero, slowly drifting */
.hero::before{
content:'';position:absolute;
width:900px;height:900px;
top:-20%;right:2%;
background:radial-gradient(circle,rgba(37,99,235,.12) 0%,transparent 65%);
border-radius:50%;pointer-events:none;
animation:orb-a 34s var(--ease) infinite alternate;
}
.hero::after{
content:'';position:absolute;
width:700px;height:700px;
bottom:-10%;left:10%;
background:radial-gradient(circle,rgba(212,45,57,.09) 0%,transparent 65%);
border-radius:50%;pointer-events:none;
animation:orb-b 28s var(--ease) infinite alternate;
}
@keyframes orb-a{
from{transform:translate3d(0,0,0) scale(1)}
to{transform:translate3d(-6%,7%,0) scale(1.12)}
}
@keyframes orb-b{
from{transform:translate3d(0,0,0) scale(1)}
to{transform:translate3d(8%,-6%,0) scale(1.08)}
}
/* Column rules — four-column frame drawn behind the type */
.hero-rules{
position:absolute;inset:0;z-index:0;pointer-events:none;
max-width:var(--max);margin:0 auto;padding:0 56px;
display:grid;grid-template-columns:repeat(4,1fr);
}
.hero-rules span{border-right:1px solid var(--border);opacity:.55}
.hero-rules span:last-child{border-right:none}
.hero-inner{
position:relative;z-index:1;
max-width:var(--max);margin:0 auto;padding:32px 56px 48px;width:100%;
display:flex;flex-direction:column;justify-content:space-between;gap:40px;
}
/* --- Top eyebrow row --- */
.hero-top{
display:flex;align-items:center;justify-content:space-between;gap:24px;
flex-wrap:wrap;
font-family:var(--mono);font-size:var(--fs-label);letter-spacing:var(--ls-label);
text-transform:uppercase;color:var(--ink-3);
}
.hero-status{display:inline-flex;align-items:center;gap:10px;color:var(--ink-2)}
.hero-status .pip{
width:7px;height:7px;border-radius:50%;
background:var(--accent);flex:none;
box-shadow:0 0 0 0 rgba(212,45,57,.5);
animation:pip 2.4s var(--ease) infinite;
}
@keyframes pip{
0%{box-shadow:0 0 0 0 rgba(212,45,57,.45)}
70%{box-shadow:0 0 0 11px rgba(212,45,57,0)}
100%{box-shadow:0 0 0 0 rgba(212,45,57,0)}
}
.hero-now b{color:var(--ink);font-weight:600}
/* --- Name + statement — name left, statement right, both baseline-anchored --- */
.hero-mid{
margin-top:auto;
display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);
align-items:end;gap:48px;
}
.hero-name{
font-size:clamp(4.5rem,12.5vw,11rem);
font-weight:900;
line-height:.84;
letter-spacing:-.06em;
color:var(--ink);
margin:0;
}
.hero-line{display:block;overflow:hidden;padding-bottom:.04em}
/* `both` fill, no base offset — if animation never runs, type still renders in place */
.hero-line>span{display:block;animation:hero-rise 1.1s var(--ease) both}
.hero-line:nth-child(1)>span{animation-delay:.08s}
.hero-line:nth-child(2)>span{animation-delay:.2s}
@keyframes hero-rise{from{transform:translateY(105%)}to{transform:translateY(0)}}
.hero-name i{color:var(--accent);font-style:normal}
.hero-tagline{
font-size:clamp(1.15rem,1.6vw,1.45rem);
line-height:1.45;
letter-spacing:-.01em;
color:var(--ink-2);
max-width:30ch;
padding-bottom:.5em;
border-left:2px solid var(--accent);
padding-left:20px;
animation:hero-fade .8s var(--ease) .34s both;
}
.hero-tagline b{color:var(--ink);font-weight:600}
@keyframes hero-fade{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
/* --- Meta row --- */
.hero-meta{
display:grid;grid-template-columns:repeat(4,1fr);gap:0;
border-top:1px solid var(--border);
animation:hero-fade .8s var(--ease) .46s both;
}
.hero-meta-cell{
display:flex;flex-direction:column;gap:6px;
padding:22px 0;
border-right:1px solid var(--border);
padding-right:32px;
}
.hero-meta-cell:last-child{border-right:none;padding-right:0}
.hero-meta-cell:not(:first-child){padding-left:32px}
.hero-k{
font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:var(--ls-label);
text-transform:uppercase;color:var(--ink-3);
}
.hero-v{font-size:var(--fs-md);color:var(--ink);line-height:1.4}
/* CTA cell — the one interactive tile in the row */
.hero-cta{cursor:pointer;transition:color .3s var(--ease)}
.hero-cta .hero-k{color:var(--accent);transition:color .3s var(--ease)}
.hero-cta .hero-v i{
display:inline-block;font-style:normal;
transition:transform .3s var(--ease);
}
.hero-cta:hover .hero-v{text-decoration:underline;text-underline-offset:4px}
.hero-cta:hover .hero-v i{transform:translateY(4px)}
@media(prefers-reduced-motion:reduce){
.hero::before,.hero::after,.hero-status .pip{animation:none}
.hero-line>span,.hero-tagline,.hero-meta{animation:none;opacity:1;transform:none}
}
/* ============================================================
SECTION — Generic
============================================================ */
.section{padding:120px 0}
.section-dark{
background:var(--bg-dark);color:#fff;
position:relative;
}
/* Soft gradient fade at light→dark transition */
.section-dark::before{
content:'';position:absolute;top:-80px;left:0;right:0;height:80px;
background:linear-gradient(to bottom,var(--bg),var(--bg-dark));
pointer-events:none;z-index:1;
}
/* Faint geometric grid pattern for dark section depth */
.section-dark::after{
content:'';position:absolute;inset:0;
pointer-events:none;
opacity:.07;
background-image:
linear-gradient(rgba(255,255,255,.12) 1px,transparent 1px),
linear-gradient(90deg,rgba(255,255,255,.12) 1px,transparent 1px);
background-size:64px 64px;
-webkit-mask-image:radial-gradient(ellipse 90% 70% at 50% 30%,black 30%,transparent 75%);
mask-image:radial-gradient(ellipse 90% 70% at 50% 30%,black 30%,transparent 75%);
}
.section-dark .ink-2{color:rgba(255,255,255,.5)}
.section-dark .ink-3{color:rgba(255,255,255,.6)}
.section-dark .border{border-color:var(--border-dk)}
.section-head{
display:flex;align-items:baseline;justify-content:space-between;
margin-bottom:80px;
}
.section-title{
font-size:clamp(3rem,8vw,6.5rem);
font-weight:900;letter-spacing:-.04em;line-height:.92;
}
/* Secondary display size — for a section head nested inside another section */
.section-title--sm{font-size:clamp(2rem,5vw,4rem)}
.section-no{
font-family:var(--mono);font-size:var(--fs-label);color:var(--ink-3);
letter-spacing:var(--ls-meta);
}
/* Dark sections invert their own head — no inline overrides needed */
.section-dark .section-title{color:#fff}
.section-dark .section-no{color:rgba(255,255,255,.6)}
/* Vertical rhythm for a .wrap used as a full section shell (keeps the
responsive horizontal gutter from .wrap instead of hardcoding it) */
.wrap--section{padding-top:120px;padding-bottom:120px}
.section-sub{margin-top:80px}
/* ============================================================
ABOUT
============================================================ */
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start}
.about-bio-group{display:flex;flex-direction:column;gap:36px}
.portrait-card{
position:relative;width:100%;max-width:340px;
border:1px solid var(--border);background:#fff;
padding:12px;border-radius:var(--r-lg);
box-shadow:0 4px 20px rgba(0,0,0,0.03);
}
.portrait-frame{position:relative;overflow:hidden;border-radius:var(--r-md)}
/* display:contents so adds no box — the img stays the laid-out child */
.portrait-frame picture,.res-head-profile picture{display:contents}
.portrait-img{
/* height:auto is required — the width/height attrs on ![]()
are presentational
hints that would otherwise make both dimensions definite and void aspect-ratio */
width:100%;height:auto;aspect-ratio:4/4.8;object-fit:cover;object-position:center 20%;
border-radius:var(--r-sm);display:block;transition:transform .4s var(--ease);
}
.portrait-card:hover .portrait-img{transform:scale(1.02)}
.portrait-cap{
display:flex;justify-content:space-between;align-items:center;
margin-top:10px;padding:4px 4px 0;
font-family:var(--mono);font-size:var(--fs-label);color:var(--ink-3);
letter-spacing:var(--ls-meta);
}
.portrait-cap .r{color:var(--accent);font-weight:700}
.about-text{font-size:var(--fs-h2);line-height:1.7;color:var(--ink-2)}
.about-text strong{color:var(--ink);font-weight:700}
.about-stats{display:grid;grid-template-columns:1fr 1fr;gap:0;margin-top:48px}
.about-stat{
padding:28px 0;
border-top:1px solid var(--border);
}
.about-stat .num{font-size:var(--fs-display);font-weight:900;letter-spacing:-.03em;line-height:1}
.about-stat .num span{color:var(--accent)}
.about-stat .label{font-family:var(--mono);font-size:var(--fs-label);color:var(--ink-3);margin-top:6px;letter-spacing:var(--ls-meta)}
.about-roles{
border-top:1px solid var(--border);padding-top:40px;
}
.about-roles h3{font-family:var(--mono);font-size:var(--fs-label);color:var(--ink-3);letter-spacing:var(--ls-label);text-transform:uppercase;margin-bottom:20px}
.role-row{
display:grid;grid-template-columns:140px 1fr 1fr;gap:24px;
padding:14px 0;border-bottom:1px solid var(--border);align-items:baseline;
}
.role-row .period{font-family:var(--mono);font-size:var(--fs-label);color:var(--ink-3);letter-spacing:var(--ls-meta)}
.role-row .title{font-weight:700;font-size:var(--fs-md)}
.role-row .co{color:var(--ink-2);font-size:var(--fs-md)}
.role-row.current .period{color:var(--accent);font-weight:700}
/* Career list → résumé handoff. The list is an abridged résumé, so this is its
natural next step; it also lands in the column's existing trailing space.
Uses the shared .btn-dl outline button (see Resume page section). */
.about-cta{margin-top:32px}
/* ============================================================
EXPERTISE — 3 columns matching frame
============================================================ */
.exp-grid{
display:grid;grid-template-columns:1fr 1fr 1fr;gap:0;
border-top:1px solid var(--border);
}
.exp-col{
padding:48px 40px 48px 0;
border-right:1px solid var(--border);
}
.exp-col:last-child{border-right:none;padding-right:0}
.exp-col:not(:first-child){padding-left:40px}
.exp-col h3{font-size:var(--fs-h1);font-weight:800;letter-spacing:-.02em;margin-bottom:24px}
.exp-list{list-style:none}
.exp-list li{
padding:12px 0;
border-bottom:1px solid var(--border);
font-size:var(--fs-md);color:var(--ink-2);
display:flex;align-items:center;gap:10px;
}
.exp-list li::before{content:"→";color:var(--accent);font-size:var(--fs-label)}
/* ============================================================
WORKS — Full-width project rows with overlay info
============================================================ */
.work-item{
position:relative;
border-bottom:1px solid var(--border-dk);
overflow:hidden;
}
.work-link{
display:grid;grid-template-columns:1fr 1.6fr;
text-decoration:none;color:#fff;
min-height:540px;
transition:all .4s var(--ease);
}
.work-info{
padding:56px;display:flex;flex-direction:column;justify-content:flex-end;
background:var(--bg-dark);
position:relative;
}
.work-no{
font-family:var(--mono);font-size:var(--fs-label);color:var(--accent);
letter-spacing:var(--ls-meta);margin-bottom:auto;
}
.work-info h3{
font-size:clamp(2rem,4vw,3.2rem);font-weight:900;
letter-spacing:-.03em;line-height:1.05;margin-bottom:20px;
}
.work-metric{
display:flex;align-items:baseline;gap:12px;margin-bottom:16px;
}
.work-metric .big{font-size:var(--fs-stat);font-weight:900;color:var(--accent-on-dark);letter-spacing:-.02em}
.work-metric .cap{font-family:var(--mono);font-size:var(--fs-label);color:rgba(255,255,255,.6);letter-spacing:var(--ls-label);text-transform:uppercase}
.work-desc{color:rgba(255,255,255,.5);font-size:var(--fs-md);max-width:40ch;line-height:1.6;margin-bottom:28px}
.work-cta{
display:inline-flex;align-items:center;gap:10px;
font-family:var(--mono);font-size:var(--fs-label);letter-spacing:var(--ls-label);
text-transform:uppercase;color:#fff;
padding:14px 24px;border:1px solid rgba(255,255,255,.2);
border-radius:var(--r-md);width:fit-content;
transition:all .3s var(--ease);
}
.work-cta:hover{background:#fff;color:var(--ink);border-color:#fff}
.work-tags{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:32px}
.work-tag{
font-family:var(--mono);font-size:var(--fs-label);color:rgba(255,255,255,.6);
letter-spacing:var(--ls-label);text-transform:uppercase;
border:1px solid rgba(255,255,255,.15);
padding:4px 10px;border-radius:var(--r-sm);
}
.work-tag.nda{color:var(--accent-on-dark);border-color:var(--accent)}
.work-visual{
background:var(--bg-dark2);
display:flex;align-items:center;justify-content:center;
padding:48px;
transition:all .4s var(--ease);
}
.work-link:hover .work-visual{background:var(--ink)}
/* The row diagrams are authored at different viewBox widths (400–500).
Normalizing to one rendered width keeps every work row optically equal. */
.work-visual svg{width:100%;max-width:520px;height:auto;opacity:.8;transition:opacity .4s var(--ease)}
.work-link:hover .work-visual svg{opacity:1}
/* must not shrink to an inline box around the contained shot */
.work-visual picture{display:contents}
/* Real product shots — contained so nothing crops, lifts on row hover */
.work-visual .work-shot{
max-width:100%;max-height:100%;width:auto;height:auto;
object-fit:contain;
border-radius:var(--r-lg);
box-shadow:0 24px 60px rgba(0,0,0,.45);
opacity:.92;
transition:opacity .4s var(--ease),transform .4s var(--ease);
}
.work-link:hover .work-shot{opacity:1;transform:translateY(-4px)}
@media(prefers-reduced-motion:reduce){
.work-link:hover .work-shot{transform:none}
}
/* Alternate row direction */
.work-item:nth-child(even) .work-link{grid-template-columns:1.6fr 1fr}
.work-item:nth-child(even) .work-info{order:2}
.work-item:nth-child(even) .work-visual{order:1}
/* Briefs row — three briefs since LA 3.0 was promoted to a full case study */
.brief-row{
display:grid;grid-template-columns:repeat(3,1fr);gap:0;
border-bottom:1px solid var(--border-dk);
}
.brief{
padding:40px 32px;
border-right:1px solid var(--border-dk);
background:var(--bg-dark);
color:#fff;
}
.brief:last-child{border-right:none}
.brief .brief-no{font-family:var(--mono);font-size:var(--fs-label);color:var(--accent-on-dark);letter-spacing:var(--ls-meta);margin-bottom:12px}
.brief h4{font-size:var(--fs-h4);font-weight:800;letter-spacing:-.01em;margin-bottom:8px}
.brief p{color:rgba(255,255,255,.6);font-size:var(--fs-sm);line-height:1.55}
/* ============================================================
THROUGHLINE — Timeline on light section
============================================================ */
.tl-intro{max-width:60ch;font-size:var(--fs-h3);color:var(--ink-2);line-height:1.7;margin-bottom:56px}
.tl-intro strong{color:var(--ink);font-weight:700}
.tl-grid{
display:grid;grid-template-columns:repeat(5,1fr);gap:0;
border-top:3px solid var(--ink);
}
.tl-node{
padding:28px 24px 28px 0;
border-right:1px solid var(--border);
position:relative;
}
.tl-node:last-child{border-right:none}
.tl-node::before{
content:"";position:absolute;top:-7px;left:0;
width:11px;height:11px;border-radius:50%;
background:var(--ink);
}
.tl-node.now::before{background:var(--accent)}
.tl-year{font-family:var(--mono);font-size:var(--fs-label);font-weight:700;color:var(--ink-3);letter-spacing:var(--ls-meta);margin-bottom:8px}
/* On the light throughline band, use the base accent — accent-on-dark is a
tint mixed for dark surfaces and reads washed out here. */
.tl-node.now .tl-year{color:var(--accent)}
.tl-title{font-weight:800;font-size:var(--fs-md);letter-spacing:-.01em;margin-bottom:4px}
.tl-title a{text-decoration:none;transition:color .2s}
.tl-title a:hover{color:var(--accent)}
.tl-sub{color:var(--ink-2);font-size:var(--fs-sm);line-height:1.5}
/* ============================================================
CAPABILITIES — 3-col matching frame
============================================================ */
.cap-grid{
display:grid;grid-template-columns:1fr 1fr 1fr;gap:0;
}
.cap-item{
padding:44px 40px;
border:1px solid var(--border-dk);
border-top:none;border-left:none;
color:#fff;
}
.cap-item:nth-child(3n){border-right:none}
.cap-item:nth-child(-n+3){border-top:1px solid var(--border-dk)}
.cap-item h3{font-size:var(--fs-h4);font-weight:800;letter-spacing:-.01em;margin-bottom:10px}
.cap-item p{color:rgba(255,255,255,.6);font-size:var(--fs-sm);line-height:1.6}
/* ============================================================
LAB — Dark with accent headers
============================================================ */
.lab-grid{
display:grid;grid-template-columns:1fr 1fr;gap:0;
border-top:1px solid var(--border-dk);
}
.lab-item{
padding:44px 40px;
border-right:1px solid var(--border-dk);
border-bottom:1px solid var(--border-dk);
color:#fff;
}
.lab-item:nth-child(2n){border-right:none}
.lab-item h3{font-size:var(--fs-h4);font-weight:800;letter-spacing:-.01em;margin-bottom:8px}
.lab-item p{color:rgba(255,255,255,.6);font-size:var(--fs-sm);line-height:1.6}
/* ============================================================
CONTACT / CTA — Dark cinematic section
============================================================ */
.contact{
background:var(--bg-dark);color:#fff;
padding:180px 0;text-align:center;
position:relative;
}
.contact h2{
font-size:clamp(2rem,5vw,4rem);
font-weight:800;letter-spacing:-.03em;
margin-bottom:24px;color:rgba(255,255,255,.8);
}
.contact p{color:rgba(255,255,255,.6);font-size:var(--fs-base);margin-bottom:40px}
/* One pill button, shared by the home CTA and every case-study CTA */
.contact-btn{
display:inline-flex;align-items:center;gap:10px;
font-family:var(--mono);font-size:var(--fs-label);letter-spacing:var(--ls-meta);
padding:16px 36px;border:1.5px solid rgba(255,255,255,.6);
border-radius:var(--r-pill);color:#fff;text-decoration:none;
transition:all .3s var(--ease);
}
.contact-btn:hover{background:#fff;color:var(--ink);border-color:#fff}
.contact-avail{
margin-top:24px;font-family:var(--mono);font-size:var(--fs-label);
color:rgba(255,255,255,.6);letter-spacing:var(--ls-meta);
}
.contact-links{
margin-top:56px;display:flex;justify-content:center;gap:48px;
flex-wrap:wrap;
}
.contact-links a{
font-family:var(--mono);font-size:var(--fs-label);color:rgba(255,255,255,.6);
letter-spacing:var(--ls-meta);transition:color .2s;
}
.contact-links a:hover{color:#fff}
/* ============================================================
FOOTER — Large branding
============================================================ */
.footer{
background:var(--bg-dark);color:#fff;
border-top:1px solid var(--border-dk);
padding:80px 0 calc(var(--frame-h) + 40px);
}
.footer-name{
font-size:clamp(4rem,12vw,10rem);
font-weight:900;letter-spacing:-.06em;line-height:.85;
color:rgba(255,255,255,.06);margin-bottom:40px;
}
.footer-bar{
display:flex;justify-content:space-between;align-items:center;gap:24px;
flex-wrap:wrap;
font-family:var(--mono);font-size:var(--fs-label);color:rgba(255,255,255,.6);
letter-spacing:var(--ls-meta);
}
.footer-bar a{color:rgba(255,255,255,.6);transition:color .2s}
.footer-bar a:hover{color:#fff}
/* ============================================================
CASE STUDY — PAGE-LEVEL TWO-COLUMN GRID (Kaeli pattern)
The entire page is a 2-col grid:
LEFT = sticky sidebar (metadata, stays visible during scroll)
RIGHT = scrollable main (hero visual, sections, content, more works)
============================================================ */
.cs-page{
display:grid!important;
grid-template-columns:minmax(320px,38%) 1fr!important;
min-height:100vh;
}
/* --- LEFT: Sticky sidebar --- */
.cs-sidebar{
position:sticky!important;
top:var(--frame-h)!important;
align-self:start!important;
max-height:calc(100vh - var(--frame-h))!important;
overflow-y:auto;
border-right:1px solid var(--border)!important;
background:var(--bg);
display:flex;flex-direction:column;justify-content:flex-end;
/* Same horizontal gutter as the main column, so the page has one left edge */
padding:56px var(--cs-pad) 48px!important;
}
/* Company logo (top of sidebar) */
.cs-logo{margin-bottom:22px}
.cs-logo img{height:30px;width:auto;display:block}
.cs-logo .wordmark{
font-weight:800;font-size:var(--fs-h2);letter-spacing:-.02em;
color:var(--ink);line-height:1;
}
/* Doc line at top */
.doc-line{
display:flex;gap:20px;flex-wrap:wrap;
font-family:var(--mono);font-size:var(--fs-label);color:var(--ink-3);
letter-spacing:var(--ls-label);text-transform:uppercase;
margin-bottom:auto;padding-bottom:24px;
}
.doc-line b{color:var(--ink);font-weight:600}
/* Breadcrumb */
.cs-crumb{
font-family:var(--mono);font-size:var(--fs-label);color:var(--ink-3);
letter-spacing:var(--ls-meta);margin-bottom:28px;
}
.cs-crumb a{color:var(--ink-3);text-decoration:none;transition:color .2s}
.cs-crumb a:hover{color:var(--accent)}
/* Title */
.cs-sidebar h1{
font-size:clamp(2.2rem,4.5vw,3.75rem);font-weight:900;
letter-spacing:-.04em;line-height:.92;margin-bottom:20px;
color:var(--ink);
}
/* Lede */
.cs-lede{
max-width:44ch;color:var(--ink-2);font-size:var(--fs-md);line-height:1.65;
margin-bottom:28px;
}
.cs-lede b{color:var(--ink);font-weight:600}
/* NDA badge */
.nda{
display:inline-flex;align-items:center;gap:6px;
font-family:var(--mono);font-size:var(--fs-label);letter-spacing:var(--ls-label);
color:var(--accent-on-dark);text-transform:uppercase;
}
/* Meta grid */
.cs-meta{
display:grid;grid-template-columns:1fr 1fr;gap:0;
border-top:1px solid var(--border);
}
.cs-meta>div{
padding:14px 16px 14px 0;
border-bottom:1px solid var(--border);
}
.cs-meta>div:nth-child(odd){border-right:1px solid var(--border)}
.cs-meta>div:nth-child(even){padding-left:16px}
/* Case studies carry either 3 or 4 meta pairs. With an odd count the last cell
would leave a half-empty row trailing a dangling rule — span it instead. */
.cs-meta>div:last-child:nth-child(odd){
grid-column:1/-1;border-right:none;padding-right:0;
}
.cs-meta .k{
display:block;
font-family:var(--mono);font-size:var(--fs-label);color:var(--ink-3);
letter-spacing:var(--ls-label);text-transform:uppercase;margin-bottom:4px;
}
.cs-meta .v{display:block;font-weight:700;font-size:var(--fs-sm);color:var(--ink)}
/* --- RIGHT: Scrollable main --- */
.cs-main{
background:var(--bg);
}
/* Hero visual (top of main column) */
.cs-hero-visual{
background:var(--bg-dark)!important;
display:flex;align-items:center;justify-content:center;
padding:64px var(--cs-pad);
min-height:70vh!important;
position:relative;
}
.cs-hero-visual svg{max-width:100%;height:auto;opacity:.85}
/* Figure frame / caption */
.fig-frame{width:100%;display:flex;flex-direction:column}
.fig-frame svg{flex:1;width:100%;height:auto}
.fig-cap{
display:flex;justify-content:space-between;align-items:center;gap:20px;
padding:12px 0;margin:0;
border-top:1px solid var(--border-dk);
font-family:var(--mono);font-size:var(--fs-label);color:rgba(255,255,255,.6);
letter-spacing:var(--ls-label);text-transform:uppercase;
}
.fig-cap .r{text-align:right}
/* Hero image (real screenshot in the dark hero band) */
.cs-hero-visual picture{display:block}
.cs-hero-visual img.hero-shot{
max-width:100%;height:auto;display:block;
border-radius:var(--r-lg);
box-shadow:0 30px 80px rgba(0,0,0,.5);
}
/* Inline real-screenshot figures (light body band) */
.cs-fig{margin:0;padding:40px var(--cs-pad) 8px;background:var(--bg)}
.cs-fig-media{
border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;
background:#fff;box-shadow:0 14px 44px rgba(10,10,15,.13);
}
.cs-fig-media img{display:block;width:100%;height:auto}
.cs-fig figcaption{
margin-top:14px;font-family:var(--mono);font-size:var(--fs-label);
color:var(--ink-3);letter-spacing:var(--ls-label);text-transform:uppercase;
}
/* Story sub-headings + meta line inside body */
.cs-body .cs-subhead{font-size:var(--fs-sm);font-weight:800;letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--ink);margin-bottom:2px}
.cs-body .cs-meta-line{font-family:var(--mono);font-size:var(--fs-sm);color:var(--ink-3);letter-spacing:var(--ls-meta);margin-top:4px}
/* Before/after phase tags */
.cs-phase{padding:40px var(--cs-pad) 4px;background:var(--bg);display:flex;align-items:center;gap:12px}
.cs-phase .tag{
font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:var(--ls-label);text-transform:uppercase;
padding:6px 14px;border-radius:var(--r-pill);font-weight:700;
}
.cs-phase .tag.old{background:#e7e5df;color:var(--ink-3)}
.cs-phase .tag.new{background:var(--ink);color:#fff}
.cs-phase .tag.new::before{
content:'';display:inline-block;width:6px;height:6px;border-radius:50%;
background:var(--accent-on-dark);margin-right:8px;vertical-align:middle;
}
/* Scope-of-improvement lists */
.cs-body ul.scope{list-style:none;margin:10px 0 0;padding:0}
.cs-body ul.scope li{
position:relative;padding:12px 0 12px 28px;border-top:1px solid var(--border);
color:var(--ink-2);font-size:var(--fs-md);line-height:1.6;
}
.cs-body ul.scope li::before{content:'→';position:absolute;left:0;top:12px;color:var(--accent);font-family:var(--mono)}
/* Slideshow carousel */
.cs-slides{padding:8px var(--cs-pad) 40px;background:var(--bg)}
.cs-slides-track{
display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
border-radius:var(--r-lg);border:1px solid var(--border);background:#fff;
box-shadow:0 14px 44px rgba(10,10,15,.13);scrollbar-width:none;
}
.cs-slides-track::-webkit-scrollbar{display:none}
.cs-slide{flex:0 0 100%;scroll-snap-align:start}
/* is inline by default and would add a baseline gap under the slide */
.cs-slide picture{display:block}
.cs-fig-media picture{display:block}
.cs-slide img{display:block;width:100%;height:auto}
.cs-slides-nav{display:flex;align-items:center;gap:14px;margin-top:16px}
.cs-slides-btn{
width:42px;height:42px;flex:0 0 auto;border:1px solid var(--border);background:var(--bg);
border-radius:var(--r-md);cursor:pointer;font-size:var(--fs-base);color:var(--ink);line-height:1;
transition:all .2s var(--ease);
}
.cs-slides-btn:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.cs-slides-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* tabular-nums: the current-slide digit changes at runtime, and proportional
figures would shift the counter's width as it counts up. */
.cs-slides-count{font-family:var(--mono);font-size:var(--fs-label);color:var(--ink-3);letter-spacing:var(--ls-meta);font-variant-numeric:tabular-nums}
.cs-slides-count b{color:var(--ink)}
.cs-slides-cap{margin-left:auto;font-family:var(--mono);font-size:var(--fs-label);color:var(--ink-3);letter-spacing:var(--ls-label);text-transform:uppercase;text-align:right}
/* Embedded demo video (YouTube) */
.cs-video{padding:8px var(--cs-pad) 40px;background:var(--bg)}
.cs-video-frame{
position:relative;padding-bottom:56.25%;height:0;border-radius:var(--r-lg);overflow:hidden;
box-shadow:0 14px 44px rgba(10,10,15,.13);background:#000;
}
.cs-video-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.cs-video figcaption{margin-top:14px;font-family:var(--mono);font-size:var(--fs-label);color:var(--ink-3);letter-spacing:var(--ls-label);text-transform:uppercase}
/* Section bars (full-width dark dividers inside main column) */
.cs-section-bar{
background:var(--bg-dark)!important;
padding:20px var(--cs-pad);
display:flex;align-items:center;gap:16px;
}
.cs-section-bar h2{
font-size:var(--fs-sm);font-weight:800;letter-spacing:var(--ls-label);
text-transform:uppercase;color:#fff!important;margin:0;
}
/* Article body (inside main column).
Left-aligned, not centred: section bars, figures, and carousels all start at
--cs-pad, so centring the prose put it ~100px out of step with everything
around it. Same measure, now on the page's single left edge. */
.cs-body{max-width:680px;margin:0;padding:40px var(--cs-pad)}
.cs-body p{color:var(--ink-2);margin-bottom:20px;font-size:var(--fs-base);line-height:1.75}
.cs-body p b,.cs-body p strong{color:var(--ink);font-weight:600}
.cs-pull{
border-left:4px solid var(--accent);padding:8px 0 8px 28px;margin:40px 0;
font-weight:900;font-size:var(--fs-h2);line-height:1.28;letter-spacing:-.015em;color:var(--ink);
}
/* Decision rows — unnumbered; the rule between them is the separator */
.dec-row{
padding:24px 0;border-bottom:1px solid var(--border);
}
.dec-row h3{font-size:var(--fs-h4);font-weight:800;letter-spacing:-.01em}
.dec-row p{font-size:var(--fs-md);margin:6px 0 0;line-height:1.65;color:var(--ink-2)}
/* Outcome table */
.out-table{margin-bottom:24px}
.out-row{
display:grid;grid-template-columns:1fr 2fr;gap:24px;
padding:20px 0;border-bottom:1px solid var(--border);align-items:baseline;
}
.out-row .v{font-weight:900;font-size:var(--fs-h1);letter-spacing:-.02em;color:var(--accent)}
/* Named rows (e.g. the design-system module list) read as labels, not metrics */
.out-row .v.is-label{font-size:var(--fs-h4)}
.out-row .v.is-accent{color:var(--accent)}
.out-row .k{color:var(--ink-2);font-size:var(--fs-md)}
/* --- More Works (inside main column, dark bg) --- */
.more-works{
background:var(--bg-dark)!important;
padding:80px var(--cs-pad);
border-top:1px solid var(--border-dk);
}
.more-works-heading{
display:flex;justify-content:space-between;align-items:flex-end;
margin-bottom:40px;
}
.more-works-heading h2{
font-size:clamp(1.8rem,3.5vw,2.8rem);font-weight:900;
letter-spacing:-.03em;line-height:.95;color:#fff;
}
.more-works-heading .all-link{
display:inline-flex;align-items:center;gap:8px;
font-family:var(--mono);font-size:var(--fs-label);letter-spacing:var(--ls-label);
text-transform:uppercase;color:rgba(255,255,255,.6);
text-decoration:none;transition:color .2s;
}
.more-works-heading .all-link:hover{color:#fff}
.more-works-grid{
display:grid;grid-template-columns:1fr 1fr;gap:24px;
}
.mw-card{
position:relative;display:block;
border-radius:var(--r-lg);overflow:hidden;
background:var(--bg-dark2);
text-decoration:none;color:#fff;
transition:transform .4s var(--ease),box-shadow .4s var(--ease);
}
.mw-card:hover{transform:translateY(-6px);box-shadow:0 20px 60px rgba(0,0,0,.4)}
.mw-card-visual{
height:180px;background:var(--bg-dark2);
display:flex;align-items:center;justify-content:center;
padding:28px;border-bottom:1px solid var(--border-dk);
transition:background .4s var(--ease);
}
.mw-card:hover .mw-card-visual{background:var(--ink)}
.mw-card-visual svg{max-width:100%;height:auto;opacity:.7;transition:opacity .4s var(--ease)}
.mw-card:hover .mw-card-visual svg{opacity:1}
.mw-card-body{padding:20px}
.mw-card-body h3{font-size:var(--fs-h4);font-weight:800;letter-spacing:-.01em;margin-bottom:6px}
.mw-card-body p{color:rgba(255,255,255,.6);font-size:var(--fs-sm);line-height:1.55;margin-bottom:14px}
.mw-card-cta{
display:inline-flex;align-items:center;gap:8px;
font-family:var(--mono);font-size:var(--fs-label);letter-spacing:var(--ls-label);
text-transform:uppercase;color:rgba(255,255,255,.5);
padding:8px 16px;border:1px solid rgba(255,255,255,.15);
border-radius:var(--r-sm);transition:all .3s var(--ease);
}
.mw-card:hover .mw-card-cta{color:#fff;border-color:var(--accent-on-dark)}
/* --- CTA section (inside main column) --- */
.cs-cta{
background:var(--bg-dark)!important;color:#fff!important;
padding:100px var(--cs-pad);text-align:center;
position:relative;
border-top:1px solid var(--border-dk);
}
.cs-cta h2{
font-size:clamp(1.75rem,3vw,2.4rem);
font-weight:800;letter-spacing:-.03em;
margin-bottom:16px;color:rgba(255,255,255,.85);
}
.cs-cta p{color:rgba(255,255,255,.6);font-size:var(--fs-md);margin-bottom:28px;max-width:46ch;margin-left:auto;margin-right:auto}
/* Inherits .contact-btn wholesale — only the padding tightens for this band */
.cs-cta .contact-btn{padding:14px 32px}
/* Same element as the home page's .contact-avail */
.cs-cta .avail{
margin-top:16px;font-family:var(--mono);font-size:var(--fs-label);
color:rgba(255,255,255,.6);letter-spacing:var(--ls-meta);
}
/* --- Colophon (inline footer) — one component, two gutters --- */
.cs-colophon,.colophon{
display:flex;justify-content:space-between;align-items:center;gap:24px;
flex-wrap:wrap;
font-family:var(--mono);font-size:var(--fs-label);color:var(--ink-3);
letter-spacing:var(--ls-meta);border-top:1px solid var(--border);
}
.cs-colophon{padding:28px var(--cs-pad)} /* full-bleed inside .cs-main */
.colophon{padding:32px 0} /* already inside a .wrap */
.cs-colophon a,.colophon a{color:var(--ink-3);text-decoration:none;transition:color .2s}
.cs-colophon a:hover,.colophon a:hover{color:var(--accent)}
/* ============================================================
RESUME PAGE
============================================================ */
.res-hero{padding:100px 0 0}
.res-hero h1{
font-size:clamp(3rem,8vw,6rem);font-weight:900;letter-spacing:-.04em;line-height:.92;
}
.res-head-profile{display:flex;align-items:center;gap:32px;margin-top:20px}
.res-portrait{
width:96px;height:96px;border-radius:50%;object-fit:cover;object-position:center 20%;
border:2px solid var(--border);box-shadow:0 2px 12px rgba(0,0,0,0.06);flex-shrink:0;
}
.res-contact{
margin-top:28px;display:flex;gap:24px;flex-wrap:wrap;
font-family:var(--mono);font-size:var(--fs-label);color:var(--ink-3);letter-spacing:var(--ls-meta);
}
.res-contact a{transition:color .2s}
.res-contact a:hover{color:var(--accent)}
.res-actions{margin-top:40px;display:flex;gap:14px;flex-wrap:wrap}
/* Outline button — the light-surface counterpart to .contact-btn.
Shared: resume actions + the About section's résumé CTA on the home page. */
.btn-dl{
display:inline-flex;align-items:center;gap:8px;
font-family:var(--mono);font-size:var(--fs-label);letter-spacing:var(--ls-label);text-transform:uppercase;
padding:14px 28px;border:2px solid var(--ink);color:var(--ink);
border-radius:var(--r-md);transition:all .25s var(--ease);
}
.btn-dl:hover{background:var(--ink);color:#fff}
.btn-dl.accent{border-color:var(--accent);color:var(--accent)}
.btn-dl.accent:hover{background:var(--accent);color:#fff}
/* The wry one-liner under the actions */
.measure{
margin-top:36px;padding-top:20px;border-top:1px solid var(--border);
font-family:var(--mono);font-size:var(--fs-label);color:var(--ink-3);
letter-spacing:var(--ls-meta);
}
.res-grid{display:grid;grid-template-columns:2fr 1fr;gap:88px;padding:80px 0 48px}
.res-sec{margin-bottom:72px}
.res-sec:last-child{margin-bottom:0}
/* Section head — the light-surface twin of .cs-section-bar:
uppercase label · rule to the margin · optional right meta */
.sec-head{
display:flex;align-items:center;gap:16px;
margin-bottom:28px;
}
.sec-head h2{
font-size:var(--fs-sm);font-weight:800;letter-spacing:var(--ls-label);
text-transform:uppercase;color:var(--ink);flex:none;
}
.sec-head .rule{flex:1;height:1px;background:var(--border)}
.sec-head .meta{
font-family:var(--mono);font-size:var(--fs-label);color:var(--ink-3);
letter-spacing:var(--ls-meta);flex:none;
}
.sec-head--tight{margin-bottom:12px}
.res-summary{color:var(--ink-2);font-size:var(--fs-base);line-height:1.75}
.job{padding:28px 0;border-bottom:1px solid var(--border)}
.job:last-child{border-bottom:none}
.job-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
.job-head h3{font-size:var(--fs-h3);font-weight:800;letter-spacing:-.01em}
.job-head .period{font-family:var(--mono);font-size:var(--fs-label);color:var(--ink-3);letter-spacing:var(--ls-meta)}
.job .co{font-family:var(--mono);font-size:var(--fs-label);color:var(--accent);letter-spacing:var(--ls-label);text-transform:uppercase;margin:6px 0 16px}
.job ul{list-style:none;display:flex;flex-direction:column;gap:10px}
.job li{color:var(--ink-2);font-size:var(--fs-md);padding-left:22px;position:relative;line-height:1.6}
.job li::before{content:"→";position:absolute;left:0;color:var(--accent);font-size:var(--fs-label)}
/* Project block nested inside a job — flagged with an accent rule so it reads
as evidence under the role rather than another role */
.proj{
margin:18px 0 0;padding:2px 0 2px 20px;
border-left:2px solid var(--border);
}
.proj+.proj{margin-top:14px}
.job ul+.proj{margin-top:20px}
.proj h4{
display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
font-size:var(--fs-h4);font-weight:800;letter-spacing:-.01em;margin-bottom:6px;
}
.proj h4 a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--border);transition:color .2s,border-color .2s}
/* What kind of thing the project was — sits beside the title, not in the body */
.proj-kind{font-size:var(--fs-sm);font-weight:400;color:var(--ink-3)}
.proj h4 a:hover{color:var(--accent);border-color:var(--accent)}
.proj p{color:var(--ink-2);font-size:var(--fs-sm);line-height:1.65}
/* Cross-reference to the matching case-study doc number */
.fig-ref{
font-family:var(--mono);font-size:var(--fs-label);font-weight:400;
color:var(--ink-3);letter-spacing:var(--ls-meta);text-transform:uppercase;
}
/* Sidebar column */
.res-side{align-self:start}
.res-label{
font-family:var(--mono);font-size:var(--fs-label);color:var(--ink-3);
letter-spacing:var(--ls-label);text-transform:uppercase;
padding-bottom:12px;margin-bottom:24px;
border-bottom:1px solid var(--border);
}
.res-label+.skill-block{margin-top:0}
.res-label--gap{margin-top:48px}
.skill-block{margin-bottom:32px}
.skill-block h3{
font-family:var(--mono);font-size:var(--fs-label);font-weight:700;color:var(--ink);
letter-spacing:var(--ls-label);text-transform:uppercase;margin-bottom:10px;
border-bottom:2px solid var(--accent);padding-bottom:8px;
}
.skill-block p{font-size:var(--fs-sm);color:var(--ink-2);line-height:1.7}
/* ============================================================
Animations
============================================================ */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.in{opacity:1;transform:translateY(0)}
@supports(animation-timeline:view()){
.reveal{
animation:rvl .8s var(--ease) both;animation-timeline:view();
animation-range:entry 0% entry 20%;
opacity:0;transform:translateY(24px);transition:none;
}
@keyframes rvl{to{opacity:1;transform:translateY(0)}}
}
@media(prefers-reduced-motion:reduce){
.reveal{opacity:1;transform:none;transition:none;animation:none}
html{scroll-behavior:auto}
}
/* ============================================================
CINEMATIC — blend-mode cursor · scroll parallax · bg type
(Works + Contact drama; light sections untouched)
============================================================ */
/* Blend-mode custom cursor — inverts against whatever it's over.
Only shown on fine pointers; disabled for reduced-motion. */
.cursor-dot,.cursor-ring{
position:fixed;top:0;left:0;z-index:var(--z-cursor);
pointer-events:none;border-radius:50%;
mix-blend-mode:difference;
opacity:0;transition:opacity .3s var(--ease);
will-change:transform;
}
.cursor-dot{
width:8px;height:8px;background:#fff;
transform:translate(-50%,-50%);
}
.cursor-ring{
width:40px;height:40px;border:1.5px solid #fff;
transform:translate(-50%,-50%);
transition:opacity .3s var(--ease),width .3s var(--ease),height .3s var(--ease);
}
body.cursor-ready .cursor-dot,
body.cursor-ready .cursor-ring{opacity:1}
/* Grow the ring over interactive targets */
body.cursor-hot .cursor-ring{width:64px;height:64px;border-color:var(--accent-on-dark)}
body.cursor-hot .cursor-dot{width:5px;height:5px}
@media(hover:hover) and (pointer:fine){
body.cursor-ready{cursor:none}
body.cursor-ready a,body.cursor-ready button,body.cursor-ready .work-link{cursor:none}
}
/* Parallax layers */
[data-parallax]{will-change:transform}
/* Giant faint background type behind key sections — the "background
image" translated into on-brand editorial type. Parallaxes + blends. */
.bgword{
position:absolute;pointer-events:none;
font-weight:900;letter-spacing:-.04em;line-height:.8;
white-space:nowrap;user-select:none;z-index:0;
}
#works{overflow:hidden}
#works .bgword{
top:40px;left:56px;
font-size:clamp(8rem,26vw,22rem);
color:#fff;opacity:.03;
}
.contact{overflow:hidden}
.contact .wrap{position:relative;z-index:1}
.contact .bgword{
top:50%;left:50%;transform:translate(-50%,-50%);
font-size:clamp(10rem,34vw,30rem);
color:#fff;opacity:.035;
}
/* Parallaxing accent glow for cinematic depth on the dark CTA */
.contact{--glow-shift:0px}
.contact::before{
content:'';position:absolute;top:0;left:50%;
width:900px;height:900px;
transform:translate(-50%,-40%) translateY(var(--glow-shift));
background:radial-gradient(circle,rgba(232,65,78,.14) 0%,transparent 60%);
pointer-events:none;z-index:0;will-change:transform;
}
@media(prefers-reduced-motion:reduce){
.cursor-dot,.cursor-ring{display:none}
[data-parallax]{transform:none!important}
}
@media(max-width:1080px){
#works .bgword{top:8px;font-size:clamp(6rem,22vw,12rem)}
}
/* ============================================================
Responsive
============================================================ */
@media(max-width:1080px){
.hero-mid{grid-template-columns:1fr;gap:28px}
.hero-tagline{padding-bottom:0}
.work-link{grid-template-columns:1fr;min-height:auto}
.work-item:nth-child(even) .work-link{grid-template-columns:1fr}
.work-visual{min-height:320px}
.tl-grid{grid-template-columns:repeat(3,1fr)}
.tl-node:nth-child(n+4){border-top:1px solid var(--border);margin-top:0}
.brief-row{grid-template-columns:1fr 1fr}
/* Inner pages — stack to single column */
.cs-page{grid-template-columns:1fr!important}
.cs-sidebar{
position:relative!important;top:auto!important;height:auto;
max-height:none!important;
border-right:none!important;border-bottom:1px solid var(--border);
padding:40px var(--cs-pad)!important;
}
.cs-hero-visual{min-height:400px!important}
.more-works-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:768px){
/* One variable retunes every case-study gutter — sidebar, section bars,
figures, carousels, body, more-works, CTA, and colophon together */
:root{--cs-pad:24px}
.wrap{padding:0 24px}
.hero-inner{padding:32px 24px 48px;gap:32px}
.hero-rules{padding:0 24px;grid-template-columns:repeat(2,1fr)}
.hero-top{flex-direction:column;align-items:flex-start;gap:10px}
.hero-mid{grid-template-columns:1fr;gap:28px}
.hero-tagline{padding-bottom:0}
.frame-cell{padding:0 16px;font-size:var(--fs-sm)}
.hero-meta{grid-template-columns:1fr 1fr}
.hero-meta-cell{border-bottom:1px solid var(--border);padding:18px 24px 18px 0}
.hero-meta-cell:nth-child(2n){border-right:none;padding-right:0;padding-left:24px}
.hero-meta-cell:nth-child(2n+1){padding-left:0}
.hero-meta-cell:nth-last-child(-n+2){border-bottom:none}
.about-grid{grid-template-columns:1fr}
.exp-grid{grid-template-columns:1fr}
.exp-col{border-right:none;border-bottom:1px solid var(--border);padding:32px 0}
.exp-col:not(:first-child){padding-left:0}
.cap-grid{grid-template-columns:1fr}
.cap-item{border-right:none!important;border-left:none!important}
.lab-grid{grid-template-columns:1fr}
.lab-item{border-right:none}
.brief-row{grid-template-columns:1fr}
.tl-grid{grid-template-columns:1fr}
/* Inner pages responsive */
.frame-top--page .frame-top-inner{grid-template-columns:1.5fr 1fr 1fr 1fr} /* Lab hidden via hide-sm */
.cs-sidebar{padding:32px var(--cs-pad)!important}
.cs-hero-visual{padding:var(--cs-pad);min-height:300px!important}
.cs-meta{grid-template-columns:1fr 1fr}
.more-works{padding:56px var(--cs-pad)}
.more-works-grid{grid-template-columns:1fr}
.cs-cta{padding:64px var(--cs-pad)}
.cs-colophon{padding:20px var(--cs-pad)}
.wrap--section{padding-top:80px;padding-bottom:80px}
.section-sub{margin-top:56px}
.hide-sm{display:none}
.res-hero{padding:64px 0 0}
.res-grid{grid-template-columns:1fr;gap:48px;padding:56px 0 40px}
.res-head-profile{gap:20px}
.sec-head{flex-wrap:wrap;gap:12px}
.sec-head .rule{min-width:24px}
}
@media(max-width:480px){
.hero-name{font-size:clamp(3.5rem,16vw,6rem)}
.hero-rules{display:none}
.hero-meta{grid-template-columns:1fr}
.hero-meta-cell{border-right:none;padding:16px 0!important}
.hero-meta-cell:last-child{border-bottom:none}
.section{padding:80px 0}
.section-title{font-size:clamp(2rem,10vw,3.5rem)}
.frame-bottom{display:none}
body{padding-bottom:0}
.work-visual{min-height:220px;padding:24px}
.footer-name{font-size:clamp(3rem,14vw,5rem)}
/* Inner pages small */
.cs-sidebar h1{font-size:clamp(1.75rem,7vw,2.4rem)}
.cs-meta{grid-template-columns:1fr}
/* Single column — the odd/even column rules would leave stray right borders */
.cs-meta>div{border-right:none!important;padding-left:0!important;padding-right:0}
.doc-line{flex-direction:column;gap:8px}
.frame-top--page .frame-cell{padding:0 12px}
.frame-top--page .frame-cell .no{display:none}
.frame-top--page .frame-cell:nth-child(4){display:none} /* hide Resume; keep brand + Index + Contact */
.frame-top--page .frame-top-inner{grid-template-columns:1.4fr 1fr 1fr}
}
/* ---------- Print ---------- */
@media print{
.frame-top,.frame-bottom,.skip,.contact-btn,.more-works,.cs-cta,
.footer,.res-actions,.cursor-dot,.cursor-ring,.cs-slides-nav{display:none}
/* Print keeps its own scale: body is set in absolute pt, so reset the root
back to 100% or every rem-based label inherits the screen bump and the
resume spills onto an extra page. */
html{font-size:100%}
body{background:#fff;font-size:11pt;padding-bottom:0}
body::after{display:none} /* drop the film-grain overlay */
.hero{min-height:auto;padding:24px 0}
.section{padding:24px 0}
/* Dark bands invert to paper — including the heads that set #fff on screen */
.section-dark,.cs-section-bar,.cs-hero-visual,.contact{background:#fff!important;color:#000!important}
.section-dark .section-title,.cs-section-bar h2{color:#000!important}
.section-dark .section-no{color:#555!important}
a{color:inherit}
.cs-page{grid-template-columns:1fr!important}
.cs-sidebar{position:relative!important;height:auto;max-height:none!important;border-right:none!important}
.cs-body{max-width:none}
.res-grid{grid-template-columns:1fr;gap:32px;padding:24px 0}
.job,.proj{break-inside:avoid}
}