/* inner pages: archives, singles, search, 404 */
.page-head { padding-top: calc(76px + var(--space-3xl)); }
.crumb { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-xs); font-size: var(--text-sm); line-height: 1.6; color: var(--color-muted); margin: 0 0 var(--space-md); }
.crumb a { color: var(--color-ink-2); text-decoration: none; overflow-wrap: anywhere; }
.crumb a:hover { color: var(--color-accent); }
.crumb a[aria-current="page"] { color: var(--color-ink); font-weight: 600; }
.crumb > span[aria-hidden="true"] { color: var(--color-muted); }
.page-head h1 { max-width: 16em; }
.page-head .lead { max-width: 40em; }
.rows { margin-top: var(--space-2xl); border-top: var(--rule-hair) solid var(--color-rule); }
.row {
  display: grid; grid-template-columns: 130px minmax(0, 1fr) 110px;
  gap: var(--space-lg); align-items: baseline;
  padding: var(--space-lg) 0; border-bottom: var(--rule-hair) solid var(--color-rule);
  text-decoration: none; transition: background var(--dur-short) var(--ease-out);
}
.row:hover { background: var(--color-paper-2); }
.row__k { font-size: var(--text-sm); color: var(--color-muted); }
.row__t { display: block; font-size: var(--text-lg); color: var(--color-ink); }
.row__e { display: block; margin-top: 6px; font-size: var(--text-sm); color: var(--color-muted); line-height: 1.6; }
.row__d { justify-self: end; font-size: var(--text-sm); color: var(--color-muted); }
.empty { margin-top: var(--space-2xl); padding: var(--space-2xl); background: color-mix(in oklab, var(--color-paper-2) 45%, transparent); color: var(--color-muted); }
.entry { margin-top: var(--space-2xl); max-width: 42em; }
.entry > * + * { margin-top: 1.1em; }
.entry h2, .entry h3 { margin-top: 2em; font-weight: 400; }
.entry p, .entry li { color: var(--color-ink-2); }
.entry a { color: var(--color-accent); }
.entry img { max-width: 100%; height: auto; border-radius: var(--radius-card); }
.entry blockquote { margin: 2em 0; padding-left: var(--space-lg); border-left: 2px solid var(--color-accent); color: var(--color-ink); }
.entry pre { overflow-x: auto; padding: var(--space-lg); background: var(--color-paper-2); border-radius: var(--radius-card); font-size: var(--text-sm); }
.entry code { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: 0.92em; }
.post-like { display: flex; align-items: center; gap: var(--space-md); margin-top: var(--space-2xl); }
.post-like__button { display: inline-flex; align-items: center; gap: var(--space-sm); min-height: 44px; padding: 0 var(--space-md); border: var(--rule-hair) solid var(--color-rule-2); border-radius: var(--radius-pill); background: var(--color-paper-2); color: var(--color-ink); cursor: pointer; }
.post-like__button:hover, .post-like__button.is-liked { border-color: var(--color-accent); color: var(--color-accent); }
.post-like__button:disabled { cursor: wait; opacity: .7; }
.post-like__icon { font-size: 1.35em; line-height: 1; }
.post-like__count { padding-left: var(--space-xs); color: var(--color-ink-2); }
.post-like__message { color: var(--color-muted); font-size: var(--text-sm); }
.meta { display: flex; gap: var(--space-lg); flex-wrap: wrap; margin-top: var(--space-lg); font-size: var(--text-sm); color: var(--color-muted); }
.pager { display: flex; justify-content: space-between; gap: var(--space-lg); margin-top: var(--space-3xl); padding-top: var(--space-lg); border-top: var(--rule-hair) solid var(--color-rule); }
.pager a { color: var(--color-ink-2); text-decoration: none; }
.pager a:hover { color: var(--color-ink); }
.searchform { display: flex; gap: var(--space-sm); margin-top: var(--space-xl); max-width: 520px; }
.searchform input[type="search"] {
  flex: 1; height: 48px; padding: 0 var(--space-md); color: var(--color-ink);
  background: var(--color-paper-2); border: 0; border-radius: var(--radius-card);
  box-shadow: inset 0 0 0 var(--rule-hair) var(--color-rule-2);
}
.searchform input[type="search"]:focus { outline: none; box-shadow: inset 0 0 0 var(--rule-hair) var(--color-accent); }
@media (max-width: 40rem) {
  .row { grid-template-columns: minmax(0, 1fr) 84px; }
  .row__k { grid-column: 1 / -1; }
}
/* AI library: toolbar, chips, dense rows */
.filters { display: flex; gap: var(--space-sm); margin-top: var(--space-2xl); max-width: 620px; }
.filters__q { flex: 1; }
.filters input[type="search"] {
  width: 100%; height: 44px; padding: 0 var(--space-md); color: var(--color-ink);
  background: var(--color-paper-2); border: 0; border-radius: var(--radius-card);
  box-shadow: inset 0 0 0 var(--rule-hair) var(--color-rule-2);
}
.filters input[type="search"]:focus { outline: none; box-shadow: inset 0 0 0 var(--rule-hair) var(--color-accent); }
.btn--sm { min-height: 44px; padding: 0 var(--space-lg); font-size: var(--text-sm); }
.filterbar { display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--space-md); margin-top: var(--space-lg); }
.chips { display: flex; flex-wrap: wrap; gap: var(--space-2xs); }
.chip {
  display: inline-flex; align-items: center; height: 34px; padding: 0 var(--space-md);
  border-radius: var(--radius-pill); color: var(--color-ink-2); text-decoration: none;
  font-size: var(--text-sm); box-shadow: inset 0 0 0 var(--rule-hair) var(--color-rule-2);
  transition: background var(--dur-short), color var(--dur-short);
}
.chip:hover { color: var(--color-ink); box-shadow: inset 0 0 0 var(--rule-hair) var(--color-muted); }
.chip.is-on { background: var(--color-ink); color: var(--color-paper); box-shadow: none; }
.result-count { margin-top: var(--space-lg); font-size: var(--text-sm); color: var(--color-muted); }
.rows--library { margin-top: var(--space-md); }
.row--lib { grid-template-columns: 110px minmax(0, 1fr) 110px; align-items: start; }
.row__stack { display: block; margin-top: 4px; font-size: var(--text-xs); color: var(--color-muted); }

