/* ============================================================
   richolson-home — hand-written scoped overrides
   ------------------------------------------------------------
   Atomic prepends the compiled Tailwind v4 bundle ABOVE this block
   at deploy time. Only hand-authored, scoped rules belong here.

   - Palette tokens are CSS custom properties that flip under a
     .dark ancestor (class-based dark mode — same convention as the
     rest of the platform's sites). Reference them from section.ejs
     via Tailwind arbitrary values: bg-[var(--bg)], text-[var(--text)],
     border-[var(--line)], etc.
   - --font-sans / --font-mono are overridden on the section root, so
     the stock Tailwind `font-mono` utility renders IBM Plex Mono
     within this section without any theme config.
   - Everything is scoped under .custom-section-richolson-home so it
     cannot leak into other Atomic pages or sections.
   ============================================================ */
@font-face {
  font-family: "Space Grotesk";
  src: url("assets/space-grotesk-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("assets/ibm-plex-mono-regular-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("assets/ibm-plex-mono-semibold-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

.custom-section-richolson-home.ro-home-site {
  --bg: oklch(0.985 0.008 160);
  --surface: oklch(0.965 0.012 175);
  --surface-2: oklch(0.93 0.016 180);
  --text: oklch(0.24 0.022 165);
  --muted: oklch(0.47 0.024 200);
  --line: oklch(0.88 0.015 175);
  --accent: oklch(0.55 0.14 158);
  --accent2: oklch(0.55 0.13 245);
  --on-accent: oklch(0.99 0.01 160);
  --code-bg: oklch(0.95 0.012 178);
  --accent-ghost: oklch(0.55 0.14 158 / 0.45);
  --fit-good: var(--accent);
  --fit-good-chip-text: var(--on-accent);
  --fit-bad: oklch(0.48 0.12 48);
  --fit-bad-chip-text: oklch(0.985 0.018 72);

  --font-sans: "Space Grotesk", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  position: relative;
  display: block;
  min-height: 100vh;
  background: transparent;
  color: var(--text);
  font-family: var(--font-sans);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  transition: background .4s ease, color .4s ease;
}

.dark .custom-section-richolson-home.ro-home-site {
  --bg: oklch(0.16 0.012 160);
  --surface: oklch(0.205 0.016 162);
  --surface-2: oklch(0.245 0.02 162);
  --text: oklch(0.945 0.015 150);
  --muted: oklch(0.72 0.02 150);
  --line: oklch(0.31 0.02 160);
  --accent: oklch(0.82 0.16 150);
  --accent2: oklch(0.87 0.15 96);
  --on-accent: oklch(0.17 0.02 160);
  --code-bg: oklch(0.125 0.012 160);
  --accent-ghost: oklch(0.82 0.16 150 / 0.5);
  --fit-good: var(--accent);
  --fit-good-chip-text: var(--on-accent);
  --fit-bad: oklch(0.68 0.12 54);
  --fit-bad-chip-text: oklch(0.17 0.02 60);
}

.custom-section-richolson-home.ro-home-site ::selection { background: var(--accent); color: var(--on-accent); }
.custom-section-richolson-home.ro-home-site ::-moz-selection { background: var(--accent); color: var(--on-accent); }

.custom-section-richolson-home.ro-home-site .ro-shell-menu summary {
  list-style: none;
}

.custom-section-richolson-home.ro-home-site .ro-shell-menu summary::-webkit-details-marker {
  display: none;
}

.custom-section-richolson-home.ro-home-site .ro-shell-menu[open] summary {
  border-color: var(--accent);
}

.custom-section-richolson-home.ro-home-site .ro-vara-shot-frame {
  background: color-mix(in oklab, var(--code-bg) 88%, var(--surface));
  box-shadow: inset 0 0 26px color-mix(in oklab, var(--text) 14%, transparent), 0 24px 58px -42px rgb(0 0 0 / 0.8);
}

.custom-section-richolson-home.ro-home-site .ro-vara-shot {
  display: block;
  background: oklch(0.12 0.025 245);
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--line) 70%, transparent), 0 0 24px color-mix(in oklab, var(--text) 18%, transparent);
}

.custom-section-richolson-home.ro-home-site .ro-fit-card {
  border-color: color-mix(in oklab, var(--fit-card-accent) 42%, var(--line));
  background: color-mix(in oklab, var(--fit-card-accent) 6%, transparent);
}

.custom-section-richolson-home.ro-home-site .ro-fit-card-good {
  --fit-card-accent: var(--fit-good);
  --fit-card-label-text: var(--fit-good-chip-text);
}

.custom-section-richolson-home.ro-home-site .ro-fit-card-bad {
  --fit-card-accent: var(--fit-bad);
  --fit-card-label-text: var(--fit-bad-chip-text);
}

.custom-section-richolson-home.ro-home-site .ro-fit-label {
  background: var(--fit-card-accent);
  color: var(--fit-card-label-text);
}

.custom-section-richolson-home.ro-home-site .ro-fit-glyph {
  color: var(--fit-card-accent, var(--accent));
}

.custom-section-richolson-home.ro-home-site .ro-about-pullquote {
  max-width: min(100%, 19.5rem);
  margin: 1.35rem 0 1.55rem;
  padding-left: 1.15rem;
  border-left: 2px solid var(--accent);
  color: var(--text);
  font-size: 1.12rem;
  font-style: italic;
  font-weight: 700;
  line-height: 1.38;
  letter-spacing: 0;
}

/* Pressable controls: visible feedback for mouse, touch, and keyboard activation. */
.custom-section-richolson-home.ro-home-site button:not(:disabled),
.custom-section-richolson-home.ro-home-site a[href][class*="rounded"] {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transform-origin: center;
  transition-property: transform, box-shadow, filter, border-color, background-color, color;
  transition-duration: .14s;
  transition-timing-function: ease;
}

.custom-section-richolson-home.ro-home-site button:not(:disabled):active,
.custom-section-richolson-home.ro-home-site a[href][class*="rounded"]:active {
  transform: translateY(2px) scale(0.975);
  box-shadow: inset 0 2px 9px color-mix(in oklab, var(--text) 18%, transparent), 0 0 0 1px color-mix(in oklab, var(--accent) 42%, transparent);
  filter: brightness(0.94) saturate(1.08);
}

.custom-section-richolson-home.ro-home-site button:disabled {
  cursor: not-allowed;
}

@keyframes ro-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes ro-floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes ro-pulse-ring {
  0%, 100% { transform: scale(1); opacity: 0; }
  20% { opacity: 0.72; }
  70% { transform: scale(3); opacity: 0; }
}
.custom-section-richolson-home.ro-home-site .ro-blink  { animation: ro-blink 1.1s step-end infinite; }
.custom-section-richolson-home.ro-home-site .ro-floaty { animation: ro-floaty 7s ease-in-out infinite; }
.custom-section-richolson-home.ro-home-site .ro-pulse { position: relative; }
.custom-section-richolson-home.ro-home-site .ro-pulse::after {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--accent-ghost);
  content: "";
  pointer-events: none;
  transform: scale(1);
  transform-origin: center;
  will-change: transform, opacity;
  animation: ro-pulse-ring 2.4s ease-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .custom-section-richolson-home.ro-home-site .ro-floaty,
  .custom-section-richolson-home.ro-home-site .ro-pulse::after { animation: none; }

  .custom-section-richolson-home.ro-home-site button:not(:disabled),
  .custom-section-richolson-home.ro-home-site a[href][class*="rounded"] {
    transition-duration: .01ms;
  }
}

/* Atomic form status line (their submission bridge sets data-status) */
.custom-section-richolson-home.ro-home-site [data-atomic-form-status][data-status="success"] { color: oklch(0.72 0.16 150); }
.custom-section-richolson-home.ro-home-site [data-atomic-form-status][data-status="error"]   { color: oklch(0.66 0.18 25); }