/* Mar de Colas — Protocolo Interactivo · brand-aligned */
:root {
  --paper: #ffffff;
  --paper-2: #f4f3ee;
  --rule: #d8d8d2;
  --navy: #283880;
  --navy-2: #1f2c66;
  --navy-3: #3a4ba0;
  --red: #d02028;
  --red-2: #b8181f;
  --ink: #283880;
  --ink-2: #4a5599;
  --ink-3: #8089b8;
  --on-navy: #ffffff;

  --serif: "Newsreader", Georgia, serif;
  --sans: "Nunito", "Inter Tight", system-ui, sans-serif;
  --display: "Nunito", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;

  --gap: 28px;
  --pad-x: clamp(20px, 4vw, 48px);
  --pad-y: clamp(28px, 4vw, 56px);

  /* paw-print pattern in red on near-transparent */
  --paw: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'><g fill='%23283880' opacity='0.06'><ellipse cx='30' cy='40' rx='6' ry='8'/><ellipse cx='44' cy='32' rx='5' ry='7'/><ellipse cx='58' cy='32' rx='5' ry='7'/><ellipse cx='72' cy='40' rx='6' ry='8'/><path d='M35 55 Q35 70 51 70 Q67 70 67 55 Q67 48 51 46 Q35 48 35 55Z'/><ellipse cx='90' cy='95' rx='4' ry='6'/><ellipse cx='100' cy='88' rx='4' ry='6'/><ellipse cx='110' cy='88' rx='4' ry='6'/><path d='M93 100 Q93 110 102 110 Q111 110 111 100 Q111 96 102 95 Q93 96 93 100Z'/></g></svg>");
}

[data-density="compact"] {
  --gap: 18px;
  --pad-x: clamp(16px, 3vw, 36px);
  --pad-y: clamp(20px, 3vw, 40px);
}

[data-theme="dark"] {
  --paper: #283880;
  --paper-2: #1f2c66;
  --rule: rgba(255,255,255,0.18);
  --ink: #ffffff;
  --ink-2: #d8dbed;
  --ink-3: #a4abd0;
  --navy: #ffffff;
  --on-navy: #283880;
  --paw: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'><g fill='%23ffffff' opacity='0.07'><ellipse cx='30' cy='40' rx='6' ry='8'/><ellipse cx='44' cy='32' rx='5' ry='7'/><ellipse cx='58' cy='32' rx='5' ry='7'/><ellipse cx='72' cy='40' rx='6' ry='8'/><path d='M35 55 Q35 70 51 70 Q67 70 67 55 Q67 48 51 46 Q35 48 35 55Z'/><ellipse cx='90' cy='95' rx='4' ry='6'/><ellipse cx='100' cy='88' rx='4' ry='6'/><ellipse cx='110' cy='88' rx='4' ry='6'/><path d='M93 100 Q93 110 102 110 Q111 110 111 100 Q111 96 102 95 Q93 96 93 100Z'/></g></svg>");
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--sans);
  background: var(--paper);
  color: var(--ink);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
button { font-family: inherit; }

/* Layout */
.shell { display: grid; grid-template-columns: 280px 1fr; min-height: 100vh; }
@media (max-width: 900px) { .shell { grid-template-columns: 1fr; } .toc { display: none; } }

/* ── TOC ── */
.toc {
  position: sticky; top: 0; align-self: start; height: 100vh; overflow: auto;
  background: var(--navy); color: #fff;
  padding: 28px 24px 40px;
  font-size: 13.5px;
  background-image: var(--paw);
  background-size: 160px;
}
[data-theme="dark"] .toc { background: var(--paper-2); }
.toc-brand { display: block; margin-bottom: 22px; padding: 8px 4px; }
.toc-brand img { width: 100%; max-width: 200px; height: auto; display: block;
   }
