/* hqlabz.com/articles: what an article page adds to hq.css (2026-09-26).

   Loaded after hq.css by every page scripts/site/render/article.mjs draws. Uses hq.css's tokens
   (ink, bone, blue, the display and body faces) and its section classes (.ph, .s, .wrap, .sh,
   .ey, .d2 to .d4, .b, .tl), so an article is the same site. Scoped to .hq. */

/* ---------------------------------------------------------------- the head */
.hq .art .ph{padding-bottom:clamp(48px,6vw,88px)}
.hq .art .ph h1.d2{font-size:clamp(38px,min(5.4vw,11vh),76px);line-height:.98;letter-spacing:-.035em}
.hq .art .crumbs a{display:inline-flex;align-items:center;gap:8px;color:inherit}
.hq .byline{display:flex;align-items:center;gap:14px;margin-top:32px;font-size:15px;color:var(--on-ink-2)}
.hq .byline img{width:48px;height:48px;border-radius:50%;object-fit:cover;background:#2A2E35}
.hq .byline>div{display:flex;flex-direction:column;gap:2px}
.hq .byline a,.hq .byline b{color:#fff;font-weight:600}
.hq .byline a:hover{text-decoration:underline;text-underline-offset:3px}
.hq .apreview{position:sticky;top:0;z-index:60;background:#FFE08A;color:#1B1500;text-align:center;font:600 14px/1.4 var(--body);padding:10px 16px}

/* ---------------------------------------------------------------- the body */
.hq .abody{display:grid;grid-template-columns:minmax(0,1fr);justify-items:center;gap:40px}
.hq .abody:has(.atoc){grid-template-columns:220px minmax(0,740px);justify-content:center;justify-items:stretch;gap:clamp(40px,5vw,88px)}
.hq .atoc{position:sticky;top:calc(var(--top) + 28px);align-self:start;font-size:14.5px}
.hq .atoc ol{margin-top:14px;display:grid;gap:10px;border-left:2px solid var(--line);padding-left:16px}
.hq .atoc a{color:var(--mute)}
.hq .atoc a:hover{color:var(--blue-ink)}
/* Words the author typed wrap wherever they must, so a long address never pushes the page sideways (Darrick, 2026-10-13). */
.hq .aprose{max-width:740px;width:100%;min-width:0;overflow-wrap:anywhere}
.hq .art .ph h1,.hq .art .ph .lede,.hq .acard,.hq .abuild a,.hq .atoc a{overflow-wrap:anywhere}
.hq .aprose>*+*{margin-top:22px}
.hq .aprose p,.hq .aprose li{font-size:clamp(17.5px,1.3vw,19.5px);line-height:1.7;color:#23272D}
.hq .aprose h2{font-family:var(--display);font-weight:700;font-size:clamp(28px,2.6vw,38px);line-height:1.08;letter-spacing:-.025em;margin-top:56px;scroll-margin-top:calc(var(--top) + 20px)}
.hq .aprose h3{font-family:var(--display);font-weight:700;font-size:clamp(21px,1.7vw,25px);line-height:1.2;letter-spacing:-.015em;margin-top:36px;scroll-margin-top:calc(var(--top) + 20px)}
.hq .aprose h2+p,.hq .aprose h3+p{margin-top:14px}
.hq .aprose a{color:var(--blue-ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.hq .aprose a:hover{text-decoration-thickness:2px}
.hq .aprose strong{font-weight:650;color:var(--ink)}
.hq .aprose ul,.hq .aprose ol{padding-left:1.35em;display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
.hq .aprose ul{list-style:disc}
.hq .aprose ol{list-style:decimal}
.hq .aprose li::marker{color:var(--blue)}
.hq .aprose blockquote{border-left:4px solid var(--blue);background:var(--bone);border-radius:0 14px 14px 0;padding:18px 22px}
.hq .aprose blockquote p{font-size:17px;color:#2B2F35}
.hq .aprose code{font:500 .88em/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;background:#EEF2F7;border-radius:6px;padding:.12em .38em;overflow-wrap:anywhere}
.hq .aprose pre{background:var(--ink);color:#E8EDF3;border-radius:14px;padding:18px 20px;max-width:100%}
.hq .aprose pre code{background:none;padding:0;color:inherit;font-size:14.5px;line-height:1.6;white-space:pre-wrap;overflow-wrap:anywhere}
.hq .aprose .tbl{border:1px solid var(--line);border-radius:14px;overflow:hidden}
.hq .aprose table{width:100%;border-collapse:collapse;table-layout:fixed;font-size:15.5px;line-height:1.5}
.hq .aprose th,.hq .aprose td{text-align:left;vertical-align:top;padding:12px 16px;border-bottom:1px solid var(--line);overflow-wrap:break-word}
.hq .aprose th{background:var(--bone);font-weight:600;color:var(--ink)}
.hq .aprose tr:last-child td{border-bottom:0}

/* ---------------------------------------------------------------- questions, sources, author */
.hq .afaq,.hq .asrc{margin-top:64px!important}
.hq .afaq h2,.hq .asrc h2{margin-top:0;margin-bottom:16px}
.hq .afaq details{border-top:1px solid var(--line);padding:18px 0}
.hq .afaq details:last-child{border-bottom:1px solid var(--line)}
.hq .afaq summary{cursor:pointer;font-weight:600;font-size:18px;list-style:none;display:flex;justify-content:space-between;gap:16px}
.hq .afaq summary::-webkit-details-marker{display:none}
.hq .afaq summary::after{content:"+";color:var(--blue);font-weight:700;font-size:22px;line-height:1}
.hq .afaq details[open] summary::after{content:"−"}
.hq .afaq details p{margin-top:12px}
.hq .asrc ol{font-size:15.5px}
.hq .asrc li{font-size:15.5px;line-height:1.55}
.hq .author{display:flex;gap:20px;align-items:flex-start;margin-top:64px!important;padding:26px;border-radius:20px;background:var(--bone)}
.hq .author picture,.hq .byline picture{flex:none;display:block}
.hq .author img{width:96px;height:96px;border-radius:50%;object-fit:cover;flex:none}
.hq .author h2{font-size:24px;margin-top:6px}
.hq .author h2 a{color:var(--ink);text-decoration:none}
.hq .author p{font-size:16px;line-height:1.6;margin-top:8px}
.hq .author .links{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:12px}
.hq .author .links a{display:inline-flex;align-items:center;gap:6px;font-weight:600;font-size:15px;text-decoration:none}
.hq .author .links svg{width:17px;height:17px}

/* ---------------------------------------------------------------- what we build, cards */
.hq .abuild{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px}
.hq .abuild a,.hq .acard{display:flex;flex-direction:column;gap:10px;height:100%;background:#fff;border:1px solid var(--line);border-radius:20px;padding:24px;transition:border-color .2s var(--ease),transform .2s var(--ease)}
.hq .abuild a:hover,.hq .acard:hover{border-color:var(--blue);transform:translateY(-2px)}
.hq .abuild .kind{font-size:12.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--mute-2)}
.hq .abuild h3{font-family:var(--display);font-size:22px;line-height:1.15;letter-spacing:-.015em}
.hq .abuild p,.hq .acard p{color:var(--mute);font-size:16px;line-height:1.55}
.hq .abuild .go,.hq .acard .go{margin-top:auto;display:inline-flex;align-items:center;gap:8px;font-weight:600;color:var(--blue-ink)}
.hq .abuild .go svg,.hq .acard .go svg{width:18px;height:18px}
.hq .s.bone .row{margin-top:28px}
.hq .alist{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:20px}
.hq .acard .d4{color:var(--ink)}
.hq .acard .meta{font-size:14px;color:var(--mute-2)}
.hq .afeeds{display:flex;flex-wrap:wrap;gap:10px 24px;margin-top:26px}
.hq .afeeds .tl{display:inline-flex;align-items:center;gap:8px}
.hq .afeeds svg{width:17px;height:17px}

@media (max-width:1000px){
  .hq .abody:has(.atoc){grid-template-columns:minmax(0,1fr)}
  .hq .atoc{position:relative;top:0;background:var(--bone);border-radius:16px;padding:18px 20px}
  .hq .atoc ol{border-left:0;padding-left:1.2em;list-style:decimal}
}
@media (max-width:560px){
  /* A table becomes stacked rows on a phone: each cell under its column's name, never a sideways scroll. */
  .hq .aprose thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .hq .aprose table,.hq .aprose tbody,.hq .aprose tr,.hq .aprose td{display:block;width:100%}
  .hq .aprose tr{padding:6px 0;border-bottom:1px solid var(--line)}
  .hq .aprose tr:last-child{border-bottom:0}
  .hq .aprose td{border-bottom:0;padding:6px 16px}
  .hq .aprose td::before{content:attr(data-label);display:block;font-size:12.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--mute-2)}
  .hq .author{flex-direction:column;padding:22px}
  .hq .author img{width:72px;height:72px}
  .hq .alist{grid-template-columns:minmax(0,1fr)}
  .hq .abuild{grid-template-columns:minmax(0,1fr)}
}
@media print{
  .hq .atoc,.hq .abuild,.hq-top,.hq-foot .cta{display:none!important}
}