/* =========================================================
   KOLI — portfolio  ·  minimal / editorial / edgy
   Type:  Bestie (name, brush) · Syne (display) · Space Grotesk (text)
   Colour: slightly-grey white + ink + a single vermillion accent
   ========================================================= */

@font-face{
  font-family:"Bestie";
  src:url("assets/fonts/bestie-seventy.ttf") format("truetype");
  font-display:swap;
}

:root{
  --paper:#ECECEA;        /* very white, ever-so-slightly grey */
  --paper-2:#E3E3E0;      /* slot / card tint */
  --ink:#14130F;          /* near-black */
  --ink-2:#6a6862;        /* muted */
  --rule:rgba(20,19,15,.14);
  --accent:#E85F2A;       /* the only colour — warm orange-red, used sparingly */

  --font-name:"Bestie","Syne",cursive;
  --font-head:"Syne",system-ui,sans-serif;
  --font-body:"Space Grotesk",system-ui,sans-serif;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none;}
img{display:block;}
::selection{background:var(--accent);color:var(--paper);}

/* =========================================================
   TOPBAR
   ========================================================= */
.topbar{
  position:fixed; top:0; left:0; right:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:clamp(14px,2vh,22px) clamp(18px,3vw,52px);
  opacity:0; transform:translateY(-8px);
  transition:opacity .5s ease,transform .5s ease;
  pointer-events:none; mix-blend-mode:difference; color:#fff;
}
.topbar.show{ opacity:1; transform:none; pointer-events:auto; }
.topbar .mono{ font-family:var(--font-name); font-size:1.6rem; line-height:1; }
.topbar nav{ display:flex; gap:clamp(14px,2vw,32px); }
.topbar nav a{
  font-family:var(--font-body); font-weight:400;
  font-size:.7rem; letter-spacing:.22em; text-transform:uppercase;
  opacity:.7; transition:opacity .25s;
}
.topbar nav a:hover{ opacity:1; }

/* =========================================================
   HERO
   ========================================================= */
.hero{ position:relative; height:210vh; background:#0a0a0a; }
.hero-sticky{
  position:sticky; top:0; height:100vh; overflow:hidden;
  display:flex; align-items:center; justify-content:center; background:#0a0a0a;
}
.hero-stage{
  width:100%; display:flex; align-items:center; justify-content:center;
  transform:scale(var(--art-scale,1));
  filter:blur(var(--art-blur,0px)) grayscale(var(--art-gray,0));
  will-change:transform,filter;
}
#hero-canvas{ width:100%; line-height:0; }
.sketch-canvas{ width:100% !important; height:auto !important; display:block; }
.hero-scrim{
  position:absolute; inset:0;
  background:radial-gradient(120% 90% at 50% 50%, rgba(10,10,10,.12), rgba(10,10,10,.74));
  opacity:var(--scrim-op,0); pointer-events:none;
}
.hero-name{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; pointer-events:none;
  opacity:var(--name-op,0); transform:translateY(var(--name-y,34px));
}
.koli{
  margin:0; font-family:var(--font-name); font-weight:400;
  font-size:clamp(6rem,30vw,28rem); line-height:.8; color:#F2F0EC;
  text-shadow:0 6px 70px rgba(0,0,0,.5);
}
.role{
  margin:1.6rem 0 0; font-family:var(--font-body); font-weight:300;
  font-size:clamp(.7rem,1.4vw,1rem); letter-spacing:.6em;
  text-transform:uppercase; text-indent:.6em; color:rgba(242,240,236,.9);
  transform:translateX(.5em);
}
.hero-hint{
  position:absolute; left:50%; bottom:3.4vh; transform:translateX(-50%);
  font-family:var(--font-body); font-size:.68rem; letter-spacing:.34em;
  text-transform:uppercase; color:rgba(242,240,236,.55);
  opacity:var(--hint-op,1); display:flex; align-items:center; gap:.9em; white-space:nowrap;
}
.hero-hint .dot{ width:6px;height:6px;border-radius:50%;background:var(--accent);animation:pulse 1.8s ease-in-out infinite;}
.hero-hint .hint-txt{ transition:opacity .45s ease; }
.hero-hint .hint-txt.swapping{ opacity:0; }
@keyframes pulse{0%,100%{opacity:.3;transform:scale(.7);}50%{opacity:1;transform:scale(1);}}

/* =========================================================
   SECTION SHELL + PARALLAX LINE
   ========================================================= */
.sec{ position:relative; padding:clamp(40px,8vh,120px) clamp(18px,4vw,80px) clamp(50px,9vh,130px); }
.sec-num{
  font-family:var(--font-body); font-weight:500;
  font-size:.72rem; letter-spacing:.3em; text-transform:uppercase; color:var(--ink-2);
  display:flex; align-items:center; gap:.8em; margin-bottom:1.2rem;
}
.sec-num .ln{ width:40px; height:1px; background:var(--ink); }

/* horizontal parallax line — one per section */
.pstrip{ position:relative; overflow:hidden; width:100vw; margin-left:calc(50% - 50vw); padding:.05em 0; }
.pstrip .track{
  display:inline-flex; white-space:nowrap; will-change:transform;
  font-family:var(--font-head); font-weight:800;
  font-size:clamp(4.5rem,17vw,18rem); line-height:.92; letter-spacing:-.04em;
}
.pstrip .track span{ padding:0 .12em; color:var(--ink); }
.pstrip .track span.o{ color:transparent; -webkit-text-stroke:1.5px var(--ink); }
.pstrip .track span.dot{ color:var(--accent); -webkit-text-stroke:0; }

/* =========================================================
   WORK
   ========================================================= */
.work-intro{ max-width:48ch; margin:0 0 clamp(20px,4vh,48px);
  font-family:var(--font-head); font-weight:600;
  font-size:clamp(1.3rem,2.4vw,2.2rem); line-height:1.12; letter-spacing:-.02em; }
.work-list{ max-width:1320px; margin:0 auto; }
.work-item{
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,4vw,80px);
  align-items:center; padding:clamp(34px,6vh,86px) 0; border-top:1px solid var(--rule);
}
.work-item:last-child{ border-bottom:1px solid var(--rule); }
.work-item.rev .wi-media{ order:-1; }
.wi-text .idx{
  font-family:var(--font-head); font-weight:700;
  font-size:clamp(2rem,4vw,3.4rem); line-height:1; color:var(--ink);
  -webkit-text-stroke:1.4px var(--ink); -webkit-text-fill-color:transparent;
  margin-bottom:1rem; display:block;
}
.wi-text h3{
  margin:0 0 .7rem; font-family:var(--font-head); font-weight:700;
  font-size:clamp(1.8rem,3.4vw,3rem); line-height:.98; letter-spacing:-.03em;
  transition:color .3s;
}
.work-item:hover .wi-text h3{ color:var(--accent); }
.wi-text p{
  margin:0; font-family:var(--font-body); font-weight:300;
  font-size:clamp(.95rem,1.2vw,1.08rem); line-height:1.55; color:var(--ink-2);
  max-width:42ch; text-wrap:pretty;
}
.wi-text .tagline-meta{
  margin-top:1rem; font-family:var(--font-body); font-weight:500;
  font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-2);
}
.wi-media{ position:relative; aspect-ratio:4/3; overflow:hidden; background:var(--paper-2); }
.wi-media image-slot, .wi-media img{
  width:100%; height:100%;
  transition:transform .8s cubic-bezier(.2,.7,.2,1), filter .6s ease;
  filter:grayscale(1) contrast(1.02); }
