/* Phase Three Report — page styles. Built on the NH Forum design-system tokens. */
@import url("tokens/fonts.css");
@import url("tokens/colors.css");
@import url("tokens/typography.css");
@import url("tokens/spacing.css");
@import url("tokens/elevation.css");
@import url("tokens/motion.css");
@import url("tokens/base.css");

html{scroll-behavior:smooth;scroll-padding-top:84px}
body{background:var(--nhf-granite-white)}
a{color:var(--text-link)}
a:hover{color:var(--text-link-hover)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* ---------- Shared type ---------- */
.label{font-family:var(--font-ui);font-weight:600;letter-spacing:.1em;text-transform:uppercase;font-size:13px;line-height:1.2;color:var(--text-accent)}
.label--sm{font-size:12px}
.label--xs{font-size:11px}
.label--muted{color:var(--text-muted)}
.stat-num{font-family:var(--font-ui);font-weight:700;font-size:var(--type-stat-size);line-height:var(--type-stat-lh);font-variant-numeric:tabular-nums}

/* ---------- Header ---------- */
.site-header{position:sticky;top:0;z-index:30;background:var(--nhf-granite-white);border-bottom:1px solid var(--border-hairline)}
.site-header__inner{max-width:1360px;margin:0 auto;padding:10px clamp(18px,4vw,48px);display:flex;align-items:center;gap:20px}
.brand{text-decoration:none;display:flex;align-items:center;gap:14px;flex:none}
.brand img{height:40px;width:auto}
.brand__label{font-family:var(--font-ui);font-weight:600;letter-spacing:.1em;text-transform:uppercase;font-size:12px;color:var(--nhf-federal-navy);border-left:1px solid var(--border-hairline);padding-left:14px;line-height:1.3;white-space:nowrap}
.toc{position:relative;margin-left:auto;display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;max-width:100%;font-family:var(--font-ui);font-weight:600;letter-spacing:.08em;text-transform:uppercase;font-size:13px}
.toc::-webkit-scrollbar{display:none}
.toc a{display:flex;gap:7px;padding:8px 11px;flex:none;white-space:nowrap;border-radius:4px;text-decoration:none;color:var(--text-muted);transition:var(--transition-control)}
.toc a:hover{color:var(--text-heading)}
.toc a[aria-current="true"]{background:var(--nhf-cream-200);color:var(--text-heading)}
.toc a[aria-current="true"] span:first-child{color:var(--text-accent)}

/* ---------- Sections ---------- */
.section{padding-block:clamp(40px,5vw,80px);padding-inline:max(clamp(20px,4vw,48px),calc((100% - 1240px) / 2))}
.section--paper{background:var(--nhf-paper);border-top:1px solid var(--border-hairline)}
.section--granite{background:var(--nhf-granite-white)}
.section--navy{background:var(--nhf-federal-navy)}
.section-head{border-top:2px solid var(--nhf-federal-navy);padding-top:16px;display:flex;align-items:baseline;gap:14px;margin-bottom:14px}
.section-head__num{font-family:var(--font-ui);font-weight:600;letter-spacing:.1em;font-size:14px;color:var(--text-accent)}
.section-head h2{font-size:var(--type-display-3-size);line-height:var(--type-display-3-lh);letter-spacing:var(--type-display-3-ls);margin:0}
.section--navy .section-head{border-top-color:var(--nhf-liberty-gold)}
.section--navy .section-head__num{color:var(--nhf-gold-300)}
.intro{font-size:var(--type-body-size);color:var(--text-muted);line-height:1.7;max-width:80ch;margin:0 0 28px}
.section--navy .intro{color:var(--nhf-stone-300)}
.subhead{font-family:var(--font-ui);font-weight:600;letter-spacing:.1em;text-transform:uppercase;font-size:13px;line-height:1.2;color:var(--text-accent);margin:0 0 14px}
.section--navy .subhead{color:var(--nhf-gold-300);margin-bottom:16px}
.grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(min(100%,var(--min,280px)),1fr))}
.card{border-radius:var(--radius-card);padding:22px;margin:0}

