/* ============================================================
   Big Wrinkly Brain — design system
   Logo-derived palette (orange / blue / navy / cream / spark yellow)
   Chris Ware lineage: dot-grid paper, framed panels, numbered annotations,
   tiny precise text labels, diagrammatic illustrations.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Bowlby+One:wght@400&family=Archivo+Black:wght@400&family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&family=DM+Mono:ital,wght@0,400;0,500;1,400&display=swap');

:root {
  /* Logo-derived palette */
  --cream:        #f4ead0;
  --cream-light:  #f9f1d9;
  --cream-deep:   #eddec0;
  --orange:       #e87024;
  --orange-deep:  #c95818;
  --orange-glow:  #f08b3a;
  --blue:         #4a98b8;
  --blue-deep:    #2d6a85;
  --blue-soft:    #6fb1ca;
  --navy:         #1c2030;
  --navy-soft:    #2a2f44;
  --yellow:       #f4cb27;
  --yellow-deep:  #d6ad14;
  --green:        #5a8540;
  --green-soft:   #e8efd9;
  --red:          #9a3a26;
  --red-soft:     #f4d8cc;

  /* Type */
  --poster:  'Bowlby One', 'Archivo Black', sans-serif;
  --display: 'Archivo Black', 'Bowlby One', sans-serif;
  --body:    'DM Sans', system-ui, sans-serif;
  --mono:    'DM Mono', ui-monospace, monospace;

  /* Dot-grid paper texture */
  --dots: radial-gradient(circle, rgba(28, 32, 48, 0.085) 1px, transparent 1.2px);
  --dots-size: 22px 22px;
}

* { box-sizing: border-box; }

html, body { margin: 0; background: var(--cream); }

body {
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.55;
  color: var(--navy);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "kern", "ss01", "cv11";
}

::selection { background: var(--orange); color: var(--cream); }

a {
  color: var(--orange-deep);
  text-decoration: none;
  font-weight: 600;
  border-bottom: 2px solid currentColor;
  padding-bottom: 1px;
  transition: color .12s, border-color .12s;
}
a:hover { color: var(--orange); }

img, iframe, svg { display: block; max-width: 100%; }

h1, h2, h3, h4 { margin: 0; font-family: var(--display); font-weight: 400; letter-spacing: -0.005em; line-height: 1.05; }

/* Reusable: paper texture for cream sections */
.bwb-paper { background-color: var(--cream); background-image: var(--dots); background-size: var(--dots-size); }
.bwb-paper-light { background-color: var(--cream-light); background-image: var(--dots); background-size: var(--dots-size); }

/* Reusable: framed panel — a Ware-y thin border with corner annotation */
.bwb-frame {
  position: relative;
  border: 2px solid var(--navy);
  background: var(--cream);
}
.bwb-frame::before,
.bwb-frame::after {
  content: '';
  position: absolute;
  width: 0.6rem; height: 0.6rem;
  background: var(--orange);
}
.bwb-frame::before { top: -2px; left: -2px; }
.bwb-frame::after  { bottom: -2px; right: -2px; }

/* ============================================================
   MASTHEAD
   ============================================================ */

.bwb-masthead {
  background: var(--navy);
  color: var(--cream);
  position: relative;
  border-top: 0.5rem solid var(--orange);
  border-bottom: 0.5rem solid var(--blue);
}
.bwb-mast-grid {
  max-width: 72rem;
  margin: 0 auto;
  padding: 1.75rem 2rem 2rem;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1.5rem;
}
.bwb-mast-meta {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cream);
  opacity: 0.65;
  align-self: center;
}
.bwb-mast-meta.right { text-align: right; }
.bwb-mast-meta strong { color: var(--orange); font-weight: 500; opacity: 1; }

.bwb-logo {
  display: block;
  text-align: center;
  border: 0;
  text-decoration: none;
}
.bwb-logo img {
  max-width: 24rem;
  width: 100%;
  height: auto;
  margin: 0 auto;
}
/* Fallback if logo.png not present: render the stacked wordmark */
.bwb-logo-fallback {
  display: block;
  font-family: var(--poster);
  line-height: 0.88;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}
.bwb-logo-fallback .l1, .bwb-logo-fallback .l2, .bwb-logo-fallback .l3 {
  display: block;
  font-size: clamp(2.2rem, 5.5vw, 3.2rem);
}
.bwb-logo-fallback .l1 { color: var(--cream); }
.bwb-logo-fallback .l2 { color: var(--blue-soft); }
.bwb-logo-fallback .l3 { color: var(--orange); }

.bwb-mast-bottom {
  background: var(--orange);
  color: var(--navy);
  padding: 0.7rem 2rem;
  text-align: center;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 500;
}
.bwb-mast-bottom strong { color: var(--navy); font-weight: 700; }

