/* 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-frame,.tile-draw{position:relative}
.pencil-frame img,.tile-draw img{width:100%;height:auto;display:block;mix-blend-mode:multiply}
.pencil-reveal{position:absolute;inset:0;display:block;width:100%;height:100%;mix-blend-mode:multiply;pointer-events:none}
.pencil-pending img{visibility:hidden}
.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:1;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}

/* Compact contents and document-framed listings, scoped to the Guides index.
   The frame matches the homepage tech-pack sheet: inner border, outer offset line. */
.guide-contents{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 5%;padding:20px 0 28px;border-bottom:1px solid #3a3a3e24}
.guide-contents .small-label{display:block;margin:0 0 8px;color:#626266;font-weight:500;font-size:12px;letter-spacing:.02em;text-transform:none}
.guide-contents ul,.guide-more ol{list-style:none;margin:0;padding:0}
.guide-contents li,.guide-more li{margin:0;min-width:0}
.guide-contents a{display:flex;align-items:center;min-height:44px;padding:6px 0;color:var(--graphite);font-size:15px;line-height:1.45;text-decoration:none;text-underline-offset:4px}
.guide-contents a:hover,.guide-more a:hover{text-decoration:underline}
.guides-index .guide-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:8%;row-gap:48px}
.guides-index .guide-list>li,.guides-index .guide-list>li:last-child{border:0;min-width:0}
.guides-index .guide-row{display:flex;flex-direction:column;align-items:stretch;gap:22px;height:100%;padding:14px;border:1px solid #3a3a3e35;outline:1px solid #3a3a3e18;outline-offset:4px;background:#ffffffb8;box-shadow:0 2px 7px #3a3a3e0e}
.guides-index .guide-row:hover{border-color:#3a3a3e70}
.guides-index .guide-row .pencil-frame{width:100%;max-width:none}
.guides-index .guide-row-copy{display:flex;flex-direction:column;align-items:flex-start;flex:1}
.guides-index .guide-row-copy h3{font-size:clamp(26px,2.5vw,36px)}
.guides-index .guide-row-copy p{max-width:100%}
.guides-index .guide-row .text-link{margin-top:auto}
/* Static reading controls keep navigation available without JavaScript. */
.guide-back{display:inline-flex;align-items:center;gap:10px;min-height:44px;margin:0 0 20px;color:var(--graphite);font-size:14px;text-decoration:none;text-underline-offset:4px}
.guide-back:hover{text-decoration:underline}
.guide-pager{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 8%;margin-top:64px;padding-top:28px;border-top:1px solid #3a3a3e24}
.guide-pager a{display:flex;flex-direction:column;gap:10px;min-height:44px;padding:8px 0;color:var(--graphite);text-decoration:none}
.guide-pager .small-label,.guide-more>.small-label{color:#626266}
.guide-pager-title{font-size:clamp(20px,2.3vw,28px);line-height:1.3;letter-spacing:-.025em;text-underline-offset:5px}
.guide-pager a:hover .guide-pager-title{text-decoration:underline}
.guide-pager-previous{grid-column:1;align-items:flex-start;text-align:left}
.guide-pager-next{grid-column:2;align-items:flex-end;text-align:right}
.guide-more{margin-top:32px}
.guide-more>.small-label{display:block;margin-bottom:10px}
.guide-more ol{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:8%}
.guide-more a,.guide-more [aria-current="page"]{display:flex;align-items:center;min-height:44px;padding:7px 0;color:var(--graphite);font-size:14px;line-height:1.45;text-decoration:none;text-underline-offset:4px}
.guide-more [aria-current="page"]{font-weight:550;text-decoration:underline}
.guide-contents a:focus-visible,.guide-back:focus-visible,.guide-pager a:focus-visible,.guide-more a:focus-visible{outline:2px solid var(--graphite);outline-offset:4px}

@media(max-width:900px){
  .guide-contents{grid-template-columns:1fr;gap:18px;padding-top:12px}
  .guide-contents .small-label{margin-bottom:2px}
  .guides-index .guide-list{grid-template-columns:1fr;row-gap:20px}
  .guides-index .guide-group-head{grid-template-columns:1fr;gap:10px}
  .guides-index .guide-row{gap:18px;padding:12px}

  #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-pager{grid-template-columns:1fr;gap:22px;margin-top:48px;padding-top:22px}
  .guide-pager-previous,.guide-pager-next{grid-column:1;align-items:flex-start;text-align:left}
  .guide-more ol{grid-template-columns:1fr}

  .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-pending img{visibility:visible}
  .pencil-reveal{display:none}
}

/* Shared graphite marks from style.css keep Guides on the same pencil paper. */
.guide-list>li,.guide-contents,.guide-close,.guide-pager{position:relative}
.guide-list>li,.guide-close,.guide-pager{border-top-color:transparent}
.guide-list>li:last-child,.guide-contents,.guide-prose ul li{border-bottom-color:transparent}
.guide-list>li::after,.guide-contents::after,.guide-close::after,.guide-pager::after,.guide-prose ul li::after{
 content:"";position:absolute;left:0;right:0;top:-3.5px;height:8px;
 background:var(--pencil-rule-2) center/100% 8px no-repeat;
 opacity:.22;mix-blend-mode:multiply;pointer-events:none;
}
.guide-list>li:nth-child(2n)::after{background-image:var(--pencil-rule-3)}
.guide-list>li:last-child::after{bottom:-3.5px;height:auto;background-image:var(--pencil-rule-2),var(--pencil-rule-4);background-position:center top,center bottom;background-size:100% 8px,100% 8px}
.guide-contents::after,.guide-prose ul li::after{top:auto;bottom:-3.5px}
.guide-contents::after{background-image:var(--pencil-rule-3)}
.guide-close::after{background-image:var(--pencil-rule-1);opacity:.28}
.guide-pager::after{background-image:var(--pencil-rule-4)}
.guide-prose ul li::after{background-image:var(--pencil-rule-4);opacity:.14}
.guide-prose ul li:nth-child(2n)::after{background-image:var(--pencil-rule-1)}
.guide-prose ul li:last-child::after,.guides-index .guide-list>li::after{content:none}
/* Independently drawn inner and offset outer contours, preserved by nine-slicing.
   The raster frame alone blends; neither the text nor illustration is filtered. */
.guides-index .guide-row{position:relative;border-color:transparent;outline:none}
.guides-index .guide-row::before{
 content:"";position:absolute;inset:-1px;border:1px solid transparent;
 border-image-source:var(--pencil-document-frame);border-image-slice:96;
 border-image-width:16px;border-image-outset:6px;border-image-repeat:stretch;
 opacity:.78;mix-blend-mode:multiply;pointer-events:none;transition:opacity .2s ease;
}
.guides-index .guide-row:hover{border-color:transparent}
.guides-index .guide-row:hover::before,.guides-index .guide-row:focus-visible::before{opacity:1}
.guides-index .guide-row:focus-visible{outline:2px solid var(--graphite);outline-offset:8px}
@media(prefers-reduced-motion:reduce){.guides-index .guide-row::before{transition:none}}