.reading-page { background: var(--light-surface); }
.reading-head { max-width: 88rem; margin-inline: auto; display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); padding: var(--space-6) var(--gutter); border-bottom: 1px solid var(--hairline-light); }
.reading-brand { font-family: var(--font-display); font-size: 2rem; text-decoration: none; }
.reading-head nav, .reading-foot nav { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-6); }
.reading-head nav > a:not(.btn) { font-size: .875rem; text-underline-offset: .25em; }
.article-shell { max-width: 54rem; margin-inline: auto; padding: var(--space-20) var(--gutter); }
.article-intro { margin-bottom: var(--space-12); }
.article-intro h1 { font-family: var(--font-display); font-weight: 400; font-size: clamp(2.5rem, 5vw, 4.75rem); line-height: 1.06; letter-spacing: -.025em; max-width: 20ch; }
.reading-label { font-size: .875rem; color: var(--on-light-2); margin-bottom: var(--space-4); }
.article-deck { margin-top: var(--space-6); font-size: 1.0625rem; line-height: 1.5; max-width: 54ch; color: var(--on-light-2); }
.article-meta, .small-note { font-size: .875rem; color: var(--on-light-2); }
.article-meta { margin-top: var(--space-6); }
.article-body { max-width: 66ch; font-size: 1.0625rem; line-height: 1.8; }
.article-answer { margin-top: var(--space-6); font-size: 1.25rem; line-height: 1.65; max-width: 60ch; }
.article-body h2, .related h2, .product-note h2 { font-family: var(--font-display); font-weight: 400; font-size: 2rem; line-height: 1.2; margin-top: var(--space-12); margin-bottom: var(--space-5); }
.article-body h3 { font-family: var(--font-display); font-size: 1.5rem; line-height: 1.3; margin-top: var(--space-8); margin-bottom: var(--space-3); }
.article-body ul, .article-body ol, .related ul { padding-left: 1.25rem; margin-block: var(--space-5); }
.article-body li + li, .related li + li { margin-top: var(--space-3); }
.article-body a, .related a { text-underline-offset: .2em; }
.practice { border-left: 2px solid var(--cool-on-light); background: var(--light-raised); padding: var(--space-6); margin-block: var(--space-8); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.practice h2, .practice h3 { margin-top: 0; }
.practice dl { margin-top: var(--space-4); }
.practice dt { font-weight: 600; margin-top: var(--space-4); }
.practice dd { margin: var(--space-1) 0 0; }
.product-note { margin-top: var(--space-16); padding: var(--space-8); border: 1px solid var(--hairline-light); border-radius: var(--radius-lg); }
.product-note h2 { margin-top: 0; }
.product-note > p { max-width: 58ch; }
.product-note .btn { margin-top: var(--space-6); }
.product-note .small-note { margin-top: var(--space-4); }
.related { margin-top: var(--space-12); padding-top: var(--space-4); border-top: 1px solid var(--hairline-light); }
.catalog-shell { max-width: 74rem; padding: var(--space-20) var(--gutter); margin-inline: auto; }
.catalog-list { padding: 0; margin-top: var(--space-16); list-style: none; }
.catalog-list > li { display: grid; grid-template-columns: 3rem 1fr; gap: var(--space-6); padding-block: var(--space-8); border-top: 1px solid var(--hairline-light); }
.catalog-number { font-family: var(--font-display); font-size: 1.5rem; color: var(--cool-on-light); }
.catalog-list h2 { font-family: var(--font-display); font-size: clamp(1.6rem, 3vw, 2.25rem); line-height: 1.15; font-weight: 400; max-width: 30ch; }
.catalog-list h2 a { text-decoration: none; }
.catalog-list h2 a:hover { text-decoration: underline; }
.catalog-list p { margin-top: var(--space-4); max-width: 58ch; }
.reading-foot { padding: var(--space-12) var(--gutter); border-top: 1px solid var(--hairline-light); max-width: 88rem; margin-inline: auto; }
.reading-foot > p { font-family: var(--font-display); font-size: 1.5rem; }
.reading-foot nav { margin-block: var(--space-6); }
.reading-foot small { color: var(--on-light-2); }
@media (max-width: 40rem) {
  .reading-head { align-items: flex-start; flex-direction: column; gap: var(--space-4); }
  .reading-head nav { gap: var(--space-3) var(--space-5); }
  .article-shell, .catalog-shell { padding-block: var(--space-12); }
  .catalog-list > li { grid-template-columns: 2rem 1fr; gap: var(--space-3); }
  .product-note { padding: var(--space-6); }
}
@media (prefers-color-scheme: dark) {
  .reading-page { background: var(--dark-ground); }
  .reading-head, .reading-foot, .related, .catalog-list > li, .product-note { border-color: var(--hairline-dark); }
  .reading-label, .article-deck, .article-meta, .small-note, .reading-foot small { color: var(--on-dark-2); }
  .practice { background: var(--dark-surface); border-color: var(--cool-on-dark); }
  .catalog-number { color: var(--cool-on-dark); }
}
@media print {
  .reading-head, .reading-foot, .related, .product-note, .skip-link { display: none; }
  .reading-page { background: var(--light-raised); color: var(--on-light-1); }
  .article-shell { max-width: none; padding: 0; }
  .article-intro h1 { font-size: 2rem; }
  .article-body { max-width: none; font-size: 11pt; }
  .practice { break-inside: avoid; }
}
/* Editorial images and useful answer formats. Text stays off photographs. */
.article-cover { margin: 0 0 var(--space-8); }
.article-cover img, .catalog-cover img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius-sm); }
.article-cover figcaption { margin-top: .5rem; font-size: .75rem; color: var(--on-light-2); }
.catalog-list > li.has-cover { grid-template-columns: 16rem 2rem 1fr; align-items: start; }
.article-toc { padding: var(--space-5); border: 1px solid var(--hairline-light); margin-block: var(--space-8); font-size: .875rem; }
.article-toc > p { font-weight: 600; }
.article-toc ol { padding-left: 1.25rem; margin-top: var(--space-3); }
.article-toc li + li { margin-top: .35rem; }
.article-qa { margin-top: var(--space-12); border-top: 1px solid var(--hairline-light); padding-top: var(--space-8); }
.article-qa h2, .article-qa h3 { font-family: var(--font-display); font-weight: 400; line-height: 1.2; }
.article-qa h2 { font-size: 2rem; }
.article-qa h3 { font-size: 1.5rem; margin: var(--space-6) 0 var(--space-3); }
.qa-item p { max-width: 66ch; line-height: 1.75; }
.takeaway { background: var(--light-raised); padding: var(--space-6); margin-block: var(--space-8); border-left: 2px solid var(--cool-on-light); }
.takeaway h2 { margin-top: 0; }
.steps li { padding: var(--space-4); border-bottom: 1px solid var(--hairline-light); }
.table-wrap { overflow-x: auto; margin-block: var(--space-8); }
.article-body table { border-collapse: collapse; width: 100%; font-size: .95rem; }
.article-body caption { text-align: left; font-weight: 600; margin-bottom: .75rem; }
.article-body th, .article-body td { padding: .8rem; border-bottom: 1px solid var(--hairline-light); text-align: left; vertical-align: top; }
.action-map { list-style: none; display: grid; grid-template-columns: repeat(3,1fr); gap: 1rem; padding: 0!important; }
.action-map li { padding: 1rem; border: 1px solid var(--hairline-light); margin: 0!important; }
@media(max-width:40rem) { .catalog-list > li.has-cover { grid-template-columns: 2rem 1fr; } .catalog-cover { grid-column: 1/-1; } .action-map { grid-template-columns: 1fr; } }
@media(prefers-color-scheme:dark) { .article-cover figcaption { color: var(--on-dark-2); } .article-toc,.article-qa,.article-body th,.article-body td,.steps li,.action-map li { border-color: var(--hairline-dark); } .takeaway { background: var(--dark-surface); } }
.chart { margin-block: var(--space-8); }
.chart svg { display: block; width: 100%; height: auto; max-width: 40rem; }
.chart figcaption { font-size: .875rem; line-height: 1.5; margin-bottom: var(--space-4); }

