/* King Walli Moments — «Письмо-приключение».
   Prototype v1.3: visual alignment with approved 04.11 composition.
   Static invitation illustration; no messaging or storage. */
:root {
  --burgundy: #520819;
  --burgundy-deep: #300414;
  --wine: #7a0824;
  --ink: #301d1a;
  --heading: #721529;
  --gold: #be8530;
  --paper: #ffe8cd;
  --paper-soft: #ffe5c7;
  --cream: #ffecd3;
  color-scheme: light;
  font-family: Georgia, 'Times New Roman', serif;
  color: var(--ink);
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
}
* {box-sizing:border-box}
html, body {min-height:100%;margin:0}
body {background:radial-gradient(ellipse at 49% 44%,#76152c 0%,#520719 63%,#2d0312 100%)}
button,input {font:inherit}
button {cursor:pointer}
button:focus-visible,input:focus-visible {outline:2px solid #a77832;outline-offset:3px}
[hidden]{display:none!important}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.app-shell {position:relative;width:min(100%,490px);min-height:100vh;margin:0 auto;padding:16px 12px 22px}
.page {position:relative;isolation:isolate;overflow:hidden;width:100%;min-height:var(--equal-height,auto);border:3px solid #ddbf87;border-radius:46px;
  background:linear-gradient(180deg,#f7d9b7 0%,#ffecd4 49%,#ffe4c3 100%);
  box-shadow:0 16px 50px #1a020c94,inset 0 0 0 1px #fbe8be}
.page::before{content:'';position:absolute;inset:0;pointer-events:none;z-index:0;background:url('assets/paper-grain.png') repeat;background-size:250px;opacity:.35;mix-blend-mode:multiply}
.page > *{position:relative;z-index:1}
.page-content{padding:0 27px;text-align:center}
.brand-header{height:67px;display:flex;align-items:center;justify-content:center;border-radius:40px 40px 0 0;background:linear-gradient(180deg,#410516,#5b0c21)}
.brand-name{font-size:clamp(20px,5.7vw,28px);color:#f8e6ca;letter-spacing:1px;white-space:nowrap;text-shadow:0 1px 2px #17030a}
.brand-name em{font-style:italic;letter-spacing:-.5px;font-weight:normal}
/* First visual deliberately melts into the parchment for the entire lower third. */
.hero-picture{width:100%;height:323px;overflow:hidden;position:relative;background:#f6dac0}
.hero-picture img{width:100%;height:100%;object-fit:cover;object-position:center 21%;display:block}
.hero-picture::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to bottom, transparent 38%,#f8dfc41a 54%,#f9dfc5a6 73%,#f9dfc5ef 91%,#f9dfc5 100%)}
.intro-content{position:relative;margin-top:-4px;padding-bottom:120px}
.eyebrow{display:flex;align-items:center;justify-content:center;gap:12px;font-size:14px;line-height:1.2;color:#811f32;letter-spacing:.7px;white-space:nowrap}
.eyebrow span{flex:0 1 53px;height:1px;background:var(--gold)}
.headline{font-family:'Palatino Linotype','Book Antiqua',Georgia,serif;font-style:italic;font-weight:normal;color:var(--heading);
  font-size:clamp(39px,9.8vw,51px);line-height:1;letter-spacing:-.8px;margin:23px -10px 9px}
.gold-flourish{height:29px;display:flex;align-items:center;justify-content:center;gap:12px;color:var(--gold);font-size:34px;line-height:1}
.gold-flourish span{width:53px;height:1px;background:var(--gold)}
.gold-flourish b{font-weight:normal;display:inline-block;transform:rotate(-17deg);font-size:.82em;margin-top:-4px}
.intro-copy{font-size:clamp(15.5px,4vw,20px);line-height:1.22;color:#261c1c;letter-spacing:-.1px;margin:17px -15px 25px}
.primary-button{width:100%;min-height:59px;display:flex;align-items:center;justify-content:center;gap:22px;
  padding:10px 13px;border:0;border-radius:13px;color:#fff1db;background:linear-gradient(180deg,#8a082b,#56051a);
  box-shadow:0 2px 2px #3d061344;font-size:clamp(20px,5.3vw,28px);line-height:1.05;
  font-family:'Palatino Linotype','Book Antiqua',Georgia,serif;transition:filter .15s,transform .15s}
.primary-button:hover{filter:brightness(1.08)}.primary-button:active{transform:translateY(1px)}
.primary-button svg{width:31px;height:20px;flex-shrink:0;fill:none;stroke:#f9ddbb;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.5}
.soft-divider{height:1px;background:linear-gradient(90deg,transparent,#c5a06f 23%,#c5a06f 77%,transparent);margin:28px 13px 22px}
.chapters-heading{font-size:clamp(19px,4.9vw,25px);font-weight:normal;line-height:1.14;color:#801b2d;white-space:nowrap;margin:0 -15px 20px}
.chapters{padding:0;margin:0 -7px;list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:4px}
.chapter{position:relative;display:flex;flex-direction:column;align-items:center;gap:7px;font-size:clamp(12px,3.5vw,15px);line-height:1.1;white-space:nowrap}
.chapter-icon{display:block;width:38px;height:32px}.chapter svg{width:38px;height:31px;fill:none;stroke:#bb8026;stroke-width:1.8;stroke-linejoin:round;stroke-linecap:round}
.chapter--done svg{fill:#c48a28;stroke:#bb8227;stroke-width:1}.chapter--done svg path:last-child{stroke:#fff3dc;stroke-width:1.5}
.chapter:not(:last-child)::after{content:'';position:absolute;top:17px;right:-19px;height:1px;width:36px;background:#c59146}
.paper-tail{position:absolute!important;bottom:0;left:0;right:0;pointer-events:none}
.paper-tail--first{height:95px;background: url('assets/paper-tail-first.webp') bottom/100% 100% no-repeat;opacity:.40;mix-blend-mode:multiply}
/* Second page header: gradual transition from flowers to cream, no horizontal cut. */
.page--invite{background:linear-gradient(180deg,#fae0c2 0%,#ffe9ce 29%,#ffecd5 76%,#fce0bd 100%)}
.second-page-top{height:202px;background-color:#f9e2c6;
  background-image:
    linear-gradient(to bottom,transparent 0%,transparent 30%,#f9e2c630 48%,#f9e2c6c2 77%,#f9e2c6 100%),
    url('assets/hero-second-header.webp');
  background-size:100% 100%,100% 180px;
  background-position:center top,center top;
  background-repeat:no-repeat;}
.invite-content{position:relative;margin-top:-86px;padding:0 25px 94px}
.invite-headline{font-size:clamp(38px,9.5vw,50px);line-height:1.03;margin:0 -13px 16px;letter-spacing:-.6px}
.gold-flourish--invite{height:28px;font-size:31px}
.instructions{font-size:clamp(15px,3.9vw,19px);line-height:1.19;color:#2c1d1b;margin:15px -11px 27px}
.instructions p{margin:0 0 1px}
.invite-form{display:flex;flex-direction:column;gap:8px;margin:0 -3px 17px}
.form-control{min-height:49px;border:1px solid #dfba8e;border-radius:13px;
  display:grid;grid-template-columns:29px minmax(88px,.8fr) minmax(119px,1.2fr);gap:9px;align-items:center;
  padding:4px 12px;background:#fff8e82b}
.field-icon{width:28px;height:28px;stroke:#302723;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;fill:none}
.form-control label{font-weight:bold;font-size:clamp(14px,3.6vw,18px);text-align:left;white-space:nowrap}
.form-control input{min-width:0;width:100%;border:0;background:transparent;outline:0;font-size:clamp(12px,3.2vw,16px);padding:8px 0;text-align:right;color:#432923}
.form-control:focus-within{outline:2px solid #bd8c4e;outline-offset:1px;background:#fff8e8a0}
.form-control input::placeholder{font-style:italic;color:#6c5d51;opacity:1}
.primary-button--invite{min-height:57px;margin-top:11px;font-size:clamp(19px,4.8vw,25px);gap:17px}
.primary-button--invite svg{width:28px}
.form-message{font-family:system-ui,-apple-system,Arial,sans-serif;font-size:12px;line-height:1.4;padding:9px 13px;margin:4px 0;border-radius:9px;background:#fff2dc;border:1px solid #d1a77a;color:#592521;text-align:left}
.invitation-sample--approved{line-height:0;margin:11px -14px 0;position:relative}
.approved-invitation-image{width:100%;height:auto;display:block;
  mask-image:linear-gradient(to bottom,transparent 0%,#000 2%,#000 94%,transparent 100%);
  -webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 2%,#000 94%,transparent 100%)}
.return-button{border:0;background:transparent;color:#7e372c;text-decoration:underline;text-underline-offset:3px;padding:8px 12px;margin:13px auto 0;font-size:15px}
.paper-tail--second{display:none}
@media(max-width:550px){
  .app-shell{padding:8px 8px 14px;max-width:460px}
  .page{border-width:2px;border-radius:32px;box-shadow:0 12px 30px #21020a77,inset 0 0 0 1px #ffecbf}
  .brand-header{height:57px;border-radius:29px 29px 0 0}
  .brand-name{font-size:clamp(18px,6.4vw,25px)}
  .hero-picture{height: min(83vw,322px)}
  .page-content{padding-left:23px;padding-right:23px}
  .intro-content{padding-bottom:115px}
  .eyebrow{font-size:clamp(11px,3.55vw,14px);letter-spacing:.5px;gap:9px}
  .eyebrow span{flex-basis:46px}
  .headline{font-size:clamp(37px,10.5vw,46px);margin:17px -14px 9px}
  .gold-flourish{height:27px;font-size:29px}
  .intro-copy{font-size:clamp(15.5px,4.25vw,18px);margin:14px -14px 20px}
  .primary-button{min-height:54px;font-size:clamp(19px,5.65vw,24px);gap:16px}
  .primary-button svg{width:29px}
  .soft-divider{margin:24px 9px 19px}
  .chapters-heading{font-size:clamp(18px,5.25vw,22px);margin-bottom:18px}
  .chapters{margin:0 -10px}
  .chapter{font-size:clamp(10.5px,3.45vw,14px)}
  .chapter-icon,.chapter svg{width:33px;height:29px}
  .chapter:not(:last-child)::after{top:17px;right:-12px;width:23px}
  .paper-tail--first{height:70px}
  .second-page-top{height:190px}
  .invite-content{margin-top:-83px;padding:0 22px 62px}
  .invite-headline{font-size:clamp(36px,10vw,45px);margin:0 -13px 14px}
  .gold-flourish--invite{height:29px}
  .instructions{font-size:clamp(14px,3.8vw,17px);margin:12px -11px 23px}
  .form-control{min-height:46px}
  .form-control label{font-size:clamp(13px,3.6vw,16px)}
  .form-control input{font-size:clamp(11.5px,3.25vw,14px)}
  .primary-button--invite{min-height:54px;margin-top:9px;font-size:clamp(17px,5vw,23px)}
  .invitation-sample--approved{margin:10px -17px 0}
  .return-button{font-size:14px;margin-top:7px}
}
@media(max-width:360px){
  .app-shell{padding:5px 5px 10px}
  .page{border-radius:27px}
  .brand-header{height:52px;border-radius:25px 25px 0 0}
  .hero-picture{height: min(78vw,252px)}
  .page-content{padding-left:18px;padding-right:18px}
  .intro-content{padding-bottom:96px}
  .eyebrow{font-size:10.8px;gap:6px}
  .headline{font-size:37px}
  .intro-copy{font-size:15px}
  .chapters-heading{font-size:18px}
  .chapter{font-size:10.8px}
  .second-page-top{height:171px}
  .invite-content{margin-top:-75px;padding:0 18px 52px}
  .invite-headline{font-size:34px}
  .instructions{font-size:13px;margin:12px -9px 17px}
  .form-control{padding:3px 8px;grid-template-columns:24px minmax(80px,.85fr) minmax(100px,1.15fr);gap:5px}
  .field-icon{width:22px;height:22px}
  .form-control label{font-size:12px}
  .form-control input{font-size:11.5px}
  .invitation-sample--approved{margin-left:-15px;margin-right:-15px}
}
@media(prefers-reduced-motion:reduce){.primary-button{transition:none}}