/* New Jersey Film Locations — design system v2
   Concept: "Through the lens" — the site behaves like a location scout's
   camera. Cinematic dark surfaces, viewfinder framing, timecode details,
   verification stamps. Progressive enhancement over server-rendered HTML. */


:root{
  --ink:#15181F;
  --ink-raised:#1E222B;
  --paper:#EFEAE0;
  --paper-raised:#F6F2EA;
  --signal:#E7A62C;
  --signal-bright:#F5B93E;
  --steel:#3F5A66;
  --steel-light:#6E8B99;
  --rule:#C9C2B4;
  --rule-dark:rgba(239,234,224,0.14);
  --rust:#B6472A;
  --rec:#E5484D;
  --ink-soft:rgba(28,31,38,0.68);
  --paper-soft:rgba(239,234,224,0.72);
  --max:1180px;
  --ease:cubic-bezier(0.22,1,0.36,1);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'Source Serif 4', Georgia, serif;
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.eyebrow,.button,nav a,.quickfacts dt,.stamp,.tc,.marquee span{
  font-family:'Archivo Expanded','Arial Narrow',sans-serif;
}
.mono,.quickfacts dd,.verified,.lastmod,code,.datefield{
  font-family:'IBM Plex Mono',ui-monospace,monospace;
}

a{color:var(--steel); transition:color .2s var(--ease);}
a:hover{color:var(--rust);}
img{max-width:100%;display:block;}
.wrap{max-width:var(--max); margin:0 auto; padding:0 24px;}

.skip-link{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--paper);padding:10px 16px;z-index:100;font-family:'IBM Plex Mono',monospace;font-size:14px;}
.skip-link:focus{left:16px;top:16px;}

/* ---------- Reveal animations (JS adds .in) ---------- */
.reveal{opacity:0; transform:translateY(26px); transition:opacity .7s var(--ease), transform .7s var(--ease);}
.reveal.in{opacity:1; transform:none;}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .reveal{opacity:1; transform:none; transition:none;}
  .marquee-track{animation:none !important;}
  .rec-dot{animation:none !important;}
}

/* ---------- Header: sticky, cinematic ---------- */
header.site{
  background:rgba(21,24,31,0.92);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  color:var(--paper);
  border-bottom:3px solid var(--signal);
  position:sticky; top:0; z-index:50;
}
header.site .wrap{
  display:flex; align-items:center; justify-content:space-between;
  padding-top:16px; padding-bottom:16px; gap:24px; flex-wrap:wrap;
}
.brand{
  font-weight:800; font-size:18px; letter-spacing:0.01em; text-decoration:none; color:var(--paper);
  display:flex; flex-direction:column; line-height:1.15;
}
.brand small{
  font-family:'IBM Plex Mono',monospace; font-weight:400; font-size:10.5px;
  letter-spacing:0.08em; text-transform:uppercase; color:var(--signal); margin-top:3px;
}
nav.primary ul{list-style:none; display:flex; gap:22px; margin:0; padding:0; flex-wrap:wrap;}
nav.primary a{
  color:var(--paper); text-decoration:none; font-size:12.5px; letter-spacing:0.04em;
  text-transform:uppercase; font-weight:700; border-bottom:2px solid transparent; padding-bottom:3px;
  transition:border-color .2s var(--ease), color .2s var(--ease);
}
nav.primary a:hover{border-bottom-color:var(--signal); color:var(--signal-bright);}

/* ---------- Breadcrumbs ---------- */
.breadcrumbs{
  font-family:'IBM Plex Mono',monospace; font-size:12.5px; color:var(--ink-soft);
  padding:14px 0; border-bottom:1px solid var(--rule);
}
.breadcrumbs a{color:var(--steel); text-decoration:none;}
.breadcrumbs a:hover{text-decoration:underline;}
.breadcrumbs .sep{margin:0 8px; color:var(--rule);}

/* ---------- Cinematic hero (homepage + optional interior) ---------- */
.hero{padding:64px 0 48px; border-bottom:1px solid var(--rule); position:relative;}
.hero--cine{
  background:
    radial-gradient(1200px 500px at 78% -10%, rgba(231,166,44,0.14), transparent 60%),
    radial-gradient(900px 420px at 12% 110%, rgba(63,90,102,0.35), transparent 55%),
    var(--ink);
  color:var(--paper);
  border-bottom:none;
  padding:0;
  overflow:hidden;
}
.hero--cine::after{ /* subtle film grain */
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.05;
  background-image:repeating-conic-gradient(rgba(255,255,255,0.6) 0% 0.0001%, transparent 0.0002% 0.0004%);
  background-size:180px 180px;
}
.viewfinder{
  position:relative; max-width:var(--max); margin:0 auto;
  padding:96px 48px 84px;
}
.vf-corner{position:absolute; width:34px; height:34px; border:3px solid var(--signal); opacity:.9;}
.vf-corner.tl{top:28px; left:24px; border-right:none; border-bottom:none;}
.vf-corner.tr{top:28px; right:24px; border-left:none; border-bottom:none;}
.vf-corner.bl{bottom:28px; left:24px; border-right:none; border-top:none;}
.vf-corner.br{bottom:28px; right:24px; border-left:none; border-top:none;}
.vf-meta{
  position:absolute; top:34px; left:0; right:0; display:flex; justify-content:center; gap:28px;
  font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:0.14em;
  color:var(--paper-soft); text-transform:uppercase;
}
.rec{display:flex; align-items:center; gap:8px; color:var(--paper);}
.rec-dot{width:9px; height:9px; border-radius:50%; background:var(--rec); animation:blink 1.6s steps(1) infinite;}
@keyframes blink{50%{opacity:0.15;}}
.tc{color:var(--signal);}
.hero--cine .eyebrow{color:var(--signal); }
.hero--cine h1{color:var(--paper); font-size:clamp(38px,6.4vw,72px); letter-spacing:-0.015em; line-height:1.02; margin:0 0 20px; max-width:16ch;}
.hero--cine h1 .accent{color:var(--signal);}
.hero--cine .lede{color:var(--paper-soft); font-size:19px; max-width:58ch;}
.hero--cine .button.primary{background:var(--signal); border-color:var(--signal); color:var(--ink);}
.hero--cine .button.primary:hover{background:var(--signal-bright); border-color:var(--signal-bright); transform:translateY(-2px);}
.hero--cine .button.secondary{color:var(--paper); border-color:var(--paper-soft);}
.hero--cine .button.secondary:hover{border-color:var(--signal); color:var(--signal-bright); transform:translateY(-2px);}

.eyebrow{
  display:inline-block; font-size:12px; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--rust); font-weight:700; margin-bottom:14px;
}
h1{font-size:clamp(30px,5vw,46px); line-height:1.08; margin:0 0 18px; font-weight:800; letter-spacing:-0.01em;}
.lede{font-size:19px; color:var(--ink-soft); max-width:60ch; margin:0 0 28px;}
.cta-row{display:flex; gap:14px; flex-wrap:wrap;}

