/* ==========================================================================
   taranbethi.com — monochrome, single-viewport homepage
   Black, white, a grey ramp. No hue. No gradients, no shadows.
   Flat fills and 1px rules only. The gate is the only motion on the site.
   ========================================================================== */

@font-face{
  font-family:"Cabinet Grotesk";
  src:url("/fonts/cabinet-grotesk.woff2") format("woff2");
  font-weight:100 900; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"JetBrains Mono";
  src:url("/fonts/jetbrains-mono.woff2") format("woff2");
  font-weight:400 700; font-style:normal; font-display:swap;
}

:root{
  --black:#000000;
  --near:#0A0A0A;      /* hover fill */
  --rule:#171717;      /* 1px seams — never text */
  --dim:#3A3A3A;       /* 1.9:1 — decorative only, never text */
  --sec:#7A7A7A;       /* 4.9:1 on black — AA floor for text */
  --soft:#C4C4C4;      /* 12:1 */
  --white:#FFFFFF;

  --display:"Cabinet Grotesk",-apple-system,BlinkMacSystemFont,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  --track:.13em;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--black);
  color:var(--soft);
  font-family:var(--display);
  font-size:.875rem;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
ul,ol{list-style:none}
a{color:inherit;text-decoration:none}
canvas{display:block}
::selection{background:var(--white);color:var(--black)}
:focus-visible{outline:2px solid var(--white);outline-offset:-2px}

/* ------------------------------------------------------------ enter gate */
.gate{position:fixed;inset:0;z-index:100;background:var(--black);
  display:flex;align-items:center;justify-content:center;
  opacity:1;transition:opacity .32s linear}
.gate--out{opacity:0;pointer-events:none}
.gate[hidden]{display:none}
.gate__canvas{position:absolute;inset:0;width:100%;height:100%}
.gate__ui{position:relative;z-index:2;align-self:flex-end;padding-bottom:clamp(3rem,12vh,7rem)}
.gate__enter,.gate__skip{
  font-family:var(--mono);font-size:.6875rem;letter-spacing:var(--track);
  color:var(--white);background:transparent;border:1px solid var(--white);
  padding:.75rem 2rem;cursor:pointer;opacity:0;
  transition:opacity .45s linear,background-color .12s linear,color .12s linear;
}
.gate__enter[data-ready],.gate__skip[data-ready]{opacity:1}
.gate__enter:hover,.gate__skip:hover{background:var(--white);color:var(--black)}
.gate__skip{position:absolute;top:clamp(1rem,3vw,2rem);right:clamp(1rem,3vw,2rem);z-index:2;
  border-color:var(--dim);color:var(--sec);padding:.5rem 1rem}
.gate__skip:hover{border-color:var(--white)}
body.gating{overflow:hidden}
body.gating .site{visibility:hidden}

/* ================================================================ MACHINE
   Every page sits inside a drawn black-and-white machine: chassis, grille,
   power block, stand. Flat fills and 1px rules — no gradients, no shadows.
   Desktop: the frame is fixed and the screen holds the content. Mobile: the
   frame drops away and the content stacks and scrolls.                     */

.machine{
  min-height:100vh;min-height:100dvh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:clamp(.75rem,2vh,1.25rem) clamp(.75rem,2vw,1.25rem);
}
.chassis{
  position:relative;
  width:100%;max-width:1440px;
  display:flex;flex-direction:column;
  border:1px solid var(--sec);
  border-radius:4px;
  padding:clamp(.85rem,1.5vw,1.35rem);
  background:var(--black);
}
/* groove: a second hairline just inside the body, so the bezel has depth */
.chassis::before{
  content:"";position:absolute;inset:4px;
  border:1px solid var(--rule);border-radius:2px;pointer-events:none;
}
.chassis__screw{position:absolute;width:4px;height:4px;background:var(--dim)}
.chassis__screw{width:3px;height:3px}
.chassis__screw--tl{top:9px;left:9px}
.chassis__screw--tr{top:9px;right:9px}
.chassis__screw--bl{bottom:9px;left:9px}
.chassis__screw--br{bottom:9px;right:9px}

