/* Long-form reading: guide pages, the privacy page, and the guides index list. Loads after site.css. */

.guide{padding-top:clamp(44px,7vh,88px);padding-bottom:clamp(140px,20vh,220px)}
.guide-head{max-width:calc(var(--wrap));}
.guide-head h1{max-width:30ch;font-size:clamp(38px,4.6vw,64px);line-height:1.06}
.guide-back{margin:0 0 18px;font-size:15.5px}
.guide-back a{color:var(--pine);font-weight:600;text-decoration:none}
.guide-back a::before{content:"";display:inline-block;width:.5em;height:.5em;margin-right:.45em;border-left:2px solid currentColor;border-bottom:2px solid currentColor;border-radius:1px;transform:translateY(-.08em) rotate(45deg)}
.guide-back a:hover{color:var(--pine-deep)}
.guide-meta{margin:18px 0 0;font-size:15.5px;color:var(--quiet)}

.guide-grid{display:grid;grid-template-columns:minmax(0,230px) minmax(0,70ch);gap:clamp(40px,6vw,96px);margin-top:clamp(40px,6vh,64px);align-items:start}
.doc .guide-grid{grid-template-columns:minmax(0,70ch)}

/* contents: the article's own h2s, sticky beside it on wide screens */
.toc{position:sticky;top:104px;max-height:calc(100vh - 128px);overflow:auto;padding:2px 0}
.toc ol{margin:0;padding:0;list-style:none;display:grid;gap:2px}
.toc a{display:block;padding:7px 10px;margin-left:-10px;border-radius:7px;font-size:15px;line-height:1.35;color:var(--muted);text-decoration:none;transition:color .15s ease,background-color .15s ease}
.toc a:hover{color:var(--ink);background:rgba(35,80,63,.07)}
.toc a[aria-current="true"]{color:var(--ink);font-weight:650}

