:root {
    --hn-ivory: #f4eee2;
    --hn-paper: #faf6ed;
    --hn-wine: #5b1d30;
    --hn-wine-deep: #351019;
    --hn-wine-soft: #7b3147;
    --hn-sage: #77816c;
    --hn-sage-deep: #465143;
    --hn-gold: #b49862;
    --hn-gold-light: #d7c49a;
    --hn-gold-ink: #70572f;
    --hn-ink: #28211f;
    --hn-muted: #726963;
    --hn-line: rgba(40, 33, 31, .19);
    --hn-serif: "Cormorant Garamond", Georgia, serif;
    --hn-script: "Parisienne", "Brush Script MT", cursive;
    --hn-sans: "Manrope", Arial, sans-serif;
    --hn-max: 1240px;
    --hn-pad: clamp(1.35rem, 5vw, 3rem);
    --hn-ease: cubic-bezier(.22, 1, .36, 1);
}

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

html {
    min-width: 320px;
    scroll-behavior: smooth;
    scroll-padding-top: 5rem;
    background: var(--hn-wine-deep);
}

body.hn-page {
    margin: 0;
    min-width: 320px;
    overflow-x: hidden;
    background: var(--hn-ivory);
    color: var(--hn-ink);
    font-family: var(--hn-sans);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.7;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

body.hn-page::before {
    position: fixed;
    inset: 0;
    z-index: 9998;
    pointer-events: none;
    content: "";
    opacity: .13;
    mix-blend-mode: multiply;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.34'/%3E%3C/svg%3E");
}

body.hn-page.hn-lightbox-open { overflow: hidden; }

img { display: block; max-width: 100%; }
a { color: inherit; }
button, input, select, textarea { font: inherit; }
button { color: inherit; }

.hn-sr {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

::selection { background: var(--hn-wine); color: var(--hn-paper); }

.hn-skip {
    position: fixed;
    top: .75rem;
    left: .75rem;
    z-index: 10001;
    padding: .8rem 1rem;
    transform: translateY(-180%);
    background: var(--hn-paper);
    color: var(--hn-wine-deep);
    font: 600 .75rem/1 var(--hn-sans);
    text-decoration: none;
    transition: transform .2s ease;
}

.hn-skip:focus { transform: translateY(0); }

:focus-visible {
    outline: 3px solid var(--hn-wine-deep);
    outline-offset: 3px;
    box-shadow: 0 0 0 6px var(--hn-paper);
}

.hn-progress {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10000;
    width: 100%;
    height: 2px;
    background: rgba(255, 255, 255, .12);
}

.hn-progress span {
    display: block;
    width: 100%;
    height: 100%;
    transform: scaleX(0);
    transform-origin: left;
    background: var(--hn-gold-light);
    will-change: transform;
}

.hn-header {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    display: flex;
    width: 100%;
    min-height: 4.6rem;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: calc(.75rem + env(safe-area-inset-top)) max(1.1rem, env(safe-area-inset-right)) .75rem max(1.1rem, env(safe-area-inset-left));
    color: var(--hn-paper);
    transition: background-color .45s ease, color .45s ease, box-shadow .45s ease, min-height .45s ease;
}

.hn-header::after {
    position: absolute;
    right: 1.1rem;
    bottom: 0;
    left: 1.1rem;
    height: 1px;
    content: "";
    background: rgba(255, 255, 255, .25);
    transition: opacity .35s ease;
}

.hn-header.is-scrolled {
    min-height: 4rem;
    background: rgba(244, 238, 226, .92);
    color: var(--hn-ink);
    box-shadow: 0 12px 40px rgba(40, 33, 31, .08);
    -webkit-backdrop-filter: blur(15px);
    backdrop-filter: blur(15px);
}

.hn-header.is-scrolled::after { opacity: 0; }

.hn-header__mark {
    display: inline-flex;
    min-width: 3rem;
    min-height: 3rem;
    align-items: center;
    justify-content: center;
    gap: .28rem;
    border: 1px solid currentColor;
    border-radius: 50%;
    font: 400 1.08rem/1 var(--hn-serif);
    text-decoration: none;
}

.hn-header__mark i {
    width: 1px;
    height: .9rem;
    transform: rotate(28deg);
    background: currentColor;
    opacity: .62;
}

.hn-nav { display: none; }

.hn-header__rsvp {
    display: inline-flex;
    min-height: 2.75rem;
    align-items: center;
    padding: 0 .1rem;
    border-bottom: 1px solid currentColor;
    font: 600 .67rem/1 var(--hn-sans);
    letter-spacing: .14em;
    text-decoration: none;
    text-transform: uppercase;
}

.hn-kicker {
    margin: 0;
    font: 600 clamp(.65rem, 1.2vw, .75rem)/1.5 var(--hn-sans);
    letter-spacing: .23em;
    text-transform: uppercase;
}

.hn-script-accent {
    margin: 0 0 .7rem;
    color: var(--hn-wine-soft);
    font: 400 clamp(1.65rem, 4vw, 2.2rem)/1.1 var(--hn-script);
}

.hn-paper {
    position: relative;
    isolation: isolate;
    background-color: var(--hn-ivory);
    background-image:
        radial-gradient(circle at 12% 30%, rgba(180, 152, 98, .07), transparent 24rem),
        linear-gradient(107deg, rgba(255, 255, 255, .18), transparent 36%);
}

.hn-paper::after {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    content: "";
    opacity: .08;
    background-image: repeating-linear-gradient(93deg, rgba(62, 48, 42, .23) 0, rgba(62, 48, 42, .23) .3px, transparent .3px, transparent 4px);
}

.hn-hero {
    position: relative;
    display: grid;
    min-height: max(44rem, 100svh);
    place-items: center;
    overflow: hidden;
    padding: 7.5rem var(--hn-pad) 6rem;
    background: var(--hn-wine-deep);
    color: var(--hn-paper);
}

.hn-hero__media,
.hn-hero__veil {
    position: absolute;
    inset: 0;
}

.hn-hero__media {
    display: block;
    overflow: hidden;
    transform: scale(1.035);
    filter: saturate(.8) contrast(1.05);
    animation: hnHeroDrift 14s var(--hn-ease) both;
}

.hn-hero__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 58% center;
}

.hn-hero__veil {
    background:
        linear-gradient(180deg, rgba(20, 12, 13, .55) 0%, rgba(38, 14, 20, .16) 36%, rgba(26, 11, 15, .78) 100%),
        linear-gradient(90deg, rgba(40, 12, 20, .5), transparent 72%);
}

.hn-hero::after {
    position: absolute;
    inset: 1rem;
    border: 1px solid rgba(215, 196, 154, .48);
    content: "";
    pointer-events: none;
}

.hn-hero__content {
    position: relative;
    z-index: 2;
    width: min(100%, 49rem);
    margin-inline: auto;
    text-align: center;
}

.hn-hero__kicker {
    margin-bottom: 1.75rem;
    color: rgba(250, 246, 237, .82);
    opacity: 0;
    animation: hnEnter .9s .15s var(--hn-ease) forwards;
}

.hn-seal {
    position: relative;
    display: grid;
    width: 5rem;
    height: 5rem;
    margin: 0 auto 1.8rem;
    place-items: center;
    opacity: 0;
    animation: hnSealIn 1.2s .35s var(--hn-ease) forwards;
}

.hn-seal svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    fill: none;
    stroke: var(--hn-gold-light);
    stroke-width: 1;
}

