/* ============================================================
   Pratik Verma — portfolio
   Direction: instrument datasheet. Cool paper, hairline rules,
   machine-precise headings against a serif human voice.
   ============================================================ */

:root{
  --paper:   #EBEDEB;
  --paper-2: #E2E5E2;   /* recessed band */
  --paper-3: #F5F6F4;   /* raised card   */
  --ink:     #12181A;
  --ink-2:   #3B4547;
  --ink-3:   #6E7A78;
  --rule:    #C7CCC7;
  --rule-2:  #D8DCD8;
  --signal:  #C4271A;   /* live / active only  */
  --trace:   #14524E;   /* data marks, waveform */

  --display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --serif:   "Newsreader", Georgia, "Times New Roman", serif;
  --mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --gut: clamp(20px, 4vw, 64px);
  --rail-h: 52px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--serif);
  font-size:17px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{ max-width:100%; }
a{ color:inherit; }
h1,h2,h3{ margin:0; font-family:var(--display); font-weight:700; letter-spacing:-.02em; line-height:1.05; }
p{ margin:0; }
ul,ol,dl{ margin:0; padding:0; list-style:none; }

::selection{ background:var(--trace); color:var(--paper); }

.wrap{ width:100%; max-width:1280px; margin-inline:auto; padding-inline:var(--gut); }

.ic{ width:1em; height:1em; flex:none; stroke-width:1.6; }

.skip{
  position:fixed; left:-999px; top:0; z-index:100;
  background:var(--ink); color:var(--paper); padding:10px 16px;
  font-family:var(--mono); font-size:12px;
}
.skip:focus{ left:0; }

:focus-visible{ outline:2px solid var(--signal); outline-offset:3px; }

/* ─────────────────────────── FIXED RAIL ─────────────────────────── */

.rail{
  position:fixed; inset:0 0 auto 0; z-index:50;
  height:var(--rail-h);
  background:color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--rule);
}
.rail__in{
  height:calc(var(--rail-h) - 1px);
  max-width:1280px; margin-inline:auto; padding-inline:var(--gut);
  display:flex; align-items:center; gap:24px;
  font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
}
.rail__id{ display:flex; align-items:center; gap:9px; text-decoration:none; white-space:nowrap; }
.rail__id b{ font-weight:600; letter-spacing:.12em; }
.rail__dot{ width:6px; height:6px; border-radius:50%; background:var(--signal); }
.rail__sep,.rail__role{ color:var(--ink-3); }
@media (max-width:900px){ .rail__role,.rail__sep{ display:none; } }

.rail__nav{ display:flex; gap:22px; margin-left:auto; }
.rail__nav a{ text-decoration:none; color:var(--ink-3); display:flex; gap:6px; transition:color .2s; }
.rail__nav a i{ font-style:normal; color:var(--rule); }
.rail__nav a:hover,.rail__nav a.is-on{ color:var(--ink); }
.rail__nav a.is-on i{ color:var(--signal); }
@media (max-width:820px){ .rail__nav{ display:none; } }

.rail__clock{ margin-left:auto; color:var(--trace); font-variant-numeric:tabular-nums; }
@media (max-width:820px){ .rail__clock{ margin-left:auto; } }
@media (max-width:520px){ .rail__clock{ display:none; } }

.rail__progress{ height:1px; background:var(--rule); }
.rail__progress span{
  display:block; height:100%; width:100%; background:var(--signal);
  transform:scaleX(0); transform-origin:0 50%;
}

/* ─────────────────────────── HERO ─────────────────────────── */

.hero{ padding-top:calc(var(--rail-h) + clamp(48px, 9vw, 120px)); }

.hero__grid{
  display:grid; grid-template-columns:minmax(0,1.55fr) minmax(300px,.95fr);
  gap:clamp(32px, 5vw, 76px); align-items:start;
}
@media (max-width:940px){ .hero__grid{ grid-template-columns:1fr; } }

.eyebrow{
  display:flex; align-items:center; gap:9px;
  font-family:var(--mono); font-size:11.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--trace);
  padding-bottom:16px; margin-bottom:26px;
  border-bottom:1px solid var(--rule);
}
.eyebrow .ic{ width:14px; height:14px; }

