/* ==========================================================================
   GOKUL BABU DEGREE COLLEGE, PIPAR CITY
   A classic institutional website: utility line, sticky masthead with a
   grouped dropdown navigation, ivory paper, a navy and gold palette taken
   from the college crest, Lora for headings and Figtree for reading.
   ========================================================================== */

@font-face {
  font-family: 'Lora';
  src: url('assets/fonts/lora-var.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Figtree';
  src: url('assets/fonts/figtree-var.woff2') format('woff2');
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}

:root {
  --navy: #1c1149;
  --navy-2: #2b1b6d;
  --navy-3: #120a33;
  --gold: #856008;          /* gold as TEXT: clears AA on every paper tone */
  --gold-2: #e3ac35;        /* gold as a surface or rule */
  --gold-soft: #fdf3dc;

  --link: #2b1b6d;          /* accent foreground on paper */
  --btn-bg: #2b1b6d;
  --btn-ink: #ffffff;

  --paper: #fcfaf5;
  --card: #ffffff;
  --tint: #f5f1e7;
  --ink: #1f1b2e;
  --ink-2: #514a66;
  --ink-3: #6b6382;
  --line: #e4ddcf;
  --line-2: #cec6b4;

  --shadow: 0 1px 2px rgba(28, 17, 73, 0.05), 0 10px 30px rgba(28, 17, 73, 0.07);
  --shadow-lg: 0 2px 6px rgba(28, 17, 73, 0.08), 0 24px 60px rgba(28, 17, 73, 0.14);

  --r: 10px;
  --r-sm: 8px;
  --r-pill: 999px;

  --wrap: 1220px;
  --gut: clamp(16px, 4vw, 32px);
  --mast-h: 74px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --t: 200ms;

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --navy: #15102f;
    --navy-2: #241a52;
    --navy-3: #0c0822;
    --gold: #e8bb5c;
    --gold-2: #f2cf7e;
    --gold-soft: #2a2244;

    --link: #b5a8f7;
    --btn-bg: #a294f0;
    --btn-ink: #12102a;

    --paper: #131024;
    --card: #1b1735;
    --tint: #201b3c;
    --ink: #f3f0fb;
    --ink-2: #c3bcd9;
    --ink-3: #a29ab8;
    --line: #2e2853;
    --line-2: #423a6f;

    --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 10px 30px rgba(0, 0, 0, 0.35);
    --shadow-lg: 0 2px 6px rgba(0, 0, 0, 0.5), 0 24px 60px rgba(0, 0, 0, 0.45);
    color-scheme: dark;
  }
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Figtree', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body.nav-open { overflow: hidden; }

h1, h2, h3, h4 {
  font-family: 'Lora', Georgia, 'Times New Roman', serif;
  font-weight: 600;
  line-height: 1.16;
  letter-spacing: -0.015em;
  margin: 0;
  color: var(--ink);
  text-wrap: balance;
}

h1 { font-size: clamp(2rem, 4.6vw, 3.1rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); }
h3 { font-size: clamp(1.05rem, 1.7vw, 1.22rem); }

p { margin: 0 0 1em; }
img { max-width: 100%; display: block; }
a { color: var(--link); }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gut); }
.pad { padding-block: clamp(34px, 5vw, 70px); }

:focus-visible { outline: 3px solid var(--gold-2); outline-offset: 2px; border-radius: 4px; }

.skip-link {
  position: fixed;
  left: 12px; top: -70px;
  z-index: 200;
  background: var(--navy);
  color: #fff;
  padding: 11px 18px;
  border-radius: var(--r-sm);
  font-weight: 600;
  transition: top var(--t) var(--ease);
}

.skip-link:focus { top: 12px; }

.sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ==========================================================================
   TOP UTILITY LINE  (scrolls away)
   ========================================================================== */

.topline { background: var(--navy-3); color: rgba(255, 255, 255, 0.76); font-size: 0.8rem; }

.topline-in {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 18px;
  min-height: 36px;
  padding-block: 6px;
}

.topline p { margin: 0; }
.topline-links { display: flex; flex-wrap: wrap; gap: 16px; }
.topline a { color: inherit; text-decoration: none; }

@media (hover: hover) and (pointer: fine) { .topline a:hover { color: var(--gold-2); } }
@media (max-width: 620px) { .topline p { display: none; } .topline-in { justify-content: center; } }

/* ==========================================================================
   STICKY MASTHEAD
   ========================================================================== */

.masthead {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--navy);
  color: #fff;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08);
}

.masthead.is-stuck { box-shadow: 0 8px 26px rgba(12, 8, 34, 0.28); }

.mast {
  display: flex;
  align-items: center;
  gap: clamp(10px, 2vw, 22px);
  min-height: var(--mast-h);
  padding-block: 8px;
}

.mark { display: flex; align-items: center; gap: 12px; color: #fff; text-decoration: none; margin-right: auto; min-width: 0; }

.mark img {
  width: 52px; height: 52px;
  flex: none;
  border-radius: var(--r-pill);
  background: #fff;
  padding: 2px;
}

.mark span { display: grid; min-width: 0; line-height: 1.2; }

.mark b {
  font-family: 'Lora', Georgia, serif;
  font-weight: 600;
  font-size: 1.06rem;
  letter-spacing: -0.01em;
}

.mark i { font-style: normal; font-size: 0.74rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gold-2); }

/* --- desktop navigation ---------------------------------------------- */

.mainnav { display: none; align-items: center; gap: 2px; }

.navitem { position: relative; }

.navitem > a,
.navitem > button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 12px;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  color: rgba(255, 255, 255, 0.86);
  font: 600 0.92rem/1.2 'Figtree', sans-serif;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--t) var(--ease), color var(--t) var(--ease);
}

.navitem > button::after {
  content: '';
  width: 6px; height: 6px;
  border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform var(--t) var(--ease);
}

.navitem > button[aria-expanded='true']::after { transform: translateY(1px) rotate(-135deg); }

