@font-face {
  font-family: Plex;
  src: url("/fonts/IBMPlexSans-Regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: Plex;
  src: url("/fonts/IBMPlexSans-SemiBold.woff2") format("woff2");
  font-weight: 600 800;
  font-display: swap;
}
@font-face {
  font-family: "Plex Mono";
  src: url("/fonts/IBMPlexMono-Regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
:root {
  --ink: #141c22;
  --paper: #f8fcff;
  --surface: #ebf2f9;
  --primary: #2f77ad;
  --on-primary: #fff;
  --rule: #dae2e8;
  --muted: #435665;
  --sans: Plex, system-ui, sans-serif;
  --mono: "Plex Mono", ui-monospace, monospace;
}
* {
  box-sizing: border-box;
}
html {
  color: var(--ink);
  background: var(--paper);
  font-family: var(--sans);
  font-size: 18px;
  line-height: 1.65;
  text-size-adjust: 100%;
}
body {
  margin: 0;
}
h1,
h2,
h3,
p {
  margin: 0 0 24px;
}
h1,
h2,
h3 {
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
h1 {
  font-size: clamp(36px, 5.4vw, 64px);
  max-width: 20ch;
}
h2 {
  font-size: clamp(28px, 3vw, 36px);
}
h3 {
  font-size: 24px;
}
a {
  color: var(--ink);
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}
a:hover {
  text-decoration-thickness: 2px;
}
button,
input,
select {
  font: inherit;
  color: inherit;
}
button,
a,
input,
select {
  touch-action: manipulation;
}
button {
  cursor: pointer;
}
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 4px;
}
img {
  display: block;
  max-width: 100%;
  height: auto;
}
svg {
  max-width: 100%;
}
[hidden] {
  display: none !important;
}
.wrap {
  width: min(1200px, calc(100% - 80px));
  margin: auto;
}
.content-page {
  padding-top: 48px;
  padding-bottom: 64px;
}
.site-header {
  min-height: 88px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  border-bottom: 1px solid var(--rule);
}
.wordmark {
  display: block;
  text-decoration: none;
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -1.4px;
  line-height: 1.05;
}
.wordmark span {
  margin: 0 3px;
  font-weight: 400;
}
.wordmark small {
  display: block;
  font-size: 11px;
  font-family: var(--mono);
  font-weight: 400;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  margin-top: 8px;
}
.site-header nav {
  display: flex;
  gap: 32px;
  font-size: 16px;
}
.site-header nav a {
  padding: 12px 0;
}
.preview-strip {
  background: var(--ink);
  color: var(--paper);
  font: 12px/1.5 var(--mono);
  padding: 10px 20px;
  text-align: center;
}
.preview-strip a {
  color: inherit;
  margin-left: 16px;
}
.skip-link {
  position: absolute;
  top: 0;
  left: 20px;
  transform: translateY(-150%);
  background: var(--ink);
  color: var(--paper);
  padding: 12px 20px;
  z-index: 100;
}
.skip-link:focus {
  transform: none;
}
.eyebrow {
  font: 12px/1.5 var(--mono);
  text-transform: uppercase;
  letter-spacing: 1.3px;
  margin-bottom: 16px;
}
.lead {
  font-size: 22px;
  line-height: 1.55;
  max-width: 68ch;
}
.small,
.byline,
.disclosure {
  font-size: 14px;
  line-height: 1.6;
}
.mono,
code,
.model-code {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}
code {
  font-size: 0.8em;
  overflow-wrap: anywhere;
}
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 24px;
  border: 1px solid var(--primary);
  border-radius: 4px;
  background: var(--primary);
  color: var(--on-primary);
  font-size: 16px;
  text-decoration: none;
  font-weight: 600;
}
.button:hover {
  background: #24608e;
  text-decoration: underline;
}
.text-link {
  font-size: 16px;
  display: inline-block;
  padding: 8px 0;
}
.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px;
}
.editorial-hero {
  padding: 24px 0 64px;
}
.editorial-hero h1 {
  max-width: 17ch;
  font-size: clamp(40px, 5.7vw, 72px);
  margin-bottom: 32px;
}
.editorial-hero .lead {
  max-width: 64ch;
  font-size: 22px;
  margin-bottom: 32px;
}
.lead-feature {
  padding: 40px;
  background: var(--surface);
  border-top: 4px solid var(--ink);
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 48px;
  border-radius: 0 0 8px 8px;
}
.lead-feature h2 {
  font-size: 32px;
  max-width: 22ch;
}
.lead-feature .decision-tool h2 {
  font: 12px/1.5 var(--mono);
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.section-block {
  padding-top: 64px;
}
.section-heading {
  display: flex;
  gap: 24px;
  align-items: end;
  justify-content: space-between;
  margin-bottom: 32px;
}
.section-heading h2,
.section-heading .eyebrow {
  margin-bottom: 0;
}
.section-heading > p {
  align-self: start;
}
.task-links {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--rule);
}
.task-links a {
  padding: 24px 16px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  font-size: 17px;
  border-right: 1px solid var(--rule);
  text-decoration: none;
}
.task-links a:first-child {
  padding-left: 0;
}
.task-links a:last-child {
  border-right: 0;
}
.task-links .mono {
  grid-column: 1/-1;
  font-size: 12px;
}
.task-links a:hover strong {
  text-decoration: underline;
}
.product-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}
.product-card {
  border: 1px solid var(--rule);
  border-radius: 8px;
  overflow: hidden;
  display: grid;
  grid-template-columns: 160px 1fr;
}
.product-identity {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 24px 16px;
  background: var(--surface);
  text-decoration: none;
  gap: 24px;
  min-height: 256px;
}
.product-identity .eyebrow {
  font-size: 10px;
  letter-spacing: 0.7px;
}
.product-model {
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -1px;
  overflow-wrap: anywhere;
}
.model-code {
  font-size: 10px;
  overflow-wrap: anywhere;
}
.image-label {
  font-size: 11px;
  line-height: 1.5;
}
.product-copy {
  padding: 24px;
  min-width: 0;
}
.product-copy h3 {
  font-size: 22px;
  margin-bottom: 16px;
}
.product-copy > p {
  font-size: 16px;
  margin-bottom: 16px;
}
.product-copy .small {
  font-size: 13px;
}
.rating {
  margin: 24px 0;
}
.rating > span {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}
.rating strong {
  font: 24px/1.2 var(--mono);
}
.rating .small {
  margin: 8px 0;
}
.star-strip {
  display: inline-flex;
  gap: 3px;
  align-items: center;
}
.star-strip svg {
  fill: var(--ink);
}
.star-outline {
  fill: transparent;
  stroke: var(--ink);
  stroke-width: 1;
}
.rating-unavailable {
  font: 12px/1.5 var(--mono);
  border-left: 2px solid var(--ink);
  padding-left: 12px;
  margin: 24px 0;
}
.journal-feature,
.method-feature {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 64px;
}
.journal-row {
  padding: 24px 0;
  border-top: 1px solid var(--rule);
}
.journal-row:first-child {
  padding-top: 0;
  border-top: 0;
}
.journal-row h3 {
  margin-bottom: 12px;
  max-width: 36ch;
}
.journal-row p {
  font-size: 16px;
  margin-bottom: 12px;
}
.journal-row .eyebrow {
  font-size: 11px;
}
.journal-row .small {
  font-size: 12px;
}
.method-feature {
  border-top: 1px solid var(--ink);
  margin-top: 64px;
  padding-top: 40px;
}
.method-feature .decision-tool h2 {
  font-size: 20px;
}
.method-feature table {
  font-size: 12px;
}
.reading {
  max-width: 70ch;
  margin: auto;
}
.reading h1 {
  max-width: 22ch;
}
.reading h2 {
  margin: 48px 0 24px;
  font-size: 30px;
}
.reading h3 {
  margin-top: 32px;
}
.reading section {
  margin-bottom: 32px;
}
.reading .lead {
  margin-bottom: 32px;
}
.byline {
  color: var(--muted);
  margin-bottom: 32px;
}
.breadcrumbs {
  font-size: 13px;
  margin-bottom: 32px;
}
.breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0;
  list-style: none;
}
.breadcrumbs li + li:before {
  content: "/";
  margin-right: 8px;
  color: var(--muted);
}
.article-heading {
  margin-bottom: 48px;
  max-width: 900px;
}
.article-heading h1 {
  font-size: clamp(36px, 4.5vw, 56px);
  max-width: 26ch;
}
.detail-layout {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 48px;
  align-items: start;
}
.detail-layout h2 {
  font-size: 28px;
  margin-top: 32px;
}
.detail-layout h3 {
  font-size: 22px;
}
.detail-layout > div {
  min-width: 0;
}
.verdict {
  padding: 32px;
  background: var(--surface);
  border-top: 3px solid var(--ink);
  border-radius: 0 0 8px 8px;
}
.verdict h2 {
  margin-top: 0;
}
dl {
  margin: 24px 0 0;
}
dt {
  font-weight: 600;
  font-size: 15px;
}
dd {
  margin: 8px 0 24px;
}
dd:last-child {
  margin-bottom: 0;
}
.purchase-panel {
  padding: 24px;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: var(--surface);
}
.purchase-panel .rating {
  margin-top: 0;
}
.purchase-panel h2 {
  font-size: 24px;
}
.purchase-panel p {
  font-size: 15px;
}
.purchase-panel .small {
  font-size: 12px;
}
.illustration {
  max-width: 300px;
  margin: 24px auto;
}
.illustration img {
  aspect-ratio: 1;
  object-fit: contain;
}
.notice {
  border-left: 3px solid var(--ink);
  padding-left: 16px;
}
.decision-tool {
  margin: 32px 0;
}
.decision-tool h2 {
  font-size: 26px;
  margin-top: 0;
}
.table-scroll {
  overflow-x: auto;
  max-width: 100%;
}
table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: 14px;
  line-height: 1.5;
}
th,
td {
  padding: 16px 12px;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}
