/* ================= Ghost Hat releases =================
   Loaded after /blog/styles.css on /toolbox/ pages, so it builds on the homepage tokens
   and chrome. Every rule is scoped under an .rl- class so the shared element rules
   (section padding, link colour) never fight it. Text sizes stay at 14px and up. */

.rl-wrap { max-width: 1040px; margin: 0 auto; padding: 0 32px; position: relative; z-index: 2; }
.rl-narrow > * { max-width: 760px; }

.rl-hero { padding: 120px 0 96px; }
.rl-band { padding: 88px 0; border-top: 1px solid var(--hairline-strong); }

.rl-back { display: inline-flex; gap: 8px; font-family: var(--mono); font-size: 14px; color: var(--brass); margin-bottom: 40px; }
.rl-back:hover { text-decoration: underline; text-underline-offset: 4px; }
.rl-meta { font-family: var(--mono); font-size: 14px; color: var(--spectral); margin: 0 0 20px; }

.rl-h1 {
  font-family: var(--sans); font-optical-sizing: auto; font-weight: 600;
  font-size: clamp(40px, 6.2vw, 76px); line-height: 1.02; letter-spacing: -0.025em;
  color: var(--white); margin: 0 0 28px; max-width: 15ch;
}
.rl-sub { font-family: var(--sans); font-weight: 300; font-size: clamp(18px, 2vw, 22px); line-height: 1.5; color: var(--platinum); max-width: 58ch; margin: 0 0 36px; }

.rl-actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.rl-btn {
  display: inline-block; font-family: var(--mono); font-size: 14px; font-weight: 600; letter-spacing: .02em;
  padding: 14px 22px; border-radius: 6px; text-decoration: none; border: 1px solid transparent;
}
.rl-btn.primary { background: var(--brass); color: var(--bg); }
.rl-btn.primary:hover { background: var(--white); }
.rl-btn.secondary { color: var(--platinum); border-color: var(--hairline-strong); }
.rl-btn.secondary:hover { border-color: var(--platinum); }
.rl-btn:focus-visible, .rl-back:focus-visible, .rl-link:focus-visible, .rl-copy:focus-visible,
.rl-item:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; }

.rl-writeup { margin: 22px 0 0; font-family: var(--sans); font-size: 17px; color: var(--platinum-dim); }
.rl-writeup a, .rl-link, .rl-panel a, .rl-note a { color: var(--brass); text-decoration: underline; text-underline-offset: 4px; }

/* ---------- section type ---------- */
.rl-h2 {
  font-family: var(--sans); font-optical-sizing: auto;
  font-size: clamp(32px, 4vw, 52px); line-height: 1.08; letter-spacing: -0.02em;
  color: var(--white); margin: 0 0 24px; max-width: 22ch;
}
.rl-band p { font-size: 19px; line-height: 1.6; color: var(--platinum); max-width: 60ch; }
.rl-band code { font-family: var(--mono); font-size: .88em; color: var(--spectral); }