.bwb-nav {
  background: var(--cream-deep);
  border-bottom: 2px solid var(--navy);
}
.bwb-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 72rem;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}
.bwb-nav li { display: flex; }
.bwb-nav a {
  display: block;
  padding: 0.85rem 1.6rem;
  font-family: var(--display);
  font-size: 0.9rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--navy);
  border: 0;
  border-right: 1px solid rgba(28, 32, 48, 0.16);
  transition: background .1s, color .1s;
}
.bwb-nav li:first-child a { border-left: 1px solid rgba(28, 32, 48, 0.16); }
.bwb-nav a:hover { background: var(--navy); color: var(--yellow); }

/* ============================================================
   PAGE WRAPPER
   ============================================================ */

main.bwb-page { padding: 0; margin: 0; }

/* ============================================================
   HOMEPAGE — HERO
   ============================================================ */

.bwb-hero {
  background-color: var(--cream);
  background-image: var(--dots);
  background-size: var(--dots-size);
  padding: 6rem 2rem 5rem;
  position: relative;
  overflow: hidden;
}
.bwb-hero::before {
  content: '';
  position: absolute;
  top: -5rem; right: -5rem;
  width: 22rem; height: 22rem;
  background: var(--blue);
  border-radius: 50%;
  opacity: 0.96;
}
.bwb-hero::after {
  content: '';
  position: absolute;
  bottom: -3rem; left: -3rem;
  width: 11rem; height: 11rem;
  background: var(--orange);
  transform: rotate(15deg);
}
.bwb-hero-inner {
  position: relative;
  z-index: 1;
  max-width: 52rem;
  margin: 0 auto;
  text-align: center;
}
.bwb-hero h1 {
  font-family: var(--poster);
  font-size: clamp(2.8rem, 7.5vw, 5.4rem);
  line-height: 0.95;
  color: var(--navy);
  letter-spacing: -0.025em;
  margin: 0;
  text-transform: uppercase;
}
.bwb-hero h1 .alt { color: var(--orange); display: block; }
.bwb-hero-lede {
  font-family: var(--body);
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.45;
  color: var(--navy-soft);
  max-width: 34rem;
  margin: 1.75rem auto 2.25rem;
}
.bwb-hero-meta {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cream);
  background: var(--navy);
  padding: 0.5rem 1rem;
  font-weight: 500;
}
.bwb-hero-meta strong { color: var(--yellow); font-weight: 500; }

/* small decorative sparkle accents next to hero, à la the logo's twinkles */
.bwb-spark {
  display: inline-block;
  color: var(--yellow);
  font-family: var(--poster);
  vertical-align: super;
  font-size: 0.6em;
  margin: 0 0.2em;
}

/* ============================================================
   FEATURED — navy block with orange/blue elements
   ============================================================ */

.bwb-featured {
  background: var(--navy);
  color: var(--cream);
  padding: 4.5rem 2rem;
  position: relative;
  overflow: hidden;
  border-top: 0.4rem solid var(--orange);
  border-bottom: 0.4rem solid var(--blue);
}
.bwb-featured::before {
  content: '';
  position: absolute;
  top: -3rem; right: -3rem;
  width: 17rem; height: 17rem;
  background: var(--blue);
  border-radius: 50%;
  opacity: 0.92;
}
.bwb-featured::after {
  content: '';
  position: absolute;
  bottom: 1.5rem; left: 50%;
  width: 4rem; height: 4rem;
  background: var(--yellow);
  transform: rotate(45deg) translate(0, 1rem);
  opacity: 0.85;
  margin-left: -16rem;
  display: none;
}
@media (min-width: 64rem) { .bwb-featured::after { display: block; } }
.bwb-featured-inner {
  position: relative;
  z-index: 1;
  max-width: 64rem;
  margin: 0 auto;
}

.bwb-featured-header {
  margin-bottom: 2.5rem;
}
.bwb-featured-tag {
  display: block;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
  font-weight: 500;
  color: var(--yellow);
}
.bwb-featured-header h2 {
  font-family: var(--poster);
  font-size: clamp(2rem, 4.8vw, 3.2rem);
  text-transform: uppercase;
  color: var(--cream);
  letter-spacing: -0.02em;
  margin: 0;
}

.bwb-featured-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.75rem;
}
@media (min-width: 36rem) {
  .bwb-featured-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 56rem) {
  .bwb-featured-grid { grid-template-columns: repeat(3, 1fr); }
}

.bwb-featured-card {
  background: var(--navy-soft);
  border: 2px solid var(--cream);
  padding: 1.75rem 1.5rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  position: relative;
  transition: transform .15s ease, border-color .15s ease;
  min-height: 16rem;
}
.bwb-featured-card:hover {
  transform: translateY(-3px);
  border-color: var(--orange);
}
.bwb-featured-card-num {
  position: absolute;
  top: -1rem;
  left: 1.25rem;
  background: var(--orange);
  color: var(--navy);
  font-family: var(--poster);
  font-size: 1.4rem;
  line-height: 1;
  padding: 0.4rem 0.7rem;
  letter-spacing: -0.02em;
}
.bwb-featured-card-cat {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--yellow);
  font-weight: 500;
  margin-top: 0.6rem;
}
.bwb-featured-card h3 {
  font-family: var(--poster);
  font-size: clamp(1.4rem, 2.4vw, 1.8rem);
  line-height: 1.0;
  text-transform: uppercase;
  letter-spacing: -0.015em;
  margin: 0;
}
.bwb-featured-card h3 a { color: var(--cream); border: 0; }
.bwb-featured-card h3 a:hover { color: var(--orange); }
.bwb-featured-card-hook {
  font-family: var(--body);
  font-size: 0.98rem;
  line-height: 1.5;
  color: var(--cream);
  opacity: 0.88;
  margin: 0;
  flex: 1;
}
.bwb-featured-card-read {
  display: inline-block;
  margin-top: 0.4rem;
  color: var(--orange);
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  border: 0;
  align-self: flex-start;
}
.bwb-featured-card-read:hover { color: var(--yellow); }

