.wb-about {
  --wb-rule: 1px solid var(--color-line-oak);
}

.wb-about .technical-label { margin-block-end: 0; }

.wb-about__hero {
  padding-block: clamp(3rem, 7vw, 6rem);
  border-block-end: 2px solid var(--color-graphite-900);
  background-color: var(--color-oak-100);
  background-image: repeating-linear-gradient(0deg, rgba(36, 43, 47, 0.035) 0, rgba(36, 43, 47, 0.035) 1px, transparent 1px, transparent 14px);
}

.wb-about__hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(20rem, 5fr);
  gap: var(--space-6);
  align-items: center;
}

.wb-about__hero-grid > * { min-width: 0; width: 100%; }

.wb-about__hero-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  max-width: 43.75rem;
}

.wb-about__hero-copy h1,
.wb-about__hero-copy p { margin: 0; }

.wb-about__hero-meta {
  color: var(--color-graphite-700);
  font-family: var(--font-heading);
  font-size: var(--text-label);
  font-weight: 700;
  letter-spacing: .1em;
  line-height: 1.35;
}

.wb-about__hero-copy .lead { max-width: 42ch; }

.wb-about__hero-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  width: 100%;
}

.wb-about__external-button { min-height: 2.75rem; }
.wb-about__source-note { max-width: 55ch; margin: 0; color: var(--color-graphite-700); font-size: var(--text-meta); line-height: 1.45; }

.wb-about__hero-media { width: 100%; margin: 0; }
.wb-about__media-label { display: flex; align-items: center; gap: var(--space-2); margin-block-end: var(--space-3); color: var(--color-graphite-900); font-family: var(--font-heading); font-size: var(--text-label); font-weight: 700; letter-spacing: .09em; }
.wb-about__hero-media .media-frame { border-radius: 0; }
.wb-about__hero-media img { aspect-ratio: 16 / 10; object-fit: cover; width: 100%; }
.wb-about__hero-media figcaption { max-width: 54ch; }

.wb-about__section-intro { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); }
.wb-about__section-intro > * { margin: 0; }
.wb-about__section-intro h2 { padding-block-end: var(--space-4); border-block-end: var(--wb-rule); }

.wb-about__core-intro { width: min(100%, 42rem); }
.wb-about__core-intro .lead { max-width: 68ch; }
.wb-about__core-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); margin-block-start: var(--space-6); }
.wb-about__core-grid > * { min-width: 0; width: 100%; }
.wb-about__fact-panel { position: relative; display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-5); border: var(--wb-rule); background: var(--color-cream-100); }
.wb-about__fact-panel::before { content: ""; position: absolute; inset-inline: var(--space-5); inset-block-start: 0; height: 3px; background: var(--color-petrol-700); }
.wb-about__fact-panel h3, .wb-about__fact-panel p { margin: 0; }
.wb-about__panel-status, .wb-about__opinion-label { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--color-petrol-700); font-family: var(--font-heading); font-size: var(--text-label); font-weight: 700; letter-spacing: .09em; }
.wb-about__panel-status span { color: var(--color-copper-600); }
.wb-about__mini-diagram { position: relative; height: 3.5rem; border-block: 1px solid var(--color-metal-300); }
.wb-about__mini-diagram span { position: absolute; top: 1.5rem; left: 8%; width: 68%; height: .75rem; background: var(--color-oak-200); transform: skewX(-18deg); }
.wb-about__mini-diagram i { position: absolute; top: 1.15rem; left: 42%; width: 1.35rem; height: 1.35rem; border: 3px solid var(--color-metal-300); border-radius: 50%; background: var(--color-cream-50); }
.wb-about__mini-diagram b { position: absolute; right: 3%; top: .6rem; color: var(--color-copper-600); font-size: 1.5rem; }
.wb-about__materials-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.wb-about__materials-columns > * { min-width: 0; }
.wb-about__materials-columns div { padding-inline-start: var(--space-3); border-inline-start: 2px solid var(--color-metal-300); }
.wb-about__materials-columns strong { color: var(--color-petrol-700); font-family: var(--font-heading); font-size: var(--text-label); letter-spacing: .07em; }
.wb-about__materials-columns p { margin-block-start: var(--space-2) !important; font-size: .9rem; }

