/* G08 · Polaroid Memory Collage: fonts (SIL Open Font License 1.1, self-hosted) */
@font-face { font-family: "Satisfy"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/satisfy-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: "Kalam"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/kalam-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: "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: "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-sprig-r: 220 / 285; --sx-sprig-r: 923.5; --sy-sprig-r: 610.0; --sw-sprig-r: 161.5; --ar-flowers-bl: 160 / 230; --sx-flowers-bl: 0.0; --sy-flowers-bl: 1144.5; --sw-flowers-bl: 125.0; }
.phw { --cx0: 254; --cy0: 80; --cw: 251; --ch: 418; }

/* G08 · Polaroid Memory Collage: cream paper and maroon, the graduate in a taped polaroid among smaller ones (then, friends, the thesis team),
   a handwritten "Wisuda Sarjana", the name on a maroon brush banner, paper-card countdown, a note card quote, torn edges;
   dried flowers from the mockup. Polaroid captions are live text. */
:root {
  --bg: #f3e9da; --bg2: #eadcc6; --ink: #3e2a22; --muted: #6e5546; --accent: #7a2e33; --accent2: #c9a27a;
  --line: rgb(122 46 51 / .2);
  --card: #fbf5ea; --card-line: #e6d6bc; --card-shadow: 0 8px 18px rgb(80 50 30 / .12); --radius: 12px;
  --btn-bg: linear-gradient(180deg, #8a3a3f, #6a2529); --btn-ink: #fbf1e3; --btn-line: transparent; --btn-shadow: 0 8px 18px rgb(106 37 41 / .3);
  --f-display: "Satisfy", cursive; --f-script: "Kalam", cursive; --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: 1.15rem; --name-weight: 600; --name-style: italic; --name-color: #fbf1e3;
  --head-size: 1.5rem; --head-weight: 600; --head-style: italic; --head-color: #6a2529; --head-ink: #6a2529;
  --photo-radius: 0; --photo-border: 0; --photo-shadow: none;
  --paper: url(../img/g08-lines.svg), radial-gradient(120% 70% at 50% 30%, #f7efe2, #efe2cd 75%, #e6d5bc);
  --gate-bg: var(--paper); --guest-bg: #fbf5ea; --guest-line: #e6d6bc;
  --cd-title: #6a2529; --cd-num: #6a2529; --cd-label: #7d6556;
  --cd-tile: #fbf5ea; --cd-tile-border: 1px solid #eadcc6; --cd-tile-radius: 6px; --cd-tile-shadow: 0 6px 12px rgb(80 50 30 / .14);
  --dt-ic: #7a2e33; --dt-ic-bg: transparent; --dt-label: #3e2a22; --av-bg: #ead8c4; --av-ink: #7a2e33;
  --map-ink: #6a2529; --map-line: #e0cdb0;
  --gal-border: 0; --gal-radius: 2px; --gal-shadow: 0 6px 14px rgb(60 30 20 / .25);
}
body { background: #ebdfcc; }
.inv { background: var(--paper); }

/* The main polaroid: white frame, deep bottom, tape, a slight tilt */
.phw { padding: 10px 10px 34px; background: #fffdf8; box-shadow: 0 14px 28px rgb(60 30 20 / .28); transform: rotate(-2deg); }
.phw .photo { border-radius: 0; }
.phw::before { content: ""; left: 50%; top: -12px; width: 90px; height: 26px; margin-left: -45px; background: rgb(233 214 170 / .8); transform: rotate(3deg); z-index: 3;
  box-shadow: 0 1px 2px rgb(0 0 0 / .12); }
.phw--cover { --pw: min(54vw, 210px); margin: 10px auto 22px; }
.phw--hero { --pw: min(58vw, 230px); margin: 10px auto 24px; }

/* Title: small capitals, the handwritten "Wisuda Sarjana", the maroon banner */
.ttl__pre b { display: block; font: 600 .78rem/1.35 var(--f-head); letter-spacing: .2em; text-transform: uppercase; color: #6a2529; }
.ttl__kicker { position: relative; margin-top: 2px; }
.ttl__kicker b { display: block; font: 400 3.4rem/.95 var(--f-display); color: #6a2529; transform: rotate(-4deg); }
.ttl__kicker b:last-child { margin-left: 40px; }
.ttl__kicker::after { content: "\2661"; position: absolute; right: -22px; top: 6px; font: 400 1.6rem/1 var(--f-script); color: #6a2529; transform: rotate(12deg); }
.ttl .lead { color: #4e382c; font-size: .93rem; max-width: 300px; margin-top: 10px; }
.ttl__name { margin: 12px 0 2px; filter: drop-shadow(0 6px 10px rgb(60 30 20 / .25)); }
.ttl__name span { padding: 8px 44px 11px; background: url(../img/g08-banner.svg) center / 100% 100% no-repeat; }
.ttl__facts { color: #3e2a22; font-size: .92rem; }
.gate__date, .side__date { color: #6a2529; font-weight: 600; margin-top: 14px; }

/* Torn paper edges between the parts */
.sec--countdown::before, .sec--gallery::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 18px; background: url(../img/g08-torn.svg) center / 100% 100% no-repeat; transform: scaleY(-1); opacity: .9; }

/* Countdown: paper cards, slightly askew */
.sec--countdown { padding-top: 36px; }
.cd__t { font: italic 600 1.25rem/1.3 var(--f-head); gap: 12px; }
.cd__t::before, .cd__t::after { content: ""; width: 24px; height: 1px; background: #6a2529; }
.cd__c { padding: 10px 0 8px; }
.cd__c:nth-child(odd) { transform: rotate(-2deg); } .cd__c:nth-child(even) { transform: rotate(2deg); }
.cd__n { font-weight: 600; }
.sec--countdown .link--cal { color: #6a2529; }

/* Details */
.dts { gap: 0; }
.dt { background: none; border: 0; box-shadow: none; border-radius: 0; padding: 10px 2px; }
.dt + .dt { border-top: 1px dashed rgb(122 46 51 / .25); }
.link, .link--map, .link--cal { color: #6a2529; }

/* The quote on a taped note card */
.sec--prayer { padding: 16px 26px 34px; }
.prayer { position: relative; max-width: 290px; padding: 24px 22px 40px; background: #fbf3e2; box-shadow: 0 10px 20px rgb(60 30 20 / .15); transform: rotate(2deg);
  font: 400 1.15rem/1.55 var(--f-script); color: #5a2a24; quotes: "\201C" "\201D"; }
.prayer::after { content: ""; position: absolute; right: 16px; bottom: 10px; width: 44px; height: 30px; background: url(../img/g08-cap.svg) center / contain no-repeat; }
.sec--prayer .sec__in::before { content: ""; position: absolute; left: 50%; top: -10px; z-index: 2; width: 80px; height: 22px; margin-left: -40px; background: rgb(233 214 170 / .85); transform: rotate(-4deg); }

/* Gallery: little polaroids */
.sec--gallery { padding-top: 40px; }
.gallery { gap: 12px; }
.gallery__item { background: #fffdf8; padding: 5px 5px 16px; }
.gallery__item img { border-radius: 0; }
.gallery__item:nth-child(odd) { transform: rotate(-1.5deg); } .gallery__item:nth-child(even) { transform: rotate(1.5deg); }
.h-sec__ic { color: #7a2e33; }
.h-sec__sub { font-style: italic; }

/* Wishes on a maroon band with a torn top */
.sec--wishes { background: linear-gradient(180deg, #6e2b2b, #5e2225); color: #fbf1e3; padding-top: 62px; padding-bottom: 120px; }
.sec--wishes::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 22px; background: url(../img/g08-torn.svg) center / 100% 100% no-repeat; transform: scaleY(-1); }
.sec--wishes .h-sec__t { color: #fbf1e3; }
.sec--wishes .h-sec__ic { color: #f1d9b0; }
.sec--wishes .h-sec__sub, .sec--wishes .wishes__n { color: #f1e1c8; }
.wcomp, .wish { color: #3e2a22; }
.wish { background: #fbf5ea; }

/* Closing with the camera doodle */
.sec--closing { padding: 44px 22px 60px; }
.sec--closing::before { content: ""; display: block; width: 46px; height: 36px; margin: 0 auto 6px; background: url(../img/g08-camera.svg) center / contain no-repeat; }
.closing__t span { font: 400 2.8rem/1.1 var(--f-display); color: #6a2529; font-style: normal; }

/* ---------- Small polaroids (opening.polaroids) and dried flowers from the mockup ---------- */
.pol figcaption { font: 400 .74rem/1.2 var(--f-script); color: #4e2e24; }
.pols--top .pol--1 { left: -14px; top: 26px; width: 26vw; max-width: 104px; aspect-ratio: 104 / 132; transform: rotate(-7deg); }
.pols--top .pol--2 { right: -16px; top: 12px; width: 30vw; max-width: 120px; aspect-ratio: 120 / 104; transform: rotate(6deg); }
.pols--top .pol--2 figcaption { font-size: .64rem; }
.pols--top .pol--3 { right: -18px; top: 196px; width: 30vw; max-width: 120px; aspect-ratio: 120 / 98; transform: rotate(-4deg); }
.sec--hero .pols--top .pol--1 { top: 10px; } .sec--hero .pols--top .pol--2 { top: -4px; } .sec--hero .pols--top .pol--3 { top: 186px; }
.pols--details { position: relative; inset: auto; display: grid; justify-items: center; margin-bottom: 22px; }
.pols--details .pol { position: relative; width: min(56vw, 220px); aspect-ratio: 220 / 160; transform: rotate(-3deg); }
.phw, .ttl { z-index: 2; }
.sec--details .o2 { right: -12px; top: 6px; width: 30vw; max-width: 120px; aspect-ratio: var(--ar-sprig-r); background-image: url(../img/st-sprig-r.webp); }
.sec--wishes .o1 { left: -6px; bottom: 0; width: 24vw; max-width: 96px; aspect-ratio: var(--ar-flowers-bl); background-image: url(../img/st-flowers-bl.webp); }

html:lang(en) .ttl__kicker b { font-size: 2.9rem; }

@media (min-width: 1024px) { .phw--side { --pw: min(16vw, 220px); } #side .pols--top .pol--1 { left: 4%; top: 12%; width: 120px; } #side .pols--top .pol--2 { right: 4%; top: 8%; width: 140px; } #side .pols--top .pol--3 { right: 6%; top: 34%; width: 140px; } }