/* ───────── Ken+Mo: the love story ─────────
   Understated and warm. Ivory paper with burgundy (#660033) as this page's ink and accent.
   Each page of the site carries its own accent; the homepage keeps navy and red.
   Cormorant Garamond for the voice of the story, Inter for labels. */

@font-face { font-family: "Cormorant"; src: url("../fonts/cormorant-latin-wght.woff2") format("woff2"); font-weight: 300 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Cormorant"; src: url("../fonts/cormorant-latin-wght-italic.woff2") format("woff2"); font-weight: 300 700; font-style: italic; font-display: swap; }

.page-kenmo {
  --wine: #660033;
  --wine-soft: rgba(102, 0, 51, .4);
  --ivory: #F6F1E9;
  --ivory-2: #EDE5D8;
  --ink-soft: #3C3A40;
  --bg: var(--ivory);
  --fg: var(--wine);
  --muted: #6E6860;
  --line: rgba(102, 0, 51, .14);
  --accent: var(--wine);
  --serif: "Cormorant", "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --arch: 999px 999px 18px 18px;
}

/* Nav on a light page */
.page-kenmo .nav {
  --n-fg: var(--wine); --n-pill: rgba(102, 0, 51, .06); --n-line: rgba(102, 0, 51, .12);
  --n-glass: rgba(246, 241, 233, .86); --n-active: var(--wine); --n-active-fg: var(--paper);
}
.page-kenmo .nav__mark { background: var(--wine); color: var(--paper); }
.page-kenmo .nav__sheet { background: var(--wine); }
.page-kenmo .nav__sheet a[aria-current="page"]::after { background: var(--ivory); }

/* ───────── Shared bits ───────── */
.km-eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font: 500 12px/1.3 var(--font-body); letter-spacing: .2em; text-transform: uppercase; color: var(--muted);
}
.km-eyebrow::before { content: ""; width: 28px; height: 1px; background: currentColor; opacity: .6; }
.km-eyebrow--light { color: rgba(255, 255, 255, .7); }
.km-h2 {
  font: italic 400 clamp(38px, 5vw, 68px)/1.04 var(--serif); letter-spacing: -.01em; color: var(--wine); text-wrap: balance;
}

/* ───────── Hero ───────── */
.km-hero { padding: calc(var(--nav-h) + clamp(40px, 8vh, 96px)) 0 clamp(64px, 10vh, 120px); overflow: hidden; }
.km-hero__inner { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.km-hero__copy { display: grid; gap: clamp(20px, 3vh, 32px); justify-items: start; }
.km-hero__logo { margin: 0; width: min(520px, 100%); }
.km-hero__logo img { width: 100%; }
.km-hero__line {
  max-width: 16ch; font: italic 300 clamp(40px, 5.4vw, 78px)/1.02 var(--serif); letter-spacing: -.015em; color: var(--wine);
}
.km-hero__since { display: inline-flex; align-items: center; gap: 12px; font: 500 12px/1 var(--font-body); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.km-hero__since span { width: 8px; height: 8px; border-radius: 50%; background: var(--wine); }
.km-scroll {
  display: inline-flex; align-items: center; gap: 12px; margin-top: 8px; padding: 12px 0; text-decoration: none; color: var(--wine);
  font: 500 15px/1 var(--font-body); border-bottom: 1px solid var(--line); transition: gap .4s var(--ease), border-color .4s;
}
.km-scroll svg { width: 18px; height: 18px; transform: rotate(90deg); }
.km-scroll:hover { gap: 18px; border-color: var(--wine); }

.km-hero__photo { position: relative; isolation: isolate; margin: 0; justify-self: end; width: min(100%, 520px); }
.km-hero__photo::before {
  /* offset outline echoing the arch */
  content: ""; position: absolute; inset: -14px 14px 14px -14px; border: 1px solid var(--wine-soft); border-radius: var(--arch); z-index: -1;
}
.km-hero__photo img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: 50% 30%; border-radius: var(--arch); }

.js .km-hero [data-in] { opacity: 0; transform: translateY(18px); transition: opacity 1.1s var(--ease), transform 1.1s var(--ease); }
.js .is-ready .km-hero [data-in] { opacity: 1; transform: none; }
.js .is-ready .km-hero [data-in]:nth-child(2) { transition-delay: .1s; }
.js .is-ready .km-hero [data-in]:nth-child(3) { transition-delay: .22s; }
.js .is-ready .km-hero [data-in]:nth-child(4) { transition-delay: .34s; }
.js .is-ready .km-hero [data-in]:nth-child(5) { transition-delay: .44s; }
.js .km-hero__photo[data-in] { transform: scale(.97); transition-duration: 1.6s; }
.js .is-ready .km-hero__photo[data-in] { transform: none; transition-delay: .15s; }
.km-hero__photo img { animation: drift 24s ease-in-out infinite alternate; }
@keyframes drift { from { object-position: 50% 26%; } to { object-position: 50% 36%; } }

/* ───────── Story ───────── */
.km-story { background: var(--paper); padding-block: clamp(80px, 13vh, 150px); }
.km-story__inner { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 7vw, 110px); align-items: start; }
.km-story__photo { position: sticky; top: calc(var(--nav-h) + 40px); margin: 0; }
.km-story__photo img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 18px; filter: saturate(.92); }
.km-story__photo::after {
  content: "2014"; position: absolute; right: -12px; bottom: 28px; padding: 10px 16px; border-radius: 999px; background: var(--ivory);
  font: italic 500 22px/1 var(--serif); color: var(--wine); box-shadow: 0 12px 30px -16px rgba(102, 0, 51, .35);
}
.km-story__copy { display: grid; gap: 22px; min-width: 0; max-width: 40rem; }
.km-beats { counter-reset: beat; margin-top: 18px; border-left: 1px solid var(--line); }
.km-beats li { position: relative; padding: 0 0 36px 32px; }
.km-beats li:last-child { padding-bottom: 0; }
.km-beats li::before {
  content: ""; position: absolute; left: -5px; top: 6px; width: 9px; height: 9px; border-radius: 50%;
  background: var(--paper); border: 1px solid var(--wine);
}
.km-beats li:last-child::before { background: var(--wine); }
.km-beat { display: block; margin-bottom: 10px; font: 500 12px/1 var(--font-body); letter-spacing: .18em; text-transform: uppercase; color: var(--wine); }
.km-beats p { font: 400 clamp(20px, 1.6vw, 23px)/1.55 var(--serif); color: var(--ink-soft); }

