/* ─── Snaga Unicase Display ───────────────────────────────────────────
   Loaded as an Adobe Fonts web project (Typekit kit aei2dmt) via a
   <link rel="stylesheet" href="https://use.typekit.net/aei2dmt.css"> in
   each page's <head>. Web family name: "snaga-unicase-display"
   (weights 400 & 700). Do NOT self-host the .otf — it's licensed for web
   use only through this kit. ──────────────────────────────────────────── */

/* ─── Reset & Base ─── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --cream: #fffbfc;
  --yellow: #fff9bd;
  --charcoal: #212121;
  --font-display: 'snaga-unicase-display', 'DM Serif Display', serif;
  --font-body: 'Inter', sans-serif;
  --font-hand: 'Gaegu', cursive;
}

html { scroll-behavior: smooth; }

body {
  background: var(--cream);
  color: var(--charcoal);
  font-family: var(--font-body);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ─── Navbar ─── */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 48px;
  background: rgba(255, 251, 252, 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(0,0,0,0.06);
}

.nav-brand {
  font-family: var(--font-display);
  font-size: 20px;
  letter-spacing: 0.01em;
  color: var(--charcoal);
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.nav-home {
  font-size: 15px;
  font-weight: 500;
  color: var(--charcoal);
  cursor: pointer;
}

.nav-contact {
  font-size: 15px;
  font-weight: 400;
  color: rgba(33,33,33,0.6);
  text-decoration: none;
  transition: color 0.2s ease;
}

.nav-contact:hover { color: var(--charcoal); }

/* ─── Hero Scrapbook ─── */
/* Fixed 1440×1024 aspect stage: height = 1024/1440 = 71.11vw.
   All scrap positions/sizes inside are vw-based off the same 1440px
   canvas, so the whole collage scales as one unit at any width. */
.hero-scrapbook {
  position: relative;
  height: 60vw;
  min-height: 0;
  padding-top: 4.44vw; /* 64px at 1440 */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* Dot grain texture */
.hero-scrapbook::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(33,33,33,0.09) 1px, transparent 1px);
  background-size: 20px 20px;
  pointer-events: none;
  z-index: 0;
}

/* ── Center name ── */
.hero-center {
  position: relative;
  z-index: 9;
  text-align: center;
  pointer-events: none;
  user-select: none;
  margin-top: -9.5vw; /* lifted to sit among the upper scrap cluster, balanced vs the trimmed hero height */
}