.toc-search {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 12px;
  border: 2px solid rgba(255,255,255,0.3); border-radius: 999px;
  background: rgba(255,255,255,0.08); color: #fff;
  font-size: 13px; cursor: pointer; width: 100%;
  font-weight: 600;
}
.toc-search:hover { background: rgba(255,255,255,0.14); border-color: rgba(255,255,255,0.5); }
.toc-search kbd { margin-left: auto; font-family: var(--mono); font-size: 10.5px;
  background: rgba(255,255,255,0.15); border-radius: 4px; padding: 1px 5px; color: #fff; }
.toc-meta { font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase;
  margin: 24px 0 10px; padding-bottom: 6px; border-bottom: 1px solid rgba(255,255,255,0.2);
  color: rgba(255,255,255,0.7); font-weight: 700; }
.toc-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.toc-link {
  display: flex; gap: 10px; align-items: baseline;
  padding: 9px 12px; border-radius: 8px; cursor: pointer;
  border: none; background: none; width: 100%; text-align: left; font: inherit;
  color: rgba(255,255,255,0.78); font-weight: 600; font-size: 13.5px;
  transition: background 120ms;
}
.toc-link:hover { background: rgba(255,255,255,0.08); color: #fff; }
.toc-link.active { background: var(--red); color: #fff; }
.toc-link .roman { width: 28px; flex: none; font-weight: 800; opacity: 0.8; font-size: 12px; }
.toc-link .label { flex: 1; line-height: 1.3; }

/* ── Reading column ── */
.reading {
  padding: var(--pad-y) var(--pad-x);
  max-width: 1040px; margin: 0 auto; width: 100%;
  position: relative;
}
.reading::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image: var(--paw); background-size: 200px; opacity: 0.5;
}
.reading > * { position: relative; z-index: 1; }

/* Cover */
.cover { padding: 24px 0 56px; border-bottom: 4px solid var(--red); margin-bottom: 56px; }
.cover-eyebrow {
  display: inline-flex; gap: 10px; align-items: center;
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--red); font-weight: 800;
  background: #fff; border: 2px solid var(--red); border-radius: 999px;
  padding: 6px 14px; margin-bottom: 22px;
}
[data-theme="dark"] .cover-eyebrow { background: var(--paper); }
.cover-title {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(40px, 7vw, 84px);
  line-height: 0.95; letter-spacing: -0.02em;
  margin: 0 0 18px; color: var(--navy); text-wrap: balance;
}
[data-theme="dark"] .cover-title { color: var(--ink); }
.cover-title em { font-style: normal; color: var(--red); }
.cover-sub {
  font-family: var(--serif); font-style: italic;
  font-size: clamp(18px, 1.7vw, 24px);
  color: var(--ink-2); max-width: 56ch; margin: 0 0 36px; line-height: 1.4;
  text-wrap: balance;
}
.cover-meta { display: flex; flex-wrap: wrap; gap: 14px; }
.cover-meta div {
  background: var(--paper); border: 2px solid var(--navy); border-radius: 12px;
  padding: 12px 18px; min-width: 140px;
}
.cover-meta dt { font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-3); font-weight: 700; margin-bottom: 4px; }
.cover-meta dd { margin: 0; color: var(--navy); font-weight: 800; font-size: 16px; }
[data-theme="dark"] .cover-meta dd { color: var(--ink); }

/* Chapter */
.chapter { margin-bottom: 80px; scroll-margin-top: 24px; }
.chapter-header {
  display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap;
  padding: 36px 0 24px; margin-bottom: 28px;
  border-bottom: 2px solid var(--rule);
}
.chapter-roman {
  background: var(--red); color: #fff;
  font-family: var(--display); font-weight: 900;
  font-size: 18px; letter-spacing: 0.06em;
  padding: 6px 14px; border-radius: 999px; line-height: 1;
}
.chapter-title {
  font-family: var(--display); font-weight: 900;
  font-size: clamp(28px, 3.8vw, 44px);
  letter-spacing: -0.02em; line-height: 1.05;
  margin: 0; color: var(--navy); flex: 1; min-width: 240px; text-wrap: balance;
}
[data-theme="dark"] .chapter-title { color: var(--ink); }
.chapter-lead {
  font-family: var(--serif); font-style: italic;
  color: var(--ink-2); font-size: 18px; line-height: 1.5;
  margin: 0; max-width: 64ch; flex-basis: 100%; text-wrap: pretty;
}

