/* Tokens taken from brand/media-kit-fall-2026.pdf */
:root {
  --bg: #F6F2EC;
  --card: #FFFDF9;
  --ink: #151314;
  --pink: #CF2F6B;
  --muted: #6D6660;
  --pink-tint: #F7DDE7;
  --line: rgba(21, 19, 20, .1412);
  --serif: "Playfair Display", Georgia, serif;
  --sans: "Inter", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --gutter: 20px;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 15px/1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; }
img, video { display: block; max-width: 100%; }
.caps {
  font: 500 11px/1.4 var(--sans);
  letter-spacing: .22em;
  text-transform: uppercase;
}
.muted { color: var(--muted); }
.pink { color: var(--pink); }
.serif { font-family: var(--serif); }
em.accent { font-style: italic; font-weight: 400; color: var(--pink); }
.rule { border: 0; border-top: 1px solid var(--ink); margin: 0; }
.rule-double { border: 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); height: 4px; margin: 0; }
.rule-soft { border: 0; border-top: 1px solid var(--line); margin: 0; }

/* Video frame shared by all proposals */
.clip {
  position: relative;
  aspect-ratio: 9 / 16;
  background: #E9E3DA center / cover no-repeat;
  overflow: hidden;
}
.clip video { width: 100%; height: 100%; object-fit: cover; }
.clip .play {
  position: absolute; inset: 0; margin: auto;
  width: 44px; height: 44px; border-radius: 50%;
  border: 0; background: rgba(255, 253, 249, .78); color: var(--ink);
  display: none; place-items: center; cursor: pointer;
}
.clip.is-paused .play { display: grid; }
/* With autoplay on, the play button only shows on hover or focus */
@media (prefers-reduced-motion: no-preference) and (hover: hover) {
  .clip .play { opacity: 0; transition: opacity .2s; }
  .clip:hover .play, .clip .play:focus-visible { opacity: 1; }
}
.ig {
  display: inline-flex; align-items: center; gap: 6px;
  font: 500 12px/1 var(--sans); text-decoration: none;
  border-bottom: 1px solid var(--line); padding-bottom: 3px;
}
.ig:hover, .ig:focus-visible { color: var(--pink); border-color: var(--pink); }
:focus-visible { outline: 2px solid var(--pink); outline-offset: 3px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
