/*
Theme Name: Tuolumne Film
Description: Wireframe-stage theme for the Film Tuolumne redesign, v2 design language: Big Shoulders / Newsreader / Courier Prime, logo purple as the working accent. Classic theme skinning core blocks; pages carry their structure as tf-* classed block sections.
Version: 0.9.0
Author: Madden Media
Requires PHP: 8.4
Text Domain: tuolumnefilm
*/

/* Design tokens from docs/design (wireframe kit v2) */
:root {
    --paper: #ffffff;
    --stone: #f6f5f2;
    --ink: #211b1f;
    --sub: #6e676b;
    --faint: #6b6666;   /* 4.9:1+ on white and every tint — #757070 dipped to 4.2:1 on the tints */
    --line: #e5e1de;
    --purple: #78206c;
    --plum: #241722;
    --orange: #f08214;
    /* Section accents — complements of the logo pair, pulled from county
       photography: forest, river, gold hills, the Red Church. */
    --pine: #2e5c44;        /* purple's complement side — Locations family */
    --river: #2f5d7c;       /* orange's complement — Production Resources */
    --brick: #a63b2a;       /* marquee red — Events & News */
    --gold: #806512;        /* Gold Rush ochre, text-safe on white and the tints (4.8:1+) */
    --gold-bright: #c9a227; /* ochre for chips and borders, never text */
    --pine-tint: #eef4ef;
    --river-tint: #eaf1f5;
    --gold-tint: #faf3e3;
    --purple-tint: #f6ecf4;
    --brick-tint: #f9eeec;
    /* darker partners for button hovers on accent pages */
    --pine-deep: #234636;
    --river-deep: #234a63;
    --brick-deep: #872e20;
    --offwhite: #f6f5f2;  /* legacy alias */
    --accent: #78206c;    /* legacy alias */
    --display: 'Big Shoulders', 'Arial Narrow', sans-serif;
    --body-font: 'Newsreader', Georgia, serif;
    --ui: 'Newsreader', Georgia, serif;   /* legacy alias */
    --mono: 'Courier Prime', 'Courier New', monospace;
    --wrap: 1240px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
    margin: 0;
    font-family: var(--body-font);
    font-size: 18px;
    line-height: 1.65;
    color: var(--ink);
    background: var(--paper);
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; }
:focus-visible { outline: 2px solid var(--purple); outline-offset: 3px; }
/* purple ring disappears on plum; orange keeps 3:1+ on the dark bands */
.tf-hero2 :focus-visible, .tf-filmography :focus-visible, .tf-page-hero :focus-visible,
.site-footer :focus-visible, .tf-mnav :focus-visible { outline-color: var(--orange); }

h1, h2 {
    font-family: var(--display);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .005em;
    line-height: .96;
    margin: 0 0 .5em;
}
h1 { font-size: clamp(44px, 5.5vw, 72px); }
h2 { font-size: clamp(30px, 3.4vw, 46px); }
h3 { font-family: var(--body-font); font-weight: 500; font-size: 27px; line-height: 1.3; margin: 0 0 .5em; }
h4 {
    font-family: var(--mono);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    margin: 0 0 .8em;
}

a { color: var(--accent, var(--purple)); text-underline-offset: 3px; text-decoration-color: var(--accent, var(--purple)); text-decoration-thickness: 2px; }
a:hover { color: var(--accent-deep, var(--plum)); text-decoration-thickness: 2px; }

p { margin: 0 0 1em; }

hr.wp-block-separator {
    border: none;
    border-top: 1px solid var(--line);
    margin: 56px auto;
    width: 100%;
}

blockquote.wp-block-quote {
    margin: 32px 0;
    padding: 4px 0 4px 28px;
    border-left: 3px solid var(--purple);
    font-style: italic;
    font-size: 24px;
    line-height: 1.4;
}
blockquote.wp-block-quote cite {
    display: block;
    margin-top: 12px;
    font-family: var(--mono);
    font-style: normal;
    font-size: 13px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--sub);
}

/* ---------- header ---------- */

.site-header {
    position: relative;
    z-index: 10;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
}
.site-header__inner {
    max-width: var(--wrap);
    margin: 0 auto;
    padding: 14px 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    flex-wrap: wrap;
}
.site-header__brand { display: block; line-height: 0; }
.site-header__brand img { height: 66px; width: auto; }
.site-header nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 26px;
    flex-wrap: wrap;
}
.site-header nav a {
    text-decoration: none;
    font-family: var(--mono);
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--ink);
}
.site-header nav a:hover { color: var(--purple); }
.site-header .header-cta {
    font-family: var(--mono);
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    text-decoration: none;
    padding: 12px 22px;
    background: var(--purple);
    color: #fff;
    border: 1.5px solid var(--purple);
    white-space: nowrap;
}
.site-header .header-cta:hover { background: var(--plum); border-color: var(--plum); color: #fff; }

/* ---------- content containers ---------- */

.tf-main { display: block; }

.tf-content {
    max-width: 860px;
    margin: 0 auto;
    padding: 72px 40px 96px;
}
.tf-content > .wp-block-columns { margin-bottom: 1.5em; }

/* homepage sections: full-bleed group strips, inner content centered wide */
.tf-section { padding: 96px 40px; }
.tf-section > * { max-width: var(--wrap); margin-left: auto; margin-right: auto; }
.tf-content .tf-section { padding: 40px 0; }

/* ---------- shared atoms ---------- */

.tf-eyebrow, .tf-slug {
    font-family: var(--mono);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--accent, var(--sub));
    margin: 0 0 16px;
}
.tf-dot {
    display: inline-block;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--orange);
    margin-right: 9px;
    vertical-align: 1px;
}

.tf-meta {
    font-family: var(--mono);
    font-size: 13px;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--sub);
    margin: 0 0 12px;
}

.tf-wireframe-note,
.tf-disclaimer {
    font-family: var(--mono);
    font-size: 13px;
    color: var(--faint);
    font-style: italic;
}

.tf-lead { font-size: 22px; line-height: 1.55; }
.tf-disclaimer--page { max-width: var(--wrap); margin: 28px auto 0; }

.tf-arrow-link, .tf-content .tf-arrow-link {
    font-family: var(--mono);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--accent, var(--purple));
    text-decoration: none;
    border-bottom: 2px solid var(--accent, var(--purple));
    padding-bottom: 3px;
    white-space: nowrap;
}
.tf-arrow-link:hover { color: var(--accent-deep, var(--plum)); border-color: var(--accent-deep, var(--plum)); }
/* paragraph block holding a lone arrow link (section heads, band footers) */
.tf-link-row { margin: 0; display: flex; }

.tf-tag {
    display: inline-block;
    font-family: var(--mono);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 5px 10px;
    border: 1px solid var(--line);
    color: var(--sub);
}
.tf-tag--purple { border-color: var(--purple); color: var(--purple); }
/* Jurisdiction color key: purple = through the Film Commission, gold = CA
   State Parks, pine = US Forest Service, river = federal (NPS / BLM / BoR). */
.tf-tag--gold { border-color: var(--gold-bright); color: var(--gold); }
.tf-tag--pine { border-color: var(--pine); color: var(--pine); }
.tf-tag--river { border-color: var(--river); color: var(--river); }
.tf-tag--brick { border-color: var(--brick); color: var(--brick); }

/* section head row: heading left, arrow link right */
.tf-section-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 24px;
    flex-wrap: wrap;
    margin-bottom: 56px;
}
.tf-section-head h2 { margin: 0; }
.tf-section-head .tf-intro { max-width: 520px; margin: 14px 0 0; color: var(--sub); }

