/* ninaceklic.com — dark, cinematic, quiet. See plan section 16. */

:root {
  --bg: #0e0f11;
  --bg-raised: #16181b;
  --bg-tile: #1a1c20;
  --line: #2a2d33;
  --text: #ecedef;
  --text-dim: #a4a8b0;
  --text-faint: #6f747d;
  --accent: #3cc8c0;          /* turquoise */
  --accent-strong: #5fe0d8;
  --accent-ink: #0f6e69;      /* darker teal for text on light backgrounds */
  --focus: #7ff0e8;
  --radius: 6px;
  --gutter: clamp(16px, 4vw, 48px);
  --max: 1440px;
  --header-h: 52px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --t-fast: 200ms;
  --t: 300ms;
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 66px); }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 400 15px/1.6 var(--font); -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); text-underline-offset: 3px; }
a:hover { color: var(--accent-strong); }
button { font: inherit; color: inherit; }
h1, h2, h3 { line-height: 1.2; font-weight: 500; margin: 0; letter-spacing: -0.01em; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 3px; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 12px; top: -48px; z-index: 100; background: var(--accent); color: #001; padding: 8px 14px; border-radius: var(--radius); text-decoration: none; transition: top var(--t-fast); }
.skip-link:focus { top: 12px; }

.is-placeholder { color: var(--text-faint); font-style: italic; }
.placeholder-box { display: grid; place-items: center; aspect-ratio: 4 / 5; border: 1px dashed var(--line); border-radius: var(--radius); color: var(--text-faint); font-style: italic; background: var(--bg-raised); }
.note { color: var(--text-dim); font-size: 13px; }

/* ── Header ──────────────────────────────────────────────────────────── */
.site-header {
  position: sticky; top: 0; z-index: 50; height: var(--header-h);
  background: rgba(14, 15, 17, .92); backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid var(--line);
  transition: background-color var(--t) var(--ease), border-color var(--t) var(--ease);
}
.site-header.is-overlay { position: fixed; left: 0; right: 0; }
/* Home (overlay) header: no edge at the top of the page; it fades in as you scroll (--hdr goes 0 → 1, set in app.js).
   A soft shade that runs well past the header keeps the menu readable over the reel without a visible line. */
.site-header.is-overlay { background: rgba(14, 15, 17, calc(var(--hdr, 0) * .92)); border-bottom-color: rgba(255, 255, 255, calc(var(--hdr, 0) * .08)); backdrop-filter: none; transition: none; }
.site-header.is-overlay::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 160px; z-index: -1; pointer-events: none; background: linear-gradient(rgba(0,0,0,.45), rgba(0,0,0,0)); opacity: calc(1 - var(--hdr, 0)); }
.site-header.is-overlay.is-solid { backdrop-filter: saturate(140%) blur(12px); }
.header-inner { max-width: var(--max); margin: 0 auto; height: 100%; padding: 0 var(--gutter); display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { font-weight: 500; letter-spacing: .02em; text-decoration: none; white-space: nowrap; }
.nav-list { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 2px; }
.nav-item { position: relative; display: flex; align-items: center; }
.nav-link { display: block; padding: 8px 9px; font-size: 13px; color: var(--text-dim); text-decoration: none; border-radius: 4px; transition: color var(--t-fast); white-space: nowrap; }
.nav-link:hover, .nav-link[aria-current] { color: var(--text); }
.nav-link[aria-current] { box-shadow: inset 0 -2px 0 var(--accent); border-radius: 0; }
.menu-toggle { display: grid; place-items: center; width: 18px; height: 28px; margin-left: -6px; padding: 0; background: none; border: 0; color: var(--text-faint); cursor: pointer; border-radius: 3px; }
.menu-toggle svg { transition: transform var(--t-fast) var(--ease); }
.menu {
  position: absolute; top: calc(100% + 6px); left: 0; min-width: 210px; list-style: none; margin: 0; padding: 6px;
  background: var(--bg-raised); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 16px 40px rgba(0,0,0,.45);
  opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease), visibility var(--t-fast);
}
.menu::before { content: ""; position: absolute; left: 0; right: 0; top: -8px; height: 8px; } /* hover bridge */
.menu a { display: block; padding: 7px 10px; font-size: 13px; text-decoration: none; color: var(--text-dim); border-radius: 4px; white-space: nowrap; }
.menu a:hover, .menu a:focus-visible { background: #22252a; color: var(--text); }
.menu .menu-small { font-size: 11px; color: var(--text-faint); border-top: 1px solid var(--line); margin-top: 4px; padding-top: 9px; border-radius: 0; }
@media (hover: hover) and (min-width: 1081px) {
  .has-menu:hover > .menu { opacity: 1; visibility: visible; transform: none; }
}
/* For now the Projects menu is centred under "Projects" so its longest title doesn't run off the screen. Switch back (remove this) once more header tabs push Projects further left. */
@media (min-width: 1081px) {
  .menu-projects { left: 50%; translate: -50% 0; }
}
.has-menu.is-open > .menu { opacity: 1; visibility: visible; transform: none; }
.has-menu.is-open > .menu-toggle svg { transform: rotate(180deg); }
.nav-open { display: none; }

@media (max-width: 1080px) {
  .nav-open { display: grid; place-items: center; width: 44px; height: 44px; margin-right: -10px; background: none; border: 0; cursor: pointer; }
  .burger, .burger::before, .burger::after { display: block; width: 20px; height: 1.5px; background: var(--text); transition: transform var(--t) var(--ease), opacity var(--t-fast); }
  .burger { position: relative; }
  .burger::before, .burger::after { content: ""; position: absolute; left: 0; }
  .burger::before { top: -6px; } .burger::after { top: 6px; }
  .nav-open[aria-expanded="true"] .burger { background: transparent; }
  .nav-open[aria-expanded="true"] .burger::before { transform: translateY(6px) rotate(45deg); }
  .nav-open[aria-expanded="true"] .burger::after { transform: translateY(-6px) rotate(-45deg); }
  .site-nav {
    position: fixed; inset: var(--header-h) 0 0 0; background: var(--bg); overflow-y: auto; padding: 8px var(--gutter) 40px;
    opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity var(--t) var(--ease), transform var(--t) var(--ease), visibility var(--t);
  }
  .site-nav.is-open { opacity: 1; visibility: visible; transform: none; }
  .nav-list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav-item { flex-wrap: wrap; border-bottom: 1px solid var(--line); }
  .nav-link { flex: 1; padding: 14px 0; font-size: 16px; color: var(--text); }
  .nav-link[aria-current] { box-shadow: none; color: var(--accent-strong); }
  .menu-toggle { width: 48px; height: 48px; margin: 0; }
  .menu { position: static; flex-basis: 100%; min-width: 0; padding: 0 0 10px 12px; background: none; border: 0; box-shadow: none; opacity: 1; visibility: visible; transform: none; display: none; }
  .menu::before { display: none; }
  .has-menu.is-open > .menu { display: block; }
  .menu a { padding: 9px 0; font-size: 14px; }
  .site-header.nav-is-open { background: var(--bg) !important; }
  body.nav-locked { overflow: hidden; }
  /* a blurred header traps the fixed menu inside its 52px box (only "Home" peeked out): no blur on small screens */
  .site-header, .site-header.is-overlay.is-solid { -webkit-backdrop-filter: none; backdrop-filter: none; }
  .site-header:not(.is-overlay) { background: rgba(14, 15, 17, .98); }
}

/* ── Page layout ─────────────────────────────────────────────────────── */
main { min-height: 60vh; }
.page-head, .panels, .reels, .nda-link, .project-grid, .about, .contact-form, .nda-form, .note, .home-section, .project { max-width: var(--max); margin-left: auto; margin-right: auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.page-head { padding-top: clamp(10px, 1.2vw, 18px); padding-bottom: 16px; display: grid; grid-template-columns: 1fr auto; gap: 16px 24px; align-items: end; }
.page-head h1 { font-size: clamp(31px, 5vw, 55px); font-weight: 300; }
.lede { margin: 8px 0 0; color: var(--text-dim); }
/* Section chips stay on screen under the header while scrolling (Nina, 2026-10-22) */
.chips-bar { position: sticky; top: var(--header-h); z-index: 40; background: rgba(14, 15, 17, .92); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.chips-bar .chips { max-width: var(--max); margin: 0 auto; padding: 8px var(--gutter) 10px; }
@media (max-width: 640px) { .chips-bar .chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; } .chips-bar .chips::-webkit-scrollbar { display: none; } .chips-bar .chip { flex: none; } } /* phones: one swipeable row */
.eyebrow { margin: 0 0 6px; font-size: 12px; color: var(--text-faint); }
.eyebrow a { text-decoration: none; }

/* Chips */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; min-height: 36px; padding: 6px 14px; border: 1px solid var(--line); border-radius: 999px; font-size: 13px; text-decoration: none; color: var(--text-dim); transition: color var(--t-fast), border-color var(--t-fast), background-color var(--t-fast); }
.chip:hover { color: var(--text); border-color: #444952; }
.chip[aria-current="true"] { color: #031312; background: var(--accent); border-color: var(--accent); }

/* Final | Process switch: visible but quiet */
.view-switch { display: inline-flex; padding: 3px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg-raised); justify-self: end; }
.view-switch button { min-height: 32px; padding: 4px 14px; border: 0; border-radius: 999px; background: none; font-size: 12px; letter-spacing: .02em; color: var(--text-dim); cursor: pointer; transition: background-color var(--t-fast), color var(--t-fast); }
.view-switch button[aria-pressed="true"] { background: #2b2f35; color: var(--text); }
.view-switch button[data-view="process"][aria-pressed="true"] { background: var(--accent); color: #031312; }

/* Sections and grids */
.section { margin: 28px 0 48px; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.section-head h2 { font-size: 19px; font-weight: 500; }
.see-all { font-size: 13px; color: var(--text-dim); text-decoration: none; white-space: nowrap; }
.see-all:hover { color: var(--accent-strong); }
.panel-title { font-size: 19px; font-weight: 500; margin: 20px 0 14px; }
.empty { color: var(--text-faint); padding: 24px 0; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 14px; }
.panel[data-panel="all"] .grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); }

.tile { position: relative; display: block; text-decoration: none; border-radius: var(--radius); outline-offset: 2px; }
.tile-media { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius); background: var(--bg-tile); }
.tile-media img, .tile-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 400ms var(--ease), opacity var(--t) var(--ease); }
.tile-media video { opacity: 0; }
.tile.is-previewing .tile-media video { opacity: 1; }
.tile:hover .tile-media img { transform: scale(1.03); }
.tile-title { display: block; padding: 8px 2px 0; font-size: 13px; color: var(--text-dim); line-height: 1.35; transition: color var(--t-fast); }
.tile-tag { display: inline-block; margin-left: 6px; padding: 1px 7px; border: 1px solid var(--line); border-radius: 999px; font-size: 10.5px; letter-spacing: .02em; color: var(--text-faint); white-space: nowrap; vertical-align: 1px; }
.tile:hover .tile-title { color: var(--text); }
.badges { position: absolute; top: 8px; right: 8px; display: flex; gap: 6px; pointer-events: none; }
.badge { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 8px; border-radius: 999px; background: rgba(10, 11, 13, .72); backdrop-filter: blur(6px); font-size: 11px; font-weight: 500; color: var(--text); }
.badge-play { width: 24px; padding: 0; justify-content: center; }
.badge-play svg { width: 10px; height: 10px; fill: currentColor; margin-left: 1px; }
.badge-process { color: #031312; background: var(--accent); font-weight: 600; }
.badge-count svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.4; }
[data-view-current="process"] .badge-process { display: none; }

.reels { margin-top: 8px; }
.reels-title { font-size: 12px; text-transform: uppercase; letter-spacing: .12em; color: var(--text-faint); margin-bottom: 12px; font-weight: 500; }
.reel-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 640px) { .reel-row { grid-template-columns: 1fr; } }
.panel-title-next { margin-top: 40px; } /* the section title under the Reels row */
.reel-row .tile-media { aspect-ratio: 16 / 9; }
[data-view-current="process"] [data-final-only] { display: none; }