.hn-seal svg circle {
    stroke-dasharray: 398;
    stroke-dashoffset: 398;
    animation: hnDrawSeal 1.4s .55s var(--hn-ease) forwards;
}

.hn-seal span {
    color: var(--hn-gold-light);
    font: 400 1.05rem/1 var(--hn-serif);
    letter-spacing: .08em;
}

.hn-hero__names {
    display: grid;
    grid-template-columns: 1fr;
    justify-items: center;
    margin: 0;
    color: var(--hn-paper);
    font: 400 clamp(4.2rem, 17vw, 8.8rem)/.72 var(--hn-script);
    letter-spacing: -.035em;
    text-wrap: balance;
}

.hn-hero__names span {
    display: block;
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: normal;
    opacity: 0;
    filter: blur(4px);
    transform: translateY(1.5rem);
    animation: hnNameIn 1.1s .6s var(--hn-ease) forwards;
}

.hn-hero__names span:last-child { animation-delay: .9s; }

.hn-hero__names--long {
    font-size: clamp(2.8rem, 14vw, 6rem);
    line-height: .82;
}

.hn-hero__names b {
    display: block;
    margin: .1rem 0 .25rem;
    color: var(--hn-gold-light);
    font: italic 300 1.65rem/1 var(--hn-serif);
    opacity: 0;
    animation: hnEnter .8s .8s var(--hn-ease) forwards;
}

.hn-hero__accent {
    margin: 1.45rem 0 1.75rem;
    color: var(--hn-gold-light);
    font-size: clamp(1.45rem, 5vw, 2.1rem);
    opacity: 0;
    animation: hnEnter .9s 1.15s var(--hn-ease) forwards;
}

.hn-hero__date {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    width: min(100%, 25rem);
    align-items: center;
    gap: .85rem;
    margin-inline: auto;
    opacity: 0;
    animation: hnEnter .9s 1.3s var(--hn-ease) forwards;
}

.hn-hero__date span {
    color: rgba(250, 246, 237, .88);
    font: 600 .62rem/1.45 var(--hn-sans);
    letter-spacing: .15em;
    text-transform: uppercase;
}

.hn-hero__date span:first-child { text-align: right; }
.hn-hero__date span:last-child { text-align: left; }

.hn-hero__date strong {
    display: grid;
    width: 3.8rem;
    height: 3.8rem;
    place-items: center;
    border-top: 1px solid var(--hn-gold-light);
    border-bottom: 1px solid var(--hn-gold-light);
    color: var(--hn-paper);
    font: 300 2.7rem/1 var(--hn-sans);
    letter-spacing: -.06em;
}

.hn-hero__actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.15rem;
    margin-top: 2.2rem;
    opacity: 0;
    animation: hnEnter .9s 1.48s var(--hn-ease) forwards;
}

.hn-button {
    position: relative;
    display: inline-flex;
    min-height: 3.35rem;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
    padding: .8rem 1.65rem;
    border: 1px solid transparent;
    background: transparent;
    font: 600 .68rem/1 var(--hn-sans);
    letter-spacing: .16em;
    text-decoration: none;
    text-transform: uppercase;
    cursor: pointer;
    transition: color .35s ease, background-color .35s ease, border-color .35s ease, transform .35s var(--hn-ease);
}

.hn-button:hover { transform: translateY(-2px); }

.hn-button--light {
    border-color: rgba(250, 246, 237, .72);
    background: rgba(250, 246, 237, .96);
    color: var(--hn-wine-deep);
}

.hn-button--light:hover {
    border-color: var(--hn-gold-light);
    background: var(--hn-gold-light);
}

.hn-button--burgundy {
    min-width: 13rem;
    border-color: var(--hn-wine);
    background: var(--hn-wine);
    color: var(--hn-paper);
}

.hn-button--burgundy:hover {
    border-color: var(--hn-wine-deep);
    background: var(--hn-wine-deep);
}

.hn-text-link,
.hn-arrow-link {
    display: inline-flex;
    min-height: 2.75rem;
    align-items: center;
    gap: .65rem;
    font: 600 .66rem/1 var(--hn-sans);
    letter-spacing: .14em;
    text-decoration: none;
    text-transform: uppercase;
}

.hn-text-link { border-bottom: 1px solid rgba(250, 246, 237, .6); }
.hn-text-link span, .hn-arrow-link span { transition: transform .3s var(--hn-ease); }
.hn-text-link:hover span { transform: translateY(3px); }
.hn-arrow-link:hover span { transform: translate(3px, -3px); }

.hn-hero__scroll {
    position: absolute;
    bottom: 2.25rem;
    left: 50%;
    z-index: 3;
    display: none;
    align-items: center;
    gap: .75rem;
    transform: translateX(-50%);
    font: 600 .58rem/1 var(--hn-sans);
    letter-spacing: .14em;
    text-transform: uppercase;
}

