/* Cakes by Milky — design system + page styles (from the Claude Design "Cakes by Milky Website") */

:root {
  /* Strawberry */
  --strawberry-50: #FEF6F4;
  --strawberry-100: #FCECE8;
  --strawberry-200: #F8DAD4;
  --strawberry-300: #F3C3BE;
  --strawberry-400: #EEADAB;
  --strawberry-500: #E89A9C;
  --strawberry-600: #D47F85;
  --strawberry-700: #AD5961;
  --strawberry-800: #85424A;
  --strawberry-900: #5E2F35;
  /* Butter */
  --butter-100: #FDF5DF;
  --butter-200: #FAEAB9;
  --butter-300: #F6DD97;
  --butter-500: #F2CF7A;
  --butter-600: #DDB255;
  /* Cocoa */
  --cocoa-50: #FFF6EC;
  --cocoa-100: #F8EBDD;
  --cocoa-200: #F0DCCB;
  --cocoa-300: #DCC0AA;
  --cocoa-400: #B8927C;
  --cocoa-500: #7A5546;
  --cocoa-700: #5A3A2E;
  --cocoa-800: #472D24;
  --cocoa-900: #2F1E18;
  --white: #FFFFFF;
  --pistachio-100: #EEF2E3;

  --bg-page: var(--cocoa-50);
  --bg-tint: var(--strawberry-200);
  --fg-1: var(--cocoa-700);
  --fg-2: var(--cocoa-500);
  --fg-accent: var(--strawberry-700);
  --border-1: var(--cocoa-200);

  --font-logo: "Cookie", "Brush Script MT", cursive;
  --font-display: "Caprasimo", Georgia, serif;
  --font-note: "Caveat", "Comic Sans MS", cursive;
  --font-body: "Figtree", "Helvetica Neue", sans-serif;

  --shadow-sm: 0 1px 2px rgba(90, 58, 46, .06), 0 3px 8px rgba(90, 58, 46, .06);
  --shadow-lg: 0 10px 24px rgba(90, 58, 46, .08), 0 28px 60px rgba(90, 58, 46, .16);
  --ease-soft: cubic-bezier(.3, .7, .4, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg-page);
  color: var(--fg-1);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img { max-width: 100%; }
a { color: var(--fg-accent); text-underline-offset: 3px; }
a:hover { color: var(--strawberry-800); }
::selection { background: var(--strawberry-200); color: var(--cocoa-900); }
:focus-visible { outline: 2px solid var(--strawberry-500); outline-offset: 2px; }
h1, h2, p, figure { margin: 0; }

/* ---------- Shared type ---------- */
.eyebrow { font: 700 13px/1 var(--font-body); letter-spacing: .3em; color: var(--fg-accent); text-transform: uppercase; }
.label {
  display: inline-block; color: var(--cocoa-800);
  font: 700 12px/1.3 var(--font-body); letter-spacing: .14em; text-transform: uppercase;
  text-decoration: underline; text-decoration-color: var(--strawberry-500);
  text-decoration-thickness: 2px; text-underline-offset: 6px;
}
.label--light { color: var(--strawberry-300); }
.tag {
  display: inline-block; color: var(--cocoa-800); font: 700 14px/1.3 var(--font-body);
  text-decoration: underline; text-decoration-color: var(--strawberry-500);
  text-decoration-thickness: 2px; text-underline-offset: 6px;
}
.h1 { font: 500 clamp(36px, 4.4vw, 56px)/1.1 var(--font-body); letter-spacing: -.02em; color: var(--cocoa-700); text-wrap: pretty; }
.h2 { font: 500 clamp(34px, 4vw, 52px)/1.1 var(--font-body); letter-spacing: -.02em; color: var(--cocoa-700); text-wrap: pretty; }
.h2--sm { font-size: 38px; }
.accent { color: var(--strawberry-700); }
.note { font: 600 32px/1 var(--font-note); color: var(--strawberry-700); transform: rotate(-2deg); display: inline-block; }
.lead { font-size: 18px; line-height: 1.6; color: var(--fg-2); max-width: 540px; text-wrap: pretty; }
.body { font-size: 17px; line-height: 1.6; color: var(--fg-2); text-wrap: pretty; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 54px; padding: 0 30px; border: none; border-radius: 999px;
  background: var(--strawberry-500); color: var(--cocoa-900);
  font: 700 17px/1 var(--font-body); text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background 140ms var(--ease-soft);
}
.btn:hover { background: var(--strawberry-400); color: var(--cocoa-900); }
.btn--sm { height: 50px; padding: 0 26px; font-size: 16px; }
.btn--cocoa { background: var(--cocoa-700); color: var(--cocoa-50); }
.btn--cocoa:hover { background: var(--cocoa-800); color: var(--cocoa-50); }
.link-btn {
  display: inline-flex; align-items: center; height: 54px; padding: 0 6px;
  color: var(--cocoa-700); font: 700 17px/1 var(--font-body);
  text-decoration: underline; text-decoration-color: var(--strawberry-500);
  text-decoration-thickness: 2px; text-underline-offset: 6px; background: none; border: none; cursor: pointer;
}
.link-btn:hover { color: var(--strawberry-700); }
.link-btn--sm { height: 44px; font-size: 16px; }

/* ---------- Media frames ---------- */
.frame { overflow: hidden; background: var(--strawberry-100); border-radius: 24px; }
.frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.frame--arch { border-radius: 999px 999px 28px 28px; }
.frame--round { border-radius: 50%; aspect-ratio: 1; }
.doodle { display: block; pointer-events: none; position: absolute; }

/* ---------- Header ---------- */
.site-header { position: sticky; top: 0; z-index: 20; background: rgba(255, 246, 236, .96); border-bottom: 2px solid var(--border-1); }
.site-header__inner { max-width: 1200px; margin: 0 auto; padding: 12px 24px; display: flex; align-items: center; gap: 24px; }
.brand { display: flex; align-items: center; gap: 8px; font: 400 40px/1 var(--font-logo); color: var(--cocoa-700); text-decoration: none; }
.brand:hover { color: var(--cocoa-700); }
.brand img { width: 48px; height: 56px; display: block; transform: rotate(-4deg); }
.site-nav { display: flex; gap: 4px; margin-left: auto; }
.site-nav a {
  display: flex; align-items: center; height: 40px; padding: 0 10px;
  color: var(--cocoa-700); font: 700 15px/1 var(--font-body);
  text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 2px; text-underline-offset: 8px;
}
.site-nav a:hover { color: var(--strawberry-700); }
.site-nav a[aria-current="page"] { text-decoration-color: var(--strawberry-500); }
.social { display: flex; gap: 6px; }
.social a {
  width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
  border-radius: 50%; color: var(--cocoa-700); font-size: 20px; text-decoration: none;
}
.social a:hover { color: var(--strawberry-700); }
.menu-toggle {
  display: none; margin-left: auto; width: 48px; height: 48px; border: none; background: none;
  color: var(--cocoa-700); font-size: 28px; align-items: center; justify-content: center; cursor: pointer;
}
@media (max-width: 759px) {
  .site-header__inner { padding: 8px 16px; gap: 8px; flex-wrap: wrap; }
  .brand { font-size: 34px; }
  .brand img { width: 38px; height: 44px; }
  .menu-toggle { display: flex; }
  .site-header .site-nav, .site-header .social { display: none; }
  .site-header.is-open .site-nav {
    display: flex; flex-direction: column; gap: 2px; width: 100%;
    margin: 0 -16px; padding: 4px 16px 0; width: calc(100% + 32px); border-top: 2px solid var(--border-1);
  }
  .site-header.is-open .site-nav a { height: 52px; padding: 0 4px; font-size: 20px; font-weight: 600; }
  .site-header.is-open .social { display: flex; padding-bottom: 16px; }
  .site-header.is-open .social a { width: 48px; height: 48px; font-size: 24px; }
}

/* ---------- Footer ---------- */
.site-footer { background: var(--cocoa-700); color: var(--cocoa-50); padding: 40px 24px 56px; }
.footer-doodles { max-width: 1200px; margin: 0 auto 36px; display: flex; justify-content: space-between; gap: 12px; opacity: .55; overflow: hidden; }
.footer-doodles img { display: block; width: 64px; flex-shrink: 0; pointer-events: none; }
.footer-doodles img:nth-child(odd) { transform: rotate(-6deg); }
.footer-doodles img:nth-child(even) { transform: rotate(6deg); }
.footer-main { max-width: 1200px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 40px; align-items: center; justify-content: space-between; }
.footer-brand { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 24px; }
.footer-brand__text { display: flex; flex-direction: column; gap: 6px; max-width: 360px; flex: 1 1 220px; min-width: 0; }
.footer-brand__title { font: 500 24px/1.2 var(--font-body); letter-spacing: -.01em; }
.footer-brand__sub { font-size: 14px; color: var(--cocoa-200); }
.site-footer .social a { width: 46px; height: 46px; color: var(--cocoa-50); font-size: 22px; }
.site-footer .social a:hover { color: var(--strawberry-300); }

/* Round "Cakes by Milky" badge */
.badge {
  width: 110px; height: 110px; flex-shrink: 0; border-radius: 50%; background: var(--strawberry-500);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
}
.badge__top { font: 700 7px/1 var(--font-body); letter-spacing: .3em; padding-left: .3em; color: var(--cocoa-700); }
.badge__name { font: 400 47px/.85 var(--font-logo); color: var(--cocoa-700); }
.badge__bottom { font: 600 6px/1 var(--font-body); letter-spacing: .25em; padding-left: .25em; color: var(--cocoa-50); }

/* ---------- Layout helpers ---------- */
.wrap { position: relative; max-width: 1200px; margin: 0 auto; padding-left: 24px; padding-right: 24px; }
.stack { display: flex; flex-direction: column; }

/* ======================================================
   HOME
   ====================================================== */
.hero { position: relative; max-width: 1280px; margin: 0 auto; padding: 56px 24px 80px; display: flex; flex-wrap: wrap; gap: 40px; align-items: center; }
.hero__copy { flex: 1 1 min(100%, 280px); display: flex; flex-direction: column; gap: 24px; align-items: flex-start; }
.hero__ctas { display: flex; gap: 12px; flex-wrap: wrap; }
.hero__love { display: flex; align-items: center; gap: 10px; }
.hero__love img { width: 49px; transform: rotate(-10deg); }
.hero__love span { font: 600 30px/1 var(--font-note); color: var(--strawberry-700); transform: rotate(-2deg); }
.hero__media { flex: 1.6 1 min(100%, 400px); max-width: 760px; position: relative; display: grid; grid-template-columns: 1.25fr 1fr; gap: 18px; align-items: end; }
.hero__media .frame { border-radius: 28px; }
.hero__media .frame--arch { aspect-ratio: 4/5; border-radius: 999px 999px 28px 28px; }
.hero__media .frame--arch img { object-position: 60% 50%; }
.hero__media .frame--round { border-radius: 50%; aspect-ratio: 1; }
.hero__media .frame--round img { object-position: 50% 40%; }
.hero__side { display: flex; flex-direction: column; gap: 20px; }
.hero__side .frame:last-child { aspect-ratio: 3/4; }
.hero__badge { position: absolute; bottom: -28px; left: 42%; width: 118px; height: 118px; transform: rotate(-10deg); box-shadow: 0 0 0 6px var(--bg-page); }
.hero__badge .badge__name { font-size: 50px; }

/* Floral band */
.band-pink { background: var(--strawberry-100); margin-top: 24px; }
.floral { padding-top: clamp(48px, 7vw, 72px); padding-bottom: clamp(56px, 7vw, 80px); display: flex; flex-direction: column; gap: 28px; }
.floral__row { display: flex; flex-wrap: wrap; gap: 40px; align-items: center; }
.floral__copy { flex: 1 1 260px; display: flex; flex-direction: column; gap: 20px; align-items: flex-start; }
.floral__copy .body { max-width: 460px; }
.floral__tags { display: flex; flex-wrap: wrap; gap: 10px 22px; }
.floral__grid { flex: 2 1 min(100%, 440px); position: relative; display: grid; grid-template-columns: 1.1fr 1fr .9fr; grid-auto-rows: 250px; gap: 16px; }
.floral__grid .tall { grid-row: span 2; }
.floral__grid .frame--round { align-self: center; }
.floral__strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); gap: 16px; }
.floral__strip .frame { aspect-ratio: 4/3; }
@media (max-width: 759px) { .floral__grid { grid-auto-rows: 150px; } }