/* the reading column */
.prose{font-size:18px;line-height:1.68;color:#24332b;min-width:0}
.prose > :first-child{margin-top:0}
.prose p,.prose ul,.prose ol,.prose table{margin:0 0 20px}
.prose h2{margin:64px 0 16px;font:500 clamp(28px,2.8vw,38px)/1.12 var(--serif);letter-spacing:-.012em;color:var(--ink);scroll-margin-top:100px;text-wrap:balance}
.prose h3{margin:38px 0 10px;font:500 clamp(22px,2vw,26px)/1.2 var(--serif);color:var(--ink);text-wrap:balance}
.prose h2 + h3{margin-top:20px}
.prose strong{font-weight:650;color:var(--ink)}
.prose a{color:var(--pine-deep);text-underline-offset:3px;text-decoration-color:rgba(35,80,63,.45);transition:text-decoration-color .15s ease}
.prose a:hover{text-decoration-color:currentColor}
.prose ul,.prose ol{padding-left:1.3em}
.prose li{margin:0 0 8px;padding-left:.2em}
.prose ul li::marker{color:var(--pine)}
.prose ol li::marker{color:var(--pine);font-weight:600;font-variant-numeric:tabular-nums}

/* a note: a tonal sheet, no bar on its edge */
.prose .note{padding:18px 22px;border-radius:12px;background:var(--paper);font-size:16px;line-height:1.55;color:var(--muted);box-shadow:0 1px 0 rgba(255,255,255,.7) inset,0 0 0 1px rgba(35,80,63,.08)}
.prose .note strong{color:var(--ink)}

/* tables: real data, tabular numbers */
.prose table{width:100%;border-collapse:collapse;font-size:16px;line-height:1.4;font-variant-numeric:tabular-nums lining-nums}
.prose th{padding:0 14px 10px 0;text-align:left;font-weight:600;color:var(--muted);font-size:14.5px}
.prose td{padding:11px 14px 11px 0;border-top:1px solid var(--rule);vertical-align:top}
.table-wrap{overflow-x:auto;margin:0 0 20px}
.table-wrap table{margin:0}

/* checklists: tick them as you go (saved in this browser only), print them blank */
.prose ul.checklist{padding:0;list-style:none}
.prose .checklist li{position:relative;margin:0;padding:9px 0 9px 38px;border-radius:8px}
.prose .checklist li::before{
  content:"";position:absolute;left:4px;top:calc(9px + .84em - 11px);width:20px;height:20px;box-sizing:border-box;
  border:1.6px solid rgba(35,80,63,.55);border-radius:6px;background:var(--field);transition:background-color .15s ease,border-color .15s ease;
}
.prose .checklist li::after{
  content:"";position:absolute;left:4px;top:calc(9px + .84em - 11px);width:20px;height:20px;opacity:0;transform:scale(.6);
  background:#fff;transition:opacity .15s ease,transform .2s cubic-bezier(.3,.7,.2,1.3);
  -webkit-mask:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.2 10.4 8.4 13.4 14.8 6.6' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.2 10.4 8.4 13.4 14.8 6.6' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
}
.js .prose .checklist li[role="checkbox"]{cursor:pointer;transition:color .15s ease}
.js .prose .checklist li[role="checkbox"]:hover::before{border-color:var(--pine)}
.prose .checklist li[aria-checked="true"]{color:var(--quiet)}
.prose .checklist li[aria-checked="true"]::before{background:var(--pine);border-color:var(--pine)}
.prose .checklist li[aria-checked="true"]::after{opacity:1;transform:none}
.prose .checklist li:focus-visible{outline-offset:2px}

.guide-more{margin-top:clamp(80px,11vh,120px)}
.guide-more ul{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px clamp(24px,4vw,56px);max-width:1060px}
.guide-more a{display:flex;align-items:baseline;gap:12px;padding:6px 0;font:500 clamp(22px,2vw,27px)/1.25 var(--serif);color:var(--ink);text-decoration:none;transition:color .15s ease}
.guide-more a svg{flex:none;width:13px;height:13px;color:var(--pine);transition:transform .2s cubic-bezier(.3,.7,.2,1)}
.guide-more a:hover{color:var(--pine)}
.guide-more a:hover svg{transform:translate(2px,-2px)}

/* ---------- /guides/ index ---------- */
.g-list{margin:clamp(44px,7vh,72px) 0 0;padding:0;list-style:none;display:grid;gap:clamp(18px,3vh,30px);max-width:1060px}
.g-list a{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:6px clamp(32px,6vw,96px);align-items:baseline;padding:22px 0;color:inherit;text-decoration:none}
.g-list h2{margin:0;grid-row:span 2;font:500 clamp(27px,2.8vw,38px)/1.14 var(--serif);letter-spacing:-.01em;transition:color .15s ease;text-wrap:balance}
.g-list p{margin:0;color:var(--muted);max-width:44ch}
.g-min{font-size:15px;color:var(--quiet)}
.g-list a:hover h2{color:var(--pine)}

@media (max-width:1020px){
  .guide-grid{grid-template-columns:minmax(0,1fr)}
  .toc{position:static;max-height:none;overflow:visible}
  .toc ol{display:flex;flex-wrap:wrap;gap:4px 6px}
  .toc a{margin:0;padding:6px 10px;background:rgba(35,80,63,.06)}
}
@media (max-width:860px){
  .g-list a{grid-template-columns:minmax(0,1fr)}
  .g-list h2{grid-row:auto}
  .guide-more ul{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:700px){
  .guide{padding-top:32px}
  .guide-head h1{font-size:clamp(28px,7.6vw,34px)}
  .prose{font-size:17px}
  .prose table{font-size:14.5px}
  .prose th,.prose td{padding-right:10px}
  .prose h2{margin-top:52px}
  .toc{display:none}
}
@media print{
  .nav,.floor,.toc,.guide-more,.guide-back{display:none!important}
  body{background:#fff}
  .prose{color:#000;font-size:12pt}
  .prose .checklist li::before{background:#fff!important;border-color:#000!important}
  .prose .checklist li::after{display:none}
  .prose .checklist li{color:#000!important}
}