/* ───────────────────────────────────────────────────────────────
   martine.design — Home page
   Warm Scandinavian / Japandi. Matches the Figma home design.
   ─────────────────────────────────────────────────────────────── */

/* --- Fonts --- */
@font-face { font-family:'KENOKY'; src:url('fonts/KENOKY wof/KENOKY-Regular.woff2')  format('woff2'), url('fonts/KENOKY ttf/KENOKY-Regular.ttf')  format('truetype'); font-weight:400; font-display:block; }
@font-face { font-family:'KENOKY'; src:url('fonts/KENOKY wof/KENOKY-Medium.woff2')   format('woff2'), url('fonts/KENOKY ttf/KENOKY-Medium.ttf')   format('truetype'); font-weight:500; font-display:block; }
@font-face { font-family:'KENOKY'; src:url('fonts/KENOKY wof/KENOKY-SemiBold.woff2') format('woff2'), url('fonts/KENOKY ttf/KENOKY-SemiBold.ttf') format('truetype'); font-weight:600; font-display:block; }
@font-face { font-family:'KENOKY'; src:url('fonts/KENOKY wof/KENOKY-Bold.woff2')     format('woff2'), url('fonts/KENOKY ttf/KENOKY-Bold.ttf')     format('truetype'); font-weight:700; font-display:block; }

/* --- Tokens --- */
:root {
  --bg:         #efe8e4;   /* warm off-white — primary background */
  --bg-soft:    #f3ede9;   /* very slightly lifted cream for cards */
  --pink:       #e05e81;   /* warm pink — accent */
  --pink-soft:  #ecb6c5;
  --brown:      #2a170e;   /* near-black brown — text / dark sections */
  --brown-2:    #3a2417;   /* lifted brown for dark-section cards */
  --cream:      #efe8e4;   /* text on dark */
  --muted:      #8a766c;   /* muted brown */
  --line:       rgba(42,23,14,0.13);
  --line-light: rgba(239,232,228,0.16);

  --font-display: 'KENOKY', 'Cormorant Garamond', serif;
  --font-body:    'Poppins', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;

  --pad-x: clamp(22px, 6vw, 104px);
  --pad-y: clamp(84px, 13vw, 168px);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  color: var(--brown);
  background: var(--bg);
  font-size: 18px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }

/* --- Type helpers --- */
.kenoky { font-family: var(--font-display); font-weight: 500; letter-spacing: -0.005em; line-height: 1.06; }
.tracked {
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  font-size: 12px;
}
.tracked.light { color: var(--cream); opacity: 0.62; }
.eyebrow { color: var(--muted); margin-bottom: 22px; }

/* ─── Sticky top bar ────────────────────────────────────────── */
.topbar {
  position: fixed; top: 0; left: 0; right: 0;
  display: flex; align-items: center; justify-content: space-between;
  padding: 26px var(--pad-x);
  z-index: 60;
  transition: background .35s ease, padding .35s ease, box-shadow .35s ease;
}
.topbar.scrolled {
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: blur(10px);
  padding-top: 16px; padding-bottom: 16px;
}
.topbar.scrolled.on-dark {
  background: color-mix(in srgb, var(--brown) 78%, transparent);
}
.brand {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 21px;
  letter-spacing: 0.01em;
  color: var(--brown);
  transition: color .3s ease;
}
.topbar.on-dark .brand { color: var(--cream); }

/* hamburger — two clean lines, no chrome (matches Figma) */
.burger {
  width: 40px; height: 26px;
  display: flex; flex-direction: column; justify-content: center; gap: 7px;
  align-items: flex-end;
}
.burger span {
  display: block; height: 2px; width: 30px;
  background: var(--brown); border-radius: 2px;
  transition: width .25s ease, background .3s ease, transform .25s ease;
}
.burger span:last-child { width: 22px; }
.topbar.on-dark .burger span { background: var(--cream); }
.burger:hover span { width: 30px; }
.burger:hover span:first-child { background: var(--pink); }

/* ─── Hero ──────────────────────────────────────────────────── */
.hero {
  padding: clamp(150px, 22vh, 230px) var(--pad-x) clamp(70px, 10vh, 120px);
  max-width: 1500px;
}
.hero-h {
  font-size: clamp(46px, 7vw, 114px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0 0 34px;
  color: var(--brown);
}
.hero-l1 { white-space: nowrap; }
.hero-h em.rotator {
  color: var(--pink);
  font-style: normal;
  display: inline-block;
  transition: opacity .4s ease, transform .4s cubic-bezier(.2,.7,.3,1);
}
.hero-h em.rotator.swap-out { opacity: 0; transform: translateY(-0.16em); }

.hero-sub {
  font-size: clamp(15px, 1.15vw, 18px);
  line-height: 1.65;
  max-width: 430px;
  color: var(--brown);
  opacity: 0.82;
  margin: 0 0 44px;
}
.hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; }