.hero__name{
  font-size:clamp(56px, 11.5vw, 158px);
  font-weight:800;
  font-stretch:118%;
  letter-spacing:-.045em;
  line-height:.86;
  text-transform:uppercase;
}
.hero__name-l{ display:block; overflow:hidden; }
.hero__name-l:nth-child(2){ color:var(--ink-2); }

.hero__thesis{
  font-family:var(--serif);
  font-size:clamp(24px, 3.1vw, 40px);
  line-height:1.2; font-weight:400; letter-spacing:-.015em;
  margin-top:clamp(28px, 4vw, 46px);
  max-width:19ch;
  text-wrap:pretty;
}
.hero__lede{
  margin-top:24px; max-width:60ch;
  color:var(--ink-2); font-size:17.5px; line-height:1.68;
}
.hero__cta{ display:flex; flex-wrap:wrap; gap:12px; margin-top:34px; }

/* buttons */
.btn{
  display:inline-flex; align-items:center; gap:9px;
  padding:12px 20px;
  border:1px solid var(--ink);
  font-family:var(--mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase;
  text-decoration:none; background:transparent; color:var(--ink);
  transition:background .22s ease, color .22s ease, transform .22s ease;
}
.btn .ic{ width:15px; height:15px; }
.btn:hover{ background:var(--ink); color:var(--paper); }
.btn--solid{ background:var(--ink); color:var(--paper); }
.btn--solid:hover{ background:var(--signal); border-color:var(--signal); color:#fff; }
.btn--lg{ padding:16px 26px; font-size:13px; }

/* spec plate */
.plate{ border:1px solid var(--ink); background:var(--paper-3); }
.plate__hd{
  display:flex; justify-content:space-between; gap:12px;
  padding:10px 14px; background:var(--ink); color:var(--paper);
  font-family:var(--mono); font-size:10.5px; letter-spacing:.16em;
}
.plate__rev{ color:#9AA6A4; }
.plate__body{ padding:4px 14px; }
.plate__row{
  display:grid; grid-template-columns:88px 1fr; gap:14px;
  padding:11px 0; border-bottom:1px solid var(--rule-2);
  font-family:var(--mono); font-size:12px; line-height:1.5;
}
.plate__row dt{ color:var(--ink-3); letter-spacing:.06em; text-transform:uppercase; font-size:10.5px; padding-top:2px; }
.plate__row dd{ margin:0; }
.plate__row--live{ border-bottom:0; }
.live{ display:inline-flex; align-items:center; gap:8px; color:var(--signal); }
.live i{
  width:7px; height:7px; border-radius:50%; background:var(--signal);
  box-shadow:0 0 0 0 color-mix(in srgb, var(--signal) 55%, transparent);
  animation:pulse 2.4s ease-out infinite;
}
@keyframes pulse{
  0%{ box-shadow:0 0 0 0 color-mix(in srgb, var(--signal) 50%, transparent); }
  70%{ box-shadow:0 0 0 9px transparent; }
  100%{ box-shadow:0 0 0 0 transparent; }
}
.plate__links{
  display:flex; border-top:1px solid var(--ink);
}
.plate__links a{
  flex:1; display:grid; place-items:center; padding:13px 0;
  border-right:1px solid var(--rule-2); color:var(--ink-3);
  transition:background .2s, color .2s;
}
.plate__links a:last-child{ border-right:0; }
.plate__links a:hover{ background:var(--ink); color:var(--paper); }
.plate__links .ic{ width:17px; height:17px; }

/* ── SIGNATURE: session recording ── */
.wave{ margin:clamp(56px, 8vw, 104px) 0 0; }
.wave__meta{
  max-width:1280px; margin-inline:auto; padding-inline:var(--gut);
  display:flex; justify-content:space-between; gap:16px; align-items:center;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-3); padding-bottom:10px;
}
.wave__meta span:first-child{ display:flex; align-items:center; gap:8px; color:var(--trace); }
.wave__meta .ic{ width:13px; height:13px; }
@media (max-width:640px){ .wave__mid{ display:none; } }

.wave__stage{
  position:relative;
  border-block:1px solid var(--rule);
  background:var(--paper-2);
}
.wave__svg{ display:block; width:100%; height:clamp(90px, 13vw, 148px); }
.wave__g rect{ transform-box:fill-box; transform-origin:center; }
.wave__g rect{ fill:var(--rule); }
.wave__g--lit rect{ fill:var(--trace); }
/* full-width so translateX(%) maps to the stage, not to a 1px line */
.wave__head{
  position:absolute; inset:0; width:100%; pointer-events:none;
  transform:translateX(0); will-change:transform;
}
.wave__head::before{
  content:""; position:absolute; top:0; bottom:0; left:0; width:1px; background:var(--signal);
}
.wave__head::after{
  content:""; position:absolute; top:-3px; left:-3px;
  width:7px; height:7px; background:var(--signal); border-radius:50%;
}

/* ─────────────────────────── SECTIONS ─────────────────────────── */

.sec{ padding-block:clamp(72px, 10vw, 140px); }
.sec--alt{ background:var(--paper-2); border-block:1px solid var(--rule); }
.sec--end{ padding-bottom:clamp(56px, 7vw, 96px); }

.sec__hd{
  display:grid; grid-template-columns:76px minmax(0,1fr);
  gap:clamp(16px, 3vw, 40px);
  padding-bottom:clamp(34px, 5vw, 56px);
  margin-bottom:clamp(34px, 5vw, 56px);
  border-bottom:1px solid var(--rule);
}
@media (max-width:640px){ .sec__hd{ grid-template-columns:44px 1fr; gap:14px; } }

.sec__no{
  font-family:var(--mono); font-size:12px; letter-spacing:.12em;
  color:var(--signal); padding-top:.55em;
}
.sec__no::before{ content:"§"; color:var(--ink-3); margin-right:4px; }

.sec__title{
  font-size:clamp(30px, 4.4vw, 58px);
  font-stretch:108%; letter-spacing:-.032em; line-height:1.03;
  max-width:20ch;
}
.sec__sub{
  margin-top:20px; max-width:64ch; color:var(--ink-2);
  font-size:17px; line-height:1.66;
}

/* ── 01 stats ── */
.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--rule); border:1px solid var(--rule); }
@media (max-width:1000px){ .stats{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .stats{ grid-template-columns:1fr; } }

.stat{ background:var(--paper); padding:clamp(24px,2.6vw,34px); position:relative; transition:background .28s; }
.stat:hover{ background:var(--paper-3); }
.stat__ic{ width:19px; height:19px; color:var(--trace); }
.stat__n{
  font-family:var(--display); font-weight:700; font-stretch:100%;
  font-size:clamp(46px, 5.4vw, 76px); line-height:1; letter-spacing:-.05em;
  margin-top:22px; font-variant-numeric:tabular-nums;
}
.stat__n em{ font-style:normal; color:var(--signal); font-size:.5em; vertical-align:.55em; margin-left:2px; }
.stat__k{
  font-family:var(--mono); font-size:11.5px; font-weight:500;
  letter-spacing:.11em; text-transform:uppercase; color:var(--ink);
  margin-top:16px; padding-top:14px; border-top:1px solid var(--rule-2);
  line-height:1.5;
}
.stat__d{ margin-top:12px; font-size:15.5px; line-height:1.6; color:var(--ink-2); }

/* ── 02 case ── */
.case{ border:1px solid var(--ink); background:var(--paper); }
.case__hd{
  display:flex; flex-wrap:wrap; gap:20px; justify-content:space-between; align-items:flex-end;
  padding:clamp(24px,3vw,38px); border-bottom:1px solid var(--rule);
}
.case__tag{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--trace); margin-bottom:14px;
}
.case__title{ font-size:clamp(24px, 3vw, 40px); letter-spacing:-.03em; max-width:22ch; }
.case__role{
  font-family:var(--mono); font-size:12px; line-height:1.6; text-align:right; max-width:32ch;
}
.case__role span{ display:block; font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); margin-bottom:5px; }
@media (max-width:700px){ .case__role{ text-align:left; } }