/* Overview pages: articles to read, and a clear route to an act. */
.overview { max-width: var(--page-max); margin-inline: auto; padding: var(--space-16) var(--gutter) var(--space-20); }
.overview-intro { display: grid; grid-template-columns: 1.3fr 1fr; align-items: end; gap: var(--space-16); padding-bottom: var(--space-12); }
.overview-label { font-size: var(--step-caption); color: var(--text-2); margin: 0 0 var(--space-5); }
.overview-intro h1 { font-family: var(--font-display); font-size: var(--step-display); font-weight: 400; letter-spacing: var(--tracking-tight); line-height: var(--leading-tight); max-width: 15ch; margin: 0; text-wrap: balance; }
.overview-intro > p { font-size: var(--step-lead); line-height: var(--leading-body); max-width: 42ch; padding-bottom: var(--space-2); }
.overview h2 a { text-decoration: none; }
.overview h2 a:hover { text-decoration: underline; text-underline-offset: .15em; }
.overview-read { display: flex; justify-content: space-between; align-items: center; gap: var(--space-8); min-height: var(--tap-target-min); margin-top: var(--space-6); border-bottom: 1px solid var(--hairline); text-decoration: none; font-size: var(--step-caption); }
.overview-read span { font-size: var(--step-h3); }
.overview-read:hover { border-color: var(--text-1); }
.overview-section-head { display: flex; justify-content: space-between; gap: var(--space-8); align-items: baseline; padding-block: var(--space-8); }
.overview-section-head h2 { font: 400 var(--step-h2)/var(--leading-snug) var(--font-display); letter-spacing: var(--tracking-tight); }
.overview-section-head > span { font-size: var(--step-caption); color: var(--text-2); }
.overview-next { display: flex; align-items: center; justify-content: space-between; gap: var(--space-12); margin-top: var(--space-16); padding: var(--space-10); border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--hairline); }
.overview-next h2 { font: 400 var(--step-h2)/var(--leading-snug) var(--font-display); letter-spacing: var(--tracking-tight); max-width: 25ch; margin-bottom: var(--space-5); }
.overview-next p { max-width: 58ch; color: var(--text-2); }
.overview-next > a { flex-shrink: 0; }
.overview-guide-lead { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-16); align-items: center; padding-bottom: var(--space-12); }
.overview-guide-photo { border-radius: var(--radius-md); overflow: hidden; background: var(--photo-base); }
.overview-guide-photo img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.overview-guide-start h2 { font: 400 var(--step-h1)/var(--leading-tight) var(--font-display); letter-spacing: var(--tracking-tight); margin-bottom: var(--space-6); }
.overview-guide-start > p:not(.overview-label) { color: var(--text-2); max-width: 42ch; }
.overview-jump { display: inline-flex; align-items: center; min-height: var(--tap-target-min); font-size: var(--step-caption); margin-top: var(--space-4); text-underline-offset: .3em; }
.overview-qualities { scroll-margin-top: var(--space-8); border-top: 1px solid var(--hairline); }
.overview-qualities ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--space-12); }
.overview-qualities li { border-top: 1px solid var(--hairline); }
.overview-qualities li > a { display: grid; grid-template-columns: var(--space-10) 1fr var(--space-8); align-items: baseline; gap: var(--space-5); text-decoration: none; padding-block: var(--space-8); }
.overview-number { font: 400 var(--step-h3)/1 var(--font-display); color: var(--cool); }
.overview-qualities h3 { font: 400 var(--step-h2)/var(--leading-snug) var(--font-display); letter-spacing: var(--tracking-tight); }
.overview-qualities p { font-size: var(--step-small); margin-top: var(--space-3); color: var(--text-2); }
.overview-guide-detail { display: block; font-size: var(--step-caption); margin-top: var(--space-5); color: var(--text-2); line-height: var(--leading-body); }
.overview-arrow { font-size: var(--step-h3); transition: transform var(--dur-mid) var(--ease-standard); }
.overview-qualities a:hover .overview-arrow { transform: translateY(calc(var(--space-1) * -1)); }
.overview-qualities a:hover h3 { text-decoration: underline; text-underline-offset: .15em; }
@media (max-width: 48rem) {
  .overview { padding-top: var(--space-10); }
  .overview-intro, .overview-guide-lead { grid-template-columns: 1fr; gap: var(--space-8); }
  .overview-intro { padding-bottom: var(--space-8); }
  .overview-intro > p { margin: 0; }
  .overview-intro h1 { max-width: 17ch; }
  .overview-qualities ol { grid-template-columns: 1fr; }
  .overview-section-head { align-items: flex-start; flex-direction: column; gap: var(--space-4); }
  .overview-next { align-items: flex-start; flex-direction: column; gap: var(--space-8); padding: var(--space-6); }
  .overview-qualities li > a { grid-template-columns: var(--space-6) 1fr var(--space-6); gap: var(--space-3); }
}
@media (prefers-reduced-motion: reduce) { .overview-arrow { transition: none; } .overview-qualities a:hover .overview-arrow { transform: none; } }
.overview-extra article { padding-block: var(--space-6); border-top: 1px solid var(--hairline); }
.overview-extra h3 { font: 400 var(--step-h3)/var(--leading-snug) var(--font-display); }
.overview-extra h3 a { display: inline-flex; align-items: center; min-height: var(--tap-target-min); text-underline-offset: .2em; }
.overview-extra p { max-width: var(--measure); color: var(--text-2); margin-top: var(--space-4); }

