/*
 * Template "Kalender Kita" (Save the Date): a paper wall-calendar page on a deep wall.
 * Colors from the chosen variant: --inv-primary (ink), --inv-accent (ring), --inv-background (paper), --inv-text.
 * Fonts: Fraunces (names, month), DM Mono (grid, labels), Caveat (handwritten notes).
 */

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

:root {
    --kk-ink: var(--inv-text);
    --kk-paper: var(--inv-background);
    --kk-wall: color-mix(in srgb, var(--inv-primary) 74%, #05060a);
    --kk-wall-deep: color-mix(in srgb, var(--inv-primary) 52%, #020306);
    --kk-on-wall: color-mix(in srgb, var(--inv-background) 92%, transparent);
    --kk-serif: 'Fraunces', 'Cormorant Garamond', Georgia, serif;
    --kk-mono: 'DM Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
    --kk-hand: 'Caveat', 'Segoe Print', cursive;
    --kk-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

html { background: var(--kk-wall-deep); }

body {
    margin: 0;
    min-height: 100vh;
    background: var(--kk-wall-deep);
    color: var(--kk-ink);
    font-family: var(--kk-mono);
    font-size: 15px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: clip;
}

.kk-preview {
    position: sticky; top: 0; z-index: 60; padding: .5rem 1rem; text-align: center;
    background: #fff4d6; color: #6b4e00; font: .8125rem/1.4 system-ui, sans-serif;
}

/* ---------- the wall with the calendar page ---------- */
.kk-wall {
    position: relative;
    padding: 3.1rem 1rem 2.75rem;
    background:
        radial-gradient(42rem 30rem at 50% 18%, color-mix(in srgb, var(--inv-primary) 60%, #ffffff 10%), transparent 70%),
        linear-gradient(180deg, var(--kk-wall) 0%, var(--kk-wall-deep) 100%);
}
.kk-wall::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background-image: var(--kk-noise); opacity: .16; mix-blend-mode: overlay;
}

.kk-guest {
    position: relative; z-index: 1;
    margin: -1.9rem auto 3.3rem; max-width: 25rem; text-align: center;
    color: color-mix(in srgb, var(--kk-on-wall) 80%, transparent);
    font-size: .64rem; letter-spacing: .24em; text-transform: uppercase;
}
.kk-guest__name {
    display: block; margin-top: .2rem;
    font-family: var(--kk-serif); font-size: 1.05rem; font-style: italic; letter-spacing: 0; text-transform: none;
    color: var(--kk-on-wall); line-height: 1.3;
}

.kk-sheet {
    position: relative; z-index: 1;
    width: min(100%, 25rem); margin: 0 auto;
    background: var(--kk-paper);
    border-radius: 3px 3px 4px 4px;
    /* the pages still to come peek out below, then a soft shadow on the wall */
    box-shadow:
        0 5px 0 -1px color-mix(in srgb, var(--kk-paper) 88%, #000),
        0 9px 0 -2px color-mix(in srgb, var(--kk-paper) 78%, #000),
        0 34px 46px -22px rgb(0 0 0 / .7),
        0 2px 4px rgb(0 0 0 / .25);
    transform-origin: 50% -46px;
}
/* heavy stock: a subtle fibre texture and a little light falling from the top */
.kk-sheet::before {
    content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
    background:
        linear-gradient(180deg, rgb(255 255 255 / .35), transparent 22%, transparent 78%, rgb(0 0 0 / .04)),
        var(--kk-noise);
    opacity: .2; mix-blend-mode: multiply;
}

.kk-hang {
    position: absolute; left: 50%; top: -46px; width: 120px; height: 46px; transform: translateX(-50%);
    overflow: visible;
}

/* wire-o binding: loops over the top edge through punched holes */
.kk-wire {
    position: absolute; left: 14px; right: 14px; top: -9px; height: 26px; z-index: 2; pointer-events: none;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 26'%3E%3Cellipse cx='6' cy='19.5' rx='2.4' ry='2.1' fill='%23231d18'/%3E%3Cpath d='M3.9 19.6V5.4a2.1 2.1 0 0 1 4.2 0v14.2' fill='none' stroke='%237b7f87' stroke-width='1.7' stroke-linecap='round'/%3E%3Cpath d='M4.6 18V5.6a1.4 1.4 0 0 1 1.6-1.4' fill='none' stroke='%23eef0f4' stroke-width='.7' stroke-linecap='round' opacity='.85'/%3E%3C/svg%3E") repeat-x 0 0 / 12px 26px;
    -webkit-mask: linear-gradient(90deg, transparent 0, #000 6px, #000 calc(50% - 38px), transparent calc(50% - 28px), transparent calc(50% + 28px), #000 calc(50% + 38px), #000 calc(100% - 6px), transparent 100%);
    mask: linear-gradient(90deg, transparent 0, #000 6px, #000 calc(50% - 38px), transparent calc(50% - 28px), transparent calc(50% + 28px), #000 calc(50% + 38px), #000 calc(100% - 6px), transparent 100%);
}

.kk-sheet__body { position: relative; padding: 1.55rem .85rem 1.25rem; }

/* ---------- picture of the month ---------- */
.kk-photo {
    position: relative; margin: 0; overflow: hidden;
    height: clamp(190px, calc(100svh - 432px), 26rem);
    background: linear-gradient(155deg, var(--inv-primary), color-mix(in srgb, var(--inv-primary) 55%, var(--inv-accent)));
}
.kk:has(.kk-guest) .kk-photo { height: clamp(170px, calc(100svh - 500px), 25rem); }
.kk-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.kk-photo::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    box-shadow: inset 0 0 0 1px rgb(0 0 0 / .08);
}
.kk-photo--empty { display: grid; place-items: center; }
.kk-photo--empty::before {
    content: ''; position: absolute; inset: 14px; border: 1px solid color-mix(in srgb, var(--kk-paper) 35%, transparent);
}
.kk-photo__initials {
    position: relative;
    font-family: var(--kk-serif); font-weight: 300; font-size: clamp(3.4rem, 18vw, 5rem); line-height: 1;
    color: var(--kk-paper); letter-spacing: .02em;
}
.kk-photo__initials em {
    font-style: italic; font-size: .5em; margin: 0 .2em; vertical-align: .35em; color: color-mix(in srgb, var(--inv-accent) 60%, var(--kk-paper));
}

/* ---------- names and date ---------- */
.kk-head { padding: .95rem .35rem 0; text-align: center; }
.kk-title {
    margin: 0;
    font-size: .66rem; font-weight: 500; letter-spacing: .42em; text-transform: uppercase; padding-left: .42em;
    color: var(--inv-accent);
}
.kk-names {
    margin: .3rem 0 0;
    font-family: var(--kk-serif); font-weight: 400; font-size: clamp(2.05rem, 9.6vw, 2.65rem); line-height: 1.04;
    letter-spacing: -.01em; color: var(--kk-ink);
    font-variation-settings: 'opsz' 96;
    overflow-wrap: anywhere;
}
.kk-names em { font-style: italic; font-weight: 300; color: var(--inv-accent); margin: 0 .04em; }
.kk-dateline {
    display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: .25rem .6rem;
    margin: .5rem 0 0;
    font-size: .7rem; letter-spacing: .2em; text-transform: uppercase;
    color: color-mix(in srgb, var(--kk-ink) 82%, var(--kk-paper));
}
.kk-dateline__dot { width: 4px; height: 4px; border-radius: 50%; background: var(--inv-accent); }

/* ---------- month grid ---------- */
.kk-month {
    margin: .9rem .3rem 0; padding-top: .7rem;
    border-top: 1px solid color-mix(in srgb, var(--kk-ink) 22%, transparent);
}
.kk-month__head { display: flex; align-items: baseline; justify-content: space-between; padding: 0 .35rem; }
.kk-month__name {
    margin: 0; font-family: var(--kk-serif); font-style: italic; font-weight: 400; font-size: 1.45rem; line-height: 1.1; color: var(--kk-ink);
}
.kk-month__year { margin: 0; font-size: .74rem; letter-spacing: .3em; color: color-mix(in srgb, var(--kk-ink) 75%, var(--kk-paper)); }

.kk-grid {
    display: grid; grid-template-columns: repeat(7, 1fr); row-gap: .12rem;
    margin-top: .45rem; text-align: center;
    font-variant-numeric: tabular-nums;
}
.kk-grid__dow {
    padding: .2rem 0 .3rem; font-size: .6rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
    color: color-mix(in srgb, var(--kk-ink) 72%, var(--kk-paper));
}
.kk-grid__day { position: relative; display: grid; place-items: center; height: 1.68rem; font-size: .8rem; color: var(--kk-ink); }
/* Sundays (first column) in the accent, like an Indonesian wall calendar */
.kk-grid > :nth-child(7n + 1) { color: var(--inv-accent); }
.kk-grid__day--other { opacity: .3; }
.kk-grid__day--mark b { position: relative; z-index: 1; font-weight: 500; font-size: .95rem; }
.kk-ring {
    position: absolute; left: 50%; top: 50%; width: 3rem; height: 2.35rem;
    transform: translate(-50%, -51%) rotate(-6deg);
    color: var(--inv-accent); overflow: visible; pointer-events: none;
}
.kk-grid > .kk-grid__day--mark { color: var(--kk-ink); }

/* ---------- handwritten notes ---------- */
.kk-notes {
    margin: 1rem .3rem 0; padding: .55rem .35rem .2rem;
    border-top: 1px solid color-mix(in srgb, var(--kk-ink) 22%, transparent);
    /* ruled lines under the handwriting */
    background: repeating-linear-gradient(180deg, transparent 0, transparent calc(2.05rem - 1px), color-mix(in srgb, var(--kk-ink) 13%, transparent) calc(2.05rem - 1px), color-mix(in srgb, var(--kk-ink) 13%, transparent) 2.05rem) 0 1.65rem / 100% auto no-repeat;
}
.kk-notes__label { margin: 0; font-size: .6rem; letter-spacing: .32em; text-transform: uppercase; color: color-mix(in srgb, var(--kk-ink) 72%, var(--kk-paper)); }
.kk-notes__city, .kk-notes__text {
    margin: 0; font-family: var(--kk-hand); font-weight: 500; line-height: 2.05rem; color: var(--kk-ink);
}
.kk-notes__city { display: flex; align-items: center; gap: .35rem; margin-top: .2rem; font-size: 1.55rem; font-weight: 600; }
.kk-notes__city svg { width: 1.05rem; height: 1.05rem; flex: none; color: var(--inv-accent); }
.kk-notes__text { font-size: 1.32rem; }

/* ---------- countdown on the wall ---------- */
.kk-count {
    position: relative; padding: 2.4rem 1.25rem 2.6rem; text-align: center; color: var(--kk-on-wall);
    background: var(--kk-wall-deep);
}
.kk-count--photo {
    background:
        linear-gradient(180deg, var(--kk-wall-deep) 0%, color-mix(in srgb, var(--kk-wall-deep) 84%, transparent) 45%, var(--kk-wall-deep) 100%),
        var(--kk-photo) 50% 35% / cover no-repeat;
}
.kk-count__inner { max-width: 25rem; margin: 0 auto; }
.kk-label {
    margin: 0 0 1.1rem; font-size: .64rem; letter-spacing: .4em; text-transform: uppercase; padding-left: .4em;
    color: color-mix(in srgb, var(--inv-accent) 55%, var(--kk-paper));
}
.kk-countdown .inv-countdown { gap: 0; }
.kk-countdown .inv-countdown__item {
    flex: 1 1 0; min-width: 0; max-width: 5.5rem; padding: .1rem .3rem; border-radius: 0; background: none;
    border-left: 1px solid color-mix(in srgb, var(--kk-paper) 22%, transparent);
}
.kk-countdown .inv-countdown__item:first-child { border-left: 0; }
.kk-countdown .inv-countdown__value {
    font-family: var(--kk-serif); font-weight: 300; font-size: 2.3rem; line-height: 1.05; color: var(--kk-paper);
    font-variant-numeric: lining-nums tabular-nums;
}
.kk-countdown .inv-countdown__label { margin-top: .3rem; font-size: .58rem; letter-spacing: .26em; text-transform: uppercase; opacity: .78; }
.kk-countdown .inv-countdown__done { font-family: var(--kk-serif); font-style: italic; font-size: 1.1rem; }
.kk-countdown .inv-countdown__actions { margin-top: 1.5rem; gap: .5rem; }
.kk-countdown .inv-button--outline {
    padding: .55rem .95rem; border-radius: 999px; font-family: var(--kk-mono); font-size: .68rem; letter-spacing: .06em;
    color: var(--kk-paper); background: rgb(255 255 255 / .04);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--kk-paper) 40%, transparent);
}
.kk-countdown .inv-button--outline:hover { background: rgb(255 255 255 / .1); }

/* ---------- closing card held by a binder clip ---------- */
.kk-closing { padding: 2.9rem 1.5rem 5.6rem; background: var(--kk-wall-deep); }
.kk-card {
    position: relative; width: min(100%, 21rem); margin: 0 auto; padding: 2.4rem 1.6rem 1.7rem; text-align: center;
    background: var(--kk-paper); color: var(--kk-ink); border-radius: 2px;
    box-shadow: 0 26px 40px -24px rgb(0 0 0 / .75), 0 2px 4px rgb(0 0 0 / .25);
    rotate: -1.4deg;
}
.kk-card::before {
    content: ''; position: absolute; inset: 0; pointer-events: none; background-image: var(--kk-noise); opacity: .18; mix-blend-mode: multiply;
}
.kk-clip {
    position: absolute; left: 50%; top: -2.05rem; width: 4.6rem; height: auto; transform: translateX(-50%);
    filter: drop-shadow(0 3px 2px rgb(0 0 0 / .3));
}
.kk-card__rule { display: block; width: 2.4rem; height: 2px; margin: 0 auto 1rem; background: var(--inv-accent); }
.kk-card__message { position: relative; margin: 0; font-family: var(--kk-serif); font-weight: 300; font-size: 1.12rem; line-height: 1.5; }
.kk-card__names { position: relative; margin: 1.1rem 0 0; font-family: var(--kk-serif); font-size: 1.5rem; line-height: 1.15; }
.kk-card__names em { font-style: italic; font-weight: 300; color: var(--inv-accent); }
.kk-card__date { position: relative; margin: .5rem 0 0; font-size: .7rem; letter-spacing: .3em; color: color-mix(in srgb, var(--kk-ink) 75%, var(--kk-paper)); }

.inv-branding { color: color-mix(in srgb, var(--kk-paper) 75%, transparent); }

/* ---------- small and short screens ---------- */
@media (max-width: 370px) {
    .kk-sheet__body { padding-inline: .7rem; }
    .kk-grid__day { font-size: .76rem; }
}
@media (max-height: 700px) {
    .kk-wall { padding-top: 2.9rem; }
    .kk-photo { height: clamp(190px, calc(100svh - 405px), 26rem); }
    .kk-head { padding-top: .75rem; }
    .kk-names { font-size: clamp(1.9rem, 9vw, 2.4rem); }
    .kk-grid__day { height: 1.5rem; }
}

@media (min-width: 720px) {
    .kk-wall { padding-top: 4.4rem; padding-bottom: 3.5rem; }
    .kk-sheet { width: 26.5rem; }
    .kk-photo { height: clamp(220px, calc(100svh - 470px), 27rem); }
}

/*
 * Motion (only with html.inv-anim, i.e. not with "reduce motion"): the page swings in
 * from its nail and settles, then the ink ring draws itself around the day — done by 2.3 s.
 */
@keyframes kk-swing {
    0% { opacity: 0; transform: translateY(-10px) rotate(-2.4deg); }
    55% { opacity: 1; transform: rotate(.9deg); }
    80% { transform: rotate(-.3deg); }
    100% { opacity: 1; transform: none; }
}
@keyframes kk-draw { to { stroke-dashoffset: 0; } }
@keyframes kk-photo-in { from { opacity: 0; transform: scale(1.06); } to { opacity: 1; transform: none; } }
html.inv-anim .kk-sheet { animation: kk-swing 1.15s cubic-bezier(.3, .7, .3, 1) .05s both; }
html.inv-anim .kk-photo img { animation: kk-photo-in 1.5s cubic-bezier(.2, .7, .2, 1) .2s both; }
html.inv-anim .kk-ring path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: kk-draw 1.05s cubic-bezier(.55, .1, .35, 1) 1.2s forwards; }