/* ============================================================
   CATEGORIES — tighter Ware grid
   ============================================================ */

.bwb-categories {
  background-color: var(--cream);
  background-image: var(--dots);
  background-size: var(--dots-size);
  padding: 5rem 2rem;
}
.bwb-categories-inner { max-width: 64rem; margin: 0 auto; }
.bwb-categories h2 {
  font-family: var(--poster);
  font-size: clamp(2rem, 4.5vw, 3rem);
  text-transform: uppercase;
  color: var(--navy);
  letter-spacing: -0.02em;
  margin: 0 0 0.4rem;
}
.bwb-categories .sub {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--orange-deep);
  margin-bottom: 3rem;
}
.bwb-cat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: 0;
  border: 2px solid var(--navy);
}
.bwb-cat-grid a {
  position: relative;
  padding: 1.6rem 1.3rem;
  border: 0;
  border-right: 2px solid var(--navy);
  border-bottom: 2px solid var(--navy);
  color: var(--navy);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-height: 8.5rem;
  justify-content: space-between;
  overflow: hidden;
  transition: transform .12s ease;
}
.bwb-cat-grid a:nth-child(4n+1) { background: var(--yellow); }
.bwb-cat-grid a:nth-child(4n+2) { background: var(--blue); color: var(--cream); }
.bwb-cat-grid a:nth-child(4n+3) { background: var(--orange); color: var(--navy); }
.bwb-cat-grid a:nth-child(4n+4) { background: var(--cream-deep); color: var(--navy); }
.bwb-cat-grid a:hover { transform: translateY(-2px); }
.bwb-cat-grid .num {
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  font-weight: 500;
  opacity: 0.75;
}
.bwb-cat-grid .name {
  font-family: var(--display);
  font-size: 1.25rem;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: -0.01em;
}

/* ============================================================
   EXPLAINER — what's on every page
   ============================================================ */

.bwb-explainer {
  background: var(--blue);
  color: var(--cream);
  padding: 5rem 2rem;
}
.bwb-explainer-inner { max-width: 64rem; margin: 0 auto; }
.bwb-explainer h2 {
  font-family: var(--poster);
  font-size: clamp(2rem, 4.5vw, 3rem);
  text-transform: uppercase;
  color: var(--cream);
  letter-spacing: -0.02em;
  margin: 0 0 0.4rem;
}
.bwb-explainer .sub {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--yellow);
  margin-bottom: 3rem;
}
.bwb-explainer ol {
  list-style: none;
  counter-reset: ex;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}
@media (min-width: 48rem) {
  .bwb-explainer ol { grid-template-columns: 1fr 1fr; gap: 1.25rem 1.5rem; }
}
.bwb-explainer li {
  counter-increment: ex;
  background: var(--cream);
  color: var(--navy);
  padding: 1.4rem 1.5rem 1.4rem 4.5rem;
  position: relative;
  min-height: 7rem;
  border: 2px solid var(--navy);
}
.bwb-explainer li::before {
  content: counter(ex);
  position: absolute;
  left: 1.3rem;
  top: 1.2rem;
  font-family: var(--poster);
  font-size: 2.4rem;
  line-height: 1;
  color: var(--orange);
}
.bwb-explainer li strong {
  display: block;
  font-family: var(--display);
  font-size: 1.05rem;
  text-transform: uppercase;
  letter-spacing: -0.005em;
  margin-bottom: 0.3rem;
  color: var(--navy);
}
.bwb-explainer li span {
  font-family: var(--body);
  font-size: 0.96rem;
  color: var(--navy-soft);
  line-height: 1.5;
}

/* ============================================================
   THE DISPATCH — email signup
   ============================================================ */

