Add /about page with rating system explanation

Introduces a public-facing /about page that explains the 1-3 star rating rubric with real examples pulled from the diary. Each star tier displays 3 randomly-selected, unique films (deduplicated by title to avoid rewatch duplicates).

Changes:
- New routers/about.py: GET /about queries films by stars, dedupes, randomizes
- New templates/about.html: Page with eyebrow, h1, three tier sections with example film cards, closing philosophy, and View Profile button
- main.py: Import about router, register it, add /about to public_paths in AuthMiddleware
- templates/base.html: Add About nav link after Stats
- templates/profile.html: Add About link to /tyler nav
- templates/login.html: Add About and View Profile buttons in footer, plus "Made with Lumière" repo link

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>

1 files changed, 102 insertions, 0 deletions

diff --git a/templates/about.html b/templates/about.html
new file mode 100644
index 0000000..ab64142
--- /dev/null
+++ b/templates/about.html
@@ -0,0 +1,102 @@
+{% extends "base.html" %}
+
+{% block content %}
+<section class="page-heading">
+  <p class="eyebrow">How it works</p>
+  <div class="page-heading-row">
+    <h1>Rating system</h1>
+  </div>
+</section>
+
+<div style="max-width: 900px; margin: 0 auto; padding: 0 20px; line-height: 1.7; color: var(--text);">
+  <p style="margin-bottom: 48px; color: var(--muted); font-size: 18px;">
+    This rubric is descriptive, not prescriptive — a way to read the ratings, not a formula for assigning them. Stars reflect something felt, not a checklist passed.
+  </p>
+
+  <!-- ✦ Good -->
+  <div style="margin-bottom: 56px;">
+    <h2 style="color: var(--accent); margin: 0 0 12px 0; font-size: 20px;">✦ Good</h2>
+    <p style="margin: 0 0 20px 0; color: var(--muted);">
+      Films that earned their runtime. You were engaged throughout, walked away with something — an image that lingered, a line that landed, an emotion that felt true. You'd send this to someone whose taste you understand.
+    </p>
+    {% if films_by_rating.get("1") %}
+    <p style="margin: 20px 0 12px 0; font-size: 13px; color: var(--subtle); text-transform: uppercase; letter-spacing: 0.5px;">Examples from your diary</p>
+    <div style="display: flex; gap: 16px; flex-wrap: wrap; margin-top: 12px;">
+      {% for film in films_by_rating["1"] %}
+      <div style="width: 100px; text-align: center;">
+        <div class="poster-frame" style="width: 100px; margin-bottom: 8px;">
+          {% if film.poster_url %}
+          <img src="{{ film.poster_url }}" alt="{{ film.title }} poster" loading="lazy" style="width: 100%; height: 100%; object-fit: cover;">
+          {% else %}
+          <span style="display: flex; align-items: center; justify-content: center; height: 100%; background: var(--panel); color: var(--accent); font-size: 24px; font-weight: bold;">{{ film.title[:1] }}</span>
+          {% endif %}
+        </div>
+        <p style="margin: 0 0 4px 0; font-size: 13px; line-height: 1.3; word-break: break-word;">{{ film.title }}</p>
+        {% if film.year %}<p style="margin: 0; font-size: 12px; color: var(--muted);">{{ film.year }}</p>{% endif %}
+      </div>
+      {% endfor %}
+    </div>
+    {% endif %}
+  </div>
+
+  <!-- ✦✦ Excellent -->
+  <div style="margin-bottom: 56px;">
+    <h2 style="color: var(--accent); margin: 0 0 12px 0; font-size: 20px;">✦✦ Excellent</h2>
+    <p style="margin: 0 0 20px 0; color: var(--muted);">
+      Films that stay. Something in the execution — the direction, the performances, the way it holds an idea — lifted it into a different register. Days later it's still running in the background. You don't just mention it; you push it.
+    </p>
+    {% if films_by_rating.get("2") %}
+    <p style="margin: 20px 0 12px 0; font-size: 13px; color: var(--subtle); text-transform: uppercase; letter-spacing: 0.5px;">Examples from your diary</p>
+    <div style="display: flex; gap: 16px; flex-wrap: wrap; margin-top: 12px;">
+      {% for film in films_by_rating["2"] %}
+      <div style="width: 100px; text-align: center;">
+        <div class="poster-frame" style="width: 100px; margin-bottom: 8px;">
+          {% if film.poster_url %}
+          <img src="{{ film.poster_url }}" alt="{{ film.title }} poster" loading="lazy" style="width: 100%; height: 100%; object-fit: cover;">
+          {% else %}
+          <span style="display: flex; align-items: center; justify-content: center; height: 100%; background: var(--panel); color: var(--accent); font-size: 24px; font-weight: bold;">{{ film.title[:1] }}</span>
+          {% endif %}
+        </div>
+        <p style="margin: 0 0 4px 0; font-size: 13px; line-height: 1.3; word-break: break-word;">{{ film.title }}</p>
+        {% if film.year %}<p style="margin: 0; font-size: 12px; color: var(--muted);">{{ film.year }}</p>{% endif %}
+      </div>
+      {% endfor %}
+    </div>
+    {% endif %}
+  </div>
+
+  <!-- ✦✦✦ Exceptional -->
+  <div style="margin-bottom: 56px;">
+    <h2 style="color: var(--accent); margin: 0 0 12px 0; font-size: 20px;">✦✦✦ Exceptional</h2>
+    <p style="margin: 0 0 20px 0; color: var(--muted);">
+      Films that feel necessary. They reframe how you see the medium, or the world, or both. You come back to them. You reference them without meaning to. You can't fully explain why they matter — only that they do, and probably always will.
+    </p>
+    {% if films_by_rating.get("3") %}
+    <p style="margin: 20px 0 12px 0; font-size: 13px; color: var(--subtle); text-transform: uppercase; letter-spacing: 0.5px;">Examples from your diary</p>
+    <div style="display: flex; gap: 16px; flex-wrap: wrap; margin-top: 12px;">
+      {% for film in films_by_rating["3"] %}
+      <div style="width: 100px; text-align: center;">
+        <div class="poster-frame" style="width: 100px; margin-bottom: 8px;">
+          {% if film.poster_url %}
+          <img src="{{ film.poster_url }}" alt="{{ film.title }} poster" loading="lazy" style="width: 100%; height: 100%; object-fit: cover;">
+          {% else %}
+          <span style="display: flex; align-items: center; justify-content: center; height: 100%; background: var(--panel); color: var(--accent); font-size: 24px; font-weight: bold;">{{ film.title[:1] }}</span>
+          {% endif %}
+        </div>
+        <p style="margin: 0 0 4px 0; font-size: 13px; line-height: 1.3; word-break: break-word;">{{ film.title }}</p>
+        {% if film.year %}<p style="margin: 0; font-size: 12px; color: var(--muted);">{{ film.year }}</p>{% endif %}
+      </div>
+      {% endfor %}
+    </div>
+    {% endif %}
+  </div>
+
+  <p style="margin: 48px 0 0 0; padding-top: 40px; border-top: 1px solid var(--line); color: var(--muted); font-size: 16px;">
+    The 3s resist defense. That's the point. Films you can explain with rules are just very good; the exceptional ones arrived on their own terms. The rubric exists to calibrate the 1s and 2s — the 3s took care of themselves.
+  </p>
+
+  <div style="margin-top: 60px; padding-top: 40px; padding-bottom: 60px; border-top: 1px solid var(--line); text-align: center;">
+    <a href="/tyler" class="button-link" style="display: inline-block; padding: 12px 24px; background: var(--accent); color: #0b0b0a; border-radius: 6px; text-decoration: none; font-weight: 500; font-size: 14px;">View Profile</a>
+  </div>
+</div>
+{% endblock %}