.nda-link { padding-top: 8px; padding-bottom: 56px; font-size: 13px; }
.nda-link a { color: var(--text-dim); text-decoration: none; }
.nda-link a:hover { color: var(--accent-strong); }

/* ── Home ────────────────────────────────────────────────────────────── */
.hero { position: relative; height: 100svh; min-height: 520px; display: grid; align-items: end; overflow: hidden; }
.hero-media { position: absolute; inset: 0; background: #08090a; }
.hero-media img, .hero-media video { width: 100%; height: 100%; object-fit: cover; opacity: .62; }
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14,15,17,0) 45%, rgba(14,15,17,.85) 88%, var(--bg)); pointer-events: none; }
.placeholder-tag { position: absolute; top: calc(var(--header-h) + 16px); right: var(--gutter); z-index: 2; padding: 4px 10px; border: 1px dashed rgba(255,255,255,.4); border-radius: 4px; font-size: 11px; font-style: italic; color: rgba(255,255,255,.75); background: rgba(0,0,0,.35); }
.hero-text { position: relative; z-index: 1; max-width: var(--max); width: 100%; margin: 0 auto; padding: 0 var(--gutter) clamp(72px, 12vh, 128px); }
.hero-name { font-size: clamp(43px, 9vw, 127px); font-weight: 200; letter-spacing: -0.035em; line-height: .95; }
.hero-title { margin: 18px 0 0; font-size: clamp(15px, 2vw, 20px); font-weight: 300; color: var(--text-dim); }
.scroll-cue.is-gone { opacity: 0; visibility: hidden; pointer-events: none; }
.scroll-cue { transition: opacity 600ms var(--ease), visibility 0s linear 600ms; position: absolute; z-index: 1; left: 50%; bottom: 24px; width: 26px; height: 40px; margin-left: -13px; border: 1.5px solid rgba(255,255,255,.45); border-radius: 14px; }
.scroll-cue span { position: absolute; left: 50%; top: 8px; width: 3px; height: 8px; margin-left: -1.5px; border-radius: 2px; background: var(--accent); animation: cue 1.3s ease-in-out infinite; }
/* the same cue, small, at the top of every other page (just under the menu); only shown when the page scrolls */
.scroll-cue-top { position: fixed; z-index: 40; top: calc(var(--header-h) + 10px); bottom: auto; width: 16px; height: 25px; margin-left: -8px; border-radius: 9px; border-width: 1.25px; background: rgba(14, 15, 17, .55); pointer-events: none; }
.scroll-cue-top span { top: 5px; width: 2px; height: 5px; margin-left: -1px; animation-name: cue-small; }
@keyframes cue-small { 0% { transform: translateY(0); opacity: 0; } 12% { opacity: 1; } 88% { transform: translateY(8px); opacity: 0; } 100% { transform: translateY(8px); opacity: 0; } }
.scroll-cue-top.is-short { display: none; }
/* Phones/tablets: a hand swiping up instead of the mouse (Nina, 2026-10-26) */
.cue-hand { display: none; }
@media (hover: none), (pointer: coarse) {
  .scroll-cue, .scroll-cue-top { border: 0; background: none; }
  .scroll-cue > span { display: none; }
  .cue-hand { display: block; position: absolute; left: 50%; top: 50%; width: 30px; height: 30px; margin: -15px 0 0 -15px; fill: none; stroke: rgba(255,255,255,.85); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 1px 3px rgba(0,0,0,.6)); animation: cue-swipe 1.6s ease-in-out infinite; }
  .scroll-cue-top .cue-hand { width: 20px; height: 20px; margin: -10px 0 0 -10px; }
}
@keyframes cue-swipe { 0% { transform: translateY(10px); opacity: 0; } 20% { opacity: 1; } 75% { transform: translateY(-10px); opacity: 1; } 100% { transform: translateY(-14px); opacity: 0; } }
@keyframes cue { 0% { transform: translateY(0); opacity: 0; } 12% { opacity: 1; } 88% { transform: translateY(12px); opacity: 0; } 100% { transform: translateY(12px); opacity: 0; } }
.home-section { padding-top: clamp(40px, 7vw, 88px); padding-bottom: 8px; }
.cat-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2.5vw, 32px) clamp(14px, 2vw, 24px); }
.cat-tiles[data-count="2"], .cat-tiles[data-count="4"] { grid-template-columns: repeat(2, 1fr); }
.cat-tiles[data-count="1"] { grid-template-columns: 1fr; }
@media (max-width: 960px) { .cat-tiles { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .cat-tiles { grid-template-columns: 1fr; } }
.cat-tile-media { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--radius); }
.cat-tile-media img, .cat-tile-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 500ms var(--ease), opacity 400ms var(--ease); }
.cat-tile-media video { opacity: 0; }
.cat-tile-media video.is-playing { opacity: 1; }
.cat-tile:hover .cat-tile-media img { transform: scale(1.03); }
.cat-tile-title { margin: 14px 0 6px; font-size: 21px; font-weight: 400; }
.cat-tile-title a { text-decoration: none; }
.cat-tile-desc { margin: 0; font-size: 13px; color: var(--text-dim); line-height: 1.8; }
.cat-tile-desc a { text-decoration: none; white-space: nowrap; }
.cat-tile-desc a:hover { color: var(--accent-strong); text-decoration: underline; }
.cat-tile-desc span { color: var(--text-faint); }

