/* traclet.ca: sleek and contemporary. Plus Jakarta Sans for display, Geist for reading, Geist Mono for small labels.
   Black and deep purple, with orange, blue and a few bright accents carried in gradients. */
@font-face { font-family: "Jakarta"; src: url(/fonts/jakarta.woff2) format("woff2"); font-weight: 200 800; font-display: swap; }
@font-face { font-family: "Geist"; src: url(/fonts/geist.woff2) format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url(/fonts/geist-mono.woff2) format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  --ink: #07050d;      /* page */
  --deep: #0e0a1a;     /* raised */
  --plum: #1a1030;     /* cards */
  --violet: #7c5cff;
  --orange: #ff7a1a;
  --amber: #ffb547;
  --blue: #2f7dff;
  --cyan: #3ad8ff;
  --pink: #ff4fa8;
  --lime: #c3ff5a;
  --text-c: #f4f1fb;
  --mute: #a39cb8;
  --line: rgba(255,255,255,.08);
  --line2: rgba(255,255,255,.14);
  --g-brand: linear-gradient(100deg, var(--violet), var(--blue) 45%, var(--orange));
  --g-sun: linear-gradient(100deg, var(--orange), var(--pink) 55%, var(--violet));
  --g-sea: linear-gradient(100deg, var(--blue), var(--cyan));
  --display: "Jakarta", "Geist", system-ui, sans-serif;
  --text: "Geist", system-ui, sans-serif;
  --mono: "Geist Mono", ui-monospace, monospace;
  --gutter: clamp(18px, 4.5vw, 72px);
  --r: 20px;
  --ease: cubic-bezier(.2, .8, .2, 1);
  /* names the older components still use */
  --night: var(--ink); --plate: var(--plum); --grid: var(--line2); --chalk: var(--text-c); --sonar: var(--cyan); --sodium: var(--orange);
}
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background: var(--ink); }
body { margin: 0; color: var(--text-c); background: var(--ink); font: 400 17px/1.6 var(--text); -webkit-font-smoothing: antialiased; overflow-x: clip; }
body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(60% 50% at 85% 0%, rgba(124,92,255,.14), transparent 70%), radial-gradient(50% 40% at 0% 60%, rgba(47,125,255,.08), transparent 70%), radial-gradient(40% 40% at 100% 100%, rgba(255,122,26,.07), transparent 70%); }
a { color: inherit; }
img { display: block; max-width: 100%; height: auto; }
button { font: inherit; color: inherit; }
::selection { background: var(--violet); color: #fff; }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; border-radius: 6px; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 50; background: var(--orange); color: var(--ink); padding: 8px 12px; border-radius: 8px; }
.skip:focus { left: 8px; }
h1, h2, h3 { margin: 0; font-weight: inherit; }
p { margin: 0; }
.ic { width: 1.15em; height: 1.15em; flex: none; vertical-align: -.2em; }

/* header: floating glass bar */
.top { position: fixed; z-index: 20; top: 14px; left: 50%; translate: -50% 0; width: min(1240px, calc(100% - 2 * var(--gutter) + 24px)); display: flex; align-items: center; gap: 22px; padding: 10px 12px 10px 20px; border-radius: 999px; background: rgba(14,10,26,.55); border: 1px solid var(--line); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4); font: 500 .84rem var(--text); transition: background .3s; }
.mark { display: inline-flex; align-items: center; gap: 9px; font: 800 1.05rem var(--display); letter-spacing: -.03em; text-decoration: none; }
.mark i { width: 18px; height: 18px; border-radius: 6px; background: var(--g-brand); box-shadow: 0 0 18px rgba(124,92,255,.6); transform: rotate(45deg) scale(.8); }
.nav { display: flex; gap: 4px; margin-left: auto; }
.nav a { text-decoration: none; color: var(--mute); padding: 7px 12px; border-radius: 999px; transition: color .2s, background .2s; }
.nav a:hover, .nav a.is-on { color: var(--text-c); background: rgba(255,255,255,.07); }
.clock { color: var(--mute); font: 400 .78rem var(--mono); font-variant-numeric: tabular-nums; padding-right: 8px; }
.clock span { color: var(--amber); }
@media (max-width: 1020px) { .clock { display: none; } }
@media (max-width: 760px) { .top { gap: 10px; padding-left: 14px; } .nav { overflow-x: auto; scrollbar-width: none; } .nav::-webkit-scrollbar { display: none; } .nav a { white-space: nowrap; padding: 7px 9px; } }

/* buttons */
.btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 22px; border: 1px solid var(--line2); border-radius: 999px; font: 600 .9rem var(--text); text-decoration: none; color: var(--text-c); background: rgba(255,255,255,.04); cursor: pointer; transition: border-color .25s, background .25s, transform .25s var(--ease); }
.btn:hover { border-color: rgba(255,255,255,.35); background: rgba(255,255,255,.08); transform: translateY(-1px); }
.btn .ic { transition: transform .25s var(--ease); }
.btn:hover .ic { transform: translateX(3px); }
.btn-solid { border: 0; color: #fff; background: var(--g-sun); background-size: 200% 100%; box-shadow: 0 10px 40px -10px rgba(255,79,168,.6); }
.btn-solid:hover { background-position: 100% 0; background-color: transparent; }

/* hero */
.hero { position: relative; min-height: 100svh; display: grid; grid-template-rows: 1fr auto; align-items: end; overflow: hidden; isolation: isolate; padding-top: 110px; }
.aurora { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; display: block; background: radial-gradient(80% 70% at 70% 30%, #2a1650, var(--ink)); }
.hero-copy { text-shadow: 0 2px 30px rgba(7,5,13,.8); }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(60% 55% at 15% 62%, rgba(7,5,13,.55), transparent 70%); pointer-events: none; }
.hero::after { content: ""; position: absolute; inset: auto 0 0; height: 40%; z-index: -1; background: linear-gradient(0deg, var(--ink), rgba(7,5,13,0)); pointer-events: none; }
.hero-copy { padding: 0 var(--gutter); max-width: 1400px; }
.kicker { display: inline-flex; align-items: center; gap: 10px; padding: 7px 14px 7px 10px; border: 1px solid var(--line2); border-radius: 999px; background: rgba(7,5,13,.4); backdrop-filter: blur(10px); font: 500 .8rem var(--mono); color: var(--mute); }
.kicker i { width: 8px; height: 8px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 4px rgba(195,255,90,.15), 0 0 12px var(--lime); }
.name { margin-top: 22px; font: 800 clamp(3rem, 10.5vw, 10.5rem)/.9 var(--display); letter-spacing: -.035em; margin-left: -.04em; text-transform: uppercase; }
.name span { display: inline-block; }
.name span:last-child { background: var(--g-brand); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: shine 12s ease-in-out infinite alternate; padding-right: .05em; }
@keyframes shine { to { background-position: 100% 0; } }
.lede { max-width: 40ch; margin-top: 26px; font: 400 clamp(1.1rem, 1.7vw, 1.4rem)/1.5 var(--text); color: #d9d3ea; }
.go { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 30px; }
.more { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }
.stats { margin: clamp(40px, 7vh, 72px) var(--gutter) clamp(12px, 2vh, 20px); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; border: 1px solid var(--line); border-radius: var(--r); background: var(--line); backdrop-filter: blur(14px); overflow: hidden; }
.stats div { padding: 18px 22px; background: rgba(14,10,26,.72); }
.stats dt { font: 700 clamp(1.6rem, 3vw, 2.4rem)/1 var(--display); letter-spacing: -.04em; background: var(--g-sun); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stats div:nth-child(4n+2) dt { background-image: var(--g-sea); } .stats div:nth-child(4n+3) dt { background-image: linear-gradient(100deg, var(--violet), var(--cyan)); } .stats div:nth-child(4n+4) dt { background-image: linear-gradient(100deg, var(--amber), var(--lime)); }
.stats dd { margin: 6px 0 0; font-size: .86rem; color: var(--mute); }
@media (max-width: 760px) { .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .stats div { padding: 14px 16px; } }
.scroll-cue { position: absolute; right: var(--gutter); bottom: calc(clamp(28px, 5vh, 48px) + 110px); width: 26px; height: 42px; border: 1.5px solid var(--line2); border-radius: 14px; }
.scroll-cue i { position: absolute; left: 50%; top: 8px; width: 4px; height: 8px; margin-left: -2px; border-radius: 2px; background: var(--amber); animation: cue 1.8s ease-in-out infinite; }
@keyframes cue { 50% { transform: translateY(12px); opacity: .3; } }
@media (max-width: 900px) { .scroll-cue { display: none; } }

/* sections */
section:not(.hero) { padding: clamp(56px, 7.5vw, 104px) var(--gutter) 0; max-width: 1440px; margin: 0 auto; }
.head { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); grid-template-areas: "e e" "h s"; gap: 14px 40px; align-items: end; margin-bottom: clamp(24px, 3.5vw, 44px); }
.eyebrow { grid-area: e; display: flex; align-items: center; gap: 12px; font: 500 .8rem var(--mono); color: var(--mute); }
.eyebrow span { display: inline-grid; place-items: center; min-width: 38px; height: 26px; padding: 0 10px; border-radius: 999px; background: rgba(255,255,255,.05); border: 1px solid var(--line2); color: var(--text-c); }
.eyebrow .ic { color: var(--amber); }
.eyebrow::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--line2), transparent); }
.head h2 { grid-area: h; font: 800 clamp(2.6rem, 6.4vw, 5.6rem)/.98 var(--display); letter-spacing: -.04em; }
.head .sub { grid-area: s; color: var(--mute); max-width: 46ch; justify-self: end; font-size: 1.02rem; }
@media (max-width: 860px) { .head { grid-template-columns: 1fr; grid-template-areas: "e" "h" "s"; } .head .sub { justify-self: start; } }
.sub-h { display: flex; align-items: center; gap: 12px; margin: clamp(64px, 8vw, 110px) 0 26px; font: 700 clamp(1.4rem, 2.4vw, 2rem) var(--display); letter-spacing: -.03em; }
.sub-h .ic { width: 28px; height: 28px; padding: 6px; border-radius: 10px; color: var(--amber); background: rgba(255,181,71,.1); border: 1px solid rgba(255,181,71,.25); }

/* tones: each card or panel carries a pair of accent colours */
.tone-violet { --c1: var(--violet); --c2: var(--cyan); }
.tone-blue { --c1: var(--blue); --c2: var(--cyan); }
.tone-orange { --c1: var(--orange); --c2: var(--amber); }
.tone-cyan { --c1: var(--cyan); --c2: var(--lime); }
.tone-pink { --c1: var(--pink); --c2: var(--orange); }
.tone-lime { --c1: var(--lime); --c2: var(--cyan); }

