/* G03 · University Heritage: fonts (SIL Open Font License 1.1, self-hosted) */
@font-face { font-family: "Cinzel"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/cinzel-latin-700-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Playfair Display"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/playfair-display-latin-600-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Playfair Display"; font-style: italic; font-weight: 400; font-display: swap; src: url("../fonts/playfair-display-latin-400-italic.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Lora"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/lora-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Lora"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/lora-latin-600-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Lora"; font-style: italic; font-weight: 400; font-display: swap; src: url("../fonts/lora-latin-400-italic.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* sticker geometry (mockup pixels) and proportions, made by build.py */
:root { --ar-campus-l: 280 / 141; --sx-campus-l: 54.25; --sy-campus-l: 504.25; --sw-campus-l: 152.5; --ar-campus-r: 280 / 224; --sx-campus-r: 901.5; --sy-campus-r: 495.0; --sw-campus-r: 109.75; --ar-flowers: 200 / 335; --sx-flowers: 964.0; --sy-flowers: 1060.0; --sw-flowers: 158.0; --ar-campus-f: 420 / 68; --sx-campus-f: 740.0; --sy-campus-f: 1334.75; --sw-campus-f: 348.75; --ar-books: 260 / 340; }
.phw { --cx0: 60; --cy0: 55; --cw: 540; --ch: 393; }

/* G03 · University Heritage: navy, cream parchment and maroon; the graduate before the campus hall, "WISUDA" between gold laurels
   with the university's name and a gold ribbon, a navy countdown card; campus line drawings, books and a mortarboard, flowers and a diploma from the mockup. */
:root {
  --bg: #f5efe3; --bg2: #ebe2d0; --ink: #1d2742; --muted: #555d70; --accent: #b8913e; --accent2: #8e1b2c;
  --line: rgb(184 145 62 / .35);
  --card: #fffbf3; --card-line: #e3d6b8; --card-shadow: 0 8px 20px rgb(20 40 77 / .08); --radius: 12px;
  --btn-bg: linear-gradient(180deg, #a3263a, #7d1626); --btn-ink: #fbf3e4; --btn-line: transparent; --btn-shadow: 0 8px 18px rgb(125 22 38 / .3);
  --f-display: "Cinzel", Georgia, serif; --f-body: "Lora", Georgia, serif; --f-head: "Playfair Display", Georgia, serif; --f-num: "Playfair Display", Georgia, serif;
  --name-font: "Playfair Display", Georgia, serif; --name-size: clamp(1.45rem, 6.6vw, 1.85rem); --name-weight: 600; --name-color: #e9c977;
  --head-size: 1.5rem; --head-weight: 600; --head-color: #1d2742; --head-ink: #1d2742;
  --photo-radius: 0; --photo-border: 0; --photo-shadow: none;
  --navy: linear-gradient(180deg, #172d57, #14284d 50%, #10213f);
  --gate-bg: var(--navy); --gate-ink: #f3ead3; --guest-bg: rgb(16 33 63 / .8); --guest-line: rgb(217 180 95 / .6);
  --cd-title: #f3ead3; --cd-num: #fbf3e4; --cd-label: #cfd6e6;
  --cd-tile: rgb(255 255 255 / .06); --cd-tile-border: 1px solid rgb(217 180 95 / .75); --cd-tile-radius: 8px; --cd-tile-shadow: none;
  --dt-ic: #b8913e; --dt-ic-bg: transparent; --dt-label: #555d70; --av-bg: #ead9c0; --av-ink: #7a5a3a;
  --field-line: #e0d3b5;
  --gal-radius: 8px; --gal-shadow: 0 6px 14px rgb(20 40 77 / .12);
}
body { background: #efe7d6; }
.inv { background: linear-gradient(180deg, #f7f1e6, #f2eadb); }

/* Hero on navy: the photo before the hall fades into it */
.sec--hero { background: var(--navy); color: #f3ead3; padding-bottom: 92px; }
.phw .photo { -webkit-mask: linear-gradient(180deg, #000 72%, transparent); mask: linear-gradient(180deg, #000 72%, transparent); }
.phw--cover { --pw: auto; width: auto; margin: -28px -22px -36px; }
.phw--hero { --pw: auto; width: auto; margin: -34px -22px -40px; }
.ttl { position: relative; z-index: 2; gap: 2px; }

/* Title: small capitals, "WISUDA" between laurels, the university, a gold ribbon, the gold name */
.ttl__pre span { position: relative; font: 600 .7rem/1.4 var(--f-body); letter-spacing: .32em; text-transform: uppercase; color: #e3c06a; }
.ttl__kicker span { position: relative; padding: 0 42px; }
.ttl__kicker span::before, .ttl__kicker span::after { content: ""; position: absolute; top: -4px; width: 30px; height: 60px; background: url(../img/g03-laurel.svg) center / contain no-repeat; }
.ttl__kicker span::before { left: 0; } .ttl__kicker span::after { right: 0; transform: scaleX(-1); }
.ttl__kicker { margin-top: 6px; }
.ttl__kicker span { font: 700 3rem/1.1 var(--f-display); letter-spacing: .04em; color: #fbf3e4; text-shadow: 0 3px 8px rgb(0 0 0 / .45); }
.ttl__fact span { font: 400 1.35rem/1.2 var(--f-head); color: #fbf3e4; }
.ttl__tag { margin-top: 8px; }
.ttl__tag span { padding: 5px 44px 9px; background: url(../img/g03-ribbon.svg) center / 100% 100% no-repeat; font: 600 .9rem/1.2 var(--f-head); color: #14284d; }
.ttl .lead { color: #e2e6ef; font-size: .93rem; max-width: 310px; margin-top: 12px; }
.ttl__name { margin: 10px 0 0; }
.ttl .orn--capline svg { width: 150px; margin: 0 auto; color: #d9b45f; }
.ttl__facts { color: #e2e6ef; font-size: .92rem; margin-top: 2px; }
.gate__date, .side__date { color: #e3c06a; font-weight: 600; margin-top: 14px; }
.guest { color: #f3ead3; }

/* The countdown card rides over the edge between navy and parchment */
.sec--countdown { padding: 0 18px 92px; overflow: visible; z-index: 2; }
.sec--countdown .sec__in { margin-top: -72px; }
.cd-box { background: linear-gradient(180deg, #1b335f, #14284d); border: 1.5px solid #c9a24a; border-radius: 26px 26px 18px 18px; padding: 14px 12px 16px;
  box-shadow: inset 0 0 0 4px #14284d, inset 0 0 0 5px rgb(217 180 95 / .45), 0 16px 30px rgb(16 33 63 / .35); }
.cd__t { font: 600 1.1rem/1.3 var(--f-head); }
.cd__ic { color: #e3c06a; }
.cd { gap: 14px; }
.cd__c + .cd__c::before { content: ":"; position: absolute; left: -11px; top: 50%; transform: translateY(-60%); font: 600 1.4rem var(--f-num); color: #e3c06a; }
.cd__n { font-weight: 600; }
.sec--countdown .link--cal { color: #14284d; }

/* Headings between gold diamonds and lines */
.h-sec__t { gap: 12px; }
.h-sec__t::before, .h-sec__t::after { content: ""; width: 40px; height: 10px; flex: none; background: linear-gradient(45deg, transparent 42%, #b8913e 42% 58%, transparent 58%) right center / 10px 10px no-repeat,
  linear-gradient(-45deg, transparent 42%, #b8913e 42% 58%, transparent 58%) right center / 10px 10px no-repeat, linear-gradient(#c9b07a, #c9b07a) left center / 30px 1px no-repeat; }
.h-sec__t::after { transform: scaleX(-1); }
.h-sec__ic { color: #8e1b2c; }

/* Details: rows split by thin lines; the extra "Acara" row */
.dts { gap: 0; background: #fffbf3; border: 1px solid #e3d6b8; border-radius: 14px; padding: 4px 16px; box-shadow: var(--card-shadow); }
.dt { background: none; border: 0; box-shadow: none; border-radius: 0; padding: 12px 2px; }
.dt + .dt { border-top: 1px solid rgb(184 145 62 / .25); }
.dt__ic .ic { width: 26px; height: 26px; }
.link, .link--map, .link--cal { color: #8e1b2c; }

/* Gallery card, wishes */
.sec--gallery .sec__in { background: rgb(255 251 243 / .7); border: 1px solid #e3d6b8; border-radius: 14px; padding: 22px 12px 14px; }
.sec--wishes { padding-bottom: 180px; }
.wcomp { border-radius: 16px; }
.wish { border-color: #ebe1cb; }
.wish__av { color: #7a5a3a; }

/* Closing: the navy footer with the motto and the campus drawing */
.sec--closing { background: var(--navy); color: #f3ead3; padding: 46px 22px 110px; }
.sec--closing::before { content: ""; display: block; width: 56px; height: 34px; margin: 0 auto 6px; background: url(../img/g03-cap.svg) center / contain no-repeat; }
.closing__t span { color: #e9c977; }
.closing__p { color: #e2e6ef; }
.closing__p + .closing__p { font: italic 400 .95rem/1.5 var(--f-head); color: #e3c06a; letter-spacing: .02em; }
.closing__sign { color: #fbf3e4; font-family: var(--f-display); letter-spacing: .12em; text-transform: uppercase; font-size: .85rem; }
.made { color: #cfd6e6; }

/* ---------- Campus drawings, books and flowers from the mockup ---------- */
.o { filter: drop-shadow(0 6px 10px rgb(40 30 20 / .18)); }
.sec--countdown .deco { z-index: 1; }
.sec--countdown .o1 { left: -6px; bottom: 6px; width: 44vw; max-width: 172px; aspect-ratio: var(--ar-campus-l); background-image: url(../img/st-campus-l.webp); filter: none; opacity: .8; }
.sec--countdown .o2 { right: -6px; bottom: 6px; width: 44vw; max-width: 172px; aspect-ratio: var(--ar-campus-r); background-image: url(../img/st-campus-r.webp); filter: none; opacity: .8; }
.sec--wishes .o1 { left: 0; bottom: 0; width: 34vw; max-width: 136px; aspect-ratio: var(--ar-books); background-image: url(../img/books.webp); filter: none; }
.sec--wishes .o2 { right: -8px; bottom: 0; width: 26vw; max-width: 104px; aspect-ratio: var(--ar-flowers); background-image: url(../img/st-flowers.webp); }
.sec--closing .o1 { right: 0; bottom: 34px; width: 60vw; max-width: 240px; aspect-ratio: var(--ar-campus-f); background-image: url(../img/st-campus-f.webp); filter: none; opacity: .55; }

html:lang(en) .ttl__kicker span { font-size: 2.2rem; }

@media (min-width: 1024px) { .phw--side { --pw: auto; width: auto; margin: -36px -32px -40px; } }