/* Haute Residence research pages — shared partial (market-reports hub + schools index). Edit here only. */
/* ---------- tokens ---------- */
:root{
  --paper:#FAF7F2;
  --paper-tint:#F3EEE6;
  --surface:#FFFFFF;
  --ink:#1A1A1A;
  --ink-2:#4A4742;
  --muted:#6D6A65;
  --rule:#E4E0D8;
  --rule-soft:#EFECE5;

  --dark:#141210;
  --dark-2:#1E1B18;
  --dark-rule:#332E28;
  --on-dark:#F2EFE9;
  --on-dark-2:#C9C3B8;
  --on-dark-3:#8E877B;

  --gold:#B8935A;        /* dark grounds only */
  --gold-on-lt:#806128;  /* light grounds only */

  --up:#1F6B4A;
  --down:#9E2B2E;

  --serif:"Newsreader",Georgia,"Times New Roman",serif;
  --sans:"Karla",system-ui,-apple-system,"Segoe UI",sans-serif;

  --wrap:1360px;
  --gutter:40px;
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
body.hr-hub{margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased}
.hr-hub h1,.hr-hub h2,.hr-hub h3{font-family:var(--serif);font-weight:400;margin:0}
.hr-hub p{margin:0}
/* link colour: prose links only. A bare `.hr-hub a` rule (0,1,1) outranks
   component classes like .hr-btn--gold (0,1,0) and repaints buttons, skip
   links and whole-card anchors. Keep this scoped. */
.hr-hub p a,.hr-hub li a,.hr-hub figcaption a{color:var(--gold-on-lt)}
.hr-hub p a:hover,.hr-hub li a:hover,.hr-hub figcaption a:hover{color:#5C4518}
/* component anchors keep their own colour regardless of source order */
.hr-hub .hr-skip{color:var(--paper)}
.hr-hub .hr-btn--gold{color:var(--dark)}
.hr-hub .hr-btn--ink{color:var(--paper)}
.hr-hub .hr-btn--ghost{color:var(--ink)}
.hr-hub .hr-btn--ghost-dk{color:var(--on-dark)}
.hr-hub .hr-btn--ghost:hover,.hr-hub .hr-btn--ink:hover{color:var(--paper)}
.hr-hub .hr-card,.hr-hub .hr-feature,.hr-hub .hr-mkt-sm,.hr-hub .hr-chip{color:inherit}
.hr-hub .hr-card--dark .hr-card__title{color:var(--on-dark)}
.hr-wrap{max-width:var(--wrap);margin:0 auto;padding-inline:var(--gutter)}

/* skip link — dark text on gold fails contrast; use ink ground */
.hr-skip{position:absolute;left:-9999px;top:0;z-index:99;
  background:var(--ink);color:var(--paper);padding:14px 20px;
  font-size:13px;font-weight:600;letter-spacing:.08em}
.hr-skip:focus{left:0}

:focus-visible{outline:2px solid var(--gold-on-lt);outline-offset:3px}
.hr-band--dark :focus-visible{outline-color:var(--gold)}

/* ---------- bands ---------- */
.hr-band{padding-block:64px}
.hr-band--dark{background:var(--dark);color:var(--on-dark)}
.hr-band--hero{padding-block:76px 60px}
.hr-band--light{background:var(--paper)}
.hr-band--tint{padding-block:0 72px}

.hr-band--dark h1,.hr-band--dark h2{color:var(--on-dark)}
.hr-band--dark p{color:var(--on-dark-2)}

/* ---------- eyebrow ---------- */
.hr-eyebrow{font-size:12px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold-on-lt);margin-bottom:14px}
.hr-band--dark .hr-eyebrow{color:var(--gold)}

/* ---------- headings ---------- */
.hr-h1{font-size:clamp(34px,4.1vw,58px);line-height:1.05;letter-spacing:-.015em;max-width:16ch}
.hr-h2-lead{font-size:clamp(30px,3.6vw,50px);line-height:1.06;letter-spacing:-.015em;max-width:18ch}
.hr-h2{font-size:clamp(26px,2.6vw,36px);line-height:1.12}
.hr-h3{font-size:clamp(23px,2.1vw,30px);line-height:1.14}
.hr-lede{font-size:17px;line-height:1.6;max-width:62ch;margin-top:14px}

/* ---------- stat row ---------- */
.hr-stats{display:flex;flex-wrap:wrap;gap:30px 54px;align-items:flex-end;margin-top:40px}
.hr-stat__n{font-family:var(--serif);font-weight:300;line-height:.92;
  font-size:clamp(40px,5vw,70px)}
.hr-stat__l{font-size:12px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);margin-top:8px}
.hr-band--dark .hr-stat__l{color:var(--on-dark-3)}
.hr-stats--sm .hr-stat__n{font-size:clamp(34px,4.4vw,64px)}

