/* Amber haze — Ashish Gupta portfolio (site-v2). */
/* Barlow Semi Condensed, self-hosted (SIL Open Font License, fonts/OFL.txt): the same type on every device. */
@font-face { font-family: 'Barlow Semi Condensed'; font-style: normal; font-weight: 200; font-display: swap; src: url('../fonts/barlow-semi-condensed-200.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: 'Barlow Semi Condensed'; font-style: normal; font-weight: 300; font-display: swap; src: url('../fonts/barlow-semi-condensed-300.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: 'Barlow Semi Condensed'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/barlow-semi-condensed-400.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; }
:root {
  --dark: #1a0d06; --dark-2: #241309; --accent: #ffb35c; --display: #ffe2bd; --body: #f3cfa3; --muted: #cfa77d; --line: #ffffff26;
  --bar: 8.5vh;
  --font-display: 'Barlow Semi Condensed', 'Bahnschrift Light SemiCondensed', 'Bahnschrift', 'Segoe UI', sans-serif;
  --font-body: 'Barlow Semi Condensed', 'Bahnschrift Light', 'Bahnschrift', 'Segoe UI', sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--bar); }
body { margin: 0; background: var(--dark); color: var(--body); font: 300 16px/1.75 var(--font-body); -webkit-font-smoothing: antialiased; }
a { color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.skip { position: fixed; z-index: 30; top: 10px; left: 12px; padding: 10px 14px; background: var(--dark); color: var(--display); transform: translateY(-200%); }
.skip:focus { transform: none; }

/* 3D canvas, letterbox, grain */
#scene { position: fixed; inset: 0; z-index: 0; }
#scene canvas { display: block; width: 100%; height: 100%; }
.bars::before, .bars::after { content: ''; position: fixed; left: 0; right: 0; height: var(--bar); background: #000; z-index: 4; pointer-events: none; }
.bars::before { top: 0; } .bars::after { bottom: 0; transition: transform .5s ease; }
.reading .bars::after { transform: translateY(100%); }
.reading .timeline { opacity: 0; }
.timeline { transition: opacity .4s ease; }
body::after { content: ''; position: fixed; inset: 0; z-index: 20; pointer-events: none; opacity: .12; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.notice { position: fixed; z-index: 6; left: 50%; top: calc(var(--bar) + 18px); transform: translateX(-50%); width: max-content; max-width: calc(100vw - 32px); margin: 0; padding: 10px 16px; border: 1px solid var(--accent); background: #1a0d06e6; color: var(--display); font-size: 14px; }

/* Header and progress line (inside the letterbox bars) */
.top { position: fixed; z-index: 5; top: 0; left: 0; right: 0; height: var(--bar); display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 0 48px; }
.mark { font: 300 17px/1 var(--font-display); letter-spacing: .06em; text-decoration: none; color: var(--display); white-space: nowrap; }
.top nav { display: flex; gap: 30px; }
.top nav a { font: 300 15px/1 var(--font-display); letter-spacing: .04em; text-decoration: none; color: var(--muted); padding: 10px 0; }
.top nav a:hover { color: var(--accent); }
.timeline { position: fixed; z-index: 5; left: 236px; right: 48px; bottom: calc(var(--bar) / 2); height: 1px; background: var(--line); }
.timeline i { position: absolute; left: 0; top: 0; height: 1px; width: 0; background: var(--accent); box-shadow: 0 0 8px var(--accent); }

/* Play / pause: runs the whole journey by itself; any scroll, swipe or key hands control back. */
.play { position: fixed; z-index: 6; left: 48px; bottom: calc(var(--bar) / 2); transform: translateY(50%); display: flex; align-items: center; gap: 12px; padding: 4px 6px 4px 0; border: 0; background: none;
  color: var(--display); font: 400 15px/1 var(--font-display); letter-spacing: .02em; cursor: pointer; transition: opacity .4s ease; }
.play-icon { display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid var(--accent); border-radius: 50%; box-shadow: 0 0 12px #ffb35c44; transition: background .2s ease; }
.play-icon::before { content: ''; margin-left: 3px; border-left: 10px solid var(--accent); border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
.play[aria-pressed="true"] .play-icon::before { width: 10px; height: 12px; margin: 0; border: 0; background: linear-gradient(90deg, var(--accent) 0 3px, transparent 3px 7px, var(--accent) 7px); }
.play:hover .play-icon { background: #ffb35c22; }
.reading .play { opacity: 0; pointer-events: none; }
.no3d .play { display: none; }

/* The scroll story: each stop is a title card set straight onto the film.
   No box: a feathered shadow sits behind the words, and a thin amber route line runs down their left edge. */
.story { position: relative; z-index: 2; }
.stage { min-height: 220vh; padding-top: calc(var(--bar) + 28px); }
.stage-hero { min-height: 160vh; }
.stage-final { min-height: 250vh; }
.panel { position: sticky; top: calc(var(--bar) + 5vh); max-width: 34rem; margin-left: 64px; padding: 4px 0 8px 30px; text-shadow: 0 1px 14px #000a;
  transition: opacity .6s ease, transform .6s ease; }
.panel::before { content: ''; position: absolute; z-index: -1; inset: -16% -38% -18% -40%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(20,9,4,.8), rgba(20,9,4,.62) 45%, rgba(20,9,4,.28) 75%, rgba(20,9,4,0)); }
.panel::after { content: ''; position: absolute; left: 0; top: 13px; bottom: 10px; width: 1px; background: linear-gradient(var(--accent), rgba(255,179,92,.12)); }
/* With the 3D running, the current stop's card holds still like a subtitle and the cards cross-fade between stops,
   so text never slides across the scene. (Without it, the cards stay in the page flow.) */
.js .stage .panel { position: fixed; top: calc(var(--bar) + 5vh); left: 0; opacity: 0; transform: translateY(14px); pointer-events: none; }
.js .stage.is-active .panel { opacity: 1; transform: none; pointer-events: auto; }
.reading .stage.is-active .panel { opacity: 0; pointer-events: none; }
.stop { position: relative; margin: 0 0 14px; font: 400 15px/1.3 var(--font-display); letter-spacing: .02em; color: var(--muted); }
.stop::before { content: ''; position: absolute; left: -34.5px; top: 4px; width: 7px; height: 7px; border: 1px solid var(--accent); border-radius: 50%; background: var(--dark); box-shadow: 0 0 10px var(--accent); }
.panel h1, .panel h2 { margin: 0 0 18px; font: 300 clamp(46px, 5.2vw, 82px)/.96 var(--font-display); letter-spacing: -.005em; color: var(--display); text-shadow: 0 0 46px #ff9a3c40, 0 2px 18px #000b; }
.panel h2 { font-size: clamp(42px, 4.4vw, 70px); }
.role { margin: 0; font: 400 21px/1.3 var(--font-display); letter-spacing: .01em; color: var(--accent); }
.when { margin: 4px 0 20px; font: 300 16px/1.4 var(--font-display); color: var(--muted); font-variant-numeric: tabular-nums; }
.lead { margin: 0 0 14px; font-size: 18px; line-height: 1.6; max-width: 30rem; }
.panel ul { margin: 0; padding: 0; list-style: none; max-width: 31rem; }
.panel li { position: relative; padding-left: 18px; margin: 0 0 9px; font-size: 16.5px; line-height: 1.6; }
.panel li::before { content: '–'; position: absolute; left: 0; color: var(--muted); }
.months { margin: 18px 0 0; font: 300 16px/1 var(--font-display); color: var(--muted); }
.months span { color: var(--display); font-variant-numeric: tabular-nums; }
.note { margin: 18px 0 0; max-width: 30rem; font-size: 15px; line-height: 1.6; color: var(--muted); }
.closing { position: relative; margin: 34px 0 0; padding-top: 22px; font: 300 clamp(28px, 2.7vw, 40px)/1.15 var(--font-display); color: var(--display); }
.closing::before { content: ''; position: absolute; left: 0; top: 0; width: 56px; height: 1px; background: var(--accent); box-shadow: 0 0 10px var(--accent); }
.cue { display: inline-block; margin-top: 6px; font: 400 15px/1 var(--font-display); letter-spacing: .02em; text-decoration: none; color: var(--display); border-bottom: 1px solid var(--accent); padding-bottom: 7px; }

/* No 3D (no WebGL, or it stopped): the story is plain reading, without the long scroll it needed to play out. */
.no3d .stage, .no3d .stage-hero, .no3d .stage-final { min-height: 0; padding-bottom: 7vh; }
.no3d .panel { position: static; }

/* After the journey */
.page { position: relative; z-index: 3; background: linear-gradient(180deg, rgba(26,13,6,0), var(--dark) 160px); }
.block { max-width: 1240px; margin: 0 auto; padding: 120px 48px 40px; }
.block-head { max-width: 680px; margin-bottom: 44px; }
/* Same type language as the story cards: light mixed-case headings, amber labels, no tracked capitals. */
.block .kicker { margin: 0 0 14px; font: 400 16px/1.3 var(--font-display); letter-spacing: .02em; color: var(--accent); }
.block h2 { margin: 0 0 18px; font: 300 clamp(40px, 4.6vw, 66px)/1.02 var(--font-display); letter-spacing: -.005em; color: var(--display); }
.block h3 { margin: 0 0 8px; font: 400 24px/1.25 var(--font-display); letter-spacing: .005em; color: var(--display); }
.block ul { margin: 0; padding: 0; list-style: none; }
.block li { position: relative; padding-left: 18px; margin-bottom: 8px; }
.block li::before { content: ''; position: absolute; left: 0; top: .85em; width: 8px; height: 1px; background: var(--accent); }
.roles { display: grid; gap: 0; }
.role-card { padding: 28px 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: 240px 1fr; gap: 6px 40px; }
.role-card .when { grid-row: span 3; margin: 0; font: 400 16px/1.5 var(--font-display); letter-spacing: .01em; color: var(--accent); font-variant-numeric: tabular-nums; }
.role-card .org { margin: 0 0 10px; font-size: 16px; color: var(--muted); }
.fine { margin: 18px 0 0; font-size: 13px; color: var(--muted); }
.cases { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.case, .card { padding: 28px 26px; border: 1px solid #ffb35c33; background: linear-gradient(180deg, #2a160b, #1d0f07); }
.case dl { margin: 18px 0 0; display: grid; gap: 14px; }
.case dt { font: 400 15px/1.4 var(--font-display); letter-spacing: .01em; color: var(--accent); margin-bottom: 4px; }
.case dd { margin: 0; font-size: 15px; line-height: 1.7; }
.cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.card .stack { font: 300 15px/1.6 var(--font-display); color: var(--muted); }
.card-soon { border-style: dashed; background: transparent; }
.link { display: inline-block; margin-right: 26px; padding: 8px 0; font: 400 16px/1 var(--font-display); letter-spacing: .02em; text-decoration: none; color: var(--display); border-bottom: 1px solid var(--accent); }
.link:hover { color: var(--accent); }
.skills { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px 40px; }
.skills h3 { font-size: 19px; padding-bottom: 10px; border-bottom: 1px solid var(--line); margin-bottom: 14px; }
.skills li { font-size: 15px; }
.tags { display: flex; flex-wrap: wrap; gap: 8px; }
.tags li { padding: 4px 10px 4px 10px; border: 1px solid #ffb35c44; font-size: 13px; letter-spacing: .06em; }
.tags li::before { display: none; }
.block-contact { padding-bottom: 140px; }
.email { display: inline-block; max-width: 100%; overflow-wrap: anywhere; margin: 8px 0 22px; font: 300 clamp(19px, 5.4vw, 42px)/1.2 var(--font-display); letter-spacing: .01em; color: var(--display); text-decoration: none; border-bottom: 1px solid var(--accent); }
.foot { position: relative; z-index: 3; background: var(--dark); display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap; padding: 26px 48px calc(var(--bar) + 26px); border-top: 1px solid var(--line); font: 300 15px/1.6 var(--font-display); letter-spacing: .01em; color: var(--muted); }

/* Phones and small tablets */
@media (max-width: 900px) {
  .cases, .skills { grid-template-columns: 1fr 1fr; }
  .role-card { grid-template-columns: 1fr; }
  .role-card .when { grid-row: auto; }
}
@media (max-width: 700px) {
  :root { --bar: 7vh; }
  .top { padding: 0 18px; }
  .mark { font-size: 15px; letter-spacing: .04em; }
  .top nav { gap: 18px; }
  .top nav a { font-size: 14px; letter-spacing: .02em; }
  .top nav a:nth-child(2) { display: none; }
  .timeline { left: 176px; right: 18px; }
  .play { left: 18px; font-size: 14px; gap: 10px; }
  /* Phones: the card is a full-height sticky column with its words pinned to the bottom, so it can never
     run under the bottom bar whatever the browser's toolbars do; the scene fades to dark behind them. */
  .stage { padding-top: 0; }
  .panel { top: 0; height: 100svh; margin: 0; max-width: none; padding: 0 20px calc(var(--bar) + 26px) 40px; display: flex; flex-direction: column; justify-content: flex-end; }
  .js .stage .panel { top: 0; right: 0; }
  .panel::before { inset: auto 0 0 0; height: 72%; background: linear-gradient(180deg, rgba(20,9,4,0), rgba(20,9,4,.74) 34%, rgba(20,9,4,.92)); }
  .panel::after { display: none; }
  .stop { margin-bottom: 8px; font-size: 14px; }
  .panel h1 { font-size: clamp(36px, 10.5vw, 46px); margin-bottom: 12px; }
  .panel h2 { font-size: clamp(34px, 9.5vw, 42px); margin-bottom: 10px; }
  .role { font-size: 18px; }
  .when { margin-bottom: 12px; font-size: 14.5px; }
  .lead { font-size: 15.5px; }
  .panel li { font-size: 14.5px; line-height: 1.5; margin-bottom: 5px; }
  .note { font-size: 14px; margin-top: 10px; }
  .closing { margin-top: 18px; padding-top: 14px; font-size: 25px; }
  .no3d .panel { height: auto; padding-bottom: 0; }
  .block { padding: 80px 18px 24px; }
  .cases, .cards, .skills { grid-template-columns: 1fr; }
  .foot { padding: 22px 18px calc(var(--bar) + 22px); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .panel { transition: none; }
}