/* project detail */
.meta-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-md); margin: var(--space-xl) 0 0; border-top: var(--rule-hair) solid var(--color-rule); }
.meta-grid div { padding-top: var(--space-sm); }
.meta-grid dt { font-size: var(--text-xs); color: var(--color-muted); }
.meta-grid dd { margin: var(--space-2xs) 0 0; font-size: var(--text-md); color: var(--color-ink-2); }
.brief { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2xl); margin-top: var(--space-3xl); }
.brief h2 { font-size: var(--text-title); font-weight: 400; margin-bottom: var(--space-xs); }
.brief p { color: var(--color-ink-2); font-size: var(--text-md); line-height: 1.75; }
.entry h2 { font-size: var(--text-title); }
.devlog { white-space: pre-line; }
@media (max-width: 60rem) {
  .brief, .meta-grid { grid-template-columns: minmax(0, 1fr); }
  .row--lib { grid-template-columns: minmax(0, 1fr) 84px; }
  .row--lib .row__k { grid-column: 1 / -1; }
}
/* AI library: scene-catalogue layout */
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.lib { padding-top: calc(76px + var(--space-3xl)); }
.lib-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-xl); align-items: end; }
.lib-kicker { font-size: var(--text-sm); color: var(--color-muted); margin-bottom: var(--space-sm); }
.lib-head h1 { font-size: clamp(2.5rem, 4vw, 4rem); line-height: 1.04; }
.lib-head .lead { margin: 0; max-width: 26em; text-align: right; }
.lib-bar { position: sticky; top: 76px; z-index: calc(var(--z-sticky-nav) - 1); display: grid; grid-template-columns: minmax(230px, 1fr) auto auto; align-items: center; gap: var(--space-md); min-height: 76px; margin: var(--space-xl) calc(-1 * var(--gutter)) 0; padding: var(--space-sm) var(--gutter); border-top: var(--rule-hair) solid var(--color-rule); border-bottom: var(--rule-hair) solid var(--color-rule); background: color-mix(in oklab, var(--color-paper) 92%, transparent); backdrop-filter: saturate(140%) blur(18px); }
.lib-search { min-width: 0; display: flex; align-items: center; gap: var(--space-sm); height: 48px; padding: 0 var(--space-lg); border-radius: var(--radius-pill); box-shadow: inset 0 0 0 var(--rule-hair) var(--color-rule-2); color: var(--color-muted); transition: box-shadow var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out); }
.lib-search:focus-within { color: var(--color-accent); box-shadow: inset 0 0 0 2px var(--color-accent); }
.lib-search input { min-width: 0; flex: 1; height: 44px; padding: 0; background: transparent; border: 0; color: var(--color-ink); font-size: var(--text-sm); }
.lib-search input::placeholder { color: var(--color-muted); }
.lib-search input:focus { outline: none; }
.seg { display: flex; padding: 4px; gap: 3px; border-radius: var(--radius-pill); background: var(--color-paper-2); }
.seg__i { display: inline-flex; align-items: center; height: 36px; padding: 0 var(--space-sm); border-radius: var(--radius-pill); color: var(--color-ink-2); text-decoration: none; white-space: nowrap; font-size: var(--text-xs); transition: background var(--dur-short), color var(--dur-short); }
.seg__i:hover { background: var(--color-paper-3); color: var(--color-ink); }
.seg__i.is-on { background: var(--color-accent); color: var(--color-accent-ink); }
.lib-sort select { height: 44px; padding: 0 var(--space-lg) 0 var(--space-sm); border-radius: 12px; background: var(--color-paper-2); color: var(--color-ink-2); border: var(--rule-hair) solid var(--color-rule-2); font-size: var(--text-xs); }
.lib-sort select:focus { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.lib-sort-menu { position: relative; color: var(--color-ink-2); font-size: var(--text-xs); }
.lib-sort-menu summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); min-width: 112px; height: 44px; padding: 0 var(--space-sm); border: var(--rule-hair) solid var(--color-rule-2); border-radius: 12px; background: var(--color-paper-2); cursor: pointer; list-style: none; white-space: nowrap; }
.lib-sort-menu summary::-webkit-details-marker { display: none; }
.lib-sort-menu summary span { font-size: 1.25rem; line-height: 1; transition: transform var(--dur-short) var(--ease-out); }
.lib-sort-menu[open] summary span { transform: rotate(180deg); }
.lib-sort-menu summary:hover, .lib-sort-menu[open] summary { border-color: var(--color-accent); }
.lib-sort-options { position: absolute; top: calc(100% + 6px); right: 0; z-index: 1; min-width: 100%; padding: 5px; border: var(--rule-hair) solid var(--color-rule-2); border-radius: 12px; background: var(--color-paper-2); box-shadow: 0 16px 36px rgba(0, 0, 0, .28); }
.lib-sort-options button { display: block; width: 100%; padding: 9px 10px; border: 0; border-radius: 8px; background: transparent; color: var(--color-ink-2); cursor: pointer; text-align: left; white-space: nowrap; font-size: inherit; }
.lib-sort-options button:hover, .lib-sort-options button:focus-visible { background: var(--color-paper-3); color: var(--color-ink); }
.lib-sort-options button[aria-current="true"] { color: var(--color-accent); }
.lib-count { margin: var(--space-lg) 0 0; text-align: right; font-size: var(--text-xs); color: var(--color-muted); }
.lib-list { margin-top: var(--space-md); border-top: var(--rule-hair) solid var(--color-rule); }
.lib-item { display: grid; grid-template-columns: 145px minmax(0, 1fr) 30px; gap: 30px; padding: 28px 10px 26px; border-bottom: var(--rule-hair) solid var(--color-rule); text-decoration: none; transition: padding var(--dur-short) var(--ease-out), background var(--dur-short) var(--ease-out); }
.lib-item:hover, .lib-item:focus-visible { padding-inline: 20px; background: var(--color-paper-2); }
.lib-side { display: grid; gap: 10px; align-content: start; }
.lib-num { font-size: var(--text-xs); font-weight: 700; color: var(--color-muted); }
.lib-role { font-size: var(--text-xs); color: var(--color-muted); line-height: 1.5; }
.lib-title { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); font-size: clamp(1.5rem, 1.6vw, 1.875rem); letter-spacing: -0.045em; }
.pill { display: inline-flex; align-items: center; height: 24px; padding: 0 var(--space-sm); border-radius: var(--radius-pill); font-size: 0.6875rem; font-weight: 400; color: var(--color-ink-2); background: color-mix(in oklab, var(--color-accent) 12%, transparent); box-shadow: inset 0 0 0 var(--rule-hair) color-mix(in oklab, var(--color-accent) 34%, transparent); }
.lib-problem { margin-top: var(--space-sm); font-size: 0.9375rem; line-height: 1.7; color: var(--color-ink-2); max-width: 50em; }
.lib-meta { display: grid; grid-template-columns: 1.35fr 1.35fr 0.8fr 0.7fr; gap: var(--space-lg); margin: 20px 0 0; padding-top: var(--space-md); border-top: var(--rule-hair) solid var(--color-rule); }
.lib-meta dt { font-size: 0.6875rem; color: var(--color-muted); }
.lib-meta dd { margin: var(--space-2xs) 0 0; overflow-wrap: anywhere; font-size: 0.8125rem; line-height: 1.5; color: var(--color-ink-2); }
.lib-arrow { justify-self: end; align-self: start; font-size: var(--text-lg); color: var(--color-ink-2); transition: transform var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out); }
.lib-item:hover .lib-arrow, .lib-item:focus-visible .lib-arrow { color: var(--color-accent); transform: translate(3px, -3px); }
@media (max-width: 60rem) {
  .lib-head { grid-template-columns: minmax(0, 1fr); }
  .lib-head .lead { text-align: left; }
  .lib-bar { grid-template-columns: minmax(0, 1fr) auto; padding-block: var(--space-sm); }
  .lib-search { grid-column: 1; grid-row: 1; }
  .lib-sort { grid-column: 2; grid-row: 1; }
  .seg { grid-column: 1 / -1; grid-row: 2; width: max-content; max-width: 100%; overflow-x: auto; }
  .lib-item { grid-template-columns: minmax(0, 1fr) 24px; gap: var(--space-md); padding: 26px 2px 24px; }
  .lib-item:hover, .lib-item:focus-visible { padding-inline: 10px; }
  .lib-side { grid-column: 1 / -1; grid-auto-flow: column; justify-content: start; gap: var(--space-md); }
  .lib-meta { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 40rem) {
  .lib-bar { gap: var(--space-xs); padding-block: 8px; }
  .lib-search { height: 38px; padding-inline: var(--space-sm); }
  .lib-search input { height: 36px; font-size: 0.75rem; }
  .lib-sort select { height: 36px; max-width: 100px; padding-inline: 8px; font-size: 0.6875rem; }
  .lib-sort-menu summary { min-width: 94px; height: 36px; padding-inline: 8px; font-size: 0.6875rem; }
  .seg__i { height: 32px; padding-inline: 9px; font-size: 0.6875rem; }
  .lib-title { font-size: 1.5rem; }
  .lib-meta { grid-template-columns: minmax(0, 1fr); gap: var(--space-sm); }
}
/* AI library: top hero */
.lib-hero { padding-top: calc(76px + var(--space-2xl)); }
.lib-hero .crumb { margin-bottom: 0; }
.lib-hero + .lib { padding-top: var(--space-xl); }
.lib-kicker { font-size: var(--text-xs); letter-spacing: 0.14em; color: var(--color-muted); }
.lib-stats { display: flex; gap: var(--space-3xl); margin: 0; }
.lib-stats dd { margin: 0; font-size: clamp(1.75rem, 2.6vw, 2.5rem); color: var(--color-ink); }
.lib-stats dt { margin-top: var(--space-2xs); font-size: var(--text-sm); color: var(--color-muted); }
.lib-h2 { font-size: clamp(2rem, 3.4vw, 3.25rem); }
@media (max-width: 60rem) {
  .lib-head .lib-stats { flex-wrap: wrap; }
}

/* Editorial reading layout for journal articles and project write-ups. */
.reading-head { max-width: 58rem; margin-inline: auto; padding-top: calc(76px + var(--space-2xl)); }
.reading-head .crumb { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-bottom: var(--space-2xl); line-height: 1.5; }
.reading-head__kicker { margin-bottom: var(--space-md); color: var(--color-muted); font-size: var(--text-sm); letter-spacing: .06em; }
.reading-head__kicker span { padding-inline: var(--space-xs); color: var(--color-rule-2); }
.reading-head h1 { max-width: 17em; font-size: clamp(2.6rem, 4.8vw, 4.75rem); line-height: 1.12; letter-spacing: -.055em; }
.reading-head__deck { max-width: 43rem; margin-top: var(--space-lg); color: var(--color-ink-2); font-size: clamp(1.0625rem, 1.6vw, 1.3rem); line-height: 1.7; }
.reading-head__byline { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); margin-top: var(--space-xl); padding-bottom: var(--space-xl); border-bottom: var(--rule-hair) solid var(--color-rule); color: var(--color-ink-2); font-size: var(--text-sm); }
.reading-head__byline time { color: var(--color-muted); }
.reading-head__avatar { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: var(--radius-card); background: var(--color-ink); color: var(--color-paper); font-weight: 650; }
.reading-head__dot { width: 3px; height: 3px; margin-inline: var(--space-2xs); border-radius: 50%; background: var(--color-muted); }
.reading-facts { display: grid; grid-template-columns: 1fr 1.5fr 2fr; gap: var(--space-xl); margin: var(--space-xl) 0 0; padding-block: var(--space-lg); border-block: var(--rule-hair) solid var(--color-rule); }
.reading-facts dt { color: var(--color-muted); font-size: var(--text-xs); }
.reading-facts dd { margin: var(--space-xs) 0 0; color: var(--color-ink-2); font-size: var(--text-sm); line-height: 1.6; overflow-wrap: anywhere; }
.reading-page--project .reading-head__byline { padding-bottom: 0; border-bottom: 0; }

