/* ---------- variables ---------- */
:root {
  --bg: #faf7f1;
  --ink: #1a1a1a;
  --ink-soft: #6b6b66;
  --accent: #aac9e0;
  --paper: #ffffff;
  --font-hand: 'Caveat', cursive;
  --font-body: 'Work Sans', sans-serif;
  --line: 1.6px;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* fluid base size so rem-based type/spacing scales between phone and desktop */
  font-size: clamp(15px, 0.6vw + 13px, 19px);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }

.container {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 48px);
}

/* ---------- header ---------- */
.logo-header {
  display: flex;
  justify-content: center;
  padding: 0.6rem 0 0.25rem;
}
.logo-header .logo-img {
  height: 98px;
  width: auto;
}
/* only the intro page's logo swings on load, pivoting from the top of the
   hanger hook */
.logo-header .logo-img.intro-logo {
  transform-origin: 50% 0%;
  animation: hangerSwing 1.6s ease-in-out;
}
@keyframes hangerSwing {
  0%   { transform: rotate(0deg); }
  15%  { transform: rotate(9deg); }
  35%  { transform: rotate(-7deg); }
  55%  { transform: rotate(4deg); }
  75%  { transform: rotate(-2deg); }
  100% { transform: rotate(0deg); }
}
@media (prefers-reduced-motion: reduce) {
  .logo-header .logo-img.intro-logo { animation: none; }
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-hand);
  font-size: 1.3rem;
  padding: 6px 14px;
  border: var(--line) solid var(--ink);
  border-radius: 60% 40% 52% 48% / 48% 52% 40% 60%;
  transition: transform .2s ease;
}
.back-link:hover { transform: translateX(-4px) rotate(-2deg); }
/* pick.html has no logo-header above it, so give its home button its own
   top gap (other pages get that gap for free from the logo-header). */
.back-link.pick-back-link { margin-top: 48px; }
.back-link svg { width: 18px; height: 18px; }

nav.site-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.4rem;
  font-family: var(--font-hand);
  font-size: clamp(1rem, 0.4vw + 0.9rem, 1.25rem);
}
nav.site-nav a { position: relative; }
nav.site-nav a::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -4px;
  height: 6px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10'%3E%3Cpath d='M0 5 Q 15 0 30 5 T 60 5 T 100 5' stroke='%231a1a1a' stroke-width='2' fill='none'/%3E%3C/svg%3E") repeat-x;
  background-size: 40px 6px;
  opacity: 0;
  transition: opacity .2s;
}
nav.site-nav a:hover::after,
nav.site-nav a.active::after { opacity: 1; }

/* ---------- hero / intro ---------- */
.hero {
  padding: clamp(2rem, 4vh, 3.5rem) 0 0;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "heading photo"
    "body    body";
  column-gap: clamp(16px, 4vw, 40px);
  row-gap: 10px;
  align-items: start;
}

.hero-heading { grid-area: heading; text-align: center; }
.hero-body { grid-area: body; }

.hero-photo-frame {
  grid-area: photo;
  width: 98px;
  aspect-ratio: 3 / 4;
  overflow: hidden;
}
.hero-photo-frame .hero-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (min-width: 641px) {
  .hero-grid {
    grid-template-areas:
      "heading heading"
      "body    photo";
    row-gap: 4px;
    align-items: center;
  }
  .hero-photo-frame {
    width: clamp(210px, 25vw, 330px);
  }
}

.hero-heading h1 {
  font-family: var(--font-hand);
  font-size: clamp(2.4rem, 3.4vw + 1.4rem, 4.2rem);
  margin: 0 0 4px;
  line-height: 1.1;
}

.hero-heading .role {
  font-size: 1.3rem;
  color: var(--ink-soft);
  margin-top: 7px;
  margin-bottom: 4px;
}

.hero-heading .based-in {
  font-size: 1rem;
  color: var(--ink-soft);
  margin: 0 0 18px;
}

.hero-body p {
  max-width: 54ch;
  margin-bottom: 16px;
}

@media (max-width: 640px) {
  .hero-grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "heading"
      "photo"
      "body";
    row-gap: 14px;
  }
  .hero-heading h1 {
    font-size: 2.1rem;
  }
  .hero-heading .role {
    font-size: 1.3rem;
  }
  .hero-photo-frame {
    width: 200px;
    justify-self: center;
  }
}

