/* BF Farm route bundle: states. Route-specific public rules plus only order-sensitive shared overrides. */
.section-soft{
background: var(--card-bg-alt);
}.page-hero--site{
position: relative;
isolation: isolate;
overflow: hidden;
background-color: var(--theme-dark);
background-position: var(--page-hero-position, center 50%);
background-size: cover;
background-repeat: no-repeat;
}.page-hero--site > .shell{
position: relative;
z-index: 1;
}.hero-copy h1{
text-shadow: 0 1px 1px var(--ink-58);
color: var(--text-heading-on-dark);
}.hero-copy h2{
color: var(--text-heading-on-dark);
}.hero-copy h3{
color: var(--text-heading-on-dark);
}.hero-copy strong{
color: var(--text-heading-on-dark);
}.hero-copy:not(.hero-copy-centered) .eyebrow{
color: var(--text-accent-on-dark);
}@media (max-width:760px){.hero-copy{
width: 100%;
min-width: 0;
max-width: 100%;
}.eyebrow{
margin-bottom: 18px;
gap: 10px;
font-size: 0.66rem;
letter-spacing: 0.16em;
}.eyebrow::before{
width: 28px;
flex: 0 0 28px;
}.intro.section{
padding-top: clamp(74px, 12vw, 96px);
}}.states-directory-hero{
position: relative;
overflow: visible;
margin-bottom: 28px;
padding: clamp(34px, 4vw, 46px) 0 clamp(22px, 2.6vw, 30px);
color: var(--text-body-on-dark);
background-image: url("../images/states-silhouette-header.webp");
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
}.states-directory-hero::after{
content: "";
position: absolute;
inset: 0;
pointer-events: none;
}.states-directory-hero__inner{
position: relative;
display: block;
}.states-directory-hero__copy,
.states-directory-hero__aside{
position: relative;
z-index: 1;
}.states-directory-hero__copy{
min-width: 0;
}.states-directory-hero .section-label{
color: var(--text-accent-on-dark);
}.states-directory-hero h1{
max-width: 900px;
margin: 0;
color: var(--text-heading-on-dark);
font-size: clamp(2.45rem, 6vw, 4.7rem);
}.states-directory-hero p:not(.section-label){
max-width: 640px;
margin: 12px 0 0;
color: var(--text-muted-on-dark);
font-size: clamp(.96rem, 1.35vw, 1.06rem);
line-height: 1.55;
}.states-directory-hero__stat{
min-width: 122px;
padding: 14px 16px;
border: 1px solid rgba(34, 198, 228, .48);
background: rgba(5, 17, 27, .96);
}.states-directory-hero__stat strong,
.states-directory-hero__stat span{
display: block;
}.states-directory-hero__stat strong{
color: var(--text-heading-on-dark);
font-size: clamp(2rem, 3.6vw, 3.1rem);
line-height: .9;
}.states-directory-hero__stat span{
margin-top: 8px;
color: rgba(255, 255, 255, .82);
font-size: .72rem;
font-weight: 800;
letter-spacing: .12em;
text-transform: uppercase;
}.states-directory-section{
background: var(--surface-page);
}.states-directory-tools{
margin-bottom: 34px;
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(260px, 390px);
gap: 30px;
align-items: end;
}.states-directory-tools h2{
margin: 0;
color: var(--text-heading-on-page);
font-size: clamp(2rem, 4vw, 3.4rem);
}.state-filter input{
width: 100%;
min-height: 54px;
padding: 0 18px;
border: 1px solid var(--line);
border-radius: 0;
color: var(--text-body-on-page);
background: var(--surface-card);
font: inherit;
}.state-filter input:focus{
outline: 2px solid var(--blue);
outline-offset: 2px;
}.state-filter-status{
min-height: 1.5em;
margin: -18px 0 22px;
color: var(--text-muted-on-light);
font-size: .9rem;
}.state-directory-grid{
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px;
}.state-guide-hero{
position: relative;
min-height: 0;
display: grid;
align-items: stretch;
isolation: isolate;
overflow: hidden;
color: var(--text-body-on-dark);
background: var(--theme-dark);
}.state-guide-hero__media,
.state-guide-hero__content{
grid-area: 1 / 1;
}.state-guide-hero__media{
position: relative;
z-index: 0;
width: 100%;
height: auto;
align-self: start;
}.state-guide-hero__media img{
display: block;
width: 100%;
height: auto;
object-fit: contain;
object-position: center;
filter: var(--bf-public-image-filter);
}.state-guide-hero__content{
position: relative;
z-index: 2;
align-self: end;
padding-top: clamp(42px, 6vw, 78px);
padding-bottom: clamp(52px, 7vw, 92px);
}.state-guide-hero .section-label{
color: var(--white);
text-shadow: 0 1px 2px var(--ink-68);
}.state-guide-hero h1{
max-width: 560px;
margin: 0 0 10px;
color: var(--text-heading-on-dark);
font-size: clamp(34px, 5vw, 58px);
letter-spacing: -.035em;
font-weight: 400;
text-shadow: 0 2px 8px var(--ink-68);
}.state-guide-hero__content > p:last-child:not(.section-label){
max-width: 560px;
margin: 0;
color: var(--white);
font-size: 16px;
line-height: 1.42;
text-shadow: 0 1px 4px var(--ink-68);
}.state-guide-jump{
position: sticky;
z-index: 20;
top: 82px;
border-bottom: 1px solid var(--line);
background: color-mix(in srgb, var(--surface-card) 94%, transparent);
backdrop-filter: blur(14px);
}.state-guide-jump .shell{
min-height: 58px;
display: flex;
align-items: center;
gap: 26px;
overflow-x: auto;
scrollbar-width: none;
}.state-guide-jump .shell::-webkit-scrollbar{
display: none;
}.state-guide-jump a{
flex: 0 0 auto;
color: var(--text-heading-on-card);
text-decoration: none;
font-size: .72rem;
font-weight: 800;
letter-spacing: .08em;
text-transform: uppercase;
}.state-guide-intro-section,
.state-guide-section{
scroll-margin-top: 160px;
}.state-guide-intro-grid{
display: grid;
grid-template-columns: minmax(0, 1.5fr) minmax(300px, .7fr);
gap: clamp(42px, 7vw, 90px);
align-items: start;
}.state-guide-intro-grid h2,
.state-guide-section__heading h2{
margin: 0;
color: var(--text-heading-on-page);
font-size: clamp(2.2rem, 4.8vw, 4.4rem);
}.state-guide-intro-grid > div > p:last-child,
.state-guide-intro-grid > div > h2 + .state-guide-richtext,
.state-guide-section__heading > p:last-child{
max-width: 760px;
margin: 24px 0 0;
color: var(--text-body-on-page);
font-size: 1.06rem;
line-height: 1.75;
}@media (min-width: 981px){.state-guide-jump + .state-guide-intro-section{
padding-top: clamp(44px, 4vw, 60px);
}}.state-guide-note{
padding: 30px;
border-left: 3px solid var(--blue-deep);
background: var(--surface-soft);
}.state-guide-note strong{
color: var(--text-heading-on-light);
font-size: 1.15rem;
}.state-guide-note p{
margin: 12px 0 0;
color: var(--text-body-on-light);
line-height: 1.65;
}.state-guide-section__heading{
max-width: 900px;
margin-bottom: clamp(38px, 5vw, 64px);
}.state-guide-section__heading--split{
max-width: none;
display: flex;
justify-content: space-between;
gap: 30px;
align-items: end;
}.state-region-grid{
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 18px;
}.state-region-card{
padding: clamp(28px, 4vw, 42px);
border: 1px solid var(--line);
background: var(--surface-card);
}.state-region-card h3,
.state-season-card h3,
.state-checklist h3{
margin: 0;
color: var(--text-heading-on-card);
}.state-region-card > p{
margin: 14px 0 0;
color: var(--text-body-on-card);
line-height: 1.65;
}.state-region-card__setup{
margin-top: 24px;
padding-top: 20px;
border-top: 1px solid var(--line);
}.state-region-card__setup span,
.state-season-card > span{
display: block;
color: var(--text-accent-on-card);
font-size: .68rem;
font-weight: 900;
letter-spacing: .1em;
text-transform: uppercase;
}.state-region-card__setup p{
margin: 8px 0 0;
color: var(--text-body-on-card);
line-height: 1.6;
}.state-season-grid{
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 14px;
}.state-season-card{
min-height: 100%;
padding: 28px;
border-top: 3px solid var(--blue-deep);
background: var(--surface-soft);
}.state-season-card h3{
margin-top: 10px;
font-size: 1.35rem;
}.state-season-card p{
margin: 14px 0 0;
color: var(--text-body-on-light);
line-height: 1.65;
}.state-checklist-layout{
display: grid;
grid-template-columns: minmax(260px, .72fr) minmax(0, 1.28fr);
gap: clamp(44px, 7vw, 90px);
align-items: start;
}.state-checklist-layout .state-guide-section__heading{
position: sticky;
top: 166px;
margin-bottom: 0;
}.state-checklist{
margin: 0;
padding: 0;
list-style: none;
border-top: 1px solid var(--line);
}.state-checklist li{
padding: 25px 0;
display: grid;
grid-template-columns: 50px minmax(0, 1fr);
gap: 18px;
border-bottom: 1px solid var(--line);
}.state-checklist li > span{
color: var(--text-accent-on-light);
font-size: .72rem;
font-weight: 900;
letter-spacing: .1em;
}.state-checklist h3{
font-size: 1.12rem;
}.state-checklist p{
margin: 8px 0 0;
color: var(--text-body-on-light);
line-height: 1.62;
}.state-related-grid{
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 18px;
}
@media (max-width: 1100px){.state-directory-grid{
grid-template-columns: repeat(2, minmax(0, 1fr));
}.state-season-grid{
grid-template-columns: repeat(2, minmax(0, 1fr));
}.state-related-grid{
grid-template-columns: repeat(2, minmax(0, 1fr));
}}@media (max-width: 980px){.state-guide-jump{
top: 70px;
}.state-guide-intro-grid,
.state-checklist-layout{
grid-template-columns: 1fr;
}.state-checklist-layout .state-guide-section__heading{
position: static;
}.state-guide-section__heading--split{
display: block;
}}@media (max-width: 720px){.page-hero--site{
background-position: center, center, var(--page-hero-mobile-position, var(--page-hero-position, center 50%));
}.states-directory-hero{
margin-bottom: 0;
padding: 26px 0 24px;
background-position: center center;
}.states-directory-hero__inner.shell{
width: 100%;
max-width: none;
padding-inline: 28px;
}.states-directory-hero__copy{
width: 100%;
max-width: none;
}.states-directory-hero .section-label{
margin-bottom: 8px;
font-size: .66rem;
}.states-directory-hero h1{
max-width: none;
font-size: clamp(2.05rem, 9.2vw, 3rem);
}.states-directory-hero p:not(.section-label){
width: 100%;
max-width: none;
margin-top: 10px;
font-size: .91rem;
line-height: 1.4;
}.states-directory-hero__aside{
position: relative;
right: auto;
bottom: auto;
margin-top: 16px;
}.states-directory-hero__stat{
display: inline-flex;
min-width: 0;
align-items: baseline;
gap: 10px;
padding: 8px 11px;
}.states-directory-hero__stat strong{
font-size: 1.55rem;
}.states-directory-hero__stat span{
margin-top: 0;
font-size: .58rem;
}.states-directory-tools,
.state-region-grid,
.state-season-grid,
.state-related-grid{
grid-template-columns: 1fr;
}.states-directory-tools{
align-items: stretch;
}.state-directory-grid{
grid-template-columns: 1fr;
}.state-guide-hero{
min-height: 253px;
align-items: center;
}.state-guide-hero__media{
align-self: center;
}.state-guide-hero__media img{
width: 100%;
height: auto;
object-fit: contain;
object-position: center;
}.state-guide-hero__content{
align-self: center;
padding-top: 0;
padding-bottom: 0;
}.state-guide-hero .section-label{
margin-bottom: 5px;
font-size: 6px;
font-weight: 680;
letter-spacing: .12em;
}.state-guide-hero h1{
max-width: 292px;
margin-bottom: 6px;
font-size: clamp(21.5px, 6.55vw, 23.5px);
font-weight: 400;
}.state-guide-hero__content > p:last-child:not(.section-label){
max-width: 292px;
font-size: 11.2px;
line-height: 1.33;
}.state-guide-jump .shell{
gap: 20px;
}.state-guide-note,
.state-region-card,
.state-season-card{
padding: 24px;
}.state-checklist li{
grid-template-columns: 38px minmax(0, 1fr);
gap: 12px;
}}.state-guide-hero.hero{
position: relative;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
isolation: isolate;
color: #fff;
background-image: radial-gradient(circle at 22% 42%, color-mix(in srgb, var(--state-hero-fallback) 92%, transparent) 0%, var(--state-hero-fallback) 42%, color-mix(in srgb, var(--state-hero-fallback) 70%, var(--state-hero-fallback-dark) 30%) 100%);
}.state-guide-hero.hero .state-guide-hero__media{
z-index: -2;
}.state-guide-hero.hero .state-guide-hero__media img{
display: block;
object-position: center 62%;
filter: var(--bf-public-image-filter);
}.state-guide-hero.hero::after{
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: none;
}.state-guide-hero.hero .hero-copy{
position: relative;
z-index: 1;
width: 100%;
max-width: 1120px;
min-height: inherit;
height: auto;
max-height: none;
margin: 0 auto;
padding: 0 14px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
color: #fff;
}.state-guide-hero.hero .hero-copy .eyebrow{
margin: 0 0 10px;
color: rgba(255, 255, 255, .9);
font-size: 12px;
font-weight: 700;
letter-spacing: .14em;
line-height: 1.2;
text-transform: uppercase;
text-shadow: 0 3px 12px rgba(0, 0, 0, .75);
animation-delay: .2s;
}.state-guide-hero.hero .hero-copy h1{
max-width: 560px;
margin: 0 0 10px;
color: #fff;
font-size: clamp(34px, 5vw, 58px);
letter-spacing: -.035em;
font-weight: 400;
text-shadow: 0 5px 22px rgba(0, 0, 0, .82), 0 2px 8px rgba(0, 0, 0, .72);
animation-delay: .55s;
}.state-guide-hero.hero .hero-copy > p:last-child{
max-width: 560px;
margin: 0;
color: rgba(255, 255, 255, .95);
font-size: 16px;
line-height: 1.42;
text-shadow: 0 3px 12px rgba(0, 0, 0, .76), 0 1px 4px rgba(0, 0, 0, .7);
animation-delay: .9s;
}@media (max-width: 760px){.state-guide-hero.hero{
height: auto;
min-height: 253px;
max-height: none;
}.state-guide-hero.hero .state-guide-hero__media,
.state-guide-hero.hero .state-guide-hero__media img{
max-height: none;
}.state-guide-hero.hero .hero-copy{
min-height: 253px;
height: auto;
max-height: none;
padding: 0 18px;
justify-content: center;
}.state-guide-hero.hero .hero-copy .eyebrow{
margin-bottom: 5px;
font-size: 6px;
font-weight: 680;
letter-spacing: .12em;
}.state-guide-hero.hero .hero-copy h1{
max-width: 292px;
margin-bottom: 6px;
font-size: clamp(21.5px, 6.55vw, 23.5px);
font-weight: 400;
}.state-guide-hero.hero .hero-copy > p:last-child{
max-width: 292px;
font-size: 11.2px;
line-height: 1.33;
}}.state-guide-richtext{
color: var(--text-body-on-page);
font-size: 1rem;
line-height: 1.68;
}.state-guide-richtext > :first-child{ margin-top: 0; }.state-guide-richtext > :last-child{ margin-bottom: 0; }.state-guide-richtext p{ margin: 0 0 1rem; }.state-guide-richtext ul,
.state-guide-richtext ol{ margin: .85rem 0 1rem; padding-left: 1.25rem; }.state-guide-richtext li + li{ margin-top: .42rem; }.state-guide-richtext strong{ color: var(--text-heading-on-page); }.state-guide-richtext--intro{ max-width: 820px; margin-top: 1rem; }.state-guide-map-card{
display: grid;
grid-template-columns: minmax(0, 1.1fr) minmax(270px, .65fr);
gap: clamp(1.2rem, 3vw, 2.4rem);
align-items: center;
margin: 0 0 clamp(2rem, 5vw, 3.75rem);
padding: clamp(1rem, 2.7vw, 1.6rem);
border: 1px solid var(--line);
border-radius: 26px;
background: var(--surface-card);
}.state-guide-map-card__image{
overflow: hidden;
background: var(--surface-soft);
}.state-guide-map-card__image img{
display: block;
width: 100%;
height: auto;
max-height: 680px;
object-fit: contain;
}.state-guide-map-card figcaption{
margin: 0;
color: var(--text-body-on-card);
line-height: 1.65;
}.state-guide-map-card figcaption strong{
display: block;
margin: .45rem 0 .7rem;
color: var(--text-heading-on-card);
font-size: clamp(1.35rem, 2.4vw, 2rem);
line-height: 1.12;
}.state-guide-map-card figcaption p{ margin: 0; }.state-guide-topics{ background: var(--surface-card); }.state-guide-topic-groups{
display: grid;
gap: clamp(2rem, 5vw, 4.25rem);
}.state-guide-topic-group{
display: grid;
grid-template-columns: minmax(220px, .42fr) minmax(0, 1fr);
gap: clamp(1.25rem, 4vw, 3.5rem);
align-items: start;
}.state-guide-topic-group > header{
position: sticky;
top: 160px;
}.state-guide-topic-group > header h3{
margin: .35rem 0 0;
color: var(--text-heading-on-page);
font-size: clamp(1.45rem, 2.8vw, 2.15rem);
}.state-guide-accordion{
border-top: 1px solid var(--line);
}.state-guide-topic,
.state-guide-faq details{
border-bottom: 1px solid var(--line);
}.state-guide-topic summary,
.state-guide-faq summary{
display: grid;
grid-template-columns: minmax(0, 1fr) 28px;
gap: 1rem;
align-items: center;
padding: 1.05rem 0;
color: var(--text-heading-on-page);
font-size: 1.05rem;
font-weight: 720;
line-height: 1.35;
cursor: pointer;
list-style: none;
}.state-guide-topic summary::-webkit-details-marker,
.state-guide-faq summary::-webkit-details-marker{ display: none; }.state-guide-topic summary span,
.state-guide-faq summary span{
display: grid;
place-items: center;
width: 28px;
height: 28px;
border: 1px solid var(--line);
border-radius: 50%;
color: var(--text-accent-on-light);
font-size: 1rem;
transition: transform .18s ease;
}.state-guide-topic[open] summary span,
.state-guide-faq details[open] summary span{ transform: rotate(45deg); }.state-guide-topic__body{
max-width: 830px;
padding: .1rem 2.75rem 1.4rem 0;
}.state-guide-richtext .state-guide-topic__related{
margin-top: 1rem;
padding-top: .9rem;
border-top: 1px solid var(--line);
}.state-guide-faq{
max-width: 920px;
border-top: 1px solid var(--line);
}.state-guide-faq details > p{
max-width: 800px;
margin: 0;
padding: 0 2.75rem 1.35rem 0;
color: var(--text-body-on-light);
line-height: 1.68;
}.state-guide-close-section{
border-top: 1px solid var(--line);
background: var(--surface-soft);
}.state-guide-close{
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: clamp(2rem, 6vw, 5rem);
align-items: end;
}.state-guide-close h2{
margin: .3rem 0 .8rem;
color: var(--text-heading-on-page);
font-size: clamp(2rem, 4vw, 3.7rem);
}.state-guide-close p:not(.section-label){
max-width: 760px;
margin: 0;
color: var(--text-body-on-light);
line-height: 1.68;
}.state-guide-close__actions{
display: grid;
min-width: 210px;
gap: .9rem;
}@media (max-width: 900px){.state-guide-map-card,
.state-guide-topic-group,
.state-guide-close{
grid-template-columns: 1fr;
}.state-guide-topic-group > header{ position: static; }.state-guide-map-card figcaption{ padding: .15rem .25rem .3rem; }.state-guide-close__actions{ min-width: 0; }}@media (max-width: 720px){.state-guide-richtext{ font-size: .98rem; line-height: 1.62; }.state-guide-map-card{
margin-left: -.15rem;
margin-right: -.15rem;
padding: .75rem;
border-radius: 22px;
}.state-guide-map-card__image{ border-radius: 17px; }.state-guide-map-card figcaption{ padding: .3rem .35rem .55rem; }.state-guide-topic-groups{ gap: 2.4rem; }.state-guide-topic summary,
.state-guide-faq summary{ padding: 1rem 0; font-size: 1rem; }.state-guide-topic__body,
.state-guide-faq details > p{ padding-right: .25rem; }.state-guide-section__heading{ margin-bottom: 2rem; }.state-guide-jump .shell{ min-height: 52px; }}.state-guide-learning-links{
max-width: 920px;
}@media (max-width: 720px){.state-guide-learning-links{ grid-template-columns: 1fr; }}.hero-copy.hero-copy-centered{
max-width: 1180px;
}.hero .hero-copy[data-reveal]{
opacity: 1;
transform: none;
transition: none;
}@media (min-width: 981px){.hero-copy.hero-copy-centered{
width: 100%;
max-width: min(1120px, 100%);
}}@media (min-width: 981px){.page-hero--site h1{
max-width: 980px;
font-size: clamp(3.25rem, 5.7vw, 5.85rem);
}}.page-hero--site h1,
.page-hero--site .section-label,
.page-hero--site > .shell > p:last-child{
text-shadow:
0 2px 8px rgba(1, 9, 16, .78),
0 1px 2px rgba(1, 9, 16, .88);
}.states-directory-hero{
background:
linear-gradient(0deg, rgba(3, 9, 15, .12), rgba(3, 9, 15, .12)),
url("../images/states-silhouette-header.webp") center center / cover no-repeat,
linear-gradient(145deg, var(--theme-dark), color-mix(in srgb, var(--theme-dark) 78%, var(--blue-deep)) 72%, var(--theme-dark));
}.states-directory-hero::after{
background: linear-gradient(90deg,
rgba(3, 9, 15, .42) 0%,
rgba(3, 9, 15, .18) 46%,
rgba(3, 9, 15, .05) 100%);
}.state-guide-hero.hero::after{
background:
linear-gradient(90deg,
rgba(5, 12, 18, .42) 0,
rgba(5, 12, 18, .24) 34%,
rgba(5, 12, 18, .07) 62%,
rgba(5, 12, 18, .01) 100%),
linear-gradient(180deg,
rgba(0, 0, 0, .01),
rgba(0, 0, 0, .08));
}@media (max-width: 760px){.page-hero--site{
background-image:
linear-gradient(90deg,
rgba(2, 13, 23, .52) 0%,
rgba(2, 13, 23, .33) 58%,
rgba(2, 13, 23, .16) 100%),
linear-gradient(180deg,
rgba(2, 13, 23, .02),
rgba(2, 13, 23, .12)),
var(--page-hero-image);
}.state-guide-hero.hero::after{
background:
linear-gradient(90deg,
rgba(5, 12, 18, .36) 0,
rgba(5, 12, 18, .20) 40%,
rgba(5, 12, 18, .05) 72%,
rgba(5, 12, 18, .01) 100%),
linear-gradient(180deg,
rgba(0, 0, 0, .01),
rgba(0, 0, 0, .06));
}}.state-guide-learning-links .split-link-card,
.state-guide-close__actions .split-link-card{
width: 100%;
max-width: none;
}.state-guide-section__heading--split > .split-link-card{ width: min(100%, 520px); }.state-guide-learning-links{
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px;
}@media (max-width: 900px){.state-guide-learning-links{ grid-template-columns: 1fr; }.state-guide-section__heading--split > .split-link-card{ margin-top: 20px; }}.inner-main > .page-hero,
.inner-main > .states-directory-hero,
.inner-main > .state-guide-hero{
width: 100%;
margin-bottom: 0;
padding: 0;
display: grid;
align-items: start;
isolation: isolate;
border-radius: 0;
}.inner-main > .page-hero > .shell,
.states-directory-hero > .states-directory-hero__inner,
.state-guide-hero.hero > .state-guide-hero__content{
position: relative;
z-index: 2;
width: var(--shell);
max-width: none;
margin-inline: auto;
padding: 15px 0 22px;
display: block;
align-content: start;
}.inner-main > .page-hero .section-label,
.states-directory-hero .section-label,
.state-guide-hero.hero .hero-copy .eyebrow{
color: var(--white);
text-transform: uppercase;
text-shadow: 0 2px 8px rgba(1, 9, 16, .82);
}.inner-main > .page-hero h1,
.page-hero.page-hero--article h1,
.page-hero.page-hero--piglets h1,
.page-hero.page-hero--kunekune h1,
.states-directory-hero h1,
.state-guide-hero.hero .hero-copy h1{
color: var(--white);
text-shadow: 0 2px 10px rgba(1, 9, 16, .82);
}.inner-main > .page-hero > .shell > p:last-child:not(.section-label),
.states-directory-hero p:not(.section-label),
.state-guide-hero.hero .hero-copy > p:last-child{
color: rgba(255,255,255,.94);
text-shadow: 0 2px 8px rgba(1, 9, 16, .82);
}.state-guide-hero.hero .state-guide-hero__media img{
filter: var(--bf-public-image-filter);
}.states-directory-hero::after,
.state-guide-hero.hero::after{
background: linear-gradient(90deg,
rgba(2, 13, 23, .60) 0%,
rgba(2, 13, 23, .38) 48%,
rgba(2, 13, 23, .14) 100%),
linear-gradient(180deg,
rgba(2, 13, 23, .08) 0%,
rgba(2, 13, 23, .04) 58%,
rgba(2, 13, 23, .18) 100%);
}.page-hero--site{
background-image:
linear-gradient(90deg,
rgba(2, 13, 23, .60) 0%,
rgba(2, 13, 23, .38) 48%,
rgba(2, 13, 23, .14) 100%),
linear-gradient(180deg,
rgba(2, 13, 23, .08) 0%,
rgba(2, 13, 23, .18) 100%),
var(--page-hero-image);
}.state-guide-hero.hero .hero-copy .eyebrow,
.state-guide-hero.hero .hero-copy h1,
.state-guide-hero.hero .hero-copy > p:last-child{
opacity: 1;
transform: none;
animation: none;
}.state-guide-hero.hero .state-guide-hero__media img{
object-fit: cover;
}.states-directory-hero__aside{
position: absolute;
z-index: 3;
top: 15px;
right: 0;
bottom: auto;
}.states-directory-hero__stat{
border-radius: var(--bf-public-control-radius);
}.state-guide-map-card{
border-radius: var(--bf-public-card-radius);
}.state-filter input{
border-radius: var(--bf-public-control-radius);
}.state-filter input{
min-height: 52px;
}.inner-main > .states-directory-hero,
.inner-main > .state-guide-hero{
margin-left: 0;
margin-right: 0;
}@media (max-width: 760px){.inner-main > .page-hero,
.inner-main > .states-directory-hero,
.inner-main > .state-guide-hero{
padding: 0;
align-items: start;
}.inner-main > .page-hero > .shell,
.states-directory-hero > .states-directory-hero__inner,
.state-guide-hero.hero > .state-guide-hero__content{
min-height: 0;
justify-content: flex-start;
}.inner-main > .page-hero h1,
.page-hero.page-hero--article h1,
.page-hero.page-hero--piglets h1,
.page-hero.page-hero--kunekune h1,
.states-directory-hero h1,
.state-guide-hero.hero .hero-copy h1{
margin: 0;
}.inner-main > .page-hero > .shell > p:last-child:not(.section-label),
.states-directory-hero p:not(.section-label),
.state-guide-hero.hero .hero-copy > p:last-child{
margin-top: 10px;
}}.state-guide-note,
.state-region-card,
.state-season-card{
border-radius: var(--bf-public-card-radius);
}.state-guide-note,
.state-region-card,
.state-season-card{
border: 1px solid var(--line);
}.state-guide-note{
border-left: 1px solid var(--line);
}.state-season-card{
border-top: 1px solid var(--line);
}.state-guide-map-card__image{
border-radius: var(--bf-public-control-radius);
}.state-guide-hero.hero .state-guide-hero__media{
grid-area: auto;
left: 0;
right: 0;
}.inner-main > .page-hero,
.inner-main > .states-directory-hero,
.inner-main > .state-guide-hero{
height: var(--bf-full-hero-height);
min-height: 0;
max-height: none;
aspect-ratio: auto;
overflow: hidden;
background-color: var(--theme-dark);
}.page-hero--site{
background-repeat: no-repeat;
}.states-directory-hero{
background-image:
linear-gradient(90deg,
rgba(2, 13, 23, .60) 0%,
rgba(2, 13, 23, .38) 48%,
rgba(2, 13, 23, .14) 100%),
url("../images/states-silhouette-header.webp"),
linear-gradient(145deg, var(--theme-dark), color-mix(in srgb, var(--theme-dark) 78%, var(--blue-deep)) 72%, var(--theme-dark));
background-size: cover, contain, cover;
background-position: center, right center, center;
background-repeat: no-repeat;
}.inner-main > .page-hero > .shell,
.states-directory-hero > .states-directory-hero__inner,
.state-guide-hero.hero > .state-guide-hero__content{
height: 100%;
min-height: 0;
padding-top: 15px;
padding-bottom: 18px;
align-self: start;
justify-content: flex-start;
}.states-directory-hero__copy,
.state-guide-hero.hero .hero-copy{
width: min(100%, 560px);
}.inner-main > .page-hero .section-label,
.states-directory-hero .section-label,
.state-guide-hero.hero .hero-copy .eyebrow{
margin: 0 0 10px;
font-size: 12px;
font-weight: 700;
line-height: 1.2;
letter-spacing: .14em;
}.inner-main > .page-hero h1,
.page-hero.page-hero--article h1,
.page-hero.page-hero--piglets h1,
.page-hero.page-hero--kunekune h1,
.states-directory-hero h1,
.state-guide-hero.hero .hero-copy h1{
max-width: 560px;
margin: 0 0 10px;
font-size: clamp(44px, 5vw, 72px);
font-weight: 400;
letter-spacing: -.035em;
}.inner-main > .page-hero > .shell > p:last-child:not(.section-label),
.states-directory-hero p:not(.section-label),
.state-guide-hero.hero .hero-copy > p:last-child{
max-width: 560px;
margin: 0;
font-size: 16px;
line-height: 1.42;
}.inner-main > .page-hero > .shell > .section-label,
.states-directory-hero__copy > .section-label,
.state-guide-hero.hero .hero-copy > .eyebrow{
opacity: 0;
transform: translate3d(0, var(--bf-full-hero-rise), 0);
animation: bfInteriorHeroFadeUp var(--bf-full-hero-duration) var(--bf-full-hero-ease) .12s both;
}.inner-main > .page-hero > .shell > h1,
.states-directory-hero__copy > h1,
.state-guide-hero.hero .hero-copy > h1{
opacity: 0;
transform: translate3d(0, var(--bf-full-hero-rise), 0);
animation: bfInteriorHeroFadeUp var(--bf-full-hero-duration) var(--bf-full-hero-ease) .42s both;
}.inner-main > .page-hero > .shell > p:last-child:not(.section-label),
.states-directory-hero__copy > p:last-child:not(.section-label),
.state-guide-hero.hero .hero-copy > p:last-child{
opacity: 0;
transform: translate3d(0, var(--bf-full-hero-rise), 0);
animation: bfInteriorHeroFadeUp var(--bf-full-hero-duration) var(--bf-full-hero-ease) .72s both;
}.states-directory-hero__aside{
opacity: 0;
transform: translate3d(0, var(--bf-full-hero-rise), 0);
animation: bfInteriorHeroFadeUp var(--bf-full-hero-duration) var(--bf-full-hero-ease) 1.02s both;
}@media (max-width: 760px){.inner-main > .page-hero,
.inner-main > .states-directory-hero,
.inner-main > .state-guide-hero{
height: var(--bf-full-hero-mobile-height);
min-height: 0;
max-height: none;
}.inner-main > .page-hero > .shell,
.states-directory-hero > .states-directory-hero__inner,
.state-guide-hero.hero > .state-guide-hero__content{
height: 100%;
padding: 15px 0 14px;
}.states-directory-hero__copy,
.state-guide-hero.hero .hero-copy{
width: min(100%, 320px);
}.inner-main > .page-hero .section-label,
.states-directory-hero .section-label,
.state-guide-hero.hero .hero-copy .eyebrow{
margin-bottom: 5px;
font-size: 9px;
font-weight: 700;
letter-spacing: .13em;
}.inner-main > .page-hero h1,
.page-hero.page-hero--article h1,
.page-hero.page-hero--piglets h1,
.page-hero.page-hero--kunekune h1,
.states-directory-hero h1,
.state-guide-hero.hero .hero-copy h1{
max-width: 320px;
margin-bottom: 6px;
font-size: clamp(25px, 7vw, 30px);
}.inner-main > .page-hero > .shell > p:last-child:not(.section-label),
.states-directory-hero p:not(.section-label),
.state-guide-hero.hero .hero-copy > p:last-child{
max-width: 320px;
margin: 0;
font-size: 12.5px;
line-height: 1.36;
}.states-directory-hero__aside{
display: none;
}.page-hero--site{
background-position: center, center, right center;
}}@media (prefers-reduced-motion: reduce){.inner-main > .page-hero > .shell > .section-label,
.inner-main > .page-hero > .shell > h1,
.inner-main > .page-hero > .shell > p:last-child:not(.section-label),
.states-directory-hero__copy > .section-label,
.states-directory-hero__copy > h1,
.states-directory-hero__copy > p:last-child:not(.section-label),
.states-directory-hero__aside,
.state-guide-hero.hero .hero-copy > .eyebrow,
.state-guide-hero.hero .hero-copy > h1,
.state-guide-hero.hero .hero-copy > p:last-child{
opacity: 1;
transform: none;
animation: none;
}}.inner-main > .page-hero,
.inner-main > .states-directory-hero,
.inner-main > .state-guide-hero{
margin-top: 0;
}.page-hero--site{
background-size: cover, cover, cover;
background-position: center, center, var(--page-hero-position, center 50%);
}.inner-main > .state-guide-hero{
height: auto;
max-height: none;
aspect-ratio: 1800 / 738;
}@media (max-width: 760px){.inner-main > .state-guide-hero{
height: auto;
max-height: none;
aspect-ratio: 4 / 3;
}.inner-main > .page-hero > .shell,
.states-directory-hero > .states-directory-hero__inner,
.state-guide-hero.hero > .state-guide-hero__content{
width: calc(100vw - 40px);
margin-inline: auto;
}}.state-guide-hero.hero{
height: auto;
min-height: 440px;
max-height: none;
aspect-ratio: auto;
margin-top: 0;
background-color: var(--state-hero-fallback-dark);
}.state-guide-hero.hero .state-guide-hero__media,
.state-guide-hero.hero .state-guide-hero__media img{
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}.state-guide-hero.hero .state-guide-hero__media img,
.state-guide-hero--california .state-guide-hero__media img,
.state-guide-hero--new-jersey .state-guide-hero__media img{
object-fit: cover;
object-position: center 62%;
transform: none;
}.state-guide-hero--california .state-guide-hero__media img{
object-position: center 58%;
}.state-guide-hero--new-jersey .state-guide-hero__media img{
object-position: center 66%;
}.state-guide-hero.hero .state-guide-hero__content.hero-copy{
width: min(1220px, calc(100vw - 48px));
max-width: none;
min-height: 440px;
height: auto;
margin: 0 auto;
padding: 15px 0 18px;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
}@media (max-width: 980px){.state-guide-hero.hero .state-guide-hero__content.hero-copy{
width: min(760px, calc(100vw - 36px));
}}@media (max-width: 760px){.inner-main > .state-guide-hero,
.state-guide-hero.hero{
width: 100%;
height: auto;
min-height: 253px;
max-height: none;
aspect-ratio: auto;
margin-inline: 0;
}.state-guide-hero.hero .state-guide-hero__media,
.state-guide-hero.hero .state-guide-hero__media img{
width: 100%;
height: 100%;
min-height: 253px;
}.state-guide-hero.hero .state-guide-hero__media img,
.state-guide-hero--california .state-guide-hero__media img,
.state-guide-hero--new-jersey .state-guide-hero__media img{
object-fit: cover;
object-position: center 68%;
}.state-guide-hero.hero .state-guide-hero__content.hero-copy{
width: calc(100vw - 40px);
max-width: none;
min-height: 253px;
height: auto;
margin: 0 auto;
padding: 15px 0 14px;
justify-content: flex-start;
}}@media (prefers-reduced-motion: reduce){.state-guide-hero.hero .hero-copy .eyebrow,
.state-guide-hero.hero .hero-copy h1,
.state-guide-hero.hero .hero-copy > p:last-child{
opacity: 1;
transform: none;
animation: none;
}}button,
.button,
.nav-cta{
border-radius: var(--bf-public-control-radius, 12px);
}.brand img,
.footer-simple__brand img{
filter: none;
}.site-header,
.inner-header,
.site-header.is-fixed,
.site-header.is-scrolled,
.site-footer,
.footer-simple__bottom,
.state-region-card,
.state-checklist,
.state-checklist li{
border-color: var(--bf-silver-line-soft);
}.state-season-card{
border-top: 1px solid var(--bf-silver-line);
}.state-guide-note{
border-left: 1px solid var(--bf-silver-line);
}.button,
.nav-cta{
border-color: var(--bf-silver-line-soft);
}.site-nav a{
border-color: var(--bf-silver-line-faint);
}@media (min-width: 1101px){#bf-public.inner-page .inner-main > .page-hero,
#bf-public.inner-page .inner-main > .states-directory-hero{
height: clamp(500px, 42vw, 680px);
min-height: 500px;
max-height: 680px;
aspect-ratio: auto;
overflow: hidden;
}#bf-public.inner-page .inner-main > .state-guide-hero{
width: 100%;
height: auto;
min-height: 0;
max-height: none;
aspect-ratio: 1800 / 738;
overflow: hidden;
}#bf-public.inner-page .inner-main > .page-hero > .shell,
#bf-public.inner-page .states-directory-hero > .states-directory-hero__inner,
#bf-public.inner-page .state-guide-hero.hero > .state-guide-hero__content.hero-copy{
height: 100%;
min-height: 0;
padding-top: clamp(32px, 4vw, 64px);
padding-bottom: clamp(32px, 4vw, 64px);
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
align-self: stretch;
text-align: left;
}#bf-public.inner-page .state-guide-hero.hero .hero-copy h1{
max-width: 820px;
margin: 0 0 18px;
font-size: clamp(56px, 4.5vw, 78px);
line-height: .99;
letter-spacing: -.04em;
text-align: left;
text-wrap: balance;
}#bf-public.inner-page .states-directory-hero__aside{
top: 50%;
transform: translateY(-50%);
bottom: auto;
}}
/* Keep the State directory artwork on the same shared public image filter. */
#bf-public .states-directory-hero{
background-image: linear-gradient(145deg, var(--theme-dark), color-mix(in srgb, var(--theme-dark) 78%, var(--blue-deep)) 72%, var(--theme-dark));
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
#bf-public .states-directory-hero::before{
content: "";
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
background: url("../images/states-silhouette-header.webp") right center / contain no-repeat;
filter: var(--bf-public-image-filter);
}
#bf-public .states-directory-hero::after{
z-index: 0;
}
#bf-public .states-directory-hero > .states-directory-hero__inner{
position: relative;
z-index: 1;
}
/* 2026-08-29: show State imagery without shading/gradient overlays; hero copy has no text shadow. */
#bf-public .page-hero--site{
background-position: var(--page-hero-position, center 50%);
background-size: cover;
background-repeat: no-repeat;
}
#bf-public .states-directory-hero{
background-image: none;
}
#bf-public .page-hero--site::after,
#bf-public .states-directory-hero::after,
#bf-public .state-guide-hero.hero::after{
content: none;
background: none;
background-image: none;
}
#bf-public .page-hero--site > .shell *,
#bf-public .states-directory-hero__copy *,
#bf-public .state-guide-hero.hero .hero-copy *{
text-shadow: 1px 1px 0 rgba(0, 0, 0, .78);
}
/* 2026-08-31: State directory hero slider uses each state guide's dedicated responsive hero artwork. */
#bf-public .states-directory-hero--slider{
position: relative;
background: var(--theme-dark);
}
#bf-public .states-directory-hero--slider::before{
content: none;
background: none;
}
#bf-public .states-directory-hero__gallery{
position: absolute;
inset: 0;
z-index: 0;
overflow: hidden;
background: var(--theme-dark);
}
#bf-public .states-directory-hero__gallery-slide{
position: absolute;
inset: 0;
display: block;
opacity: 0;
transition: opacity 900ms ease-in-out;
}
#bf-public .states-directory-hero__gallery-slide.is-active{
opacity: 1;
}
#bf-public .states-directory-hero__gallery-slide img{
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 58%;
filter: var(--bf-public-image-filter);
}
#bf-public .states-directory-hero--slider > .states-directory-hero__inner{
position: relative;
z-index: 2;
}
@media (max-width: 760px){
#bf-public .states-directory-hero__gallery-slide img{
object-position: center 64%;
}
}
@media (prefers-reduced-motion: reduce){
#bf-public .states-directory-hero__gallery-slide{
transition: none;
}
}
/* 2026-09-01: State directory scenic card underlays, rebuilt from the current merged baseline. */
@media (max-width: 720px){
}
/* 2026-09-01: Harden the State directory hero slider so every frame is one full image. */
#bf-public .states-directory-hero--slider{
position: relative;
overflow: hidden;
isolation: isolate;
background: var(--theme-dark);
}
#bf-public .states-directory-hero__gallery{
position: absolute;
inset: 0;
width: 100%;
height: 100%;
min-height: 100%;
z-index: 0;
overflow: hidden;
contain: paint;
background: var(--theme-dark);
}
#bf-public .states-directory-hero__gallery-slide{
position: absolute;
inset: 0;
width: 100%;
height: 100%;
min-width: 100%;
min-height: 100%;
margin: 0;
padding: 0;
display: block;
overflow: hidden;
opacity: 0;
z-index: 0;
pointer-events: none;
transform: translateZ(0);
will-change: opacity;
transition: opacity 1100ms cubic-bezier(.22,.61,.36,1);
}
#bf-public .states-directory-hero__gallery-slide.is-active{
opacity: 1;
z-index: 1;
}
#bf-public .states-directory-hero__gallery-slide > img{
position: absolute;
inset: 0;
width: 100%;
height: 100%;
max-width: none;
max-height: none;
margin: 0;
display: block;
object-fit: cover;
object-position: center 58%;
filter: var(--bf-public-image-filter);
}
#bf-public .states-directory-hero--slider > .states-directory-hero__inner{
position: relative;
z-index: 2;
}
@media (max-width: 760px){
#bf-public .states-directory-hero__gallery-slide > img{
object-position: center 64%;
}
}
@media (prefers-reduced-motion: reduce){
#bf-public .states-directory-hero__gallery-slide{
transition: none;
will-change: auto;
}
}
/* Shared link-card placement: state directory and related-reading links use the one public link-card component. */
#bf-public .state-directory-card[hidden]{
display:none;
}
#bf-public .state-directory-card{
min-width:0;
}
#bf-public .state-directory-card > .split-link-card,
#bf-public .state-related-grid > .split-link-card{
width:100%;
max-width:none;
}