/* ShoutPlay — shoutplay.app
   Colours come from the app (values/colors.xml) and the logo gradient. */

:root {
  --ink: #170b06;          /* burnt background of the Play feature graphic */
  --ink-raised: #22120a;
  --ember: #ff5722;        /* app primary */
  --amber: #f39a2c;        /* top of the logo triangle */
  --rust: #8a3b0e;         /* bottom of the logo triangle */
  --silver: #c9ccd1;       /* "PLAY" in the logo */
  --text: #f5ece6;
  --muted: #b9a79c;
  --line: rgba(245, 236, 230, 0.14);

  --deg: 14px;             /* dial: pixels per degree of longitude */
  --gutter: clamp(16px, 5vw, 64px);
  --measure: 34rem;

  --display: "Bricolage Grotesque", system-ui, sans-serif;
  --scale: "Barlow Condensed", "Arial Narrow", sans-serif;
  --scale-stretch: normal;

  /* Latin display type is set tight; other scripts override these below. */
  --track-display: -0.025em;
  --track-title: -0.03em;
  --track-scale: 0.02em;
  --lh-display: 0.98;
  --lh-title: 1.05;
  --h1-measure: 14ch;

  color-scheme: dark;
}

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

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

body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font-family: var(--display);
  font-size: 1.0625rem;
  line-height: 1.55;
  font-optical-sizing: auto;
  overflow-x: hidden;
}

a { color: inherit; }
a:hover { color: var(--amber); }

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

.nobr { white-space: nowrap; }

.wrap {
  max-width: 72rem;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ---------- Header ---------- */

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 1.25rem;
}

.brand { display: inline-flex; flex-shrink: 0; }
.brand img { display: block; width: auto; height: clamp(54px, 6.5vw, 76px); }

.lang { position: relative; font-size: 0.95rem; }
.lang summary {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.lang summary::-webkit-details-marker { display: none; }
.lang summary::after {
  content: "";
  width: 0.4rem;
  height: 0.4rem;
  border-inline-end: 2px solid currentColor;
  border-block-end: 2px solid currentColor;
  rotate: 45deg;
  translate: 0 -0.15rem;
  transition: rotate 0.15s;
}
.lang details[open] summary::after { rotate: 225deg; translate: 0 0.1rem; }
.lang summary:hover { border-color: var(--muted); }
.lang ul {
  position: absolute;
  inset-inline-end: 0;
  top: calc(100% + 0.5rem);
  z-index: 10;
  width: max-content;
  max-width: calc(100vw - 2 * var(--gutter));
  margin: 0;
  padding: 0.4rem;
  list-style: none;
  columns: 2;
  column-gap: 0.25rem;
  background: var(--ink-raised);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
}
.lang li { break-inside: avoid; }
.lang ul a {
  display: block;
  padding: 0.4rem 0.75rem;
  border-radius: 8px;
  text-decoration: none;
  color: var(--muted);
  white-space: nowrap;
}
.lang ul a:hover { color: var(--text); background: rgba(245, 236, 230, 0.06); }
.lang ul a[aria-current="page"] { color: var(--amber); }

/* ---------- Hero ---------- */

.hero {
  padding-top: clamp(2rem, 6vw, 5rem);
}

.hero-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 2.5rem 3.5rem;
}
.hero-copy { flex: 1 1 24rem; min-width: 0; }
/* the Play Store player screenshot, cut out of its frame */
.hero-shot {
  flex: 0 0 auto;
  display: block;
  width: clamp(200px, 22vw, 280px);
  height: auto;
  margin-inline: auto;
  filter: drop-shadow(0 28px 56px rgba(0, 0, 0, 0.6)) drop-shadow(0 0 48px rgba(255, 87, 34, 0.2));
}

.hero h1 {
  margin: 0;
  max-width: var(--h1-measure);
  font-size: clamp(2.6rem, 7.2vw, 5.6rem);
  line-height: var(--lh-display);
  font-weight: 800;
  letter-spacing: var(--track-display);
  text-wrap: balance;
}

.hero-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem 3rem;
  margin-top: 1.75rem;
}

.lead {
  margin: 0;
  max-width: var(--measure);
  font-size: clamp(1.1rem, 1.6vw, 1.25rem);
  color: var(--muted);
}
.lead strong { color: var(--text); font-weight: 600; }

.get-it {
  display: inline-block;
  line-height: 0;
  border-radius: 10px;
}
.get-it img { height: 64px; width: auto; }
.get-it:hover { filter: brightness(1.1); }

/* ---------- The dial ---------- */

.dial-block {
  position: relative;
  margin-top: clamp(2.5rem, 6vw, 4.5rem);
  /* ember glow behind the needle, as on the feature graphic */
  background:
    radial-gradient(ellipse min(38rem, 70%) 50% at 50% 50%, rgba(255, 87, 34, 0.26), transparent);
}