.navitem > a[aria-current='page'],
.navitem.is-active > button { color: #fff; background: rgba(255, 255, 255, 0.12); }

@media (hover: hover) and (pointer: fine) {
  .navitem > a:hover, .navitem > button:hover { color: #fff; background: rgba(255, 255, 255, 0.1); }
}

.dropdown {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  min-width: 268px;
  padding: 8px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow-lg);
  display: grid;
  gap: 2px;
  z-index: 10;
  max-height: min(70vh, 520px);
  overflow-y: auto;
}

.dropdown[hidden] { display: none; }

/* a menu near the right edge opens inward so it cannot push the page sideways */
.navitem:nth-last-child(-n+2) .dropdown { left: auto; right: 0; }
.navitem:nth-last-child(-n+2) .dropdown::before { left: auto; right: 22px; }

.dropdown::before {
  content: '';
  position: absolute;
  top: -5px; left: 22px;
  width: 10px; height: 10px;
  background: var(--card);
  border-left: 1px solid var(--line);
  border-top: 1px solid var(--line);
  transform: rotate(45deg);
}

.dropdown a {
  display: grid;
  gap: 1px;
  padding: 9px 11px;
  border-radius: var(--r-sm);
  color: var(--ink);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 600;
  transition: background var(--t) var(--ease), color var(--t) var(--ease);
}

.dropdown a small { font-weight: 400; font-size: 0.78rem; color: var(--ink-3); }

@media (hover: hover) and (pointer: fine) {
  .dropdown a:hover { background: var(--gold-soft); color: var(--link); }
}

.dropdown a[aria-current='page'] { background: var(--gold-soft); color: var(--link); }

.cta {
  display: none;
  padding: 11px 19px;
  border-radius: var(--r-pill);
  background: var(--gold-2);
  color: #2c1d02;
  font: 700 0.9rem/1 'Figtree', sans-serif;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 130ms var(--ease), filter var(--t) var(--ease);
}

@media (hover: hover) and (pointer: fine) { .cta:hover { filter: brightness(1.07); } }
.cta:active { transform: scale(0.97); }

.burger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: var(--r-sm);
  background: transparent;
  cursor: pointer;
}

.burger span { display: grid; gap: 4px; }
.burger i { display: block; width: 18px; height: 2px; background: #fff; border-radius: 2px; transition: transform var(--t) var(--ease), opacity var(--t) var(--ease); }
.burger[aria-expanded='true'] i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded='true'] i:nth-child(2) { opacity: 0; }
.burger[aria-expanded='true'] i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (min-width: 1180px) {
  .mainnav { display: flex; }
  .cta { display: inline-flex; }
  .burger { display: none; }
}

/* the eight menus tighten slightly before the hamburger takes over */
@media (min-width: 1180px) and (max-width: 1320px) {
  .navitem > a, .navitem > button { padding-inline: 9px; font-size: 0.88rem; }
  .mark b { font-size: 1rem; }
}

/* --- mobile panel ------------------------------------------------------ */

.navpanel {
  position: fixed;
  inset: 0;
  z-index: 99;
  background: var(--navy);
  color: #fff;
  overflow-y: auto;
  padding-top: calc(var(--mast-h) + 12px);
  padding-bottom: 40px;
}

.navpanel[hidden] { display: none; }

.navgroup { border-bottom: 1px solid rgba(255, 255, 255, 0.12); }

.navgroup > button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 15px 2px;
  border: 0;
  background: transparent;
  color: #fff;
  font: 600 1rem/1.2 'Figtree', sans-serif;
  text-align: left;
  cursor: pointer;
}

.navgroup > button::after {
  content: '';
  width: 8px; height: 8px;
  border-right: 1.8px solid var(--gold-2);
  border-bottom: 1.8px solid var(--gold-2);
  transform: translateY(-2px) rotate(45deg);
  transition: transform var(--t) var(--ease);
}

.navgroup > button[aria-expanded='true']::after { transform: translateY(2px) rotate(-135deg); }

.navgroup > a {
  display: block;
  padding: 15px 2px;
  color: #fff;
  font-weight: 600;
  text-decoration: none;
}

.navgroup ul { list-style: none; margin: 0; padding: 0 0 12px; display: grid; gap: 2px; }
.navgroup ul[hidden] { display: none; }

.navgroup ul a {
  display: block;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.86);
  font-size: 0.92rem;
  text-decoration: none;
}

.navpanel-in { padding-block: 8px 30px; }
.navpanel-foot { display: grid; gap: 10px; margin-top: 22px; }

/* ==========================================================================
   BUTTONS AND LINKS
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  border: 1px solid var(--btn-bg);
  border-radius: var(--r-pill);
  background: var(--btn-bg);
  color: var(--btn-ink);
  font: 600 0.94rem/1 'Figtree', sans-serif;
  text-decoration: none;
  cursor: pointer;
  transition: transform 130ms var(--ease), filter var(--t) var(--ease), background var(--t) var(--ease);
}

.btn-gold { background: var(--gold-2); border-color: var(--gold-2); color: #2c1d02; }
.btn-ghost { background: transparent; color: var(--link); border-color: var(--line-2); }
.btn-light { background: #fff; border-color: #fff; color: var(--navy); }

@media (hover: hover) and (pointer: fine) {
  .btn:hover { filter: brightness(1.08); }
  .btn-ghost:hover { filter: none; border-color: var(--link); background: var(--gold-soft); }
}

.btn:active { transform: scale(0.98); }

.arrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: 600;
  color: var(--link);
  text-decoration: none;
}

.arrow::after { content: '\203A'; font-size: 1.15em; line-height: 1; transition: transform var(--t) var(--ease); }

@media (hover: hover) and (pointer: fine) { .arrow:hover::after { transform: translateX(3px); } }

.links { display: flex; flex-wrap: wrap; gap: 14px 22px; margin: 1.1em 0; }

/* ==========================================================================
   SECTION HEADINGS
   ========================================================================== */

.kicker {
  display: inline-block;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 10px;
}

.shead { display: grid; gap: 12px; margin-bottom: clamp(20px, 3vw, 32px); }
.shead h2 { position: relative; padding-bottom: 12px; }

.shead h2::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 58px; height: 3px;
  border-radius: 2px;
  background: var(--gold-2);
}

.shead p { margin: 0; color: var(--ink-2); max-width: 60ch; }

@media (min-width: 880px) {
  .shead { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-items: end; gap: 28px; }
  .shead .shead-side { justify-self: end; text-align: right; }
}

.note { font-size: 0.85rem; color: var(--ink-3); }

/* ==========================================================================
   HERO
   ========================================================================== */

.hero { position: relative; background: var(--navy); color: #fff; overflow: hidden; }

.hero-bg { position: absolute; inset: 0; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; opacity: 0.8; }

/* light enough to see the campus, dark enough behind the words to read them */
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, rgba(18, 10, 51, 0.88) 0%, rgba(18, 10, 51, 0.62) 48%, rgba(18, 10, 51, 0.2) 100%);
}