.project-row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(220px, 1fr); gap: 16px; overflow-x: auto; padding-bottom: 12px; scroll-snap-type: x mandatory; scrollbar-width: thin; }
.project-row > * { scroll-snap-align: start; }
@media (max-width: 640px) { .project-row { grid-auto-columns: 82%; } }
.project-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 24px 18px; padding-bottom: 64px; }
.project-card { display: block; text-decoration: none; }
.project-card-media { display: block; aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; }
.project-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 500ms var(--ease); }
.project-card:hover img { transform: scale(1.03); }
.project-card-text { display: block; padding-top: 12px; }
.project-card-title { display: block; font-size: 15px; line-height: 1.3; letter-spacing: -.01em; color: var(--text); }
.project-card-summary { display: block; margin-top: 4px; font-size: 13px; color: var(--text-dim); line-height: 1.5; }
.project-card-awards { display: block; margin-top: 2px; font-size: 11px; line-height: 1.35; color: var(--accent); }

/* ── Project page ────────────────────────────────────────────────────── */
.project { padding-top: 10px; padding-bottom: 48px; }
.project-top { margin-bottom: 28px; }
.back-link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin-bottom: 8px; font-size: 13px; color: var(--text-faint); text-decoration: none; }
.back-link:hover { color: var(--text); }
.project-foot { margin: 48px 0 0; }
/* Software logos ("engine" in a project) in the "Made with" row after the description */
.engine-icon { --logo-h: 40px; display: inline-flex; align-items: center; color: var(--text-dim); }
.engine-icon svg { display: block; height: var(--logo-h); width: auto; }
/* Cinema 4D's logo is a single horizontal line: centered on the text instead */
.engine-icon--cinema-4d { --logo-h: 24px; }
/* the key art always fits on screen under the menu and back link (a little is cropped instead of running off the bottom;
   "heroFocus" in the project picks which part stays in view) */