/* The blog's silver light runs behind the page and through its glass cards. */
.blog-index {
  --blog-glass-fill: color-mix(in srgb, var(--glass-fill) 24%, transparent);
  --blog-light-peak: color-mix(in srgb, var(--raised) 65%, transparent);
  position: relative;
  isolation: isolate;
  background: var(--ground);
}
.blog-light { position: fixed; }
.blog-light::before {
  background: linear-gradient(90deg,
    transparent 0%, var(--blog-light-peak) 12%, transparent 22%,
    var(--blog-light-peak) 34%, transparent 48%,
    var(--blog-light-peak) 60%, transparent 68%,
    var(--blog-light-peak) 80%, transparent 92%);
}
.blog-index > .reading-head, .blog-index > main, .blog-index > .reading-foot { position: relative; z-index: 1; }
.blog-layout { display: grid; grid-template-columns: calc(var(--space-12) * 4) minmax(0, 1fr); gap: var(--space-12); align-items: start; }
.blog-sidebar { position: sticky; top: var(--space-8); }
.blog-filters summary { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); min-height: var(--button-height); list-style: none; cursor: pointer; font-size: var(--step-body); border-bottom: 1px solid var(--hairline); }
.blog-filters summary::-webkit-details-marker { display: none; }
.blog-filters summary > svg { transition: transform var(--dur-fast) var(--ease-standard); }
.blog-filters[open] summary > svg { transform: rotate(180deg); }
.blog-filter { padding-block: var(--space-5); border-bottom: 1px solid var(--hairline); }
.blog-filter label { display: block; font-size: var(--step-caption); color: var(--text-2); margin-bottom: var(--space-1); }
.blog-select { position: relative; }
.blog-select select { appearance: none; width: 100%; min-height: var(--tap-target-min); padding-right: var(--space-6); border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--text-1); font: inherit; font-size: var(--step-small); cursor: pointer; }
.blog-select > svg { position: absolute; top: 50%; right: 0; transform: translateY(-50%); pointer-events: none; color: var(--text-2); }
.blog-select option { background: var(--surface); color: var(--text-1); }
.blog-reset { display: inline-flex; align-items: center; min-height: var(--tap-target-min); padding: 0; margin-top: var(--space-4); border: 0; background: transparent; color: var(--text-1); font: inherit; font-size: var(--step-small); text-decoration: underline; text-underline-offset: var(--space-1); cursor: pointer; }
.blog-results { min-width: 0; }
.blog-toolbar { display: flex; justify-content: space-between; align-items: center; gap: var(--space-6); }
.blog-search { position: relative; width: min(100%, 24rem); }
.blog-search > svg { position: absolute; z-index: 1; left: var(--space-4); top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--text-2); }
.blog-search input { width: 100%; min-height: var(--button-height); padding: var(--space-3) var(--space-4) var(--space-3) var(--space-12); border: 1px solid var(--glass-edge); border-top-color: var(--glass-edge-top); border-radius: var(--radius-sm); background: var(--blog-glass-fill); color: var(--text-1); font: inherit; font-size: var(--step-small); -webkit-backdrop-filter: blur(var(--glass-blur)); backdrop-filter: blur(var(--glass-blur)); }
.blog-search input::placeholder { color: var(--text-2); }
.blog-view-switch { display: flex; flex-shrink: 0; gap: var(--space-1); padding: var(--space-1); border: 1px solid var(--glass-edge); border-radius: var(--radius-sm); background: var(--blog-glass-fill); -webkit-backdrop-filter: blur(var(--glass-blur)); backdrop-filter: blur(var(--glass-blur)); }
.blog-view-switch button { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: var(--tap-target-min); padding-inline: var(--space-4); border: 0; border-radius: calc(var(--radius-sm) - var(--space-1)); background: transparent; color: var(--text-2); font: inherit; font-size: var(--step-small); cursor: pointer; }
.blog-view-switch button[aria-pressed="true"] { background: var(--cta-fill); color: var(--cta-label); font-weight: 600; box-shadow: var(--elev-row); }
.blog-layout svg { width: var(--icon-md); height: var(--icon-md); flex-shrink: 0; stroke-width: var(--icon-md-stroke); stroke-linecap: round; stroke-linejoin: round; }
.blog-status { font-size: var(--step-caption); color: var(--text-2); margin-block: var(--space-5) var(--space-6); }
.blog-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); list-style: none; margin: 0; padding: 0; }
.blog-cards > li, .blog-cards article { display: flex; min-width: 0; }
.blog-cards article { width: 100%; }
[data-blog-browser] [hidden] { display: none !important; }
.blog-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.blog-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  border: 1px solid var(--glass-edge);
  border-top-color: var(--glass-edge-top);
  border-radius: var(--radius-md);
  overflow: hidden;
  color: var(--text-1);
  text-decoration: none;
  box-shadow: var(--elev-row);
  transition: transform var(--dur-mid) var(--ease-standard), box-shadow var(--dur-mid) var(--ease-standard), border-color var(--dur-mid) var(--ease-standard);
}
.blog-card-image { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; background: var(--photo-base); }
.blog-card-body { position: relative; display: flex; flex-direction: column; flex: 1; gap: var(--space-4); padding: var(--space-6); background: var(--surface); border-top: 1px solid var(--glass-edge-top); border-radius: 0 0 var(--radius-md) var(--radius-md); box-shadow: inset 1px 0 0 color-mix(in srgb, var(--glass-edge-top) 65%, transparent), inset -1px -1px 0 color-mix(in srgb, var(--glass-edge-top) 45%, transparent); }
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .blog-card-body { background: linear-gradient(135deg, color-mix(in srgb, var(--glass-edge-top) 38%, transparent), transparent 35%, color-mix(in srgb, var(--glass-edge-top) 18%, transparent)), var(--blog-glass-fill); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(160%); backdrop-filter: blur(var(--glass-blur)) saturate(160%); }
}
.blog-card-body::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: inset 0 1px var(--space-3) color-mix(in srgb, var(--glass-edge-top) 25%, transparent), inset 0 -1px var(--space-2) color-mix(in srgb, var(--glass-edge) 20%, transparent); }
.blog-card-date, .blog-card-label { font-size: var(--step-caption); color: var(--text-2); }
.blog-card h2 { font: 400 var(--step-h3)/var(--leading-snug) var(--font-display); letter-spacing: var(--tracking-tight); text-wrap: balance; margin: 0; }
.blog-card-description { font-size: var(--step-small); line-height: var(--leading-body); color: var(--text-2); margin: 0; }
.blog-card-label { margin-top: auto; padding-top: var(--space-6); }
.blog-card:focus-visible { outline: 2px solid var(--cool); outline-offset: var(--space-1); }
.blog-cards[data-view="list"] { grid-template-columns: minmax(0, 1fr); }
.blog-cards[data-view="list"] .blog-card { flex-direction: row; }
.blog-cards[data-view="list"] .blog-card-image { width: 32%; flex-shrink: 0; aspect-ratio: auto; }
.blog-cards[data-view="list"] .blog-card-body { min-width: 0; border-top: 0; border-left: 1px solid var(--glass-edge-top); border-radius: 0 var(--radius-md) var(--radius-md) 0; }
.blog-cards[data-view="list"] .blog-card-label { padding-top: var(--space-2); }
.blog-empty { padding: var(--space-12) var(--space-8); border-radius: var(--radius-md); background: var(--blog-glass-fill); -webkit-backdrop-filter: blur(var(--glass-blur)); backdrop-filter: blur(var(--glass-blur)); }
.blog-empty h2 { font-size: var(--step-h3); margin-bottom: var(--space-3); }
.blog-empty p { font-size: var(--step-small); color: var(--text-2); }
@media (hover: hover) and (pointer: fine) {
  .blog-card:hover { transform: translateY(calc(var(--space-1) * -.5)); box-shadow: var(--elev-card); border-color: var(--glass-edge-top); }
}
@media (max-width: 72rem) { .blog-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 48rem) {
  .blog-layout { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
  .blog-sidebar { position: static; }
  .blog-filter-fields { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--space-6); }
  .blog-reset { grid-column: 1 / -1; }
}
@media (max-width: 40rem) {
  .blog-toolbar { flex-wrap: wrap; gap: var(--space-4); }
  .blog-search { width: 100%; }
  .blog-view-switch { margin-left: auto; }
  .blog-cards { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
  .blog-cards[data-view="list"] .blog-card-image { width: 30%; }
  .blog-cards[data-view="list"] .blog-card-body { padding: var(--space-5); gap: var(--space-3); }
  .blog-cards[data-view="list"] .blog-card-description { display: none; }
}
@media (prefers-color-scheme: dark) {
  .blog-index { --blog-glass-fill: var(--glass-fill); --blog-light-peak: rgba(var(--light-silver), var(--light-alpha)); }
}
@media (prefers-reduced-motion: reduce) {
  .blog-card { transition: none; }
  .blog-card:hover { transform: none; }
  .blog-filters summary > svg { transition: none; }
}
@media print {
  .blog-light { display: none; }
  .blog-sidebar, .blog-toolbar { display: none; }
  .blog-layout { display: block; }
  .blog-card { break-inside: avoid; box-shadow: none; border-color: var(--hairline-light); }
  .blog-card-body { background: var(--light-raised); -webkit-backdrop-filter: none; backdrop-filter: none; }
}