/* ==========================================================================
   MARINEDEICER.COM -- Shared CSS Design System
   Brand: Natural Waterscapes LLC
   Typography: Tahoma, 'Segoe UI', Verdana, Geneva, sans-serif (no external font imports)
   Palette: NWS Navy / Forest Green / Earth Brown / Cream / Black / White
   Accessibility: WCAG 2.1 AA-oriented focus states, ARIA-friendly landmarks, CSS-only
   responsive stacking (no JavaScript required for navigation).
   ========================================================================== */

:root {
  --color-navy: #141b45;
  --color-navy-dark: #000000;
  --color-blue: #1c4220;
  --color-blue-hover: #8f5a2a;
  --color-blue-light: #F2E5b3;
  --color-ice-bg: #F2E5b3;
  --color-bg-main: #FFFFFF;
  --color-bg-alt: #FFFFFF;
  --color-row-stripe: #FBF7EA;
  --color-text-dark: #000000;
  --color-text-muted: #141b45;
  --color-border: #8f5a2a;
  --color-border-light: #F2E5b3;

  --color-prototype-bg: #F2E5b3;
  --color-prototype-border: #8f5a2a;
  --color-prototype-text: #141b45;
  --color-notice-bg: #F2E5b3;
  --color-notice-border: #1c4220;
  --color-notice-text: #1c4220;
  --color-neutral-tag-bg: #F2E5b3;
  --color-neutral-tag-text: #141b45;

  --font-stack: Tahoma, 'Segoe UI', Verdana, Geneva, sans-serif;
  --line-height-base: 1.6;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  font-family: var(--font-stack);
  font-size: 16px;
  line-height: var(--line-height-base);
  color: var(--color-text-dark);
  background-color: var(--color-bg-alt);
  scroll-behavior: smooth;
}

body { min-height: 100vh; display: flex; flex-direction: column; }

:focus-visible { outline: 3px solid var(--color-navy); outline-offset: 2px; box-shadow: 0 0 0 6px var(--color-blue-light); }
.site-header :focus-visible, .site-footer :focus-visible, .skip-link:focus-visible {
  outline-color: #FFFFFF; box-shadow: 0 0 0 6px var(--color-navy);
}

.skip-link {
  position: absolute; top: -100px; left: 1rem;
  background: var(--color-navy); color: #FFFFFF;
  padding: 0.75rem 1.25rem; z-index: 9999;
  text-decoration: none; font-weight: bold;
  border-radius: 0 0 4px 4px; transition: top 0.2s ease;
}
.skip-link:focus { top: 0; }

.prototype-banner {
  background-color: var(--color-prototype-bg);
  border-bottom: 2px solid var(--color-prototype-border);
  color: var(--color-prototype-text);
  font-size: 0.875rem; font-weight: bold; text-align: center;
  padding: 0.6rem 1rem;
}