/* ---------- 01 Hero ---------- */
.hero{padding-top:clamp(32px,4vw,64px);padding-bottom:clamp(40px,5vw,80px)}
.hero .label{margin-bottom:18px}
.hero__body{display:flex;flex-wrap:wrap;gap:clamp(24px,4vw,56px);align-items:flex-start}
.hero__text{flex:2 1 420px;min-width:0}
.hero h1{font-size:calc(var(--type-display-1-size) * .85);line-height:var(--type-display-1-lh);letter-spacing:var(--type-display-1-ls);margin:0 0 20px;max-width:22ch}
.hero__lede{font-size:var(--type-body-lg-size);line-height:var(--type-body-lg-lh);margin:0 0 16px}
.hero__detail{font-size:var(--type-body-sm-size);color:var(--text-muted);line-height:1.75;margin:0}
.hero__stats{flex:1 1 240px;display:flex;flex-direction:column;gap:10px;min-width:0;margin:0}
.hero-stat{border-radius:var(--radius-card);padding:18px 22px 20px;display:flex;flex-direction:column-reverse;gap:8px;color:var(--nhf-federal-navy)}
.hero-stat dt{font-family:var(--font-ui);font-weight:600;letter-spacing:.1em;text-transform:uppercase;font-size:15px;line-height:1.35}
.hero-stat dd{margin:0}
.hero-stat--navy{background:var(--nhf-federal-navy);color:var(--nhf-granite-white)}
.hero-stat--navy dt{color:var(--nhf-stone-300)}
.hero-stat--gold{background:var(--nhf-liberty-gold)}
.hero-stat--paper{background:var(--nhf-paper);border:1px solid var(--border-hairline)}
.hero-stat--paper dt{color:var(--text-muted)}
.hero-stat--birch{background:var(--nhf-birch-silver)}

/* ---------- 02 Demographics ---------- */
.demographics{background:var(--nhf-granite-white);border:1px solid var(--border-hairline);border-radius:var(--radius-card);padding:clamp(20px,3vw,32px);display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr));gap:clamp(24px,4vw,44px)}
.demo-group{min-width:0}
.demo-group h3{font-family:var(--font-ui);font-weight:600;font-size:16px;line-height:1.2;letter-spacing:.1em;text-transform:uppercase;color:var(--nhf-federal-navy);margin:0 0 16px}
.demo-rows{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}
.demo-row{margin:0;display:grid;grid-template-columns:minmax(96px,150px) minmax(0,1fr);gap:14px;align-items:center}
.demo-row__label{font-size:var(--type-body-sm-size);line-height:1.3;color:var(--nhf-federal-navy)}
.demo-row__meter{display:flex;align-items:center;gap:10px;min-width:0}
.track{flex:1;min-width:0;height:14px;border-radius:3px;background:var(--nhf-birch-silver);position:relative}
.track__fill{display:block;height:100%;border-radius:3px;background:var(--nhf-liberty-gold)}
.demo-row__pct{font-family:var(--font-ui);font-weight:600;font-size:14px;color:var(--nhf-federal-navy);min-width:46px;text-align:right;font-variant-numeric:tabular-nums}

/* ---------- 03 Process ---------- */
.session{background:var(--nhf-federal-navy)}
.session .label{color:var(--nhf-gold-300);margin-bottom:10px}
.session h3{font-family:var(--font-body);font-size:20px;line-height:1.35;margin:0;letter-spacing:0;color:var(--nhf-granite-white)}
.session--final{background:var(--nhf-liberty-gold)}
.session--final .label,.session--final h3{color:var(--nhf-federal-navy)}
.sessions{margin-bottom:36px}
.theme-card{background:var(--nhf-granite-white);border:1px solid var(--border-hairline);border-top:4px solid var(--nhf-liberty-gold)}
.theme-card .label{margin-bottom:10px}
.theme-card p{margin:0;font-family:var(--font-display);font-weight:700;font-size:19px;line-height:1.35;letter-spacing:-.02em;color:var(--text-heading)}