/* Section */
.section { margin-bottom: var(--gap); }
.section-num {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em;
  color: var(--red); font-weight: 700;
  display: inline-block; margin-right: 10px;
}
.section-title {
  font-family: var(--display); font-weight: 800;
  font-size: 22px; letter-spacing: -0.01em;
  margin: 0 0 14px; color: var(--navy);
}
[data-theme="dark"] .section-title { color: var(--ink); }
.section-body { color: var(--ink-2); margin: 0 0 12px; max-width: 64ch; text-wrap: pretty; }
.section-list { margin: 8px 0 0; padding: 0; list-style: none;
  display: flex; flex-direction: column; gap: 8px; max-width: 64ch; }
.section-list li { position: relative; padding-left: 24px; color: var(--ink); }
.section-list li::before {
  content: ""; position: absolute; left: 0; top: 0.55em;
  width: 10px; height: 10px; border-radius: 999px;
  background: var(--red);
}

/* Promise card */
.promise {
  background: var(--navy); color: #fff;
  padding: 28px 32px; border-radius: 18px; margin: 14px 0 0;
  position: relative; overflow: hidden;
  background-image: var(--paw); background-size: 180px;
}
.promise-text {
  font-family: var(--serif); font-style: italic;
  font-size: clamp(20px, 2.4vw, 28px);
  line-height: 1.35; margin: 0; letter-spacing: -0.012em; text-wrap: balance;
}
.promise-cite {
  display: block; margin-top: 14px;
  font-family: var(--display); font-style: normal; font-size: 11px;
  letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,0.7);
  font-weight: 800;
}

/* Decálogo */
.decalogo { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
.dec-row {
  background: var(--paper); border: 2px solid var(--navy); border-radius: 14px;
  overflow: hidden;
}
.dec-row[data-open="true"] { border-color: var(--red); }
.dec-head {
  display: grid; grid-template-columns: 56px 1fr auto;
  gap: 16px; align-items: center;
  padding: 14px 18px; cursor: pointer; width: 100%;
  background: none; border: none; text-align: left; font: inherit; color: inherit;
}
.dec-num {
  font-family: var(--display); font-weight: 900;
  font-size: 26px; color: var(--red); line-height: 1;
}
.dec-conducta {
  font-family: var(--display); font-weight: 800; font-size: 17px;
  color: var(--navy); letter-spacing: -0.005em;
}
[data-theme="dark"] .dec-conducta { color: var(--ink); }
.dec-toggle {
  width: 32px; height: 32px; border-radius: 999px;
  display: grid; place-items: center;
  border: 2px solid var(--navy); color: var(--navy);
  font-size: 16px; font-weight: 700;
  transition: transform 200ms, background 120ms, color 120ms;
}
[data-theme="dark"] .dec-toggle { border-color: var(--ink); color: var(--ink); }
.dec-row[data-open="true"] .dec-toggle {
  transform: rotate(45deg);
  background: var(--red); color: #fff; border-color: var(--red);
}
.dec-body { padding: 0 18px 18px 74px; }
.dec-desc { color: var(--ink-2); margin: 0 0 12px; max-width: 60ch; }
.dec-ej {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 14px 18px; border-radius: 12px;
  background: var(--navy); color: #fff;
  font-family: var(--serif); font-style: italic;
  font-size: 16px; line-height: 1.4; max-width: 60ch;
}
.dec-ej::before {
  content: "EJ."; font-family: var(--display); font-style: normal;
  font-size: 10px; letter-spacing: 0.14em; color: var(--red);
  font-weight: 800; margin-top: 4px; flex: none;
}

/* Collapse */
.collapse { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 240ms ease; }
.collapse > * { overflow: hidden; min-height: 0; }
.collapse.open { grid-template-rows: 1fr; }

/* Competencias */
.competencias {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(360px, 100%), 1fr));
  gap: 18px;
}
.comp-card {
  background: var(--paper); border: 2px solid var(--navy); border-radius: 16px;
  padding: 22px 24px; display: flex; flex-direction: column; gap: 10px;
}
.comp-title {
  font-family: var(--display); font-weight: 800; font-size: 19px;
  letter-spacing: -0.005em; margin: 0; color: var(--navy);
}
[data-theme="dark"] .comp-title { color: var(--ink); }
.comp-desc { color: var(--ink-2); font-size: 14.5px; margin: 0; }
.comp-practica { list-style: none; margin: 8px 0 0; padding: 0;
  display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.comp-practica li { padding-left: 22px; position: relative; color: var(--ink); }
.comp-practica li::before {
  content: "→"; position: absolute; left: 0; color: var(--red);
  font-family: var(--mono); font-weight: 700; top: 0.05em;
}
.dialog-pair { margin-top: 12px; display: grid; gap: 8px; }
.dialog-line {
  display: grid; grid-template-columns: 64px 1fr; gap: 12px;
  padding: 12px 14px; border-radius: 10px;
  font-size: 14.5px; line-height: 1.4;
  border: 2px solid;
}
.dialog-line.di { border-color: var(--navy); background: var(--paper); color: var(--ink); }
.dialog-line.evita { border-color: var(--red); background: var(--paper); color: var(--ink); }
.dialog-line .tag {
  font-family: var(--display); font-size: 10.5px; font-weight: 800;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--navy); align-self: start; padding-top: 1px;
}
[data-theme="dark"] .dialog-line .tag { color: var(--ink); }
.dialog-line.evita .tag { color: var(--red); }
.dialog-line .text { font-family: var(--serif); font-style: italic; }

