/* =====================================================================
   AI Oversight — The Private Director's Body of Knowledge
   Brand: Private Directors Association (primary) · Center for AI Oversight (co-developer)
   PDA palette: deep navy ink + signature cyan.  Type: Cormorant Garamond + DM Sans.
   ===================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400;1,500;1,600&display=swap');

:root{
  /* PDA brand */
  --navy-deep:  #0e3372;   /* cover / darkest field */
  --navy:       #0e3372;   /* part dividers, headers */
  --navy-mid:   #163654;   /* gradient mid */
  --ink:        #16273A;   /* headings on light */
  --cyan:       #029cce;   /* signature accent */
  --cyan-bright:#37B2E8;   /* accent on dark / hover */
  --cyan-ink:   #029cce;   /* accent text on light (legible) */

  /* neutrals */
  --body:       #34434F;   /* body text on light */
  --muted:      #6A7A89;   /* captions, metadata */
  --silver:     #AFC0CE;   /* body on dark */
  --pearl:      #E2E9EF;   /* hairlines, borders */
  --pearl-2:    #EEF2F6;   /* subtle fills */
  --warm-white: #F5F7FA;   /* page field */
  --white:      #FFFFFF;

  --gold:       #B8902F;   /* CFAIO co-developer nod, used sparingly */

  --font-display: 'Montserrat', sans-serif;
  --font-body: 'Montserrat', sans-serif;

  --measure: 39rem;        /* reading column ~ 70-74ch */
  --sheet: 54rem;          /* full sheet width incl. wide elements */
  --tracking-label: 0.18em;
}

*{ box-sizing: border-box; }
html{ -webkit-text-size-adjust:100%; scroll-padding-top: 130px; scroll-behavior: smooth; }
body{
  margin:0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.72;
  color: var(--body);
  background: var(--warm-white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ============ PAGE / SHEET ============ */
.doc{ width:100%; }
.sheet{
  max-width: var(--sheet);
  margin: 0 auto;
  padding: 0 clamp(22px, 6vw, 84px);
}
.flow > * + *{ margin-top: 1.05em; }
.measure{ max-width: var(--measure); }

/* ============ TYPE ============ */
h1,h2,h3,h4{ font-family: var(--font-display); color: var(--ink); margin:0; line-height:1.15; font-weight:600; }
p{ margin:0; }
strong{ font-weight:600; color: var(--ink); }
em{ font-style: italic; }
a{ color: var(--cyan-ink); text-decoration: none; }
a:hover{ text-decoration: underline; }

.kicker{
  font-family: var(--font-body);
  font-weight:600;
  font-size: 12px;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--cyan-ink);
}
.rule{ width:54px; height:3px; background:var(--cyan); border:0; margin:0; }

/* ============ COVER ============ */
.cover{
  min-height: 100vh;
  display:flex; flex-direction:column;
  background:
     radial-gradient(110% 70% at 88% 4%, rgba(20,153,214,0.22) 0%, rgba(20,153,214,0.05) 40%, transparent 72%),
     linear-gradient(168deg, var(--navy) 0%, var(--navy-deep) 78%);
  color:#fff; position:relative; overflow:hidden;
}
/* full-width white letterhead masthead — PDA is the owner, set dominant */
.cover__masthead{
  background:#fff; display:flex; justify-content:space-between; align-items:center;
  gap:24px; padding: 26px clamp(28px,7vw,104px);
  box-shadow: 0 8px 30px rgba(0,0,0,0.18);
}
.brand-owner{ display:flex; flex-direction:column; gap:9px; }
.brand-owner__label{ font-family:var(--font-body); font-weight:700; font-size:9.5px; letter-spacing:.26em; text-transform:uppercase; color:var(--cyan-ink); }
.brand-pda{ height:124px; width:auto; display:block; }
.brand-right{ display:flex; align-items:center; gap:18px; padding-left:26px; border-left:1px solid var(--pearl); }
.brand-with{ font-family:var(--font-body); font-weight:600; font-size:9px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); white-space:nowrap; }
.brand-cfaio{ height:62px; width:auto; display:block; }

