/* ============================================================
   SHAZWAN FOLIO — design-canvas portfolio
   Original implementation. Structure inspired by the Nudge
   Framer template; all code, colors and copy are our own.
   ============================================================ */

:root {
  --ink: #131316;
  --paper: #ffffff;
  --gray-ruler: #9a9aa0;
  --gray-line: #e4e4e8;
  --grid-line: rgba(19, 19, 22, 0.05);

  --violet: #7C4DFF;
  --violet-soft: #E9E1FF;
  --coral: #FF6B35;
  --lime: #B7D34D;
  --teal: #00BFA6;
  --cocoa: #46332E;

  --lav: #DCD2FF;
  --peach: #FFD9BD;
  --mint: #C4EFE2;
  --butter: #F6EDB7;
  --blush: #FAD0DC;

  --ff-display: 'Jersey 25', system-ui, sans-serif;
  --ff-head: 'Inter Tight', 'Inter', sans-serif;
  --ff-body: 'Inter', sans-serif;
  --ff-mono: 'DM Mono', monospace;
  --ff-hand: 'Just Me Again Down Here', cursive;

  --col-w: 1080px;
  --header-h: 52px;
  --e-spring: cubic-bezier(.34, 1.56, .64, 1);
  --e-out: cubic-bezier(.22, 1, .36, 1);
  --e-wipe: cubic-bezier(.77, 0, .18, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: auto; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

body {
  font-family: var(--ff-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

/* page enter */
body { opacity: 0; transform: translateY(4px); }
body.page-in { opacity: 1; transform: none; transition: opacity .45s ease, transform .45s ease; }

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font: inherit; border: 0; background: none; cursor: pointer; color: inherit; }

::selection { background: var(--violet); color: #fff; }

/* ---------- canvas backdrop ---------- */
body { position: relative; }
.canvas-bg {
  /* absolute (in the scrolling content layer), NOT fixed: a fixed layer is
     composited separately and mix-blend-mode lenses can't see it as backdrop.
     Solid white lives here so difference-blend elements invert properly. */
  position: absolute; top: 0; left: 0; right: 0; height: 100%;
  min-height: 100vh; z-index: -1; pointer-events: none;
  background-color: var(--paper);
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 100px 100px;
  background-position: 0 var(--header-h);
}

/* ---------- rulers (mouse-follow) ---------- */
.ruler-x {
  position: fixed; top: var(--header-h); left: 0; right: 0; height: 40px;
  background: var(--paper); border-bottom: 1px solid var(--gray-line);
  z-index: 40; overflow: hidden; pointer-events: none;
}
.ruler-x .track { position: absolute; inset: 0; will-change: transform; }
.ruler-x .tick {
  position: absolute; top: 0; height: 12px;
  border-left: 1.5px solid #c9c9cf;
}
.ruler-x .tick .num {
  position: absolute; top: 14px; left: 0; transform: translateX(-50%);
  font-family: var(--ff-mono); font-size: 11px; color: var(--gray-ruler);
  letter-spacing: .02em;
}
.ruler-x .tick.minor { height: 7px; border-left-color: var(--gray-line); }
.ruler-y {
  position: fixed; top: calc(var(--header-h) + 40px); left: 0; bottom: 0; width: 26px;
  background: var(--paper); border-right: 1px solid var(--gray-line);
  z-index: 39; overflow: hidden; pointer-events: none;
}
.ruler-y .track { position: absolute; inset: 0; will-change: transform; }
.ruler-y .tick {
  position: absolute; left: 0; width: 12px;
  border-top: 1.5px solid #c9c9cf;
}
.ruler-y .tick .num {
  position: absolute; left: 13px; top: 0; transform: translateY(-50%) rotate(90deg);
  transform-origin: left center;
  font-family: var(--ff-mono); font-size: 10px; color: var(--gray-ruler);
}
.ruler-y .tick.minor { width: 6px; border-top-color: var(--gray-line); }

/* ---------- header ---------- */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; height: var(--header-h);
  background: var(--paper); border-bottom: 1px solid var(--ink);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 20px; z-index: 50;
}
.logo-mark { display: flex; align-items: center; gap: 10px; }
.logo-mark svg { width: 30px; height: 30px; }
.main-nav { display: flex; align-items: center; gap: 4px; position: absolute; left: 50%; transform: translateX(-50%); }
.menu-btn {
  display: none; align-items: center; gap: 8px;
  font-family: var(--ff-mono); font-size: 13px; letter-spacing: .04em; text-transform: uppercase;
  border: 1.5px solid var(--ink); border-radius: 8px; padding: 8px 14px;
}
.menu-btn svg { width: 16px; height: 12px; }
.main-nav a {
  display: flex; align-items: center; gap: 7px;
  font-family: var(--ff-mono); font-size: 13px; font-weight: 500;
  letter-spacing: .04em; text-transform: uppercase;
  padding: 8px 14px; border-radius: 8px;
  transition: background .25s var(--e-out), color .25s var(--e-out);
}
.main-nav a svg { width: 15px; height: 15px; }
.main-nav a:hover { background: #f1f1f3; }
.main-nav a.active { background: var(--violet-soft); color: var(--ink); }
.header-right { display: flex; align-items: center; gap: 14px; }
.avatars { display: flex; }
.avatar {
  width: 34px; height: 34px; border-radius: 50%;
  background: #e8e8ec; border: 2px solid var(--paper);
  display: grid; place-items: center;
  font-family: var(--ff-mono); font-size: 11px; font-weight: 500;
  transition: transform .3s var(--e-spring);
}
.avatar + .avatar { margin-left: -9px; }
.avatar:hover { transform: translateY(-3px) rotate(-4deg); }
.avatar.photo { overflow: hidden; }
.avatar.photo img { width: 100%; height: 100%; object-fit: cover; }
.btn-contact {
  display: flex; align-items: center; gap: 8px;
  background: var(--ink); color: #fff;
  font-family: var(--ff-mono); font-size: 13px; letter-spacing: .04em;
  padding: 9px 16px; border-radius: 8px;
  transition: background .25s, transform .25s var(--e-spring);
}
.btn-contact:hover { transform: translateY(-2px); }
.btn-contact svg { width: 14px; height: 14px; }

/* ---------- shared page scaffolding ---------- */
.page-main { padding-top: calc(var(--header-h) + 40px); }
.col { width: min(var(--col-w), calc(100% - 48px)); margin: 0 auto; position: relative; }

.mono-label {
  font-family: var(--ff-mono); font-size: 13px; font-weight: 500;
  letter-spacing: .05em; text-transform: uppercase;
}
.hand { font-family: var(--ff-hand); font-size: 30px; line-height: 1; }
.display {
  font-family: var(--ff-display); font-weight: 400;
  text-transform: uppercase; line-height: .92; letter-spacing: .03em;
}

/* reveal system */
[data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--e-out), transform .7s var(--e-out); transition-delay: var(--d, 0s); }
[data-reveal="pop"] { transform: scale(.6) rotate(var(--rot, 0deg)); transition: opacity .55s var(--e-out), transform .55s var(--e-spring); transition-delay: var(--d, 0s); }
[data-reveal].in { opacity: 1; transform: translateY(0) scale(1) rotate(var(--rot, 0deg)); }
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ---------- loader ---------- */
.loader {
  position: fixed; inset: 0; z-index: 90; background: var(--paper);
  display: grid; place-items: center;
  transition: transform .8s var(--e-wipe);
}
.loader.done { transform: translateY(-101%); }
.loader .hand { font-size: 64px; opacity: 0; transform: scale(.5) rotate(-5deg); transition: opacity .4s, transform .5s var(--e-spring); }
.loader.show .hand { opacity: 1; transform: none; }
.loader .underline { width: 120px; height: 8px; margin: 4px auto 0; }
.loader .underline path { stroke: var(--violet); stroke-width: 3; fill: none; stroke-dasharray: 130; stroke-dashoffset: 130; transition: stroke-dashoffset .5s ease .3s; }
.loader.show .underline path { stroke-dashoffset: 0; }

/* ---------- stickers, badges, cursors ---------- */
.tag-sticker {
  display: inline-block; padding: 14px 22px;
  font-family: var(--ff-head); font-size: 17px; font-weight: 500;
  transform: rotate(var(--rot, 0deg));
  transition: transform .35s var(--e-spring);
  box-shadow: 0 2px 0 rgba(19,19,22,.12);
}
.tag-sticker:hover { transform: rotate(calc(var(--rot, 0deg) + 2deg)) scale(1.06); }
.bubble-badge {
  display: inline-flex; align-items: center;
  padding: 13px 20px; font-family: var(--ff-mono); font-size: 14px;
  letter-spacing: .04em; text-transform: uppercase;
  border: 1.5px solid var(--ink);
  transform: rotate(var(--rot, 0deg));
  transition: transform .35s var(--e-spring);
}
.bubble-badge:hover { transform: rotate(0deg) scale(1.05); }
.bubble-badge.tail-tr { border-radius: 24px 0 24px 24px; }
.bubble-badge.tail-tl { border-radius: 0 24px 24px 24px; }
.bubble-badge.tail-br { border-radius: 24px 24px 0 24px; }

.cursor-flag { position: absolute; pointer-events: none; z-index: 5; }
.cursor-flag svg.pointer { width: 22px; height: 22px; display: block; }
.cursor-flag .flag {
  margin: 2px 0 0 16px; padding: 4px 10px; border-radius: 4px 12px 12px 12px;
  font-family: var(--ff-mono); font-size: 11px; text-transform: uppercase;
  background: var(--violet); color: #fff; width: max-content;
}
.float-slow { animation: floaty 7s ease-in-out infinite alternate; }
.float-slower { animation: floaty 9s ease-in-out infinite alternate-reverse; }
@keyframes floaty { from { translate: 0 0; } to { translate: 8px -12px; } }

/* selection box */
.selection-box { position: relative; }
.selection-box::before {
  content: ""; position: absolute; inset: -10px;
  border: 1.5px solid var(--violet); pointer-events: none;
}
.selection-box .handle {
  position: absolute; width: 10px; height: 10px;
  background: #fff; border: 1.5px solid var(--violet); z-index: 2;
}
.selection-box .handle.tl { top: -15px; left: -15px; }
.selection-box .handle.tr { top: -15px; right: -15px; }
.selection-box .handle.bl { bottom: -15px; left: -15px; }
.selection-box .handle.br { bottom: -15px; right: -15px; }
.dim-chip {
  position: absolute; left: 50%; bottom: -34px; transform: translateX(-50%);
  background: var(--violet); color: #fff;
  font-family: var(--ff-mono); font-size: 10px; padding: 2px 8px; border-radius: 4px;
}

/* polaroids */
.polaroid {
  background: #fff; padding: 10px 10px 14px;
  border: 1px solid var(--gray-line);
  box-shadow: 0 10px 24px rgba(19,19,22,.14);
  transform: rotate(var(--rot, 0deg));
  transition: transform .4s var(--e-spring);
}
.polaroid img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.polaroid:hover { transform: rotate(0deg) scale(1.03); }
.polaroid .cap { margin-top: 8px; text-align: center; font-family: var(--ff-hand); font-size: 24px; }

.caption-tag {
  position: absolute; padding: 8px 14px;
  font-family: var(--ff-hand); font-size: 26px; line-height: 1;
  border-radius: 4px 16px 16px 16px;
  box-shadow: 0 2px 0 rgba(19,19,22,.12);
}

/* inline icons in headings — bare colored glyphs, no chip background */
.icon-chip {
  display: inline-grid; place-items: center;
  width: auto; height: auto;
  background: transparent !important; border-radius: 0;
  vertical-align: -.12em; margin: 0 .06em;
}
.icon-chip svg { width: .92em; height: .92em; }

/* ---------- hero (home) ---------- */
.hero {
  min-height: calc(100vh - var(--header-h));
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  position: relative; padding: 60px 0 40px;
}
.hero-clock { font-family: var(--ff-mono); font-size: 15px; margin-bottom: 40px; }
.hero-name-wrap { position: relative; text-align: center; }
.hero-myname { position: relative; z-index: 3; display: inline-block; margin-bottom: -6px; }
.hero-myname .hand { font-size: 40px; }
.hero-myname .scribbles { display: block; margin: -2px auto 0; width: 130px; }
.hero-name { font-size: clamp(76px, 14.5vw, 185px); position: relative; z-index: 2; padding: 0 28px; letter-spacing: .05em; line-height: .84; }
.hero-tag-l { position: absolute; z-index: 4; top: -46px; left: -120px; }
.hero-tag-r { position: absolute; z-index: 1; top: -30px; right: -130px; }
.hero-status { display: flex; align-items: center; gap: 10px; margin-top: 52px; justify-content: center; }
.hero-status .dot { width: 14px; height: 14px; border-radius: 50%; background: var(--violet); animation: pulse 2s infinite; }
@keyframes pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(124,77,255,.35);} 50% { box-shadow: 0 0 0 8px rgba(124,77,255,0);} }
.hero-badge-l { position: absolute; left: 3%; bottom: 17%; z-index: 4; }
.hero-badge-r { position: absolute; right: 8%; bottom: 30%; z-index: 4; }
/* floating chat-head bubbles */
.chat-bubble {
  position: absolute; z-index: 7; display: flex; align-items: center; gap: 0;
  transition: transform 1.6s cubic-bezier(.5, 0, .15, 1);
}
.chat-bubble .head {
  width: 62px; height: 62px; flex: 0 0 auto;
  display: grid; place-items: center;
  box-shadow: 0 6px 18px rgba(19,19,22,.16);
}
.chat-bubble .head img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; }
.chat-bubble.bb-l .head { background: var(--mint); border-radius: 50% 50% 50% 10px; }
.chat-bubble.bb-r .head { background: var(--violet-soft); border-radius: 50% 50% 10px 50%; }
.chat-bubble .msg {
  max-width: 0; opacity: 0; overflow: hidden; white-space: nowrap;
  font-family: var(--ff-head); font-weight: 500; font-size: 15px;
  transition: max-width .5s var(--e-out), opacity .35s, padding .5s var(--e-out);
  padding: 10px 0; border-radius: 14px; margin-left: 8px;
}
.chat-bubble.open .msg { max-width: 220px; opacity: 1; padding: 10px 16px; }
.chat-bubble.bb-l.open .msg { background: var(--mint); }
.chat-bubble.bb-r.open .msg { background: var(--violet-soft); }
.chat-bubble.bb-l { left: 6%; top: 46%; }
.chat-bubble.bb-r { right: 11%; top: 80%; flex-direction: row-reverse; }
.chat-bubble.bb-r .msg { margin: 0 8px 0 0; }
.bb-float-1 { animation: bfloat1 6.5s ease-in-out infinite alternate; }
.bb-float-2 { animation: bfloat2 8s ease-in-out infinite alternate; }
@keyframes bfloat1 { from { translate: 0 -10px; rotate: -2deg; } to { translate: 6px 12px; rotate: 2deg; } }
@keyframes bfloat2 { from { translate: 4px 12px; rotate: 2deg; } to { translate: -6px -12px; rotate: -1.5deg; } }
.chat-bubble.acting { z-index: 8; animation-play-state: paused; }
.chat-bubble.acting .head { box-shadow: 0 14px 30px rgba(19,19,22,.28); }