.chassis__screen{
  flex:1 1 auto;min-height:0;
  border:1px solid var(--dim);
  overflow:hidden;
}
.chassis__bezel{
  flex:0 0 auto;height:1.9rem;
  display:flex;align-items:center;gap:1.1rem;padding-top:.8rem;
}
.chassis__badge{
  font-family:var(--mono);font-size:.5rem;letter-spacing:.22em;color:var(--sec);
  border:1px solid var(--dim);padding:.18rem .4rem;line-height:1;
}
/* grille: individual hairline slots, spread edge to edge */
.chassis__grille{
  flex:1 1 auto;height:9px;
  display:flex;align-items:stretch;justify-content:space-between;
}
.chassis__grille i{width:1px;background:var(--rule)}
.chassis__led{width:7px;height:7px;background:var(--white);flex:0 0 auto}

.stand{
  flex:0 0 auto;display:flex;flex-direction:column;align-items:center;
  margin-bottom:clamp(.25rem,1vh,.6rem);
}
.stand__neck{
  width:clamp(3.5rem,5.5vw,4.5rem);height:clamp(.7rem,2.1vh,1.4rem);
  border:1px solid var(--sec);border-top:0;
}
.stand__foot{
  width:clamp(13rem,26vw,22rem);height:clamp(.4rem,1.1vh,.65rem);
  border:1px solid var(--sec);border-top:0;border-radius:0 0 3px 3px;
}

/* ------------------------------------------------------ screen contents */
.screen{display:flex;flex-direction:column;height:100%}

.ident{
  padding:clamp(1rem,1.8vw,1.35rem);
  border-bottom:1px solid var(--rule);
  display:flex;flex-direction:column;gap:1.25rem;
}
.ident__name{
  font-size:clamp(2rem,7vw,2.75rem);
  font-weight:800;line-height:.85;letter-spacing:-.04em;color:var(--white);
}
.ident__line{margin-top:.85rem;font-size:.75rem;line-height:1.5;color:var(--soft);max-width:32ch}
.facts{
  margin-top:.85rem;display:flex;flex-direction:column;gap:.25rem;
  font-family:var(--mono);font-size:.5625rem;letter-spacing:var(--track);color:var(--sec);
}

.contact{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem}
.contact li{display:flex;align-items:baseline;gap:.5rem}
.contact__key{font-family:var(--mono);font-size:.5625rem;letter-spacing:var(--track);color:var(--sec)}
.contact a{
  font-family:var(--mono);font-size:.5625rem;color:var(--soft);
  overflow-wrap:anywhere;border-bottom:1px solid var(--dim);
  transition:color .1s linear,border-color .1s linear;
}
.contact a:hover{color:var(--white);border-bottom-color:var(--white)}
.contact--ident{flex-direction:column;gap:.4rem}

.board{display:flex;flex-direction:column;min-height:0}
.board__section{display:flex;flex-direction:column;min-height:0}
.lbl{
  font-family:var(--mono);font-size:.5625rem;font-weight:400;
  letter-spacing:var(--track);text-transform:uppercase;color:var(--sec);
  padding:.5rem clamp(1rem,2vw,1.35rem);
  border-bottom:1px solid var(--rule);
}

/* 1px seams: the grid gap lets the container colour show through */
.grid{display:grid;gap:1px;background:var(--rule)}
.grid--work,.grid--xp,.grid--ref{grid-template-columns:1fr}
.cell{background:var(--black);display:flex;min-width:0}