.project-hero { --hero-max: calc(100vh - var(--header-h) - 92px); position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; max-height: var(--hero-max); padding: 0; border: 0; border-radius: var(--radius); overflow: hidden; cursor: pointer; background: var(--bg-tile); }
.project-hero img { width: 100%; height: 100%; object-fit: cover; object-position: var(--focus, 50% 50%); }
/* heroFit "natural": the frame takes the image's own shape, so the whole key art fills it edge to edge */
/* "natural" key art (covers with text near the edges) is never cropped: on short screens the whole image shrinks instead */
.project-hero.is-natural { aspect-ratio: auto; max-height: none; width: fit-content; max-width: 100%; margin-inline: auto; background: none; }
.project-hero.is-natural img { width: auto; height: auto; max-width: 100%; max-height: var(--hero-max); }
.play-btn { position: absolute; left: 50%; top: 50%; width: 76px; height: 76px; margin: -38px 0 0 -38px; border-radius: 50%; background: rgba(10,11,13,.6); backdrop-filter: blur(6px); border: 1px solid rgba(255,255,255,.3); transition: transform var(--t-fast) var(--ease), background-color var(--t-fast); }
.play-btn::after { content: ""; position: absolute; left: 31px; top: 25px; border-left: 20px solid #fff; border-top: 13px solid transparent; border-bottom: 13px solid transparent; }
.project-hero:hover .play-btn { transform: scale(1.06); background: rgba(60,200,192,.75); }
.project-head h1 { font-size: clamp(29px, 4.5vw, 51px); font-weight: 300; }
.project-meta { margin: 6px 0 0; font-size: 17px; color: var(--text-dim); }  /* subtitle under the project title */
.laurels { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 40px; align-items: center; }  /* space separates recognition from the subtitle */
.laurel { height: 72px; width: auto; opacity: .92; }
.awards { list-style: none; padding: 0; margin: 14px 0 0; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13px; color: var(--accent); }
.project-body { max-width: 760px; margin: 24px 0 8px; color: var(--text-dim); }
.project-role { display: grid; grid-template-columns: max-content 1fr; align-items: baseline; color: var(--text); }
.label { display: inline-block; margin-right: 8px; font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--text-faint); }
.credits { max-width: 760px; margin-top: 32px; font-size: 13px; color: var(--text-dim); }
.project-process { padding-top: 24px; border-top: 1px solid var(--line); }

/* ── About / Contact / NDA ───────────────────────────────────────────── */
.about { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--gutter); padding-bottom: 72px; }  /* photo column hugs the photo; the gap matches the page edge margin */
@media (max-width: 1180px) { .about { grid-template-columns: 1fr; } .about-photo { max-width: 320px; } }
@media (min-width: 1181px) { .about-photo { position: sticky; top: calc(var(--header-h) + 16px); align-self: start; }
  /* the whole photo fits on screen on laptops: it shrinks to the window height instead of running off the bottom */
  .about-photo img { max-height: calc(100vh - var(--header-h) - 150px); width: auto; max-width: 340px; } }
.about-block { margin-bottom: 36px; }
.about-block h2 { font-size: 12px; text-transform: uppercase; letter-spacing: .12em; color: var(--text-faint); font-weight: 500; margin-bottom: 10px; }
.about-block h3 { font-size: 15px; margin: 20px 0 10px; font-weight: 500; }
.about-block ul { padding-left: 18px; margin: 0; }
.recognition { font-size: 13px; }
.recognition li { margin-bottom: 4px; }

/* Bio: dim body text with key phrases lifted to full white, a serif italic voice (Fraunces) for accents,
   the three questions as display type, a pull quote, and diamond dividers between parts. */
.bio { --serif: "Fraunces", Georgia, serif; max-width: 675px; color: var(--text-dim); font-size: 15px; line-height: 1.6; }
.bio p { margin: 0 0 .75em; text-wrap: pretty; }  /* pretty: no lone word left on the last line */
.bio strong { color: var(--text); font-weight: 500; }
.bio-em { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--accent-strong); font-size: 1.05em; letter-spacing: .005em; }
.bio-project { font-family: var(--serif); font-style: italic; color: var(--text); text-decoration-color: var(--accent); text-decoration-thickness: 1px; font-size: 1.08em; }
a.bio-project:hover, a.bio-link:hover { color: var(--accent-strong); }
.bio-title { font-style: italic; color: inherit; } a.bio-title:hover { color: var(--accent-strong); }
a.bio-title, a.bio-link { color: var(--text); text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; } /* project links read as links */
.bio-link { color: var(--text); text-decoration-color: var(--accent); text-decoration-thickness: 1px; }
.bio-whimsy { font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 1.12em; letter-spacing: .01em; }
/* letters ride a travelling wave: each one rises and falls and tilts with the wave's slope, a step behind its neighbour */
.bio-whimsy > span[aria-hidden] > span { display: inline-block; color: hsl(calc(176 + var(--i) * 9) 70% 72%);
  animation: whimsy-wave 2.8s linear infinite; animation-delay: calc(var(--i) * 0.16s - 2.8s); }
@keyframes whimsy-wave {
  0%   { translate: 0 -2.5px; rotate: 0deg; }
  25%  { translate: 0 0;      rotate: -9deg; }
  50%  { translate: 0 2.5px;  rotate: 0deg; }
  75%  { translate: 0 0;      rotate: 9deg; }
  100% { translate: 0 -2.5px; rotate: 0deg; }
}
@media (prefers-reduced-motion: reduce) { .bio-whimsy span { animation-play-state: paused; } }
/* ^^dream^^ (pull quote): turquoise-grey letters. One animated value (--p) moves a light from left to right;
   each letter measures its distance to the light (--t = its place in the phrase) and brightens to turquoise,
   glows and grows slightly as it passes, with a soft, feathered falloff on both sides. */
@property --p { syntax: "<number>"; inherits: true; initial-value: 0; }
.bio-dream { --base: #6fa3a0; --c: calc(-0.42 + 1.84 * var(--p)); font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 1.1em;
  animation: dream-light 4.5s linear infinite; }
.bio-dream-word { display: inline-block; white-space: nowrap; }
.bio-dream-word > span { display: inline-block;
  --k: max(0, 1 - max(var(--c) - var(--t), var(--t) - var(--c)) / 0.38);
  --e: calc(var(--k) * var(--k) * (3 - 2 * var(--k)));
  /* the light itself is a gradient: green at its leading edge, turquoise at the centre, blue as it trails off */
  --h: calc(178 - clamp(-1, (var(--t) - var(--c)) / 0.38, 1) * 38);
  --light: hsl(var(--h) 78% 64%);
  color: color-mix(in srgb, var(--light) calc(var(--e) * 100%), var(--base));
  text-shadow: 0 0 8px hsl(var(--h) 80% 60% / calc(var(--e) * .7)), 0 0 22px hsl(var(--h) 75% 50% / calc(var(--e) * .4));
  /* size grows only at the heart of the light: a narrower, steeper curve than the colour and glow */
  --s: max(0, 1 - max(var(--c) - var(--t), var(--t) - var(--c)) / 0.15);
  scale: calc(1 + var(--s) * var(--s) * (3 - 2 * var(--s)) * .07); transform-origin: 50% 70%; }