/* Weddings */
.weddings { padding-top: clamp(56px, 8vw, 96px); padding-bottom: 104px; display: flex; flex-direction: column; align-items: center; gap: 40px; }
.section-head { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; max-width: 640px; }
.section-head .body { max-width: 560px; }
.wedding-row { width: 100%; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: 14px; align-items: end; }
.cap-figure { display: flex; flex-direction: column; gap: 10px; align-items: center; position: relative; width: 100%; }
.cap-figure .frame { width: 100%; background: var(--cocoa-100); border-radius: 28px; }
.cap-figure .frame--arch { border-radius: 999px 999px 28px 28px; }
.cap-figure figcaption { font: 700 24px/1 var(--font-note); color: var(--cocoa-700); text-align: center; }
.ar-3-5 { aspect-ratio: 3/5; }
.ar-3-4 { aspect-ratio: 3/4; }
.wedding-wide .frame { aspect-ratio: 16/9; max-height: 560px; border-radius: 32px; }

/* Fondant (dark) */
.fondant { position: relative; overflow: hidden; background: var(--cocoa-700); padding: clamp(56px, 9vw, 104px) 24px; }
.fondant__inner { position: relative; max-width: 1200px; margin: 0 auto; display: flex; flex-direction: column; gap: 48px; }
.fondant__head { display: flex; flex-direction: column; gap: 18px; align-items: flex-start; max-width: 700px; }
.fondant__head .h2 { color: var(--cocoa-50); }
.fondant__head .note { color: var(--butter-500); }
.fondant__head .body { color: var(--cocoa-200); max-width: 520px; }
.polaroids { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: 20px; }
.polaroid { background: var(--white); border-radius: 24px; padding: 12px 12px 14px; display: flex; flex-direction: column; gap: 10px; box-shadow: 0 14px 34px rgba(0, 0, 0, .25); }
.polaroid .frame { aspect-ratio: 3/4; border-radius: 16px; }
.polaroid figcaption { font: 700 24px/1 var(--font-note); color: var(--cocoa-700); text-align: center; }
.polaroid:nth-child(1) { transform: rotate(-2.5deg); }
.polaroid:nth-child(2) { transform: rotate(2deg); }
.polaroid:nth-child(3) { transform: rotate(-1.5deg); }
.polaroid:nth-child(4) { transform: rotate(2.5deg); }
.fondant__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 20px; align-items: stretch; }
.fondant__row .frame { aspect-ratio: 4/3; border-radius: 28px; }
.dream-card { background: var(--butter-500); border-radius: 28px; padding: 32px; display: flex; flex-direction: column; justify-content: center; gap: 14px; align-items: flex-start; position: relative; }
.dream-card__title { font: 400 28px/1.15 var(--font-display); color: var(--cocoa-800); padding-right: 60px; }
.dream-card__text { font-size: 16px; line-height: 1.55; color: var(--cocoa-800); }
.dream-card .btn { height: 46px; padding: 0 22px; font-size: 15px; }