.card{
  display:flex;flex-direction:column;justify-content:center;gap:.3rem;
  width:100%;padding:.7rem clamp(1rem,2vw,1.35rem);
  border-left:1px solid transparent;
  transition:background-color .1s linear,border-color .1s linear;
}
.card:hover{background:var(--near);border-left-color:var(--white)}
.card__top{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.4rem 1rem}
.card__name{font-size:1rem;font-weight:700;letter-spacing:-.03em;line-height:1.1;color:var(--white)}
.card__meta{
  font-family:var(--mono);font-size:.5625rem;letter-spacing:var(--track);
  color:var(--sec);white-space:nowrap;
}
.card__desc{font-size:.75rem;line-height:1.5;color:var(--sec)}
.card__desc strong{font-weight:600;color:var(--white)}
.card__label{
  font-family:var(--mono);font-size:.5625rem;letter-spacing:var(--track);
  color:var(--white);margin-right:.3rem;
}
.card--sm{gap:.2rem}
.card--sm .card__name{font-size:.8125rem;letter-spacing:-.02em}
.card--sm .card__desc{font-size:.625rem}

/* --------------------------------- reference band: education + stack ---
   Quieter than the projects on purpose: smaller type, grey, no links.     */
.ref{
  display:flex;flex-direction:column;gap:.25rem;
  width:100%;padding:.65rem clamp(1rem,2vw,1.35rem);
}
.ref__head{
  font-family:var(--mono);font-size:.5625rem;font-weight:400;
  letter-spacing:var(--track);text-transform:uppercase;color:var(--sec);
  margin-bottom:.15rem;
}
.ref__title{font-size:.8125rem;font-weight:700;letter-spacing:-.02em;color:var(--soft)}
.ref__meta{font-family:var(--mono);font-size:.5625rem;letter-spacing:.06em;color:var(--sec)}
.ref__run{font-size:.6875rem;line-height:1.5;color:var(--sec);margin-top:.15rem}
.stack{display:flex;flex-direction:column;gap:.18rem}
.stack__row{display:grid;grid-template-columns:5.25rem minmax(0,1fr);gap:.75rem;align-items:baseline}
.stack dt{font-family:var(--mono);font-size:.5625rem;letter-spacing:var(--track);color:var(--sec)}
.stack dd{font-size:.6875rem;line-height:1.4;color:var(--soft)}

/* ================================================== DETAIL PAGES (in screen) */
.page{display:flex;flex-direction:column;height:100%;overflow-y:auto}
.pagetop{
  flex:0 0 auto;position:sticky;top:0;z-index:2;background:var(--black);
  padding:.75rem clamp(1.25rem,2.5vw,2.25rem);border-bottom:1px solid var(--rule);
}
.back{font-family:var(--mono);font-size:.625rem;letter-spacing:var(--track);
  color:var(--sec);transition:color .1s linear}
.back::before{content:"← "}
.back:hover{color:var(--white)}

.detail{padding:clamp(1.75rem,4vw,3rem) clamp(1.25rem,2.5vw,2.25rem) clamp(1.5rem,3vw,2.5rem)}
.detail__meta{font-family:var(--mono);font-size:.625rem;letter-spacing:var(--track);
  text-transform:uppercase;color:var(--sec);margin-bottom:1rem}
.detail__name{font-size:clamp(2rem,5vw,4rem);font-weight:800;line-height:.88;
  letter-spacing:-.04em;color:var(--white)}
.detail__name--xp{font-size:clamp(1.75rem,3.4vw,2.75rem);line-height:.95}
.detail__claim{margin-top:clamp(1.25rem,2.5vw,1.75rem);font-size:clamp(1rem,1.7vw,1.375rem);
  line-height:1.35;letter-spacing:-.02em;color:var(--sec);max-width:34ch}
.detail__claim strong{font-weight:700;color:var(--white)}
.detail__label{display:block;font-family:var(--mono);font-size:.625rem;font-weight:500;
  letter-spacing:var(--track);color:var(--white);margin-bottom:.6rem}
.prose{margin-top:clamp(1.5rem,3vw,2.25rem);max-width:62ch}
.prose p{color:var(--soft);line-height:1.65;font-size:.8125rem}
.prose p + p{margin-top:.9rem}