.work-item:hover .wi-media image-slot,
.work-item:hover .wi-media img{ transform:scale(1.04); filter:grayscale(0); }

/* =========================================================
   PLAY  (scattered editorial gallery · parallax)
   ========================================================= */
.play-scatter{
  position:relative; max-width:880px; margin:calc(clamp(8px,1.5vh,24px) + 90px) auto clamp(80px,11vh,150px);
  display:grid; grid-template-columns:repeat(12,1fr);
  column-gap:clamp(10px,1.4vw,24px); row-gap:clamp(12px,2.4vh,30px); align-items:start;
}
/* planned constellation: one card centred, four pushed to the corners */
.pfloat{ position:relative; display:flex; will-change:transform;
  transform:rotate(var(--r,0deg)); }
.pfloat.f1{ grid-column:5 / 9;  grid-row:1 / 2; justify-content:center;     margin-top:2vh;  --r:30deg; } /* centre top */
.pfloat.f4{ grid-column:1 / 4;  grid-row:1 / 2; justify-content:flex-start; margin-top:1vh;  --r:-4deg; } /* top-left */
.pfloat.f2{ grid-column:9 / 13; grid-row:1 / 2; justify-content:flex-end;   margin-top:0;    --r:3deg; }  /* top-right */
.pfloat.f3{ grid-column:1 / 4;  grid-row:1 / 2; justify-content:flex-start; margin-top:1vh;  --r:2deg; }  /* top-left */
.pfloat.f5{ grid-column:9 / 13; grid-row:3 / 4; justify-content:flex-end;   margin-top:1.5vh;--r:-2deg; } /* bottom-right */

/* fixed, identical tile size */
.pf-inner{ cursor:pointer; display:block;
  width:100%; max-width:clamp(160px,16.5vw,205px);
  animation:floaty var(--dur,9s) ease-in-out infinite; }
.pfloat.f1 .pf-inner{ --dur:9s;   --sway:1.4deg; --fx:7px;  animation-delay:-1s; }
/* nudge the four corner cards inward, away from the page margins */
.pfloat.f4 .pf-inner,
.pfloat.f3 .pf-inner{ margin-left:clamp(8px,1.5vw,28px); }
.pfloat.f2 .pf-inner,
.pfloat.f5 .pf-inner{ margin-right:clamp(8px,1.5vw,28px); }
.pfloat.f2 .pf-inner{ --dur:7.5s; --sway:1.1deg; --fx:-6px; animation-delay:-3.4s; }
.pfloat.f3 .pf-inner{ --dur:10s;  --sway:-1.6deg;--fx:8px;  animation-delay:-5.1s; }
.pfloat.f4 .pf-inner{ --dur:8.5s; --sway:-1.3deg;--fx:-7px; animation-delay:-2.2s; }
.pfloat.f5 .pf-inner{ --dur:9.5s; --sway:1.5deg; --fx:5px;  animation-delay:-6.6s; }
/* stronger floating: drift in x + y and sway */
@keyframes floaty{
  0%{   transform:translate(0,0)                    rotate(calc(var(--sway,1deg) * -1)); }
  50%{  transform:translate(var(--fx,6px),-22px)    rotate(var(--sway,1deg)); }
  100%{ transform:translate(0,0)                    rotate(calc(var(--sway,1deg) * -1)); }
}

/* thin-framed image — minimal, no scrim */
.pf-media{ position:relative; aspect-ratio:var(--ar,4/5); overflow:hidden;
  background:var(--paper-2); box-shadow:inset 0 0 0 1px var(--rule);
  transition:box-shadow .4s ease; }
.pf-media image-slot{ width:100%; height:100%;
  transition:transform 1.1s cubic-bezier(.2,.7,.2,1), filter .6s ease;
  filter:grayscale(1) contrast(1.02); }
.pf-inner:hover .pf-media image-slot{ transform:scale(1.05); filter:grayscale(0); }
.pf-inner:hover .pf-media{ box-shadow:inset 0 0 0 1px var(--ink); }

/* caption sits BELOW the image, editorial */
/* position:relative so the reveal-on-hover description can be taken out of
   flow — keeps every card a fixed height so hovering one never shifts others */
.pf-cap{ margin-top:.8rem; position:relative; }

/* full-width hairline closing the Play section, matching the Work rule */
.play-end-rule{ height:1px; background:var(--rule); margin-top:calc(clamp(24px,4vh,56px) + 90px); }
/* nudge the Play section header up slightly */
.play-sec .sec-num{ margin-top:0; }
.pf-cap .k{ font-family:var(--font-body); font-weight:500; font-size:.55rem;
  letter-spacing:.22em; text-transform:uppercase; color:var(--ink-2);
  display:block; margin-bottom:.4rem; }
.pf-cap h3{ margin:0; font-family:var(--font-head); font-weight:700;
  font-size:clamp(.95rem,1.25vw,1.15rem); line-height:1.05; letter-spacing:-.02em;
  transition:color .3s; }
.pf-inner:hover .pf-cap h3{ color:var(--accent); }
.pf-cap p{ position:absolute; left:0; right:0; top:100%; margin:.5rem 0 0;
  font-family:var(--font-body); font-weight:300;
  font-size:.74rem; line-height:1.55; color:var(--ink-2); max-width:100%;
  max-height:0; opacity:0; overflow:hidden;
  transition:max-height .55s cubic-bezier(.2,.7,.2,1), opacity .4s; }
.pf-inner:hover .pf-cap p{ max-height:7em; opacity:1; }

.tag-cooking{
  position:absolute; top:9px; left:9px; z-index:3;
  color:var(--ink); border:1px solid var(--ink);
  font-family:var(--font-body); font-weight:500; font-size:.5rem;
  letter-spacing:.13em; text-transform:uppercase; padding:.38em .64em; border-radius:999px;
  display:inline-flex; align-items:center; gap:.45em; background:var(--paper); white-space:nowrap;
}
.tag-cooking .steam{ width:4px;height:4px;border-radius:50%;background:var(--accent);animation:pulse 1.5s ease-in-out infinite; }
@media (prefers-reduced-motion:reduce){
  .pf-inner{ animation:none; }
}