/* navy title field with inset keyline frame */
.cover__field{
  flex:1; display:grid; grid-template-rows: 1fr auto; position:relative;
  padding: clamp(46px,7vw,92px) clamp(40px,8vw,112px) clamp(36px,4vw,60px);
}
.cover__field::before{
  content:""; position:absolute; inset: clamp(16px,2.4vw,30px);
  border:1px solid rgba(55,178,232,0.26); border-radius:3px; pointer-events:none;
}
.cover__field::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:6px; background:var(--cyan); }

.cover__frame{ align-self:center; }
.cover__eyebrow{
  display:flex; align-items:center; gap:14px;
  font-weight:600; font-size:13px; letter-spacing:.2em; text-transform:uppercase; color:var(--cyan-bright);
}
.cover__eyebrow::before{ content:""; flex:0 0 auto; width:30px; height:1px; background:var(--cyan-bright); opacity:.7; }
.cover__title{
  color:#fff; font-weight:600; font-size: clamp(54px, 8.5vw, 112px);
  line-height:0.96; letter-spacing:-0.015em; margin:.22em 0 0;
}
.cover__rule{ border:0; width:72px; height:3px; background:var(--cyan); margin:1.9rem 0; }
.cover__sub{
  font-family:var(--font-display); font-weight:500; font-style:italic;
  font-size: clamp(25px,3.4vw,42px); line-height:1.12; color:#E6EEF4; max-width:18ch;
}
.cover__base{
  align-self:end; display:flex; justify-content:space-between; align-items:flex-end;
  gap:24px; flex-wrap:wrap; padding-top:1.6rem;
}
.cover__base > span{ color:#C9D6E0; font-size:13.5px; line-height:1.5; max-width:42ch; }
.cover__base strong{ color:#EAF1F6; font-weight:600; }
.cover__meta{
  display:flex; gap:24px; flex-wrap:wrap;
  font-size:11.5px; letter-spacing:0.14em; text-transform:uppercase; color:var(--cyan-bright);
}
.cover__meta span{ position:relative; white-space:nowrap; }
.cover__meta span + span{ padding-left:24px; }
.cover__meta span + span::before{ content:""; position:absolute; left:0; top:50%; width:1px; height:11px; background:rgba(255,255,255,0.26); transform:translateY(-50%); }
@media (max-width:600px){
  .brand-pda{ height:38px; } .brand-cfaio{ height:38px; } .brand-with{ display:none; }
  .cover__base{ flex-direction:column; align-items:flex-start; }
}

/* ============ TABLE OF CONTENTS ============ */
.toc{ background:var(--warm-white); padding: clamp(56px,9vw,116px) 0 clamp(48px,8vw,100px); }
.toc__inner{ max-width: 60rem; margin:0 auto; padding:0 clamp(22px,6vw,84px); }
.toc__masthead .kicker{ display:block; }
.toc__masthead h2{ font-size: clamp(42px,6vw,64px); margin:.35rem 0 0; line-height:1; }
.toc__masthead .rule{ margin-top:1.3rem; width:64px; }

.toc__grid{ margin-top: clamp(30px,4.5vw,52px); border-bottom:1px solid var(--pearl); }

.toc-part{
  display:grid; grid-template-columns: 88px 1fr; gap: clamp(18px,3vw,42px);
  padding: clamp(22px,3vw,30px) 0; border-top:1px solid var(--pearl); align-items:start;
}
.toc-part__num{
  font-family:var(--font-display); font-weight:500; font-style:italic;
  font-size: clamp(48px,6vw,68px); line-height:.82; color:var(--cyan);
}
.toc-part__kick{ display:block; font-family:var(--font-body); font-weight:600; font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); margin-top:.5rem; }
.toc-part__title{ display:block; font-family:var(--font-display); font-weight:600; font-size: clamp(25px,3vw,31px); color:var(--ink); line-height:1.1; }
.toc-part__title:hover{ color:var(--cyan-ink); }
.toc-part__secs{ list-style:none; margin:1.1rem 0 0; padding:0; display:grid; gap:.55rem; }
.toc-part__secs a{ display:flex; gap:16px; align-items:baseline; color:var(--body); font-size:16px; }
.toc-part__secs a:hover{ color:var(--cyan-ink); }
.sno{ font-family:var(--font-body); font-weight:700; font-size:12px; letter-spacing:.06em; color:var(--cyan-ink); min-width:2em; }

.toc-item{
  display:flex; justify-content:space-between; align-items:baseline; gap:20px;
  padding: clamp(15px,1.8vw,19px) 0; border-top:1px solid var(--pearl);
}
.toc-item__t{ font-family:var(--font-display); font-weight:600; font-size: clamp(20px,2.4vw,24px); color:var(--ink); line-height:1.15; }
.toc-item:hover .toc-item__t{ color:var(--cyan-ink); }
.toc-item__k{ font-family:var(--font-body); font-weight:600; font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--cyan-ink); white-space:nowrap; }
.toc-item--indent{ padding-left: calc(88px + clamp(18px,3vw,42px)); }
.toc-item--indent .toc-item__t{ font-size: clamp(17px,2vw,20px); font-weight:500; }
.section-dek{ font-family:var(--font-display); font-style:italic; font-size:20px; color:var(--muted); max-width:var(--measure); }
.figcaption{ font-size:14px; color:var(--muted); font-style:italic; max-width:var(--measure); margin-top:.5rem; }
.program-figure{ max-width:var(--sheet); margin:2rem 0; padding:32px; background:var(--white); border:1px solid var(--pearl); border-radius:12px; box-shadow:0 1px 2px rgba(14,39,64,.04), 0 12px 34px rgba(14,39,64,.06); }
.program-figure img{ display:block; width:100%; max-width:720px; height:auto; margin:0 auto; }
.program-figure figcaption{ font-size:14.5px; color:var(--muted); font-style:italic; text-align:center; margin-top:1.2rem; max-width:60ch; margin-left:auto; margin-right:auto; line-height:1.5; }
@media (max-width:600px){
  .toc-part{ grid-template-columns: 56px 1fr; gap:16px; }
  .toc-item--indent{ padding-left:0; }
}