/* ───────── Soundtrack: album sleeve + spinning record ───────── */
.km-sound { position: relative; isolation: isolate; overflow: hidden; color: var(--paper); background: var(--wine); padding-block: clamp(80px, 13vh, 150px); }
.km-sound__bg {
  position: absolute; inset: -40px; z-index: -1; background: url("../images/kenmo/soundtrack-bg.webp") center / cover no-repeat;
  filter: blur(28px) saturate(.8); opacity: .28; transform: scale(1.1);
}
.km-sound::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(60% 70% at 30% 60%, rgba(255, 255, 255, .07), transparent 70%), linear-gradient(120deg, rgba(102, 0, 51, .94) 30%, rgba(102, 0, 51, .72));
}
.km-sound__inner {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(40px, 5vw, 80px) clamp(32px, 5vw, 80px); align-items: center;
}
.km-sound__head { grid-column: 1 / -1; display: grid; gap: 18px; justify-items: start; }
.km-sound .km-h2 { color: var(--paper); max-width: 16ch; }
.km-lyric { margin: 0; padding-left: 20px; border-left: 1px solid rgba(255, 255, 255, .3); font: italic 400 22px/1.5 var(--serif); color: rgba(255, 255, 255, .85); white-space: pre-line; }
.km-lyric cite { display: block; margin-top: 10px; font: 500 12px/1 var(--font-body); font-style: normal; letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 255, 255, .55); }

/* The album. --s is the sleeve size; the record sits behind it and peeks out to the right. */
.record {
  --s: min(430px, 38vw);
  --peek: .42;             /* how much of the record shows at rest */
  --out: .62;              /* how far it slides out when open or playing */
  position: relative; width: calc(var(--s) * (1 + var(--out) - .06)); height: var(--s); margin-bottom: 64px;
}
.record__sleeve {
  position: absolute; z-index: 2; inset: 0 auto auto 0; width: var(--s); height: var(--s); margin: 0; overflow: hidden;
  border-radius: 6px; background: #222;
  box-shadow: 0 50px 90px -40px rgba(0, 0, 0, .75), 0 18px 30px -18px rgba(0, 0, 0, .5);
}
.record__sleeve img { width: 100%; height: 100%; object-fit: cover; }
.record__sleeve::before {
  /* card-stock edge and a soft wear highlight, like a real sleeve */
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, rgba(0, 0, 0, .25), transparent 4%, transparent 96%, rgba(0, 0, 0, .2)),
              linear-gradient(160deg, rgba(255, 255, 255, .16), transparent 35%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
}
.record__sleeve figcaption {
  position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 44px 20px 16px; background: linear-gradient(to top, rgba(40, 0, 20, .78), transparent);
}
.record__sleeve figcaption span { font: 600 clamp(18px, 1.8vw, 24px)/1 var(--font-display); letter-spacing: -.02em; }
.record__sleeve figcaption em { font: italic 400 clamp(18px, 1.7vw, 22px)/1 var(--serif); color: rgba(255, 255, 255, .85); }