.hero-body .philosophy {
  font-family: var(--font-hand);
  font-size: 1.6rem;
  color: var(--ink);
  line-height: 1.3;
  margin: 2px 0 20px;
}

.contact-line {
  display: flex;
  gap: 18px;
  font-family: var(--font-hand);
  font-size: 1.2rem;
}
.contact-line a { border-bottom: var(--line) dashed var(--ink); }
.contact-line a:hover { color: var(--accent-ink, #3b6b8f); }

/* ---------- intro page: continue cta ---------- */
.intro-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-top: 48px;
  padding-bottom: 20px;
}
.intro-cta .bounce-arrow {
  width: 22px;
  height: 22px;
  color: var(--ink-soft);
  animation: arrowBounce 1.7s ease-in-out infinite;
}
@keyframes arrowBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(8px); }
}
.intro-cta .cta-button-img {
  position: relative;
  display: block;
  width: 96px;
  aspect-ratio: 288 / 276;
  transition: transform .2s ease;
}
.intro-cta .cta-button-img:hover { transform: translateY(-3px) scale(1.03); }
.intro-cta .cta-button-img .enter-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: opacity .15s ease;
}
.intro-cta .cta-button-img .enter-hover,
.intro-cta .cta-button-img .enter-splat {
  opacity: 0;
  pointer-events: none;
}
.intro-cta .cta-button-img:hover .enter-default { opacity: 0; }
.intro-cta .cta-button-img:hover .enter-hover { opacity: 1; }
.intro-cta .cta-button-img.is-clicked .enter-default,
.intro-cta .cta-button-img.is-clicked .enter-hover {
  opacity: 0;
}
.intro-cta .cta-button-img.is-clicked .enter-splat {
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .intro-cta .bounce-arrow { animation: none; }
}

/* ---------- section headings ---------- */
.section-title {
  font-family: var(--font-hand);
  font-size: clamp(1.8rem, 1.6vw + 1.3rem, 2.6rem);
  display: inline-block;
  position: relative;
  margin: 10px 0 34px;
}
.section-title svg.underline {
  position: absolute;
  left: 0; bottom: -10px;
  width: 100%; height: 14px;
}

.pair-section {
  text-align: center;
  /* tied to the same --hanger-w variable as .glasses-wrap below, so this gap
     scales in proportion with the gap under the heading at any screen size */
  padding-top: calc(var(--hanger-w) * 0.06);
}
.pair-section .pair-title {
  font-size: clamp(2.4rem, 3.4vw + 1.4rem, 4.2rem);
  margin: 0;
}

/* ---------- glasses hanger (home page work selector) ---------- */
:root {
  --hanger-w: calc(100vw - 5in);
}

@media (max-width: 1024px) {
  :root {
    --hanger-w: calc(100vw - 1in);
  }
}

.glasses-wrap {
  position: relative;
  width: var(--hanger-w);
  max-width: var(--hanger-w);
  aspect-ratio: 1179 / 1470;
  /* the source drawing has empty space above the hanger hook, so pull the box
     up to shorten that gap under the "pick your pair..." heading. Tied to
     --hanger-w (not vw) so this stays proportional at any screen size. Pulled
     up less than the drawing's natural empty space, so a visible gap remains
     between the heading and the hanger. */
  margin: calc(var(--hanger-w) * -0.14) auto 60px;
  /* pivots from the top of this drawing's actual hook (measured from the
     source art: ~53.4% across, ~18.9% down its own box) */
  transform-origin: 53.4% 18.9%;
}
/* swing only the very first time a visitor lands on this page (js adds this
   class once, then remembers via localStorage so repeat visits skip it) */
.glasses-wrap.swing-once {
  animation: hangerSwing 1.6s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
  .glasses-wrap.swing-once { animation: none; }
}

.glasses-wrap .glasses-base,
.glasses-wrap .glasses-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.glasses-wrap .glasses-overlay {
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
}

.glasses-wrap .glasses-hotspot {
  position: absolute;
  cursor: pointer;
  border-radius: 50%;
}

