/* Juvendy editorial pages: use independently from the archived shop stylesheet. */
:root {
  color-scheme: light;
  --cream: #f8f5ee;
  --paper: #fffdf8;
  --sage: #e8eddf;
  --ink: #294438;
  --muted: #58695f;
  --rust: #95573f;
  --line: #cfd5c8;
  --shell: 74rem;
  --body-font: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  --heading-font: "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", Georgia, serif;
}

*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-padding-top: 2rem; }

body {
  margin: 0;
  color: var(--ink);
  background: var(--cream);
  font-family: var(--body-font);
  font-size: 1rem;
  line-height: 1.9;
  overflow-wrap: break-word;
  -webkit-text-size-adjust: 100%;
}

img, svg { display: block; max-width: 100%; }
img { height: auto; }
figure, h1, h2, h3, h4, p { margin: 0; }
button, input, select, textarea { font: inherit; }
button { color: inherit; }
a { color: inherit; text-underline-offset: 0.22em; }
a:hover { text-decoration-thickness: 0.12em; }
button, a { -webkit-tap-highlight-color: transparent; }
button:enabled { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: 0.65; }

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--rust);
  outline-offset: 5px;
}

[hidden] { display: none !important; }

.shell { width: min(var(--shell), calc(100% - 5rem)); margin-inline: auto; }
.section { padding-block: clamp(2.5rem, 5vw, 4.5rem); }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip {
  position: absolute;
  inset-block-start: 0.75rem;
  inset-inline-start: 1rem;
  z-index: 100;
  padding: 0.75rem 1rem;
  color: var(--paper);
  background: var(--ink);
  transform: translateY(-180%);
}
.skip:focus { transform: none; }

.preview-note {
  padding: 0.65rem 1.25rem;
  color: var(--paper);
  background: var(--ink);
  font-size: 0.75rem;
  line-height: 1.8;
  text-align: center;
}
.preview-note a { color: inherit; }

.site-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  padding-block: 1.25rem;
  border-bottom: 1px solid var(--line);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
  min-width: 0;
  color: var(--ink);
  text-decoration: none;
}
.brand-logo { flex: 0 0 auto; width: 5rem; height: 4rem; object-fit: contain; }
.brand-label { font-size: 0.82rem; font-weight: 600; line-height: 1.65; letter-spacing: 0.04em; }
.brand-label small { display: block; margin-top: 0.25rem; font-size: 0.68rem; font-weight: 400; color: var(--muted); }
.site-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 1.6rem; }
.site-nav a { display: block; padding-block: 0.6rem; font-size: 0.82rem; text-decoration: none; }
.site-nav a:hover,
.site-nav a[aria-current="page"] { color: var(--rust); text-decoration: underline; }
.menu-button {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  min-height: 2.75rem;
  padding: 0.5rem 0.8rem;
  border: 1px solid var(--line);
  border-radius: 2px;
  color: var(--ink);
  background: transparent;
  font-size: 0.8rem;
}
.menu-button::after { content: ""; width: 1rem; height: 0.5rem; border-top: 1px solid currentColor; border-bottom: 1px solid currentColor; }
.menu-button[aria-expanded="true"] { background: var(--sage); border-color: var(--ink); }

