/* ============================================================
   MATTHEW MANTYLA — PORTFOLIO
   Clean editorial × friendly handmade.
   Polaroids on a string, washi tape buttons, marker underlines.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400;500;600;700&family=DM+Serif+Display:ital@0;1&family=Inter:wght@300;400;500;600&display=swap');

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* ---- Color: paper ---- */
  --paper:        #f9f7f4;
  --paper-2:      #f1ede5;
  --paper-3:      #e8e2d5;
  --surface:      #ffffff;

  /* ---- Color: ink ---- */
  --ink:          #111111;
  --ink-2:        #555555;
  --ink-3:        #999999;
  --ink-4:        #c9c4bb;

  --rule:         #e5e2dd;
  --rule-strong:  #d8d3c8;

  /* ---- Color: accent (marker orange) ---- */
  --accent:       #e8762d;
  --accent-hover: #c8601f;
  --accent-soft:  #f8dcc4;
  --accent-ink:   #5a2a10;

  /* ---- Washi tape palette ---- */
  --tape-paper:       #efeadc;
  --tape-cream:       #e8dcbf;
  --tape-kraft:       #d9c3a3;
  --tape-dark-kraft:  #a98a63;
  --tape-ink-soft:    #bdb6a8;

  /* ---- Type ---- */
  --font-display: 'DM Serif Display', Georgia, serif;
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;
  --font-hand:    'Caveat', 'Patrick Hand', cursive;

  /* ---- Sizes ---- */
  --fs-display-xl: clamp(3rem, 6vw, 4.5rem);
  --fs-display-l:  clamp(2.25rem, 4vw, 3rem);
  --fs-display-m:  clamp(1.75rem, 3vw, 2.25rem);

  --fs-body-l:     1.0625rem;
  --fs-body:       1rem;
  --fs-body-s:     0.875rem;
  --fs-eyebrow:    0.72rem;
  --fs-meta:       0.78rem;

  --fs-hand-xl:    2.25rem;
  --fs-hand-l:     1.5rem;
  --fs-hand-m:     1.15rem;

  --lh-tight: 1.05;
  --lh-snug:  1.2;
  --lh-base:  1.6;
  --lh-loose: 1.75;
  --tracking-eyebrow: 0.12em;
  --tracking-meta:    0.06em;

  /* ---- Spacing (8pt) ---- */
  --space-2xs: 0.25rem;
  --space-xs:  0.5rem;
  --space-sm:  0.75rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  --space-4xl: 6rem;

  /* ---- Radii ---- */
  --radius-0:    0;
  --radius-1:    2px;
  --radius-pill: 999px;

  /* ---- Shadows ---- */
  --shadow-polaroid:
    0 0 0 1px rgba(0, 0, 0, 0.04),
    0 2px 4px rgba(0, 0, 0, 0.08),
    0 12px 24px rgba(0, 0, 0, 0.12),
    0 24px 48px rgba(0, 0, 0, 0.06);
  --shadow-polaroid-hover:
    0 4px 8px rgba(0, 0, 0, 0.10),
    0 18px 36px rgba(0, 0, 0, 0.14),
    0 28px 56px rgba(0, 0, 0, 0.06);
  --shadow-tape:
    0 1px 1px rgba(0, 0, 0, 0.10),
    0 4px 8px rgba(0, 0, 0, 0.06);
  --shadow-card:
    0 1px 2px rgba(0, 0, 0, 0.04),
    0 4px 12px rgba(0, 0, 0, 0.06);

  /* ---- Motion ---- */
  --dur-quick: 120ms;
  --dur-base:  200ms;
  --dur-slow:  400ms;
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);

  /* ---- Layout ---- */
  --max-w:     1200px;
  --content-w: 1040px;
  --nav-h:     64px;

  /* ---- Polaroid + tape component tokens ---- */
  --polaroid-bg: #ffffff;
  --polaroid-pad: 14px;
  --polaroid-pad-btm: 36px;
  --polaroid-photo-bg: #eee;
  --polaroid-photo-filter: grayscale(0.10) contrast(0.97);

  --tape-rot-default: -2deg;
}

html { font-size: 16px; -webkit-font-smoothing: antialiased; scroll-behavior: smooth; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-base);
  min-height: 100dvh;
}

img { display: block; max-width: 100%; }
a   { color: inherit; text-decoration: none; }

/* ============================================================
   MARKER UNDERLINE — hand-drawn sharpie stroke under text
   ============================================================ */
