/* 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);

  /* ---- type scale ----
     Eight one-off sizes had accumulated (11, 12.5, 13, 13.5, 14, 14.5, 15,
     15.5) doing the work of three. Every font-size on this page now comes
     from this ramp; a literal size in a rule below is a bug.

     SIX SIZES. THAT IS THE WHOLE SET. See TYPOGRAPHY.md before adding one.

     fine  12  — fine print only: the copyright line and legal effective dates
     small 15  — uppercase labels, buttons, footer, sub-notes
     body  17  — running copy, captions and list items
     lede  ~19 — the opening paragraph
     head  ~28 — section headings, mission and vision, schedule figures,
                 the contact address
     disp  ~56 — the opening statement

     Two steps have been retired rather than kept "just in case": the 38px
     figure step (owner, 2026-08-07) and a separate ~26px statement step,
     which sat close enough to the heading size to read as a mistake rather
     than a decision.                                                      */
  --fs-fine: 12px;
  --fs-small: 15px;
  --fs-body: 17px;
  --fs-lede: clamp(1.12rem, 1.5vw, 1.2rem);
  --fs-head: clamp(1.35rem, 2.4vw, 1.75rem);
  --fs-display: clamp(2.15rem, 5vw, 3.5rem);
}

* { 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: var(--fs-body);
  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: var(--fs-small); 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;
}
/* Five section buttons, all one weight — a sheet index lists its sheets
   without ranking them. */
.index-sheets a {
  display: inline-flex; align-items: center;
  flex: 0 0 auto; white-space: nowrap;
  min-height: 42px; padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--ink); text-decoration: none;
  font-size: var(--fs-small); font-weight: 600; line-height: 1.2;
  transition: background-color .16s ease-out, border-color .16s ease-out,
              color .16s ease-out;
}
.index-sheets a:hover {
  background: var(--primary-soft);
  border-color: var(--primary);
  color: var(--primary-dark);
}
/* Contact Us is an action, not a section to browse — filled like Sign in.
   The two blues bracket the row; the three plain buttons between them stay
   plain, which is what keeps the pair reading as the things to do. */
.index-sheets a.nav-cta {
  background: var(--primary); border-color: var(--primary); color: #fff;
}
.index-sheets a.nav-cta:hover {
  background: var(--primary-dark); border-color: var(--primary-dark); color: #fff;
}

/* 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: var(--fs-small); font-weight: 800; letter-spacing: .08em;
  color: var(--primary); font-variant-numeric: tabular-nums;
}

/* Sign in leaves the site. Same height as the section buttons so the row stays
   level, but solid blue with an exit arrow — a door, not a menu item. The five
   section buttons are white and bordered, so the fill is what separates them. */
.btn-signin {
  flex: 0 0 auto; gap: 8px;
  min-height: 42px; padding: 10px 18px; font-size: var(--fs-small);
  background: var(--primary); color: #fff; border-color: var(--primary);
}
.btn-signin:hover { background: var(--primary-dark); border-color: var(--primary-dark); }
.btn-signin svg {
  width: 15px; height: 15px; flex: 0 0 auto;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}

@media (max-width: 1100px) {
  .index { flex-wrap: wrap; row-gap: 8px; padding: 10px var(--gutter); }
  .btn-signin { order: 2; margin-left: auto; }
  .index-sheets {
    order: 3; width: 100%; margin-left: 0;
    justify-content: flex-start; gap: 8px;
    padding-top: 8px; margin-top: 2px;
    border-top: 1px solid var(--line);
    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;
}

/* Ink, not blue — tried in blue 2026-08-07 and reverted by the owner. The
   statement carries itself on weight and scale; blue is spent on the actions. */
.titleblock h1 {
  margin: 0 0 22px;
  font-size: var(--fs-display);
  font-weight: 800; line-height: 1.06; letter-spacing: -0.03em;
  text-wrap: balance;
  max-width: 15ch;
}
.lede {
  margin: 0 0 32px;
  font-size: var(--fs-lede);
  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: var(--fs-small); 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);
  /* No trailing margin: the record table this used to sit above is gone, and
     the section's own padding now closes the sheet. */
}
.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: var(--fs-small); 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;
}
/* Lede size, regular weight (owner, 2026-08-07). A mission statement set at
   heading size and bold reads as shouting; at reading size it reads as meant. */
/* Identical to .lede in every respect except colour — same size, weight,
   leading and tracking. They were already the same size; the tighter leading
   and the negative tracking were what made this block read as larger. */
