/* ==========================================================================
   Yugmil Patel — portfolio
   1 Tokens · 2 Base · 3 Type · 4 Nav · 5 Hero · 6 Layout · 7 Media slots
   8 Stats · 9 Sections · 10 Projects, About, Contact, Footer · 11 /mecka
   12 Motion
   ========================================================================== */

/* 1 Tokens ------------------------------------------------------------- */
:root {
  --bg: #0A0B0C;
  --fg: #F2F0EA;
  --muted: #8E969A;
  --accent: #F0661F;         /* orange: eyebrow slash, numbers, active nav, primary button */
  --accent-2: #FFA061;       /* light orange: tags, years, small marks */
  --accent-soft: rgba(240, 102, 31, .16);
  --halo: rgba(240, 102, 31, .13);
  --rule: #23272A;
  --slot: #15181A;           /* empty media slot */
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --mono: "JetBrains Mono", "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --pad: 20px;               /* page gutter */
  --wrap: 1280px;            /* content max width */
  --nav-h: 72px;
  --gap: clamp(40px, 5vw, 72px);     /* rhythm inside a section */
  --sect: clamp(72px, 9vw, 128px);   /* section padding */
}
@media (min-width: 768px)  { :root { --pad: 40px; } }
@media (min-width: 1200px) { :root { --pad: 64px; } }

/* 2 Base --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--nav-h); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 400 18px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, video, iframe { display: block; max-width: 100%; }
figure, p, dl, dd { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 1px solid var(--fg); outline-offset: 4px; }

/* 3 Type --------------------------------------------------------------- */
h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -0.03em; line-height: 1.02; text-wrap: pretty; }
h1 { font-size: clamp(40px, 6.2vw, 88px); }
@media (max-width: 767px) { h1 { font-size: max(34px, 9.4vw); } }   /* ~37px at 390 */
h2 { font-size: clamp(36px, 4.5vw, 64px); max-width: 20ch; }
h3 { font-size: 24px; line-height: 1.2; letter-spacing: -0.02em; }
@media (min-width: 1000px) { .hero h1 span { display: block; } }   /* one sentence per line */
.body, .lead { max-width: 640px; }
.bio { max-width: 640px; font-size: clamp(22px, 2vw, 28px); line-height: 1.4; letter-spacing: -0.01em; }

/* Monospace labels: eyebrows, numbers, tags, buttons */
.label, .eyebrow, .tag, .brand, .btn, .play, .skills dt, .footer {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.eyebrow { margin-bottom: 24px; color: var(--accent); }
.eyebrow::before { content: "/ "; color: var(--accent-2); }

/* Text links: underline in grey, teal on hover */
.body a, figcaption a, .footer a, .single-footer a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  text-decoration-color: var(--muted);
  transition: text-decoration-color .2s;
}
.body a:hover, figcaption a:hover, .footer a:hover, .single-footer a:hover { text-decoration-color: var(--accent); }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 44px; padding: 0 22px;
  border: 1px solid var(--fg); color: var(--fg);
  transition: background .2s, color .2s;
}
.btn:hover { background: var(--fg); color: var(--bg); }
.btn.ghost { border-color: var(--muted); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #120803; }
.btn.primary:hover { background: var(--accent-2); border-color: var(--accent-2); color: #120803; }

/* 4 Nav ---------------------------------------------------------------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  height: var(--nav-h); padding: 0 var(--pad);
  border-bottom: 1px solid transparent;
  transition: background .4s, border-color .4s;
}
.nav.is-scrolled {
  background: rgba(10, 11, 12, .82);
  border-color: var(--rule);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.nav .btn { height: 36px; padding: 0 16px; }
.nav ul { display: flex; align-items: center; gap: 32px; }
.nav li a:not(.btn) { display: block; padding: 8px 0; font-size: 15px; color: var(--muted); transition: color .2s; }
.nav li a:not(.btn):hover { color: var(--fg); }
.nav li a.is-active { color: var(--accent); }

.nav-toggle { display: none; position: relative; width: 44px; height: 44px; margin-right: -10px; }
.nav-toggle span { position: absolute; left: 11px; right: 11px; height: 1px; background: var(--fg); transition: transform .3s ease-out; }
.nav-toggle span:first-child { top: 18px; }
.nav-toggle span:last-child { top: 25px; }
.is-open .nav-toggle span:first-child { transform: translateY(3.5px) rotate(45deg); }
.is-open .nav-toggle span:last-child { transform: translateY(-3.5px) rotate(-45deg); }

@media (max-width: 767px) {
  .nav-toggle { display: block; }
  .nav.is-open { background: var(--bg); border-color: var(--rule); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .nav ul {
    position: fixed; inset: var(--nav-h) 0 0 0;
    flex-direction: column; align-items: flex-start; justify-content: center; gap: 4px;
    padding: 0 var(--pad) 12vh;
    background: var(--bg);
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity .3s ease-out, transform .3s ease-out, visibility .3s;
  }
  .nav.is-open ul { opacity: 1; visibility: visible; transform: none; }
  .nav li a:not(.btn) { font-size: 40px; font-weight: 600; line-height: 1.1; letter-spacing: -0.03em; color: var(--fg); }
  .nav li:last-child { margin-top: 32px; }
}

/* 5 Hero --------------------------------------------------------------- */
.hero {
  position: relative; isolation: isolate;
  min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: calc(var(--nav-h) + 48px) var(--pad) 48px;
}
.hero .frame { position: absolute; inset: 0; z-index: -1; aspect-ratio: auto; }
.hero .frame::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 11, 12, .35) 0%, rgba(10, 11, 12, .55) 55%, rgba(10, 11, 12, .9) 100%); }
.hero-text { width: 100%; max-width: var(--wrap); margin: 0 auto; }
.hero .lead { margin: 32px 0 40px; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; }