.button{
  display:inline-block; text-decoration:none; font-size:13.5px; font-weight:700;
  letter-spacing:0.04em; text-transform:uppercase; padding:14px 24px; border:2px solid var(--ink);
  transition:transform .2s var(--ease), background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.button.primary{background:var(--ink); color:var(--paper);}
.button.primary:hover{background:var(--rust); border-color:var(--rust); color:var(--paper); transform:translateY(-2px); box-shadow:0 8px 20px rgba(21,24,31,0.18);}
.button.secondary{background:transparent; color:var(--ink); border-color:var(--ink);}
.button.secondary:hover{border-color:var(--steel); color:var(--steel); transform:translateY(-2px);}

/* ---------- Film-strip divider ---------- */
.filmstrip{
  height:34px; background:var(--ink); position:relative; overflow:hidden;
}
.filmstrip::before, .filmstrip::after{
  content:""; position:absolute; left:0; right:0; height:8px;
  background-image:repeating-linear-gradient(90deg, transparent 0 10px, var(--paper) 10px 20px, transparent 20px 30px);
  opacity:.85;
}
.filmstrip::before{top:4px;}
.filmstrip::after{bottom:4px;}

/* ---------- Credits marquee ---------- */
.marquee{
  background:var(--ink); color:var(--paper); overflow:hidden; padding:14px 0;
  border-top:1px solid var(--rule-dark); border-bottom:3px solid var(--signal);
}
.marquee-track{
  display:flex; gap:56px; white-space:nowrap; width:max-content;
  animation:scroll 38s linear infinite;
}
.marquee span{
  font-size:13px; letter-spacing:0.16em; text-transform:uppercase; font-weight:700;
  color:var(--paper-soft);
}
.marquee span em{font-style:normal; color:var(--signal);}
@keyframes scroll{to{transform:translateX(-50%);}}

/* ---------- Sections ---------- */
section{padding:64px 0; border-bottom:1px solid var(--rule);}
section:last-of-type{border-bottom:none;}
section.dark{background:var(--ink); color:var(--paper); border-bottom:none;}
section.dark h2{color:var(--paper);}
section.dark .section-intro{color:var(--paper-soft);}
h2{font-size:clamp(26px,3.6vw,36px); margin:0 0 10px; font-weight:800; letter-spacing:-0.012em;}
.section-intro{color:var(--ink-soft); max-width:64ch; margin:0 0 32px;}

/* ---------- Interactive NJ map ---------- */
.map-grid{display:grid; grid-template-columns:minmax(280px,420px) 1fr; gap:48px; align-items:center;}
@media (max-width:800px){.map-grid{grid-template-columns:1fr;}}
.njmap{width:100%; max-width:420px; height:auto; display:block; margin:0 auto;}
.njmap .state{fill:var(--ink-raised); stroke:var(--signal); stroke-width:2;}
.njmap .marker{cursor:pointer;}
.njmap .marker circle.pin{fill:var(--signal); stroke:var(--ink); stroke-width:2; transition:r .2s var(--ease), fill .2s var(--ease);}
.njmap .marker:hover circle.pin, .njmap .marker:focus circle.pin{fill:var(--signal-bright);}
.njmap .marker circle.pulse{fill:none; stroke:var(--signal); stroke-width:1.5; opacity:.5;}
.njmap .marker text{
  font-family:'IBM Plex Mono',monospace; font-size:11px; fill:var(--paper); letter-spacing:.04em;
  paint-order:stroke; stroke:var(--ink); stroke-width:3px; stroke-linejoin:round;
}
.map-list{list-style:none; margin:0; padding:0;}
.map-list li{border-top:1px solid var(--rule-dark); }
.map-list li:first-child{border-top:none;}
.map-list a{
  display:flex; justify-content:space-between; align-items:baseline; gap:16px;
  padding:18px 6px; text-decoration:none; color:var(--paper);
  transition:padding-left .25s var(--ease), background .25s var(--ease);
}
.map-list a:hover{padding-left:18px; background:rgba(231,166,44,0.07); color:var(--signal-bright);}
.map-list .town{font-family:'Archivo Expanded',sans-serif; font-weight:700; font-size:17px;}
.map-list .note{font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--paper-soft);}

