/* ============================================================
   Fleur! — Technical 3D Artist
   Dark gallery system — the WORK supplies the colour.
   Neutral warm near-black surfaces, light type, one clay accent.
   ============================================================ */

:root {
  /* Surfaces — neutral near-black, true greyscale */
  --bg:        oklch(0.155 0 0);
  --bg-2:      oklch(0.190 0 0);
  --surface:   oklch(0.235 0 0);
  --surface-2: oklch(0.290 0 0);

  /* Type — clean greys */
  --ink:       oklch(0.965 0 0);
  --ink-2:     oklch(0.760 0 0);
  --ink-3:     oklch(0.555 0 0);

  /* Accent — restrained violet (two close hues) */
  --accent:    oklch(0.640 0.165 295);
  --accent-2:  oklch(0.720 0.110 300);

  --line:      color-mix(in oklab, white 13%, transparent);
  --line-soft: color-mix(in oklab, white 7%, transparent);
  --shadow:    rgba(0, 0, 0, 0.55);

  --font: "Hanken Grotesk", ui-sans-serif, system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.1, 1);
  color-scheme: dark;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow: hidden;
}
#root { height: 100%; }

/* Atmospheric field — soft warm pool of light + grain + vignette */
.field { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.field::before {
  content: "";
  position: absolute; inset: -60px;       /* bleed past viewport so blur edges don't show */
  filter: blur(22px);                      /* kills any banding in the radial glow */
  background:
    radial-gradient(80% 70% at 50% 42%,
      color-mix(in oklab, var(--accent) 12%, transparent) 0%,
      color-mix(in oklab, var(--accent) 8%, transparent) 18%,
      color-mix(in oklab, var(--accent) 5%, transparent) 32%,
      color-mix(in oklab, var(--accent) 2.5%, transparent) 46%,
      transparent 64%),
    radial-gradient(120% 120% at 50% 50%,
      var(--bg-2) 0%,
      color-mix(in oklab, var(--bg-2) 75%, var(--bg)) 26%,
      color-mix(in oklab, var(--bg-2) 45%, var(--bg)) 48%,
      var(--bg) 72%);
}
.field::after {
  content: "";
  position: absolute; inset: 0;
  opacity: 0.4;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.07'/%3E%3C/svg%3E");
}

.label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-3);
}
::selection { background: color-mix(in oklab, var(--accent) 36%, transparent); }

.stage { position: relative; z-index: 1; height: 100%; width: 100%; overflow: hidden; }

/* ---- Top chrome ---- */
.topbar {
  position: fixed; top: 0; left: 0; right: 0;
  display: flex; align-items: center; justify-content: space-between;
  padding: 26px 34px; z-index: 40; pointer-events: none;
}
.topbar > * { pointer-events: auto; }
.brand { display: flex; align-items: baseline; gap: 12px; cursor: pointer; user-select: none; }
.brand-mark { font-size: 22px; font-weight: 700; letter-spacing: -0.01em; }
.brand-mark em { font-style: normal; color: var(--accent); }
.topnav { display: flex; gap: 4px; align-items: center; }
.topnav button {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-2); background: none; border: none; padding: 9px 14px; cursor: pointer;
  border-radius: 100px; transition: color 0.3s, background 0.3s;
}
.topnav button:hover { color: var(--ink); }
.topnav button.active { color: var(--accent); background: color-mix(in oklab, var(--accent) 14%, transparent); }

/* ============================================================
   ORBIT carousel — 3D depth-sorted 16:9 cards
   ============================================================ */
.orbit-wrap {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  touch-action: none;
  cursor: grab;
  isolation: isolate; /* contain card z-indexes so overlays sit above */
}
.orbit-wrap.grabbing { cursor: grabbing; }
.orbit-stage { position: relative; width: 1px; height: 1px; }

