Home page: no phone row, the player bar unsquashed, Since 2004 full width (#216)

The player crop had class "bar", which is also the header's class, so the
image took the header's padding and flex layout and was drawn squashed.
It is "player" now.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

site/index.html

@@ -82,19 +82,10 @@
         <h3>Pick up where you left off</h3>
         <p>The player keeps your place in every episode, on every device. Turn on DeadAir for a show and it plays without the long silences, leaving the pause you choose.</p>
       </div>
-      <figure class="frame"><img class="cut bar" src="/shots/player.webp" width="1200" height="80" loading="lazy"
+      <figure class="frame"><img class="cut player" src="/shots/player.webp" width="1200" height="80" loading="lazy"
         alt="The player along the bottom of the page: the episode playing, back and forward, how far in it is, its speed and the volume."></figure>
     </div>
 
-    <div class="feature phone">
-      <div class="say">
-        <h3>On your phone</h3>
-        <p>Add it to your home screen and it opens like an app, with the same lists and the same place in each episode as on your computer.</p>
-      </div>
-      <img src="/shots/phone.webp" width="300" height="649" loading="lazy"
-        alt="iPX on a phone: Ologies with Alie Ward and its latest episodes.">
-    </div>
-
     <div class="feature">
       <div class="say">
         <h3>A shared directory</h3>

site/site.css

@@ -73,13 +73,11 @@ h2{margin:0 0 1.5rem;color:var(--navy);font-weight:800;font-size:clamp(1.75rem,4
 .feature p{margin:0;max-width:34rem}
 .frame{margin:0;justify-self:start;max-width:100%;padding:clamp(.6rem,1.6vw,1.1rem);background:var(--navy);border-radius:1.1rem}
 .frame img{display:block;max-width:100%;height:auto;border-radius:.55rem}
-.feature.phone>img{justify-self:start;display:block;width:100%;max-width:14rem;height:auto;border-radius:1.9rem;border:.45rem solid var(--navy)}
 .also{margin:2rem 0 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2.25rem 3.5rem}
 .also dt{color:var(--navy);font-weight:750;font-size:1.2rem;line-height:1.25}
 .also 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}
 
@@ -88,10 +86,9 @@ footer p{margin:0}
   .bar nav{gap:1rem}
   .hero{padding-block:1.5rem 2rem}
   .feature{grid-template-columns:minmax(0,1fr);gap:1.25rem;padding-block:1.75rem}
-  .feature.phone>img{width:62%}
   /* A wide crop at this width is too small to read: its left part, larger. */
   .frame img.cut{width:100%;aspect-ratio:4/3;object-fit:cover;object-position:0 0}
-  .frame img.cut.bar{aspect-ratio:2.4/1}
+  .frame img.cut.player{aspect-ratio:2.4/1}
   .also{grid-template-columns:minmax(0,1fr);gap:1.75rem}
   .dial{margin-inline:-1rem}
   .scale{border-radius:0}