.hs-portfolio:hover ~ .ov-portfolio, .hs-portfolio:focus-visible ~ .ov-portfolio,
.hs-netflix:hover ~ .ov-netflix, .hs-netflix:focus-visible ~ .ov-netflix,
.hs-wardrobe:hover ~ .ov-wardrobe, .hs-wardrobe:focus-visible ~ .ov-wardrobe,
.hs-vr:hover ~ .ov-vr, .hs-vr:focus-visible ~ .ov-vr,
.hs-etc:hover ~ .ov-etc, .hs-etc:focus-visible ~ .ov-etc {
  opacity: 1;
}

.glasses-wrap .glasses-hotspot:focus-visible {
  outline: 1.6px dashed var(--ink);
  outline-offset: 4px;
}

.glasses-wrap .glasses-overlay.peek {
  animation: peekFade 1.1s ease-in-out;
}
@keyframes peekFade {
  0%, 100% { opacity: 0; }
  50% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .glasses-wrap .glasses-overlay {
    transition: none;
  }
  .glasses-wrap .glasses-overlay.peek {
    animation: none;
  }
}

/* ---------- generic page content blocks ---------- */
.page-hero {
  padding: 50px 0 20px;
}
.page-hero p.lede {
  max-width: 60ch;
  color: var(--ink-soft);
}

/* full-bleed paragraph block on the Etc. page: always exactly 0.5in from each
   screen edge, at any viewport width, uncapped (unlike the tomato row, which
   caps its growth past 6.5in). */
.etc-lede-wrap {
  width: calc(100vw - 1in);
  margin: 0 auto 30px;
}
.etc-lede-wrap p.lede {
  color: var(--ink-soft);
  max-width: none;
}

/* the mini tomato strip sits beside the "tomato, tomahto" phrase when there's
   room, and drops below it automatically (via flex-wrap) when the paragraph
   plus the strip can't both fit on one line. */
.phrase-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 24px;
  row-gap: 12px;
}
.phrase-line p.lede {
  flex: 1 1 260px;
  margin: 0;
}
.mini-tomato-row {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  flex: 0 0 auto;
}
.mini-tomato-row img {
  height: 52px;
  width: auto;
  display: block;
}

/* ---------- tomato row (Etc. page) ---------- */
/* the four tomatoes + the gaps between them are one fixed-proportion "design"
   (566.3 x 702.5px). --tomato-scale shrinks/grows that whole design to exactly
   fill the viewport minus a constant 0.5in margin on each side, so the side
   margins never change while every tomato and every gap between them scales
   together in lockstep. The scale (and the wrapper width driving it) is capped
   at whatever it computes to when the viewport is 9in wide, so the tomatoes
   stop growing past that point and simply stay centered on wider screens. */
.tomato-row-outer {
  --tomato-scale: min(calc((100vw - 1in) / 566.3px), calc(768px / 566.3px));
  width: min(calc(100vw - 1in), 768px);
  height: calc(702.5px * var(--tomato-scale));
  margin: 40px auto 20px;
  position: relative;
}

.tomato-row {
  display: grid;
  grid-template-columns: repeat(2, auto);
  align-items: start;
  column-gap: 54px;
  row-gap: 19.4px;
  width: 566.3px;
  height: 702.5px;
  transform: scale(var(--tomato-scale));
  transform-origin: top left;
}

.tomato-item {
  position: relative;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
}

/* each tomato is drawn at a different natural size — these widths/heights are
   scaled from the source artwork's true pixel dimensions (one shared scale
   factor) so the four keep their real size relationship to each other. */
.tomato-item.t1 { width: 274.6px; height: 271.6px; }
.tomato-item.t2 { width: 237.7px; height: 364.5px; }
.tomato-item.t3 { width: 252.7px; height: 318.6px; transform: translateY(-69.0px); }
.tomato-item.t4 { width: 217.8px; height: 249.6px; }

.tomato-item .tomato-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: 50% 0%;
  transition: opacity .2s ease, transform .2s ease;
}

.tomato-item .tomato-empty {
  opacity: 0;
  pointer-events: none;
}
.tomato-item.is-clicked .tomato-full {
  opacity: 0;
  pointer-events: none;
}
.tomato-item.is-clicked .tomato-empty {
  opacity: 1;
  pointer-events: auto;
}

