/* Xi Xi Lambda Foundation, Inc. — v3 "scholarship report"
   Layout idea: a light, photo-led page that reads like a well-made annual report.
   White and warm stone grounds, bookish serif headings, gold only as rules, numerals and marks.
   The seal is the one black object on the page. Deliberately unlike the chapter site
   (dark ink ground, Bodoni, uppercase tracked navigation). */
:root {
  color-scheme: light;
  --ground: #ffffff;
  --stone: #f3f1eb;        /* alternate section ground */
  --line: #e2ddd0;
  --ink: #1f1d19;          /* text */
  --muted: #5f5a4f;
  --gold: #8c7535;         /* gold dark enough for text on white */
  --gold-soft: #c9b57c;    /* rules and marks */
  --night: #181712;        /* footer only */
  --open: #2d6a3e;
  --display: "Literata", "Iowan Old Style", Georgia, serif;
  --body: "Hanken Grotesk", "Segoe UI", Arial, sans-serif;
  --wrap: 1120px;
  --radius: 10px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--ground); color: var(--ink); font-family: var(--body); font-size: 17px; line-height: 1.65; }
img { max-width: 100%; height: auto; display: block; }
[hidden] { display: none !important; }
a { color: var(--gold); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--ink); }
a:focus-visible, button:focus-visible { outline: 3px solid var(--gold-soft); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3 { font-family: var(--display); line-height: 1.15; text-wrap: balance; margin: 0; font-weight: 600; letter-spacing: -0.01em; }
h1 { font-size: clamp(2.1rem, 4.6vw, 3.4rem); }
h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); }
h3 { font-size: 1.25rem; }
h1 em, h2 em { font-style: italic; font-weight: 500; color: var(--gold); }
p { margin: 0; max-width: 65ch; }
.wrap { width: min(var(--wrap), 100% - 40px); margin-inline: auto; }
.stack { display: flex; flex-direction: column; gap: 16px; }
.stack-lg { display: flex; flex-direction: column; gap: 36px; }

/* preview notice */
.ribbon { background: var(--stone); color: var(--muted); font-size: 0.8rem; text-align: center; padding: 6px 16px; border-bottom: 1px solid var(--line); }