/* =========================================================
   READ  (interactive index)
   ========================================================= */
.read-list{ max-width:1320px; margin:clamp(24px,5vh,72px) auto 0; }
.read-row{
  position:relative; display:block;
  padding:clamp(16px,2.4vh,28px) 0; border-top:1px solid var(--rule);
  overflow:hidden;
}
.read-list .read-row:last-child{ border-bottom:1px solid var(--rule); }
.rr-top{ display:flex; align-items:baseline; gap:clamp(14px,2vw,36px);
  transition:transform .45s cubic-bezier(.2,.7,.2,1); }
.rr-num{ font-family:var(--font-body); font-weight:500; font-size:.8rem;
  color:var(--ink-2); width:2.4em; flex:none; }
.rr-title{ font-family:var(--font-head); font-weight:600;
  font-size:clamp(1.4rem,3vw,2.6rem); line-height:1.02; letter-spacing:-.025em;
  flex:1 1 auto; transition:color .35s; }
.rr-arrow{ font-family:var(--font-body); font-weight:300; font-size:clamp(1.1rem,2vw,1.6rem);
  color:var(--accent); opacity:0; transform:translate(-10px,6px);
  transition:opacity .35s,transform .35s; }
.rr-desc{ max-width:60ch; margin:0; padding-left:calc(2.4em + clamp(14px,2vw,36px));
  font-family:var(--font-body); font-weight:300; font-size:.92rem; line-height:1.5; color:var(--ink-2);
  max-height:0; opacity:0; overflow:hidden;
  transition:max-height .5s cubic-bezier(.2,.7,.2,1),opacity .4s,margin .4s; }
.read-row:hover .rr-top{ transform:translateX(clamp(8px,1.5vw,26px)); }
.read-row:hover .rr-title{ color:var(--accent); }
.read-row:hover .rr-arrow{ opacity:1; transform:translate(0,0); }
.read-row.has-desc:hover .rr-desc{ max-height:120px; opacity:1; margin-top:.8rem; }

/* subscribe CTA — closes the essays index */
.read-subscribe{ max-width:1320px; margin:clamp(28px,4vh,52px) auto 0;
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap;
  gap:clamp(14px,2vw,28px); }
.read-sub-note{ font-family:var(--font-body); font-weight:300;
  font-size:clamp(.9rem,1.4vw,1.05rem); line-height:1.5; color:var(--ink-2);
  max-width:34ch; text-wrap:pretty; }
.read-sub-btn{ display:inline-flex; align-items:center; gap:.7em; flex:none;
  padding:clamp(12px,1.4vh,16px) clamp(22px,2vw,30px); border-radius:999px;
  background:var(--accent); color:#0a0a0a;
  font-family:var(--font-head); font-weight:600; letter-spacing:-.01em;
  font-size:clamp(.95rem,1.3vw,1.1rem); text-decoration:none;
  transition:transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s, background .35s; }
.read-sub-btn .rs-arrow{ font-family:var(--font-body); font-weight:300;
  transition:transform .35s cubic-bezier(.2,.7,.2,1); }
.read-sub-btn:hover{ transform:translateY(-2px);
  box-shadow:0 14px 32px rgba(232,95,42,.32); }
.read-sub-btn:hover .rs-arrow{ transform:translate(3px,-3px); }

/* =========================================================
   ABOUT  (editorial bio · the fun read)
   ========================================================= */
.about-grid{
  max-width:1320px; margin:0 auto;
  display:grid; grid-template-columns:1.45fr .85fr;
  gap:clamp(28px,5vw,84px); align-items:start;
  min-height:clamp(320px,46vh,520px);
  overflow:visible;
}
.about-sec{ overflow:visible; padding-bottom:clamp(16px,2vh,32px) !important; }
.about-sec .pstrip{ margin-bottom:0; }
.about-sec .sec-num{ margin-bottom:clamp(36px,7vh,104px); }
.about-head{
  margin:0 0 clamp(20px,3vh,36px);
  font-family:var(--font-head); font-weight:700;
  font-size:clamp(2rem,4.4vw,3.7rem); line-height:1.02; letter-spacing:-.03em;
  max-width:17ch; text-wrap:balance;
}
.about-head .script{ font-family:var(--font-name); font-weight:400; color:var(--accent);
  font-size:1.18em; line-height:.7; }
.about-body{ display:flex; flex-direction:column; gap:1.1rem; max-width:52ch; margin-top:clamp(16px,3vh,40px); }
.about-body p{
  margin:0; font-family:var(--font-body); font-weight:300;
  font-size:clamp(1rem,1.25vw,1.14rem); line-height:1.72; color:var(--ink-2);
  text-wrap:pretty;
}
.about-body strong{ font-weight:500; color:var(--ink); }
.about-body em{ font-style:italic; color:var(--ink); }
.about-fluent{ margin-top:clamp(22px,3.4vh,40px); padding-top:1.4rem;
  border-top:1px solid var(--rule); max-width:52ch; }
.about-fluent .k{ font-family:var(--font-body); font-weight:500; font-size:.6rem;
  letter-spacing:.22em; text-transform:uppercase; color:var(--ink-2);
  display:block; margin-bottom:.6rem; }
.about-fluent p{ margin:0; font-family:var(--font-head); font-weight:600;
  font-size:clamp(1.05rem,1.6vw,1.4rem); line-height:1.3; letter-spacing:-.01em; color:var(--ink);
  text-wrap:pretty; }

/* right column — portrait */
.about-side{ display:flex; flex-direction:column; gap:clamp(20px,3vh,34px); }
.about-portrait{
  position:absolute; bottom:0; right:clamp(18px,4vw,80px);
  width:clamp(320px,38vw,580px);
  transform:translateY(clamp(14px,3vh,44px));
  background:transparent; box-shadow:none; overflow:visible; aspect-ratio:unset;
}
.about-portrait img{
  width:100%; height:auto; display:block;
}

/* =========================================================
   PATH · horizontal scroll timeline (pinned · editorial · dark)
   ========================================================= */
.hscroll{ position:relative; height:340vh; background:#0a0a0a;
  /* flip the timeline palette to light by re-scoping the tokens */
  --ink:#F2F0EC;
  --ink-2:rgba(242,240,236,.6);
  --rule:rgba(242,240,236,.17);
  --paper:#0a0a0a;
}
.hscroll-pin{ position:sticky; top:0; height:100vh; overflow:hidden;
  display:block; }

/* blurred eye-pattern art, sitting behind everything */
.hs-art{ position:absolute; inset:-60px; z-index:0;
  background:#0a0a0a url("assets/Greyscale.jpg") center/cover no-repeat;
  filter:blur(17px) saturate(.9) brightness(.92);
  transform:scale(1.06); opacity:.72; }
.hs-art::after{ content:""; position:absolute; inset:60px;
  background:radial-gradient(125% 95% at 50% 50%, rgba(10,10,10,.28), rgba(10,10,10,.66)); }