/* Cupcakes & cookies */
.treats { padding-top: clamp(56px, 8vw, 96px); padding-bottom: 16px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); gap: 24px; }
.treat-card { position: relative; border-radius: 40px; padding: clamp(22px, 4vw, 36px); display: flex; flex-direction: column; gap: 22px; }
.treat-card--pink { background: var(--bg-tint); }
.treat-card--butter { background: var(--butter-100); }
.treat-card__head { display: flex; flex-direction: column; gap: 8px; padding-right: clamp(70px, 14vw, 110px); }
.treat-card__head h2 { font: 500 38px/1.1 var(--font-body); letter-spacing: -.02em; color: var(--cocoa-800); }
.treat-card__head .note { font-size: 26px; line-height: 1.1; color: var(--strawberry-800); transform: none; }
.treat-card__head p { margin-top: 6px; font-size: 16px; color: var(--cocoa-800); }
.treat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.treat-grid .frame { aspect-ratio: 1; border-radius: 22px; }
.treat-grid .frame--wide { grid-column: span 2; aspect-ratio: 2/1; }

/* Custom CTA (dark card) */
.cta-dark { background: var(--cocoa-700); border-radius: 40px; padding: clamp(24px, 5vw, 48px); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 44px; align-items: center; }
.cta-dark__copy { display: flex; flex-direction: column; gap: 18px; align-items: flex-start; }
.cta-dark__eyebrow { display: flex; align-items: center; gap: 10px; font: 700 12px/1 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--strawberry-300); }
.cta-dark__eyebrow img { width: 35px; }
.cta-dark .h2 { font-size: clamp(32px, 3.6vw, 44px); color: var(--cocoa-50); }
.cta-dark .body { color: var(--cocoa-200); max-width: 440px; }
.cta-dark__media { position: relative; }
.cta-dark__media .frame { aspect-ratio: 5/3; border-radius: 28px; }
.cta-dark__media .yes { position: absolute; bottom: -18px; left: -10px; z-index: 1; font: 700 28px/1 var(--font-note); color: var(--butter-500); transform: rotate(-5deg); }