.marker-underline {
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 16' preserveAspectRatio='none'%3E%3Cpath d='M 8 10 Q 200 4, 392 9' stroke='%23e8762d' stroke-width='6' stroke-linecap='round' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left 100%;
  background-size: 100% 0.4em;
  padding-bottom: 0.15em;
}
.marker-underline--thick {
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 18' preserveAspectRatio='none'%3E%3Cpath d='M 8 11 Q 200 4, 392 10' stroke='%23e8762d' stroke-width='8' stroke-linecap='round' fill='none'/%3E%3C/svg%3E");
  background-size: 100% 0.5em;
  padding-bottom: 0.2em;
}

/* ============================================================
   NAV — handwritten brand mark + tape menu items
   ============================================================ */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  height: var(--nav-h);
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
}
.nav__inner {
  width: 100%;
  max-width: var(--max-w);
  height: 100%;
  margin: 0 auto;
  padding: 0 var(--space-xl);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.nav__name {
  font-family: var(--font-hand);
  font-size: 2.25rem; /* bumped 50% from 1.5rem */
  font-weight: 700;
  line-height: 1;
  color: var(--ink);
  white-space: nowrap;
  transform: rotate(-2deg);
  transform-origin: left center;
  cursor: pointer;
}
.nav__links {
  list-style: none;
  display: flex;
  gap: 18px;
  align-items: center;
}
.nav__links .tape {
  padding: 7px 18px;
  font-size: 1.05rem;
  font-weight: 700;
}
.nav__links li:nth-child(odd)  .tape { --tape-rot-default: -2deg; }
.nav__links li:nth-child(even) .tape { --tape-rot-default:  2deg; }

/* ============================================================
   TAPE — washi tape used as buttons + section labels
   Flat top + bottom, torn left + right ends.
   ============================================================ */
.tape {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 48px;
  font-family: var(--font-hand);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--ink);
  background-color: var(--tape-cream);
  background-image:
    linear-gradient(112deg, transparent 0%, transparent 35%, rgba(255,255,255,0.20) 38%, transparent 42%),
    linear-gradient(96deg, transparent 0%, transparent 62%, rgba(0,0,0,0.05) 64%, transparent 67%);
  border: 0;
  cursor: pointer;
  transform: rotate(var(--tape-rot-default));
  transition: transform var(--dur-base) var(--ease-out), filter var(--dur-base) var(--ease-out);
  box-shadow: var(--shadow-tape);
  line-height: 1;
  letter-spacing: 0.005em;
  text-decoration: none;
  user-select: none;
  white-space: nowrap;
  clip-path: polygon(
    2% 0%, 98% 0%,
    100% 14%, 97% 28%, 100% 42%, 97% 56%, 100% 70%, 97% 84%, 100% 100%,
    2% 100%,
    0% 86%, 3% 72%, 0% 58%, 3% 44%, 0% 30%, 3% 16%
  );
}
.tape:hover  { transform: rotate(0deg) translateY(-2px); filter: brightness(1.04); }
.tape:active { transform: rotate(var(--tape-rot-default)) translateY(0) scale(0.98); filter: brightness(0.96); }

.tape--paper      { background-color: var(--tape-paper); }
.tape--cream      { background-color: var(--tape-cream); }
.tape--kraft      { background-color: var(--tape-kraft); }
.tape--dark-kraft { background-color: var(--tape-dark-kraft); color: #fff8e8; }
.tape--ink-soft   { background-color: var(--tape-ink-soft); }
.tape--orange     { background-color: var(--accent); color: var(--accent-ink); }

.tape--rot-r { --tape-rot-default:  2deg; }
.tape--flat  { --tape-rot-default:  0deg; }
.tape--lg    { font-size: 1.6rem;  padding: 18px 44px; }
.tape--sm    { font-size: 1.05rem; padding: 9px 22px; }

/* ============================================================
   POLAROID
   ============================================================ */
.polaroid {
  background: var(--polaroid-bg);
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 0.06 0 0 0 0 0.05 0 0 0 0 0.04 0 0 0 0.08 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
  padding: var(--polaroid-pad) var(--polaroid-pad) var(--polaroid-pad-btm);
  box-shadow: var(--shadow-polaroid);
  position: relative;
  display: inline-block;
  transition: transform var(--dur-slow) var(--ease-out), box-shadow var(--dur-slow) var(--ease-out), opacity var(--dur-slow) var(--ease-out);
}

.polaroid__photo {
  width: 100%;
  /* Uniform square crop. The hero overrides with 4/5. Timeline polaroids crop
     each photo to this square via object-fit:cover; the per-photo
     object-position (set inline) keeps Matt's face in frame. */
  aspect-ratio: 1;
  background: var(--polaroid-photo-bg);
  overflow: hidden;
  margin-bottom: 10px;
}
.polaroid__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: var(--polaroid-photo-filter);
}