/* on a phone the text runs the full width, so the veil runs top to bottom instead */
@media (max-width: 767px) {
  .hero::after { background: linear-gradient(180deg, rgba(18, 10, 51, 0.58) 0%, rgba(18, 10, 51, 0.82) 100%); }
}

.hero h1, .hero p, .hero .kicker { text-shadow: 0 1px 14px rgba(12, 7, 34, 0.55); }

.hero-in { position: relative; z-index: 2; padding-block: clamp(46px, 8vw, 104px); }
.hero-in .kicker { color: var(--gold-2); }
.hero h1 { color: #fff; max-width: 17ch; font-size: clamp(2.2rem, 5.6vw, 3.9rem); }
.hero p { max-width: 54ch; color: rgba(255, 255, 255, 0.88); font-size: clamp(1rem, 1.5vw, 1.12rem); margin-top: 16px; }
.hero-acts { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }

/* quick facts bar, riding the hero edge */
.facts {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  box-shadow: var(--shadow);
  margin-top: calc(clamp(22px, 3vw, 34px) * -1);
}

.facts div { background: var(--card); padding: 16px clamp(14px, 2vw, 22px); }
.facts b { display: block; font-family: 'Lora', Georgia, serif; font-size: clamp(1.4rem, 3.2vw, 2rem); font-weight: 600; line-height: 1.1; color: var(--link); }
.facts span { display: block; margin-top: 3px; font-size: 0.76rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }

@media (min-width: 820px) { .facts { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* quick links strip */
.quick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 26px; }

.quick a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--card);
  color: var(--ink);
  font-weight: 600;
  font-size: 0.93rem;
  text-decoration: none;
  transition: border-color var(--t) var(--ease), transform 130ms var(--ease);
}

.quick a::after { content: '\203A'; color: var(--gold); font-size: 1.2em; }

@media (hover: hover) and (pointer: fine) { .quick a:hover { border-color: var(--gold-2); } }
.quick a:active { transform: scale(0.99); }

