/* G07 · Cinematic Golden Hour: fonts (SIL Open Font License 1.1, self-hosted) */
@font-face { font-family: "Great Vibes"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/great-vibes-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: "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-trees-l: 460 / 163; --ar-trees-r: 440 / 169; }
.phw { --cx0: 10; --cy0: 45; --cw: 575; --ch: 555; }

/* G07 · Cinematic Golden Hour: the graduate in the sunset, warm browns and gold, a gold "Wisuda" in script with the name on a gold banner,
   a translucent countdown, a wave into warm cream; the tree silhouettes of the mockup's evening band frame the quote. */
:root {
  --bg: #f8efe2; --bg2: #f0e2cc; --ink: #3d2614; --muted: #6e5238; --accent: #b98a3c; --accent2: #3a2412;
  --line: rgb(185 138 60 / .3);
  --card: rgb(255 251 243 / .85); --card-line: #ecdcc0; --card-shadow: 0 10px 24px rgb(90 60 20 / .1); --radius: 14px;
  --btn-bg: linear-gradient(180deg, #f2cf7c, #d9a948 55%, #b8862e); --btn-ink: #3a2412; --btn-line: #f7dfa0; --btn-shadow: 0 8px 20px rgb(150 100 30 / .3);
  --f-display: "Great Vibes", 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.2rem; --name-weight: 600; --name-style: italic; --name-color: #3a2412;
  --head-size: 1.55rem; --head-weight: 600; --head-style: italic; --head-color: #5a3418; --head-ink: #5a3418;
  --photo-radius: 0; --photo-border: 0; --photo-shadow: none;
  --dusk: linear-gradient(180deg, #2a1a0e, #3a2412 40%, #5a3418 80%, #6e4320);
  --gate-bg: var(--dusk); --gate-ink: #f6e8cf; --guest-bg: rgb(42 26 14 / .75); --guest-line: rgb(233 196 120 / .6);
  --cd-title: #f6e8cf; --cd-num: #fbe7b4; --cd-label: #e6d2ae;
  --cd-tile: rgb(255 255 255 / .06); --cd-tile-border: 1px solid rgb(233 196 120 / .7); --cd-tile-radius: 10px; --cd-tile-shadow: none;
  --dt-ic: #b98a3c; --dt-ic-bg: transparent; --dt-label: #5a3418; --av-bg: #f0dfc2; --av-ink: #8a5a24;
  --map-ink: #5a3418; --map-line: #e2cfa8;
  --gal-radius: 14px; --gal-shadow: 0 10px 20px rgb(90 60 20 / .18);
}
body { background: #f3e6d2; }
.inv { background: linear-gradient(180deg, #faf2e6, #f6ead7); }

/* The graduate in the sunset, fading into dusk */
.sec--hero { background: var(--dusk); color: #f6e8cf; padding-bottom: 20px; }
.phw .photo { -webkit-mask: linear-gradient(180deg, #000 74%, transparent); mask: linear-gradient(180deg, #000 74%, transparent); }
.phw--cover { --pw: auto; width: auto; margin: -28px -22px -44px; }
.phw--hero { --pw: auto; width: auto; margin: -34px -22px -48px; }
.ttl { position: relative; z-index: 2; gap: 2px; }

/* Title */
.ttl .orn--cap svg { width: 70px; margin: 0 auto; color: #e9c478; }
.ttl__pre b { display: block; font: 400 1.05rem/1.35 var(--f-body); color: #f6e8cf; }
.ttl__kicker span { font: 400 4.2rem/1 var(--f-display); padding: 0 .12em; background: linear-gradient(180deg, #fff1c8, #edc66e 50%, #c18c33); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 3px 6px rgb(0 0 0 / .45)); }
.ttl__name { margin: 4px 0 4px; filter: drop-shadow(0 6px 10px rgb(0 0 0 / .35)); }
.ttl__name span { padding: 8px 46px 11px; background: url(../img/g07-banner.svg) center / 100% 100% no-repeat; }
.ttl .lead { color: #efdfc2; font-size: .93rem; max-width: 310px; }
.ttl .orn--heart svg { width: 120px; margin: 8px auto 0; color: #e9c478; }
.gate__date, .side__date { color: #e9c478; font-weight: 600; margin-top: 14px; }
.guest { color: #f6e8cf; }

/* Countdown on the dusk, then a wave into cream */
.sec--countdown { background: linear-gradient(180deg, #6e4320, #7a4c24); color: #f6e8cf; padding: 16px 18px 70px; }
.sec--countdown::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 44px; background: url(../img/g07-wave.svg) center / 100% 100% no-repeat; }
.cd-box { background: rgb(42 26 14 / .45); border: 1px solid rgb(233 196 120 / .55); border-radius: 16px; padding: 12px 12px 14px; backdrop-filter: blur(2px); }
.cd__t { font: 400 1rem/1.3 var(--f-body); }
.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: #e9c478; }
.cd__n { font-weight: 600; }
.sec--countdown .link--cal { color: #fbe7b4; position: relative; z-index: 2; }

/* Headings: italic serif between laurel sprigs */
.h-sec__t { gap: 10px; }
.h-sec__t::before, .h-sec__t::after { content: ""; width: 16px; height: 28px; flex: none; background: url(../img/g07-laurel.svg) center / contain no-repeat; }
.h-sec__t::after { transform: scaleX(-1); }
.h-sec__ic { color: #b98a3c; }

/* Details */
.dts { gap: 0; background: rgb(255 251 243 / .7); border: 1px solid #ecdcc0; border-radius: 16px; 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 #efe1c9; }
.link, .link--map, .link--cal { color: #5a3418; }

/* The quote between the evening trees */
.sec--prayer { padding: 26px 22px 30px; background: linear-gradient(180deg, transparent, #f3e2c8 30%, #f3e2c8 70%, transparent); }
.prayer { font: italic 500 1.08rem/1.6 var(--f-head); color: #4a2e16; quotes: "\201C" "\201D"; max-width: 300px; }
.sec--prayer .orn--div svg { width: 130px; margin: 12px auto 0; color: #8a5a24; }

/* Wishes */
.wish { border-color: #efe1c9; }
.wish__av { font-family: var(--f-head); }

/* Closing on the dusk */
.sec--closing { background: var(--dusk); color: #f6e8cf; padding: 50px 22px 64px; }
.closing__t span { font: 400 3rem/1.1 var(--f-display); color: #edc66e; font-style: normal; }
.sec--closing .orn--div svg { color: #e9c478; }
.closing__p, .closing__sign, .made { color: #efdfc2; }

/* ---------- The evening trees from the mockup ---------- */
.sec--prayer .o1 { left: 0; top: 0; bottom: 0; width: 48%; background-image: url(../img/trees-l.webp); background-size: cover; background-position: left center; opacity: .55; }
.sec--prayer .o2 { right: 0; top: 0; bottom: 0; width: 48%; background-image: url(../img/trees-r.webp); background-size: cover; background-position: right center; opacity: .55; }

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

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