/* Direction F — INK
Fork of Direction E (Material v3): same skeleton, content, and motion system —
the material language swapped from machined chrome to ink pressed into paper.
— every display-type moment runs through a live SVG ink-bleed pipeline
(warp → dilate → blur → alpha threshold → paper-tooth displacement);
UI text stays crisp. Defs live inline in each page.
— hero name set in Erode 700, soaks in wet on load (ink.js animates the
#ink-reveal primitives; markup defaults are the settled state)
— hero panel carries live ink: a GPU metaball field in the letters' own
color, under the name — the cursor's drop, splashes and drips
— plates go from engraved metal to letterpress: printed bone stat with a
double-strike ghost, rust registration marks
— warmer blacks, heavier grain, fixed vignette — the cinematic grade */
/* ---------- type scale: a major third (1.25), 16px base on phones, 18px from 900px ----------
Every reading size is the base times a power of 1.25, rounded to whole pixels.
The display tier (hero name, section heads, numerals) is fitted to the measure
and stays fluid; leads and mid heads run fluid between two steps. */
:root {
--t:16px;
--t-2:12px; /* labels, tags, keys (12px floor) */
--t-1:15px; /* nav, chips, meta, captions */
--t0:16px; /* base reading */
--t1:20px; /* base * 1.25 deks, card titles */
--t2:25px; /* base * 1.25^2 leads, section sub-heads */
--t3:31px; /* base * 1.25^3 */
--t4:39px; /* base * 1.25^4 */
--t5:49px; /* base * 1.25^5 */
--t6:61px; /* base * 1.25^6 */
}
/* desktop: 18px base, the same steps, rounded to whole pixels */
/* a pixel that grows with big screens: 1px up to a 1600 screen, then in step with the
frame (1440 to 1760) up to 1.22px. Figure caps use it so a case study keeps its
1440 proportions on a wide monitor. Type does not. */
:root { --u:clamp(1px, .0625vw, 1.2222px); }
@media (min-width:900px) { :root { --t:18px; --t-2:13px; --t-1:16px; --t0:18px; --t1:23px; --t2:28px; --t3:35px; --t4:44px; --t5:55px; --t6:69px; } }
:root {
--void:#0a0908; --panel:#131110; --panel-2:#181613;
--bone:#edeae3; --dim:#8e8e96; --faint:#5b5b63; --faint-text:#7c7c86;
--line:rgba(237,234,227,.10); --line-2:rgba(237,234,227,.06);
--mint:#a8d5b5; --blue:#b9c4dd; --rust:#ec2222;
--r:20px; --r-lg:28px;
--ease:cubic-bezier(.22,1,.36,1);
--serif:'Erode', Georgia, serif;
/* one typeface: Erode carries every layer, SF Mono the labels */
--font-body:var(--serif); --font-display:var(--serif);
--font-mono:"SF Mono", ui-monospace, "JetBrains Mono", Menlo, monospace;
}
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-font-smoothing:antialiased; }
body {
background:var(--void); color:var(--bone);
font-family:var(--serif); font-size:var(--t0); line-height:1.6;
overflow-x:hidden;
}
::selection { background:var(--bone); color:var(--void); }
a { color:inherit; text-decoration:none; }
img { max-width:100%; display:block; }
section[id], .other[id] { scroll-margin-top:110px; }
.serif { font-family:var(--serif); font-weight:400; letter-spacing:0; }
.serif em, .serif i { font-style:italic; }
.mono { font-family:var(--font-mono); font-size:var(--t-2); letter-spacing:.12em; text-transform:uppercase; color:var(--dim); }
/* Erode carries the reading voice and the interface layer */
.nav, .btn, .skip { font-family:var(--font-body); }
/* ---------- focus layer ---------- */
a:focus-visible, .card:focus-visible, .c-item:focus-visible, .skip:focus-visible {
outline:2px solid var(--bone); outline-offset:3px; border-radius:inherit;
}
a:focus:not(:focus-visible) { outline:none; }
.nav a:focus-visible { color:var(--bone); }
.skip {
position:fixed; top:22px; left:22px; z-index:90; padding:11px 16px;
background:var(--bone); color:var(--void); border-radius:999px;
font-size:var(--t-1); font-weight:700; transform:translateY(-200%);
}
.skip:focus { transform:none; }
/* ---------- view transitions (card → cover morph, persistent nav) ---------- */
@media (prefers-reduced-motion: no-preference) {
@view-transition { navigation: auto; }
.nav { view-transition-name: nav; }
::view-transition-old(root), ::view-transition-new(root) {
animation-duration:.45s; animation-timing-function:var(--ease);
}
/* card to case study (vt.js names the ends): the card's panel travels and
becomes the stage, its screen lifts out, straightens and lands in the
stage, and the rest of the page swaps underneath */
::view-transition-group(cs-stage), ::view-transition-group(cs-frame) {
animation-duration:.95s; animation-timing-function:cubic-bezier(.45,0,.12,1); }
::view-transition-group(cs-stage) { border-radius:18px; overflow:clip; }
::view-transition-old(cs-stage), ::view-transition-new(cs-stage) {
width:100%; height:100%; object-fit:cover; object-position:50% 0; mix-blend-mode:normal; }
::view-transition-old(cs-stage) { animation:vt-out .4s linear .05s both; }
::view-transition-new(cs-stage) { animation:vt-in .45s linear .3s both; }
/* the screen dissolves once, near where it lands: new over old, never both half there */
::view-transition-old(cs-frame) { animation:vt-out .2s linear .5s both; mix-blend-mode:normal; }
::view-transition-new(cs-frame) { animation:vt-in .28s linear .36s both; mix-blend-mode:normal; }
:root.vt-card::view-transition-old(root) { animation:vt-sink .38s cubic-bezier(.5,0,.75,0) both; }
:root.vt-card::view-transition-new(root) { animation:vt-in .5s linear .3s both; }
/* opening the card: the panel fills the window, the screen straightens in the
middle and lets go of its crop, then both give way to the case study */
:root.vt-open::view-transition-group(cs-stage) { background:#0e0d0b;
animation:vt-cover .72s cubic-bezier(.65,0,.2,1) both, vt-out .34s linear .66s both; }
:root.vt-open::view-transition-group(cs-frame) { animation:vt-lift .78s cubic-bezier(.65,0,.2,1) both; }
/* the card's picture goes dark as it opens, so a bright card never floods the window */
:root.vt-open::view-transition-old(cs-stage) { animation:vt-out .4s linear .28s both; }
:root.vt-open::view-transition-old(cs-frame) { animation:vt-uncrop .6s cubic-bezier(.65,0,.2,1) both, vt-lift-off .3s cubic-bezier(.5,0,.75,0) .6s both; }
:root.vt-open::view-transition-new(root) { animation:vt-in .42s linear .74s both; }
/* phones: a wide card can't fill a tall screen without blowing its snapshot
up, so the panel grows around the card image, which keeps its own size */
@media (max-width:899px) {
:root.vt-open::view-transition-old(cs-stage) { object-fit:none; object-position:50% 50%; animation:vt-out .36s linear .52s both; }
}
/* the stage arrives by the transition, so it skips its own entrance */
.vt-arrive .sc-hero.rise { animation:none; }
}
@keyframes vt-out { to { opacity:0; } }
@keyframes vt-in { from { opacity:0; } }
@keyframes vt-lift-off { to { opacity:0; transform:translateY(-18px) scale(.985); } }
@keyframes vt-sink { to { opacity:0; transform:translateY(-14px) scale(.99); } }
/* ---------- atmosphere ---------- */
.grain {
position:fixed; inset:-120px; z-index:70; pointer-events:none; opacity:.34; will-change:transform;
background-image:url('data:image/svg+xml;utf8,');
animation:grain 5s steps(5) infinite;
}
@keyframes grain {
0%,100% { transform:translate3d(0,0,0); } 20% { transform:translate3d(70px,45px,0); }
40% { transform:translate3d(-40px,90px,0); } 60% { transform:translate3d(110px,-30px,0); }
80% { transform:translate3d(-70px,-60px,0); }
}
.glow {
position:fixed; left:0; top:0; width:64vw; height:64vw; z-index:0; pointer-events:none;
border-radius:50%; filter:blur(46px);
background:radial-gradient(circle, rgba(237,234,227,.055) 0%, transparent 62%);
transform:translate(calc(72vw - 32vw), calc(12vh - 32vw));
will-change:transform;
}
/* cinematic vignette — corners fall away like a projected frame */
body::after {
content:''; position:fixed; inset:0; z-index:69; pointer-events:none;
background:radial-gradient(130% 105% at 50% 42%, transparent 52%, rgba(0,0,0,.42) 100%);
}
/* ---------- entrance choreography (all pages) ---------- */
.js .rise { animation:riseIn .9s var(--ease) both; }
.js .rise.d1 { animation-delay:.09s; }
.js .rise.d2 { animation-delay:.18s; }
.js .rise.d3 { animation-delay:.27s; }
.js .rise.d4 { animation-delay:.44s; }
@keyframes riseIn {
from { opacity:0; transform:translateY(46px); }
to { opacity:1; transform:none; }
}
/* nav: see "nav — three floating tiles" near the end */
/* ---------- layout ---------- */
/* 1440 up to a 1600 screen, then it grows with the screen to 1760, so big monitors
get a bigger frame with no jump at a breakpoint. Text keeps its measure in ch. */
.wrap { position:relative; z-index:1; max-width:calc(1440 * var(--u)); margin:0 auto; padding:0 clamp(18px,3.4vw,48px); }
.pad { padding-top:104px; }
section { margin-bottom:clamp(90px,11vw,170px); }
.sec-head {
display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:18px;
border-top:1px solid var(--line); padding-top:22px; margin-bottom:clamp(28px,4vw,52px);
}
.sec-head h2 {
font-family:var(--serif); font-weight:700;
font-size:clamp(44px,6vw,84px); line-height:1.0; letter-spacing:-.01em;
text-wrap:balance;
}
.sec-head h2 em {
font-family:var(--serif); font-style:italic; font-weight:400;
letter-spacing:0; font-size:1.05em;
}
/* ---------- hero — the whole header is the ink story ---------- */
.hero { margin-bottom:clamp(70px,8vw,120px); }
.hero--full {
position:relative; isolation:isolate; border-radius:var(--r-lg); overflow:hidden;
min-height:min(calc(100svh - 126px), 1080px);
display:flex; flex-direction:column; justify-content:space-between;
gap:clamp(18px,2.6vw,30px);
padding:clamp(20px,3vw,42px);
background:
repeating-linear-gradient(0deg, rgba(237,234,227,.016) 0 1px, transparent 1px 3px),
radial-gradient(120% 90% at 20% -5%, rgba(237,234,227,.05), transparent 55%),
linear-gradient(165deg, #15130f 0%, #0e0d0b 55%, #0a0908 100%);
}
.hero--full::before {
content:''; position:absolute; inset:0; z-index:1; opacity:0; transition:opacity 1.6s linear;
background:
radial-gradient(38% 52% at 70% 30%, rgba(237,234,227,.14), transparent 70%),
radial-gradient(24% 34% at 30% 74%, rgba(237,234,227,.08), transparent 70%),
radial-gradient(16% 24% at 85% 66%, rgba(237,234,227,.07), transparent 70%);
}
.hero--full.live::before { opacity:.3; }
.hero--full::after {
content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
background:linear-gradient(to top, rgba(10,9,8,.78) 0%, rgba(10,9,8,.1) 30%, rgba(10,9,8,.08) 62%, rgba(10,9,8,.45) 100%);
}
.hero--full > * { position:relative; z-index:2; }
/* above the panel's shade, under the words: the ink is the letters' own color */
.hero--full .ink-canvas { z-index:2; }
.hero--full .hero-meta { margin-bottom:0; }
.hero--full .hero-name { margin:0 0 0 -.02em; }
.hero--full .fig { position:absolute; right:clamp(18px,2.6vw,34px); top:clamp(88px,13vh,150px); z-index:2; }
.hero--full .hp-foot { display:flex; align-items:flex-end; justify-content:space-between; gap:26px; }
.hero-meta { display:flex; justify-content:space-between; gap:16px; margin-bottom:clamp(24px,3vw,44px); flex-wrap:wrap; }
.hero-meta a { padding:12px 0; margin:-12px 0; }
.hero-meta a:hover { color:var(--bone); }
/* the whole name is ONE pressed line — AJ HARRIS edge-to-edge, one size, so
the lockup can't sit unbalanced. ink.js fits it to the measure exactly;
the clamp is the no-JS fallback. */
.hero-name {
position:relative; z-index:2;
font-family:var(--serif); font-weight:700; letter-spacing:-.015em; line-height:.86;
font-size:clamp(46px,15.4vw,230px); text-transform:uppercase;
margin:0 0 -.08em -.02em;
}
.hero-name .line { display:block; }
.hero-name .sp { display:inline-block; width:.26em; }
.hero-name .lm { display:inline-block; }
/* the ink (ink.js): a drop on the pointer, drawn on the GPU in the letters'
own color, under the name. Fine pointers only. */
.ink-canvas {
position:absolute; inset:0; width:100%; height:100%;
pointer-events:none; opacity:0; transition:opacity 1.6s linear;
}
.hero--full.live .ink-canvas { opacity:1; }
@media (pointer: coarse) { .ink-canvas { display:none; } }
.fig { color:rgba(237,234,227,.78); }
.hero-line {
font-family:var(--serif); font-weight:400;
font-size:clamp(var(--t2),2.6vw,var(--t3)); line-height:1.18; max-width:24ch;
text-wrap:balance;
text-shadow:0 1px 4px rgba(10,9,8,.7), 0 2px 22px rgba(10,9,8,.85);
}
.hero-line em { font-style:italic; }
.hero-facts { display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-end; }
.chip {
display:inline-flex; align-items:center; gap:8px; white-space:nowrap;
font-family:var(--font-mono); font-size:var(--t-2); letter-spacing:.12em; text-transform:uppercase;
color:var(--bone); padding:9px 15px; border-radius:999px;
border:1px solid rgba(237,234,227,.22); background:rgba(8,8,10,.5);
backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}
.btn {
display:inline-flex; align-items:center; gap:10px; white-space:nowrap;
background:var(--bone); color:var(--void); font-weight:700; font-size:var(--t-1);
padding:14px 22px; border-radius:999px;
transition:color .45s cubic-bezier(.16,1,.3,1);
}
.btn .go-arr { display:inline-block; transition:transform .4s var(--ease); }
/* ---------- work cards ---------- */
.grid {
display:grid; grid-template-columns:repeat(2, minmax(0,1fr));
gap:clamp(16px,2vw,26px); padding-bottom:30px; align-items:start;
}
.card {
--mx:50%; --my:50%;
position:relative; display:block; border-radius:var(--r-lg); overflow:hidden; overflow:clip;
background:var(--panel); border:1px solid var(--line-2);
transition:transform .55s var(--ease), border-color .4s linear;
}
.card--wide { grid-column:1 / -1; }
.card:hover, .card:focus-visible { transform:translateY(-8px); border-color:var(--line); }
/* the corner arrow is a blot that blooms — same mark the spine leaves at a chapter */
.card .go {
position:absolute; top:16px; right:16px; z-index:2;
width:46px; height:46px; display:grid; place-items:center;
background:var(--bone);
border-radius:52% 48% 45% 55% / 50% 57% 43% 50%;
opacity:0; transform:scale(.2) rotate(-14deg);
transition:opacity .3s linear, transform .55s var(--ease);
filter:url(#ink-lg);
}
.card:hover .go, .card:focus-visible .go { opacity:1; transform:scale(1) rotate(0deg); }
.card .go svg { width:16px; height:16px; stroke:var(--void); }
/* clip, not hidden: hidden makes the card a scroll container, and the mockup drift
(card-drift) would then follow a box that never scrolls instead of the page */
.card-media { position:relative; aspect-ratio:4/2.9; overflow:hidden; overflow:clip; background:var(--panel-2); }
.card--wide .card-media { aspect-ratio:21/8; }
.card-media::after { content:''; position:absolute; inset:0; z-index:1; pointer-events:none; background:var(--grain) 0 0 / 220px 220px, radial-gradient(80% 60% at 50% 110%, rgba(0,0,0,.45), transparent 70%); opacity:.28; mix-blend-mode:screen; }
.card-media .ph { z-index:2; }
.card-media > img {
position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
filter:saturate(.82); transform:scale(1.05);
transition:transform 1.4s var(--ease);
}
.card:hover .card-media > img { transform:scale(1.11); }
.device {
position:absolute; left:13%; right:13%; bottom:-2px; height:66%;
background:rgba(10,10,13,.92); border:1px solid rgba(237,234,227,.16); border-bottom:0;
border-radius:14px 14px 0 0; box-shadow:0 30px 70px rgba(0,0,0,.55);
transition:transform .9s var(--ease);
}
.card--wide .device { left:8%; right:8%; height:80%; }
.card:hover .device { transform:translateY(-10px); }
.device .bar { height:24px; display:flex; align-items:center; gap:5px; padding:0 11px; border-bottom:1px solid rgba(237,234,227,.08); }
.device .bar i { width:6px; height:6px; border-radius:50%; background:rgba(237,234,227,.2); }
.device .screen { padding:13px; display:flex; flex-direction:column; gap:9px; }
.device .screen b { height:8px; border-radius:4px; background:rgba(237,234,227,.12); width:72%; }
.device .screen b:nth-child(2) { width:46%; opacity:.7; }
.device .screen b:nth-child(3) { width:60%; opacity:.45; }
.device .screen .row { display:flex; gap:9px; }
.device .screen .row i { flex:1; height:36px; border-radius:7px; background:rgba(237,234,227,.06); border:1px solid rgba(237,234,227,.05); }
.device .screen .shot { width:100%; height:100%; object-fit:cover; object-position:top; filter:saturate(.72); }
.device:has(.shot) .screen, .device .screen:has(.shot) { padding:0; }
.device.phone { left:33%; right:33%; height:74%; border-radius:20px 20px 0 0; }
.card--wide .device.phone { left:38%; right:38%; height:82%; }
.device.phone .bar { justify-content:center; }
.device.phone .bar i { width:30px; height:4px; border-radius:2px; }
/* richer skeleton product UI inside the devices (until real screens land) */
.device { overflow:hidden; }
.screen.ui { flex-direction:row; gap:11px; height:calc(100% - 24px); }
.s-side { width:21%; display:flex; flex-direction:column; gap:8px; padding-top:3px; }
.s-side i { height:7px; border-radius:4px; background:rgba(237,234,227,.08); width:86%; }
.s-side i.on { background:rgba(237,234,227,.24); }
.s-main { flex:1; min-width:0; display:flex; flex-direction:column; gap:10px; }
.s-t { height:9px; width:38%; border-radius:4px; background:rgba(237,234,227,.17); }
.s-stats { display:flex; gap:8px; }
.s-stats i { flex:1; height:26px; border-radius:6px; background:rgba(237,234,227,.06); border:1px solid rgba(237,234,227,.07); }
.screen.pui { flex-direction:column; gap:9px; height:calc(100% - 24px); }
.screen.pui .s-t { width:52%; }
.screen.pui .s-stats i { height:30px; }
.s-list { flex:1; display:flex; flex-direction:column; gap:7px; min-height:0; }
.s-list i { height:22px; flex:none; border-radius:6px; background:rgba(237,234,227,.06); border:1px solid rgba(237,234,227,.05); }
.s-tab { display:flex; gap:6px; margin-top:auto; }
.s-tab i { flex:1; height:5px; border-radius:3px; background:rgba(237,234,227,.08); }
.s-tab i.on { background:rgba(237,234,227,.26); }
.card-body { padding:clamp(18px,2vw,28px); }
.card--wide .card-body { display:grid; grid-template-columns:1fr auto; gap:24px; align-items:end; }
.card--wide .card-body .outcomes { justify-content:flex-end; }
/* card credits: one mono line, like the credits on a record sleeve, no pills */
.tags { display:flex; flex-wrap:wrap; gap:4px 0; margin-bottom:16px; }
.tag {
font-family:var(--font-mono); font-size:var(--t-2); letter-spacing:.12em; text-transform:uppercase;
color:var(--dim); white-space:nowrap;
}
.tag:not(:last-child)::after { content:'·'; margin:0 .8em; color:var(--faint-text); }
.tag.shipped { color:var(--mint); }
.card-body h3 { font-weight:700; font-size:var(--t1); letter-spacing:-.015em; margin-bottom:8px; text-wrap:balance; }
.card--wide .card-body h3 { font-size:clamp(var(--t2),2.6vw,var(--t3)); }
.card-body p { color:var(--dim); font-size:var(--t0); line-height:1.5; max-width:52ch; margin-bottom:18px; text-wrap:pretty; }
.card--wide .card-body p { max-width:60ch; margin-bottom:0; }
.outcomes { display:flex; flex-wrap:wrap; align-items:center; gap:7px; }
.outcome {
font-family:var(--font-mono); font-size:var(--t-2); letter-spacing:.12em;
color:var(--bone); background:var(--panel-2); border:1px solid var(--line);
border-radius:999px; padding:6px 12px;
}
.outcome.year { color:var(--faint-text); background:transparent; border:0; padding:0; text-transform:uppercase; }
/* ---------- how i work ---------- */
.approach { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:clamp(14px,1.6vw,22px); }
.acard {
--mx:50%; --my:50%;
position:relative; overflow:hidden; border-radius:var(--r);
background:var(--panel); border:1px solid var(--line-2);
padding:clamp(22px,2vw,30px); padding-top:clamp(64px,5.4vw,84px); min-height:270px;
transition:border-color .4s linear, background .4s linear; will-change:transform;
}
.acard:hover { border-color:var(--line); background:var(--panel-2); }
.acard::after {
content:''; position:absolute; inset:0; pointer-events:none;
background:radial-gradient(420px circle at var(--mx) var(--my), rgba(237,234,227,.06), transparent 45%);
opacity:0; transition:opacity .45s linear;
}
.acard:hover::after { opacity:1; }
.acard .idx {
position:absolute; top:-30px; right:2px;
font-family:var(--serif); font-style:italic; font-size:clamp(96px,9vw,140px); line-height:1;
color:rgba(237,234,227,.055); transition:color .6s linear, transform .8s var(--ease);
}
.acard:hover .idx { color:rgba(237,234,227,.12); transform:translateY(-6px); }
.acard h3 { font-family:var(--font-body); font-weight:500; font-size:var(--t1); letter-spacing:-.01em; margin-bottom:10px; }
.acard p { color:var(--dim); font-size:var(--t0); line-height:1.5; text-wrap:pretty; }
.acard .rcpt { display:block; margin-top:14px; font-size:var(--t-2); color:var(--faint-text); letter-spacing:.12em; }
/* ---------- about ---------- */
.about-lede {
font-family:var(--serif); font-weight:400;
font-size:clamp(var(--t2),3vw,var(--t4)); line-height:1.22; letter-spacing:-.005em;
max-width:30ch; margin-bottom:clamp(30px,4vw,52px); text-wrap:balance;
}
.about-lede em { font-style:italic; }
/* the words light as the paragraph enters the reading zone. Unlit words are a
readable gray, not a ghost: the copy passes contrast before it lights. */
.about-lede em { filter:url(#ink-lg); } /* story.js soaks it in from wet the first time it's seen */
.about-body { max-width:60ch; margin-left:clamp(0px,24vw,340px); }
.about-body p { color:var(--dim); font-size:var(--t0); margin-bottom:18px; text-wrap:pretty; }
.about-body b { color:var(--bone); font-weight:600; }
.about-row { display:grid; grid-template-columns:clamp(0px,24vw,340px) minmax(0,60ch) clamp(32px,4.5vw,64px) clamp(150px,17vw,240px); align-items:start; }
.about-row .about-body { margin-left:0; grid-column:2; grid-row:1; }
.about-row .about-photo { grid-column:4; grid-row:1; }
.about-photo { position:relative; margin:6px 0 0; width:100%; aspect-ratio:2/3; border-radius:14px; background:var(--panel); }
.about-photo img { border-radius:14px; width:100%; height:100%; object-fit:cover; object-position:50% 22%; display:block; filter:saturate(.8) contrast(1.02); transition:filter .5s ease; }
.about-photo:hover img { filter:none; }
@media (max-width:1100px) { .about-row { grid-template-columns:clamp(0px,12vw,180px) minmax(0,1fr) 36px 170px; } }
@media (max-width:860px) { .about-row { grid-template-columns:1fr; } .about-row .about-body, .about-row .about-photo { grid-column:1; grid-row:auto; } .about-row .about-photo { width:200px; margin:0 0 24px; } }
/* experience index */
.xp { border-top:1px solid var(--line); margin-top:clamp(36px,5vw,60px); }
.xp-item {
display:grid; grid-template-columns:110px 1fr auto; align-items:baseline; gap:20px;
border-bottom:1px solid var(--line); padding:22px 8px;
}
.xp-item .co { color:var(--bone); font-weight:600; font-size:var(--t0); }
.xp-item .role { color:var(--dim); font-size:var(--t-1); text-align:right; }
/* ---------- contact strip ---------- */
.strip {
position:relative; border-radius:var(--r-lg); overflow:hidden;
padding:clamp(46px,6.5vw,100px) clamp(24px,4.5vw,72px);
border:1px solid var(--line-2);
}
.strip .bg { position:absolute; inset:0; }
.strip .bg img { position:absolute; inset:0; width:100%; height:112%; object-fit:cover; opacity:.6; filter:saturate(.75); will-change:transform; }
.strip .bg::after { content:''; position:absolute; inset:0; background:linear-gradient(115deg, rgba(8,8,10,.82) 25%, rgba(8,8,10,.3) 100%); }
.strip > *:not(.bg) { position:relative; z-index:1; }
.strip .fig { position:absolute; top:20px; right:24px; z-index:2; }
.strip h2 { font-family:var(--serif); font-weight:400; font-size:clamp(var(--t2),3vw,var(--t4)); line-height:1.18; margin-bottom:clamp(22px,3vw,38px); max-width:30ch; text-wrap:balance; }
.strip h2 em { font-style:italic; }
.strip .em {
display:inline-block; font-weight:900; letter-spacing:-.035em; line-height:1.1;
font-size:clamp(19px,7vw,96px); white-space:nowrap;
border-bottom:3px solid rgba(237,234,227,.25);
transition:border-color .3s linear;
}
/* hover speaks ink (drawn stroke + blot below) — the printed rule stays put */
.strip .sub { margin-top:26px; color:var(--dim); font-size:var(--t0); line-height:1.5; }
.strip .sub a { border-bottom:1px solid var(--line); transition:color .3s linear; }
.strip .sub a:hover { color:var(--bone); }
footer {
display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
border-top:1px solid var(--line-2); padding:26px 0 34px;
}
footer b { color:var(--bone); font-weight:600; }
footer .clock { color:var(--faint-text); font-variant-numeric:tabular-nums; }
footer .f-links a { border-bottom:1px solid var(--line); transition:color .3s linear; }
footer .f-links a:hover { color:var(--bone); }
/* ---------- case study ---------- */
.cs-head { max-width:1100px; margin-bottom:clamp(36px,5vw,64px); }
.cs-kicker { display:flex; gap:4px 0; align-items:center; margin-bottom:22px; flex-wrap:wrap; }
.cs-title {
font-family:var(--serif); font-weight:400;
font-size:clamp(40px,6.2vw,92px); line-height:1.04; letter-spacing:-.01em;
text-wrap:balance;
}
.cs-title em { font-style:italic; }
.cs-head .outcomes { margin-top:26px; }
.cover { position:relative; border-radius:var(--r-lg); overflow:hidden; height:clamp(300px,54vh,560px); margin-bottom:clamp(40px,5vw,70px); }
.cover img { position:absolute; inset:0; width:100%; height:118%; object-fit:cover; filter:saturate(.8); will-change:transform; }
.cover::after { content:''; position:absolute; inset:0; background:linear-gradient(to top, rgba(8,8,10,.55), transparent 55%); }
.cover .fig { position:absolute; top:20px; right:24px; z-index:2; }
/* letterpress specimen plates — custom case covers, no stock imagery.
Dark paper built from gradients; the stat is printed in bone ink with a
double-strike ghost, corners carry rust registration marks. */
.plate {
position:relative; border-radius:var(--r-lg); overflow:hidden;
height:clamp(300px,54vh,560px); margin-bottom:clamp(40px,5vw,70px);
background:
radial-gradient(120% 90% at 18% -4%, rgba(237,234,227,.07), transparent 55%),
radial-gradient(90% 80% at 86% 112%, rgba(236,34,34,.05), transparent 60%),
linear-gradient(165deg, #15130f 0%, #100f0c 48%, #0a0908 100%);
border:1px solid var(--line);
box-shadow:inset 0 1px 0 rgba(237,234,227,.09), inset 0 -60px 120px rgba(0,0,0,.42);
}
.plate::before {
content:''; position:absolute; inset:0; opacity:.8; pointer-events:none;
background:
repeating-linear-gradient(0deg, rgba(237,234,227,.018) 0 1px, transparent 1px 4px),
repeating-linear-gradient(90deg, rgba(237,234,227,.012) 0 1px, transparent 1px 6px);
}
.plate .p-c { position:absolute; inset:16px; pointer-events:none; z-index:1; }
.plate .p-c i { position:absolute; width:14px; height:14px; border:0 solid rgba(236,34,34,.65); }
.plate .p-c i:nth-child(1) { top:0; left:0; border-top-width:1px; border-left-width:1px; }
.plate .p-c i:nth-child(2) { top:0; right:0; border-top-width:1px; border-right-width:1px; }
.plate .p-c i:nth-child(3) { bottom:0; left:0; border-bottom-width:1px; border-left-width:1px; }
.plate .p-c i:nth-child(4) { bottom:0; right:0; border-bottom-width:1px; border-right-width:1px; }
.plate .fig { position:absolute; top:20px; right:24px; z-index:2; }
.plate .p-meta { position:absolute; top:20px; left:24px; z-index:2; color:var(--dim); }
.plate .p-stat {
position:absolute; left:clamp(18px,3vw,44px); bottom:clamp(0px,1vw,10px); z-index:1;
font-family:var(--serif); font-weight:700; letter-spacing:-.02em; line-height:.95;
font-size:clamp(110px,21vw,320px); white-space:nowrap;
color:rgba(237,234,227,.9);
text-shadow:.05em .035em 0 rgba(237,234,227,.13); /* double-strike ghost */
}
.plate .p-stat em { font-family:var(--serif); font-style:italic; font-weight:400; letter-spacing:0; font-size:.9em; }
.plate .p-sub {
position:absolute; right:24px; bottom:24px; z-index:2; max-width:34ch; text-align:right;
color:var(--faint-text); line-height:1.7;
}
@media (max-width:700px) {
.plate .p-sub { left:24px; right:24px; text-align:left; max-width:none; bottom:18px; }
.plate .p-stat { bottom:clamp(44px,15vw,80px); }
}
.meta {
display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:18px;
border-top:1px solid var(--line); border-bottom:1px solid var(--line);
padding:26px 0; margin-bottom:clamp(56px,7vw,100px);
}
.meta div span { display:block; }
.meta .k { margin-bottom:8px; }
.meta .v { font-size:var(--t0); color:var(--bone); }
.cs-sec { display:grid; grid-template-columns:200px 1fr; gap:clamp(24px,4vw,64px); margin-bottom:clamp(60px,7vw,100px); }
.cs-sec .lab { position:sticky; top:110px; align-self:start; }
.cs-sec h2 { font-family:var(--serif); font-weight:400; font-size:clamp(var(--t2),2.6vw,var(--t3)); margin-bottom:16px; text-wrap:balance; }
.cs-sec p { color:var(--dim); font-size:var(--t0); max-width:64ch; margin-bottom:16px; text-wrap:pretty; }
.cs-sec b { color:var(--bone); font-weight:600; }
.cs-fig { position:relative; border-radius:var(--r); overflow:hidden; margin:26px 0 8px; background:var(--panel); aspect-ratio:7/5; }
.cs-fig img { width:100%; height:100%; object-fit:cover; filter:saturate(.8); }
.cs-fig figcaption { position:absolute; top:14px; right:16px; color:rgba(237,234,227,.78); z-index:2; text-align:right; }
.cs-fig::after { content:''; position:absolute; inset:0; background:linear-gradient(to bottom, rgba(8,8,10,.45), transparent 40%); }
.pull {
font-family:var(--serif); font-style:italic; font-weight:400;
font-size:clamp(var(--t2),3vw,var(--t4)); line-height:1.22; max-width:28ch;
border-left:2px solid rgba(237,234,227,.25); padding-left:clamp(18px,2.5vw,36px);
margin:clamp(40px,5vw,70px) 0; text-wrap:balance;
}
.next {
display:flex; align-items:center; justify-content:space-between; gap:20px;
border-top:1px solid var(--line); padding-top:34px;
}
.next a { font-family:var(--serif); font-weight:700; letter-spacing:-.01em; font-size:clamp(var(--t2),3.4vw,var(--t5)); display:inline-flex; align-items:baseline; flex-wrap:wrap; gap:18px; }
.next a em { font-style:italic; font-weight:400; letter-spacing:0; font-size:1.02em; }
.next a .go-arr { display:inline-block; transition:transform .4s var(--ease); }
.next a:hover .go-arr, .next a:focus-visible .go-arr { transform:translateX(12px); }
/* ---------- contact page ---------- */
.c-h1 {
font-family:var(--serif); font-weight:400;
font-size:clamp(38px,5.6vw,84px); line-height:1.08; max-width:20ch;
margin-bottom:clamp(44px,6vw,80px); text-wrap:balance;
}
.c-h1 em { font-style:italic; }
.c-list { border-top:1px solid var(--line); margin-bottom:clamp(60px,8vw,110px); }
.c-item {
display:grid; grid-template-columns:200px 1fr auto; align-items:center; gap:20px;
border-bottom:1px solid var(--line); padding:clamp(22px,3vw,36px) 8px;
transition:background .35s linear;
}
.c-item > * { transition:transform .5s var(--ease); }
.c-item:hover, .c-item:focus-visible { background:rgba(237,234,227,.03); }
.c-item:hover > *, .c-item:focus-visible > * { transform:translateX(14px); }
.c-item .v { font-weight:700; font-size:clamp(var(--t1),2.4vw,var(--t3)); letter-spacing:-.015em; position:relative; }
.c-item .arr { opacity:0; transform:translateX(-8px); transition:opacity .35s linear, transform .5s var(--ease); }
.c-item:hover .arr, .c-item:focus-visible .arr { opacity:1; transform:translateX(6px); }
.c-item .arr svg { width:22px; height:22px; stroke:var(--bone); }
/* ---------- drawn glyphs ----------
The site writes its arrows rather than importing them. Erode has no arrow
glyphs, so a typed → or ↗ silently fell back to another font: a thin wiry
hairline next to heavy serif text, in a vocabulary nothing else on the page
shared. These are the same hand as .hand-path (1.7 round stroke through
#ink-line) with no draw-on dash, because they sit inline in link text and
have to be there on first paint. Sized in em so they track the type. */
.gl { width:1em; height:1em; vertical-align:-.13em; flex:none; overflow:visible; }
/* #ink-line is tuned for long drawn strokes; on a 1em glyph its displacement is
proportionally huge and the arrow frays into pieces. #ink-glyph is the same
hand at a quarter of the push, and the stroke runs a little heavier so it
holds up next to the serif at text size. */
.gl path { fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; filter:url(#ink-glyph); }
.sc-arrow .gl path { stroke-width:1.5; }
a .gl, .sc-lbl a .gl, .sc-open .gl { margin-left:.34em; }
.sc-arrow .gl { width:1.4em; height:1.4em; margin:0; }
.c-item .arr .gl { width:22px; height:22px; }
.card .go .gl { width:16px; height:16px; }
.card .go .gl path { stroke:var(--void); }
/* ---------- pressed-paper surface — shared by card media, strips, figure plates ---------- */
:root { --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.press {
background:
radial-gradient(130% 110% at 50% 50%, transparent 52%, rgba(0,0,0,.42) 100%),
radial-gradient(60% 45% at 78% 18%, rgba(236,34,34,.11), transparent 70%),
radial-gradient(110% 70% at 8% 96%, rgba(237,234,227,.075), transparent 62%),
radial-gradient(38% 30% at 30% 40%, rgba(237,234,227,.035), transparent 70%),
linear-gradient(165deg, #16140f 0%, #100f0c 48%, #0a0908 100%);
isolation:isolate;
}
/* pressed paper: grain at two scales, the laid lines of the sheet, and a darker rim */
.press::before, .cs-fig.show::before {
content:''; position:absolute; inset:0; pointer-events:none; z-index:0;
background:
var(--grain) 0 0 / 220px 220px,
var(--grain) 60px 40px / 440px 440px,
repeating-linear-gradient(0deg, rgba(237,234,227,.03) 0 1px, transparent 1px 5px),
repeating-linear-gradient(90deg, rgba(237,234,227,.014) 0 1px, transparent 1px 7px);
opacity:.15; mix-blend-mode:screen;
}
.press > *, .cs-fig.show > * { position:relative; }
/* figure plates — printed slots where real screens will land */
.cs-fig.fplate { aspect-ratio:7/3; display:grid; place-items:center; border:1px solid var(--line); }
.cs-fig.fplate::after { content:none; }
.fp-num {
font-family:var(--serif); font-style:italic; font-size:clamp(56px,7vw,110px); line-height:1;
color:rgba(237,234,227,.82);
text-shadow:.05em .035em 0 rgba(237,234,227,.12);
}
/* ---------- the phone ----------
One device body for every screen on the site — the live prototype, the
captured states, the showcase, the work-card frames. Sized in percent and
container units so it scales from a card thumbnail to the 390px live frame.
The frame draws its own status strip (time + glyphs) under a dynamic island;
--sb / --sbc tint the strip to whatever the screen's own header color is. */
.ph {
position:relative; aspect-ratio:390/844; border-radius:14% / 6.5%; container-type:inline-size;
background:#0c0b0a; --sb:#fff; --sbc:#1c1b1e;
box-shadow:0 24px 60px rgba(0,0,0,.55);
}
/* the frame is written, not machined: a bone ink line run through the bleed
filter, with the letterpress double-strike ghost beside it; the island is a
blot dropped on the strip, the buttons are dabs off the edge */
.ph .rim {
position:absolute; inset:-1px; border-radius:inherit; pointer-events:none; z-index:4;
border:clamp(1.5px, .75cqw, 3px) solid var(--bone); opacity:.94;
filter:url(#ink-frame);
}
.ph .rim::after {
content:''; position:absolute; inset:-4px; border-radius:inherit;
border:1px solid rgba(237,234,227,.28); transform:translate(1.2cqw, 1cqw);
}
.ph::before, .ph::after { content:''; position:absolute; background:var(--bone); opacity:.9; filter:url(#ink-frame); }
.ph::before { left:-2.4%; top:19%; width:2.4%; height:15%; border-radius:3px 0 0 3px;
background:linear-gradient(var(--bone) 0 43%, transparent 43% 57%, var(--bone) 57%); } /* volume */
.ph::after { right:-2.4%; top:24%; width:2.4%; height:9.5%; border-radius:0 3px 3px 0; } /* power */
.ph .scr { position:absolute; inset:1.5% 3.2%; border-radius:11.4% / 5.3%; overflow:hidden; background:#fff; }
.ph .isl { position:absolute; top:1.3%; left:50%; width:32%; height:4.3%; transform:translateX(-50%);
background:#000; border-radius:999px; z-index:3; box-shadow:inset 0 0 0 1px rgba(255,255,255,.05); } /* the island stays an island */
.ph .sb {
position:absolute; top:0; left:0; right:0; height:5.4%; z-index:2;
display:flex; align-items:center; justify-content:space-between; padding:0 7.5%;
background:var(--sb); color:var(--sbc);
font-family:var(--font-body); font-weight:700; font-size:3.7cqw; letter-spacing:-.01em;
}
.ph .sb svg { width:17cqw; height:auto; display:block; }
.ph .cap { position:absolute; top:5.4%; left:0; right:0; bottom:0; width:100%; height:94.6%; border:0; display:block; background:#fff; }
.ph img.cap, .ph video.cap { object-fit:cover; object-position:top; filter:saturate(.92); }
.ph .lab-in { position:absolute; left:0; right:0; bottom:0; z-index:2; padding:6% 7% 7%;
background:linear-gradient(to top, rgba(12,11,10,.85), transparent); color:var(--bone);
font-family:var(--font-mono); font-size:3cqw; letter-spacing:.12em; text-transform:uppercase; }
/* ---------- real screens ----------
The 48% study runs on its own material, re-set in the site's language:
research plates (.rp — the Fullstory evidence, the report, the annotated
original), a showcase and a state strip from the current prototype, and
the prototype itself, live in the phone. */
.cs-fig.rp, .cs-fig.show, .cs-fig.phones, .cs-fig.live, .cs-fig.ba, .cs-fig.dec {
aspect-ratio:auto; display:block; border:1px solid var(--line);
padding:clamp(48px,4.4vw,62px) clamp(16px,2.4vw,30px) clamp(16px,2.4vw,30px);
}
.cs-fig.rp::after, .cs-fig.show::after, .cs-fig.phones::after, .cs-fig.live::after, .cs-fig.ba::after, .cs-fig.dec::after { content:none; }
.cs-fig .p-c { position:absolute; inset:14px; pointer-events:none; z-index:1; }
.cs-fig .p-c i { position:absolute; width:12px; height:12px; border:0 solid rgba(236,34,34,.6); }
.cs-fig .p-c i:nth-child(1) { top:0; left:0; border-top-width:1px; border-left-width:1px; }
.cs-fig .p-c i:nth-child(2) { top:0; right:0; border-top-width:1px; border-right-width:1px; }
.cs-fig .p-c i:nth-child(3) { bottom:0; left:0; border-bottom-width:1px; border-left-width:1px; }
.cs-fig .p-c i:nth-child(4) { bottom:0; right:0; border-bottom-width:1px; border-right-width:1px; }
.cs-fig .rp-src { position:absolute; left:16px; top:14px; z-index:2; color:var(--faint-text); }
/* research plate innards */
.rp-head { display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:14px 28px; margin-bottom:clamp(18px,2.4vw,30px); }
.rp-title { font-family:var(--serif); font-weight:400; font-size:clamp(var(--t1),2vw,var(--t2)); line-height:1.15; max-width:26ch; text-wrap:balance; }
.rp-title em { font-style:italic; }
.rp-stats { display:flex; gap:clamp(18px,3vw,44px); }
.rp-stat { font-family:var(--serif); font-weight:700; font-size:clamp(38px,4.6vw,66px); line-height:.9; letter-spacing:-.02em; color:var(--bone); }
.rp-stat em { font-family:var(--serif); font-style:italic; font-weight:400; font-size:.7em; letter-spacing:0; }
.rp-stat small { display:block; margin-top:8px; font-family:var(--font-mono); font-size:var(--t-2); letter-spacing:.12em; text-transform:uppercase; color:var(--faint-text); }
.rp-row { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:clamp(10px,1.6vw,20px); }
.rp-row.six { grid-template-columns:repeat(6, minmax(0,1fr)); }
.rp-tile { min-width:0; }
.rp-tile img { width:100%; height:auto; aspect-ratio:5/6; object-fit:cover; object-position:top; display:block;
border-radius:10px; border:1px solid var(--line-2); filter:saturate(.7) contrast(1.02); }
.rp-row.scroll .rp-tile img { aspect-ratio:11/20; }
.rp-tile .k { display:block; margin-top:9px; font-family:var(--serif); font-size:var(--t0); line-height:1.15; color:var(--bone); }
.rp-tile .k b { font-weight:700; }
.rp-tile .n { display:block; margin-top:5px; font-family:var(--font-mono); font-size:var(--t-2); letter-spacing:.06em; line-height:1.5; color:var(--faint-text); }
.rp-sub { display:flex; align-items:baseline; gap:12px; margin:clamp(18px,2.4vw,30px) 0 12px; border-top:1px solid var(--line-2); padding-top:14px; }
.rp-sub .ch-n { font-family:var(--serif); font-style:italic; font-size:var(--t1); color:rgba(237,234,227,.7); }
/* the report — set as type, not screenshotted */
.rp-rep { display:grid; grid-template-columns:1.1fr 1fr; gap:clamp(20px,3vw,48px); }
.rp-rep .lead { font-family:var(--serif); font-weight:400; font-size:clamp(var(--t1),1.8vw,var(--t2)); line-height:1.3; text-wrap:pretty; }
.rp-rep .lead b { font-weight:700; }
.rp-rep .lead em { font-style:italic; }
.rp-rep ol { list-style:none; display:flex; flex-direction:column; gap:9px; }
.rp-rep li { position:relative; padding-left:26px; font-family:var(--serif); font-size:var(--t-1); line-height:1.45; color:var(--dim); }
.rp-rep li::before { content:''; position:absolute; left:6px; top:.55em; width:7px; height:7px; border-radius:50%; background:var(--rust); box-shadow:0 0 8px rgba(236,34,34,.6); }
.rp-rep li b { color:var(--bone); font-weight:600; }
/* the annotated original: the screen that was live, with the critique re-set beside it */
.rp-before { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr); gap:clamp(20px,3.4vw,56px); align-items:start; }
.rp-before .ph { width:min(300px, 100%); }
.mk { position:absolute; z-index:4; width:22px; height:22px; border-radius:50%; background:var(--rust); color:var(--bone);
display:grid; place-items:center; font-family:var(--font-mono); font-size:var(--t-2); font-weight:700;
box-shadow:0 0 0 3px rgba(12,11,10,.7), 0 0 14px rgba(236,34,34,.7); }
.crit { list-style:none; display:flex; flex-direction:column; gap:clamp(12px,1.6vw,20px); counter-reset:crit; }
.crit li { display:grid; grid-template-columns:22px 1fr; gap:12px; align-items:start; }
.crit .no { width:22px; height:22px; border-radius:50%; background:var(--rust); color:var(--bone);
display:grid; place-items:center; font-family:var(--font-mono); font-size:var(--t-2); font-weight:700; margin-top:2px; }
.crit b { display:block; font-family:var(--serif); font-weight:700; font-size:var(--t0); line-height:1.25; margin-bottom:3px; }
.crit p { font-family:var(--serif); font-size:var(--t-1); line-height:1.45; color:var(--dim); text-wrap:pretty; }
.crit li.also b { display:inline; font-size:inherit; margin:0; }
.crit li.also { display:block; grid-column:1 / -1; margin-top:8px; padding-top:14px; border-top:1px solid var(--line-2);
font-family:var(--serif); font-size:var(--t-1); line-height:1.5; color:var(--faint-text); }
.rp-before .also b { color:var(--dim); font-weight:600; }
/* the showcase — three states of the current prototype, staged on the paper */
.cs-fig.show { padding-bottom:0; isolation:isolate; background:
radial-gradient(70% 60% at 50% 100%, rgba(236,34,34,.12), transparent 70%),
radial-gradient(120% 90% at 18% -4%, rgba(237,234,227,.07), transparent 55%),
linear-gradient(165deg, #15130f 0%, #100f0c 48%, #0a0908 100%); }
.show-row { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); align-items:end; justify-items:center; max-width:1000px; margin:0 auto; padding:0 clamp(4px,3vw,40px); }
/* phones overflow their columns and overlap, so the plate stays tall at every width */
.show-row .ph { width:min(128%, 360px); max-width:none; margin-bottom:-12%; }
.show-row .ph:nth-child(2) { position:relative; z-index:2; }
.show-row .ph:nth-child(1) { transform:translateY(7%) rotate(-3deg); }
.show-row .ph:nth-child(3) { transform:translateY(7%) rotate(3deg); }
.show-row .ph:nth-child(2) { box-shadow:inset 0 0 0 1px rgba(237,234,227,.22), inset 0 0 0 4px #17150f, 0 40px 90px rgba(0,0,0,.65); }
.phw { display:flex; flex-direction:column; gap:10px; min-width:0; }
.phw .lab, .cs-fig .hint { font-family:var(--font-mono); font-size:var(--t-2); letter-spacing:.12em; text-transform:uppercase; color:var(--faint-text); }
.cs-fig.live { display:grid; place-items:center; gap:14px; }
.cs-fig.live .ph { width:min(390px, 100%); box-shadow:inset 0 0 0 1px rgba(237,234,227,.22), inset 0 0 0 4px #17150f, 0 40px 90px rgba(0,0,0,.6); }
.cs-fig .open { position:absolute; left:16px; top:14px; z-index:2; color:var(--dim); transition:color .3s linear; }
.cs-fig .open:hover, .cs-fig .open:focus-visible { color:var(--bone); }
@media (max-width:860px) {
.rp-row, .rp-row.six { grid-template-columns:repeat(3, minmax(0,1fr)); }
.rp-rep, .rp-before { grid-template-columns:1fr; }
}
@media (max-width:700px) {
.rp-row, .rp-row.six { grid-template-columns:repeat(2, minmax(0,1fr)); }
.rp-stats { flex-wrap:wrap; }
}
/* the work cards: real screens in the same phone; the 48% card carries two */
.device .screen:has(.shot) { height:calc(100% - 24px); }
.card-media .ph { position:absolute; transition:transform .9s var(--ease); }
.card--wide .card-media .ph.pl { left:26%; width:19%; bottom:-16%; }
.card--wide .card-media .ph.pr { left:56%; width:19%; bottom:-34%; }
.card:hover .card-media .ph { transform:translateY(-10px); }
.card:hover .card-media .ph.pr { transform:translateY(-20px); }
@media (max-width:860px) {
.card--wide .card-media .ph.pl { left:12%; width:36%; bottom:-30%; }
.card--wide .card-media .ph.pr { left:53%; width:36%; bottom:-48%; }
}
/* per-project micro-diagrams — each device screen shows that project's mechanism */
.s-steps { display:flex; gap:5px; }
.s-steps i { flex:1; height:5px; border-radius:3px; background:rgba(237,234,227,.07); }
.s-steps i.on { background:rgba(237,234,227,.3); }
.s-steps i.cur { background:rgba(237,234,227,.55); }
.u-status .s-list i { height:18px; }
.s-stats i.pay { background:rgba(237,234,227,.14); border-color:rgba(237,234,227,.3); }
.s-sw { display:grid; grid-template-columns:repeat(6,1fr); gap:6px; }
.s-sw i { aspect-ratio:1; border-radius:5px; background:rgba(237,234,227,var(--a,.08)); border:1px solid rgba(237,234,227,.06); }
.s-comp { flex:1; display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.s-comp i { border:1px solid rgba(237,234,227,.12); border-radius:7px; background:rgba(237,234,227,.04); min-height:22px; }
.s-comp i.b { border-radius:999px; background:rgba(237,234,227,.16); border:0; }
.s-comp i.g { position:relative; }
.s-comp i.g::after { content:''; position:absolute; right:5px; top:50%; transform:translateY(-50%); width:10px; height:10px; border-radius:50%; background:rgba(237,234,227,.28); }
.s-pill { display:flex; gap:5px; }
.s-pill i { flex:1; height:16px; border-radius:999px; background:rgba(237,234,227,.05); border:1px solid rgba(237,234,227,.08); }
.s-pill i.on { background:rgba(237,234,227,.24); border-color:transparent; }
.s-cards { flex:1; display:flex; gap:7px; min-height:0; overflow:hidden; }
.s-cards i { flex:0 0 44%; border-radius:9px; background:rgba(237,234,227,.06); border:1px solid rgba(237,234,227,.07); position:relative; }
.s-cards i::after { content:''; position:absolute; left:7px; bottom:6px; width:46%; height:5px; border-radius:3px; background:rgba(237,234,227,.3); }
.s-cmp { display:flex; gap:7px; }
.s-cmp i { flex:1; height:26px; border-radius:7px; background:rgba(237,234,227,.13); border:1px solid rgba(237,234,227,.18); }
.s-rows { flex:1; display:flex; flex-direction:column; gap:6px; min-height:0; }
.s-rows i { flex:none; height:13px; border-radius:4px; background:rgba(237,234,227,.05); border:1px solid rgba(237,234,227,.05); }
/* the Freshworks card isn't a link yet — don't promise a click it can't keep */
.card:not(a) { cursor:default; }
.card:not(a):hover { transform:none; border-color:var(--line-2); }
.card:not(a)::after { content:none; }
.card:not(a):hover .device { transform:none; }
.sr-only {
position:absolute; width:1px; height:1px; padding:0; margin:-1px;
overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
/* ---------- the ink bleed — display type only; UI text stays crisp ----------
Filters are defined inline in each page's