.dial-frame { position: relative; }

.dial {
  position: relative;
  z-index: 1;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  cursor: grab;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.dial::-webkit-scrollbar { display: none; }
.dial.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.dial.is-dragging button { pointer-events: none; }

.dial-track {
  position: relative;
  box-sizing: content-box;
  width: calc(360 * var(--deg));
  padding: 0 50vw;
  height: 15rem;
}
.stations { margin: 0; padding: 0; list-style: none; }

/* the printed scale: minor tick every 5°, major every 30° */
.dial-scale {
  position: absolute;
  left: 50vw;
  top: 50%;
  width: calc(360 * var(--deg) + 2px);
  height: 2.6rem;
  transform: translateY(-50%);
  border-block: 1px solid var(--line);
  background:
    repeating-linear-gradient(90deg, var(--silver) 0 2px, transparent 2px calc(30 * var(--deg))),
    repeating-linear-gradient(90deg, rgba(201, 204, 209, 0.4) 0 1px, transparent 1px calc(5 * var(--deg))) 0 50% / 100% 50% no-repeat;
}
.dial-scale span {
  position: absolute;
  top: 50%;
  left: calc((var(--lon) + 180) * var(--deg));
  transform: translate(6px, -50%);
  padding-inline: 3px;
  font-family: var(--scale);
  font-stretch: var(--scale-stretch);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: var(--track-scale);
  color: var(--muted);
  background: var(--ink);
  pointer-events: none;
}

.station {
  position: absolute;
  top: 0;
  left: calc(50vw + (var(--lon) + 180) * var(--deg));
  translate: -50% 0;
  scroll-snap-align: center;
}
.station:nth-child(even of .station) { top: auto; bottom: 0; }

.station button {
  all: unset;
  display: grid;
  justify-items: center;
  padding: 0.35rem 0.6rem;
  border-radius: 8px;
  cursor: pointer;
  text-align: center;
  white-space: nowrap;
  color: var(--muted);
  transition: color 0.2s, transform 0.2s;
}
.station button:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.station .city {
  font-family: var(--scale);
  font-stretch: var(--scale-stretch);
  font-weight: 600;
  font-size: 1.35rem;
  line-height: 1.2;
  letter-spacing: var(--track-scale);
}
.station .genre { font-size: 0.85rem; }

/* short leader line from the label to the scale */
.station::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 1px;
  height: 2.1rem;
  background: var(--line);
}
.station:nth-child(odd of .station)::after { top: 100%; }
.station:nth-child(even of .station)::after { bottom: 100%; }

.station.is-tuned button { color: var(--text); transform: scale(1.08); background: rgba(23, 11, 6, 0.9); }
.station.is-tuned .city { color: var(--amber); }
.station.is-tuned::after { background: var(--ember); }

/* the needle: the logo's play triangle pointing down onto a hairline */
.needle {
  position: absolute;
  top: -0.25rem;
  bottom: -0.25rem;
  left: 50%;
  width: 2px;
  margin-left: -1px;
  background: linear-gradient(var(--amber), var(--ember) 60%, var(--rust));
  box-shadow: 0 0 18px 2px rgba(255, 87, 34, 0.5);
  pointer-events: none;
}
.needle::before {
  content: "";
  position: absolute;
  top: -14px;
  left: 50%;
  translate: -50% 0;
  border-inline: 11px solid transparent;
  border-top: 16px solid var(--amber);
}

.readout {
  margin: 1.75rem 0 0;
  padding-inline: var(--gutter);
  text-align: center;
  font-size: 1.1rem;
  color: var(--muted);
}
.readout b { color: var(--text); font-weight: 600; }
.readout .hint { display: block; margin-top: 0.2rem; font-size: 0.85rem; opacity: 0.8; }

/* ---------- Content sections ---------- */

.section {
  padding-top: clamp(4rem, 9vw, 7rem);
}

.section-title {
  margin: 0 0 2.5rem;
  max-width: 20ch;
  font-size: clamp(1.9rem, 4vw, 3rem);
  line-height: var(--lh-title);
  font-weight: 800;
  letter-spacing: var(--track-title);
  text-wrap: balance;
}

.features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 2.5rem 3rem;
}

.feature h3 {
  margin: 0 0 1rem;
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--amber);
}
.feature ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.feature li {
  position: relative;
  padding-block: 0.7rem;
  padding-inline-start: 1.4rem;
  border-top: 1px solid var(--line);
}
/* a dial tick instead of a bullet */
.feature li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 1.25rem;
  width: 0.7rem;
  height: 2px;
  background: var(--ember);
}