.reading-body { width: min(100%, 46rem); max-width: none; margin: var(--space-2xl) auto 0; color: var(--color-ink-2); font-size: 1.125rem; line-height: 1.9; overflow-wrap: anywhere; }
.reading-body > * + * { margin-top: 1.4em; }
.reading-body p, .reading-body li { color: inherit; }
.reading-body h2, .reading-body h3, .reading-body h4 { max-width: none; color: var(--color-ink); font-family: var(--font-head); font-weight: 620; line-height: 1.35; letter-spacing: -.03em; text-wrap: balance; }
.reading-body h2 { margin-top: 2.7em; font-size: clamp(1.75rem, 2.4vw, 2.25rem); }
.reading-body h3 { margin-top: 2.2em; font-size: clamp(1.375rem, 1.7vw, 1.625rem); }
.reading-body h4 { margin-top: 2em; font-size: 1.2rem; }
.reading-body > :is(h2, h3, h4):first-child { margin-top: 0; }
.reading-body :is(ul, ol) { padding-left: 1.55em; }
.reading-body li + li { margin-top: .45em; }
.reading-body a { color: var(--color-accent); text-decoration-thickness: 1px; }
.reading-body :is(img, video, iframe) { display: block; max-width: 100%; height: auto; }
.reading-body :is(figure, .wp-block-image, .wp-block-gallery, .wp-block-embed) { max-width: 100%; margin-inline: 0; }
.reading-body figure img { width: auto; }
.reading-body figcaption, .reading-body .wp-element-caption { margin-top: var(--space-sm); color: var(--color-muted); font-size: var(--text-sm); line-height: 1.6; }
.reading-body blockquote { margin-block: 2.2em; padding-left: var(--space-lg); border-left: 2px solid var(--color-accent); color: var(--color-ink); font-size: 1.1em; }
.reading-body blockquote p { color: inherit; }
.reading-body pre { max-width: 100%; overflow-x: auto; padding: var(--space-lg); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-card); background: var(--color-paper-2); font-size: var(--text-sm); line-height: 1.6; }
.reading-body :not(pre) > code { padding: .1em .3em; background: var(--color-paper-2); color: var(--color-ink); }
.reading-body table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; font-size: var(--text-sm); }
.reading-body th, .reading-body td { padding: var(--space-sm); border-bottom: var(--rule-hair) solid var(--color-rule); text-align: left; }
.reading-body .wp-block-separator { margin-block: var(--space-2xl); border: 0; border-top: var(--rule-hair) solid var(--color-rule); }
.reading-body .solution-detail-section { margin-top: var(--space-2xl); padding-top: var(--space-xl); border-top: var(--rule-hair) solid var(--color-rule); }
.reading-body .solution-detail-section:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.reading-body .solution-detail-number { margin: 0 0 var(--space-sm); color: var(--color-muted); font-size: var(--text-sm); line-height: 1.4; }
.reading-body .solution-detail-section > div > h2 { margin: 0 0 var(--space-lg); }
.reading-body .solution-detail-text > * + * { margin-top: 1.15em; }
.reading-body .solution-detail-text > h3:first-child { margin-top: 0; }