.site-header {
  background-color: var(--color-navy); color: #FFFFFF;
  border-bottom: 3px solid var(--color-blue);
  position: static; z-index: 1000;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
/* Only pin the header at widths where the nav resolves to a single row. */
@media (min-width: 1250px) {
  .site-header { position: sticky; top: 0; }
}
.header-inner {
  max-width: 1320px; margin: 0 auto; padding: 0.75rem 1.5rem;
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 1rem;
}
.brand-logo { text-decoration: none; color: #FFFFFF; display: flex; flex-direction: column; max-width: 230px; }
.brand-title { font-size: 1.5rem; font-weight: bold; letter-spacing: -0.5px; color: #FFFFFF; }
.brand-tagline { font-size: 0.7rem; line-height: 1.3; color: var(--color-blue-light); text-transform: uppercase; letter-spacing: 0.5px; }

.main-nav { display: flex; align-items: center; }
.nav-list { display: flex; list-style: none; gap: 0.4rem; align-items: center; flex-wrap: wrap; }
.nav-link {
  color: #F2E5b3; text-decoration: none; font-size: 0.85rem; font-weight: 600;
  padding: 0.45rem 0.5rem; border-radius: 4px; transition: background 0.2s, color 0.2s;
  white-space: nowrap; display: inline-block;
}
.nav-link:hover, .nav-link:focus { color: #FFFFFF; background-color: var(--color-blue); }
.nav-link.active { color: #FFFFFF; border-bottom: 2px solid var(--color-blue-light); }
.nav-cart-btn {
  background-color: var(--color-blue); color: #FFFFFF; padding: 0.4rem 0.85rem;
  border-radius: 4px; text-decoration: none; font-weight: bold;
  display: inline-flex; align-items: center; gap: 0.4rem;
}
.nav-cart-btn:hover { background-color: var(--color-blue-hover); }

.main-content { flex: 1; max-width: 1200px; width: 100%; margin: 2rem auto; padding: 0 1.5rem; }

h1 { font-size: 2rem; color: var(--color-navy); margin-bottom: 1rem; line-height: 1.25; }
h2 { font-size: 1.4rem; color: var(--color-navy); margin: 1.75rem 0 0.75rem 0; border-bottom: 2px solid var(--color-ice-bg); padding-bottom: 0.3rem; }
h3 { font-size: 1.15rem; color: var(--color-blue); margin: 1.25rem 0 0.5rem 0; }
p { margin-bottom: 1rem; color: var(--color-text-dark); }
ul, ol { margin-bottom: 1rem; padding-left: 1.5rem; }
li { margin-bottom: 0.35rem; }
a { color: var(--color-blue); text-decoration: underline; }
a:hover { color: var(--color-blue-hover); }

.breadcrumb-nav { display: block; margin-bottom: 1rem; font-size: 0.875rem; color: var(--color-text-muted); }

.direct-answer-box {
  background-color: var(--color-ice-bg); border-left: 5px solid var(--color-blue);
  padding: 1.25rem 1.5rem; margin: 1.5rem 0; border-radius: 0 6px 6px 0;
}
.direct-answer-box p { font-size: 1.05rem; font-weight: bold; color: var(--color-navy); margin-bottom: 0; line-height: 1.5; }

.data-provenance {
  background-color: var(--color-bg-alt); border: 1px solid var(--color-border);
  padding: 0.75rem 1rem; font-size: 0.85rem; color: var(--color-text-muted);
  border-radius: 4px; margin-top: 1.5rem;
}

.verification-note {
  background-color: var(--color-prototype-bg); border-left: 5px solid var(--color-prototype-border);
  color: var(--color-prototype-text); padding: 1rem 1.25rem; margin: 1.5rem 0;
  border-radius: 0 6px 6px 0; font-size: 0.9rem;
}
.verification-note strong { display: block; margin-bottom: 0.25rem; }

.author-box {
  border-top: 2px solid var(--color-border-light); margin-top: 2rem; padding-top: 1rem;
  font-size: 0.95rem; color: var(--color-text-muted);
}

.table-wrapper { overflow-x: auto; margin: 1.5rem 0; border: 1px solid var(--color-border); border-radius: 6px; background: #FFFFFF; }
.spec-table { width: 100%; border-collapse: collapse; text-align: left; font-size: 0.925rem; }
.spec-table th, .spec-table td { padding: 0.75rem 1rem; border-bottom: 1px solid var(--color-border-light); }
.spec-table th { background-color: var(--color-navy); color: #FFFFFF; font-weight: bold; }
.spec-table tbody tr:nth-child(even) { background-color: var(--color-row-stripe); }
.spec-table tr:hover { background-color: var(--color-ice-bg); }

.category-guidance-card {
  background: #FFFFFF; border: 1px solid var(--color-border); border-radius: 8px;
  padding: 1.5rem; margin-bottom: 2rem; box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.guidance-badge {
  display: inline-block; background-color: var(--color-navy); color: #FFFFFF;
  font-size: 0.75rem; font-weight: bold; text-transform: uppercase;
  padding: 0.25rem 0.6rem; border-radius: 3px; margin-bottom: 0.75rem;
}

.product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.5rem; margin: 2rem 0; }
.product-card {
  background: #FFFFFF; border: 1px solid var(--color-border); border-radius: 8px;
  padding: 1.25rem; display: flex; flex-direction: column; justify-content: space-between;
  box-shadow: 0 2px 4px rgba(0,0,0,0.04); transition: transform 0.2s, box-shadow 0.2s;
}
.product-card:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.08); }
.product-brand { font-size: 0.8rem; text-transform: uppercase; font-weight: bold; color: var(--color-blue); margin-bottom: 0.25rem; }
.product-title { font-size: 1.15rem; color: var(--color-navy); font-weight: bold; margin-bottom: 0.5rem; }
.product-sku { font-size: 0.8rem; color: var(--color-text-muted); margin-bottom: 0.75rem; font-family: monospace; }
.product-specs-list { font-size: 0.875rem; list-style: none; padding-left: 0; margin-bottom: 1rem; border-top: 1px solid var(--color-border-light); padding-top: 0.5rem; }
.product-specs-list li { margin-bottom: 0.25rem; color: var(--color-text-dark); }
.product-price-row { display: flex; justify-content: space-between; align-items: baseline; margin: 1rem 0 0.4rem 0; }
.product-price { font-size: 1.2rem; font-weight: bold; color: var(--color-navy); }
.price-illustrative-tag { font-size: 0.7rem; color: var(--color-text-muted); font-style: italic; display: block; margin-bottom: 0.6rem; }
.product-stock-tag {
  font-size: 0.72rem; color: var(--color-neutral-tag-text); background: var(--color-neutral-tag-bg);
  padding: 0.2rem 0.5rem; border-radius: 3px; font-weight: bold; display: inline-block;
}

.btn {
  display: inline-block; padding: 0.6rem 1.1rem; font-size: 0.925rem; font-weight: bold;
  text-align: center; text-decoration: none; border-radius: 4px; cursor: pointer;
  border: none; transition: background 0.2s ease;
}
.btn-primary-nonlive { background-color: var(--color-blue); color: #FFFFFF; width: 100%; }
.btn-primary-nonlive:hover { background-color: var(--color-blue-hover); }
.btn-secondary { background-color: var(--color-ice-bg); color: var(--color-navy); border: 1px solid var(--color-border); }
.btn-secondary:hover { background-color: var(--color-border-light); }
.non-live-badge { display: block; font-size: 0.7rem; text-align: center; color: var(--color-prototype-text); margin-top: 0.35rem; font-style: italic; }

.pillar-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.5rem; margin: 2rem 0; }
.pillar-card { background: #FFFFFF; border: 1px solid var(--color-border); border-top: 4px solid var(--color-blue); border-radius: 6px; padding: 1.25rem; }
.pillar-card h3 { margin-top: 0; }

.cart-table-wrapper { margin: 1.5rem 0; background: #FFFFFF; border: 1px solid var(--color-border); border-radius: 6px; overflow-x: auto; }
.cart-summary-card { background: #FFFFFF; border: 1px solid var(--color-border); border-radius: 6px; padding: 1.5rem; max-width: 420px; margin-left: auto; }
.cart-summary-row { display: flex; justify-content: space-between; padding: 0.5rem 0; border-bottom: 1px solid var(--color-border-light); }
.cart-summary-total { font-size: 1.2rem; font-weight: bold; color: var(--color-navy); border-bottom: none; padding-top: 0.75rem; }

.confirmation-box { background: #FFFFFF; border: 2px solid var(--color-blue); border-radius: 8px; padding: 2rem; margin: 2rem 0; }

.site-footer {
  background-color: var(--color-navy); color: #F2E5b3; padding: 3rem 1.5rem 1.5rem 1.5rem;
  margin-top: 3rem; border-top: 4px solid var(--color-blue); font-size: 0.9rem;
}
.footer-inner { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 2rem; margin-bottom: 2rem; }
.site-footer p { color: #F2E5b3; }
.footer-col h4 { color: #FFFFFF; font-size: 1.05rem; margin-bottom: 0.85rem; border-bottom: 1px solid var(--color-blue); padding-bottom: 0.35rem; }
.footer-col ul { list-style: none; padding-left: 0; }
.footer-col a { color: #F2E5b3; text-decoration: none; }
.footer-col a:hover { color: #FFFFFF; text-decoration: underline; }
.footer-credentials { background: var(--color-navy-dark); padding: 1rem; border-radius: 6px; font-size: 0.825rem; color: #F2E5b3; margin-top: 1rem; }
.footer-bottom { max-width: 1200px; margin: 0 auto; border-top: 1px solid #8f5a2a; padding-top: 1.25rem; text-align: center; font-size: 0.8rem; color: #F2E5b3; }

@media (max-width: 768px) {
  /* A sticky 8-item vertical nav consumed ~56% of a 375px viewport and stayed
     pinned while scrolling. Wrap the nav compactly instead of stacking it. */
  .header-inner { flex-direction: column; align-items: flex-start; gap: 0.6rem; padding: 0.6rem 1rem; }
  .nav-list { flex-direction: row; flex-wrap: wrap; align-items: center; width: 100%; gap: 0.4rem; }
  .nav-link, .nav-cart-btn {
    font-size: 0.8rem; padding: 0.5rem 0.55rem;
    min-height: 40px; display: inline-flex; align-items: center;
  }
  .brand-title { font-size: 1.25rem; }
  .prototype-banner { font-size: 0.72rem; line-height: 1.4; padding: 0.5rem 0.75rem; }
  .main-content { margin: 1.25rem auto; padding: 0 1rem; }
  h1 { font-size: 1.6rem; }
  .cart-summary-card { max-width: 100%; margin-left: 0; }
}

/* ==========================================================================
   CSS-ONLY SIZING CALCULATOR
   No JavaScript anywhere on this site: every crawler sees complete content in
   the initial response. Selection state rides on radio inputs and :checked
   sibling selectors, so the radios must be DIRECT children of .calc and must
   precede .calc-out -- the general-sibling combinator cannot reach into a
   fieldset. Labels bind by `for=` and can therefore sit anywhere.
   The complete 24-point matrix is also rendered as a plain always-visible
   table lower on the page, so nothing depends on these rules applying.
   ========================================================================== */
.calc { border: 1px solid var(--color-border); border-radius: 8px; padding: 1.25rem 1.5rem; margin: 1.5rem 0; background: #FFFFFF; }
.calc fieldset { border: none; margin: 0 0 1rem 0; padding: 0; }
.calc legend { font-weight: bold; color: var(--color-navy); margin-bottom: 0.5rem; padding: 0; font-size: 0.95rem; }
.calc-radio { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.calc-opts { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.calc-opt {
  display: inline-flex; align-items: center; cursor: pointer; padding: 0.55rem 0.9rem;
  font-size: 0.875rem; border: 2px solid var(--color-border); border-radius: 5px;
  background: var(--color-ice-bg); color: var(--color-navy); min-height: 40px; line-height: 1.4;
}
.calc-opt:hover { background: var(--color-border-light); }

/* selected chip */
#tb1:checked ~ fieldset label[for='tb1'],
#tb2:checked ~ fieldset label[for='tb2'],
#tb3:checked ~ fieldset label[for='tb3'],
#tb4:checked ~ fieldset label[for='tb4'],
#ma:checked  ~ fieldset label[for='ma'],
#mv:checked  ~ fieldset label[for='mv'] {
  background: var(--color-navy); color: #FFFFFF; border-color: var(--color-navy); font-weight: bold;
}
/* keyboard focus ring on the visually-hidden radio, drawn on its chip */
#tb1:focus-visible ~ fieldset label[for='tb1'],
#tb2:focus-visible ~ fieldset label[for='tb2'],
#tb3:focus-visible ~ fieldset label[for='tb3'],
#tb4:focus-visible ~ fieldset label[for='tb4'],
#ma:focus-visible  ~ fieldset label[for='ma'],
#mv:focus-visible  ~ fieldset label[for='mv'] {
  outline: 3px solid var(--color-navy); outline-offset: 2px; box-shadow: 0 0 0 6px var(--color-blue-light);
}

.calc-out > .calc-result { display: none; }
.calc-out > .calc-fallback { display: block; }
/* temperature band x mount orientation -> exactly one visible result panel */
#tb1:checked ~ #ma:checked ~ .calc-out > .r-tb1-ma,
#tb2:checked ~ #ma:checked ~ .calc-out > .r-tb2-ma,
#tb3:checked ~ #ma:checked ~ .calc-out > .r-tb3-ma,
#tb4:checked ~ #ma:checked ~ .calc-out > .r-tb4-ma,
#tb1:checked ~ #mv:checked ~ .calc-out > .r-tb1-mv,
#tb2:checked ~ #mv:checked ~ .calc-out > .r-tb2-mv,
#tb3:checked ~ #mv:checked ~ .calc-out > .r-tb3-mv,
#tb4:checked ~ #mv:checked ~ .calc-out > .r-tb4-mv { display: block; }
#tb1:checked ~ .calc-out > .calc-fallback,
#tb2:checked ~ .calc-out > .calc-fallback,
#tb3:checked ~ .calc-out > .calc-fallback,
#tb4:checked ~ .calc-out > .calc-fallback { display: none; }

.calc-result h3 { margin-top: 0; }
.calc-note { font-size: 0.85rem; color: var(--color-text-muted); margin-top: 0.75rem; }

/* ==========================================================================
   ON-PAGE NAVIGATION (for consolidated long-form pages)
   Long single-intent pages beat several thin ones for the same query, but only
   if a phone user can still get around. This block is the trade: a jump list at
   the top, and heading offsets so an anchor never lands underneath the sticky
   header. Header stickiness only applies at >=1250px, so the offset does too.
   ========================================================================== */
.toc {
  background: var(--color-ice-bg); border: 1px solid var(--color-border);
  border-radius: 6px; padding: 1rem 1.25rem; margin: 1.5rem 0;
}
.toc h2 {
  font-size: 0.95rem; margin: 0 0 0.6rem 0; border-bottom: none; padding-bottom: 0;
  text-transform: uppercase; letter-spacing: 0.5px; color: var(--color-navy);
}
.toc ol { list-style: none; padding-left: 0; margin: 0; columns: 2; column-gap: 2rem; }
.toc li { margin-bottom: 0.4rem; break-inside: avoid; }
.toc a { color: var(--color-navy); text-decoration: none; font-size: 0.9rem; border-bottom: 1px solid transparent; }
.toc a:hover, .toc a:focus { border-bottom-color: var(--color-navy); }
/* Keep two columns even on a phone -- with short labels a 10-item list is
   ~230px instead of ~470px, which is the difference between a usable jump
   list and a screenful of nav before any content. */
@media (max-width: 640px) {
  .toc { padding: 0.85rem 1rem; }
  .toc ol { columns: 2; column-gap: 1rem; }
  .toc a { display: flex; align-items: center; min-height: 40px; font-size: 0.82rem; }
}

/* anchor landing offset -- only where the header actually pins */
@media (min-width: 1250px) {
  .main-content h2[id], .main-content h3[id] { scroll-margin-top: 110px; }
}
@media (max-width: 1249px) {
  .main-content h2[id], .main-content h3[id] { scroll-margin-top: 1rem; }
}

/* a heading that is a jump target gets a quiet self-link on hover */
.main-content h2[id] { position: relative; }
.section-top {
  font-size: 0.78rem; font-weight: normal; text-transform: none; letter-spacing: 0;
  margin-left: 0.6rem; text-decoration: none; color: var(--color-text-muted);
  opacity: 0; transition: opacity 0.15s;
}
h2:hover .section-top, .section-top:focus { opacity: 1; }

/* ==========================================================================
   FIGURES
   width/height are set on every <img> so the browser reserves the box before
   the file arrives -- no layout shift. WebP with a JPEG fallback via <picture>;
   both are plain HTML, nothing here needs JavaScript.
   ========================================================================== */
.figure { margin: 1.75rem 0; border: 1px solid var(--color-border); border-radius: 6px; overflow: hidden; background: #FFFFFF; }
.figure img { display: block; width: 100%; height: auto; }
.figure figcaption {
  font-size: 0.85rem; color: var(--color-text-muted); padding: 0.7rem 1rem;
  border-top: 1px solid var(--color-border-light); background: var(--color-bg-alt); line-height: 1.5;
}
.figure .credit { display: block; margin-top: 0.25rem; font-style: italic; font-size: 0.78rem; }

/* ==========================================================================
   STRATIFICATION FIGURE  (/guide/how-they-work/)
   The water column is ONE continuous gradient, not banded fills, because the
   real winter profile is continuous. Ice is never drawn from the thermal ramp.
   Brand colours appear only on the de-icer rig and its dock hardware, so the
   scene reads as temperature everywhere else.

   Every scroll-linked effect is a pure function of --p, published by
   /js/film.js. --p defaults to 1 here, so with JavaScript stripped, blocked,
   or suppressed by prefers-reduced-motion the figure renders fully drawn.
   ========================================================================== */
.film {
  --p: 1;
  --t1: #37717E; --t2: #457C87; --t3: #668586; --t4: #958979;
  --t5: #B29064; --t6: #CA9854; --t7: #E2A044;
  --ice-body: #8AA4AD; --ice-rim: #C9DDE6; --ice-line: #24414A;
  --bed: #4E4B44; --film-sky: #E9EFF2; --film-ink: #101619;
  --flow-warm: #F5714F; --flow-mid: #B4506E;
  --rig-body: #141b45; --rig-line: #F2E5b3; --rig-accent: #1c4220;
  --rig-spec: #FBF7EA; --rig-hw: #8f5a2a; --rig-grip: #3E8FBF; --dock: #3A3833;
}
.film svg { display: block; width: 100%; height: auto; }

.film .s1 { stop-color: var(--t1); } .film .s2 { stop-color: var(--t2); }
.film .s3 { stop-color: var(--t3); } .film .s4 { stop-color: var(--t4); }
.film .s5 { stop-color: var(--t5); } .film .s6 { stop-color: var(--t6); }
.film .s7 { stop-color: var(--t7); }
.film .cw { stop-color: #FFFFFF; } .film .ck { stop-color: var(--film-ink); }
.film .fw { stop-color: var(--flow-warm); } .film .fm { stop-color: var(--flow-mid); }

.film .water { fill: url(#film-ramp); }
.film .sky { fill: var(--film-sky); }
.film .bed { fill: var(--bed); }
.film .iceBody { fill: var(--ice-body); }
.film .iceRim { fill: var(--ice-rim); }
.film .iceLine { stroke: var(--ice-line); fill: none; }
.film .dock { fill: var(--dock); }
.film .ink { fill: var(--film-ink); }
.film .inkS { stroke: var(--film-ink); fill: none; }
.film .rigBody { fill: var(--rig-body); }
.film .rigLine { stroke: var(--rig-line); fill: none; }
.film .rigAcc { fill: var(--rig-accent); }
.film .rigSpec { fill: var(--rig-spec); }
.film .rigHw { fill: var(--rig-hw); }
.film .rigHwS { stroke: var(--rig-hw); fill: none; }
.film .case { stroke: url(#film-casing); fill: none; stroke-linecap: round; }
.film .lim { fill: none; stroke-linecap: round; }
.film .mono { font-family: ui-monospace, Consolas, 'DejaVu Sans Mono', monospace; }
.film .sans { font-family: var(--font-stack); }

/* Ambient motion: each limb marches in its own direction of travel. Nothing
   moves here that the circulation does not actually do. */
.film .fl { stroke-dasharray: 13 11; }
.film .draw   { animation: film-march 3.4s linear infinite; }
.film .rise   { animation: film-march 2.6s linear infinite; }
.film .spread { animation: film-march 3.2s linear infinite; }
.film .well   { animation: film-march 6s linear infinite; }
@keyframes film-march { to { stroke-dashoffset: -48; } }
.film .shim { animation: film-shim 5.5s ease-in-out infinite; transform-origin: 585px 170px; }
@keyframes film-shim {
  0%, 100% { opacity: 0.5; transform: scaleX(1); }
  50%      { opacity: 0.9; transform: scaleX(1.04); }
}

/* Scroll-linked, all driven off the single playhead. The column fills from the
   surface down as you descend it; the limbs arrive in the order the water
   actually travels — entrained first, lifted, then spread. */
.film .reveal rect { height: calc(495px * var(--p)); }
.film .well   { opacity: clamp(0, calc((var(--p) - 0.06) * 7), 1); }
.film .draw   { opacity: clamp(0, calc((var(--p) - 0.16) * 7), 1); }
.film .rise   { opacity: clamp(0, calc((var(--p) - 0.30) * 7), 1); }
.film .spread { opacity: clamp(0, calc((var(--p) - 0.44) * 7), 1); }
.film .curve  { stroke-dasharray: 640; stroke-dashoffset: calc(640px * (1 - var(--p))); }

@media (prefers-reduced-motion: reduce) {
  .film .draw, .film .rise, .film .spread, .film .well, .film .shim { animation: none; }
}
@media (max-width: 900px) {
  .film figcaption { font-size: 0.8rem; }
}