/* Canary Palestine — what the CMS adds to the theme's cp.css (loaded after it).
   cp.css stays the prototype's own file; every rule here answers something the
   prototype never had to: real data, or a defect measured in the prototype itself. */

/* ---------- the masthead row never runs under its buttons ----------
   Measured on the prototype (about.html, Chrome): the last link of the row ran
   under «Hear the network» by up to 292 px between 861 and 1150 px, by up to
   104 px between 1241 and 1340 px, and by 2 px from 1341 px up, because .nav
   shrinks below its links (flex:1; min-width:0). The answers are the design's
   own, given at a wider width:
     · up to 1000 px the row takes its own line under the mark, as cp.css lays
       it out up to 860 px (below 1000 px the links cannot fit beside the mark
       and «Station alerts» even without the ghost button);
     · above that the row keeps its links' width; the ghost button steps out up
       to 1180 px (cp.css: up to 860 px), the letters and «25 stations» up to
       1380 px (cp.css: up to 1240 px).
   Range syntax, so no fractional width falls between two queries. */
@media (width > 860px) and (width <= 1000px){
  .mast .wrap{flex-wrap:wrap;gap:0;min-height:0;padding-top:12px}
  .brand .wm{height:38px}
  .mast .acts{margin-left:auto}
  .mast .acts .btn.ghost{display:none}
  .nav{order:3;flex-basis:100%;position:relative;margin:10px calc(var(--gut) * -1) 0;border-top:1px solid var(--seam)}
  .nav ul{overflow-x:auto;scrollbar-width:none;padding:0 44px 0 var(--gut);gap:0}
  .nav ul::-webkit-scrollbar{display:none}
  .nav li{flex:none}
  .nav a{white-space:nowrap}
  .nav::after{content:"";position:absolute;right:0;top:0;bottom:0;width:56px;background:linear-gradient(90deg,rgba(14,16,13,0),var(--coal) 70%);pointer-events:none}
}
@media (width > 1000px){
  .nav{flex:1 0 auto}
}
@media (width > 1000px) and (width <= 1180px){
  .mast .acts .btn.ghost{display:none}
}
@media (width > 1240px) and (width <= 1380px){
  .nav a .code{display:none}
  .nav a{padding:0 9px}
  .brand .now{display:none}
}

/* An uploaded logo in place of the inline wordmark sits in the mark's box (cp.css sizes .wm by height). */
.brand img.wm,.foot img.wm{width:auto;object-fit:contain}

/* The utility line is one row that never wraps (cp.css ≤760 px): on the
   phones narrower than 375 px the weekday steps out so the row fits («Wednesday»
   fits a 375 px screen with 11 px to spare; prototype: the row
   ran 30 px past a 320 px screen, measured). */
@media (width < 375px){
  .util .wd{display:none}
}

/* ---------- «محتوى الصفحات» on the desk's pages ----------
   A slot body is wrapped in .pc-prose (partials.page-content-prose), whose
   prose rules give every list bullets and every paragraph a bottom margin.
   On About and Privacy the sections are the design's own grid rows
   (.abt-body, gap 64 px), and the live lists the page fills in (.callrows,
   .srcs) are the design's, not prose: the wrapper steps aside and those
   lists keep cp.css's look. */
.abt-body > .pc-prose{display:contents}
.abt-body .pc-prose p{margin-block-end:0}
.abt-body .pc-prose .callrows,.abt-body .pc-prose .srcs{list-style:none;padding-inline-start:0}
.abt-body .pc-prose .callrows{margin-block:24px 0}
.abt-body .pc-prose .srcs{margin-block:18px 0}
.abt-body .pc-prose .callrows li,.abt-body .pc-prose .srcs li{list-style:none;margin-block-end:0}

/* ---------- motion: the design's own, on cheaper wheels ----------
   «Hear the month»'s equaliser animated height (layout, every frame, while
   the month plays); the same bars grow by scaleY from their foot on the
   compositor. Same look, same timing. */
.play .eq i{height:14px;transform-origin:50% 100%;animation-name:eq-s}
@keyframes eq-s{from{transform:scaleY(.2143)}to{transform:scaleY(1)}}

/* The entrance waits for cp.js to light the page (.lit). Should the script
   never run to that line — blocked, failed, a broken extension — the page
   would stay blank; after 4 s the words and marks show regardless. */
@keyframes cp-failsafe{to{opacity:1;transform:none}}
.js:not(.lit) .rise,.js:not(.lit) .sono .rep{animation:cp-failsafe 0s 4s forwards}
.js:not(.lit) .sono.month svg{animation:cp-failsafe-clip 0s 4s forwards}
@keyframes cp-failsafe-clip{to{clip-path:inset(0 0 0 0)}}