/* A tactile, stitched chapter for discovering a first craft. */
.discover{position:relative;background-color:var(--wash);background-image:repeating-linear-gradient(0deg,transparent 0 3px,#76634504 3px 4px),repeating-linear-gradient(90deg,transparent 0 3px,#76634504 3px 4px)}
.discover .section-head{margin-bottom:30px}.discover .section-head p{max-width:300px}
.discover-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:32px}
.discover-tabs button{position:relative;display:flex;flex-direction:column;padding:5px 5px 0;border-radius:70px 70px 14px 14px;background:var(--paper);border:1px solid #cfc5b2;color:var(--ink);min-width:0;transition:transform .2s,box-shadow .2s,border-color .2s}
.discover-tabs button img{width:100%;height:auto;aspect-ratio:1/1.08;object-fit:cover;border-radius:64px 64px 9px 9px;filter:saturate(.87);transition:filter .2s}
.hobby-title{display:flex;justify-content:center;align-items:center;min-height:60px;padding:9px 3px;font-size:14px;line-height:1.3;font-weight:800}
.discover-tabs button[aria-selected=true]{background:var(--paper);color:var(--accent);border-color:var(--accent);box-shadow:0 0 0 2px var(--accent),0 8px 18px #513b2112;transform:translateY(-4px)}
.discover-tabs button:hover{transform:translateY(-4px)}.discover-tabs button:hover img,.discover-tabs button[aria-selected=true] img{filter:saturate(1.08)}
.hobby-selected{position:absolute;top:10px;right:9px;width:27px;height:27px;display:grid;place-items:center;border-radius:50%;background:var(--accent);color:white;opacity:0;border:2px solid var(--paper)}
[aria-selected=true] .hobby-selected{opacity:1}.discover button:focus-visible,.discover-panel:focus-visible{outline:3px solid var(--ink);outline-offset:5px}
.discover-panel{position:relative;border-radius:10px;padding:38px;gap:5%;grid-template-columns:minmax(0,5fr) minmax(0,6fr);border:1px solid #cfc4b1;box-shadow:0 12px 35px #4b382009}
.discover-panel:before{content:'';position:absolute;inset:10px;pointer-events:none;border:1px dashed #bca78b80;border-radius:5px}
.discover-visual{margin:0;position:sticky;top:25px;min-width:0}.discover-media{aspect-ratio:1/1.12;border-radius:160px 160px 12px 12px;background:#e4d7c4;border:6px solid #e9dfce;box-shadow:0 0 0 1px #c8b89e}
.discover-media img{display:block}.craft-label{position:absolute;bottom:24px;left:20px;right:20px;text-align:center;background:#fffaf0ed;border:1px dashed #ae8064;padding:13px 10px;color:#663e2b;font-family:'Bree Serif',Georgia,serif;font-size:21px;box-shadow:0 5px 15px #30251512;transform:rotate(-2deg)}
.discover-visual figcaption{text-align:center;font-size:12px;color:#707260;margin:14px 0 0}.stitch-sampler{color:var(--accent);display:flex;gap:12px;justify-content:center;align-items:center;margin:28px 0;font-size:24px;white-space:nowrap}.stitch-sampler span{white-space:normal;text-align:center;font-family:Lora,Georgia,serif;font-style:italic;font-size:15px;line-height:1.6;color:#646957;max-width:170px}
.discover-copy h3{font-size:40px}.discover-copy .tagline{font-size:20px;margin-top:8px}.discover-copy>p{font-size:16px;line-height:1.75}.discover-meta{gap:12px;margin:22px 0}.discover-meta>div{background:#f3eee3;padding:12px 17px;border-radius:4px;flex:1;min-width:130px}.discover-meta b{font-size:14px}.discover-meta span{font-size:12px;color:#6b705c}
.for-you{position:relative;border:1px dashed #9da389;outline:5px solid var(--sage);border-radius:3px;margin:28px 5px;padding:19px}.for-you h4{font-size:12px}.for-you li{font-size:15px}.for-you li:before{content:'×';font-size:20px;top:1px}.for-you p{font-size:14px;line-height:1.6}
.steps-heading{display:flex;align-items:center;justify-content:space-between;font-family:'Bree Serif',Georgia,serif;font-size:23px;font-weight:400;margin:30px 0 12px}.steps-heading span{color:var(--accent)}
.discover-steps{margin:0}.discover-steps li{position:relative;border:0;gap:18px;padding:0 0 25px;min-height:100px}.discover-steps li>b{position:relative;z-index:1;min-width:42px;width:42px;height:42px;display:grid;place-items:center;border:1px dashed var(--accent);outline:4px solid #fffdf7;border-radius:50%;background:#f3e5d6;font-size:18px;color:#914327}.discover-steps li>div{padding-top:8px;min-width:0}.discover-steps strong{font-size:16px;margin-bottom:5px}.discover-steps span{font-size:14px;line-height:1.7;display:block}.step-thread{position:absolute;left:-7px;top:37px;width:56px;height:calc(100% - 26px);overflow:visible;fill:none;stroke:var(--accent);stroke-width:1.7;stroke-dasharray:4 3;opacity:.65}.discover-steps li:last-child .step-thread{display:none}
.discover-kit{border-top:1px dashed #cfc4b1;padding-top:18px}.discover-cta .button{width:100%;text-align:center;min-height:50px;font-size:15px}
.stitch-guide{border:1px dashed #b09b7b;position:relative}.guide-track{height:3px;opacity:.65}.guide-needle{display:block;width:100%;height:55px;color:var(--accent);margin:8px 0 -26px}.guide-steps{position:relative}.guide-steps b{outline:3px solid var(--paper);border-style:dashed}.guide-steps button{font-size:14px}
@media(min-width:1500px){.discover-tabs{gap:20px}.hobby-title{font-size:15px}}
@media(max-width:1000px){.discover-tabs{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}.discover-tabs button img{aspect-ratio:1.25}.discover-panel{padding:28px;gap:28px}.discover-copy h3{font-size:34px}.stitch-sampler{gap:6px;font-size:20px}}
@media(max-width:760px){.discover-panel{grid-template-columns:1fr;padding:25px}.discover-visual{position:relative;top:auto;max-width:460px;width:100%;margin:auto}.discover-media{aspect-ratio:1.18;border-radius:130px 130px 10px 10px}.stitch-sampler{margin:15px 0 0}.discover-tabs{gap:12px}.hobby-title{font-size:13px;min-height:58px}.discover-copy h3{font-size:32px}}
@media(max-width:480px){.discover-tabs{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 12px}.discover-tabs button{border-radius:65px 65px 12px 12px;padding:5px 5px 0}.discover-tabs button img{aspect-ratio:1.45}.hobby-title{font-size:14px;min-height:48px}.discover-panel{padding:22px;gap:23px}.discover-meta>div{padding:10px 12px}.craft-label{font-size:18px;bottom:17px;left:15px;right:15px}.for-you{padding:15px}.discover-steps li{gap:14px}.discover-cta .button{padding:14px 10px}.guide-steps button{flex-direction:column}}
@media(prefers-reduced-motion:reduce){.discover-tabs button,.discover-tabs button img{transition:none}}