@media (min-width: 900px) { .quick { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ==========================================================================
   PAGE HEADER  (inner pages)
   ========================================================================== */

.phead { background: var(--navy); color: #fff; padding-block: clamp(26px, 4vw, 52px); }
.phead h1 { color: #fff; max-width: 20ch; }
.phead .kicker { color: var(--gold-2); }
.phead .lede { margin: 14px 0 0; max-width: 62ch; color: rgba(255, 255, 255, 0.85); font-size: clamp(0.98rem, 1.4vw, 1.1rem); }

.crumb { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 14px; font-size: 0.82rem; color: rgba(255, 255, 255, 0.66); }
.crumb a { color: rgba(255, 255, 255, 0.86); text-decoration: none; }
.crumb a:hover { color: var(--gold-2); }
.crumb [aria-current='page'] { color: #fff; }

.pmeta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: clamp(18px, 3vw, 28px);
}

.pmeta div { padding: 11px 14px; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: var(--r-sm); }
.pmeta dt { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold-2); }
.pmeta dd { margin: 2px 0 0; font-weight: 600; font-size: 0.93rem; }

@media (min-width: 880px) { .pmeta { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ==========================================================================
   BANDS AND CARDS
   ========================================================================== */

.band { padding-block: clamp(34px, 5vw, 72px); }
.band-tint { background: var(--tint); }
.band-navy { background: var(--navy); color: #fff; }
.band-navy h2, .band-navy h3 { color: #fff; }
.band-navy p { color: rgba(255, 255, 255, 0.84); }
.band-navy .kicker { color: var(--gold-2); }
.band-navy .shead h2::after { background: var(--gold-2); }

.cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(10px, 1.6vw, 18px); }

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: clamp(15px, 2vw, 22px);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  color: inherit;
  text-decoration: none;
  box-shadow: var(--shadow);
  transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease), transform 130ms var(--ease);
}

.card h3 { margin: 0; }
.card p { margin: 0; font-size: 0.87rem; color: var(--ink-2); }
.card .tag { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold); }
.card .go { margin-top: auto; padding-top: 10px; font-size: 0.85rem; font-weight: 600; color: var(--link); }

@media (hover: hover) and (pointer: fine) {
  a.card:hover { border-color: var(--gold-2); box-shadow: var(--shadow-lg); }
}

a.card:active { transform: scale(0.99); }

.band-navy .card { background: rgba(255, 255, 255, 0.07); border-color: rgba(255, 255, 255, 0.16); box-shadow: none; }
.band-navy .card p { color: rgba(255, 255, 255, 0.78); }
.band-navy .card .tag, .band-navy .card .go { color: var(--gold-2); }

/* numbered list rows */
.rows { display: grid; gap: 10px; }

.row {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 12px;
  padding: 15px 16px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  color: inherit;
  text-decoration: none;
  transition: border-color var(--t) var(--ease), background var(--t) var(--ease);
}

.row .num {
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  border-radius: var(--r-pill);
  background: var(--gold-soft);
  color: var(--gold);
  font-weight: 700;
  font-size: 0.82rem;
}

.row h3 { margin: 0 0 2px; font-size: 1rem; }
.row p { margin: 0; font-size: 0.86rem; color: var(--ink-2); }
.row .chev { color: var(--gold); font-size: 1.2rem; justify-self: end; }

@media (hover: hover) and (pointer: fine) { .row:hover { border-color: var(--gold-2); background: var(--gold-soft); } }

@media (min-width: 1000px) { .rows-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* phones and small tablets: the rows become a two-column grid of rounded, square
   tiles: number and arrow on top, the title and its line beneath. A tile grows
   taller when its text needs the room, and an odd last tile takes the whole row. */
@media (max-width: 767px) {
  .rows, .rows-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }

  .row {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto 1fr;
    align-items: start;
    gap: 10px 8px;
    aspect-ratio: 1 / 1;
    padding: 14px;
    border-radius: var(--r);
  }

  .row .num { width: 32px; height: 32px; font-size: 0.74rem; }
  .row .chev { grid-column: 2; grid-row: 1; align-self: center; }
  .row > span:not(.num):not(.chev) { grid-column: 1 / -1; grid-row: 2; min-width: 0; }
  .row h3 { margin-bottom: 5px; font-size: 0.98rem; hyphens: auto; overflow-wrap: break-word; }
  .row p { font-size: 0.8rem; line-height: 1.45; hyphens: auto; overflow-wrap: break-word; }
  .rows > .row:last-child:nth-child(odd) { grid-column: 1 / -1; aspect-ratio: auto; }
}

@media (max-width: 360px) {
  .row { padding: 12px; }
  .row h3 { font-size: 0.92rem; }
}

/* notice list */
.notices { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }

.notice {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 15px 17px;
  background: var(--card);
  color: inherit;
  text-decoration: none;
  transition: background var(--t) var(--ease);
}

.notice .pill {
  padding: 5px 11px;
  border-radius: var(--r-pill);
  background: var(--gold-soft);
  color: var(--gold);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.notice h3 { margin: 0 0 2px; font-size: 1rem; }
.notice p { margin: 0; font-size: 0.85rem; color: var(--ink-2); }
.notice .chev { color: var(--gold); font-size: 1.2rem; }

@media (hover: hover) and (pointer: fine) { .notice:hover { background: var(--gold-soft); } }
@media (max-width: 560px) { .notice { grid-template-columns: minmax(0, 1fr) auto; } .notice .pill { grid-column: 1 / -1; justify-self: start; } }

/* two-column feature */
.split { display: grid; gap: clamp(20px, 3.4vw, 44px); align-items: center; }
.split img { width: 100%; height: auto; border-radius: var(--r); border: 1px solid var(--line); aspect-ratio: 4 / 3; object-fit: cover; }
@media (min-width: 900px) { .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

/* gallery: an even grid of 4:3 thumbnails, each a button that opens the full
   photograph in a native dialog. Theme chips filter a collection and "Show more"
   pages through it 24 photographs at a time. */
.gal { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(8px, 1.4vw, 14px); }
@media (min-width: 640px) { .gal { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .gal { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.gal-item { margin: 0; min-width: 0; }

.gal-open {
  display: block;
  width: 100%;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  background: var(--tint);
  cursor: zoom-in;
}

.gal-open img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; transition: transform 420ms var(--ease); }

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .gal-open:hover img { transform: scale(1.04); }
}

.gal-item figcaption { display: grid; gap: 1px; margin-top: 7px; font-size: 0.8rem; font-weight: 600; line-height: 1.35; color: var(--ink-2); }
.gal-item figcaption span { font-weight: 400; color: var(--ink-3); }

/* photographs inside a topic page's reading band */
.gal-block { margin-top: clamp(28px, 4vw, 44px); }

.gal-tools { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }

.gal-chip {
  padding: 8px 14px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-pill);
  background: var(--card);
  color: var(--ink-2);
  font: 600 0.84rem/1.2 'Figtree', sans-serif;
  cursor: pointer;
  transition: background var(--t) var(--ease), color var(--t) var(--ease), border-color var(--t) var(--ease), transform 130ms var(--ease);
}

.gal-chip[aria-pressed='true'] { background: var(--btn-bg); border-color: var(--btn-bg); color: var(--btn-ink); }
@media (hover: hover) and (pointer: fine) { .gal-chip:hover { border-color: var(--gold-2); color: var(--link); } .gal-chip[aria-pressed='true']:hover { color: var(--btn-ink); } }
.gal-chip:active { transform: scale(0.97); }

/* phones: the filters line up as a two-column grid, like the page tabs */
@media (max-width: 767px) {
  .gal-tools { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gal-chip { min-height: 44px; border-radius: var(--r-sm); }
  .gal-tools > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}

.gal-more-wrap { margin: 10px 0 0; text-align: center; }

/* the full-size view */
body.lb-open { overflow: hidden; }

.lightbox {
  width: 100vw; max-width: none;
  height: 100vh; height: 100dvh; max-height: none;
  margin: 0; padding: 0;
  border: 0;
  background: transparent;
  color: #fff;
  overflow: hidden;
}

.lightbox::backdrop { background: rgba(12, 8, 34, 0.94); }

/* the stage centres the photograph between the top controls and the caption;
   app.js sizes the image in pixels, so no percentage sizing is involved */
.lb-stage { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 60px 0 80px; }
.lb-img { display: block; max-width: none; border-radius: var(--r-sm); background: rgba(255, 255, 255, 0.04); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45); }

.lb-caption { position: absolute; left: 0; right: 0; bottom: 0; max-width: 70ch; margin: 0 auto; padding: 16px clamp(16px, 4vw, 28px) 20px; text-align: center; font-size: 0.9rem; color: rgba(255, 255, 255, 0.9); }

/* solid buttons in the site's blue with a white ring, so they stay visible over
   any photograph, bright or dark */
.lb-btn {
  position: absolute;
  display: grid;
  place-items: center;
  width: 48px; height: 48px;
  border: 2px solid rgba(255, 255, 255, 0.9);
  border-radius: var(--r-pill);
  background: var(--btn-bg);
  color: var(--btn-ink);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45);
  font: 600 1.7rem/1 'Figtree', sans-serif;
  cursor: pointer;
  transition: filter var(--t) var(--ease), transform 130ms var(--ease);
}

@media (hover: hover) and (pointer: fine) { .lb-btn:hover { filter: brightness(1.15); } }
.lb-btn:active { transform: scale(0.95); }
.lb-prev { left: clamp(8px, 2vw, 20px); top: calc(50% - 24px); }
.lb-next { right: clamp(8px, 2vw, 20px); top: calc(50% - 24px); }
.lb-close { right: clamp(8px, 2vw, 20px); top: 12px; }

/* phones: the arrows sit in the margins beside the compact photograph, level with
   its centre (the stage is padded 60px above and 80px below) */
@media (max-width: 639px) {
  .lb-btn { width: 44px; height: 44px; font-size: 1.5rem; }
  .lb-prev { left: 6px; top: calc(50% - 32px); }
  .lb-next { right: 6px; top: calc(50% - 32px); }
}

/* ==========================================================================
   ARTICLE BODY
   ========================================================================== */

.prose { max-width: 70ch; }
.prose h2 { margin-top: 1.4em; }
.prose h2:first-child { margin-top: 0; }
.prose p { color: var(--ink-2); }

.bullets { margin: 1em 0; padding: 0; list-style: none; display: grid; gap: 9px; }
.bullets li { position: relative; padding-left: 24px; color: var(--ink-2); }
.bullets li::before { content: ''; position: absolute; left: 4px; top: 0.66em; width: 8px; height: 8px; border-radius: 50%; background: var(--gold-2); }

/* the useful next step on a page, in place of the old notes */
.guide { margin: 1.5em 0 0; padding: clamp(16px, 2.4vw, 22px); border: 1px solid var(--line); border-radius: var(--r); background: var(--tint); }
.band-tint .guide { background: var(--card); }
.guide h3 { margin: 0 0 10px; }
.guide .bullets { margin: 0; }
.guide .links { margin: 14px 0 0; }

.intro { max-width: 62ch; margin: 0 0 clamp(18px, 2.6vw, 26px); color: var(--ink-2); font-size: 1.02rem; }

/* a compact help strip closes a reading page, instead of a tall side column
   that would leave an empty half-screen next to short copy */
.helpline {
  display: grid;
  gap: 14px;
  align-items: center;
  margin-top: clamp(22px, 3vw, 34px);
  padding: clamp(16px, 2.4vw, 22px);
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--card);
}

.helpline h3 { margin: 0 0 5px; }
.helpline p { margin: 0; font-size: 0.88rem; color: var(--ink-2); max-width: 60ch; }
.helpline .btn { justify-self: start; }

@media (min-width: 780px) {
  .helpline { grid-template-columns: minmax(0, 1fr) auto; gap: 24px; }
  .helpline .btn { justify-self: end; }
}

/* downloadable documents: a PDF badge, the title, a line on what it holds, its pages
   and size, and a Download pill. Every one downloads the file itself. */
.doc-block { margin-top: clamp(24px, 3.4vw, 38px); }
.doc-block:first-child { margin-top: 0; }
.docs { display: grid; gap: 12px; }
@media (min-width: 900px) { .docs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.doc {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  align-items: start;
  gap: 4px 14px;
  padding: 16px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  color: inherit;
  text-decoration: none;
  transition: border-color var(--t) var(--ease), background var(--t) var(--ease), transform 130ms var(--ease);
}

.doc[hidden], .doc-block[hidden] { display: none; }

.doc-icon {
  position: relative;
  grid-row: span 2;
  display: grid;
  place-items: end center;
  width: 46px;
  height: 56px;
  padding-bottom: 9px;
  border: 1px solid var(--line-2);
  border-radius: 4px;
  background: var(--gold-soft);
  color: var(--gold);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}

/* the folded corner of a page */
.doc-icon::before {
  content: '';
  position: absolute;
  top: -1px;
  right: -1px;
  width: 14px;
  height: 14px;
  border-bottom-left-radius: 4px;
  background: linear-gradient(225deg, var(--card) 50%, var(--line-2) 50%);
}

.doc-text { min-width: 0; display: grid; gap: 4px; }
.doc h3 { margin: 0; font-size: 1rem; line-height: 1.35; }
.doc-code { display: inline-block; margin-right: 8px; padding: 2px 8px; border-radius: var(--r-pill); background: var(--tint); color: var(--gold); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.04em; vertical-align: 2px; }
.doc-desc { margin: 0; font-size: 0.86rem; color: var(--ink-2); }
.doc-meta { margin: 0; font-size: 0.76rem; color: var(--ink-3); }

.doc-go {
  grid-column: 2;
  justify-self: start;
  margin-top: 8px;
  padding: 6px 14px;
  border-radius: var(--r-pill);
  background: var(--btn-bg);
  color: var(--btn-ink);
  font-size: 0.82rem;
  font-weight: 600;
}

@media (hover: hover) and (pointer: fine) { .doc:hover { border-color: var(--gold-2); background: var(--gold-soft); } }
.doc:active { transform: scale(0.99); }

/* horizontal step scroller */
.steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(10px, 1.6vw, 16px); }

@media (min-width: 900px) { .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.step { padding: 18px; border: 1px solid var(--line); border-radius: var(--r); background: var(--card); display: grid; align-content: start; gap: 7px; }
.step b { display: grid; place-items: center; width: 34px; height: 34px; border-radius: var(--r-pill); background: var(--btn-bg); color: var(--btn-ink); font-size: 0.85rem; }
.step h3 { margin: 0; }
.step p { margin: 0; font-size: 0.86rem; color: var(--ink-2); }

.band-navy .step { background: rgba(255, 255, 255, 0.07); border-color: rgba(255, 255, 255, 0.16); }
.band-navy .step p { color: rgba(255, 255, 255, 0.78); }
.band-navy .step b { background: var(--gold-2); color: #2c1d02; }

/* tabs */
.tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }

.tabs a, .tabs button {
  flex: 0 0 auto;
  max-width: 100%;
  padding: 9px 15px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-pill);
  background: var(--card);
  color: var(--ink-2);
  font: 600 0.86rem/1.2 'Figtree', sans-serif;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--t) var(--ease), color var(--t) var(--ease), border-color var(--t) var(--ease);
}

.tabs a[aria-current='page'], .tabs button[aria-selected='true'] { background: var(--btn-bg); border-color: var(--btn-bg); color: var(--btn-ink); }
@media (hover: hover) and (pointer: fine) { .tabs a:hover, .tabs button:hover { border-color: var(--gold-2); color: var(--link); } }
.tabs a[aria-current='page']:hover, .tabs button[aria-selected='true']:hover { color: var(--btn-ink); }

/* phones and small tablets: the tabs become a two-column grid of equal buttons.
   Each button fills its cell, a long name wraps inside it, and an odd last button
   takes the whole row so the grid never ends on a gap. This block has to stay
   below the base .tabs rules above: it overrides them at the same specificity. */
@media (max-width: 767px) {
  .tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }

  .tabs a, .tabs button {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 8px 10px;
    border-radius: var(--r-sm);
    text-align: center;
    line-height: 1.25;
    overflow-wrap: break-word;
  }

  .tabs > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0; }
.chips span { padding: 6px 13px; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--card); font-size: 0.8rem; font-weight: 600; color: var(--ink-2); }