.bwb-dispatch-section {
  background: var(--navy);
  color: var(--cream);
  padding: 5rem 2rem;
  position: relative;
  overflow: hidden;
  border-top: 0.4rem solid var(--blue);
}
.bwb-dispatch-section::before {
  content: '';
  position: absolute;
  bottom: -5rem; right: -5rem;
  width: 18rem; height: 18rem;
  background: var(--orange);
  transform: rotate(45deg);
  opacity: 0.92;
}
.bwb-dispatch-section::after {
  content: '';
  position: absolute;
  top: 2rem; left: 50%;
  width: 7rem; height: 7rem;
  background: var(--blue);
  border-radius: 50%;
  margin-left: -22rem;
  display: none;
}
@media (min-width: 64rem) { .bwb-dispatch-section::after { display: block; } }
.bwb-dispatch-inner { position: relative; z-index: 1; max-width: 46rem; margin: 0 auto; }
.bwb-dispatch-kicker {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--yellow);
  margin-bottom: 0.8rem;
  font-weight: 500;
}
.bwb-dispatch-inner h2 {
  font-family: var(--poster);
  font-size: clamp(2rem, 5vw, 3.2rem);
  line-height: 0.95;
  text-transform: uppercase;
  margin: 0 0 1rem;
  letter-spacing: -0.02em;
  color: var(--cream);
}
.bwb-dispatch-inner h2 em {
  font-style: normal;
  color: var(--orange);
}
.bwb-dispatch-inner p {
  font-family: var(--body);
  font-size: 1.1rem;
  line-height: 1.5;
  color: var(--cream);
  opacity: 0.9;
  margin: 0 0 1.5rem;
  max-width: 32rem;
}
.bwb-dispatch-inner form { display: flex; gap: 0; flex-wrap: wrap; }
.bwb-dispatch-inner input[type="email"] {
  flex: 1 1 16rem;
  padding: 1rem 1.2rem;
  border: 0;
  background: var(--cream);
  color: var(--navy);
  font-family: var(--body);
  font-size: 1rem;
  font-weight: 500;
  outline: none;
}
.bwb-dispatch-inner input::placeholder { color: var(--navy-soft); opacity: 0.55; }
.bwb-dispatch-inner button {
  padding: 1rem 1.5rem;
  background: var(--orange);
  border: 0;
  color: var(--navy);
  font-family: var(--display);
  font-size: 0.85rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .12s;
}
.bwb-dispatch-inner button:hover { background: var(--yellow); }
.bwb-dispatch-inner small {
  display: block;
  margin-top: 1rem;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--cream);
  opacity: 0.55;
}

/* ============================================================
   SCIENCE PAGE
   ============================================================ */

.bwb-article-head {
  background-color: var(--cream);
  background-image: var(--dots);
  background-size: var(--dots-size);
  padding: 4rem 2rem 3rem;
  border-bottom: 0.5rem solid var(--navy);
  position: relative;
  overflow: hidden;
}
.bwb-article-head::before {
  content: '';
  position: absolute;
  top: 50%; right: -4rem;
  width: 14rem; height: 14rem;
  background: var(--blue);
  border-radius: 50%;
  margin-top: -7rem;
  opacity: 0.92;
}
.bwb-article-head-inner { position: relative; z-index: 1; max-width: 60rem; margin: 0 auto; }
.bwb-article-kicker {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  margin-bottom: 1.5rem;
}
.bwb-article-kicker .chip {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
  background: var(--navy);
  color: var(--cream);
  padding: 0.35rem 0.7rem;
}
.bwb-article-kicker .chip.orange { background: var(--orange); color: var(--navy); }
.bwb-article-kicker .chip.yellow { background: var(--yellow); color: var(--navy); }
.bwb-article-kicker .chip.blue   { background: var(--blue); color: var(--cream); }

.bwb-article-head h1 {
  font-family: var(--poster);
  font-size: clamp(2.5rem, 6.5vw, 4.8rem);
  line-height: 0.95;
  text-transform: uppercase;
  color: var(--navy);
  letter-spacing: -0.025em;
  margin: 0;
  max-width: 42rem;
}
.bwb-article-standfirst {
  font-family: var(--body);
  font-size: 1.3rem;
  line-height: 1.45;
  font-weight: 500;
  color: var(--navy-soft);
  margin: 1.5rem 0 0;
  max-width: 36rem;
}

.bwb-article-body { background: var(--cream); }
.bwb-article-body > section { padding: 4rem 2rem; }
.bwb-article-body .inner { max-width: 44rem; margin: 0 auto; }

/* Video block — its own row beneath the article head */
.bwb-video-section {
  background-color: var(--cream-light);
  background-image: var(--dots);
  background-size: var(--dots-size);
}
.bwb-video-wrap { max-width: 24rem; margin: 0 auto; }
.bwb-video-frame {
  aspect-ratio: 9 / 16;
  border: 0.4rem solid var(--navy);
  background: var(--navy);
  position: relative;
  box-shadow: 0.4rem 0.4rem 0 var(--orange);
}
.bwb-video-frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.bwb-video-cap {
  margin-top: 1.2rem;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--navy-soft);
  text-align: center;
  font-weight: 500;
}

/* Section labels */
.bwb-block-label {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 1.5rem;
}
.bwb-block-label .num {
  background: var(--navy);
  color: var(--yellow);
  padding: 0.35rem 0.55rem;
  font-weight: 500;
}
.bwb-block-label .ttl { color: var(--orange-deep); }

