/* Outvie — charcoal, gold, red. Bold chalkboard top, newspaper-style story pages. */

/* ---------- font (served from outvie.tv, not Google) ---------- */
@font-face { font-family: "Archivo"; font-style: normal; font-display: swap; font-weight: 100 900; font-stretch: 62% 125%;
  src: url(/assets/fonts/archivo-latin-wdth-normal.woff2) format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Archivo"; font-style: normal; font-display: swap; font-weight: 100 900; font-stretch: 62% 125%;
  src: url(/assets/fonts/archivo-latin-ext-wdth-normal.woff2) format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Archivo"; font-style: italic; font-display: swap; font-weight: 100 900; font-stretch: 62% 125%;
  src: url(/assets/fonts/archivo-latin-wdth-italic.woff2) format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Archivo"; font-style: italic; font-display: swap; font-weight: 100 900; font-stretch: 62% 125%;
  src: url(/assets/fonts/archivo-latin-ext-wdth-italic.woff2) format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --charcoal: #1c1c1e;
  --charcoal-2: #232326;
  --charcoal-3: #2c2c30;
  --line: rgba(255, 255, 255, 0.09);
  --line-strong: rgba(255, 255, 255, 0.18);
  --gold: #d2af37;
  --gold-hi: #e6c65a;
  --gold-dim: rgba(210, 175, 55, 0.14);
  --red: #ef3340;
  --red-glow: rgba(239, 51, 64, 0.55);
  --text: #eeede8;
  --text-soft: #d4d3cd;
  --muted: #a3a29c;
  --faint: #77766f;
  --radius: 12px;
  --wrap: 1180px;
  --font: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--charcoal);
  color: var(--text);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