/* buttons */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 16px 30px;
  border-radius: 999px;
  font-weight: 500;
  font-size: 15px;
  white-space: nowrap;
  transition: transform .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
}
.btn.primary { background: var(--brown); color: var(--cream); }
.btn.primary:hover { background: var(--pink); transform: translateY(-2px); }
.btn.ghost { background: transparent; color: var(--brown); border: 1.5px solid var(--brown); }
.btn.ghost:hover { background: var(--brown); color: var(--cream); transform: translateY(-2px); }

/* ─── Section heads ─────────────────────────────────────────── */
.work-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 32px;
  padding: 0 var(--pad-x);
  margin-bottom: clamp(32px, 5vw, 56px);
}
.work-head h2 {
  margin: 0;
  font-size: clamp(40px, 5.4vw, 84px);
  line-height: 1.04;
  letter-spacing: -0.015em;
}
.link-arrow {
  font-weight: 500; font-size: 15px;
  border-bottom: 1px solid currentColor;
  padding-bottom: 3px;
  white-space: nowrap;
  transition: color .2s ease;
}
.link-arrow:hover { color: var(--pink); }

/* ─── Work marquee ──────────────────────────────────────────── */
.work { padding: clamp(40px, 7vw, 96px) 0 var(--pad-y); }
.marquee {
  overflow: hidden;
  cursor: default;
}
.marquee.draggable { cursor: grab; }
.marquee.dragging { cursor: grabbing; }
.marquee.dragging .marquee-track { transition: none; }
.marquee.dragging .proj { pointer-events: none; }
.marquee-track {
  display: flex;
  gap: 18px;
  width: max-content;
  padding: 0 9px;
  will-change: transform;
}
.proj {
  position: relative;
  flex: 0 0 auto;
  width: clamp(260px, 23vw, 340px);
  aspect-ratio: 3 / 4;
  border-radius: 6px;
  overflow: hidden;
  background: var(--tone, var(--bg-soft));
  display: block;
}
/* placeholder cover — subtle warm stripes + a quiet monospace marker */
.proj-ph {
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(135deg,
      rgba(42,23,14,0.045) 0 2px,
      transparent 2px 13px);
  display: flex; align-items: flex-start; justify-content: flex-end;
  padding: 16px;
}
.proj-ph-num {
  font-family: var(--font-body);
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(42,23,14,0.4);
}
.proj.on-dark .proj-ph { background: repeating-linear-gradient(135deg, rgba(239,232,228,0.06) 0 2px, transparent 2px 13px); }
.proj.on-dark .proj-ph-num { color: rgba(239,232,228,0.55); }

/* photo cover for linked projects (front-page marquee) */
.proj-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.proj-ph.has-img { background: none; }
.proj-ph.has-img .proj-ph-num { color: rgba(239,232,228,0.92); text-shadow: 0 1px 6px rgba(42,23,14,0.45); }

.proj-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(42,23,14,0.92) 0%, rgba(42,23,14,0.55) 45%, rgba(42,23,14,0.05) 100%);
  color: var(--cream);
  padding: 26px;
  display: flex; flex-direction: column; justify-content: flex-end;
  gap: 10px;
  opacity: 0;
  transition: opacity .3s ease;
}
.proj:hover .proj-overlay { opacity: 1; }
.proj-tag {
  font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--pink-soft);
  align-self: flex-start;
}
.proj-overlay h3 {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(26px, 2.4vw, 36px); line-height: 1.05; margin: 0;
  letter-spacing: -0.01em;
}
.proj-overlay p {
  font-size: 14px; line-height: 1.45; margin: 0;
  color: rgba(239,232,228,0.86); text-wrap: pretty;
}
.proj-arrow {
  position: absolute; top: 22px; right: 22px;
  width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid rgba(239,232,228,0.5);
  display: flex; align-items: center; justify-content: center;
  font-size: 17px;
  transform: translate(6px,-6px); opacity: 0;
  transition: transform .3s ease .04s, opacity .3s ease .04s, background .2s ease, color .2s ease;
}
.proj:hover .proj-arrow { transform: none; opacity: 1; }
.proj-arrow:hover, .proj:hover .proj-arrow { }

