@font-face { font-family: Oswald; src: url("assets/fonts/oswald.ttf") format("truetype"); font-style: normal; font-weight: 200 700; font-display: swap; }
@font-face { font-family: "Golos Text"; src: url("assets/fonts/golos-text.ttf") format("truetype"); font-style: normal; font-weight: 400 900; font-display: swap; }
@font-face { font-family: Caveat; src: url("assets/fonts/caveat.ttf") format("truetype"); font-style: normal; font-weight: 400 700; font-display: swap; }
:root {
  color-scheme: light;
  --paper: #f7eddb;
  --ink: #332b26;
  --muted: #736454;
  --blue: #adc5d3;
  --terra: #ab422d;
  --yellow: #f1c867;
  --line: #cdbda4;
  font-family: "Golos Text", Arial, sans-serif;
  color: var(--ink);
  background: var(--paper);
  font-synthesis: none;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; min-width: 280px; background-image: radial-gradient(#7760470c .7px, transparent .7px); background-size: 5px 5px; }
button, input { font: inherit; }
button, a, input { -webkit-tap-highlight-color: transparent; }
a { color: inherit; }
button, a, .file-button { touch-action: manipulation; }
button { cursor: pointer; }
button:disabled { cursor: default; opacity: .55; }
:focus-visible { outline: 3px solid var(--terra); outline-offset: 5px; }
::selection { background: var(--yellow); color: var(--ink); }
.site-shell { max-width: 1280px; margin: auto; padding: 0 56px; }
.site-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.site-header { min-height: 104px; border-bottom: 2px solid var(--ink); }
.wordmark { display: inline-flex; align-items: center; gap: 12px; font: 500 24px/1 Oswald, Impact, sans-serif; text-transform: uppercase; text-decoration: none; }
.brand-mark { display: inline-grid; place-items: center; width: 36px; height: 40px; border: 2px solid var(--ink); border-radius: 45% 50% 43% 48%; background: var(--yellow); font: 700 32px/1 Caveat, cursive; transform: rotate(-8deg); }
.header-note { padding: 8px 13px; border: 1px solid var(--ink); border-radius: 50%; font-size: 10px; text-transform: uppercase; letter-spacing: .07em; transform: rotate(4deg); }
.invitation { display: grid; grid-template-columns: 1fr 1.12fr; align-items: stretch; gap: 54px; margin: 42px 0 38px; min-height: 626px; }
.invitation__content { display: flex; align-items: center; min-width: 0; padding: 16px 0 0 16px; }
.invitation__content > section { width: 100%; }
.eyebrow { display: inline-block; margin: 0 0 25px; padding: 5px 9px; border: 1px solid var(--ink); background: var(--yellow); color: var(--ink); font-size: 10px; font-weight: 500; line-height: 1.5; letter-spacing: .09em; text-transform: uppercase; transform: rotate(-2deg); }
.eyebrow > span { padding: 0 7px; }
h1 { margin: 0; font: 600 clamp(66px, 7.5vw, 100px)/1.05 Oswald, Impact, sans-serif; letter-spacing: -.035em; text-transform: uppercase; }
.title-accent { color: var(--terra); }
.intro { margin: 25px 0 30px; font-size: 15px; line-height: 1.65; color: var(--muted); }
#birthday-hint { max-width: 370px; }
.unlock-form { display: grid; gap: 12px; max-width: 370px; }
.unlock-form label, .field-label { font-size: 11px; font-weight: 500; }
.unlock-form input { width: 100%; min-width: 0; min-height: 54px; padding: 14px 16px; border: 1.5px solid var(--ink); border-radius: 3px; background: #fffaf0; color: var(--ink); font-size: 16px; box-shadow: 3px 3px 0 #d8c8ae; }
.button { display: flex; align-items: center; justify-content: space-between; gap: 20px; width: 100%; min-height: 54px; padding: 15px 18px; border: 1.5px solid var(--ink); border-radius: 3px; background: var(--terra); color: #fffaf0; box-shadow: 3px 3px 0 var(--ink); font-size: 13px; font-weight: 500; text-decoration: none; transition: transform .15s, box-shadow .15s, background .15s; }
.button:hover:not(:disabled) { background: #913722; transform: translate(1px, 1px); box-shadow: 2px 2px 0 var(--ink); }
.button:active:not(:disabled) { transform: translate(3px, 3px); box-shadow: none; }
.button > span:last-child { font-size: 22px; line-height: 1; }
.form-note { min-height: 18px; margin: 1px 0 0; color: #923b2b; font-size: 12px; line-height: 1.5; }
.privacy-note { max-width: 370px; margin: 12px 0 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
.illustration-panel { position: relative; min-width: 0; min-height: 626px; }
.art-scene { position: absolute; inset: 0; overflow: hidden; border: 2px solid var(--ink); border-radius: 46% 46% 5px 5px; background: var(--blue); box-shadow: 5px 5px 0 var(--ink); }
.art-scene--message { display: none; background: #dcb599; }
.art-scene--route { display: none; background: #e8c276; }
.invitation:has(#message:not([hidden]), #journey:not([hidden])) .art-scene--gate { display: none; }
.invitation:has(#message:not([hidden])) .art-scene--message { display: block; }
.invitation:has(#journey:not([hidden])) .art-scene--route { display: block; }
.art-orbit { position: absolute; width: 87%; aspect-ratio: 1; top: 12%; left: 6.5%; border: 1.5px solid #536f7a; border-radius: 50%; background: #d0dce0; }
.hero-portrait { position: absolute; height: 112%; width: auto; max-width: 110%; bottom: 0; left: 50%; transform: translateX(-50%); object-fit: contain; object-position: bottom; }
.hero-mirror { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 55%; }
.hero-flowers { position: absolute; height: 100%; width: auto; max-width: 100%; right: 0; top: -8%; object-fit: contain; object-position: top right; }
.art-label { position: absolute; z-index: 2; top: 24%; left: 8%; padding: 1px 12px 5px; border: 1.5px solid var(--ink); background: var(--paper); box-shadow: 2px 2px 0 var(--ink); font: 500 27px/1.2 Caveat, cursive; transform: rotate(-9deg); }
.number-sticker { position: absolute; z-index: 2; top: 24%; right: 8%; display: grid; place-items: center; width: 92px; aspect-ratio: 1; background: var(--terra); color: var(--paper); font: 600 63px/1 Oswald, sans-serif; clip-path: polygon(50% 0%, 61% 12%, 75% 7%, 80% 23%, 96% 25%, 93% 42%, 100% 50%, 88% 61%, 93% 75%, 77% 80%, 75% 96%, 58% 93%, 50% 100%, 39% 88%, 25% 93%, 20% 77%, 4% 75%, 7% 58%, 0% 50%, 12% 39%, 7% 25%, 23% 20%, 25% 4%, 42% 7%); transform: rotate(12deg); }
.art-spark { position: absolute; bottom: 32px; right: 24px; color: var(--yellow); -webkit-text-stroke: 1px var(--ink); font: 64px/1 Georgia, serif; transform: rotate(13deg); }
.art-scene--route .art-spark { bottom: 65px; color: var(--terra); }
.page-divider { border-top: 1.5px solid var(--ink); margin-bottom: 28px; }
.section-topline { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; max-width: 370px; }
.text-button { min-height: 34px; padding: 4px 0; border: 0; background: none; color: var(--muted); font-size: 11px; }
.text-button:hover { color: var(--ink); text-decoration: underline; }
#route-title:focus, #message-title:focus { outline: none; }
#message-title { font-size: clamp(54px, 6vw, 82px); }
.message-copy { max-width: 370px; font-size: 19px; }
.message-copy p { margin: 0; }
.message-copy p + p { margin-top: 16px; }
#flowers-button { max-width: 370px; }
#journey .intro { margin-block: 20px; }
.address-block { margin: 0 0 20px; }
.address-block h2 { margin: 0 0 8px; font-size: 19px; font-weight: 500; }
.address-block p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.5; }
.pickup-note { position: relative; max-width: 370px; margin: 24px 0; padding: 15px 20px 17px; border: 1px solid var(--ink); background: #f3d88d; transform: rotate(-1deg); }
.pickup-note::before { content: ""; position: absolute; top: -8px; left: 43%; width: 50px; height: 15px; border-inline: 1px solid #b9ac8170; background: #e0d5b8d9; transform: rotate(-5deg); }
.pickup-note .field-label { font-size: 10px; }
.pickup-note p { margin: 5px 0 0; font: 600 29px/1.2 Caveat, cursive; overflow-wrap: anywhere; }
#maps-link, .contact-link { max-width: 370px; }
.contact-link { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 48px; margin-top: 8px; font-size: 12px; text-decoration: none; }
.contact-link:hover { text-decoration: underline; }
/* The printable page shares the same fonts, colors and illustrated stickers. */
.poster-page { padding: 0 24px 48px; background-color: #d9cbb4; }
.poster-toolbar { max-width: 794px; margin: 0 auto; padding: 24px 0; display: flex; align-items: center; flex-wrap: wrap; gap: 18px; }
.poster-toolbar .wordmark { font-size: 19px; }
.poster-tools { display: flex; align-items: center; gap: 20px; margin-left: auto; }
.button--compact { width: auto; min-height: 44px; padding: 10px 16px; }
.file-button { position: relative; display: inline-flex; align-items: center; min-height: 44px; font-size: 12px; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.file-button input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.file-button:focus-within { outline: 3px solid var(--terra); outline-offset: 5px; }
.toolbar-note { width: 100%; margin: 0; font-size: 12px; line-height: 1.5; color: var(--muted); }
.poster { container-type: inline-size; display: flex; flex-direction: column; width: 100%; max-width: 794px; aspect-ratio: 210 / 297; margin: auto; padding: min(6vw, 48px); background: var(--paper); box-shadow: 5px 5px 0 #332b2650; }
.poster__header { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-bottom: 3.5%; border-bottom: 2px solid var(--ink); }
.poster__header .wordmark { font-size: 3cqi; gap: 1.7cqi; }
.poster__header .brand-mark { width: 4.5cqi; height: 5.2cqi; font-size: 4.3cqi; }
.poster__header .eyebrow { margin: 0; font-size: 1.35cqi; }
.poster__title-row { display: flex; align-items: center; justify-content: space-between; gap: 2%; padding: 5% 0 4%; }
.poster__title-row h1 { font-size: 14cqi; line-height: 1.04; }
.poster__handwriting { font: 500 4.2cqi/1 Caveat, cursive; text-align: center; transform: rotate(8deg); }
.poster__handwriting > span { display: block; margin-top: 12%; font-size: 9cqi; }
.poster__art { position: relative; flex: 1; min-height: 0; margin: 2% 1% 5%; }
.poster-photo { position: absolute; overflow: hidden; width: 37%; height: 93%; border: 1.5px solid var(--ink); border-radius: 3px; box-shadow: 3px 4px 0 #332b2650; }
.poster-photo img { position: absolute; width: auto; height: 100%; bottom: 0; left: 50%; transform: translateX(-50%); }
.poster-photo--mirror { top: 1%; left: 1%; transform: rotate(-8deg); background: #dcb599; }
.poster-photo--mirror img { height: 92%; bottom: 3%; }
.poster-photo--flowers { z-index: 2; top: 6%; left: 30%; transform: rotate(2deg); background: #f1d17d; }
.poster-photo--portrait { top: 0; right: 0; transform: rotate(9deg); background: var(--blue); }
.poster-photo--portrait img { height: 115%; }
.poster__art .number-sticker { top: auto; bottom: -5%; right: -1%; width: 15%; font-size: 9cqi; transform: rotate(-10deg); }
.poster__footer { display: flex; align-items: center; gap: 6%; padding-top: 4%; border-top: 2px solid var(--ink); }
.qr-frame { display: grid; place-items: center; width: 23%; aspect-ratio: 1; flex-shrink: 0; background: #fff; border: 1.5px solid var(--ink); padding: 2%; box-shadow: 3px 3px 0 var(--ink); }
.qr-frame img { width: 100%; height: 100%; object-fit: contain; }
#qr-placeholder { text-align: center; font: 400 6cqi/1 Caveat, cursive; color: var(--muted); }
#qr-placeholder small { display: block; margin-top: 1cqi; font: 400 1.5cqi/1.5 "Golos Text", sans-serif; }
.poster__caption .eyebrow { margin: 0 0 10%; font-size: 1.3cqi; }
.poster__caption > p:last-child { margin: 0; font: 500 4.3cqi/1.2 Oswald, sans-serif; text-transform: uppercase; }
.poster__arrow { margin-left: auto; align-self: center; color: var(--terra); font: 500 10cqi/1 Caveat, cursive; }
@media (min-width: 1600px) { .site-shell { padding-top: 20px; } .invitation { margin-block: 56px; } }
@media (max-width: 1100px) {
  .site-shell { padding-inline: 36px; }
  .invitation { gap: 30px; min-height: 590px; }
  .invitation__content { padding-left: 0; }
  .illustration-panel { min-height: 590px; }
  .art-label { font-size: 23px; }
  .number-sticker { width: 78px; font-size: 54px; }
}
@media (max-width: 820px) {
  .site-shell { max-width: 580px; padding-inline: 24px; }
  .site-header { min-height: 84px; }
  .wordmark { font-size: 21px; }
  .invitation { display: flex; flex-direction: column-reverse; gap: 30px; margin: 26px 0 24px; min-height: 0; }
  .illustration-panel { height: 350px; min-height: 0; }
  .art-scene { border-radius: 46% 46% 4px 4px; box-shadow: 4px 4px 0 var(--ink); }
  .art-orbit { top: 9%; left: 20%; width: 60%; }
  .hero-portrait { width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: center 30%; }
  .hero-flowers { width: 130%; height: auto; max-width: none; top: 50%; right: -25%; transform: translateY(-50%); }
  .art-label { font-size: 23px; }
  .number-sticker { width: 70px; font-size: 47px; }
  .art-spark { font-size: 44px; bottom: 16px; right: 18px; }
  .art-scene--route .art-spark { bottom: 26px; }
  .invitation__content { padding: 0 4px; }
  .eyebrow { margin-bottom: 18px; }
  h1 { font-size: clamp(62px, 15.5vw, 84px); }
  .intro { margin: 20px 0 24px; font-size: 14px; }
  .unlock-form, #maps-link, #flowers-button, .message-copy, .contact-link, .pickup-note, .section-topline { max-width: none; }
  #message-title { font-size: clamp(44px, 11vw, 64px); }
  .message-copy { font-size: 17px; }
  .page-divider { margin-bottom: 24px; }
  #route-title br { display: none; }
  #route-title .title-accent::before { content: " "; }
  #route-title { font-size: clamp(51px, 12vw, 68px); }
}
@media (max-width: 400px) {
  .site-shell { padding-inline: 20px; }
  .illustration-panel { height: 300px; }
  .art-label { font-size: 21px; }
  .number-sticker { width: 62px; font-size: 43px; }
  .header-note { font-size: 9px; padding: 7px 10px; }
}
@media (max-width: 640px) {
  .poster-page { padding-inline: 16px; }
  .poster-toolbar { gap: 12px; }
  .poster-tools { gap: 12px; }
  .poster-toolbar .wordmark { font-size: 15px; }
  .poster-toolbar .brand-mark { display: none; }
  .file-button, .button--compact { font-size: 11px; }
  .poster__header .eyebrow, .poster__caption .eyebrow { padding: 3px 4px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; } }
@page { size: A4; margin: 0; }
@media print {
  .poster-page { padding: 0; background: none; }
  .poster-toolbar { display: none; }
  .poster { width: 210mm; max-width: none; height: 297mm; margin: 0; padding: 13mm; box-shadow: none; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
}