/* Roles */
.roles-tabs {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-bottom: 24px;
}
.role-tab {
  padding: 10px 18px;
  background: var(--paper); border: 2px solid var(--navy); border-radius: 999px;
  font: inherit; font-size: 14px; font-weight: 700;
  color: var(--navy); cursor: pointer;
  transition: all 120ms;
}
[data-theme="dark"] .role-tab { color: var(--ink); border-color: var(--ink); }
.role-tab:hover { background: var(--paper-2); }
.role-tab.active { background: var(--red); border-color: var(--red); color: #fff; }
.role-mission {
  font-family: var(--serif); font-style: italic;
  color: var(--ink-2); font-size: 17px;
  margin: 0 0 24px; padding: 14px 20px;
  border-left: 4px solid var(--red);
  background: transparent; border-radius: 0;
  max-width: 64ch; line-height: 1.45;
}
.behaviors { display: flex; flex-direction: column; gap: 10px; }
.beh {
  background: var(--paper); border: 2px solid var(--navy); border-radius: 14px;
  overflow: hidden;
}
.beh[data-open="true"] { border-color: var(--red); }
.beh-head {
  display: flex; gap: 14px; align-items: center;
  padding: 14px 18px; width: 100%;
  background: none; border: none; font: inherit; text-align: left; cursor: pointer; color: inherit;
}
.beh-num { font-family: var(--mono); font-size: 12px; font-weight: 700;
  color: var(--red); width: 32px; flex: none; }
.beh-title { flex: 1; font-family: var(--display); font-weight: 800;
  font-size: 16.5px; color: var(--navy); }
[data-theme="dark"] .beh-title { color: var(--ink); }
.beh-toggle { font-family: var(--display); font-size: 11px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--red); display: flex; align-items: center; gap: 8px; }
.beh-chev { width: 14px; height: 14px; display: inline-block; position: relative;
  transition: transform 220ms; }
.beh-chev::before, .beh-chev::after {
  content: ""; position: absolute; background: currentColor;
  width: 2px; height: 10px; top: 2px; left: 6px; border-radius: 1px;
}
.beh-chev::after { transform: rotate(90deg); }
.beh[data-open="true"] .beh-chev { transform: rotate(45deg); }
.beh-body {
  padding: 0 18px 18px 64px;
  display: grid; grid-template-columns: 1fr; gap: 16px;
}
@media (min-width: 720px) { .beh-body { grid-template-columns: 1fr 1fr; } }
.beh-bullets { list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 6px; font-size: 14.5px; color: var(--ink-2); }
.beh-bullets li { padding-left: 18px; position: relative; }
.beh-bullets li::before {
  content: ""; position: absolute; left: 0; top: 0.55em;
  width: 7px; height: 7px; border-radius: 999px; background: var(--red);
}
.beh-scripts { display: flex; flex-direction: column; gap: 8px; }
.script {
  padding: 12px 16px; border-radius: 10px;
  background: var(--navy); color: #fff;
  font-family: var(--serif); font-style: italic;
  font-size: 14.5px; line-height: 1.4;
}
.script::before {
  content: "“"; color: rgba(255,255,255,0.6); font-style: normal;
  font-size: 22px; line-height: 0; margin-right: 4px; vertical-align: -0.3em;
}
.script::after {
  content: "”"; color: rgba(255,255,255,0.6); font-style: normal;
  font-size: 22px; line-height: 0; margin-left: 2px; vertical-align: -0.3em;
}