.polaroid__year {
  font-family: var(--font-hand);
  font-size: var(--fs-hand-l);
  font-weight: 600;
  line-height: 1;
  color: var(--ink);
  margin-bottom: 2px;
}
.polaroid__caption {
  font-family: var(--font-hand);
  font-size: var(--fs-hand-m);
  font-weight: 500;
  line-height: 1.2;
  color: var(--ink-2);
}

/* Orange tape strip taping any polaroid to the wall.
   Same recipe as .project-card__tape — torn edges, slight tilt, orange.
   Used on the hero polaroid + timeline polaroids. */
.polaroid__tape {
  position: absolute;
  top: -11px;
  left: 50%;
  width: 64px;
  height: 22px;
  background-color: var(--tape-cream);
  background-image:
    linear-gradient(112deg, transparent 0%, transparent 35%, rgba(255,255,255,0.20) 38%, transparent 42%),
    linear-gradient(96deg, transparent 0%, transparent 62%, rgba(0,0,0,0.06) 64%, transparent 67%);
  clip-path: polygon(
    2% 0%, 98% 0%,
    100% 18%, 96% 36%, 99% 54%, 95% 72%, 100% 90%, 100% 100%,
    2% 100%,
    0% 84%, 4% 66%, 0% 50%, 4% 32%, 0% 18%
  );
  box-shadow: var(--shadow-tape);
  z-index: 3;
  pointer-events: none;
  transform: translateX(-50%) rotate(-4deg);
}
.polaroid__tape--lg {
  width: 84px;
  height: 28px;
  top: -13px;
}

/* All polaroids pivot from the tape point at the top center, so hover swings
   the polaroid beneath the (stationary) tape instead of spinning on its center. */
.polaroid {
  transform-origin: 50% -4px;
}

/* Hover swing — but never on a lifted polaroid (its transform is JS-controlled
   and we don't want the hover to snap it back to the wall). */
.polaroid:not(.polaroid--lifted):hover {
  transform: rotate(0deg) !important;
  box-shadow: var(--shadow-polaroid-hover);
  z-index: 5;
}

/* Legacy chip-clip styles — kept available but no longer used on the home page */
.polaroid__clip {
  position: absolute;
  top: -46px;
  left: 50%;
  transform: translateX(-50%) rotate(-3deg);
  width: 54px;
  height: 49px;
  background-image: url("../assets/chip-clip.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.22));
  pointer-events: none;
  z-index: 3;
}

/* ============================================================
   PAGE LAYOUT — stage + wings
   ============================================================ */
.page {
  padding-top: var(--nav-h);
  min-height: 100dvh;
  position: relative;
}
.stage {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--content-w);
  margin: 0 auto;
  padding: var(--space-3xl) var(--space-xl);
}

/* Wings — empty placeholders for future falling assets */
.wing {
  position: fixed;
  top: var(--nav-h);
  bottom: 0;
  width: calc((100vw - var(--content-w)) / 2);
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
  display: none;
}
.wing--left  { left: 0; }
.wing--right { right: 0; }
@media (min-width: 1200px) {
  .wing { display: block; }
}

/* ============================================================
   HERO — polaroid headshot on left, bio on right
   ============================================================ */
.hero {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: var(--space-2xl);
  align-items: center;
  padding: var(--space-2xl) 0;
}
.hero__polaroid {
  width: 300px;
  padding: 14px 14px 24px;
  transform: rotate(-2deg);
}
.hero__polaroid .polaroid__photo {
  aspect-ratio: 4 / 5;
  margin-bottom: 12px;
}
.hero__polaroid .polaroid__photo img {
  object-position: center top;
  filter: none;
}
.hero__name {
  font-family: var(--font-hand);
  font-size: 2.1rem;
  font-weight: 700;
  line-height: 0.95;
  color: var(--ink);
  text-align: center;
  margin-bottom: 2px;
}
.hero__title {
  font-family: var(--font-hand);
  font-size: 1.1rem;
  font-weight: 500;
  line-height: 1.1;
  color: var(--ink-2);
  text-align: center;
}

.hero__bio { display: flex; flex-direction: column; gap: var(--space-md); }
.hero__eyebrow {
  font-family: var(--font-hand);
  font-size: clamp(2.5rem, 4vw, 3.25rem);
  font-weight: 700;
  line-height: 0.95;
  color: var(--ink);
  margin-bottom: var(--space-sm);
  display: inline-block;
}
.hero__bio p:not(.hero__eyebrow) {
  font-size: var(--fs-body);
  line-height: var(--lh-loose);
  color: var(--ink-2);
}
.hero__bio p + p { margin-top: 0.6em; }
.hero__cta { margin-top: var(--space-md); }

/* ============================================================
   CREDENTIALS — selected recognition
   ============================================================ */