.ocard {
  position: absolute;
  top: 50%; left: 50%;
  will-change: transform, opacity, filter;
  -webkit-tap-highlight-color: transparent;
}
.ocard-skin {
  position: relative;
  width: 100%; height: 100%;
  overflow: hidden;
  border-radius: 6px;
  background: var(--card-tint, var(--surface));
  box-shadow:
    0 2px 0 0 color-mix(in oklab, white 8%, transparent) inset,
    0 30px 60px -28px var(--shadow);
  outline: 1px solid color-mix(in oklab, white 9%, transparent);
  outline-offset: -1px;
  transition: box-shadow 0.45s var(--ease);
}
.ocard .ph { position: absolute; inset: 0; }
.ocard-grade {
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(0,0,0,0.04) 38%,
    rgba(0,0,0,0.12) 56%,
    rgba(0,0,0,0.26) 72%,
    rgba(0,0,0,0.42) 86%,
    rgba(0,0,0,0.58) 100%);
}
.ocard-meta {
  position: absolute; left: 16px; right: 16px; bottom: 13px;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 10px;
}
.ocard-meta .t { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; color: #fff; text-shadow: 0 1px 10px rgba(0,0,0,0.5); }
.ocard-meta .c { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,255,255,0.82); white-space: nowrap; }
.ocard-num {
  position: absolute; top: 12px; left: 14px;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em;
  color: rgba(255,255,255,0.7); text-shadow: 0 1px 8px rgba(0,0,0,0.6);
}
.ocard.front .ocard-skin {
  box-shadow:
    0 0 0 1px color-mix(in oklab, var(--accent) 55%, transparent),
    0 44px 90px -30px rgba(0,0,0,0.85);
}
/* reflection sliver under each card */
.ocard-floor {
  position: absolute;
  left: 8%; right: 8%; bottom: -16px; height: 26px;
  background: radial-gradient(60% 100% at 50% 0%, rgba(0,0,0,0.5), transparent 75%);
  filter: blur(3px);
}

/* ---- Center flower core (the sun the work orbits) ---- */
.core {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1; /* sits between back and front cards; JS cards use higher z when front */
  display: grid; place-items: center;
  pointer-events: none;
}
/* soft halo behind the mark */
.core-halo {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  /* many fine stops + a CSS filter blur smooth out any banding */
  background:
    radial-gradient(circle at center,
      color-mix(in oklab, var(--accent) 32%, transparent) 0%,
      color-mix(in oklab, var(--accent) 26%, transparent) 8%,
      color-mix(in oklab, var(--accent) 20%, transparent) 16%,
      color-mix(in oklab, var(--accent) 15%, transparent) 24%,
      color-mix(in oklab, var(--accent) 11%, transparent) 32%,
      color-mix(in oklab, var(--accent) 8%, transparent) 40%,
      color-mix(in oklab, var(--accent) 5%, transparent) 50%,
      color-mix(in oklab, var(--accent) 3%, transparent) 60%,
      color-mix(in oklab, var(--accent) 1.5%, transparent) 70%,
      transparent 82%);
  filter: blur(8px);
  pointer-events: none;
}
.core-mark {
  position: absolute; top: 50%; left: 50%;
  transform-origin: center;
  background: var(--accent);
  -webkit-mask: var(--mark) center / contain no-repeat;
  mask: var(--mark) center / contain no-repeat;
  filter:
    drop-shadow(0 0 10px color-mix(in oklab, var(--accent) 60%, transparent))
    drop-shadow(0 0 28px color-mix(in oklab, var(--accent) 40%, transparent))
    drop-shadow(0 0 60px color-mix(in oklab, var(--accent) 20%, transparent));
  will-change: transform;
}
.ocard-cover {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}
/* portrait video in the carousel card: contain so the whole vertical frame fits */
.ocard-cover.is-portrait {
  object-fit: contain;
  background: #000;
}

/* active-work readout */
.readout {
  position: absolute; left: 50%; bottom: 78px; transform: translateX(-50%);
  text-align: center; z-index: 30; pointer-events: none; transition: opacity 0.4s;
  width: max-content; max-width: 80vw;
}
.readout .r-cat { font-family: var(--mono); font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--accent); }
.readout .r-title { font-size: 30px; font-weight: 600; letter-spacing: -0.015em; margin-top: 3px; }
.readout .r-meta { font-family: var(--mono); font-size: 11px; color: var(--ink-3); margin-top: 5px; letter-spacing: 0.04em; }
.readout .r-open { margin-top: 12px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-3); display: inline-flex; align-items: center; gap: 7px; }
.spin-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--accent-2); animation: pulse 2.4s var(--ease-soft) infinite; }
@keyframes pulse { 0%,100%{opacity:0.25} 50%{opacity:1} }

