/* G02 · Royal Navy Academic: fonts (SIL Open Font License 1.1, self-hosted) */
@font-face { font-family: "Playfair Display"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/playfair-display-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: italic; font-weight: 600; font-display: swap; src: url("../fonts/playfair-display-latin-600-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: "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: "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-ribbon-r: 300 / 127; --sx-ribbon-r: 907.0; --sy-ribbon-r: 378.0; --sw-ribbon-r: 215.0; --ar-ribbon-bl: 240 / 149; --sx-ribbon-bl: 0.0; --sy-ribbon-bl: 1314.75; --sw-ribbon-bl: 141.0; --ar-ribbon-br: 240 / 124; --sx-ribbon-br: 976.25; --sy-ribbon-br: 1326.75; --sw-ribbon-br: 145.75; }
.phw { --cx0: 40; --cy0: 52; --cw: 570; --ch: 416; }

/* G02 · Royal Navy Academic: deep navy and gold above, cream parchment below; the graduate's photo, a gold laurel and cap,
   "Undangan Wisuda" in gold serif, the name on a gold-tailed plaque, a navy countdown band between laurels; gold ribbons from the mockup. */
:root {
  --bg: #f6f0e2; --bg2: #ece3cf; --ink: #1d2742; --muted: #4f5874; --accent: #c49b4a; --accent2: #0f1f45;
  --line: rgb(196 155 74 / .35);
  --card: #fffaf0; --card-line: #e2cfa0; --card-shadow: 0 10px 24px rgb(15 31 69 / .1); --radius: 14px;
  --btn-bg: linear-gradient(180deg, #f6dc8e, #d9b45f 55%, #b8913e); --btn-ink: #13203f; --btn-line: #f2dfa4; --btn-shadow: 0 8px 20px rgb(15 31 69 / .25);
  --f-display: "Playfair Display", 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.15rem, 5.4vw, 1.45rem); --name-weight: 600; --name-color: #13203f;
  --head-size: 1.55rem; --head-weight: 600; --head-color: #13203f; --head-ink: #13203f;
  --photo-radius: 0; --photo-border: 0; --photo-shadow: none;
  --navy: radial-gradient(110% 60% at 50% 0, #1b3266, #0f1f45 60%, #0b1736);
  --gate-bg: var(--navy); --gate-ink: #f3ead3; --guest-bg: rgb(11 23 54 / .75); --guest-line: rgb(217 180 95 / .6);
  --cd-title: #f3ead3; --cd-num: #f6e3a6; --cd-label: #d6cdb3;
  --cd-tile: rgb(11 23 54 / .6); --cd-tile-border: 1px solid rgb(217 180 95 / .8); --cd-tile-radius: 10px; --cd-tile-shadow: none;
  --dt-ic: #c49b4a; --dt-ic-bg: transparent; --dt-label: #13203f; --av-bg: #e9dfc6; --av-ink: #13203f;
  --map-ink: #13203f; --map-line: #d9c48c;
  --gal-border: 2px solid #fffaf0; --gal-radius: 12px; --gal-shadow: 0 0 0 1px #d9c48c, 0 10px 20px rgb(15 31 69 / .15);
}
body { background: #ede4cf; }
.inv { background: linear-gradient(180deg, #f8f2e5, #f3ead8); }

/* Hero on navy: the photo fades into it */
.sec--hero { background: var(--navy); color: #f3ead3; padding-bottom: 30px; }
.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 -40px; }
.phw--hero { --pw: auto; width: auto; margin: -34px -22px -44px; }
.ttl { position: relative; z-index: 2; }

/* Title */
.ttl .orn--cap svg { width: 84px; margin: 0 auto 2px; color: #d9b45f; }
.ttl__kicker b { display: block; font: italic 600 2rem/1.05 var(--f-display); background: linear-gradient(180deg, #fbe9b0, #e3c06a 55%, #b8913e); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ttl__kicker b:last-child { font: 700 3.1rem/1 var(--f-display); }
.ttl__tag span { font: 600 .72rem/1.4 var(--f-body); letter-spacing: .3em; text-transform: uppercase; color: #f3ead3; }
.ttl .orn--div svg { width: 120px; margin: 6px auto 0; color: #d9b45f; }
.ttl .lead { color: #e7dfc8; font-size: .93rem; max-width: 300px; }
.ttl__name { margin: 12px 0 4px; filter: drop-shadow(0 6px 12px rgb(0 0 0 / .35)); }
.ttl__name span { padding: 10px 48px 13px; background: url(../img/g02-plaque.svg) center / 100% 100% no-repeat; }
.ttl__facts { color: #e7dfc8; font-size: .92rem; }
.gate__date, .side__date { color: #e3c06a; font-weight: 600; margin-top: 14px; }
.guest { color: #f3ead3; }

/* The countdown band: navy, between laurels */
.sec--countdown { background: linear-gradient(180deg, #0f1f45, #13285a); color: #f3ead3; padding: 22px 18px 24px; border-top: 1px solid rgb(217 180 95 / .5); border-bottom: 2px solid #c49b4a; }
.cd-box { position: relative; padding: 0 30px; }
.cd-box::before, .cd-box::after { content: ""; position: absolute; top: 32px; width: 26px; height: 50px; background: url(../img/g02-laurel.svg) center / contain no-repeat; }
.cd-box::before { left: 0; } .cd-box::after { right: 0; transform: scaleX(-1); }
.cd__t { font: 600 .82rem/1.3 var(--f-body); letter-spacing: .24em; text-transform: uppercase; gap: 12px; }
.cd__t::before, .cd__t::after { content: ""; width: 26px; height: 1px; background: #d9b45f; }
.cd { gap: 8px; }
.cd__n { font-weight: 600; font-size: 1.85rem; }
.sec--countdown .link--cal { color: #e3c06a; }

/* Details on a cream card with a double gold edge */
.dts { gap: 0; background: #fffaf0; border: 1px solid #d9c48c; border-radius: 16px; padding: 4px 14px; box-shadow: inset 0 0 0 4px #fffaf0, inset 0 0 0 5px rgb(196 155 74 / .45), var(--card-shadow); }
.dt { flex-direction: column; text-align: center; gap: 4px; background: none; border: 0; box-shadow: none; border-radius: 0; padding: 14px 4px; }
.dt + .dt { border-top: 1px solid rgb(196 155 74 / .3); }
.dt__ic { width: 30px; height: 30px; }
.dt__l { font-weight: 600; color: #4f5874; }
.dt__v strong { font-weight: 700; }
.h-sec__ic { color: #c49b4a; }
.h-sec__t { gap: 10px; }
.btn--cta { font-weight: 700; }
.link, .link--map, .link--cal { color: #13203f; }

/* Gallery and wishes on cream */
.wcomp, .wish { border-color: #e6d6ad; }
.wish__av { font-family: var(--f-head); }

/* Closing: navy with gold ribbons in the corners */
.sec--closing { background: var(--navy); color: #f3ead3; padding: 52px 22px 96px; border-top: 2px solid #c49b4a; }
.sec--closing::before { content: ""; display: block; width: 84px; height: 37px; margin: 0 auto 4px; background: url(../img/g02-cap.svg) center / contain no-repeat; }
.closing__t span { color: #e9c977; font-size: 2rem; }
.closing__p, .closing__sign, .made { color: #e7dfc8; }

/* ---------- Gold ribbons from the mockup ---------- */
.o { filter: drop-shadow(0 6px 10px rgb(0 0 0 / .3)); }
.sec--hero .deco, .gate__in > .deco { z-index: 1; }
.gate__in .o1, .side__in .o1 { right: -24px; bottom: 120px; width: 50vw; max-width: 200px; aspect-ratio: var(--ar-ribbon-r); background-image: url(../img/st-ribbon-r.webp); opacity: .9; }
.sec--hero .o1 { right: -24px; bottom: 6px; width: 50vw; max-width: 200px; aspect-ratio: var(--ar-ribbon-r); background-image: url(../img/st-ribbon-r.webp); opacity: .9; }
.sec--closing .o1 { left: 0; bottom: 0; width: 42vw; max-width: 170px; aspect-ratio: var(--ar-ribbon-bl); background-image: url(../img/st-ribbon-bl.webp); }
.sec--closing .o2 { right: 0; bottom: 0; width: 42vw; max-width: 170px; aspect-ratio: var(--ar-ribbon-br); background-image: url(../img/st-ribbon-br.webp); }

html:lang(en) .ttl__kicker b:first-child { font-size: 1.7rem; }
html:lang(en) .ttl__kicker b:last-child { font-size: 2.5rem; }

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