.scroll-cue {
  position: relative; display: inline-block;
  margin-top: 56px; padding-left: 24px;
  font: 500 11px/40px var(--mono); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted);
}
.scroll-cue::before, .scroll-cue::after { content: ""; position: absolute; left: 0; top: 0; width: 1px; height: 40px; background: var(--rule); }
.scroll-cue::after { height: 12px; background: var(--accent-2); animation: cue 2s ease-in-out infinite; }
@keyframes cue {
  0%   { transform: translateY(0); opacity: 0; }
  20%  { opacity: 1; }
  100% { transform: translateY(28px); opacity: 0; }
}

/* 6 Layout ------------------------------------------------------------- */
.wrap { width: min(100% - 2 * var(--pad), var(--wrap)); margin-inline: auto; }
.flow > * + * { margin-top: var(--gap); }
.section { position: relative; padding: var(--sect) 0; border-top: 1px solid var(--rule); }
.section::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  top: -220px; left: -10vw; width: 60vw; height: 440px; max-width: 900px;
  background: radial-gradient(closest-side, var(--halo), transparent);
  filter: blur(24px);
}
.section:nth-of-type(even)::after { left: auto; right: -10vw; }
main { position: relative; isolation: isolate; overflow-x: clip; }
html { overflow-x: clip; }
.section::before { content: ""; position: absolute; left: var(--pad); top: -1px; width: 96px; height: 2px; background: linear-gradient(90deg, var(--accent), transparent); }

.grid { display: grid; gap: 24px; }
.cols-3 { grid-template-columns: repeat(3, 1fr); }
.portraits { max-width: 960px; }                   /* three 9:16 loops: keep them shoulder-high */
.cols-4 { grid-template-columns: repeat(4, 1fr); }
.cols-2.text { grid-template-columns: 1fr 1fr; gap: 48px; max-width: 1100px; }
.cols-2-1 { grid-template-columns: 2fr 1fr; }
.cols-8-3 { grid-template-columns: 8fr 3fr; }      /* 16:9 beside 2:3 at equal height */
.cols-1-2 { grid-template-columns: 1fr 2fr; align-items: center; }
.stack { display: grid; gap: 24px; align-content: start; }
.split { display: grid; gap: 48px; grid-template-columns: minmax(0, 640px) minmax(280px, 1fr); align-items: start; }
.about { display: grid; gap: 48px; grid-template-columns: minmax(0, 2fr) 3fr; align-items: start; }