.hn-hero__scroll span {
    position: relative;
    width: 2.8rem;
    height: 1px;
    overflow: hidden;
    background: rgba(255, 255, 255, .4);
}

.hn-hero__scroll span::after {
    position: absolute;
    inset: 0;
    content: "";
    transform: translateX(-100%);
    background: var(--hn-gold-light);
    animation: hnScrollCue 2s ease-in-out infinite;
}

.hn-hero__stem {
    position: absolute;
    z-index: 1;
    width: min(40vw, 18rem);
    opacity: .45;
    fill: none;
    stroke: var(--hn-gold-light);
    stroke-width: 1;
}

.hn-hero__stem ellipse,
.hn-hero__stem circle { fill: rgba(215, 196, 154, .08); }
.hn-hero__stem--left { bottom: -3rem; left: -6rem; }

.hn-intro {
    min-height: 43rem;
    overflow: hidden;
    padding: clamp(6rem, 18vw, 10rem) var(--hn-pad);
    text-align: center;
}

.hn-intro__inner {
    position: relative;
    z-index: 2;
    width: min(100%, 52rem);
    margin-inline: auto;
}

.hn-intro h2,
.hn-section-heading h2,
.hn-gallery__heading h2,
.hn-contact h2 {
    margin: 0;
    font: 300 clamp(2.75rem, 9vw, 5.35rem)/.96 var(--hn-serif);
    letter-spacing: -.035em;
    text-wrap: balance;
}

.hn-intro__copy {
    width: min(100%, 39rem);
    margin: 2.2rem auto 0;
    color: var(--hn-muted);
    font-size: clamp(.98rem, 1.7vw, 1.12rem);
    line-height: 1.9;
}

.hn-intro__signature {
    margin-top: 2.15rem;
    color: var(--hn-sage-deep);
    font-size: clamp(1.5rem, 4vw, 2rem);
}

.hn-intro__ornament {
    display: flex;
    width: min(76%, 20rem);
    align-items: center;
    gap: 1rem;
    margin: 0 auto 2.2rem;
}

.hn-intro__ornament span { flex: 1; height: 1px; background: var(--hn-line); }
.hn-intro__ornament i { width: .45rem; height: .45rem; transform: rotate(45deg); border: 1px solid var(--hn-gold); }

.hn-botanical {
    position: absolute;
    pointer-events: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.15;
}

.hn-botanical ellipse,
.hn-botanical circle { fill: currentColor; fill-opacity: .055; }

.hn-botanical--intro {
    right: -5.5rem;
    bottom: -3rem;
    width: min(55vw, 21rem);
    color: var(--hn-sage);
    opacity: .54;
}

.hn-story {
    display: grid;
    background: var(--hn-wine-deep);
    color: var(--hn-paper);
}

.hn-story__image-wrap {
    position: relative;
    min-height: 34rem;
    padding: 3rem var(--hn-pad) 0;
}

.hn-story__figure {
    position: relative;
    height: min(118vw, 42rem);
    margin: 0;
    overflow: hidden;
}

.hn-story__figure::after {
    position: absolute;
    inset: 0;
    content: "";
    background: linear-gradient(180deg, transparent 62%, rgba(30, 9, 14, .58));
}

.hn-story__figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% center;
    transition: transform 1.1s var(--hn-ease);
}

.hn-story__figure:hover img { transform: scale(1.025); }

.hn-story__figure figcaption {
    position: absolute;
    right: 1.25rem;
    bottom: 1.2rem;
    z-index: 2;
    color: rgba(250, 246, 237, .78);
    font: 600 .6rem/1 var(--hn-sans);
    letter-spacing: .17em;
    text-transform: uppercase;
}

.hn-story__number {
    position: absolute;
    right: .35rem;
    top: 1.1rem;
    z-index: 2;
    color: var(--hn-gold);
    font: italic 300 clamp(5rem, 23vw, 9rem)/1 var(--hn-serif);
}

.hn-story__content {
    padding: 5rem var(--hn-pad) 6.5rem;
}

.hn-story__content .hn-script-accent { color: var(--hn-gold-light); }

.hn-story__content h2 {
    width: min(100%, 38rem);
    margin: 0;
    font: 300 clamp(3rem, 10vw, 5.7rem)/.9 var(--hn-serif);
    letter-spacing: -.04em;
}

.hn-lead {
    width: min(100%, 37rem);
    margin: 2rem 0 3rem;
    color: rgba(250, 246, 237, .72);
    font-size: 1rem;
    line-height: 1.85;
}

.hn-story__timeline { margin: 0; padding: 0; list-style: none; }

.hn-story__timeline li {
    display: grid;
    grid-template-columns: 5.4rem 1fr;
    gap: 1.1rem;
    padding: 1.45rem 0;
    border-top: 1px solid rgba(250, 246, 237, .16);
}

.hn-story__timeline time {
    padding-top: .23rem;
    color: var(--hn-gold-light);
    font: 600 .6rem/1.5 var(--hn-sans);
    letter-spacing: .12em;
    text-transform: uppercase;
}

.hn-story__timeline h3 {
    margin: 0 0 .35rem;
    font: 400 1.55rem/1.05 var(--hn-serif);
}

.hn-story__timeline p {
    margin: 0;
    color: rgba(250, 246, 237, .64);
    font-size: .81rem;
    line-height: 1.65;
}

.hn-program {
    overflow: hidden;
    padding: clamp(6.5rem, 16vw, 10rem) var(--hn-pad);
}

.hn-section-heading {
    position: relative;
    z-index: 2;
    width: min(100%, var(--hn-max));
    margin: 0 auto 4.5rem;
}

.hn-section-heading > p:last-child {
    width: min(100%, 29rem);
    margin: 1.35rem 0 0;
    color: var(--hn-muted);
}

.hn-program__list {
    position: relative;
    z-index: 2;
    width: min(100%, 50rem);
    margin: 0 auto;
    padding: 0;
    list-style: none;
}

.hn-program__list::before {
    position: absolute;
    top: 1rem;
    bottom: 1rem;
    left: 5.55rem;
    width: 1px;
    content: "";
    background: linear-gradient(var(--hn-gold), rgba(180, 152, 98, .12));
}

