/* The Bead Aisle: typewriter lettering with handwritten script accents. */
:root{--typewriter:'Special Elite','Courier New',monospace;--script:'Oooh Baby',cursive}
body{font-family:var(--typewriter);font-size:13px;line-height:1.85}
.wordmark{font-family:var(--typewriter);font-size:30px;font-weight:400;letter-spacing:.4px;line-height:1.2}
.wordmark span{font-size:8px;letter-spacing:2px;margin-top:10px}
.header nav{font-size:11px;gap:28px}
.hero h1{font-family:var(--typewriter);font-size:clamp(30px,3.1vw,45px);font-weight:400;line-height:1.25;letter-spacing:0;margin-bottom:24px}
.hero-typed{display:block;margin-bottom:8px}
.hero h1 .hero-script{display:block;font:400 clamp(50px,5.1vw,74px)/1.08 var(--script);letter-spacing:0;color:#657257}
h2{font:400 clamp(24px,2.5vw,35px)/1.35 var(--typewriter);letter-spacing:0}
h2 em{font:400 1.42em/1 var(--script);letter-spacing:0}
.intro{font-size:13px;line-height:1.85;max-width:365px}
.eyebrow{font-family:var(--sans);font-size:9px}
.button{font-size:12px;background:transparent;color:var(--ink);border:1px solid var(--green);padding:14px 21px;gap:30px}
.button:hover{background:var(--green);color:var(--paper)}
.text-button{font-size:11px;gap:22px}
.section-head>p,.story-copy>p:not(.eyebrow),.craft-guide p,.contact>p:not(.eyebrow){font-size:13px;line-height:1.85}
.filters button{font-size:11px}
.piece-title{font:400 17px/1.45 var(--typewriter)}
.piece-type{font-size:8px;letter-spacing:.5px}
.piece-caption{align-items:baseline;flex-wrap:wrap;gap:5px 12px}
.photo-note{font:400 29px/1.25 var(--script)}
.craft h2{font-size:30px;line-height:1.4}
.craft-guide h3{font:400 25px/1.4 var(--typewriter)}
.contact h2{font-size:32px}
footer .wordmark{font-family:var(--typewriter);font-size:26px}
.detail-copy h2{font-size:30px}.detail-copy>p:not(.eyebrow){font-size:13px}
.guide-hero h1{font:400 clamp(28px,3vw,43px)/1.3 var(--typewriter);letter-spacing:0}
.guide-hero h1 em{font:400 1.5em/1.1 var(--script);color:#657257}
.materials h2,.steps-heading h2,.guide-end h2{font-size:29px}
.step-copy h3{font:400 23px/1.4 var(--typewriter);letter-spacing:0}
.guide-reminder h2{font:400 23px/1.4 var(--typewriter);letter-spacing:0}
.guide-intro,.step-copy p{font-size:13px;line-height:1.85}
.guide-main svg text,.craft-illustration svg text{font-family:var(--sans)}
@media(max-width:1000px){.wordmark{font-size:25px}.header{gap:24px}.header nav{gap:15px;font-size:10px}.hero h1{font-size:32px}.hero h1 .hero-script{font-size:53px}.craft h2{font-size:27px}.craft-guide h3{font-size:23px}.guide-hero h1{font-size:31px}.step-copy h3{font-size:21px}}
@media(max-width:700px){.wordmark{font-size:26px}.wordmark span{font-size:6px;letter-spacing:1.5px}.hero h1{font-size:34px}.hero h1 .hero-script{font-size:60px;line-height:1.04}.hero{gap:29px}.hero .eyebrow{font-size:8px;letter-spacing:1.8px}.intro{font-size:13px;max-width:360px}h2,.contact h2{font-size:27px}.section-head>p,.story-copy>p:not(.eyebrow){font-size:13px}.piece-title{font-size:16px}.craft h2{font-size:27px}.craft-guide h3{font-size:24px}.photo-note{font-size:27px}.text-button{font-size:11px}.filters button{font-size:9px}.guide-hero h1{font-size:30px}.guide-hero h1 em{font-size:47px}.materials h2,.steps-heading h2,.guide-end h2{font-size:27px}.step-copy h3{font-size:23px}.guide-reminder h2{font-size:22px}footer .wordmark{font-size:23px}.detail-copy h2{font-size:26px}}
@media(max-width:360px){.hero h1{font-size:30px}.hero h1 .hero-script{font-size:52px}.wordmark{font-size:23px}.guide-hero h1{font-size:26px}.guide-hero h1 em{font-size:41px}}