/* =========================================================================
V5 STYLES — extends v4 with bespoke v2-style kinetic sections
Loads AFTER v4-styles.css
========================================================================= */
/* =========================================================================
HERO — ambient arc system + wire-underline hover spine
========================================================================= */
.v5-hero{
position:relative;
overflow:hidden;
padding-top:120px;
}
.v5-hero-container{position:relative;z-index:2}
.v5-hero-arcs{
position:absolute;inset:0;
width:100%;height:100%;
pointer-events:none;
z-index:1;
opacity:.5;
}
/* Orbital traces — quiet background lines */
.v5-hero-orbit{
transform-origin:center;
}
.v5-hero-orbit-sun{
opacity:0.32;
animation:v5-hero-orbit-spin 140s linear infinite;
}
.v5-hero-orbit-planet{
opacity:0.4;
animation:v5-hero-orbit-spin 90s linear infinite reverse;
}
.v5-hero-orbit-moon{
opacity:0.5;
animation:v5-hero-orbit-spin 55s linear infinite;
}
@keyframes v5-hero-orbit-spin{
0%{stroke-dashoffset:0}
100%{stroke-dashoffset:-300}
}
.v5-hero-photon{
opacity:0;animation:v5-hero-photon-show .9s ease forwards;
animation-delay:.6s;
filter:drop-shadow(0 0 6px rgba(216,106,72,0.55));
}
@keyframes v5-hero-photon-show{to{opacity:.85}}
/* Carousel — list of outcome words under the headline */
.v5-hero-carousel{
display:flex;align-items:baseline;gap:14px;
margin:8px 0 32px;
}
.v5-hero-carousel-label{
font-family:var(--mono);font-size:clamp(11px,1vw,13px);
letter-spacing:.18em;text-transform:uppercase;color:var(--v4-mute);
}
.v5-hero-carousel-stage{
position:relative;display:inline-block;
min-width:11ch;height:1.1em;
font-family:var(--serif);font-style:italic;
font-size:clamp(36px, 5vw, 64px);line-height:1.05;letter-spacing:-.022em;
font-variation-settings:"opsz" 60;
}
.v5-hero-carousel-w{
position:absolute;left:0;top:0;
opacity:0;color:var(--v4-accent);
transform:translateY(0.35em);
transition:opacity .55s var(--ease-soft, cubic-bezier(.22,.7,.2,1)),
transform .65s var(--ease-soft, cubic-bezier(.22,.7,.2,1));
white-space:nowrap;
}
.v5-hero-carousel-w.is-on{opacity:1;transform:translateY(0)}
.v5-hero-carousel-w.is-out{transform:translateY(-0.4em);opacity:0}
@keyframes v5-hero-label-in{to{opacity:.85}}
.v5-hero-headline{
font-size:clamp(48px, 7.6vw, 116px);
line-height:0.96;
margin-bottom:18px;
}
/* Cycle spotlight — focal element arrows converge on */
.v5-hero-spotlight{
display:flex;align-items:baseline;justify-content:center;
gap:14px;flex-wrap:wrap;
padding:18px 0 28px;margin:0 auto 12px;
position:relative;text-align:center;
max-width:max-content;
}
.v5-hero-spotlight-prefix{
font-family:var(--mono);font-size:clamp(12px, 1.4vw, 16px);
letter-spacing:.18em;text-transform:uppercase;color:var(--v4-mute);
}
.v5-hero-spotlight-suffix{
font-family:var(--serif);font-style:italic;
font-size:clamp(48px, 7vw, 96px);line-height:1;
color:var(--v4-accent);font-variation-settings:"opsz" 72;
}
.v5-hero-spotlight-cycle{
position:relative;display:inline-block;
min-width:8.5ch;height:1.05em;vertical-align:baseline;
font-family:var(--serif);font-style:italic;
font-size:clamp(54px, 8vw, 112px);line-height:1;letter-spacing:-.026em;
font-variation-settings:"opsz" 72;
text-align:center;
}
.v5-hero-spotlight-w{
position:absolute;left:0;right:0;top:0;
opacity:0;color:var(--v4-accent);
transform:translateY(0.4em);
transition:opacity .55s var(--ease-soft, cubic-bezier(.22,.7,.2,1)),
transform .65s var(--ease-soft, cubic-bezier(.22,.7,.2,1));
text-shadow:0 0 32px rgba(185,88,60,0.12);
}
.v5-hero-spotlight-w.is-on{opacity:1;transform:translateY(0)}
.v5-hero-spotlight-w.is-out{transform:translateY(-0.45em);opacity:0}
.v5-hero-tag{
font-family:var(--serif);
font-size:clamp(20px, 2.4vw, 32px);
line-height:1.3;
color:var(--v4-ink-2);
margin-bottom:64px;
display:flex;align-items:baseline;gap:10px;
font-style:italic;
}
.v5-hero-tag-mark{font-family:var(--mono);font-size:14px;color:var(--v4-mute);font-style:normal;letter-spacing:.16em}
.v5-hero-tag-spine{color:var(--v4-ink)}
/* Wire-underline override for v4 palette */
.v5-hero .wire-underline::after,
.v5-method .wire-underline::after,
.v5-ai .wire-underline::after,
.v5-contact .wire-underline::after{
background:url("data:image/svg+xml;utf8,") repeat-x;
background-size:120px 8px;
}
.v5-hero-foot{margin-bottom:48px}
.v5-hero-foot-text .emph{color:var(--v4-accent);font-style:italic}
/* Proof strip */
.v5-hero-proof{
display:flex;flex-wrap:wrap;align-items:center;gap:14px;
padding:20px 0;
border-top:1px solid var(--v4-line-soft);
font-family:var(--mono);
font-size:11px;
letter-spacing:.14em;
text-transform:uppercase;
color:var(--v4-ink-2);
margin-top:24px;
}
.v5-hero-proof-label{color:var(--v4-mute);letter-spacing:.18em}
.v5-hero-proof-label-2{margin-left:24px}
.v5-hero-proof-list{display:inline-flex;flex-wrap:wrap;gap:14px;align-items:center}
.v5-hero-proof-recent{color:var(--v4-ink)}
.v5-hero-proof-legacy{color:var(--v4-mute)}
.v5-hero-proof-item{transition:color .25s ease}
.v5-hero-proof-item:hover{color:var(--v4-accent)}
.v5-hero-proof-item-legacy:hover{color:var(--v4-ink)}
.v5-hero-proof-dot{color:var(--v4-line);font-size:14px}
/* =========================================================================
RECENT WORK — layered case cards
========================================================================= */
.v5-work{padding-top:100px}
.v5-recent-num-year{
display:block;font-family:var(--mono);font-size:10px;letter-spacing:.18em;
color:var(--v4-mute);margin-top:14px;
}
.v5-recent-client{font-size:13px !important;color:var(--v4-ink) !important;font-weight:500}
.v5-recent-category{
font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
color:var(--v4-accent);margin-top:4px;
}
.v5-recent-title{
font-size:clamp(28px,3.4vw,44px) !important;
line-height:1.08 !important;
margin:18px 0 32px !important;
letter-spacing:-.022em;
font-variation-settings:"opsz" 36;
}
.v5-recent-layers{
display:flex;flex-direction:column;gap:18px;
padding:24px 0;
border-top:1px solid var(--v4-line-soft);
border-bottom:1px solid var(--v4-line-soft);
margin-bottom:24px;
}
.v5-recent-layer{display:grid;grid-template-columns:180px 1fr;gap:24px;align-items:start}
.v5-recent-layer-label{
font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
color:var(--v4-mute);padding-top:4px;
}
.v5-recent-layer p{
font-family:var(--serif);font-size:17px;line-height:1.55;color:var(--v4-ink-2);
max-width:60ch;
}
.v5-recent-artifacts{
display:grid;grid-template-columns:180px 1fr;gap:24px;align-items:start;
margin-bottom:20px;
}
.v5-recent-artifacts-label{
font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
color:var(--v4-mute);padding-top:8px;
}
.v5-recent-artifacts-list{display:flex;flex-wrap:wrap;gap:8px}
.v5-recent-tag{background:var(--v4-paper-2) !important;color:var(--v4-ink-2) !important;font-size:11px !important}
.v5-recent-proves{display:grid;grid-template-columns:180px 1fr;gap:24px;align-items:start}
.v5-recent-proves-label{
font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
color:var(--v4-accent);padding-top:4px;
}
.v5-recent-proves-text{
font-family:var(--serif);font-size:21px;line-height:1.35;color:var(--v4-ink);
font-style:italic;max-width:50ch;
}
.v5-recent-proves-text .emph{color:var(--v4-accent)}
@media (max-width:900px){
.v5-recent-layer,.v5-recent-artifacts,.v5-recent-proves{grid-template-columns:1fr;gap:8px}
}
/* =========================================================================
THROUGH-LINE — table of 5 verbs
========================================================================= */
.v5-through{
padding:120px 0;
background:var(--v4-paper-2);
border-top:1px solid var(--v4-line-soft);
border-bottom:1px solid var(--v4-line-soft);
}
.v5-through-head{max-width:880px;margin-bottom:80px}
.v5-through-eyebrow{
font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--v4-mute);
display:inline-flex;align-items:center;gap:10px;margin-bottom:24px;
}
.v5-through-eyebrow::before{content:"";width:24px;height:1px;background:var(--v4-accent)}
.v5-through-title{
font-family:var(--serif);font-size:clamp(48px,6.5vw,96px);line-height:0.95;
letter-spacing:-.028em;color:var(--v4-ink);margin-bottom:32px;
font-variation-settings:"opsz" 60;
}
.v5-through-title .emph{font-style:italic;color:var(--v4-accent)}
.v5-through-lede{
font-family:var(--serif);font-size:19px;line-height:1.55;color:var(--v4-ink-2);
max-width:64ch;
}
.v5-through-table{
display:flex;flex-direction:column;
border-top:1px solid var(--v4-ink);
}
.v5-through-row{
display:grid;grid-template-columns:80px minmax(0,1.2fr) minmax(0,2fr);
gap:32px;align-items:start;
padding:36px 0;
border-bottom:1px solid var(--v4-line-soft);
opacity:0;transform:translateY(20px);
transition:opacity .8s var(--ease-soft, cubic-bezier(.22,.7,.2,1)), transform .8s var(--ease-soft, cubic-bezier(.22,.7,.2,1));
transition-delay:var(--d, 0ms);
}
.v5-through-row.is-in{opacity:1;transform:translateY(0)}
.v5-through-row:hover{background:var(--v4-paper);transform:translateY(-2px)}
.v5-through-row-n{
font-family:var(--serif);font-style:italic;font-size:64px;line-height:1;
color:var(--v4-accent);letter-spacing:-.02em;
font-variation-settings:"opsz" 36;
}
.v5-through-row-verb{
font-family:var(--serif);font-size:clamp(28px,3vw,42px);line-height:1.05;
letter-spacing:-.022em;color:var(--v4-ink);margin:0;text-wrap:balance;
font-variation-settings:"opsz" 36;
}
.v5-through-row-body{
font-family:var(--serif);font-size:18px;line-height:1.5;color:var(--v4-ink-2);
max-width:60ch;margin:0;
}
.v5-through-foot{
margin-top:48px;
font-family:var(--serif);font-style:italic;font-size:24px;line-height:1.4;
color:var(--v4-ink-2);max-width:72ch;text-wrap:balance;
}
.v5-through-foot .emph{color:var(--v4-accent)}
@media (max-width:900px){
.v5-through-row{grid-template-columns:60px 1fr;gap:16px}
.v5-through-row-body{grid-column:1 / -1;margin-top:8px}
}
/* =========================================================================
METHOD — section frame
========================================================================= */
.v5-method{padding:120px 0;position:relative;overflow:hidden}
.v5-method-head{max-width:920px;margin:80px 0 64px;padding-top:56px;border-top:1px solid var(--v4-line-soft)}
/* Disciplines strip (UX · UI · Brand · Product · Motion · Dev) — now at bottom of Method */
.v5-method-disciplines{margin-top:80px}
.v5-method-disciplines-head{
display:flex;align-items:flex-start;justify-content:space-between;gap:40px;
margin-bottom:36px;
}
.v5-method-disciplines-label{
font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--v4-mute);
flex-shrink:0;padding-top:8px;
}
.v5-method-disciplines-lede{
font-family:var(--serif);font-size:clamp(20px,2.1vw,28px);line-height:1.3;
letter-spacing:-.012em;max-width:48ch;color:var(--v4-ink);text-wrap:balance;margin:0;
font-style:italic;font-variation-settings:"opsz" 36;
}
.v5-method-disciplines-row{
display:grid;grid-template-columns:repeat(3, 1fr);grid-auto-rows:minmax(220px, auto);
gap:0;border-top:1px solid var(--v4-ink);
}
.v5-method-disciplines-row .v4-cap-cell{
border-right:1px solid var(--v4-line);
border-bottom:1px solid var(--v4-line);
padding:32px 28px 28px;
position:relative;display:flex;flex-direction:column;gap:14px;
background:var(--v4-paper);
transition:background .35s ease;
}
.v5-method-disciplines-row .v4-cap-cell:hover{background:var(--v4-paper-2)}
.v5-method-disciplines-row .v4-cap-cell:nth-child(3n){border-right:0}
/* Copper accent strip on top of every card */
.v5-method-disciplines-row .v4-cap-cell::before{
content:"";position:absolute;left:0;right:0;top:0;height:2px;
background:var(--v4-accent);transform:scaleX(0);transform-origin:left;
transition:transform .55s var(--ease-soft, cubic-bezier(.22,.7,.2,1));
}
.v5-method-disciplines-row .v4-cap-cell.is-in::before{transform:scaleX(1);transition-delay:var(--d,0ms)}
.v5-method-disciplines-row .v4-cap-cell:hover::before{transform:scaleX(1)}
/* Dev cell historically had a dark inverted treatment; removed to match siblings */
@media (max-width:900px){
.v5-method-disciplines-row{grid-template-columns:repeat(2, 1fr)}
.v5-method-disciplines-row .v4-cap-cell:nth-child(3n){border-right:1px solid var(--v4-line)}
.v5-method-disciplines-row .v4-cap-cell:nth-child(2n){border-right:0}
}
@media (max-width:600px){
.v5-method-disciplines-row{grid-template-columns:1fr}
.v5-method-disciplines-row .v4-cap-cell{border-right:0 !important}
}
@media (max-width:900px){.v5-method-disciplines-head{flex-direction:column;gap:14px}}
.v5-method-eyebrow,
.v5-portal-eyebrow,
.v5-teach-eyebrow,
.v5-ai-eyebrow,
.v5-signals-eyebrow,
.v5-facet-eyebrow,
.v5-contact-eyebrow{
font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--v4-mute);
display:inline-flex;align-items:center;gap:10px;margin-bottom:24px;
}
.v5-method-eyebrow::before,
.v5-portal-eyebrow::before,
.v5-teach-eyebrow::before,
.v5-ai-eyebrow::before,
.v5-signals-eyebrow::before,
.v5-facet-eyebrow::before,
.v5-contact-eyebrow::before{content:"";width:24px;height:1px;background:var(--v4-accent)}
.v5-method-title,
.v5-portal-title,
.v5-teach-title,
.v5-ai-title,
.v5-signals-title,
.v5-contact-title{
font-family:var(--serif);font-size:clamp(44px,6vw,88px);line-height:0.96;
letter-spacing:-.028em;color:var(--v4-ink);margin-bottom:28px;text-wrap:balance;
font-variation-settings:"opsz" 60;
}
.v5-method-title .emph,
.v5-portal-title .emph,
.v5-teach-title .emph,
.v5-ai-title .emph,
.v5-signals-title .emph,
.v5-contact-title .emph{font-style:italic;color:var(--v4-accent)}
.v5-method-lede,
.v5-portal-lede,
.v5-teach-lede,
.v5-ai-lede,
.v5-signals-lede,
.v5-contact-lede{
font-family:var(--serif);font-size:19px;line-height:1.55;color:var(--v4-ink-2);
max-width:64ch;
}
.v5-teach-lede .emph{color:var(--v4-accent);font-style:italic}
.v5-method-signature{
margin-top:80px;padding-top:36px;border-top:1px solid var(--v4-ink);
display:flex;flex-direction:column;gap:14px;max-width:780px;
}
.v5-method-signature-top{margin-top:48px;margin-bottom:64px}
.v5-method-sig-line{
font-family:var(--serif);font-size:24px;line-height:1.35;color:var(--v4-ink);
font-style:italic;text-wrap:balance;margin:0;
}
.v5-method-sig-line-2{font-size:18px;color:var(--v4-ink-2)}
.v5-method-sig-line .emph{color:var(--v4-accent)}
/* =========================================================================
FLYWHEEL — method as a 5-stage cycle
========================================================================= */
.v5-flywheel-layout{
display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
gap:64px;align-items:center;
}
@media (max-width:1100px){.v5-flywheel-layout{grid-template-columns:1fr;gap:48px}}
.v5-flywheel-wheel{
position:relative;margin:0 auto;max-width:560px;
aspect-ratio:1/1;
}
.v5-flywheel-svg{display:block;width:100%;height:100%}
.v5-flywheel-meta{
position:absolute;top:0;left:0;display:flex;align-items:baseline;gap:14px;
font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--v4-mute);
z-index:2;
}
.v5-flywheel-meta-label{color:var(--v4-mute)}
.v5-flywheel-counter{
font-family:var(--serif);font-style:italic;font-size:34px;
letter-spacing:0;text-transform:none;color:var(--v4-ink);
line-height:1;
}
.v5-flywheel-counter span{font-size:13px;color:var(--v4-mute);margin-left:4px;font-family:var(--mono);font-style:normal}
.v5-flywheel-corner-bl{
position:absolute;bottom:0;left:0;
font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--v4-mute);
}
.v5-flywheel-detail{
display:flex;flex-direction:column;
background:var(--v4-paper-2);
border:1px solid var(--v4-line);
padding:36px 36px 28px;
position:relative;min-height:520px;
}
.v5-flywheel-detail::before{
content:"";position:absolute;top:-1px;left:-1px;width:42px;height:1px;background:var(--v4-accent);
}
.v5-flywheel-detail-head{
display:flex;align-items:center;justify-content:space-between;
padding-bottom:18px;border-bottom:1px solid var(--v4-line-soft);
margin-bottom:24px;
}
.v5-flywheel-detail-stage{
font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--v4-mute);
}
.v5-flywheel-detail-ticks{display:flex;gap:6px}
.v5-flywheel-tick{
width:22px;height:2px;background:var(--v4-line);border:0;cursor:pointer;
padding:0;border-radius:1px;
transition:background .3s ease,width .3s ease;
}
.v5-flywheel-tick.is-active{background:var(--v4-accent);width:32px}
.v5-flywheel-tick:hover{background:var(--v4-ink-2)}
.v5-flywheel-detail-body{animation:v5fw-fadein .55s var(--ease-soft, ease) both}
@keyframes v5fw-fadein{
from{opacity:0;transform:translateY(6px)}
to{opacity:1;transform:translateY(0)}
}
.v5-flywheel-detail-title{
font-family:var(--serif);font-size:48px;line-height:1;letter-spacing:-.024em;
color:var(--v4-ink);margin:0 0 14px;
font-variation-settings:"opsz" 60;
}
.v5-flywheel-detail-tagline{
font-family:var(--serif);font-size:22px;line-height:1.3;font-style:italic;
color:var(--v4-ink-2);margin:0 0 18px;max-width:42ch;text-wrap:balance;
}
.v5-flywheel-detail-tagline .emph{color:var(--v4-accent)}
.v5-flywheel-detail-body-copy{
font-size:14.5px;line-height:1.6;color:var(--v4-mute);margin:0 0 24px;max-width:50ch;
font-family:var(--sans, "Hanken Grotesk", sans-serif);
}
.v5-flywheel-outputs{margin-top:auto}
.v5-flywheel-outputs-label{
font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
color:var(--v4-mute);display:block;margin-bottom:10px;
}
.v5-flywheel-outputs ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:0}
.v5-flywheel-output{
display:grid;grid-template-columns:18px 1fr;gap:12px;align-items:center;
padding:8px 0;border-top:1px solid var(--v4-line-soft);font-size:13px;color:var(--v4-ink);
font-family:var(--mono);letter-spacing:.04em;
}
.v5-flywheel-output:last-child{border-bottom:1px solid var(--v4-line-soft)}
.v5-flywheel-output-mark{color:var(--v4-accent);font-family:var(--mono)}
.v5-flywheel-detail-foot{
display:flex;justify-content:space-between;align-items:center;
padding-top:18px;margin-top:20px;border-top:1px solid var(--v4-line-soft);
font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--v4-mute);
}
.v5-flywheel-next{
background:none;border:0;color:var(--v4-accent);cursor:pointer;
font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
display:inline-flex;align-items:center;gap:8px;
transition:gap .25s ease;font-family:var(--mono);
}
.v5-flywheel-next:hover{gap:14px}
/* =========================================================================
PORTAL
========================================================================= */
.v5-portal{
padding:120px 0;
background:var(--v4-night);
color:var(--v4-paper);
position:relative;overflow:hidden;
}
.v5-portal::before{
content:"";position:absolute;inset:0;pointer-events:none;
background:radial-gradient(60% 50% at 50% 30%, rgba(185,88,60,0.08), transparent 70%);
}
.v5-portal-head{max-width:920px;margin-bottom:48px;position:relative;z-index:1}
.v5-portal .v5-portal-eyebrow{color:rgba(242,238,230,0.55)}
.v5-portal .v5-portal-title{color:var(--v4-paper)}
.v5-portal .v5-portal-title .emph{color:var(--v4-accent-hi)}
.v5-portal-lede{
display:flex;flex-direction:column;gap:14px;max-width:60ch;
}
.v5-portal-lede p{
font-family:var(--serif);font-size:19px;line-height:1.55;color:rgba(242,238,230,0.78);margin:0;
}
.v5-portal-engine{
margin:24px 0 56px;
position:relative;z-index:1;
display:flex;justify-content:center;
}
.v5-portal-engine-svg{
width:100%;max-width:760px;height:auto;
}
.v5-portal-engine-svg text{fill:rgba(242,238,230,0.7) !important}
.v5-portal-grid{
display:grid;grid-template-columns:repeat(4,1fr);gap:0;
border-top:1px solid rgba(242,238,230,0.18);
position:relative;z-index:1;
}
@media (max-width:900px){.v5-portal-grid{grid-template-columns:repeat(2,1fr)}}
.v5-portal-card{
padding:36px 28px 32px;
border-right:1px solid rgba(242,238,230,0.18);
display:flex;flex-direction:column;gap:14px;
position:relative;cursor:default;
transition:background .3s ease;
}
.v5-portal-card:last-child{border-right:0}
.v5-portal-card::before{
content:"";position:absolute;left:0;right:0;top:0;height:2px;
background:var(--v4-accent);
transform:scaleX(0);transform-origin:left;
transition:transform .55s var(--ease-soft, cubic-bezier(.22,.7,.2,1));
}
.v5-portal-card:hover::before{transform:scaleX(1)}
.v5-portal-card:hover{background:rgba(242,238,230,0.03)}
.v5-portal-card-n{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;color:rgba(242,238,230,0.5)}
.v5-portal-card-name{
font-family:var(--serif);font-size:28px;line-height:1.1;letter-spacing:-.018em;
color:var(--v4-paper);margin:0;font-variation-settings:"opsz" 36;
}
.v5-portal-card-body{
font-family:var(--serif);font-size:15.5px;line-height:1.55;color:rgba(242,238,230,0.7);margin:0;
}
.v5-portal-foot{
margin-top:48px;padding-top:36px;
border-top:1px solid rgba(242,238,230,0.18);
font-family:var(--serif);font-size:22px;line-height:1.4;color:rgba(242,238,230,0.85);
max-width:72ch;text-wrap:balance;position:relative;z-index:1;
}
.v5-portal-foot .emph{color:var(--v4-accent-hi);font-style:italic}
/* =========================================================================
TEACHING + AUTHORSHIP
========================================================================= */
.v5-teach{padding:120px 0;border-top:1px solid var(--v4-line-soft)}
.v5-teach-head{max-width:920px;margin-bottom:64px}
.v5-teach-lede-2{margin-top:14px}
.v5-teach-grid{
display:grid;grid-template-columns:1fr 1.2fr 1fr;gap:36px;align-items:start;
border-top:1px solid var(--v4-line);
}
@media (max-width:1100px){.v5-teach-grid{grid-template-columns:1fr}}
.v5-teach-col{
padding:36px 0 0;
display:flex;flex-direction:column;gap:24px;
border-right:1px solid var(--v4-line-soft);
padding-right:36px;
}
.v5-teach-col:last-child{border-right:0;padding-right:0}
@media (max-width:1100px){
.v5-teach-col{border-right:0;padding-right:0;border-bottom:1px solid var(--v4-line-soft);padding-bottom:36px}
}
.v5-teach-col-head{display:flex;flex-direction:column;gap:8px}
.v5-teach-col-n{
font-family:var(--serif);font-style:italic;font-size:32px;color:var(--v4-accent);
line-height:1;letter-spacing:-.02em;font-variation-settings:"opsz" 36;
}
.v5-teach-col-title{
font-family:var(--serif);font-size:32px;line-height:1;letter-spacing:-.022em;
color:var(--v4-ink);margin:0;font-variation-settings:"opsz" 60;
}
.v5-teach-col-meta{
font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
color:var(--v4-mute);
}
.v5-teach-courses{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:18px}
.v5-teach-course{
padding:14px 0;border-top:1px solid var(--v4-line-soft);
display:flex;flex-direction:column;gap:6px;
}
.v5-teach-course:last-child{border-bottom:1px solid var(--v4-line-soft)}
.v5-teach-course-level{
font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--v4-mute);
}
.v5-teach-course-name{
font-family:var(--serif);font-size:21px;line-height:1.1;letter-spacing:-.014em;
color:var(--v4-ink);margin:0;
}
.v5-teach-course-body{
font-family:var(--serif);font-size:14.5px;line-height:1.55;color:var(--v4-ink-2);margin:0;
}
/* Books */
.v5-teach-books-shelf{display:flex;flex-direction:column;gap:32px}
.v5-teach-book{
display:grid;grid-template-columns:120px 1fr;gap:20px;align-items:start;
}
.v5-teach-book-cover{
width:120px;height:170px;
background:linear-gradient(135deg, var(--v4-ink) 0%, var(--v4-ink-2) 100%);
color:var(--v4-paper);
position:relative;border-radius:2px;overflow:hidden;
display:flex;flex-direction:column;justify-content:space-between;padding:14px 12px;
box-shadow:0 10px 28px -16px rgba(14,15,14,0.4), 4px 0 0 -1px var(--v4-paper-3);
transition:transform .55s var(--ease-soft, cubic-bezier(.22,.7,.2,1)), box-shadow .55s var(--ease-soft, ease);
}
.v5-teach-book-cover.is-alt{
background:linear-gradient(135deg, var(--v4-accent) 0%, #8B3D29 100%);
}
.v5-teach-book:hover .v5-teach-book-cover{
transform:translateY(-4px) rotate(-1deg);
box-shadow:0 18px 40px -16px rgba(14,15,14,0.5), 4px 0 0 -1px var(--v4-paper-3);
}
.v5-teach-book-spine{
font-family:var(--mono);font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;
writing-mode:vertical-rl;transform:rotate(180deg);
position:absolute;left:4px;top:14px;color:rgba(242,238,230,0.55);
}
.v5-teach-book-cover-tag{
font-family:var(--mono);font-size:9px;letter-spacing:.16em;color:rgba(242,238,230,0.65);
align-self:flex-end;text-transform:uppercase;
}
.v5-teach-book-cover-corner{
position:absolute;right:8px;top:8px;width:14px;height:14px;
border-top:1px solid rgba(242,238,230,0.4);border-right:1px solid rgba(242,238,230,0.4);
}
.v5-teach-book-meta{display:flex;flex-direction:column;gap:6px}
.v5-teach-book-title{
font-family:var(--serif);font-size:22px;line-height:1.05;letter-spacing:-.014em;
color:var(--v4-ink);margin:0;
}
.v5-teach-book-sub{
font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--v4-mute);
}
.v5-teach-book-body{
font-family:var(--serif);font-size:14.5px;line-height:1.55;color:var(--v4-ink-2);margin:4px 0 0;
}
/* Frameworks */
.v5-teach-frameworks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0}
.v5-teach-framework{
display:grid;grid-template-columns:18px 1fr;gap:10px;align-items:start;
padding:11px 0;border-top:1px solid var(--v4-line-soft);
font-family:var(--serif);font-size:15px;line-height:1.4;color:var(--v4-ink);
}
.v5-teach-framework:last-child{border-bottom:1px solid var(--v4-line-soft)}
.v5-teach-framework-mark{color:var(--v4-accent);font-family:var(--mono);font-weight:600;line-height:1.4}
.v5-teach-themes{display:flex;flex-direction:column;gap:10px;margin-top:8px}
.v5-teach-themes-label{
font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--v4-mute);
}
.v5-teach-themes-row{display:flex;flex-wrap:wrap;gap:6px}
.v5-teach-theme-chip{
font-family:var(--mono);font-size:10px;letter-spacing:.1em;
padding:5px 9px;border:1px solid var(--v4-line);border-radius:99px;
color:var(--v4-ink-2);background:var(--v4-paper);
transition:background .25s ease, color .25s ease;
}
.v5-teach-theme-chip:hover{background:var(--v4-ink);color:var(--v4-paper)}
.v5-teach-foot{
margin-top:48px;padding-top:36px;
border-top:1px solid var(--v4-ink);
font-family:var(--serif);font-size:22px;line-height:1.4;color:var(--v4-ink-2);
max-width:72ch;font-style:italic;text-wrap:balance;
}
.v5-teach-foot .emph{color:var(--v4-accent);font-style:italic}
/* =========================================================================
AI FLUENCY — Range vs Judgment split layout
========================================================================= */
.v5-ai{padding:96px 0;background:var(--v4-night);color:var(--v4-paper);border-top:1px solid var(--v4-ink);border-bottom:1px solid var(--v4-ink);overflow:hidden;position:relative}
.v5-ai::before{
content:"";position:absolute;inset:0;pointer-events:none;
background:radial-gradient(50% 50% at 30% 20%, rgba(185,88,60,0.08), transparent 70%);
}
.v5-ai-head{max-width:920px;margin-bottom:48px;position:relative;z-index:1}
/* 2-column header: eyebrow + title on left, lede on right (matches signals/section openers) */
.v5-ai-head-2col{
max-width:none;
display:grid;
grid-template-columns:1.1fr 0.9fr;
gap:56px;
align-items:end;
padding-bottom:24px;
border-bottom:1px solid rgba(242,238,230,0.10);
}
.v5-ai-head-2col .v5-ai-head-left{display:flex;flex-direction:column;gap:24px;min-width:0}
.v5-ai-head-2col .v5-ai-title{margin-bottom:0;max-width:none}
.v5-ai-head-2col .v5-ai-lede{margin:0;max-width:52ch;padding-bottom:8px}
@media (max-width:900px){
.v5-ai-head-2col{grid-template-columns:1fr;gap:24px;align-items:start}
}
/* Override eyebrow + title colors for dark surface */
.v5-ai .v5-ai-eyebrow{
color:rgba(242,238,230,0.4);
display:inline-flex;align-items:center;gap:14px;
}
.v5-ai .v5-ai-eyebrow::before{display:none}
.v5-ai-eyebrow-rule{display:inline-block;width:36px;height:1px;background:var(--v4-accent-hi)}
.v5-ai-eyebrow-num{
font-family:var(--serif);font-style:italic;color:var(--v4-accent-hi);
font-size:18px;letter-spacing:-.01em;
font-variation-settings:"opsz" 36;
text-transform:none;
}
.v5-ai .v5-ai-eyebrow::before{background:var(--v4-accent-hi)}
.v5-ai .v5-ai-title{color:var(--v4-paper)}
.v5-ai .v5-ai-title .emph{color:var(--v4-accent-hi);font-style:italic}
.v5-ai .v5-ai-lede{color:rgba(242,238,230,0.72)}
.v5-ai-split{
position:relative;z-index:1;
display:grid;grid-template-columns:1fr 24px 1fr;gap:0;
border-top:1px solid rgba(242,238,230,0.18);border-bottom:1px solid rgba(242,238,230,0.10);
}
@media (max-width:900px){
.v5-ai-split{grid-template-columns:1fr;border-bottom:0}
.v5-ai-divider{display:none}
}
.v5-ai-half{
padding:32px 0 40px;
display:flex;flex-direction:column;gap:10px;
position:relative;
}
.v5-ai-half-range{padding-right:36px}
.v5-ai-half-judgment{padding-left:36px}
@media (max-width:900px){
.v5-ai-half-range{padding-right:0;border-bottom:1px solid var(--v4-line);padding-bottom:40px}
.v5-ai-half-judgment{padding-left:0;padding-top:40px}
}
.v5-ai-half-marker{
height:180px;width:100%;
display:flex;align-items:center;
margin-bottom:4px;
position:relative;
}
.v5-ai-half-range .v5-ai-half-marker{justify-content:flex-start}
.v5-ai-half-judgment .v5-ai-half-marker{justify-content:flex-end}
.v5-ai-marker{
width:100%;max-width:none;height:180px;
}
/* Range marker — fan of dots, scatter outward on entry */
.v5-ai-marker-range .v5-ai-marker-line,
.v5-ai-marker-range .v5-ai-marker-dot{
opacity:0;
transform-origin:-130px center;
transform:scale(0.3);
transition:opacity .7s var(--ease-soft, cubic-bezier(.22,.7,.2,1)), transform .9s var(--ease-soft, cubic-bezier(.22,.7,.2,1));
transition-delay:var(--d, 0ms);
}
.v5-ai-marker-range.is-in .v5-ai-marker-line{opacity:0.35;transform:scale(1)}
.v5-ai-marker-range.is-in .v5-ai-marker-dot{opacity:0.75;transform:scale(1)}
/* Judgment marker — outer dots shrink inward toward core */
.v5-ai-marker-judgment .v5-ai-marker-line,
.v5-ai-marker-judgment .v5-ai-marker-dot{
opacity:0;
transition:opacity .6s ease, transform .7s var(--ease-soft, cubic-bezier(.22,.7,.2,1));
transition-delay:var(--d, 0ms);
}
.v5-ai-marker-judgment.is-in .v5-ai-marker-line{opacity:0.4}
.v5-ai-marker-judgment.is-in .v5-ai-marker-dot{opacity:0.65}
.v5-ai-marker-judgment.is-in .v5-ai-marker-dot-shrink{
animation:v5-ai-shrink 1.4s var(--ease-soft, cubic-bezier(.22,.7,.2,1)) forwards;
animation-delay:var(--d, 0ms);
}
@keyframes v5-ai-shrink{
0%{transform:translate(0,0) scale(1);opacity:0.5}
100%{transform:translate(var(--tx,0px),var(--ty,0px)) scale(0.4);opacity:0.18}
}
.v5-ai-marker-core,.v5-ai-marker-core-halo{
opacity:0;
transition:opacity .6s ease;
transition-delay:var(--d, 0ms);
}
.v5-ai-marker-judgment.is-in .v5-ai-marker-core{opacity:1}
.v5-ai-marker-judgment.is-in .v5-ai-marker-core-halo{opacity:0.6;animation:v5-ai-halo 2.4s ease-in-out infinite;animation-delay:calc(var(--d, 0ms) + 600ms)}
@keyframes v5-ai-halo{
0%,100%{transform:scale(1);opacity:0.5}
50%{transform:scale(1.6);opacity:0.15}
}
.v5-ai-half-eyebrow{
font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--v4-mute);
}
.v5-ai-half-title{
font-family:var(--serif);font-size:clamp(28px,3.4vw,44px);line-height:1.02;letter-spacing:-.022em;
color:var(--v4-paper);margin:6px 0 8px;text-wrap:balance;
font-variation-settings:"opsz" 48;
}
.v5-ai-half-title-split .split-char{font-family:var(--serif);color:var(--v4-paper)}
.v5-ai-half-title-split:hover .split-char{color:var(--v4-accent-hi)}
.v5-ai-half-sub{
font-family:var(--serif);font-size:16px;line-height:1.35;color:rgba(242,238,230,0.7);
font-style:italic;margin:0 0 20px;text-wrap:balance;max-width:36ch;
}
.v5-ai-half-sub .emph{color:var(--v4-accent-hi)}
.v5-ai-half-list-label{
font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:rgba(242,238,230,0.45);
margin-top:8px;
padding-bottom:6px;
}
.v5-ai-half-list{
list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0;
}
.v5-ai-half-item{
display:grid;grid-template-columns:44px 24px 1fr;gap:12px;align-items:center;
padding:12px 4px;border-bottom:1px solid rgba(242,238,230,0.10);
position:relative;transition:padding .35s ease, background .35s ease;
cursor:default;
}
.v5-ai-half-item:first-child{border-top:1px solid rgba(242,238,230,0.18)}
.v5-ai-half-item:hover{padding-left:12px;background:rgba(185,88,60,0.06)}
.v5-ai-half-item-n{
font-family:var(--serif);font-style:italic;font-size:24px;line-height:1;
color:var(--v4-accent-hi);letter-spacing:-.022em;
font-variation-settings:"opsz" 36;
transition:font-size .35s ease;
}
.v5-ai-half-item:hover .v5-ai-half-item-n{font-size:30px}
.v5-ai-half-item-rule{
display:inline-block;width:18px;height:1px;background:rgba(242,238,230,0.2);
transform:scaleX(0.4);transform-origin:left;
transition:transform .4s var(--ease-soft, cubic-bezier(.22,.7,.2,1)), background .4s ease, width .4s ease;
}
.v5-ai-half-item:hover .v5-ai-half-item-rule{transform:scaleX(1);background:var(--v4-accent-hi);width:24px}
.v5-ai-half-item-text{
font-family:var(--serif);font-size:14.5px;line-height:1.35;color:var(--v4-paper);letter-spacing:-.006em;
}
.v5-ai-half-list-nots .v5-ai-half-item-n{color:rgba(242,238,230,0.4);font-style:italic}
.v5-ai-half-list-nots .v5-ai-half-item:hover .v5-ai-half-item-n{color:var(--v4-paper)}
.v5-ai-half-list-nots .v5-ai-half-item-text{color:rgba(242,238,230,0.55);font-style:italic}
/* Center divider */
.v5-ai-divider{
display:flex;align-items:center;justify-content:center;
padding:48px 0 56px;
}
.v5-ai-divider-svg{width:24px;height:100%}
.v5-ai-divider-svg line{stroke:rgba(242,238,230,0.2) !important}
.v5-ai-divider-svg circle{fill:var(--v4-night) !important;stroke:var(--v4-accent-hi) !important}
.v5-ai-divider-svg text{fill:var(--v4-accent-hi) !important}
.v5-ai-foot{
margin-top:48px;padding-top:32px;
font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--v4-mute);
text-align:center;max-width:60ch;margin-left:auto;margin-right:auto;
border-top:1px solid var(--v4-line-soft);
}
.v5-ai-foot .emph{
color:var(--v4-accent);font-family:var(--serif);font-style:italic;
font-size:18px;letter-spacing:-.008em;display:block;margin-top:6px;
}
/* =========================================================================
EARLIER SIGNALS — text-forward table
========================================================================= */
.v5-signals{padding:96px 0;background:var(--v4-paper-2);border-bottom:1px solid var(--v4-line-soft)}
.v5-signals-head{max-width:920px;margin-bottom:64px}
.v5-signals-head-2col{
display:grid !important;
grid-template-columns:1fr 1fr;
gap:60px;
max-width:none;
margin-bottom:64px;
align-items:end;
}
.v5-signals-head-2col .v5-signals-eyebrow{
display:inline-flex;align-items:center;gap:14px;
}
.v5-signals-head-2col .v5-signals-eyebrow::before{display:none}
.v5-signals-eyebrow-rule{display:inline-block;width:36px;height:1px;background:var(--v4-accent)}
.v5-signals-eyebrow-num{
font-family:var(--serif);font-style:italic;color:var(--v4-accent);
font-size:18px;letter-spacing:-.01em;
font-variation-settings:"opsz" 36;
text-transform:none;
}
@media (max-width:900px){
.v5-signals-head-2col{grid-template-columns:1fr;gap:18px;align-items:start}
}
.v5-signals-head-2col .v5-signals-title{
font-size:clamp(40px,5vw,72px) !important;
margin-bottom:0;
}
.v5-signals-head-2col .v5-signals-lede{
font-size:19px;line-height:1.55;color:var(--v4-ink-2);
max-width:48ch;padding-bottom:12px;
}
.v5-signals-table{
display:flex;flex-direction:column;
border-top:1px solid var(--v4-ink);
}
.v5-signals-row{
display:grid;grid-template-columns:48px 220px 1fr 1.4fr;gap:32px;
padding:28px 0;align-items:start;
border-bottom:1px solid var(--v4-line-soft);
transition:background .3s ease, padding .3s ease;
}
.v5-signals-row:hover{background:var(--v4-paper-2);padding-left:14px;padding-right:14px}
@media (max-width:900px){.v5-signals-row{grid-template-columns:32px 1fr;gap:16px}}
.v5-signals-n{
font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;color:var(--v4-mute);padding-top:6px;
}
.v5-signals-cell-name{display:flex;flex-direction:column;gap:4px}
.v5-signals-name{
font-family:var(--serif);font-size:32px;line-height:1.05;letter-spacing:-.018em;
color:var(--v4-ink);font-variation-settings:"opsz" 60;
}
.v5-signals-years{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;color:var(--v4-mute)}
.v5-signals-cell-role{
font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--v4-ink-2);
padding-top:8px;line-height:1.5;
}
.v5-signals-taught{
font-family:var(--serif);font-size:18px;line-height:1.35;color:var(--v4-ink);
font-style:italic;margin:0 0 6px;
}
.v5-signals-taught .emph{color:var(--v4-accent)}
.v5-signals-body{
font-family:var(--serif);font-size:14.5px;line-height:1.5;color:var(--v4-mute);margin:0;
}
/* =========================================================================
LAB — bigger cards with animation builds
========================================================================= */
.v5-lab{padding:120px 0;background:var(--v4-night);color:var(--v4-paper)}
.v5-lab-head{max-width:920px;margin-bottom:48px}
.v5-lab .v5-lab-title{color:var(--v4-paper)}
.v5-lab .v5-lab-title .emph{color:var(--v4-accent-hi);font-style:italic}
.v5-lab-intro{color:rgba(242,238,230,0.7) !important}
.v5-lab-intro .emph{color:var(--v4-accent-hi);font-style:italic}
.v5-lab-grid{
display:grid;grid-template-columns:repeat(3,1fr);gap:24px;
}
@media (max-width:1100px){.v5-lab-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:700px){.v5-lab-grid{grid-template-columns:1fr}}
.v5-lab-card{
background:rgba(242,238,230,0.04) !important;
border:1px solid rgba(242,238,230,0.18) !important;
color:var(--v4-paper);
padding:24px 22px 20px !important;
display:flex;flex-direction:column;gap:14px;
position:relative;cursor:default;
transition:background .35s ease, border-color .35s ease, transform .35s ease;
}
.v5-lab-card:hover{
background:rgba(242,238,230,0.06) !important;
border-color:var(--v4-accent) !important;
transform:translateY(-2px);
}
.v5-lab-card .v4-lab-card-n{color:rgba(242,238,230,0.5)}
.v5-lab-card-glyph{
height:100px;
background:rgba(242,238,230,0.02);
border:1px solid rgba(242,238,230,0.1);
display:flex;align-items:center;justify-content:center;padding:8px;
}
.v5-lab-card-glyph svg{width:100%;height:100%;display:block}
.v5-lab-card-title{
font-family:var(--serif);font-size:20px;line-height:1.15;letter-spacing:-.012em;
color:var(--v4-paper);margin:0;
}
.v5-lab-card-body{
font-family:var(--serif);font-size:14.5px;line-height:1.5;color:rgba(242,238,230,0.7) !important;margin:0;
}
.v5-lab-card-domain{
font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
color:var(--v4-accent-hi);
}
.v5-lab-card-foot{
display:flex;justify-content:space-between;align-items:center;
padding-top:10px;border-top:1px solid rgba(242,238,230,0.15);
font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:rgba(242,238,230,0.6);
}
.v5-lab-card-foot .v4-lab-card-status-dot{background:#7AB48A}
/* =========================================================================
FACET — about as six lenses
========================================================================= */
.v5-facet-section{
padding:80px 0 96px;background:var(--v4-paper-2);
border-top:1px solid var(--v4-line-soft);border-bottom:1px solid var(--v4-line-soft);
position:relative;overflow:hidden;
}
.v5-facet-head{
display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:end;margin-bottom:48px;
}
@media (max-width:900px){.v5-facet-head{grid-template-columns:1fr;gap:18px;margin-bottom:32px}}
.v5-facet-head-left{display:flex;flex-direction:column;gap:18px}
.v5-facet-section-eyebrow{
display:flex;align-items:center;gap:14px;
font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--v4-mute);
}
.v5-facet-section-eyebrow-rule{display:inline-block;width:36px;height:1px;background:var(--v4-accent)}
.v5-facet-section-eyebrow-num{
font-family:var(--serif);font-style:italic;color:var(--v4-accent);font-size:18px;letter-spacing:-.01em;
font-variation-settings:"opsz" 36;
}
.v5-facet-headline{
font-family:var(--serif);font-size:clamp(44px,5.4vw,72px);line-height:0.96;
letter-spacing:-.026em;color:var(--v4-ink);margin:0;
font-variation-settings:"opsz" 60;
}
.v5-facet-headline .emph{font-style:italic;color:var(--v4-accent)}
.v5-facet-intro{display:flex;flex-direction:column;gap:12px;max-width:42ch;padding-bottom:8px}
.v5-facet-intro p{font-family:var(--serif);font-size:17px;line-height:1.5;color:var(--v4-ink-2);margin:0}
.v5-facet-intro-sub{color:var(--v4-mute) !important;font-size:15px !important;font-style:italic}
.v5-facet-intro .emph{color:var(--v4-accent);font-style:italic}
.v5-facet-layout{
display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:80px;align-items:stretch;
}
@media (max-width:1100px){.v5-facet-layout{grid-template-columns:1fr;gap:48px}}
.v5-facet-wheel{
position:relative;width:100%;aspect-ratio:1/1;max-width:540px;margin:0 auto;
}
.v5-facet-wheel-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.v5-facet-wheel-meta{
position:absolute;top:0;left:0;display:flex;align-items:baseline;gap:14px;
font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--v4-mute);font-family:var(--mono);
z-index:2;
}
.v5-facet-wheel-counter{
font-family:var(--serif);font-style:italic;font-size:34px;
letter-spacing:0;text-transform:none;color:var(--v4-ink);line-height:1;
font-variation-settings:"opsz" 36;
}
.v5-facet-wheel-counter span{font-size:13px;color:var(--v4-mute);margin-left:4px;font-family:var(--mono);font-style:normal}
.v5-facet-vertex-halo{
transform-box:fill-box;transform-origin:center;
animation:v5-facet-halo 2.4s ease-in-out infinite;
}
@keyframes v5-facet-halo{
0%,100%{transform:scale(1);opacity:.5}
50%{transform:scale(1.4);opacity:.15}
}
.v5-facet-portrait{
position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
width:31%;aspect-ratio:1/1;border-radius:50%;overflow:hidden;
background:var(--v4-paper-3);
z-index:1;box-shadow:0 14px 40px -20px rgba(14,15,14,0.4);
}
.v5-facet-portrait img{
width:100%;height:100%;object-fit:cover;
filter:grayscale(1) contrast(1.05);
transition:filter .6s var(--ease-soft, ease);
}
.v5-facet-wheel:hover .v5-facet-portrait img{filter:grayscale(0) contrast(1.02)}
.v5-facet-portrait-ring{
position:absolute;inset:-6px;border-radius:50%;
border:1px solid var(--v4-line);pointer-events:none;
}
/* HUD overlay — calls out active facet inside the wheel, top-left */
.v5-facet-hud{
position:absolute;top:32px;left:0;right:0;
z-index:4;pointer-events:none;
display:flex;flex-direction:column;gap:6px;
padding:14px 18px;
background:var(--v4-ink);color:var(--v4-paper);
max-width:240px;margin:0 auto;
border-radius:3px;
box-shadow:0 14px 32px -16px rgba(14,15,14,0.45);
text-align:center;
animation:v5-facet-hud-fadein .55s var(--ease-soft, ease) both;
}
@keyframes v5-facet-hud-fadein{
0%{opacity:0;transform:translateY(-6px)}
100%{opacity:1;transform:translateY(0)}
}
.v5-facet-hud-eyebrow{
display:inline-flex;align-items:center;gap:10px;justify-content:center;
font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;
color:rgba(242,238,230,0.6);
}
.v5-facet-hud-rule{display:inline-block;width:18px;height:1px;background:var(--v4-accent-hi)}
.v5-facet-hud-num{
font-family:var(--serif);font-style:italic;color:var(--v4-accent-hi);
font-size:14px;letter-spacing:-.01em;font-variation-settings:"opsz" 36;
text-transform:none;
}
.v5-facet-hud-name{
font-family:var(--serif);font-size:24px;line-height:1.05;color:var(--v4-paper);
letter-spacing:-.014em;font-variation-settings:"opsz" 36;
}
.v5-facet-hud-disc{
font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
color:rgba(242,238,230,0.55);
}
.v5-facet-label{
position:absolute;transform:translate(-50%,-50%);
display:flex;flex-direction:column;gap:3px;
background:transparent;border:0;cursor:pointer;
text-align:center;min-width:120px;max-width:160px;
z-index:3;
padding:8px 12px;border-radius:3px;
transition:background-color .4s var(--ease-soft, ease), color .4s ease, transform .4s var(--ease-soft, ease);
}
.v5-facet-label[data-anchor="left"]{text-align:left;transform:translate(0,-50%)}
.v5-facet-label[data-anchor="right"]{text-align:right;transform:translate(-100%,-50%)}
.v5-facet-label-roman{
font-family:var(--mono);font-size:10px;letter-spacing:.22em;color:var(--v4-mute);text-transform:uppercase;
transition:color .4s ease;
}
.v5-facet-label-name{
font-family:var(--serif);font-size:22px;line-height:1.05;color:var(--v4-mute);
letter-spacing:-.012em;transition:color .4s ease;
font-variation-settings:"opsz" 36;
}
.v5-facet-label-disc{
font-family:var(--mono);font-size:9.5px;letter-spacing:.06em;
color:rgba(242,238,230,0.55);text-transform:uppercase;line-height:1.4;
opacity:0;max-height:0;transition:opacity .35s ease, max-height .35s ease, color .4s ease;
overflow:hidden;white-space:nowrap;
}
/* ACTIVE state — dark badge treatment (inverted from page) */
.v5-facet-label.is-active{
background:var(--v4-ink);
box-shadow:0 12px 32px -14px rgba(14,15,14,0.45), inset 0 1px 0 rgba(242,238,230,0.06);
}
.v5-facet-label.is-active .v5-facet-label-roman{color:var(--v4-accent-hi)}
.v5-facet-label.is-active .v5-facet-label-name{color:var(--v4-paper)}
.v5-facet-label.is-active .v5-facet-label-disc{opacity:1;max-height:32px;color:rgba(242,238,230,0.55)}
.v5-facet-label:hover:not(.is-active) .v5-facet-label-name{color:var(--v4-ink)}
.v5-facet-label:hover:not(.is-active) .v5-facet-label-roman{color:var(--v4-accent)}
/* Facet detail panel */
.v5-facet-detail{
display:flex;flex-direction:column;
background:var(--v4-paper);
border:1px solid var(--v4-line);
padding:28px 28px 22px;
position:relative;min-height:480px;
}
.v5-facet-detail::before{
content:"";position:absolute;top:-1px;left:-1px;width:42px;height:1px;background:var(--v4-accent);
}
.v5-facet-detail-head{
display:flex;align-items:center;justify-content:space-between;
padding-bottom:18px;border-bottom:1px solid var(--v4-line-soft);margin-bottom:24px;
}
.v5-facet-detail-roman{
font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--v4-mute);
}
.v5-facet-detail-progress{display:flex;gap:6px}
.v5-facet-tick{
width:22px;height:2px;background:var(--v4-line);border:0;cursor:pointer;padding:0;border-radius:1px;
transition:background .3s ease,width .3s ease;
}
.v5-facet-tick.is-active{background:var(--v4-accent);width:32px}
.v5-facet-tick:hover{background:var(--v4-ink-2)}
.v5-work-eyebrow{
display:inline-flex !important;align-items:center;gap:14px;
}
.v5-work-eyebrow::before{display:none !important}
.v5-work-eyebrow-rule{display:inline-block;width:36px;height:1px;background:var(--v4-accent)}
.v5-work-eyebrow-num{
font-family:var(--serif);font-style:italic;color:var(--v4-accent);
font-size:18px;letter-spacing:-.01em;
font-variation-settings:"opsz" 36;
text-transform:none;
}
/* =========================================================================
RECENT WORK — 2-column composition: specimen hero | narrative tower
========================================================================= */
.v4-case.v5-recent{
position:relative;
padding:96px 0 !important;
border-top:1px solid var(--v4-line-soft) !important;
border-bottom:0 !important;
transition:background .5s var(--ease-soft, ease);
overflow:visible;
}
.v4-case.v5-recent:last-child{border-bottom:1px solid var(--v4-line-soft) !important}
.v4-case.v5-recent[id="work-mariannes"]{background:rgba(217,200,150,0.18)}
.v4-case.v5-recent[id="work-psychedelic-science"]{background:rgba(31,24,37,0.06)}
.v4-case.v5-recent[id="work-rvrs"]{background:rgba(185,88,60,0.10)}
.v4-case.v5-recent[id="work-spor"]{background:rgba(31,40,38,0.07)}
.v5-page .v5-recent .v5-recent-row{
display:grid !important;
grid-template-columns: minmax(0, 0.95fr) minmax(0, 1fr) !important;
gap:80px !important;
align-items:start;
position:relative;
}
/* LEFT column — wrapper allows sticky positioning on the specimen */
.v5-page .v5-recent .v5-recent-row > .v5-recent-visual{
position:sticky;top:96px;align-self:start;
}
@media (max-width:1100px){
.v5-page .v5-recent .v5-recent-row{grid-template-columns:1fr !important;gap:36px !important}
.v5-page .v5-recent .v5-recent-row > .v5-recent-visual{position:static}
}
/* LEFT — specimen as the key visual asset */
.v5-recent-visual{
position:relative;
width:100%;aspect-ratio:5/6;
overflow:hidden;
box-shadow:0 24px 56px -20px rgba(14,15,14,0.40);
transform:translateY(28px);opacity:0;
transition:transform .9s var(--ease-soft, cubic-bezier(.22,.7,.2,1)), opacity .9s ease, box-shadow .55s ease;
}
.v4-case.v5-recent.is-in .v5-recent-visual{transform:translateY(0);opacity:1}
.v5-recent-visual:hover{
transform:translateY(-4px);
box-shadow:0 32px 72px -20px rgba(14,15,14,0.5);
}
.v5-recent-visual svg{display:block;width:100%;height:100%}
/* When the specimen wraps to a case study, it is an anchor — strip default link affordances */
a.v5-recent-visual,
.v5-recent-visual-link{
text-decoration:none;color:inherit;display:block;
}
.v5-recent-title-link{
text-decoration:none;color:inherit;display:block;
}
.v5-recent-title-link:hover .v5-recent-title{
color:var(--v4-accent);
}
/* RIGHT — narrative tower */
.v5-recent-content{
display:flex;flex-direction:column;gap:32px;
padding-top:8px;
}
/* Meta row: tag · client · role on one line */
.v5-recent-meta-row{
display:flex;flex-direction:column;align-items:flex-start;gap:8px;
padding-bottom:14px;border-bottom:1px solid var(--v4-line-soft);
}
.v5-recent-meta-tag{
font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
color:var(--v4-mute);
}
.v5-recent-meta-client{
font-family:var(--serif);font-size:22px;line-height:1.1;color:var(--v4-ink);
letter-spacing:-.012em;font-variation-settings:"opsz" 36;
}
.v5-recent-meta-role{
font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--v4-mute);
font-style:italic;margin-left:0;
}
/* Title — the dominant hierarchical element */
.v5-page .v5-recent .v5-recent-title{
font-family:var(--serif);
font-size:clamp(36px,4vw,60px) !important;
line-height:1.02 !important;
letter-spacing:-.026em;
margin:0 !important;color:var(--v4-ink);
font-variation-settings:"opsz" 72;
text-wrap:balance;
}
/* Proves payoff — italic copper, sits right after title */
.v5-recent-proves{
display:flex !important;flex-direction:column;gap:8px;
padding-top:20px;border-top:1px solid var(--v4-ink);
}
.v5-recent-proves-label{
font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
color:var(--v4-accent);
}
.v5-recent-proves-text{
font-family:var(--serif);font-size:19px;line-height:1.4;color:var(--v4-ink);
font-style:italic;margin:0;
}
.v5-recent-proves-text .emph{color:var(--v4-accent)}
/* Narrative — stacked layered build */
.v5-recent-narrative{display:flex;flex-direction:column;gap:0}
.v5-recent-layer{
display:flex !important;flex-direction:column;gap:6px;
padding:18px 0;
border-bottom:1px solid var(--v4-line-soft);
position:relative;
}
.v5-recent-layer:first-child{padding-top:4px}
.v5-recent-layer::before{
content:"";position:absolute;left:0;top:0;width:24px;height:1px;
background:var(--v4-accent);
transform:scaleX(0);transform-origin:left;
transition:transform .55s var(--ease-soft, cubic-bezier(.22,.7,.2,1));
}
.v5-recent-layer.is-in::before{transform:scaleX(1);transition-delay:var(--d, 0ms)}
.v5-recent-layer-label{
font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
color:var(--v4-mute);
display:inline-flex;align-items:center;gap:10px;
}
/* Inline layer icons — visual shorthand per (project, layer) */
.v5-layer-icon{
flex-shrink:0;
display:inline-block;
overflow:visible;
}
/* MARIANNE'S — unstable: bottles bob in unison */
.v5-layer-icon-mariannes-unstable .v5-li-bottle{
transform-origin:center bottom;
animation:v5-li-bob 2.4s ease-in-out infinite;
}
@keyframes v5-li-bob{
0%,100%{transform:translateY(0)}
50%{transform:translateY(-0.6px)}
}
/* MARIANNE'S — audience: sun rises along arc */
.v5-layer-icon-mariannes-audience .v5-li-sun{
animation:v5-li-sun-rise 5s ease-in-out infinite;
}
@keyframes v5-li-sun-rise{
0%,100%{transform:translate(-3.5px, 3.5px)}
50%{transform:translate(3.5px, 3.5px)}
}
.v5-layer-icon-mariannes-audience .v5-li-arc{
stroke-dasharray:20;stroke-dashoffset:20;
animation:v5-li-arc-draw 5s ease-in-out infinite;
}
@keyframes v5-li-arc-draw{
0%{stroke-dashoffset:20}
50%{stroke-dashoffset:0}
100%{stroke-dashoffset:-20}
}
/* MARIANNE'S — system: magazine spread opens */
.v5-layer-icon-mariannes-system .v5-li-mag{
transform-origin:12px 12px;
animation:v5-li-mag-open 3.5s ease-in-out infinite;
}
@keyframes v5-li-mag-open{
0%,100%{transform:scaleX(0.96)}
50%{transform:scaleX(1)}
}
/* PSYCHEDELIC — unstable: dots oscillate at different speeds */
.v5-layer-icon-psychedelic-unstable .v5-li-psych-dot{
animation-name:v5-li-psych-bob;
animation-iteration-count:infinite;
animation-timing-function:ease-in-out;
}
@keyframes v5-li-psych-bob{
0%,100%{transform:translateY(-2px)}
50%{transform:translateY(2px)}
}
/* PSYCHEDELIC — audience: 3 venn circles pulse out of sync */
.v5-layer-icon-psychedelic-audience .v5-li-venn{
transform-origin:center;animation-iteration-count:infinite;animation-timing-function:ease-in-out;
}
.v5-layer-icon-psychedelic-audience .v5-li-venn-1{animation:v5-li-venn-pulse 2.4s infinite}
.v5-layer-icon-psychedelic-audience .v5-li-venn-2{animation:v5-li-venn-pulse 2.4s 0.4s infinite}
.v5-layer-icon-psychedelic-audience .v5-li-venn-3{animation:v5-li-venn-pulse 2.4s 0.8s infinite}
@keyframes v5-li-venn-pulse{
0%,100%{opacity:0.4;transform:scale(0.96)}
50%{opacity:1;transform:scale(1.04)}
}
/* PSYCHEDELIC — system: rings expand outward */
.v5-layer-icon-psychedelic-system .v5-li-ring{
transform-origin:center;animation:v5-li-ring-expand 3s ease-out infinite;
}
.v5-layer-icon-psychedelic-system .v5-li-ring-1{animation-delay:0s}
.v5-layer-icon-psychedelic-system .v5-li-ring-2{animation-delay:0.5s}
.v5-layer-icon-psychedelic-system .v5-li-ring-3{animation-delay:1s}
@keyframes v5-li-ring-expand{
0%{transform:scale(0.4);opacity:1}
100%{transform:scale(1);opacity:0}
}
/* RVRS — unstable: dashed outline rotates slowly */
.v5-layer-icon-rvrs-unstable .v5-li-undefined{
animation:v5-li-spin 6s linear infinite;
}
@keyframes v5-li-spin{
to{transform:rotate(360deg)}
}
/* RVRS — audience: 3 points pulse toward center */
.v5-layer-icon-rvrs-audience .v5-li-rvrs-core{
transform-origin:12px 12px;animation:v5-li-core-pulse 2s ease-in-out infinite;
}
@keyframes v5-li-core-pulse{
0%,100%{transform:scale(0.85)}
50%{transform:scale(1.1)}
}
.v5-layer-icon-rvrs-audience .v5-li-rvrs-point{
transform-origin:center;animation:v5-li-point-fade 2s ease-in-out infinite;
}
@keyframes v5-li-point-fade{
0%,100%{opacity:0.4}
50%{opacity:1}
}
/* RVRS — system: translation arrow slides */
.v5-layer-icon-rvrs-system .v5-li-translate-arrow{
animation:v5-li-arrow 2s ease-in-out infinite;
}
@keyframes v5-li-arrow{
0%,100%{transform:translateX(-1px);opacity:0.7}
50%{transform:translateX(1px);opacity:1}
}
/* SPOR — unstable: balance scale tilts */
.v5-layer-icon-spor-unstable .v5-li-balance{
animation:v5-li-tilt 4s ease-in-out infinite;
}
@keyframes v5-li-tilt{
0%,100%{transform:rotate(-4deg)}
50%{transform:rotate(4deg)}
}
/* SPOR — audience: daily ritual dots light up sequentially */
.v5-layer-icon-spor-audience .v5-li-ritual-dot{
opacity:0.3;
animation:v5-li-ritual 3.6s ease-in-out infinite;
}
@keyframes v5-li-ritual{
0%,100%{opacity:0.3;transform:scale(1)}
10%,20%{opacity:1;transform:scale(1.3)}
}
/* SPOR — system: dose marks fill sequentially */
.v5-layer-icon-spor-system .v5-li-dose{
transform:scaleX(0);transform-origin:left;
animation:v5-li-dose-fill 3s ease-in-out infinite;
}
@keyframes v5-li-dose-fill{
0%,100%{transform:scaleX(0)}
30%,70%{transform:scaleX(1)}
}
.v5-recent-layer p{
font-family:var(--serif);font-size:15.5px;line-height:1.55;color:var(--v4-ink-2);margin:0;
}
.v5-recent-artifacts{
display:flex !important;flex-direction:column;gap:10px;
padding-top:18px;border-top:1px solid var(--v4-line);
}
.v5-recent-artifacts-label{
font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--v4-mute);
}
.v5-recent-artifacts-list{display:flex;flex-wrap:wrap;gap:8px}
.v5-recent-tag{
display:inline-block;
font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
color:var(--v4-ink-2);
padding:7px 14px;
border:1px solid var(--v4-line);
border-radius:99px;
background:transparent;
transition:background .25s ease, color .25s ease, border-color .25s ease;
}
.v5-recent-tag:hover{background:var(--v4-ink);color:var(--v4-paper);border-color:var(--v4-ink)}
/* Open-the-case-study CTA — sits under the artifact set on cards with detail pages */
.v5-recent-cta{
margin-top:24px;
padding-top:20px;
border-top:1px solid var(--v4-line-soft);
}
.v5-recent-cta-link{
display:inline-flex;align-items:center;gap:14px;
padding:12px 18px;
background:var(--v4-ink);color:var(--v4-paper);
font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
border-radius:99px;text-decoration:none;
transition:background .25s ease, transform .3s var(--ease-soft, ease), gap .3s var(--ease-soft, ease);
}
.v5-recent-cta-link:hover{
background:var(--v4-accent);
transform:translateY(-2px);
gap:20px;
}
.v5-recent-cta-arr{font-size:14px;transition:transform .3s var(--ease-soft, ease)}
.v5-recent-cta-link:hover .v5-recent-cta-arr{transform:translateX(3px)}
.v5-recent-title-col .v5-recent-proves{
display:flex !important;flex-direction:column;gap:8px;
padding-top:24px;border-top:1px solid var(--v4-ink);
grid-template-columns:none !important;
}
.v5-recent-title-col .v5-recent-proves-label,
.v5-recent-proves-label{
font-family:var(--serif) !important;
font-style:italic;
font-size:14px;
letter-spacing:0;
text-transform:none;
color:var(--v4-accent);
font-variation-settings:"opsz" 36;
}
.v5-recent-title-col .v5-recent-proves-text{
font-family:var(--serif);font-size:17px;line-height:1.4;color:var(--v4-ink);
font-style:italic;max-width:none;margin:0;
}
.v5-recent-title-col .v5-recent-proves-text .emph{color:var(--v4-accent)}
.v5-recent-details{
display:flex !important;flex-direction:column;gap:18px;
min-width:0;
}
.v5-page .v5-recent-details .v5-recent-layers{
display:flex !important;flex-direction:column;gap:0;
padding:0;border-top:0;border-bottom:0;margin-bottom:0;
}
.v5-page .v5-recent-details .v5-recent-layer{
display:flex !important;flex-direction:column;gap:6px;
padding:14px 0;border-top:1px solid var(--v4-line-soft);
grid-template-columns:none !important;
}
.v5-page .v5-recent-details .v5-recent-layer:first-child{border-top:0;padding-top:0}
.v5-page .v5-recent-details .v5-recent-layer-label{
font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
color:var(--v4-mute);padding-top:0 !important;
}
.v5-page .v5-recent-details .v5-recent-layer p{
font-family:var(--serif);font-size:15px;line-height:1.55;color:var(--v4-ink-2);
max-width:none;margin:0;
}
.v5-page .v5-recent-details .v5-recent-artifacts{
display:flex !important;flex-direction:column;gap:8px;
padding-top:14px;margin-top:6px;
border-top:1px solid var(--v4-line);
margin-bottom:0;grid-template-columns:none !important;
}
.v5-page .v5-recent-details .v5-recent-artifacts-label{
font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--v4-mute);
padding-top:0 !important;
}
.v5-page .v5-recent-details .v5-recent-artifacts-list{display:flex;flex-wrap:wrap;gap:8px}
/* =========================================================================
CURSOR NAV VARIANT — small dot + section anchor cue
========================================================================= */
.cursor-label.is-nav{
background:var(--v4-paper) !important;
color:var(--v4-ink) !important;
border:1px solid var(--v4-ink);
padding-left:20px !important;
position:relative;
}
.cursor-label.is-nav::before{
content:"";position:absolute;left:8px;top:50%;width:6px;height:6px;border-radius:50%;
background:var(--v4-accent);transform:translateY(-50%);
}
.cursor-dot.is-nav{background:var(--v4-ink) !important}
/* Sub-opener variant — nested section starters (e.g. disciplines within Method) */
.v5-section-open.v5-section-open-sub{
padding:48px 0 36px;margin-bottom:36px;
border-top:1px solid var(--v4-line-soft);
border-bottom:1px solid var(--v4-line-soft);
}
.v5-section-open-headline.v5-method-manifesto{
font-size:clamp(56px, 7vw, 108px);
line-height:0.95;
letter-spacing:-.028em;
font-variation-settings:"opsz" 72;
}
.v5-section-open-headline.v5-method-manifesto .emph{
font-style:italic;color:var(--v4-accent);
}
.v5-section-open-headline-sub{
font-size:clamp(36px,4.6vw,60px) !important;
font-variation-settings:"opsz" 60;
}
/* Disciplines opener — big headline, small copy */
.v5-section-open-row-disciplines{
grid-template-columns: 1.4fr 0.7fr;
gap:48px;align-items:end;
}
@media (max-width:900px){
.v5-section-open-row-disciplines{grid-template-columns:1fr;gap:18px}
}
.v5-disciplines-headline{
font-size:clamp(44px,5.4vw,80px) !important;
line-height:0.96 !important;
font-variation-settings:"opsz" 60;
}
.v5-disciplines-copy{
font-size:14.5px !important;
line-height:1.55;
color:var(--v4-mute);
max-width:40ch;
padding-bottom:12px;
}
.v5-facet-detail-body{animation:v5fw-fadein .55s var(--ease-soft, ease) both}
.v5-facet-detail-disc{
font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--v4-accent);margin-bottom:10px;
}
.v5-facet-detail-title{
font-family:var(--serif);font-size:44px;line-height:1;letter-spacing:-.022em;color:var(--v4-ink);
margin:0 0 14px;font-variation-settings:"opsz" 60;
}
.v5-facet-detail-tagline{
font-family:var(--serif);font-style:italic;font-size:21px;line-height:1.3;color:var(--v4-ink-2);
margin:0 0 18px;text-wrap:balance;
}
.v5-facet-detail-body-copy{
font-family:var(--sans, "Hanken Grotesk", sans-serif);
font-size:14.5px;line-height:1.6;color:var(--v4-mute);margin:0 0 24px;max-width:48ch;
}
.v5-facet-evidence{margin-top:auto}
.v5-facet-evidence-label{
font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--v4-mute);margin-bottom:10px;
}
.v5-facet-evidence ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:0}
.v5-facet-evidence-item{
display:grid;grid-template-columns:18px 1fr auto;gap:12px;align-items:center;
padding:10px 0;border-top:1px solid var(--v4-line-soft);font-size:13px;
}
.v5-facet-evidence-item:last-child{border-bottom:1px solid var(--v4-line-soft)}
.v5-facet-evidence-pip{
display:inline-block;width:8px;height:8px;border-radius:99px;
}
.v5-facet-pip-green{background:#7AB48A;box-shadow:0 0 0 3px rgba(122,180,138,0.18)}
.v5-facet-pip-copper{background:var(--v4-accent);box-shadow:0 0 0 3px rgba(185,88,60,0.18)}
.v5-facet-pip-steel{background:#7B8A99;box-shadow:0 0 0 3px rgba(123,138,153,0.16)}
.v5-facet-pip-amber{background:#D69458;box-shadow:0 0 0 3px rgba(214,148,88,0.18)}
.v5-facet-evidence-text{color:var(--v4-ink);font-family:var(--serif);font-size:14.5px}
.v5-facet-evidence-status{font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--v4-mute)}
.v5-facet-detail-foot{
display:flex;justify-content:space-between;align-items:center;
padding-top:18px;margin-top:20px;border-top:1px solid var(--v4-line-soft);
font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--v4-mute);
}
.v5-facet-next{
background:none;border:0;color:var(--v4-accent);cursor:pointer;
font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
display:inline-flex;align-items:center;gap:8px;
transition:gap .25s ease;font-family:var(--mono);
}
.v5-facet-next:hover{gap:14px}
/* Signature row */
.v5-facet-signature{margin-top:64px;padding-top:32px;position:relative}
.v5-facet-signature-rule{height:1px;background:var(--v4-ink);width:100%;margin-bottom:24px}
.v5-facet-signature-row{
display:grid;grid-template-columns:repeat(6,1fr);gap:24px;
padding-bottom:28px;border-bottom:1px solid var(--v4-line-soft);
}
@media (max-width:1100px){.v5-facet-signature-row{grid-template-columns:repeat(3,1fr)}}
@media (max-width:600px){.v5-facet-signature-row{grid-template-columns:repeat(2,1fr)}}
.v5-facet-signature-cell{display:flex;flex-direction:column;gap:6px}
.v5-facet-signature-key{
font-family:var(--serif);font-size:22px;color:var(--v4-ink);line-height:1.05;letter-spacing:-.012em;
font-variation-settings:"opsz" 36;
}
.v5-facet-signature-val{
font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--v4-mute);
line-height:1.4;
}
@media (max-width:900px){
.v5-facet-headline{font-size:48px}
.v5-facet-wheel{max-width:420px}
.v5-facet-label{min-width:100px;max-width:130px}
.v5-facet-label-name{font-size:15px}
.v5-facet-label-disc{display:none}
.v5-facet-detail{padding:24px 22px}
.v5-facet-detail-title{font-size:34px}
}
/* =========================================================================
PRACTICE — service modules grid + books moment
========================================================================= */
.v5-practice{padding:120px 0;background:var(--v4-paper);border-top:1px solid var(--v4-line-soft)}
.v5-practice-head{max-width:920px;margin-bottom:64px}
.v5-practice-eyebrow{
font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--v4-mute);
display:inline-flex;align-items:center;gap:10px;margin-bottom:24px;
}
.v5-practice-eyebrow::before{content:"";width:24px;height:1px;background:var(--v4-accent)}
.v5-practice-title{
font-family:var(--serif);font-size:clamp(48px,6.5vw,96px);line-height:0.96;
letter-spacing:-.028em;color:var(--v4-ink);margin:0 0 28px;text-wrap:balance;
font-variation-settings:"opsz" 72;
}
.v5-practice-title .emph{font-style:italic;color:var(--v4-accent)}
.v5-practice-lede{
font-family:var(--serif);font-size:19px;line-height:1.55;color:var(--v4-ink-2);max-width:64ch;margin:0;
}
.v5-practice-grid{
display:grid;grid-template-columns:repeat(3,1fr);gap:0;
border-top:1px solid var(--v4-ink);
}
@media (max-width:1100px){.v5-practice-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:700px){.v5-practice-grid{grid-template-columns:1fr}}
.v5-practice-card{
padding:36px 28px 32px;
border-right:1px solid var(--v4-line-soft);
border-bottom:1px solid var(--v4-line-soft);
display:flex;flex-direction:column;gap:18px;
position:relative;cursor:default;
background:var(--v4-paper);
transition:background .35s ease, border-color .35s ease;
}
.v5-practice-card:hover{background:var(--v4-paper-2);border-bottom-color:var(--v4-accent)}
.v5-practice-card:nth-child(3n){border-right:0}
@media (max-width:1100px){
.v5-practice-card{border-right:1px solid var(--v4-line-soft)}
.v5-practice-card:nth-child(2n){border-right:0}
.v5-practice-card:nth-child(3n){border-right:1px solid var(--v4-line-soft)}
.v5-practice-card:nth-child(2n+2){border-right:0}
}
@media (max-width:700px){
.v5-practice-card{border-right:0}
}
.v5-practice-card-head{display:flex;align-items:center;gap:14px}
.v5-practice-card-n{
font-family:var(--serif);font-style:italic;font-size:34px;line-height:1;
color:var(--v4-accent);letter-spacing:-.022em;
font-variation-settings:"opsz" 36;
}
.v5-practice-card-rule{
flex:1;height:1px;background:var(--v4-line);
transform:scaleX(0.4);transform-origin:left;
transition:transform .5s var(--ease-soft, cubic-bezier(.22,.7,.2,1)), background .4s ease;
}
.v5-practice-card:hover .v5-practice-card-rule{transform:scaleX(1);background:var(--v4-accent)}
.v5-practice-card-name{
font-family:var(--serif);font-size:24px;line-height:1.1;letter-spacing:-.018em;
color:var(--v4-ink);margin:0;text-wrap:balance;
font-variation-settings:"opsz" 36;
}
.v5-practice-card-body{
font-family:var(--serif);font-size:15px;line-height:1.55;color:var(--v4-ink-2);margin:0;
}
.v5-practice-card-evidence{
margin-top:auto;padding-top:18px;border-top:1px solid var(--v4-line-soft);
display:flex;flex-direction:column;gap:8px;
}
.v5-practice-card-evidence-label{
font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--v4-mute);
}
.v5-practice-card-evidence ul{
list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px;
}
.v5-practice-card-evidence li{
font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:var(--v4-ink-2);
display:flex;align-items:center;gap:8px;
}
.v5-practice-card-evidence li::before{
content:"·";color:var(--v4-accent);font-size:14px;
}
/* Books moment within Practice */
.v5-practice-books{
margin-top:80px;padding-top:48px;
border-top:1px solid var(--v4-ink);
}
.v5-practice-books-label{
font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--v4-mute);
display:block;margin-bottom:14px;
}
.v5-practice-books-title{
font-family:var(--serif);font-size:clamp(36px,4.6vw,56px);line-height:0.95;
letter-spacing:-.022em;color:var(--v4-ink);margin:0 0 36px;text-wrap:balance;
font-variation-settings:"opsz" 60;
}
.v5-practice-books-title .emph{font-style:italic;color:var(--v4-accent)}
.v5-practice-books-row{
display:grid;grid-template-columns:1fr 1fr;gap:48px;
}
@media (max-width:900px){.v5-practice-books-row{grid-template-columns:1fr;gap:32px}}
.v5-practice-book{
display:grid;grid-template-columns:140px 1fr;gap:24px;align-items:start;
}
.v5-practice-book-cover{
width:140px;height:200px;
background:linear-gradient(135deg, var(--v4-ink) 0%, var(--v4-ink-2) 100%);
color:var(--v4-paper);
position:relative;border-radius:2px;overflow:hidden;
display:flex;flex-direction:column;justify-content:space-between;padding:16px 14px;
box-shadow:0 10px 28px -16px rgba(14,15,14,0.4), 4px 0 0 -1px var(--v4-paper-3);
transition:transform .55s var(--ease-soft, cubic-bezier(.22,.7,.2,1)), box-shadow .55s ease;
}
.v5-practice-book-cover.is-alt{background:linear-gradient(135deg, var(--v4-accent) 0%, #8B3D29 100%)}
.v5-practice-book:hover .v5-practice-book-cover{transform:translateY(-4px) rotate(-1.5deg);box-shadow:0 18px 40px -16px rgba(14,15,14,0.5), 4px 0 0 -1px var(--v4-paper-3)}
.v5-practice-book-spine{
font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;
writing-mode:vertical-rl;transform:rotate(180deg);
position:absolute;left:5px;top:16px;color:rgba(242,238,230,0.55);
}
.v5-practice-book-cover-tag{
font-family:var(--mono);font-size:9px;letter-spacing:.16em;color:rgba(242,238,230,0.65);
align-self:flex-end;text-transform:uppercase;
}
.v5-practice-book-cover-corner{
position:absolute;right:10px;top:10px;width:14px;height:14px;
border-top:1px solid rgba(242,238,230,0.4);border-right:1px solid rgba(242,238,230,0.4);
}
.v5-practice-book-meta{display:flex;flex-direction:column;gap:6px}
.v5-practice-book-title{
font-family:var(--serif);font-size:24px;line-height:1.05;letter-spacing:-.014em;
color:var(--v4-ink);margin:0;font-variation-settings:"opsz" 36;
}
.v5-practice-book-sub{
font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--v4-mute);
}
.v5-practice-book-body{
font-family:var(--serif);font-size:15px;line-height:1.55;color:var(--v4-ink-2);margin:6px 0 0;
}
/* =========================================================================
CONTACT — content-driven engagement mode cards
========================================================================= */
/* =========================================================================
ENGAGEMENTS — idea commercialization timeline + linear picker
========================================================================= */
.v5-engagements{padding:80px 0 120px;background:var(--v4-night);color:var(--v4-paper);position:relative;overflow:hidden}
.v5-engagements::before{
content:"";position:absolute;inset:0;pointer-events:none;
background:radial-gradient(60% 50% at 50% 30%, rgba(185,88,60,0.10), transparent 70%);
}
.v5-engagements-head{
position:relative;z-index:1;max-width:920px;margin-bottom:64px;
display:flex;flex-direction:column;gap:6px;
}
.v5-engagements-eyebrow{
font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;
color:rgba(242,238,230,0.55);
display:inline-flex;align-items:center;gap:14px;
}
.v5-engagements-eyebrow-rule{
display:inline-block;width:36px;height:1px;background:var(--v4-accent-hi);
}
.v5-engagements-eyebrow-num{
font-family:var(--serif);font-style:italic;color:var(--v4-accent-hi);
font-size:18px;letter-spacing:-.01em;
font-variation-settings:"opsz" 36;
text-transform:none;
}
.v5-engagements-title{
font-family:var(--serif);font-size:clamp(36px, 4.4vw, 56px);line-height:0.98;
letter-spacing:-.024em;color:var(--v4-paper);margin:0;text-wrap:balance;
font-variation-settings:"opsz" 60;
}
.v5-engagements-title .emph{font-style:italic;color:var(--v4-accent-hi)}
.v5-engagements-lede{
font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
color:rgba(242,238,230,0.4);margin:8px 0 0;
}
/* Horizontal idea-commercialization timeline */
.v5-engagements-timeline{
position:relative;z-index:1;margin:48px 0 56px;
padding:48px 72px 80px;
background:rgba(242,238,230,0.02);
border:1px solid rgba(242,238,230,0.12);
border-radius:2px;
}
.v5-engagements-timeline::before{
content:"";position:absolute;left:0;top:0;width:60px;height:1px;background:var(--v4-accent);
}
.v5-engagements-timeline-rail{
position:relative;height:120px;width:100%;
}
.v5-engagements-timeline-line{
position:absolute;left:0;right:0;top:24px;height:2px;
background:rgba(242,238,230,0.12);border-radius:99px;
}
.v5-engagements-timeline-band{
position:absolute;top:22px;height:6px;
background:linear-gradient(90deg, var(--v4-accent) 0%, var(--v4-accent-hi) 100%);
border-radius:99px;
transition:left 0.7s var(--ease-soft, cubic-bezier(.22,.7,.2,1)), right 0.7s var(--ease-soft, cubic-bezier(.22,.7,.2,1));
box-shadow:0 0 24px rgba(216,106,72,0.45);
}
/* Stage markers — minimal dot, no active glow (band is the indicator) */
.v5-engagements-timeline-stage{
position:absolute;top:0;transform:translateX(-50%);
display:flex;flex-direction:column;align-items:center;gap:6px;
min-width:90px;cursor:default;
}
.v5-engagements-timeline-dot{
width:10px;height:10px;border-radius:50%;
background:var(--v4-night);border:1px solid rgba(242,238,230,0.3);
margin-top:19px;position:relative;z-index:2;
}
.v5-engagements-timeline-stage-n{
font-family:var(--mono);font-size:9px;letter-spacing:.18em;color:rgba(242,238,230,0.4);
text-transform:uppercase;margin-top:8px;
}
.v5-engagements-timeline-stage-label{
font-family:var(--serif);font-size:16px;line-height:1.05;letter-spacing:-.014em;
color:rgba(242,238,230,0.7);font-variation-settings:"opsz" 36;
}
.v5-engagements-timeline-stage-note{
font-family:var(--mono);font-size:9px;letter-spacing:.12em;
color:rgba(242,238,230,0.32);text-transform:uppercase;
max-width:100px;text-align:center;
}
@media (max-width:900px){
.v5-engagements-timeline{padding:36px 16px 36px;overflow-x:auto}
.v5-engagements-timeline-rail{height:auto;min-width:680px}
}
/* Two-column body — picker on left, detail on right */
.v5-engagements-body{
position:relative;z-index:1;
display:grid;grid-template-columns:minmax(280px, 0.85fr) minmax(0, 1.4fr);
gap:48px;align-items:start;
}
@media (max-width:1100px){.v5-engagements-body{grid-template-columns:1fr;gap:36px}}
/* Mode picker — linear list of selectable rows */
.v5-engagements-picker{
display:flex;flex-direction:column;
border-top:1px solid rgba(242,238,230,0.18);
}
.v5-engagements-mode-row{
display:grid;grid-template-columns:36px minmax(0, 1fr) auto 8px;gap:14px;align-items:center;
padding:18px 4px 18px 14px;
background:transparent;border:0;border-bottom:1px solid rgba(242,238,230,0.10);
text-align:left;cursor:pointer;position:relative;
transition:background .35s ease;
}
.v5-engagements-mode-row:hover{background:rgba(242,238,230,0.03)}
.v5-engagements-mode-row-n{
font-family:var(--serif);font-style:italic;font-size:22px;line-height:1;
color:rgba(242,238,230,0.4);letter-spacing:-.022em;
font-variation-settings:"opsz" 36;
transition:color .4s ease;
}
.v5-engagements-mode-row-name{
font-family:var(--serif);font-size:18px;line-height:1.1;letter-spacing:-.012em;
color:rgba(242,238,230,0.75);
transition:color .4s ease;font-variation-settings:"opsz" 36;
min-width:0;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.v5-engagements-mode-row-range{
font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
color:rgba(242,238,230,0.4);
transition:color .4s ease;
white-space:nowrap;flex-shrink:0;
}
.v5-engagements-mode-row-marker{
display:inline-block;width:8px;height:8px;border-radius:50%;
background:transparent;border:1px solid rgba(242,238,230,0.25);
transition:background .4s ease, border-color .4s ease, box-shadow .4s ease;
}
.v5-engagements-mode-row.is-active .v5-engagements-mode-row-n{color:var(--v4-accent-hi)}
.v5-engagements-mode-row.is-active .v5-engagements-mode-row-name{color:var(--v4-paper)}
.v5-engagements-mode-row.is-active .v5-engagements-mode-row-range{color:var(--v4-accent-hi)}
.v5-engagements-mode-row.is-active .v5-engagements-mode-row-marker{
background:var(--v4-accent-hi);border-color:var(--v4-accent-hi);
box-shadow:0 0 0 4px rgba(185,88,60,0.25), 0 0 12px rgba(216,106,72,0.5);
}
.v5-engagements-mode-row.is-active{background:rgba(185,88,60,0.06)}
/* Detail panel — dynamic, transitions on active change */
.v5-engagements-detail{
background:rgba(242,238,230,0.04);
border:1px solid rgba(242,238,230,0.15);
padding:32px 32px 28px;
display:flex;flex-direction:column;gap:18px;
animation:v5-eng-detail-fadein .55s var(--ease-soft, ease) both;
position:relative;
}
@keyframes v5-eng-detail-fadein{
from{opacity:0;transform:translateY(8px)}
to{opacity:1;transform:translateY(0)}
}
.v5-engagements-detail::before{
content:"";position:absolute;top:-1px;left:-1px;width:42px;height:1px;background:var(--v4-accent);
}
.v5-engagements-detail-head{
display:flex;align-items:center;justify-content:space-between;
padding-bottom:14px;border-bottom:1px solid rgba(242,238,230,0.12);
flex-wrap:wrap;gap:8px;
}
.v5-engagements-detail-n,
.v5-engagements-detail-zones{
font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
color:rgba(242,238,230,0.5);
}
.v5-engagements-detail-zones{color:var(--v4-accent-hi)}
.v5-engagements-detail-body{display:flex;flex-direction:column;gap:14px}
.v5-engagements-detail-name{
font-family:var(--serif);font-size:clamp(28px, 3.4vw, 40px);line-height:1.05;
letter-spacing:-.022em;color:var(--v4-paper);margin:0;
font-variation-settings:"opsz" 36;
}
.v5-engagements-detail-body-copy{
font-family:var(--serif);font-size:16px;line-height:1.5;color:rgba(242,238,230,0.78);margin:0;
}
.v5-engagements-detail-fit{
font-family:var(--serif);font-size:15px;line-height:1.5;color:rgba(242,238,230,0.6);margin:0;
display:flex;align-items:baseline;gap:14px;
padding-top:14px;border-top:1px solid rgba(242,238,230,0.12);
}
.v5-engagements-detail-fit .emph{color:var(--v4-paper);font-style:italic}
.v5-engagements-detail-fit-label{
font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;
color:rgba(242,238,230,0.45);flex-shrink:0;
}
.v5-engagements-detail-cta{
display:inline-flex;align-items:center;gap:12px;
font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
color:var(--v4-accent-hi);
padding:8px 0;align-self:flex-start;margin-top:6px;
border-bottom:1px solid rgba(216,106,72,0.4);
transition:color .25s ease, border-color .25s ease, gap .35s var(--ease-soft, cubic-bezier(.22,.7,.2,1));
}
.v5-engagements-detail-cta:hover{color:var(--v4-paper);border-color:var(--v4-paper);gap:18px}
.v5-engagements-detail-cta-arr{
font-family:var(--serif);font-size:18px;
transition:transform .35s var(--ease-soft, cubic-bezier(.22,.7,.2,1));
}
.v5-engagements-detail-cta:hover .v5-engagements-detail-cta-arr{transform:translateX(4px)}
/* =========================================================================
RECENT WORK SPECIMEN — small bespoke visual mark per project
========================================================================= */
.v5-recent-specimen{
display:block;width:100%;max-width:220px;
aspect-ratio:5/6;margin-top:14px;
border-radius:2px;overflow:hidden;
box-shadow:0 14px 32px -16px rgba(14,15,14,0.32);
transition:transform .45s var(--ease-soft, cubic-bezier(.22,.7,.2,1)), box-shadow .45s ease;
}
.v5-recent-specimen:hover{
transform:translateY(-2px) rotate(-0.5deg);
box-shadow:0 20px 40px -16px rgba(14,15,14,0.45);
}
.v5-recent-specimen svg{
display:block;width:100%;height:100%;
}
/* =========================================================================
SECTION OPENER — intentional editorial start to a section group
========================================================================= */
.v5-section-open{
padding:96px 0 56px;
border-bottom:1px solid var(--v4-line-soft);
margin-bottom:64px;
}
.v5-section-open-eyebrow{
display:flex;align-items:center;gap:14px;
font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--v4-mute);
margin-bottom:36px;
}
.v5-section-open-rule{display:inline-block;width:40px;height:1px;background:var(--v4-accent)}
.v5-section-open-num{
font-family:var(--serif);font-style:italic;color:var(--v4-accent);font-size:18px;letter-spacing:-.01em;
font-variation-settings:"opsz" 36;
}
.v5-section-open-row{
display:grid;grid-template-columns:1.2fr 0.85fr;gap:64px;align-items:end;
}
@media (max-width:900px){.v5-section-open-row{grid-template-columns:1fr;gap:24px}}
.v5-section-open-headline{
font-family:var(--serif);font-size:clamp(48px,7vw,108px);line-height:0.94;
letter-spacing:-.028em;color:var(--v4-ink);margin:0;text-wrap:balance;
font-variation-settings:"opsz" 72;
}
.v5-section-open-headline .emph{font-style:italic;color:var(--v4-accent)}
.v5-section-open-copy{
font-family:var(--serif);font-size:17.5px;line-height:1.55;color:var(--v4-ink-2);
max-width:48ch;padding-bottom:8px;
}
/* Shell for the practice section opener (separate light surface) */
.v5-section-open-shell{
background:var(--v4-paper);
border-top:1px solid var(--v4-line-soft);
}
.v5-section-open-shell .v5-section-open{padding-top:64px;margin-bottom:0;border-bottom:0}
/* When a section opener is the first child of a v5-method, drop method's top padding */
.v5-method .v5-section-open{padding-top:24px}
.v5-method:has(.v5-section-open){padding-top:24px}
/* =========================================================================
GROUP DIVIDER (legacy, retained for safety) — quiet typographic plate
========================================================================= */
.v5-group-divider{
padding:88px 0 36px;
background:var(--v4-paper);
border-top:1px solid var(--v4-line-soft);
}
.v5-group-divider-rule{
height:1px;background:var(--v4-ink);width:100%;margin-bottom:36px;
}
.v5-group-divider-row{
display:grid;grid-template-columns:120px minmax(0,1.5fr) minmax(0,1fr);
gap:48px;align-items:start;
}
@media (max-width:900px){.v5-group-divider-row{grid-template-columns:1fr;gap:18px}}
.v5-group-divider-n{
font-family:var(--serif);font-style:italic;font-size:64px;line-height:1;
color:var(--v4-accent);letter-spacing:-.02em;font-variation-settings:"opsz" 36;
}
.v5-group-divider-main{display:flex;flex-direction:column;gap:14px}
.v5-group-divider-label{
font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--v4-mute);
}
.v5-group-divider-title{
font-family:var(--serif);font-size:clamp(28px,3.4vw,44px);line-height:1.08;
letter-spacing:-.022em;color:var(--v4-ink);margin:0;text-wrap:balance;
font-variation-settings:"opsz" 36;
}
.v5-group-divider-copy{
font-family:var(--serif);font-size:16px;line-height:1.55;color:var(--v4-ink-2);
padding-top:8px;max-width:48ch;
}
/* =========================================================================
FOOTER — substantial colophon
========================================================================= */
.v5-footer{
background:var(--v4-paper);border-top:1px solid var(--v4-line);
position:relative;overflow:hidden;
}
/* Full-bleed spine */
.v5-footer-spine{
background:#16171A;color:var(--v4-paper);
padding:32px 0;border-top:1px solid rgba(242,238,230,0.06);border-bottom:1px solid var(--v4-ink);
position:relative;overflow:hidden;
}
.v5-footer-spine::before{
content:"";position:absolute;inset:0;pointer-events:none;
background:radial-gradient(50% 80% at 50% 50%, rgba(185,88,60,0.10), transparent 70%);
}
.v5-footer-spine-inner{
display:flex;align-items:center;justify-content:space-between;gap:24px;
position:relative;z-index:1;flex-wrap:wrap;
}
.v5-footer-spine-mark{
font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:rgba(242,238,230,0.5);
}
.v5-footer-spine-text{
font-family:var(--serif);font-size:clamp(28px,3.8vw,52px);line-height:1.05;
letter-spacing:-.022em;color:var(--v4-paper);font-style:italic;
font-variation-settings:"opsz" 60;flex:1;text-align:center;
}
.v5-footer-spine-text .split-char{color:var(--v4-paper);transition:color .35s ease, transform .35s cubic-bezier(.22,.61,.36,1)}
.v5-footer-spine-text:hover .split-char{color:var(--v4-accent-hi)}
.v5-footer-spine-wrap{
display:inline-block;
text-align:center;
}
.v5-footer-spine-wrap.wire-underline::after{
background:url("data:image/svg+xml;utf8,") repeat-x;
background-size:120px 8px;
bottom:-10px;
}
.v5-footer-spine-meta{
font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:rgba(242,238,230,0.5);
}
@media (max-width:900px){
.v5-footer-spine-inner{justify-content:center}
.v5-footer-spine-text{text-align:center;flex:0 1 100%}
}
/* Main footer grid — 3 columns on desktop */
.v5-footer-grid{
display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:48px;
padding:64px 0 40px;
}
@media (max-width:1100px){.v5-footer-grid{grid-template-columns:1fr 1fr;gap:32px}}
@media (max-width:600px){.v5-footer-grid{grid-template-columns:1fr;gap:32px}}
.v5-footer-col{display:flex;flex-direction:column;gap:18px}
.v5-footer-col-label{
font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--v4-mute);
padding-bottom:6px;border-bottom:1px solid var(--v4-line);
display:inline-flex;align-items:center;gap:8px;
}
.v5-footer-col-label-2{margin-top:14px}
/* Identity column */
.v5-footer-col-id{gap:22px}
.v5-footer-mark{display:flex;align-items:center;gap:12px}
.v5-footer-mark-glyph{
width:36px;height:36px;border-radius:50%;background:var(--v4-ink);color:var(--v4-paper);
display:inline-flex;align-items:center;justify-content:center;
font-family:var(--mono);font-size:13px;font-weight:600;letter-spacing:.04em;
position:relative;overflow:hidden;flex-shrink:0;
}
.v5-footer-mark-glyph::after{
content:"";position:absolute;inset:0;border-radius:50%;
background:radial-gradient(circle at 30% 30%, rgba(255,255,255,0.18), transparent 60%);
pointer-events:none;
}
/* =========================================================================
ESCHER MARK — three interlocked Borromean rings, no disc container.
Minimal at rest; hover lifts the loop into a soft diffused halo and spins.
Click twirls 540° flipping the weave parity.
========================================================================= */
button.cz-mark{
width:40px;height:40px;
background:transparent;border:0;padding:0;cursor:pointer;border-radius:50%;
display:inline-flex;align-items:center;justify-content:center;
position:relative;flex-shrink:0;
--cz-bg: var(--v4-paper);
}
button.cz-mark:focus-visible{outline:2px solid var(--v4-accent);outline-offset:3px}
/* Twirl wrapper — handles per-click rotation, transitions smoothly */
.cz-mark-twirl{
display:inline-flex;align-items:center;justify-content:center;
width:100%;height:100%;
transition: transform 1.1s cubic-bezier(.7,.05,.25,1.05);
}
.cz-mark-svg{
width:38px;height:38px;transform-origin:50% 50%;
filter: drop-shadow(0 1px 2px rgba(14,15,14,0.05));
transition: filter .55s ease;
will-change: transform, filter;
}
/* Strands — quiet at rest */
.cz-ring{
fill:none;stroke:var(--v4-ink);stroke-width:1.5;
opacity:.55;
transition: opacity .5s ease, stroke-width .5s ease, stroke .5s ease;
}
.cz-ring-a{ stroke: var(--v4-accent); } /* orange top ring */
.cz-chip{ fill: var(--cz-bg); transition: fill .25s ease; }
/* HOVER — rings brighten, loop diffuses a soft shadow halo and rotates slowly */
button.cz-mark:hover .cz-ring{ opacity:1; stroke-width:1.7 }
button.cz-mark:hover .cz-ring-a{ stroke: var(--v4-accent-hi, var(--v4-accent)); }
button.cz-mark:hover .cz-mark-svg{
animation: cz-spin 8s linear infinite;
filter:
drop-shadow(0 10px 22px rgba(14,15,14,0.32))
drop-shadow(0 18px 38px rgba(185,88,60,0.22))
drop-shadow(0 2px 6px rgba(14,15,14,0.18));
}
@keyframes cz-spin{
from{ transform: rotate(0deg) }
to{ transform: rotate(360deg) }
}
@media (prefers-reduced-motion: reduce){
button.cz-mark:hover .cz-mark-svg{ animation:none }
.cz-mark-twirl{ transition:none }
}
.v5-footer-mark-name{
display:block;font-family:var(--serif);font-size:22px;color:var(--v4-ink);
letter-spacing:-.014em;font-variation-settings:"opsz" 36;
}
.v5-footer-mark-sub{
display:block;font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--v4-mute);
margin-top:2px;
}
.v5-footer-blurb{
font-family:var(--serif);font-size:15.5px;line-height:1.55;color:var(--v4-ink-2);
max-width:46ch;margin:0;
}
.v5-footer-pins{display:flex;flex-direction:column;gap:8px;margin-top:6px}
.v5-footer-pin{
display:grid;grid-template-columns:80px 1fr;gap:14px;align-items:baseline;
padding:6px 0;border-top:1px solid var(--v4-line-soft);
font-family:var(--mono);font-size:10.5px;letter-spacing:.04em;
}
.v5-footer-pin-label{
font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--v4-mute);
}
.v5-footer-pin-val{color:var(--v4-ink-2);font-size:11px}
/* Subnav under identity column */
.v5-footer-subnav{
display:flex;flex-wrap:wrap;gap:10px;align-items:center;
margin-top:14px;padding-top:14px;border-top:1px solid var(--v4-line-soft);
font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
}
.v5-footer-subnav a{color:var(--v4-ink-2);transition:color .25s ease}
.v5-footer-subnav a:hover{color:var(--v4-accent)}
.v5-footer-subnav-dot{color:var(--v4-line)}
/* Earlier signals paragraph in footer */
.v5-footer-earlier{
font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;line-height:1.7;color:var(--v4-ink-2);
margin:0;padding-top:6px;
}
/* List columns */
.v5-footer-list,
.v5-footer-contact-list{
list-style:none;margin:0;padding:0;
display:flex;flex-direction:column;gap:0;
}
.v5-footer-list li{
padding:10px 0;border-bottom:1px solid var(--v4-line-soft);
}
.v5-footer-list li:last-child{border-bottom:0}
.v5-footer-list a{
display:flex;justify-content:space-between;align-items:baseline;gap:14px;
font-family:var(--serif);font-size:15.5px;line-height:1.2;color:var(--v4-ink);
letter-spacing:-.008em;
transition:color .25s ease, transform .25s ease;
}
.v5-footer-list a:hover{color:var(--v4-accent);transform:translateX(3px)}
.v5-footer-list-meta{
font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--v4-mute);
flex-shrink:0;
}
/* Books mini-shelf in footer */
.v5-footer-books{display:flex;flex-direction:column;gap:12px;margin-top:14px}
.v5-footer-books-row{display:flex;gap:14px}
.v5-footer-book-mini{display:flex;flex-direction:column;gap:6px;flex:1}
.v5-footer-book-mini-cover{
display:block;width:100%;aspect-ratio:0.7/1;
background:linear-gradient(135deg, var(--v4-ink) 0%, var(--v4-ink-2) 100%);
position:relative;border-radius:2px;overflow:hidden;
box-shadow:0 6px 18px -10px rgba(14,15,14,0.4);
transition:transform .4s var(--ease-soft, ease);
}
.v5-footer-book-mini-cover.is-alt{
background:linear-gradient(135deg, var(--v4-accent) 0%, #8B3D29 100%);
}
.v5-footer-book-mini-cover::before{
content:"";position:absolute;left:4px;top:8px;bottom:8px;width:1px;
background:rgba(242,238,230,0.3);
}
.v5-footer-book-mini:hover .v5-footer-book-mini-cover{transform:translateY(-2px) rotate(-1deg)}
.v5-footer-book-mini-title{
font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--v4-ink-2);
text-align:center;line-height:1.3;
}
/* Contact column */
.v5-footer-contact-list li{
display:grid;grid-template-columns:80px 1fr;gap:14px;align-items:baseline;
padding:10px 0;border-bottom:1px solid var(--v4-line-soft);
}
.v5-footer-contact-list li:last-child{border-bottom:0}
.v5-footer-contact-key{
font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--v4-mute);
}
.v5-footer-contact-val{
font-family:var(--serif);font-size:15px;color:var(--v4-ink);line-height:1.2;
transition:color .25s ease;
}
a.v5-footer-contact-val:hover{color:var(--v4-accent)}
.v5-footer-cta{
display:inline-flex;align-items:center;gap:10px;
padding:12px 18px;background:var(--v4-ink);color:var(--v4-paper);
font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
border-radius:99px;margin-top:8px;align-self:flex-start;
transition:background .25s ease, transform .25s ease;
}
.v5-footer-cta:hover{background:var(--v4-accent);transform:translateY(-1px)}
.v5-footer-cta-dot{
width:7px;height:7px;border-radius:50%;background:#7AB48A;
box-shadow:0 0 0 4px rgba(122,180,138,0.18);
animation:pulse-dot 2s ease-in-out infinite;
}
.v5-footer-cta-arr{font-size:14px}
/* Bottom ribbon */
.v5-footer-ribbon{
display:flex;justify-content:space-between;align-items:center;gap:24px;
padding:20px 0 14px;border-top:1px solid var(--v4-line);
font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--v4-mute);
flex-wrap:wrap;
}
.v5-footer-ribbon-left,
.v5-footer-ribbon-right{
display:flex;align-items:center;gap:10px;flex-wrap:wrap;
}
.v5-footer-ribbon-right a{
color:inherit;border-bottom:1px solid var(--v4-line);
transition:color .25s ease, border-color .25s ease;
}
.v5-footer-ribbon-right a:hover{color:var(--v4-accent);border-bottom-color:var(--v4-accent)}
.v5-footer-ribbon-right .emph{
color:var(--v4-accent);font-family:var(--serif);font-style:italic;font-size:13px;
letter-spacing:-.008em;text-transform:none;
}
.v5-footer-ribbon-dot{color:var(--v4-line)}
@media (max-width:900px){
.v5-footer-ribbon{justify-content:flex-start}
}
/* =========================================================================
Misc — share existing wire-underline + animate hero-arc/.photon
Already styled in styles.css via class names .hero-arc.arc-N and .photon.photon-N
========================================================================= */
/* SplitText hover-scatter — color override for v5 palette */
.v5-page .split:hover .split-char{color:var(--v4-accent)}
.v5-page .v5-hero-tag-split .split-char{font-style:italic;font-family:var(--serif);color:var(--v4-ink)}
.v5-page .v5-hero-tag-split:hover .split-char{color:var(--v4-accent)}
/* Cursor label — override styles.css that calls for unloaded stencil font */
.cursor-label{
font-family:'JetBrains Mono', ui-monospace, monospace !important;
font-weight:500 !important;
font-size:10.5px !important;
letter-spacing:.14em !important;
background:var(--v4-ink);color:var(--v4-paper);
padding:6px 10px;border-radius:2px;
white-space:nowrap;
}
.cursor-dot{background:var(--v4-accent)}
/* Ensure visible emph styling everywhere */
.v5-page .emph{font-style:italic;color:var(--v4-accent)}
/* =========================================================================
SECTION-HEADLINE TYPE PAIRING
Non-italic copy → sans (Hanken Grotesk).
.emph → serif italic accent (Newsreader), keeping the existing color.
========================================================================= */
.v5-page .v5-through-title,
.v5-page .v5-method-title,
.v5-page .v5-portal-title,
.v5-page .v5-teach-title,
.v5-page .v5-ai-title,
.v5-page .v5-signals-title,
.v5-page .v5-contact-title,
.v5-page .v5-practice-title,
.v5-page .v5-practice-books-title,
.v5-page .v5-engagements-title,
.v5-page .v5-ft-section-title,
.v5-page .v5-section-open-headline,
.v5-page .v5-disciplines-headline,
.v5-page .v5-facet-headline{
font-family:var(--sans);
font-weight:500;
letter-spacing:-.022em;
font-variation-settings:normal;
}
.v5-page .v5-through-title .emph,
.v5-page .v5-method-title .emph,
.v5-page .v5-portal-title .emph,
.v5-page .v5-teach-title .emph,
.v5-page .v5-ai-title .emph,
.v5-page .v5-signals-title .emph,
.v5-page .v5-contact-title .emph,
.v5-page .v5-practice-title .emph,
.v5-page .v5-practice-books-title .emph,
.v5-page .v5-engagements-title .emph,
.v5-page .v5-ft-section-title .emph,
.v5-page .v5-section-open-headline .emph,
.v5-page .v5-disciplines-headline .emph,
.v5-page .v5-facet-headline .emph{
font-family:var(--serif);
font-weight:400;
font-style:italic;
letter-spacing:-.018em;
font-variation-settings:"opsz" 72;
}
/* WordReveal inlines fontFamily on .v4-word + its inner span — override those
so the .emph accent actually renders in the serif italic display face. */
.v5-page .v5-through-title .emph .v4-word,
.v5-page .v5-through-title .emph .v4-word > span,
.v5-page .v5-method-title .emph .v4-word,
.v5-page .v5-method-title .emph .v4-word > span,
.v5-page .v5-portal-title .emph .v4-word,
.v5-page .v5-portal-title .emph .v4-word > span,
.v5-page .v5-teach-title .emph .v4-word,
.v5-page .v5-teach-title .emph .v4-word > span,
.v5-page .v5-ai-title .emph .v4-word,
.v5-page .v5-ai-title .emph .v4-word > span,
.v5-page .v5-signals-title .emph .v4-word,
.v5-page .v5-signals-title .emph .v4-word > span,
.v5-page .v5-contact-title .emph .v4-word,
.v5-page .v5-contact-title .emph .v4-word > span,
.v5-page .v5-practice-title .emph .v4-word,
.v5-page .v5-practice-title .emph .v4-word > span,
.v5-page .v5-practice-books-title .emph .v4-word,
.v5-page .v5-practice-books-title .emph .v4-word > span,
.v5-page .v5-engagements-title .emph .v4-word,
.v5-page .v5-engagements-title .emph .v4-word > span,
.v5-page .v5-ft-section-title .emph .v4-word,
.v5-page .v5-ft-section-title .emph .v4-word > span,
.v5-page .v5-section-open-headline .emph .v4-word,
.v5-page .v5-section-open-headline .emph .v4-word > span,
.v5-page .v5-disciplines-headline .emph .v4-word,
.v5-page .v5-disciplines-headline .emph .v4-word > span,
.v5-page .v5-facet-headline .emph .v4-word,
.v5-page .v5-facet-headline .emph .v4-word > span{
font-family:var(--serif) !important;
font-style:italic !important;
}
/* =========================================================================
MOBILE RESPONSIVE — tighter type, padding, and grid stacking below
~720px. The existing breakpoints in this file mostly stop at 900-1100;
this block adds a phone tier so 320-720px viewports render without
horizontal overflow, run-on headlines, or oversized type.
========================================================================= */
/* Phone tier (≤720) — section rhythm, container padding, hero scaling */
@media (max-width: 720px) {
.v5-page {
--section-pad-y: 64px;
}
.v4-container {
padding-left: 20px !important;
padding-right: 20px !important;
}
.section-pad,
.v5-page section { padding-top: 56px; padding-bottom: 56px; }
/* Hero — pull the giant clamps down so 116px display doesn't bottom out
at 48px (already huge for a phone). */
.v5-hero { padding-top: 84px; }
.v5-hero-headline { font-size: clamp(32px, 9.5vw, 56px) !important; line-height: 1.02; }
.v5-hero-spotlight-suffix { font-size: clamp(32px, 9vw, 52px) !important; }
.v5-hero-spotlight-prefix { font-size: 11px !important; }
.v5-hero-spotlight { gap: 8px; }
.v5-hero-carousel { gap: 8px; margin: 4px 0 24px; flex-wrap: wrap; }
.v5-hero-carousel-label { font-size: 10.5px !important; }
.v5-hero-tag { font-size: clamp(16px, 4.6vw, 22px) !important; line-height: 1.35; }
.v5-hero-tag-mark { font-size: 12px; }
.v5-hero-meta-top {
flex-direction: column !important;
align-items: flex-start !important;
gap: 6px !important;
}
.v5-hero-foot { margin-bottom: 32px; }
.v5-hero-proof {
padding: 14px 0;
font-size: 10.5px;
gap: 8px;
}
.v5-hero-proof-label-2 { margin-left: 0 !important; }
/* Recent work — tighten cards */
.v5-recent-meta-client { font-size: 18px !important; }
.v5-page .v5-recent .v5-recent-title { font-size: clamp(26px, 7vw, 36px) !important; }
.v5-recent-cta-link { font-size: 12px; }
/* Marquee — clamp-bottoms still 48px which dominates a phone screen */
.v4-marquee-item { font-size: clamp(28px, 8vw, 48px) !important; gap: 28px; }
.v4-marquee-band { padding: 36px 0; }
.v4-marquee-track { gap: 28px; }
/* Section openers — the big headline blocks (eg "Every discipline…",
"Find the signal…", "AI is now part of…"). 108px floor is brutal on
a 375px viewport. */
.v5-page .v5-section-open-headline,
.v5-page .v5-disciplines-headline { font-size: clamp(36px, 9vw, 56px) !important; line-height: 1.02; }
.v5-page .v5-facet-headline { font-size: clamp(36px, 9vw, 56px) !important; }
.v5-page .v5-engagements-title,
.v5-page .v5-ai-title,
.v5-page .v5-signals-title,
.v5-page .v5-method-title,
.v5-page .v5-through-title,
.v5-page .v5-practice-title,
.v5-page .v5-practice-books-title,
.v5-page .v5-contact-title,
.v5-page .v5-portal-title,
.v5-page .v5-teach-title,
.v5-page .v5-ft-section-title { font-size: clamp(32px, 8.5vw, 48px) !important; line-height: 1.04 !important; }
/* AI section — items already stack at 900; tighten the inner padding */
.v5-ai-half-item-n { font-size: 12px; }
.v5-ai-half-range, .v5-ai-half-judgment { padding-top: 24px !important; padding-bottom: 24px !important; }
/* Signals table — keep grid but tighten */
.v5-signals-row { padding: 14px 8px; }
.v5-signals-n { font-size: 11px; }
.v5-signals-cell { font-size: 13px; }
/* Engagements — let timeline scroll horizontally w/ momentum */
.v5-engagements-timeline-rail { min-width: 540px; }
.v5-engagements-mode-row { padding: 14px 0; gap: 12px; }
.v5-engagements-mode-row-n { font-size: 11px; min-width: 24px; }
/* Facet wheel — gets cramped at <420px */
.v5-facet-wheel { max-width: 320px !important; margin: 0 auto; }
.v5-facet-signature-quote { max-width: 100%; }
.v5-facet-signature-row { gap: 10px; }
/* Practice — book cards stack already; tighten cover */
.v5-practice-book { grid-template-columns: 96px 1fr !important; gap: 16px !important; }
.v5-practice-card { padding: 24px 18px; }
/* Footer — already collapses to one column; tighten copy */
.v5-footer-spine-text { font-size: clamp(28px, 8vw, 44px) !important; line-height: 1.04 !important; }
.v5-footer-grid { padding: 48px 0 32px !important; }
.v5-footer-list a { font-size: 14px; }
.v5-footer-ribbon {
flex-direction: column !important;
align-items: flex-start !important;
gap: 8px;
font-size: 10.5px;
}
.v5-footer-ribbon-dot { display: none; }
}
/* Smaller phones (≤480) — last tier of tightening */
@media (max-width: 480px) {
.v4-container {
padding-left: 16px !important;
padding-right: 16px !important;
}
.section-pad,
.v5-page section { padding-top: 44px; padding-bottom: 44px; }
.v5-hero { padding-top: 72px; }
.v5-hero-headline { font-size: clamp(28px, 10vw, 44px) !important; }
.v5-hero-spotlight-suffix { font-size: clamp(28px, 9vw, 40px) !important; }
.v5-hero-tag { font-size: 15px !important; }
.v5-page .v5-section-open-headline,
.v5-page .v5-disciplines-headline,
.v5-page .v5-facet-headline { font-size: clamp(28px, 10vw, 42px) !important; }
.v5-page .v5-engagements-title,
.v5-page .v5-ai-title,
.v5-page .v5-signals-title,
.v5-page .v5-method-title,
.v5-page .v5-through-title,
.v5-page .v5-practice-title,
.v5-page .v5-practice-books-title,
.v5-page .v5-contact-title,
.v5-page .v5-portal-title,
.v5-page .v5-teach-title,
.v5-page .v5-ft-section-title { font-size: clamp(26px, 9vw, 36px) !important; }
.v4-marquee-item { font-size: clamp(22px, 8.5vw, 34px) !important; }
.v5-footer-spine-text { font-size: clamp(22px, 9vw, 32px) !important; }
}
/* Prevent global horizontal overflow at any width */
.v5-page { overflow-x: hidden; }
.v5-page img, .v5-page svg { max-width: 100%; }
/* =========================================================================
MOBILE OVERRIDES — round 2 (≤520px)
- Signals: role text moves to its own full-width row beneath body
- Flywheel: shrinks to 90vw so it never clips offscreen
- Facet: hide lens labels, LENS counter, and the active-state HUD badge
========================================================================= */
@media (max-width:520px){
/* SIGNALS — restructure each row so the role descriptor (e.g. "Apple Music ·
product & experience design") gets its own full-width line beneath the
body copy instead of being squeezed into a 32px column. */
.v5-signals-row{
grid-template-columns:32px 1fr;
grid-template-areas:
"n name"
"body body"
"role role";
gap:14px 16px;
}
.v5-signals-n{grid-area:n}
.v5-signals-cell-name{grid-area:name}
.v5-signals-cell-body{grid-area:body}
.v5-signals-cell-role{grid-area:role;padding-top:0;padding-bottom:4px}
/* FLYWHEEL — the wheel ships with an inline width/height of `size` (default
540px) via the React prop. Override both with !important and let
aspect-ratio:1/1 keep it square. */
.v5-flywheel-wheel{width:90vw !important;height:auto !important;max-width:90vw}
/* FACET — wheel is too small at this width for the orbital labels and the
LENS counter to be legible or land cleanly. Hide them entirely; the
active-state HUD badge (.v5-facet-hud) is also hidden because at this
width its absolute position can float over the intro copy. */
.v5-facet-label{display:none}
.v5-facet-wheel-meta{display:none}
.v5-facet-hud{display:none}
}