/* ============================================================
   SUN'S SCRAPBOOK — styles
   Paper foundation + typography + mounts + stepped animation.
   Everything sits crooked; shadows are paper shadows; no glows.
   ============================================================ */

/* ---------- tokens ---------- */
:root{
  --desk:#8a6f57; --desk-2:#7d6249;
  --kraft:#c9a87c; --kraft-dark:#b8977e;
  --cream:#fbf6e9; --white-paper:#fdfcf7;
  --graph:#eef3ee; --graph-line:#b9d4c9;
  --lined:#fffdf4; --lined-line:#a8c7e4; --lined-margin:#e8a0a0;
  /* REDESIGN v2: muted, aged, desaturated — no pastel rainbow */
  --sticky-yl:#e0cb92; --sticky-pk:#d3a89c; --sticky-bl:#aebcc4; --sticky-gn:#b9c19c;
  --ink:#241f1b; --ink-soft:#463f37;
  --pen-blue:#3a4f7a; --marker-red:#b23a2e; --pencil:#6b6459;
  --tape:rgba(214,200,164,.5);
  --highlight:rgba(214,182,86,.5);
  --cmyk-c:#00b7eb; --cmyk-m:#ff2e88;
  --paper-shadow:0 2px 0 rgba(43,38,32,.07), 2px 6px 14px rgba(43,38,32,.18);
  --paper-shadow-lift:0 3px 0 rgba(43,38,32,.09), 6px 14px 26px rgba(43,38,32,.28);
  /* pencil cursor */
  --cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 26 26'%3E%3Cpath d='M3 23 L6 16 L18 4 L22 8 L10 20 Z' fill='%23f2c14e' stroke='%232b2620' stroke-width='1.4'/%3E%3Cpath d='M3 23 L6 16 L9 19 Z' fill='%232b2620'/%3E%3C/svg%3E") 2 24, auto;
}

*{box-sizing:border-box; margin:0; padding:0;}
/* clip horizontal transform-overshoot from rotated/scaled paper elements so
   there's never a sideways scrollbar (layout itself fits; this only trims the
   decorative overshoot at the viewport edge). */
