/*
 * Sweet Seventeen (Ulang Tahun): teen glam as a magazine.
 * A magazine cover with a rose-gold masthead that turns like a page, editorial headings with page
 * numbers, polaroids that drop in and settle tilted, photo-booth strips, nail-polish dress colors,
 * a candle-lit line-up and a VIP pass on a lanyard.
 * Colors from the variant: --inv-primary (deep rose), --inv-accent (light foil), --inv-background,
 * --inv-text, and --inv-blush, --inv-gold (mid foil), --inv-shine (foil highlight), --inv-deep (night).
 */

:root {
    --inv-primary: #a24f66;
    --inv-accent: #e2a493;
    --inv-background: #fff6f5;
    --inv-text: #3d1a2c;
    --inv-blush: #f9dde0;
    --inv-gold: #c98b78;
    --inv-shine: #fde9de;
    --inv-deep: #2a0f1e;
    --inv-radius: 18px;
    --s17-serif: 'Instrument Serif', 'Playfair Display', Georgia, serif;
    --s17-sans: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --s17-hand: 'Caveat', 'Segoe Print', cursive;
    /* the rose-gold foil: for light text on dark grounds */
    --s17-foil: linear-gradient(110deg, var(--inv-gold) 0%, var(--inv-shine) 22%, var(--inv-accent) 40%, var(--inv-gold) 55%, var(--inv-shine) 74%, var(--inv-accent) 88%, var(--inv-gold) 100%);
    /* the deep foil: for big type on the light page (keeps its contrast) */
    --s17-foil-deep: linear-gradient(110deg, var(--inv-primary) 0%, color-mix(in srgb, var(--inv-gold) 70%, var(--inv-primary)) 30%, var(--inv-primary) 50%, color-mix(in srgb, var(--inv-primary) 60%, var(--inv-text)) 75%, var(--inv-primary) 100%);
    --s17-line: color-mix(in srgb, var(--inv-text) 14%, transparent);
    --s17-shadow: 0 1px 2px color-mix(in srgb, var(--inv-deep) 8%, transparent), 0 24px 40px -28px color-mix(in srgb, var(--inv-deep) 60%, transparent);
    --s17-spring: cubic-bezier(.34, 1.56, .64, 1);
}

html { background: var(--inv-background); scroll-behavior: smooth; }
body.sweet-seventeen-body {
    margin: 0; min-height: 100vh;
    background: var(--inv-background); color: var(--inv-text);
    font: 400 1rem/1.6 var(--s17-sans);
    -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent;
}
.sweet-seventeen-body *, .sweet-seventeen-body *::before, .sweet-seventeen-body *::after { box-sizing: border-box; }
/* zero specificity, so every component rule below can set its own margins */
:where(.sweet-seventeen-body) :where(p, h1, h2, h3, figure, blockquote, dl, dd) { margin: 0; }
:where(.sweet-seventeen-body) a { color: inherit; }
.sweet-seventeen-body img { max-width: 100%; }

.sweet-seventeen-preview {
    position: fixed; top: .6rem; left: 50%; z-index: 70; transform: translateX(-50%);
    padding: .35rem .85rem; border-radius: 999px; white-space: nowrap;
    background: var(--inv-deep); color: var(--inv-shine); font: 600 .68rem/1.3 var(--s17-sans);
}

/* foil type: a gradient clipped to the letters */
.sweet-seventeen-mast__main, .sweet-seventeen-seal, .sweet-seventeen-count .inv-countdown__value,
.sweet-seventeen-candle__time, .sweet-seventeen-pass__vip {
    background-image: var(--s17-foil); background-size: 250% 100%; background-position: 0 0;
}
.sweet-seventeen-mast__main, .sweet-seventeen-count .inv-countdown__value, .sweet-seventeen-candle__time, .sweet-seventeen-pass__vip,
.sweet-seventeen-star__age b, .sweet-seventeen-theme__name, .sweet-seventeen-hashtag__tag, .sweet-seventeen-closing__mast,
.sweet-seventeen-pass__title, .sweet-seventeen-throwback__no {
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.sweet-seventeen-star__age b, .sweet-seventeen-theme__name, .sweet-seventeen-hashtag__tag, .sweet-seventeen-closing__mast,
.sweet-seventeen-pass__title, .sweet-seventeen-throwback__no {
    background-image: var(--s17-foil-deep); background-size: 250% 100%;
}
/* the shine that sweeps over foil now and then */
@keyframes sweet-seventeen-sheen {
    0% { background-position: 100% 0; }
    40%, 100% { background-position: 0 0; }
}

.sweet-seventeen-hand { font-family: var(--s17-hand); font-weight: 700; line-height: 1; }
.sweet-seventeen-label { display: block; font: 800 .64rem/1.3 var(--s17-sans); letter-spacing: .2em; text-transform: uppercase; color: var(--inv-primary); }
.sweet-seventeen-lead { color: color-mix(in srgb, var(--inv-text) 86%, transparent); font-size: .96rem; }
.sweet-seventeen-icon { width: 1.25rem; height: 1.25rem; flex: none; }
.sweet-seventeen-sparkle { display: block; width: 1rem; height: 1rem; color: var(--inv-gold); }

/* ------------------------------------------------------------------ cover: a magazine cover */
.sweet-seventeen-cover {
    position: fixed; inset: 0; z-index: 60; display: grid; overflow-y: auto; overscroll-behavior: contain;
    background: var(--inv-deep); color: #fff;
    transform-origin: 0 50%; -webkit-backface-visibility: hidden; backface-visibility: hidden;
}
.sweet-seventeen-cover > * { grid-area: 1 / 1; }
.sweet-seventeen-cover__bg {
    position: relative; overflow: hidden; width: 100%; justify-self: center;
    background: var(--inv-deep) var(--sweet-seventeen-photo) center 28% / cover no-repeat;
}
/* the gradients that keep the masthead and the cover lines readable over any photo */
.sweet-seventeen-cover__bg::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(to bottom,
        color-mix(in srgb, var(--inv-deep) 82%, transparent) 0%,
        color-mix(in srgb, var(--inv-deep) 45%, transparent) 22%,
        transparent 36%,
        transparent 44%,
        color-mix(in srgb, var(--inv-deep) 55%, transparent) 58%,
        color-mix(in srgb, var(--inv-deep) 90%, transparent) 76%,
        var(--inv-deep) 100%);
}
/* no photo: a night-rose cover with a huge foil monogram and a bow */
.sweet-seventeen-cover__bg--art {
    background:
        radial-gradient(circle at 78% 30%, color-mix(in srgb, var(--inv-primary) 70%, transparent), transparent 52%),
        radial-gradient(circle at 10% 80%, color-mix(in srgb, var(--inv-gold) 40%, transparent), transparent 45%),
        radial-gradient(circle, color-mix(in srgb, var(--inv-shine) 30%, transparent) 1px, transparent 1.6px) 0 0 / 22px 22px,
        var(--inv-deep);
}
.sweet-seventeen-cover__bg--art::after { background: linear-gradient(to bottom, transparent 55%, color-mix(in srgb, var(--inv-deep) 85%, transparent)); }
.sweet-seventeen-cover__monogram {
    position: absolute; top: 18%; right: -4%;
    font: italic 400 min(78vw, 52svh, 26rem)/.8 var(--s17-serif);
    color: transparent; -webkit-text-stroke: 1.5px color-mix(in srgb, var(--inv-accent) 70%, transparent);
}
.sweet-seventeen-cover__bow { position: absolute; left: 8%; top: 40%; width: min(30vw, 8rem); color: var(--inv-gold); rotate: -12deg; }

.sweet-seventeen-cover__inner {
    position: relative; z-index: 1; display: flex; flex-direction: column;
    width: 100%; max-width: 460px; min-height: 100svh; margin: 0 auto; padding: 1.1rem 1.25rem 3.3rem;
}
.sweet-seventeen-cover__issue {
    display: flex; justify-content: space-between; gap: 1rem; padding-bottom: .4rem;
    border-bottom: 1px solid color-mix(in srgb, var(--inv-shine) 45%, transparent);
    font: 800 .64rem/1.2 var(--s17-sans); letter-spacing: .24em; text-transform: uppercase; color: var(--inv-shine);
}

/* the masthead: italic kicker words over one huge foil word */
.sweet-seventeen-mast {
    display: flex; flex-direction: column; align-items: center; margin-top: .35rem;
    font-weight: 400; text-align: center; line-height: .82;
    filter: drop-shadow(0 3px 14px color-mix(in srgb, var(--inv-deep) 55%, transparent));
}
.sweet-seventeen-mast__kicker {
    position: relative; z-index: 1; margin-bottom: -.12em;
    font: italic 400 clamp(1.7rem, 9.5vw, 2.6rem)/1 var(--s17-serif); color: var(--inv-shine);
    text-shadow: 0 2px 14px color-mix(in srgb, var(--inv-deep) 70%, transparent);
}
.sweet-seventeen-mast__main {
    display: block; white-space: nowrap; padding: 0 .02em .04em;
    font: 400 min(calc((100vw - 2.5rem) / (var(--sweet-seventeen-chars) * .5)), calc(25rem / (var(--sweet-seventeen-chars) * .5)), 16svh)/.86 var(--s17-serif);
    letter-spacing: .01em; text-transform: uppercase;
}
html.inv-anim .sweet-seventeen-mast__main { animation: inv-enter 1.1s cubic-bezier(.2, .7, .2, 1) .3s both, sweet-seventeen-sheen 5.5s ease-in-out 1.2s infinite; }