/* buttons */
.wp-block-button__link {
    font-family: var(--mono);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    text-decoration: none;
    padding: 16px 30px;
    border-radius: 0;
    border: 2px solid var(--accent, var(--purple));
    background: var(--accent, var(--purple));
    color: #fff;
}
.wp-block-button__link:hover { background: var(--accent-deep, var(--plum)); border-color: var(--accent-deep, var(--plum)); color: #fff; }
.wp-block-button.is-style-outline .wp-block-button__link {
    background: transparent;
    border-color: var(--ink);
    color: var(--ink);
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
    background: transparent;
    border-color: var(--accent, var(--purple));
    color: var(--accent, var(--purple));
}

/* Gravity Forms (Orbital theme) — match inputs and the submit to the theme */
.gform_wrapper.gform-theme--orbital {
    --gf-color-primary: var(--accent, var(--purple)) !important;
    --gf-color-primary-darker: var(--accent-deep, var(--plum)) !important;
    --gf-color-in-ctrl-primary: var(--accent, var(--purple)) !important;
    --gf-color-secondary: var(--accent, var(--purple)) !important;
    --gf-color-secondary-darker: var(--accent-deep, var(--plum)) !important;
    --gf-color-secondary-contrast: #fff !important;
    --gf-ctrl-file-zone-icon-color: var(--accent, var(--purple)) !important;
    --gf-ctrl-file-zone-radius: 0;
    --gf-ctrl-radius: 0;
    --gf-ctrl-border-color: var(--line) !important;
    --gf-ctrl-border-color-focus: var(--accent, var(--purple)) !important;
    --gf-ctrl-btn-radius: 0;
    --gf-ctrl-btn-bg-color-primary: var(--accent, var(--purple)) !important;
    --gf-ctrl-btn-bg-color-hover-primary: var(--accent-deep, var(--plum)) !important;
    --gf-ctrl-btn-border-color-primary: var(--accent, var(--purple)) !important;
    --gf-ctrl-btn-border-color-hover-primary: var(--accent-deep, var(--plum)) !important;
    --gf-ctrl-btn-border-width: 2px;
    --gf-ctrl-btn-font-family: var(--mono);
    --gf-ctrl-btn-font-size: 14px;
    --gf-ctrl-btn-font-weight: 700;
    --gf-ctrl-btn-letter-spacing: .1em;
    --gf-ctrl-btn-text-transform: uppercase;
    --gf-ctrl-btn-padding-x: 30px;
    --gf-ctrl-btn-padding-y: 16px;
    --gf-form-gap-y: 22px;
    --gf-ctrl-font-size: 16px !important; /* under 16px, iOS Safari zooms the page on focus */
}
.gform_wrapper.gform-theme--orbital .gfield .gfield_label {
    font-family: var(--mono);
    font-size: 13px;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--ink);
}
.tf-split-cta .gform_wrapper { margin: 26px 0 28px; }
.tf-content .gform_wrapper { margin-bottom: 28px; }
.gform_wrapper.gform-theme--orbital .gform_drop_area::before { color: var(--accent, var(--purple)); }
.gform_wrapper.gform-theme--orbital .gform_drop_area .gform_button_select_files {
    background: var(--accent, var(--purple));
    border-color: var(--accent, var(--purple));
    color: #fff;
}
.gform_wrapper.gform-theme--orbital .gform_drop_area .gform_button_select_files:hover {
    background: var(--accent-deep, var(--plum));
    border-color: var(--accent-deep, var(--plum));
}

/* soften AOS rise when the library is active */
[data-aos="fade-up"] { transform: translate3d(0, 18px, 0); }

/* ---------- hero: split panel + still reel ---------- */