.tomato-item:not(.is-clicked):hover .tomato-full {
  transform: translateY(-4px) scale(1.05);
}

/* the photo fills the entire hollow interior of each tomato (top dome down to
   the bottom tip), traced from that same tomato's own outline, so it reads as
   a picture sitting inside the empty tomato once clicked, never spilling
   outside the ink outline. */
.tomato-photo {
  position: absolute;
  object-fit: cover;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}
.tomato-item.is-clicked .tomato-photo {
  opacity: 1;
}

.tomato-item.t1 .tomato-photo {
  left: 23.8px; bottom: 24.8px; width: 226.1px; height: 191.1px;
  clip-path: polygon(0.0% 42.8%, 2.1% 33.6%, 4.3% 27.6%, 6.4% 22.5%, 8.5% 19.1%, 10.6% 16.1%, 12.7% 13.5%, 14.9% 11.0%, 17.0% 9.0%, 19.1% 7.0%, 20.9% 5.6%, 22.8% 5.2%, 25.2% 4.6%, 27.7% 3.5%, 29.6% 2.0%, 31.3% 2.1%, 33.5% 2.1%, 35.4% 2.1%, 37.4% 3.1%, 39.9% 3.7%, 42.3% 3.7%, 44.5% 3.7%, 46.9% 3.7%, 49.2% 3.1%, 51.4% 2.6%, 53.6% 2.1%, 55.8% 1.5%, 57.9% 1.0%, 60.1% 1.0%, 62.4% 0.5%, 64.5% 0.0%, 66.5% 0.0%, 68.5% 0.0%, 70.7% 0.5%, 72.9% 0.5%, 74.8% 1.0%, 76.8% 2.0%, 78.9% 2.9%, 80.9% 4.3%, 83.0% 6.4%, 85.1% 8.4%, 87.3% 10.9%, 89.5% 13.5%, 91.6% 16.0%, 93.6% 19.4%, 95.7% 23.8%, 97.8% 31.8%, 100.0% 50.0%, 100.0% 51.9%, 97.8% 61.1%, 95.8% 67.6%, 93.7% 70.5%, 91.5% 74.2%, 89.3% 77.8%, 87.1% 81.5%, 85.0% 85.0%, 82.9% 87.0%, 80.7% 90.1%, 78.6% 92.1%, 76.6% 94.0%, 74.6% 94.9%, 72.6% 95.9%, 70.5% 96.4%, 68.5% 96.9%, 66.5% 96.9%, 64.3% 96.9%, 62.3% 96.9%, 60.2% 96.4%, 57.9% 95.8%, 55.5% 95.8%, 53.3% 95.8%, 50.9% 95.8%, 48.3% 96.5%, 46.1% 98.0%, 44.2% 98.5%, 42.0% 99.0%, 39.8% 99.5%, 37.7% 100.0%, 35.9% 100.0%, 33.7% 99.5%, 31.6% 99.5%, 29.7% 98.6%, 27.5% 97.5%, 25.2% 96.4%, 23.3% 96.0%, 21.3% 94.1%, 19.1% 92.5%, 17.0% 90.5%, 14.9% 88.5%, 12.7% 85.9%, 10.5% 83.9%, 8.4% 80.9%, 6.3% 77.9%, 4.3% 73.4%, 2.2% 67.6%, 0.0% 48.5%);
}
.tomato-item.t2 .tomato-photo {
  left: 23.7px; bottom: 24.8px; width: 189.2px; height: 280.0px;
  clip-path: polygon(0.1% 44.8%, 2.3% 30.9%, 4.4% 21.8%, 6.5% 17.7%, 8.7% 15.4%, 10.8% 12.6%, 12.9% 10.9%, 15.1% 8.8%, 17.0% 7.5%, 19.1% 6.5%, 21.2% 5.5%, 23.4% 4.8%, 25.6% 3.7%, 27.7% 3.1%, 29.7% 2.4%, 31.7% 2.1%, 33.9% 1.8%, 35.9% 1.4%, 37.9% 1.4%, 40.3% 1.4%, 42.5% 1.1%, 45.0% 1.0%, 47.2% 0.3%, 49.2% 0.4%, 51.4% 0.0%, 53.3% 0.0%, 55.6% 0.0%, 57.8% 0.0%, 59.7% 0.0%, 61.7% 0.3%, 63.7% 0.6%, 65.9% 1.4%, 68.4% 1.8%, 70.2% 2.0%, 72.4% 3.1%, 74.8% 3.5%, 76.8% 4.2%, 78.9% 4.8%, 80.9% 5.8%, 83.1% 6.9%, 85.2% 7.9%, 87.4% 9.3%, 89.8% 10.5%, 91.9% 11.5%, 93.7% 12.6%, 95.7% 15.2%, 97.8% 19.9%, 100.0% 30.9%, 100.0% 36.3%, 97.8% 49.1%, 95.6% 55.4%, 93.4% 60.7%, 91.3% 64.9%, 89.1% 68.4%, 86.9% 71.9%, 84.7% 74.8%, 82.5% 78.3%, 80.3% 80.7%, 78.1% 83.6%, 75.9% 86.8%, 73.9% 88.8%, 71.6% 90.6%, 69.4% 93.0%, 67.7% 94.2%, 65.4% 94.9%, 63.2% 96.3%, 61.3% 96.9%, 59.1% 97.6%, 56.9% 98.4%, 54.9% 99.0%, 52.9% 99.3%, 50.9% 99.7%, 48.9% 99.6%, 46.7% 99.6%, 44.5% 99.6%, 42.0% 99.7%, 40.1% 100.0%, 38.5% 99.7%, 36.3% 99.0%, 34.1% 98.7%, 32.3% 98.1%, 30.3% 97.1%, 28.1% 95.7%, 26.0% 94.7%, 23.9% 92.9%, 21.6% 91.5%, 19.6% 89.8%, 17.5% 87.8%, 15.3% 85.0%, 13.2% 82.6%, 11.0% 78.4%, 8.8% 74.6%, 6.7% 68.3%, 4.5% 59.8%, 2.2% 50.4%, 0.0% 46.5%);
}
.tomato-item.t3 .tomato-photo {
  left: 23.8px; bottom: 24.8px; width: 204.1px; height: 226.1px;
  clip-path: polygon(0.0% 45.7%, 2.2% 34.9%, 4.3% 26.6%, 6.4% 22.5%, 8.6% 19.0%, 10.8% 14.6%, 12.8% 12.2%, 15.0% 10.1%, 17.1% 7.9%, 19.1% 6.3%, 21.1% 5.1%, 23.2% 4.3%, 25.4% 3.4%, 27.4% 2.6%, 29.2% 2.2%, 31.8% 2.1%, 34.2% 0.7%, 35.7% 0.5%, 37.7% 0.9%, 40.1% 0.9%, 42.3% 0.9%, 44.5% 0.9%, 46.9% 0.9%, 49.1% 0.4%, 51.3% 0.4%, 53.5% 0.0%, 55.5% 0.0%, 57.5% 0.0%, 59.5% 0.4%, 61.9% 0.9%, 64.1% 0.9%, 66.0% 1.2%, 68.2% 2.1%, 70.6% 2.6%, 72.4% 3.0%, 74.3% 4.1%, 76.8% 5.6%, 79.0% 6.0%, 81.0% 7.2%, 83.2% 8.6%, 85.2% 9.7%, 87.2% 11.8%, 89.3% 13.9%, 91.4% 17.3%, 93.5% 20.7%, 95.7% 25.8%, 97.8% 31.4%, 100.0% 41.8%, 100.0% 45.8%, 97.8% 59.4%, 95.6% 67.3%, 93.5% 75.9%, 91.4% 78.4%, 89.2% 83.1%, 87.2% 84.6%, 84.9% 87.4%, 82.9% 89.9%, 81.0% 91.0%, 78.6% 92.4%, 76.5% 94.1%, 74.3% 95.0%, 72.1% 96.7%, 70.4% 97.4%, 68.4% 97.8%, 66.0% 98.3%, 63.9% 99.1%, 61.9% 99.1%, 59.7% 99.6%, 57.5% 99.6%, 55.3% 100.0%, 53.3% 100.0%, 51.1% 100.0%, 48.9% 100.0%, 46.7% 100.0%, 44.7% 100.0%, 42.7% 99.6%, 40.5% 99.1%, 38.3% 98.7%, 36.2% 98.3%, 34.0% 97.4%, 32.0% 97.0%, 30.1% 95.9%, 28.0% 94.6%, 25.9% 92.9%, 23.7% 91.2%, 21.6% 89.1%, 19.2% 86.7%, 16.9% 85.3%, 15.0% 83.8%, 12.9% 80.8%, 10.7% 78.6%, 8.6% 75.2%, 6.4% 72.2%, 4.2% 66.9%, 2.1% 64.4%, 0.0% 56.5%);
}
.tomato-item.t4 .tomato-photo {
  left: 23.8px; bottom: 24.8px; width: 169.1px; height: 165.2px;
  clip-path: polygon(0.0% 45.9%, 2.1% 37.8%, 4.3% 33.1%, 6.5% 27.7%, 8.7% 22.4%, 10.6% 19.8%, 12.8% 17.5%, 15.1% 15.0%, 17.3% 11.9%, 19.2% 9.8%, 21.1% 8.9%, 23.3% 7.7%, 25.3% 6.6%, 26.7% 6.1%, 29.2% 6.7%, 32.2% 5.2%, 33.6% 4.3%, 36.1% 4.8%, 38.1% 3.1%, 40.6% 4.2%, 43.5% 1.5%, 44.8% 1.3%, 46.7% 1.3%, 48.9% 1.3%, 51.4% 1.3%, 53.6% 0.7%, 55.6% 0.7%, 58.1% 0.7%, 59.4% 0.0%, 61.0% 1.5%, 63.9% 3.0%, 66.7% 3.1%, 68.1% 2.9%, 69.6% 4.3%, 72.1% 6.9%, 74.3% 7.5%, 76.4% 9.8%, 78.5% 10.9%, 80.7% 14.0%, 82.9% 15.2%, 85.0% 18.1%, 87.4% 20.0%, 89.4% 22.2%, 91.6% 25.1%, 93.7% 28.1%, 95.8% 31.4%, 97.9% 36.7%, 100.0% 41.5%, 100.0% 56.8%, 97.9% 66.6%, 95.8% 70.5%, 93.6% 75.3%, 91.4% 79.3%, 89.5% 82.0%, 87.5% 83.6%, 85.1% 85.5%, 83.1% 87.8%, 81.0% 88.9%, 78.8% 90.7%, 77.0% 91.7%, 74.7% 92.3%, 72.1% 93.7%, 70.1% 95.4%, 68.3% 95.8%, 65.8% 96.5%, 63.4% 97.9%, 61.4% 99.0%, 59.7% 99.4%, 57.5% 99.4%, 55.6% 100.0%, 53.6% 99.4%, 51.1% 99.4%, 48.9% 99.4%, 47.0% 99.4%, 44.8% 98.8%, 42.2% 98.8%, 40.3% 98.8%, 38.4% 98.3%, 36.1% 97.7%, 34.2% 97.1%, 32.2% 96.0%, 30.1% 94.9%, 28.1% 93.3%, 25.9% 91.4%, 23.5% 89.5%, 21.4% 88.4%, 19.4% 86.2%, 17.1% 83.7%, 14.9% 81.9%, 12.8% 79.7%, 10.8% 76.9%, 8.5% 72.5%, 5.8% 70.3%, 4.3% 69.5%, 2.2% 59.5%, 0.0% 50.0%);
}