/* chalkboard grain over everything */
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: 0.55;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
main, .nav, .foot { position: relative; z-index: 1; }
.chalk-ambient { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 0; pointer-events: none; display: block;
  -webkit-mask-image: radial-gradient(ellipse 55% 50% at 50% 48%, rgba(0,0,0,.25), #000 85%);
          mask-image: radial-gradient(ellipse 55% 50% at 50% 48%, rgba(0,0,0,.25), #000 85%); }
a { color: inherit; }
img { max-width: 100%; display: block; }
::selection { background: var(--gold); color: var(--charcoal); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 6px; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 50; background: var(--gold); color: var(--charcoal); padding: 10px 14px; border-radius: 8px; font-weight: 700; text-decoration: none; }
.skip:focus { top: 12px; }

.wrap { width: min(var(--wrap), 100% - 32px); margin-inline: auto; }
.wrap-narrow { width: min(720px, 100% - 32px); margin-inline: auto; }
.wrap-media { width: min(1040px, 100% - 32px); margin-inline: auto; }

/* ---------- menu ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 12px max(16px, calc((100% - var(--wrap)) / 2));
  transition: background .3s, border-color .3s;
  border-bottom: 1px solid transparent;
}
.nav.scrolled, body:not(.home) .nav { background: rgba(28, 28, 30, 0.88); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-color: var(--line); }
/* Top-left logo: the normal rocket-O and the Halloween cobweb version take turns, with a quick glitch at each swap. */
.nav-mark { position: relative; display: block; flex: none; width: 36px; height: 33px; transition: transform .25s, filter .25s; }
.nav-mark:hover { transform: translate(2px, -2px); filter: drop-shadow(0 4px 12px rgba(210,175,55,.35)); }
.nav-mark img { position: absolute; height: auto; max-width: none; }
.nav-mark .mark-normal { left: 0; top: 0; width: 36px; animation: mark-normal 6s steps(1, end) infinite; }
/* same size gold O as the normal logo; only the cobwebs and spider stick out */
.nav-mark .mark-spooky { left: 0; top: -2.6px; width: 36.6px; opacity: 0; animation: mark-spooky 6s steps(1, end) infinite; }
/* 6s loop: normal logo ~2.6s, glitch, Halloween logo ~2.6s, glitch, with a quick flicker in the middle of each. */
@keyframes mark-normal {
  0%   { opacity: 1; transform: none; clip-path: inset(0); filter: none; }
  20%  { opacity: 1; transform: translateX(2px); clip-path: inset(0 0 58% 0); filter: drop-shadow(2px 0 0 rgba(239,51,64,.85)) drop-shadow(-2px 0 0 rgba(80,210,255,.75)); }
  21%  { opacity: 1; transform: translateX(-2px); clip-path: inset(52% 0 0 0); filter: drop-shadow(-2px 0 0 rgba(239,51,64,.85)) drop-shadow(2px 0 0 rgba(80,210,255,.75)); }
  22%  { opacity: 1; transform: none; clip-path: inset(0); filter: none; }
  44%  { opacity: 1; transform: translateX(-3px); clip-path: inset(0 0 55% 0); filter: drop-shadow(2px 0 0 rgba(239,51,64,.85)) drop-shadow(-2px 0 0 rgba(80,210,255,.75)); }
  45%  { opacity: 0.5; transform: translateX(3px); clip-path: inset(40% 0 0 0); filter: drop-shadow(-2px 0 0 rgba(239,51,64,.85)) drop-shadow(2px 0 0 rgba(80,210,255,.75)); }
  46%  { opacity: 1; transform: translateX(-1px); clip-path: inset(18% 0 30% 0); filter: drop-shadow(2px 0 0 rgba(239,51,64,.85)) drop-shadow(-2px 0 0 rgba(80,210,255,.75)); }
  47%  { opacity: 0.3; transform: translateX(2px); clip-path: inset(60% 0 5% 0); filter: drop-shadow(-2px 0 0 rgba(239,51,64,.85)) drop-shadow(2px 0 0 rgba(80,210,255,.75)); }
  48%  { opacity: 0; transform: none; clip-path: inset(0); filter: none; }
  94%  { opacity: 0.6; transform: translateX(2px); clip-path: inset(50% 0 0 0); filter: drop-shadow(-2px 0 0 rgba(239,51,64,.85)) drop-shadow(2px 0 0 rgba(80,210,255,.75)); }
  95%  { opacity: 1; transform: translateX(-2px); clip-path: inset(0 0 45% 0); filter: drop-shadow(2px 0 0 rgba(239,51,64,.85)) drop-shadow(-2px 0 0 rgba(80,210,255,.75)); }
  96%  { opacity: 0.5; transform: translateX(3px); clip-path: inset(25% 0 20% 0); filter: drop-shadow(-2px 0 0 rgba(239,51,64,.85)) drop-shadow(2px 0 0 rgba(80,210,255,.75)); }
  97%  { opacity: 1; transform: translateX(-1px); clip-path: inset(0 0 10% 0); filter: drop-shadow(2px 0 0 rgba(239,51,64,.85)) drop-shadow(-2px 0 0 rgba(80,210,255,.75)); }
  98%  { opacity: 1; transform: none; clip-path: inset(0); filter: none; }
}
@keyframes mark-spooky {
  0%   { opacity: 0; transform: none; clip-path: inset(0); filter: none; }
  45%  { opacity: 0.7; transform: translateX(3px); clip-path: inset(0 0 50% 0); filter: drop-shadow(-2px 0 0 rgba(239,51,64,.85)) drop-shadow(2px 0 0 rgba(80,210,255,.75)); }
  46%  { opacity: 1; transform: translateX(-2px); clip-path: inset(35% 0 10% 0); filter: drop-shadow(2px 0 0 rgba(239,51,64,.85)) drop-shadow(-2px 0 0 rgba(80,210,255,.75)); }
  47%  { opacity: 0.6; transform: translateX(2px); clip-path: inset(0 0 30% 0); filter: drop-shadow(-2px 0 0 rgba(239,51,64,.85)) drop-shadow(2px 0 0 rgba(80,210,255,.75)); }
  48%  { opacity: 1; transform: none; clip-path: inset(0); filter: none; }
  70%  { opacity: 1; transform: translateX(-2px); clip-path: inset(0 0 60% 0); filter: drop-shadow(2px 0 0 rgba(239,51,64,.85)) drop-shadow(-2px 0 0 rgba(80,210,255,.75)); }
  71%  { opacity: 1; transform: translateX(2px); clip-path: inset(48% 0 0 0); filter: drop-shadow(-2px 0 0 rgba(239,51,64,.85)) drop-shadow(2px 0 0 rgba(80,210,255,.75)); }
  72%  { opacity: 1; transform: none; clip-path: inset(0); filter: none; }
  94%  { opacity: 1; transform: translateX(-3px); clip-path: inset(45% 0 0 0); filter: drop-shadow(2px 0 0 rgba(239,51,64,.85)) drop-shadow(-2px 0 0 rgba(80,210,255,.75)); }
  95%  { opacity: 0.4; transform: translateX(2px); clip-path: inset(0 0 40% 0); filter: drop-shadow(-2px 0 0 rgba(239,51,64,.85)) drop-shadow(2px 0 0 rgba(80,210,255,.75)); }
  96%  { opacity: 0.8; transform: translateX(-2px); clip-path: inset(20% 0 35% 0); filter: drop-shadow(2px 0 0 rgba(239,51,64,.85)) drop-shadow(-2px 0 0 rgba(80,210,255,.75)); }
  97%  { opacity: 0; transform: none; clip-path: inset(0); filter: none; }
}
.nav ul { list-style: none; display: flex; align-items: center; gap: 26px; margin: 0; padding: 0; }
.nav ul a { text-decoration: none; font-size: 14px; color: var(--muted); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; font-stretch: 112%; transition: color .2s; }
.nav ul a:hover, .nav ul a[aria-current="page"] { color: var(--text); }
.nav ul a[aria-current="page"] { box-shadow: 0 2px 0 var(--gold); }
.nav .nav-yt { position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: var(--gold); color: #17171a; }
/* Cartoon spider webs gift-wrapped over the YouTube button: classic webs (straight spokes, scalloped
   rings) stretched across the button and spilling over its edges and round both ends. */
.nav .nav-yt::before { content: ""; position: absolute; inset: -8px; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 155.2 54.4' fill='none' stroke='%23fff' stroke-width='1.05' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 27.2L33 27.2M6 27.2L26.7 44.6M6 27.2L10.5 52.9M6 27.2L1.5 35M6 27.2L1.5 28.8M6 27.2L1.5 25.6M6 27.2L1.5 19.4M6 27.2L10.5 1.5M6 27.2L26.7 9.8M11.6 27.2Q9.9 28.6 10.3 30.8M10.3 30.8Q8.1 30.8 7 32.7M7 32.7Q5.3 31.3 3.2 32M3.2 22.4Q5.3 23.1 7 21.7M7 21.7Q8.1 23.6 10.3 23.6M10.3 23.6Q9.9 25.8 11.6 27.2M17.2 27.2Q13.8 30 14.6 34.4M14.6 34.4Q10.1 34.4 7.9 38.2M7.9 16.2Q10.1 20 14.6 20M14.6 20Q13.8 24.4 17.2 27.2M22.8 27.2Q17.7 31.5 18.9 38M18.9 38Q12.2 38 8.9 43.7M8.9 10.7Q12.2 16.4 18.9 16.4M18.9 16.4Q17.7 22.9 22.8 27.2M28.4 27.2Q21.6 32.9 23.2 41.6M23.2 41.6Q14.3 41.6 9.9 49.3M9.9 5.1Q14.3 12.8 23.2 12.8M23.2 12.8Q21.6 21.5 28.4 27.2'/%3E%3Cpath d='M149.2 27.2L153.7 27.2M149.2 27.2L153.7 31M149.2 27.2L153.7 52.7M149.2 27.2L135.7 50.6M149.2 27.2L123.8 36.4M149.2 27.2L123.8 18M149.2 27.2L135.7 3.8M149.2 27.2L153.7 1.7M149.2 27.2L153.7 23.4M153.5 30.8Q151.3 30.8 150.2 32.7M150.2 32.7Q148.5 31.3 146.4 32M146.4 32Q146 29.9 143.9 29.1M143.9 29.1Q145.1 27.2 143.9 25.3M143.9 25.3Q146 24.5 146.4 22.4M146.4 22.4Q148.5 23.1 150.2 21.7M150.2 21.7Q151.3 23.6 153.5 23.6M151.1 38.2Q147.8 35.4 143.6 36.9M143.6 36.9Q142.9 32.5 138.7 31M138.7 31Q140.9 27.2 138.7 23.4M138.7 23.4Q142.9 21.9 143.6 17.5M143.6 17.5Q147.8 19 151.1 16.2M152.1 43.7Q147 39.4 140.8 41.7M140.8 41.7Q139.7 35.2 133.4 32.9M133.4 32.9Q136.8 27.2 133.4 21.5M133.4 21.5Q139.7 19.2 140.8 12.7M140.8 12.7Q147 15 152.1 10.7M153.1 49.3Q146.3 43.5 138 46.6M138 46.6Q136.5 37.9 128.2 34.9M128.2 34.9Q132.6 27.2 128.2 19.5M128.2 19.5Q136.5 16.5 138 7.8M138 7.8Q146.3 10.9 153.1 5.1'/%3E%3Cpath d='M84.6 4L102.9 8.9M84.6 4L99.1 16.2M84.6 4L92.6 21.2M84.6 4L84.6 23M84.6 4L76.5 21.2M84.6 4L70 16.2M84.6 4L66.2 8.9M89.4 5.3Q87.8 5.7 88.4 7.2M88.4 7.2Q86.8 6.9 86.7 8.5M86.7 8.5Q85.4 7.6 84.6 9M84.6 9Q83.8 7.6 82.4 8.5M82.4 8.5Q82.3 6.9 80.7 7.2M80.7 7.2Q81.3 5.7 79.7 5.3M94.2 6.6Q91.1 7.4 92.2 10.4M92.2 10.4Q89.1 9.9 88.8 13.1M88.8 13.1Q86.2 11.2 84.6 14M84.6 14Q83 11.2 80.3 13.1M80.3 13.1Q80.1 9.9 76.9 10.4M76.9 10.4Q78 7.4 74.9 6.6M99 7.9Q94.4 9.1 96.1 13.6M96.1 13.6Q91.3 12.8 90.9 17.6M90.9 17.6Q87 14.8 84.6 19M84.6 19Q82.2 14.8 78.2 17.6M78.2 17.6Q77.8 12.8 73.1 13.6M73.1 13.6Q74.7 9.1 70.1 7.9'/%3E%3Cpath d='M53.9 50.4L39.4 46.5M53.9 50.4L43.3 39.8M53.9 50.4L50.1 35.9M53.9 50.4L57.8 35.9M53.9 50.4L64.5 39.8M53.9 50.4L68.4 46.5M49.3 49.2Q50.9 48.6 50.5 47M50.5 47Q52.2 47.3 52.7 45.8M52.7 45.8Q53.9 46.8 55.2 45.8M55.2 45.8Q55.7 47.3 57.3 47M57.3 47Q57 48.6 58.6 49.2M44.7 47.9Q47.8 46.8 47.1 43.6M47.1 43.6Q50.4 44.2 51.5 41.1M51.5 41.1Q53.9 43.3 56.4 41.1M56.4 41.1Q57.5 44.2 60.7 43.6M60.7 43.6Q60.1 46.8 63.2 47.9M40 46.7Q44.7 45.1 43.8 40.2M43.8 40.2Q48.6 41.2 50.2 36.5M50.2 36.5Q53.9 39.7 57.7 36.5M57.7 36.5Q59.3 41.2 64.1 40.2M64.1 40.2Q63.2 45.1 67.8 46.7'/%3E%3Cpath d='M113.8 50.4L102.5 46.3M113.8 50.4L106.9 40.6M113.8 50.4L113.8 38.4M113.8 50.4L120.7 40.6M113.8 50.4L125.1 46.3M109.5 48.8Q111.1 48.3 111.2 46.6M111.2 46.6Q112.8 47.2 113.8 45.8M113.8 45.8Q114.8 47.2 116.4 46.6M116.4 46.6Q116.5 48.3 118.1 48.8M105.1 47.3Q108.4 46.3 108.5 42.9M108.5 42.9Q111.7 43.9 113.8 41.2M113.8 41.2Q115.8 43.9 119.1 42.9M119.1 42.9Q119.2 46.3 122.4 47.3'/%3E%3C/svg%3E") center / contain no-repeat;
  filter: drop-shadow(0 0 1px rgba(0,0,0,.6)); }
.nav .nav-yt:hover { color: #17171a; background: var(--gold-hi); }
.nav .nav-yt svg { width: 18px; height: 18px; }
@media (max-width: 560px) {
  /* five items on a phone: slightly narrower lettering so the menu stays on one line */
  .nav { gap: 10px; }
  .nav ul { gap: 12px; }
  .nav ul a { font-size: 12px; letter-spacing: .03em; font-stretch: 100%; }
  .nav .nav-yt { padding: 8px; }
  .nav .nav-yt span { display: none; }
  /* phones: the round button gets its own webs so nothing stretches */
  .nav .nav-yt::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 50' fill='none' stroke='%23fff' stroke-width='1.05' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 9L30 9M9 9L23.8 23.8M9 9L9 30M9 9L1.5 16.5M9 9L1.5 9M9 9L1.5 1.5M9 9L9 1.5M9 9L16.5 1.5M13.6 9Q12.1 10.3 12.3 12.3M12.3 12.3Q10.3 12.1 9 13.6M9 13.6Q7.7 12.1 5.7 12.3M5.7 12.3Q5.9 10.3 4.4 9M4.4 9Q5.9 7.7 5.7 5.7M5.7 5.7Q7.7 5.9 9 4.4M9 4.4Q10.3 5.9 12.3 5.7M12.3 5.7Q12.1 7.7 13.6 9M18.2 9Q15.3 11.6 15.5 15.5M15.5 15.5Q11.6 15.3 9 18.2M9 18.2Q6.4 15.3 2.5 15.5M15.5 2.5Q15.3 6.4 18.2 9M22.8 9Q18.4 12.9 18.8 18.8M18.8 18.8Q12.9 18.4 9 22.8M27.4 9Q21.6 14.2 22 22M22 22Q14.2 21.6 9 27.4'/%3E%3Cpath d='M41 41L48.5 41M41 41L48.5 48.5M41 41L41 48.5M41 41L33.5 48.5M41 41L22 41M41 41L27.6 27.6M41 41L41 22M41 41L48.5 33.5M45.6 41Q44.1 42.3 44.3 44.3M44.3 44.3Q42.3 44.1 41 45.6M41 45.6Q39.7 44.1 37.7 44.3M37.7 44.3Q37.9 42.3 36.4 41M36.4 41Q37.9 39.7 37.7 37.7M37.7 37.7Q39.7 37.9 41 36.4M41 36.4Q42.3 37.9 44.3 37.7M44.3 37.7Q44.1 39.7 45.6 41M34.5 47.5Q34.7 43.6 31.8 41M31.8 41Q34.7 38.4 34.5 34.5M34.5 34.5Q38.4 34.7 41 31.8M41 31.8Q43.6 34.7 47.5 34.5M27.2 41Q31.6 37.1 31.2 31.2M31.2 31.2Q37.1 31.6 41 27.2M22.6 41Q28.4 35.8 28 28M28 28Q35.8 28.4 41 22.6'/%3E%3Cpath d='M44 7L43 19M44 7L37.1 16.8M44 7L33.1 12.1M44 7L32 6M44 7L36.1 1.5M43.7 11Q43 9.8 41.7 10.3M41.7 10.3Q41.7 8.9 40.4 8.7M40.4 8.7Q41.1 7.5 40 6.7M40 6.7Q41.2 6 40.7 4.7M43.3 15Q42 12.6 39.4 13.6M39.4 13.6Q39.5 10.8 36.7 10.4M36.7 10.4Q38.2 8 36 6.3M36 6.3Q38.4 5 37.4 2.4'/%3E%3C/svg%3E"); }
}

/* ---------- buttons & labels ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 22px; border-radius: 999px;
  font-weight: 700; font-size: 15px; letter-spacing: .02em; text-decoration: none;
  border: 1px solid var(--gold); transition: transform .15s, background .2s, color .2s, box-shadow .2s;
}
.btn svg { width: 18px; height: 18px; flex: none; }
.btn.gold { background: var(--gold); color: #17171a; }
.btn.gold:hover { background: var(--gold-hi); box-shadow: 0 8px 30px rgba(210,175,55,.25); transform: translateY(-1px); }
.btn.ghost { color: var(--gold); background: transparent; }
.btn.ghost:hover { background: var(--gold-dim); transform: translateY(-1px); }

.label, .eyebrow {
  display: inline-block; font-size: 12px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase;
  font-stretch: 115%; color: var(--gold); text-decoration: none;
}
.eyebrow, .rule-head h2 { display: inline-flex; align-items: center; gap: 10px; }
.eyebrow::before, .rule-head h2::before, .social-text small::before {
  content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--red);
  box-shadow: 0 0 10px var(--red-glow); animation: breathe 2.8s ease-in-out infinite;
}
.social-text small { display: inline-flex; align-items: center; gap: 7px; }
.social-text small::before { width: 7px; height: 7px; }
a.label:hover { color: var(--gold-hi); text-decoration: underline; text-underline-offset: 3px; }
.label-draft { color: var(--red); margin-left: 10px; }
.meta { margin: 10px 0 0; font-size: 13.5px; color: var(--muted); letter-spacing: .02em; }

/* ---------- logo with live red dot ---------- */
.logo { display: block; position: relative; width: min(560px, 80vw); margin-inline: auto; }
.logo img { width: 100%; height: auto; filter: drop-shadow(0 6px 30px rgba(210, 175, 55, 0.18)); }
.logo .dot {
  position: absolute; left: 75.675%; top: 36.806%; width: 5.78%; aspect-ratio: 1;
  transform: translate(-50%, -50%); border-radius: 50%; background: var(--red); opacity: 0;
  /* intro: logo settles, then the dot fades in, then it breathes in and out */
  animation: dot-in .9s ease-out 1.1s forwards, breathe 2.8s ease-in-out 2s infinite;
}
@keyframes dot-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes breathe {
  0%, 100% { opacity: 1; box-shadow: 0 0 14px 2px var(--red-glow); }
  50% { opacity: .12; box-shadow: 0 0 0 0 transparent; }
}
.hero .logo img, .links-page .logo img { animation: logo-in 1.1s cubic-bezier(.2,.7,.2,1) both; }
@keyframes logo-in { from { opacity: 0; transform: translateY(10px) scale(.985); filter: blur(4px); } to { opacity: 1; transform: none; } }
.hero-tag, .hero .cta { animation: fade-up .8s ease-out both; }
.hero-tag { animation-delay: .5s; }
.hero .cta { animation-delay: .8s; }
@keyframes fade-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---------- hero ---------- */
.hero {
  position: relative; z-index: 1;
  min-height: 100svh; max-height: 1100px;
  display: grid; place-items: center; text-align: center;
  padding: 100px 16px 110px; overflow: hidden;
  /* deep-space charcoal: a touch darker and cooler toward the edges */
  background:
    radial-gradient(ellipse 70% 60% at 50% 45%, rgba(255,255,255,.05), transparent 70%),
    radial-gradient(ellipse 50% 40% at 85% 100%, rgba(239,51,64,.07), transparent 70%),
    radial-gradient(ellipse 50% 40% at 10% 0%, rgba(210,175,55,.06), transparent 70%),
    radial-gradient(ellipse 120% 100% at 50% 50%, transparent 40%, rgba(8,8,16,.55) 100%),
    var(--charcoal);
  border-bottom: 1px solid var(--line);
}
/* faint nebula haze that slowly breathes */
.hero::before {
  content: ""; position: absolute; inset: -10%; pointer-events: none;
  background:
    radial-gradient(ellipse 38% 32% at 82% 22%, rgba(110, 86, 190, .16), transparent 70%),
    radial-gradient(ellipse 30% 26% at 72% 34%, rgba(239, 51, 64, .06), transparent 70%),
    radial-gradient(ellipse 40% 34% at 16% 78%, rgba(64, 120, 190, .12), transparent 70%),
    radial-gradient(ellipse 26% 22% at 26% 66%, rgba(210, 175, 55, .06), transparent 70%);
  filter: blur(8px);
  animation: nebula 22s ease-in-out infinite alternate;
}
@keyframes nebula {
  from { opacity: .75; transform: scale(1) translate(0, 0); }
  to   { opacity: 1;   transform: scale(1.06) translate(-1.5%, 1%); }
}
/* same soft centre fade as the original site, so marks dim as they pass behind the logo */
.chalk-hero { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse 55% 50% at 50% 48%, rgba(0,0,0,.28), #000 85%);
          mask-image: radial-gradient(ellipse 55% 50% at 50% 48%, rgba(0,0,0,.28), #000 85%); }
.hero-inner { position: relative; z-index: 1; }
.hero-logo { margin: 0; }
.hero-tag {
  margin: 22px auto 0; max-width: 26ch;
  font-stretch: 112%; font-weight: 700; font-size: clamp(17px, 2.3vw, 24px); line-height: 1.3;
  color: var(--text-soft); text-wrap: balance;
}
.cta { margin-top: 32px; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.scroll-cue { position: absolute; z-index: 1; bottom: 26px; left: 50%; width: 22px; height: 36px; margin-left: -11px; border: 2px solid var(--line-strong); border-radius: 12px; }
.scroll-cue::after { content: ""; position: absolute; left: 50%; top: 7px; width: 4px; height: 7px; margin-left: -2px; border-radius: 2px; background: var(--gold); animation: cue 1.8s ease-in-out infinite; }
@keyframes cue { 0% { opacity: 0; transform: translateY(-3px); } 40% { opacity: 1; } 100% { opacity: 0; transform: translateY(9px); } }

/* ---------- newspaper front ---------- */
.front { padding: clamp(48px, 7vw, 84px) 0 clamp(40px, 6vw, 72px); }
.rule-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  border-top: 3px solid var(--text); padding-top: 10px; margin-bottom: 28px;
}
.rule-head h2 { margin: 0; font-size: 14px; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; font-stretch: 120%; }
.more { font-size: 14px; font-weight: 700; color: var(--gold); text-decoration: none; }
.more:hover { color: var(--gold-hi); }

.thumb { display: block; position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; background: var(--charcoal-2); border: 1px solid var(--line); }
.thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.2,.7,.2,1); }
a.thumb:hover img, .card:hover .thumb img, .lead-story:hover .thumb img { transform: scale(1.035); }
.thumb-chalk {
  position: absolute; inset: 0;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 180' fill='none' stroke-linecap='round' stroke-width='3'%3E%3Cg stroke='%23ebeae2' stroke-opacity='.32'%3E%3Ccircle cx='96' cy='118' r='9'/%3E%3Ccircle cx='136' cy='118' r='9'/%3E%3Ccircle cx='176' cy='118' r='9'/%3E%3Ccircle cx='216' cy='118' r='9'/%3E%3Cpath d='M108 62l14 14M122 62l-14 14M188 56l14 14M202 56l-14 14M148 40l12 12M160 40l-12 12'/%3E%3Cpath d='M216 106V80q0-8 10-14l22-14' stroke-dasharray='7 8'/%3E%3C/g%3E%3Cpath d='M96 106V60q0-10 10-16l40-22m-12-2 12 2-4 12' stroke='%23d2af37' stroke-opacity='.75'/%3E%3C/svg%3E") center / 72% no-repeat,
    radial-gradient(ellipse at 50% 40%, #2a2a2e, #202023);
}
.play-badge { position: absolute; left: 12px; bottom: 12px; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: rgba(20,20,22,.78); border: 1px solid rgba(255,255,255,.18); color: var(--red); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.play-badge svg { width: 18px; height: 18px; margin-left: 2px; }

/* lead story: big headline + big picture */
.lead-story { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr); gap: clamp(20px, 3.5vw, 44px); align-items: center; padding-bottom: clamp(28px, 4vw, 44px); border-bottom: 1px solid var(--line); }
.lead-thumb { order: 2; }
.lead-body { order: 1; }
.lead-title { margin: 10px 0 0; font-size: clamp(30px, 4.3vw, 56px); line-height: 1.03; font-weight: 800; font-stretch: 104%; letter-spacing: -.01em; text-wrap: balance; }
.lead-title a, .card-title a { text-decoration: none; }
.lead-title a:hover, .card-title a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; text-decoration-color: var(--gold); }
.lead-story .summary { margin: 16px 0 0; font-size: clamp(16px, 1.5vw, 19px); color: var(--text-soft); line-height: 1.55; }
.lead-story .meta .btn { margin-top: 8px; }
@media (max-width: 820px) {
  .lead-story { grid-template-columns: 1fr; }
  .lead-thumb { order: 0; }
}

/* story grid */
.grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px 28px; margin-top: clamp(28px, 4vw, 40px); }
.card { display: flex; flex-direction: column; min-width: 0; }
.card .thumb { margin-bottom: 14px; }
.card-title { margin: 6px 0 0; font-size: clamp(19px, 1.7vw, 22px); line-height: 1.18; font-weight: 800; font-stretch: 102%; text-wrap: balance; }
.card .summary { margin: 8px 0 0; font-size: 15px; color: var(--muted); line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.card .meta { margin-top: auto; padding-top: 10px; }
.is-placeholder .label { color: var(--faint); }
.labels { display: flex; flex-wrap: wrap; gap: 4px 0; }
.is-placeholder .card-title, .is-placeholder .lead-title { color: var(--text-soft); }
@media (max-width: 960px) { .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) {
  .grid { grid-template-columns: 1fr; gap: 0; }
  /* phones: compact list rows, picture on the right, like a news app */
  .grid .card { display: grid; grid-template-columns: minmax(0, 1fr) 120px; grid-template-areas: "labels thumb" "title thumb" "meta thumb"; column-gap: 14px; align-items: start; padding: 18px 0; border-top: 1px solid var(--line); }
  .grid .card .thumb { grid-area: thumb; margin: 0; border-radius: 8px; }
  .grid .card .labels { grid-area: labels; }
  .grid .card .card-title { grid-area: title; font-size: 18px; }
  .grid .card .summary { display: none; }
  .grid .card .meta { grid-area: meta; padding-top: 6px; }
  .grid .card .play-badge { width: 26px; height: 26px; left: 6px; bottom: 6px; }
  .grid .card .play-badge svg { width: 12px; height: 12px; }
}

/* follow strip */
.follow { padding: clamp(40px, 6vw, 72px) 0 clamp(60px, 8vw, 100px); }
.socials { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.social {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px;
  padding: 18px 20px; border-radius: 14px; text-decoration: none;
  background: rgba(35,35,38,.85); border: 1px solid var(--line);
  transition: border-color .2s, transform .15s, background .2s;
}
.social:hover { border-color: rgba(210,175,55,.55); transform: translateY(-2px); background: rgba(44,44,48,.9); }
.social-ico { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--gold-dim); color: var(--gold); }
.social-ico svg { width: 22px; height: 22px; }
.social-text b { display: block; font-size: 17px; }
.social-text small { color: var(--muted); font-size: 13.5px; }
.social-go { font-size: 13.5px; font-weight: 700; color: var(--gold); white-space: nowrap; }
.biz-line { margin: 28px 0 0; color: var(--muted); font-size: 15px; }
.biz-line a { color: var(--gold); font-weight: 700; text-decoration: none; }
.biz-line a:hover { color: var(--gold-hi); }
@media (max-width: 900px) { .socials { grid-template-columns: 1fr; } }

/* ---------- inner page headers ---------- */
.page-head { padding: clamp(110px, 14vw, 150px) 0 8px; }
.page-head h1 { margin: 10px 0 0; font-size: clamp(38px, 6vw, 72px); line-height: 1.02; font-weight: 800; font-stretch: 108%; letter-spacing: -.01em; text-wrap: balance; }
.page-head h1 em { font-style: normal; color: var(--gold); }
.page-head .lead { margin: 18px 0 0; font-size: clamp(17px, 1.8vw, 20px); color: var(--text-soft); }
.page-head + .front { padding-top: clamp(24px, 4vw, 40px); }
.section-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.section-tabs a { padding: 7px 14px; border-radius: 999px; border: 1px solid var(--line-strong); font-size: 13.5px; font-weight: 700; text-decoration: none; color: var(--muted); }
.section-tabs a:hover { color: var(--text); border-color: var(--gold); }
.section-tabs a[aria-current="page"] { background: var(--gold); border-color: var(--gold); color: #17171a; }

/* ---------- story page ---------- */
.story { padding-bottom: clamp(40px, 6vw, 80px); }
.story-head { padding-top: clamp(110px, 13vw, 150px); text-align: center; }
.story-title { margin: 12px 0 0; font-size: clamp(34px, 5.6vw, 64px); line-height: 1.03; font-weight: 800; font-stretch: 104%; letter-spacing: -.012em; text-wrap: balance; }
.story-dek { margin: 18px auto 0; max-width: 40ch; font-size: clamp(18px, 2vw, 22px); line-height: 1.45; color: var(--text-soft); text-wrap: pretty; }
.story-head .meta { margin-top: 18px; }
.story-media { margin-top: clamp(28px, 4vw, 44px); }
.video { position: relative; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: #000; border: 1px solid var(--line); box-shadow: 0 30px 80px rgba(0,0,0,.45); }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-facade { position: absolute; inset: 0; display: grid; place-items: center; cursor: pointer; }
.video-facade img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.7,.2,1), filter .3s; }
.video-facade::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(0,0,0,.05), rgba(0,0,0,.45)); }
.video-play { position: relative; z-index: 1; width: clamp(64px, 9vw, 92px); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; background: var(--red); color: #fff; box-shadow: 0 0 0 0 rgba(239,51,64,.5), 0 12px 40px rgba(0,0,0,.4); transition: transform .2s, box-shadow .3s; }
.video-play svg { width: 42%; height: 42%; margin-left: 6%; }
.video-facade:hover img { transform: scale(1.03); filter: brightness(1.08); }
.video-facade:hover .video-play { transform: scale(1.07); box-shadow: 0 0 0 10px rgba(239,51,64,.18), 0 12px 40px rgba(0,0,0,.4); }
.video-note { margin: 10px 0 0; text-align: center; font-size: 12.5px; color: var(--faint); }
.video-note a { color: var(--muted); }
.story-figure { margin: 0; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); }

.story-body { margin-top: clamp(32px, 5vw, 52px); font-size: clamp(17px, 1.6vw, 19px); line-height: 1.75; color: var(--text-soft); }
.story-body > :first-child { margin-top: 0; }
.story-body p { margin: 0 0 1.3em; }
.story-body h2 { margin: 1.8em 0 .5em; font-size: clamp(23px, 2.4vw, 28px); line-height: 1.2; color: var(--text); font-weight: 800; font-stretch: 104%; }
.story-body h3 { margin: 1.5em 0 .4em; font-size: 21px; color: var(--text); }
.story-body a { color: var(--gold); text-underline-offset: 3px; }
.story-body a:hover { color: var(--gold-hi); }
.story-body strong { color: var(--text); }
.story-body blockquote { margin: 1.6em 0; padding: 4px 0 4px 22px; border-left: 3px solid var(--gold); font-size: 1.12em; font-weight: 600; color: var(--text); font-stretch: 104%; }
.story-body blockquote p { margin: 0 0 .4em; }
.story-body ul, .story-body ol { padding-left: 1.3em; margin: 0 0 1.3em; }
.story-body li { margin-bottom: .4em; }
.story-body img { border-radius: 10px; margin: 1.6em 0; }
.story-body hr { border: 0; height: 1px; background: var(--line-strong); margin: 2.4em 0; }
.story-empty { color: var(--muted); font-style: italic; text-align: center; }
.story-cta { margin-top: 2em; text-align: center; }
.more-stories { padding: 0 0 clamp(60px, 8vw, 100px); }

/* ---------- about & contact ---------- */
.define { margin: 20px 0 0; color: var(--muted); font-size: clamp(16px, 1.9vw, 19px); }
.define b { color: var(--gold); font-weight: 700; }
.define i { color: var(--text); font-style: normal; }
.prose { font-size: 18px; color: var(--text-soft); line-height: 1.7; }
.prose .lead { font-size: clamp(19px, 2vw, 23px); color: var(--text); line-height: 1.5; margin: 32px 0; }
.prose a { color: var(--gold); }
.prose .actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 32px 0 clamp(60px, 8vw, 100px); }
.pillars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-block: 8px 40px; }
.pillar { position: relative; overflow: hidden; padding: 28px 26px 30px; border-radius: 16px; background: linear-gradient(180deg, var(--charcoal-3), var(--charcoal-2)); border: 1px solid var(--line); }
.pillar .num { font-stretch: 125%; font-weight: 800; font-size: 13px; letter-spacing: .2em; color: var(--gold); }
.pillar h2 { font-stretch: 110%; font-size: 22px; margin: 14px 0 8px; font-weight: 800; }
.pillar p { margin: 0; color: var(--muted); font-size: 16px; }
.pillar::after { content: ""; position: absolute; right: -30px; bottom: -30px; width: 120px; height: 120px; border-radius: 50%; background: radial-gradient(circle, var(--gold-dim), transparent 70%); }
@media (max-width: 820px) { .pillars { grid-template-columns: 1fr; } }

.contact { padding: 28px 0 clamp(60px, 8vw, 100px); }
.contact-mail { display: inline-block; font-stretch: 112%; font-weight: 800; font-size: clamp(26px, 4.4vw, 44px); color: var(--gold); text-decoration: none; word-break: break-all; }
.contact-mail:hover { color: var(--gold-hi); }
.contact h2 { font-size: 13px; letter-spacing: .2em; text-transform: uppercase; font-stretch: 115%; color: var(--muted); margin: 40px 0 12px; }
.contact-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.contact-cols p { margin: 0; color: var(--text-soft); }
.ticks { margin: 0; padding: 0; list-style: none; color: var(--text-soft); }
.ticks li { padding: 8px 0; border-top: 1px solid var(--line); display: flex; gap: 10px; }
.ticks li::before { content: "—"; color: var(--red); }
.contact-social { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; }
.contact-social a { padding: 9px 16px; border-radius: 999px; border: 1px solid var(--line-strong); text-decoration: none; font-weight: 700; font-size: 14.5px; }
.contact-social a:hover { border-color: var(--gold); color: var(--gold); }
@media (max-width: 640px) { .contact-cols { grid-template-columns: 1fr; } }

/* ---------- legal pages ---------- */
.legal { padding: clamp(110px, 13vw, 140px) 0 80px; }
.legal h1 { font-stretch: 112%; font-weight: 800; font-size: clamp(32px, 5vw, 48px); margin: 12px 0 6px; }
.legal .updated { color: var(--muted); margin: 0 0 40px; }
.legal h2 { font-size: 22px; margin: 40px 0 10px; font-stretch: 105%; }
.legal p, .legal li { color: var(--text-soft); }
.legal ul { padding-left: 20px; }
.legal a { color: var(--gold); }

/* ---------- footer ---------- */
.foot { padding: 40px 0 46px; border-top: 1px solid var(--line); background: rgba(24,24,26,.6); }
.foot-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; color: var(--muted); font-size: 14px; }
.foot-mark { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.foot-mark img { width: 26px; }
.foot nav { display: flex; gap: 8px 20px; flex-wrap: wrap; }
.foot a { text-decoration: none; }
.foot nav a:hover { color: var(--gold); }
.foot-tm { margin-top: 18px; margin-bottom: 0; font-size: 12px; color: var(--faint); }

/* ---------- link-in-bio ---------- */
.links-page { min-height: 100svh; display: grid; justify-items: center; align-content: start; padding: 56px 16px 40px; text-align: center; }
.links-page .logo { width: min(300px, 72vw); }
.links-page .hero-tag { font-size: 15px; margin-top: 14px; }
.stack { width: min(440px, 100%); margin: 28px auto 0; display: grid; gap: 12px; }
.link {
  display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 14px;
  background: rgba(35,35,38,.9); border: 1px solid var(--line); text-decoration: none; text-align: left;
  transition: border-color .2s, transform .15s;
}
.link:hover { border-color: rgba(210,175,55,.6); transform: translateY(-1px); }
.link .ico { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: var(--gold-dim); color: var(--gold); flex: none; }
.link .ico svg { width: 20px; height: 20px; }
.link b { display: block; font-size: 16px; }
.link small { color: var(--muted); font-size: 13.5px; }
.link.feature { background: var(--gold); color: #17171a; border-color: var(--gold); }
.link.feature small { color: rgba(23,23,26,.7); }
.link.feature .ico { background: rgba(23,23,26,.12); color: #17171a; }
.links-page .fine { margin-top: 30px; font-size: 12.5px; color: var(--muted); }
.links-page .fine a { text-decoration: none; }
.links-page .fine a:hover { color: var(--gold); }

/* ---------- 404 ---------- */
.lost { min-height: 100svh; display: grid; place-items: center; text-align: center; padding: 16px; }
.lost h1 { font-stretch: 125%; font-weight: 800; font-size: clamp(60px, 14vw, 140px); margin: 0; color: var(--gold); line-height: 1; }
.lost .red { color: var(--red); }
.lost p { color: var(--muted); }
.lost-actions { margin-top: 26px; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ---------- reveal on scroll ---------- */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .logo .dot, .logo img, .hero-tag, .cta, .scroll-cue::after, .hero::before,
  .eyebrow::before, .rule-head h2::before, .social-text small::before { animation: none !important; }
  .nav-mark .mark-normal, .nav-mark .mark-spooky { animation: none !important; }
  .nav-mark .mark-spooky { opacity: 0; }
  .logo .dot { opacity: 1; box-shadow: 0 0 14px 2px var(--red-glow); }
  .reveal { opacity: 1; transform: none; transition: none; }
  .thumb img, .video-facade img { transition: none; }
}

/* ---------- shop (shop.outvie.tv): low-key coming-soon page ---------- */
.shop-line {
  margin: 0;
  /* sized to sit just wider than the YouTube button below it (button is the same size on every screen) */
  font-size: 32px; line-height: 1.1; font-weight: 800; font-stretch: 112%; letter-spacing: -.005em;
  color: var(--text); text-wrap: balance;
  animation: fade-up .9s ease-out .2s both;
}
.shop-hero .cta { margin-top: 34px; animation-delay: .5s; }

/* Top bar on the shop: plain logo (no swap) and social icons; YouTube is the gold circle. */
.nav-mark.is-plain .mark-normal { animation: none; }
.nav .nav-social { gap: 10px; }
.nav .nav-social a {
  display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
  color: var(--text); border: 1px solid var(--line-strong); letter-spacing: 0; box-shadow: none;
  transition: color .2s, border-color .2s, background .2s, transform .15s;
}
.nav .nav-social a:hover { color: var(--gold); border-color: var(--gold); transform: translateY(-1px); }
.nav .nav-social svg { width: 17px; height: 17px; }
.nav .nav-social .social-yt { background: var(--gold); border-color: var(--gold); color: #17171a; }
.nav .nav-social .social-yt:hover { background: var(--gold-hi); color: #17171a; }
.nav .nav-social .social-yt svg { width: 19px; height: 19px; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
@media (prefers-reduced-motion: reduce) { .shop-line { animation: none !important; } }

/* very narrow phones: a little tighter still (after the general phone rules so it wins) */
@media (max-width: 380px) {
  .nav ul { gap: 9px; }
  .nav ul a { font-size: 11.5px; letter-spacing: .02em; }
}