/* ============================================================
   Out of Range — base styles

   Palette roles, so accents stay meaningful rather than decorative:
     cream   page background
     beige   raised surfaces — panels, cards, legend band, footer
     birch   headings and primary text
     sage    the site's own voice: labels, links, selected states
     rust    signal — lit meter bars, outbound buttons, warning flags

   --sage and the two -soft tints are decorative only. They do not meet
   text contrast on cream; use --sage-deep / --rust-deep for anything read.
   ============================================================ */

:root{
  /* surfaces */
  --cream:#fbf7ee;
  --beige-soft:#f6efe0;
  --beige:#eee3cf;
  --beige-2:#e3d5ba;
  --line:#d3c5a5;

  /* ink */
  --birch:#1e3328;
  --lichen:#546a56;
  --lichen-dim:#5b6956;

  /* sage — -deep is tuned to clear 4.5:1 on --beige, not just on --cream,
     since panels, the legend band and the footer all sit on beige */
  --sage:#8a9a7b;
  --sage-deep:#576a4d;
  --sage-soft:#e7ecdf;

  /* burnt orange — -lit is the only tone that reads on footage rather
     than on cream, so it lives on the film band and nowhere else */
  --rust:#b5502a;
  --rust-deep:#96482c;
  --rust-soft:#f6e2d6;
  --rust-lit:#f0b48f;

  --maxw:1180px;

  /* One grain, used on the page and again inside every picture frame.
     It is what makes a 500px photograph and a flat vector drawing read
     as the same object: they share a surface. Kept under .05 opacity —
     you should not be able to name it, only miss it when it's gone. */
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--cream);color:var(--birch);font-family:'Inter',system-ui,-apple-system,sans-serif;
  font-weight:300;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body::after{content:"";position:fixed;inset:0;z-index:9999;pointer-events:none;
  background-image:var(--grain);opacity:.03;mix-blend-mode:multiply}
@media print{body::after{display:none}}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}
.mono{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:.68rem;
  letter-spacing:.12em;text-transform:uppercase;font-weight:400}
a{color:inherit}
:focus-visible{outline:2px solid var(--sage-deep);outline-offset:3px;border-radius:2px}
img{max-width:100%}

.skip{position:absolute;left:-9999px;top:0;background:var(--birch);color:var(--cream);
  padding:12px 18px;z-index:100;text-decoration:none;font-size:.85rem}
.skip:focus{left:8px;top:8px}

/* ── masthead ─────────────────────────────────────────── */
.masthead{border-bottom:1px solid var(--line);padding:16px 0;position:sticky;top:0;z-index:40;
  background:rgba(251,247,238,.92);backdrop-filter:blur(12px)}
.masthead .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.wordmark{font-family:'Fraunces',Georgia,serif;font-variation-settings:'SOFT' 40,'WONK' 1;
  font-size:1.15rem;font-weight:600;letter-spacing:-.01em;text-decoration:none;white-space:nowrap}
.wordmark span{color:var(--rust-deep)}
.nav{display:flex;gap:22px;align-items:center;flex-wrap:wrap}
.nav a{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:.68rem;letter-spacing:.12em;
  text-transform:uppercase;text-decoration:none;color:var(--lichen-dim);
  padding-bottom:3px;border-bottom:2px solid transparent;transition:color .18s,border-color .18s}
.nav a:hover{color:var(--sage-deep)}
.nav a[aria-current="page"]{color:var(--birch);border-bottom-color:var(--rust)}

/* ── hero ─────────────────────────────────────────────── */
/* The h1 lives on the film band now, so this reads as the deck under
   a title card: eyebrow, standfirst, meter — no heading of its own. */
.hero{padding:76px 0 78px}
.hero-grid{display:grid;grid-template-columns:1fr auto;gap:56px;align-items:end}
.eyebrow{color:var(--sage-deep);margin-bottom:26px;display:block}
.hero .eyebrow{margin-bottom:0}
/* One sentence, set large. It used to be a four-line paragraph, which is
   a lot of reading to meet before the first picture. */
.hero .standfirst{margin-top:20px;font-size:clamp(1.25rem,2.6vw,1.7rem);max-width:20ch;
  color:var(--birch);line-height:1.34;font-weight:300;letter-spacing:-.012em}
.hero .standfirst strong{font-weight:400;color:var(--rust-deep)}
h1{font-family:'Fraunces',Georgia,serif;font-variation-settings:'SOFT' 30,'WONK' 1;font-weight:400;
  font-size:clamp(2.2rem,6vw,4.4rem);line-height:1.02;letter-spacing:-.025em;max-width:14ch}
h1 em{font-style:italic;font-variation-settings:'SOFT' 60,'WONK' 1;color:var(--rust-deep)}
.standfirst{margin-top:28px;max-width:48ch;color:var(--lichen);font-size:1.02rem;line-height:1.68}
.standfirst strong{color:var(--birch);font-weight:500}

.meter{display:flex;align-items:flex-end;gap:3px}
.meter i{display:block;width:6px;border-radius:1px;background:var(--line);
  transition:background .5s ease;transform-origin:bottom}
.meter i:nth-child(1){height:22%} .meter i:nth-child(2){height:40%}
.meter i:nth-child(3){height:58%} .meter i:nth-child(4){height:78%}
.meter i:nth-child(5){height:100%}
.meter i.live{background:var(--rust)}
.meter-lg{height:120px} .meter-lg i{width:15px}
.hero-meter{text-align:right}
.hero-meter .mono{display:block;margin-top:14px;color:var(--lichen-dim);line-height:2}
.hero-meter .mono b{color:var(--rust-deep);font-weight:500}

/* ── hero / title page ─────────────────────────────────────
   The photographs are the title page: they run full-bleed behind the site
   name and its one-line promise. A heavy left-and-bottom scrim plus the
   site grain keep the type legible and turn the ~500px sources' softness
   into atmosphere rather than a flaw. The current photo is named along the
   foot, with its attribution, and links through to its entry. */
.hero-show{position:relative;isolation:isolate;overflow:hidden;background:var(--birch);
  display:flex;align-items:center;min-height:clamp(500px,74vh,720px)}
