/* Guides: the index and the article page. A head like the glossary's on surface, the reading on white.
   Covers are ink tiles with the generator (guides.js), graphics only. */
.gd-head { padding: clamp(120px, 13vw, 170px) 0 clamp(40px, 5vw, 72px); }
.gd-head .lbl { margin: 0 0 20px; }
.gd-head .lead { max-width: 640px; margin-top: 26px; }
.gd-body { background: var(--white); padding: clamp(48px, 6vw, 96px) 0 clamp(64px, 7vw, 112px); }

/* covers */
.gd-tile { position: relative; aspect-ratio: 16 / 10; max-width: 100%; border-radius: var(--r); background: var(--ink); overflow: hidden; }
.gd-tile canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

/* index */
.gd-card { display: block; text-decoration: none; color: inherit; min-width: 0; }
.gd-card .lbl { margin: 18px 0 8px; }
.gd-card h2, .gd-card h3 { margin: 0; font-weight: 600; letter-spacing: -.02em; line-height: 1.2; text-wrap: balance; }
.gd-card h3 { font-size: clamp(21px, 1.8vw, 26px); }
.gd-card p:not(.lbl) { margin: 10px 0 0; color: var(--muted); font-size: 15.5px; line-height: 1.55; }
.gd-card:hover h2, .gd-card:hover h3 { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: .14em; }
.gd-card:focus-visible { outline: 2px solid var(--ink); outline-offset: 6px; border-radius: var(--r); }
.gd-lead { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: clamp(24px, 4vw, 56px); align-items: center; padding-bottom: clamp(40px, 5vw, 64px); border-bottom: 1.5px solid var(--ink); }
.gd-lead .lbl { margin-top: 0; }
.gd-lead h2 { font-size: clamp(30px, 3.2vw, 46px); line-height: 1.1; letter-spacing: -.03em; }
.gd-lead p:not(.lbl) { font-size: 17px; color: #3D3D40; }
.gd-lead .link { margin-top: 24px; }
.gd-lead:hover .link::after { transform: translateX(6px); }
.gd-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 24px; margin-top: clamp(40px, 5vw, 64px); }
@media (max-width: 900px) { .gd-lead, .gd-grid { grid-template-columns: 1fr; } }