/* teammate-bubble lens — the fake user's own inspection square over the name */
.hero-invert {
  position: absolute; z-index: 6; pointer-events: none;
  left: 58%; top: 50%; width: 330px; height: 330px;
  margin: -165px 0 0 -165px;
  background: #fff; border-radius: 26px;
  mix-blend-mode: difference;
  visibility: hidden;
}
.hero-invert.show { visibility: visible; }
.hero-invert .hd {
  position: absolute; width: 18px; height: 18px; background: #fff;
}
.hero-invert .hd.tl { top: -7px; left: -7px; }
.hero-invert .hd.tr { top: -7px; right: -7px; }
.hero-invert .hd.bl { bottom: -7px; left: -7px; }
.hero-invert .hd.br { bottom: -7px; right: -7px; }
.hero-invert .hd {
  position: absolute; width: 22px; height: 22px; background: #fff;
}
.hero-invert .hd.tl { top: -8px; left: -8px; }
.hero-invert .hd.tr { top: -8px; right: -8px; }
.hero-invert .hd.bl { bottom: -8px; left: -8px; }
.hero-invert .hd.br { bottom: -8px; right: -8px; }

/* site-wide YOU cursor → morphing difference lens
   idle: 15px dot · near a [data-lens] target: 34px circle ·
   inside target: big square lens w/ corner handles, follows the mouse.
   The lens is ONE element: blend + per-frame transform on the SAME node.
   A blended child inside a moving wrapper gets orphaned onto the wrapper's
   compositing surface, loses the page backdrop, and renders white.
   No transitions; visibility (not opacity) for the idle toggle. */