.hero { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; padding-block: clamp(2.5rem, 5vw, 4.5rem); }
.hero-copy { min-width: 0; }
.eyebrow { margin-bottom: 1rem; color: var(--rust); font-size: 0.7rem; font-weight: 600; line-height: 1.7; letter-spacing: 0.12em; }
h1, h2 { font-family: var(--heading-font); font-weight: 500; }
.hero h1 { font-size: clamp(2.15rem, 3.6vw, 3.4rem); line-height: 1.55; letter-spacing: 0.015em; }
.hero-lead { margin-top: 1.45rem; color: var(--muted); font-size: 1rem; line-height: 2; }
.hero-copy > p:not(.eyebrow):not(.hero-lead) { margin-top: 1rem; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin-top: 1.9rem; }
.hero-visual { min-width: 0; margin: 0; }
.hero-visual img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; background: var(--sage); }
.hero-visual figcaption { margin-top: 0.7rem; color: var(--muted); font-size: 0.68rem; line-height: 1.75; }

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  min-height: 3rem;
  padding: 0.85rem 1.35rem;
  border: 1px solid var(--ink);
  border-radius: 2px;
  color: var(--paper);
  background: var(--ink);
  font-size: 0.85rem;
  line-height: 1.6;
  text-align: center;
  text-decoration: none;
  transition: background-color 160ms ease, border-color 160ms ease;
}
.button:hover { background: #3c5d49; border-color: #3c5d49; text-decoration: none; }
.button.secondary { color: var(--ink); background: transparent; }
.button.secondary:hover { background: var(--sage); }
.text-link { display: inline-block; padding-block: 0.5rem; font-size: 0.85rem; text-decoration: underline; }

.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.25rem 3rem; margin-block: clamp(2.5rem, 5vw, 4.5rem) 1.75rem; }
.section > .section-head:first-child { margin-top: 0; }
.section-head h2 { font-size: clamp(1.6rem, 2.5vw, 2.3rem); line-height: 1.65; }
.section-head .eyebrow { margin-bottom: 0.7rem; }
.section-head > p { max-width: 29rem; color: var(--muted); font-size: 0.85rem; }
.section-head > a { flex: 0 0 auto; }
.entry-list, .article-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.entry-row {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 2rem);
  padding-block: 1.65rem;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
}
.entry-row > div { flex: 1; min-width: 0; }
.entry-number { flex: 0 0 2.2rem; color: var(--rust); font-family: Georgia, serif; font-size: 1.25rem; }
.entry-row h3 { font-family: var(--heading-font); font-size: 1.2rem; font-weight: 500; line-height: 1.75; }
.entry-row p { margin-top: 0.4rem; color: var(--muted); font-size: 0.85rem; }
.entry-row:hover h3 { color: var(--rust); text-decoration: underline; text-underline-offset: 0.2em; }
.entry-arrow { flex: 0 0 auto; color: var(--rust); }
.article-row { display: block; padding-block: 1.75rem; border-bottom: 1px solid var(--line); }
a.article-row { text-decoration: none; }
.article-row h3 { max-width: 49rem; margin-top: 0.65rem; font-family: var(--heading-font); font-size: clamp(1.15rem, 2vw, 1.45rem); font-weight: 500; line-height: 1.75; }
.article-row h3 a { text-decoration: none; }
.article-row h3 a:hover,
a.article-row:hover h3 { color: var(--rust); text-decoration: underline; text-underline-offset: 0.2em; }
.article-row p { max-width: 50rem; margin-top: 0.6rem; color: var(--muted); font-size: 0.87rem; }
.article-row .text-link { margin-top: 0.65rem; }
.tag { display: inline-block; padding: 0.15rem 0.55rem; border: 1px solid #b7c3af; color: var(--ink); background: transparent; font-size: 0.7rem; line-height: 1.75; }
.editorial-note { margin-block: 2rem; padding: 1rem 0 1rem 1.3rem; border-left: 3px solid var(--rust); font-size: 0.85rem; line-height: 1.95; }
.editorial-note p + p { margin-top: 0.8rem; }
.editorial-note a { text-decoration: underline; }
.book-note { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 1.5rem 3rem; margin-top: 2.5rem; padding-block: 2rem; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.book-note h2 { font-size: clamp(1.5rem, 2.3vw, 2rem); line-height: 1.7; }
.book-note p { color: var(--muted); font-size: 0.9rem; }
.book-note p + p { margin-top: 0.9rem; }
.callout { margin-block: 1.6rem; padding: 1.25rem 1.5rem; border-left: 3px solid var(--ink); background: var(--sage); }
.callout p + p { margin-top: 0.8rem; }
.route-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
.route-card { display: flex; flex-direction: column; align-items: flex-start; padding: clamp(1.5rem, 3vw, 2.5rem); background: var(--paper); border: 1px solid var(--line); }
.route-card-shop { background: var(--sage); }
.route-number { margin-top: 1.3rem; color: var(--rust); font: italic 2.2rem Georgia, serif; }
.route-card h3 { margin-block: .8rem 1rem; font: 500 clamp(1.4rem, 2.6vw, 2rem)/1.7 var(--heading-font); }
.route-card > p:not(.route-number) { flex: 1; margin-bottom: 1.4rem; color: var(--muted); font-size: .9rem; }
.route-card small { margin-top: 1rem; color: var(--muted); font-size: .72rem; }
.coat-feature { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); align-items: center; gap: clamp(2rem, 6vw, 5rem); }
.product-visual { padding: 1rem; background: #fff; }
.product-visual img { width: 100%; height: auto; }
.coat-feature h2 { margin-block: 1rem; font-size: clamp(1.7rem, 3vw, 2.4rem); line-height: 1.7; }
.coat-feature p:not(.eyebrow) { margin-bottom: 1.2rem; color: var(--muted); }
.coat-feature .feature-caption { margin-top: 1.5rem; font-size: .75rem; }
.shop-family { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 2rem; padding-block: 2rem; border-bottom: 1px solid var(--line); }
.shop-family.text-only { display: block; }
.reading .shop-family h2 { margin-top: .8rem; font-size: 1.5rem; }
.reading .shop-family figure { margin: 0; align-self: start; }
.shop-note { color: var(--muted); font-size: .8rem; }
.purchase-panel { margin-block: 2rem; padding: 1.5rem; background: var(--sage); }
.variant-links { display: grid; gap: .5rem; list-style: none; padding-left: 0 !important; }
.variant-links a { display: block; padding: .8rem 1rem; border: 1px solid var(--line); background: var(--paper); }
.site-nav a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; }
.measurement-settings { padding: .5rem 0; border: 0; background: none; color: inherit; font-size: .8rem; text-decoration: underline; cursor: pointer; }
.measurement-consent { position: fixed; z-index: 80; inset: auto 1.25rem 1.25rem; max-width: 72rem; margin-inline: auto; display: flex; align-items: center; gap: 1.5rem; padding: 1.2rem 1.5rem; border: 1px solid var(--line); background: var(--paper); box-shadow: 0 4px 24px #29443826; font-size: .8rem; line-height: 1.8; }
.measurement-consent > div:first-child { flex: 1; }
.measurement-consent strong { display: block; margin-bottom: .25rem; }
.measurement-consent p { color: var(--muted); }
.consent-actions { display: flex; flex: 0 0 auto; gap: .65rem; }
.consent-actions button { min-height: 44px; padding: .65rem 1rem; border: 1px solid var(--ink); color: var(--ink); background: var(--paper); font-size: .8rem; cursor: pointer; }
.consent-actions button:first-child { color: var(--paper); background: var(--ink); }
.reading .callout h2 { margin: 0 0 .8rem; padding: 0; border: 0; font-size: 1.3rem; }
.reading.tiktok-entry > .eyebrow { display: none; }
.reading.tiktok-entry h1 { font-size: clamp(1.55rem, 4.5vw, 2rem); line-height: 1.6; }
.reading.tiktok-entry .lead { margin-top: .5rem; font-size: 1rem; }
.reading.tiktok-entry > p { margin-top: .6rem; font-size: .85rem; }
.reading.tiktok-entry nav > h2 { margin: 1.25rem 0 .5rem; padding-bottom: .4rem; border: 0; font-size: 1.1rem; }
.reading.tiktok-entry .entry-list .entry-row { text-decoration: none; }
.tiktok-entry .entry-row { gap: 1rem; padding-block: 1rem; }
.tiktok-entry .entry-row h3 { margin: 0; font-size: 1rem; font-family: var(--body-font); font-weight: 600; }
.tiktok-entry .entry-row p { margin: .2rem 0 0; font-size: .78rem; }
.tiktok-entry .product-visual { max-width: 28rem; margin-inline: auto; }

.breadcrumbs { margin-block: 1.5rem 2rem; color: var(--muted); font-size: 0.75rem; line-height: 1.9; overflow-wrap: anywhere; }
.breadcrumbs ol { display: flex; flex-wrap: wrap; gap: 0.3rem 0.75rem; margin: 0; padding: 0; list-style: none; }
.breadcrumbs a { text-decoration: underline; }
.article-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 1rem; color: var(--muted); font-size: 0.75rem; line-height: 1.85; }
.reading { width: min(49rem, calc(100% - 5rem)); margin-inline: auto; padding-bottom: 1rem; }
.reading h1 { font-size: clamp(1.9rem, 3.7vw, 2.8rem); line-height: 1.65; letter-spacing: 0.01em; }
.reading > header { margin-bottom: 2rem; }
.reading > header .article-meta,
.reading > .article-meta { margin-block: 1rem 1.5rem; }
.reading .lead { margin-top: 1.5rem; font-size: 1.08rem; line-height: 2; }
.reading p { line-height: 2; }
.reading p + p { margin-top: 1.15rem; }
.reading h2 { margin-block: 3rem 1.2rem; padding-bottom: 0.6rem; border-bottom: 1px solid var(--line); font-size: clamp(1.4rem, 2.5vw, 1.8rem); line-height: 1.75; }
.reading h3 { margin-block: 2rem 0.9rem; font-size: 1.1rem; font-weight: 600; line-height: 1.85; }
.reading h4 { margin-block: 1.5rem 0.75rem; font-size: 1rem; line-height: 1.85; }
.reading ul, .reading ol { padding-left: 1.5rem; }
.reading li { padding-left: 0.2rem; line-height: 2; }
.reading li + li { margin-top: 0.55rem; }
.reading a:not(.button):not(.tag) { text-decoration: underline; }
.reading strong { font-weight: 650; }
.reading figure { margin-block: 1.5rem; }
.reading figcaption { margin-top: 0.5rem; color: var(--muted); font-size: 0.75rem; }
.reading blockquote { margin: 1.5rem 0; padding-left: 1.3rem; border-left: 2px solid var(--line); color: var(--muted); }
.reading hr { margin-block: 2rem; border: 0; border-top: 1px solid var(--line); }
.reading dl { margin-block: 1.5rem; }
.reading dt { margin-top: 1.2rem; font-weight: 600; }
.reading dd { margin: 0.35rem 0 0; }
.reading :is(h2, h3, h4)[id] { scroll-margin-top: 1.5rem; }

.toc { margin-block: 2rem; padding-block: 1.25rem; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: 0.87rem; }
.toc h2, .reading .toc h2 { margin: 0 0 0.8rem; padding: 0; border: 0; font-family: var(--body-font); font-size: 0.85rem; font-weight: 600; }
.toc ol, .toc ul { margin: 0; padding-left: 1.4rem; }
.toc li + li { margin-top: 0.35rem; }
.toc summary { font-weight: 600; cursor: pointer; }
.toc[open] > summary { margin-bottom: 0.8rem; }
.comparison-wrap { max-width: 100%; margin-block: 1.6rem; overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
.comparison { width: 100%; min-width: 37rem; border-collapse: collapse; font-size: 0.85rem; line-height: 1.85; text-align: left; }
.comparison caption { padding-block: 0 0.8rem; font-size: 0.9rem; font-weight: 600; text-align: left; }
.comparison th, .comparison td { min-width: 8rem; padding: 0.85rem 1rem; border-bottom: 1px solid var(--line); vertical-align: top; overflow-wrap: anywhere; }
.comparison thead th { border-top: 1px solid var(--line); background: var(--sage); font-weight: 600; }
.comparison tbody th { min-width: 9rem; background: #f0f0e6; font-weight: 600; }
.comparison p, .reading .comparison p { font-size: inherit; line-height: inherit; }
.comparison small { display: block; margin-top: 0.3rem; color: var(--muted); font-size: 0.73rem; }
.table-note { margin-top: -0.8rem; color: var(--muted); font-size: 0.75rem; line-height: 1.85; }
.source-list { margin-block: 1rem; padding-left: 1.4rem; color: var(--muted); font-size: 0.82rem; }
.source-list li { overflow-wrap: anywhere; }
.source-list li + li { margin-top: 0.8rem; }
.steps { margin-block: 1.5rem; padding-left: 1.5rem; }
.steps li { padding-left: 0.4rem; }
.steps li + li { margin-top: 1.25rem; }
.steps li::marker { color: var(--rust); font-weight: 600; }
.cost-tool { margin-block: 2rem; padding: 1.4rem; border: 1px solid var(--line); background: var(--paper); }
.cost-tool h3 { margin-top: 0; }
.cost-inputs { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1rem; margin-block: 1.3rem; }
.cost-inputs label { display: block; font-size: .82rem; }
.cost-inputs input { display: block; width: 100%; margin-top: .35rem; padding: .65rem; border: 1px solid #8c9f90; border-radius: 2px; background: #fff; color: var(--ink); }
#cost-result { padding-top: 1rem; border-top: 1px solid var(--line); font-weight: 600; }
@media (max-width: 35rem) { .cost-inputs { grid-template-columns: 1fr; } }
.steps strong { display: block; }

.site-footer { margin-top: clamp(3rem, 7vw, 6rem); padding-block: 2.5rem 1.75rem; border-top: 1px solid var(--line); background: var(--sage); }
.footer-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem 3rem; }
.site-footer p { max-width: 32rem; margin-top: 1rem; color: var(--muted); font-size: 0.8rem; }
.footer-links { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 0.3rem 1.4rem; }
.footer-links a { padding-block: 0.5rem; font-size: 0.8rem; text-decoration: underline; }
.copyright { display: block; margin-top: 2rem; color: var(--muted); font-size: 0.7rem; }

@media (min-width: 48rem) and (max-width: 64rem) {
  .site-header { column-gap: 1rem; }
  .brand-logo { width: 5rem; }
  .brand-label { font-size: 0.74rem; }
  .site-nav { column-gap: 1rem; }
  .site-nav a { font-size: 0.75rem; }
}

@media (max-width: 47.999rem) {
  .measurement-consent { flex-direction: column; align-items: stretch; gap: .8rem; inset: auto .75rem .75rem; padding: 1rem; }
  .consent-actions button { flex: 1; }
  .route-grid, .coat-feature, .shop-family { grid-template-columns: 1fr; }
  .route-card { padding: 1.5rem; }
  .route-card .button { width: 100%; }
  .coat-feature { gap: 1.5rem; }
  .coat-feature .product-visual { max-width: 28rem; margin-inline: auto; }
  .shell { width: calc(100% - 2.5rem); }
  .site-header { gap: 0.7rem 1rem; padding-block: 1rem; }
  .site-header > .brand { flex: 1 1 0; }
  .brand { gap: 0.65rem; }
  .brand-logo { width: 4rem; height: 3.4rem; }
  .brand-label { min-width: 0; font-size: 0.7rem; }
  .brand-label small { font-size: 0.63rem; }
  .menu-button.is-ready { display: inline-flex; flex: 0 0 auto; }
  .site-nav { flex-basis: 100%; align-items: stretch; gap: 0; padding-top: 0.4rem; }
  .site-nav a { flex: 1 1 50%; padding: 0.75rem 0; font-size: 0.85rem; }
  .site-nav.is-managed:not(.is-open) { display: none; }
  .site-nav.is-managed.is-open { display: flex; }
  .hero { grid-template-columns: 1fr; gap: 2rem; padding-block: 2.4rem 2rem; }
  .hero h1 { font-size: clamp(2rem, 7.3vw, 2.8rem); }
  .hero-lead { margin-top: 1.15rem; font-size: 0.95rem; }
  .hero-actions { margin-top: 1.5rem; gap: 0.75rem 1.25rem; }
  .hero-visual figcaption { font-size: 0.65rem; }
  .eyebrow { font-size: 0.65rem; }
  .section-head { align-items: flex-start; flex-direction: column; gap: 1rem; margin-bottom: 1.25rem; }
  .section-head > p { font-size: 0.85rem; }
  .entry-row { gap: 1rem; padding-block: 1.3rem; }
  .entry-number { flex-basis: 1.5rem; font-size: 1.05rem; }
  .entry-row h3 { font-size: 1.1rem; }
  .entry-row p { font-size: 0.82rem; }
  .article-row { padding-block: 1.4rem; }
  .book-note { grid-template-columns: 1fr; gap: 1rem; }
  .editorial-note { padding-left: 1rem; }
  .reading { width: calc(100% - 2.5rem); }
  .reading h1 { font-size: clamp(1.75rem, 6.6vw, 2.3rem); }
  .reading .lead { font-size: 1rem; }
  .reading h2 { margin-top: 2.5rem; }
  .comparison { min-width: 35rem; font-size: 0.82rem; }
  .comparison th, .comparison td { padding: 0.75rem 0.85rem; }
  .callout { padding: 1.1rem 1.15rem; }
  .footer-inner { grid-template-columns: 1fr; gap: 1.5rem; }
  .footer-links { column-gap: 1.2rem; }
}

@media (max-width: 23rem) {
  .shell, .reading { width: calc(100% - 2rem); }
  .brand-logo { width: 3.5rem; }
  .brand-label { max-width: 7.5rem; font-size: 0.65rem; }
  .brand-label small { display: none; }
  .menu-button { padding-inline: 0.55rem; font-size: 0.7rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

@media print {
  body { background: white; color: black; font-size: 11pt; }
  .shell, .reading { width: 100%; max-width: none; }
  .preview-note, .menu-button, .site-nav, .hero-actions, .site-footer { display: none !important; }
  .comparison-wrap { overflow: visible; }
  .comparison { min-width: 0; font-size: 9pt; }
  .comparison th, .comparison td { min-width: 0; }
  h2, h3 { break-after: avoid; }
  tr, figure { break-inside: avoid; }
}
.topic-links{display:flex;gap:10px;flex-wrap:wrap;margin:28px 0}.topic-links a{padding:8px 14px;border:1px solid var(--line,#d7d7cc);border-radius:24px;text-decoration:none;background:#fffdf8}.topic-links a:hover{background:#edece1}.product-section{margin:56px 0;scroll-margin-top:24px}.affiliate-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.affiliate-card{background:#fffdf8;border:1px solid var(--line,#d7d7cc);padding:26px;border-radius:4px;display:flex;flex-direction:column}.affiliate-card h3{font-size:1.25rem;line-height:1.6;margin:18px 0 5px}.affiliate-card .product-model{font-size:.85rem;color:#6d766d;margin:0 0 15px}.affiliate-card .button{font-size:.85rem;padding:13px 16px}.affiliate-card p{font-size:.94rem}.product-conditions{font-size:.9rem;margin:10px 0 auto}.product-conditions dt{font-weight:700;margin-top:14px}.product-conditions dd{margin:4px 0 0;color:#536055;line-height:1.85}.base-secondary{margin:48px 0 24px;padding:24px 28px;border-top:1px solid #d7d7cc;border-bottom:1px solid #d7d7cc;background:#eeeee5}.base-secondary h2{font-size:1.05rem;margin:0 0 10px}.base-secondary p{font-size:.9rem;margin:8px 0}.base-secondary a{color:inherit}.reading:has(.affiliate-grid){max-width:1040px}@media(max-width:700px){.affiliate-grid{grid-template-columns:1fr}.affiliate-card{padding:22px}.topic-links{gap:8px}.topic-links a{font-size:.85rem}.base-secondary{padding:20px}.product-section{margin:40px 0}}

.product-shortcuts { margin-block: 1.75rem 2.5rem; padding: 1.25rem; border: 1px solid var(--line); background: var(--sage); }
.reading .product-shortcuts h2 { margin: 0 0 1rem; padding: 0; border: 0; font-family: var(--body-font); font-size: 1.1rem; line-height: 1.6; }
.reading .product-shortcut-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; margin: 0; padding: 0; list-style: none; }
.reading .product-shortcut-list li { margin: 0; padding: 0; }
.reading .product-shortcuts .product-shortcut-list a { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: .75rem; align-items: center; min-height: 76px; height: 100%; padding: .7rem .85rem; border: 1px solid var(--line); background: var(--paper); text-decoration: none; }
.product-shortcut-list .shortcut-label { grid-column: 1; font-size: .9rem; font-weight: 650; line-height: 1.6; }
.product-shortcut-list small { grid-column: 1; color: var(--muted); font-size: .75rem; line-height: 1.6; }
.product-shortcut-list .shortcut-arrow { grid-column: 2; grid-row: 1 / 3; color: var(--rust); font-size: 1.1rem; }
.product-shortcut-list a:hover { border-color: var(--ink); }
.product-shortcut-list a:hover .shortcut-label { text-decoration: underline; }
.reading .product-shortcuts .table-note { margin: .85rem 0 0; font-size: .75rem; line-height: 1.7; }
.affiliate-card[id] { scroll-margin-top: 1.5rem; }
.book-preview-hero { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 1.75rem; align-items: start; margin: 2rem 0; }
.book-preview-hero .book-cover { display: block; width: 100%; max-width: 300px; height: auto; margin-inline: auto; border: 1px solid var(--line); }
.book-preview-hero figcaption, .book-sample-grid figcaption { margin-top: .6rem; font-size: .8rem; color: var(--muted); line-height: 1.7; }
.reading .book-preview-hero h2 { margin-top: 1.1rem; }
.book-sample-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; margin: 1.5rem 0; }
.book-sample-grid img { width: 100%; height: auto; border: 1px solid var(--line); background: white; }
.reading:has(.book-preview-hero) { max-width: 1040px; }
@media (max-width: 650px) {
  .book-preview-hero { grid-template-columns: 1fr; gap: 1.25rem; }
  .book-preview-hero .book-cover { max-width: 230px; }
  .book-preview-hero .button { width: 100%; justify-content: center; }
  .book-sample-grid { grid-template-columns: 1fr; }
}
@media (max-width: 540px) {
  .product-shortcuts { padding: 1rem; }
  .reading .product-shortcut-list { grid-template-columns: 1fr; gap: .5rem; }
  .reading .product-shortcuts .product-shortcut-list a { min-height: 68px; padding: .55rem .75rem; }
}