/* ==========================================================================
   STAFF
   The principal leads on a navy band, with the responsibilities as tiles.
   Everyone else sits in person cards grouped by faculty; duties a whole group
   shares are listed once beneath it. No photographs are published, so each
   person carries a monogram in the crest's gold.
   ========================================================================== */

.monogram {
  display: grid;
  place-items: center;
  flex: none;
  width: 46px; height: 46px;
  border: 1px solid color-mix(in srgb, var(--gold-2) 50%, transparent);
  border-radius: var(--r-pill);
  background: var(--gold-soft);
  color: var(--gold);
  font: 600 1rem/1 'Lora', Georgia, serif;
  letter-spacing: 0.03em;
}

.monogram-sm { width: 36px; height: 36px; font-size: 0.8rem; }

/* a photograph, where the college has supplied one, in place of the monogram */
.avatar { display: block; flex: none; object-fit: cover; background: var(--tint); }
.avatar-card {
  width: 104px; height: 104px;
  border-radius: 14px;
  box-shadow: 0 0 0 3px var(--card), 0 0 0 4px color-mix(in srgb, var(--gold-2) 70%, transparent);
}
.avatar-sm { width: 36px; height: 36px; border-radius: var(--r-pill); }
/* the principal: a portrait, framed in gold on the navy band */
.avatar-lg {
  width: 150px; height: auto;
  aspect-ratio: 4 / 5;
  object-position: center top;
  border-radius: 16px;
  box-shadow: 0 0 0 3px var(--gold-2), 0 0 0 9px color-mix(in srgb, var(--gold-2) 18%, transparent), 0 18px 40px rgba(0, 0, 0, 0.35);
}
.avatar-sm { object-position: center 18%; }
@media (max-width: 479px) { .avatar-lg { width: 124px; } }
@media (max-width: 479px) { .avatar-card { width: 84px; height: 84px; } }

