/* ---------- fonts (self-hosted) ---------- */
@font-face { font-family: "KC Didone"; src: url(../fonts/bodoni-moda-latin-400-italic.woff2) format("woff2"); font-style: italic; font-weight: 400; font-display: swap; }
@font-face { font-family: "KC Didone"; src: url(../fonts/bodoni-moda-latin-400-normal.woff2) format("woff2"); font-style: normal; font-weight: 400; font-display: swap; }
@font-face { font-family: "KC Display"; src: url(../fonts/bodoni-moda-latin-800-normal.woff2) format("woff2"); font-weight: 800; font-display: block; }
@font-face { font-family: "KC Display"; src: url(../fonts/bodoni-moda-latin-600-normal.woff2) format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "KC Script"; src: url(../fonts/herr-von-muellerhoff-latin-400-normal.woff2) format("woff2"); font-display: block; }
@font-face { font-family: "KC Serif"; src: url(../fonts/tinos-latin-400-normal.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "KC Serif"; src: url(../fonts/tinos-latin-700-normal.woff2) format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "KC Serif"; src: url(../fonts/tinos-latin-400-italic.woff2) format("woff2"); font-style: italic; font-display: swap; }
@font-face { font-family: "KC Mono"; src: url(../fonts/space-mono-latin-700-normal.woff2) format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "KC Mono"; src: url(../fonts/space-mono-latin-400-normal.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "KC Sans"; src: url(../fonts/inter-tight-latin-300-normal.woff2) format("woff2"); font-weight: 300; font-display: swap; }
@font-face { font-family: "KC Sans"; src: url(../fonts/inter-tight-latin-400-normal.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "KC Sans"; src: url(../fonts/inter-tight-latin-500-normal.woff2) format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "KC Garamond"; src: url(../fonts/cormorant-garamond-latin-500-normal.woff2) format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "KC Garamond"; src: url(../fonts/cormorant-garamond-latin-600-normal.woff2) format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "KC Garamond"; src: url(../fonts/cormorant-garamond-latin-400-italic.woff2) format("woff2"); font-style: italic; font-display: swap; }

/* ---------- tokens ---------- */
:root {
  --paper: #f4f2ee;      /* gallery off-white */
  --card: #fbfaf7;
  --ink: #1b1714;
  --ink-soft: #5d554e;
  --rule: #d9d3ca;
  --cocoa: #3d2318;      /* KC monogram */
  --espresso: #26150e;   /* About Me script */
  --stone: #cbbda6;
  --nav-h: 56px;
  --gutter: clamp(16px, 2.4vw, 32px);
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-io: cubic-bezier(.76, 0, .24, 1);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; overflow-x: clip; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "KC Sans", "Helvetica Neue", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overflow-x: hidden;
  overflow-x: clip;
}
img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 1.5px solid currentColor; outline-offset: 4px; }

/* ---------- top bar ---------- */
.topbar {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  height: var(--nav-h);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: 0 var(--gutter);
  padding-top: env(safe-area-inset-top);
  font-family: "KC Sans", sans-serif; font-weight: 500;
  font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase;
  color: #fff; mix-blend-mode: difference;
  pointer-events: none;
}
.topbar a { pointer-events: auto; padding: 10px 0; }
.topbar .tb-left { justify-self: start; }
.topbar .tb-mid { justify-self: center; }
/* KIERA CURRY in the same Bodoni lettering as the KC */
.topbar .wordmark { display: block; font-family: "KC Display", "Bodoni 72", Didot, serif; font-weight: 800; font-size: 14px; letter-spacing: .14em; text-transform: uppercase; line-height: 1; }
.topbar .tb-right { justify-self: end; }
.topbar a::after { content: ""; display: block; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease-out); }
@media (hover: hover) { .topbar a:hover::after { transform: scaleX(1); } }

/* ---------- subpage scaffolding ---------- */
.page { min-height: 100svh; padding: calc(var(--nav-h) + 28px) var(--gutter) 64px; }
/* Back: the same lettering as MENU / CONTACT ME in the bar above */
.back {
  font-family: "KC Sans", sans-serif; font-weight: 500; font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase;
  display: inline-block; padding: 6px 0; position: relative;
}
.back::after {
  content: ""; position: absolute; left: 0; right: .16em; bottom: 2px; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease-out);
}
.back.is-hover::after, .back:focus-visible::after { transform: scaleX(1); }
.page-title {
  font-family: "KC Mono", monospace; font-weight: 700; text-transform: uppercase;
  font-size: 13px; letter-spacing: .02em; margin: 28px 0 0;
}

/* ---------- sound prompt for videos ---------- */
.vid { position: relative; background: #0d0b0a; }
.vid video { width: 100%; height: 100%; object-fit: contain; }
.sound-pill {
  position: absolute; left: 50%; bottom: 64px; transform: translate(-50%, 12px);
  opacity: 0; transition: opacity .5s var(--ease-out), transform .5s var(--ease-out);
  background: rgba(251, 250, 247, .92); color: var(--ink);
  font-family: "KC Mono", monospace; font-size: 12px; letter-spacing: .02em;
  padding: 10px 16px; border-radius: 999px; display: flex; gap: 14px; align-items: center;
  box-shadow: 0 6px 24px rgba(0,0,0,.18);
}
.sound-pill.show { opacity: 1; transform: translate(-50%, 0); }
.sound-pill button { text-decoration: underline; text-underline-offset: 3px; }
.sound-pill .dismiss { opacity: .55; text-decoration: none; }

.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}
.sound-pill { white-space: nowrap; }
@media (max-width: 600px) {
  .sound-pill { bottom: 50%; transform: translate(-50%, 50%); font-size: 11px; padding: 8px 14px; gap: 12px; }
  .sound-pill.show { transform: translate(-50%, 50%); }
  .sound-pill span { display: none; }
}