.hero-media{position:absolute;inset:0;z-index:0}
.hero-media .slides{position:absolute;inset:0}
.hero-media .slide{position:absolute;inset:0;opacity:0;visibility:hidden;
  transition:opacity 1100ms ease,visibility 0s linear 1100ms}
.hero-media .slide.is-on{opacity:1;visibility:visible;transition:opacity 1100ms ease,visibility 0s}
.hero-media .slide img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:saturate(.58) contrast(1.05) brightness(.9)}
/* The scrim is pulled back to the left third now that the title sits in a
   narrow left column — it clears by ~58% so the right of every photograph is
   left to speak for itself. The bottom band that keeps the foot label legible
   is unchanged. */
.slide-wash{position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(96deg,rgba(20,34,26,.86) 0%,rgba(20,34,26,.44) 30%,rgba(20,34,26,0) 58%),
    linear-gradient(0deg,rgba(20,34,26,.7) 0%,rgba(20,34,26,0) 42%),
    var(--grain);
  background-blend-mode:normal,normal,soft-light}

/* the name and the promise, vertically centred */
.hero-caption{position:relative;z-index:2;color:var(--cream);padding:44px 0 92px}
.hero-caption .eyebrow{color:rgba(251,247,238,.82);margin-bottom:20px}
.hero-title{font-family:'Fraunces',Georgia,serif;font-variation-settings:'SOFT' 24,'WONK' 1;
  font-weight:400;line-height:.92;letter-spacing:-.022em;margin:0;
  font-size:clamp(3.4rem,10.5vw,7.2rem);text-shadow:0 6px 44px rgba(12,20,15,.45)}
.hero-title span{color:var(--rust-lit)}
.hero-tag{margin:26px 0 0;max-width:22ch;font-family:'Fraunces',Georgia,serif;
  font-weight:300;font-size:clamp(1.2rem,2.5vw,1.85rem);line-height:1.28;
  color:rgba(251,247,238,.9);text-shadow:0 2px 18px rgba(12,20,15,.5)}
.hero-tag strong{font-weight:500;color:var(--cream)}

/* Pin the name and promise to a narrow column hugging the left, so the photo
   behind them keeps its right two-fifths. Only above phone width — a phone
   gets the full-width caption from the 560px block below. */
@media (min-width:701px){
  .hero-show .hero-caption{max-width:min(660px,58%);margin-left:0;margin-right:auto;
    padding-left:clamp(28px,4.5vw,60px);padding-right:24px}
}

/* foot: the current photo named, its credit, and the frame dots */
.slide-bar{position:absolute;left:0;right:0;bottom:44px;z-index:3;
  display:flex;align-items:flex-end;justify-content:space-between;gap:22px}
.slide-tag{display:flex;align-items:center;gap:12px;max-width:66%;
  color:var(--cream);text-decoration:none}
.slide-tag .meter{height:20px;flex:none}
.slide-tag .meter i{background:rgba(251,247,238,.32)}
.slide-tag .meter i.live{background:var(--rust-lit)}
.slide-tag-txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.slide-tag-txt b{font-family:'Fraunces',Georgia,serif;font-weight:500;font-size:1.08rem;
  letter-spacing:-.01em;line-height:1.15;text-shadow:0 1px 6px rgba(12,20,15,.6);
  border-bottom:1.5px solid transparent;transition:border-color .18s;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.slide-tag:hover .slide-tag-txt b{border-bottom-color:var(--rust-lit)}
.slide-tag-txt span{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:.58rem;
  letter-spacing:.07em;text-transform:uppercase;color:rgba(251,247,238,.8);
  text-shadow:0 1px 4px rgba(12,20,15,.7);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.slide-credit{margin:0;max-width:32%;text-align:right;flex:none;
  font-family:'JetBrains Mono',ui-monospace,monospace;font-size:.56rem;letter-spacing:.03em;
  color:rgba(251,247,238,.6);text-shadow:0 1px 3px rgba(12,20,15,.75)}
.slide-credit a{color:rgba(251,247,238,.82);text-decoration:none;
  border-bottom:1px solid rgba(251,247,238,.26)}
.slide-credit a:hover{color:var(--cream);border-bottom-color:var(--cream)}
.slide-dots{position:absolute;left:0;right:0;bottom:20px;z-index:3;
  display:flex;justify-content:center;flex-wrap:wrap;gap:8px}
.dot{width:7px;height:7px;padding:0;border:0;border-radius:50%;cursor:pointer;
  background:rgba(251,247,238,.38);transition:background .2s ease,transform .2s ease}
.dot:hover{background:rgba(251,247,238,.72)}
.dot.is-on{background:var(--rust-lit);transform:scale(1.3)}

/* ── popular: resort-destination carousel under the title page ──
   A horizontal filmstrip of the best-known resorts we hold photos of. It
   sits between the title page and the grade key, all on cream, so it reads
   as a lighter, separate beat after the full-bleed hero above it. */
.popular{padding:44px 0 40px}
.popular-head{display:flex;align-items:flex-end;gap:16px 20px;flex-wrap:wrap;margin-bottom:22px}
.popular-head .eyebrow{color:var(--sage-deep);margin-bottom:0;flex-basis:100%}
.popular-title{font-family:'Fraunces',Georgia,serif;font-variation-settings:'SOFT' 40,'WONK' 1;
  font-weight:500;font-size:clamp(1.4rem,3vw,2rem);letter-spacing:-.015em;line-height:1.1;
  color:var(--birch);margin-right:auto}
.popular-arrows{display:flex;gap:8px;flex:none}
.popular-arrow{width:40px;height:40px;border-radius:50%;border:1px solid var(--line);
  background:var(--beige-soft);color:var(--sage-deep);font-size:1.35rem;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:background .18s,border-color .18s,color .18s}
.popular-arrow:hover{border-color:var(--sage-deep);background:var(--sage-deep);color:var(--cream)}

.popular-track{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;
  scroll-behavior:smooth;padding-bottom:4px;scrollbar-width:none;-ms-overflow-style:none}
.popular-track::-webkit-scrollbar{display:none}
.popular-card{position:relative;isolation:isolate;flex:0 0 clamp(240px,32%,320px);
  aspect-ratio:3/2;border-radius:5px;overflow:hidden;scroll-snap-align:start;text-decoration:none;
  background:var(--beige);box-shadow:0 1px 0 rgba(30,51,40,.06),0 18px 30px -26px rgba(30,51,40,.55)}
.popular-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:saturate(.66) contrast(1.04);
  transition:transform 700ms cubic-bezier(.2,.8,.2,1),filter 500ms ease}
.popular-card:hover img{transform:scale(1.04);filter:saturate(1) contrast(1)}
.popular-wash{position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(0deg,rgba(20,34,26,.82) 0%,rgba(20,34,26,.2) 42%,rgba(20,34,26,0) 64%),
    var(--grain);
  background-blend-mode:normal,soft-light}
.popular-cap{position:absolute;left:14px;right:14px;bottom:13px;display:flex;flex-direction:column;
  gap:5px;color:var(--cream)}
.popular-cap .meter{height:16px}
.popular-cap .meter i{width:4px;background:rgba(251,247,238,.34)}
.popular-cap .meter i.live{background:var(--rust-lit)}
.popular-cap b{font-family:'Fraunces',Georgia,serif;font-weight:500;font-size:1.05rem;line-height:1.16;
  letter-spacing:-.01em;text-shadow:0 1px 6px rgba(12,20,15,.6);
  border-bottom:1.5px solid transparent;transition:border-color .18s}
.popular-card:hover .popular-cap b{border-bottom-color:var(--rust-lit)}
.popular-cap span{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:.58rem;letter-spacing:.06em;
  text-transform:uppercase;color:rgba(251,247,238,.85);text-shadow:0 1px 4px rgba(12,20,15,.7)}
@media (prefers-reduced-motion:reduce){.popular-track{scroll-behavior:auto}}

/* ── legend ───────────────────────────────────────────────
   A key, not a chapter. Five marks reading left to right, each one
   line deep. The full definitions live on the method page. */
.legend{background:var(--beige);border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);padding:22px 0}
.legend .wrap{display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap}
.grades{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:26px;flex:1 1 620px}
.grade-def{display:flex;flex-direction:column;gap:7px}
.grade-def .meter{height:17px} .grade-def .meter i{width:3px}
.grade-def h3{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:.68rem;letter-spacing:.07em;
  font-weight:500;color:var(--sage-deep)}