#you-dot {
  position: fixed; left: 0; top: 0; z-index: 80; pointer-events: none;
  width: 15px; height: 15px; margin: -8px 0 0 -8px; border-radius: 50%;
  background: #fff; mix-blend-mode: difference;
  visibility: hidden;
}
body.you-active #you-dot { visibility: visible; }
#you-dot.near { width: 34px; height: 34px; margin: -17px 0 0 -17px; }
#you-dot.lens { width: 330px; height: 330px; margin: -165px 0 0 -165px; border-radius: 26px; }
#you-dot .hd { position: absolute; width: 18px; height: 18px; background: #fff; visibility: hidden; }
#you-dot .hd.tl { top: -7px; left: -7px; }
#you-dot .hd.tr { top: -7px; right: -7px; }
#you-dot .hd.bl { bottom: -7px; left: -7px; }
#you-dot .hd.br { bottom: -7px; right: -7px; }
#you-dot.lens .hd { visibility: visible; }
#you-pill {
  position: fixed; left: 0; top: 0; z-index: 81; pointer-events: none;
  visibility: hidden; width: max-content;
  margin: 12px 0 0 12px;
  background: var(--ink); color: #fff;
  font-family: var(--ff-mono); font-size: 11px; letter-spacing: .06em;
  padding: 4px 10px; border-radius: 6px 12px 12px 12px;
}
body.you-active #you-pill { visibility: visible; }
#you-pill.near { margin: 22px 0 0 22px; }
#you-pill.lens { margin: 170px 0 0 145px; }
.hero-statement { margin-top: 48px; text-align: center; font-family: var(--ff-head); font-weight: 500; font-size: clamp(26px, 3.2vw, 40px); line-height: 1.25; max-width: 720px; }
.btn-big {
  display: inline-flex; align-items: center; gap: 12px;
  background: var(--ink); color: #fff;
  font-family: var(--ff-mono); font-size: 15px; letter-spacing: .05em; text-transform: uppercase;
  padding: 16px 26px; margin-top: 40px;
  transition: background .3s, transform .3s var(--e-spring);
}
.btn-big .sq { display: grid; place-items: center; width: 34px; height: 34px; background: var(--violet); border-radius: 6px; transition: transform .3s var(--e-spring); }
.btn-big .sq svg { width: 16px; height: 16px; }
.btn-big:hover { transform: translateY(-3px); }
.btn-big:hover .sq { transform: translateX(3px); }