.case__body{
  display:grid; grid-template-columns:minmax(0,1.7fr) minmax(200px,.8fr);
  gap:clamp(24px,4vw,56px);
  padding:clamp(24px,3vw,38px);
}
@media (max-width:840px){ .case__body{ grid-template-columns:1fr; } }
.case__prose p{ margin-bottom:18px; color:var(--ink-2); max-width:62ch; }
.case__prose p:first-child{ color:var(--ink); font-size:18.5px; }
.case__prose p:last-child{ margin-bottom:0; }

.case__facts li{
  display:flex; justify-content:space-between; align-items:baseline; gap:14px;
  padding:12px 0; border-bottom:1px solid var(--rule-2);
  font-family:var(--mono); font-size:12px;
}
.case__facts li:first-child{ border-top:1px solid var(--rule-2); }
.case__facts span{ color:var(--ink-3); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; }
.case__facts b{ font-weight:600; color:var(--trace); white-space:nowrap; }

/* flow diagram */
.flow{ padding:clamp(22px,3vw,34px); border-top:1px solid var(--rule); background:var(--paper-3); overflow-x:auto; }
.flow__track{
  position:relative; display:grid; grid-template-columns:repeat(6,minmax(132px,1fr));
  gap:clamp(10px,1.4vw,18px); min-width:760px;
}
.flow__line{
  position:absolute; left:0; right:0; top:19px; height:1px; background:var(--rule);
  transform:scaleX(0); transform-origin:0 50%; z-index:0;
}
.flow__pulse{
  position:absolute; top:16px; left:0; width:7px; height:7px; border-radius:50%;
  background:var(--signal); opacity:0; z-index:2;
}
.flow__node{ position:relative; z-index:1; display:flex; flex-direction:column; gap:5px; }
.flow__node .ic{
  width:38px; height:38px; padding:9px; margin-bottom:9px;
  border:1px solid var(--rule); background:var(--paper); color:var(--trace); border-radius:50%;
}
.flow__node b{ font-family:var(--mono); font-size:11.5px; font-weight:600; letter-spacing:.04em; }
.flow__node span{ font-family:var(--mono); font-size:10.5px; color:var(--ink-3); letter-spacing:.04em; }

