/* ============================================================
   Home_Test — Bottega53-style landing
   Dark downward-scroll photo grid, blend-mode chrome,
   full-screen MENU, gallery-type "+" menu, CONTACT form.
   ============================================================ */

:root {
  --h-bg: #0a0a0a;
  --h-ink: #ffffff;
  --h-grid-gap: 5px;
  --h-sans: "Inter", system-ui, sans-serif;
  --h-serif: "Bodoni Moda", Georgia, serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--h-bg); color: var(--h-ink);
  font-family: var(--h-sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
#root { min-height: 100vh; }
img { display: block; }

/* ============================================================
   CHROME — fixed labels with blend-mode inversion
   ============================================================ */
.h-chrome-label {
  position: fixed; z-index: 60;
  font-family: var(--h-sans); font-weight: 800;
  font-size: 26px; letter-spacing: 0.04em; line-height: 1;
  color: #fff; mix-blend-mode: difference;
  background: none; border: 0; cursor: pointer; user-select: none;
  transition: opacity 220ms ease;
}
.h-chrome-label:hover { opacity: 0.6; }
.h-menu-btn { top: 30px; right: 30px; writing-mode: vertical-rl; }
.h-contact-btn { bottom: 30px; right: 30px; writing-mode: vertical-rl; transform: rotate(180deg); }

/* plus / cross button bottom-left — compact + bold */
.h-plus {
  position: fixed; bottom: 30px; left: 30px; z-index: 60;
  width: 132px; height: 132px; cursor: pointer;
  mix-blend-mode: difference;
  display: flex; align-items: center; justify-content: center;
  background: none; border: 0; padding: 0;
}
.h-plus svg { width: 100%; height: 100%; display: block; transition: transform 620ms cubic-bezier(0.6,0,0.2,1); }
.h-plus.open svg { transform: rotate(135deg); }
.h-plus svg line { stroke: #fff; stroke-width: 5; }

/* ============================================================
   LOGO — blend-mode wordmark
   ============================================================ */
.h-logo {
  position: fixed; top: 26px; left: 30px; z-index: 60;
  mix-blend-mode: difference; color: #fff; cursor: pointer; user-select: none;
}
.h-logo .lname { font-family: var(--h-sans); font-weight: 800; font-size: 26px; letter-spacing: 0.01em; line-height: 0.9; }
.h-logo .lsub { font-family: var(--h-sans); font-weight: 700; font-size: 8px; letter-spacing: 0.42em; margin-top: 3px; padding-left: 2px; }

/* ============================================================
   HOME GRID — downward scrolling photo gallery
   ============================================================ */
.h-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--h-grid-gap);
  padding: 0; transition: filter 520ms ease, opacity 520ms ease;
}
.h-tile { position: relative; overflow: hidden; aspect-ratio: 36 / 25; background: #161616; }
.h-tile.tall { aspect-ratio: 36 / 50; grid-row: span 2; }
.h-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform 1100ms cubic-bezier(0.2,0,0.2,1); }
.h-tile:hover img { transform: scale(1.045); }
.h-tile.bw img { filter: grayscale(1) contrast(1.03); }
.h-tile .cap {
  position: absolute; left: 18px; bottom: 16px; right: 18px; z-index: 2;
  display: flex; justify-content: space-between; align-items: flex-end; gap: 16px;
  opacity: 0; transform: translateY(6px); transition: opacity 320ms ease, transform 320ms ease;
}
.h-tile:hover .cap { opacity: 1; transform: translateY(0); }
.h-tile .cap .who { color: #fff; }
.h-tile .cap .who .n { font-family: var(--h-sans); font-weight: 700; font-size: 14px; letter-spacing: 0.06em; }
.h-tile .cap .who .v { font-family: var(--h-serif); font-style: italic; font-size: 13px; color: rgba(255,255,255,0.85); margin-top: 2px; }
.h-tile .cap .tag { font-family: var(--h-sans); font-weight: 700; font-size: 11px; letter-spacing: 0.14em; color: #fff; }
.h-tile .cap-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(0,0,0,0.55)); opacity: 0; transition: opacity 320ms; pointer-events: none; }
.h-tile:hover .cap-scrim { opacity: 1; }