.credits {
  margin-top: var(--space-3xl);
  padding-top: var(--space-md);
  border-top: 1px solid var(--rule);
}
.credits__label {
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  font-weight: 500;
  color: var(--ink-3);
  margin-bottom: var(--space-sm);
}
.credits__list { display: flex; flex-direction: column; gap: 6px; }
.credit {
  font-size: 0.88rem;
  color: var(--ink-2);
  display: flex; gap: 10px; align-items: baseline;
}
.credit::before {
  content: '—';
  color: var(--accent);
  flex-shrink: 0;
}

/* ============================================================
   TIMELINE — polaroids on a sagging string
   ============================================================ */
.timeline {
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  padding: var(--space-3xl) 0 var(--space-2xl);
  background: var(--paper);
  border-top: 1px solid var(--rule);
  /* No bottom border — the footer's own border-top draws the line below */
  position: relative;
  z-index: 2;
}
.timeline__inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 var(--space-xl);
}
.timeline__heading {
  font-family: var(--font-hand);
  font-size: clamp(2.5rem, 4vw, 3.25rem);
  font-weight: 700;
  text-align: center;
  margin-bottom: var(--space-2xl);
  line-height: 0.95;
  color: var(--ink);
}
.timeline__strip-wrap { position: relative; }
.timeline__strip {
  display: flex;
  /* Every polaroid is the same size. align-items:stretch (the flex default)
     makes each card match the tallest one's height, so the longest caption
     sets the height for the whole row and the rest share it. The enlarged
     photo below keeps the uniform frame looking balanced. */
  align-items: stretch;
  gap: var(--space-xl);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  /* Top padding gives the tape strip room (tape sits at -11px).
     Bottom padding must clear the polaroid's largest shadow (≈72px below
     the card) so the shadow fades naturally instead of being chopped by
     the strip's implicit overflow-y. */
  padding: 32px var(--space-xl) 80px;
  scrollbar-width: none;
  position: relative;
  z-index: 2;
}
.timeline__strip::-webkit-scrollbar { display: none; }
.timeline__strip .polaroid {
  flex: 0 0 248px;
  scroll-snap-align: center;
  opacity: 1;
  cursor: pointer;
  /* Trim the bottom white border so the caption zone doesn't dominate. Photos
     stay square (the base ratio); align-items:stretch keeps every card one
     uniform height, so short captions show a little blank space by design. */
  padding-bottom: 22px;
}
.timeline__strip .polaroid__photo { margin-bottom: 8px; }
.timeline__strip .polaroid__caption { line-height: 1.15; }

/* When a polaroid is lifted, its original is hidden (visibility:hidden) and a
   clone gets appended to <body>. The clone's positioning + transforms are all
   set in JS so the animation can do proper FLIP from the wall to viewport
   center while keeping the original's flex slot blank. */
.polaroid--lifted {
  cursor: zoom-out;
  /* Make sure the clone is visible even though the original was hidden via inline style */
  visibility: visible !important;
}

/* Sharpie-marker navigation arrows — same family as .marker-underline.
   Positioned in the wing space outside the polaroid strip so they never
   sit on top of (or behind) any polaroid. z-index sits above the polaroid
   hover state (z:5) but well below the lifted clone (z:1000). */
.timeline__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 72px;
  height: 54px;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  z-index: 20;
  transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-base);
}
.timeline__arrow--prev { left:  -72px; }
.timeline__arrow--next { right: -72px; }
.timeline__arrow:hover { transform: translateY(-50%) scale(1.08); }
.timeline__arrow--prev:hover { transform: translateY(-50%) scale(1.08) translateX(-4px); }
.timeline__arrow--next:hover { transform: translateY(-50%) scale(1.08) translateX(4px); }
.timeline__arrow:disabled {
  opacity: 0.25;
  cursor: not-allowed;
  pointer-events: none;
}
.timeline__arrow svg { width: 100%; height: 100%; display: block; }

/* On narrower viewports, tuck arrows back inside so they don't overflow the page */
@media (max-width: 1100px) {
  .timeline__arrow--prev { left:  4px; }
  .timeline__arrow--next { right: 4px; }
}

/* ============================================================
   WORK PAGE — square cards, 3 across, centered
   ============================================================ */
.work-header {
  padding: var(--space-xl) 0 var(--space-md);
  border-bottom: 1px solid var(--rule);
  margin-bottom: var(--space-lg);
}
.work-header__inner {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}
.work-header h1 {
  font-family: var(--font-hand);
  font-size: clamp(2.5rem, 4vw, 3.5rem);
  font-weight: 700;
  line-height: 0.95;
  color: var(--ink);
}
.work-count {
  font-size: var(--fs-meta);
  color: var(--ink-3);
  letter-spacing: var(--tracking-meta);
  text-transform: uppercase;
}