/* Moments */
.moments { display: grid; gap: 18px; }
.moment {
  background: var(--paper); border: 2px solid var(--navy); border-radius: 16px;
  padding: 24px 26px; display: grid; grid-template-columns: 60px 1fr; gap: 22px;
}
.moment-step {
  font-family: var(--display); font-weight: 900; font-size: 36px;
  color: var(--red); line-height: 1;
}
.moment-step small { display: block; font-size: 9.5px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ink-3); font-weight: 800; margin-top: 6px; }
.moment-name { font-family: var(--display); font-weight: 800;
  font-size: 22px; margin: 0 0 4px; color: var(--navy); }
[data-theme="dark"] .moment-name { color: var(--ink); }
.moment-obj { font-family: var(--serif); font-style: italic;
  color: var(--ink-2); margin: 0 0 14px; font-size: 16px; }
.moment-cols { display: grid; grid-template-columns: 1fr; gap: 14px; margin-top: 4px; }
@media (min-width: 720px) { .moment-cols { grid-template-columns: repeat(3, 1fr); } }
.moment-col h5 {
  font-family: var(--display); font-size: 11px; font-weight: 800;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--navy); margin: 0 0 10px;
}
[data-theme="dark"] .moment-col h5 { color: var(--ink); }
.moment-col.do h5 { color: var(--navy); }
.moment-col.avoid h5 { color: var(--red); }
.moment-col ul { list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: var(--ink); }
.moment-col ul li { padding-left: 20px; position: relative;
  font-family: var(--serif); font-style: italic; line-height: 1.4; }
.moment-col.do ul li::before {
  content: "✓"; position: absolute; left: 0; color: var(--navy);
  font-style: normal; font-weight: 800; font-size: 13px; top: 1px;
}
[data-theme="dark"] .moment-col.do ul li::before { color: var(--ink); }
.moment-col.avoid ul li::before {
  content: "✕"; position: absolute; left: 0; color: var(--red);
  font-style: normal; font-weight: 800; font-size: 13px; top: 1px;
}
.moment-col:not(.do):not(.avoid) ul li::before {
  content: ""; position: absolute; left: 0; top: 0.55em;
  width: 7px; height: 7px; border-radius: 999px; background: var(--red);
}

/* Situations */
.sits { display: flex; flex-direction: column; gap: 12px; }
.sit {
  background: var(--paper); border: 2px solid var(--navy); border-radius: 16px;
  overflow: hidden;
}
.sit[data-open="true"] { border-color: var(--red); }
.sit-head {
  display: grid; grid-template-columns: auto 1fr auto;
  gap: 16px; align-items: center; padding: 18px 22px; width: 100%;
  background: none; border: none; font: inherit; text-align: left;
  cursor: pointer; color: inherit;
}
.sit-marker {
  display: none;
}
.sit-name { font-family: var(--display); font-weight: 800;
  font-size: 20px; color: var(--red); }
[data-theme="dark"] .sit-name { color: var(--ink); }
.sit-meta { font-family: var(--display); font-size: 11px; font-weight: 700;
  letter-spacing: 0.08em; color: var(--red); text-transform: uppercase; }
.sit-body { padding: 0 22px 22px; }
.sit-steps { display: grid; gap: 14px; }
.sit-step {
  border-left: 3px solid var(--red); padding: 6px 0 6px 18px;
}
.sit-step h6 {
  font-family: var(--display); font-size: 11px; font-weight: 800;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--navy); margin: 0 0 8px;
  display: flex; gap: 10px; align-items: center;
}
[data-theme="dark"] .sit-step h6 { color: var(--ink); }
.sit-step h6 .num {
  font-family: var(--display); font-weight: 900; font-size: 18px;
  color: var(--red); letter-spacing: 0; text-transform: none;
}
.sit-step .lines { display: flex; flex-direction: column; gap: 6px; }
.sit-avoid {
  margin-top: 20px; padding: 16px 18px;
  border-radius: 12px; border: 2px solid var(--red);
  background: var(--paper);
}
.sit-avoid h6 {
  font-family: var(--display); font-size: 11px; font-weight: 800;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--red); margin: 0 0 10px;
}
.sit-avoid ul { list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 14px; color: var(--ink-2); }
.sit-avoid ul li { padding-left: 18px; position: relative;
  font-family: var(--serif); font-style: italic; }