.hn-program__item {
    position: relative;
    display: grid;
    grid-template-columns: 4.2rem 1.65rem 1fr;
    gap: .55rem;
    min-height: 7.5rem;
    align-items: start;
}

.hn-program__time time {
    color: var(--hn-wine);
    font: 600 .95rem/1 var(--hn-sans);
    font-variant-numeric: tabular-nums;
}

.hn-program__bud {
    position: relative;
    z-index: 2;
    display: block;
    width: .75rem;
    height: .75rem;
    margin: .18rem auto 0;
    transform: rotate(45deg);
    border: 1px solid var(--hn-gold);
    background: var(--hn-ivory);
}

.hn-program__detail {
    padding: 0 0 2.1rem .7rem;
    border-bottom: 1px solid var(--hn-line);
}

.hn-program__detail > span {
    display: block;
    margin-bottom: .4rem;
    color: var(--hn-gold-ink);
    font: 600 .56rem/1 var(--hn-sans);
    letter-spacing: .16em;
}

.hn-program__detail h3 {
    margin: 0;
    font: 400 clamp(1.65rem, 5vw, 2.2rem)/1 var(--hn-serif);
}

.hn-program__detail p {
    margin: .45rem 0 0;
    color: var(--hn-muted);
    font-size: .78rem;
}

.hn-botanical--program {
    right: -7rem;
    bottom: -4rem;
    z-index: 1;
    width: min(63vw, 25rem);
    color: var(--hn-wine-soft);
    opacity: .22;
}

.hn-locations {
    position: relative;
    overflow: hidden;
    padding: clamp(6.5rem, 16vw, 10rem) var(--hn-pad);
    background:
        radial-gradient(circle at 90% 2%, rgba(180, 152, 98, .13), transparent 30rem),
        var(--hn-sage-deep);
    color: var(--hn-paper);
}

.hn-locations::before {
    position: absolute;
    top: -10rem;
    left: -9rem;
    width: 24rem;
    height: 24rem;
    border: 1px solid rgba(215, 196, 154, .18);
    border-radius: 50%;
    content: "";
}

.hn-section-heading--light .hn-script-accent { color: var(--hn-gold-light); }
.hn-section-heading--light h2 { color: var(--hn-paper); }

.hn-locations__grid {
    position: relative;
    z-index: 2;
    display: grid;
    width: min(100%, var(--hn-max));
    gap: 1px;
    margin-inline: auto;
    background: rgba(250, 246, 237, .18);
}

.hn-location {
    position: relative;
    min-height: 25rem;
    overflow: hidden;
    padding: 2rem 1.5rem;
    background: var(--hn-sage-deep);
    transition: background-color .45s ease;
}

.hn-location:hover { background: #4d5a49; }

.hn-location__topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(250, 246, 237, .2);
    color: var(--hn-gold-light);
    font: 600 .59rem/1.3 var(--hn-sans);
    letter-spacing: .15em;
    text-transform: uppercase;
}

.hn-location__index {
    display: block;
    margin-top: 1.7rem;
    color: rgba(250, 246, 237, .17);
    font: italic 300 4.6rem/.8 var(--hn-serif);
}

.hn-location h3 {
    width: min(100%, 28rem);
    margin: 1rem 0 .8rem;
    font: 300 clamp(2.15rem, 7vw, 3.5rem)/.94 var(--hn-serif);
    letter-spacing: -.025em;
}

.hn-location address {
    color: var(--hn-gold-light);
    font: 500 .67rem/1.5 var(--hn-sans);
    letter-spacing: .1em;
    text-transform: uppercase;
}

.hn-location > p {
    width: min(100%, 27rem);
    margin: 1.3rem 0;
    color: rgba(250, 246, 237, .82);
    font-size: .83rem;
}

.hn-arrow-link { color: var(--hn-paper); border-bottom: 1px solid rgba(250, 246, 237, .35); }
.hn-arrow-link--muted { color: rgba(250, 246, 237, .82); border-bottom-style: dotted; }

.hn-locations__note {
    position: relative;
    z-index: 2;
    width: min(100%, 48rem);
    margin: 2.4rem auto 0;
    color: rgba(250, 246, 237, .78);
    font: 500 .67rem/1.7 var(--hn-sans);
    letter-spacing: .04em;
    text-align: center;
}

.hn-countdown {
    position: relative;
    display: grid;
    min-height: 39rem;
    place-items: center;
    overflow: hidden;
    padding: 6.5rem var(--hn-pad);
    background: var(--hn-wine-deep);
    color: var(--hn-paper);
}

.hn-countdown__image {
    position: absolute;
    inset: 0;
    opacity: .28;
    background: url('../images/templates/herbarij-noci/gallery-table.webp') center/cover;
    filter: grayscale(.3) saturate(.7);
}

.hn-countdown::before,
.hn-countdown::after {
    position: absolute;
    z-index: 1;
    content: "";
    pointer-events: none;
}

.hn-countdown::before {
    inset: 0;
    background: linear-gradient(110deg, rgba(53, 16, 25, .96), rgba(53, 16, 25, .66));
}

.hn-countdown::after {
    inset: 1.2rem;
    border: 1px solid rgba(215, 196, 154, .34);
}

.hn-countdown__content {
    position: relative;
    z-index: 2;
    width: min(100%, 64rem);
    text-align: center;
}

.hn-countdown .hn-script-accent { color: var(--hn-gold-light); }

.hn-countdown h2 {
    width: min(100%, 48rem);
    margin: 0 auto;
    font: 300 clamp(2.8rem, 9vw, 5.7rem)/.94 var(--hn-serif);
    letter-spacing: -.035em;
    text-wrap: balance;
}

.hn-countdown__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1px;
    margin-top: 3.4rem;
    background: rgba(250, 246, 237, .2);
}

.hn-countdown__grid > div {
    padding: 1.5rem .5rem 1.3rem;
    background: rgba(53, 16, 25, .72);
}

.hn-countdown__grid strong {
    display: block;
    font: 300 clamp(2.7rem, 12vw, 5rem)/1 var(--hn-sans);
    font-variant-numeric: tabular-nums;
    letter-spacing: -.055em;
}