.tf-hero2 {
    position: relative;
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    min-height: 640px;
    background: var(--plum);
}
.tf-hero2__copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 96px 72px 96px max(40px, calc((100vw - var(--wrap)) / 2 + 40px));
    color: #fff;
}
.tf-hero2__copy .tf-slug, .tf-hero2__copy .tf-eyebrow { color: rgba(255, 255, 255, .8); }
.tf-hero2__copy h1 { font-size: clamp(52px, 6.4vw, 104px); color: #fff; margin-bottom: 0; }
.tf-hero2__copy .tf-lead { color: rgba(255, 255, 255, .88); max-width: 520px; margin: 26px 0 36px; }
.tf-hero2__actions { display: flex; gap: 14px; flex-wrap: wrap; margin: 0; }
.tf-hero2__actions .tf-btn-solid {
    font-family: var(--mono); font-size: 14px; font-weight: 700; letter-spacing: .1em;
    text-transform: uppercase; text-decoration: none; padding: 16px 30px;
    background: #fff; color: var(--ink); border: 2px solid #fff;
}
.tf-hero2__actions .tf-btn-solid:hover { background: var(--orange); border-color: var(--orange); color: var(--ink); }
.tf-hero2__actions .tf-btn-ghost {
    font-family: var(--mono); font-size: 14px; font-weight: 700; letter-spacing: .1em;
    text-transform: uppercase; text-decoration: none; padding: 16px 30px;
    border: 2px solid rgba(255, 255, 255, .85); color: #fff;
}
.tf-hero2__actions .tf-btn-ghost:hover { background: rgba(255, 255, 255, .14); color: #fff; }

.tf-reel { position: relative; overflow: hidden; min-height: 420px; }
.tf-reel__frame { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity 1.2s ease; }
.tf-reel__frame.is-on { opacity: 1; }
.tf-reel__frame img { width: 100%; height: 100%; object-fit: cover; }
.tf-reel__frame figcaption {
    position: absolute; left: 0; right: 0; bottom: 0;
    padding: 44px 150px 18px 28px;
    font-family: var(--mono); font-size: 12.5px; font-weight: 700;
    letter-spacing: .1em; text-transform: uppercase; color: #fff;
    background: linear-gradient(180deg, transparent, rgba(20, 10, 18, .72));
}
.tf-reel__nav {
    position: absolute; right: 16px; bottom: 12px; z-index: 4;
    display: flex; align-items: center; gap: 10px;
    font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: .1em; color: #fff;
}
.tf-reel__nav button {
    width: 34px; height: 34px;
    background: rgba(20, 10, 18, .45); color: #fff;
    border: 1px solid rgba(255, 255, 255, .5);
    cursor: pointer;
    font-family: var(--mono); font-size: 16px; line-height: 1; padding: 0;
}
.tf-reel__nav button:hover { background: var(--purple); border-color: var(--purple); }
.tf-reel__count { min-width: 52px; text-align: center; text-shadow: 0 1px 4px rgba(20, 10, 18, .6); }

.tf-hero2__scroll {
    position: absolute; bottom: 26px; left: max(40px, calc((100vw - var(--wrap)) / 2 + 40px));
    display: inline-flex; align-items: center; gap: 10px; text-decoration: none;
    font-family: var(--mono); font-size: 12.5px; font-weight: 700; letter-spacing: .16em;
    text-transform: uppercase; color: rgba(255, 255, 255, .75); z-index: 3;
}
.tf-hero2__scroll:hover { color: #fff; }
.tf-hero2__scroll .arr { display: inline-block; animation: tf-drift 1.9s ease-in-out infinite; }
@keyframes tf-drift { 0%, 100% { transform: translateY(-2px); } 50% { transform: translateY(4px); } }
@media (prefers-reduced-motion: reduce) {
    .tf-reel__frame { transition: none; }
    .tf-hero2__scroll .arr { animation: none; }
}

/* legacy cover hero (interior pages) */
.wp-block-cover.tf-hero { display: flex; align-items: flex-end; min-height: 480px; padding: 0; }
.tf-hero .wp-block-cover__inner-container {
    max-width: var(--wrap); margin: 0 auto; width: 100%;
    padding: 120px 40px 72px; text-align: left; color: #fff;
}
.tf-hero .tf-eyebrow { color: rgba(255, 255, 255, .92); }
.tf-hero h1, .tf-hero h2 { color: #fff; }

/* ---------- call sheet strip ---------- */

.tf-callsheet { border-bottom: 1px solid var(--line); padding: 0 40px; }
/* runs the full width: no wrap cap, no outer side rules, hairlines only between columns */
.tf-callsheet > .wp-block-columns { margin: 0; gap: 0; }
.tf-callsheet .wp-block-column { padding: 30px 28px; border-right: 1px solid var(--line); margin: 0; }
.tf-callsheet .wp-block-column:last-child { border-right: none; }
.tf-callsheet .tf-k {
    font-family: var(--mono); font-size: 12.5px; font-weight: 700;
    letter-spacing: .11em; text-transform: uppercase; color: var(--sub); margin: 0 0 8px;
}
.tf-callsheet .tf-v {
    font-family: var(--display); font-weight: 700; text-transform: uppercase;
    font-size: clamp(18px, 1.8vw, 26px); line-height: 1.2; margin: 0;
}
.tf-callsheet .tf-v a { text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
/* stacked phone / social links: 24px+ tap targets (WCAG 2.5.8) */
.tf-v a { display: inline-block; padding: 2px 0; }
/* tablet: 2×2 call sheet so long values (the email address) never break mid-word */
@media (min-width: 782px) and (max-width: 1100px) {
    .tf-callsheet > .wp-block-columns { flex-wrap: wrap !important; }
    .tf-callsheet .wp-block-column { flex: 1 1 50%; min-width: 50%; box-sizing: border-box; padding: 26px 24px; }
    .tf-callsheet .wp-block-column:nth-child(2n) { border-right: none; }
    .tf-callsheet .wp-block-column:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
}
/* phone: stacked, so drop the boxes and keep hairlines between rows */
@media (max-width: 781px) {
    .tf-callsheet .wp-block-column { padding: 20px 0; border-right: none; }
    .tf-callsheet .wp-block-column:last-child { border-bottom: none; }
    .tf-callsheet .tf-k { margin-bottom: 6px; }
}

/* ---------- location cards ---------- */

.tf-loc-grid img, .tf-cards img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
}
.tf-loc-grid figure, .tf-cards figure { margin: 0 0 16px; }
.tf-loc-grid .tf-slug, .tf-loc-grid .tf-eyebrow { margin: 0 0 8px; }
.tf-loc-grid h3, .tf-cards h3 {
    font-family: var(--display); font-weight: 700; text-transform: uppercase;
    font-size: 24px; line-height: 1.3; margin: 0 0 10px;
}
.tf-loc-grid p:not(.tf-meta):not(.tf-slug):not(.tf-eyebrow), .tf-cards p { color: var(--sub); font-size: 16.5px; line-height: 1.55; }
.tf-loc-foot {
    max-width: var(--wrap); margin: 40px auto 0; padding-top: 22px;
    border-top: 1px solid var(--line);
    display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap;
    font-size: 16.5px; color: var(--sub);
}

/* ---------- location map ---------- */

.tf-map-section { padding: 80px 40px 104px; }
.tf-map-grid {
    max-width: var(--wrap); margin: 0 auto;
    display: grid; grid-template-columns: .9fr 1.7fr; align-items: stretch;
    border: 1px solid var(--line);
}
.tf-map-rail { display: flex; flex-direction: column; border-right: 1px solid var(--line); background: var(--paper); }
.tf-map-loc {
    display: block; text-align: left; background: none; border: none; cursor: pointer;
    font: inherit; padding: 18px 22px; border-bottom: 1px solid var(--line);
}
.tf-map-loc:last-child { border-bottom: none; }
.tf-map-loc .name {
    font-family: var(--display); font-weight: 700; text-transform: uppercase;
    font-size: 19px; line-height: 1; display: block; margin-bottom: 6px; color: var(--ink);
}
.tf-map-loc .juris {
    font-family: var(--mono); font-size: 12.5px; font-weight: 700;
    letter-spacing: .08em; text-transform: uppercase; color: var(--sub);
}
.tf-map-loc:hover .name, .tf-map-loc.is-active .name { color: var(--purple); }
.tf-map-loc.is-active { box-shadow: inset 4px 0 0 var(--purple); }
#tf-map, #tf-airmap { min-height: 600px; position: relative; background: var(--stone); }
#tf-map .maplibregl-canvas { filter: grayscale(.9) sepia(.14) brightness(1.03); }
#tf-airmap .maplibregl-canvas { filter: sepia(.1) brightness(1.03); } /* no grayscale: the county outline is drawn on the canvas */
#tf-map .tf-map-fallback, #tf-airmap .tf-map-fallback {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    font-family: var(--mono); font-size: 13px; color: var(--sub); text-align: center; padding: 24px;
}
.tf-pin {
    width: 16px; height: 16px; border-radius: 50%; background: var(--purple);
    border: 2.5px solid #fff; box-shadow: 0 1px 5px rgba(0, 0, 0, .35); cursor: pointer;
}
.tf-pin.is-active { background: var(--orange); }
/* airport map: plane pins, sized by tier (county strips > charter fields > majors) */
.tf-pin--dot, .tf-pin--dot.is-active { width: 12px; height: 12px; background: var(--ink); }
.tf-pin--county, .tf-pin--charter, .tf-pin--major,
.tf-pin--county.is-active, .tf-pin--charter.is-active, .tf-pin--major.is-active {
    background: none; border: none; box-shadow: none; border-radius: 0;
    display: flex; align-items: center; justify-content: center;
}
.tf-pin--county svg, .tf-pin--charter svg, .tf-pin--major svg {
    display: block; width: 100%; height: 100%; fill: var(--purple);
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .35)); transform: rotate(45deg);
    transition: fill .15s;
}
.tf-pin--county { width: 40px; height: 40px; }
.tf-pin--charter { width: 30px; height: 30px; }
.tf-pin--major { width: 24px; height: 24px; }
.tf-pin--major svg { fill: var(--plum); opacity: .75; }
.tf-pin--county.is-active svg, .tf-pin--charter.is-active svg, .tf-pin--major.is-active svg { fill: var(--orange); opacity: 1; }
.tf-airmap-section { padding-top: 56px; }
#tf-airmap { min-height: 460px; }
.tf-map-rail--air .tf-map-loc { padding: 10px 20px; }
.tf-map-rail--air .tf-map-loc .name { font-size: 15px; margin-bottom: 4px; }
.tf-map-rail--air .tf-map-loc .juris { font-size: 11.5px; }
.tf-map-rail--air .tf-map-loc .name::before {
    content: ''; display: inline-block; width: 12px; height: 12px; margin-right: 8px; vertical-align: -1px;
    background: var(--purple); border-radius: 50%;
}
.tf-map-rail--air .tf-map-loc[data-kind="county"] .name::before,
.tf-map-rail--air .tf-map-loc[data-kind="charter"] .name::before,
.tf-map-rail--air .tf-map-loc[data-kind="major"] .name::before {
    border-radius: 0; background: var(--purple);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21 16v-2l-8-5V3.5c0-.83-.67-1.5-1.5-1.5S10 2.67 10 3.5V9l-8 5v2l8-2.5V19l-2 1.5V22l3.5-1 3.5 1v-1.5L13 19v-5.5l8 2.5z'/%3E%3C/svg%3E") center/contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21 16v-2l-8-5V3.5c0-.83-.67-1.5-1.5-1.5S10 2.67 10 3.5V9l-8 5v2l8-2.5V19l-2 1.5V22l3.5-1 3.5 1v-1.5L13 19v-5.5l8 2.5z'/%3E%3C/svg%3E") center/contain no-repeat;
    width: 14px; height: 14px; transform: rotate(45deg);
}
.tf-map-rail--air .tf-map-loc[data-kind="major"] .name::before { background: var(--plum); opacity: .75; }
.tf-map-rail--air .tf-map-loc[data-kind="dot"] .name::before { background: var(--ink); }
.tf-map-rail--air .tf-map-loc.is-active .name::before, .tf-map-rail--air .tf-map-loc:hover .name::before { background: var(--purple); opacity: 1; }
/* credit links need more than color to stand out from the credit text (WCAG 1.4.1) */
.maplibregl-ctrl-attrib a { text-decoration: underline; text-underline-offset: 2px; }
.maplibregl-popup-content {
    font-family: var(--mono); font-size: 12px; letter-spacing: .05em; text-transform: uppercase;
    color: var(--ink); border-radius: 0; box-shadow: 0 2px 10px rgba(0, 0, 0, .18); padding: 12px 14px;
}
.maplibregl-popup-content b { display: block; font-size: 12.5px; margin-bottom: 3px; }
.maplibregl-popup-content span { color: var(--sub); font-size: 12px; }
.tf-map-caption {
    max-width: var(--wrap); margin: 14px auto 0;
    font-family: var(--mono); font-size: 12.5px; letter-spacing: .06em;
    text-transform: uppercase; color: var(--sub);
}

/* ---------- filmography band ---------- */

.tf-filmography { background: var(--plum); color: #fff; padding: 0; }
.tf-sprockets {
    height: 30px;
    background-color: transparent;
    /* 35mm-style perforations: rounded rectangles, taller than wide, one per 28px pitch */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='30'%3E%3Crect x='8' y='7' width='12' height='16' rx='3' fill='%23ffffff'/%3E%3C/svg%3E");
    background-size: 28px 30px;
    background-repeat: repeat-x;
}
.tf-filmography__inner { max-width: var(--wrap); margin: 0 auto; padding: 84px 40px 80px; }
.tf-filmography .tf-slug, .tf-filmography .tf-eyebrow { color: rgba(255, 255, 255, .72); }
.tf-filmography h2 { font-size: clamp(34px, 4vw, 54px); margin-bottom: 44px; color: #fff; }
.tf-film-split { display: grid; grid-template-columns: 1.15fr .85fr; gap: 56px; align-items: start; }
.tf-credit-wall { display: flex; flex-wrap: wrap; column-gap: 30px; row-gap: 18px; align-items: baseline; }
.tf-credit { white-space: nowrap; text-decoration: none; color: #fff; border: none; background: none; padding: 0; cursor: pointer; font: inherit; }
.tf-credit .t {
    font-family: var(--display); font-weight: 600; text-transform: uppercase;
    font-size: clamp(22px, 2.4vw, 32px); line-height: 1; letter-spacing: .01em;
}
.tf-credit .y { font-family: var(--mono); font-size: 14px; color: rgba(255, 255, 255, .7); margin-left: 8px; }
.tf-credit[data-img] .y::after {
    content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%;
    background: var(--orange); margin-left: 7px; vertical-align: 2px;
}
.tf-credit:hover .t, .tf-credit:focus-visible .t, .tf-credit.is-active .t { color: #e9a9df; }
.tf-film-preview { position: sticky; top: 32px; margin: 0; }
.tf-film-preview .frame { border: 1px solid rgba(255, 255, 255, .22); padding: 10px; background: rgba(255, 255, 255, .04); }
.tf-film-preview img { width: 100%; aspect-ratio: 16 / 10; object-fit: contain; background: #181018; transition: opacity .25s ease; }
.tf-film-preview.is-swapping img { opacity: 0; }
.tf-film-preview figcaption {
    font-family: var(--mono); font-size: 13px; letter-spacing: .08em; text-transform: uppercase;
    color: rgba(255, 255, 255, .8); margin: 12px 2px 2px; line-height: 1.6;
}
.tf-filmography__after {
    margin-top: 48px; display: flex; justify-content: flex-end;
    border-top: 1px solid rgba(255, 255, 255, .16); padding-top: 26px;
}
.tf-filmography .tf-arrow-link { color: #fff; border-color: rgba(255, 255, 255, .6); }
.tf-filmography .tf-arrow-link:hover { color: #e9a9df; border-color: #e9a9df; }
@media (prefers-reduced-motion: reduce) { .tf-film-preview img { transition: none; } }

/* ---------- sierra parallax band ---------- */

.tf-sierra {
    position: relative; min-height: 420px; display: flex; align-items: center;
    background-size: cover; background-position: center;
}
@media (min-width: 981px) and (prefers-reduced-motion: no-preference) {
    .tf-sierra { background-attachment: fixed; }
}
.tf-sierra::after { content: ""; position: absolute; inset: 0; background: rgba(24, 12, 22, .42); }
.tf-sierra__inner {
    position: relative; z-index: 2; width: 100%; max-width: var(--wrap);
    margin: 0 auto; text-align: center; padding: 64px 40px;
}
.tf-sierra .tf-slug, .tf-sierra .tf-eyebrow { color: rgba(255, 255, 255, .85); }
.tf-sierra h2 { color: #fff; font-size: clamp(30px, 4vw, 56px); max-width: 880px; margin: 0 auto; }

/* ---------- compare slider (drag line between two looks) ---------- */

.tf-compare { padding: 96px 40px 8px; }
.tf-compare__head {
    max-width: var(--wrap); margin: 0 auto 30px;
    display: flex; justify-content: space-between; align-items: flex-end; gap: 28px; flex-wrap: wrap;
}
.tf-compare__head h2 { margin: 0; }
.tf-compare__head .tf-intro { max-width: 520px; margin: 14px 0 0; color: var(--sub); }
.tf-compare__tabs { display: flex; flex-wrap: wrap; border: 1px solid var(--line); }
.tf-compare__tab {
    font-family: var(--mono); font-size: 12.5px; font-weight: 700;
    letter-spacing: .09em; text-transform: uppercase; color: var(--sub);
    background: none; border: none; cursor: pointer; padding: 12px 18px;
}
.tf-compare__tab + .tf-compare__tab { border-left: 1px solid var(--line); }
@media (max-width: 600px) {
    .tf-compare__tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); }
    .tf-compare__tab { background: var(--paper); }
    .tf-compare__tab + .tf-compare__tab { border-left: none; }
    .tf-compare__tab.is-active { background: var(--plum); }
}
.tf-compare__tab.is-active { background: var(--plum); color: #fff; }
.tf-compare__tab:hover:not(.is-active) { color: var(--purple); }
.tf-compare__stage { max-width: var(--wrap); margin: 0 auto; }
.tf-compare__frame {
    --pos: 50%;
    position: relative; margin: 0; overflow: hidden;
    aspect-ratio: 16 / 9; max-height: 640px; width: 100%;
    touch-action: pan-y; cursor: ew-resize; user-select: none; -webkit-user-select: none;
}
.tf-compare__frame img {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; display: block; pointer-events: none;
}
.tf-compare__overwrap {
    position: absolute; inset: 0; z-index: 2;
    clip-path: inset(0 calc(100% - var(--pos)) 0 0);
}
.tf-compare__tag {
    position: absolute; bottom: 16px; z-index: 5;
    font-family: var(--mono); font-size: 12.5px; font-weight: 700;
    letter-spacing: .08em; text-transform: uppercase; color: #fff;
    background: rgba(24, 12, 22, .68); padding: 7px 12px; pointer-events: none;
}
.tf-compare__tag--l { left: 16px; }
.tf-compare__tag--r { right: 16px; }
.tf-compare__handle {
    position: absolute; top: 0; bottom: 0; left: var(--pos); z-index: 4;
    width: 2px; margin-left: -1px; background: #fff;
    box-shadow: 0 0 0 .5px rgba(0, 0, 0, .25); cursor: ew-resize;
}
.tf-compare__handle .grip {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 46px; height: 46px; border-radius: 50%;
    background: #fff; color: var(--ink);
    display: flex; align-items: center; justify-content: center; gap: 3px;
    font-family: var(--mono); font-size: 15px; font-weight: 700; line-height: 1;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .3);
}
.tf-compare__handle:focus-visible { outline: none; }
.tf-compare__handle:focus-visible .grip { outline: 3px solid var(--orange); outline-offset: 2px; }
.tf-compare__cap {
    font-family: var(--mono); font-size: 12px; letter-spacing: .06em;
    text-transform: uppercase; color: var(--sub); margin: 12px 0 0;
}
.tf-compare__frame.is-swapping .tf-compare__overwrap,
.tf-compare__frame.is-swapping > img { opacity: .25; transition: opacity .18s ease; }
@media (max-width: 980px) {
    .tf-compare { padding: 64px 24px 8px; }
}
@media (max-width: 600px) {
    .tf-compare__frame { aspect-ratio: 4 / 5; max-height: none; }
    /* too narrow for both labels on one edge: split them top-left / bottom-right */
    .tf-compare__tag {
        max-width: calc(75% - 12px); font-size: 11.5px; line-height: 1.35;
        padding: 6px 10px; background: rgba(24, 12, 22, .86);
    }
    .tf-compare__tag--l { left: 12px; top: 12px; bottom: auto; }
    .tf-compare__tag--r { right: 12px; bottom: 12px; text-align: right; }
}
@media (prefers-reduced-motion: reduce) {
    .tf-compare__frame.is-swapping .tf-compare__overwrap,
    .tf-compare__frame.is-swapping > img { transition: none; }
}

/* ---------- scenery strip (scout frames under the sierra band) ---------- */

.tf-scenery { padding: 64px 40px 96px; }
.tf-scenery__grid {
    max-width: var(--wrap); margin: 0 auto;
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px;
}
.tf-scenery figure { margin: 0; }
.tf-scenery img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; }
.tf-scenery figcaption { padding-top: 10px; margin: 0; }
.tf-scenery .name {
    font-family: var(--display); font-weight: 700; text-transform: uppercase;
    font-size: 17px; line-height: 1.05; display: block; margin-bottom: 5px;
}
.tf-scenery .juris {
    font-family: var(--mono); font-size: 12px; font-weight: 700;
    letter-spacing: .08em; text-transform: uppercase; color: var(--sub);
}
@media (max-width: 980px) {
    .tf-scenery { padding: 48px 24px 64px; }
    .tf-scenery__grid { grid-template-columns: 1fr 1fr; gap: 18px; }
}
@media (max-width: 600px) {
    .tf-scenery__grid { grid-template-columns: 1fr; }
}

/* ---------- permits ---------- */

.tf-permits { background: var(--purple-tint); }
.tf-airports { background: var(--river-tint); }
.tf-permit-grid { gap: 1px !important; background: var(--line); border: 1px solid var(--line); }
.tf-permit-grid .wp-block-column { background: var(--paper); padding: 36px 32px 32px; margin: 0; display: flex; flex-direction: column; }
.tf-permit-grid .tf-slug, .tf-permit-grid .tf-eyebrow { margin-bottom: 12px; }
.tf-permit-grid .tf-card-photo { margin: -36px -32px 22px; }
.tf-permit-grid .tf-card-photo img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; }
.tf-permit-grid .tf-card-photo figcaption {
    margin: 0;
    font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase;
    color: var(--faint); padding: 6px 32px 0;
}
.tf-permit-grid h3 {
    font-family: var(--display); font-weight: 700; text-transform: uppercase;
    font-size: 26px; line-height: 1.3; margin: 0 0 14px;
}
.tf-permit-grid p { margin: 0 0 20px; font-size: 16.5px; color: var(--sub); line-height: 1.55; flex: 1; }
.tf-permit-grid .tf-permit-data { flex: 0; font-family: var(--mono); font-size: 14px; margin: 0; color: var(--ink); }
.tf-permit-data span { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-top: 1px solid var(--line); }
.tf-permit-data b { font-weight: 700; }
.tf-permit-data i {
    font-style: normal; color: var(--sub); letter-spacing: .08em;
    text-transform: uppercase; font-size: 12px; padding-top: 1px;
}
.tf-permits__foot {
    max-width: var(--wrap); margin: 40px auto 0;
    display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap;
}
.tf-permits__foot p { margin: 0; color: var(--sub); max-width: 520px; font-size: 16.5px; }

/* ---------- production resources ---------- */

.tf-resources { background: var(--paper); }
.tf-res-grid { gap: 1px !important; background: var(--line); border: 1px solid var(--line); }
.tf-res-grid .wp-block-column { background: var(--paper); border: none; padding: 30px 28px; margin: 0; }
.tf-res-grid h3 {
    font-family: var(--display); font-weight: 700; text-transform: uppercase;
    font-size: 22px; line-height: 1.3; margin: 0 0 8px;
}
.tf-res-grid p { color: var(--sub); font-size: 16px; line-height: 1.55; }
.tf-res-grid p:last-child { margin-bottom: 0; }
.tf-res-grid p:last-child a {
    font-family: var(--mono); font-size: 14px; font-weight: 700;
    letter-spacing: .1em; text-transform: uppercase;
    color: var(--accent, var(--purple)); text-decoration: none;
    border-bottom: 2px solid var(--accent, var(--purple)); padding-bottom: 2px;
}
.tf-res-grid p:last-child a:hover { color: var(--accent-deep, var(--plum)); border-color: var(--accent-deep, var(--plum)); }
.tf-res-banner {
    max-width: var(--wrap); margin: 32px auto 0;
    border: 1px solid var(--line); border-left: 4px solid var(--accent, var(--purple));
    padding: 22px 28px;
    display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap;
}
.tf-res-banner p { margin: 0; font-size: 16.5px; }

/* ---------- split CTA (scout) ---------- */

.wp-block-media-text.tf-split-cta { margin: 0; border-top: 1px solid var(--line); }
/* the photo fills the full height of the text column at any aspect ratio (cover crop) */
.tf-split-cta .wp-block-media-text__media { align-self: stretch; position: relative; min-height: 520px; }
.tf-split-cta .wp-block-media-text__media img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
}
@media (max-width: 600px) { /* stacked: photo on top at 4:3 */
    .tf-split-cta .wp-block-media-text__media { min-height: 0; aspect-ratio: 4 / 3; }
}
.tf-split-cta .wp-block-media-text__content { padding: 90px 80px; }
.tf-split-cta h2 { margin-bottom: 22px; }
.tf-split-cta p { color: var(--sub); max-width: 440px; }
.tf-split-cta .wp-block-buttons { margin: 26px 0 14px; }
.tf-split-cta p:last-child a { font-size: 16px; }

/* ---------- legacy strips still used on interior pages ---------- */

.tf-value-strip { border-bottom: 1px solid var(--line); }
.tf-value-grid .wp-block-column h3 {
    font-family: var(--display); font-weight: 700; text-transform: uppercase;
    font-size: 20px; line-height: 1.3; margin-bottom: 12px;
}
.tf-value-grid .wp-block-column p { color: var(--sub); font-size: 16.5px; }

.tf-filmed-here { text-align: center; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.tf-filmed-here .tf-film-row { font-family: var(--display); text-transform: uppercase; font-size: 20px; color: var(--sub); margin: 26px auto 18px; max-width: 900px; }

.tf-newsletter { text-align: center; }
.tf-newsletter p { max-width: 480px; margin-left: auto; margin-right: auto; }
.tf-newsletter .wp-block-buttons { justify-content: center; margin-bottom: 14px; }

/* ---------- directory listings ---------- */

.tf-listing {
    border: 1px solid var(--line);
    border-left: 3px solid var(--accent, var(--purple));
    padding: 22px 26px;
    margin: 0 0 14px;
}
.tf-listing h3 { font-size: 22px; margin-bottom: 6px; }
.tf-listing p { margin-bottom: 8px; }
.tf-listing p:last-child { margin-bottom: 0; }
.tf-listing-contact {
    font-family: var(--mono);
    font-size: 14px;
    color: var(--sub);
}

.tf-submit-cta {
    background: var(--gold-tint);
    border: 1px dashed #e3cf9a;
    padding: 16px 20px;
    font-size: 16px;
    color: var(--sub);
}

/* Angled section edges on interior pages: every tinted full-bleed band is cut as a shallow
   parallelogram (~1.5deg, rising left to right) and overlaps its neighbours by the rise, so the
   white sections above and below tuck under it. --rise = 100vw * tan(1.49deg). Home keeps its
   straight bands (the film strip carries that page), so these key off the interior page hero:
   a sibling selector, so the block editor canvas matches them too. */
.tf-page-hero ~ .tf-permits,
.tf-page-hero ~ .tf-airports,
.tf-page-hero ~ .tf-locations,
.tf-page-hero ~ .tf-cta {
    --rise: 2.6vw;
    position: relative; z-index: 1;
    margin-top: calc(-1 * var(--rise));
    margin-bottom: calc(-1 * var(--rise));
    padding-top: calc(96px + var(--rise));
    padding-bottom: calc(96px + var(--rise));
    clip-path: polygon(0 var(--rise), 100% 0, 100% calc(100% - var(--rise)), 0 100%);
}
.tf-page-hero ~ .tf-cta {
    padding-top: calc(56px + var(--rise));
    padding-bottom: calc(56px + var(--rise));
}
/* a band right after the sprocket strip or the call-sheet stats keeps a straight top so those stay flush */
.tf-page-hero ~ .tf-sprockets + .tf-permits,
.tf-page-hero ~ .tf-sprockets + .tf-airports,
.tf-page-hero ~ .tf-sprockets + .tf-locations,
.tf-page-hero ~ .tf-callsheet + .tf-permits,
.tf-page-hero ~ .tf-callsheet + .tf-airports,
.tf-page-hero ~ .tf-callsheet + .tf-locations {
    margin-top: 0; padding-top: 96px;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--rise)), 0 100%);
}
.tf-page-hero ~ .tf-sprockets + .tf-cta {
    margin-top: 0; padding-top: 56px;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--rise)), 0 100%);
}

