/* Hallmark · macrostructure: Cinematic Split Cover · tone: quiet Mediterranean editorial · anchor hue: sage
 * pre-emit critique: P5 H5 E5 S5 R5 V5 · theme: custom · real-photography gateway · v5.0.0
 * contrast: pass (40–41) · nav: N6 · footer: Ft2 · slop: pass (42–45)
 * honest: pass (46) · chrome: pass (47) · tokens: pass (48) · responsive: pass (49) · icons: pass (30)
 * mobile: pass (34, 49, 50–57) · slop test: 58/58 pass
 */

@font-face { font-family: "Outfit"; src: url("assets/fonts/Outfit-Variable.ttf") format("truetype"); font-style: normal; font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Bodoni Moda"; src: url("assets/fonts/BodoniModa-Variable.ttf") format("truetype"); font-style: normal; font-weight: 400 900; font-display: swap; }

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { width: 100%; min-height: 100%; overflow-x: clip; }
html { background: var(--color-paper); color-scheme: light; }
body { margin: 0; background: var(--color-paper); color: var(--color-ink); font-family: var(--font-display); font-size: var(--text-base); line-height: 1.5; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
a, button { color: inherit; }
button { font: inherit; }

.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; }
.skip-link { position: fixed; z-index: 300; inset: var(--space-md) auto auto var(--space-md); padding: var(--space-sm) var(--space-md); background: var(--color-ink); color: var(--color-paper); text-decoration: none; transform: translateY(calc(-100% - var(--space-xl))); }
.skip-link:focus { transform: translateY(0); }

.topbar { position: fixed; z-index: 80; inset: 0 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; min-height: var(--header-height); padding: max(var(--space-sm), env(safe-area-inset-top)) var(--page-gutter) var(--space-sm); background: var(--color-paper); border-bottom: var(--rule-hair) solid var(--color-rule-soft); }
.family-mark { justify-self: center; display: block; width: clamp(12rem, 20vw, 18rem); line-height: 0; }
.family-mark img { display: block; width: 100%; height: auto; }
.topbar__statement { justify-self: start; display: flex; align-items: center; gap: var(--space-sm); margin: 0; color: var(--color-ink-soft); font-size: var(--text-xs); font-weight: 650; letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap; }
.topbar__statement i { width: var(--space-xl); height: var(--rule-hair); background: var(--color-rule); }
.language-switch { justify-self: end; min-width: var(--tap-target); min-height: var(--tap-target); padding: 0; border: 0; background: transparent; color: var(--color-ink); font-size: var(--text-sm); font-weight: 700; letter-spacing: 0.1em; cursor: pointer; }
.language-switch::after { content: ""; display: block; width: 100%; height: var(--rule-hair); margin-top: var(--space-2xs); background: var(--color-accent); transform: scaleX(0.3); transform-origin: right; transition: transform var(--dur-ui) var(--ease-out); }

.experience { position: relative; min-height: 100dvh; overflow: clip; isolation: isolate; background: var(--color-paper); }
.scene, .selector { position: absolute; inset: var(--header-height) 0 var(--footer-height); }
.scene { z-index: 1; overflow: hidden; background: var(--color-paper-2); opacity: 0; transform: scale(1.015); transition: opacity var(--dur-load) var(--ease-out), transform var(--dur-load) var(--ease-out); }
body.is-ready .scene { opacity: 1; transform: scale(1); }
.scene__venue, .scene__shot, .scene__shot img, .scene__grade, .scene__seam { position: absolute; inset: 0; }
.scene__venue { overflow: hidden; background: var(--color-photo-base); will-change: clip-path; transition: clip-path var(--dur-scene) var(--ease-in-out), opacity var(--dur-fast) var(--ease-out); }
.scene__venue--fronteluna { clip-path: inset(0 50% 0 0); }
.scene__venue--frassau { clip-path: inset(0 0 0 50%); }
body[data-active="fronteluna"] .scene__venue--fronteluna, body[data-active="frassau"] .scene__venue--frassau { clip-path: inset(0); }
body[data-active="fronteluna"] .scene__venue--frassau, body[data-active="frassau"] .scene__venue--fronteluna { opacity: 0; }
.scene__shot { overflow: hidden; animation: shot-crossfade var(--dur-gallery) linear infinite; }
.scene__shot--secondary { animation-delay: calc(var(--dur-gallery) / -2); }
.scene__shot img { --scene-x: 0px; --scene-y: 0px; width: calc(100% + var(--space-2xl)); height: calc(100% + var(--space-2xl)); margin: calc(var(--space-lg) * -1); display: block; object-fit: cover; will-change: transform; animation: cinematic-dolly var(--dur-dolly) var(--ease-in-out) infinite alternate; }
.scene__venue--fronteluna .scene__shot--primary img { object-position: 50% 52%; }
.scene__venue--fronteluna .scene__shot--secondary img { object-position: 42% 52%; }
.scene__venue--frassau .scene__shot--primary img { object-position: 54% 52%; }
.scene__venue--frassau .scene__shot--secondary img { object-position: 50% 52%; }
.scene__venue--frassau .scene__shot img { animation-delay: calc(var(--dur-dolly) / -3); }
body:not([data-active="neutral"]) .scene__shot,
body:not([data-active="neutral"]) .scene__shot img { animation-play-state: paused; }
.scene__grade { z-index: 3; background: linear-gradient(180deg, var(--color-clear) 42%, var(--color-photo-edge)); pointer-events: none; animation: light-breathe var(--dur-light) var(--ease-in-out) infinite alternate; }
.scene__seam { z-index: 4; left: 50%; right: auto; width: var(--rule-hair); background: var(--color-paper); opacity: 0.72; transition: opacity var(--dur-fast) var(--ease-out); }
body:not([data-active="neutral"]) .scene__seam { opacity: 0; }

.selector { z-index: 10; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.choice { position: relative; min-width: 0; display: grid; align-items: end; color: var(--color-ink); text-decoration: none; -webkit-tap-highlight-color: transparent; }
.choice__brand { position: relative; z-index: 2; min-width: 0; min-height: var(--caption-height); display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-xl); padding: var(--space-lg) var(--space-xl); background: var(--color-paper-panel); border-top: var(--rule-hair) solid var(--color-rule-soft); opacity: 0; transform: translateY(var(--space-md)); transition: opacity var(--dur-caption) var(--ease-out), transform var(--dur-caption) var(--ease-out), background-color var(--dur-fast) var(--ease-out); }
body.is-ready .choice__brand { opacity: 1; transform: translateY(0); }
body.is-ready .choice--frassau .choice__brand { transition-delay: var(--dur-stagger), var(--dur-stagger), 0ms; }
.choice__caption { min-width: 0; display: grid; grid-template-columns: minmax(7.5rem, 14rem) minmax(0, 1fr); align-items: center; gap: var(--space-lg); }
.choice__logo { display: block; width: 100%; height: auto; max-height: var(--logo-band-height); object-fit: contain; object-position: left center; }
.choice__logo--fronteluna { max-width: 14rem; }
.choice__logo--frassau { max-width: 13rem; }
.choice__meta { min-width: 0; max-width: 30ch; color: var(--color-ink-soft); font-size: var(--text-xs); font-weight: 650; letter-spacing: 0.08em; line-height: 1.45; text-transform: uppercase; }
.choice__action { display: inline-flex; align-items: center; gap: var(--space-sm); min-height: var(--tap-target); padding-inline: var(--space-sm); border-bottom: var(--rule-hair) solid var(--color-accent); color: var(--color-ink); font-size: var(--text-sm); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; }
.choice__action b { font-size: var(--text-base); font-weight: 400; transition: transform var(--dur-fast) var(--ease-out); }
body[data-active="fronteluna"] .choice--frassau .choice__brand, body[data-active="frassau"] .choice--fronteluna .choice__brand { opacity: 0.16; }

.foot-line { position: absolute; z-index: 20; inset: auto 0 0; min-height: var(--footer-height); display: flex; align-items: center; padding-inline: var(--page-gutter); background: var(--color-paper); color: var(--color-ink-soft); font-family: var(--font-editorial); font-size: var(--text-sm); letter-spacing: 0.04em; }
.foot-line p { margin: 0; }

.exit-wash { position: fixed; z-index: 200; inset: 0; display: grid; place-items: center; background: var(--color-paper-2); clip-path: inset(100% 0 0); pointer-events: none; transition: clip-path var(--dur-curtain) var(--ease-in-out); }
.exit-wash__line { position: absolute; inset: 0 0 auto; height: var(--rule-strong); background: var(--color-accent); opacity: 0; transform: scaleX(0); }
.exit-wash img { width: min(32rem, 68vw); height: auto; opacity: 0; transform: translateY(var(--space-md)); transition: opacity var(--dur-logo) var(--ease-out) var(--dur-logo-delay), transform var(--dur-logo) var(--ease-out) var(--dur-logo-delay); }
body.is-exiting .exit-wash { clip-path: inset(0); }
body.is-exiting .exit-wash__line { animation: curtain-line var(--dur-curtain) var(--ease-in-out) both; }
body.is-exiting .exit-wash img { opacity: 1; transform: translateY(0); }
.no-script { position: fixed; z-index: 250; inset: auto var(--space-md) var(--space-md); margin: 0; padding: var(--space-sm) var(--space-md); background: var(--color-ink); color: var(--color-paper); }

.language-switch:focus-visible, .choice:focus-visible, .family-mark:focus-visible { outline: var(--rule-focus) solid var(--color-focus); outline-offset: calc(var(--rule-focus) * -1); }
@media (hover: hover) and (pointer: fine) {
  .language-switch:hover::after { transform: scaleX(1); }
  .choice:hover .choice__brand { background: var(--color-paper); }
  .choice:hover .choice__action b { transform: translate3d(var(--space-2xs), calc(var(--space-2xs) * -1), 0); }
}
.choice:active .choice__brand { transform: translateY(var(--space-2xs)); }
.family-mark:active { opacity: 0.72; }
.language-switch:active { color: var(--color-accent); }
.language-switch:disabled, .choice[aria-disabled="true"], .family-mark[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; pointer-events: none; }

@keyframes shot-crossfade { 0%, 42% { opacity: 1; } 50%, 92% { opacity: 0; } 100% { opacity: 1; } }
@keyframes cinematic-dolly { from { transform: translate3d(calc(var(--scene-x) - var(--space-sm)), calc(var(--scene-y) - var(--space-xs)), 0) scale(1.04); } to { transform: translate3d(calc(var(--scene-x) + var(--space-sm)), calc(var(--scene-y) + var(--space-xs)), 0) scale(1.1); } }
@keyframes light-breathe { from { opacity: 0.78; } to { opacity: 1; } }
@keyframes mobile-arrow-prompt { 0%, 66%, 100% { transform: translate3d(0, 0, 0); } 80% { transform: translate3d(var(--space-2xs), calc(var(--space-2xs) * -1), 0); } }
@keyframes curtain-line { 0% { opacity: 0; transform: scaleX(0); } 18% { opacity: 1; } 72% { opacity: 1; transform: scaleX(1); } 100% { opacity: 0; transform: scaleX(1); } }

@media (max-width: 960px) {
  .choice__brand { gap: var(--space-md); padding-inline: var(--space-lg); }
  .choice__caption { grid-template-columns: minmax(0, 1fr); gap: var(--space-sm); }
  .choice__meta { max-width: 34ch; }
}

@media (max-width: 740px) {
  .topbar { min-height: var(--header-height-mobile); grid-template-columns: var(--tap-target) minmax(0, 1fr) var(--tap-target); padding: max(var(--space-sm), env(safe-area-inset-top)) var(--space-md) var(--space-xs); }
  .topbar__statement { display: none; }
  .family-mark { grid-column: 2; width: min(13.5rem, 64vw); }
  .language-switch { grid-column: 3; }
  .experience { min-height: 100svh; }
  .scene, .selector { inset: var(--header-height-mobile) 0 var(--footer-height-mobile); }
  .scene__venue--fronteluna { clip-path: inset(0 0 50% 0); }
  .scene__venue--frassau { clip-path: inset(50% 0 0); }
  body[data-active="fronteluna"] .scene__venue--fronteluna, body[data-active="frassau"] .scene__venue--frassau { clip-path: inset(0); }
  .scene__venue { transition-duration: var(--dur-mobile-scene), var(--dur-fast); }
  .scene__venue--fronteluna .scene__shot--primary img { object-position: 50% 58%; }
  .scene__venue--fronteluna .scene__shot--secondary img { object-position: 54% 48%; }
  .scene__venue--frassau .scene__shot--primary img { object-position: 56% 54%; }
  .scene__venue--frassau .scene__shot--secondary img { object-position: 50% 54%; }
  .scene__seam { top: 50%; left: 0; width: 100%; height: var(--rule-hair); }
  .selector { grid-template-columns: minmax(0, 1fr); grid-template-rows: repeat(2, minmax(0, 1fr)); }
  .choice__brand { min-height: auto; gap: var(--space-sm); padding: var(--space-sm) var(--space-md); transform: translateY(var(--space-xs)); }
  .choice__caption { grid-template-columns: minmax(6.5rem, 9.5rem) minmax(0, 1fr); gap: var(--space-md); }
  .choice__logo { max-height: var(--logo-band-height-mobile); }
  .choice__logo--fronteluna { max-width: 9.5rem; }
  .choice__logo--frassau { max-width: 8.25rem; }
  .choice__meta { max-width: 25ch; font-size: var(--text-micro); letter-spacing: 0.06em; line-height: 1.35; }
  .choice__action { min-height: var(--tap-target); padding-inline: var(--space-xs); font-size: var(--text-micro); }
  .choice__action b { animation: mobile-arrow-prompt var(--dur-arrow) var(--ease-out) infinite; }
  .choice--frassau .choice__action b { animation-delay: calc(var(--dur-arrow) / -2); }
  .choice { transition: opacity var(--dur-fast) var(--ease-out); }
  body.is-selecting .selector { pointer-events: none; }
  body[data-active="fronteluna"].is-selecting .choice--frassau, body[data-active="frassau"].is-selecting .choice--fronteluna { opacity: 0; }
  .foot-line { min-height: var(--footer-height-mobile); padding-inline: var(--space-md); font-size: var(--text-xs); }
  .exit-wash { transition-duration: var(--dur-curtain-mobile); }
  .exit-wash img { width: 80vw; }
}

@media (max-width: 380px) {
  .family-mark { width: 11.75rem; }
  .choice__caption { grid-template-columns: minmax(5.75rem, 7.5rem) minmax(0, 1fr); }
  .choice__logo--fronteluna { max-width: 7.5rem; }
  .choice__logo--frassau { max-width: 6.75rem; }
  .choice__meta { max-width: 21ch; }
}

@media (max-width: 340px) {
  .choice__caption { grid-template-columns: minmax(0, 1fr); }
  .choice__meta { display: none; }
  .choice__logo--fronteluna { max-width: 8.75rem; }
  .choice__logo--frassau { max-width: 8rem; }
}

@media (prefers-reduced-motion: reduce) {
  .scene, .scene__venue, .choice, .choice__brand, .choice__action b, .language-switch::after, .exit-wash, .exit-wash img { transition-duration: var(--dur-reduced) !important; }
  .scene__shot, .scene__shot img, .scene__grade, .choice__action b, .exit-wash__line { animation: none !important; }
  .scene__shot--primary { opacity: 1; }
  .scene__shot--secondary { opacity: 0; }
  .scene, .choice__brand, .exit-wash img { transform: none; }
}