:root{color-scheme:light;--ink:#131510;--paper:#faf8f3;--cream:#f0f0ea;--taupe:#a8a69d;--camel:#a28461;--espresso:#584633;--gold:#dfbf8a;--line:#d9d2c4;--display:Baskerville,Georgia,serif;--body:"Avenir Next",Avenir,system-ui,sans-serif}
*,*::before,*::after{box-sizing:border-box}
html{scroll-padding-top:1.5rem}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);line-height:1.6}
[hidden]{display:none!important}
a{color:inherit;text-underline-offset:.2em}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid #9d6b36;outline-offset:4px}
h1,h2,h3,p{margin:0}
h1,h2,h3{line-height:1.08}
h1,h2{font-family:var(--display);font-weight:400}
h1{font-size:clamp(3.4rem,8vw,7.6rem);letter-spacing:-.045em}
h2{font-size:clamp(2rem,3.6vw,3.2rem);letter-spacing:-.025em}
h3{font-size:1.08rem}
p,li{max-width:73ch}
.shell{width:min(100% - 5rem,78rem);margin-inline:auto}
.skip{position:absolute;top:-8rem;left:1rem;z-index:10;padding:.75rem;background:var(--paper)}
.skip:focus{top:1rem}
.site-header,.site-footer{background:var(--ink);color:var(--cream)}
.header-inner,.footer-inner{display:flex;justify-content:space-between;align-items:center;gap:1rem;min-height:5rem}
.header-inner img{display:block;max-width:100%;height:auto}
.header-inner nav,.footer-inner nav{display:flex;gap:clamp(.7rem,3vw,2rem);font-size:.93rem}
.site-header a,.site-footer a{text-decoration:none}
.site-header a:hover,.site-footer a:hover{text-decoration:underline}
.hero{background:var(--ink);color:var(--cream);border-top:1px solid #ffffff26;position:relative;overflow:hidden}
.hero-grid{min-height:28rem;padding-block:clamp(2.8rem,6vw,5.5rem);display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(2rem,6vw,5rem);align-items:center}
.hero h1{font-size:clamp(3.05rem,6.5vw,6.45rem);max-width:14ch}
.kicker{font-weight:650;letter-spacing:.035em;font-size:.9rem;color:var(--espresso);margin-bottom:1rem}
.hero .kicker{color:var(--gold)}
.hero-summary{font-size:clamp(1.1rem,2.1vw,1.32rem);margin-block:1.35rem 1.65rem;max-width:54ch}
.hero .hero-summary{color:#e9dfd0}
.hero-solution{font-size:1.04rem;max-width:52ch;margin:-.55rem 0 1.45rem}
.library-photo{margin:0;border:1px solid #b39567;padding:.45rem}
.library-photo img{display:block;width:100%;height:auto;aspect-ratio:6/5;object-fit:cover}
.button{display:inline-block;text-decoration:none;background:var(--gold);color:var(--ink);padding:.7rem 1.04rem;font-weight:700;border:1px solid var(--gold)}
.button:hover{background:#efcf9e;text-decoration:none}
.start-band{padding:1.75rem 0 2rem;background:var(--cream);border-bottom:1px solid var(--line)}
.start-band h2{font-size:clamp(1.8rem,3vw,2.65rem);margin-bottom:1.05rem}
.start-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem 2rem;margin:0;padding-left:1.35rem}
.start-grid>li{padding-left:.2rem}
.start-grid>li::marker{font-weight:700;color:var(--espresso)}
.start-grid h3{font:700 1rem var(--body);margin-bottom:.42rem}
.start-band ul,.guide-list,.sources ul{list-style:none;padding:0;margin:0}
.start-band ul{display:flex;gap:.25rem 1.05rem;flex-wrap:wrap;font-size:.91rem}
.start-band a{font-weight:650;color:var(--espresso)}
.body-grid{display:grid;grid-template-columns:minmax(11rem,1fr) minmax(0,3fr);gap:clamp(2rem,6vw,6rem);padding-block:4rem}
.category-nav nav,.article-side nav{position:sticky;top:1.5rem;display:flex;flex-direction:column;gap:.6rem}
.category-nav nav h2,.article-side nav h2{font:700 1rem var(--body);margin-bottom:.5rem}
.category-nav a,.article-side nav a{font-size:.94rem;color:var(--espresso)}
.directory-head>p{margin-top:.7rem}
.search{margin-top:1.5rem}
.search label{display:block;font-size:.92rem;font-weight:700;margin-bottom:.45rem}
.search div{display:flex;max-width:35rem}
.search input,.search button{font:inherit;border:1px solid var(--camel);padding:.55rem .7rem;color:var(--ink)}
.search input{min-width:0;flex:1;background:#fff}
.search button{background:var(--cream);border-left:0;cursor:pointer;font-weight:650}
#search-count{font-size:.9rem;color:var(--espresso);min-height:1.4rem;margin-top:.3rem}
#no-results{border:1px solid var(--line);padding:1rem}
.guide-group{margin-top:2.45rem}
.guide-group>h3{font:400 clamp(1.75rem,3vw,2.6rem)/1.06 var(--display);letter-spacing:-.022em}
.guide-group>p{margin:.6rem 0 1rem;color:var(--espresso)}
.directory-row{display:grid;grid-template-columns:minmax(11rem,1fr) minmax(14rem,1.45fr) auto;gap:1rem;align-items:start;border-top:1px solid var(--line);padding:.9rem 0;max-width:none}
.directory-row:last-child{border-bottom:1px solid var(--line)}
.row-title{font-weight:700;text-decoration:none}
.row-title:hover{text-decoration:underline}
.arrow{display:inline-block;margin-left:.42em;color:var(--espresso);font-size:.95em}
.directory-row p,.route{font-size:.91rem}
.route{color:var(--espresso);text-align:right}
.prepare{background:var(--cream);border-top:1px solid var(--line);padding:3.8rem 0}
.prepare-grid{display:grid;grid-template-columns:1fr 1fr;gap:4rem}
.prepare ul{margin:.9rem 0 0;padding-left:1.2rem}
.prepare h2{font-size:2.2rem}
.prepare h2+p{margin-top:.9rem}
.reference-line{display:flex;flex-wrap:wrap;gap:.8rem 1.1rem;margin-top:.8rem;font-size:.88rem;color:var(--espresso)}
.crumb{font-size:.9rem;color:var(--espresso);padding-top:1.35rem}
.crumb nav{display:flex;gap:.7rem;flex-wrap:wrap}
.article-top{padding-block:clamp(2.6rem,6vw,5rem);display:grid;grid-template-columns:minmax(0,2.3fr) minmax(12rem,1fr);align-items:end;gap:clamp(1.4rem,6vw,5rem);border-bottom:1px solid var(--line)}
.article-top h1{font-size:clamp(3.25rem,7vw,6.3rem);overflow-wrap:break-word}
.article-top .hero-summary{margin-bottom:0}
.article-top aside{border-top:3px solid var(--camel);background:var(--cream);padding:1.25rem}
.article-top aside h2{font:700 1rem var(--body)}
.article-top aside p{margin:.5rem 0 .9rem}
.article-grid{display:grid;grid-template-columns:minmax(0,2.3fr) minmax(12rem,1fr);gap:clamp(1.4rem,6vw,5rem);padding-block:3rem}
.why{padding:1.12rem 1.3rem;margin-bottom:2rem;background:var(--cream);border-left:3px solid var(--camel)}
.why h2{font-size:1.9rem}
.why p{margin-top:.5rem}
.steps{list-style:none;margin:1.15rem 0 0;padding:0;counter-reset:steps}
.steps li{position:relative;counter-increment:steps;max-width:none;border-top:1px solid var(--line);padding:1.1rem 0 1.2rem 2.65rem}
.steps li::before{content:counter(steps,decimal-leading-zero);position:absolute;top:1rem;left:0;color:var(--espresso);font:1.3rem var(--display)}
.steps p{margin-top:.45rem}
.done{margin-top:1rem;padding:1.25rem 1.4rem;background:var(--cream)}
.done h2,.sources h2{font-size:1.7rem}
.done p{margin-top:.5rem}
.article-side nav{position:static;padding-bottom:1.6rem;border-bottom:1px solid var(--line)}
.sources{margin-top:1.35rem}
.sources li{margin:.65rem 0;color:var(--espresso)}
.sources p{margin-top:1rem;font-size:.87rem;color:var(--espresso)}
.related{border-top:1px solid var(--line);padding-block:1.9rem 3rem}
.related h2{font-size:2rem;margin-bottom:.7rem}
.related div{display:flex;gap:.7rem 1.35rem;flex-wrap:wrap}
.footer-inner span{font-family:var(--display);font-size:1.2rem}
@media(max-width:900px){
.shell{width:min(100% - 3rem,78rem)}
.body-grid{gap:1.7rem;grid-template-columns:11rem minmax(0,1fr)}
.directory-row{grid-template-columns:1fr auto;gap:.25rem .75rem}
.directory-row p{grid-column:1 / -1;grid-row:2}
}
@media(max-width:650px){
.shell{width:calc(100% - 2rem)}
.header-inner,.footer-inner{min-height:4rem}
.header-inner img{width:125px}
.header-inner nav,.footer-inner nav{font-size:.8rem}
.hero-grid,.body-grid,.prepare-grid,.article-top,.article-grid{grid-template-columns:minmax(0,1fr)}
.hero-grid{gap:2rem;padding-block:2.8rem}
.library-photo{max-width:30rem}
.body-grid,.prepare,.article-grid{padding-block:2.4rem}
.start-grid{grid-template-columns:minmax(0,1fr)}
.category-nav nav{position:static;display:flex;flex-direction:row;flex-wrap:wrap;gap:.6rem .9rem}
.category-nav nav h2{width:100%;margin:0}
.category-nav a{font-size:.87rem}
.prepare-grid,.article-grid{gap:2rem}
.article-side nav{display:none}
.route{font-size:.79rem}
}