/* How it works */
.steps-section { padding-bottom: 88px; display: flex; flex-direction: column; gap: 36px; }
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 28px; }
.step { display: flex; gap: 18px; align-items: flex-start; }
.step__icon { position: relative; width: 104px; height: 104px; flex-shrink: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.step__icon img { width: 76px; height: 76px; }
.step__n { position: absolute; top: -6px; right: -4px; font: 700 30px/1 var(--font-note); color: var(--strawberry-700); }
.step__title { font: 600 20px/1.2 var(--font-body); color: var(--cocoa-700); display: block; margin-bottom: 6px; }
.step__text { font-size: 15px; line-height: 1.55; color: var(--fg-2); }

/* ======================================================
   FLAVORS
   ====================================================== */
.page-hero { padding-top: 64px; padding-bottom: 40px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 40px; align-items: center; }
.page-hero__copy { display: flex; flex-direction: column; gap: 16px; }
.page-hero__note { display: flex; align-items: center; gap: 10px; }
.page-hero__note img { width: 41px; }
.page-hero__note .note { font-size: 38px; }
.page-hero__media { position: relative; display: flex; gap: 18px; justify-content: flex-end; align-items: center; }
.page-hero__media .frame--round { width: min(46%, 240px); transform: rotate(-4deg); }
.page-hero__media .frame--arch { width: min(38%, 190px); aspect-ratio: 3/4; transform: rotate(3deg); }

.collection { padding-top: 32px; padding-bottom: 40px; display: flex; flex-direction: column; gap: 28px; }
.collection__head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.collection__head > img { width: 60px; height: 60px; }
.collection__head h2 { font: 500 clamp(28px, 3.4vw, 38px)/1.1 var(--font-body); letter-spacing: -.02em; color: var(--cocoa-700); }
.collection__rule { flex: 1; min-width: 40px; border-top: 3px dotted var(--cocoa-300); }
.collection__note { font: 700 12px/1 var(--font-body); letter-spacing: .22em; text-transform: uppercase; color: var(--fg-accent); }
.flavor-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 20px; }
.flavor-card { position: relative; background: var(--white); border-radius: 32px; padding: 26px 28px; display: flex; flex-direction: column; gap: 10px; box-shadow: var(--shadow-sm); }
.flavor-card--butter { background: var(--butter-100); }
.flavor-card > img { position: absolute; top: 14px; right: 16px; width: 64px; height: 64px; opacity: .9; }
.flavor-card h3 { margin: 0; font: 600 21px/1.2 var(--font-body); letter-spacing: -.01em; color: var(--cocoa-700); padding-right: 72px; }
.flavor-card p { font-size: 15.5px; line-height: 1.55; color: var(--fg-2); text-wrap: pretty; padding-right: 56px; }