/* corners */
.corner { position: fixed; bottom: 26px; z-index: 40; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em; color: var(--ink-3); text-transform: uppercase; }
.corner.left { left: 34px; }
.corner.right { right: 34px; text-align: right; }

/* ============================================================
   Bloom (alt layout, kept as a tweak)
   ============================================================ */
.bloom-wrap { position: absolute; inset: 0; display: grid; place-items: center; touch-action: none; isolation: isolate; }
.bloom { position: relative; width: 1px; height: 1px; will-change: transform; }
.petal { position: absolute; top: 0; left: 0; transform-origin: center; will-change: transform; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.petal-skin { position: relative; width: 100%; height: 100%; overflow: hidden; background: var(--petal-tint, var(--surface)); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06), 0 18px 40px -22px #000; transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease), filter 0.5s var(--ease); }
.petal-skin .ph { position: absolute; inset: 0; }
.petal.hot .petal-skin { box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--accent) 45%, transparent), 0 28px 60px -20px #000; filter: saturate(1.12) brightness(1.05); }
.shape-teardrop .petal-skin { border-radius: 46% 46% 46% 46% / 64% 64% 36% 36%; }
.shape-leaf .petal-skin { border-radius: 0 78% 0 78%; }
.shape-soft .petal-skin { border-radius: 50%; }
.shape-card .petal-skin { border-radius: 10px; }
.petal-grade { position: absolute; inset: 0; background: linear-gradient(160deg, transparent 0%, rgba(0,0,0,0.06) 35%, rgba(0,0,0,0.18) 60%, rgba(0,0,0,0.36) 90%); }
.petal-idx { position: absolute; left: 12px; bottom: 10px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em; color: rgba(255,255,255,0.9); text-shadow: 0 1px 6px rgba(0,0,0,0.6); }
.pistil { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 20; display: grid; place-items: center; text-align: center; border-radius: 50%; background: radial-gradient(circle at 38% 32%, var(--surface-2), var(--bg-2) 80%); box-shadow: 0 0 0 1px var(--line), 0 30px 70px -34px #000; padding: 18px; user-select: none; cursor: pointer; }
.pistil .p-name { font-size: 23px; font-weight: 700; letter-spacing: -0.01em; line-height: 1; }
.pistil .p-name em { font-style: normal; color: var(--accent); }
.pistil .p-role { margin-top: 7px; font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3); max-width: 150px; }
.pistil .p-hint { margin-top: 11px; font-family: var(--mono); font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-3); opacity: 0.8; display: flex; align-items: center; gap: 6px; }

/* ============================================================
   Overlays (case study, about, contact) — dark
   ============================================================ */
.overlay {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(0, 0, 0, 0.12);
  -webkit-backdrop-filter: blur(24px) brightness(1.25);
  backdrop-filter: blur(24px) brightness(1.25);
  display: flex; justify-content: center; animation: fade 0.3s var(--ease);
}
@keyframes fade { from { opacity: 0 } to { opacity: 1 } }
.sheet {
  position: relative;
  background: rgba(20, 18, 16, 0.90);
  -webkit-backdrop-filter: blur(40px) brightness(1.7) saturate(1.3);
  backdrop-filter: blur(40px) brightness(1.7) saturate(1.3);
  width: 100%; max-width: 1180px; height: 100%;
  overflow-y: auto; overflow-x: hidden;
  animation: rise 0.5s var(--ease);
  box-shadow: 0 0 140px -10px rgba(0,0,0,0.9);
}
@keyframes rise { from { transform: translateY(28px); opacity: 0.5 } to { transform: none; opacity: 1 } }
.sheet::-webkit-scrollbar { width: 10px; }
.sheet::-webkit-scrollbar-thumb { background: var(--line); border-radius: 10px; }
.sheet-close {
  position: absolute; top: 18px; right: 18px; z-index: 10;
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--line); background: color-mix(in oklab, var(--bg) 70%, transparent);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  color: var(--ink); font-size: 18px; cursor: pointer;
  transition: transform 0.3s var(--ease), background 0.3s;
}
.sheet-close:hover { transform: rotate(90deg); background: var(--surface); }