/* top eyebrow + scroll cue */
.hs-topbar{ position:absolute; top:clamp(28px,6vh,64px); left:0; right:0; z-index:5;
  display:flex; align-items:center; justify-content:flex-end;
  padding:0 clamp(18px,4vw,80px); pointer-events:none; }
.hs-eyebrow{ font-family:var(--font-body); font-weight:500;
  font-size:.72rem; letter-spacing:.3em; text-transform:uppercase; color:var(--ink-2);
  display:flex; align-items:center; gap:.8em; }
.hs-eyebrow .ln{ width:40px; height:1px; background:var(--ink); }
.hs-cue{ font-family:var(--font-body); font-weight:400;
  font-size:.66rem; letter-spacing:.26em; text-transform:uppercase; color:var(--ink-2); }
.hs-cue-arr{ display:inline-block; margin-left:.3em; color:var(--accent);
  animation:hsCueArrow 1.8s ease-in-out infinite; }
@keyframes hsCueArrow{ 0%,100%{ transform:translateX(0); opacity:.6; } 50%{ transform:translateX(5px); opacity:1; } }

/* the stable horizon line + faint centre playhead */
.hs-horizon{ position:absolute; left:0; right:0; top:50%; height:1px;
  background:var(--rule); z-index:1; }

/* the moving track */
.hscroll-track{ position:absolute; top:0; left:0; height:100%; z-index:2;
  display:flex; align-items:stretch; will-change:transform;
  padding-inline:calc(50vw - var(--sw)/2);
  --sw:clamp(440px,48vw,680px);
  --cw:clamp(330px,34vw,500px);
  --gap:clamp(70px,8vh,118px);
  --gap-active:clamp(38px,4.4vh,62px);
  --safe:clamp(64px,8vh,104px);
}
.hs-stop{ position:relative; flex:0 0 var(--sw); width:var(--sw); height:100%; }

/* the orange dot — the one small accent, riding the horizon */
.hs-dot{ position:absolute; top:50%; left:50%;
  width:9px; height:9px; border-radius:50%; transform:translate(-50%,-50%) scale(.7);
  background:var(--paper); box-shadow:inset 0 0 0 2px var(--ink-2); z-index:4;
  transition:transform .5s cubic-bezier(.2,.8,.2,1), background .5s, box-shadow .5s; }
.hs-stop.is-active .hs-dot{ transform:translate(-50%,-50%) scale(1);
  background:var(--accent); box-shadow:inset 0 0 0 2px var(--accent), 0 0 0 6px rgba(232,95,42,.12); }

/* the big year, straddling the horizon */
.hs-year{ position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%); z-index:2; display:flex; align-items:baseline; gap:.32em;
  transition:opacity .5s; }
.hs-year .y{ font-family:var(--font-head); font-weight:800;
  font-size:clamp(4rem,8vw,8rem); line-height:.8; letter-spacing:-.05em;
  color:transparent; -webkit-text-stroke:1.4px var(--ink-2);
  transition:-webkit-text-stroke .55s ease, color .55s ease, transform .6s cubic-bezier(.2,.8,.2,1); }
.hs-year .t{ font-family:var(--font-body); font-weight:500;
  font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-2);
  transform:translateY(-.2em); transition:color .5s; }
.hs-stop.is-active .hs-year .y{ color:var(--ink); -webkit-text-stroke:1.4px var(--ink); }
.hs-stop:not(.is-active) .hs-year{ opacity:.5; }

/* the role/detail card, alternating above & below the horizon — frosted glass */
.hs-card{ position:absolute; left:50%; margin-left:calc(var(--cw)/-2); width:var(--cw);
  display:flex; flex-direction:column; z-index:3;
  padding:clamp(18px,1.5vw,26px) clamp(20px,1.7vw,28px);
  border-radius:14px;
  background:linear-gradient(155deg, rgba(30,28,24,.52), rgba(16,15,12,.32));
  -webkit-backdrop-filter:blur(15px) saturate(1.35);
  backdrop-filter:blur(15px) saturate(1.35);
  border:1px solid rgba(255,255,255,.17);
  box-shadow:0 22px 48px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.16);
  transition:opacity .5s ease, transform .6s cubic-bezier(.2,.8,.2,1); }
.hs-stop[data-side="up"]   .hs-card{ bottom:calc(50% + var(--gap)); }
.hs-stop[data-side="down"] .hs-card{ top:calc(50% + var(--gap)); }
/* the active card hugs the horizon so it gains room and never reaches the screen edge */
.hs-stop.is-active[data-side="up"]   .hs-card{ bottom:calc(50% + var(--gap-active)); }
.hs-stop.is-active[data-side="down"] .hs-card{ top:calc(50% + var(--gap-active)); }
.hs-stop:not(.is-active) .hs-card{ opacity:.4; }
.hs-stop[data-side="up"]:not(.is-active)   .hs-card{ transform:translateY(10px); }
.hs-stop[data-side="down"]:not(.is-active) .hs-card{ transform:translateY(-10px); }

/* thin connector from the dot to the card */
.hs-card::before{ content:""; position:absolute; left:50%; width:1px;
  background:var(--rule); transition:background .5s; }
.hs-stop[data-side="up"]   .hs-card::before{ top:100%; height:var(--gap); }
.hs-stop[data-side="down"] .hs-card::before{ bottom:100%; height:var(--gap); }
.hs-stop.is-active[data-side="up"]   .hs-card::before{ height:var(--gap-active); }
.hs-stop.is-active[data-side="down"] .hs-card::before{ height:var(--gap-active); }
.hs-stop.is-active .hs-card::before{ background:var(--ink-2); }

.hs-role{ margin:0; font-family:var(--font-head); font-weight:700;
  font-size:clamp(1.3rem,2.1vw,1.95rem); line-height:1.02; letter-spacing:-.025em; color:#FBFAF7; }
.hs-org{ margin:.5rem 0 0; font-family:var(--font-body); font-weight:400;
  font-size:clamp(.82rem,1.05vw,.96rem); letter-spacing:.02em; color:rgba(242,240,236,.86); text-wrap:pretty; }
.hs-dates{ margin:.28rem 0 0; font-family:var(--font-body); font-weight:500;
  font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); }

/* details reveal only for the active stop */
.hs-detail{ list-style:none; margin:0; padding:0; overflow:hidden;
  max-height:0; opacity:0;
  transition:max-height .6s cubic-bezier(.2,.7,.2,1), opacity .45s, margin .45s; }
.hs-stop.is-active .hs-detail{ opacity:1; margin-top:.95rem;
  /* bounded so the card always keeps a --safe margin from the top/bottom edge;
     a slim internal scroll is a graceful fallback on short viewports */
  max-height:calc(50vh - var(--gap-active) - var(--safe) - 144px);
  overflow-y:auto; overscroll-behavior:auto; padding-right:.4rem;
  scrollbar-width:thin; scrollbar-color:rgba(242,240,236,.28) transparent; }
