/* ipxreader.app. The palette is the iPodderX logo's: the radio's navy body, the sky of its
   screen, the blue of its tuning scale, and the orange needle, which is the needle alone. The
   typeface is the reader's own, Inter, the same file (web/InterVariable.woff2). */
@font-face{font-family:Inter;src:url(/fonts/inter.woff2) format("woff2");font-weight:100 900;font-display:swap}
:root{
  --navy:#0c2238;     /* the radio */
  --ink:#16304a;      /* body text, a step off the navy */
  --muted:#46607a;
  --sky:#dff0fb;      /* its screen */
  --page:#f1f8fd;
  --scale:#2f6aa0;    /* the tuning scale, and links */
  --tick:#8fc2ea;     /* the scale on the dark dial */
  --needle:#ff5500;
  --rule:#c6d9ea;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--page);color:var(--ink);font:400 1.0625rem/1.6 Inter,system-ui,sans-serif}
a{color:var(--scale);text-underline-offset:.18em}
a:focus-visible,.btn:focus-visible{outline:3px solid var(--scale);outline-offset:3px;border-radius:6px}
main,.bar,footer{max-width:72rem;margin:0 auto;padding-inline:1.5rem}

.bar{display:flex;align-items:center;justify-content:space-between;padding-block:1.25rem}
.home{display:flex;align-items:center;gap:.6rem;color:var(--navy);text-decoration:none;font-weight:800;font-size:1.25rem}
.home img{border-radius:9px;display:block}
.bar nav{display:flex;gap:1.5rem}
.bar nav a{color:var(--navy);text-decoration:none;font-weight:600}
.bar nav a:hover{text-decoration:underline}

.hero{padding-block:3rem 2.5rem;max-width:46rem}
h1{margin:0;color:var(--navy);font-weight:900;font-size:clamp(6.5rem,24vw,15rem);line-height:.82;letter-spacing:-.065em}
.lede{margin:1.75rem 0 0;color:var(--navy);font-weight:650;font-size:clamp(1.45rem,3.4vw,2rem);line-height:1.2;letter-spacing:-.01em}
.intro{margin:1rem 0 0;max-width:38rem;color:var(--muted);font-size:1.125rem}
.acts{display:flex;flex-wrap:wrap;gap:.75rem;margin:2rem 0 0}
.btn{display:inline-block;padding:.8rem 1.35rem;border:2px solid var(--navy);border-radius:999px;color:var(--navy);text-decoration:none;font-weight:700}
.btn:hover{background:var(--sky)}
.btn.primary{background:var(--navy);color:#fff}
.btn.primary:hover{background:#1a3a5c}

/* The dial: a frequency row, minor and major ticks, stations on two staggered rows as a printed
   dial has them, and the needle, which points down at the scale and lights the station it stops
   on rather than crossing its name. --at is where it stops: the tuned station's middle. */
.dial{margin:1rem 0 0}
.scale{background:var(--navy);border-radius:1.25rem;overflow:hidden}
.track{position:relative;--at:45.8%}
.freq{position:relative;list-style:none;margin:0;padding:1.1rem 4% 0;display:flex;justify-content:space-between;color:var(--tick);font-weight:600;font-size:.95rem;font-variant-numeric:tabular-nums}
.freq li{width:0;display:flex;justify-content:center}  /* each number centred on its tick */
.freq::after{content:"";position:absolute;left:4%;right:4%;top:2.6rem;height:1.6rem;
  background:
    repeating-linear-gradient(90deg,var(--tick) 0 2px,transparent 2px 20%) 0 0/100% 100%,
    repeating-linear-gradient(90deg,rgba(143,194,234,.55) 0 1px,transparent 1px 2%) 0 100%/100% 45%;
  background-repeat:no-repeat}
.stations{list-style:none;margin:2.6rem 0 0;padding:0 1% 1.6rem;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));align-items:start;
  color:#cfe3f4;font-weight:550;font-size:.84rem;line-height:1.2;letter-spacing:-.01em;text-align:center}
.stations li{padding-inline:.15rem}
.stations li:nth-child(even){margin-top:1.7rem}
.needle{position:absolute;top:2.35rem;height:2.7rem;left:var(--at);width:3px;margin-left:-1.5px;background:var(--needle);border-radius:2px;
  box-shadow:0 0 0 1px rgba(12,34,56,.6);animation:tune 2.4s cubic-bezier(.3,.7,.3,1) .4s both}
.stations .tuned{text-decoration:underline 2px transparent;text-underline-offset:.3em;animation:lit .5s ease-out 2.6s both}
@keyframes tune{0%{left:3%}68%{left:calc(var(--at) + 7%)}86%{left:calc(var(--at) - 1.4%)}100%{left:var(--at)}}
@keyframes lit{from{color:#cfe3f4}to{color:#fff;font-weight:800;text-decoration-color:var(--needle)}}
@media (prefers-reduced-motion:reduce){.needle,.stations .tuned{animation-duration:0s;animation-delay:0s}}
figcaption{margin:.7rem 0 0;color:var(--muted);font-size:.9rem}

/* The app as it looks. The window in a navy panel, the dial's material, rising out of its bottom
   edge; the phone in a row of its own beside what it shows, not over the window's corner. */
.shots{padding-block:4.5rem 0}
.shotlede{max-width:40rem;margin:-.5rem 0 1.75rem}
.window{margin:0;padding:clamp(1rem,3.2vw,2.5rem) clamp(1rem,3.2vw,2.5rem) 0;background:var(--navy);border-radius:1.25rem;overflow:hidden}
.window img{display:block;width:100%;height:auto;border-radius:.6rem .6rem 0 0;box-shadow:0 0 0 1px rgba(143,194,234,.22)}
.pocket{display:grid;grid-template-columns:minmax(0,14rem) minmax(0,1fr);gap:clamp(2rem,7vw,5.5rem);align-items:center;padding-block:4rem 0}
.pocket img{display:block;width:100%;height:auto;border-radius:1.9rem;border:.45rem solid var(--navy)}
.pocket h2{margin-bottom:.75rem}
.pocket p{margin:0;max-width:28rem;font-size:1.125rem}

h2{margin:0 0 1.5rem;color:var(--navy);font-weight:800;font-size:clamp(1.75rem,4vw,2.4rem);line-height:1.1;letter-spacing:-.02em}
.does,.then{padding-block:4rem 0}
.does dl{margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2.25rem 3.5rem}
.does dt{color:var(--navy);font-weight:750;font-size:1.2rem;line-height:1.25}
.does dd{margin:.45rem 0 0;max-width:34rem}


.then p{max-width:40rem}
footer{margin-top:5rem;padding-block:1.75rem 3rem;border-top:1px solid var(--rule);color:var(--muted);font-size:.95rem}
footer p{margin:0}

@media (max-width:640px){
  main,.bar,footer{padding-inline:1rem}
  .bar nav{gap:1rem}
  .hero{padding-block:1.5rem 2rem}
  .does dl{grid-template-columns:minmax(0,1fr);gap:1.75rem}
  .window{margin-inline:-1rem;border-radius:0}
  /* The whole window at this width is too small to read: its left part, larger. */
  .window img{height:20rem;object-fit:cover;object-position:0 0}
  .pocket{grid-template-columns:minmax(0,1fr);gap:1.5rem}
  .pocket img{order:2;width:58%;max-width:14rem}
  .dial{margin-inline:-1rem}
  .scale{border-radius:0}
  figcaption{padding-inline:1rem}
  /* Six stations, the tuned one third, rather than twelve too narrow to read. */
  .track{--at:41.7%}
  .stations{grid-template-columns:repeat(6,minmax(0,1fr));padding-inline:2%}
  .stations li:nth-child(-n+3),.stations li:nth-child(n+10){display:none}
  .stations li:nth-child(even){margin-top:0}
  .stations li:nth-child(odd){margin-top:1.7rem}
}