@keyframes dream-light { from { --p: 0; } to { --p: 1; } }
@media (prefers-reduced-motion: reduce) { .bio-dream { animation: none; } .bio-dream-word > span { color: var(--accent-strong); text-shadow: none; scale: 1; } }
.bio .bio-lead { font-size: clamp(25px, 3.4vw, 37px); line-height: 1.25; font-weight: 300; color: var(--text); letter-spacing: -0.015em; margin-bottom: .4em; }
/* the opening line stays on one line, sized to the text column; it wraps only on narrow (phone) columns */
.about-text { container-type: inline-size; }
@container (min-width: 560px) { .bio .bio-lead { font-size: min(37px, 4.15cqi); white-space: nowrap; } }
.bio-lead strong { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--accent-strong); }
.bio-questions { list-style: none; padding: 0 !important; margin: 0 0 16px !important; counter-reset: none; }
.bio-questions li { display: flex; align-items: baseline; gap: 14px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.bio-questions li:first-child { border-top: 1px solid var(--line); }
.bio-q-num { flex: none; width: 2.2em; font-size: 12px; font-weight: 500; letter-spacing: .12em; color: var(--accent); font-variant-numeric: tabular-nums; }
.bio-q { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(15px, 1.5vw, 16px); line-height: 1.2; color: var(--text); }
.bio-questions li:nth-child(2) .bio-q { padding-left: clamp(0px, 1.5vw, 20px); }
.bio-questions li:nth-child(3) .bio-q { padding-left: clamp(0px, 3vw, 40px); }
.bio-pull { margin: 18px 0 20px; padding: 2px 0 2px 18px; border-left: 2px solid var(--accent); }
.bio .bio-pull p { margin: 0; font-size: clamp(17px, 1.8vw, 19px); line-height: 1.4; font-weight: 300; color: var(--text); }
.bio-pull .bio-em { font-size: 1.08em; }
/* ==standout== phrase: larger turquoise serif italic, the one place the bio raises its voice */
.bio-mark { background: none; color: var(--accent-strong); font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 1.2em; line-height: 1; letter-spacing: .005em; }
/* turquoise phrases stay whole on one line (bold phrases may wrap) (wider columns only, so phones never scroll sideways) */
@container (min-width: 680px) { .bio-em, .bio-mark, .bio-whimsy, .bio-dream, .bio-project { white-space: nowrap; } }
.bio-divider { margin: 0 0 18px; line-height: 1; text-align: center; color: var(--accent); font-size: 12px; letter-spacing: 1.2em; padding-left: 1.2em; opacity: .85; }
.resume-list, .link-list { list-style: none; padding: 0 !important; display: flex; flex-wrap: wrap; gap: 10px; }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 10px 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-raised); text-decoration: none; font-size: 14px; cursor: pointer; transition: border-color var(--t-fast), background-color var(--t-fast); }
.button:hover { border-color: #4a4f57; }
.button.is-disabled { cursor: default; border-style: dashed; }
.button-primary { background: var(--accent); border-color: var(--accent); color: #031312; font-weight: 500; }
.button-primary:hover { background: var(--accent-strong); border-color: var(--accent-strong); color: #031312; }

.contact-form, .nda-form { max-width: 640px; margin-left: auto; margin-right: auto; padding-bottom: 72px; display: grid; gap: 18px; }
.page-head + .contact-form, .page-head + .nda-form { margin-left: max(var(--gutter), calc((100% - var(--max)) / 2 + var(--gutter))); padding-left: 0; }
.field { display: grid; gap: 6px; }
.field label { font-size: 13px; color: var(--text-dim); }
.optional { color: var(--text-faint); }
.field input, .field textarea { width: 100%; padding: 12px 14px; font: inherit; color: var(--text); background: var(--bg-raised); border: 1px solid var(--line); border-radius: var(--radius); transition: border-color var(--t-fast); }
.field input:focus, .field textarea:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.turnstile-slot { font-size: 13px; }
.form-status { min-height: 1.6em; margin: 0; font-size: 14px; }
.form-status.is-error { color: #ff9b8f; }
.form-status.is-ok { color: var(--accent-strong); }
.contact-form .button, .nda-form .button { justify-self: start; }

/* ── Footer ──────────────────────────────────────────────────────────── */
.site-footer { margin-top: 48px; border-top: 1px solid var(--line); }
.footer-inner { max-width: var(--max); margin: 0 auto; padding: 28px var(--gutter) 40px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; font-size: 13px; color: var(--text-dim); }
.footer-links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 22px; }
.footer-links li { display: flex; align-items: center; }
.footer-links a { line-height: 20px; }
.footer-links a { text-decoration: none; }

/* ── Viewer ──────────────────────────────────────────────────────────── */
.viewer { position: fixed; inset: 0; z-index: 200; background: rgba(6, 7, 8, .97); display: grid; grid-template-columns: minmax(0, 1fr) 340px; opacity: 0; transition: opacity var(--t) var(--ease); }
.viewer.is-open { opacity: 1; }
.viewer[hidden] { display: none; }
.viewer-stage { position: relative; display: grid; place-items: center; padding: 56px 72px; min-height: 0; overflow: hidden; touch-action: pan-y; }
.viewer-stage img, .viewer-stage video { max-width: 100%; max-height: calc(100vh - 112px); width: auto; height: auto; object-fit: contain; border-radius: 3px; transition: opacity var(--t) var(--ease), transform var(--t) var(--ease); }
.viewer-stage .embed { width: min(100%, calc((100vh - 112px) * 16 / 9)); aspect-ratio: 16 / 9; }
.viewer-stage .embed { position: relative; }
.embed-note { position: absolute; bottom: 100%; right: 42px; margin: 0 0 4px;  /* the arrow sits right above YouTube's settings gear (48px in from the player's right edge) */ display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; color: var(--accent); letter-spacing: .01em; white-space: nowrap; }
.embed-note-icons { display: inline-flex; align-items: center; gap: 2px; font-size: 14px; }
.embed-gear { font-size: 20px; line-height: 1; }
.viewer-stage .embed iframe { width: 100%; height: 100%; border: 0; border-radius: 3px; }
.viewer-stage .pano { width: 100%; height: calc(100vh - 112px); border-radius: 3px; }
.viewer-stage .is-entering { opacity: 0; transform: scale(.985); }
.viewer-btn { position: absolute; z-index: 2; display: grid; place-items: center; width: 48px; height: 48px; border: 0; border-radius: 50%; background: rgba(255,255,255,.06); color: var(--text); cursor: pointer; transition: background-color var(--t-fast); }
.viewer-btn:hover { background: rgba(255,255,255,.14); }
.viewer-btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.viewer-close { top: 14px; right: 354px; }
.viewer-prev { left: 14px; top: 50%; margin-top: -24px; }
.viewer-next { right: 354px; top: 50%; margin-top: -24px; }
.viewer-btn[disabled] { opacity: .25; cursor: default; }
.viewer-dots { position: absolute; left: 0; right: 340px; bottom: 18px; display: flex; justify-content: center; gap: 6px; flex-wrap: wrap; padding: 0 80px; }
.viewer-dots button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%; background: rgba(255,255,255,.28); cursor: pointer; }
.viewer-dots button[aria-current="true"] { background: var(--accent); }
.viewer-dots .dot-count { font-size: 12px; color: var(--text-dim); }
.viewer-caption { overflow-y: auto; padding: 72px 26px 32px; border-left: 1px solid var(--line); background: #0c0d0f; font-size: 13px; color: var(--text-dim); }
.viewer-caption h2 { font-size: 19px; font-weight: 500; color: var(--text); margin-bottom: 14px; }
.viewer-caption p { margin: 0 0 12px; }
.viewer-caption .cap-slide { color: var(--text); }
.viewer-caption .cap-role { font-size: 12px; }
.viewer-caption .cap-role:has(> span + span) { display: grid; grid-template-columns: max-content 1fr; align-items: baseline; }
.viewer-caption .cap-meta { color: var(--text-faint); font-size: 12px; }
.viewer-caption .cap-project a { color: var(--accent-strong); text-decoration: none; }
.viewer-caption .cap-studio > span:last-child { display: inline-flex; align-items: center; gap: 8px; }
.cap-studio-logo { height: 14px; width: auto; }
.cap-laurels { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 2px 0 12px; }
.cap-laurels img { height: 34px; width: auto; opacity: .85; }
.viewer-caption .cap-ai { font-size: 11px; color: var(--text-faint); border: 1px solid var(--line); border-radius: 999px; display: inline-block; padding: 2px 10px; }
.viewer-caption .see-process { margin-top: 8px; gap: 8px; background: var(--accent); border-color: var(--accent); color: #031312; font-weight: 600; }
.viewer-caption .see-process:hover { background: var(--accent-strong); border-color: var(--accent-strong); }
.viewer-caption .see-process svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.viewer-caption .back-final { margin-top: 8px; }
.viewer-mode { display: inline-block; margin-bottom: 10px; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: #031312; background: var(--accent); padding: 2px 8px; border-radius: 3px; }
.tbd { color: var(--text-faint); font-style: italic; }
@media (min-width: 901px) { .viewer-stage video.is-scaled { max-width: calc(100% * var(--vs)); max-height: calc((100vh - 112px) * var(--vs)); } } /* some clips shown smaller (e.g. low resolution) */
@media (max-width: 900px) {
  .viewer { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; }
  .viewer-stage { padding: 56px 8px 36px; }
  .viewer-stage img, .viewer-stage video { max-height: calc(100svh - 260px); }
  .viewer-stage .embed { width: 100%; }
  .viewer-stage .pano { height: calc(100svh - 260px); }
  .viewer-close { right: 10px; top: 8px; }
  .viewer-prev, .viewer-next { top: auto; bottom: auto; margin: 0; width: 40px; height: 40px; }
  .viewer-prev { left: 8px; top: calc((100svh - 200px) / 2); }
  .viewer-next { right: 8px; top: calc((100svh - 200px) / 2); }
  .viewer-dots { right: 0; bottom: 8px; padding: 0 56px; }
  .viewer-caption { max-height: 200px; padding: 16px var(--gutter) 24px; border-left: 0; border-top: 1px solid var(--line); }
}

@media (max-width: 640px) {
  .page-head { grid-template-columns: 1fr; }
  .view-switch { justify-self: start; grid-row: 2; }
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .panel[data-panel="all"] .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tile-title { font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 1ms !important; animation: none !important; scroll-behavior: auto !important; }
  .tile:hover .tile-media img, .cat-tile:hover .cat-tile-media img, .project-card:hover img { transform: none; }
}

/* Diamond separators (◆) between items, as in Nina's resume */
.sep { display: inline-block; font-size: 0.55em; vertical-align: 0.2em; margin: 0 0.35em; opacity: .7; }
/* Recognition lines right after the subtitle (no laurels) get the same separating space as laurels */
.project-meta + .awards { margin-top: 40px; }
.project-buy { margin-top: 32px; padding: 20px 22px; border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: var(--radius); background: var(--bg-raised); width: fit-content; max-width: 100%; }
.project-buy-title { margin: 0 0 12px; font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: .12em; color: var(--accent); }
.project-links { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; }
/* Project-type icons in the Projects menu */
.menu a:has(.menu-icon) { display: flex; align-items: center; gap: 10px; }
.menu-icon { flex: none; width: 17px; height: 17px; opacity: .75; }
/* A project gallery that fits on a single row ("row": true) */
@media (min-width: 700px) { .grid.grid-one-row { grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); } }
/* Artwork can't be dragged out, selected or long-pressed to save (iOS) */
img, video { -webkit-user-drag: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
/* Book covers etc. ("coverFit": "contain"): the whole image, framed, instead of cropped */
.is-framed { background: var(--bg-tile); }
.project-card-media.is-framed img, .project-hero.is-framed img { object-fit: contain; padding: 4%; box-sizing: border-box; }
.project-card-media.is-framed img { filter: drop-shadow(0 6px 14px rgba(0,0,0,.45)); }
.project-hero.is-framed img { filter: drop-shadow(0 10px 28px rgba(0,0,0,.5)); }
/* Adobe Animate: small app icon followed by its name, centered on the text */
.engine-icon--adobe-animate { --logo-h: 22px; gap: 8px; }
.engine-name { font-size: 14px; font-weight: 600; letter-spacing: .01em; }
/* Software used, after the project description */
.project-software { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 22px; margin: 22px 0 0; }
.project-software .label { margin-right: 0; }
.engine-icon--adobe-photoshop { --logo-h: 22px; gap: 8px; }
/* About page: Elsewhere links with brand icons */
.social-links { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 26px; }
.social-links a { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; }
.social-links a:hover span { text-decoration: underline; }
.social-icon { width: 20px; height: 20px; flex: none; }
/* Home: prominent "See All Projects" button under the featured row */
.see-all-projects { display: flex; justify-content: center; margin: 36px 0 0; }
.button-large { min-height: 56px; padding: 14px 34px; font-size: 17px; font-weight: 600; letter-spacing: .01em; border-radius: 999px; gap: 10px; box-shadow: 0 8px 28px rgba(60, 200, 192, .25); transition: transform var(--t-fast), box-shadow var(--t-fast), background-color var(--t-fast); }
.button-large:hover { transform: translateY(-2px); box-shadow: 0 12px 34px rgba(60, 200, 192, .38); }
.hero-cta { position: absolute; right: 20px; bottom: 20px; display: inline-flex; align-items: center; gap: 10px; padding: 11px 20px; border-radius: 999px; background: rgba(10,11,13,.66); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,.28); color: #fff; font-size: 15px; font-weight: 600; white-space: nowrap; transition: background-color var(--t-fast); }
.hero-cta svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.4; }
.hero-cta-count { padding: 1px 9px; border-radius: 999px; background: var(--accent); color: #031312; font-size: 13px; }
.hero-out-btn { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 10px; padding: 13px 22px; border-radius: 999px; background: rgba(10, 12, 14, .72); border: 1px solid rgba(255,255,255,.18); color: #fff; font-size: 15px; font-weight: 600; backdrop-filter: blur(6px); transition: background-color var(--t-fast), color var(--t-fast); white-space: nowrap; }
.hero-out-btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; }
.hero-out-btn svg path { fill: currentColor; stroke: none; }
.project-hero:hover .hero-out-btn, .project-hero:focus-visible .hero-out-btn { background: rgba(60,200,192,.85); color: #031312; }
.hero-note { margin: 8px 0 0; font-size: 12px; color: var(--text-faint); text-align: center; }
.project-hero:hover .hero-cta { background: rgba(60,200,192,.82); color: #031312; }
.project-hero:hover .hero-cta-count { background: #031312; color: #fff; }
/* 360° video in the viewer */
.pano-video { position: relative; width: 100%; height: min(80vh, 100%); min-height: 60vh; cursor: grab; touch-action: none; background: #000; border-radius: var(--radius); overflow: hidden; }
.pano-video:active { cursor: grabbing; }
.pano-video canvas { display: block; width: 100%; height: 100%; }
.pano-note { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 10px; padding: 12px 20px; border-radius: 999px; background: rgba(10,11,13,.7); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,.28); color: #fff; font-size: 15px; font-weight: 600; pointer-events: none; transition: opacity 600ms var(--ease); }
.pano-note svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.pano-note.is-hidden { opacity: 0; }
.pano-play { position: absolute; left: 14px; bottom: 14px; padding: 7px 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,.3); background: rgba(10,11,13,.6); color: #fff; font-size: 12px; cursor: pointer; }
.engine-icon--adobe-after-effects { --logo-h: 22px; gap: 8px; }
.project-teaser-text { margin: 0; font-size: 19px; font-weight: 600; letter-spacing: .01em; color: var(--text); }
.project-top > .section:first-child { margin-top: 0; }
/* project card summaries: short, at most three lines */
.project-card-summary { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }
.footer-social { display: inline-flex; align-items: center; padding: 0; }
.footer-social .social-icon { width: 18px; height: 18px; display: block; }
.footer-social:hover { color: var(--accent-strong); }
/* About: education entries */
.edu-list { display: grid; gap: 22px; }
.edu { padding-left: 18px; border-left: 2px solid var(--accent); }
.edu-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; }
.edu-degree { margin: 0; font-size: 16px; font-weight: 600; color: var(--text); }
.edu-year { font-size: 13px; color: var(--accent); white-space: nowrap; }
.edu-school { margin: 2px 0 8px; font-size: 14px; color: var(--text-dim); }
.about-block .edu-details { margin: 6px 0 0; padding: 0; list-style: none; display: grid; gap: 3px; font-size: 13px; color: var(--text-dim); }
.edu-details li { position: relative; padding-left: 13px; }
.edu-details li::before { content: "◆"; position: absolute; left: 0; top: .68em; font-size: .6em; color: var(--accent); }
/* Education columns: the small extra lines sit flush, no bullets, same spacing as the lines above */
.about-block .edu-cols .edu-details { margin: -1px 0 0; gap: 1px; font-size: 10px; line-height: 18px; letter-spacing: -.005em; }
.edu-cols .edu-details li { padding-left: 0; }
.edu-cols .edu-details li::before { content: none; }
@container (min-width: 900px) { .about-block .edu-cols .edu-details { white-space: nowrap; } }  /* one line when the columns are wide enough */
.edu-list:has(.edu:not(:has(.edu-details))) { gap: 14px; }
.edu:not(:has(.edu-details)) .edu-school { margin-bottom: 0; }
/* Education as three compact columns: degree + year / institution / school ◆ GPA */
.edu-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.edu-cols .edu { padding-left: 12px; }
.edu-cols .edu-head { flex-wrap: nowrap; justify-content: space-between; align-items: baseline; gap: 8px; }
.edu-cols .edu-degree { margin: 0; font-size: 13.5px; font-weight: 600; line-height: 1.35; color: var(--text); }
.edu-cols .edu-year { font-size: 11.5px; font-weight: 600; letter-spacing: .02em; }
.edu-cols .edu-inst { margin: 3px 0 0; font-size: 11px; line-height: 1.35; letter-spacing: .03em; text-transform: uppercase; color: var(--text-faint); }
.edu-cols .edu-school { margin: 1px 0 0; font-size: 12.5px; line-height: 1.35; color: var(--text-dim); }
@media (max-width: 1000px) { .edu-cols { grid-template-columns: 1fr; } }
.ath-year { margin-left: 4px; font-weight: 600; color: var(--accent); }
.ath-note { font-size: 10.5px; letter-spacing: -.005em; white-space: nowrap; color: var(--text-faint); }
@media (max-width: 1000px) { .ath-note { white-space: normal; } }
/* About: Athletic Recognition toggle */
.ath-summary { list-style: none; display: inline-flex; gap: 10px; align-items: center; font-size: 13px; font-weight: 600;
  background: var(--accent); border-color: var(--accent); color: #031312; border-radius: 999px; padding: 10px 20px;
  box-shadow: 0 6px 22px rgba(60, 200, 192, .22); transition: background-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast); }
.ath-summary:hover { background: var(--accent-strong); border-color: var(--accent-strong); box-shadow: 0 8px 28px rgba(60, 200, 192, .35); transform: translateY(-1px); }
.ath-toggle[open] .ath-summary { background: transparent; color: var(--accent); box-shadow: none; }
.ath-summary::-webkit-details-marker { display: none; }
.ath-summary svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.6; transition: transform var(--t-fast); }
.ath-toggle[open] .ath-summary svg { transform: rotate(180deg); }
.ath-toggle .ath-hide, .ath-toggle[open] .ath-show { display: none; }
.ath-toggle[open] .ath-hide { display: inline; }
.ath-list { margin-top: 20px; }
.medal-gold, .medal-silver, .medal-bronze { font-weight: 600; }
.medal-gold { color: #e8c45f; }
.medal-silver { color: #c9d0d8; }
.medal-bronze { color: #cf8f5a; }
.about-block .ath-list .edu-degree { margin: 0; }  /* titles sit right above their lists */
.ath-list .edu-school { margin: 0 0 4px; font-size: 13px; }
/* About: fun facts as one row of circles (photos later) with the title underneath */
.about-block .fun-facts { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
.fun-facts li { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; font-size: 12.5px; line-height: 1.3; color: var(--text-dim); }
.fun-dot { flex: none; width: 100%; max-width: 112px; aspect-ratio: 1; border-radius: 50%; border: 2px solid var(--accent); background: var(--bg-raised) center / cover no-repeat; }
@media (max-width: 700px) { .about-block .fun-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.project-card-awards { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Uncredited Role: the list sits under its label (full width) instead of in a narrow column beside it */
.project-role.is-stacked, .viewer-caption .cap-role.is-stacked { display: block; }
.project-role.is-stacked .label, .cap-role.is-stacked .label { display: block; margin: 0 0 3px; }
/* Software tags in the viewer caption */
.tool-tags { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.tool-tag { display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; border: 1px solid var(--line); border-radius: 999px; font-size: 11px; color: var(--text-dim); background: var(--bg-raised); }
.tool-tag svg { width: 13px; height: 13px; flex: none; }

/* Viewer toolbar: back to the gallery page, full screen on/off */
.viewer-tools { position: absolute; z-index: 3; top: 14px; left: 14px; display: flex; gap: 8px; }
.viewer-pill { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px 0 11px; border: 1px solid rgba(255,255,255,.12); border-radius: 999px; background: rgba(20, 22, 25, .75); color: var(--text); font: inherit; font-size: 12.5px; cursor: pointer; backdrop-filter: blur(6px); transition: background-color var(--t-fast); }
.viewer-pill:hover { background: rgba(60, 200, 192, .25); }
a.viewer-pill { text-decoration: none; } /* "Back to …" after See it animated */
.viewer-pill svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.viewer-pill .fs-off, .viewer.is-full .viewer-pill .fs-on { display: none; }
.viewer.is-full .viewer-pill .fs-off { display: inline; }
.viewer.is-full .viewer-pill svg.fs-off { display: block; }
.viewer.is-full { grid-template-columns: minmax(0, 1fr) 0; background: #060708; }
.viewer.is-full .viewer-caption { display: none; }
.viewer.is-full .viewer-close { right: 14px; }
.viewer.is-full .viewer-stage { padding: 56px 64px; }
@media (max-width: 900px) { .viewer-pill span { display: none !important; } .viewer-pill { padding: 0 10px; } }
.viewer.is-full .viewer-next { right: 14px; }

/* no X in full screen or on process images: Back to gallery / Exit full screen / Back to final are there instead */
.viewer.is-full .viewer-close, .viewer.in-process .viewer-close { display: none; }
/* full screen: media scale up to fill the screen (keeping their proportions), not just their natural size */
.viewer.is-full .viewer-stage { padding: 0; }
.viewer.is-full .viewer-stage img, .viewer.is-full .viewer-stage video { width: 100vw; height: 100vh; max-width: none; max-height: none; object-fit: contain; border-radius: 0; background: transparent !important; }
.viewer.is-full .viewer-stage .embed { width: min(100vw, calc(100vh * 16 / 9)); }
.viewer.is-full .viewer-dots { z-index: 3; }
/* banana rain (About bio easter egg) */
.banana-rain { position: fixed; inset: 0; z-index: 300; pointer-events: none; overflow: hidden; }
.banana { position: absolute; top: -70px; display: block; animation: banana-fall linear forwards; }
.banana svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 4px 6px rgba(0,0,0,.35)); }
@keyframes banana-fall { from { transform: translate(0, 0) rotate(0deg); } to { transform: translate(var(--drift), calc(100vh + 140px)) rotate(var(--spin)); } }
/* About: bio paragraphs and the Education / Recognition / Athletic sections between them sit closer together, and a
   ◆ ◆ ◆ divider has the same space above and below it (Nina, 2026-10-26) */
.about-text .about-block { margin-bottom: 24px; }
.about-text .bio > :last-child { margin-bottom: 0; }
.bio > :not(:first-child) + .bio-divider, .bio p + .bio-divider { margin-top: 24px; }
/* "More Animation Coming Soon" tile at the end of 3D Animation */
.tile-soon { cursor: default; }
.tile-soon-box { display: flex !important; flex-direction: column; align-items: center; justify-content: center; gap: 12px; border: 1.5px dashed rgba(255,255,255,.18); background: rgba(255,255,255,.02) !important; color: var(--accent); text-align: center; }
.tile-soon-box svg { width: 54px; height: 54px; }
.tile-soon-box span { font-size: 14px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-dim); line-height: 1.5; }
/* flashing-lights warning (tile badge + shown in the viewer before the video plays) */
.badge-warn { background: rgba(255, 196, 0, .9); color: #1a1400; }
.embed-warn { display: grid; place-items: center; background: #0b0c0e; border: 1px solid var(--line); border-radius: 3px; }
.flash-warning { max-width: 440px; padding: 24px; text-align: center; color: var(--text-dim); }
.flash-warning .flash-title { margin: 0 0 8px; font-size: 18px; font-weight: 600; color: #ffc400; }
.flash-warning .button { margin-top: 10px; }
.tile-soon-box small { display: block; margin-bottom: 6px; font-size: 11px; letter-spacing: .1em; color: var(--text-faint); }