.cs-hero { position: relative; height: 62vh; min-height: 420px; overflow: hidden; }
.cs-hero .ph { position: absolute; inset: 0; }
.cs-hero-cover {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
/* mp4 hero: hero takes the video's natural aspect (set via JS on .cs-hero-mp4) */
.cs-hero.cs-hero-mp4 {
  height: auto;
  min-height: 0;
  max-height: 85vh;
  display: block;
  background: #000;
  width: 100%;
  margin: 0 auto;
}
.cs-hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
  background: #000;
  object-fit: cover;
  object-position: center;
}
.cs-link {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in oklab, var(--accent) 40%, transparent);
  transition: border-color 0.3s;
}
.cs-hero-caption {
  padding: 32px 60px 0;
}
.cs-hero-caption .label { color: var(--accent); }
.cs-hero-caption h1 {
  margin-top: 8px;
  font-size: clamp(40px, 6vw, 78px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 0.98;
  text-wrap: balance;
}
@media (max-width: 760px) {
  .cs-hero-caption { padding: 24px 26px 0; }
}
.cs-hero-grade { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 0%, color-mix(in oklab, var(--bg-2) 12%, transparent) 35%, color-mix(in oklab, var(--bg-2) 35%, transparent) 55%, color-mix(in oklab, var(--bg-2) 65%, transparent) 75%, var(--bg-2) 100%); }
.cs-hero-text { position: absolute; left: 0; right: 0; bottom: 0; padding: 48px 60px; }
.cs-hero-text h1 { font-size: clamp(40px, 6vw, 78px); font-weight: 600; letter-spacing: -0.02em; line-height: 0.98; margin-top: 10px; text-wrap: balance; }
.play-badge {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 92px; height: 92px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.5); background: rgba(0,0,0,0.3);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  display: grid; place-items: center; color: #fff; cursor: pointer;
  transition: transform 0.4s var(--ease), background 0.4s;
}
.play-badge:hover { transform: translate(-50%,-50%) scale(1.08); background: rgba(0,0,0,0.15); }
.play-badge svg { margin-left: 4px; }

