/* ============================================================
   stephhamill.com, the principal's door. October 2026, second pass.
   Same family as ham.agency (the ground, the lavender, Syne, DM Sans,
   DM Mono) but its own language, because this is a person, not a firm:
   - soft, large corners and pills, where HAM is hairlines and squares
   - white light as the lead, lavender as the glow behind it
   - one signature: the line of light from her portrait. It is the
     scroll line, the divider and the thing that follows the hand.
   No serif anywhere. Motion is transform and opacity only.
   ============================================================ */

@font-face { font-family:'Syne'; src:url('/fonts/syne-500.woff2') format('woff2'); font-weight:500; font-display:swap; }
@font-face { font-family:'Syne'; src:url('/fonts/syne-600.woff2') format('woff2'); font-weight:600; font-display:swap; }
@font-face { font-family:'Syne'; src:url('/fonts/syne-700.woff2') format('woff2'); font-weight:700; font-display:swap; }
@font-face { font-family:'DM Sans'; src:url('/fonts/dm-sans-opsz.woff2') format('woff2-variations'); font-weight:100 1000; font-display:swap; }
@font-face { font-family:'DM Sans'; src:url('/fonts/dm-sans-opsz-italic.woff2') format('woff2-variations'); font-weight:100 1000; font-style:italic; font-display:swap; }
@font-face { font-family:'DM Mono'; src:url('/fonts/dm-mono-400.woff2') format('woff2'); font-weight:400; font-display:swap; }
@font-face { font-family:'DM Mono'; src:url('/fonts/dm-mono-500.woff2') format('woff2'); font-weight:500; font-display:swap; }
@font-face { font-family:'Syne Fallback'; src:local('Helvetica Neue'),local('Arial'); size-adjust:103%; ascent-override:94%; descent-override:24%; line-gap-override:0%; }
@font-face { font-family:'DM Sans Fallback'; src:local('Helvetica Neue'),local('Arial'); size-adjust:99%; ascent-override:96%; descent-override:25%; line-gap-override:0%; }

:root {
  --paper:#0C0C0E; --stone:#141417; --glass:rgba(24,24,28,0.62); --ink:#EDEAE5;
  --muted:rgba(237,234,229,0.64); --dim:rgba(237,234,229,0.38);
  --rule:rgba(237,234,229,0.1); --line:rgba(237,234,229,0.2);
  --accent:#B8A9E8; --glow:rgba(184,169,232,0.22); --focus:#B8A9E8;

  --display:'Syne','Syne Fallback','Helvetica Neue',Arial,sans-serif;
  --sans:'DM Sans','DM Sans Fallback','Helvetica Neue',Arial,sans-serif;
  --mono:'DM Mono',ui-monospace,Menlo,monospace;

  --fs-00:0.6875rem; --fs-0:0.875rem; --fs-1:1.0625rem;
  --fs-2:clamp(1.1875rem, 1.05rem + 0.5vw, 1.375rem);
  --fs-3:clamp(1.5rem, 1.2rem + 1.2vw, 2.125rem);
  --fs-4:clamp(2.125rem, 1.3rem + 3.4vw, 4.25rem);
  --track-mono:0.1em;

  --ease-out:cubic-bezier(0.16, 1, 0.3, 1);

  --s-1:0.25rem; --s-2:0.5rem; --s-3:0.75rem; --s-4:1rem; --s-5:1.5rem;
  --s-6:2rem; --s-7:3rem; --s-8:4.5rem; --s-9:clamp(4.5rem, 3rem + 6vw, 9rem);
  --wrap:82rem;
  --gutter:clamp(1.25rem, 0.5rem + 3.6vw, 4.5rem);
  --edge:clamp(0.5rem, 0.2rem + 1vw, 1rem);      /* how far the big panels sit from the edge of the screen */
  --r:1.25rem; --r-lg:clamp(1.5rem, 1rem + 1.4vw, 2.25rem);
  --pill:999px;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing:border-box; }
