/* CABOT Codes — cabotcodes.com
   Brand tokens are inherited verbatim from the Review Assistant
   (app/src/shared/branding/tokens.css). Nothing here invents a colour:
   the two sites must read as one practice.

   THE RED RULE carries over. The brand red lives in the logo and nowhere
   else. Blue leads. Nothing on this page is red.

   The grammar is a permit drawing set cover sheet — title block, sheet
   index, general notes, revision record, signature block. Precision comes
   from hairline rules and labelled data columns. No paper texture, no
   blueprint cyan, no drafting costume. */

:root {
  /* brand — identical to the Review Assistant */
  --primary: #1473d1;
  --primary-soft: #eaf4ff;
  --primary-dark: #0a4f99;

  /* structure */
  --bg: #f5f7fb;
  --soft: #f1f5f9;
  --line: #dce7f3;
  --ink: #0f172a;
  --muted: #556070;
  --dark: #020617;
  --surface: #ffffff;

  /* a second, heavier rule — the drawn line of a title block border.
     --line is decorative at 1.25:1 and can never carry structure alone. */
  --rule: #b9cde3;
  --rule-heavy: #8ea9c5;

  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;

  --shadow: 0 25px 70px rgba(2, 6, 23, .12);
  --small-shadow: 0 12px 32px rgba(15, 23, 42, .10);

  --page: 1180px;
  --gutter: clamp(20px, 5vw, 56px);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Plus Jakarta Sans", "Segoe UI", system-ui, -apple-system,
    BlinkMacSystemFont, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; }

a { color: var(--primary-dark); }

:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 3px;
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip {
  position: absolute; left: 12px; top: -100px; z-index: 50;
  background: var(--surface); color: var(--ink);
  padding: 12px 18px; border: 1px solid var(--rule-heavy);
  border-radius: var(--radius-md); font-weight: 700; text-decoration: none;
  transition: top .18s ease-out;
}
.skip:focus { top: 12px; }

/* ── Buttons ─────────────────────────────────────────────────── */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 46px; padding: 12px 22px;
  border-radius: var(--radius-md);
  font-size: 15px; font-weight: 700; line-height: 1.2;
  text-decoration: none; white-space: nowrap;
  border: 1px solid transparent;
  transition: background-color .16s ease-out, border-color .16s ease-out,
              color .16s ease-out, transform .16s ease-out;
}
.btn-primary { background: var(--primary); color: #fff; border-color: var(--primary); }
.btn-primary:hover { background: var(--primary-dark); border-color: var(--primary-dark); }
.btn-secondary { background: var(--surface); color: var(--ink); border-color: var(--rule-heavy); }
.btn-secondary:hover { background: var(--primary-soft); border-color: var(--primary); color: var(--primary-dark); }
.btn:active { transform: translateY(1px); }

/* ── Sheet index (the nav) ───────────────────────────────────── */

.index {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: clamp(16px, 3vw, 40px);
  padding: 12px var(--gutter);
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--rule);
}
.index-mark { display: flex; flex: 0 0 auto; }
.index-mark img { width: clamp(132px, 14vw, 176px); height: auto; display: block; }

.index-sheets {
  display: flex; align-items: center; gap: clamp(14px, 2.4vw, 34px);
  margin-left: auto;
}
.index-sheets a {
  display: inline-flex; align-items: baseline; gap: 8px;
  flex: 0 0 auto; white-space: nowrap;
  min-height: 44px; padding: 6px 2px;
  color: var(--ink); text-decoration: none;
  font-size: 15px; font-weight: 600;
  border-bottom: 2px solid transparent;
}
.index-sheets a:hover { color: var(--primary-dark); border-bottom-color: var(--primary); }

/* The sheet number is the address, the way a drawing set indexes itself.
   Decorative to a screen reader — the link text carries the meaning. */
.sheet-no {
  font-size: 11px; font-weight: 800; letter-spacing: .08em;
  color: var(--primary); font-variant-numeric: tabular-nums;
}

.index-actions { display: flex; flex: 0 0 auto; gap: 8px; }
.index-actions .btn { min-height: 42px; padding: 10px 18px; font-size: 14.5px; }

