/* Hubs, question lists, guides and comparisons (approved layouts, 24 Sep 2026). */

.answer { max-width: 760px; padding: clamp(18px, 3cqi, 26px); border-radius: var(--r-panel); background: var(--parchment); border: 1.5px solid var(--parchment-100); display: grid; gap: 10px; }
.answer h2 { font-size: clamp(1.5rem, 1.25rem + 1cqi, 2rem) !important; }
.answer-first { font-family: var(--serif); font-weight: 480; font-size: clamp(1.1875rem, 1.05rem + 0.6cqi, 1.4375rem); line-height: 1.45; color: var(--ink); font-variation-settings: "SOFT" 100, "WONK" 1; max-width: 46ch; }
.answer p:not(.answer-first) { font-size: 16px; line-height: 1.65; max-width: 62ch; }
.lnk { color: var(--forest); font-weight: 600; text-decoration: underline; text-decoration-color: var(--clay); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.lnk:hover { text-decoration-style: wavy; }

/* Hub */
@container site (min-width: 900px) { .pg-in.hb-in { grid-template-columns: 1.1fr 0.9fr; gap: 56px; align-items: center; } }
.hb-glance .icard { transform: rotate(0.8deg); box-shadow: var(--shadow-lift); max-width: 440px; }
.hb-glance .icard-head b { font-family: var(--serif); font-weight: 560; font-size: 19px; color: var(--forest); font-variation-settings: "SOFT" 100, "WONK" 1; }
.glance { list-style: none; }
.glance li { display: grid; grid-template-columns: 110px 1fr; gap: 12px; padding-block: 11px; font-size: 15px; }
.glance li + li { border-top: 1.5px dashed var(--stone); }
.gl-k { font-weight: 600; color: var(--clay-ink); }
.routes { list-style: none; margin-top: 24px; max-width: 980px; border-top: 1.5px dashed var(--stone); }
.route { display: grid; grid-template-columns: auto auto 1fr auto; gap: 4px 16px; align-items: center; padding-block: 18px; border-bottom: 1.5px dashed var(--stone); text-decoration: none; color: var(--ink); }
.route-n { grid-row: span 2; font-family: var(--serif); font-weight: 600; font-size: 28px; color: var(--clay); font-variation-settings: "SOFT" 100, "WONK" 1; width: 26px; }
.route .ddi-ic { grid-row: span 2; width: 44px; height: 44px; }
.route .ddi-ic svg { width: 20px; height: 20px; color: var(--forest); }
.route-t { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.route-t b { font-family: var(--serif); font-weight: 560; font-size: clamp(1.25rem, 1.1rem + 0.6cqi, 1.5rem); line-height: 1.2; color: var(--forest); font-variation-settings: "SOFT" 100, "WONK" 1; }
.route-d { grid-column: 3; font-size: 15px; color: var(--ash-600); }
.route .tl-go { grid-column: 4; grid-row: 1 / span 2; }
.route:hover b { text-decoration: underline wavy var(--clay); text-underline-offset: 5px; }
.route:hover .tl-go svg { transform: translateX(3px); }
.route.is-soon { cursor: default; }
.route.is-soon:hover b { text-decoration: none; }
.route.is-soon .route-n, .route.is-soon b { color: var(--ash-600); }
@container site (max-width: 560px) { .route { grid-template-columns: auto 1fr; } .route .ddi-ic { display: none; } .route-d, .route .tl-go { grid-column: 2; } .route .tl-go { grid-row: auto; } }
.hb-h3 { font-family: var(--serif); font-weight: 560; font-size: 22px; color: var(--forest); font-variation-settings: "SOFT" 100, "WONK" 1; margin-top: 36px; }
.tchips { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; max-width: 900px; }
.tchip { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 16px; border-radius: 999px; background: var(--cb); color: var(--cf); font-size: 15px; font-weight: 600; text-decoration: none; border: 1.5px solid transparent; transition: border-color var(--t-hover) var(--ease); }
.tchip:hover { border-color: currentColor; }

/* Question list */
.ql { max-width: 1180px; margin-inline: auto; padding: 0 var(--g) clamp(56px, 9cqi, 104px); display: grid; gap: 22px; }
.ql > * { max-width: 900px; }
.qnew { padding: clamp(16px, 3cqi, 24px); border-radius: var(--r-panel); background: var(--parchment); border: 1.5px solid var(--parchment-100); }
.qnew h2 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; font-family: var(--serif); font-weight: 560; font-size: 24px; color: var(--forest); font-variation-settings: "SOFT" 100, "WONK" 1; margin-bottom: 4px; }
.qnew h2 span { font-family: var(--sans); font-size: 14px; font-weight: 500; color: var(--ash-600); }
.ql-bar { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; padding-top: 12px; }
.ql-h { font-family: var(--serif); font-weight: 560; font-size: clamp(1.5rem, 1.25rem + 1cqi, 2rem); color: var(--forest); font-variation-settings: "SOFT" 100, "WONK" 1; }
.ql-count { font-size: 15px; color: var(--ash-600); font-variant-numeric: tabular-nums; }
.ql-print { margin-left: auto; font-size: 14px; min-height: 44px; }
.ql-print svg { width: 18px; height: 18px; }
.qf { display: grid; gap: 14px; }
.qf legend { font-size: 14px; font-weight: 600; color: var(--ink); margin-bottom: 8px; }
.qf .rchip > span { min-height: 40px; padding: 7px 13px; }
/* 44px to tap, 40px to see: the chip's input reaches 2px above and below. */
.qf .rchip { padding-block: 2px; margin-block: -2px; }
@container site (max-width: 560px) {
  .qf-row { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--g) * -1); padding: 2px var(--g) 8px; -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--g), #000 calc(100% - 28px), transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 var(--g), #000 calc(100% - 28px), transparent 100%); }
  .qf-row::-webkit-scrollbar { display: none; }
  .qf-row .rchip { flex: none; }
  .ql-print { margin-left: 0; }
}
.ql .qlist { border-top: 1.5px dashed var(--stone); }
.ql .qrow { border-bottom: 1.5px dashed var(--stone); }
.ql .qrow + .qrow { border-top: 0; }
.qrow .go { color: var(--clay-ink); }
@container site (max-width: 560px) { .ql .qrow { grid-template-columns: 1fr; } .ql .qrow .go { grid-row: auto; grid-column: 1; min-height: 40px; } }
.qrow.is-in { animation: pr-in var(--t-card) var(--ease) both; }
.ql-more { display: flex; justify-content: center; }
.qempty { max-width: 460px; justify-self: start; }
.qo { font-size: 15px; color: var(--ash-600); line-height: 1.9; }

