@import url('./landing.css');

/* Solipsium for film (September 28, 2026). The home page's bands, type and gold, with
   room around every block: the owner found the home page a little crowded. The badge is
   the owner's drawing, redrawn by scripts/badge_images.py; this page only places it, at
   or above the smallest sizes its kit allows (240 pixels wide for the full badge, 140
   for the compact one). Spacing keeps to steps of 8 pixels. */

/* The first screen: tall enough to feel like a title card, short enough that the next
   band shows at its foot, so the page does not look finished. */
.film-hero { display:grid; align-content:center; min-height:min(88svh,820px); }
.film-hero .hero-offer { margin:0; color:var(--snow-2); font-weight:450; }
/* The label sits on the brightest part of the light, so it takes the lightest ivory
   (landing.css's grey measured 2.95:1 there; this is over 5:1, checked by the film test). */
.film .hero-eyebrow { color:var(--snow); }

/* What it repairs: the home page's white cards, with no drawing under the words. */
.film-repairs .fix { padding-bottom:32px; }
.film-limits { margin:32px 0 0; color:var(--coal-2); font-size:17px; }

/* How it differs: three rows, one real scan, then the one number in a dark card. */
.film-log { margin:56px 0 0; padding:32px; border-radius:24px; background:var(--card); box-shadow:inset 0 0 0 1px var(--hair); }
/* The time column in pixels, so the labels and the rows (set at different sizes) share
   it; the last column then starts where the section heads' paragraphs do, at 1280. */
.film-log-head,.film-log li { display:grid; grid-template-columns:200px minmax(0,.84fr) minmax(0,1fr); gap:24px; align-items:baseline; }
.film-log-head { margin:0; padding-bottom:16px; border-bottom:1px solid var(--hair); color:var(--coal-2); font-size:13px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; }
.film-log ol { margin:0; padding:0; list-style:none; }
.film-log li { padding:16px 0; border-bottom:1px solid var(--hair); color:var(--coal); font-size:16px; line-height:1.45; }
.film-log .log-time { color:var(--coal-2); font-size:15px; font-variant-numeric:tabular-nums; white-space:nowrap; }
.film-log figcaption { max-width:52em; margin-top:24px; color:var(--coal-2); font-size:14px; line-height:1.5; text-wrap:pretty; }
.film-stat { display:grid; grid-template-columns:auto minmax(0,1fr); gap:8px 48px; align-items:start; margin-top:56px; padding:40px 48px; }
.film-stat .stat-value { grid-row:span 2; }
.film-stat .stat-compare { max-width:44em; margin:8px 0 0; line-height:1.5; }
.film-stat figcaption { max-width:52em; margin:0; padding-top:8px; color:var(--snow-3); font-size:14px; }

/* The credit: an end-credit card drawn at the width of a scope frame, pure black with
   the ivory badge and its line, the way the kit's rules place it. */
.credit-roll { margin:0; }
.credit-frame { display:grid; place-content:center; justify-items:center; gap:clamp(16px,2.4vw,32px); aspect-ratio:2.39/1; padding:32px 24px; background:#000; box-shadow:inset 0 0 0 1px var(--hair-dark); }
.credit-frame picture { display:contents; }
.credit-badge { display:block; width:clamp(240px,27%,340px); height:auto; }
.credit-notice { margin:0; color:var(--snow-3); font-size:12px; letter-spacing:.02em; }
.credit-roll figcaption { margin-top:16px; color:var(--snow-3); font-size:14px; text-align:center; }
.credit-word { max-width:40em; margin:40px auto 0; color:var(--snow-2); font-size:17px; line-height:1.55; text-align:center; text-wrap:pretty; }

/* Using the badge: each version on the background it is made for, never below its
   smallest size, then the rules beside the kit. */
.kit-versions { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr)); gap:16px; margin:0; padding:0; list-style:none; }
.kit-versions li { margin:0; }
.kit-versions p { margin:12px 0 0; color:var(--coal-2); font-size:14px; line-height:1.5; }
.kit-tile { display:grid; place-items:center; aspect-ratio:3/2; padding:20px; background:var(--night); box-shadow:inset 0 0 0 1px var(--hair); }
.kit-tile-light { background:var(--card); }
.kit-tile img { display:block; width:min(260px,100%); height:auto; }
.kit-columns { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:32px 72px; align-items:start; margin-top:64px; }
.kit-columns h3 { margin:0 0 16px; font-size:21px; line-height:1.2; font-weight:600; letter-spacing:-.012em; }
.kit-rules ul { margin:0; padding:0; list-style:none; border-top:1px solid var(--hair); }
.kit-rules li { padding:16px 0; border-bottom:1px solid var(--hair); color:var(--coal); font-size:17px; line-height:1.5; text-wrap:pretty; }
.kit-download { padding:32px; border-radius:24px; background:var(--card); box-shadow:inset 0 0 0 1px var(--hair); }
.kit-download p { margin:0 0 16px; color:var(--coal-2); font-size:16px; line-height:1.55; text-wrap:pretty; }
.kit-download .kit-size { margin:8px 0 0; font-size:14px; }
.kit-download > :last-child { margin-bottom:0; }
/* The address stands on a line of its own, so the sentence before it reads whole even
   where no address is configured (app/public_files.py puts a sentence in its place). */