.hn-countdown__grid span {
    display: block;
    margin-top: .5rem;
    color: var(--hn-gold-light);
    font: 600 .56rem/1 var(--hn-sans);
    letter-spacing: .16em;
    text-transform: uppercase;
}

.hn-countdown__complete {
    margin: 2rem 0 0;
    color: var(--hn-gold-light);
    font: 400 2rem/1 var(--hn-script);
}

.hn-gallery {
    padding: clamp(6.5rem, 16vw, 10rem) var(--hn-pad);
}

.hn-gallery__heading {
    width: min(100%, var(--hn-max));
    margin: 0 auto 3rem;
}

.hn-gallery__heading > p:last-child {
    width: min(100%, 31rem);
    margin-top: 1.35rem;
    color: var(--hn-muted);
}

.hn-gallery__grid {
    display: grid;
    width: min(100%, var(--hn-max));
    grid-template-columns: 1fr;
    gap: 1.15rem;
    margin-inline: auto;
}

.hn-gallery__item {
    position: relative;
    display: block;
    width: 100%;
    min-height: 18rem;
    overflow: hidden;
    padding: 0;
    border: 0;
    background: var(--hn-wine-deep);
    cursor: zoom-in;
}

.hn-gallery__item::after {
    position: absolute;
    inset: 0;
    content: "";
    background: linear-gradient(180deg, transparent 55%, rgba(30, 9, 14, .76));
    transition: background-color .4s ease;
}

.hn-gallery__item img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .9s var(--hn-ease), filter .6s ease;
}

.hn-gallery__item--wide,
.hn-gallery__item--landscape { aspect-ratio: 4 / 3; }
.hn-gallery__item--portrait { aspect-ratio: 4 / 5; }
.hn-gallery__item--square { aspect-ratio: 1; }
.hn-gallery__item--square img { object-position: center 57%; }

.hn-gallery__item > span {
    position: absolute;
    right: 1.2rem;
    bottom: 1.1rem;
    left: 1.2rem;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: .8rem;
    color: var(--hn-paper);
    font: 500 .65rem/1.4 var(--hn-sans);
    letter-spacing: .09em;
    text-align: left;
    text-transform: uppercase;
}

.hn-gallery__item > span b {
    color: var(--hn-gold-light);
    font-weight: 600;
}

.hn-gallery__item:hover img,
.hn-gallery__item:focus-visible img { transform: scale(1.035); filter: saturate(.82); }

.hn-rsvp {
    display: grid;
    padding: 0;
    background: var(--hn-sage-deep);
}

.hn-rsvp__aside {
    position: relative;
    display: flex;
    min-height: 30rem;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    padding: 6rem var(--hn-pad);
    background:
        radial-gradient(circle at 100% 100%, rgba(180, 152, 98, .16), transparent 25rem),
        var(--hn-wine);
    color: var(--hn-paper);
}

.hn-rsvp__aside::after {
    position: absolute;
    right: -8rem;
    bottom: -8rem;
    width: 19rem;
    height: 19rem;
    border: 1px solid rgba(215, 196, 154, .24);
    border-radius: 50%;
    content: "";
}

.hn-rsvp__aside .hn-script-accent { color: var(--hn-gold-light); }

.hn-rsvp__aside h2 {
    width: min(100%, 35rem);
    margin: 0;
    font: 300 clamp(3.1rem, 10vw, 5.8rem)/.9 var(--hn-serif);
    letter-spacing: -.04em;
}

.hn-rsvp__aside > p:not(.hn-script-accent) {
    width: min(100%, 30rem);
    margin: 2rem 0 0;
    color: rgba(250, 246, 237, .7);
}

.hn-rsvp__aside strong { color: var(--hn-paper); font-weight: 600; }

.hn-rsvp__seal {
    display: flex;
    width: 6.25rem;
    height: 6.25rem;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    margin-top: 3rem;
    border: 1px solid rgba(215, 196, 154, .65);
    border-radius: 50%;
    color: var(--hn-gold-light);
    font: 400 1.3rem/1 var(--hn-serif);
}

.hn-rsvp__seal i { width: 1px; height: 1.2rem; transform: rotate(28deg); background: currentColor; }