.project-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* Larger row gap to make room for tile tilt without overlap */
  gap: 40px 28px;
  margin-bottom: var(--space-2xl);
  padding: 16px 4px;
}

/* Polaroid-style project tile — white paper, photo, handwritten caption below.
   Top is "taped to the wall" — rotation pivots from the tape point so hover
   feels like the card is swinging from where it's stuck. */
.project-card {
  position: relative;
  background: var(--polaroid-bg);
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 0.06 0 0 0 0 0.05 0 0 0 0 0.04 0 0 0 0.08 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
  padding: 10px 10px 18px;
  cursor: pointer;
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.04),
    0 2px 4px rgba(0,0,0,0.08),
    0 12px 24px rgba(0,0,0,0.12);
  /* Pivot from the tape (top center) so the card swings on hover, not spins */
  transform-origin: 50% -2px;
  transition: transform var(--dur-slow) var(--ease-out), box-shadow var(--dur-slow) var(--ease-out);
  animation: cardFadeIn 0.55s var(--ease-out) backwards;
}

/* Orange tape strip taping the polaroid to the wall — sits on top of the card,
   torn edges, slight tilt. The tape stays stuck; the card swings beneath it. */
.project-card__tape {
  position: absolute;
  top: -12px;
  left: 50%;
  width: 76px;
  height: 25px; /* 15% taller than original 22px */
  background-color: var(--tape-cream);
  background-image:
    linear-gradient(112deg, transparent 0%, transparent 35%, rgba(255,255,255,0.20) 38%, transparent 42%),
    linear-gradient(96deg, transparent 0%, transparent 62%, rgba(0,0,0,0.06) 64%, transparent 67%);
  /* Torn left + right edges, like a real piece of washi tape */
  clip-path: polygon(
    2% 0%, 98% 0%,
    100% 18%, 96% 36%, 99% 54%, 95% 72%, 100% 90%, 100% 100%,
    2% 100%,
    0% 84%, 4% 66%, 0% 50%, 4% 32%, 0% 18%
  );
  box-shadow: var(--shadow-tape);
  z-index: 3;
  pointer-events: none;
  transform: translateX(-50%) rotate(-4deg);
}

/* Per-tile tape rotation variety — tape always feels hand-applied */
.project-card:nth-child(4n+1) .project-card__tape { transform: translateX(-50%) rotate(-4deg); }
.project-card:nth-child(4n+2) .project-card__tape { transform: translateX(-50%) rotate( 3deg); }
.project-card:nth-child(4n+3) .project-card__tape { transform: translateX(-50%) rotate(-2deg); }
.project-card:nth-child(4n+4) .project-card__tape { transform: translateX(-50%) rotate( 5deg); }

/* Per-tile rotation cycle — borrows the timeline's rhythm */
.project-card:nth-child(8n+1) { transform: rotate(-1.8deg); }
.project-card:nth-child(8n+2) { transform: rotate( 1.0deg); }
.project-card:nth-child(8n+3) { transform: rotate(-0.8deg); }
.project-card:nth-child(8n+4) { transform: rotate( 1.6deg); }
.project-card:nth-child(8n+5) { transform: rotate(-1.2deg); }
.project-card:nth-child(8n+6) { transform: rotate( 0.6deg); }
.project-card:nth-child(8n+7) { transform: rotate(-2.0deg); }
.project-card:nth-child(8n+8) { transform: rotate( 1.4deg); }

/* Cascade fade-in delays */
.project-card:nth-child(1)  { animation-delay:  0ms; }
.project-card:nth-child(2)  { animation-delay: 40ms; }
.project-card:nth-child(3)  { animation-delay: 80ms; }
.project-card:nth-child(4)  { animation-delay:120ms; }
.project-card:nth-child(5)  { animation-delay:160ms; }
.project-card:nth-child(6)  { animation-delay:200ms; }
.project-card:nth-child(7)  { animation-delay:240ms; }
.project-card:nth-child(8)  { animation-delay:280ms; }
.project-card:nth-child(9)  { animation-delay:320ms; }
.project-card:nth-child(10) { animation-delay:360ms; }
.project-card:nth-child(11) { animation-delay:400ms; }
.project-card:nth-child(12) { animation-delay:440ms; }
.project-card:nth-child(13) { animation-delay:480ms; }
.project-card:nth-child(14) { animation-delay:520ms; }
.project-card:nth-child(15) { animation-delay:560ms; }
.project-card:nth-child(16) { animation-delay:600ms; }

@keyframes cardFadeIn {
  from { opacity: 0; transform: translateY(16px) rotate(0deg); }
}

/* Photo inside the polaroid frame */
.project-card__photo {
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--polaroid-photo-bg);
  margin-bottom: 10px;
  position: relative;
}
/* Award-winner laurel badge — gold wreath anchored to the bottom-right
   of the polaroid (in the caption area, not over the photo).
   mix-blend-mode: multiply makes the source PNG's white background blend
   invisibly with the polaroid paper and any caption text underneath. */
