/* Lincoln College — memorial / former-student resource site */

:root {
  --purple:        #5f2581;
  --purple-deep:   #431a5c;
  --purple-dark:   #2e1140;
  --purple-tint:   #f4eef8;
  --gold:          #b8912f;
  --ink:           #241a2b;
  --body:          #4a4353;
  --muted:         #6d6579;
  --rule:          #e2dce8;
  --paper:         #ffffff;
  --paper-warm:    #faf8fb;
  --shadow:        0 1px 2px rgba(36,26,43,.05), 0 8px 24px -12px rgba(36,26,43,.18);
  --shadow-lift:   0 2px 4px rgba(36,26,43,.06), 0 18px 40px -16px rgba(36,26,43,.28);
  --serif:  "Source Serif 4", Georgia, "Times New Roman", serif;
  --sans:   system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --wrap:   1180px;
  /* Fixed rather than ch-based: `ch` resolves against each element's own font,
     so a large serif h1 and a small sans eyebrow would compute wildly different
     widths and fail to share a left edge when centred. */
  --read:   42rem;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--body);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--serif);
  color: var(--ink);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -.011em;
  margin: 0 0 .5em;
  text-wrap: balance;
}
h1 { font-size: clamp(2rem, 1.4rem + 2.6vw, 3.05rem); }
h2 { font-size: clamp(1.5rem, 1.2rem + 1.3vw, 2.05rem); }
h3 { font-size: 1.235rem; }

p  { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

a { color: var(--purple); text-underline-offset: .18em; text-decoration-thickness: from-font; }
a:hover { color: var(--purple-deep); }

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

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

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: clamp(1.15rem, 4vw, 2.5rem); }

/* Reading columns are capped for legibility (long lines are hard to scan) but
   centred inside the wrap, so wide screens stay balanced instead of leaving all
   the slack on one side. Grids below opt out and use the full wrap width. */