/* The Big Fact — navy block with orange */
.bwb-fact-section {
  background: var(--navy);
  color: var(--cream);
  padding: 4rem 2rem;
  position: relative;
  overflow: hidden;
}
.bwb-fact-section::before {
  content: '';
  position: absolute;
  top: -2rem; right: -2rem;
  width: 9rem; height: 9rem;
  background: var(--orange);
  border-radius: 50%;
  opacity: 0.9;
}
.bwb-fact-section .inner { position: relative; z-index: 1; max-width: 44rem; margin: 0 auto; }
.bwb-fact-section .bwb-block-label .num { background: var(--orange); color: var(--navy); }
.bwb-fact-section .bwb-block-label .ttl { color: var(--yellow); }
.bwb-fact-text {
  font-family: var(--display);
  font-size: clamp(1.6rem, 3.5vw, 2.4rem);
  line-height: 1.15;
  color: var(--cream);
  letter-spacing: -0.01em;
}
.bwb-fact-text em { color: var(--yellow); font-style: normal; }

/* Mechanism — cream with diagram */
.bwb-explain-section {
  background-color: var(--cream);
  background-image: var(--dots);
  background-size: var(--dots-size);
  padding: 4rem 2rem;
}
.bwb-explain-section .inner { max-width: 44rem; margin: 0 auto; }
.bwb-explain-section h2 {
  font-family: var(--display);
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
  text-transform: uppercase;
  color: var(--navy);
  letter-spacing: -0.015em;
  margin: 0 0 1.2rem;
}
.bwb-explain-section p {
  font-family: var(--body);
  font-size: 1.12rem;
  line-height: 1.6;
  color: var(--navy-soft);
  margin: 0 0 1.2rem;
}
.bwb-explain-section p strong { color: var(--orange-deep); font-weight: 700; }

.bwb-diagram {
  margin: 2.5rem auto 0;
  max-width: 36rem;
}
.bwb-diagram .wrap {
  background: var(--cream-light);
  border: 2px solid var(--navy);
  padding: 1rem 1rem 0.5rem;
  position: relative;
}
.bwb-diagram .wrap::before {
  content: 'FIG. 1A';
  position: absolute;
  top: -0.7rem; left: 1rem;
  background: var(--cream);
  padding: 0 0.5rem;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  font-weight: 600;
  color: var(--orange-deep);
}
.bwb-diagram .wrap::after {
  content: 'PLATE I';
  position: absolute;
  top: -0.7rem; right: 1rem;
  background: var(--cream);
  padding: 0 0.5rem;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  font-weight: 600;
  color: var(--navy);
}
.bwb-diagram svg { width: 100%; height: auto; }
.bwb-diagram .cap {
  text-align: center;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--navy-soft);
  margin-top: 0.8rem;
  font-weight: 500;
}
.bwb-diagram .cap strong { color: var(--orange-deep); font-weight: 600; }

/* Why It Matters — blue */
.bwb-matters-section {
  background: var(--blue);
  color: var(--cream);
  padding: 4rem 2rem;
}
.bwb-matters-section .inner { max-width: 44rem; margin: 0 auto; }
.bwb-matters-section .bwb-block-label .num { background: var(--cream); color: var(--blue-deep); }
.bwb-matters-section .bwb-block-label .ttl { color: var(--yellow); }
.bwb-matters-section h2 {
  font-family: var(--display);
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
  text-transform: uppercase;
  color: var(--cream);
  letter-spacing: -0.015em;
  margin: 0 0 1.2rem;
}
.bwb-matters-section p {
  font-family: var(--body);
  font-size: 1.12rem;
  line-height: 1.6;
  margin: 0 0 1rem;
  color: var(--cream);
}

/* Misconception — orange */
.bwb-misc-section {
  background: var(--orange);
  color: var(--navy);
  padding: 4rem 2rem;
}
.bwb-misc-section .inner { max-width: 44rem; margin: 0 auto; }
.bwb-misc-section .bwb-block-label .num { background: var(--navy); color: var(--orange); }
.bwb-misc-section .bwb-block-label .ttl { color: var(--navy); }
.bwb-misc-section h2 {
  font-family: var(--display);
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
  text-transform: uppercase;
  color: var(--navy);
  letter-spacing: -0.015em;
  margin: 0 0 1.2rem;
}
.bwb-misc-section p {
  font-family: var(--body);
  font-size: 1.12rem;
  line-height: 1.6;
  margin: 0 0 1rem;
  color: var(--navy);
}
.bwb-misc-section .crossout {
  display: inline-block;
  position: relative;
  font-weight: 700;
}
.bwb-misc-section .crossout::after {
  content: '';
  position: absolute;
  left: -0.2em; right: -0.2em; top: 50%;
  height: 3px;
  background: var(--navy);
  transform: rotate(-3deg);
}

