/* ==========================================================================
   Raj Ostawal — design system
   Two faces: Inter for UI and body, EB Garamond italic for project titles and
   editorial moments. Caveat appears once, on the polaroid caption.
   ========================================================================== */
:root{
  --bg:#fcfbf9; --bg-sunk:#f5f3ef;
  --ink:#14130f; --muted:#6b6862; --faint:#9a968e;
  --line:rgba(20,19,15,.11); --line-soft:rgba(20,19,15,.07);
  --inv:#14130f; --on-inv:#fcfbf9; --g3:#f0eeea;

  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --serif:"EB Garamond",Iowan Old Style,Palatino,Georgia,serif;
  --hand:"Caveat","Bradley Hand",cursive;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;

  --t-display:clamp(26px,1.15rem + 2.1vw,38px);
  --t-title:clamp(22px,1.05rem + 1.5vw,30px);
  --t-project:clamp(21px,1rem + 1.1vw,26px);
  --t-lead:clamp(17px,1rem + .28vw,19px);
  --t-body:17px; --t-small:14.5px; --t-label:13.5px; --t-cap:12.5px;
  --lh-tight:1.18; --lh-snug:1.35; --lh-body:1.62;

  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:64px; --s9:96px; --s10:128px;

  --measure:62ch; --gutter:clamp(20px,4vw,56px); --page:1240px;
  --ease:cubic-bezier(.22,.61,.36,1); --dur:280ms;
}

*{box-sizing:border-box}
[hidden]{display:none !important}
.vh{position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden;
  clip-path:inset(50%); white-space:nowrap; border:0}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{margin:0; background:var(--bg); color:var(--ink); font-family:var(--sans);
  font-size:var(--t-body); line-height:var(--lh-body); -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility}
h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin:0}
ul,ol{margin:0; padding:0}
img,svg,video{display:block; max-width:100%}
a{color:inherit}
button{font:inherit; color:inherit; background:none; border:0; padding:0}
:focus-visible{outline:2px solid var(--ink); outline-offset:3px; border-radius:2px}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important}
}

/* ============================ layout ============================ */
.page{max-width:var(--page); margin:0 auto; padding-inline:var(--gutter)}
.page.home{max-width:none; padding-inline:clamp(16px,2vw,28px)}
.measure{max-width:var(--measure)}

/* ============================ type roles ============================ */
.display{font-size:var(--t-display); line-height:var(--lh-tight); font-weight:500; letter-spacing:-.022em; text-wrap:balance}
.title{font-size:var(--t-title); line-height:var(--lh-snug); font-weight:500; letter-spacing:-.018em; text-wrap:balance}
.lead{font-size:var(--t-lead); line-height:1.58; color:var(--muted)}
.small{font-size:var(--t-small); line-height:1.6}
.cap{font-size:var(--t-cap); line-height:1.5; color:var(--faint)}
.muted{color:var(--muted)} .faint{color:var(--faint)}
.serif{font-family:var(--serif); font-style:italic; font-weight:400}
.label{font-size:var(--t-label); line-height:1.2; color:var(--faint); font-weight:400}

/* ============================ nav ============================ */
/* Sized off the page rather than shrunk into a corner: mark and links share one
   optical size, sit on a generous inset, and the first headline starts well clear
   of them, so the top of the page reads as space rather than chrome. */
.nav{position:relative; z-index:40; display:flex; align-items:baseline;
  gap:clamp(22px,2.6vw,40px);
  padding-block:var(--s3) 0; margin-bottom:clamp(56px,7vw,96px)}
.nav .mark{font-size:18px; font-weight:600; letter-spacing:-.012em; text-decoration:none;
  margin-right:auto; line-height:1.2}
.nav .mark:hover{opacity:.6}
.nav a.item{font-size:17px; line-height:1.2; color:var(--muted); text-decoration:none; position:relative;
  transition:color var(--dur) var(--ease)}
.nav a.item::after{content:""; position:absolute; left:0; right:0; bottom:-5px; height:1px;
  background:currentColor; transform:scaleX(0); transform-origin:left;
  transition:transform var(--dur) var(--ease)}
.nav a.item:hover,.nav a.item:focus-visible{color:var(--ink)}
.nav a.item:hover::after,.nav a.item:focus-visible::after{transform:scaleX(1)}
.nav a.item[aria-current="page"]{color:var(--ink)}
.nav a.item[aria-current="page"]::after{transform:scaleX(1); background:var(--line)}

/* ============================ home shell ============================ */
.shell{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,clamp(360px,40vw,700px));
  gap:clamp(24px,3vw,60px); align-items:start}
