/* ==========================================================================
   DLCF - stylesheet
   Brand colours live in :root. Change them once and the whole site follows.
   ========================================================================== */

:root {
  /* Sampled from the DLCF logo: teal globe, orange swoosh, yellow book. */
  --brand:        #1b365d;
  --brand-dark:   #13294a;
  --brand-light:  #e8eef6;
  --gold:         #b3262b;
  /* The same orange is 3.74:1 on white, which fails AA for the small bold
     uppercase eyebrows. --gold stays as it is for backgrounds, gradients and
     focus rings, where contrast is not measured against white text; this
     darker one is for orange text sitting on a light surface. 5.1:1. */
  --gold-text:    #8f1d21;
  --gold-light:   #fdefe5;

  --ink:          #111827;
  --ink-soft:     #4a5854;
  /* Raised from #7b8783, which measured 3.73:1 on white and failed WCAG AA.
     This is 4.8:1, so the small uppercase labels that use it are legible
     without losing the quieter tone they are there to carry. */
  --ink-faint:    #697571;
  --line:         #dfe5e3;
  --paper:        #ffffff;
  --paper-alt:    #f6f8f7;

  --radius:       10px;
  --radius-lg:    16px;
  --shadow:       0 0 2px rgba(0,0,0,.10), 0 1px 2px rgba(0,0,0,.12);
  --shadow-lift:  0 10px 30px rgba(27,54,93,.12);

  --font:  "Segoe UI", Aptos, Calibri, -apple-system, BlinkMacSystemFont, sans-serif;
  --mono:  Consolas, "Courier New", Courier, monospace;

  --wrap:  1140px;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: var(--brand); }
a:hover { color: var(--brand-dark); }

h1, h2, h3, h4 { line-height: 1.2; margin: 0 0 .6em; font-weight: 650; letter-spacing: -.01em; }
h1 { font-size: clamp(2rem, 4.6vw, 3.15rem); }
h2 { font-size: clamp(1.5rem, 2.8vw, 2.1rem); }
h3 { font-size: 1.18rem; }
p  { margin: 0 0 1.1em; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }

.eyebrow {
  font-size: .74rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--gold-text);
  margin: 0 0 .8em;
}

.lede { font-size: 1.13rem; color: var(--ink-soft); max-width: 62ch; }

.muted { color: var(--ink-faint); }

/* ---- Skip link --------------------------------------------------------- */
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--brand); color: #fff; padding: 12px 18px;
  border-radius: 0 0 var(--radius) 0;
}
.skip:focus { left: 0; color: #fff; }

/* ---- Header ------------------------------------------------------------ */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.94);
  backdrop-filter: saturate(150%) blur(10px);
  border-bottom: 1px solid var(--line);
}
.site-header .wrap {
  display: flex; align-items: center; gap: 20px;
  min-height: 68px;
}

.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; color: var(--ink); flex: none; }
.brand-mark {
  width: 54px; height: 54px; flex: none;
  display: block;
  object-fit: contain;
}
.site-footer .brand-mark { filter: drop-shadow(0 0 1px rgba(255,255,255,.35)); }
.brand-lockup { display: flex; flex-direction: column; justify-content: center; }
.brand-name  { font-weight: 700; font-size: 1.24rem; line-height: 1.02; letter-spacing: -.015em; }
.brand-sub   { font-size: .72rem; color: var(--ink-faint); letter-spacing: .04em; line-height: 1.1; }

.site-nav { margin-left: auto; display: flex; align-items: center; gap: 1px; }
.site-nav a {
  text-decoration: none; color: var(--ink-soft);
  padding: 8px 8px; border-radius: 8px;
  font-size: .88rem; font-weight: 500;
  white-space: nowrap;
}
.site-nav a:hover { background: var(--brand-light); color: var(--brand-dark); }
.site-nav a[aria-current="page"] { color: var(--brand-dark); font-weight: 650; background: var(--brand-light); }