.grade-def p{font-size:.76rem;color:var(--lichen);line-height:1.4}
/* Grades warm up as the signal comes back — sage at D5, rust at D1 */
.grade-def.g2 h3,.grade-def.g1 h3{color:var(--rust-deep)}
.legend-more{color:var(--sage-deep);text-decoration:none;white-space:nowrap;
  border-bottom:1px solid var(--sage);padding-bottom:3px}
.legend-more:hover{color:var(--rust-deep);border-bottom-color:var(--rust)}

/* ── interlude ────────────────────────────────────────────
   A full-bleed drawn horizon between the key and the survey, so the
   reader meets a picture before meeting a wall of controls. Vector,
   because every photograph in the dataset is 500px wide and would
   come apart at this size — and because a real photograph here would
   be showing a place this page is not actually talking about. */
.interlude{position:relative;isolation:isolate;overflow:hidden;
  height:clamp(230px,30vw,340px);background:var(--birch);display:grid;align-items:center}
.interlude-plate{position:absolute;inset:0}
.interlude-plate svg{width:100%;height:100%;display:block}
.interlude-veil{position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(0deg,var(--cream) 0 4%,rgba(251,247,238,0) 22%),
    linear-gradient(90deg,rgba(20,34,26,.62) 0%,rgba(20,34,26,.22) 46%,rgba(20,34,26,0) 72%),
    var(--grain);
  background-blend-mode:normal,normal,soft-light}
.interlude-line{position:relative;color:var(--cream);max-width:var(--maxw);
  font-family:'Fraunces',Georgia,serif;font-variation-settings:'SOFT' 40,'WONK' 1;font-weight:400;
  font-size:clamp(1.35rem,3.1vw,2.3rem);line-height:1.22;letter-spacing:-.02em;
  text-shadow:0 1px 2px rgba(12,20,15,.5),0 8px 34px rgba(12,20,15,.45)}
.interlude-line em{display:block;font-style:italic;color:var(--rust-lit);
  font-variation-settings:'SOFT' 60,'WONK' 1}

/* ── survey layout ────────────────────────────────────────
   The filters used to stand permanently open in a 250px rail: five
   groups, one of them 28 regions wide, roughly sixty controls facing
   the reader before a single property did. They are now one line —
   search, grade, and a button for the rest — sitting above a full-width
   grid of pictures. Everything is still one click away; none of it
   greets you. */
/* Two columns: a filter rail that stays put as you scroll, and the gallery.
   The rail's grid item is left to stretch to the full row height (the default
   — do NOT set align-items:start here, or the item shrink-wraps its content
   and the sticky inner has no room to travel down the gallery). Its inner
   block is what actually sticks. */
.survey-layout{display:grid;grid-template-columns:212px minmax(0,1fr);
  gap:44px;padding-top:30px}
.survey-rail{grid-column:1;min-width:0}
.rail-inner{position:sticky;top:80px;display:flex;flex-direction:column;gap:26px}
.survey-results{grid-column:2;min-width:0}

/* ── filter rail ─────────────────────────────────────────── */
.rail-search label{display:block;color:var(--sage-deep);margin-bottom:9px}
.survey-rail .search{flex:none;max-width:none}
.rail-group h2{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:.66rem;
  letter-spacing:.12em;text-transform:uppercase;font-weight:500;color:var(--sage-deep);
  margin-bottom:9px}
.opt-list{display:flex;flex-direction:column;gap:1px}
.opt{display:flex;align-items:center;gap:11px;width:100%;text-align:left;cursor:pointer;
  background:none;border:none;border-radius:4px;padding:7px 9px;
  font-family:'Inter',system-ui,sans-serif;font-size:.9rem;font-weight:300;
  color:var(--lichen);transition:background .16s ease,color .16s ease}
.opt:hover{background:var(--beige-soft);color:var(--birch)}
.opt[aria-pressed="true"]{background:var(--sage-soft);color:var(--birch);font-weight:500}
.opt .meter{height:14px;flex:none}
.opt .meter i{width:3px}
.opt-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rail-reset{align-self:start;padding:2px 0}