.cta-strip { background: var(--cocoa-700); border-radius: 40px; padding: 40px 44px; display: flex; flex-wrap: wrap; gap: 24px; align-items: center; justify-content: space-between; }
.cta-strip__copy { display: flex; flex-direction: column; gap: 8px; max-width: 560px; }
.cta-strip__title { display: flex; align-items: center; gap: 12px; font: 500 30px/1.15 var(--font-body); letter-spacing: -.02em; color: var(--cocoa-50); }
.cta-strip__title img { width: 64px; }
.cta-strip__text { font-size: 16px; line-height: 1.55; color: var(--cocoa-200); }
.cta-strip .btn { height: 52px; padding: 0 28px; font-size: 16px; }

/* ======================================================
   GALLERY
   ====================================================== */
.gallery { padding-top: 64px; padding-bottom: 88px; display: flex; flex-direction: column; gap: 32px; }
.gallery__head { display: flex; flex-direction: column; gap: 12px; }
.gallery__title { display: flex; align-items: flex-end; gap: 16px; }
.filters { display: flex; flex-wrap: wrap; gap: 4px 8px; align-self: flex-start; }
.filters button {
  height: 40px; padding: 0 10px; border: none; background: none; color: var(--cocoa-700);
  font: 700 15px/1 var(--font-body); cursor: pointer;
  text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 2px; text-underline-offset: 8px;
}
.filters button:hover { color: var(--strawberry-700); }
.filters button[aria-pressed="true"] { text-decoration-color: var(--strawberry-500); }
.masonry { columns: 3 280px; column-gap: 20px; }
.masonry figure {
  break-inside: avoid; margin: 0 0 20px; background: var(--white); border-radius: 28px; padding: 12px 12px 16px;
  box-shadow: var(--shadow-sm); cursor: zoom-in; display: flex; flex-direction: column; gap: 12px;
  transition: transform 220ms var(--ease-soft);
}
.masonry figure:hover { transform: translateY(-3px); }
.masonry figure[hidden] { display: none; }
.masonry img { width: 100%; border-radius: 20px; display: block; }
.masonry figcaption { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 0 6px; }
.masonry figcaption span:first-child { font: 600 17px/1.25 var(--font-body); color: var(--cocoa-700); }
.masonry figcaption .tag { font-size: 12px; white-space: nowrap; }