thead th {
  background: var(--surface);
  border-bottom: 1px solid var(--ink);
  font-weight: 600;
}
tbody th {
  font-weight: 600;
}
td:first-child,
th:first-child {
  padding-left: 0;
}
thead th:first-child {
  padding-left: 12px;
}
.decision-tool table {
  min-width: 480px;
}
.reading .decision-tool table {
  min-width: 560px;
}
.lead-feature table {
  min-width: 0;
}
.lead-feature th,
.lead-feature td {
  padding: 16px 0;
}
.lead-feature td {
  padding-left: 24px;
}
.lead-feature .decision-tool {
  margin: 0;
}
.analysis-list {
  border-top: 2px solid var(--ink);
  margin: 32px 0;
}
.analysis-row {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 48px;
  padding: 32px 0;
  border-bottom: 1px solid var(--rule);
}
.analysis-row h2 {
  font-size: 26px;
}
.analysis-row p {
  font-size: 16px;
}
.analysis-row .eyebrow {
  font-size: 12px;
}
.analysis-row .small {
  font-size: 13px;
}
.analysis-row .rating {
  margin: 0;
}
.filters {
  display: grid;
  grid-template-columns: 1fr 1.5fr 1fr auto;
  gap: 16px;
  align-items: end;
  padding: 24px;
  background: var(--surface);
  border-radius: 8px;
}
.filters label {
  font-size: 14px;
  font-weight: 600;
  min-width: 0;
}
.filters input,
.filters select {
  display: block;
  width: 100%;
  margin-top: 8px;
  font-size: 16px;
  min-height: 48px;
  border: 1px solid var(--ink);
  padding: 10px;
  background: var(--paper);
  border-radius: 4px;
}
.guide-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px;
  margin: 32px 0;
}
.guide-card {
  padding: 24px;
  border-top: 2px solid var(--ink);
  background: var(--surface);
}
.guide-card h3 {
  font-size: 24px;
}
.related {
  padding-top: 48px;
}
.site-footer {
  border-top: 1px solid var(--ink);
  padding: 40px 0;
}
.footer-top {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 32px;
  margin-bottom: 32px;
}
.footer-top p {
  font-size: 16px;
}
.footer-top nav {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  font-size: 14px;
}
.site-footer .disclosure {
  border-top: 1px solid var(--rule);
  padding-top: 24px;
  max-width: none;
}
.site-footer .small {
  margin-bottom: 0;
}
.menu-toggle {
  min-height: 44px;
  border: 1px solid var(--ink);
  background: transparent;
  border-radius: 4px;
  padding: 8px 16px;
  font-size: 14px;
}
.metrics,
.workflow {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin: 32px 0;
}
.metrics > div,
.workflow article {
  padding: 20px;
  background: var(--surface);
}
.metrics strong,
.metrics span {
  display: block;
}
.metrics strong {
  font-size: 28px;
}
.metrics span,
.workflow span,
.workflow p {
  font-size: 14px;
}
.workflow h3 {
  font-size: 22px;
  margin: 16px 0;
}
.readiness {
  list-style: none;
  padding: 0;
}
.readiness li {
  display: flex;
  gap: 24px;
  border-top: 1px solid var(--rule);
  padding: 24px 0;
}
.status {
  font-size: 12px;
  font-family: var(--mono);
}
.readiness p {
  margin: 8px 0;
}
.muted {
  color: var(--muted);
}
@media (max-width: 1050px) {
  .product-card {
    grid-template-columns: 1fr;
  }
  .product-identity {
    min-height: 160px;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 16px;
  }
  .product-identity .eyebrow {
    grid-column: 1/-1;
  }
  .image-label {
    grid-column: 1/-1;
  }
  .journal-feature,
  .method-feature {
    gap: 32px;
  }
  .filters {
    grid-template-columns: 1fr 1fr;
  }
  .metrics,
  .workflow {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 760px) {
  .wrap {
    width: calc(100% - 40px);
  }
  .content-page {
    padding-top: 32px;
  }
  .site-header {
    min-height: 88px;
    flex-wrap: wrap;
    gap: 16px;
    padding: 20px 0;
  }
  .site-header nav {
    width: 100%;
    gap: 24px;
    flex-wrap: wrap;
  }
  .site-header.is-enhanced nav {
    display: none;
  }
  .site-header.is-enhanced.menu-open nav {
    display: flex;
  }
  .wordmark {
    font-size: 24px;
  }
  .lead {
    font-size: 19px;
  }
  .editorial-hero {
    padding: 8px 0 40px;
  }
  .editorial-hero h1 {
    font-size: clamp(38px, 8vw, 56px);
    max-width: 17ch;
  }
  .editorial-hero .lead {
    font-size: 19px;
  }
  .lead-feature {
    padding: 24px;
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .lead-feature h2 {
    font-size: 28px;
  }
  .section-block {
    padding-top: 48px;
  }
  .section-heading {
    align-items: start;
    flex-direction: column;
    gap: 16px;
  }
  .task-links {
    grid-template-columns: 1fr 1fr;
  }
  .task-links a,
  .task-links a:first-child {
    padding: 20px 12px;
  }
  .task-links a:nth-child(2) {
    border-right: 0;
  }
  .task-links a:nth-child(-n + 2) {
    border-bottom: 1px solid var(--rule);
  }
  .product-grid,
  .guide-grid,
  .journal-feature,
  .method-feature,
  .detail-layout,
  .footer-top {
    grid-template-columns: 1fr;
  }
  .product-card {
    grid-template-columns: 120px minmax(0, 1fr);
  }
  .product-identity {
    display: flex;
    padding: 20px 12px;
    min-height: 256px;
  }
  .product-model {
    font-size: 22px;
  }
  .product-copy {
    padding: 20px;
  }
  .product-copy h3 {
    font-size: 20px;
  }
  .product-copy > p {
    font-size: 15px;
  }
  .journal-feature,
  .method-feature {
    gap: 32px;
  }
  .method-feature {
    margin-top: 48px;
  }
  .article-heading {
    margin-bottom: 32px;
  }
  .article-heading h1 {
    font-size: 36px;
  }
  .reading h2 {
    font-size: 26px;
  }
  .detail-layout {
    gap: 32px;
  }
  .purchase-panel .illustration {
    max-width: 180px;
  }
  .analysis-row {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .analysis-row h2 {
    font-size: 24px;
  }
  .analysis-row .rating {
    margin-bottom: 16px;
  }
  .filters {
    padding: 20px;
    grid-template-columns: 1fr;
  }
  .filters .button {
    justify-self: start;
  }
  .reading .decision-tool table {
    font-size: 13px;
  }
  .footer-top {
    gap: 24px;
  }
  .footer-top > p {
    margin: 0;
  }
  .preview-strip {
    font-size: 10px;
    text-align: left;
  }
  .preview-strip a {
    margin-left: 0;
    display: inline-block;
    padding: 4px;
  }
  .metrics,
  .workflow {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 390px) {
  .product-card {
    grid-template-columns: 1fr;
  }
  .product-identity {
    min-height: 140px;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 12px;
  }
  .metrics,
  .workflow {
    grid-template-columns: 1fr;
  }
  .lead-feature {
    padding: 20px;
  }
  .lead-feature table {
    font-size: 13px;
  }
  .task-links a {
    font-size: 15px;
  }
  .rating > span {
    gap: 8px;
  }
}
@media (prefers-reduced-motion: no-preference) {
  a,
  button {
    transition:
      background-color 0.15s ease,
      text-decoration-thickness 0.15s ease;
  }
}
@media print {
  .preview-strip,
  .site-header,
  .site-footer,
  .filters {
    display: none;
  }
  .wrap {
    width: 100%;
  }
  .detail-layout {
    display: block;
  }
  .purchase-panel {
    break-inside: avoid;
  }
  .product-grid {
    display: block;
  }
  a {
    color: #000;
  }
}
.menu-toggle {
  display: none;
}
.text-link {
  min-height: 44px;
}
.site-header {
  min-height: 72px;
}
.editorial-hero h1 {
  font-size: clamp(40px, 5.4vw, 64px);
}
.footer-top nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
@media (max-width: 760px) {
  .site-header.is-enhanced .menu-toggle {
    display: block;
  }
  .editorial-hero h1 {
    font-size: clamp(38px, 8vw, 56px);
  }
}
.journal-feature > div,
.method-feature > div,
.lead-feature > div,
.lead-feature > section {
  min-width: 0;
}

/* The concise product brief keeps the decision in one reading frame. */
.product-brief {
  margin: 0 auto;
  max-width: 1180px;
}
.product-back {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  margin-bottom: 12px;
  font-size: 14px;
}
.product-brief__header {
  margin: 0 0 28px;
}
.product-brief__header h1 {
  max-width: 25ch;
  font-size: clamp(36px, 4.8vw, 62px);
  margin-bottom: 0;
}
.product-brief__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(24px, 5vw, 72px);
  align-items: start;
}
.product-brief__visual {
  min-width: 0;
  margin: 0;
  padding: clamp(22px, 4vw, 54px);
  background: var(--surface);
  border-radius: 8px;
}
.product-brief__visual img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
}
.product-brief__visual figcaption {
  margin-top: 16px;
  font: 12px var(--mono);
  color: var(--muted);
}
.product-brief__copy > section {
  border-bottom: 1px solid var(--rule);
  padding: 0 0 17px;
  margin-bottom: 20px;
}
.product-brief__copy h2 {
  font-size: 20px;
  margin-bottom: 6px;
}
.product-brief__copy p { margin: 0; }
.product-brief__score .rating { margin: 10px 0 16px; }
.product-brief__score .rating .small { display: none; }
.score-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}
.score-cell {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  min-height: 87px;
  padding: 10px;
  background: var(--paper);
}
.score-cell span { font-size: 11px; line-height: 1.2; }
.score-cell strong { font: 22px/1 var(--mono); }
.score-cell small { font-size: 11px; color: var(--muted); }
.score-method {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 12px;
}
.product-brief__action .button { width: 100%; }
.product-brief__fine,
.affiliate-near-link { font-size: 13px; line-height: 1.45; color: var(--muted); }
.affiliate-near-link { margin-bottom: 8px !important; }
.product-brief__fine { margin-top: 8px !important; }
/* The Journal is a working wall: different papers, marginalia and connected ideas. */
.content-page:has(> .journal-board) { width: 100%; max-width: none; padding: 0; }
.journal-board {
  --board-ink: #263632;
  --hand: "Segoe Print", "Bradley Hand", cursive;
  color: #ebe8db;
  background-color: #25312f;
  background-image: radial-gradient(ellipse at 25% 10%, #58706a38, transparent 60%), radial-gradient(#e0e7d20b .6px, transparent .7px);
  background-size: auto, 5px 5px;
  border-top: 8px solid #192322;
  border-bottom: 8px solid #192322;
  box-shadow: inset 0 10px 26px #00000025;
  overflow: clip;
}
.journal-board__inner { width: min(1320px, calc(100% - 120px)); margin: auto; padding: 76px 0 64px; }
.board-hand { font: 19px/1.6 var(--hand); letter-spacing: -.03em; }
.journal-board__header { display: grid; grid-template-columns: 1fr 330px; align-items: center; gap: 60px; margin-bottom: 90px; }
.journal-board__header .eyebrow { color: #b9c8bd; font-size: 10px; letter-spacing: .16em; }
.journal-board__header h1 { font-size: clamp(64px, 8.4vw, 128px); font-weight: 600; line-height: .95; letter-spacing: -.065em; margin: 24px 0 16px; }
.journal-board__dot { color: #e1b76d; }
.journal-board__signature { margin: 0 0 0 7px; color: #bfd0c3; transform: rotate(-2deg); }
.journal-board__intro { position: relative; padding: 32px 32px 24px; color: var(--board-ink); background: #e9e4d4; transform: rotate(5deg); box-shadow: 5px 10px 10px #00000045; }
.journal-board__intro::after { content: ''; position: absolute; inset: auto 0 -6px; height: 8px; background: #e9e4d4; clip-path: polygon(0 0,100% 0,100% 30%,96% 100%,92% 35%,85% 85%,78% 40%,72% 100%,62% 40%,57% 85%,47% 15%,38% 100%,29% 30%,21% 70%,12% 20%,7% 80%,0 30%); }
.journal-board__intro p { margin: 0 0 15px; font: 20px/1.6 var(--hand); }
.journal-board__intro ul { padding: 0; margin: 0; list-style: none; font-size: 16px; }
.journal-board__intro li { margin: 5px 0; }
.journal-board__intro li::before { content: '↳'; margin-right: 12px; color: #a54831; }
.journal-board__pin { position: absolute; left: 50%; top: 7px; width: 12px; height: 12px; border-radius: 50%; background: radial-gradient(circle at 30% 25%,#e49073,#9c4130 65%); box-shadow: 1px 4px 4px #00000045; }
.board-header-arrow { position: absolute; width: 140px; height: 85px; right: 90%; bottom: -38px; color: #d5b46d; transform: rotate(-12deg); }
.board-cluster { position: relative; margin: 0 0 100px; }
.board-cluster__header { position: relative; margin-bottom: 46px; }
.board-cluster__header > p { font: 10px/1.5 var(--mono); letter-spacing: .14em; color: #aabeb4; margin: 0 0 12px; }
.board-cluster__header h2 { display: inline; font: 26px/1.5 var(--hand); letter-spacing: -.04em; color: #e4e7d8; padding-bottom: 10px; border-bottom: 1px dashed #a8c0b25c; }
.board-cluster__header > span { display: inline-block; margin-left: 28px; color: #d5b46d; font-size: 16px; transform: rotate(3deg); }
.journal-notes { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: start; gap: 24px; isolation: isolate; }
.board-threads { position: absolute; z-index: -1; width: 100%; height: 100%; inset: 0; stroke: #c7cbb0; stroke-width: 2; opacity: .35; pointer-events: none; transition: opacity .25s ease; }
.board-cluster:has(.journal-note:is(:hover,:focus-within)) .board-threads { opacity: .9; }
.journal-note { position: relative; min-width: 0; color: var(--board-ink); background: #efda92; transform: rotate(-3deg); box-shadow: 2px 3px 2px #00000030, 7px 16px 20px -8px #00000070; transition: transform .25s ease, box-shadow .25s ease; transform-origin: 50% 12%; }
.journal-note::before { content: ''; position: absolute; z-index: 1; width: 98px; height: 30px; background: #e9dfbda8; border-left: 1px dotted #fff7; border-right: 1px dotted #fff7; top: -14px; left: calc(50% - 49px); transform: rotate(-5deg); box-shadow: 0 1px 2px #00000012; pointer-events: none; }
.journal-note::after { content: ''; position: absolute; pointer-events: none; inset: 0; background: linear-gradient(170deg, #ffffff10, transparent 60%, #68431812); }
.journal-note--0 { grid-column: 1 / span 5; min-height: 500px; }
.journal-note--1 { grid-column: 8 / span 4; margin-top: 68px; background: repeating-linear-gradient(transparent 0 28px,#6e94b820 28px 29px),#eeeade; transform: rotate(5deg); }
.journal-note--1::before { width: 12px; height: 12px; border: 0; border-radius: 50%; left: 20px; top: 12px; background: radial-gradient(circle at 30% 25%,#e28e72,#aa4e36 65%); box-shadow: 2px 3px 3px #0005; }
.journal-note--1::after { inset: auto 0 0 auto; width: 32px; height: 32px; background: linear-gradient(135deg,#c2bbac,#f6f3e9 50%,#25312f 51%); }
.journal-note--2 { grid-column: 2 / span 4; margin-top: 50px; color: #e5edf0; background-color: #294c5e; background-image: linear-gradient(#cde7e410 1px,transparent 1px),linear-gradient(90deg,#cde7e410 1px,transparent 1px); background-size: 18px 18px; transform: rotate(-5deg); }
.journal-note--2::before { background: #dbded0bf; transform: rotate(9deg); left: auto; right: 18px; }
.journal-note--3 { grid-column: 7 / span 6; margin-top: 12px; background: #ddc2a8; transform: rotate(2deg); }
.journal-note--3::before { left: 14px; transform: rotate(-22deg); }
.journal-note--3::after { inset: auto 0 -7px; height: 8px; background: #ddc2a8; clip-path: polygon(0 0,100% 0,100% 40%,96% 70%,93% 10%,88% 100%,80% 30%,72% 80%,66% 10%,57% 65%,50% 20%,45% 100%,35% 30%,24% 80%,17% 30%,10% 100%,0 40%); }
.journal-note:hover, .journal-note:focus-within { z-index: 3; transform: rotate(0) translateY(-7px); box-shadow: 2px 5px 2px #00000025, 10px 23px 25px -8px #00000070; }
.journal-note__link { position: relative; z-index: 1; display: flex; flex-direction: column; padding: 28px 30px; color: inherit; text-decoration: none; min-height: inherit; }
.journal-note__link:focus-visible { outline: 3px solid #e3aa61; outline-offset: 7px; }
.journal-note__top, .journal-note__bottom { display: flex; align-items: center; justify-content: space-between; gap: 12px; font: 10px/1.5 var(--mono); }
.journal-note__top { text-transform: uppercase; letter-spacing: .04em; }
.journal-note__top span:last-child { white-space: nowrap; }
.journal-note__drawing { display: flex; align-items: center; gap: 12px; margin: 14px 0 8px; }
.journal-sketch { flex: 0 0 auto; width: 120px; height: 128px; transform: rotate(-5deg); }
.journal-note__aside { font: 17px/1.6 var(--hand); color: #884432; transform: rotate(-5deg); }
.journal-note--2 .journal-note__aside { color: #e2c68c; }
.journal-note--1 .journal-note__drawing { flex-direction: row-reverse; }
.journal-note--1 .journal-sketch { width: 87px; height: 94px; }
.journal-note--1 .journal-note__aside, .journal-note--2 .journal-note__aside { font-size: 15px; }
.journal-note--3 .journal-sketch { width: 130px; height: 138px; }
.journal-note h2 { font-size: clamp(27px, 2.9vw, 40px); line-height: 1.08; letter-spacing: -.045em; margin: 0 0 20px; }
.journal-note--1 h2, .journal-note--2 h2 { font-size: clamp(24px, 2.25vw, 31px); }
.journal-note p { font-size: 14px; line-height: 1.6; margin: 0 0 26px; }
.journal-note__bottom { margin-top: auto; padding-top: 16px; border-top: 1px solid #26363235; }
.journal-note--2 .journal-note__bottom { border-color: #d5e6e540; }
.journal-note__bottom > span:last-child { font-size: 11px; white-space: nowrap; }
.journal-note__bottom > span:last-child > span { display: inline-block; font-size: 23px; margin-left: 4px; transition: transform .2s ease; }
.journal-note:hover .journal-note__bottom > span:last-child > span { transform: translate(3px,-3px); }
.board-diagram { position: relative; grid-column: 2 / span 7; margin: 20px 0 0; padding: 24px 26px 14px; color: #314947; background-color: #e4e5da; background-image: linear-gradient(#75979320 1px,transparent 1px),linear-gradient(90deg,#75979320 1px,transparent 1px); background-size: 16px 16px; transform: rotate(-2deg); box-shadow: 4px 8px 9px #0005; }
.board-diagram::before { content: ''; position: absolute; width: 70px; height: 22px; top: -10px; right: 28px; background: #cccdb5b8; transform: rotate(12deg); }
.board-diagram figcaption { font: 10px var(--mono); text-transform: uppercase; letter-spacing: .1em; }
.board-diagram svg { display: block; width: 100%; height: auto; margin: 12px 0 0; }
.board-diagram svg text { stroke: none; fill: currentColor; text-anchor: middle; font: 11px var(--mono); }
.board-diagram__canvas { overflow-x: auto; }
.board-diagram__canvas:focus-visible { outline: 2px solid #314947; outline-offset: 3px; }
.board-diagram__hint { display: none; }
.board-diagram .board-hand { font-size: 15px; margin: 0; text-align: right; color: #95513b; }
.journal-coming { max-width: 650px; margin: 40px auto 100px; padding: 40px; color: var(--board-ink); background: #efda92; transform: rotate(-2deg); box-shadow: 7px 16px 20px -8px #00000070; }
.journal-coming .board-diagram { margin-top: 24px; }
.journal-board__signoff { display: flex; align-items: center; justify-content: space-between; gap: 30px; color: #baccc2; border-top: 1px dashed #a8c0b240; padding-top: 30px; }
.journal-board__signoff a { color: #e3d1a7; font: 12px var(--mono); min-height: 44px; display: inline-flex; align-items: center; }
@media (max-width: 1100px) {
  .journal-board__inner { width: calc(100% - 80px); }
  .journal-board__header { grid-template-columns: 1fr 280px; gap: 35px; }
  .journal-note--0 { grid-column: 1 / span 6; }
  .journal-note--1 { grid-column: 8 / span 5; }
  .journal-note--2 { grid-column: 1 / span 5; }
  .journal-note--3 { grid-column: 7 / span 6; }
  .journal-note__link { padding: 24px; }
  .journal-note__drawing { flex-wrap: wrap; }
  .journal-note__aside { flex: 1 1 100px; }
  .journal-note__bottom { align-items: flex-start; flex-wrap: wrap; }
}
@media (max-width: 760px) {
  .journal-board__inner { width: calc(100% - 56px); padding-top: 48px; }
  .journal-board__header { display: block; margin-bottom: 70px; }
  .journal-board__header h1 { font-size: clamp(58px,12vw,86px); }
  .journal-board__intro { width: min(300px,90%); margin: 52px 0 0 auto; }
  .journal-board__signature { font-size: 16px; }
  .board-cluster { margin-bottom: 76px; }
  .board-cluster__header h2 { display: block; font-size: 23px; }
  .board-cluster__header > span { margin: 12px 0 0; }
  .journal-notes { display: flex; flex-direction: column; gap: 42px; padding: 0 4px; }
  .journal-note { width: 100%; margin: 0; min-height: auto; }
  .journal-note--1 { width: 91%; align-self: flex-end; transform: rotate(3deg); }
  .journal-note--2 { width: 93%; transform: rotate(-3deg); }
  .journal-note--3 { transform: rotate(2deg); }
  .journal-note h2 { font-size: 32px; }
  .journal-note--1 h2, .journal-note--2 h2 { font-size: 28px; }
  .journal-note__aside { font-size: 16px; }
  .journal-sketch { width: 105px; height: 112px; }
  .board-threads { display: none; }
  .board-diagram { width: 100%; margin: 0; padding: 22px 16px; }
  .board-diagram svg { min-width: 570px; }
  .board-diagram__hint { display: block; font: 9px var(--mono); margin: 8px 0 16px; }
  .journal-board__signoff { display: block; }
  .journal-board__signoff .board-hand { font-size: 16px; }
  .journal-board__signoff a { margin-top: 20px; }
  .journal-coming { padding: 26px; }
}
@media (prefers-reduced-motion: reduce) {
  .journal-note, .board-threads, .journal-note__bottom > span:last-child > span { transition: none; }
  .journal-note:hover, .journal-note:focus-within { transform: none; }
}
@media (max-width: 850px) {
  .product-brief__layout { grid-template-columns: 1fr; }
  .product-brief__visual { max-width: 680px; }
}
@media (max-width: 520px) {
  .score-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .score-cell { min-height: 75px; }
}

.content-page:has(> .operator-comic) { width: min(1400px, calc(100% - 64px)); padding-top: 32px; }
.operator-comic { --comic-ink:#202a2d; --comic-paper:#f0e7d4; --comic-orange:#ce8034; color:var(--comic-ink); }
.comic-masthead { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:0 0 22px; }
.comic-masthead a { display:flex; align-items:center; gap:14px; color:inherit; text-decoration:none; font:10px/1.6 var(--mono); }
.comic-masthead > span { font:10px var(--mono); letter-spacing:.08em; }
.comic-hero { display:grid; grid-template-columns:1fr 1fr; border:3px solid var(--comic-ink); background:var(--comic-paper); }
.comic-hero__art { position:relative; min-width:0; margin:0; overflow:hidden; background-color:#99b4be; background-image:radial-gradient(#202a2d28 1px,transparent 1px); background-size:7px 7px; border-right:3px solid var(--comic-ink); display:flex; flex-direction:column; justify-content:flex-end; }
.comic-hero__art::before { content:''; width:80%; aspect-ratio:1; position:absolute; top:10%; left:10%; background:#e8b95b; border:3px solid var(--comic-ink); border-radius:50%; }
.comic-hero__art > .comic-panel-label { position:absolute; top:18px; left:18px; z-index:2; background:var(--comic-paper); padding:9px 12px; border:2px solid var(--comic-ink); }
.comic-hero__art > img { position:relative; z-index:1; width:100%; height:660px; object-fit:contain; object-position:bottom; margin-top:55px; }
.comic-hero__art figcaption { position:relative; z-index:2; padding:14px 18px; background:var(--comic-paper); border-top:3px solid var(--comic-ink); font:11px var(--mono); }
.comic-speech { position:absolute; z-index:3; top:110px; right:22px; background:#fff8e9; border:3px solid var(--comic-ink); border-radius:48%; padding:20px 30px; font-size:clamp(19px,2vw,28px); font-weight:600; line-height:1.15; transform:rotate(5deg); box-shadow:3px 4px 0 #202a2d; }
.comic-speech::after { content:''; position:absolute; left:15px; bottom:-19px; width:25px; height:28px; background:#fff8e9; border-right:3px solid var(--comic-ink); border-bottom:3px solid var(--comic-ink); transform:skew(-22deg) rotate(34deg); }
.comic-hero__copy { padding:clamp(28px,4vw,58px); align-self:center; }
.comic-hero__copy .eyebrow { font-size:10px; margin-bottom:20px; }
.comic-hero__copy h1 { font-size:clamp(62px,7vw,102px); line-height:.9; letter-spacing:-.06em; margin:0 0 28px; }
.comic-hero__copy h1 span { color:#a35028; }
.comic-hero__lead { font-size:21px; line-height:1.5; }
.comic-hero__copy nav { display:flex; flex-wrap:wrap; gap:12px 24px; align-items:center; margin:30px 0; }
.comic-hero__copy .button { background:var(--comic-ink); color:#fff8e9; box-shadow:4px 4px 0 #bd9878; border-radius:0; }
.comic-signature { font:18px/1.6 'Segoe Print','Bradley Hand',cursive; transform:rotate(-2deg); margin-bottom:0; color:#99502c; }
.comic-panel-label { margin:0; font:10px/1.4 var(--mono); letter-spacing:.05em; }
.comic-strip { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin:20px 0 72px; }
.comic-panel { border:3px solid var(--comic-ink); padding:24px 28px 28px; background:#f0e7d4; box-shadow:4px 5px 0 #202a2d; }
.comic-panel:nth-child(2) { background:#e5bd8c; }
.comic-panel:nth-child(3) { background:#dce7df; }
.comic-panel svg { display:block; width:105px; height:120px; margin:18px auto; transform:rotate(-4deg); }
.comic-panel h2 { font-size:30px; line-height:1.05; letter-spacing:-.04em; margin:0 0 14px; }
.comic-panel > p:last-child { font-size:15px; line-height:1.6; margin:0; }
.operator-backstory { display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:clamp(36px,8vw,120px); max-width:1100px; margin:auto; }
.operator-backstory h2 { font-size:clamp(36px,4vw,52px); line-height:1.05; letter-spacing:-.05em; }
.operator-code { align-self:start; padding:32px; background:#f0e7d4; border:2px solid var(--comic-ink); transform:rotate(2deg); box-shadow:5px 6px 0 #202a2d; }
.operator-code img { margin-bottom:20px; }
.operator-code ul { padding:0; list-style:none; margin:22px 0; font:19px/1.8 'Segoe Print','Bradley Hand',cursive; }
.operator-code a { font:12px var(--mono); }
.operator-avatar-note { font-size:12px; color:var(--muted); }
.content-page:has(> .product-shell) { width:min(1540px,calc(100% - 64px)); }
.product-shell { margin-inline:auto; }
.product-shell__columns { display:grid; grid-template-columns:minmax(0,1fr); gap:28px; }
.product-shell__content { min-width:0; }
.ad-rail:empty { display:none; }
.ad-slot { border:1px dashed #bcc6c9; background:#edf1ef; padding:10px; color:#697579; margin:24px 0; }
.ad-slot > span { display:block; text-align:center; font:9px var(--mono); letter-spacing:.12em; text-transform:uppercase; }
.ad-slot__space { min-height:90px; display:grid; place-items:center; }
.ad-slot__space span { font-size:26px; opacity:.3; }
.ad-rail .ad-slot { position:sticky; top:28px; margin:0; }
.ad-rail .ad-slot__space { min-height:540px; }
.ad-slot--footer { width:min(880px,100%); margin:28px auto 20px; }
.operator-take { background:#eee5d3; border-left:4px solid #202a2d; padding:26px 30px; margin:40px 0 60px; }
.operator-take__byline { display:flex; gap:12px; align-items:center; font:10px var(--mono); letter-spacing:.04em; }
.operator-take > p { font-size:21px; line-height:1.5; }
.operator-take .operator-take__limit { font-size:14px; }
.operator-take > a { font:12px var(--mono); }
.product-brief__copy > .operator-take { margin:0 0 24px; padding:22px; border:2px solid var(--ink); }
.product-brief__copy .operator-take__byline h2 { margin:0; font:600 18px var(--sans); letter-spacing:-.02em; }
.product-brief__copy .operator-take > p { margin:16px 0; font-size:17px; line-height:1.6; }
.product-brief__copy .product-brief__score { display:flex; flex-wrap:wrap; align-items:center; gap:0 18px; }
.product-brief__score h2 { flex-basis:100%; }
.product-brief__score .rating strong .small { display:inline; }
.product-brief__score .score-method { margin-left:auto; }
.product-shell .related-kit { margin-top:64px; }
.related-reading { margin-top:28px; padding-top:22px; border-top:1px solid var(--rule); }
.related-reading a { display:inline-flex; align-items:center; min-height:44px; margin-right:24px; font-size:14px; }
.related-kit > h2 { font-size:40px; letter-spacing:-.04em; margin:8px 0 24px; }
.related-kit > div { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.related-kit a { display:flex; flex-direction:column; position:relative; padding:18px; background:#eaf0ef; text-decoration:none; color:inherit; }
.related-kit img { width:100%; height:auto; aspect-ratio:1; object-fit:contain; margin-bottom:18px; mix-blend-mode:multiply; }
.related-kit a > span:not(.related-kit__arrow) { font:10px var(--mono); margin-bottom:6px; }
.related-kit strong { font-size:18px; padding-right:22px; line-height:1.25; }
.related-kit__arrow { position:absolute; right:16px; bottom:16px; font-size:22px; }
.related-kit a:hover { background:#dee8e7; }
@media(min-width:1280px) { .product-shell__columns:has(.ad-slot) { grid-template-columns:160px minmax(0,1fr) 160px; } }
@media(max-width:1279px) { .ad-rail { display:none; } }
@media(max-width:700px) { .content-page:has(> .product-shell) { width:calc(100% - 36px); } .related-kit > div { grid-template-columns:1fr; } .related-kit a { display:grid; grid-template-columns:110px minmax(0,1fr); gap:8px 18px; align-items:center; } .related-kit img { grid-row:1 / 3; margin:0; } .related-kit strong { font-size:18px; align-self:start; } .related-kit a > span:not(.related-kit__arrow) { align-self:end; } .operator-take { padding:22px; } .operator-take > p { font-size:18px; } }
@media(max-width:950px) { .comic-hero__art > img { height:570px; } .comic-speech { top:125px; padding:15px 22px; } .comic-hero__copy { padding:30px; } .comic-hero__lead { font-size:18px; } .operator-backstory { grid-template-columns:1fr 290px; gap:40px; } }
@media(max-width:700px) { .content-page:has(> .operator-comic) { width:calc(100% - 36px); } .comic-masthead > span { display:none; } .comic-hero { grid-template-columns:1fr; } .comic-hero__art { border-right:0; border-bottom:3px solid var(--comic-ink); } .comic-hero__art > img { height:430px; } .comic-speech { top:80px; font-size:20px; } .comic-hero__copy h1 { font-size:76px; } .comic-strip { grid-template-columns:1fr; margin-bottom:54px; } .comic-panel { padding:22px 24px; } .operator-backstory { grid-template-columns:1fr; } .operator-code { max-width:420px; width:95%; } }

/* The Operator's print palette, shared by every public surface. */
:root { --ink:#202a2d; --paper:#f5f0e5; --surface:#e9e0cd; --primary:#895326; --on-primary:#fff8e9; --rule:#beb7a7; --muted:#526064; --comic-blue:#9fb6bd; --comic-amber:#e7bb72; --comic-sage:#c9d7c9; }
html { background:var(--paper); }
.site-header { border-bottom:2px solid var(--ink); }
.site-header nav a { font:12px var(--mono); text-decoration:none; border-bottom:1px solid transparent; padding-block:8px; }
.site-header nav a:hover { border-color:var(--ink); }
.wordmark span { color:#a66a34; }
.button { background:var(--ink); color:var(--on-primary); border:2px solid var(--ink); border-radius:0; box-shadow:3px 4px 0 #b49972; }
.button:hover { background:#35474b; }
.menu-toggle, .filters input, .filters select { border-radius:0; border:1px solid var(--ink); background:#fff8e9; }
.site-footer { border-top:2px solid var(--ink); }
.ad-slot { background:#ece5d7; border-color:#b9ab94; }
.analysis-list { gap:18px; }
.analysis-row { border:2px solid var(--ink); padding:28px; background:#eee6d5; box-shadow:4px 4px 0 #c0b6a0; }
.analysis-row:nth-child(even) { background:#dce5e0; }
.guide-card { border:2px solid var(--ink); border-radius:0; box-shadow:4px 4px 0 #c0b6a0; background:#eee6d5; }
.product-brief__visual { position:relative; border:2px solid var(--ink); border-radius:0; background-color:#e9e0cd; background-image:radial-gradient(#202a2d1d 1px,transparent 1px); background-size:6px 6px; box-shadow:4px 5px 0 #bfb09a; }
.product-brief__visual img { mix-blend-mode:multiply; }
.score-cell { border-color:#bcb29d; }
.operator-take, .related-kit a { border:2px solid var(--ink); box-shadow:3px 4px 0 #c0b6a0; }
.operator-take { border-left:5px solid var(--ink); }
.related-kit a { background:#e8e0ce; }
.related-kit a:hover { background:#decda9; }
.reading { background:#fff8e9; padding:clamp(24px,4vw,54px); border:2px solid var(--ink); box-shadow:5px 6px 0 #c6baa4; }
.reading h1 { max-width:22ch; }
.reading .decision-tool { background:#ece4d1; }
.reading .journal-row { border-top:1px solid #bcb29d; }
.breadcrumbs { font:11px/1.8 var(--mono); gap:12px; }
.note-route { display:flex; justify-content:space-between; gap:18px; margin:18px 0; font:11px var(--mono); }
.note-continuation { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin:36px 0; }
.note-continuation a { padding:20px; border:2px solid var(--ink); background:#dfebdf; text-decoration:none; font-weight:600; line-height:1.4; }
.note-continuation small { display:block; margin-bottom:10px; font:9px var(--mono); }
@media(max-width:700px) { .reading { padding:24px 20px; } .analysis-row { padding:22px; } .note-continuation { grid-template-columns:1fr; } }

.journal-hub,.journal-topic { --board-ink:#263632; --hand:'Segoe Print','Bradley Hand',cursive; }
.is-journal-hub .content-page { width:100%; max-width:none; padding:0; }
html.sections-controlled { overflow-y:hidden; overscroll-behavior-y:none; scroll-behavior:auto; }
.sections-controlled .journal-hub { touch-action:pan-x pinch-zoom; }
.is-journal-hub .site-footer { height:var(--journal-height,100svh); overflow-y:auto; display:flex; flex-direction:column; justify-content:center; }
.journal-scene { --topic-color:var(--comic-amber); height:var(--journal-height,100svh); padding:30px max(28px,5vw) 84px; display:flex; flex-direction:column; gap:22px; overflow:hidden; background:var(--paper); }
.journal-scene:first-child { height:calc(var(--journal-height,100svh) - var(--journal-chrome,88px)); }
.journal-scene--blue,.journal-topic--blue { --topic-color:var(--comic-blue); }
.journal-scene--sage,.journal-topic--sage { --topic-color:var(--comic-sage); }
.journal-scene__masthead { display:flex; justify-content:space-between; align-items:flex-start; }
.journal-scene__masthead h1,.journal-scene__masthead a { font-size:34px; line-height:1; letter-spacing:-.04em; margin:0 0 8px; text-decoration:none; font-weight:600; }
.journal-scene__masthead h1 span,.journal-scene__masthead a span { color:#a66935; }
.journal-scene__masthead p,.journal-scene__counter { font:9px var(--mono); letter-spacing:.07em; margin:0; }
.journal-category { display:grid; grid-template-columns:1.05fr 1fr; flex:1; min-height:0; border:3px solid var(--ink); box-shadow:6px 7px 0 #202a2d; background:var(--topic-color); overflow:hidden; transform-origin:center; }
.journal-category { cursor:pointer; }
.journal-category.is-entering { z-index:2; }
.journal-category__copy { align-self:center; padding:clamp(28px,4vw,64px); min-width:0; }
.journal-category h2 { font-size:clamp(44px,5vw,80px); line-height:1; letter-spacing:-.055em; max-width:11ch; margin:18px 0 22px; }
.journal-category__description { font-size:18px; max-width:36ch; line-height:1.5; margin:0 0 22px; }
.topic-subtopics { display:flex; flex-wrap:wrap; padding:0; margin:20px 0 26px; list-style:none; gap:8px; }
.topic-subtopics li { background:#fff8e94d; border:1px solid #202a2d80; padding:5px 9px; font:10px/1.5 var(--mono); }
.journal-category__count { font:10px var(--mono); margin:18px 0 0; }
.journal-category__art { position:relative; border-left:3px solid var(--ink); padding:clamp(22px,3vw,42px); display:flex; flex-direction:column; justify-content:center; gap:24px; background-color:#202a2d; background-image:radial-gradient(#6e82844f 1px,transparent 1px); background-size:8px 8px; overflow:hidden; }
.category-question { position:relative; background:#f4ead4; padding:22px 62px 22px 24px; border:2px solid var(--ink); transform:rotate(-3deg); box-shadow:5px 6px 0 #0004; }
.category-question > span,.category-teaser > span { font:9px var(--mono); letter-spacing:.06em; display:block; margin-bottom:10px; }
.category-question p { font:24px/1.25 'Segoe Print','Bradley Hand',cursive; margin:0; }
.category-question img { position:absolute; right:14px; bottom:18px; }
.journal-category__art .board-diagram { margin:0; grid-column:auto; width:100%; padding:18px; transform:rotate(2deg); min-width:0; }
.journal-category__art .board-diagram__canvas { overflow:hidden; }
.journal-category__art .board-diagram svg { min-width:0; width:100%; }
.journal-category__art .board-diagram__hint { display:none; }
.category-teasers { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.category-teaser { background:var(--topic-color); padding:18px; transform:rotate(-3deg); border:2px solid #111; box-shadow:4px 5px 0 #0005; }
.category-teaser:nth-child(2) { transform:rotate(4deg); background:#f0e7d4; }
.category-teaser strong { font-size:20px; line-height:1.1; letter-spacing:-.03em; display:block; }
.journal-scene__bottom { display:flex; justify-content:space-between; align-items:center; gap:24px; }
.journal-scene__bottom .board-hand { font-size:16px; }
.journal-scene__bottom a { font:11px var(--mono); }
.journal-dock { position:fixed; z-index:20; bottom:18px; left:50%; transform:translateX(-50%); display:flex; gap:4px; background:#fff8e9; border:2px solid var(--ink); padding:5px; box-shadow:3px 4px 0 #202a2d; }
.journal-dock a { display:flex; align-items:center; gap:10px; padding:9px 15px; text-decoration:none; font:11px var(--mono); }
.journal-dock a span { font-size:9px; opacity:.65; }
.journal-dock a[aria-current] { background:var(--ink); color:#fff8e9; }
.content-page:has(> .journal-topic) { width:min(1320px,calc(100% - 64px)); }
.journal-topic { --topic-color:var(--comic-amber); }
.journal-topic .breadcrumbs { display:flex; margin-bottom:28px; }
.journal-topic__hero { display:grid; grid-template-columns:1.1fr 1fr; border:3px solid var(--ink); background:var(--topic-color); box-shadow:5px 6px 0 #202a2d; }
.journal-topic__hero > div { padding:clamp(28px,4vw,58px); }
.journal-topic__hero h1 { font-size:clamp(46px,5vw,72px); letter-spacing:-.055em; max-width:12ch; }
.journal-topic__hero aside { border-left:3px solid var(--ink); padding:36px; display:flex; flex-direction:column; justify-content:center; gap:16px; min-width:0; }
.journal-topic__hero .board-hand { font-size:24px; margin:0; }
.journal-topic__hero .board-diagram { margin:0; width:100%; padding:16px; min-width:0; }
.journal-topic__hero .board-diagram svg { min-width:0; width:100%; }
.journal-topic__hero .board-diagram__hint { display:none; }
.journal-path { margin:60px 0 42px; }
.journal-path ol { display:flex; padding:0; margin:0; list-style:none; gap:16px; }
.journal-path li { flex:1; min-width:0; }
.journal-path a { display:block; font-size:13px; line-height:1.35; text-decoration:none; border-top:2px solid var(--ink); padding-top:14px; }
.journal-path span { display:block; margin-bottom:10px; font:11px var(--mono); color:#895326; }
.journal-topic__notes.journal-notes { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:44px; background:#293a40; border:3px solid var(--ink); padding:44px; background-image:radial-gradient(#79909340 1px,transparent 1px); background-size:8px 8px; }
.journal-topic__notes .journal-note { grid-column:auto; width:100%; margin:0; scroll-margin-top:32px; }
.journal-topic__notes .journal-note__link { min-height:460px; }
.journal-topic__next { display:flex; flex-wrap:wrap; gap:24px; padding:42px 0 0; align-items:center; }
.journal-topic__next .board-hand { margin-right:auto; }
.journal-topic__next a { font:12px var(--mono); }
@media(max-height:800px) and (min-width:761px) { .journal-scene { padding-top:20px; gap:18px; } .journal-category h2 { font-size:56px; } .journal-category__copy { padding:28px 36px; } .journal-category__art { gap:18px; padding:22px; } .category-question { padding:16px 62px 16px 20px; } .category-question p { font-size:20px; } .category-teaser { padding:14px; } .category-teaser strong { font-size:16px; } .journal-category__description { font-size:16px; margin-bottom:16px; } .topic-subtopics { margin:12px 0 18px; } }
@media(max-width:760px) { .journal-scene { padding:22px 20px 88px; gap:18px; } .journal-scene__masthead h1,.journal-scene__masthead a { font-size:28px; } .journal-scene__masthead p { max-width:30ch; line-height:1.5; } .journal-category { grid-template-columns:1fr; overflow:auto; } .journal-category__copy { padding:26px; } .journal-category h2 { font-size:44px; max-width:12ch; margin:12px 0 18px; } .journal-category__description { font-size:15px; } .journal-category__art { border-left:0; border-top:3px solid var(--ink); padding:24px; gap:18px; } .category-question p { font-size:21px; } .category-teasers { display:none; } .journal-scene__bottom .board-hand { display:none; } .journal-scene__bottom { justify-content:flex-end; } .journal-dock a { padding:9px 12px; gap:6px; } .content-page:has(> .journal-topic) { width:calc(100% - 36px); } .journal-topic__hero { grid-template-columns:1fr; } .journal-topic__hero aside { border-left:0; border-top:3px solid var(--ink); padding:26px; } .journal-path ol { display:grid; grid-template-columns:1fr 1fr; gap:22px; } .journal-topic__notes.journal-notes { padding:22px 18px; grid-template-columns:1fr; gap:30px; } .journal-topic__notes .journal-note__link { min-height:0; } }
@media(max-width:760px) and (min-height:760px) { .journal-category__art { max-height:220px; } .journal-category__art .board-diagram { display:none; } }
@media(max-width:760px) { .journal-category { overflow:hidden; display:block; background-image:url('/operator-mark.svg'); background-size:40px; background-repeat:no-repeat; background-position:right 18px top 18px; } .journal-category__copy { height:100%; overflow-y:auto; padding:22px; } .journal-category__copy > .eyebrow { padding-right:38px; font-size:9px; } .journal-category h2 { font-size:38px; margin:12px 0 14px; } .journal-category__description { font-size:14px; line-height:1.45; margin-bottom:16px; } .journal-category .topic-subtopics { margin:12px 0 18px; } .journal-category__art { display:none; } }