/* =============================================================================================
   The front door, fitted to the screen (D149, owner 2026-10-13): it never scrolls.

   Loaded after campusme-theme.css and campusme-highlights.css, and prefixed .cm-fd so it wins. Sized by HEIGHT as well
   as width - the constraint on a front door is the fold: a 1280x720 laptop, a tablet either way up, a phone held
   upright and on its side. Each tier says what gives way first: descriptions, then decoration, then size.
   ============================================================================================= */

.cm-fd { min-height: 100vh; min-height: 100dvh; }

/* ---- 900-1099 wide (a tablet on its side, a small laptop): still two columns, the hero narrower ---- */
@media (min-width: 900px) and (max-width: 1099.98px) {
  .cm-fd .cm-fd-body { grid-template-columns: minmax(0, 1fr) minmax(360px, 430px); }
  .cm-fd .cm-fd-hero { padding: 28px 20px 28px 32px; }
  .cm-fd .cm-fd-hero h1 { font-size: 34px; }
  .cm-fd .cm-fd-panel { padding: 16px 28px 16px 0; }
  .cm-fd .cm-fd-choice { max-width: 430px; box-shadow: 0 24px 60px rgba(15,31,58,.16); }
  .cm-fd .cm-fd-photo { opacity: .26; }
}

/* ---- a window under ~800 tall, two columns: the descriptions go, everything tightens ---- */
@media (max-height: 800px) and (min-width: 900px) {
  .cm-fd .cm-fd-bar { min-height: 58px; }
  .cm-fd .cm-fd-mark { width: 38px; height: 38px; flex-basis: 38px; }
  .cm-fd .cm-fd-hero { padding-top: 18px; padding-bottom: 18px; }
  .cm-fd .cm-fd-rule { margin-bottom: 10px; }
  .cm-fd .cm-fd-overline { margin-bottom: 8px; }
  .cm-fd .cm-fd-hero h1 { font-size: 34px; margin-bottom: 10px; }
  .cm-fd .cm-fd-hero p { font-size: 14.5px; line-height: 1.5; }
  .cm-fd .cm-fd-features { margin-top: 14px; gap: 8px; }
  .cm-fd .cm-fd-features li small, .cm-fd .cm-sc-door small { display: none; }
  .cm-fd .cm-sc-door { margin-top: 8px; padding-top: 10px; padding-bottom: 10px; }
  .cm-fd .cm-fd-panel { padding-top: 10px; padding-bottom: 10px; }
  .cm-fd .cm-gs-head { padding: 14px 22px 24px; }
  .cm-fd .cm-gs .cm-gs-head h2 { font-size: 20px; }
  .cm-fd .cm-gs-rule, .cm-fd .cm-gs-sub, .cm-fd .cm-gs-staff-text small { display: none; }
  .cm-fd .cm-gs-art { width: 96px; }
  .cm-fd .cm-gs-tiles { margin-top: 8px; }
  .cm-fd .cm-gs-tile { padding: 10px 8px; }
  .cm-fd .cm-gs-ic { width: 36px; height: 36px; font-size: 15px; margin-bottom: 4px; }
  .cm-fd .cm-gs-or { margin: 10px 0 8px; }
  .cm-fd .cm-gs-staff { padding: 10px 14px; grid-template-columns: 56px 1fr; }
  .cm-fd .cm-gs-staff-art { width: 50px; height: 50px; font-size: 20px; box-shadow: 0 0 0 5px rgba(212,181,114,.22); }
  .cm-fd .cm-gs-btn { margin-top: 8px; padding: 8px 14px; }
  .cm-fd .cm-fd-foot { padding-top: 9px; padding-bottom: 9px; }
}
@media (max-height: 640px) and (min-width: 900px) {
  .cm-fd .cm-fd-hero p { display: none; }
  .cm-fd .cm-fd-hero h1 { font-size: 30px; }
  .cm-fd .cm-gs-tile small { display: none; }
}

