/* Webplayer page around the shared panel (shared/hora-player/hora-player.css).
   Tokens from wordpress/theme/theme.json. */
@font-face{font-family:"Liasion Grotesque";src:url("fonts/LiasionGrotesque-Regular.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Liasion Grotesque";src:url("fonts/LiasionGrotesque-Bold.woff2") format("woff2");font-weight:700;font-display:swap}

:root{
  --base:#FBFAF8;--contrast:#222222;--green:#22B573;--green-dark:#1A8F5A;--grey:#6B6B6B;--surface:#F0EFEC;
  --font:"Liasion Grotesque",Manrope,system-ui,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  min-height:100vh;background:var(--base);color:var(--contrast);
  font-family:var(--font);font-size:1rem;line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
/* never tabular figures, and no ligatures: Liasion's tnum glyphs and its ff
   ligature are empty in Bold ("öffnen" turns into "ö nen"), & is missing too */
body{font-variant-ligatures:none;font-feature-settings:"liga" 0,"clig" 0}
a{color:var(--green-dark)}
a:hover{color:var(--contrast)}

.page{max-width:40rem;margin:0 auto;padding:clamp(1rem,4vw,2.5rem) 1rem 2rem;display:flex;flex-direction:column;gap:1.25rem}

.top{background:var(--contrast);border-radius:18px;padding:1.1rem 1.4rem;display:flex;align-items:center}
.top__logo img{display:block;height:auto;width:clamp(160px,40vw,220px)}

.links{display:flex;gap:.5rem;flex-wrap:wrap}
.links a{
  text-decoration:none;font-weight:700;font-size:.9rem;color:var(--contrast);
  background:var(--surface);border-radius:6px;padding:.5rem .85rem;
}
.links a:hover{background:var(--green);color:#fff}
.foot{font-size:.8rem;color:var(--grey);text-align:center}
.foot a{color:var(--grey)}

@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto}}