.hn-rsvp__paper {
    position: relative;
    padding: 5.5rem var(--hn-pad) 6.5rem;
    background-color: var(--hn-paper);
    background-image:
        linear-gradient(rgba(180, 152, 98, .04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(180, 152, 98, .04) 1px, transparent 1px);
    background-size: 27px 27px;
}

.hn-form {
    display: grid;
    gap: 1.35rem;
    width: min(100%, 45rem);
    margin-inline: auto;
}

.hn-field label,
.hn-fieldset legend {
    display: block;
    margin: 0 0 .55rem;
    color: var(--hn-wine-deep);
    font: 600 .64rem/1.4 var(--hn-sans);
    letter-spacing: .11em;
    text-transform: uppercase;
}

.hn-field label span { color: var(--hn-muted); font-size: .56rem; font-weight: 500; letter-spacing: .04em; }

.hn-field input,
.hn-field select,
.hn-field textarea {
    display: block;
    width: 100%;
    min-height: 3.35rem;
    border: 0;
    border-bottom: 2px solid rgba(53, 16, 25, .58);
    border-radius: 0;
    outline: 0;
    background: rgba(255, 255, 255, .4);
    color: var(--hn-ink);
    font: 400 1rem/1.4 var(--hn-sans);
    transition: border-color .25s ease, background-color .25s ease, box-shadow .25s ease;
}

.hn-field input,
.hn-field select { padding: .78rem .6rem; }

.hn-field textarea {
    min-height: 8rem;
    padding: .9rem .6rem;
    resize: vertical;
}

.hn-field input::placeholder,
.hn-field textarea::placeholder { color: #6b5f5a; opacity: 1; }

.hn-field input:focus,
.hn-field select:focus,
.hn-field textarea:focus {
    border-color: var(--hn-wine);
    background: #fffaf3;
    box-shadow: 0 3px 0 rgba(91, 29, 48, .08);
}

.hn-fieldset {
    margin: .3rem 0 0;
    padding: 0;
    border: 0;
}

.hn-choice-grid { display: grid; gap: .75rem; }

.hn-choice {
    position: relative;
    display: block;
    cursor: pointer;
}

.hn-choice input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
}

.hn-choice > span {
    display: grid;
    grid-template-columns: 1.2rem 1fr;
    min-height: 5rem;
    align-content: center;
    column-gap: .85rem;
    padding: .9rem 1rem;
    border: 1px solid var(--hn-line);
    background: rgba(255, 255, 255, .32);
    transition: border-color .25s ease, background-color .25s ease, transform .25s var(--hn-ease);
}

.hn-choice i {
    grid-row: 1 / 3;
    width: 1.05rem;
    height: 1.05rem;
    align-self: center;
    border: 1px solid var(--hn-wine-soft);
    border-radius: 50%;
    box-shadow: inset 0 0 0 3px var(--hn-paper);
}

.hn-choice b {
    color: var(--hn-ink);
    font: 500 .82rem/1.4 var(--hn-sans);
}

.hn-choice small { color: var(--hn-muted); font: 400 .68rem/1.45 var(--hn-sans); }

.hn-choice input:checked + span {
    border-color: var(--hn-wine);
    background: rgba(91, 29, 48, .055);
}

.hn-choice input:checked + span i { background: var(--hn-wine); }
.hn-choice input:focus-visible + span { outline: 2px solid var(--hn-wine); outline-offset: 3px; }
.hn-choice:hover > span { transform: translateY(-2px); }

.hn-form__footer {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.25rem;
    margin-top: .7rem;
}

.hn-form__footer p {
    margin: 0;
    color: var(--hn-muted);
    font-size: .67rem;
    line-height: 1.6;
}

.hn-form__footer .hn-button { width: 100%; }

.hn-honeypot {
    position: absolute !important;
    left: -10000px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
}

.hn-notice {
    width: min(100%, 45rem);
    margin: 0 auto 2rem;
    padding: 1rem 1.1rem;
    border-left: 3px solid currentColor;
    font-size: .82rem;
}

.hn-notice--success { background: rgba(70, 81, 67, .1); color: var(--hn-sage-deep); }
.hn-notice--error { background: rgba(91, 29, 48, .08); color: var(--hn-wine); }

.hn-rsvp__closed {
    width: min(100%, 34rem);
    margin: 4rem auto;
    text-align: center;
}

.hn-rsvp__closed > span { color: var(--hn-gold); font-size: 1.5rem; }
.hn-rsvp__closed h3 { margin: 1rem 0 .7rem; font: 400 2.7rem/1 var(--hn-serif); }
.hn-rsvp__closed p { color: var(--hn-muted); }

.hn-contact {
    display: grid;
    gap: 3rem;
    padding: clamp(6rem, 15vw, 9rem) var(--hn-pad);
}

.hn-contact__heading > p:last-child {
    width: min(100%, 31rem);
    margin: 1.25rem 0 0;
    color: var(--hn-muted);
}

.hn-contact__links { border-top: 1px solid var(--hn-line); }

.hn-contact__links a {
    display: grid;
    grid-template-columns: 5rem 1fr auto;
    min-height: 5.8rem;
    align-items: center;
    gap: .8rem;
    border-bottom: 1px solid var(--hn-line);
    text-decoration: none;
}

.hn-contact__links a span {
    color: var(--hn-wine);
    font: 600 .61rem/1 var(--hn-sans);
    letter-spacing: .12em;
    text-transform: uppercase;
}

.hn-contact__links a b { font: 400 clamp(1.3rem, 4vw, 1.75rem)/1 var(--hn-serif); }
.hn-contact__links a i { color: var(--hn-gold); font-style: normal; transition: transform .3s var(--hn-ease); }
.hn-contact__links a:hover i { transform: translate(3px, -3px); }
.hn-contact__quiet { margin: 1.5rem 0 0; color: var(--hn-muted); font-size: .82rem; }

.hn-closing {
    position: relative;
    display: grid;
    min-height: 46rem;
    place-items: center;
    overflow: hidden;
    padding: 7rem var(--hn-pad);
    background: var(--hn-wine-deep);
    color: var(--hn-paper);
    text-align: center;
}

.hn-closing__image {
    position: absolute;
    inset: 0;
    opacity: .23;
    background: url('../images/templates/herbarij-noci/gallery-chapel.webp') center/cover;
    filter: saturate(.65);
}

.hn-closing::before {
    position: absolute;
    inset: 0;
    z-index: 1;
    content: "";
    background: radial-gradient(circle at 50% 42%, rgba(53, 16, 25, .47), rgba(29, 9, 14, .95) 76%);
}

.hn-closing__content {
    position: relative;
    z-index: 3;
    width: min(100%, 55rem);
}

.hn-closing .hn-script-accent { color: var(--hn-gold-light); }

.hn-closing h2 {
    margin: 0;
    font: 300 clamp(3rem, 10vw, 6rem)/.92 var(--hn-serif);
    letter-spacing: -.04em;
    text-wrap: balance;
}

.hn-closing__content > p:not(.hn-script-accent):not(.hn-closing__names):not(.hn-closing__date) {
    width: min(100%, 35rem);
    margin: 2rem auto 0;
    color: rgba(250, 246, 237, .67);
}

.hn-closing__line {
    display: block;
    width: 1px;
    height: 4rem;
    margin: 2.3rem auto 1.4rem;
    background: linear-gradient(var(--hn-gold-light), transparent);
}

.hn-closing__date {
    margin: 0;
    color: var(--hn-gold-light);
    font: 600 .62rem/1.5 var(--hn-sans);
    letter-spacing: .17em;
    text-transform: uppercase;
}

.hn-closing__names {
    margin: 1.35rem 0 0;
    font: 400 clamp(2.6rem, 8vw, 4.8rem)/1 var(--hn-script);
}

.hn-closing__botanical {
    position: absolute;
    right: -9rem;
    bottom: -7rem;
    z-index: 2;
    width: min(82vw, 34rem);
    opacity: .32;
    fill: none;
    stroke: var(--hn-gold-light);
    stroke-width: 1;
}

.hn-closing__botanical ellipse,
.hn-closing__botanical circle { fill: rgba(215, 196, 154, .09); }

.hn-footer {
    display: grid;
    grid-template-columns: auto 1fr auto;
    min-height: 6.5rem;
    align-items: center;
    gap: .8rem;
    padding: 1.2rem var(--hn-pad);
    background: #20090f;
    color: rgba(250, 246, 237, .58);
}

.hn-footer > a {
    display: flex;
    min-width: 3.4rem;
    min-height: 3.4rem;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(250, 246, 237, .26);
    border-radius: 50%;
    color: var(--hn-gold-light);
    font: 400 1rem/1 var(--hn-serif);
    text-decoration: none;
}

.hn-footer > a span { margin: 0 .1rem; }

.hn-footer p {
    margin: 0;
    font: 500 .54rem/1.6 var(--hn-sans);
    letter-spacing: .1em;
    text-align: center;
    text-transform: uppercase;
}

.hn-footer button {
    min-height: 2.75rem;
    padding: 0;
    border: 0;
    border-bottom: 1px solid rgba(250, 246, 237, .3);
    background: transparent;
    color: rgba(250, 246, 237, .75);
    font: 600 .58rem/1 var(--hn-sans);
    letter-spacing: .1em;
    text-transform: uppercase;
    cursor: pointer;
}

.hn-lightbox {
    width: min(94vw, 70rem);
    max-width: none;
    height: min(90svh, 55rem);
    max-height: none;
    padding: 3.2rem 1rem 1rem;
    border: 1px solid rgba(215, 196, 154, .4);
    background: #18090d;
    color: var(--hn-paper);
}

.hn-lightbox::backdrop {
    background: rgba(12, 5, 8, .86);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.hn-lightbox > button {
    position: absolute;
    top: .35rem;
    right: 1rem;
    min-height: 2.75rem;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--hn-paper);
    font: 600 .6rem/1 var(--hn-sans);
    letter-spacing: .12em;
    text-transform: uppercase;
    cursor: pointer;
}

.hn-lightbox > button span { margin-left: .4rem; font-size: 1.2rem; }
.hn-lightbox figure { display: grid; height: 100%; margin: 0; grid-template-rows: 1fr auto; gap: .8rem; }
.hn-lightbox img { width: 100%; height: 100%; min-height: 0; object-fit: contain; }
.hn-lightbox figcaption { color: rgba(250, 246, 237, .62); font: 500 .58rem/1.4 var(--hn-sans); letter-spacing: .12em; text-align: center; text-transform: uppercase; }

.hn-toast {
    position: fixed;
    right: 1rem;
    bottom: max(1rem, env(safe-area-inset-bottom));
    z-index: 10002;
    max-width: calc(100vw - 2rem);
    padding: .9rem 1rem;
    transform: translateY(150%);
    background: var(--hn-paper);
    color: var(--hn-wine-deep);
    box-shadow: 0 14px 46px rgba(20, 8, 11, .24);
    font-size: .76rem;
    opacity: 0;
    transition: transform .45s var(--hn-ease), opacity .35s ease;
}

.hn-toast.is-visible { transform: translateY(0); opacity: 1; }

.hn-reveal { opacity: 1; transform: none; }

.hn-js .hn-reveal {
    opacity: 0;
    transform: translateY(2rem);
    transition: opacity .9s var(--hn-ease), transform .9s var(--hn-ease);
}

.hn-js .hn-reveal.hn-is-visible { opacity: 1; transform: none; }

@keyframes hnEnter {
    from { opacity: 0; transform: translateY(1rem); }
    to { opacity: 1; transform: translateY(0); }
}

/* Blur je naglasak na imenima, ne stanje kroz cijeli ulaz: 4px umjesto 8px i
   razbistri se do 0,4s (36 % od 1,1s), dok prozirnost i pomak traju do kraja. */
@keyframes hnNameIn {
    from { opacity: 0; filter: blur(4px); transform: translateY(1.5rem); }
    36% { filter: blur(0); }
    to { opacity: 1; filter: blur(0); transform: translateY(0); }
}

@keyframes hnSealIn {
    from { opacity: 0; transform: scale(.8) rotate(-12deg); }
    to { opacity: 1; transform: scale(1) rotate(0); }
}

@keyframes hnDrawSeal { to { stroke-dashoffset: 0; } }

@keyframes hnHeroDrift {
    from { transform: scale(1.09); }
    to { transform: scale(1.035); }
}

@keyframes hnScrollCue {
    0%, 15% { transform: translateX(-100%); }
    70%, 100% { transform: translateX(100%); }
}

@media (min-width: 36rem) {
    .hn-hero__actions { flex-direction: row; justify-content: center; }
    .hn-countdown__grid { grid-template-columns: repeat(4, 1fr); }
    .hn-gallery__grid { grid-template-columns: repeat(2, 1fr); }
    .hn-gallery__item--wide { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
    .hn-gallery__item--landscape { grid-column: 1 / -1; aspect-ratio: 16 / 8.5; }
    .hn-form { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.5rem; }
    .hn-field--full { grid-column: 1 / -1; }
    .hn-choice-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hn-form__footer { flex-direction: row; align-items: center; justify-content: space-between; }
    .hn-form__footer p { max-width: 16rem; }
    .hn-form__footer .hn-button { width: auto; }
}

@media (min-width: 48rem) {
    .hn-header { padding-right: max(2rem, env(safe-area-inset-right)); padding-left: max(2rem, env(safe-area-inset-left)); }
    .hn-header::after { right: 2rem; left: 2rem; }
    .hn-hero::after { inset: 1.5rem; }
    .hn-hero__scroll { display: flex; }
    .hn-intro { min-height: 50rem; }
    .hn-story__image-wrap { padding: 5rem 5rem 0; }
    .hn-story__figure { height: 47rem; }
    .hn-story__content { padding-inline: 5rem; }
    .hn-program__item { grid-template-columns: 5rem 2rem 1fr; min-height: 8.4rem; }
    .hn-program__list::before { left: 6rem; }
    .hn-program__time time { font-size: 1.35rem; }
    .hn-program__detail { padding-left: 1.5rem; }
    .hn-locations__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hn-locations__grid--single { grid-template-columns: minmax(0, 46rem); justify-content: center; background: transparent; }
    .hn-location { min-height: 30rem; padding: 2.5rem; }
    .hn-countdown::after { inset: 2rem; }
    .hn-gallery__grid { grid-template-columns: repeat(12, 1fr); gap: 1.25rem; }
    .hn-gallery__item--wide { grid-column: 1 / 9; grid-row: 1; aspect-ratio: 16 / 10; }
    .hn-gallery__item--portrait { grid-column: 9 / 13; grid-row: 1 / span 2; aspect-ratio: auto; }
    .hn-gallery__item--square { grid-column: 1 / 5; grid-row: 2; aspect-ratio: 1; }
    .hn-gallery__item--landscape { grid-column: 5 / 9; grid-row: 2; aspect-ratio: 1; }
    .hn-contact { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: end; }
}

@media (min-width: 62rem) {
    .hn-header {
        display: grid;
        grid-template-columns: 7rem 1fr 7rem;
        min-height: 5.4rem;
        padding-right: max(clamp(2rem, 5vw, 5rem), env(safe-area-inset-right));
        padding-left: max(clamp(2rem, 5vw, 5rem), env(safe-area-inset-left));
    }
    .hn-header::after { right: clamp(2rem, 5vw, 5rem); left: clamp(2rem, 5vw, 5rem); }
    .hn-header__mark { justify-self: start; }
    .hn-nav { display: flex; justify-content: center; gap: clamp(1.25rem, 2.8vw, 3rem); }
    .hn-nav a {
        position: relative;
        padding: .8rem 0;
        font: 600 .61rem/1 var(--hn-sans);
        letter-spacing: .12em;
        text-decoration: none;
        text-transform: uppercase;
    }
    .hn-nav a::after {
        position: absolute;
        right: 0;
        bottom: .35rem;
        left: 0;
        height: 1px;
        content: "";
        transform: scaleX(0);
        background: currentColor;
        transition: transform .3s var(--hn-ease);
    }
    .hn-nav a:hover::after,
    .hn-nav a:focus-visible::after { transform: scaleX(1); }
    .hn-header__rsvp { justify-self: end; }
    .hn-hero { min-height: max(50rem, 100svh); padding-inline: 6rem; }
    .hn-hero__names { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: clamp(1rem, 3vw, 2rem); font-size: clamp(5.5rem, 12vw, 9.6rem); }
    .hn-hero__names b { margin: 0; transform: translateY(-.55rem); }
    .hn-hero__names--long { display: grid; gap: .25rem; font-size: clamp(4rem, 7.2vw, 6.8rem); }
    .hn-hero__names--long b { margin: .1rem 0; transform: none; }
    .hn-hero__media img { object-position: center; }
    .hn-hero__stem--left { left: 0; }
    .hn-story { grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); min-height: 59rem; }
    .hn-story__image-wrap { display: grid; min-height: 100%; align-items: end; padding: 6rem 0 0 6vw; }
    .hn-story__figure { height: calc(100% - 2rem); min-height: 46rem; }
    .hn-story__number { right: -3rem; top: 4rem; }
    .hn-story__content { display: flex; min-height: 100%; flex-direction: column; justify-content: center; padding: 8rem 6vw; }
    .hn-program .hn-section-heading { display: grid; grid-template-columns: 1fr 1fr; align-items: end; column-gap: 4rem; }
    .hn-program .hn-section-heading .hn-script-accent { grid-column: 1; }
    .hn-program .hn-section-heading h2 { grid-column: 1; }
    .hn-program .hn-section-heading > p:last-child { grid-column: 2; grid-row: 2; justify-self: end; }
    .hn-program__list { width: min(100%, 58rem); }
    .hn-program__item { grid-template-columns: 6rem 2rem 1fr; }
    .hn-program__list::before { left: 7rem; }
    .hn-program__detail { display: grid; grid-template-columns: 2.5rem minmax(12rem, .75fr) 1fr; align-items: baseline; column-gap: 1.5rem; }
    .hn-program__detail > span { grid-column: 1; }
    .hn-program__detail h3 { grid-column: 2; }
    .hn-program__detail p { grid-column: 3; margin-top: 0; }
    .hn-rsvp { grid-template-columns: minmax(20rem, .78fr) minmax(34rem, 1.22fr); }
    .hn-rsvp__aside { min-height: 58rem; padding: 8rem 5vw; }
    .hn-rsvp__paper { display: grid; min-height: 58rem; align-items: center; padding: 7rem 5vw; }
}

@media (min-width: 80rem) {
    .hn-story__content { padding-right: max(7vw, calc((100vw - var(--hn-max)) / 2)); }
    .hn-story__image-wrap { padding-left: max(7vw, calc((100vw - var(--hn-max)) / 2)); }
    .hn-contact { grid-template-columns: .85fr 1.15fr; gap: 8rem; padding-inline: max(5vw, calc((100vw - var(--hn-max)) / 2)); }
}

@media (max-width: 25rem) {
    .hn-header { gap: .6rem; }
    .hn-header__rsvp { font-size: .59rem; letter-spacing: .1em; }
    .hn-hero { min-height: max(42rem, 100svh); }
    .hn-hero__date { gap: .55rem; }
    .hn-hero__date strong { width: 3.35rem; height: 3.35rem; font-size: 2.6rem; }
    .hn-story__timeline li { grid-template-columns: 4.6rem 1fr; gap: .8rem; }
    .hn-program__item { grid-template-columns: 3.8rem 1.35rem 1fr; gap: .35rem; }
    .hn-program__list::before { left: 4.45rem; }
    .hn-footer { grid-template-columns: auto 1fr; }
    .hn-footer button { grid-column: 1 / -1; justify-self: center; }
}

@media (hover: none) {
    .hn-button:hover,
    .hn-choice:hover > span { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
    }
    .hn-js .hn-reveal { opacity: 1; transform: none; }
    .hn-hero__media { transform: none; }
}

@media (forced-colors: active) {
    .hn-button,
    .hn-choice > span,
    .hn-header__mark { border: 1px solid ButtonText; }
}