/* ---------- hero footer strip ---------- */
.hr-strip{display:flex;flex-wrap:wrap;gap:24px 38px;align-items:flex-end;
  justify-content:space-between;margin-top:40px;padding-top:26px;
  border-top:1px solid var(--dark-rule)}
.hr-strip__item .hr-strip__l{font-size:12px;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:var(--on-dark-3)}
.hr-strip__item .hr-strip__v{font-size:15px;color:var(--on-dark-2);margin-top:5px}
.hr-strip__item--pending .hr-strip__v{color:var(--on-dark-3)}
.hr-strip__group{display:flex;flex-wrap:wrap;gap:20px 38px}
.hr-source{font-size:13px;line-height:1.5;color:var(--on-dark-3);margin-top:24px}

/* ---------- buttons (44px min target) ---------- */
.hr-btn{display:inline-block;text-decoration:none;font-size:12px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;padding:16px 30px;min-height:44px;
  white-space:nowrap}
.hr-btn--gold{background:var(--gold);color:var(--dark)}
.hr-btn--gold:hover{background:#C9A467;color:var(--dark)}
.hr-btn--ink{background:var(--ink);color:var(--paper)}
.hr-btn--ink:hover{background:#000;color:var(--paper)}
.hr-btn--ghost{background:transparent;color:var(--ink);border:1px solid var(--ink)}
.hr-btn--ghost:hover{background:var(--ink);color:var(--paper)}

/* ---------- cards ---------- */
.hr-grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}

.hr-card{display:flex;flex-direction:column;gap:13px;
  background:var(--surface);border:1px solid var(--rule);
  padding:32px 34px;text-decoration:none;color:inherit}
.hr-card:hover{border-color:#CFC9BD}
.hr-card__foot{margin-top:auto;padding-top:14px;border-top:1px solid var(--rule-soft);
  display:flex;flex-wrap:wrap;gap:8px 12px;justify-content:space-between;align-items:baseline;
  min-height:44px}
.hr-card__byline{font-size:13px;color:var(--muted)}
.hr-card__cta{font-size:12px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--gold-on-lt);white-space:nowrap}

.hr-card--dark{background:var(--dark-2);border-color:var(--dark-rule);gap:14px;padding:28px 30px}
.hr-card--dark:hover{border-color:#4A433A}
.hr-card--dark .hr-card__title{font-family:var(--serif);font-size:28px;color:var(--on-dark)}
.hr-card--dark .hr-card__cta{color:var(--gold)}
.hr-card--dark p{font-size:14px;color:var(--on-dark-3);line-height:1.55}

.hr-card__head{display:flex;flex-wrap:wrap;gap:8px 12px;
  align-items:baseline;justify-content:space-between}

/* small inline stat trio inside a card */
.hr-minis{display:flex;flex-wrap:wrap;gap:12px 30px}
.hr-mini__n{font-size:22px;font-weight:500}
.hr-card--dark .hr-mini__n{color:var(--on-dark)}
.hr-mini__l{font-size:12px;font-weight:600;letter-spacing:.11em;
  text-transform:uppercase;color:var(--muted);margin-top:4px}
.hr-card--dark .hr-mini__l{color:var(--on-dark-3)}

/* bigger stat pair inside a light card */
.hr-pair{display:flex;flex-wrap:wrap;gap:12px 28px;padding-top:4px}
.hr-pair__n{font-family:var(--serif);font-size:32px;font-weight:300;line-height:1}
.hr-pair__l{font-size:12px;font-weight:600;letter-spacing:.11em;
  text-transform:uppercase;color:var(--muted);margin-top:6px}

/* ---------- feature row (Haute 20) ---------- */
.hr-feature{display:flex;flex-wrap:wrap;gap:30px 40px;align-items:center;
  justify-content:space-between;background:var(--surface);
  border:1px solid var(--rule);border-left:3px solid var(--gold-on-lt);
  padding:38px 42px;text-decoration:none;color:inherit}
.hr-feature:hover{border-color:#CFC9BD;border-left-color:var(--gold-on-lt)}
.hr-feature__body{flex:1 1 520px;min-width:0;display:flex;flex-direction:column;gap:12px}
.hr-feature__list{display:flex;flex-direction:column;gap:11px;min-width:272px;flex:0 1 auto}

.hr-rank{display:flex;align-items:center;gap:13px;min-height:44px}
.hr-rank__n{background:var(--ink);color:var(--paper);font-family:var(--serif);
  font-size:17px;width:38px;height:38px;flex:0 0 38px;
  display:flex;align-items:center;justify-content:center}
.hr-rank__name{font-size:15px;flex:1 1 auto}
.hr-rank__move{font-size:12px;font-weight:600;white-space:nowrap}
.hr-rank__move--up{color:var(--up)}
.hr-rank__move--down{color:var(--down)}
.hr-rank__move--hold{color:var(--ink-2)}

/* ---------- section head with stats to the right ---------- */
.hr-sechead{display:flex;flex-wrap:wrap;gap:24px;align-items:flex-end;
  justify-content:space-between;margin-bottom:22px}
.hr-sechead__body{max-width:720px}

/* ---------- closing band ---------- */
.hr-close{background:var(--paper-tint);border:1px solid var(--rule);
  padding:34px 40px;display:flex;flex-wrap:wrap;gap:24px 30px;
  align-items:center;justify-content:space-between}
.hr-close__body{flex:1 1 520px;min-width:0}
.hr-close__actions{display:flex;gap:12px;flex-wrap:wrap}

.hr-stack-gap{margin-top:20px}

/* ---------- responsive ---------- */
@media (max-width:900px){
  :root{--gutter:24px}
  .hr-band{padding-block:48px}
  .hr-band--hero{padding-block:52px 44px}
  .hr-grid-2{grid-template-columns:1fr}
  .hr-feature{padding:30px 26px}
  .hr-card{padding:26px 24px}
  .hr-card--dark{padding:24px 22px}
  .hr-close{padding:28px 26px}
  .hr-stats{gap:24px 36px;margin-top:32px}
  .hr-h1,.hr-h2-lead{max-width:none}
}
@media (max-width:560px){
  :root{--gutter:16px}
  .hr-lede{font-size:16px}
  .hr-stats{gap:20px 28px}
  .hr-btn{display:block;text-align:center;white-space:normal}
  .hr-close__actions{width:100%}
  .hr-close__actions .hr-btn{flex:1 1 100%}
  .hr-feature__list{min-width:0;width:100%}
}

/* ===== schools-only ===== */

/* sticky market jump bar — also the page's internal link set */
.hr-jump{position:sticky;top:0;z-index:5;background:var(--surface);
  border-block:1px solid var(--rule);padding-block:16px}
.hr-jump__inner{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.hr-jump__label{font-size:12px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);margin-right:6px}
.hr-chip{text-decoration:none;color:var(--ink);border:1px solid var(--rule);
  padding:11px 16px;font-size:13px;font-weight:500;min-height:44px;
  display:inline-flex;align-items:center;gap:6px}
.hr-chip:hover{border-color:var(--gold-on-lt);color:var(--ink)}
.hr-chip span{color:var(--muted)}

/* the three corridor markets */
.hr-corridor{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.hr-mkt{background:var(--surface);border:1px solid var(--rule);
  border-top:3px solid var(--gold-on-lt);display:flex;flex-direction:column}
.hr-mkt__body{padding:28px 30px 22px;display:flex;flex-direction:column;gap:13px}
.hr-mkt__head{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.hr-mkt__score{font-family:var(--serif);font-size:38px;font-weight:300;line-height:1}
.hr-mkt__rank{font-size:13px;font-weight:600;letter-spacing:.1em;color:var(--gold-on-lt)}
.hr-mkt__note{font-size:15px;line-height:1.55;color:var(--ink-2)}
/* the commercial bridge — this footer is the point of the section */
.hr-mkt__links{margin-top:auto;border-top:1px solid var(--rule-soft);
  background:var(--paper-warm);padding:20px 30px;display:flex;flex-direction:column;gap:2px}
.hr-mkt__links-l{font-size:12px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.hr-mkt__links a{font-size:15px;font-weight:600;text-decoration:none;
  min-height:44px;display:flex;align-items:center}

/* the other eight markets */
.hr-mkt-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.hr-mkt-sm{text-decoration:none;color:inherit;background:var(--surface);
  border:1px solid var(--rule);padding:22px 24px;display:flex;flex-direction:column;gap:7px;
  min-height:44px}
.hr-mkt-sm:hover{border-color:#CFC9BD;color:inherit}
.hr-mkt-sm__head{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.hr-mkt-sm__name{font-family:var(--serif);font-size:21px}
.hr-mkt-sm__score{font-size:21px;font-weight:500}
.hr-mkt-sm__meta{font-size:13px;color:var(--muted)}
.hr-mkt-sm__top{font-size:14px;color:var(--ink-2)}

/* ranking table */
.hr-tablewrap{background:var(--surface);border:1px solid var(--rule);overflow-x:auto}
.hr-table{width:100%;border-collapse:collapse;min-width:860px}
.hr-table th{text-align:left;padding:14px 16px;font-size:12px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
.hr-table thead tr{border-bottom:2px solid var(--ink)}
.hr-table td{padding:15px 16px;font-size:15px;border-bottom:1px solid var(--rule-soft)}
.hr-table tbody tr:last-child td{border-bottom:0}
.hr-table .num{text-align:right;font-variant-numeric:tabular-nums}
.hr-table .rank{font-family:var(--serif)}
.hr-table .idx{font-weight:600;text-align:right;font-variant-numeric:tabular-nums}
.hr-table a{text-decoration:none}
.hr-table .school a{color:var(--ink);font-weight:500}
.hr-table .school a:hover{color:var(--gold-on-lt)}
.hr-table .homes a{font-size:13px;font-weight:600}

/* method + licence */
.hr-two{display:grid;grid-template-columns:1.15fr 1fr;gap:20px}
.hr-panel{background:var(--surface);border:1px solid var(--rule);padding:34px 38px}
.hr-panel--dark{background:var(--dark);color:var(--on-dark);
  display:flex;flex-direction:column;gap:16px}
.hr-dims{display:flex;flex-direction:column;gap:11px;margin-top:18px}
.hr-dim{display:flex;gap:14px;align-items:baseline;padding-bottom:11px;
  border-bottom:1px solid var(--rule-soft)}
.hr-dim:last-child{border-bottom:0;padding-bottom:0}
.hr-dim__n{font-family:var(--serif);font-size:16px;color:var(--gold-on-lt);min-width:24px}

/* FAQ */
.hr-faq{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.hr-faq__item{background:var(--surface);border:1px solid var(--rule);padding:24px 26px}
.hr-faq__q{font-family:var(--serif);font-size:19px;line-height:1.3;margin-bottom:9px}
.hr-faq__a{font-size:15px;line-height:1.6;color:var(--ink-2)}

/* closing */
.hr-close{background:var(--paper-tint);border:1px solid var(--rule);padding:38px 42px;
  display:flex;flex-wrap:wrap;gap:24px 28px;align-items:center;justify-content:space-between}
.hr-close__body{flex:1 1 540px;min-width:0}
.hr-close__actions{display:flex;gap:12px;flex-wrap:wrap}


.hr-hub a.hr-skip,.hr-hub a.hr-skip:hover{color:var(--paper)}.hr-hub a.hr-btn--gold,.hr-hub a.hr-btn--gold:hover{color:var(--dark)}.hr-hub a.hr-btn--ink,.hr-hub a.hr-btn--ink:hover{color:var(--paper)}.hr-hub a.hr-btn--ghost{color:var(--ink)}.hr-hub a.hr-btn--ghost:hover{color:var(--paper)}.hr-hub a.hr-btn--ghost-dk{color:var(--on-dark)}.hr-hub main h1,.hr-hub main h2,.hr-hub main h3{text-transform:none}.hr-hub .hr-h2,.hr-hub .hr-h3{color:inherit}
.hr-panel--dark .hr-eyebrow{color:var(--gold)}
.hr-page-schools .hr-band{padding-block:56px}
.hr-page-schools .hr-band--hero{padding-block:68px 54px}
.hr-page-schools .hr-h1{font-size:clamp(32px,4vw,56px);max-width:none}
.hr-page-schools .hr-lede{font-size:18px;max-width:72ch}
.hr-page-schools .hr-stats{margin-top:34px}
.hr-page-schools .hr-stat__n{font-size:clamp(38px,4.6vw,60px)}
.hr-page-schools .hr-sechead{display:block;max-width:76ch;margin-bottom:24px}
.hr-btn--ghost-dk{background:transparent;color:var(--on-dark);border:1px solid #4A433A}
.hr-btn--ghost-dk:hover{background:var(--dark-2);color:var(--on-dark)}
:root{--paper-warm:#F9F6F1}
.hr-hub .hr-chip,.hr-hub .hr-mkt__links a{color:var(--ink)}
.hr-hub .hr-mkt__links a{color:var(--gold-on-lt)}
.hr-hub .hr-table .homes a,.hr-hub .hr-table td a{color:var(--gold-on-lt)}
.hr-hub .hr-table .school a{color:var(--ink)}
.hr-hub .hr-panel--dark .hr-source a{color:var(--gold)}
.hr-hub .hr-faq details summary{cursor:pointer;min-height:44px;display:flex;align-items:center;font-size:15px;font-weight:600;color:var(--gold-on-lt)}
.hr-hub .hr-faq__more{grid-column:1/-1}
.hr-hub .hr-faq__more .hr-faq{margin-top:12px}

/* ===== responsive ===== */
@media (max-width:1100px){
  .hr-corridor{grid-template-columns:1fr}
  .hr-mkt-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hr-two{grid-template-columns:1fr}
}
@media (max-width:900px){
  :root{--gutter:24px}
  .hr-page-schools .hr-band{padding-block:44px}
  .hr-page-schools .hr-band--hero{padding-block:48px 40px}
  .hr-faq{grid-template-columns:1fr}
  .hr-panel{padding:28px 26px}
  .hr-close{padding:28px 26px}
  .hr-jump{position:static}   /* sticky bar eats too much height on small screens */
}
@media (max-width:560px){
  :root{--gutter:16px}
  .hr-mkt-grid{grid-template-columns:1fr}
  .hr-btn{display:block;text-align:center;white-space:normal}
  .hr-close__actions{width:100%}
  .hr-close__actions .hr-btn{flex:1 1 100%}

  /* table -> stacked cards, same pattern already live on the Top 50 pages */
  .hr-table{min-width:0}
  .hr-tablewrap{border:0;background:transparent;overflow:visible}
  .hr-table thead{position:absolute;left:-9999px}
  .hr-table tbody tr{display:block;background:var(--surface);
    border:1px solid var(--rule);margin-bottom:12px;padding:6px 0}
  .hr-table td{display:flex;justify-content:space-between;gap:16px;
    padding:9px 16px;border-bottom:0;text-align:left}
  .hr-table td::before{content:attr(data-label);font-size:12px;font-weight:600;
    letter-spacing:.08em;text-transform:uppercase;color:var(--muted);flex:0 0 auto}
  .hr-table .num,.hr-table .idx{text-align:right}
}