.monogram-lg {
  width: 96px; height: 96px;
  border: 0;
  background: var(--gold-2);
  color: var(--navy-3);
  font-size: 2.1rem;
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--gold-2) 20%, transparent);
}

.quals { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }

.quals li {
  padding: 3px 10px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-pill);
  background: var(--paper);
  color: var(--ink-2);
  font-size: 0.76rem;
  font-weight: 600;
  line-height: 1.5;
}

.band-navy .quals li { border-color: rgba(255, 255, 255, 0.26); background: rgba(255, 255, 255, 0.06); color: #fff; }

.since { margin: 0; font-size: 0.8rem; color: var(--ink-3); }
.band-navy .since { color: rgba(255, 255, 255, 0.7); }

/* --- principal spotlight ------------------------------------------------- */

.leader { display: grid; gap: clamp(26px, 4vw, 56px); }

@media (min-width: 980px) {
  .leader { grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr); align-items: start; }
}

.leader-id { display: grid; justify-items: start; align-content: start; gap: 12px; }
.leader-id .kicker { margin: 10px 0 -4px; }
.leader-id h2 { font-size: clamp(2rem, 4.2vw, 2.8rem); }
.band-navy .leader-id > p { margin: 0; max-width: 44ch; }

/* the principal's message, in his words: a quiet panel with a gold edge */
.leader-message {
  display: grid;
  gap: 12px;
  max-width: 56ch;
  margin: 4px 0;
  padding: 18px 20px 18px 22px;
  border-left: 3px solid var(--gold-2);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  background: rgba(255, 255, 255, 0.06);
  text-align: left;
}
.leader-message h3 { margin: 0; font: 700 0.76rem/1.3 'Figtree', sans-serif; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold-2); }
.leader-message blockquote { margin: 0; }
.band-navy .leader-message blockquote p { margin: 0; font-family: 'Lora', Georgia, serif; font-size: 1.04rem; line-height: 1.72; color: rgba(255, 255, 255, 0.93); }
.leader-message figcaption { display: grid; gap: 2px; font-size: 0.86rem; color: rgba(255, 255, 255, 0.72); }
.leader-message figcaption b { color: #fff; font-weight: 600; }

/* the same message inside a light staff card */
.person .leader-message { max-width: none; margin: 2px 0; background: var(--tint); }
.person .leader-message h3 { color: var(--gold); }
.person .leader-message blockquote p { margin: 0; font-family: 'Lora', Georgia, serif; font-size: 1rem; line-height: 1.7; color: var(--ink); }
.person .leader-message figcaption { color: var(--ink-2); }
.person .leader-message figcaption b { color: var(--ink); }

/* phones and tablets, where the spotlight stacks: the photograph and details sit centred */
@media (max-width: 979px) {
  .leader-id { justify-items: center; text-align: center; }
  .leader-id .quals { justify-content: center; }
  .leader-words { justify-self: center; width: 100%; max-width: 640px; }
  .leader-words .leader-message { max-width: none; }
}

/* desktop, with a message: details and message side by side, both the same height
   band, and the responsibilities across the full width below, four to a row */
@media (min-width: 980px) {
  .leader.has-message { align-items: center; }
  .leader.has-message .leader-message { max-width: none; }
  .leader.has-message .leader-duties { grid-column: 1 / -1; }
  .leader.has-message .duties { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.leader-duties h3 { margin: 0 0 14px; font-size: 1.1rem; }

.duties { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 640px) { .duties { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.duty {
  display: grid;
  align-content: start;
  gap: 5px;
  padding: 15px 16px 16px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 2px 0 var(--gold-2);
}

.duty b { font-family: 'Lora', Georgia, serif; font-size: 1rem; font-weight: 600; color: #fff; }
.duty span { font-size: 0.87rem; line-height: 1.55; color: rgba(255, 255, 255, 0.8); }

/* --- person cards, grouped by faculty ------------------------------------ */

.staff-group + .staff-group { margin-top: clamp(40px, 6vw, 72px); }

.people { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(10px, 1.6vw, 18px); }
@media (min-width: 640px) { .people { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.person { gap: 14px; }
.person-head { display: flex; align-items: center; gap: 13px; min-width: 0; }
.person-head > div { min-width: 0; }
.person .person-role { margin: 3px 0 0; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold); }

.person-duties h4 {
  margin: 0 0 8px;
  font: 700 0.72rem/1.2 'Figtree', sans-serif;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.person .bullets { margin: 0; gap: 6px; }
.person .bullets li { font-size: 0.88rem; }
.person .since { margin-top: auto; padding-top: 2px; font-size: 0.78rem; color: var(--ink-3); }

/* a group of one (management, the skill course) gets a single wide card */
.person.is-wide { grid-column: 1 / -1; }

@media (min-width: 880px) {
  .person.is-wide {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    grid-template-rows: auto auto 1fr;
    column-gap: clamp(24px, 3vw, 44px);
    row-gap: 12px;
  }
  .person.is-wide > * { grid-column: 1; }
  .person.is-wide > .person-duties { grid-column: 2; grid-row: 1 / span 3; }
  .person.is-wide > .since { align-self: end; }

  /* with a message: photograph, details and responsibilities on the left, the message
     on the right, so neither column is left with empty space */
  .person.is-wide.has-message { grid-template-rows: repeat(3, auto) 1fr; }
  .person.is-wide.has-message > .person-duties { grid-column: 1; grid-row: auto; }
  .person.is-wide.has-message > .leader-message { grid-column: 2; grid-row: 1 / span 4; align-self: center; }
}

.shared {
  margin-top: clamp(14px, 2vw, 20px);
  padding: clamp(16px, 2.4vw, 24px);
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--tint);
}

.staff-group > .shared:first-child { margin-top: 0; }
.shared h3 { margin: 0 0 12px; }
.shared .bullets { margin: 0; }
@media (min-width: 760px) { .shared .bullets { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; } }

/* --- compact roster (About Us, department pages) ------------------------- */

.roster { display: grid; gap: clamp(12px, 2vw, 20px); }
@media (min-width: 980px) { .roster { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; } }

.roster-col {
  display: grid;
  gap: 22px;
  padding: clamp(16px, 2.2vw, 24px);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow);
}

.roster-list h3 { margin: 0 0 12px; font-size: 1.05rem; }
.roster-list ul { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.roster-list li { display: flex; align-items: flex-start; gap: 12px; min-width: 0; }
.roster-list li > span:last-child { display: grid; min-width: 0; }
.roster-list b { font-size: 0.94rem; font-weight: 600; line-height: 1.35; color: var(--ink); }
.roster-list small { font-size: 0.8rem; line-height: 1.45; color: var(--ink-3); overflow-wrap: anywhere; }
.roster-list small:first-of-type { color: var(--gold); font-weight: 600; }

@media (min-width: 640px) and (max-width: 979px) { .roster-list ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.prose .roster-list { margin: 1em 0; }
@media (min-width: 640px) { .prose .roster-list ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ==========================================================================
   SEARCH, FILTER, FORMS
   ========================================================================== */

.tools { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }

.search {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 15px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  background: var(--card);
  color: var(--ink-3);
}

/* a labelled field wrapper used by the toolbars as well as the forms */
.field > .fieldlabel { font-size: 0.82rem; font-weight: 600; color: var(--ink); }
.fieldlabel { display: block; font-size: 0.82rem; font-weight: 600; color: var(--ink); }

.search input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--ink); font: 400 0.92rem/1 'Figtree', sans-serif; padding: 13px 0; }
.search input:focus { outline: none; }
.search:focus-within { border-color: var(--link); }
.search input::placeholder { color: var(--ink-3); }



.enquiry-form {
  display: grid;
  gap: 14px;
  padding: clamp(18px, 3vw, 30px);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow);
}

.enquiry-form h2 { margin: 0; }
.enquiry-form > p { margin: 0; font-size: 0.86rem; color: var(--ink-2); }

.form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.field { display: grid; gap: 6px; }
.field label { font-size: 0.82rem; font-weight: 600; }

.field input, .field textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  background: var(--card);
  color: var(--ink);
  font: 400 0.92rem/1.45 'Figtree', sans-serif;
  transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}

.field textarea { resize: vertical; min-height: 118px; }

.field input:focus, .field textarea:focus {
  outline: none;
  border-color: var(--link);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--link) 26%, transparent);
}

/* ---------- dropdown card -------------------------------------------------
   The trigger is a button the width of the field; the panel opens directly
   beneath it at the same width. The real <select> is kept for the form value
   but never shown, so the browser's own popup never appears. */

.select { position: relative; }

/* An open dropdown must paint over whatever follows it on the page (programme cards,
   later form fields, the next band). The open control and every container that holds
   it are lifted above their later siblings. */
.select.is-open { z-index: 80; }

.tools:has(.select.is-open),
.field:has(.select.is-open),
.form-row:has(.select.is-open),
.enquiry-form:has(.select.is-open),
.pair:has(.select.is-open) { position: relative; z-index: 80; }

/* the course finder sits directly above its results, so it always outranks them */
.tools { position: relative; z-index: 3; }
.select-native { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

.select-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  background: var(--card);
  color: var(--ink);
  font: 600 0.92rem/1.45 'Figtree', sans-serif;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}

.select-value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.select-value[data-placeholder] { color: var(--ink-3); font-weight: 400; }

.select-chev {
  flex: none;
  width: 8px; height: 8px;
  border-right: 2px solid var(--link);
  border-bottom: 2px solid var(--link);
  transform: translateY(-2px) rotate(45deg);
  transition: transform var(--t) var(--ease);
}

@media (hover: hover) and (pointer: fine) { .select-btn:hover { border-color: var(--link); } }

.select.is-open .select-btn {
  border-color: var(--link);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--link) 22%, transparent);
}

.select.is-open .select-chev { transform: translateY(2px) rotate(-135deg); }
.select.is-invalid .select-btn { border-color: #b3261e; box-shadow: 0 0 0 3px rgba(179, 38, 30, 0.18); }

.select-list {
  position: absolute;
  z-index: 60;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  width: 100%;
  max-height: 292px;
  overflow-y: auto;
  overscroll-behavior: contain;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow-lg);
}

.select.is-up .select-list { top: auto; bottom: calc(100% + 6px); }
.select-list[hidden] { display: none; }

.select-list li {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  color: var(--ink-2);
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
}

.select-list li::before {
  content: '';
  flex: none;
  width: 14px; height: 8px;
  border-left: 2px solid var(--link);
  border-bottom: 2px solid var(--link);
  transform: translateY(-2px) rotate(-45deg) scale(0.78);
  opacity: 0;
}

.select-list li[aria-selected='true'] { color: var(--ink); font-weight: 600; }
.select-list li[aria-selected='true']::before { opacity: 1; }
.select-list li.is-active { background: var(--gold-soft); color: var(--link); }

@media (hover: hover) and (pointer: fine) { .select-list li:hover { background: var(--gold-soft); color: var(--link); } }




.check-label { display: flex; align-items: flex-start; gap: 10px; font-size: 0.85rem; color: var(--ink-2); }
.check-label input { margin-top: 4px; width: 17px; height: 17px; flex: none; accent-color: var(--link); }

.form-status { font-size: 0.88rem; color: var(--ink-2); }

/* a field only spam robots fill in; FormSubmit discards any form that has it */
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.select-list:focus { outline: none; }

/* the page a sent form lands on */
.thanks {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(16px, 3vw, 28px);
  align-items: start;
  max-width: 760px;
  padding: clamp(20px, 3vw, 32px);
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--card);
  box-shadow: var(--shadow);
}
.thanks h2 { margin: 0 0 8px; }
.thanks p { margin: 0; color: var(--ink-2); }
.thanks-mark {
  position: relative;
  width: 52px; height: 52px;
  border-radius: var(--r-pill);
  background: var(--gold-soft);
  border: 1px solid color-mix(in srgb, var(--gold-2) 60%, transparent);
}
/* a tick, drawn with two borders */
.thanks-mark::after {
  content: '';
  position: absolute;
  left: 18px; top: 13px;
  width: 12px; height: 21px;
  border: solid var(--gold);
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
}