/* Vocab — cream-light */
.bwb-vocab-section {
  background-color: var(--cream-light);
  background-image: var(--dots);
  background-size: var(--dots-size);
  padding: 4rem 2rem;
}
.bwb-vocab-section .inner { max-width: 44rem; margin: 0 auto; }
.bwb-vocab-section h2 {
  font-family: var(--display);
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
  text-transform: uppercase;
  letter-spacing: -0.015em;
  margin: 0 0 1.2rem;
  color: var(--navy);
}
.bwb-vocab {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  padding: 0;
  margin: 0;
}
.bwb-vocab li {
  font-family: var(--display);
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  background: var(--navy);
  color: var(--yellow);
  padding: 0.5rem 0.8rem;
  border: 0;
}

/* Quiz — cream blocks */
.bwb-quiz-section {
  background-color: var(--cream);
  background-image: var(--dots);
  background-size: var(--dots-size);
  padding: 4rem 2rem;
}
.bwb-quiz-section .inner { max-width: 44rem; margin: 0 auto; }
.bwb-quiz-section h2 {
  font-family: var(--display);
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
  text-transform: uppercase;
  letter-spacing: -0.015em;
  margin: 0 0 0.5rem;
  color: var(--navy);
}
.bwb-quiz-section .sub {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--orange-deep);
  margin-bottom: 2rem;
}
.bwb-quiz-q {
  background: var(--cream-light);
  border: 2px solid var(--navy);
  margin: 1.25rem 0;
  display: grid;
  grid-template-columns: auto 1fr;
}
.bwb-quiz-q .qnum {
  background: var(--orange);
  color: var(--navy);
  font-family: var(--poster);
  font-size: 2.2rem;
  width: 4.5rem;
  display: grid;
  place-items: center;
  border-right: 2px solid var(--navy);
}
.bwb-quiz-q:nth-child(odd) .qnum { background: var(--blue); color: var(--cream); }
.bwb-quiz-q .qbody { padding: 1.25rem 1.5rem; }
.bwb-quiz-question {
  font-family: var(--display);
  font-size: 1.1rem;
  line-height: 1.25;
  color: var(--navy);
  margin: 0 0 0.8rem;
  letter-spacing: -0.005em;
}
.bwb-quiz-choice {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0.35rem 0;
  padding: 0.55rem 0.85rem;
  background: var(--cream);
  border: 2px solid var(--navy);
  cursor: pointer;
  font-family: var(--body);
  font-size: 1rem;
  color: var(--navy);
  font-weight: 500;
  transition: background .1s, color .1s;
}
.bwb-quiz-choice:hover { background: var(--navy); color: var(--yellow); }
.bwb-quiz-choice input { accent-color: var(--orange); }

/* Result states — applied by quiz.js after submit or on revisit */
.bwb-quiz-choice {
  position: relative;
  transition: background .12s, border-color .12s, color .12s;
}
.bwb-quiz-choice.is-correct {
  background: var(--green-soft);
  border-color: var(--green);
  color: var(--navy);
}
.bwb-quiz-choice.is-correct::after {
  content: '✓';
  position: absolute;
  right: 0.85rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--green);
  font-weight: 700;
  font-size: 1.2rem;
}
.bwb-quiz-choice.is-your-wrong {
  background: var(--red-soft);
  border-color: var(--red);
  color: var(--navy);
}
.bwb-quiz-choice.is-your-wrong::after {
  content: '✗';
  position: absolute;
  right: 0.85rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--red);
  font-weight: 700;
  font-size: 1.2rem;
}
.bwb-quiz-choice.is-disabled,
.bwb-quiz-choice.is-disabled:hover { cursor: default; }
.bwb-quiz-choice.is-disabled { background: var(--cream); color: var(--navy); }
.bwb-quiz-choice.is-disabled.is-correct,
.bwb-quiz-choice.is-disabled.is-correct:hover { background: var(--green-soft); }
.bwb-quiz-choice.is-disabled.is-your-wrong,
.bwb-quiz-choice.is-disabled.is-your-wrong:hover { background: var(--red-soft); }
.bwb-quiz-choice.is-disabled:hover { background: var(--cream); color: var(--navy); }

/* Banner across the top of the quiz — score, prior-attempt prompt, errors */
.bwb-quiz-banner {
  background: var(--navy);
  color: var(--cream);
  padding: 1rem 1.25rem;
  margin: 0 0 1.5rem;
  border-left: 0.4rem solid var(--orange);
  font-family: var(--display);
  font-size: 1.05rem;
  letter-spacing: -0.005em;
}
.bwb-quiz-banner[data-kind="success"] {
  border-left-color: var(--green);
  background: var(--green);
}
.bwb-quiz-banner[data-kind="error"] {
  border-left-color: var(--red);
  background: var(--red);
}

/* Per-question explanation row, shown after submit */
.bwb-quiz-explanation {
  margin-top: 0.85rem;
  padding: 0.85rem 1rem;
  background: var(--cream-deep);
  border-left: 0.3rem solid var(--orange);
  font-family: var(--body);
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--navy);
  font-style: italic;
}

