:root {
    --ink: #1B3428;
    --ink-deep: #12271D;
    --gold: #C9A96A;
    --ochre: #8E6A36;
    --brass: #5C411A;
    --cream: #F6EBD4;
    --secondary: #44341B;
    --hairline: rgba(92, 65, 26, 0.38);
    --serif: "Bodoni Moda", Georgia, "Times New Roman", serif;
    --sans: "Jost", "Segoe UI", Tahoma, sans-serif;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    background: var(--gold);
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    min-height: 100vh;
    min-height: 100svh;
    background: var(--gold);
    color: var(--ink);
    font-family: var(--sans);
    font-weight: 400;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

.wall {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    background:
        radial-gradient(ellipse 105% 70% at 50% -8%, rgba(244, 226, 187, 0.94) 0%, rgba(244, 226, 187, 0.46) 32%, rgba(244, 226, 187, 0) 64%),
        radial-gradient(ellipse 52% 44% at 16% 26%, rgba(246, 235, 212, 0.24) 0%, rgba(246, 235, 212, 0) 68%),
        radial-gradient(ellipse 56% 50% at 86% 20%, rgba(142, 106, 54, 0.18) 0%, rgba(142, 106, 54, 0) 70%),
        radial-gradient(ellipse 68% 58% at 78% 84%, rgba(142, 106, 54, 0.34) 0%, rgba(142, 106, 54, 0) 72%),
        radial-gradient(ellipse 62% 62% at 14% 90%, rgba(142, 106, 54, 0.3) 0%, rgba(142, 106, 54, 0) 70%),
        radial-gradient(ellipse 78% 62% at 52% 48%, rgba(213, 181, 124, 0.46) 0%, rgba(213, 181, 124, 0) 72%),
        linear-gradient(156deg, #C9A96A 0%, #C9A96A 38%, #BB985E 68%, #8E6A36 100%);
}

.wall__mottle {
    position: absolute;
    inset: -8%;
    background:
        radial-gradient(28% 20% at 27% 34%, rgba(246, 235, 212, 0.14) 0%, rgba(246, 235, 212, 0) 72%),
        radial-gradient(24% 17% at 72% 62%, rgba(142, 106, 54, 0.16) 0%, rgba(142, 106, 54, 0) 74%),
        radial-gradient(18% 13% at 43% 78%, rgba(246, 235, 212, 0.09) 0%, rgba(246, 235, 212, 0) 70%),
        radial-gradient(22% 16% at 84% 22%, rgba(142, 106, 54, 0.13) 0%, rgba(142, 106, 54, 0) 70%),
        radial-gradient(15% 11% at 10% 62%, rgba(246, 235, 212, 0.08) 0%, rgba(246, 235, 212, 0) 72%);
    filter: blur(20px);
}

.wall__vignette {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 80% 72% at 50% 46%, rgba(58, 40, 16, 0) 44%, rgba(58, 40, 16, 0.1) 70%, rgba(58, 40, 16, 0.32) 100%);
}

.plaster {
    position: fixed;
    inset: 0;
    z-index: 1;
    display: block;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.plaster--coarse {
    opacity: 0.20;
    mix-blend-mode: soft-light;
}

.plaster--fine {
    opacity: 0.13;
    mix-blend-mode: overlay;
}

.page {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 1100px;
    min-height: 100vh;
    min-height: 100svh;
    margin: 0 auto;
    padding: clamp(24px, 5vw, 64px);
}

.stage {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: clamp(10px, 2vh, 24px) 0;
}

.identity {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    text-align: center;
}

.identity__head {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.emblem {
    position: relative;
    width: clamp(280px, 34vw, 450px);
    max-width: 100%;
    margin-bottom: clamp(20px, 3.2vh, 30px);
}

.emblem__halo {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 0;
    width: 150%;
    height: 215%;
    background: radial-gradient(ellipse at center, rgba(246, 235, 212, 0.1) 0%, rgba(246, 235, 212, 0.065) 46%, rgba(246, 235, 212, 0.025) 68%, rgba(246, 235, 212, 0) 84%);
    filter: blur(26px);
    transform: translate(-50%, -50%);
    pointer-events: none;
    animation: halo-in 1.05s ease-out 0.06s both;
}

.emblem__img {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: auto;
    mix-blend-mode: multiply;
    filter: url(#logo-mount) contrast(1.04) saturate(1.04);
    animation: logo-in 0.86s cubic-bezier(0.22, 0.61, 0.36, 1) 0.04s both;
}

.logo-filter-defs {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

.eyebrow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(10px, 1.4vw, 18px);
    margin: 0 0 clamp(14px, 2.2vh, 22px);
    padding-left: 0.34em;
    font-family: var(--sans);
    font-size: clamp(10px, 0.72vw, 11px);
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: 0.34em;
    text-transform: uppercase;
    color: #44341B;
    animation: fade-in 0.58s ease-out 0.16s both;
}

.eyebrow__rule {
    display: block;
    width: clamp(28px, 3.6vw, 52px);
    height: 1px;
    background: var(--hairline);
    transform-origin: center;
    animation: rule-in 0.68s cubic-bezier(0.22, 0.61, 0.36, 1) 0.14s both;
}

.eyebrow__rule:last-child {
    animation-delay: 0.2s;
}

.headline {
    margin: 0 0 clamp(28px, 4.5vh, 42px);
    font-family: var(--serif);
    font-size: clamp(2.3rem, 4.4vw, 4.3rem);
    font-weight: 500;
    line-height: 1.02;
    letter-spacing: -0.01em;
    color: var(--ink);
}

.headline__line {
    display: block;
    overflow: hidden;
    padding-bottom: 0.09em;
    margin-bottom: -0.09em;
}

.headline__inner {
    display: block;
    animation: line-in 0.72s cubic-bezier(0.19, 1, 0.22, 1) 0.22s both;
}

.headline__line:nth-child(2) .headline__inner {
    animation-delay: 0.31s;
}

.headline em {
    font-style: italic;
    font-weight: 400;
    letter-spacing: -0.005em;
}

.countdown {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    margin: 0 0 clamp(22px, 3.6vh, 34px);
    animation: rise-in 0.6s cubic-bezier(0.22, 0.61, 0.36, 1) 0.42s both;
}

.countdown__label {
    margin: 0 0 clamp(12px, 1.8vh, 18px);
    padding-left: 0.3em;
    font-family: var(--sans);
    font-size: clamp(10px, 0.75vw, 11px);
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: #44341B;
    transition: color 0.35s ease;
}

.clock {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    gap: clamp(8px, 2.4vw, 40px);
}

.unit {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: clamp(44px, 6.2vw, 76px);
}

.unit__value {
    display: block;
    font-family: var(--serif);
    font-size: clamp(2.4rem, 4.8vw, 4rem);
    font-weight: 400;
    font-optical-sizing: none;
    font-variant-numeric: tabular-nums lining-nums;
    font-feature-settings: "tnum" 1, "lnum" 1;
    line-height: 0.9;
    letter-spacing: -0.01em;
    color: var(--ink);
}

.unit__label {
    margin-top: clamp(7px, 1.2vh, 11px);
    padding-left: 0.26em;
    font-family: var(--sans);
    font-size: clamp(10px, 0.75vw, 11px);
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: #44341B;
}

.clock__divider {
    align-self: center;
    flex: 0 0 1px;
    width: 1px;
    height: clamp(36px, 4.4vw, 58px);
    background: var(--hairline);
}

.progress-wrap {
    position: relative;
    display: block;
    width: min(420px, 100%);
    height: 9px;
    margin-top: clamp(20px, 3vh, 30px);
}

.progress {
    display: block;
    width: 100%;
    height: 9px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: linear-gradient(to bottom, rgba(92, 65, 26, 0) calc(50% - 0.5px), rgba(92, 65, 26, 0.34) calc(50% - 0.5px) calc(50% + 0.5px), rgba(92, 65, 26, 0) calc(50% + 0.5px));
    -webkit-appearance: none;
    appearance: none;
    animation: progress-reveal 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) 0.48s both;
}

.progress::-webkit-progress-bar {
    background: transparent;
    border-radius: 0;
}

.progress::-webkit-progress-value {
    background:
        radial-gradient(circle at calc(100% - 4px) 50%, var(--cream) 0 1px, var(--ink) 1.4px 2.6px, rgba(27, 52, 40, 0) 2.8px) no-repeat,
        linear-gradient(to bottom, rgba(92, 65, 26, 0) calc(50% - 0.5px), rgba(92, 65, 26, 0.72) calc(50% - 0.5px) calc(50% + 0.5px), rgba(92, 65, 26, 0) calc(50% + 0.5px)) no-repeat;
    border-radius: 0;
}

.progress::-moz-progress-bar {
    background:
        radial-gradient(circle at calc(100% - 4px) 50%, var(--cream) 0 1px, var(--ink) 1.4px 2.6px, rgba(27, 52, 40, 0) 2.8px) no-repeat,
        linear-gradient(to bottom, rgba(92, 65, 26, 0) calc(50% - 0.5px), rgba(92, 65, 26, 0.72) calc(50% - 0.5px) calc(50% + 0.5px), rgba(92, 65, 26, 0) calc(50% + 0.5px)) no-repeat;
    border-radius: 0;
}

.progress__zero {
    position: absolute;
    top: 50%;
    left: 0;
    display: none;
    width: 7px;
    height: 7px;
    background: radial-gradient(circle at 50% 50%, var(--cream) 0 1px, var(--ink) 1.4px 2.7px, rgba(27, 52, 40, 0) 2.9px);
    border-radius: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    animation: fade-in 0.5s ease-out 0.68s both;
}

.progress-wrap.is-zero .progress__zero {
    display: block;
}

.countdown.is-live .countdown__label {
    color: var(--ink);
}

.contact {
    margin: 0;
    max-width: 100%;
    font-family: var(--sans);
    font-size: clamp(13px, 1vw, 14.5px);
    font-weight: 400;
    line-height: 1.65;
    letter-spacing: 0.035em;
    color: #3A2C16;
    animation: rise-in 0.6s cubic-bezier(0.22, 0.61, 0.36, 1) 0.54s both;
}

.contact__email {
    color: var(--ink);
    font-weight: 500;
    white-space: nowrap;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
    text-decoration-color: rgba(92, 65, 26, 0.5);
    background-image: linear-gradient(to top, rgba(92, 65, 26, 0.18) 0%, rgba(92, 65, 26, 0.18) 38%, rgba(92, 65, 26, 0) 38%);
    background-repeat: no-repeat;
    background-size: 0% 100%;
    transition: color 0.35s ease, text-decoration-color 0.35s ease, background-size 0.35s ease;
}

.contact__email:hover {
    color: var(--ink-deep);
    text-decoration-color: var(--ink);
    background-size: 100% 100%;
}

.contact__email:focus-visible {
    outline: 2px solid rgba(92, 65, 26, 0.9);
    outline-offset: 5px;
    border-radius: 2px;
}

.site-footer {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 18px;
    width: 100%;
    padding-top: clamp(14px, 2.4vh, 22px);
    border-top: 1px solid rgba(92, 65, 26, 0.22);
    animation: fade-in 0.7s ease-out 0.5s both;
}

.site-footer__motto {
    margin: 0;
    font-family: var(--serif);
    font-size: clamp(12.5px, 1.05vw, 14.5px);
    font-style: italic;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: 0.01em;
    color: rgba(27, 52, 40, 0.88);
}

.site-footer__copyright {
    margin: 0;
    font-family: var(--sans);
    font-size: 10.5px;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #44341B;
}

.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;
}

@keyframes logo-in {
    from {
        opacity: 0;
        transform: translate3d(0, 12px, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes halo-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes rule-in {
    from {
        opacity: 0;
        transform: scaleX(0.2);
    }
    to {
        opacity: 1;
        transform: scaleX(1);
    }
}

@keyframes line-in {
    from {
        transform: translate3d(0, 110%, 0);
    }
    to {
        transform: translate3d(0, 0, 0);
    }
}

@keyframes rise-in {
    from {
        opacity: 0;
        transform: translate3d(0, 7px, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes progress-reveal {
    from {
        clip-path: inset(0 100% 0 0);
    }
    to {
        clip-path: inset(0 0 0 0);
    }
}

@media (max-width: 720px) {
    .site-footer {
        flex-direction: column;
        align-items: center;
        gap: 8px;
        text-align: center;
    }

    .site-footer__motto {
        font-size: 12px;
    }

    .site-footer__copyright {
        letter-spacing: 0.1em;
    }
}

@media (max-width: 380px) {
    .headline {
        font-size: clamp(1.65rem, 8vw, 1.9rem);
    }

    .clock {
        gap: 7px;
    }

    .unit {
        min-width: 42px;
    }

    .clock__divider {
        height: 34px;
    }

    .contact {
        font-size: 12px;
    }
}

@media (max-height: 760px) and (min-width: 721px) {
    .page {
        padding-top: 28px;
        padding-bottom: 24px;
    }

    .emblem {
        margin-bottom: 16px;
    }

    .eyebrow {
        margin-bottom: 12px;
    }

    .headline {
        margin-bottom: 22px;
    }

    .countdown {
        margin-bottom: 18px;
    }

    .progress-wrap {
        margin-top: 18px;
    }

    .unit__value {
        font-size: clamp(2.2rem, 4vw, 3.2rem);
    }
}

@media (prefers-reduced-motion: reduce) {
    .emblem__img,
    .emblem__halo,
    .eyebrow,
    .eyebrow__rule,
    .headline__inner,
    .countdown,
    .contact,
    .site-footer,
    .progress,
    .progress__zero {
        animation: none;
    }

    .emblem__img,
    .emblem__halo,
    .eyebrow,
    .eyebrow__rule,
    .countdown,
    .contact,
    .site-footer,
    .progress__zero {
        opacity: 1;
    }

    .emblem__img,
    .headline__inner,
    .countdown,
    .contact {
        transform: none;
    }

    .eyebrow__rule {
        transform: scaleX(1);
    }

    .progress {
        clip-path: none;
    }

    .contact__email {
        transition: none;
    }
}