.sit-avoid ul li::before {
  content: "✕"; position: absolute; left: 0;
  font-style: normal; font-weight: 800; color: var(--red); font-size: 12px; top: 0.05em;
}

/* Communication 3-col */
.comm-cols { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 720px) { .comm-cols { grid-template-columns: repeat(3, 1fr); } }
.comm-col {
  background: var(--paper); border: 2px solid var(--navy);
  border-radius: 14px; padding: 20px 22px;
}
.comm-col h5 {
  font-family: var(--display); font-size: 11px; font-weight: 800;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--navy); margin: 0 0 12px;
}
[data-theme="dark"] .comm-col h5 { color: var(--ink); }
.comm-col.evita { border-color: var(--red); }
.comm-col.evita h5 { color: var(--red); }
.comm-col ul { list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 8px; font-size: 14px; color: var(--ink); }
.comm-col ul li { padding-left: 18px; position: relative; line-height: 1.4; }
.comm-col ul li::before {
  content: ""; position: absolute; left: 0; top: 0.55em;
  width: 7px; height: 7px; border-radius: 999px; background: var(--red);
}
.comm-col.evita ul li::before { background: var(--red); }

/* Channels */
.channels { display: flex; flex-direction: column; gap: 0;
  border-top: 2px solid var(--rule); }
.ch-row {
  display: grid; grid-template-columns: 160px 1fr 1fr;
  gap: 24px; padding: 20px 0; border-bottom: 2px solid var(--rule);
  align-items: start;
}
@media (max-width: 720px) { .ch-row { grid-template-columns: 1fr; } }
.ch-name { font-family: var(--display); font-weight: 900; font-size: 19px;
  display: flex; align-items: center; gap: 10px; color: var(--navy); }
[data-theme="dark"] .ch-name { color: var(--ink); }
.ch-name .dot { width: 10px; height: 10px; border-radius: 999px; background: var(--red); }
.ch-std { font-size: 14.5px; color: var(--ink-2); line-height: 1.5; }
.ch-ej {
  font-family: var(--serif); font-style: italic; font-size: 14.5px;
  background: var(--navy); color: #fff;
  padding: 14px 16px; border-radius: 12px; line-height: 1.45;
}

/* Two col */
.twocol { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 18px; }
@media (max-width: 600px) { .twocol { grid-template-columns: 1fr; } }
.twocol .panel {
  background: var(--paper); border: 2px solid var(--navy);
  border-radius: 14px; padding: 18px 22px;
}
.twocol .panel h5 {
  font-family: var(--display); font-size: 11px; font-weight: 800;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--red); margin: 0 0 10px;
}
.twocol .panel ul { list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 8px; }
.twocol .panel ul li { padding-left: 18px; position: relative;
  font-family: var(--serif); font-size: 16px; color: var(--ink); }
.twocol .panel ul li::before {
  content: ""; position: absolute; left: 0; top: 0.65em;
  width: 7px; height: 7px; border-radius: 999px; background: var(--red);
}

/* Ideal */
.ideal { display: flex; flex-direction: column; position: relative; padding-left: 28px; }
.ideal::before {
  content: ""; position: absolute; left: 6px; top: 14px; bottom: 14px;
  width: 2px; background: var(--red);
}
.ideal-step {
  position: relative; padding: 14px 0 14px 24px;
  font-family: var(--serif); font-size: 18px; line-height: 1.5;
  color: var(--ink); max-width: 64ch;
}
.ideal-step::before {
  content: ""; position: absolute; left: -2px; top: 22px;
  width: 14px; height: 14px; border-radius: 999px;
  background: var(--paper); border: 3px solid var(--red);
}
.ideal-closer {
  margin-top: 32px; padding: 36px 40px;
  border-radius: 18px;
  background: var(--navy); color: #fff;
  font-family: var(--serif); font-style: italic;
  font-size: clamp(22px, 2.6vw, 30px);
  line-height: 1.35; letter-spacing: -0.012em;
  text-wrap: balance; position: relative; overflow: hidden;
  background-image: var(--paw); background-size: 220px;
}