.formats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.formats li {
  padding: 0.3rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-family: "Barlow Condensed", var(--scale);
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--silver);
}
.formats-note {
  margin: 1.25rem 0 0;
  max-width: var(--measure);
  color: var(--muted);
}

.small-print {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1.5rem 3rem;
  color: var(--muted);
}
.small-print p { margin: 0; max-width: var(--measure); }
.small-print b { color: var(--text); font-weight: 600; }

/* ---------- Closing call to action ---------- */

.closing {
  margin-top: clamp(5rem, 10vw, 8rem);
  padding-block: clamp(3.5rem, 8vw, 6rem);
  text-align: center;
  background:
    radial-gradient(ellipse 30rem 14rem at 50% 100%, rgba(255, 87, 34, 0.24), transparent 70%),
    var(--ink-raised);
  border-top: 1px solid var(--line);
}
.closing .mark { width: 128px; height: 128px; }
.closing h2 {
  margin: 1rem auto 0.75rem;
  max-width: 18ch;
  font-size: clamp(1.9rem, 4.2vw, 3rem);
  line-height: var(--lh-title);
  font-weight: 800;
  letter-spacing: var(--track-title);
  text-wrap: balance;
}
.closing p { margin: 0 auto 1.75rem; max-width: 30rem; color: var(--muted); }

/* ---------- Footer ---------- */

.site-footer {
  padding-bottom: 2.5rem;
  font-size: 0.95rem;
  color: var(--muted);
  background: var(--ink-raised);
}
.site-footer a { text-decoration: none; }
.site-footer a:hover { color: var(--amber); }

/* the page signs off on the dial: the same scale ticks as the hero, hanging from a hairline */
.footer-scale {
  height: 1.1rem;
  margin-bottom: 2.25rem;
  border-top: 1px solid var(--line);
  background:
    repeating-linear-gradient(90deg, rgba(201, 204, 209, 0.7) 0 2px, transparent 2px calc(30 * var(--deg))) 0 0 / 100% 100% no-repeat,
    repeating-linear-gradient(90deg, rgba(201, 204, 209, 0.32) 0 1px, transparent 1px calc(5 * var(--deg))) 0 0 / 100% 50% no-repeat;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent);
}

.footer-main {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem 2.5rem;
}
.footer-id {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  color: var(--text);
}
.footer-id img { display: block; width: 48px; height: 48px; }
.footer-name {
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: var(--track-title);
}
.footer-links { display: flex; flex-wrap: wrap; gap: 0.5rem 2rem; font-size: 1rem; }
.footer-links a { color: var(--text); }
.footer-links a[aria-current="page"] { color: var(--amber); }

.footer-legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.4rem 2rem;
  margin-top: 2rem;
  font-size: 0.85rem;
}
.footer-legal a { color: var(--silver); }

@media (max-width: 40rem) {
  .footer-main, .footer-legal { flex-direction: column; align-items: flex-start; }
}

/* ---------- Privacy policy ---------- */

.policy { padding-block: clamp(2rem, 6vw, 4rem) clamp(4rem, 9vw, 6rem); }
.policy > * { max-width: 44rem; }
.policy h1 {
  margin: 0;
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  line-height: var(--lh-display);
  font-weight: 800;
  letter-spacing: var(--track-display);
  text-wrap: balance;
}
.policy-updated { margin: 1rem 0 0; color: var(--muted); }
.policy section { margin-top: 2.75rem; }
.policy h2 {
  margin: 0 0 1rem;
  font-size: 1.35rem;
  line-height: var(--lh-title);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--amber);
}
.policy p, .policy ul { margin: 0 0 1rem; color: var(--muted); }
.policy ul { padding-inline-start: 1.25rem; }
.policy li { margin-bottom: 0.6rem; }
.policy li::marker { color: var(--ember); }
.policy strong { color: var(--text); font-weight: 600; }
.policy a { color: var(--text); text-underline-offset: 0.2em; }
.policy a:hover { color: var(--amber); }

/* ---------- Shared station (/s/<uuid>, functions/s/[uuid].js) ---------- */

.station-page { padding-block: clamp(2rem, 7vw, 5rem) clamp(4rem, 9vw, 6rem); }
.station-logo {
  display: block;
  width: 96px;
  height: 96px;
  object-fit: contain;
  border-radius: 20px;
  background: var(--ink-raised);
  box-shadow: 0 0 0 1px var(--line), 0 18px 40px rgba(0, 0, 0, 0.45);
}
.station-page h1 {
  margin: 1.5rem 0 0;
  max-width: 18ch;
  font-size: clamp(2.2rem, 5.5vw, 4rem);
  line-height: var(--lh-display);
  font-weight: 800;
  letter-spacing: var(--track-display);
  text-wrap: balance;
  overflow-wrap: anywhere;
}
.station-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.6rem;
  margin: 1.25rem 0 0;
  padding: 0;
  list-style: none;
}
.station-meta li {
  padding: 0.25rem 0.8rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.9rem;
  color: var(--silver);
}
.station-page .lead { margin-top: 1.5rem; }
.station-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 2rem;
  margin-top: 2rem;
}
.station-more { color: var(--text); text-underline-offset: 0.2em; }

