/* ===========================================================
   Sri Ramaanuja Dasan — portfolio
   Monochrome, near-black, film grain. Editorial serif display
   (Fraunces) + grotesque UI (Inter Tight) + mono labels.
   Committed single dark theme. No hue — light is the only accent.
   =========================================================== */

:root{
  --bg:      #0a0a0a;
  --bg-deep: #060606;
  --fg:      #ece9e3;   /* warm off-white */
  --dim:     #b4b0a8;
  --muted:   #747069;
  --faint:   #37352f;
  --line:    rgba(236,233,227,.12);
  --surface: rgba(236,233,227,.025);
  --red:     #e5243a;   /* single accent, used sparingly */
  --nav-ink: #f1efe8;   /* fixed light ink for the difference-blended nav (both themes) */

  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans:  "Inter Tight", system-ui, -apple-system, Segoe UI, sans-serif;
  --mono:  "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;

  --wrap: 1280px;
  color-scheme: dark;
}

/* ---------- light theme (toggle) — corresponds to the warm dark scheme ---------- */
:root[data-theme="light"]{
  --bg:      #f1efe8;   /* warm off-white */
  --bg-deep: #e7e4db;   /* subtle panel (loader / field) */
  --fg:      #16130f;   /* warm near-black ink */
  --dim:     #413e37;   /* secondary text */
  --muted:   #5d594f;   /* labels — darkened for legible grey text on the warm-light bg */
  --faint:   #938d80;   /* barely-there — lifted so it's still visible in light mode */
  --line:    rgba(22,19,15,.14);
  --surface: rgba(22,19,15,.03);
  color-scheme: light;
  /* terminals (.term/.cli) keep their dark panels by design; --nav-ink stays light */
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
html.lenis, html.lenis body{ height:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto !important; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:var(--sans);
  font-size:clamp(15px,1.02vw,16.5px);
  line-height:1.6;
  letter-spacing:-.01em;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
a{ color:inherit; text-decoration:none; }
h1,h2,h3{ margin:0; font-weight:400; }
p{ margin:0; }
img{ display:block; max-width:100%; }
em{ font-style:italic; }
::selection{ background:var(--fg); color:var(--bg); }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto;
  padding-inline:max(22px, env(safe-area-inset-left,0px)) max(22px, env(safe-area-inset-right,0px)); }

.eyebrow,.sec-head__idx,.nav__status,.loader__role,.hero__role,.marquee,.work-row__no,.work-row__stack,.os-card__repo,.os-card__badge,.stat__label,.foot,.hero__scroll,.loader__count{
  font-family:var(--mono); }

/* ---------- grain + vignette ---------- */
.grain{
  position:fixed; inset:-120%; z-index:9998; pointer-events:none; opacity:.05; mix-blend-mode:screen;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
:root[data-theme="light"] .grain{ mix-blend-mode:multiply; opacity:.04; }
@media (prefers-reduced-motion:no-preference){ .grain{ animation:grain 0.5s steps(2) infinite; } }
@keyframes grain{ 0%{transform:translate(0,0)} 25%{transform:translate(-3%,2%)} 50%{transform:translate(2%,-3%)} 75%{transform:translate(-2%,-2%)} 100%{transform:translate(3%,2%)} }
.vignette{ position:fixed; inset:0; z-index:9997; pointer-events:none;
  background:radial-gradient(120% 90% at 50% 40%, transparent 55%, rgba(0,0,0,.55)); }

/* ---------- cursor ---------- */
.cursor{ position:fixed; top:0; left:0; z-index:9999; pointer-events:none; display:none;
  width:46px; height:46px; margin:-23px 0 0 -23px; }
.cursor__ring{ position:absolute; inset:0; border:1px solid var(--fg); border-radius:50%;
  transition:transform .3s cubic-bezier(.2,.8,.2,1), background .3s, opacity .3s; }
.cursor.is-hover .cursor__ring{ transform:scale(1.5); background:rgba(236,233,227,.08); }
.cursor.is-view{ width:92px; height:92px; margin:-46px 0 0 -46px; mix-blend-mode:difference; }
.cursor.is-view .cursor__ring{ background:var(--fg); border-color:var(--fg); }
.cursor.is-view::after{ content:"VIEW"; position:absolute; inset:0; display:grid; place-items:center;
  font-family:var(--mono); font-size:11px; letter-spacing:.14em; color:var(--bg); }
@media (hover:hover) and (pointer:fine){ .cursor{ display:block; } .has-cursor *{ cursor:none !important; } }

/* ---------- loader ---------- */
.loader{ position:fixed; inset:0; z-index:9000; background:var(--bg-deep);
  display:none; grid-template-rows:1fr auto auto; align-items:center; justify-items:center;
  padding:max(28px,env(safe-area-inset-top,0px)) 22px 34px; gap:22px; }
html.js .loader{ display:grid; }
.loader__frame{ position:relative; align-self:end; width:min(440px,84vw); aspect-ratio:3/2;
  overflow:hidden; }
.loader__img{ width:100%; height:100%; object-fit:cover; object-position:50% 46%; }
html.js .loader__img{ clip-path:inset(100% 0 0 0); }
.loader__scrim{ position:absolute; inset:0; background:linear-gradient(transparent 55%, var(--bg-deep)); }
.loader__meta{ display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center; }
.loader__name{ font-family:var(--serif); font-size:clamp(20px,3.2vw,28px); letter-spacing:-.01em; }
.loader__role{ font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:var(--muted); }
.loader__bar{ width:min(360px,70vw); height:1px; background:var(--line); overflow:hidden; }
.loader__fill{ display:block; height:100%; width:0; background:var(--fg); }
.loader__count{ font-size:12px; letter-spacing:.1em; color:var(--muted); }
.loader__count i{ font-style:normal; color:var(--faint); }
.loader__status{ display:flex; align-items:center; gap:7px; min-height:1em;
  font-family:var(--mono); font-size:11.5px; letter-spacing:.04em; color:var(--muted); text-transform:lowercase; }
.loader__status .loader__prompt{ font-style:normal; color:var(--faint); }
.loader__caret{ font-style:normal; color:var(--fg); animation:loaderBlink .9s steps(1) infinite; }
@keyframes loaderBlink{ 0%,50%{ opacity:1 } 50.01%,100%{ opacity:0 } }

/* ---------- nav ---------- */
.nav{ position:fixed; top:env(safe-area-inset-top,0px); left:0; right:0; z-index:200;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:20px max(22px,env(safe-area-inset-right,0px)) 20px max(22px,env(safe-area-inset-left,0px));
  color:var(--nav-ink); mix-blend-mode:difference; }
.nav__mark{ font-family:var(--serif); font-size:19px; letter-spacing:-.01em; }
.nav__mark span{ color:var(--nav-ink); opacity:.55; font-size:.7em; vertical-align:super; }
.nav__links{ display:flex; gap:28px; font-size:13.5px; }
.nav__links a{ color:var(--nav-ink); position:relative; opacity:.8; transition:opacity .25s; }
.nav__links a::after{ content:""; position:absolute; left:0; bottom:-5px; height:1px; width:0; background:var(--nav-ink); transition:width .3s cubic-bezier(.2,.8,.2,1); }
.nav__links a:hover{ opacity:1; } .nav__links a:hover::after{ width:100%; }
.nav__right{ display:flex; align-items:center; gap:18px; }
.nav__status{ font-size:11px; letter-spacing:.1em; color:var(--nav-ink); display:flex; align-items:center; gap:9px; }
.nav__status i{ width:6px; height:6px; border-radius:50%; background:var(--nav-ink); animation:blink 2.4s infinite; }
.nav__theme{ background:transparent; border:0; padding:0 2px; cursor:pointer; color:var(--nav-ink); line-height:1; opacity:.8; transition:opacity .25s; }
.nav__theme:hover{ opacity:1; }
.nav__theme-ico::before{ content:"\263E"; font-size:16px; }               /* moon — click for light */
:root[data-theme="light"] .nav__theme-ico::before{ content:"\2600"; }     /* sun  — click for dark  */
@keyframes blink{ 0%,100%{opacity:1} 50%{opacity:.25} }
@media (max-width:820px){ .nav__links{ display:none; } }
@media (max-width:540px){ .nav__status{ display:none; } }

/* ---------- shared heads ---------- */
.eyebrow{ display:flex; flex-wrap:wrap; gap:7px 20px; font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); }
.eyebrow span{ position:relative; padding-left:15px; }
.eyebrow span::before{ content:""; position:absolute; left:0; top:50%; width:5px; height:5px; background:var(--muted); border-radius:50%; transform:translateY(-50%); }
.sec-head{ margin-bottom:clamp(44px,6vw,86px); }
.sec-head__idx{ font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:var(--muted); margin-bottom:22px; }
.sec-head__title{ font-family:var(--serif); font-weight:300; font-size:clamp(38px,7vw,88px); line-height:1.04; letter-spacing:-.02em; text-wrap:balance; padding-bottom:.08em; }
.sec-head__title em{ color:var(--dim); }

/* ---------- hero ---------- */
.hero{ position:relative; min-height:100svh; display:flex; flex-direction:column; justify-content:center; padding-block:132px 72px; }
.hero__top{ display:flex; justify-content:space-between; align-items:baseline; gap:16px; margin-bottom:clamp(20px,3vw,34px); }
.hero__index{ font-family:var(--mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); white-space:nowrap; }
.hero__title{ font-family:var(--serif); font-weight:300; font-size:clamp(46px,11.5vw,168px); line-height:.92; letter-spacing:-.035em; }
.hero__title .l{ display:block; overflow:hidden; padding:.06em .04em .18em; margin:-.06em -.04em -.18em; }
.hero__title .w{ display:inline-block; }
.hero__title em{ color:var(--dim); }
.hero__media{ display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:clamp(24px,4vw,56px); align-items:end; margin-top:clamp(34px,5vw,64px); }
.hero__fig{ margin:0; position:relative; overflow:hidden; aspect-ratio:16/10; filter:grayscale(1) contrast(1.04); }
.hero__fig img{ width:100%; height:100%; object-fit:cover; object-position:50% 30%; transform:scale(1.06); }
html.js .hero__fig img{ clip-path:inset(0 0 100% 0); }
.hero__fig figcaption{ position:absolute; left:14px; bottom:12px; font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--fg); mix-blend-mode:difference; }
.hero__say{ display:flex; flex-direction:column; gap:20px; padding-bottom:4px; min-width:0; }
.hero__role{ font-size:12px; letter-spacing:.26em; color:var(--muted); }
.hero__thesis{ font-size:clamp(15px,1.4vw,18px); color:var(--dim); max-width:48ch; }
.hero__scroll{ position:absolute; left:max(22px,env(safe-area-inset-left,0px)); bottom:26px; display:flex; align-items:center; gap:10px; font-size:10.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--muted); }
.hero__scroll i{ width:30px; height:1px; background:var(--muted); transform-origin:left; }
@media (prefers-reduced-motion:no-preference){ .hero__scroll i{ animation:line 2s ease-in-out infinite; } }
@keyframes line{ 0%,100%{transform:scaleX(.3)} 50%{transform:scaleX(1)} }
@media (max-width:760px){ .hero__media{ grid-template-columns:1fr; gap:26px; align-items:start; } .hero__fig{ aspect-ratio:3/2; } }

