/* ============================================================
   sunnybunny.life — local replica (forensic 1:1, fluid + mobile)
   Desktop values measured from live site @1440px; everything
   below scales fluidly and keeps the original 2-col gallery
   down to phones (matches the real site's mobile layout).
   ============================================================ */

@import url("../fonts/funnelsans.css");

:root {
  --bg:          #141414;
  --ink:         #ece8df;
  --ink-soft:    #f6f4f0;
  --accent:      #ff1493;
  --accent-soft: #f8bbd0;
  --pill-text:   #141414;
  --divider:     rgba(236,232,223,0.12);

  --font: "Funnel Sans", "Funnel Sans Placeholder", system-ui, sans-serif;

  /* fluid page padding: 16px (mobile, measured) → 28px (desktop, measured) */
  --pad: clamp(16px, 1.95vw, 28px);
  --maxw: 1440px;
  /* fluid gallery gutter: ~16px phone → 24px desktop (24 measured) */
  --gap: clamp(14px, 1.7vw, 24px);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.02em;
  overflow-x: hidden;
}

img { display: block; width: 100%; height: 100%; object-fit: cover; }
a { color: inherit; text-decoration: none; }

.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding-inline: var(--pad);
}

/* ---------- Giant wordmark — always fills the content width ---------- */
.wordmark {
  color: var(--accent);
  font-weight: 700;
  letter-spacing: -0.06em;
  line-height: 1.09;
  /* fills content width: 0.1135 of (viewport − padding), capped */
  font-size: min(calc((100vw - 2 * var(--pad)) * 0.1135), 163px);
  white-space: nowrap;
}

/* ---------- Header ---------- */
.site-header { padding-top: clamp(40px, 4.5vw, 64px); }

.tagline {
  margin-top: clamp(14px, 1.7vw, 25px);
  margin-left: 56.6%;                       /* x812/1384 (desktop)   */
  color: var(--accent-soft);
  font-weight: 500;
  font-size: clamp(15px, 1.7vw, 24px);
  letter-spacing: -0.04em;
  line-height: 1.2;
}
.tagline span { display: block; }
.tagline span + span { margin-top: clamp(10px, 1.4vw, 20px); }

/* ---------- Gallery (3 custom rows, 2-col at all sizes) ---------- */
.gallery { margin-top: clamp(56px, 6.6vw, 95px); }

.row {
  display: grid;
  gap: var(--gap);
  margin-bottom: clamp(36px, 4.4vw, 64px);
  align-items: start;
}
.row.split { grid-template-columns: 856fr 504fr; }  /* row 1 */
.row.even  { grid-template-columns: 1fr 1fr; }        /* rows 2 & 3 */

.tile { overflow: hidden; }
.tile img {
  border-radius: clamp(5px, 0.6vw, 8px);
  aspect-ratio: var(--ar, 4 / 3);
  transition: transform .9s cubic-bezier(.16,1,.3,1);
}
.tile:hover img { transform: scale(1.035); }

/* per-image aspect ratios (measured w×h, desktop crops) */
.ar-1 { --ar: 856 / 636; }
.ar-2 { --ar: 504 / 451; }
.ar-3 { --ar: 680 / 475; }
.ar-4 { --ar: 680 / 635; }
.ar-5 { --ar: 680 / 635; }
.ar-6 { --ar: 680 / 635; }

.cap { margin-top: clamp(8px, 0.9vw, 12px); }
.cap .place {
  display: block;
  font-weight: 500;
  font-size: clamp(15px, 1.7vw, 24px);
  letter-spacing: -0.04em;
  line-height: 1.2;
  color: var(--ink);
}
.cap .sub {
  display: block;
  margin-top: 4px;
  font-weight: 400;
  font-size: clamp(11px, 1.15vw, 16px);
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--ink);
}

