/* Invitation (index.html) — all static styling. Swatch colors stay inline in
   the markup: they are content (the day's palette), not chrome. */

/* ---------- animations ---------- */
@keyframes spk {
    0%,
    100% {
        opacity: 0.15;
        transform: scale(0.5) rotate(0deg);
    }
    50% {
        opacity: 1;
        transform: scale(1) rotate(90deg);
    }
}
@keyframes pwCaret {
    0%,
    45% {
        opacity: 1;
    }
    55%,
    100% {
        opacity: 0;
    }
}
@keyframes pwRise {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
@keyframes pwShake {
    0%,
    100% {
        transform: translateX(0);
    }
    20% {
        transform: translateX(-7px);
    }
    40% {
        transform: translateX(6px);
    }
    60% {
        transform: translateX(-4px);
    }
    80% {
        transform: translateX(3px);
    }
}
@keyframes pwPageFlip {
    0% {
        transform: rotateY(0deg);
    }
    100% {
        transform: rotateY(-100deg);
    }
}
@keyframes kenburns {
    from {
        transform: scale(1);
    }
    to {
        transform: scale(1.07);
    }
}
@keyframes coverLineIn {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ---------- scroll FX ---------- */
#scroll-prog {
    position: fixed;
    top: 0;
    left: 0;
    height: 2px;
    width: 0;
    background: linear-gradient(90deg, #c9a24a, var(--gold));
    z-index: 90;
    transition: width 0.12s linear;
    pointer-events: none;
}

.reveal {
    opacity: 0;
    transform: translateY(28px);
    transition:
        opacity 1s cubic-bezier(0.22, 0.61, 0.36, 1),
        transform 1s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.reveal.in {
    opacity: 1;
    transform: none;
}
.reveal-scale {
    opacity: 0;
    transform: scale(0.84);
    transition:
        opacity 1.05s cubic-bezier(0.22, 0.61, 0.36, 1),
        transform 1.15s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.reveal-scale.in {
    opacity: 1;
    transform: none;
}

.stagger > * {
    opacity: 0;
    transform: translateY(14px);
    transition:
        opacity 0.6s ease,
        transform 0.6s ease;
}
.stagger.in > * {
    opacity: 1;
    transform: none;
}
.stagger.in > *:nth-child(1) {
    transition-delay: 0.04s;
}
.stagger.in > *:nth-child(2) {
    transition-delay: 0.1s;
}
.stagger.in > *:nth-child(3) {
    transition-delay: 0.16s;
}
.stagger.in > *:nth-child(4) {
    transition-delay: 0.22s;
}
.stagger.in > *:nth-child(5) {
    transition-delay: 0.28s;
}
.stagger.in > *:nth-child(6) {
    transition-delay: 0.34s;
}
.stagger.in > *:nth-child(7) {
    transition-delay: 0.4s;
}

.kb {
    animation: kenburns 20s ease-in-out infinite alternate;
    will-change: transform;
}

.issue-numeral {
    font-family: var(--serif);
    font-weight: 900;
    line-height: 0.8;
    color: var(--gold);
    opacity: 0.14;
    font-size: clamp(72px, 13vw, 168px);
    margin: 0 0 14px;
    pointer-events: none;
}

.cvl {
    opacity: 0;
}
.cover-play .cvl {
    animation: coverLineIn 1s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

@media (max-width: 640px) {
    .issue-numeral {
        opacity: 0.1;
    }
    .stagger.in > * {
        transition-delay: 0s !important;
    }
}

/* ---------- page shell ---------- */
.page {
    font-family: var(--sans);
    color: var(--ink);
    background: var(--paper);
}

/* ---------- password gate ---------- */
.gate-veil {
    position: fixed;
    inset: 0;
    z-index: 99999;
    perspective: 2200px;
}
.gate-panel {
    position: absolute;
    inset: 0;
    transform-origin: left center;
    backface-visibility: hidden;
    background: radial-gradient(120% 90% at 50% 40%, #f8f4ec 0%, #efe7d7 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: text;
    font-family: var(--sans);
    padding: 24px;
}
.gate-rule {
    width: 44px;
    height: 1px;
    background: #cbb98f;
    margin-bottom: 44px;
    animation: pwRise 1.1s ease both;
}
.gate-label {
    font-size: 11px;
    letter-spacing: 0.55em;
    text-transform: uppercase;
    color: var(--muted-2);
    animation: pwRise 1.1s ease 0.12s both;
}
.gate-line {
    margin-top: 38px;
    min-width: min(300px, 74vw);
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid #cbb98f;
    padding-bottom: 16px;
}
.gate-dots {
    font-family: var(--garamond);
    font-size: 28px;
    letter-spacing: 0.42em;
    color: var(--ink);
    min-height: 34px;
    line-height: 1.2;
}
.gate-caret {
    width: 1px;
    height: 28px;
    background: var(--ink);
    display: inline-block;
    animation: pwCaret 1.1s step-end infinite;
}
.gate-input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    border: 0;
    padding: 0;
    pointer-events: none;
}
.gate-hint {
    height: 16px;
    margin-top: 20px;
    font-size: 10px;
    letter-spacing: 0.34em;
    text-transform: uppercase;
    color: #b98a7e;
    animation: pwRise 1.1s ease 0.24s both;
}
.gate-btn {
    margin-top: 26px;
    background: none;
    border: 1px solid var(--ink);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 10px;
    letter-spacing: 0.4em;
    text-transform: uppercase;
    padding: 14px 40px;
    cursor: pointer;
    animation: pwRise 1.1s ease 0.36s both;
}
.gate-btn:hover {
    background: var(--ink);
    color: var(--paper);
}
.pw-splash {
    position: fixed;
    inset: 0;
    z-index: 99998;
    background: var(--paper);
}

/* ---------- cover ---------- */
.cover-section {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(18px, 3.5vh, 44px) clamp(14px, 4vw, 40px);
    background: radial-gradient(120% 80% at 50% 0%, #f7f3eb 0%, var(--paper-2) 100%);
}
.cover-stage {
    position: relative;
    width: min(96vw, calc(94vh * 792 / 1116));
    aspect-ratio: 792 / 1116;
    box-shadow: 0 48px 100px -44px rgba(70, 58, 40, 0.62);
    overflow: hidden;
    background: #e4dccb;
    container-type: inline-size;
}
.cover-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.cover-scrim {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(
        180deg,
        rgba(246, 241, 231, 0.94) 0%,
        rgba(246, 241, 231, 0.6) 13%,
        rgba(246, 241, 231, 0) 30%,
        rgba(246, 241, 231, 0) 74%,
        rgba(246, 241, 231, 0.55) 100%
    );
}
.cover-topline {
    position: absolute;
    top: 2.6%;
    left: 0;
    right: 0;
    text-align: center;
    pointer-events: none;
    font-family: var(--sans);
    letter-spacing: 0.42em;
    text-transform: uppercase;
    font-size: clamp(8px, 2.4cqw, 12px);
    color: var(--ink-deep);
}
.cover-masthead {
    position: absolute;
    top: 4.6%;
    left: 0;
    right: 0;
    text-align: center;
    pointer-events: none;
}
.cover-logo {
    font-family: var(--serif);
    font-weight: 900;
    font-size: 22cqw;
    line-height: 0.84;
    letter-spacing: 0.005em;
    color: #141210;
}
.cover-edition {
    font-family: var(--sans);
    font-size: clamp(9px, 3cqw, 15px);
    letter-spacing: 0.42em;
    text-transform: uppercase;
    margin-top: 2.4%;
    padding-left: 0.42em;
    color: var(--ink-deep);
}

/* coverlines: position + animation-delay stay inline per instance */
.cvl {
    pointer-events: none;
}
.cvl-rule {
    width: 24px;
    height: 1px;
    background: var(--gold);
    margin-bottom: 9px;
}
.cvl--right .cvl-rule {
    background: #d9c79a;
    margin: 0 0 9px auto;
}
.cvl-kicker {
    font-family: var(--sans);
    font-size: clamp(8px, 2.5cqw, 11px);
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--ink-deep);
    line-height: 1.5;
}
.cvl-sub {
    font-family: var(--garamond);
    font-size: clamp(12px, 3.4cqw, 17px);
    font-style: italic;
    color: #2f2a22;
    line-height: 1.32;
    margin-top: 3px;
}
.cvl--light .cvl-kicker {
    color: #ffffff;
    text-shadow: 0 1px 8px rgba(20, 16, 10, 0.55);
}
.cvl--light .cvl-sub {
    color: #f4efe6;
    text-shadow: 0 1px 8px rgba(20, 16, 10, 0.55);
}
.cover-heart {
    color: var(--gold);
    font-size: clamp(11px, 3cqw, 15px);
    margin-bottom: 7px;
}
.cover-date {
    font-family: var(--serif);
    font-size: clamp(15px, 4.6cqw, 24px);
    letter-spacing: 0.05em;
    color: var(--ink-deep);
}

/* ---------- sections ---------- */
.sec-letter {
    padding: clamp(70px, 11vw, 110px) clamp(20px, 5vw, 32px) clamp(64px, 10vw, 100px);
    background: var(--paper);
}
.sec-contents {
    padding: clamp(64px, 10vw, 96px) clamp(20px, 5vw, 32px) 40px;
    background: var(--paper-2);
}
.sec-issue {
    padding: clamp(70px, 11vw, 100px) clamp(20px, 5vw, 32px);
    background: var(--paper);
}
.sec-issue--alt {
    background: var(--paper-2);
}
.wrap {
    max-width: 1040px;
    margin: 0 auto;
}
.wrap--narrow {
    max-width: 760px;
    margin: 0 auto;
    text-align: center;
}

/* ---------- editor's letter ---------- */
.letter-kicker {
    font-size: 11px;
    letter-spacing: 0.44em;
    text-transform: uppercase;
    color: var(--gold);
}
.letter-lede {
    font-family: var(--garamond);
    font-weight: 400;
    font-size: clamp(26px, 3.4vw, 38px);
    line-height: 1.28;
    margin: 26px 0 0;
    text-wrap: balance;
}
.letter-body {
    font-family: var(--garamond);
    font-size: 19px;
    line-height: 1.7;
    color: var(--body);
    margin: 28px auto 0;
    max-width: 600px;
}
.letter-rule {
    width: 52px;
    height: 1px;
    background: #c9bda3;
    margin: 52px auto;
}
.letter-claim {
    font-family: var(--serif);
    font-weight: 500;
    font-size: clamp(24px, 3.2vw, 32px);
    line-height: 1.35;
    margin: 0;
}
.letter-sub {
    font-family: var(--garamond);
    font-style: italic;
    font-size: 20px;
    line-height: 1.5;
    color: var(--body-2);
    margin: 16px auto 0;
    max-width: 460px;
}
.correction-card {
    display: inline-block;
    margin-top: 48px;
    padding: 24px 38px;
    border: 1px solid var(--line);
    text-align: center;
}
.correction-kicker {
    font-size: 10px;
    letter-spacing: 0.42em;
    text-transform: uppercase;
    color: var(--gold);
}
.correction-title {
    font-family: var(--serif);
    font-size: clamp(20px, 2.4vw, 26px);
    margin-top: 14px;
}
.correction-note {
    font-family: var(--garamond);
    font-style: italic;
    font-size: 17px;
    line-height: 1.5;
    color: var(--body-4);
    margin-top: 12px;
    max-width: 34ch;
}
.gold {
    color: var(--gold);
}

/* ---------- contents ---------- */
.toc-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    border-bottom: 1px solid var(--ink);
    padding-bottom: 22px;
    margin-bottom: 8px;
}
.toc-h2 {
    font-family: var(--serif);
    font-weight: 700;
    font-size: clamp(38px, 6vw, 64px);
    margin: 0;
    line-height: 1;
}
.toc-issue-note {
    font-size: 11px;
    letter-spacing: 0.34em;
    text-transform: uppercase;
    color: var(--muted);
}
.toc-row {
    display: flex;
    flex-wrap: wrap;
    gap: 24px 40px;
    align-items: baseline;
    padding: 34px 0;
    border-bottom: 1px solid var(--line-2);
}
.toc-num {
    font-family: var(--serif);
    font-size: 44px;
    color: var(--gold);
    width: 72px;
    line-height: 0.9;
}
.toc-main {
    flex: 1;
    min-width: 240px;
}
.toc-title {
    font-family: var(--garamond);
    font-size: 30px;
    line-height: 1.1;
}
.toc-sub {
    font-family: var(--garamond);
    font-style: italic;
    font-size: 19px;
    color: var(--body-4);
    margin-top: 2px;
}
.toc-style {
    font-family: var(--sans);
    font-size: 12px;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--body);
    text-align: right;
    min-width: 150px;
}
.toc-style span {
    color: var(--muted-2);
}
.toc-date {
    font-family: var(--serif);
    font-size: 22px;
    color: var(--ink);
    width: 96px;
    text-align: right;
}
.toc-footnote {
    text-align: center;
    font-family: var(--garamond);
    font-style: italic;
    font-size: 18px;
    color: var(--muted);
    margin: 44px 0 0;
}

/* ---------- issues ---------- */
.issue-head {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 14px;
}
.issue-tag {
    font-family: var(--serif);
    font-size: 15px;
    letter-spacing: 0.3em;
    color: var(--gold);
}
.issue-line {
    flex: 1;
    height: 1px;
    background: var(--line-2);
}
.issue-date {
    font-size: 11px;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--muted);
}
.issue-title {
    font-family: var(--serif);
    font-weight: 700;
    font-size: clamp(40px, 6.5vw, 72px);
    margin: 0;
    line-height: 1;
}
.issue-intro {
    font-family: var(--garamond);
    font-size: 22px;
    line-height: 1.6;
    color: var(--body);
    max-width: 660px;
    margin: 22px 0 0;
}
.issue-intro--narrow {
    max-width: 640px;
}

.photo-frame {
    position: relative;
    width: 100%;
    background: #e4dccb;
    overflow: hidden;
}
.photo-frame--spread {
    margin-top: 48px;
}
.photo-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.photo-img--contain {
    object-fit: contain;
}

.acts-row {
    display: flex;
    flex-wrap: wrap;
    gap: 56px;
    margin-top: 56px;
}
.act-col {
    flex: 1;
    min-width: 300px;
}
.act-col--wide {
    flex: 1.4;
}
.pack-col {
    flex: 1;
    min-width: 260px;
}

.kicker {
    font-size: 11px;
    letter-spacing: 0.34em;
    text-transform: uppercase;
    color: var(--gold);
}
.kicker--later {
    margin-top: 40px;
}
.kicker--accent {
    font-size: 10.5px;
    letter-spacing: 0.3em;
    margin: 22px 0 12px;
}
.act-body {
    font-family: var(--garamond);
    font-size: 19px;
    line-height: 1.65;
    color: var(--body-3);
    margin: 12px 0 20px;
}
.act-name {
    font-family: var(--garamond);
    font-style: italic;
    font-size: 20px;
    color: var(--ink);
    margin-bottom: 14px;
}
.act-name--tight {
    margin-bottom: 6px;
}
.act-note {
    font-size: 11px;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--muted-2);
}

/* swatches: dot colors are inline in the markup (content, not chrome) */
.swatches {
    display: flex;
    gap: 22px;
    flex-wrap: wrap;
}
.swatches--nowrap {
    gap: 16px;
    flex-wrap: nowrap;
}
.swatches--sm {
    gap: 18px 20px;
}
.swatches--accent {
    gap: 20px;
}
.swatch {
    text-align: center;
}
.dot {
    display: block;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    margin: 0 auto;
}
.swatch-label {
    font-size: 9.5px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--muted);
    margin-top: 8px;
    display: block;
}
.swatches--sm .dot,
.swatches--accent .dot {
    width: 32px;
    height: 32px;
}
.swatches--sm .swatch-label,
.swatches--accent .swatch-label {
    font-size: 9px;
    letter-spacing: 0.14em;
    margin-top: 7px;
}
.dot--sparkle {
    position: relative;
    overflow: hidden;
    background: radial-gradient(120% 120% at 30% 25%, #f7f0da 0%, #d3c59d 48%, #a08f66 100%);
    box-shadow:
        inset 0 0 0 1px #b8ab88,
        inset -3px -3px 6px rgba(120, 105, 70, 0.4);
}
.spk {
    position: absolute;
    line-height: 1;
    color: #fffdf5;
    text-shadow: 0 0 3px rgba(255, 250, 225, 0.9);
    animation: spk 2.2s ease-in-out infinite;
}

/* ---------- what to pack ---------- */
.packs {
    margin-top: 60px;
    border-top: 1px solid var(--ink);
    padding-top: 20px;
}
.pack-col-head {
    border-top: 1px solid var(--ink);
    padding-top: 16px;
}
.pack-title {
    font-size: 11px;
    letter-spacing: 0.34em;
    text-transform: uppercase;
    color: var(--ink);
    margin-bottom: 6px;
}
.pack-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0 48px;
}
.pack-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 0;
    border-bottom: 1px solid var(--line);
}
.pack-box {
    width: 12px;
    height: 12px;
    border: 1px solid var(--gold);
    flex: none;
}
.pack-label {
    font-family: var(--garamond);
    font-size: 19px;
}
.pack-tags {
    margin-top: 22px;
    font-size: 10.5px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--muted-2);
    line-height: 2;
}

/* ---------- footer ---------- */
.site-footer {
    padding: clamp(64px, 10vw, 90px) clamp(20px, 5vw, 32px) 70px;
    background: var(--paper-2);
    text-align: center;
    border-top: 1px solid var(--line-2);
}
.footer-logo {
    font-family: var(--serif);
    font-weight: 900;
    font-size: clamp(48px, 10vw, 110px);
    line-height: 0.9;
    color: var(--ink-deep);
}
.footer-edition {
    font-size: 11px;
    letter-spacing: 0.5em;
    text-transform: uppercase;
    color: var(--ink);
    margin-top: 16px;
    padding-left: 0.5em;
}
.footer-heart {
    color: var(--gold);
    font-size: 15px;
    margin-top: 26px;
}
.footer-sign {
    font-family: var(--garamond);
    font-style: italic;
    font-size: 20px;
    color: var(--body-2);
    margin-top: 20px;
}
.footer-vol {
    font-size: 10px;
    letter-spacing: 0.34em;
    text-transform: uppercase;
    color: var(--muted-3);
    margin-top: 40px;
}