.project-card__badge {
  position: absolute;
  bottom: 6px;
  right: 6px;
  width: 58px; /* 20% smaller than the original 72px */
  height: auto;
  pointer-events: none;
  z-index: 3;
  mix-blend-mode: multiply;
}

.project-card__thumb {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--dur-slow) var(--ease-out);
}

/* Handwritten caption below photo */
.project-card__client {
  font-family: var(--font-hand);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.1;
}
.project-card__title {
  font-family: var(--font-hand);
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--ink-2);
  line-height: 1.2;
  margin-top: 0;
}

/* Hover: card swings to straight, pivoting from the tape at the top.
   The transform-origin (50% -2px) means rotation feels like the card
   is hanging from the tape, not spinning around its center. */
.project-card:hover {
  transform: rotate(0deg) !important;
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.04),
    0 8px 16px rgba(0,0,0,0.12),
    0 26px 48px rgba(0,0,0,0.18);
  z-index: 2;
}
.project-card:hover .project-card__thumb { transform: scale(1.04); }
/* Tape itself stays put — only the polaroid swings beneath it */
.project-card:hover .project-card__tape { /* keep its rotation */ }

/* No-thumb fallback (for projects without a hero image yet) */
.project-card--no-thumb .project-card__photo {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--paper-2);
}
.project-card--no-thumb .project-card__photo::after {
  content: '—';
  font-family: var(--font-hand);
  font-size: 2.5rem;
  color: var(--ink-3);
}

@media (prefers-reduced-motion: reduce) {
  .project-card { animation: none; }
  .polaroid { transition: none; }
  .timeline__strip { scroll-behavior: auto; }
}

/* ============================================================
   PROJECT MODAL / OVERLAY
   ============================================================ */
.overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--paper);
  display: grid;
  grid-template-rows: auto 1fr;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
  overflow: hidden;
}
.overlay.is-open {
  opacity: 1;
  pointer-events: all;
}

.overlay__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--space-xl);
  height: var(--nav-h);
  border-bottom: 1px solid var(--rule);
  flex-shrink: 0;
  background: var(--paper);
}
.overlay__close {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-body);
  font-size: var(--fs-meta);
  font-weight: 500;
  letter-spacing: var(--tracking-meta);
  text-transform: uppercase;
  color: var(--ink-2);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  transition: color 0.2s;
}
.overlay__close:hover { color: var(--ink); }
.overlay__close svg { width: 16px; height: 16px; }

.overlay__nav {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}
.overlay__arrow {
  width: 36px; height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid var(--rule);
  cursor: pointer;
  color: var(--ink-2);
  transition: border-color 0.2s, color 0.2s;
  border-radius: var(--radius-1);
}
.overlay__arrow:hover {
  border-color: var(--ink);
  color: var(--ink);
}
.overlay__arrow:disabled { opacity: 0.3; cursor: not-allowed; }
.overlay__arrow svg { width: 16px; height: 16px; }

.overlay__counter {
  font-size: var(--fs-meta);
  color: var(--ink-3);
  min-width: 48px;
  text-align: center;
  letter-spacing: var(--tracking-meta);
}

.overlay__body {
  overflow-y: auto;
  overscroll-behavior: contain;
}
.overlay__content {
  max-width: 860px;
  margin: 0 auto;
  padding: var(--space-3xl) var(--space-xl);
}

.modal-project__title {
  font-family: var(--font-hand);
  font-size: clamp(2.5rem, 5vw, 3.5rem);
  font-weight: 700;
  line-height: 0.95;
  /* The marker underline beneath this heading visually extends the title;
     bump the bottom margin so the underline has room to breathe before
     body copy starts (roughly 0.5–0.6× the type size feels editorial). */
  margin-bottom: var(--space-xl);
  color: var(--ink);
}

/* Credits block — Brand / Agency / Role / Year laid out as a label/value list */
.modal-credits {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-md) var(--space-xl);
  margin: 0 0 var(--space-lg);
  padding: var(--space-md) 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.modal-credit {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.modal-credit__label {
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  font-weight: 500;
  color: var(--ink-3);
  margin: 0;
}
.modal-credit__value {
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--ink);
  margin: 0;
  line-height: 1.35;
}

/* Section labels — "Results", "Awards & Recognition" — small uppercase eyebrows above each section */
.modal-section {
  margin-bottom: var(--space-lg);
}
.modal-section-label {
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  font-weight: 500;
  color: var(--ink-3);
  margin: 0 0 var(--space-sm);
}