/* mini cards */
.pair{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--rule); border:1px solid var(--rule); margin-top:clamp(28px,3.5vw,44px); }
@media (max-width:1000px){ .pair{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .pair{ grid-template-columns:1fr; } }
.mini{ background:var(--paper); padding:clamp(22px,2.4vw,30px); transition:background .28s; }
.mini:hover{ background:var(--paper-3); }
.mini__ic{ width:19px; height:19px; color:var(--trace); }
.mini h3{ font-size:19px; letter-spacing:-.02em; margin-top:18px; }
.mini p{ margin-top:11px; font-size:15.5px; line-height:1.6; color:var(--ink-2); }

/* ── 03 timeline ── */
.tl__item{
  display:grid; grid-template-columns:150px minmax(0,1fr);
  gap:clamp(18px,3vw,48px);
  padding-block:clamp(28px,3.4vw,42px);
  border-top:1px solid var(--rule);
  transition:background .3s;
}
.tl__item:last-child{ border-bottom:1px solid var(--rule); }
.tl__item:hover{ background:var(--paper-3); }
@media (max-width:760px){ .tl__item{ grid-template-columns:1fr; gap:14px; } }

.tl__when{ font-family:var(--mono); font-size:12px; line-height:1.7; padding-top:5px; }
.tl__when b{ display:block; font-weight:600; letter-spacing:.06em; }
.tl__when span{ color:var(--ink-3); }
.tl__when span::before{ content:"↓ "; color:var(--rule); }
@media (max-width:760px){
  .tl__when{ display:flex; gap:10px; }
  .tl__when span::before{ content:"— "; }
}

.tl__what h3{ font-size:clamp(21px,2.3vw,29px); letter-spacing:-.026em; }
.tl__what h3 em{ font-style:normal; color:var(--ink-3); font-weight:500; }
.tl__what ul{ margin-top:20px; display:grid; gap:11px; max-width:74ch; }
.tl__what li{
  position:relative; padding-left:22px; font-size:16px; line-height:1.62; color:var(--ink-2);
}
.tl__what li::before{
  content:""; position:absolute; left:0; top:.62em;
  width:9px; height:1px; background:var(--signal);
}

/* ── 04 spec table ── */
.spec{ border-top:1px solid var(--rule); }
.spec__row{
  display:grid; grid-template-columns:230px minmax(0,1fr);
  gap:clamp(14px,2.5vw,36px); align-items:baseline;
  padding-block:20px; border-bottom:1px solid var(--rule);
  transition:background .28s, padding-left .28s;
}
.spec__row:hover{ background:var(--paper-3); }
@media (max-width:720px){ .spec__row{ grid-template-columns:1fr; gap:12px; } }

.spec__k{
  display:flex; align-items:center; gap:10px;
  font-family:var(--mono); font-size:11.5px; font-weight:500;
  letter-spacing:.12em; text-transform:uppercase;
}
.spec__k .ic{ width:16px; height:16px; color:var(--trace); }
.spec__v{ display:flex; flex-wrap:wrap; gap:7px; }
.spec__v span{
  font-family:var(--mono); font-size:12px; line-height:1;
  padding:7px 11px; border:1px solid var(--rule);
  background:var(--paper); color:var(--ink-2);
  transition:border-color .2s, color .2s, background .2s;
  will-change:transform;
}
.spec__row:hover .spec__v span{ border-color:var(--rule); color:var(--ink); }
.spec__row .spec__v span:hover{ border-color:var(--ink); background:var(--ink); color:var(--paper); }

/* ── 05 contact ── */
.contact{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--rule); border:1px solid var(--rule); }
@media (max-width:900px){ .contact{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .contact{ grid-template-columns:1fr; } }

.contact__card{
  position:relative; background:var(--paper); padding:clamp(22px,2.4vw,30px);
  text-decoration:none; display:block; transition:background .26s, color .26s;
}
.contact__card > .ic:first-child{ width:19px; height:19px; color:var(--trace); transition:color .26s; }
.contact__card span{
  display:block; margin-top:20px;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3);
  transition:color .26s;
}
.contact__card b{
  display:block; margin-top:7px; font-family:var(--mono); font-size:14px; font-weight:500;
  overflow-wrap:anywhere;
}
.contact__go{
  position:absolute; top:clamp(22px,2.4vw,30px); right:clamp(22px,2.4vw,30px);
  width:17px; height:17px; color:var(--rule); transition:transform .26s, color .26s;
}
.contact__card:hover{ background:var(--ink); color:var(--paper); }
.contact__card:hover > .ic:first-child,
.contact__card:hover span{ color:var(--paper); }
.contact__card:hover .contact__go{ color:var(--signal); transform:translate(3px,-3px); }

.end{
  display:flex; flex-wrap:wrap; gap:24px; align-items:center; justify-content:space-between;
  margin-top:clamp(32px,4vw,52px);
}
.end__edu{
  display:flex; align-items:center; gap:10px;
  font-family:var(--mono); font-size:12px; letter-spacing:.06em; color:var(--ink-3);
}
.end__edu .ic{ width:16px; height:16px; color:var(--trace); }

/* ── footer ── */
.foot{ border-top:1px solid var(--rule); background:var(--paper-2); }
.foot__in{
  display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between;
  padding-block:24px;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3);
}
.foot__mid{ color:var(--trace); }

/* ── pre-animation state; GSAP takes each of these to opacity 1 ── */
.js .js-fade,
.js .js-card,
.js .js-row,
.js .js-plate,
.js .js-split{ opacity:0; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .js .js-fade,.js .js-card,.js .js-row,.js .js-plate,.js .js-split{ opacity:1; }
  .live i{ animation:none; }
  *{ transition-duration:.01ms !important; }
}