.btn {
  display: inline-block;
  background: var(--brand); color: #fff !important;
  padding: 11px 20px; border-radius: var(--radius);
  text-decoration: none; font-weight: 600; font-size: .95rem;
  border: 1px solid var(--brand);
  cursor: pointer;
  transition: background .15s ease, transform .15s ease;
}
.btn:hover { background: var(--brand-dark); border-color: var(--brand-dark); transform: translateY(-1px); }
.btn-ghost {
  background: transparent; color: var(--brand) !important;
  border-color: var(--line);
}
.btn-ghost:hover { background: var(--brand-light); border-color: var(--brand); }
.btn-gold { background: var(--gold); border-color: var(--gold); color: #fff !important; }
.btn-gold:hover { background: #8f1d21; border-color: #8f1d21; }

.nav-toggle {
  display: none; margin-left: auto;
  background: none; border: 1px solid var(--line);
  border-radius: 8px; padding: 8px 11px;
  font-size: 1.1rem; cursor: pointer; color: var(--ink);
}

/* ---- Hero -------------------------------------------------------------- */
.hero {
  background:
    radial-gradient(900px 420px at 12% -10%, rgba(201,150,43,.16), transparent 62%),
    linear-gradient(160deg, var(--brand-dark), var(--brand) 62%, #2f5d9e);
  color: #fff;
  padding: 84px 0 76px;
}
.hero h1 { color: #fff; max-width: 16ch; }
.hero p  { color: rgba(255,255,255,.86); font-size: 1.14rem; max-width: 58ch; }
.hero .eyebrow { color: #f0cd82; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 26px; }
.hero .btn-ghost { color: #fff !important; border-color: rgba(255,255,255,.42); }
.hero .btn-ghost:hover { background: rgba(255,255,255,.12); border-color: #fff; }

/* ---- Page head (inner pages) ------------------------------------------ */
.page-head {
  background: var(--paper-alt);
  border-bottom: 1px solid var(--line);
  padding: 56px 0 48px;
}
.page-head h1 { margin-bottom: .35em; }

/* ---- Sections ---------------------------------------------------------- */
.section { padding: 68px 0; }
.section-alt { background: var(--paper-alt); border-block: 1px solid var(--line); }
.section-head { max-width: 66ch; margin-bottom: 34px; }

/* ---- Grid & cards ------------------------------------------------------ */
.grid { display: grid; gap: 20px; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }

.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 26px;
  box-shadow: var(--shadow);
}
.card h3 { margin-bottom: .45em; }
.card p:last-child { margin-bottom: 0; }
.card-icon {
  width: 42px; height: 42px; border-radius: 11px;
  background: var(--brand-light); color: var(--brand);
  display: grid; place-items: center;
  font-size: 1.25rem; margin-bottom: 16px;
}

.card-link {
  display: block; text-decoration: none; color: inherit;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.card-link:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); border-color: var(--brand); color: inherit; }

/* ---- Stats ------------------------------------------------------------- */
.stat { text-align: center; padding: 22px 10px; }
.stat-value { font-size: 2.3rem; font-weight: 700; color: var(--brand); line-height: 1; }
.stat-label { font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); margin-top: 8px; }

/* ---- People ------------------------------------------------------------ */
.person {
  display: flex; align-items: center; gap: 14px;
  padding: 15px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
}
.avatar {
  width: 44px; height: 44px; flex: none; border-radius: 50%;
  background: var(--brand); color: #fff;
  display: grid; place-items: center;
  font-weight: 650; font-size: .92rem; letter-spacing: .02em;
  position: relative; overflow: hidden;
  box-shadow: 0 0 0 2px var(--paper), 0 0 0 3px var(--brand-light);
}
/* The monogram sits underneath; the generated portrait covers it when it
   loads. Missing file removes itself, so the initials remain visible. */
.avatar > span { grid-area: 1 / 1; }
.avatar > img {
  grid-area: 1 / 1;
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 32%;
  display: block;
}
.person-name { font-weight: 600; }
.person-role { font-size: .87rem; color: var(--ink-faint); }

/* Role address on an executive card. Wraps on narrow screens rather than
   overflowing the card, since these addresses are long. */
.person-email {
  display: inline-block;
  margin-top: 3px;
  font-size: .82rem;
  color: var(--brand-dark);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  overflow-wrap: anywhere;
}
.person-email:hover,
.person-email:focus-visible { border-bottom-color: currentColor; }

/* ---- Portrait row (founders, patrons) ---------------------------------- */
.avatar-xl {
  width: 100%; height: auto; aspect-ratio: 4 / 5;
  border-radius: var(--radius-lg);
  font-size: 1.9rem; letter-spacing: .04em;
  box-shadow: 0 0 0 1px var(--line), var(--shadow-lift);
}
.avatar-xl > img { object-position: center center; }

.face-row {
  display: grid; gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}
.face { margin: 0; }
.face figcaption {
  display: block; margin-top: 12px; line-height: 1.4;
}
.face figcaption strong { display: block; font-size: .97rem; }
.face figcaption span {
  display: block; font-size: .82rem; color: var(--ink-faint);
  letter-spacing: .04em; text-transform: uppercase; margin-top: 2px;
}
/* An officer's portrait carries a role address under it, which the founding
   members do not have. Lower case and not tracked out, because an email
   address in small caps with extra letter-spacing is hard to read and people
   do read these ones. */
.face-person figcaption .person-email {
  display: block; margin-top: 6px;
  font-size: .8rem; text-transform: none; letter-spacing: 0;
  overflow-wrap: anywhere;
}

/* ---- Section artwork --------------------------------------------------- */
.art {
  display: block; width: 100%; height: auto;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-lift);
}
.art-split {
  display: grid; gap: 34px; align-items: center;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

/* ---- Numbered list ----------------------------------------------------- */
.numbered { list-style: none; margin: 0; padding: 0; counter-reset: n; }
.numbered li {
  counter-increment: n;
  position: relative;
  padding: 13px 0 13px 46px;
  border-bottom: 1px solid var(--line);
  color: var(--ink-soft);
}
.numbered li:last-child { border-bottom: 0; }
.numbered li::before {
  content: counter(n);
  position: absolute; left: 0; top: 12px;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--gold-light); color: #8a6a12;
  display: grid; place-items: center;
  font-size: .82rem; font-weight: 700;
}

.ticks { list-style: none; margin: 0; padding: 0; }
.ticks li { position: relative; padding: 7px 0 7px 28px; color: var(--ink-soft); }
.ticks li::before { content: "\2713"; position: absolute; left: 0; color: var(--brand); font-weight: 700; }

/* ---- Scholarship -------------------------------------------------------- */
.sch-closes {
  margin: 0;
  font-size: .95rem;
  color: var(--ink-soft);
}
.sch-docs { margin: 0 0 18px; padding-left: 22px; }
.sch-docs li { padding: 6px 0; color: var(--ink-soft); }

.quiz-prize { text-align: center; }
.quiz-place {
  margin: 0 0 6px;
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-weight: 600;
}
.quiz-amount {
  margin: 0;
  font-family: var(--font-head, inherit);
  font-size: 1.7rem;
  font-weight: 700;
  color: var(--brand-dark);
}
.quiz-stage { margin-bottom: 22px; }
.quiz-stage h4 { margin: 0 0 6px; font-size: 1rem; }
.quiz-stage p { margin: 0; color: var(--ink-soft); }

/* ---- Campus visitations ------------------------------------------------- */
.visit {
  padding: 0 0 34px;
  margin-bottom: 34px;
  border-bottom: 1px solid var(--line);
}
.visit:last-child { border-bottom: 0; margin-bottom: 0; }
.visit-head {
  display: flex; flex-wrap: wrap; gap: 6px 16px;
  align-items: baseline; margin-bottom: 10px;
}
.visit-head h2 { margin: 0; font-size: 1.35rem; }
.visit-when { margin: 0; font-size: .88rem; color: var(--ink-faint); }
.visit-notes { white-space: pre-wrap; overflow-wrap: anywhere; max-width: 70ch; }
.visit-by { font-size: .82rem; color: var(--ink-faint); margin: 14px 0 0; }

.visit-media-grid {
  display: grid; gap: 12px; margin-top: 18px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.visit-media { margin: 0; }
.visit-media img,
.visit-media video {
  display: block; width: 100%; height: auto;
  border-radius: var(--radius-lg);
  background: var(--paper-alt);
}
/* A photograph from a phone can be portrait or landscape and the grid should
   not care. Fixing the ratio keeps the rows level without cropping anybody
   out of the frame, which matters when the subject is people. */
.visit-media img { aspect-ratio: 4 / 3; object-fit: cover; }
/* Video keeps its own shape: cropping a video to a grid hides half of what
   was filmed and there is no way for the viewer to get it back. */
.visit-video video { aspect-ratio: auto; max-height: 70vh; }

/* ---- Table ------------------------------------------------------------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-lg); }
table { width: 100%; border-collapse: collapse; font-size: .95rem; background: var(--paper); }
th, td { text-align: left; padding: 13px 16px; border-bottom: 1px solid var(--line); }
th { background: var(--paper-alt); font-weight: 650; font-size: .8rem; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-faint); }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: var(--brand-light); }

/* ---- Empty state ------------------------------------------------------- */
.empty {
  border: 1px dashed var(--line);
  border-radius: var(--radius-lg);
  padding: 44px 28px;
  text-align: center;
  color: var(--ink-faint);
  background: var(--paper-alt);
}
.empty strong { display: block; color: var(--ink-soft); margin-bottom: 6px; font-size: 1.02rem; }

/* ---- Forms ------------------------------------------------------------- */
.field { margin-bottom: 16px; }
.field label { display: block; font-size: .87rem; font-weight: 600; margin-bottom: 6px; color: var(--ink-soft); }
.field input, .field select, .field textarea {
  width: 100%; padding: 11px 13px;
  border: 1px solid var(--line); border-radius: var(--radius);
  font: inherit; font-size: .96rem; color: var(--ink);
  background: var(--paper);
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-light);
}
.field textarea { min-height: 130px; resize: vertical; }

/* Form controls land at 43.3px from padding and line-height alone, just
   under the 44px target this site holds itself to. Pin the floor instead of
   tuning padding, which would shift with any font change. */
.field input, .field select { min-height: 44px; }
.form-note { font-size: .86rem; color: var(--ink-faint); }

.notice {
  border-left: 3px solid var(--gold);
  background: var(--gold-light);
  padding: 14px 18px; border-radius: 0 var(--radius) var(--radius) 0;
  font-size: .93rem; color: #6d5410;
}

/* ---- CTA band ---------------------------------------------------------- */
.band {
  background: linear-gradient(160deg, var(--brand-dark), var(--brand));
  color: #fff; padding: 58px 0; text-align: center;
}
.band h2 { color: #fff; }
.band p { color: rgba(255,255,255,.85); max-width: 56ch; margin-inline: auto; }
.band .btn-ghost { color: #fff !important; border-color: rgba(255,255,255,.45); }
.band .btn-ghost:hover { background: rgba(255,255,255,.12); }

/* ---- Footer ------------------------------------------------------------ */
.site-footer { background: #0b1220; color: #a3aec8; padding: 54px 0 26px; font-size: .93rem; }
.site-footer h3 { color: #fff; font-size: .76rem; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 14px; }
.site-footer a { color: #c9d1e6; text-decoration: none; display: block; padding: 4px 0; }
.site-footer a:hover { color: #fff; }
.footer-grid { display: grid; gap: 30px; grid-template-columns: 1.6fr repeat(3, 1fr); }
.social-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.site-footer .social-row a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0;
  border-radius: 11px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  color: #c9d1e6;
  transition: background .18s ease, color .18s ease, transform .18s ease;
}
.site-footer .social-row a:hover,
.site-footer .social-row a:focus-visible {
  background: rgba(255,255,255,.16); color: #fff; transform: translateY(-2px);
}
.social-row svg { display: block; }
.footer-bottom {
  margin-top: 38px; padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,.1);
  display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  font-size: .86rem; color: #7f8aa6;
}

/* The footer links are inline, so vertical padding cannot grow the hit area.
   On touch screens make them inline-block so each target clears 44px. */
@media (pointer: coarse) {
  .footer-bottom a { display: inline-block; padding-block: 14px; }
  .footer-bottom    { gap: 4px 14px; }
  /* Same reason as the footer: grow the mailto link to a 44px target. */
  .person-email     { padding-block: 12px; margin-top: 0; }
  /* The header lockup sits at 42px on its own. Inline prose links are left
     alone: WCAG 2.5.8 exempts a target sized by the line-height around it. */
  .brand            { min-height: 44px; }
  /* The contact page's email and phone each sit on their own line after a
     <br>, so the inline exemption does not cover them. */
  #c-mail, #c-tel   { display: inline-block; padding-block: 12px; }
}

/* ---- Portal ------------------------------------------------------------ */
.portal-shell { min-height: 100vh; display: flex; flex-direction: column; background: var(--paper-alt); }
.portal-bar {
  background: var(--brand-dark); color: #fff;
  padding: 13px 0;
}
.portal-bar .wrap { display: flex; align-items: center; gap: 16px; }
.portal-bar a { color: rgba(255,255,255,.85); text-decoration: none; font-size: .92rem; }
.portal-bar a:hover { color: #fff; }
.portal-bar .brand-name { color: #fff; }
.portal-bar .brand-sub  { color: rgba(255,255,255,.6); }

.portal-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); background: var(--paper); overflow-x: auto; }
.portal-tabs button {
  background: none; border: 0; border-bottom: 2px solid transparent;
  padding: 14px 18px; font: inherit; font-size: .94rem; font-weight: 550;
  color: var(--ink-soft); cursor: pointer; white-space: nowrap;
}
.portal-tabs button:hover { color: var(--brand); }
.portal-tabs button.active { color: var(--brand-dark); border-bottom-color: var(--brand); font-weight: 650; }

.panel { display: none; padding: 32px 0 60px; }
.panel.active { display: block; }

.login-box {
  max-width: 400px; margin: 8vh auto; background: var(--paper);
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 34px; box-shadow: var(--shadow-lift);
}

.pill { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: .76rem; font-weight: 650; }
.pill-ok   { background: #e3f5ea; color: #14663a; }
.pill-wait { background: var(--gold-light); color: #8a6a12; }
.pill-off  { background: #f0f1f1; color: #6b7370; }

/* ---- Responsive -------------------------------------------------------- */
@media (max-width: 1150px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .nav-toggle { display: block; }
  .site-nav {
    display: none;
    position: absolute; left: 0; right: 0; top: 100%;
    background: var(--paper); border-bottom: 1px solid var(--line);
    flex-direction: column; align-items: stretch;
    padding: 10px 24px 18px; gap: 2px;
    box-shadow: var(--shadow-lift);
  }
  .site-nav.open { display: flex; }
  .site-nav a { padding: 12px 10px; font-size: 1rem; }
  .site-nav .btn { text-align: center; margin-top: 8px; }
  .site-header .wrap { position: relative; flex-wrap: wrap; }
}

@media (max-width: 640px) {
  body { font-size: 16px; }
  .hero { padding: 60px 0 54px; }
  .section { padding: 50px 0; }
  .footer-grid { grid-template-columns: 1fr; gap: 24px; }
  .card { padding: 22px; }
  .wrap { padding: 0 18px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}