.filter-rail{position:sticky;top:57px;z-index:30;padding:14px 0 16px;
  background:linear-gradient(var(--cream) 78%,rgba(251,247,238,0));
  margin-bottom:14px}
.rail-bar{display:flex;align-items:center;gap:14px 18px;flex-wrap:wrap}
.rail-toggle{display:inline-flex;align-items:center;gap:8px;cursor:pointer;margin-left:auto;
  background:none;border:none;border-bottom:1px solid var(--line);color:var(--lichen-dim);
  padding:6px 2px;font:inherit;font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;
  max-width:min(340px,100%);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rail-toggle::after{content:"+";font-size:.9rem;line-height:1;opacity:.7}
.rail-toggle[aria-expanded="true"]::after{content:"–"}
.rail-toggle:hover{color:var(--rust-deep);border-bottom-color:var(--rust)}
/* A filter still in force behind a folded panel has to be visible, or the
   result count looks like a bug. The button wears its own state. */
.rail-toggle.is-set{color:var(--sage-deep);border-bottom-color:var(--sage-deep)}
.rail-more{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:22px 34px;align-items:start;margin-top:20px;padding:22px 24px;
  background:var(--beige-soft);border:1px solid var(--line);border-radius:5px}
.rail-more .link-btn{justify-self:start;align-self:end}

/* ── controls ─────────────────────────────────────────── */
.ctrl-group{display:flex;flex-direction:column;gap:11px}
.ctrl-group > .mono{color:var(--sage-deep)}
.chips{display:flex;gap:7px;flex-wrap:wrap;max-width:640px}
.chip{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:.7rem;letter-spacing:.04em;
  background:var(--beige-soft);color:var(--lichen);border:1px solid var(--line);border-radius:999px;
  padding:7px 14px;cursor:pointer;transition:all .18s ease}
.chip:hover{border-color:var(--sage);background:var(--sage-soft);color:var(--birch)}
.chip[aria-pressed="true"]{background:var(--sage-deep);border-color:var(--sage-deep);
  color:var(--cream);font-weight:500}
.chip[aria-pressed="true"]:hover{background:var(--birch);border-color:var(--birch);color:var(--cream)}
.chip[disabled]{opacity:.34;cursor:default}

.search{flex:1 1 320px;max-width:420px;position:relative}
.search input{width:100%;font-family:'Inter',system-ui,sans-serif;font-size:.9rem;font-weight:300;
  color:var(--birch);background:var(--beige-soft);border:1px solid var(--line);border-radius:3px;
  padding:10px 34px 10px 13px}
.search input::placeholder{color:var(--lichen-dim)}
.search input:focus{border-color:var(--sage-deep);background:var(--cream);outline:none;
  box-shadow:0 0 0 3px var(--sage-soft)}
.search button{position:absolute;right:4px;top:50%;transform:translateY(-50%);background:none;
  border:none;color:var(--lichen-dim);cursor:pointer;font-size:1.1rem;line-height:1;padding:4px 8px}
.search button:hover{color:var(--rust-deep)}
.link-btn{background:none;border:none;font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:var(--sage-deep);
  cursor:pointer;text-decoration:underline;text-underline-offset:3px;padding:4px}
.link-btn:hover{color:var(--rust-deep)}

.count{margin:0 0 26px;color:var(--lichen-dim);display:flex;justify-content:space-between;
  flex-wrap:wrap;gap:12px}

/* ── listing tiles ────────────────────────────────────────
   Was a four-column row: grade block, 108px thumbnail, headline and
   paragraph and two badges and four buttons, then a five-row table of
   figures. Ninety-four of those in a column is a spreadsheet. It is now
   a gallery — picture first, three lines under it, and everything else
   folded into Details. */
/* auto-fill so the gallery reflows to whatever width the results column has
   — it no longer owns the page, the filter rail takes a slice off the left. */
.listings{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:48px 28px;align-items:start;padding-bottom:64px}
.card{display:flex;flex-direction:column;min-width:0}

/* The frame. Photograph or drawing, it is the same object: same ratio,
   same wash, same grain, same grade sitting in the corner. */
.card-plate{position:relative;isolation:isolate;aspect-ratio:4/3;overflow:hidden;
  border-radius:4px;background:var(--beige);
  box-shadow:0 1px 0 rgba(30,51,40,.06),0 18px 30px -26px rgba(30,51,40,.55)}
/* No photograph on file: no plate at all. The card is text only and the
   grade marker moves into the body, so nothing empty takes up space. */
.card.no-shot .card-main{padding-top:0}
.card-grade-b{display:flex;align-items:flex-end;gap:9px;margin-bottom:12px;color:var(--lichen-dim)}
.card-grade-b .meter{height:17px}
.card-grade-b .mono{font-size:.6rem;line-height:1.5}
.card-shot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 700ms var(--ease-signal,cubic-bezier(.2,.8,.2,1)),filter 500ms ease}
/* Photographs are pulled back towards the palette the drawings are already
   in — 20 full-colour snapshots against 74 flat vector plates read as two
   different websites. On hover the colour comes back: the picture acquires,
   the way everything else on this site does. */
.card-shot:not(.is-drawn){filter:saturate(.62) contrast(1.04)}
.card:hover .card-shot:not(.is-drawn){filter:saturate(1) contrast(1)}
.card:hover .card-shot{transform:scale(1.035)}
.card-wash{position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(0deg,rgba(20,34,26,.72) 0%,rgba(20,34,26,.18) 34%,rgba(20,34,26,0) 58%),
    var(--grain);
  background-blend-mode:normal,soft-light}
.card-grade{position:absolute;left:14px;right:14px;bottom:12px;display:flex;align-items:flex-end;
  gap:9px;color:var(--cream);pointer-events:none}
.card-grade .meter{height:19px}
.card-grade .meter i{background:rgba(251,247,238,.34)}
.card-grade .meter i.live{background:var(--rust-lit)}
.card-grade .mono{font-size:.6rem;line-height:1.5;
  text-shadow:0 1px 3px rgba(12,20,15,.7)}

/* Photo credit. Small, but present — the licences require it with the image. */
.shot-credit{margin-top:11px;font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:.58rem;letter-spacing:.04em;color:var(--lichen-dim);line-height:1.5}
.shot-credit a{color:var(--lichen);text-decoration:none;border-bottom:1px solid var(--line)}
.shot-credit a:hover{color:var(--rust-deep);border-bottom-color:var(--rust)}

