/* ===================================================================== THROUGHLINE — Design System (canonical core) Tokens + components. Link this from any page, then use the classes. Requires the Google Fonts in the page (see README). ===================================================================== */ /* ===================================================================== THROUGHLINE — DESIGN SYSTEM v4 Improvements over v3 (direction preserved, not redesigned): 1. Real CSS-variable token system (v3 documented tokens but shipped inline styles). 2. The throughline is now the page SPINE — fixed wayfinding HUD with scroll progress + clickable waypoints, plus in-document section nodes. 3. Committed WARM treatment scoped to human zones (About/mentoring) — no cream body. 4. New Operator (outcome-evidence) and Builder (process/artifact) patterns. 5. Numbered markers reserved for the genuinely sequential Approach; varied openers. 6. Contrast: small mono labels darkened to clear AA. ===================================================================== */ /* ---------- TOKENS ---------- */ :root{ /* Cool system — default / work / strategy */ --canvas: oklch(0.98 0.005 255); --surface: oklch(0.995 0.002 255); --ink: oklch(0.19 0.025 275); --ink-soft: oklch(0.40 0.02 272); --muted: oklch(0.46 0.02 265); /* darkened from v3 0.58 → clears AA at small sizes */ --hairline: oklch(0.90 0.008 255); /* The brights — bold, color-blocked, never timid */ --signal: oklch(0.61 0.245 350); /* magenta — primary action, the line's midpoint */ --signal-deep:oklch(0.53 0.23 350); --cobalt: oklch(0.54 0.185 256); /* depth — "ambiguity" start */ --cobalt-deep:oklch(0.46 0.17 256); --clarity: oklch(0.86 0.17 100); /* yellow — "clarity" endpoint */ --violet: oklch(0.55 0.24 305); /* rare cool pop, strategy zones only */ /* Brand-emphasis "bookend" zone — hero header + contact footer + mentoring accent. Magenta-family WINE: a deep relative of --signal magenta (hue ~352), so the bookends read as "the system, gone deep," not a foreign guest. (Was oxblood hue 18; retired 2026-06-23 — two warm-red drenches clashed on a single-page scroll. About is now a LIGHT section, not a drench — see .human.) The name stays --warm for continuity. */ --warm: oklch(0.39 0.15 352); /* deep wine — hero + contact bookends, light text */ --warm-deep: oklch(0.33 0.14 352); /* deeper wine — borders / hover */ --warm-bright:oklch(0.60 0.22 352); /* bright wine-rose accent: links, nodes */ --paper: oklch(0.985 0.010 352); /* faint wine SURFACE tint (never the body bg) */ --ink-warm: oklch(0.26 0.07 352); /* deep wine ink for text on light */ /* Fixed text pairings on color */ --on-cobalt: oklch(0.99 0.005 255); --on-cobalt-soft: oklch(0.965 0.022 256); /* brightened: clears AA (4.5) on --cobalt at body sizes */ --on-warm: oklch(0.97 0.015 352); --on-warm-soft: oklch(0.90 0.045 352); --on-yellow: var(--ink); /* Spacing — 8px base */ --s-1:4px; --s-2:8px; --s-3:16px; --s-4:24px; --s-5:40px; --s-6:64px; --s-7:96px; --s-8:128px; --frame:1120px; --gutter:40px; --rail:34px; --r-btn:4px; --r-card:8px; /* Motion */ --ease-out:cubic-bezier(0.16,1,0.3,1); /* ease-out-expo */ --t-fast:.16s; --t-mid:.32s; /* Z-index scale (semantic, never 9999) */ --z-base:0; --z-spine:5; --z-node:6; --z-hud:40; --z-nav:50; } *{box-sizing:border-box;} html{scroll-behavior:smooth;} body{ margin:0; background:var(--canvas); color:var(--ink); font-family:'Hanken Grotesk',sans-serif; font-size:1rem; line-height:1.6; /* rem, not px — respects user zoom/settings */ font-kerning:normal; font-optical-sizing:auto; /* intelligence lives in the details */ -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } /* ---------- TYPE PRIMITIVES — the type ramp IS the identity ---------- Committed scale, ~1.3 ratio, big leaps between levels (clarity). Serif carries voice; italic serif carries warmth; numbers are tabular (credibility). */ .display{font-family:'Fraunces',serif;font-weight:500;line-height:0.9;letter-spacing:-0.02em; font-size:clamp(3rem,6vw,5rem);text-wrap:balance;} h1,.h1{font-family:'Fraunces',serif;font-weight:400;line-height:1.0;letter-spacing:-0.02em; font-size:clamp(2rem,4vw,2.75rem);margin:0;text-wrap:balance;} h2,.h2{font-family:'Fraunces',serif;font-weight:500;line-height:1.02;letter-spacing:-0.028em; font-size:clamp(2.1rem,4.4vw,3rem);margin:0;text-wrap:balance;} .h-sans{font-family:'Hanken Grotesk',sans-serif;font-weight:700;font-size:1.4rem;line-height:1.2;letter-spacing:-0.01em;} .lead{font-size:1.25rem;line-height:1.55;max-width:65ch;text-wrap:pretty;} p{max-width:66ch;text-wrap:pretty;} .meta{font-family:'Spline Sans Mono',monospace;font-size:0.75rem;letter-spacing:0.12em; text-transform:uppercase;color:var(--muted);} em.serif{font-family:'Fraunces',serif;font-style:italic;} .fig,.tok,.src{font-variant-numeric:tabular-nums;} /* aligned, precise numerals */ blockquote,.human__quote{hanging-punctuation:first;} /* optical margin on opening quote */ /* Page-local type roles shared by the portfolio pages. */ :root{ --t-serif-lede: clamp(1.3rem, 1.7vw, 1.5rem); --t-serif-item: 1.25rem; --t-lede: 1.2rem; } body{font-size:1.0625rem;} /* ---------- LAYOUT ---------- */ .frame{max-width:var(--frame);margin:0 auto;padding:0 var(--gutter);} .section{position:relative;padding:var(--s-7) 0;} .section + .section{padding-top:var(--s-6);} @media (max-width:720px){.section{padding:var(--s-6) 0;}} /* Section heading. The fixed spine + the 2px rule carry wayfinding — no per-heading dot. */ .node-head{margin-bottom:var(--s-5);} .section-rule{border:0;border-top:2px solid var(--ink);margin:0 0 var(--s-5);} .section-head{display:flex;align-items:baseline;justify-content:space-between;gap:18px;flex-wrap:wrap;} /* Section eyebrow: quiet sans caps, not a mono micro-label (the mono garnish read as AI scaffolding). */ .section-head .meta{font-family:'Hanken Grotesk',sans-serif;font-weight:700;font-size:0.72rem; letter-spacing:0.07em;text-transform:uppercase;color:var(--muted);} /* Mobile/tablet throughline: a top scroll-progress bar so the metaphor never disappears */ .topbar{position:fixed;top:0;left:0;width:100%;height:3px;z-index:var(--z-nav);background:var(--hairline);} .topbar__fill{height:100%;width:100%;transform-origin:left;transform:scaleX(var(--pf,0)); background:linear-gradient(90deg,var(--cobalt),var(--signal) 55%,var(--clarity)); transition:transform var(--t-mid) var(--ease-out);} @media (min-width:1200px){.topbar{display:none;}} /* Case card lift (was inline handlers) */ .card--lift{cursor:pointer;transition:transform var(--t-fast) var(--ease-out),box-shadow var(--t-fast);} .card--lift:hover{transform:translateY(-4px);box-shadow:8px 8px 0 var(--signal);} /* ===================================================================== THE THROUGHLINE — FIXED WAYFINDING HUD Persistent gradient spine on the left edge. The traversed portion lights; a puck marks "you are here"; waypoints are clickable section nav. Progressive enhancement: line + waypoints are fully visible with no JS. ===================================================================== */ .hud{position:fixed;left:18px;top:14vh;height:72vh;width:40px;z-index:var(--z-hud); display:flex;justify-content:center;} .hud__track{position:relative;width:3px;height:100%;border-radius:2px; background:var(--hairline);overflow:visible;} .hud__fill{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:2px;transform-origin:top; transform:scaleY(var(--pf,0)); background:linear-gradient(180deg,var(--cobalt),var(--signal) 55%,var(--clarity)); transition:transform var(--t-mid) var(--ease-out);} .hud__puck{position:absolute;left:50%;top:var(--progress,0%);width:14px;height:14px;border-radius:50%; transform:translate(-50%,-50%);background:var(--surface); border:2.5px solid var(--signal);box-shadow:0 2px 8px oklch(0.55 0.24 350 / 0.35); transition:top var(--t-mid) var(--ease-out);} .hud__waypoints{position:absolute;inset:0;} .hud__wp{position:absolute;left:50%;transform:translate(-50%,-50%);width:9px;height:9px; border-radius:50%;background:var(--surface);border:2px solid var(--muted);cursor:pointer; padding:0;transition:border-color var(--t-fast),background var(--t-fast),transform var(--t-fast);} .hud__wp::after{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:30px;height:30px;border-radius:50%;} .hud__wp:hover,.hud__wp:focus-visible{border-color:var(--signal);transform:translate(-50%,-50%) scale(1.25);outline:none;} .hud__wp.is-done{background:var(--signal);border-color:var(--signal);} .hud__wp.is-active{border-color:var(--clarity);background:var(--clarity);box-shadow:0 0 0 4px oklch(0.86 0.17 100 / 0.3);} .hud__wp .hud__label{position:absolute;left:18px;top:50%;transform:translateY(-50%);white-space:nowrap; font-family:'Spline Sans Mono',monospace;font-size:10px;letter-spacing:0.08em;text-transform:uppercase; color:var(--ink);background:var(--surface);border:1px solid var(--hairline);border-radius:4px; padding:3px 7px;opacity:0;pointer-events:none;transition:opacity var(--t-fast);} .hud__wp:hover .hud__label,.hud__wp:focus-visible .hud__label{opacity:1;} .hud__caption{position:absolute;left:50%;transform:translateX(-50%);font-family:'Spline Sans Mono',monospace; font-size:9px;letter-spacing:0.12em;text-transform:uppercase;color:var(--muted);} .hud__caption--top{top:-22px;color:var(--cobalt-deep);background:var(--surface); padding:2px 5px;border-radius:3px;transition:color var(--t-fast);} .hud__caption--top.on-light{color:var(--cobalt-deep);} .hud__caption--bot{bottom:-22px;color:var(--warm);background:var(--surface); padding:2px 5px;border-radius:3px;font-weight:500;} /* Show the fixed side HUD only where the page gutter clears its lane (≥1200px). */ @media (max-width:1199px){.hud{display:none;}} /* ---------- MASTHEAD ---------- */ .masthead{position:relative;background:var(--cobalt);overflow:hidden;} .masthead .frame{padding-top:var(--s-6);padding-bottom:var(--s-6);} .kicker{display:flex;align-items:center;gap:10px;font-family:'Spline Sans Mono',monospace;font-size:12px; letter-spacing:0.14em;text-transform:uppercase;color:var(--on-cobalt);margin-bottom:var(--s-4);} .kicker .dot{width:9px;height:9px;border-radius:50%;background:var(--clarity);} .masthead .display{color:var(--on-cobalt);margin-bottom:var(--s-3);} .masthead .lead{color:var(--on-cobalt-soft);} .masthead .lead b{color:var(--on-cobalt);font-weight:600;} .masthead .lead .y{color:var(--clarity);font-weight:700;} /* bold → large-text AA (3:1) for the keyword on cobalt */ /* ---------- PORTFOLIO SHELL ---------- */ .skip{position:absolute;left:8px;top:-48px;background:var(--ink);color:var(--surface); padding:10px 16px;border-radius:0 0 4px 4px;z-index:var(--z-nav);transition:top var(--t-fast);text-decoration:none;} .skip:focus{top:0;} .util{position:sticky;top:0;z-index:var(--z-nav);background:var(--warm); border-bottom:1px solid var(--warm-deep);} .util__in{max-width:var(--frame);margin:0 auto;padding:14px var(--gutter); display:flex;align-items:center;justify-content:space-between;gap:24px;} .util__brand{font-family:'Fraunces',serif;font-size:18px;letter-spacing:-0.01em;color:var(--on-cobalt); text-decoration:none;white-space:nowrap;} .util__nav{display:flex;align-items:center;gap:26px;} .util__nav a{font-family:'Hanken Grotesk';font-weight:600;font-size:13px;color:var(--on-cobalt-soft); text-decoration:none;transition:color var(--t-fast),transform var(--t-fast);} .util__nav a:hover,.util__nav a:focus-visible{color:var(--clarity);} .util__nav .util__cta{background:var(--clarity);color:var(--ink);padding:9px 15px;border-radius:var(--r-btn);font-weight:700;} .util__nav .util__cta:hover,.util__nav .util__cta:focus-visible{color:var(--ink);transform:translateY(-1px);} @media (max-width:760px){ .util__in{align-items:flex-start;} .util__nav{gap:12px;justify-content:flex-end;flex-wrap:wrap;} .util__nav a:not(.util__cta){display:none;} } .hero{position:relative;background:var(--warm);overflow:hidden;isolation:isolate;} .hero__line{position:absolute;inset:0;width:100%;height:100%;z-index:-1;opacity:0.9;} .hero__in{max-width:var(--frame);margin:0 auto;padding:clamp(56px,9vw,118px) var(--gutter) clamp(48px,7vw,88px);} .hero__display{font-family:'Fraunces',serif;font-weight:600;line-height:0.9;letter-spacing:-0.02em; color:var(--on-cobalt);font-size:clamp(2.6rem,6.2vw,5rem);max-width:17ch;margin:0 0 var(--s-4);text-wrap:balance;} .hero__display em{font-family:'Fraunces',serif;font-style:italic;font-weight:600;color:var(--clarity);} .hero__lead{font-family:'Fraunces',serif;font-weight:400;font-size:clamp(1.1rem,1.6vw,1.3rem); line-height:1.4;color:var(--on-cobalt-soft);max-width:46ch;margin:0 0 var(--s-5);text-wrap:pretty;} /* Hero CTA goes "clarity" yellow so it commands on the wine bookend instead of melting into it. */ .hero .btn--primary{background:var(--clarity);color:var(--ink);} .hero .btn--primary:hover{background:oklch(0.90 0.16 100);color:var(--ink);transform:translateY(-1px);} .hero__cta{display:flex;flex-wrap:wrap;gap:14px;align-items:center;} .hero .btn--outline{color:var(--on-cobalt);border-color:var(--on-cobalt);} .hero .btn--outline:hover,.hero .btn--outline:focus-visible{color:var(--ink);} .hero__avail{display:inline-flex;align-items:flex-start;gap:9px;margin:0 0 var(--s-5); font-family:'Hanken Grotesk';font-weight:600;font-size:0.9rem;line-height:1.4;color:var(--on-cobalt); background:oklch(0.86 0.17 100 / 0.13);border:1px solid oklch(0.86 0.17 100 / 0.5); padding:9px 16px;border-radius:14px;} .hero__avail .pip{width:8px;height:8px;margin-top:6px;flex:0 0 auto;border-radius:50%;background:var(--clarity); box-shadow:0 0 0 0 oklch(0.86 0.17 100 / 0.6);animation:pulse 2.6s var(--ease-out) infinite;} @keyframes pulse{ 0%{box-shadow:0 0 0 0 oklch(0.86 0.17 100 / 0.55);} 70%{box-shadow:0 0 0 9px oklch(0.86 0.17 100 / 0);} 100%{box-shadow:0 0 0 0 oklch(0.86 0.17 100 / 0);} } .logos{background:var(--surface);border-bottom:1px solid var(--hairline);} .logos__in{max-width:var(--frame);margin:0 auto;padding:20px var(--gutter); display:flex;align-items:center;flex-wrap:wrap;gap:12px 26px;} .logos__label{font-family:'Spline Sans Mono';font-size:12px;letter-spacing:0.12em;text-transform:uppercase;color:var(--muted);} .logos__row{display:flex;align-items:center;flex-wrap:wrap;gap:18px 30px;} .logo-slot{width:142px;height:42px;display:flex;align-items:center;justify-content:center;background:transparent;} .logo-slot img{max-width:100%;max-height:100%;object-fit:contain;filter:none;opacity:1;mix-blend-mode:multiply;} .logo-word{font-family:'Hanken Grotesk';font-weight:700;font-size:clamp(1rem,1.35vw,1.16rem); letter-spacing:-0.01em;color:var(--ink);} .logo-word--support{font-weight:600;font-size:0.92rem;color:var(--ink-soft);} .intro{padding-top:var(--s-5);max-width:58ch;} .intro .lead{font-size:1rem;line-height:1.68;color:var(--ink);margin:0;} .intro p{font-size:1rem;line-height:1.68;} .intro p + p{margin-top:var(--s-3);color:var(--ink-soft);} /* ---------- EDITORIAL WORK LIST + LOGO / PROOF SLOT ---------- */ .work-intro{color:var(--ink-soft);margin:0 0 var(--s-5);} .worklist{display:flex;flex-direction:column;} .witem{display:grid;grid-template-columns:minmax(0,1fr) 150px;gap:var(--s-5);align-items:center; padding:var(--s-5) 0;border-top:1px solid var(--hairline);color:inherit;} /* Rows without a proof mark leave the right column as clean whitespace (no empty box). */ .witem:first-child{border-top:0;} .witem__main{min-width:0;} .witem__ctx{display:block;font-family:'Hanken Grotesk',sans-serif;font-weight:700;font-size:0.72rem; letter-spacing:0.06em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:8px;} .witem__t{font-family:'Fraunces',serif;font-weight:500;font-size:clamp(1.45rem,2.2vw,1.72rem); line-height:1.1;color:var(--ink);margin:0 0 8px;text-wrap:balance;} .witem__p{margin:0;font-size:1rem;line-height:1.5;color:var(--ink-soft);max-width:60ch;} .witem__p .fig{font-family:'Hanken Grotesk';font-weight:800;color:var(--ink);} .witem__brand{justify-self:end;width:132px;min-height:64px;display:flex;align-items:center;justify-content:center;} .brand-mark{width:132px;min-height:64px;padding:10px 14px;border:1px dashed oklch(0.70 0.012 265); display:flex;align-items:center;justify-content:center;text-align:center;border-radius:var(--r-card); background:oklch(0.98 0.004 255);color:var(--muted);font-family:'Hanken Grotesk';font-weight:700; font-size:0.92rem;text-decoration:none;transition:border-color var(--t-fast),color var(--t-fast),background var(--t-fast),transform var(--t-fast);} .brand-mark img{max-width:100%;max-height:42px;object-fit:contain;filter:grayscale(1) contrast(1.04);opacity:0.82;} .brand-mark--logo{border-color:transparent;background:transparent;} .brand-mark--empty{font-family:'Spline Sans Mono';font-size:10px;letter-spacing:0.1em;text-transform:uppercase; color:var(--muted);line-height:1.35;} a.brand-mark{border-style:solid;color:var(--ink-soft);cursor:pointer;} a.brand-mark::after{content:"↗";font-family:'Spline Sans Mono';font-size:12px;margin-left:7px;color:var(--signal-deep);} a.brand-mark:hover,a.brand-mark:focus-visible{border-color:var(--signal-deep);background:var(--surface);color:var(--signal-deep); transform:translateY(-1px);outline:none;} a.brand-mark:focus-visible{box-shadow:0 0 0 3px oklch(0.54 0.185 256 / 0.35);} .brand-mark--text{font-family:'Spline Sans Mono';font-size:11px;letter-spacing:0.08em;text-transform:uppercase;} @media (max-width:760px){ .witem{grid-template-columns:1fr;gap:var(--s-3);} .witem__brand{justify-self:start;} } /* ---------- EDITORIAL PRINCIPLES ---------- */ .principles{max-width:68ch;} .principle{display:grid;grid-template-columns:minmax(0,0.85fr) minmax(0,1.15fr); gap:var(--s-4) var(--s-5);padding:var(--s-5) 0;border-top:1px solid var(--hairline);align-items:start;} .principle:first-of-type{border-top:0;padding-top:var(--s-2);} .principle__lead{font-family:'Fraunces',serif;font-weight:500;font-size:clamp(1.4rem,1.8vw,1.62rem); line-height:1.22;letter-spacing:-0.012em;margin:0;text-wrap:balance;} /* The punch phrase of each principle, set in magenta — ties the section to the page's magenta lead. */ .principle__lead .hl{color:var(--signal-deep);} .principle p{color:var(--ink-soft);margin:0;} @media (max-width:680px){ .principle{grid-template-columns:1fr;gap:8px;padding:var(--s-4) 0;} } /* ---------- WAYS TO WORK ---------- */ .offers-intro{color:var(--ink-soft);max-width:60ch;margin:0 0 var(--s-5);} .offers{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s-5) var(--s-6);max-width:980px;} .offer{padding:var(--s-4) 0 0;border-top:1px solid var(--hairline); transition:transform var(--t-fast) var(--ease-out);} .offer:hover{transform:translateX(8px);} .offer__t{font-family:'Fraunces',serif;font-weight:500;font-size:1.36rem;line-height:1.12;color:var(--ink); margin:0 0 10px;transition:color var(--t-fast);} .offer:hover .offer__t{color:var(--signal-deep);} .offer__p{margin:0;font-size:0.98rem;line-height:1.5;color:var(--ink-soft);max-width:46ch;} @media (max-width:680px){ .offers{grid-template-columns:1fr;} .offer{padding:var(--s-3) 0 0;} } /* ---------- IDEAS ---------- */ .ideas-intro{color:var(--ink-soft);max-width:62ch;margin:0 0 var(--s-4);} .ideas{display:flex;flex-direction:column;max-width:860px;} .idea{display:flex;align-items:baseline;justify-content:space-between;gap:24px; padding:var(--s-4) 0;border-top:1px solid var(--hairline);text-decoration:none;color:inherit; transition:transform var(--t-fast) var(--ease-out);} .idea:first-child{border-top:0;} .idea:hover{transform:translateX(10px);} .idea__t{font-family:'Fraunces',serif;font-weight:500;font-size:1.36rem;line-height:1.15;color:var(--ink); margin:0;transition:color var(--t-fast);} .idea:hover .idea__t{color:var(--signal-deep);} .idea__meta{display:none;} /* the repeated "Focus" label was mono garnish, not information */ @media (max-width:620px){.idea{align-items:flex-start;flex-direction:column;gap:8px;}} /* Grouped exploration areas — two themes, each a wine-labelled serif list (keeps the slide+magenta hover the flat list used to have). */ .ideas-groups{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-5) var(--s-6);margin-top:var(--s-2);} .idea-group__cat{font-family:'Hanken Grotesk',sans-serif;font-weight:800;font-size:0.78rem; letter-spacing:0.09em;text-transform:uppercase;color:var(--warm);margin:0 0 var(--s-2);} .idea-group__list{list-style:none;margin:0;padding:0;} .idea-group__list li{font-family:'Fraunces',serif;font-weight:500;font-size:1.2rem;line-height:1.25; color:var(--ink);padding:var(--s-3) 0;border-top:1px solid var(--hairline); transition:transform var(--t-fast) var(--ease-out),color var(--t-fast);} .idea-group__list li:first-child{border-top:0;} .idea-group__list li:hover{transform:translateX(8px);color:var(--signal-deep);} @media (max-width:880px){.ideas-groups{grid-template-columns:1fr;gap:var(--s-5);}} /* Recent writing — posts pulled live from the Substack RSS feed (/api/substack), rendered by substack.js. Mirrors the idea-group list idiom: serif titles, slide+signal hover, mono micro-meta. */ .writing{margin-top:var(--s-6);padding-top:var(--s-4);border-top:1px solid var(--hairline);max-width:760px;} .writing__head{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);flex-wrap:wrap;} .writing__cat{font-family:'Hanken Grotesk',sans-serif;font-weight:800;font-size:0.78rem; letter-spacing:0.09em;text-transform:uppercase;color:var(--warm);margin:0;} .writing__subscribe{display:inline-block;font-family:'Hanken Grotesk',sans-serif;font-weight:700; font-size:0.82rem;letter-spacing:0.01em;line-height:1;color:var(--ink);background:var(--clarity); padding:9px 16px;border-radius:var(--r-btn);text-decoration:none; transition:transform var(--t-fast) var(--ease-out);} .writing__subscribe:hover{color:var(--ink);transform:translateY(-1px);} .writing__list{list-style:none;margin:var(--s-2) 0 0;padding:0;} .witem{border-top:1px solid var(--hairline);} .witem:first-child{border-top:0;} .witem__link{display:block;padding:var(--s-2) 0;text-decoration:none;color:inherit; transition:transform var(--t-fast) var(--ease-out);} .witem__link:hover{transform:translateX(8px);} .witem__t{display:block;font-family:'Fraunces',serif;font-weight:500;font-size:1.2rem;line-height:1.25; color:var(--ink);transition:color var(--t-fast);} .witem__link:hover .witem__t{color:var(--signal-deep);} .witem__p{display:block;margin-top:5px;font-size:0.95rem;line-height:1.45;color:var(--ink-soft);max-width:60ch;} .witem__meta{display:block;margin-top:6px;font-family:'Spline Sans Mono',monospace;font-size:0.72rem; letter-spacing:0.04em;text-transform:uppercase;color:var(--muted);} .writing__all{display:inline-block;margin-top:var(--s-3);font-family:'Spline Sans Mono',monospace; font-size:0.74rem;letter-spacing:0.04em;text-transform:uppercase;color:var(--ink-soft); text-decoration:none;transition:color var(--t-fast);} .writing__all:hover{color:var(--signal-deep);} /* ---------- MENTORING ---------- */ .mentor{max-width:760px;} .mentor__eyebrow{color:var(--warm);} .mentor__lead{font-family:'Fraunces',serif;color:var(--warm); font-size:var(--t-serif-lede);line-height:1.22;letter-spacing:-0.015em;margin:0 0 var(--s-4); text-wrap:balance;max-width:34ch;} .mentor p{margin:0;} .mentor p:not(.mentor__lead){color:var(--ink-soft);max-width:60ch;} .mentor p + p{margin-top:var(--s-3);} .mentor__cta{margin-top:var(--s-4);} .mentor__embed{margin-top:var(--s-4);} .mentor__embed img{display:block;width:180px;height:auto;} /* ---------- CONTACT BAND ---------- */ .contact{background:var(--warm);color:var(--on-warm);} .contact__in{max-width:var(--frame);margin:0 auto;padding:var(--s-7) var(--gutter);} .contact__h{font-family:'Fraunces',serif;font-weight:400;font-size:clamp(2rem,4vw,3rem); line-height:1.04;color:var(--on-warm);margin:0 0 var(--s-4);max-width:18ch;text-wrap:balance;} .contact__h em{font-style:italic;color:var(--on-warm);} .contact__copy{color:var(--on-warm-soft);max-width:58ch;margin:0 0 var(--s-4);} .contact__row{display:flex;flex-wrap:wrap;align-items:center;gap:18px;} .contact__mail{font-family:'Fraunces',serif;font-size:1.25rem;color:var(--on-warm);text-decoration:underline; text-decoration-color:var(--clarity);text-underline-offset:5px;text-decoration-thickness:2px;} .foot{max-width:var(--frame);margin:0 auto;padding:24px var(--gutter); display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;} .contact .meta{color:var(--on-warm-soft);} /* ---------- CONTACT FORM (on the wine band) ---------- */ .cform{max-width:600px;margin:var(--s-2) 0 0;} .cform__grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-4);} .field{margin-bottom:var(--s-4);min-width:0;} .cform__grid .field{margin-bottom:0;} .field label{display:block;font-family:'Hanken Grotesk',sans-serif;font-weight:600;font-size:0.92rem; color:var(--on-warm);margin-bottom:7px;} .field__opt{color:var(--on-warm-soft);font-weight:400;} .cform input,.cform select,.cform textarea{ width:100%;font-family:'Hanken Grotesk',sans-serif;font-size:1rem;line-height:1.4;color:var(--ink); background:var(--surface);border:1.5px solid transparent;border-radius:var(--r-card); padding:12px 14px;transition:box-shadow var(--t-fast),border-color var(--t-fast);} .cform textarea{resize:vertical;min-height:120px;} .cform select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--ink-soft) 50%),linear-gradient(135deg,var(--ink-soft) 50%,transparent 50%); background-position:calc(100% - 20px) 1.2em,calc(100% - 14px) 1.2em;background-size:6px 6px,6px 6px;background-repeat:no-repeat;padding-right:38px;} .cform input::placeholder,.cform textarea::placeholder{color:var(--ink-soft);} .cform input:focus-visible,.cform select:focus-visible,.cform textarea:focus-visible{ outline:none;border-color:var(--clarity);box-shadow:0 0 0 3px oklch(0.86 0.17 100 / 0.55);} .cform input.is-invalid,.cform textarea.is-invalid{border-color:oklch(0.78 0.16 35);} .field__err{margin:6px 0 0;font-family:'Hanken Grotesk',sans-serif;font-size:0.85rem;font-weight:600; color:oklch(0.86 0.14 70);min-height:1.1em;} .field__err:empty{min-height:0;} /* Honeypot: present for bots, removed from the accessible/visual flow for people. */ .cform__hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;} .cform__turnstile{margin:var(--s-3) 0 0;min-height:1px;} .cform__turnstile:empty{margin:0;} .cform__actions{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:var(--s-4);} .btn:disabled,.btn[aria-busy="true"]{opacity:0.6;cursor:default;transform:none;} .cform__status{font-family:'Hanken Grotesk',sans-serif;font-size:0.92rem;color:var(--on-warm-soft);} .cform__status--error{color:oklch(0.88 0.14 70);font-weight:600;} .cform__status--success{color:var(--on-warm);font-weight:600;} .cform__privacy{margin:var(--s-3) 0 0;font-size:0.82rem;color:var(--on-warm-soft);max-width:60ch;} .contact__success{max-width:600px;} .contact__success h3{font-family:'Fraunces',serif;font-weight:500;font-size:1.5rem;color:var(--on-warm);margin:0 0 10px;} .contact__success p{color:var(--on-warm-soft);max-width:54ch;margin:0;} .contact__alt{display:flex;flex-wrap:wrap;gap:8px 28px;margin-top:var(--s-5); font-family:'Hanken Grotesk',sans-serif;font-size:0.95rem;color:var(--on-warm-soft);} .contact__link{color:var(--on-warm);text-decoration:underline;text-decoration-color:var(--clarity); text-underline-offset:4px;text-decoration-thickness:2px;} .contact__link:hover,.contact__link:focus-visible{text-decoration-color:var(--on-warm);} @media (max-width:560px){ .cform__grid{grid-template-columns:1fr;gap:0;} .cform__grid .field{margin-bottom:var(--s-4);} } /* ---------- LOAD REVEAL ---------- */ html.js .rise{opacity:0;transform:translateY(16px); transition:opacity .7s var(--ease-out),transform .7s var(--ease-out);} html.js body.is-loaded .rise{opacity:1;transform:none;} .d1{transition-delay:.05s;} .d2{transition-delay:.15s;} .d3{transition-delay:.25s;} .d4{transition-delay:.35s;} .d5{transition-delay:.45s;} @media (prefers-reduced-motion:reduce){html.js .rise{opacity:1;transform:none;transition:none;}} /* ---------- CARDS / SURFACES ---------- */ .card{background:var(--surface);border:1.5px solid var(--ink);border-radius:var(--r-card);padding:var(--s-4);} .grid{display:grid;gap:var(--s-4);} .cols-3{grid-template-columns:repeat(3,1fr);} .cols-2{grid-template-columns:repeat(2,1fr);} .auto{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));} @media (max-width:760px){.cols-3,.cols-2{grid-template-columns:1fr;}} /* ---------- BUTTONS ---------- */ .btn{font-family:'Hanken Grotesk';font-weight:700;font-size:0.95rem;border:none;border-radius:var(--r-btn); padding:14px 26px;cursor:pointer;transition:transform var(--t-fast) var(--ease-out),background var(--t-fast); display:inline-flex;align-items:center;gap:8px;text-decoration:none;} .btn:focus-visible{outline:3px solid var(--cobalt);outline-offset:3px;} .btn--primary{background:var(--signal-deep);color:var(--on-cobalt);} .btn--primary:hover{background:oklch(0.47 0.21 350);transform:translateY(-1px);} .btn--bold{background:var(--cobalt);color:var(--on-cobalt);} .btn--bold:hover{background:var(--cobalt-deep);transform:translateY(-1px);} .btn--outline{background:transparent;color:var(--ink);border:1.5px solid var(--ink);padding:13px 25px;} .btn--outline:hover{background:var(--clarity);} .btn--ghost{background:transparent;color:var(--signal-deep);padding:13px 4px;} .btn--ghost span{display:inline-block;transition:transform var(--t-fast) var(--ease-out);} .btn--ghost:hover span{transform:translateX(5px);} .btn--warm{background:var(--on-warm);color:var(--warm);} .btn--warm:hover{background:var(--clarity);color:var(--ink);transform:translateY(-1px);} /* ---------- LINKS ---------- */ .ilink{color:var(--ink);text-decoration:underline;text-decoration-color:var(--signal); text-underline-offset:4px;text-decoration-thickness:2px;transition:color var(--t-fast);} .ilink:hover{color:var(--signal);} /* ---------- OPERATOR: outcome-evidence (NOT a stat-card grid) ---------- */ .outcomes{display:flex;flex-direction:column;gap:var(--s-4);max-width:760px;} .outcome{display:flex;gap:var(--s-3);align-items:flex-start;padding-left:var(--s-4); border-left:0; position:relative;} .outcome::before{content:"";position:absolute;left:0;top:0.5em;width:9px;height:9px;border-radius:50%; background:var(--cobalt);} .outcome p{margin:0;font-size:1.12rem;line-height:1.5;color:var(--ink-soft);} .outcome .fig{font-family:'Hanken Grotesk';font-weight:800;color:var(--ink);} .outcome .src{display:block;margin-top:4px;font-family:'Spline Sans Mono';font-size:11px; letter-spacing:0.06em;color:var(--muted);} /* ---------- BUILDER: process / artifact ---------- */ .flow{display:grid;grid-template-columns:1fr auto 1fr;gap:var(--s-3);align-items:stretch;} .flow__step{background:var(--surface);border:1.5px solid var(--ink);border-radius:var(--r-card);padding:var(--s-4);} .flow__step.before{background:oklch(0.48 0.14 256);border-color:var(--cobalt);} .flow__step.after{background:var(--clarity);border-color:var(--ink);} .flow__arrow{align-self:center;font-family:'Spline Sans Mono';color:var(--signal);font-size:22px;} .flow__tag{font-family:'Spline Sans Mono';font-size:10px;letter-spacing:0.1em;text-transform:uppercase; margin-bottom:10px;} .before .flow__tag{color:var(--on-cobalt);} .after .flow__tag{color:var(--ink);} .flow__step .t{font-family:'Fraunces';font-size:1.25rem;line-height:1.15;} .before .t{color:var(--on-cobalt);} @media (max-width:760px){.flow{grid-template-columns:1fr;}.flow__arrow{transform:rotate(90deg);justify-self:center;}} /* ---------- HUMAN ZONE (warm, committed) ---------- */ /* About is a LIGHT, cohesive section (not a colour drench) — warmth lives in the wine bookends, not here. Wine survives only as a faint portrait tint + the accent label. */ .human{background:var(--surface);color:var(--ink);border:1px solid var(--hairline);border-radius:var(--r-card);overflow:hidden;} .human__grid{display:grid;grid-template-columns:0.85fr 1.15fr;} .human__photo{position:relative;min-height:420px;background:oklch(0.94 0.025 352);} figure.human__photo{margin:0;} .human__photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover; filter:saturate(1.02) contrast(1.02);} .human__photo figcaption{position:absolute;left:14px;bottom:14px;font-family:'Spline Sans Mono'; font-size:10px;letter-spacing:0.08em;color:var(--ink-soft);background:oklch(0.92 0.03 352 / 0.85); padding:5px 9px;border-radius:4px;} .human__body{padding:var(--s-6) var(--s-5);} .human__body .meta{color:var(--warm);} .human__body .h1{color:var(--ink);margin:10px 0 var(--s-3);} .human__body p{color:var(--ink-soft);max-width:46ch;} .human__quote{font-family:'Fraunces';font-style:italic;font-size:1.4rem;line-height:1.35; color:var(--ink);margin:var(--s-4) 0 0;} .human__photo--placeholder{display:flex;align-items:center;justify-content:center;} .human__photo--placeholder .ph-note{font-family:'Spline Sans Mono',monospace;font-size:11px; letter-spacing:0.1em;text-transform:uppercase;color:var(--ink-soft);opacity:0.85;} .human__photo--portrait-slot{display:flex;align-items:center;justify-content:center;} .portrait-drop{font-family:'Spline Sans Mono',monospace;font-size:11px;letter-spacing:0.1em; text-transform:uppercase;color:var(--ink-soft);opacity:0.85;} @media (max-width:760px){.human__grid{grid-template-columns:1fr;}.human__photo{min-height:280px;}} /* ---------- SWATCHES ---------- */ .swatch{border-radius:var(--r-card);height:104px;display:flex;align-items:flex-end;padding:12px;} .swatch span{font-family:'Hanken Grotesk';font-weight:700;font-size:12px;} .tok{font-family:'Spline Sans Mono';font-size:10px;color:var(--muted);} .tok-name{font-family:'Hanken Grotesk';font-weight:700;font-size:13px;margin-top:8px;} .tok-use{font-size:11.5px;color:var(--ink-soft);margin-top:2px;} /* ---------- TYPE SCALE TABLE (responsive, no overflow) ---------- */ .scale{padding:0;overflow:hidden;} .scale-row{display:flex;justify-content:space-between;align-items:baseline;gap:16px; padding:18px 26px;border-bottom:1px solid var(--hairline);} .scale-row:last-child{border-bottom:0;} .scale-sample{font-family:'Fraunces';line-height:1;min-width:0;} .scale-sample.d{font-size:clamp(2rem,5vw,3.6rem);} .scale-sample.h1{font-size:2rem;} @media (max-width:600px){ .scale-row{flex-direction:column;align-items:flex-start;gap:6px;padding:16px 18px;} .scale-sample.d{font-size:1.9rem;} } /* ---------- APPROACH — left-spine timeline (nodes track their own rows) ---------- */ .approach{background:var(--cobalt);border-radius:var(--r-card);padding:var(--s-6) var(--s-5);} .approach__steps{position:relative;padding-left:48px;} .approach__steps::before{content:"";position:absolute;left:13px;top:10px;bottom:10px;width:2.5px;border-radius:2px; background:linear-gradient(180deg,oklch(0.80 0.12 256),oklch(0.70 0.22 352) 52%,oklch(0.86 0.17 100));} .astep{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:var(--s-5);align-items:start;} .astep + .astep{margin-top:var(--s-6);} .astep::before{content:"";position:absolute;left:-41px;top:0.4em;width:14px;height:14px;border-radius:50%; background:var(--cobalt);border:2.5px solid var(--clarity);box-shadow:0 0 0 4px var(--cobalt);} .astep.n1::before{border-color:oklch(0.80 0.12 256);} .astep.n2::before{border-color:oklch(0.70 0.22 352);} .astep.n3::before{background:var(--clarity);border-color:var(--clarity);} .astep__num{font-family:'Spline Sans Mono';font-size:0.72rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--clarity);} .astep__title{font-family:'Fraunces';font-size:clamp(1.6rem,3vw,2rem);line-height:1.05;color:var(--on-cobalt);margin-top:6px;} .astep__body{color:var(--on-cobalt-soft);max-width:44ch;padding-top:22px;} @media (max-width:640px){ .approach{padding:var(--s-5) var(--s-4);} .astep{grid-template-columns:1fr;gap:6px;} .astep__body{padding-top:0;} } /* ---------- REDUCED MOTION ---------- */ @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} *,*::before,*::after{transition-duration:0.001ms !important;animation-duration:0.001ms !important;} .hud__fill{transform:scaleY(1) !important;} /* show the whole journey, statically */ .hud__puck{display:none;} }