/* Per-video description — sits just under the iframe and updates with tab change */
.modal-video-desc {
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--ink-2);
  margin: 0 0 var(--space-lg);
  font-style: italic;
}
.modal-video-desc[hidden] { display: none; }

/* When stats/awards/gallery live inside a .modal-section wrapper, the wrapper's
   margin handles spacing — don't double up. */
.modal-section .modal-stats,
.modal-section .modal-awards__list,
.modal-section .modal-gallery { margin-bottom: 0; }

.modal-video-wrap {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  background: #000;
  margin-bottom: var(--space-md);
  border-radius: var(--radius-1);
  overflow: hidden;
}
.modal-video-wrap iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
}

/* Instagram reels are vertical — tall, narrow, centered frame instead of 16:9. */
.modal-video-wrap--reel {
  max-width: 380px;
  margin-left: auto;
  margin-right: auto;
  padding-bottom: 0;
  height: auto;
  aspect-ratio: 380 / 690; /* reel media + IG header/footer chrome; tuned live */
}

.modal-video-tabs {
  display: flex;
  gap: 18px;
  margin-bottom: var(--space-md);
  flex-wrap: wrap;
  padding-top: 8px; /* room for the tape's slight tilt */
}

/* Video tabs use the .tape primitive so they match the nav-menu language.
   This selector just scopes the size for the modal context. */
.modal-video-tab.tape {
  padding: 8px 20px;
  font-size: 1.05rem;
  font-weight: 700;
}

/* Alternating tilt — same rhythm as the nav menu tape buttons */
.modal-video-tabs .modal-video-tab:nth-child(odd)  { --tape-rot-default: -2deg; }
.modal-video-tabs .modal-video-tab:nth-child(even) { --tape-rot-default:  2deg; }

.modal-project__desc {
  font-size: 0.95rem;
  line-height: 1.8;
  color: var(--ink-2);
  margin-bottom: var(--space-lg);
  white-space: pre-line;
}

.modal-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1px;
  background: var(--rule);
  margin-bottom: var(--space-lg);
  border: 1px solid var(--rule);
}
.modal-stat {
  background: var(--paper);
  padding: 1.25rem 1rem;
  text-align: center;
}
.modal-stat__value {
  font-family: var(--font-hand);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
  margin-bottom: 0.25rem;
  color: var(--ink);
}
.modal-stat__label {
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.modal-awards { margin-bottom: var(--space-lg); }
.modal-awards__label {
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 0.75rem;
}
.modal-awards__list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.modal-award {
  font-size: 0.88rem;
  color: var(--ink-2);
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}
.modal-award::before {
  content: '—';
  color: var(--accent);
  flex-shrink: 0;
}

/* Press-clipping gallery — magazine clippings tossed on a desk.
   Source images are 1080×1350 (clean 4:5) so they fit the polaroid frame
   edge-to-edge. Three in a row at desktop, click any for the lightbox. */
.modal-gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 32px 28px;
  padding: 24px 4px 48px;
  margin-bottom: 0;
}

.gallery-polaroid {
  position: relative;
  flex: 0 1 232px; /* 3-up at the modal's ~796px content width */
  max-width: 100%;
  background: var(--polaroid-bg);
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 0.06 0 0 0 0 0.05 0 0 0 0 0.04 0 0 0 0.08 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
  padding: 14px 14px 22px;
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.04),
    0 2px 4px rgba(0,0,0,0.08),
    0 14px 28px rgba(0,0,0,0.12);
  transform-origin: 50% -4px;
  transition: transform var(--dur-slow) var(--ease-out), box-shadow var(--dur-slow) var(--ease-out);
  cursor: zoom-in;
}

.gallery-polaroid__photo {
  width: 100%;
  aspect-ratio: 4 / 5; /* portrait — fits magazine page proportion well */
  overflow: hidden;
  background: #fff;
}
.gallery-polaroid__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* crop the screenshot's white margins, headline fills */
  object-position: center;
  display: block;
}

/* Hover swing — but not when lifted (the JS holds the lifted transform) */
.gallery-polaroid:not(.polaroid--lifted):hover {
  transform: rotate(0deg) !important;
  z-index: 5;
  box-shadow:
    0 4px 8px rgba(0,0,0,0.10),
    0 18px 36px rgba(0,0,0,0.14),
    0 28px 56px rgba(0,0,0,0.06);
}

@media (max-width: 700px) {
  .gallery-polaroid { flex: 0 1 240px; }
}
@media (max-width: 480px) {
  .gallery-polaroid { flex: 0 1 100%; }
}

.modal-press {
  font-size: 0.88rem;
  color: var(--ink-3);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}
.modal-press__label {
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.modal-press__outlet {
  padding: 0.2rem 0.6rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius-1);
  font-size: 0.78rem;
}

/* ============================================================
   CONTACT PAGE
   ============================================================ */