.statement p {
  margin: 0; color: #fff;
  font-size: var(--fs-lede);
  font-weight: 400; line-height: 1.62; letter-spacing: normal;
  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 ──────────────────────────────────────────────────── */

/* Two sections stack their padding, so this figure is halved on the page:
   at the top of the clamp the gap between sheets reads about 96px, not 184.
   Still more space above a heading than below it. */
.sheet {
  max-width: var(--page); margin: 0 auto;
  padding: clamp(28px, 3.4vw, 48px) var(--gutter);
  scroll-margin-top: 92px;
}
.sheet-title {
  display: flex; align-items: baseline; gap: 12px;
  margin: 0 0 clamp(22px, 3vw, 32px);
  padding-bottom: 14px;
  border-bottom: 2px solid var(--ink);
  font-size: var(--fs-head);
  font-weight: 800; letter-spacing: -0.02em;
}
/* The sheet number sits at the heading's own size — it addresses the sheet,
   it is not a label above it. Blue and tabular so it still reads as an index
   reference rather than as part of the sentence. */
.sheet-title .sheet-no {
  font-size: inherit; font-weight: 800; letter-spacing: -0.01em;
}

/* Section bodies. Measure held to a readable line; the schedules inside are
   free to run the full width. */
.sheet-body > p { margin: 0 0 14px; max-width: 68ch; }
.sheet-body > p:last-child { margin-bottom: 0; }

/* The product gets a sheet of its own — it is the one thing on this page a
   visitor can act on today. */
.product-panel {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius-xl);
  padding: clamp(26px, 3.5vw, 38px);
  box-shadow: var(--small-shadow);
}
.product-panel > p { margin: 0 0 14px; max-width: 68ch; }
.product-panel > p:last-child { margin-bottom: 0; }
.product-action { margin: 0 0 24px !important; }

/* What is coming, marked as coming, and sitting inside the figure it qualifies
   so there is no doubt what is expanding. The library covers residential
   accessory work today and the page must never imply otherwise. */
.schedule-forward {
  display: block;
  margin-top: 10px;
  padding-left: 12px;
  border-left: 2px solid var(--primary);
  font-size: var(--fs-small); line-height: 1.45; color: var(--primary-dark);
  font-weight: 700;
}


/* 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: var(--fs-small); 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: var(--fs-head); font-weight: 800;
  line-height: 1; letter-spacing: -0.035em; color: var(--primary);
  font-variant-numeric: tabular-nums;
}
/* Body size, matching the topics beside them — a caption and a list item
   sitting side by side at different sizes read as an accident. */
.schedule-figures dd {
  margin: 9px 0 0;
  font-size: var(--fs-body); line-height: 1.45; color: var(--muted);
}

/* Two short figures read better across than down: equal columns left a hole
   between them and wrapped the captions for no reason. Here the number and
   its caption sit on one baseline and the pair sizes to its content. */
/* One grid, two columns, so both figures share a number column and the
   captions start on the same line. The wrappers go transparent to the grid
   (display: contents) — otherwise each row sizes itself and the captions
   come out ragged. */
.schedule-figures-2 {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 18px 16px;
  align-items: baseline;
  max-width: none;
}
.schedule-figures-2 > div { display: contents; }
.schedule-figures-2 dt {
  text-align: center;
}
/* The caption wraps rather than running on: a narrower figures block is what
   frees the right-hand space for the topics beside it. */
.schedule-figures-2 dd { margin: 0; max-width: 24ch; }

/* Figures left, subject areas right, on one line — the schedule was leaving
   half the sheet empty. */
.schedule-split {
  display: flex; flex-wrap: wrap;
  gap: clamp(28px, 5vw, 72px);
  align-items: flex-start;
}
.schedule-split .schedule-col { flex: 1 1 320px; min-width: 0; }
.schedule-split .schedule-title { margin-bottom: 18px; }

/* 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-direction: column; gap: 12px;
}
/* Regular weight, like the figure captions opposite. The icons carry the
   emphasis, so the text does not need to shout as well. */
.topics li {
  display: flex; align-items: center; gap: 11px;
  font-size: var(--fs-body); font-weight: 400; line-height: 1.35;
}
/* Drawn in the same hand as every other mark on the page: one stroke weight,
   round joins, no icon font and no emoji. */
.topic-icon {
  flex: 0 0 auto; width: 21px; height: 21px;
  fill: none; stroke: var(--primary); stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}

/* 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: -15px; left: 0;
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px;
  border-radius: 999px;
  background: var(--primary); color: #fff;
  font-size: var(--fs-small); 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: var(--fs-body); font-weight: 800; letter-spacing: -0.01em;
}
.rounds span:not(.rounds-no) {
  display: block; font-size: var(--fs-small); line-height: 1.45; color: var(--muted);
}
@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(40px, 5vw, 68px); }
/* 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: var(--fs-body); }
.signblock-mail { margin: 0; }
.signblock-mail a {
  font-size: var(--fs-head);
  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: var(--fs-small); 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: var(--fs-small); 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: var(--fs-fine); 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: var(--fs-head);
  font-weight: 800; letter-spacing: -0.025em;
}
.legal .effective {
  margin: 0 0 30px; padding-bottom: 22px;
  border-bottom: 2px solid var(--ink);
  font-size: var(--fs-fine); font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--muted); line-height: 1.7;
}
.legal h2 {
  margin: 34px 0 10px; font-size: var(--fs-body); 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: var(--fs-small); font-weight: 700; text-decoration: none;
  color: var(--primary-dark);
}
.legal-back:hover { text-decoration: underline; }