/* header: white, mixed-case navigation */
.site-head { background: rgba(255, 255, 255, 0.96); position: sticky; top: 0; z-index: 10; border-bottom: 1px solid var(--line); backdrop-filter: blur(6px); }
.site-head .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 10px; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 12px; color: var(--ink); text-decoration: none; }
.brand img { width: 50px; height: 50px; }
.brand span { font-family: var(--display); font-size: 1.12rem; font-weight: 600; line-height: 1.15; }
.brand small { display: block; font-family: var(--body); font-size: 0.8rem; font-weight: 500; color: var(--muted); }
nav.main { display: flex; flex-wrap: wrap; gap: 2px 4px; }
nav.main a { color: var(--ink); text-decoration: none; font-size: 0.97rem; font-weight: 500; padding: 8px 12px; border-radius: 999px; }
nav.main a:hover { background: var(--stone); color: var(--ink); }
nav.main a[aria-current="page"] { background: var(--ink); color: #fff; }

.view { display: none; }
.view.is-active { display: block; }

/* home hero: full-width photo banner, words below on white */
.hero { background: var(--ground); }
.hero-banner { position: relative; }
.hero-banner img { width: 100%; height: clamp(240px, 34vw, 470px); object-fit: cover; object-position: center 40%; }
.hero-banner figcaption { position: absolute; right: 16px; bottom: 12px; background: rgba(24, 23, 18, 0.72); color: #f1eee6; font-size: 0.78rem; padding: 4px 10px; border-radius: 999px; }
.hero-body { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 32px; padding-block: 0 64px; }
.hero-body .seal { width: 150px; margin-top: -75px; position: relative; border-radius: 50%; box-shadow: 0 0 0 6px var(--ground); background: #000; }
.hero-body .stack { padding-top: 34px; }
.hero .lede { font-size: 1.2rem; color: var(--muted); max-width: 54ch; }
.eyebrow { font-size: 0.86rem; font-weight: 600; color: var(--gold); display: flex; align-items: center; gap: 10px; }
.eyebrow::before { content: ""; width: 28px; height: 2px; background: var(--gold-soft); }
.page-head .eyebrow a { color: var(--gold); }

.actions { display: flex; flex-wrap: wrap; gap: 12px; }
.btn { display: inline-block; font-family: var(--body); font-weight: 600; font-size: 0.98rem; padding: 12px 22px; border-radius: 999px; text-decoration: none; border: 1.5px solid var(--ink); cursor: pointer; }
.btn-solid { background: var(--ink); color: #fff; }
.btn-solid:hover { background: var(--gold); border-color: var(--gold); color: #fff; }
.btn-line { background: transparent; color: var(--ink); }
.btn-line:hover { background: var(--stone); color: var(--ink); }

/* inner page heads: light, with a gold rule */
.page-head { background: var(--stone); border-bottom: 1px solid var(--line); }
.page-head .wrap { padding-block: 52px 44px; display: flex; flex-direction: column; gap: 12px; }
.page-head p { color: var(--muted); font-size: 1.12rem; }

section.block { padding-block: 64px; }
.band, .tint { background: var(--stone); }

/* figures strip */
.stats { border-bottom: 1px solid var(--line); border-top: 1px solid var(--line); }
.stats .wrap { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stat { padding: 28px 20px 26px 0; display: flex; flex-direction: column; gap: 4px; }
.stat + .stat { padding-left: 24px; border-left: 1px solid var(--line); }
.stat b { font-family: var(--display); font-size: clamp(2rem, 3.6vw, 2.8rem); font-weight: 600; line-height: 1; color: var(--gold); font-variant-numeric: lining-nums tabular-nums; }
.stat span { font-size: 0.92rem; color: var(--muted); }

/* the seal's three symbols */
.pillars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.pillar { background: var(--ground); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; display: flex; flex-direction: column; gap: 8px; }
.pillar .mark { font-size: 0.85rem; font-weight: 600; color: var(--gold); }
.pillar p { color: var(--muted); font-size: 0.98rem; }

/* cards */
.programs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.programs.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.program { background: var(--ground); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; }
.program > img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; object-position: center 25%; }
.program .body { padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.program .kind { font-size: 0.84rem; font-weight: 600; color: var(--gold); }
.program p { color: var(--muted); font-size: 0.98rem; }
.program a.more { margin-top: auto; padding-top: 8px; font-weight: 600; font-size: 0.95rem; color: var(--ink); }
.program a.more::after { content: " \2192"; color: var(--gold); }

/* key dates as a timeline */
.dates { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.dates li { display: grid; grid-template-columns: 150px 22px minmax(0, 1fr); gap: 0 18px; align-items: start; }
.dates li::before { content: ""; grid-column: 2; grid-row: 1; justify-self: center; width: 12px; height: 12px; margin-top: 8px; border-radius: 50%; background: var(--ground); border: 2.5px solid var(--gold); position: relative; z-index: 1; }
.dates li { position: relative; padding-bottom: 26px; }
.dates li:not(:last-child)::after { content: ""; position: absolute; left: calc(150px + 18px + 10px); top: 16px; bottom: -8px; width: 2px; background: var(--gold-soft); }
.dates .when { grid-column: 1; grid-row: 1; font-family: var(--display); font-size: 1.08rem; font-weight: 600; text-align: right; font-variant-numeric: lining-nums tabular-nums; }
.dates .what { grid-column: 3; grid-row: 1; }
.dates .what strong { display: block; font-weight: 600; }
.dates .what span { color: var(--muted); font-size: 0.95rem; }

/* two columns */
.split { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 48px; align-items: start; }
.panel { background: var(--ground); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; display: flex; flex-direction: column; gap: 14px; }
.panel h3 { font-size: 1.15rem; }
.facts { margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px 18px; font-size: 0.97rem; }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; font-weight: 600; }
ul.checks { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; max-width: 62ch; }
ul.checks li { padding-left: 30px; position: relative; }
ul.checks li::before { content: ""; position: absolute; left: 2px; top: 0.4em; width: 16px; height: 16px; border-radius: 50%; background: var(--stone); border: 1.5px solid var(--gold); }
ul.checks li::after { content: ""; position: absolute; left: 8px; top: calc(0.4em + 4px); width: 4px; height: 7px; border: solid var(--gold); border-width: 0 2px 2px 0; transform: rotate(45deg); }

.status { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; font-weight: 600; font-size: 0.9rem; padding: 6px 14px; border-radius: 999px; background: var(--stone); }
.status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.status.upcoming { color: var(--gold); }
.status.open { color: var(--open); }
.status.closed { color: var(--muted); }

/* scholarship feature */
.feature { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0; border-radius: 14px; overflow: hidden; background: var(--ground); border: 1px solid var(--line); }
.feature > img { width: 100%; height: 100%; min-height: 320px; object-fit: cover; object-position: center 20%; }
.feature .copy { padding: 40px; display: flex; flex-direction: column; gap: 18px; }

.ways { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.way { border-top: 3px solid var(--gold-soft); padding-top: 18px; display: flex; flex-direction: column; gap: 8px; }
.way .num { font-size: 0.85rem; font-weight: 600; color: var(--gold); }
.way p { color: var(--muted); font-size: 0.98rem; }
.way a { margin-top: auto; padding-top: 6px; font-weight: 600; font-size: 0.95rem; color: var(--ink); }
.way a::after { content: " \2192"; color: var(--gold); }

.steps { list-style: none; margin: 0; padding: 0; counter-reset: s; display: flex; flex-direction: column; max-width: 62ch; }
.steps li { counter-increment: s; display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.steps li::before { content: counter(s); width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--stone); border: 1.5px solid var(--gold-soft); font-family: var(--display); font-weight: 600; color: var(--gold); }
.steps strong { display: block; }
.steps span { color: var(--muted); font-size: 0.97rem; }

.mission { background: var(--stone); border-radius: var(--radius); padding: 26px 28px; display: flex; flex-direction: column; gap: 10px; }
.mission p.say { font-family: var(--display); font-style: italic; font-size: clamp(1.2rem, 2.3vw, 1.45rem); line-height: 1.45; }
.note { font-size: 0.85rem; color: var(--muted); }
.board { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; }
.seat { border: 1px dashed var(--line); border-radius: var(--radius); padding: 18px; display: flex; flex-direction: column; gap: 2px; }
.seat .role { font-size: 0.84rem; font-weight: 600; color: var(--gold); }
.seat .name { font-family: var(--display); font-size: 1.08rem; color: #8f8a7d; }
.side-photo { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: center 25%; border-radius: var(--radius); }

.email { font-family: var(--display); font-size: clamp(1.15rem, 2.6vw, 1.5rem); font-weight: 600; overflow-wrap: anywhere; }
.copy-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.copy-note { font-size: 0.9rem; color: var(--muted); min-height: 1.4em; }

/* gallery */
.albums { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 22px; }
.album-card { text-decoration: none; color: var(--ink); display: flex; flex-direction: column; gap: 12px; }
.album-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: center 30%; border-radius: var(--radius); background: var(--stone); transition: transform 0.2s ease; }
.album-card:hover img { transform: translateY(-3px); }
.album-card .meta { display: flex; flex-direction: column; gap: 2px; }
.album-card .meta strong { font-family: var(--display); font-size: 1.1rem; font-weight: 600; line-height: 1.25; }
.album-card .meta span { font-size: 0.88rem; color: var(--muted); }
.photos { columns: 4 220px; column-gap: 12px; }
.photos button { display: block; width: 100%; margin: 0 0 12px; padding: 0; border: 0; background: var(--stone); cursor: zoom-in; break-inside: avoid; border-radius: 8px; overflow: hidden; }
.photos img { width: 100%; }
.lightbox { position: fixed; inset: 0; z-index: 50; background: rgba(18, 17, 13, 0.95); display: flex; align-items: center; justify-content: center; padding: 56px 12px 44px; }
.lightbox img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 4px; }
.lb-btn { position: absolute; background: #fff; color: var(--ink); border: 0; border-radius: 999px; font: 600 1rem var(--body); cursor: pointer; }
.lb-close { top: 12px; right: 12px; padding: 8px 16px; }
.lb-prev, .lb-next { top: 50%; transform: translateY(-50%); width: 46px; height: 46px; font-size: 1.6rem; line-height: 1; }
.lb-prev { left: 10px; } .lb-next { right: 10px; }
.lb-count { position: absolute; bottom: 12px; left: 0; right: 0; margin: 0 auto; text-align: center; color: #d8d4c8; font-size: 0.9rem; font-variant-numeric: tabular-nums; }

/* footer: the only dark band, echoing the seal */
.site-foot { background: var(--night); color: #cfcabd; font-size: 0.93rem; }
.site-foot .wrap { padding-block: 44px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 28px; align-items: center; }
.site-foot img { width: 88px; }
.site-foot strong { color: #fff; font-family: var(--display); font-size: 1.1rem; font-weight: 600; display: block; }
.site-foot a { color: var(--gold-soft); }
.site-foot nav { display: flex; flex-direction: column; gap: 4px; text-align: right; }
.site-foot nav a { text-decoration: none; }
.site-foot nav a:hover { color: #fff; text-decoration: underline; }

@media (max-width: 860px) {
  .hero-body { grid-template-columns: 1fr; gap: 0; padding-bottom: 48px; }
  .hero-body .seal { width: 108px; margin-top: -54px; }
  .hero-body .stack { padding-top: 20px; }
  .hero-banner img { height: 230px; object-position: 30% 40%; }
  .hero-banner figcaption { right: 10px; bottom: 8px; }
  .split, .programs, .programs.three, .pillars, .ways, .feature { grid-template-columns: 1fr; }
  .feature .copy { padding: 26px; }
  .feature > img { min-height: 220px; }
  .stats .wrap { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat:nth-child(3) { padding-left: 0; border-left: 0; }
  .stat:nth-child(n+3) { border-top: 1px solid var(--line); }
  .site-foot .wrap { grid-template-columns: 1fr; }
  .site-foot nav { text-align: left; }
  .site-head { position: static; }
}
@media (max-width: 560px) {
  .dates li { grid-template-columns: 22px minmax(0, 1fr); gap: 0 14px; }
  .dates li::before { grid-column: 1; }
  .dates .when { grid-column: 2; grid-row: 1; text-align: left; font-size: 1rem; }
  .dates .what { grid-column: 2; grid-row: 2; }
  .dates li:not(:last-child)::after { left: 10px; }
  nav.main a { padding: 6px 10px; }
  section.block { padding-block: 46px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .album-card img { transition: none; } }