.sweet-seventeen-cover__middle { flex: 1 1 auto; display: flex; align-items: center; justify-content: flex-end; min-height: 0; padding: .6rem 0; }
.sweet-seventeen-seal {
    position: relative; display: grid; place-items: center; flex: none;
    width: 4.4em; aspect-ratio: 1; border-radius: 50%; rotate: -8deg;
    font-size: min(6vw, 3.4svh, 1.7rem); color: var(--inv-deep);
    box-shadow: 0 10px 26px -10px rgb(0 0 0 / .55), inset 0 0 0 2px color-mix(in srgb, #fff 45%, transparent);
}
html.inv-anim .sweet-seventeen-seal { animation: inv-enter 1.1s cubic-bezier(.2, .7, .2, 1) .7s both, sweet-seventeen-sheen 5.5s ease-in-out 2s infinite; }
.sweet-seventeen-seal__ring { position: absolute; inset: 0; width: 100%; height: 100%; }
.sweet-seventeen-seal__ring text { font: 800 8.4px var(--s17-sans); letter-spacing: .12em; fill: var(--inv-deep); }
html.inv-anim .sweet-seventeen-seal__ring { animation: sweet-seventeen-spin 22s linear infinite; }
@keyframes sweet-seventeen-spin { to { rotate: 360deg; } }
.sweet-seventeen-seal__core {
    position: absolute; inset: 21%; display: grid; place-content: center; justify-items: center; border-radius: 50%;
    background: var(--inv-deep); color: var(--inv-shine);
}
.sweet-seventeen-seal__core b { font: 400 1.75em/.85 var(--s17-serif); }
.sweet-seventeen-seal__core small { font: 800 .32em/1.2 var(--s17-sans); letter-spacing: .18em; text-transform: uppercase; }

.sweet-seventeen-cover__lines { display: flex; flex-direction: column; align-items: flex-start; gap: .42rem; }
.sweet-seventeen-cover__eyebrow {
    padding: .28rem .6rem; background: var(--s17-foil); background-size: 200% 100%; color: var(--inv-deep);
    font: 800 .62rem/1.2 var(--s17-sans); letter-spacing: .22em; text-transform: uppercase;
}
.sweet-seventeen-cover__name {
    max-width: 100%; overflow-wrap: anywhere;
    font: italic 400 clamp(2.7rem, 14vw, 3.7rem)/.9 var(--s17-serif); color: #fff;
    text-shadow: 0 2px 18px color-mix(in srgb, var(--inv-deep) 70%, transparent);
}
.sweet-seventeen-cover__quote {
    max-width: 20rem; padding-left: .7rem; border-left: 2px solid var(--inv-accent);
    font: 500 .9rem/1.45 var(--s17-sans); color: color-mix(in srgb, #fff 92%, transparent);
}
.sweet-seventeen-cover__when { font: 800 .7rem/1.4 var(--s17-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--inv-shine); }
.sweet-seventeen-cover__label {
    display: flex; align-items: center; justify-content: space-between; gap: .9rem;
    min-width: min(17rem, 100%); max-width: 100%; margin-top: .35rem; padding: .55rem .8rem .6rem;
    border-radius: 4px; background: #fffdfb; color: var(--inv-deep); rotate: -1.2deg;
    box-shadow: 0 12px 24px -14px rgb(0 0 0 / .7);
}
.sweet-seventeen-cover__label p { font: 800 .6rem/1.3 var(--s17-sans); letter-spacing: .2em; text-transform: uppercase; color: var(--inv-primary); }
.sweet-seventeen-cover__guest { display: block; font: 700 1.02rem/1.3 var(--s17-sans); overflow-wrap: anywhere; }
.sweet-seventeen-barcode { display: block; width: 3.4rem; height: 1.6rem; flex: none; color: var(--inv-deep); }

.sweet-seventeen-body .inv-button.sweet-seventeen-open {
    align-self: stretch; min-height: 3.3rem; margin-top: .65rem; gap: .6rem;
    background: var(--s17-foil); background-size: 200% 100%; color: var(--inv-deep);
    font: 800 .95rem/1 var(--s17-sans); letter-spacing: .06em;
    box-shadow: 0 16px 30px -14px rgb(0 0 0 / .8), inset 0 0 0 1px color-mix(in srgb, #fff 50%, transparent);
}

/* opening: the cover turns like a page around its left edge, its shade deepening as it goes */
.sweet-seventeen-cover__shade {
    position: relative; z-index: 2; pointer-events: none; opacity: 0;
    background: linear-gradient(to left, rgb(0 0 0 / .55), rgb(0 0 0 / .1) 55%, transparent);
    transition: opacity .9s ease;
}
.sweet-seventeen-cover--leave {
    transition: transform 1s cubic-bezier(.6, .04, .3, 1), opacity .2s ease .85s;
    box-shadow: 30px 0 60px rgb(0 0 0 / .35);
}
.sweet-seventeen-cover--from { transform: perspective(1700px) rotateY(0deg); }
.sweet-seventeen-cover--gone { transform: perspective(1700px) rotateY(-100deg); opacity: 0; }
.sweet-seventeen-cover--gone .sweet-seventeen-cover__shade { opacity: 1; }

@media (max-height: 760px) {
    .sweet-seventeen-cover__inner { padding-top: .9rem; padding-bottom: 3.2rem; }
    .sweet-seventeen-mast__main { font-size: min(calc((100vw - 2.5rem) / (var(--sweet-seventeen-chars) * .5)), calc(25rem / (var(--sweet-seventeen-chars) * .5)), 14.5svh); }
    .sweet-seventeen-cover__lines { gap: .36rem; }
    .sweet-seventeen-cover__name { font-size: clamp(2.4rem, 12.5vw, 3.2rem); }
    .sweet-seventeen-cover__quote { font-size: .85rem; line-height: 1.4; }
}
@media (max-height: 660px) {
    .sweet-seventeen-cover__inner { padding-top: .75rem; padding-bottom: 3.15rem; }
    .sweet-seventeen-mast__kicker { font-size: clamp(1.5rem, 8vw, 2.1rem); }
    .sweet-seventeen-mast__main { font-size: min(calc((100vw - 2.5rem) / (var(--sweet-seventeen-chars) * .5)), calc(25rem / (var(--sweet-seventeen-chars) * .5)), 13svh); }
    .sweet-seventeen-cover__lines { gap: .3rem; }
    .sweet-seventeen-cover__name { font-size: clamp(2.2rem, 11.5vw, 2.8rem); }
    .sweet-seventeen-cover__quote { font-size: .8rem; line-height: 1.35; }
    .sweet-seventeen-cover__label { padding: .42rem .75rem .48rem; margin-top: .2rem; }
    .sweet-seventeen-body .inv-button.sweet-seventeen-open { min-height: 3rem; margin-top: .45rem; }
    .sweet-seventeen-seal { font-size: min(5.4vw, 3svh, 1.5rem); }
}

/* ------------------------------------------------------------------ page */
html:not(.inv-opened) .sweet-seventeen-main, html:not(.inv-opened) .sweet-seventeen-branding { visibility: hidden; }
/* the page under the turning cover settles into place */
html.inv-anim.inv-opened .sweet-seventeen-main { animation: sweet-seventeen-settle 1s cubic-bezier(.2, .7, .2, 1) .1s both; }
@keyframes sweet-seventeen-settle { from { opacity: .3; transform: scale(.965); filter: brightness(.82); } }

.sweet-seventeen-main { position: relative; z-index: 1; max-width: 460px; margin: 0 auto; counter-reset: sweet-seventeen-page 1; background: var(--inv-background); overflow: clip; }
.sweet-seventeen-section { position: relative; padding: 2.9rem 1.25rem; }

/* wide screens: the magazine lies on a night-rose table */
@media (min-width: 700px) {
    body.sweet-seventeen-body {
        background:
            radial-gradient(circle, color-mix(in srgb, var(--inv-shine) 22%, transparent) 1px, transparent 1.6px) 0 0 / 26px 26px,
            radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--inv-primary) 45%, var(--inv-deep)), var(--inv-deep) 70%) fixed;
    }
    .sweet-seventeen-main { margin: 2.5rem auto 0; border-radius: 4px 14px 14px 4px; box-shadow: -6px 0 0 color-mix(in srgb, var(--inv-shine) 80%, #fff), 0 40px 90px -40px rgb(0 0 0 / .8); }
    .sweet-seventeen-body .sweet-seventeen-branding { color: var(--inv-shine); }
    .sweet-seventeen-cover__bg { width: min(100%, 460px); box-shadow: 0 0 80px rgb(0 0 0 / .5); }
    .sweet-seventeen-cover { transform-origin: calc(50% - 230px) 50%; }
}

/* the section heading: kicker + page number, editorial title, a swash */
.sweet-seventeen-head { display: grid; justify-items: start; gap: .5rem; margin-bottom: 1.5rem; counter-increment: sweet-seventeen-page; }
.sweet-seventeen-head__kicker {
    display: flex; align-items: center; gap: .45rem; width: 100%; padding-bottom: .5rem;
    border-bottom: 1px solid var(--s17-line);
    font: 800 .66rem/1.2 var(--s17-sans); letter-spacing: .22em; text-transform: uppercase; color: var(--inv-primary);
}
.sweet-seventeen-head__spark { width: .8rem; height: .8rem; color: var(--inv-gold); flex: none; }
.sweet-seventeen-head__page { margin-left: auto; font-weight: 600; letter-spacing: .12em; opacity: .75; }
.sweet-seventeen-head__page::before { content: 'hlm. ' counter(sweet-seventeen-page, decimal-leading-zero); }
.sweet-seventeen-head__title { font: 400 clamp(2.3rem, 11vw, 2.9rem)/.98 var(--s17-serif); letter-spacing: -.005em; text-wrap: balance; color: var(--inv-text); }
.sweet-seventeen-swash { width: 7rem; height: auto; color: var(--inv-gold); }
@supports (animation-timeline: view()) {
    html.inv-anim .sweet-seventeen-swash path { stroke-dasharray: 1; animation: sweet-seventeen-draw linear both; animation-timeline: view(); animation-range: entry 15% cover 40%; }
    html.inv-anim .sweet-seventeen-closing__mast { animation: sweet-seventeen-sweep linear both; animation-timeline: view(); animation-range: entry 0% exit 0%; }
    @keyframes sweet-seventeen-sweep { from { background-position: 100% 0; } to { background-position: 0 0; } }
}
@keyframes sweet-seventeen-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

/* dark spreads (countdown, line-up): night rose with foil */
.sweet-seventeen-countdown, .sweet-seventeen-rundown {
    color: color-mix(in srgb, #fff 92%, var(--inv-shine));
    background:
        radial-gradient(circle at 15% 0%, color-mix(in srgb, var(--inv-primary) 50%, transparent), transparent 55%),
        radial-gradient(circle at 100% 100%, color-mix(in srgb, var(--inv-gold) 28%, transparent), transparent 50%),
        var(--inv-deep);
}
.sweet-seventeen-countdown .sweet-seventeen-head__kicker, .sweet-seventeen-rundown .sweet-seventeen-head__kicker { color: var(--inv-accent); border-color: color-mix(in srgb, #fff 18%, transparent); }
.sweet-seventeen-countdown .sweet-seventeen-head__title, .sweet-seventeen-rundown .sweet-seventeen-head__title { color: #fff; }

/* the "typeset" reveal: each block slides up and is set from top to bottom like a magazine column */
html.inv-anim [data-reveal="sweet-seventeen-col"] { transform: translateY(20px); }
html.inv-anim [data-reveal="sweet-seventeen-col"].is-revealed { animation: sweet-seventeen-typeset 1s cubic-bezier(.25, .7, .25, 1) var(--reveal-delay, 0ms) backwards; }
@keyframes sweet-seventeen-typeset {
    from { clip-path: inset(0 0 100% 0); }
    to { clip-path: inset(-60px -60px -80px -60px); }
}

/* polaroids: white frame, handwritten caption; they drop in and settle tilted */
.sweet-seventeen-polaroid {
    position: relative; padding: .55rem .55rem 2.5rem; background: #fff;
    box-shadow: 0 2px 4px color-mix(in srgb, var(--inv-deep) 8%, transparent), 0 24px 36px -22px color-mix(in srgb, var(--inv-deep) 65%, transparent);
    rotate: var(--sweet-seventeen-tilt, -3deg);
}
.sweet-seventeen-polaroid__photo { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 25%; background: var(--inv-blush); }
.sweet-seventeen-polaroid__art {
    display: grid; place-items: center; aspect-ratio: 4 / 5;
    background:
        radial-gradient(circle at 30% 25%, color-mix(in srgb, #fff 70%, transparent), transparent 40%),
        linear-gradient(150deg, var(--inv-blush), var(--inv-shine) 55%, var(--inv-accent));
    font: italic 400 7rem/1 var(--s17-serif); color: transparent; -webkit-text-stroke: 1.6px var(--inv-primary);
}
.sweet-seventeen-polaroid__art--small .sweet-seventeen-sparkle { width: 38%; height: auto; color: var(--inv-primary); opacity: .75; }
.sweet-seventeen-polaroid__caption {
    position: absolute; left: .5rem; right: .5rem; bottom: .55rem; text-align: center;
    font: 700 1.4rem/1 var(--s17-hand); color: var(--inv-text); overflow-wrap: anywhere;
}
html.inv-anim [data-reveal="sweet-seventeen-drop"] {
    transform: translateY(-52px) scale(1.1); rotate: 0deg;
    transition:
        opacity .45s ease var(--reveal-delay, 0ms),
        transform .95s cubic-bezier(.3, 1.3, .5, 1) var(--reveal-delay, 0ms),
        rotate 1.3s cubic-bezier(.3, 1.8, .45, 1) calc(var(--reveal-delay, 0ms) + .15s);
}
html.inv-anim [data-reveal="sweet-seventeen-drop"].is-revealed { transform: none; rotate: var(--sweet-seventeen-tilt, -3deg); }

/* washi tape */
.sweet-seventeen-tape {
    position: absolute; z-index: 3; top: -.75rem; left: 50%; width: 5.6rem; height: 1.5rem; translate: -50% 0; rotate: -4deg;
    background: color-mix(in srgb, var(--inv-accent) 55%, transparent);
    clip-path: polygon(0 8%, 4% 0, 8% 10%, 12% 0, 88% 0, 92% 10%, 96% 0, 100% 8%, 100% 92%, 96% 100%, 92% 90%, 88% 100%, 12% 100%, 8% 90%, 4% 100%, 0 92%);
}

/* ------------------------------------------------------------------ opening: the editor's letter */
.sweet-seventeen-opening { padding-top: 3.4rem; }
.sweet-seventeen-opening__text { font-size: 1.04rem; line-height: 1.75; }
.sweet-seventeen-opening__text::first-letter {
    float: left; margin: .06em .12em 0 0;
    font: 400 4.3em/.78 var(--s17-serif); color: var(--inv-primary);
}
.sweet-seventeen-opening__sign { display: flex; align-items: flex-end; justify-content: flex-end; gap: .45rem; margin-top: 1.1rem; color: var(--inv-primary); }
.sweet-seventeen-opening__sign .sweet-seventeen-hand { font-size: 1.5rem; }
.sweet-seventeen-opening__sign .sweet-seventeen-hand--big { font-size: 2.1rem; }
.sweet-seventeen-bow { display: block; height: auto; color: var(--inv-gold); }
.sweet-seventeen-opening__bow { width: 3.4rem; margin-left: .3rem; rotate: 10deg; }

/* ------------------------------------------------------------------ celebrant: the cover story */
.sweet-seventeen-celebrant { background: linear-gradient(to bottom, var(--inv-background), var(--inv-blush) 45%, var(--inv-background)); }
.sweet-seventeen-star { position: relative; display: grid; justify-items: center; padding: 1rem 0 .4rem; }
.sweet-seventeen-star__polaroid { width: min(72%, 17rem); }
.sweet-seventeen-star__age {
    position: absolute; z-index: 4; top: 0; right: -.2rem; display: grid; justify-items: center; rotate: 6deg;
    filter: drop-shadow(0 6px 10px color-mix(in srgb, var(--inv-deep) 25%, transparent));
}
.sweet-seventeen-star__age b { padding: 0 .04em; font: italic 400 6.2rem/.8 var(--s17-serif); }
.sweet-seventeen-star__age span { margin-top: .1rem; padding: .15rem .5rem; background: var(--inv-deep); color: var(--inv-shine); font: 800 .6rem/1.3 var(--s17-sans); letter-spacing: .2em; text-transform: uppercase; }
.sweet-seventeen-star__age .sweet-seventeen-star__mono { font-size: 5rem; }
.sweet-seventeen-star__note { display: flex; align-items: flex-start; gap: .2rem; justify-self: start; margin: .9rem 0 0 .3rem; rotate: -5deg; font-size: 1.6rem; color: var(--inv-primary); }
.sweet-seventeen-star__note svg { width: 2.6rem; translate: 0 -.9rem; scale: 1 -1; }
.sweet-seventeen-star__text { display: grid; justify-items: center; gap: .45rem; margin-top: 1.2rem; text-align: center; }
.sweet-seventeen-star__title {
    padding: .3rem .75rem; background: var(--inv-deep); color: var(--inv-shine);
    font: 800 .66rem/1.3 var(--s17-sans); letter-spacing: .22em; text-transform: uppercase;
}
.sweet-seventeen-star__name { font: 400 clamp(2.1rem, 10vw, 2.6rem)/1.02 var(--s17-serif); text-wrap: balance; }
.sweet-seventeen-star__turns { font: 700 .82rem/1.4 var(--s17-sans); letter-spacing: .08em; color: var(--inv-primary); }

.sweet-seventeen-facts {
    position: relative; margin-top: 1.8rem; padding: 1.3rem 1.15rem .6rem;
    border: 1.5px dashed color-mix(in srgb, var(--inv-primary) 45%, transparent); border-radius: 18px; background: #fff;
}
.sweet-seventeen-facts__label {
    position: absolute; top: -.75rem; left: 1rem; padding: .22rem .65rem; rotate: -2deg;
    background: var(--s17-foil); color: var(--inv-deep); font: 800 .62rem/1.3 var(--s17-sans); letter-spacing: .22em; text-transform: uppercase;
}
.sweet-seventeen-facts__row { display: grid; gap: .15rem; padding: .65rem 0; border-bottom: 1px solid var(--s17-line); }
.sweet-seventeen-facts__row:last-child { border-bottom: 0; }
.sweet-seventeen-facts dt { font: 800 .66rem/1.3 var(--s17-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--inv-primary); }
.sweet-seventeen-facts dd { font-weight: 600; font-size: .98rem; line-height: 1.45; }
.sweet-seventeen-socials { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .3rem !important; }
.sweet-seventeen-chip {
    display: inline-flex; align-items: center; gap: .4rem; min-height: 2.75rem; padding: 0 .95rem; border-radius: 999px;
    background: var(--inv-blush); color: var(--inv-text); font: 700 .85rem/1 var(--s17-sans); text-decoration: none;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--inv-primary) 25%, transparent);
}
.sweet-seventeen-chip .sweet-seventeen-icon { width: 1.05rem; height: 1.05rem; color: var(--inv-primary); }

/* ------------------------------------------------------------------ message: the pull quote */
.sweet-seventeen-pull { position: relative; padding-top: 2.6rem; }
.sweet-seventeen-pull__mark { position: absolute; top: 0; left: -.2rem; width: 3.6rem; color: var(--inv-accent); }
.sweet-seventeen-pull p { font: italic 400 clamp(1.6rem, 7.4vw, 1.95rem)/1.24 var(--s17-serif); color: var(--inv-text); }
.sweet-seventeen-pull cite { display: block; margin-top: 1rem; text-align: right; font-size: 1.9rem; font-style: normal; color: var(--inv-primary); }
.sweet-seventeen-pull__spark { position: absolute; top: 4.6rem; right: 1.4rem; width: 1.4rem; height: 1.4rem; }
html.inv-anim .sweet-seventeen-pull__spark, html.inv-anim .sweet-seventeen-pass__spark { animation: sweet-seventeen-twinkle 2.8s ease-in-out infinite; }
@keyframes sweet-seventeen-twinkle { 50% { transform: scale(.55) rotate(45deg); opacity: .5; } }

/* ------------------------------------------------------------------ events: agenda pages */
.sweet-seventeen-event {
    position: relative; margin-top: 2.6rem; padding: 0 1rem 1.1rem; border-radius: 22px;
    background: #fff; box-shadow: var(--s17-shadow);
}
.sweet-seventeen-event + .sweet-seventeen-event { margin-top: 3rem; }
.sweet-seventeen-event__visual { position: relative; }
.sweet-seventeen-event__polaroid { width: 94%; margin: -1.6rem auto 0; padding-bottom: .55rem; }
.sweet-seventeen-event__polaroid .sweet-seventeen-polaroid__photo { aspect-ratio: 16 / 11; }
.sweet-seventeen-event__sticker {
    position: absolute; z-index: 4; right: -.6rem; bottom: -1.4rem;
    display: grid; place-content: center; justify-items: center; width: 4.7rem; aspect-ratio: 1; border-radius: 50%; rotate: 9deg;
    background: var(--s17-foil); background-size: 200% 100%; color: var(--inv-deep);
    box-shadow: 0 10px 20px -10px color-mix(in srgb, var(--inv-deep) 80%, transparent), inset 0 0 0 2px color-mix(in srgb, #fff 50%, transparent);
    font: 800 .58rem/1.1 var(--s17-sans); letter-spacing: .16em; text-transform: uppercase;
}
.sweet-seventeen-event__sticker b { font: 400 1.9rem/.9 var(--s17-serif); letter-spacing: 0; }
.sweet-seventeen-event--plain { padding-top: 1.4rem; }
.sweet-seventeen-event--plain .sweet-seventeen-event__sticker { top: -1.6rem; right: .6rem; bottom: auto; }
.sweet-seventeen-event__body { padding: 1.5rem .25rem 0; }
.sweet-seventeen-event__no { font: 800 .64rem/1.2 var(--s17-sans); letter-spacing: .22em; text-transform: uppercase; color: var(--inv-primary); }
.sweet-seventeen-event__name { margin: .3rem 0 .85rem; font: 400 1.9rem/1.04 var(--s17-serif); padding-right: 1rem; }
.sweet-seventeen-rows { display: grid; gap: .6rem; margin: 0; padding: 0; list-style: none; font-size: .93rem; line-height: 1.45; }
.sweet-seventeen-rows li { display: grid; grid-template-columns: 1.4rem minmax(0, 1fr); gap: .65rem; align-items: start; }
.sweet-seventeen-rows .sweet-seventeen-icon { color: var(--inv-primary); margin-top: .05rem; }
.sweet-seventeen-rows strong { display: block; font-weight: 700; }
.sweet-seventeen-rows small { display: block; font-size: .86rem; opacity: .8; }
.sweet-seventeen-event__maps { display: grid; gap: .65rem; margin-top: 1.1rem; }
.sweet-seventeen-event__maps .inv-button { width: 100%; }
.sweet-seventeen-event__maps .inv-maps__frame { margin: 0; height: 180px; border-radius: 16px; }

/* buttons in this theme */
.sweet-seventeen-body .inv-button {
    min-height: 2.9rem; padding: .7rem 1.25rem; font: 800 .88rem/1.2 var(--s17-sans); letter-spacing: .03em;
    background: var(--inv-deep); color: var(--inv-shine);
}
.sweet-seventeen-body .inv-button--outline { background: #fff; color: var(--inv-text); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--inv-text) 22%, transparent); }
.sweet-seventeen-body .inv-button:focus-visible, .sweet-seventeen-body a:focus-visible, .sweet-seventeen-body button:focus-visible {
    outline: 3px solid var(--inv-primary); outline-offset: 3px;
}
.sweet-seventeen-cover .inv-button:focus-visible, .sweet-seventeen-countdown .inv-button:focus-visible, .sweet-seventeen-pass__back .inv-button:focus-visible { outline-color: var(--inv-shine); }

/* ------------------------------------------------------------------ countdown: the stat strip */
.sweet-seventeen-countdown__note { margin: -.6rem 0 .9rem; rotate: -3deg; font-size: 1.55rem; color: var(--inv-accent); }
.sweet-seventeen-count .inv-countdown {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; padding: 1rem 0 .9rem;
    border-top: 4px double color-mix(in srgb, var(--inv-accent) 60%, transparent);
    border-bottom: 4px double color-mix(in srgb, var(--inv-accent) 60%, transparent);
}
.sweet-seventeen-count .inv-countdown__item { min-width: 0; padding: .2rem 0; border-radius: 0; background: none; border-left: 1px solid color-mix(in srgb, #fff 16%, transparent); }
.sweet-seventeen-count .inv-countdown__item:first-child { border-left: 0; }
.sweet-seventeen-count .inv-countdown__value { font: 400 clamp(2.5rem, 12.5vw, 3.3rem)/1 var(--s17-serif); }
html.inv-anim .sweet-seventeen-count .inv-countdown__value { animation: sweet-seventeen-sheen 6s ease-in-out infinite; }
.sweet-seventeen-count .inv-countdown__label { margin-top: .25rem; font: 800 .6rem/1.2 var(--s17-sans); letter-spacing: .2em; text-transform: uppercase; opacity: .82; }
.sweet-seventeen-count .inv-countdown__done { padding: 1rem 0; font: italic 400 1.4rem/1.3 var(--s17-serif); }
.sweet-seventeen-count .inv-countdown__actions { display: grid; gap: .6rem; margin-top: 1.3rem; }
.sweet-seventeen-count .inv-button--outline { background: transparent; color: var(--inv-shine); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--inv-accent) 65%, transparent); }
.sweet-seventeen-planner { position: relative; margin-top: 2.2rem; }
.sweet-seventeen-cal {
    --inv-cal-bg: #fffaf8; --inv-cal-text: var(--inv-text); --inv-cal-mark: var(--inv-primary);
    width: 100%; margin: 0; padding: 1.3rem 1.2rem 1rem; border-radius: 6px; rotate: -1deg;
    box-shadow: 0 24px 40px -24px rgb(0 0 0 / .7);
}
.sweet-seventeen-cal .inv-cal__month { font: italic 400 1.9rem/1 var(--s17-serif); }

/* ------------------------------------------------------------------ party: the style guide */
.sweet-seventeen-theme {
    display: grid; justify-items: center; gap: .4rem; padding: 1.4rem 1rem 1.3rem; text-align: center;
    background: #fff; box-shadow: inset 0 0 0 5px #fff, inset 0 0 0 6px color-mix(in srgb, var(--inv-gold) 70%, transparent), var(--s17-shadow);
}
.sweet-seventeen-theme__name { padding: 0 .1em .08em; font: italic 400 clamp(2rem, 9.6vw, 2.5rem)/1.05 var(--s17-serif); text-wrap: balance; }
.sweet-seventeen-dress { display: grid; gap: 1.1rem; margin-top: 1.6rem; }
.sweet-seventeen-dress__code { display: flex; align-items: flex-start; gap: .75rem; font-weight: 600; font-size: 1rem; line-height: 1.45; }
.sweet-seventeen-dress__code > .sweet-seventeen-icon {
    width: 2.6rem; height: 2.6rem; padding: .6rem; border-radius: 50%; background: var(--inv-blush); color: var(--inv-primary);
}
.sweet-seventeen-dress__code .sweet-seventeen-label { margin-bottom: .1rem; }

/* nail-polish bottles on a shelf */
.sweet-seventeen-polish {
    position: relative; display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-end; gap: .9rem 1.3rem;
    margin: .2rem 0 0; padding: .6rem .8rem .55rem; list-style: none;
}
.sweet-seventeen-polish::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: .55rem; border-radius: 4px;
    background: linear-gradient(to bottom, var(--inv-accent), var(--inv-gold));
    box-shadow: 0 10px 18px -10px color-mix(in srgb, var(--inv-deep) 70%, transparent);
}
.sweet-seventeen-polish__item { width: 3.3rem; transform-origin: 50% 100%; transition: transform .5s var(--s17-spring); }
.sweet-seventeen-polish__item:nth-child(odd) { rotate: -4deg; }
.sweet-seventeen-polish__item:nth-child(even) { rotate: 3deg; }
.sweet-seventeen-polish__item:hover { transform: translateY(-6px) rotate(-6deg); }
.sweet-seventeen-polish__item svg { display: block; width: 100%; height: auto; overflow: visible; }
.sweet-seventeen-polish__cap { fill: var(--inv-deep); }
.sweet-seventeen-polish__neck { fill: var(--inv-gold); }
.sweet-seventeen-polish__glass { fill: color-mix(in srgb, #fff 70%, transparent); stroke: color-mix(in srgb, var(--inv-text) 28%, transparent); stroke-width: 1.4; }
.sweet-seventeen-polish__fill { fill: var(--sweet-seventeen-polish); stroke: color-mix(in srgb, var(--inv-text) 14%, transparent); stroke-width: 1; }
.sweet-seventeen-polish__shine { fill: none; stroke: #fff; stroke-opacity: .7; stroke-width: 3; stroke-linecap: round; }
.sweet-seventeen-polish__shine--cap { stroke-width: 2; stroke-opacity: .35; }
html.inv-anim .sweet-seventeen-polish__item { animation: sweet-seventeen-wobble 4.5s ease-in-out infinite; animation-delay: calc(var(--i, 0) * -1.3s); }
@keyframes sweet-seventeen-wobble { 0%, 100% { transform: none; } 8% { transform: rotate(-4deg); } 16% { transform: rotate(3deg); } 24% { transform: none; } }

.sweet-seventeen-paper {
    position: relative; margin: 2.2rem .3rem 0; padding: 1.5rem 1.2rem 1.15rem; rotate: -1.2deg;
    background:
        repeating-linear-gradient(to bottom, transparent 0 1.95rem, color-mix(in srgb, var(--inv-primary) 16%, transparent) 1.95rem 2rem),
        #fffdf9;
    box-shadow: var(--s17-shadow);
}
.sweet-seventeen-paper__label { font: 700 1.25rem/1 var(--s17-hand); color: var(--inv-primary); }
.sweet-seventeen-paper__text { margin-top: .35rem !important; font: 600 1.45rem/1.35 var(--s17-hand); color: var(--inv-text); }
.sweet-seventeen-hashtag { display: grid; justify-items: center; gap: .35rem; margin-top: 2rem; text-align: center; }
.sweet-seventeen-hashtag__tag { max-width: 100%; padding: 0 .1em .06em; font: italic 400 clamp(1.9rem, 9vw, 2.4rem)/1.1 var(--s17-serif); overflow-wrap: anywhere; }

/* ------------------------------------------------------------------ rundown: candle rows */
.sweet-seventeen-candles { display: grid; gap: .55rem; margin: 0; padding: 0; list-style: none; }
.sweet-seventeen-candle {
    display: grid; grid-template-columns: 2.2rem minmax(0, 1fr); gap: .9rem; align-items: center;
    padding: .75rem 1rem .75rem .7rem; border-radius: 18px;
    background: color-mix(in srgb, #fff 5%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, #fff 11%, transparent);
}
.sweet-seventeen-candle__art { display: block; width: 2.2rem; height: auto; overflow: visible; color: var(--inv-shine); }
.sweet-seventeen-candle__glow { fill: #ffbf7a; opacity: .3; filter: blur(4px); }
.sweet-seventeen-candle__flame { fill: #ffc56e; }
.sweet-seventeen-candle__core { fill: #fff6d6; }
.sweet-seventeen-candle__wick { stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; }
.sweet-seventeen-candle__wax { fill: var(--inv-blush); }
.sweet-seventeen-candle:nth-child(3n + 2) .sweet-seventeen-candle__wax { fill: var(--inv-accent); }
.sweet-seventeen-candle:nth-child(3n) .sweet-seventeen-candle__wax { fill: var(--inv-shine); }
.sweet-seventeen-candle__stripe { fill: none; stroke: var(--inv-primary); stroke-opacity: .45; stroke-width: 2.2; }
.sweet-seventeen-candle__flame, .sweet-seventeen-candle__core, .sweet-seventeen-candle__glow { transform-box: fill-box; transform-origin: 50% 100%; }
html.inv-anim .sweet-seventeen-candle__flame, html.inv-anim .sweet-seventeen-candle__core { animation: sweet-seventeen-flicker 1.6s ease-in-out infinite alternate; animation-delay: calc(var(--i, 0) * -.37s); }
html.inv-anim .sweet-seventeen-candle__glow { animation: sweet-seventeen-glow 2.2s ease-in-out infinite alternate; animation-delay: calc(var(--i, 0) * -.5s); }
@keyframes sweet-seventeen-flicker { 0% { transform: scale(1, 1) rotate(-2deg); } 50% { transform: scale(.92, 1.08) rotate(2deg); } 100% { transform: scale(1.04, .95) rotate(-1deg); } }
@keyframes sweet-seventeen-glow { from { opacity: .18; transform: scale(.9); } to { opacity: .42; transform: scale(1.1); } }
.sweet-seventeen-candle__time { display: inline-block; font: 400 1.65rem/1 var(--s17-serif); }
html.inv-anim .sweet-seventeen-candle__time { animation: sweet-seventeen-sheen 6s ease-in-out infinite; animation-delay: calc(var(--i, 0) * .4s); }
.sweet-seventeen-candle__text h3 { margin-top: .15rem; font: 700 1rem/1.3 var(--s17-sans); color: #fff; }
.sweet-seventeen-candle__text p { margin-top: .2rem; font-size: .86rem; line-height: 1.45; opacity: .82; }

/* ------------------------------------------------------------------ story: throwback polaroids */
.sweet-seventeen-throwback { display: grid; gap: 2rem; margin: 0; padding: .6rem 0 0; list-style: none; }
.sweet-seventeen-throwback__item { display: grid; grid-template-columns: 46% minmax(0, 1fr); gap: 1.1rem; align-items: center; }
.sweet-seventeen-throwback__item--flip { grid-template-columns: minmax(0, 1fr) 46%; }
.sweet-seventeen-throwback__item--flip .sweet-seventeen-throwback__polaroid { order: 2; }
.sweet-seventeen-throwback__polaroid { padding: .45rem .45rem 2.1rem; }
.sweet-seventeen-throwback__polaroid .sweet-seventeen-polaroid__caption { bottom: .45rem; font-size: 1.3rem; }
.sweet-seventeen-throwback__no { display: block; font: italic 400 2.6rem/.9 var(--s17-serif); }
.sweet-seventeen-throwback__text h3 { margin-top: .3rem; font: 400 1.45rem/1.12 var(--s17-serif); }
.sweet-seventeen-throwback__text p { margin-top: .35rem; font-size: .9rem; line-height: 1.6; color: color-mix(in srgb, var(--inv-text) 88%, transparent); }

/* ------------------------------------------------------------------ gallery: photo-booth strips */
.sweet-seventeen-gallery__note { margin: -.7rem 0 1.2rem; rotate: -2deg; font-size: 1.4rem; color: var(--inv-primary); }
.sweet-seventeen-booth .inv-gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: dense; column-gap: 1.2rem; row-gap: 0;
    padding: 0 .4rem 1.8rem;
    filter: drop-shadow(0 16px 18px color-mix(in srgb, var(--inv-deep) 28%, transparent));
}
.sweet-seventeen-booth .inv-gallery__item {
    aspect-ratio: auto; padding: .4rem .5rem 0; border-radius: 0; background: #fff; cursor: zoom-in;
}
.sweet-seventeen-booth .inv-gallery__item:nth-child(6n + 1), .sweet-seventeen-booth .inv-gallery__item:nth-child(6n + 2), .sweet-seventeen-booth .inv-gallery__item:nth-child(6n + 3) { grid-column: 1; }
.sweet-seventeen-booth .inv-gallery__item:nth-child(6n + 4), .sweet-seventeen-booth .inv-gallery__item:nth-child(6n + 5), .sweet-seventeen-booth .inv-gallery__item:nth-child(6n) { grid-column: 2; translate: 0 1.6rem; }
.sweet-seventeen-booth .inv-gallery__item:nth-child(3n + 1) { padding-top: .55rem; border-radius: 3px 3px 0 0; }
.sweet-seventeen-booth .inv-gallery__item:nth-child(3n), .sweet-seventeen-booth .inv-gallery__item:last-child { padding-bottom: 2.1rem; border-radius: 0 0 3px 3px; }
.sweet-seventeen-booth .inv-gallery__item:nth-child(n + 7):nth-child(6n + 1), .sweet-seventeen-booth .inv-gallery__item:nth-child(n + 7):nth-child(6n + 4) { margin-top: 1.4rem; }
.sweet-seventeen-booth .inv-gallery__item img, .sweet-seventeen-booth .inv-gallery__item video { height: auto; aspect-ratio: 1 / .92; border-radius: 1px; }
.sweet-seventeen-booth .inv-gallery__item:nth-child(3n)::after, .sweet-seventeen-booth .inv-gallery__item:last-child::after {
    content: 'photo booth'; position: absolute; left: 0; right: 0; bottom: .55rem; text-align: center;
    font: 700 1.05rem/1 var(--s17-hand); color: var(--inv-primary);
}

/* ------------------------------------------------------------------ live streaming: on air */
.sweet-seventeen-onair {
    display: grid; justify-items: center; gap: .75rem; padding: 1.8rem 1.2rem 1.5rem; text-align: center;
    border-radius: 26px; background: #fff; box-shadow: var(--s17-shadow);
}
.sweet-seventeen-onair__ring {
    position: relative; width: 7.4rem; aspect-ratio: 1; padding: 4px; border-radius: 50%; margin-bottom: .5rem;
    background: conic-gradient(from 210deg, var(--inv-primary), var(--inv-accent), var(--inv-gold), var(--inv-shine), var(--inv-primary));
}
.sweet-seventeen-onair__avatar {
    display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; border: 4px solid #fff;
    background: var(--inv-blush) var(--sweet-seventeen-photo) center 25% / cover no-repeat;
}
.sweet-seventeen-onair__avatar--initial { font: italic 400 3.2rem/1 var(--s17-serif); color: var(--inv-primary); }
.sweet-seventeen-onair__live {
    position: absolute; left: 50%; bottom: -.55rem; translate: -50% 0; padding: .2rem .6rem; border-radius: 5px;
    background: var(--inv-primary); color: #fff; border: 2px solid #fff; font: 800 .64rem/1.2 var(--s17-sans); letter-spacing: .18em; text-transform: uppercase;
}
html.inv-anim .sweet-seventeen-onair__ring::after {
    content: ''; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid var(--inv-accent);
    animation: sweet-seventeen-ping 2.4s ease-out infinite;
}
@keyframes sweet-seventeen-ping { from { transform: scale(.94); opacity: .9; } to { transform: scale(1.22); opacity: 0; } }
.sweet-seventeen-onair__text { max-width: 19rem; font-size: .95rem; }
.sweet-seventeen-onair__note { font-weight: 800; font-size: .9rem; color: var(--inv-primary); }
.sweet-seventeen-onair__button { margin-top: .3rem; }
.sweet-seventeen-onair__button .sweet-seventeen-icon { width: 1rem; height: 1rem; fill: currentColor; }

/* ------------------------------------------------------------------ forms (RSVP pass, wishes letter) */
.sweet-seventeen-form .inv-rsvp__deadline {
    display: inline-block; margin-bottom: 1rem; padding: .35rem .8rem; border-radius: 999px;
    background: var(--inv-blush); font-size: .78rem; font-weight: 700;
}
.sweet-seventeen-form .inv-form { gap: 1.05rem; }
.sweet-seventeen-form .inv-form label, .sweet-seventeen-form .inv-form__choices legend {
    gap: .4rem; font: 800 .72rem/1.3 var(--s17-sans); letter-spacing: .12em; text-transform: uppercase;
    color: color-mix(in srgb, var(--inv-text) 86%, transparent);
}
.sweet-seventeen-form .inv-form input:not([type=radio]):not([type=checkbox]),
.sweet-seventeen-form .inv-form select,
.sweet-seventeen-form .inv-form textarea {
    min-height: 3.1rem; padding: .8rem 1rem; border: 0; border-radius: 14px;
    background: color-mix(in srgb, var(--inv-blush) 40%, #fff); color: var(--inv-text);
    box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--inv-text) 14%, transparent);
    font: 500 1rem/1.4 var(--s17-sans); letter-spacing: 0; text-transform: none;
    transition: box-shadow .2s ease, background .2s ease;
}
.sweet-seventeen-form .inv-form textarea { min-height: 6.5rem; resize: vertical; }
.sweet-seventeen-form .inv-form input:not([type=radio]):focus, .sweet-seventeen-form .inv-form select:focus, .sweet-seventeen-form .inv-form textarea:focus {
    outline: none; background: #fff;
    box-shadow: inset 0 0 0 2px var(--inv-primary), 0 0 0 4px color-mix(in srgb, var(--inv-primary) 20%, transparent);
}
.sweet-seventeen-form .inv-form select {
    appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 2.6rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23866' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 1rem center; background-size: 1.1rem;
}

/* attendance: three chunky toggle cards with a hard shadow; the chosen one turns to foil and presses down */
.sweet-seventeen-form .inv-form__choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .55rem; min-width: 0; margin: 0; padding: 0; border: 0; }
.sweet-seventeen-form .inv-form__choices legend { float: left; width: 100%; grid-column: 1 / -1; margin: 0 0 .1rem; padding: 0; }
.sweet-seventeen-form .inv-form__choices label {
    position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .3rem;
    min-height: 4.4rem; padding: .6rem .25rem; border-radius: 16px; cursor: pointer; text-align: center;
    background: #fff; color: var(--inv-text);
    box-shadow: inset 0 0 0 2px var(--inv-text), 0 4px 0 var(--inv-text);
    font: 800 .82rem/1.15 var(--s17-sans); letter-spacing: 0; text-transform: none;
    transition: transform .15s ease, box-shadow .15s ease, background-color .2s ease;
}
.sweet-seventeen-form .inv-form__choices label::before {
    content: ''; width: 1.2rem; height: 1.2rem; background: currentColor;
    -webkit-mask: var(--sweet-seventeen-mask) center / contain no-repeat; mask: var(--sweet-seventeen-mask) center / contain no-repeat;
}
.sweet-seventeen-form .inv-form__choices label:nth-of-type(1) { --sweet-seventeen-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 20s-7.5-4.6-7.5-10.2A4.3 4.3 0 0 1 12 7.2a4.3 4.3 0 0 1 7.5 2.6C19.5 15.4 12 20 12 20Z' fill='%23000'/%3E%3C/svg%3E"); }
.sweet-seventeen-form .inv-form__choices label:nth-of-type(2) { --sweet-seventeen-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M6.5 6.5l11 11M17.5 6.5l-11 11'/%3E%3C/svg%3E"); }
.sweet-seventeen-form .inv-form__choices label:nth-of-type(3) { --sweet-seventeen-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 9a3 3 0 1 1 4.2 2.8c-.8.4-1.2 1-1.2 1.9v.6M12 18h.01'/%3E%3C/svg%3E"); }
.sweet-seventeen-form .inv-form__choices label:has(input:checked) {
    background: var(--s17-foil); background-size: 200% 100%; color: var(--inv-deep);
    transform: translateY(3px); box-shadow: inset 0 0 0 2px var(--inv-text), 0 1px 0 var(--inv-text);
}
.sweet-seventeen-form .inv-form__choices input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.sweet-seventeen-form .inv-form__choices label:has(input:focus-visible) { outline: 3px solid var(--inv-primary); outline-offset: 3px; }
@supports not selector(:has(*)) {
    .sweet-seventeen-form .inv-form__choices input { position: static; width: 1rem; height: 1rem; opacity: 1; }
}
.sweet-seventeen-form .inv-form > .inv-button[type="submit"] {
    width: 100%; min-height: 3.3rem; margin-top: .25rem; font-size: .95rem; letter-spacing: .06em;
    background: var(--inv-deep); color: var(--inv-shine);
    box-shadow: 0 14px 24px -14px color-mix(in srgb, var(--inv-deep) 90%, transparent);
}
.sweet-seventeen-form .inv-form__notice { padding: .9rem 1rem; border-radius: 14px; background: var(--inv-blush); color: var(--inv-text); font-size: .86rem; }
.sweet-seventeen-form .inv-form__error { border-radius: 14px; }
.sweet-seventeen-form .inv-rsvp__done { gap: .8rem; }
.sweet-seventeen-form .inv-rsvp__done .inv-button { justify-self: center; }

/* ------------------------------------------------------------------ RSVP: the VIP pass on a lanyard */
.sweet-seventeen-rsvp { background: linear-gradient(to bottom, var(--inv-background), var(--inv-blush)); }
.sweet-seventeen-badge { position: relative; display: grid; justify-items: center; }
.sweet-seventeen-lanyard { display: block; width: 62%; height: 4.6rem; margin-top: -.6rem; }
.sweet-seventeen-lanyard__strap { fill: var(--inv-primary); }
.sweet-seventeen-lanyard__stitch { fill: none; stroke: var(--inv-shine); stroke-opacity: .7; stroke-width: 1.2; stroke-dasharray: 3 4; }
.sweet-seventeen-badge__clip { position: relative; z-index: 2; width: 2.5rem; margin-top: -1.15rem; fill: var(--inv-gold); filter: drop-shadow(0 3px 3px rgb(0 0 0 / .25)); }
.sweet-seventeen-pass { width: 100%; max-width: 23rem; margin-top: -.5rem; perspective: 1500px; transform-origin: 50% -2rem; }
html.inv-anim .sweet-seventeen-badge.is-revealed .sweet-seventeen-pass { animation: sweet-seventeen-swing 3s ease-out .4s; }
@keyframes sweet-seventeen-swing { 0% { rotate: 0deg; } 15% { rotate: 3.2deg; } 35% { rotate: -2.2deg; } 55% { rotate: 1.2deg; } 75% { rotate: -.5deg; } 100% { rotate: 0deg; } }
.sweet-seventeen-pass__inner { display: grid; transform-style: preserve-3d; transition: transform .95s cubic-bezier(.45, .05, .2, 1); }
.sweet-seventeen-pass.is-flipped .sweet-seventeen-pass__inner { transform: rotateY(180deg); }
.sweet-seventeen-pass__face {
    position: relative; grid-area: 1 / 1; padding: 2.4rem 1.2rem 1.35rem; border-radius: 22px; overflow: hidden;
    -webkit-backface-visibility: hidden; backface-visibility: hidden;
}
.sweet-seventeen-pass__front { background: #fff; box-shadow: 0 30px 50px -30px color-mix(in srgb, var(--inv-deep) 75%, transparent), inset 0 0 0 1px var(--s17-line); }
.sweet-seventeen-pass__front::before {
    content: ''; position: absolute; inset: 0 0 auto; height: .5rem; background: var(--s17-foil); background-size: 200% 100%;
}
.sweet-seventeen-pass__slot {
    position: absolute; top: 1rem; left: 50%; width: 3.2rem; height: .62rem; translate: -50% 0; border-radius: 999px;
    background: color-mix(in srgb, var(--inv-text) 16%, var(--inv-background)); box-shadow: inset 0 2px 3px rgb(0 0 0 / .2);
}
.sweet-seventeen-pass__head { display: grid; justify-items: center; gap: .2rem; margin-bottom: 1.2rem; padding-bottom: 1rem; text-align: center; border-bottom: 2px dashed var(--s17-line); }
.sweet-seventeen-pass__kicker { font: 800 .62rem/1.3 var(--s17-sans); letter-spacing: .24em; text-transform: uppercase; color: var(--inv-primary); }
.sweet-seventeen-pass__title { padding: 0 .06em .05em; font: 400 2.8rem/.95 var(--s17-serif); text-transform: uppercase; letter-spacing: .02em; }
.sweet-seventeen-pass__meta { font: 700 .8rem/1.4 var(--s17-sans); color: color-mix(in srgb, var(--inv-text) 80%, transparent); }

.sweet-seventeen-pass__back {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .65rem; text-align: center;
    transform: rotateY(180deg);
    background:
        radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--inv-primary) 55%, transparent), transparent 60%),
        radial-gradient(circle, color-mix(in srgb, var(--inv-shine) 25%, transparent) 1px, transparent 1.6px) 0 0 / 18px 18px,
        var(--inv-deep);
    color: var(--inv-shine);
    box-shadow: 0 30px 50px -30px color-mix(in srgb, var(--inv-deep) 85%, transparent);
}
.sweet-seventeen-pass__back .sweet-seventeen-pass__slot { background: color-mix(in srgb, #000 40%, var(--inv-deep)); }
.sweet-seventeen-pass__vip { padding: 0 .05em; font: 400 clamp(5.5rem, 28vw, 7rem)/.85 var(--s17-serif); letter-spacing: .04em; }
.sweet-seventeen-pass.is-flipped .sweet-seventeen-pass__vip { animation: sweet-seventeen-sheen 3.5s ease-in-out .6s infinite; }
.sweet-seventeen-pass__guest {
    max-width: 100%; padding: .45rem 1rem; border-top: 1px solid color-mix(in srgb, var(--inv-accent) 50%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--inv-accent) 50%, transparent);
    font: 800 1.3rem/1.25 var(--s17-sans); letter-spacing: .04em; color: #fff; overflow-wrap: anywhere;
}
.sweet-seventeen-pass__slogan { font: 700 2rem/1 var(--s17-hand); color: var(--inv-accent); rotate: -3deg; }
.sweet-seventeen-pass__notice { max-width: 18rem; font-size: .78rem; line-height: 1.45; opacity: .85; }
.sweet-seventeen-pass__barcode { width: 8rem; height: 1.9rem; color: var(--inv-shine); opacity: .85; }
.sweet-seventeen-body .sweet-seventeen-pass__again { background: transparent; color: var(--inv-shine); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--inv-accent) 70%, transparent); }
.sweet-seventeen-pass__spark { position: absolute; color: var(--inv-accent); }
.sweet-seventeen-pass__spark--1 { top: 2.6rem; left: 1.6rem; width: 1.3rem; height: 1.3rem; }
.sweet-seventeen-pass__spark--2 { right: 1.8rem; bottom: 5.5rem; width: 1rem; height: 1rem; animation-delay: -1.2s !important; }

/* ------------------------------------------------------------------ wishes: fan mail */
.sweet-seventeen-letter {
    position: relative; padding: 1.7rem 1.15rem 1.3rem; border-radius: 6px;
    background: #fffdfb;
    box-shadow: var(--s17-shadow), inset 0 3px 0 color-mix(in srgb, var(--inv-accent) 55%, transparent);
}
.sweet-seventeen-letter__sent {
    position: absolute; z-index: 3; top: -1.1rem; right: .6rem; padding: .25rem .6rem; rotate: 6deg;
    background: var(--inv-deep); color: var(--inv-shine); font-size: 1.35rem;
}
html.inv-anim .sweet-seventeen-letter__sent { animation: sweet-seventeen-pop .55s var(--s17-spring) both; }
html.inv-anim .sweet-seventeen-letter.is-sent { animation: sweet-seventeen-nudge .5s var(--s17-spring); }
@keyframes sweet-seventeen-pop { from { transform: scale(.3); opacity: 0; } }
@keyframes sweet-seventeen-nudge { 40% { transform: translateY(4px) scale(.99); } }
.sweet-seventeen-notes .inv-wishes__list { gap: .95rem; margin-top: 1.5rem; padding: .5rem .5rem .6rem .3rem; --inv-wishes-height: 24rem; }
.sweet-seventeen-notes .inv-wish {
    position: relative; padding: 1rem 1rem .8rem; border-radius: 3px; rotate: -.8deg;
    background: color-mix(in srgb, var(--inv-blush) 75%, #fff);
    box-shadow: 0 10px 16px -12px color-mix(in srgb, var(--inv-deep) 60%, transparent);
}
.sweet-seventeen-notes .inv-wish:nth-child(even) { rotate: .8deg; background: color-mix(in srgb, var(--inv-shine) 85%, #fff); }
.sweet-seventeen-notes .inv-wish:nth-child(3n) { background: #fff; box-shadow: inset 0 0 0 1px var(--s17-line), 0 10px 16px -12px color-mix(in srgb, var(--inv-deep) 60%, transparent); }
.sweet-seventeen-notes .inv-wish::before {
    content: ''; position: absolute; top: -.45rem; left: 50%; width: 3rem; height: .9rem; translate: -50% 0; rotate: 3deg;
    background: color-mix(in srgb, var(--inv-accent) 50%, transparent);
}
.sweet-seventeen-notes .inv-wish__name { font: 700 1.45rem/1 var(--s17-hand); color: var(--inv-primary); }
.sweet-seventeen-notes .inv-wish__message { margin-top: .35rem; font-size: .92rem; line-height: 1.55; }
.sweet-seventeen-notes .inv-wish__time { opacity: .65; }
.sweet-seventeen-notes .inv-wish__reply { border-left-color: var(--inv-primary); background: color-mix(in srgb, #fff 60%, transparent); }
.sweet-seventeen-notes .inv-wishes__empty { padding: .4rem .2rem; font: 700 1.3rem/1.3 var(--s17-hand); color: var(--inv-primary); opacity: 1; }

/* ------------------------------------------------------------------ gift: glossy cards */
.sweet-seventeen-wallet { margin-top: 1.3rem; }
.sweet-seventeen-wallet .inv-gift__accounts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; }
.sweet-seventeen-wallet .inv-gift__accounts:has(> :only-child) { grid-template-columns: minmax(0, 1fr); }
.sweet-seventeen-wallet .inv-gift__account {
    position: relative; display: flex; flex-direction: column; gap: .25rem; min-width: 0; margin: 0;
    padding: 1rem .85rem .85rem; border-radius: 16px; overflow: hidden; color: var(--inv-deep);
    background: linear-gradient(135deg, var(--inv-accent), var(--inv-shine) 48%, var(--inv-gold));
    box-shadow: var(--s17-shadow), inset 0 0 0 1px color-mix(in srgb, #fff 50%, transparent);
}
.sweet-seventeen-wallet .inv-gift__accounts > .inv-gift__account:nth-child(2) { background: linear-gradient(135deg, var(--inv-deep), color-mix(in srgb, var(--inv-primary) 70%, var(--inv-deep))); color: var(--inv-shine); }
.sweet-seventeen-wallet .inv-gift__accounts > .inv-gift__account:nth-child(2) .inv-button { background: var(--inv-shine); color: var(--inv-deep); }
.sweet-seventeen-wallet .inv-gift__account > * { position: relative; z-index: 1; margin: 0; }
/* the glossy band that sweeps over a card when it is touched */
.sweet-seventeen-wallet .inv-gift__account::after {
    content: ''; position: absolute; inset: -40% auto -40% -60%; width: 40%; rotate: 20deg; pointer-events: none;
    background: linear-gradient(to right, transparent, color-mix(in srgb, #fff 45%, transparent), transparent);
    transition: translate .9s ease;
}
.sweet-seventeen-wallet .inv-gift__account:hover::after { translate: 420% 0; }
.sweet-seventeen-wallet .inv-gift__accounts .inv-gift__bank { display: flex; align-items: center; justify-content: space-between; gap: .4rem; min-height: 2rem; font: 800 .95rem/1.2 var(--s17-sans); }
/* the card chip */
.sweet-seventeen-wallet .inv-gift__accounts .inv-gift__bank::after {
    content: ''; flex: none; width: 1.75rem; height: 1.3rem; border-radius: 4px;
    background: linear-gradient(to bottom, transparent 45%, rgb(0 0 0 / .15) 45% 55%, transparent 55%), linear-gradient(135deg, #e9d3a6, #b99559);
    box-shadow: inset 0 0 0 1px rgb(0 0 0 / .18);
}
.sweet-seventeen-wallet .inv-gift__logo { height: 1.9rem; border-radius: .45rem; }
.sweet-seventeen-wallet .inv-gift__number { margin-top: .7rem !important; font: 800 1.02rem/1.2 var(--s17-sans); letter-spacing: .06em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.sweet-seventeen-wallet .inv-gift__holder { font-size: .76rem; font-weight: 700; opacity: .85; }
.sweet-seventeen-wallet .inv-gift__account .inv-button { width: 100%; min-height: 2.75rem; margin-top: .7rem !important; padding: .5rem .6rem; font-size: .78rem; background: var(--inv-deep); color: var(--inv-shine); box-shadow: none; }
.sweet-seventeen-wallet .inv-gift__address {
    margin-top: .8rem; background: #fffdfb; color: var(--inv-text);
    border: 1.5px dashed color-mix(in srgb, var(--inv-primary) 45%, transparent); box-shadow: var(--s17-shadow);
    font-size: .92rem;
}
.sweet-seventeen-wallet .inv-gift__address .inv-gift__bank { font: 800 .66rem/1.3 var(--s17-sans); letter-spacing: .22em; text-transform: uppercase; color: var(--inv-primary); }
.sweet-seventeen-wallet .inv-gift__address .inv-gift__holder { font-size: 1rem; font-weight: 800; opacity: 1; }
.sweet-seventeen-wallet .inv-gift__address::after { display: none; }

/* ------------------------------------------------------------------ wishlist: hang tags */
.sweet-seventeen-tags { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem .8rem; margin: 2.2rem 0 0; padding: 0; list-style: none; }
.sweet-seventeen-tag {
    position: relative; display: flex; flex-direction: column; align-items: center; gap: .3rem; text-align: center;
    padding: 2rem .8rem 1rem; border-radius: 26px 26px 14px 14px; background: #fff; rotate: var(--sweet-seventeen-tilt, 0deg);
    box-shadow: var(--s17-shadow), inset 0 0 0 1px var(--s17-line);
}
.sweet-seventeen-tag::before { content: ''; position: absolute; top: -1.4rem; left: 50%; width: 1.5px; height: 2.2rem; background: var(--inv-gold); }
.sweet-seventeen-tag:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: min(100%, 12.5rem); }
.sweet-seventeen-tag__hole { position: absolute; top: .65rem; left: 50%; width: .75rem; height: .75rem; translate: -50% 0; border-radius: 50%; background: var(--inv-background); box-shadow: inset 0 0 0 2px var(--inv-gold); }
.sweet-seventeen-tag__photo { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; }
.sweet-seventeen-tag__icon { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; background: var(--inv-blush); color: var(--inv-primary); }
.sweet-seventeen-tag__no { margin-top: .2rem; font: 800 .6rem/1.2 var(--s17-sans); letter-spacing: .2em; text-transform: uppercase; color: var(--inv-primary); }
.sweet-seventeen-tag__name { font: 400 1.35rem/1.1 var(--s17-serif); }
.sweet-seventeen-tag__note { font-size: .8rem; line-height: 1.4; opacity: .82; }
.sweet-seventeen-tag__link {
    display: inline-flex; align-items: center; gap: .3rem; min-height: 2.75rem; margin-top: .4rem; padding: 0 1rem; border-radius: 999px;
    background: var(--inv-deep); color: var(--inv-shine); font: 800 .78rem/1 var(--s17-sans); text-decoration: none;
}
.sweet-seventeen-tag__link .sweet-seventeen-icon { width: .95rem; height: .95rem; }

/* ------------------------------------------------------------------ co-hosts: special thanks */
.sweet-seventeen-thanks { display: flex; flex-wrap: wrap; justify-content: center; gap: .35rem .5rem; margin: 0; padding: .4rem 0 0; list-style: none; text-align: center; }
.sweet-seventeen-thanks li { display: inline-flex; align-items: center; gap: .5rem; font: italic 400 1.4rem/1.3 var(--s17-serif); }
.sweet-seventeen-thanks li + li::before {
    content: ''; width: .6rem; height: .6rem; background: var(--inv-gold);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.5c.7 5.6 4.9 9.8 10.5 10.5-5.6.7-9.8 4.9-10.5 10.5C11.3 16.9 7.1 12.7 1.5 12 7.1 11.3 11.3 7.1 12 1.5Z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.5c.7 5.6 4.9 9.8 10.5 10.5-5.6.7-9.8 4.9-10.5 10.5C11.3 16.9 7.1 12.7 1.5 12 7.1 11.3 11.3 7.1 12 1.5Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ------------------------------------------------------------------ contacts: hotline */
.sweet-seventeen-hotline { display: grid; gap: .7rem; margin: 1.2rem 0 0; padding: 0; list-style: none; }
.sweet-seventeen-hotline__item {
    display: grid; grid-template-columns: 3rem minmax(0, 1fr) auto; gap: .75rem; align-items: center;
    padding: .6rem; border-radius: 999px; background: #fff; box-shadow: var(--s17-shadow), inset 0 0 0 1px var(--s17-line);
}
.sweet-seventeen-hotline__badge { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; background: var(--s17-foil); background-size: 200% 100%; color: var(--inv-deep); }
.sweet-seventeen-hotline__text { display: grid; line-height: 1.3; }
.sweet-seventeen-hotline__text small { font-size: .8rem; opacity: .78; }
.sweet-seventeen-hotline__wa {
    display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 1rem; border-radius: 999px;
    background: var(--inv-deep); color: var(--inv-shine); font: 800 .8rem/1 var(--s17-sans); text-decoration: none;
}
.sweet-seventeen-hotline__phone { padding-right: .8rem; font-weight: 700; }

/* ------------------------------------------------------------------ health protocol */
.sweet-seventeen-protocol__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; margin: 0 0 1rem; padding: 0; list-style: none; }
.sweet-seventeen-protocol__list li {
    display: grid; gap: .45rem; padding: 1rem; border-radius: 18px; background: #fff;
    box-shadow: var(--s17-shadow); font-weight: 700; font-size: .88rem; line-height: 1.35;
}
.sweet-seventeen-protocol__list .sweet-seventeen-icon { width: 1.8rem; height: 1.8rem; color: var(--inv-primary); }

/* ------------------------------------------------------------------ vendors: credits */
.sweet-seventeen-credits { margin: 0; padding: 0; list-style: none; }
.sweet-seventeen-credits li { display: flex; align-items: baseline; gap: .5rem; padding: .75rem 0; border-bottom: 1px solid var(--s17-line); }
.sweet-seventeen-credits__role { flex: none; max-width: 42%; font: 800 .64rem/1.3 var(--s17-sans); letter-spacing: .18em; text-transform: uppercase; color: var(--inv-primary); }
.sweet-seventeen-credits__dots { flex: 1 1 1rem; min-width: 1rem; border-bottom: 2px dotted color-mix(in srgb, var(--inv-text) 25%, transparent); translate: 0 -.25em; }
.sweet-seventeen-credits__name { display: grid; justify-items: end; text-align: right; font: 400 1.2rem/1.2 var(--s17-serif); }
.sweet-seventeen-credits__name a { display: inline-flex; align-items: center; min-height: 1.6rem; color: var(--inv-primary); font: 700 .8rem/1.3 var(--s17-sans); text-decoration: none; }

/* ------------------------------------------------------------------ closing: the back cover */
.sweet-seventeen-closing {
    display: grid; justify-items: center; padding-top: 4rem; padding-bottom: 3.3rem; text-align: center;
    background: linear-gradient(to bottom, var(--inv-background), var(--inv-blush));
}
.sweet-seventeen-closing__polaroid { width: min(68%, 16rem); margin-bottom: 1.8rem; }
.sweet-seventeen-closing__bow { position: absolute; z-index: 3; top: -2rem; left: 50%; width: 5rem; translate: -50% 0; }
.sweet-seventeen-closing__message { max-width: 23rem; font: italic 400 1.45rem/1.35 var(--s17-serif); text-wrap: balance; }
.sweet-seventeen-closing__signature { margin-top: 1rem !important; font-size: 2.2rem; color: var(--inv-primary); }
.sweet-seventeen-closing__mast { max-width: 100%; margin-top: .6rem !important; padding: 0 .05em .04em; font: 400 clamp(3.4rem, 19vw, 5rem)/.88 var(--s17-serif); text-transform: uppercase; overflow-wrap: anywhere; }
.sweet-seventeen-closing__footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .5rem .7rem; margin-top: 1.3rem; }
.sweet-seventeen-closing__footer .sweet-seventeen-barcode { width: 4.4rem; height: 1.5rem; color: var(--inv-text); }
.sweet-seventeen-closing__footer p { font: 800 .64rem/1.3 var(--s17-sans); letter-spacing: .2em; text-transform: uppercase; }

/* ------------------------------------------------------------------ shared pieces: branding, nav, music, ambient */
.sweet-seventeen-body .sweet-seventeen-branding { position: relative; z-index: 1; padding-top: .9rem; }
.sweet-seventeen-body .inv-nav {
    --inv-nav-bg: color-mix(in srgb, var(--inv-deep) 90%, transparent);
    --inv-nav-text: color-mix(in srgb, var(--inv-shine) 82%, transparent);
    --inv-nav-active: var(--inv-accent);
    border-color: color-mix(in srgb, var(--inv-accent) 35%, transparent);
    font-family: var(--s17-sans);
}
.sweet-seventeen-body .inv-nav__item.is-active { color: var(--inv-deep); background: var(--s17-foil); background-size: 200% 100%; }
.sweet-seventeen-body .inv-music__button { background: var(--inv-deep); color: var(--inv-shine); }
.sweet-seventeen-body .inv-ambient { --inv-ambient-1: var(--inv-accent); --inv-ambient-2: var(--inv-primary); }

/* ------------------------------------------------------------------ reduced motion: everything still */
@media (prefers-reduced-motion: reduce) {
    .sweet-seventeen-cover--leave, .sweet-seventeen-cover--leave *, .sweet-seventeen-pass__inner, .sweet-seventeen-pass,
    .sweet-seventeen-polish__item, .sweet-seventeen-wallet .inv-gift__account::after {
        animation: none !important; transition: none !important;
    }
    html { scroll-behavior: auto; }
}