.hero-display {
  font-family: var(--font-display);
  font-size: 8.2vw; /* trimmed so the wide "Atherton" line clears the flanking polaroids */
  font-weight: 400;
  line-height: 0.9;
  letter-spacing: -0.03em;
  color: var(--charcoal);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hd-line {
  display: block;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.7s cubic-bezier(0.23, 1, 0.32, 1),
              transform 0.7s cubic-bezier(0.23, 1, 0.32, 1);
}
.hd-line:nth-child(1) { transition-delay: 80ms; }
.hd-line:nth-child(2) { transition-delay: 160ms; }
.hd-line.revealed { opacity: 1; transform: translateY(0); }

.hero-bracket {
  margin-top: 1.53vw; /* 22px at 1440 */
  font-size: 0.97vw;  /* 14px at 1440 */
  font-weight: 400;
  letter-spacing: 0.12em;
  color: rgba(33,33,33,0.4);
  font-family: var(--font-body);
}

/* ── All scraps base ── */
.scrap {
  position: absolute;
  opacity: 0;
  transition: opacity 0.55s cubic-bezier(0.23, 1, 0.32, 1),
              transform 0.55s cubic-bezier(0.23, 1, 0.32, 1);
}
.scrap.revealed { opacity: 1; }
.scrap > img { width: 100%; display: block; }

/* ── Polaroid frame ── */
.polaroid-wrap {
  position: relative;
  line-height: 0;
}
.polaroid-photo {
  position: absolute;
  top: 9%;
  left: 8%;
  width: 84%;
  height: 71%;
  object-fit: cover;
  z-index: 1;
}
.polaroid-frame {
  position: relative;
  z-index: 2;
  width: 100%;
  display: block;
  filter: drop-shadow(0 6px 18px rgba(0,0,0,0.14));
}

/* ─── Z-index map (matches Figma layer order, bottom→top) ───────────
   1  halftone-rose (bg decor)
   2  stamp
   3  right-lower polaroid
   4  casset
   5  left-upper polaroid
   6  left-lower polaroid
   7  halftone flower
   8  lily
   9  hero-center text  (set on .hero-center below)
  10  camera
  11  organza flower
  12  right-upper polaroid
  13  tulips
─────────────────────────────────────────────────────────────────── */

/* All positions use vw for both x and y so layout scales
   proportionally from the 1440px Figma canvas at any viewport size.
   Formula: left_vw = figma_px / 1440 * 100  (same for top) */

/* ── HALFTONE ROSE — Figma 8-11: left=934 top=695 w=254 ── */
.sp-halftone-rose {
  width: 15.52vw;   /* 254/1440 */
  left: 64.86vw;    /* 934/1440 */
  top: 41.32vw;     /* 595/1440 */
  opacity: 0;
  z-index: 1;
  transform: translateY(1vw);
  transition-delay: 140ms;
}
.sp-halftone-rose > img { width: 100%; display: block; opacity: 0.2; }
.sp-halftone-rose.revealed { opacity: 1; transform: translateY(0); }

/* ── STAMP — Figma 8-11: left=1066 top=413 w=161 ── */
.sp-stamp {
  width: 8.4vw;     /* Figma bbox 161px × 0.75 scale */
  left: 78.5vw;     /* overlaps right-b's left edge, at roller pole tip */
  top: 24.5vw;
  z-index: 4;       /* above right-b, below painting guy */
  transform: translateY(1vw);
  transition-delay: 80ms;
}
.sp-stamp > img { width: 100%; display: block; }
.sp-stamp.revealed { transform: translateY(0); }

/* ── RIGHT POLAROID B (lower right) — Figma 8-11: left=1086 top=437 w=290 ── */
.sp-right-b {
  width: 15.06vw;   /* 290/1440 */
  left: 79.42vw;    /* 50px from right */
  top: 23.41vw;     /* 337/1440 */
  z-index: 3;
  transform: rotate(13.81deg) translateY(1.25vw);
  transition-delay: 100ms;
}
.sp-right-b.revealed { transform: rotate(13.81deg) translateY(0); }

/* ── CASSET — Figma 8-11: left=14 top=631 w=306 ── */
.sp-casset {
  width: 15.88vw;   /* 306/1440 */
    left: 2.50vw;     /* 14/1440 */
  top: 33.40vw;     /* moved up */
  z-index: 4;
  transform: rotate(-15deg) translateY(1vw);
  transition-delay: 110ms;
}
.sp-casset > img { width: 100%; display: block; }
.sp-casset.revealed { transform: rotate(-15deg) translateY(0); }

/* ── LEFT POLAROID A (upper) — Figma 8-11: left=38 top=307 w=298 ── */
.sp-left-a {
  width: 15.48vw;   /* 298/1440 */
  left: 2.64vw;     /* 38/1440 */
  top: 14.38vw;     /* 207/1440 */
  z-index: 5;
    transform: rotate(-15deg) translateY(1vw);
  transition-delay: 50ms;
}
.sp-left-a.revealed { transform: rotate(8.1deg) translateY(0); }

/* ── LEFT POLAROID B (lower) — Figma 8-11: left=174 top=620 w=275 ── */
.sp-left-b {
  width: 14.27vw;   /* 275/1440 */
  left: 12.08vw;    /* 174/1440 */
  top: 32.64vw;     /* moved up */
  z-index: 6;
  transform: rotate(12deg) translateY(1.25vw);
  transition-delay: 120ms;
}
.sp-left-b.revealed { transform: rotate(12deg) translateY(0); }

/* ── HALFTONE FLOWER — Figma 8-11: left=228 top=252 w=289 ── */
.sp-halftone {
  width: 20.28vw;   /* 289/1440 */
  left: 9.50vw;     /* moved right */
  top: 10.56vw;     /* 152/1440 */
  z-index: 7;
  transform: translateY(0.83vw);
  transition-delay: 30ms;
}
.sp-halftone > img { width: 100%; display: block; opacity: 0.55; }
.sp-halftone.revealed { opacity: 1; transform: translateY(0); }

/* ── LILY — Figma 8-11: left=1099 top=252 w=294 ── */
.sp-lily {
  width: 15.28vw;   /* 294/1440 */
  left: 79.17vw;    /* 50px from right */
  top: 10.56vw;     /* 152/1440 */
  z-index: 8;
  transform: translateY(0.83vw);
  transition-delay: 60ms;
}
.sp-lily > img { width: 100%; display: block; }
.sp-lily.revealed { transform: translateY(0); }

/* ── CAMERA — Figma 8-11: bbox left=61 top=149 w=360 ── */
.sp-camera {
  width: 18.67vw;   /* 360/1440 */
  left: 4.24vw;     /* 61/1440 */
  top: 7.50vw;      /* moved up slightly */
  z-index: 10;
  transform: rotate(-7.74deg) translateY(1.25vw);
  transition-delay: 0ms;
}
.sp-camera.revealed { transform: rotate(-7.74deg) translateY(0); }
.sp-camera > img { width: 100%; display: block; }

/* ── ORGANZA FLOWER — Figma 8-11: left=215 top=545 w=157 ── */
.sp-flower {
  width: 8.16vw;    /* 157/1440 */
  left: 12.85vw;    /* moved left */
  top: 29.41vw;     /* moved up */
  z-index: 11;
  transform: translateY(0.69vw);
  transition-delay: 90ms;
}
.sp-flower > img { width: 100%; display: block; }
.sp-flower.revealed { transform: translateY(0); }

/* ── RIGHT POLAROID A (upper right) — Figma 8-11: left=942 top=124 w=248 ── */
.sp-right-a {
  width: 12.88vw;   /* 248/1440 */
  left: 72.00vw;    /* moved right */
  top: 8.61vw;      /* moved down */
  z-index: 12;
  transform: rotate(-5.67deg) translateY(1.25vw);
  transition-delay: 40ms;
}
.sp-right-a.revealed { transform: rotate(-5.67deg) translateY(0); }

/* ── TULIPS — Figma 8-11: bbox left=1021 top=602 size=451 ── */
.sp-rose {
  width: 16.65vw;   /* 292×347 asset scaled so rotated bbox ≈ Figma 451px × 0.75 */
  left: 80vw;
  top: 35vw;
  z-index: 13;
  transform: rotate(-25.11deg) translateY(1.1vw);
  transition-delay: 130ms;
}
.sp-rose > img { width: 100%; display: block; }
.sp-rose.revealed { transform: rotate(-25.11deg) translateY(0); }

/* ── PAINTING GUY — Figma 8-11: left=1020 top=501 w=156 h=326 ── */
.sp-painting-guy {
  width: 8.10vw;    /* 156/1440 */
  left: 75.52vw;    /* moved left */
  top: 27.85vw;     /* 401/1440 */
  z-index: 14;
  transform: translateY(1vw);
  transition-delay: 115ms;
}
.sp-painting-guy > img {
  width: 100%;
  display: block;
  filter: drop-shadow(-2px 4px 4px rgba(0,0,0,0.25));
}
.sp-painting-guy.revealed { transform: translateY(0); }

/* ── Services bar ── */
.hero-services {
  position: absolute;
  bottom: 2.08vw; /* 30px at 1440 */
  left: 0;
  right: 0;
  text-align: center;
  font-size: 0.82vw; /* 12px at 1440 */
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(33,33,33,0.32);
  font-family: var(--font-body);
  opacity: 0;
  transition: opacity 0.6s ease 280ms;
  z-index: 2;
}
.hero-services.revealed { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .scrap, .hd-line, .hero-services {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ─── Intro statement ─── */
.intro-statement {
  margin-top: -40px; /* gentle pull toward the hero; stays clear of the scraps (lowest ends ~57.4vw, hero ends 60vw) */
  position: relative;
  top: 0;
  padding: 72px 36px 40px;
  display: flex;
  justify-content: center;
}

.intro-statement-inner {
  width: 100%;
  max-width: 1110px; /* shares the projects content column */
}

.intro-lead {
  font-family: var(--font-body);
  font-size: clamp(26px, 3vw, 44px);
  font-weight: 300;
  line-height: 1.28;
  letter-spacing: -0.02em;
  color: var(--charcoal);
  max-width: 32ch;
  text-wrap: balance;
}

.intro-sub {
  font-family: var(--font-body);
  font-size: clamp(16px, 1.25vw, 19px);
  font-weight: 400;
  line-height: 1.6;
  color: rgba(33, 33, 33, 0.55);
  max-width: 66ch;
  margin-top: 32px;
  text-wrap: pretty;
}

/* ─── Projects ─── */
.projects-section {
  padding: 80px 36px 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.projects-heading-wrap {
  display: inline-block;
  position: relative;
  width: 100%;
  max-width: 1110px; /* matches 3×290 + 2×110 grid width */
  margin-bottom: 0;
  margin-left: 0;
}

.projects-heading {
  font-size: clamp(36px, 3.6vw, 52px);
  font-weight: 300;
  color: var(--charcoal);
  font-family: var(--font-body);
  line-height: 1;
  letter-spacing: -0.02em;
}

.underline-squiggle {
  position: absolute;
  bottom: -14px;
  left: 2px;
  width: 220px;
  max-width: 70%;
}

.underline-squiggle svg {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
}

.projects-grid {
  display: grid;
  grid-template-columns: repeat(3, 290px);
  gap: 110px;
  padding-top: 110px;
  width: 100%;
  max-width: 1110px;
}

/* ── Folder card — whole card bounces on hover ── */
.folder-card {
  width: 290px;
  cursor: pointer;
  transition: transform 0.5s cubic-bezier(0.34, 1.5, 0.64, 1);
}

.folder-card:hover {
  transform: rotate(-1.5deg) scale(1.03) translateY(-6px);
}

/* Folder body art per project — set in CSS (unquoted url) so no fragile
   inline style for host HTML-optimisers to corrupt. Paths are relative to
   this stylesheet (repo root), same as the assets folder. */
.fc--ftgu     { --folder-img: url(assets/ground-up-folder.png); }
.fc--orbit    { --folder-img: url(assets/orbit-folder.png); }
.fc--afterglo { --folder-img: url(assets/afterglo-folder.png); }

/* Square context for body + images */
.fc-wrap {
  position: relative;
  width: 290px;
  height: 290px;
}

/* ── Folder body — textured paper folder PNG (cropped to art, ratio 820:556) ── */
.folder-body {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 196.6px; /* 290 / (820/556) — keeps the folder art undistorted */
  background-image: var(--folder-img);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  filter: drop-shadow(0px 4px 2px rgba(0,0,0,0.25));
  z-index: 2;
  padding: 30px 20px 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.folder-year {
  font-family: var(--font-display);
  font-size: 13px;
  color: var(--ft, rgba(0,0,0,0.38));
  font-weight: 400;
  letter-spacing: 0.02em;
}

.folder-title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 400;
  color: var(--ft, var(--charcoal));
  line-height: 1.1;
  letter-spacing: 0.01em;
}

/* ── Images — stacked at top, visible above folder body at rest ── */
.folder-imgs {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.fimg {
  position: absolute;
  aspect-ratio: 4 / 3;
  left: 50%;
  top: 0;
  border-radius: 12px;
  overflow: hidden;
  background: #d8d8d8;
  box-shadow: 0 4px 18px rgba(0,0,0,0.16);
  transition: transform 0.6s cubic-bezier(0.34, 1.5, 0.64, 1),
              box-shadow 0.3s ease;
}

.fimg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Different widths per card for organic feel */
.fimg--l { width: 62%; transform: translateX(-50%) rotate(-5deg); z-index: 1; }
.fimg--c { width: 74%; transform: translateX(-50%) rotate(0deg);  z-index: 3; }
.fimg--r { width: 58%; transform: translateX(-50%) rotate(5deg);  z-index: 2; }

/* Hover — spring fan out upward */
.folder-card:hover .fimg {
  box-shadow: 0 12px 32px rgba(0,0,0,0.22);
}
.folder-card:hover .fimg--l {
  transform: translateX(-115%) translateY(-45%) rotate(-20deg);
  transition-delay: 0.04s;
}
.folder-card:hover .fimg--c {
  transform: translateX(-50%) translateY(-52%) rotate(-2deg);
  transition-delay: 0s;
}
.folder-card:hover .fimg--r {
  transform: translateX(10%) translateY(-42%) rotate(20deg);
  transition-delay: 0.07s;
}

/* ─── About Section ─── */
.about-section {
  position: relative;
  padding: 100px 0 60px; /* top padding is the zone where tapes float above the track */
  overflow: hidden;
}

/* Track */
.about-track-wrap { position: relative; }

.about-track {
  display: flex;
  overflow-x: auto;
  overflow-y: visible;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  cursor: grab;
  height: 636px;
}

.about-track:active { cursor: grabbing; }
.about-track::-webkit-scrollbar { display: none; }

/* Base panel */
.ap {
  flex: 0 0 auto;
  scroll-snap-align: start;
  height: 100%;
  position: relative;
  overflow: hidden;
}

/* ── Panel 1: Intro ── */
.ap--intro {
  width: 494px;
  background: var(--cream);
  position: relative;
}

.about-heading {
  position: absolute;
  left: 140px;
  top: 188px;
  font-family: var(--font-display);
  font-size: 40px;
  font-weight: 400;
  color: #212121;
  line-height: 1.1;
  white-space: nowrap;
}

.ap-underline {
  position: absolute;
  left: 127px;
  top: 234px;
  width: 268px;
  height: 19px;
  object-fit: fill;
  display: block;
}

.ap-arrow {
  position: absolute;
  left: 198px;
  top: 285px;
  width: 174px;
  height: 66px;
  object-fit: fill;
  display: block;
  transform: rotate(4.13deg);
}

.ap-scroll-text {
  position: absolute;
  left: 289px;
  top: 302px;
  font-family: var(--font-hand);
  font-size: 20px;
  color: #000;
  white-space: nowrap;
}

/* ── Photo panels ── */
.ap--photo {
  position: relative;
}

.panel-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.panel-photo--overlay {
  z-index: 1;
}

/* ── Text panels (paper texture) ── */
.ap--text {
  position: relative;
}

.ap-texture-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.ap-texture-white {
  position: absolute;
  inset: 0;
  background: #fffbfc;
}

.ap-texture-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.4;
}

.ap-text-inner {
  position: absolute;
  left: 115px;
  top: 196px;
  width: 582px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.ap-text-inner h3 {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 500;
  color: #000;
  line-height: 1.2;
}

.ap-text-inner p {
  font-size: 24px;
  font-weight: 300;
  line-height: 1.55;
  color: #000;
}

/* ── Decorative stickers ── */
.ap-sticker {
  position: absolute;
  z-index: 3;
  pointer-events: none;
}

.ap-sticker--audio {
  width: 74px;
  height: 55px;
  object-fit: contain;
  left: 51px;
  top: 473px;
}

.ap-sticker--more {
  width: 65px;
  height: 124px;
  object-fit: contain;
  left: 692px;
  top: 487px;
}

/* icon1: Figma 37×60px at left=460, top=164 */
.ap-sticker--icon1 {
  width: 37px;
  height: 60px;
  object-fit: contain;
  left: 460px;
  top: 164px;
  transform: rotate(-9.47deg);
}

/* icon2: bottom-left sprig — rotated ~90° further and scaled up a touch */
.ap-sticker--icon2 {
  width: 47px;
  height: 71px;
  object-fit: contain;
  left: 72px;
  top: 468px;
  transform: rotate(258.62deg) scaleY(-1);
}

/* Social icons: individually positioned per Figma */
.ap-social-cluster {
  position: absolute;
  z-index: 3;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.ap-social {
  position: absolute;
  width: 36px;
  height: 34px;
  object-fit: contain;
  pointer-events: none;
}

/* SocialIcon: Figma left=4753, panel7=4038 → 715px. top=570px. rotate 21.33deg */
.ap-social--0 {
  left: 715px;
  top: 570px;
  transform: rotate(21.33deg);
}

/* SocialIcon1: Figma left=4739, panel7=4038 → 701px. top=543px. rotate -3.59deg */
.ap-social--1 {
  left: 701px;
  top: 543px;
  transform: rotate(-3.59deg);
}

/* SocialIcon2: Figma left=4719, panel7=4038 → 681px. top=571px. rotate -70.96deg */
.ap-social--2 {
  left: 681px;
  top: 571px;
  transform: rotate(-70.96deg);
}

/* Star/asterisk vectors — now in panel 3 (What I value) */
.ap-deco {
  position: absolute;
  z-index: 3;
  pointer-events: none;
  display: block;
}

/* Vector23: Figma bounding box 60×43px at left=649, top=225 */
.ap-deco--v23 {
  width: 60px;
  height: 43px;
  left: 649px;
  top: 195px;
  object-fit: contain;
}

.ap-deco--v27 {
  width: 39px;
  height: 28px;
  left: 604px;
  top: 167px;
  object-fit: contain;
}

/* ── Decoration layer — sibling to track-wrap, positions relative to about-section ── */
.about-deco-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 10;
}

/* Each tape piece uses CSS vars --tx (track position) and --ty (vertical offset above track) */
.deco-tape {
  position: absolute;
  /* JS will set --scroll and update left dynamically */
  left: calc(var(--tx) - var(--scroll, 0px));
  top: calc(var(--ty));
  display: block;
  object-fit: contain;
}

/* Progress bar */
.scroll-progress-wrap {
  position: relative;
  height: 3px;
  margin: 24px 36px 0;
  border-radius: 14px;
  overflow: visible;
}

.scroll-progress-full {
  position: absolute;
  inset: 0;
  background: #e6e6e6;
  border-radius: 14px;
}

.scroll-progress-bar {
  position: absolute;
  left: 0;
  top: 0;
  height: 3px;
  width: 20%;
  background: var(--charcoal);
  border-radius: 14px;
  transition: width 0.1s linear;
}

/* ─── Footer ─── */
.footer {
  padding: 80px 36px 60px;
  border-top: 1px solid #e0e0e0;
}

.footer-tagline {
  font-size: clamp(22px, 2.4vw, 38px);
  font-weight: 300;
  line-height: 1.35;
  color: rgba(33,33,33,0.55);
  max-width: 860px;
  margin-bottom: 36px;
  letter-spacing: -0.01em;
}

.footer-email {
  display: inline-block;
  font-family: var(--font-display);
  font-size: clamp(22px, 2.5vw, 36px);
  color: var(--charcoal);
  text-decoration: none;
  margin-bottom: 80px;
  letter-spacing: 0.01em;
  border-bottom: 1.5px solid rgba(33,33,33,0.25);
  padding-bottom: 3px;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.footer-email:hover {
  border-color: var(--charcoal);
  text-decoration: none;
}

.footer-links {
  display: flex;
  gap: 120px;
  margin-bottom: 80px;
}

.footer-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer-col-heading {
  font-size: 11px;
  font-weight: 600;
  color: rgba(33,33,33,0.4);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 12px;
}

.footer-link {
  font-size: 15px;
  font-weight: 400;
  color: rgba(33,33,33,0.7);
  text-decoration: none;
  transition: color 0.2s ease;
}

.footer-link:hover { color: var(--charcoal); }

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid rgba(0,0,0,0.07);
  padding-top: 24px;
}

.footer-copy {
  font-size: 13px;
  font-weight: 400;
  color: rgba(33,33,33,0.4);
}

.footer-copy strong {
  font-weight: 500;
}

.back-to-top {
  font-size: 13px;
  font-weight: 400;
  color: rgba(33,33,33,0.5);
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-body);
  text-decoration: none;
  border-bottom: 1px solid rgba(33,33,33,0.25);
  padding-bottom: 1px;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.back-to-top:hover {
  color: var(--charcoal);
  border-color: var(--charcoal);
}

/* ─── Intro overlay ─── */
.intro-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: var(--cream);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.7s ease;
}

.intro-overlay.is-open {
  opacity: 0;
}

.intro-overlay.is-done {
  display: none;
}

.intro-monogram {
  font-family: var(--font-display);
  font-size: clamp(80px, 14vw, 160px);
  font-weight: 400;
  color: var(--charcoal);
  letter-spacing: -0.02em;
  line-height: 1;
  position: relative;
  /* padding-right ensures clip fully clears the last letter */
  padding-right: 0.15em;
  clip-path: inset(0 100% 0 0);
  animation: sa-draw 1.2s cubic-bezier(0.77, 0, 0.18, 1) 0.3s forwards;
}

@keyframes sa-draw {
  0%   { clip-path: inset(0 100% 0 0); }
  100% { clip-path: inset(0 -0.2em 0 0); }
}

/* ═══════════════════════════════════════════════════════════════════
   MOBILE — ≤600px
   The desktop collage is a fixed 1440-canvas composition; at phone
   widths it becomes unreadable. Here the hero is re-composed: large
   type, a curated set of scraps anchored to the viewport edges, and
   every section reflows to a single column with touch-first sizing.
═══════════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {

  /* ── Navbar ── */
  .navbar { padding: 16px 20px; }
  .nav-brand { display: none; } /* name is already the hero — avoid duplication */
  .nav-home, .nav-contact { font-size: 14px; }

  /* ── Hero: re-composed, not just shrunk ── */
  .hero-scrapbook {
    height: auto;
    min-height: 90svh;
    padding: 0;
  }

  .hero-center { margin-top: 0; padding: 0 6vw; }
  .hero-display { font-size: 13vw; line-height: 0.95; }
  /* smaller + tighter tracking so the tagline sits inset, not edge-to-edge */
  .hero-bracket { font-size: 2.6vw; margin-top: 4vw; letter-spacing: 0.04em; }

  .hero-services {
    font-size: 2.7vw;
    bottom: 4.5vw;
    padding: 0 6vw;
    letter-spacing: 0.14em;
    line-height: 1.8;
  }

  /* Curated scraps only — hide the dense mid-layer pieces */
  .sp-halftone-rose,
  .sp-halftone,
  .sp-stamp,
  .sp-left-a,
  .sp-right-b,
  .sp-painting-guy { display: none; }

  /* Camera — top left, tucked under the navbar */
  .sp-camera {
    width: 38vw;
    left: -2vw;
    top: 15vw;
  }

  /* Billboard polaroid — top right (pulled in so it isn't clipped) */
  .sp-right-a {
    width: 30vw;
    left: 68vw;
    top: 13vw;
  }

  /* Lily — right edge, mid */
  .sp-lily {
    width: 24vw;
    left: 82vw;
    top: 40vw;
  }

  /* Pavilion polaroid — bottom left */
  .sp-left-b {
    width: 32vw;
    left: -6vw;
    top: auto;
    bottom: 22vw;
  }

  /* Cassette — bottom left corner, under the polaroid */
  .sp-casset {
    width: 28vw;
    left: -9vw;
    top: auto;
    bottom: 13vw;
  }

  /* Organza flower — small accent between name and bottom row */
  .sp-flower {
    width: 13vw;
    left: 44vw;
    top: auto;
    bottom: 26vw;
  }

  /* Tulips — bottom right corner */
  .sp-rose {
    width: 30vw;
    left: auto;
    right: -8vw;
    top: auto;
    bottom: 13vw;
  }

  /* ── Projects: single column, centered ── */
  .intro-statement { padding: 72px 20px 24px; }
  .intro-sub { margin-top: 24px; }
  .projects-section { padding: 64px 20px 80px; }
  .projects-grid {
    grid-template-columns: auto;
    justify-content: center;
    gap: 56px;
    padding-top: 64px;
  }
  /* zoom scales the px-based folder clip-path cleanly */
  .folder-card { zoom: 0.78; }
  .projects-heading { font-size: 34px; }
  .projects-heading-wrap { text-align: center; }
  .underline-squiggle { max-width: 320px; left: 50%; transform: translateX(-50%); }

  /* Touch devices have no hover — keep cards resting state attractive */

  /* ── About: swipeable panels sized to the viewport ── */
  .about-section { padding: 56px 0 40px; }
  .about-track { height: 480px; }

  .ap--intro { width: 86vw !important; }
  .about-heading { left: 28px; top: 150px; font-size: 32px; }
  .ap-underline { left: 24px; top: 192px; width: 200px; }
  .ap-arrow { left: 34px; top: 232px; width: 110px; height: 44px; }
  .ap-scroll-text { left: 150px; top: 254px; font-size: 20px; }

  .ap--photo, .ap--text { width: 86vw !important; }

  /* Text panels: content centered in the panel, relative to keep z-index */
  .ap--text { display: flex; align-items: center; }
  .ap-text-inner {
    position: relative;
    left: auto;
    top: auto;
    width: auto;
    padding: 32px 26px;
    gap: 14px;
  }
  .ap-text-inner h3 { font-size: 22px; }
  .ap-text-inner p { font-size: 16px; line-height: 1.6; }

  /* Tape strips: --tx values are desktop track px (~5400px total);
     mobile track is ~54% as long, so rescale each (inline styles need !important) */
  /* Panels are 86vw wide, so tape positions must be vw too —
     px values drift left on wider phones. panelStart = n×86vw. */
  .deco-tape:nth-of-type(1) { --tx: 283.8vw !important; width: 32vw !important; } /* photo before How I Work, 30% in */
  .deco-tape:nth-of-type(2) { --tx: 503.1vw !important; width: 32.5vw !important; } /* photo/Outside-of-design seam */
  .deco-tape:nth-of-type(3) { --tx: 608vw !important; width: 16vw !important; } /* second-to-last photo, left corner */

  /* Stickers & doodles: re-anchored to panel corners for narrow panels */
  .ap-sticker--audio { left: 18px; top: auto; bottom: 22px; }
  .ap-sticker--more { left: auto; right: 14px; top: auto; bottom: 18px; }
  .ap-sticker--icon1 { left: auto; right: 26px; top: 30px; }
  .ap-sticker--icon2 { left: 20px; top: auto; bottom: 26px; }
  .ap-deco--v23 { left: auto; right: 26px; top: 30px; }
  .ap-deco--v27 { left: auto; right: 76px; top: 20px; }
  .ap-social--0 { left: auto; right: 20px; top: auto; bottom: 26px; }
  .ap-social--1 { left: auto; right: 48px; top: auto; bottom: 44px; }
  .ap-social--2 { left: auto; right: 70px; top: auto; bottom: 20px; }

  .scroll-progress-wrap { margin: 20px 20px 0; }

  /* ── Footer ── */
  .footer { padding: 56px 20px 40px; }
  .footer-tagline { font-size: 22px; margin-bottom: 28px; }
  .footer-email { font-size: 19px; margin-bottom: 56px; word-break: break-all; }
  .footer-links { gap: 64px; margin-bottom: 56px; }
  .footer-link { font-size: 16px; padding: 2px 0; } /* larger touch targets */
  .footer-bottom { flex-wrap: wrap; gap: 12px; }
}

/* Tablet — the 1440-canvas collage scales proportionally, so it stays;
   only the fixed-px pieces (nav, grid, about panels) need tempering */
@media (min-width: 601px) and (max-width: 1024px) {
  .navbar { padding: 18px 28px; }
  .projects-grid {
    grid-template-columns: repeat(2, 290px);
    gap: 64px;
    justify-content: center;
  }
  .ap--photo, .ap--text, .ap--intro { width: 70vw !important; }
  .ap--text { display: flex; align-items: center; }
  .ap-text-inner {
    position: relative;
    left: auto;
    top: auto;
    width: auto;
    padding: 40px;
    gap: 16px;
  }
  .ap-text-inner h3 { font-size: 26px; }
  .ap-text-inner p { font-size: 18px; line-height: 1.6; }
  .deco-tape:nth-of-type(1) { --tx: 1500px !important; }
  .deco-tape:nth-of-type(2) { --tx: 3030px !important; }
  .deco-tape:nth-of-type(3) { --tx: 3755px !important; }
  .ap-sticker--more { left: auto; right: 20px; }
  .ap-sticker--icon1 { left: auto; right: 32px; }
  .ap-deco--v23 { left: auto; right: 32px; }
  .ap-deco--v27 { left: auto; right: 86px; }
  .ap-social--0 { left: auto; right: 24px; top: auto; bottom: 30px; }
  .ap-social--1 { left: auto; right: 54px; top: auto; bottom: 50px; }
  .ap-social--2 { left: auto; right: 78px; top: auto; bottom: 24px; }
  .about-track { height: 540px; }
}

/* Narrow-desktop zone: three 290px folders + 110px gaps (≈1090px) overflow the
   viewport below ~1160px, cutting off the third folder. Drop to two columns here
   — same treatment as the tablet range — so nothing is clipped. */
@media (min-width: 1025px) and (max-width: 1161px) {
  .projects-grid {
    grid-template-columns: repeat(2, 290px);
    gap: 80px;
    justify-content: center;
  }
}

/* Folder cards used as links */
a.folder-card { text-decoration: none; color: inherit; display: block; }