html{scroll-behavior:auto; overflow-x:clip;}
body{
  font-family:"Patrick Hand", "Comic Sans MS", cursive;
  color:var(--ink);
  background:#f1f1ec;
  cursor:var(--cursor);
  overflow-x:hidden;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
a{cursor:var(--cursor);}
img{max-width:100%; height:auto; display:block;}

/* ---------- REDESIGN v2: ONE consistent rough-paper background, fixed,
   fills the whole screen, never changes between sections ---------- */
body.desk{ background:#f1f1ec; }
.paper-bg{
  position:fixed; inset:-10px; z-index:-1; pointer-events:none;
  background:#f1f1ec url("assets/img/paper-bg.jpg") center center / cover no-repeat;
  filter:url(#paperMove); will-change:filter;
}
@media (prefers-reduced-motion:reduce){ .paper-bg{ filter:none; } }
/* staples — for cut-out/transparent images (instead of tape) */
/* one paperclip on cut-out/transparent images — clipped onto the top edge */
.photo-clip{ position:absolute; top:-20px; width:25px; height:58px; z-index:18; pointer-events:none; transform:rotate(var(--pcrot,-6deg)); filter:drop-shadow(1px 2px 1px rgba(0,0,0,.32)); }
.photo-clip svg{ width:100%; height:100%; display:block; }
.grain-overlay{
  position:fixed; inset:0; pointer-events:none; z-index:1; opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0.05'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;
}

/* ---------- cover flap: opens on load, revealing the hero. Robust: hidden
   without JS (body.js gate), pointer-events:none so it never traps clicks,
   CSS-driven so it flips away even if the cleanup JS never runs. ---------- */
.cover-flap{ display:none; }
body.js .cover-flap{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:22px;
  position:fixed; inset:0; z-index:200; padding:40px; pointer-events:none;
  background:#eceae2 url("assets/img/paper-bg.jpg") center center / cover no-repeat;
  box-shadow: inset 0 0 140px rgba(0,0,0,.14);
  transform-origin:50% 0%; backface-visibility:hidden;
  animation: flapOpen 1.05s steps(6) .45s forwards;
}
.cover-flap::after{ /* a strip of masking tape holding the cover shut */
  content:""; position:absolute; top:calc(50% - 60px); left:50%; width:150px; height:34px; margin-left:-75px;
  background:var(--tape); transform:rotate(-4deg); box-shadow:0 1px 4px rgba(0,0,0,.15);
  clip-path:polygon(2% 0,98% 5%,100% 96%,0 100%,1% 52%);
}
.flap-kicker{ font-family:"Special Elite",monospace; font-size:.9rem; letter-spacing:3px; text-transform:uppercase; color:var(--ink-soft); }
.flap-title{ font-family:"Permanent Marker",cursive; font-size:clamp(2.6rem,9vw,5.6rem); line-height:1.02; text-align:center; color:var(--ink); text-transform:uppercase; letter-spacing:1px; }
.flap-stamp{ font-family:"Special Elite",monospace; font-size:.8rem; color:var(--marker-red); border:2.5px solid var(--marker-red); padding:4px 14px; transform:rotate(-3deg); text-transform:uppercase; letter-spacing:1px; opacity:.85; mix-blend-mode:multiply; }
.flap-hint{ font-family:"Caveat",cursive; font-size:1.6rem; color:var(--ink-soft); margin-top:6px; }
@keyframes flapOpen{
  0%{ transform: perspective(1500px) rotateX(0deg); opacity:1; }
  78%{ opacity:1; }
  100%{ transform: perspective(1500px) rotateX(-114deg); opacity:0; }
}
@media (prefers-reduced-motion:reduce){ body.js .cover-flap{ display:none !important; } }

/* =========================================================
   TYPOGRAPHY
   ========================================================= */
h1,h2,h3,h4{font-weight:400; line-height:1.05;}
h3{font-family:"Caveat", cursive; font-size:2rem; font-weight:700; color:var(--ink); margin:.1em 0 .3em; letter-spacing:.2px;}
h3 a{color:var(--ink); text-decoration:none; border-bottom:3px solid var(--marker-red);}
h4{font-family:"Caveat", cursive; font-size:1.5rem; font-weight:700;}
p{font-size:1.12rem;}
b{font-weight:400; position:relative; padding:0 .12em; background:linear-gradient(104deg, transparent 1%, var(--highlight) 3%, var(--highlight) 97%, transparent 99%); box-decoration-break:clone; -webkit-box-decoration-break:clone; color:var(--ink);}

/* typewriter tags / typed body */
.typed{font-family:"Special Elite", monospace;}
.entry-tag{font-family:"Special Elite", monospace; font-size:.72rem; text-transform:uppercase; letter-spacing:.6px; color:var(--ink-soft); background:rgba(255,255,255,.5); display:inline-block; padding:2px 7px; border:1px dashed rgba(43,38,32,.3); margin-bottom:.5em;}
.sec-intro{font-family:"Special Elite", monospace; font-size:.98rem; line-height:1.7; max-width:52ch; color:var(--ink-soft); background:rgba(255,255,255,.35); padding:8px 12px; border-left:3px solid var(--marker-red);}

/* links */
a.text-link,a.plain-link{color:var(--pen-blue); text-decoration:none; border-bottom:2px solid var(--pen-blue); font-weight:400;}
a.text-link{font-family:"Caveat",cursive; font-size:1.3rem;}

/* ransom-note cutout headlines */
/* REDESIGN v2: rough hand-lettered INK headers (no pastel ransom cutout letters).
   Words stay whole (never break mid-word); choppy ink edge via the boil filter. */
h1.cutout,h2.cutout{
  display:block; font-family:"Permanent Marker","Rock Salt",cursive; font-weight:400;
  color:var(--ink); line-height:.96; letter-spacing:.4px; text-transform:uppercase;
  word-break:normal; overflow-wrap:normal; hyphens:none;
  filter:url(#boil); transform:rotate(-1.4deg); transform-origin:left center;
}
.hero-title{font-size:clamp(2.2rem,5.6vw,4.7rem); max-width:16ch;}
h2.cutout{font-size:clamp(2.1rem,6vw,3.8rem); margin-bottom:.35em; position:relative; display:inline-block;}
/* rough red marker underline under section headers (boil makes it a ragged stroke) */
h2.cutout::after{
  content:""; position:absolute; left:-.1em; right:-.15em; bottom:-.16em; height:7px;
  background:var(--marker-red); border-radius:3px; filter:url(#boil); opacity:.9;
}

/* misprint / halftone (applied in typography phase to select heads) */
.misprint{text-shadow:2.5px 1.5px 0 var(--cmyk-m), -2.5px -1.5px 0 var(--cmyk-c);}

/* handwritten scribbles */
.scribble{font-family:"Caveat",cursive; font-size:1.5rem; color:var(--pen-blue); transform:rotate(-3deg); display:inline-block;}

/* =========================================================
   SCATTER + SLAP + HOVER (stepped)
   ========================================================= */
.scrap{transform:rotate(var(--rot,0deg)) translate(var(--dx,0),0);}
/* content is visible by default; only hidden (to be revealed by JS) when JS is
   active. If scripts fail/stall, nothing ever stays invisible. */
body.js .slap{opacity:0;}
.slap.in{animation:slap .4s steps(4) both; animation-delay:var(--slap-delay,0ms);}
@keyframes slap{
  0%{opacity:0; transform:scale(1.35) rotate(calc(var(--rot,0deg) + 6deg)) translate(var(--dx,0),0);}
  35%{opacity:1; transform:scale(.9) rotate(calc(var(--rot,0deg) - 3deg)) translate(var(--dx,0),0);}
  70%{opacity:1; transform:scale(1.07) rotate(var(--rot,0deg)) translate(var(--dx,0),0);}
  100%{opacity:1; transform:scale(1) rotate(var(--rot,0deg)) translate(var(--dx,0),0);}
}
/* REDESIGN v2: CHOPPY "on-threes" hover for PICTURES ONLY — jumps between 3 poses
   ~0.7s each (very low fps) for the Spider-Verse choppy feel. Text has NO hover. */
.polaroid,.photo-tape,.film-strip,.flyer,.browser-print,.framed{
  transition:box-shadow .18s steps(2,end);
}
/* HARD-CUT frames (0.01% gaps = instant jump) so it truly judders on-threes,
   not a smooth tween. Each pose holds ~0.7s then snaps to the next. */
@keyframes chopPose{
  0%,32%      { transform:rotate(1.6deg)  scale(1.05)  translateY(-5px); }
  32.01%,65%  { transform:rotate(-2.6deg) scale(1.055) translate(4px,-3px); }
  65.01%,100% { transform:rotate(0.6deg)  scale(1.05)  translateY(-7px); }
}
.polaroid:hover,.photo-tape:hover,.film-strip:hover,.flyer:hover,.browser-print:hover,
.framed:hover,.tool-sticker:hover{
  animation:chopPose 2.1s linear infinite; z-index:20; position:relative;
}
/* lift shadow ONLY on boxed mounts — cut-outs (blend / skill logos) stay
   transparent so no ghost square shows on hover */
.polaroid:hover,.film-strip:hover,.flyer:hover,.browser-print:hover,.framed:hover,
.photo-tape:not(.blend):hover{ box-shadow:var(--paper-shadow-lift); }
@media (prefers-reduced-motion:reduce){
  .polaroid:hover,.photo-tape:hover,.film-strip:hover,.flyer:hover,.browser-print:hover,
  .framed:hover,.tool-sticker:hover{ animation:none; }
}

@media (prefers-reduced-motion:reduce){
  .slap{opacity:1 !important; animation:none !important;}
  *{transition:none !important;}
}

/* =========================================================
   PAPER MOUNTS
   ========================================================= */
.tape-strip{
  position:absolute; width:88px; height:24px; z-index:15;
  background:var(--tape);
  transform:rotate(var(--rot,-4deg));
  box-shadow:0 1px 3px rgba(43,38,32,.15);
  clip-path:polygon(2% 0,98% 5%,100% 96%,0 100%,1% 52%);
  backdrop-filter:saturate(.85) brightness(1.04);
  pointer-events:none;
}
.tape-strip::after{content:""; position:absolute; inset:0; background:repeating-linear-gradient(90deg,transparent 0 5px, rgba(255,255,255,.12) 5px 6px);}
.pushpin{
  position:absolute; top:-9px; left:50%; margin-left:-9px; width:18px; height:18px; z-index:16;
  border-radius:50%;
  background:radial-gradient(circle at 34% 28%, #ff8474, #c92f1d 72%);
  box-shadow:2px 4px 5px rgba(0,0,0,.35), inset -2px -2px 3px rgba(0,0,0,.25);
  pointer-events:none;
}
.pushpin::after{content:""; position:absolute; top:6px; left:6px; width:4px; height:4px; border-radius:50%; background:rgba(255,255,255,.6);}
.paperclip{position:absolute; top:-18px; right:16px; width:26px; height:58px; z-index:16; pointer-events:none;}
.paperclip svg{width:100%; height:100%;}

/* polaroid */
.polaroid{
  background:#fff; padding:11px 11px 40px; position:relative;
  box-shadow:var(--paper-shadow); max-width:410px;
}
/* REDESIGN v2: show FULL photos — no forced aspect crop (VML screenshots were cut) */
.polaroid img{width:100%; height:auto; background:#e7e3d8; display:block;}
.polaroid.portrait img{aspect-ratio:auto;}
.polaroid figcaption,.photo-tape figcaption,.film-strip figcaption,.flyer figcaption,.browser-print figcaption{
  font-family:"Caveat",cursive; font-size:1.3rem; text-align:center; color:var(--ink); margin-top:7px; line-height:1;
}
/* dog-ear fold on some cards */
.polaroid:nth-of-type(3n)::after{content:""; position:absolute; bottom:0; right:0; border-width:0 0 22px 22px; border-style:solid; border-color:transparent transparent rgba(0,0,0,.08) rgba(0,0,0,.04);}

/* taped photo (no white frame; tape holds it) */
.photo-tape{background:#fff; padding:8px; position:relative; box-shadow:var(--paper-shadow); max-width:440px;}
/* REDESIGN v2: transparent images = roughly HAND-CUT paper in their own shape —
   white rim follows the silhouette, #roughcut makes the edge ragged. No square card. */
.photo-tape.blend{background:none; box-shadow:none; padding:0;}
.photo-tape.blend img{
  filter:
    drop-shadow(2.5px 0 0 #f6f3ec) drop-shadow(-2.5px 0 0 #f6f3ec)
    drop-shadow(0 2.5px 0 #f6f3ec) drop-shadow(0 -2.5px 0 #f6f3ec)
    drop-shadow(2px 2px 0 #f6f3ec) drop-shadow(-2px -2px 0 #f6f3ec)
    drop-shadow(2px -2px 0 #f6f3ec) drop-shadow(-2px 2px 0 #f6f3ec)
    url(#roughcut)
    drop-shadow(3px 5px 4px rgba(0,0,0,.25));
}
.photo-tape img{width:100%; height:auto; object-fit:contain;}
.photo-tape figcaption{margin-top:5px;}
/* REDESIGN v2.4: cut-out (transparent) photos have no visible frame, so the label
   crowds the silhouette — give it breathing room. CareQuip already reads fine
   (its PNG has bottom whitespace), so keep that one tight. */
.photo-tape.blend figcaption{margin-top:20px;}
.photo-tape.blend:has(.price-tag) figcaption{margin-top:8px;}

/* film strip (video thumbs) */
.film-strip{
  background:#1a1712; padding:20px 12px; position:relative; box-shadow:var(--paper-shadow); max-width:440px;
  background-image:
    radial-gradient(circle, #f4efe2 3px, transparent 3.5px),
    radial-gradient(circle, #f4efe2 3px, transparent 3.5px);
  background-size:16px 16px, 16px 16px;
  background-position:0 0, 0 100%;
  background-repeat:repeat-x, repeat-x;
}
.film-strip a{display:block;}
.film-strip img{width:100%; height:auto; aspect-ratio:16/9; object-fit:cover;}
.film-strip figcaption{color:#f0ead9;}

/* concert flyer (pinned) */
.flyer{background:#fff; padding:6px; position:relative; box-shadow:var(--paper-shadow); max-width:300px;}
.flyer img{width:100%; height:auto;}

/* browser-window printout */
.browser-print{background:#fff; padding:0 0 34px; position:relative; box-shadow:var(--paper-shadow); max-width:480px; border:1px solid rgba(43,38,32,.15);}
.browser-print::before{content:"● ● ●"; display:block; font-size:9px; letter-spacing:3px; color:#c9433a; background:#ece7db; padding:5px 9px; border-bottom:1px solid rgba(43,38,32,.15);}
.browser-print img{width:100%; height:auto;}
.browser-print figcaption{position:absolute; bottom:8px; left:0; right:0;}

/* framed certificate */
.framed{background:#fff; padding:10px; border:6px solid #d8c9a0; box-shadow:var(--paper-shadow); max-width:340px;}
.framed img{width:100%;}

/* =========================================================
   STICKY NOTES
   ========================================================= */
.sticky{
  position:relative; padding:20px 22px; max-width:340px;
  box-shadow:2px 4px 10px rgba(43,38,32,.2);
  font-family:"Patrick Hand",cursive; font-size:1.14rem; color:var(--ink);
}
.sticky-yl{background:var(--sticky-yl);}
.sticky-pk{background:var(--sticky-pk);}
.sticky-bl{background:var(--sticky-bl);}
.sticky-gn{background:var(--sticky-gn);}
/* curled corner shadow */
.sticky::after{content:""; position:absolute; bottom:0; right:0; width:34px; height:24px; background:linear-gradient(135deg, transparent 46%, rgba(0,0,0,.10) 55%); }
.big-sticky{max-width:420px; padding:24px 26px;}
.big-sticky h3{margin-top:.1em;}

/* =========================================================
   BINDER NAV
   ========================================================= */
.binder-brand{
  position:fixed; top:16px; left:18px; z-index:60;
  font-family:"Special Elite", monospace; font-size:.8rem; letter-spacing:1px;
  color:#f4efe2; background:#241f19; padding:7px 12px;
  text-decoration:none; transform:rotate(-2deg);
  box-shadow:2px 3px 0 rgba(0,0,0,.3); border:1px solid #000;
}
.brand-dot{color:var(--marker-red);}
.binder-tabs{position:fixed; top:50%; right:0; transform:translateY(-50%); z-index:60; display:flex; flex-direction:column; gap:8px;}
.binder-tabs a{
  writing-mode:vertical-rl; text-orientation:mixed;
  font-family:"Caveat",cursive; font-weight:700; font-size:1.15rem;
  color:var(--ink); text-decoration:none;
  padding:14px 7px; border-radius:8px 0 0 8px;
  box-shadow:-2px 3px 8px rgba(0,0,0,.22);
  transform:translateX(22px); transition:transform .15s steps(2,end);
}
.binder-tabs a:nth-child(1){background:var(--sticky-bl);}   /* About me */
.binder-tabs a:nth-child(2){background:var(--sticky-pk);}   /* Engineering */
.binder-tabs a:nth-child(3){background:var(--sticky-gn);}   /* Creative */
.binder-tabs a:nth-child(4){background:var(--sticky-yl);}   /* Commercial */
.binder-tabs a:nth-child(5){background:#b3a7bf;}            /* Extracurricular (muted lilac) */
.binder-tabs a:nth-child(6){background:#cbb79a;}            /* Contact me (tan CTA) */
.binder-tabs a:hover,.binder-tabs a.tab-active{transform:translateX(6px);}

/* =========================================================
   HERO COVER
   ========================================================= */
/* REDESIGN v2: hero fills the viewport on the paper bg, left-aligned to a
   content rail like the ORIGINAL — no kraft "page", no rotation/shadow. */
/* REDESIGN v2.1: hero sized to FIT one screen on load (no scroll needed) */
.hero.cover{
  position:relative; z-index:2; min-height:100svh;
  margin:0 auto; max-width:1280px; padding:clamp(52px,8vh,92px) clamp(22px,4vw,52px) clamp(28px,5vh,56px);
  background:none; box-shadow:none; transform:none;
  display:flex; flex-direction:column; justify-content:center;
}
.hero.cover::before{content:none;}
/* REDESIGN v2.3: hero = original's 2-column layout — text column left, photo
   right, vertically centered, fits one screen. */
.cover-inner{
  position:relative; z-index:2;
  display:grid; grid-template-columns:minmax(0,1fr) minmax(300px,440px); gap:clamp(24px,4vw,60px); align-items:center;
}
.hero-text{ display:flex; flex-direction:column; align-items:flex-start; gap:clamp(13px,2.1vh,24px); min-width:0; }
.sticker-label{
  display:inline-block; font-family:"Special Elite",monospace; font-size:.82rem; letter-spacing:.5px;
  color:#f4efe2; background:#241f19; padding:6px 12px; box-shadow:2px 3px 0 rgba(0,0,0,.3);
}
.hero-title{margin:0;}
.hero-notes{display:flex; flex-direction:column; gap:12px; max-width:480px;}
.hero-notes .sticky{transform:rotate(var(--rot,0deg));}
.hero-notes .sticky:nth-child(2){margin-left:40px; margin-top:-6px;}
.hero-photo{margin:0; justify-self:center;}
.hero-photo img{width:clamp(250px,32vw,410px); height:auto; aspect-ratio:auto; object-fit:contain;}
/* v2.12: little hand-drawn sun in the empty space above/left of the photo. Lives in
   .cover-inner so it scrolls away with the hero. Rays spin in stepped jumps (choppy,
   on-brand) and the #boil filter gives it a living-ink wobble. */
.sun-doodle{
  position:absolute; top:13%; left:60%;
  width:clamp(50px,5.6vw,80px); z-index:1;
  color:#cf9f3a; pointer-events:none;
}
.sun-doodle svg{display:block; width:100%; height:auto; overflow:visible;}
.sun-doodle .sun-rays{transform-origin:60px 60px; animation:sunspin 8s steps(8) infinite;}
@keyframes sunspin{to{transform:rotate(360deg);}}
@media (prefers-reduced-motion: reduce){ .sun-doodle .sun-rays{animation:none;} }
/* the empty space next to the photo only exists in the 2-column desktop hero — on
   the stacked mobile hero the sun would overlap the title, so hide it there. */
@media (max-width:820px){ .sun-doodle{display:none;} }

.luggage-tag{
  display:inline-flex; flex-direction:column; gap:5px; align-self:flex-start; position:relative;
  font-family:"Special Elite",monospace; font-size:.76rem; color:var(--ink);
  background:var(--cream); padding:26px 30px 15px;
  box-shadow:var(--paper-shadow);
}
.luggage-tag span{white-space:nowrap;}   /* Imperial line stays on one line */
.hero-meta.clipped .paperclip{ top:-22px; left:26px; right:auto; height:42px; }
.rubber-stamp{
  font-family:"Special Elite",monospace; color:var(--marker-red); font-weight:700;
  border:2.5px solid var(--marker-red); padding:2px 8px; display:inline-block;
  transform:rotate(-4deg); letter-spacing:1px; text-transform:uppercase; font-size:.8rem;
  opacity:.82; mix-blend-mode:multiply; align-self:flex-start; margin-top:3px;
}
.scroll-cue{position:absolute; bottom:18px; left:50%; transform:translateX(-50%); text-align:center; z-index:3;}
.cue-arrow{display:block; font-size:1.8rem; color:var(--marker-red);}

/* =========================================================
   EDUCATION report cards
   ========================================================= */
.edu{position:relative; z-index:2; max-width:1280px; margin:62px auto 30px; padding:0 clamp(22px,3.5vw,44px); display:flex; flex-wrap:wrap; gap:24px;}
.report-card{
  flex:1 1 340px; position:relative;
  background:var(--cream); padding:20px 22px;
  box-shadow:var(--paper-shadow);
  background-image:repeating-linear-gradient(transparent 0 27px, rgba(43,38,32,.08) 27px 28px);
}
.rc-school{display:block; font-family:"Caveat",cursive; font-size:1.8rem; font-weight:700; color:var(--ink); border-bottom:2px solid var(--marker-red); padding-bottom:2px; margin-bottom:6px;}
.rc-label{display:block; font-family:"Special Elite",monospace; font-size:.82rem; line-height:1.7; color:var(--ink-soft);}

/* =========================================================
   SPREADS (section paper stocks)
   ========================================================= */
/* REDESIGN v2: sections are transparent full-width content bands on the ONE
   paper bg — no colored "pages", no card shadow/rotation (like the original). */
/* REDESIGN v2.1: wider content — use the horizontal space, smaller side margins */
.spread{
  position:relative; z-index:2;
  max-width:1280px; margin:0 auto;
  /* REDESIGN v2.5: tighter, consistent section rhythm — the old 78/32 pad left a
     big awkward gap between sections. Same values on every .spread → even spacing. */
  padding:clamp(24px,3vw,42px) clamp(22px,3.5vw,44px) clamp(10px,1.5vw,20px);
}
.spread.graph, .spread.kraft, .spread.lined, .spread.cream,
.spread.cork, .spread.cardboard, .spread.sticker-sheet{
  background:none; box-shadow:none; transform:none;
}

/* section header + sketchy boiling icon (numbers removed per user) */
.sec-head{margin-bottom:.5em; position:relative; z-index:3; display:flex; align-items:center; gap:16px; flex-wrap:wrap;}
.sec-icon{display:inline-flex; align-items:center; color:var(--marker-red);}
.sec-icon svg{width:clamp(38px,4.4vw,54px); height:auto; overflow:visible;}
.sec-intro{margin-bottom:32px;}
/* v2.9: every section intro reads as ONE line that can run past the header width
   (box hugs its text via max-content); still wraps on narrow/mobile via max-width. */
.sec-intro{max-width:100%; width:max-content;}
.scrawl-num{display:none;}

/* =========================================================
   CLUSTERS (entry layout — deliberately overlapping)
   ========================================================= */
.cluster{
  position:relative; z-index:2;
  display:flex; flex-wrap:wrap; gap:clamp(24px,3.2vw,52px); align-items:center;
  margin:0 0 clamp(30px,3.8vw,50px);
}
.cluster.lean-l{flex-direction:row;}
.cluster.lean-r{flex-direction:row-reverse;}
.cluster.solo{justify-content:flex-start;}
/* FINAL: clusters where a tall portrait photo dwarfs shorter text — top-align so the
   text reads as placed near the top instead of floating in a dead centre band. Small
   top offset keeps it from looking rigidly pinned. Only applies at ≥820px (mobile stacks). */
@media (min-width:821px){
  .cluster.top-align{align-items:flex-start;}
  .cluster.top-align > .index-card{margin-top:clamp(18px,2.4vw,42px);}
}
/* v2.7: lift EWB up into the empty left space beside the tall Thai Soc VP photo —
   desktop only (on mobile the cluster stacks, so a negative margin would overlap). */
@media (min-width:900px){ #extras .ewb-lift{margin-top:-140px;} }
.cluster > .index-card{flex:1 1 400px; min-width:min(100%,340px);}
.cluster > figure{flex:0 1 auto;}
.cluster.lean-r > figure{margin-right:-14px;}
.cluster.lean-l > figure{margin-left:-14px;}

/* REDESIGN v2: text lives ON the paper — no white box. */
.index-card{
  background:none; box-shadow:none; padding:2px 0; position:relative;
}
.index-card::before{content:none;}

/* chips = little taped labels */
.chips{display:flex; flex-wrap:wrap; gap:7px; margin-top:12px;}
.chip{font-family:"Special Elite",monospace; font-size:.72rem; background:var(--sticky-yl); color:var(--ink); padding:3px 9px; box-shadow:1px 2px 3px rgba(43,38,32,.18); transform:rotate(-1.5deg);}
.chip:nth-child(even){background:var(--sticky-bl); transform:rotate(1.5deg);}
.chip:nth-child(3n){background:var(--sticky-pk);}
.soon-note{font-family:"Caveat",cursive; font-size:1.35rem; color:var(--marker-red); margin-top:8px; transform:rotate(-2deg);}

/* photo piles */
/* v2.6: one VML polaroid tilts clearly LEFT for variety (scatter otherwise left it
   near-straight, so all three leaned right/straight). !important beats the inline
   --rot the scatter JS sets; --dx (offset) is untouched. */
.vml-tilt-l{--rot:-5deg !important;}
.pile{display:flex; flex-wrap:wrap; gap:26px; justify-content:center; align-items:flex-start; margin:0 auto clamp(28px,3.6vw,48px); max-width:1040px;}
.pile figure{flex:0 1 auto; max-width:300px;}
/* v2.14: VML pile stays ONE horizontal line (factory floor · injection moulding ·
   flow diagram), with the flow diagram on the right a bit larger. Widen the pile so
   300+300+400 + gaps fit on one row; wraps to stack on narrow/mobile as usual. */
.pile.vml-pile{max-width:1120px;}
/* v2.15: the flow diagram — bigger, angled the OTHER way (so the 3 don't all lean
   right), and slightly overlapping the injection-moulding photo on top. The overlap
   is desktop-only; on the stacked mobile pile it would shove the flow off-centre. */
.pile figure.vml-flow{
  max-width:460px;
  --rot:-4deg !important;
  position:relative;
}
@media (min-width:900px){ .pile figure.vml-flow{ margin-left:-46px; z-index:3; } }
.pile.two{max-width:820px;}
.pile.two figure{max-width:400px; flex:1 1 360px;}
.pile figure:nth-child(2){margin-top:24px;}
.pile figure:nth-child(3){margin-top:-8px;}
/* REDESIGN v2.4: NoteFeed screenshots — bigger; a gentle overlapped stack on
   wide screens only (below that they lay out as a normal spaced pile).
   v2.14: enlarged 360→405 so the 3 shots fill the section width (they left too much
   empty space on the sides); overlapped span ≈1155px stays inside the ~1192 content. */
.pile.note-pile{max-width:1160px; gap:22px;}
.pile.note-pile figure{max-width:400px; flex:0 1 auto; position:relative;}
@media (min-width:1080px){
  .pile.note-pile{gap:0;}
  .pile.note-pile figure:nth-child(1){transform:rotate(-1.4deg); z-index:1; margin-top:14px;}
  .pile.note-pile figure:nth-child(2){margin-left:-30px; margin-top:0; transform:rotate(1deg); z-index:3;}
  .pile.note-pile figure:nth-child(3){margin-left:-30px; margin-top:20px; transform:rotate(-0.8deg); z-index:2;}
}

/* PTTEP: text + gallery stacked on the left, tall platform photo on the right —
   uses the tall photo's height for the left column so no space is wasted. */
.cluster.pttep{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:clamp(26px,3vw,50px); align-items:stretch;}
.pttep-main{display:flex; flex-direction:column; gap:24px; min-width:0;}
/* push the two small photos to the bottom of the column + spread them so they
   fill the space beside the tall portrait (REDESIGN v2.4) */
/* v2.7: space-AROUND (not between) the two small photos — space-between shoved the
   2nd hard against the tall portrait ("too full on the right"). space-around pulls
   it back so gap(small1,small2) ≈ gap(small2,tall): all three read equally spaced. */
.pttep-gallery{display:flex; flex-wrap:wrap; gap:38px; margin-top:auto; padding-top:16px; justify-content:space-around;}
.pttep-gallery figure{max-width:275px;}
.pttep-tall{align-self:start; margin:0;}
@media (max-width:820px){ .cluster.pttep{grid-template-columns:1fr;} .pttep-tall{justify-self:center;} }

/* price tag */
.price-tag{
  position:absolute; top:10px; right:-14px; z-index:14;
  font-family:"Special Elite",monospace; font-size:.9rem; color:var(--ink);
  background:#fff; padding:5px 12px 5px 20px; transform:rotate(6deg);
  box-shadow:var(--paper-shadow);
  clip-path:polygon(14% 0,100% 0,100% 100%,14% 100%,0 50%);
}
.price-tag::before{content:""; position:absolute; left:6px; top:50%; margin-top:-3px; width:6px; height:6px; border-radius:50%; background:var(--ink);}

/* =========================================================
   SKILLS sticker sheet
   ========================================================= */
.stickers{display:flex; flex-wrap:wrap; align-items:flex-start; gap:clamp(16px,2.4vw,30px); justify-content:center; padding:14px 0 54px;}
/* stagger heights so stickers look slapped on haphazardly, not in flat rows */
.tool-sticker:nth-child(3n+2){margin-top:24px;}
.tool-sticker:nth-child(3n+3){margin-top:10px;}
.tool-sticker:nth-child(4n){margin-top:34px;}
.tool-sticker:nth-child(7n){margin-top:44px;}
/* REDESIGN v2.1: skills = CUT-OUT logos (rough hand-cut paper edge like the
   transparent images) — no paper-slip box. */
.tool-sticker{
  display:flex; flex-direction:column; align-items:center; gap:13px; /* v2.8: more space between icon + label */
  padding:6px 8px; width:104px; background:none; box-shadow:none; clip-path:none;
}
.tool-sticker img{
  width:50px; height:50px; object-fit:contain;
  filter:
    drop-shadow(2px 0 0 #f6f3ec) drop-shadow(-2px 0 0 #f6f3ec)
    drop-shadow(0 2px 0 #f6f3ec) drop-shadow(0 -2px 0 #f6f3ec)
    drop-shadow(2px 2px 0 #f6f3ec) drop-shadow(-2px -2px 0 #f6f3ec)
    drop-shadow(2px -2px 0 #f6f3ec) drop-shadow(-2px 2px 0 #f6f3ec)
    url(#roughcut)
    drop-shadow(2px 3px 2px rgba(0,0,0,.28));
}
.tool-sticker span{font-family:"Special Elite",monospace; font-size:.76rem; color:var(--ink); text-align:center; letter-spacing:.2px; line-height:1.15;}

/* EWB logo stickers */
.logo-row{display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin-top:14px;}
.logo-sticker{display:inline-flex; align-items:center; gap:5px; background:#fff; padding:7px 10px; border-radius:10px; box-shadow:0 0 0 2px #fff, var(--paper-shadow); font-family:"Patrick Hand",cursive; font-size:.9rem;}
.logo-sticker img{height:26px; width:auto; object-fit:contain;}

/* =========================================================
   HIGHLIGHTS cork board
   ========================================================= */
.hl-featured{
  display:flex; flex-wrap:wrap; gap:26px; align-items:center; justify-content:center; position:relative;
  background:var(--cream); padding:24px; margin:0 auto 34px; /* v2.7: centre the card in the section */
  box-shadow:var(--paper-shadow); max-width:860px;
}
.hl-featured > div{flex:1 1 300px;}
.hl-featured .framed{flex:0 0 auto;}
/* masonry columns so pinned cards stagger at varied heights (a chaotic
   cork-board, not a tidy grid) */
.pinboard{column-count:3; column-gap:clamp(18px,2.6vw,32px); max-width:920px; margin:0 auto;}
.hl-card.ticket{
  position:relative; width:100%; display:inline-block; break-inside:avoid;
  margin:0 0 clamp(20px,2.4vw,30px); background:var(--white-paper);
  padding:18px 18px 20px; box-shadow:var(--paper-shadow);
  clip-path:polygon(0 4%,4% 0,96% 2%,100% 6%,99% 95%,95% 100%,4% 98%,0 94%);
}
/* nudge every other card down so column tops don't line up */
.pinboard .hl-card:nth-child(3n+2){margin-top:34px;}
.pinboard .hl-card:nth-child(5n+3){margin-top:16px;}
.hl-card.ticket:nth-child(3n+1){background:#fff7e8;}
.hl-card.ticket:nth-child(3n+2){background:#f3f8ff;}
.hl-card h4{margin-bottom:6px; color:var(--ink);}
.hl-card p{font-size:1rem; color:var(--ink-soft);}
.hl-thumb{margin-top:10px; border:4px solid #fff; box-shadow:var(--paper-shadow);}
/* v2.12: show the full photo (no crop) in Additional Highlights thumbnails. */
.hl-thumb img{width:100%; height:auto; object-fit:contain; display:block;}

/* =========================================================
   CONTACT back cover
   ========================================================= */
/* REDESIGN v2: contact fills the viewport, left-aligned like the original */
#contact.spread{min-height:100svh; display:flex; flex-direction:column; justify-content:center; max-width:1280px;}
/* v2.6: contact page reads as one centered column (header/kicker/cards/links all
   centered to match the colophon + thanks line that were already centered). */
.contact-inner{position:relative; z-index:2; max-width:1000px; margin:0 auto; width:100%; text-align:center;}
/* v2.7: more breathing room under the "Get in touch" tag before the big header. */
.contact-kicker{display:inline-block; margin-bottom:26px;}
.contact-head{margin:.15em 0 1.1em;}
/* #contact specificity (1,1,0) beats h2.cutout (0,1,1), whose .35em bottom
   margin was collapsing the head→methods gap to ~21px. Match the 44px rhythm
   used below (methods→links) so the contact stack spaces evenly. */
#contact .contact-head{margin-bottom:44px;}
.contact-methods{display:flex; flex-wrap:wrap; gap:28px; margin-bottom:44px; justify-content:center;}
.cmethod{display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--ink); padding:16px 20px; min-width:260px; flex:1 1 260px;}
.biz-card{background:#fff; box-shadow:var(--paper-shadow); position:relative;}
.cmethod .cm-icon svg{width:26px; height:26px; color:var(--pen-blue);}
.cm-label{display:block; font-family:"Special Elite",monospace; font-size:.72rem; text-transform:uppercase; letter-spacing:.5px; color:var(--ink-soft);}
.cm-val{display:block; font-family:"Caveat",cursive; font-size:1.5rem; color:var(--ink);}
.flag{display:inline-block; width:18px; vertical-align:middle;}
.flag img{width:18px; height:auto; display:inline;}

.contact-links{display:flex; flex-wrap:wrap; gap:14px; justify-content:center;}
.doodle-btn{
  display:inline-flex; align-items:center; gap:8px; text-decoration:none;
  font-family:"Caveat",cursive; font-weight:700; font-size:1.3rem; color:var(--ink);
  padding:8px 16px; background:transparent;
  border:2.5px solid var(--pen-blue); border-radius:255px 15px 225px 15px/15px 225px 15px 255px;
  transition:transform .15s steps(2,end);
}
.doodle-btn svg{width:20px; height:20px; color:var(--pen-blue);}
.doodle-btn:hover{transform:rotate(-1.5deg) scale(1.04);}
.colophon{font-family:"Special Elite",monospace; margin-top:26px; text-align:center; color:var(--ink-soft); font-size:.82rem; letter-spacing:.5px;}
.thanks{text-align:center; margin-top:16px; font-size:2rem;}

/* =========================================================
   CONFETTI
   ========================================================= */
.confetti-scrap{
  position:fixed; z-index:90; pointer-events:none; will-change:transform,opacity;
  animation:fall .9s steps(8,end) forwards;
}
@keyframes fall{
  0%{opacity:1; transform:translate(0,0) rotate(0);}
  100%{opacity:0; transform:translate(var(--tx),var(--ty)) rotate(var(--tr));}
}

/* =========================================================
   P11 — COMIC / SPIDERVERSE ANNOTATION LAYER
   ========================================================= */
/* onomatopoeia starburst stickers */
.boom{
  position:absolute; z-index:26; pointer-events:none; opacity:0;
  width:var(--boom-w,150px); height:var(--boom-w,150px);
  display:grid; place-items:center; transform:rotate(var(--boom-rot,-8deg));
}
.boom-burst{position:absolute; inset:0; width:100%; height:100%; overflow:visible;}
.boom-text{
  position:relative; z-index:2; font-family:"Rock Salt",cursive;
  font-size:var(--boom-fs,1.15rem); line-height:.92; text-align:center; max-width:76%;
  color:var(--marker-red); text-shadow:2.5px 1.5px 0 var(--cmyk-m), -2.5px -1.5px 0 var(--cmyk-c);
  transform:rotate(3deg);
}
.boom.pop{animation:boompop .34s steps(4) both;}
@keyframes boompop{
  0%{opacity:0; transform:rotate(var(--boom-rot,-8deg)) scale(.2);}
  40%{opacity:1; transform:rotate(var(--boom-rot,-8deg)) scale(1.2);}
  70%{transform:rotate(var(--boom-rot,-8deg)) scale(.92);}
  100%{opacity:1; transform:rotate(var(--boom-rot,-8deg)) scale(1);}
}

/* doodle arrow + handwritten label */
.doodle{position:absolute; z-index:24; pointer-events:none; display:flex; align-items:center; gap:2px;}
.doodle svg{width:66px; height:46px; overflow:visible;}
.doodle svg path{stroke:var(--pen-blue); stroke-width:3; fill:none; stroke-linecap:round;}
.doodle-label{font-family:"Caveat",cursive; font-weight:700; font-size:1.5rem; color:var(--pen-blue); white-space:nowrap; transform:rotate(-4deg);}

/* hand-drawn marker circle overlay */
.marker-ellipse{position:absolute; z-index:3; pointer-events:none; overflow:visible;}
.marker-ellipse path{fill:none; stroke:var(--marker-red); stroke-width:3.2; stroke-linecap:round;}
.circle-me{position:relative;}

/* margin pencil line down the page */
.margin-line{position:absolute; top:0; left:-8px; width:26px; z-index:1; pointer-events:none; overflow:visible;}
.margin-line path{fill:none; stroke:var(--pencil); stroke-width:2.4; stroke-linecap:round; opacity:.5;}
@media (max-width:820px){ .margin-line{display:none;} }

/* comic misprint on the big scrawl numbers */
.scrawl-num{text-shadow:3px 2px 0 rgba(178,58,46,.16), -3px -2px 0 rgba(58,79,122,.14);}

/* coffee-ring stains — aged-paper character, sit UNDER the writing (multiply) */
.coffee-ring{ position:absolute; z-index:1; pointer-events:none; opacity:.5; mix-blend-mode:multiply; }
.coffee-ring svg{ width:100%; height:100%; overflow:visible; }
.coffee-ring circle{ vector-effect:non-scaling-stroke; }

/* scroll-progress bookmark ribbon — hangs down the left edge, grows with scroll
   (stepped/choppy). Fixed + decorative: covers no content, safe if JS fails. */
.bookmark-ribbon{
  position:fixed; top:0; left:14px; width:15px; z-index:55; pointer-events:none;
  height:var(--bm,64px);
  background:linear-gradient(90deg,#7f2a20,#b23a2e 45%,#8f2e24);
  box-shadow:1px 0 3px rgba(0,0,0,.32), inset -3px 0 4px rgba(0,0,0,.22), inset 3px 0 3px rgba(255,255,255,.15);
  transition:height .16s steps(3,end);
}
.bookmark-ribbon::after{
  content:""; position:absolute; bottom:-13px; left:0; width:100%; height:15px;
  background:linear-gradient(90deg,#7f2a20,#b23a2e 45%,#8f2e24);
  clip-path:polygon(0 0,100% 0,100% 100%,50% 42%,0 100%);
}
@media (max-width:820px){ .bookmark-ribbon{ display:none; } }
@media (prefers-reduced-motion:reduce){ .bookmark-ribbon{ transition:none; } }

/* rubber stamps — an engineer's sign-off ink, faded + rotated over the card */
.stamp{
  position:absolute; z-index:16; pointer-events:none; bottom:15px; right:14px;
  font-family:"Special Elite",monospace; font-weight:700; font-size:.82rem; text-transform:uppercase;
  color:var(--stamp-c,var(--marker-red)); border:2.5px solid currentColor;
  padding:3px 9px; letter-spacing:1.5px; opacity:.5; mix-blend-mode:multiply;
  transform:rotate(var(--stamp-rot,-13deg)); border-radius:3px;
  box-shadow:inset 0 0 0 1.5px currentColor; white-space:nowrap;
}

/* draggable affordance */
.draggable{cursor:grab;}
.draggable.grabbing{cursor:grabbing; z-index:40 !important;}

@media (prefers-reduced-motion:reduce){
  .boom.pop{animation:none !important; opacity:1 !important;}
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:820px){
  .binder-tabs{top:auto; bottom:0; right:0; left:0; transform:none; flex-direction:row; justify-content:space-around; background:rgba(36,31,25,.9); padding:4px 2px;}
  /* v2.7: 6 tabs now (added "About me") — shrink text a touch so they all fit 375px. */
  .binder-tabs a{writing-mode:horizontal-tb; transform:none; border-radius:6px; font-size:.54rem; padding:11px 3px; letter-spacing:0; box-shadow:none; text-align:center; flex:0 1 auto;}
  .binder-tabs a:hover,.binder-tabs a.tab-active{transform:translateY(-2px);}
  .binder-brand{font-size:.68rem; top:10px; left:10px;}
  .cluster,.cluster.lean-r,.cluster.lean-l{flex-direction:column; align-items:stretch;}
  .cluster.lean-r > figure,.cluster.lean-l > figure{margin:0 auto; align-self:center;}
  /* Flex items default to min-width:auto → they refuse to shrink below their
     image's intrinsic width, overriding max-width and overflowing. Let them
     shrink; each figure keeps its OWN max-width cap so photos stay tidy. */
  .cluster > figure, .pile > figure, .hl-featured > figure, .hl-featured .framed,
  .stickers > *, .contact-methods > *, .hero-text > *{ min-width:0; }
  .cluster > .index-card{ min-width:0; }
  .cover-inner{grid-template-columns:1fr; gap:26px;}
  .hero-photo{justify-self:center;}
  .hero-notes .sticky:nth-child(2){margin-left:0;}
  .spread{margin:0 auto; padding:34px 18px 20px;}
  .hero.cover{margin:0 auto; padding:64px 18px 40px;}
  .pinboard{column-count:2;}
  body{padding-bottom:52px;}
  /* v2.16: the stacked mobile hero fills the screen, so the absolute bottom-anchored
     scroll cue landed ON TOP of the photo — put it in normal flow below the photo. */
  .scroll-cue{position:static; transform:none; margin:22px auto 4px;}
}
@media (max-width:560px){
  /* let the Imperial line wrap on phones so it isn't clipped (nowrap is a
     desktop-only nicety to match the original's one-line meta) */
  .luggage-tag span{white-space:normal;}
  /* FINAL: keep the contact column off the phone edges — the cards were flush to the
     screen and the header's marker underline clipped at both sides. The id selector
     beats the h2.cutout clamp so the header (and its underline) sits within margins. */
  .contact-inner{padding:0 14px;}
  #contact .contact-head{font-size:1.85rem;}
}
@media (max-width:520px){
  .hero-title{font-size:2.3rem;}
  .pile figure,.hl-card.ticket{max-width:100%; width:100%;}
  .pinboard{column-count:1;}
}

/* ============================================================
   FINAL-2 LAYER (appended overrides)
   Keeps the site EXACTLY as scrapbook-final except:
   1) Additional Highlights = the framed corkboard (cork texture,
      torn featured scrap, scissor-cut tickets, FULL pushpins) —
      everything scoped to #notable.
   2) Highlighter cursor + smooth click-drag highlight stroke
      (replaces click-confetti; deliberately smooth per user).
   3) Mobile-only fixes further below. Desktop layout untouched.
   ============================================================ */
:root{
  /* highlighter cursor (chisel tip bottom-left, hotspot 8 22) */
  --cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3E%3Cg transform='rotate(45 15 15)'%3E%3Crect x='11' y='1' width='8' height='12' rx='1.5' fill='%232b2620'/%3E%3Crect x='11.8' y='6' width='6.4' height='5' fill='%23d6b656'/%3E%3Crect x='12' y='13' width='6' height='4' fill='%232b2620'/%3E%3Cpath d='M12.6 17 L17.4 17 L16.6 24 L13.4 24 Z' fill='%23e8c84f' stroke='%232b2620' stroke-width='1.2'/%3E%3C/g%3E%3C/svg%3E") 8 22, auto;
  --fibre:url("assets/img/fibre.png");
}

/* ---------- the corkboard ---------- */
.corkboard{
  position:relative; margin:6px auto 28px; max-width:1120px;
  padding:clamp(22px, 3.2vw, 44px) clamp(18px, 2.8vw, 38px);
  background:#c09a72 url("assets/img/cork.webp");
  background-size:440px 440px;
  border:13px solid #7d5f43;
  border-image:linear-gradient(135deg, #8f6d4c 0%, #6f5138 38%, #866547 62%, #5f452e 100%) 1;
  box-shadow:
    inset 0 0 0 2px rgba(43,38,32,.28),
    inset 0 4px 26px rgba(43,38,32,.30),
    inset 0 -3px 18px rgba(43,38,32,.22),
    3px 9px 22px rgba(43,38,32,.28);
}
.corkboard .hl-featured{ margin-top:14px; }
.corkboard .pinboard{ max-width:100%; }

/* featured card = torn white scrap pinned to the cork (clip on ::before so the
   pin outside the box is never clipped; drop-shadow follows the torn shape) */
#notable .hl-featured{
  position:relative; isolation:isolate;
  background:none; box-shadow:none;
  padding:28px 30px;
}
#notable .hl-featured::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background-color:var(--white-paper);
  background-image:var(--fibre);
  background-size:320px 320px;
  background-blend-mode:multiply;
  clip-path:var(--torn-clip, none);
  filter:drop-shadow(1px 2px 2px rgba(43,38,32,.20)) drop-shadow(2px 7px 9px rgba(43,38,32,.14));
}
/* ticket cards: scissor-cut edges + paper fibre, same ::before pattern */
#notable .hl-card.ticket,
#notable .hl-card.ticket:nth-child(3n+1),
#notable .hl-card.ticket:nth-child(3n+2){
  position:relative; isolation:isolate;
  background:none; box-shadow:none; clip-path:none;
}
#notable .hl-card.ticket::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background-color:var(--white-paper);
  background-image:var(--fibre);
  background-size:320px 320px;
  background-blend-mode:multiply;
  clip-path:var(--cut-clip, none);
  filter:drop-shadow(0 2px 0 rgba(43,38,32,.05)) drop-shadow(2px 6px 7px rgba(43,38,32,.20));
}
#notable .hl-card.ticket:nth-child(3n+1)::before{ background-color:#fff7e8; }
#notable .hl-card.ticket:nth-child(3n+2)::before{ background-color:#f3f8ff; }

/* the FULL pushpin (board only — .board-pin; everywhere else keeps the old dot) */
.pushpin.board-pin{
  position:absolute; top:-27px; left:50%; margin-left:-17px;
  width:40px; height:47px; z-index:16; pointer-events:none;
  background:none; border-radius:0; box-shadow:none;
  transform:rotate(var(--pinrot, 0deg));
}
.pushpin.board-pin::after{ content:none; }
.pushpin.board-pin svg{ display:block; width:100%; height:100%; overflow:visible; }

/* ---------- smooth highlighter paint canvas ----------
   Stroke is painted OPAQUE on the canvas; the whole layer shows at 0.5 so the
   colour stays flat/uniform (overlapping passes never darken) and matches the
   --highlight yellow (rgba(214,182,86,.5)) behind <b> text. multiply = real
   highlighter ink. Release → smooth 1s opacity fade, no stepped frames. */
.hl-canvas{
  position:fixed; inset:0; z-index:45; pointer-events:none;
  mix-blend-mode:multiply;
  opacity:.5; transition:none;
}
.hl-canvas.hl-fade{ opacity:0; transition:opacity 1s ease; }
body.highlighting{ user-select:none; -webkit-user-select:none; }
@media (prefers-reduced-motion:reduce){
  .hl-canvas{ display:none; }
}

/* ---- desktop: a bit more breathing room above the EWB photo. The -140px lift
   packed the EWB photo right under the Thai Soc text with almost no gap; -70px
   keeps it lifted beside the tall Thai photo but leaves a clear space above. ---- */
@media (min-width:900px){ #extras .ewb-lift{ margin-top:-70px; } }

/* ============ FINAL-2 MOBILE FIXES — desktop (>820px) untouched ============ */
@media (max-width:820px){
  /* consistent section rhythm: uniform spread padding, no stray trailing margins */
  .spread{ padding:44px 18px 30px; }
  /* VML flow-diagram had a fixed max-width:460px (beats the generic figure cap)
     so it ran off narrow screens — rein it in and drop the desktop overlap. */
  .pile figure.vml-flow{ max-width:min(100%, 80vw); margin-left:0; }
  /* the desktop rule .cluster > .index-card{flex:1 1 400px} sets flex-BASIS 400px;
     in the stacked (column) mobile cluster that basis becomes a forced HEIGHT,
     leaving a big invisible dead band under short text blocks — THE inconsistent
     section spacing. Let text size itself on phones. */
  .cluster > .index-card{ flex:1 1 auto; }
  .spread > :last-child{ margin-bottom:0; }
  .cluster, .pile{ margin-bottom:36px; }
  .edu{ margin:34px auto 4px; }
  /* a touch more room between every section title and the content under it, and
     the same gap in every section so the rhythm reads consistent */
  .sec-head{ margin-bottom:16px; }
  .sec-intro{ margin-bottom:26px; }
  .stickers{ padding:8px 0 12px; }
  /* #notable has no intro, so its title sat right on the corkboard — give it air */
  .corkboard{ border-width:9px; padding:18px 12px; margin-top:20px; }
  #notable .hl-featured{ padding:20px 16px; }
  /* base rule pins the cert at flex-shrink:0 — let it shrink inside the board */
  #notable .hl-featured .framed{ flex:0 1 auto; max-width:100%; }
}

@media (max-width:560px){
  /* ---- title screen fits ONE phone screen (stickies cut per user) ---- */
  .hero.cover{ padding:58px 18px 14px; }
  .hero-notes{ display:none; }
  .hero-text{ gap:14px; }
  .hero-title{ font-size:2.4rem; }
  .hero-photo img{ width:auto; max-height:31svh; }
  .luggage-tag{ padding:16px 18px 12px; }
  .scroll-cue{ margin:10px auto 0; }

  /* ---- smaller pictures on phones ---- */
  .pile figure, .cluster > figure{ max-width:min(100%, 82vw); }
  figure.fig-portrait{ max-width:68vw; }

  /* ---- contact fits ONE phone screen, centred in the visible area ----
     extra bottom padding offsets the ~43px fixed bottom nav so justify-center
     lands the block in the middle of what you actually see, not 26px high. */
  #contact.spread{ padding-top:20px; padding-bottom:60px; }
  .contact-kicker{ margin-bottom:12px; }
  #contact .contact-head{ margin-bottom:22px; font-size:1.7rem; }
  .contact-methods{ gap:12px; margin-bottom:22px; }
  .cmethod{ padding:11px 14px; min-width:220px; }
  .cm-val{ font-size:1.3rem; }
  .contact-links{ gap:9px; }
  .doodle-btn{ font-size:1.12rem; padding:6px 12px; }
  .colophon{ margin-top:14px; font-size:.72rem; }
  .thanks{ margin-top:8px; font-size:1.5rem; }
}