/* Isha's portfolio: shared design system
   STIX Two Text, warm paper + ink + deep green (hers).
   Finish ported from button-lab/showcase.html: surfaces drawn with light,
   lit buttons, spring motion. */

:root{
  --paper:#FFFEFC;   /* page: a warm off-white, kept light so the grain reads as texture, not grey */
  --cell:#F8F6F0;    /* section panel, one step off the page */
  --card:#FFFFFE;    /* lit surfaces */
  --ink:#1C1B17;
  --muted:#79746A;
  --faint:#A49E90;
  --accent:#2A5B4D;

  --track:rgba(28,27,23,.05);
  --tint:rgba(28,27,23,.06);
  --line:rgba(28,27,23,.065);   /* every hairline on the site: dividers, row rules, nav and footer edges */
  --cellb:rgba(28,27,23,.05);

  /* surfaces are drawn with light, not lines */
  --ring:0 0 0 .5px rgba(28,27,23,.10);
  --lift:0 1px 1px rgba(28,27,23,.03), 0 2px 4px rgba(28,27,23,.04), 0 8px 20px -6px rgba(28,27,23,.08);
  --hi:inset 0 1px 0 rgba(255,255,255,.9);

  --btn-bg:linear-gradient(180deg,#35705F 0%,#234C40 100%);
  --btn-fg:#FFFFFF;
  --btn-shadow:inset 0 1px 0 rgba(255,255,255,.16), 0 0 0 .5px #1C3D33, 0 1px 2px rgba(28,27,23,.25);
  --btn2-bg:linear-gradient(180deg,rgba(255,255,255,.9) 0%,rgba(255,255,255,.4) 100%);
  --btn2-shadow:0 0 0 .5px rgba(28,27,23,.14), 0 1px 1px rgba(28,27,23,.04);

  --nav-h:64px;
  --ease-out:cubic-bezier(.23,1,.32,1);
  --spring:var(--ease-out);     /* replaced with a real spring by JS */
  --spring-ms:460ms;
  color-scheme:light;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  background-color:var(--paper);background-image:var(--grain-img);background-size:240px auto;
  background-repeat:repeat;background-attachment:fixed;background-blend-mode:multiply;color:var(--ink);
  font-family:'STIX Two Text',Georgia,serif;
  font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
::selection{background:#CFE5D9;color:#14523F}
/* pictures never get selected (doodles.js also keeps a drag-select inside its column) */
.case-media, .clip-media, .thumb, img{-webkit-user-select:none;user-select:none}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid color-mix(in srgb,var(--ink) 60%,transparent);outline-offset:2px}
.wrap{max-width:1160px;margin:0 auto;padding:0 28px}

/* navbar */
header{
  position:sticky;top:0;z-index:20;
  background-color:var(--paper);background-image:var(--grain-img);background-size:240px auto;
  background-repeat:repeat;background-attachment:fixed;background-blend-mode:multiply;
  box-shadow:inset 0 -1px 0 var(--line);height:var(--nav-h);
  display:flex;align-items:center;
}
.nav{display:flex;align-items:center;justify-content:space-between;width:100%}
.wm{font-size:21px;font-weight:600;letter-spacing:-.005em}
.nav-r{display:flex;align-items:center;gap:24px;font-size:16.5px}
.nav-r a{color:var(--muted);transition:color 150ms ease}
.nav-r a:hover{color:var(--ink)}
.nav-r a.on{
  color:var(--ink);
  text-decoration:underline;text-underline-offset:6px;
  text-decoration-thickness:1.5px;text-decoration-color:var(--accent);
}
.ul{
  text-decoration:underline;text-underline-offset:5px;
  text-decoration-thickness:1px;text-decoration-color:var(--faint);
  transition:text-decoration-color 150ms ease, color 150ms ease;
}
.ul:hover{color:var(--accent);text-decoration-color:var(--accent)}

/* buttons: lit, springy */
.btn{
  height:32px;padding:0 14px;
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  border:0;border-radius:9px;
  font-family:system-ui,sans-serif;font-size:13px;font-weight:600;letter-spacing:-.005em;
  cursor:pointer;
  transition:transform 150ms var(--ease-out), filter 200ms ease, opacity 200ms ease;
}
.btn:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){.btn:hover{filter:brightness(1.07)}}
.btn-primary{background:var(--btn-bg);color:var(--btn-fg) !important;box-shadow:var(--btn-shadow)}
.icon-btn{
  width:32px;height:32px;border-radius:9px;border:0;
  background:var(--btn2-bg);box-shadow:var(--btn2-shadow);color:var(--faint);
  display:grid;place-items:center;cursor:pointer;
  transition:color 150ms ease, transform 150ms var(--ease-out);
}
@media (hover:hover) and (pointer:fine){.icon-btn:hover{color:var(--ink)}}
.icon-btn:active{transform:scale(.94)}

/* split layout (landing) */
.layout{display:grid;grid-template-columns:minmax(300px,5fr) 7fr;gap:42px;align-items:start}
.left{
  position:sticky;top:var(--nav-h);
  height:calc(100dvh - var(--nav-h));
  display:flex;flex-direction:column;
  padding:48px 0 40px;
}
.left > div:first-child{flex:0 1 auto;min-height:0;margin:auto 0;padding:12px 0}
.left > div:last-child{flex:0 0 auto;margin-top:18px}
.photo{
  width:140px;height:140px;border-radius:50%;overflow:hidden;position:relative;
  margin-bottom:28px;background:var(--card);
  box-shadow:var(--ring), var(--lift);
}
.photo img{width:100%;height:100%;object-fit:cover}
.photo.missing{box-shadow:none;border:1px dashed color-mix(in srgb,var(--faint) 70%,transparent)}
.photo.missing img{display:none}
.photo.missing::after{
  content:'Your photo';position:absolute;inset:0;display:flex;
  align-items:center;justify-content:center;font-size:13px;color:var(--faint);
}
.statement{
  font-size:clamp(29px,2.8vw,40px);font-weight:400;line-height:1.22;
  letter-spacing:-.005em;max-width:17ch;
}
.left .bio{margin-top:20px;color:var(--muted);font-size:16.5px;max-width:34ch}
.left .bio p+p{margin-top:10px}
.left .bio b{color:var(--ink);font-weight:500}
.creds{display:flex;gap:18px;flex-wrap:wrap;font-size:16px}

/* right column (landing) */
.right{padding:60px 0 40px 42px;min-width:0}
/* the column divider rides on the sticky column so it always starts clear of the navbar */
.left::after{content:'';position:absolute;top:32px;bottom:32px;right:-42px;width:1px;background:var(--line);pointer-events:none}
.right > .sec:last-of-type{margin-bottom:56px}
h2{font-size:clamp(22px,1.8vw,26px);font-weight:400;line-height:1.15;letter-spacing:-.01em;color:var(--ink)}
.sec-note{margin-top:10px;color:var(--muted);font-size:16px}
.sec{margin-bottom:104px;scroll-margin-top:calc(var(--nav-h) + 32px)}
.list{margin-top:20px;box-shadow:inset 0 1px 0 var(--line)}

/* rows */
.row{display:block;padding:22px 0;box-shadow:inset 0 -1px 0 var(--line)}
.row-top{display:flex;align-items:baseline;gap:14px;min-width:0}
.row-top h3{font-size:21px;font-weight:500;letter-spacing:-.005em}
.row-top .meta{margin-left:auto;color:var(--faint);font-size:15px;flex-shrink:0}
.meta.live{color:var(--accent);font-weight:500}
.row .line{margin-top:5px;color:var(--muted);font-size:16px;max-width:52ch}
.row .why{margin-top:3px;color:var(--faint);font-size:15px;max-width:52ch}
a.row{transition:color 150ms ease}
a.row:hover h3{color:var(--accent)}

/* work slots: quieter until real case studies land */
.slot{padding:17px 0}
.slot h3{color:var(--faint);font-weight:400;font-size:18px}
.slot .line{font-size:15px;margin-top:3px}

/* inline project card: a lit surface, not an outlined box */
.thumb{
  margin-top:16px;border-radius:16px;overflow:hidden;
  width:min(460px,100%);background:var(--card);
  box-shadow:var(--ring), var(--lift), var(--hi);
}
.thumb img{
  width:100%;aspect-ratio:1200/630;object-fit:cover;
  transition:transform var(--spring-ms) var(--spring);
}
a.row:hover .thumb img{transform:scale(1.015)}
/* single-column subpages */
.col{max-width:760px;margin:0 auto;padding:64px 28px 110px}
.col h1{font-size:clamp(34px,3.6vw,44px);font-weight:400;letter-spacing:-.005em;line-height:1.1}
.col .lead{margin-top:12px;color:var(--muted);font-size:17.5px;max-width:52ch}

.credit{color:var(--faint);font-size:15px}

/* reveal */
.rv{opacity:0;transform:translateY(12px)}
.rv.in{opacity:1;transform:none;transition:opacity .6s var(--ease-out),transform .6s var(--ease-out)}
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none}
}

