/* Guides: article pages and the homepage feature. */
body.guide-page{overflow:auto;overscroll-behavior-y:auto}
.guide-page main{padding-top:calc(58px + env(safe-area-inset-top))}

.nav-links a[aria-current="page"]{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}

.pencil-grain-defs{position:absolute;width:0;height:0;overflow:hidden}
.pencil-frame,.tile-draw{position:relative}
.pencil-svg{display:block;width:100%;height:auto;mix-blend-mode:multiply;color:var(--graphite)}
.pencil-frame .pl,.tile-draw .pl{fill:none}
.pencil-frame.is-drawn,.tile-draw.is-drawn{pointer-events:none}

#guides .guide-feature{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(240px,.85fr);gap:8%;align-items:center;margin-top:12px;padding-top:28px;color:inherit;text-decoration:none}
#guides .guide-feature .pencil-frame{min-height:0}
#guides .guide-feature-copy{padding-top:8px}
#guides .guide-feature-copy .small-label{display:block;margin-bottom:16px;color:#626266}
#guides .guide-feature-copy h3{font-size:clamp(28px,3.2vw,44px);line-height:1.12;letter-spacing:-.045em;font-weight:450;margin:0 0 16px}
#guides .guide-feature-copy p{font-size:16px;line-height:1.65;margin:0 0 28px;max-width:440px}
#guides .guide-feature .text-link{font-size:13px;letter-spacing:.02em}
#guides .guide-feature:hover .text-link{text-decoration:underline;text-underline-offset:5px}
#guides .guide-feature:focus-visible{outline:2px solid var(--graphite);outline-offset:8px}

.guide-list{list-style:none;margin:12px 0 0;padding:0}
.guide-list>li{margin:0;border-top:1px solid #3a3a3e24}
.guide-list>li:last-child{border-bottom:1px solid #3a3a3e24}
.guide-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,1fr);gap:8%;align-items:center;padding:36px 0;color:inherit;text-decoration:none}
.guide-row .pencil-frame{max-width:520px}
.guide-row-copy .small-label{display:block;margin-bottom:14px;color:#626266}
.guide-row-copy h3{font-size:clamp(26px,2.8vw,40px);line-height:1.12;letter-spacing:-.045em;font-weight:450;margin:0 0 14px}
.guide-row-copy p{font-size:16px;line-height:1.65;margin:0 0 22px;max-width:440px}
.guide-row .text-link{font-size:13px;letter-spacing:.02em}
.guide-row:hover .text-link{text-decoration:underline;text-underline-offset:5px}
.guide-row:focus-visible{outline:2px solid var(--graphite);outline-offset:8px}

.guides-all{margin:28px 0 0;font-size:13px;letter-spacing:.02em}
.guides-all a{color:inherit;text-underline-offset:5px}
.guides-index .section-intro{margin-bottom:24px}
.guide-group{margin-top:72px}
.guide-group-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,1fr);gap:8%;align-items:baseline;margin-bottom:10px}
.guide-group-head h2{font-size:clamp(22px,2.2vw,30px);line-height:1.2;letter-spacing:-.035em;font-weight:450;margin:0}
.guide-group-head p{font-size:14px;line-height:1.6;margin:0;color:#626266;max-width:440px}

.guide-article{max-width:1120px;margin:0 auto}
.guide-head{max-width:720px;margin:48px auto 12px}
.guide-head .small-label{display:block;margin-bottom:22px;color:#626266}
.guide-head h1{font-size:clamp(36px,5vw,68px);line-height:1.06;letter-spacing:-.055em;font-weight:450;margin:0 0 22px}
.guide-dek{font-size:clamp(18px,2vw,22px);line-height:1.5;letter-spacing:-.02em;margin:0;max-width:640px}
.guide-visual{margin:48px 0 56px}
.guide-visual.wide{margin-left:auto;margin-right:auto;max-width:100%}
.guide-visual figcaption{margin:16px auto 0;max-width:640px;font-size:13px;line-height:1.55;color:#626266}
.guide-prose{max-width:640px;margin:0 auto}
.guide-prose h2{font-size:clamp(24px,2.6vw,34px);line-height:1.2;letter-spacing:-.035em;font-weight:450;margin:56px 0 18px}
.guide-prose p,.guide-prose li{font-size:17px;line-height:1.7}
.guide-prose p{margin:0 0 18px}
.guide-prose ul{margin:8px 0 24px;padding:0;list-style:none}
.guide-prose ul li{position:relative;padding:0 0 16px 0;border-bottom:1px solid #3a3a3e18}
.guide-prose ul li:last-child{border-bottom:0}
.guide-prose ul strong{font-weight:550}
.pack-contents{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px 22px;list-style:none;margin:8px 0 20px;padding:0}
.pack-contents li{margin:0;text-align:center}
.pack-contents .tile-draw{aspect-ratio:4/5;display:flex;align-items:center}
.pack-contents span{display:block;margin-top:10px;font-size:12px;letter-spacing:.04em}
.guide-close{margin-top:72px;padding-top:34px;border-top:1px solid #3a3a3e30;display:flex;flex-direction:column;align-items:flex-start;gap:22px}
.guide-close p{font-size:21px;letter-spacing:-.025em;margin:0;max-width:540px;line-height:1.4}

@media(max-width:900px){
  #guides .guide-feature{grid-template-columns:1fr;gap:28px}
  .guide-row{grid-template-columns:1fr;gap:22px;padding:30px 0}
  .pack-contents{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 16px}
}
@media(max-width:600px){
  .guide-head{margin-top:28px}
  .guide-visual{margin:36px 0 40px}
  .guide-prose h2{margin-top:40px}
  .guide-prose p,.guide-prose li{font-size:16px}
  .guide-close{margin-top:48px}
  .guide-close p{font-size:20px}
}
@media(prefers-reduced-motion:reduce){
  .pencil-frame .pl,.tile-draw .pl{transition:none!important;stroke-dashoffset:0!important}
}