/* Blue Roo Records · sapphire blue · no external fonts or JavaScript */
:root {
  --sapphire: #0f52ba;
  --ink: #152136;
  --muted: #586376;
  --paper: #f5f4ef;
  --line: #d6d9df;
}

* { box-sizing: border-box; }
html { color-scheme: light; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: Arial, Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--sapphire); color: #fff; }
button, input, summary { font: inherit; }
.page { max-width: 1600px; margin: 0 auto; padding: 0 6%; }
.site-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 142px;
  border-bottom: 1px solid var(--line);
}
.brand { width: 126px; height: auto; mix-blend-mode: multiply; }
.status {
  display: flex;
  gap: 10px;
  align-items: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.status > span { width: 7px; height: 7px; border-radius: 50%; background: var(--sapphire); }
.hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5%;
  align-items: center;
  padding: 66px 0 72px;
}
.eyebrow { margin: 0 0 22px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .19em; }
.eyebrow > span { color: var(--sapphire); margin-right: 14px; }
h1 { position: relative; display: inline-block; margin: 0; font-size: clamp(60px, 7.65vw, 110px); line-height: .97; letter-spacing: -.075em; font-weight: 800; }
h1 em { font-family: Georgia, 'Times New Roman', serif; font-weight: 400; color: var(--sapphire); letter-spacing: -.075em; }
.title-star { display: inline-block; vertical-align: top; margin: 7px 0 0 10px; color: var(--sapphire); font-size: .36em; line-height: 1; letter-spacing: 0; }
.intro { max-width: 360px; margin: 26px 0 22px; color: var(--muted); font-size: 16px; line-height: 1.75; }
.soundcheck { max-width: 380px; }
.soundcheck summary {
  display: inline-flex;
  align-items: center;
  gap: 23px;
  list-style: none;
  cursor: pointer;
  padding: 16px 20px;
  border: 1px solid var(--sapphire);
  border-radius: 3px;
  color: var(--sapphire);
  font-size: 13px;
  font-weight: 700;
  transition: background-color .18s, color .18s;
}
.soundcheck summary::-webkit-details-marker { display: none; }
.soundcheck summary:hover, .soundcheck[open] summary { background: var(--sapphire); color: #fff; }
.soundcheck summary:focus-visible, .motion-checkbox:focus-visible ~ .record-caption .motion-label { outline: 3px solid var(--sapphire); outline-offset: 5px; }
.plus { position: relative; width: 12px; height: 12px; flex-shrink: 0; }
.plus::before, .plus::after { content: ''; position: absolute; background: currentColor; }
.plus::before { width: 12px; height: 2px; top: 5px; left: 0; }
.plus::after { height: 12px; width: 2px; left: 5px; top: 0; }
.soundcheck[open] .plus::after { display: none; }
.soundcheck > p { margin: 14px 0 0; color: var(--muted); font-size: 14px; line-height: 1.7; }
.patience { font-size: 11px; margin: 14px 0 0; color: var(--muted); }

/* The sleeve and grooves are CSS shapes; the supplied logo stays intact. */
.record-stage { min-width: 0; padding-top: 12px; }
.record-visual { position: relative; width: 100%; aspect-ratio: 1 / 1.05; }
.sleeve {
  position: absolute;
  width: 79%;
  height: 79%;
  top: 8%;
  left: 0;
  transform: rotate(-9deg);
  padding: 7%;
  overflow: hidden;
  background: var(--sapphire);
  color: #fff;
  box-shadow: 0 15px 30px #1521360d;
}
.sleeve::after { content: ''; position: absolute; width: 90%; height: 90%; border: 1px solid #ffffff38; border-radius: 50%; left: -44%; top: 16%; }
.sleeve-top { position: absolute; top: 6%; left: 7%; font-size: clamp(7px, .7vw, 11px); font-weight: 700; letter-spacing: .19em; }
.sleeve-bottom { position: absolute; bottom: 12%; left: 7%; font-size: clamp(12px, 1.5vw, 22px); line-height: 1.1; letter-spacing: -.04em; font-weight: 700; }
.sleeve-code { position: absolute; bottom: 5%; left: 7%; font-size: 8px; letter-spacing: .13em; }
.vinyl {
  position: absolute;
  width: 85%;
  aspect-ratio: 1;
  top: 4%;
  right: -1%;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 3px solid #141b23;
  background:
    conic-gradient(from 30deg, transparent 0deg, #dae1ef20 42deg, transparent 74deg, transparent 178deg, #dae1ef18 220deg, transparent 255deg),
    repeating-radial-gradient(circle, #171e28 0 2px, #26303f 2.5px 3px, #111923 3.5px 5px);
  box-shadow: 12px 24px 40px #15213629, inset 0 0 0 8px #111923;
  animation: spin 30s linear infinite;
}
.record-label { position: relative; width: 40%; aspect-ratio: 1; display: grid; place-items: center; background: #fff; border-radius: 50%; box-shadow: 0 0 0 5px #0c1520; }
.record-label img { width: 81%; height: auto; }
.label-top, .label-bottom { position: absolute; left: 0; width: 100%; text-align: center; color: var(--sapphire); font-weight: 700; }
.label-top { top: 11%; font-size: clamp(4px, .45vw, 7px); letter-spacing: .08em; }
.label-bottom { bottom: 12%; font-size: clamp(3px, .33vw, 5px); }
.sticker { position: absolute; right: 0; bottom: 9%; width: 126px; height: 126px; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid var(--ink); background: #e5ef98; color: var(--ink); transform: rotate(11deg); font-size: 17px; line-height: 1.15; box-shadow: 3px 5px 0 #152136; }
.sticker strong { font-size: 18px; letter-spacing: -.04em; }
.sticker > span { margin-top: 10px; font-size: 10px; }
.record-caption { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 4px 0; color: var(--muted); font-size: 10px; }
.record-caption p { display: flex; align-items: center; gap: 10px; margin: 0; }
.caption-line { width: 26px; height: 1px; background: var(--sapphire); }
.motion-label { padding: 9px 0 9px 9px; cursor: pointer; color: var(--ink); }
.motion-label:hover { text-decoration: underline; text-underline-offset: 3px; }
.motion-label span span { margin-right: 5px; }
.when-paused { display: none; }
#pause-record:checked ~ .record-visual .vinyl { animation-play-state: paused; }
#pause-record:checked ~ .record-caption .when-running { display: none; }
#pause-record:checked ~ .record-caption .when-paused { display: inline; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
@keyframes spin { to { transform: rotate(360deg); } }

.groove-strip { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 24px 0; border-top: 1px solid var(--sapphire); border-bottom: 1px solid var(--sapphire); color: var(--sapphire); text-transform: uppercase; font-size: clamp(11px, 1.4vw, 20px); font-weight: 800; letter-spacing: -.025em; }
.strip-star { font-size: 28px; line-height: 1; }
.site-footer { display: flex; justify-content: space-between; gap: 24px; padding: 25px 0; font-size: 10px; line-height: 1.6; color: var(--muted); }
.site-footer p { margin: 0; }

@media (min-width: 1500px) { .hero { padding-top: 88px; padding-bottom: 88px; } }
@media (max-width: 800px) {
  .page { padding: 0 6%; }
  .site-header { min-height: 115px; }
  .brand { width: 108px; }
  .status { max-width: 155px; line-height: 1.5; font-size: 9px; }
  .status > span { flex-shrink: 0; }
  .hero { grid-template-columns: 1fr; padding: 45px 0 38px; gap: 35px; }
  h1 { font-size: clamp(64px, 12.5vw, 90px); }
  .intro { max-width: 390px; }
  .record-stage { width: min(100%, 460px); justify-self: center; }
  .sleeve-top { font-size: 9px; }
  .sleeve-bottom { font-size: 21px; }
  .label-top { font-size: 6px; }
  .label-bottom { font-size: 4px; }
  .groove-strip { gap: 12px; padding: 20px 0; font-size: 12px; }
  .strip-extra { display: none; }
  .site-footer { flex-direction: column; gap: 8px; padding: 22px 0; }
}
@media (max-width: 380px) {
  .status { max-width: 120px; letter-spacing: .05em; }
  h1 { font-size: 60px; }
  .intro { font-size: 15px; }
  .sticker { width: 102px; height: 102px; font-size: 14px; }
  .sticker strong { font-size: 15px; }
  .label-top { font-size: 4px; }
  .label-bottom { font-size: 3px; }
  .record-caption { font-size: 9px; gap: 4px; }
  .caption-line { width: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  .vinyl { animation: none; }
  .soundcheck summary { transition: none; }
  .motion-checkbox, .motion-label { display: none; }
}