/* ===== Blend cut: full-bleed scenes that dissolve into each other =====
   Base rules = static fallback (reduced motion / no JS): stacked full-bleed stills feathered into the dark.
   .bl-on (set by blend.js?v=20261030c when GSAP runs) = pinned stage, scroll-scrubbed transitions. */
html.lenis,html.lenis body{height:auto}.lenis.lenis-smooth{scroll-behavior:auto!important}
.bl{position:relative}
.bl-stage{position:relative}
.bl-shot{position:relative;height:96svh;min-height:540px;overflow:hidden;
 -webkit-mask-image:linear-gradient(180deg,transparent,#000 18%,#000 80%,transparent);mask-image:linear-gradient(180deg,transparent,#000 18%,#000 80%,transparent)}
.bl-shot+.bl-shot{margin-top:-16svh}
.bl-img{position:absolute;inset:0}
.bl-img picture,.bl-img img,.bl-img video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--op,50% 50%)}
.bl-img video{opacity:0;transition:opacity 1.2s}.bl-img video.on{opacity:1}
.bl-shot::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:2;
 background:radial-gradient(120% 90% at 50% 45%,transparent 45%,rgba(6,5,4,.6)),linear-gradient(0deg,rgba(6,5,4,.78),rgba(6,5,4,0) 42%)}