/* ─── About ────────────────────────────────────────────────── */
.about { padding: var(--pad-y) var(--pad-x); }
.about-grid {
  display: grid;
  grid-template-columns: 1fr 0.92fr;
  gap: clamp(48px, 6vw, 110px);
  align-items: center;
}
.about-text h2 {
  font-size: clamp(38px, 4.6vw, 70px);
  line-height: 1.05;
  letter-spacing: -0.015em;
  margin: 6px 0 26px;
}
.about-text p {
  font-size: 16px;
  line-height: 1.7;
  max-width: 480px;
  color: var(--brown);
  opacity: 0.86;
}
.about-text p + p { margin-top: 16px; }

.pills {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin: 34px 0 36px;
  max-width: 480px;
}
.pill {
  background: transparent;
  color: var(--brown);
  padding: 10px 18px;
  border-radius: 999px;
  font-weight: 400;
  font-size: 14px;
  border: 1px solid var(--line);
  transition: background .2s ease, border-color .2s ease;
}
.pill:hover { background: var(--bg-soft); border-color: var(--muted); }

.about-photo {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--brown-2);
}
.about-photo img { width: 100%; height: 100%; object-fit: cover; }

/* ─── How I work (dark process) ─────────────────────────────── */
.process {
  background: var(--brown);
  color: var(--cream);
  padding: clamp(80px,11vw,150px) 0 clamp(70px,9vw,120px);
  overflow: hidden;
}
.proc-head { padding: 0 var(--pad-x); max-width: 760px; }
.proc-head .eyebrow { color: rgba(239,232,228,0.5); }
.proc-head h2 { color: var(--cream); margin: 6px 0 0; font-size: clamp(40px, 5.4vw, 84px); line-height: 1.04; letter-spacing: -0.015em; }
.proc-intro {
  margin: 22px 0 0;
  font-size: clamp(15px, 1.15vw, 18px);
  line-height: 1.6;
  color: rgba(239,232,228,0.66);
  max-width: 560px;
}
.proc-intro strong { color: var(--cream); font-weight: 600; }

.proc-stage { padding: 0 var(--pad-x); margin-top: clamp(24px, 4vh, 44px); }
.proc-track-wrap { position: relative; margin-top: 8px; }
.proc-svg { width: 100%; height: auto; display: block; overflow: visible; touch-action: none; }

#procTrail { transition: stroke-dashoffset .05s linear; }

/* nodes */
.proc-node { cursor: pointer; }
.proc-node .pn-hit { fill: transparent; }
.proc-node .pn-mark {
  fill: var(--brown); stroke: rgba(239,232,228,0.34); stroke-width: 2;
  transition: fill .25s ease, stroke .25s ease, r .2s ease;
}
.proc-node.passed .pn-mark { fill: var(--pink); stroke: var(--pink); }
.proc-node.active .pn-mark { stroke: var(--cream); stroke-width: 2.5; }

/* handle */
#procHandle { cursor: grab; }
#procHandle:active { cursor: grabbing; }
#procHandle:focus { outline: none; }
#procHandle .ph-pulse { fill: var(--pink); opacity: 0.26; transform-box: fill-box; transform-origin: center; }
#procHandle .ph-ring { fill: var(--cream); }
#procHandle .ph-core { fill: var(--pink); }
#procHandle:focus .ph-ring { stroke: var(--cream); stroke-width: 2; }
.proc-track-wrap.untouched #procHandle .ph-pulse { animation: ph-pulse 1.8s ease-out infinite; }
@keyframes ph-pulse {
  0% { transform: scale(0.7); opacity: 0.4; }
  70%, 100% { transform: scale(1.7); opacity: 0; }
}

/* hint chip */
.proc-hint {
  position: absolute; left: 0; top: 0;
  transform: translate(-50%, -150%);
  background: var(--cream); color: var(--brown);
  font-size: 12.5px; font-weight: 600; white-space: nowrap;
  padding: 7px 13px; border-radius: 999px;
  pointer-events: none;
  box-shadow: 0 8px 22px rgba(0,0,0,0.25);
  transition: opacity .35s ease;
}
.proc-track-wrap:not(.untouched) .proc-hint { opacity: 0; }