.link-cta{ display:inline-flex; align-items:center; gap:10px; font-size:14px; width:max-content; border-bottom:1px solid var(--line); padding-bottom:6px; transition:gap .25s, border-color .25s; }
.link-cta i{ font-style:normal; transition:transform .25s; }
.link-cta:hover{ gap:16px; border-color:var(--fg); }
.link-cta:hover i{ transform:translateY(3px); }

/* ---------- marquee ---------- */
.marquee{ border-block:1px solid var(--line); overflow:hidden; padding:16px 0; }
.marquee__track{ display:flex; align-items:center; gap:30px; white-space:nowrap; width:max-content;
  font-family:var(--serif); font-style:italic; font-weight:300; font-size:clamp(20px,3vw,34px); color:var(--dim); }
.marquee__track em{ font-style:normal; color:var(--faint); }
@media (prefers-reduced-motion:no-preference){ .marquee__track{ animation:scrollx 30s linear infinite; } }
@keyframes scrollx{ to{ transform:translateX(-50%); } }

/* ---------- work — horizontal gallery ---------- */
.work{ --edge:max(22px, calc((100vw - var(--wrap)) / 2)); }
.work__pin{ min-height:100vh; display:flex; flex-direction:column; justify-content:center;
  gap:clamp(22px,3.4vw,46px); padding-block:clamp(56px,8vw,96px); overflow:hidden; }