/* generic CTA + region + permit sections */
.tf-cta {
    background: var(--accent-tint, var(--stone));
    text-align: center;
    padding: 56px 40px;
    margin-top: 24px;
}
.tf-cta .wp-block-buttons { justify-content: center; }

.tf-region, .tf-permit {
    border-top: 1px solid var(--line);
    padding: 36px 0;
}
.tf-region figure { max-width: 520px; margin: 0 0 16px; }

/* gallery page: wide content column, numbered region intros, side-by-side
   photo cards (title + photo link to the location's own page, permit meta,
   and a learn-more link under each write-up) */
.tf-content--wide { max-width: 1240px; }
.tf-gallery .tf-region > .tf-slug { margin-bottom: 10px; }
.tf-gallery .tf-region > h3 { margin: 0 0 12px; }
.tf-gallery .tf-region > p:not(.tf-meta):not(.tf-slug):not(.tf-wireframe-note) {
    max-width: 680px; color: var(--sub); font-size: 17px; line-height: 1.55; margin: 0 0 8px;
}
.tf-gallery .tf-region > .tf-wireframe-note { max-width: 680px; margin: 14px 0 0; }
.tf-gallery .tf-region > .tf-meta { margin: 14px 0 0; }
.tf-region[id], .tf-permit[id] { scroll-margin-top: 84px; }
.tf-gallery-grid { gap: 28px !important; margin: 26px 0 0; }
.tf-gallery-grid .wp-block-column { margin: 0; }
.tf-gallery-grid figure { max-width: none; margin: 0 0 14px; }
.tf-gallery-grid figure a { display: block; }
.tf-gallery-grid figure img {
    width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; transition: opacity .18s ease;
}
.tf-gallery-grid figure a:hover img { opacity: .86; }
.tf-gallery-grid figcaption {
    font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase;
    color: var(--faint); padding-top: 6px; margin: 0; text-align: left;
}
.tf-gallery-grid h4 {
    font-family: var(--display); font-weight: 700; text-transform: uppercase;
    font-size: 22px; line-height: 1.32; margin: 0 0 10px;
}
.tf-gallery-grid h4 a {
    color: var(--ink); text-decoration: underline; text-decoration-thickness: 2px;
    text-underline-offset: 5px; text-decoration-color: var(--accent, var(--purple));
}
.tf-gallery-grid h4 a:hover { color: var(--accent, var(--purple)); }
.tf-gallery-grid p { color: var(--sub); font-size: 16px; line-height: 1.55; margin: 0 0 12px; }
.tf-gallery-grid .tf-meta { margin: 0 0 14px; }
.tf-gallery-grid .tf-more { margin: 0; }
@media (max-width: 781px) {
    .tf-gallery-grid .wp-block-column + .wp-block-column { margin-top: 10px; }
}