/* professional: three role cards */
.roles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.role-card { position: relative; padding: 30px 28px 28px; border-radius: var(--r); background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.015)); border: 1px solid var(--line); overflow: hidden; transition: transform .4s var(--ease), border-color .4s; }
.role-card::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; background: linear-gradient(140deg, var(--c1), transparent 40%, transparent 60%, var(--c2)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: .55; pointer-events: none; }
.role-card::after { content: ""; position: absolute; width: 260px; height: 260px; right: -90px; top: -110px; border-radius: 50%; background: radial-gradient(circle, var(--c1), transparent 65%); opacity: .22; filter: blur(10px); pointer-events: none; }
.role-card:hover { transform: translateY(-4px); }
.rc-ic { width: 54px; height: 54px; display: grid; place-items: center; border-radius: 16px; background: linear-gradient(140deg, var(--c1), var(--c2)); box-shadow: 0 12px 30px -10px var(--c1); color: #fff; }
.rc-ic .ic { width: 28px; height: 28px; }
.role-card h3 { margin-top: 22px; font: 700 1.45rem/1.15 var(--display); letter-spacing: -.03em; }
.role-card > p { margin-top: 12px; color: #cfc8e2; font-size: .98rem; }
.chips { list-style: none; margin: 20px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.chips li { padding: 5px 11px; border-radius: 999px; font: 500 .76rem var(--mono); color: #e7e2f4; background: rgba(255,255,255,.05); border: 1px solid var(--line); }
@media (max-width: 980px) { .roles { grid-template-columns: 1fr; } }

/* capabilities: cards with a spotlight that follows the pointer */
.cap-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.cap { --mx: 50%; --my: 50%; position: relative; padding: 22px 22px 20px; border-radius: 18px; background: var(--deep); border: 1px solid var(--line); overflow: hidden; isolation: isolate; }
.cap::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(320px circle at var(--mx) var(--my), color-mix(in srgb, var(--c1) 26%, transparent), transparent 60%); opacity: 0; transition: opacity .3s; }
.cap:hover::before { opacity: 1; }
.cap-h { display: flex; align-items: center; gap: 12px; }
.cap-h .ic { width: 36px; height: 36px; padding: 8px; border-radius: 12px; color: var(--c1); background: color-mix(in srgb, var(--c1) 14%, transparent); border: 1px solid color-mix(in srgb, var(--c1) 30%, transparent); }
.cap h4 { margin: 0; font: 700 1.02rem/1.2 var(--display); letter-spacing: -.02em; }
.cap ul { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 7px; }
.cap li { position: relative; padding-left: 16px; font-size: .88rem; color: #cbc4de; line-height: 1.35; }
.cap li::before { content: ""; position: absolute; left: 0; top: .5em; width: 6px; height: 6px; border-radius: 2px; background: var(--c1); transform: rotate(45deg); opacity: .8; }
.cap .meter { margin-top: 18px; height: 4px; border-radius: 4px; background: rgba(255,255,255,.06); overflow: hidden; }
.cap .meter i { display: block; height: 100%; width: var(--w); border-radius: inherit; background: linear-gradient(90deg, var(--c1), var(--c2)); transform-origin: left; transform: scaleX(0); transition: transform 1.2s var(--ease); }
.cap.is-in .meter i { transform: scaleX(1); }
@media (max-width: 1100px) { .cap-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .cap-grid { grid-template-columns: 1fr; } }
.certs { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.cert { display: inline-flex; align-items: center; gap: 10px; padding: 9px 14px 9px 10px; border-radius: 12px; background: linear-gradient(120deg, rgba(124,92,255,.14), rgba(47,125,255,.06)); border: 1px solid rgba(124,92,255,.3); font-size: .84rem; }
.cert svg { width: 22px; height: 22px; flex: none; }

/* career timeline, restyled */
.career .gantt { padding: 22px 26px 12px; border-radius: var(--r); background: var(--deep); border: 1px solid var(--line); }
.lane { background-image: linear-gradient(90deg, var(--line) 1px, transparent 1px) !important; }
.lane i { height: 10px !important; top: 8px !important; border-radius: 10px; background: var(--g-sea) !important; box-shadow: 0 0 18px rgba(58,216,255,.35) !important; }
.gantt li.is-now .lane i { background: var(--g-sun) !important; box-shadow: 0 0 18px rgba(255,79,168,.45) !important; }
.gantt li { border-top-color: var(--line) !important; }
.who b { font: 700 1rem/1.25 var(--display) !important; letter-spacing: -.02em !important; }
.gantt li p { color: var(--mute) !important; }
.gantt li:hover .who b { color: var(--amber) !important; }

/* tools marquee */
.marquee { margin-top: clamp(56px, 7.5vw, 96px); padding: 20px 0; border-block: 1px solid var(--line); overflow: hidden; -webkit-mask: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.mq-track { display: flex; gap: 14px; width: max-content; animation: mq 60s linear infinite; }
.mq-track span { display: inline-flex; align-items: center; gap: 14px; font: 600 1.3rem var(--display); letter-spacing: -.02em; color: rgba(244,241,251,.55); white-space: nowrap; }
.mq-track span::after { content: ""; width: 7px; height: 7px; border-radius: 2px; transform: rotate(45deg); background: var(--g-sun); }
.mq-track span:nth-child(3n) { color: var(--text-c); }
@keyframes mq { to { transform: translateX(-50%); } }

/* disciplines: tabs on the left, a panel with an animated picture on the right */
.disc { display: grid; grid-template-columns: minmax(240px, 330px) minmax(0, 1fr); gap: 22px; align-items: start; }
.disc-tabs { display: grid; gap: 8px; position: sticky; top: 96px; }
.disc-tabs button { all: unset; box-sizing: border-box; cursor: pointer; display: grid; grid-template-columns: 34px 30px 1fr; align-items: center; gap: 10px; padding: 16px 18px; border-radius: 16px; border: 1px solid var(--line); background: rgba(255,255,255,.02); font: 700 1.08rem var(--display); letter-spacing: -.02em; color: var(--mute); transition: color .25s, background .25s, border-color .25s, transform .25s var(--ease); }
.disc-tabs .n { font: 500 .74rem var(--mono); color: rgba(163,156,184,.7); }
.disc-tabs .ic { width: 24px; height: 24px; color: var(--c1); opacity: .7; }
.disc-tabs button:hover { color: var(--text-c); transform: translateX(3px); }
.disc-tabs button[aria-selected="true"] { color: var(--text-c); border-color: color-mix(in srgb, var(--c1) 50%, transparent); background: linear-gradient(110deg, color-mix(in srgb, var(--c1) 20%, transparent), rgba(255,255,255,.02)); box-shadow: 0 16px 40px -24px var(--c1); }
.disc-tabs button[aria-selected="true"] .ic { opacity: 1; }
.disc-tabs button:focus-visible { outline: 2px solid var(--amber); }
.disc-panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .95fr); gap: 10px; min-height: 480px; border-radius: 24px; border: 1px solid var(--line); background: radial-gradient(90% 90% at 100% 0%, color-mix(in srgb, var(--c1) 16%, transparent), transparent 60%), var(--deep); overflow: hidden; animation: panelIn .6s var(--ease); }
@keyframes panelIn { from { opacity: 0; transform: translateY(14px); } }
.dp-copy { padding: clamp(26px, 3.5vw, 44px); display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.dp-k { font: 500 .78rem var(--mono); color: var(--c1); }
.dp-copy h3 { font: 800 clamp(1.7rem, 3vw, 2.5rem)/1.08 var(--display); letter-spacing: -.035em; }
.dp-copy > p:not(.dp-k) { color: #d0c9e3; }
.ticks { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 10px; }
.ticks li { display: flex; gap: 12px; align-items: flex-start; font-size: .95rem; }
.ticks li::before { content: ""; flex: none; width: 18px; height: 18px; margin-top: 2px; border-radius: 6px; background: linear-gradient(140deg, var(--c1), var(--c2)) center / 100% no-repeat; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Crect width='18' height='18' rx='6' fill='%23000' fill-opacity='.35'/%3E%3Cpath d='M5 9.5l2.6 2.5L13 6.5' stroke='%23000' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Crect width='18' height='18' rx='6' fill='%23000' fill-opacity='.35'/%3E%3Cpath d='M5 9.5l2.6 2.5L13 6.5' stroke='%23000' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% no-repeat; }
.dp-copy .btn { margin-top: 8px; }
.dp-vis { position: relative; display: grid; place-items: center; padding: 20px; color: var(--text-c); }
.dp-vis::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,.08) 1px, transparent 1px); background-size: 22px 22px; -webkit-mask: radial-gradient(70% 70% at 50% 50%, #000, transparent); mask: radial-gradient(70% 70% at 50% 50%, #000, transparent); }
.vis { position: relative; width: 100%; max-width: 460px; height: auto; overflow: visible; }
@media (max-width: 1020px) { .disc { grid-template-columns: 1fr; } .disc-tabs { position: static; grid-template-columns: repeat(3, minmax(0, 1fr)); } .disc-tabs button { grid-template-columns: 1fr; gap: 6px; padding: 14px; font-size: .95rem; } .disc-tabs .n { display: none; } }
@media (max-width: 760px) { .disc-panel { grid-template-columns: 1fr; } .dp-vis { order: -1; min-height: 220px; } .disc-tabs { grid-template-columns: 1fr 1fr; } }

/* the six pictures */
.vis-radar .sweep { transform-origin: 200px 150px; animation: spin 5s linear infinite; }
.vis-radar .blips circle { fill: var(--c2); animation: blip 5s linear infinite; }
.vis-radar .blips circle:nth-child(2) { animation-delay: -1.3s; } .vis-radar .blips circle:nth-child(3) { animation-delay: -2.6s; } .vis-radar .blips circle:nth-child(4) { animation-delay: -3.7s; }
.vis-radar .needle { transform-origin: 200px 150px; animation: needle 7s ease-in-out infinite alternate; }
@keyframes spin { to { transform: rotate(-360deg); } }
@keyframes blip { 0%, 100% { opacity: .15; } 8% { opacity: 1; } }
@keyframes needle { from { transform: rotate(-30deg); } to { transform: rotate(60deg); } }
.vis-net .nodes circle { fill: var(--deep); stroke: var(--c1); stroke-width: 2; }
.vis-net .nodes circle:nth-child(3) { fill: color-mix(in srgb, var(--c1) 30%, var(--deep)); stroke: var(--c2); }
.vis-net .pk circle { fill: var(--c2); filter: drop-shadow(0 0 6px var(--c2)); }
.vis-gantt .bars rect { fill: url(#none); fill: var(--c1); transform-box: fill-box; transform-origin: left; animation: grow 4s var(--ease) infinite; animation-delay: var(--d); }
.vis-gantt .bars rect:nth-child(even) { fill: var(--c2); }
.vis-gantt .ms { fill: var(--amber); animation: blip 4s infinite 1.6s; }
.vis-gantt .now { stroke: var(--pink); stroke-width: 2; animation: scan 4s linear infinite; }
@keyframes grow { 0% { transform: scaleX(0); } 30%, 85% { transform: scaleX(1); } 100% { transform: scaleX(1); opacity: 0; } }
@keyframes scan { from { transform: translateX(-210px); } to { transform: translateX(120px); } }
.vis-grow .cols rect { fill: url(#vg); transform-box: fill-box; transform-origin: bottom; animation: rise 5s var(--ease) infinite; animation-delay: var(--d); }
.vis-grow .trend { stroke: var(--c2); stroke-dasharray: 420; stroke-dashoffset: 420; animation: draw 5s var(--ease) infinite; filter: drop-shadow(0 0 8px var(--c2)); }
.vis-grow .peak { fill: var(--c2); animation: blip 5s infinite 2.2s; }
@keyframes rise { 0% { transform: scaleY(0); } 35%, 90% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }
@keyframes draw { 0%, 10% { stroke-dashoffset: 420; } 55%, 90% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 0; opacity: 0; } }
.vis-stage .beams path { stroke: var(--c1); stroke-width: 2.5; transform-origin: 200px 70px; animation: beam 2.4s ease-in-out infinite alternate; animation-delay: var(--d); filter: drop-shadow(0 0 6px var(--c1)); }
.vis-stage .beams path:nth-child(even) { stroke: var(--c2); filter: drop-shadow(0 0 6px var(--c2)); }
.vis-stage .truss { fill: rgba(255,255,255,.12); } .vis-stage .src { fill: #fff; filter: drop-shadow(0 0 10px var(--c1)); }
.vis-stage .deck { fill: rgba(255,255,255,.08); }
.vis-stage .crowd circle { fill: #2a1f45; animation: bob .9s ease-in-out infinite alternate; animation-delay: var(--d); }
@keyframes beam { from { transform: rotate(var(--r)); opacity: .45; } to { transform: rotate(calc(var(--r) * -1)); opacity: 1; } }
@keyframes bob { to { transform: translateY(-5px); } }
.vis-arts .ap path { fill: color-mix(in srgb, var(--c1) 55%, transparent); stroke: var(--deep); stroke-width: 2; }
.vis-arts .ap { animation: aperture 6s ease-in-out infinite; transform-box: view-box; }
.vis-arts .ap path:nth-child(odd) { fill: color-mix(in srgb, var(--c2) 55%, transparent); }
.vis-arts .wave rect { fill: var(--c1); transform-box: fill-box; transform-origin: center; animation: eqb 1.1s ease-in-out infinite alternate; animation-delay: var(--d); }
.vis-arts .wave rect:nth-child(even) { fill: var(--c2); }
@keyframes aperture { 0%, 100% { transform: translate(130px, 150px) rotate(0deg) scale(1); } 50% { transform: translate(130px, 150px) rotate(60deg) scale(.82); } }
@keyframes eqb { from { transform: scaleY(.3); } to { transform: scaleY(1); } }

/* contact */
.contact-card { position: relative; padding: clamp(36px, 6vw, 80px); border-radius: 32px; overflow: hidden; isolation: isolate; border: 1px solid var(--line); background: var(--deep); }
.contact-card::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(60% 90% at 0% 100%, rgba(255,122,26,.35), transparent 60%), radial-gradient(60% 90% at 100% 0%, rgba(124,92,255,.4), transparent 60%), radial-gradient(40% 60% at 70% 100%, rgba(47,125,255,.3), transparent 70%); }
.contact-card .eyebrow { margin-bottom: 26px; }
.contact-card h2 { max-width: 16ch; font: 800 clamp(2.2rem, 5.5vw, 4.6rem)/1.02 var(--display); letter-spacing: -.035em; }
.contact-card > p:not(.eyebrow):not(.go) { margin-top: 18px; color: #d9d3ea; max-width: 44ch; }

/* footer */
.foot { max-width: 1440px; margin: clamp(56px, 7vw, 96px) auto 0; padding: 28px var(--gutter) 40px; display: flex; flex-wrap: wrap; gap: 16px 28px; align-items: center; justify-content: space-between; font-size: .86rem; color: var(--mute); border-top: 1px solid var(--line); }
.foot nav { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.foot a { text-decoration: none; } .foot nav a:hover { color: var(--text-c); }

/* reveal on scroll */
.rv { opacity: 0; transform: translateY(12px); transition: opacity .45s var(--ease), transform .5s var(--ease); transition-delay: var(--rd, 0s); }
.rv.is-in { opacity: 1; transform: none; }

/* --- older components, carried over --- */
/* field log: globe and viewfinder */
.field-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.3fr); gap: clamp(16px, 3vw, 40px); align-items: center; }
.globe { position: relative; aspect-ratio: 1; cursor: grab; touch-action: pan-y; }
.globe:active { cursor: grabbing; }
.globe canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.view { margin: 0; position: relative; }
.view-media { position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: var(--plate); border: 1px solid var(--grid); }
.view-media img { width: 100%; height: 100%; object-fit: cover; transition: opacity .35s; }
.view-media img.is-swap { opacity: 0; }
.view-media::before, .view-media::after { content: ""; position: absolute; width: 28px; height: 28px; z-index: 1; pointer-events: none; border: 2px solid rgba(230,237,246,.85); }
.view-media::before { left: 14px; top: 14px; border-right: 0; border-bottom: 0; }
.view-media::after { right: 14px; bottom: 14px; border-left: 0; border-top: 0; }
.view-play { position: absolute; inset: 0; margin: auto; width: max-content; height: max-content; padding: 14px 22px; border: 0; border-radius: 2px; background: var(--sodium); color: var(--night); font: 600 .85rem var(--mono); cursor: pointer; z-index: 2; }
.view figcaption { display: grid; grid-template-columns: 1fr auto; gap: 2px 16px; padding-top: 14px; }
.view figcaption b { font: 600 1.15rem var(--mono); font-stretch: 87.5%; letter-spacing: -.02em; }
.view figcaption span { color: var(--mute); grid-column: 1; }
.view figcaption code { grid-column: 2; grid-row: 1 / 3; align-self: start; font: 400 .72rem/1.7 var(--mono); color: var(--sodium); text-align: right; }
.log { list-style: none; margin: clamp(24px, 3vw, 40px) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.log button { all: unset; box-sizing: border-box; cursor: pointer; padding: 8px 12px; border: 1px solid var(--grid); border-radius: 2px; font: 400 .74rem var(--mono); color: var(--mute); transition: color .2s, border-color .2s, background .2s; }
.log button:hover { color: var(--chalk); border-color: var(--mute); }
.log button[aria-current="true"] { color: var(--night); background: var(--sodium); border-color: var(--sodium); }
.log button.film::after { content: " ▸"; }
.log button:focus-visible { outline: 2px solid var(--sodium); outline-offset: 2px; }
@media (max-width: 900px) { .field-grid { grid-template-columns: 1fr; } .globe { max-width: 440px; width: 100%; margin: 0 auto; } }


/* footer */
.foot { margin-top: clamp(56px, 7vw, 96px); padding: 28px var(--gutter) 36px; border-top: 1px solid var(--grid); display: flex; flex-wrap: wrap; gap: 14px 28px; justify-content: space-between; font: 400 .76rem var(--mono); color: var(--mute); }
.foot nav { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.foot a { text-decoration: none; } .foot a:hover { color: var(--chalk); }

/* film lightbox */
.lb { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: var(--gutter); background: rgba(6,12,22,.9); backdrop-filter: blur(6px); }
.lb-media { width: min(1200px, 100%); aspect-ratio: 16 / 9; background: #000; }
.lb-media iframe { width: 100%; height: 100%; border: 0; }
.lb-media video { width: 100%; height: 100%; display: block; background: #000; object-fit: contain; }
.f-badge { position: absolute; left: 10px; top: 10px; padding: 4px 9px; border-radius: 999px; font: 600 .66rem var(--mono); letter-spacing: .08em; text-transform: uppercase; color: #fff; background: rgba(255,79,168,.85); }
.lb-close { position: absolute; right: 18px; top: 14px; width: 44px; height: 44px; border: 1px solid var(--grid); background: var(--plate); color: var(--chalk); font-size: 1.4rem; cursor: pointer; }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }
.view figcaption code { white-space: pre; }

/* 404 */
.lost { min-height: 100svh; display: grid; place-content: center; gap: 18px; padding: var(--gutter); text-align: center; }
.lost h1 { font: 800 clamp(2.6rem, 8vw, 6rem)/1 var(--mono); font-stretch: 75%; letter-spacing: -.05em; }
.lost p { color: var(--mute); }
.lost .pill { display: inline-block; padding: 13px 20px; border: 1px solid var(--grid); font: 500 .82rem var(--mono); text-decoration: none; color: var(--chalk); }

/* experience: two timelines (professional and creative), 1998 to now */
.gantt { --y0: 1998; --span: 29; position: relative; }
.gantt ol { list-style: none; margin: 0; padding: 0; }
.gantt li { display: grid; grid-template-columns: minmax(200px, 300px) minmax(0, 1fr); gap: 4px 24px; align-items: center; padding: 10px 0; border-top: 1px solid rgba(36,64,94,.55); }
.gantt li:first-child { border-top: 0; }
.who b { display: block; font: 600 .92rem/1.25 var(--mono); font-stretch: 87.5%; letter-spacing: -.01em; }
.who span { display: block; font-size: .86rem; color: var(--mute); }
.lane { position: relative; height: 26px; background-image: linear-gradient(90deg, rgba(36,64,94,.45) 1px, transparent 1px); background-size: calc(100% / 12) 100%; }
.lane i { position: absolute; top: 9px; height: 8px; left: calc((var(--s) - var(--y0)) / var(--span) * 100%); width: calc((var(--e) - var(--s)) / var(--span) * 100%); min-width: 6px; background: var(--sonar); box-shadow: 0 0 12px rgba(95,212,255,.35); }
.lane em { position: absolute; top: 4px; left: calc((var(--e) - var(--y0)) / var(--span) * 100% + 10px); font: 400 .7rem var(--mono); font-style: normal; color: var(--mute); white-space: nowrap; }
.gantt li.is-now .lane i { background: var(--sodium); box-shadow: 0 0 14px rgba(255,174,66,.5); }
.gantt li.is-now .lane em { left: auto; right: calc(100% - (var(--s) - var(--y0)) / var(--span) * 100% + 10px); color: var(--sodium); }
.gantt li p { grid-column: 2; font-size: .86rem; color: #b9c7d8; max-height: 0; overflow: hidden; transition: max-height .35s var(--ease); }
.gantt li:hover p, .gantt li:focus-within p { max-height: 3em; }
.gantt li:hover .who b { color: var(--sonar); }
.axis-row { display: grid; grid-template-columns: minmax(200px, 300px) minmax(0, 1fr); gap: 4px 24px; }
.axis { position: relative; height: 22px; font: 400 .66rem var(--mono); color: var(--mute); }
.axis span { position: absolute; left: calc((var(--y) - var(--y0)) / var(--span) * 100%); transform: translateX(-50%); }
.creds { margin-top: 18px; max-width: 80ch; font-size: .9rem; color: #b9c7d8; }
.creds b { font: 600 .78rem var(--mono); color: var(--chalk); margin-right: 10px; }
.exp .creds:first-of-type { margin-top: 32px; }
@media (max-width: 760px) {
  .gantt li { grid-template-columns: 1fr; }
  .gantt li p { grid-column: 1; max-height: none; }
  .axis-row { grid-template-columns: 1fr; } .axis-row > span { display: none; }
}

.gantt li.end .lane em { left: auto; right: calc(100% - (var(--s) - var(--y0)) / var(--span) * 100% + 10px); }
@media (max-width: 760px) { .axis span:nth-child(even) { display: none; } }
@media (max-width: 480px) { .nav { gap: 12px; overflow-x: auto; scrollbar-width: none; max-width: calc(100vw - 110px); } .nav::-webkit-scrollbar { display: none; } .nav a { white-space: nowrap; } }

.gantt li p { max-height: none; }

/* lasers overlay */
.lasers { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 40; pointer-events: none; opacity: 0; transition: opacity .3s; }
.lasers.is-on { opacity: 1; }

/* console */
.term-btn { font: 600 .74rem var(--mono); color: var(--sonar); background: transparent; border: 1px solid var(--grid); border-radius: 2px; padding: 5px 8px; cursor: pointer; }
.term-btn:hover, .term-btn[aria-expanded="true"] { border-color: var(--sonar); background: rgba(95,212,255,.1); }
.term { position: fixed; z-index: 45; right: var(--gutter); bottom: 20px; width: min(560px, calc(100vw - 2 * var(--gutter))); height: min(380px, 60vh); display: grid; grid-template-rows: auto 1fr auto; border: 1px solid var(--sonar); background: rgba(7,14,25,.94); backdrop-filter: blur(8px); box-shadow: 0 30px 80px -20px rgba(0,0,0,.8), 0 0 0 1px rgba(95,212,255,.15); font: 400 .8rem/1.6 var(--mono); }
.term-bar { display: flex; justify-content: space-between; align-items: center; padding: 6px 12px; border-bottom: 1px solid var(--grid); color: var(--mute); font-size: .72rem; }
.term-bar button { background: none; border: 0; color: var(--mute); font-size: 1.1rem; cursor: pointer; }
.term-out { overflow-y: auto; padding: 10px 12px; }
.term-out p { margin: 0 0 6px; color: #cfdbe8; }
.term-out b { color: var(--sonar); font-weight: 600; }
.term-out .echo { color: var(--chalk); } .term-out .pr { color: var(--sodium); }
.term-out .dim { color: var(--mute); } .term-out .err { color: #ff7b8a; } .term-out .ok { color: #4dff9a; }
.term-in { display: flex; gap: 10px; align-items: center; padding: 8px 12px; border-top: 1px solid var(--grid); }
.term-in label { color: var(--sodium); }
.term-in input { flex: 1; background: transparent; border: 0; color: var(--chalk); font: inherit; outline: none; caret-color: var(--sodium); }
@media (max-width: 640px) { .term-btn { margin-left: 0; } }

/* icons */
.ic { width: 1.15em; height: 1.15em; flex: none; vertical-align: -.2em; }
.h-ic { width: .62em; height: .62em; margin-right: .22em; vertical-align: .02em; color: var(--sonar); stroke-width: 1.5; }
.log button { display: inline-flex; align-items: center; gap: 8px; }
.log button.film::after { content: none; }

/* music deck */
.deck { border: 1px solid var(--grid); background: radial-gradient(60% 120% at 0% 0%, rgba(255,174,66,.08), transparent 60%), var(--plate); padding: clamp(16px, 2.4vw, 28px); display: grid; gap: 18px; position: relative; }
.deck-now { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 18px; align-items: center; }
.deck-play, .mini button { display: grid; place-items: center; border: 0; cursor: pointer; border-radius: 50%; background: var(--sodium); color: var(--night); }
.deck-play { width: 64px; height: 64px; box-shadow: 0 0 0 0 rgba(255,174,66,.5); transition: transform .2s; }
.deck-play:hover { transform: scale(1.05); }
.deck-play svg, .mini button svg { width: 26px; height: 26px; fill: currentColor; }
.i-pause { display: none; } .is-playing .i-play { display: none; } .is-playing .i-pause { display: inline; }
.is-playing .deck-play { animation: deckPulse 1.9s ease-out infinite; }
@keyframes deckPulse { from { box-shadow: 0 0 0 0 rgba(255,174,66,.55); } to { box-shadow: 0 0 0 22px rgba(255,174,66,0); } }
.deck-meta small { display: block; font: 400 .7rem var(--mono); color: var(--mute); }
.deck-meta b { display: block; font: 700 clamp(1.4rem, 3vw, 2.2rem)/1.05 var(--mono); font-stretch: 75%; letter-spacing: -.04em; }
.deck-meta span { font-size: .86rem; color: var(--mute); }
.deck-nav { display: flex; gap: 6px; }
.deck-nav button { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--grid); background: transparent; color: var(--chalk); cursor: pointer; border-radius: 2px; }
.deck-nav button:hover { border-color: var(--sonar); }
.deck-nav svg { width: 18px; height: 18px; fill: currentColor; }
.deck-time { font: 400 .78rem var(--mono); color: var(--mute); font-variant-numeric: tabular-nums; min-width: 9ch; text-align: right; }
.deck-wave { position: relative; height: 96px; cursor: pointer; border-top: 1px solid rgba(36,64,94,.6); border-bottom: 1px solid rgba(36,64,94,.6); }
.deck-wave:focus-visible { outline: 2px solid var(--sodium); }
.deck-wave .scope { width: 100%; height: 100%; }
.deck-head { position: absolute; top: -6px; bottom: -6px; width: 2px; background: var(--chalk); box-shadow: 0 0 10px var(--chalk); pointer-events: none; }
.tracks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 6px; }
.tracks button { all: unset; box-sizing: border-box; width: 100%; height: 100%; min-height: 44px; cursor: pointer; display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; padding: 10px 12px; border: 1px solid rgba(36,64,94,.7); font: 500 .8rem var(--mono); color: var(--mute); transition: color .2s, border-color .2s, background .2s; }
.tracks button .ic { color: rgba(142,163,189,.6); }
.tracks button small { color: rgba(142,163,189,.6); }
.tracks button:hover { color: var(--chalk); border-color: var(--mute); }
.tracks button.is-on { color: var(--night); background: var(--sodium); border-color: var(--sodium); }
.tracks button.is-on .ic, .tracks button.is-on small { color: rgba(11,21,36,.7); }
.tracks button:focus-visible { outline: 2px solid var(--sodium); outline-offset: 2px; }
.deck-src { font: 400 .76rem var(--mono); } .deck-src a { color: var(--mute); }
.sc { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; left: 0; bottom: 0; }
.sc iframe { width: 300px; height: 120px; border: 0; }
@media (max-width: 640px) { .deck-now { grid-template-columns: auto 1fr; } .deck-nav, .deck-time { grid-column: 2; } .deck-play { width: 54px; height: 54px; } }

/* mini player: follows you down the page while music plays */
.mini { position: fixed; z-index: 30; left: var(--gutter); bottom: 18px; display: flex; align-items: center; gap: 12px; padding: 8px 10px 8px 8px; border: 1px solid rgba(255,174,66,.5); background: rgba(11,21,36,.92); backdrop-filter: blur(10px); box-shadow: 0 20px 50px -20px rgba(0,0,0,.8); overflow: hidden; transform: translateY(140%); transition: transform .45s var(--ease); }
.mini.is-away { transform: none; }
.mini button { width: 36px; height: 36px; }
.mini button svg { width: 18px; height: 18px; }
.mini button#mini-next { background: transparent; color: var(--chalk); border: 1px solid var(--grid); border-radius: 2px; }
.mini-meta { display: flex; align-items: center; gap: 12px; text-decoration: none; font: 600 .8rem var(--mono); }
.mini-bars { display: flex; align-items: flex-end; gap: 2px; height: 14px; }
.mini-bars i { width: 3px; height: 30%; background: var(--sodium); }
.is-playing .mini-bars i { animation: eq .9s ease-in-out infinite alternate; }
.mini-bars i:nth-child(2) { animation-delay: -.3s; } .mini-bars i:nth-child(3) { animation-delay: -.6s; } .mini-bars i:nth-child(4) { animation-delay: -.15s; }
@keyframes eq { from { height: 20%; } to { height: 100%; } }
.mini-prog { position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: var(--sodium); transform-origin: left; transform: scaleX(0); }

/* lab */
.lab-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-bottom: 14px; }
.lab-tabs button { all: unset; box-sizing: border-box; cursor: pointer; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center; padding: 14px 16px; border: 1px solid var(--grid); background: rgba(18,35,58,.5); font: 600 .9rem var(--mono); font-stretch: 87.5%; transition: border-color .2s, background .2s; }
.lab-tabs button .ic { grid-row: 1 / 3; width: 26px; height: 26px; color: var(--mute); }
.lab-tabs button small { font: 400 .68rem var(--mono); color: var(--mute); }
.lab-tabs button[aria-selected="true"] { border-color: var(--sonar); background: linear-gradient(160deg, rgba(95,212,255,.14), rgba(18,35,58,.6)); }
.lab-tabs button[aria-selected="true"] .ic { color: var(--sonar); }
.lab-tabs button:focus-visible { outline: 2px solid var(--sodium); outline-offset: 2px; }
.lab-panel { border: 1px solid var(--grid); background: #0a1626; min-height: 420px; position: relative; }
.fw-stage, .wall-stage { position: relative; height: clamp(360px, 52vh, 520px); }
.fw-stage canvas, .wall-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; }
#fw { cursor: crosshair; }
.fw-hud { position: absolute; left: 14px; top: 12px; display: flex; gap: 18px; font: 400 .74rem var(--mono); color: var(--mute); pointer-events: none; }
.fw-hud b { color: var(--chalk); font-weight: 600; }
.fw-start { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 16px; text-align: center; padding: 20px; background: rgba(10,22,38,.7); backdrop-filter: blur(3px); }
.fw-start p { max-width: 36ch; color: #c8d4e3; }
.seq-wrap { padding: 0 18px 18px; }
.seq-beams { height: 150px; position: relative; margin: 0 -18px 14px; border-bottom: 1px solid var(--grid); background: radial-gradient(60% 100% at 50% 0%, rgba(95,212,255,.06), transparent); }
.seq-beams canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.seq-grid { display: grid; gap: 6px; overflow-x: auto; }
.seq-row { display: grid; grid-template-columns: 54px repeat(16, minmax(18px, 1fr)); gap: 4px; align-items: center; }
.seq-row span { font: 400 .72rem var(--mono); color: var(--mute); }
.seq-row button { height: 30px; border: 1px solid rgba(36,64,94,.9); background: rgba(18,35,58,.6); cursor: pointer; padding: 0; border-radius: 2px; }
.seq-row button:nth-of-type(4n+1) { border-left-color: rgba(142,163,189,.5); }
.seq-row button[aria-pressed="true"] { background: var(--c); border-color: var(--c); box-shadow: 0 0 10px var(--c); }
.seq-row button.is-now { outline: 1px solid var(--chalk); outline-offset: -1px; }
.seq-ctl { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 16px; }
.seq-bpm { display: inline-flex; align-items: center; gap: 10px; font: 400 .76rem var(--mono); color: var(--mute); margin-left: auto; }
.seq-bpm input { accent-color: var(--sodium); } .seq-bpm b { color: var(--chalk); min-width: 3ch; }
.net-form { display: grid; gap: 8px; padding: 22px 22px 0; }
.net-form label { font: 400 .74rem var(--mono); color: var(--mute); }
.net-form input { font: 600 clamp(1.3rem, 3vw, 2rem) var(--mono); font-stretch: 87.5%; color: var(--chalk); background: transparent; border: 0; border-bottom: 1px solid var(--grid); padding: 6px 0; outline: none; max-width: 520px; }
.net-form input:focus { border-color: var(--sonar); }
.net-err { font: 400 .76rem var(--mono); color: #ff7b8a; min-height: 1.2em; }
.net-bits { display: flex; flex-wrap: wrap; gap: 2px; padding: 8px 22px 0; font: 500 .8rem var(--mono); }
.net-bits i { font-style: normal; width: 1.15em; text-align: center; padding: 3px 0; }
.net-bits i.n { color: var(--night); background: rgba(95,212,255,.55); } .net-bits i.n.one { background: var(--sonar); }
.net-bits i.h { color: var(--mute); background: rgba(255,174,66,.1); } .net-bits i.h.one { color: var(--sodium); }
.net-bits s { width: 8px; }
.net-out { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); margin: 20px 22px 22px; padding: 1px 0 0 1px; }
.net-out div { border: 1px solid var(--grid); margin: -1px 0 0 -1px; padding: 12px 14px; }
.net-out dt { font: 400 .7rem var(--mono); color: var(--mute); } .net-out dd { margin: 4px 0 0; font: 600 .95rem var(--mono); font-stretch: 87.5%; word-break: break-all; }
.wall-hint { position: absolute; left: 16px; top: 14px; font: 400 .74rem var(--mono); color: var(--mute); pointer-events: none; max-width: 40ch; }
.wall-clear { position: absolute; right: 14px; bottom: 14px; }
@media (max-width: 760px) { .lab-tabs { grid-template-columns: 1fr 1fr; } .seq-bpm { margin-left: 0; } }

/* compact portfolio */
.field-grid { grid-template-columns: 240px minmax(0, 1fr) 260px; gap: 28px; align-items: start; }
.field .globe { width: 240px; }
.field .view-media { aspect-ratio: 2 / 1; }
.field .log { margin: 0; flex-direction: column; flex-wrap: nowrap; gap: 4px; }
.field .log button { width: 100%; }
@media (max-width: 1000px) { .field-grid { grid-template-columns: 1fr; } .field .globe { display: none; } .field .log { flex-direction: row; overflow-x: auto; padding-bottom: 6px; } .field .log li { flex: none; } }


/* --- carried-over components, brought into the new look --- */
.head h2 .h-ic { display: none; }
.lab-tabs button, .tracks button, .log button, .deck-nav button, .net-out, .seq-row button { border-radius: 14px !important; }
.lab-tabs button { background: rgba(255,255,255,.02); border-color: var(--line); font-family: var(--display); font-weight: 700; letter-spacing: -.02em; }
.lab-tabs button small { font-family: var(--mono); }
.lab-tabs button[aria-selected="true"] { border-color: rgba(124,92,255,.6); background: linear-gradient(120deg, rgba(124,92,255,.25), rgba(47,125,255,.06)); }
.lab-tabs button[aria-selected="true"] .ic { color: var(--amber); }
.lab-panel { border-radius: 22px; overflow: hidden; border-color: var(--line); background: #0a0715; }
.net-out div, .net-out { border-color: var(--line) !important; }
.deck { border-radius: 24px; border-color: var(--line); background: radial-gradient(60% 120% at 0% 0%, rgba(255,122,26,.16), transparent 60%), radial-gradient(60% 120% at 100% 100%, rgba(124,92,255,.2), transparent 60%), var(--deep); }
.deck-play { background: var(--g-sun); color: #fff; }
.deck-meta b, .view figcaption b { font-family: var(--display) !important; font-stretch: normal !important; letter-spacing: -.035em !important; }
.tracks button.is-on { background: var(--g-sun); border-color: transparent; color: #fff; }
.tracks button.is-on .ic, .tracks button.is-on small { color: rgba(255,255,255,.8); }
.mini { border-radius: 999px; border-color: rgba(255,79,168,.45); background: rgba(14,10,26,.9); padding-right: 14px; }
.mini button { background: var(--g-sun); color: #fff; }
.mini-bars i, .mini-prog { background: var(--amber); }
.log button[aria-current="true"] { background: var(--g-sun); color: #fff; border-color: transparent; }
.view-media { border-radius: 22px; border-color: var(--line); }
.view-media::before, .view-media::after { border-color: rgba(255,255,255,.7); }
.view-play { border-radius: 999px; background: var(--g-sun); color: #fff; }
.btn.small, .wall-clear { padding: 10px 16px; }
.term { border-radius: 18px; border-color: rgba(124,92,255,.6); background: rgba(10,7,20,.94); overflow: hidden; }
.term-btn { color: var(--amber); border-radius: 999px; padding: 7px 11px; border-color: var(--line2); font-family: var(--mono); }
.term-btn:hover, .term-btn[aria-expanded="true"] { border-color: var(--amber); background: rgba(255,181,71,.1); }
.term-out b { color: var(--cyan); }
.lb-close { border-radius: 50%; }
.seq-row button[aria-pressed="true"] { border-radius: 8px !important; }
.fw-start, .wall-hint { font-family: var(--text); }

.fw-start { background: rgba(10,7,21,.72); }
.fw-stage, .wall-stage { background: #0a0715; }

/* ===== multi-page: inner page tops, the launcher, roles in brief, organizations, contact form ===== */
section.page-top { padding-top: clamp(116px, 13vw, 168px); }
.head h1 { grid-area: h; font: 800 clamp(2.4rem, 5.8vw, 5rem)/1 var(--display); letter-spacing: -.04em; text-wrap: balance; }
.sub-h { margin-top: clamp(44px, 5.5vw, 72px); }
.caps > .sub-h:first-child { margin-top: 0; }

/* launcher: a bento grid of tiles, each with a live preview */

/* what I do: the three roles, short */
.brief-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.brief-card { position: relative; display: grid; align-content: start; gap: 12px; padding: 28px 26px 64px; border-radius: var(--r); background: var(--deep); border: 1px solid var(--line); text-decoration: none; transition: border-color .3s, transform .4s var(--ease); }
.brief-card:hover { border-color: color-mix(in srgb, var(--c1) 50%, transparent); transform: translateY(-3px); }
.brief-card .rc-ic { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 14px; color: var(--c1); background: color-mix(in srgb, var(--c1) 14%, transparent); border: 1px solid color-mix(in srgb, var(--c1) 35%, transparent); }
.brief-card .rc-ic .ic { width: 24px; height: 24px; }
.brief-card h3 { font: 700 1.3rem/1.2 var(--display); letter-spacing: -.025em; }
.brief-card p { color: #cbc4de; font-size: .96rem; }
.brief-card .more-arrow { position: absolute; left: 26px; bottom: 22px; color: var(--c1); transition: transform .3s var(--ease); }
.brief-card:hover .more-arrow { transform: translateX(5px); }
@media (max-width: 900px) { .brief-grid { grid-template-columns: 1fr; } }

/* organizations: grouped names, set like a credits list */
.org-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 0; border-top: 1px solid var(--line); }
.org-group { padding: 26px 26px 30px 0; border-bottom: 1px solid var(--line); }
.org-group h3 { display: flex; align-items: center; gap: 10px; font: 500 .74rem var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--amber); margin-bottom: 16px; }
.org-group h3::before { content: ""; width: 18px; height: 1px; background: var(--g-sun); }
.org-group ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.org-group li { font: 600 1.02rem/1.3 var(--display); letter-spacing: -.015em; color: var(--text-c); }
@media (min-width: 700px) and (max-width: 1099px) { .org-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); } .org-group:nth-child(even) { padding-left: 26px; border-left: 1px solid var(--line); } }
@media (min-width: 1100px) { .org-groups { grid-template-columns: repeat(4, minmax(0, 1fr)); } .org-group:not(:nth-child(4n + 1)) { padding-left: 24px; border-left: 1px solid var(--line); } }

/* contact: copy on the left, form on the right */
.contact-card { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 70px); align-items: start; }
.cc-copy > p:not(.eyebrow) { margin-top: 18px; color: #d9d3ea; max-width: 40ch; }
.cc-copy .cc-alt { color: var(--mute) !important; font-size: .9rem; }
.cc-copy .cc-alt a { color: var(--text-c); }
.cform { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.cform .f { display: grid; gap: 7px; }
.cform .f-wide, .cform .cf-foot { grid-column: 1 / -1; }
.cform label { font: 500 .8rem var(--mono); color: var(--mute); letter-spacing: .02em; }
.cform label em { font-style: normal; opacity: .6; }
.cform input, .cform textarea { width: 100%; padding: 13px 15px; border-radius: 14px; border: 1px solid var(--line2); background: rgba(7,5,13,.55); color: var(--text-c); font: 400 1rem/1.4 var(--text); transition: border-color .2s, background .2s; }
.cform textarea { resize: vertical; min-height: 140px; }
.cform input:focus, .cform textarea:focus { outline: none; border-color: var(--violet); background: rgba(7,5,13,.8); }
.cform .f.err input, .cform .f.err textarea { border-color: var(--pink); }
.cform small { min-height: 1em; font-size: .8rem; color: #ff9cc9; }
.cform small:empty { display: none; }
.cf-foot { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 4px; }
.cf-foot .btn { border: 0; cursor: pointer; }
.cf-foot .btn:disabled { opacity: .6; cursor: progress; }
.cf-msg { color: #ff9cc9; font-size: .9rem; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.cf-done { display: grid; gap: 10px; align-content: center; padding: 30px; border-radius: 22px; background: rgba(7,5,13,.5); border: 1px solid var(--line2); min-height: 260px; outline: none; }
.cf-done .ic { width: 34px; height: 34px; color: var(--lime); }
.cf-done h3 { font: 800 1.8rem/1.1 var(--display); letter-spacing: -.03em; }
.cf-done p { color: #d9d3ea; }
@media (max-width: 900px) { .contact-card { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .cform { grid-template-columns: 1fr; } }

/* the next page, at the bottom of each inner page */
.next-page { display: flex; align-items: baseline; gap: 16px; margin-top: clamp(48px, 6vw, 80px); padding: 24px 0; border-top: 1px solid var(--line); text-decoration: none; }
.next-page small { font: 500 .78rem var(--mono); color: var(--mute); text-transform: uppercase; letter-spacing: .14em; }
.next-page b { font: 800 clamp(2rem, 5vw, 4rem)/1 var(--display); letter-spacing: -.04em; background: var(--g-brand); -webkit-background-clip: text; background-clip: text; color: transparent; }
.next-page .ic { width: 34px; height: 34px; align-self: center; margin-left: auto; transition: transform .3s var(--ease); }
.next-page:hover .ic { transform: translateX(8px); }
.foot nav[aria-label="Pages"] a { color: var(--text-c); }
/* practice pictures: design and development, music and sound */
.vis-web .win, .vis-web .art { fill: color-mix(in srgb, var(--c1) 8%, var(--deep)); stroke: color-mix(in srgb, var(--c1) 45%, transparent); stroke-width: 1.5; }
.vis-web .art { fill: color-mix(in srgb, var(--c2) 10%, var(--deep)); stroke: color-mix(in srgb, var(--c2) 50%, transparent); }
.vis-web .dots circle { fill: rgba(255,255,255,.25); } .vis-web .bar { stroke: rgba(255,255,255,.1); }
.vis-web .code rect { fill: var(--c1); opacity: .75; transform-box: fill-box; transform-origin: left; animation: type 4.5s steps(12) infinite; animation-delay: var(--d); }
.vis-web .code rect:nth-child(3n) { fill: var(--c2); }
.vis-web .shape { fill: none; stroke-width: 2.5; transform-box: fill-box; transform-origin: center; }
.vis-web .s1 { stroke: var(--c1); animation: wob 6s ease-in-out infinite; } .vis-web .s2 { stroke: var(--c2); animation: wob 6s ease-in-out infinite -2s; } .vis-web .s3 { stroke: var(--pink); animation: wob 6s ease-in-out infinite -4s; }
.vis-web .cursor { fill: #fff; filter: drop-shadow(0 0 6px var(--c2)); animation: drag 6s ease-in-out infinite; }
@keyframes type { 0% { transform: scaleX(0); } 40%, 85% { transform: scaleX(1); } 100% { transform: scaleX(1); opacity: 0; } }
@keyframes wob { 0%, 100% { transform: rotate(0) scale(1); } 50% { transform: rotate(14deg) scale(1.08); } }
@keyframes drag { 0%, 100% { transform: translate(0, 0); } 30% { transform: translate(-46px, -40px); } 60% { transform: translate(-18px, -70px); } }
.vis-music .keys > rect { fill: rgba(255,255,255,.85); } .vis-music .blk rect { fill: var(--deep); }
.vis-music .notes rect { fill: var(--c1); opacity: .5; animation: lit 2.4s linear infinite; }
.vis-music .notes rect:nth-child(even) { fill: var(--c2); }
.vis-music .notes rect:nth-child(1) { animation-delay: 0s; } .vis-music .notes rect:nth-child(7) { animation-delay: .25s; } .vis-music .notes rect:nth-child(2) { animation-delay: .5s; } .vis-music .notes rect:nth-child(3) { animation-delay: .8s; } .vis-music .notes rect:nth-child(4) { animation-delay: 1.1s; } .vis-music .notes rect:nth-child(5) { animation-delay: 1.4s; } .vis-music .notes rect:nth-child(8) { animation-delay: 1.6s; } .vis-music .notes rect:nth-child(6) { animation-delay: 1.8s; }
.vis-music .head { stroke: var(--pink); stroke-width: 2; filter: drop-shadow(0 0 6px var(--pink)); animation: play 2.4s linear infinite; }
@keyframes lit { 0%, 100% { opacity: .45; } 8% { opacity: 1; } 30% { opacity: .55; } }
@keyframes play { from { transform: translateX(0); } to { transform: translateX(288px); } }
/* volunteering: a short timeline, newest first */
.vol-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 40px; }
.vol-list li { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 18px; padding: 24px 0; border-bottom: 1px solid var(--line); }
.v-yr { font: 500 .78rem/1.6 var(--mono); color: var(--amber); padding-top: 3px; }
.vol-list h3 { font: 700 1.15rem/1.25 var(--display); letter-spacing: -.02em; }
.vol-list .v-role { margin-top: 3px; font: 500 .8rem var(--mono); color: var(--cyan); }
.vol-list .v-text { margin-top: 8px; color: #cbc4de; font-size: .95rem; }
.vol-list .v-stats { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; border: 0; }
.vol-list .v-stats li { display: inline-flex; align-items: baseline; gap: 6px; padding: 6px 12px; border: 1px solid var(--line2); border-radius: 999px; background: rgba(255,255,255,.03); font: 400 .78rem var(--mono); color: var(--mute); }
.vol-list .v-stats b { font: 700 .98rem var(--display); color: var(--text-c); }
@media (max-width: 900px) { .vol-list { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .vol-list li { grid-template-columns: 1fr; gap: 6px; } }

/* ===== navigation: contact button, mobile menu, scroll progress ===== */
.nav-cta { flex: none; padding: 8px 16px; border-radius: 999px; text-decoration: none; font-weight: 600; color: #fff; background: var(--g-sun); box-shadow: 0 6px 20px -8px rgba(255,79,168,.7); }
.nav-cta:hover { filter: brightness(1.1); }
.menu-btn { display: none; flex: none; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line2); background: rgba(255,255,255,.04); cursor: pointer; position: relative; }
.menu-btn span:not(.sr) { position: absolute; left: 11px; right: 11px; height: 2px; border-radius: 2px; background: var(--text-c); transition: transform .3s var(--ease), top .3s var(--ease); }
.menu-btn span:nth-child(1) { top: 15px; } .menu-btn span:nth-child(2) { top: 23px; }
.top.is-open .menu-btn span:nth-child(1) { top: 19px; transform: rotate(45deg); } .top.is-open .menu-btn span:nth-child(2) { top: 19px; transform: rotate(-45deg); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
@media (max-width: 980px) {
  .nav { display: none; }
  .menu-btn { display: block; }
  .top { gap: 10px; }
  .nav-cta { margin-left: auto; }
  .top.is-open .nav { display: grid; position: absolute; top: calc(100% + 10px); left: 0; right: 0; width: auto; max-width: none; overflow: visible; gap: 4px; margin: 0; padding: 10px; border-radius: 22px; background: #0e0a1a; border: 1px solid var(--line2); box-shadow: 0 30px 60px -20px rgba(0,0,0,.8); }
  .top.is-open .nav a { padding: 13px 16px; font-size: 1rem; border-radius: 14px; }
  .term-btn { display: none; }
}
.progress { position: fixed; z-index: 30; top: 0; left: 0; right: 0; height: 3px; pointer-events: none; }
.progress i { display: block; height: 100%; width: 100%; transform-origin: left; transform: scaleX(0); background: var(--g-brand); box-shadow: 0 0 12px rgba(124,92,255,.7); }

/* ===== cards (after North Rain): a panel with a heading and dense rows ===== */
.card { margin-top: 18px; padding: clamp(22px, 3vw, 34px); border-radius: 24px; background: linear-gradient(170deg, rgba(124,92,255,.07), rgba(14,10,26,.6) 40%); border: 1px solid var(--line); }
.card-h { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; font: 700 clamp(1.3rem, 2.2vw, 1.7rem) var(--display); letter-spacing: -.03em; }
.card-h .ic { width: 30px; height: 30px; padding: 6px; border-radius: 10px; color: var(--amber); background: rgba(255,181,71,.1); border: 1px solid rgba(255,181,71,.25); }
.card .gantt { padding: 0 !important; background: none !important; border: 0 !important; }
.pro .roles { margin-top: 8px; }

/* on-this-page jump bar */
.jump { display: flex; flex-wrap: wrap; gap: 8px; margin: -8px 0 26px; }
.jump a { display: inline-flex; align-items: center; gap: 8px; padding: 9px 15px; border-radius: 999px; border: 1px solid var(--line2); background: rgba(255,255,255,.03); text-decoration: none; font: 500 .86rem var(--text); color: #d9d3ea; transition: border-color .2s, background .2s, color .2s; }
.jump a .ic { color: var(--cyan); }
.jump a:hover { color: #fff; border-color: rgba(58,216,255,.5); background: rgba(58,216,255,.08); }

/* platforms and certifications: tabs over rows of tags */
.tk-bar { display: inline-flex; gap: 4px; padding: 5px; margin-bottom: 20px; border-radius: 999px; background: rgba(7,5,13,.6); border: 1px solid var(--line2); max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.tk-bar button { all: unset; box-sizing: border-box; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 999px; white-space: nowrap; font: 600 .9rem var(--text); color: var(--mute); transition: color .2s, background .25s; }
.tk-bar button[aria-selected="true"] { color: #fff; background: var(--g-sun); box-shadow: 0 6px 18px -8px rgba(255,79,168,.7); }
.tk-bar button:focus-visible { outline: 2px solid var(--amber); }
.tk-lede { color: var(--mute); max-width: 62ch; margin-bottom: 14px; }
.stack { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: 14px; }
.srow { display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: 18px; background: rgba(7,5,13,.45); border: 1px solid var(--line); transition: border-color .3s; }
.srow:hover { border-color: var(--line2); }
.srow-name { display: flex; align-items: center; gap: 11px; font: 650 .98rem/1.25 var(--display); letter-spacing: -.015em; }
.srow-name small { margin-left: auto; font: 500 .72rem var(--mono); color: var(--mute); padding: 2px 8px; border-radius: 999px; border: 1px solid var(--line2); }
.srow-ico { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; color: var(--cyan); background: rgba(58,216,255,.08); border: 1px solid rgba(58,216,255,.22); transition: color .25s, background .25s, border-color .25s; }
.srow-ico svg { width: 20px; height: 20px; }
.srow:hover .srow-ico { color: var(--amber); background: rgba(255,181,71,.1); border-color: rgba(255,181,71,.3); }
.srow.is-short .tags li:nth-child(n+9) { display: none; }
.srow-more { all: unset; cursor: pointer; align-self: flex-start; margin-top: auto; font: 500 .78rem var(--mono); color: var(--cyan); padding: 2px 0; }
.srow-more:hover, .srow-more:focus-visible { color: var(--amber); }
.srow-more:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; border-radius: 4px; }
@media (max-width: 720px) { .srow.is-short .tags li:nth-child(n+6) { display: none; } }
.tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.tags li { padding: 4px 9px; border-radius: 7px; font: 400 .8rem var(--mono); color: #d6d0e8; background: rgba(7,5,13,.55); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); transition: color .2s, box-shadow .2s; }
.tags li:hover { color: var(--amber); box-shadow: inset 0 0 0 1px rgba(255,181,71,.45); }

/* organizations: a sector bar above the columns */
.org-bar { margin-bottom: 28px; }
.ob-total { font: 500 .95rem var(--text); color: var(--mute); margin-bottom: 12px; }
.ob-total b { color: var(--text-c); font-family: var(--display); font-size: 1.15rem; }
.ob-track { display: flex; gap: 3px; height: 14px; border-radius: 999px; overflow: hidden; }
.ob-track span { min-width: 6px; transform-origin: left; animation: obgrow 1.2s var(--ease) both; }
.ob-track span:nth-child(2) { animation-delay: .06s; } .ob-track span:nth-child(3) { animation-delay: .12s; } .ob-track span:nth-child(4) { animation-delay: .18s; } .ob-track span:nth-child(5) { animation-delay: .24s; } .ob-track span:nth-child(6) { animation-delay: .3s; } .ob-track span:nth-child(7) { animation-delay: .36s; } .ob-track span:nth-child(8) { animation-delay: .42s; }
@keyframes obgrow { from { transform: scaleX(0); } }
.ob-key { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: .84rem; color: #cbc4de; }
.ob-key li { display: inline-flex; align-items: center; gap: 7px; }
.ob-key i { width: 10px; height: 10px; border-radius: 3px; }
.ob-key b { color: var(--mute); font-weight: 500; font-family: var(--mono); font-size: .78rem; }
.ob-0 { background: var(--pink); } .ob-1 { background: var(--cyan); } .ob-2 { background: var(--violet); } .ob-3 { background: var(--lime); } .ob-4 { background: var(--orange); } .ob-5 { background: var(--blue); } .ob-6 { background: var(--amber); } .ob-7 { background: #b48cff; }
.org-group:nth-child(1) h3::before { background: var(--pink); } .org-group:nth-child(2) h3::before { background: var(--cyan); } .org-group:nth-child(3) h3::before { background: var(--violet); } .org-group:nth-child(4) h3::before { background: var(--lime); } .org-group:nth-child(5) h3::before { background: var(--orange); } .org-group:nth-child(6) h3::before { background: var(--blue); } .org-group:nth-child(7) h3::before { background: var(--amber); } .org-group:nth-child(8) h3::before { background: #b48cff; }
.org-group h3::before { width: 10px !important; height: 10px !important; border-radius: 3px; }

.ob-un { background: repeating-linear-gradient(135deg, rgba(255,255,255,.28) 0 4px, rgba(255,255,255,.1) 4px 8px); }
.ob-total span { color: var(--mute); margin: 0 4px; }

/* organizations: a single-colour logo strip */
.logo-strip { list-style: none; margin: 0 0 34px; padding: 22px 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 26px 40px; border-block: 1px solid var(--line); }
.logo-strip li { flex: 0 1 auto; display: grid; place-items: center; height: 40px; }
.logo-strip img { height: 32px; max-width: 150px; width: auto; object-fit: contain; filter: brightness(0) invert(1); opacity: .62; transition: opacity .3s, filter .3s; }
.logo-strip li:hover img { opacity: 1; }
@media (max-width: 700px) { .logo-strip { justify-content: center; gap: 22px 30px; } .logo-strip img { height: 26px; max-width: 120px; } }

/* Lab: three featured projects that open in a player on the page */
.proj-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.proj-card { all: unset; box-sizing: border-box; cursor: pointer; position: relative; display: flex; flex-direction: column; border-radius: 22px; overflow: hidden; background: var(--deep); border: 1px solid var(--line); transition: transform .4s var(--ease), border-color .3s, box-shadow .4s; }
.proj-card:hover, .proj-card:focus-visible { transform: translateY(-4px); border-color: color-mix(in srgb, var(--c1) 55%, transparent); box-shadow: 0 24px 60px -24px color-mix(in srgb, var(--c1) 60%, transparent); }
.proj-card:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }
.pc-img { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: #000; }
.pc-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.proj-card:hover .pc-img img { transform: scale(1.04); }
.pc-body { display: grid; gap: 7px; padding: 20px 22px 70px; }
.pc-body b { font: 800 1.45rem/1.1 var(--display); letter-spacing: -.03em; }
.pc-body > span { color: #cbc4de; font-size: .93rem; line-height: 1.5; }
.pc-body em { font: 500 .74rem var(--mono); font-style: normal; color: var(--c1); }
.pc-play { position: absolute; left: 22px; bottom: 20px; display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px 9px 12px; border-radius: 999px; font: 600 .86rem var(--text); color: #fff; background: var(--g-sun); box-shadow: 0 8px 22px -10px rgba(255,79,168,.8); }
.pc-play svg { width: 16px; height: 16px; fill: currentColor; }
.proj-card { text-decoration: none; color: inherit; }
.stage { margin-top: 18px; border-radius: 22px; overflow: hidden; border: 1px solid var(--line2); background: #000; box-shadow: 0 40px 80px -40px rgba(124,92,255,.6); }
.stage-bar { display: flex; align-items: center; gap: 12px; padding: 10px 12px 10px 18px; background: var(--deep); border-bottom: 1px solid var(--line); }
.stage-bar b { font: 700 1rem var(--display); }
.stage-hint { color: var(--mute); font: 400 .78rem var(--mono); margin-right: auto; }
.stage-btn { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; border: 1px solid var(--line2); background: rgba(255,255,255,.04); color: var(--text-c); font-size: 1.3rem; cursor: pointer; }
.stage-btn svg { width: 18px; height: 18px; }
.stage-btn:hover { background: rgba(255,255,255,.1); }
.stage-frame { height: min(84vh, 860px); width: 100%; }
.stage-frame iframe { width: 100%; height: 100%; border: 0; display: block; background: #000; }
.sub-h small { margin-left: 10px; font: 400 .85rem var(--text); color: var(--mute); letter-spacing: 0; }
@media (max-width: 900px) { .proj-grid { grid-template-columns: 1fr; } .stage-frame { height: 78vh; } .stage-hint { display: none; } }

/* organizations I've built */
.built-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.built-card { position: relative; display: grid; align-content: start; gap: 6px; padding: 22px 22px 24px; border-radius: 22px; text-decoration: none; background: linear-gradient(160deg, color-mix(in srgb, var(--c1) 12%, var(--deep)), var(--deep) 55%); border: 1px solid var(--line); transition: transform .4s var(--ease), border-color .3s; }
a.built-card:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--c1) 55%, transparent); }
.built-card.is-past { background: var(--deep); opacity: .85; }
.bc-mono { width: 48px; height: 48px; display: grid; place-items: center; margin-bottom: 8px; border-radius: 14px; font: 800 1.05rem var(--display); letter-spacing: -.02em; color: #fff; background: linear-gradient(135deg, var(--c1), var(--c2)); box-shadow: 0 10px 24px -12px var(--c1); }
.is-past .bc-mono { background: rgba(255,255,255,.08); color: var(--mute); box-shadow: none; }
.bc-meta { position: absolute; top: 22px; right: 20px; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; font: 500 .74rem var(--mono); color: var(--mute); }
.bc-status { font-style: normal; padding: 3px 9px; border-radius: 999px; background: rgba(195,255,90,.12); color: var(--lime); border: 1px solid rgba(195,255,90,.3); }
.is-past .bc-status { background: rgba(255,255,255,.05); color: var(--mute); border-color: var(--line2); }
.built-card b { font: 800 1.25rem/1.15 var(--display); letter-spacing: -.025em; }
.bc-role { font: 500 .8rem var(--mono); color: var(--c1); }
.built-card p { margin-top: 6px; color: #cbc4de; font-size: .93rem; line-height: 1.5; }
.bc-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font: 500 .8rem var(--mono); color: var(--text-c); }
.bc-link .ic { width: 15px; height: 15px; transition: transform .3s var(--ease); }
a.built-card:hover .bc-link .ic { transform: translateX(4px); }

.bc-logo { width: 64px; height: 64px; display: grid; place-items: center; margin-bottom: 8px; padding: 7px; border-radius: 16px; background: #07050d; border: 1px solid color-mix(in srgb, var(--c1) 35%, transparent); box-shadow: 0 10px 24px -14px var(--c1); overflow: hidden; }
.bc-logo img { width: 100%; height: 100%; object-fit: contain; }

/* Lab project pages: the app runs edge to edge and fills the screen under one slim bar */
section.play.page-top { max-width: none; padding: 86px 0 0; }
.play-head { display: flex; align-items: center; gap: 14px; padding: 0 var(--gutter) 10px; max-width: 1440px; margin: 0 auto; }
.play-back { display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px 7px 9px; border-radius: 999px; border: 1px solid var(--line2); color: var(--text-c); text-decoration: none; font: 500 .82rem var(--mono); white-space: nowrap; }
.play-back .ic { transform: rotate(180deg); width: 16px; height: 16px; }
.play-back:hover { background: rgba(255,255,255,.07); }
.play-title { min-width: 0; margin-right: auto; display: flex; align-items: baseline; gap: 14px; }
.play-title h1 { font: 700 clamp(1.15rem, 2vw, 1.5rem)/1.1 var(--display); margin: 0; white-space: nowrap; }
.play-title p { margin: 0; color: var(--mute); font-size: .86rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.play-tools { display: flex; align-items: center; gap: 8px; }
.play-tools em { font: 400 .75rem var(--mono); font-style: normal; color: var(--mute); margin-right: 6px; white-space: nowrap; }
.play-tools a.stage-btn { color: var(--text-c); }
.play-frame { width: 100%; height: calc(100svh - 136px); min-height: 460px; background: #000; border-block: 1px solid var(--line2); }
.play-frame iframe { width: 100%; height: 100%; border: 0; display: block; background: #000; }
.play-frame:fullscreen { border: 0; }
.page-play .next-page { display: none; }
@media (max-width: 900px) { .play-title p, .play-tools em { display: none; } }
@media (max-width: 760px) { section.play.page-top { padding-top: 80px; } .play-frame { height: calc(100svh - 128px); } }

/* non-profits and charities among the organizations I've supported */
.npo-dot { display: inline-block; width: 11px; height: 11px; margin: 0 6px 1px 8px; background: #ff3b4a; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21s-7.5-4.6-10-9.3C.4 8.4 2.3 4 6.4 4c2.3 0 4 1.3 5.6 3.3C13.6 5.3 15.3 4 17.6 4 21.7 4 23.6 8.4 22 11.7 19.5 16.4 12 21 12 21z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21s-7.5-4.6-10-9.3C.4 8.4 2.3 4 6.4 4c2.3 0 4 1.3 5.6 3.3C13.6 5.3 15.3 4 17.6 4 21.7 4 23.6 8.4 22 11.7 19.5 16.4 12 21 12 21z'/%3E%3C/svg%3E") center / contain no-repeat; filter: drop-shadow(0 0 4px rgba(255,59,74,.6)); vertical-align: middle; }
.ob-total .npo-dot { margin: 0 6px 2px 0; }
.nw { white-space: nowrap; }
.career-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.career-head .card-h { margin: 0; }
.career-head .tl-bar { margin: 0; }
.career { margin-bottom: 22px; }
@media (max-width: 760px) {
  .gantt li p, .gantt li:hover p { max-height: none; }
  .lane { margin-top: 14px; }
  .gantt li .lane em, .gantt li.end .lane em, .gantt li.is-now .lane em { left: 0; right: auto; top: -15px; }
}
.hero + .explore { padding-top: clamp(20px, 3vw, 36px); }
.ob-key .npo-dot { width: 12px; height: 12px; margin: 0; border-radius: 0; }
.ob-key .ob-key-npo { flex-basis: 100%; margin-top: 4px; }

/* hero name: Eric heavy, Traclet hairline */
.name span:first-child { font-weight: 800; }
.name span:last-child { font-weight: 200; letter-spacing: -.02em; }

/* What I do: a professional card and a creative card */
.wid-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.wid-card { padding: 28px 26px 18px; border-radius: var(--r); border: 1px solid var(--line); background: linear-gradient(165deg, color-mix(in srgb, var(--c1) 12%, var(--deep)), var(--deep) 55%); }
.wid-professional { --c1: var(--blue); }
.wid-creative { --c1: var(--pink); }
.wid-card header { margin-bottom: 10px; }
.wid-k { font: 800 clamp(1.6rem, 2.6vw, 2.2rem)/1.05 var(--display); letter-spacing: -.035em; color: var(--text-c); }
.wid-sub { margin-top: 6px; color: var(--mute); font-size: .95rem; }
.wid-card ul { list-style: none; margin: 0; padding: 0; }
.wid-card li + li { border-top: 1px solid var(--line); }
.wid-card a { display: grid; grid-template-columns: 42px minmax(0, 1fr) 20px; gap: 14px; align-items: center; padding: 14px 0; color: inherit; text-decoration: none; }
.wid-ic { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; color: var(--c1); background: color-mix(in srgb, var(--c1) 12%, transparent); border: 1px solid color-mix(in srgb, var(--c1) 32%, transparent); }
.wid-ic .ic { width: 21px; height: 21px; }
.wid-t b { display: block; font: 650 1.02rem/1.25 var(--display); letter-spacing: -.015em; transition: color .25s; }
.wid-t span { display: block; margin-top: 2px; color: #b9b2cd; font-size: .9rem; line-height: 1.45; }
.wid-go { color: var(--mute); transition: transform .3s var(--ease), color .25s; }
.wid-go .ic { width: 18px; height: 18px; }
.wid-card a:hover .wid-t b, .wid-card a:focus-visible .wid-t b { color: var(--c1); }
.wid-card a:hover .wid-go { color: var(--c1); transform: translateX(4px); }
@media (max-width: 900px) { .wid-grid { grid-template-columns: 1fr; } }

/* hero: the place, small and quiet under the name */
.place { margin-top: clamp(10px, 1.4vw, 18px); display: flex; align-items: center; gap: 14px; font: 300 clamp(.78rem, 1.1vw, .95rem)/1 var(--mono); letter-spacing: .42em; text-transform: uppercase; color: #cfc8e2; }
.place::before { content: ""; width: clamp(28px, 4vw, 56px); height: 1px; background: var(--g-sun); }
.hero .name { margin-top: 0; }

/* Photo and film page: opening reel, then map, photographs and films as separate sections */
.reel { position: relative; max-width: 1100px; margin: 0 auto 22px; border-radius: 24px; overflow: hidden; border: 1px solid var(--line); background: #000; aspect-ratio: 21 / 9; }
.reel video { width: 100%; height: 100%; object-fit: cover; display: block; }
.reel figcaption { position: absolute; left: 22px; bottom: 18px; font: 500 .8rem var(--mono); letter-spacing: .12em; text-transform: uppercase; color: #fff; text-shadow: 0 1px 12px rgba(0,0,0,.7); }
.reel figcaption span { color: rgba(255,255,255,.7); }
.sub-h small { margin-left: 4px; font: 400 .8rem var(--mono); letter-spacing: 0; color: var(--mute); }
.gallery { columns: 3 320px; column-gap: 14px; }
.g-item { all: unset; box-sizing: border-box; cursor: zoom-in; position: relative; display: block; width: 100%; margin: 0 0 14px; break-inside: avoid; border-radius: 16px; overflow: hidden; background: #000; border: 1px solid var(--line); }
.g-item img { width: 100%; height: auto; display: block; transition: transform .6s var(--ease), opacity .3s; }
.g-item:hover img, .g-item:focus-visible img { transform: scale(1.03); }
.g-item:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }
.g-cap { position: absolute; inset: auto 0 0 0; padding: 40px 16px 14px; display: grid; gap: 2px; background: linear-gradient(0deg, rgba(7,5,13,.85), transparent); opacity: 0; transform: translateY(6px); transition: opacity .3s, transform .3s var(--ease); }
.g-cap b { font: 650 .98rem var(--display); color: #fff; }
.g-cap span { font: 400 .74rem var(--mono); color: rgba(255,255,255,.75); }
.g-item:hover .g-cap, .g-item:focus-visible .g-cap { opacity: 1; transform: none; }
@media (hover: none) { .g-cap { opacity: 1; transform: none; } }
.films { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 16px; }
.f-item { all: unset; box-sizing: border-box; cursor: pointer; display: grid; gap: 10px; }
.f-thumb { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; background: #000; border: 1px solid var(--line); }
.f-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.f-item:hover .f-thumb img, .f-item:focus-visible .f-thumb img { transform: scale(1.04); }
.f-play { position: absolute; inset: 0; margin: auto; width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; background: rgba(7,5,13,.6); border: 1px solid rgba(255,255,255,.35); backdrop-filter: blur(6px); transition: background .3s; }
.f-play svg { width: 22px; height: 22px; fill: #fff; margin-left: 3px; }
.f-item:hover .f-play { background: var(--orange); border-color: transparent; }
.f-item:focus-visible .f-thumb { outline: 2px solid var(--amber); outline-offset: 3px; }
.f-cap b { display: block; font: 650 1rem var(--display); }
.f-cap span { display: block; margin-top: 2px; font: 400 .76rem var(--mono); color: var(--mute); }
.lb.is-photo .lb-media { aspect-ratio: auto; width: auto; max-width: min(1500px, 100%); background: transparent; }
.lb-photo { margin: 0; display: grid; gap: 10px; }
.lb-photo img { max-width: 100%; max-height: 82svh; width: auto; height: auto; display: block; margin: 0 auto; border-radius: 10px; }
.lb-photo figcaption { text-align: center; font: 400 .8rem var(--mono); color: var(--mute); }
.lb-photo figcaption b { color: #fff; font-weight: 600; margin-right: 8px; }
@media (max-width: 760px) { .reel { aspect-ratio: 16 / 10; border-radius: 16px; } }
@media (max-width: 760px) {
  .gallery { columns: 2; column-gap: 8px; }
  .g-item { margin-bottom: 8px; border-radius: 10px; }
  .films { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .f-thumb { border-radius: 10px; }
  .f-play { width: 40px; height: 40px; }
  .f-cap b { font-size: .9rem; }
}
/* the pin list beside the viewer: dozens of pins now, so it scrolls within the height of the viewer */
@media (min-width: 1001px) {
  .field-grid { grid-template-columns: 300px minmax(0, 1fr) 260px; align-items: center; }
  .field .log { max-height: min(60vh, 500px); overflow-y: auto; padding-right: 6px; scrollbar-width: thin; scrollbar-color: var(--line2) transparent; }
}
.field .log .ic { width: 14px; height: 14px; flex: none; }

/* a one-line summary bubble for each organization, on hover or keyboard focus */
.org-group li[data-about] { position: relative; cursor: help; width: fit-content; }
.org-group li[data-about]::after, .logo-strip li[data-about]::after { content: attr(data-about); position: absolute; left: 0; bottom: calc(100% + 10px); z-index: 20; width: max-content; max-width: min(300px, 80vw); padding: 10px 13px; border-radius: 12px; background: #1a1430; border: 1px solid var(--line2); box-shadow: 0 16px 40px -12px rgba(0,0,0,.8); font: 400 .82rem/1.45 var(--text); letter-spacing: 0; text-transform: none; color: #e6e0f5; opacity: 0; transform: translateY(4px); pointer-events: none; transition: opacity .18s, transform .18s var(--ease); }
.org-group li[data-about]::before, .logo-strip li[data-about]::before { content: ""; position: absolute; left: 18px; bottom: calc(100% + 4px); z-index: 21; width: 10px; height: 10px; background: #1a1430; border-right: 1px solid var(--line2); border-bottom: 1px solid var(--line2); transform: rotate(45deg) translateY(4px); opacity: 0; transition: opacity .18s; }
.org-group li[data-about]:hover::after, .org-group li[data-about]:focus-visible::after, .logo-strip li[data-about]:hover::after, .logo-strip li[data-about]:focus-visible::after { opacity: 1; transform: none; }
.org-group li[data-about]:hover::before, .org-group li[data-about]:focus-visible::before, .logo-strip li[data-about]:hover::before, .logo-strip li[data-about]:focus-visible::before { opacity: 1; }
.org-group li[data-about]:focus-visible, .logo-strip li[data-about]:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; border-radius: 4px; }
.reel-play { position: absolute; inset: 0; margin: auto; width: 68px; height: 68px; border-radius: 50%; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.4); background: rgba(7,5,13,.55); backdrop-filter: blur(8px); cursor: pointer; }
.reel-play[hidden] { display: none; }
.reel-play svg { width: 28px; height: 28px; fill: #fff; margin-left: 4px; }
.reel-play:hover { background: var(--orange); border-color: transparent; }
.reel video { cursor: pointer; }

/* Music: original music and DJ sets share the deck; the list pages six at a time */
.deck-tabs { margin: 0 0 16px; }
.deck-tabs small { font: 400 .72rem var(--mono); opacity: .75; margin-left: 4px; }
.tracks-more { margin: 12px 0 0; }
.tracks-more .btn[hidden] { display: none; }
.logo-strip img[src*="sdtc"] { height: 46px; }
.logo-strip img[src*="cda"] { max-width: 170px; }
@media (max-width: 520px) { .place { font-size: .66rem; letter-spacing: .2em; gap: 10px; white-space: nowrap; } .place::before { width: 22px; } }

/* logo strip: an even grid, seven across (two rows of seven), two across on phones */
.logo-strip { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 26px 22px; justify-items: center; align-items: center; }
.logo-strip li { width: 100%; height: 48px; display: grid; place-items: center; }
.logo-strip img { max-width: 100%; height: 30px; }
.logo-strip img[src*="sdtc"] { height: 44px; }
.logo-strip img[src*="cda"] { max-width: 100%; }
@media (max-width: 700px) { .logo-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 20px; } .logo-strip img { height: 26px; max-width: 140px; } .logo-strip img[src*="sdtc"] { height: 38px; } }
.logo-strip img[src*="qmatic"] { height: 20px; } @media (max-width: 700px) { .logo-strip img[src*="qmatic"] { height: 17px; } }

/* home page ends on a short invitation to the contact page */
.cta-end { padding-bottom: clamp(40px, 6vw, 80px); }
.cta-card { position: relative; display: grid; gap: 14px; justify-items: start; padding: clamp(32px, 5vw, 64px); border-radius: 32px; text-decoration: none; color: inherit; overflow: hidden; isolation: isolate; border: 1px solid var(--line); background: radial-gradient(80% 140% at 100% 0%, rgba(255,79,168,.18), transparent 60%), radial-gradient(70% 120% at 0% 100%, rgba(47,125,255,.18), transparent 60%), var(--deep); transition: border-color .3s, transform .4s var(--ease); }
.cta-card:hover { border-color: var(--line2); transform: translateY(-3px); }
.cta-k { font: 500 .74rem var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--amber); }
.cta-card h2 { font: 800 clamp(2rem, 5vw, 3.6rem)/1.02 var(--display); letter-spacing: -.04em; max-width: 16ch; }
.cta-card p { color: #cbc4de; max-width: 52ch; font-size: clamp(1rem, 1.4vw, 1.12rem); }
.cta-card .btn { margin-top: 6px; }
.cta-card:hover .btn .ic { transform: translateX(4px); }
.contact.page-top h1 { font: 800 clamp(2.2rem, 5vw, 3.8rem)/1.02 var(--display); letter-spacing: -.04em; }

/* logo strip, tighter, with the same summary bubbles as the lists below */
.logo-strip { padding: 14px 0; margin-bottom: 22px; gap: 12px 18px; }
.logo-strip li { height: 40px; position: relative; cursor: help; }
.logo-strip li[data-about]::after { left: 50%; transform: translate(-50%, 4px); text-align: left; }
.logo-strip li[data-about]:hover::after, .logo-strip li[data-about]:focus-visible::after { transform: translate(-50%, 0); }
.logo-strip li[data-about]::before { left: calc(50% - 5px); }
.logo-strip li:hover img, .logo-strip li:focus-visible img { opacity: 1; }
@media (max-width: 700px) { .logo-strip { gap: 8px 14px; padding: 10px 0; } .logo-strip li { height: 36px; } }

/* footer: small brand icons, legal link and the land acknowledgement */
.foot-social { gap: 6px !important; }
.foot-social a { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 9px; color: var(--mute); transition: color .2s, background .2s; }
.foot-social a:hover, .foot-social a:focus-visible { color: var(--text-c); background: rgba(255,255,255,.06); }
.foot-social .ic { width: 16px; height: 16px; }
.foot-copy a { text-decoration: underline; text-underline-offset: 3px; }
.foot .land { flex-basis: 100%; max-width: 80ch; margin: 6px 0 0; padding-top: 16px; border-top: 1px solid var(--line); font: 400 .76rem/1.6 var(--text); color: var(--mute); }
/* legal page: a readable single column */
.legal-body { max-width: 72ch; margin-top: 24px; }
.legal-body h2 { margin: 48px 0 12px; font: 700 clamp(1.4rem, 2.4vw, 1.9rem) var(--display); letter-spacing: -.03em; scroll-margin-top: 110px; }
.legal-body h3 { margin: 24px 0 6px; font: 650 1.05rem var(--display); }
.legal-body p, .legal-body li { color: #cfc8e2; font-size: 1rem; line-height: 1.65; }
.legal-body p + p { margin-top: 12px; }
.legal-body ul { margin: 10px 0 0; padding-left: 20px; display: grid; gap: 6px; }
.legal-body a { color: var(--text-c); text-decoration: underline; text-underline-offset: 3px; }
/* hidden hover bubbles must not widen the page on phones */
main { overflow-x: clip; }

/* ===== polish pass: gradients, highlights, hover light, quieter org list ===== */
/* organizations I've supported: even columns with real gutters, a lighter weight, space and a rule after */
.org-groups { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-bottom: clamp(56px, 7vw, 96px); }
.org-group, .org-group:not(:nth-child(4n + 1)), .org-group:nth-child(even) { padding: 28px 28px 32px; border-left: 1px solid var(--line); border-bottom: 0; }
.org-group:nth-child(4n + 1) { border-left: 0; padding-left: 0; }
.org-group:nth-child(n + 5) { border-top: 1px solid var(--line); }
.org-group li { font: 400 .98rem/1.35 var(--display); letter-spacing: -.005em; color: #d6d0e8; transition: color .2s; }
.org-group li[data-about]:hover { color: #fff; }
.org-group ul { gap: 9px; }
@media (max-width: 1099px) { .org-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); } .org-group, .org-group:not(:nth-child(4n + 1)), .org-group:nth-child(even) { padding: 24px 22px 28px; border-left: 1px solid var(--line); border-top: 0; } .org-group:nth-child(odd) { border-left: 0; padding-left: 0; } .org-group:nth-child(n + 3) { border-top: 1px solid var(--line); } }
@media (max-width: 620px) { .org-groups { grid-template-columns: 1fr; } .org-group, .org-group:nth-child(odd), .org-group:nth-child(even), .org-group:not(:nth-child(4n + 1)) { padding: 22px 0 24px; border-left: 0; } .org-group:nth-child(n + 2) { border-top: 1px solid var(--line); } }

/* headings pick up the hero's colour, fading from white into violet and pink */
.head h2, .head h1, .wid-k, .cta-card h2, .contact.page-top h1 {
  background: linear-gradient(100deg, #f4f1fb 0%, #f4f1fb 42%, #c3b0ff 72%, #ff8ac4 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: .06em;
}
.sub-h, .card-h { background: linear-gradient(100deg, #f4f1fb 55%, #c3b0ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sub-h .ic, .card-h .ic { -webkit-text-fill-color: initial; }

/* key phrases in the copy */
.hl { font-style: normal; font-weight: 600; background: var(--g-brand); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: hl-shift 9s ease-in-out infinite alternate; }
@keyframes hl-shift { to { background-position: 100% 0; } }

/* the eyebrow rule above each section carries a slow light along it */
.eyebrow::after { background: linear-gradient(90deg, var(--line2), transparent), linear-gradient(90deg, transparent, rgba(195,176,255,.9), transparent); background-size: 100% 100%, 30% 100%; background-repeat: no-repeat; animation: rule-glint 7s ease-in-out infinite; }
@keyframes rule-glint { 0% { background-position: 0 0, -40% 0; } 60%, 100% { background-position: 0 0, 140% 0; } }

/* nav: the mark is just E; a smaller contact button; links light up */
.mark-e b { font: 800 1.25rem/1 var(--display); background: var(--g-brand); -webkit-background-clip: text; background-clip: text; color: transparent; }
.nav-cta { padding: 6px 13px; font-size: .82rem; }
.nav a { position: relative; }
.nav a::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 3px; height: 1px; background: var(--g-sun); transform: scaleX(0); transition: transform .3s var(--ease); }
.nav a:hover::after, .nav a.is-on::after { transform: scaleX(1); }

/* everything clickable lights up on hover */
.btn:hover { box-shadow: 0 0 0 1px rgba(195,176,255,.35), 0 10px 30px -12px rgba(124,92,255,.7); }
.btn-solid { position: relative; overflow: hidden; }
.btn-solid::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%); transform: translateX(-120%); transition: transform .7s var(--ease); pointer-events: none; }
.btn-solid:hover::after { transform: translateX(120%); }
.btn-solid:hover { box-shadow: 0 14px 44px -10px rgba(255,79,168,.8); }
.wid-card a { border-radius: 12px; margin-inline: -10px; padding-inline: 10px; transition: background .25s; }
.wid-card a:hover, .wid-card a:focus-visible { background: color-mix(in srgb, var(--c1) 9%, transparent); }
.wid-card a:hover .wid-ic { box-shadow: 0 0 22px -4px var(--c1); }
.wid-ic { transition: box-shadow .3s; }
a.built-card:hover { box-shadow: 0 24px 60px -28px var(--c1); }
.foot a, .foot-social a { transition: color .2s, background .2s, text-shadow .2s; }
.foot nav[aria-label="Pages"] a:hover { color: #fff; text-shadow: 0 0 12px rgba(195,176,255,.6); }
.jump a { transition: color .2s, border-color .2s, box-shadow .25s; }
.jump a:hover { box-shadow: 0 0 0 1px rgba(195,176,255,.35), 0 8px 24px -12px rgba(124,92,255,.8); }
.tracks button:hover, .log button:hover { box-shadow: 0 0 0 1px rgba(195,176,255,.3), 0 8px 22px -12px rgba(124,92,255,.8); }

/* a soft light that follows the pointer on cards (set by main.js) */
.wid-card, .built-card, .proj-card, .cta-card, .card, .deck, .disc { position: relative; }
.wid-card::before, .built-card::before, .proj-card::after, .cta-card::before, .card::before, .deck::before, .disc::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 0; opacity: 0; transition: opacity .35s;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(195,176,255,.10), transparent 45%);
}
.wid-card:hover::before, .built-card:hover::before, .proj-card:hover::after, .cta-card:hover::before, .card:hover::before, .deck:hover::before, .disc:hover::before { opacity: 1; }
.wid-card > *, .built-card > *, .cta-card > *, .card > *, .disc > * { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) { .hl, .eyebrow::after { animation: none; } }

/* footer: the hero's wordmark in miniature, and the pages as a small left-aligned list */
.foot { align-items: flex-start; }
.foot-name { text-decoration: none; font: 800 clamp(1.3rem, 2.2vw, 1.7rem)/1 var(--display); letter-spacing: -.03em; text-transform: uppercase; }
.foot-name span:first-child { color: var(--text-c); }
.foot-name span:last-child { font-weight: 200; background: var(--g-brand); -webkit-background-clip: text; background-clip: text; color: transparent; }
.foot .foot-nav { display: grid; gap: 6px; justify-items: start; }
.foot .foot-nav a { font: 400 .78rem var(--mono); color: var(--mute); }
.foot .foot-nav a:hover { color: #fff; }
.foot nav.foot-nav[aria-label="Pages"] a { color: var(--mute); } .foot nav.foot-nav[aria-label="Pages"] a:hover { color: #fff; }

/* keep the built cards' date badge pinned top right (the spotlight layer lifts other children) */
.built-card > .bc-meta { position: absolute; top: 22px; right: 20px; z-index: 2; }
/* when a browser blocks autoplay, the SoundCloud player itself shows so one tap starts the track */
.sc.needs-tap { position: static; width: 100%; height: 120px; opacity: 1; pointer-events: auto; margin-top: 12px; border-radius: 14px; }
.sc.needs-tap iframe { width: 100%; height: 120px; border: 0; }
.sc-hint { display: none; margin-top: 10px; font: 400 .78rem var(--mono); color: var(--amber); }
.sc.needs-tap + .sc-hint { display: block; }
/* track list: four across so a page of eight fills two clean rows */
.tracks { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 760px) { .tracks { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ===== the E mark: a white E inside a slowly turning ring of the hero's orange, pink, violet and blue ===== */
@property --e-a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.e-logo { position: relative; flex: none; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 11px; isolation: isolate; }
.e-logo::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 2.5px; background: conic-gradient(from var(--e-a), #ff7a1a, #ff4fa8, #7c5cff, #2f7dff, #3ad8ff, #ff7a1a); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: e-turn 6s linear infinite; }
.e-logo::after { content: ""; position: absolute; inset: 3px; z-index: -1; border-radius: 9px; background: conic-gradient(from var(--e-a), rgba(255,122,26,.35), rgba(255,79,168,.35), rgba(124,92,255,.35), rgba(47,125,255,.35), rgba(255,122,26,.35)); filter: blur(7px); animation: e-turn 6s linear infinite; }
.e-logo b { font: 800 1.12rem/1 var(--display); color: #fff; letter-spacing: -.02em; background: none; -webkit-text-fill-color: #fff; text-shadow: 0 0 12px rgba(255,255,255,.35); }
.mark-e { gap: 0; }
.mark-e:hover .e-logo::before, .mark-e:hover .e-logo::after { animation-duration: 1.6s; }
@keyframes e-turn { to { --e-a: 360deg; } }
@media (prefers-reduced-motion: reduce) { .e-logo::before, .e-logo::after { animation: none; } }

/* organizations: no extra space or rule after the list */
.org-groups { margin-bottom: 0; border-bottom: 0; }

/* hover bubbles take their category's colour */
:root { --cat-0: var(--pink); --cat-1: var(--cyan); --cat-2: var(--violet); --cat-3: var(--lime); --cat-4: var(--orange); --cat-5: var(--blue); --cat-6: var(--amber); --cat-7: #b48cff; }
.org-group:nth-child(8n + 1) { --cat: var(--cat-0); } .org-group:nth-child(8n + 2) { --cat: var(--cat-1); } .org-group:nth-child(8n + 3) { --cat: var(--cat-2); } .org-group:nth-child(8n + 4) { --cat: var(--cat-3); }
.org-group:nth-child(8n + 5) { --cat: var(--cat-4); } .org-group:nth-child(8n + 6) { --cat: var(--cat-5); } .org-group:nth-child(8n + 7) { --cat: var(--cat-6); } .org-group:nth-child(8n + 8) { --cat: var(--cat-7); }
.org-group li[data-about]::after, .logo-strip li[data-about]::after { background: color-mix(in srgb, var(--cat, #7c5cff) 26%, #110c20); border-color: color-mix(in srgb, var(--cat, #7c5cff) 60%, transparent); color: #fff; box-shadow: 0 16px 40px -14px color-mix(in srgb, var(--cat, #7c5cff) 70%, transparent); }
.org-group li[data-about]::before, .logo-strip li[data-about]::before { background: color-mix(in srgb, var(--cat, #7c5cff) 26%, #110c20); border-color: color-mix(in srgb, var(--cat, #7c5cff) 60%, transparent); }
.org-group li[data-about]:hover { color: color-mix(in srgb, var(--cat, #fff) 55%, #fff); }

/* spacing audit: keep the practice tab list sticky (the glow rule above made it relative, which pushed it 96px down),
   and tighten the space around the Next link at the foot of inner pages */
.disc > .disc-tabs { position: sticky; }
@media (max-width: 1020px) { .disc > .disc-tabs { position: static; } }
.next-page { margin-top: clamp(32px, 3.5vw, 48px); padding: 18px 0; }
body:has(.next-page:not([hidden])) .foot { margin-top: clamp(20px, 2.5vw, 32px); }

/* What I do as tabs: one card at a time, full width; the tab already names it */
.wid-grid { grid-template-columns: 1fr; gap: 0; }
.wid-tabs { justify-self: start; }
.wid-card[hidden] { display: none; }
.wid-card .wid-k { display: none; }
.wid-card ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; }
@media (max-width: 760px) { .wid-card ul { grid-template-columns: 1fr; } }
@media (min-width: 761px) { .wid-card li + li { border-top: 0; } .wid-card li:nth-child(n+3) { border-top: 1px solid var(--line); } }

/* Studio tile: drone footage under the wave, tinted toward the tile's pink */

/* a section head with no intro (Volunteering and community): no empty intro row, and the list starts right under the heading */
.head:not(:has(.sub)) { grid-template-columns: 1fr; grid-template-areas: "e" "h"; margin-bottom: 14px; }
.vol-list > li:nth-child(-n+2) { padding-top: 8px; }
@media (max-width: 900px) { .vol-list > li:nth-child(2) { padding-top: 24px; } }

/* heading rules and the E mark use the hero's sun gradient (orange, pink, violet) */
.eyebrow::after {
  background:
    linear-gradient(90deg, transparent, rgba(255,255,255,.85), transparent),
    linear-gradient(90deg, var(--orange), var(--pink) 30%, var(--violet) 60%, transparent);
  background-size: 22% 100%, 100% 100%; background-repeat: no-repeat; opacity: .85;
  animation: rule-glint-sun 7s ease-in-out infinite;
}
@keyframes rule-glint-sun { 0% { background-position: -30% 0, 0 0; } 60%, 100% { background-position: 130% 0, 0 0; } }
.e-logo::before { background: conic-gradient(from var(--e-a), var(--orange), var(--pink), var(--violet), var(--pink), var(--orange)); }
.e-logo::after { background: conic-gradient(from var(--e-a), rgba(255,122,26,.35), rgba(255,79,168,.35), rgba(124,92,255,.35), rgba(255,79,168,.35), rgba(255,122,26,.35)); }
@media (prefers-reduced-motion: reduce) { .eyebrow::after { animation: none; } }

/* Music page: sound design and audio engineering */
.sd { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 28px 48px; margin-top: clamp(40px, 5vw, 64px); padding-top: clamp(28px, 3.5vw, 40px); border-top: 1px solid var(--line); }
.sd h2 { font: 800 clamp(1.6rem, 2.8vw, 2.3rem)/1.05 var(--display); letter-spacing: -.035em; }
.sd-copy p { margin-top: 14px; color: #cbc4de; max-width: 52ch; }
.sd-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.sd-list li { padding: 18px 18px 16px; border-radius: 16px; border: 1px solid var(--line); background: linear-gradient(160deg, rgba(255,79,168,.08), rgba(255,255,255,.02) 60%); transition: border-color .25s, transform .25s var(--ease); }
.sd-list li:hover { border-color: rgba(255,79,168,.45); transform: translateY(-2px); }
.sd-list b { display: block; font: 700 1.02rem var(--display); letter-spacing: -.015em; color: var(--text-c); }
.sd-list span { display: block; margin-top: 6px; color: #b9b2cd; font-size: .9rem; line-height: 1.45; }
/* sound design film: poster with a big play button, then native controls, an HLS stream up to 4K */
.sd-film { grid-column: 1 / -1; width: 100%; max-width: 1100px; justify-self: center; margin: 8px auto 0; }
.field .sd-film { margin: 0 auto clamp(36px, 5vw, 56px); }
.sdf-stage { position: relative; aspect-ratio: 16 / 9; border-radius: 22px; overflow: hidden; clip-path: inset(0 round 22px); background: #000; border: 1px solid rgba(255,79,168,.22); box-shadow: 0 30px 80px -40px rgba(255,79,168,.45), 0 20px 60px -30px rgba(0,0,0,.8); }
.sdf-stage video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; background: #000; }
.sd-film.is-on .sdf-stage video { object-fit: contain; }
.sdf-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 18px; border: 0; padding: 0; cursor: pointer; color: #fff; font: inherit; background: radial-gradient(ellipse at center, rgba(7,5,13,.15), rgba(7,5,13,.55) 75%); transition: background .3s; }
.sdf-play:hover { background: radial-gradient(ellipse at center, rgba(7,5,13,.05), rgba(7,5,13,.45) 75%); }
.sdf-btn { width: clamp(64px, 8vw, 92px); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; background: var(--pink); box-shadow: 0 0 0 10px rgba(255,79,168,.18), 0 18px 50px -10px rgba(255,79,168,.7); transition: transform .35s var(--ease), box-shadow .35s; }
.sdf-btn svg { width: 42%; fill: #fff; margin-left: 6%; }
.sdf-play:hover .sdf-btn, .sdf-play:focus-visible .sdf-btn { transform: scale(1.07); box-shadow: 0 0 0 16px rgba(255,79,168,.16), 0 22px 60px -10px rgba(255,79,168,.8); }
.sdf-label { display: grid; gap: 4px; text-align: left; text-shadow: 0 2px 18px rgba(0,0,0,.6); }
.sdf-label b { font: 800 clamp(1.25rem, 2.2vw, 1.75rem)/1 var(--display); letter-spacing: -.03em; }
.sdf-label small { font: 500 .78rem var(--mono); letter-spacing: .08em; text-transform: uppercase; color: #ffd3ea; }
.sd-film.is-on .sdf-play { display: none; }
.sdf-bar { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 14px 28px; margin-top: 16px; }
.sdf-cap { display: grid; gap: 4px; max-width: 64ch; }
.sdf-cap b { font: 700 1.05rem var(--display); letter-spacing: -.015em; color: var(--text-c); }
.sdf-cap span { color: #b9b2cd; font-size: .92rem; line-height: 1.5; }
.sdf-q { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; border: 1px solid var(--line); background: rgba(255,255,255,.03); flex: none; }
.sdf-q button { border: 0; border-radius: 999px; padding: 7px 12px; font: 600 .74rem var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--mute); background: transparent; cursor: pointer; transition: color .2s, background .2s; white-space: nowrap; }
.sdf-q button:hover { color: var(--text-c); }
.sdf-q button[aria-pressed="true"] { color: #fff; background: rgba(255,79,168,.85); }
.sd-film.is-native .sdf-q { display: none; }
@media (max-width: 520px) { .sdf-play { flex-direction: column; gap: 12px; } .sdf-label { text-align: center; } .sdf-q button { padding: 7px 10px; } }
@media (max-width: 900px) { .sd { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .sd-list { grid-template-columns: 1fr; } }

/* Explore: Work and Practice share one normal-height row, same as the tiles below */

/* keyword highlights: solid colours from the hero gradient, no motion */
.hl { animation: none; background: none; -webkit-background-clip: border-box; background-clip: border-box; font-weight: 600; }
.hl-o { color: #ff9a4d; }
.hl-p { color: #ff6fb8; }
.hl-v { color: #a990ff; }

/* Work page: tighter rhythm between roles, career and toolkit */
section#skills { padding-top: clamp(28px, 3vw, 40px); }
#skills > #experience { margin-top: 0; margin-bottom: 16px; }
#skills > #toolkit { margin-top: 0; }
#skills > .more { margin-top: 22px; }
section#pro.page-top { padding-top: clamp(104px, 10vw, 136px); }

/* Studio tile: round the video and its tint themselves so the corners match the other tiles in every browser */
.hl-b { color: #5b9bff; }
.hl-c { color: #5fe0ff; }

/* hero stats: the full accent set, blue and cyan included */
.stats div:nth-child(8n+1) dt { background-image: linear-gradient(100deg, var(--orange), var(--pink)); }
.stats div:nth-child(8n+2) dt { background-image: linear-gradient(100deg, var(--blue), var(--cyan)); }
.stats div:nth-child(8n+3) dt { background-image: linear-gradient(100deg, var(--violet), var(--pink)); }
.stats div:nth-child(8n+4) dt { background-image: linear-gradient(100deg, var(--cyan), #8fefff); }
.stats div:nth-child(8n+5) dt { background-image: linear-gradient(100deg, var(--cyan), var(--blue)); }
.stats div:nth-child(8n+6) dt { background-image: linear-gradient(100deg, var(--pink), var(--orange)); }
.stats div:nth-child(8n+7) dt { background-image: linear-gradient(100deg, #5b9bff, var(--violet)); }
.stats div:nth-child(8n+8) dt { background-image: linear-gradient(100deg, var(--orange), #ffb070); }

/* built-org logo badges: a lit tile in the card's own colour instead of near-black */
.bc-logo {
  width: 68px; height: 68px; padding: 9px; border-radius: 18px;
  background:
    radial-gradient(120% 120% at 25% 15%, color-mix(in srgb, var(--c1) 70%, #fff 8%), transparent 62%),
    linear-gradient(150deg, color-mix(in srgb, var(--c1) 55%, #140c26), color-mix(in srgb, var(--c1) 22%, #0b0716));
  border: 1px solid color-mix(in srgb, var(--c1) 70%, #fff 10%);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--c1) 12%, transparent), 0 14px 30px -12px var(--c1), inset 0 1px 0 rgba(255,255,255,.22);
}
.bc-logo img { filter: drop-shadow(0 2px 6px rgba(0,0,0,.45)); }
.built-card:hover .bc-logo { box-shadow: 0 0 0 5px color-mix(in srgb, var(--c1) 20%, transparent), 0 16px 34px -10px var(--c1), inset 0 1px 0 rgba(255,255,255,.25); }

/* Sound page: Smile Machine Music band */
.smm { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 24px 32px; align-items: center; margin-top: clamp(28px, 3.5vw, 40px); padding: clamp(22px, 3vw, 34px); border-radius: var(--r); border: 1px solid rgba(255,79,168,.35); background: radial-gradient(70% 140% at 0% 0%, rgba(255,79,168,.22), transparent 60%), radial-gradient(60% 120% at 100% 100%, rgba(58,216,255,.16), transparent 60%), var(--deep); }
.smm-logo { width: clamp(72px, 9vw, 104px); height: auto; filter: drop-shadow(0 10px 24px rgba(255,79,168,.45)); }
.smm h2 { font: 800 clamp(1.5rem, 2.6vw, 2.1rem)/1.05 var(--display); letter-spacing: -.035em; }
.smm-copy > p:not(.smm-links) { margin-top: 10px; color: #cbc4de; max-width: 62ch; }
.smm-copy b { color: #ff6fb8; font-weight: 600; }
.smm-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
@media (max-width: 620px) { .smm { grid-template-columns: 1fr; } }

/* extra card tones: green (The Cottage) and a deep indigo-violet (Smile Machine) */
:root { --green: #3ddc84; --indigo: #6a3fd8; }
.tone-green { --c1: var(--green); --c2: var(--cyan); }
.tone-indigo { --c1: var(--indigo); --c2: var(--pink); }

/* Lab cards: the app running underneath, its logo on top */
.pc-img { position: relative; }
.pc-vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease), filter .5s; filter: saturate(1.05) brightness(.82); }
.pc-img .pc-logo { position: absolute; left: 50%; top: 50%; width: auto; height: auto; max-width: 74%; max-height: 72%; object-fit: contain; transform: translate(-50%, -50%); transition: transform .5s var(--ease); filter: drop-shadow(0 6px 22px rgba(0,0,0,.55)); }
.pc-img::after { content: ""; position: absolute; inset: 0; background: radial-gradient(70% 70% at 50% 50%, rgba(7,5,13,.35), transparent 70%); pointer-events: none; }
.pc-img .pc-logo { z-index: 1; }
.pc-logo-smileos { max-width: 52%; }
.pc-logo-wonderwall { max-width: 64%; }
.proj-card:hover .pc-vid { transform: scale(1.05); filter: saturate(1.15) brightness(.95); }
.proj-card:hover .pc-img .pc-logo { transform: translate(-50%, -50%) scale(1.04); }

/* wide wordmark logos (2Basic) sit on a light plate so the navy reads */
.bc-logo:has(img[src*="2basic"]) { width: 140px; height: 60px; padding: 9px 12px; background: linear-gradient(160deg, #f4f2fb, #d9d4ee); border-color: rgba(255,255,255,.7); box-shadow: 0 0 0 4px rgba(124,92,255,.12), 0 14px 30px -12px rgba(124,92,255,.7); }
.bc-logo:has(img[src*="2basic"]) img { filter: none; }
/* WaverLAN: the mosaic badge fills its tile edge to edge */
.bc-logo:has(img[src*="waverlan"]) { padding: 0; }
.bc-logo:has(img[src*="waverlan"]) img { object-fit: cover; border-radius: inherit; filter: none; }

/* 2Basic: light gold plate; WaverLAN: same wide plate shape, mosaic edge to edge */
:root { --gold: #f2c14e; }
.tone-gold { --c1: var(--gold); --c2: var(--orange); }
.bc-logo:has(img[src*="2basic"]) { width: 140px; height: 60px; padding: 6px 10px; background: radial-gradient(120% 140% at 30% 0%, #fffaf0, #ffe9a8 55%, #f3c85a); border-color: rgba(255,226,140,.9); box-shadow: 0 0 0 4px rgba(242,193,78,.16), 0 14px 30px -12px rgba(242,193,78,.75), inset 0 1px 0 rgba(255,255,255,.8); }
.bc-logo:has(img[src*="waverlan"]) { width: 140px; height: 60px; padding: 0; }

/* Lab app full screen: native where supported, a full-window takeover everywhere else (iPhone) */
.play-frame { position: relative; }
.play-frame:fullscreen, .play-frame:-webkit-full-screen { width: 100vw; height: 100vh; min-height: 0; }
.play-exit { position: absolute; top: max(10px, env(safe-area-inset-top)); right: max(10px, env(safe-area-inset-right)); z-index: 2; width: 40px; height: 40px; display: none; place-items: center; border-radius: 50%; border: 1px solid rgba(255,255,255,.25); background: rgba(7,5,13,.6); color: #fff; backdrop-filter: blur(8px); cursor: pointer; }
.play-exit svg { width: 18px; height: 18px; }
.play-frame:fullscreen .play-exit, .play-frame:-webkit-full-screen .play-exit, body.play-max .play-exit { display: grid; }
body.play-max { overflow: hidden; }
body.play-max .play-frame { position: fixed; inset: 0; z-index: 200; width: 100vw; height: 100dvh; min-height: 0; border: 0; }
body.play-max .site-head, body.play-max .nav, body.play-max header { visibility: hidden; }

/* WonderWall card: the galaxy recedes so the logo reads cleanly */
.proj-card:has(.pc-logo-wonderwall) .pc-vid { filter: brightness(.5) saturate(1.1) blur(1.5px); }
.proj-card:has(.pc-logo-wonderwall):hover .pc-vid { filter: brightness(.62) saturate(1.2) blur(1px); }
.pc-logo-wonderwall { max-width: 70%; max-height: 80%; }

/* Studio tile: clip the whole tile to its rounded shape so the video can't square the corners (Safari) */

/* Lab console: a green-phosphor CRT */
.crt { position: relative; padding: clamp(14px, 2.4vw, 26px); border-radius: 28px; background: linear-gradient(160deg, #2a2733, #15131b); box-shadow: inset 0 2px 0 rgba(255,255,255,.08), inset 0 -6px 18px rgba(0,0,0,.6), 0 30px 60px -30px rgba(0,0,0,.8); }
.crt-screen { position: relative; height: clamp(320px, 52vh, 480px); display: grid; grid-template-rows: 1fr auto; border-radius: 22px / 26px; overflow: hidden; background: radial-gradient(120% 120% at 50% 45%, #0b1f14, #030806 75%); box-shadow: inset 0 0 60px rgba(0,0,0,.85), inset 0 0 14px rgba(80,255,150,.12); font: 400 clamp(.8rem, 1.5vw, .98rem)/1.55 var(--mono); color: #8dffb8; text-shadow: 0 0 4px rgba(120,255,170,.65), 0 0 12px rgba(80,255,150,.25); animation: crt-flicker 5s infinite steps(1); cursor: text; }
.crt-screen::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2; background: repeating-linear-gradient(0deg, rgba(0,0,0,.28) 0 1px, transparent 1px 3px); mix-blend-mode: multiply; }
.crt-screen::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 3; background: radial-gradient(130% 110% at 50% 50%, transparent 60%, rgba(0,0,0,.55)), linear-gradient(180deg, rgba(140,255,190,.06), transparent 30%); }
.crt-out { overflow-y: auto; padding: 18px 22px 6px; scrollbar-width: none; }
.crt-out p { margin: 0 0 4px; white-space: pre-wrap; }
.crt-out .dim { color: #4fcf82; opacity: .8; }
.crt-out .ok { color: #c8ffd9; }
.crt-out .err { color: #ffb27a; text-shadow: 0 0 6px rgba(255,150,80,.5); }
.crt-out .echo { color: #c8ffd9; }
.crt-out b { color: #e6fff0; font-weight: 700; }
.crt-out .pr { color: #4fcf82; }
.crt-in { display: flex; gap: 10px; align-items: center; padding: 8px 22px 16px; }
.crt-in label { color: #4fcf82; white-space: nowrap; }
.crt-in input { flex: 1; min-width: 0; background: transparent; border: 0; outline: 0; color: inherit; font: inherit; text-shadow: inherit; caret-color: #8dffb8; }
.crt-hint { margin-top: 12px; font: 400 .78rem var(--mono); color: var(--mute); }
@keyframes crt-flicker { 0%, 100% { opacity: 1; } 47% { opacity: .97; } 48% { opacity: 1; } 83% { opacity: .985; } }
@media (prefers-reduced-motion: reduce) { .crt-screen { animation: none; } }

/* nav: the page's name beside the E, and Contact as the last menu item */
.page-k { flex: none; font: 200 .82rem/1 var(--display); letter-spacing: .34em; text-transform: uppercase; color: #fff; white-space: nowrap; margin-left: -8px; padding-left: 14px; border-left: 1px solid rgba(255,255,255,.18); }
.nav .nav-cta { margin-left: 6px; padding: 7px 14px; color: #fff; font-weight: 600; background: var(--g-sun); box-shadow: 0 6px 20px -8px rgba(255,79,168,.7); }
.nav .nav-cta:hover, .nav .nav-cta[aria-current] { color: #fff; background: var(--g-sun); filter: brightness(1.1); }
.nav .nav-cta::after { display: none; }
@media (max-width: 980px) {
  .page-k { font-size: .74rem; letter-spacing: .26em; margin-right: auto; }
  .top.is-open .nav .nav-cta { margin: 6px 0 0; text-align: center; }
}
@media (max-width: 400px) { .page-k { letter-spacing: .18em; padding-left: 10px; } }
@media (max-width: 980px) { .menu-btn { margin-left: auto; } .page-k + .nav + .menu-btn, .page-k ~ .menu-btn { margin-left: 0; } }
#volunteering { scroll-margin-top: -40px; }

/* Explore: shorter tiles */

.nav a { white-space: nowrap; }

/* ===== Explore: five film tiles. Row one is two wide tiles, row two is three equal ones ===== */
.bento { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
.tile { --tile-h: clamp(300px, 26vw, 360px); position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; min-height: var(--tile-h); padding: 26px 28px 24px; border-radius: 26px; clip-path: inset(0 round 26px); text-decoration: none; color: #fff; background: #0b0814; border: 1px solid color-mix(in srgb, var(--c1) 26%, transparent); transition: transform .45s var(--ease), border-color .3s, box-shadow .45s; }
.tile-work, .tile-practice { grid-column: span 3; }
.tile-studio, .tile-lab, .tile-community { grid-column: span 2; }
.tile-vid { position: absolute; inset: 0; z-index: -3; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; transform: scale(1.02); transition: transform 1.4s var(--ease), filter .6s; filter: saturate(1.05) brightness(.9); }
/* a colour wash in the tile's own hue, then a dark lift behind the words */
.tile::before { content: ""; position: absolute; inset: 0; z-index: -2; background: linear-gradient(160deg, color-mix(in srgb, var(--c1) 34%, transparent), transparent 45%); mix-blend-mode: soft-light; pointer-events: none; }
.tile::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(0deg, rgba(7,5,13,.94) 0%, rgba(7,5,13,.72) 30%, rgba(7,5,13,.18) 62%, rgba(7,5,13,.05) 100%), linear-gradient(90deg, rgba(7,5,13,.45), transparent 60%); }
.tile:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--c1) 70%, transparent); box-shadow: 0 30px 70px -30px color-mix(in srgb, var(--c1) 75%, transparent); }
.tile:hover .tile-vid { transform: scale(1.07); filter: saturate(1.15) brightness(1); }
.tile-k { position: absolute; top: 20px; left: 22px; display: inline-flex; align-items: center; gap: 9px; padding: 7px 14px 7px 9px; border-radius: 999px; font: 600 .74rem var(--mono); letter-spacing: .16em; text-transform: uppercase; color: #fff; background: rgba(7,5,13,.5); border: 1px solid color-mix(in srgb, var(--c1) 55%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.tile-k .ic { width: 18px; height: 18px; color: var(--c1); filter: drop-shadow(0 0 6px var(--c1)); }
.tile-copy { display: grid; gap: 8px; max-width: 46ch; padding-right: 60px; }
.tile-copy b { font: 800 clamp(1.6rem, 2.5vw, 2.35rem)/1.02 var(--display); letter-spacing: -.035em; text-wrap: balance; text-shadow: 0 2px 18px rgba(0,0,0,.45); }
.tile-copy b::after { content: ""; display: block; width: 44px; height: 3px; margin-top: 12px; border-radius: 3px; background: var(--c1); box-shadow: 0 0 14px var(--c1); transition: width .5s var(--ease); }
.tile:hover .tile-copy b::after { width: 86px; }
.tile-copy span { color: #e2dcf2; font-size: .96rem; line-height: 1.5; text-wrap: pretty; text-shadow: 0 1px 10px rgba(0,0,0,.5); }
.tile-go { position: absolute; right: 22px; bottom: 22px; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; color: #fff; border: 1px solid rgba(255,255,255,.25); background: rgba(7,5,13,.45); backdrop-filter: blur(8px); transition: background .3s, color .3s, transform .3s var(--ease); }
.tile:hover .tile-go { background: var(--c1); color: var(--ink); transform: rotate(-45deg); }
.tile-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.tile-links a { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,.22); background: rgba(7,5,13,.5); color: #fff; text-decoration: none; font: 600 .84rem var(--text); backdrop-filter: blur(8px); transition: background .25s, color .25s, border-color .25s; }
.tile-links a .ic { width: 16px; height: 16px; color: var(--c1); }
.tile-links a:hover, .tile-links a:focus-visible { background: var(--c1); color: var(--ink); border-color: transparent; }
.tile-links a:hover .ic, .tile-links a:focus-visible .ic { color: var(--ink); }
.tile-studio .tile-copy { padding-right: 0; }
@media (max-width: 1000px) {
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tile-work, .tile-practice, .tile-studio, .tile-lab { grid-column: span 1; }
  .tile-community { grid-column: span 2; }
}
@media (max-width: 620px) {
  .bento { grid-template-columns: 1fr; }
  .tile-work, .tile-practice, .tile-studio, .tile-lab, .tile-community { grid-column: auto; }
  .tile { --tile-h: 320px; padding: 22px 20px 20px; }
  .tile-copy { padding-right: 52px; }
}
@media (prefers-reduced-motion: reduce) { .tile-vid, .tile:hover .tile-vid { transform: none; transition: none; } }

/* organizations worked with: all eight groups in one row on wide screens, compact type */
.org-groups { grid-template-columns: repeat(8, minmax(0, 1fr)); }
.org-group, .org-group:not(:nth-child(4n + 1)), .org-group:nth-child(even) { padding: 20px 14px 22px; border-left: 1px solid var(--line); border-top: 0; }
.org-group:first-child { border-left: 0; padding-left: 0; }
.org-group h3 { font-size: .6rem; letter-spacing: .1em; gap: 7px; margin-bottom: 12px; min-height: 2.6em; align-items: flex-start; line-height: 1.35; }
.org-group h3::before { flex: none; margin-top: .25em; width: 8px !important; height: 8px !important; }
.org-group ul { gap: 7px; }
.org-group li { font: 600 .8rem/1.3 var(--display); letter-spacing: -.01em; }
@media (max-width: 1099px) {
  .org-groups { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .org-group:nth-child(4n + 1) { border-left: 0; padding-left: 0; }
  .org-group:nth-child(n + 5) { border-top: 1px solid var(--line); }
}
@media (max-width: 620px) {
  .org-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .org-group:nth-child(4n + 1) { padding-left: 14px; border-left: 1px solid var(--line); }
  .org-group:nth-child(odd) { border-left: 0; padding-left: 0; }
  .org-group:nth-child(n + 3) { border-top: 1px solid var(--line); }
  .org-group li { font-size: .84rem; }
}
@media (min-width: 1100px) {
  .org-groups > .org-group:nth-child(n) { border-top: 0; border-left: 1px solid var(--line); padding-left: 14px; }
  .org-groups > .org-group:first-child { border-left: 0; padding-left: 0; }
}
.pc-logo-isleforge { max-width: 62%; max-height: 78%; filter: drop-shadow(0 6px 18px rgba(0,0,0,.55)); }