/* guide.css · what a guide needs beyond the article itself: a way to keep it,
   a way to pass it on, who wrote it, what it rests on, and a print layout that
   makes "save as PDF" produce a document rather than a screenshot of a website.
   Light page (#FAFAF8), the site's system font stack, ink #17171A, square corners. */

.gshare{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.gshare button{font:500 12.5px/1 -apple-system,BlinkMacSystemFont,'SF Pro Text','SF Pro','Helvetica Neue',Helvetica,Arial,sans-serif;letter-spacing:.01em;color:#17171A;background:transparent;
  border:1px solid rgba(23,23,26,.22);padding:9px 12px;cursor:pointer;border-radius:0}
.gshare button:hover{border-color:#17171A}
.gshare button[data-done]{border-color:#17171A;background:#17171A;color:#FAFAF8}
.gshare-end{margin-top:26px}
.gshare-more{display:flex;flex-wrap:wrap;gap:8px;width:100%;margin-top:2px}
.gshare button[data-gshare="more"]{color:#5C5C64}

/* section links · at the end of every heading, quiet until wanted */
.wrap h2,.wrap h3{position:relative}
.ganchor{margin-left:8px;font:400 .8em -apple-system,BlinkMacSystemFont,'SF Pro Text','SF Pro','Helvetica Neue',Helvetica,Arial,sans-serif;color:#5C5C64;text-decoration:none;opacity:0;transition:opacity .12s}
.wrap h2:hover .ganchor,.wrap h3:hover .ganchor,.ganchor:focus{opacity:1}
.ganchor[data-done]{opacity:1;color:#17171A}
@media (hover:none){.ganchor{opacity:.45}}

.gprint{display:none}

.gsources{margin:14px 0 0;padding:0 0 0 20px;font:400 14px/1.7 -apple-system,BlinkMacSystemFont,'SF Pro Text','SF Pro','Helvetica Neue',Helvetica,Arial,sans-serif;color:#17171A}
.gsources li{margin:6px 0;padding-left:4px}
.gsources a{color:#17171A}
.gsources span{color:#5C5C64;font-size:12.5px;margin-left:6px}

.gauthor{margin-top:40px;padding:20px 22px;border:1px solid rgba(23,23,26,.12);background:#fff}
.gauthor-k{font:600 11.5px -apple-system,BlinkMacSystemFont,'SF Pro Text','SF Pro','Helvetica Neue',Helvetica,Arial,sans-serif;letter-spacing:.1em;color:#7E6114}
.gauthor-n{margin-top:8px;font:600 16px/1.3 -apple-system,BlinkMacSystemFont,'SF Pro Text','SF Pro','Helvetica Neue',Helvetica,Arial,sans-serif}
.gauthor-n a{color:#17171A;text-decoration:none}
.gauthor-n a:hover{text-decoration:underline}
.gauthor p{margin:8px 0 0;font:400 14px/1.65 -apple-system,BlinkMacSystemFont,'SF Pro Text','SF Pro','Helvetica Neue',Helvetica,Arial,sans-serif;color:#3A3A40}
.gauthor p a{color:#17171A}

/* ---- print · the reference copy ------------------------------------------
   Everything that is about the website disappears; everything that is about
   the guide stays, with the address and dates on the first page so a PDF found
   a year later still says where it came from and how old it is. */
@media print{
  .kh,.kh-o,.kepla-progress,.blog-side,.ctabox,.related,.gkeep,.kf,.gshare,.atoc,.kskip,.ganchor{display:none!important}
  .gprint{display:block;margin:0 0 18px;padding:0 0 10px;border-bottom:1px solid #999;font:400 11px/1.5 Georgia,serif;color:#333}
  html,body{background:#fff!important;color:#000!important}
  .main,.wrap{max-width:none!important;padding:0!important;margin:0!important}
  h1{font-size:26pt;margin-top:0}
  a{color:#000!important;text-decoration:underline}
  .gsources a[href^="http"]:after,p a[href^="http"]:after,li a[href^="http"]:after{content:" (" attr(href) ")";font-size:.82em;color:#444}
  .gauthor{border:1px solid #999;background:#fff;break-inside:avoid}
  h2,h3{break-after:avoid}
  table,figure,.tablewrap,.faq,.gauthor{break-inside:avoid}
  .ahero img{max-height:70mm;width:auto}
}

/* ---- the reference look ----------------------------------------------------
   Loaded after each guide's own styles, so these win on equal specificity and
   the whole pass reverts by deleting this block. Light page kept. What changes
   is what read as "blog": rounded corners the product no longer uses, a strip
   crop that cut tall photographs, a magazine drop cap, links with no
   underline, a glowing call to action. Reference material is plainer. */

/* square, like the product · chrome (nav, sidebar) is left alone on purpose */
.ahero,.atoc,.tablewrap,.related a,.ctabox,.card,.cta,.badge{border-radius:0}
.cta{box-shadow:none}

/* the photograph as shot · 3:2 is the frame photographers work in, and the
   category tag goes: the breadcrumb two lines above already says it */
.ahero{aspect-ratio:3/2}
.ahero figcaption{display:none}

/* no drop cap */
.lede::first-letter{font:inherit;float:none;margin:0;color:inherit}

/* links in running text are underlined, a little below the baseline, in a
   quieter ink than the text · navigation, cards and buttons stay clean */
/* :where() keeps this at (0,1,1) so the plain resets below can beat it */
.wrap :where(p,li,td,dd,blockquote) a:where(:not(.cta)){
  text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;
  text-decoration-color:rgba(23,23,26,.38)}
.wrap :where(p,li,td) a:where(:not(.cta)):hover{text-decoration-color:#17171A}
.atoc a,.related a,.crumbs a,.byline a,.gauthor-n a,.gshare a,.blog-side a{text-decoration:none}

/* figures line up in columns */
table,.tablewrap{font-variant-numeric:tabular-nums}

/* the founding note at the end · a bordered block, not a glow */
.ctabox{background:#fff;border:1px solid rgba(23,23,26,.14)}