/* grid dimmed when an overlay menu is open over it */
.h-grid.dim { filter: brightness(0.26) grayscale(0.4); }

/* spacer so content can scroll under fixed footer chrome */
.h-grid-foot { height: 12vh; }

/* ============================================================
   FULL-SCREEN MENU OVERLAY (main nav)
   ============================================================ */
.h-overlay {
  position: fixed; inset: 0; z-index: 80; background: #000;
  animation: hOverlayIn 520ms cubic-bezier(0.2,0,0.2,1);
}
@keyframes hOverlayIn { from { opacity: 0; clip-path: inset(0 0 100% 0); } to { opacity: 1; clip-path: inset(0 0 0 0); } }
.h-overlay .ov-logo { position: absolute; top: 26px; left: 30px; }
.h-overlay .ov-logo .lname { font-family: var(--h-sans); font-weight: 800; font-size: 26px; line-height: 0.9; }
.h-overlay .ov-logo .lsub { font-size: 8px; font-weight: 700; letter-spacing: 0.42em; margin-top: 3px; padding-left: 2px; color: rgba(255,255,255,0.7); }
.h-overlay .ov-close {
  position: absolute; top: 30px; right: 30px; writing-mode: vertical-rl;
  font-family: var(--h-sans); font-weight: 800; font-size: 26px; letter-spacing: 0.04em;
  background: none; border: 0; color: #fff; cursor: pointer; transition: opacity 200ms;
}
.h-overlay .ov-close:hover { opacity: 0.6; }