.wb-about__reading { background: var(--color-petrol-100); }
.wb-about__reading-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(20rem, 5fr); gap: var(--space-6); align-items: start; }
.wb-about__reading-grid > * { min-width: 0; width: 100%; }
.wb-about__analysis-sheet { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-5); padding: clamp(1.25rem, 3vw, 2rem); border: var(--wb-rule); background: var(--color-cream-100); box-shadow: var(--shadow-sheet); }
.wb-about__analysis-sheet > * { margin: 0; }
.wb-about__analysis-sheet h2 { padding-block-end: var(--space-3); border-block-end: var(--wb-rule); width: 100%; }
.wb-about__analysis-copy { max-width: 42rem; }
.wb-about__analysis-copy h3 { text-decoration: underline; text-decoration-color: var(--color-copper-600); text-underline-offset: .28em; }
.wb-about__planning-block { display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: var(--space-3); width: 100%; padding-block-start: var(--space-4); border-block-start: var(--wb-rule); }
.wb-about__planning-block > * { min-width: 0; }
.wb-about__planning-block h3, .wb-about__planning-block ul { margin: 0; }
.wb-about__neutral-list { display: grid; gap: var(--space-2); padding-inline-start: 1.25rem; }
.wb-about__detail-study { margin: 0; }
.wb-about__detail-study .media-frame { border-radius: 0; }
.wb-about__detail-study img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.wb-about__detail-study figcaption { max-width: 55ch; }

.wb-about__method-intro { width: min(100%, 43.75rem); }
.wb-about__method-intro .lead { max-width: 70ch; }
.wb-about__criteria-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); margin-block-start: var(--space-6); border-block-start: 2px solid var(--color-graphite-900); }
.wb-about__criteria-grid > * { min-width: 0; width: 100%; }
.wb-about__criterion { padding: var(--space-5); border-inline-start: 3px solid var(--color-petrol-700); background: var(--color-cream-100); }
.wb-about__criterion span { display: block; margin-block-end: var(--space-3); color: var(--color-copper-600); font-family: var(--font-heading); font-size: var(--text-label); font-weight: 700; letter-spacing: .1em; }
.wb-about__criterion h3 { margin-block-end: var(--space-3); }
.wb-about__criterion p { max-width: 54ch; margin: 0; }

.wb-about__verdict { border-block: 1px solid var(--color-line-oak); background: var(--color-oak-100); }
.wb-about__verdict-grid { display: grid; grid-template-columns: minmax(0, 8fr) minmax(16rem, 4fr); gap: var(--space-6); align-items: start; }
.wb-about__verdict-grid > * { min-width: 0; width: 100%; }
.wb-about__verdict-card { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-5); padding: clamp(1.25rem, 3vw, 2rem); border: 2px solid var(--color-graphite-900); background: var(--color-cream-100); }
.wb-about__verdict-card > * { margin: 0; }
.wb-about__verdict-card h2 { width: 100%; padding-block-end: var(--space-3); border-block-end: var(--wb-rule); }
.wb-about__opinion-label { color: var(--color-copper-600); }
.wb-about__verdict-copy { max-width: 45rem; }
.wb-about__verdict-copy h3 { margin-block-end: var(--space-3); }
.wb-about__verdict-copy p { margin: 0; }
.wb-about__editorial-quote { display: flex; flex-direction: column; gap: var(--space-3); width: min(100%, 39rem); margin: 0; padding: var(--space-5); border-inline-start-color: var(--color-copper-600); }
.wb-about__editorial-quote p { margin: 0; }
.wb-about__editorial-quote p:first-of-type { font-family: var(--font-heading); font-size: clamp(1.55rem, 2.5vw, 2rem); font-weight: 700; line-height: 1.18; }
.wb-about__checklist { width: 100%; padding-block-start: var(--space-4); border-block-start: var(--wb-rule); }
.wb-about__checklist ol { display: grid; gap: var(--space-3); max-width: 47rem; margin: var(--space-3) 0 0; padding-inline-start: 1.75rem; }
.wb-about__checklist li::marker { color: var(--color-copper-600); font-family: var(--font-heading); font-weight: 700; }
.wb-about__legend { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-5); border: 1px solid var(--color-metal-300); background: var(--color-graphite-900); color: var(--color-cream-50); }
.wb-about__legend .technical-label { color: var(--color-oak-100); }
.wb-about__legend > div { display: grid; grid-template-columns: 1.5rem minmax(0, 1fr); gap: var(--space-3); align-items: start; }
.wb-about__legend > div > * { min-width: 0; }
.wb-about__legend b { color: var(--color-copper-600); }
.wb-about__legend p { margin: 0; font-size: var(--text-meta); }

