/* STRUCTURAL LAYER. Layout and behavior use theme tokens; no theme-specific selectors. */
@layer reset, tokens, base, components, responsive;

@font-face {
    font-family: Manrope;
    src: url('../fonts/manrope-latin-wght-normal.woff2') format('woff2');
    font-weight: 200 800;
    font-style: normal;
    font-display: swap;
}

@layer reset {
    *, *::before, *::after { box-sizing: border-box; }
    body, h1, h2, p { margin: 0; }
    button, input { font: inherit; }
    button, a, summary { -webkit-tap-highlight-color: transparent; }
    button { cursor: pointer; }
    img, video { display: block; max-width: 100%; }
    button, a { touch-action: manipulation; }
    [hidden] { display: none !important; }
}

@layer base {
    html { color-scheme: var(--color-scheme); background: var(--page); }
    body { font-family: Manrope, Arial, sans-serif; color: var(--ink); background: var(--page); min-width: 320px; transition: background .35s ease, color .35s ease; }
    ::selection { background: var(--selection); color: var(--selection-ink); }
    :focus-visible { outline: 3px solid var(--focus); outline-offset: 5px; }
    .skip-link { position: fixed; z-index: 100; top: 12px; left: 16px; padding: 12px 18px; background: var(--panel); color: var(--ink); transform: translateY(-160%); }
    .skip-link:focus { transform: translateY(0); }
}