@media (max-width:1000px){ .shell{grid-template-columns:1fr; gap:var(--s6)} }

.panel-col{position:sticky; top:var(--s5); align-self:start}
@media (max-width:1000px){ .panel-col{position:static; order:2} }
.panel{position:relative; background:var(--bg-sunk); border-radius:20px;
  height:calc(100vh - (var(--s5) * 2)); width:100%; padding:var(--s5);
  display:flex; flex-direction:column; overflow:hidden}
@media (max-width:1000px){ .panel{height:auto; aspect-ratio:4/3; min-height:340px} }
@media (max-width:560px){ .panel{aspect-ratio:1/1; border-radius:16px} }
@media (max-width:560px){ .nav{gap:var(--s5); margin-bottom:var(--s7)} .nav .mark{font-size:16px} .nav a.item{font-size:15px} }
.panel-foot{display:flex; justify-content:space-between; align-items:baseline; margin-top:auto;
  padding-top:var(--s5); position:relative; z-index:2; font-size:var(--t-small);
  color:var(--faint); font-variant-numeric:tabular-nums}

/* preview stage: project media crossfades over the idle polaroid */
.stage{position:absolute; inset:var(--s5); pointer-events:none}
.stage figure{position:absolute; inset:0; margin:0; opacity:0; min-height:0;
  transform:scale(1.015); transition:opacity 380ms var(--ease), transform 620ms var(--ease)}
.stage figure.on{opacity:1; transform:none}
.stage img{position:absolute; inset:0; width:auto; height:auto;
  max-width:100%; max-height:100%; margin:auto;
  object-fit:contain; object-position:center; display:block}
/* a bare logo is not a screenshot: every one is set to the same cap height
   rather than being scaled to fill a frame it was never drawn for */
.stage figure.logo{display:grid; place-items:center}
.stage figure.logo img{position:static; inset:auto; height:56px; width:auto;
  max-height:56px; max-width:78%; margin:0}
.stage .label-in{display:none}
.panel .idle{transition:opacity 300ms var(--ease)}
.panel.showing .idle{opacity:0; pointer-events:none}
@media (prefers-reduced-motion:reduce){ .stage figure{transition:opacity 1ms; transform:none} }

/* ============================ polaroid ============================
   Square window, hairline border, deep caption band, woven paper. It tilts
   toward the pointer, like a print you have picked up. */
.idle{flex:1; display:grid; place-items:center; min-height:0; padding:var(--s5) 0; perspective:1100px}
.polaroid{
  --rx:0deg; --ry:0deg; --tilt:-2deg; --lift:0px;
  position:relative; width:min(258px,61%); background:#fdfcfa;
  padding:15px 15px 0; border-radius:10px; cursor:grab; touch-action:manipulation;
  transform:rotate(var(--tilt)) translateY(var(--lift)) rotateX(var(--rx)) rotateY(var(--ry));
  transform-style:preserve-3d;
  transition:transform 520ms cubic-bezier(.2,.8,.24,1), box-shadow 520ms var(--ease);
  box-shadow:0 1px 1px rgba(28,24,18,.10), 0 6px 14px -6px rgba(28,24,18,.16),
             0 22px 44px -18px rgba(28,24,18,.24);
}
.polaroid:active{cursor:grabbing}
.polaroid::before{content:""; position:absolute; inset:0; border-radius:10px; pointer-events:none; opacity:.5;
  background-image:repeating-linear-gradient(45deg, rgba(28,24,18,.028) 0 1px, transparent 1px 4px),
                   repeating-linear-gradient(-45deg, rgba(28,24,18,.028) 0 1px, transparent 1px 4px)}
.polaroid::after{content:""; position:absolute; inset:0; border-radius:10px; pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(28,24,18,.05), inset 0 1px 0 rgba(255,255,255,.9)}
.polaroid .shot{position:relative; aspect-ratio:1/1; overflow:hidden; background:#e9e5dd;
  border-radius:2px; display:grid; place-items:center}
.polaroid .shot img{width:100%; height:100%; object-fit:cover; display:block}
.polaroid .shot::after{content:""; position:absolute; inset:0; pointer-events:none; mix-blend-mode:multiply;
  background:radial-gradient(120% 90% at 50% 42%, rgba(255,248,235,.10) 0%, rgba(44,36,26,.14) 100%)}
.polaroid .shot .await{font-size:var(--t-cap); color:var(--faint); padding:var(--s4); text-align:center}
.polaroid figcaption{display:flex; align-items:baseline; gap:var(--s5);
  padding:20px 6px 26px; font-family:var(--hand); font-style:normal}