/* article */
.gd-art-head { padding: clamp(110px, 12vw, 150px) 0 clamp(36px, 4vw, 56px); }
.gd-back { display: inline-flex; gap: 8px; font: 400 14px/1 var(--mono); text-decoration: none; color: var(--muted); }
.gd-back:hover { color: var(--ink); }
.gd-art-head .lbl { margin: clamp(28px, 4vw, 48px) 0 18px; display: block; }
.gd-art-head h1 { max-width: 16em; font-size: clamp(38px, 5.2vw, 76px); }
.gd-art-head .lead { max-width: 680px; margin-top: 24px; color: #3D3D40; }
.gd-cover { margin-top: clamp(36px, 4vw, 56px); }
.gd-cover .gd-tile { aspect-ratio: 16 / 7; }
@media (max-width: 700px) { .gd-cover .gd-tile { aspect-ratio: 4 / 3; } }

.gd-art { display: grid; grid-template-columns: 220px minmax(0, 700px); gap: clamp(32px, 6vw, 96px); align-items: start; }
.gd-toc { position: sticky; top: 96px; display: grid; gap: 2px; }
.gd-toc .lbl { margin: 0 0 10px 10px; }
.gd-toc a { padding: 6px 10px 6px 12px; border-left: 2px solid transparent; text-decoration: none; color: var(--muted); font-size: 14.5px; line-height: 1.35; }
.gd-toc a:hover { color: var(--ink); }
.gd-toc a[aria-current] { border-left-color: var(--lime); color: var(--ink); }
@media (max-width: 960px) { .gd-art { grid-template-columns: minmax(0, 1fr); } .gd-toc { display: none; } }

.gd-text { min-width: 0; font-size: 18px; line-height: 1.68; color: #2B2B2E; }
.gd-text > :first-child { margin-top: 0; }
.gd-text h2 { margin: 64px 0 16px; font-size: clamp(26px, 2.4vw, 34px); font-weight: 600; letter-spacing: -.025em; line-height: 1.15; color: var(--ink); scroll-margin-top: 96px; text-wrap: balance; }
.gd-text p { margin: 0 0 18px; }
.gd-text a { color: var(--ink); text-decoration-thickness: 1.5px; text-underline-offset: .16em; text-decoration-color: var(--lime); }
.gd-text a:hover { text-decoration-color: var(--ink); }
.gd-text b { font-weight: 600; color: var(--ink); }
.gd-text i { font-style: normal; font-family: var(--mono); font-size: .86em; background: var(--surface); padding: .1em .35em; border-radius: 3px; }
.gd-text ul { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 10px; }
.gd-text ul li { position: relative; padding-left: 26px; }
.gd-text ul li::before { content: ''; position: absolute; left: 2px; top: .62em; width: 7px; height: 7px; background: var(--ink); }
.gd-steps { list-style: none; margin: 8px 0 28px; padding: 0; counter-reset: st; border-top: 1.5px solid var(--ink); }
/* the number hangs in its own gutter; the step is one run of text (a grid here split the text node into its own cell) */
.gd-steps li { counter-increment: st; position: relative; padding: 18px 0 18px 56px; border-bottom: 1px solid var(--rule); }
.gd-steps li::before { content: counter(st, decimal-leading-zero); position: absolute; left: 0; top: 18px; font: 400 12px/30px var(--mono); color: var(--muted); }
.gd-text blockquote { margin: 40px 0; padding: 0; }
.gd-text blockquote p { margin: 0; font-size: clamp(26px, 2.6vw, 36px); font-weight: 600; letter-spacing: -.025em; line-height: 1.15; color: var(--ink); }
.gd-text blockquote p::after { content: ''; display: inline-block; width: .42em; height: .42em; margin-left: .14em; background: var(--lime); box-shadow: 0 0 0 1.5px var(--ink); }
.gd-text cite { display: block; margin-top: 14px; font: 400 12px/1.3 var(--mono); font-style: normal; color: var(--muted); }
.gd-text cite a { color: var(--muted); }
/* "From our work": what we learned building tools, on an ink plate with a lime module by the label */
.gd-note { margin: 36px 0; padding: 24px 28px 26px; background: var(--ink); color: var(--white); border-radius: var(--r); display: grid; gap: 10px; }
.gd-note .lbl { display: flex; gap: 8px; align-items: center; color: #9A9A9D; }
.gd-note .lbl::before { content: ''; width: 7px; height: 7px; background: var(--lime); }
.gd-note p { margin: 0; color: #DADADC; font-size: 17px; line-height: 1.6; }
.gd-table-wrap { overflow-x: auto; margin: 8px 0 10px; }
.gd-table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 15px; line-height: 1.4; }
.gd-table th { text-align: left; font: 400 12px/1.3 var(--mono); color: var(--muted); padding: 0 12px 10px 0; border-bottom: 1.5px solid var(--ink); }
.gd-table td { padding: 12px 12px 12px 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
.gd-table .num { font-variant-numeric: tabular-nums; text-align: right; padding-right: 24px; }
.gd-table th:nth-child(4), .gd-table th:nth-child(5) { text-align: right; padding-right: 24px; }
.gd-small { font-size: 14px; color: var(--muted); }
.gd-text .gd-cta { margin-top: 28px; }
.gd-text a.link { text-decoration: none; font-size: 15px; }

.gd-end { margin-top: clamp(56px, 7vw, 96px); padding-top: 28px; border-top: 1.5px solid var(--ink); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: start; }
.gd-end .gd-card { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 20px; align-items: center; }
.gd-end .gd-card .lbl { margin: 0 0 6px; }
.gd-end .gd-card h3 { font-size: 20px; }
.gd-talk h3 { margin: 6px 0 8px; font-size: 20px; font-weight: 600; letter-spacing: -.02em; }
.gd-talk p { margin: 0; color: var(--muted); font-size: 15.5px; }
.gd-talk .gd-mail { margin-top: 14px; font: 400 14px/1 var(--mono); user-select: all; }
@media (max-width: 760px) { .gd-end { grid-template-columns: 1fr; } .gd-end .gd-card { grid-template-columns: 120px minmax(0, 1fr); } }