/* THE VINCO DECK: one 1920 x 1080 stage scaled to the window, the site's palette and type.
   Every slide is a <section class="slide">; deck.js sets is-active / is-past and the step classes at-1, at-2, ... */

@font-face { font-family: "Supreme"; src: url("fonts/supreme-200.woff2") format("woff2"); font-weight: 200; font-display: block; }
@font-face { font-family: "Supreme"; src: url("fonts/supreme-300.woff2") format("woff2"); font-weight: 300; font-display: block; }
@font-face { font-family: "Supreme"; src: url("fonts/supreme-400.woff2") format("woff2"); font-weight: 400; font-display: block; }
@font-face { font-family: "Supreme"; src: url("fonts/supreme-500.woff2") format("woff2"); font-weight: 500; font-display: block; }

:root {
  --bg: #0A0F1E;
  --bg2: #0F1628;
  --bg3: #070B16;
  --ink: #F5F0E8;
  --ink2: #E8E0D0;
  --muted: rgba(245, 240, 232, 0.5);
  --faint: rgba(245, 240, 232, 0.14);
  --gold: #C9A96E;
  --gold-hi: #F1DBA6;
  --gold-deep: #8A6D3B;
  --bone: #E4E0D8;
  --silver: #B9BEC7;
  --line: rgba(201, 169, 110, 0.22);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);
  --font: "Supreme", "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; background: var(--bg3); overflow: hidden; }
body { font-family: var(--font); color: var(--ink); -webkit-font-smoothing: antialiased; cursor: default; }
body.is-idle { cursor: none; }

/* The stage: always 1920 x 1080, scaled and centred by deck.js through --scale. */
.deck {
  position: fixed; left: 50%; top: 50%;
  width: 1920px; height: 1080px;
  transform: translate(-50%, -50%) scale(var(--scale, 0.5));
  transform-origin: center;
  background: var(--bg);
  overflow: hidden;
}

.slide {
  position: absolute; inset: 0;
  opacity: 0; visibility: hidden;
  transition: opacity 0.9s var(--ease), visibility 0s linear 0.9s, transform 1.2s var(--ease), filter 0.9s var(--ease);
  transform: scale(1.015);
  filter: blur(6px);
}
.slide.is-active { opacity: 1; visibility: visible; transform: none; filter: none; transition-delay: 0s; }
.slide.is-past { transform: scale(0.985); }

/* Grain over everything, the site's GrainOverlay. */
.grain {
  position: absolute; inset: -50%; pointer-events: none; z-index: 50; opacity: 0.07; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation: grain 1.2s steps(6) infinite;
}
@keyframes grain { 0% { transform: translate(0, 0); } 33% { transform: translate(-3%, 2%); } 66% { transform: translate(2%, -3%); } 100% { transform: translate(0, 0); } }

/* Chrome: the progress hairline, the slide number, the corner mark. */
.chrome { position: absolute; inset: 0; pointer-events: none; z-index: 40; }
.chrome .progress { position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: rgba(201, 169, 110, 0.08); }
.chrome .progress i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--gold-deep), var(--gold), var(--gold-hi)); transition: width 0.9s var(--ease); }
.chrome .num { position: absolute; right: 72px; bottom: 44px; font-size: 15px; font-weight: 300; letter-spacing: 0.32em; color: var(--muted); font-variant-numeric: tabular-nums; transition: opacity 0.6s var(--ease); }
.chrome .num b { font-weight: 400; color: var(--gold); }
.chrome .corner { position: absolute; left: 72px; bottom: 34px; height: 36px; opacity: 0.85; transition: opacity 0.6s var(--ease); } /* larger (owner, 2026-10-28; it was 22px), still centred on the slide number's line */
.deck.on-cover .chrome .num, .deck.on-cover .chrome .corner { opacity: 0; }

/* Type. */
.eyebrow { font-size: 17px; font-weight: 300; letter-spacing: 0.42em; text-transform: uppercase; color: var(--gold); }
.h-xl { font-size: 128px; font-weight: 200; line-height: 1.02; letter-spacing: -0.02em; }
.h-l { font-size: 92px; font-weight: 200; line-height: 1.06; letter-spacing: -0.015em; }
.h-m { font-size: 64px; font-weight: 200; line-height: 1.1; letter-spacing: -0.01em; }
.lead { font-size: 30px; font-weight: 200; line-height: 1.5; color: rgba(245, 240, 232, 0.72); }
.gold { color: var(--gold); }
.muted { color: var(--muted); }

/* A line of type that rises out of its own mask. */
.mask { display: block; overflow: hidden; padding-bottom: 0.08em; }
.mask > span { display: block; transform: translateY(110%); transition: transform 1.3s var(--ease); }
.is-active .mask.in > span, .is-active.at-1 .mask.in1 > span, .is-active.at-2 .mask.in2 > span, .is-active.at-3 .mask.in3 > span { transform: none; }

/* Fades keyed to the slide being active, or to a step. */
.fade { opacity: 0; transform: translateY(18px); transition: opacity 1.1s var(--ease), transform 1.1s var(--ease); }
.is-active .fade.in, .is-active.at-1 .fade.in1, .is-active.at-2 .fade.in2, .is-active.at-3 .fade.in3 { opacity: 1; transform: none; }
.is-active.at-1 .fade.out1, .is-active.at-2 .fade.out2 { opacity: 0; transform: translateY(-18px); }

.d1 { transition-delay: 0.15s !important; } .d2 { transition-delay: 0.3s !important; } .d3 { transition-delay: 0.45s !important; }
.d4 { transition-delay: 0.6s !important; } .d5 { transition-delay: 0.8s !important; } .d6 { transition-delay: 1.0s !important; }
.d7 { transition-delay: 1.3s !important; } .d8 { transition-delay: 1.6s !important; } .d9 { transition-delay: 2.0s !important; }

/* The draft switcher (drafts only). */
.draftbar { position: fixed; top: 14px; left: 50%; transform: translateX(-50%); z-index: 100; display: flex; gap: 6px; padding: 6px; background: rgba(7, 11, 22, 0.8); border: 1px solid var(--line); font: 300 12px var(--font); letter-spacing: 0.2em; text-transform: uppercase; opacity: 0; transition: opacity 0.4s; }
body:not(.is-idle) .draftbar { opacity: 1; }
.draftbar a { color: var(--muted); text-decoration: none; padding: 8px 14px; }
.draftbar a:hover { color: var(--ink); background: rgba(201, 169, 110, 0.12); }
.draftbar a.on { color: var(--bg); background: var(--gold); }

/* A still picture for the presenter window: every motion lands at once. */
body.preview *, body.preview *::before, body.preview *::after { transition-duration: 0s !important; transition-delay: 0s !important; animation-duration: 0s !important; animation-delay: 0s !important; }
body.preview .grain { display: none; }

@media (prefers-reduced-motion: reduce) {
  .slide, .fade, .mask > span { transition-duration: 0.01s !important; transition-delay: 0s !important; }
  .grain { animation: none; }
}