.contact-page { padding: var(--space-2xl) 0; }
.contact-intro { margin-bottom: var(--space-xl); }
.contact-intro h1 {
  font-family: var(--font-hand);
  font-size: clamp(2.5rem, 4vw, 3.5rem);
  font-weight: 700;
  line-height: 0.95;
  /* Same spacing system as the modal title — give the marker underline room. */
  margin-bottom: var(--space-xl);
  color: var(--ink);
}
.contact-intro p {
  font-size: var(--fs-body-l);
  line-height: var(--lh-loose);
  color: var(--ink-2);
}
.contact-form-wrap {
  padding-top: var(--space-md);
  border-top: 1px solid var(--rule);
}
.contact-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}
.form-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.form-field label {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.form-field input,
.form-field textarea {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius-1);
  padding: 10px 14px;
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--ink);
  outline: none;
  transition: border-color 0.2s;
  width: 100%;
}
.form-field input:focus,
.form-field textarea:focus { border-color: var(--ink); }
.form-field textarea {
  resize: vertical;
  min-height: 140px;
}
.form-submit {
  align-self: flex-start;
  margin-top: var(--space-sm);
}
.form-success {
  display: none;
  font-size: 0.95rem;
  color: var(--ink-2);
  padding: var(--space-md);
  border: 1px solid var(--rule);
  border-radius: var(--radius-1);
  text-align: center;
}
.form-success.is-visible { display: block; }

/* ============================================================
   404 PAGE — sticker pile of favorite things, tape button home
   ============================================================ */
.error-page {
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  position: relative;
  min-height: calc(100dvh - var(--nav-h) - 72px);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.error-page__content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 var(--space-xl);
  pointer-events: none;
}
.error-page__content .tape { pointer-events: auto; margin-top: var(--space-xl); }
.error-page__eyebrow {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}
.error-page__title {
  font-family: var(--font-hand);
  font-size: clamp(3.5rem, 13vw, 7.5rem);
  font-weight: 700;
  line-height: 1;
  margin-top: 12px;
  color: var(--ink);
}
.error-page__divider {
  width: 48px;
  height: 3px;
  background: var(--accent);
  margin: var(--space-lg) 0;
}
.error-page__text {
  font-size: var(--fs-body);
  line-height: var(--lh-base);
  color: var(--ink-2);
  max-width: 420px;
}
.error-page__hint {
  position: absolute;
  left: 5%;
  /* JS sets `top` once, in the space reserved above the pile (see
     pileTop/layoutHint in the page script) — it never needs to move to
     dodge the stickers. `bottom` is just the pre-JS fallback position. */
  bottom: 38%;
  z-index: 1;
  max-width: 170px;
  text-align: center;
  font-family: var(--font-hand);
  font-size: 1.6rem;
  line-height: 1.15;
  font-weight: 600;
  color: var(--ink-2);
  transform: rotate(-5deg);
  pointer-events: none;
}
.error-page__stickers {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}
.error-page__stickers img {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: auto;
  cursor: grab;
  touch-action: none;
  user-select: none;
  will-change: transform;
}

@media (max-width: 900px) {
  .error-page { min-height: calc(100dvh - var(--nav-h) - 120px); }
}
@media (max-width: 640px) {
  .error-page__hint { display: none; }
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: var(--space-md) var(--space-xl);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--fs-meta);
  color: var(--ink-3);
  letter-spacing: var(--tracking-meta);
  text-transform: uppercase;
  position: relative;
}

/* Full-width separator line at the top of the footer.
   Pseudo-element lets the rule span 100vw even though the footer
   content is capped at 1200px. */
.footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  height: 1px;
  background: var(--rule);
}
.footer__name {
  font-family: var(--font-hand);
  font-size: 1.5rem;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
  color: var(--ink);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
  .hero {
    grid-template-columns: 1fr;
    text-align: center;
    justify-items: center;
  }
  .hero__bio { align-items: flex-start; text-align: left; }
  .project-grid { grid-template-columns: repeat(2, 1fr); }
  .stage { padding: var(--space-2xl) var(--space-lg); }
}

@media (max-width: 600px) {
  .nav__inner { padding: 0 var(--space-md); }
  .nav__name { font-size: 1.875rem; } /* bumped 50% from 1.25rem */
  .nav__links { gap: 8px; }
  .nav__links .tape { padding: 6px 12px; font-size: 0.92rem; }

  .hero__polaroid { width: 240px; }

  .project-grid { grid-template-columns: 1fr; gap: 12px; }

  .overlay__content { padding: var(--space-xl) var(--space-md); }
  .modal-stats { grid-template-columns: repeat(2, 1fr); }

  .timeline__strip .polaroid { flex: 0 0 200px; }
}