/* ============================================================
DRIFT NORTH - DESIGN TOKENS (v2)
Lifted verbatim from Brand & Design Foundations v2.
Drop this in whole. Do not edit values. Do not add hues.
Fonts (Google Fonts - include this in before the CSS):
============================================================ */
/* ---------- Colour ---------- */
:root{
--ink-900:#0f0f0e;--ink-800:#1c1c1a;--ink-700:#2e2e2b;--ink-600:#4a4a45;
--neutral-500:#6f6f68;--neutral-400:#8f8f87;--neutral-300:#b3b3aa;
--neutral-200:#d3d2c8;--neutral-150:#e4e3d9;--neutral-100:#efeee6;--neutral-50:#f7f6f1;
--paper:#fbfaf6;
--maroon-900:#3d0009;--maroon-800:#5c0012;--maroon-700:#86001b;--maroon-600:#a11228;
--maroon-500:#bb2c3f;--maroon-400:#d15a68;--maroon-300:#e79fa7;--maroon-100:#f9e2e4;
--forest-600:#4f5c3d;--forest-100:#eaeedd;
--amber-600:#96702f;--amber-100:#f4e8d2;
--slate-600:#55554e;--slate-100:#e9e8e2;
--text-primary:var(--ink-900);--text-secondary:var(--neutral-500);--text-inverse:var(--paper);
--text-on-brand:var(--paper);--text-link:var(--maroon-700);--text-link-hover:var(--maroon-600);
--surface-page:var(--paper);--surface-page-alt:var(--neutral-50);--surface-card:var(--paper);
--surface-inverse:var(--ink-900);--surface-inverse-alt:var(--ink-800);
--border-subtle:var(--neutral-150);--border-default:var(--neutral-200);--border-strong:var(--ink-900);
--brand-primary:var(--maroon-700);--brand-primary-hover:var(--maroon-600);--brand-primary-active:var(--maroon-800);
--brand-ink:var(--ink-900);
--success:var(--forest-600);--success-bg:var(--forest-100);
--warning:var(--amber-600);--warning-bg:var(--amber-100);
--danger:var(--maroon-700);--danger-bg:var(--maroon-100);
--info:var(--slate-600);--info-bg:var(--slate-100);
--focus-ring:var(--maroon-500);
}
/* ---------- Type ---------- */
:root{
--font-display:'Archivo','Helvetica Neue',sans-serif;
--font-body:'Public Sans','Helvetica Neue',sans-serif;
--font-mono:'SF Mono','Menlo',monospace;
--wd-narrow:78%;--wd-normal:100%;--wd-wide:118%;
--fw-light:300;--fw-regular:400;--fw-medium:500;--fw-semibold:600;--fw-bold:700;--fw-extrabold:800;--fw-black:900;
--fs-display-2xl:clamp(3.5rem,7vw,7.5rem);--fs-display-xl:clamp(2.75rem,4.6vw,5rem);--fs-display-lg:clamp(2.25rem,3.2vw,3.5rem);
--fs-display-md:2rem;--fs-display-sm:1.5rem;
--fs-lede:clamp(1.125rem,1.5vw,1.5rem);
--fs-body-lg:1.1875rem;--fs-body:1rem;--fs-body-sm:0.875rem;--fs-caption:0.75rem;
--lh-tight:1.02;--lh-snug:1.16;--lh-normal:1.5;--lh-relaxed:1.62;
--ls-tighter:-0.03em;--ls-tight:-0.015em;--ls-normal:0;--ls-wide:0.08em;--ls-wider:0.18em;--ls-wordmark:0.24em;
}
/* ---------- Space, radius, elevation, motion ---------- */
:root{
--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;
--space-8:32px;--space-10:40px;--space-12:48px;--space-16:64px;--space-20:80px;--space-24:96px;--space-32:128px;
--radius-sm:6px;--radius-md:10px;--radius-lg:16px;--radius-xl:24px;--radius-full:999px;
--shadow-sm:0 1px 2px rgba(28,22,19,0.08);
--shadow-md:0 6px 20px rgba(28,22,19,0.10);
--shadow-lg:0 16px 40px rgba(28,22,19,0.16);
--border-w:1px;
--ease-standard:cubic-bezier(.2,.6,.2,1);--dur-fast:120ms;--dur-base:200ms;--dur-slow:320ms;
}
/* ============================================================
GRAPHIC LANGUAGE: displacement, then alignment.
Elements sit slightly out of alignment and then resolve.
Never literal compasses, mountains, arrows or north stars.
Offset is always horizontal and always one direction.
============================================================ */
:root{--drift-step:14px;--drift-step-lg:32px;--drift-rule:1px;}
/* Drift rules - a stack of hairlines, each displaced one step further
and one shade lighter. Section dividers, footers, episode listings. */
.dn-drift-rules{display:flex;flex-direction:column;gap:10px}
.dn-drift-rules > span{display:block;height:var(--drift-rule);background:currentColor;opacity:.9}
.dn-drift-rules > span:nth-child(2){margin-left:var(--drift-step);opacity:.6}
.dn-drift-rules > span:nth-child(3){margin-left:calc(var(--drift-step) * 2);opacity:.35}
.dn-drift-rules > span:nth-child(4){margin-left:calc(var(--drift-step) * 3);opacity:.18}
/* Offset block - the solid form is the intent, the ghost behind it is the
drift. Images, pull quotes, feature cards. */
.dn-drift-offset{position:relative;display:inline-block}
.dn-drift-offset::after{content:'';position:absolute;inset:0;background:currentColor;opacity:.22;transform:translate(var(--drift-step),var(--drift-step));z-index:-1}
/* Displaced line - one line of a headline pushed off the measure, the rest
aligned. Once per composition. Never twice. */
.dn-displaced{transform:translateX(var(--drift-step-lg))}
.dn-displaced-sm{transform:translateX(var(--drift-step))}
/* Eyebrow - tracked-out caps. The only all-caps use besides the wordmark. */
.dn-eyebrow{font-family:var(--font-display);font-weight:var(--fw-semibold);font-size:var(--fs-caption);letter-spacing:var(--ls-wider);text-transform:uppercase;color:var(--neutral-500)}
/* Wordmark, typeset. Never re-space by hand, never another family. */
.dn-wordmark{font-family:var(--font-display);font-weight:var(--fw-extrabold);font-stretch:var(--wd-normal);letter-spacing:var(--ls-wordmark);text-transform:uppercase;line-height:1}
/* Page defaults */
body{margin:0;background:var(--paper);color:var(--ink-900);font-family:var(--font-body)}
a{color:var(--maroon-700);text-decoration:none;border-bottom:1px solid currentColor}
a:hover{color:var(--maroon-600)}
/* ============================================================
SITE LAYER - composes from the tokens above. No new values.
Layout follows the guide's own reference implementation:
7vw side padding, 7vw section rhythm, ~1500px max.
============================================================ */
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
font-size:var(--fs-body-lg);line-height:var(--lh-relaxed);
font-weight:var(--fw-regular);-webkit-font-smoothing:antialiased;
margin:0;
}
h1,h2,h3,h4{
font-family:var(--font-display);font-weight:var(--fw-extrabold);
letter-spacing:var(--ls-tighter);line-height:var(--lh-snug);
color:var(--text-primary);margin:0;
}
p{margin:0;}
ul,ol{margin:0;padding:0;}
ul[role="list"]{list-style:none;}
img{display:block;max-width:100%;}
::selection{background:var(--maroon-700);color:var(--paper);}
:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px;}
/* Reset the token file's global link styling - it suits prose, not navigation.
Prose links are restored inside .prose below. */
a{color:inherit;border-bottom:0;}
/* ---------- Layout ---------- */
.wrap{max-width:1500px;margin:0 auto;padding:0 7vw;}
.wrap-read{max-width:820px;margin:0 auto;padding:0 7vw;}
section{padding:7vw 0;}
section.tight{padding:5vw 0;}
/* Guide's asymmetric two-column: minmax(0,1fr) minmax(0,1.35fr), 6vw gap */
.cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);gap:6vw;align-items:start;}
.cols-even{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:6vw;align-items:start;}
.cols-flip{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:6vw;align-items:start;}
/* ---------- Type roles ---------- */
.t-hero{font-size:var(--fs-display-2xl);font-stretch:var(--wd-wide);line-height:var(--lh-tight);letter-spacing:var(--ls-tighter);max-width:15ch;}
.t-h1{font-size:var(--fs-display-lg);letter-spacing:var(--ls-tighter);}
.t-h2{font-size:var(--fs-display-lg);letter-spacing:var(--ls-tight);}
.t-h3{font-size:var(--fs-display-sm);letter-spacing:var(--ls-tight);}
.t-lede{font-family:var(--font-body);font-weight:var(--fw-light);font-size:var(--fs-lede);line-height:var(--lh-relaxed);color:var(--ink-700);max-width:44ch;}
.t-body{font-size:var(--fs-body);line-height:var(--lh-relaxed);color:var(--ink-700);max-width:68ch;}
.t-meta{font-size:var(--fs-body-sm);color:var(--neutral-500);}
.t-caption{font-size:var(--fs-caption);color:var(--neutral-500);}
/* ---------- Header ---------- */
.site-header{
position:sticky;top:0;z-index:50;background:rgba(251,250,246,.94);
backdrop-filter:blur(8px);border-bottom:var(--border-w) solid var(--border-subtle);
}
.site-header .bar{
max-width:1500px;margin:0 auto;padding:var(--space-4) 7vw;
display:flex;align-items:center;justify-content:space-between;gap:var(--space-6);
}
.lockup{display:flex;align-items:center;gap:var(--space-3);}
/* Clear space equals the mark's height - enforced by the gap and header padding. */
.lockup img{height:30px;width:auto;}
.lockup .dn-wordmark{font-size:var(--fs-caption);color:var(--ink-900);}
.nav{display:flex;gap:var(--space-8);align-items:center;}
.nav a{
font-family:var(--font-body);font-size:var(--fs-body-sm);font-weight:var(--fw-medium);
color:var(--neutral-500);padding:var(--space-2) 0;position:relative;
transition:color var(--dur-base) var(--ease-standard);
}
.nav a::after{
content:'';position:absolute;left:0;bottom:0;height:1px;width:0;background:var(--ink-900);
transition:width var(--dur-base) var(--ease-standard);
}
.nav a:hover{color:var(--ink-900);}
.nav a:hover::after{width:100%;}
.nav a.current{color:var(--ink-900);font-weight:var(--fw-semibold);}
.nav a.current::after{width:100%;background:var(--maroon-700);}
.nav-toggle{display:none;background:none;border:0;padding:var(--space-2);cursor:pointer;}
.nav-toggle span{display:block;width:22px;height:1.5px;background:var(--ink-900);margin:5px 0;transition:transform var(--dur-base) var(--ease-standard),opacity var(--dur-fast);}
.nav-open .nav-toggle span:nth-child(1){transform:translateY(6.5px) rotate(45deg);}
.nav-open .nav-toggle span:nth-child(2){opacity:0;}
.nav-open .nav-toggle span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg);}
/* ---------- Buttons ----------
Ink fill is primary. Maroon fill is the deliberate punctuation and appears
once per view - reserved for the single most important action on the page. */
.btn{
display:inline-block;font-family:var(--font-display);font-weight:var(--fw-semibold);
font-size:var(--fs-body-sm);padding:var(--space-4) var(--space-6);
border-radius:var(--radius-sm);border:var(--border-w) solid var(--ink-900);
background:var(--ink-900);color:var(--paper);cursor:pointer;
transition:background var(--dur-base) var(--ease-standard),border-color var(--dur-base) var(--ease-standard),color var(--dur-base) var(--ease-standard);
}
.btn:hover{background:var(--ink-800);border-color:var(--ink-800);}
.btn-accent{background:var(--maroon-700);border-color:var(--maroon-700);}
.btn-accent:hover{background:var(--maroon-600);border-color:var(--maroon-600);}
.btn-ghost{background:transparent;color:var(--ink-900);border-color:var(--border-strong);}
.btn-ghost:hover{background:var(--neutral-100);color:var(--ink-900);}
.link{
font-family:var(--font-display);font-weight:var(--fw-semibold);font-size:var(--fs-body-sm);
color:var(--ink-900);border-bottom:1px solid var(--neutral-300);padding-bottom:2px;
display:inline-block;transition:border-color var(--dur-base) var(--ease-standard),color var(--dur-base) var(--ease-standard);
}
.link:hover{color:var(--maroon-700);border-color:var(--maroon-700);}
/* ---------- Surfaces ---------- */
.on-ink{background:var(--surface-inverse);color:var(--paper);padding:7vw 0;}
.on-ink h1,.on-ink h2,.on-ink h3,.on-ink h4{color:var(--paper);}
.on-ink .t-lede,.on-ink .t-body{color:var(--neutral-300);}
.on-ink .dn-eyebrow{color:var(--neutral-400);}
.on-ink .link{color:var(--paper);border-color:var(--ink-600);}
.on-ink .link:hover{color:var(--maroon-300);border-color:var(--maroon-300);}
.on-alt{background:var(--surface-page-alt);border-top:var(--border-w) solid var(--border-subtle);border-bottom:var(--border-w) solid var(--border-subtle);}
/* Statement - the wide axis, used for the single strongest idea on a page */
.statement{font-family:var(--font-display);font-weight:var(--fw-extrabold);font-stretch:var(--wd-wide);
font-size:var(--fs-display-lg);line-height:var(--lh-snug);letter-spacing:var(--ls-tighter);max-width:20ch;}
/* ---------- Drift rules as section dividers ---------- */
.dn-drift-rules{width:100%;max-width:180px;}
.divider{padding:var(--space-8) 0;color:var(--ink-900);}
.on-ink .divider{color:var(--paper);}
/* ---------- Cards / index rows ---------- */
.card{
background:var(--surface-card);border:var(--border-w) solid var(--border-subtle);
border-radius:var(--radius-md);padding:var(--space-8);
transition:border-color var(--dur-base) var(--ease-standard);
display:block;
}
.card:hover{border-color:var(--ink-900);}
.card h3{margin-bottom:var(--space-3);}
.card .t-body{margin-bottom:var(--space-6);}
/* Interrupted grid - exactly one cell off-baseline, never alternating */
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-6);}
.grid-3 > :nth-child(2){transform:translateY(var(--drift-step));}
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-6);}
/* Index rows - for listings that aren't cards */
.rows{border-top:var(--border-w) solid var(--border-subtle);}
.row{
display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.2fr);gap:6vw;
padding:var(--space-8) 0;border-bottom:var(--border-w) solid var(--border-subtle);
transition:padding-left var(--dur-base) var(--ease-standard);
}
a.row:hover{padding-left:var(--space-3);}
a.row:hover h3{color:var(--maroon-700);}
.row h3{transition:color var(--dur-base) var(--ease-standard);margin-bottom:var(--space-3);}
.on-ink .rows,.on-ink .row{border-color:var(--ink-700);}
/* Definition rows */
.defs{border-top:var(--border-w) solid var(--border-subtle);}
.def{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:var(--space-6);
padding:var(--space-5) 0;border-bottom:var(--border-w) solid var(--border-subtle);}
.def h4{font-size:var(--fs-body-lg);font-weight:var(--fw-bold);}
.def p{font-size:var(--fs-body);color:var(--ink-700);}
.on-ink .defs,.on-ink .def{border-color:var(--ink-700);}
/* Numbered sequence */
.seq{border-top:var(--border-w) solid var(--border-subtle);}
.seq-item{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--space-6);
padding:var(--space-4) 0;border-bottom:var(--border-w) solid var(--border-subtle);align-items:baseline;}
.seq-item .n{font-family:var(--font-display);font-weight:var(--fw-semibold);font-size:var(--fs-caption);
letter-spacing:var(--ls-wide);color:var(--neutral-500);font-variant-numeric:tabular-nums;}
.seq-item .txt{font-size:var(--fs-body);color:var(--ink-800);}
.on-ink .seq,.on-ink .seq-item{border-color:var(--ink-700);}
.on-ink .seq-item .txt{color:var(--neutral-300);}
/* Pull quote - maroon rule OR offset ghost, never both */
.pullquote{font-family:var(--font-display);font-weight:var(--fw-extrabold);
font-size:var(--fs-display-sm);line-height:var(--lh-snug);letter-spacing:var(--ls-tight);
border-left:3px solid var(--maroon-700);padding-left:var(--space-6);max-width:32ch;}
/* ---------- Images ---------- */
.fig{position:relative;overflow:hidden;background:var(--neutral-150);border-radius:var(--radius-sm);}
.fig img{width:100%;height:100%;object-fit:cover;filter:grayscale(100%) contrast(1.04);}
.fig-tall{aspect-ratio:3/4;}
.fig-wide{aspect-ratio:16/10;}
.fig-square{aspect-ratio:1/1;}
.about-portrait{margin:var(--space-10) 0 0;max-width:560px;}
.about-portrait .fig{border:var(--border-w) solid var(--border-subtle);}
.about-portrait .fig img{filter:none;}
.about-portrait figcaption{margin-top:var(--space-3);font-size:var(--fs-caption);color:var(--neutral-500);}
/* ---------- Empty state ---------- */
.empty{
border:var(--border-w) dashed var(--border-default);border-radius:var(--radius-md);
padding:var(--space-16) var(--space-8);text-align:left;
}
/* ---------- Forms ---------- */
.form{display:flex;gap:var(--space-3);flex-wrap:wrap;margin-top:var(--space-6);max-width:520px;}
.form input{
flex:1;min-width:240px;font-family:var(--font-body);font-size:var(--fs-body);
padding:var(--space-4);border:var(--border-w) solid var(--border-default);
border-radius:var(--radius-sm);background:var(--paper);color:var(--ink-900);
transition:border-color var(--dur-base) var(--ease-standard);
}
.form input:focus{outline:2px solid var(--focus-ring);outline-offset:2px;border-color:transparent;}
.on-ink .form input{background:var(--ink-800);border-color:var(--ink-600);color:var(--paper);}
.on-ink .form input::placeholder{color:var(--neutral-500);}
.form-note{margin-top:var(--space-3);font-size:var(--fs-caption);color:var(--neutral-500);}
.form-note.ok{color:var(--success);}
.on-ink .form-note.ok{color:var(--forest-100);}
/* ---------- Breadcrumb & prose ---------- */
.crumb{display:flex;gap:var(--space-3);align-items:center;margin-bottom:var(--space-6);flex-wrap:wrap;}
.crumb a,.crumb span{font-family:var(--font-display);font-weight:var(--fw-semibold);
font-size:var(--fs-caption);letter-spacing:var(--ls-wider);text-transform:uppercase;}
.crumb a{color:var(--neutral-500);}
.crumb a:hover{color:var(--maroon-700);}
.crumb .sep{color:var(--neutral-400);}
.crumb .here{color:var(--neutral-500);}
.prose{max-width:68ch;}
.prose > * + *{margin-top:var(--space-6);}
.prose p{font-size:var(--fs-body-lg);line-height:var(--lh-relaxed);color:var(--ink-800);}
.prose h2{font-size:var(--fs-display-sm);margin-top:var(--space-12);}
.prose blockquote{margin:var(--space-12) 0;font-family:var(--font-display);font-weight:var(--fw-extrabold);
font-size:var(--fs-display-sm);line-height:var(--lh-snug);letter-spacing:var(--ls-tight);
border-left:3px solid var(--maroon-700);padding-left:var(--space-6);color:var(--ink-900);}
.prose ul{padding-left:var(--space-6);}
.prose li{font-size:var(--fs-body-lg);line-height:var(--lh-relaxed);color:var(--ink-800);margin-top:var(--space-3);}
.prose li::marker{color:var(--maroon-700);}
.prose strong{font-weight:var(--fw-semibold);color:var(--ink-900);}
.prose a{color:var(--text-link);border-bottom:1px solid currentColor;}
.prose a:hover{color:var(--text-link-hover);}
.prose hr{border:0;border-top:var(--border-w) solid var(--border-subtle);margin:var(--space-12) 0;}
/* ---------- Footer ---------- */
.site-footer{border-top:var(--border-w) solid var(--border-subtle);padding:6vw 0 var(--space-12);}
.foot-grid{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:var(--space-10);}
.foot-grid h5{font-family:var(--font-display);font-weight:var(--fw-semibold);font-size:var(--fs-caption);
letter-spacing:var(--ls-wider);text-transform:uppercase;color:var(--neutral-500);margin-bottom:var(--space-4);}
.foot-grid a{display:block;font-size:var(--fs-body-sm);color:var(--ink-700);padding:var(--space-2) 0;
transition:color var(--dur-base) var(--ease-standard);}
.foot-grid a:hover{color:var(--maroon-700);}
.foot-base{margin-top:var(--space-12);padding-top:var(--space-5);border-top:var(--border-w) solid var(--border-subtle);
display:flex;justify-content:space-between;gap:var(--space-4);flex-wrap:wrap;}
/* ---------- Motion: displacement resolving into alignment ---------- */
.reveal{opacity:0;transform:translateX(var(--drift-step));
transition:opacity var(--dur-slow) var(--ease-standard),transform var(--dur-slow) var(--ease-standard);}
.reveal.in{opacity:1;transform:translateX(0);}
.reveal.in.d1{transition-delay:60ms;}
.reveal.in.d2{transition-delay:120ms;}
.reveal.in.d3{transition-delay:180ms;}
.dn-drift-rules > span{transform:scaleX(0);transform-origin:left center;
transition:transform var(--dur-slow) var(--ease-standard);}
.dn-drift-rules.in > span{transform:scaleX(1);}
.dn-drift-rules.in > span:nth-child(2){transition-delay:80ms;}
.dn-drift-rules.in > span:nth-child(3){transition-delay:160ms;}
.dn-drift-rules.in > span:nth-child(4){transition-delay:240ms;}
/* ---------- View routing ---------- */
.view{display:none;}
.view.active{display:block;animation:viewIn var(--dur-slow) var(--ease-standard) both;}
@keyframes viewIn{from{opacity:0;transform:translateX(var(--drift-step));}to{opacity:1;transform:none;}}
.skip{position:absolute;left:-9999px;top:0;background:var(--ink-900);color:var(--paper);
padding:var(--space-3) var(--space-4);z-index:100;font-size:var(--fs-body-sm);}
.skip:focus{left:var(--space-4);top:var(--space-4);}
/* ---------- Responsive ---------- */
@media (max-width:900px){
.cols,.cols-even,.cols-flip,.row,.def,.grid-3,.grid-2,.foot-grid{grid-template-columns:minmax(0,1fr);gap:var(--space-6);}
.grid-3 > :nth-child(2){transform:none;}
.dn-displaced,.dn-displaced-sm{transform:none;}
section{padding:var(--space-20) 0;}
section.tight{padding:var(--space-16) 0;}
.on-ink{padding:var(--space-20) 0;}
.wrap,.wrap-read{padding:0 var(--space-6);}
.site-header .bar{padding:var(--space-4) var(--space-6);}
.nav-toggle{display:block;}
.nav{
position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:flex-start;
gap:0;background:var(--paper);border-bottom:var(--border-w) solid var(--border-subtle);
padding:var(--space-4) var(--space-6);display:none;
max-height:calc(100dvh - 100%);overflow-y:auto;overscroll-behavior:contain;
-webkit-overflow-scrolling:touch;
}
.nav-open .nav{display:flex;}
.nav a{padding:var(--space-3) 0;width:100%;font-size:var(--fs-body);}
.t-hero{max-width:none;}
.row{padding:var(--space-6) 0;}
}
@media (prefers-reduced-motion:reduce){
.reveal{opacity:1 !important;transform:none !important;transition:none !important;}
.dn-drift-rules > span{transform:scaleX(1) !important;transition:none !important;}
.view.active{animation:none;}
html{scroll-behavior:auto;}
}
/* --- Newsletter band: light surface, burgundy Subscribe.
This is the one place burgundy is used as a fill on the page. --- */
.band-signup{
background:var(--surface-page-alt);
border-top:var(--border-w) solid var(--border-subtle);
border-bottom:var(--border-w) solid var(--border-subtle);
padding:7vw 0;
}
.band-signup h2{color:var(--ink-900);}
.band-signup .t-lede{color:var(--ink-700);}
.band-signup .divider{color:var(--ink-900);}
.band-signup .form-note{color:var(--neutral-500);margin-top:var(--space-5);}
.band-signup .form-note strong{color:var(--ink-900);font-weight:var(--fw-semibold);}
@media (max-width:900px){.band-signup{padding:var(--space-20) 0;}}
/* ===========================================================
KIT NEWSLETTER BLOCK - start
Self-contained. Everything Kit-related lives between these
markers, plus the matching markup block and the ck.5.js tag.
Kit form: "Between Versions - Homepage" (data-uid fed06cde1d)
Kit's own embed stylesheet is deliberately NOT included, so
these rules must supply BOTH the structural behaviour Kit's
JS expects (flex fields, hidden spinner, hidden empty alert,
image-replaced attribution) AND the Drift North styling.
Do not delete the structural rules - without them the form
renders broken. Kit's submission, double opt-in, error and
success handling are untouched.
=========================================================== */
.sr-only{
position:absolute;width:1px;height:1px;padding:0;margin:-1px;
overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.route-heading:focus{outline:none;}
.dn-kit{margin-top:var(--space-6);max-width:520px;}
.dn-kit *{box-sizing:border-box;}
/* --- Container: strip all third-party chrome --- */
.dn-kit .formkit-form{
background:transparent;
border:0;
border-radius:0;
max-width:none;
position:relative;
overflow:visible;
font-family:var(--font-body);
-webkit-font-smoothing:antialiased;
}
.dn-kit .formkit-form [data-style="minimal"]{
padding:0;width:100%;position:relative;
}
/* --- STRUCTURAL: field row. Kit's JS assumes a flex row. --- */
.dn-kit .formkit-form .formkit-fields{
display:flex;
flex-wrap:wrap;
gap:var(--space-3);
margin:0;
}
.dn-kit .formkit-form .formkit-field{
flex:100 1 auto;
min-width:220px;
margin:0;
}
/* --- Email input --- */
.dn-kit .formkit-form .formkit-input{
width:100%;
font-family:var(--font-body);
font-size:var(--fs-body);
font-weight:var(--fw-regular);
line-height:1.4;
margin:0;
padding:var(--space-4);
border:var(--border-w) solid var(--neutral-400);
border-radius:var(--radius-sm);
background:var(--paper);
color:var(--ink-900);
transition:border-color var(--dur-base) var(--ease-standard);
}
.dn-kit .formkit-form .formkit-input::placeholder{
color:var(--neutral-500);opacity:1;
}
.dn-kit .formkit-form .formkit-input:focus{
outline:2px solid var(--focus-ring);
outline-offset:2px;
border-color:transparent;
}
/* --- Submit. Paper fill on ink, so maroon stays reserved
for the single accent action per view. --- */
.dn-kit .formkit-form .formkit-submit{
flex:1 1 auto;
display:inline-block;
position:relative;
vertical-align:middle;
overflow:hidden;
margin:0;
padding:0;
cursor:pointer;
text-align:center;
background-color:var(--maroon-700);
border:var(--border-w) solid var(--maroon-700);
border-radius:var(--radius-sm);
transition:background-color var(--dur-base) var(--ease-standard),
border-color var(--dur-base) var(--ease-standard);
}
.dn-kit .formkit-form .formkit-submit > span{
display:block;
padding:var(--space-4) var(--space-6);
font-family:var(--font-display);
font-size:var(--fs-body-sm);
font-weight:var(--fw-semibold);
color:var(--paper);
white-space:nowrap;
}
.dn-kit .formkit-form .formkit-submit:hover,
.dn-kit .formkit-form .formkit-submit:focus{
background-color:var(--maroon-600);
border-color:var(--maroon-600);
outline:none;
}
.dn-kit .formkit-form .formkit-submit:focus-visible{
outline:2px solid var(--focus-ring);
outline-offset:2px;
}
/* --- STRUCTURAL: spinner is hidden until Kit sets [data-active].
Without this the three dots are permanently visible. --- */
.dn-kit .formkit-form .formkit-spinner{
display:flex;
height:0;
width:0;
margin:0 auto;
position:absolute;
top:0;left:0;right:0;
overflow:hidden;
text-align:center;
transition:all var(--dur-slow) var(--ease-standard);
}
.dn-kit .formkit-form .formkit-spinner > div{
margin:auto;width:10px;height:10px;
background-color:var(--ink-900);
opacity:.3;border-radius:100%;display:inline-block;
animation:dnKitBounce 1.4s infinite ease-in-out both;
}
.dn-kit .formkit-form .formkit-spinner > div:nth-child(1){animation-delay:-.32s;}
.dn-kit .formkit-form .formkit-spinner > div:nth-child(2){animation-delay:-.16s;}
.dn-kit .formkit-form .formkit-submit[data-active] .formkit-spinner{
opacity:1;height:100%;width:44px;
}
.dn-kit .formkit-form .formkit-submit[data-active] .formkit-spinner ~ span{opacity:0;}
@keyframes dnKitBounce{
0%,80%,100%{transform:scale(0);}
40%{transform:scale(1);}
}
/* --- STRUCTURAL: the alert list is always in the DOM and is
empty until Kit writes to it. It must collapse when empty,
or an empty bordered box sits above the form. --- */
.dn-kit .formkit-form .formkit-alert{
list-style:none;
margin:0 0 var(--space-4) 0;
padding:var(--space-3) var(--space-4);
width:100%;
text-align:left;
font-family:var(--font-body);
font-size:var(--fs-body-sm);
border:var(--border-w) solid transparent;
border-radius:var(--radius-sm);
}
.dn-kit .formkit-form .formkit-alert:empty{
display:none;
margin:0;
padding:0;
border:0;
}
.dn-kit .formkit-form .formkit-alert-error{
background:var(--maroon-100);
border-color:var(--maroon-700);
color:var(--maroon-800);
}
.dn-kit .formkit-form .formkit-alert-success{
background:var(--forest-100);
border-color:var(--forest-600);
color:var(--forest-600);
}
/* --- Mobile: stack the field and button --- */
@media (max-width:600px){
.dn-kit .formkit-form .formkit-fields{flex-direction:column;}
.dn-kit .formkit-form .formkit-field,
.dn-kit .formkit-form .formkit-submit{flex:1 0 100%;width:100%;min-width:0;}
}
@media (prefers-reduced-motion:reduce){
.dn-kit .formkit-form .formkit-input,
.dn-kit .formkit-form .formkit-submit{transition:none;}
.dn-kit .formkit-form .formkit-spinner > div{animation:none;}
}
/* KIT NEWSLETTER BLOCK - end */
/* ===========================================================
SKILLS BLOCK - start
Catalogue, detail and membership surfaces for Drift North
Skills. Composed entirely from existing tokens and existing
components - no new colours, typefaces or visual language.
Content lives in DN_SKILLS; never hard-code a skill here.
=========================================================== */
/* --- Catalogue controls: text filters, not a SaaS filter bar --- */
.sk-filters{
display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-5);
align-items:baseline;margin-top:var(--space-6);
padding-bottom:var(--space-4);
border-bottom:var(--border-w) solid var(--neutral-300);
}
.sk-filters button{
font-family:var(--font-display);font-size:var(--fs-body-sm);font-weight:var(--fw-semibold);
background:none;border:0;padding:var(--space-1) 0;cursor:pointer;
color:var(--neutral-500);border-bottom:2px solid transparent;
transition:color var(--dur-base) var(--ease-standard),border-color var(--dur-base) var(--ease-standard);
}
.sk-filters button:hover{color:var(--ink-900);}
.sk-filters button[aria-pressed="true"]{color:var(--ink-900);border-bottom-color:var(--ink-900);}
.sk-filters button:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px;}
.sk-count{font-size:var(--fs-caption);color:var(--ink-600);margin-left:auto;}
/* --- Catalogue grid --- */
.sk-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-6);margin-top:var(--space-8);}
.sk-card{
display:flex;flex-direction:column;
background:var(--surface-card);
border:var(--border-w) solid var(--neutral-300);
border-radius:var(--radius-md);
padding:var(--space-6);
color:inherit;
transition:border-color var(--dur-base) var(--ease-standard);
}
a.sk-card:hover{border-color:var(--ink-900);}
a.sk-card:hover .sk-name{color:var(--maroon-700);}
.sk-cat{
font-family:var(--font-display);font-size:var(--fs-caption);font-weight:var(--fw-semibold);
letter-spacing:var(--ls-wider);text-transform:uppercase;color:var(--ink-600);
}
.sk-name{
font-family:var(--font-display);font-size:var(--fs-body-lg);font-weight:var(--fw-extrabold);
letter-spacing:var(--ls-tight);line-height:var(--lh-snug);
margin:var(--space-3) 0 var(--space-2);
transition:color var(--dur-base) var(--ease-standard);
}
.sk-desc{font-size:var(--fs-body-sm);color:var(--ink-700);line-height:var(--lh-relaxed);flex:1 0 auto;}
.sk-foot{
display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-3);align-items:center;
margin-top:var(--space-5);padding-top:var(--space-4);
border-top:var(--border-w) solid var(--neutral-300);
}
/* --- Status + access labels. Text, never colour alone. --- */
.sk-tag{
font-family:var(--font-display);font-size:var(--fs-caption);font-weight:var(--fw-semibold);
letter-spacing:var(--ls-wide);
padding:3px 8px;border-radius:var(--radius-sm);
border:var(--border-w) solid var(--neutral-400);color:var(--ink-600);
}
.sk-tag--soon{border-style:dashed;}
.sk-tag--free{border-color:var(--forest-600);color:var(--forest-600);}
.sk-tag--member{border-color:var(--maroon-700);color:var(--maroon-700);}
.sk-meta{font-size:var(--fs-caption);color:var(--ink-600);}
.sk-untested{color:var(--neutral-500);}
/* --- Detail --- */
.sk-detail-grid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:6vw;align-items:start;}
.sk-panel{
background:var(--surface-card);
border:var(--border-w) solid var(--neutral-300);
border-radius:var(--radius-md);
padding:var(--space-6);
}
.sk-panel h3{font-family:var(--font-display);font-size:var(--fs-body-lg);font-weight:var(--fw-bold);letter-spacing:var(--ls-tight);}
.sk-spec{border-top:var(--border-w) solid var(--neutral-300);margin-top:var(--space-4);}
.sk-spec div{display:flex;justify-content:space-between;gap:var(--space-4);padding:var(--space-3) 0;border-bottom:var(--border-w) solid var(--neutral-300);}
.sk-spec dt{font-size:var(--fs-caption);font-family:var(--font-display);font-weight:var(--fw-semibold);letter-spacing:var(--ls-wider);text-transform:uppercase;color:var(--ink-600);}
.sk-spec dd{margin:0;font-size:var(--fs-body-sm);color:var(--ink-900);text-align:right;}
.sk-state{
margin-top:var(--space-6);padding:var(--space-5);
border:var(--border-w) dashed var(--neutral-400);border-radius:var(--radius-sm);
font-size:var(--fs-body-sm);color:var(--ink-700);
}
.sk-list{margin:var(--space-4) 0 0;padding-left:var(--space-6);}
.sk-list li{font-size:var(--fs-body);color:var(--ink-700);line-height:var(--lh-relaxed);margin-top:var(--space-2);}
.sk-list li::marker{color:var(--maroon-700);}
@media (max-width:1000px){ .sk-grid{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (max-width:760px){
.sk-grid{grid-template-columns:minmax(0,1fr);}
.sk-detail-grid{grid-template-columns:minmax(0,1fr);gap:var(--space-8);}
.sk-count{margin-left:0;width:100%;}
}
@media (prefers-reduced-motion:reduce){
.sk-card,.sk-name,.sk-filters button{transition:none;}
}
/* ---- Two-tier Skills architecture ---- */
.tier-pair{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-8);margin-top:var(--space-8);}
.tier{padding-top:var(--space-5);border-top:2px solid var(--ink-900);}
.tier .tp{font-family:var(--font-display);font-size:var(--fs-display-sm);font-weight:var(--fw-extrabold);
letter-spacing:var(--ls-tight);}
.tier h3{font-family:var(--font-display);font-size:var(--fs-display-md);font-weight:var(--fw-extrabold);
font-stretch:var(--wd-wide);letter-spacing:var(--ls-tighter);line-height:var(--lh-snug);margin:var(--space-3) 0;}
.tier .lead{font-size:var(--fs-body-lg);color:var(--ink-800);}
.tier .scope{font-size:var(--fs-body-sm);color:var(--ink-700);margin-top:var(--space-3);}
.tier .strap{font-family:var(--font-display);font-size:var(--fs-body);font-weight:var(--fw-semibold);
color:var(--maroon-700);margin-top:var(--space-5);}
.tier-tag{font-family:var(--font-display);font-size:var(--fs-caption);font-weight:var(--fw-semibold);
letter-spacing:var(--ls-wide);padding:3px 8px;border-radius:var(--radius-sm);
border:var(--border-w) solid var(--neutral-400);color:var(--ink-600);}
.tier-tag--p{border-color:var(--ink-900);color:var(--ink-900);}
.tier-tag--e{border-color:var(--neutral-400);color:var(--ink-600);}
.sk-cad{font-family:var(--font-display);font-size:var(--fs-caption);font-weight:var(--fw-semibold);
letter-spacing:var(--ls-wide);color:var(--maroon-700);}
/* Essentials read lighter and faster: tighter cards, no long description */
.sk-grid--ess{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-4);}
.sk-grid--ess .sk-card{padding:var(--space-5);}
.sk-grid--ess .sk-name{font-size:var(--fs-body);margin:var(--space-2) 0;}
.sk-grid--ess .sk-desc{font-size:var(--fs-body-sm);}
/* ---- Manager operating rhythm ---- */
.rhythm{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-6);margin-top:var(--space-8);}
.rh{border-top:2px solid var(--ink-900);padding-top:var(--space-4);}
.rh.esc{border-top-color:var(--maroon-700);}
.rh .rh-when{font-family:var(--font-display);font-size:var(--fs-caption);font-weight:var(--fw-semibold);
letter-spacing:var(--ls-wider);text-transform:uppercase;color:var(--ink-600);}
.rh.esc .rh-when{color:var(--maroon-700);}
.rh ol{list-style:none;padding:0;margin:var(--space-4) 0 0;}
.rh li{padding:var(--space-3) 0;border-bottom:var(--border-w) solid var(--neutral-300);
font-size:var(--fs-body-sm);color:var(--ink-900);}
.rh li a{color:inherit;border-bottom:1px solid var(--neutral-400);}
.rh li a:hover{color:var(--maroon-700);border-color:var(--maroon-700);}
.rh .rh-note{font-size:var(--fs-body-sm);color:var(--ink-700);margin-top:var(--space-4);}
/* ---- Escalation pairs ---- */
.esc-list{border-top:var(--border-w) solid var(--neutral-300);margin-top:var(--space-6);}
.esc-row{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:var(--space-4);
align-items:baseline;padding:var(--space-4) 0;border-bottom:var(--border-w) solid var(--neutral-300);}
.esc-row .from{font-size:var(--fs-body);color:var(--ink-900);}
.esc-row .arw{color:var(--neutral-400);}
.esc-row .to{font-family:var(--font-display);font-size:var(--fs-body);font-weight:var(--fw-semibold);color:var(--ink-900);}
.esc-row .why{grid-column:1 / -1;font-size:var(--fs-body-sm);color:var(--ink-700);margin-top:var(--space-1);}
@media (max-width:1000px){ .sk-grid--ess{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (max-width:900px){
.tier-pair{grid-template-columns:minmax(0,1fr);gap:var(--space-10);}
.rhythm{grid-template-columns:minmax(0,1fr);gap:var(--space-8);}
.esc-row{grid-template-columns:minmax(0,1fr);gap:var(--space-1);}
.esc-row .arw{display:none;}
}
@media (max-width:600px){ .sk-grid--ess{grid-template-columns:minmax(0,1fr);} }
/* ---- Paths: outcome-first routes through the Premium tier ---- */
.pth{border-bottom:var(--border-w) solid var(--neutral-300);padding:var(--space-8) 0;}
.pth:first-of-type{border-top:2px solid var(--ink-900);}
.pth-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--space-6);align-items:baseline;}
.pth h3{font-family:var(--font-display);font-size:var(--fs-display-sm);font-weight:var(--fw-extrabold);
letter-spacing:var(--ls-tighter);line-height:var(--lh-snug);max-width:22ch;}
.pth .who{font-size:var(--fs-body-sm);color:var(--ink-700);max-width:62ch;margin-top:var(--space-2);}
.pth-meta{text-align:right;white-space:nowrap;}
.pth-meta .amt{font-family:var(--font-display);font-size:var(--fs-body-lg);font-weight:var(--fw-extrabold);}
.pth-meta .sub{display:block;font-size:var(--fs-caption);color:var(--ink-600);margin-top:2px;}
.chain{display:flex;align-items:stretch;flex-wrap:wrap;margin-top:var(--space-5);}
.chain .lnk{display:flex;align-items:center;color:var(--neutral-400);padding:0 var(--space-4);}
.step{flex:1 1 190px;min-width:165px;padding:var(--space-3) 0;}
.step .sn{font-family:var(--font-display);font-size:var(--fs-caption);font-weight:var(--fw-semibold);
letter-spacing:var(--ls-wide);color:var(--neutral-500);display:block;font-variant-numeric:tabular-nums;}
.step .snm{display:block;margin-top:var(--space-2);font-family:var(--font-display);font-size:var(--fs-body);
font-weight:var(--fw-bold);letter-spacing:var(--ls-tight);line-height:var(--lh-snug);color:var(--ink-900);}
.step a.snm:hover{color:var(--maroon-700);}
.step .sst{display:block;margin-top:var(--space-1);font-size:var(--fs-caption);color:var(--maroon-700);
font-family:var(--font-display);font-weight:var(--fw-semibold);}
.step.soon .snm{color:var(--neutral-500);}
.step.soon .sst{color:var(--ink-600);font-family:var(--font-body);font-weight:var(--fw-regular);}
@media (max-width:900px){
.pth-head{grid-template-columns:minmax(0,1fr);}
.pth-meta{text-align:left;}
.chain .lnk{display:none;}
.step{flex:1 1 100%;border-top:var(--border-w) solid var(--neutral-300);}
}
/* ---- Path track: sequence as a line with stops on it ---- */
.pth{padding:var(--space-10) 0;border-bottom:var(--border-w) solid var(--neutral-300);}
.pth:first-of-type{border-top:2px solid var(--ink-900);}
.pth-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--space-6);align-items:start;}
.pth h3{font-family:var(--font-display);font-size:var(--fs-display-sm);font-weight:var(--fw-extrabold);
letter-spacing:var(--ls-tighter);line-height:var(--lh-snug);max-width:24ch;}
.pth .who{font-size:var(--fs-body-sm);color:var(--ink-700);max-width:60ch;margin-top:var(--space-2);}
.pth-meta{text-align:right;white-space:nowrap;}
.pth-meta .amt{font-family:var(--font-display);font-size:var(--fs-display-sm);font-weight:var(--fw-extrabold);
letter-spacing:var(--ls-tight);}
.pth-meta .sub{display:block;font-size:var(--fs-caption);color:var(--ink-600);margin-top:2px;}
.track{position:relative;display:grid;gap:0;margin-top:var(--space-8);padding-top:var(--space-6);}
.track::before{content:"";position:absolute;top:calc(var(--space-6) + 13px);left:6%;right:6%;
height:1px;background:var(--neutral-300);}
.stop{position:relative;text-align:center;padding:0 var(--space-3);}
.stop .node{
position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;
width:27px;height:27px;border-radius:50%;
background:var(--surface-page);border:1.5px solid var(--neutral-400);
font-family:var(--font-display);font-size:11px;font-weight:var(--fw-semibold);
color:var(--ink-600);font-variant-numeric:tabular-nums;
transition:background var(--dur-base) var(--ease-standard),border-color var(--dur-base) var(--ease-standard);
}
.on-alt .stop .node{background:var(--surface-page-alt);}
.stop.live .node{background:var(--maroon-700);border-color:var(--maroon-700);color:var(--paper);}
.stop .nm{display:block;margin-top:var(--space-3);font-family:var(--font-display);
font-size:var(--fs-body-sm);font-weight:var(--fw-bold);letter-spacing:var(--ls-tight);
line-height:var(--lh-snug);color:var(--ink-900);}
.stop a.nm:hover{color:var(--maroon-700);}
.stop .st{display:block;margin-top:var(--space-1);font-size:var(--fs-caption);color:var(--ink-600);}
.stop.live .st{color:var(--maroon-700);font-family:var(--font-display);font-weight:var(--fw-semibold);}
.stop .role{display:block;margin-top:var(--space-2);font-size:var(--fs-caption);color:var(--neutral-500);
font-style:italic;}
@media (max-width:820px){
.pth-head{grid-template-columns:minmax(0,1fr);}
.pth-meta{text-align:left;}
.track{grid-template-columns:minmax(0,1fr) !important;gap:0;padding-top:0;}
.track::before{top:0;bottom:0;left:13px;right:auto;width:1px;height:auto;}
.stop{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--space-4);
text-align:left;padding:var(--space-4) 0;align-items:start;}
.stop .nm,.stop .st,.stop .role{margin-top:0;}
.stop .st{margin-top:var(--space-1);}
}
/* ---- Tier gateway cards on the overview page ---- */
.gate{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-8);margin-top:var(--space-8);}
.gw{display:flex;flex-direction:column;padding-top:var(--space-5);border-top:2px solid var(--ink-900);}
.gw .gw-price{font-family:var(--font-display);font-size:var(--fs-caption);font-weight:var(--fw-semibold);
letter-spacing:var(--ls-wider);text-transform:uppercase;color:var(--ink-600);}
.gw h3{font-family:var(--font-display);font-size:var(--fs-display-md);font-weight:var(--fw-extrabold);
font-stretch:var(--wd-wide);letter-spacing:var(--ls-tighter);line-height:var(--lh-snug);margin:var(--space-3) 0;}
.gw .gw-lead{font-size:var(--fs-body-lg);color:var(--ink-800);}
.gw .gw-scope{font-size:var(--fs-body-sm);color:var(--ink-700);margin-top:var(--space-3);}
.gw .gw-count{font-family:var(--font-display);font-size:var(--fs-caption);font-weight:var(--fw-semibold);
letter-spacing:var(--ls-wide);color:var(--maroon-700);margin-top:var(--space-5);}
.gw .gw-go{margin-top:var(--space-6);}
@media (max-width:820px){ .gate{grid-template-columns:minmax(0,1fr);gap:var(--space-10);} }
/* SKILLS BLOCK - end */
/* ===========================================================
AMBIENT BACKGROUND BLOCK - start
"Tide" - filled wave bands swelling and receding behind the
whole site. Chosen from the wave POC at 75% intensity, 2x speed.
Fixed to the viewport, so cost does not grow with page length.
Sits above the page background and below all content. Solid
surfaces (.on-ink, .on-alt, .band-signup) cover it,
which gives the page its rhythm.
CONTRAST NOTE: five overlapping bands darken paper by up to
12.45%. Two token usages were raised to survive that - meta text
from neutral-500 to ink-600, and subtle borders from neutral-150
to neutral-500. Do not revert them while this is running.
=========================================================== */
#dn-bg{
position:fixed;inset:0;width:100%;height:100%;
z-index:0;pointer-events:none;display:block;
}
main,.site-footer{position:relative;z-index:1;}
/* Raised for legibility over the tide. See contrast note above. */
.c-date,.t-meta,.map-detail .state,.fig-caption{color:var(--ink-600);}
.foot-grid h5{color:var(--ink-600);}
.card-list,.c-card,.rows,.row,.defs,.def,.seq,.seq-item,.entry,.entry-list{
border-color:var(--neutral-300);
}
@media (prefers-reduced-motion:reduce){ #dn-bg{opacity:.6;} }
/* AMBIENT BACKGROUND BLOCK - end */
/* ===========================================================
CONTENT ARCHITECTURE BLOCK - start
Taxonomy labels, ContentCard, related content, TopicPage.
Restrained editorial treatment: text labels, not pills.
Content data lives in DN_CONTENT - never hard-code themes.
=========================================================== */
/* --- Taxonomy labels ------------------------------------------------ */
.tx-primary{
font-family:var(--font-display);
font-size:var(--fs-caption);
font-weight:var(--fw-semibold);
letter-spacing:var(--ls-wide);
color:var(--ink-900);
}
a.tx-primary{border-bottom:1px solid var(--neutral-400);padding-bottom:1px;transition:color var(--dur-base) var(--ease-standard),border-color var(--dur-base) var(--ease-standard);}
a.tx-primary:hover{color:var(--maroon-700);border-color:var(--maroon-700);}
.tx-secondary{
font-family:var(--font-body);
font-size:var(--fs-caption);
font-weight:var(--fw-regular);
color:var(--neutral-500);
}
.tx-line{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--space-2);margin-top:var(--space-3);}
.tx-line .sep{color:var(--neutral-300);font-size:var(--fs-caption);}
.on-ink .tx-primary{color:var(--paper);}
.on-ink .tx-secondary{color:var(--neutral-400);}
/* --- ContentCard: one component, layout variants -------------------- */
.card-list{border-top:var(--border-w) solid var(--border-subtle);}
.c-card{
display:grid;
grid-template-columns:minmax(0,1fr) minmax(0,2.2fr);
gap:6vw;
padding:var(--space-8) 0;
border-bottom:var(--border-w) solid var(--border-subtle);
transition:padding-left var(--dur-base) var(--ease-standard);
}
a.c-card{color:inherit;}
a.c-card:hover{padding-left:var(--space-3);}
a.c-card:hover .c-title{color:var(--maroon-700);}
.c-meta{
font-family:var(--font-display);
font-size:var(--fs-caption);
font-weight:var(--fw-semibold);
letter-spacing:var(--ls-wider);
text-transform:uppercase;
color:var(--maroon-700);
}
.c-date{font-size:var(--fs-caption);color:var(--neutral-500);margin-top:var(--space-1);}
.c-title{
font-family:var(--font-display);
font-size:var(--fs-display-sm);
font-weight:var(--fw-extrabold);
letter-spacing:var(--ls-tight);
line-height:var(--lh-snug);
color:var(--ink-900);
margin-bottom:var(--space-3);
max-width:24ch;
transition:color var(--dur-base) var(--ease-standard);
}
.c-desc{font-size:var(--fs-body);color:var(--ink-700);max-width:56ch;line-height:var(--lh-relaxed);}
/* Compact variant - related content, featured rails */
.c-card--compact{grid-template-columns:minmax(0,1fr);gap:var(--space-2);padding:var(--space-6) 0;}
.c-card--compact .c-title{font-size:var(--fs-body-lg);max-width:28ch;}
.c-card--compact .c-desc{font-size:var(--fs-body-sm);max-width:48ch;}
/* Featured variant - one per topic page */
.c-card--featured{
grid-template-columns:minmax(0,1fr);
gap:var(--space-3);
padding:var(--space-8);
border:var(--border-w) solid var(--border-subtle);
border-bottom:var(--border-w) solid var(--border-subtle);
border-radius:var(--radius-md);
background:var(--surface-card);
}
.c-card--featured .c-title{font-size:var(--fs-display-md);max-width:20ch;}
/* --- Continue exploring --------------------------------------------- */
.explore{margin-top:var(--space-16);padding-top:var(--space-5);border-top:2px solid var(--border-strong);}
.explore h2{font-size:var(--fs-display-sm);margin-bottom:var(--space-3);}
.explore .card-list{border-top:0;}
.explore .c-card:last-child{border-bottom:0;}
.explore-more{margin-top:var(--space-6);}
/* --- Topic page ------------------------------------------------------ */
.topic-thread{counter-reset:step;border-top:var(--border-w) solid var(--border-subtle);}
.topic-thread .c-card{grid-template-columns:auto minmax(0,1fr);gap:var(--space-6);align-items:baseline;}
.topic-thread .step{
font-family:var(--font-display);font-size:var(--fs-caption);font-weight:var(--fw-semibold);
letter-spacing:var(--ls-wide);color:var(--neutral-500);font-variant-numeric:tabular-nums;
}
.topic-topics{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-4);margin-top:var(--space-4);}
.topic-topics span{font-size:var(--fs-body);color:var(--ink-700);}
.theme-links{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-6);margin-top:var(--space-6);}
.theme-links a,.theme-links span{
display:block;padding:var(--space-6);
border:var(--border-w) solid var(--border-subtle);border-radius:var(--radius-md);
background:var(--surface-card);
transition:border-color var(--dur-base) var(--ease-standard);
}
.theme-links a:hover{border-color:var(--ink-900);}
.theme-links .t{font-family:var(--font-display);font-size:var(--fs-body-lg);font-weight:var(--fw-bold);letter-spacing:var(--ls-tight);}
.theme-links .d{font-size:var(--fs-body-sm);color:var(--neutral-500);margin-top:var(--space-2);}
.theme-links span{opacity:.55;}
@media (max-width:900px){
.c-card,.topic-thread .c-card{grid-template-columns:minmax(0,1fr);gap:var(--space-3);padding:var(--space-6) 0;}
.theme-links{grid-template-columns:minmax(0,1fr);}
.c-card--featured{padding:var(--space-6);}
}
@media (prefers-reduced-motion:reduce){
.c-card,.c-title,.theme-links a{transition:none;}
}
/* CONTENT ARCHITECTURE BLOCK - end */
/* ===========================================================
FOOTER SOCIAL BLOCK - start
Footer only. Icons are stroke-based and inherit currentColor,
so no platform brand colours enter the palette. Ink at rest,
maroon on hover/focus - keeps the one-accent-per-view rule
intact, since the footer renders on every page.
=========================================================== */
.foot-social{
display:flex;
align-items:center;
gap:var(--space-2);
margin:var(--space-5) 0 0 -10px; /* negative left: optically aligns the glyph with the text above */
padding:0;
list-style:none; /* the base reset only clears margin, not markers */
}
.foot-social li{
list-style:none;
margin:0;
padding:0;
}
.foot-social li::marker{content:none;}
.foot-social a{
display:inline-flex;
align-items:center;
justify-content:center;
width:40px; /* generous hit area, no visible frame */
height:40px;
padding:0;
border:0;
color:var(--neutral-500);
transition:color var(--dur-base) var(--ease-standard);
}
.foot-social a:hover{color:var(--maroon-700);}
.foot-social a:focus-visible{outline:2px solid var(--focus-ring);outline-offset:-4px;border-radius:var(--radius-sm);}
.foot-social svg{width:20px;height:20px;display:block;}
@media (prefers-reduced-motion:reduce){.foot-social a{transition:none;}}
/* FOOTER SOCIAL BLOCK - end */
/* ===========================================================
FORMSPREE ENQUIRY BLOCK - start
Self-contained. Everything Formspree-related lives between
these markers, plus the matching markup block and the
dnEnquiry() handler in the site script.
Form: Coaching enquiry (endpoint mkjnnazb)
Submission is AJAX (fetch + Accept: application/json), which
is Formspree's documented method for keeping the visitor on
the origin domain. Server-side validation and spam filtering
are unaffected - only the response rendering is ours.
=========================================================== */
.dn-enquiry{margin-top:var(--space-6);max-width:560px;}
.dn-enquiry .fieldrow{display:flex;flex-direction:column;gap:var(--space-2);margin-bottom:var(--space-5);}
.dn-enquiry label{
font-family:var(--font-display);
font-size:var(--fs-caption);
font-weight:var(--fw-semibold);
letter-spacing:var(--ls-wider);
text-transform:uppercase;
color:var(--neutral-400);
}
.dn-enquiry .req{color:var(--maroon-300);}
.dn-enquiry input[type="text"],
.dn-enquiry input[type="email"],
.dn-enquiry textarea{
width:100%;
font-family:var(--font-body);
font-size:var(--fs-body);
font-weight:var(--fw-regular);
line-height:1.5;
padding:var(--space-4);
border:var(--border-w) solid var(--neutral-500);
border-radius:var(--radius-sm);
background:var(--ink-800);
color:var(--paper);
transition:border-color var(--dur-base) var(--ease-standard);
}
.dn-enquiry textarea{min-height:132px;resize:vertical;}
.dn-enquiry input::placeholder,
.dn-enquiry textarea::placeholder{color:var(--neutral-500);opacity:1;}
.dn-enquiry input:focus,
.dn-enquiry textarea:focus{
outline:2px solid var(--focus-ring);
outline-offset:2px;
border-color:transparent;
}
.dn-enquiry [aria-invalid="true"]{border-color:var(--maroon-500);}
/* Field-level validation message */
.dn-enquiry .field-error{
font-family:var(--font-body);
font-size:var(--fs-caption);
color:var(--maroon-300);
min-height:0;
}
.dn-enquiry .field-error:empty{display:none;}
/* Submit - paper on ink, so maroon stays the single accent per view */
.dn-enquiry button[type="submit"]{
font-family:var(--font-display);
font-size:var(--fs-body-sm);
font-weight:var(--fw-semibold);
padding:var(--space-4) var(--space-8);
border-radius:var(--radius-sm);
border:var(--border-w) solid var(--paper);
background:var(--paper);
color:var(--ink-900);
cursor:pointer;
transition:background var(--dur-base) var(--ease-standard),
border-color var(--dur-base) var(--ease-standard),
opacity var(--dur-base) var(--ease-standard);
}
.dn-enquiry button[type="submit"]:hover{background:var(--neutral-150);border-color:var(--neutral-150);}
.dn-enquiry button[type="submit"]:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px;}
.dn-enquiry button[type="submit"][disabled]{opacity:.55;cursor:progress;}
/* Form-level status. Announced politely, never colour alone. */
.dn-enquiry .form-status{
margin-top:var(--space-5);
padding:var(--space-4);
border:var(--border-w) solid transparent;
border-radius:var(--radius-sm);
font-family:var(--font-body);
font-size:var(--fs-body-sm);
line-height:var(--lh-normal);
}
.dn-enquiry .form-status:empty{display:none;margin:0;padding:0;border:0;}
.dn-enquiry .form-status[data-state="ok"]{
background:var(--forest-100);border-color:var(--forest-600);color:var(--forest-600);
}
.dn-enquiry .form-status[data-state="err"]{
background:var(--maroon-100);border-color:var(--maroon-700);color:var(--maroon-800);
}
.dn-enquiry .form-status a{color:inherit;border-bottom:1px solid currentColor;}
@media (max-width:600px){
.dn-enquiry button[type="submit"]{width:100%;}
}
@media (prefers-reduced-motion:reduce){
.dn-enquiry input,.dn-enquiry textarea,.dn-enquiry button[type="submit"]{transition:none;}
}
/* FORMSPREE ENQUIRY BLOCK - end */
/* RESOURCES_STYLES_START - supplied Resources library stylesheet */
/* Drift North - Resources area stylesheet
Composed entirely from the canonical v2 design tokens, which the site already
carries. Do not restate the token block. No new hues, no third typeface.
Prototype-only rules (preview bar, URL chip, route inspector, reading-progress
bar, skip link) are removed: the site shell supplies its own equivalents.
*/
/* ============================================================
LAYOUT SYSTEM
One rhythm, one measure set, one title scale. Formats differ
in their BODY, never in their frame.
============================================================ */
:root{
--gutter:7vw;
--header-h:66px;
--sticky-top:calc(var(--header-h) + var(--space-8));
/* vertical rhythm, three steps only */
--rhythm-page:clamp(40px,4.5vw,72px); /* between major regions */
--rhythm-module:var(--space-16); /* between modules in a region */
--rhythm-block:var(--space-12); /* between blocks in a module */
/* measures */
--measure-read:64ch;
--measure-lede:48ch;
--measure-note:36ch;
}
*{box-sizing:border-box}
body{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
:focus-visible{outline:2px solid var(--focus-ring);outline-offset:3px}
img{max-width:100%}
.shell{max-width:1500px;margin:0 auto}
.pad{padding-left:var(--gutter);padding-right:var(--gutter)}
.bleed{margin-left:calc(var(--gutter) * -1);margin-right:calc(var(--gutter) * -1);
padding-left:var(--gutter);padding-right:var(--gutter)}
.region{padding-top:var(--rhythm-page);padding-bottom:var(--rhythm-page)}
.region-top{padding-top:var(--space-12);padding-bottom:var(--rhythm-page)}
/* adjacent regions must not stack their paddings */
section.region + section.region-top,
section.region + section.region{padding-top:var(--space-4)}
section.region +.pad + section.region{padding-top:var(--space-6)}
section.region:has(+.pad >.dn-drift-rules.divider){padding-bottom:var(--space-10)}
.region +.pad >.dn-drift-rules.divider{margin-top:0}
/* ---- title scale: four sizes, used the same way everywhere ---- */
.t-hero{font-family:var(--font-display);font-weight:var(--fw-extrabold);font-size:var(--fs-display-xl);
line-height:var(--lh-tight);letter-spacing:var(--ls-tighter);max-width:16ch;margin:0}
.t-page{font-family:var(--font-display);font-weight:var(--fw-extrabold);font-stretch:var(--wd-narrow);
font-size:var(--fs-display-lg);line-height:var(--lh-snug);letter-spacing:var(--ls-tight);
max-width:22ch;margin:0}
.t-section{font-family:var(--font-display);font-weight:var(--fw-extrabold);font-stretch:var(--wd-narrow);
font-size:var(--fs-display-sm);line-height:var(--lh-snug);letter-spacing:var(--ls-tight);
max-width:26ch;margin:0 0 var(--space-5)}
.t-label{font-family:var(--font-display);font-weight:var(--fw-semibold);font-size:var(--fs-caption);
letter-spacing:var(--ls-wider);text-transform:uppercase;color:var(--neutral-500);margin:0}
.lede{font-family:var(--font-body);font-weight:var(--fw-light);font-size:var(--fs-lede);
line-height:var(--lh-relaxed);color:var(--ink-700);max-width:var(--measure-lede);margin:var(--space-8) 0 0}
.meta{font-size:var(--fs-body-sm);color:var(--neutral-500);line-height:var(--lh-normal)}
/* ---- chrome ---- */
header.site{border-bottom:1px solid var(--border-subtle);background:var(--paper);position:sticky;top:0;z-index:30}
.header-in{display:flex;align-items:center;justify-content:space-between;gap:var(--space-6);
padding-top:var(--space-4);padding-bottom:var(--space-4);min-height:var(--header-h)}
.brand{display:flex;align-items:center;gap:var(--space-4);border:0}
.brand img{height:24px;width:auto;display:block}
.brand.dn-wordmark{font-size:0.8125rem;color:var(--ink-900)}
.navlinks{display:flex;gap:var(--space-6);align-items:center}
.navlinks a{color:var(--ink-700);border:0;font-size:var(--fs-body-sm);font-weight:var(--fw-medium)}
.navlinks a:hover{color:var(--maroon-700)}
footer.site{border-top:1px solid var(--border-subtle);margin-top:var(--space-16);
padding-top:var(--space-16);padding-bottom:var(--space-16);color:var(--ink-900)}
.foot-in{display:flex;justify-content:space-between;gap:var(--space-8);flex-wrap:wrap;
margin-top:var(--space-10);font-size:var(--fs-body-sm);color:var(--neutral-500)}
/* ---- trust strip ---- */
.trust{display:flex;flex-wrap:wrap;margin-top:var(--rhythm-block);padding-top:var(--space-5);
border-top:1px solid var(--ink-900);font-family:var(--font-display);font-size:var(--fs-caption);
letter-spacing:var(--ls-wide);text-transform:uppercase;color:var(--neutral-500)}
.trust span{padding-right:var(--space-6);margin-right:var(--space-6);border-right:1px solid var(--border-default)}
.trust span:last-child{border-right:0;margin-right:0;padding-right:0}
/* ============================================================
THE MASTHEAD, identical construction on all five formats.
Consistency lives here so the bodies are free to differ.
============================================================ */
.crumbs{font-size:var(--fs-body-sm);color:var(--neutral-500);margin:0 0 var(--space-6)}
.crumbs a{color:var(--neutral-500);border-bottom-color:var(--border-default)}
.crumbs a:hover{color:var(--maroon-700)}
.stepper{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border-top:1px solid var(--ink-900);
margin:0 0 var(--rhythm-block)}
.stepper a{border:0;border-right:1px solid var(--border-subtle);padding:var(--space-4) var(--space-4) var(--space-5) 0;
color:var(--neutral-500);font-family:var(--font-display);font-size:var(--fs-caption);letter-spacing:var(--ls-wide);
text-transform:uppercase;font-weight:var(--fw-semibold);display:flex;flex-direction:column;gap:var(--space-2);
line-height:var(--lh-snug);transition:color var(--dur-base) var(--ease-standard)}
.stepper a:last-child{border-right:0}
.stepper .ix{font-family:var(--font-mono);font-size:var(--fs-caption);color:var(--neutral-300);letter-spacing:0}
.stepper a:hover{color:var(--ink-900)}
.stepper a[aria-current]{color:var(--ink-900);box-shadow:inset 0 2px 0 0 var(--ink-900)}
.stepper a[aria-current] .ix{color:var(--ink-900)}
.mast{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:var(--gutter);
align-items:end;margin-bottom:var(--rhythm-module)}
.mast-id{display:flex;gap:var(--space-5);align-items:center;margin-bottom:var(--space-8)}
.mast-standfirst{font-family:var(--font-body);font-weight:var(--fw-light);font-size:var(--fs-lede);
line-height:var(--lh-relaxed);color:var(--ink-700);max-width:44ch;margin:var(--space-8) 0 0}
.mast-meta{display:flex;flex-wrap:wrap;padding-top:var(--space-5);border-top:1px solid var(--ink-900);
font-family:var(--font-display);font-size:var(--fs-caption);letter-spacing:var(--ls-wide);
text-transform:uppercase;color:var(--neutral-500);align-self:end}
.mast-meta span{padding-right:var(--space-6);margin-right:var(--space-6);border-right:1px solid var(--border-default)}
.mast-meta span:last-child{border-right:0;margin-right:0;padding-right:0}
/* format marks, one construction each, all from hairlines */
.mark{display:block;width:32px;height:32px;position:relative;color:var(--ink-900);flex:none}
.mark-note span{position:absolute;left:0;right:0;height:1px;background:currentColor}
.mark-note span:nth-child(1){top:5px;opacity:.9}
.mark-note span:nth-child(2){top:12px;left:5px;opacity:.6}
.mark-note span:nth-child(3){top:19px;left:10px;opacity:.35}
.mark-note span:nth-child(4){top:26px;left:15px;opacity:.18}
.mark-card span:nth-child(1){position:absolute;inset:0 8px 8px 0;border:1px solid currentColor}
.mark-card span:nth-child(2){position:absolute;inset:8px 0 0 8px;border:1px solid currentColor;opacity:.3}
.mark-ev span:nth-child(1){position:absolute;left:0;top:3px;bottom:3px;width:1px;background:currentColor}
.mark-ev span:nth-child(2){position:absolute;left:0;top:3px;width:10px;height:1px;background:currentColor}
.mark-ev span:nth-child(3){position:absolute;left:0;bottom:3px;width:10px;height:1px;background:currentColor}
.mark-ev span:nth-child(4){position:absolute;left:15px;top:15px;right:2px;height:1px;background:currentColor;opacity:.4}
.mark-sheet span{position:absolute;left:0;right:0;height:1px;background:currentColor;opacity:.55}
.mark-sheet span:nth-child(1){top:7px}.mark-sheet span:nth-child(2){top:15px}
.mark-sheet span:nth-child(3){top:23px;right:12px}
.mark-shelf span{position:absolute;top:3px;bottom:3px;width:1px;background:currentColor}
.mark-shelf span:nth-child(1){left:5px}.mark-shelf span:nth-child(2){left:12px}
.mark-shelf span:nth-child(3){left:19px;top:8px}
/* ---- pager ---- */
.pager{display:flex;justify-content:space-between;gap:var(--space-6);margin-top:var(--rhythm-module);
padding-top:var(--space-8);border-top:1px solid var(--border-subtle);flex-wrap:wrap}
.pager a{border:0;font-family:var(--font-display);font-weight:var(--fw-semibold);font-size:var(--fs-body-sm);color:var(--ink-900)}
.pager a:hover{color:var(--maroon-700)}
.divider{color:var(--ink-900);margin:0}
/* ============================================================
INDEX
============================================================ */
.practice-list{border-top:1px solid var(--ink-900)}
a.practice-row{display:grid;grid-template-columns:4rem minmax(0,1fr) minmax(0,1.3fr) 11rem;gap:var(--space-6);
align-items:baseline;padding:var(--space-10) 0;border:0;border-bottom:1px solid var(--border-subtle);color:inherit}
a.practice-row:hover{background:var(--surface-page-alt)}
a.practice-row:hover .practice-title{color:var(--maroon-700)}
a.practice-row.interrupted{transform:translateY(var(--drift-step))}
.practice-num{font-family:var(--font-display);font-weight:var(--fw-extrabold);font-size:var(--fs-display-sm);
letter-spacing:var(--ls-tight);color:var(--neutral-300);line-height:var(--lh-snug)}
.practice-title{font-family:var(--font-display);font-weight:var(--fw-extrabold);font-stretch:var(--wd-narrow);
font-size:var(--fs-display-sm);letter-spacing:var(--ls-tight);line-height:var(--lh-snug);
transition:color var(--dur-base) var(--ease-standard)}
.practice-essential{font-size:var(--fs-body);color:var(--ink-600);line-height:var(--lh-normal);max-width:46ch}
.status{font-family:var(--font-display);font-size:var(--fs-caption);letter-spacing:var(--ls-wide);
text-transform:uppercase;font-weight:var(--fw-semibold);color:var(--maroon-700);text-align:right}
.queue{margin-top:var(--rhythm-module);border-top:1px solid var(--border-subtle);padding-top:var(--space-8)}
.queue ul{list-style:none;margin:var(--space-5) 0 0;padding:0;display:flex;flex-wrap:wrap;gap:var(--space-3)}
.queue li{font-size:var(--fs-body-sm);color:var(--neutral-500);border:1px solid var(--border-subtle);
padding:var(--space-2) var(--space-4);border-radius:var(--radius-full)}
/* ============================================================
HUB
============================================================ */
.hub{border-top:1px solid var(--ink-900);margin-top:var(--space-8)}
a.asset{border:0;color:inherit;text-decoration:none;display:block}
a.asset:hover .t{color:var(--maroon-700)}
a.asset .kind{font-family:var(--font-display);font-size:var(--fs-caption);letter-spacing:var(--ls-wider);
text-transform:uppercase;font-weight:var(--fw-semibold);color:var(--neutral-500);display:block}
a.asset .len{font-size:var(--fs-caption);color:var(--neutral-400);font-family:var(--font-mono);display:block}
a.primary{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:var(--gutter);
align-items:center;padding:var(--space-12) 0;border-bottom:1px solid var(--ink-900)}
a.primary .starthere{font-family:var(--font-display);font-size:var(--fs-caption);letter-spacing:var(--ls-wider);
text-transform:uppercase;font-weight:var(--fw-semibold);color:var(--maroon-700);display:block}
a.primary .t{font-family:var(--font-display);font-weight:var(--fw-extrabold);font-stretch:var(--wd-narrow);
font-size:var(--fs-display-lg);line-height:var(--lh-snug);letter-spacing:var(--ls-tight);
display:block;margin:var(--space-5) 0;max-width:16ch;transition:color var(--dur-base) var(--ease-standard)}
a.primary .d{font-size:var(--fs-body-lg);line-height:var(--lh-relaxed);color:var(--ink-700);
display:block;max-width:44ch;margin-bottom:var(--space-6)}
.secondaries{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.secondaries a.asset{padding:var(--space-12) var(--space-6) var(--space-12) 0;
border-right:1px solid var(--border-subtle);display:flex;flex-direction:column;min-height:100%}
.secondaries a.asset:last-child{border-right:0}
.secondaries .t{font-family:var(--font-display);font-weight:var(--fw-extrabold);font-size:var(--fs-body-lg);
line-height:var(--lh-snug);letter-spacing:var(--ls-tight);display:block;margin:var(--space-3) 0;
transition:color var(--dur-base) var(--ease-standard)}
.secondaries .d{font-size:var(--fs-body-sm);line-height:var(--lh-normal);color:var(--ink-600);display:block}
.secondaries .len{margin-top:auto;padding-top:var(--space-8)}
/* previews scale with their box, percentage geometry, not fixed pixels */
.preview{position:relative;color:var(--neutral-300);display:block;margin:var(--space-6) 0 0;height:64px}
.preview.lg{height:170px;margin:0}
.pv-note i{position:absolute;left:0;right:28%;height:1px;background:currentColor;display:block}
.pv-note i:nth-child(1){top:12%}.pv-note i:nth-child(2){top:37%;left:9%}
.pv-note i:nth-child(3){top:62%;left:18%}.pv-note i:nth-child(4){top:87%;left:27%}
.pv-card i{position:absolute;top:6%;bottom:6%;width:26%;border:1px solid currentColor;display:block}
.pv-card i:nth-child(1){left:0}.pv-card i:nth-child(2){left:30%}.pv-card i:nth-child(3){left:60%}
.pv-ev{font-family:var(--font-display);font-weight:var(--fw-black);font-stretch:var(--wd-wide);
font-size:2.75rem;line-height:1;letter-spacing:var(--ls-tighter);color:var(--neutral-300);
display:flex;align-items:center}
.pv-sheet i{position:absolute;left:0;right:0;height:1px;background:currentColor;display:block}
.pv-sheet i:nth-child(1){top:16%;right:55%}.pv-sheet i:nth-child(2){top:50%}
.pv-sheet i:nth-child(3){top:84%;right:25%}
.pv-shelf i{position:absolute;top:0;bottom:0;width:13px;border:1px solid currentColor;display:block}
.pv-shelf i:nth-child(1){left:0}.pv-shelf i:nth-child(2){left:20px}
.pv-shelf i:nth-child(3){left:40px;top:16%}
.skill-block{background:var(--maroon-700);color:var(--paper);padding:var(--space-16) var(--space-12);
margin-top:var(--rhythm-module);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);
gap:var(--gutter);align-items:center}
.skill-block .t-label{color:var(--maroon-300);margin-bottom:var(--space-4)}
.skill-block h3{font-family:var(--font-display);font-weight:var(--fw-extrabold);font-size:var(--fs-display-md);
letter-spacing:var(--ls-tight);line-height:var(--lh-snug);margin:0}
.skill-block p{font-size:var(--fs-body);line-height:var(--lh-relaxed);color:var(--maroon-100);
margin:0 0 var(--space-8);max-width:54ch}
.btn-ghost-inv{display:inline-block;border:1px solid var(--maroon-300);color:var(--paper);
padding:var(--space-3) var(--space-6);border-radius:var(--radius-sm);font-family:var(--font-display);
font-size:var(--fs-body-sm);font-weight:var(--fw-semibold);text-decoration:none;
transition:background var(--dur-base) var(--ease-standard)}
.btn-ghost-inv:hover{background:var(--maroon-800);color:var(--paper)}
.btn-ink{display:inline-block;background:var(--ink-900);color:var(--paper);border:0;
padding:var(--space-3) var(--space-6);border-radius:var(--radius-sm);font-family:var(--font-display);
font-size:var(--fs-body-sm);font-weight:var(--fw-semibold);cursor:pointer;text-decoration:none}
.btn-ink:hover{background:var(--ink-800);color:var(--paper)}
/* ============================================================
FORMAT 1, PRACTICE NOTE · essay
One continuous grid; the ink band spans both columns.
============================================================ */
.note{display:grid;grid-template-columns:12rem minmax(0,1fr);column-gap:var(--gutter);row-gap:0}
.rail{grid-column:1;position:sticky;top:var(--sticky-top);align-self:start;font-size:var(--fs-body-sm);
padding-bottom:var(--space-16)}
.rail .rl{font-family:var(--font-display);font-size:var(--fs-caption);letter-spacing:var(--ls-wider);
text-transform:uppercase;font-weight:var(--fw-semibold);color:var(--neutral-400);margin-bottom:var(--space-4)}
.rail ol{list-style:none;margin:0 0 var(--space-10);padding:0;counter-reset:r}
.rail li{counter-increment:r;padding:var(--space-3) 0;border-bottom:1px solid var(--border-subtle);
color:var(--ink-700);line-height:var(--lh-normal)}
.rail li::before{content:counter(r,decimal-leading-zero) " ";font-family:var(--font-mono);
font-size:var(--fs-caption);color:var(--neutral-300);margin-right:var(--space-2)}
.rail .plain li::before{content:''}
.rail a{border:0;color:var(--ink-700)}
.rail a:hover{color:var(--maroon-700)}
.note-body{grid-column:2}
.note-body > *:first-child{margin-top:0}
.note-body p{font-size:var(--fs-body-lg);line-height:var(--lh-relaxed);color:var(--ink-800);
max-width:var(--measure-read);margin:0 0 var(--space-6)}
.note-body p.open{font-size:var(--fs-lede);font-weight:var(--fw-light);color:var(--ink-700)}
.note-body h2{font-family:var(--font-display);font-weight:var(--fw-extrabold);font-stretch:var(--wd-narrow);
font-size:var(--fs-display-sm);line-height:var(--lh-snug);letter-spacing:var(--ls-tight);
margin:var(--rhythm-module) 0 var(--space-6);max-width:26ch}
.note-body ul{max-width:var(--measure-read);padding:0;list-style:none;margin:0 0 var(--space-8)}
.note-body ul li{font-size:var(--fs-body-lg);line-height:var(--lh-relaxed);color:var(--ink-800);
padding:var(--space-4) 0 var(--space-4) var(--space-8);border-bottom:1px solid var(--border-subtle);position:relative}
.note-body ul li:first-child{border-top:1px solid var(--border-subtle)}
.note-body ul li::before{content:'';position:absolute;left:0;top:calc(var(--space-4) + 0.8em);
width:16px;height:1px;background:var(--neutral-300)}
.note-body strong{font-weight:var(--fw-semibold);color:var(--ink-900)}
.note-band{grid-column:1 / -1;background:var(--ink-900);color:var(--paper);
margin:var(--rhythm-module) calc(var(--gutter) * -1);padding:var(--rhythm-page) var(--gutter)}
.note-band blockquote{font-family:var(--font-display);font-weight:var(--fw-extrabold);font-stretch:var(--wd-narrow);
font-size:var(--fs-display-lg);line-height:var(--lh-snug);letter-spacing:var(--ls-tighter);max-width:22ch;margin:0}
.note-band .attr{font-family:var(--font-display);font-size:var(--fs-caption);letter-spacing:var(--ls-wider);
text-transform:uppercase;color:var(--neutral-400);margin-top:var(--space-8)}
.escalation{border-left:3px solid var(--maroon-700);padding:var(--space-3) 0 var(--space-3) var(--space-6);
max-width:var(--measure-read);margin:var(--rhythm-module) 0 0}
.escalation p{font-size:var(--fs-body);color:var(--ink-700);margin:0;line-height:var(--lh-relaxed)}
.sources{border-top:1px solid var(--ink-900);padding-top:var(--space-6);max-width:var(--measure-read);
margin-top:var(--rhythm-block)}
.sources p{font-size:var(--fs-body-sm);line-height:var(--lh-normal);color:var(--ink-600);margin:0 0 var(--space-3)}
.sources p:last-child{margin-bottom:0}
.sheet-offer{border:1px solid var(--ink-900);padding:var(--space-8);max-width:var(--measure-read);
margin:var(--rhythm-block) 0;display:flex;justify-content:space-between;align-items:center;
gap:var(--space-8);flex-wrap:wrap}
.sheet-offer .t{font-family:var(--font-display);font-weight:var(--fw-semibold);font-size:var(--fs-body-lg);
letter-spacing:var(--ls-tight);margin-bottom:var(--space-2)}
/* ============================================================
FORMAT 2, FRAMEWORK CARD · reference object
Ghost is a real element, painted before the card. It was
previously a z-index:-1 pseudo and never rendered.
============================================================ */
.fc-region{background:var(--surface-page-alt)}
.fc-stage{position:relative;max-width:1060px;margin-top:var(--rhythm-block)}
.fc-ghost{position:absolute;inset:0;background:var(--ink-900);opacity:.12;
transform:translate(var(--drift-step),var(--drift-step));pointer-events:none}
.fc{position:relative;background:var(--paper);border:1px solid var(--ink-900);padding:var(--space-16)}
.fc-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,var(--measure-note));gap:var(--space-10);
align-items:end;border-bottom:1px solid var(--ink-900);padding-bottom:var(--space-6)}
.fc-top h2{font-family:var(--font-display);font-weight:var(--fw-extrabold);font-size:var(--fs-display-md);
letter-spacing:var(--ls-tight);line-height:var(--lh-snug);margin:0}
.fc-attr{font-size:var(--fs-caption);color:var(--neutral-500);line-height:var(--lh-normal);margin:0}
.fc h3{font-family:var(--font-display);font-weight:var(--fw-semibold);font-size:var(--fs-caption);
letter-spacing:var(--ls-wider);text-transform:uppercase;color:var(--neutral-500);
margin:var(--rhythm-block) 0 var(--space-5)}
.fc p{font-size:var(--fs-body);line-height:var(--lh-relaxed);color:var(--ink-800);max-width:68ch;margin:0 0 var(--space-4)}
.anatomy{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-8)}
.anatomy > div{border-top:2px solid var(--ink-900);padding-top:var(--space-4)}
.anatomy .letter{font-family:var(--font-display);font-weight:var(--fw-black);font-stretch:var(--wd-wide);
font-size:var(--fs-display-md);line-height:1;letter-spacing:var(--ls-tighter);color:var(--neutral-300)}
.anatomy .nm{font-family:var(--font-display);font-weight:var(--fw-semibold);font-size:var(--fs-body);
letter-spacing:var(--ls-tight);margin:var(--space-3) 0 var(--space-2)}
.anatomy p{font-size:var(--fs-body-sm);line-height:var(--lh-normal);color:var(--ink-600);margin:0}
.breaks{width:100%;border-collapse:collapse}
.breaks th{text-align:left;font-family:var(--font-display);font-size:var(--fs-caption);letter-spacing:var(--ls-wide);
text-transform:uppercase;font-weight:var(--fw-semibold);background:var(--neutral-150);color:var(--ink-900);
padding:var(--space-3) var(--space-4)}
.breaks th:first-child{width:30%}
.breaks td{border-bottom:1px solid var(--border-subtle);padding:var(--space-5) var(--space-4);
font-size:var(--fs-body-sm);line-height:var(--lh-normal);color:var(--ink-700);vertical-align:top}
.breaks td:first-child{font-family:var(--font-display);font-weight:var(--fw-semibold);color:var(--ink-900);
font-size:var(--fs-body);line-height:var(--lh-snug)}
.chain{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--space-3)}
.chain div{border:1px solid var(--border-default);padding:var(--space-5) var(--space-4);
font-family:var(--font-display);font-size:var(--fs-body-sm);font-weight:var(--fw-semibold);
line-height:var(--lh-snug);letter-spacing:var(--ls-tight)}
.chain .st{display:block;font-family:var(--font-mono);font-size:var(--fs-caption);color:var(--neutral-400);
font-weight:var(--fw-regular);letter-spacing:0;margin-bottom:var(--space-3)}
.chain div.added{border-color:var(--maroon-700);color:var(--maroon-700)}
.chain div.added .st{color:var(--maroon-500)}
.fc-foot{border-top:1px solid var(--ink-900);margin-top:var(--rhythm-block);padding-top:var(--space-5);
display:flex;justify-content:space-between;gap:var(--space-6);flex-wrap:wrap;font-family:var(--font-display);
font-size:var(--fs-caption);letter-spacing:var(--ls-wide);text-transform:uppercase;color:var(--neutral-500)}
/* ============================================================
FORMAT 3, EVIDENCE NOTE · data brief
============================================================ */
.ev-figures{background:var(--ink-900);color:var(--paper);margin-bottom:var(--rhythm-module);
padding:var(--space-16) var(--gutter)}
.ev-top{display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr);gap:var(--gutter);align-items:center}
.ev-figure{font-family:var(--font-display);font-weight:var(--fw-black);font-stretch:var(--wd-wide);
font-size:clamp(4rem,9vw,8rem);line-height:.9;letter-spacing:var(--ls-tighter);margin:0}
.ev-claim{font-family:var(--font-display);font-weight:var(--fw-extrabold);font-size:var(--fs-display-sm);
letter-spacing:var(--ls-tight);line-height:var(--lh-snug);max-width:30ch;margin:0}
.ev-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-8);
margin-top:var(--space-12);border-top:1px solid var(--ink-700);padding-top:var(--space-6)}
.ev-stats .n{font-family:var(--font-display);font-weight:var(--fw-bold);font-stretch:var(--wd-wide);
font-size:var(--fs-display-sm);letter-spacing:var(--ls-tight);line-height:1}
.ev-stats .l{font-size:var(--fs-caption);color:var(--neutral-400);margin-top:var(--space-3);line-height:var(--lh-normal)}
.ev{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:var(--gutter)}
.ev-body > *:first-child{margin-top:0}
.ev-body p{font-size:var(--fs-body-lg);line-height:var(--lh-relaxed);color:var(--ink-800);max-width:58ch;margin:0 0 var(--space-6)}
.ev-body h2{font-family:var(--font-display);font-weight:var(--fw-extrabold);font-stretch:var(--wd-narrow);
font-size:var(--fs-display-sm);line-height:var(--lh-snug);letter-spacing:var(--ls-tight);
margin:var(--rhythm-module) 0 var(--space-6);max-width:26ch}
.ev-body strong{font-weight:var(--fw-semibold);color:var(--ink-900)}
.ev-limits{border:1px solid var(--ink-900);padding:var(--space-8);margin:var(--rhythm-block) 0;max-width:58ch}
.ev-limits p{font-size:var(--fs-body);margin-bottom:var(--space-4)}
.ev-limits p:last-child{margin-bottom:0}
.ev-cite{align-self:start;position:sticky;top:var(--sticky-top);font-family:var(--font-mono);
font-size:var(--fs-caption);line-height:var(--lh-relaxed);color:var(--ink-600)}
.ev-cite div{padding:var(--space-5) 0;border-top:1px solid var(--border-subtle)}
.ev-cite div:first-of-type{border-top:1px solid var(--ink-900)}
.ev-flag{color:var(--maroon-700)}
.ev-companion{border-top:1px solid var(--ink-900);margin-top:var(--rhythm-page);padding-top:var(--space-10)}
/* ============================================================
FORMAT 4, WORKING SHEET · instrument
No displacement. No maroon. Everything aligns.
============================================================ */
.sheet{background:var(--paper);border:1px solid var(--ink-900);max-width:880px;margin:var(--rhythm-block) 0 0;
padding:var(--space-16);position:relative}
.sheet::before,.sheet::after{content:'';position:absolute;width:12px;height:12px;border:1px solid var(--ink-900)}
.sheet::before{top:-1px;left:-1px;border-right:0;border-bottom:0}
.sheet::after{bottom:-1px;right:-1px;border-left:0;border-top:0}
.sheet-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--space-10);align-items:end;
border-bottom:2px solid var(--ink-900);padding-bottom:var(--space-5);margin-bottom:var(--space-12)}
.sheet-head h2{font-family:var(--font-display);font-weight:var(--fw-extrabold);font-size:var(--fs-display-sm);
letter-spacing:var(--ls-tight);margin:0 0 var(--space-2);line-height:var(--lh-snug)}
.sheet-head p{font-size:var(--fs-body-sm);color:var(--neutral-500);margin:0}
.fields{font-family:var(--font-display);font-size:var(--fs-caption);letter-spacing:var(--ls-wide);
text-transform:uppercase;color:var(--neutral-400);display:grid;gap:var(--space-5)}
.fields span{display:block;border-bottom:1px solid var(--neutral-200);min-width:160px;padding-bottom:var(--space-2)}
.q{display:grid;grid-template-columns:2.5rem minmax(0,1fr);column-gap:var(--space-5);
border-top:2px solid var(--ink-900);padding-top:var(--space-4);margin-bottom:var(--space-10)}
.q .n{font-family:var(--font-display);font-weight:var(--fw-black);font-size:var(--fs-body-lg);
letter-spacing:var(--ls-tight);color:var(--ink-900);line-height:var(--lh-snug)}
.q .ask{font-family:var(--font-display);font-weight:var(--fw-semibold);font-size:var(--fs-body-lg);
line-height:var(--lh-snug);letter-spacing:var(--ls-tight);margin:0 0 var(--space-2)}
.q .help{font-size:var(--fs-body-sm);color:var(--neutral-500);line-height:var(--lh-normal);max-width:56ch;margin:0}
.rule-lines{margin-top:var(--space-6)}
.rule-lines span{display:block;height:1px;background:var(--neutral-200);margin-bottom:var(--space-8)}
.q.stop .body{background:var(--neutral-100);padding:var(--space-6);margin-top:var(--space-1)}
.checkline{display:flex;align-items:center;gap:var(--space-4);margin-top:var(--space-5);
font-family:var(--font-display);font-size:var(--fs-body-sm);font-weight:var(--fw-semibold)}
.checkbox{width:16px;height:16px;border:1px solid var(--ink-900);display:inline-block;flex:none}
.sheet-foot{display:flex;justify-content:space-between;gap:var(--space-6);flex-wrap:wrap;
font-size:var(--fs-caption);color:var(--neutral-400);border-top:2px solid var(--ink-900);
padding-top:var(--space-5);margin-top:var(--space-4);font-family:var(--font-display);
letter-spacing:var(--ls-wide);text-transform:uppercase}
/* ============================================================
FORMAT 5, THE SHELF · bibliography
Spines size to their content; the year sits below, horizontal.
============================================================ */
.spines{display:grid;grid-template-columns:repeat(3,minmax(0,160px));gap:var(--space-6);
margin:var(--rhythm-block) 0 var(--rhythm-module);align-items:start}
.spine-col{display:flex;flex-direction:column;gap:var(--space-4)}
.spine-col.interrupted{transform:translateY(var(--drift-step-lg))}
.spine{border:1px solid var(--ink-900);min-height:300px;display:flex;align-items:center;justify-content:center;
padding:var(--space-8) var(--space-4)}
.spine span{writing-mode:vertical-rl;transform:rotate(180deg);font-family:var(--font-display);
font-weight:var(--fw-extrabold);font-stretch:var(--wd-narrow);font-size:var(--fs-body);
letter-spacing:var(--ls-tight);line-height:1.25;text-align:center;max-height:260px}
.spine-col .yr{font-family:var(--font-mono);font-size:var(--fs-caption);color:var(--neutral-400);line-height:var(--lh-normal)}
.book{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:var(--gutter);
border-top:1px solid var(--ink-900);padding:var(--space-12) 0}
.book h3{font-family:var(--font-display);font-weight:var(--fw-extrabold);font-stretch:var(--wd-narrow);
font-size:var(--fs-display-sm);letter-spacing:var(--ls-tight);line-height:var(--lh-snug);margin:0 0 var(--space-3)}
.book .attr{font-size:var(--fs-body-sm);color:var(--neutral-500);margin:0;line-height:var(--lh-normal)}
.book-meta{position:sticky;top:var(--sticky-top);align-self:start}
.tl{margin-bottom:var(--space-10)}
.tl:last-child{margin-bottom:0}
.tl .tag{font-family:var(--font-display);font-size:var(--fs-caption);letter-spacing:var(--ls-wider);
text-transform:uppercase;font-weight:var(--fw-semibold);color:var(--ink-900);display:block;
border-bottom:1px solid var(--ink-900);padding-bottom:var(--space-2);margin-bottom:var(--space-4)}
.tl p{font-size:var(--fs-body);line-height:var(--lh-relaxed);color:var(--ink-800);margin:0;max-width:62ch}
.offshelf{border-left:3px solid var(--maroon-700);padding:var(--space-4) 0 var(--space-4) var(--space-8);
margin-top:var(--rhythm-module);max-width:70ch}
.offshelf h3{font-family:var(--font-display);font-weight:var(--fw-semibold);font-size:var(--fs-body-lg);
letter-spacing:var(--ls-tight);margin:var(--space-4) 0 var(--space-2)}
.offshelf p{font-size:var(--fs-body);line-height:var(--lh-relaxed);color:var(--ink-700);margin:var(--space-4) 0 0;max-width:62ch}
.offshelf .attr{font-size:var(--fs-body-sm);color:var(--neutral-500);margin:0}
/* ladder, used by practice 06's framework card. Five rows, no indent:
the card already spends its one displacement gesture on the ghost. */
.ladder{border-top:2px solid var(--ink-900)}
.ladder > div{display:grid;grid-template-columns:3rem minmax(0,10rem) minmax(0,1fr);gap:var(--space-5);
padding:var(--space-5) 0;border-bottom:1px solid var(--border-subtle);align-items:baseline}
.ladder .lv{font-family:var(--font-mono);font-size:var(--fs-caption);color:var(--neutral-400)}
.ladder .nm{font-family:var(--font-display);font-weight:var(--fw-semibold);font-size:var(--fs-body);
letter-spacing:var(--ls-tight)}
.ladder .ds{font-size:var(--fs-body-sm);line-height:var(--lh-normal);color:var(--ink-600)}
@media (max-width:760px){.ladder > div{grid-template-columns:2.5rem minmax(0,1fr);row-gap:var(--space-2)}
.ladder .ds{grid-column:2}}
/* contents strip on a hub, the five subpages, named, before any hover */
.contents-label{margin-bottom:var(--space-4);margin-top:var(--space-10)}
.contents .stepper{margin-bottom:0}
.region:has(.contents){padding-bottom:var(--space-8)}
.stepper a[aria-current]{color:var(--ink-900);box-shadow:inset 0 2px 0 0 var(--ink-900)}
/* a card is a destination: say so without requiring a hover */
.secondaries a.asset .t::after,a.asset.primary .t::after{content:' \2192';color:var(--neutral-300);
transition:color var(--dur-base) var(--ease-standard)}
a.asset:hover .t::after{color:var(--maroon-700)}
/* index: name the five formats in the row */
.status .fmts{display:block;margin-top:var(--space-2);font-family:var(--font-body);
font-size:var(--fs-caption);font-weight:var(--fw-regular);letter-spacing:var(--ls-normal);
text-transform:none;color:var(--neutral-400);line-height:var(--lh-normal)}
/* ---- dev only ---- */
/* ============================================================
RESPONSIVE, collapse in the same order everywhere
============================================================ */
@media (max-width:1080px){
.mast{grid-template-columns:1fr;gap:var(--space-10);align-items:start}
.mast-meta{align-self:start}
.note{grid-template-columns:1fr}
.rail{position:static;padding-bottom:var(--space-10);border-bottom:1px solid var(--border-subtle);
margin-bottom:var(--space-10)}
.note-body,.note-band{grid-column:1}
.ev,.book{grid-template-columns:1fr;gap:var(--space-10)}
.ev-cite,.book-meta{position:static}
.ev-top{grid-template-columns:1fr;gap:var(--space-6)}
.ev-stats,.secondaries{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-8)}
.secondaries a.asset{border-right:0;border-bottom:1px solid var(--border-subtle);padding-right:var(--space-6)}
.secondaries a.asset:nth-child(odd){border-right:1px solid var(--border-subtle)}
a.primary{grid-template-columns:1fr;gap:var(--space-10)}
.preview.lg{height:120px}
.chain,.anatomy{grid-template-columns:1fr;gap:var(--space-5)}
.skill-block{grid-template-columns:1fr;gap:var(--space-8);padding:var(--space-12) var(--space-10)}
.fc{padding:var(--space-10)}
.fc-top{grid-template-columns:1fr;gap:var(--space-5);align-items:start}
}
@media (max-width:760px){
:root{--gutter:6vw;--drift-step-lg:16px}
.stepper{grid-template-columns:repeat(2,minmax(0,1fr))}
.stepper a{border-bottom:1px solid var(--border-subtle);padding-right:var(--space-4)}
.stepper a:nth-child(2n){border-right:0}
a.practice-row{grid-template-columns:3rem minmax(0,1fr);row-gap:var(--space-3)}
.practice-essential,.status{grid-column:2;text-align:left}
.navlinks{display:none}
.secondaries{grid-template-columns:1fr}
.secondaries a.asset{border-right:0}
.ev-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
.spines{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-3)}
.spine{min-height:250px;padding:var(--space-6) var(--space-2)}
.spine span{font-size:var(--fs-body-sm);max-height:210px}
.sheet,.fc{padding:var(--space-8)}
.sheet-head{grid-template-columns:1fr;gap:var(--space-6)}
.breaks thead{display:none}
.breaks td{display:block;border-bottom:0;padding:var(--space-3) 0}
.breaks td:first-child{width:auto;padding-top:var(--space-5)}
.breaks tr{display:block;border-bottom:1px solid var(--border-subtle)}
.sheet-offer{flex-direction:column;align-items:flex-start;gap:var(--space-5)}
}
@media print{
.site-header,.site-footer,.band-signup,#dn-bg,.skip,#route-announcer,.noprint{display:none !important}
body{background:var(--paper)}
.sheet{border:0;padding:0;margin:0;max-width:none}
.sheet::before,.sheet::after{display:none}
.pad{padding:0}
.region,.region-top{padding:0}
@page{margin:16mm}
}
/* RESOURCES_STYLES_END */
/* LEADERSHIP_STYLES_START */
#view-resources .dn-leaders{background:var(--paper);color:var(--ink-900);padding-bottom:var(--space-16)}
#view-resources .dn-lead-head{max-width:1000px;margin-bottom:var(--space-12)}
#view-resources .dn-lead-head h1{font-family:var(--font-display);font-weight:800;font-variation-settings:'wdth' 78;font-size:clamp(2.6rem,6vw,5.5rem);line-height:1.05;letter-spacing:-.03em;margin:var(--space-5) 0;overflow-wrap:break-word}
#view-resources .dn-lead-subtitle{font-size:clamp(1.125rem,2vw,1.5rem);line-height:1.5;color:var(--ink-600);max-width:48ch}
#view-resources .dn-lead-intro,#view-resources .dn-lead-prose{max-width:70ch;font-size:1.0625rem;line-height:1.75}
#view-resources .dn-lead-intro>p:first-child{font-size:1.25rem;line-height:1.65;border-left:3px solid var(--maroon-700);padding-left:var(--space-6)}
#view-resources .dn-leaders p{margin:0 0 var(--space-5)}
#view-resources .dn-leaders h2{font-family:var(--font-display);font-size:1.5rem;line-height:1.25;letter-spacing:-.015em;margin:var(--space-10) 0 var(--space-5)}
#view-resources .dn-leaders li{margin-bottom:var(--space-3)}
#view-resources .dn-leaders a{color:var(--ink-900);text-decoration-thickness:1px;text-underline-offset:4px}
#view-resources .dn-leaders a:hover{color:var(--maroon-700)}
#view-resources .dn-leaders a:focus-visible,#view-resources .dn-leaders button:focus-visible{outline:2px solid var(--maroon-500);outline-offset:4px}
#view-resources .dn-lead-section{margin-top:var(--space-16)}
#view-resources .dn-lead-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--ink-900)}
#view-resources a.dn-lead-card{display:block;text-decoration:none;border:0;border-bottom:1px solid var(--neutral-200);padding:var(--space-8);min-width:0}
#view-resources a.dn-lead-card:nth-child(odd){border-right:1px solid var(--neutral-200);padding-left:0}
#view-resources .dn-lead-card h3{font-family:var(--font-display);font-size:1.5rem;font-weight:700;line-height:1.2;margin:var(--space-4) 0}
#view-resources .dn-lead-card p{font-size:1rem;line-height:1.6;color:var(--ink-600);max-width:48ch}
#view-resources .dn-lead-card-label{font-size:.875rem;text-decoration:underline;text-underline-offset:4px}
#view-resources a.dn-lead-card:hover{background:var(--neutral-50)}
#view-resources .dn-lead-layout{display:grid;grid-template-columns:minmax(180px,.65fr) minmax(0,2fr);gap:var(--space-16)}
#view-resources .dn-lead-rail nav{display:grid;gap:var(--space-4)}
#view-resources .dn-lead-rail a{font-size:.875rem;line-height:1.5;text-decoration:none;border-bottom:1px solid var(--neutral-200);padding-bottom:var(--space-3)}
#view-resources .dn-lead-rail a[aria-current]{font-weight:700;border-bottom:2px solid var(--ink-900)}
#view-resources .dn-lead-tool{padding:var(--space-8);margin-top:var(--space-12);background:var(--neutral-50);border:1px solid var(--neutral-200);border-radius:6px}
#view-resources .dn-lead-tool h2{margin-top:0}
#view-resources .dn-source-note,#view-resources .dn-external-note{font-size:.875rem;line-height:1.6;color:var(--ink-600)}
#view-resources .dn-lead-sources{max-width:70ch;border-top:1px solid var(--neutral-200);margin-top:var(--space-16);padding-top:var(--space-5);font-size:1rem;line-height:1.7}
#view-resources .dn-lead-sheet-list{list-style:none;padding:0;max-width:75ch;border-top:1px solid var(--neutral-200)}
#view-resources .dn-lead-sheet-list li{display:flex;justify-content:space-between;gap:var(--space-5);padding:var(--space-5) 0;border-bottom:1px solid var(--neutral-200);margin:0}
#view-resources .dn-lead-sheet-list span{color:var(--ink-600);font-size:.875rem}
#view-resources .dn-lead-print{margin:var(--space-8) 0}
#view-resources .dn-lead-print button{background:var(--maroon-700);color:var(--paper);border:0;border-radius:6px;padding:var(--space-4) var(--space-6);font:inherit;cursor:pointer}
#view-resources .dn-lead-print p{font-size:.875rem;margin-top:var(--space-4)}
#view-resources .dn-lead-sheet{max-width:950px;margin:auto}
#view-resources .dn-lead-question{break-inside:avoid;margin-bottom:var(--space-8)}
#view-resources .dn-lead-question h2{font-size:1.125rem;margin-top:0}
#view-resources .dn-lead-question h2 span{font-size:.875rem;color:var(--ink-600);margin-right:var(--space-3)}
#view-resources .dn-lead-answer{height:64px;border-top:1px solid var(--neutral-200);border-bottom:1px solid var(--neutral-200);margin-top:var(--space-4)}
#view-resources .dn-lead-sheet-credit{font-size:.875rem;color:var(--ink-600)}
#view-resources .dn-lead-promo{border-top:1px solid var(--ink-900);border-bottom:1px solid var(--neutral-200);padding-top:var(--space-10);padding-bottom:var(--space-10)}
#view-resources .dn-lead-promo h2{font-family:var(--font-display);font-size:clamp(2rem,4vw,3rem);font-weight:800;line-height:1.1;margin:var(--space-4) 0}
#view-resources .dn-lead-promo>p:not(.t-label){max-width:65ch;line-height:1.7;margin-bottom:var(--space-5)}
@media(max-width:760px){
#view-resources .dn-lead-grid,#view-resources .dn-lead-layout{grid-template-columns:1fr;gap:0}
#view-resources a.dn-lead-card,#view-resources a.dn-lead-card:nth-child(odd){border-right:0;padding:var(--space-6) 0}
#view-resources .dn-lead-rail{order:2;margin-top:var(--space-10);margin-bottom:var(--space-10)}
#view-resources .dn-lead-rail nav{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--space-5)}
#view-resources .dn-lead-sheet-list li{flex-direction:column;gap:var(--space-2)}
#view-resources .dn-lead-tool{padding:var(--space-5)}
}
@media print{
#view-resources .atlas-return{display:none!important}
#view-resources .dn-lead-sheet{max-width:none;font-size:10pt;line-height:1.35}
#view-resources .dn-lead-sheet .dn-lead-head{margin-bottom:5mm}
#view-resources .dn-lead-sheet .dn-lead-head h1{font-size:24pt;margin:2mm 0}
#view-resources .dn-lead-sheet .dn-lead-subtitle{font-size:11pt}
#view-resources .dn-lead-sheet p{margin-bottom:2mm}
#view-resources .dn-lead-question{margin-bottom:4mm}
#view-resources .dn-lead-question h2{font-size:11pt;margin-bottom:2mm}
#view-resources .dn-lead-answer{height:12mm;margin-top:2mm}
#view-resources .dn-lead-sheet-credit{font-size:9pt}
}
/* LEADERSHIP_STYLES_END */
/* PRACTICAL_GUIDES_START */
#view-resources .dn-guide-page{max-width:1100px;margin:auto}
#view-resources .dn-guide-head{margin-bottom:var(--space-8)}
#view-resources .dn-guide-head h1{font-family:var(--font-display);font-size:clamp(2.25rem,5vw,4rem);line-height:1.04;letter-spacing:-.02em;max-width:22ch;margin:var(--space-5) 0;font-variation-settings:'wdth' 78}
#view-resources .dn-guide-intro{max-width:65ch;font-size:1.1875rem;line-height:1.62;margin-bottom:var(--space-6)}
#view-resources .dn-guide-credit{max-width:74ch;font-size:.875rem;line-height:1.5;color:var(--ink-600);margin-bottom:var(--space-8)}
#view-resources .dn-guide-copy{max-width:70ch;margin:var(--space-12) 0}
#view-resources .dn-guide-copy p{font-size:1.0625rem;line-height:1.75;margin:0 0 var(--space-6)}
#view-resources .dn-guide-copy h2,#view-resources .dn-guide-worksheet h2,#view-resources .dn-guide-related h2{font-size:1.5rem;line-height:1.2;margin:var(--space-8) 0 var(--space-5)}
#view-resources .dn-guide-catalogue{display:grid;gap:var(--space-6);margin-top:var(--space-8)}
#view-resources .dn-guide-catalogue>a{display:block;border:1px solid var(--neutral-200);border-radius:6px;padding:var(--space-8);text-decoration:none;color:var(--ink-900)}
#view-resources .dn-guide-page a:focus-visible,#view-resources .dn-guide-page button:focus-visible{outline:2px solid var(--focus-ring);outline-offset:4px}
#view-resources .dn-guide-catalogue>a:hover{background:var(--neutral-50)}
#view-resources .dn-guide-catalogue h2{font-size:1.625rem;line-height:1.16;margin:var(--space-4) 0}
#view-resources .dn-guide-catalogue p{max-width:70ch;line-height:1.62;margin-bottom:var(--space-5)}
#view-resources .dn-guide-action{font-size:.875rem;text-decoration:underline;text-underline-offset:4px}
#view-resources .dn-guide-worksheet{border-top:2px solid var(--ink-900);padding-top:var(--space-8);max-width:74ch}
#view-resources .dn-guide-worksheet>h2{margin-top:var(--space-4)}
#view-resources .dn-guide-worksheet ol{padding-left:1.5rem}
#view-resources .dn-guide-worksheet li{padding-left:var(--space-3);margin:var(--space-6) 0;break-inside:avoid}
#view-resources .dn-guide-answer{height:64px;border-bottom:1px solid var(--neutral-300)}
#view-resources .dn-guide-related{margin-top:var(--space-8)}
#view-resources .dn-guide-related li{margin:var(--space-4) 0}
@media(max-width:600px){#view-resources .dn-guide-catalogue>a{padding:var(--space-6)}#view-resources .dn-guide-page .pager{flex-direction:column;align-items:flex-start;gap:var(--space-6)}#view-resources .dn-guide-page .btn{white-space:normal;text-align:left}#view-resources .dn-guide-head h1{overflow-wrap:break-word}}
@media print{#view-resources .dn-guide-page{max-width:none;padding:0;font-size:11pt}#view-resources .dn-guide-head h1{font-size:26pt}#view-resources .dn-guide-copy{max-width:none;margin:8mm 0}#view-resources .dn-guide-copy p{font-size:11pt;line-height:1.5}#view-resources .dn-guide-copy h2{break-after:avoid}#view-resources .dn-guide-worksheet{break-before:page;max-width:none}#view-resources .dn-guide-answer{height:15mm}#view-resources .dn-guide-credit{margin-bottom:4mm}}
/* PRACTICAL_GUIDES_END */
/* RESOURCE_DIRECTORY_STYLES_START */
#view-resources .dn-resource-directory{padding-bottom:var(--space-16)}
#view-resources .dn-resource-directory-head{max-width:760px;margin-bottom:var(--space-10)}
#view-resources .dn-resource-directory h1{font:800 clamp(3rem,6vw,5rem)/1.05 var(--font-display);letter-spacing:-.03em;margin:var(--space-4) 0}
#view-resources .dn-resource-directory-head>p:last-child{font-size:1.1875rem;line-height:1.6;max-width:52ch;margin-top:var(--space-5)}
#view-resources .dn-resource-section-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-8)}
#view-resources .dn-resource-section-card{display:flex;flex-direction:column;padding:var(--space-8);border:1px solid var(--neutral-200);border-top:3px solid var(--ink-900);border-radius:6px;background:var(--paper);color:var(--ink-900);text-decoration:none;min-width:0}
#view-resources .dn-resource-section-card h2{font-family:var(--font-display);font-size:clamp(1.75rem,3vw,2.5rem);font-weight:800;line-height:1.1;letter-spacing:-.02em;margin:var(--space-5) 0}
#view-resources .dn-resource-section-card>p{font-size:1rem;line-height:1.65;color:var(--ink-600);margin-bottom:var(--space-6)}
#view-resources .dn-resource-section-detail{margin-top:auto;padding-top:var(--space-5);border-top:1px solid var(--neutral-200);font-size:.875rem;line-height:1.6}
#view-resources .dn-resource-section-detail p{color:var(--ink-600);margin:var(--space-2) 0 var(--space-6)}
#view-resources .dn-resource-section-action{font-size:1rem;font-weight:600;text-decoration:underline;text-underline-offset:5px}
#view-resources .dn-resource-section-card:hover{border-color:var(--ink-600)}
#view-resources .dn-resource-section-card:hover .dn-resource-section-action{color:var(--maroon-700)}
#view-resources .dn-resource-section-card:focus-visible,#view-resources .dn-resource-sections a:focus-visible{outline:2px solid var(--maroon-500);outline-offset:4px}
#view-resources .dn-resource-sections{display:flex;gap:var(--space-6);flex-wrap:wrap;padding-top:var(--space-6);padding-bottom:var(--space-5);border-bottom:1px solid var(--neutral-200);background:var(--paper)}
#view-resources .dn-resource-sections a{font-size:.875rem;line-height:1.5;color:var(--ink-600);text-decoration:none;border:0;padding:var(--space-2) 0}
#view-resources .dn-resource-sections a[aria-current]{color:var(--ink-900);font-weight:700;border-bottom:2px solid var(--maroon-700)}
@media(max-width:760px){
#view-resources .dn-resource-section-grid{grid-template-columns:1fr;gap:var(--space-6)}
#view-resources .dn-resource-section-card{padding:var(--space-6)}
#view-resources .dn-resource-sections{gap:var(--space-3) var(--space-5)}
}
/* RESOURCE_DIRECTORY_STYLES_END */
.dn-connection-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--space-8);list-style:none;padding:0;margin:var(--space-8) 0;}
@media print{.dn-connections{display:none;}}
/* Article collections: imagery and reading share the existing editorial grid. */
.dn-collections-intro{padding:clamp(3rem,6vw,6rem) 0 2.5rem;}
.dn-collections-intro h1{font-size:clamp(2.5rem,5vw,5rem);max-width:20ch;margin:1rem 0 1.5rem;}
.dn-collections-intro .t-lede{max-width:62ch;}
.dn-collections-list{padding-top:0;}
.dn-collection-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2rem;align-items:start;}
.dn-collection-card{display:block;color:var(--ink-900);border:0;}
.dn-collection-image{overflow:hidden;aspect-ratio:3/2;background:var(--neutral-150);}
.dn-collection-image img,.dn-collection-hero img{display:block;width:100%;height:100%;object-fit:cover;}
.dn-collection-copy{padding:1.5rem 0;border-top:2px solid var(--ink-900);margin-top:1rem;}
.dn-collection-copy h2{font-family:var(--font-display);font-size:clamp(1.6rem,2.4vw,2.4rem);line-height:1.12;letter-spacing:-.04em;margin:.8rem 0 1rem;}
.dn-collection-copy p{font-size:1rem;line-height:1.65;color:var(--ink-700);margin:0 0 1.5rem;}
.dn-collection-card:hover h2,.dn-collection-card:focus-visible h2{color:var(--maroon-700);}
.dn-collection-card:focus-visible{outline:3px solid var(--focus-ring);outline-offset:8px;}
.dn-collection-header{padding:clamp(2rem,4vw,4rem) 0;}
.dn-collection-heading{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,5rem);align-items:center;margin-top:2.5rem;}
.dn-collection-heading h1{font-size:clamp(2.5rem,5vw,5rem);margin:1rem 0 1.5rem;overflow-wrap:break-word;}
.dn-collection-hero{aspect-ratio:3/2;overflow:hidden;}
.dn-collection-cover{background:var(--paper);}
.dn-collection-cover img{object-fit:contain;}
.dn-collection-hero.dn-collection-cover{aspect-ratio:1051/1496;width:min(100%,24rem);max-height:none;justify-self:center;}
.dn-collection-reading{padding-top:0;}
.dn-collection-empty{border-top:1px solid var(--ink-900);padding:2.5rem 0;max-width:52rem;}
.dn-collection-empty h2{margin:1rem 0;}.dn-collection-empty .link{display:inline-block;margin-top:1.5rem;}
@media(max-width:900px){.dn-collection-grid{grid-template-columns:1fr;gap:2rem;}.dn-collection-card{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;}.dn-collection-copy{margin:0;padding-top:1rem;}.dn-collection-heading{grid-template-columns:1fr;}.dn-collection-hero{max-height:28rem;}}
@media(max-width:560px){.dn-collection-card{display:block;}.dn-collection-copy{margin-top:1rem;}.dn-collection-grid{gap:2.5rem;}.dn-collections-intro h1 br{display:none;}}
/* Complete theme catalogues extend the featured map without crowding its nodes. */
.atlas-library[hidden],.atlas-browse[hidden]{display:none}
.atlas-browse{display:block;width:fit-content;margin:1.5rem auto 0;font-size:1rem}
.atlas-library{padding-top:3rem;padding-bottom:4rem;scroll-margin-top:7rem}
.atlas-library-header{display:flex;align-items:end;justify-content:space-between;gap:1.5rem;border-top:1px solid var(--ink-900);padding-top:1.5rem;margin-bottom:2rem}
.atlas-library-header h2{font-family:var(--font-display);font-size:clamp(2rem,3vw,3rem);margin:.75rem 0 0}
.atlas-library-header p{color:var(--ink-600);margin:0;white-space:nowrap}
.atlas-library-group{display:grid;grid-template-columns:minmax(9rem,1fr) minmax(0,3fr);gap:2rem;padding:2rem 0;border-top:1px solid var(--border-subtle)}
.atlas-library-group h3{font-size:1.25rem;margin:0}.atlas-library-group h3 span{display:block;font-family:var(--font-body);font-size:.875rem;font-weight:400;color:var(--ink-600);margin-top:.5rem}
.atlas-library-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2rem;list-style:none;margin:0;padding:0}
.atlas-library-list>li{min-width:0;padding:0 0 1.5rem;border-bottom:1px solid var(--border-subtle)}
.atlas-library-kind{font-size:.875rem;color:var(--ink-600)}
.atlas-library-list h4{font-size:1.25rem;line-height:1.3;margin:.6rem 0}.atlas-library-list h4 a{display:block;color:var(--ink-900);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em}.atlas-library-list h4 a:hover{color:var(--maroon-700)}
.atlas-library-list p{font-size:1rem;line-height:1.6;margin:0;color:var(--ink-600)}
.atlas-resource-links{margin-top:1rem;font-size:1rem}.atlas-resource-links summary{cursor:pointer;padding:.5rem 0;line-height:1.5}.atlas-resource-links ul{padding-left:1.2rem;margin:.5rem 0 0}.atlas-resource-links li{padding:.4rem 0}.atlas-resource-links a{display:block;color:var(--ink-900);text-decoration:underline;text-underline-offset:.2em;padding:.25rem 0}
.atlas-library a:focus-visible,.atlas-resource-links summary:focus-visible{outline:2px solid var(--maroon-500);outline-offset:4px}
@media(max-width:900px){.atlas-library-group{grid-template-columns:minmax(0,1fr);gap:1.5rem}.atlas-library-group h3 span{display:inline;margin-left:.75rem}}
@media(max-width:600px){.atlas-library-header{display:block}.atlas-library-header p{margin-top:1rem}.atlas-library-list{grid-template-columns:minmax(0,1fr)}.atlas-library{padding-top:2rem}.atlas-library-list h4{overflow-wrap:anywhere}}
.dn-collection-intro-copy{max-width:70ch;margin-inline:auto;}
.dn-collection-intro-copy h2{margin-bottom:var(--space-6);}
.dn-collection-intro-copy p{font-size:1.125rem;line-height:1.75;margin:0 0 1.4em;}
/* CHANGE_THE_VIEW_STYLES_START */
#view-map{background:var(--paper)}
.explore-intro{padding-top:3rem;padding-bottom:4rem}
.explore-intro h1{font-family:var(--font-display,Archivo,sans-serif);font-size:clamp(2.8rem,5.5vw,5rem);line-height:1.04;max-width:14ch;margin:1rem 0 1.5rem}
.explore-intro h1 span{display:block;margin-left:32px}
.explore-intro>p{max-width:42rem;font-size:1.125rem;color:var(--ink-600)}
.explore-moments{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 2rem;margin:2.5rem 0}
.explore-moments button{display:flex;gap:1.125rem;align-items:baseline;background:none;border:0;border-top:1px solid var(--border-subtle);padding:1.4rem 0;min-height:6rem;text-align:left;color:var(--ink-900);font:600 1.45rem/1.3 Archivo,sans-serif;cursor:pointer}
.explore-number{font:400 .75rem/1.5 'Public Sans',sans-serif;color:var(--ink-600)}
.explore-moments button[aria-pressed=true]{border-top:3px solid var(--maroon-700);padding-top:calc(1.4rem - 2px);color:var(--maroon-700)}
.explore-moments button:hover{background:var(--neutral-50)}
.explore-panel{background:var(--neutral-100);padding:2rem;border-radius:4px}
.explore-perspectives{display:flex;border-bottom:1px solid var(--border-subtle);margin:1.5rem 0}
.explore-perspectives button{flex:1;background:none;border:0;border-bottom:3px solid transparent;padding:1rem .5rem;font:inherit;text-align:center;color:var(--ink-900);cursor:pointer}
.explore-perspectives button[aria-pressed=true]{border-color:var(--maroon-700);color:var(--maroon-700);font-weight:600}
#explore-question{font:700 clamp(1.75rem,3.7vw,2.75rem)/1.18 Archivo,sans-serif;letter-spacing:-.025em;margin:1.75rem 0;max-width:24ch}
.explore-help,.explore-themes{display:flex;gap:.5rem;flex-wrap:wrap;margin:1.75rem 0}
.explore-help button,.explore-themes button{background:none;border:1px solid var(--neutral-500);border-radius:4px;padding:.8rem 1.1rem;min-height:44px;color:var(--ink-900);font:inherit;font-size:.875rem;cursor:pointer}
.explore-help button[aria-pressed=true],.explore-themes button[aria-pressed=true]{background:var(--ink-900);color:var(--paper);border-color:var(--ink-900)}
.explore-results{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:2rem;border-top:1px solid var(--border-subtle);padding-top:1.75rem}
.explore-card{min-width:0}
.explore-card+.explore-card{padding-left:1.75rem;border-left:1px solid var(--border-subtle)}
.explore-card h3{font:700 1.55rem/1.2 Archivo,sans-serif;letter-spacing:-.02em;margin:1rem 0}
.explore-card p{color:var(--ink-600);margin:1rem 0}
.explore-card a{display:inline-block;min-height:44px;padding:.4rem 0}
.explore-latest{border-top:1px solid var(--border-subtle);margin-top:1.5rem;padding-top:.5rem}
.explore-latest summary,.explore-browse>summary{cursor:pointer;min-height:44px;padding:.8rem 0}
.explore-latest ul{padding-left:1.2rem}.explore-latest a{display:inline-block;padding:.6rem 0;text-decoration:underline;text-underline-offset:.2em}
.explore-browse{border-top:1px solid var(--border-subtle);margin-top:3rem;padding-top:1rem}
.explore-browse>summary{font-weight:600;font-size:1.125rem}
.explore-browse .atlas-library{margin-top:1rem;padding-top:1.5rem}
#explore-legacy{margin-top:2rem;border:1px solid var(--border-subtle);padding:1.5rem;border-radius:4px}#explore-legacy[hidden]{display:none}
.atlas-return{padding-top:2rem;padding-bottom:2rem}
#view-map button:focus-visible,#view-map summary:focus-visible{outline:2px solid var(--maroon-500);outline-offset:3px}
@media(max-width:700px){.explore-intro{padding-top:2rem}.explore-moments,.explore-results{grid-template-columns:minmax(0,1fr)}.explore-moments{margin:2rem 0}.explore-moments button{font-size:1.25rem;min-height:0;padding:1.1rem 0}.explore-moments button[aria-pressed=true]{padding-top:calc(1.1rem - 2px)}.explore-panel{padding:1.5rem 1.1rem}.explore-perspectives button{font-size:.875rem;padding:.85rem .3rem}.explore-card+.explore-card{padding:1.5rem 0 0;border-left:0;border-top:1px solid var(--border-subtle)}.explore-intro h1 span{margin-left:14px}}
@media(prefers-reduced-motion:no-preference){#view-map button{transition:background .16s,color .16s,border-color .16s}}
/* CHANGE_THE_VIEW_STYLES_END */
/* SECTION_PHOTOGRAPHY_START */
.dn-photo-hero{position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:center;min-height:640px;padding:80px 0 96px;background:var(--paper);color:var(--ink-900)}
.dn-photo-art{position:absolute;inset:0 0 0 27%;z-index:-2;pointer-events:none}
.dn-photo-art img{display:block;width:100%;height:100%;object-fit:cover;object-position:78% center}
.dn-photo-hero:after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(90deg,var(--paper) 0%,var(--paper) 31%,rgba(251,250,246,.96) 40%,rgba(251,250,246,.45) 54%,rgba(251,250,246,0) 69%),linear-gradient(0deg,var(--paper),rgba(251,250,246,0) 19%)}
.dn-photo-hero>.wrap{width:100%;position:relative}
.dn-photo-hero>.wrap.cols{display:block}
.dn-photo-hero>.wrap>*{max-width:47%}
.dn-photo-hero>.wrap.cols>div+div{margin-top:32px}
.dn-photo-hero h1{font-family:var(--font-display);font-size:clamp(2.5rem,4.4vw,4.6rem);font-weight:800;line-height:1.04;letter-spacing:-.03em;margin:20px 0 24px;max-width:17ch}
.dn-photo-hero .t-lede{font-size:1.125rem;line-height:1.62;max-width:42ch;color:var(--ink-600)}
.dn-photo-explore h1 span{display:block;margin-left:32px}
.dn-photo-explore .dn-photo-art{left:25%}
.dn-photo-explore .dn-photo-art img{object-position:72% center}
#view-resources .dn-photo-hero h1{margin:20px 0 24px}
@media(max-width:900px){
.dn-photo-hero{min-height:0;display:block;padding:48px 0 0}
.dn-photo-hero>.wrap>*,.dn-photo-hero>.wrap.cols>div{max-width:100%}
.dn-photo-hero h1{font-size:clamp(2.5rem,7.5vw,4rem)}
.dn-photo-hero>.wrap{padding-bottom:24px}
.dn-photo-art{position:relative;inset:auto;z-index:0;height:clamp(260px,65vw,440px);margin-top:16px;order:2}
.dn-photo-hero{display:flex;flex-direction:column;align-items:stretch}
.dn-photo-hero>.wrap{order:1}
.dn-photo-art img{object-position:80% 50%;width:100%;height:100%}
.dn-photo-hero:after{display:none}
.dn-photo-art:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,var(--paper),rgba(251,250,246,0) 18%,rgba(251,250,246,0) 84%,var(--paper))}
.dn-photo-explore .dn-photo-art{left:auto}
.dn-photo-explore .dn-photo-art img{object-position:80% center}
}
@media print{.dn-photo-art{display:none}.dn-photo-hero{min-height:0;padding:0;display:block}.dn-photo-hero:after{display:none}.dn-photo-hero>.wrap>*{max-width:none}}
/* SECTION_PHOTOGRAPHY_END */
/* The supplied cover sits within a branded editorial book display. */
#view-collection-somehow-i-manage .dn-collection-heading{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,5vw,5rem);}
.dn-collection-hero.dn-book-stage{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:2.5rem;width:100%;max-width:32rem;aspect-ratio:auto;margin:0;padding:1.5rem 1.75rem;background:var(--maroon-700);color:var(--paper);overflow:hidden;}
.dn-book-stage-label{display:flex;justify-content:space-between;width:100%;gap:1rem;padding-bottom:1rem;border-bottom:1px solid currentColor;font-size:.625rem;letter-spacing:.14em;text-transform:uppercase;line-height:1.5;}
.dn-book-object{position:relative;width:66%;margin:.5rem 0 1rem;isolation:isolate;}
.dn-book-object::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--maroon-900);transform:translate(14px,14px);}
.dn-book-object::after{content:"";position:absolute;inset:0 auto 0 0;width:6px;border-right:1px solid var(--neutral-200);background:linear-gradient(90deg,var(--neutral-200),transparent);opacity:.6;pointer-events:none;}
.dn-book-stage .dn-book-object img{display:block;width:100%;height:auto;object-fit:contain;}
.dn-book-stage figcaption{display:flex;align-items:end;justify-content:space-between;gap:1rem;width:100%;padding-top:1rem;border-top:1px solid currentColor;}
.dn-book-stage figcaption span:first-child{font-family:var(--font-display);font-size:clamp(1.125rem,2vw,1.5rem);line-height:1.12;font-weight:700;letter-spacing:-.025em;}
.dn-book-stage figcaption span:last-child{font-size:.6875rem;line-height:1.5;text-align:right;}
.dn-collection-image.dn-collection-cover{background:var(--maroon-700);padding:1.5rem;}
.dn-collection-image.dn-collection-cover img{filter:drop-shadow(8px 8px 0 var(--maroon-900));}
@media(max-width:900px){#view-collection-somehow-i-manage .dn-collection-heading{grid-template-columns:1fr;} .dn-collection-hero.dn-book-stage{max-height:none;max-width:30rem;}}
@media(max-width:560px){.dn-collection-hero.dn-book-stage{padding:1.25rem;gap:1.75rem;}.dn-book-object{width:65%;}.dn-book-stage figcaption span:last-child{font-size:.625rem;}}
/* Coaching offers: three editorial sections, with one shared enquiry. */
#view-coaching .dn-coaching-overview{padding-bottom:var(--space-8);}
#view-coaching .dn-coaching-overview nav{display:flex;flex-wrap:wrap;gap:16px 32px;border-block:1px solid var(--neutral-300);padding:24px 0;}
#view-coaching .dn-coaching-overview a{color:var(--ink-900);font-size:1rem;line-height:1.6;text-underline-offset:4px;}
#view-coaching .dn-coaching-overview>p{font-size:.875rem;line-height:1.65;color:var(--ink-600);max-width:72ch;margin-top:24px;}
#view-coaching .dn-coaching-offer{scroll-margin-top:100px;}
#view-coaching .dn-coaching-offer+.dn-coaching-offer{border-top:1px solid var(--neutral-200);}
#view-coaching .dn-coaching-offer h2{margin:24px 0;max-width:19ch;}
#view-coaching .dn-coaching-offer h3{margin:32px 0 16px;}
#view-coaching .dn-coaching-list{padding-left:1.2em;margin:16px 0 24px;font-size:1rem;line-height:1.7;}
#view-coaching .dn-coaching-list li+li{margin-top:8px;}
#view-coaching .dn-coaching-price{border-top:1px solid var(--neutral-300);padding-top:24px;margin:24px 0;}
#view-coaching .dn-coaching-price p{font-size:1rem;line-height:1.7;margin:0 0 12px;}
#view-coaching .dn-coaching-price p:first-child strong{font-family:var(--font-display);font-size:2rem;line-height:1.2;}
#view-coaching .dn-coaching-recording{margin:32px 0 0;min-width:0;}
#view-coaching .dn-coaching-recording figcaption{display:flex;flex-wrap:wrap;gap:12px 24px;justify-content:space-between;margin-top:16px;font-size:.875rem;line-height:1.5;}
#view-coaching .dn-coaching-recording figcaption span{flex:1 1 220px;}
#view-coaching .dn-coaching-recording a{text-underline-offset:4px;}
#view-coaching .dn-coaching-workshop{margin-top:40px;}
#view-coaching .dn-coaching-workshop+.dn-coaching-workshop{border-top:1px solid var(--neutral-300);padding-top:16px;}
#view-coaching .dn-coaching-workshop>p{font-size:1rem;line-height:1.7;margin-bottom:16px;}
#view-coaching select{width:100%;min-width:0;font:inherit;font-size:1rem;line-height:1.5;padding:12px;border:1px solid var(--neutral-400);border-radius:6px;background:var(--paper);color:var(--ink-900);}
#view-coaching select:focus-visible{outline:2px solid var(--maroon-500);outline-offset:3px;}
.dn-series-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2rem;margin-top:2rem}.dn-series-card{display:flex;flex-direction:column;gap:1rem;border-top:1px solid currentColor;padding-top:1.5rem;text-decoration:none;color:inherit}.dn-series-card .link{margin-top:auto}.dn-series-intro{max-width:54rem;margin-top:3rem}.dn-series-intro h1{margin:1rem 0}.dn-series-intro .empty{margin-top:3rem}.dn-collections-list .dn-collection-grid{grid-template-columns:repeat(2,minmax(0,1fr))}@media(max-width:900px){.dn-series-grid,.dn-collections-list .dn-collection-grid{grid-template-columns:1fr}}