/* info card that follows the handle */
.proc-bubble {
  position: absolute; left: 0; top: 0;
  width: min(300px, 74vw);
  background: var(--bg-soft); color: var(--brown);
  border-radius: 14px;
  padding: 18px 20px 20px;
  box-shadow: 0 20px 48px rgba(0,0,0,0.36);
  pointer-events: none;
  display: flex; flex-direction: column; gap: 8px;
  transition: opacity .2s ease;
  z-index: 3;
}
.proc-bubble::after {
  content: ''; position: absolute; left: var(--arrow-x, 50%); transform: translateX(-50%);
  border: 9px solid transparent;
}
.proc-bubble[data-flip="up"]   { transform: translate(-50%, calc(-100% - 24px)); }
.proc-bubble[data-flip="up"]::after   { top: 100%; border-top-color: var(--bg-soft); }
.proc-bubble[data-flip="down"] { transform: translate(-50%, 24px); }
.proc-bubble[data-flip="down"]::after { bottom: 100%; border-bottom-color: var(--bg-soft); }
.pb-num { font-size: 11px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--pink); }
.pb-title { font-family: var(--font-body); font-weight: 600; font-size: 19px; line-height: 1.1; color: var(--brown); }
.pb-desc { font-size: 14px; line-height: 1.5; color: #6a564c; text-wrap: pretty; }

/* ─── How I work — stacking scroll cards (static layout) ─────
   Scroll-stack interaction is wired separately in Claude Code with
   GSAP ScrollTrigger; this is the resting end-state design comp.
   Cards in DOM order 1→5; --depth sets the resting stack (0 = front). */
.dproc {
  background: #2a170e;
  color: #fff;
  padding: clamp(120px, 16vw, 200px) 0 clamp(120px, 16vw, 200px) var(--pad-x);
  overflow-x: clip; /* clips horizontal card bleed but allows cards to slide up from below viewport */
}
.dproc-grid {
  display: grid;
  grid-template-columns: minmax(260px, 0.82fr) 1.18fr;
  gap: clamp(36px, 5vw, 88px);
  align-items: center;
}
.dproc-head { max-width: 460px; }
.dproc-head .eyebrow { color: rgba(255, 255, 255, 0.5); margin-bottom: 18px; }
.dproc-head h2 {
  color: #fff; margin: 0;
  font-size: clamp(40px, 5vw, 78px);
  line-height: 1.04; letter-spacing: -0.015em;
}
.dproc-head p {
  margin: 16px 0 0;
  font-size: clamp(15px, 1.2vw, 18px);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.7);
  max-width: 380px;
}

