@font-face { font-family: 'Della Respira'; src: url('/bloomhooks-site/della-respira-latin.woff2') format('woff2'); font-style: normal; font-weight: 400; font-display: swap; }
@font-face { font-family: 'Hanken Grotesk'; src: url('/bloomhooks-site/hanken-grotesk-latin.woff2') format('woff2'); font-style: normal; font-weight: 100 900; font-display: swap; }
.guide-page { font-family: 'Hanken Grotesk', Arial, sans-serif; }
.guide-page h1, .guide-page h2 { font-family: 'Della Respira', Georgia, serif; font-weight: 400; letter-spacing: -.04em; }
.guide-page .hero { padding-block:35px 40px; grid-template-columns:1.25fr 1fr; gap:60px; align-items:end; }
.guide-page h1 { font-size:clamp(39px,5.3vw,67px); max-width:17ch; margin:0; line-height:1.08; }
.guide-page .hero p { font-size:18px; margin:0; color:var(--muted); max-width:50ch; }
.breadcrumbs { display:flex; flex-wrap:wrap; gap:9px 12px; font-size:12px; color:var(--muted); padding-top:28px; }
.breadcrumbs a { text-decoration:none; }.breadcrumbs a:hover { text-decoration:underline; }
.guide-page .stage { border-block:1px solid #44223925; padding-block:15px; margin:0; }
.body { display:grid; grid-template-columns:220px minmax(0,1fr); gap:64px; padding-block:50px 72px; }
.contents { position:sticky; top:25px; align-self:start; font-size:13px; }
.contents p { margin-bottom:16px; font-weight:700; }.contents ol { list-style:none; padding:0; margin:0; display:grid; gap:13px; }
.contents a { display:block; text-decoration:none; color:var(--muted); line-height:1.6; }.contents a:hover { color:#683795; text-decoration:underline; }
.article { min-width:0; background:var(--paper); border:1px solid var(--edge); border-radius:8px 38px 8px 8px; padding:40px; }
.article section { scroll-margin-top:30px; margin-bottom:40px; }.article section:last-child { margin-bottom:0; }
.article h2 { font-size:clamp(26px,3vw,35px); line-height:1.17; margin-bottom:17px; }
.article p { color:var(--muted); max-width:70ch; margin-bottom:17px; }.article p:last-child { margin-bottom:0; }
.article li { margin-bottom:9px; color:var(--muted); }.article ul,.article ol { padding-left:23px; }
.article .example { font-size:16px; border-left:3px solid #8750cb; padding:25px; background:#f4dce8; }
.article .example-label { font-size:12px; color:var(--ink); margin-bottom:14px; }
.checklist { border:1px solid var(--edge); padding:25px; }.checklist ul { margin-bottom:0; }
.questions { padding-top:28px; border-top:1px solid var(--edge); }.questions details { border-bottom:1px solid var(--edge); padding-block:17px; }.questions summary { cursor:pointer; font-weight:650; }.questions details p { margin-top:13px; font-size:15px; }
.related ul { display:grid; gap:5px; margin-bottom:20px; }.related a,.contact a { font-size:14px; }.contact { border-top:1px solid var(--edge); padding-top:28px; }.contact a { display:inline-block; margin-top:10px; font-weight:650; overflow-wrap:anywhere; }
.guide-index { padding-block:38px 50px; display:grid; grid-template-columns:1fr 1fr; gap:0 48px; }
.guide-index article { padding-block:28px; border-bottom:1px solid var(--edge); }.guide-index h2 { font-size:31px; max-width:24ch; }.guide-index h2 a { text-decoration:none; }.guide-index h2 a:hover { text-decoration:underline; }.guide-index p { color:var(--muted); font-size:15px; max-width:50ch; }.read-guide { font-size:13px; font-weight:650; }
.product-links { grid-column:1/-1; display:flex; flex-wrap:wrap; gap:14px 28px; padding-top:40px; font-size:14px; }.product-links h2 { flex-basis:100%; font-size:30px; margin-bottom:7px; }.guide-index+.body { padding-top:0; }
@media(max-width:950px) { .guide-page .hero { gap:35px; }.body { gap:35px; grid-template-columns:170px minmax(0,1fr); }.article { padding:30px; } }
@media(max-width:700px) { .guide-page .hero { display:block; padding-block:27px; }.guide-page h1 { max-width:100%; font-size:clamp(36px,9vw,50px); margin-bottom:23px; }.guide-page .hero p { font-size:16px; }.breadcrumbs { padding-top:22px; }.body { display:block; padding-block:30px 45px; }.contents { position:static; padding-bottom:25px; margin-bottom:28px; border-bottom:1px solid var(--edge); }.contents ol { gap:9px; }.article { padding:25px 22px; border-radius:8px 30px 8px 8px; }.article p { font-size:15px; }.article section { margin-bottom:32px; }.article h2 { font-size:28px; }.article .example,.checklist { padding:20px; }.guide-index { display:block; padding-block:15px 35px; }.guide-index h2 { font-size:29px; }.product-links { display:grid; gap:15px; padding-top:30px; }.guide-page .stage { font-size:12px; } }