/* Guide */
.gd-hero .pg-copy { max-width: 820px; }
.byline { display: flex; align-items: center; gap: 12px; margin-top: 6px; font-size: 15px; }
.byline > span:last-child { display: grid; }
.byline .lnk { justify-self: start; padding-block: 10px; margin-block: -10px; }
.by-meta { font-size: 14px; color: var(--ash-600); }
.av { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--parchment); border: 2px dashed var(--stone); flex: none; }
.av svg { width: 20px; height: 20px; color: var(--ash-400); }
.av-lg { width: 72px; height: 72px; }
.av:has(img) { border: 0; background: var(--parchment-100); }
.av img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
.gd { max-width: 1180px; margin-inline: auto; padding: 0 var(--g) clamp(56px, 9cqi, 104px); display: grid; gap: 24px; }
@container site (min-width: 1000px) { .gd { grid-template-columns: 220px minmax(0, 700px); gap: 64px; align-items: start; } }
.gd-toc details { border-radius: 14px; background: var(--parchment); border: 1.5px solid var(--parchment-100); padding: 4px 16px; }
.gd-toc summary { list-style: none; display: flex; justify-content: space-between; align-items: center; min-height: 48px; cursor: pointer; font-size: 14px; font-weight: 600; color: var(--clay-ink); }
.gd-toc summary::-webkit-details-marker { display: none; }
.gd-toc summary .chev { width: 18px; height: 18px; transition: transform var(--t-hover) var(--ease); }
.gd-toc details[open] summary .chev { transform: rotate(180deg); }
.gd-toc ol { list-style: none; display: grid; padding-bottom: 10px; }
.gd-toc a { display: flex; align-items: center; min-height: 40px; font-size: 15px; color: var(--forest); text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 2px; text-underline-offset: 5px; }
.gd-toc a:hover { text-decoration-color: var(--clay); text-decoration-style: wavy; }
.gd-toc a[aria-current] { font-weight: 600; text-decoration-color: var(--clay); }
@container site (min-width: 1000px) {
  .gd-toc { position: sticky; top: 100px; }
  .gd-toc details { background: none; border: 0; padding: 0; }
  .gd-toc summary { pointer-events: none; min-height: 32px; }
  .gd-toc summary .chev { display: none; }
  .gd-toc ol { border-top: 1.5px dashed var(--stone); }
  .gd-toc li { border-bottom: 1.5px dashed var(--stone); }
}
.gd-art { display: grid; gap: clamp(36px, 5cqi, 52px); min-width: 0; }
.gd-sec { display: grid; gap: 14px; scroll-margin-top: 90px; }
.gd-sec > h2 { font-family: var(--serif); font-weight: 560; font-size: clamp(1.625rem, 1.3rem + 1.3cqi, 2.125rem); line-height: 1.12; color: var(--forest); font-variation-settings: "SOFT" 100, "WONK" 1; }
.gd-sec > p { font-size: clamp(1.0625rem, 1rem + 0.25cqi, 1.1875rem); line-height: 1.7; max-width: 64ch; }
.gd-steps { margin-top: 6px; }
@container site (min-width: 760px) { .gd-steps { grid-template-columns: 1fr 1fr; } }
.worked { margin-top: 6px; padding: 18px 20px; border-radius: var(--r-card); background: var(--parchment-50); border: 1.5px solid var(--forest); box-shadow: 4px 4px 0 var(--parchment-100); display: grid; gap: 10px; }
.worked-q { font-family: var(--serif); font-weight: 520; font-size: 20px; line-height: 1.3; color: var(--forest); font-variation-settings: "SOFT" 100, "WONK" 1; }
.worked-q .k, .listen .k { display: block; font-family: var(--sans); font-size: 13px; font-weight: 600; color: var(--clay-ink); margin-bottom: 4px; }
.worked ul { list-style: none; display: grid; }
.worked li { display: grid; grid-template-columns: 76px 1fr; gap: 12px; padding-block: 9px; border-top: 1.5px dashed var(--stone); font-size: 15px; line-height: 1.5; }
.worked b { color: var(--clay-ink); font-weight: 600; }
.gd-tool { padding: 16px; border-radius: var(--r-panel); background: var(--parchment); border: 1.5px solid var(--parchment-100); max-width: 560px; }
.gd-tool .gmore { display: none; }
.listen { display: grid; gap: 12px; padding: 18px 20px; border-radius: var(--r-panel); border: 1.5px solid var(--forest); background: var(--parchment-50); box-shadow: var(--shadow-panel); max-width: 620px; }
.player { display: flex; align-items: center; gap: 14px; }
.wave { flex: 1; height: 36px; background: repeating-linear-gradient(to right, var(--sage) 0 3px, transparent 3px 7px); -webkit-mask-image: linear-gradient(to bottom, transparent 10%, #000 30%, #000 70%, transparent 90%); mask-image: linear-gradient(to bottom, transparent 10%, #000 30%, #000 70%, transparent 90%); border-radius: 4px; opacity: 0.9; }
.dur { font-size: 14px; font-weight: 600; color: var(--ash-600); font-variant-numeric: tabular-nums; }
.listen-q { font-family: var(--serif); font-weight: 520; font-size: 19px; color: var(--forest); font-variation-settings: "SOFT" 100, "WONK" 1; }
.ph-note { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--ash-600); padding: 10px 12px; border-radius: 10px; border: 1.5px dashed var(--stone); }
.ph-note svg { width: 16px; height: 16px; }
.listen .ticks { margin-top: 0; }
.mistakes { list-style: none; display: grid; border-top: 1.5px dashed var(--stone); }
.mistakes li { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; padding-block: 14px; border-bottom: 1.5px dashed var(--stone); }
.mx { grid-row: span 2; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--ink-russet-bg); margin-top: 1px; }
.mx svg { width: 15px; height: 15px; color: var(--russet); }
.mistakes b { font-size: 17px; font-weight: 600; color: var(--ink); }
.mistakes p { font-size: 15.5px; color: var(--ash-600); line-height: 1.55; }
.gd-sec .faq { margin-top: 0; }
.author { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: start; padding: 20px; border-radius: var(--r-panel); background: var(--parchment); border: 1.5px solid var(--parchment-100); }
.au-k { font-size: 13px; font-weight: 600; color: var(--clay-ink); }
.au-n { font-family: var(--serif); font-weight: 560; font-size: 22px; color: var(--forest); font-variation-settings: "SOFT" 100, "WONK" 1; margin-bottom: 6px; }
.author p:not(.au-k):not(.au-n) { font-size: 15.5px; line-height: 1.6; margin-bottom: 8px; }
.author .lnk { display: inline-block; padding-block: 12px; margin-block: -12px; }
.related h2 { font-size: 13px; font-weight: 600; color: var(--clay-ink); margin-bottom: 6px; }
.related ul { list-style: none; border-top: 1.5px dashed var(--stone); }
.related li { border-bottom: 1.5px dashed var(--stone); }
.related a { display: flex; align-items: center; gap: 12px; min-height: 52px; font-family: var(--serif); font-weight: 520; font-size: 19px; color: var(--forest); text-decoration: none; font-variation-settings: "SOFT" 100, "WONK" 1; }
.related a svg { width: 18px; height: 18px; color: var(--clay-ink); }
.related a:hover span { text-decoration: underline wavy var(--clay); text-underline-offset: 5px; }
.gd-sec .mnote { max-width: 52ch; }