.work__head{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; }
.work__nav{ font-family:var(--mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); white-space:nowrap; display:flex; align-items:center; gap:10px; }
.work__nav i{ font-style:normal; animation:nudge 1.5s ease-in-out infinite; }
@keyframes nudge{ 0%,100%{ transform:translateX(0); } 50%{ transform:translateX(6px); } }
.work__viewport{ width:100%; overflow:hidden; }
.work__track{ display:flex; gap:clamp(22px,2.6vw,42px); width:max-content; padding-inline:var(--edge) 32vw; list-style:none; margin:0; }
.work-card{ flex:0 0 auto; width:min(84vw,500px); will-change:transform; }
.work__head .sec-head__title{ font-size:clamp(30px,4.4vw,58px); }
.work-card a{ display:flex; flex-direction:column; height:min(520px, calc(100vh - 220px)); position:relative;
  border:1px solid var(--line); background:var(--bg); overflow:hidden;
  transition:border-color .4s, transform .5s cubic-bezier(.2,.8,.2,1); }
.work-card a:hover{ border-color:var(--fg); transform:translateY(-6px); }
.work-card__media{ position:relative; height:50%; overflow:hidden; background:#0c0c0c; border-bottom:1px solid var(--line); }
.work-card__media img{ width:100%; height:100%; object-fit:cover; object-position:50% 18%;
  filter:grayscale(1) contrast(1.05) brightness(.8); transition:transform .9s cubic-bezier(.2,.8,.2,1), filter .5s; }
.work-card a:hover .work-card__media img{ transform:scale(1.06); filter:grayscale(1) contrast(1.08) brightness(.95); }
.work-card__media::after{ content:""; position:absolute; inset:0; background:linear-gradient(transparent 52%, rgba(6,6,6,.6)); }
.work-card__media--mark{ background:radial-gradient(120% 120% at 50% 32%, #1b1b1b, #060606); }
.work-card__media--mark img{ object-fit:contain; padding:4%; filter:grayscale(1) brightness(1.06) contrast(1.04); }
.work-card__media--mark::after{ background:none; }
.work-card__row{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding:clamp(15px,1.7vw,20px) clamp(18px,2vw,26px) 0; }
.work-card__no{ font-family:var(--mono); font-size:12px; letter-spacing:.1em; color:var(--muted); }
.work-card__stack{ font-family:var(--mono); font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--faint); text-align:right; }
.work-card__name{ font-family:var(--serif); font-weight:300; font-size:clamp(32px,3.8vw,52px); line-height:1; letter-spacing:-.02em; padding:9px clamp(18px,2vw,26px) 0; transition:color .3s, font-style .3s; }
.work-card a:hover .work-card__name{ font-style:italic; color:var(--fg); }
.work-card__desc{ color:var(--muted); font-size:13px; line-height:1.5; padding:11px clamp(18px,2vw,26px) 0; margin-top:auto; max-width:40ch; }
.work-card__view{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); padding:13px clamp(18px,2vw,26px) clamp(15px,1.7vw,20px); display:flex; gap:8px; transition:color .3s; }
.work-card__view i{ font-style:normal; transition:transform .4s; }
.work-card a:hover .work-card__view{ color:var(--fg); }
.work-card a:hover .work-card__view i{ transform:translate(4px,-4px); }
/* native horizontal scroll fallback (mobile / reduced motion / no-JS) */
.work--native .work__pin{ min-height:0; }
.work--native .work__viewport{ overflow-x:auto; scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain; }
.work--native .work-card{ scroll-snap-align:start; }

/* ---------- ascii portrait ---------- */
.ascii{ padding-block:clamp(80px,11vw,140px); }
.ascii__wrap{ display:grid; grid-template-columns:0.72fr 1fr; gap:clamp(28px,5vw,88px); align-items:center; }
.ascii__p{ color:var(--muted); max-width:42ch; font-size:14.5px; line-height:1.65; margin-top:22px; }
.ascii__legend{ font-family:var(--mono); font-size:11px; letter-spacing:.1em; color:var(--faint); margin-top:20px; }
.ascii__legend span{ color:var(--dim); }
.ascii__stage{ position:relative; width:100%; max-width:600px; aspect-ratio:4/5; max-height:82vh; margin-inline:auto; background:var(--bg-deep); border:1px solid var(--line); overflow:hidden; }
.ascii__canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; }
@media (max-width:820px){ .ascii__wrap{ grid-template-columns:1fr; } .ascii__stage{ max-width:min(480px,86vw); } }

