/* ═══════════════════════════════════════════════════════════
   Srushti Chavan — scrapbook
   Palette lifted straight from her own favicon + avatar:
   #993434 script red · #e4f2fe sky · #cde99f pistachio
   #fd9246 marigold · #f9eec0 butter
   ═══════════════════════════════════════════════════════════ */

:root{
  /* ink + ground */
  --sky:        #e6f0f9;
  --sky-deep:   #cbe1f2;
  --paper:      #fdfaf5;
  --ink:        #241e1c;
  --ink-soft:   #5d534e;
  --ink-faint:  #8e847e;

  /* the five */
  --cherry:     #a03038;
  --cherry-dk:  #7c2028;
  --marigold:   #f0913f;
  --pistachio:  #c9e6a0;
  --pistachio-dk:#a3ce6f;
  --butter:     #f8e6b4;
  --blush:      #edaeb6;

  --line:       rgba(36,30,28,.14);

  --display: 'Lora', Georgia, 'Times New Roman', serif;
  --body:    'Mulish', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --hand:    'Reenie Beanie', 'Bradley Hand', cursive;

  --wrap: 1180px;
  --ease-out: cubic-bezier(.16,.84,.32,1);
  --spring:   cubic-bezier(.34,1.56,.64,1);

  --torn: polygon(0% 1.8%, 4% .4%, 9% 2.2%, 14% .6%, 20% 2.4%, 26% .8%, 32% 2.5%, 39% .9%, 46% 2.4%, 53% .7%, 60% 2.3%, 67% .9%, 74% 2.5%, 81% .8%, 88% 2.2%, 94% .6%, 100% 2%, 100% 98%, 95% 99.6%, 89% 97.7%, 83% 99.4%, 76% 97.6%, 69% 99.3%, 62% 97.5%, 55% 99.2%, 47% 97.7%, 40% 99.4%, 33% 97.6%, 26% 99.3%, 19% 97.5%, 12% 99.2%, 6% 97.7%, 0% 99.4%);
  --torn-b: polygon(0% 2.4%, 6% .5%, 12% 2.6%, 18% .7%, 25% 2.3%, 31% .6%, 38% 2.6%, 45% .8%, 52% 2.2%, 59% .5%, 66% 2.5%, 73% .7%, 80% 2.4%, 87% .6%, 93% 2.3%, 100% .8%, 100% 99.2%, 94% 97.5%, 87% 99.4%, 80% 97.6%, 72% 99.3%, 65% 97.4%, 57% 99.2%, 50% 97.6%, 42% 99.4%, 35% 97.5%, 27% 99.3%, 20% 97.6%, 13% 99.2%, 6% 97.4%, 0% 99.5%);
}

/* ── one transform system ──────────────────────────────
   Reveal (--ty), drag (--dx/--dy), 3D depth (--depth),
   rotation (--r) and lift (--s) all compose into a single
   transform so nothing overwrites anything else.
   ─────────────────────────────────────────────────────── */
@property --dx{syntax:'<length>';inherits:false;initial-value:0px}
@property --dy{syntax:'<length>';inherits:false;initial-value:0px}
@property --ty{syntax:'<length>';inherits:false;initial-value:0px}
@property --r{syntax:'<angle>';inherits:false;initial-value:0deg}
@property --s{syntax:'<number>';inherits:false;initial-value:1}
@property --depth{syntax:'<number>';inherits:false;initial-value:0}

[data-reveal],[data-drag],.layer,.tf{
  transform:
    translate3d(var(--dx), calc(var(--dy) + var(--ty)), calc(var(--depth) * 1px))
    rotate(var(--r))
    scale(var(--s));
}

/* ── reset ─────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--body);
  font-size:clamp(1rem,.96rem + .2vw,1.075rem);
  line-height:1.7;
  color:var(--ink);
  background-color:var(--sky);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='74' height='74'%3E%3Cg fill='none' stroke='%2390b6d4' stroke-width='1' stroke-linecap='round' opacity='.5'%3E%3Cpath d='M0 1.6C18 3.2 36 .2 55 1.8S74 3 74 1.4'/%3E%3Cpath d='M1.6 0C3.2 18 .2 36 1.8 55S3 74 1.4 74'/%3E%3C/g%3E%3C/svg%3E");
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
h1,h2,h3{margin:0;font-family:var(--display);font-weight:600;line-height:1.06;letter-spacing:-.015em}
p{margin:0 0 1.05em}
a{color:inherit}
ul,ol{margin:0;padding:0;list-style:none}
::selection{background:var(--butter);color:var(--ink)}

:focus-visible{
  outline:3px solid var(--cherry);
  outline-offset:3px;
  border-radius:2px;
}

.wrap{width:min(100% - 2.6rem,var(--wrap));margin-inline:auto}
.sprite{position:absolute;width:0;height:0;overflow:hidden}

/* ── ambient atmosphere ────────────────────────────────── */
#ambient{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:1;opacity:.85}
.grain{
  position:fixed;inset:-50%;z-index:2;pointer-events:none;
  opacity:.09;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
}
main{position:relative;z-index:3}

/* ── page-load curtain ─────────────────────────────────── */
.curtain{
  position:fixed;inset:0;z-index:200;
  background:var(--cherry);
  display:grid;place-items:center;
  transition:transform 1s var(--ease-out) .15s;
  /* if JS failsafe */
  animation:curtain-failsafe 0s linear 3.5s forwards;
}
@keyframes curtain-failsafe{to{transform:translateY(-101%);visibility:hidden}}
.curtain__mark{
  font-family:var(--hand);
  font-size:clamp(4rem,14vw,10rem);
  color:var(--butter);
  line-height:1;
  opacity:0;transform:translateY(.3em) rotate(-3deg);
  transition:opacity .5s ease,transform .7s var(--ease-out);
}
.is-loading .curtain__mark{opacity:1;transform:translateY(0) rotate(-3deg)}
.curtain.is-up{transform:translateY(-101%)}
.curtain.is-up .curtain__mark{opacity:0;transition-duration:.3s}
.curtain.is-gone{display:none}

/* ── nav (zarieus.com inspired) ────────────────────────── */
.topbar{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  padding:1.1rem clamp(1.2rem, 4vw, 3.5rem);
  transition:background .4s ease, backdrop-filter .4s ease, padding .4s ease, box-shadow .4s ease;
}
.topbar.is-stuck{
  background:linear-gradient(180deg, rgba(253,250,245,.94) 0%, rgba(253,250,245,.75) 80%, transparent 100%);
  backdrop-filter:blur(14px) saturate(1.1);
  -webkit-backdrop-filter:blur(14px) saturate(1.1);
  box-shadow:0 1px 0 var(--line), 0 10px 26px -22px rgba(36,30,28,.4);
  padding-block:.65rem;
}
.topbar__left{
  flex:1;display:flex;justify-content:flex-start;align-items:center;
}
.topbar__center{
  flex:1;display:flex;justify-content:center;align-items:center;
  opacity:0;transform:translateY(-8px);
  transition:opacity .35s ease, transform .35s var(--spring);
  pointer-events:none;
}
.topbar.is-stuck .topbar__center{
  opacity:1;transform:translateY(0);
  pointer-events:auto;
}
.topbar__mark{
  font-family:var(--hand);
  font-size:clamp(2.1rem,3.4vw,2.6rem);
  color:var(--cherry);text-decoration:none;
  line-height:.85;transform:rotate(-1.5deg);
  transition:transform .25s var(--spring);
}
.topbar__mark:hover{
  transform:rotate(2deg) scale(1.08);
}
.topbar__right{
  flex:1;display:flex;justify-content:flex-end;align-items:center;gap:.75rem;
}

