/* ============================================================
   Reality Breaker — Base element styling
   Applied globally so cards/kits inherit the brand defaults.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--surface-base);
  color: var(--text-body);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  color: var(--text-strong);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  margin: 0 0 var(--space-4);
  font-variation-settings: var(--font-display-opsz);
  text-wrap: balance;
}

h1 { font-size: var(--text-display-xl); }
h2 { font-size: var(--text-display-lg); }
h3 { font-size: var(--text-display-md); }
h4 { font-size: var(--text-display-sm); }

p { margin: 0 0 var(--space-4); text-wrap: pretty; }

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); }

/* Eyebrow / overline label */
.rb-overline {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-overline);
  text-transform: uppercase;
  color: var(--accent);
}

/* Lead paragraph */
.rb-lead {
  font-size: var(--text-xl);
  line-height: var(--leading-normal);
  color: var(--text-strong);
}

::selection { background: var(--accent-wash); color: var(--text-strong); }

:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
}


/* ============================================================
   Chamfered surfaces — corners cut at an angle via clip-path.
   The border-radius tokens above/elsewhere are retained but
   unused on these elements. Borders are clipped with the shape
   (hairline-border compromise); glitch-hover channel split moves
   inset so the clip cannot swallow it.
   ============================================================ */
[data-chamfer] {
  clip-path: polygon(12px 0, calc(100% - 12px) 0, 100% 12px, 100% calc(100% - 12px), calc(100% - 12px) 100%, 12px 100%, 0 calc(100% - 12px), 0 12px);
  border-radius: 0 !important;
}
[data-chamfer][data-gw-glitch]:hover,
[data-chamfer][data-gw-glitch]:focus-visible {
  box-shadow: inset 2px 0 0 rgba(240,106,139,0.55), inset -2px 0 0 rgba(63,191,176,0.5) !important;
}
@media (prefers-reduced-motion: reduce) {
  [data-chamfer][data-gw-glitch]:hover,
  [data-chamfer][data-gw-glitch]:focus-visible { transform: none !important; box-shadow: inset 0 0 0 1px rgba(240,106,139,0.4) !important; }
}
body.rb-calm [data-chamfer][data-gw-glitch]:hover,
body.rb-calm [data-chamfer][data-gw-glitch]:focus-visible { transform: none !important; box-shadow: inset 0 0 0 1px rgba(240,106,139,0.4) !important; }


/* ============================================================
   Fret-marker dividers — section rules carry fretboard inlay
   dots: singles along the line, a double at the twelfth.
   Applied via [data-fret]; the original 1px border keeps its
   slot (transparent) so spacing is unchanged.
   ============================================================ */
[data-fret] { position: relative; border-top-color: transparent !important; }
[data-fret]::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: -3px;
  height: 7px;
  pointer-events: none;
  background-image:
    linear-gradient(var(--border-subtle), var(--border-subtle)),
    radial-gradient(circle, rgba(245,236,220,0.30) 0 1.3px, transparent 1.4px),
    radial-gradient(circle, rgba(245,236,220,0.30) 0 1.3px, transparent 1.4px),
    radial-gradient(circle, rgba(245,236,220,0.30) 0 1.3px, transparent 1.4px),
    radial-gradient(circle, rgba(245,236,220,0.44) 0 1.3px, transparent 1.4px),
    radial-gradient(circle, rgba(245,236,220,0.44) 0 1.3px, transparent 1.4px),
    radial-gradient(circle, rgba(245,236,220,0.30) 0 1.3px, transparent 1.4px),
    radial-gradient(circle, rgba(245,236,220,0.30) 0 1.3px, transparent 1.4px),
    radial-gradient(circle, rgba(245,236,220,0.30) 0 1.3px, transparent 1.4px);
  background-repeat: no-repeat;
  background-size: 100% 1px, 7px 7px, 7px 7px, 7px 7px, 7px 7px, 7px 7px, 7px 7px, 7px 7px, 7px 7px;
  background-position: 0 3px, 12% 50%, 28.6% 50%, 43.4% 50%, calc(56.6% - 5px) 50%, calc(56.6% + 5px) 50%, 68.3% 50%, 78.7% 50%, 88% 50%;
}


/* ============================================================
   Nav fretboard — the nav hairline carries inlay dots under
   each link; the active page sits on the twelfth-fret double.
   ============================================================ */
