﻿* {
  box-sizing:border-box}
html {
  scroll-behavior:smooth;
  scroll-padding-top:85px}
body {
  margin:0;
  font-family:var(--sans);
  color:var(--ink);
  background:var(--ivory);
  font-size:15px;
  line-height:1.7}
button,input,textarea,select {
  font:inherit}
button,a,input,textarea,select {
  -webkit-tap-highlight-color:transparent}
a {
  color:inherit;
  text-decoration:none}
button {
  cursor:pointer}
button:disabled {
  cursor:not-allowed;
  opacity:.45}
img {
  max-width:100%;
  display:block}
h1,h2,h3,p {
  margin-top:0}
h1,h2,h3 {
  line-height:1.18;
  font-weight:400}
h2 {
  font-family:var(--serif);
  font-size:clamp(32px,3.5vw,49px);
  letter-spacing:-1.2px;
  margin:15px 0 20px}
h2 em {
  font-weight:400;
  color:#967238}
p {
  color:var(--muted)}
:focus-visible {
  outline:3px solid #58aeea;
  outline-offset:5px}
section[id] {
  scroll-margin-top:20px}
.container {
  max-width:1180px;
  width:calc(100% - 100px);
  margin:auto}
.section-pad {
  padding:90px 0}
.eyebrow {
  font-size:10px;
  font-weight:600;
  letter-spacing:2.6px;
  color:#8b6a34;
  display:block}
.site-header {
  height:92px;
  padding:0 50px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:var(--navy);
  color:#e3eaf0;
  border-bottom:1px solid #ffffff12;
  position:relative;
  z-index:2}
.brand {
  display:flex;
  align-items:center;
  gap:13px}
.brand img {
  object-fit:contain;
  width:39px;
  height:52px}
.brand span {
  font-size:10px;
  line-height:1.65;
  letter-spacing:1.5px;
  font-weight:400}
.brand strong {
  font-weight:600}
.site-header nav {
  display:flex;
  gap:38px;
  font-size:12px;
  color:#c2ced9}
.site-header nav a:hover {
  color:var(--gold-light)}
.edition {
  border:1px solid #d9b77750;
  border-radius:30px;
  padding:7px 17px;
  font-size:10px;
  letter-spacing:2px;
  color:var(--gold-light)}
.edition b {
  font-weight:500;
  margin-left:4px}
.skip-link {
  position:absolute;
  left:16px;
  top:-100px;
  z-index:20;
  padding:12px;
  background:white}
.skip-link:focus {
  top:8px}
.hero {
  min-height:830px;
  position:relative;
  isolation:isolate;
  background:var(--navy);
  color:var(--ivory);
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  padding:55px 24px 26px;
  overflow:hidden}
.hero:before {
  content:'';
  position:absolute;
  inset:0;
  z-index:-2;
  background-image:linear-gradient(180deg,#071c301a 10%,#071c3000 45%,#071c30bb 100%),var(--celebration-background);
  background-size:cover;
  background-position:center 72%}
.hero:after {
  content:'';
  position:absolute;
  z-index:-1;
  inset:20px;
  border:1px solid #d9b77724;
  pointer-events:none;
  mask-image:linear-gradient(black,transparent 45%,black)}
.hero-content {
  width:100%;
  max-width:750px}
.hero .eyebrow {
  color:#c4c9c8;
  font-size:9px;
  letter-spacing:3px}
.little-star {
  color:var(--gold);
  margin-right:8px}
.hero-crest {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:24px;
  margin:26px auto 20px}
.hero-crest img {
  width:62px;
  height:81px;
  object-fit:contain}
.hero-crest>span {
  font-family:var(--serif);
  font-size:74px;
  color:var(--gold);
  opacity:.7;
  transform:rotate(-40deg)}
.hero-crest>span:last-child {
  transform:scaleX(-1) rotate(-40deg)}
.hero-overline {
  font-size:10px;
  letter-spacing:4px;
  color:var(--gold-light);
  margin-bottom:9px}
.hero h1 {
  font-family:var(--serif);
  font-size:clamp(54px,6.6vw,88px);
  letter-spacing:-3px;
  line-height:1;
  margin-bottom:16px}
.hero h1 em {
  font-weight:400;
  color:var(--gold-light)}
.year {
  font-size:clamp(60px,7vw,94px);
  letter-spacing:9px;
  display:block;
  color:var(--gold-light);
  margin-top:12px}
.year-star {
  font-size:15px;
  vertical-align:middle;
  display:inline-block;
  margin:0 7px 13px -2px;
  letter-spacing:0}
.hero-university {
  font-family:var(--serif);
  font-size:21px;
  color:#e8e9e5;
  margin-bottom:14px}
.ornament {
  display:flex;
  justify-content:center;
  gap:14px;
  align-items:center;
  color:var(--gold);
  font-size:9px;
  margin:15px 0}
.ornament span {
  height:1px;
  width:72px;
  background:linear-gradient(90deg,transparent,var(--gold))}
.ornament span:last-child {
  transform:rotate(180deg)}
.hero-motto {
  color:var(--gold-light);
  font-family:var(--serif);
  font-size:20px;
  font-style:italic;
  margin-bottom:18px}
.hero-copy {
  color:#d2dce1;
  font-size:12px;
  line-height:1.9;
  margin:0 auto 25px}
.button {
  border:0;
  border-radius:6px;
  padding:13px 26px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:23px;
  font-size:12px;
  font-weight:600;
  min-height:48px;
  transition:transform .2s,box-shadow .2s}
.button:hover {
  transform:translateY(-2px)}
.gold {
  color:#263342;
  background:linear-gradient(115deg,#f3dfb4,#d6ad67);
  box-shadow:0 3px 20px #d9b77720}
.button>span {
  font-size:18px}
.navy {
  background:var(--navy);
  color:white}
.hero-date {
  font-size:9px;
  color:#ccd3d4;
  letter-spacing:2px;
  margin:22px 0 0}
.hero-date span {
  color:var(--gold);
  padding:0 10px}
.hero-bottom {
  width:100%;
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  margin-top:auto;
  padding:32px 30px 0}
.hero-bottom>span {
  font-size:8px;
  letter-spacing:2px;
  text-align:left;
  color:#b3c1cc;
  line-height:1.9}
.hero-bottom>span:last-child {
  text-align:right}
.hero-bottom b {
  font-weight:400;
  color:var(--gold-light)}
.hero-bottom>a {
  border:1px solid #d9b77770;
  border-radius:50%;
  width:32px;
  height:44px;
  display:grid;
  place-items:center;
  color:var(--gold-light)}
.personal-intro {
  background:#071c30b0;
  border:1px solid #d9b77750;
  border-radius:12px;
  padding:16px;
  margin:15px 0 20px}
.personal-intro p {
  color:var(--gold-light);
  font-size:12px;
  margin:0}
.personal-intro span {
  font-size:12px;
  color:#d4e4ef}
.personal-intro h2 {
  font-size:25px;
  margin:6px 0}
.section-heading {
  text-align:center}
.section-heading>p {
  font-size:13px;
  line-height:1.9}
.event {
  background:var(--ivory)}
.event-grid {
  display:grid;
  grid-template-columns:1fr 1fr 1.25fr;
  margin:42px 0 36px;
  border:1px solid #d6cbb655;
  background:#fffdf8;
  border-radius:12px;
  padding:30px 20px;
  box-shadow:0 12px 35px #122b4210}
.event-grid article {
  text-align:center;
  padding:0 18px}
.event-grid article+article {
  border-left:1px solid #d9cdbb}
.line-icon {
  font-size:32px;
  line-height:1;
  color:#ae8545;
  display:block;
  margin-bottom:15px}
.event-grid p {
  font-size:9px;
  letter-spacing:2px;
  margin-bottom:9px}
.event-grid h3 {
  font-family:var(--serif);
  font-size:23px;
  margin:0 0 5px}
.event-grid article>span:last-child {
  color:var(--muted);
  font-size:12px}
.countdown-wrap {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:40px;
  margin-top:30px}
.countdown-wrap>span {
  font-size:9px;
  letter-spacing:2px;
  color:#677683}
.countdown {
  display:flex;
  align-items:center;
  gap:22px}
.countdown>div {
  text-align:center;
  min-width:42px}
.countdown b {
  font-family:var(--serif);
  font-size:32px;
  font-weight:400;
  line-height:1.2}
.countdown small {
  display:block;
  font-size:8px;
  letter-spacing:1.7px;
  color:var(--muted)}
.countdown i {
  color:#bfa16c;
  font-style:normal}
.invitation-details {
  margin-top:40px;
  border-radius:12px;
  background:#e8eef2;
  padding:28px;
  display:grid;
  grid-template-columns:1.3fr 1fr 1fr;
  gap:24px}
.invitation-details h3 {
  font-family:var(--serif);
  font-size:25px;
  margin:12px 0}
.invitation-details p {
  margin:0;
  font-size:12px}
.invitation-details dt {
  font-size:11px;
  color:var(--muted)}
.invitation-details dd {
  margin:0 0 8px}
.registration {
  display:block;
  margin:13px 0;
  font-size:21px;
  overflow-wrap:anywhere}
.invitation-details small {
  display:block;
  font-size:10px}
.graduates {
  background:#eef2f4;
  border-top:1px solid #e2e6e9;
  border-bottom:1px solid #e2e6e9}
.graduates-heading {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:24px}
.graduates-heading p {
  font-size:13px}
.graduate-count {
  display:flex;
  align-items:center;
  gap:17px;
  flex-shrink:0}
.graduate-count b {
  font-family:var(--serif);
  font-weight:400;
  font-size:53px;
  color:#ac8951}
.graduate-count span {
  font-size:8px;
  letter-spacing:1.5px;
  line-height:2;
  color:var(--muted)}
.program-tabs {
  display:flex;
  gap:8px;
  border-bottom:1px solid #cdd8e0;
  padding:16px 0 22px;
  margin-top:12px;
  flex-wrap:wrap}
.program-tabs button {
  border:1px solid #cbd4db;
  background:transparent;
  color:#435769;
  min-height:44px;
  min-width:110px;
  border-radius:6px;
  padding:10px 18px;
  display:flex;
  gap:16px;
  justify-content:center;
  align-items:center;
  font-size:11px;
  font-weight:600}
.program-tabs button span {
  font-size:9px;
  opacity:.8}
.program-tabs button[aria-selected=true] {
  background:var(--navy);
  color:var(--gold-light);
  border-color:var(--navy)}
.program-info {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  margin:24px 0 19px}
.program-info h3 {
  font-size:13px;
  font-weight:500;
  margin:0}
.program-info>span {
  font-size:8px;
  letter-spacing:1.5px;
  color:var(--muted);
  white-space:nowrap}
.graduate-track {
  display:flex;
  gap:22px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
  overscroll-behavior-x:contain;
  padding:3px 1px 18px;
  min-width:0}
.graduate-track::-webkit-scrollbar {
  display:none}
.graduate-card {
  flex:0 0 calc((100% - 66px)/4);
  min-width:0;
  background:white;
  border-radius:11px;
  overflow:hidden;
  box-shadow:0 6px 18px #142b400b;
  scroll-snap-align:start;
  scroll-snap-stop:always}
.portrait {
  aspect-ratio:4/5;
  position:relative;
  background:linear-gradient(145deg,#183d59,#091e31);
  overflow:hidden;
  isolation:isolate;
  display:grid;
  place-items:center}
.portrait:after {
  content:'';
  position:absolute;
  inset:12px;
  border:1px solid #d9b77735;
  border-radius:6px;
  z-index:-1}
.initials {
  font-family:var(--serif);
  color:var(--gold-light);
  font-size:64px;
  font-weight:400}
.portrait img {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 20%;
  z-index:1}
.portrait img[hidden] {
  display:none}
.program-badge {
  position:absolute;
  left:14px;
  top:14px;
  z-index:2;
  background:var(--gold-light);
  color:#4c3b20;
  border:1px solid #ddc18e;
  font-size:9px;
  font-weight:700;
  letter-spacing:1px;
  padding:4px 10px;
  border-radius:4px}
.portrait-label {
  position:absolute;
  bottom:20px;
  color:#e4d5b6;
  font-size:8px;
  letter-spacing:2px;
  z-index:0}
.card-body {
  padding:19px 18px 16px}
.card-body h4 {
  font-family:var(--serif);
  font-weight:400;
  font-size:20px;
  line-height:1.3;
  margin:0 0 9px;
  overflow-wrap:anywhere}
.card-body .nim {
  font-size:10px;
  letter-spacing:.5px;
  color:#71808b;
  margin:0 0 10px}
.card-body .program-name {
  font-size:10px;
  line-height:1.5;
  min-height:30px;
  margin:0 0 15px}
.card-meta {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px;
  border-top:1px solid #edf0f2;
  padding-top:11px;
  font-size:9px}
.class-badge {
  background:#eef3f6;
  color:#4b6173;
  padding:2px 7px;
  border-radius:3px}
.card-meta .reg {
  color:#7b6747;
  overflow-wrap:anywhere;
  text-align:right}
.slider-footer {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:14px;
  margin-top:7px}
.slider-footer>span {
  font-size:10px;
  color:var(--muted)}
.slider-controls {
  display:flex;
  gap:9px}
.slider-controls button {
  width:44px;
  height:44px;
  border:1px solid #becbd4;
  border-radius:50%;
  background:transparent;
  color:var(--navy);
  font-size:20px}
.slider-controls button:last-child {
  background:var(--navy);
  color:var(--gold-light);
  border-color:var(--navy)}
.slider-controls button:first-child {
  font-size:13px}
.slider-status {
  font-size:12px;
  text-align:center;
  margin:15px 0}
.slider-status:empty {
  display:none}
.empty-graduates {
  width:100%;
  padding:50px 20px;
  text-align:center;
  border:1px dashed #bdcbd5;
  border-radius:12px}
.empty-graduates strong {
  font-family:var(--serif);
  font-size:28px;
  font-weight:400}
.empty-graduates p {
  margin:8px 0 0;
  font-size:13px}
.quote-banner {
  background:linear-gradient(#071c30bb,#071c30c9),var(--celebration-background) center 75%/cover;
  padding:76px 0;
  color:white;
  text-align:center}
.quote-banner .eyebrow {
  color:var(--gold);
  font-size:8px}
.quote-banner p {
  font-family:var(--serif);
  font-size:clamp(28px,3.5vw,43px);
  color:var(--ivory);
  line-height:1.4;
  margin:20px 0}
.quote-banner em {
  color:var(--gold-light)}
.quote-attribution {
  font-size:8px;
  letter-spacing:2px;
  color:#b6c9d6}
.wishes-layout {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:85px}
.wishes-layout>div {
  min-width:0}
.wishes-layout h2 {
  margin-bottom:15px}
.wishes-layout>div>p {
  font-size:13px}
.wish-form {
  display:flex;
  flex-direction:column;
  position:relative;
  margin-top:25px}
.wish-form label {
  font-size:11px;
  font-weight:600;
  margin:10px 0 7px}
input,textarea,select {
  width:100%;
  min-width:0;
  border:1px solid #d7dcd9;
  border-radius:6px;
  background:#fffefa;
  padding:12px;
  color:var(--ink);
  font-size:13px}
textarea {
  resize:vertical;
  min-height:120px}
input::placeholder,textarea::placeholder {
  color:#7e8992}
.char-counter {
  font-size:9px;
  text-align:right;
  margin:5px 0 15px;
  color:var(--muted)}
.wish-form .button {
  align-self:flex-start;
  min-width:190px}
.wish-form small {
  font-size:9px;
  color:var(--muted);
  margin-top:12px}
.honeypot {
  position:absolute;
  left:-9999px;
  width:1px;
  height:1px;
  overflow:hidden}
.wish-list {
  max-height:615px;
  overflow-y:auto;
  padding:10px 6px;
  scrollbar-width:thin}
.wish-card {
  background:#fffdf8;
  border:1px solid #e3dac8;
  border-radius:10px;
  padding:24px 27px;
  box-shadow:0 8px 22px #182d3c05;
  margin-bottom:16px}
.quote-mark {
  font-family:var(--serif);
  font-size:48px;
  line-height:1;
  color:#bc9557;
  display:block;
  height:35px}
.wish-card p {
  font-family:var(--serif);
  font-size:17px;
  line-height:1.7;
  color:#344958;
  overflow-wrap:anywhere}
.wish-signature {
  border-top:1px solid #eee6d9;
  padding-top:13px;
  font-size:10px;
  display:flex;
  justify-content:space-between;
  gap:16px;
  overflow-wrap:anywhere}
.wish-signature>span:last-child {
  color:#ac8951;
  font-size:17px}
.empty-wish {
  margin-top:70px;
  padding:35px}
.empty-wish h3 {
  font-family:var(--serif);
  font-size:28px;
  margin:14px 0}
.notice {
  padding:12px 16px;
  border:1px solid #a9cdb6;
  background:#eef8f0;
  border-radius:6px;
  color:#23513a;
  font-size:13px;
  margin:15px 0}
.notice.error {
  border-color:#dfb3a9;
  background:#fff0ed;
  color:#8b332b}
footer {
  background:var(--navy);
  color:#d5dfe7;
  padding:45px 0 22px}
.footer-top {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:24px;
  padding-bottom:32px}
.footer-top>p {
  font-family:var(--serif);
  font-size:20px;
  color:#e8dfca;
  line-height:1.5;
  margin:0}
.footer-top>a:last-child {
  font-size:10px;
  color:var(--gold-light)}
.footer-bottom {
  border-top:1px solid #ffffff16;
  padding-top:20px;
  display:flex;
  justify-content:space-between;
  font-size:9px;
  color:#95a8b8}
.admin-body {
  background:#edf2f5;
  min-height:100vh}
.admin-header {
  background:var(--navy);
  color:white;
  padding:20px 5%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  flex-wrap:wrap}
.admin-header h1 {
  font-size:19px;
  margin:0}
.admin-header a {
  color:var(--gold-light);
  font-size:13px}
.admin-header form {
  margin:0}
.admin-header button {
  border:1px solid var(--gold);
  background:transparent;
  color:var(--gold-light);
  padding:8px 15px;
  border-radius:5px}
.admin-main {
  max-width:1180px;
  width:90%;
  margin:35px auto}
.admin-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px}
.admin-card {
  padding:25px;
  background:white;
  border:1px solid #dbe2e8;
  border-radius:12px;
  margin-bottom:24px}
.admin-card h2 {
  font-size:27px;
  margin-top:0}
.admin-card p,.admin-card li {
  font-size:13px}
.admin-card form {
  display:grid;
  gap:12px}
.admin-card label {
  font-size:13px}
.admin-card .button {
  justify-self:start}
.admin-actions {
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin:15px 0}
.admin-actions a {
  font-size:12px;
  text-decoration:underline}
.login-card {
  max-width:460px;
  margin:10vh auto;
  background:white;
  padding:36px;
  border-radius:14px;
  width:calc(100% - 32px)}
.login-card h1 {
  font-family:var(--serif);
  font-size:32px;
  margin:20px 0}
.login-card img {
  width:55px;
  margin:auto}
.login-card form {
  display:grid;
  gap:12px}
.login-card label {
  font-size:12px}
.table-wrap {
  overflow-x:auto}
table {
  border-collapse:collapse;
  width:100%;
  font-size:12px;
  text-align:left}
th,td {
  padding:12px;
  border-bottom:1px solid #e2e7eb;
  vertical-align:top}
th {
  white-space:nowrap}
td a {
  text-decoration:underline}
.pagination {
  display:flex;
  gap:20px;
  align-items:center;
  font-size:12px;
  margin-top:18px}
.pagination a {
  text-decoration:underline}
.admin-stat {
  font-size:35px;
  color:#967238;
  font-family:var(--serif)}

@media(min-width:1440px) {
  .hero {
  min-height:880px}
.hero-content {
  padding-top:5px}
.hero:before {
  background-position:center 70%}
}

@media(max-width:1024px) {
  .container {
  width:calc(100% - 64px)}
.site-header {
  padding:0 32px}
.graduate-card {
  flex-basis:calc((100% - 44px)/3)}
.wishes-layout {
  gap:40px}
.program-tabs button {
  min-width:96px;
  padding:10px 14px}
.hero {
  min-height:810px}
.invitation-details {
  grid-template-columns:1fr 1fr}
.invitation-details>div:last-child {
  grid-column:1/-1}
.event-grid h3 {
  font-size:20px}
}

@media(max-width:767px) {
  .container {
  width:calc(100% - 40px)}
.section-pad {
  padding:60px 0}
.site-header {
  height:76px;
  padding:0 20px}
.brand {
  gap:9px}
.brand img {
  width:32px;
  height:42px}
.brand span {
  font-size:8px;
  letter-spacing:1px}
.site-header nav {
  gap:18px;
  font-size:10px}
.edition {
  display:none}
.hero {
  min-height:810px;
  padding-top:40px}
.hero .eyebrow {
  font-size:8px;
  letter-spacing:1.7px}
.hero:before {
  background-position:57% center}
.hero:after {
  inset:12px}
.hero-crest {
  margin-top:30px}
.hero h1 {
  font-size:65px}
.year {
  font-size:76px}
.hero-university {
  font-size:19px}
.hero-copy {
  font-size:12px;
  max-width:330px}
.hero-date {
  font-size:8px;
  letter-spacing:1px}
.hero-bottom {
  padding:40px 0 0}
.hero-bottom>span {
  font-size:6px;
  letter-spacing:1px}
.hero-motto {
  font-size:19px}
.event-grid {
  padding:25px 10px;
  margin:30px 0}
.event-grid article {
  padding:0 10px}
.event-grid h3 {
  font-size:18px}
.event-grid p {
  font-size:8px;
  letter-spacing:1px}
.event-grid article>span:last-child {
  font-size:10px}
.countdown-wrap {
  gap:20px;
  flex-direction:column}
.countdown {
  gap:24px}
.graduates-heading {
  align-items:flex-start}
.graduates-heading h2 {
  font-size:33px}
.graduate-count {
  gap:8px;
  flex-direction:column;
  align-items:flex-end;
  padding-top:15px}
.graduate-count b {
  font-size:38px;
  line-height:1}
.graduate-count span {
  font-size:6px;
  text-align:right}
.graduates-heading p {
  font-size:12px}
.program-tabs {
  gap:8px}
.program-tabs button {
  flex:1 1 calc(33.33% - 8px);
  min-width:0;
  gap:16px}
.program-info h3 {
  font-size:11px}
.program-info>span {
  font-size:7px}
.graduate-card {
  flex-basis:calc((100% - 18px)/2)}
.graduate-track {
  gap:18px}
.wishes-layout {
  grid-template-columns:1fr;
  gap:25px}
.empty-wish {
  margin-top:10px}
.wish-list {
  max-height:450px}
.quote-banner {
  padding:60px 0}
.quote-attribution {
  font-size:7px;
  letter-spacing:1.5px}
.footer-top {
  flex-wrap:wrap}
.footer-top>p {
  font-size:18px}
.footer-top>a:last-child {
  width:100%}
.footer-bottom {
  gap:12px;
  flex-direction:column}
.admin-grid {
  grid-template-columns:1fr}
.admin-card {
  padding:20px}
.invitation-details {
  padding:23px;
  grid-template-columns:1fr}
.invitation-details>div:last-child {
  grid-column:auto}
}

@media(max-width:480px) {
  .site-header nav {
  gap:13px}
.hero h1 {
  font-size:59px}
.hero {
  min-height:795px}
.hero-university {
  font-size:17px}
.hero .button {
  min-width:218px}
.hero-overline {
  font-size:9px}
.hero-copy {
  max-width:310px}
.desktop-break {
  display:none}
.event-grid {
  grid-template-columns:1fr;
  padding:8px 22px}
.event-grid article {
  display:grid;
  grid-template-columns:46px 1fr;
  text-align:left;
  padding:20px 0;
  column-gap:12px}
.event-grid article+article {
  border-left:0;
  border-top:1px solid #e7dfd0}
.line-icon {
  grid-row:1/4;
  align-self:center;
  font-size:31px;
  margin:0}
.event-grid p {
  margin-bottom:5px}
.event-grid h3 {
  font-size:22px;
  margin-bottom:4px}
.event-grid article>span:last-child {
  font-size:11px}
.section-heading>p br {
  display:none}
.graduates-heading h2 {
  font-size:29px;
  letter-spacing:-.9px}
.graduate-count {
  padding-top:20px}
.graduate-count b {
  font-size:33px}
.graduate-card {
  flex-basis:79%}
.graduate-track {
  padding-right:0}
.card-body {
  padding:19px 20px}
.card-body h4 {
  font-size:23px}
.program-info {
  gap:10px}
.slider-footer>span {
  font-size:9px;
  max-width:155px}
.slider-controls {
  gap:7px}
.slider-controls button {
  width:40px;
  height:40px}
.personal-intro h2 {
  font-size:23px}
.wishes h2 {
  font-size:37px}
}

@media(prefers-reduced-motion:reduce) {
  html {
  scroll-behavior:auto}
*,*:before,*:after {
  animation:none!important;
  transition:none!important}
.graduate-track {
  scroll-behavior:auto}
}

.laurel {
  width:42px;
  height:79px;
  fill:none;
  stroke:var(--gold);
  stroke-width:1.25;
  opacity:.8}
.laurel:last-child {
  transform:scaleX(-1)}
.hero-crest {
  gap:13px}
.laurel path:last-child {
  fill:#d9b77718}


.music-toggle{position:fixed;right:22px;bottom:22px;z-index:10;display:flex;align-items:center;gap:9px;min-height:46px;padding:10px 17px;border:1px solid var(--gold);border-radius:30px;background:var(--navy);color:var(--gold-light);box-shadow:0 4px 18px #071c3033;font-size:12px}
.music-toggle>span:first-child{font-size:22px;line-height:1}.music-toggle[aria-pressed=true]{background:#163d57}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}.music-admin audio{width:min(100%,440px);display:block;margin:15px 0}.music-option{display:flex;gap:10px;align-items:center}.music-option input{width:18px;height:18px;margin:0}.music-actions{display:flex;gap:12px;flex-wrap:wrap}.music-admin small{font-size:12px;color:var(--muted)}@media(max-width:480px){.music-toggle{right:12px;bottom:12px;font-size:11px;padding:9px 13px}body{padding-bottom:58px}}