.card-main{min-width:0;padding-top:16px}
.card h2{font-family:'Fraunces',Georgia,serif;font-variation-settings:'SOFT' 40,'WONK' 1;
  font-size:1.28rem;font-weight:500;line-height:1.18;letter-spacing:-.015em}
.card h2 a{text-decoration:none;border-bottom:2px solid transparent;transition:border-color .18s}
.card h2 a:hover{border-bottom-color:var(--rust)}
.place{color:var(--lichen);font-size:.8rem;margin-top:6px}
/* Two lines. The full verdict is on the entry page, where there is room
   for it — here it is the hook, not the article. */
.verdict{margin-top:10px;font-size:.88rem;line-height:1.55;color:var(--lichen);
  display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:11px;align-items:center}
.flag{display:inline-block;font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:.64rem;letter-spacing:.08em;text-transform:uppercase;color:var(--rust-deep);
  background:var(--rust-soft);border:1px solid var(--rust);border-radius:2px;padding:3px 8px}
.badge{display:inline-block;font-family:'JetBrains Mono',ui-monospace,monospace;font-size:.6rem;
  letter-spacing:.08em;text-transform:uppercase;padding:3px 8px;border-radius:2px;
  border:1px solid var(--line);background:var(--beige);color:var(--lichen-dim)}
.badge.op{border-color:var(--sage);background:var(--sage-soft);color:var(--sage-deep)}
.badge.thin{border-color:var(--rust);background:var(--rust-soft);color:var(--rust-deep)}
/* Four buttons a tile, ninety-four tiles, was 376 buttons on one page.
   Two quiet links now; Full entry and Visit site wait inside Details. */
.actions{display:flex;flex-wrap:wrap;gap:18px;margin-top:14px;padding-top:12px;
  border-top:1px solid var(--line)}
.actions .link-btn{padding:2px 0;text-decoration:none;border-bottom:1px solid transparent}
.actions .link-btn:hover{border-bottom-color:var(--rust)}
.actions .link-btn[aria-pressed="true"]{color:var(--rust-deep);border-bottom-color:var(--rust)}
.btn{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:.68rem;letter-spacing:.06em;
  text-transform:uppercase;text-align:center;text-decoration:none;padding:9px 10px;border-radius:3px;
  cursor:pointer;transition:all .18s ease;border:1px solid var(--sage);background:var(--cream);
  color:var(--sage-deep);display:block}
.btn:hover{border-color:var(--sage-deep);background:var(--sage-deep);color:var(--cream)}
.btn-primary{background:var(--rust);border-color:var(--rust);color:var(--cream);font-weight:500}
.btn-primary:hover{background:var(--rust-deep);border-color:var(--rust-deep);color:var(--cream)}
.btn[aria-pressed="true"]{background:var(--sage-deep);border-color:var(--sage-deep);
  color:var(--cream);font-weight:500}

/* Details, folded. It opens in place under the tile it belongs to — the
   figures that used to sit permanently in a fourth column now live here,
   read only when asked for. */
.panel{display:none;margin-top:16px;padding:18px 20px;
  background:var(--beige);border-radius:4px;border-left:3px solid var(--sage-deep)}
.panel.open{display:block}
.panel h4,.block h4{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:.64rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--sage-deep);margin:16px 0 10px;font-weight:500}
.panel h4:first-child{margin-top:0}
.conn{display:flex;flex-direction:column;gap:7px}
.conn div{display:flex;justify-content:space-between;gap:12px;font-size:.8rem;color:var(--lichen);
  border-bottom:1px dotted var(--line);padding-bottom:6px}
.conn div b{color:var(--birch);font-weight:400;text-align:right}
.panel p{font-size:.85rem;color:var(--lichen);line-height:1.6;margin-bottom:12px}
.panel p:last-child{margin-bottom:0}
.panel-go{display:flex;gap:8px;margin-top:16px}
.panel-go .btn{flex:1}

/* ── compare tray + dialog ────────────────────────────── */
.tray{position:fixed;left:0;right:0;bottom:0;z-index:50;background:var(--beige-2);
  border-top:2px solid var(--rust);transform:translateY(110%);transition:transform .3s cubic-bezier(.4,0,.2,1)}
.tray.up{transform:translateY(0)}
.tray .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding-top:15px;padding-bottom:15px;flex-wrap:wrap}
.tray-names{color:var(--birch);font-size:.85rem}
.tray .btn{display:inline-block;background:var(--beige)}
.tray .btn:hover{background:var(--sage-deep)}
.tray .btn-primary{background:var(--rust);color:var(--cream)}

dialog{border:none;border-radius:5px;padding:0;background:var(--beige);color:var(--birch);
  max-width:920px;width:calc(100% - 40px);box-shadow:0 24px 60px -30px rgba(30,51,40,.6)}
dialog::backdrop{background:rgba(30,51,40,.66)}
.dlg-head{display:flex;justify-content:space-between;align-items:center;padding:22px 26px;
  border-bottom:1px solid var(--line);gap:16px;background:var(--beige-2)}
.dlg-head h3{font-family:'Fraunces',Georgia,serif;font-size:1.3rem;font-weight:500}
.dlg-body{padding:8px 26px 26px;overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:.84rem}
th,td{text-align:left;padding:13px 12px;border-bottom:1px solid var(--line);vertical-align:top}
th{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:.64rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--sage-deep);font-weight:500}
td:first-child{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:.66rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--lichen-dim);width:150px}

.empty{padding:60px 0;text-align:center;color:var(--lichen-dim)}
.empty b{display:block;color:var(--birch);font-family:'Fraunces',Georgia,serif;font-size:1.2rem;
  font-weight:500;margin-bottom:8px}

/* ── article / static pages ───────────────────────────── */
.page-head{padding:64px 0 40px;border-bottom:1px solid var(--line)}
.page-head h1{max-width:20ch}
.page-head .standfirst{margin-top:22px}

/* Title and standfirst side by side — used on About only, so the three
   long-form pages don't all open with the same stacked masthead. */
.page-head-split .wrap{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:end}
.page-head-split .standfirst{margin-top:0;max-width:none;padding-bottom:6px}