.brand{
  display:flex;align-items:center;gap:.65rem;text-decoration:none;
  padding:.3rem .75rem;border-radius:9999px;
  transition:transform .35s var(--spring);
}
.brand:hover{transform:translateY(-1.5px)}
.brand img{
  width:38px;height:38px;border-radius:50%;object-fit:cover;
  transform:rotate(-4deg);
  box-shadow:0 3px 10px -3px rgba(36,30,28,.4);
  transition:transform .4s var(--spring);
}
.brand:hover img{transform:rotate(4deg) scale(1.08)}
.brand__txt{
  font-family:var(--display);font-style:italic;font-weight:700;
  font-size:1.12rem;letter-spacing:-.015em;color:var(--cherry);
  white-space:nowrap;
}

/* liquid glass pill containers */
.nav-pill{
  display:flex;align-items:center;gap:.25rem;
  padding:.3rem .45rem;
  background:rgba(255, 255, 255, 0.45);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(233, 160, 170, 0.28);
  border-radius:9999px;
  box-shadow:0 4px 18px -2px rgba(36, 30, 28, 0.05), inset 0 1px 1px rgba(255, 255, 255, 0.7);
  transition:all .3s ease;
}
.nav-pill a{
  position:relative;text-decoration:none;
  font-size:.88rem;font-weight:600;color:var(--ink-soft);
  padding:.35rem .9rem;border-radius:9999px;
  transition:color .2s ease, background .2s ease, transform .2s ease;
}
.nav-pill a::after{display:none}
.nav-pill a:hover{
  color:var(--cherry);
  background:rgba(160, 48, 56, 0.08);
}

.nav__hi{
  background:var(--cherry)!important;color:var(--paper)!important;
  padding:.38rem 1rem!important;border-radius:9999px;
  box-shadow:0 4px 12px -6px var(--cherry-dk);
  transition:transform .3s var(--spring), box-shadow .3s ease!important;
}
.nav__hi:hover{
  transform:translateY(-1.5px) rotate(-1.2deg);
  box-shadow:0 8px 18px -8px var(--cherry-dk);
  background:var(--cherry-dk)!important;
  color:var(--paper)!important;
}

.sound-btn-float{
  display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:50%;
  border:1px solid rgba(233, 160, 170, 0.35);
  background:rgba(255, 255, 255, 0.65);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  color:var(--ink);
  cursor:pointer;
  box-shadow:0 4px 14px rgba(36, 30, 28, 0.08);
  transition:all .25s var(--spring);
}
.sound-btn-float:hover{
  background:var(--cherry);
  color:var(--butter);
  border-color:var(--cherry);
  transform:scale(1.08);
}
.sound-btn-float.is-playing{
  background:var(--cherry);
  color:var(--butter);
  box-shadow:0 0 16px rgba(160, 48, 56, 0.45);
}

/* mobile toggle & menu */
.menu-toggle{
  display:none;
  width:40px;height:40px;border-radius:50%;
  border:1px solid rgba(233, 160, 170, 0.35);
  background:rgba(255, 255, 255, 0.65);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  color:var(--ink);
  align-items:center;justify-content:center;
  cursor:pointer;
  box-shadow:0 4px 14px rgba(0, 0, 0, 0.06);
  transition:all .25s ease;
}
.menu-toggle:hover{
  background:rgba(255, 255, 255, 0.9);
  color:var(--cherry);
}

.mobile-menu{
  position:absolute;
  top:calc(100% + 8px);
  left:1.2rem;right:1.2rem;
  background:rgba(253, 250, 245, 0.96);
  backdrop-filter:blur(24px);
  -webkit-backdrop-filter:blur(24px);
  border:1px solid rgba(233, 160, 170, 0.35);
  border-radius:1.2rem;
  padding:1rem;
  display:flex;flex-direction:column;gap:.4rem;
  box-shadow:0 14px 36px -8px rgba(36, 30, 28, 0.2);
  opacity:0;transform:translateY(-10px) scale(0.98);
  pointer-events:none;
  transition:opacity .3s ease, transform .3s var(--spring);
}
.mobile-menu.is-active{
  opacity:1;transform:translateY(0) scale(1);
  pointer-events:auto;
}
.mobile-menu a{
  text-decoration:none;font-size:1.02rem;font-weight:600;
  color:var(--ink-soft);padding:.6rem 1rem;border-radius:.75rem;
  transition:all .2s ease;
}
.mobile-menu a:hover{
  color:var(--cherry);background:rgba(160, 48, 56, 0.08);
}
.mobile-menu .mobile-menu__hi{
  background:var(--cherry);color:var(--paper);
  text-align:center;margin-top:.4rem;
}
.mobile-menu .mobile-menu__hi:hover{
  background:var(--cherry-dk);color:var(--paper);
}

@media (max-width: 768px){
  .nav-pill{display:none}
  .menu-toggle{display:flex}
  .topbar{padding:.75rem 1.2rem}
}