.tomato-click-label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-hand);
  font-size: 1.5rem;
  color: #fff;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.65);
  opacity: 0;
  transition: opacity .2s ease;
  pointer-events: none;
}
.tomato-item:not(.is-clicked):hover .tomato-click-label {
  opacity: 1;
}

.tomato-caption {
  position: absolute;
  display: block;
  box-sizing: border-box;
  padding: 5% 13% 0;
  background: rgba(26, 26, 26, 0.55);
  color: var(--paper);
  font-family: var(--font-hand);
  font-size: 0.74rem;
  line-height: 1.08;
  text-align: center;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .2s ease, transform .2s ease;
  pointer-events: none;
}
.tomato-item.is-clicked:hover .tomato-caption {
  opacity: 1;
  transform: translateY(0);
}

/* each shape traces that tomato's own outline below a flat cut line, so the
   caption fills the bottom of the hollow interior exactly like the empty
   tomato artwork underneath it. */
.tomato-item.t1 .tomato-caption {
  left: 28px; bottom: 21px; width: 209.7px; height: 56.9px;
  clip-path: polygon(0.0% 0.0%, 0.0% 0.0%, 2.1% 14.0%, 4.3% 26.3%, 6.4% 36.8%, 8.5% 45.6%, 10.6% 50.9%, 12.8% 59.6%, 14.9% 64.9%, 17.0% 71.9%, 19.1% 77.2%, 21.3% 84.2%, 23.4% 86.0%, 25.5% 89.5%, 27.7% 91.2%, 29.8% 94.7%, 31.9% 98.2%, 34.0% 98.2%, 36.2% 100.0%, 38.3% 100.0%, 40.4% 98.2%, 42.6% 98.2%, 44.7% 96.5%, 46.8% 94.7%, 48.9% 93.0%, 51.1% 87.7%, 53.2% 86.0%, 55.3% 84.2%, 57.4% 84.2%, 59.6% 84.2%, 61.7% 87.7%, 63.8% 89.5%, 66.0% 89.5%, 68.1% 89.5%, 70.2% 89.5%, 72.3% 89.5%, 74.5% 87.7%, 76.6% 86.0%, 78.7% 84.2%, 80.9% 78.9%, 83.0% 73.7%, 85.1% 66.7%, 87.2% 61.4%, 89.4% 50.9%, 91.5% 43.9%, 93.6% 33.3%, 95.7% 22.8%, 97.9% 10.5%, 100.0% 1.8%, 100.0% 0.0%);
}
.tomato-item.t2 .tomato-caption {
  left: 36px; bottom: 22px; width: 154.8px; height: 79.1px;
  clip-path: polygon(0.0% 0.0%, 0.0% 4.1%, 2.1% 14.2%, 4.3% 30.6%, 6.4% 38.2%, 8.5% 45.7%, 10.6% 52.1%, 12.8% 59.6%, 14.9% 64.7%, 17.0% 69.7%, 19.1% 74.8%, 21.3% 78.5%, 23.4% 82.3%, 25.5% 86.1%, 27.7% 89.9%, 29.8% 92.4%, 31.9% 95.0%, 34.0% 96.2%, 36.2% 97.5%, 38.3% 100.0%, 40.4% 100.0%, 42.6% 100.0%, 44.7% 100.0%, 46.8% 100.0%, 48.9% 100.0%, 51.1% 100.0%, 53.2% 100.0%, 55.3% 100.0%, 57.4% 98.7%, 59.6% 97.5%, 61.7% 96.2%, 63.8% 93.7%, 66.0% 91.2%, 68.1% 89.9%, 70.2% 88.6%, 72.3% 86.1%, 74.5% 81.1%, 76.6% 79.8%, 78.7% 74.8%, 80.9% 71.0%, 83.0% 63.4%, 85.1% 57.1%, 87.2% 52.1%, 89.4% 40.7%, 91.5% 33.1%, 93.6% 26.8%, 95.7% 19.2%, 97.9% 9.1%, 100.0% 2.8%, 100.0% 0.0%);
}
.tomato-item.t3 .tomato-caption {
  left: 32px; bottom: 21px; width: 187.8px; height: 68.7px;
  clip-path: polygon(0.0% 0.0%, 0.0% 1.1%, 2.1% 12.7%, 4.3% 21.5%, 6.4% 28.7%, 8.5% 37.5%, 10.6% 44.7%, 12.8% 50.5%, 14.9% 54.9%, 17.0% 60.7%, 19.1% 66.5%, 21.3% 72.4%, 23.4% 76.7%, 25.5% 82.5%, 27.7% 86.9%, 29.8% 89.8%, 31.9% 91.3%, 34.0% 92.7%, 36.2% 95.6%, 38.3% 97.1%, 40.4% 98.5%, 42.6% 100.0%, 44.7% 100.0%, 46.8% 100.0%, 48.9% 100.0%, 51.1% 98.5%, 53.2% 98.5%, 55.3% 97.1%, 57.4% 100.0%, 59.6% 98.5%, 61.7% 97.1%, 63.8% 97.1%, 66.0% 95.6%, 68.1% 94.2%, 70.2% 92.7%, 72.3% 91.3%, 74.5% 88.4%, 76.6% 85.5%, 78.7% 81.1%, 80.9% 78.2%, 83.0% 72.4%, 85.1% 69.5%, 87.2% 65.1%, 89.4% 56.4%, 91.5% 49.1%, 93.6% 43.3%, 95.7% 34.5%, 97.9% 22.9%, 100.0% 5.5%, 100.0% 0.0%);
}
.tomato-item.t4 .tomato-caption {
  left: 29px; bottom: 21px; width: 159.7px; height: 51.4px;
  clip-path: polygon(0.0% 0.0%, 0.0% 1.0%, 2.1% 4.9%, 4.3% 16.5%, 6.4% 22.3%, 8.5% 32.0%, 10.6% 39.8%, 12.8% 43.7%, 14.9% 51.5%, 17.0% 59.2%, 19.1% 63.1%, 21.3% 67.0%, 23.4% 72.8%, 25.5% 76.7%, 27.7% 82.5%, 29.8% 86.4%, 31.9% 90.3%, 34.0% 92.2%, 36.2% 92.2%, 38.3% 94.2%, 40.4% 98.1%, 42.6% 96.1%, 44.7% 98.1%, 46.8% 98.1%, 48.9% 98.1%, 51.1% 98.1%, 53.2% 98.1%, 55.3% 100.0%, 57.4% 98.1%, 59.6% 98.1%, 61.7% 96.1%, 63.8% 94.2%, 66.0% 90.3%, 68.1% 88.3%, 70.2% 86.4%, 72.3% 82.5%, 74.5% 78.6%, 76.6% 74.8%, 78.7% 72.8%, 80.9% 68.9%, 83.0% 63.1%, 85.1% 61.2%, 87.2% 55.3%, 89.4% 49.5%, 91.5% 43.7%, 93.6% 37.9%, 95.7% 30.1%, 97.9% 16.5%, 100.0% 1.0%, 100.0% 0.0%);
}


