/* ============================================================
   SYALIMA M DAS — shared stylesheet
   Two rooms, one brand.
   DARK  (default) .............. AI product work, home, about
   LIGHT (body.light) ........... the design studio
   Same ink blue, same type, inverted. The switch is the point:
   you're stepping out of the darkroom and into the studio.
   ============================================================ */

:root{
  /* dark — cyanotype */
  --bg:#0E3852; --surface:#0A2B40; --deep:#071F2E;
  --ink:#EFE7D6; --accent:#F2C14E; --alt:#7FD4C1;
  --mute:rgba(239,231,214,.52); --line:rgba(239,231,214,.17);
  --veil:rgba(9,32,47,.9); --on-accent:#071F2E;

  --disp:"Archivo",system-ui,-apple-system,sans-serif;
  --body:"Spectral",Georgia,serif;
  --mono:"Space Mono",ui-monospace,SFMono-Regular,monospace;
  --pad:clamp(20px,5vw,76px);
  --wrap:1220px;
}
body.light{
  /* light — studio paper */
  --bg:#EDEFF1; --surface:#FFFFFF; --deep:#DFE4E8;
  --ink:#0E3852; --accent:#A8730C; --alt:#1E7A6E;
  --mute:rgba(14,56,82,.62); --line:rgba(14,56,82,.18);
  --veil:rgba(223,228,232,.94); --on-accent:#FFFFFF;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--body);font-weight:300;
  font-size:clamp(16px,1.05vw,18px);line-height:1.62;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:95;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
body.light::after{opacity:.035}
a{color:inherit}
img{max-width:100%;display:block}
.wrap{max-width:var(--wrap);margin:0 auto}

.lbl{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}
.lbl b{color:var(--accent);font-weight:400}


/* ---------- NAV ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:70;display:flex;justify-content:space-between;
  align-items:center;padding:13px var(--pad);border-bottom:1px solid var(--line);
  background:color-mix(in srgb,var(--bg) 87%,transparent);backdrop-filter:blur(9px)}
.nav a{text-decoration:none}
.nav .mark{font-family:var(--disp);font-weight:800;font-size:14px;font-variation-settings:"wdth" 112}
.nav ul{display:flex;gap:18px;list-style:none;margin:0;padding:0;align-items:center}
.nav ul a{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--mute);transition:color .2s;padding:4px 0}
.nav ul a:hover,.nav ul a:focus-visible{color:var(--accent)}
.nav ul a[aria-current="page"]{color:var(--ink);border-bottom:1px solid var(--accent)}
.nav .pct{font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--accent);min-width:52px;text-align:right}
@media(max-width:640px){.nav .pct{display:none}.nav ul{gap:13px}}
#scanline{position:absolute;left:0;bottom:-1px;height:1px;width:0;background:var(--accent);
  box-shadow:0 0 9px var(--accent);transition:width .12s linear}

/* ---------- HERO (home) ---------- */
.expose{position:relative;z-index:2;min-height:90vh;display:flex;flex-direction:column;
  justify-content:center;padding:clamp(120px,15vh,170px) var(--pad) clamp(56px,9vh,100px);
  background:radial-gradient(120% 90% at 22% 18%,var(--surface),var(--deep) 78%)}
.veil{position:absolute;inset:0;z-index:3;pointer-events:none;transition:opacity 1.6s ease}
.veil.gone{opacity:0}
.hero-in{position:relative;z-index:2;max-width:var(--wrap);margin:0 auto;width:100%}
.hero-in .top{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding-bottom:15px;border-bottom:1px solid var(--line);margin-bottom:clamp(32px,6vh,60px)}
h1{font-family:var(--disp);font-weight:800;font-variation-settings:"wdth" 116;text-transform:uppercase;
  font-size:clamp(2.4rem,8.6vw,7rem);line-height:.92;letter-spacing:-.03em;margin:0;max-width:16ch}
h1 .y{color:var(--accent)}
.sub{margin:clamp(24px,4vh,42px) 0 0;max-width:48ch;font-size:clamp(1.06rem,1.7vw,1.34rem);line-height:1.5}
.sub em{font-style:italic;color:var(--accent)}
.exp-ui{position:relative;z-index:4;max-width:var(--wrap);margin:clamp(32px,6vh,54px) auto 0;width:100%;
  display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.dev{font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;
  padding:11px 19px;border:1px solid var(--accent);background:none;color:var(--accent);cursor:pointer;transition:.2s}
.dev:hover{background:var(--accent);color:var(--on-accent)}
.dev:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.dev.done{opacity:.4;pointer-events:none}
.meter{flex:1;min-width:100px;max-width:210px;height:1px;background:var(--line);position:relative}
.meter i{position:absolute;inset:0 auto 0 0;width:0;background:var(--accent);transition:width .35s ease}

/* ---------- PAGE HEADER (inner pages) ---------- */
.phead{position:relative;z-index:2;padding:clamp(112px,15vh,164px) var(--pad) clamp(36px,6vh,64px)}
.phead .meta{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:20px}
.phead h1{font-size:clamp(1.9rem,6.2vw,4.6rem);max-width:20ch}
.phead .lede{margin:clamp(20px,3vh,32px) 0 0;max-width:52ch;font-size:clamp(1.06rem,1.6vw,1.3rem)}
.spec{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;background:var(--line);
  border:1px solid var(--line);margin-top:clamp(30px,5vh,50px)}
.spec div{background:var(--bg);padding:15px 16px}
.spec b{font-family:var(--disp);font-weight:600;font-size:.98rem;display:block;margin-top:4px;
  font-variation-settings:"wdth" 102}

/* ---------- SECTIONS ---------- */
.sec{position:relative;z-index:2;padding:clamp(54px,9vh,110px) var(--pad);border-top:1px solid var(--line)}
.sec>.wrap>h2,.sec>h2{font-family:var(--disp);font-weight:600;font-variation-settings:"wdth" 108;
  text-transform:uppercase;font-size:clamp(1.35rem,3vw,2.15rem);letter-spacing:-.015em;margin:8px 0 30px}
.prose{max-width:56ch}
.prose p{margin:0 0 1.05em}
.prose p:last-child{margin-bottom:0}
.prose em{font-style:italic;color:var(--accent)}
h3.sub-h{font-family:var(--disp);font-weight:600;font-variation-settings:"wdth" 104;
  font-size:1.18rem;letter-spacing:-.01em;margin:2.2em 0 .6em}

.wipe{-webkit-mask-image:linear-gradient(100deg,#000 0 28%,rgba(0,0,0,.4) 46%,transparent 64%);
      mask-image:linear-gradient(100deg,#000 0 28%,rgba(0,0,0,.4) 46%,transparent 64%);
      -webkit-mask-size:300% 100%;mask-size:300% 100%;
      -webkit-mask-position:100% 0;mask-position:100% 0}
.wipe.in{-webkit-mask-position:0 0;mask-position:0 0;
  transition:-webkit-mask-position 1.15s cubic-bezier(.3,.75,.3,1),mask-position 1.15s cubic-bezier(.3,.75,.3,1)}

/* ---------- WORK LIST (links to pages) ---------- */
.rows{border-top:1px solid var(--line)}
.rows a.row{display:grid;grid-template-columns:44px 1fr 108px 104px 24px;gap:16px;align-items:center;
  padding:24px 4px;border-bottom:1px solid var(--line);text-decoration:none;position:relative;
  transition:padding-left .3s}
.rows a.row::before{content:"";position:absolute;inset:0;opacity:0;transition:opacity .3s;pointer-events:none;
  background:linear-gradient(90deg,color-mix(in srgb,var(--ink) 8%,transparent),transparent 60%)}
.rows a.row:hover::before{opacity:1}
.rows a.row:hover{padding-left:14px}
.rows a.row:focus-visible{outline:1px solid var(--accent);outline-offset:-1px}
.rows .n{font-family:var(--mono);font-size:11px;color:var(--mute)}
.rows .ttl{font-family:var(--disp);font-weight:600;font-variation-settings:"wdth" 104;
  font-size:clamp(1.05rem,2.1vw,1.5rem);letter-spacing:-.012em}
.rows .tag{font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--alt)}
.rows .yr{font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--mute);text-transform:uppercase}
.rows .arw{font-family:var(--mono);color:var(--mute);justify-self:end;transition:transform .3s,color .3s}
.rows a.row:hover .arw{transform:translateX(5px);color:var(--accent)}
@media(max-width:800px){
  .rows a.row{grid-template-columns:32px 1fr 22px;gap:12px}
  .rows .tag,.rows .yr{display:none}
}

/* the finding, pulled out */
.finding{margin:clamp(30px,5vh,52px) 0;padding:22px 0 22px 22px;border-left:3px solid var(--accent)}
.finding p{margin:6px 0 0;font-size:clamp(1.15rem,2.3vw,1.7rem);line-height:1.32;max-width:34ch;
  font-family:var(--disp);font-weight:400;font-variation-settings:"wdth" 100;letter-spacing:-.01em}

/* ---------- PLATES ---------- */
.pl{position:relative;overflow:hidden;border:1px solid var(--line);min-height:180px;background:var(--deep)}
.pl .art{position:absolute;inset:0;filter:blur(9px) saturate(.35) contrast(.75);transform:scale(1.05);
  transition:filter 1.5s ease,transform 1.5s ease}
.pl.dev .art{filter:none;transform:none}
.pl .cap{position:absolute;left:11px;bottom:9px;z-index:4}
.pl canvas{position:absolute;inset:0;z-index:3;pointer-events:none;transition:opacity 1.3s ease}
.pl canvas.gone{opacity:0}
.pl.tall{min-height:300px}
.plates{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px;
  margin-top:clamp(28px,5vh,48px)}

/* procedural placeholders — replace with real exports */
.a1{background:radial-gradient(70% 90% at 25% 20%,#2E7E9E,transparent 65%),linear-gradient(160deg,#0C3247,#1B5C77 55%,#08222E)}
.a2{background:repeating-linear-gradient(56deg,#0F4560 0 22px,#134F6E 22px 44px),radial-gradient(60% 70% at 75% 30%,rgba(242,193,78,.4),transparent 60%)}
.a3{background:radial-gradient(50% 60% at 50% 55%,#7FD4C1,transparent 62%),linear-gradient(200deg,#0A2B40,#16577A)}
.a4{background:conic-gradient(from 210deg at 40% 45%,#0C3247,#2E7E9E,#0C3247)}
.a5{background:linear-gradient(120deg,#0A2B40 0 42%,#F2C14E 42% 46%,#1B5C77 46%)}
.a6{background:radial-gradient(35% 45% at 30% 65%,#F2C14E,transparent 55%),linear-gradient(20deg,#08222E,#215F7E)}
.a7{background:repeating-radial-gradient(circle at 60% 40%,#0E3852 0 16px,#17607F 16px 32px)}
.a8{background:linear-gradient(145deg,#0A2B40,#2E7E9E 60%,#7FD4C1)}
.b1{background:linear-gradient(150deg,#F4C7B8,#D98CA8 55%,#8E6FB8)}
.b2{background:repeating-linear-gradient(40deg,#FBE3A0 0 26px,#F3C266 26px 52px)}
.b3{background:radial-gradient(60% 70% at 35% 35%,#9CD6C4,transparent 62%),linear-gradient(200deg,#DCE7E4,#7FB8C8)}
.b4{background:conic-gradient(from 140deg at 55% 45%,#E8A3C0,#F6D97A,#9AC7E8,#E8A3C0)}

/* ---------- THE DOOR (home → studio) ---------- */
.door{display:block;text-decoration:none;position:relative;overflow:hidden;
  border:1px solid var(--line);padding:clamp(30px,5vw,58px);background:var(--surface);transition:.35s}
.door:hover{background:color-mix(in srgb,var(--ink) 6%,var(--surface))}
.door:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.door .swatches{display:flex;gap:6px;margin-bottom:22px}
.door .swatches span{width:34px;height:34px;border-radius:2px}
.door h3{font-family:var(--disp);font-weight:800;font-variation-settings:"wdth" 114;text-transform:uppercase;
  font-size:clamp(1.6rem,4.6vw,3.1rem);line-height:.98;letter-spacing:-.025em;margin:0 0 16px;max-width:18ch}
.door p{margin:0;max-width:46ch;color:var(--mute)}
.door .cue{display:inline-block;margin-top:24px;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.13em;text-transform:uppercase;color:var(--accent);transition:transform .3s}
.door:hover .cue{transform:translateX(6px)}

/* ---------- COLLECTION CARDS ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}
.card{display:flex;flex-direction:column;text-decoration:none;border:1px solid var(--line);
  background:var(--surface);transition:.3s}
.card:hover{transform:translateY(-3px);border-color:var(--ink)}
.card:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.card .pl{border:0;border-bottom:1px solid var(--line);min-height:190px}
.card .body{padding:20px 20px 24px}
.card h3{font-family:var(--disp);font-weight:600;font-variation-settings:"wdth" 104;
  font-size:1.24rem;letter-spacing:-.015em;margin:6px 0 8px}
.card p{margin:0;color:var(--mute);font-size:.96rem;line-height:1.5}

/* ---------- ABOUT ---------- */
.about{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(28px,6vw,80px)}
.col-r{display:flex;flex-direction:column;gap:26px}
.parts{border-top:1px solid var(--line)}
.parts div{display:grid;grid-template-columns:26px 1fr;gap:14px;padding:13px 0;border-bottom:1px solid var(--line)}
.parts .n{font-family:var(--mono);font-size:10px;color:var(--accent)}
.parts b{font-family:var(--disp);font-weight:600;font-size:.98rem;font-variation-settings:"wdth" 102;display:block}
.parts small{font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--mute);text-transform:uppercase}
@media(max-width:840px){.about{grid-template-columns:1fr}}

/* ---------- CONTACT ---------- */
.contact h2.big{font-family:var(--disp);font-weight:800;font-variation-settings:"wdth" 116;
  text-transform:uppercase;font-size:clamp(1.8rem,6vw,4.6rem);line-height:.95;letter-spacing:-.028em;
  margin:12px 0 clamp(28px,5vh,50px);max-width:17ch}
.reach{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line)}
.reach a{display:block;padding:24px 22px 26px;background:var(--bg);text-decoration:none;transition:.25s}
.reach a:hover{background:color-mix(in srgb,var(--ink) 7%,var(--bg))}
.reach a:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.reach b{font-family:var(--disp);font-weight:600;font-variation-settings:"wdth" 104;font-size:1.24rem;
  display:block;margin:8px 0 5px;letter-spacing:-.015em}
.reach span.v{color:var(--mute);font-size:.95rem;word-break:break-word}
.reach .arw{font-family:var(--mono);color:var(--accent);font-size:11px;display:inline-block;margin-top:12px;transition:transform .3s}
.reach a:hover .arw{transform:translateX(5px)}

/* ---------- PAGER + FOOT ---------- */
.pager{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding:clamp(30px,5vh,52px) var(--pad);border-top:1px solid var(--line);position:relative;z-index:2}
.pager a{text-decoration:none;font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--mute);transition:color .2s}
.pager a:hover{color:var(--accent)}
.foot{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;padding:20px var(--pad) 44px;
  border-top:1px solid var(--line);position:relative;z-index:2}

.rv{opacity:0;transform:translateY(15px)}
.rv.in{opacity:1;transform:none;transition:opacity .68s ease,transform .68s cubic-bezier(.2,.8,.2,1)}

/* editable-content markers — delete these once you've filled them in */
.todo{border:1px dashed var(--accent);padding:14px 16px;margin:18px 0;
  font-family:var(--mono);font-size:11.5px;line-height:1.6;color:var(--accent)}

@media(prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none}html{scroll-behavior:auto}
  .veil{display:none}
  .wipe{-webkit-mask-image:none;mask-image:none}
  .pl .art{filter:none;transform:none}.pl canvas{display:none}
  .card:hover{transform:none}.rows a.row:hover{padding-left:4px}
}

/* ============================================================
   ADDITIONS — image plates with real photos, lightbox, empties
   ============================================================ */
.pl img.art{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.pl.clickable{cursor:zoom-in}
.pl.clickable:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* lightbox */
#lb{position:fixed;inset:0;z-index:120;background:color-mix(in srgb,var(--deep) 94%,transparent);
  display:none;align-items:center;justify-content:center;padding:clamp(20px,5vw,60px)}
#lb.on{display:flex}
#lb img{max-width:100%;max-height:82vh;object-fit:contain;border:1px solid var(--line)}
#lb .cap{position:absolute;left:0;right:0;bottom:26px;text-align:center}
#lb button{position:absolute;top:20px;right:22px;background:none;border:1px solid var(--ink);
  color:var(--ink);font-family:var(--mono);font-size:11px;letter-spacing:.13em;padding:9px 14px;cursor:pointer}
#lb button:hover{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}

/* empty-state: reads deliberate, not unfinished */
.empty{border:1px dashed var(--line);padding:clamp(26px,5vw,46px);text-align:center}
.empty b{font-family:var(--disp);font-weight:600;font-size:1.1rem;display:block;margin-bottom:8px;
  font-variation-settings:"wdth" 104}
.empty p{margin:0;color:var(--mute);max-width:44ch;margin-inline:auto;font-size:.97rem}

/* availability pill */
.avail{display:inline-flex;align-items:center;gap:9px;padding:8px 15px;border:1px solid var(--line);
  border-radius:999px;font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase}
.avail i{width:6px;height:6px;border-radius:50%;background:var(--alt);flex:none}
@media(prefers-reduced-motion:no-preference){.avail i{animation:bl 2.4s infinite}}
@keyframes bl{0%,100%{opacity:1}50%{opacity:.3}}