/* ═══════════ COVER ═══════════════════════════════════════ */
.cover{
  position:relative;
  min-height:100svh;
  display:flex;align-items:center;
  padding:5.5rem 0 4rem;
  overflow:hidden;
}
.gingham{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    repeating-linear-gradient(90deg,rgba(233,160,170,.17) 0 30px,transparent 30px 60px),
    repeating-linear-gradient(0deg,rgba(233,160,170,.17) 0 30px,transparent 30px 60px),
    linear-gradient(180deg,rgba(253,248,243,.72),rgba(253,248,243,.14) 62%,transparent);
  mask-image:linear-gradient(180deg,#000 44%,rgba(0,0,0,.5) 72%,transparent);
}

.stage{
  position:relative;z-index:2;
  width:min(100% - 2.6rem,var(--wrap));margin-inline:auto;
  perspective:1200px;
}
.stage__inner{
  position:relative;
  transform-style:preserve-3d;
  min-height:min(70vh,600px);
  will-change:transform;
  display:flex;flex-direction:column;align-items:center;text-align:center;
}
.layer{transform-style:preserve-3d}
[data-drag]{transition:transform .45s var(--spring),box-shadow .35s ease,filter .35s ease}
[data-drag].is-held{transition:box-shadow .2s ease,filter .2s ease}

/* eyebrow */
.cover__eyebrow{
  position:relative;display:inline-block;
  font-family:var(--hand);
  font-size:clamp(1.6rem,2.8vw,2.2rem);
  color:var(--cherry);line-height:1;margin:0 auto 1.1rem;
  --r:-1.6deg;text-align:center;
}
.scribble--under{
  position:absolute;left:-3%;bottom:-.62em;width:108%;height:.85em;
  color:var(--marigold);stroke-width:3.4;
}

/* cut-paper name */
.cutname{
  display:flex;flex-wrap:nowrap;justify-content:center;align-items:flex-end;
  gap:.05em;margin:0 auto .1em;
  font-size:clamp(1.8rem,9vw,7.2rem);
  line-height:.86;
}
.cut{
  display:inline-block;
  transform:rotate(var(--r,0deg));
  padding:.06em .1em .02em;
  border-radius:2px;
  box-shadow:1px 3px 0 rgba(36,30,28,.13);
  transition:transform .45s var(--spring);
}
.cut:nth-child(1){background:var(--cherry);color:var(--butter);font-family:var(--display);font-weight:700}
.cut:nth-child(2){background:var(--butter);color:var(--cherry);font-family:var(--body);font-weight:800;font-style:italic}
.cut:nth-child(3){background:var(--pistachio);color:var(--ink);font-family:var(--display);font-weight:700;font-style:italic}
.cut:nth-child(4){background:var(--ink);color:var(--paper);font-family:var(--body);font-weight:800}
.cut:nth-child(5){background:var(--marigold);color:var(--paper);font-family:var(--display);font-weight:700}
.cut:nth-child(6){background:var(--paper);color:var(--cherry);font-family:var(--body);font-weight:800;border:2px dashed var(--cherry)}
.cut:nth-child(7){background:var(--blush);color:var(--cherry-dk);font-family:var(--display);font-weight:700;font-style:italic}
.cutname:hover .cut{transform:rotate(calc(var(--r,0deg) * -.7)) translateY(-5px)}

.cutname__last{
  font-family:var(--display);font-style:italic;font-weight:500;
  font-size:clamp(1.6rem,4.2vw,3rem);
  color:var(--cherry);margin:.1em auto 1.5rem;letter-spacing:-.02em;
  text-align:center;
}
.cutname__last em{font-style:normal;font-weight:600}

/* thesis */
.thesis{
  max-width:44ch;margin-inline:auto;text-align:center;
  display:flex;flex-direction:column;align-items:center;
}
.thesis__line{
  font-family:var(--display);font-weight:500;
  font-size:clamp(1.28rem,2.35vw,1.86rem);
  line-height:1.28;letter-spacing:-.017em;margin-bottom:.75rem;
}
.thesis__sub{
  color:var(--ink-soft);max-width:42ch;
  font-size:1.02rem;line-height:1.62;margin-bottom:1.9rem;
}
.cover__cta{display:flex;flex-wrap:wrap;justify-content:center;gap:.75rem}

/* buttons */
.btn{
  display:inline-block;text-decoration:none;
  font-weight:700;font-size:.94rem;letter-spacing:.005em;
  padding:.82rem 1.5rem;border-radius:999px;
  transition:transform .32s var(--spring),box-shadow .32s ease,background .25s ease;
}
.btn--ink{
  background:var(--cherry);color:var(--paper);
  box-shadow:0 6px 0 -1px var(--cherry-dk),0 14px 26px -16px rgba(36,30,28,.9);
}
.btn--ink:hover{transform:translateY(-3px) rotate(-1deg);box-shadow:0 9px 0 -1px var(--cherry-dk),0 20px 30px -18px rgba(36,30,28,.9)}
.btn--ink:active{transform:translateY(2px);box-shadow:0 3px 0 -1px var(--cherry-dk)}
.btn--ghost{
  background:transparent;color:var(--ink);
  box-shadow:inset 0 0 0 2px var(--ink);
}
.btn--ghost:hover{transform:translateY(-3px) rotate(1deg);background:var(--butter);box-shadow:inset 0 0 0 2px var(--ink),0 14px 22px -16px rgba(36,30,28,.8)}

/* ── tape ──────────────────────────────────────────────── */
.tape{
  position:absolute;width:96px;height:28px;z-index:4;
  background:
    repeating-linear-gradient(112deg,rgba(255,255,255,.42) 0 5px,rgba(255,255,255,.1) 5px 10px),
    linear-gradient(180deg,rgba(248,230,180,.92),rgba(240,145,63,.55));
  box-shadow:0 2px 7px -4px rgba(36,30,28,.7);
  clip-path:polygon(3% 6%,97% 0,100% 92%,1% 100%);
  opacity:.94;
}
.tape--tl{top:-15px;left:-20px;transform:rotate(-32deg)}
.tape--tr{top:-15px;right:-20px;transform:rotate(28deg)}
.tape--br{bottom:-13px;right:-22px;transform:rotate(-24deg)}
.tape--top{top:-14px;left:50%;transform:translateX(-50%) rotate(-3deg);width:84px}

/* ── polaroid ──────────────────────────────────────────── */
.polaroid{
  position:absolute;top:34%;right:-9%;
  width:clamp(200px,22vw,290px);
  background:var(--paper);
  padding:12px 12px 0;
  --r:4deg;
  box-shadow:0 20px 44px -26px rgba(36,30,28,.95),0 2px 0 rgba(36,30,28,.06);
  cursor:grab;touch-action:none;
  z-index:10;
}
.polaroid img{border-radius:1px}
.polaroid figcaption{
  font-family:var(--hand);
  font-size:1.6rem;color:var(--cherry);
  text-align:center;padding:.28em 0 .12em;line-height:1;
}
.polaroid:hover{--r:1deg;--s:1.03}
.polaroid.is-held{cursor:grabbing;box-shadow:0 40px 60px -30px rgba(36,30,28,1)}

/* ── sticky note ───────────────────────────────────────── */
.sticky{
  position:relative;
  width:170px;padding:1.5rem 1.1rem 1.2rem;
  background:linear-gradient(170deg,var(--butter),#f2d894);
  box-shadow:0 14px 26px -18px rgba(36,30,28,.9);
  cursor:grab;touch-action:none;
}
.sticky::after{
  content:'';position:absolute;right:0;bottom:0;
  border-width:0 0 20px 20px;border-style:solid;
  border-color:transparent transparent rgba(36,30,28,.1) transparent;
}
.sticky p{
  margin:0;font-family:var(--hand);font-size:1.72rem;line-height:1.05;
  color:var(--cherry-dk);
}
.sticky__pin{
  position:absolute;top:-9px;left:50%;transform:translateX(-50%);
  width:17px;height:17px;border-radius:50%;
  background:radial-gradient(circle at 34% 30%,#e05a5a,var(--cherry-dk));
  box-shadow:0 4px 7px -3px rgba(36,30,28,.9);
}
.sticky--cover{position:absolute;top:50%;left:2%;--r:-5deg}
.sticky--cover:hover{--r:-1deg;--s:1.04}

/* ── hand notes ────────────────────────────────────────── */
.handnote{
  font-family:var(--hand);
  font-size:clamp(1.3rem,1.9vw,1.75rem);
  line-height:1.08;color:var(--cherry);
}
.handnote--photo{position:absolute;top:74%;right:7%;width:160px;--r:-5deg;margin:0}
.scribble--arrowdown{
  position:absolute;right:-50px;top:70%;width:58px;height:42px;color:var(--marigold);
}

/* ── scribbles (shared) ────────────────────────────────── */
.scribble{
  fill:none;stroke:currentColor;stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:1;stroke-dashoffset:1;
  overflow:visible;pointer-events:none;
}
.scribble.is-drawn{
  transition:stroke-dashoffset 1.1s var(--ease-out);
  stroke-dashoffset:0;
}
.scribble--sparkA{position:absolute;top:8%;left:-46px;width:38px;height:38px;color:var(--marigold)}
.scribble--sparkB{position:absolute;bottom:12%;right:14%;width:26px;height:26px;color:var(--cherry)}

/* ── scroll cue ────────────────────────────────────────── */
.scrollcue{
  position:absolute;bottom:1.6rem;left:50%;transform:translateX(-50%);
  z-index:5;font-family:var(--hand);font-size:1.35rem;color:var(--ink-faint);
  display:flex;flex-direction:column;align-items:center;gap:.3rem;
}
.scrollcue::after{
  content:'';width:1px;height:34px;
  background:linear-gradient(var(--ink-faint),transparent);
  animation:cue 2.4s ease-in-out infinite;
}
@keyframes cue{0%,100%{transform:scaleY(.55);opacity:.4}50%{transform:scaleY(1);opacity:1}}

/* ═══════════ TICKER TAPE ═════════════════════════════════ */
.ticker{
  position:relative;z-index:4;
  overflow:hidden;padding:.55rem 0;
  background:var(--cherry);color:var(--butter);
  transform:rotate(-1.1deg) scaleX(1.06);
  box-shadow:0 12px 30px -22px rgba(36,30,28,1);
  margin:1rem 0 5.5rem;
}
.ticker__run{
  display:flex;align-items:center;gap:1.6rem;width:max-content;
  animation:roll 34s linear infinite;
}
.ticker__run span{
  font-family:var(--display);font-style:italic;font-size:1.06rem;white-space:nowrap;
}
.ticker__run b{color:var(--marigold);font-size:.8rem}
@keyframes roll{to{transform:translateX(-50%)}}

/* ═══════════ shared section furniture ═══════════════════ */
section{position:relative}
.label{
  font-size:.7rem;font-weight:800;text-transform:uppercase;
  letter-spacing:.22em;color:var(--cherry);margin:0 0 .7rem;
}
.label--mid{margin:3.4rem 0 1.6rem;text-align:center}
.sechead{position:relative;max-width:min(100%,36rem);margin-bottom:2.8rem}
.sechead h2{font-size:clamp(2rem,5.1vw,3.5rem)}
.sechead__sub{
  font-family:var(--display);font-style:italic;color:var(--ink-soft);
  max-width:34ch;margin-top:.9rem;font-size:1.08rem;
}
.sechead--right{margin-left:auto;text-align:right}
.scribble--squig{
  position:absolute;left:0;bottom:-2.2rem;width:190px;height:26px;color:var(--pistachio-dk);
}
.lede{
  font-family:var(--display);font-weight:400;
  font-size:clamp(1.16rem,1.85vw,1.42rem);
  line-height:1.5;letter-spacing:-.012em;
}

/* reveal */
[data-reveal]{--ty:28px;opacity:0;transition:opacity .8s var(--ease-out),transform .9s var(--ease-out)}
[data-reveal].is-in{--ty:0px;opacity:1}

/* ═══════════ ABOUT ══════════════════════════════════════ */
.about{padding:2rem 0 7rem}
.about__grid{
  display:grid;gap:clamp(2rem,4vw,3.8rem);
  grid-template-columns:220px minmax(0,1fr);
  align-items:start;
}
.about__photo{
  position:relative;padding-top:1.8rem;
  display:flex;flex-direction:column;gap:3rem;align-items:flex-start;
}
.idcard{
  position:relative;width:200px;
  background:var(--paper);padding:14px 14px 10px;
  --r:3deg;
  box-shadow:0 18px 34px -24px rgba(36,30,28,.95);
  cursor:grab;touch-action:none;
}
.idcard:hover{--r:-1deg;--s:1.03}
.idcard--second{--r:-4deg}
.idcard--second:hover{--r:2deg;--s:1.03}
.idcard img{width:100%;filter:saturate(1.02) contrast(1.02)}
.idcard__meta{margin:.6rem 0 0;display:grid;gap:.05rem;line-height:1.25}
.idcard__meta b{font-family:var(--display);font-size:1.02rem}
.idcard__meta span{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);font-weight:700}
.handnote--id{position:absolute;top:0;right:-6px;transform:rotate(7deg);margin:0}

.about__body{
  position:relative;width:100%;max-width:100%;
  background:rgba(253, 250, 245, 0.94);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border:1px solid rgba(233, 160, 170, 0.35);
  border-radius:1.6rem;
  padding:clamp(2rem, 3.8vw, 3rem) clamp(2rem, 4.5vw, 3.8rem);
  box-shadow:0 20px 48px -18px rgba(36, 30, 28, 0.12), inset 0 1px 1px rgba(255, 255, 255, 0.85);
}
.h-script{position:relative;display:inline-block;font-size:clamp(2rem,4.6vw,3.2rem);margin-bottom:1.4rem}
.h-script span{position:relative;z-index:2}
.scribble--ring{
  position:absolute;left:19%;top:-24%;width:120%;height:150%;
  color:var(--cherry);stroke-width:2;z-index:1;
}
.about__body p{margin-bottom:1.1rem}
.about__body p:last-of-type{margin-bottom:0}
.about__body p b{
  font-weight:700;
  background:linear-gradient(transparent 62%,var(--pistachio) 62%);
  padding:0 .12em;
}
.factstrip{
  display:flex;flex-wrap:wrap;gap:2.4rem;
  margin-top:2.2rem;padding-top:1.6rem;
  border-top:2px dashed var(--line);
}
.factstrip li{display:grid;gap:.05rem}
.factstrip b{font-family:var(--display);font-size:1.85rem;color:var(--cherry);line-height:1}
.factstrip span{font-size:.76rem;letter-spacing:.13em;text-transform:uppercase;font-weight:700;color:var(--ink-faint)}
.handnote--margin{
  position:absolute;right:1rem;top:-1.2rem;width:auto;
  transform:rotate(4deg);color:var(--marigold);
  background:var(--paper);padding:.35rem .75rem;
  border-radius:8px;box-shadow:0 4px 14px rgba(36,30,28,0.08);
  border:1px solid rgba(240,145,63,0.3);
}

/* ═══════════ THE DESK ═══════════════════════════════════ */
.desk{padding:4rem 0 7rem}
.desk .sechead{margin-bottom:4.8rem}
.pinboard{
  position:relative;
  display:grid;gap:clamp(1.4rem,2.6vw,2.4rem);
  grid-template-columns:repeat(3,1fr);
  align-items:start;
}
.sheet{
  position:relative;padding:2.3rem 1.8rem 2rem;
  filter:drop-shadow(0 18px 26px rgba(36,30,28,.16));
  cursor:grab;touch-action:none;
}
.sheet__comic{
  position:absolute;top:-78px;left:50%;
  transform:translateX(-50%);
  width:105px;height:105px;margin:0;
  z-index:15;cursor:grab;touch-action:none;
}
.sheet__comic img{
  width:100%;height:100%;object-fit:contain;
  mix-blend-mode:multiply;
  filter:drop-shadow(0 6px 14px rgba(36,30,28,.14));
  transition:transform .3s var(--spring);
}
.sheet__comic:hover img{
  transform:scale(1.08) rotate(-3deg);
}
.sheet::before{
  content:'';position:absolute;inset:0;z-index:-1;
  background:var(--paper);clip-path:var(--torn);
}
.sheet--a{--r:-1.7deg;margin-top:0}
.sheet--b{--r:1.4deg;margin-top:2.4rem}
.sheet--b::before{background:var(--butter);clip-path:var(--torn-b)}
.sheet--c{--r:-.9deg;margin-top:.9rem}
.sheet--c::before{background:#eaf6da;clip-path:var(--torn-b)}
.sheet:hover{--r:0deg;--s:1.015;--ty:-6px;filter:drop-shadow(0 26px 34px rgba(36,30,28,.22))}
.sheet h3{font-size:1.42rem;margin-bottom:.65rem;letter-spacing:-.02em}
.sheet p{font-size:.99rem;line-height:1.62;color:var(--ink-soft);margin-bottom:0}
.sheet__tag{
  margin-top:1.1rem!important;font-family:var(--hand);
  font-size:1.4rem;color:var(--cherry)!important;line-height:1;
}
.sheet--strip{
  grid-column:1/-1;--r:.5deg;
  margin-top:1.6rem;padding:1.5rem 2rem;
  cursor:default;
}
.sheet--strip::before{background:var(--cherry);clip-path:var(--torn)}
.sheet--strip p{color:var(--butter);font-size:1.04rem;margin:0}
.sheet--strip b{color:var(--paper);font-family:var(--display);font-style:italic;font-weight:600}
.sheet--strip:hover{--r:.5deg;--s:1;--ty:0px;filter:drop-shadow(0 18px 26px rgba(36,30,28,.16))}

.handnote--desk{
  position:absolute;right:-1rem;bottom:-4.2rem;
  transform:rotate(-4deg);color:var(--marigold);
}
.scribble--arrowc{
  position:absolute;left:-72px;top:-14px;width:64px;height:44px;
  color:var(--marigold);transform:scaleX(-1) rotate(14deg);
}

/* ═══════════ TIMELINE ═══════════════════════════════════ */
.pages{padding:5rem 0 7rem}
.tl{position:relative;margin-top:1rem;padding-left:clamp(1.6rem,4vw,3rem)}
.tl::before{
  content:'';position:absolute;left:0;top:.6rem;bottom:2rem;width:2px;
  background:repeating-linear-gradient(180deg,var(--cherry) 0 9px,transparent 9px 17px);
  opacity:.5;
}
.tl__item{position:relative;padding:0 0 3.2rem}
.tl__item::before{
  content:'';position:absolute;
  left:calc(clamp(1.6rem,4vw,3rem) * -1 - 7px);top:.55rem;
  width:16px;height:16px;border-radius:50%;
  background:var(--paper);border:3px solid var(--cherry);
  box-shadow:0 0 0 5px var(--sky);
}
.tl__item--now::before{background:var(--marigold);border-color:var(--cherry-dk)}
.tl__when{
  font-size:.74rem;font-weight:800;letter-spacing:.15em;text-transform:uppercase;
  color:var(--ink-faint);margin-bottom:.45rem;
}
@media (min-width:900px){
  .tl__item{display:grid;grid-template-columns:180px minmax(0,1fr);gap:0 2.6rem;align-items:start}
  .tl__when{padding-top:.55rem;text-align:right}
}
.tl__card{position:relative;max-width:62ch}
.tl__card h3{font-size:clamp(1.35rem,2.6vw,1.85rem);margin-bottom:.15rem}
.tl__item--now h3{
  display:inline;
  background:linear-gradient(transparent 58%,var(--butter) 58%,var(--butter) 94%,transparent 94%);
  padding:0 .18em;
}
.tl__where{
  font-family:var(--display);font-style:italic;color:var(--cherry);
  font-size:1.04rem;margin:.35rem 0 .6rem;
}
.tl__card > p:last-of-type{margin-bottom:0}
.tl__card p{color:var(--ink-soft);font-size:1rem}
.tl__skills{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.9rem!important}
.tl__skills i{
  font-style:normal;font-size:.73rem;font-weight:700;
  letter-spacing:.07em;text-transform:uppercase;
  padding:.28rem .6rem;border-radius:999px;
  background:rgba(160,48,56,.09);color:var(--cherry-dk);
}
.tl__badge{
  display:inline-block;margin-top:.9rem;
  font-family:var(--hand);font-size:1.45rem;color:var(--marigold);
  transform:rotate(-3deg);
}

/* ═══════════ STICKERS ═══════════════════════════════════ */
.stickers{padding:4rem 0 7rem}
.stickerfield{
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:.85rem 1rem;padding:2.6rem clamp(.5rem,3vw,2.5rem);
  position:relative;
}
.stickerfield::before{
  content:'';position:absolute;inset:0;
  border:2px dashed var(--line);border-radius:6px;
  background:rgba(253,250,245,.42);
}
.sticker{
  position:relative;
  font-weight:800;font-size:.92rem;letter-spacing:-.005em;
  padding:.62rem 1.15rem;border-radius:999px;
  border:3px solid var(--paper);
  box-shadow:0 8px 16px -11px rgba(36,30,28,.9);
  cursor:grab;user-select:none;touch-action:none;
  will-change:transform;
}
.sticker:hover{--r:0deg;--s:1.07;box-shadow:0 14px 22px -12px rgba(36,30,28,.9)}
.sticker.is-held{cursor:grabbing;z-index:20;box-shadow:0 26px 34px -18px rgba(36,30,28,1)}
.s1{background:var(--cherry);color:var(--butter);--r:-3deg}
.s2{background:var(--pistachio);color:#3d5220;--r:2deg}
.s3{background:var(--marigold);color:#4a2306;--r:-2deg}
.s4{background:var(--butter);color:var(--cherry-dk);--r:3deg}
.s5{background:var(--ink);color:var(--pistachio);--r:-1deg}
.s6{background:var(--blush);color:var(--cherry-dk);--r:2.5deg}
.s7{background:var(--paper);color:var(--ink);--r:-2.5deg;border-color:var(--ink)}
.s8{background:var(--cherry);color:var(--paper);--r:1.5deg}
.s9{background:var(--pistachio);color:#3d5220;--r:-3.5deg}
.s10{background:var(--butter);color:var(--cherry-dk);--r:1deg}
.s11{background:var(--marigold);color:#4a2306;--r:-1.5deg}
.s12{background:var(--blush);color:var(--cherry-dk);--r:3deg}
.s13{background:var(--ink);color:var(--butter);--r:-2deg}
.s14{background:var(--paper);color:var(--cherry);--r:2deg;border-color:var(--cherry)}
.s15{background:var(--cherry);color:var(--pistachio);--r:-2.8deg}
.s16{background:var(--pistachio);color:#3d5220;--r:1.8deg}
.handnote--stick{text-align:center;margin-top:1.4rem;color:var(--marigold);transform:rotate(-1.5deg)}

/* ═══════════ BLU ════════════════════════════════════════ */
.blu{padding:4rem 0 7rem}
.blu h2 em{font-style:italic;color:var(--cherry)}
.blu__grid{
  display:grid;gap:clamp(2rem,4.5vw,4rem);
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  align-items:start;
}
.blu__intro p:not(.lede){color:var(--ink-soft)}
.quote{
  position:relative;margin:0;padding:2.4rem 2rem 1.8rem;
  filter:drop-shadow(0 20px 30px rgba(36,30,28,.18));
  --r:1.6deg;
}
.quote::before{
  content:'';position:absolute;inset:0;z-index:-1;
  background:var(--sky-deep);clip-path:var(--torn-b);
}
.quote__mark{
  position:absolute;top:-.1em;left:.5rem;
  font-family:var(--display);font-size:5.5rem;color:var(--cherry);
  opacity:.28;line-height:1;
}
.quote p{
  position:relative;font-family:var(--display);font-style:italic;
  font-size:clamp(1.1rem,1.9vw,1.34rem);line-height:1.45;
  letter-spacing:-.012em;margin-bottom:1rem;
}
.quote cite{
  font-family:var(--hand);font-style:normal;
  font-size:1.5rem;color:var(--cherry);
}
.channels{
  display:grid;gap:clamp(1.6rem,3.4vw,3rem);
  grid-template-columns:repeat(3,1fr);
}
.channel{position:relative;padding-top:1.4rem;border-top:3px solid var(--ink)}
.channel--ig{border-color:var(--marigold)}
.channel--li{border-color:var(--cherry)}
.channel--pi{border-color:var(--pistachio-dk)}
.channel h3{font-size:1.5rem;margin-bottom:.2rem}
.channel__role{
  font-family:var(--hand);font-size:1.5rem;color:var(--cherry);
  margin-bottom:.5rem;line-height:1;
}
.channel p:last-child{color:var(--ink-soft);font-size:.98rem;margin:0}
.handnote--blu{margin-top:3rem;text-align:right;color:var(--marigold);transform:rotate(-1deg)}

/* ═══════════ PROCESS ════════════════════════════════════ */
.process{padding:4rem 0 7rem}
.beats{
  display:grid;align-items:start;
  grid-template-columns:1fr auto 1fr auto 1fr auto 1fr;
  gap:clamp(.6rem,1.6vw,1.4rem);
}
.beat{
  position:relative;
  background:rgba(253, 250, 245, 0.94);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(233, 160, 170, 0.35);
  border-radius:1.3rem;
  padding:1.8rem 1.4rem;
  box-shadow:0 14px 32px -12px rgba(36, 30, 28, 0.12);
  transition:transform .35s var(--spring), box-shadow .35s ease;
}
.beat:hover{
  transform:translateY(-4px);
  box-shadow:0 22px 42px -14px rgba(36, 30, 28, 0.18);
}
.beat h3{
  font-size:clamp(1.4rem,2.5vw,1.95rem);color:var(--cherry);
  margin-bottom:.6rem;font-style:italic;
}
.beat p{font-size:.97rem;line-height:1.6;color:var(--ink-soft);margin:0}
.beatarrow{
  width:48px;height:38px;align-self:center;
  color:var(--marigold);stroke-width:2.6;
}
.beatarrow--flip{transform:scaleY(-1)}

/* ═══════════ HELLO ══════════════════════════════════════ */
.hello{padding:3rem 0 0}
.hello__wrap{position:relative;padding-bottom:5rem}
.hello__note{
  position:relative;max-width:640px;
  padding:3.2rem clamp(1.6rem,4vw,3.4rem) 3rem;
  background:var(--paper);
  transform:rotate(-1.2deg);
  box-shadow:0 30px 50px -34px rgba(36,30,28,1);
}
.hello__note h2{font-size:clamp(2.1rem,5.4vw,3.6rem);margin-bottom:1rem}
.hello__note > p{color:var(--ink-soft);max-width:44ch}
.hello__links{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.8rem}
.hello__where{
  margin:1.6rem 0 0;font-size:.72rem;font-weight:800;
  letter-spacing:.2em;text-transform:uppercase;color:var(--ink-faint);
}
.scribble--heart{position:absolute;right:1.8rem;bottom:1.6rem;width:44px;height:42px;color:var(--blush);stroke-width:2.6}
.hello__face{
  position:absolute;right:6%;top:4%;
  width:130px;border-radius:50%;
  border:6px solid var(--paper);
  box-shadow:0 22px 36px -24px rgba(36,30,28,1);
  transform:rotate(5deg);
  transition:transform .5s var(--spring);
}
.hello__face:hover{transform:rotate(-3deg) scale(1.06)}
.diecut--sleep{
  position:absolute;right:6.5%;top:38%;
  width:120px;z-index:10;margin:0;
}
.handnote--hello{
  position:absolute;right:6%;top:72%;
  transform:rotate(-5deg);color:var(--cherry);
  font-family:var(--hand);font-size:1.55rem;margin:0;
}

.foot{
  margin-top:4rem;padding:1.5rem clamp(1.3rem,4vw,2.5rem);
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:.6rem;
  border-top:2px dashed var(--line);
  font-size:.82rem;color:var(--ink-faint);
}
.foot p{margin:0}

/* ═══════════ responsive ═════════════════════════════════ */
@media (max-width:1080px){
  .handnote--margin{display:none}
  .stamp{display:none}
}
@media (max-width:900px){
  .stage__inner{padding-right:0;min-height:0}
  .polaroid{
    position:relative;top:auto;right:auto;
    width:min(72vw,300px);margin:2.6rem auto 0;
  }
  .handnote--photo{position:relative;top:auto;right:auto;width:auto;text-align:center;margin:1.6rem 0 0;--r:-2deg}
  .scribble--arrowdown{display:none}
  .sticky--cover{position:relative;top:auto;right:auto;margin:2rem auto 0}
  .scribble--sparkA,.scribble--sparkB{display:none}
  .cover{min-height:0;padding:7.5rem 0 4rem}
  .about__grid{grid-template-columns:1fr}
  .about__photo{display:flex;align-items:center;gap:1.6rem;padding-top:0}
  .handnote--id{position:relative;top:auto;right:auto}
  .pinboard{grid-template-columns:1fr}
  .sheet--b,.sheet--c{margin-top:0}
  .handnote--desk{position:relative;right:auto;bottom:auto;text-align:right;margin-top:1.6rem}
  .scribble--arrowc{display:none}
  .blu__grid{grid-template-columns:1fr}
  .channels{grid-template-columns:1fr;gap:2rem}
  .beats{grid-template-columns:1fr;gap:2.2rem}
  .beatarrow{transform:rotate(72deg);justify-self:start;margin-left:2rem}
  .beatarrow--flip{transform:rotate(108deg) scaleY(-1)}
  .hello__face,.handnote--hello{position:relative;right:auto;top:auto;margin:1.8rem auto 0;transform:rotate(4deg)}
  .handnote--hello{text-align:center}
  .sechead--right{text-align:left;margin-left:0}
}
@media (max-width:620px){
  .nav a:not(.nav__hi){display:none}
  .brand__txt{display:none}
  .cutname{font-size:clamp(2.8rem,15vw,4.4rem)}
  .factstrip{gap:1.4rem}
  .about__photo{flex-direction:column;align-items:flex-start}
  .ticker{margin-bottom:4rem}
}

/* ═══════════ reduced motion ═════════════════════════════ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
  [data-reveal]{opacity:1;transform:none}
  .scribble{stroke-dashoffset:0}
  #ambient{display:none}
}

/* ═══════════════════════════════════════════════════════════
   ADDED · illustrated cut-outs + the back cover
   .cutout — the comic panels and the two misc stickers, dropped
             on the page at their own size, untouched: no frame,
             no tint, no caption. Just a shadow so they sit on
             the paper rather than float above it.
   .diecut — the cats, kiss-cut with a paper margin, same as
             the sticker sheet they belong to.
   Both drag like everything else. Neither writes `transform`.
   ═══════════════════════════════════════════════════════════ */

.desk .wrap,.process .wrap{position:relative}

/* ── plain cut-outs, shown as they are ─────────────────── */
.cutout{
  position:relative;margin:0;width:144px;
  cursor:grab;touch-action:none;
  filter:drop-shadow(0 15px 20px rgba(36,30,28,.24));
}
.cutout img{width:100%;display:block}
.cutout:hover{--r:0deg;--s:1.04}
.cutout.is-held{cursor:grabbing;filter:drop-shadow(0 30px 36px rgba(36,30,28,.45))}

.cutout--plan{--r:-4deg;margin:2.2rem 0 0 .4rem}
.cutout--briefs{position:absolute;top:-.6rem;right:0;z-index:5;--r:5deg}
.cutout--calendars{position:absolute;top:-1rem;right:0;z-index:5;--r:-5deg}
.cutout--copies{--r:3deg;margin:3rem 0 0 auto}
.cutout--idea{position:absolute;left:5%;top:34%;z-index:5;--r:-6deg}

/* ── kiss-cut sticker (the cats) ───────────────────────── */
.diecut{
  position:relative;margin:0;
  width:104px;padding:0;
  background:transparent;
  border-radius:0;
  box-shadow:none;
  cursor:grab;touch-action:none;
}
.diecut img{width:100%;display:block;filter:drop-shadow(0 10px 18px rgba(36,30,28,.22))}
.diecut:hover{--r:0deg;--s:1.08}
.diecut.is-held{cursor:grabbing;z-index:40;filter:drop-shadow(0 22px 28px rgba(36,30,28,.38))}

.diecut--notes{--r:7deg;margin:1.8rem 0 0 2.2rem}
.diecut--sleep{position:absolute;right:6.5%;top:34%;z-index:10;--r:-4deg;width:120px;margin:0;background:transparent;box-shadow:none;padding:0}

/* stuck round the edge of the sheet, not in the flow of it */
.stickerfield .cutout,.stickerfield .diecut{position:absolute;z-index:6}
.cutout--things{top:-150px;right:8%;--r:-8deg}
.cutout--coke{top:-128px;right:30%;--r:9deg}
.diecut--wink{bottom:-34px;left:8%;--r:6deg;width:98px}
.diecut--flower{bottom:-30px;right:6%;--r:-7deg;width:98px}

/* ═══════════ the back cover ═════════════════════════════
   A wordmark to close the book, the details in small print,
   and a treeline drawn in the same ink as the scribbles.
   ════════════════════════════════════════════════════════ */
.foot{
  position:relative;display:block;
  margin-top:-1.5rem;padding:1rem clamp(1.3rem,4vw,2.5rem) 0;
  border-top:2px dashed var(--line);
  font-size:.82rem;color:var(--ink-faint);
  overflow:hidden;
}
.foot__inner{
  position:relative;z-index:2;
  width:min(100% - 1rem,var(--wrap));margin-inline:auto;
}
.foot__mark{
  margin:0 0 .3rem;
  font-family:var(--hand);
  font-size:clamp(4.2rem,15vw,11rem);
  line-height:.82;color:var(--cherry);
  transform:rotate(-1.4deg);transform-origin:left bottom;
}
.foot__chips{
  display:flex;flex-wrap:wrap;gap:.5rem;
  margin:0 0 1.4rem;padding:0;list-style:none;
}
.foot__chips li{
  padding:.36rem .8rem;border-radius:999px;
  background:rgba(253,250,245,.66);
  box-shadow:inset 0 0 0 1px var(--line);
  font-size:.76rem;font-weight:600;color:var(--ink-soft);
  white-space:nowrap;
}
.foot__meta{
  display:flex;flex-wrap:wrap;justify-content:space-between;
  gap:.4rem 1.6rem;padding-bottom:1.6rem;
}
.foot__meta p{margin:0}
.foot__meta b{color:var(--ink-soft);font-weight:700}

.treeline{
  position:relative;z-index:1;
  margin:0 calc(50% - 50vw);width:100vw;
  height:clamp(120px,15vw,210px);
  line-height:0;
  mask-image:linear-gradient(180deg,transparent,#000 18%);
}
.treeline img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 100%}

/* ── responsive ────────────────────────────────────────── */
@media (max-width:1180px){
  .cutout--idea{
    position:relative;left:auto;top:auto;
    margin:2.2rem auto 0;
  }
}
/* the headings wrap to two lines below this, and the beats grid
   tightens, so the pinned panels step into the flow early */
@media (max-width:1040px){
  .cutout--briefs,.cutout--calendars{
    position:relative;top:auto;right:auto;
    margin:0 0 2rem auto;
  }
  /* the sheet fills the width here, so the pair drops below it,
     either side of the note */
  .cutout--things{top:auto;bottom:-176px;left:2%;right:auto}
  .cutout--coke{top:auto;bottom:-182px;right:2%}
  /* and the cats peel off the sides instead of the corners */
  .diecut--wink{bottom:auto;top:36%;left:-34px;width:88px}
  .diecut--flower{bottom:auto;top:56%;right:-34px;left:auto;width:88px}
}
@media (max-width:900px){
  .cutout--plan{margin:1.6rem 0 0}
  .diecut--notes{margin:1.4rem 0 0}
  .diecut--sleep{position:relative;right:auto;bottom:auto;margin:2.4rem auto 1rem}
  .foot__meta{gap:.3rem}
}
@media (max-width:620px){
  .about__photo .cutout--plan{margin-top:.6rem}
  /* the sheet packs tighter here, so all four hang off the bottom
     edge instead, clear of the note underneath */
  .cutout--things{top:auto;bottom:-180px;left:4%;right:auto}
  .cutout--coke{top:auto;bottom:-176px;right:6%}
  /* the gutters vanish at this width, so the cats go back to the
     bottom corners and the pair sits below them */
  .diecut--wink{top:auto;bottom:-8px;left:-14px;width:92px}
  .diecut--flower{top:auto;bottom:-6px;right:-14px;width:92px}
}
@media (max-width:430px){
  /* one sticker per row down here: the pair drops below the sheet and
     the cats peel off its sides, so nothing lands on the note */
  .stickers{padding-bottom:15rem}
  .cutout--things{top:auto;bottom:-190px;left:-10px;right:auto}
  .cutout--coke{top:auto;bottom:-186px;right:-10px;left:auto}
  .diecut--wink{top:24%;bottom:auto;left:-46px;width:88px}
  .diecut--flower{top:62%;bottom:auto;right:-46px;left:auto;width:88px}
}

/* ═══════════════════════════════════════════════════════════
   ADDED · my work dropdown, freelance sheet, CV touches
   ═══════════════════════════════════════════════════════════ */

/* ── "my work" dropdown in the left pill ───────────────── */
.nav-drop{position:relative;display:flex}
.nav-drop__trigger{display:inline-flex;align-items:center;gap:.35rem}
.nav-drop__caret{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;transition:transform .3s var(--spring)}
.nav-drop__menu{
  position:absolute;top:100%;left:50%;
  min-width:max-content;
  padding:.45rem;margin-top:.6rem;
  display:flex;flex-direction:column;gap:.1rem;
  background:rgba(253,250,245,.97);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border:1px solid rgba(233,160,170,.35);
  border-radius:1rem;
  box-shadow:0 16px 34px -12px rgba(36,30,28,.22);
  opacity:0;visibility:hidden;
  transform:translate(-50%,-6px) rotate(-1.2deg);
  transition:opacity .22s ease,transform .3s var(--spring),visibility 0s linear .3s;
}
/* a bridge over the gap so the menu stays open on the way down */
.nav-drop__menu::before{content:'';position:absolute;left:0;right:0;top:-.8rem;height:.8rem}
.nav-drop:hover .nav-drop__menu,
.nav-drop:focus-within .nav-drop__menu{
  opacity:1;visibility:visible;
  transform:translate(-50%,0) rotate(-1.2deg);
  transition:opacity .22s ease,transform .3s var(--spring),visibility 0s;
}
.nav-drop:hover .nav-drop__caret,
.nav-drop:focus-within .nav-drop__caret{transform:rotate(180deg)}
.nav-drop__menu a{white-space:nowrap;border-radius:.7rem}
.nav-drop__menu a[href="#freelance"]::after{
  content:'new';display:inline-block!important;margin-left:.45rem;
  font-family:var(--hand);font-size:1.25rem;font-weight:400;line-height:0;
  color:var(--marigold);transform:rotate(-6deg);
}

.mobile-menu .mobile-menu__sub{
  margin:-.3rem 0 0 1.2rem;padding-left:1.1rem;
  font-size:.95rem;border-left:2px dashed rgba(160,48,56,.25);border-radius:0 .75rem .75rem 0;
}

/* ── dates beside a role, set small so the sentence still reads ── */
.when{
  display:inline;white-space:nowrap;
  font-size:.74rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-faint);vertical-align:.1em;
}
.inline-link{color:var(--cherry);font-weight:700;text-underline-offset:3px;text-decoration-thickness:1.5px}
.inline-link:hover{color:var(--cherry-dk)}

/* ═══════════ FREELANCE ══════════════════════════════════ */
.freelance{padding:3rem 0 7rem}
.fl__sheet{
  position:relative;
  padding:clamp(2.6rem,5vw,4rem) clamp(1.4rem,5vw,4rem) clamp(2.6rem,5vw,3.6rem);
  filter:drop-shadow(0 24px 34px rgba(36,30,28,.16));
}
.fl__sheet::before{
  content:'';position:absolute;inset:0;z-index:-1;
  background:#fff;
  /* torn in pixels, not percent, so the tear stays paper-sized on a tall sheet */
  clip-path:polygon(0% 9px, 4% 2px, 9% 11px, 14% 3px, 20% 12px, 26% 4px, 32% 13px, 39% 4px, 46% 12px, 53% 3px, 60% 11px, 67% 4px, 74% 13px, 81% 4px, 88% 11px, 94% 3px, 100% 10px, 100% calc(100% - 8px), 95% calc(100% - 1px), 89% calc(100% - 11px), 83% calc(100% - 2px), 76% calc(100% - 12px), 69% calc(100% - 3px), 62% calc(100% - 13px), 55% calc(100% - 2px), 47% calc(100% - 11px), 40% calc(100% - 3px), 33% calc(100% - 12px), 26% calc(100% - 2px), 19% calc(100% - 13px), 12% calc(100% - 3px), 6% calc(100% - 11px), 0% calc(100% - 2px));
}
.fl__sheet > .tape--tl{top:-10px;left:-14px}
.fl__sheet > .tape--tr{top:-10px;right:-14px}

.fl__head{position:relative;max-width:40rem;margin-bottom:2.8rem}
.fl__head h2{font-size:clamp(2rem,5.1vw,3.5rem)}
.fl__role{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:.3rem 1rem;
  margin:1rem 0 0;
}
.fl__role b{font-family:var(--display);font-style:italic;font-weight:600;font-size:1.18rem;color:var(--cherry)}
.fl__role span:not(.when){font-weight:700;color:var(--ink-soft)}
.scribble--flunder{position:absolute;left:0;bottom:-1.5rem;width:220px;height:20px;color:var(--marigold);stroke-width:3}

/* the numbers */
.fl__stats{
  display:grid;gap:1.6rem 2.4rem;
  grid-template-columns:repeat(6,minmax(0,1fr));
  padding:2rem 0 .4rem;margin-top:3rem;
  border-top:2px dashed var(--line);
}
.fl__stat{grid-column:span 2;display:grid;align-content:start;gap:.1rem}
.fl__stat--big{grid-column:span 3;grid-template-columns:auto auto 1fr;align-items:center;column-gap:.7rem}
.fl__stat--big .fl__lbl{grid-column:1/-1}
.fl__stat b{
  font-family:var(--display);font-weight:700;
  font-size:clamp(1.9rem,3.4vw,2.6rem);line-height:1;color:var(--cherry);
  font-variant-numeric:tabular-nums;letter-spacing:-.02em;
}
.fl__stat--big b{font-size:clamp(2.6rem,5.4vw,4.2rem);justify-self:start}
.fl__stat--big:first-child b{
  background:linear-gradient(transparent 64%,var(--pistachio) 64%,var(--pistachio) 92%,transparent 92%);
  padding:0 .08em;
}
.fl__from{
  font-family:var(--display);font-size:clamp(1.2rem,2vw,1.55rem);
  color:var(--ink-faint);text-decoration:line-through;text-decoration-color:var(--cherry);
  text-decoration-thickness:2px;
}
.fl__arrow{width:58px;height:24px;color:var(--marigold);stroke-width:2.8}
.fl__lbl{
  margin-top:.55rem;font-size:.74rem;letter-spacing:.13em;text-transform:uppercase;
  font-weight:700;color:var(--ink-faint);line-height:1.45;max-width:30ch;
}

/* story + dashboard */
.fl__grid{
  display:grid;gap:clamp(2rem,4.5vw,4rem);
  grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  align-items:start;
}
.fl__story p{color:var(--ink-soft);margin-bottom:1.1rem}
.fl__story p.lede{color:var(--ink);margin-bottom:1.3rem}
.fl__story p:last-child{margin-bottom:0}
.fl__story b{
  color:var(--ink);font-weight:700;
  background:linear-gradient(transparent 62%,var(--butter) 62%);
  padding:0 .12em;
}

.fl__side{position:relative;padding-top:.6rem}
.fl__dash{
  position:relative;margin:0;
  background:#fff;padding:8px;
  --r:1.6deg;
  box-shadow:0 22px 40px -24px rgba(36,30,28,.75),0 0 0 1px rgba(36,30,28,.07);
  cursor:grab;touch-action:none;
}
.fl__dash img{width:100%}
.fl__dashlink{display:block;cursor:inherit}
.fl__swipe{display:none}
.fl__dash:hover{--r:0deg;--s:1.02}
.fl__dash.is-held{cursor:grabbing;box-shadow:0 36px 56px -28px rgba(36,30,28,.9)}
.fl__note{margin:.9rem 0 0 auto;text-align:right;color:var(--marigold);transform:rotate(-2.5deg)}

.fl__listhead{
  margin:2.2rem 0 .9rem;font-size:1.35rem;font-style:italic;color:var(--cherry);
}
.fl__list{display:grid;gap:.7rem}
.fl__list li{
  position:relative;padding-left:1.6rem;
  font-size:.97rem;line-height:1.55;color:var(--ink-soft);
}
.fl__list li::before{
  content:'';position:absolute;left:0;top:.5em;
  width:.7rem;height:.7rem;border-radius:50% 45% 55% 40%;
  background:var(--blush);transform:rotate(18deg);
}
.fl__list li:nth-child(2)::before{background:var(--pistachio)}
.fl__list li:nth-child(3)::before{background:var(--marigold)}
.fl__list li:nth-child(4)::before{background:var(--butter);box-shadow:inset 0 0 0 1px rgba(36,30,28,.15)}

/* the four posts, shown as they are (flattened onto the sheet's white) */
.fl__posts{margin:0 calc(clamp(1.4rem,5vw,4rem) * -.5) 2.8rem}
.fl__posts img{width:100%}
.fl__postsnote{text-align:center;margin:.4rem 0 0;color:var(--cherry);transform:rotate(-1.5deg)}

/* the new skill stickers (the long ones wrap on phones, so centre them) */
.sticker{text-align:center}
.s17{background:var(--butter);color:var(--cherry-dk);--r:-1.8deg}
.s18{background:var(--ink);color:var(--pistachio);--r:2.2deg}
.s19{background:var(--blush);color:var(--cherry-dk);--r:-2.6deg}
.s20{background:var(--pistachio);color:#3d5220;--r:1.4deg}
.s21{background:var(--paper);color:var(--ink);--r:-1deg;border-color:var(--ink)}
.s22{background:var(--marigold);color:#4a2306;--r:2.8deg}
.s23{background:var(--cherry);color:var(--butter);--r:-2deg}

/* résumé summary in the back cover */
.foot__summary{
  max-width:62ch;margin:0 0 1.6rem;
  font-family:var(--display);font-style:italic;
  font-size:clamp(.98rem,1.3vw,1.08rem);line-height:1.6;color:var(--ink-soft);
}

@media (max-width:900px){
  .fl__grid{grid-template-columns:1fr}
  .fl__side{max-width:560px}
  .fl__stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fl__stat{grid-column:span 1}
  .fl__stat--big{grid-column:1/-1}
}
@media (max-width:620px){
  /* too small to read four across, so the row scrolls sideways */
  .fl__posts{
    overflow-x:auto;overflow-y:hidden;
    margin-inline:calc(clamp(1.4rem,5vw,4rem) * -1);padding-inline:1rem;
    -webkit-overflow-scrolling:touch;
  }
  .fl__posts img{width:680px;max-width:none;height:auto}
  .fl__stat--big b{font-size:2.5rem}
  .fl__arrow{width:44px}
  .fl__swipe{display:inline}
  /* more room for the words on small phones */
  .about__body{padding:2rem 1.3rem}
}

/* touch screens: a vertical swipe on a draggable piece scrolls the page,
   a sideways one still picks it up */
@media (pointer:coarse){
  [data-drag][data-drag]{touch-action:pan-y}
}