/* Footer */
.colophon {
  margin-top: 80px; padding: 32px 0;
  border-top: 2px solid var(--rule);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px;
  font-family: var(--display); font-size: 12px; font-weight: 700;
  color: var(--ink-3); letter-spacing: 0.08em; text-transform: uppercase;
}

/* Search overlay */
.search-overlay {
  position: fixed; inset: 0;
  background: rgba(40,56,128,0.45); backdrop-filter: blur(4px);
  display: grid; place-items: start center; padding-top: 12vh; z-index: 50;
}
.search-card {
  width: min(640px, 92vw); background: var(--paper);
  border: 3px solid var(--navy); border-radius: 18px; overflow: hidden;
  box-shadow: 0 24px 60px rgba(40,56,128,0.3);
}
.search-input {
  width: 100%; border: none; padding: 18px 22px; font-size: 17px;
  font-family: inherit; background: transparent; color: var(--ink);
  outline: none; border-bottom: 2px solid var(--rule); font-weight: 600;
}
.search-input::placeholder { color: var(--ink-3); }
.search-results { max-height: 60vh; overflow: auto; padding: 8px; }
.search-result {
  display: block; padding: 12px 14px; border-radius: 10px;
  cursor: pointer; width: 100%; background: none; border: none;
  text-align: left; font: inherit; color: inherit;
}
.search-result:hover, .search-result.active { background: var(--paper-2); }
.search-result.active { background: var(--red); color: #fff; }
.search-result .crumb {
  font-family: var(--display); font-size: 10.5px; font-weight: 800;
  letter-spacing: 0.1em; color: var(--red); text-transform: uppercase; margin-bottom: 3px;
}
.search-result.active .crumb { color: rgba(255,255,255,0.85); }
.search-result .title { font-family: var(--display); font-weight: 800; font-size: 16px; color: var(--navy); }
.search-result.active .title { color: #fff; }
[data-theme="dark"] .search-result .title { color: var(--ink); }
.search-result .snippet {
  font-size: 13px; color: var(--ink-3); margin-top: 3px; line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.search-result.active .snippet { color: rgba(255,255,255,0.9); }
.search-result mark { background: rgba(208,32,40,0.2); color: inherit;
  padding: 0 2px; border-radius: 3px; font-weight: 700; }
.search-result.active mark { background: rgba(255,255,255,0.3); }
.search-empty { padding: 24px; text-align: center; color: var(--ink-3); font-size: 14px; }
.search-foot {
  border-top: 2px solid var(--rule); padding: 12px 18px;
  display: flex; justify-content: space-between;
  font-family: var(--display); font-size: 11px; font-weight: 700;
  color: var(--ink-3); letter-spacing: 0.04em;
}
.search-foot kbd {
  font-family: var(--mono); font-size: 10.5px;
  background: var(--paper-2); border: 1px solid var(--rule);
  border-radius: 4px; padding: 1px 5px; margin: 0 3px;
}

/* Top bar */
.topbar {
  display: none; position: sticky; top: 0; z-index: 5;
  padding: 12px 16px; background: var(--navy);
  align-items: center; gap: 12px;
}
@media (max-width: 900px) { .topbar { display: flex; } }
.topbar-mark { height: 26px; width: auto;  }
.topbar-spacer { flex: 1; }
.topbar-btn {
  background: var(--red); color: #fff; border: none;
  font-family: var(--display); font-weight: 800; font-size: 12px;
  letter-spacing: 0.06em; text-transform: uppercase;
  border-radius: 999px; padding: 8px 14px; cursor: pointer;
}

/* Progress */
.progress {
  position: fixed; top: 0; left: 0; right: 0; height: 3px;
  background: transparent; z-index: 40; pointer-events: none;
}
.progress-fill { height: 100%; background: var(--red); width: 0%; transition: width 60ms linear; }