/* ---------- Statement (full width, all cream) ---------- */
.statement {
  margin: clamp(80px, 10.7vw, 154px) 0 0;
  font-weight: 500;
  font-size: clamp(30px, 5vw, 72px);
  line-height: 1.1;
  letter-spacing: -0.05em;
  color: var(--ink);
}

/* cream rounded badge (the @handles) */
.badge {
  display: inline-block;
  padding: clamp(9px, 0.8vw, 11px) clamp(16px, 1.7vw, 24px);
  border-radius: 4px;
  background: var(--ink);
  color: var(--pill-text);
  font-size: clamp(13px, 1.15vw, 16px);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.2;
  transition: transform .25s ease, opacity .25s ease;
}
.badge:hover { transform: translateY(-2px); opacity: .9; }

/* ---------- About ---------- */
.about {
  margin-top: clamp(56px, 5.6vw, 80px);
  display: grid;
  grid-template-columns: minmax(0, 435px) minmax(0, 438px);
  gap: clamp(24px, 2.8vw, 40px);
  align-items: start;
  justify-content: start;
}
.portrait img {
  border-radius: 6px;
  aspect-ratio: 435 / 471;
  filter: grayscale(100%) contrast(1.04);
}
.about-text { display: flex; flex-direction: column; align-items: flex-start; gap: clamp(20px, 2vw, 28px); }
.bio {
  font-weight: 500;
  font-size: clamp(17px, 1.7vw, 24px);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--ink-soft);
}
.bio p + p { margin-top: 1.2em; }

/* portrait + "based in" stacked in the left column */
.about-left { display: flex; flex-direction: column; }
.based {
  margin-top: clamp(14px, 1.4vw, 18px);
  font-size: clamp(16px, 1.4vw, 20px);
  font-weight: 400;
  letter-spacing: -0.04em;
  line-height: 1.2;
  color: var(--ink);
}

/* centered Contact us button */
.contact-cta {
  margin-top: clamp(40px, 5vw, 72px);
  display: flex;
  justify-content: center;
}

.email-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: clamp(11px, 1vw, 14px) clamp(20px, 1.8vw, 26px);
  border-radius: 4px;
  background: var(--accent);
  color: #141414;
  font-size: clamp(15px, 1.3vw, 18px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1;
  transition: transform .25s ease, box-shadow .25s ease;
}
.email-btn::before { content: "✉"; font-size: 1.05em; }
.email-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(255,20,147,.28); }
.email-btn { border: 0; cursor: pointer; font-family: inherit; }

