/* The radio home (moonfallcove.fm). Loads after v2.css and reuses its tokens, hero, portals, sections and footer. */

/* no rail and no top strip on this page: undo the room v2.css reserves for them on the home page */
.fm .hero{padding-top:calc(34px + env(safe-area-inset-top))}
.fm .hero,.fm .sec{padding-left:max(16px,env(safe-area-inset-left))}
.fm .site-foot{--pl:max(16px,env(safe-area-inset-left))}
/* The home page hides the painted moon behind the portrait. Here the name and byline would sit on it, so the
   painting hangs lower (the moon rises under the byline) and fades in from the top; a light scrim covers LIVE warming. */
.fm .paint{right:0;top:6%;height:106%;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.07) 1.5%,rgba(0,0,0,.17) 3%,rgba(0,0,0,.3) 4.5%,rgba(0,0,0,.46) 6%,rgba(0,0,0,.64) 8%,rgba(0,0,0,.8) 10%,rgba(0,0,0,.92) 12.5%,#000 16%,#000 52%,rgba(0,0,0,.92) 60%,rgba(0,0,0,.8) 67%,rgba(0,0,0,.64) 73%,rgba(0,0,0,.46) 79%,rgba(0,0,0,.3) 84%,rgba(0,0,0,.17) 89%,rgba(0,0,0,.07) 94%,transparent 99%);
          mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.07) 1.5%,rgba(0,0,0,.17) 3%,rgba(0,0,0,.3) 4.5%,rgba(0,0,0,.46) 6%,rgba(0,0,0,.64) 8%,rgba(0,0,0,.8) 10%,rgba(0,0,0,.92) 12.5%,#000 16%,#000 52%,rgba(0,0,0,.92) 60%,rgba(0,0,0,.8) 67%,rgba(0,0,0,.64) 73%,rgba(0,0,0,.46) 79%,rgba(0,0,0,.3) 84%,rgba(0,0,0,.17) 89%,rgba(0,0,0,.07) 94%,transparent 99%)}
.fm .hero-veil{background:var(--grain),linear-gradient(to bottom,rgba(9,13,11,.4) 0,rgba(9,13,11,.4) 140px,rgba(9,13,11,.32) 165px,rgba(9,13,11,.22) 190px,rgba(9,13,11,.12) 215px,rgba(9,13,11,.05) 240px,transparent 265px),var(--veil)}
.fm .hero-in{container-type:inline-size}
/* the station name stays on one line at every width and zoom: no minimum size, so it always fits its column (vw line: browsers without container units) */
.fm .hero h1{margin-top:0;white-space:nowrap;font-size:8.4vw;font-size:min(10.8cqw,76px)}
.fm .byline{margin-top:8px;column-gap:.3em} /* one phrase on a wide screen, two lines on a phone */
.fm .byline .guard{color:var(--ivory)}
.fm .tn-label,.fm-row .r-state{color:#ebc57a} /* the lighter gold v2.css uses for small text over the painting */
.fm .skip{top:-200px} /* the link wraps to several lines at high zoom; -80px let it peek into view */
.fm .strip{grid-template-columns:minmax(0,1fr);gap:14px}
/* room for the loaded state (label, time, title, your time), so the dial does not jump when the schedule arrives */
.fm .tide-now{display:grid;align-content:end;min-height:148px}
.fm .aside{text-wrap:pretty}

/* ---------- the dial: seven days, a mark per broadcast, the moon at now ---------- */
.dial{--h:56px;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:start;gap:16px;text-shadow:0 1px 3px rgba(9,13,11,.9)}
/* Cinzel's baseline sits .8em under the top of a line-height:1 box, so this margin stands FM on the scale's baseline */
.dial-band{font:500 48px/1 var(--serif);letter-spacing:.04em;color:var(--ivory);margin-top:calc(var(--h) - .8em)}
.dial-face{min-width:0}
.dial-scale{position:relative;height:var(--h)}
.dial-ticks{position:absolute;inset:auto 0 0 0;width:100%;height:22px;overflow:visible;fill:none;shape-rendering:crispEdges}
.dial-ticks path{vector-effect:non-scaling-stroke;stroke-width:1}
.tk-min{stroke:rgba(201,195,179,.72)}
.tk-maj{stroke:rgba(201,195,179,.95)}
.tk-base{stroke:rgba(201,195,179,.85)}
.dial-mark{position:absolute;bottom:0;width:4px;height:calc(var(--h) * .54);margin-left:-2px;border-radius:2px 2px 0 0;background:var(--gold)}
.dial-mark.past{background:var(--parch)}
.dial-mark.up{height:calc(var(--h) * .68)}
.dial-needle{position:absolute;top:0;bottom:0;left:0;width:20px;margin-left:-10px;transition:left 1.4s var(--ease)}
.dial-needle::after{content:"";position:absolute;left:9px;top:22px;bottom:0;width:2px;border-radius:2px 2px 0 0;background:var(--ivory)}
.dial-needle .moon{width:20px;height:20px}
.dial-needle .moon .m-dark{stroke:var(--mgold);stroke-width:5} /* a new moon is a dark disk: the rim keeps it readable over the painting */
.dial-days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));margin-top:8px;text-align:center;font:500 14px/1 var(--serif);letter-spacing:.05em;color:var(--ivory)} /* ivory: parch drops under 4.5:1 where a short screen puts the dial on the moon */

/* ---------- the week's broadcasts ---------- */
.fm-list{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.fm-row{display:grid;grid-template-columns:minmax(0,1fr);gap:2px;padding:12px;border-radius:12px}
.fm-row.up{background:var(--hearth)}
.fm-row .r-state{font:500 13px/1.3 var(--serif);letter-spacing:.05em}
.fm-row .r-when{display:flex;flex-wrap:wrap;gap:0 10px;align-items:baseline;font-size:16px;color:var(--parch)}
.fm-row .r-day{font:500 15px/1.3 var(--serif);letter-spacing:.05em;color:var(--ivory)}
.fm-row .r-local{color:#a9b4ab} /* fog fails 4.5:1 over the painted section */
.fm-row .r-title{font-size:20px;line-height:1.25;color:var(--ivory);overflow-wrap:anywhere}
.fm-row.past .r-day,.fm-row.past .r-title,.fm-row.past .r-when,.fm-row.past .r-state{color:#a9b4ab}

.fm-times{margin-top:18px}
.fm-doors{display:grid;gap:10px}

@media (min-width:620px){
  .fm-doors{grid-template-columns:1fr 1fr}
}
@media (min-width:760px){
  .fm .hero-in{max-width:1040px} /* the same column as the sections below, so every left edge lines up */
  .fm .strip{grid-template-columns:1.2fr 1fr;align-items:end}
  .fm .dial{grid-column:1 / -1}
  .fm .tide-now{grid-column:auto;min-height:120px}
  .dial{--h:64px}
  .dial-band{font-size:60px}
  .fm-row{grid-template-columns:340px minmax(0,1fr);align-items:baseline;column-gap:20px}
  .fm-row .r-state{grid-column:1 / -1}
}