.hs-stop.is-active .hs-detail::-webkit-scrollbar{ width:5px; }
.hs-stop.is-active .hs-detail::-webkit-scrollbar-thumb{ background:rgba(242,240,236,.26); border-radius:4px; }
.hs-stop.is-active .hs-detail::-webkit-scrollbar-track{ background:transparent; }
.hs-intro{ margin:0 0 .7em; font-family:var(--font-body); font-weight:300;
  font-size:.84rem; line-height:1.5; color:rgba(242,240,236,.9); text-wrap:pretty; }
.hs-detail li{ position:relative; padding-left:1.4em; margin:0 0 .58em;
  font-family:var(--font-body); font-weight:300; font-size:.82rem; line-height:1.48;
  color:rgba(242,240,236,.82); text-wrap:pretty; }
.hs-detail li:last-child{ margin-bottom:0; }
.hs-detail li::before{ content:""; position:absolute; left:0; top:.6em;
  width:8px; height:1.5px; background:rgba(242,240,236,.7); }
.hs-detail li b{ font-weight:600; color:rgba(242,240,236,.95); }
/* nested wins under the lead bullet */
.hs-sub{ list-style:none; margin:.5em 0 0; padding:0; }
.hs-sub li{ position:relative; padding-left:1.2em; margin:0 0 .42em;
  font-size:.79rem; line-height:1.45; color:rgba(242,240,236,.74); }
.hs-sub li:last-child{ margin-bottom:0; }
.hs-sub li::before{ content:""; position:absolute; left:0; top:.58em;
  width:4px; height:4px; border-radius:50%; background:var(--accent); }

/* footer counter — vertical, on the left */
.hs-foot{ position:absolute; left:clamp(16px,4vw,68px); top:50%; transform:translateY(-50%);
  z-index:5; display:flex; flex-direction:column; align-items:center; gap:clamp(12px,1.8vh,18px);
  font-family:var(--font-body); font-weight:500; font-size:.74rem; letter-spacing:.14em; }
.hs-foot .hs-idx{ color:var(--ink); }
.hs-foot .hs-total{ color:var(--ink-2); }
.hs-progress{ position:relative; width:1.5px; height:clamp(140px,34vh,320px);
  background:var(--rule); overflow:hidden; }
.hs-progress-fill{ position:absolute; inset:0; transform-origin:top center; transform:scaleY(0);
  background:var(--ink); }

@media (prefers-reduced-motion:reduce){
  .hs-cue-arr{ animation:none; }
}

/* =========================================================
   CONTACT  (minimal + kettle)
   ========================================================= */
.contact{
  position:relative; min-height:100vh; background:var(--paper);
  display:grid; grid-template-columns:1.05fr .95fr; align-items:center;
  padding:clamp(60px,10vh,140px) clamp(20px,5vw,90px); gap:clamp(30px,5vw,80px);
}
.contact-left .eyebrow{ font-family:var(--font-body); font-weight:500;
  font-size:.72rem; letter-spacing:.32em; text-transform:uppercase; color:var(--ink-2);
  margin-bottom:1.6rem; display:flex; align-items:center; gap:.7em; }
.contact-left .eyebrow .dot{ width:6px;height:6px;border-radius:50%;background:var(--accent); }
.contact h2{ margin:0; font-family:var(--font-head); font-weight:700;
  font-size:clamp(2.4rem,5.5vw,5rem); line-height:.98; letter-spacing:-.035em; }
.contact h2 .script{ font-family:var(--font-name); font-weight:400; color:var(--accent);
  font-size:1.15em; line-height:.7; }
.contact .lede{ margin:1.8rem 0 2.2rem; font-family:var(--font-body); font-weight:300;
  font-size:clamp(1rem,1.3vw,1.12rem); line-height:1.7; max-width:46ch; color:var(--ink-2); }
.contact .lede strong{ font-weight:500; color:var(--ink); }
.email-row{ width:min(100%,440px); margin:1.6rem auto 0; display:flex; justify-content:flex-end; }
.contact .email-big{ display:inline-flex; align-items:center; font-family:var(--font-head); font-weight:600;
  font-size:clamp(.95rem,1.5vw,1.2rem); letter-spacing:-.01em; color:var(--ink);
  padding:.62em 1.15em; border-radius:999px;
  background:linear-gradient(150deg, rgba(255,255,255,.55), rgba(255,255,255,.22));
  -webkit-backdrop-filter:blur(12px) saturate(1.5); backdrop-filter:blur(12px) saturate(1.5);
  border:1px solid rgba(255,255,255,.7);
  box-shadow:0 10px 26px rgba(20,19,15,.12), inset 0 1px 0 rgba(255,255,255,.85);
  transition:color .3s, transform .3s, box-shadow .3s; }
.contact .email-big:hover{ color:var(--accent); transform:translateY(-2px);
  box-shadow:0 16px 32px rgba(20,19,15,.16), inset 0 1px 0 rgba(255,255,255,.9); }
.contact-note{ margin-top:2rem; display:flex; align-items:center; gap:.8rem; max-width:440px; }
.contact-note input{ flex:1 1 auto; border:none; background:transparent;
  border-bottom:1.5px solid var(--rule); font-family:var(--font-body); font-weight:300;
  font-size:1rem; color:var(--ink); padding:.55rem 0; transition:border-color .3s; }
.contact-note input:focus{ outline:none; border-color:var(--accent); }
.contact-note input::placeholder{ color:var(--ink-2); opacity:.6; }
.contact-note button{ appearance:none; border:none; cursor:pointer; background:var(--ink);
  color:var(--paper); font-family:var(--font-body); font-weight:500; font-size:.74rem;
  letter-spacing:.14em; text-transform:uppercase; padding:.9em 1.3em; border-radius:999px;
  display:inline-flex; align-items:center; gap:.5em; transition:background .3s,gap .3s; white-space:nowrap; }
.contact-note button:hover{ background:var(--accent); gap:.85em; }
.contact-left{ order:2; }
.contact-kettle{ order:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:clamp(10px,2vh,28px); }
.contact-kettle .eyebrow,
.contact-kettle .contact-head{ align-self:flex-start; text-align:left; }
.contact-kettle .eyebrow.sec-num-style{
  font-family:var(--font-body); font-weight:500;
  font-size:.72rem; letter-spacing:.3em; text-transform:uppercase; color:var(--ink-2);
  display:flex; align-items:center; gap:.8em; margin-bottom:0; white-space:nowrap; }
.contact-kettle .eyebrow.sec-num-style .ln{ width:40px; height:1px; background:var(--ink); }