.wb-about__mobile-view { background: var(--color-graphite-900); }
.wb-about__mobile-view .technical-label { color: var(--color-oak-100); }
.wb-about__mobile-view .lead { color: var(--color-cream-100); }
.wb-about__mobile-view h2 { color: var(--color-cream-50); border-color: var(--color-oak-200); }
.wb-about__mobile-intro { width: min(100%, 43rem); }
.wb-about__mobile-intro .lead { max-width: 65ch; }
.wb-about__mobile-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(18rem, 5fr); gap: var(--space-6); margin-block-start: var(--space-6); align-items: start; }
.wb-about__mobile-grid > * { min-width: 0; width: 100%; }
.wb-about__gameplay-figure { margin: 0; }
.wb-about__gameplay-figure .media-frame { border-color: var(--color-metal-300); border-radius: 0; }
.wb-about__gameplay-figure img { aspect-ratio: 16 / 9; object-fit: cover; width: 100%; }
.wb-about__gameplay-figure figcaption { color: var(--color-cream-100); max-width: 55ch; }
.wb-about__gameplay-figure a { color: var(--color-cream-50); }
.wb-about__observation-stack { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
.wb-about__observation-stack > * { min-width: 0; width: 100%; }
.wb-about__observation-stack article { padding: var(--space-4); border: 1px solid var(--color-metal-300); background: var(--color-cream-100); color: var(--color-graphite-900); }
.wb-about__observation-stack article:nth-child(2) { background: var(--color-petrol-100); }
.wb-about__observation-stack span { display: block; margin-block-end: var(--space-2); color: var(--color-petrol-700); font-family: var(--font-heading); font-size: var(--text-label); font-weight: 700; letter-spacing: .09em; }
.wb-about__observation-stack h3 { margin-block-end: var(--space-2); }
.wb-about__observation-stack p { max-width: 48ch; margin: 0; font-size: .95rem; }

.wb-about__challenge { background-image: linear-gradient(90deg, transparent 0, transparent calc(50% - 1px), rgba(35, 97, 106, .06) calc(50% - 1px), rgba(35, 97, 106, .06) 50%, transparent 50%); }
.wb-about__challenge-intro { width: min(100%, 42rem); }
.wb-about__challenge-intro .lead { max-width: 68ch; }
.wb-about__challenge-rail { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); margin-block-start: var(--space-6); }
.wb-about__challenge-rail > * { min-width: 0; width: 100%; }
.wb-about__challenge-rail article { position: relative; display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: var(--space-3); padding-block-start: var(--space-4); border-block-start: 2px solid var(--color-line-oak); }
.wb-about__challenge-rail article > * { min-width: 0; }
.wb-about__challenge-rail h3 { margin-block-end: var(--space-2); }
.wb-about__challenge-rail p { max-width: 52ch; margin: 0; }
.wb-about__challenge-action { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); margin-block-start: var(--space-6); padding-block-start: var(--space-5); border-block-start: var(--wb-rule); }
.wb-about__challenge-action > * { min-width: 0; }
.wb-about__challenge-action p { width: min(100%, 35rem); margin: 0; }

