/* rickguerrero.net shared system: Rick's brand (dalmatianhomes.com) carried into his personal site.
   Tokens, glass nav, phone menu, video player dialog, pills, draft tags. Page-specific scenes live inline. */
/* Self-hosted (OFL) so the first screen needs no extra connections to Google. Latin subset covers RÁK, ® and the middle dot. */
@font-face { font-family: "Bebas Neue"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/bebas-neue-latin.woff2") format("woff2"); }
@font-face { font-family: "Outfit"; font-style: normal; font-weight: 300 600; font-display: swap; src: url("/assets/fonts/outfit-latin.woff2") format("woff2"); }
:root {
  --ink: #0A0A0A;
  --ink-2: #1A1A1A;
  --paper: #FFFFFF;
  --muted: #42464C;
  --muted-night: #C9CDD2;
  --line: rgba(10, 10, 10, 0.12);
  --line-night: rgba(255, 255, 255, 0.14);
  --fd: "Bebas Neue", "Arial Narrow", sans-serif;
  --f: "Outfit", system-ui, sans-serif;
  --magenta: oklch(0.64 0.25 350);   /* RÁK club light */
  --ice: #C9E8FF;                     /* Rick's G app signal blue */
  --glass-light: rgba(255, 255, 255, 0.58);
  --glass-dark: rgba(14, 14, 16, 0.46);
  --glass-blur: saturate(1.8) blur(18px);
  --glass-radius: 22px;
  --glass-shadow: 0 20px 60px -20px rgba(10, 10, 10, 0.22), 0 2px 6px -2px rgba(10, 10, 10, 0.08);
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --edge: clamp(10px, 1.2vw, 16px);
  --wrap: min(1240px, 100% - 2 * var(--edge) - 1rem);
}
* { box-sizing: border-box; }
html { background: var(--paper); }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 1.0625rem/1.55 var(--f); -webkit-font-smoothing: antialiased; }
body.is-night-page, html.is-night-page { background: var(--ink); color: var(--paper); }
img, video { display: block; max-width: 100%; }
/* Without this an <img> keeps its HTML height when CSS sets only a width: marks distort and aspect-ratio is ignored. */
img { height: auto; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 6px; }
.night :focus-visible, body.is-night :focus-visible, body.is-night-page :focus-visible { outline-color: var(--paper); }
h1, h2, h3 { font-family: var(--fd); font-weight: 400; margin: 0; letter-spacing: 0.005em; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
.wrap { width: var(--wrap); margin-inline: auto; }
/* Native anchor jumps (no JS) also clear the floating glass nav. */
[id] { scroll-margin-top: 88px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Liquid glass pill nav. Footage and aurora pass under it (auteur-allow GLASS: Rick's brand system). */
.nav { position: fixed; z-index: 50; top: calc(var(--edge) + 6px); left: 50%; translate: -50% 0; width: min(780px, calc(100% - 2 * var(--edge) - 12px));
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.45rem 0.45rem 0.45rem 1.15rem;
  background: var(--glass-light); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 1px solid rgba(255, 255, 255, 0.55); border-radius: 26px;
  box-shadow: var(--glass-shadow), inset 0 1px 0 0 rgba(255, 255, 255, 0.85);
  transition: background-color 280ms var(--ease-out), border-color 280ms var(--ease-out), color 280ms var(--ease-out); transform: translateZ(0); flex-wrap: wrap; }
/* 280ms: the nav crosses from day glass to night glass while the page itself turns; it should not snap. */
.nav .who { font: 500 0.98rem/1 var(--f); text-decoration: none; white-space: nowrap; }
.nav ul { list-style: none; display: flex; gap: 0.15rem; margin: 0; padding: 0; }
.nav ul a { display: block; font: 400 0.92rem/1 var(--f); text-decoration: none; padding: 0.62rem 0.8rem; border-radius: 999px; transition: background-color 140ms ease; }
.nav ul a:hover { background: rgba(10, 10, 10, 0.07); }
.nav .end { display: flex; gap: 0.35rem; align-items: center; }
.nav .go { font: 500 0.92rem/1 var(--f); text-decoration: none; padding: 0.68rem 1.05rem; border-radius: 999px; background: var(--ink); color: var(--paper); white-space: nowrap; }
.nav .menu-btn { display: none; font: 500 0.92rem/1 var(--f); padding: 0.66rem 0.95rem; border-radius: 999px; border: 1px solid currentColor; background: transparent; color: inherit; cursor: pointer; }
body.is-night .nav, body.is-night-page .nav { background: var(--glass-dark); border-color: rgba(255, 255, 255, 0.16); color: var(--paper);
  box-shadow: 0 20px 60px -20px rgba(0, 0, 0, 0.6), inset 0 1px 0 0 rgba(255, 255, 255, 0.18); }
body.is-night .nav ul a:hover, body.is-night-page .nav ul a:hover { background: rgba(255, 255, 255, 0.1); }
body.is-night .nav .go, body.is-night-page .nav .go { background: var(--paper); color: var(--ink); }

/* Pills */
.pill { display: inline-flex; align-items: center; gap: 0.5rem; font: 500 0.98rem/1 var(--f); text-decoration: none; padding: 0.95rem 1.25rem; border-radius: 999px; border: 1px solid transparent; cursor: pointer; transition: background-color 140ms ease, color 140ms ease, border-color 140ms ease; }
.pill.solid { background: var(--ink); color: var(--paper); }
.pill.solid:hover { background: #2a2d31; }
.pill.light { background: var(--paper); color: var(--ink); }
.pill.light:hover { background: var(--ice); }
.pill.glass { color: var(--paper); background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.28); -webkit-backdrop-filter: blur(12px) saturate(1.5); backdrop-filter: blur(12px) saturate(1.5); box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.25); }
.pill.glass:hover { background: rgba(255, 255, 255, 0.22); }
.pill.line { color: inherit; border-color: currentColor; background: transparent; }
.pill.line:hover { background: rgba(10, 10, 10, 0.06); }
.pill .tri { width: 0; height: 0; border-left: 8px solid currentColor; border-top: 5px solid transparent; border-bottom: 5px solid transparent; }

/* Draft tags: anything still waiting on Rick. */
.tbd { display: inline-block; font: 500 0.75rem/1.25 var(--f); font-style: normal; letter-spacing: 0; background: #fff3c4; color: #5a4600; border: 1px dashed #b58f00; padding: 0.28em 0.6em; border-radius: 999px; vertical-align: middle; }
.draft-tag { position: fixed; z-index: 60; right: var(--edge); bottom: var(--edge); font: 500 0.8rem/1 var(--f); padding: 0.55rem 0.8rem; border-radius: 999px; background: rgba(255, 243, 196, 0.94); color: #5a4600; border: 1px dashed #b58f00; }

/* Video player dialog: one player for every "play with sound" on the site. */
dialog.player { padding: 0; border: 0; background: transparent; max-width: none; max-height: none; width: 100vw; height: 100dvh; margin: 0; color: var(--paper); }
dialog.player::backdrop { background: rgba(6, 6, 8, 0.72); -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3); }
dialog.player[open] { display: grid; place-items: center; animation: player-in 220ms var(--ease-out); }
/* 220ms: modal enter per motion.md (200-500ms band); exit is the native instant close. */
@keyframes player-in { from { opacity: 0; transform: scale(0.97); } to { opacity: 1; transform: none; } }
.player .box { position: relative; display: grid; gap: 0.75rem; justify-items: center; width: min(92vw, 520px); }
.player video { width: 100%; max-height: 80dvh; aspect-ratio: 9 / 16; object-fit: contain; background: #000; border-radius: 18px; box-shadow: 0 40px 100px -30px rgba(0, 0, 0, 0.8); }
.player .bar { display: flex; width: 100%; justify-content: space-between; align-items: center; gap: 1rem; }
.player .player-title { font: 400 1.6rem/1 var(--fd); letter-spacing: 0.01em; }
.player .close { font: 500 0.95rem/1 var(--f); color: var(--paper); background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.28); border-radius: 999px; padding: 0.7rem 1rem; cursor: pointer; }
.player .close:hover { background: rgba(255, 255, 255, 0.22); }

/* Phone nav */
@media (max-width: 860px) {
  .nav ul { display: none; order: 3; width: 100%; flex-direction: column; padding: 0.4rem 0 0.2rem; }
  .nav.open ul { display: flex; }
  .nav ul a { font-size: 1.05rem; padding: 0.85rem 0.6rem; }
  .nav .menu-btn { display: inline-block; }
  /* Google's tap-target guidance: about 48px on touch. */
  .nav .menu-btn, .nav .go { min-height: 44px; padding-block: 0; display: inline-flex; align-items: center; }
  .nav { gap: 0.4rem; padding-left: 0.95rem; }
  .nav .who { font-size: 0.92rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .nav .end { gap: 0.3rem; flex: none; }
  .nav .menu-btn, .nav .go { padding-inline: 0.85rem; font-size: 0.88rem; }
  .pill { min-height: 44px; }
  .nav.open { border-radius: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  dialog.player[open] { animation: none; }
}