/* ============ PART DIVIDER ============ */
.part{
  background:
     radial-gradient(120% 90% at 85% 12%, rgba(20,153,214,0.18) 0%, transparent 60%),
     linear-gradient(170deg, var(--navy) 0%, var(--navy-deep) 100%);
  color:#fff; padding: clamp(70px,12vw,150px) 0; position:relative;
}
.part .sheet{ }
.part__num{
  font-family:var(--font-display); font-weight:500; font-style:italic;
  font-size: clamp(40px,7vw,76px); color: rgba(55,178,232,0.55); line-height:1;
}
.part h2{
  color:#fff; font-size: clamp(40px,6.2vw,72px); line-height:1.02; margin-top:.18em; max-width:16ch;
}
.part__dek{ color:var(--silver); font-size:18px; margin-top:1.2rem; max-width:48ch; }
.part__rule{ width:64px; height:3px; background:var(--cyan); margin:1.6rem 0 0; }

/* ============ SECTION (Heading1 front/back, Section heading) ============ */
.section{ padding: clamp(46px,7vw,82px) 0 0; }
.section__head{ margin-bottom: 2rem; }
.section__head .kicker{ display:block; margin-bottom:.7rem; }
.section h1{ font-size: clamp(34px,4.6vw,50px); line-height:1.06; }
.section h1 + .rule{ margin-top:1.1rem; }
.section .lead{ font-size:19px; color:var(--ink); margin-top:1.2rem; max-width:var(--measure); }

.sec2{ margin-top: clamp(40px,6vw,70px); padding-top:2.2rem; border-top:2px solid var(--ink); }
.sec2__label{ display:block; }
.sec2 h2{ font-size: clamp(27px,3.6vw,36px); line-height:1.08; margin-top:.5rem; color:var(--ink); }
.sec2 > .intro{ margin-top:1rem; max-width:var(--measure); }