/* ── method: reference layout with a sticky contents rail ── */
.doc-layout{display:grid;grid-template-columns:minmax(0,1fr) 240px;gap:56px}
.toc{grid-column:2;grid-row:1}
.doc-body{grid-column:1;grid-row:1}
.toc-inner{position:sticky;top:96px;border-left:2px solid var(--line);padding-left:18px}
.toc-title{color:var(--lichen-dim);margin-bottom:14px;display:block}
.toc-list{list-style:none;counter-reset:toc;display:flex;flex-direction:column;gap:11px;margin:0}
.toc-list li{counter-increment:toc;margin:0}
.toc-list a{display:block;font-size:.86rem;line-height:1.35;color:var(--lichen);
  text-decoration:none;transition:color .18s}
.toc-list a::before{content:counter(toc,decimal-leading-zero);
  font-family:'JetBrains Mono',ui-monospace,monospace;font-size:.62rem;letter-spacing:.08em;
  color:var(--sage);margin-right:9px}
.toc-list a:hover{color:var(--birch)}
.toc-list a.is-current{color:var(--rust-deep);font-weight:500}
.toc-list a.is-current::before{color:var(--rust)}

.prose{padding:44px 0 20px;max-width:68ch}
.prose h2{font-family:'Fraunces',Georgia,serif;font-variation-settings:'SOFT' 40;font-size:1.5rem;
  font-weight:500;margin:44px 0 14px;letter-spacing:-.01em}
.prose h2:first-child{margin-top:0}
.prose h3{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:.72rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--rust-deep);margin:30px 0 10px;font-weight:500}
.prose p{margin-bottom:16px;color:var(--lichen);font-size:.96rem;line-height:1.72}
.prose p strong{color:var(--birch);font-weight:500}
.prose ul,.prose ol{margin:0 0 18px 20px;color:var(--lichen);font-size:.96rem;line-height:1.72}
.prose li{margin-bottom:8px}
.prose li::marker{color:var(--sage)}
.prose li strong{color:var(--birch);font-weight:500}
.prose a{color:var(--sage-deep);text-decoration:underline;text-underline-offset:3px}
.prose a:hover{color:var(--rust-deep)}
.rule{border:none;border-top:1px solid var(--line);margin:40px 0}

/* Doc body reuses .prose type, but lets tables run the full column while
   keeping the measure short enough to read. Must follow the .prose rules. */
.doc-body{max-width:none}
.doc-body p,.doc-body ul,.doc-body ol{max-width:64ch}
.doc-body h2{scroll-margin-top:110px;display:flex;align-items:baseline;gap:14px}
.doc-body h2::after{content:"";flex:1;height:1px;background:var(--line)}
.doc-body h3{scroll-margin-top:110px}

.grade-table{width:100%;margin:24px 0}
.grade-table td:first-child{width:120px}
.grade-row-meter{display:flex;align-items:flex-end;gap:2px;height:22px;margin-bottom:6px}
.grade-row-meter i{display:block;width:4px;border-radius:1px;background:var(--line)}
.grade-row-meter i.live{background:var(--rust)}

/* ── about: editorial layout, section labels in the margin ──
   Headings sit in a sticky left column so you always know which section
   you're in, and the corrections log breaks out into a full-width table. */
.editorial{padding:20px 0}
.ed-row{display:grid;grid-template-columns:220px minmax(0,1fr);gap:48px;
  padding:34px 0;border-top:1px solid var(--line)}
.ed-row:first-child{border-top:none}
/* align-self:start keeps the label shrink-wrapped so it has room to travel
   inside .ed-row. (Contrast with .rail-inner / .toc-inner, which are children
   of a grid item and need that item stretched instead.) */
.ed-label{position:sticky;top:96px;align-self:start;text-align:right}
.ed-label h2{font-family:'Fraunces',Georgia,serif;font-variation-settings:'SOFT' 40;
  font-size:1.3rem;font-weight:500;line-height:1.2;letter-spacing:-.01em;
  scroll-margin-top:110px;margin:0}
.ed-body > *:last-child{margin-bottom:0}
.ed-body p{margin-bottom:16px;color:var(--lichen);font-size:.98rem;line-height:1.75;max-width:62ch}
.ed-body p strong{color:var(--birch);font-weight:500}
.ed-body a{color:var(--sage-deep);text-decoration:underline;text-underline-offset:3px}
.ed-body a:hover{color:var(--rust-deep)}
.ed-body ul{margin:0 0 4px 20px;color:var(--lichen);font-size:.98rem;line-height:1.75;max-width:62ch}
.ed-body li{margin-bottom:12px}
.ed-body li::marker{color:var(--sage)}
.ed-body li strong{color:var(--birch);font-weight:500}
.ed-ticks{list-style:none;margin-left:0!important}
.ed-ticks li{position:relative;padding-left:26px}
.ed-ticks li::before{content:"✓";position:absolute;left:0;top:-1px;
  color:var(--sage-deep);font-size:.9rem}
.ed-end{border-top:1px solid var(--line);padding-bottom:8px}

.ed-wide{padding:8px 0 26px}
.corr-table{width:100%;font-size:.88rem;table-layout:auto}
.corr-table thead th{white-space:nowrap}
.corr-table tbody th{font-family:'Fraunces',Georgia,serif;font-size:1rem;font-weight:500;
  text-transform:none;letter-spacing:0;color:var(--birch);width:190px}
.corr-table tbody th a{text-decoration:none;border-bottom:1px solid var(--sage)}
.corr-table tbody th a:hover{color:var(--rust-deep);border-bottom-color:var(--rust)}
.corr-table td{color:var(--lichen);line-height:1.6}
.corr-table td.corr-was,.corr-table td.corr-now{font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:.68rem;letter-spacing:.04em;white-space:nowrap;width:1%}
.corr-table td.corr-was{color:var(--lichen-dim)}
.corr-table td.corr-now{color:var(--rust-deep);font-weight:500}
.corr-table td.corr-why{min-width:22ch}