/* Submit / retake controls */
.bwb-quiz-actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 1.75rem;
}
.bwb-quiz-submit,
.bwb-quiz-retake {
  font-family: var(--display);
  font-size: 0.9rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 0.95rem 1.6rem;
  border: 2px solid var(--navy);
  cursor: pointer;
  transition: background .12s, color .12s, opacity .12s;
}
.bwb-quiz-submit {
  background: var(--navy);
  color: var(--yellow);
}
.bwb-quiz-submit:not(:disabled):hover {
  background: var(--orange);
  border-color: var(--orange);
  color: var(--navy);
}
.bwb-quiz-submit:disabled {
  background: var(--cream-deep);
  border-color: var(--cream-deep);
  color: var(--navy-soft);
  cursor: not-allowed;
  opacity: 0.65;
}
.bwb-quiz-retake {
  background: transparent;
  color: var(--navy);
}
.bwb-quiz-retake:hover {
  background: var(--navy);
  color: var(--yellow);
}

/* Activity — blue block with cream card */
.bwb-activity-section {
  background: var(--blue);
  color: var(--cream);
  padding: 4rem 2rem;
}
.bwb-activity-section .inner { max-width: 44rem; margin: 0 auto; }
.bwb-activity-section h2 {
  font-family: var(--display);
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
  text-transform: uppercase;
  letter-spacing: -0.015em;
  margin: 0 0 1.5rem;
  color: var(--cream);
}
.bwb-activity-section .bwb-block-label .num { background: var(--cream); color: var(--blue-deep); }
.bwb-activity-section .bwb-block-label .ttl { color: var(--yellow); }
.bwb-activity {
  background: var(--cream);
  color: var(--navy);
  border: 2px solid var(--navy);
  padding: 1.5rem 1.75rem;
  position: relative;
  box-shadow: 0.4rem 0.4rem 0 var(--navy);
}
.bwb-activity h3 {
  font-family: var(--display);
  font-size: 1.4rem;
  text-transform: uppercase;
  margin: 0 0 0.6rem;
  color: var(--navy);
  letter-spacing: -0.01em;
}
.bwb-activity p {
  font-family: var(--body);
  font-size: 1.02rem;
  color: var(--navy-soft);
  margin: 0 0 0.8rem;
}
.bwb-activity .materials {
  font-family: var(--mono);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--orange-deep);
  font-weight: 500;
  border-top: 2px dotted var(--navy);
  padding-top: 0.7rem;
  margin-top: 0.9rem;
}
.bwb-activity .materials::before { content: 'You\'ll need: '; color: var(--navy); }

/* Sources — navy block */
.bwb-sources-section {
  background: var(--navy);
  color: var(--cream);
  padding: 4rem 2rem;
}
.bwb-sources-section .inner { max-width: 44rem; margin: 0 auto; }
.bwb-sources-section h2 {
  font-family: var(--display);
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
  text-transform: uppercase;
  letter-spacing: -0.015em;
  margin: 0 0 0.6rem;
  color: var(--cream);
}
.bwb-sources-section .bwb-block-label .num { background: var(--yellow); color: var(--navy); }
.bwb-sources-section .bwb-block-label .ttl { color: var(--yellow); }
.bwb-sources {
  list-style: none;
  counter-reset: src;
  padding: 0;
  margin: 0;
}
.bwb-sources li {
  counter-increment: src;
  position: relative;
  padding: 1rem 0 1rem 3.5rem;
  font-family: var(--body);
  font-size: 1rem;
  line-height: 1.5;
  border-top: 1px solid rgba(244, 234, 208, 0.18);
  color: var(--cream);
}
.bwb-sources li:last-child { border-bottom: 1px solid rgba(244, 234, 208, 0.18); }
.bwb-sources li::before {
  content: counter(src);
  position: absolute;
  left: 0;
  top: 1rem;
  font-family: var(--poster);
  font-size: 1.4rem;
  color: var(--orange);
  line-height: 1;
}
.bwb-sources a {
  color: var(--orange);
  border-bottom-color: var(--orange);
}
.bwb-sources a:hover { color: var(--yellow); border-bottom-color: var(--yellow); }

/* ============================================================
   FOOTER
   ============================================================ */