.lightbox { position: fixed; inset: 0; z-index: 50; background: rgba(47, 30, 24, .6); display: flex; align-items: center; justify-content: center; padding: 32px; cursor: zoom-out; }
.lightbox[hidden] { display: none; }
.lightbox__card { background: var(--white); border-radius: 32px; padding: 14px 14px 20px; max-width: min(900px, 100%); max-height: 100%; display: flex; flex-direction: column; gap: 14px; box-shadow: var(--shadow-lg); }
.lightbox__card img { max-width: 100%; max-height: 72vh; object-fit: contain; border-radius: 22px; display: block; }
.lightbox__meta { display: flex; justify-content: space-between; align-items: center; padding: 0 8px; gap: 12px; }
.lightbox__title { font: 500 22px/1.2 var(--font-body); letter-spacing: -.01em; color: var(--cocoa-700); }
.lightbox__cat { font-size: 14px; color: var(--fg-2); }

/* ======================================================
   CONTACT
   ====================================================== */
.contact-hero { padding-top: 64px; padding-bottom: 40px; display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.contact-hero .h1 { max-width: 720px; }
.contact-hero .note { font-size: 30px; }
.contact-hero .lead { max-width: 580px; }
.contact-cards { padding-top: 16px; padding-bottom: 64px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 24px; }
.contact-card { border-radius: 32px; padding: clamp(22px, 4vw, 36px); display: flex; flex-direction: column; gap: 16px; align-items: flex-start; box-shadow: var(--shadow-sm); }
.contact-card--pink { background: var(--strawberry-100); }
.contact-card--butter { background: var(--butter-100); }
.icon-circle { width: 64px; height: 64px; border-radius: 50%; background: var(--white); display: flex; align-items: center; justify-content: center; font-size: 30px; color: var(--cocoa-700); }
.contact-card h2 { font: 500 30px/1.1 var(--font-body); letter-spacing: -.02em; color: var(--cocoa-800); }
.contact-card .note { font-size: 24px; line-height: 1.1; color: var(--strawberry-800); transform: none; }
.contact-card p { font-size: 16px; line-height: 1.6; color: var(--cocoa-800); max-width: 420px; }
.include { padding-top: 16px; padding-bottom: 64px; display: flex; flex-direction: column; gap: 28px; }
.include-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 16px; }
.include-card { background: var(--white); border-radius: 28px; padding: 24px; display: flex; gap: 16px; align-items: flex-start; box-shadow: var(--shadow-sm); }
.include-card img { width: 52px; height: 52px; flex-shrink: 0; }
.include-card strong { display: block; font: 600 19px/1.25 var(--font-body); color: var(--cocoa-700); margin-bottom: 4px; }
.include-card span { font-size: 15px; line-height: 1.55; color: var(--fg-2); }
.location { display: flex; flex-wrap: wrap; gap: 16px 28px; align-items: center; background: var(--white); border-radius: 32px; padding: 28px 32px; box-shadow: var(--shadow-sm); }
.location__icon { width: 56px; height: 56px; flex-shrink: 0; border-radius: 50%; background: var(--strawberry-100); display: flex; align-items: center; justify-content: center; font-size: 26px; color: var(--strawberry-700); }
.location__title { display: block; font: 500 26px/1.15 var(--font-body); letter-spacing: -.02em; color: var(--cocoa-700); margin-bottom: 4px; }

@media (max-width: 759px) {
  .gallery > .doodle, .page-hero > .doodle { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .masonry figure, .btn { transition: none; }
}