/* ══════════════════════════════════════
   WTCM — Complete Blueprint Document (print / PDF view)
   ══════════════════════════════════════ */
body { font-family: 'Barlow', sans-serif; background: #0A0A0A; color: #fff; margin: 0; padding: 0; }
.print-bar { background: #F5C800; padding: .85rem 2rem; display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 100; gap: 1rem; }
.print-bar-left { font-family: 'Barlow Condensed', sans-serif; font-weight: 900; font-size: 1rem; color: #000; letter-spacing: .06em; text-transform: uppercase; }
.print-bar-left span { font-size: .65rem; display: block; font-weight: 600; letter-spacing: .18em; opacity: .6; }
.print-btn { background: #000; color: #F5C800; border: none; padding: .55rem 1.4rem; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: .85rem; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; border-radius: 2px; white-space: nowrap; }
.print-btn:hover { opacity: .85; }
.page-wrap { max-width: 860px; margin: 2rem auto; padding: 0 1.5rem 4rem; }

/* PDF PAGE */
.pdf-page { background: #fff; color: #111; border-radius: 4px; padding: 0; margin-bottom: 2rem; box-shadow: 0 4px 40px rgba(0,0,0,.4); overflow: hidden; }

/* COVER PAGE */
.cover { background: #0A0A0A; padding: 60px 56px; min-height: 380px; display: flex; flex-direction: column; justify-content: space-between; }
.cover-top { display: flex; align-items: center; gap: 1rem; }
.cover-star { width: 48px; height: 48px; background: #F5C800; clip-path: polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%); flex-shrink: 0; }
.cover-org { font-family: 'Barlow Condensed', sans-serif; font-weight: 900; font-size: 1.4rem; color: #fff; text-transform: uppercase; letter-spacing: .06em; line-height: 1.1; }
.cover-org span { color: #F5C800; display: block; font-size: .7rem; letter-spacing: .22em; font-weight: 600; }
.cover-mid { margin-top: 3rem; }
.cover-eyebrow { font-family: 'Barlow Condensed', sans-serif; font-size: .7rem; font-weight: 700; letter-spacing: .3em; text-transform: uppercase; color: #F5C800; margin-bottom: 1rem; display: flex; align-items: center; gap: .75rem; }
.cover-eyebrow::before { content: ''; width: 36px; height: 2px; background: #F5C800; display: inline-block; }
.cover-title { font-family: 'Barlow Condensed', sans-serif; font-weight: 900; font-size: clamp(2.1rem, 6vw, 3.6rem); line-height: .88; text-transform: uppercase; color: #fff; }
.cover-title .hl { color: #F5C800; }
.cover-title .outline { -webkit-text-stroke: 2px #F5C800; color: transparent; }
.cover-sub { font-family: 'Barlow Condensed', sans-serif; font-size: 1.1rem; font-weight: 600; color: rgba(255,255,255,.45); letter-spacing: .1em; text-transform: uppercase; margin-top: 1rem; }
.cover-bottom { display: flex; justify-content: space-between; align-items: flex-end; margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid rgba(245,200,0,.2); flex-wrap: wrap; gap: 1rem; }
.cover-meta p { font-size: .8rem; color: rgba(255,255,255,.4); line-height: 1.8; }
.cover-meta strong { color: #F5C800; }
.cover-version { font-family: 'Barlow Condensed', sans-serif; font-weight: 900; font-size: 2rem; color: rgba(245,200,0,.2); }

/* SECTION DIVIDER */
.section-divider { background: #F5C800; padding: 1rem 56px; display: flex; align-items: center; gap: 1rem; }
.div-num { font-family: 'Barlow Condensed', sans-serif; font-weight: 900; font-size: 2.5rem; color: rgba(0,0,0,.2); line-height: 1; }
.div-title { font-family: 'Barlow Condensed', sans-serif; font-weight: 900; font-size: 1.3rem; color: #000; text-transform: uppercase; letter-spacing: .06em; line-height: 1; }
.div-sub { font-size: .72rem; color: rgba(0,0,0,.5); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; margin-top: .15rem; }

/* BODY CONTENT */
.body { padding: 40px 56px; }
.body h2 { font-family: 'Barlow Condensed', sans-serif; font-weight: 900; font-size: 1.5rem; text-transform: uppercase; letter-spacing: .04em; color: #0A0A0A; margin: 2rem 0 .75rem; border-bottom: 2px solid #F5C800; padding-bottom: .4rem; }
.body h3 { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 1.05rem; text-transform: uppercase; letter-spacing: .06em; color: #0A0A0A; margin: 1.5rem 0 .5rem; }
.body p { font-size: .88rem; line-height: 1.8; color: #333; margin-bottom: .75rem; }
.body ul, .body ol { padding-left: 1.25rem; margin-bottom: .75rem; }
.body li { font-size: .85rem; line-height: 1.75; color: #333; margin-bottom: .2rem; }
.eyebrow { font-size: .65rem; font-weight: 700; letter-spacing: .25em; text-transform: uppercase; color: #F5C800; margin-bottom: .35rem; display: flex; align-items: center; gap: .5rem; }
.eyebrow::before { content: ''; width: 24px; height: 2px; background: #F5C800; display: inline-block; }

/* PROCESS BOXES */
.process-flow { display: flex; flex-direction: column; gap: .75rem; margin: 1rem 0; }
.proc-step { display: grid; grid-template-columns: 44px 1fr; gap: 1rem; align-items: start; background: #F8F8F8; border-left: 4px solid #F5C800; padding: 1rem; border-radius: 0 3px 3px 0; }
.proc-step.purple-l { border-left-color: #6B3FA0; }
.proc-step.green-l { border-left-color: #2D7A3A; }
.proc-step.orange-l { border-left-color: #E06A00; }
.proc-num { font-family: 'Barlow Condensed', sans-serif; font-weight: 900; font-size: 1.6rem; color: #F5C800; line-height: 1; }
.proc-num.purple { color: #6B3FA0; }
.proc-num.green { color: #2D7A3A; }
.proc-num.orange { color: #E06A00; }
.proc-title { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: .9rem; text-transform: uppercase; letter-spacing: .05em; color: #0A0A0A; margin-bottom: .25rem; }
.proc-desc { font-size: .8rem; color: #555; line-height: 1.6; }
.proc-sub { font-size: .75rem; color: #888; margin-top: .2rem; font-style: italic; }

/* INFO BOX */
.info-box { background: #FFF8DC; border: 1px solid #F5C800; border-radius: 3px; padding: 1rem 1.25rem; margin: 1rem 0; }
.info-box-title { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: .82rem; text-transform: uppercase; letter-spacing: .08em; color: #B8860B; margin-bottom: .4rem; }
.info-box p, .info-box li { font-size: .8rem; color: #665500; line-height: 1.65; }

/* CAP CARDS */
.cap-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin: 1rem 0; }
.cap-card { border-radius: 4px; overflow: hidden; border: 1px solid #E0E0E0; }
.cap-card-head { padding: .75rem 1rem; }
.cap-card-head.purple { background: #6B3FA0; color: #fff; }
.cap-card-head.green { background: #2D7A3A; color: #fff; }
.cap-card-head.orange { background: #E06A00; color: #fff; }
.cap-name { font-family: 'Barlow Condensed', sans-serif; font-weight: 900; font-size: 1.1rem; text-transform: uppercase; }
.cap-sub-label { font-size: .65rem; font-weight: 600; letter-spacing: .12em; opacity: .75; text-transform: uppercase; }
.cap-body { padding: .85rem 1rem; background: #FAFAFA; }
.cap-body ul { padding-left: 1rem; margin: 0; }
.cap-body li { font-size: .75rem; color: #444; line-height: 1.6; margin-bottom: .15rem; }
.cap-hon { background: #F5C800; padding: .5rem 1rem; }
.cap-hon-amt { font-family: 'Barlow Condensed', sans-serif; font-weight: 900; font-size: 1rem; color: #000; }
.cap-hon-label { font-size: .6rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(0,0,0,.5); }

/* TABLE */
.bp-table { width: 100%; border-collapse: collapse; margin: 1rem 0; font-size: .8rem; }
.bp-table th { background: #0A0A0A; color: #F5C800; padding: .6rem .85rem; text-align: left; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; }
.bp-table td { padding: .55rem .85rem; border-bottom: 1px solid #E8E8E8; color: #333; vertical-align: top; }
.bp-table tr:nth-child(even) td { background: #FAFAFA; }
.pill { display: inline-block; padding: .1rem .5rem; border-radius: 20px; font-size: .65rem; font-weight: 700; }
.pill.gold { background: #FFF3CC; color: #B8860B; }
.pill.green { background: #D5F5E3; color: #1E8449; }
.pill.purple { background: #E8DAEF; color: #6B3FA0; }
.pill.orange { background: #FDEBD0; color: #E06A00; }

/* FLOW DIAGRAM */
.flow-diagram { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; margin: 1rem 0; background: #F8F8F8; padding: 1.25rem; border-radius: 4px; }
.flow-box { background: #0A0A0A; color: #F5C800; padding: .5rem .9rem; border-radius: 3px; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; }
.flow-arr { color: #F5C800; font-size: 1rem; }

/* GRAD TRACKS */
.track-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin: 1rem 0; }
.track-card { border: 1px solid #E0E0E0; border-radius: 4px; overflow: hidden; }
.track-head { padding: .7rem .9rem; color: #fff; }
.track-head.civic { background: #2471A3; }
.track-head.env { background: #2D7A3A; }
.track-head.lead { background: #6B3FA0; }
.track-head-name { font-family: 'Barlow Condensed', sans-serif; font-weight: 900; font-size: .95rem; text-transform: uppercase; }
.track-head-sub { font-size: .62rem; opacity: .75; letter-spacing: .1em; text-transform: uppercase; }
.track-body { padding: .85rem; background: #FAFAFA; }
.track-body ol { padding-left: 1rem; margin: 0; }
.track-body li { font-size: .74rem; color: #444; line-height: 1.6; margin-bottom: .1rem; }

/* ROADMAP */
.roadmap-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin: 1rem 0; }
.rm-card { border: 1px solid #E0E0E0; border-radius: 4px; padding: 1rem; background: #FAFAFA; border-top: 4px solid; }
.rm-card.active { border-top-color: #F5C800; }
.rm-card.future { border-top-color: #CCCCCC; }
.rm-phase { font-family: 'Barlow Condensed', sans-serif; font-weight: 900; font-size: 1.3rem; color: #0A0A0A; }
.rm-scope { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: .82rem; text-transform: uppercase; color: #555; margin: .2rem 0 .5rem; }
.rm-desc { font-size: .75rem; color: #666; line-height: 1.6; }
.rm-target { font-family: 'Barlow Condensed', sans-serif; font-weight: 900; font-size: 1.2rem; color: #F5C800; margin-top: .5rem; }
.rm-target-label { font-size: .62rem; color: #999; letter-spacing: .1em; text-transform: uppercase; }

/* TOC */
.toc { background: #0A0A0A; padding: 32px 56px; }
.toc-title { font-family: 'Barlow Condensed', sans-serif; font-weight: 900; font-size: 1.1rem; text-transform: uppercase; color: #F5C800; letter-spacing: .08em; margin-bottom: 1.25rem; display: flex; align-items: center; gap: .6rem; }
.toc-title::after { content: ''; flex: 1; height: 1px; background: rgba(245,200,0,.2); }
.toc-list { display: grid; grid-template-columns: 1fr 1fr; gap: .3rem; }
.toc-item { display: flex; align-items: center; gap: .5rem; font-size: .8rem; color: rgba(255,255,255,.6); padding: .2rem 0; border-bottom: 1px dotted rgba(255,255,255,.08); }
.toc-item-num { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: .9rem; color: #F5C800; width: 28px; flex-shrink: 0; }
.toc-item-label { flex: 1; }
.toc-item-page { color: rgba(255,255,255,.25); font-size: .72rem; }

/* RESPONSIVE (screen) */
@media (max-width: 760px) {
  .print-bar { padding: .75rem 1.25rem; flex-wrap: wrap; }
  .page-wrap { margin: 1rem auto; padding: 0 .75rem 3rem; }
  .cover { padding: 40px 28px; }
  .cover-bottom { flex-direction: column; align-items: flex-start; }
  .section-divider { padding: .85rem 28px; }
  .div-title { font-size: 1.05rem; }
  .body { padding: 28px; }
  .toc { padding: 24px 28px; }
  .toc-list { grid-template-columns: 1fr; }
  .cap-row, .track-grid { grid-template-columns: 1fr; }
  .roadmap-grid { grid-template-columns: 1fr 1fr; }
  .flow-diagram { flex-direction: column; align-items: stretch; }
  .flow-arr { transform: rotate(90deg); text-align: center; }
}
@media (max-width: 480px) {
  .roadmap-grid { grid-template-columns: 1fr; }
  .cover-title { font-size: 2rem; }
}

/* PRINT STYLES */
@media print {
  body { background: #fff; }
  .print-bar { display: none; }
  .page-wrap { max-width: 100%; margin: 0; padding: 0; }
  .pdf-page { box-shadow: none; border-radius: 0; margin-bottom: 0; page-break-after: always; }
  .pdf-page:last-child { page-break-after: auto; }
  .cover { min-height: auto; padding: 40px; }
  .body { padding: 30px 40px; }
  .section-divider { padding: .75rem 40px; }
  .toc { padding: 24px 40px; }
  @page { margin: 0; size: A4; }
}