.bl-amb{position:absolute;inset:-6%;width:112%;height:112%;max-width:none;object-fit:cover;opacity:.22;display:none}
.bl-det{display:none}
.bl-cap{position:absolute;z-index:3;max-width:470px;left:var(--pad);bottom:14svh}
.bl-cap.c-br{left:auto;right:var(--pad);text-align:right}
.bl-cap.c-tl{bottom:auto;top:16svh}
.bl-cap.c-bc{left:50%;transform:translateX(-50%);text-align:center}
.bl-cap h3,.bl-cap h2{font-size:clamp(48px,6vw,104px);text-shadow:0 4px 40px rgba(0,0,0,.6)}
.bl-cap p{color:#d8cfc1;margin-top:18px;text-shadow:0 2px 18px rgba(0,0,0,.7)}
.bl-cap.c-br p{margin-left:auto}
.bl-title{position:relative;padding:18vh var(--pad) 6vh;max-width:1440px;margin:0 auto;z-index:4}
.bl-title h2{font-size:clamp(46px,6.4vw,104px)}.bl-title p{color:var(--mute);margin-top:22px;max-width:440px}
.bl-sweep,.bl-leak,.bl-feather{display:none}
/* portrait stills on landscape screens: a tall pool of light, edges dissolved, with its own glow behind */
@media (min-aspect-ratio:1/1){
 .bl-shot.tall .bl-amb{display:block}
 .bl-shot.tall .bl-img{left:calc(var(--cx) - 24vw);right:auto;width:48vw;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent);mask-image:linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent)}
}
/* ---- motion: pinned stage ---- */
.bl-on .bl{height:calc(var(--n)*100svh + 80svh)}
.bl-on .bl-stage{position:sticky;top:0;height:100svh;overflow:hidden;background:var(--ink)}
.bl-on .bl-title{position:absolute;left:0;right:0;top:0;padding-top:24vh;margin:0 auto}
.bl-on .bl-shot{position:absolute;inset:0;height:auto;min-height:0;margin:0;-webkit-mask-image:none;mask-image:none;will-change:transform,opacity}
.bl-on .bl-shot+.bl-shot{margin:0}
.bl-on .bl-img{will-change:transform}
.bl-on .bl-det{display:block;position:absolute;left:var(--x);top:var(--y);width:var(--w);z-index:3;margin:0;opacity:0;will-change:transform,opacity}
.bl-det picture,.dr picture{display:block;-webkit-mask-image:linear-gradient(90deg,transparent,#000 16%,#000 84%,transparent),linear-gradient(180deg,transparent,#000 16%,#000 84%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent,#000 16%,#000 84%,transparent),linear-gradient(180deg,transparent,#000 16%,#000 84%,transparent);mask-composite:intersect}
.bl-det::before,.dr::before{content:"";position:absolute;inset:-18% -14%;z-index:-1;background:radial-gradient(closest-side,rgba(6,5,4,.88),rgba(6,5,4,.5) 60%,transparent);pointer-events:none}
.bl-det,.dr{isolation:isolate}
.bl-det figcaption{margin-top:-6%;text-align:center;color:var(--bronze2);font-size:9.5px;text-shadow:0 2px 12px #000;position:relative}
.bl-on .bl-sweep{display:block;position:absolute;top:-10%;bottom:-10%;left:0;width:36vw;z-index:5;pointer-events:none;opacity:0;mix-blend-mode:screen;
 background:linear-gradient(90deg,transparent,rgba(255,214,160,.08) 30%,rgba(255,226,186,.62) 50%,rgba(255,214,160,.08) 70%,transparent)}
.bl-on .bl-leak{display:block;position:absolute;inset:-15%;z-index:5;pointer-events:none;opacity:0;mix-blend-mode:screen;
 background:radial-gradient(38% 52% at 18% 38%,rgba(255,138,56,.8),transparent 70%),radial-gradient(34% 46% at 84% 62%,rgba(255,196,120,.6),transparent 70%),radial-gradient(60% 40% at 50% 100%,rgba(190,70,30,.45),transparent 70%)}
.bl-on .bl-feather{display:block}
.bl-feather{position:absolute;inset:0;z-index:4;pointer-events:none;
 background:linear-gradient(180deg,rgba(6,5,4,.9),rgba(6,5,4,0) 16%,rgba(6,5,4,0) 74%,rgba(6,5,4,.95))}
/* ---- drifting stills (collage) ---- */
.dr{margin:0}
.dr img{width:100%;height:auto}
.dr figcaption{display:grid;gap:3px;font:400 clamp(17px,1.4vw,22px)/1.1 Bodoni,serif;margin-top:-4%;position:relative;text-shadow:0 2px 14px #000;padding-left:12%}
.dr figcaption .mono{color:var(--bronze);font-size:13px}
/* screening room */
.cl{position:relative}
.cl-stage{position:relative;overflow:hidden;padding:20vh var(--pad) 16vh;display:flex;flex-wrap:wrap;gap:0 4vw;align-items:flex-start;justify-content:center}
.cl-bg{position:absolute;inset:0;opacity:.58}
.cl-bg picture,.cl-bg img{width:100%;height:100%;object-fit:cover;object-position:50% 58%}
.cl-bg::after{content:"";position:absolute;inset:0;background:radial-gradient(90% 75% at 50% 50%,rgba(6,5,4,.2),var(--ink) 92%)}
.cl-head{position:relative;z-index:2;width:100%;text-align:center;margin-bottom:8vh}
.cl-head h2{font-size:clamp(44px,6.2vw,104px);text-shadow:0 4px 40px rgba(0,0,0,.7)}
.cl .dr{position:relative;width:min(34vw,330px);z-index:1}
.cl .dr:nth-child(odd){margin-top:12vh}
.cl .bl-feather{display:block}
.bl-on .cl{height:340svh}
.bl-on .cl-stage{position:sticky;top:0;height:100svh;padding:0;display:block}
.bl-on .cl-head{position:absolute;top:50%;left:0;right:0;transform:translateY(-50%);margin:0;z-index:4;text-shadow:0 4px 40px rgba(0,0,0,.85)}
.bl-on .cl .dr{position:absolute;left:var(--x);top:var(--y);width:var(--w);margin:0;will-change:transform}
.bl-on .cl .dr.fr{z-index:3}.bl-on .cl .dr.bk{z-index:1;opacity:.62}
.bl-on .cl-bg{will-change:transform}
/* manifest: stills drift behind the words */
.mf-drift{display:none}
.bl-on .mf-drift{display:block;position:absolute;inset:0;z-index:0;pointer-events:none}
.bl-on .mf-drift .dr{position:absolute;left:var(--x);top:var(--y);width:var(--w);opacity:.34;will-change:transform}
.bl-on .mf-line{position:relative;z-index:1}
/* hero dissolves into the manifest; night film dissolves into the map */
.bl-on .manifest,.motion:not(.bl-x) .manifest{margin-top:-34svh;z-index:2} /* set before first paint (.motion is added inline in <head>) so the overlap causes no layout shift */
.bl-on .premieres{margin-top:-34svh;z-index:2;background:none}
/* Where We Build hub: the short town hero must not sit under the map (overlap found 10/29 overnight QA) */
.bl-on .thero+.premieres{margin-top:0}
.bl-on .pr-stick{background:radial-gradient(80% 55% at 60% 55%,rgba(20,15,11,.95),rgba(20,15,11,0) 100%),linear-gradient(180deg,rgba(6,5,4,0),rgba(6,5,4,.85) 26%,var(--ink) 40%)}
/* finale and next-feature stills: feathered, slow push */
.finale .media{-webkit-mask-image:linear-gradient(180deg,transparent,#000 30%);mask-image:linear-gradient(180deg,transparent,#000 30%)}
.bl-on .kb img{will-change:transform}
@media (max-width:760px){
 .bl-cap{left:var(--pad);right:var(--pad);bottom:11svh;max-width:none}.bl-cap.c-br{text-align:left;right:var(--pad);left:var(--pad)}.bl-cap.c-br p{margin-left:0}
 .bl-cap h3,.bl-cap h2{font-size:44px}
 .bl-img picture,.bl-img img,.bl-img video{object-position:var(--opm,50% 50%)}
 .bl-on .bl-det{left:var(--xm);top:var(--ym);width:var(--wm)}
 /* landscape stills on a phone: a wide band that pans across the room */
 .bl-on .bl-shot:not(.tall):not(.vid) .bl-img{top:7svh;bottom:auto;right:auto;height:64svh;width:calc(64svh*var(--ar));
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 14%,#000 80%,transparent);mask-image:linear-gradient(180deg,transparent,#000 14%,#000 80%,transparent)}
 .bl-on .bl-shot:not(.tall):not(.vid) .bl-img img{object-position:50% 50%}
 .bl-on .cl .dr,.bl-on .mf-drift .dr{left:var(--xm);top:var(--ym);width:var(--wm)}
 .cl .dr{width:44vw}
 .bl-shot.tall .bl-img{left:0;width:100%}
}
.bl,.cl,.gallery{overflow-x:clip}.bl-on .bl-stage{overflow:hidden}

/* small-text scale 10/28 — reel scene labels + photo captions larger, ivory, shadowed (Matt t118u/t119u/t121u). Appended block only. */
.bl-cap .k{font-size:15px;letter-spacing:.16em;color:var(--bone);text-shadow:0 1px 2px rgba(0,0,0,.85),0 2px 16px rgba(0,0,0,.65)}
.bl-title .k,.cl-head .k,.pr-copy .k{font-size:14px}
.bl-det figcaption{font-size:13.5px;letter-spacing:.14em;color:var(--bone);text-shadow:0 1px 2px rgba(0,0,0,.9),0 2px 14px #000}
.dr figcaption .mono{font-size:13px;color:var(--bronze2)}
@media (max-width:760px){
 .bl-cap .k,.bl-det figcaption,.dr figcaption .mono,.bl-title .k,.cl-head .k,.pr-copy .k{font-size:13px}
 .bl-det figcaption{letter-spacing:.1em;line-height:1.45}
}

/* gate 10/28 — drift captions step aside when they would cross a heading or scene line (Chief of Staff #2); detail photos sit under scene text; /method/ "in-house" kept whole (Canva #10). Appended block only. */
.bl-det figcaption,.dr figcaption{transition:opacity .25s}
.bl-det figcaption.dodge,.dr figcaption.dodge{opacity:0;transition-duration:.06s}
.bl-cap{z-index:4}
.bl-cap .disp em{white-space:nowrap}

/* rescan 10/28 — tap targets 44px tall without moving layout (padding grows the hit area; negative margin cancels it) */
.sp-plan .go{display:inline-block;padding-block:14px;margin-block:-14px}
.prose a,.cg p a{padding-block:12px}
/* rescan 10/28 — Canva #1 optical size, extended to the .cg values */
.cg b{font-optical-sizing:none;font-variation-settings:"opsz" 28}
/* home drift stills, bigger (Matt approved 10/28 19:42 CT); brightness unchanged. Desktop uses the approved mock; phones a moderate 1.15x */
@media (min-width:761px){
 #manifest .mf-drift .dr{width:calc(var(--w)*1.9)}
 #manifest .mf-drift .dr.bk:first-child{left:2%;top:12%}
 #manifest .mf-drift .dr.fr{left:66%;top:40%}
 #manifest .mf-drift .dr:nth-child(3){left:12%;top:70%}
}
@media (max-width:760px){#manifest .mf-drift .dr{width:calc(var(--wm)*1.15)}}

/* rescan 10/28 — Canva #1 optical size on every Bodoni rule (generated by opsz.py; must stay last in this file) */
.disp,.disp em,.dial .n,.cg b,.dr figcaption{font-optical-sizing:none;font-variation-settings:"opsz" 28}
/* 10/28 Matt — map names stay fully hidden (no faint pre-light) until their own pin rises, then fade in; leaders follow .hm-ld.on */
.pr-labels .hm i{opacity:0}
.pr-labels .hm i.on{opacity:1}
/* 10/28 Matt — headline font option B: one fixed optical size, "opsz" 20, all widths (blend.js?v=20261030c hairlines() applies the same to
   every Bodoni element). Overrides the "opsz" 28 rules above and in v2.css?v=20261103f/pages.css?v=20261103h/feature.css?v=20261103h. */
html .disp,html .disp em,html .dial .n,html .cg b,html .dr figcaption,html .hero h1,html .prose h2,html .prose h3,html .prose .pull,html .thero .sub,html .iq-stage p,html .wb-lede,html .rw-list blockquote p,html .specs dd{font-optical-sizing:none;font-variation-settings:"opsz" 20}
/* 10/28 portfolio review — tap targets at least 44px wide: breadcrumb (pages.py hero) and footer links (build.py footer) */
.crumbs a,.foot .fnav a,.foot .f-towns a{display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;min-width:44px;min-height:44px;box-sizing:border-box}

/* Footer Option B: refined sans, Hanken Grotesk light (Matt approved 10/29 7:27 AM CT, sitewide; from review-mocks/footer-font/assets/footer-B.css) */
.foot address,.foot .fnav,.foot .f-soc,.foot .f-towns,.foot .small,.foot .f-towns .mono{font-family:Hanken,system-ui,sans-serif;font-weight:300}
.foot address{font-weight:300;font-size:16px;line-height:1.8;letter-spacing:.01em;text-transform:none;color:#ece4d6}
.foot address a{color:#ece4d6;text-decoration:underline;text-decoration-color:rgba(195,162,114,.45);text-decoration-thickness:1px;text-underline-offset:.28em}
.foot .fnav,.foot .f-soc{font-weight:300;font-size:13.5px;letter-spacing:.24em;text-transform:uppercase;gap:.2em 2.4em}
.foot .fnav a,.foot .f-soc a{color:#ece4d6}
.foot .f-towns{font-weight:300;font-size:16px;letter-spacing:.01em;color:#a99d8f}
.foot .f-towns a{color:#ece4d6}
.foot .f-towns .mono{font-weight:400;font-size:13px;letter-spacing:.24em;text-transform:uppercase;color:#c3a272}
.foot .small{font-weight:300;font-size:15px;line-height:1.7;color:#a99d8f;letter-spacing:.01em}
.foot .fnav a:hover,.foot .f-soc a:hover,.foot .f-towns a:hover,.foot address a:hover{color:#c3a272}
@media (max-width:760px){
 .foot address,.foot .f-towns{font-size:15.5px}
 .foot .fnav,.foot .f-soc{font-size:13px;letter-spacing:.2em;gap:0 1.5em}
 .foot .small{font-size:14.5px}
}
/* 10/29 Matt 7:40 AM CT — IBM Plex Mono retired sitewide; every mono style now uses footer Option B's Hanken.
   Photo captions read as sentence case (Hanken 300, .02em, 16px desktop / 14px phone); eyebrows, tags and labels stay tracked caps. */
html figcaption.mono,html .bl-det figcaption{font-family:Hanken,system-ui,sans-serif;font-weight:300;text-transform:none;letter-spacing:.02em;font-size:16px;line-height:1.4}
@media (max-width:760px){html figcaption.mono,html .bl-det figcaption{font-size:14px;letter-spacing:.02em}}
/* 10/29 tap targets (44px) after the mono retire: grow the hit area of small tracked-caps links without moving the layout */
html .na-head .go,html .na-page .go{padding-top:17px}
@media (min-width:761px){html nav[aria-label="Primary"] a{padding-block:12px}}
html .pl-fl label span{min-width:44px;box-sizing:border-box;text-align:center}
/* ============ 10/29 Inset blend C · editorial split, sitewide (Matt picked 7:58 AM CT). Ported from review-mocks/inset-blend (C + shared base; A and B dropped).
   .bl-det = reel scene insets, .dr = drifting collage stills, .pf-ch-st = Collection chapter extras.
   Reel insets are still sized 1.5x in src (blend.py); under C the panel takes ~38% of the frame on desktop.
   Two insets in one scene stack in the side panel with a vertical feather overlap (like the Collection extras), instead of hiding the second. */
/* shared base: no halo or border, one grade, tone overlay + edge vignette inside the mask */
html .bl-det::before,html .dr::before{display:none}
html .pf-ch-st img{border:0}
html .bl-det img,html .dr img,html .pf-ch-st img{filter:saturate(.82) contrast(.93) brightness(.9) sepia(.1)}
html .bl-det picture,html .dr picture,html .pf-ch-st picture{position:relative;display:block}
html .bl-det picture::after,html .dr picture::after,html .pf-ch-st picture::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse at 50% 50%,transparent 42%,rgba(6,5,4,.55) 100%),linear-gradient(rgba(195,162,114,.08),rgba(6,5,4,.14));mix-blend-mode:multiply}
/* C · reel insets: a full-height panel on the right (left when the scene caption sits bottom-right) */
html.bl-on .bl-det{left:auto;right:0;top:0;bottom:0;width:38%;height:100%;transform:none!important}
html.bl-on .bl-shot:has(.c-br) .bl-det{right:auto;left:0}
html.bl-on .bl-det picture{height:100%;--ibh:90deg;
  -webkit-mask-image:linear-gradient(var(--ibh),transparent,rgba(0,0,0,.5) 24%,#000 52%),var(--ibv,linear-gradient(180deg,transparent,#000 14%,#000 86%,transparent));-webkit-mask-composite:source-in;
  mask-image:linear-gradient(var(--ibh),transparent,rgba(0,0,0,.5) 24%,#000 52%),var(--ibv,linear-gradient(180deg,transparent,#000 14%,#000 86%,transparent));mask-composite:intersect}
html.bl-on .bl-shot:has(.c-br) .bl-det picture{--ibh:270deg}
/* Matt 10/29 8:21 AM: mask flipped so the panel feathers on its INNER edge (toward the scene) and never reads as pasted; the outer edge meets the screen edge */
html.bl-on .bl-det img{height:100%;object-fit:cover}
html.bl-on .bl-det figcaption{position:absolute;left:0;right:0;bottom:10%;margin:0}
/* two insets: stacked in the panel, 18% of the frame overlapping, feathered top and bottom */
html.bl-on .bl-shot:has(.bl-det+.bl-det) .bl-det{bottom:auto;height:59%}
html.bl-on .bl-shot:has(.bl-det+.bl-det) .bl-det+.bl-det{top:auto;bottom:0}
html.bl-on .bl-shot:has(.bl-det+.bl-det) .bl-det:first-of-type picture{--ibv:linear-gradient(180deg,transparent,#000 16%,#000 66%,transparent)}
html.bl-on .bl-shot:has(.bl-det+.bl-det) .bl-det+.bl-det picture{--ibv:linear-gradient(180deg,transparent,#000 34%,#000 84%,transparent)}
html.bl-on .bl-shot:has(.bl-det+.bl-det) .bl-det:first-of-type figcaption{bottom:40%}
html.bl-on .bl-shot:has(.bl-det+.bl-det) .bl-det+.bl-det figcaption{bottom:18%}
/* C · Collection chapter extras: the two stills share a 38% side panel, the second feathered up into the first */
html .pf-ch-st{inset:0 0 0 auto;top:0;width:38%;display:grid;grid-template-rows:1fr 1fr;gap:0;
  -webkit-mask-image:linear-gradient(270deg,#000 44%,rgba(0,0,0,.5) 72%,transparent),linear-gradient(180deg,transparent 10%,#000 26%);-webkit-mask-composite:source-in;mask-image:linear-gradient(270deg,#000 44%,rgba(0,0,0,.5) 72%,transparent),linear-gradient(180deg,transparent 10%,#000 26%);mask-composite:intersect}
html .pf-ch-st figure{position:relative;overflow:hidden}
html .pf-ch-st picture{height:100%}
html .pf-ch-st img{height:100%;aspect-ratio:auto}
html .pf-ch-st figure:first-child picture{-webkit-mask-image:linear-gradient(180deg,transparent,#000 18%,#000 82%,transparent 100%);mask-image:linear-gradient(180deg,transparent,#000 18%,#000 82%,transparent 100%)}
html .pf-ch-st figure+figure{margin-top:-18%}
html .pf-ch-st figure+figure picture{-webkit-mask-image:linear-gradient(180deg,transparent,#000 26%,#000 84%,transparent);mask-image:linear-gradient(180deg,transparent,#000 26%,#000 84%,transparent)}
@media (max-width:760px){
  /* phones: the inset becomes a full-width band near the top that fades down into the scene */
  html.bl-on .bl-det,html.bl-on .bl-shot:has(.c-br) .bl-det{left:0;right:0;top:7svh;bottom:auto;width:100%;height:30svh}
  html.bl-on .bl-det picture,html.bl-on .bl-shot:has(.c-br) .bl-det picture{-webkit-mask-image:var(--ibm,linear-gradient(180deg,#000 55%,rgba(0,0,0,.55) 78%,transparent));mask-image:var(--ibm,linear-gradient(180deg,#000 55%,rgba(0,0,0,.55) 78%,transparent))}
  html.bl-on .bl-det figcaption{bottom:22%}
  html.bl-on .bl-shot:has(.bl-det+.bl-det) .bl-det{height:24svh}
  html.bl-on .bl-shot:has(.bl-det+.bl-det) .bl-det+.bl-det{top:26svh;bottom:auto}
  html.bl-on .bl-shot:has(.bl-det+.bl-det) .bl-det+.bl-det picture{--ibm:linear-gradient(180deg,transparent,#000 26%,#000 60%,transparent)}
  html.bl-on .bl-shot:has(.bl-det+.bl-det) .bl-det:nth-of-type(n) figcaption{bottom:26%}
  html .pf-ch-st{display:grid;grid-template-rows:1fr;grid-template-columns:1fr 1fr;width:100%;height:40%;bottom:auto;
    -webkit-mask-image:linear-gradient(180deg,#000 55%,rgba(0,0,0,.55) 78%,transparent);mask-image:linear-gradient(180deg,#000 55%,rgba(0,0,0,.55) 78%,transparent)}
  html .pf-ch-st figure+figure{margin-top:0;margin-left:-18%}
  html .pf-ch-st figure:first-child picture{-webkit-mask-image:linear-gradient(90deg,#000 80%,transparent);mask-image:linear-gradient(90deg,#000 80%,transparent)}
  html .pf-ch-st figure+figure picture{-webkit-mask-image:linear-gradient(90deg,transparent,#000 24%);mask-image:linear-gradient(90deg,transparent,#000 24%)}
}