/* ---------- Card grid: film slates ---------- */
.grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:14px; background:transparent;}
.card{
  background:var(--paper-raised); padding:26px 24px; border:1px solid var(--rule);
  border-top:4px solid var(--ink); position:relative;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.card:hover{transform:translateY(-6px); box-shadow:0 16px 32px rgba(21,24,31,0.12); border-top-color:var(--signal);}
.card img.icon{width:64px; height:48px; margin-bottom:14px; display:block;}
.card h3{font-size:16px; margin:0 0 8px; font-weight:700; letter-spacing:0.01em;}
.card p{margin:0; color:var(--ink-soft); font-size:15px;}
.card a{font-weight:700;}

/* ---------- Stamp card ---------- */
.stampcard{
  border:2px solid var(--ink); background:var(--paper-raised); padding:26px; position:relative; margin:28px 0;
  box-shadow:6px 6px 0 rgba(21,24,31,0.12);
}
.stamp{
  position:absolute; top:-14px; right:20px; background:var(--signal); color:var(--ink);
  border:2px solid var(--ink); padding:5px 12px; font-size:11px; font-weight:800;
  letter-spacing:0.08em; text-transform:uppercase; transform:rotate(-3deg);
}
.stamp.unverified{background:var(--paper); color:var(--rust); border-color:var(--rust);}
.quickfacts{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:16px 24px; margin:0;}
.quickfacts dt{font-size:11px; text-transform:uppercase; letter-spacing:0.08em; color:var(--ink-soft); margin:0 0 4px; font-weight:700;}
.quickfacts dd{margin:0; font-size:14.5px;}

/* ---------- Quick answer ---------- */
.quickanswer{
  background:var(--ink); color:var(--paper); padding:26px 28px; margin:30px 0;
  border-left:6px solid var(--signal); box-shadow:8px 8px 0 rgba(21,24,31,0.14);
}
.hero--cine .quickanswer{background:rgba(255,255,255,0.045); box-shadow:none; border:1px solid var(--rule-dark); border-left:6px solid var(--signal);}
.quickanswer .label{
  font-family:'IBM Plex Mono',monospace; font-size:11px; text-transform:uppercase;
  letter-spacing:0.1em; color:var(--signal); font-weight:600; margin-bottom:10px; display:block;
}
.quickanswer p{margin:0 0 10px; font-family:'Source Serif 4',serif; font-size:16.5px;}
.quickanswer .meta{font-family:'IBM Plex Mono',monospace; font-size:12px; color:rgba(239,234,224,0.6); margin:0;}

/* ---------- Numbered steps ---------- */
.steps{counter-reset:step;}
.step{display:grid; grid-template-columns:72px 1fr; gap:20px; padding:28px 0; border-top:1px solid var(--rule);}
.step:first-child{border-top:none;}
.step .num{font-family:'Archivo Expanded',sans-serif; font-weight:800; font-size:32px; color:var(--signal); text-shadow:2px 2px 0 rgba(21,24,31,0.15);}
.step h3{margin:0 0 8px; font-size:18px; font-weight:700;}
.step p,.step ul{margin:0 0 10px; color:var(--ink); font-size:15.5px;}
.step ul{padding-left:20px;}

/* ---------- FAQ ---------- */
.faq-item{border-top:1px solid var(--rule); padding:20px 0;}
.faq-item:first-child{border-top:none;}
.faq-item dt{font-weight:700; font-size:16px; margin-bottom:8px;}
.faq-item dd{margin:0; color:var(--ink-soft); font-size:15.5px;}

/* ---------- Related links ---------- */
.related{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:10px;}
.related a{
  background:var(--paper-raised); padding:20px 22px; text-decoration:none; color:var(--ink);
  font-size:14.5px; font-weight:600; display:block; border:1px solid var(--rule); border-left:4px solid var(--ink);
  transition:transform .22s var(--ease), background .22s var(--ease), color .22s var(--ease), border-color .22s var(--ease);
}
.related a:hover{background:var(--ink); color:var(--paper); transform:translateX(6px); border-left-color:var(--signal);}
.related span.chip{
  background:var(--paper-raised); padding:20px 22px; color:var(--ink-soft);
  font-size:14.5px; font-weight:600; display:block; border:1px solid var(--rule);
}

/* ---------- Highlights & sources ---------- */
.highlight{
  border-left:4px solid var(--signal); background:var(--paper-raised); padding:18px 22px; margin-bottom:10px;
  border-top:1px solid var(--rule); border-right:1px solid var(--rule); border-bottom:1px solid var(--rule);
  transition:transform .22s var(--ease), box-shadow .22s var(--ease);
}
.highlight:hover{transform:translateX(6px); box-shadow:0 10px 22px rgba(21,24,31,0.1);}
.highlight h4{margin:0 0 6px; font-size:15px; font-weight:700;}
/* h3 inside .highlight matches h4 exactly, so promoting h4->h3 to fix
   heading-level skips changes the outline without changing the look. */
.highlight h3{margin:0 0 6px; font-size:15px; font-weight:700;}
.highlight p{margin:0; font-size:14.5px; color:var(--ink-soft);}
.highlight a.photo-link{
  display:inline-block; margin-top:8px; font-size:13px; font-weight:700; text-decoration:none;
  color:var(--steel); border-bottom:1px solid var(--steel);
}
.highlight a.photo-link:hover{color:var(--rust); border-color:var(--rust);}
.flag{
  display:inline-block; font-family:'IBM Plex Mono',monospace; font-size:10.5px; text-transform:uppercase;
  letter-spacing:0.06em; background:var(--rust); color:var(--paper); padding:2px 7px; margin-left:8px; vertical-align:1px;
}
.sources{list-style:none; margin:0; padding:0; font-size:14px;}
.sources li{padding:10px 0; border-top:1px solid var(--rule);}
.sources li:first-child{border-top:none;}
.sources a{text-decoration:none;}
.sources a:hover{text-decoration:underline;}
.sources .tag{
  display:inline-block; font-family:'IBM Plex Mono',monospace; font-size:10.5px;
  text-transform:uppercase; letter-spacing:0.06em; color:var(--ink-soft); margin-right:8px;
  background:var(--paper); border:1px solid var(--rule); padding:1px 7px;
}

/* ---------- Disclaimer / footer ---------- */
.disclaimer{
  background:var(--paper-raised); border-top:1px solid var(--rule); border-bottom:1px solid var(--rule);
  font-size:13.5px; color:var(--ink-soft); padding:22px 0;
}
.disclaimer strong{color:var(--ink);}
footer.site{background:var(--ink); color:rgba(239,234,224,0.75); padding:48px 0 36px; font-size:13.5px; border-top:4px solid var(--signal);}
footer.site .wrap{display:flex; justify-content:space-between; flex-wrap:wrap; gap:24px;}
footer.site a{color:var(--paper); text-decoration:none; transition:color .2s var(--ease);}
footer.site a:hover{color:var(--signal);}
footer.site .cols{display:flex; gap:56px; flex-wrap:wrap;}
footer.site h4{font-size:11px; text-transform:uppercase; letter-spacing:0.1em; margin:0 0 12px; color:var(--signal);}
footer.site ul{list-style:none; margin:0; padding:0;}
footer.site li{margin-bottom:8px;}

.correction{font-size:13px; color:var(--ink-soft); margin-top:8px;}

a:focus-visible,button:focus-visible,.button:focus-visible{outline:3px solid var(--steel); outline-offset:2px;}

@media (max-width:640px){
  nav.primary ul{gap:14px;}
  .hero{padding:44px 0 36px;}
  .viewfinder{padding:76px 24px 64px;}
  .vf-meta{gap:14px; font-size:10.5px;}
  section{padding:44px 0;}
  .step{grid-template-columns:48px 1fr;}
  .step .num{font-size:24px;}
  footer.site .wrap{flex-direction:column;}
}

/* ---------- v2.1: real map + photography ---------- */
.hero-backdrop{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0.22; filter:saturate(0.75) contrast(1.05);
  mask-image:linear-gradient(180deg, rgba(0,0,0,0.9), rgba(0,0,0,0.35) 70%, transparent);
  -webkit-mask-image:linear-gradient(180deg, rgba(0,0,0,0.9), rgba(0,0,0,0.35) 70%, transparent);
  pointer-events:none;
}
.viewfinder{position:relative; z-index:1;}

.njmap{
  background:var(--paper); border:2px solid var(--ink);
  box-shadow:8px 8px 0 rgba(231,166,44,0.35); padding:0;
}
.njmap .fr-pin{fill:var(--rust); stroke:#fff; stroke-width:2; opacity:0.92;}
.njmap .fr-pin:hover{fill:var(--signal);}
.njmap .fr-county{fill:none; stroke:var(--steel); stroke-width:3;}
.njmap .marker circle.pin{fill:var(--signal); stroke:var(--ink); stroke-width:3;}
.njmap .marker:hover circle.pin, .njmap .marker:focus circle.pin{fill:var(--signal-bright);}
.njmap .marker circle.pulse{fill:none; stroke:var(--signal); stroke-width:2.5; opacity:.55;}
.njmap .marker text{
  font-family:'Archivo Expanded',sans-serif; font-weight:700; font-size:26px; fill:var(--ink);
  letter-spacing:.03em; paint-order:stroke; stroke:#fff; stroke-width:6px; stroke-linejoin:round;
}
.map-credit{
  font-family:'IBM Plex Mono',monospace; font-size:11.5px; color:var(--paper-soft);
  margin:14px 0 0; line-height:1.7;
}
.map-credit a{color:var(--signal);}
.photo-strip .map-credit{color:var(--ink-soft);}
.photo-strip .map-credit a{color:var(--steel);}
.dot-key,.sq-key,.big-key{display:inline-block; vertical-align:-1px; margin:0 3px;}
.dot-key{width:9px; height:9px; border-radius:50%; background:var(--rust); border:1.5px solid #fff;}
.sq-key{width:9px; height:9px; border:2px solid var(--steel);}
.big-key{width:11px; height:11px; border-radius:50%; background:var(--signal); border:2px solid var(--ink);}

/* Scout photo cards */
.photo-strip{background:var(--paper);}
.scoutgrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:22px;}
.scoutcard{
  display:block; text-decoration:none; color:var(--ink); background:var(--paper-raised);
  border:1px solid var(--rule); padding:12px 12px 16px; position:relative;
  box-shadow:0 2px 6px rgba(21,24,31,0.06);
  transition:transform .28s var(--ease), box-shadow .28s var(--ease);
}
.scoutcard:nth-child(odd){transform:rotate(-0.7deg);}
.scoutcard:nth-child(even){transform:rotate(0.6deg);}
.scoutcard:hover{transform:rotate(0deg) translateY(-8px); box-shadow:0 20px 40px rgba(21,24,31,0.18); z-index:2; color:var(--ink);}
.scoutcard .frame{display:block; overflow:hidden; border:1px solid var(--rule); background:var(--ink);}
.scoutcard img{width:100%; aspect-ratio:4/3; object-fit:cover; display:block; transition:transform .5s var(--ease);}
.scoutcard:hover img{transform:scale(1.05);}
.scoutcard .scout-title{
  display:block; font-family:'Archivo Expanded',sans-serif; font-weight:700; font-size:14.5px; margin:12px 2px 3px;
}
.scoutcard .scout-cap{display:block; font-size:13.5px; color:var(--ink-soft); margin:0 2px;}
.scoutcard .scout-credit{
  display:block; font-family:'IBM Plex Mono',monospace; font-size:10.5px; color:var(--ink-soft);
  margin:10px 2px 0; text-transform:uppercase; letter-spacing:0.06em;
}
.scoutcard .scout-credit span{border-bottom:1px dotted var(--ink-soft);}
@media (prefers-reduced-motion:reduce){
  .scoutcard, .scoutcard:nth-child(odd), .scoutcard:nth-child(even){transform:none;}
}

/* ---------- v2.2: collage, map layout, card buttons ---------- */
.collage{
  display:grid; grid-template-columns:repeat(6,1fr); grid-auto-rows:150px; gap:12px;
  margin:36px 0 14px;
}
.ctile{
  position:relative; display:block; overflow:hidden; border:1px solid var(--rule);
  grid-column:span 2; background:var(--ink);
}
.ctile--hero{grid-column:span 4; grid-row:span 2;}
.ctile:nth-of-type(2){grid-row:span 1;}
.ctile img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s var(--ease), filter .5s var(--ease);}
.ctile:hover img{transform:scale(1.06); filter:brightness(1.06);}
.ctile .clabel{
  position:absolute; left:0; right:0; bottom:0; padding:26px 14px 12px;
  background:linear-gradient(180deg, transparent, rgba(21,24,31,0.85));
  color:var(--paper); font-family:'Archivo Expanded',sans-serif; font-weight:700; font-size:14px;
  letter-spacing:0.01em;
}
.ctile .creg{
  display:block; font-family:'IBM Plex Mono',monospace; font-weight:500; font-size:10px;
  letter-spacing:0.12em; text-transform:uppercase; color:var(--signal); margin-bottom:2px;
}
@media (max-width:760px){
  .collage{grid-template-columns:repeat(2,1fr); grid-auto-rows:140px;}
  .ctile,.ctile--hero{grid-column:span 2; grid-row:span 1;}
  .ctile--hero{grid-row:span 2;}
}

/* Map layout: map+credit stacked in left column, town list beside */
.map-grid{grid-template-columns:minmax(320px,560px) 1fr; gap:44px; align-items:start;}
.map-col{min-width:0;}
.njmap{max-width:560px;}

/* Small buttons inside cards */
.button.sm{padding:10px 16px; font-size:11.5px; margin-top:16px;}
.card .button{display:inline-block;}

/* ---------- v2.3: map label + list refinements ---------- */
.njmap .marker text{font-size:23px;}
.map-list li.divider{
  border-top:1px solid var(--rule-dark); padding:20px 6px 8px;
  font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:0.12em;
  text-transform:uppercase; color:var(--signal);
}
.map-list li.divider + li{border-top:none;}

/* ---------- v2.4: forms ---------- */
.njfl-form label{display:block; font-family:'Archivo Expanded',sans-serif; font-weight:700; font-size:12.5px; letter-spacing:.03em; text-transform:uppercase; color:var(--ink); margin:18px 0 0;}
.njfl-form input[type=text], .njfl-form input[type=email], .njfl-form select, .njfl-form textarea{
  width:100%; display:block; margin-top:7px; padding:12px 14px; font-family:'Source Serif 4',serif; font-size:15.5px;
  border:2px solid var(--ink); background:var(--paper-raised); color:var(--ink);
}
.njfl-form input:focus, .njfl-form select:focus, .njfl-form textarea:focus{outline:3px solid var(--signal); outline-offset:0;}
.form-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:0 22px;}
.njfl-form label.check{display:flex; gap:10px; align-items:flex-start; font-family:'Source Serif 4',serif; font-weight:400; font-size:14px; text-transform:none; letter-spacing:0; margin-top:16px;}
.njfl-form label.check input{margin-top:3px;}
.njfl-form button{margin-top:22px; cursor:pointer;}
.form-status{font-family:'IBM Plex Mono',monospace; font-size:13px; color:var(--steel); margin-top:12px;}