h3.sub{ font-size: clamp(22px,2.7vw,27px); margin-top:2.4rem; color:var(--ink); }
h3.sub .n{ color:var(--cyan-ink); font-weight:600; margin-right:.5ch; }

.body-block{ max-width:var(--measure); }
.body-block p{ margin-top:1.02em; }
.body-block p:first-child{ margin-top:0; }

/* lists */
ul.bok{ max-width:var(--measure); margin:1.1em 0 0; padding:0; list-style:none; }
ul.bok li{ position:relative; padding-left:1.5em; margin-top:.62em; }
ul.bok li::before{
  content:""; position:absolute; left:0; top:.62em; width:7px; height:7px;
  background:var(--cyan); border-radius:1px; transform:rotate(45deg);
}

/* ============ CALLOUTS ============ */
.callout{ max-width:var(--sheet); margin:2rem 0; border-radius:10px; overflow:hidden; }

/* Case in Point */
.case{
  background:var(--white); border:1px solid var(--pearl);
  border-left:4px solid var(--cyan);
  box-shadow: 0 1px 2px rgba(14,39,64,.04), 0 10px 30px rgba(14,39,64,.06);
  padding: 28px 32px;
}
.case__tag{
  font-family:var(--font-body); font-weight:600; font-size:11.5px;
  letter-spacing:var(--tracking-label); text-transform:uppercase; color:var(--cyan-ink);
}
.case__title{ font-family:var(--font-display); font-weight:600; font-size:24px; color:var(--ink); margin:.2rem 0 .9rem; line-height:1.12; }
.case p{ margin-top:.85em; font-size:16px; }
.case .lesson{ margin-top:1.1em; padding-top:1.1em; border-top:1px solid var(--pearl); }
.case .lesson em:first-child{ color:var(--cyan-ink); font-style:normal; font-weight:600; }