.record__disc {
  position: absolute; z-index: 1; top: 3%; left: 0; width: calc(var(--s) * .94); height: calc(var(--s) * .94);
  transform: translateX(calc(var(--s) * var(--peek))); transition: transform 1.1s var(--ease);
  border-radius: 50%; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .55));
}
.record.is-open .record__disc, .record.is-playing .record__disc { transform: translateX(calc(var(--s) * var(--out))); }
.record__spin, .record__spin2 { position: absolute; inset: 0; border-radius: 50%; }
.record__grooves {
  position: absolute; inset: 0; border-radius: 50%;
  background:
    radial-gradient(circle, transparent 0 31%, #070708 31.4% 33.5%, transparent 34%),          /* run-out ring */
    radial-gradient(circle, transparent 0 62%, rgba(0, 0, 0, .9) 62.3% 63.2%, transparent 63.5%), /* track gaps */
    radial-gradient(circle, transparent 0 79%, rgba(0, 0, 0, .9) 79.3% 80.2%, transparent 80.5%),
    radial-gradient(circle, transparent 0 48%, rgba(0, 0, 0, .9) 48.3% 49.2%, transparent 49.5%),
    repeating-radial-gradient(circle, #0d0d0f 0 1px, #18181b 1px 2px, #101012 2px 3px),
    #111;
  box-shadow: inset 0 0 0 2px #050506, inset 0 0 0 5px #1b1b1e;
}
.record__label {
  position: absolute; left: 50%; top: 50%; width: 32%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%;
  display: grid; place-items: center; background: radial-gradient(circle, #7a0a42, var(--wine) 70%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12);
}
.record__label img { width: 64%; height: auto; opacity: .92; }
.record__label::after {
  /* spindle hole */
  content: ""; position: absolute; left: 50%; top: 50%; width: 6%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: #0d0d0f;
}
.record__sheen {
  /* static light: stays put while the record turns underneath, which is what sells the spin */
  position: absolute; inset: 0; border-radius: 50%; pointer-events: none; mix-blend-mode: screen;
  background: conic-gradient(from 25deg, transparent 0 4%, rgba(255, 255, 255, .16) 9%, transparent 16%, transparent 50%, rgba(255, 255, 255, .12) 58%, transparent 66%, transparent);
  -webkit-mask: radial-gradient(circle, transparent 0 17%, #000 17.5%); mask: radial-gradient(circle, transparent 0 17%, #000 17.5%);
}
.record__spin { animation: spin 26s linear infinite; animation-play-state: paused; }
.record__spin2 { animation: spin 2.2s linear infinite; animation-play-state: paused; }
.record.is-visible .record__spin { animation-play-state: running; }
.record.is-playing .record__spin2 { animation-play-state: running; }
@keyframes spin { to { transform: rotate(360deg); } }

.record__play {
  position: absolute; z-index: 3; left: 18px; bottom: -64px; display: inline-flex; align-items: center; gap: 12px;
  min-height: 44px; padding: 6px 18px 6px 6px; border: 1px solid rgba(255, 255, 255, .3); border-radius: 999px;
  background: rgba(255, 255, 255, .08); color: var(--paper); cursor: pointer; font: 500 14px/1 var(--font-body);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: background .3s, border-color .3s;
}
.record__play:hover { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .55); }
.record__ico { width: 32px; height: 32px; padding: 9px; border-radius: 50%; background: var(--paper); color: var(--wine); }
.record__ico--pause, .record.is-playing .record__ico--play { display: none; }
.record.is-playing .record__ico--pause { display: block; }

.km-sound__player { min-width: 0; }
.km-sound__player [class*="elfsight-app"] { width: 100%; }
.km-sound__open { display: inline-flex; align-items: center; gap: 10px; color: rgba(255, 255, 255, .75); font-size: 14px; text-underline-offset: 3px; }
.km-sound__open svg { width: 18px; height: 18px; }

/* ───────── Shared moments ───────── */
.km-moments { padding-block: clamp(80px, 13vh, 150px) clamp(60px, 9vh, 100px); }
.km-moments__head { display: grid; gap: 20px; justify-items: center; text-align: center; max-width: 46rem; margin: 0 auto clamp(40px, 7vh, 72px); }
.km-moments__text { font: italic 400 clamp(20px, 1.7vw, 24px)/1.6 var(--serif); color: var(--ink-soft); }
.km-gallery { columns: 3 280px; column-gap: 16px; }
.moment { break-inside: avoid; margin-bottom: 16px; }
.moment__btn {
  display: block; width: 100%; padding: 0; border: 0; border-radius: 14px; overflow: hidden; cursor: zoom-in; background: var(--ivory-2);
}
.moment__btn img { width: 100%; height: auto; transition: transform 1.2s var(--ease), filter .6s; filter: saturate(.9); }
.moment__btn:hover img, .moment__btn:focus-visible img { transform: scale(1.04); filter: saturate(1.05); }
.moment__btn:focus-visible { outline: 2px solid var(--wine); outline-offset: 3px; }

/* ───────── Lightbox ───────── */
.lb {
  width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
  background: rgba(10, 14, 22, .94); color: var(--paper);
}
.lb::backdrop { background: transparent; }
.lb[open] { display: grid; place-items: center; animation: lb-in .35s var(--ease); }
@keyframes lb-in { from { opacity: 0; } }
.lb__fig { margin: 0; display: grid; place-items: center; width: 100%; height: 100%; padding: clamp(56px, 8vh, 80px) clamp(16px, 8vw, 110px); }
.lb__img { max-width: 100%; max-height: 100%; width: auto; height: auto; border-radius: 10px; box-shadow: 0 40px 100px -30px rgba(0, 0, 0, .8); transition: opacity .25s; }
.lb__img.is-loading { opacity: .25; }
.lb__count { position: absolute; left: 50%; bottom: 22px; translate: -50% 0; font: 500 13px/1 var(--font-body); letter-spacing: .14em; color: rgba(255, 255, 255, .7); }
.lb__btn {
  position: absolute; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .25);
  background: rgba(255, 255, 255, .06); color: var(--paper); cursor: pointer; transition: background .3s, border-color .3s;
}
.lb__btn svg { width: 22px; height: 22px; }
.lb__btn:hover { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .5); }
.lb__btn--prev { left: clamp(10px, 2vw, 32px); top: 50%; translate: 0 -50%; }
.lb__btn--next { right: clamp(10px, 2vw, 32px); top: 50%; translate: 0 -50%; }
.lb__close { right: clamp(10px, 2vw, 32px); top: clamp(10px, 2vw, 24px); }

/* Footer on ivory */
.page-kenmo .atg-foot { --atg-foot-fg: var(--wine); --atg-foot-line: rgba(102, 0, 51, .12); background: var(--ivory-2); }
.page-kenmo .atg-foot__credit { color: #555; }

/* ───────── Responsive ───────── */
@media (max-width: 960px) {
  .km-story__inner, .km-sound__inner { grid-template-columns: minmax(0, 1fr); }
  .record { --s: min(420px, 58vw); justify-self: center; }
  .km-story__photo { position: relative; top: 0; max-width: 460px; }
}
@media (max-width: 860px) {
  .km-hero__inner { grid-template-columns: minmax(0, 1fr); }
  .km-hero__photo { justify-self: center; width: min(100%, 440px); order: -1; }
  .km-hero__line { max-width: 18ch; }
}
@media (max-width: 600px) {
  .km-gallery { columns: 2; column-gap: 10px; }
  .moment { margin-bottom: 10px; }
  .moment__btn { border-radius: 10px; }
  .km-beats li { padding-left: 24px; }
  .km-story__photo::after { right: 12px; }
  .record { --s: 64vw; --peek: .3; --out: .4; justify-self: start; }
  .lb__btn--prev, .lb__btn--next { top: auto; bottom: 10px; translate: none; width: 46px; height: 46px; }
}
@media (prefers-reduced-motion: reduce) {
  .km-hero__photo img { animation: none; }
  .record__spin, .record__spin2 { animation: none; }
}