.cs-body { padding: 56px 60px 90px; display: grid; grid-template-columns: 1fr 300px; gap: 56px; align-items: start; }
.cs-lead { font-size: 25px; line-height: 1.42; letter-spacing: -0.01em; color: var(--ink-2); text-wrap: pretty; max-width: 60ch; }
.cs-lead strong { color: var(--ink); font-weight: 600; }
.cs-para { margin-top: 22px; font-size: 16px; line-height: 1.7; color: var(--ink-2); max-width: 62ch; }
.cs-aside { display: grid; gap: 20px; }
.cs-fact { border-top: 1px solid var(--line); padding-top: 11px; }
.cs-fact dt { font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-3); }
.cs-fact dd { font-size: 15px; margin-top: 5px; color: var(--ink); }
.tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 6px; }
.tag { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.08em; padding: 5px 10px; border-radius: 100px; background: color-mix(in oklab, var(--accent) 16%, transparent); color: color-mix(in oklab, var(--accent) 80%, white); }
.cs-gallery { padding: 0 60px 80px; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.cs-gallery .frame { position: relative; aspect-ratio: 16/9; overflow: hidden; border-radius: 4px; }
.cs-gallery .frame.wide { grid-column: 1 / -1; aspect-ratio: 21/9; }
.cs-gallery .ph { position: absolute; inset: 0; }
.cs-nav { border-top: 1px solid var(--line); padding: 30px 60px 70px; display: flex; justify-content: space-between; gap: 20px; }
.cs-nav button { background: none; border: none; cursor: pointer; text-align: left; font-family: inherit; color: var(--ink-2); transition: color 0.3s; }
.cs-nav button:hover { color: var(--accent); }
.cs-nav button.next { text-align: right; }
.cs-nav .label { display: block; margin-bottom: 5px; }
.cs-nav .nav-title { font-size: 22px; font-weight: 600; letter-spacing: -0.01em; }

.about { padding: 96px 60px 90px; max-width: 1000px; margin: 0 auto; }
.about .eyebrow { margin-bottom: 26px; }
.about h2 { font-size: clamp(34px, 4.4vw, 60px); font-weight: 500; letter-spacing: -0.02em; line-height: 1.06; text-wrap: balance; max-width: 22ch; }
.about h2 em { font-style: normal; color: var(--accent); }
.about-grid { margin-top: 56px; display: grid; grid-template-columns: 260px 1fr; gap: 48px; align-items: start; }
.portrait { position: relative; aspect-ratio: 3/4; border-radius: 6px; overflow: hidden; }
.portrait .ph { position: absolute; inset: 0; }
.about-col p { font-size: 17px; line-height: 1.72; color: var(--ink-2); margin-bottom: 18px; max-width: 60ch; }
.about-col p strong { color: var(--ink); font-weight: 600; }
.skills { margin-top: 34px; display: grid; }
.skill-row { display: flex; justify-content: space-between; gap: 20px; padding: 14px 0; border-top: 1px solid var(--line); }
.skill-row .k { font-weight: 600; font-size: 15px; }
.skill-row .v { font-family: var(--mono); font-size: 12px; color: var(--ink-3); letter-spacing: 0.04em; text-align: right; }

.contact { padding: 110px 60px 90px; max-width: 940px; margin: 0 auto; }
.contact h2 { font-size: clamp(38px, 5.5vw, 80px); font-weight: 500; letter-spacing: -0.025em; line-height: 1; text-wrap: balance; }
.contact h2 em { font-style: normal; color: var(--accent); }
.contact-lead { margin-top: 22px; font-size: 19px; line-height: 1.6; color: var(--ink-2); max-width: 50ch; }
.contact-grid { margin-top: 56px; display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
.field-row { display: grid; gap: 7px; margin-bottom: 22px; }
.field-row label { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3); }
.field-row input, .field-row textarea { font-family: inherit; font-size: 16px; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 13px 15px; outline: none; transition: border-color 0.3s, box-shadow 0.3s; }
.field-row input:focus, .field-row textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 22%, transparent); }
.field-row textarea { min-height: 120px; resize: vertical; }
.btn { font-family: var(--mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; background: var(--ink); color: var(--bg); border: none; border-radius: 100px; padding: 15px 26px; cursor: pointer; transition: transform 0.3s var(--ease), background 0.3s, color 0.3s; }
.btn:hover { transform: translateY(-2px); background: var(--accent); color: #fff; }
.contact-side dl { display: grid; gap: 22px; }
.contact-side dt { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 5px; }
.contact-side dd { font-size: 18px; }
.contact-side a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line); }
.contact-side a:hover { color: var(--accent); }

/* striped placeholder (used only where no work colour) */
.ph { background-color: var(--ph-bg, var(--surface)); background-image: repeating-linear-gradient(135deg, color-mix(in oklab, black 22%, transparent) 0 1px, transparent 1px 11px); }
.ph-label { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,0.65); white-space: nowrap; }

@media (max-width: 760px) {
  .cs-body { grid-template-columns: 1fr; gap: 30px; padding: 40px 26px 60px; }
  .cs-gallery { grid-template-columns: 1fr; padding: 0 26px 50px; }
  .cs-hero-text { padding: 30px 26px; }
  .about, .contact { padding-left: 26px; padding-right: 26px; }
  .about-grid, .contact-grid { grid-template-columns: 1fr; }
  .cs-nav { padding: 26px; }
}


.cs-extras { grid-column: 1 / -1; }
.cs-extras-label { display: block; margin-bottom: 18px; color: var(--ink-3); }
.cs-extras-list { display: flex; flex-direction: column; gap: 16px; }
.file-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.file-grid-v3 { grid-template-columns: repeat(3, 1fr); }
.file-grid-v3 .frame-file { aspect-ratio: 9 / 16; }
.file-grid-v3 .frame-file video { object-fit: cover; }
.file-grid-v3 .frame-file video.is-portrait { object-fit: cover; }
@media (max-width: 760px) {
  .file-grid { grid-template-columns: 1fr; }
  .file-grid-v3 { grid-template-columns: 1fr 1fr; }
}

/* video-file frame: 16:9, video covers */
.frame-file {
  position: relative;          /* contains absolutely-positioned iframes */
  background: #000;
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  aspect-ratio: 16 / 9;
}
.frame-file-hero { aspect-ratio: 16 / 9; width: 100%; }
.frame-file video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* portrait videos: don't crop them — letterbox with a soft side-fill */
.frame-file video.is-portrait {
  object-fit: contain;
  background: #000;
}
.frame-file:has(video.is-portrait)::before {
  content: "";
  position: absolute; inset: 0;
  background-image: var(--portrait-blur, none);
  background-size: cover;
  background-position: center;
  filter: blur(40px) brightness(0.5);
  z-index: 0;
}
.frame-file video.is-portrait { position: relative; z-index: 1; }