.polaroid figcaption .hi{font-size:21px; color:#8b857a; transform:rotate(-1.5deg)}
.polaroid figcaption .me{font-size:29px; color:#17150f; font-weight:600; transform:rotate(-.5deg)}
@media (prefers-reduced-motion:reduce){ .polaroid{--tilt:0deg; transform:none !important; transition:none} }
@media (hover:none),(pointer:coarse){ .polaroid{cursor:default} }

/* ============================ intro ============================ */
.col{padding-top:var(--s3)}
.col > * + *{margin-top:var(--s5)}
.intro p{font-size:var(--t-lead); line-height:1.6}
.intro p + p{margin-top:var(--s4)}
.more{display:inline-flex; align-items:center; gap:var(--s3); cursor:pointer; margin-top:var(--s4);
  font-family:var(--serif); font-style:italic; font-size:16px; color:var(--muted);
  transition:color var(--dur) var(--ease)}
.more:hover,.more:focus-visible{color:var(--ink)}
.more .sw{width:46px; height:26px; border-radius:999px; background:var(--g3);
  border:1px solid var(--line); flex:none; position:relative;
  transition:background-color var(--dur) var(--ease), border-color var(--dur) var(--ease)}
.more .knob{position:absolute; top:2px; left:2px; width:20px; height:20px; border-radius:999px;
  background:#fff; box-shadow:0 1px 2px rgba(20,19,15,.18); transition:transform 300ms var(--ease)}
.more[aria-expanded="true"] .sw{background:var(--ink); border-color:var(--ink)}
.more[aria-expanded="true"] .knob{transform:translateX(20px)}
.more-body{display:grid; grid-template-rows:0fr; opacity:0;
  transition:grid-template-rows 420ms var(--ease), opacity 320ms var(--ease)}
.more-body > div{overflow:hidden; min-height:0}
.more-body.open{grid-template-rows:1fr; opacity:1}
.more-body p{margin-top:var(--s4)}

/* ============================ work list ============================ */
.work{margin-top:var(--s6)}
.work-head{display:flex; align-items:baseline; gap:var(--s4); margin-bottom:var(--s4)}
.work-head .n{margin-left:auto; font-size:var(--t-cap); color:var(--faint); font-variant-numeric:tabular-nums}
.entry{display:block; text-decoration:none; position:relative; padding:var(--s5) var(--s4);
  margin-inline:calc(var(--s4) * -1); border-radius:12px; background:transparent;
  transition:background-color 320ms var(--ease), filter 320ms var(--ease), opacity 320ms var(--ease)}
.entry + .entry{margin-top:var(--s2)}
.entry .row{display:flex; align-items:baseline; gap:var(--s3)}
.entry h3{font-family:var(--serif); font-style:italic; font-weight:400; font-size:var(--t-project);
  line-height:1.32; transition:transform 320ms var(--ease)}
.entry .yr{margin-left:auto; font-size:var(--t-cap); color:var(--faint); flex:none; font-variant-numeric:tabular-nums}
.entry .ctx{margin-top:var(--s2); font-size:var(--t-small); line-height:1.6; color:var(--muted); max-width:52ch}
.entry .tags{display:flex; flex-wrap:wrap; gap:var(--s3); margin-top:var(--s3)}
.entry .tags span{font-size:var(--t-cap); color:var(--faint)}
.entry .tags span + span::before{content:"\00b7"; margin-right:var(--s3); color:var(--line)}
.entry.active{background:var(--bg-sunk)}
.entry.active h3{transform:translateX(3px)}
.col.focusing .entry:not(.active),
.col.focusing .intro,
.col.focusing > h1,
.col.focusing .work-head{filter:blur(3px); opacity:.4}
.entry.soon{cursor:default}
.readdot{position:fixed; z-index:80; top:0; left:0; width:64px; height:64px; border-radius:999px;
  display:grid; place-items:center; pointer-events:none; background:var(--inv); color:var(--on-inv);
  font-size:var(--t-cap); opacity:0; transform:translate(-50%,-50%) scale(.6);
  transition:opacity 200ms var(--ease), transform 260ms var(--ease)}
.readdot.on{opacity:1}
@media (hover:none),(pointer:coarse){ .readdot{display:none} }
@media (prefers-reduced-motion:reduce){
  .col.focusing .entry:not(.active),.col.focusing .intro,.col.focusing > h1,
  .col.focusing .work-head{filter:none; opacity:.6}
  .entry.active h3{transform:none}
  .readdot{transition:none}
}

/* ============================ research + playground ============================ */
.exp{margin-top:var(--s8)}
.exp ul{list-style:none; margin-top:var(--s4); border-top:1px solid var(--line-soft)}
.exp li{border-bottom:1px solid var(--line-soft)}
.exp a,.exp .static{display:flex; align-items:baseline; gap:var(--s3); padding-block:var(--s3);
  text-decoration:none; font-size:var(--t-small)}
.exp .nm{border-bottom:1px solid transparent; transition:border-color var(--dur) var(--ease)}
.exp a:hover .nm,.exp a:focus-visible .nm{border-bottom-color:var(--ink)}
.exp .d{color:var(--muted); margin-left:var(--s3)}
.exp .yr{margin-left:auto; color:var(--faint); font-size:var(--t-cap); font-variant-numeric:tabular-nums}
.pg{margin-top:var(--s5)}
.pg .entry{padding-block:var(--s4)}
.pg .entry h3{font-size:clamp(19px,1rem + .8vw,22px)}

/* ============================ contact + footer ============================ */
.contact{margin-top:var(--s9)}
.contact h2{font-size:var(--t-title); line-height:var(--lh-snug); font-weight:500;
  letter-spacing:-.018em; max-width:24ch}
.contact .links{display:flex; flex-wrap:wrap; gap:var(--s5); margin-top:var(--s5)}
.contact .links a{font-size:var(--t-small); color:var(--muted); text-decoration:none;
  border-bottom:1px solid var(--line);
  transition:color var(--dur) var(--ease), border-color var(--dur) var(--ease)}
.contact .links a:hover,.contact .links a:focus-visible{color:var(--ink); border-color:var(--ink)}
.foot{margin-top:var(--s10); padding-block:var(--s6) var(--s7); border-top:1px solid var(--line-soft)}
.foot p{margin:0}
.foot .upd{font-size:var(--t-cap); color:var(--faint)}
.foot .fline{margin-top:var(--s3); font-size:var(--t-small); color:var(--muted); max-width:46ch}
.foot .fline a{color:var(--ink); text-decoration:none; border-bottom:1px solid var(--line);
  transition:border-color var(--dur) var(--ease)}
.foot .fline a:hover,.foot .fline a:focus-visible{border-bottom-color:var(--ink)}
.foot .sign{margin-top:var(--s6)}
.foot .sign .sig{display:block; width:auto; height:34px; opacity:.62}

/* work entries with nothing public behind them */
.entry.locked .yr::before{content:"\1F512  "; font-family:var(--sans)}
.entry.locked .yr{font-family:var(--serif); font-style:italic; font-size:var(--t-cap); color:var(--faint)}

/* ============================ about ============================ */
.about-head{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,300px);
  gap:clamp(32px,5vw,72px); align-items:start; margin-top:var(--s7)}
@media (max-width:860px){ .about-head{grid-template-columns:1fr; gap:var(--s6)} }
.about-head .portrait{width:100%; border-radius:12px; overflow:hidden; background:var(--bg-sunk); aspect-ratio:4/5}
.about-head .portrait img{width:100%; height:100%; object-fit:cover}
.about-body{max-width:var(--measure)}
.about-body p + p{margin-top:var(--s4)}
.tl{margin-top:var(--s5)}
.tl .row{display:grid; grid-template-columns:minmax(0,190px) minmax(0,1fr) auto;
  gap:var(--s4) var(--s5); align-items:baseline; padding-block:var(--s4); border-top:1px solid var(--line-soft)}
.tl .co{font-weight:500}
.tl .rl{color:var(--muted); font-size:var(--t-small)}
.tl .yr{color:var(--faint); font-size:var(--t-cap); white-space:nowrap; font-variant-numeric:tabular-nums}
@media (max-width:680px){
  .tl .row{grid-template-columns:1fr auto; gap:2px var(--s4)}
  .tl .co{grid-column:1} .tl .yr{grid-column:2; grid-row:1} .tl .rl{grid-column:1/-1}
}
.facts{display:flex; flex-wrap:wrap; gap:var(--s3) var(--s7); margin-top:var(--s5); font-size:var(--t-small)}
.facts b{font-weight:500}
.facts span{color:var(--muted)}

/* ============================ reveal + inline link ============================ */
.reveal{opacity:0; transform:translateY(8px);
  transition:opacity 520ms var(--ease), transform 520ms var(--ease)}
.reveal.in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){ .reveal{opacity:1; transform:none} }
.ln{color:inherit; text-decoration:none; border-bottom:1px solid var(--line);
  transition:border-color var(--dur) var(--ease)}
.ln:hover,.ln:focus-visible{border-color:var(--ink)}