/* ---------- releases index ---------- */
.rl-index-title { font-family: var(--sans); font-optical-sizing: auto; font-weight: 600; font-size: clamp(44px, 7vw, 88px); line-height: 1; letter-spacing: -0.03em; color: var(--white); margin: 0 0 24px; }
.rl-items { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--hairline-strong); }
.rl-item {
  display: grid; grid-template-columns: 180px 1fr auto; gap: 32px; align-items: baseline;
  padding: 34px 0; border-bottom: 1px solid var(--hairline-strong); text-decoration: none;
}
.rl-item .k { font-family: var(--mono); font-size: 14px; color: var(--spectral); }
.rl-item .k span { display: block; color: var(--platinum-dim); margin-top: 4px; }
.rl-item .n { display: block; font-family: var(--sans); font-weight: 600; font-size: clamp(28px, 3.4vw, 40px); line-height: 1.1; color: var(--white); letter-spacing: -0.015em; }
.rl-item .d { display: block; margin-top: 10px; font-size: 18px; line-height: 1.5; color: var(--platinum); max-width: 58ch; }
.rl-item .go { font-family: var(--mono); font-size: 14px; color: var(--brass); white-space: nowrap; }
a.rl-item:hover .n { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
.rl-upcoming { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; }
.rl-upcoming li { border-top: 1px solid var(--hairline-strong); padding-top: 18px; }
.rl-upcoming .k { font-family: var(--mono); font-size: 14px; color: var(--spectral); }
.rl-upcoming h3 { font-family: var(--sans); font-weight: 600; font-size: 22px; color: var(--white); margin: 8px 0 8px; }
.rl-band .rl-upcoming p { font-size: 17px; color: var(--platinum-dim); margin: 0; }

.rl-notify { margin-top: 56px; padding: 32px; border: 1px solid var(--hairline-strong); border-radius: 10px; background: var(--gunmetal); max-width: 640px; }
.rl-notify h3 { font-family: var(--sans); font-size: 22px; line-height: 1.25; color: var(--white); margin: 0 0 8px; font-variation-settings: "opsz" 22, "wght" 600; }
.rl-band .rl-notify p { font-size: 17px; margin: 0 0 20px; }
.rl-band .rl-notify .bl-form-done { font-size: 14px; margin: 12px 0 0; }
.rl-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

@media (max-width: 900px) {
  .rl-wrap { padding: 0 20px; }
  .rl-notify { padding: 24px 20px; }
  .rl-hero { padding: 88px 0 64px; }
  .rl-band { padding: 64px 0; }
  .rl-cmd pre { padding: 18px 18px 18px 18px; padding-top: 56px; }
  .rl-item { grid-template-columns: 1fr; gap: 10px; }
  .rl-upcoming { grid-template-columns: 1fr; }
}

/* The shared stylesheet pins font-variation-settings on body text, which overrides
   font-weight. Set opsz to the rendered size and the weight explicitly. */
.rl-h1 { font-variation-settings: "opsz" 72, "wght" 520; }
.rl-index-title { font-variation-settings: "opsz" 88, "wght" 560; }
.rl-h2 { font-variation-settings: "opsz" 52, "wght" 460; }
.rl-upcoming h3 { font-variation-settings: "opsz" 21, "wght" 600; }
.rl-item .n { font-variation-settings: "opsz" 40, "wght" 600; }
.rl-sub, .rl-lede, .rl-band p { font-variation-settings: "opsz" 18, "wght" 330; }
.rl-band p code, .rl-note code { overflow-wrap: anywhere; }

/* ================= release page =================
   Typographic page. The only art is the hero: light through blinds, a slow shimmer along
   the slats, dust in the beam and the ghost hat drifting in the dark. All of it is CSS and
   the site's own mark, and it follows the theme. Text never sits on a moving layer. */
.rl-lamp-hero {
  --rl-beam: rgba(212, 197, 164, 0.055); --rl-shine: rgba(246, 247, 249, 0.16); --rl-mote: #d4c5a4;
  position: relative; overflow: hidden; isolation: isolate;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .rl-lamp-hero { --rl-beam: rgba(13, 15, 18, 0.05); --rl-shine: rgba(92, 66, 32, 0.12); --rl-mote: #8a7355; }
}
:root[data-theme="light"] .rl-lamp-hero { --rl-beam: rgba(13, 15, 18, 0.05); --rl-shine: rgba(92, 66, 32, 0.12); --rl-mote: #8a7355; }

.rl-ambient { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.rl-blinds {
  position: absolute; top: -30%; right: -12%; width: 78%; height: 160%;
  transform: rotate(-16deg);
  -webkit-mask-image: radial-gradient(ellipse 60% 55% at 62% 42%, #000 0%, transparent 72%);
          mask-image: radial-gradient(ellipse 60% 55% at 62% 42%, #000 0%, transparent 72%);
}
.rl-blinds::before, .rl-blinds::after { content: ""; position: absolute; inset: 0; }
.rl-blinds::before { background: repeating-linear-gradient(180deg, var(--rl-beam) 0 30px, transparent 30px 56px); }
/* the shimmer: a band of light that travels along the slats only */
.rl-blinds::after {
  background: linear-gradient(100deg, transparent 42%, var(--rl-shine) 50%, transparent 58%) 0 0 / 300% 100% no-repeat;
  background-position: 120% 0;
  -webkit-mask-image: repeating-linear-gradient(180deg, #000 0 30px, transparent 30px 56px);
          mask-image: repeating-linear-gradient(180deg, #000 0 30px, transparent 30px 56px);
}
/* The hat sits in the headline's block so the top of its drawing lines up with the
   headline's cap line: the caps start 0.2em into the h1, and the mark's drawing starts
   8% of its width into the SVG box. */
.rl-hero-copy > .rl-title { max-width: none; position: relative; font-size: clamp(42px, 6vw, 80px); }
.rl-title .rl-h1 { font-size: 1em; position: relative; z-index: 1; }
.rl-hat {
  --hat-w: min(38vw, 440px);
  position: absolute; right: 0; top: calc(0.2em - var(--hat-w) * 0.08); width: var(--hat-w); aspect-ratio: 540 / 470; z-index: 0;
}
.rl-hat > div { position: absolute; inset: 0; }
.rl-hat svg { width: 100%; height: 100%; }
.rl-hat-base { opacity: .2; filter: drop-shadow(0 0 28px rgba(184, 199, 214, .35)) drop-shadow(0 0 60px rgba(184, 199, 214, .18)); }
.rl-motes i {
  position: absolute; width: 3px; height: 3px; border-radius: 50%; background: var(--rl-mote); opacity: .5;
}
.rl-motes i:nth-child(1)  { left: 58%; top: 22%; }
.rl-motes i:nth-child(2)  { left: 66%; top: 38%; width: 2px; height: 2px; }
.rl-motes i:nth-child(3)  { left: 74%; top: 18%; }
.rl-motes i:nth-child(4)  { left: 81%; top: 46%; width: 4px; height: 4px; opacity: .35; }
.rl-motes i:nth-child(5)  { left: 62%; top: 60%; width: 2px; height: 2px; }
.rl-motes i:nth-child(6)  { left: 88%; top: 28%; }
.rl-motes i:nth-child(7)  { left: 70%; top: 70%; width: 2px; height: 2px; }
.rl-motes i:nth-child(8)  { left: 92%; top: 58%; }
.rl-motes i:nth-child(9)  { left: 54%; top: 44%; width: 2px; height: 2px; opacity: .35; }
.rl-motes i:nth-child(10) { left: 78%; top: 82%; }

@media (prefers-reduced-motion: no-preference) {
  .rl-blinds::before { animation: rl-slats 26s ease-in-out infinite alternate; }
  .rl-blinds::after { animation: rl-shimmer 9s ease-in-out infinite; }
  .rl-hat { animation: rl-drift 14s ease-in-out infinite; }
  .rl-hat-base { animation: rl-ghost 9s ease-in-out infinite; }
  .rl-motes i { animation: rl-mote 18s ease-in-out infinite; }
  .rl-motes i:nth-child(3n)   { animation-duration: 23s; animation-delay: -6s; }
  .rl-motes i:nth-child(3n+1) { animation-duration: 29s; animation-delay: -13s; }
}
@keyframes rl-slats { from { transform: translateY(0); } to { transform: translateY(18px); } }
@keyframes rl-shimmer { 0%, 30% { background-position: 120% 0; } 75%, 100% { background-position: -20% 0; } }
/* sideways only, so the top edge stays on the headline line */
@keyframes rl-drift { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-14px); } }
@keyframes rl-ghost { 0%, 30%, 100% { opacity: .2; } 55% { opacity: .3; } }
@keyframes rl-mote {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(14px, -26px); }
  100% { transform: translate(-6px, -52px); opacity: 0; }
}

section.rl-lamp-hero, section.rl-lamp-hero:first-of-type { padding: 120px 0 104px; }
.rl-hero-copy > * { max-width: 640px; }
.rl-lamp-hero .rl-h1 { max-width: 13ch; }
.rl-lamp-hero .rl-sub { color: var(--brass); font-variation-settings: "opsz" 22, "wght" 400; margin-bottom: 32px; }
.rl-intro p { font-size: 19px; line-height: 1.6; color: var(--platinum); margin: 0 0 18px; font-variation-settings: "opsz" 18, "wght" 330; }
.rl-cmd-label { font-family: var(--mono); font-size: 14px; color: var(--spectral); margin: 36px 0 10px; }
.rl-lamp-hero .rl-cmd { margin: 0 0 24px; }
.rl-lamp-hero .rl-meta { margin: 32px 0 0; }

/* ---------- problem and changes ---------- */
.rl-lede { font-size: 19px; line-height: 1.6; color: var(--platinum); max-width: 60ch; margin: 0 0 40px; }
.rl-points { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px; }
.rl-points-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 48px; }
.rl-points li { border-top: 1px solid var(--brass); padding-top: 20px; }
.rl-points h3, .rl-ways h3 { font-family: var(--sans); font-size: 22px; line-height: 1.25; color: var(--white); margin: 0 0 10px; font-variation-settings: "opsz" 22, "wght" 600; }
.rl-band .rl-points p { font-size: 17px; line-height: 1.55; margin: 0; }
.rl-band .rl-pull {
  margin: 56px 0 0; padding-left: 24px; border-left: 2px solid var(--brass);
  font-family: var(--sans); font-size: clamp(22px, 2.4vw, 28px); line-height: 1.35;
  color: var(--white); max-width: 36ch; font-variation-settings: "opsz" 28, "wght" 380;
}
.rl-changes { background: var(--gunmetal); }

/* ---------- install ---------- */
.rl-ways { display: grid; grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr); gap: 48px; margin: 8px 0 32px; }
.rl-ways .rl-cmd { margin: 0; }
.rl-steps { margin: 0; padding-left: 22px; font-size: 18px; line-height: 1.8; color: var(--platinum); }
.rl-steps a { color: var(--brass); text-decoration: underline; text-underline-offset: 4px; }

.rl-cmd { position: relative; background: var(--gunmetal-2); border: 1px solid var(--hairline-strong); border-radius: 10px; margin: 28px 0; }
.rl-cmd pre { margin: 0; padding: 22px 104px 22px 22px; overflow-x: auto; }
.rl-cmd code { font-family: var(--mono); font-size: 16px; line-height: 1.8; color: var(--white); }
.rl-copy {
  position: absolute; top: 14px; right: 14px; font-family: var(--mono); font-size: 14px; color: var(--brass);
  background: var(--gunmetal); border: 1px solid var(--hairline-strong); border-radius: 6px; padding: 7px 12px; cursor: pointer;
}
.rl-copy:hover { border-color: var(--brass); }
.rl-band .rl-note { font-size: 16px; color: var(--platinum-dim); }
.rl-close { background: var(--gunmetal); }
.rl-close .rl-actions, .rl-band .rl-note { margin-top: 28px; }

@media (max-width: 900px) {
  section.rl-lamp-hero, section.rl-lamp-hero:first-of-type { padding: 72px 0 64px; }
  .rl-blinds { width: 120%; right: -40%; }
  .rl-hat { --hat-w: 58vw; right: -6%; }
  .rl-points, .rl-points-4, .rl-ways { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .rl-cmd pre { padding: 56px 18px 20px; }
  .rl-cmd code { font-size: 14px; }
}