/* ---------- 04 Directives ---------- */
.directives__lede{font-size:var(--type-body-size);line-height:1.7;max-width:72ch;margin:0 0 8px}
.directives__note{font-size:var(--type-body-sm-size);color:var(--text-muted);line-height:1.7;max-width:72ch;margin:0 0 26px}
.rule-label{display:flex;align-items:center;gap:14px}
.rule-label::after{content:"";flex:1;height:1px;background:var(--border-hairline)}
.legend{display:flex;align-items:center;gap:18px;margin-bottom:18px}
.legend__rule{flex:1;height:1px;background:var(--border-hairline)}
.legend__threshold{display:flex;align-items:center;gap:6px}
.legend__threshold::before{content:"";width:2px;height:14px;background:var(--nhf-charter-red)}
.directive-list{display:flex;flex-direction:column;gap:14px}
.rule-label--others{margin-top:8px}
.directive{display:grid;grid-template-columns:clamp(72px,9vw,100px) minmax(0,1fr);gap:clamp(14px,2vw,22px);align-items:start;background:var(--nhf-paper);border:1px solid var(--border-hairline);border-radius:var(--radius-card);padding:18px 20px}
.directive--top{border-top:4px solid var(--nhf-liberty-gold);padding:22px 24px}
.directive__score{text-align:right}
.directive__pct{font-family:var(--font-ui);font-weight:700;font-size:clamp(34px,3.8vw,46px);line-height:.95;color:var(--nhf-federal-navy);font-variant-numeric:tabular-nums}
.directive__score .label{margin-top:6px}
.directive__body{min-width:0}
.directive__meter{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.directive__meter .track{height:10px;background:var(--nhf-cream-200)}
.directive__meter .track__fill{background:var(--nhf-federal-navy)}
.directive--top .directive__meter .track{background:var(--nhf-birch-silver)}
.directive--top .directive__meter .track__fill{background:var(--nhf-liberty-gold)}
.track__threshold{position:absolute;top:-4px;bottom:-4px;width:2px;background:var(--nhf-charter-red)}
.directive__total{font-family:var(--font-ui);font-weight:600;font-size:12px;color:var(--text-muted);line-height:1}
.directive__tally{margin-bottom:14px}
.directive__meta{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin-bottom:8px}
.directive__theme{font-size:var(--type-body-sm-size);font-weight:700;color:var(--text-muted)}
.directive__text{margin:0;font-family:var(--font-display);font-weight:700;font-size:clamp(17px,1.8vw,21px);line-height:1.4;letter-spacing:-.02em;color:var(--text-heading);max-width:70ch}
.directive--top .directive__text{font-size:clamp(18px,1.9vw,22px)}
.toggle{margin-top:14px;display:inline-flex;align-items:center;gap:9px;background:none;border:none;padding:0;cursor:pointer;font-family:var(--font-ui);font-weight:600;letter-spacing:.08em;text-transform:uppercase;font-size:13px;color:var(--nhf-federal-navy);transition:var(--transition-control)}
.toggle:hover{color:var(--nhf-gold-600)}
.toggle__sign{width:18px;height:18px;border:1px solid currentColor;border-radius:3px;display:flex;align-items:center;justify-content:center;font-size:13px;line-height:1}
.actions{margin-top:16px;border-top:1px solid var(--border-hairline);padding-top:16px}
.actions > .label{margin-bottom:12px}
.actions__levers{margin:-4px 0 14px;font-size:var(--type-body-sm-size);font-style:italic;color:var(--text-muted)}
.actions__list{display:flex;flex-direction:column;gap:12px;margin:0}
.action{display:grid;grid-template-columns:minmax(100px,170px) minmax(0,1fr);gap:16px;align-items:start}
.action dt{font-family:var(--font-ui);font-weight:600;letter-spacing:.1em;text-transform:uppercase;font-size:12px;color:var(--nhf-stone-600);line-height:1.5}
.action dd{margin:0;min-width:0;font-size:var(--type-body-sm-size);line-height:1.65;color:var(--text-body)}
.action ul{list-style:none;margin:8px 0 0;padding-left:14px;border-left:2px solid var(--border-hairline);display:flex;flex-direction:column;gap:6px}
.action dd > ul:first-child{margin-top:0}
.action li{margin:0;line-height:1.6}

@media (max-width:600px){
  .directive{grid-template-columns:minmax(0,1fr);gap:12px}
  .directive__score{text-align:left;display:flex;align-items:baseline;gap:12px}
  .action{grid-template-columns:minmax(0,1fr);gap:4px}
}

/* ---------- 05 Photos ---------- */
.photos{--min:480px}
.photos > .grid{--min:220px}
.photo{margin:0;display:flex;flex-direction:column;gap:8px}
.photo__frame{aspect-ratio:4/3;width:100%;border-radius:var(--radius-card);overflow:hidden;background:var(--nhf-cream-200)}
.photo__frame img{width:100%;height:100%;object-fit:cover}

/* ---------- 06 Quotes + feedback ---------- */
.quotes{--min:540px;margin-bottom:40px}
.quotes > .grid{--min:260px}
.quote{margin:0;background:var(--nhf-navy-600);border-left:4px solid var(--nhf-liberty-gold);border-radius:var(--radius-card);padding:26px;display:flex;flex-direction:column;gap:14px;font-style:normal}
.quote p{margin:0;font-family:var(--font-display);font-size:clamp(18px,2vw,22px);line-height:1.45;letter-spacing:-.02em;color:var(--nhf-granite-white)}
.quote cite{font-style:normal;font-family:var(--font-ui);font-weight:600;letter-spacing:.1em;text-transform:uppercase;font-size:12px;color:var(--nhf-stone-300)}
.feedback{--min:260px;gap:24px}
.feedback .stat-num{color:var(--nhf-granite-white)}
.feedback__rule{height:3px;background:var(--nhf-liberty-gold);margin:14px 0;max-width:96px}
.feedback h3{margin:0 0 6px;font-family:var(--font-body);font-weight:700;font-size:18px;line-height:1.35;letter-spacing:0;color:var(--nhf-granite-white)}
.feedback p{margin:0;color:var(--nhf-stone-300);font-size:var(--type-body-sm-size);line-height:1.7}

/* ---------- 07 Phases ---------- */
.phases{--min:380px}
.phase{background:var(--nhf-paper);border:1px solid var(--border-hairline);padding:26px;display:flex;flex-direction:column;align-items:flex-start}
.phase > .label{margin-bottom:10px}
.phase h3{font-family:var(--font-body);font-size:22px;line-height:1.3;letter-spacing:0;margin:0}
.phase h4{font-family:var(--font-ui);font-weight:600;letter-spacing:.1em;text-transform:uppercase;font-size:14px;margin:14px 0 8px;color:var(--nhf-stone-600)}
.phase p{margin:0 0 20px;font-size:var(--type-body-sm-size);line-height:1.7}
.phase .btn{margin-top:auto}

/* ---------- 08 Next steps ---------- */
.steps{--min:240px;gap:28px;list-style:none;padding:0;margin:0}
.step{display:flex;gap:16px;margin:0}
.step__num{flex:none;width:38px;height:38px;border-radius:50%;background:var(--nhf-federal-navy);color:var(--nhf-granite-white);display:flex;align-items:center;justify-content:center;font-family:var(--font-ui);font-weight:600;font-size:17px}
.step .label{margin-bottom:6px}
.step h3{font-family:var(--font-body);font-size:20px;line-height:1.3;letter-spacing:0;margin:0}
.step p{margin:8px 0 0;color:var(--text-muted);font-size:var(--type-body-sm-size);line-height:1.6}
.step p + p{margin-top:6px}
.step strong{color:var(--text-heading)}

/* ---------- 09 Join ---------- */
.join{display:flex;flex-wrap:wrap;gap:28px;align-items:center;justify-content:space-between}
.join__text{flex:1 1 320px;min-width:0}
.join .label{color:var(--nhf-gold-300);margin-bottom:12px}
.join h2{font-size:var(--type-display-2-size);line-height:var(--type-display-2-lh);letter-spacing:var(--type-display-2-ls);margin:0 0 12px}
.join p{margin:0;color:var(--nhf-stone-300);line-height:1.65;max-width:56ch}
.join__ctas{display:flex;gap:12px;flex-wrap:wrap}
.colophon{margin-top:32px;padding-top:18px;border-top:1px solid var(--border-on-inverse);display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.colophon img{height:64px;width:auto}
.colophon .label{color:var(--nhf-stone-300);font-size:12px}

/* ---------- Button (mirrors design-system Button) ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:var(--font-ui);font-weight:var(--fw-semibold);letter-spacing:var(--type-button-ls);text-transform:uppercase;border:var(--border-w-strong) solid transparent;border-radius:var(--radius-md);text-decoration:none;white-space:nowrap;cursor:pointer;transition:var(--transition-control),transform var(--dur-fast) var(--ease-standard);height:var(--control-h-md);padding:0 var(--control-pad-x-md);font-size:var(--type-button-size)}
.btn:active{transform:scale(var(--press-scale))}
.btn--lg{height:var(--control-h-lg);padding:0 var(--control-pad-x-lg);font-size:1.0625rem}
.btn--primary{background:var(--action-primary);color:var(--action-primary-text);border-color:var(--action-primary)}
.btn--primary:hover{background:var(--action-primary-hover);border-color:var(--action-primary-hover);color:var(--action-primary-text)}
.btn--primary:active{background:var(--action-primary-active);border-color:var(--action-primary-active)}
.btn--secondary{background:var(--action-secondary);color:var(--action-secondary-text);border-color:var(--action-secondary)}
.btn--secondary:hover{background:var(--action-secondary-hover);border-color:var(--action-secondary-hover);color:var(--action-secondary-text)}
.btn--secondary:active{background:var(--action-secondary-active);border-color:var(--action-secondary-active)}
.btn--outline{background:transparent;color:var(--text-heading);border-color:currentColor}
.btn--outline:hover{background:var(--nhf-navy-700);color:var(--nhf-cream-100);border-color:var(--nhf-navy-700)}
.btn--outline:active{background:var(--nhf-navy-900);border-color:var(--nhf-navy-900)}
.section--navy .btn--outline:hover{background:var(--nhf-cream-100);color:var(--nhf-federal-navy);border-color:var(--nhf-cream-100)}

/* ---------- Print ---------- */
@media print{
  html{scroll-padding-top:0}
  .site-header{position:static}
  .toc{display:none}
  .section{break-inside:avoid-page}
  .actions[hidden]{display:block!important}
  .toggle{display:none}
}