/* Ten Magpies: un ziar luminos. Pagina principală = cele 10 canale; fiecare canal are pagina lui. */
:root {
  --page: #fbfaf7; --panel: #ffffff; --ink: #15171c; --muted: #5b5f69; --rule: #e3e1da;
  --gold: #ffc93c; --gold-ink: #8a5f00;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --serif: "Lora", Georgia, "Times New Roman", serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
  --bar: rgba(255,255,255,.94); --onink: #fff; --well: #d9d6cc;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --page: #121418; --panel: #1b1e24; --ink: #ecebe6; --muted: #a3a7b0; --rule: #2c3038;
  --gold: #8a6a10; --gold-ink: #ffd36b;
  --bar: rgba(18,20,24,.92); --onink: #121418; --well: #2a2d33;
  color-scheme: dark;
}
:root[data-theme="dark"] .fun img, :root[data-theme="dark"] .ch img { filter: brightness(.92); }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--page); color: var(--ink); font: 400 17px/1.6 var(--sans); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
a { color: inherit; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 4px; }
[id] { scroll-margin-top: 72px; }
.wrap { max-width: 1180px; margin: 0 auto; padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); }
.label { font: 500 12px/1.3 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.hl { background: linear-gradient(transparent 55%, var(--gold) 55%); padding: 0 .08em; }

/* per-channel colours, from brand/planse; --pbg/--pfg = the strong pair for small tags on white */
.c01 { --bg:#0b1026; --fg:#fff; --acc:#ffd60a; --accfg:#0b1026; --badge:#2ee6c5; --pbg:#0b1026; --pfg:#ffd60a; }
.c02 { --bg:#2e3440; --fg:#fff; --acc:#ff6b00; --accfg:#111; --badge:#ff6b00; --pbg:#2e3440; --pfg:#ff6b00; }
.c03 { --bg:#f5f1e8; --fg:#111; --acc:#00a86b; --accfg:#fff; --badge:#00875a; --pbg:#00a86b; --pfg:#fff; }
.c04 { --bg:#1a1a1a; --fg:#f2efe8; --acc:#c1121f; --accfg:#f2efe8; --badge:#ff5a5f; --pbg:#1a1a1a; --pfg:#ff5a5f; }
.c05 { --bg:#ffffff; --fg:#0b3c49; --acc:#3ddc97; --accfg:#0b3c49; --badge:#d9482f; --pbg:#0b3c49; --pfg:#3ddc97; }
.c06 { --bg:#0a0f2c; --fg:#e8e6ff; --acc:#ffc86b; --accfg:#0a0f2c; --badge:#ffc86b; --pbg:#0a0f2c; --pfg:#ffc86b; }
.c07 { --bg:#fff4e0; --fg:#2b2b2b; --acc:#f28c28; --accfg:#fff; --badge:#c4620a; --pbg:#f28c28; --pfg:#fff; }
.c08 { --bg:#0d0d0d; --fg:#ede6d6; --acc:#8b0000; --accfg:#ede6d6; --badge:#c9a227; --pbg:#0d0d0d; --pfg:#ede6d6; }
.c09 { --bg:#1e293b; --fg:#f7f9fc; --acc:#22d3ee; --accfg:#1e293b; --badge:#22d3ee; --pbg:#1e293b; --pfg:#22d3ee; }
.c10 { --bg:#3b2416; --fg:#fff8ee; --acc:#f2a900; --accfg:#3b2416; --badge:#f2a900; --pbg:#3b2416; --pfg:#f2a900; }

/* sticky top bar: logo, the section you are in, RO / EN */
.bar { position: sticky; top: 0; z-index: 20; background: var(--bar); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid var(--rule); padding-top: env(safe-area-inset-top, 0px); }
.bar .wrap { display: flex; align-items: center; gap: 12px; min-height: 54px; }
.brand { display: flex; align-items: center; gap: 9px; text-decoration: none; font: 900 16px/1 var(--sans); letter-spacing: .02em; flex: none; }
.brand img { width: 30px; height: 30px; border-radius: 7px; }
.pill { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 13px/1 var(--sans); padding: 8px 11px; border-radius: 999px; text-decoration: none; background: var(--pbg, var(--ink)); color: var(--pfg, var(--onink)); }
.lang { margin-left: auto; display: flex; flex: none; border: 1px solid var(--rule); border-radius: 999px; padding: 3px; background: var(--page); }
.lang a { font: 600 12px/1 var(--mono); letter-spacing: .06em; text-decoration: none; padding: 7px 10px; border-radius: 999px; color: var(--muted); }
.lang a[aria-current] { background: var(--ink); color: var(--onink); }
.theme { flex: none; width: 36px; height: 36px; border-radius: 999px; border: 1px solid var(--rule); background: var(--page); color: var(--ink); font: 16px/1 var(--sans); cursor: pointer; display: grid; place-items: center; padding: 0; }
.theme .sun { display: none; } :root[data-theme="dark"] .theme .sun { display: inline; } :root[data-theme="dark"] .theme .moon { display: none; }

/* masthead, compact so the channels show up right away */
.mast { padding-block: 22px 26px; border-bottom: 3px double var(--rule); }
.dateline { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 6px 24px; border-bottom: 1px solid var(--rule); padding-bottom: 9px; }
.mast-main { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 28px; align-items: center; padding-top: 22px; }
.logo { width: 150px; height: 150px; border-radius: 30px; }
.home h1 { margin: 0; font: 900 clamp(46px, 7vw, 88px)/.92 var(--sans); letter-spacing: -.035em; }
.tagline { margin: 12px 0 0; font: 700 clamp(19px, 2.2vw, 24px)/1.3 var(--sans); text-wrap: balance; }
.lede { margin: 8px 0 0; max-width: 44em; color: var(--muted); }
.motto { margin: 12px 0 0; font: italic 500 17px/1.4 var(--serif); border-left: 3px solid var(--gold); padding-left: 12px; }

/* sections */
.sec { padding-block: 44px; border-bottom: 1px solid var(--rule); }
.sec-head { display: flex; justify-content: space-between; align-items: baseline; gap: 6px 16px; flex-wrap: wrap; margin-bottom: 22px; }
h2 { margin: 0; font: 900 clamp(28px, 3.6vw, 40px)/1.05 var(--sans); letter-spacing: -.02em; text-wrap: balance; }
h2.small { font-size: 22px; margin-bottom: 16px; }

/* the ten, each one a link to its own page */
.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.ch { background: var(--bg); color: var(--fg); border-radius: 8px; overflow: hidden; display: flex; text-decoration: none; transition: transform .15s ease, box-shadow .15s ease; }
.ch:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.12); }
@media (prefers-reduced-motion: reduce) { .ch { transition: none; } .ch:hover { transform: none; } }
.ch .in { flex: 1 1 auto; min-width: 0; padding: 22px; display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 4px 16px; align-content: start; align-items: center; }
.ch .ico { width: 64px; height: 64px; border-radius: 14px; }
.ch .ph { flex: 0 0 36%; position: relative; background: var(--well); }
.ch .ph img { color: transparent; font-size: 0; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ch .num, .chhero .num { font: 500 11px/1.2 var(--mono); letter-spacing: .12em; text-transform: uppercase; opacity: .75; align-self: end; }
.ch h3 { margin: 0; font-size: 25px; line-height: 1.08; text-wrap: balance; }
.ch .line { grid-column: 1 / -1; margin: 12px 0 0; font-weight: 600; font-size: 16.5px; line-height: 1.35; }
.line mark { background: var(--acc); color: var(--accfg); padding: 0 .2em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.ch .desc { grid-column: 1 / -1; margin: 6px 0 0; font-size: 15px; line-height: 1.55; opacity: .85; }
.ch .foot { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 14px; padding-top: 12px; border-top: 1px solid color-mix(in srgb, var(--fg) 18%, transparent); font: 500 12px/1.3 var(--mono); }
.ch .go { font: 700 13px/1.2 var(--sans); }
.status { display: inline-flex; align-items: center; gap: 7px; }
.status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.status.yt { color: var(--badge); }
.status.yt::before { animation: blink 1.6s ease-in-out infinite; }
@keyframes blink { 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .status.yt::before { animation: none; } }
.ch.c03, .ch.c05, .ch.c07, .chhero.c03, .chhero.c05, .chhero.c07 { box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }
.c01 h3, .c01 h1 { font-family: var(--sans); font-weight: 900; text-transform: uppercase; letter-spacing: -.01em; }
.c02 h3, .c02 h1 { font-family: "Barlow Condensed", "Arial Narrow", sans-serif; font-weight: 700; text-transform: uppercase; }
.c03 h3, .c07 h3, .c05 h3, .c03 h1, .c07 h1, .c05 h1 { font-family: "Poppins", var(--sans); font-weight: 700; }
.c04 h3, .c06 h3, .c10 h3, .c04 h1, .c06 h1, .c10 h1 { font-family: var(--serif); font-weight: 700; }
.c08 h3, .c08 h1 { font-family: "Libre Baskerville", Georgia, serif; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; }
.c09 h3, .c09 h1 { font-family: var(--sans); font-weight: 800; }

/* first on air: You Need To Learn, the night edition */
.onair { --bg: #0a0f2c; --fg: #e8e6ff; --acc: #ffc86b; --neb: #7b61ff; position: relative; overflow: hidden; border-radius: 8px; background: var(--bg); color: var(--fg); display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 32px; padding: clamp(22px, 5vw, 52px); }
.onair canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.onair > * { position: relative; }
.onair .kicker { display: inline-block; background: var(--neb); color: #fff; font: 600 12px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; padding: 6px 9px; border-radius: 3px; }
.onair h3 { margin: 16px 0 0; font: 700 clamp(32px, 4.6vw, 56px)/1.04 var(--serif); }
.onair .sub { margin: 8px 0 0; font: italic 500 21px/1.35 var(--serif); color: var(--acc); }
.onair p { max-width: 34em; color: color-mix(in srgb, var(--fg) 82%, transparent); }
.onair .meta { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 18px; font: 500 13px/1.4 var(--mono); color: color-mix(in srgb, var(--fg) 70%, transparent); }
.watch { display: inline-block; margin-top: 18px; font: 700 14px/1 var(--sans); background: var(--acc); color: var(--bg); padding: 11px 14px; border-radius: 4px; text-decoration: none; }
.episodes { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; align-content: center; }
.episodes li { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 14px; align-items: center; background: color-mix(in srgb, var(--fg) 6%, transparent); border: 1px solid color-mix(in srgb, var(--fg) 12%, transparent); border-radius: 5px; padding: 12px 14px; }
.episodes .len { font: 500 12px/1.2 var(--mono); color: var(--acc); }
.episodes .t { font: 700 18px/1.25 var(--serif); }

/* how we work */
.rules { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--rule); }
.rule { padding: 20px 22px 4px 0; border-right: 1px solid var(--rule); }
.rule + .rule { padding-left: 22px; }
.rule:last-child { border-right: 0; }
.rule h3 { margin: 0 0 8px; font: 800 18px/1.25 var(--sans); }
.rule p { margin: 0; color: var(--muted); font-size: 15.5px; }

/* contact */
.contact { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: start; }
.contact p { color: var(--muted); max-width: 32em; margin: 12px 0 0; }
.links { display: grid; gap: 12px; }
.links a, .links .mail { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 18px; background: var(--panel); border: 1px solid var(--rule); border-radius: 6px; text-decoration: none; font-weight: 600; min-width: 0; }
.links a:hover { border-color: var(--ink); }
.mailbox { display: flex; gap: 10px; align-items: center; min-width: 0; }
.links .v { font: 500 14px/1.3 var(--mono); color: var(--gold-ink); overflow-wrap: anywhere; text-align: right; }
.copy { font: 600 13px/1 var(--sans); background: var(--gold); color: var(--ink); border: 0; border-radius: 4px; padding: 8px 12px; cursor: pointer; }

/* channel page */
.chhero { background: var(--bg); color: var(--fg); padding-block: 18px 34px; }
.crumb { display: inline-block; font: 600 14px/1 var(--sans); text-decoration: none; opacity: .8; padding: 6px 0; }
.crumb:hover { opacity: 1; text-decoration: underline; }
.chhero-in { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 22px; align-items: start; margin-top: 16px; }
.chhero img { width: 96px; height: 96px; border-radius: 20px; }
.chhero h1 { margin: 6px 0 0; font-size: clamp(34px, 5vw, 56px); line-height: 1.02; }
.chhero .line { margin: 12px 0 0; font-weight: 600; font-size: 19px; line-height: 1.35; }
.chhero .desc { margin: 8px 0 0; max-width: 40em; opacity: .85; }
.empty { color: var(--muted); }
.news { display: grid; gap: 28px; }
.news-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 26px; }
.story { display: grid; gap: 12px; align-content: start; min-width: 0; }
.story figure { margin: 0; position: relative; border-radius: 6px; overflow: hidden; background: var(--well); aspect-ratio: 16 / 10; }
.story figure img { width: 100%; height: 100%; object-fit: cover; color: transparent; }
.story figcaption { position: absolute; right: 0; bottom: 0; padding: 4px 8px; font: 500 10.5px/1.3 var(--mono); color: #fff; background: rgba(0,0,0,.55); border-top-left-radius: 4px; }
.story .pic { display: block; }
.story .body { display: grid; gap: 6px; align-content: start; min-width: 0; }
.tag { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; font: 500 11.5px/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.story h3 { margin: 2px 0 0; font: 800 20px/1.25 var(--sans); text-wrap: balance; }
.story h3 a { text-decoration: none; }
.story h3 a:hover { text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 3px; text-underline-offset: 4px; }
.story p { margin: 0; color: var(--muted); font-size: 15.5px; }
.more { justify-self: start; margin-top: 4px; font: 600 14px/1.3 var(--sans); text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.story.top { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 28px; align-items: center; }
.story.top h3 { font: 700 clamp(26px, 3.2vw, 38px)/1.12 var(--serif); }
.story.top p { font-size: 17px; color: var(--ink); }
.others { border-bottom: 0; }
.chips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.chip { display: flex; align-items: center; gap: 10px; padding: 8px; border: 1px solid var(--rule); background: var(--panel); border-radius: 8px; text-decoration: none; font: 600 14px/1.2 var(--sans); min-width: 0; }
.chip:hover { border-color: var(--ink); }
.chip img { width: 36px; height: 36px; border-radius: 9px; flex: none; }

/* article page */
.art { max-width: 760px; margin: 0 auto; padding: 0 max(20px, env(safe-area-inset-right, 0px)) 24px max(20px, env(safe-area-inset-left, 0px)); font-size: 18px; line-height: 1.7; }
.art-head { padding-top: 28px; display: grid; gap: 12px; }
.chtag { background: var(--pbg); color: var(--pfg); padding: 5px 8px; border-radius: 3px; text-decoration: none; }
.art h1 { margin: 0; font: 700 clamp(31px, 5.2vw, 48px)/1.1 var(--serif); letter-spacing: -.01em; text-wrap: balance; }
.standfirst { margin: 0; font: 500 20px/1.5 var(--sans); }
.art .meta { font: 500 13px/1.4 var(--mono); color: var(--muted); }
.hero { margin: 22px 0 6px; }
.fun { margin: 28px 0; }
.fun img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 6px; background: var(--well); }
.fun figcaption { font-size: 13px; color: var(--muted); margin-top: 6px; }
.hero img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 6px; background: var(--well); color: transparent; }
.sources .credits { font: 500 12.5px/1.5 var(--mono); color: var(--muted); }
.hero figcaption { margin-top: 8px; font: 500 12.5px/1.4 var(--mono); color: var(--muted); }
.text h2 { margin: 34px 0 4px; font: 800 23px/1.3 var(--sans); letter-spacing: -.01em; }
.text p { margin: 14px 0 0; }
sup { line-height: 0; font: 500 12px/0 var(--mono); }
sup a { text-decoration: none; color: var(--muted); padding-left: 1px; }
.sources { margin-top: 40px; padding-top: 18px; border-top: 3px double var(--rule); }
.sources summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 8px; font: 700 14px/1.3 var(--sans); color: var(--muted); }
.sources summary::-webkit-details-marker { display: none; }
.sources summary::after { content: "▾"; transition: transform .15s; }
.sources[open] summary::after { transform: rotate(180deg); }
.sources[open] summary { margin-bottom: 12px; }
.sources ol { margin: 0; padding-left: 1.4em; display: grid; gap: 8px; font-size: 15px; line-height: 1.5; }
.sources a { text-decoration-color: var(--gold); text-decoration-thickness: 2px; text-underline-offset: 3px; overflow-wrap: anywhere; }
.note { margin-top: 16px; font-size: 14px; color: var(--muted); }
.next { display: block; margin: 30px 0 10px; padding: 18px 20px; border-radius: 8px; background: var(--bg); color: var(--fg); font: 700 17px/1.3 var(--sans); text-decoration: none; }
.next.c03, .next.c05, .next.c07 { box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }

/* footer */
footer { padding-block: 32px 48px; border-top: 1px solid var(--rule); }
footer .wrap { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; align-items: end; }
.rhyme { margin: 0; font: italic 500 15px/1.7 var(--serif); color: var(--muted); max-width: 30em; }
.rhyme em { color: var(--ink); background: linear-gradient(transparent 60%, var(--gold) 60%); }

@media (max-width: 900px) {
  .onair, .contact, .story.top { grid-template-columns: minmax(0, 1fr); }
  .story.top { gap: 14px; }
  .news-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rules { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rule:nth-child(2) { border-right: 0; }
  .rule:nth-child(3) { padding-left: 0; }
  .rule:nth-child(n+3) { border-top: 1px solid var(--rule); }
  .chips { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  .bar.has-pill .brand span { display: none; }
  .mast { padding-block: 14px 18px; }
  .dateline span:nth-child(3) { display: none; }
  .mast-main { grid-template-columns: 64px minmax(0, 1fr); gap: 14px; padding-top: 14px; }
  .logo { width: 64px; height: 64px; border-radius: 14px; }
  .home h1 { font-size: 38px; }
  .mast-main .text { display: contents; }
  .mast-main .tagline, .mast-main .motto { grid-column: 1 / -1; }
  .tagline { margin-top: 2px; font-size: 18px; }
  .lede { display: none; }
  .motto { margin-top: 8px; font-size: 15.5px; }
  .sec { padding-block: 30px; }
  .sec-head { margin-bottom: 16px; }
  /* channels: two small tiles per row, icon and name only */
  .grid { gap: 10px; }
  .ch { flex-direction: column-reverse; }
  .ch .in { padding: 14px; grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .ch .ico { width: 48px; height: 48px; border-radius: 11px; }
  .ch .ph { flex: none; aspect-ratio: 16 / 10; }
  .ch h3 { font-size: 19px; }
  .ch .desc, .ch .line, .ch .status { display: none; }
  .ch .foot { margin-top: 2px; padding-top: 8px; }
  .news-grid { grid-template-columns: minmax(0, 1fr); }
  .rules { grid-template-columns: minmax(0, 1fr); }
  .rule, .rule + .rule { padding-left: 0; border-right: 0; border-top: 1px solid var(--rule); }
  .rule:first-child { border-top: 0; }
  .episodes li { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .chhero-in { grid-template-columns: 64px minmax(0, 1fr); gap: 14px; }
  .chhero img { width: 64px; height: 64px; border-radius: 14px; }
  .chhero .line { font-size: 17px; }
  .art { font-size: 17px; }
  .standfirst { font-size: 18px; }
}