/* ---------- 404 ---------- */

.not-found { padding-block: 2rem 4rem; }
.not-found h1 {
  margin: clamp(3rem, 10vw, 6rem) 0 1rem;
  max-width: 16ch;
  font-size: clamp(2.4rem, 6vw, 4.5rem);
  line-height: var(--lh-display);
  letter-spacing: var(--track-display);
}
.not-found-langs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 2rem 0 0;
  padding: 0;
  list-style: none;
}
.not-found-langs a {
  display: block;
  padding: 0.35rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  text-decoration: none;
}

/* ---------- Scripts ----------
   Negative tracking breaks Arabic joining and crowds Indic, Thai and CJK glyphs,
   and their stacked marks need taller lines than Latin display type. */

[data-script="cyrillic"] {
  --display: "Onest", system-ui, sans-serif;
  --scale: "Roboto Condensed", "Arial Narrow", sans-serif;
  --track-display: -0.02em;
  --track-title: -0.02em;
  --track-scale: 0;
  --lh-display: 1.02;
  --h1-measure: 15ch;
}
[data-script="arabic"] {
  --display: "Readex Pro", system-ui, sans-serif;
  --scale: "Readex Pro", system-ui, sans-serif;
}
[data-script="bengali"] {
  --display: "Noto Sans Bengali", system-ui, sans-serif;
  --scale: "Noto Sans Bengali", system-ui, sans-serif;
  --scale-stretch: 80%;
}
[data-script="devanagari"] {
  --display: "Noto Sans Devanagari", system-ui, sans-serif;
  --scale: "Noto Sans Devanagari", system-ui, sans-serif;
  --scale-stretch: 80%;
}
[data-script="thai"] {
  --display: "Noto Sans Thai", system-ui, sans-serif;
  --scale: "Noto Sans Thai", system-ui, sans-serif;
  --scale-stretch: 80%;
}
[data-script="ja"] { --display: "Noto Sans JP", system-ui, sans-serif; --scale: "Noto Sans JP", system-ui, sans-serif; }
[data-script="ko"] { --display: "Noto Sans KR", system-ui, sans-serif; --scale: "Noto Sans KR", system-ui, sans-serif; }
[data-script="zh-hans"] { --display: "Noto Sans SC", system-ui, sans-serif; --scale: "Noto Sans SC", system-ui, sans-serif; }
[data-script="zh-hant"] { --display: "Noto Sans TC", system-ui, sans-serif; --scale: "Noto Sans TC", system-ui, sans-serif; }

[data-script="arabic"], [data-script="bengali"], [data-script="devanagari"], [data-script="thai"] {
  --track-display: 0;
  --track-title: 0;
  --track-scale: 0;
  --lh-display: 1.3;
  --lh-title: 1.3;
  --h1-measure: 16ch;
}
[data-script="ja"], [data-script="ko"], [data-script="zh-hans"], [data-script="zh-hant"] {
  --track-display: 0;
  --track-title: 0;
  --track-scale: 0;
  --lh-display: 1.2;
  --lh-title: 1.25;
  --h1-measure: 11em;
}
[data-script="arabic"] body, [data-script="bengali"] body, [data-script="devanagari"] body,
[data-script="thai"] body { line-height: 1.75; }
[data-script="ja"] body, [data-script="ko"] body, [data-script="zh-hans"] body,
[data-script="zh-hant"] body { line-height: 1.8; }
[data-script="ja"] .hero h1, [data-script="zh-hans"] .hero h1, [data-script="zh-hant"] .hero h1 {
  font-size: clamp(2.2rem, 6vw, 4.6rem);
}
/* Break Japanese headings between phrases, Korean between words. */
[data-script="ja"] :is(h1, h2, h3) { word-break: auto-phrase; }
[data-script="ko"] :is(h1, h2, h3) { word-break: keep-all; }
[data-script="ja"] .section-title, [data-script="ko"] .section-title,
[data-script="zh-hans"] .section-title, [data-script="zh-hant"] .section-title { max-width: 16em; }

@media (max-width: 40rem) {
  :root { --deg: 11px; }
  .dial-track { height: 13.5rem; }
  .station .city { font-size: 1.15rem; }
  .get-it img { height: 56px; }
}

@media (prefers-reduced-motion: reduce) {
  .station button { transition: none; }
}