@import "tokens.css";

/* Hallmark · macrostructure: minimal centered gallery · tone: quiet athletic · anchor hue: signal red */
* { box-sizing: border-box; }
html, body { margin: 0; min-width: 320px; overflow-x: clip; }
body { min-height: 100svh; background: var(--color-ink); color: var(--color-paper); font-family: var(--font-body); }
a { color: inherit; text-decoration: none; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.page { width: min(100%, 1120px); min-height: 100svh; margin: 0 auto; padding: 1rem clamp(1rem, 5vw, 4.5rem); display: flex; flex-direction: column; text-align: center; }
.logo-band { display: grid; place-items: center; width: 100vw; margin: -1rem 0 0 calc(50% - 50vw); padding: .55rem 1rem; background: var(--color-paper); }
.logo-link { display: block; width: 10rem; }
.logo-link img { display: block; width: 100%; height: auto; }
.intro { width: min(100%, 680px); margin: auto; padding: clamp(1.5rem, 4vh, 3rem) 0 clamp(1rem, 3vh, 2rem); }
.title-line { white-space: nowrap; }
h1 { margin: 0; font: 600 clamp(2.25rem, 5.2vw, 4.8rem)/.98 var(--font-display); letter-spacing: -.065em; }
h1 em { color: var(--color-red); font-style: normal; }
.description { width: min(100%, 480px); margin: 1rem auto 0; color: var(--color-muted); font-size: clamp(.95rem, 1.5vw, 1.05rem); line-height: 1.7; }
.whatsapp-button { display: inline-flex; align-items: center; gap: .7rem; margin-top: 1rem; padding: .85rem 1rem; border: 1px solid var(--color-red); border-radius: 999px; color: var(--color-red); font-size: .82rem; font-weight: 700; transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out); }
.whatsapp-button:hover { background: var(--color-red); color: var(--color-paper); }
.whatsapp-button:focus-visible, .social-links a:focus-visible, .logo-link:focus-visible { outline: 2px solid var(--color-red); outline-offset: 4px; }
.whatsapp-icon { display: grid; place-items: center; width: 1.2rem; height: 1.2rem; border: 1px solid currentColor; border-radius: 50%; font-size: .8rem; }
.photo-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; width: min(100%, 760px); margin: 0 auto 1.5rem; }
.photo-strip figure { margin: 0; overflow: hidden; aspect-ratio: 4 / 5; background: var(--color-paper-soft); }
.photo-strip img { display: block; width: 100%; height: 100%; object-fit: cover; filter: saturate(.9); transition: transform var(--dur-fast) var(--ease-out); }
.photo-strip figure:hover img { transform: scale(1.025); }
.contact { display: flex; align-items: center; flex-direction: column; gap: .55rem; padding: .75rem 0 0; }
.contact-label { color: var(--color-paper); font-size: .94rem; }
.social-links { display: flex; justify-content: center; gap: .8rem; }
.social-links a { display: grid; place-items: center; width: 2.15rem; height: 2.15rem; border: 1px solid var(--color-line); border-radius: 50%; color: var(--color-paper); transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.social-links a:hover { border-color: var(--color-red); color: var(--color-red); }
.social-links a svg { width: 1.1rem; height: 1.1rem; fill: none; stroke: currentColor; stroke-width: 1.8; }
.social-links a:nth-child(2) svg { fill: currentColor; stroke: none; }
.social-links .icon-fill { fill: currentColor; stroke: none; }
@media (max-width: 620px) { .page { padding-top: 1rem; } .intro { padding-block: 1.75rem 1.5rem; } h1 { font-size: clamp(1.85rem, 9vw, 3.5rem); } .photo-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; gap: .45rem; } .photo-strip figure { aspect-ratio: 4 / 5; } }
@media (max-width: 380px) { h1 { font-size: 1.8rem; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: .01ms !important; } }