@media (max-width: 767px) {
  .cols-3:not(.portraits), .cols-2-1, .cols-8-3, .cols-1-2, .cols-2.text, .split, .about { grid-template-columns: 1fr; }
  .cols-4 { grid-template-columns: 1fr 1fr; gap: 16px; }
  .cols-3.portraits { gap: 12px; }
}

/* 7 Media slots ---------------------------------------------------------
   .frame is a slot: a dark box printing its data-slot name until the
   media inside it has loaded. Loops are <video>, players are a poster
   plus a play button, images are <img>. */
.frame { position: relative; overflow: hidden; background: var(--slot); aspect-ratio: 16 / 9; }
.frame::before {
  content: attr(data-slot);
  position: absolute; inset: 0;
  display: grid; place-items: center;
  padding: 12px; text-align: center; overflow-wrap: anywhere;
  font: 500 12px/1.4 var(--mono); letter-spacing: 0.12em; color: var(--muted);
}
.player .frame::before { place-items: end start; }    /* keep clear of the play button */
.frame > img, .frame > video, .frame > iframe { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; }
.frame > img, .frame > video { opacity: 0; transition: opacity .6s ease-out; }
.frame > .is-loaded, .frame > iframe { opacity: 1; }

.r2x3  { aspect-ratio: 2 / 3; }
.r3x2  { aspect-ratio: 3 / 2; }
.r4x3  { aspect-ratio: 4 / 3; }
.r2x3  { aspect-ratio: 2 / 3; }
.r3x4  { aspect-ratio: 3 / 4; }
.r9x16 { aspect-ratio: 9 / 16; }
.wide  { width: 100%; max-height: 72vh; }     /* tall ratios used full-width: crop rather than tower */

figcaption { margin-top: 12px; max-width: 640px; font-size: 14px; line-height: 1.5; color: var(--muted); }
.bleed > figcaption { padding: 0 var(--pad); }