/* Comparison */
.cmp3 thead th:not(:first-child), .cmp3 td { width: 22%; }
.cmp3 td { font-size: 14.5px; }
.cmp-hint { display: none; margin-top: 10px; font-size: 13px; font-weight: 500; color: var(--ash-600); }
@container site (max-width: 620px) {
  .cmp3 { overflow-x: auto; }
  .cmp3 .cmp { min-width: 560px; }
  .cmp3 tbody th, .cmp3 thead th:first-child { position: sticky; left: 0; z-index: 1; background: var(--parchment-50); box-shadow: 1px 0 0 var(--parchment-100); }
  .cmp-hint { display: flex; align-items: center; gap: 6px; }
  .cmp-hint svg { width: 15px; height: 15px; }
}
.cp-note { margin-top: 16px; font-size: 15px; color: var(--ash-600); max-width: 70ch; }
.cp-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 28px; max-width: 980px; padding: clamp(20px, 3cqi, 30px); border-radius: var(--r-panel); background: var(--parchment); border: 1.5px solid var(--parchment-100); }
.cp-cta h2 { font-size: clamp(1.5rem, 1.25rem + 1cqi, 2rem) !important; }
.cp-cta p { font-size: 16px; color: var(--ash-600); margin-top: 6px; }
.cp-fix { margin-top: 18px; font-size: 15px; color: var(--ash-600); }

