/*
 * Kartu Cetak (Pernikahan) — a premium printed invitation: every section a card of thick cotton paper (fibre texture,
 * deckled edge, soft shadow) on a linen table (--inv-table); letterpress type (a fine inner shadow), blind-embossed
 * monogram, a thin foil rule, a wax-red accent (--inv-accent). EB Garamond for text, the client's heading font for
 * names and titles. Phones: one column. ≥ 900px: two columns of cards, the wide ones across.
 */

:root {
    --inv-primary: #2f2a26;
    --inv-accent: #a3412c;
    --inv-background: #f7f2e8;
    --inv-text: #2f2a26;
    --inv-table: #d8d0c2;
    --inv-radius: 3px;
    --kc-serif: var(--inv-font-heading, 'Cormorant Garamond'), Georgia, serif;
    --kc-text: 'EB Garamond', Georgia, serif;
    --kc-soft: color-mix(in srgb, var(--inv-text) 72%, transparent);
    --kc-line: color-mix(in srgb, var(--inv-text) 16%, transparent);
    --kc-foil: linear-gradient(90deg, transparent, #b8925a 15%, #f1d9a6 50%, #b8925a 85%, transparent);
    /* paper fibres and the linen weave */
    --kc-fibre: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 .4 0 0 0 0 .34 0 0 0 0 .26 0 0 0 .22 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23f)'/%3E%3C/svg%3E");
    --kc-linen: repeating-linear-gradient(0deg, rgb(0 0 0 / .035) 0 1px, transparent 1px 3px), repeating-linear-gradient(90deg, rgb(255 255 255 / .05) 0 1px, transparent 1px 3px);
    /* a deckled (torn) edge, as a mask on every card */
    --kc-deckle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='8' preserveAspectRatio='none'%3E%3Cpath d='M0 8V3l2 1 3-2 3 2 2-1 4 2 3-3 2 1 3-1 3 2 2-2 4 1 2-1 3 2 2-1 2 1v5Z'/%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body.kc-body {
    margin: 0; min-height: 100vh; overflow-x: hidden;
    color: var(--inv-text); font: 400 1.04rem/1.7 var(--kc-text); -webkit-font-smoothing: antialiased;
    background: var(--kc-linen), radial-gradient(90% 60% at 50% 0%, color-mix(in srgb, var(--inv-table) 75%, #fff), var(--inv-table) 70%);
    background-color: var(--inv-table); background-attachment: fixed;
}
p, h1, h2, h3, blockquote { margin: 0; }
.kc-preview { position: fixed; z-index: 60; top: 0; left: 0; right: 0; padding: .35rem 1rem; text-align: center; background: rgb(0 0 0 / .65); color: #fff; font-size: .72rem; }

/* ---------- letterpress type ---------- */
.kc-small { font: 500 .66rem/1.5 var(--kc-text); letter-spacing: .3em; text-transform: uppercase; color: var(--inv-accent); }
.kc-title, .kc-names, .kc-person__name, .kc-moment__title, .kc-countdown__date {
    font-family: var(--kc-serif); font-weight: 400; color: color-mix(in srgb, var(--inv-text) 92%, transparent);
    text-shadow: 0 1px 0 rgb(255 255 255 / .75), 0 -1px 0 rgb(0 0 0 / .12);
}
.kc-title { font-size: clamp(1.7rem, 7.5vw, 2.2rem); line-height: 1.2; }
.kc-names { font-size: clamp(2.4rem, 11vw, 3.2rem); line-height: 1.1; }
.kc-amp { font-style: italic; color: var(--inv-accent); }
.kc-text { color: var(--kc-soft); }
.kc-arabic { font: 400 1.5rem/1.9 'Amiri', serif; color: var(--inv-accent); }
.kc-quote { position: relative; padding: .4rem 0 0; }
.kc-quote::before { content: ''; display: block; width: 5rem; height: 1px; margin: 0 auto 1rem; background: var(--kc-foil); }
.kc-quote p { font: italic 400 1.08rem/1.65 var(--kc-text); }
.kc-quote cite { display: block; margin-top: .6rem; font: 500 .62rem/1.5 var(--kc-text); letter-spacing: .26em; text-transform: uppercase; font-style: normal; color: var(--inv-accent); }

/* pills become printed tags */
.kc-pill { display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .85rem; border-radius: 2px; background: transparent; color: var(--inv-text); font: 500 .7rem/1.4 var(--kc-text); letter-spacing: .2em; text-transform: uppercase; text-decoration: none; box-shadow: inset 0 0 0 1px var(--kc-line); }
.kc-pill--soft { color: var(--inv-accent); }
.kc-pill--glass { border-radius: 50%; width: 3.6rem; height: 3.6rem; justify-content: center; padding: 0; font: 400 1rem/1 var(--kc-serif); letter-spacing: .02em; text-transform: none; color: color-mix(in srgb, var(--inv-background) 80%, var(--inv-text));
    /* blind emboss: no ink, only light and shade */
    box-shadow: inset 1px 1px 2px rgb(0 0 0 / .14), inset -1px -1px 1px rgb(255 255 255 / .9); text-shadow: 1px 1px 1px rgb(255 255 255 / .9), -1px -1px 1px rgb(0 0 0 / .14); }
a.kc-pill--glass { width: auto; height: auto; padding: .3rem .85rem; border-radius: 2px; font: 500 .74rem/1.4 var(--kc-text); color: var(--inv-text); text-shadow: none; box-shadow: inset 0 0 0 1px var(--kc-line); }
.kc-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; }

/* wax-red buttons */
.kc-button, .kc-body .inv-button {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .8rem 1.5rem; border: 0; border-radius: 2px; cursor: pointer;
    background: var(--inv-accent); color: #fff; font: 500 .74rem/1.2 var(--kc-text); letter-spacing: .24em; text-transform: uppercase; text-decoration: none;
    box-shadow: inset 0 1px 0 rgb(255 255 255 / .2), 0 6px 14px -8px var(--inv-accent);
}
.kc-body .inv-button--outline { background: transparent; color: var(--inv-text); box-shadow: inset 0 0 0 1px var(--inv-text); }

/* photos printed on the card, with a thin white border like a print */
.kc-photo { width: 100%; padding: 7px; background: #fff; box-shadow: 0 1px 2px rgb(0 0 0 / .12); }
.kc-photo img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.kc-photo--wide img { aspect-ratio: 16 / 10; }

/* ---------- the cards ---------- */
.kc-main { position: relative; display: grid; gap: 1.6rem; max-width: 30rem; margin: 0 auto; padding: 2rem 1rem 7rem; }
.kc-card, .kc-paper, .kc-glass {
    position: relative; display: grid; justify-items: center; gap: .75rem; padding: 2.4rem 1.6rem 2.6rem; text-align: center;
    background: var(--kc-fibre), linear-gradient(170deg, #fff, var(--inv-background) 60%); background-color: var(--inv-background);
    box-shadow: 0 1px 1px rgb(0 0 0 / .08), 0 18px 34px -20px rgb(0 0 0 / .45), 0 40px 60px -40px rgb(0 0 0 / .3);
    /* the torn bottom edge */
    -webkit-mask: linear-gradient(#000, #000) top / 100% calc(100% - 7px) no-repeat, var(--kc-deckle) bottom / 40px 8px repeat-x;
    mask: linear-gradient(#000, #000) top / 100% calc(100% - 7px) no-repeat, var(--kc-deckle) bottom / 40px 8px repeat-x;
}
.kc-card:nth-child(4n + 1) { rotate: -.35deg; }
.kc-card:nth-child(4n + 3) { rotate: .3deg; }
/* the foil rule on top of each card */
.kc-card::before { content: ''; width: 4rem; height: 1px; background: var(--kc-foil); margin-bottom: .2rem; }

.kc-pair, .kc-events { display: grid; gap: 1.6rem; }
.kc-person .kc-photo { width: 74%; margin-bottom: .4rem; }
.kc-person__name { font-size: 1.55rem; line-height: 1.25; }
.kc-bubble { justify-self: center; display: grid; place-items: center; width: 3.2rem; height: 3.2rem; margin: -2.4rem 0; z-index: 2; border-radius: 50%;
    background: var(--inv-accent); color: #fff; font: italic 400 1.5rem/1 var(--kc-serif);
    /* a wax seal: an uneven rim, a soft shine */
    box-shadow: inset 0 0 0 4px color-mix(in srgb, var(--inv-accent) 80%, #000), inset 2px 3px 6px rgb(255 255 255 / .3), 0 6px 12px -6px rgb(0 0 0 / .6); }
.kc-countdown__date { font-size: clamp(1.9rem, 9vw, 2.4rem); }
.kc-body .inv-countdown { margin-top: .4rem; gap: .5rem; }
.kc-body .inv-countdown__item { flex: 1; min-width: 0; max-width: 4.6rem; padding: .7rem .2rem; border-radius: 2px; background: transparent; box-shadow: inset 0 0 0 1px var(--kc-line); }
.kc-body .inv-countdown__value { font: 400 1.7rem/1.1 var(--kc-serif); }
.kc-body .inv-countdown__label { font: 500 .58rem/1.3 var(--kc-text); letter-spacing: .18em; text-transform: uppercase; color: var(--kc-soft); }
.kc-body .inv-countdown__actions { margin-top: 1rem; display: grid; gap: .5rem; justify-items: center; }
.kc-event__venue { font-weight: 500; }
.kc-body .inv-maps__frame { width: 100%; height: 11rem; border: 0; margin-top: .4rem; filter: sepia(.25) saturate(.8); }
.kc-moments { display: grid; gap: 1.6rem; width: 100%; margin-top: .4rem; }
.kc-moment { display: grid; gap: .6rem; justify-items: center; }
.kc-moment .kc-photo { width: 86%; }
.kc-moment .kc-photo img { aspect-ratio: 4 / 3; }
.kc-moment__text { display: grid; gap: .3rem; justify-items: center; }
.kc-moment__title { font-size: 1.4rem; }
.kc-body .kc-gallery .inv-gallery { --inv-gallery-columns: 3; gap: .45rem; width: 100%; }
.kc-body .kc-gallery .inv-gallery__item { border-radius: 0; border: 5px solid #fff; box-shadow: 0 1px 2px rgb(0 0 0 / .14); }

/* forms and lists on paper */
.kc-rsvp, .kc-wishes { justify-items: stretch; }
.kc-rsvp > .kc-small, .kc-rsvp > .kc-title, .kc-wishes > .kc-small, .kc-wishes > .kc-title, .kc-rsvp::before, .kc-wishes::before { justify-self: center; }
.kc-body .inv-form label, .kc-body .inv-form__choices legend { font: 500 .66rem/1.4 var(--kc-text); letter-spacing: .2em; text-transform: uppercase; color: var(--kc-soft); }
.kc-body .inv-form input:not([type=radio]):not([type=checkbox]), .kc-body .inv-form select, .kc-body .inv-form textarea {
    border: 0; border-bottom: 1px solid var(--kc-line); border-radius: 0; background: transparent; color: var(--inv-text); font: 400 1.05rem/1.4 var(--kc-text); padding-inline: 0;
}
.kc-body .inv-form select option { color: #222; }
.kc-body .inv-form input[type=radio], .kc-body .inv-form input[type=checkbox] { accent-color: var(--inv-accent); }
.kc-body .inv-form .inv-button { width: 100%; }
.kc-body .inv-wish { border-radius: 0; background: transparent; padding: .8rem 0; border-top: 1px solid var(--kc-line); }
.kc-body .inv-wish__name { font: italic 500 1.05rem/1.3 var(--kc-text); }
.kc-body .inv-gift__account { width: 100%; border-radius: 0; background: transparent; padding: 1rem 0; border-top: 1px solid var(--kc-line); }
.kc-body .inv-gift__number { font: 400 1.4rem/1.3 var(--kc-serif); letter-spacing: .08em; }
.kc-body .inv-gift__account .inv-button { margin-top: .6rem; padding: .55rem 1.1rem; }
.kc-closing .kc-names { font-size: clamp(2rem, 9vw, 2.6rem); }

/* ---------- cover: the closed card on the table ---------- */
.kc-cover {
    position: fixed; inset: 0; z-index: 30; display: flex; align-items: center; justify-content: center; overflow: hidden;
    padding: calc(1rem + env(safe-area-inset-top)) .9rem calc(1rem + env(safe-area-inset-bottom));
    background: var(--kc-linen), radial-gradient(90% 60% at 50% 30%, color-mix(in srgb, var(--inv-table) 70%, #fff), var(--inv-table) 75%); background-color: var(--inv-table);
}
.kc-cover__inner {
    width: min(100%, 26rem); min-height: 0; max-height: 100%; gap: .6rem; padding: 1.8rem 1.4rem 2.2rem; rotate: -.6deg;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.kc-cover__photo { width: min(54vw, 14rem, 30svh); margin: .2rem 0 .4rem; padding: 7px; background: #fff; box-shadow: 0 1px 2px rgb(0 0 0 / .14); }
.kc-cover__photo img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.kc-cover__quote { max-width: 20rem; font: italic 400 .95rem/1.5 var(--kc-text); color: var(--kc-soft); }
.kc-guest { width: min(100%, 17rem); padding: .6rem 1rem; gap: .05rem; background: none; box-shadow: inset 0 0 0 1px var(--kc-line); -webkit-mask: none; mask: none; }
.kc-guest::before { content: none; }
.kc-guest__name { font: italic 500 1.2rem/1.3 var(--kc-text); overflow-wrap: anywhere; }
.kc-cover .kc-pill:not(.kc-pill--glass) { box-shadow: none; padding: 0; letter-spacing: .24em; }
.kc-cover .kc-pill:not(.kc-pill--glass)::before, .kc-cover .kc-pill:not(.kc-pill--glass)::after { content: ''; width: 1.6rem; height: 1px; background: var(--kc-foil); }
.kc-cover--leave { transition: opacity .9s ease, transform 1.1s cubic-bezier(.6, 0, .3, 1); }
.kc-cover--gone { opacity: 0; transform: translateY(-3rem) rotate(-3deg); }
@media (max-height: 740px) {
    .kc-cover__inner { gap: .45rem; padding: 1.4rem 1.2rem 1.8rem; }
    .kc-cover__photo { width: min(46vw, 12rem, 26svh); }
    .kc-names { font-size: clamp(2.1rem, 10vw, 2.7rem); }
    .kc-cover__quote { font-size: .88rem; line-height: 1.4; }
    .kc-pill--glass { width: 3rem; height: 3rem; }
}
@media (max-height: 640px) {
    .kc-cover__photo { width: min(40vw, 10rem, 23svh); }
    .kc-cover__quote { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
}

/* ---------- shared floating UI ---------- */
.kc-body .inv-nav {
    --inv-nav-bg: var(--inv-background);
    --inv-nav-text: color-mix(in srgb, var(--inv-text) 70%, transparent);
    --inv-nav-active: var(--inv-accent);
    border-radius: 4px; border-color: var(--kc-line); box-shadow: 0 16px 30px -18px rgb(0 0 0 / .5);
}
.kc-body .inv-nav--icons .inv-nav__item { border-radius: 50%; }
.kc-body .inv-nav--icons .inv-nav__item.is-active { color: #fff; }
.kc-body .inv-music__button { background: var(--inv-accent); }
.kc-body .inv-scroller__toggle, .kc-body .inv-pb-button, .kc-body .inv-to-top { background: var(--inv-background); color: var(--inv-text); box-shadow: inset 0 0 0 1px var(--kc-line), 0 10px 20px -12px rgb(0 0 0 / .5); }
.kc-body .inv-to-top { border-radius: 50%; }
.kc-body .inv-music__space { background: transparent; }

/* ---------- wide screens: two columns of cards ---------- */
@media (min-width: 900px) {
    .kc-main { max-width: 62rem; grid-template-columns: 1fr 1fr; gap: 2rem; padding-top: 3rem; align-items: start; }
    .kc-card--wide, .kc-pair, .kc-events { grid-column: 1 / -1; }
    .kc-pair { grid-template-columns: 1fr auto 1fr; align-items: center; }
    .kc-bubble { margin: 0 -1.8rem; }
    .kc-events { grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); }
    .kc-moments { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
    .kc-opening, .kc-closing { padding: 3rem 5rem 3.4rem; }
    .kc-cover__inner { width: min(100%, 34rem); }
    .kc-cover__photo { width: min(22vw, 16rem, 34vh); }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .kc-cover--gone { transform: none; }
}