/* ---------- v2.5: nav CTA ---------- */
nav.primary a.nav-cta{
  background:var(--signal); color:var(--ink); padding:8px 14px; border:2px solid var(--signal);
  border-bottom:2px solid var(--signal);
}
nav.primary a.nav-cta:hover{background:var(--signal-bright); border-color:var(--signal-bright); color:var(--ink);}
.photo-credits a{color:var(--steel);}

/* ---------- v2.6: interior page figures ---------- */
.figure-band{margin:0 0 36px; border:2px solid var(--ink); background:var(--ink); box-shadow:8px 8px 0 rgba(231,166,44,0.3);}
.figure-band img{width:100%; aspect-ratio:21/9; object-fit:cover; display:block;}
.figure-band figcaption{
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; align-items:baseline;
  padding:10px 14px; background:var(--ink); color:var(--paper);
  font-family:'IBM Plex Mono',monospace; font-size:11.5px; letter-spacing:0.04em;
}
.figure-band figcaption strong{font-family:'Archivo Expanded',sans-serif; font-size:12.5px; letter-spacing:0.06em; text-transform:uppercase; color:var(--signal);}
.figure-band figcaption a{color:rgba(239,234,224,0.6);}
.figure-band figcaption a:hover{color:var(--signal);}
.figure-band.in-section{margin-top:8px;}

