/* Design 1: "Counsel" palette and type (navy + gold, sharp corners) applied over the shared layout */
:root{
  --bg:#f7f4ec; --paper:#ffffff; --ink:#10203a; --muted:#5d6675; --line:#e2dccd;
  --teal:#12233c; --teal-dark:#0d1a2d; --teal-soft:#efeadd; --sand:#efeadd;
  --accent:#b8912f; --accent-dark:#8f6f1f; --radius:4px;
  --shadow:0 2px 10px rgba(13,26,45,.06),0 18px 44px rgba(13,26,45,.10);
}
body{color:#1c2431}
a{color:#12233c}
.site-header{background:#0d1a2d;border-bottom:3px solid #b8912f;backdrop-filter:none}
.brand{color:#fff}
.brand .mark{background:#b8912f;color:#0d1a2d;border-radius:4px}
nav.primary a.top{color:#e9edf5}
nav.primary a.top:hover,nav.primary li:focus-within>a.top{background:rgba(255,255,255,.08);color:#cba64a}
.drop{border-radius:4px;border-top:3px solid #b8912f}
.btn{background:#b8912f;color:#0d1a2d!important;border-radius:4px}
.btn:hover{background:#cba64a}
.btn.ghost{color:#12233c!important;border-color:#12233c}
.menu-toggle{background:transparent;color:#fff;border-color:rgba(255,255,255,.35)}
.hero{background:linear-gradient(135deg,#0d1a2d 0%,#12233c 60%,#1b3050 100%);border-bottom:3px solid #b8912f}
.hero h1,.hero .lede,.hero h2{color:#fff}
.hero .lede{color:#cdd5e3}
.hero .eyebrow,.eyebrow{color:#cba64a}
.hero .crumbs,.hero .crumbs a{color:#aab6cc}
.hero h2,.hero .chooser-label{color:#f1e7c8}
.chip,.chooser a{border-radius:4px}
.card{border-radius:4px;border-top:3px solid #b8912f}
.card .go{color:#12233c}
.card h3{color:#10203a}
.callout{background:#f1ecdd;border-color:#e2dccd;border-left:5px solid #b8912f;border-radius:4px}
.insight{border-top-color:#b8912f}
.insight .label{color:#8f6f1f}
.insight.big .q{color:#10203a}
.cta{background:#0d1a2d;border-top:3px solid #b8912f}
.cta p{color:#cdd5e3}
footer.site-footer{background:#08111f;color:#9fb0c8}
footer .fine{border-top-color:#1b3050;color:#7f90aa}
.toc a.current,.toc li.current a{color:#8f6f1f}
.flow a{border-radius:4px}
.photostrip img,.figure img{border-radius:4px}
.author-box{border-left:4px solid #b8912f;border-radius:4px}
.hero .byline,.hero .byline span{color:#cdd5e3}
.hero .byline a{color:#f1e7c8}
.hero .byline .dot{background:#b8912f;color:#0d1a2d}
/* Design 1: "Counsel" palette and type (navy + gold, sharp corners) applied over the shared layout */
:root{
  --bg:#f7f4ec; --paper:#ffffff; --ink:#10203a; --muted:#5d6675; --line:#e2dccd;
  --teal:#12233c; --teal-dark:#0d1a2d; --teal-soft:#efeadd; --sand:#efeadd;
  --accent:#b8912f; --accent-dark:#8f6f1f; --radius:4px;
  --shadow:0 2px 10px rgba(13,26,45,.06),0 18px 44px rgba(13,26,45,.10);
}
body{color:#1c2431}
a{color:#12233c}
.site-header{background:#0d1a2d;border-bottom:3px solid #b8912f;backdrop-filter:none}
.brand{color:#fff}
.brand .mark{background:#b8912f;color:#0d1a2d;border-radius:4px}
nav.primary a.top{color:#e9edf5}
nav.primary a.top:hover,nav.primary li:focus-within>a.top{background:rgba(255,255,255,.08);color:#cba64a}
.drop{border-radius:4px;border-top:3px solid #b8912f}
.btn{background:#b8912f;color:#0d1a2d!important;border-radius:4px}
.btn:hover{background:#cba64a}
.btn.ghost{color:#12233c!important;border-color:#12233c}
.menu-toggle{background:transparent;color:#fff;border-color:rgba(255,255,255,.35)}
.hero{background:linear-gradient(135deg,#0d1a2d 0%,#12233c 60%,#1b3050 100%);border-bottom:3px solid #b8912f}
.hero h1,.hero .lede,.hero h2{color:#fff}
.hero .lede{color:#cdd5e3}
.hero .eyebrow,.eyebrow{color:#cba64a}
.hero .crumbs,.hero .crumbs a{color:#aab6cc}
.hero h2,.hero .chooser-label{color:#f1e7c8}
.chip,.chooser a{border-radius:4px}
.card{border-radius:4px;border-top:3px solid #b8912f}
.card .go{color:#12233c}
.card h3{color:#10203a}
.callout{background:#f1ecdd;border-color:#e2dccd;border-left:5px solid #b8912f;border-radius:4px}
.insight{border-top-color:#b8912f}
.insight .label{color:#8f6f1f}
.insight.big .q{color:#10203a}
.cta{background:#0d1a2d;border-top:3px solid #b8912f}
.cta p{color:#cdd5e3}
footer.site-footer{background:#08111f;color:#9fb0c8}
footer .fine{border-top-color:#1b3050;color:#7f90aa}
.toc a.current,.toc li.current a{color:#8f6f1f}
.flow a{border-radius:4px}
.photostrip img,.figure img{border-radius:4px}
.author-box{border-left:4px solid #b8912f;border-radius:4px}
.hero .byline,.hero .byline span{color:#cdd5e3}
.hero .byline a{color:#f1e7c8}
.hero .byline .dot{background:#b8912f;color:#0d1a2d}

/* Type: Garamond headings, Arial body, larger sizes site-wide */
:root{--serif:"EB Garamond",Garamond,"Times New Roman",serif; --sans:Arial,Helvetica,sans-serif}
html{font-size:112.5%}
body{font:1.08rem/1.7 var(--sans)}
h1{font-size:clamp(2.4rem,5vw,3.6rem)}
h2{font-size:clamp(1.9rem,3.4vw,2.4rem)}
h3{font-size:1.5rem}
.card h3{font-size:1.45rem}
.brand{font-size:1.35rem}
details.lesson summary{font-size:1.4rem}
.callout h2,.callout h3{font-size:1.65rem}
.insight.big .q,.kicker-quote{font-size:clamp(1.8rem,3.4vw,2.4rem)}
.card p{font-size:1rem}
.card .go{font-size:.98rem}
.toc{font-size:.98rem}
.cap,.crumbs{font-size:.95rem}
footer.site-footer{font-size:1rem}
footer .fine{font-size:.92rem}
nav.primary a.top{font-size:.88rem}
.drop a{font-size:1rem}
@media (max-width:520px){body{font-size:1.02rem}}
.card .ico{width:3.4rem;height:3.4rem;border-radius:50%;background:#12233c;color:#cba64a;display:grid;place-items:center;margin-bottom:1rem;border:2px solid #b8912f}
.chip .ico{width:3rem;height:3rem;border-radius:50%;background:#12233c;color:#cba64a;display:grid;place-items:center;margin-bottom:.6rem;border:2px solid #b8912f}
.brand{font-size:1.15rem;white-space:nowrap}
nav.primary a.top{font-size:.78rem;padding:.6rem .55rem;white-space:nowrap;letter-spacing:.04em}
.bar .btn.small{white-space:nowrap}
@media (max-width:1180px){.brand{font-size:1.05rem}nav.primary a.top{font-size:.72rem;padding:.55rem .4rem}}
.related-reading{margin:2.5rem 0 1.5rem;padding:1.2rem 1.5rem;background:#fff;border:1px solid #e2dccd;border-left:5px solid #b8912f;border-radius:4px}
.related-reading h3{margin:0 0 .6rem;font-size:1.4rem}
.related-reading ul{margin:0;padding-left:1.2rem}
.related-reading li{margin:.35rem 0}
@media (max-width:700px){
 .brand{white-space:normal;font-size:.98rem;line-height:1.1}
 .brand .mark{display:none}
 .bar{gap:.5rem}
 .bar .btn.small{padding:.5rem .6rem;font-size:.62rem;letter-spacing:.03em}
 .menu-toggle{padding:.45rem .6rem;font-size:.85rem}
}

/* Logo, lighter buttons, one-line headings */
.logo-svg{width:2.7rem;height:2.7rem;flex:none;display:block}
.brand{gap:.7rem}
.btn{background:#ecd286;color:#0d1a2d!important;border:1px solid #cba64a}
.btn:hover{background:#f6e3a6;color:#0d1a2d!important}
.cta .btn{background:#f1dc9a}
.hero h1,.hero.page h1{max-width:38ch;text-wrap:balance}
h1,h2,h3{text-wrap:balance}
.chip strong{font-size:.95rem;white-space:nowrap}
.chip{padding-left:1rem;padding-right:.8rem}
@media (max-width:700px){
 .logo-svg{width:2.2rem;height:2.2rem}
 .brand .mark{display:none}
 .hero h1,.hero.page h1{max-width:100%}
 .chip strong{white-space:normal}
}
.chip{padding-left:.9rem;padding-right:.6rem}
.chip strong{font-size:.88rem;letter-spacing:-.01em}
@media (max-width:700px){.chip strong{font-size:.95rem}}

/* Header banner: Santa Clarita Valley aerial under a navy overlay */
.hero{background-color:#0d1a2d;
background-image:linear-gradient(100deg,rgba(13,26,45,.93) 0%,rgba(13,26,45,.80) 45%,rgba(18,35,60,.55) 100%),url(img/header-valley.jpg);
background-size:cover;background-position:center 62%;background-repeat:no-repeat}
@media (max-width:700px){.hero{background-image:linear-gradient(180deg,rgba(13,26,45,.90),rgba(13,26,45,.72)),url(img/header-valley.jpg);background-position:62% center}}

/* Spacing below cards and callouts */
.article .insight,.insight{margin-bottom:2.4rem}
.insight+*,.figure+*,.photostrip+*{margin-top:2.4rem}
details.lesson+*:not(details){margin-top:2rem}
details.faq+*:not(details){margin-top:2rem}

/* Equal-size cards in the lesson grid (collapsed state) */
.lessons details.lesson{align-self:start}
.lessons details.lesson summary{min-height:8.4rem;display:flex;flex-direction:column;justify-content:flex-start}
@media (max-width:720px){.lessons details.lesson summary{min-height:0}}
.split img{max-width:100%;height:auto;display:block}
.split>*{min-width:0}
.contact-main{background:#fff}

/* Accessibility */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:3px solid #8f6f1f;outline-offset:3px;border-radius:3px}
.site-header a:focus-visible,.site-header button:focus-visible,.hero a:focus-visible,.cta a:focus-visible,.site-footer a:focus-visible,.drop a:focus-visible{outline:3px solid #f1e7c8;outline-offset:2px}
.drop a:focus-visible{outline-color:#8f6f1f}
.skip:focus{outline:3px solid #8f6f1f}

/* Very narrow phones (320-380px) and text-spacing overrides: let the header wrap */
@media (max-width:380px){
 .bar{height:auto;flex-wrap:wrap;padding-top:.5rem;padding-bottom:.5rem;row-gap:.4rem}
 .logo-svg{width:1.9rem;height:1.9rem}
 .brand{font-size:.85rem}
 .bar .btn.small{font-size:.58rem;padding:.4rem .5rem}
 .menu-toggle{font-size:.8rem;padding:.4rem .5rem}
}

/* Reflow at 320px: let card grids shrink below their preferred column width */
.grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,17rem),1fr))}
.lessons{grid-template-columns:repeat(auto-fit,minmax(min(100%,20rem),1fr))}
h1,h2,h3,h4,p,li,summary{overflow-wrap:break-word}

/* Hover color on dark backgrounds: gold instead of the default dark teal */
.site-header .brand:hover,.site-header .brand:hover span{color:#ecd286!important}
.site-footer a:hover,.hero a:hover,.cta a:not(.btn):hover{color:#ecd286!important}
.site-footer a:hover,.hero a:hover{text-decoration-color:#ecd286}
.site-header .brand:hover .logo-svg{filter:brightness(1.15)}

/* Space between the page header band and the first content, matched across page types */
.hero + .wrap > .faq-wrap,.hero + .wrap > .gl-wrap{padding-top:4.5rem}
.hero + .wrap > .guide{padding-top:4.5rem}
@media(max-width:700px){.hero + .wrap > .faq-wrap,.hero + .wrap > .gl-wrap{padding-top:3.4rem}.hero + .wrap > .guide{padding-top:3rem}}

/* Space below card grids when text, lists or accordions follow */
.grid + p,.grid + ul,.grid + ol,.grid + details,.grid + blockquote,.grid + div:not(.grid){margin-top:2rem}

/* Step strips: keep every step on one row, however many there are */
.flow{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr)}
@media(max-width:700px){.flow{display:flex;grid-auto-flow:unset}}

/* Numbered step circles turn gold on hover and keyboard focus */
.flow a::before{transition:background-color .15s,color .15s}
.flow a:hover::before,.flow a:focus-visible::before{background:#cba64a;color:#0d1a2d}
.flow a:hover,.flow a:focus-visible{color:#0d1a2d}
@media(prefers-reduced-motion:reduce){.flow a::before{transition:none}}