/* section-head kicker under the title ("Signature filming locations") */
.tf-section-head h2 + .tf-slug--sub { margin: 12px 0 0; }
.tf-section-head .tf-slug--sub + .tf-intro { margin-top: 12px; }
.tf-loc-grid .tf-more { margin: 14px 0 0; }

/* scenery strip frames link into the gallery; jurisdiction links to the permit */
.tf-scenery figure > a { display: block; }
.tf-scenery .name a { color: inherit; text-decoration: none; }
.tf-scenery .name a:hover { color: var(--accent, var(--purple)); }
.tf-scenery .juris a { color: inherit; }

/* compare tabs inside the dark split hero (About: then & now pairs) */
.tf-page-hero--split .tf-compare__tabs {
    border-color: rgba(255, 255, 255, .35); background: transparent; margin: 0 0 14px;
}
.tf-page-hero--split .tf-compare__tab { color: rgba(255, 255, 255, .78); background: transparent; flex: 1 1 0; text-align: center; }
.tf-page-hero--split .tf-compare__tab + .tf-compare__tab { border-left-color: rgba(255, 255, 255, .35); }
.tf-page-hero--split .tf-compare__tab:hover:not(.is-active) { color: #fff; }
.tf-page-hero--split .tf-compare__tab.is-active { background: #fff; color: var(--plum); }
@media (max-width: 600px) {
    .tf-page-hero--split .tf-compare__tabs { background: rgba(255, 255, 255, .35); grid-template-columns: repeat(3, 1fr); }
    .tf-page-hero--split .tf-compare__tab { background: var(--plum); }
    .tf-page-hero--split .tf-compare__tab.is-active { background: #fff; }
}

/* permit sections with a photo rail (film permits page) */
.tf-permit--media {
    display: grid; grid-template-columns: 300px minmax(0, 1fr);
    column-gap: 36px; row-gap: 0; align-items: start;
}
/* Constrained-layout auto margins shrink-center grid items; pin them left.
   Doubled class outweighs core's equally-specific !important rule. */
.tf-permit--media.tf-permit--media > * {
    margin-left: 0 !important; margin-right: 0 !important;
}
.tf-permit--media .tf-permit__photo { margin: 6px 0 0; grid-column: 1; grid-row: 1 / span 99; }
.tf-permit--media .tf-permit__photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.tf-permit--media .tf-permit__photo figcaption {
    margin: 0;
    font-family: var(--mono); font-size: 12px; letter-spacing: .06em;
    text-transform: uppercase; color: var(--faint); padding-top: 6px;
}
.tf-permit--media > *:not(.tf-permit__photo) { grid-column: 2; }
@media (max-width: 780px) {
    .tf-permit--media { grid-template-columns: 1fr; gap: 18px; }
    .tf-permit--media > *:not(.tf-permit__photo) { grid-column: 1; }
    .tf-permit--media .tf-permit__photo { grid-row: auto; max-width: 520px; }
}

/* news list block */
.tf-news-list { list-style: none; padding: 0; border-top: 1px solid var(--line); }
.tf-news-list li { border-bottom: 1px solid var(--line); padding: 26px 0; margin: 0; }
.tf-news-list .wp-block-latest-posts__post-title {
    font-family: var(--body-font);
    font-weight: 500;
    font-size: 22px;
    color: var(--ink);
    text-decoration: none;
}
.tf-news-list .wp-block-latest-posts__post-title:hover { color: var(--accent, var(--purple)); }
.tf-news-list .wp-block-latest-posts__post-date {
    font-family: var(--mono);
    font-size: 13.5px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--sub);
    margin: 6px 0 10px;
}
.tf-news-list .wp-block-latest-posts__post-excerpt { color: var(--sub); font-size: 16.5px; }

/* single post */
.tf-post-header { margin-bottom: 36px; }
.tf-post-header h1 { font-size: clamp(34px, 4vw, 54px); margin-bottom: 10px; }
.tf-post-thumb img { width: 100%; aspect-ratio: 16 / 7; object-fit: cover; }
.tf-post-thumb { margin: 0 0 40px; }

.tf-back-link {
    display: inline-block;
    margin-top: 44px;
    font-family: var(--mono);
    font-size: 12.5px;
    letter-spacing: .06em;
    text-transform: uppercase;
}

/* archive teasers (index.php) */
.tf-teaser { border-top: 1px solid var(--line); padding: 30px 0; }
.tf-teaser h2 { font-size: 26px; margin-bottom: 6px; }
.tf-teaser h2 a { color: var(--ink); text-decoration: none; }
.tf-teaser h2 a:hover { color: var(--accent, var(--purple)); }
.tf-teaser time {
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--sub);
}

/* ---------- footer ---------- */

.site-footer {
    background: var(--plum);
    color: #e9e4e7;
    padding: 80px 40px 28px;
    margin-top: 96px;
}
body.home .site-footer { margin-top: 0; }
.site-footer__grid {
    max-width: var(--wrap);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.3fr 1fr 1fr 1fr;
    gap: 44px;
    padding-bottom: 52px;
    border-bottom: 1px solid rgba(255, 255, 255, .14);
}
.site-footer__logo { line-height: 0; margin-bottom: 20px; }
.site-footer__logo img { height: 96px; width: auto; } /* logo-white-lg.png is 363px wide: sharp at 2x */
.site-footer__grid p { font-size: 16px; color: rgba(255, 255, 255, .8); max-width: 300px; }
.site-footer__title {
    font-family: var(--mono);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .12em;
    line-height: 1.4;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .7);
    margin: 0 0 16px;
}
.site-footer__grid a {
    display: block;
    color: #e9e4e7;
    text-decoration: none;
    font-size: 16px;
    margin-bottom: 10px;
}
.site-footer__grid a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.site-footer__bottom {
    max-width: var(--wrap);
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding-top: 24px;
    font-family: var(--mono);
    font-size: 12.5px;
    color: rgba(255, 255, 255, .62);
}
.site-footer__bottom a { color: rgba(255, 255, 255, .62); text-decoration: none; }
.site-footer__bottom a:hover { color: #fff; }
.site-footer__social { display: flex; gap: 22px; margin-top: 22px; }
.site-footer__social a {
    display: inline-flex; align-items: center; gap: 8px; margin: 0;
    color: #e9e4e7; text-decoration: none;
    font-family: var(--mono); font-size: 13px; font-weight: 700;
    letter-spacing: .1em; text-transform: uppercase;
}
.site-footer__social a:hover { color: var(--orange); }
.site-footer__social svg { display: block; }

/* ---------- responsive ---------- */

@media (max-width: 980px) {
    .tf-section { padding: 56px 24px; }
    .tf-content { padding: 48px 24px 72px; }
    .site-header__inner { padding: 12px 24px; }
    .site-header nav { display: none; } /* replaced by the .tf-mnav panel */
    .tf-hero2 { grid-template-columns: 1fr; }
    .tf-hero2__copy { padding: 72px 24px 56px; }
    .tf-reel { min-height: 340px; }
    .tf-hero2__scroll { display: none; }
    .tf-callsheet { padding: 0 24px; }
    .tf-callsheet .wp-block-column { border-bottom: 1px solid var(--line); }
    .tf-map-section { padding: 48px 24px 64px; }
    .tf-map-grid { grid-template-columns: 1fr; }
    .tf-map-rail { flex-direction: row; overflow-x: auto; border-right: none; border-bottom: 1px solid var(--line); }
    .tf-map-loc { border-bottom: none; border-right: 1px solid var(--line); min-width: 200px; }
    .tf-map-loc.is-active { box-shadow: inset 0 -4px 0 var(--purple); }
    #tf-map { min-height: 440px; }
    #tf-airmap { min-height: 360px; }
    .tf-film-split { grid-template-columns: 1fr; }
    .tf-film-preview { position: static; max-width: 520px; }
    .tf-split-cta .wp-block-media-text__content { padding: 64px 24px; }
    .site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- interior landing pages (page-wide template) ---------- */

.page-template-page-wide .site-footer { margin-top: 0; }

.tf-page-hero {
    background: var(--plum);
    color: #fff;
    padding: 88px 40px 64px;
}
.tf-page-hero__inner { max-width: var(--wrap); margin: 0 auto; }
.tf-page-hero .tf-slug, .tf-page-hero .tf-eyebrow { color: rgba(255, 255, 255, .8); }
.tf-page-hero h1 { color: #fff; font-size: clamp(44px, 5.4vw, 84px); margin: 0; }
.tf-page-hero .tf-lead { color: rgba(255, 255, 255, .85); max-width: 640px; margin: 20px 0 0; }
.tf-page-hero .tf-page-hero__links { display: flex; gap: 22px; flex-wrap: wrap; margin: 30px 0 0; }
.tf-page-hero .tf-arrow-link { color: #fff; border-color: rgba(255, 255, 255, .55); }
.tf-page-hero .tf-arrow-link:hover { color: #f6b46b; border-color: #f6b46b; }

/* section accents: Locations wear pine, Production Resources river,
   Events & News brick; Permits/About/Contact keep the plum default.
   The sprocket band directly under an accented hero matches it. */
.tf-page-hero--pine { background: var(--pine); }
.tf-page-hero--river { background: var(--river); }
.tf-page-hero--brick { background: var(--brick); }
.tf-page-hero--pine + .tf-sprockets--band { background-color: var(--pine); }
.tf-page-hero--river + .tf-sprockets--band { background-color: var(--river); }
.tf-page-hero--brick + .tf-sprockets--band { background-color: var(--brick); }

/* Accent inheritance: everything after a colored hero carries that section's
   color — eyebrows, link underlines, buttons, listing spines, CTA band tints —
   via the --accent custom props consumed by the base rules above. Dark bands
   (sierra, filmography, page-hero) keep their higher-specificity white text. */
.tf-page-hero--pine ~ * { --accent: var(--pine); --accent-deep: var(--pine-deep); --accent-tint: var(--pine-tint); }
.tf-page-hero--river ~ * { --accent: var(--river); --accent-deep: var(--river-deep); --accent-tint: var(--river-tint); }
.tf-page-hero--brick ~ * { --accent: var(--brick); --accent-deep: var(--brick-deep); --accent-tint: var(--brick-tint); }

/* homepage bands borrow their section's accent too (purple hero, so the
   page-wide cascade above never fires here) */
.tf-callsheet .tf-k { color: var(--river); }
.tf-locations {
    --accent: var(--pine); --accent-deep: var(--pine-deep); --accent-tint: var(--pine-tint);
    background: var(--pine-tint);
}
.tf-scenery { --accent: var(--pine); }
.tf-scenery .juris { color: var(--pine); }
.tf-resources {
    --accent: var(--river); --accent-deep: var(--river-deep); --accent-tint: var(--river-tint);
    background: var(--river-tint);
}
.tf-res-banner { background: var(--paper); }
.tf-news { --accent: var(--brick); --accent-deep: var(--brick-deep); --accent-tint: var(--brick-tint); }
/* airports call sheet reads river everywhere, even inside a pine page */
.tf-airports { --accent: var(--river); --accent-deep: var(--river-deep); --accent-tint: var(--river-tint); }
/* permit paths stay Film Commission purple even on accent pages */
.tf-permits { --accent: var(--purple); --accent-deep: var(--plum); --accent-tint: var(--purple-tint); }

/* page hero with a compare slider beside the copy (about: then & now) */
.tf-page-hero--split .tf-page-hero__inner {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 560px);
    gap: 56px; align-items: center;
}
.tf-page-hero--split .tf-compare { padding: 0; }
.tf-page-hero--split .tf-compare__stage { max-width: none; }
.tf-page-hero--split .tf-compare__frame { aspect-ratio: 4 / 3; max-height: 460px; }
.tf-page-hero--split .tf-compare__cap { color: rgba(255, 255, 255, .6); }
@media (max-width: 980px) {
    .tf-page-hero--split .tf-page-hero__inner { grid-template-columns: 1fr; gap: 36px; }
}

/* region index: name + jurisdiction tag rows (locations page) */
.tf-region-grid { gap: 1px !important; background: var(--line); border: 1px solid var(--line); }
.tf-region-grid .wp-block-column { background: var(--paper); padding: 26px 28px; margin: 0; }
.tf-region-grid figure { margin: 0 0 16px; }
.tf-region-grid figure img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; }
.tf-region-grid figcaption {
    margin: 0;
    font-family: var(--mono); font-size: 12px; letter-spacing: .06em;
    text-transform: uppercase; color: var(--faint); padding-top: 6px;
}
.tf-region-grid h3 {
    font-family: var(--display); font-weight: 700; text-transform: uppercase;
    font-size: 21px; line-height: 1.3; margin: 0 0 10px;
}
.tf-region-grid p { color: var(--sub); font-size: 16px; line-height: 1.55; margin: 0 0 14px; }
.tf-region-grid p:last-child { margin-bottom: 0; }

/* filmstrip divider usable on light pages */
.tf-sprockets--band { background-color: var(--plum); }

/* about: film history decade rows */
.tf-decades { padding: 0 40px; }
.tf-decades__inner { max-width: var(--wrap); margin: 0 auto; }
.tf-decade {
    display: grid; grid-template-columns: 170px 1fr; gap: 44px;
    border-top: 1px solid var(--line); padding: 46px 0;
}
.tf-decade > h3 {
    font-family: var(--display); font-weight: 700; font-size: 46px; line-height: .9;
    margin: 0; color: var(--purple); text-transform: uppercase;
}
.tf-decade .tf-credits { font-weight: 500; font-size: 19px; line-height: 1.6; margin: 4px 0 12px; }
.tf-decade p:not(.tf-credits):not(.tf-slug) { color: var(--ink); font-size: 17px; line-height: 1.6; max-width: 660px; }
.tf-decade .stills { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 22px; }
.tf-decade .stills.solo { grid-template-columns: minmax(0, 560px); }
.tf-decade .stills.solo--poster { grid-template-columns: minmax(0, 280px); }
.tf-decade .stills .poster img { aspect-ratio: 2 / 3; }
.tf-decade .stills figure { margin: 0; }
.tf-decade .stills img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; }
.tf-decade .stills figcaption {
    margin: 0;
    font-family: var(--mono); font-size: 12.5px; letter-spacing: .06em;
    text-transform: uppercase; color: var(--sub); padding-top: 8px;
}

@media (max-width: 980px) {
    .tf-page-hero { padding: 64px 24px 48px; }
    .tf-decades { padding: 0 24px; }
    .tf-decade { grid-template-columns: 1fr; gap: 14px; padding: 36px 0; }
    .tf-decade .stills { grid-template-columns: 1fr; }
}

/* ---------- mobile nav (hamburger + full-screen panel) ---------- */

.screen-reader-text {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* hamburger button — desktop hides it, the 980px block below turns it on */
.tf-mnav-toggle {
    display: none;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 10px 4px;
    background: none;
    border: 0;
    cursor: pointer;
    color: var(--ink);
    -webkit-tap-highlight-color: transparent;
}
.tf-mnav-toggle__label {
    font-family: var(--mono);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}
.tf-mnav-toggle__bars {
    position: relative;
    display: block;
    width: 26px; height: 16px;
}
.tf-mnav-toggle__bars span {
    position: absolute;
    left: 0;
    display: block;
    width: 100%; height: 2px;
    background: currentColor;
    transition: transform .3s cubic-bezier(.22, 1, .36, 1), opacity .18s linear;
}
.tf-mnav-toggle__bars span:nth-child(1) { top: 0; }
.tf-mnav-toggle__bars span:nth-child(2) { top: 7px; }
.tf-mnav-toggle__bars span:nth-child(3) { top: 14px; }
.tf-mnav-toggle[aria-expanded="true"] .tf-mnav-toggle__bars span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.tf-mnav-toggle[aria-expanded="true"] .tf-mnav-toggle__bars span:nth-child(2) { opacity: 0; }
.tf-mnav-toggle[aria-expanded="true"] .tf-mnav-toggle__bars span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* panel */
.tf-mnav {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 200;
    flex-direction: column;
    background: var(--plum);
    color: #fff;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    transform: translateX(100%);
    visibility: hidden;
    /* visibility flips instantly on open, and only after the slide-out on close */
    transition: transform .38s cubic-bezier(.22, 1, .36, 1), visibility 0s linear .38s;
}
.tf-mnav.is-open {
    transform: none;
    visibility: visible;
    transition: transform .38s cubic-bezier(.22, 1, .36, 1), visibility 0s;
}

.tf-mnav__bar {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 24px;
    background: var(--plum);
    border-bottom: 1px solid rgba(255, 255, 255, .14);
}
.tf-mnav__brand { display: block; line-height: 0; }
.tf-mnav__brand img { height: 48px; width: auto; }
.tf-mnav__close {
    position: relative;
    width: 46px; height: 46px;
    margin-right: -8px;
    padding: 0;
    background: none;
    border: 0;
    color: #fff;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.tf-mnav__x, .tf-mnav__x::before {
    position: absolute;
    top: 50%; left: 50%;
    width: 24px; height: 2px;
    margin: -1px 0 0 -12px;
    background: currentColor;
    content: '';
}
.tf-mnav__x { transform: rotate(45deg); }
.tf-mnav__x::before { margin: -1px 0 0 -12px; transform: rotate(90deg); }
.tf-mnav__close:hover { color: var(--orange); }

.tf-mnav__nav { padding: 8px 24px 0; }
.tf-mnav__list {
    counter-reset: tfnav;
    list-style: none;
    margin: 0;
    padding: 0;
}
.tf-mnav__list > li {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, .14);
}
.tf-mnav__list > li > a {
    display: flex;
    align-items: baseline;
    gap: 14px;
    padding: 17px 0;
    font-family: var(--display);
    font-weight: 700;
    font-size: clamp(28px, 7.4vw, 40px);
    line-height: 1;
    letter-spacing: .01em;
    text-transform: uppercase;
    text-decoration: none;
    color: #fff;
}
.tf-mnav__list > li > a::before {
    counter-increment: tfnav;
    content: counter(tfnav, decimal-leading-zero);
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .1em;
    color: rgba(255, 255, 255, .42);
}
.tf-mnav__list > li > a:hover { color: var(--orange); }
.tf-mnav__list > li.current-menu-item > a,
.tf-mnav__list > li.current-menu-ancestor > a,
.tf-mnav__list > li.current-page-ancestor > a { color: var(--orange); }
.tf-mnav__list > li.current-menu-item > a::before,
.tf-mnav__list > li.current-menu-ancestor > a::before,
.tf-mnav__list > li.current-page-ancestor > a::before { color: var(--orange); }

.tf-mnav__toggle {
    width: 48px;
    align-self: stretch;
    padding: 0;
    background: none;
    border: 0;
    border-left: 1px solid rgba(255, 255, 255, .14);
    color: #fff;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.tf-mnav__chev {
    display: block;
    width: 9px; height: 9px;
    margin: 0 auto;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-3px) rotate(45deg);
    transition: transform .3s cubic-bezier(.22, 1, .36, 1);
}
.tf-mnav__toggle[aria-expanded="true"] { color: var(--orange); }
.tf-mnav__toggle[aria-expanded="true"] .tf-mnav__chev { transform: translateY(1px) rotate(-135deg); }

.tf-mnav__sub {
    grid-column: 1 / -1;
    height: 0;
    overflow: hidden;
    list-style: none;
    margin: 0;
    padding: 0;
    transition: height .32s cubic-bezier(.22, 1, .36, 1);
}
.tf-mnav__sub li:first-child { padding-top: 2px; }
.tf-mnav__sub li:last-child { padding-bottom: 18px; }
.tf-mnav__sub a {
    display: block;
    padding: 9px 0 9px 30px;
    font-family: var(--body-font);
    font-size: 17px;
    line-height: 1.35;
    text-decoration: none;
    color: rgba(255, 255, 255, .78);
    border-left: 2px solid rgba(255, 255, 255, .18);
}
.tf-mnav__sub a:hover { color: #fff; border-left-color: var(--orange); }
.tf-mnav__sub .current-menu-item > a { color: var(--orange); border-left-color: var(--orange); }

.tf-mnav__foot {
    margin-top: auto;
    padding: 30px 24px 36px;
}
.tf-mnav__cta {
    display: block;
    padding: 16px 20px;
    background: var(--purple);
    border: 1.5px solid var(--purple);
    color: #fff;
    font-family: var(--mono);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .1em;
    text-align: center;
    text-transform: uppercase;
    text-decoration: none;
}
.tf-mnav__cta:hover { background: transparent; border-color: var(--orange); color: var(--orange); }
.tf-mnav__meta {
    margin: 18px 0 0;
    font-family: var(--mono);
    font-size: 13px;
    line-height: 1.8;
    letter-spacing: .04em;
    color: rgba(255, 255, 255, .62);
}
.tf-mnav__meta a { color: rgba(255, 255, 255, .8); text-decoration: none; }
.tf-mnav__meta a:hover { color: var(--orange); }

/* purple-on-plum is unreadable: outline against the dark panel in orange */
.tf-mnav :focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }

/* rows fade up once the panel has slid in */
.tf-mnav__bar, .tf-mnav__list > li, .tf-mnav__foot { opacity: 0; }
.tf-mnav.is-open .tf-mnav__bar,
.tf-mnav.is-open .tf-mnav__list > li,
.tf-mnav.is-open .tf-mnav__foot {
    animation: tf-mnav-in .42s cubic-bezier(.22, 1, .36, 1) both;
}
.tf-mnav.is-open .tf-mnav__bar { animation-delay: .06s; }
.tf-mnav.is-open .tf-mnav__list > li:nth-child(1) { animation-delay: .12s; }
.tf-mnav.is-open .tf-mnav__list > li:nth-child(2) { animation-delay: .17s; }
.tf-mnav.is-open .tf-mnav__list > li:nth-child(3) { animation-delay: .22s; }
.tf-mnav.is-open .tf-mnav__list > li:nth-child(4) { animation-delay: .27s; }
.tf-mnav.is-open .tf-mnav__list > li:nth-child(5) { animation-delay: .32s; }
.tf-mnav.is-open .tf-mnav__list > li:nth-child(6) { animation-delay: .37s; }
.tf-mnav.is-open .tf-mnav__list > li:nth-child(n+7) { animation-delay: .42s; }
.tf-mnav.is-open .tf-mnav__foot { animation-delay: .46s; }
@keyframes tf-mnav-in {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .tf-mnav { transform: none; opacity: 0; transition: opacity .2s linear, visibility 0s linear .2s; }
    .tf-mnav.is-open { opacity: 1; transition: opacity .2s linear, visibility 0s; }
    .tf-mnav.is-open .tf-mnav__bar,
    .tf-mnav.is-open .tf-mnav__list > li,
    .tf-mnav.is-open .tf-mnav__foot { animation: none; opacity: 1; }
    .tf-mnav__sub, .tf-mnav__chev, .tf-mnav-toggle__bars span { transition: none; }
}

@media (max-width: 980px) {
    .site-header { position: sticky; top: 0; box-shadow: 0 6px 18px rgba(33, 27, 31, .07); }
    .site-header__inner { flex-wrap: nowrap; gap: 16px; }
    .site-header__brand { margin-right: auto; } /* keep the CTA beside the hamburger */
    .site-header__brand img { height: 50px; }
    .site-header .header-cta { padding: 10px 16px; }
    .tf-mnav-toggle { display: inline-flex; }
    .tf-mnav { display: flex; }
}

@media (max-width: 600px) {
    .site-header .header-cta { display: none; }
    .site-header__brand img { height: 44px; }
    /* bars only, but the button keeps its accessible name */
    .tf-mnav-toggle__label {
        position: absolute;
        width: 1px; height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }
}

/* tablet: hold the panel to a readable column instead of stretching it */
@media (min-width: 601px) and (max-width: 980px) {
    .tf-mnav__bar { padding: 12px 40px; }
    .tf-mnav__nav, .tf-mnav__foot { width: 100%; max-width: 620px; margin-left: auto; margin-right: auto; }
    .tf-mnav__nav { padding-left: 40px; padding-right: 40px; }
    .tf-mnav__foot { padding-left: 40px; padding-right: 40px; }
    .tf-mnav__list > li > a { font-size: 42px; padding: 20px 0; }
}

/* panel is mobile-only: never leave it hanging around on desktop */
@media (min-width: 981px) {
    .tf-mnav { display: none !important; }
}

/* Row accents (kept at the end of the file: these override the padding
   shorthands on .tf-news-list li and .tf-decade above): a thin color bar on the left edge of each row, rotating through
   the section palette (brick / river / pine / gold / purple). News rows on the
   homepage "From the commission" list and the News page, directory and events
   listings, and the About page decade rows. */
.tf-news-list li {
    border-left: 3px solid var(--brick);
    padding-left: 22px;
}
.tf-news-list li:nth-child(5n+2) { border-left-color: var(--river); }
.tf-news-list li:nth-child(5n+3) { border-left-color: var(--pine); }
.tf-news-list li:nth-child(5n+4) { border-left-color: var(--gold-bright); }
.tf-news-list li:nth-child(5n+5) { border-left-color: var(--purple); }

.tf-content .tf-listing:nth-of-type(5n+2) { border-left-color: var(--river); }
.tf-content .tf-listing:nth-of-type(5n+3) { border-left-color: var(--pine); }
.tf-content .tf-listing:nth-of-type(5n+4) { border-left-color: var(--gold-bright); }
.tf-content .tf-listing:nth-of-type(5n+5) { border-left-color: var(--brick); }

.tf-decade { border-left: 3px solid var(--purple); padding-left: 26px; }
.tf-decade:nth-of-type(5n+2) { border-left-color: var(--brick); }
.tf-decade:nth-of-type(5n+3) { border-left-color: var(--river); }
.tf-decade:nth-of-type(5n+4) { border-left-color: var(--pine); }
.tf-decade:nth-of-type(5n+5) { border-left-color: var(--gold-bright); }