.play {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%;
  display: grid; place-items: center;
  width: 80px; height: 80px;
  border: 1px solid var(--fg); border-radius: 50%;
  transition: background .2s, color .2s;
}
.play:hover { background: var(--accent); border-color: var(--accent); color: #120803; }

/* 8 Stats -------------------------------------------------------------- */
.band { border-top: 1px solid var(--rule); background-image: radial-gradient(rgba(242, 240, 234, .06) 1px, transparent 1px); background-size: 24px 24px; }

.users-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.users-grid .frame { border-radius: 4px; }
@media (max-width: 767px) { .users-grid { grid-template-columns: repeat(3, 1fr); gap: 6px; } }

/* The stack diagram */
.stackband { padding: 56px 0 64px; border-top: 1px solid var(--rule); }
.stack { display: block; width: 100%; height: auto; margin-top: 8px; overflow: visible; }
.stack circle { fill: var(--bg); stroke: var(--accent); stroke-width: 1.5; }
.stack g g:nth-child(4) circle { stroke: var(--accent-2); }
.stack g g:last-child circle { fill: var(--accent-2); stroke: var(--accent-2); }
.stack text { fill: var(--muted); }
.stack text:not(.sub) { fill: var(--fg); font-weight: 500; }
.stack .sub { font-size: 11px; letter-spacing: .4px; }
.js .stack-line { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.6s ease-out .2s; }
.js .is-in .stack-line, .js .stack.is-in .stack-line { stroke-dashoffset: 0; }
.stack-note { margin-top: 24px; max-width: 640px; font-size: 14px; color: var(--muted); }
.stack-v { display: none; max-width: 360px; }
.stack-v circle { stroke: var(--accent); }
.stack-v g g:nth-child(4) circle { stroke: var(--accent-2); }
@media (max-width: 767px) { .stack-h { display: none; } .stack-v { display: block; } }
.stats { display: grid; grid-template-columns: 1fr 1fr; }
.stats li { padding: 24px 16px 24px 0; }
.stats li:nth-child(even) { padding: 24px 0 24px 16px; border-left: 1px solid var(--rule); }
.stats li:nth-child(n+3) { border-top: 1px solid var(--rule); }
.stats strong { display: block; margin-bottom: 10px; font: 500 clamp(24px, 3vw, 44px)/1.1 var(--mono); letter-spacing: -0.02em; white-space: nowrap; color: var(--accent); }
.stats span { display: block; max-width: 28ch; font-size: 14px; line-height: 1.5; color: var(--muted); }
@media (min-width: 900px) {
  .stats { grid-template-columns: repeat(4, 1fr); }
  .stats li, .stats li:nth-child(even) { padding: 40px 24px; border-top: 0; }
  .stats li:first-child { padding-left: 0; }
  .stats li + li { border-left: 1px solid var(--rule); }
}

/* 9 Sections ----------------------------------------------------------- */
.robot + .robot { margin-top: var(--sect); padding-top: var(--sect); border-top: 1px solid var(--rule); }

/* 10 Projects, About, Contact, Footer ---------------------------------- */
.projects { display: grid; border-top: 1px solid var(--rule); }
.projects article { padding: 32px 0; border-bottom: 1px solid var(--rule); }
.projects .label { display: block; margin-bottom: 16px; color: var(--accent-2); }
.projects article { position: relative; }
.projects article::before { content: ""; position: absolute; left: 0; top: 32px; bottom: 32px; width: 2px; background: var(--accent); opacity: 0; transition: opacity .25s; }
.projects article:hover::before { opacity: 1; }
.projects h3 { margin-bottom: 12px; max-width: 30ch; }
.projects p { max-width: 44ch; font-size: 16px; color: var(--muted); }
@media (min-width: 768px) {
  .projects { grid-template-columns: 1fr 1fr; }
  .projects article { padding: 40px 40px 40px 0; }
  .projects article:nth-child(even) { padding-left: 40px; border-left: 1px solid var(--rule); }
}

.skills { margin-top: 40px; border-top: 1px solid var(--rule); }
.skills div { display: grid; grid-template-columns: 1fr; gap: 4px 32px; padding: 14px 0; border-bottom: 1px solid var(--rule); }
.skills dt { color: var(--accent); }
.skills dd { font-size: 16px; }
@media (min-width: 600px) { .skills div { grid-template-columns: 240px 1fr; align-items: baseline; } }

.contact { background: radial-gradient(60% 80% at 20% 50%, var(--accent-soft), transparent 70%); }
.contact::after { display: none; }
.contact h2 { font-size: clamp(48px, 8vw, 112px); }
.contact .body { margin-top: 32px; }

.footer {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 16px 32px; padding: 28px var(--pad);
  border-top: 1px solid var(--rule);
  color: var(--muted);
}
.footer ul { display: flex; gap: 24px; }

/* 11 /mecka ------------------------------------------------------------ */
.single { width: min(100% - 2 * var(--pad), 960px); margin-inline: auto; padding: calc(var(--nav-h) + 64px) 0 96px; }
.intro { padding-bottom: 64px; }
.intro .lead { margin-top: 24px; color: var(--muted); }
.clip { padding: 48px 0; border-top: 1px solid var(--rule); }
.tag { display: block; margin-bottom: 20px; color: var(--accent-2); text-transform: none; letter-spacing: 0; }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.pair.portraits { max-width: 560px; }
.single-footer { display: flex; flex-wrap: wrap; align-items: center; gap: 24px 32px; padding-top: 48px; border-top: 1px solid var(--rule); }
.single-footer p { color: var(--muted); }

/* 12 Motion -------------------------------------------------------------
   Applied only once main.js has added .js to <html>, so the page is
   fully visible without scripting. */
.js .rise  { opacity: 0; transform: translateY(16px); transition: opacity .6s ease-out, transform .6s ease-out; }
.js .frame { opacity: 0; transform: scale(.98);      transition: opacity .6s ease-out, transform .6s ease-out; }
.js .is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .rise, .js .frame { opacity: 1; transform: none; transition: none; }
  .frame > img, .frame > video, .nav, .nav ul, .nav-toggle span, .btn, .play { transition: none; }
  .scroll-cue::after { animation: none; }
  .js .stack-line { stroke-dashoffset: 0; transition: none; }
}