@layer components {
    .site-header { max-width: 1800px; margin: auto; min-height: 106px; padding: 14px 4.3%; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; }
    .brand { grid-column: 1; justify-self: start; display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
    .brand__symbol { width: 65px; height: 72px; object-fit: contain; }
    .brand__type { font-size: clamp(20px, 1.7vw, 27px); letter-spacing: -.065em; font-weight: 800; white-space: nowrap; }
    .brand__type > span { color: var(--brand-red); }
    .brand__type sup { font-size: 9px; position: relative; top: -8px; margin-left: 3px; }
    .site-navigation { grid-column: 2; display: flex; gap: 26px; }
    .site-navigation a { color: var(--ink); text-decoration: none; font-size: 14px; }
    .header-actions { grid-column: 3; display: flex; gap: 14px; align-items: center; justify-self: end; }
    .contact-button { color: var(--button-ink); background: var(--button); border-radius: 30px; text-decoration: none; padding: 12px 20px; }
    .theme-picker { position: relative; z-index: 20; }
    .theme-picker__trigger { list-style: none; min-height: 45px; display: flex; gap: 10px; align-items: center; padding: 10px 17px; border: 1px solid var(--line); border-radius: 99px; color: var(--ink); background: var(--panel); cursor: pointer; font-size: 12px; font-weight: 650; transition: border-color .2s, background .2s; }
    .theme-picker__trigger::-webkit-details-marker { display: none; }
    .theme-picker__trigger > i:first-child { color: var(--accent); font-size: 14px; }
    .theme-picker__chevron { font-size: 9px; opacity: .55; margin-left: 4px; transition: transform .2s; }
    .theme-picker[open] .theme-picker__chevron { transform: rotate(180deg); }
    .theme-picker__trigger:hover { border-color: var(--accent); }
    .theme-picker__panel { position: absolute; right: 0; top: calc(100% + 13px); width: 315px; padding: 24px; border: 1px solid var(--line); border-radius: 18px; background: var(--panel); box-shadow: var(--panel-shadow); }
    .theme-picker__eyebrow { font-size: 9px; letter-spacing: .17em; color: var(--muted); font-weight: 700; margin-bottom: 8px; }
    .theme-picker h2 { font-size: 17px; font-weight: 700; letter-spacing: -.035em; margin-bottom: 18px; }
    .theme-options { display: grid; gap: 5px; }
    .theme-option { display: grid; grid-template-columns: 22px 1fr 16px; align-items: center; gap: 10px; border: 1px solid transparent; border-radius: 11px; padding: 11px 10px; background: transparent; color: var(--ink); text-align: left; }
    .theme-option > i:first-child { color: var(--accent); }
    .theme-option strong { display: block; font-size: 12px; font-weight: 700; }
    .theme-option small { display: block; font-size: 10px; color: var(--muted); margin-top: 3px; }
    .theme-option__check { opacity: 0; color: var(--accent); font-size: 11px; }
    .theme-option:hover, .theme-option[aria-pressed="true"] { background: var(--subtle); border-color: var(--line); }
    .theme-option[aria-pressed="true"] .theme-option__check { opacity: 1; }

    .main-stage { padding: 0 20px; max-width: 1840px; margin: auto; }
    .hero { position: relative; isolation: isolate; overflow: hidden; min-height: max(620px, calc(100svh - 222px)); border-radius: 24px; background: var(--stage); color: var(--on-stage); display: flex; flex-direction: column; justify-content: center; padding: 95px 5.1% 110px; }
    .hero__media, .hero__shade, .hero__texture { position: absolute; inset: 0; z-index: -3; pointer-events: none; }
    .hero__video { width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: var(--video-opacity); filter: saturate(var(--video-saturation)) contrast(1.08); }
    .hero__shade { z-index: -2; background: var(--hero-shade); }
    .hero__texture { z-index: -1; opacity: var(--grid-opacity); background-image: linear-gradient(var(--grid-color) 1px, transparent 1px), linear-gradient(90deg, var(--grid-color) 1px, transparent 1px); background-size: 86px 86px; mask-image: linear-gradient(90deg, transparent 45%, black); }
    .hero__edge { position: absolute; width: 88px; height: 18px; border: solid var(--stage-line); pointer-events: none; }
    .hero__edge--top { top: 31px; left: 31px; border-width: 1px 0 0 1px; }
    .hero__edge--bottom { right: 31px; bottom: 31px; border-width: 0 1px 1px 0; }
    .hero__topline { display: flex; justify-content: space-between; gap: 20px; position: absolute; top: 43px; left: 5.1%; right: 5.1%; }
    .edition { display: flex; align-items: center; gap: 10px; color: var(--stage-muted); font-size: 9px; letter-spacing: .19em; font-weight: 600; }
    .edition > span { width: 6px; height: 6px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 16px var(--signal-glow); }
    .hero__coordinate { font-size: 9px; letter-spacing: .16em; color: var(--stage-dim); }
    .hero__content { position: relative; z-index: 1; width: 100%; }
    .hero__eyebrow { font-size: 10px; font-weight: 650; letter-spacing: .15em; color: var(--stage-muted); margin-bottom: 25px; }
    .hero h1 { font-size: clamp(60px, 7.5vw, 126px); line-height: 1.02; letter-spacing: -.07em; font-weight: 550; text-wrap: balance; }
    .hero h1 > span { color: var(--headline-secondary); }
    .hero__period { color: var(--signal); }
    .hero__description { font-size: clamp(13px, 1.1vw, 16px); line-height: 1.85; font-weight: 400; color: var(--stage-muted); margin-top: 27px; letter-spacing: -.015em; }
    .loading { display: flex; align-items: center; gap: 13px; margin-top: 35px; width: fit-content; max-width: 100%; }
    .loading__orbit { flex-shrink: 0; display: grid; place-items: center; position: relative; width: 31px; height: 31px; border: 1px solid var(--stage-line); border-radius: 50%; }
    .loading__orbit::before { content: ''; position: absolute; inset: -1px; border: 1.5px solid transparent; border-top-color: var(--signal); border-right-color: var(--signal); border-radius: 50%; animation: orbit 1.7s linear infinite; }
    .loading__orbit > span { display: block; width: 4px; height: 4px; background: var(--on-stage); border-radius: 50%; }
    .loading__text { font-size: 10px; letter-spacing: .035em; color: var(--stage-muted); }
    .loading__dots { display: flex; gap: 4px; margin-left: 4px; }
    .loading__dots b { width: 3px; height: 3px; border-radius: 50%; background: var(--signal); animation: pulse 1.8s ease-in-out infinite; }
    .loading__dots b:nth-child(2) { animation-delay: .2s; }
    .loading__dots b:nth-child(3) { animation-delay: .4s; }
    .hero__signature { position: absolute; right: 4.4%; bottom: 105px; width: 33%; pointer-events: none; opacity: .5; }
    .hero__wordmark { display: block; text-align: right; font-size: clamp(130px, 21vw, 340px); font-weight: 800; line-height: .9; letter-spacing: -.09em; color: transparent; -webkit-text-stroke: 1px var(--signature-line); }
    .hero__signal { display: flex; align-items: center; justify-content: flex-end; gap: 7px; height: 40px; margin: 25px 0 0 auto; }
    .hero__signal b { display: block; width: 2px; height: 9px; background: var(--signature-line); transform-origin: center; animation: waveform 2.7s ease-in-out infinite alternate; }
    .hero__signal b:nth-child(3n) { height: 30px; animation-delay: -.9s; }
    .hero__signal b:nth-child(3n + 1) { height: 19px; animation-delay: -.3s; }
    .hero__signal b:nth-child(5n) { height: 38px; animation-delay: -1.7s; background: var(--signal); }
    .hero__bottomline { position: absolute; bottom: 38px; left: 5.1%; right: 5.1%; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
    .hero__bottomline p { color: var(--stage-muted); font-size: 9px; letter-spacing: .18em; font-weight: 500; }
    .hero__bottomline p > span { color: var(--signal); margin: 0 10px; }
    .motion-button { min-width: 45px; min-height: 40px; border: 1px solid var(--stage-line); background: var(--video-button); color: var(--on-stage); border-radius: 30px; display: flex; align-items: center; justify-content: center; gap: 9px; padding: 9px 14px; backdrop-filter: blur(12px); }
    .motion-button i { font-size: 11px; }
    .motion-button__label { font-size: 10px; }

    .site-footer { max-width: 1800px; margin: auto; min-height: 116px; padding: 27px 4.3%; display: flex; align-items: center; justify-content: space-between; gap: 28px; color: var(--muted); font-size: 11px; line-height: 1.85; }
    .site-footer__company { display: flex; flex-direction: column; }
    .site-footer__company strong { font-size: 12px; color: var(--ink); font-weight: 750; letter-spacing: -.015em; }
    .site-footer address { font-style: normal; display: flex; flex-direction: column; }
    .site-footer__end { display: flex; align-items: center; gap: 10px; font-size: 10px; }
    .footer-mark { width: 7px; height: 7px; background: var(--brand-red); position: relative; }
    .footer-mark::after { content: ''; position: absolute; left: 4px; top: 4px; width: 7px; height: 7px; background: var(--brand-blue); }

    .cookie-notice { position: fixed; z-index: 15; right: 43px; bottom: 200px; width: 370px; max-width: calc(100vw - 40px); display: grid; grid-template-columns: 30px 1fr; gap: 14px; padding: 23px; border: 1px solid var(--line); border-radius: 18px; color: var(--ink); background: var(--cookie-panel); box-shadow: var(--panel-shadow); backdrop-filter: blur(22px); animation: notice-in .65s ease both; }
    .cookie-notice__icon { display: grid; place-items: center; color: var(--accent); background: var(--subtle); border: 1px solid var(--line); border-radius: 10px; width: 32px; height: 36px; font-size: 14px; }
    .cookie-notice h2 { font-size: 15px; font-weight: 750; letter-spacing: -.035em; line-height: 1.4; margin-bottom: 8px; }
    .cookie-notice p { font-size: 12px; line-height: 1.75; color: var(--muted); }
    .cookie-notice button { border: 0; border-bottom: 1px solid var(--accent); background: transparent; color: var(--ink); min-height: 37px; padding: 7px 0 3px; margin-top: 9px; font-size: 10px; font-weight: 750; display: inline-flex; gap: 15px; align-items: center; }
    .cookie-notice button i { color: var(--accent); font-size: 10px; }
    .cookie-notice.is-leaving { opacity: 0; transform: translateY(10px); transition: opacity .2s, transform .2s; }

    @keyframes orbit { to { transform: rotate(360deg); } }
    @keyframes pulse { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
    @keyframes waveform { to { transform: scaleY(.38); opacity: .4; } }
    @keyframes notice-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
    html[data-motion="paused"] *, html[data-motion="paused"] *::before, html[data-motion="paused"] *::after { animation-play-state: paused !important; }
    @media (prefers-reduced-motion: reduce) {
        *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
        .hero__video { visibility: hidden; }
        .hero__media { background: url('../images/regia.jpg') center / cover no-repeat; }
    }
}

@layer responsive {
    @media (min-width: 1800px) { .hero { padding-left: 90px; padding-right: 90px; } }
    @media (max-width: 1100px) {
        .hero { min-height: max(650px, calc(100svh - 222px)); }
        .hero h1 { font-size: clamp(60px, 8.1vw, 90px); }
        .hero__signature { opacity: .3; right: 5%; bottom: 250px; }
        .cookie-notice { right: 35px; width: 330px; }
        .site-footer__end { display: none; }
    }
    @media (max-width: 700px) {
        .site-header { min-height: 88px; padding: 10px 22px; gap: 12px; grid-template-columns: 1fr auto; }
        .brand { gap: 5px; }
        .brand__symbol { width: 45px; height: 55px; }
        .brand__type { font-size: 20px; }
        .brand__type sup { font-size: 7px; top: -6px; }
        .header-actions { grid-column: 2; }
        .theme-picker__trigger { padding: 10px 12px; min-height: 42px; gap: 7px; }
        .theme-picker__trigger > span { font-size: 10px; }
        .theme-picker__chevron { display: none; }
        .theme-picker__panel { width: min(315px, calc(100vw - 40px)); }
        .main-stage { padding: 0 12px; }
        .hero { min-height: 660px; border-radius: 19px; padding: 105px 26px 120px; justify-content: flex-start; }
        .hero__video { object-position: 64% center; }
        .hero__topline { top: 30px; left: 26px; right: 26px; }
        .edition { font-size: 7px; letter-spacing: .14em; gap: 8px; }
        .hero__coordinate { display: none; }
        .hero__edge--top { top: 19px; left: 17px; width: 45px; height: 12px; }
        .hero__edge--bottom { right: 17px; bottom: 20px; width: 45px; height: 12px; }
        .hero__eyebrow { font-size: 7px; letter-spacing: .12em; margin-bottom: 22px; }
        .hero h1 { font-size: clamp(37px, 9.1vw, 64px); line-height: 1.09; font-weight: 600; letter-spacing: -.068em; }
        .hero__description { font-size: 11px; line-height: 1.9; margin-top: 24px; }
        .loading { gap: 10px; margin-top: 28px; }
        .loading__text { font-size: 8px; }
        .loading__dots { gap: 3px; margin-left: 0; }
        .loading__orbit { width: 26px; height: 26px; }
        .hero__signature { width: 50%; right: 28px; bottom: 112px; opacity: .4; }
        .hero__wordmark { font-size: 135px; }
        .hero__signal { height: 25px; gap: 5px; margin-top: 12px; }
        .hero__bottomline { bottom: 32px; left: 26px; right: 26px; gap: 10px; }
        .hero__bottomline p { font-size: 6px; letter-spacing: .1em; }
        .hero__bottomline p > span { margin: 0 4px; }
        .motion-button { min-width: 38px; min-height: 38px; padding: 9px 12px; }
        .motion-button__label { display: none; }
        .site-footer { padding: 26px 28px 30px; gap: 15px; align-items: flex-start; flex-direction: column; font-size: 10px; }
        .site-footer__company strong { font-size: 11px; }
        .cookie-notice { position: relative; right: auto; bottom: auto; width: auto; max-width: none; margin: 0 16px 20px; padding: 20px; }
        .cookie-notice p { font-size: 11px; }
        .cookie-notice button { font-size: 11px; }
    }
    @media (max-width: 370px) {
        .site-header { padding-left: 16px; padding-right: 16px; }
        .brand__type { font-size: 18px; }
        .hero { padding-left: 21px; padding-right: 21px; }
        .hero h1 { font-size: 36px; }
        .theme-picker__trigger span { display: none; }
    }
}