/* K09 · Dinosaur Explorer: fonts (SIL Open Font License 1.1, self-hosted) */
@font-face { font-family: "Titan One"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/titan-one-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: "Baloo 2"; font-style: normal; font-weight: 800; font-display: swap; src: url("../fonts/baloo-2-latin-800-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: "Baloo 2"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/baloo-2-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: "Baloo 2"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/baloo-2-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; }

/* sticker geometry (mockup pixels) and proportions, made by build.py */
:root { --ar-trex: 300 / 193; --sx-trex: 0.0; --sy-trex: 81.25; --sw-trex: 262.0; --ar-trice: 240 / 365; --sx-trice: 976.0; --sy-trice: 367.75; --sw-trice: 146.0; --ar-brachio: 220 / 267; --sx-brachio: 997.75; --sy-brachio: 187.25; --sw-brachio: 124.25; --ar-ptero: 200 / 138; --sx-ptero: 401.75; --sy-ptero: 87.5; --sw-ptero: 85.0; --ar-egg: 260 / 182; --sx-egg: 923.25; --sy-egg: 680.25; --sw-egg: 190.75; --ar-skull: 160 / 128; --sx-skull: 339.5; --sy-skull: 1062.75; --sw-skull: 66.75; }
.phw { --cx0: 0; --cy0: 70; --cw: 490; --ch: 515; }

/* K09 · Dinosaur Explorer: a soft jungle backdrop, a wooden title sign, a parchment ribbon and torn-paper name banner, leafy green countdown,
   wooden plank headings, parchment panels and orange buttons. The T-rex, triceratops, brachiosaurus, pterosaurs, egg and skull come from the mockup. */
:root {
  --bg: #1d4a20; --bg2: #f2e4c6; --ink: #fbf3e2; --muted: #e2ecd4; --accent: #e8701a; --accent2: #6aa83f;
  --line: rgb(242 228 198 / .3);
  --card: #f6ead0; --card-line: #c9a46a; --card-shadow: 0 8px 18px rgb(0 0 0 / .28); --radius: 16px;
  --btn-bg: linear-gradient(180deg, #f39035, #d9600f); --btn-ink: #fff; --btn-line: #ffb46b; --btn-shadow: 0 4px 0 #9c4208, 0 10px 18px rgb(0 0 0 / .3);
  --f-display: "Titan One", "Baloo 2", system-ui, sans-serif; --f-body: "Baloo 2", system-ui, sans-serif; --f-head: "Baloo 2", system-ui, sans-serif; --f-num: "Baloo 2", system-ui, sans-serif;
  --name-font: "Baloo 2", system-ui, sans-serif; --name-size: clamp(1.25rem, 5.8vw, 1.6rem); --name-weight: 800; --name-color: #23502a;
  --head-size: 1.4rem; --head-weight: 800; --head-color: #fbeed2;
  --photo-radius: 18px; --photo-border: 5px solid #f2e4c6; --photo-shadow: 0 0 0 3px #6b4220, 0 14px 26px rgb(0 0 0 / .45);
  --jungle: linear-gradient(180deg, rgb(12 34 14 / .45), rgb(12 34 14 / .62)), url(../img/bg.webp) center / cover, #1f4d22;
  --gate-bg: var(--jungle); --gate-ink: #fff; --guest-bg: #f6ead0; --guest-line: #8a5a2b;
  --cd-title: #fff; --cd-num: #f39035; --cd-label: #f6ead0; --cd-tile: linear-gradient(180deg, #24572a, #173f1b); --cd-tile-border: 2px solid #a9cf7e; --cd-tile-radius: 12px; --cd-tile-shadow: inset 0 0 8px rgb(0 0 0 / .35);
  --dt-ic: #e8701a; --dt-ic-bg: transparent; --dt-label: #23502a; --av-bg: #8a5a2b; --av-ink: #f6ead0;
  --field-bg: #fffaf0; --field-line: #c9a46a; --field-ink: #3a2a14;
  --map-bg: #fffaf0; --map-ink: #8a4a12; --map-line: #c9a46a;
  --gal-border: 5px solid #f2e4c6; --gal-shadow: 0 8px 16px rgb(0 0 0 / .4); --gal-radius: 6px;
  --wood: url(../img/k09-wood.svg) 0 0 / 320px 60px, linear-gradient(180deg, #9a6532, #7a4c22 60%, #663c18);
}
body { background: #143518; }
.inv { background: linear-gradient(180deg, #23562a, #1a4520 40%, #163a19 70%, #12301a); color: var(--ink); }

/* Hero on the jungle */
.sec--hero { background: var(--jungle); padding-bottom: 46px; }
.phw--cover { --pw: min(62vw, 250px); margin: 10px auto 18px; }
.phw--hero { --pw: min(70vw, 280px); margin: 8px auto 18px; }
.ttl .lead { color: #fff; text-shadow: 0 1px 3px rgb(0 0 0 / .7); }

/* Title: the wooden sign, the "Dinosaur Explorer" ribbon, the name on torn paper with orange tracks */
.ttl__kicker { position: relative; margin-top: 2px; }
.ttl__kicker span { position: relative; padding: 12px 24px 14px; background: var(--wood); border: 3px solid #4a2a10; border-radius: 14px;
  box-shadow: inset 0 0 0 2px rgb(255 220 170 / .18), 0 8px 18px rgb(0 0 0 / .45); }
.ttl__kicker b { display: block; font: 400 2.35rem/1.08 var(--f-display); color: #f8ecd2; letter-spacing: .01em;
  text-shadow: 2px 0 0 #4a2a10, -2px 0 0 #4a2a10, 0 2px 0 #4a2a10, 0 -2px 0 #4a2a10, 1.5px 1.5px 0 #4a2a10, -1.5px 1.5px 0 #4a2a10, 1.5px -1.5px 0 #4a2a10, -1.5px -1.5px 0 #4a2a10, 0 4px 0 #3a200b; }
.ttl__kicker b:last-child { font-size: 2.6rem; }
.ttl__kicker::before, .ttl__kicker::after { content: ""; position: absolute; z-index: 2; width: 70px; aspect-ratio: 70 / 40; background: url(../img/k09-leaf.svg) center / contain no-repeat; }
.ttl__kicker::before { left: -26px; top: 30%; transform: rotate(-110deg) scaleX(-1); }
.ttl__kicker::after { right: -20px; top: -14px; transform: rotate(-30deg); }
.ttl__theme { margin-top: -6px; position: relative; z-index: 3; }
.ttl .ttl__theme span { display: inline-flex; align-items: center; gap: 6px; padding: 3px 14px; background: linear-gradient(180deg, #fbf1d9, #ecd7ac); border: 2px solid #8a5a2b; border-radius: 6px;
  color: #e8701a; font: 800 .92rem/1.4 var(--f-body); text-transform: uppercase; letter-spacing: .06em; box-shadow: 0 4px 10px rgb(0 0 0 / .35); }
.ttl__theme span::before, .ttl__theme span::after { content: ""; width: 14px; height: 16px; background: url(../img/k09-track.svg) center / contain no-repeat; }
.ttl__theme span::before { transform: rotate(-24deg); } .ttl__theme span::after { transform: rotate(24deg); }
.ttl__name { margin: 14px 0 2px; filter: drop-shadow(0 6px 10px rgb(0 0 0 / .45)); }
.ttl .ttl__name span { display: inline-flex; align-items: center; gap: 10px; padding: 12px 22px 10px; background: url(../img/k09-torn.svg) center / 100% 100% no-repeat; }
.ttl__name span::before, .ttl__name span::after { content: ""; flex: none; width: 20px; height: 23px; background: url(../img/k09-track.svg) center / contain no-repeat; }
.ttl__name span::before { transform: rotate(-28deg); } .ttl__name span::after { transform: rotate(28deg); }
.gate__date, .side__date { display: inline-block; margin-top: 16px; padding: 5px 16px; border-radius: 8px; background: rgb(18 48 20 / .75); border: 1.5px solid #a9cf7e; color: #fff; }
.guest { color: #3a2a14; box-shadow: 0 8px 18px rgb(0 0 0 / .35); }
.guest__l, .guest__s { opacity: .85; }

/* Wooden plank headings */
.h-sec__t { padding: 6px 22px 4px; background: var(--wood); border: 2.5px solid #4a2a10; border-radius: 8px; color: #fbeed2;
  box-shadow: inset 0 0 0 2px rgb(255 220 170 / .15), 0 6px 14px rgb(0 0 0 / .4); text-shadow: 0 2px 0 #3a200b; }
.h-sec__ic { color: #f6b26b; }
.h-sec__sub { color: #f2ecd9; }

/* Countdown: a leafy green panel */
.sec--countdown { padding-top: 40px; }
.cd-box { position: relative; padding: 18px 12px 20px; background: linear-gradient(180deg, #2f6e2c, #1d4d1f); border: 3px solid #6aa83f; border-radius: 22px; box-shadow: 0 10px 22px rgb(0 0 0 / .4); }
.cd-box::before, .cd-box::after { content: ""; position: absolute; bottom: -12px; width: 76px; aspect-ratio: 70 / 40; background: url(../img/k09-leaf.svg) center / contain no-repeat; }
.cd-box::before { left: -26px; transform: rotate(-150deg) scaleY(-1); } .cd-box::after { right: -26px; transform: rotate(-30deg); }
.cd__t { font: 800 1.15rem/1.2 var(--f-head); }
.cd__n { font: 800 2rem/1.05 var(--f-num); }
.cd__l { font-weight: 600; }
.sec--countdown .link--cal { color: #ffd0a0; }

/* Details on torn parchment */
.dts { gap: 0; padding: 22px 24px; background: url(../img/k09-torn.svg) center / 100% 100% no-repeat; filter: drop-shadow(0 8px 14px rgb(0 0 0 / .4)); color: #3a2a14; }
.dt { background: none; border: 0; box-shadow: none; border-radius: 0; padding: 10px 0; }
.dt + .dt { border-top: 1.5px dashed rgb(138 90 43 / .35); }
.dt__ic .ic { width: 28px; height: 28px; stroke-width: 1.9; }
.dt__l { font-weight: 800; font-size: .9rem; }
.dt__v small { color: #6b5232; }
.link { color: #ffcf96; }
.sec--details .link--map { color: #ffcf96; }

/* Gallery band */
.sec--gallery { background: linear-gradient(180deg, #1c4a1f, #143a17); border-top: 4px solid #2f6e2c; border-bottom: 4px solid #2f6e2c; }
.sec--gallery .h-sec__t { background: none; border: 0; box-shadow: none; color: #fbeed2; font-size: 1.6rem; padding: 0; gap: 12px; }
.sec--gallery .h-sec__t::before, .sec--gallery .h-sec__t::after { content: ""; width: 22px; height: 25px; background: url(../img/k09-track.svg) center / contain no-repeat; }
.sec--gallery .h-sec__t::before { transform: rotate(-24deg); } .sec--gallery .h-sec__t::after { transform: rotate(24deg); }
.sec--gallery .h-sec__ic { display: none; }
.gallery__item:nth-child(odd) { transform: rotate(-1.2deg); } .gallery__item:nth-child(even) { transform: rotate(1.2deg); }
.hint { color: #d9e6c8; }

/* Wishes and RSVP on parchment */
.sec--wishes { background: linear-gradient(180deg, rgb(12 34 14 / .2), rgb(12 34 14 / .5)), linear-gradient(180deg, #24572a, #173f1b); }
.sec--wishes .h-sec { position: relative; }
.sec--wishes .h-sec__t::before { content: ""; position: absolute; left: -46px; top: 50%; width: 58px; aspect-ratio: var(--ar-skull); transform: translateY(-50%) rotate(-8deg);
  background: url(../img/st-skull.webp) center / contain no-repeat; filter: drop-shadow(0 4px 6px rgb(0 0 0 / .45)); }
.sec--wishes .h-sec__t { position: relative; }
.wcomp, .wish, .card.form, .rsvp-done { color: #3a2a14; }
.wish { background: linear-gradient(180deg, #fbf1dc, #f1e1bf); border-color: #c9a46a; }
.wish__ago, .field em, .field small { color: #6b5232; }
.wishes__n { color: #e2ecd4; }
.tag--no { background: #e7d6b2; color: #6b5232; }
.lead--rsvp { color: #f2ecd9; }
.sec--rsvp .h-sec__sub { color: #f2ecd9; }
.rsvp-done .link { color: #b25a12; }

/* Closing back on the jungle */
.sec--closing { background: var(--jungle); padding-bottom: 200px; }
.closing__t span { padding: 8px 24px 6px; background: var(--wood); border: 3px solid #4a2a10; border-radius: 12px; font: 400 2.3rem/1.1 var(--f-display); color: #f8ecd2;
  text-shadow: 2px 0 0 #4a2a10, -2px 0 0 #4a2a10, 0 2px 0 #4a2a10, 0 -2px 0 #4a2a10, 0 4px 0 #3a200b; box-shadow: 0 8px 18px rgb(0 0 0 / .45); }
.closing__p, .closing__sign, .made { color: #fff; text-shadow: 0 1px 3px rgb(0 0 0 / .7); }
.closing__sign { font-weight: 700; }

/* ---------- Dinosaurs ---------- */
.o { filter: drop-shadow(0 6px 10px rgb(0 0 0 / .4)); }
.gate__in .o1, .side__in .o1 { left: -30px; top: -6px; width: 40vw; max-width: 160px; aspect-ratio: var(--ar-trex); background-image: url(../img/st-trex.webp); }
.gate__in .o2, .side__in .o2 { right: 6px; top: 4px; width: 20vw; max-width: 78px; aspect-ratio: var(--ar-ptero); background-image: url(../img/st-ptero.webp); }
.gate__in .o3, .side__in .o3 { left: -30px; top: 190px; width: 22vw; max-width: 88px; aspect-ratio: var(--ar-brachio); background-image: url(../img/st-brachio.webp); transform: scaleX(-1); }
.gate__in .o4, .side__in .o4 { right: -34px; top: 176px; width: 28vw; max-width: 112px; aspect-ratio: var(--ar-trice); background-image: url(../img/st-trice.webp); }
.gate__in .o5, .side__in .o5 { left: -16px; bottom: 6px; width: 22vw; max-width: 88px; aspect-ratio: var(--ar-egg); background-image: url(../img/st-egg.webp); }
.sec--hero .deco { z-index: 3; }
.sec--hero .o1 { left: -34px; top: 10px; width: 42vw; max-width: 168px; aspect-ratio: var(--ar-trex); background-image: url(../img/st-trex.webp); }
.sec--hero .o2 { right: 8px; top: 18px; width: 20vw; max-width: 80px; aspect-ratio: var(--ar-ptero); background-image: url(../img/st-ptero.webp); }
.sec--hero .o3 { right: -30px; top: 250px; width: 30vw; max-width: 120px; aspect-ratio: var(--ar-trice); background-image: url(../img/st-trice.webp); }
/* the T-rex, brachiosaurus and triceratops were cut at the mockup's edge: fade that edge out */
.gate__in .o1, .side__in .o1, .gate__in .o3, .side__in .o3, .gate__in .o4, .side__in .o4, .sec--hero .o1, .sec--hero .o3 {
  -webkit-mask-image: linear-gradient(180deg, #000 68%, transparent 98%); mask-image: linear-gradient(180deg, #000 68%, transparent 98%); }
.sec--countdown .o1 { right: -24px; bottom: 6px; width: 24vw; max-width: 96px; aspect-ratio: var(--ar-egg); background-image: url(../img/st-egg.webp); }
.sec--closing .o1 { left: -26px; bottom: 0; width: 46vw; max-width: 190px; aspect-ratio: var(--ar-trex); background-image: url(../img/st-trex.webp); }
.sec--closing .o2 { right: -26px; bottom: 0; width: 38vw; max-width: 160px; aspect-ratio: var(--ar-trice); background-image: url(../img/st-trice.webp); }
.sec--closing .o3 { right: 18%; top: 16px; width: 18vw; max-width: 72px; aspect-ratio: var(--ar-ptero); background-image: url(../img/st-ptero.webp); }

html:lang(en) .ttl__kicker b { font-size: 1.9rem; } html:lang(en) .ttl__kicker b:last-child { font-size: 2.1rem; }

@media (min-width: 1024px) { .phw--side { --pw: min(19vw, 240px); } }