/* Director's Focus */
.focus{
  background: linear-gradient(168deg, var(--navy) 0%, var(--navy-deep) 100%);
  color:#fff; padding:32px 34px;
  border-radius:10px;
}
.focus__tag{
  font-weight:600; font-size:11.5px; letter-spacing:var(--tracking-label);
  text-transform:uppercase; color:var(--cyan-bright);
}
.focus__title{ font-family:var(--font-display); font-weight:600; font-size:26px; color:#fff; margin:.3rem 0 1rem; }
.focus p{ color:#E7EEF3; font-size:16px; margin-top:.8em; }
.focus .qlabel{ color:#fff; font-weight:600; font-style:normal; margin-top:1.3em; display:block; font-size:15px; letter-spacing:.01em; }
.focus ul.bok{ max-width:none; }
.focus ul.bok li{ color:#DCE6ED; font-size:15.5px; }
.focus ul.bok li::before{ background:var(--cyan-bright); }
.focus strong, .focus b { color: #fff; }

/* Generic note callout (Illustrative events etc.) */
.note{
  background:var(--white); border:1px solid var(--pearl); border-top:3px solid var(--cyan);
  padding:28px 32px; box-shadow:0 1px 2px rgba(14,39,64,.04), 0 8px 24px rgba(14,39,64,.05);
}
.note__title{ font-family:var(--font-display); font-weight:600; font-size:23px; color:var(--ink); margin:0 0 .8rem; }
.note p{ font-size:16px; margin-top:.8em; }
.note .qlabel{ display:block; font-weight:600; color:var(--cyan-ink); margin-top:1.3em; font-size:13px; letter-spacing:.04em; text-transform:uppercase; }
.note ul.bok{ max-width:none; }

/* ============ TABLES ============ */
.tablewrap{ max-width:var(--sheet); margin:1.8rem 0; overflow-x:auto; }
table.bok{
  width:100%; border-collapse:collapse; font-size:14.5px; line-height:1.5;
  background:var(--white); border:1px solid var(--pearl); border-radius:8px;
}
table.bok th, table.bok td{ text-align:left; vertical-align:top; padding:13px 16px; border-bottom:1px solid var(--pearl); border-right:1px solid var(--pearl); }
table.bok th{
  background:var(--navy); color:#fff; font-family:var(--font-body); font-weight:600;
  font-size:12.5px; letter-spacing:.04em; text-transform:uppercase;
}
table.bok tr:last-child td{ border-bottom:0; }
table.bok th:last-child, table.bok td:last-child{ border-right:0; }
table.bok tbody tr:nth-child(even){ background:var(--pearl-2); }
/* leading row-label column */
table.bok td.rowlab{ font-weight:600; color:var(--ink); background:var(--pearl-2); }
table.bok tbody tr:nth-child(even) td.rowlab{ background:#E6ECF2; }

/* RACI badges */
.raci{ display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; border-radius:5px; font-weight:600; font-size:12.5px; }
.raci-A{ background:var(--navy); color:#fff; }
.raci-R{ background:rgba(20,153,214,.16); color:var(--cyan-ink); }
.raci-M{ background:var(--pearl); color:var(--body); }
.raci-legend{ display:flex; gap:20px; flex-wrap:wrap; margin-top:.9rem; font-size:13.5px; color:var(--muted); }
.raci-legend span{ display:inline-flex; align-items:center; gap:7px; }

/* ============ TOOL PAGES ============ */
.tool .section__head .kicker{ color:var(--cyan-ink); }
.toolcard{
  max-width:var(--sheet); background:var(--white); border:1px solid var(--pearl);
  border-radius:10px; padding: clamp(24px,4vw,40px); margin-top:1.6rem;
  box-shadow:0 1px 2px rgba(14,39,64,.04), 0 10px 30px rgba(14,39,64,.05);
}
.qgroup{ margin-top:1.6rem; }
.qgroup:first-child{ margin-top:0; }
.qgroup h4{
  font-family:var(--font-body); font-weight:600; font-size:12px; letter-spacing:var(--tracking-label);
  text-transform:uppercase; color:var(--cyan-ink); margin:0 0 .2rem; padding-bottom:.5rem; border-bottom:1px solid var(--pearl);
}
ol.qlist{ list-style:none; counter-reset:q; margin:.7rem 0 0; padding:0; max-width:var(--sheet); }
ol.qlist li{ position:relative; padding-left:2.4em; margin-top:.7em; counter-increment:q; }
ol.qlist li::before{
  content:counter(q); position:absolute; left:0; top:-.05em;
  width:1.7em; height:1.7em; display:flex; align-items:center; justify-content:center;
  font-family:var(--font-body); font-weight:600; font-size:12.5px; color:var(--cyan-ink);
  background:rgba(20,153,214,.12); border-radius:50%;
}

/* ============ GLOSSARY ============ */
.glossary{ max-width:var(--sheet); }
.gloss-cat{ font-family:var(--font-body); font-weight:600; font-size:12px; letter-spacing:var(--tracking-label); text-transform:uppercase; color:var(--cyan-ink); margin:2rem 0 .4rem; }
.gloss-item{ padding:.85rem 0; border-bottom:1px solid var(--pearl); max-width:var(--measure); }
.gloss-item .term{ font-family:var(--font-display); font-weight:600; font-size:19px; color:var(--ink); }
.gloss-item p{ margin-top:.25rem; font-size:15.5px; }
.gloss-item .src{ color:var(--muted); font-style:italic; }

/* ============ PILLAR / DOMAIN (Appendix B) ============ */
.pillar{ max-width:var(--sheet); margin-top:1.4rem; border:1px solid var(--pearl); border-radius:10px; overflow:hidden; background:var(--white); }
.pillar__hd{ display:flex; align-items:baseline; gap:16px; padding:18px 24px; background:var(--navy); color:#fff; }
.pillar__no{ font-family:var(--font-display); font-style:italic; font-size:30px; color:var(--cyan-bright); line-height:1.1; flex:0 0 auto; }
.pillar__hd h4{ font-family:var(--font-display); font-weight:600; font-size:22px; color:#fff; margin:0; line-height:1.18; }
.pillar__hd .meta{ margin-left:auto; align-self:center; font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--silver); flex:0 0 auto; }
.pillar__body{ padding:6px 24px 8px; }
.domain{ display:flex; gap:16px; padding:14px 0; border-bottom:1px solid var(--pearl); }
.domain:last-child{ border-bottom:0; }
.domain__n{ flex:0 0 auto; font-weight:600; color:var(--cyan-ink); font-size:14px; min-width:2.6em; }
.domain__t{ font-size:15.5px; }
.domain__t b{ color:var(--ink); }

/* ============ DRAFT FOOTER NOTE ============ */
.draftnote{ max-width:var(--sheet); margin:2.4rem 0 0; padding-top:1rem; border-top:1px solid var(--pearl);
  font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }

/* ============ BACK MATTER ============ */
.contrib{ max-width:var(--sheet); display:grid; grid-template-columns:1fr 1fr; gap:28px; margin:2rem 0; }
.contrib .org{ background:var(--white); border:1px solid var(--pearl); border-top:3px solid var(--cyan); border-radius:10px; padding:28px 30px; }
.contrib .org h4{ font-family:var(--font-display); font-weight:600; font-size:22px; color:var(--ink); margin:0 0 .6rem; line-height:1.16; }
.contrib .org p{ font-size:15.5px; }
.contrib .org p + p{ margin-top:.8em; }
.ack{ max-width:var(--measure); margin-top:1.4rem; }
.ack > p{ margin-top:1.05em; }
.ack > p:first-child{ margin-top:0; }
.ack-person{ display:flex; flex-direction:column; gap:2px; margin-top:1rem; padding:14px 20px; background:var(--white); border:1px solid var(--pearl); border-left:3px solid var(--cyan); border-radius:6px; }
.ack .name{ font-family:var(--font-display); font-weight:600; font-size:20px; color:var(--ink); }
.ack .role{ color:var(--muted); font-size:14px; }
.ack .names{ display:grid; grid-template-columns:repeat(3,1fr); gap:2px 28px; margin-top:1.1rem; padding-top:.9rem; border-top:1px solid var(--pearl); }
.ack .names div{ break-inside:avoid; padding:.34rem 0; font-weight:500; color:var(--ink); font-size:15.5px; }

/* ============ FOOTER ============ */
.docfoot{ background:var(--navy-deep); color:var(--silver); padding:48px 0; margin-top:0; }
.docfoot .sheet{ display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap; align-items:flex-start; }
.docfoot .wm{ display:block; color:#fff; font-family:var(--font-display); font-size:22px; line-height:1.12; margin-bottom:7px; }
.docfoot a{ color:var(--cyan-bright); }
.docfoot small{ display:block; font-size:12.5px; letter-spacing:.04em; line-height:1.7; }

/* generic subheads (Appendix A term heads, etc.) */
h4.subhead{
  font-family:var(--font-display); font-weight:600; font-size:22px; color:var(--ink);
  margin:2.2rem 0 .3rem; max-width:var(--measure);
}
h4.subhead + .body-block{ margin-top:.2rem; }
strong.gi{ color:var(--cyan-ink); font-weight:600; }

/* ============ RESPONSIVE ============ */
@media (max-width: 720px){
  body{ font-size:16px; }
  .ack .names{ grid-template-columns:1fr; }
  .contrib{ grid-template-columns:1fr; }
}

/* ============ PRINT ============ */
@media print{
  body{ background:#fff; font-size:11pt; }
  .cover{ min-height:auto; height:100vh; page-break-after:always; }
  .part{ page-break-before:always; page-break-inside:avoid; }
  .section--break{ page-break-before:always; }
  .callout, .tablewrap, .toolcard, .pillar, .case, .focus, .note{ page-break-inside:avoid; }
  h3.sub{ page-break-after:avoid; }
  .docfoot{ display:none; }
  a{ color:var(--ink); }
}