Docs: show the front page photograph in its own colours

The blue two-colour treatment is replaced by the photograph's own
colours, slightly darkened, under a neutral shade that keeps the text
legible.

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

docs/sass/site.scss

@@ -315,13 +315,12 @@ kbd {
   display: flex;
   flex-direction: column;
   color: #ffffff;
-  background: #06112e;
+  background: #0a0c10;
   overflow: hidden;
 }
 
-// The photograph, printed in two colours as Swiss posters printed theirs:
-// in black and white, its darks become deep navy and its lights the blue
-// of the site. A shade on the left keeps the text legible.
+// The photograph in its own colours, a little darker and calmer, with a
+// shade on the left that keeps the text legible.
 .hero-photo {
   position: absolute;
   inset: 0;
@@ -332,18 +331,17 @@ kbd {
     height: 100%;
     object-fit: cover;
     object-position: 60% 50%;
-    filter: grayscale(1) contrast(1.15) brightness(1.05);
+    filter: saturate(0.85) brightness(0.8);
   }
 }
-// Above the image: the colour, then the shade.
-.hero-tone, .hero-shade { position: absolute; inset: 0; }
-.hero-tone { background: #1f45e0; mix-blend-mode: multiply; }
 .hero-shade {
+  position: absolute;
+  inset: 0;
   background: linear-gradient(90deg,
-    rgba(5, 14, 40, 0.86) 0%,
-    rgba(5, 14, 40, 0.62) 40%,
-    rgba(5, 14, 40, 0.12) 78%,
-    rgba(5, 14, 40, 0) 100%);
+    rgba(10, 12, 16, 0.92) 0%,
+    rgba(10, 12, 16, 0.78) 35%,
+    rgba(10, 12, 16, 0.35) 65%,
+    rgba(10, 12, 16, 0.05) 100%);
 }
 .hero-copy {
   position: relative;
@@ -352,7 +350,7 @@ kbd {
   flex-direction: column;
   max-width: 820px;
   padding: 96px var(--gutter) 40px;
-  .eyebrow { color: #b8c7ff; }
+  .eyebrow { color: #c9d4ff; }
 }
 .hero-title {
   margin: 0 0 32px;
@@ -1053,7 +1051,7 @@ kbd {
 
   .hero { min-height: 0; }
   .hero-copy { padding: 64px var(--gutter) 32px; }
-  .hero-shade { background: linear-gradient(180deg, rgba(5, 14, 40, 0.55), rgba(5, 14, 40, 0.85)); }
+  .hero-shade { background: linear-gradient(180deg, rgba(10, 12, 16, 0.7), rgba(10, 12, 16, 0.9)); }
   .hero-credit { text-align: left; }
   .home-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; padding-bottom: 72px; }
   .spec { grid-template-columns: minmax(0, 1fr); }

docs/static/images/README.md

@@ -4,5 +4,5 @@
 |---|---|---|---|
 | `hero-2400.jpg`, `hero-1200.jpg` | "Fiber to the home" by Ronald Crow, https://unsplash.com/photos/a-bunch-of-yellow-and-green-wires-and-wires-8oR7XykOjk4, resized by images.unsplash.com to 2400 and 1200 pixels wide | [Unsplash License](https://unsplash.com/license): free to use; attribution not required, given on the front page | `c2bc75367507116c005e6c28773c18c4677a8255ac9887bdfe6c33de95caec27` (2400), `17712eb5701415d8faa8f5341ef145ddd17132c7bafccac033d789051bc59fa4` (1200) |
 
-The front page shows the photograph in two colours (see `.hero-photo` in
-`sass/site.scss`); the files themselves are the original colour.
+The front page shows the photograph slightly darkened, under a shade that
+keeps the text legible (see `.hero-photo` in `sass/site.scss`).

docs/templates/index.html

@@ -7,12 +7,10 @@
 {% block body %}
 <main id="main">
   <section class="hero">
-    {#- The photograph is set in two colours by the stylesheet; see .hero-photo. #}
     <div class="hero-photo" aria-hidden="true">
       <img src="{{ get_url(path='images/hero-2400.jpg') }}"
            srcset="{{ get_url(path='images/hero-1200.jpg') }} 1200w, {{ get_url(path='images/hero-2400.jpg') }} 2400w"
            sizes="100vw" alt="" decoding="async" fetchpriority="high">
-      <div class="hero-tone"></div>
       <div class="hero-shade"></div>
     </div>
     <div class="hero-copy">