/* ── property detail page ─────────────────────────────── */
.detail-head{padding:44px 0 34px;border-bottom:1px solid var(--line)}
.crumb{margin-bottom:22px;color:var(--lichen-dim)}
.crumb a{text-decoration:none;border-bottom:1px solid var(--sage)}
.crumb a:hover{color:var(--rust-deep)}
.detail-grid{display:grid;grid-template-columns:1fr 300px;gap:48px;align-items:start}
.detail-head h1{font-size:clamp(1.9rem,4.4vw,3rem);max-width:18ch}
.detail-place{margin-top:12px;color:var(--lichen);font-size:1rem}
.detail-verdict{margin-top:22px;font-size:1.02rem;line-height:1.7;max-width:56ch;color:var(--birch)}
.grade-card{border:1px solid var(--line);border-top:3px solid var(--sage-deep);border-radius:4px;
  padding:22px;background:var(--beige)}
.grade-card .meter{height:52px;margin-bottom:16px}
.grade-card .meter i{width:11px}
.grade-card h2{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:.95rem;letter-spacing:.04em;
  font-weight:500;margin-bottom:8px}
.grade-card p{font-size:.84rem;color:var(--lichen);line-height:1.55;margin-bottom:16px}
.grade-card .btn{margin-top:8px}
/* align-items:start keeps the sticky .aside shrink-wrapped so it can travel. */
.detail-body{padding:40px 0 20px;display:grid;grid-template-columns:1fr 300px;gap:48px;align-items:start}
.blocks{display:flex;flex-direction:column;gap:32px}
.block h4{margin-bottom:12px}
.block p{font-size:.94rem;color:var(--lichen);line-height:1.7;max-width:56ch}
.aside{display:flex;flex-direction:column;gap:28px;position:sticky;top:88px;
  background:var(--beige);border-radius:4px;padding:22px}
.aside .conn div{font-size:.8rem}
.factlist{display:flex;flex-direction:column;gap:8px}
.factlist div{display:flex;justify-content:space-between;gap:12px;
  font-family:'JetBrains Mono',ui-monospace,monospace;font-size:.7rem;
  border-bottom:1px dotted var(--line);padding-bottom:7px}
.factlist span{color:var(--lichen-dim);letter-spacing:.05em}
.factlist b{font-weight:400;text-align:right}
.srcs{list-style:none;margin:0;display:flex;flex-direction:column;gap:8px}
.srcs li{font-size:.82rem;line-height:1.5}
.srcs a{color:var(--sage-deep);text-decoration:underline;text-underline-offset:3px;word-break:break-word}
.srcs a:hover{color:var(--rust-deep)}
.pager{border-top:1px solid var(--line);margin-top:40px;padding:26px 0;display:flex;
  justify-content:space-between;gap:20px;flex-wrap:wrap}
.pager a{text-decoration:none;max-width:44%}
.pager .mono{color:var(--sage-deep);display:block;margin-bottom:5px}
.pager strong{font-family:'Fraunces',Georgia,serif;font-weight:500;font-size:1rem}
.pager a:hover strong{color:var(--rust-deep)}
.pager .next{text-align:right;margin-left:auto}
.nearby{border-top:1px solid var(--line);padding:34px 0}
.nearby h4{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:.66rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--sage-deep);margin-bottom:18px;font-weight:500}
.nearby-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.nearby-item{border-left:2px solid var(--sage);padding-left:14px;text-decoration:none;display:block}
.nearby-item .meter{height:20px;margin-bottom:9px}.nearby-item .meter i{width:4px}
.nearby-item strong{font-family:'Fraunces',Georgia,serif;font-weight:500;font-size:1rem;
  display:block;margin-bottom:4px;line-height:1.2}
.nearby-item span{font-size:.8rem;color:var(--lichen)}
.nearby-item:hover{border-left-color:var(--rust)}
.nearby-item:hover strong{color:var(--rust-deep)}

/* ── footer ───────────────────────────────────────────── */
footer{background:var(--beige);border-top:1px solid var(--line);padding:44px 0 100px;margin-top:40px}
.foot-grid{display:grid;grid-template-columns:1fr 180px 180px;gap:40px;align-items:start}
.foot-lede p{font-family:'Fraunces',Georgia,serif;font-variation-settings:'SOFT' 40;
  font-size:1.1rem;line-height:1.45;color:var(--birch);max-width:30ch;font-weight:400}
footer h4{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:.66rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--rust-deep);margin-bottom:12px;font-weight:500}
footer p{font-size:.84rem;color:var(--lichen);line-height:1.65;max-width:54ch}
footer p a{color:var(--sage-deep);text-decoration:underline;text-underline-offset:3px}
footer p a:hover{color:var(--rust-deep)}
.foot-links{list-style:none;display:flex;flex-direction:column;gap:9px}
.foot-links a{font-size:.84rem;color:var(--lichen);text-decoration:none;
  border-bottom:1px solid transparent;transition:color .18s,border-color .18s}
.foot-links a:hover{color:var(--sage-deep);border-bottom-color:var(--sage)}
.colophon{border-top:1px solid var(--line);margin-top:38px;padding-top:20px;
  color:var(--lichen-dim);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}

/* ── responsive ───────────────────────────────────────── */

@media (max-width:1040px){
  /* Stacked, the contents list sits above the article as a row of jump links. */
  .doc-layout{grid-template-columns:1fr;gap:0}
  .toc{grid-column:1;grid-row:auto}
  .doc-body{grid-column:1;grid-row:auto;padding-top:32px}
  .toc-inner{position:static;border-left:none;border-bottom:1px solid var(--line);
    padding-left:0;padding-bottom:22px;margin-top:36px}
  .toc-list{flex-direction:row;flex-wrap:wrap;gap:8px 22px}
  .toc-list a{font-size:.82rem}

  .ed-row{grid-template-columns:1fr;gap:14px;padding:28px 0}
  .ed-label{position:static;text-align:left}
  .page-head-split .wrap{grid-template-columns:1fr;gap:24px;align-items:start}
}