/* Review page */

/* Rows past "Show 12 more" are in the page (for search engines and printing) but not shown yet. */
.qrow.is-more { display: none; }

/* ---------- Printing a question list (for clubs) ----------
   Just the heading and the questions that match the filters, all of them:
   no site chrome, filters or buttons. */
.ql-src { display: none; }
.ql-nl { margin-top: 36px; }
@container site (min-width: 760px) { .ql-nl { grid-template-columns: 1fr minmax(0, 1fr); align-items: center; gap: 28px; } }
@media print {
  .sh, .mnav, .sf, .sc, .skip, .qf, .ql-print, .ql-more, .qrow .go, .qnew, .crumbs, .qo, .ql-nl { display: none !important; }
  .ql-src { display: block; margin-top: 18px; font-size: 12px; color: #444; }
  .pg-hero::before, .pg-hero::after { display: none !important; }
  .pg-hero { margin-top: 0 !important; padding: 0 0 12px !important; }
  .qrow.is-more { display: grid !important; }
  .qrow { break-inside: avoid; }
  body { background: #fff; }
}

/* A guide written as a post: its own text inside the guide layout, in the
   same voice as the page guides. */
.gd-html { display: grid; gap: 14px; min-width: 0; }
.gd-html > p { font-size: clamp(1.0625rem, 1rem + 0.25cqi, 1.1875rem); line-height: 1.7; max-width: 64ch; }
.gd-html > ul, .gd-html > ol { display: grid; gap: 8px; padding-left: 22px; max-width: 64ch; }
.gd-html > ul li, .gd-html > ol li { font-size: clamp(1rem, 0.95rem + 0.25cqi, 1.125rem); line-height: 1.65; }
.gd-html > ol li::marker { font-weight: 600; color: var(--clay-ink); }
.gd-html h3 { font-family: var(--serif); font-weight: 560; font-size: clamp(1.25rem, 1.1rem + 0.5cqi, 1.4375rem); color: var(--forest); font-variation-settings: "SOFT" 100, "WONK" 1; margin-top: 6px; }
.gd-html a:not(.btn) { color: var(--forest); font-weight: 500; text-decoration: underline; text-decoration-color: var(--clay); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.gd-html a:not(.btn):hover { text-decoration-style: wavy; }
.gd-html > blockquote { margin: 8px 0; font-family: var(--serif); font-weight: 480; font-size: clamp(1.4rem, 1.15rem + 1cqi, 1.875rem); line-height: 1.25; color: var(--forest); font-variation-settings: "SOFT" 100, "WONK" 1; max-width: 26ch; }
.gd-html > blockquote::before { content: "\201C"; display: block; height: 0.5em; font-size: 2em; line-height: 1; color: var(--clay); }
.gd-html > blockquote p { margin: 0; font: inherit; }
.gd-html .mistakes { margin-top: 0; }
.answer + .gd-html { margin-top: 4px; }

/* From Ash: his own words, only ever what he told us. */
.from-ash { display: grid; grid-template-columns: auto 1fr; gap: 6px 18px; align-items: start; margin: 0; padding: 20px; border-radius: var(--r-panel); background: var(--parchment-50); border: 1.5px solid var(--forest); box-shadow: 5px 5px 0 var(--parchment-100); }
.from-ash blockquote { margin: 0; display: grid; gap: 10px; font-family: var(--serif); font-weight: 460; font-size: clamp(1.0625rem, 1rem + 0.3cqi, 1.25rem); line-height: 1.55; color: var(--ink); font-variation-settings: "SOFT" 100, "WONK" 1; }
.from-ash figcaption { grid-column: 2; font-size: 14px; font-weight: 600; color: var(--clay-ink); }
@container site (max-width: 520px) { .from-ash { grid-template-columns: 1fr; } .from-ash figcaption { grid-column: 1; } }

/* An interview guide's way into the interview tool. */
.gd-tool-q { font-family: var(--serif); font-weight: 520; font-size: 20px; line-height: 1.3; color: var(--forest); font-variation-settings: "SOFT" 100, "WONK" 1; margin-bottom: 14px; }
.gd-tool-q .k { display: block; font-family: var(--sans); font-size: 13px; font-weight: 600; color: var(--clay-ink); margin-bottom: 4px; }