@media (max-width: 860px) {
  .index { flex-wrap: wrap; row-gap: 6px; padding: 10px var(--gutter) 0; }
  .index-actions { order: 2; margin-left: auto; }
  .index-sheets {
    order: 3; width: 100%; margin-left: 0;
    justify-content: flex-start; gap: 22px;
    border-top: 1px solid var(--line); margin-top: 4px;
    overflow-x: auto; scrollbar-width: none;
  }
  .index-sheets::-webkit-scrollbar { display: none; }
}

/* ── Title block ─────────────────────────────────────────────── */

.titleblock {
  padding: clamp(48px, 8vw, 104px) var(--gutter) clamp(40px, 6vw, 76px);
}
.titleblock-inner {
  max-width: var(--page); margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}

.titleblock h1 {
  margin: 0 0 22px;
  font-size: clamp(2.15rem, 5vw, 3.5rem);
  font-weight: 800; line-height: 1.06; letter-spacing: -0.03em;
  text-wrap: balance;
  max-width: 15ch;
}
.lede {
  margin: 0 0 32px;
  font-size: clamp(1.02rem, 1.5vw, 1.18rem);
  line-height: 1.62; color: var(--muted);
  max-width: 62ch;
}
.titleblock-actions { display: flex; flex-wrap: wrap; gap: 12px; }