/* entrance animation */
@keyframes hRise {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* isolated hover: muted by default (via color), only the hovered item brightens.
   Default opacity stays 1 so the entrance fade owns opacity. */
.mm-items .mm-item {
  color: rgba(255,255,255,0.52); text-decoration: none; cursor: pointer; display: inline-block;
  transition: color 340ms cubic-bezier(0.2,0,0.2,1);
  animation: hRise 620ms cubic-bezier(0.2,0,0.2,1) both;
}
.mm-items .mm-item:hover { color: #fff; }

.mm-contact { position: absolute; top: 12vh; right: 74px; text-align: right; }
.mm-contact .big { font-family: var(--h-sans); font-weight: 800; font-size: clamp(50px, 8vw, 112px); line-height: 0.9; letter-spacing: -0.02em; }
.mm-socials { margin-top: 22px; display: flex; gap: 26px; justify-content: flex-end; }
.mm-socials .mm-item { font-family: var(--h-sans); font-weight: 700; font-size: 15px; letter-spacing: 0.08em; }

.mm-primary { position: absolute; left: 30px; bottom: 9vh; display: flex; flex-direction: column; }
.mm-primary .mm-item { font-family: var(--h-sans); font-weight: 800; font-size: clamp(54px, 9vw, 128px); line-height: 0.88; letter-spacing: -0.02em; }

.mm-secondary { position: absolute; right: 30px; bottom: 9vh; text-align: right; display: flex; flex-direction: column; gap: 6px; }
.mm-secondary .mm-item { font-family: var(--h-sans); font-weight: 800; font-size: clamp(22px, 2.4vw, 34px); line-height: 1.05; letter-spacing: -0.01em; }

.mm-foot { position: absolute; left: 30px; bottom: 26px; display: flex; gap: 26px; }
.mm-foot .mm-item { font-family: var(--h-sans); font-weight: 600; font-size: 11px; letter-spacing: 0.14em; color: rgba(255,255,255,0.4); }
.mm-foot .mm-item:hover { color: #fff; }

/* ============================================================
   GALLERY-TYPE MENU ("+" overlay) — list over dimmed grid
   ============================================================ */
.h-types {
  position: fixed; inset: 0; z-index: 70; pointer-events: none;
  animation: hFade 420ms ease;
}
@keyframes hFade { from { opacity: 0; } to { opacity: 1; } }
.h-types .types-list {
  position: absolute; right: 36px; top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column; align-items: flex-end; gap: 2px;
  pointer-events: auto;
}
.h-types .types-list .ty {
  font-family: var(--h-sans); font-weight: 800; font-size: clamp(34px, 5.2vw, 74px);
  line-height: 1.0; letter-spacing: -0.02em; color: rgba(255,255,255,0.55); cursor: pointer;
  background: none; border: 0; text-align: right;
  transition: color 340ms cubic-bezier(0.2,0,0.2,1);
  text-shadow: 0 2px 30px rgba(0,0,0,0.5);
  animation: hRise 560ms cubic-bezier(0.2,0,0.2,1) both;
}
.h-types .types-list .ty:hover { color: #fff; }

/* ============================================================
   CONTACT FORM OVERLAY
   ============================================================ */
.h-contact {
  position: fixed; inset: 0; z-index: 90; background: #efeeec; color: #1a1a1a;
  overflow-y: auto; animation: hOverlayIn 520ms cubic-bezier(0.2,0,0.2,1);
}
.h-contact .cf-inner { min-height: 100vh; padding: 12vh 5vw 6vh; display: flex; flex-direction: column; justify-content: center; }
.h-contact .cf-close {
  position: fixed; top: 30px; right: 30px; writing-mode: vertical-rl;
  font-family: var(--h-sans); font-weight: 800; font-size: 24px; letter-spacing: 0.04em;
  background: none; border: 0; color: #1a1a1a; cursor: pointer; z-index: 2; transition: opacity 200ms;
}
.h-contact .cf-close:hover { opacity: 0.55; }
.h-contact .cf-head { position: fixed; top: 26px; left: 30px; }
.h-contact .cf-head .lname { font-weight: 800; font-size: 24px; line-height: 0.9; }
.h-contact .cf-head .lsub { font-size: 8px; font-weight: 700; letter-spacing: 0.42em; margin-top: 3px; color: #888; }

.cf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 6vw; max-width: 1500px; margin: 0 auto; width: 100%; }
.cf-field { border-bottom: 1px solid rgba(0,0,0,0.18); position: relative; }
.cf-field.full { grid-column: 1 / -1; }
.cf-field input, .cf-field select, .cf-field textarea {
  width: 100%; background: transparent; border: 0; outline: none;
  font-family: var(--h-sans); font-weight: 700; font-size: clamp(20px, 2vw, 30px);
  letter-spacing: -0.01em; color: #1a1a1a; padding: 26px 0 18px;
  text-transform: uppercase;
}
.cf-field textarea { resize: none; min-height: 90px; }
.cf-field input::placeholder, .cf-field textarea::placeholder { color: #b3b1ad; text-transform: uppercase; }
.cf-field select { color: #b3b1ad; -webkit-appearance: none; appearance: none; cursor: pointer; }
.cf-field select.filled { color: #1a1a1a; }
.cf-field .chev { position: absolute; right: 2px; top: 50%; transform: translateY(-50%); color: #999; pointer-events: none; font-size: 13px; }

.cf-bottom { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; max-width: 1500px; margin: 40px auto 0; width: 100%; }
.cf-consent { display: flex; gap: 12px; max-width: 520px; }
.cf-consent input { margin-top: 3px; width: 16px; height: 16px; flex: 0 0 auto; accent-color: #1a1a1a; }
.cf-consent label { font-family: var(--h-sans); font-weight: 600; font-size: 10.5px; letter-spacing: 0.04em; line-height: 1.5; color: #8d8b87; text-transform: uppercase; }
.cf-send {
  display: flex; align-items: center; gap: 22px; cursor: pointer; background: none; border: 0;
  font-family: var(--h-sans); font-weight: 800; font-size: 26px; letter-spacing: 0.04em; color: #1a1a1a;
  transition: gap 240ms ease;
}
.cf-send:hover { gap: 34px; }
.cf-send svg { width: 80px; height: 26px; }
.cf-sent { text-align: center; max-width: 620px; margin: 0 auto; }
.cf-sent h2 { font-family: var(--h-serif); font-style: italic; font-weight: 500; font-size: clamp(40px, 6vw, 84px); line-height: 1; margin-bottom: 24px; }
.cf-sent p { font-size: 16px; color: #555; line-height: 1.5; }

@media (max-width: 820px) {
  .h-grid { grid-template-columns: repeat(2, 1fr); }
  .cf-grid { grid-template-columns: 1fr; }
  .mm-primary .mm-item, .mm-contact .big { font-size: 14vw; }
}

/* ============================================================
   PHONE — chrome clears status bar, compact controls
   ============================================================ */
@media (max-width: 520px) {
  .h-grid { grid-template-columns: repeat(2, 1fr); gap: 3px; }
  .h-tile { aspect-ratio: 4 / 5; }
  .h-tile.tall { aspect-ratio: 4 / 5; grid-row: span 1; }
  /* keep faces in frame when portrait covers crop to 4:5 */
  .h-tile img { object-position: 50% 30%; }
  /* captions: always visible (no hover on touch) */
  .h-tile .cap { left: 12px; right: 12px; bottom: 12px; opacity: 1; transform: none; }
  .h-tile .cap-scrim { opacity: 1; }
  .h-tile .cap .who .n { font-size: 11px; }
  .h-tile .cap .who .v { font-size: 10px; }

  /* push top chrome below the notch / status bar */
  .h-logo { top: 58px; left: 18px; }
  .h-logo .lname { font-size: 18px; }
  .h-logo .lsub { font-size: 7px; letter-spacing: 0.34em; }
  .h-chrome-label { font-size: 17px; letter-spacing: 0.03em; }
  .h-menu-btn { top: 58px; right: 18px; }
  .h-contact-btn { bottom: 26px; right: 18px; }

  /* compact "+" so it doesn't dominate a small screen */
  .h-plus { width: 58px; height: 58px; bottom: 18px; left: 18px; }
  .h-plus svg line { stroke-width: 6; }

  /* menu overlay typography reflow */
  .h-overlay .ov-logo { top: 58px; left: 18px; }
  .h-overlay .ov-logo .lname { font-size: 18px; }
  .h-overlay .ov-close { top: 58px; right: 18px; font-size: 17px; }
  .mm-contact { top: 92px; right: 18px; left: 18px; text-align: left; }
  .mm-contact .big { font-size: 16vw; }
  .mm-socials { justify-content: flex-start; gap: 18px; margin-top: 16px; }
  .mm-primary { left: 18px; bottom: 13vh; }
  .mm-primary .mm-item { font-size: 17vw; }
  .mm-secondary { display: none; }
  .mm-foot { left: 18px; bottom: 20px; gap: 18px; }

  /* gallery-type list */
  .h-types .types-list { right: 20px; gap: 0; }
  .h-types .types-list .ty { font-size: 9vw; }

  /* contact form */
  .h-contact .cf-inner { padding: 14vh 22px 8vh; }
  .h-contact .cf-head { top: 22px; left: 18px; }
  .h-contact .cf-head .lname { font-size: 18px; }
  .h-contact .cf-close { top: 22px; right: 18px; font-size: 18px; }
  .cf-field input, .cf-field select, .cf-field textarea { font-size: 19px; padding: 18px 0 12px; }
  .cf-bottom { flex-direction: column; align-items: flex-start; gap: 22px; margin-top: 28px; }
  .cf-send { font-size: 20px; }
  .cf-send svg { width: 56px; }
}

/* ============================================================
   Image protection — deterrents against casual downloading.
   The wrapper fills its (position:relative) parent so existing
   descendant `img` rules keep working unchanged. A transparent
   guard layer sits on top to swallow right-clicks / drags.
   NOTE: deterrent only — true protection needs watermarking.
   ============================================================ */
.protected-image { position: absolute; inset: 0; }
.protected-image img {
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  user-drag: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
.protected-image .img-guard {
  position: absolute; inset: 0; z-index: 2;
  background: transparent; cursor: pointer;
}