/* ---------- v2.7: production notes ---------- */
.notes-list{display:flex; flex-direction:column;}
.note-item{
  display:block; text-decoration:none; color:var(--ink); padding:26px 18px;
  border-top:1px solid var(--rule); transition:background .22s var(--ease), padding-left .22s var(--ease);
}
.note-item:first-child{border-top:none;}
.note-item:hover{background:var(--paper-raised); padding-left:30px; color:var(--ink);}
.note-date{display:block; font-family:'IBM Plex Mono',monospace; font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--rust); margin-bottom:8px;}
.note-title{display:block; font-family:'Archivo Expanded',sans-serif; font-weight:800; font-size:21px; line-height:1.25; margin-bottom:8px;}
.note-item:hover .note-title{color:var(--steel);}
.note-teaser{display:block; font-size:15.5px; color:var(--ink-soft); max-width:70ch;}

/* ---------- v2.8: key facts tables ---------- */
.table-scroll{overflow-x:auto;}
.keyfacts-table{width:100%; border-collapse:collapse; font-size:14.5px; margin:8px 0 4px; background:var(--paper-raised); border:2px solid var(--ink);}
.keyfacts-table th{
  font-family:'Archivo Expanded',sans-serif; font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  text-align:left; background:var(--ink); color:var(--paper); padding:10px 14px;
}
.keyfacts-table td{padding:10px 14px; border-top:1px solid var(--rule); vertical-align:top;}
.keyfacts-table tr td:first-child{font-family:'IBM Plex Mono',monospace; font-size:12.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-soft); white-space:nowrap;}
.keyfacts-table a{font-weight:700;}

/* ---------- v2.9: mobile / iPhone refinements ---------- */
/* Prevent iOS Safari auto-zoom on form focus: inputs must be >=16px */
.njfl-form input[type=text], .njfl-form input[type=email], .njfl-form select, .njfl-form textarea{font-size:16px;}

@media (max-width:700px){
  /* Header: don't pin a tall header to a small screen */
  header.site{position:static;}
  header.site .wrap{flex-direction:column; align-items:flex-start; gap:12px; padding-top:14px; padding-bottom:12px;}
  .brand{font-size:16px;}
  /* Nav: one row, horizontally scrollable, instead of wrapping into a block */
  nav.primary{width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none;}
  nav.primary::-webkit-scrollbar{display:none;}
  nav.primary ul{flex-wrap:nowrap; gap:18px; padding-bottom:4px; width:max-content;}
  nav.primary a{white-space:nowrap; font-size:12px;}
  nav.primary a.nav-cta{padding:6px 11px;}
  /* Hero viewfinder: tighter meta row that can wrap */
  .vf-meta{flex-wrap:wrap; position:static; justify-content:flex-start; margin-bottom:22px;}
  .viewfinder{padding:40px 22px 56px;}
  .vf-corner{width:24px; height:24px;}
  /* Map town list: let rows wrap rather than squeeze */
  .map-list a{flex-wrap:wrap;}
  /* Slightly smaller display type on small screens */
  .hero--cine h1{font-size:clamp(32px,9vw,44px);}
  .note-title{font-size:18px;}
}

/* ---------- v3.0: production notes redesign + reviewer card ---------- */
.notes-strip{
  background:var(--ink); color:var(--paper-soft); padding:14px 0; border-bottom:3px solid var(--signal);
  font-family:'IBM Plex Mono',monospace; font-size:11.5px; letter-spacing:.14em; text-transform:uppercase;
}
.notes-strip .wrap{display:flex; gap:28px; flex-wrap:wrap;}
.notes-strip span::before{content:"\25A0"; color:var(--signal); margin-right:10px; font-size:8px; vertical-align:2px;}

.notecard{
  display:block; text-decoration:none; color:var(--ink); background:var(--paper-raised);
  border:2px solid var(--ink); padding:30px 28px; position:relative;
  box-shadow:6px 6px 0 rgba(21,24,31,0.12);
  transition:transform .25s var(--ease), box-shadow .25s var(--ease);
}
.notecard:hover{transform:translate(-3px,-3px); box-shadow:12px 12px 0 rgba(231,166,44,0.5); color:var(--ink);}
.notecard .idx{
  position:absolute; top:-14px; left:20px; background:var(--paper); border:2px solid var(--ink);
  font-family:'IBM Plex Mono',monospace; font-size:11px; font-weight:600; letter-spacing:.1em;
  padding:4px 10px;
}
.notecard .nc-meta{display:block; font-family:'IBM Plex Mono',monospace; font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--rust); margin-bottom:12px;}
.notecard .nc-title{display:block; font-family:'Archivo Expanded',sans-serif; font-weight:800; font-size:22px; line-height:1.22; margin-bottom:12px;}
.notecard .nc-teaser{display:block; font-size:15.5px; color:var(--ink-soft); margin-bottom:16px;}
.notecard .nc-read{font-family:'Archivo Expanded',sans-serif; font-weight:700; font-size:12.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--steel); border-bottom:2px solid var(--signal); padding-bottom:2px;}
.notecard:hover .nc-read{color:var(--rust);}

.notecard--featured{
  background:var(--ink); color:var(--paper); border-color:var(--ink);
  box-shadow:8px 8px 0 rgba(231,166,44,0.45); padding:40px 36px;
}
.notecard--featured:hover{color:var(--paper); box-shadow:14px 14px 0 rgba(231,166,44,0.65);}
.notecard--featured .idx{background:var(--signal); color:var(--ink);}
.notecard--featured .nc-meta{color:var(--signal);}
.notecard--featured .nc-title{font-size:clamp(24px,3.4vw,34px); max-width:22ch;}
.notecard--featured .nc-teaser{color:var(--paper-soft); font-size:16.5px; max-width:64ch;}
.notecard--featured .nc-read{color:var(--signal-bright);}
.notes-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:26px; margin-top:30px;}

.article-meta{
  display:flex; gap:12px; flex-wrap:wrap; align-items:center; margin-top:6px;
  font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:.06em;
}
.article-meta .chip{background:var(--ink); color:var(--signal); padding:5px 12px; text-transform:uppercase; font-weight:600;}
.article-meta .date{color:var(--ink-soft);}
.article-body > p:first-child{font-size:19.5px; line-height:1.6; color:var(--ink);}
.article-body p{margin:0 0 22px;}