.detail__head{margin-bottom:clamp(1.25rem,2.5vw,1.75rem)}
.block{margin-top:clamp(1.75rem,3.5vw,2.75rem)}
.detail__side .block:first-child{margin-top:0}
.blockhead{font-family:var(--mono);font-size:.625rem;font-weight:400;letter-spacing:var(--track);
  text-transform:uppercase;color:var(--sec);padding-bottom:.7rem;border-bottom:1px solid var(--rule)}
.params{max-width:52rem}
.params__row{display:grid;grid-template-columns:minmax(7rem,14rem) minmax(0,1fr);
  gap:.4rem clamp(1rem,3vw,2rem);padding-block:.7rem;border-bottom:1px solid var(--rule)}
.params dt{font-family:var(--mono);font-size:.625rem;letter-spacing:var(--track);
  color:var(--sec);padding-top:.15em}
.params dd{font-family:var(--mono);font-size:.75rem;color:var(--white);line-height:1.5;overflow-wrap:anywhere}
.evidence__line{padding-top:.9rem}
.evidence__line a{font-family:var(--mono);font-size:.75rem;color:var(--white);
  border-bottom:1px solid var(--dim);transition:border-color .1s linear}
.evidence__line a:hover{border-bottom-color:var(--white)}
.evidence__note{font-family:var(--mono);font-size:.75rem;color:var(--sec);margin-top:.5rem}
.evidence__note--only{padding-top:.9rem;margin-top:0}

.foot{margin-top:clamp(2rem,4vw,3rem);padding-top:clamp(1.25rem,2.5vw,1.75rem);
  border-top:1px solid var(--rule)}

/* Desktop keeps the monitor frame; its content can scroll as work grows. */
@media (min-width:1000px) and (min-height:660px){
  html,body{height:100%}
  body{overflow:hidden}
  .machine{height:100vh;height:100dvh}
  .chassis{flex:1 1 auto;min-height:0}

  .screen{
    display:grid;
    grid-template-columns:minmax(16rem,22%) minmax(0,1fr);
  }
  .ident{
    border-bottom:0;border-right:1px solid var(--rule);
    justify-content:space-between;gap:1rem;
  }
  .ident__name{font-size:clamp(2.5rem,3.4vw,3.25rem)}
  .contact--ident{padding-top:.9rem;border-top:1px solid var(--rule)}

  .board{overflow-y:auto;overscroll-behavior:contain}
  .board__section{flex-shrink:0}
  .board__section--work{flex:1 0 auto}
  .grid--work{
    flex:1 1 auto;
    grid-template-columns:repeat(3,minmax(0,1fr));
    grid-auto-rows:minmax(6.5rem,1fr);
    grid-auto-flow:row;
  }
  .grid--work > .cell:last-child:nth-child(3n + 1){grid-column:1 / -1}
  .grid--xp{grid-template-columns:repeat(4,minmax(0,1fr))}
  .grid--ref{grid-template-columns:minmax(0,1fr) minmax(0,1.75fr)}

  /* detail: header spans, prose | spec table, footer spans */
  .detail{
    display:grid;
    grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
    column-gap:clamp(2rem,4vw,4rem);
    align-items:start;
  }
  .detail__head,.detail .foot{grid-column:1 / -1}
  .detail__main{grid-column:1}
  .detail__side{grid-column:2}
  .prose{margin-top:clamp(1.25rem,2.5vw,1.75rem)}
  .board__section + .board__section{border-top:1px solid var(--rule)}
}

@media (max-width:599px){
  .contact li{min-height:2.75rem}
  .contact a{font-size:.6875rem;padding-block:.5rem}
  .contact__key,.facts,.card__meta,.lbl,.ref__meta{font-size:.625rem}
  .params__row{grid-template-columns:1fr;gap:.35rem}
  .detail__name{overflow-wrap:anywhere;line-height:1}
  .prose p{font-size:.9375rem}
  .back{display:inline-block;min-height:2.75rem;padding-block:.75rem}
}

/* ------------------------------------------------------ reduced motion */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important;
  }
  .gate{display:none !important}
}