@keyframes rule-in { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@media (prefers-reduced-motion: reduce) {
  .hero-shot { animation: none; }
}

/* The product, shown rather than described. Framed like every other white
   surface on the page so it reads as part of the sheet, not pasted onto it. */
.hero-shot {
  margin: 0;
  animation: rule-in .62s cubic-bezier(.22, 1, .36, 1) both;
}
.hero-shot img {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  background: var(--surface);
}
.hero-shot figcaption {
  margin-top: 12px;
  font-size: 13px; line-height: 1.5; color: var(--muted);
}

@media (max-width: 900px) {
  .titleblock-inner { grid-template-columns: 1fr; }
  .titleblock h1 { max-width: 20ch; }
}

/* The .refstrip rules for the "work completed for" band were removed with
   their markup on 2026-08-07, pending permission from each organization.
   Both are recoverable from git history. */

/* ── Mission and vision ──────────────────────────────────────
   The one place blue owns a whole region rather than an element.
   One panel holding two statements, hairline-divided — not two cards. */

.statements {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  background: var(--primary-dark);
  border-radius: var(--radius-xl);
  padding: clamp(28px, 4vw, 44px);
  margin-bottom: clamp(38px, 5vw, 56px);
}
.statement { padding-right: clamp(20px, 3vw, 40px); }
.statement + .statement {
  padding-right: 0;
  padding-left: clamp(20px, 3vw, 40px);
  border-left: 1px solid rgba(255, 255, 255, .26);
}
/* The mark leads, the label follows. Stacking gives the icon room to carry
   weight instead of riding alongside an 11px label. */
.statement h3 {
  display: flex; flex-direction: column; align-items: flex-start; gap: 14px;
  margin: 0 0 16px;
  font-size: 12px; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: #bcd9f7;
}
/* Drawn, not borrowed: one stroke weight, round joins, matching the icon
   language of the Review Assistant itself. White so the mark reads first. */
.stmt-icon {
  flex: 0 0 auto; width: 38px; height: 38px;
  fill: none; stroke: #fff; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}
.statement p {
  margin: 0; color: #fff;
  font-size: clamp(1.2rem, 2.3vw, 1.62rem);
  font-weight: 600; line-height: 1.4; letter-spacing: -0.016em;
  text-wrap: pretty;
}

@media (max-width: 760px) {
  .statements { grid-template-columns: 1fr; }
  .statement { padding-right: 0; }
  .statement + .statement {
    padding-left: 0;
    border-left: 0;
    border-top: 1px solid rgba(255, 255, 255, .26);
    margin-top: clamp(20px, 3vw, 28px);
    padding-top: clamp(20px, 3vw, 28px);
  }
}

/* ── Sheets ──────────────────────────────────────────────────── */

.sheet {
  max-width: var(--page); margin: 0 auto;
  padding: clamp(52px, 7vw, 92px) var(--gutter);
  scroll-margin-top: 92px;
}
.sheet-title {
  display: flex; align-items: baseline; gap: 12px;
  margin: 0 0 clamp(28px, 4vw, 44px);
  padding-bottom: 14px;
  border-bottom: 2px solid var(--ink);
  font-size: clamp(1.35rem, 2.4vw, 1.75rem);
  font-weight: 800; letter-spacing: -0.02em;
}
.sheet-title .sheet-no { font-size: 13px; }

/* General notes. Numbered, rule-separated, plainly worded — the way a
   drawing set states the conditions that govern the work. Deliberately
   not three matching cards. */
.note {
  display: grid; grid-template-columns: 52px minmax(0, 1fr);
  gap: clamp(14px, 2.5vw, 28px);
  padding: clamp(26px, 3.5vw, 38px) 0;
  border-bottom: 1px solid var(--rule);
}
.note:last-child { border-bottom: 0; padding-bottom: 0; }
.note-no {
  margin: 0;
  font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: 800;
  line-height: 1; color: var(--primary);
  font-variant-numeric: tabular-nums;
}
.note-body h3 {
  margin: 0 0 12px;
  font-size: clamp(1.14rem, 1.9vw, 1.38rem); font-weight: 800;
  letter-spacing: -0.015em;
}
.note-body p { margin: 0 0 14px; max-width: 68ch; }
.note-body p:last-child { margin-bottom: 0; }
.note-action { margin-top: 22px !important; }

/* The product note earns a sheet of its own — it is the one thing on this
   page a visitor can use today. */
.note-product {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius-xl);
  padding: clamp(26px, 3.5vw, 38px);
  box-shadow: var(--small-shadow);
  margin-top: 8px;
}
.note-product:last-child { padding-bottom: clamp(26px, 3.5vw, 38px); }

@media (max-width: 620px) {
  .note { grid-template-columns: 1fr; gap: 8px; }
  .note-no { font-size: 1.2rem; }
}

/* The revision-record table and its intro paragraphs were removed with the
   association names on 2026-08-07. Recoverable from git history. */


/* ── The library schedule ────────────────────────────────────
   A drawing set states its quantities in a schedule, not in prose. Figures
   run in one hairline-divided band with tabular numerals so they read down
   a column. Deliberately not four floating stat cards. */

.schedule {
  margin: clamp(26px, 3.5vw, 34px) 0 0;
  padding-top: clamp(24px, 3vw, 30px);
  border-top: 2px solid var(--ink);
}
.schedule-title {
  margin: 0 0 18px;
  font-size: 11px; font-weight: 800; letter-spacing: .09em;
  text-transform: uppercase; color: var(--muted);
}

.schedule-figures {
  margin: 0 0 clamp(30px, 4vw, 40px); padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
}
.schedule-figures > div {
  padding: 0 clamp(12px, 1.6vw, 20px);
  border-left: 1px solid var(--rule);
}
.schedule-figures > div:first-child { border-left: 0; padding-left: 0; }
.schedule-figures dt {
  font-size: clamp(1.9rem, 4vw, 2.6rem); font-weight: 800;
  line-height: 1; letter-spacing: -0.035em; color: var(--primary);
  font-variant-numeric: tabular-nums;
}
.schedule-figures dd {
  margin: 9px 0 0;
  font-size: 13px; line-height: 1.45; color: var(--muted);
}
/* Two figures rather than four: the columns stay the same width as the
   four-figure schedule so the two sections line up down the page. */
.schedule-figures-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 560px; }

/* Subject areas. Hairline-divided like everything else on the sheet, never
   pills — a schedule lists, it does not badge. */
.topics {
  margin: 0; padding: 0; list-style: none;
  display: flex; flex-wrap: wrap; gap: 0 clamp(14px, 2vw, 26px);
}
.topics li {
  padding-left: clamp(14px, 2vw, 26px);
  border-left: 1px solid var(--rule);
  font-size: 15.5px; font-weight: 700; line-height: 1.6;
}
.topics li:first-child { border-left: 0; padding-left: 0; }

/* The rounds. A file moving through the review, drawn as the sequence it is:
   numbered nodes on a single rule, the way a sheet shows a progression. */