/* ---------- Contact popup ---------- */
.modal {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(10,10,10,.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: modalFade .25s ease;
}
.modal[hidden] { display: none; }
@keyframes modalFade { from { opacity: 0; } to { opacity: 1; } }

.modal-card {
  position: relative;
  width: min(440px, 100%);
  background: #1c1c1c;
  border: 1px solid var(--divider);
  border-radius: 14px;
  padding: clamp(28px, 4vw, 44px);
  text-align: center;
  box-shadow: 0 30px 80px rgba(0,0,0,.55);
  animation: modalPop .3s cubic-bezier(.16,1,.3,1);
}
@keyframes modalPop { from { opacity: 0; transform: translateY(16px) scale(.97); } to { opacity: 1; transform: none; } }

.modal-close {
  position: absolute;
  top: 14px; right: 16px;
  width: 34px; height: 34px;
  border: 0; border-radius: 50%;
  background: transparent;
  color: var(--ink);
  font-size: 24px; line-height: 1;
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
.modal-close:hover { background: rgba(236,232,223,.1); color: var(--accent); }

.modal-eyebrow {
  display: block;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-soft);
}
.modal-email {
  display: block;
  margin-top: 14px;
  font-size: clamp(20px, 3vw, 30px);
  font-weight: 700;
  letter-spacing: -0.04em;
  color: var(--accent);
  word-break: break-all;
}
.modal-email:hover { text-decoration: underline; }

.modal-actions {
  margin-top: 26px;
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}
.modal-btn {
  border: 1px solid var(--divider);
  background: transparent;
  color: var(--ink);
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.02em;
  padding: 11px 22px;
  border-radius: 4px;
  cursor: pointer;
  transition: transform .2s ease, background .2s ease, color .2s ease, box-shadow .2s ease;
}
.modal-btn:hover { transform: translateY(-2px); }
.modal-btn.primary { background: var(--accent); color: #141414; border-color: var(--accent); font-weight: 600; }
.modal-btn.primary:hover { box-shadow: 0 10px 26px rgba(255,20,147,.3); }
.modal-btn.copied { background: var(--ink); color: #141414; border-color: var(--ink); }

/* ---------- Featured photographer (Dạ Miêu) ---------- */
.photographer {
  margin-top: clamp(64px, 9vw, 130px);
  padding-top: clamp(40px, 5vw, 72px);
  border-top: 1px solid var(--divider);
}
.ph-eyebrow {
  display: block;
  font-size: clamp(13px, 1.1vw, 16px);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-soft);
}
.ph-name {
  margin-top: 10px;
  font-weight: 700;
  font-size: clamp(40px, 7vw, 96px);
  line-height: 1;
  letter-spacing: -0.05em;
  color: var(--accent);
}

.ph-intro {
  margin-top: clamp(28px, 3.4vw, 48px);
  display: grid;
  grid-template-columns: minmax(0, 360px) minmax(0, 440px);
  gap: clamp(24px, 3vw, 48px);
  align-items: end;
  justify-content: start;
}
.ph-portrait { overflow: hidden; border-radius: 8px; }
.ph-portrait img { aspect-ratio: 4 / 5; transition: transform .9s cubic-bezier(.16,1,.3,1); }
.ph-portrait:hover img { transform: scale(1.04); }
.ph-bio {
  font-weight: 500;
  font-size: clamp(17px, 1.6vw, 22px);
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--ink-soft);
}
.ph-bio .meta {
  display: block;
  margin-top: 14px;
  font-size: clamp(14px, 1.2vw, 16px);
  font-weight: 400;
  color: var(--ink);
  opacity: .8;
}
.ph-bio .badge { margin-top: 20px; }

.ph-grid {
  margin-top: clamp(28px, 3.4vw, 48px);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap);
}
.ph-grid .tile img {
  border-radius: 8px;
  aspect-ratio: 4 / 5;
  transition: transform .9s cubic-bezier(.16,1,.3,1);
}
.ph-grid .tile:hover img { transform: scale(1.045); }

@media (max-width: 760px) {
  .ph-intro { grid-template-columns: 1fr; align-items: start; }
  .ph-portrait img { max-width: 60vw; }
  .ph-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Footer ---------- */
.site-footer { margin-top: clamp(40px, 3vw, 44px); padding-bottom: 28px; }
.footer-divider { height: 1px; background: var(--divider); margin-top: 24px; }
.copyright {
  margin-top: 24px;
  font-size: clamp(13px, 1.1vw, 16px);
  letter-spacing: -0.02em;
  color: var(--ink);
}

/* ============================================================
   Responsive tweaks — keep 2-col gallery (matches original),
   restack only the about block where it would get too cramped.
   ============================================================ */
@media (max-width: 760px) {
  .tagline { margin-left: 0; }                 /* full-width-left on phones */
  .about {
    grid-template-columns: 1fr;                /* portrait above bio */
    gap: clamp(20px, 5vw, 28px);
  }
  .portrait img { max-width: 60vw; aspect-ratio: 435 / 471; }
}
@media (max-width: 420px) {
  .portrait img { max-width: 70vw; }
}

/* ---------- Dynamic scroll-reveal (progressive, no-JS safe) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s cubic-bezier(.16,1,.3,1); }
  .reveal.in { opacity: 1; transform: none; }
}