.prose { max-width: var(--read); margin-inline: auto; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--purple); color: #fff; padding: .75rem 1.25rem;
  border-radius: 0 0 6px 0; font-weight: 600; text-decoration: none;
}
.skip:focus { left: 0; color: #fff; }

/* ---------- Masthead ---------- */

.masthead {
  background: var(--purple-dark);
  background-image: linear-gradient(103deg, var(--purple-dark) 0%, var(--purple-deep) 58%, var(--purple) 100%);
  color: #fff;
  border-bottom: 3px solid var(--gold);
}
.masthead .wrap {
  display: flex; align-items: center; gap: clamp(.85rem, 2vw, 1.25rem);
  flex-wrap: wrap; padding-block: 1.1rem;
}
.brand {
  display: flex; align-items: center; gap: .9rem;
  color: #fff; text-decoration: none; margin-right: auto;
}
.brand img { width: 54px; height: 54px; flex: none; filter: drop-shadow(0 2px 5px rgba(0,0,0,.3)); }
.brand-text { display: flex; flex-direction: column; gap: .12em; }
.brand-name {
  font-family: var(--serif); font-size: clamp(1.24rem, 1.05rem + .7vw, 1.6rem);
  font-weight: 600; line-height: 1.05; letter-spacing: .004em;
}
.brand-years {
  font-size: .72rem; letter-spacing: .17em; text-transform: uppercase;
  color: #d9c6e8; font-weight: 500;
}

.nav { display: flex; flex-wrap: wrap; gap: .2rem; }
.nav a {
  color: #e7dbf1; text-decoration: none; font-size: .925rem; font-weight: 500;
  padding: .5rem .8rem; border-radius: 6px; white-space: nowrap;
  transition: background-color .15s ease, color .15s ease;
}
.nav a:hover { background: rgba(255,255,255,.11); color: #fff; }
.nav a[aria-current="page"] { background: rgba(255,255,255,.16); color: #fff; }
@media (max-width: 640px) {
  .brand { margin-right: 0; width: 100%; }
  .nav { width: 100%; margin-inline: -.8rem; }
}

/* ---------- Hero (home) ---------- */

.hero { position: relative; background: var(--purple-dark); }
.hero-img {
  width: 100%; display: block;
  aspect-ratio: 1800 / 442;
  /* Kept short so the closure headline clears the fold on a laptop. With
     object-position bottom, the height that is trimmed comes off the canopy
     and the cupola stays in frame. */
  max-height: 300px;
  object-fit: cover; object-position: center bottom;
}
/* Softens the join into the caption band so the photograph reads as a quiet
   header rather than a promotional hero above a closure notice. */
.hero::after {
  content: ""; position: absolute; inset-inline: 0; bottom: 0;
  height: 13%; pointer-events: none;
  background: linear-gradient(to bottom, rgba(244, 238, 248, 0) 0%,
                                          rgba(244, 238, 248, .18) 65%,
                                          rgba(244, 238, 248, .72) 100%);
}
.hero-caption {
  background: var(--purple-tint);
  border-bottom: 1px solid var(--rule);
  padding-block: clamp(2rem, 5vw, 3.25rem);
}
.eyebrow {
  font-size: .75rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--purple); margin: 0 0 .85rem;
}
/* Matches .page-head: centre the caption on the reading measure so the home
   page and the interior pages share one left edge. */
.hero-caption .wrap > * { max-width: var(--read); margin-inline: auto; }
.hero-caption h1 { margin-bottom: .45rem; }
.hero-caption .lede {
  font-family: var(--serif); font-size: clamp(1.1rem, 1rem + .5vw, 1.34rem);
  color: var(--body); line-height: 1.5;
}

/* ---------- Notice band ---------- */

.notice {
  border-left: 4px solid var(--gold);
  background: #fdfaf2;
  padding: 1.15rem 1.4rem;
  border-radius: 0 8px 8px 0;
  margin: 0 0 1.6rem;
  font-size: 1rem;
}
.notice strong { color: var(--ink); }

/* ---------- Sections ---------- */

section { padding-block: clamp(2.5rem, 6vw, 4.25rem); }
section.alt { background: var(--paper-warm); border-block: 1px solid var(--rule); }

/* Matches the .prose intros used on the interior pages: a narrow centred intro
   above a wider centred grid, both sharing one centre axis. */
.section-head { margin-bottom: 2rem; max-width: var(--read); margin-inline: auto; }
.section-head p { color: var(--muted); margin-bottom: 0; }

/* ---------- Link cards ---------- */

.cards {
  display: grid; gap: 1.15rem;
  grid-template-columns: repeat(auto-fit, minmax(275px, 1fr));
  list-style: none; margin: 0; padding: 0;
}
/* four-card sections read better as a balanced 2x2 than 3 + 1 orphan */
@media (min-width: 780px) {
  .cards.two { grid-template-columns: repeat(2, 1fr); }
}
/* Cards are scanned, not read, so they take the full wrap width and go 3-up
   once there is room. The 2x2 sets stay 2x2 — they are deliberately paired. */
@media (min-width: 1040px) {
  .cards:not(.two) { grid-template-columns: repeat(3, 1fr); }
}

.cards > li { display: flex; }

.card {
  flex: 1;
  display: flex; flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 12px;
  padding: 1.5rem 1.45rem 1.35rem;
  text-decoration: none;
  box-shadow: var(--shadow);
  transition: transform .17s ease, box-shadow .17s ease, border-color .17s ease;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); border-color: #cdbfda; }
.card-icon {
  width: 42px; height: 42px; border-radius: 9px; flex: none;
  display: grid; place-items: center; margin-bottom: 1rem;
  background: var(--purple-tint); color: var(--purple);
}
.card-icon svg { width: 22px; height: 22px; }
.card h3 { margin-bottom: .38rem; color: var(--ink); }
.card p { color: var(--body); font-size: .955rem; margin-bottom: 1.15rem; }
.card-go {
  margin-top: auto; font-size: .875rem; font-weight: 600; color: var(--purple);
  display: inline-flex; align-items: center; gap: .4rem;
}
.card-go svg { width: 14px; height: 14px; transition: transform .17s ease; }
.card:hover .card-go svg { transform: translateX(2px); }

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex; align-items: center; gap: .55rem;
  background: var(--purple); color: #fff;
  font-family: var(--sans); font-size: 1rem; font-weight: 600;
  padding: .8rem 1.5rem; border-radius: 8px; text-decoration: none;
  box-shadow: var(--shadow);
  transition: background-color .15s ease, transform .15s ease;
}
.btn:hover { background: var(--purple-deep); color: #fff; transform: translateY(-1px); }
.btn svg { width: 16px; height: 16px; flex: none; }
.btn-row { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.6rem; }
.btn.secondary {
  background: transparent; color: var(--purple);
  border: 1.5px solid #cdbfda; box-shadow: none;
}
.btn.secondary:hover { background: var(--purple-tint); color: var(--purple-deep); }

/* ---------- Statement / long text ---------- */

.statement { max-width: var(--read); margin-inline: auto; }
.statement p:first-of-type { font-size: 1.145rem; color: var(--ink); }
blockquote {
  margin: 1.9rem 0; padding: .3rem 0 .3rem 1.5rem;
  border-left: 3px solid var(--purple);
  font-family: var(--serif); font-size: 1.19rem; line-height: 1.5;
  color: var(--ink); font-style: italic;
}
blockquote cite {
  display: block; margin-top: .7rem;
  font-family: var(--sans); font-size: .855rem; font-style: normal;
  color: var(--muted); letter-spacing: .01em;
}

hr.rule { border: 0; border-top: 1px solid var(--rule); margin: 2.75rem 0; }

/* ---------- Definition-style info list ---------- */

.info-list { margin: 0; padding: 0; list-style: none; }
.info-list > li { padding: 1.4rem 0; border-top: 1px solid var(--rule); }
.info-list > li:last-child { border-bottom: 1px solid var(--rule); }
.info-list h3 { margin-bottom: .4rem; }
.info-list p { font-size: .98rem; }

/* ---------- Contact ---------- */

.contact-grid {
  display: grid; gap: 1.5rem 2.5rem;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.contact-grid h3 {
  font-family: var(--sans); font-size: .755rem; font-weight: 700;
  letter-spacing: .15em; text-transform: uppercase; color: var(--muted); margin-bottom: .55rem;
}
.contact-grid address { font-style: normal; line-height: 1.6; }

/* ---------- Footer ---------- */

.site-footer {
  background: var(--purple-dark);
  color: #cbb9da;
  padding-block: clamp(2.5rem, 5vw, 3.5rem) 1.9rem;
  border-top: 3px solid var(--gold);
  font-size: .93rem;
}
.site-footer a { color: #efe6f6; }
.site-footer a:hover { color: #fff; }
.footer-grid {
  display: grid; gap: 2rem 2.5rem;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  padding-bottom: 2rem;
}
.footer-grid h3 {
  font-family: var(--sans); font-size: .74rem; font-weight: 700;
  letter-spacing: .15em; text-transform: uppercase; color: #fff; margin-bottom: .8rem;
}
.footer-grid ul { list-style: none; margin: 0; padding: 0; }
.footer-grid li { margin-bottom: .5rem; }
.footer-grid address { font-style: normal; line-height: 1.65; }
.footer-seal { display: flex; align-items: flex-start; gap: 1rem; }
.footer-seal img { width: 62px; height: 62px; flex: none; }
.footer-seal p { font-size: .875rem; color: #b7a3c8; margin: 0; }
.footer-seal .fs-name { font-family: var(--serif); font-size: 1.12rem; color: #fff; margin-bottom: .2rem; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.14);
  padding-top: 1.5rem;
  display: flex; flex-wrap: wrap; gap: .6rem 1.5rem; justify-content: space-between;
  font-size: .84rem; color: #a894b9;
}

/* ---------- Page header (interior pages) ---------- */

.page-head {
  background: var(--purple-tint);
  border-bottom: 1px solid var(--rule);
  padding-block: clamp(2.25rem, 5vw, 3.5rem);
}
/* The wrap's children share the reading measure and centre, so the breadcrumb,
   h1 and lede line up with the body copy below rather than starting at the
   wrap's left edge. Targets .wrap > * — not .page-head > * — because .page-head
   contains the .wrap, which must keep its own full width and padding. */
.page-head .wrap > * { max-width: var(--read); margin-inline: auto; }
.page-head h1 { margin-bottom: .4rem; }
.page-head p { color: var(--muted); margin-bottom: 0; }
.crumb { font-size: .85rem; color: var(--muted); margin: 0 0 .9rem; }
.crumb a { color: var(--purple); }

/* ---------- Utilities ---------- */

.ext-icon {
  width: .72em; height: .72em; display: inline-block;
  vertical-align: -.02em; margin-left: .3em; opacity: .6;
}
.text-center { text-align: center; }

/* ---------- Contact form ---------- */

.form { margin-top: 1.6rem; }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.field { margin-bottom: 1.15rem; }
.field-row {
  display: grid; gap: 0 1.15rem;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}

.field label {
  display: block; margin-bottom: .38rem;
  font-size: .88rem; font-weight: 600; color: var(--ink);
}
.field .req { color: var(--purple); margin-left: .1em; }
.field .opt {
  font-weight: 400; color: var(--muted); font-size: .82rem;
  text-transform: none; letter-spacing: 0;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  font: inherit; font-size: 1rem;
  color: var(--ink); background: var(--paper);
  border: 1.5px solid #d3c8de; border-radius: 8px;
  padding: .66rem .8rem;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.field textarea { resize: vertical; min-height: 8rem; line-height: 1.55; }
.field select { appearance: none; padding-right: 2.4rem; cursor: pointer;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="%236d6579" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>');
  background-repeat: no-repeat; background-position: right .8rem center;
}

.field input:hover,
.field select:hover,
.field textarea:hover { border-color: #b9a7c9; }

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--purple);
  box-shadow: 0 0 0 3px rgba(95,37,129,.15);
}

.hint { font-size: .875rem; color: var(--muted); margin: .45rem 0 0; }
.hint.privacy {
  margin-top: 1.4rem; padding: .85rem 1rem;
  background: var(--purple-tint); border-radius: 8px; color: var(--body);
}

button.btn { border: 0; cursor: pointer; font-family: var(--sans); }