/* ---- the pouring tea scene ---- */
/* kettle now sits upper-LEFT with its spout pointing RIGHT (flipped to the
   other side); the cup sits lower-RIGHT under the pour and is flipped too */
.tea-scene{
  position:relative; width:min(100%,540px); aspect-ratio:1/1;
  margin-inline:auto;
  cursor:pointer; outline:none;
}
.tea-scene > *{ position:absolute; }

/* kettle: sits upper-left, NATURAL orientation so its spout points RIGHT */
.tea-kettle-wrap{
  top:2%; left:0%; width:62%;
  transform-origin:46% 78%;
  transition:transform .75s cubic-bezier(.34,1.16,.52,1);
}
.tea-kettle{
  display:block; width:100%; height:auto; transform:translateZ(0);
  filter:grayscale(.06) drop-shadow(0 18px 30px rgba(20,19,15,.22));
}

/* cup: enlarged and centred directly UNDER the spout, flipped (handle right) */
.tea-cup-wrap{ left:40%; bottom:2%; width:50%; }
.tea-cup{
  display:block; width:100%; height:auto;
  filter:drop-shadow(0 14px 20px rgba(20,19,15,.22));
  transition:transform .5s ease;
}

/* steam off the cup — rises from the liquid surface above the cup */
.tea-steam{ position:absolute; left:0%; top:-48%; width:74%; height:58%; pointer-events:none; opacity:0; overflow:visible; }
.tea-steam path{ stroke-dasharray:120; stroke-dashoffset:120; }

/* hand-drawn chai stream (full-scene coordinate overlay) */
.tea-draw{ inset:0; width:100%; height:100%; pointer-events:none; overflow:visible; }
/* translucent flat-edged tea stream — revealed by pouring downward from the spout */
.tea-draw .stream-main{
  opacity:0; transform-box:fill-box; transform-origin:top center; transform:scaleY(0);
}
.tea-draw .bub,.tea-draw .spl{ opacity:0; transform-box:fill-box; transform-origin:center; }

/* ---------- HOVER / FOCUS: pour ---------- */
/* positive rotation dips the right-hand spout down toward the cup */
.tea-scene:hover .tea-kettle-wrap,
.tea-scene:focus-visible .tea-kettle-wrap{ transform:rotate(20deg); }

.tea-scene:hover .tea-cup,
.tea-scene:focus-visible .tea-cup{ transform:translateY(-2px); }

.tea-scene:hover .stream-main,
.tea-scene:focus-visible .stream-main{
  animation:streamDraw .5s .45s ease forwards, streamPulse 1.4s 1s ease-in-out infinite;
}

/* bubbles flow down the stream */
.tea-scene:hover .bub,
.tea-scene:focus-visible .bub{ animation:bubbleFlow 1.5s 1s ease-in-out infinite; }
.tea-scene:hover .bub.b2,.tea-scene:focus-visible .bub.b2{ animation-delay:1.25s; }
.tea-scene:hover .bub.b3,.tea-scene:focus-visible .bub.b3{ animation-delay:1.55s; }
.tea-scene:hover .bub.b4,.tea-scene:focus-visible .bub.b4{ animation-delay:1.9s; }
.tea-scene:hover .bub.b5,.tea-scene:focus-visible .bub.b5{ animation-delay:2.2s; }

/* splashes leap out of the cup where the tea lands */
.tea-scene:hover .spl.s1,.tea-scene:focus-visible .spl.s1{ animation:splashL 1.1s 1.15s ease-out infinite; }
.tea-scene:hover .spl.s2,.tea-scene:focus-visible .spl.s2{ animation:splashR 1.1s 1.3s ease-out infinite; }
.tea-scene:hover .spl.s3,.tea-scene:focus-visible .spl.s3{ animation:splashL 1.1s 1.6s ease-out infinite; }
.tea-scene:hover .spl.s4,.tea-scene:focus-visible .spl.s4{ animation:splashR 1.1s 1.5s ease-out infinite; }

.tea-scene:hover .tea-steam,
.tea-scene:focus-visible .tea-steam{ animation:steamIn .9s 1.5s ease forwards; }
.tea-scene:hover .tea-steam path,
.tea-scene:focus-visible .tea-steam path{
  animation:steamRise 3.6s 1.5s ease-in-out infinite;
}
.tea-scene:hover .tea-steam path:nth-child(2),
.tea-scene:focus-visible .tea-steam path:nth-child(2){ animation-delay:2s; }

@keyframes streamDraw{ from{ transform:scaleY(0); opacity:0; } 15%{ opacity:1; } to{ transform:scaleY(1); opacity:1; } }
@keyframes streamPulse{ 0%,100%{ fill-opacity:.42; } 50%{ fill-opacity:.30; } }
@keyframes bubbleFlow{
  0%{ opacity:0; transform:translateY(6px) scale(.2); }
  25%{ opacity:1; transform:translateY(2px) scale(1.1); }
  55%{ opacity:1; transform:translateY(-3px) scale(1); }
  100%{ opacity:0; transform:translateY(-9px) scale(.35); }
}
@keyframes splashL{
  0%{ opacity:0; transform:translate(0,1px) scale(.3); }
  35%{ opacity:1; transform:translate(-3px,-3px) scale(1); }
  100%{ opacity:0; transform:translate(-5px,1px) scale(.5); }
}
@keyframes splashR{
  0%{ opacity:0; transform:translate(0,1px) scale(.3); }
  35%{ opacity:1; transform:translate(3px,-3px) scale(1); }
  100%{ opacity:0; transform:translate(5px,1px) scale(.5); }
}
@keyframes steamIn{ to{ opacity:.75; } }
@keyframes steamRise{
  0%{ stroke-dashoffset:120; opacity:0; }
  30%{ opacity:.65; }
  100%{ stroke-dashoffset:0; opacity:0; }
}

@media (prefers-reduced-motion:reduce){
  .tea-scene:hover .tea-kettle-wrap,.tea-scene:focus-visible .tea-kettle-wrap{ transform:rotate(20deg); }
  .tea-scene .stream-main,.tea-scene .stream-hi,
  .tea-scene .bub,.tea-scene .spl,.tea-scene .tea-steam,.tea-scene .tea-steam path{ animation:none; }
}

/* =========================================================
   CONTACT · glassmorphic envelope + writable letter
   ========================================================= */
.contact-hint{ margin:1.4rem 0 0; font-family:var(--font-body); font-weight:300;
  font-size:.95rem; line-height:1.6; color:var(--ink-2); max-width:34ch; }

.contact .contact-head{ margin:0 0 1.6rem; font-family:var(--font-head); font-weight:700;
  font-size:clamp(2.3rem,4.6vw,3.9rem); line-height:.9; letter-spacing:-.03em; color:var(--ink); }
.contact .contact-head .script{ font-family:var(--font-name); font-weight:400; color:var(--accent);
  font-size:1.22em; line-height:.7; }