.reviewer-card{
  display:flex; gap:20px; align-items:flex-start; background:var(--paper-raised);
  border:2px solid var(--ink); border-left:8px solid var(--signal); padding:24px 26px; margin:0;
}
.reviewer-card .rc-badge{
  flex:none; width:56px; height:56px; background:var(--ink); color:var(--paper);
  display:flex; align-items:center; justify-content:center;
  font-family:'Archivo Expanded',sans-serif; font-weight:800; font-size:17px; letter-spacing:.02em;
}
.reviewer-card .rc-label{font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--rust); display:block; margin-bottom:5px;}
.reviewer-card strong{font-family:'Archivo Expanded',sans-serif; font-size:15px;}
.reviewer-card p{margin:6px 0 0; font-size:14px; color:var(--ink-soft); line-height:1.6;}
.reviewer-card a{font-weight:700;}
@media (max-width:640px){.reviewer-card{flex-direction:column;}}

/* ---------- v4: studio directory + expansion ---------- */
.jumpnav{display:flex; gap:10px; flex-wrap:wrap; margin-top:22px;}
.jumpnav a{
  font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--paper); background:transparent; border:1px solid rgba(239,234,224,0.35);
  padding:7px 13px; text-decoration:none; transition:all .2s var(--ease);
}
.jumpnav a:hover{border-color:var(--signal); color:var(--signal);}
.filterbar{display:flex; gap:20px; flex-wrap:wrap; align-items:flex-end; background:var(--paper-raised); border:2px solid var(--ink); padding:18px 20px;}
.filterbar label{font-family:'Archivo Expanded',sans-serif; font-size:11px; letter-spacing:.08em; text-transform:uppercase; display:flex; flex-direction:column; gap:6px;}
.filterbar select{
  font-family:'IBM Plex Mono',monospace; font-size:16px; padding:8px 10px;
  border:2px solid var(--ink); background:var(--paper); color:var(--ink); min-width:160px;
}
.filter-count{font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--ink-soft); margin-left:auto; padding-bottom:10px;}
.studio-table td{font-size:14px;}
.studio-table tr td:first-child{font-family:'Archivo Expanded',sans-serif; font-size:13px; text-transform:none; letter-spacing:0; color:var(--ink); white-space:normal;}

/* Mobile: tables become accessible stacked cards */
@media (max-width:700px){
  .studio-table, .studio-table tbody, .studio-table tr, .studio-table td{display:block; width:100%;}
  .studio-table thead{position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden;}
  .studio-table tr{border:2px solid var(--ink); background:var(--paper); margin:0 0 16px; padding:14px 14px 6px; box-shadow:4px 4px 0 rgba(21,24,31,0.12);}
  .studio-table td{border:none; padding:6px 0 10px; white-space:normal;}
  .studio-table td::before{
    content:attr(data-label); display:block;
    font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:.1em; text-transform:uppercase;
    color:var(--rust); margin-bottom:3px;
  }
  .filterbar{flex-direction:column; align-items:stretch;}
  .filter-count{margin-left:0;}
  .keyfacts-table tr td:first-child{white-space:normal;}
}

/* ---------- v4.1: map-list group headers + accessible markers ---------- */
.map-list-head{list-style:none; margin:14px 0 4px; padding:0;}
.map-list-head:first-child{margin-top:0;}
.map-list-head span{
  font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--rust); display:block; padding-bottom:6px; border-bottom:1px solid var(--rule);
}
.fr-marker{cursor:pointer; outline:none;}
.fr-marker:focus-visible .fr-pin,
.fr-marker:focus-visible .fr-county{stroke:var(--signal); stroke-width:3px;}
.fr-marker:hover .fr-pin,
.fr-marker:hover .fr-county{stroke:var(--signal); stroke-width:2px;}

/* ---------- v5.1: equipment directory ---------- */
ul.plain{list-style:none; margin:10px 0 0; padding:0;}
ul.plain li{padding:5px 0; border-top:1px solid var(--rule); font-size:14.5px;}
ul.plain li:first-child{border-top:none;}
ul.plain a{font-weight:600;}
.highlight .quickfacts{margin:12px 0 14px;}

/* ---------- v6.1: FIX — collapse map grid on small screens ----------
   The later unscoped .map-grid rule (2-column) was overriding the earlier
   @media collapse because it appears further down the cascade. This block
   is last in the file, so the single-column mobile layout wins. */
@media (max-width:800px){
  /* Use display:block rather than fighting grid-template-columns.
     Guarantees the map and town list stack on every engine, including
     older WebKit, instead of forcing a 2-column minmax() that overflows
     a 390px viewport. */
  .map-grid{display:block !important;}
  .map-col{width:100% !important; max-width:100% !important; min-width:0 !important; margin:0 0 26px;}
  .njmap{max-width:100% !important; width:100% !important; height:auto; margin:0 auto;}
  .map-list{width:100% !important; max-width:100% !important;}
  .map-list a{padding-right:14px;}
  .map-list .town{font-size:16px; overflow-wrap:anywhere;}
  .map-list .note{white-space:normal; overflow-wrap:anywhere;}
  .map-credit, .photo-credits{overflow-wrap:anywhere;}
  /* Belt-and-braces: nothing in the map section may exceed the viewport */
  .map-grid *{max-width:100%;}
}

/* ---------- v6.2: FIX — grid minimums must never exceed a narrow viewport ----------
   repeat(auto-fit, minmax(300px,1fr)) forces a 300px column even when the
   container is smaller (e.g. iPhone SE at 320px => ~280px container), which
   overflows. min(300px,100%) lets the column shrink to the container. */
.notes-grid{grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));}
.grid{grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr));}
.related{grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));}
.form-grid{grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));}
.scoutgrid{grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr));}
.quickfacts{grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr));}

/* ---------- v9: jobs & casting board ---------- */
.lgrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(340px,100%),1fr)); gap:24px;}
.lcard{
  background:var(--paper-raised); border:2px solid var(--ink); padding:24px 22px;
  box-shadow:6px 6px 0 rgba(21,24,31,0.12); transition:transform .22s var(--ease), box-shadow .22s var(--ease);
}
.lcard:hover{transform:translate(-3px,-3px); box-shadow:12px 12px 0 rgba(231,166,44,0.45);}
.lcard h3{font-family:'Archivo Expanded',sans-serif; font-size:19px; line-height:1.25; margin:10px 0 12px;}
.lcard h3 a{text-decoration:none; color:var(--ink);}
.lcard h3 a:hover{color:var(--steel);}
.lcard .quickfacts{margin:0 0 16px;}

.lbadges{display:flex; flex-wrap:wrap; gap:6px;}
.lbadge{
  font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:.09em; text-transform:uppercase;
  border:1px solid var(--rule); padding:3px 8px; color:var(--ink-soft); background:var(--paper);
}
.lbadge--on{border-color:var(--steel); color:var(--steel); font-weight:600;}
.lbadge--off{border-color:var(--rust); color:var(--rust); font-weight:600;}
.lbadge--feat{border-color:var(--signal); color:var(--ink); background:var(--signal); font-weight:600;}

.emptystate{
  border:2px dashed var(--ink); background:var(--paper-raised);
  padding:44px 32px; text-align:center; box-shadow:6px 6px 0 rgba(21,24,31,0.08);
}
.emptystate h2{margin-top:0;}
.emptystate p{max-width:62ch; margin-left:auto; margin-right:auto;}