.save-receipt { padding: 14px 16px; border-left: 4px solid var(--gold-2); border-radius: 0 var(--r-sm) var(--r-sm) 0; background: var(--gold-soft); }
.save-receipt h3 { margin: 0 0 4px; font-size: 1rem; }
.save-receipt p { margin: 0 0 8px; font-size: 0.86rem; }

.form-side { display: grid; gap: 14px; align-content: start; }
.form-side ol { margin: 0; padding-left: 1.15em; display: grid; gap: 10px; }
.form-side li strong { display: block; font-family: 'Lora', Georgia, serif; }
.form-side li span { font-size: 0.86rem; color: var(--ink-2); }

.pair { display: grid; gap: clamp(20px, 3vw, 36px); align-items: start; }
@media (min-width: 980px) { .pair { grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr); } }

/* on a phone the enquiry form is the reason people open this page, so it leads */
@media (max-width: 979px) {
  .pair-form-first > .pair-detail { order: 2; }
  .pair-form-first > .enquiry-form { order: 1; }
}

/* contact */
.contact-list { display: grid; gap: 10px; margin: 0; }
.contact-list > div { padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r); background: var(--card); }
.contact-list dt { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold); margin-bottom: 4px; }
.contact-list dd { margin: 0; font-size: 0.93rem; }