.film-mail a { display:inline-flex; align-items:center; min-height:44px; color:var(--accent-ink); font-weight:500; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; overflow-wrap:anywhere; }
.kit-download .film-mail { margin:-8px 0 8px; }

/* What it does not do yet: plain rows with hairlines, like the questions on the home
   page, starting on the same left edge as every other section. */
.not-yet { max-width:40em; margin:40px 0 0; padding:0; list-style:none; border-top:1px solid var(--hair); }
.not-yet li { padding:16px 0; border-bottom:1px solid var(--hair); color:var(--coal); font-size:17px; line-height:1.5; text-wrap:pretty; }
.not-yet-studios { max-width:40em; margin:32px 0 0; color:var(--coal-2); font-size:17px; line-height:1.55; }
#not-yet .film-mail { margin:0; font-size:17px; }

/* The close ends on its invitation: this page has no cat, so no ledge for one. */
.film .closing { padding-bottom:150px; }

/* The shared navigation and footer, held to this page's floors: nothing under 12 pixels,
   and every footer link at least 44 pixels wide as well as tall. */
.film .brand-alpha { font-size:12px; }
.film .footer-brand .trademark { font-size:12px; }
.film .footer-links a { min-width:44px; }

/* On a laptop the first screen leaves room for the next band at its foot, and every
   right-hand column starts on the same line as the section heads' paragraphs. Kept above
   phone widths: landing.css's phone rules come earlier and would lose to these. */
@media (min-width:701px) {
  .film-hero { padding:calc(96px + env(safe-area-inset-top)) 0 40px; }
  .film-hero .hero-actions { margin-top:32px; }
}
@media (min-width:821px) {
  .film .workflow-steps article { grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:72px; }
  .kit-rules { padding-top:32px; }
}
@media (max-width:820px) {
  .kit-columns { grid-template-columns:minmax(0,1fr); }
}
/* A phone: a shorter headline so it sets in three lines, the scan as stacked rows, and
   the end-credit card with the compact badge. */
@media (max-width:700px) {
  .film-hero { min-height:0; }
  .film #hero-title { font-size:42px; }
  .film .hero-eyebrow { font-size:13px; letter-spacing:.14em; }
  .film-repairs .fix { padding:24px; }
  .film-limits { margin-top:8px; }
  .film-log { margin-top:40px; padding:24px; }
  .film-log-head { display:none; }
  .film-log li { grid-template-columns:minmax(0,1fr); gap:4px; }
  .film-log li:first-child { padding-top:0; }
  .film-log .log-found { font-weight:600; }
  .film-log .log-done { color:var(--coal-2); }
  .film-stat { grid-template-columns:minmax(0,1fr); margin-top:40px; padding:24px; }
  .film-stat .stat-value { grid-row:auto; }
  .credit-frame { aspect-ratio:auto; min-height:220px; }
  .credit-badge { width:clamp(180px,62%,220px); }
  .credit-word { margin-top:32px; text-align:left; }
  .kit-tile { aspect-ratio:2/1; padding:16px; }
  .kit-download { padding:24px; }
  .kit-download .pill { width:100%; }
  .film .closing { padding-bottom:110px; }
}