.filterbar input[type=search]{
  font-family:'IBM Plex Mono',monospace; font-size:16px; padding:8px 10px;
  border:2px solid var(--ink); background:var(--paper); color:var(--ink); min-width:200px;
}
.linkish{
  background:none; border:none; padding:0; font:inherit; color:var(--steel);
  text-decoration:underline; cursor:pointer;
}
.linkish:hover{color:var(--rust);}

.hp-field{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;}
.checkline{display:block; margin:14px 0; font-size:15px; line-height:1.55; max-width:70ch;}
.checkline input{margin-right:8px;}
.opt{color:var(--ink-soft); font-weight:400; text-transform:none; letter-spacing:0;}
.formswitch{display:flex; gap:10px; flex-wrap:wrap; margin:0 0 26px;}
.formswitch a{
  font-family:'Archivo Expanded',sans-serif; font-size:12.5px; letter-spacing:.05em; text-transform:uppercase;
  border:2px solid var(--ink); padding:10px 16px; text-decoration:none; color:var(--ink); background:var(--paper);
}
.formswitch a[aria-current="true"]{background:var(--ink); color:var(--paper);}
.formswitch a:hover{background:var(--signal); color:var(--ink);}
@media (max-width:700px){
  .lcard{padding:20px 16px;}
  .filterbar input[type=search]{min-width:0; width:100%;}
}

/* ---------- v9.1: author byline ---------- */
.byline{
  font-family:'IBM Plex Mono',monospace; font-size:12.5px; color:var(--ink-soft);
  margin-top:10px;
}
.byline a{color:var(--steel); text-decoration:underline;}
.byline a:hover{color:var(--rust);}

/* ---------- v10.1: template-break components ---------- */
@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@500;600&display=swap');

/* Editor's note — an honest, occasional aside in a human hand.
   Used sparingly (a handful of times sitewide, never as a repeating
   pattern on every page) so it reads as a real annotation, not a component. */
.editnote{
  position:relative; max-width:640px; margin:34px auto; padding:20px 26px 18px 30px;
  background:var(--paper-raised); border:1px solid var(--rule);
  box-shadow:3px 4px 0 rgba(21,24,31,0.06);
  transform:rotate(-0.4deg);
}
.editnote::before{
  content:"\2014 note"; position:absolute; top:-11px; left:24px;
  background:var(--signal); color:var(--ink); font-family:'IBM Plex Mono',monospace;
  font-size:10px; letter-spacing:.1em; text-transform:uppercase; padding:2px 8px;
  transform:rotate(-1deg);
}
.editnote p{
  font-family:'Caveat',cursive; font-size:22px; line-height:1.4; color:var(--ink);
  margin:0;
}
.editnote cite{
  display:block; margin-top:8px; font-family:'IBM Plex Mono',monospace; font-style:normal;
  font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft);
}

/* Pull-quote — a large editorial callout pulled from the page's own text.
   Breaks the section-by-section rhythm on the page it's used on. */
.pullquote{
  border-left:4px solid var(--signal); margin:40px 0; padding:6px 0 6px 28px;
}
.pullquote p{
  font-family:'Source Serif 4',serif; font-weight:600; font-style:italic;
  font-size:clamp(24px,3.4vw,34px); line-height:1.32; color:var(--ink); margin:0;
}

/* Versus / comparison split — for pages where two genuinely different
   authorities or systems sit side by side (e.g. municipal vs. federal). */
.versus{
  display:grid; grid-template-columns:1fr auto 1fr; gap:0; align-items:stretch;
  border:2px solid var(--ink); margin:24px 0;
}
.versus > div{padding:24px 26px;}
.versus > div:first-child{border-right:1px solid var(--rule);}
.versus .vs-divider{
  display:flex; align-items:center; justify-content:center; width:44px;
  font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.08em;
  color:var(--ink-soft); background:var(--paper-raised); border-left:1px solid var(--rule);
  border-right:1px solid var(--rule);
}
.versus h3{margin-top:0;}
@media (max-width:700px){
  .versus{grid-template-columns:1fr;}
  .versus > div:first-child{border-right:none; border-bottom:1px solid var(--rule);}
  .versus .vs-divider{width:100%; padding:6px 0; border-left:none; border-right:none; border-bottom:1px solid var(--rule);}
  .editnote{transform:none; margin:26px 0;}
}

/* ============================================================
   JOBS & CASTING BOARD — "launching soon" state
   Used by the launch pages generated by build-listings.py while
   JOB_BOARD_STATUS = "coming-soon". Safe to keep after the board
   goes active: .status-pill and .pathcard are generic.
   ============================================================ */

/* Visually hidden, still read by screen readers and still part of
   the heading outline. Used for section headings that would be
   visually redundant. */
.vh{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0;
}

.status-pill{
  display:inline-flex; align-items:center; gap:9px;
  font-family:'IBM Plex Mono',monospace; font-size:12px; font-weight:600;
  text-transform:uppercase; letter-spacing:.08em;
  color:var(--ink); background:var(--signal);
  border:2px solid var(--ink); border-radius:999px;
  padding:6px 14px; margin:0 0 14px;
}
.status-pill .dot{
  width:8px; height:8px; border-radius:50%;
  background:var(--ink); flex:none;
}

.grid.twoup{grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr)); gap:20px;}

.pathcard{display:flex; flex-direction:column;}
.pathcard h3{margin-top:0;}
.pathcard p:last-child{margin-bottom:0;}
.pathcard .button{margin-top:4px;}

/* Form field wrapper. The site's older forms wrap the input inside the
   <label>; these newer ones use an explicit for/id pair so the label is
   always visible and always programmatically associated. */
.njfl-form .field{margin:18px 0 0;}
.njfl-form .field label{margin:0;}
.njfl-form .hint{
  display:block; margin-top:6px;
  font-family:'Source Serif 4',serif; font-size:13.5px; color:var(--ink-soft);
}
.njfl-form .req{color:var(--rust); margin-left:2px;}

/* Native validation styling: only after the browser has flagged the field,
   so an untouched required field is not shown as an error on load. */
.njfl-form input:user-invalid, .njfl-form select:user-invalid{
  border-color:var(--rust); outline-color:var(--rust);
}

/* Footer marker for the jobs & casting board while it is pre-launch.
   Remove this span from the footer link when JOB_BOARD_STATUS = "active". */
.site footer .soon, footer.site .soon{
  display:inline-block; margin-left:6px;
  font-family:'IBM Plex Mono',monospace; font-size:10.5px; font-weight:600;
  text-transform:uppercase; letter-spacing:.07em;
  color:var(--signal); opacity:.95; white-space:nowrap;
}

/* ============================================================
   HOMEPAGE MAP — numbered pins + keyed legend
   Generated by _admin/relabel_map.py. The old approach drew each
   town's full name as SVG text next to its pin, which collided
   badly in the North Jersey cluster. Names now live in the key.
   ============================================================ */