.mapbox { margin-top: 16px; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: var(--card); }
.mapbox-head { padding: 16px; display: grid; gap: 6px; }
.mapbox-head h3 { margin: 0; }
.mapbox-head p { margin: 0; font-size: 0.86rem; color: var(--ink-2); }
.mapbox iframe { width: 100%; min-height: 320px; border: 0; display: block; border-top: 1px solid var(--line); }

/* sitemap */
.sitemap-sections { display: grid; gap: 14px; }
.sitemap-group { padding: clamp(15px, 2vw, 22px); border: 1px solid var(--line); border-radius: var(--r); background: var(--card); }
.sitemap-group h2 { font-size: 1.1rem; margin: 0 0 12px; }
.sitemap-group h2 a { color: var(--ink); text-decoration: none; display: inline-flex; gap: 9px; align-items: baseline; }
.sitemap-group h2 a span { font-size: 0.74rem; font-weight: 700; color: var(--gold); }
.sitemap-group nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px 14px; }
.sitemap-group nav a { font-size: 0.86rem; color: var(--ink-2); text-decoration: none; padding: 5px 0; }
.sitemap-group nav a small { display: block; font-size: 0.74rem; color: var(--ink-3); }
@media (hover: hover) and (pointer: fine) { .sitemap-group nav a:hover { color: var(--link); } }
@media (min-width: 900px) { .sitemap-sections { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.empty { grid-column: 1 / -1; padding: 22px; border: 1px dashed var(--line-2); border-radius: var(--r); text-align: center; color: var(--ink-2); background: var(--card); }

/* ==========================================================================
   FOOTER
   ========================================================================== */

.footer { background: var(--navy-3); color: rgba(255, 255, 255, 0.76); padding-block: clamp(34px, 5vw, 60px) 18px; margin-top: clamp(30px, 5vw, 64px); }

.footgrid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(22px, 3vw, 38px); }
.footid { display: grid; justify-items: center; gap: 12px; }
.footid img { width: 58px; height: 58px; border-radius: var(--r-pill); background: #fff; padding: 2px; }
.footid p { margin: 0; font-size: 0.87rem; line-height: 1.6; }
.footid b { display: block; margin-bottom: 5px; font-family: 'Lora', Georgia, serif; font-size: 1.05rem; color: #fff; }

/* phones: every block stacks and centres, one under the next */
@media (max-width: 899px) {
  .footgrid { text-align: center; }
  .footer nav { justify-items: center; padding-bottom: 18px; border-bottom: 1px solid rgba(255, 255, 255, 0.12); }
  .footer nav:last-child { border-bottom: 0; padding-bottom: 0; }
  .footbase { flex-direction: column; text-align: center; gap: 14px; }
}

.footer h2 { font-size: 0.74rem; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; color: var(--gold-2); margin: 0 0 11px; font-family: 'Figtree', sans-serif; }
.footer nav { display: grid; gap: 7px; align-content: start; }
.footer nav a { color: rgba(255, 255, 255, 0.76); text-decoration: none; font-size: 0.87rem; }
@media (hover: hover) and (pointer: fine) { .footer nav a:hover { color: var(--gold-2); } }

.footbase {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: clamp(24px, 4vw, 40px);
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.6);
}

.totop {
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: var(--r-pill);
  background: transparent;
  color: #fff;
  padding: 8px 16px;
  font: 600 0.8rem/1 'Figtree', sans-serif;
  cursor: pointer;
}

@media (hover: hover) and (pointer: fine) { .totop:hover { background: rgba(255, 255, 255, 0.1); } }

@media (min-width: 900px) {
  .footgrid { grid-template-columns: minmax(0, 1.45fr) repeat(4, minmax(0, 1fr)); text-align: left; }
  .footid { justify-items: start; }
}

/* ==========================================================================
   MOTION, NARROW SCREENS, PRINT
   ========================================================================== */

[data-reveal] { opacity: 1; }
@media (prefers-reduced-motion: no-preference) { body[data-motion='on'] [data-reveal] { opacity: 0; } }

@media (max-width: 420px) {
  :root { --gut: 14px; }
  .card { padding: 13px; }
  .form-row, .tools, .quick { grid-template-columns: minmax(0, 1fr); }

  .sitemap-group nav { grid-template-columns: minmax(0, 1fr); }
  .mark b { font-size: 0.94rem; }
  .mark img { width: 44px; height: 44px; }
}

@media print {
  .topline, .masthead, .navpanel, .totop { display: none !important; }
  body { background: #fff; color: #000; }
}