@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr;gap:28px;align-items:start}
  .hero-meter{text-align:left}
  .grades{flex-basis:100%;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
  .foot-grid{grid-template-columns:1fr 1fr;gap:30px}
  .foot-lede{grid-column:1 / -1}
  .detail-grid,.detail-body{grid-template-columns:1fr;gap:32px}
  .aside{position:static}
  .nearby-grid{grid-template-columns:1fr;gap:18px}
  /* The rail can't sit beside the gallery on a narrow screen, so it lifts to
     the top and its two category lists sit side by side under the search. */
  .survey-layout{grid-template-columns:1fr;gap:26px}
  .survey-rail,.survey-results{grid-column:1}
  .rail-inner{position:static;display:grid;grid-template-columns:1fr 1fr;
    gap:18px 28px;align-items:start}
  .rail-search{grid-column:1 / -1}
  .rail-reset{grid-column:1 / -1}
  .ed-wide{overflow-x:auto}
  .corr-table{min-width:640px}
}
@media (max-width:560px){
  .wrap{padding:0 20px}
  .hero{padding:48px 0 40px}
  .nav{gap:16px}
  .masthead .wrap{gap:12px}
  /* Title page on a phone: shorter, and the foot label stacks over its credit. */
  .hero-show{min-height:clamp(440px,82vh,600px)}
  .hero-caption{padding:32px 0 104px}
  .slide-bar{bottom:42px;flex-direction:column;align-items:flex-start;gap:8px}
  .slide-tag{max-width:100%}
  .slide-credit{max-width:100%;text-align:left}
  /* The five-mark key won't fit five across a phone; two rows of it. */
  .grades{grid-template-columns:repeat(2,1fr);gap:16px 20px}
  /* One category list per row once the screen is phone-width. */
  .rail-inner{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}html{scroll-behavior:auto}}
@media print{.masthead,.tray,.actions,.filter-rail,.toc,.interlude,.card-shot.is-drawn{display:none}
  body{background:#fff}footer,.legend,.aside{background:none}
  .listings{display:block}
  .survey-layout,.doc-layout,.ed-row{display:block}}

/* ── film band ────────────────────────────────────────────
   Full-bleed aerial plate at the very top of the survey. It
   dissolves into the cream so the masthead reads as part of
   the same sheet of paper, not as a bar under a banner. */
.filmband{position:relative;overflow:hidden;isolation:isolate;
  height:clamp(430px,82vh,760px);background:var(--birch)}
.filmband-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:saturate(.82) contrast(1.04);opacity:0;transition:opacity 900ms ease}
.filmband.is-ready .filmband-video{opacity:1}

/* Layer order is load-bearing: the first layer paints on top. The cream
   dissolve has to sit above the shade, or the vignette washes the bottom
   band olive and the kicker loses its background. */
.filmband-veil{position:absolute;inset:0;pointer-events:none;
  background:
    /* 1. the dissolve into the page */
    linear-gradient(0deg,var(--cream) 0 10%,rgba(251,247,238,.5) 16%,rgba(251,247,238,0) 24%),
    /* 2. a band of shade behind the type, not a pool in one corner — the
       headline runs the full width on a phone, and a left-weighted pool
       left its right end sitting on bare footage at 1.8:1. It starts
       above the dissolve so the two never wash into each other. */
    linear-gradient(0deg,rgba(20,34,26,0) 22%,rgba(20,34,26,.68) 28%,
      rgba(20,34,26,.72) 44%,rgba(20,34,26,.30) 62%,rgba(20,34,26,0) 78%),
    /* 3. left weighting, so the band reads as light falling off rather
       than as a rectangle laid over the picture */
    radial-gradient(120% 90% at 6% 52%,rgba(20,34,26,.34) 0%,rgba(20,34,26,0) 72%),
    /* 4. sky knock-down + vignette */
    linear-gradient(180deg,rgba(20,34,26,.30) 0%,rgba(20,34,26,0) 26%),
    radial-gradient(130% 95% at 50% 24%,rgba(20,34,26,0) 44%,rgba(20,34,26,.38) 100%)}

/* The title card itself. `bottom` is a percentage of the band's HEIGHT —
   padding-% would resolve against width and drop the last line into the
   cream. It sits at 24%, exactly where the dissolve reaches zero. */
.filmband-plate{position:absolute;left:0;right:0;bottom:28%}
.filmband-title{color:var(--cream);max-width:15ch;
  font-size:clamp(2.3rem,6.4vw,5rem);
  text-shadow:0 1px 2px rgba(12,20,15,.55),0 8px 40px rgba(12,20,15,.5)}
.filmband-title em{color:var(--rust-lit)}
/* Full cream, not a dimmed cream: at .68rem this is small text, and the
   .86 alpha put it at 4.22:1 on the brightest frames — under the 4.5 it
   owes. The size and letterspacing keep it quiet enough. */
.filmband-kicker{display:block;margin-bottom:18px;color:var(--cream);
  text-shadow:0 1px 3px rgba(12,20,15,.6)}

/* Only the pause control sits in the cream now */
.filmband-inner{position:absolute;left:0;right:0;bottom:0;padding-bottom:10px;
  display:flex;align-items:center;justify-content:flex-end}
.filmband-toggle{display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  background:transparent;border:1px solid var(--line);border-radius:999px;
  color:var(--lichen);padding:5px 12px;font:inherit;font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:.62rem;letter-spacing:.12em;text-transform:uppercase}
.filmband-toggle:hover{color:var(--rust-deep);border-color:var(--rust)}
.filmband-toggle-glyph{width:8px;height:9px;
  border-left:2.5px solid currentColor;border-right:2.5px solid currentColor}
.filmband-toggle[aria-pressed="true"] .filmband-toggle-glyph{width:0;height:0;border:0;
  border-left:8px solid currentColor;border-top:5px solid transparent;border-bottom:5px solid transparent}
@media (max-width:560px){
  .filmband{height:clamp(400px,72vh,560px)}
  .filmband-kicker{font-size:.58rem;margin-bottom:14px}
  .filmband-title{max-width:none}
}
@media (prefers-reduced-motion:reduce){
  .filmband-video{opacity:1}
}
/* In print the plate carries the page's h1, so the band collapses to
   type instead of vanishing with the footage. */
@media print{
  .filmband{height:auto;background:none;overflow:visible;padding:0 0 18px}
  .filmband-video,.filmband-veil,.filmband-toggle{display:none}
  .filmband-plate,.filmband-inner{position:static;padding:0}
  .filmband-title{color:#000;text-shadow:none;max-width:22ch}
  .filmband-kicker{color:#000;text-shadow:none;margin-bottom:10px}
}