.reading-tail { width: min(100%, 46rem); margin: var(--space-2xl) auto 0; }
.reading-tail .post-like { margin: 0 0 var(--space-2xl); }
.reading-author { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr) auto; align-items: center; gap: var(--space-lg); padding-block: var(--space-xl); border-block: var(--rule-hair) solid var(--color-rule); }
.reading-author__mark { display: grid; place-items: center; width: 3.5rem; height: 3.5rem; border-radius: var(--radius-card); background: var(--color-ink); color: var(--color-paper); font-size: 1.5rem; font-weight: 650; }
.reading-author__label { color: var(--color-muted); font-size: var(--text-xs); }
.reading-author h2 { max-width: none; margin-top: var(--space-2xs); font-size: var(--text-lg); letter-spacing: -.02em; }
.reading-author__text > p:last-child { margin-top: var(--space-2xs); color: var(--color-muted); font-size: var(--text-sm); }
.reading-author__link { align-self: center; color: var(--color-ink-2); font-size: var(--text-sm); text-decoration: none; white-space: nowrap; }
.reading-author__link:hover { color: var(--color-accent); }

.reading-related { margin-top: var(--space-3xl); padding-top: var(--space-xl); border-top: var(--rule-hair) solid var(--color-rule); }
.reading-related__head { display: flex; justify-content: space-between; align-items: end; gap: var(--space-lg); }
.reading-related__kicker { color: var(--color-muted); font-size: var(--text-sm); }
.reading-related__head h2 { margin-top: var(--space-xs); font-size: clamp(1.75rem, 2.5vw, 2.5rem); }
.reading-related__head > a { color: var(--color-ink-2); font-size: var(--text-sm); text-decoration: none; white-space: nowrap; }
.reading-related__head > a:hover { color: var(--color-accent); }
.reading-related__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-xl); margin-top: var(--space-xl); }
.reading-related__item { display: flex; flex-direction: column; min-width: 0; gap: var(--space-sm); padding-top: var(--space-lg); border-top: var(--rule-hair) solid var(--color-rule-2); text-decoration: none; }
.reading-related__item:hover { border-color: var(--color-accent); }
.reading-related__category { color: var(--color-muted); font-size: var(--text-xs); }
.reading-related__item strong { color: var(--color-ink); font-family: var(--font-head); font-size: var(--text-lg); font-weight: 620; line-height: 1.35; letter-spacing: -.025em; }
.reading-related__item:hover strong { color: var(--color-accent); }
.reading-related__excerpt { color: var(--color-muted); font-size: var(--text-sm); line-height: 1.65; overflow-wrap: anywhere; }
.reading-related__item time { margin-top: auto; padding-top: var(--space-xs); color: var(--color-muted); font-size: var(--text-xs); }

