:root { --ink: #0E1A2B; --ink2: #152742; --paper: #FBF8F2; --ivory: #F4EEE2; --gold: #C9A45C; --gold-d: #9C7A3C;
  --gold-l: #E8D3A0; --text: #1A2232; --muted: #6C6758;
  --serif: 'Fraunces', 'Times New Roman', serif; --sans: 'Manrope', system-ui, sans-serif; --mono: 'DM Mono', ui-monospace, monospace; }
html, body { margin: 0; background: var(--paper); scrollbar-width: none; }
body::-webkit-scrollbar { display: none; }
html.gr-locked, html.gr-locked body { overflow: hidden; height: 100%; }
.gr { color: var(--text); font-family: var(--sans); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
.gr :where(h1, h2, h3, p, ol, li, blockquote) { margin: 0; padding: 0; }
.gr ol { list-style: none; }
.gr-mask { display: block; overflow: hidden; padding: .06em 0 .12em; }
.gr-mask > span { display: block; }

/* ------------ opening */
.gr-open { position: fixed; inset: 0; z-index: 50; width: 100%; border: 0; margin: 0; padding: 0; cursor: pointer; color: var(--ivory);
  font: inherit; -webkit-tap-highlight-color: transparent; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
  background: radial-gradient(120% 80% at 50% 42%, #1c3152 0%, #0E1A2B 58%, #08111e 100%);
  animation: grBail .01s 9s forwards; }
@keyframes grBail { to { opacity: 0; visibility: hidden; pointer-events: none; } }
.gr-tick { position: absolute; width: 22px; height: 22px; border: 0 solid rgba(201,164,92,.55); }
.gr-tick--tl { top: 20px; left: 20px; border-top-width: 1px; border-left-width: 1px; }
.gr-tick--tr { top: 20px; right: 20px; border-top-width: 1px; border-right-width: 1px; }
.gr-tick--bl { bottom: 20px; left: 20px; border-bottom-width: 1px; border-left-width: 1px; }
.gr-tick--br { bottom: 20px; right: 20px; border-bottom-width: 1px; border-right-width: 1px; }
.gr-open-top { position: absolute; top: 42px; left: 0; right: 0; text-align: center; font: 400 11px/1 var(--mono); letter-spacing: .42em; text-transform: uppercase; color: var(--gold); }
.gr-open-stage { display: block; width: min(68vw, 300px); }
.gr-cap { display: block; width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 18px 30px rgba(0,0,0,.45)); }
.gr-glint { stroke-dasharray: .06 .94; stroke-dashoffset: .1; opacity: 0; }
.gr-open-line { display: block; max-width: 24ch; text-align: center; font: italic 300 clamp(20px, 5.6vw, 26px)/1.35 var(--serif); color: var(--ivory); }
.gr-open-hint { position: absolute; bottom: 46px; left: 0; right: 0; display: flex; align-items: center; justify-content: center; gap: 10px;
  font: 400 11px/1 var(--mono); letter-spacing: .32em; text-transform: uppercase; color: rgba(244,238,226,.7); }
.gr-open-hint i { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 0 rgba(201,164,92,.6); animation: grPulse 2s ease-out infinite; }
@keyframes grPulse { 70% { box-shadow: 0 0 0 10px rgba(201,164,92,0); } 100% { box-shadow: 0 0 0 0 rgba(201,164,92,0); } }

/* ------------ hero */
.gr-hero { position: relative; min-height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 96px 24px 120px; text-align: center; box-sizing: border-box;
  background: radial-gradient(90% 60% at 50% 38%, #fffdf8 0%, var(--paper) 55%, #f3ecdf 100%); }
.gr-class-of { font: 400 12px/1 var(--mono); letter-spacing: .5em; text-transform: uppercase; color: var(--gold-d); padding-left: .5em; }
.gr-year { display: block; width: min(94vw, 760px); height: auto; margin-top: 10px; overflow: visible; }
.gr-year text { font-family: var(--serif); font-weight: 300; font-size: 236px; letter-spacing: 6px; fill: none; stroke: var(--gold); stroke-width: 1.3; }
.gr-name { position: relative; margin-top: -.34em !important; font: 300 clamp(46px, 13vw, 112px)/.98 var(--serif); letter-spacing: -.025em; color: var(--ink);
  font-variation-settings: 'opsz' 144, 'SOFT' 50; max-width: 12ch; }
.gr-laurel { display: block; width: min(78vw, 340px); height: auto; margin: 26px auto 22px; overflow: visible; }
.gr-degree { max-width: 26ch; font: italic 300 clamp(19px, 5vw, 24px)/1.35 var(--serif); color: var(--text); }
.gr-school { margin-top: 14px !important; font: 500 11.5px/1.5 var(--mono); letter-spacing: .3em; text-transform: uppercase; color: var(--gold-d); }
.gr-cue { position: absolute; left: 0; right: 0; bottom: 28px; display: flex; justify-content: center; }
.gr-cue i { width: 1px; height: 44px; background: linear-gradient(var(--gold), transparent); transform-origin: top; animation: grLine 2.6s cubic-bezier(.6,0,.2,1) infinite; }
@keyframes grLine { 0% { transform: scaleY(0); opacity: 1; } 60% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }

/* ------------ shared */
.gr-label { font: 400 11px/1 var(--mono); letter-spacing: .42em; text-transform: uppercase; color: var(--gold-d); display: inline-flex; align-items: center; gap: 14px; }
.gr-label::before, .gr-label::after { content: ""; width: 26px; height: 1px; background: var(--gold); opacity: .7; }
.gr-h2 { font: 300 clamp(34px, 9vw, 56px)/1.05 var(--serif); letter-spacing: -.02em; color: var(--ink); }

/* ------------ invite */
.gr-invite { padding: clamp(110px, 18svh, 180px) 28px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 22px; }
.gr-invite-line { font: 400 16px/1.6 var(--sans); color: var(--muted); max-width: 30ch; }
.gr-event { font: italic 300 clamp(44px, 12.5vw, 96px)/1 var(--serif); letter-spacing: -.02em; color: var(--ink); max-width: 11ch; }
.gr-host { font: 400 12px/1.6 var(--mono); letter-spacing: .22em; text-transform: uppercase; color: var(--muted); }

/* ------------ journey */
.gr-journey { padding: clamp(80px, 12svh, 140px) 28px clamp(110px, 16svh, 170px); max-width: 620px; margin: 0 auto; box-sizing: border-box; }
.gr-journey .gr-h2 { text-align: left; margin-bottom: 64px !important; }
.gr-road { position: relative; padding-left: 52px; }
.gr-stops { display: flex; flex-direction: column; gap: 78px; }
.gr-road-line { position: absolute; left: 11px; top: 8px; bottom: 8px; width: 1px; background: rgba(156,122,60,.18); }
.gr-road-fill { position: absolute; inset: 0; background: linear-gradient(var(--gold-l), var(--gold) 40%, var(--gold-d)); transform-origin: top; }
.gr-stop { position: relative; }
.gr-stop-dot { position: absolute; left: -46px; top: 4px; width: 11px; height: 11px; border-radius: 50%; background: var(--paper); border: 1px solid var(--gold);
  box-shadow: 0 0 0 5px var(--paper), 0 0 18px rgba(201,164,92,.55); }
.gr-stop-dot::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--gold); }
.gr-stop-year { font: 400 13px/1 var(--mono); letter-spacing: .3em; color: var(--gold-d); }
.gr-stop-title { margin-top: 14px !important; font: 400 clamp(26px, 7vw, 34px)/1.1 var(--serif); letter-spacing: -.01em; color: var(--ink); }
.gr-stop-text { margin-top: 10px !important; font: 400 15.5px/1.65 var(--sans); color: var(--muted); max-width: 34ch; }

/* ------------ diploma */
.gr-dip-wrap { padding: clamp(60px, 10svh, 120px) 24px clamp(110px, 16svh, 170px); display: flex; justify-content: center;
  background: linear-gradient(var(--paper), var(--ivory) 30%, var(--ivory) 70%, var(--paper)); }
.gr-dip { position: relative; width: min(86vw, 420px); display: flex; flex-direction: column; align-items: center; }
.gr-dip-roll { position: relative; z-index: 2; display: block; width: 112%; height: 22px; border-radius: 11px;
  background: linear-gradient(#f2e7cf 0%, #d9c49a 45%, #b79c66 80%, #e6d6b2 100%); box-shadow: 0 6px 14px rgba(60,40,10,.18); }
.gr-dip-roll::before, .gr-dip-roll::after { content: ""; position: absolute; top: -3px; width: 12px; height: 28px; border-radius: 6px;
  background: linear-gradient(#e9d39b, #a8843f); }
.gr-dip-roll::before { left: -6px; } .gr-dip-roll::after { right: -6px; }
.gr-dip-sheet { position: relative; z-index: 1; width: 100%; margin: -10px 0; padding: 50px 26px 62px; box-sizing: border-box; text-align: center;
  background: #fffcf5; box-shadow: inset 0 0 0 10px #fffcf5, inset 0 0 0 11px rgba(201,164,92,.7), inset 0 0 0 14px #fffcf5, inset 0 0 0 15px rgba(201,164,92,.35),
  0 18px 40px rgba(60,40,10,.12); }
.gr-dip-inner { display: flex; flex-direction: column; align-items: center; }
.gr-dip-kicker { font: italic 300 18px/1.4 var(--serif); color: var(--muted); }
.gr-dip-day { margin-top: 22px !important; font: 600 12px/1 var(--sans); letter-spacing: .42em; padding-left: .42em; color: var(--ink); }
.gr-dip-date { margin-top: 6px !important; font: 300 clamp(96px, 30vw, 132px)/1 var(--serif); letter-spacing: -.04em; color: var(--ink); font-variation-settings: 'opsz' 144; }
.gr-dip-month { font: italic 400 clamp(24px, 6.4vw, 30px)/1.2 var(--serif); color: var(--ink); }
.gr-dip-year { font: 400 14px/1 var(--mono); font-style: normal; letter-spacing: .2em; color: var(--gold-d); vertical-align: middle; margin-left: 4px; }
.gr-dip-time { margin-top: 18px !important; font: 400 13px/1 var(--mono); letter-spacing: .3em; text-transform: uppercase; color: var(--text); }
.gr-dip-rule { display: block; width: 46px; height: 1px; margin: 26px auto; background: var(--gold); }
.gr-dip-venue { font: 400 15.5px/1.6 var(--sans); color: var(--text); max-width: 26ch; }
.gr-seal { position: absolute; right: 4px; bottom: -44px; width: 78px; transform: rotate(-8deg); z-index: 3; filter: drop-shadow(0 6px 10px rgba(60,40,10,.25)); }
.gr-seal svg { display: block; width: 100%; height: auto; }
.gr-seal-letter { position: absolute; left: 0; right: 0; top: 0; height: 77%; display: flex; align-items: center; justify-content: center;
  font: 600 26px/1 var(--serif); color: #fff6dc; text-shadow: 0 1px 0 rgba(90,60,10,.5); }

/* ------------ quote & note */
.gr-quote { padding: clamp(120px, 18svh, 190px) 30px clamp(70px, 10svh, 120px); text-align: center; display: flex; flex-direction: column; align-items: center; }
.gr-qmark { width: 46px; height: auto; margin-bottom: 26px; }
.gr-quote-text { max-width: 24ch; font: italic 300 clamp(26px, 7vw, 40px)/1.32 var(--serif); letter-spacing: -.01em; color: var(--ink); }
.gr-quote-by { margin-top: 26px !important; font: 400 12px/1 var(--mono); letter-spacing: .26em; text-transform: uppercase; color: var(--gold-d); }
.gr-note { padding: clamp(50px, 8svh, 90px) 30px clamp(120px, 18svh, 180px); text-align: center; display: flex; flex-direction: column; align-items: center; gap: 20px; }
.gr-note-text { max-width: 32ch; font: 400 16px/1.7 var(--sans); color: var(--muted); }

/* ------------ close */
.gr-close { position: relative; min-height: 100svh; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px;
  padding: 120px 28px; box-sizing: border-box; text-align: center; color: var(--ivory); cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  background: radial-gradient(110% 70% at 50% 100%, #1d3457 0%, var(--ink) 55%, #070f1b 100%); }
.gr-stars { position: absolute; inset: 0; pointer-events: none; opacity: .7;
  background-image: radial-gradient(1px 1px at 12% 18%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 28% 62%, #fff 50%, transparent 51%),
  radial-gradient(1.4px 1.4px at 44% 26%, #f3dfaa 50%, transparent 51%), radial-gradient(1px 1px at 63% 12%, #fff 50%, transparent 51%),
  radial-gradient(1px 1px at 78% 40%, #fff 50%, transparent 51%), radial-gradient(1.4px 1.4px at 88% 72%, #f3dfaa 50%, transparent 51%),
  radial-gradient(1px 1px at 8% 80%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 55% 84%, #fff 50%, transparent 51%),
  radial-gradient(1px 1px at 35% 8%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 92% 22%, #fff 50%, transparent 51%); }
.gr-close-title { position: relative; font: 300 clamp(50px, 14vw, 110px)/1 var(--serif); letter-spacing: -.03em; color: var(--ivory); }
.gr-rsvp { position: relative; font: 400 12px/1.6 var(--mono); letter-spacing: .3em; text-transform: uppercase; color: var(--gold); }
.gr-hint { position: absolute; bottom: 42px; left: 0; right: 0; font: 400 11px/1 var(--mono); letter-spacing: .3em; text-transform: uppercase; color: rgba(244,238,226,.55); }
.gr-flycap { position: fixed; z-index: 40; width: 64px; height: 48px; margin: -24px 0 0 -32px; pointer-events: none; will-change: transform; }
.gr-flycap svg { display: block; width: 100%; height: 100%; }

@media (min-width: 900px) {
  .gr-hero { padding-top: 120px; }
  .gr-name { max-width: 14ch; }
  .gr-stops { gap: 96px; }
  .gr-seal { right: -30px; bottom: -50px; width: 92px; }
}
@media (prefers-reduced-motion: reduce) {
  .gr-cue i, .gr-open-hint i { animation: none; }
}