/* Studio Zilverzout — black, paper white and silver. Italiana for the voice, Inter for the rest.
   Signature: a contact sheet with film edges and frame numbers; the photos take the space. */
@font-face { font-family: "Italiana"; src: url("../../fonts/italiana/italiana-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../../fonts/inter/inter-latin-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
:root {
  --bg: #0B0B0B; --paper: #151515; --ink: #EDEDED; --muted: #A6A6A6; --line: #2A2A2A; --silver: #BDBDBD;
  --btn: #EDEDED; --on-btn: #0B0B0B; --btn-hover: #FFFFFF; --focus: #EDEDED;
  --display: "Italiana", Georgia, serif; --text: "Inter", ui-sans-serif, system-ui, sans-serif;
  --display-weight: 400; --display-track: 0; --radius: 0; --field-radius: 0; --btn-radius: 0;
  --field-bg: #1C1C1C; --field-ink: #EDEDED; --field-line: #333333; --form-shadow: 0 0 0 1px var(--line);
  --menu-font: 400 1.6rem var(--display);
  --k-bg: #151515; --k-soft: #1F1F1F; --k-ink: #EDEDED; --k-muted: #A6A6A6; --k-line: #333333;
  --k-accent: #EDEDED; --k-on-accent: #0B0B0B; --k-ok: #B5D9BE; --k-warn: #F0B5A0; --k-radius: 0.2rem; --k-font: var(--text);
}
body { font-size: 1rem; }
h2 { font-size: clamp(2.4rem, 5vw, 4.2rem); }
h1 em, h2 em { font-style: normal; color: var(--silver); }
.dx-logo { font: 400 1.8rem/1 var(--display); letter-spacing: 0.06em; }

.zz-hero { position: relative; display: grid; min-height: min(92vh, 56rem); overflow: hidden; }
.zz-hero__img { position: absolute; inset: 0; }
.zz-hero__img img { width: 100%; height: 100%; object-fit: cover; }
.zz-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(11, 11, 11, 0.9), rgba(11, 11, 11, 0.1) 60%); }
.zz-hero__in { position: relative; z-index: 1; align-self: end; padding-block: clamp(4rem, 10vw, 7rem); }
.zz-hero h1 { margin-top: 1rem; font-size: clamp(3.6rem, 11vw, 10rem); line-height: 0.9; }
.zz-hero h1 em { display: block; }
.zz-hero .dx-eyebrow { color: #D0D0D0; }

.zz-sheet { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; padding: 2.2rem 1.2rem; background: #161616;
  background-image: radial-gradient(circle, #0B0B0B 0.32rem, transparent 0.34rem), radial-gradient(circle, #0B0B0B 0.32rem, transparent 0.34rem);
  background-size: 1.6rem 1.6rem, 1.6rem 1.6rem; background-position: 0.4rem 0.4rem, 0.4rem calc(100% - 0.4rem); background-repeat: repeat-x; }
.zz-sheet li { position: relative; padding: 0.6rem; }
.zz-sheet img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; filter: grayscale(1) contrast(1.05); transition: filter 0.5s, transform 0.6s var(--dx-ease); }
.zz-sheet li:hover img { transform: scale(1.02); filter: grayscale(1) contrast(1.15); }
.zz-frame { position: absolute; left: 0.9rem; top: 0.9rem; z-index: 1; padding: 0.1rem 0.35rem; background: rgba(11, 11, 11, 0.8); color: #E8C46A; font: 600 0.7rem var(--text); letter-spacing: 0.1em; }
@media (max-width: 760px) { .zz-sheet { grid-template-columns: 1fr 1fr; padding-inline: 0.6rem; } }

.zz-packs { background: var(--paper); }
.zz-pack-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--ink); }
.zz-pack-list li { padding: 2rem 1.5rem 2rem 0; border-right: 1px solid var(--line); }
.zz-pack-list li + li { padding-left: 1.5rem; }
.zz-pack-list li:last-child { border-right: 0; }
.zz-pack-list h3 { font: 400 2rem var(--display); }
.zz-price { margin: 0.75rem 0; font: 400 2.6rem var(--display); color: var(--silver); }
.zz-pack-list p:last-child { color: var(--muted); }
@media (max-width: 860px) { .zz-pack-list { grid-template-columns: 1fr; } .zz-pack-list li, .zz-pack-list li + li { padding: 1.5rem 0; border-right: 0; border-bottom: 1px solid var(--line); } }

.zz-studio { background: var(--paper); }
.zz-studio__in { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem 4rem; align-items: end; }
.zz-studio address { font-size: 1.1rem; line-height: 1.5; }
@media (max-width: 760px) { .zz-studio__in { grid-template-columns: 1fr; } }