.quirky-font {
  font-family: var(--font-hand);
}
.accent-red {
  color: #c2350c;
}
.tomato-phrase {
  font-family: var(--font-hand);
  font-style: italic;
  font-size: 1.4em;
}
.tomato-phrase.accent-red {
  color: #c2350c;
}

.placeholder-block {
  border: var(--line) dashed var(--ink-soft);
  border-radius: 18px;
  padding: 40px;
  margin: 30px 0;
  text-align: center;
  color: var(--ink-soft);
  font-family: var(--font-hand);
  font-size: 1.3rem;
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  padding-bottom: 60px;
}
@media (max-width: 760px) {
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
}
.gallery-card {
  position: relative;
  overflow: hidden;
  border: var(--line) solid var(--ink);
  border-radius: 10px;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--paper);
  font-family: var(--font-hand);
  font-size: 1.1rem;
  color: var(--ink-soft);
  transition: transform .2s;
}
.gallery-card:hover { transform: rotate(-1.5deg) scale(1.02); }

.gallery-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 10px 14px;
  background: rgba(26, 26, 26, 0.55);
  color: var(--paper);
  font-family: var(--font-hand);
  font-size: 1rem;
  line-height: 1.3;
  text-align: center;
  transform: translateY(100%);
  transition: transform .25s ease;
}
.gallery-card:hover .gallery-caption {
  transform: translateY(0);
}

.embed-frame {
  border: var(--line) solid var(--ink);
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 16/9;
  margin: 30px 0 60px;
  background: var(--paper);
}
.embed-frame iframe { width: 100%; height: 100%; border: 0; }

/* ---------- footer ---------- */
.site-footer {
  padding: 40px 0 60px;
  border-top: var(--line) dashed var(--ink-soft);
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  font-size: .9rem;
  color: var(--ink-soft);
}
.site-footer .socials {
  display: flex;
  gap: 18px;
}
.site-footer .socials a { color: var(--ink-soft); transition: color .2s ease; }
.site-footer .socials a:hover { color: var(--accent); }

.fade-in {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .6s ease, transform .6s ease;
}
.fade-in.is-visible {
  opacity: 1;
  transform: none;
}