/* ============================================================
   UVA · Frank Batten School — Garrett Hall Directory
   Shared brand stylesheet
   Brand: UVA Blue #232D4B, UVA Orange #E57200, ITC Franklin Gothic
   ============================================================ */

/* ---- Fonts (UVA brand typeface: ITC Franklin Gothic) ---- */
@font-face{
  font-family:"Franklin";
  src:url("fonts/ITCFranklinGothicStd-Med.otf") format("opentype");
  font-weight:500; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Franklin";
  src:url("fonts/ITCFranklinGothicStd-MedIt.otf") format("opentype");
  font-weight:500; font-style:italic; font-display:swap;
}
@font-face{
  font-family:"Franklin";
  src:url("fonts/ITCFranklinGothicStd-HvyIt.otf") format("opentype");
  font-weight:800; font-style:italic; font-display:swap;
}
@font-face{
  font-family:"FranklinCond";
  src:url("fonts/ITCFranklinGothicStd-MdCd.otf") format("opentype");
  font-weight:500; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"FranklinCond";
  src:url("fonts/ITCFranklinGothicStd-MdCdIt.otf") format("opentype");
  font-weight:500; font-style:italic; font-display:swap;
}

:root{
  --uva-blue:#232D4B;
  --uva-orange:#E57200;
  --ink:#232D4B;
  --ink-soft:#5B6478;     /* desaturated blue for secondary text */
  --line:#D8DBE3;         /* hairline */
  --line-soft:#E9EBF0;
  --panel:#F5F6F8;        /* faint blue-gray panel */
  --paper:#FFFFFF;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:#23262e;
  font-family:"Franklin",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  color:var(--ink);
}

/* ---- Viewport scaling stage (screen only) ---- */
.stage{
  position:fixed; inset:0;
  display:flex; align-items:center; justify-content:center;
  overflow:auto;
  background:#23262e;
}
.sheet{
  background:var(--paper);
  position:relative;
  flex:none;
  transform-origin:center center;
  box-shadow:0 24px 70px rgba(0,0,0,.45);
  overflow:hidden;
}
/* landscape boards = 11×17 (17in wide × 11in tall): original 1056×816 design,
   scaled to fill height and centered (faithful to the 8.5×11 layout) · portrait = Letter */
/* Landscape content width drives the fill of the 11×17 sheet.
   --landscape-content-w: 1261px  → fills the full tabloid width (wider columns / name↔number gaps)
                          1056px  → original 8.5×11 proportions, centered with side margins (REVERT value) */
:root{ --landscape-content-w:1261px; }
.sheet.landscape{ width:1632px; height:1056px; display:grid; place-items:center; }
.sheet.landscape .pad{ position:relative; inset:auto; width:var(--landscape-content-w); height:816px;
  zoom:1.2941; }
.sheet.portrait{  width:816px;  height:1056px; }

/* ============================================================
   HEADER  (lockup + level indicator)
   ============================================================ */
.dir-head{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:32px;
}

/* --- Batten lockup (official UVA Batten horizontal logo) --- */
.lockup{ display:flex; align-items:center; }
.lockup .batten-logo{ display:block; height:56px; width:auto; }
/* legacy reconstructed pieces (unused once official logo is in place) */
.lockup .uva-mark{ display:none; }
.lockup .rule{ display:none; }
.lockup .school{ display:none; }

/* --- Level indicator (vertical: label + solid bar) --- */
.levels{ display:flex; flex-direction:column; align-items:flex-end; gap:7px; }
.levels .eyebrow{
  font-family:"FranklinCond"; font-weight:500;
  font-size:10px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-soft); white-space:nowrap;
}
.levels .stack{ display:flex; flex-direction:column; align-items:flex-end; gap:5px; }
.levels .lv{
  display:flex; align-items:center; justify-content:flex-end; gap:9px;
  font-family:"FranklinCond"; font-weight:500; font-size:13px; line-height:1;
  color:var(--ink-soft); letter-spacing:.02em;
}
.levels .lv::after{
  content:""; display:block;
  width:38px; height:9px; border-radius:2px;
  background:var(--line);
}
.levels .lv.active{ color:var(--uva-blue); }
.levels .lv.active::after{ background:var(--uva-orange); }

/* ============================================================
   TITLE BLOCK
   ============================================================ */
.title-block{ }
.title-block .eyebrow{
  font-family:"FranklinCond"; font-weight:500;
  letter-spacing:.22em; text-transform:uppercase;
  color:var(--uva-orange);
  font-size:13px;
}
.title-block h1{
  font-family:"Franklin"; font-weight:500;
  color:var(--uva-blue);
  margin:.18em 0 0;
  line-height:.98;
  letter-spacing:-0.01em;
}
.title-block .floor{
  display:flex; align-items:baseline; gap:16px;
  margin-top:.28em;
}
.title-block .floor .name{
  font-family:"Franklin"; font-weight:500; font-style:italic;
  color:var(--ink-soft);
}
.title-block .floor .range{
  font-family:"FranklinCond"; font-weight:500;
  color:var(--ink-soft); letter-spacing:.04em;
}

/* ---- rules ---- */
.rule-orange{ height:3px; background:var(--uva-orange); border:0; }
.rule-thin{ height:1px; background:var(--line); border:0; }

/* ============================================================
   DIRECTORY SECTIONS + ENTRIES
   ============================================================ */
.sec-label{
  font-family:"FranklinCond"; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--uva-blue);
  font-size:14px;
  display:flex; align-items:center; gap:10px;
  margin:0 0 8px;
}
.sec-label::before{
  content:""; width:14px; height:3px; background:var(--uva-orange);
  display:inline-block; flex:none;
}

.entries{ columns:auto; column-gap:36px; }
.entry{
  display:flex; align-items:baseline; gap:10px;
  justify-content:space-between;
  padding:6px 0;
  border-bottom:1px solid var(--line-soft);
  break-inside:avoid;
}
.entry .nm{
  font-family:"Franklin"; font-weight:500;
  color:var(--ink); white-space:nowrap;
  flex:0 1 auto; overflow:hidden; text-overflow:ellipsis;
}
.entry .dots{ display:none; }
.entry .nm .first{ color:var(--ink-soft); }
.entry .dots{
  flex:1 1 auto; height:1px; align-self:flex-end;
  margin-bottom:4px;
  background-image:radial-gradient(currentColor 1px, transparent 1.4px);
  background-size:6px 6px; background-repeat:repeat-x;
  background-position:bottom;
  color:var(--line);
  min-width:14px;
}
.entry .rm{
  font-family:"FranklinCond"; font-weight:500;
  color:var(--uva-blue);
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.entry.is-room .nm{ font-weight:500; }
.entry.is-room .rm{ color:var(--uva-blue); }

/* ============================================================
   FOOTER
   ============================================================ */
.dir-foot{
  display:flex; align-items:center; justify-content:space-between;
  font-family:"FranklinCond"; font-weight:500;
  font-size:12px; letter-spacing:.06em;
  color:var(--ink-soft);
}
.dir-foot .url{ color:var(--uva-blue); letter-spacing:.1em; }

/* ============================================================
   PRINT
   ============================================================ */
@media print{
  body{ background:#fff; }
  .stage{ position:static; display:block; background:#fff; overflow:visible; }
  .sheet{ box-shadow:none; transform:none !important; }
  .sheet.landscape{ width:17in; height:11in; }
  .sheet.portrait{  width:8.5in; height:11in; }
}
@page{ margin:0; }