.env-scene{ position:relative; width:min(100%,440px); margin-inline:auto;
  padding:38px 0 12px; perspective:1200px; }

/* soft colourful glow so the glass has something to refract */
.env-glow{ position:absolute; inset:0% -8% -6% -8%; z-index:0; border-radius:50%;
  background:
    radial-gradient(42% 46% at 26% 30%, rgba(232,95,42,.55), transparent 70%),
    radial-gradient(40% 44% at 78% 24%, rgba(247,185,208,.62), transparent 72%),
    radial-gradient(48% 52% at 60% 84%, rgba(255,209,150,.55), transparent 72%),
    radial-gradient(40% 46% at 16% 80%, rgba(150,196,236,.45), transparent 72%);
  filter:blur(34px) saturate(1.1); opacity:.9;
  animation:glowDrift 14s ease-in-out infinite; }
@keyframes glowDrift{ 0%,100%{ transform:translate(0,0) scale(1); } 50%{ transform:translate(-2%,2%) scale(1.05); } }

.envelope{ position:relative; width:100%; height:300px; z-index:1; margin-top:96px;
  animation:envFloat 7s ease-in-out infinite; }
@keyframes envFloat{ 0%,100%{ transform:translateY(0) rotate(-.5deg); } 50%{ transform:translateY(-9px) rotate(.5deg); } }

/* shared frosted-glass envelope material */
.env-cover,.env-flap,.env-front{
  -webkit-backdrop-filter:blur(13px) saturate(1.5);
  backdrop-filter:blur(13px) saturate(1.5);
  background:linear-gradient(150deg, rgba(255,255,255,.52), rgba(255,255,255,.20));
  pointer-events:none;
}

/* layer 3 — base paper, the same size as the envelope, sitting behind the letter */
.env-cover{ position:absolute; inset:0; z-index:0; border-radius:7px 7px 16px 16px;
  background:linear-gradient(155deg, rgba(255,255,255,.66), rgba(255,255,255,.34));
  border:1px solid rgba(255,255,255,.75);
  box-shadow:0 24px 50px rgba(20,19,15,.2), inset 0 1px 0 rgba(255,255,255,.9); }

/* the ^ flap — attached to the top of the base paper, pointing up behind the letter,
   its base as wide as the envelope */
.env-flap{ position:absolute; left:0; right:0; bottom:100%; height:122px; z-index:0;
  margin-bottom:-1px;
  clip-path:polygon(50% 0, 100% 100%, 0 100%);
  background:linear-gradient(165deg, rgba(255,255,255,.6) 0%, rgba(255,255,255,.34) 48%, rgba(244,238,232,.5) 50%, rgba(255,255,255,.3) 100%);
  filter:drop-shadow(0 -7px 14px rgba(20,19,15,.16)); }

/* the white card — tucked behind the front layer, pops up out of the V on hover */
.letter{ position:absolute; left:9%; right:9%; bottom:140px; z-index:2;
  display:flex; flex-direction:column; gap:.55rem;
  padding:20px 22px 64px; border-radius:6px 6px 4px 4px;
  background:linear-gradient(180deg,#ffffff,#fbf8f2);
  box-shadow:0 14px 30px rgba(20,19,15,.16), inset 0 1px 0 rgba(255,255,255,.9);
  transform:rotate(-.4deg); transform-origin:bottom center;
  transition:transform .55s cubic-bezier(.2,.8,.2,1), box-shadow .4s; }
.envelope:hover .letter, .letter:focus-within{
  transform:translateY(-58px) rotate(0deg);
  box-shadow:0 30px 52px rgba(20,19,15,.24), inset 0 1px 0 rgba(255,255,255,.9); }
.letter-msg{ resize:none; border:none; outline:none; background:transparent;
  font-family:var(--font-body); font-weight:300; font-size:.9rem; line-height:28px; color:var(--ink);
  min-height:84px; padding:0; margin-top:2px;
  background-image:repeating-linear-gradient(to bottom, transparent 0 27px, rgba(20,19,15,.13) 27px 28px); }
.letter-msg::placeholder{ color:var(--ink-2); opacity:.7; }
.letter-foot{ display:flex; align-items:center; gap:.7rem; margin-top:.1rem; }
.letter-from{ flex:1 1 auto; min-width:0; border:none; outline:none; background:transparent;
  border-bottom:1.5px solid var(--rule); padding:.34rem 0; color:var(--ink);
  font-family:var(--font-body); font-weight:300; font-size:.82rem; transition:border-color .3s; }
.letter-from:focus{ border-color:var(--accent); }
.letter-from::placeholder{ color:var(--ink-2); opacity:.6; }
.letter-send{ flex:0 0 auto; appearance:none; border:none; cursor:pointer; background:var(--ink); color:var(--paper);
  font-family:var(--font-body); font-weight:500; font-size:.68rem; letter-spacing:.13em; text-transform:uppercase;
  padding:.66em 1.05em; border-radius:999px; display:inline-flex; align-items:center; gap:.5em;
  transition:background .3s, transform .3s, gap .3s; }
.letter-send:hover{ background:var(--accent); transform:translateY(-2px); gap:.75em; }
.letter-send span{ font-size:.85em; }
.letter-doodle{ position:absolute; top:14px; right:16px; font-size:1rem; color:var(--accent); opacity:.55;
  transform:rotate(8deg); pointer-events:none; }

/* layer 1 — the front pocket, with a deep V opening cut into its top edge */
.env-front{ position:absolute; left:0; right:0; bottom:0; height:94%; z-index:3;
  clip-path:polygon(0 0, 50% 60%, 100% 0, 100% 100%, 0 100%);
  background:linear-gradient(160deg, rgba(255,255,255,.82), rgba(255,255,255,.5));
  border-radius:0 0 16px 16px;
  filter:drop-shadow(0 16px 26px rgba(20,19,15,.18)); }
/* a crisp pearly rim tracing the V mouth */
.env-front::before{ content:""; position:absolute; inset:0;
  clip-path:polygon(0 0, 50% 60%, 100% 0, 100% 3.5%, 50% 63.5%, 0 3.5%);
  background:rgba(255,255,255,.95); }

/* pearly-white wax seal (image), centered in the V of the envelope */
.stamp{ position:absolute; left:50%; bottom:96px; z-index:4; width:96px; height:96px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0;
  transform:translateX(-50%) rotate(-6deg); transform-origin:center; text-align:center;
  filter:drop-shadow(0 12px 22px rgba(20,19,15,.22)); }
.stamp-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain;
  pointer-events:none; user-select:none; }
/* embossed lettering — raised out of the wax, lit from top-left */
.stamp-koli{ position:relative; z-index:1; font-family:var(--font-name); font-weight:300; font-size:1.28rem; line-height:.8;
  color:#efe8db;
  text-shadow:
    0 -1px 0.4px rgba(255,255,255,1),
    0 1px 0 rgba(150,135,112,.55),
    0 2px 2px rgba(95,82,62,.5),
    0 3px 3px rgba(80,68,50,.45),
    0 4px 5px rgba(80,68,50,.4),
    0 5px 7px rgba(70,58,42,.3); }
