/* =============================================================
Myles Holman — Portfolio
Shared design system. Used across all pages.
============================================================= */
:root{
--ink:#0a0a0a;
--ink-2:#1a1a1a;
--paper:#f3efe7;
--paper-2:#ebe5d9;
--mute:#6b6660;
--rule:rgba(10,10,10,.12);
--rule-soft:rgba(10,10,10,.06);
--accent:#ff002e;
--accent-2:#f5d44a;
--serif:"Zodiak",ui-serif,Georgia,serif;
--sans:"Author",-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
--mono:"Fragment Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
--maxw:1480px;
--gutter:clamp(20px,4vw,56px);
--ease:cubic-bezier(.2,.7,.2,1);
/* motion vocabulary (2026-10-18): settle for type, pop for small things, wipe for ink */
--ease-settle:cubic-bezier(.16,.84,.26,1);
--ease-pop:cubic-bezier(.2,.9,.3,1.18);
--ease-wipe:cubic-bezier(.7,0,.2,1);
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-font-smoothing:antialiased}
html,body{background:var(--paper);color:var(--ink);font-family:var(--sans);font-weight:400;font-size:16px;line-height:1.5;overflow-x:clip}
body{
background-image:
radial-gradient(1200px 600px at 110% -10%,rgba(255,0,46,.05),transparent 60%),
radial-gradient(1000px 600px at -10% 30%,rgba(245,212,74,.08),transparent 60%);
}
body::before{
content:"";position:fixed;inset:0;pointer-events:none;z-index:1000;opacity:.06;mix-blend-mode:multiply;
background-image:url("data:image/svg+xml;utf8,");
}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
button{font:inherit;background:none;border:0;color:inherit;cursor:pointer}
::selection{background:var(--accent);color:var(--paper)}
/* ---------- Heading weight normaliser (Zodiak variable: titles 600, ledes 500 — true weights) ---------- */
h1,h2,h3,h4,h5,h6{font-weight:600;font-style:normal}
.section__title,.case-hero__title,.case-section__title,.case-next__title,
.about-hero__title,.cta__title,.arch-era__year,.arch-era__title,.case__name,
.case-section__num,.foot__sig,.case__title{font-weight:600!important}
.lede,.case-pull,.case-hero__lede,.quote__body{font-weight:500!important}
.section__title .italic,.case-hero__title .italic,.case-section__title .italic,
.case-next__title .italic,.about-hero__title .italic,.cta__title .italic,
.arch-era__year .italic,.arch-era__title .italic,.case__name .italic,
.italic{font-style:italic;font-weight:600}
.case-pull em{font-style:italic;font-weight:500}
/* ---------- Layout ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}
.wrap-narrow{max-width:1080px;margin:0 auto;padding:0 var(--gutter)}
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:24px}
.rule{height:1px;background:var(--rule);width:100%}
.rule-soft{height:1px;background:var(--rule-soft);width:100%}
.mt-12{margin-top:12px}.mt-16{margin-top:16px}.mt-24{margin-top:24px}.mt-32{margin-top:32px}
.mt-48{margin-top:48px}.mt-64{margin-top:64px}.mt-80{margin-top:80px}.mt-120{margin-top:120px}
.pt-0{padding-top:0!important}
/* ---------- Type ---------- */
.eyebrow{font:400 11px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--mute)}
.display{font-family:var(--serif);font-weight:600;line-height:.92;letter-spacing:-.02em}
.italic{font-style:italic}
.kicker{font:500 13px/1.3 var(--sans);letter-spacing:.02em;color:var(--ink)}
.lede{font-family:var(--serif);font-size:clamp(22px,2.6vw,34px);line-height:1.2;letter-spacing:-.005em;color:var(--ink)}
.body{font-size:17px;line-height:1.6;color:var(--ink)}
.body p+p{margin-top:18px}
.body em{font-style:italic;color:var(--accent)}
.mute{color:var(--mute)}
.accent{color:var(--accent)}
.handwrite{font-family:var(--serif);font-style:italic;color:var(--accent)}
.dot-divider{display:inline-block;width:4px;height:4px;background:var(--ink);border-radius:50%;margin:0 12px;vertical-align:middle}
/* ---------- Nav ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;backdrop-filter:saturate(140%) blur(10px);background:rgba(243,239,231,.78);border-bottom:1px solid var(--rule-soft)}
.nav__inner{display:flex;align-items:center;padding:16px var(--gutter);max-width:var(--maxw);margin:0 auto;gap:0}
.brand{display:flex;align-items:center;gap:2px;font:600 14px/1 var(--sans);letter-spacing:.01em;opacity:0;pointer-events:none;max-width:0;overflow:hidden;transition:opacity .45s var(--ease),max-width .45s var(--ease)}
.nav.is-scrolled .brand{opacity:1;pointer-events:auto;max-width:240px}
.brand__wordmark{display:block;height:32px;width:auto}
.brand__leaf{display:inline-block;font-size:24px;line-height:1;transform-origin:50% 92%;animation:leaf-sway 4.8s var(--ease) infinite}
.brand:hover .brand__leaf{animation-duration:1.8s}
@keyframes leaf-sway{0%,100%{transform:rotate(-4deg) scale(1)}25%{transform:rotate(3deg) scale(1.04)}50%{transform:rotate(7deg) scale(1)}75%{transform:rotate(-1deg) scale(1.02)}}
/* legacy two-column hero scaffolding kept available but suppressed; superseded by .hero__composition */
/* Links sit left-flush at rest; on scroll, brand expands beside them and ctas push right via margin-left:auto, which centres the links visually */
.nav__links{display:flex;gap:32px;font:500 16px/1 var(--sans);color:var(--ink);margin-left:24px;margin-right:auto;transition:font-size .3s var(--ease),gap .3s var(--ease),margin .45s var(--ease)}
.nav.is-scrolled .nav__links{font-size:13px;gap:28px;margin-left:48px}
.nav__links a{position:relative;padding:6px 2px}
.nav__links a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.nav__links a:hover::after,.nav__links a.is-active::after{transform:scaleX(1)}
.nav__ctas{display:flex;align-items:center;gap:10px;margin-left:auto}
.nav__cta{display:inline-flex;align-items:center;gap:8px;padding:13px 22px;border:1px solid var(--ink);border-radius:999px;font:500 15px/1 var(--sans);letter-spacing:.005em;transition:all .3s var(--ease),padding .3s var(--ease),font-size .3s var(--ease);white-space:nowrap}
.nav.is-scrolled .nav__cta{padding:10px 16px;font-size:13px}
.nav__cta--primary{background:var(--accent);border-color:var(--accent);color:var(--paper)}
.nav__cta--primary:hover{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.nav__cta--ghost{background:transparent;color:var(--ink)}
.nav__cta--ghost:hover{background:var(--ink);color:var(--paper)}
.nav__cta svg{width:14px;height:14px;flex-shrink:0}
.nav__cta .pulse{width:6px;height:6px;border-radius:50%;background:var(--accent)}
@media(max-width:1040px){.nav__links{display:none}}
@media(max-width:720px){.nav__cta--ghost{display:none}}
/* ---------- Cursor ---------- */
.cursor{position:fixed;top:0;left:0;width:8px;height:8px;background:var(--ink);border-radius:50%;pointer-events:none;z-index:9999;transform:translate(-50%,-50%);transition:transform .15s var(--ease),background .25s var(--ease),width .25s var(--ease),height .25s var(--ease)}
.cursor.is-hover{width:48px;height:48px;background:rgba(255,0,46,.16);border:1px solid var(--accent)}
@media(hover:none){.cursor{display:none}}
/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:12px;padding:18px 28px;border-radius:999px;font:500 14px/1 var(--sans);border:1px solid var(--ink);transition:all .35s var(--ease)}
.btn--solid{background:var(--ink);color:var(--paper)}
.btn--solid:hover{background:var(--accent);border-color:var(--accent)}
.btn--ghost:hover{background:var(--ink);color:var(--paper)}
.btn--sm{padding:12px 20px;font-size:13px}
/* ---------- Button FX (hover magic) ---------- */
.fx-btn{--fx-sweep:var(--accent);position:relative;overflow:hidden;isolation:isolate}
.fx-btn::before{content:"";position:absolute;inset:0;background:var(--fx-sweep);transform:translateX(-101%);transition:transform .55s cubic-bezier(.65,0,.35,1);z-index:-1}
.fx-btn:hover::before{transform:translateX(0)}
.fx-label{position:relative;display:inline-block;overflow:hidden;line-height:1.05;vertical-align:middle}
.fx-label > span{display:inline-block;transition:transform .5s cubic-bezier(.65,0,.35,1)}
.fx-label > span::after{content:attr(data-text);position:absolute;left:0;top:100%;white-space:nowrap}
.fx-btn:hover .fx-label > span{transform:translateY(-105%)}
.fx-arrow{position:relative;display:inline-flex;align-items:center;justify-content:center;width:1em;height:1em;overflow:hidden;flex-shrink:0}
.fx-arrow > *{position:absolute;inset:0;display:inline-flex;align-items:center;justify-content:center;transition:transform .42s cubic-bezier(.65,0,.35,1)}
.fx-arrow > *:nth-child(2){transform:translateX(-130%)}
.fx-btn:hover .fx-arrow > *:first-child{transform:translateX(130%)}
.fx-btn:hover .fx-arrow > *:nth-child(2){transform:translateX(0)}
.case__cta.fx-btn:hover{background:var(--ink);border-color:var(--ink)}
.btn--solid.fx-btn:hover{background:var(--ink);border-color:var(--ink)}
.hero__cta.fx-btn{--fx-sweep:var(--ink)}
.hero__cta.fx-btn:hover{background:var(--accent);border-color:var(--accent)}
.btn--ghost.fx-btn{--fx-sweep:var(--ink)}
.btn--ghost.fx-btn:hover{background:transparent}
.hero__cta .fx-arrow{width:1.25em;height:1.25em}
/* ---------- Section header ---------- */
.section{padding:120px 0;position:relative}
.section--dark{background:var(--ink);color:var(--paper)}
.section--dark .rule,.section--dark .rule-soft{background:rgba(243,239,231,.14)}
.section--dark .eyebrow{color:rgba(243,239,231,.55)}
.section--dark .mute{color:rgba(243,239,231,.7)}
.section__head{display:grid;grid-template-columns:1fr 1.4fr;gap:48px;align-items:end;margin-bottom:80px}
@media(max-width:900px){.section__head{grid-template-columns:1fr;gap:24px;margin-bottom:48px}}
.section__title{font-family:var(--serif);font-size:clamp(34px,4vw,56px);line-height:1.12;letter-spacing:-.02em;padding-bottom:.06em}
.section__title .italic{font-style:italic;color:var(--accent)}
.section__intro{font-size:18px;line-height:1.5;color:var(--mute);max-width:54ch}
.section--dark .section__intro{color:rgba(243,239,231,.7)}
/* ---------- Hero (homepage) — see v3 block below ---------- */
@keyframes rise{from{transform:translateY(110%)} to{transform:translateY(0)}}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes pulse{0%,100%{box-shadow:0 0 0 3px rgba(255,0,46,.18)} 50%{box-shadow:0 0 0 7px rgba(255,0,46,0)}}
.hero__stats{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;border-top:1px solid var(--rule);padding-top:24px}
.stat__n{font-family:var(--serif);font-size:clamp(40px,5vw,72px);line-height:1;letter-spacing:-.02em}
.stat__l{font:400 11px/1.3 var(--mono);letter-spacing:.15em;text-transform:uppercase;color:var(--mute);margin-top:8px}
/* ---------- Marquee strip ---------- */
.strip{
border-top:1px solid var(--rule);
border-bottom:0;
padding:40px 0;
margin-top:0;
overflow:hidden;
background:rgba(10,10,10,.02);
/* inside .hero: anchored to the bottom of the first-load fold */
width:100%;
}
.strip__track{
display:flex;
gap:clamp(56px, 7vw, 110px);
width:max-content;
animation:scroll 50s linear infinite;
align-items:center;
}
.strip__logo{
display:block;
height:clamp(22px, 2.4vh, 34px);
width:auto;
flex:none;
opacity:.72;
filter:grayscale(1) contrast(1.05);
transition:opacity .25s var(--ease), filter .25s var(--ease);
}
.strip__logo:hover{opacity:1; filter:grayscale(0) contrast(1)}
/* Optical balance. The marks are height-matched, which is not the same as weight-matched:
measured ink mass per unit height runs Deloitte 100, Oracle 78, Globant 65 against
Chainalysis 34, eBay 15, Yogen Fruz 14 — so the three heavy wordmarks shouted over the
rest, and Oracle is 191px wide against eBay's 65px. Height and opacity are tuned per mark
to bring the row into one band instead of equalising the boxes. */
.strip__logo[alt="Deloitte"] {height:clamp(19px,2.06vh,29px);opacity:.42}
.strip__logo[alt="Oracle"] {height:clamp(19px,2.06vh,29px);opacity:.48}
.strip__logo[alt="Globant"] {height:clamp(21px,2.26vh,32px);opacity:.54}
.strip__logo[alt="Vistaprint"] {opacity:.76}
.strip__logo[alt="Sun Microsystems"]{height:clamp(23px,2.54vh,36px);opacity:.82}
.strip__logo[alt="eBay"] {height:clamp(24px,2.64vh,37px);opacity:.86}
.strip__logo[alt="Yogen Früz"] {height:clamp(24px,2.60vh,37px);opacity:.90}
@keyframes scroll{to{transform:translateX(-50%)}}
/* ---------- Work cards (homepage) ---------- */
.work{display:grid;gap:80px}
.case{display:grid;grid-template-columns:5fr 7fr;gap:48px;align-items:center}
.case:nth-child(even){grid-template-columns:7fr 5fr}
.case:nth-child(even) .case__copy{order:2}
@media(max-width:900px){.case,.case:nth-child(even){grid-template-columns:1fr}.case:nth-child(even) .case__copy{order:0}}
.case__num{font:400 12px/1 var(--mono);letter-spacing:.15em;color:var(--mute)}
.case__sector{margin-top:24px;font:400 12px/1 var(--mono);text-transform:uppercase;letter-spacing:.18em;color:var(--accent)}
.case__name{font-family:var(--serif);font-size:clamp(40px,4.8vw,72px);line-height:1.14;letter-spacing:-.02em;margin-top:12px;padding-bottom:.06em}
.case__name .italic{font-style:italic}
.case__desc{font-size:17px;line-height:1.55;margin-top:20px;color:var(--mute);max-width:48ch}
.case__tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}
.tag{font:400 11px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;padding:8px 12px;border:1px solid var(--rule);border-radius:999px;color:var(--ink)}
.case__cta{margin-top:32px;display:inline-flex;align-items:center;gap:12px;padding:14px 24px;border-radius:999px;background:var(--ink);color:var(--paper);border:1px solid var(--ink);font:500 14px/1 var(--sans);transition:background .35s var(--ease),border-color .35s var(--ease),color .35s var(--ease),gap .35s var(--ease),transform .35s var(--ease)}
.case__cta:hover{background:var(--accent);border-color:var(--accent);color:var(--paper);gap:18px;transform:translateY(-1px)}
.case__visual{position:relative;border-radius:12px;overflow:hidden;aspect-ratio:4/3;background:var(--paper-2);border:1px solid var(--rule);box-shadow:0 1px 0 rgba(0,0,0,.03),0 30px 60px -30px rgba(0,0,0,.18);transition:transform .6s var(--ease)}
.case__visual::after{content:"";position:absolute;inset:0;background:linear-gradient(135deg,transparent 60%,rgba(10,10,10,.04));pointer-events:none;z-index:1}
.case__visual svg{position:absolute;inset:0;width:100%;height:100%}
.viz-bg{position:absolute;inset:0}
@media (hover:none){.case__thumb{opacity:.92;transform:none}}
@media (max-width:900px){.case__thumb{width:57%;right:14px;bottom:14px}}
/* ---------- Timeline ---------- */
.timeline{margin-top:24px;position:relative;padding:48px 0}
.timeline__rail{height:1px;background:var(--rule);position:relative}
.timeline__scroll{display:flex;gap:48px;overflow-x:auto;scroll-snap-type:x mandatory;padding:32px 0 16px;scrollbar-width:none}
.timeline__scroll::-webkit-scrollbar{display:none}
.t-item{min-width:280px;max-width:320px;scroll-snap-align:start;position:relative;padding-top:32px}
.t-item::before{content:"";position:absolute;top:0;left:0;width:10px;height:10px;background:var(--paper);border:1.5px solid var(--ink);border-radius:50%}
.t-item.is-accent::before{background:var(--accent);border-color:var(--accent)}
.t-year{font:400 11px/1 var(--mono);letter-spacing:.18em;color:var(--mute);text-transform:uppercase}
.t-title{font-family:var(--serif);font-size:32px;line-height:1.05;letter-spacing:-.01em;margin-top:10px}
.t-role{font-size:13px;color:var(--mute);margin-top:8px}
.t-note{font-size:14px;line-height:1.5;margin-top:14px;color:var(--ink)}
.section--dark .t-item::before{background:var(--ink);border-color:var(--paper)}
.section--dark .t-item.is-accent::before{background:var(--accent);border-color:var(--accent)}
.section--dark .t-role{color:rgba(243,239,231,.55)}
.section--dark .t-note{color:rgba(243,239,231,.85)}
/* ---------- Capabilities / Cards grid ---------- */
.caps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
@media(max-width:900px){.caps{grid-template-columns:1fr}}
.cap{border:1px solid var(--rule);border-radius:16px;padding:32px;background:rgba(255,255,255,.4);transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.cap:hover{transform:translateY(-4px);box-shadow:0 30px 60px -30px rgba(0,0,0,.2)}
details.cap{padding:0}
details.cap > summary{padding:32px;list-style:none;cursor:pointer;display:block;outline:none}
details.cap > summary::-webkit-details-marker{display:none}
details.cap > summary::marker{display:none}
.cap__icon{width:44px;height:44px;border-radius:12px;background:var(--ink);color:var(--paper);display:grid;place-items:center;margin-bottom:24px}
.cap__title{font-family:var(--serif);font-size:32px;line-height:1.05;margin-bottom:12px}
.cap__desc{color:var(--mute);font-size:15px;line-height:1.55;margin-bottom:32px}
.cap__cue{display:inline-flex;align-items:center;justify-content:center;gap:8px;margin-top:24px;padding:7px 12px 7px 14px;border-radius:999px;background:rgba(255,0,46,.08);color:var(--accent);transition:background .25s var(--ease)}
.cap__cue-label{font:400 10px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase}
.cap__cue svg{transition:transform .35s var(--ease)}
details.cap[open] .cap__cue{background:rgba(255,0,46,.15)}
details.cap[open] .cap__cue svg{transform:rotate(180deg)}
details.cap[open] > summary .cap__cue span::after{content:" closed";display:none}
.cap__list{margin:0 32px 32px;padding-top:24px;border-top:1px solid var(--rule);display:grid;gap:6px;font:400 12px/1.4 var(--mono);text-transform:uppercase;letter-spacing:.1em;color:var(--ink);cursor:pointer}
.cap__list li{list-style:none;display:flex;align-items:center;gap:10px}
.cap__list li::before{content:"";width:14px;height:1px;background:var(--accent)}
.section--dark .cap{background:rgba(255,255,255,.04);border-color:rgba(243,239,231,.1)}
.section--dark .cap__icon{background:var(--accent);color:var(--ink)}
.section--dark .cap__desc{color:rgba(243,239,231,.7)}
.section--dark .cap__list{color:rgba(243,239,231,.9)}
/* ---------- Quotes ---------- */
.quotes{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
@media(max-width:900px){.quotes{grid-template-columns:1fr}}
.quote{padding:40px;border:1px solid var(--rule);border-radius:16px;background:rgba(255,255,255,.4);position:relative}
.quote__mark{position:absolute;top:24px;right:32px;font-family:var(--serif);font-size:80px;line-height:1;color:var(--accent);opacity:.4}
.quote__body{font-family:var(--serif);font-size:22px;line-height:1.35;color:var(--ink);letter-spacing:-.005em}
.quote__by{display:flex;align-items:center;justify-content:space-between;margin-top:24px;padding-top:24px;border-top:1px solid var(--rule);flex-wrap:wrap;gap:12px}
.quote__who{display:flex;flex-direction:column;gap:2px}
.quote__name{font:600 14px/1 var(--sans)}
.quote__role{font:400 13px/1.3 var(--mono);color:var(--mute);letter-spacing:.02em}
/* ---------- Numbers band ---------- */
.numbers{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;border-top:1px solid rgba(243,239,231,.14);border-bottom:1px solid rgba(243,239,231,.14);padding:64px 0}
@media(max-width:900px){.numbers{grid-template-columns:repeat(2,1fr)}}
.num__n{font-family:var(--serif);font-size:clamp(48px,7vw,96px);line-height:1;letter-spacing:-.02em;color:var(--paper)}
.num__n .accent{color:var(--accent)}
.num__l{font:400 11px/1.4 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:rgba(243,239,231,.55);margin-top:12px;max-width:24ch}
/* ---------- Roster table ---------- */
.now{border-top:1px solid var(--rule)}
.now__row{display:grid;grid-template-columns:repeat(12,1fr);align-items:center;gap:24px;padding:20px 0;border-bottom:1px solid var(--rule)}
.now__y{grid-column:span 2;font:400 12px/1.4 var(--mono);color:var(--mute);letter-spacing:.1em}
.now__r{grid-column:span 4;font-size:15px}
.now__s{grid-column:span 3;font-size:15px;color:var(--mute)}
.now__c{grid-column:span 3;font-family:var(--serif);font-size:22px;letter-spacing:-.01em}
.now__c.is-current::after{content:"●";color:var(--accent);font-size:10px;vertical-align:middle;margin-left:10px}
@media(max-width:900px){
.now__y,.now__r,.now__s,.now__c{grid-column:span 12;padding:6px 0}
.now__row > *{border:0}
.now__row{display:grid;grid-template-columns:repeat(12,1fr);padding:18px 0;border-bottom:1px solid var(--rule)}
.now__y{grid-column:span 12}
.now__r{grid-column:span 8}
.now__s{grid-column:span 4;text-align:right}
.now__c{grid-column:span 12;margin-top:6px}
}
/* ---------- CTA panel ---------- */
.cta{padding:140px 0;text-align:left;position:relative}
.cta__title{font-family:var(--serif);font-size:clamp(44px,6.4vw,104px);line-height:1.14;letter-spacing:-.025em;max-width:18ch;padding-bottom:.06em}
.cta__title .italic{font-style:italic;color:var(--accent)}
.cta__row{display:flex;gap:24px;align-items:center;margin-top:48px;flex-wrap:wrap}
/* ---------- Footer ---------- */
.foot{padding:64px 0 32px;border-top:1px solid var(--rule)}
.foot__top{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:32px;align-items:start}
@media(max-width:900px){.foot__top{grid-template-columns:1fr 1fr}}
.foot__col h5{font:400 11px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--mute);margin-bottom:16px}
.foot__col a,.foot__col p{display:block;font-size:14px;line-height:1.7;color:var(--ink)}
.foot__col a:hover{color:var(--accent)}
.foot__bot{display:flex;justify-content:space-between;align-items:center;margin-top:48px;padding-top:24px;border-top:1px solid var(--rule);font:400 12px/1 var(--mono);color:var(--mute);letter-spacing:.05em;gap:16px;flex-wrap:wrap}
.foot__sig{font-family:var(--serif);font-size:48px;line-height:1;letter-spacing:-.02em;font-style:italic}
/* ---------- Reveal ----------
Scroll-in. Shorter than it was (.8s read as "pale or missing" while scanning),
staggered by --i so a grid lands child by child. delay-N classes just set --i;
[data-stagger] groups get --i from site.js. */
.reveal{opacity:0;transform:translateY(22px);
transition:opacity .7s var(--ease-settle),transform .7s var(--ease-settle);
transition-delay:calc(min(var(--i,0),8) * 70ms)}
.reveal.is-in{opacity:1;transform:none}
.reveal.delay-1{--i:1}.reveal.delay-2{--i:2}.reveal.delay-3{--i:3}.reveal.delay-4{--i:4}
/* cards pop: a touch of overshoot on the way in */
.reveal--pop{transform:translateY(14px) scale(.94);transition-timing-function:var(--ease-pop)}
/* pictures wipe in left to right like a brush, the image settling from a slight zoom */
.reveal.wash{opacity:1;transform:none;clip-path:inset(0 100% 0 0 round 12px);
transition:clip-path 1.1s var(--ease-wipe) calc(min(var(--i,0),8) * 70ms)}
.reveal.wash.is-in{clip-path:inset(0 0 0 0 round 12px)}
.reveal.wash>img{transform:scale(1.06);transition:transform 1.8s var(--ease-settle) calc(min(var(--i,0),8) * 70ms)}
.reveal.wash.is-in>img{transform:none}
/* a line of display type rises in from under its own baseline (.rl wraps the line) */
.rl{display:block;clip-path:inset(-.12em -.3em -.16em -.3em)}
.rl>span{display:block;transform:translateY(118%);transition:transform 1s var(--ease-settle) calc(min(var(--i,0),8) * 70ms + 50ms)}
.is-in .rl>span{transform:none}
/* =============================================================
Case study page styles
============================================================= */
.case-hero{padding:160px 0 80px;position:relative}
.case-hero__meta{display:flex;gap:32px;flex-wrap:wrap;margin-bottom:48px;font-size:13px;color:var(--mute)}
.case-hero__meta b{color:var(--ink);font-weight:600;margin-right:8px}
.case-hero__sector{font:400 12px/1 var(--mono);text-transform:uppercase;letter-spacing:.2em;color:var(--accent);margin-bottom:24px;display:block}
.case-hero__title{font-family:var(--serif);font-weight:600;font-size:clamp(40px,5.6vw,84px);line-height:1.14;letter-spacing:-.025em;max-width:20ch;padding-bottom:.06em}
.case-hero__title .italic{font-style:italic;color:var(--accent)}
.case-hero__lede{font-family:var(--serif);font-size:clamp(22px,2.4vw,32px);line-height:1.25;letter-spacing:-.005em;max-width:60ch;margin-top:48px;color:var(--ink)}
.case-hero__facts{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;margin-top:80px;padding-top:32px;border-top:1px solid var(--rule)}
@media(max-width:900px){.case-hero__facts{grid-template-columns:repeat(2,1fr)}}
.fact h6{font:400 11px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--mute);margin-bottom:12px}
.fact p{font-size:15px;line-height:1.5}
.fact .accent{color:var(--accent);font-weight:500}
.case-hero__visual{margin-top:96px;border-radius:16px;overflow:hidden;aspect-ratio:16/10;border:1px solid var(--rule);background:var(--paper-2);position:relative;box-shadow:0 1px 0 rgba(0,0,0,.03),0 60px 100px -40px rgba(0,0,0,.25)}
.case-hero__visual svg{position:absolute;inset:0;width:100%;height:100%}
.case-section{padding:96px 0}
.case-section__head{display:grid;grid-template-columns:auto 1fr;gap:48px;align-items:baseline;margin-bottom:48px}
@media(max-width:700px){.case-section__head{grid-template-columns:1fr;gap:16px}}
.case-section__num{font-family:var(--serif);font-size:clamp(48px,5vw,80px);line-height:1.1;letter-spacing:-.02em;color:var(--accent);font-style:italic;padding-bottom:.05em}
.case-section__title{font-family:var(--serif);font-size:clamp(32px,3.6vw,52px);line-height:1.14;letter-spacing:-.02em;padding-bottom:.06em}
.case-section__intro{font-family:var(--serif);font-size:clamp(20px,2vw,28px);line-height:1.3;color:var(--ink);max-width:54ch;margin-top:24px}
.case-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:48px 64px;margin-top:48px}
@media(max-width:700px){.case-grid{grid-template-columns:1fr;gap:32px}}
.case-grid h4{font-family:var(--serif);font-size:28px;line-height:1.15;letter-spacing:-.01em;margin-bottom:12px}
.case-grid p{font-size:16px;line-height:1.6;color:var(--mute)}
.case-pull{padding:48px;margin:64px 0;border-left:2px solid var(--accent);font-family:var(--serif);font-size:clamp(28px,3.4vw,44px);line-height:1.2;letter-spacing:-.01em}
.case-pull cite{display:block;margin-top:16px;font-family:var(--sans);font-style:normal;font-size:13px;color:var(--mute);letter-spacing:.1em;text-transform:uppercase;font-weight:500}
.case-vis{position:relative;border-radius:12px;overflow:hidden;aspect-ratio:16/9;border:1px solid var(--rule);background:var(--paper-2);margin-top:48px;box-shadow:0 30px 60px -30px rgba(0,0,0,.2)}
.case-vis svg{position:absolute;inset:0;width:100%;height:100%}
.case-vis__caption{margin-top:14px;font:400 12px/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
.case-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;margin:64px 0;padding:48px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
@media(max-width:900px){.case-stats{grid-template-columns:repeat(2,1fr)}}
.case-stats .n{font-family:var(--serif);font-size:clamp(48px,6vw,84px);line-height:1;letter-spacing:-.02em}
.case-stats .n .accent{color:var(--accent)}
.case-stats .l{font:400 11px/1.4 var(--mono);text-transform:uppercase;letter-spacing:.14em;color:var(--mute);margin-top:8px;max-width:24ch}
.case-next{padding:120px 0;border-top:1px solid var(--rule)}
.case-next__row{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:end}
@media(max-width:700px){.case-next__row{grid-template-columns:1fr}}
.case-next__label{font:400 12px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--mute);margin-bottom:16px}
.case-next__title{font-family:var(--serif);font-size:clamp(40px,4.8vw,68px);line-height:1.14;letter-spacing:-.02em;padding-bottom:.06em}
.case-next__title:hover .arrow{margin-left:20px}
.case-next__title .arrow{display:inline-block;margin-left:8px;transition:margin-left .35s var(--ease)}
/* =============================================================
Archive page styles
============================================================= */
.arch-hero{padding:160px 0 64px}
.arch-hero__sub{font-family:var(--serif);font-style:italic;font-size:clamp(20px,2vw,28px);color:var(--accent);margin-bottom:24px}
.arch-hero__intro{font-family:var(--serif);font-size:clamp(22px,2.4vw,32px);line-height:1.3;color:var(--ink);max-width:58ch;margin-top:48px}
.arch-era{padding:96px 0;border-top:1px solid var(--rule);position:relative}
.arch-era:first-of-type{border-top:0}
.arch-era__head{display:grid;grid-template-columns:1fr 1.6fr;gap:64px;align-items:start;margin-bottom:64px}
@media(max-width:900px){.arch-era__head{grid-template-columns:1fr;gap:24px}}
.arch-era__year{font-family:var(--serif);font-size:clamp(56px,7vw,112px);line-height:1.06;letter-spacing:-.03em;color:var(--ink);padding-bottom:.04em}
.arch-era__year .italic{font-style:italic;color:var(--accent)}
.arch-era__years{font:400 12px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--mute);margin-bottom:16px}
.arch-era__title{font-family:var(--serif);font-size:clamp(32px,3.6vw,52px);line-height:1.14;letter-spacing:-.01em;margin-bottom:24px;padding-bottom:.04em}
.arch-era__body{font-size:17px;line-height:1.6;color:var(--ink);max-width:60ch}
.arch-era__body p+p{margin-top:14px}
.arch-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:48px}
@media(max-width:900px){.arch-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.arch-grid{grid-template-columns:1fr}}
.arch-card{border:1px solid var(--rule);border-radius:12px;padding:24px;background:rgba(255,255,255,.4);transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.arch-card:hover{transform:translateY(-3px);box-shadow:0 30px 60px -30px rgba(0,0,0,.18)}
.arch-card__art{aspect-ratio:4/3;border-radius:8px;overflow:hidden;margin-bottom:20px;background:var(--paper-2);position:relative;border:1px solid var(--rule-soft)}
.arch-card__art svg{position:absolute;inset:0;width:100%;height:100%}
.arch-card__art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center}
.arch-card__tag{font:400 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:8px}
.arch-card__title{font-family:var(--serif);font-size:24px;line-height:1.1;letter-spacing:-.01em}
.arch-card__year{font:400 11px/1 var(--mono);color:var(--mute);margin-top:6px;letter-spacing:.1em}
.arch-card__desc{font-size:14px;line-height:1.55;color:var(--mute);margin-top:12px}
.arch-roster{margin-top:48px;display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media(max-width:900px){.arch-roster{grid-template-columns:repeat(2,1fr)}}
.arch-pill{font:400 12px/1 var(--mono);letter-spacing:.06em;padding:14px 16px;border:1px solid var(--rule);border-radius:999px;color:var(--ink);background:rgba(255,255,255,.3);display:flex;align-items:center;justify-content:space-between;gap:8px;text-transform:uppercase}
.arch-pill span{color:var(--mute);font-size:10px;letter-spacing:.14em}
.arch-counter{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:48px;padding:32px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
@media(max-width:900px){.arch-counter{grid-template-columns:repeat(2,1fr)}}
.arch-counter .n{font-family:var(--serif);font-size:clamp(40px,4vw,64px);line-height:1;letter-spacing:-.02em}
.arch-counter .n .accent{color:var(--accent)}
.arch-counter .l{font:400 11px/1.3 var(--mono);text-transform:uppercase;letter-spacing:.14em;color:var(--mute);margin-top:10px}
/* =============================================================
About + Contact page styles
============================================================= */
.about-hero{padding:160px 0 64px}
.about-hero__title{font-family:var(--serif);font-weight:600!important;font-size:clamp(40px,5.4vw,88px);line-height:1.14;letter-spacing:-.022em;max-width:20ch;padding-bottom:.06em}
.about-hero__title .italic{font-weight:600!important}
.about-hero__title .italic{font-style:italic;color:var(--accent)}
.about-hero__lede{font-family:var(--serif);font-size:clamp(22px,2.4vw,30px);line-height:1.3;max-width:60ch;margin-top:40px}
.about-grid{display:grid;grid-template-columns:1fr 2fr;gap:64px;margin-top:clamp(40px,5vh,64px)}
@media(max-width:900px){.about-grid{grid-template-columns:1fr;gap:32px}}
.about-grid h4{font:400 12px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--mute);margin-bottom:16px}
.about-grid p{font-size:17px;line-height:1.65;margin-bottom:18px}
/* pulled up: on a wide display the band between the lede and the stance read as a hole */
.ai-heatmap-section{margin-top:clamp(44px,5vh,68px)}
.ai-heatmap-label{font:400 12px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--mute);margin-bottom:32px}
.ai-heatmap-wrap{display:block;width:100%}
.ai-heatmap{width:100%;height:auto;display:block;overflow:visible}
.ai-heatmap__year{font:400 11px/1 var(--mono);letter-spacing:.1em;fill:rgba(10,10,10,.45);text-anchor:end}
.ai-heatmap__tick{font:400 11px/1 var(--mono);letter-spacing:.18em;fill:rgba(10,10,10,.5)}
.ai-heatmap rect{transition:fill .25s var(--ease)}
/* ---- The stance: three views of one dataset, on one clock (initStanceSweep) ----
The heatmap sweeps in year order; while it crosses a year, that year's bar rises and
the cumulative curve is wiped in through it. Every delay is a custom property set
once in JS, so the whole run is a single class toggle. */
.ai-heatmap.is-armed rect[data-yi]{
opacity:0;
transform:scale(.72);
transform-box:fill-box;
transform-origin:center;
}
/* long, overlapping fades: the sweep reads as one soft wipe across the row, where the
old .4s pop with overshoot read as three hundred cells flickering */
.ai-heatmap.is-armed.is-in rect[data-yi]{
opacity:1;
transform:none;
transition:opacity .75s ease-out var(--d,0ms),
transform .9s var(--ease-settle) var(--d,0ms);
}
/* the scan: a soft accent bar that runs along each row as its cells ink in (initStanceSweep) */
.ai-scan{fill:var(--accent);pointer-events:none}
/* the <=700px stance is a separate grid of monthly cells; same sweep, same switch */
.stance.is-armed .stance__cell{opacity:0;transform:scale(.72)}
.stance.is-armed.is-in .stance__cell{
opacity:1;transform:none;
transition:opacity .75s ease-out var(--d,0ms),
transform .9s var(--ease-settle) var(--d,0ms);
}
.stance-panels{display:grid;grid-template-columns:2fr 3fr;gap:clamp(32px,4vw,72px);
margin-top:clamp(40px,6vh,72px);padding-top:clamp(28px,4vh,40px);border-top:1px solid var(--rule)}
.stance-panel__title{font:400 11px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;
color:var(--mute);margin:0 0 20px}
.stance-panel__svg{display:block;width:100%;height:auto;overflow:visible}
.stance-panel__tick{font:400 11px/1 var(--mono);letter-spacing:.1em;fill:rgba(10,10,10,.45)}
.stance-panels.is-armed .stance-bar__fill{transform:scaleY(0);transform-box:fill-box;transform-origin:bottom}
.stance-panels.is-armed.is-in .stance-bar__fill{transform:none;
transition:transform var(--t,430ms) cubic-bezier(.45,.2,.55,.85) var(--d,0ms)} /* near-linear: the bar counts with its row */
.stance-panels.is-armed .stance-wipe{transform:scaleX(0);transform-box:fill-box;transform-origin:left}
.stance-panels.is-armed.is-in .stance-wipe{transform:none;transition:transform var(--t,2500ms) linear}
.stance-panels.is-armed .stance-dot circle{opacity:0;transform:scale(0);transform-box:fill-box;transform-origin:center}
.stance-panels.is-armed.is-in .stance-dot circle{opacity:1;transform:none;
transition:opacity .2s var(--ease) var(--d,0ms),transform .4s cubic-bezier(.2,.9,.3,1.5) var(--d,0ms)}
.stance-panels.is-armed .stance-panel__tick{opacity:0}
.stance-panels.is-armed.is-in .stance-panel__tick{opacity:1;transition:opacity .5s var(--ease) .2s}
/* linked focus. Only once the run is done: the per-cell delays would otherwise make a
hover take seconds to answer. */
.ai-heatmap-section.is-done .ai-heatmap rect[data-yi],
.ai-heatmap-section.is-done .stance-bar,
.ai-heatmap-section.is-done .stance-dot circle{transition:opacity .22s var(--ease)}
.ai-heatmap-section.has-year .ai-heatmap rect[data-yi]:not(.is-year),
.ai-heatmap-section.has-year .stance-bar:not(.is-year),
.ai-heatmap-section.has-year .stance-dot:not(.is-year) circle{opacity:.2}
.ai-heatmap-section.has-year .is-year .stance-panel__tick{fill:var(--accent)}
.stance-bar,.stance-dot,.ai-heatmap rect[data-yi]{cursor:crosshair}
@media(max-width:700px){
.stance-panels{grid-template-columns:1fr;gap:36px}
}
/* ---- About: the headline, drawn as a year ruler ----
One tick a year from 2005. The baseline inks in left to right, turns accent as it
enters the fintech years, and "fintech" in the headline types one letter per year
as it does (initAboutRuler). Every delay hangs off --i so the sweep is one class. */
.yr{position:relative;margin-top:clamp(56px,8vh,96px);padding-top:64px;padding-bottom:58px;
--n:21;--step:105ms;outline:none;cursor:crosshair;touch-action:pan-y}
.yr__track{display:block;position:relative;height:22px}
.yr__base{position:absolute;left:0;bottom:0;height:1px;background:var(--ink);opacity:.55;
width:calc(var(--a) / var(--n) * 100%);transform:scaleX(0);transform-origin:left}
.yr__base--accent{left:calc(var(--a) / var(--n) * 100%);width:calc((var(--n) - var(--a)) / var(--n) * 100%);
height:3px;bottom:-1px;background:var(--accent);opacity:1}
.yr__tick{position:absolute;bottom:0;left:calc(var(--i) / var(--n) * 100%);width:1px;height:9px;
background:var(--ink);opacity:0;transform:scaleY(0);transform-origin:bottom;
transition:height .25s var(--ease),opacity .25s var(--ease)}
.yr__tick--major{height:18px}
.yr__tick--accent{background:var(--accent)}
.yr__tick.is-on{height:22px;opacity:1!important}
.yr__label{position:absolute;top:calc(100% + 12px);left:calc(var(--i) / var(--n) * 100%);
transform:translateX(-50%);font:400 11px/1 var(--mono);letter-spacing:.14em;color:var(--mute);opacity:0}
.yr__label--first{transform:none}
.yr__label--now{transform:translateX(-100%);color:var(--accent)}
.yr__note{position:absolute;right:0;top:calc(100% + 34px);font:400 11px/1 var(--mono);
letter-spacing:.18em;text-transform:uppercase;color:var(--accent);opacity:0;white-space:nowrap}
.yr__now{position:absolute;right:-4px;bottom:-3px;width:8px;height:8px;border-radius:50%;
background:var(--accent);box-shadow:0 0 0 4px rgba(255,0,46,.15);opacity:0;
animation:pulse 2.4s var(--ease) infinite}
/* the flag rides the ruler: the year in the display face, its era in the label face */
.yr__flag{position:absolute;top:0;left:0;display:flex;align-items:baseline;gap:12px;white-space:nowrap;
pointer-events:none;opacity:0;will-change:transform}
.yr__flag-year{font:italic 600 34px/1 var(--serif);letter-spacing:-.02em;color:var(--ink);
font-variant-numeric:tabular-nums}
.yr__flag.is-accent .yr__flag-year{color:var(--accent)}
.yr__flag-era{font:400 11px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--mute)}
.yr:focus-visible .yr__flag-year{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px}
.yr.is-in .yr__base{transform:none;transition:transform calc(var(--a) * var(--step)) linear}
.yr.is-in .yr__base--accent{transition:transform calc((var(--n) - var(--a)) * var(--step)) linear calc(var(--a) * var(--step))}
.yr.is-in .yr__tick{opacity:.4;transform:none;
transition:opacity .3s var(--ease) calc(var(--i) * var(--step)),transform .3s var(--ease) calc(var(--i) * var(--step)),height .25s var(--ease)}
.yr.is-in .yr__tick--major{opacity:.7}
.yr.is-in .yr__tick--accent{opacity:1}
.yr.is-in .yr__label{opacity:1;transition:opacity .4s var(--ease) calc(var(--i) * var(--step))}
.yr.is-in .yr__flag{opacity:1;transition:opacity .3s var(--ease)}
.yr.is-in .yr__note,.yr.is-in .yr__now{opacity:1;transition:opacity .5s var(--ease) calc(var(--n) * var(--step))}
@media(max-width:700px){
.yr{padding-top:52px}
.yr__flag-year{font-size:26px}
.yr__label{font-size:10px;letter-spacing:.08em}
}
/* ---- The signature, blown up behind the words as texture ----
The device is lifted from the testimonial on snyx.com: one oversized glyph at a
few percent ink sitting behind the text, never competing with it. There the glyph
is an opening quote; here it is the site's own signature, which is the mark this
page is signed with. Ink not paper, so it reads on the light ground. */
.about-hero{position:relative;overflow:hidden;padding-bottom:40px}
.about-hero > .wrap{position:relative;z-index:1}
.hero-mark{
position:absolute;
z-index:0;
top:50%;
right:calc(var(--gutter) * -1);
width:min(58vw,860px);
transform:translate3d(0,-50%,0);
color:var(--ink);
opacity:.055;
pointer-events:none;
user-select:none;
will-change:transform;
}
.hero-mark svg{display:block;width:100%;height:auto}
@media(max-width:900px){
.hero-mark{width:min(86vw,560px);right:calc(var(--gutter) * -1.4);opacity:.05}
}
.contact-form{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:64px}
@media(max-width:700px){.contact-form{grid-template-columns:1fr}}
.contact-form .full{grid-column:span 2}
@media(max-width:700px){.contact-form .full{grid-column:span 1}}
.contact-form label{display:block;font:400 11px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--mute);margin-bottom:10px}
.contact-form input,.contact-form textarea,.contact-form select{
width:100%;padding:18px 20px;border:1px solid var(--rule);border-radius:12px;
background:rgba(255,255,255,.5);font:400 16px/1.4 var(--sans);color:var(--ink);
transition:border-color .3s var(--ease),background .3s var(--ease);
}
.contact-form input:focus,.contact-form textarea:focus,.contact-form select:focus{
outline:none;border-color:var(--ink);background:#fff;
}
.contact-form textarea{resize:vertical;min-height:160px}
.contact-channels{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:64px}
@media(max-width:700px){.contact-channels{grid-template-columns:1fr}}
.channel{padding:32px;border:1px solid var(--rule);border-radius:16px;background:rgba(255,255,255,.4);transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.channel:hover{transform:translateY(-3px);box-shadow:0 30px 60px -30px rgba(0,0,0,.18)}
.channel h5{font:400 11px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--mute);margin-bottom:12px}
.channel a,.channel p{font-family:var(--serif);font-size:24px;line-height:1.15;letter-spacing:-.01em}
/* =============================================================
Utilities
============================================================= */
.dark-bg{background:var(--ink);color:var(--paper)}
.dark-bg .rule{background:rgba(243,239,231,.14)}
.dark-bg .arch-card{background:rgba(255,255,255,.04);border-color:rgba(243,239,231,.1)}
.dark-bg .arch-card__desc{color:rgba(243,239,231,.7)}
.dark-bg .arch-card__title,.dark-bg .case-grid h4{color:var(--paper)}
.dark-bg .arch-pill{background:rgba(255,255,255,.04);border-color:rgba(243,239,231,.14);color:rgba(243,239,231,.92)}
.dark-bg .arch-pill span{color:rgba(243,239,231,.5)}
/* ===============================================================
EDITORIAL HERO COMPOSITION v3 — full-bleed portrait, magazine cover
=============================================================== */
/* ===========================================================
HERO — composition mirrors mylesholman.com reference:
LEFT : eyebrow, myles wordmark, role label, lede, two text links
RIGHT : large inked caricature, anchored to the bottom of the fold
Rebuilt 2026-05-23 (round 3) after studying the live site directly.
=========================================================== */
.hero{
position:relative;
min-height:100svh;
display:flex;
flex-direction:column;
/* wrap takes the full fold via flex:1; strip sits at the bottom of hero */
overflow:hidden;
padding:0;
}
.hero__wrap{
position:relative;
z-index:2;
/* clear nav at top, NO bottom padding — portrait anchors to bottom of fold */
padding-top:clamp(96px,12vh,140px);
padding-bottom:0;
display:flex;
flex-direction:column;
flex:1;
}
/* ---- 2-col grid: intro centred | portrait bottom-anchored, scales to fill ---- */
.hero__grid{
display:grid;
/* portrait gets the larger share, like the reference */
grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
gap:clamp(32px,4vw,80px);
/* per-cell alignment via align-self below; row stretches to fill .hero__wrap */
align-items:stretch;
flex:1;
}
/* ---- LEFT: editorial intro column, vertically centred within the row ---- */
.hero__intro{
position:relative;
min-width:0;
display:flex;
flex-direction:column;
gap:clamp(18px,2.2vh,28px);
/* The hero overflows the fold (portrait is taller than the viewport), so
centring against the grid row pushes the intro low. Instead, pin the column
to the visible fold height and centre within that — reads as middle-aligned
against the on-screen portrait regardless of how tall the figure runs. */
align-self:start;
min-height:calc(100svh - clamp(96px,12vh,140px));
justify-content:center;
}
/* every animated child starts hidden + slightly translated; data-anim drives reveal */
.hero__intro [data-anim]{
opacity:0;
transform:translateY(18px);
animation:hero-reveal 1s var(--ease) forwards;
}
.hero__intro [data-anim="eyebrow"] {animation-delay:.20s}
.hero__intro [data-anim="mark"] {animation-delay:.32s}
.hero__intro [data-anim="manifesto"] {animation-delay:.55s}
.hero__intro [data-anim="lede"] {animation-delay:.85s}
.hero__intro [data-anim="actions"] {animation-delay:1.05s}
@keyframes hero-reveal{
to{opacity:1;transform:translateY(0)}
}
/* eyebrow: small mono w/ red tick mark before it */
.hero__eyebrow{
margin:0;
padding-bottom:15px;
display:inline-flex;align-items:center;gap:12px;
font:400 12px/1 var(--mono);
letter-spacing:.24em;text-transform:uppercase;
color:var(--mute);
}
.hero__eyebrow-mark{
width:24px;height:1px;background:var(--accent);
display:inline-block;
}
/* wordmark — slightly larger than before; entrance scale gives it a snap */
.hero__mark{
/* flush to the column edge: the 'm' opens on a round stroke, so its ink sits ~2px
left of the flat stems of 'Designer' and the lede below — the overshoot a curve
needs to read as aligned. (The old -9px nudge was set while the animated copy was
centring itself in the column, so it never landed anywhere near the margin.) */
margin:0;
padding:6px 0 4px;
}
.hero__mark-img{
display:block;
width:clamp(240px, 24vw, 380px);
height:auto;
color:var(--ink);
}
/* manifesto: the new editorial statement */
.hero__manifesto{
margin:0;
font-family:var(--serif);
font-weight:600;
font-size:clamp(36px, 4.4vw, 64px);
line-height:.98;
letter-spacing:-.018em;
color:var(--ink);
}
.hero__manifesto-line{
display:block;
}
.hero__manifesto-line--tail{
/* slight optical indent */
padding-left:.08em;
}
.hero__manifesto em{
font-style:italic;
color:var(--accent);
font-weight:600;
/* reveal the accent word a beat later than its host line */
display:inline-block;
opacity:0;
animation:fade-up .9s var(--ease) 1s forwards;
}
@keyframes fade-up{
from{opacity:0;transform:translateY(10px)}
to {opacity:1;transform:translateY(0)}
}
/* lede */
.hero__lede{
margin:0;
max-width:44ch;
font-family:var(--sans);
font-size:clamp(15px, 1.05vw, 17px);
line-height:1.55;
color:var(--ink);
}
/* actions: one primary pill + two quieter text links beneath */
.hero__actions{
display:flex;flex-direction:column;
gap:18px;
margin-top:clamp(8px,1vh,16px);
align-items:flex-start;
}
/* PRIMARY CTA — bold, oxblood, large */
.hero__cta{
display:inline-flex;align-items:center;gap:14px;
padding:18px 28px;
background:var(--accent);color:var(--paper);
border:1px solid var(--accent);
border-radius:999px;
font:500 16px/1 var(--sans);letter-spacing:.005em;
white-space:nowrap;
transition:background .3s var(--ease), color .3s var(--ease),
border-color .3s var(--ease), transform .3s var(--ease),
box-shadow .3s var(--ease);
box-shadow:0 8px 24px -10px rgba(255,0,46,.4);
position:relative;
}
.hero__cta:hover{
background:var(--ink);
border-color:var(--ink);
color:var(--paper);
transform:translateY(-1px);
box-shadow:0 12px 30px -10px rgba(10,10,10,.45);
}
.hero__cta-arrow{
width:20px;height:20px;
transition:transform .3s var(--ease);
}
.hero__cta:hover .hero__cta-arrow{transform:translateX(5px)}
/* ---- RIGHT: inked caricature with ink-bleed reveal + breathing + parallax ---- */
.hero__portrait{
position:relative;
margin:0;
margin-right:calc(var(--gutter) * -1);
display:flex;
align-items:flex-end;
justify-content:flex-end;
/* fill the full grid cell — strip is anchored at the bottom of .hero */
height:100%;
align-self:stretch;
perspective:1200px;
}
/* tilt wrapper — JS sets --tx and --ty in degrees on mousemove */
.hero__portrait-tilt{
width:100%;height:100%;
display:flex;align-items:flex-end;justify-content:flex-end;
transform:rotateY(var(--tx, 0deg)) rotateX(var(--ty, 0deg));
transform-style:preserve-3d;
transition:transform .8s var(--ease);
will-change:transform;
}
/* stage — handles the breathing scale loop after entrance */
.hero__portrait-stage{
height:100%;
display:flex;align-items:flex-end;justify-content:flex-end;
animation:portrait-breathe 9s ease-in-out 2.2s infinite;
transform-origin:50% 90%;
}
@keyframes portrait-breathe{
0%, 100% {transform:scale(1.000)}
50% {transform:scale(1.012)}
}
/* image — ink-bleed mask reveal entrance, then sits */
.hero__portrait-img{
display:block;
height:100%;
width:auto;
max-width:100%;
object-fit:contain;
object-position:right bottom;
margin-left:auto;
/* mask wipe: starts fully clipped from bottom, reveals upward */
-webkit-mask-image:linear-gradient(to top,
black 0%, black var(--reveal, 0%), transparent calc(var(--reveal, 0%) + 8%), transparent 100%);
mask-image:linear-gradient(to top,
black 0%, black var(--reveal, 0%), transparent calc(var(--reveal, 0%) + 8%), transparent 100%);
-webkit-mask-repeat:no-repeat;
mask-repeat:no-repeat;
-webkit-mask-size:100% 100%;
mask-size:100% 100%;
animation:portrait-ink-bleed 1.8s cubic-bezier(.22,.61,.36,1) .35s forwards;
}
@keyframes portrait-ink-bleed{
0% {--reveal: 0%; opacity:0; filter:blur(3px) contrast(.92)}
25% {opacity:1}
100% {--reveal:100%; opacity:1; filter:blur(0) contrast(1)}
}
/* register the custom property so it animates smoothly */
@property --reveal{
syntax: '';
initial-value: 0%;
inherits: false;
}
/* ============================================================
2026-07 type rebuild — Zodiak (display) / Author (text) /
Fragment Mono (labels). Plate captions for real product shots.
============================================================ */
.case__shot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top;transition:transform .8s var(--ease)}
.case__visual:hover .case__shot{transform:scale(1.03)}
/* a plate module mounts here and fills the plate box, clipping itself. The blanket
.case__visual svg rule above already stretches whatever SVG it draws. */
.plate{position:absolute;inset:0;overflow:hidden}
.plate-cap{position:absolute;left:16px;bottom:16px;z-index:2;display:inline-flex;align-items:baseline;gap:12px;padding:9px 14px;background:var(--paper);border:1px solid var(--rule);font:400 10px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ink);box-shadow:0 10px 24px -12px rgba(10,10,10,.35);max-width:calc(100% - 32px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.plate-cap__no{color:var(--accent);flex:none}
/* ============================================================
ACT II — broadsheet layer (2026-07-04, free-rein pass; scale dialled in 2026-09-20)
Stacked paper case sheets, banner names, ink ledger + marquee,
CTA + mail line, ink footer, chapter drop caps.
Type scale is anchored to the 14px nav / 16px body, not to the viewport:
statements (CTA, ledger thesis) top out around 60px, section titles and case
banners around 48-54px, stat numbers around 42px. The hero manifesto stays the
loudest type on the site. The first pass ran 2-3x that and read as shouting.
============================================================ */
/* ---- broadsheet scale, site-wide ---- */
.section__title{font-size:clamp(30px,3vw,48px);line-height:1.1;letter-spacing:-.02em}
.cta{padding:clamp(120px,18vh,200px) 0}
.cta__title{font-size:clamp(34px,4vw,64px);line-height:1.06;letter-spacing:-.022em;max-width:none}
.cta__title .italic{white-space:nowrap}
.case-hero__title{font-size:clamp(32px,3.6vw,56px);line-height:1.08;max-width:18ch}
.case-section__num{font-size:clamp(30px,2.8vw,44px)}
.case-next__title{font-size:clamp(30px,3.2vw,50px);line-height:1.1}
.case-stats .n{font-size:clamp(30px,2.8vw,44px)}
.case-pull{font-size:clamp(22px,2vw,32px);line-height:1.2;border-left:3px solid var(--accent)}
.arch-era__year{font-size:clamp(36px,3.6vw,58px);line-height:1.04}
.arch-counter .n{font-size:clamp(28px,2.6vw,42px)}
.about-hero__title{font-size:clamp(32px,3.6vw,56px);line-height:1.08}
.arch-hero__intro,.about-hero__lede{font-size:clamp(19px,1.5vw,24px)}
/* ---- no widows ----
Running text pulls a word down rather than stranding one on the last line
("...research led, AI fluent, end to / end."). Headings that wrap get balanced
lines instead of a long line and a stub. Both degrade to normal wrapping. */
p,li,figcaption,blockquote,.lede,.case__desc,.case__lede,.case-hero__lede,
.case-section__intro,.about-hero__lede,.arch-hero__intro,.section__intro,
.hero__lede,.foot__col p,.plate-cap,.cap__list li{text-wrap:pretty}
.section__title,.case__name,.case-next__title,.case-section__title,
.arch-era__title,.about-hero__title,.case-hero__title,.quote__body{text-wrap:balance}
/* second rung: ledes and in-page section headings, kept clearly under the titles
they sit beneath (they had drifted to within a few px of them) */
.case-hero__lede{font-size:clamp(19px,1.6vw,25px);line-height:1.35}
.case-section__title,.arch-era__title{font-size:clamp(26px,2.6vw,40px);line-height:1.16}
.case-section__intro{font-size:clamp(18px,1.4vw,21px);line-height:1.5}
/* chapter drop caps on case-study section intros */
.case-section__intro::first-letter{float:left;font-size:2.9em;line-height:.8;padding:.05em .12em 0 0;font-style:italic;font-weight:600;color:var(--accent)}
/* ---- the case deck: five sheets of paper stacking on scroll ---- */
#cases.section{padding-bottom:0}
.work{display:block}
.case{background:var(--paper);border:1px solid var(--rule);box-shadow:0 -26px 60px -34px rgba(10,10,10,.4);padding:clamp(24px,4vw,64px)}
.case:nth-child(even){background:var(--paper-2)}
.case+.case{margin-top:clamp(48px,8vh,96px)}
/* The name heads its own column rather than banding across the whole sheet: a
full-width masthead spent a line of card width on two words and left a long
empty stretch between the name and the docket. Docket over name follows the
site's own eyebrow-then-title pattern. */
.case__copy>.case__meta{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 20px;
margin:0 0 clamp(10px,1.4vh,16px)}
.case__meta .case__sector{margin:0}
.case__copy>.case__name{margin:0 0 clamp(18px,2.9vh,34px);padding:0;
font-size:clamp(30px,3vw,48px);line-height:1.02;letter-spacing:-.02em}
.case__num{color:var(--accent)}
/* the description carries the sheet opposite a 500px plate, so it is set as a
standfirst — serif, display-adjacent size, narrow measure — not as 17px UI text.
Set small it left the column two-thirds empty whatever the alignment. */
.case__desc{color:var(--ink);font-family:var(--serif);font-weight:500;
font-size:clamp(17px,1.25vw,21px);line-height:1.5;letter-spacing:0;max-width:40ch}
/* air either side of the standfirst — it is the one soft block between two hard ones */
.case__tags{margin-top:clamp(28px,4vh,46px)}
.case__cta{margin-top:clamp(26px,3.4vh,38px)}
.case__copy>.case__desc{margin-top:0}
/* plate and copy both hang off the rule. The base card centres its two columns
against each other, which on a sheet this tall dropped the copy ~110px below the
plate; and an auto banner row quietly ate a slice of the sheet's spare height. */
@media(min-width:901px){
.case{align-items:start}
/* the copy block is much shorter than the plate beside it, so centre it on the
plate's height — top-aligning it left a 300px hole under the CTA */
.case__copy{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;height:100%}
}
@media(min-width:901px) and (min-height:640px){
/* no min-height: the sheet is as tall as its plate, so the copy column is exactly
the plate's height and the CTA anchors to the plate's bottom edge */
.case{position:sticky;--deck:clamp(84px,10vh,108px)}
.case+.case{margin-top:10vh}
.case:nth-child(1){top:var(--deck);z-index:1}
.case:nth-child(2){top:calc(var(--deck) + 14px);z-index:2}
.case:nth-child(3){top:calc(var(--deck) + 28px);z-index:3}
.case:nth-child(4){top:calc(var(--deck) + 42px);z-index:4}
.case:nth-child(5){top:calc(var(--deck) + 56px);z-index:5}
.work{padding-bottom:10vh}
}
/* ---- ink ledger: the record, set in stone ---- */
.ledger{background:var(--ink);color:var(--paper);padding:clamp(96px,14vh,180px) 0 0;margin-top:clamp(80px,12vh,140px);position:relative;z-index:6}
.ledger .eyebrow{color:rgba(243,239,231,.5)}
.ledger__thesis{font-family:var(--serif);font-weight:600;font-size:clamp(32px,3.8vw,60px);line-height:1.08;letter-spacing:-.02em;max-width:18ch;margin-top:40px;padding-bottom:.06em}
.ledger__thesis em{font-style:italic;color:var(--accent)}
.ledger__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;margin-top:clamp(56px,9vh,110px);padding:44px 0 clamp(64px,10vh,120px);border-top:1px solid rgba(243,239,231,.16)}
.ledger__cell .n{font-family:var(--serif);font-weight:600;font-size:clamp(28px,2.6vw,42px);line-height:1;display:block;color:var(--paper)}
.ledger__cell .n i{font-style:italic;color:var(--accent)}
.ledger__cell .l{font:400 11px/1.4 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:rgba(243,239,231,.5);display:block;margin-top:14px}
@media(max-width:900px){.ledger__grid{grid-template-columns:1fr 1fr;gap:40px 24px}}
/* type marquee riding the ledger's lower edge */
.tickr{overflow:hidden;border-top:1px solid rgba(243,239,231,.16);padding:18px 0}
.tickr__track{display:inline-flex;align-items:baseline;gap:40px;width:max-content;animation:tickr 30s linear infinite;will-change:transform}
.tickr__track span{font:400 12px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;white-space:nowrap;color:rgba(243,239,231,.72)}
.tickr__track b{font:400 12px/1 var(--mono);color:var(--accent)}
@keyframes tickr{to{transform:translateX(-50%)}}
/* ---- giant mail line under the CTA ---- */
.cta__mail{display:inline-block;margin-top:clamp(36px,5vh,56px);font-family:var(--serif);font-style:italic;font-weight:600;font-size:clamp(20px,1.7vw,26px);line-height:1.2;letter-spacing:-.01em;color:var(--ink);border-bottom:1px solid var(--accent);padding-bottom:.06em;transition:color .3s var(--ease)}
.cta__mail:hover{color:var(--accent)}
/* ---- ink footer: the sign-off ---- */
.foot{background:var(--ink);border-top:none;padding:clamp(72px,11vh,140px) 0 36px;position:relative;z-index:6;color:var(--paper)}
.foot__top{grid-template-columns:3fr 1fr 1fr 1fr;gap:40px}
@media(max-width:900px){.foot__top{grid-template-columns:1fr 1fr}}
.foot__col h5{color:rgba(243,239,231,.4)}
.foot__col a{color:rgba(243,239,231,.75)}
.foot__col a:hover{color:var(--accent)}
.foot .foot__col p{color:rgba(243,239,231,.55)!important}
.foot__sig{font-size:clamp(34px,3.4vw,54px);letter-spacing:-.02em;color:var(--paper);display:block;padding-bottom:.08em}
.foot__bot{border-top-color:rgba(243,239,231,.16);color:rgba(243,239,231,.45)}
.foot__bot .copy-mark{color:var(--accent)}
/* "matter." types itself, letter by letter, with the stop a beat late (js/site.js
typeAccentWord). Letters keep their layout box and fade in place, so the line never
reflows; the caret is moved to the measured right edge of the last letter instead. */
.hero__manifesto em,.hero-m__manifesto em{position:relative}
/* !important on display: the mobile hero sets `.hero-m__manifesto span{display:block}`
to stack its three lines, and that rule is more specific than this one — without the
override every typed letter becomes its own line. */
.type__ch,.type__caret{display:inline-block!important}
.type__ch{opacity:0}
.type__caret{position:absolute;left:0;top:.16em;width:.05em;height:.74em;
background:var(--accent);transform:translateX(0);
transition:transform .085s linear;
animation:type-blink .85s steps(1,end) infinite}
.type__caret.is-done{animation:none;opacity:0;
transition:opacity .45s ease .4s,transform .085s linear}
@keyframes type-blink{0%,49%{opacity:1}50%,100%{opacity:0}}
/* hero manifesto: now set as three short lines — "Designer of" / "things that" /
"matter." — so the accent word owns a line of its own. The longest line is short
enough that the intro column stops being the limit and the fold does: the size
tracks the smaller of width (4.4vw) and fold height (7svh) so the third line and
the CTA under it never get pushed past the ticker on a shallow window. */
.hero__manifesto{font-size:clamp(30px,min(4.4vw,7svh),68px)}
/* "matter." stands alone on its own line — no leading word to optically indent past */
.hero__manifesto-line--tail{padding-left:0}
/* =============================================================
2026-10-18 — the audit. Bare copy, big type, ink that settles.
Inner pages carry body.inner. The homepage hero is untouched; everything
below it and every inner page shares the motion in this block. The hero's
story is ink: a drop falls, a pen writes, a word types itself. The rest of the
site is made of the same stuff. Type rises off its baseline and settles,
pictures wipe in like a loaded brush, hairlines draw themselves, numbers count.
Nothing here is gated on prefers-reduced-motion: Windows reports it for people
who never asked, and it would flatten the site for a large share of visitors.
============================================================= */
/* ---- first fold: a load-in choreography, CSS only, ordered by --i ----
.ph-in fades and settles up. .ph-line clips a line of display type so its .ph-in
rises from under the baseline, the way the hero manifesto lands. .ph-wash wipes a
picture in left to right. .ph-rule draws the hairline over a row of facts, then
pops the facts in one after another. */
@keyframes ph-settle{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes ph-rise{from{transform:translateY(118%)}to{transform:none}}
@keyframes ph-pop{from{opacity:0;transform:translateY(10px) scale(.94)}to{opacity:1;transform:none}}
@keyframes ph-ink{from{color:var(--ink)}}
@keyframes ph-wash{to{clip-path:inset(0 0 0 0 round var(--r,16px))}}
@keyframes ph-zoom{from{transform:scale(1.07)}to{transform:none}}
@keyframes ph-draw{from{transform:scaleX(0)}to{transform:none}}
.ph-in{animation:ph-settle .9s var(--ease-settle) both;animation-delay:calc(.08s + var(--i,0) * .1s)}
.ph-line{display:block;clip-path:inset(-.12em -.3em -.16em -.3em)}
.ph-line>.ph-in{display:block;animation-name:ph-rise;animation-duration:1.05s}
/* the accent word dries from ink to red a beat after its line has landed. The keyframe
only sets the start colour: the about page types "fintech" and clears the animation
on it, and the word has to be red either way. */
.ph-line .italic{animation:ph-ink .8s ease both;animation-delay:calc(.8s + var(--i,0) * .1s)}
.ph-wash{--r:16px;clip-path:inset(0 100% 0 0 round var(--r));animation:ph-wash 1.15s var(--ease-wipe) both;animation-delay:calc(.2s + var(--i,0) * .1s)}
.ph-wash>img{animation:ph-zoom 1.8s var(--ease-settle) both;animation-delay:calc(.2s + var(--i,0) * .1s)}
.ph-rule{position:relative;border-top-color:transparent!important}
.ph-rule::before{content:"";position:absolute;left:0;top:-1px;width:100%;height:1px;background:var(--rule);transform-origin:left;animation:ph-draw 1.1s var(--ease-wipe) both;animation-delay:calc(.1s + var(--i,0) * .1s)}
.ph-rule>*{animation:ph-pop .7s var(--ease-pop) both;animation-delay:calc(.4s + var(--i,0) * .1s + var(--k,0) * .08s)}
.ph-rule>*:nth-child(2){--k:1}.ph-rule>*:nth-child(3){--k:2}.ph-rule>*:nth-child(4){--k:3}.ph-rule>*:nth-child(5){--k:4}
/* a signature that writes itself (svg[data-pen], js/site.js initMarkWrite) stays blank until the pen lands */
svg[data-pen] path{opacity:0}
/* ---- header on inner pages: the links pop in one after another, then the button ---- */
@keyframes hdr-pop{from{opacity:0;transform:translateY(8px) scale(.86)}to{opacity:1;transform:none}}
.inner .nav__links a{animation:hdr-pop .55s var(--ease-pop) backwards;animation-delay:calc(.3s + var(--i,0) * .07s)}
.inner .nav__links a:nth-child(2){--i:1}.inner .nav__links a:nth-child(3){--i:2}
.inner .nav__links a:nth-child(4){--i:3}.inner .nav__links a:nth-child(5){--i:4}
.inner .nav__cta{animation:hdr-pop .55s var(--ease-pop) .72s backwards}
.inner .nav__toggle{animation:hdr-pop .55s var(--ease-pop) .25s backwards}
/* ---- section heads: a hairline draws across as the head comes in ---- */
.case-section__head{position:relative;padding-top:28px}
.case-section__head::before{content:"";position:absolute;left:0;top:0;width:100%;height:1px;background:var(--rule);transform:scaleX(0);transform-origin:left;transition:transform 1.1s var(--ease-wipe)}
.case-section__head.is-in::before{transform:none}
.dark-bg .case-section__head::before,.section--dark .case-section__head::before{background:rgba(243,239,231,.18)}
/* the pull quote's accent word underlines itself once the quote has landed */
.case-pull em{background-image:linear-gradient(rgba(255,0,46,.4),rgba(255,0,46,.4));background-repeat:no-repeat;background-size:0% .07em;background-position:0 96%;transition:background-size .8s var(--ease-wipe) .55s}
.case-pull.is-in em{background-size:100% .07em}
.crumb{display:flex;align-items:center;gap:16px;font:400 12px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}
.crumb a:hover{color:var(--accent)}
/* ---- the inner scale. One loud thing per page: the hero title. Everything under it
steps down in clear rungs so the page reads as a hierarchy, not a shout:
hero title ~88px the page's one display line
section title ~52px a heading, red on one word at most
statement ~32px a line of serif you read, ink only
body 17-19px
The homepage is not .inner and keeps the manifesto as its loudest type. ---- */
.inner .section{padding:clamp(72px,11vh,120px) 0}
.inner .about-hero,.inner .case-hero{padding-top:clamp(132px,18vh,180px)}
/* the record is the /work/ hero's picture, so the fold is kept tight enough to show it */
.inner .arch-hero{padding-top:clamp(112px,14vh,150px)}
.inner .arch-hero__intro{margin-top:clamp(20px,3vh,32px)}
.inner .about-hero__title,.inner .case-hero__title{font-size:clamp(40px,5.8vw,88px);line-height:1;letter-spacing:-.03em;max-width:none}
.inner .about-hero__lede,.inner .arch-hero__intro,.inner .case-hero__lede{font-family:var(--serif);font-weight:500;font-size:clamp(19px,1.6vw,26px);line-height:1.35;max-width:46ch;margin-top:clamp(28px,4vh,44px);color:var(--ink)}
.inner .case-hero__facts{margin-top:clamp(48px,7vh,80px)}
.inner .case-hero__visual{margin-top:clamp(56px,8vh,96px)}
.inner .section__title{font-size:clamp(30px,3.2vw,52px);line-height:1.04}
.inner .section__head{margin-bottom:clamp(40px,6vh,64px)}
.section__intro{font-size:clamp(17px,1.25vw,20px);line-height:1.5;color:var(--ink)}
.inner .case-section__title,.inner .arch-era__title{font-size:clamp(28px,3vw,46px);line-height:1.08}
.inner .case-section__intro{font-size:clamp(20px,1.7vw,26px);line-height:1.35;max-width:42ch}
.inner .case-section__intro::first-letter{font-size:2.6em}
.inner .case-grid{gap:44px 56px}
.inner .case-grid h4{font-size:clamp(22px,1.7vw,26px);line-height:1.12}
.inner .case-grid p{font-size:17px;line-height:1.5}
.inner .case-stats .n{font-size:clamp(40px,4.2vw,68px)}
.inner .case-stats .l{font-size:12px;margin-top:12px}
.inner .fact p{font-size:17px}
.inner .arch-counter .n{font-size:clamp(36px,3.6vw,60px)}
.inner .arch-counter .l{font-size:12px}
.inner .arch-era__year{font-size:clamp(52px,6vw,96px)}
.inner .arch-era__body{font-size:clamp(17px,1.3vw,20px);line-height:1.5;max-width:46ch}
.inner .arch-card__title{font-size:26px}
.inner .arch-card__desc{font-size:16px}
.inner .arch-pill{font-size:13px;padding:15px 18px}
.inner .cap__title{font-size:26px}
.inner .cap__desc{font-size:17px}
.inner .now__row{padding:22px 0}
.inner .now__y{font-size:13px}
.inner .now__r{font-size:17px}
.inner .now__s{font-size:16px}
.inner .now__c{font-size:24px}
.inner .cta__title{font-size:clamp(36px,4.6vw,72px);line-height:1.02}
.inner .case-pull{font-size:clamp(24px,2.2vw,34px)}
.inner .case-next__title{font-size:clamp(32px,3.4vw,52px)}
.inner .t-title{font-size:30px}
.inner .t-note{font-size:16px}
.inner .wf-ptitle{font-size:clamp(22px,2vw,28px)}
.inner .wf-pdesc{font-size:16px}
.inner .wf-note__body p{font-size:17px}
.inner .wf-note__body h4{font-size:22px}
.eyebrow{font-size:12px}
.foot__col a,.foot__col p{font-size:15px}
/* homepage sheets: the standfirst is one line now, so it is set larger */
.case__copy>.case__desc{font-size:clamp(19px,1.45vw,25px);line-height:1.4;max-width:34ch}
/* ---- about: most useful in three places, set as three statements; how I work, four words.
Statements are the reading rung: serif at ~32px, medium weight, ink only. The red stays
on the section title's one word; a red word in every row turned the page into a shout. */
.three{margin-top:clamp(32px,5vh,48px);max-width:60ch}
.three__row{display:grid;grid-template-columns:3ch 1fr;gap:clamp(16px,2vw,32px);align-items:baseline;padding:clamp(18px,2.8vh,28px) 0;border-top:1px solid var(--rule)}
.three__row:last-child{border-bottom:1px solid var(--rule)}
.three__n{font:400 12px/1 var(--mono);letter-spacing:.18em;color:var(--mute)}
.three__t{font-family:var(--serif);font-weight:500;font-size:clamp(22px,2.1vw,32px);line-height:1.25;letter-spacing:-.012em;color:var(--ink);text-wrap:pretty}
.three__t em{font-style:italic;font-weight:500;color:var(--ink)}
.hows{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(24px,3vw,48px)}
@media(max-width:900px){.hows{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.hows{grid-template-columns:1fr}}
.how__t{font-family:var(--serif);font-weight:600;font-size:clamp(20px,1.6vw,24px);line-height:1.12;letter-spacing:-.012em}
.how__t em{font-style:italic;font-weight:600;color:var(--ink)}
.how__d{font-size:16px;line-height:1.55;color:var(--mute);margin-top:12px;max-width:30ch}
/* ---- contact: the address is the page ---- */
.mail-big{display:inline-block;margin-top:clamp(28px,4vh,44px);font-family:var(--serif);font-style:italic;font-weight:600;font-size:clamp(28px,4.2vw,64px);line-height:1.05;letter-spacing:-.025em;color:var(--ink);text-decoration:none;border-bottom:3px solid var(--accent);padding-bottom:.04em;transition:color .3s var(--ease),border-color .3s var(--ease)}
.mail-big:hover{color:var(--accent)}
.sign{display:block;width:clamp(96px,9vw,140px);margin-top:clamp(28px,4vh,40px);color:var(--ink)}
.sign svg{display:block;width:100%;height:auto}
/* ---- the record: four hundred projects as ink, poured onto twenty years (js/record.js) ----
One dot per project on record, piled by year. Named ones carry their name on hover;
the five case studies are red and open their page. The size of a dot is the length of
the engagement, so the early studio years read as a shower of small jobs and the
recent years as a few heavy roles. Volume, then depth. */
.record{position:relative;width:100%;margin-top:clamp(32px,5vh,56px);--rec-ink:var(--ink);--rec-soft:rgba(10,10,10,.45);--rec-band:rgba(10,10,10,.03)}
.record--dark{--rec-ink:var(--paper);--rec-soft:rgba(243,239,231,.45);--rec-band:rgba(243,239,231,.045)}
.record svg{display:block;width:100%;height:auto;overflow:visible}
.record__band{fill:var(--rec-band)}
.record__base{stroke:var(--rec-soft);stroke-opacity:.6}
.record__dot{fill:var(--rec-ink);fill-opacity:.72;transition:fill .25s var(--ease),fill-opacity .25s var(--ease)}
.record__dot.is-named{fill-opacity:.9}
.record__dot.is-feat{fill:var(--accent);fill-opacity:1;cursor:pointer}
.record__dot.is-hot{fill:var(--accent);fill-opacity:1}
.record.has-hot .record__dot:not(.is-hot):not(.is-feat){fill-opacity:.28}
.record__ring{fill:none;stroke:var(--accent);stroke-width:1.5;transform-box:fill-box;transform-origin:center;animation:rec-ring 2.4s var(--ease) infinite}
@keyframes rec-ring{0%{transform:scale(1);opacity:.9}100%{transform:scale(2.6);opacity:0}}
.record__year{font:400 11px/1 var(--mono);letter-spacing:.1em;fill:var(--rec-soft);text-anchor:middle;transition:fill .2s}
.record__era{font:400 10px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;fill:var(--rec-soft);text-anchor:middle;transition:fill .2s}
.record__era-n{fill:var(--accent)}
.record__year.is-hot,.record__era.is-hot{fill:var(--accent)}
.record__tip{position:absolute;left:0;top:0;z-index:3;pointer-events:none;opacity:0;transform:translate(-50%,calc(-100% - 16px));transition:opacity .18s var(--ease);
font:400 11px/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;
background:var(--ink);color:var(--paper);padding:9px 12px;border-radius:6px;box-shadow:0 12px 30px -14px rgba(10,10,10,.5)}
.record__tip b{font-weight:400;color:var(--accent)}
.record__tip small{display:block;font-size:10px;letter-spacing:.14em;opacity:.6;margin-top:3px}
.record.has-hot .record__tip{opacity:1}
.record--dark .record__tip{background:var(--paper);color:var(--ink)}
.record__legend{display:flex;flex-wrap:wrap;gap:8px 24px;margin-top:18px;font:400 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--rec-soft)}
.record__legend i{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--rec-ink);opacity:.72;vertical-align:middle;margin-right:8px}
.record__legend i.acc{background:var(--accent);opacity:1}
/* the signature watermark breathes in behind the AI page title. backwards, not both: the
scroll drift (initHeroMarkDrift) owns the transform once the entrance is over */
@keyframes mark-in{from{opacity:0;transform:translate3d(0,-50%,0) scale(1.06)}to{opacity:.055;transform:translate3d(0,-50%,0)}}
.inner .hero-mark{animation:mark-in 1.8s var(--ease-settle) .2s backwards}
/* ---- selected work: each sheet performs as it docks (initCaseSheets) ----
The sheet already rises as a .reveal. Once it is in: the plate opens like blinds out
of the sheet's own paper, the case stamp slams down, the name rises off its baseline,
the standfirst settles, the tags pop one after another, the button and the plate
label land last. The plate also drifts a touch against the scroll and the whole
visual tilts flat as the sheet docks, so the stack reads as paper with depth. */
.case .slats{position:absolute;inset:0;z-index:3;display:grid;grid-template-rows:repeat(5,1fr);pointer-events:none}
.case .slats i{display:block;background:var(--paper);transform:scaleX(1);transform-origin:right;
transition:transform .9s var(--ease-wipe) calc(.15s + var(--k,0) * 70ms)}
.case:nth-child(even) .slats i{background:var(--paper-2)}
.case.is-in .slats i{transform:scaleX(0)}
@keyframes stamp{from{opacity:0;transform:rotate(-2deg) scale(1.9)}to{opacity:1;transform:rotate(-2deg) scale(1)}}
.case .case__num{display:inline-block;padding:7px 10px;border:1.5px solid var(--accent);border-radius:4px;transform:rotate(-2deg);opacity:0;mix-blend-mode:multiply}
.case.is-in .case__num{opacity:1;animation:stamp .55s cubic-bezier(.2,.9,.3,1.35) .35s backwards}
.case .rl>span{transition-delay:.25s}
.case .case__desc,.case .tag,.case .case__cta,.case .plate-cap{opacity:0}
.case.is-in .case__desc{opacity:1;animation:ph-settle .8s var(--ease-settle) .5s backwards}
.case.is-in .tag{opacity:1;animation:ph-pop .5s var(--ease-pop) calc(.65s + var(--k,0) * 60ms) backwards}
.case.is-in .case__cta{opacity:1;animation:ph-pop .55s var(--ease-pop) .95s backwards}
.case.is-in .plate-cap{opacity:1;animation:ph-pop .5s var(--ease-pop) 1s backwards}
.case__visual{transform:perspective(1200px) rotateX(var(--tilt,0deg));transform-style:preserve-3d;transition:transform .25s ease-out}
.case__shot{transform:translateY(var(--par,0px)) scale(1.08);transition:transform .3s ease-out}
.case__visual:hover .case__shot{transform:translateY(var(--par,0px)) scale(1.11)}
@media(max-width:700px){
.inner .about-hero__title,.inner .case-hero__title{font-size:clamp(38px,11vw,52px)}
.three__row{grid-template-columns:1fr;gap:10px}
.three__t{font-size:clamp(21px,6vw,26px)}
.mail-big{font-size:clamp(26px,8.5vw,40px)}
.record{margin-top:24px}
.inner .case-grid{gap:32px}
/* roster pills sit two to a row on a phone; a single long name (SmartCommerce) must
break rather than run past its cell */
.inner .arch-pill{font-size:11px;letter-spacing:.04em;padding:12px 12px;gap:6px;min-width:0;overflow-wrap:anywhere}
.arch-pill span{flex:none}
}