/* Distinct visual treatments for TBB's subject pages and long reads. */
main { --theme-accent: #e6c187; --theme-wash: #30271b; }
main :is(.material-card,.article-toc,.article-related,.guide-card,.topic-card,.closing-copy) {
  background: linear-gradient(135deg, color-mix(in srgb, var(--theme-wash) 55%, var(--surface)), var(--surface) 80%);
}
main :is(.article-toc summary,.material-card-action) { color: var(--theme-accent); }
main > .themed-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.16fr) minmax(260px, .84fr);
  align-items: center;
  gap: clamp(26px, 5vw, 76px);
  width: calc(100% - 2 * var(--gutter));
  margin: clamp(22px, 3.5vw, 44px) auto 0;
  padding: clamp(24px, 4.5vw, 64px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: radial-gradient(ellipse at 92% 12%, var(--theme-wash), transparent 70%), #191a17;
}
main.section-theme-1 { --theme-accent: #b5c9b5; --theme-wash: #25332c; }
main.section-theme-2 { --theme-accent: #c4c8e0; --theme-wash: #2a2c3b; }
main.section-theme-3 { --theme-accent: #edbb9d; --theme-wash: #362821; }
.themed-hero .eyebrow { color: var(--theme-accent); }
.themed-hero .theme-copy h1 { font-size: clamp(31px, 4.25vw, 62px); text-wrap: balance; line-height: 1.06; }
.theme-copy p { margin-bottom: 18px; }
.theme-breadcrumbs { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 22px; color: var(--theme-accent); font-size: 13px; }
.theme-read { color: var(--theme-accent); border-color: var(--theme-accent); }
.theme-visual {
  position: relative;
  isolation: isolate;
  margin: 0;
  width: 100%;
  min-width: 0;
  aspect-ratio: 4 / 3;
  border: 1px solid color-mix(in srgb, var(--theme-accent) 50%, #25221d);
  border-radius: 18px;
  overflow: hidden;
  color: var(--theme-accent);
  background: radial-gradient(circle at 49% 44%, var(--theme-wash), #1a1a16 74%);
}
.theme-visual.has-photo > img { width: 100%; height: 100%; object-fit: cover; }
.theme-visual.has-photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, #131410e6, transparent 56%); pointer-events: none; }
.theme-visual.has-icon::after { content: ''; position: absolute; inset: 13%; border: 1px solid currentColor; opacity: .2; border-radius: 50%; }
.theme-visual .theme-icon { position: absolute; width: clamp(66px, 9vw, 122px); height: auto; object-fit: contain; inset: 40% auto auto 50%; translate: -50% -50%; }
.theme-visual .theme-index, .theme-illustration { position: absolute; z-index: 2; font-size: 10px; line-height: 1.3; }
.theme-index { left: 12px; top: 12px; padding: 6px 8px; border-radius: 5px; background: #181915e8; letter-spacing: .11em; }
.theme-illustration { right: 10px; bottom: 8px; color: #f6efe6; }
.theme-signal { position: absolute; z-index: 1; width: 100%; height: 35%; left: 0; bottom: 3%; fill: none; pointer-events: none; }
.theme-signal polyline { stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; }
.theme-gridline { stroke: currentColor; opacity: .16; }
.theme-wave-base { opacity: .5; }
.theme-signal .theme-wave-light { stroke-width: 2.25; stroke-dasharray: 18 82; stroke-dashoffset: 100; opacity: .9; animation: trace-highlight 4.4s ease-out; }
.composition-1 .theme-visual { aspect-ratio: 1.25; border-radius: 40px 18px 40px 18px; }
.composition-2 .theme-visual { aspect-ratio: 1.65; border-radius: 8px 24px 8px 24px; }
.composition-2 .theme-signal { bottom: 8%; }
@keyframes trace-highlight { to { stroke-dashoffset: 0; } }
.conversion-hero::after { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 1px; background: linear-gradient(90deg, transparent 0 28%, #e6c187 49%, transparent 70%); background-size: 220% 100%; animation: hero-gold-trace 4.4s ease-in-out; pointer-events: none; }
@keyframes hero-gold-trace { from, to { background-position: 100% 0; opacity: .35; } 50% { background-position: 0 0; opacity: .9; } }

main > .material-filters { display: flex; flex-wrap: wrap; gap: 9px; padding-block: 26px 8px; }
.material-filters a { padding: 9px 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); font-size: 14px; }
.material-filters a:is(:hover,:focus-visible) { border-color: var(--gold); text-decoration: none; }
main > .material-group { padding-block: clamp(24px, 4vw, 48px); }
.material-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.material-card { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); transition: border-color .2s, transform .2s; }
.material-card img { width: 100%; aspect-ratio: 1.85; object-fit: cover; }
.material-card > div { display: flex; flex: 1; flex-direction: column; padding: clamp(18px, 2.2vw, 28px); }
.material-card h3 { margin-bottom: 10px; font-size: clamp(20px, 2vw, 26px); text-wrap: pretty; }
.material-card p { margin: 0 0 14px; font-size: 14px; }
.material-card-action { color: var(--gold); font-size: 13px; margin-top: auto; }
.material-card:hover { transform: translateY(-4px); border-color: var(--gold); text-decoration: none; }

main > .article-section { padding-block: clamp(32px, 5vw, 64px); }
.article-section #longread-title { margin-bottom: 30px; }
.article-cover { margin: 0 0 32px; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.article-cover img { width: 100%; aspect-ratio: 2.7; object-fit: cover; }
.article-cover figcaption { padding: 8px 14px; color: var(--muted); font-size: 13px; }
.article-layout { display: grid; grid-template-columns: minmax(190px, .36fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 60px); align-items: start; }
.article-layout > aside { position: sticky; top: 20px; }
.article-toc { border: 1px solid var(--line); border-radius: 14px; padding: 16px; background: var(--surface); }
.article-toc summary { cursor: pointer; color: var(--gold); font-weight: bold; }
.article-toc ol { max-height: min(60vh, 540px); overflow: auto; padding-inline-start: 22px; margin-bottom: 0; }
.article-toc li { margin-block: 8px; font-size: 13px; line-height: 1.45; }
.article-toc li::marker { color: var(--gold); }
.article-prose { max-width: 76ch; min-width: 0; font-size: clamp(16px, 1.6vw, 18px); line-height: 1.73; }
.article-prose > :first-child { margin-top: 0; }
.article-prose :is(h2,h3,h4) { margin: 1.55em 0 .55em; text-wrap: pretty; }
.article-prose :is(h2,h3)[id] { color: #f4e8d6; font-size: clamp(24px, 2.5vw, 33px); }
.article-prose :is(h3,h4):not([id]) { font-size: clamp(19px, 2vw, 24px); }
.article-prose p { margin: .65em 0 1.15em; }
.article-prose li { color: var(--muted); padding-left: .15em; margin-bottom: .45em; }
.article-prose a { color: var(--gold); text-decoration: underline; text-underline-offset: .16em; }
.article-prose strong { color: var(--ink); }
.article-related { margin-top: 32px; padding: clamp(20px, 3vw, 34px); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.article-related h2 { font-size: clamp(23px, 3vw, 32px); }
.article-related > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 16px; }
.article-related > div a { padding: 12px; border: 1px solid var(--line); border-radius: 8px; font-size: 14px; }
.article-related > div a:hover { border-color: var(--gold); }

@media (max-width: 950px) {
  header { flex-wrap: wrap; gap: 12px; }
  header .logo { width: 160px; }
  header .lang { margin-left: auto; }
  header .menu { display: block; padding: 3px 9px; border: 1px solid var(--line); color: var(--ink); background: transparent; font-size: 22px; }
  header > #nav { display: none; order: 5; flex-basis: 100%; flex-direction: column; gap: 0; margin: 0; padding-block: 8px; }
  header > #nav.open { display: flex; }
  header > #nav a { min-height: 44px; }
  .material-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .article-layout { grid-template-columns: minmax(0,1fr); }
  .article-layout > aside { position: static; }
  .article-toc ol { max-height: 14rem; }
}
@media (max-width: 760px) {
  main > .themed-hero { grid-template-columns: minmax(0,1fr); }
  .theme-visual { max-height: 285px; }
  .themed-hero .theme-copy h1 { font-size: clamp(29px, 6.5vw, 43px); }
  .article-cover img { aspect-ratio: 1.65; }
}
@media (max-width: 490px) {
  .material-grid, .article-related > div { grid-template-columns: minmax(0,1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .theme-signal .theme-wave-light, .conversion-hero::after { animation: none; }
  .material-card:hover { transform: none; }
}