/* ---------- about strip (home) ---------- */
.divider-line { width: 100%; overflow: hidden; margin-top: -10px; position: relative; }
.divider-line svg { width: 100%; height: 90px; display: block; }
.divider-line .hand { position: absolute; left: 12%; bottom: 4px; font-size: 28px; transform: rotate(-4deg); }
.about-strip { padding: 70px 0 90px; position: relative; }
.about-head { text-align: center; margin-bottom: 36px; position: relative; }
.about-head .hand { font-size: 36px; }
.whatsup-box {
  position: relative; display: inline-block;
  border: 1.5px solid var(--ink); background: #fff;
  font-family: var(--ff-head); font-weight: 500; font-size: 22px;
  padding: 10px 22px;
}
.whatsup-box .handle { position: absolute; width: 9px; height: 9px; background: #fff; border: 1.5px solid var(--ink); }
.whatsup-box .handle.tl { top: -6px; left: -6px; }
.whatsup-box .handle.tr { top: -6px; right: -6px; }
.whatsup-box .handle.bl { bottom: -6px; left: -6px; }
.whatsup-box .handle.br { bottom: -6px; right: -6px; }
.intro-photo {
  display: inline-block; width: 1em; height: 1em; border-radius: 8px;
  object-fit: cover; vertical-align: -.12em; margin: 0 .08em;
}
.about-intro {
  text-align: center; font-family: var(--ff-head); font-weight: 500;
  font-size: clamp(24px, 3vw, 38px); line-height: 1.3; max-width: 760px; margin: 0 auto;
  position: relative; z-index: 4;
}
.about-tags { display: flex; flex-direction: column; gap: 22px; align-items: center; margin-top: 54px; }
.tag-row { display: flex; align-items: center; justify-content: center; gap: 22px; }
.skill-bar {
  font-family: var(--ff-head); font-weight: 500; font-size: clamp(22px, 2.6vw, 32px);
  padding: 16px 30px; color: var(--ink); white-space: nowrap;
}
.skill-bar.on-dark { color: #fff; }
.skill-deco { display: grid; place-items: center; width: 56px; height: 56px; flex: 0 0 auto; }
.skill-deco svg { width: 100%; height: 100%; overflow: visible; }
.skill-deco .spin {
  animation: deco-spin 6s linear infinite;
  transform-box: fill-box; transform-origin: center;
}
.skill-deco .spin.slow { animation-duration: 10s; }
.skill-deco .pulse {
  animation: deco-pulse var(--pd, 1.6s) ease-in-out var(--pdl, 0s) infinite alternate;
  transform-box: fill-box; transform-origin: center;
}
@keyframes deco-spin { to { transform: rotate(360deg); } }
@keyframes deco-pulse { from { transform: scale(.4); } to { transform: scale(1.3); } }
@media (prefers-reduced-motion: reduce) {
  .skill-deco .spin, .skill-deco .pulse { animation: none; }
}
.about-pol-l { position: absolute; left: -60px; top: 4%; width: 185px; z-index: 3; }
.about-pol-r { position: absolute; right: -66px; top: 1%; width: 190px; z-index: 3; }
.side-note { position: absolute; font-family: var(--ff-hand); font-size: 26px; color: var(--gray-ruler); }

/* ---------- featured works ---------- */
.works-head { text-align: center; padding: 90px 0 70px; position: relative; }
.works-head .hand { font-size: 34px; }
.works-title { font-size: clamp(64px, 10vw, 120px); }
.works-sub {
  max-width: 380px; margin: 24px auto 0; color: var(--ink);
  background: var(--butter); padding: 14px 22px;
  transform: rotate(-1.5deg); font-size: 15px;
}
.works-stack { position: relative; }
.work-card {
  /* pin BELOW the fixed ruler strip (header 52px + ruler 40px) —
     otherwise the folder tabs slide under the opaque ruler and get cut */
  position: sticky; top: calc(var(--header-h) + 40px);
  height: calc(100vh - var(--header-h) - 40px);
  display: flex; align-items: flex-end;
  padding-top: 60px;
}
/* folder tab — trapezoid, staggered per card so the stack reads like folders.
   Position = fraction of the LEFTOVER space (100% - tab width) so the last
   tab lands flush with the card's right edge at any viewport width —
   a fixed % + fixed width overflowed the card and broke the silhouette. */
.folder-tab {
  --tabw: 300px;
  position: absolute; top: 4px; left: calc((100% - var(--tabw)) * var(--tabf, 0));
  height: 58px; width: var(--tabw);
  display: flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--ff-mono); font-size: 14px; letter-spacing: .06em; text-transform: uppercase;
  clip-path: polygon(52px 0, 248px 0, 100% 100%, 0 100%);
  z-index: 2;
}
.work-card:first-child .folder-tab { clip-path: polygon(0 0, 248px 0, 100% 100%, 0 100%); }
.work-card:last-child .folder-tab { clip-path: polygon(52px 0, 100% 0, 100% 100%, 0 100%); }
.folder-tab svg { width: 16px; height: 16px; }
.work-card-inner {
  /* 100% of the flex content box (card height minus the 60px tab padding) —
     subtracting again left a white gap between the tab and the body */
  width: 100%; height: 100%;
  border-radius: 0;
  padding: clamp(24px, 4vw, 56px);
  display: grid; grid-template-columns: 1fr minmax(300px, 48%); gap: 40px;
  align-items: center; overflow: visible; position: relative;
  box-shadow: 0 -10px 34px rgba(19,19,22,.16);
}
.work-card-inner.c-lime { background: var(--lime); }
.work-card-inner.c-ink { background: var(--ink); color: #fff; }
.work-card-inner.c-violet { background: var(--violet); color: #fff; }
.work-card-inner.c-coral { background: var(--coral); }
.work-date { display: flex; align-items: center; gap: 10px; font-family: var(--ff-mono); font-size: 13px; letter-spacing: .05em; margin-bottom: 14px; }
.work-date::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: currentColor; }
.work-title { font-family: var(--ff-head); font-weight: 600; font-size: clamp(40px, 5.4vw, 68px); line-height: 1.02; letter-spacing: -.02em; }
.work-tagline { font-size: 18px; margin: 20px 0 30px; max-width: 420px; opacity: .92; }
.btn-view {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--ff-mono); font-size: 14px; letter-spacing: .06em; text-transform: uppercase;
  padding: 0 0 6px; border-bottom: 1.5px solid currentColor;
}
.btn-view svg { width: 14px; height: 14px; transition: transform .3s var(--e-spring); }
.btn-view:hover svg { transform: translate(3px, -3px); }
.work-tags { display: flex; gap: 14px; margin-top: 40px; position: absolute; left: clamp(24px, 4vw, 56px); bottom: clamp(24px, 4vw, 48px); }
.work-tags .chip {
  font-family: var(--ff-mono); font-size: 13px; letter-spacing: .05em; text-transform: uppercase;
  padding: 16px 16px 8px;
  clip-path: polygon(0 10px, 34% 10px, 42% 0, 100% 0, 100% 100%, 0 100%);
}
.work-card-inner.c-lime .work-tags .chip, .work-card-inner.c-coral .work-tags .chip { background: var(--ink); color: #fff; }
.work-card-inner.c-ink .work-tags .chip, .work-card-inner.c-violet .work-tags .chip { background: #fff; color: var(--ink); }
.work-frame { position: relative; background: #fff; padding: 8px; align-self: center; }
.work-frame img { width: 100%; aspect-ratio: 524/540; object-fit: cover; display: block; }
.work-frame .fhd { position: absolute; width: 16px; height: 16px; background: #fff; border: 1.5px solid var(--ink); z-index: 3; }
.work-frame .fhd.tl { top: -8px; left: -8px; }
.work-frame .fhd.tr { top: -8px; right: -8px; }
.work-frame .fhd.bl { bottom: -8px; left: -8px; }
.work-frame .fhd.br { bottom: -8px; right: -8px; }
.work-frame .file-chip {
  position: absolute; top: 20px; right: 20px;
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--ink); color: #fff;
  font-family: var(--ff-mono); font-size: 13px; padding: 8px 12px;
}
.work-frame .file-chip svg { width: 16px; height: 16px; }

/* ---------- CTA + footer ---------- */
.cta-section { padding: 130px 0 0; position: relative; }
.cta-top { display: grid; grid-template-columns: auto 1fr; gap: 70px; align-items: center; margin-bottom: 70px; }
.cta-blob { width: 300px; height: 300px; animation: blob-wiggle 7s ease-in-out infinite alternate; }
.cta-blob svg { width: 100%; height: 100%; }
@keyframes blob-wiggle { from { transform: rotate(-7deg); } to { transform: rotate(7deg); } }
.cta-copy h2 { font-size: clamp(56px, 9vw, 120px); }
.cta-copy p { max-width: 560px; margin-top: 20px; color: #45454c; font-size: 17px; }
.cta-card {
  background: var(--cocoa); color: var(--ink);
  border-radius: 40px; position: relative;
  min-height: 560px; display: grid; place-items: center;
  overflow: hidden; margin-bottom: 90px;
}
.cta-card .blob-bg { position: absolute; inset: 0; z-index: 1; }
.cta-card .blob-bg svg { width: 100%; height: 100%; display: block; }
.cta-bar {
  position: relative; z-index: 2;
  display: inline-flex; align-items: stretch;
  background: var(--violet-soft); border: 3px solid var(--ink);
  transition: transform .4s var(--e-spring);
}
/* float + twist only when the BAR itself is hovered — the old
   .cta-card:hover trigger tilted it as soon as the pointer entered
   the big cocoa card, so it looked permanently askew */
.cta-bar:hover, .cta-bar.wipe-on { transform: scale(1.04) rotate(-1deg); }
.cta-bar .tile {
  display: grid; place-items: center;
  width: 86px; border-left: 3px solid var(--ink);
  background: var(--violet);
}
.cta-bar .tile:first-child { border-left: 0; border-right: 3px solid var(--ink); }
.cta-bar .tile svg { width: 56px; height: 56px; }
.cta-bar .giant {
  font-size: clamp(48px, 7.5vw, 96px); color: var(--ink);
  padding: 4px 34px; line-height: 1;
  display: flex; align-items: center;
}

/* ---------- ink-wipe hover: the hero invert panel, buttonized ----------
   A white difference-blend panel slides left→right across the button and
   inverts everything it covers (bg, text, icons) — same trick as the
   hero name invert. isolation: isolate keeps the blend against the
   button's OWN background (the root-canvas blend gotcha doesn't apply
   inside an isolated group). .wipe-on mirrors :hover for testing. */
.btn-contact, .btn-big, .btn-step, .cta-bar {
  position: relative; isolation: isolate; overflow: hidden;
}
.btn-contact::after, .btn-big::after, .btn-step::after, .cta-bar::after {
  content: ""; position: absolute; inset: 0; z-index: 4;
  background: #fff; mix-blend-mode: difference;
  transform: translateX(-101%);
  transition: transform .45s var(--e-wipe);
  pointer-events: none;
}
.btn-contact:hover::after, .btn-big:hover::after, .btn-step:hover::after, .cta-bar:hover::after,
.btn-contact.wipe-on::after, .btn-big.wipe-on::after, .btn-step.wipe-on::after, .cta-bar.wipe-on::after {
  transform: translateX(0);
}
/* transparent text-buttons have nothing beneath to invert — they get a
   solid slider + text color flip instead (inverted pair on dark cards) */
.btn-view, .ins-back {
  --wb: var(--ink); --wf: #fff;
  position: relative; isolation: isolate; overflow: hidden;
  transition: color .35s var(--e-wipe);
}
.work-card-inner.c-ink .btn-view, .work-card-inner.c-violet .btn-view { --wb: #fff; --wf: var(--ink); }
.btn-view::after, .ins-back::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--wb);
  transform: translateX(-101%);
  transition: transform .35s var(--e-wipe);
  pointer-events: none;
}
.btn-view:hover, .btn-view.wipe-on, .ins-back:hover, .ins-back.wipe-on { color: var(--wf); }
.btn-view:hover::after, .btn-view.wipe-on::after, .ins-back:hover::after, .ins-back.wipe-on::after { transform: translateX(0); }
.comment-bubble {
  position: absolute; left: 11%; top: -34px; z-index: 3;
  width: 290px; background: #fff; color: var(--ink);
  border-radius: 4px 20px 20px 20px; padding: 16px 18px;
  box-shadow: 0 14px 34px rgba(19,19,22,.22);
  transform: rotate(-2deg);
}
.comment-bubble .c-label { font-family: var(--ff-mono); font-size: 10px; text-transform: uppercase; color: var(--gray-ruler); margin-bottom: 8px; }
.comment-bubble .c-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.comment-bubble .c-head img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; }
.comment-bubble .c-head strong { font-family: var(--ff-head); font-size: 14px; font-weight: 600; }
.comment-bubble .c-text { font-size: 13px; line-height: 1.5; color: #44444a; }
.react-chip {
  margin-top: 10px; display: inline-flex; align-items: center; gap: 6px;
  background: var(--mint); border-radius: 6px; padding: 3px 10px;
  font-family: var(--ff-mono); font-size: 12px; cursor: pointer; user-select: none;
  transition: transform .25s var(--e-spring);
}
.react-chip:active { transform: scale(1.25); }
.footer-ruler {
  position: relative; height: 34px; overflow: hidden;
  border-top: 1px solid var(--gray-line);
}
.footer-ruler .tick {
  position: absolute; bottom: 0; height: 10px;
  border-left: 1.5px solid #c9c9cf;
}
.footer-ruler .tick .num {
  position: absolute; bottom: 12px; left: 0; transform: translateX(-50%);
  font-family: var(--ff-mono); font-size: 10px; color: var(--gray-ruler);
}
.footer-ruler .tick.minor { height: 5px; border-left-color: var(--gray-line); }
.footer-bar {
  border-top: 1px solid var(--ink); padding: 26px 0 34px; position: relative; overflow: hidden;
}
.footer-bar .col { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.footer-bar .wordmark { font-family: var(--ff-display); font-size: 26px; }
.footer-bar .colophon { font-family: var(--ff-mono); font-size: 11px; color: var(--gray-ruler); text-transform: uppercase; letter-spacing: .05em; }
#you-cursor { position: absolute; z-index: 6; opacity: 0; transition: opacity .3s; }
#you-cursor .flag { background: var(--coral); color: var(--ink); }

/* ---------- about page ---------- */
.pg-about .page-title { font-size: clamp(56px, 8vw, 110px); padding: 60px 0 10px; }
.pg-about .about-layout { display: grid; grid-template-columns: 96px 1fr; gap: 50px; padding: 30px 0 90px; }

/* side nav — white rounded card holding black icon tiles with labels */
.side-nav {
  position: sticky; top: 150px; align-self: start;
  display: flex; flex-direction: column; gap: 22px; align-items: center;
  background: #fff; border-radius: 16px; padding: 20px 14px;
  box-shadow: 0 12px 30px rgba(19,19,22,.10);
}
.side-nav a { display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--ink); }
.side-nav a .tile {
  width: 48px; height: 48px; border-radius: 12px;
  background: var(--ink); color: #fff;
  display: grid; place-items: center;
  transition: background .25s, transform .3s var(--e-spring);
}
.side-nav a .tile svg { width: 22px; height: 22px; }
.side-nav a .lbl {
  font-family: var(--ff-mono); font-size: 10px; letter-spacing: .07em; text-transform: uppercase;
}
.side-nav a:hover .tile { background: var(--violet); transform: translateY(-3px) rotate(-6deg); }
.side-nav a.active .tile { background: var(--violet); }

/* colored selection frame per section — tag chip + handles pick up --fc */
.sec-frame { position: relative; border: 1.5px solid var(--fc, #E7C95F); padding: 48px 44px 44px; }
.sec-frame > .handle { position: absolute; width: 10px; height: 10px; background: #fff; border: 1.5px solid var(--fc, #E7C95F); }
.sec-frame > .handle.tl { top: -6px; left: -6px; }
.sec-frame > .handle.tr { top: -6px; right: -6px; }
.sec-frame > .handle.bl { bottom: -6px; left: -6px; }
.sec-frame > .handle.br { bottom: -6px; right: -6px; }
.sec-frame .frame-tag {
  position: absolute; top: -13px; left: 24px;
  background: var(--fc, #E7C95F); color: var(--ink);
  font-family: var(--ff-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
  padding: 5px 12px;
}
.sec-bubble {
  position: absolute; right: -26px; top: 46%;
  font-family: var(--ff-mono); font-size: 12px; letter-spacing: .05em; text-transform: uppercase;
  color: var(--ink); border: 1.5px solid var(--ink);
  padding: 8px 14px; border-radius: 14px 14px 14px 2px;
  transform: rotate(6deg); background: var(--butter);
}

/* bio */
.bio-note {
  background: var(--butter); padding: 18px 22px;
  font-size: 15px; line-height: 1.65; color: var(--ink);
}
.bio-note.tilt { max-width: 540px; transform: rotate(-1.2deg); margin-top: 26px; }
.bio-note-row {
  position: relative; display: grid; grid-template-columns: 1fr 150px; gap: 28px;
  align-items: center; margin-top: 26px;
}
.polaroid.mini { width: 150px; padding: 7px 7px 10px; }
.polaroid.mini .cap { font-size: 19px; margin-top: 5px; }
.name-pill {
  position: absolute; right: -78px; top: 36%;
  background: #E7C95F; border: 1.5px solid var(--ink); border-radius: 100px;
  font-family: var(--ff-mono); font-size: 11px; letter-spacing: .05em;
  padding: 6px 14px; transform: rotate(-8deg);
}
.about-block { margin-bottom: 110px; scroll-margin-top: 120px; }
.about-block > .mono-label { display: inline-block; border: 1px solid var(--ink); border-radius: 100px; padding: 6px 14px; margin-bottom: 30px; }
.bio-head { font-family: var(--ff-head); font-weight: 500; font-size: clamp(26px, 3vw, 38px); line-height: 1.3; margin-bottom: 30px; }
.bio-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-bottom: 40px; }
.bio-cols p, .bio-p { color: #44444a; font-size: 15.5px; }
.bio-aside { display: grid; grid-template-columns: 220px 1fr; gap: 44px; align-items: center; }
.signoff { font-family: var(--ff-display); font-size: 42px; margin-top: 34px; }
/* story — staggered colored cards + handwritten arrow notes */
.story-grid { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 44px 70px; }
.value-card { padding: 26px 28px; border-radius: 6px; align-self: start; }
.value-card h3 { font-family: var(--ff-head); font-weight: 600; font-size: 22px; margin-bottom: 12px; line-height: 1.25; }
.value-card p { font-size: 14.5px; line-height: 1.6; color: rgba(19,19,22,.78); }
.value-card.vc-2 { margin-top: 110px; }
.value-card.vc-3 { margin-top: -60px; }
.value-card.vc-4 { margin-top: 40px; }
.story-note {
  position: absolute; display: flex; align-items: center; gap: 8px;
  font-family: var(--ff-hand); font-size: 26px; line-height: 1; white-space: nowrap;
}
.story-note svg { width: 44px; height: 20px; flex: 0 0 auto; }
.story-note.sn-1 { left: 52%; top: 7%; }
.story-note.sn-2 { right: 54%; top: 33%; }
.story-note.sn-3 { left: 53%; top: 60%; }
.story-note.sn-4 { right: 55%; top: 87%; }

/* work — timeline items with icon heads + date chips */
.tl-item { padding: 30px 0; border-top: 1px solid var(--gray-line); }
.tl-item:first-of-type { border-top: 0; padding-top: 0; }
.tl-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.tl-ico { width: 28px; height: 28px; flex: 0 0 auto; }
.tl-ico svg { width: 100%; height: 100%; }
.tl-head h3 { font-family: var(--ff-head); font-weight: 600; font-size: 23px; }
.tl-item p { color: #44444a; font-size: 15px; max-width: 62ch; margin-bottom: 14px; }
.date-chip {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--ff-mono); font-size: 12px; letter-spacing: .05em; text-transform: uppercase;
  border: 1.5px solid var(--ink); padding: 6px 12px;
}
.date-chip svg { width: 14px; height: 14px; }

/* ---------- case listing — folder-card grid ---------- */
.pg-cases .cases-head { padding: 80px 0 50px; text-align: left; }
.pg-cases .cases-head h1 { font-size: clamp(56px, 9vw, 120px); }
.cases-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 80px 60px;
  padding-bottom: 50px;
}
.case-folder { display: block; position: relative; cursor: none; }
.cf-tab {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--ff-mono); font-size: 13px; letter-spacing: .05em; text-transform: uppercase;
  background: #ECECEE; color: var(--ink);
  padding: 12px 34px 10px 18px;
  clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 100%, 0 100%);
  transition: background .3s, color .3s;
}
.cf-tab::before {
  content: ""; width: 9px; height: 9px; border-radius: 50%;
  background: currentColor; flex: 0 0 auto;
}
.cf-body {
  background: #ECECEE; padding: 22px;
  transition: background .3s;
}
.cf-body img { width: 100%; aspect-ratio: 16/9.6; object-fit: cover; display: block; }
.case-folder:hover .cf-tab,
.case-folder:hover .cf-body { background: var(--ink); color: #fff; }
.case-folder h2 {
  text-align: center; font-family: var(--ff-head); font-weight: 600;
  font-size: 30px; margin-top: 26px; color: var(--ink);
}
.case-folder p {
  text-align: center; color: #55555c; font-size: 14.5px;
  max-width: 340px; margin: 8px auto 0;
}
.see-badge {
  position: absolute; left: 0; top: 0; z-index: 5; pointer-events: none;
  width: 88px; height: 88px; border-radius: 50%;
  background: rgba(246, 237, 183, .92); border: 1.5px solid var(--ink);
  display: grid; place-items: center;
  font-family: var(--ff-mono); font-size: 15px; letter-spacing: .04em; color: var(--ink);
  opacity: 0; transform: translate(-50%, -50%) scale(.6);
  transition: opacity .25s, transform .3s var(--e-spring);
}
.case-folder:hover .see-badge { opacity: 1; transform: translate(-50%, -50%) scale(1); }

/* ---------- case detail — the folder, opened ----------
   Each case page opens as its homepage folder card, in the same
   accent. Per-page vars set inline: --acc, --acc-ink (text on the
   accent), --chip-bg / --chip-fg (tag chips on the accent). */
.pg-case .case-hero { padding: 34px 0 0; }
.case-folder-hero { position: relative; }
.cfh-note { position: absolute; right: 10px; top: -36px; transform: rotate(2.5deg); }
.cfh-tab {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 300px; height: 58px;
  background: var(--acc); color: var(--acc-ink);
  font-family: var(--ff-mono); font-size: 14px; letter-spacing: .06em; text-transform: uppercase;
  clip-path: polygon(0 0, 248px 0, 100% 100%, 0 100%);
}
.cfh-tab svg { width: 16px; height: 16px; }
.cfh-body {
  background: var(--acc); color: var(--acc-ink);
  padding: clamp(28px, 4vw, 56px);
  display: grid; grid-template-columns: 1.05fr minmax(280px, 44%); gap: clamp(28px, 4vw, 56px);
  align-items: center;
  box-shadow: 0 18px 44px rgba(19,19,22,.16);
}
.cfh-body h1 { font-size: clamp(46px, 6.6vw, 92px); line-height: .95; }
.cfh-date {
  display: flex; align-items: center; gap: 10px; margin-bottom: 16px;
  font-family: var(--ff-mono); font-size: 13px; letter-spacing: .05em; text-transform: uppercase;
}
.cfh-date::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: currentColor; }
.cfh-tagline {
  font-family: var(--ff-head); font-weight: 500;
  font-size: clamp(18px, 2vw, 23px); line-height: 1.4;
  margin: 22px 0 30px; max-width: 460px;
}
.cfh-chips { display: flex; flex-wrap: wrap; gap: 14px; }
.cfh-chips .chip {
  font-family: var(--ff-mono); font-size: 13px; letter-spacing: .05em; text-transform: uppercase;
  padding: 16px 16px 8px; background: var(--chip-bg); color: var(--chip-fg);
  clip-path: polygon(0 10px, 34% 10px, 42% 0, 100% 0, 100% 100%, 0 100%);
}
.cfh-body .work-frame img { aspect-ratio: 5/4; object-fit: cover; }

/* inspector panel + article layout */
.case-layout {
  display: grid; grid-template-columns: 280px minmax(0, 1fr);
  gap: clamp(40px, 6vw, 90px); align-items: start;
  padding: 80px 0 40px;
}
.case-inspector { position: sticky; top: 150px; }
.ins-card { background: #fff; border: 1.5px solid var(--ink); box-shadow: 8px 8px 0 var(--acc); padding: 24px 22px 26px; }
.ins-hand { font-family: var(--ff-hand); font-size: 32px; line-height: 1; margin-bottom: 6px; }
.ins-row { padding: 12px 0; border-bottom: 1px solid var(--gray-line); }
.ins-row .k { font-family: var(--ff-mono); font-size: 11px; letter-spacing: .05em; color: var(--gray-ruler); text-transform: uppercase; margin-bottom: 4px; }
.ins-row .v { font-family: var(--ff-head); font-weight: 500; font-size: 16px; }
.ins-swatches { display: flex; gap: 8px; padding: 16px 0 0; }
.ins-swatches span { width: 26px; height: 26px; border: 1.5px solid var(--ink); }
.ins-back {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 20px;
  font-family: var(--ff-mono); font-size: 12px; letter-spacing: .05em; text-transform: uppercase;
  border-bottom: 1.5px solid currentColor; padding-bottom: 4px;
  transition: color .25s;
}
.ins-back svg { width: 14px; height: 14px; transition: transform .3s var(--e-spring); }
.ins-back:hover svg { transform: translateX(-3px); }

/* article */
.article { max-width: 680px; margin: 0; padding-bottom: 20px; position: relative; }
.article h2 {
  display: flex; align-items: center; gap: 14px;
  font-family: var(--ff-head); font-weight: 600; font-size: 30px; margin: 56px 0 18px;
}
.article h2::before {
  content: ""; width: 13px; height: 13px; flex: 0 0 auto;
  background: var(--acc); transform: rotate(45deg);
}
.article h2:first-child { margin-top: 0; }
.article p { color: #38383f; margin-bottom: 18px; font-size: 16.5px; line-height: 1.7; }
/* pull quotes as post-its pinned to the canvas.
   No transform here — every pull carries data-reveal="pop" + inline --rot,
   and the reveal system's states own the transform (scale-up pop, then
   rotate(var(--rot)) once .in lands). A transform on this rule would win
   the cascade and kill the pop animation. */
.article .pull {
  position: relative; background: var(--note, var(--butter));
  width: fit-content; max-width: 100%;
  padding: 26px 28px 22px; margin: 36px 0;
  font-family: var(--ff-head); font-weight: 500; font-size: 17.5px; line-height: 1.55;
  box-shadow: 0 8px 18px rgba(19,19,22,.10);
}
.article .pull::before {
  content: ""; position: absolute; top: -12px; left: 50%;
  width: 96px; height: 24px;
  transform: translateX(-50%) rotate(-2deg);
  background: rgba(255,255,255,.6); border: 1px solid rgba(19,19,22,.08);
}
.article .side-note { right: -210px; top: 4px; width: 180px; font-size: 24px; line-height: 1.05; transform: rotate(2deg); }
/* outcome stickers */
.stat-row { display: flex; flex-wrap: wrap; gap: 18px 22px; margin: 30px 0 10px; }
.article .sample-note { font-family: var(--ff-mono); font-size: 11px; color: var(--gray-ruler); text-transform: uppercase; letter-spacing: .05em; margin-top: 60px; border-top: 1px solid var(--gray-line); padding-top: 20px; }

/* next folder in the drawer */
.next-wrap { padding: 40px 0 10px; }
.next-folder { display: block; }
.nf-tab {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 240px; height: 50px;
  background: var(--acc); color: var(--acc-ink);
  font-family: var(--ff-mono); font-size: 13px; letter-spacing: .06em; text-transform: uppercase;
  clip-path: polygon(0 0, 198px 0, 100% 100%, 0 100%);
}
.nf-tab svg { width: 15px; height: 15px; }
.nf-body {
  background: var(--acc); color: var(--acc-ink);
  padding: clamp(28px, 4vw, 48px) clamp(28px, 4vw, 56px);
  display: flex; align-items: center; justify-content: space-between; gap: 34px;
  box-shadow: 0 14px 34px rgba(19,19,22,.14);
}
.nf-hand { display: block; font-family: var(--ff-hand); font-size: 30px; line-height: 1; opacity: .85; margin-bottom: 10px; }
.nf-title { display: block; font-size: clamp(40px, 5vw, 64px); line-height: .95; }
.nf-tagline { display: block; margin-top: 12px; font-size: 16px; max-width: 460px; opacity: .92; }
.nf-arrow {
  flex: 0 0 auto; width: 76px; height: 76px;
  border: 2px solid currentColor; border-radius: 50%;
  display: grid; place-items: center;
  transition: transform .35s var(--e-spring);
}
.nf-arrow svg { width: 30px; height: 30px; }
.next-folder:hover .nf-arrow { transform: translateX(7px); }

/* ---------- playground ---------- */
.pg-play { overflow: hidden; height: 100vh; }
.play-board { position: fixed; inset: 0; top: var(--header-h); }
.play-item { position: absolute; touch-action: none; cursor: grab; user-select: none; }
.play-item.dragging { cursor: grabbing; z-index: 60 !important; }
.play-item.dragging .polaroid { transform: rotate(2deg) scale(1.04); box-shadow: 0 24px 48px rgba(19,19,22,.3); }
.play-item .polaroid { pointer-events: none; }
.play-item .caption-tag { pointer-events: none; }
.play-note { position: fixed; left: 40px; bottom: 34px; font-family: var(--ff-hand); font-size: 30px; color: var(--gray-ruler); z-index: 3; }

/* ---------- contact (centered sticky-note layout) ---------- */
.pg-contact .contact-wrap {
  min-height: calc(100vh - var(--header-h) - 120px);
  display: flex; flex-direction: column; align-items: center;
  padding: 70px 0 60px; position: relative; text-align: center;
}
.contact-title-box {
  position: relative; display: inline-block;
  border: 1.5px solid var(--violet);
  padding: 6px 30px; transform: rotate(-2deg); margin-top: 6px;
}
.contact-title-box .handle { position: absolute; width: 10px; height: 10px; background: #fff; border: 1.5px solid var(--violet); }
.contact-title-box .handle.tl { top: -6px; left: -6px; }
.contact-title-box .handle.tr { top: -6px; right: -6px; }
.contact-title-box .handle.bl { bottom: -6px; left: -6px; }
.contact-title-box .handle.br { bottom: -6px; right: -6px; }
.contact-title-box h1 { font-size: clamp(56px, 8vw, 96px); line-height: 1; }
.pg-contact .hand-note { font-family: var(--ff-hand); font-size: 30px; color: var(--ink); }
.sticky-form {
  width: min(460px, 90%); margin-top: 40px; text-align: left;
  background: var(--butter); padding: 22px 24px 18px;
  box-shadow: 0 10px 26px rgba(19,19,22,.14);
  transform: rotate(-.5deg);
}
.form-step { display: none; }
.form-step.active { display: block; animation: stepin .5s var(--e-out); }
@keyframes stepin { from { opacity: 0; transform: translateX(24px);} to { opacity: 1; transform: none; } }
.form-label { font-family: var(--ff-mono); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 10px; display: block; }
.form-input {
  width: 100%; border: 0; background: transparent; outline: none; resize: none;
  font-family: var(--ff-body); font-size: 16px; min-height: 74px;
}
.form-input::placeholder { color: rgba(19,19,22,.45); }
.form-foot { display: flex; align-items: center; gap: 16px; margin-top: 10px; }
.btn-step {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--ink); color: #fff;
  font-family: var(--ff-mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase;
  padding: 8px 14px;
}
.step-counter { font-family: var(--ff-mono); font-size: 12px; color: rgba(19,19,22,.55); }
.form-success { display: none; text-align: center; padding: 20px 0 10px; }
.form-success.active { display: block; animation: stepin .5s var(--e-out); }
.form-success .hand { font-size: 44px; color: var(--ink); }
.avail-note { display: flex; align-items: center; gap: 12px; margin-top: 44px; }
.avail-note svg { width: 46px; height: 22px; }
.avail-note .hand { font-size: 28px; }
.social-card {
  margin-top: 26px; display: flex; gap: 0;
  border: 1.5px solid var(--ink); border-radius: 14px; overflow: hidden; background: #fff;
}
.social-card a {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  font-family: var(--ff-mono); font-size: 11px; letter-spacing: .05em; text-transform: uppercase;
  padding: 18px 26px; border-left: 1.5px solid var(--ink);
  transition: background .3s;
}
.social-card a:first-child { border-left: 0; }
.social-card a:hover { background: var(--violet-soft); }
.social-card a svg { width: 20px; height: 20px; }
.contact-pol { position: absolute; width: 150px; z-index: 3; }
.contact-pol.cp-l { left: 4%; top: 40px; }
.contact-pol.cp-r { right: 4%; top: 60px; }

/* ---------- responsive ---------- */
@media (max-width: 1220px) {
  .hero-tag-l { left: -30px; } .hero-tag-r { right: -30px; }
  .about-pol-l { left: -10px; } .about-pol-r { right: -10px; }
}
@media (max-width: 900px) {
  /* nav collapses into a MENU-button dropdown */
  .main-nav {
    display: none; position: fixed; top: var(--header-h); left: 0; right: 0;
    transform: none; flex-direction: column; align-items: stretch; gap: 2px;
    background: var(--paper); border-bottom: 1.5px solid var(--ink);
    padding: 10px 14px 14px; z-index: 60;
  }
  body.menu-open .main-nav { display: flex; }
  .main-nav a { padding: 13px 14px; }
  .menu-btn { display: inline-flex; }
  .ruler-y { display: none; }
  .tag-row { flex-wrap: wrap; }
  .chat-bubble, .hero-invert { display: none; }
  .hero-tag-l { position: static; display: inline-block; margin-bottom: 20px; }
  .hero-tag-r { position: static; display: inline-block; margin-top: 16px; }
  .hero-badge-l, .hero-badge-r, .hero-avatar { display: none; }
  .work-card-inner { grid-template-columns: 1fr; gap: 22px; height: 100%; overflow-y: hidden; }
  .folder-tab { --tabw: 200px; height: 46px; font-size: 11px; clip-path: polygon(34px 0, 166px 0, 100% 100%, 0 100%); }
  .work-card:first-child .folder-tab { clip-path: polygon(0 0, 166px 0, 100% 100%, 0 100%); }
  .work-card:last-child .folder-tab { clip-path: polygon(34px 0, 100% 0, 100% 100%, 0 100%); }
  .work-frame { order: -1; max-height: 32vh; overflow: hidden; }
  .work-frame img { height: 100%; }
  .work-tags { position: static; margin-top: 20px; }
  .cta-top { grid-template-columns: 1fr; text-align: center; }
  .cta-blob { margin: 0 auto; width: 200px; height: 200px; }
  .comment-bubble { left: 4%; }
  .cta-bar .giant { padding: 4px 16px; }
  .cta-bar .tile { width: 56px; }
  .cta-bar .tile svg { width: 34px; height: 34px; }
  .pg-about .about-layout { grid-template-columns: 1fr; }
  .side-nav { position: static; flex-direction: row; justify-content: center; }
  .sec-frame { padding: 32px 22px 26px; }
  .story-grid { grid-template-columns: 1fr; gap: 22px; }
  .value-card.vc-2, .value-card.vc-3, .value-card.vc-4 { margin-top: 0; }
  .story-note, .sec-bubble, .name-pill { display: none; }
  .bio-note-row { grid-template-columns: 1fr; }
  .polaroid.mini { margin: 0 auto; }
  .cases-grid { grid-template-columns: 1fr; gap: 50px; }
  .see-badge { display: none; }
  .case-folder { cursor: pointer; }
  .case-layout { grid-template-columns: 1fr; gap: 44px; padding: 56px 0 20px; }
  .case-inspector { position: static; }
  .ins-rows { display: grid; grid-template-columns: 1fr 1fr; column-gap: 22px; }
  .cfh-body { grid-template-columns: 1fr; }
  .cfh-tab { width: 200px; height: 46px; font-size: 11px; clip-path: polygon(0 0, 166px 0, 100% 100%, 0 100%); }
  .cfh-note { display: none; }
  .nf-body { flex-direction: column; align-items: flex-start; }
  .nf-arrow { width: 60px; height: 60px; }
  .nf-arrow svg { width: 24px; height: 24px; }
  .contact-pol { display: none; }
  .about-pol-l, .about-pol-r { display: none; }
}

@media (max-width: 560px) {
  .avatars { display: none; }
  .site-header { padding: 0 12px; }
  .hero-name { padding: 0 12px; }
  .hero-statement { padding: 0 8px; }
  .work-title { font-size: 32px; }
  .work-tagline { font-size: 15px; margin: 12px 0 18px; }
  .folder-tab { --tabw: 160px; font-size: 10px; clip-path: polygon(26px 0, 134px 0, 100% 100%, 0 100%); }
  .work-card:first-child .folder-tab { clip-path: polygon(0 0, 134px 0, 100% 100%, 0 100%); }
  .work-card:last-child .folder-tab { clip-path: polygon(26px 0, 100% 0, 100% 100%, 0 100%); }
  .cta-bar .giant { font-size: 30px; padding: 4px 12px; }
  .cta-bar .tile { width: 44px; }
  .cta-bar .tile svg { width: 26px; height: 26px; }
  .cta-card { min-height: 420px; border-radius: 24px; }
  .comment-bubble { width: 240px; top: -20px; left: 6%; }
  .skill-bar { font-size: 19px; padding: 12px 18px; }
  .skill-deco { width: 40px; height: 40px; }
  .footer-bar .col { justify-content: center; text-align: center; }
  .contact-title-box h1 { font-size: 48px; }
  .side-nav { gap: 10px; padding: 12px 10px; }
  .cfh-tab { width: 160px; font-size: 10px; clip-path: polygon(0 0, 134px 0, 100% 100%, 0 100%); }
  .nf-tab { width: 190px; font-size: 11px; clip-path: polygon(0 0, 156px 0, 100% 100%, 0 100%); }
  .article .pull { padding: 22px 20px 18px; }
  .ins-rows { grid-template-columns: 1fr; }
}

/* case-page margin notes need room to the right of the article */
@media (max-width: 1500px) {
  .pg-case .article .side-note { display: none; }
}