/* ---------- live quantization (watch) ---------- */
.quant{ padding-block:clamp(80px,11vw,140px); }
.quant__p{ color:var(--muted); max-width:56ch; font-size:14.5px; line-height:1.65; margin-top:22px; }
.quant__p a{ color:var(--fg); text-decoration:none; border-bottom:1px solid var(--dim); }
.quant__p a:hover{ border-bottom-color:var(--fg); }
.quant__stage{ position:relative; width:100%; aspect-ratio:16/9; max-height:76vh; margin-top:clamp(34px,5vw,64px);
  background:#060606; border:1px solid var(--line); overflow:hidden; }
.quant__cv{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.quant__hint{ font-family:var(--mono); font-size:12px; letter-spacing:.04em; color:var(--muted); margin-top:20px; }
@media (max-width:620px){ .quant__stage{ aspect-ratio:4/5; } }

/* ---------- kinetic type (scroll-velocity weight) ---------- */
.sec-head__title, .field__title{ font-variation-settings:"opsz" 144, "wght" 330; }
.mask-line{ display:block; overflow:hidden; padding:.08em .05em .2em; margin:-.08em -.05em -.2em; }

/* ---------- about ---------- */
.about{ padding-block:clamp(60px,9vw,120px); border-top:1px solid var(--line); }
.about__grid{ display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:clamp(30px,5vw,72px); align-items:center; }
.about__fig{ margin:0; overflow:hidden; aspect-ratio:359/480; filter:grayscale(1) contrast(1.05); }
.about__fig img{ width:100%; height:100%; object-fit:cover; object-position:50% 18%; }
.about__h{ font-family:var(--serif); font-weight:300; font-size:clamp(26px,3.6vw,46px); line-height:1.08; letter-spacing:-.02em; margin:18px 0 22px; text-wrap:balance; }
.about__p{ color:var(--dim); max-width:56ch; font-size:clamp(15px,1.2vw,17px); }
.about__awards{ display:grid; margin-top:34px; border-top:1px solid var(--line); }
.about__awards div{ display:flex; justify-content:space-between; gap:24px; padding:15px 0; border-bottom:1px solid var(--line); }
.about__awards b{ font-weight:500; font-size:14.5px; white-space:nowrap; }
.about__awards span{ color:var(--muted); font-size:13px; text-align:right; }
@media (max-width:760px){ .about__grid{ grid-template-columns:1fr; } .about__fig{ aspect-ratio:3/2; max-height:420px; } }

/* ---------- open source ---------- */
.os{ padding-block:clamp(70px,10vw,130px); border-top:1px solid var(--line); }
.os-card{ display:block; padding:clamp(28px,4vw,52px); border:1px solid var(--line); position:relative; overflow:hidden; transition:background .4s; }
.os-card::before{ content:""; position:absolute; inset:0; background:var(--surface); opacity:0; transition:opacity .4s; }
.os-card:hover::before{ opacity:1; }
.os-card>*{ position:relative; }
.os-card__head{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; font-size:12px; letter-spacing:.08em; }
.os-card__repo{ color:var(--muted); }
.os-card__badge{ color:var(--fg); }
.os-card__title{ font-family:var(--serif); font-weight:300; font-size:clamp(24px,3.4vw,42px); line-height:1.1; letter-spacing:-.02em; margin:20px 0 16px; max-width:20ch; }
.os-card__body{ color:var(--dim); max-width:70ch; font-size:14.5px; }
.os-card__body code{ font-family:var(--mono); font-size:.85em; color:var(--fg); }
.os-card__cta{ display:inline-block; margin-top:26px; font-family:var(--mono); font-size:12px; letter-spacing:.12em; color:var(--muted); transition:color .3s; }
.os-card:hover .os-card__cta{ color:var(--fg); }

/* ---------- stats ---------- */
.stats{ padding-block:clamp(50px,7vw,90px); }
.stats__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.stat{ background:var(--bg); display:flex; flex-direction:column; gap:12px; padding:clamp(22px,2.6vw,34px); }
.stat__num{ font-family:var(--serif); font-weight:300; font-size:clamp(34px,4.4vw,58px); line-height:1; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.stat__label{ font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); line-height:1.5; }
@media (max-width:860px){ .stats__grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:440px){ .stats__grid{ grid-template-columns:1fr; } }

/* ---------- contact ---------- */
.contact{ padding-block:clamp(90px,13vw,170px) 0; border-top:1px solid var(--line); }
.contact__big{ font-family:var(--serif); font-weight:300; font-size:clamp(48px,13vw,186px); line-height:.9; letter-spacing:-.035em; margin:26px 0 0; }
.contact__big .l{ display:block; overflow:hidden; padding:.06em .04em .2em; margin:-.06em -.04em -.2em; }
.contact__big .w{ display:inline-block; }
.contact__big em{ color:var(--dim); }
.contact__links{ display:flex; flex-wrap:wrap; gap:14px; margin-top:clamp(40px,5vw,64px); }
.contact__link{ display:inline-flex; align-items:center; gap:12px; font-family:var(--serif); font-size:clamp(20px,2.4vw,30px); padding:16px 30px; border:1px solid var(--line); border-radius:100px; transition:background .3s, color .3s; }
.contact__link i{ font-style:normal; transition:transform .3s; }
.contact__link:hover{ background:var(--fg); color:var(--bg); }
.contact__link:hover i{ transform:translate(3px,-3px); }

/* footer — aligned 3-col grid, stacks clean on mobile */
.foot{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:14px;
  margin-top:clamp(70px,9vw,120px); padding:30px 0 10px; border-top:1px solid var(--line);
  font-size:11.5px; letter-spacing:.06em; color:var(--muted); }
.foot__c{ justify-self:start; } .foot__m{ justify-self:center; } .foot__r{ justify-self:end; text-align:right; }
@media (max-width:620px){ .foot{ grid-template-columns:1fr; text-align:left; gap:8px; }
  .foot__c,.foot__m,.foot__r{ justify-self:start; text-align:left; } }

/* ---------- code terminal (about) ---------- */
.term{ border:1px solid var(--line); background:#0c0c0c; border-radius:11px; overflow:hidden; font-family:var(--mono); }
.term__bar{ display:flex; align-items:center; gap:7px; padding:13px 15px; background:#111110; border-bottom:1px solid var(--line); }
.term__bar i{ width:11px; height:11px; border-radius:50%; background:#2d2c2a; }
.term__bar em{ margin-left:12px; font-style:normal; font-size:11.5px; letter-spacing:.08em; color:#5c5a56; }
.term__body{ margin:0; padding:22px 20px 26px; font-size:13px; line-height:1.85; color:var(--dim); white-space:pre-wrap; word-break:break-word; min-height:272px; }
.term__body .k{ color:#ece9e3; } .term__body .c{ color:#5c5a56; } .term__body .s{ color:#b4b0a8; }
.term__cur{ color:#ece9e3; }
@media (prefers-reduced-motion:no-preference){ .term__cur{ animation:blink 1.05s steps(1) infinite; } }

/* ---------- capabilities ---------- */
.caps{ padding-block:clamp(70px,10vw,130px); border-top:1px solid var(--line); }
.caps__grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.cap{ background:var(--bg); padding:clamp(26px,3vw,42px); display:flex; flex-direction:column; gap:14px; min-height:230px; }
.cap__k{ font-family:var(--mono); font-size:12px; letter-spacing:.1em; color:var(--muted); }
.cap__h{ font-family:var(--serif); font-weight:300; font-size:clamp(22px,2.6vw,32px); letter-spacing:-.01em; margin-top:auto; }
.cap__p{ color:var(--muted); font-size:14px; max-width:42ch; }
@media (max-width:680px){ .caps__grid{ grid-template-columns:1fr; } }

/* ---------- interactive shell ---------- */
.shell{ padding-block:clamp(70px,10vw,130px); border-top:1px solid var(--line); }
.cli{ border:1px solid var(--line); background:#0c0c0c; border-radius:11px; overflow:hidden; font-family:var(--mono); box-shadow:0 40px 120px -60px #000; }
.cli__bar{ display:flex; align-items:center; gap:7px; padding:13px 15px; background:#111110; border-bottom:1px solid var(--line); }
.cli__bar i{ width:11px; height:11px; border-radius:50%; background:#2d2c2a; }
.cli__bar em{ margin-left:12px; font-style:normal; font-size:11.5px; letter-spacing:.08em; color:#5c5a56; }
.cli__screen{ padding:20px 18px 6px; height:clamp(320px,46vh,460px); overflow-y:auto; overscroll-behavior:contain; font-size:13px; line-height:1.75; color:var(--dim); scrollbar-width:thin; }
.cli__screen .cmd{ color:#ece9e3; } .cli__screen .mut{ color:#5c5a56; } .cli__screen .ok{ color:#ece9e3; }
.cli__screen .hd{ color:#ece9e3; font-size:13px; }
.cli__screen a{ color:#ece9e3; text-decoration:underline; text-underline-offset:3px; }
.cli__screen pre{ margin:0; font:inherit; white-space:pre-wrap; }
.cli__screen .row{ margin:2px 0; }
.cli__screen .asc{ color:#8f8b84; line-height:1.15; }
.cli__form{ display:flex; align-items:center; gap:10px; padding:10px 18px 18px; border-top:1px solid rgba(255,255,255,.04); }
.cli__prompt{ color:#8f8b84; font-size:13px; white-space:nowrap; }
.cli__prompt b{ color:#5c5a56; font-weight:400; padding:0 2px; }
.cli__input{ flex:1; min-width:0; background:transparent; border:0; outline:0; color:#ece9e3; font:inherit; caret-color:#ece9e3; }
.cli__hint{ margin-top:16px; font-family:var(--mono); font-size:11.5px; letter-spacing:.04em; color:var(--muted); }
.cli__hint code{ color:var(--dim); background:var(--surface); border:1px solid var(--line); border-radius:5px; padding:1px 6px; }

/* ---------- cinematic band ---------- */

/* ---------- capabilities (creative rework) ---------- */
.cap{ position:relative; }
.cap__sig{ display:flex; align-items:center; gap:8px; font-family:var(--mono); font-size:12px; letter-spacing:.02em; color:var(--muted); }
.cap__sig b{ color:var(--red); font-weight:400; }
.cap__par{ color:var(--faint); }
.cap__sig .cap__k{ margin-left:auto; font-size:11px; color:var(--faint); }
.cap__h{ margin-top:auto; }
.cap__proof{ display:block; font-family:var(--mono); font-size:12px; color:var(--muted); margin-top:14px;
  max-height:0; opacity:0; overflow:hidden; transform:translateY(4px);
  transition:max-height .4s ease, opacity .35s ease, transform .4s ease; }
.cap__proof i{ font-style:normal; color:var(--red); }
.cap::after{ content:""; position:absolute; left:0; bottom:0; height:2px; width:0; background:var(--red); transition:width .45s cubic-bezier(.2,.8,.2,1); }
.cap:hover .cap__proof{ max-height:40px; opacity:1; transform:none; }
.cap:hover::after{ width:40%; }

/* ---------- contact direct line ---------- */
.contact__direct{ margin-top:22px; font-family:var(--mono); font-size:13px; letter-spacing:.01em; color:var(--muted); display:flex; flex-wrap:wrap; gap:10px; align-items:baseline; }
.contact__direct a{ color:var(--dim); text-decoration:none; border-bottom:1px solid var(--line); padding-bottom:1px; transition:color .25s, border-color .25s; }
.contact__direct a:hover{ color:var(--fg); border-color:var(--red); }
.contact__sep{ color:var(--faint); }

/* ---------- ambient field ---------- */
.field{ position:relative; height:clamp(420px,82vh,760px); border-top:1px solid var(--line); overflow:hidden; background:var(--bg-deep); }
.field__canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.field__overlay{ position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center;
  padding-inline:max(22px,env(safe-area-inset-left,0px)); pointer-events:none; }
.field__overlay > *{ max-width:var(--wrap); margin-inline:auto; width:100%; }
.field__eyebrow{ font-family:var(--mono); font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--muted); margin-bottom:18px; }
.field__title{ font-family:var(--serif); font-weight:300; font-size:clamp(34px,6vw,78px); line-height:1.0; letter-spacing:-.025em; color:var(--fg); text-shadow:0 2px 40px var(--bg-deep); }
.field__title em{ color:var(--dim); }
.field__hint{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-top:24px; }

/* ---------- focus a11y ---------- */
a:focus-visible{ outline:2px solid var(--fg); outline-offset:4px; }
.cli__input:focus-visible{ outline:0; }
.cli__screen:focus-visible{ outline:0; }

/* ---------- stack ---------- */
.stack{ padding-block:clamp(70px,9vw,120px); }
.stack__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(20px,3vw,44px); margin-top:clamp(28px,4vw,52px); }
.stack__k{ font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--faint); padding-bottom:12px; border-bottom:1px solid var(--line); }
.stack__list{ list-style:none; margin:16px 0 0; padding:0; display:flex; flex-direction:column; gap:9px; }
.stack__list li{ font-size:15px; color:var(--muted); transition:color .25s; cursor:default; }
.stack__list li:hover{ color:var(--fg); }
@media (max-width:820px){ .stack__grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:460px){ .stack__grid{ grid-template-columns:1fr; } }

/* ---------- experience timeline ---------- */
.xp{ padding-block:clamp(70px,10vw,130px); }
.xp__line{ list-style:none; margin:clamp(30px,4vw,56px) 0 0; padding:0; }
.xp__item{ display:grid; grid-template-columns:200px 1fr; gap:clamp(20px,4vw,60px); padding:clamp(24px,3vw,40px) 0; border-top:1px solid var(--line); }
.xp__item:last-of-type{ border-bottom:1px solid var(--line); }
.xp__when{ font-family:var(--mono); font-size:12px; letter-spacing:.06em; color:var(--muted); padding-top:5px; }
.xp__role{ font-family:var(--serif); font-size:clamp(19px,2vw,25px); font-weight:400; line-height:1.25; }
.xp__org{ font-family:var(--mono); font-size:11.5px; letter-spacing:.05em; color:var(--dim); margin-top:8px; text-transform:uppercase; }
.xp__p{ color:var(--muted); font-size:14.5px; line-height:1.62; margin-top:13px; max-width:64ch; }
.xp__resume{ margin-top:clamp(28px,4vw,44px); }
@media (max-width:680px){ .xp__item{ grid-template-columns:1fr; gap:10px; } .xp__when{ padding-top:0; } }

/* ---------- github live ---------- */
.gh{ padding-block:clamp(70px,10vw,130px); }
.gh__stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); margin-top:clamp(28px,4vw,52px); }
.gh__stat{ background:var(--bg); padding:clamp(22px,3vw,34px); display:flex; flex-direction:column; gap:9px; }
.gh__num{ font-family:var(--serif); font-size:clamp(30px,4vw,52px); font-weight:300; line-height:1; font-variation-settings:"opsz" 120; }
.gh__label{ font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--faint); }
.gh__repos{ list-style:none; margin:clamp(22px,3vw,36px) 0 0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,1.6vw,20px); }
.gh__repo{ border:1px solid var(--line); padding:20px; display:flex; flex-direction:column; gap:9px; min-height:134px; transition:border-color .3s, transform .3s; }
.gh__repo:hover{ border-color:var(--dim); transform:translateY(-3px); }
.gh__repo a{ font-family:var(--mono); font-size:13.5px; color:var(--fg); text-decoration:none; word-break:break-word; }
.gh__repo p{ font-size:13px; color:var(--muted); line-height:1.55; flex:1; margin:0; }
.gh__meta{ font-family:var(--mono); font-size:11px; color:var(--faint); letter-spacing:.03em; }
.gh__note{ font-family:var(--mono); font-size:11.5px; color:var(--faint); margin-top:18px; }
@media (max-width:820px){ .gh__stats{ grid-template-columns:repeat(2,1fr); } .gh__repos{ grid-template-columns:1fr; } }

/* ---------- heading scroll-sweep (bold horizontal drift) ---------- */
/* clip swept headings at the section edge so the drift never scrolls the page sideways */
.shell, .caps, .stack, .xp, .gh, .ascii, .os, .quant, .about{ overflow-x:clip; }
.is-sweep{ transform:translateX(var(--amp,0)); transition:transform 1.3s cubic-bezier(.25,.8,.3,1); will-change:transform; }
.is-sweep.is-in{ transform:none; }
@media (prefers-reduced-motion:reduce){ .is-sweep{ transform:none !important; transition:none !important; } }
/* terminal: subtle cue once it has captured scroll (after a click) */
.cli--active{ border-color:var(--dim); }

/* ===== Vladimir — pet cat, sleeps on the field box then darts home ===== */
.cat-world{ position:relative; }            /* his whole range: field box → play area */
.catyard{ overflow-x:clip; }
.catyard__sub{ max-width:60ch; margin-top:14px; color:var(--muted); font-size:15px; line-height:1.6; }

/* play floor — no panel, same ground as the rest of the site */
.cat-floor{ position:relative; margin-top:26px; height:clamp(360px,52vh,520px); perspective:640px; overflow:hidden; }
/* a receding 3D floor plane — grid tiles tilt away to a soft horizon, so he reads as standing in space */
.cat-floor::before{ content:""; position:absolute; left:-30%; right:-30%; bottom:0; height:66%; z-index:0; pointer-events:none;
  transform:rotateX(64deg); transform-origin:bottom center;
  background:
    linear-gradient(var(--line) 1px, transparent 1px) 0 0 / 100% 36px,
    linear-gradient(90deg, var(--line) 1px, transparent 1px) 0 0 / 36px 100%;
  -webkit-mask-image:linear-gradient(to top, #000 6%, transparent 90%);
          mask-image:linear-gradient(to top, #000 6%, transparent 90%); }
.cat-floor::after{ content:""; position:absolute; left:0; right:0; bottom:40%; height:44%; z-index:0; pointer-events:none;
  background:radial-gradient(130% 80% at 50% 100%, var(--surface), transparent 72%); }
.cat-floor__affection{ position:absolute; top:6px; left:2px; z-index:5; display:flex; align-items:center; gap:8px;
  font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.cat-floor__bar{ width:92px; height:5px; border-radius:3px; background:var(--faint); overflow:hidden; }
.cat-floor__bar i{ display:block; height:100%; width:18%; background:#c0271f; transition:width .4s ease; }

/* his little house, drawn in the site's own ink */
.cat-tower{ position:absolute; left:4%; bottom:4%; width:clamp(104px,14vw,148px); height:auto; z-index:1; display:block;
  image-rendering:pixelated; image-rendering:crisp-edges; filter:drop-shadow(0 6px 10px rgba(0,0,0,.12)); }

/* cat anchor — JS positions this in cat-world px; the feet sit at (left,top) */
.cat{ position:absolute; left:0; top:0; width:0; height:0; z-index:6; }
.cat__art{ position:absolute; left:0; bottom:0; width:134px;
  transform:translate(-50%,0) scaleX(var(--face,1)) scale(var(--scale,1)); transform-origin:bottom center; will-change:transform; }
.cat.is-sleeping .cat__art{ transform:translate(-50%,24px) scaleX(var(--face,1)) scale(var(--scale,1)); } /* paw dips over the edge */
.cat-canvas{ display:block; width:134px; height:auto; image-rendering:pixelated; image-rendering:crisp-edges;
  /* dark theme default: a faint rim so the black cat's edge reads on the near-black floor */
  filter:drop-shadow(1px 0 0 #565249) drop-shadow(-1px 0 0 #565249) drop-shadow(0 1px 0 #565249) drop-shadow(0 -1px 0 #565249); }
:root[data-theme="light"] .cat-canvas{ filter:drop-shadow(0 3px 3px rgba(0,0,0,.16)); }
.cat__shadow{ position:absolute; left:0; bottom:-2px; width:128px; height:20px; transform:translate(-50%,0) scaleX(var(--scale,1));
  background:radial-gradient(50% 50% at 50% 50%, rgba(0,0,0,.22), transparent 70%); filter:blur(1px); }
.cat.is-sleeping .cat__shadow{ opacity:0; }

/* pose toggle */
.ct-sleep{ display:none; }
.cat.is-sleeping .ct-awake{ display:none; }
.cat.is-sleeping .ct-sleep{ display:block; }

/* parts — awake */
.ct-tail{ transform-box:fill-box; transform-origin:84% 88%; animation:catTail 3.2s ease-in-out infinite; }
.cat.is-happy .ct-tail,.cat.is-walking .ct-tail{ animation-duration:.6s; }
.ct-ear{ transform-box:fill-box; transform-origin:50% 100%; animation:catEar 7s ease-in-out infinite; }
.ct-lid{ transform-box:fill-box; transform-origin:50% 0; transform:scaleY(0); animation:catBlink 5.5s ease-in-out infinite; }
.ct-leg{ transform-box:fill-box; transform-origin:50% 8%; }
.cat.is-walking .ct-leg--fa,.cat.is-walking .ct-leg--ba{ animation:catStepA .34s linear infinite; }
.cat.is-walking .ct-leg--fb,.cat.is-walking .ct-leg--bb{ animation:catStepB .34s linear infinite; }
.cat.is-running .ct-leg--fa,.cat.is-running .ct-leg--ba{ animation:catStepA .18s linear infinite; }
.cat.is-running .ct-leg--fb,.cat.is-running .ct-leg--bb{ animation:catStepB .18s linear infinite; }

/* parts — sleeping: the dangling front paw swings, tail-tip drifts */
.ct-dangle{ transform-box:fill-box; transform-origin:50% 3%; animation:catDangle 1.9s ease-in-out infinite; }
.ct-sleeptail{ transform-box:fill-box; transform-origin:88% 80%; animation:catTail 5s ease-in-out infinite; }

@keyframes catBreathe{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-2px) } }
@keyframes catBob{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-4px) } }
@keyframes catTail{ 0%,100%{ transform:rotate(-6deg) } 50%{ transform:rotate(9deg) } }
@keyframes catEar{ 0%,92%,100%{ transform:rotate(0) } 95%{ transform:rotate(-8deg) } }
@keyframes catBlink{ 0%,94%,100%{ transform:scaleY(0) } 97%{ transform:scaleY(1) } }
@keyframes catStepA{ 0%,100%{ transform:translateY(0) rotate(0) } 50%{ transform:translateY(-3px) rotate(-8deg) } }
@keyframes catStepB{ 0%,100%{ transform:translateY(-3px) rotate(8deg) } 50%{ transform:translateY(0) rotate(0) } }
@keyframes catDangle{ 0%,100%{ transform:rotate(-11deg) } 50%{ transform:rotate(12deg) } }

/* speech bubble */
.cat__bubble{ position:absolute; left:0; bottom:150px; transform:translate(-50%,10px);
  max-width:230px; width:max-content; padding:10px 14px; border-radius:14px;
  background:#141414; color:#f4f1ea; font-size:13px; line-height:1.4; text-align:center;
  opacity:0; pointer-events:none; transition:opacity .25s, transform .25s; box-shadow:0 10px 26px rgba(0,0,0,.28); z-index:7; }
.cat__bubble.is-on{ opacity:1; transform:translate(-50%,0); }
.cat__bubble::after{ content:""; position:absolute; left:50%; bottom:-7px; transform:translateX(-50%);
  border:7px solid transparent; border-top-color:#141414; border-bottom:0; }

/* treats (drawn fish), laser, hearts (drawn) */
.cat-treat{ position:absolute; width:30px; transform:translate(-50%,-50%); z-index:2; animation:catPop .3s ease; }
.cat-treat svg{ display:block; width:100%; height:auto; }
.cat-treat svg ellipse,.cat-treat svg path{ fill:#b8732e; }
.cat-treat svg .cat-treat__eye{ fill:#141414; }
.cat-treat.is-eaten{ opacity:0; transform:translate(-50%,-50%) scale(.2); transition:.25s; }
.cat-laser{ position:absolute; width:14px; height:14px; transform:translate(-50%,-50%); border-radius:50%;
  background:radial-gradient(circle,rgb(255,64,64),#c40000); box-shadow:0 0 12px 4px rgba(255,40,40,.65); z-index:4; pointer-events:none; }
.cat-heart{ position:absolute; width:19px; transform:translate(-50%,-50%); pointer-events:none; z-index:9; animation:catHeart 1.1s ease-out forwards; }
.cat-heart svg{ display:block; width:100%; height:auto; fill:#d9504d; }
.cat-floor.is-laser{ cursor:crosshair; }
@keyframes catPop{ 0%{ transform:translate(-50%,-50%) scale(.2) } 60%{ transform:translate(-50%,-50%) scale(1.15) } 100%{ transform:translate(-50%,-50%) scale(1) } }
@keyframes catHeart{ 0%{ opacity:0; transform:translate(-50%,-50%) scale(.4) } 20%{ opacity:1 } 100%{ opacity:0; transform:translate(-50%,-190%) scale(1.1) } }

/* controls + chat */
.cat-controls{ display:flex; flex-wrap:wrap; gap:10px; margin-top:20px; align-items:center; }
.cat-btn{ font-family:var(--mono); font-size:13px; letter-spacing:.02em; padding:11px 16px; border-radius:999px;
  border:1px solid var(--line); background:transparent; color:var(--fg); cursor:pointer; transition:background .2s, border-color .2s, color .2s; }
.cat-btn:hover{ border-color:var(--dim); background:var(--fg); color:var(--bg); }
.cat-btn[aria-pressed="true"]{ background:#c0271f; border-color:#c0271f; color:#fff; }
.cat-ask{ display:flex; gap:8px; flex:1 1 320px; min-width:240px; }
.cat-ask__in{ flex:1; min-width:0; font-family:var(--sans); font-size:14px; padding:11px 16px; border-radius:999px;
  border:1px solid var(--line); background:transparent; color:var(--fg); }
.cat-ask__in::placeholder{ color:var(--muted); }
.cat-ask__in:focus{ outline:none; border-color:var(--dim); }

.cat-log{ margin-top:16px; max-height:200px; overflow-y:auto; display:flex; flex-direction:column; gap:10px; font-size:14px; line-height:1.5; padding-bottom:44px; }
.cat-log__row{ display:flex; gap:10px; align-items:baseline; }
.cat-log__row--you{ justify-content:flex-end; text-align:right; }
.cat-log__who{ font-family:var(--mono); font-size:10px; text-transform:uppercase; letter-spacing:.14em; color:var(--muted); flex:0 0 auto; padding-top:2px; }
.cat-log__row--you .cat-log__who{ order:2; }
.cat-log__txt{ color:var(--dim); max-width:62ch; }
.cat-log__row--you .cat-log__txt{ color:var(--fg); }
.cat-dad{ display:inline-flex; margin-left:4px; font-family:var(--mono); font-size:12px; padding:7px 13px; border-radius:999px;
  background:#1f8f6b; color:#fff; text-decoration:none; white-space:nowrap; transition:filter .2s; }
.cat-dad:hover{ filter:brightness(1.08); }

@media (max-width:620px){ .cat-floor{ height:clamp(320px,62vh,440px); } .cat__art,.cat-canvas{ width:112px; } }
@media (prefers-reduced-motion:reduce){ .cat-svg,.ct-tail,.ct-ear,.ct-lid,.ct-leg,.ct-dangle,.ct-sleeptail{ animation:none !important; } }