.wb-about__explore { background: var(--color-petrol-100); }
.wb-about__explore-intro { width: min(100%, 42rem); }
.wb-about__explore-intro .lead { max-width: 66ch; }
.wb-about__explore-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); margin-block-start: var(--space-6); }
.wb-about__explore-grid > * { min-width: 0; width: 100%; }
.wb-about__topic-card { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); min-height: 100%; padding: var(--space-5); border: 1px solid var(--color-petrol-700); background: var(--color-cream-100); color: var(--color-graphite-900); text-decoration: none; transition: border-color var(--transition-fast), transform var(--transition-fast), background-color var(--transition-fast); }
.wb-about__topic-card > * { margin: 0; }
.wb-about__topic-card > span { color: var(--color-petrol-700); font-family: var(--font-heading); font-size: var(--text-label); font-weight: 700; letter-spacing: .09em; }
.wb-about__topic-card h3 { font-size: 1.35rem; }
.wb-about__topic-card p { max-width: 42ch; }
.wb-about__topic-card b { margin-block-start: auto; color: var(--color-petrol-700); font-size: .94rem; }
.wb-about__topic-card:hover { border-color: var(--color-graphite-900); background: var(--color-cream-50); transform: translateY(-2px); }
.wb-about__topic-card:hover b { color: var(--color-graphite-900); }

.wb-about__final { border-block-start: 2px solid var(--color-graphite-900); background: var(--color-oak-200); }
.wb-about__final-panel { display: flex; flex-direction: column; align-items: center; gap: var(--space-4); width: min(100%, 45rem); margin-inline: auto; padding: clamp(1.25rem, 3vw, 2rem); border: 1px solid var(--color-graphite-900); background: var(--color-cream-100); text-align: center; }
.wb-about__final-panel > * { margin: 0; }
.wb-about__final-panel h2 { max-width: 22ch; padding-block-end: var(--space-3); border-block-end: var(--wb-rule); }
.wb-about__final-panel > p:not(.wb-about__transparency) { max-width: 52ch; }
.wb-about__transparency { max-width: 62ch; padding-block-start: var(--space-3); border-block-start: var(--wb-rule); color: var(--color-graphite-700); font-size: var(--text-meta); }
.wb-about__transparency strong { color: var(--color-petrol-700); letter-spacing: .07em; }

@media (max-width: 61.24rem) {
  .wb-about__explore-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 56.24rem) {
  .wb-about__hero-grid, .wb-about__reading-grid { grid-template-columns: minmax(0, 1fr); }
  .wb-about__hero-copy { max-width: 44rem; }
  .wb-about__hero-copy .lead { max-width: 46ch; }
  .wb-about__hero-media { max-width: 44rem; }
}

@media (max-width: 54.99rem) {
  .wb-about__verdict-grid, .wb-about__mobile-grid { grid-template-columns: minmax(0, 1fr); }
  .wb-about__legend { grid-template-columns: repeat(3, minmax(0, 1fr)); display: grid; }
  .wb-about__legend .technical-label { grid-column: 1 / -1; }
  .wb-about__mobile-grid { margin-block-start: var(--space-5); }
}

@media (max-width: 51.24rem) {
  .wb-about__core-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wb-about__core-grid > :last-child { grid-column: 1 / -1; }
}

@media (max-width: 47.49rem) {
  .wb-about__criteria-grid { grid-template-columns: minmax(0, 1fr); }
  .wb-about__challenge-rail { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
  .wb-about__challenge-rail article { border-block-start: 0; border-inline-start: 2px solid var(--color-line-oak); padding-block-start: 0; padding-inline-start: var(--space-3); }
}

@media (max-width: 37.49rem) {
  .wb-about__hero { padding-block: var(--space-7); }
  .wb-about__hero-copy { gap: var(--space-3); }
  .wb-about__hero-copy .lead { max-width: none; }
  .wb-about__external-button { width: 100%; }
  .wb-about__core-grid, .wb-about__explore-grid { grid-template-columns: minmax(0, 1fr); }
  .wb-about__core-grid > :last-child { grid-column: auto; }
  .wb-about__materials-columns { grid-template-columns: minmax(0, 1fr); }
  .wb-about__fact-panel, .wb-about__criterion, .wb-about__topic-card { padding: var(--space-4); }
  .wb-about__analysis-sheet, .wb-about__verdict-card, .wb-about__legend { padding: var(--space-4); }
  .wb-about__legend { display: flex; }
  .wb-about__challenge-action { align-items: stretch; }
  .wb-about__challenge-action .button { width: 100%; }
  .wb-about__final-panel { padding: var(--space-4); }
  .wb-about__final-panel .button { width: 100%; }
}