.stamp-design{ position:relative; z-index:1; font-family:"Montserrat",system-ui,sans-serif; font-weight:500; font-size:.38rem; letter-spacing:.1em; text-transform:uppercase; margin-top:1px; transform:translateX(3px);
  color:#efe8db;
  text-shadow:
    0 -1px 0 rgba(255,255,255,1),
    0 1px 0 rgba(140,125,103,.55),
    0 1.5px 2px rgba(95,82,62,.5),
    0 2.5px 3px rgba(80,68,50,.4); }

@media (prefers-reduced-motion:reduce){
  .env-glow,.envelope{ animation:none; }
}

.colophon{ background:var(--paper); text-align:center; padding:0 0 3rem;
  font-family:var(--font-body); font-weight:300; font-size:.7rem; letter-spacing:.24em;
  text-transform:uppercase; color:var(--ink-2); }

/* =========================================================
   FIGMA-STYLE MULTIPLAYER CURSORS (whole page)
   ========================================================= */
/* hide the OS cursor once our custom cursors are live */
html.figcursor, html.figcursor *{ cursor:none !important; }

.cursors{ position:fixed; inset:0; z-index:9999; pointer-events:none;
  opacity:0; transition:opacity .3s ease; }
.cursors.on{ opacity:1; }

.fcursor{ position:fixed; left:0; top:0; will-change:transform; }
.fcursor svg{ display:block; overflow:visible;
  filter:drop-shadow(0 5px 11px rgba(20,19,15,.32)); transition:filter .25s ease; }

/* white halo when Koli's K rides over a dark section (hero / timeline) */
.fcursor.koli.on-dark svg{
  filter:drop-shadow(0 0 1px rgba(255,255,255,.95)) drop-shadow(0 0 8px rgba(255,255,255,.55)); }
.pfloat:hover .petal-img{ filter:grayscale(0) !important; }
.pfloat:hover .bastu-img{ filter:grayscale(0) !important; }
.pfloat:hover .virus-img{ filter:grayscale(0) !important; }
.fcursor.koli.fc-press .fc-disc{ transform:scale(.78); }
.fcursor.koli.on-dark .fc-disc{
  box-shadow:0 0 0 1.5px rgba(255,255,255,.55), 0 4px 14px rgba(0,0,0,.5); }

/* Koli = a circular K badge riding behind a matching pointed-triangle pointer */
.fcursor.koli .fc-disc{
  position:absolute; left:14px; top:16px; width:26px; height:26px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:#141310; box-shadow:0 6px 14px rgba(20,19,15,.4);
}
.fcursor.koli .fc-k{
  font-family:var(--font-name,cursive); font-weight:400; font-size:18px; line-height:1;
  color:#fff; transform:translateY(1px);
}
.fcursor.you{ z-index:2; }
.fcursor.koli{ z-index:1; }
/* "You" name tag riding beside the user's pointer */
.fcursor.you .fc-name{
  position:absolute; left:20px; top:20px;
  font-family:var(--font-body); font-weight:500; font-size:11px; line-height:1;
  letter-spacing:.02em; color:#fff; white-space:nowrap;
  padding:4px 8px; border-radius:7px;
  background:#E85F2A; box-shadow:0 6px 14px rgba(20,19,15,.32);
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:900px){
  .work-item{ grid-template-columns:1fr; gap:18px; }
  .work-item.rev .wi-media{ order:0; }
  .play-scatter{ display:flex; flex-direction:column; gap:clamp(34px,7vw,60px); max-width:480px; }
  .pfloat,.pfloat.f1,.pfloat.f2,.pfloat.f3,.pfloat.f4,.pfloat.f5{
    grid-column:auto; margin:0 !important; transform:none !important; }
  .pf-inner{ animation:none; }
  .pf-cap p,.pfloat.f1 .pf-cap p{ position:static; max-height:7em; opacity:.9; }
  .pfloat.f4 .pf-inner,.pfloat.f3 .pf-inner,
  .pfloat.f2 .pf-inner,.pfloat.f5 .pf-inner{ margin:0; }
  .contact{ grid-template-columns:1fr; }
  .contact-kettle{ order:-1; }
  .about-grid{ grid-template-columns:1fr; }
  .about-side{ flex-direction:column; }
  .about-portrait{ max-width:380px; }
  .koli{ font-size:clamp(5rem,32vw,10rem); }
}

/* Hero artwork on mobile: keep the artwork the same height as the viewport
   instead of shrinking to a thin strip. The canvas fills the height and its
   sides overflow, cropped by .hero-sticky's overflow:hidden. The artwork
   itself is unchanged (not flipped/scaled) — p5 still maps the pointer into
   the canvas, so the eyes keep tracking on touch/drag. */
@media (max-width:900px){
  .hero-stage{ width:100%; height:100%; }
  #hero-canvas{ width:100%; height:100%; display:flex; align-items:center; justify-content:center; }
  .sketch-canvas{ width:auto !important; height:100% !important; max-width:none !important; }
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .hero-hint .dot,.tag-cooking .steam{ animation:none; }
}

/* =========================================================
   CONTACT · calendar booking widget
   ========================================================= */
.contact-left{ position:relative; }

.cal-row{ width:min(100%,440px); margin:.7rem auto 0; display:flex; justify-content:flex-end; }
.cal-pill .cal-arr{
  font-family:var(--font-body); font-weight:300;
  transition:transform .35s cubic-bezier(.2,.7,.2,1);
}
.cal-pill:hover .cal-arr{ transform:translate(3px,-3px); }
.cal-link{
  position:absolute;
  left: calc(-1 * clamp(70px, 8vw, 110px));
  bottom: clamp(40px, 7vh, 80px);
  top: auto;
  width: clamp(260px, 30vw, 380px);
  display:block;
  transform: rotate(-8deg);
  transform-origin: bottom right;
  filter: drop-shadow(0 20px 40px rgba(20,19,15,.45)) drop-shadow(0 4px 10px rgba(20,19,15,.22));
  transition:
    transform .45s cubic-bezier(.2,.8,.2,1),
    filter .35s ease;
  z-index:10;
}
.cal-float{
  animation: calFloat 6s ease-in-out infinite;
  will-change: transform;
}
.cal-link:hover{
  transform: rotate(-15deg) scale(1.07);
  filter: drop-shadow(0 26px 50px rgba(20,19,15,.55)) drop-shadow(0 6px 14px rgba(20,19,15,.28));
}
.cal-img{
  width:100%; height:auto; display:block;
  border-radius:8px;
  filter:grayscale(1) contrast(1.02);
}
@keyframes calFloat{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-11px); }
}