/* ==========================================================================
   Murat Gezici — Portfolio
   Single stylesheet: design tokens + fonts + base + components + layout.
   Tokens mirror the "Murat Gezici Portfolio" design system.
   ========================================================================== */

/* ---------- Fonts (self-hosted Poppins, latin + latin-ext) ---------------- */
@font-face { font-family:'Poppins'; font-style:normal; font-weight:400; font-display:swap;
  src:url('../fonts/poppins-400-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'Poppins'; font-style:normal; font-weight:400; font-display:swap;
  src:url('../fonts/poppins-400-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:'Poppins'; font-style:normal; font-weight:500; font-display:swap;
  src:url('../fonts/poppins-500-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'Poppins'; font-style:normal; font-weight:500; font-display:swap;
  src:url('../fonts/poppins-500-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:'Poppins'; font-style:normal; font-weight:600; font-display:swap;
  src:url('../fonts/poppins-600-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'Poppins'; font-style:normal; font-weight:600; font-display:swap;
  src:url('../fonts/poppins-600-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:'Poppins'; font-style:normal; font-weight:700; font-display:swap;
  src:url('../fonts/poppins-700-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'Poppins'; font-style:normal; font-weight:700; font-display:swap;
  src:url('../fonts/poppins-700-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:'Poppins'; font-style:normal; font-weight:800; font-display:swap;
  src:url('../fonts/poppins-800-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'Poppins'; font-style:normal; font-weight:800; font-display:swap;
  src:url('../fonts/poppins-800-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:'Poppins'; font-style:normal; font-weight:900; font-display:swap;
  src:url('../fonts/poppins-900-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'Poppins'; font-style:normal; font-weight:900; font-display:swap;
  src:url('../fonts/poppins-900-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }

/* ---------- Design tokens ------------------------------------------------- */
:root {
  /* brand blue ramp */
  --blue-50:#EEF3FF; --blue-100:#DCE7FF; --blue-200:#BBCEFF; --blue-300:#8FACFF;
  --blue-400:#5B85FF; --blue-500:#2D6BFF; --blue-600:#1B53E6; --blue-700:#1640B4; --blue-800:#112F82;
  /* cyan */
  --cyan-50:#E6FBFF; --cyan-100:#C2F2FB; --cyan-300:#6FE0EE; --cyan-400:#2BC8DE; --cyan-500:#0FB0C7; --cyan-600:#088DA2;
  /* red / amber */
  --red-50:#FFEEEC; --red-300:#FF8A78; --red-500:#F0432B; --red-600:#CE2A14;
  --amber-100:#FFEDB8; --amber-400:#FFC02E; --amber-500:#F5A300; --amber-600:#D98800;
  /* pops */
  --grape-500:#6B4BF0; --grape-100:#E7E1FF; --teal-500:#12B5A6; --teal-100:#CFF3EF; --green-500:#1FA45C; --green-100:#D2F2DF;
  /* neutrals */
  --neutral-0:#FFFFFF; --neutral-50:#F5F8FC; --neutral-100:#EDF1F8; --neutral-200:#E0E6F0; --neutral-300:#CAD3E1;
  --neutral-400:#98A4B8; --neutral-500:#6A788F; --neutral-600:#485468; --neutral-700:#2F3A4C; --neutral-800:#1B2433; --neutral-900:#0E1622;
  /* semantic */
  --bg-page:#FAFAF7; --surface:var(--neutral-0); --surface-sunken:var(--neutral-100); --surface-ink:var(--neutral-900);
  --text-strong:var(--neutral-900); --text-body:var(--neutral-800); --text-faint:var(--neutral-400);
  --text-on-brand:var(--neutral-0); --text-link:var(--blue-600);
  --brand:var(--blue-500); --brand-hover:var(--blue-600); --brand-press:var(--blue-700); --brand-soft:var(--blue-50); --accent:var(--cyan-400);
  --text-muted:var(--neutral-600); /* neutral-600 (not the design's -500) to clear WCAG AA 4.5:1 on small text */
  --border:var(--neutral-200); --border-strong:var(--neutral-300);
  --success:var(--green-500); --success-bg:var(--green-100); --warning:var(--amber-500); --warning-bg:var(--amber-100);
  /* type */
  --font-sans:'Poppins',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --text-xs:0.75rem; --text-sm:0.875rem; --text-base:1rem; --text-md:1.125rem; --text-lg:1.25rem;
  --text-xl:1.5rem; --text-2xl:1.875rem; --text-3xl:2.25rem; --text-4xl:3rem; --text-5xl:3.75rem;
  /* radii */
  --radius-xs:4px; --radius-sm:8px; --radius-md:12px; --radius-lg:16px; --radius-xl:24px; --radius-2xl:32px; --radius-pill:999px;
  /* shadows */
  --shadow-xs:0 1px 2px rgba(14,22,34,.08); --shadow-sm:0 2px 6px rgba(14,22,34,.10); --shadow-md:0 6px 18px rgba(14,22,34,.12);
  --shadow-lg:0 14px 34px rgba(14,22,34,.15); --shadow-xl:0 28px 60px rgba(14,22,34,.20); --shadow-brand:0 10px 28px rgba(45,107,255,.36);
  /* motion */
  --dur-fast:120ms; --dur:200ms; --ease-out:cubic-bezier(.2,.8,.2,1); --ease-spring:cubic-bezier(.34,1.4,.64,1);
  --container:1200px;
}

/* ---------- Base reset ---------------------------------------------------- */
*,*::before,*::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body {
  margin:0; background:var(--bg-page); font-family:var(--font-sans); font-weight:400;
  font-size:var(--text-base); line-height:1.5; color:var(--text-body);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden;
}
h1,h2,h3,h4 { margin:0; color:var(--text-strong); line-height:1.15; letter-spacing:-0.015em; font-weight:800; text-wrap:balance; }
p { margin:0; text-wrap:pretty; }
a { color:var(--text-link); text-decoration:none; }
img,video,svg { display:block; max-width:100%; }
button { font-family:inherit; }
::selection { background:var(--blue-200); color:var(--neutral-900); }
:focus-visible { outline:3px solid var(--brand); outline-offset:2px; border-radius:2px; }
/* skip link sends focus here; don't ring the whole content region */
#main:focus { outline:none; }

.container { max-width:var(--container); margin:0 auto; padding-left:32px; padding-right:32px; }
.eyebrow { display:inline-flex; align-items:center; gap:8px; font-size:var(--text-xs); font-weight:600;
  letter-spacing:.1em; text-transform:uppercase; color:var(--brand); margin-bottom:10px; }
.eyebrow::before { content:''; width:22px; height:3px; border-radius:2px; background:var(--brand); }
.eyebrow--center { justify-content:center; }
.visually-hidden { position:absolute; 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:-999px; top:0; z-index:2000; background:var(--brand); color:#fff;
  padding:10px 16px; border-radius:0 0 var(--radius-sm) 0; font-weight:600; }
.skip-link:focus { left:0; }

/* ---------- Header / nav -------------------------------------------------- */
.site-header { position:sticky; top:0; z-index:100; background:rgba(250,250,247,.82);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-bottom:1px solid var(--border); }
.site-header__inner { display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding-top:14px; padding-bottom:14px; }
.brand { display:flex; align-items:center; gap:12px; flex:none; }
.brand__mark { width:40px; height:40px; display:inline-flex; align-items:center; justify-content:center;
  background:var(--brand); color:#fff; font-weight:700; font-size:16px; letter-spacing:-.04em; border-radius:var(--radius-md); }
.brand__name { display:flex; flex-direction:column; line-height:1.05; }
.brand__name b { font-weight:600; font-size:16px; letter-spacing:-.01em; color:var(--text-strong); }
.brand__name b span { color:var(--brand); }
.brand__role { font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--text-muted); }
.nav { display:flex; align-items:center; gap:4px; }
.nav__link { padding:8px 14px; border-radius:var(--radius-sm); font-size:var(--text-sm); font-weight:500;
  color:var(--text-body); cursor:pointer; white-space:nowrap; transition:background var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out); }
.nav__link:hover { background:var(--brand-soft); color:var(--brand-press); }
.nav__link[aria-current="page"] { background:var(--brand-soft); color:var(--brand-press); font-weight:600; }

/* ---------- Buttons (Button.jsx) ------------------------------------------ */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:11px 20px;
  font-size:var(--text-base); font-family:var(--font-sans); font-weight:600; line-height:1; letter-spacing:-.01em;
  border-radius:var(--radius-md); cursor:pointer; white-space:nowrap; border:1px solid transparent;
  transition:transform var(--dur) var(--ease-spring),box-shadow var(--dur) var(--ease-out),background var(--dur-fast) var(--ease-out),filter var(--dur-fast) var(--ease-out); }
.btn--lg { padding:15px 28px; font-size:var(--text-md); gap:10px; }
.btn--pop,.btn--primary { background:var(--brand); color:var(--text-on-brand); border-color:var(--blue-600); box-shadow:var(--shadow-sm); }
.btn--pop:hover,.btn--primary:hover { transform:translateY(-1px); box-shadow:var(--shadow-brand); }
.btn--secondary { background:var(--surface); color:var(--text-strong); border-color:var(--border-strong); box-shadow:var(--shadow-xs); }
.btn--secondary:hover { transform:translateY(-1px); filter:brightness(.97); }
.btn:active { transform:translateY(1px) scale(.99); }

/* ---------- Badge (Badge.jsx) --------------------------------------------- */
.badge { display:inline-flex; align-items:center; gap:6px; padding:3px 10px; border-radius:var(--radius-pill);
  font-size:var(--text-xs); font-weight:600; letter-spacing:.01em; line-height:1.5; white-space:nowrap; }
.badge--brand { background:var(--brand-soft); color:var(--brand-press); }
.badge--brand-solid { background:var(--brand); color:#fff; }
.badge--success-solid { background:#157A44; color:#fff; } /* darker than --success so 12px white text clears WCAG AA */
.badge--warning-solid { background:var(--warning); color:#3a2a00; }

/* ---------- Tag (Tag.jsx) ------------------------------------------------- */
.tag { display:inline-flex; align-items:center; padding:5px 11px; border-radius:var(--radius-sm);
  font-size:var(--text-sm); font-weight:500; line-height:1.3; background:var(--surface); color:var(--text-body); border:1px solid var(--border); }

/* ---------- Media frame (MediaFrame.jsx) ---------------------------------- */
.media-frame { position:relative; width:100%; border-radius:var(--radius-lg); overflow:hidden;
  background:var(--surface-sunken); border:1px solid var(--border); }
.media-frame > img,.media-frame > video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.media-frame__tag { position:absolute; bottom:10px; right:10px; z-index:2; background:rgba(26,19,12,.78);
  color:#fff; font-size:11px; font-weight:700; letter-spacing:.08em; padding:3px 8px; border-radius:var(--radius-sm);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
.cover-badge { position:absolute; top:12px; left:12px; z-index:2; }

/* ---------- Poster (GameCard cover-less fallback) ------------------------- */
.poster { position:relative; width:100%; overflow:hidden; background:var(--_base,var(--blue-500)); }
.poster::before { content:''; position:absolute; inset:0; background:var(--_deep,var(--blue-700));
  clip-path:polygon(0 62%,100% 22%,100% 100%,0 100%); opacity:.55; }
.poster::after { content:''; position:absolute; right:-22px; top:-22px; width:96px; height:96px;
  border-radius:50%; border:10px solid rgba(255,255,255,.14); }
.poster__title { position:absolute; inset:0; display:flex; align-items:flex-end; padding:18px 18px 16px;
  color:#fff; font-weight:900; font-size:var(--text-2xl); line-height:1.02; letter-spacing:-.02em;
  text-shadow:0 2px 10px rgba(0,0,0,.22); }
.poster__title span { max-width:88%; }
.poster__badge { position:absolute; top:12px; left:12px; z-index:2; }
.poster--16-10 { aspect-ratio:16/10; }
.poster--blue  { --_base:var(--blue-500);  --_deep:var(--blue-700); }
.poster--red,.poster--coral { --_base:var(--red-500); --_deep:var(--red-600); }
.poster--teal  { --_base:var(--teal-500);  --_deep:#0c8576; }
.poster--grape,.poster--indigo { --_base:var(--grape-500); --_deep:#4b2fc0; }
.poster--cyan  { --_base:var(--cyan-500);  --_deep:var(--cyan-600); }
.poster--slate { --_base:var(--neutral-700); --_deep:var(--neutral-900); }
.poster--ink   { --_base:var(--neutral-800); --_deep:var(--neutral-900); }
.poster--amber { --_base:var(--cyan-500);   --_deep:var(--cyan-600); }

/* ---------- Game card (GameCard.jsx) -------------------------------------- */
.game-card { display:flex; flex-direction:column; text-decoration:none; background:var(--surface);
  border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-sm);
  transition:transform var(--dur) var(--ease-spring),box-shadow var(--dur) var(--ease-out); }
.game-card:hover { transform:translateY(-5px); box-shadow:var(--shadow-lg); }
.game-card__cover { position:relative; }
.game-card__cover .media-frame,.game-card__cover .poster { border:none; border-radius:0; aspect-ratio:16/10; }
.game-card__body { padding:20px; display:flex; flex-direction:column; gap:12px; flex:1; }
.game-card__meta { display:flex; gap:8px; font-size:var(--text-xs); font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--text-muted); }
.game-card__meta .sep { color:var(--border-strong); }
.game-card__title { font-size:var(--text-xl); font-weight:800; letter-spacing:-.015em; color:var(--text-strong); line-height:1.15; }
.game-card__blurb { font-size:var(--text-sm); color:var(--text-body); line-height:1.55; }
.game-card__tags { display:flex; flex-wrap:wrap; gap:6px; margin-top:auto; padding-top:4px; }

/* ---------- Sections & tabs ----------------------------------------------- */
.tab-panel { padding-top:56px; padding-bottom:72px; }
.js .tab-panel { display:none; }
.js .tab-panel.is-active { display:block; }
.section-head { max-width:760px; margin-bottom:36px; }
.section-head h2 { font-size:var(--text-3xl); font-weight:800; letter-spacing:-.015em; line-height:1.2; }
.section-head p { margin-top:10px; font-size:var(--text-md); color:var(--text-muted); line-height:1.6; }
.grid-cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:24px; }

/* ---------- Home hero ----------------------------------------------------- */
.hero { position:relative; overflow:hidden; }
.hero__blob { position:absolute; border-radius:50%; filter:blur(48px); pointer-events:none; }
.hero__blob--1 { top:-140px; right:-100px; width:480px; height:480px; background:var(--blue-100); opacity:.35; }
.hero__blob--2 { bottom:-80px; left:-60px; width:280px; height:280px; background:var(--cyan-100); opacity:.30; }
.hero__inner { position:relative; display:grid; grid-template-columns:300px 1fr; gap:56px; align-items:center;
  padding-top:72px; padding-bottom:72px; }
.hero__portrait { position:relative; aspect-ratio:1; border-radius:var(--radius-2xl); overflow:hidden;
  border:1px solid var(--border); box-shadow:var(--shadow-md); background:var(--blue-100);
  display:flex; align-items:center; justify-content:center; }
.hero__portrait::before { content:''; position:absolute; inset:0; background:var(--blue-200);
  clip-path:polygon(0 60%,100% 35%,100% 100%,0 100%); opacity:.5; }
.hero__portrait span { position:relative; color:var(--brand); font-weight:600; font-size:64px; letter-spacing:-.02em; }
.hero__portrait img { position:relative; display:block; width:100%; height:100%; object-fit:cover; }
.hero h1 { margin-top:8px; font-size:var(--text-4xl); font-weight:600; letter-spacing:-.015em; line-height:1.18; }
.hero h1 .accent { color:var(--brand); }
.hero__lede { margin-top:18px; font-size:var(--text-md); color:var(--text-muted); line-height:1.6; max-width:640px; }
.hero__cta { display:flex; gap:14px; margin-top:30px; flex-wrap:wrap; }
.stats { display:flex; gap:40px; margin-top:40px; flex-wrap:wrap; }
.stats__value { font-size:var(--text-2xl); font-weight:700; letter-spacing:-.01em; color:var(--text-strong); line-height:1; }
.stats__label { font-size:var(--text-sm); color:var(--text-muted); margin-top:4px; font-weight:500; }

/* ---------- Featured (alternating rows) ----------------------------------- */
.feat-list { display:flex; flex-direction:column; gap:48px; margin-top:40px; }
.feat-row { display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; }
.feat-row__text { min-width:0; }
.feat-row:nth-child(even) .feat-row__media { order:2; }
.feat-row__head { display:flex; align-items:center; gap:10px; margin-bottom:12px; flex-wrap:wrap; }
.feat-row__role { font-size:var(--text-xs); font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--text-muted); }
.feat-row h3 { font-size:var(--text-xl); font-weight:800; letter-spacing:-.01em; line-height:1.2; }
.feat-row__blurb { margin-top:16px; font-size:var(--text-md); color:var(--text-body); line-height:1.7; }
.feat-row__play { display:inline-block; margin-top:12px; font-size:var(--text-sm); font-weight:600; color:var(--brand); }
.feat-row__play:hover { text-decoration:underline; }
.feat-row__tags { display:flex; flex-wrap:wrap; gap:8px; margin-top:20px; }
.feat-row .media-frame,.feat-row .poster { border-radius:var(--radius-xl); }
.feat-row .poster { aspect-ratio:16/10; }
.feat-portrait { max-width:300px; margin:0 auto; }
.feat-portrait.poster,.feat-portrait .media-frame { aspect-ratio:168/299; }

/* ---------- Systems metric cards ------------------------------------------ */
.metric-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:20px; }
.metric-card { display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); padding:24px; height:100%; }
.metric-card__bar { height:3px; width:32px; border-radius:2px; background:var(--blue-200); margin-bottom:16px; }
.metric-card__metric { font-size:var(--text-2xl); font-weight:700; letter-spacing:-.01em; color:var(--brand); line-height:1; }
.metric-card h3 { margin:14px 0 8px; font-size:var(--text-md); font-weight:600; line-height:1.3; }
.metric-card p { font-size:var(--text-sm); color:var(--text-body); line-height:1.6; flex:1; }
.metric-card__where { margin-top:16px; font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--text-muted); }

/* ---------- Professional (highlight + studios) ---------------------------- */
.highlight { display:grid; grid-template-columns:240px 1fr; gap:28px; margin-top:32px; padding:24px;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow-xs); align-items:center; }
.highlight .media-frame,.highlight .poster { border-radius:var(--radius-md); aspect-ratio:168/299; }
.highlight h3 { font-size:var(--text-xl); font-weight:800; letter-spacing:-.01em; line-height:1.2; }
.highlight__blurb { margin-top:12px; font-size:var(--text-md); color:var(--text-body); line-height:1.7; }
.highlight__tags { display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
.studios { margin-top:28px; display:flex; flex-direction:column; }
.studio { display:grid; grid-template-columns:200px 1fr; gap:28px; padding:24px 0; border-top:1px solid var(--border); }
.studio__company { font-size:var(--text-md); font-weight:600; color:var(--text-strong); }
.studio__role { font-size:var(--text-sm); color:var(--brand); font-weight:500; margin-top:2px; }
.studio__dates { font-size:var(--text-sm); color:var(--text-muted); margin-top:2px; }
.studio p { align-self:center; color:var(--text-body); line-height:1.7; }

/* ---------- Independent (jam stat strip) ---------------------------------- */
.jam-strip { display:flex; gap:14px; flex-wrap:wrap; margin-bottom:28px; }
.jam-stat { display:flex; align-items:baseline; gap:10px; padding:12px 18px; background:var(--brand-soft); border-radius:var(--radius-md); }
.jam-stat b { font-size:var(--text-lg); font-weight:700; color:var(--brand-press); letter-spacing:-.01em; }
.jam-stat span { font-size:var(--text-sm); font-weight:600; color:var(--text-body); }

/* ---------- Connect ------------------------------------------------------- */
.connect { max-width:1000px; }
.connect__head { max-width:640px; margin:0 auto; text-align:center; }
.connect__head h2 { font-size:var(--text-3xl); font-weight:800; letter-spacing:-.015em; line-height:1.2; }
.connect__head p { margin-top:10px; font-size:var(--text-md); color:var(--text-muted); line-height:1.6; }
.email-card { display:block; margin:40px auto 0; max-width:560px; text-align:center; padding:32px;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-xl); box-shadow:var(--shadow-sm);
  transition:box-shadow var(--dur) var(--ease-out),transform var(--dur) var(--ease-spring); }
.email-card:hover { box-shadow:var(--shadow-md); transform:translateY(-3px); }
.email-card__label { font-size:11px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--text-muted); }
.email-card__value { margin-top:8px; font-size:var(--text-xl); font-weight:600; color:var(--brand); letter-spacing:-.01em; word-break:break-word; }
.email-card__loc { margin-top:8px; font-size:var(--text-sm); color:var(--text-muted); }
.socials { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:16px; margin-top:20px; }
.social { display:flex; flex-direction:column; align-items:center; gap:10px; padding:26px 20px; background:var(--surface);
  border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow-xs); text-align:center;
  transition:box-shadow var(--dur) var(--ease-out),transform var(--dur) var(--ease-spring); }
.social:hover { box-shadow:var(--shadow-md); transform:translateY(-3px); }
.social__icon { width:48px; height:48px; display:inline-flex; align-items:center; justify-content:center;
  background:var(--brand-soft); border-radius:var(--radius-md); color:var(--brand); }
.social__name { font-size:var(--text-base); font-weight:600; color:var(--text-strong); }
.social__handle { font-size:var(--text-sm); color:var(--brand); word-break:break-word; }

/* ---------- Footer -------------------------------------------------------- */
.site-footer { border-top:1px solid var(--border); background:var(--surface); }
.site-footer__inner { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  padding-top:28px; padding-bottom:28px; font-size:var(--text-sm); color:var(--text-muted); }
.site-footer a { color:var(--text-muted); }
.site-footer a:hover { color:var(--brand); }

/* ---------- Scroll reveal (progressive enhancement) ----------------------- */
.js .reveal { opacity:0; transform:translateY(16px); transition:opacity .5s var(--ease-out),transform .5s var(--ease-out); }
.js .reveal.is-visible { opacity:1; transform:none; }

/* ---------- Responsive ---------------------------------------------------- */
@media (max-width:900px) {
  .hero__inner { grid-template-columns:1fr; gap:28px; }
  .hero__portrait { max-width:220px; }
  .feat-row { grid-template-columns:1fr; gap:20px; }
  .feat-row:nth-child(even) .feat-row__media { order:0; }
  .highlight { grid-template-columns:1fr; }
  .highlight .media-frame,.highlight .poster { max-width:240px; }
  .studio { grid-template-columns:1fr; gap:6px; }
  .studio p { margin-top:6px; }
}
@media (max-width:640px) {
  .container { padding-left:20px; padding-right:20px; }
  .site-header__inner { flex-wrap:wrap; gap:12px; }
  .nav { width:100%; overflow-x:auto; gap:2px; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
  .nav::-webkit-scrollbar { display:none; }
  .hero h1 { font-size:var(--text-3xl); }
  .section-head h2,.connect__head h2 { font-size:var(--text-2xl); }
  .stats { gap:24px; }
  .tab-panel { padding-top:40px; padding-bottom:56px; }
}

/* ---------- Reduced motion ------------------------------------------------ */
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation-duration:.001ms !important; transition-duration:.001ms !important; }
  .js .reveal { opacity:1; transform:none; }
}