/* Only injected into the comparison frame; never changes a visitor's preferences. */
html[data-font="a"] body { font-family: "DM Sans", sans-serif; }
html[data-font="a"] h1, html[data-font="a"] h2, html[data-font="a"] h3 { font-family: "Manrope", sans-serif; letter-spacing: -.025em; }
html[data-font="b"] body { font-family: "IBM Plex Sans", sans-serif; }
html[data-font="b"] h1, html[data-font="b"] h2, html[data-font="b"] h3 { font-family: "Newsreader", Georgia, serif; letter-spacing: -.02em; }
html[data-font="c"] body { font-family: "DM Sans", sans-serif; }
html[data-font="c"] h1, html[data-font="c"] h2, html[data-font="c"] h3 { font-family: "Space Grotesk", sans-serif; letter-spacing: -.035em; }
html[data-font="d"] body { font-family: "IBM Plex Sans", sans-serif; }
html[data-font="d"] h1, html[data-font="d"] h2, html[data-font="d"] h3 { font-family: "Fraunces", Georgia, serif; letter-spacing: -.025em; }

html[data-type="b"] .hero h1 { font-size:clamp(46px,5vw,68px); }
html[data-type="b"] .intro-grid h2, html[data-type="b"] .section-heading h2, html[data-type="b"] .closing h2 { font-size:clamp(32px,3.6vw,48px); }
html[data-type="c"] .hero h1 { font-size:clamp(54px,6vw,82px); }
html[data-type="c"] .hero-text, html[data-type="c"] .intro-copy p, html[data-type="c"] .page-lead { font-size:20px; }
html[data-type="c"] .post-item strong, html[data-type="c"] .format-card p { font-size:18px; }
html[data-logo="b"] .brand-mark { display:none; }
html[data-logo="c"] .brand-mark { padding:7px; border-radius:50%; background:#d9e9df; }
html[data-logo="c"] .footer .brand-mark { background:#264e48; }

html[data-header="b"] .header { height: 78px; border-bottom: 1px solid var(--line); }
html[data-header="b"] .header nav { gap: 22px; }
html[data-header="c"] .header { height: 106px; }
html[data-header="c"] .brand-mark { width: 54px; height: 54px; }
html[data-header="c"] .brand-text { font-size: 17px; }

html[data-hero="b"] .hero { color: var(--ink); background: #e9efe8; }
html[data-hero="b"] .hero-art { opacity: .18; filter: saturate(.75); }
html[data-hero="b"] .hero h1 em { color: var(--teal); }
html[data-hero="b"] .hero-text, html[data-hero="b"] .hero-link { color: var(--ink); }
html[data-hero="b"] .hero .button-light { color: #fff; background: var(--ink); }
html[data-hero="c"] .hero { color: var(--ink); background: #e3ebe4; }
html[data-hero="c"] .hero-art { left: 54%; border-radius: 0 24px 24px 0; background-image: url("assets/campus-network-hero.jpg"); background-position: center; }
html[data-hero="c"] .hero h1 em { color: var(--teal); }
html[data-hero="c"] .hero-text, html[data-hero="c"] .hero-link { color: var(--ink); }
html[data-hero="c"] .hero .button-light { color: #fff; background: var(--ink); }

html[data-buttons="b"] .button { border-radius: 8px; }
html[data-buttons="c"] .button { background: transparent; border-color: currentColor; color: var(--ink); }
html[data-buttons="c"] .button:hover { background: rgba(24,43,44,.09); }
html[data-buttons="c"] .hero .button, html[data-buttons="c"] .closing .button { color: #fff; }
html[data-buttons="c"][data-hero="b"] .hero .button, html[data-buttons="c"][data-hero="c"] .hero .button { color: var(--ink); background: transparent; }

html[data-cards="b"] .format-card, html[data-cards="b"] .network-feature { color: var(--ink); background: #fffefa; border: 1px solid var(--line); }
html[data-cards="b"] .network-feature p:not(.eyebrow) { color: var(--muted); }
html[data-cards="c"] .format-card { min-height: 230px; padding: 22px 0; color: var(--ink); background: none; border: 0; border-top: 1px solid var(--ink); border-radius: 0; }
html[data-cards="c"] .network-feature { color: var(--ink); background: #e5ece3; }
html[data-cards="c"] .network-feature p:not(.eyebrow) { color: var(--muted); }

html[data-feed="b"] .post-item { grid-template-columns: 1fr 24px; }
html[data-feed="b"] .post-item time { grid-column: 1; grid-row: 1; }
html[data-feed="b"] .post-item strong { grid-column: 1; grid-row: 2; }
html[data-feed="b"] .post-item > span { grid-column: 1; }
html[data-feed="b"] .post-item b { grid-column: 2; grid-row: 2; }
html[data-feed="c"] .post-item { padding: 15px 0; align-items: center; grid-template-rows: auto; }
html[data-feed="c"] .post-item time { grid-row: 1; }
html[data-feed="c"] .post-item > span { display: none; }

html[data-space="b"] .section { padding-top: 65px; padding-bottom: 65px; }
html[data-space="b"] .latest-section, html[data-space="b"] .formats-section { padding-top: 5px; }
html[data-space="c"] .section { padding-top: 130px; padding-bottom: 130px; }
html[data-space="c"] .latest-section, html[data-space="c"] .formats-section { padding-top: 25px; }

html[data-color="b"] { --paper: #fbfbf9; --surface: #fff; --line: #d9dfe0; }
html[data-color="c"] { --paper: #eaf0e8; --surface: #f9fcf8; --line: #ccdacf; }

html[data-footer="b"] .footer { background: #e4ebe3; color: var(--ink); }
html[data-footer="b"] .footer p, html[data-footer="b"] .footer-links, html[data-footer="b"] .footer .brand-text > span { color: #405c54; }
html[data-footer="c"] .footer { background: transparent; color: var(--ink); border-top: 1px solid var(--line); padding: 28px 0; }
html[data-footer="c"] .footer p, html[data-footer="c"] .footer-links, html[data-footer="c"] .footer .brand-text > span { color: #405c54; }
html[data-footer="b"] .footer .brand-mark path:first-child, html[data-footer="c"] .footer .brand-mark path:first-child { stroke:#176c68; }
html[data-footer="b"] .footer .brand-mark path:last-child, html[data-footer="c"] .footer .brand-mark path:last-child { stroke:#9b5c32; }

@media(max-width:850px){
  html[data-type="b"] .hero h1 { font-size:clamp(39px,9.3vw,58px); }
  html[data-type="c"] .hero h1 { font-size:clamp(45px,10.5vw,66px); }
  html[data-hero="c"] .hero-art { left: 0; right: 0; height: 42%; border-radius: 18px 18px 0 0; }
  html[data-hero="c"] .hero-content { padding-top: 300px; }
  html[data-header="b"] .header, html[data-header="c"] .header { height: 78px; }
  html[data-space="c"] .section { padding-top: 95px; padding-bottom: 95px; }
  /* Avoid stacking two generous section gaps on small screens. */
  html[data-space="c"] .latest-section, html[data-space="c"] .formats-section { padding-top: 25px; }
}