/* ---- a phone on its side, any window under 520 tall: two columns, the essentials only ---- */
@media (max-height: 520px) and (min-width: 560px) {
  .cm-fd .cm-fd-body { grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); }
  .cm-fd .cm-fd-bar { min-height: 44px; padding: 0 16px; gap: 10px; }
  .cm-fd .cm-fd-mark { width: 30px; height: 30px; flex-basis: 30px; border-radius: 7px; }
  .cm-fd .cm-fd-mark img { max-width: 24px; max-height: 24px; }
  .cm-fd .cm-fd-name { font-size: 12.5px; }
  .cm-fd .cm-fd-brand small { display: none; }
  .cm-fd .cm-fd-hero { padding: 8px 12px 8px 20px; }
  .cm-fd .cm-fd-rule, .cm-fd .cm-fd-overline, .cm-fd .cm-fd-hero p { display: none; }
  .cm-fd .cm-fd-hero h1 { font-size: 21px; margin: 0 0 8px; }
  .cm-fd .cm-fd-hero h1 br { display: none; }
  .cm-fd .cm-fd-features { display: grid; margin-top: 0; gap: 6px; }
  .cm-fd .cm-fd-features li small, .cm-fd .cm-sc-door small { display: none; }
  .cm-fd .cm-fd-highlight-link { padding: 6px 10px; align-items: center; }
  .cm-fd .cm-fd-features b { font-size: 12.5px; }
  .cm-fd .cm-fd-features li > i, .cm-fd .cm-fd-highlight-link > i { width: 22px; height: 22px; font-size: 11px; }
  .cm-fd .cm-fd-highlight-cue { font-size: 0; gap: 0; padding: 4px 8px; }
  .cm-fd .cm-fd-highlight-cue i { font-size: 11px; }
  .cm-fd .cm-sc-door { margin-top: 6px; padding: 6px 10px; }
  .cm-fd .cm-sc-door-q { width: 24px; height: 24px; flex-basis: 24px; font-size: 12px; }
  .cm-fd .cm-sc-door b { font-size: 12.5px; }
  .cm-fd .cm-fd-panel { padding: 6px 16px 6px 0; }
  .cm-fd .cm-fd-choice { border-radius: 12px; }
  .cm-fd .cm-gs-head { padding: 8px 14px 14px; }
  .cm-fd .cm-gs-head::after { height: 22px; bottom: -12px; }
  .cm-fd .cm-gs .cm-gs-head h2 { font-size: 15.5px; }
  .cm-fd .cm-gs-head p { font-size: 11px; }
  .cm-fd .cm-gs-rule, .cm-fd .cm-gs-art, .cm-fd .cm-gs-sub, .cm-fd .cm-gs-kicker { display: none; }
  .cm-fd .cm-gs-body { padding: 0 12px 10px; }
  .cm-fd .cm-gs-group h3 { font-size: 13.5px; }
  .cm-fd .cm-gs-tiles { margin-top: 5px; gap: 6px; }
  .cm-fd .cm-gs-tile { padding: 5px 4px 6px; border-radius: 10px; }
  .cm-fd .cm-gs-ic { width: 24px; height: 24px; font-size: 11px; margin-bottom: 2px; }
  .cm-fd .cm-gs-tile b { font-size: 11.5px; }
  .cm-fd .cm-gs-tile small, .cm-fd .cm-gs-go { display: none; }
  .cm-fd .cm-gs-tiles.n1 .cm-gs-tile { grid-template-columns: 24px 1fr; grid-template-areas: "ic name"; padding: 6px 10px; }
  .cm-fd .cm-gs-or { margin: 5px 0 4px; font-size: 9px; }
  .cm-fd .cm-gs-staff { grid-template-columns: 1fr auto; padding: 6px 10px; gap: 8px; border-radius: 10px; }
  .cm-fd .cm-gs-staff-art, .cm-fd .cm-gs-staff-text .cm-gs-kicker, .cm-fd .cm-gs-staff-text small { display: none; }
  .cm-fd .cm-gs-staff-text { display: flex; align-items: center; justify-content: space-between; gap: 8px; grid-column: 1 / -1; }
  .cm-fd .cm-gs-staff-text b { font-size: 13px; }
  .cm-fd .cm-gs-btn { margin: 0; padding: 5px 10px; font-size: 11.5px; }
  .cm-fd .cm-fd-foot { display: none; }
}