html { background:var(--paper); color-scheme:dark; -webkit-text-size-adjust:100%; text-size-adjust:100%; }
body { margin:0; background:var(--paper); color:var(--ink); font:400 var(--fs-1)/1.6 var(--sans); font-optical-sizing:auto; text-rendering:optimizeLegibility; -webkit-font-smoothing:antialiased; overflow-x:clip; }
img { max-width:100%; height:auto; display:block; }
h1, h2, h3 { font-family:var(--display); font-weight:500; line-height:1; letter-spacing:-0.045em; margin:0 0 var(--s-5); text-wrap:balance; }
h2 { font-size:var(--fs-4); }
h3 { font-size:var(--fs-3); letter-spacing:-0.03em; line-height:1.08; }
p, ul, ol, dl { margin:0 0 var(--s-5); }
p { text-wrap:pretty; }
a { color:inherit; text-decoration:underline; text-decoration-color:var(--line); text-decoration-thickness:1px; text-underline-offset:0.22em; }
a:hover { text-decoration-color:var(--ink); }
strong { font-weight:600; }
::selection { background:var(--ink); color:#0C0C0E; }
:focus-visible { outline:2px solid var(--focus); outline-offset:4px; border-radius:6px; }
main:focus { outline:none; }
[hidden] { display:none !important; }
.wrap { max-width:var(--wrap); margin:0 auto; padding:0 var(--gutter); }
.visually-hidden { position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.label { font:500 var(--fs-00)/1.5 var(--mono); letter-spacing:var(--track-mono); text-transform:uppercase; color:var(--muted); margin:0 0 var(--s-4); }
.lede { font:400 var(--fs-2)/1.5 var(--sans); color:var(--muted); max-width:36rem; }
.skip { position:absolute; left:var(--s-4); top:-5rem; z-index:90; background:var(--ink); color:#0C0C0E; padding:var(--s-3) var(--s-5); text-decoration:none; font-weight:600; border-radius:var(--pill); }
.skip:focus { top:var(--s-4); }

/* ---------- Header: a floating glass pill ---------- */
.site-header { position:fixed; top:0; left:0; right:0; z-index:60; padding:calc(var(--edge) + 0.5rem) calc(var(--edge) + 0.5rem) 0; pointer-events:none; }
.nav-pill { position:relative; pointer-events:auto; max-width:66rem; margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:var(--s-4); min-height:3.5rem; padding:0.4rem 0.4rem 0.4rem 1.4rem; border-radius:var(--pill); background:var(--glass); -webkit-backdrop-filter:blur(20px) saturate(160%); backdrop-filter:blur(20px) saturate(160%); border:1px solid var(--rule); }
.brand { display:inline-flex; align-items:center; gap:0.55em; padding:var(--s-2) 0; text-decoration:none; font:600 1.125rem/1 var(--display); letter-spacing:-0.045em; color:var(--ink); white-space:nowrap; }
.brand::before { content:""; width:1px; height:1.15em; background:linear-gradient(180deg, transparent, #fff 30%, #fff 70%, transparent); box-shadow:0 0 10px 1px var(--accent); transform:rotate(14deg); }
.site-nav ul { list-style:none; margin:0; padding:0; display:flex; align-items:center; gap:var(--s-1); }
.site-nav a { display:inline-flex; align-items:center; min-height:2.6rem; padding:0 0.95rem; border-radius:var(--pill); font:400 var(--fs-0)/1 var(--sans); color:var(--muted); text-decoration:none; white-space:nowrap; }
.site-nav a:hover { color:var(--ink); background:rgba(237,234,229,0.06); }
.site-nav a[aria-current='page'] { color:var(--ink); background:rgba(237,234,229,0.1); }
.site-nav .nav-cta { margin-left:var(--s-2); background:var(--ink); color:#0C0C0E; font-weight:500; padding:0 1.25rem; }
.site-nav .nav-cta:hover { background:#fff; color:#0C0C0E; }
.nav-toggle { display:none; align-items:center; gap:var(--s-3); min-height:2.75rem; padding:0 1.1rem; background:var(--ink); color:#0C0C0E; border:0; border-radius:var(--pill); font:500 var(--fs-00)/1 var(--mono); letter-spacing:var(--track-mono); text-transform:uppercase; cursor:pointer; }
@media (max-width:63.99rem) {
  /* Without the script the menu is a row you can swipe. With it, a glass panel under the pill. */
  .nav-pill { flex-wrap:wrap; border-radius:1.75rem; padding:0.4rem 0.4rem 0.4rem 1.2rem; }
  .site-nav { width:100%; overflow-x:auto; scrollbar-width:none; }
  .site-nav::-webkit-scrollbar { display:none; }
  html.nav-js .nav-pill { flex-wrap:nowrap; border-radius:var(--pill); }
  html.nav-js .nav-toggle { display:inline-flex; }
  html.nav-js .site-nav { display:none; position:absolute; top:calc(100% + 0.5rem); left:0; right:0; width:auto; overflow:visible; padding:var(--s-4); border-radius:var(--r-lg); background:rgba(18,18,21,0.96); border:1px solid var(--rule); }
  html.nav-js .site-nav.is-open { display:block; }
  html.nav-js .site-nav ul { flex-direction:column; align-items:stretch; gap:0; counter-reset:nav; }
  html.nav-js .site-nav li { counter-increment:nav; border-bottom:1px solid var(--rule); }
  html.nav-js .site-nav li:last-child { border-bottom:0; padding-top:var(--s-4); }
  html.nav-js .site-nav a { display:flex; justify-content:space-between; min-height:3.6rem; padding:0 var(--s-3); border-radius:var(--r); font:500 1.5rem/1 var(--display); letter-spacing:-0.04em; color:var(--ink); }
  html.nav-js .site-nav a:not(.nav-cta)::after { content:"(0" counter(nav) ")"; font:500 var(--fs-00)/1 var(--mono); letter-spacing:var(--track-mono); color:var(--dim); align-self:center; }
  html.nav-js .site-nav .nav-cta { margin:0; justify-content:center; font:500 var(--fs-1)/1 var(--sans); letter-spacing:0; min-height:3.25rem; border-radius:var(--pill); color:#0C0C0E; }
}

/* ---------- Buttons and tags: pills ---------- */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:0.7rem; min-height:3.25rem; padding:0 1.5rem; font:500 var(--fs-0)/1 var(--sans); text-decoration:none; border:1px solid transparent; border-radius:var(--pill); cursor:pointer; }
.btn-fill { background:var(--ink); color:#0C0C0E; padding-right:0.45rem; }
.btn-fill::after { content:""; width:2.35rem; height:2.35rem; border-radius:50%; background:#0C0C0E url('/img/arrow-light.svg') center / 14px no-repeat; }
.btn-fill:hover { background:#fff; }
.btn-line { background:rgba(237,234,229,0.05); border-color:var(--line); color:var(--ink); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }
.btn-line:hover { border-color:var(--ink); }
.actions { display:flex; flex-wrap:wrap; gap:var(--s-3); margin:var(--s-6) 0 0; }
.tag { display:inline-flex; align-items:center; gap:0.6rem; min-height:2rem; padding:0 0.9rem; margin:0 0 var(--s-5); border:1px solid var(--rule); border-radius:var(--pill); background:rgba(237,234,229,0.04); font:500 var(--fs-00)/1 var(--mono); letter-spacing:var(--track-mono); text-transform:uppercase; color:var(--muted); }
.tag b { font-weight:500; color:var(--accent); }
.go { display:inline-flex; align-items:center; gap:0.7rem; font:500 var(--fs-00)/1 var(--mono); letter-spacing:var(--track-mono); text-transform:uppercase; color:var(--ink); text-decoration:none; }
.go::after { content:""; width:2rem; height:2rem; border-radius:50%; border:1px solid var(--line); background:url('/img/arrow-light.svg') center / 12px no-repeat; }

/* ---------- The line of light ---------- */
.page-panel { --beam-x:80%; }
.beam { position:absolute; z-index:-1; top:-10%; bottom:-10%; left:var(--beam-x, 58%); width:2px; pointer-events:none; background:linear-gradient(180deg, rgba(255,255,255,0) 0%, #fff 22%, #fff 72%, rgba(255,255,255,0) 100%); box-shadow:0 0 18px 3px rgba(255,255,255,0.5), 0 0 60px 14px var(--glow); transform:rotate(11deg) translate3d(var(--bx, 0px), 0, 0); transform-origin:50% 50%; opacity:0.85; }
.scroll-line { position:fixed; z-index:55; top:0; bottom:0; right:calc(var(--edge) * 0.5); width:1px; pointer-events:none; background:var(--rule); }
.scroll-line::after { content:""; position:absolute; inset:0; background:#fff; box-shadow:0 0 12px 2px var(--accent); transform-origin:50% 0; transform:scaleY(var(--sp, 0)); }
.cursor-light { position:fixed; z-index:40; top:0; left:0; width:34rem; height:34rem; margin:-17rem 0 0 -17rem; border-radius:50%; pointer-events:none; background:radial-gradient(circle, rgba(184,169,232,0.13) 0%, rgba(184,169,232,0.05) 34%, transparent 62%); mix-blend-mode:screen; opacity:0; }
.cursor-light.is-on { opacity:1; }

/* ---------- Hero (home): one tall panel, the portrait, the name ---------- */
.hero { padding:var(--edge); }
.hero-panel { position:relative; isolation:isolate; overflow:hidden; display:flex; flex-direction:column; justify-content:flex-end; min-height:calc(100svh - var(--edge) * 2); border-radius:var(--r-lg); background:#0C0C0E; border:1px solid var(--rule); padding:min(47svh, 22rem) var(--gutter) var(--s-5); }
.hero-bg { position:absolute; inset:-6%; z-index:-3; background:url('/img/bg-hero.jpg') 50% 50% / cover no-repeat; opacity:0.3; transform:translate3d(var(--hx, 0px), calc(var(--hero-y, 0px) + var(--hy, 0px)), 0) scale(1.06); }
.hero-portrait { position:absolute; z-index:-2; inset:0 0 auto 0; height:min(66svh, 31rem); margin:0; }
.hero-portrait img { width:100%; height:100%; object-fit:cover; object-position:50% 20%; }
.hero-portrait::after { content:""; position:absolute; inset:0; background:linear-gradient(0deg, #0C0C0E 0%, rgba(12,12,14,0.6) 26%, rgba(12,12,14,0) 58%), linear-gradient(180deg, rgba(12,12,14,0.4) 0%, rgba(12,12,14,0) 22%); }
.hero-panel::after { content:""; position:absolute; inset:0; z-index:-1; }
.hero-kicker { color:var(--ink); margin:0 0 var(--s-4); }
.hero h1 { font-size:clamp(4rem, 19.5vw, 8.5rem); font-weight:500; line-height:0.84; letter-spacing:-0.07em; margin:0 0 var(--s-5); width:min-content; }
.hero-line { font:500 clamp(1.5rem, 1rem + 2.2vw, 2.75rem)/1.08 var(--display); letter-spacing:-0.04em; max-width:17ch; margin:0 0 var(--s-6); text-wrap:balance; }
.hero-list { list-style:none; margin:0 0 var(--s-6); padding:0; border-top:1px solid var(--line); max-width:26rem; }
.hero-list a { display:flex; align-items:center; gap:var(--s-4); min-height:3rem; border-bottom:1px solid var(--rule); text-decoration:none; font:500 var(--fs-2)/1 var(--display); letter-spacing:-0.03em; }
.hero-list small { font:500 var(--fs-00)/1 var(--mono); letter-spacing:var(--track-mono); color:var(--dim); }
.hero-list a::after { content:""; margin-left:auto; width:0.55rem; height:0.55rem; border-top:1.5px solid var(--dim); border-right:1.5px solid var(--dim); transform:rotate(45deg); }
.hero-list a:hover::after { border-color:#fff; }
.hero-side { display:grid; gap:var(--s-5); }
.hero-side .lede { margin:0; color:var(--muted); max-width:30rem; }
.talk-card { display:flex; align-items:center; justify-content:space-between; gap:var(--s-4); padding:0.65rem 0.65rem 0.65rem 1.4rem; max-width:24rem; border-radius:var(--pill); background:var(--glass); border:1px solid var(--line); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px); text-decoration:none; font:500 var(--fs-1)/1.2 var(--sans); }
.talk-card::after { content:""; flex:none; width:2.75rem; height:2.75rem; border-radius:50%; background:var(--ink) url('/img/arrow-dark.svg') center / 14px no-repeat; }
.hero-bar { display:flex; align-items:center; justify-content:space-between; gap:var(--s-5); margin:var(--s-6) 0 0; padding-top:var(--s-4); border-top:1px solid var(--rule); font:500 var(--fs-00)/1.4 var(--mono); letter-spacing:var(--track-mono); text-transform:uppercase; color:var(--dim); }
.hero-bar .js-clock { color:var(--ink); font-variant-numeric:tabular-nums; }
/* World times. Hidden without the script, because the script writes the times. */
.clocks { display:none; flex:0 1 27rem; min-width:0; overflow:hidden; -webkit-mask-image:linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image:linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
html.js .clocks { display:block; }
.clocks-track { display:flex; width:max-content; }
.clocks ul { display:flex; flex:none; list-style:none; margin:0; padding:0; }
.clocks ul[aria-hidden] { display:none; }
.clocks li { white-space:nowrap; padding-right:var(--s-6); }
html.no-motion .clocks { overflow-x:auto; scrollbar-width:none; }
@media (min-width:56rem) {
  .hero-panel { padding-top:8rem; }
  .hero-portrait { inset:0 0 0 auto; width:50%; height:auto; }
  .hero-portrait img { object-position:50% 18%; }
  .hero-portrait::after { background:none; }
  .hero-panel::after { background:linear-gradient(90deg, #0C0C0E 0%, #0C0C0E 40%, rgba(12,12,14,0.5) 54%, rgba(12,12,14,0) 70%), linear-gradient(0deg, rgba(12,12,14,0.96) 0%, rgba(12,12,14,0.72) 20%, rgba(12,12,14,0) 40%); }
  /* The name stacks in the left half, so nothing is ever set across her face. */
  .hero h1 { font-size:clamp(5.5rem, 11.4vw, 12rem); margin-bottom:var(--s-6); }
  .hero-cols { display:grid; grid-template-columns:minmax(0, 6fr) minmax(0, 5fr); gap:var(--s-8); align-items:end; }
  .hero-list { margin-bottom:0; }
  .hero-side { justify-items:start; justify-self:end; max-width:26rem; gap:var(--s-4); }
  .hero-side .lede { color:var(--ink); font-size:var(--fs-1); }
}

/* ---------- Page heroes (inner pages): the same panel, shorter ---------- */
.page-head { padding:var(--edge); }
.page-panel { position:relative; isolation:isolate; overflow:hidden; border-radius:var(--r-lg); background:var(--stone); padding:8.5rem var(--gutter) var(--s-8); }
.page-panel::before { content:""; position:absolute; inset:-8% -4%; z-index:-2; background-size:cover; background-position:60% 45%; opacity:0.55; transform:translate3d(0, var(--py, 0px), 0) scale(1.06); }
.page-panel::after { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg, rgba(12,12,14,0.94) 0%, rgba(12,12,14,0.78) 46%, rgba(12,12,14,0.35) 100%), linear-gradient(0deg, rgba(12,12,14,0.9) 0%, rgba(12,12,14,0) 46%); }
body[data-page="board"] .page-panel::before { background-image:url('/img/bg-board.jpg'); }
body[data-page="speaking"] .page-panel::before { background-image:url('/img/bg-speaking.jpg'); }
body[data-page="steph-sense"] .page-panel::before { background-image:url('/img/bg-sense.jpg'); opacity:0.4; }
body[data-page="profile"] .page-panel::before { background-image:url('/img/bg-profile.jpg'); opacity:0.45; }
body[data-page="not-found"] .page-panel::before { background-image:url('/img/bg-band.jpg'); }
.page-head h1 { font-size:clamp(2.75rem, 1.4rem + 6vw, 6.5rem); line-height:0.94; letter-spacing:-0.055em; max-width:14ch; margin-bottom:var(--s-6); }
.page-head .lede { margin-bottom:var(--s-3); max-width:38rem; color:var(--ink); }
.page-head .lede + .lede { color:var(--muted); }
.page-head-grid { display:grid; gap:var(--s-7) var(--s-8); grid-template-columns:1fr; align-items:end; }
@media (min-width:56rem) { .page-head-grid { grid-template-columns:minmax(0, 7fr) minmax(0, 4fr); } }
.photo { margin:0; overflow:hidden; border-radius:var(--r-lg); border:1px solid var(--rule); background:var(--stone); aspect-ratio:4 / 5; max-height:34rem; width:min(100%, 24rem); }
.photo img { width:100%; height:100%; object-fit:cover; object-position:50% 15%; }

/* ---------- Credentials ticker and the big marquee ---------- */
.ticker { overflow:hidden; padding:var(--s-6) 0 var(--s-5); }
.ticker-track, .marquee-track { display:flex; width:max-content; }
.ticker ul, .marquee ul { display:flex; flex:none; align-items:center; list-style:none; margin:0; padding:0; }
.ticker li { display:flex; align-items:center; font:500 var(--fs-00)/1 var(--mono); letter-spacing:var(--track-mono); text-transform:uppercase; color:var(--muted); white-space:nowrap; }
.ticker li::after { content:""; width:1px; height:1.1rem; margin:0 var(--s-6); background:#fff; box-shadow:0 0 8px 1px var(--accent); transform:rotate(14deg); opacity:0.7; }
.marquee { overflow:hidden; padding:var(--s-8) 0; }
.marquee li { display:flex; align-items:center; font:500 clamp(3rem, 1.6rem + 7vw, 8.5rem)/1 var(--display); letter-spacing:-0.06em; white-space:nowrap; color:var(--ink); }
.marquee li:nth-child(even) { color:var(--dim); }
.marquee li::after { content:""; flex:none; width:2px; height:0.7em; margin:0 0.36em; background:#fff; box-shadow:0 0 16px 3px var(--glow); transform:rotate(14deg); }
@keyframes ticker { to { transform:translate3d(-50%, 0, 0); } }

/* ---------- Sections ---------- */
.zone { position:relative; padding:var(--s-9) 0; }
.zone-head { margin-bottom:var(--s-7); }
.zone-head h2 { max-width:16ch; margin:0; }
.zone-body { max-width:56rem; margin-left:auto; }
.zone-body > p { color:var(--muted); font-size:var(--fs-2); line-height:1.5; max-width:40rem; }
.zone-body > p:first-child { color:var(--ink); }
.zone-body > :last-child { margin-bottom:0; }
.zone--wide .zone-body { max-width:none; }

/* Rows: the one under the hand is lit, the rest step back */
.rows { list-style:none; padding:0; margin:0 0 var(--s-6); counter-reset:row; border-top:1px solid var(--line); }
.rows > li { counter-increment:row; position:relative; padding:var(--s-5) 0 var(--s-5) 4rem; border-bottom:1px solid var(--rule); color:var(--muted); }
.rows > li::before { content:"(" counter(row, decimal-leading-zero) ")"; position:absolute; left:0; top:calc(var(--s-5) + 0.7em); font:500 var(--fs-00)/1 var(--mono); letter-spacing:var(--track-mono); color:var(--dim); }
.rows > li strong { display:block; color:var(--ink); font:500 var(--fs-3)/1.1 var(--display); letter-spacing:-0.035em; margin-bottom:var(--s-2); }
.rows--plain > li { color:var(--ink); font:500 var(--fs-3)/1.1 var(--display); letter-spacing:-0.035em; }
.rows--plain small { display:block; font:400 var(--fs-1)/1.55 var(--sans); letter-spacing:0; color:var(--muted); margin-top:var(--s-2); }

/* ---------- Long reads (insights) ---------- */
body[data-page="insight"] .page-panel::before { background-image:url('/img/bg-band.jpg'); opacity:0.35; }
body[data-page="insight"] .page-head h1 { font-size:clamp(2.25rem, 1.4rem + 3.6vw, 4.5rem); max-width:20ch; margin-bottom:0; }
.prose { max-width:44rem; margin:0 auto; }
.prose h2 { font-size:var(--fs-3); letter-spacing:-0.035em; line-height:1.1; margin:var(--s-8) 0 var(--s-4); }
.prose h3 { font-size:var(--fs-2); letter-spacing:-0.02em; margin:var(--s-6) 0 var(--s-3); }
.prose p, .prose li { color:var(--muted); font-size:var(--fs-1); line-height:1.7; }
.prose > p:first-child { color:var(--ink); font-size:var(--fs-2); line-height:1.5; }
.prose ul, .prose ol { padding-left:1.2em; }
.prose li { margin-bottom:var(--s-2); }
.rows--plain a { text-decoration:none; }

/* ---------- The statement ---------- */
.zone--statement { padding:clamp(6rem, 4rem + 10vw, 13rem) 0; overflow:hidden; }
.statement { position:relative; z-index:1; max-width:62rem; margin:0 auto; text-align:center; }
.statement p { font:500 clamp(1.625rem, 1rem + 2.9vw, 3.5rem)/1.1 var(--display); letter-spacing:-0.045em; margin:0 0 0.7em; text-wrap:balance; }
.statement p:last-child { margin-bottom:0; }
.statement-tag { display:flex; justify-content:center; }
.float { position:absolute; z-index:0; width:clamp(7rem, 13vw, 13rem); aspect-ratio:4 / 5; border-radius:var(--r); overflow:hidden; border:1px solid var(--rule); background-size:cover; background-position:center; opacity:0.75; display:none; }
.float--a { top:9%; left:4%; background-image:url('/img/bg-board.jpg'); transform:translate3d(0, var(--fy, 0px), 0) rotate(-7deg); }
.float--b { bottom:8%; left:13%; background-image:url('/img/bg-speaking.jpg'); transform:translate3d(0, calc(var(--fy, 0px) * -0.7), 0) rotate(5deg); }
.float--c { top:14%; right:5%; background-image:url('/img/bg-sense.jpg'); transform:translate3d(0, calc(var(--fy, 0px) * -1), 0) rotate(8deg); }
.float--d { bottom:10%; right:12%; background-image:url('/img/bg-profile.jpg'); transform:translate3d(0, calc(var(--fy, 0px) * 0.8), 0) rotate(-5deg); }
@media (min-width:68rem) { .float { display:block; } }

/* ---------- The record: a bento of numbers ---------- */
.bento { list-style:none; margin:0; padding:0; display:grid; gap:var(--s-3); grid-template-columns:1fr; }
.tile { position:relative; isolation:isolate; overflow:hidden; display:flex; flex-direction:column; justify-content:space-between; min-height:15rem; padding:var(--s-6); border-radius:var(--r-lg); background:var(--stone); border:1px solid var(--rule); }
.tile-no { font:500 var(--fs-00)/1 var(--mono); letter-spacing:var(--track-mono); text-transform:uppercase; color:var(--dim); margin:0 0 var(--s-7); }
.stat-num { display:block; font:500 clamp(4rem, 2.4rem + 7vw, 8rem)/0.86 var(--display); letter-spacing:-0.07em; font-variant-numeric:lining-nums proportional-nums; margin-bottom:var(--s-4); color:var(--ink); }
.stat-label { display:block; font:400 var(--fs-1)/1.45 var(--sans); color:var(--muted); max-width:30ch; }
.spot { position:absolute; z-index:-1; top:0; left:0; width:26rem; height:26rem; margin:-13rem 0 0 -13rem; border-radius:50%; background:radial-gradient(circle, rgba(184,169,232,0.2), transparent 62%); opacity:0; pointer-events:none; }
@media (min-width:44rem) { .bento { grid-template-columns:repeat(6, 1fr); } .tile { grid-column:span 2; } .tile:nth-child(n+4) { grid-column:span 3; } }

/* ---------- Dossier (profile) ---------- */
.roles { display:grid; gap:var(--s-3); }
.role { position:relative; isolation:isolate; overflow:hidden; padding:var(--s-6); border-radius:var(--r-lg); background:var(--stone); border:1px solid var(--rule); }
.role h3 { margin-bottom:var(--s-2); }
.role-meta { font:500 var(--fs-00)/1.6 var(--mono); letter-spacing:var(--track-mono); text-transform:uppercase; color:var(--muted); margin-bottom:0; }
.role ul { margin:var(--s-5) 0 0; padding-left:1.1em; color:var(--muted); }
.role li { margin-bottom:var(--s-2); }
.role li::marker { color:var(--dim); }

/* ---------- Talks, formats, stages ---------- */
.talks { list-style:none; margin:0; padding:0; counter-reset:talk; display:grid; gap:var(--s-3); }
.talks > li { counter-increment:talk; position:relative; isolation:isolate; overflow:hidden; padding:var(--s-6); border-radius:var(--r-lg); background:var(--stone); border:1px solid var(--rule); }
.talks > li::before { content:"(" counter(talk, decimal-leading-zero) ")"; display:block; font:500 var(--fs-00)/1 var(--mono); letter-spacing:var(--track-mono); color:var(--dim); margin-bottom:var(--s-6); }
.talks h3 { margin-bottom:var(--s-3); max-width:22ch; }
.talks p { color:var(--muted); margin:0; max-width:40rem; }
.tags { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:var(--s-2); }
.tags li { display:inline-flex; align-items:center; min-height:2.75rem; padding:0 1.2rem; border:1px solid var(--line); border-radius:var(--pill); font:500 var(--fs-0)/1 var(--sans); color:var(--ink); }
.stages { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); border-top:1px solid var(--line); }
.stages li { font:500 clamp(1.25rem, 1rem + 1.1vw, 1.875rem)/1.15 var(--display); letter-spacing:-0.035em; padding:var(--s-5) var(--s-4) var(--s-5) 0; border-bottom:1px solid var(--rule); }
.stages-label { margin:var(--s-8) 0 var(--s-4); color:var(--muted); }
@media (min-width:44rem) { .stages { grid-template-columns:repeat(3, minmax(0, 1fr)); } }
@media (min-width:64rem) { .stages { grid-template-columns:repeat(5, minmax(0, 1fr)); } }

/* ---------- Channels ---------- */
.channels { list-style:none; margin:0; padding:0; display:grid; gap:var(--s-3); grid-template-columns:1fr; }
@media (min-width:44rem) { .channels { grid-template-columns:repeat(2, 1fr); } }
.channel { position:relative; isolation:isolate; overflow:hidden; display:flex; flex-direction:column; justify-content:space-between; gap:var(--s-7); min-height:13rem; padding:var(--s-6); border:1px solid var(--rule); border-radius:var(--r-lg); background:var(--stone); text-decoration:none; }
.channel-platform { display:block; font:500 var(--fs-4)/1 var(--display); letter-spacing:-0.05em; }
.channel-handle { display:block; margin-top:var(--s-3); font:500 var(--fs-00)/1.4 var(--mono); letter-spacing:var(--track-mono); text-transform:uppercase; color:var(--muted); }

/* ---------- A panel that points to the firm ---------- */
.band { padding:var(--edge); }
.band-panel { position:relative; isolation:isolate; overflow:hidden; border-radius:var(--r-lg); background:var(--stone); padding:var(--s-9) var(--gutter); }
.band-panel::before { content:""; position:absolute; inset:-10% 0; z-index:-2; background:url('/img/bg-ham.jpg') 50% 50% / cover no-repeat; opacity:0.75; transform:translate3d(0, var(--py, 0px), 0) scale(1.1); }
.band-panel::after { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg, rgba(12,12,14,0.9) 0%, rgba(12,12,14,0.55) 60%, rgba(12,12,14,0.2) 100%); }
.band h2 { max-width:14ch; }
.band .lede { color:var(--ink); }

/* ---------- Contact: one panel, three ways in ---------- */
.end-band { padding:var(--edge); }
.end-panel { position:relative; isolation:isolate; overflow:hidden; border-radius:var(--r-lg); background:var(--stone); border:1px solid var(--rule); padding:var(--s-9) var(--gutter) var(--s-7); }
.end-panel::before { content:""; position:absolute; z-index:-1; left:50%; top:-40%; width:70rem; height:46rem; margin-left:-35rem; border-radius:50%; background:radial-gradient(ellipse, rgba(184,169,232,0.26) 0%, rgba(184,169,232,0.08) 40%, transparent 68%); }
.end-h { font-size:clamp(2.75rem, 1.2rem + 7vw, 7.5rem); letter-spacing:-0.06em; line-height:0.92; max-width:12ch; margin-bottom:var(--s-8); }
.routes { list-style:none; margin:0; padding:0; display:grid; gap:var(--s-3); grid-template-columns:1fr; }
@media (min-width:56rem) { .routes { grid-template-columns:repeat(3, 1fr); } }
.routes > li { display:flex; }
.route { position:relative; isolation:isolate; overflow:hidden; display:flex; flex-direction:column; justify-content:space-between; gap:var(--s-6); width:100%; min-height:12rem; padding:var(--s-5) var(--s-5) var(--s-5) var(--s-6); border-radius:var(--r-lg); background:rgba(12,12,14,0.55); border:1px solid var(--line); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); text-decoration:none; }
.route h3 { font-size:var(--fs-3); margin:0 0 var(--s-2); }
.route p { font-size:var(--fs-0); line-height:1.5; margin:0; color:var(--muted); }
.route-go { display:flex; align-items:center; justify-content:space-between; gap:var(--s-4); font:500 var(--fs-0)/1.2 var(--sans); overflow-wrap:anywhere; }
.route-go::after { content:""; flex:none; width:2.75rem; height:2.75rem; border-radius:50%; background:var(--ink) url('/img/arrow-dark.svg') center / 14px no-repeat; }

/* ---------- Footer ---------- */
.site-footer { position:relative; overflow:hidden; color:var(--muted); padding:var(--s-8) 0 0; }
.site-footer a { text-decoration:none; }
.site-footer a:hover { color:var(--ink); }
.footer-grid { display:grid; gap:var(--s-7) var(--s-6); grid-template-columns:1fr; }
@media (min-width:36rem) { .footer-grid { grid-template-columns:repeat(2, 1fr); } .footer-brand { grid-column:1 / -1; } }
@media (min-width:62rem) { .footer-grid { grid-template-columns:4fr repeat(4, 2.5fr); } .footer-brand { grid-column:auto; } }
.footer-brand .brand { font-size:1.5rem; }
.footer-brand p { max-width:30ch; margin:var(--s-4) 0 0; }
.link-list { list-style:none; padding:0; margin:0; }
.link-list a { display:block; padding:0.45rem 0; }
.legal { margin-top:var(--s-8); padding-top:var(--s-4); border-top:1px solid var(--rule); font-size:var(--fs-0); color:var(--dim); }
.legal p { margin-bottom:var(--s-2); max-width:none; }
.legal a { margin-right:var(--s-4); color:var(--muted); }
.footer-mark { display:block; font:500 clamp(3.5rem, 15.4vw, 18rem)/0.8 var(--display); letter-spacing:-0.075em; text-align:center; white-space:nowrap; margin:var(--s-8) 0 -0.1em; color:var(--ink); opacity:0.14; transform:translate3d(0, var(--fy, 0px), 0); pointer-events:none; user-select:none; }

/* ============================================================
   Motion. Transform and opacity only. Every hidden state is
   guarded by html.js:not(.no-motion), so without JavaScript, with
   reduced motion, or if the script fails, the page is complete
   and still.
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior:smooth; }
  @view-transition { navigation:auto; }
  ::view-transition-old(root) { animation:vt-out 0.3s cubic-bezier(0.4, 0, 0.2, 1) both; }
  ::view-transition-new(root) { animation:vt-in 0.7s cubic-bezier(0.16, 1, 0.3, 1) both; }

  .site-header { transition:transform 0.6s var(--ease-out); }
  .site-header.is-hidden { transform:translate3d(0, -140%, 0); }
  .ticker-track { animation:ticker 60s linear infinite; }
  .marquee-track { animation:ticker 44s linear infinite; }
  .clocks ul[aria-hidden] { display:flex; }
  .clocks-track { animation:ticker 36s linear infinite; }
  .ticker:hover .ticker-track, .marquee:hover .marquee-track, .clocks:hover .clocks-track { animation-play-state:paused; }
  .btn, .talk-card { transition:transform 0.5s var(--ease-out); transform:translate3d(var(--mx, 0px), var(--my, 0px), 0); }
  .btn-fill::after, .talk-card::after, .route-go::after, .go::after { transition:transform 0.5s var(--ease-out); }
  .btn-fill:hover::after, .talk-card:hover::after, .route:hover .route-go::after, a.go:hover::after, a:hover > .go::after { transform:rotate(45deg); }
  .cursor-light { transition:opacity 0.6s ease-out; }
  .spot { transition:opacity 0.5s ease-out; }
  .tile:hover .spot, .role:hover .spot, .talks > li:hover .spot, .channel:hover .spot, .route:hover .spot { opacity:1; }
  .hero-list a { transition:transform 0.5s var(--ease-out); }
  .hero-list a:hover { transform:translate3d(10px, 0, 0); }
  /* the lit row: its neighbours step back */
  .rows > li, .stages li { transition:opacity 0.4s ease-out, transform 0.6s var(--ease-out); }
  .rows:hover > li:not(:hover), .stages:hover li:not(:hover) { opacity:0.42; }
  .rows > li:hover { transform:translate3d(8px, 0, 0); }
  .channel, .route { transition:transform 0.6s var(--ease-out); }
  .channel:hover, .route:hover { transform:translate3d(0, -6px, 0); }

  /* Things rise as they arrive */
  html.js:not(.no-motion) [data-rise] { opacity:0; transform:translate3d(0, 28px, 0); transition:opacity 0.7s ease-out, transform 1.1s var(--ease-out); transition-delay:calc(var(--i, 0) * 70ms); }
  html.js:not(.no-motion) [data-rise].is-in { opacity:1; transform:none; }

  /* Headlines: each word rises out of its own mask */
  html.js:not(.no-motion) .split .w { display:inline-block; overflow:hidden; vertical-align:top; padding-bottom:0.16em; margin-bottom:-0.16em; }
  html.js:not(.no-motion) .split .w > span { display:inline-block; transform:translate3d(0, 114%, 0); transition:transform 1.25s var(--ease-out); transition-delay:calc(var(--i, 0) * 60ms + var(--d, 0ms)); }
  html.js:not(.no-motion) .split.is-in .w > span { transform:none; }

  /* Panels and pictures settle into place */
  html.js:not(.no-motion) [data-lift] { opacity:0; transform:translate3d(0, 44px, 0) scale(0.97); transition:opacity 0.7s ease-out, transform 1.2s var(--ease-out); transition-delay:calc(var(--i, 0) * 80ms); }
  html.js:not(.no-motion) [data-lift].is-in { opacity:1; transform:none; }

  /* The opening: the portrait settles, the light is drawn */
  html.js:not(.no-motion) .hero-portrait img { opacity:0; transform:scale(1.12); transition:opacity 1.4s ease-out, transform 2.4s var(--ease-out); }
  html.js.is-ready .hero-portrait img { opacity:1; transform:none; }
  html.js:not(.no-motion) .hero-bg, html.js:not(.no-motion) .page-panel::before { opacity:0; transition:opacity 2s ease-out 0.2s; }
  html.js.is-ready .hero-bg { opacity:0.3; }
  html.js.is-ready .page-panel::before { opacity:0.55; }
  html.js.is-ready body[data-page="steph-sense"] .page-panel::before { opacity:0.4; }
  html.js.is-ready body[data-page="profile"] .page-panel::before { opacity:0.45; }
  html.js:not(.no-motion) .beam { opacity:0; transform:rotate(11deg) scaleY(0); transition:opacity 0.8s ease-out 0.5s, transform 1.6s var(--ease-out) 0.5s; }
  html.js.is-ready .beam { opacity:0.85; transform:rotate(11deg) translate3d(var(--bx, 0px), 0, 0); }

  /* A sentence lights word by word as it is read */
  html.js:not(.no-motion) [data-reveal] .rw { opacity:0.22; transition:opacity 0.6s cubic-bezier(0.44, 0, 0.56, 1); }
  html.js:not(.no-motion) [data-reveal] .rw.on { opacity:1; }
}
@keyframes vt-out { to { opacity:0; transform:translate3d(0, -16px, 0); } }
@keyframes vt-in { from { opacity:0; transform:translate3d(0, 24px, 0); } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation:none !important; transition:none !important; scroll-behavior:auto !important; }
  .cursor-light, .scroll-line::after { display:none; }
}

/* ---------- Print: the profile is made to be saved as a PDF ---------- */
@media print {
  :root { --paper:#fff; --stone:#fff; --ink:#000; --muted:#222; --dim:#555; --rule:#ccc; --line:#888; --accent:#000; }
  html, body { background:#fff; color:#000; font-size:10.5pt; }
  .site-header, .site-footer, .end-band, .band, .skip, .scroll-line, .cursor-light, .ticker, .marquee, .actions, .page-head .photo, .beam, .spot { display:none !important; }
  .page-head, .page-panel { padding:0; background:none; border-radius:0; }
  .page-panel::before, .page-panel::after { display:none; }
  .zone { padding:0 0 14pt; }
  .zone-head { margin-bottom:6pt; }
  .zone-body { margin:0; max-width:none; }
  h1 { font-size:26pt !important; } h2 { font-size:13pt; } h3 { font-size:12pt; }
  .tag { border:0; padding:0; min-height:0; margin-bottom:2pt; }
  .role { padding:8pt 0; border:0; border-top:1px solid #ccc; border-radius:0; break-inside:avoid; }
  .rows > li strong, .rows--plain > li { font-size:11pt; }
  a { text-decoration:none; }
}
@media (max-width:55.99rem) { .page-panel { --beam-x:96%; } .page-panel .beam { opacity:0.45; } html.js.is-ready .page-panel .beam { opacity:0.45; } }