/* Shared skin matching getonline.harvard.edu (ClearPass skin-harvard-1.0.3). */
@font-face { font-family:'Merriweather Light'; src:url("merriweather-light.woff2") format("woff2"); font-weight:300; font-display:swap; }
@font-face { font-family:'Merriweather Regular'; src:url("merriweather-regular.woff2") format("woff2"); font-weight:400; font-display:swap; }
@font-face { font-family:'Merriweather Sans Light'; src:url("merriweather-sans-light.woff2") format("woff2"); font-weight:300; font-display:swap; }
@font-face { font-family:'Merriweather Sans Regular'; src:url("merriweather-sans-regular.woff2") format("woff2"); font-weight:400; font-display:swap; }
@font-face { font-family:'Merriweather Sans Bold'; src:url("merriweather-sans-bold.woff2") format("woff2"); font-weight:700; font-display:swap; }

:root {
  --fg:#414141; --muted:#6b6b6b; --bg:#fefefe; --line:#dcdcdc; --panel:#f6f6f6;
  --crimson:#a51c30; --blue:#397aba; --footer:#414141; --footer-fg:#a9a9a9;
  --ok:#1a7f37; --ok-bg:#e8f5ec; --warn:#8a5300; --warn-bg:#fff4e0; --bad:#a51c30; --bad-bg:#fbeaec;
  --serif:"Merriweather Light","Times New Roman",serif;
  --sans:"Merriweather Sans Regular",Arial,sans-serif;
  --sans-light:"Merriweather Sans Light",Arial,sans-serif;
  --sans-bold:"Merriweather Sans Bold",Arial,sans-serif;
  color-scheme: light;
}
* { box-sizing:border-box; }
html, body { margin:0; }
body { background:var(--bg); color:var(--fg); font:300 16px/1.6 var(--serif); display:flex; flex-direction:column; min-height:100vh; }
a { color:var(--crimson); font-family:var(--sans); }
b, strong { font-family:var(--sans-bold); font-weight:700; }

/* Photo header with shield badge */
.hu-header { height:250px; background:url("bg-2.jpg") 50% 10px / cover no-repeat; position:relative; }
.hu-badge { position:absolute; left:50%; top:0; transform:translateX(-50%); width:200px; height:140px; margin:0;
            background:url("background.png") 50% 100% / 100% auto no-repeat; }
.hu-badge a { display:block; width:100%; height:100%; background:url("harvard-logo.png") 50% 50% / 80% auto no-repeat;
              font-size:0; color:transparent; }

.wrap { max-width:1120px; margin:0 auto; padding:8px 16px; }
main { flex:1; min-width:0; width:100%; }
.hu-title { font:300 28px/1.4 var(--serif); text-align:center; margin:10px 0 6px; }
.hu-sub { text-align:center; max-width:760px; margin:0 auto 8px; }
h2 { font:700 20px/1.4 var(--sans-bold); margin:28px 0 10px; padding-top:10px; }
h3 { font:700 17px/1.4 var(--sans-bold); margin:0 0 4px; }
p { margin:0 0 10px; }

/* getonline-style button */
.hu-btn { display:block; background:var(--blue); color:#fff; border:0; border-radius:5px; padding:20px 18px; margin:20px 0;
          text-align:center; text-transform:uppercase; text-decoration:none; font:700 16px/1.5 var(--sans-bold); }
.hu-btn:hover, .hu-btn:focus-visible { background:#2f6aa4; }
.hu-btn.small { display:inline-block; padding:10px 18px; margin:6px 0 0; font-size:14px; }
.hu-btn.crimson { background:var(--crimson); } .hu-btn.crimson:hover { background:#8c1828; }

.card { background:#fff; border:1px solid var(--line); border-radius:5px; padding:20px; }

/* Result boxes (shared by landing guide and checker verdict) */
.status { border:2px solid; border-left-width:8px; border-radius:5px; padding:14px 18px; margin:0 0 14px; }
.status h3 { margin-bottom:6px; }
.status p:last-child { margin-bottom:0; }
.status.ok   { border-color:var(--ok);   background:var(--ok-bg); }   .status.ok h3   { color:var(--ok); }
.status.warn { border-color:#c98a1b;     background:var(--warn-bg); } .status.warn h3 { color:var(--warn); }
.status.bad  { border-color:var(--bad);  background:var(--bad-bg); }  .status.bad h3  { color:var(--bad); }
.status.none { border-color:var(--line); background:var(--panel); }

.tag { display:inline-block; font:700 11px/1.6 var(--sans-bold); letter-spacing:.05em; text-transform:uppercase;
       padding:0 8px; border-radius:99px; border:1px solid currentColor; margin-left:6px; vertical-align:2px; }
kbd { font:400 .85em var(--sans); border:1px solid var(--line); border-bottom-width:2px; border-radius:4px; padding:0 5px; background:#fff; }

.hu-footer { background:var(--footer); color:var(--footer-fg); padding:20px 0; margin-top:40px; }
.hu-footer p { font:300 12px/1.6 var(--sans-light); margin:0; }
.hu-footer a { color:#d9d9d9; font-family:var(--sans-light); }

@media (max-width:600px) {
  .hu-header { height:170px; }
  .hu-badge { width:150px; height:105px; }
  .hu-title { font-size:23px; }
}