.rounds {
  margin: 0; padding: 0; list-style: none;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
}
.rounds li {
  position: relative;
  padding: 30px clamp(12px, 1.6vw, 20px) 0 0;
  border-top: 1px solid var(--rule);
}
.rounds li + li { padding-left: clamp(12px, 1.6vw, 20px); }
.rounds-no {
  position: absolute; top: -13px; left: 0;
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px;
  border-radius: 999px;
  background: var(--primary); color: #fff;
  font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums;
}
.rounds li + li .rounds-no { left: clamp(12px, 1.6vw, 20px); }
.rounds strong {
  display: block; margin-bottom: 5px;
  font-size: 14.5px; font-weight: 800; letter-spacing: -0.01em;
}
.rounds span:not(.rounds-no) {
  display: block; font-size: 13px; line-height: 1.45; color: var(--muted);
}

.schedule-note {
  margin: clamp(24px, 3vw, 30px) 0 0 !important;
  font-size: 12.5px; color: var(--muted); font-style: normal;
}

@media (max-width: 780px) {
  .schedule-figures { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 0; }
  .schedule-figures > div:nth-child(odd) { border-left: 0; padding-left: 0; }
  .rounds { grid-template-columns: 1fr; gap: 26px; }
  .rounds li, .rounds li + li { padding: 26px 0 0; }
  .rounds li + li .rounds-no { left: 0; }
}

/* ── Signature block ─────────────────────────────────────────── */

.sheet-sign { padding-bottom: clamp(64px, 8vw, 104px); }
/* The section rule above already closes the sheet — a second heavy line
   here read as a mistake, not as a signature block. */
.signblock { padding-top: clamp(6px, 1.5vw, 14px); }
.signblock-lede { margin: 0 0 10px; color: var(--muted); font-size: 1.05rem; }
.signblock-mail { margin: 0; }
.signblock-mail a {
  font-size: clamp(1.45rem, 3.4vw, 2.3rem);
  font-weight: 800; letter-spacing: -0.025em;
  color: var(--primary-dark); text-decoration: none;
  border-bottom: 3px solid var(--primary-soft);
  overflow-wrap: anywhere;
}
.signblock-mail a:hover { border-bottom-color: var(--primary); }

/* ── Footer ──────────────────────────────────────────────────── */

.footer {
  background: var(--dark); color: #cbd5e1;
  padding: clamp(38px, 5vw, 56px) var(--gutter);
  text-align: center;
}
.footer img { width: 132px; height: auto; margin: 0 auto 18px; display: block; }
.footer-line { margin: 0 0 16px; font-size: 14px; color: #cbd5e1; }
.footer-links {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 10px 26px; margin-bottom: 18px;
}
.footer-links a {
  color: #fff; font-size: 14px; font-weight: 600; text-decoration: none;
  padding: 8px 2px; border-bottom: 1px solid rgba(255, 255, 255, .32);
}
.footer-links a:hover { border-bottom-color: #fff; }
.footer-copy { margin: 0; font-size: 12.5px; color: #94a3b8; }
.footer :focus-visible { outline-color: #fff; }

/* ── Legal pages ─────────────────────────────────────────────── */

.legal {
  max-width: 74ch; margin: 0 auto;
  padding: clamp(44px, 6vw, 76px) var(--gutter) clamp(56px, 7vw, 88px);
}
.legal h1 {
  margin: 0 0 6px; font-size: clamp(1.8rem, 4vw, 2.5rem);
  font-weight: 800; letter-spacing: -0.025em;
}
.legal .effective {
  margin: 0 0 30px; padding-bottom: 22px;
  border-bottom: 2px solid var(--ink);
  font-size: 13px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--muted); line-height: 1.7;
}
.legal h2 {
  margin: 34px 0 10px; font-size: 1.08rem; font-weight: 800;
  letter-spacing: -0.01em;
}
.legal p { margin: 0 0 14px; }
.legal a { font-weight: 600; }
.legal-back {
  display: inline-flex; align-items: center; gap: 8px;
  margin-bottom: 26px; min-height: 44px;
  font-size: 15px; font-weight: 700; text-decoration: none;
  color: var(--primary-dark);
}
.legal-back:hover { text-decoration: underline; }