/* ---------- paper grain: part of the page's paper, so components and images sit on top of it clean ---------- */
:root{--grain-img:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.3'/%3E%3C/svg%3E")}

/* ---------- custom cursor ---------- */
.has-dot, .has-dot a, .has-dot button{cursor:none}
#cursor-dot{
  position:fixed;left:0;top:0;z-index:90;pointer-events:none;
  transform:translate(-100px,-100px);opacity:0;
}
#cursor-dot.show{opacity:1}
#cursor-dot .c{
  display:block;width:11px;height:11px;border-radius:50%;
  background:var(--accent);margin:-5.5px 0 0 -5.5px;
  transition:transform var(--spring-ms) var(--spring), opacity 250ms ease;
}
#cursor-dot.big .c{transform:scale(2.7);opacity:.3}
#cursor-dot.press .c{transform:scale(.7)}
#cursor-dot.big.press .c{transform:scale(2.2);opacity:.4}
/* labelled state: the dot opens into a pill that reads like a button */
#cursor-dot .cl{
  position:absolute;left:-15px;top:-15px;height:30px;padding:0 14px;
  display:flex;align-items:center;white-space:nowrap;
  border-radius:999px;background:var(--btn-bg);color:#FCFBF7;box-shadow:var(--btn-shadow);
  font-size:14px;line-height:1;
  transform-origin:15px 15px;transform:scale(.3);opacity:0;
  transition:transform var(--spring-ms) var(--spring), opacity 140ms ease;
}
#cursor-dot.labelled .cl{transform:none;opacity:1}
#cursor-dot.labelled .c{transform:scale(0);opacity:0}
#cursor-dot.labelled.press .cl{transform:scale(.96)}
/* captions (About) read as a note, not a button */
#cursor-dot.note .cl{background:var(--card);color:var(--ink);box-shadow:var(--ring), var(--lift)}
/* inside the live showcase the system cursor stays (it's another page), so the label trails beside it instead */
#cursor-dot.tip .c{transform:scale(0);opacity:0}
#cursor-dot.tip .cl{left:14px;top:18px;transform-origin:0 0}
/* ---------- the character ---------- */
.muse-zone{margin-bottom:28px;position:relative;width:max-content}
/* the character's greeting bubble */
.greet{
  position:absolute;left:calc(100% + 10px);top:22px;white-space:nowrap;
  padding:8px 14px;border-radius:14px 14px 14px 4px;background:var(--card);
  box-shadow:var(--ring), var(--lift), var(--hi);
  font-size:15px;color:var(--ink);
  opacity:0;transform:translateY(6px) scale(.92);transform-origin:left bottom;pointer-events:none;
  transition:opacity 180ms ease, transform var(--spring-ms) var(--spring);
}
.greet.on{opacity:1;transform:none}
.greet.out{opacity:0;transform:translateY(-4px) scale(.97);transition:opacity 220ms ease, transform 220ms var(--ease-out)}
/* Isha's local time, a quiet line under the bio */
/* bottom line of the left column: contact links, and Isha's local time on the right */
.foot-line{display:flex;align-items:baseline;justify-content:space-between;gap:10px 24px;flex-wrap:wrap}
.local-time{font-size:15px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.local-time .lt-t{color:var(--ink)}
.char{position:relative;height:232px;aspect-ratio:258/420}
.cf{
  position:absolute;inset:0;background:var(--ink);
  -webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat;
  opacity:0;transform:scale(.94);
  transition:opacity 160ms ease, transform var(--spring-ms) var(--spring);
}
.cf.on{opacity:1;transform:none}

/* ---------- end-of-scroll card ---------- */
.endcard{
  position:relative;
  margin-top:0;padding:40px 0 0;
}
.endcard .bye{font-size:20px;font-weight:500;color:var(--ink)}
.endcard .credit{margin-top:0;font-size:15.5px;color:var(--muted)}

/* ---------- the dump: a quiet panel holding a draggable pile ---------- */
.dump{
  position:relative;margin-top:70px;height:264px;
  border-radius:28px;background:var(--cell);
  box-shadow:inset 0 0 0 1px var(--cellb);
}
.dump-note{
  position:absolute;left:22px;top:18px;
  font-size:15.5px;color:var(--faint);pointer-events:none;
}
.dmp{
  position:absolute;cursor:grab;touch-action:none;user-select:none;
  transform:rotate(var(--r,0deg));will-change:left,top;z-index:14;
}
.dmp:active{cursor:grabbing;z-index:16}
.dmp.ph{
  background:#fff;padding:6px 6px 18px;
  box-shadow:0 0 0 .5px rgba(28,27,23,.12), var(--lift);
}
.dmp.ph img{width:96px;height:96px;object-fit:cover;pointer-events:none}
.dmp.stk-item svg{width:54px;height:54px;display:block;overflow:visible;pointer-events:none;
  filter:drop-shadow(0 2px 5px rgba(28,27,23,.18))}
.stk-base{fill:#fff;stroke:#DAD5C8;stroke-width:1}
.dmp .stk-tile{
  display:grid;place-items:center;width:54px;height:54px;background:#fff;border-radius:12px;
  box-shadow:inset 0 0 0 1px #DAD5C8;pointer-events:none;
  filter:drop-shadow(0 2px 5px rgba(28,27,23,.18));
}
.dmp .stk-tile img{width:32px;height:46px;object-fit:contain}
.stk-ink{stroke:#1C1B17;stroke-width:2.6;fill:none;stroke-linecap:round;stroke-linejoin:round}
.dump-reset{
  position:absolute;right:22px;top:18px;background:none;border:0;padding:0;cursor:pointer;
  font-family:inherit;font-size:15px;color:var(--faint);
  text-decoration:underline;text-underline-offset:3px;
  transition:color 150ms ease;
}
.dump-reset:hover{color:var(--accent)}

/* visitor doodles from earlier sessions still render in the dump */
.dmp.dd img{width:112px;height:72px;object-fit:contain;background:#fff}
@media (prefers-reduced-motion:no-preference){
  .dmp.pop{animation:dmp-pop var(--spring-ms) var(--spring)}
}
@keyframes dmp-pop{
  0%{transform:rotate(var(--r,0deg)) scale(.3) translateY(-36px);opacity:0}
  100%{transform:rotate(var(--r,0deg)) scale(1);opacity:1}
}

/* default pile positions */
.dmp[data-id="starry"]{left:4%;top:56px;--r:-6deg}
.dmp[data-id="weave"]{left:17%;top:104px;--r:4deg}
.dmp[data-id="bedroom"]{left:31%;top:62px;--r:-3deg}
.dmp[data-id="journal"]{left:46%;top:128px;--r:-9deg}
.dmp[data-id="chai"]{left:52%;top:64px;--r:6deg}
.dmp[data-id="train"]{left:62%;top:118px;--r:-7deg}
.dmp[data-id="me"]{left:71%;top:56px;--r:5deg}
.dmp[data-id="can"]{left:80%;top:108px;--r:-4deg}
.dmp[data-id="lipstick"]{left:89%;top:60px;--r:9deg}

/* ---------- contact footer: at the end of every page, reached by scrolling (Rachel-style, not pinned) ---------- */
.creds-bar{box-shadow:inset 0 1px 0 var(--line);padding:18px 0 30px}
.cb-in{display:flex;align-items:baseline;justify-content:space-between;gap:10px 24px;flex-wrap:wrap}
/* short pages still end at the bottom of the screen, not halfway up */
main.col{min-height:calc(100dvh - var(--nav-h) - 72px)}
/* the home page already has these links in its sticky left column */
.cb-credit{font-size:15px;color:var(--muted)}
/* the home page shows its credit in the right column instead */
body.home .cb-credit{display:none}
@media (min-width:881px){body.home .creds-bar{display:none}}
@media (max-width:880px){.creds-bar{padding:14px 0 22px}}
@media (max-width:560px){.creds-bar .local-time{display:none}.cb-credit{flex-basis:100%;order:2}}
@media (min-width:881px) and (max-height:900px){
  .left{padding:34px 0 30px}
  .right{padding-bottom:30px}
  .photo{width:106px;height:106px;margin-bottom:18px}
  .statement{font-size:clamp(25px,2.3vw,32px)}
  .left .bio{margin-top:14px;font-size:15.5px}
}
@media (min-width:881px) and (max-height:780px){
  .muse-zone{margin-bottom:18px}
  .char{height:168px}
}
@media (min-width:881px) and (max-height:620px){
  .muse-zone{display:none}
}

/* mobile */
@media (max-width:880px){
  .layout{grid-template-columns:1fr;gap:0}
  .left{position:static;height:auto;padding:52px 0 36px}
  .right{padding:8px 0 70px}
  .left::after{display:none}
  .nav-r{gap:14px;font-size:15px;overflow-x:auto}
  .photo{width:116px;height:116px}
  .dump{height:300px}
}

/* reduced motion: fades stay, movement goes */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:120ms !important;transition-delay:0ms !important}
}

/* ---------- work index page ---------- */
/* a tinted groove with a lit pill sliding in it, same build as the showcase's segmented controls */
.wtabs{position:relative;display:inline-flex;margin-top:34px;padding:3px;border-radius:999px;background:rgba(28,27,23,.055)}
.wtabs-pill{
  position:absolute;top:3px;bottom:3px;left:0;border-radius:999px;background:var(--card);
  box-shadow:0 0 0 .5px rgba(28,27,23,.08), 0 1px 2px rgba(28,27,23,.10), 0 2px 6px -2px rgba(28,27,23,.08), var(--hi);
  transition:transform var(--spring-ms) var(--spring), width var(--spring-ms) var(--spring);
}
.wtabs button{
  position:relative;z-index:1;height:38px;padding:4px 18px 0;border:0;border-radius:999px;background:transparent;
  box-sizing:border-box;display:inline-flex;align-items:center;   /* STIX sits high in its line box; this padding centres the ink */
  font:inherit;font-size:16px;color:var(--muted);cursor:pointer;transition:color 180ms ease;
}
.wtabs button[aria-selected="true"]{color:var(--ink)}
@media (hover:hover) and (pointer:fine){.wtabs button:hover{color:var(--ink)}}
.wtabs button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.wpanel{margin-top:30px}
.wpanel[hidden]{display:none}
.wpanel .sec-note{margin-top:0}
.wpanel .cases{margin-top:0}
/* the showcase lays out its own centred column, so its panel breaks out wider than the text column */
.wpanel-wide{margin-inline:calc(50% - min(550px, 50vw - 28px))}
.wpanel-wide .sec-note{max-width:704px;margin-inline:auto}
.wpanel-wide .showcase-wrap{margin-top:18px}

/* home: view-all row */
.viewall h3{
  display:flex;align-items:center;justify-content:flex-end;gap:7px;
  color:var(--accent);font-size:19px;font-weight:400;
}
.viewall h3 svg{width:15px;height:15px;flex:none;transition:transform 200ms var(--ease-out)}
@media (hover:hover) and (pointer:fine){a.viewall:hover h3 svg{transform:translateX(3px)}}

/* ---------- interaction clips (home) ---------- */
.clips{margin-top:22px;display:grid;grid-template-columns:1fr 1fr;gap:22px 18px}
.clip{display:block}
.clip-media{
  position:relative;aspect-ratio:4/3;border-radius:16px;overflow:hidden;
  background:var(--paper);
  display:grid;place-items:center;
  transition:transform var(--spring-ms) var(--spring);
}
.clip-media::after{
  content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(28,27,23,.11);
}
.clip-media span{font-size:13.5px;color:var(--faint)}
.clip-media video,.clip-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.clip-cap{margin-top:9px;font-size:16px;color:var(--ink);transition:color 150ms ease}
@media (hover:hover) and (pointer:fine){
  .clip:hover .clip-media{transform:scale(1.015)}
  .clip:hover .clip-cap{color:var(--accent)}
}
.clip:active .clip-media{transform:scale(.985)}
@media (max-width:560px){.clips{grid-template-columns:1fr}}

/* the pile on About */
.loves-pile{margin-top:52px}
.loves-pile .dump{margin-top:0}

/* ---------- case study cards (home) ---------- */
.cases{margin-top:28px;display:grid;gap:44px}
.case{display:block}
.case-media{
  position:relative;aspect-ratio:16/10;border-radius:16px;overflow:hidden;
  background:var(--paper);display:grid;place-items:center;
  transition:transform var(--spring-ms) var(--spring);
}
.case-media::after{
  content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(28,27,23,.11);
}
.case-media span{font-size:14px;color:var(--faint)}
.case-media img,.case-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.case-top{margin-top:16px;display:flex;align-items:baseline;gap:16px}
.case-top h3{font-size:21px;font-weight:500;letter-spacing:-.005em;line-height:1.3;transition:color 150ms ease}
.case-top .meta{margin-left:auto;color:var(--faint);font-size:15px;flex-shrink:0}
.case .line{margin-top:5px;color:var(--muted);font-size:16px}
@media (hover:hover) and (pointer:fine){
  .case:hover .case-media{transform:scale(1.01)}
  .case:hover h3{color:var(--accent)}
}
.case:active .case-media{transform:scale(.99)}

/* ---------- section index: where you are, and what is below ---------- */
.pg-secs{
  position:fixed;right:28px;top:50%;transform:translateY(-50%);z-index:21;
  display:flex;flex-direction:column;gap:10px;
}
.pg-secs a{
  display:flex;align-items:center;gap:9px;font-size:14px;color:var(--faint);
  transition:color 150ms ease;
}
.pg-secs a::before{
  content:'';width:6px;height:6px;border-radius:50%;background:var(--accent);
  transform:scale(0);transition:transform var(--spring-ms) var(--spring);
}
.pg-secs a.on{color:var(--ink)}
.pg-secs a.on::before{transform:scale(1)}
@media (hover:hover) and (pointer:fine){.pg-secs a:hover{color:var(--ink)}}
@media (max-width:1320px){.pg-secs{display:none}}
/* compact version: the current section beside the wordmark, where the side index has no room */
.pg-crumb{display:none;align-items:center;gap:14px;margin:0 auto 0 16px;font-size:15px;color:var(--muted)}
.pg-crumb::before{content:'';width:1px;height:16px;background:rgba(28,27,23,.18)}
.pg-crumb-t{display:inline-block}
@media (min-width:881px) and (max-width:1320px){.pg-crumb{display:flex}}


/* ---------- desk lamp: warm light that follows the cursor (doodles.js) ---------- */
#lamp{
  position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:0;transition:opacity 500ms ease;
  background:radial-gradient(circle 280px at var(--lx,50%) var(--ly,50%), rgba(255,244,214,.5), transparent 100%);
}
#lamp::after{
  content:'';position:absolute;inset:0;background-image:var(--grain-img);background-size:240px auto;background-attachment:fixed;
  mix-blend-mode:multiply;opacity:.55;
  -webkit-mask-image:radial-gradient(circle 240px at var(--lx,50%) var(--ly,50%), #000, transparent 100%);
          mask-image:radial-gradient(circle 240px at var(--lx,50%) var(--ly,50%), #000, transparent 100%);
}
#lamp.on{opacity:1}