/* ---- a phone held upright: one column, the welcome a header, the choice in reach without scrolling ---- */
@media (max-width: 599.98px) {
  .cm-fd .cm-fd-bar { min-height: 52px; padding: 0 14px; gap: 10px; }
  .cm-fd .cm-fd-mark { width: 34px; height: 34px; flex-basis: 34px; }
  .cm-fd .cm-fd-hero { padding: 12px 16px 8px; }
  .cm-fd .cm-fd-rule, .cm-fd .cm-fd-overline, .cm-fd .cm-fd-hero p { display: none; }
  .cm-fd .cm-fd-hero h1 { font-size: 22px; margin: 0 0 8px; }
  .cm-fd .cm-fd-hero h1 br { display: none; }
  .cm-fd .cm-fd-features { display: grid; margin-top: 0; gap: 6px; max-width: none; }
  .cm-fd .cm-fd-features li small, .cm-fd .cm-sc-door small { display: none; }
  .cm-fd .cm-fd-highlight-link { padding: 7px 10px; align-items: center; }
  .cm-fd .cm-fd-features b { font-size: 13px; }
  .cm-fd .cm-fd-highlight-cue { font-size: 11.5px; padding: 4px 9px; }
  .cm-fd .cm-sc-door { margin-top: 6px; padding: 7px 10px; }
  .cm-fd .cm-sc-door-q { width: 26px; height: 26px; flex-basis: 26px; font-size: 13px; }
  .cm-fd .cm-sc-door b { font-size: 13px; }
  .cm-fd .cm-fd-panel { padding: 4px 14px 10px; }
  .cm-fd .cm-fd-choice { border-radius: 14px; }
  .cm-fd .cm-gs-head { padding: 12px 16px 26px; }
  .cm-fd .cm-gs .cm-gs-head h2 { font-size: 19px; }
  .cm-fd .cm-gs-head p { font-size: 12.5px; }
  .cm-fd .cm-gs-rule { display: none; }
  .cm-fd .cm-gs-art { width: 78px; margin-top: -4px; }
  .cm-fd .cm-gs-body { padding: 0 12px 12px; }
  .cm-fd .cm-gs-sub { display: none; }
  .cm-fd .cm-gs-group h3 { font-size: 16px; }
  .cm-fd .cm-gs-tiles { margin-top: 8px; gap: 6px; }
  .cm-fd .cm-gs-tile { padding: 9px 4px 8px; border-radius: 12px; }
  .cm-fd .cm-gs-ic { width: 34px; height: 34px; font-size: 14px; margin-bottom: 4px; }
  .cm-fd .cm-gs-tile b { font-size: 12.5px; }
  .cm-fd .cm-gs-tile small { display: none; }
  .cm-fd .cm-gs-go { padding-top: 5px; }
  .cm-fd .cm-gs-go i { width: 24px; height: 24px; font-size: 10px; }
  .cm-fd .cm-gs-or { margin: 9px 0 8px; }
  .cm-fd .cm-gs-staff { grid-template-columns: 46px 1fr; text-align: left; justify-items: stretch; padding: 10px 12px; gap: 12px; }
  .cm-fd .cm-gs-staff-art { width: 42px; height: 42px; font-size: 17px; box-shadow: 0 0 0 4px rgba(212,181,114,.22); }
  .cm-fd .cm-gs-lock { width: 18px; height: 18px; font-size: 8px; right: -5px; bottom: -3px; }
  .cm-fd .cm-gs-staff-text b { font-size: 15.5px; }
  .cm-fd .cm-gs-staff-text small { display: none; }
  .cm-fd .cm-gs-btn { margin-top: 6px; padding: 7px 12px; font-size: 12.5px; }
  .cm-fd .cm-fd-foot { padding: 8px 14px; font-size: 11px; gap: 2px 12px; }
}
/* A short phone (360x640, 375x667): the welcome text and the hint go too. */
@media (max-width: 599.98px) and (max-height: 700px) {
  .cm-fd .cm-fd-hero h1 { font-size: 19px; margin-bottom: 6px; }
  .cm-fd .cm-fd-highlight-cue { font-size: 0; gap: 0; padding: 4px 8px; }
  .cm-fd .cm-fd-highlight-cue i { font-size: 11px; }
  .cm-fd .cm-gs-head p { display: none; }
  .cm-fd .cm-gs-head { padding: 12px 16px 24px; }
  .cm-fd .cm-gs-art { width: 62px; }
  .cm-fd .cm-gs-staff-text .cm-gs-kicker { display: none; }
  .cm-fd .cm-fd-foot > span:last-child { display: none; }
}

/* ---- portrait tablets (600-899 wide): one column, the welcome compact ---- */
@media (min-width: 600px) and (max-width: 899.98px) and (min-height: 521px) {
  .cm-fd .cm-fd-hero { padding: 22px 28px 12px; }
  .cm-fd .cm-fd-hero h1 { font-size: 30px; margin-bottom: 8px; }
  .cm-fd .cm-fd-hero h1 br { display: none; }
  .cm-fd .cm-fd-features { margin-top: 12px; }
  .cm-fd .cm-fd-features li small, .cm-fd .cm-sc-door small { display: none; }
  .cm-fd .cm-fd-panel { padding: 8px 28px 12px; justify-content: center; }
  .cm-fd .cm-fd-choice { max-width: 560px; margin: 0 auto; }
}

/* One column: the welcome and the choice sit together at the top, the spare height below them - not split between. */
@media (max-width: 899.98px) and (min-height: 521px) {
  .cm-fd .cm-fd-body { align-content: start; }
}