.bwb-footer {
  background: var(--navy);
  color: var(--cream);
  padding: 4rem 2rem 2rem;
  border-top: 0.5rem solid var(--orange);
}
.bwb-footer-inner {
  max-width: 64rem;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
}
@media (min-width: 48rem) {
  .bwb-footer-inner { grid-template-columns: 2fr 1fr 1fr; }
}
.bwb-footer-mark {
  display: inline-block;
  font-family: var(--poster);
  font-size: 1.8rem;
  line-height: 0.9;
  color: var(--cream);
  text-transform: uppercase;
  letter-spacing: -0.02em;
  border: 0;
}
.bwb-footer-mark .alt { color: var(--orange); }
.bwb-footer-mark img {
  width: 11rem;
  max-width: 100%;
  height: auto;
  display: block;
}
.bwb-footer-blurb {
  font-family: var(--body);
  font-size: 0.98rem;
  color: var(--cream);
  opacity: 0.78;
  line-height: 1.5;
  margin: 0.7rem 0 0;
  max-width: 22rem;
}
.bwb-footer h4 {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--yellow);
  font-weight: 500;
  margin: 0 0 1rem;
}
.bwb-footer ul { list-style: none; padding: 0; margin: 0; }
.bwb-footer li { margin: 0.45rem 0; }
.bwb-footer a {
  color: var(--cream);
  border: 0;
  font-family: var(--display);
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.bwb-footer a:hover { color: var(--orange); }
.bwb-colophon {
  max-width: 64rem;
  margin: 3rem auto 0;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(244, 234, 208, 0.18);
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  color: var(--cream);
  opacity: 0.55;
}

/* ============================================================
   404
   ============================================================ */

.bwb-notfound {
  background-color: var(--cream);
  background-image: var(--dots);
  background-size: var(--dots-size);
  padding: 6rem 2rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.bwb-notfound::before {
  content: '';
  position: absolute;
  top: -3rem; right: -3rem;
  width: 16rem; height: 16rem;
  background: var(--orange);
  border-radius: 50%;
}
.bwb-notfound::after {
  content: '';
  position: absolute;
  bottom: -3rem; left: -3rem;
  width: 12rem; height: 12rem;
  background: var(--blue);
  transform: rotate(20deg);
}
.bwb-notfound-inner { position: relative; z-index: 1; max-width: 34rem; margin: 0 auto; }
.bwb-notfound .code {
  font-family: var(--poster);
  font-size: clamp(7rem, 22vw, 14rem);
  line-height: 0.85;
  color: var(--navy);
  letter-spacing: -0.05em;
  margin-bottom: 1rem;
}
.bwb-notfound h1 {
  font-family: var(--display);
  font-size: 1.8rem;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  color: var(--navy);
  margin: 0 0 1rem;
}
.bwb-notfound p {
  font-family: var(--body);
  font-size: 1.1rem;
  color: var(--navy-soft);
  margin: 0 0 2rem;
}
.bwb-notfound a.btn {
  display: inline-block;
  background: var(--navy);
  color: var(--yellow);
  font-family: var(--display);
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.9rem 1.5rem;
  border: 0;
}
.bwb-notfound a.btn:hover { background: var(--orange); color: var(--navy); }

/* ============================================================
   CONTENT PAGES — About / Subscribe / Privacy / Terms
   Editorial prose layout: centered column on dot-grid paper.
   ============================================================ */

.bwb-content-page {
  background-color: var(--cream);
  background-image: var(--dots);
  background-size: var(--dots-size);
  padding: 5rem 2rem 6rem;
}
.bwb-content-page-inner {
  max-width: 38rem;
  margin: 0 auto;
}
.bwb-content-page-kicker {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--orange-deep);
  font-weight: 600;
  margin-bottom: 1rem;
}
.bwb-content-page h1 {
  font-family: var(--poster);
  font-size: clamp(2.4rem, 5.5vw, 3.6rem);
  text-transform: uppercase;
  letter-spacing: -0.02em;
  color: var(--navy);
  margin: 0 0 1.25rem;
  line-height: 1.0;
}
.bwb-content-page-lede {
  font-family: var(--body);
  font-size: 1.25rem;
  line-height: 1.5;
  font-weight: 500;
  color: var(--navy-soft);
  margin: 0 0 2.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 0.3rem solid var(--orange);
}
.bwb-content-page h2 {
  font-family: var(--display);
  font-size: 1.4rem;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  color: var(--navy);
  margin: 2.5rem 0 0.8rem;
}
.bwb-content-page p {
  font-family: var(--body);
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--navy-soft);
  margin: 0 0 1rem;
}
.bwb-content-page a {
  color: var(--orange-deep);
}
.bwb-content-page-stamp {
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--navy-soft);
  opacity: 0.7;
  margin-top: 3rem;
}

.bwb-content-form {
  display: flex;
  gap: 0;
  flex-wrap: wrap;
  margin: 1rem 0 0;
  border: 2px solid var(--navy);
}
.bwb-content-form input[type="email"] {
  flex: 1 1 14rem;
  padding: 1rem 1.2rem;
  border: 0;
  background: var(--cream-light);
  color: var(--navy);
  font-family: var(--body);
  font-size: 1rem;
  font-weight: 500;
  outline: none;
}
.bwb-content-form input[type="email"]::placeholder { color: var(--navy-soft); opacity: 0.6; }
.bwb-content-form button {
  padding: 1rem 1.5rem;
  background: var(--navy);
  border: 0;
  color: var(--yellow);
  font-family: var(--display);
  font-size: 0.85rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .12s, color .12s;
}
.bwb-content-form button:hover { background: var(--orange); color: var(--navy); }
.bwb-form-error {
  background: var(--orange);
  color: var(--navy);
  padding: 0.7rem 1rem;
  margin: 0 0 1rem;
  font-family: var(--mono);
  font-size: 0.88rem;
  font-weight: 500;
  border-left: 0.4rem solid var(--navy);
}
.bwb-form-fineprint {
  margin-top: 0.9rem;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--navy-soft);
  opacity: 0.75;
}