.lite-yt {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  padding: 0; margin: 0;
  border: 0; outline: 0;
  background: #000;
  cursor: pointer;
  overflow: hidden;
}
.lite-yt img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.5s var(--ease), opacity 0.3s;
}
.lite-yt:hover img { transform: scale(1.02); opacity: 0.92; }
.lite-yt .play-badge {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}


.cs-hero-video-wrap { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: #000; }
.cs-hero-video-wrap iframe.cs-hero-video { position: relative; inset: auto; width: 100%; height: 100%; }
.yt-fallback {
  position: absolute; right: 14px; bottom: 14px;
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.10em; color: #fff;
  background: rgba(0,0,0,0.55);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  padding: 8px 12px; border-radius: 100px;
  text-decoration: none;
  transition: background 0.3s;
  z-index: 5;
}
.yt-fallback:hover { background: rgba(0,0,0,0.8); color: var(--accent); }


/* simple About sheet — big white logo + a few lines + skills; fits viewport, no scroll */
.about-simple {
  max-width: 760px;
  margin: 0 auto;
  padding: 4vh 40px 4vh;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 4vh;
}
.about-mark { width: clamp(120px, 16vh, 200px); height: clamp(120px, 16vh, 200px); display: flex; align-items: center; justify-content: center; margin: 0; }
.about-mark .mark-glyph {
  width: 100%; height: 100%;
  background: #fff;
  -webkit-mask: var(--mark) center / contain no-repeat;
          mask: var(--mark) center / contain no-repeat;
  filter: drop-shadow(0 0 28px rgba(255,255,255,0.18));
}
.about-lines { display: flex; flex-direction: column; gap: 12px; max-width: 56ch; margin: 0; }
.about-lines p { font-size: clamp(15px, 1.7vh, 17px); line-height: 1.5; color: var(--ink-2); text-wrap: pretty; }
.about-lines p:first-child { font-size: clamp(18px, 2.1vh, 21px); color: var(--ink); font-weight: 500; letter-spacing: -0.005em; }
.about-skills { width: 100%; max-width: 560px; text-align: left; margin: 0; }
.about-skills .skill-row { padding: clamp(8px, 1.2vh, 14px) 0; }
@media (max-width: 760px) {
  .about-simple { padding: 3vh 24px 3vh; gap: 3vh; }
}


/* keep Stack row layout like the others but vertically center the label against the multi-line value */
.skill-row.stack-row { align-items: center; }


/* Contact link styled like the nav buttons (since it's now an <a> for mailto) */
.topnav a {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-2);
  background: none;
  border: none;
  padding: 9px 14px;
  cursor: pointer;
  border-radius: 100px;
  transition: color 0.3s, background 0.3s;
  text-decoration: none;
}
.topnav a:hover { color: var(--ink); background: color-mix(in oklab, var(--accent) 12%, transparent); }


.corner.center { left: 50%; transform: translateX(-50%); right: auto; text-indent: 0.14em; }


/* light film grain on top of everything */
body::after {
  content: "";
  position: fixed;
  inset: -50%;
  width: 200%;
  height: 200%;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.32;
  mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.9'/></svg>");
  animation: grain 0.8s steps(8) infinite;
}
@keyframes grain {
  0%   { transform: translate(0,   0); }
  10%  { transform: translate(-2%, -3%); }
  20%  { transform: translate(-4%,  2%); }
  30%  { transform: translate( 3%, -4%); }
  40%  { transform: translate(-3%,  3%); }
  50%  { transform: translate( 4%,  2%); }
  60%  { transform: translate(-2%, -5%); }
  70%  { transform: translate( 3%,  3%); }
  80%  { transform: translate(-4%, -2%); }
  90%  { transform: translate( 2%,  4%); }
  100% { transform: translate(0,   0); }
}
@media (prefers-reduced-motion: reduce) {
  body::after { animation: none; }
}
.global-grain {} /* sentinel */