.reading-page--short .reading-head h1 { font-size: clamp(2.35rem, 4.2vw, 4rem); }
.reading-page--short .reading-body { margin-top: var(--space-xl); font-size: 1.1875rem; }
.reading-page--short .reading-tail { margin-top: var(--space-xl); }
.reading-page--short .reading-related { margin-top: var(--space-2xl); }

@media (max-width: 60rem) {
  .reading-head { padding-top: calc(76px + var(--space-xl)); }
  .reading-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .reading-facts div:last-child { grid-column: 1 / -1; }
  .reading-related__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 40rem) {
  .reading-head .crumb { margin-bottom: var(--space-xl); }
  .reading-head h1 { font-size: clamp(2.25rem, 8vw, 3.25rem); }
  .reading-head__byline { margin-top: var(--space-lg); padding-bottom: var(--space-lg); }
  .reading-body, .reading-page--short .reading-body { margin-top: var(--space-xl); font-size: 1.0625rem; line-height: 1.85; }
  .reading-body h2 { font-size: 1.65rem; }
  .reading-body h3 { font-size: 1.35rem; }
  .reading-facts { gap: var(--space-lg); }
  .reading-tail { margin-top: var(--space-xl); }
  .reading-author { grid-template-columns: 3rem minmax(0, 1fr); gap: var(--space-md); padding-block: var(--space-lg); }
  .reading-author__mark { width: 3rem; height: 3rem; }
  .reading-author__link { grid-column: 2; }
  .reading-related { margin-top: var(--space-2xl); }
  .reading-related__head { align-items: start; flex-wrap: wrap; }
  .reading-related__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); }
}