/* ===========================================================================
SHREYA SAXENA — DESIGN SYSTEM v2
Retro editorial catalogue × modern creative portfolio.
Phase 1: global foundation only. Loaded after style.css; everything here
overrides the previous scrapbook layer. Nothing page-specific lives here.
=========================================================================== */
:root{
/* ---- surface ---- */
--cream: #F7EEDC;
--cream-light: #FFF9EE;
/* ---- brand / action ---- */
--red: #D8473B;
--red-dark: #B83B32;
/* ---- supporting, used to signal category — never decoration ---- */
--pink: #F3A9B8;
--blue: #A9CFDF;
--yellow: #FFD66F;
/* ---- type ---- */
--ink: #713A32;
--ink-soft: #8B5A50;
/* ---- line ---- */
--line: rgba(184, 59, 50, 0.42);
--line-soft: rgba(184, 59, 50, 0.20);
/* ---- shape ---- */
--r-card: 18px;
--r-feature: 24px;
--r-pill: 999px;
--r-tight: 12px;
/* ---- elevation: paper on paper, never floating software ---- */
--shadow: 0 6px 24px rgba(100, 50, 40, 0.06);
--shadow-lift: 0 10px 32px rgba(100, 50, 40, 0.10);
/* ---- grid ---- */
--max: 1280px;
--pad: 48px;
--gutter: 32px;
/* ---- spacing scale (8px base) ---- */
--s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px;
--s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --s10: 128px;
/* ---- type families ---- */
--display: 'DM Serif Display', Georgia, 'Times New Roman', serif;
--ui: 'DM Sans', system-ui, -apple-system, sans-serif;
/* legacy names still referenced by style.css, remapped so nothing breaks */
--page: var(--cream);
--paper: var(--cream);
--accent: var(--red);
--muted: var(--ink-soft);
--rule: transparent;
--margin: transparent;
--kraft: var(--cream);
--rhy: 1.6;
}
/* ===========================================================================
1. CANVAS — warm cream paper. No rules, no margin line, no texture.
=========================================================================== */
html{ background:var(--cream); }
body{
font-family:var(--ui);
font-size:17px;
line-height:1.62;
font-weight:400;
color:var(--ink);
background-color:var(--cream);
background-image:none; /* kills the ruled sheet + red margin line */
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
text-rendering:optimizeLegibility;
}
::selection{ background:var(--pink); color:var(--ink); }
/* ===========================================================================
2. TYPOGRAPHY
Serif carries personality and voice. Sans carries information.
=========================================================================== */
/* --- display: the editorial voice --- */
.t-hero,
.t-title,
.t-section,
.t-project{
font-family:var(--display);
font-weight:400;
color:var(--ink);
letter-spacing:-0.015em;
text-wrap:balance;
margin:0;
}
.t-hero { font-size:clamp(48px, 7.2vw, 110px); line-height:0.98; letter-spacing:-0.028em; }
.t-title { font-size:clamp(42px, 5.2vw, 72px); line-height:1.04; letter-spacing:-0.022em; }
.t-section{ font-size:clamp(30px, 3.4vw, 48px); line-height:1.10; letter-spacing:-0.018em; }
.t-project{ font-size:clamp(30px, 4.0vw, 60px); line-height:1.06; letter-spacing:-0.020em; }
/* --- the old cut-out lettering becomes real type ---------------------------
Every cut-out word already carries its word in aria-label, so the heading
can be set in the display face with no markup change at all. Reversible in
one rule if the lettering ever comes back. ------------------------------- */
.hw{
font-family:var(--display);
font-weight:400;
color:var(--ink);
letter-spacing:-0.02em;
line-height:1.05;
display:inline;
text-transform:none;
}
.hw > .wd, .hw > .sp, .hw > .glx, .hw > .gl{ display:none !important; }
.hw::after{ content:attr(aria-label); }
.hw.xl { font-size:clamp(48px, 7.2vw, 110px); line-height:0.98; letter-spacing:-0.028em; }
.hw.sec { font-size:clamp(30px, 3.4vw, 48px); line-height:1.10; }
.hw.sm { font-size:inherit; }
.hw.statnum{ font-size:clamp(34px, 3.6vw, 46px); letter-spacing:-0.02em; }
.ptitle .hw, .csname .hw{ font-size:clamp(34px, 4.4vw, 60px); line-height:1.06; }
.hrow{ display:flex; align-items:baseline; gap:var(--s3); flex-wrap:wrap; }
/* --- headings that were already real type --- */
h1, h2, h3, .mhead, .shead h2, .plead, .pcase-t, .pull, .acc-t, .psub, .hero-role{
font-family:var(--display);
font-weight:400;
color:var(--ink);
letter-spacing:-0.018em;
}
h1{ font-size:clamp(42px,5.2vw,72px); line-height:1.04; }
h2, .shead h2, .mhead{ font-size:clamp(30px,3.4vw,48px); line-height:1.10; }
h3, .psub{ font-size:clamp(22px,2.2vw,28px); line-height:1.20; }
/* --- body --- */
p, li, dd, .prose p, .gist dd, .lede{
font-family:var(--ui);
color:var(--ink);
}
p{ font-size:17px; line-height:1.62; }
.lede{ font-size:clamp(18px,1.6vw,20px); line-height:1.58; color:var(--ink-soft); }
.t-body-sm, .crow, .rel, small{ font-size:14.5px; line-height:1.58; }
/* --- metadata: the catalogue register --- */
.t-meta, .alabel, .bg-meta, .hn-meta, .num-l, .uw-m, .uw-n, .credit,
.fig figcaption, .ai-label, .hg-cap, .stat-src, .pn-l, .sh-n{
font-family:var(--ui);
font-size:11.5px;
font-weight:500;
line-height:1.5;
letter-spacing:0.09em;
text-transform:uppercase;
color:var(--ink-soft);
}
.fig figcaption, .ai-label, .hg-cap{ letter-spacing:0.05em; text-transform:none; font-size:12px; }
/* --- the standfirst / lead paragraph --- */
.plead, .flag-lead, .hf-lead, .hn-lead{
font-family:var(--display);
font-weight:400;
font-size:clamp(20px,2.1vw,26px);
line-height:1.34;
letter-spacing:-0.015em;
color:var(--ink);
}
/* --- pull lines keep their job, in the display face --- */
.pull{
font-family:var(--display);
font-size:clamp(24px,2.8vw,34px);
line-height:1.22;
color:var(--red-dark);
border-left:2px solid var(--red);
padding-left:var(--s5);
}
.pull.sm{ font-size:clamp(20px,2.2vw,26px); }
/* ===========================================================================
3. GRID — 12 / 8 / 4 columns, editorial rather than uniform
=========================================================================== */
.wrap{
width:100%;
max-width:var(--max);
margin-inline:auto;
padding-inline:var(--pad);
}
@media (min-width:901px){
.wrap{ margin-left:auto; margin-right:auto; padding-inline:var(--pad); }
}
.grid{
display:grid;
grid-template-columns:repeat(12, minmax(0,1fr));
gap:var(--gutter);
}
@media (max-width:1024px){
:root{ --pad:32px; --gutter:24px; }
.grid{ grid-template-columns:repeat(8, minmax(0,1fr)); }
}
@media (max-width:640px){
:root{ --pad:16px; --gutter:16px; }
.grid{ grid-template-columns:repeat(4, minmax(0,1fr)); }
}
/* ===========================================================================
4. SURFACES — paper sitting on paper
=========================================================================== */
.surface,
.card{
background:var(--cream-light);
border:1px solid var(--line);
border-radius:var(--r-card);
box-shadow:var(--shadow);
}
.surface-flat{ background:var(--cream-light); border:1px solid var(--line); border-radius:var(--r-card); }
/* ===========================================================================
5. NAVIGATION — a small catalogue object, not a navbar
=========================================================================== */
nav{ position:sticky; top:0; z-index:60; background:transparent; }
.navpaper{
background:transparent;
border:0;
box-shadow:none;
background-image:none;
padding:var(--s4) var(--pad) var(--s3);
}
.nv{
display:flex;
align-items:center;
gap:var(--s5);
width:100%;
max-width:var(--max);
margin-inline:auto;
padding:10px 10px 10px 18px;
background:var(--cream-light);
border:1px solid var(--line);
border-radius:var(--r-pill);
box-shadow:var(--shadow);
}
.nvbrand{ display:inline-flex; align-items:center; text-decoration:none; }
.nvbrand .nvs{
width:36px; height:36px;
display:inline-flex; align-items:center; justify-content:center;
font-family:var(--display); font-size:20px; line-height:1;
color:var(--cream-light); background:var(--red);
border:0; border-radius:var(--r-pill);
transition:background .18s ease, transform .18s ease;
}
.nvbrand:hover .nvs{ background:var(--red-dark); transform:none; }
.lks{ display:flex; align-items:center; gap:var(--s1); margin-left:auto; }
.lks a{
font-family:var(--ui);
font-size:12px; font-weight:500;
letter-spacing:0.10em; text-transform:uppercase;
color:var(--ink-soft);
text-decoration:none;
padding:10px 16px;
min-height:44px; display:inline-flex; align-items:center;
border:0; border-radius:var(--r-pill);
transition:background .16s ease, color .16s ease;
}
.lks a:hover{ background:rgba(216,71,59,.08); color:var(--red-dark); border:0; }
.lks a[aria-current="page"]{ background:var(--red); color:var(--cream-light); border:0; }
nav .icons{ display:flex; gap:var(--s1); margin-left:0; }
nav .icons a{
width:38px; height:38px;
border:1px solid var(--line); border-radius:var(--r-pill);
background:transparent; color:var(--ink-soft);
transition:background .16s ease, color .16s ease, border-color .16s ease;
}
nav .icons a:hover{ background:var(--red); border-color:var(--red); color:var(--cream-light); transform:none; }
nav .icons svg{ width:15px; height:15px; stroke-width:1.7; }
@media (max-width:860px){
nav .icons{ display:none; }
.nv{ gap:var(--s3); padding-left:14px; }
.lks a{ padding:10px 11px; font-size:11px; letter-spacing:0.07em; }
}
/* ===========================================================================
6. BUTTONS
=========================================================================== */
.btn, .btn-primary{
display:inline-flex; align-items:center; gap:10px;
font-family:var(--ui); font-size:13px; font-weight:600;
letter-spacing:0.08em; text-transform:uppercase;
color:var(--cream-light); background:var(--red);
border:1px solid var(--red);
border-radius:var(--r-pill);
padding:14px 26px; min-height:44px;
box-shadow:none; transform:none;
text-decoration:none; cursor:pointer;
transition:background .16s ease, border-color .16s ease, transform .16s ease;
}
.btn:hover, .btn-primary:hover{ background:var(--red-dark); border-color:var(--red-dark); transform:none; }
.btn:active, .btn-primary:active{ transform:scale(.98); }
.btn.ghost, .btn-secondary{
color:var(--red-dark); background:var(--cream-light);
border:1px solid var(--line); box-shadow:none;
}
.btn.ghost:hover, .btn-secondary:hover{ background:var(--red); border-color:var(--red); color:var(--cream-light); }
.btn-text{
display:inline-flex; align-items:center; gap:8px;
font-family:var(--ui); font-size:13px; font-weight:600;
letter-spacing:0.06em; text-transform:uppercase;
color:var(--red-dark); background:none; border:0; padding:12px 0;
min-height:44px; text-decoration:none; cursor:pointer;
}
.btn-text .arw, .btn .arw{ transition:transform .18s ease; }
.btn-text:hover .arw, .btn:hover .arw{ transform:translateX(4px); }
/* ===========================================================================
7. METADATA — the catalogue register
=========================================================================== */
.meta{ display:flex; flex-direction:column; gap:var(--s2); }
.meta-num{
font-family:var(--ui); font-size:11.5px; font-weight:600;
letter-spacing:0.14em; color:var(--red); font-variant-numeric:tabular-nums;
}
.meta-name{ font-family:var(--display); font-size:clamp(24px,2.4vw,32px); line-height:1.1; color:var(--ink); }
.meta-client{
font-family:var(--ui); font-size:11.5px; font-weight:500;
letter-spacing:0.10em; text-transform:uppercase; color:var(--ink-soft);
}
.meta-tags{ display:flex; flex-wrap:wrap; gap:var(--s2); }
.tag{
font-family:var(--ui); font-size:11px; font-weight:500;
letter-spacing:0.08em; text-transform:uppercase;
color:var(--ink-soft);
border:1px solid var(--line); border-radius:var(--r-pill);
padding:6px 13px; background:transparent;
}
.tag.is-pink { background:var(--pink); border-color:transparent; color:var(--ink); }
.tag.is-blue { background:var(--blue); border-color:transparent; color:var(--ink); }
.tag.is-yellow{ background:var(--yellow); border-color:transparent; color:var(--ink); }
/* ===========================================================================
8. CARD FAMILY — five members, one family
=========================================================================== */
.c-feature, .c-project, .c-archive, .c-info, .c-cta{
position:relative;
background:var(--cream-light);
border:1px solid var(--line);
box-shadow:var(--shadow);
text-decoration:none;
color:inherit;
display:block;
transition:box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.c-feature{ border-radius:var(--r-feature); padding:var(--s6); }
.c-project{ border-radius:var(--r-card); padding:var(--s5); }
.c-archive{ border-radius:var(--r-tight); padding:var(--s3); }
.c-info { border-radius:var(--r-card); padding:var(--s5); }
.c-cta { border-radius:var(--r-feature); padding:var(--s7); background:var(--red); border-color:var(--red); }
.c-cta, .c-cta .t-section, .c-cta p{ color:var(--cream-light); }
.c-cta .btn{ background:var(--cream-light); color:var(--red-dark); border-color:var(--cream-light); }
@media (hover:hover) and (pointer:fine){
a.c-feature:hover, a.c-project:hover, a.c-archive:hover{
box-shadow:var(--shadow-lift); border-color:var(--red); transform:translateY(-2px);
}
}
/* the media well inside a card keeps the artwork's own proportions */
.c-media{ border-radius:var(--r-tight); overflow:hidden; background:var(--cream); }
.c-media img, .c-media video{ display:block; width:100%; height:auto; }
/* ===========================================================================
9. RETIRE THE SCRAPBOOK LAYER
Tape, kraft, torn edges, pinned rotations and hard offset shadows are gone.
The rules stay in style.css so Phase 2 can delete them file by file.
=========================================================================== */
.tape, .tape2, .navcat-yarn{ display:none !important; }
.herobg, .kraftmid{
background:var(--cream) !important;
background-image:none !important;
color:var(--ink);
}
.herobg::before, .herobg::after,
.kraftmid::before, .kraftmid::after{ display:none !important; content:none !important; }
.herobg .lede, .herobg .alabel, .herobg .crumb a, .herobg .crumb b, .herobg .crumb span,
.kraftmid .hn-lead, .kraftmid .hn-meta, .kraftmid .sh-note, .kraftmid .meta{ color:var(--ink-soft); }
.polaroid, .tbox, .journal, .ncard, .hnext, .flag, .rel, .acc, .gist,
.fig, .ai, .hg-i, .strip-i, .aboutbox{
transform:none !important;
box-shadow:none;
}
.polaroid, .tbox, .journal, .ncard, .aboutbox{
background:var(--cream-light);
border:1px solid var(--line);
border-radius:var(--r-card);
box-shadow:var(--shadow);
}
.fig, .ai, .hg-i, .strip-i{
background:transparent;
border:0;
border-radius:var(--r-tight);
}
.fig img, .ai img, .hg-i img, .strip-i img, .polaroid img{
border-radius:var(--r-tight);
display:block;
}
.brk{ border-top:1px solid var(--line-soft); }
.hg-i::after, .strip-i::after, .asheet .ai::after, .sheet > .fig::after,
.ncard::after, .hnext::after, .flag::after{ display:none !important; content:none !important; }
/* links */
a{ color:var(--red-dark); }
a:hover{ color:var(--red); }
/* forms inherit the pill language */
.form input, .form textarea{
font-family:var(--ui); font-size:16px; color:var(--ink);
background:var(--cream-light);
border:1px solid var(--line); border-radius:var(--r-tight);
padding:14px 16px;
}
.form input:focus, .form textarea:focus{ outline:2px solid var(--red); outline-offset:2px; border-color:var(--red); }
/* visible focus everywhere, in brand red */
a:focus-visible, button:focus-visible, summary:focus-visible,
input:focus-visible, textarea:focus-visible{
outline:2px solid var(--red); outline-offset:3px; border-radius:4px;
}
footer{ background:var(--cream); border-top:1px solid var(--line-soft); }
@media (prefers-reduced-motion:reduce){
*{ animation-duration:.01ms !important; animation-iteration-count:1 !important;
transition-duration:.01ms !important; scroll-behavior:auto !important; }
}
/* ===========================================================================
10. CORRECTIONS AGAINST THE REFERENCE
Read from the Rayo comp: section headings carry red, colour appears as solid
fields behind artwork rather than as accents, the footer is a red panel, and
elevation is almost entirely absent — flat colour, hairline outline.
=========================================================================== */
/* --- display colour: sections speak in red, names stay ink --- */
.t-title, .t-section,
h2, .shead h2, .mhead, .hw.sec{
color:var(--red-dark);
}
.t-hero, .t-project, .meta-name, .hw.xl, h1, .pcase-t{
color:var(--ink);
}
.t-ink{ color:var(--ink) !important; }
.t-red{ color:var(--red-dark) !important; }
/* --- colour fields: the supporting palette carries category, not decoration --
A card sits its artwork on a solid field. The field is the signal; the card
around it stays cream. Use one field per category, never at random. ------- */
.field{
border-radius:var(--r-card);
padding:var(--s5);
display:flex; align-items:center; justify-content:center;
}
.field-pink { background:var(--pink); }
.field-blue { background:var(--blue); }
.field-yellow{ background:var(--yellow); }
.field-red { background:var(--red); }
.field-cream { background:var(--cream); }
.field img, .field video{ display:block; max-width:100%; height:auto; border-radius:var(--r-tight); }
/* a card whose whole surface is the colour field */
.c-project.on-pink { background:var(--pink); border-color:transparent; }
.c-project.on-blue { background:var(--blue); border-color:transparent; }
.c-project.on-yellow{ background:var(--yellow); border-color:transparent; }
.c-project.on-red { background:var(--red); border-color:transparent; color:var(--cream-light); }
.c-project.on-red .meta-name, .c-project.on-red .meta-client{ color:var(--cream-light); }
/* --- flat by default: elevation is the exception, not the rule --- */
.c-feature, .c-project, .c-archive, .c-info,
.polaroid, .tbox, .journal, .ncard, .aboutbox, .nv{
box-shadow:none;
}
.is-raised{ box-shadow:var(--shadow); }
@media (hover:hover) and (pointer:fine){
a.c-feature:hover, a.c-project:hover, a.c-archive:hover{ box-shadow:var(--shadow); }
}
/* --- badge: the small pill that sits on a colour field --- */
.badge-pill{
position:absolute; top:var(--s3); left:var(--s3);
font-family:var(--ui); font-size:10.5px; font-weight:600;
letter-spacing:0.10em; text-transform:uppercase;
color:var(--red-dark); background:var(--cream-light);
border-radius:var(--r-pill); padding:5px 12px;
}
/* --- disclosure row: a full-width coloured pill with a round control --- */
.row-pill{
display:flex; align-items:center; justify-content:space-between; gap:var(--s4);
width:100%; padding:14px 10px 14px 22px; min-height:44px;
border:0; border-radius:var(--r-pill); cursor:pointer;
font-family:var(--ui); font-size:14px; font-weight:600;
letter-spacing:0.02em; color:var(--ink); text-align:left;
background:var(--pink);
}
.row-pill.is-blue { background:var(--blue); }
.row-pill.is-yellow{ background:var(--yellow); }
.row-pill.is-cream { background:var(--cream-light); border:1px solid var(--line); }
.row-pill .mark{
flex:0 0 auto; width:28px; height:28px; border-radius:var(--r-pill);
background:var(--cream-light); color:var(--red);
display:inline-flex; align-items:center; justify-content:center;
font-size:17px; line-height:1; transition:transform .2s ease;
}
details[open] > .row-pill .mark{ transform:rotate(45deg); }
/* --- footer: a solid red panel, the last object on the page --- */
footer{
background:var(--cream);
border-top:0;
padding:var(--s7) var(--pad) var(--s7);
}
footer > .wrap, footer > .mid{
background:var(--red);
border-radius:var(--r-feature);
padding:var(--s7);
color:var(--cream-light);
max-width:var(--max);
margin-inline:auto;
}
footer .fnote{ color:var(--cream-light); opacity:.92; font-size:13px; letter-spacing:0.02em; }
footer .ficons a{
width:40px; height:40px;
border:1px solid rgba(255,249,238,.45); border-radius:var(--r-pill);
color:var(--cream-light); background:transparent;
transition:background .16s ease, color .16s ease;
}
footer .ficons a:hover{ background:var(--cream-light); color:var(--red); transform:none; }
footer a{ color:var(--cream-light); }
@media (max-width:640px){ footer > .wrap, footer > .mid{ padding:var(--s6) var(--s5); } }
/* ---------------------------------------------------------------------------
The nav is a pill, not a full-width bar: the paper element is constrained to
the pill's own box so the object sits on the cream rather than spanning it.
--------------------------------------------------------------------------- */
nav{ padding-inline:var(--pad); }
.navpaper{ position:relative; max-width:var(--max); margin-inline:auto; padding:var(--s4) 0 var(--s3); }
/* ---------------------------------------------------------------------------
Remaining small UI objects brought into the pill/catalogue language.
--------------------------------------------------------------------------- */
.points li, .points span, .chip, .filters button, .bg-cs, .rel, .pn-all, .crow-go{
font-family:var(--ui);
}
.points li, .points span, .chip{
display:inline-flex; align-items:center;
font-size:12px; font-weight:500; letter-spacing:0.06em;
color:var(--ink-soft);
background:transparent;
border:1px solid var(--line); border-radius:var(--r-pill);
padding:8px 16px; box-shadow:none; transform:none !important;
}
.filters button{
font-size:11.5px; font-weight:600; letter-spacing:0.10em; text-transform:uppercase;
color:var(--ink-soft); background:transparent;
border:1px solid var(--line); border-radius:var(--r-pill);
padding:10px 18px; min-height:44px;
}
.filters button[aria-pressed="true"], .filters button.on{
background:var(--red); border-color:var(--red); color:var(--cream-light);
}
.rel{
border:1px solid var(--line); border-radius:var(--r-pill);
background:var(--cream-light); padding:12px 20px;
}
.rel:hover{ border-color:var(--red); transform:none; }
.crumb{ font-family:var(--ui); font-size:11.5px; letter-spacing:0.09em; text-transform:uppercase; color:var(--ink-soft); }
.crumb a{ color:var(--ink-soft); } .crumb a:hover{ color:var(--red); }
.jump-wrap{ background:var(--cream) !important; box-shadow:none; border-bottom:1px solid var(--line-soft); }
.jump{ border-top:0; }
.jump a{ font-family:var(--ui); font-size:12.5px; color:var(--ink-soft); }
.jump a:hover{ color:var(--red); }
.badge{ font-family:var(--ui); border-radius:var(--r-pill); }
.gist{ border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.gist dt, .gist dd{ border-bottom:1px solid var(--line-soft); }
.num-v{ font-family:var(--display); font-weight:400; color:var(--ink); letter-spacing:-0.02em; }
.vh{ position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
/* ---------------------------------------------------------------------------
Touch targets. The monogram reads small, like the reference, but its tappable
area stays a full 44px; the project-nav links were sitting a hair under.
--------------------------------------------------------------------------- */
.nvbrand{ min-width:44px; min-height:44px; justify-content:center; }
.pn, .pn.prev, .pn.next{ min-height:48px; justify-content:center; }
.points{ list-style:none; display:flex; flex-wrap:wrap; gap:var(--s2); margin:var(--s5) 0 0; padding:0; }
.points li{ text-align:center; }
/* ===========================================================================
11. PHASE 1 REVISION — the final word on nav state, elevation and type colour.
Everything below overrides anything above it.
=========================================================================== */
/* --- 1. active navigation: soft pink fill, dark red text --------------------
Red stays the action colour on buttons and controls; the nav marks where you
are, which is a quieter job. --------------------------------------------- */
.lks a[aria-current="page"]{
background:var(--pink);
color:var(--red-dark);
font-weight:600;
}
.lks a[aria-current="page"]:hover{ background:var(--pink); color:var(--red-dark); }
/* --- 4. flat is the default ------------------------------------------------
Hairline outline, rounded corner, solid field. The shadow token stays in the
system for exceptional interaction states, but nothing wears it at rest. -- */
.surface, .card,
.c-feature, .c-project, .c-archive, .c-info, .c-cta,
.polaroid, .tbox, .journal, .ncard, .aboutbox, .nv, .rel, .chip, .points li{
box-shadow:none;
}
@media (hover:hover) and (pointer:fine){
a.c-feature:hover, a.c-project:hover, a.c-archive:hover{
box-shadow:none;
border-color:var(--red);
transform:translateY(-1px);
}
}
.is-raised{ box-shadow:var(--shadow); } /* opt in, never automatic */
/* --- 5. typographic colour hierarchy, locked -------------------------------
RED SERIF section headings, editorial statements, section introductions
INK SERIF project and brand names, hero identity, long-form titles
INK SANS body, descriptions, navigation, metadata, captions
RED SANS active states, labels, small emphasis, selected controls
Red creates hierarchy. It is not the default colour of type. ------------- */
/* red serif */
.t-section, .hw.sec,
h2, .shead h2, .mhead,
.pull, .plead{
color:var(--red-dark);
}
/* ink serif */
.t-hero, .t-title, .t-project,
.hw.xl, .hw.statnum, h1, .pcase-t,
.meta-name, .bname,
.flag-lead, .hn-lead, .hf-lead,
.psub, .acc-t, h3{
color:var(--ink);
}
/* ink sans */
body, p, li, dd, .lede, .prose p, .gist dd,
.t-meta, .alabel, .bg-meta, .hn-meta, .num-l, .uw-m, .uw-n,
.credit, .fig figcaption, .ai-label, .hg-cap, .stat-src, .pn-l,
.lks a, .crumb, .crumb a{
color:var(--ink);
}
.lede, .t-meta, .alabel, .bg-meta, .hn-meta, .num-l, .uw-m, .uw-n,
.credit, .fig figcaption, .ai-label, .hg-cap, .stat-src, .pn-l,
.lks a, .crumb, .crumb a{
color:var(--ink-soft);
}
/* red sans — active states, labels, small emphasis, controls */
.meta-num, .btn-text, .crow-go, .bg-cs, .jump a:hover,
.lks a:hover, .hero-now b, .hero-now strong{
color:var(--red-dark);
}
.filters button[aria-pressed="true"], .filters button.on{
background:var(--red); border-color:var(--red); color:var(--cream-light);
}
.btn, .btn-primary{ color:var(--cream-light); } /* on red, stays cream */
.c-cta, .c-cta .t-section, .c-cta p, .c-cta .t-meta{ color:var(--cream-light); }
footer .fnote, footer a{ color:var(--cream-light); }
/* --- the cut-out words, mapped to their real jobs --------------------------
Bare .hw in a heading row is a page title; .cuthead is a section heading;
.csname and .ptitle are project names. The old markup never distinguished
them by size, so the system does it here. ------------------------------- */
.hrow:not(.csname) > .hw:not(.xl):not(.sm):not(.statnum){
font-size:clamp(42px, 5.2vw, 72px);
line-height:1.04;
letter-spacing:-0.022em;
color:var(--ink);
}
.csname > .hw{
font-size:clamp(34px, 4.4vw, 60px);
line-height:1.06;
color:var(--ink); /* a project name is ink, never red */
}
.cuthead .hw{
font-size:clamp(30px, 3.4vw, 48px);
line-height:1.10;
color:var(--red-dark); /* a section heading is red */
}
/* Inline text links that act as controls keep a full tap target at every width,
not only on phones. */
.crow-go, .bg-cs, .pn-all, .btn-text, .rel, .snote a, .fnote a{
display:inline-flex; align-items:center; min-height:44px;
}
/* ===========================================================================
12. HOMEPAGE COMPONENTS (Phase 2)
Built as reusable objects — hero, feature, project card, proof, archive cta,
about card, contact cta, rich footer. Later phases reuse these rather than
writing page-specific CSS.
=========================================================================== */
.section{ padding-block:var(--s9); }
.section + .section{ padding-top:0; }
.section-head{
display:flex; align-items:baseline; justify-content:space-between;
gap:var(--s5); flex-wrap:wrap; margin-bottom:var(--s7);
}
.section-note{
font-family:var(--display); font-size:clamp(15px,1.3vw,17px);
font-style:normal; color:var(--ink-soft);
}
/* --- hero ---------------------------------------------------------------- */
.hero{ padding-block:var(--s9) var(--s8); }
.hero-name{
font-family:var(--display); color:var(--ink);
font-size:clamp(52px, 9vw, 132px); line-height:0.92;
letter-spacing:-0.035em; margin:var(--s5) 0 0; text-wrap:balance;
}
.hero-statement{
font-family:var(--display); color:var(--red-dark);
font-size:clamp(24px, 3.2vw, 44px); line-height:1.16;
letter-spacing:-0.018em; margin:var(--s6) 0 0; max-width:30ch;
text-wrap:balance;
}
.hero-aside{
border:1px solid var(--line); border-radius:var(--r-feature);
padding:var(--s5); display:flex; flex-direction:column; gap:var(--s4);
align-self:start;
}
.hero-status{
background:var(--pink); border-radius:var(--r-card);
padding:var(--s4) var(--s5);
font-size:14.5px; line-height:1.5; color:var(--ink);
}
.hero-status b, .hero-status strong{ color:var(--red-dark); }
.hero-cta{ display:flex; flex-wrap:wrap; gap:var(--s3); margin-top:var(--s7); }
/* --- feature (the flagship) ---------------------------------------------- */
.feature{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:var(--gutter); align-items:start; }
.feature-media{
grid-column:span 7;
background:var(--pink);
border-radius:var(--r-feature);
padding:var(--s7);
display:flex; justify-content:center;
}
.feature-media img{
display:block; width:100%; height:auto; max-width:430px;
border-radius:var(--r-tight);
}
.feature-body{ grid-column:span 5; display:flex; flex-direction:column; gap:var(--s4); }
.feature-lead{
font-family:var(--display); font-size:clamp(22px,2.3vw,30px);
line-height:1.26; color:var(--ink); margin:0;
}
/* --- catalogue metadata -------------------------------------------------- */
.cat-num{
font-family:var(--ui); font-size:12px; font-weight:600;
letter-spacing:0.16em; color:var(--red); font-variant-numeric:tabular-nums;
}
.cat-name{
font-family:var(--display); color:var(--ink);
font-size:clamp(34px,4vw,54px); line-height:1.02; letter-spacing:-0.02em;
margin:var(--s2) 0 0;
}
.cat-client{
font-family:var(--ui); font-size:11.5px; font-weight:500;
letter-spacing:0.10em; text-transform:uppercase; color:var(--ink-soft);
margin:var(--s3) 0 0;
}
/* --- numbers, as catalogue annotations ----------------------------------- */
.figs{ display:flex; flex-wrap:wrap; gap:var(--s6) var(--s7); margin:var(--s3) 0 0; }
.fig-item{ display:flex; flex-direction:column; gap:2px; }
.fig-v{
font-family:var(--display); color:var(--ink);
font-size:clamp(26px,2.6vw,36px); line-height:1.05; letter-spacing:-0.02em;
white-space:nowrap;
}
.fig-l{
font-family:var(--ui); font-size:11.5px; font-weight:500;
letter-spacing:0.09em; text-transform:uppercase; color:var(--ink-soft);
line-height:1.45; max-width:22ch;
}
.fig-src{
font-family:var(--ui); font-size:10.5px; font-weight:600;
letter-spacing:0.12em; text-transform:uppercase; color:var(--red);
}
/* --- project cards, with rhythm ------------------------------------------ */
.projects{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:var(--gutter); }
.proj{
display:flex; flex-direction:column;
border:1px solid var(--line); border-radius:var(--r-feature);
overflow:hidden; text-decoration:none; color:inherit;
transition:border-color .2s ease, transform .2s ease;
}
.proj-media{ padding:var(--s6); display:flex; justify-content:center; }
.proj-media img{ display:block; width:100%; height:auto; border-radius:var(--r-tight); }
.proj-body{ padding:var(--s5) var(--s6) var(--s6); display:flex; flex-direction:column; gap:var(--s3); }
.proj-lead{ font-family:var(--display); font-size:clamp(18px,1.7vw,22px); line-height:1.3; color:var(--ink); margin:0; }
.proj .btn-text{ margin-top:auto; }
.on-yellow .proj-media{ background:var(--yellow); }
.on-blue .proj-media{ background:var(--blue); }
.on-pink .proj-media{ background:var(--pink); }
.on-cream .proj-media{ background:var(--cream); }
@media (hover:hover) and (pointer:fine){
.proj:hover{ border-color:var(--red); transform:translateY(-2px); }
.proj:hover img{ transform:scale(1.02); }
.proj img{ transition:transform .3s ease; }
}
/* --- a full-width colour panel ------------------------------------------- */
.panel{
border-radius:var(--r-feature);
padding:var(--s8) var(--s7);
}
.panel-blue{ background:var(--blue); }
.panel-red { background:var(--red); color:var(--cream-light); }
.panel-red .t-section, .panel-red p, .panel-red .fig-v, .panel-red .cat-name{ color:var(--cream-light); }
.panel-red .fig-l, .panel-red .cat-client{ color:var(--cream-light); opacity:.85; }
/* --- about teaser --------------------------------------------------------- */
.about-card{
display:grid; grid-template-columns:repeat(12,minmax(0,1fr));
gap:var(--gutter); align-items:center;
}
.about-photo{ grid-column:span 4; }
.about-photo img{
display:block; width:100%; height:auto;
border-radius:var(--r-feature); border:1px solid var(--line);
}
.about-text{ grid-column:6 / -1; }
/* --- contact --------------------------------------------------------------*/
.panel-red .form label{ color:var(--cream-light); }
.panel-red .form input, .panel-red .form textarea{
background:var(--cream-light); border-color:transparent; color:var(--ink);
}
.panel-red .btn{ background:var(--cream-light); color:var(--red-dark); border-color:var(--cream-light); }
.panel-red .btn:hover{ background:var(--cream); border-color:var(--cream); }
.panel-red a{ color:var(--cream-light); }
/* --- rich footer ---------------------------------------------------------- */
.foot-grid{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:var(--gutter); }
.foot-name{
grid-column:span 5;
font-family:var(--display); font-size:clamp(38px,4.6vw,64px);
line-height:1; letter-spacing:-0.028em; color:var(--cream-light); margin:0;
}
.foot-col{ grid-column:span 2; display:flex; flex-direction:column; gap:var(--s2); }
.foot-h{
font-family:var(--ui); font-size:11px; font-weight:600; letter-spacing:0.14em;
text-transform:uppercase; color:var(--cream-light); opacity:.7; margin-bottom:var(--s2);
}
.foot-col a{
font-family:var(--ui); font-size:14.5px; color:var(--cream-light);
text-decoration:none; min-height:44px; display:inline-flex; align-items:center;
}
.foot-col a:hover{ text-decoration:underline; }
.foot-base{
grid-column:1 / -1; display:flex; justify-content:space-between; gap:var(--s5);
flex-wrap:wrap; margin-top:var(--s7); padding-top:var(--s5);
border-top:1px solid rgba(255,249,238,.3);
}
/* --- responsive: an intentional narrow composition, not a collapse -------- */
@media (max-width:1024px){
.feature-media{ grid-column:span 6; } .feature-body{ grid-column:span 6; }
.about-photo{ grid-column:span 5; } .about-text{ grid-column:6 / -1; }
.foot-name{ grid-column:span 8; } .foot-col{ grid-column:span 4; }
}
@media (max-width:900px){
.section{ padding-block:var(--s8); }
.hero{ padding-block:var(--s7) var(--s7); }
.feature{ gap:var(--s6); }
.feature-media, .feature-body{ grid-column:1 / -1; }
.feature-media{ padding:var(--s5); }
.feature-media img{ max-width:none; }
.projects > *{ grid-column:1 / -1 !important; }
.about-card{ gap:var(--s6); }
.about-photo{ grid-column:1 / -1; max-width:260px; }
.about-text{ grid-column:1 / -1; }
.foot-name, .foot-col{ grid-column:1 / -1; }
.foot-col{ gap:0; }
.panel{ padding:var(--s7) var(--s5); }
.section-head{ margin-bottom:var(--s6); }
.figs{ gap:var(--s5) var(--s6); }
}
/* The hero aside is a right-hand catalogue object on desktop. Below the 12-column
grid it becomes a full-width band instead of a stranded half-width box. */
@media (max-width:1024px){
.hero .grid > *{ grid-column:1 / -1 !important; }
.hero-aside{ flex-direction:row; flex-wrap:wrap; align-items:center; gap:var(--s4) var(--s5); }
.hero-aside .points{ margin:0; flex:1 1 320px; }
.hero-status{ flex:1 1 280px; }
}
@media (max-width:900px){
.hero-aside{ flex-direction:column; align-items:stretch; }
}
/* Once the aside stacks, the tablet flex-basis would be read down the block axis
and stretch the status panel and chips. Reset it to content height. */
@media (max-width:900px){
.hero-aside .points, .hero-aside .hero-status{ flex:0 0 auto; }
.hero-aside .points li{ align-self:flex-start; }
}
/* ===========================================================================
13. PAGE SYSTEM (Phase 3)
One header, one credit line, one gallery, one project nav — shared by every
page so nothing is styled per-page any more.
=========================================================================== */
/* --- page header: eyebrow, title, optional lead ------------------------- */
.page-head{ padding-block:var(--s8) var(--s7); }
.page-head .t-meta{ display:block; }
.page-title{
font-family:var(--display); color:var(--ink);
font-size:clamp(42px,6vw,86px); line-height:1.0; letter-spacing:-0.028em;
margin:var(--s4) 0 0; text-wrap:balance;
}
.page-lead{
font-family:var(--display); color:var(--red-dark);
font-size:clamp(20px,2.3vw,30px); line-height:1.24; letter-spacing:-0.015em;
margin:var(--s5) 0 0; max-width:30ch;
}
.page-sub{ margin:var(--s5) 0 0; max-width:60ch; color:var(--ink); }
/* --- the credit line that closes a project ------------------------------ */
.credit-line{
display:flex; flex-wrap:wrap; gap:var(--s3) var(--s6);
padding:var(--s5) 0; margin-top:var(--s7);
border-top:1px solid var(--line);
}
.credit-line dt{
font-family:var(--ui); font-size:11px; font-weight:600;
letter-spacing:0.14em; text-transform:uppercase; color:var(--ink-soft);
margin:0 0 2px;
}
.credit-line dd{ font-family:var(--ui); font-size:15px; color:var(--ink); margin:0; }
.credit-line > div{ min-width:140px; }
/* --- contact sheet: the work at its own proportions --------------------- */
.sheet-head{
display:flex; align-items:baseline; justify-content:space-between;
gap:var(--s5); flex-wrap:wrap; margin-bottom:var(--s5);
}
.asheet .ai{ border-radius:var(--r-tight); }
.asheet .ai img{ border-radius:var(--r-tight); }
.asheet .ai-label{
display:flex; gap:8px; align-items:baseline; flex-wrap:wrap;
margin-top:var(--s2);
}
.asheet .ai-label b{ font-weight:600; color:var(--ink); }
.asheet .ai-label span, .asheet .ai-label i{ color:var(--ink-soft); font-style:normal; }
/* --- project navigation -------------------------------------------------- */
.pnav{
display:flex; align-items:center; justify-content:space-between;
gap:var(--s5); flex-wrap:wrap;
margin-top:var(--s8); padding-top:var(--s5);
border-top:1px solid var(--line);
}
.pnav .pn{ display:flex; flex-direction:column; gap:2px; text-decoration:none; }
.pnav .pn-l{
font-family:var(--ui); font-size:11px; font-weight:600; letter-spacing:0.14em;
text-transform:uppercase; color:var(--ink-soft);
}
.pnav .pn-n{ font-family:var(--display); font-size:clamp(20px,2vw,26px); color:var(--ink); }
.pnav .pn:hover .pn-n{ color:var(--red-dark); }
.pnav .pn-all{
font-family:var(--ui); font-size:12px; font-weight:600; letter-spacing:0.10em;
text-transform:uppercase; color:var(--red-dark);
border:1px solid var(--line); border-radius:var(--r-pill);
padding:12px 20px; min-height:44px; display:inline-flex; align-items:center;
white-space:nowrap; text-decoration:none;
}
.pnav .pn-all:hover{ background:var(--red); border-color:var(--red); color:var(--cream-light); }
/* --- a structural gap we have not filled yet ----------------------------- */
.placeholder{
border:1px dashed var(--line); border-radius:var(--r-card);
padding:var(--s5); margin-top:var(--s5);
font-family:var(--ui); font-size:13.5px; color:var(--ink-soft);
}
.placeholder b{ color:var(--red-dark); font-weight:600; letter-spacing:0.06em; text-transform:uppercase; font-size:11px; display:block; margin-bottom:6px; }
@media (max-width:900px){
.page-head{ padding-block:var(--s7) var(--s6); }
.pnav{ flex-direction:column; align-items:flex-start; gap:var(--s4); }
}
/* The three paper marks on About are the only artwork still rendered from the
old asset set; their tiles stay, everything else in img/letters is gone. */
.a45{background-image:url(img/letters/a45.png);aspect-ratio:0.9000}
.a61{background-image:url(img/letters/a61.webp);aspect-ratio:0.5467}
.a72{background-image:url(img/letters/a72.webp);aspect-ratio:0.4267}
/* ===========================================================================
14. CURATED THREE-PAGE SYSTEM
Home / Work / About. Bigger hero, asymmetric editorial evidence, lighter
components. The work determines the composition, never the grid.
=========================================================================== */
/* --- temporary construction banner -------------------------------------- */
.notice{
background:var(--ink); color:var(--cream-light);
font-family:var(--ui); font-size:13.5px; line-height:1.5;
}
.notice-in{
max-width:var(--max); margin-inline:auto;
padding:12px var(--pad);
display:flex; align-items:center; gap:var(--s4); flex-wrap:wrap;
}
.notice b{
font-weight:600; letter-spacing:0.12em; text-transform:uppercase;
font-size:11px; color:var(--yellow); flex:0 0 auto;
}
.notice p{ margin:0; font-size:13.5px; color:var(--cream-light); opacity:.92; flex:1 1 320px; }
.notice button{
flex:0 0 auto; margin-left:auto;
background:transparent; color:var(--cream-light);
border:1px solid rgba(255,249,238,.4); border-radius:var(--r-pill);
font-family:var(--ui); font-size:11px; font-weight:600; letter-spacing:0.12em;
text-transform:uppercase; padding:9px 16px; min-height:44px; cursor:pointer;
transition:background .16s ease, color .16s ease;
}
.notice button:hover{ background:var(--cream-light); color:var(--ink); }
.notice[hidden]{ display:none; }
@media (max-width:640px){
.notice-in{ padding:10px var(--pad); gap:var(--s3); }
.notice p{ flex:1 1 100%; font-size:13px; }
.notice button{ margin-left:0; }
}
/* --- the hero carries the page ------------------------------------------ */
.lede-hero{ padding-block:var(--s9) var(--s8); }
.lede-hero .t-meta{ color:var(--ink-soft); }
.hero-claim{
font-family:var(--display); color:var(--ink);
font-size:clamp(40px, 6.6vw, 104px);
line-height:1.02; letter-spacing:-0.032em;
margin:var(--s5) 0 0; max-width:17ch; text-wrap:balance;
}
.hero-disc{
font-family:var(--ui); font-size:clamp(13px,1.1vw,15px); font-weight:600;
letter-spacing:0.14em; text-transform:uppercase; color:var(--red-dark);
margin:var(--s6) 0 0;
}
.hero-sub{
font-family:var(--ui); font-size:clamp(16px,1.3vw,18px); line-height:1.6;
color:var(--ink-soft); margin:var(--s4) 0 0; max-width:46ch;
}
@media (max-width:760px){ .lede-hero{ padding-block:var(--s7) var(--s7); } }
/* --- editorial evidence: natural ratios, asymmetric columns -------------- */
.ev{
display:grid; gap:var(--gutter);
grid-template-columns:repeat(12,minmax(0,1fr));
align-items:start;
}
.ev figure{ margin:0; }
.ev img{
display:block; width:100%; height:auto; /* ratio always from the file */
border-radius:var(--r-tight);
}
.ev figcaption{
font-family:var(--ui); font-size:11.5px; letter-spacing:0.04em;
color:var(--ink-soft); margin-top:var(--s3);
}
/* a tall reel, a square static and a wide hoarding each take what they need */
.ev .tall { grid-column:span 3; }
.ev .std { grid-column:span 4; }
.ev .wide { grid-column:span 6; }
.ev .full { grid-column:span 8; }
.ev .off { margin-left:8.333%; }
@media (max-width:900px){
.ev{ grid-template-columns:repeat(6,minmax(0,1fr)); }
.ev .tall{ grid-column:span 2; }
.ev .std { grid-column:span 3; }
.ev .wide, .ev .full{ grid-column:span 6; }
.ev .off { margin-left:0; }
}
@media (max-width:560px){
.ev{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s4); }
.ev .tall{ grid-column:span 1; }
.ev .std, .ev .wide, .ev .full{ grid-column:span 2; }
}
/* --- a curated project entry -------------------------------------------- */
.entry{ padding-block:var(--s9); border-top:1px solid var(--line-soft); }
.entry:first-of-type{ border-top:0; }
.entry-head{
display:grid; grid-template-columns:repeat(12,minmax(0,1fr));
gap:var(--gutter); align-items:start; margin-bottom:var(--s7);
}
.entry-id{ grid-column:span 1; }
.entry-title{ grid-column:span 5; }
.entry-copy{ grid-column:8 / -1; }
.entry-name{
font-family:var(--display); color:var(--ink);
font-size:clamp(34px,4.4vw,62px); line-height:1.0; letter-spacing:-0.026em;
margin:0;
}
.entry-cap{
font-family:var(--ui); font-size:11.5px; font-weight:600;
letter-spacing:0.12em; text-transform:uppercase; color:var(--red-dark);
margin:var(--s3) 0 0;
}
.entry-copy p{ margin:0 0 var(--s4); font-size:16.5px; line-height:1.62; }
.entry-take{
font-family:var(--display); font-size:clamp(18px,1.7vw,22px);
line-height:1.34; color:var(--red-dark); margin:var(--s5) 0 0;
}
.entry-figs{ display:flex; flex-wrap:wrap; gap:var(--s5) var(--s7); margin:var(--s6) 0 0; }
@media (max-width:900px){
.entry{ padding-block:var(--s8); }
.entry-head{ gap:var(--s4); margin-bottom:var(--s6); }
.entry-id{ grid-column:1 / -1; }
.entry-title{ grid-column:1 / -1; }
.entry-copy{ grid-column:1 / -1; }
}
/* --- motion: small, deliberate, never shifting layout -------------------- */
@media (prefers-reduced-motion:no-preference){
.rise{ opacity:0; transform:translateY(8px); }
.rise.in{ opacity:1; transform:none; transition:opacity .5s ease-out, transform .5s ease-out; }
@media (hover:hover) and (pointer:fine){
.ev figure img, .ev a img{ transition:transform .35s cubic-bezier(.2,.6,.2,1); }
.ev figure:hover img, .ev a:hover img{ transform:scale(1.015); }
.entry:hover .entry-name{ transition:color .2s ease; }
}
}
@media (prefers-reduced-motion:reduce){
.rise{ opacity:1; transform:none; }
}
/* ===========================================================================
15. AESTHETIC REFINEMENT
Colour stops being a layout device and goes back to being an accent. The
paper, the type and the work carry the weight. Nothing here changes what the
site says — only how loudly it says it.
Audience order this pass is tuned to: recruiters first, freelance clients
second. Personality lives in the visual layer; the information layer stays
literal.
=========================================================================== */
/* --- 15.1 the legacy torn-paper band above the footer is gone ------------ */
footer::before, footer::after{ display:none !important; }
/* --- 15.2 the footer is paper, not a red slab ---------------------------- */
footer{
background:var(--cream); color:var(--ink);
border-top:1px solid var(--line);
padding:0; margin-top:var(--s9); box-shadow:none;
}
footer{ padding:0 !important; }
footer > .wrap, footer > .mid{
background:none; border-radius:0; color:var(--ink);
padding:var(--s8) var(--pad) var(--s6);
}
.foot-name{
color:var(--ink); grid-column:span 4;
font-size:clamp(30px,3.4vw,46px); letter-spacing:-0.024em;
}
.foot-h{ color:var(--red-dark); opacity:1; }
footer a, .foot-col a{ color:var(--ink); border-bottom:0 !important; text-decoration:none; }
.foot-col a{ min-height:38px; font-size:15px; }
.foot-col a:hover{ color:var(--red-dark); text-decoration:none; }
.foot-base{ border-top:1px solid var(--line-soft); margin-top:var(--s6); padding-top:var(--s4); }
footer .fnote{ color:var(--ink-soft); font-size:12.5px; }
/* the one piece of colour left down here: a red rule, not a red field */
footer{ border-top-color:var(--red); border-top-width:2px; }
@media (max-width:900px){ .foot-col a{ min-height:44px; } }
/* --- 15.3 the editorial close replaces the CTA card ---------------------- */
/* Not a component with a background. A closing page: a rule, a line of type,
an address. The contact details stay unmissable because a recruiter needs
them, but they are set, not boxed. */
.close{ padding-block:var(--s9) var(--s8); }
.close-rule{ border:0; border-top:2px solid var(--red); margin:0 0 var(--s6); }
.close-label{
font-family:var(--ui); font-size:11.5px; font-weight:600;
letter-spacing:0.16em; text-transform:uppercase; color:var(--red-dark); margin:0;
}
.close-h{
font-family:var(--display); color:var(--ink);
font-size:clamp(32px,4.4vw,60px); line-height:1.04; letter-spacing:-0.026em;
margin:var(--s4) 0 0; max-width:16ch; text-wrap:balance;
}
.close-sub{
font-family:var(--ui); font-size:17px; line-height:1.65; color:var(--ink-soft);
margin:var(--s4) 0 0; max-width:46ch;
}
.close-mail{
display:inline-flex; align-items:center; min-height:46px; margin:var(--s6) 0 0;
font-family:var(--display); color:var(--ink); text-decoration:none;
font-size:clamp(21px,2.5vw,34px); line-height:1.2; letter-spacing:-0.015em;
border-bottom:2px solid var(--line); padding-bottom:4px;
transition:color .18s ease, border-color .18s ease;
overflow-wrap:anywhere;
}
.close-mail:hover{ color:var(--red-dark); border-bottom-color:var(--red); }
.close-meta{
display:flex; flex-wrap:wrap; align-items:center; gap:0 var(--s4);
margin:var(--s6) 0 0;
}
.close-meta a, .close-meta span{
font-family:var(--ui); font-size:12.5px; font-weight:600;
letter-spacing:0.12em; text-transform:uppercase; color:var(--ink-soft);
text-decoration:none; min-height:44px; display:inline-flex; align-items:center;
}
.close-meta a{ color:var(--red-dark); }
.close-meta a:hover{ color:var(--red); text-decoration:underline; text-underline-offset:4px; }
.close-meta i{ font-style:normal; color:var(--line); }
/* --- 15.4 figures on a rule, not inside a blue box ----------------------- */
.figband{
border-top:1px solid var(--line); padding-top:var(--s5);
display:grid; grid-template-columns:repeat(auto-fit,minmax(168px,1fr));
gap:var(--s6) var(--s5);
}
.figband .fig-v{ color:var(--ink); }
.figband .fig-l{ color:var(--ink-soft); }
/* --- 15.5 principles: a readable measure, finally ------------------------ */
.princ{ list-style:none; margin:0; padding:0;
display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s6) var(--s8); }
.princ > li{ border-top:1px solid var(--line-soft); padding-top:var(--s4); }
.princ h3{
font-family:var(--ui); font-size:11.5px; font-weight:600;
letter-spacing:0.12em; text-transform:uppercase; color:var(--red-dark); margin:0;
}
.princ p{ margin:var(--s3) 0 0; font-size:16.5px; line-height:1.62; max-width:46ch; }
@media (max-width:760px){ .princ{ grid-template-columns:1fr; gap:var(--s5); } }
/* --- 15.6 skills as a credit list, not thirty outlined pills ------------- */
.skills{ margin:0; }
.skills > div{
display:grid; grid-template-columns:minmax(0,210px) minmax(0,1fr);
gap:var(--s3) var(--s6);
border-top:1px solid var(--line-soft); padding-block:var(--s4);
}
.skills dt{
font-family:var(--ui); font-size:11.5px; font-weight:600;
letter-spacing:0.12em; text-transform:uppercase; color:var(--red-dark);
margin:3px 0 0;
}
.skills dd{ margin:0; font-size:16.5px; line-height:1.6; color:var(--ink); max-width:62ch; }
.skills dd i{ font-style:normal; color:var(--line); padding:0 4px; }
@media (max-width:640px){ .skills > div{ grid-template-columns:1fr; } }
/* --- 15.7 experience: hairline rows, quieter --------------------------- */
.crows{ list-style:none; margin:0; padding:0; border-top:1px solid var(--line); }
.crows .crow{
display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1.6fr) minmax(0,1fr);
gap:var(--s3) var(--s5); align-items:baseline;
border-bottom:1px solid var(--line-soft); padding-block:var(--s4);
background:none;
}
.crows .crow b{ font-family:var(--display); font-weight:400; font-size:20px; color:var(--ink); letter-spacing:-0.01em; }
.crows .crow span{ font-family:var(--ui); font-size:14.5px; color:var(--ink-soft); }
.crows .crow span:empty{ display:none; }
@media (max-width:700px){
.crows .crow{ grid-template-columns:1fr; gap:2px; padding-block:var(--s4); }
}
/* --- 15.8 a form set on paper ------------------------------------------- */
.form-plain{ max-width:34rem; }
.form-plain > div{ margin-top:var(--s5); }
.form-plain label{
display:block; font-family:var(--ui); font-size:11.5px; font-weight:600;
letter-spacing:0.12em; text-transform:uppercase; color:var(--red-dark); margin-bottom:6px;
}
.form-plain input, .form-plain textarea{
width:100%; background:transparent; color:var(--ink);
border:0; border-bottom:1px solid var(--line); border-radius:0;
padding:10px 0; font-family:var(--ui); font-size:16.5px;
box-shadow:none;
}
.form-plain input:focus, .form-plain textarea:focus{
outline:0; border-bottom-color:var(--red); border-bottom-width:2px; padding-bottom:9px;
}
.form-plain textarea{ min-height:112px; resize:vertical; }
.form-plain .fs-status{ font-size:14px; color:var(--red-dark); margin:var(--s4) 0 0; }
.form-plain .btn{ margin-top:var(--s5); }
/* --- 15.9 a quiet line that points somewhere else ----------------------- */
.onward{
display:flex; align-items:baseline; justify-content:space-between;
gap:var(--s4); flex-wrap:wrap;
border-top:1px solid var(--line); padding-top:var(--s4); margin-top:var(--s7);
}
.onward p{ margin:0; font-size:15.5px; color:var(--ink-soft); max-width:52ch; }
.onward .btn-text{ margin:0; }
/* --- 15.10 selected-work cards, composed rather than packed -------------- */
/* The spans are authored per card in the markup so each row closes on
purpose. These rules only handle the type under the picture. */
.workcard{ text-decoration:none; color:inherit; display:block; }
.workcard img{ display:block; width:100%; height:auto; border-radius:var(--r-tight); }
.workcard h3{
font-family:var(--display); color:var(--ink); margin:var(--s4) 0 0;
font-size:clamp(23px,2.1vw,31px); line-height:1.1; letter-spacing:-0.018em;
}
.workcard .entry-cap{ margin-top:var(--s2); color:var(--ink-soft); }
.workcard:hover h3{ color:var(--red-dark); }
@media (prefers-reduced-motion:no-preference){ .workcard h3{ transition:color .18s ease; } }
/* ===========================================================================
16. THE ARCHIVE — an editorial catalogue, not a card wall
Numbered entries, metadata in a fixed order so it can be scanned by client,
year, type and discipline, and a contact sheet where evidence exists. An
entry with no imagery is a typographic record, not an empty box.
=========================================================================== */
.cat-lead{ margin:var(--s5) 0 0; max-width:62ch; color:var(--ink); }
/* --- the filter: text, not chrome --------------------------------------- */
.catbar{
display:flex; flex-wrap:wrap; align-items:center; gap:0 var(--s4);
border-top:1px solid var(--line); border-bottom:1px solid var(--line);
margin-top:var(--s7);
}
.catbar .catbar-l{
font-family:var(--ui); font-size:11px; font-weight:600; letter-spacing:0.16em;
text-transform:uppercase; color:var(--ink-soft); margin:0 var(--s3) 0 0;
}
.catbar button{
background:none; border:0; cursor:pointer; padding:0;
min-height:46px; display:inline-flex; align-items:center;
font-family:var(--ui); font-size:12px; font-weight:600; letter-spacing:0.12em;
text-transform:uppercase; color:var(--ink-soft);
border-bottom:2px solid transparent; margin-bottom:-1px;
transition:color .16s ease, border-color .16s ease;
}
.catbar button:hover{ color:var(--ink); }
.catbar button[aria-pressed="true"]{ color:var(--red-dark); border-bottom-color:var(--red); }
.catcount{
margin-left:auto; font-family:var(--ui); font-size:12px; font-weight:600;
letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-soft);
}
@media (max-width:640px){ .catcount{ margin-left:0; width:100%; padding-bottom:var(--s3); } }
/* --- one record ---------------------------------------------------------- */
.cat-entry{
display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:var(--s3) var(--gutter);
align-items:start;
border-top:1px solid var(--line-soft); padding-block:var(--s7);
}
.cat-entry[hidden]{ display:none; }
.cat-e-n{
grid-column:span 1;
font-family:var(--ui); font-size:12px; font-weight:600; letter-spacing:0.14em;
color:var(--red); font-variant-numeric:tabular-nums; padding-top:10px;
}
.cat-e-head{ grid-column:2 / 7; }
.cat-e-name{
font-family:var(--display); color:var(--ink); margin:0;
font-size:clamp(26px,2.9vw,40px); line-height:1.06; letter-spacing:-0.022em;
}
.cat-e-meta{
display:flex; flex-wrap:wrap; gap:0 var(--s3); margin:var(--s3) 0 0;
font-family:var(--ui); font-size:11.5px; font-weight:600; letter-spacing:0.1em;
text-transform:uppercase; color:var(--ink-soft);
}
.cat-e-meta i{ font-style:normal; color:var(--line); }
.cat-e-meta .yr{ color:var(--ink); }
.cat-e-body{ grid-column:8 / -1; }
.cat-e-body p{ margin:0; font-size:16px; line-height:1.6; color:var(--ink); max-width:46ch; }
.cat-e-links{ display:flex; flex-wrap:wrap; gap:0 var(--s4); margin-top:var(--s3); }
.cat-e-links a{
font-family:var(--ui); font-size:12px; font-weight:600; letter-spacing:0.1em;
text-transform:uppercase; color:var(--red-dark); text-decoration:none;
min-height:44px; display:inline-flex; align-items:center;
}
.cat-e-links a:hover{ text-decoration:underline; text-underline-offset:4px; }
.cat-e-none{
font-family:var(--ui); font-size:12px; letter-spacing:0.08em; text-transform:uppercase;
color:var(--ink-soft); margin-top:var(--s3);
}
/* --- the contact sheet: one height, every ratio its own ------------------ */
.cat-sheet{
grid-column:2 / -1; margin-top:var(--s5);
display:flex; flex-wrap:wrap; gap:var(--s4); align-items:flex-end;
}
.cat-sheet img{
display:block; height:var(--sh,132px); width:auto; max-width:100%;
border-radius:var(--r-tight);
}
.cat-sheet .big{ --sh:188px; }
.cat-entry.deep .cat-sheet img{ height:188px; }
@media (max-width:900px){
.cat-entry{ padding-block:var(--s6); gap:var(--s3); }
.cat-e-n{ grid-column:1 / -1; padding-top:0; }
.cat-e-head, .cat-e-body, .cat-sheet{ grid-column:1 / -1; }
.cat-e-body{ margin-top:var(--s3); }
.cat-sheet{ margin-top:var(--s4); gap:var(--s3); }
.cat-sheet img, .cat-entry.deep .cat-sheet img{ height:116px; }
}
@media (max-width:480px){
.cat-sheet img, .cat-entry.deep .cat-sheet img{ height:96px; }
}
/* --- nav with four items still breathes --------------------------------- */
@media (max-width:560px){
.lks a{ padding-inline:11px; }
}
/* --- 16.1 corrections after looking at the rendered page ----------------- */
/* The two metadata lines were the same weight, so neither read first; and the
piece count was stranded under the description instead of sitting with the
data a visitor actually scans. */
.cat-e-meta-1{ color:var(--ink); }
.cat-e-meta-2{ font-size:11px; letter-spacing:0.09em; color:var(--ink-soft); margin-top:5px; }
.cat-e-count{
display:block; margin-top:var(--s3);
font-family:var(--ui); font-size:11px; font-weight:600; letter-spacing:0.1em;
text-transform:uppercase; color:var(--red-dark);
}
.cat-e-none{ margin-top:var(--s4); }
.cat-e-links{ margin-top:var(--s4); }
/* --- 16.2 numbers inside a project entry get their own air -------------- */
.entry .figs{
border-top:1px solid var(--line-soft);
margin-top:var(--s7); padding-top:var(--s5);
}
/* --- 16.3 a prose column that is not pinned to the left rail ------------- */
/* row-gap stays 0: the paragraphs already carry their own margins, and the
grid gap was adding to them and pulling the prose apart */
.textcol{
display:grid; grid-template-columns:repeat(12,minmax(0,1fr));
column-gap:var(--gutter); row-gap:0;
}
.textcol > *{ grid-column:4 / 11; }
.textcol > p:first-child{ margin-top:0; }
@media (max-width:900px){ .textcol > *{ grid-column:1 / -1; } }
/* --- 16.4 the submit button is a button, not a banner -------------------- */
.form-plain button[type="submit"]{ width:auto; display:inline-flex; }
/* --- 16.5 the close already carries its own bottom air ------------------- */
footer{ margin-top:var(--s7); }
/* --- 16.6 availability, stated rather than implied ----------------------- */
/* The primary audience is recruiters, so this is a fact in the information
layer: ink, body scale, sitting where the standfirst sits. Not a CTA. */
.close-avail{
font-family:var(--ui); font-size:18px; line-height:1.6; color:var(--ink);
margin:var(--s4) 0 0; max-width:44ch;
}
.close-avail + .close-sub{ margin-top:var(--s3); font-size:16px; }
/* --- 16.7 a record that is deliberately open, not broken ---------------- */
.cat-entry.pending .cat-e-meta-2{ color:var(--red-dark); }
/* --- 16.8 Credits: the register that closes the catalogue ---------------- */
/* Four roles and one open record. Set tighter than the full entries so the
run of them reads as a deliberate list, not as entries that ran out. */
.cat-groupmark{
border-top:2px solid var(--red);
margin-top:var(--s8); padding-top:var(--s5);
display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:var(--gutter);
}
.cat-groupmark[hidden]{ display:none; }
.cat-grouphead{
grid-column:2 / 7; margin:0;
font-family:var(--ui); font-size:11.5px; font-weight:600;
letter-spacing:0.16em; text-transform:uppercase; color:var(--red-dark);
}
.cat-groupmark p{
grid-column:8 / -1; margin:0;
font-size:15px; line-height:1.6; color:var(--ink-soft); max-width:42ch;
}
.cat-entry.cat-credit{ padding-block:var(--s5); }
.cat-entry.cat-credit .cat-e-name{ font-size:clamp(21px,1.9vw,27px); }
.cat-entry.cat-credit .cat-e-body p{ color:var(--ink-soft); }
.cat-entry.pending .cat-e-meta-2{ color:var(--red-dark); }
@media (max-width:900px){
.cat-groupmark{ gap:var(--s3); margin-top:var(--s7); }
.cat-grouphead, .cat-groupmark p{ grid-column:1 / -1; }
}
/* ===========================================================================
17. ART DIRECTION PASS
The structure was right and the page was quiet. This layer gives the site a
cover, a spine and chapters, and hands the visual work back to the work
itself. Nothing decorative is introduced: every new image on these pages is
a real piece from the portfolio at its own proportions.
=========================================================================== */
/* --- 17.1 the header strip ---------------------------------------------- */
/* Was a bare utility row. Now it carries the name, the discipline and the
place, so the first thing on screen already answers "who, what, where". */
.navpaper{ position:relative; }
.nv{ gap:var(--s5); }
.nvid{ display:flex; align-items:center; gap:var(--s3); min-width:0; }
.nvid-rule{ width:1px; height:26px; background:var(--line); flex:0 0 auto; }
.nvname{
font-family:var(--ui); font-size:12.5px; font-weight:700;
letter-spacing:0.17em; text-transform:uppercase; color:var(--ink);
text-decoration:none; white-space:nowrap;
}
.nvname:hover{ color:var(--red-dark); }
.nvrole{
font-family:var(--ui); font-size:11px; font-weight:500;
letter-spacing:0.13em; text-transform:uppercase; color:var(--ink-soft);
white-space:nowrap;
}
.lks{ gap:2px; }
.lks a{
position:relative; letter-spacing:0.1em; font-size:12.5px; font-weight:600;
text-transform:uppercase;
}
@media (max-width:1100px){ .nvid-rule, .nvrole{ display:none; } }
@media (max-width:620px){ .nvname{ display:none; } }
/* --- 17.2 the masthead: the cover of the portfolio ---------------------- */
.mast{ padding-block:var(--s8) var(--s7); }
.mast-top{
display:flex; justify-content:space-between; gap:var(--s4); flex-wrap:wrap;
border-top:2px solid var(--red); padding-top:var(--s4);
}
.mast-top span{
font-family:var(--ui); font-size:11.5px; font-weight:600;
letter-spacing:0.18em; text-transform:uppercase; color:var(--red-dark);
}
.mast-top span + span{ color:var(--ink-soft); }
.mast-name{
font-family:var(--display); color:var(--ink);
font-size:clamp(52px, 13.2vw, 196px);
line-height:0.84; letter-spacing:-0.045em;
margin:var(--s5) 0 0; text-wrap:balance;
}
.mast-disc{
display:flex; justify-content:space-between; gap:var(--s4); flex-wrap:wrap;
border-top:1px solid var(--line); margin-top:var(--s5); padding-top:var(--s4);
}
.mast-disc span{
font-family:var(--ui); font-size:clamp(11.5px,1.05vw,13.5px); font-weight:600;
letter-spacing:0.16em; text-transform:uppercase; color:var(--ink-soft);
}
.mast-body{
display:grid; grid-template-columns:repeat(12,minmax(0,1fr));
gap:var(--gutter); margin-top:var(--s7); align-items:end;
}
.mast-claim{
grid-column:1 / 8; margin:0;
font-family:var(--display); color:var(--red-dark);
font-size:clamp(30px, 4.3vw, 62px); line-height:1.06; letter-spacing:-0.025em;
text-wrap:balance;
}
.mast-side{ grid-column:9 / -1; display:flex; flex-direction:column; gap:var(--s4); }
.mast-side img{ display:block; width:100%; height:auto; border-radius:var(--r-tight); }
.mast-side p{
margin:0; font-family:var(--ui); font-size:14.5px; line-height:1.6; color:var(--ink-soft);
}
.mast-cta{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--s3); margin-top:var(--s7); }
@media (max-width:900px){
.mast{ padding-block:var(--s6) var(--s6); }
.mast-claim, .mast-side{ grid-column:1 / -1; }
.mast-body{ margin-top:var(--s6); gap:var(--s5); }
.mast-side{ order:-1; }
}
/* --- 17.3 the brand marquee --------------------------------------------- */
/* Breadth, stated in one glance instead of a paragraph. Two identical tracks
so the loop is seamless; 72s is slow enough to read and ignore. */
.marq{
border-top:1px solid var(--line); border-bottom:1px solid var(--line);
overflow:hidden; padding-block:var(--s4); margin-block:var(--s7);
--mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
-webkit-mask-image:var(--mask); mask-image:var(--mask);
}
.marq-in{ display:flex; width:max-content; }
.marq-t{
display:flex; align-items:center; flex:0 0 auto;
padding-right:var(--s6);
}
.marq-t span{
font-family:var(--ui); font-size:clamp(13px,1.3vw,16px); font-weight:600;
letter-spacing:0.17em; text-transform:uppercase; color:var(--ink);
white-space:nowrap;
}
.marq-t i{ font-style:normal; color:var(--red); padding:0 var(--s5); }
@media (prefers-reduced-motion:no-preference){
.marq-in{ animation:marq 72s linear infinite; }
.marq:hover .marq-in{ animation-play-state:paused; }
}
@keyframes marq{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion:reduce){
.marq{ overflow-x:auto; }
.marq-in{ animation:none; }
.marq-t + .marq-t{ display:none; }
}
/* --- 17.4 chapters ------------------------------------------------------- */
/* A section opener that reads as a chapter plate: number, label, rule, then
the statement. Replaces the flat heading row. */
.chap{ margin-bottom:var(--s7); }
.chap-rule{
display:flex; align-items:center; gap:var(--s4);
border-top:2px solid var(--red); padding-top:var(--s3);
}
.chap-n{
font-family:var(--ui); font-size:12px; font-weight:700; letter-spacing:0.16em;
color:var(--red); font-variant-numeric:tabular-nums; flex:0 0 auto;
}
.chap-l{
font-family:var(--ui); font-size:12px; font-weight:600; letter-spacing:0.18em;
text-transform:uppercase; color:var(--ink); flex:0 0 auto;
}
.chap-note{
margin-left:auto; font-family:var(--ui); font-size:11.5px; font-weight:500;
letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-soft);
text-align:right;
}
.chap-h{
font-family:var(--display); color:var(--ink); margin:var(--s5) 0 0;
font-size:clamp(28px,3.6vw,52px); line-height:1.06; letter-spacing:-0.024em;
max-width:19ch; text-wrap:balance;
}
.chap-h em{ font-style:normal; color:var(--red-dark); }
.chap-sub{ margin:var(--s4) 0 0; max-width:56ch; color:var(--ink-soft); font-size:16.5px; }
@media (max-width:640px){
.chap-note{ margin-left:0; width:100%; text-align:left; padding-top:2px; }
.chap-rule{ flex-wrap:wrap; gap:var(--s3); }
}
/* --- 17.5 proof: one number carries, the rest support -------------------- */
.proof{
display:grid; grid-template-columns:repeat(12,minmax(0,1fr));
gap:var(--s6) var(--gutter); align-items:end;
border-top:1px solid var(--line); padding-top:var(--s6);
}
.proof-big{ grid-column:1 / 6; }
.proof-big .p-v{
display:block; font-family:var(--display); color:var(--ink);
font-size:clamp(76px,11vw,168px); line-height:0.84; letter-spacing:-0.045em;
}
.proof-big .p-l{
display:block; margin-top:var(--s4);
font-family:var(--ui); font-size:13px; font-weight:600; letter-spacing:0.14em;
text-transform:uppercase; color:var(--red-dark); max-width:20ch;
}
.proof-big .p-n{ display:block; margin-top:var(--s3); font-size:15.5px; line-height:1.6; color:var(--ink-soft); max-width:34ch; }
.proof-rest{ grid-column:7 / -1; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--s5) var(--s5); }
.proof-rest > div{ border-top:1px solid var(--line-soft); padding-top:var(--s4); }
.proof-rest .p-v{
display:block; font-family:var(--display); color:var(--ink);
font-size:clamp(30px,3.1vw,46px); line-height:1; letter-spacing:-0.028em;
}
.proof-rest .p-l{
display:block; margin-top:var(--s3);
font-family:var(--ui); font-size:11.5px; font-weight:600; letter-spacing:0.1em;
text-transform:uppercase; color:var(--ink-soft); line-height:1.45;
}
@media (max-width:900px){
.proof-big, .proof-rest{ grid-column:1 / -1; }
.proof-rest{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:420px){ .proof-rest{ grid-template-columns:1fr; } }
/* --- 17.6 how I work: four principles, each with its own evidence -------- */
.prins{ display:flex; flex-direction:column; }
.prin{
display:grid; grid-template-columns:repeat(12,minmax(0,1fr));
gap:var(--s4) var(--gutter); align-items:start;
border-top:1px solid var(--line); padding-block:var(--s7);
}
.prin-n{
grid-column:span 1;
font-family:var(--ui); font-size:12px; font-weight:700; letter-spacing:0.16em;
color:var(--red); font-variant-numeric:tabular-nums; padding-top:9px;
}
.prin-t{ grid-column:2 / 6; }
.prin-t h3{
margin:0; font-family:var(--display); color:var(--ink);
font-size:clamp(25px,2.6vw,38px); line-height:1.06; letter-spacing:-0.022em;
}
.prin-t p{ margin:var(--s3) 0 0; font-size:16.5px; line-height:1.62; max-width:34ch; }
.prin-t .prin-skills{
margin-top:var(--s4); font-family:var(--ui); font-size:12px; font-weight:500;
letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-soft); line-height:1.8;
}
.prin-t .prin-skills i{ font-style:normal; color:var(--line); padding:0 3px; }
.prin-ev{ grid-column:7 / -1; display:flex; gap:var(--s4); align-items:flex-end; flex-wrap:wrap; }
.prin-ev figure{ margin:0; }
.prin-ev img{ display:block; height:168px; width:auto; max-width:100%; border-radius:var(--r-tight); }
.prin-ev figcaption{
margin-top:var(--s3); font-family:var(--ui); font-size:11px; letter-spacing:0.06em;
color:var(--ink-soft);
}
@media (max-width:900px){
.prin{ padding-block:var(--s6); }
.prin-n{ grid-column:1 / -1; padding-top:0; }
.prin-t, .prin-ev{ grid-column:1 / -1; }
.prin-ev{ margin-top:var(--s4); gap:var(--s3); }
.prin-ev img{ height:124px; }
}
@media (max-width:460px){ .prin-ev img{ height:102px; } }
/* --- 17.7 the featured case study --------------------------------------- */
.feat{ border-top:2px solid var(--red); padding-top:var(--s5); }
.feat-lead img{ display:block; width:100%; height:auto; border-radius:var(--r-card); }
.feat-head{
display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:var(--s4) var(--gutter);
align-items:end; margin-bottom:var(--s6);
}
.feat-name{
grid-column:1 / 8; margin:0;
font-family:var(--display); color:var(--ink);
font-size:clamp(46px,7.4vw,112px); line-height:0.9; letter-spacing:-0.036em;
}
.feat-meta{ grid-column:9 / -1; }
.feat-meta p{
margin:0; font-family:var(--ui); font-size:11.5px; font-weight:600;
letter-spacing:0.12em; text-transform:uppercase; color:var(--ink-soft); line-height:1.8;
}
.feat-body{
display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:var(--s6) var(--gutter);
margin-top:var(--s7);
}
.feat-body > section{ grid-column:span 4; border-top:1px solid var(--line); padding-top:var(--s4); }
.feat-body h3{
margin:0 0 var(--s3); font-family:var(--ui); font-size:11.5px; font-weight:600;
letter-spacing:0.14em; text-transform:uppercase; color:var(--red-dark);
}
.feat-body p{ margin:0 0 var(--s3); font-size:16.5px; line-height:1.62; }
.feat-docs{
display:flex; flex-wrap:wrap; gap:var(--s3) var(--s5); margin-top:var(--s6);
border-top:1px solid var(--line-soft); padding-top:var(--s4);
}
.feat-docs b{
font-family:var(--ui); font-size:11px; font-weight:600; letter-spacing:0.14em;
text-transform:uppercase; color:var(--ink-soft); width:100%;
}
.feat-docs span{
font-family:var(--ui); font-size:14.5px; color:var(--ink);
}
.feat-docs span i{ font-style:normal; color:var(--red-dark); font-weight:600; font-size:12px; letter-spacing:0.06em; }
@media (max-width:900px){
.feat-name{ grid-column:1 / -1; }
.feat-meta{ grid-column:1 / -1; }
.feat-body > section{ grid-column:1 / -1; }
}
/* --- 17.8 the other three, smaller but not small ------------------------ */
.other{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:var(--gutter); }
.oth{ border-top:1px solid var(--line); padding-top:var(--s5); }
.oth-n{
font-family:var(--ui); font-size:12px; font-weight:700; letter-spacing:0.16em;
color:var(--red); font-variant-numeric:tabular-nums;
}
.oth h3{
margin:var(--s3) 0 0; font-family:var(--display); color:var(--ink);
font-size:clamp(27px,2.8vw,40px); line-height:1.04; letter-spacing:-0.022em;
}
.oth .entry-cap{ margin-top:var(--s3); }
.oth p.oth-d{ margin:var(--s4) 0 0; font-size:16px; line-height:1.6; }
.oth-figs{ display:flex; flex-wrap:wrap; gap:var(--s4) var(--s6); margin-top:var(--s5); }
.oth-ev{ margin-top:var(--s5); display:flex; gap:var(--s3); align-items:flex-end; flex-wrap:wrap; }
.oth-ev img{ display:block; height:140px; width:auto; max-width:100%; border-radius:var(--r-tight); }
@media (max-width:900px){ .oth-ev img{ height:116px; } }
/* --- 17.9 the signature ending ------------------------------------------ */
.close-mail{
font-size:clamp(26px,5.2vw,74px); line-height:1.02; letter-spacing:-0.03em;
border-bottom-width:2px; padding-bottom:6px; min-height:0;
display:inline-block; align-items:initial;
}
@media (prefers-reduced-motion:no-preference){
.close-mail{ transition:color .22s ease, border-color .22s ease, letter-spacing .22s ease; }
.close-mail:hover{ letter-spacing:-0.018em; }
}
.close-h{ font-size:clamp(34px,5.6vw,80px); max-width:14ch; }
.close-sign{
display:flex; justify-content:space-between; gap:var(--s4); flex-wrap:wrap;
border-top:1px solid var(--line); margin-top:var(--s7); padding-top:var(--s4);
}
.close-sign span{
font-family:var(--ui); font-size:11.5px; font-weight:600; letter-spacing:0.16em;
text-transform:uppercase; color:var(--ink-soft);
}
/* --- 17.10 motion, kept to five things ---------------------------------- */
@media (prefers-reduced-motion:no-preference){
.lks a::after{
content:''; position:absolute; left:11px; right:11px; bottom:5px; height:1px;
background:currentColor; transform:scaleX(0); transform-origin:left;
transition:transform .22s ease;
}
.lks a:hover::after{ transform:scaleX(1); }
.lks a[aria-current="page"]::after{ display:none; }
.workcard img, .oth-ev img, .prin-ev img{ transition:transform .4s cubic-bezier(.2,.6,.2,1); }
.workcard:hover img{ transform:scale(1.014); }
.btn .arw, .btn-text .arw{ transition:transform .2s ease; display:inline-block; }
.btn:hover .arw, .btn-text:hover .arw{ transform:translateX(3px); }
}
/* --- 17.11 documents written for a project are their own evidence -------- */
.cat-e-docs{
display:block; margin-top:var(--s3);
font-family:var(--ui); font-size:12px; line-height:1.7; color:var(--ink-soft);
}
/* --- 17.12 tap targets on the new elements ------------------------------ */
/* The wordmark and the signature email are both links people will tap. */
.nvname{ min-height:44px; display:inline-flex; align-items:center; }
.close-mail{ padding-top:6px; padding-bottom:10px; }
/* --- 17.13 corrections after rendering ---------------------------------- */
/* The masthead's left column was bottom-aligned against a tall portrait, which
opened a hole above the claim. The claim now starts at the top and the
buttons close the column, so both sides fill. */
.mast-body{ align-items:start; }
.mast-body .mast-cta{ margin-top:var(--s7); }
.mast-claim{ margin-top:-0.12em; }
/* The mask was set through a custom property and was not being applied, so the
marquee ran hard into both edges. Declared directly. */
.marq{
-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%);
mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%);
}
/* Three pieces of evidence have to fit one row beside the text. */
.prin-ev img{ height:150px; }
@media (max-width:900px){ .prin-ev img{ height:120px; } }
/* A middot must never start a line on its own. */
.prin-skills span{ white-space:nowrap; }
/* The outcome column is the shortest of the three, which left a gap before the
numbers. */
.feat-body{ margin-top:var(--s6); }
.feat .figs{ margin-top:var(--s6) !important; }
.mast-claim{ grid-column:auto; }
@media (max-width:900px){ .mast-body > div:first-child{ grid-column:1 / -1 !important; } }
/* The three columns were stretching to the tallest, so the rule below them sat
a long way under the shortest two. */
.feat-body{ align-items:start; }
.feat .figs{ margin-top:var(--s5) !important; }
/* --- 17.14 very narrow viewports ---------------------------------------- */
/* A 12-column grid keeps its 11 gutters even when every child spans the full
width, and at 32px each that is 352px of gap before any content. Below the
small-phone breakpoint the twelve-column grids collapse to one track. */
@media (max-width:600px){
.about-card, .mast-body, .feat-head, .feat-body, .entry-head, .foot-grid,
.cat-entry, .cat-groupmark, .prin, .textcol, .other, .proof, .feature,
.projects, .ev{
grid-template-columns:minmax(0,1fr);
}
.about-card > *, .mast-body > *, .feat-head > *, .feat-body > *,
.entry-head > *, .foot-grid > *, .cat-entry > *, .cat-groupmark > *,
.prin > *, .textcol > *, .other > *, .proof > *, .feature > *,
.projects > *, .ev > *{
grid-column:1 / -1 !important;
}
.ev .off{ margin-left:0; }
}
/* --- 17.15 fixed strip height vs max-width ------------------------------ */
/* A fixed height plus max-width:100% squashes anything wider than the strip —
on a 390px phone the 562x133 Uravu banner was being distorted. Constraining
with max-height and max-width instead lets whichever edge binds do the work
and the ratio is always the file's own. */
.cat-sheet img,
.cat-entry.deep .cat-sheet img,
.prin-ev img,
.oth-ev img{
height:auto; width:auto; max-width:100%;
}
.cat-sheet img{ max-height:var(--sh,132px); }
.cat-sheet .big{ max-height:188px; }
.cat-entry.deep .cat-sheet img{ max-height:188px; }
.prin-ev img{ max-height:150px; }
.oth-ev img{ max-height:140px; }
@media (max-width:900px){
.cat-sheet img, .cat-entry.deep .cat-sheet img{ max-height:116px; }
.prin-ev img{ max-height:120px; }
.oth-ev img{ max-height:116px; }
}
@media (max-width:480px){
.cat-sheet img, .cat-entry.deep .cat-sheet img{ max-height:96px; }
}
@media (max-width:460px){ .prin-ev img{ max-height:102px; } }
/* --- 17.16 the claim steps back from the name --------------------------- */
/* At 62px the red serif claim carried nearly as much weight as the 158px name
and was the largest red mass on the page. Dropping it to ~46px restores the
name as the dominant moment and cuts the red area by about a third. Colour
and face are unchanged: this is still the editorial statement. */
.mast-claim{ font-size:clamp(25px, 3.3vw, 46px); line-height:1.12; max-width:none; }
/* The left column now ends well above the image column. Rather than fill the
gap, stretch the column and let the buttons settle on the same baseline as
the note beside them. Composition, not content. */
@media (min-width:901px){
.mast-body{ align-items:stretch; }
.mast-body > div:first-child{ display:flex; flex-direction:column; }
.mast-body .mast-cta{ margin-top:auto; padding-top:var(--s7); }
}
/* ===========================================================================
18. ART DIRECTION II — hierarchy, graphic language, information boxes
The build was clean but under-designed: five type levels that looked like
three, a campaign image sitting inside the identity block, and metadata
competing with headings. This section rebuilds the scale, simplifies the
header, and introduces a small set of graphic components that each carry
information rather than decoration.
=========================================================================== */
/* --- 18.1 the five levels, made perceptible ----------------------------- */
/* L1 identity/page title · L2 section heading · L3 project/statement
L4 lead/supporting · L5 label/metadata. Each level differs in at least
three of: size, weight, colour, letter-spacing, line-height. */
:root{
--l1: clamp(42px, 7.2vw, 104px);
--l2: clamp(28px, 3.1vw, 44px);
--l3: clamp(22px, 2.2vw, 32px);
--l4: clamp(16.5px, 1.3vw, 18.5px);
--l5: 11px;
}
/* L1 — the name, and every page title. Was 196px, which made everything
below it look like a caption. */
.mast-name, .page-title{
font-size:var(--l1); line-height:0.92; letter-spacing:-0.038em;
color:var(--ink); margin:var(--s4) 0 0;
}
/* L2 — section headings */
.chap-h, .close-h{
font-size:var(--l2); line-height:1.1; letter-spacing:-0.022em;
max-width:30ch; /* was 19ch, which forced three-line wraps */
}
/* L3 — project names and editorial statements */
.workcard h3, .oth h3, .prin-t h3, .cat-e-name{
font-size:var(--l3); line-height:1.14; letter-spacing:-0.018em;
}
.feat-name{ font-size:clamp(34px,4.6vw,66px); line-height:0.98; letter-spacing:-0.03em; }
/* L4 — leads and supporting sentences */
.page-sub, .chap-sub, .close-avail{
font-size:var(--l4); line-height:1.62; color:var(--ink-soft); max-width:58ch;
}
.close-avail{ color:var(--ink); }
/* L5 — labels and metadata. One treatment, used everywhere, never larger. */
.t-meta, .chap-l, .chap-note, .entry-cap, .cat-e-meta, .fig-l, .foot-h,
.close-label, .prin-skills, .cat-e-count, .cat-e-none, .feat-docs b{
font-size:var(--l5); letter-spacing:0.14em; font-weight:600;
text-transform:uppercase;
}
/* a label is quiet by default; red is reserved for the ones that matter */
.chap-note, .entry-cap, .cat-e-meta, .fig-l, .prin-skills{ color:var(--ink-soft); }
/* --- 18.2 header: navigation first -------------------------------------- */
/* Was monogram + wordmark + role + location + nav + three icon buttons, all
at once. Role and location moved to the masthead below, where they belong;
the icons live in the closing block and the footer already. */
.nvrole, .nvid-rule{ display:none !important; }
.nv{ gap:var(--s4); }
.nvid{ gap:var(--s3); }
.nvname{ font-size:12px; letter-spacing:0.18em; font-weight:700; }
.nv .icons{ display:none; }
.lks{ gap:0; margin-left:auto; }
.lks a{ font-size:11.5px; letter-spacing:0.13em; padding-inline:13px; }
/* résumé sits in the navigation, because it is the thing recruiters want */
.nv .nav-cv{
margin-left:var(--s3); flex:0 0 auto;
font-family:var(--ui); font-size:11px; font-weight:600; letter-spacing:0.13em;
text-transform:uppercase; color:var(--red-dark); text-decoration:none;
border:1px solid var(--line); border-radius:var(--r-pill);
padding:9px 15px; min-height:40px; display:inline-flex; align-items:center;
white-space:nowrap; transition:background .16s ease, color .16s ease, border-color .16s ease;
}
.nv .nav-cv:hover{ background:var(--red); border-color:var(--red); color:var(--cream-light); }
@media (max-width:760px){
.nvname{ display:inline-flex; font-size:11px; letter-spacing:0.14em; }
.lks a{ padding-inline:9px; font-size:11px; }
.nv .nav-cv{ padding:8px 11px; margin-left:var(--s2); }
}
@media (max-width:430px){
.nvname{ display:none; }
.lks a{ padding-inline:7px; }
}
/* --- 18.3 the chapter plate becomes a designed object ------------------- */
/* A boxed index number, the label, a rule that runs out to a right-hand note.
The number is an index marker, not ornament: it tells you where you are in
a sequence of six. */
.chap-rule{
display:flex; align-items:center; gap:var(--s3);
border-top:0; padding-top:0;
}
.chap-n{
flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center;
min-width:30px; height:24px; padding:0 7px;
border:1px solid var(--red); border-radius:4px;
font-size:11px; font-weight:700; letter-spacing:0.08em; color:var(--red-dark);
font-variant-numeric:tabular-nums;
}
.chap-l{ flex:0 0 auto; color:var(--ink); font-size:11.5px; letter-spacing:0.18em; }
.chap-rule::after{
content:''; flex:1 1 auto; height:1px; background:var(--line);
}
.chap-note{ flex:0 0 auto; margin-left:0; color:var(--ink-soft); }
.chap-h{ margin-top:var(--s5); }
.chap-sub{ margin-top:var(--s4); }
.chap{ margin-bottom:var(--s7); }
@media (max-width:700px){
.chap-rule{ flex-wrap:nowrap; }
.chap-note{ display:none; } /* the note is supporting; drop it, don't wrap it */
}
/* --- 18.4 the information box ------------------------------------------- */
/* A design-system component, not a SaaS card: hairline box, a red label row,
label/value pairs on a tight baseline. Used for capabilities, project
specs and archive records. */
.spec{
border:1px solid var(--line); border-radius:var(--r-tight);
padding:var(--s5); background:transparent;
}
.spec-h{
display:flex; align-items:center; gap:var(--s3);
font-family:var(--ui); font-size:10.5px; font-weight:700; letter-spacing:0.18em;
text-transform:uppercase; color:var(--red-dark);
margin:0 0 var(--s4);
}
.spec-h::after{ content:''; flex:1 1 auto; height:1px; background:var(--line); }
.spec dl{ margin:0; display:grid; grid-template-columns:minmax(0,88px) minmax(0,1fr); gap:var(--s3) var(--s4); }
.spec dt{
font-family:var(--ui); font-size:10px; font-weight:600; letter-spacing:0.14em;
text-transform:uppercase; color:var(--ink-soft); margin:2px 0 0;
}
.spec dd{ margin:0; font-family:var(--ui); font-size:14.5px; line-height:1.45; color:var(--ink); }
/* the list variant: one column of capabilities, each on its own baseline */
.spec ul{ list-style:none; margin:0; padding:0; }
.spec ul li{
font-family:var(--ui); font-size:15px; line-height:1.5; color:var(--ink);
padding:7px 0; border-top:1px solid var(--line-soft);
}
.spec ul li:first-child{ border-top:0; padding-top:0; }
.spec ul li span{
display:block; font-size:10px; font-weight:600; letter-spacing:0.12em;
text-transform:uppercase; color:var(--ink-soft); margin-top:2px;
}
/* --- 18.5 masthead: identity, then positioning, then capabilities ------- */
/* The Repose campaign image is gone from the header. Repose is evidence; it
earns its scale in Selected Work, not in the introduction. */
.mast{ padding-block:var(--s7) var(--s7); }
.mast-top{ border-top:2px solid var(--red); padding-top:var(--s3); }
.mast-top span{ font-size:var(--l5); letter-spacing:0.16em; }
.mast-name{ margin-top:var(--s4); }
.mast-role{
font-family:var(--ui); font-size:clamp(13px,1.35vw,16px); font-weight:600;
letter-spacing:0.2em; text-transform:uppercase; color:var(--red-dark);
margin:var(--s4) 0 0;
}
.mast-disc{ display:none; } /* folded into .mast-role and the capability box */
.mast-body{
border-top:1px solid var(--line); margin-top:var(--s6); padding-top:var(--s6);
align-items:start;
}
.mast-claim{
font-size:clamp(23px,2.5vw,36px); line-height:1.16; letter-spacing:-0.018em;
color:var(--ink); max-width:19ch; margin:0;
}
.mast-claim b{ color:var(--red-dark); font-weight:400; }
.mast-note{
font-family:var(--ui); font-size:var(--l4); line-height:1.6; color:var(--ink-soft);
margin:var(--s5) 0 0; max-width:42ch;
}
.mast-side{ grid-column:8 / -1; }
.mast-cta{ margin-top:var(--s6); padding-top:0; gap:var(--s3); }
@media (max-width:900px){
.mast-side{ order:0; } /* the box follows the words, never leads */
.mast-claim{ max-width:none; }
}
/* --- 18.6 work cards: caption belongs to its image ---------------------- */
/* Grid rows were stretching to the tallest card, so a short card's caption
floated hundreds of pixels above the next row. Each card is now its own
column and the text sits directly under its picture. */
.ev > .workcard{ display:flex; flex-direction:column; align-self:start; }
.workcard h3{ margin-top:var(--s4); }
.workcard .entry-cap{
margin-top:6px; font-size:var(--l5); letter-spacing:0.12em; color:var(--ink-soft);
}
.workcard .wc-n{
font-family:var(--ui); font-size:10.5px; font-weight:700; letter-spacing:0.14em;
color:var(--red); font-variant-numeric:tabular-nums; margin-top:var(--s4);
display:block;
}
.workcard .wc-n + h3{ margin-top:4px; }
/* --- 18.7 proof: one number leads, three support ----------------------- */
.proof{ align-items:start; gap:var(--s7) var(--gutter); }
.proof-big .p-v{ font-size:clamp(58px,7.4vw,112px); line-height:0.9; }
.proof-big .p-l{
margin-top:var(--s3); font-size:var(--l5); letter-spacing:0.14em;
color:var(--red-dark); max-width:24ch;
}
.proof-big .p-n{ margin-top:var(--s3); font-size:15px; line-height:1.6; color:var(--ink-soft); max-width:36ch; }
.proof-rest{ gap:var(--s5) var(--s5); }
.proof-rest .p-v{ font-size:clamp(26px,2.6vw,38px); }
.proof-rest .p-l{ margin-top:6px; font-size:var(--l5); letter-spacing:0.12em; }
/* --- 18.8 How I work as a visual framework ----------------------------- */
/* Four stages read left to right as a sequence, with a connector between
them. The connector exists to make one point: she covers the whole line
from strategy through to execution, which is the claim the section makes. */
.prin{ position:relative; }
.prin-n{
grid-column:span 1; padding-top:4px;
display:flex; flex-direction:column; align-items:flex-start; gap:6px;
}
.prin-n b{
display:inline-flex; align-items:center; justify-content:center;
width:28px; height:28px; border-radius:999px;
border:1px solid var(--red); color:var(--red-dark);
font-family:var(--ui); font-size:11px; font-weight:700; letter-spacing:0.04em;
font-variant-numeric:tabular-nums; background:var(--cream-light);
}
.prin-n i{
display:block; width:1px; flex:1 1 auto; min-height:34px;
background:linear-gradient(var(--line), transparent);
margin-left:13px;
}
.prin:last-child .prin-n i{ display:none; }
.prin-t h3{ margin:0; }
.prin-t p{ margin-top:var(--s3); font-size:16px; line-height:1.6; max-width:34ch; }
.prin-skills{
margin-top:var(--s4); display:flex; flex-wrap:wrap; gap:5px 0;
line-height:1.6; letter-spacing:0.1em; font-size:10.5px;
}
/* a separator must never begin a line */
.prin-skills span{ white-space:nowrap; }
.prin-skills span::after{ content:' · '; color:var(--line); }
.prin-skills span:last-child::after{ content:''; }
/* --- 18.9 archive record cards ----------------------------------------- */
/* Four near-identical small-caps lines became one scannable block: the
index number sits with the name, and year/client/type read as a spec row. */
.cat-e-head{ position:relative; }
.cat-e-n{
grid-column:span 1; padding-top:6px;
font-size:11px; font-weight:700; letter-spacing:0.1em; color:var(--red);
}
.cat-e-name{ margin:0; }
.cat-e-meta-1{
margin-top:var(--s3); display:flex; flex-wrap:wrap; gap:0 var(--s3);
font-size:10.5px; letter-spacing:0.13em; color:var(--ink);
}
.cat-e-meta-1 .yr{ color:var(--red-dark); font-weight:700; }
.cat-e-meta-2{
margin-top:5px; font-size:10px; letter-spacing:0.11em; color:var(--ink-soft);
}
.cat-e-count{
margin-top:var(--s4); padding-top:var(--s3);
border-top:1px solid var(--line-soft);
font-size:10px; letter-spacing:0.12em; color:var(--ink-soft);
}
.cat-e-docs{ margin-top:5px; font-size:12px; letter-spacing:0; text-transform:none; color:var(--ink-soft); }
/* --- 18.10 closing signature ------------------------------------------- */
.close-h{ margin-top:var(--s5); }
.close-avail{ margin-top:var(--s5); font-size:var(--l4); }
.close-sub{ margin-top:var(--s3); font-size:15.5px; color:var(--ink-soft); }
.close-mail{ font-size:clamp(24px,4.2vw,58px); margin-top:var(--s6); }
.close-sign span{ font-size:var(--l5); letter-spacing:0.14em; }
/* --- 18.11 footer: a signature, not boilerplate ------------------------ */
.foot-base{ border-top:1px solid var(--line-soft); }
.foot-name{ font-size:clamp(26px,2.8vw,40px); }
footer .fnote{ font-size:var(--l5); letter-spacing:0.14em; color:var(--ink-soft); }
/* --- 18.12 corrections after rendering --------------------------------- */
/* The rule was landing after the note instead of between label and note. */
.chap-rule::after{ order:2; }
.chap-note{ order:3; margin-left:0; padding-left:var(--s3); }
/* The claim was breaking mid-phrase across three lines. */
.mast-claim{ max-width:24ch; }
/* The marquee was cutting the first and last item cleanly in half, which
reads as a clipping bug rather than a loop. A wider fade makes it a fade. */
.marq{
-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 13%,#000 87%,transparent 100%);
mask-image:linear-gradient(90deg,transparent 0,#000 13%,#000 87%,transparent 100%);
}
/* --- 18.13 skill separators and the framework connector ---------------- */
/* Flex with a zero column-gap swallowed the separator between adjacent
terms. Plain inline text keeps the middots visible, and nowrap on each
term still stops a phrase breaking mid-way. */
.prin-skills{ display:block; }
.prin-skills span{ display:inline; white-space:nowrap; }
/* The connector only stubbed because the number column was not stretching
to the row, so there was nothing for it to run down. */
.prin{ align-items:stretch; }
.prin-t, .prin-ev{ align-self:start; }
.prin-n i{ min-height:0; }
/* The nowrap spans made the skill line un-shrinkable, so it overflowed the
text column into the evidence images. The separator is attached to the
preceding term by ::after, so a middot can never begin a line anyway and
nowrap is unnecessary. */
.prin-skills span{ white-space:normal; }
.prin-t{ min-width:0; }
.prin-skills{ overflow-wrap:break-word; }
/* --- 18.14 spec box: rows, not a two-column grid of pairs --------------- */
/* Each label/value pair is its own row on a hairline, so values have the
full width and stop wrapping two words at a time. */
.spec dl{ display:block; }
.spec dl > div{
display:grid; grid-template-columns:minmax(0,82px) minmax(0,1fr);
gap:var(--s4); align-items:baseline;
padding:8px 0; border-top:1px solid var(--line-soft);
}
.spec dl > div:first-child{ border-top:0; padding-top:0; }
.spec dd{ font-size:14px; line-height:1.45; }
/* The name must stay on the top line of the row; the box can be as tall as
it needs to be without dragging the project title down with it. */
.feat-head{ align-items:start; }
.feat-name{ margin-top:-0.06em; }
@media (max-width:560px){
.spec dl > div{ grid-template-columns:1fr; gap:2px; }
}
/* --- 18.15 tap targets and a card that spilled its own box ------------- */
.nv .nav-cv{ min-height:44px; }
.close-mail{ padding-bottom:12px; }
/* The fifth card's descriptor is a long comma list; at tablet width it was
wider than the card it belongs to. */
.ev > .workcard{ min-width:0; }
.workcard .entry-cap{ overflow-wrap:anywhere; }
/* --- 18.16 the evidence grid keeps twelve columns ---------------------- */
/* Every composition in .ev is authored as 12-column ranges (1/8, 7/10, …).
The old breakpoint remapped the grid to six columns at 900px and two at
560px, so those ranges addressed tracks that no longer existed: cards
collapsed to 96px and 0px wide at tablet width. The grid now stays at
twelve until the layout genuinely has to stack. */
@media (max-width:900px){
.ev{ grid-template-columns:repeat(12,minmax(0,1fr)); }
.ev .tall{ grid-column:span 3; }
.ev .std { grid-column:span 4; }
.ev .wide{ grid-column:span 6; }
.ev .full{ grid-column:span 8; }
}
@media (max-width:640px){
.ev{ grid-template-columns:minmax(0,1fr); gap:var(--s5); }
.ev > *{ grid-column:1 / -1 !important; }
.ev .off{ margin-left:0; }
}
/* ===========================================================================
19. VARIATION WITHIN ONE LANGUAGE
The previous pass gave every section the same opening: rule, boxed number,
label, then a two-line serif heading at the same left edge and the same
width. Five of those on Home and five on About read as a component demo
rather than an art-directed page. The vocabulary stays; the compositions
now differ.
=========================================================================== */
/* --- 19.1 three related chapter treatments ----------------------------- */
/* A — the full plate. One per page, at the page's most important turn. */
/* B — side: the plate holds the left column and the heading sits beside it,
which breaks the left rail and lets the statement run on one line. */
.chap--side{
display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:var(--s4) var(--gutter);
align-items:start;
}
.chap--side .chap-rule{ grid-column:1 / 4; padding-top:5px; }
.chap--side .chap-rule::after{ display:none; }
.chap--side .chap-note{ display:none; }
.chap--side .chap-h{ grid-column:4 / 12; margin:0; max-width:none; }
.chap--side .chap-sub{ grid-column:4 / 12; margin-top:var(--s4); }
@media (max-width:860px){
.chap--side{ display:block; }
.chap--side .chap-h{ margin-top:var(--s5); }
}
/* C — quiet: no box, no number. A red label on a hairline and a heading at
section-subhead scale. For the turns that support rather than announce. */
.chap--quiet .chap-n{ display:none; }
.chap--quiet .chap-rule{ border-top:1px solid var(--line); padding-top:var(--s3); }
.chap--quiet .chap-l{ color:var(--red-dark); }
.chap--quiet .chap-h{ font-size:clamp(24px,2.5vw,34px); margin-top:var(--s4); }
/* --- 19.2 the capability box as a strategy artefact --------------------- */
/* Was a fully bordered rounded card, which is the SaaS reading. Now a red
top rule, hairline rows, and a small index annotation — the way a
capability page is set in a deck. */
.mast-side .spec{
border:0; border-top:2px solid var(--red); border-radius:0;
padding:var(--s4) 0 0;
}
.mast-side .spec-h{
justify-content:space-between; margin-bottom:var(--s4);
color:var(--red-dark);
}
.mast-side .spec-h::after{ display:none; }
.mast-side .spec-h i{
font-style:normal; color:var(--ink-soft); font-size:10px; letter-spacing:0.12em;
}
.mast-side .spec ul li{ padding:9px 0; }
.mast-side .spec ul li b{
display:inline-block; min-width:22px;
font-family:var(--ui); font-size:10px; font-weight:700; letter-spacing:0.1em;
color:var(--red); font-variant-numeric:tabular-nums;
}
.mast-side .spec ul li em{
font-style:normal; font-size:15px; color:var(--ink);
}
.mast-side .spec ul li span{ margin-left:22px; }
/* Below the twelve-column desktop the box stops being a narrow sidebar and
becomes a full-width row of four — which is what the width is for. */
@media (max-width:1024px){
.mast-body{ display:block; }
.mast-side{ margin-top:var(--s7); }
.mast-side .spec ul{
display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0 var(--s5);
}
.mast-side .spec ul li{
border-top:1px solid var(--line-soft); padding-top:var(--s3);
}
.mast-side .spec ul li:first-child{ border-top:1px solid var(--line-soft); padding-top:var(--s3); }
}
@media (max-width:620px){
.mast-side .spec ul{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 var(--s4); }
}
/* --- 19.3 the flagship card carries more weight ------------------------ */
/* Five identically-treated cards said all five projects are equal. They are
not: Repose is the one with a full case study behind it. */
.workcard.is-flag .wc-n{ color:var(--red); }
.workcard.is-flag h3{ font-size:clamp(28px,2.9vw,42px); }
.workcard.is-flag .wc-tag{
display:inline-flex; align-items:center; gap:6px; margin-top:var(--s3);
font-family:var(--ui); font-size:10px; font-weight:700; letter-spacing:0.16em;
text-transform:uppercase; color:var(--red-dark);
}
.workcard.is-flag .wc-tag::before{
content:''; width:16px; height:1px; background:var(--red);
}
.workcard .wc-d{
margin-top:var(--s3); font-family:var(--ui); font-size:15px; line-height:1.55;
color:var(--ink-soft); max-width:40ch;
}
/* --- 19.4 the framework reads as a sequence, not four boxes ------------ */
/* One continuous rule runs the length of the four stages with the numbers
sitting on it, and an arrowhead closes it. The point of the device is the
direction: strategy through to execution. */
.prins{ position:relative; }
.prins::before{
content:''; position:absolute; left:13px; top:28px; bottom:34px; width:1px;
background:var(--line); z-index:0;
}
.prins::after{
content:''; position:absolute; left:9px; bottom:26px;
width:9px; height:9px; border-right:1px solid var(--red); border-bottom:1px solid var(--red);
transform:rotate(45deg); z-index:1;
}
.prin{ position:relative; z-index:1; }
.prin-n i{ display:none; }
.prin-n b{ background:var(--cream); }
@media (max-width:900px){ .prins::before, .prins::after{ display:none; } }
/* evidence stays subordinate to the principle it belongs to */
.prin-ev img{ max-height:120px; }
.prin-ev figcaption{ font-size:10px; }
@media (max-width:900px){ .prin-ev img{ max-height:104px; } }
/* --- 19.5 Leadership and Languages become supporting metadata ---------- */
/* Was a second component with its own look sitting under the framework.
Now a quiet two-row strip in the same language as the skill lines above. */
.aux{
display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:var(--s3) var(--gutter);
border-top:1px solid var(--line); margin-top:var(--s6); padding-top:var(--s4);
}
.aux dt{
grid-column:2 / 4;
font-family:var(--ui); font-size:10px; font-weight:600; letter-spacing:0.14em;
text-transform:uppercase; color:var(--ink-soft); margin:0;
}
.aux dd{
grid-column:4 / -1; margin:0;
font-family:var(--ui); font-size:12.5px; letter-spacing:0.06em; color:var(--ink-soft);
line-height:1.7;
}
.aux dd i{ font-style:normal; color:var(--line); padding:0 4px; }
@media (max-width:860px){
.aux dt{ grid-column:1 / -1; }
.aux dd{ grid-column:1 / -1; margin-bottom:var(--s3); }
}
/* ===========================================================================
20. FINAL ART DIRECTION
Three surgical changes from the whole-page review: the Archive opening
loses a band, Proof becomes evidence rather than a stat row, and the
chapter treatments stay distinguishable on a phone.
=========================================================================== */
/* --- 20.1 the archive utility row -------------------------------------- */
/* Filter, count and the route to the full contact sheet are all utilities;
they belong on one line, not three stacked bands. */
.catsheet{
margin-left:var(--s4); flex:0 0 auto;
font-family:var(--ui); font-size:11px; font-weight:600; letter-spacing:0.12em;
text-transform:uppercase; color:var(--red-dark); text-decoration:none;
min-height:44px; display:inline-flex; align-items:center;
}
.catsheet:hover{ text-decoration:underline; text-underline-offset:4px; }
.catcount{ margin-left:auto; }
@media (max-width:860px){
.catbar{ gap:0 var(--s3); }
.catcount{ margin-left:0; }
.catsheet{ margin-left:0; width:100%; }
}
/* --- 20.2 proof led by the work it describes --------------------------- */
/* The figure is totebags', so the totebags photograph carries the section
and the number annotates it. A stat row is a landing-page device; this is
evidence with a number attached. */
.proof{ grid-template-columns:repeat(12,minmax(0,1fr)); align-items:end; }
.proof-big{ grid-column:1 / 5; }
.proof-ev{ grid-column:5 / 10; margin:0; }
.proof-ev img{ display:block; width:100%; height:auto; border-radius:var(--r-tight); }
.proof-ev figcaption{
margin-top:var(--s3); font-family:var(--ui); font-size:11px; letter-spacing:0.04em;
color:var(--ink-soft);
}
.proof-rest{
grid-column:10 / -1; grid-template-columns:minmax(0,1fr);
gap:var(--s4); align-self:end;
}
@media (max-width:1024px){
.proof-big{ grid-column:1 / 6; }
.proof-ev{ grid-column:6 / -1; }
.proof-rest{ grid-column:1 / -1; grid-template-columns:repeat(3,minmax(0,1fr)); margin-top:var(--s5); }
}
@media (max-width:640px){
.proof-big, .proof-ev{ grid-column:1 / -1; }
.proof-ev{ margin-top:var(--s6); }
.proof-rest{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--s4) var(--s4); }
}
@media (max-width:420px){ .proof-rest{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
/* --- 20.3 the chapter treatments stay different on a phone ------------- */
/* Below 860px .chap--side collapsed to the same block as the others, so all
three variants looked identical exactly where the page is longest. */
@media (max-width:860px){
.chap--side .chap-h{ margin-top:var(--s4); }
.chap--side .chap-rule{ padding-bottom:var(--s3); border-bottom:1px solid var(--line-soft); }
.chap--quiet .chap-h{ font-size:clamp(21px,5.2vw,26px); }
.chap--quiet .chap-rule{ border-top-color:var(--line-soft); }
}
/* ===========================================================================
21. DENSITY, PACING AND BREATHING ROOM — final pass
The build was coherent but crowded: the next section began before the last
one had finished, every chapter announced itself with the same furniture,
and red had become a second ink. This pass edits, spaces and subordinates.
Nothing new is added.
=========================================================================== */
/* --- 21.1 a real pause between major chapters -------------------------- */
/* 96px between sections reads as a gap; it does not read as a pause. Major
chapters now get 160px at desktop, which is the difference between the eye
continuing and the eye resting. */
:root{ --pause: clamp(88px, 11vw, 168px); --pause-sm: clamp(56px, 7vw, 96px); }
.section{ padding-block:0; margin-block:var(--pause) 0; }
.section + .section{ padding-top:0; }
.section:first-of-type{ margin-top:var(--pause-sm); }
.close{ padding-block:0; margin-top:var(--pause); padding-bottom:var(--s9); }
footer{ margin-top:var(--pause); }
@media (max-width:760px){
:root{ --pause: 72px; --pause-sm: 48px; }
}
/* --- 21.2 space below a heading, before its content -------------------- */
/* A heading that sits 24px above its content is a label. One that sits 56px
above it is a chapter opening. */
.chap{ margin-bottom:var(--s8); }
.chap-h{ margin-top:var(--s5); }
.chap-sub{ margin-top:var(--s4); max-width:52ch; }
@media (max-width:760px){ .chap{ margin-bottom:var(--s7); } }
/* --- 21.3 four tiers of section opening, not three -------------------- */
/* Major keeps the number. Supporting drops it. Minor is a rule and a
heading. Utility gets no chapter treatment at all. */
.chap--quiet .chap-rule{ border-top:0; padding-top:0; }
.chap--quiet .chap-l{ color:var(--ink-soft); } /* was red on every one */
.chap--quiet .chap-rule::after{ background:var(--line-soft); }
.chap--min .chap-n, .chap--min .chap-l, .chap--min .chap-note{ display:none; }
.chap--min .chap-rule{ border-top:1px solid var(--line-soft); padding-top:0; }
.chap--min .chap-h{ margin-top:var(--s6); }
/* --- 21.4 red becomes an accent again ---------------------------------- */
/* Audit: the chapter number box, the chapter label, the section rule, every
metadata label, the capability index, the project numbers and the figure
labels were all red. That is a second ink, not an accent. Red is kept for
the chapter index, live emphasis inside copy, links and the one rule that
opens a page. */
.chap-l{ color:var(--ink); }
.prin-skills{ color:var(--ink-soft); }
.fig-l, .proof-rest .p-l{ color:var(--ink-soft); }
.cat-e-count{ color:var(--ink-soft); }
.spec dt{ color:var(--ink-soft); }
.workcard .wc-n{ color:var(--ink-soft); font-weight:600; }
.workcard.is-flag .wc-n{ color:var(--red); }
.cat-e-n{ color:var(--ink-soft); }
.aux dt{ color:var(--ink-soft); }
.foot-h{ color:var(--ink-soft); }
/* --- 21.5 metadata stops looking like a small headline ----------------- */
.entry-cap, .cat-e-meta, .chap-note, .prin-skills, .cat-e-count{
font-weight:500; letter-spacing:0.1em;
}
.chap-note{ font-size:10px; color:var(--ink-soft); }
.workcard .entry-cap{ font-size:10.5px; font-weight:500; }
/* --- 21.6 the masthead holds the first screen alone -------------------- */
/* Name, role, one statement, two actions. The capability artefact drops
below the fold so the identity zone is not asked to explain the whole
portfolio. */
.mast{ padding-block:var(--s7) 0; }
.mast-name{ margin-top:var(--s5); }
.mast-role{ margin-top:var(--s4); }
.mast-body{ margin-top:var(--s8); padding-top:var(--s7); }
.mast-claim{ font-size:clamp(22px,2.3vw,33px); }
.mast-note{ margin-top:var(--s5); }
.mast-cta{ margin-top:var(--s7); }
.mast-side{ margin-top:0; }
@media (min-width:1025px){ .mast-side .spec{ padding-top:var(--s3); } }
/* --- 21.7 the marquee is a ribbon crossing the page, not a block ------ */
.marq{
margin-block:var(--pause) 0;
padding-block:var(--s6);
border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft);
}
.marq + .section, .wrap > .marq + *{ margin-top:var(--pause); }
/* --- 21.8 Selected work: the project is the event --------------------- */
.ev{ row-gap:var(--s9); }
@media (max-width:760px){ .ev{ row-gap:var(--s8); } }
.workcard h3{ margin-top:var(--s5); }
.workcard.is-flag .wc-tag{ margin-top:var(--s4); }
.workcard .wc-d{ margin-top:var(--s4); font-size:16px; }
/* the supporting four are lighter than the flagship */
.workcard:not(.is-flag) .wc-n{ font-size:10px; }
.workcard:not(.is-flag) h3{ margin-top:var(--s4); }
/* --- 21.9 Proof is a pause, not another information block ------------- */
.proof{ align-items:start; gap:var(--s8) var(--gutter); }
.proof-big{ grid-column:1 / 4; padding-top:var(--s5); }
.proof-ev{ grid-column:5 / 11; }
.proof-ev figcaption{ margin-top:var(--s5); }
.proof-rest{
grid-column:1 / -1; grid-template-columns:repeat(3,minmax(0,1fr));
gap:var(--s5); margin-top:var(--s7);
border-top:1px solid var(--line-soft); padding-top:var(--s5);
}
.proof-rest > div{ border-top:0; padding-top:0; }
.proof-rest .p-v{ font-size:clamp(22px,2vw,30px); color:var(--ink-soft); }
.proof-rest .p-l{ font-size:10px; font-weight:500; }
@media (max-width:900px){
.proof-big{ grid-column:1 / -1; padding-top:0; }
.proof-ev{ grid-column:1 / -1; margin-top:var(--s6); }
}
/* --- 21.10 the about teaser stays quiet ------------------------------- */
.about-card{ gap:var(--s8) var(--gutter); align-items:center; }
.about-text > *:first-child{ margin-top:0; }
/* --- 21.11 Work: density increases as the reader chooses to explore ---- */
.feat{ padding-top:var(--s5); }
.feat-head{ margin-bottom:var(--s8); }
.feat-lead img{ border-radius:var(--r-card); }
.feat-body{ margin-top:var(--s8); gap:var(--s7) var(--gutter); }
.feat .figs{ margin-top:var(--s8) !important; padding-top:var(--s5); border-top:1px solid var(--line-soft); }
.feat .ev{ margin-top:var(--s8) !important; }
.feat-docs{ margin-top:var(--s8); padding-top:var(--s5); }
.feat .onward{ margin-top:var(--s8); }
/* the three supporting projects are lighter and further apart */
.other{ row-gap:var(--pause); }
.oth{ border-top:1px solid var(--line-soft); padding-top:var(--s6); }
.oth-n{ color:var(--ink-soft); font-size:10px; }
.oth h3{ margin-top:var(--s4); }
.oth .entry-cap{ margin-top:var(--s3); }
.oth p.oth-d{ margin-top:var(--s5); max-width:58ch; }
.oth-figs{ margin-top:var(--s6); }
.oth-ev{ margin-top:var(--s6); }
/* --- 21.12 About: chapter-level pauses, quieter supporting blocks ------ */
.prins{ margin-top:var(--s5); }
.prin{ padding-block:var(--s8); }
.prin-t p{ margin-top:var(--s4); }
.prin-skills{ margin-top:var(--s5); font-size:10px; line-height:1.9; }
.prins::before{ top:34px; bottom:40px; }
/* the four habits are statements with room, not cells in a grid */
.princ{ gap:var(--s8) var(--s8); }
.princ > li{ border-top:1px solid var(--line-soft); padding-top:var(--s5); }
.princ h3{ color:var(--ink-soft); }
.princ p{ margin-top:var(--s4); font-size:17px; line-height:1.6; }
/* the personal story is an editorial interruption, so it gets the most air */
.textcol > p{ font-size:17.5px; line-height:1.72; }
.textcol > p + p{ margin-top:var(--s6) !important; }
/* experience is a record; it should not compete with the story */
.crows{ margin-top:var(--s5); }
.crows .crow{ padding-block:var(--s4); }
.crows .crow b{ font-size:17px; }
.crows .crow span{ font-size:13.5px; }
.aux{ margin-top:var(--s8); padding-top:var(--s5); }
/* --- 21.13 Archive: quiet interface, rich evidence -------------------- */
.catbar{ margin-top:var(--s8); }
.cat-entry{ padding-block:var(--s8); }
.cat-sheet{ margin-top:var(--s6); }
.cat-e-body p{ font-size:15.5px; }
.cat-groupmark{ margin-top:var(--pause); }
.cat-entry.cat-credit{ padding-block:var(--s5); }
/* --- 21.14 the notice stays a notice ---------------------------------- */
.notice-in{ padding:9px var(--pad); gap:var(--s3); }
.notice p{ font-size:12.5px; }
.notice b{ font-size:10px; }
.notice button{ min-height:40px; padding:7px 13px; font-size:10px; }
@media (max-width:640px){ .notice button{ min-height:44px; } }
/* --- 21.15 the footer is a quiet ending ------------------------------- */
footer > .wrap{ padding-block:var(--s7) var(--s5); }
.foot-name{ font-size:clamp(22px,2.2vw,30px); }
.foot-col a{ font-size:14px; min-height:34px; }
.foot-base{ margin-top:var(--s5); padding-top:var(--s4); }
@media (max-width:900px){ .foot-col a{ min-height:44px; } }
/* --- 21.16 mobile gets its own breathing, not a compressed desktop ---- */
@media (max-width:760px){
.mast{ padding-block:var(--s6) 0; }
.mast-body{ margin-top:var(--s7); padding-top:var(--s6); }
.mast-cta{ margin-top:var(--s6); gap:var(--s3); }
.mast-cta .btn{ width:100%; justify-content:center; }
.ev{ row-gap:var(--s8); }
.prin{ padding-block:var(--s7); }
.princ{ gap:var(--s7); }
.cat-entry{ padding-block:var(--s7); }
.oth{ padding-top:var(--s5); }
.close{ padding-bottom:var(--s8); }
}
/* ===========================================================================
22. ALIGNMENT — ONE GRID, AND BREAKS THAT LOOK CHOSEN
The page is twelve columns with a 32px gutter inside a 1280px wrap, so at
1440 the content edge is 128 and the column starts are 128, 229, 331, 432,
533, 635, 736, 837, 939, 1040, 1141, 1243.
A nested row returns to those starts only when its track count divides
twelve AND its column-gap is exactly one gutter: n equal tracks of gap g
inside a 12-track grid of gap g share every (12/n)th column start. Several
nested rows had been authored with 16px, 24px, 48px and 64px gaps, or as
flex rows with no tracks at all, so their second and third items landed
two to sixteen pixels off the column — close enough to read as a mistake
rather than a decision. Everything in this section is that one rule
applied. Nothing moves further than one column.
Deliberately exempt, because the work decides the width and the ratio is
never cropped: .cat-sheet, .oth-ev and .prin-ev. In those rows the first
image is anchored to a column and the rest fall where their true
proportions put them. That irregularity is the evidence showing through,
and it is the same in all three places, which is what makes it a language
rather than a slip. Control and metadata runs (.catbar, .close-meta,
.foot-base, .mast-cta, .chap-rule, .onward, .cat-e-meta) are single lines
of label-and-value and stay as flex.
=========================================================================== */
/* --- 22.1 the construction banner sits on the page grid ----------------- */
/* It was a flex row: the paragraph started at 241 — on no column — and ran
983px, about 157 characters, by far the longest measure on the site. */
.notice-in{
display:grid; grid-template-columns:repeat(12,minmax(0,1fr));
column-gap:var(--gutter); row-gap:4px;
align-items:center; padding-block:10px;
}
.notice b{ grid-column:1 / 3; align-self:center; }
.notice p{ grid-column:3 / 9; flex:none; }
.notice button{ grid-column:11 / -1; justify-self:end; margin-left:0; }
@media (max-width:860px){
.notice-in{ grid-template-columns:minmax(0,1fr) auto; column-gap:var(--s5); }
.notice b{ grid-column:1 / -1; }
.notice p{ grid-column:1; }
.notice button{ grid-column:2; }
}
@media (max-width:560px){
/* The dismiss button on its own row cost 56px of a 390px first screen for
a temporary notice. It shares the label's row instead. */
.notice-in{ grid-template-columns:minmax(0,1fr) auto; row-gap:2px; }
.notice b{ grid-column:1; grid-row:1; }
.notice button{ grid-column:2; grid-row:1; justify-self:end; }
.notice p{ grid-column:1 / -1; grid-row:2; }
}
/* --- 22.2 the three quiet figures land on columns 1, 5 and 9 ------------ */
/* A 24px gap put them at 128 / 531 / 933 — two and six pixels short. */
.proof-rest{ column-gap:var(--gutter); }
@media (max-width:480px){
.proof-rest{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
/* --- 22.3 the four habits land on columns 1 and 7 ----------------------- */
/* A 64px column gap pushed the second column to 752, sixteen off column 7.
The generous row gap from the density pass stays; only the column gap
returns to the gutter. */
.princ{ gap:var(--s8) var(--gutter); }
/* --- 22.4 the Repose figures sit under the columns they belong to ------- */
/* .figs was a flex row with a 48px gap, so the numbers floated at 128 / 359
/ 572 underneath three text columns at 128 / 533 / 939. Three tracks on
the gutter put each number directly beneath its own column: the organic
growth figure under the problem, and so on down the row. */
.feat .figs{
display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
column-gap:var(--gutter); row-gap:var(--s6);
}
@media (max-width:700px){
.feat .figs{ grid-template-columns:repeat(2,minmax(0,1fr)); row-gap:var(--s5); }
}
/* --- 22.5 the supporting-project figures become a register -------------- */
/* Four tracks on the gutter sit on columns 1, 4, 7 and 10. Rows with only
two figures fill the left half and leave the right half empty, which
reads as a short register rather than as centred leftovers. */
.oth-figs{
display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
column-gap:var(--gutter); row-gap:var(--s5);
}
@media (max-width:900px){
.oth-figs{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
/* --- 22.6 the four Repose documents become a register too -------------- */
.feat-docs{
display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
column-gap:var(--gutter); row-gap:var(--s4);
}
.feat-docs b{ grid-column:1 / -1; width:auto; }
@media (max-width:900px){
.feat-docs{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
/* --- 22.7 the experience table gets real columns ----------------------- */
/* 1.3fr / 1.6fr / 1fr with a 24px gap put the role at 531 and the dates at
1021 — neither on a column. Spans of 4 / 5 / 3 put them at 128 / 533 /
1040, so the dates share a right-hand edge with the document register
and the supporting-project figures. */
.crows .crow{
grid-template-columns:repeat(12,minmax(0,1fr));
column-gap:var(--gutter);
}
.crows .crow b{ grid-column:1 / 5; }
.crows .crow span:nth-of-type(1){ grid-column:5 / 10; }
.crows .crow span:nth-of-type(2){ grid-column:10 / -1; }
@media (max-width:700px){
.crows .crow{ grid-template-columns:minmax(0,1fr); gap:2px; }
.crows .crow b,
.crows .crow span:nth-of-type(1),
.crows .crow span:nth-of-type(2){ grid-column:1; }
}
/* --- 22.8 measure ------------------------------------------------------- */
/* Two of the most-read lines on the site ran to 80 characters and the
metadata values to 141. Nothing else was outside 42–78. */
.page-sub, .close-avail{ max-width:64ch; }
.aux dd{ max-width:62ch; }
@media (max-width:640px){ .page-sub, .close-avail{ max-width:none; } }
/* ===========================================================================
23. THREE THINGS THE ALIGNMENT PROBE FOUND THAT WERE NOT ABOUT ALIGNMENT
=========================================================================== */
/* --- 23.1 the footer columns were indented off their own columns -------- */
/* A legacy `footer nav` rule in style.css put 48px of padding-left on both
.foot-col elements. The columns themselves sat correctly on 5 and 7, but
every link inside them started at 581 and 784 — on no column at all — and
the 48px ate enough of the 171px track to clip "Elsewhere" by three
pixels. The footer is the last thing on every page and it was the only
place where text was actually being cut off. */
.foot-col{ padding-left:0; padding-right:0; }
/* --- 23.2 the banner's dismiss button was under the tap floor ---------- */
/* The compact-banner rule took it to a 40px min-height. Forty is below the
44px floor the rest of the site holds to, and it is the one control a
phone user is most likely to reach for first. */
.notice button{ min-height:44px; padding:10px 14px; }
/* --- 23.3 the fourth chapter tier ------------------------------------- */
/* .chap--min existed but was never applied, and as written it hid the label
as well as the number, which would have left a recruiter with a heading
and no signpost. The four tiers now descend without ever dropping the
label:
plate number chip + label + rule + large heading + standfirst
side number + label held in the left three columns, heading beside
quiet label on a hairline, no number, medium heading
min label alone, no hairline, no number, small heading
Home runs plate / side / quiet / min from Selected work down to the About
teaser; About runs plate / quiet / side / min. The page gets quieter the
further down it goes, which is the point. */
.chap--min .chap-n, .chap--min .chap-note{ display:none; }
.chap--min .chap-l{ display:block; color:var(--ink-soft); }
.chap--min .chap-rule{ border-top:0; padding-top:0; }
.chap--min .chap-rule::after{ display:none; }
.chap--min .chap-h{
margin-top:var(--s4);
font-size:clamp(21px,2.1vw,27px);
max-width:34ch;
}
.chap--min{ margin-bottom:var(--s7); }
/* --- 23.4 a gridded register cannot carry nowrap values ---------------- */
/* Putting the figure rows on tracks exposed `white-space:nowrap` on .fig-v:
"7 handles · 4 countries" is 339px of unbreakable text and the track is
272px, so it pushed the whole Work page 46px wider than the phone. Same
class of fault as the nowrap skill lists. Inside a register the value
wraps; nowrap only ever made sense in a free-flowing flex row. */
.figs .fig-v, .oth-figs .fig-v{ white-space:normal; overflow-wrap:break-word; }
.oth-figs .fig-v{ font-size:clamp(21px,1.9vw,28px); }
@media (max-width:520px){
.oth-figs, .feat-docs{ grid-template-columns:minmax(0,1fr); }
}
@media (max-width:460px){
.feat .figs{ grid-template-columns:minmax(0,1fr); }
}
/* ===========================================================================
24. BANNERS, FLAGSHIP, DECKS, BOXES
A content-hierarchy pass. The page now opens and closes on a panel, the
flagship outranks everything else by composition rather than by label,
grouped information is boxed instead of floating, and the separate Proof
chapter is gone — its numbers sit in the opening panel where they answer
"has she done enough of this?" before the reader has to scroll.
Every nested row here keeps section 22's rule: a track count that divides
twelve and a column-gap of exactly one gutter.
=========================================================================== */
/* --- 24.1 the opening panel --------------------------------------------- */
.banner{
background:var(--cream-light);
border:1px solid var(--line);
border-top:2px solid var(--red);
border-radius:var(--r-tight);
padding:var(--s7) var(--s7) var(--s6);
margin-top:var(--s6);
}
.banner-meta{
display:flex; justify-content:space-between; gap:var(--s5); flex-wrap:wrap;
font-family:var(--ui); font-size:11.5px; font-weight:500;
letter-spacing:0.14em; text-transform:uppercase; color:var(--ink-soft);
}
.banner-meta b{ font-weight:600; color:var(--ink); }
.banner .mast-name{ margin:var(--s5) 0 0; }
.banner-role{
margin:var(--s3) 0 0;
font-family:var(--ui); font-size:13px; font-weight:600;
letter-spacing:0.2em; text-transform:uppercase; color:var(--red-dark);
}
/* The headline is the page's argument, so it is the second-largest thing after
the name and it is held to two lines: the break is in the markup for
desktop and released below 760 where two lines would be unreadable. */
.hdl{
margin:var(--s7) 0 0;
font-family:var(--display); font-weight:400;
font-size:clamp(27px, 3.5vw, 50px);
line-height:1.14; letter-spacing:-0.025em; color:var(--ink);
max-width:22ch;
}
.hdl b{ font-weight:400; color:var(--red-dark); }
.hdl br{ display:inline; }
@media (max-width:760px){ .hdl br{ display:none; } .hdl{ max-width:none; } }
.banner-note{
margin:var(--s5) 0 0; max-width:52ch;
font-size:16.5px; line-height:1.65; color:var(--ink-soft);
}
.banner-act{
display:flex; align-items:center; gap:var(--s5) var(--s6);
flex-wrap:wrap; margin-top:var(--s6);
}
/* The availability signal is a statement, not a button: a live dot, a line of
text, and a link into the closing panel. It sits beside the primary call so
the two are read together. */
.avail{
display:inline-flex; align-items:center; gap:10px;
font-family:var(--ui); font-size:13.5px; font-weight:500; color:var(--ink);
text-decoration:none; border-bottom:1px solid var(--line);
padding:10px 0; min-height:44px;
}
.avail::before{
content:''; width:7px; height:7px; border-radius:50%;
background:var(--red); flex:0 0 auto;
}
.avail:hover{ color:var(--red-dark); border-bottom-color:var(--red); }
.avail .arw{ color:var(--red-dark); }
/* --- 24.2 the proof register -------------------------------------------- */
/* Four verified numbers, quiet by design: they are the floor the rest of the
page stands on, not the headline. Four tracks land on columns 1, 4, 7, 10. */
.prf{
display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
column-gap:var(--gutter); row-gap:var(--s5);
margin-top:var(--s7); padding-top:var(--s5);
border-top:1px solid var(--line);
}
.prf-v{
display:block; font-family:var(--display); font-weight:400;
font-size:clamp(23px,2.1vw,30px); line-height:1.05;
letter-spacing:-0.02em; color:var(--ink);
}
.prf-l{
display:block; margin-top:5px;
font-family:var(--ui); font-size:10.5px; font-weight:500;
letter-spacing:0.12em; text-transform:uppercase; color:var(--ink-soft);
line-height:1.5;
}
@media (max-width:620px){ .prf{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:760px){
.banner{ padding:var(--s6) var(--s5) var(--s5); }
}
/* --- 24.3 the flagship ---------------------------------------------------*/
/* Repose is first by composition: a full-bleed-within-the-grid image, then a
two-column body where the left column carries the argument and the right
carries the evidence. Nothing else on the page gets an image this size. */
.lead{ display:block; }
.lead-img{ margin:0; }
.lead-img img{
display:block; width:100%; height:auto;
border-radius:var(--r-tight);
}
.lead-tag{
display:inline-block; margin-bottom:var(--s4);
font-family:var(--ui); font-size:10.5px; font-weight:600;
letter-spacing:0.16em; text-transform:uppercase; color:var(--red-dark);
border:1px solid var(--red); border-radius:var(--r-pill);
padding:5px 11px;
}
.lead-body{
display:grid; grid-template-columns:repeat(12,minmax(0,1fr));
column-gap:var(--gutter); row-gap:var(--s6);
margin-top:var(--s6); align-items:start;
}
.lead-copy{ grid-column:1 / 7; }
.lead-copy h3{
margin:0; font-family:var(--display); font-weight:400;
font-size:clamp(30px,3.4vw,48px); line-height:1.02;
letter-spacing:-0.03em; color:var(--ink);
}
.lead-copy p{
margin:var(--s4) 0 0; max-width:40ch;
font-size:17px; line-height:1.62; color:var(--ink);
}
.lead-side{ grid-column:8 / -1; }
/* The three numbers sit in a box because they belong together and because an
unboxed number row was reading as decoration. */
.lead-nums{
border:1px solid var(--line); border-radius:var(--r-tight);
padding:var(--s5);
}
.lead-nums div + div{ margin-top:var(--s4); padding-top:var(--s4); border-top:1px solid var(--line-soft); }
.lead-nums b{
display:block; font-family:var(--display); font-weight:400;
font-size:23px; line-height:1.1; letter-spacing:-0.02em; color:var(--ink);
}
.lead-nums span{
display:block; margin-top:3px;
font-family:var(--ui); font-size:10.5px; font-weight:500;
letter-spacing:0.12em; text-transform:uppercase; color:var(--ink-soft);
}
.lead-role{
margin:var(--s5) 0 0;
font-family:var(--ui); font-size:12.5px; line-height:1.7; color:var(--ink-soft);
}
.lead-cta{ margin-top:var(--s6); }
@media (max-width:860px){
.lead-copy, .lead-side{ grid-column:1 / -1; }
.lead-body{ row-gap:var(--s5); }
}
/* --- 24.4 the other four: a quiet sequence ------------------------------ */
/* Deliberately not the flagship's treatment. Image, name, one line, link —
and no paragraph. Four tracks, so they land on columns 1, 4, 7 and 10. */
.rng{
display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
column-gap:var(--gutter); row-gap:var(--s7);
margin-top:var(--s7);
}
.rng a{
display:block; text-decoration:none; color:inherit;
border-bottom:0 !important;
}
.rng img{
display:block; width:100%; height:auto;
border-radius:var(--r-tight);
}
.rng h3{
margin:var(--s4) 0 0; font-family:var(--display); font-weight:400;
font-size:21px; line-height:1.15; letter-spacing:-0.02em; color:var(--ink);
}
.rng p{
margin:6px 0 0; font-size:14.5px; line-height:1.55; color:var(--ink-soft);
max-width:30ch;
}
.rng .arw{ color:var(--red-dark); }
.rng a:hover h3{ color:var(--red-dark); }
@media (max-width:900px){ .rng{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:520px){ .rng{ grid-template-columns:minmax(0,1fr); row-gap:var(--s6); } }
/* --- 24.5 the decks ----------------------------------------------------- */
/* A document browser, not a PDF viewer: one large page, a page count, two
plain controls and a strip of real pages underneath. No chrome, no toolbar,
no fake application. Without JS the strip is still a set of real images and
the "all pages" link still opens the full document. */
.books{
display:grid; grid-template-columns:repeat(12,minmax(0,1fr));
column-gap:var(--gutter); row-gap:var(--pause-sm);
margin-top:var(--s7);
}
.book{ grid-column:span 6; }
.book-h{
display:flex; align-items:baseline; justify-content:space-between;
gap:var(--s4); flex-wrap:wrap;
border-top:1px solid var(--line); padding-top:var(--s4);
}
.book-t{
margin:0; font-family:var(--display); font-weight:400;
font-size:23px; letter-spacing:-0.02em; color:var(--ink);
}
.book-c{
font-family:var(--ui); font-size:10.5px; font-weight:500;
letter-spacing:0.12em; text-transform:uppercase; color:var(--ink-soft);
flex:0 0 auto;
}
.book-d{
margin:var(--s3) 0 0; max-width:44ch;
font-size:15px; line-height:1.6; color:var(--ink-soft);
}
.book-stage{
margin:var(--s5) 0 0; position:relative;
background:var(--cream-light);
border:1px solid var(--line); border-radius:var(--r-tight);
padding:var(--s4);
}
.book-stage img{
display:block; width:100%; height:auto; border-radius:2px;
}
.book-bar{
display:flex; align-items:center; gap:var(--s4);
margin-top:var(--s4);
}
.book-btn{
font-family:var(--ui); font-size:12px; font-weight:600;
letter-spacing:0.1em; text-transform:uppercase;
background:transparent; color:var(--ink);
border:1px solid var(--line); border-radius:var(--r-pill);
padding:0 14px; min-height:44px; min-width:44px; cursor:pointer;
transition:border-color .16s ease, color .16s ease;
}
.book-btn:hover{ border-color:var(--red); color:var(--red-dark); }
.book-btn[disabled]{ opacity:.35; cursor:default; }
.book-pos{
font-family:var(--ui); font-size:11px; font-weight:500;
letter-spacing:0.12em; color:var(--ink-soft); margin-left:auto;
}
.book-strip{
display:flex; gap:10px; margin-top:var(--s4);
overflow-x:auto; padding-bottom:4px;
}
.book-strip button{
flex:0 0 auto; padding:0; background:none; cursor:pointer;
border:1px solid var(--line); border-radius:2px; line-height:0;
transition:border-color .16s ease;
}
.book-strip button[aria-current="true"]{ border-color:var(--red); }
.book-strip img{ display:block; height:54px; width:auto; }
@media (max-width:900px){ .book{ grid-column:1 / -1; } }
/* --- 24.6 the closing panel --------------------------------------------- */
/* The counterpart to the opening panel: same geometry, inverted field. The
email was set at 58px, which made the page end on a poster rather than an
invitation; it is now a readable line with the weight carried by the panel. */
.closer{
background:var(--ink); color:var(--cream-light);
border-radius:var(--r-tight);
padding:var(--s8) var(--s7);
}
.closer-l{
font-family:var(--ui); font-size:11px; font-weight:600;
letter-spacing:0.18em; text-transform:uppercase; color:var(--pink);
}
.closer h2{
margin:var(--s4) 0 0;
font-family:var(--display); font-weight:400;
font-size:clamp(30px,3.8vw,54px); line-height:1.02;
letter-spacing:-0.03em; color:var(--cream-light); max-width:18ch;
}
.closer-sub{
margin:var(--s5) 0 0; max-width:50ch;
font-size:16.5px; line-height:1.65; color:var(--cream-light); opacity:.88;
}
.closer-grid{
display:grid; grid-template-columns:repeat(12,minmax(0,1fr));
column-gap:var(--gutter); row-gap:var(--s5);
margin-top:var(--s7); padding-top:var(--s6);
border-top:1px solid rgba(255,249,238,.22);
}
.closer-f{ grid-column:span 4; }
.closer-f dt{
font-family:var(--ui); font-size:10.5px; font-weight:600;
letter-spacing:0.14em; text-transform:uppercase; color:var(--pink);
}
.closer-f dd{
margin:7px 0 0; font-size:17px; line-height:1.45; color:var(--cream-light);
}
.closer-f a{
color:var(--cream-light); text-decoration:none;
border-bottom:1px solid rgba(255,249,238,.4) !important;
padding-bottom:2px; display:inline-block; min-height:30px;
}
.closer-f a:hover{ color:var(--pink); border-bottom-color:var(--pink) !important; }
.closer-act{
display:flex; gap:var(--s5); flex-wrap:wrap;
margin-top:var(--s7);
}
.closer .btn{
background:var(--cream-light); color:var(--ink); border-color:var(--cream-light);
}
.closer .btn:hover{ background:var(--pink); border-color:var(--pink); color:var(--ink); }
.closer .btn.ghost{
background:transparent; color:var(--cream-light);
border-color:rgba(255,249,238,.45);
}
.closer .btn.ghost:hover{ background:transparent; border-color:var(--pink); color:var(--pink); }
@media (max-width:760px){
.closer{ padding:var(--s7) var(--s5); }
.closer-f{ grid-column:1 / -1; }
}
/* ===========================================================================
25. BOXES AS INFORMATION ARCHITECTURE
The brief: information that naturally groups should be boxed, and boxes
should carry structure rather than decoration. These four components
replace what were floating runs of text.
=========================================================================== */
/* --- 25.1 capabilities -------------------------------------------------- */
/* Four boxes, two per row, landing on columns 1 and 7. Each carries a
capability, what it actually means, and the evidence that it happened. */
.caps{
display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
column-gap:var(--gutter); row-gap:var(--gutter);
margin-top:var(--s7);
}
.cap{
border:1px solid var(--line); border-radius:var(--r-tight);
padding:var(--s6); background:var(--cream-light);
display:flex; flex-direction:column;
}
.cap-n{
font-family:var(--ui); font-size:10.5px; font-weight:600;
letter-spacing:0.16em; color:var(--red-dark);
}
.cap h3{
margin:var(--s4) 0 0; font-family:var(--display); font-weight:400;
font-size:clamp(21px,1.9vw,26px); line-height:1.12;
letter-spacing:-0.02em; color:var(--ink);
}
.cap p{
margin:var(--s4) 0 0; font-size:16px; line-height:1.62; color:var(--ink);
max-width:40ch;
}
.cap-ev{
margin-top:auto; padding-top:var(--s5);
}
.cap-ev dt{
font-family:var(--ui); font-size:10px; font-weight:600;
letter-spacing:0.14em; text-transform:uppercase; color:var(--ink-soft);
}
.cap-ev dd{
margin:5px 0 0; font-family:var(--ui); font-size:13px; line-height:1.6;
color:var(--ink);
}
.cap-ev dd i{ font-style:normal; color:var(--line); padding:0 5px; }
@media (max-width:820px){ .caps{ grid-template-columns:minmax(0,1fr); } }
/* --- 25.2 principles ---------------------------------------------------- */
.appr{
list-style:none; margin:var(--s7) 0 0; padding:0;
display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
column-gap:var(--gutter); row-gap:var(--s7);
}
.appr > li{ border-top:1px solid var(--line); padding-top:var(--s5); }
.appr h3{
margin:0; font-family:var(--display); font-weight:400;
font-size:21px; line-height:1.16; letter-spacing:-0.02em; color:var(--ink);
}
.appr p{
margin:var(--s4) 0 0; font-size:16px; line-height:1.62;
color:var(--ink-soft); max-width:42ch;
}
@media (max-width:760px){ .appr{ grid-template-columns:minmax(0,1fr); row-gap:var(--s6); } }
/* --- 25.3 the editorial interruption ------------------------------------ */
/* This is the one place on the site that is allowed to be a field of colour.
It carries the argument that the job title does not, so it gets a panel, a
larger heading and real photographs rather than another column of text. */
.field{
background:var(--cream-light);
border:1px solid var(--line);
border-left:3px solid var(--red);
border-radius:var(--r-tight);
padding:var(--s8) var(--s7);
margin-top:var(--s6);
}
.field-grid{
display:grid; grid-template-columns:repeat(12,minmax(0,1fr));
column-gap:var(--gutter); row-gap:var(--s6);
align-items:start;
}
.field-t{ grid-column:1 / 7; }
.field-t h2{
margin:0; font-family:var(--display); font-weight:400;
font-size:clamp(28px,3.1vw,42px); line-height:1.04;
letter-spacing:-0.03em; color:var(--ink); max-width:17ch;
}
.field-t p{
margin:var(--s5) 0 0; font-size:17px; line-height:1.66; color:var(--ink);
max-width:44ch;
}
.field-t p:last-child{ color:var(--red-dark); }
.field-ev{
grid-column:8 / -1;
display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s4);
align-items:end;
}
.field-ev figure{ margin:0; }
.field-ev img{ display:block; width:100%; height:auto; border-radius:var(--r-tight); }
.field-ev figcaption{
margin-top:7px; font-family:var(--ui); font-size:10.5px;
letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-soft);
}
@media (max-width:860px){
.field{ padding:var(--s7) var(--s5); }
.field-t, .field-ev{ grid-column:1 / -1; }
}
/* --- 25.4 collapsible evidence ------------------------------------------ */
/* The single biggest cause of density on Work was every gallery being open.
The reader gets the project, the lead image and the proof; the rest opens
on request. Native details/summary, so it works without JS and keyboard
focus follows the real control. */
.evset{ margin-top:var(--s7); border-top:1px solid var(--line); }
.evset > summary{
list-style:none; cursor:pointer;
display:flex; align-items:center; gap:var(--s4);
padding:var(--s4) 0; min-height:44px;
font-family:var(--ui); font-size:12px; font-weight:600;
letter-spacing:0.14em; text-transform:uppercase; color:var(--red-dark);
}
.evset > summary::-webkit-details-marker{ display:none; }
.evset > summary::after{
content:'+'; margin-left:auto;
font-family:var(--ui); font-size:17px; font-weight:400; color:var(--ink-soft);
}
.evset[open] > summary::after{ content:'\2212'; }
.evset > summary:hover{ color:var(--red); }
.evset > summary:focus-visible{ outline:2px solid var(--red); outline-offset:3px; }
.evset-n{
font-family:var(--ui); font-size:10.5px; font-weight:500;
letter-spacing:0.12em; color:var(--ink-soft); text-transform:none;
}
.evset-in{ padding-bottom:var(--s6); }
/* --- 25.5 engagement figures step back ---------------------------------- */
/* They were set at up to 36px of display type, which made a metric row the
loudest thing under a case study. Boxed, at roughly a quarter of the
previous visual weight, they read as supporting evidence. */
.figs, .oth-figs{
border:1px solid var(--line); border-radius:var(--r-tight);
padding:var(--s5); background:var(--cream-light);
}
.feat .figs{
border:1px solid var(--line) !important;
margin-top:var(--s7) !important; padding-top:var(--s5) !important;
}
.figs .fig-v, .oth-figs .fig-v{
font-size:19px !important; line-height:1.15; letter-spacing:-0.015em;
}
.figs .fig-l, .oth-figs .fig-l{
font-size:10px; letter-spacing:0.1em; margin-top:4px; max-width:24ch;
}
@media (max-width:520px){
.figs, .oth-figs{ padding:var(--s4); }
}
/* --- 25.6 the film ------------------------------------------------------ */
/* Muted, inline, looping, and paused whenever it is off-screen. Sound is
opt-in through one plain control; nothing autoplays audio. */
.reel{ position:relative; margin:0; }
.reel video{
display:block; width:100%; height:auto; border-radius:var(--r-tight);
background:var(--ink);
}
.reel-snd{
position:absolute; right:var(--s4); bottom:var(--s4);
display:inline-flex; align-items:center; gap:8px;
min-height:44px; padding:0 15px; cursor:pointer;
font-family:var(--ui); font-size:11px; font-weight:600;
letter-spacing:0.12em; text-transform:uppercase;
background:rgba(113,58,50,.84); color:var(--cream-light);
border:1px solid rgba(255,249,238,.4); border-radius:var(--r-pill);
backdrop-filter:blur(3px);
}
.reel-snd:hover{ background:var(--red-dark); border-color:var(--red-dark); }
.reel-snd:focus-visible{ outline:2px solid var(--cream-light); outline-offset:2px; }
.reel-cap{
margin-top:var(--s3); font-family:var(--ui); font-size:11px;
letter-spacing:0.04em; color:var(--ink-soft);
}
/* --- 25.7 experience carries a signal now -------------------------------- */
.crows .crow em{
grid-column:1 / -1; font-style:normal; margin-top:5px;
font-family:var(--ui); font-size:13px; line-height:1.55; color:var(--ink-soft);
}
@media (min-width:701px){
.crows .crow em{ grid-column:5 / 10; margin-top:4px; }
}
/* ===========================================================================
26. THE ARCHIVE IS AN INDEX
One page, one level. A record is: brand, what it was, what material exists,
and the material. No sub-pages, no nested categories, nothing to navigate
into. The contact sheets keep their natural ratios, which is why the right
edge of each row is ragged — that is the work, not a bug.
=========================================================================== */
.rec{
display:grid; grid-template-columns:repeat(12,minmax(0,1fr));
column-gap:var(--gutter); row-gap:var(--s4);
padding-block:var(--s7);
border-top:1px solid var(--line-soft);
align-items:start;
}
.rec:first-of-type{ border-top:1px solid var(--line); }
.rec-id{ grid-column:1 / 3; }
.rec-n{
font-family:var(--ui); font-size:10.5px; font-weight:600;
letter-spacing:0.14em; color:var(--ink-soft);
}
.rec-main{ grid-column:3 / 9; }
.rec-main h2{
margin:0; font-family:var(--display); font-weight:400;
font-size:clamp(21px,2vw,27px); line-height:1.1;
letter-spacing:-0.02em; color:var(--ink);
}
.rec-m{
margin:7px 0 0; font-family:var(--ui); font-size:11px; font-weight:500;
letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-soft);
}
.rec-m i{ font-style:normal; color:var(--line); padding:0 6px; }
.rec-d{
margin:var(--s4) 0 0; font-size:15.5px; line-height:1.6;
color:var(--ink); max-width:54ch;
}
.rec-side{ grid-column:9 / -1; }
/* The media chips are the whole navigation: they say what exists, and the
material is immediately underneath. Nothing to click into. */
.rec-media{ display:flex; flex-wrap:wrap; gap:7px; margin:0; }
.rec-media span{
font-family:var(--ui); font-size:10px; font-weight:600;
letter-spacing:0.12em; text-transform:uppercase; color:var(--ink);
border:1px solid var(--line); border-radius:var(--r-pill);
padding:5px 10px;
}
.rec-media span.is-deck{ border-color:var(--red); color:var(--red-dark); }
.rec-count{
display:block; margin-top:var(--s4);
font-family:var(--ui); font-size:11px; letter-spacing:0.08em;
text-transform:uppercase; color:var(--ink-soft);
}
.rec-link{ display:block; margin-top:var(--s4); }
.rec-sheet{
grid-column:3 / -1; display:flex; flex-wrap:wrap; gap:14px;
margin-top:var(--s4);
}
.rec-sheet img{
display:block; height:132px; width:auto; max-width:100%;
border-radius:2px;
}
.rec-none{
grid-column:3 / -1;
font-family:var(--ui); font-size:12px; letter-spacing:0.08em;
color:var(--ink-soft); font-style:italic;
}
@media (max-width:900px){
.rec-id{ grid-column:1 / -1; }
.rec-main, .rec-side, .rec-sheet, .rec-none{ grid-column:1 / -1; }
.rec-side{ margin-top:var(--s3); }
}
@media (max-width:560px){
.rec{ padding-block:var(--s6); }
.rec-sheet img{ height:104px; }
}
.recbar{
display:flex; flex-wrap:wrap; align-items:center; gap:10px;
margin-top:var(--s6); padding-bottom:var(--s5);
}
.recbar button{
font-family:var(--ui); font-size:11px; font-weight:600;
letter-spacing:0.12em; text-transform:uppercase;
background:transparent; color:var(--ink-soft);
border:1px solid var(--line); border-radius:var(--r-pill);
padding:0 14px; min-height:44px; cursor:pointer;
transition:border-color .16s ease, color .16s ease;
}
.recbar button:hover{ color:var(--ink); border-color:var(--ink-soft); }
.recbar button[aria-pressed="true"]{
color:var(--cream-light); background:var(--red); border-color:var(--red);
}
.recbar .recbar-n{
margin-left:auto; font-family:var(--ui); font-size:11px;
letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-soft);
}
/* ===========================================================================
27. THE CONSEQUENCES OF 24–26
=========================================================================== */
/* A filtered-out record is a grid, so `hidden` alone does not hide it. */
.rec[hidden]{ display:none !important; }
/* The film replaces an ![]()
in the lead slot, so the slot's image rules have
to reach the