/* the pile bleeds off the right edge; deeper cards rise up-and-left */
.dproc-stack {
  position: relative;
  height: clamp(420px, 34vw, 520px);
}
.dp-card {
  position: absolute;
  bottom: calc(var(--depth) * 52px); /* stacking offset — enough to reveal step label on each card */
  right: -40px;
  width: clamp(470px, 42vw, 640px);
  min-height: clamp(208px, 17vw, 248px);
  background: #efe8e4;
  color: #2a170e;
  border-radius: 22px;
  padding: clamp(26px, 2.6vw, 38px) clamp(28px, 3vw, 44px);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.36);
  z-index: calc(10 - var(--depth));
  display: flex;
  align-items: stretch;
  gap: clamp(22px, 2.4vw, 36px);
}
.dp-art {
  flex: 0 0 auto;
  width: clamp(96px, 9vw, 130px);
  border-radius: 16px;
  background:
    repeating-linear-gradient(45deg, rgba(42,23,14,0.05) 0 7px, transparent 7px 15px),
    rgba(42,23,14,0.035);
  border: 1px dashed rgba(42, 23, 14, 0.18);
  display: flex; align-items: center; justify-content: center;
}
.dp-art-label {
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
  color: rgba(42, 23, 14, 0.42);
}
.dp-body { display: flex; flex-direction: column; min-width: 0; }
.dp-step {
  font-family: var(--font-body);
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(42, 23, 14, 0.45);
}
.dp-title {
  font-family: var(--font-body);
  font-weight: 700;
  margin: 14px 0 0;
  font-size: clamp(24px, 2.3vw, 32px);
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: #2a170e;
}
.dp-title .dp-hl { color: #e05e81; }
.dp-desc {
  margin: 12px 0 0;
  font-size: clamp(15px, 1.2vw, 18px);
  line-height: 1.5;
  color: #2a170e;
}
.dp-tools {
  margin-top: auto;
  padding-top: clamp(18px, 2vw, 26px);
  font-size: 11.5px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(42, 23, 14, 0.5);
}


/* Cards become clickable once fully stacked */
.dp-stack-ready .dp-card { cursor: pointer; }
.dp-stack-ready .dp-card:hover { filter: brightness(1.03); }

/* How I work — stacking cards: responsive */
@media (max-width: 900px) {
  .dproc { padding-right: var(--pad-x); }
  .dproc-grid { grid-template-columns: 1fr; gap: 36px; align-items: start; }
  .dproc-stack { height: clamp(420px, 100vw, 560px); }
  .dp-card {
    right: 0;
    left: 0;
    width: 100%;
    bottom: calc(var(--depth) * 48px); /* enough to reveal step label on each card */
  }
}

@media (max-width: 600px) {
  .dp-card {
    padding: 20px;
    border-radius: 16px;
    gap: 16px;
    min-height: 170px; /* consistent height so every card peeks evenly above the one in front */
  }
  .dp-art { width: 72px; border-radius: 10px; }
  .dp-title { font-size: 22px; margin-top: 8px; }
  .dp-desc { font-size: 14px; }
  .dp-tools { font-size: 10.5px; padding-top: 14px; }
}

/* ─── Testimonial / quote carousel ──────────────────────────── */
.quote {
  background: var(--bg);
  padding: var(--pad-y) var(--pad-x);
}
.quote-inner {
  max-width: 940px; margin: 0 auto;
  text-align: center;
  display: flex; flex-direction: column; align-items: center;
}
.quote blockquote {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(24px, 3.2vw, 44px);
  line-height: 1.28;
  letter-spacing: -0.012em;
  color: var(--brown);
  text-wrap: balance;
  transition: opacity .35s ease, transform .35s ease;
}
.quote blockquote::before { content: '\201C'; color: var(--pink); margin-right: 2px; }
.quote blockquote::after  { content: '\201D'; color: var(--pink); margin-left: 2px; }
.quote.swapping blockquote { opacity: 0; transform: translateY(8px); }
.quote-cite { margin-top: clamp(26px, 4vw, 44px); font-size: 15px; }
.quote-cite .qName { font-weight: 600; color: var(--brown); }
.quote-cite .qRole { color: var(--pink); margin-left: 8px; }

.quote-avatars {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  margin-top: clamp(26px, 4vw, 40px);
}
.q-av {
  width: 50px; height: 50px;
  border-radius: 12px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 500; font-size: 17px;
  color: var(--muted);
  opacity: 0.55;
  transform: scale(0.86);
  transition: transform .3s cubic-bezier(.2,.7,.3,1), opacity .3s ease, background .3s ease, color .3s ease, box-shadow .3s ease;
}
.q-av:hover { opacity: 0.85; }
.q-av.active {
  opacity: 1;
  transform: scale(1.18);
  background: var(--brown);
  color: var(--cream);
  border-color: var(--brown);
  box-shadow: 0 14px 30px rgba(42,23,14,0.24);
}

/* ─── Footer / contact ──────────────────────────────────────── */
.footer {
  background: var(--brown);
  color: var(--cream);
  padding: var(--pad-y) var(--pad-x) 44px;
}
.footer .eyebrow { color: rgba(239,232,228,0.5); }
.footer-mail {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(30px, 6.6vw, 116px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 22px 0 0;
  color: var(--cream);
  transition: color .25s ease;
  white-space: nowrap;
  word-break: normal;
}
.footer-mail:hover { color: var(--pink); }
.footer-divider {
  height: 1px; background: var(--line-light);
  margin: clamp(48px, 8vw, 96px) 0 26px;
}
.footer-bottom {
  display: flex; justify-content: space-between; align-items: center;
  gap: 20px;
  font-size: 13px;
  letter-spacing: 0.02em;
  color: rgba(239,232,228,0.55);
}
.socials { display: flex; gap: 22px; }
.socials a { font-weight: 500; color: rgba(239,232,228,0.78); transition: color .2s ease; }
.socials a:hover { color: var(--pink); }

/* ─── Full-screen menu overlay ──────────────────────────────── */
.menu {
  position: fixed; inset: 0;
  z-index: 100;
  pointer-events: none;
  visibility: hidden;
  transition: visibility 0s linear 1.05s;
}
.menu[data-open="true"] {
  pointer-events: auto;
  visibility: visible;
  transition: visibility 0s linear 0s;
}
.menu-blob {
  position: absolute; inset: 0;
  transform: translateY(-110%);
  transition: transform .95s cubic-bezier(.7,0,.2,1),
              border-radius .95s cubic-bezier(.7,0,.2,1);
  will-change: transform, border-radius;
}
.menu-blob.back  { background: var(--brown-2); border-radius: 0 0 50% 50% / 0 0 45% 45%; transition-delay: 0s; }
.menu-blob.front { background: var(--brown);   border-radius: 0 0 50% 50% / 0 0 80% 80%; transition-delay: .1s; }
.menu[data-open="true"] .menu-blob { transform: translateY(0); border-radius: 0; }
.menu[data-open="false"] .menu-blob.back  { transition-delay: .1s; }
.menu[data-open="false"] .menu-blob.front { transition-delay: 0s;  }

.menu-content { position: relative; z-index: 1; height: 100%; display: flex; flex-direction: column; color: var(--cream); }
.menu-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 26px var(--pad-x);
}
.menu-bar .brand { color: var(--cream); }
.menu-close {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--cream); color: var(--brown);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  opacity: 0;
  transform: scale(.6) rotate(-90deg);
  transition: transform .35s cubic-bezier(.2,.7,.3,1) .4s, opacity .35s ease .4s, background .25s ease, color .25s ease;
}
.menu[data-open="true"] .menu-close { opacity: 1; transform: none; }
.menu-close:hover { background: var(--pink); color: #fff; transform: rotate(90deg) !important; }

.menu-list { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 0 var(--pad-x); }
.menu-item {
  display: grid;
  grid-template-columns: 1fr auto 50px;
  align-items: center;
  gap: 48px;
  padding: clamp(20px, 3.6vh, 50px) 0;
  color: var(--cream);
  opacity: 0;
  transform: translateY(24px);
  /* order: opacity, transform, padding-left, color */
  transition: opacity .5s ease, transform .5s cubic-bezier(.2,.7,.3,1),
              padding-left .2s ease, color .2s ease;
}
.menu[data-open="true"] .menu-item {
  opacity: 1; transform: none;
  /* delay only the entrance (opacity + transform); hover props stay instant */
  transition-delay: calc(0.55s + var(--i, 0) * 0.07s), calc(0.55s + var(--i, 0) * 0.07s), 0s, 0s;
}
.menu-item .m-num { display: none; }
.menu-item .m-label {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(46px, 8.4vh, 112px);
  line-height: 1.04; letter-spacing: -0.025em;
  transition: transform .35s cubic-bezier(.2,.7,.3,1);
}
.menu-item .m-detail { font-size: 15px; font-weight: 500; color: rgba(239,232,228,0.5); text-align: right; transition: color .2s ease; }
.menu-item .m-arrow { font-size: 22px; width: 50px; text-align: right; color: rgba(239,232,228,0.4); opacity: 0; transform: translateX(-12px); transition: opacity .2s ease, transform .2s ease, color .2s ease; }
.menu-item:hover { padding-left: 18px; color: var(--pink); }
.menu-item:hover .m-detail { color: var(--cream); }
.menu-item:hover .m-arrow  { opacity: 1; transform: none; color: var(--pink); }

.menu-foot {
  padding: clamp(18px, 2.4vh, 32px) var(--pad-x);
  display: flex; align-items: center; justify-content: space-between; gap: 32px;
  font-size: 14px; color: rgba(239,232,228,0.55);
  border-top: 1px solid var(--line-light);
}
.menu-foot .m-mail { color: var(--cream); font-weight: 500; font-size: 15px; transition: color .25s ease; }
.menu-foot .m-mail:hover { color: var(--pink); }
.menu-foot .m-socials { display: flex; gap: 20px; }
.menu-foot .m-socials a { font-weight: 500; color: var(--cream); transition: color .25s ease; }
.menu-foot .m-socials a:hover { color: var(--pink); }

/* ─── Responsive ────────────────────────────────────────────── */
@media (max-width: 900px) {
  .hero-l1 { white-space: normal; }
  .work-head { flex-direction: column; align-items: flex-start; gap: 18px; }
  .about-grid { grid-template-columns: 1fr; gap: 40px; }
  .about-photo { max-width: 460px; }
  .menu-item { grid-template-columns: 1fr auto; gap: 20px; }
  .menu-item .m-arrow, .menu-item .m-detail { display: none; }
  .footer-bottom { flex-direction: column; gap: 14px; align-items: flex-start; }
  .footer-mail { font-size: clamp(26px, 8vw, 60px); }
  .proj { width: clamp(220px, 64vw, 300px); }
}