.gw-desktop-nav { position: relative; }
.gw-desktop-nav::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 1px;
  pointer-events: none;
  background: rgba(245,236,220,0.14);
  transition: background-color .2s ease;
}
.gw-desktop-nav a { position: relative; }
.gw-desktop-nav a::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -15px;
  width: 9px;
  height: 9px;
  transform: translateX(-50%);
  pointer-events: none;
  background: radial-gradient(circle, rgba(245,236,220,0.55) 0 2.1px, transparent 2.2px) center / 9px 9px no-repeat;
}
.gw-desktop-nav a[data-fret-active]::after {
  width: 21px;
  background:
    radial-gradient(circle, #F06A8B 0 2.6px, transparent 2.7px) left center / 9px 9px no-repeat,
    radial-gradient(circle, #F06A8B 0 2.6px, transparent 2.7px) right center / 9px 9px no-repeat;
}

/* ============================================================
   Nav condense on scroll — body.gw-nav-scrolled is toggled by
   sky.js via an IntersectionObserver sentinel (no scroll
   listener, no per-frame work). The height lost to tighter
   padding is returned as margin so content below the sticky
   nav never shifts.
   ============================================================ */
header:has(.gw-desktop-nav) {
  transition: padding .22s ease, margin .22s ease, background-color .22s ease, border-color .22s ease;
}
body.gw-nav-scrolled header:has(.gw-desktop-nav) {
  padding-top: 8px !important;
  padding-bottom: 8px !important;
  margin-bottom: 12px !important;
  background: rgba(20,16,42,0.85) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
  border-bottom-color: rgba(245,236,220,0.16) !important;
}
body.gw-nav-scrolled .gw-desktop-nav::after { background: rgba(245,236,220,0.20); }
@media (prefers-reduced-motion: reduce) {
  header:has(.gw-desktop-nav),
  .gw-desktop-nav::after { transition: none !important; }
}
body.rb-calm header:has(.gw-desktop-nav),
body.rb-calm .gw-desktop-nav::after { transition: none !important; }

/* ============================================================
   Focus — chromatic split, same channels as the card glitch.
   ============================================================ */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
  box-shadow:
    -3px 0 0 1px rgba(240,106,139,0.9),
    3px 0 0 1px rgba(63,191,176,0.85),
    0 0 0 1px rgba(245,236,220,0.9) !important;
}
@media (prefers-reduced-motion: reduce) {
  :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    box-shadow: none !important;
    outline: 2px solid #F5ECDC;
    outline-offset: 2px;
  }
}
body.rb-calm :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  box-shadow: none !important;
  outline: 2px solid #F5ECDC;
  outline-offset: 2px;
}

/* ============================================================
   Scrollbar — twilight track, coral thumb, chamfered where
   the browser allows; others keep their default.
   ============================================================ */
html { scrollbar-color: #F06A8B #1C1838; }
::-webkit-scrollbar { width: 13px; height: 13px; }
::-webkit-scrollbar-track { background: #1C1838; }
::-webkit-scrollbar-corner { background: #1C1838; }
::-webkit-scrollbar-thumb {
  border-radius: 0;
  border: 2px solid #1C1838;
  background:
    linear-gradient(135deg, #1C1838 3px, transparent 3px) left top / 7px 7px no-repeat,
    linear-gradient(-135deg, #1C1838 3px, transparent 3px) right top / 7px 7px no-repeat,
    linear-gradient(45deg, #1C1838 3px, transparent 3px) left bottom / 7px 7px no-repeat,
    linear-gradient(-45deg, #1C1838 3px, transparent 3px) right bottom / 7px 7px no-repeat,
    #F06A8B;
}

/* ============================================================
   Site logo — the headstock mark. Cream by default; the
   iridescent color version cross-fades in on hover/focus.
   Its 253KB SVG never touches first paint: sky.js hydrates
   <img class="gw-logo-color" data-src> after the load event,
   or on first hover intent, whichever comes first.
   ============================================================ */
.gw-logo .gw-logo-color { opacity: 0; transition: opacity .18s ease; }
.gw-logo:hover .gw-logo-color,
a:hover .gw-logo .gw-logo-color,
a:focus-visible .gw-logo .gw-logo-color,
button:hover .gw-logo .gw-logo-color,
button:focus-visible .gw-logo .gw-logo-color { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .gw-logo .gw-logo-color { transition: none; }
}
body.rb-calm .gw-logo .gw-logo-color { transition: none; }