/* Number inside a gold pin. Must override the older .marker text
   rule (26px Archivo with a heavy white stroke) that styled the
   full-name labels. */
.njmap .marker text.pinnum{
  font-family:'IBM Plex Mono',monospace;
  font-weight:700;
  font-size:18px;
  letter-spacing:0;
  fill:var(--ink);
  stroke:none;            /* kill the inherited white halo */
  paint-order:normal;
  pointer-events:none;    /* clicks belong to the pin, not the digit */
  user-select:none;
}

/* Slightly stronger pin edge now that it carries a number. */
.njmap .marker circle.pin{stroke-width:2.5;}

/* Number badge in the map key. */
.map-list .keynum{
  display:inline-grid; place-items:center;
  width:22px; height:22px; margin-right:10px;
  border-radius:50%;
  background:var(--signal); color:var(--ink);
  font-family:'IBM Plex Mono',monospace; font-weight:600; font-size:12px;
  vertical-align:2px; flex:none;
}

/* Inline "1" swatch in the credit line under the map. */
.map-credit .big-key{
  display:inline-grid; place-items:center;
  width:15px; height:15px; line-height:1;
  font-family:'IBM Plex Mono',monospace; font-weight:600; font-size:9px;
  color:var(--ink);
}

@media (max-width:640px){
  /* The map shrinks on small screens, so lift the digit a little. */
  .njmap .marker text.pinnum{font-size:19px;}
  .map-list .keynum{width:20px; height:20px; font-size:11px; margin-right:8px;}
}

/* ============================================================
   HOMEPAGE MAP KEY — compact two-column legend
   New Jersey is a tall, narrow state: the map viewBox is 839x1560
   (ratio 0.538), which is almost exactly the state's true bounding
   ratio (~0.526). There is no dead space to crop, so the map is
   always roughly twice as tall as it is wide.

   The key therefore has to be compact, or it runs far below the
   map. Previously it was 28 single-file rows at ~60px each, about
   1,700px against a ~1,040px map. Two columns plus tighter rows
   plus dropping 15 repetitions of the same note brings it inside
   the map's height.
   ============================================================ */

.map-grid{grid-template-columns:minmax(300px,500px) 1fr; gap:40px; align-items:start;}
.njmap{max-width:500px;}

.map-list{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  column-gap:22px;
  align-content:start;
}

/* Section headings and the intro line span the full width. */
.map-list .map-list-head,
.map-list .map-key-sub,
.map-list .map-key-cta{grid-column:1 / -1;}

.map-list .map-key-sub{
  list-style:none; border-top:none;
  margin:2px 0 6px; padding:0;
  font-family:'Source Serif 4',serif; font-size:13px; line-height:1.5;
  color:var(--paper-soft);
}

.map-list li.keyrow{border-top:1px solid var(--rule-dark); min-width:0;}
.map-list li.keyrow a{
  display:flex; align-items:baseline; justify-content:flex-start;
  gap:8px; padding:9px 4px; flex-wrap:nowrap;
}
.map-list li.keyrow .town{
  font-size:14.5px; letter-spacing:.01em;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0;
}
.map-list li.keyrow .note{
  font-size:10.5px; margin-left:auto; flex:none; opacity:.85;
}
.map-list li.keyrow a:hover{padding-left:10px;}

.map-list .keynum{
  width:19px; height:19px; margin-right:8px; font-size:10.5px;
  vertical-align:1px;
}

.map-list .map-key-cta{border-top:1px solid var(--rule-dark); margin-top:6px;}
.map-list .map-key-cta a{padding:14px 4px;}
.map-list .map-key-cta .town{font-size:14px; color:var(--signal); white-space:normal;}

/* Below the two-column breakpoint the key returns to a single column,
   where the old comfortable row height is fine again. */
@media (max-width:760px){
  .map-list{grid-template-columns:1fr;}
  .map-list li.keyrow a{padding:12px 4px;}
  .map-list li.keyrow .town{font-size:15.5px; white-space:normal;}
  .njmap{max-width:100%;}
}

/* Subheading directly under an H1. Used where a page's descriptive H1 replaced
   a creative line during the 2026-07-31 SEO pass: the H1 now states the topic
   plainly for search and screen readers, and the original editorial line is
   preserved here rather than deleted. */
.h1-sub{
  font-family:'Archivo Expanded',sans-serif; font-weight:600;
  font-size:clamp(16px,2.1vw,20px); line-height:1.35;
  color:var(--ink-soft); margin:-4px 0 18px; max-width:52ch;
}
.hero .h1-sub{color:var(--paper-soft);}

/* ============================================================
   ALL TOWN GUIDES INDEX  (/film-ready-towns#all-guides)
   Added 2026-07-31. Fixes a real internal-linking imbalance: six
   towns had 61 inlinks from the sitewide footer while the rest had
   4-9. Rather than stuff 33 links into every footer, the hub now
   carries a complete crawlable index. The two groups are kept
   visually distinct because "has a guide" is NOT "Film Ready
   certified" and the page must never blur that.
   ============================================================ */

.guide-index{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));
  gap:34px; margin-top:22px;
}
.guide-group h3{
  font-size:15px; margin:0 0 10px; padding-bottom:8px;
  border-bottom:2px solid var(--signal);
  display:flex; align-items:baseline; justify-content:space-between; gap:10px;
}
.guide-group .gi-count{
  font-family:'IBM Plex Mono',monospace; font-size:11px; font-weight:600;
  color:var(--ink-soft); flex:none;
}
.guide-list{margin:0; padding:0; list-style:none;}
.guide-list li{
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  padding:8px 2px; border-bottom:1px solid var(--rule);
}
.guide-list li:last-child{border-bottom:none;}
.guide-list a{font-weight:600; text-decoration:none;}
.guide-list a:hover{text-decoration:underline;}
.guide-list .county-tag{
  font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:.04em;
  color:var(--ink-soft); white-space:nowrap; flex:none;
}
@media (max-width:640px){
  .guide-list li{flex-wrap:wrap; gap:2px;}
  .guide-list .county-tag{width:100%;}
}

/* Location status labels on /film-locations. Added 2026-07-31.
   The page listed a private mansion, a State park and a bookable stage in the
   same visual treatment, which risked implying a documented filming history is
   an offer of access. Each label is derived from the entry's own sourced text;
   none asserts availability. */
.loc-status{
  display:inline-block; margin:0 0 8px; padding:3px 9px;
  font-family:'IBM Plex Mono',monospace; font-size:10.5px; font-weight:600;
  letter-spacing:.05em; text-transform:uppercase; border-radius:2px;
  border:1px solid currentColor;
}
.loc-doc   {color:var(--steel);}
.loc-priv  {color:var(--rust);}
.loc-inst  {color:var(--rust);}
.loc-state {color:var(--rust);}
.loc-studio{color:#2F6B4F;}