/* Variant A — «Именное приглашение»: letterpress stationery. Tokens in DESIGN.md. */
@font-face{font-family:"Old Standard";src:url("public/assets/fonts/oldstandard-cyr.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Old Standard";src:url("public/assets/fonts/oldstandard-lat.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;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:"Old Standard";src:url("public/assets/fonts/oldstandard-italic-cyr.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Old Standard";src:url("public/assets/fonts/oldstandard-italic-lat.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap;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:"Old Standard";src:url("public/assets/fonts/oldstandard-bold-cyr.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Old Standard";src:url("public/assets/fonts/oldstandard-bold-lat.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap;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:"EB Garamond";src:url("public/assets/fonts/ebgaramond-cyr.woff2") format("woff2");font-weight:400 700;font-style:normal;font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"EB Garamond";src:url("public/assets/fonts/ebgaramond-lat.woff2") format("woff2");font-weight:400 700;font-style:normal;font-display:swap;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:"EB Garamond";src:url("public/assets/fonts/ebgaramond-italic-cyr.woff2") format("woff2");font-weight:400 700;font-style:italic;font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"EB Garamond";src:url("public/assets/fonts/ebgaramond-italic-lat.woff2") format("woff2");font-weight:400 700;font-style:italic;font-display:swap;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}

:root{
  --linen:#ECE4D4;
  --linen-2:#E4D9C5;
  --cotton:#FBF8F1;
  --plate:#F5EFE3;
  --ink:#1E2537;
  --ink-2:#474B59;
  --ox:#7A2331;
  --ox-hover:#5F1A26;
  --ox-deep:#4A141B;
  --ox-flap:#57171F;
  --on-ox:#F6EBDD;
  --on-ox-2:#E6CDBC;
  --gilt:#E3C48F;
  --error:#9A1C2A;
  --rule:rgba(30,37,55,.2);
  --rule-strong:rgba(30,37,55,.5);
  --frame:rgba(122,35,49,.5);

  --display:"Old Standard","Old Standard TT",Georgia,"Times New Roman",serif;
  --text:"EB Garamond",Garamond,Georgia,"Times New Roman",serif;

  --fs-body:1.25rem;
  --fs-h2:clamp(2.125rem,1.4rem + 2.6vw,3.625rem);
  --wrap:78rem;
  --pad:clamp(1.25rem,.5rem + 3vw,3.5rem);
  --section:clamp(4.5rem,3rem + 6vw,9rem);
  --ease:cubic-bezier(.2,.7,.2,1);

  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .36 0 0 0 0 .28 0 0 0 0 .2 0 0 0 .16 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --paper-shadow:drop-shadow(0 1px 1px rgba(60,40,20,.16)) drop-shadow(0 14px 22px rgba(60,40,20,.12));
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{font-size:106.25%;scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:5.5rem}
body{margin:0;background:var(--linen) var(--grain);color:var(--ink);font:400 var(--fs-body)/1.55 var(--text);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;font-kerning:normal}
main{overflow-x:clip}
h1,h2,h3,p,dl,dd,ol,ul,figure,fieldset{margin:0}
ol,ul{padding:0;list-style:none}
fieldset{border:0;padding:0;min-width:0}
a{color:inherit}
b{font-weight:600}
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad)}
.sprite{position:absolute;width:0;height:0;overflow:hidden}

:focus-visible{outline:2px solid var(--ox);outline-offset:3px}
.skip{position:absolute;left:1rem;top:-4rem;z-index:50;background:var(--ink);color:var(--cotton);padding:.75rem 1rem;text-decoration:none}
.skip:focus{top:1rem}

/* ---------- type roles ---------- */
.smallcaps{font:500 .875rem/1.35 var(--text);letter-spacing:.2em;text-transform:uppercase;color:var(--ox)}
.h2{font:400 var(--fs-h2)/1.06 var(--display);letter-spacing:-.01em;text-wrap:balance}
.h2 em{font-style:italic;color:var(--ox)}
.h3{font:400 clamp(1.5rem,1.2rem + 1vw,2rem)/1.15 var(--display);text-wrap:balance}
.smallcaps + .h2,.smallcaps + .h3{margin-top:1rem}

/* ---------- buttons & links ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.75rem;min-height:3.25rem;padding:.85rem 1.75rem;border:0;border-radius:2px;background:var(--ox);color:var(--cotton);font:500 .9375rem/1.2 var(--text);letter-spacing:.16em;text-transform:uppercase;text-decoration:none;cursor:pointer;box-shadow:inset 0 1px 0 rgba(255,255,255,.14),inset 0 -2px 0 rgba(0,0,0,.2),0 1px 2px rgba(60,20,20,.2);transition:background-color .2s var(--ease),transform .1s}
.btn:hover{background:var(--ox-hover)}
.btn:active{transform:translateY(1px);box-shadow:inset 0 2px 3px rgba(0,0,0,.3)}
.btn:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.btn[disabled]{cursor:progress;background:var(--ox-hover);opacity:.8}
.btn--small{min-height:2.625rem;padding:.5rem 1.15rem;font-size:.875rem}
.btn--wide{width:100%}
.link{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.3em;text-decoration-color:var(--frame)}
.link:hover{color:var(--ox);text-decoration-color:currentColor}
.link--button{background:none;border:0;padding:.25rem 0;font:inherit;font-style:italic;color:var(--ink);cursor:pointer}

/* ---------- header ---------- */
.top{position:sticky;top:0;z-index:20;background:rgba(236,228,212,.94);border-bottom:1px solid var(--rule)}
.top__row{display:flex;align-items:center;gap:2rem;min-height:4.5rem}
.mark{display:flex;align-items:center;gap:.8rem;text-decoration:none;margin-right:auto}
.mark__emblem{flex:none;width:2.4rem;height:2.4rem;color:var(--ox)}
.mark__text{font:400 1.0625rem/1.2 var(--display);max-width:21rem}
.mark__text small{display:block;margin-top:.15rem;font:400 .875rem/1.25 var(--text);font-style:italic;color:var(--ink-2)}
.top__nav{display:flex;gap:1.75rem}
.top__nav a{font:500 .875rem/1 var(--text);letter-spacing:.18em;text-transform:uppercase;text-decoration:none;padding:.5rem 0;border-bottom:1px solid transparent;transition:border-color .2s,color .2s}
.top__nav a:hover{color:var(--ox);border-bottom-color:var(--ox)}

/* ---------- paper objects ---------- */
.invite__paper,.reply__paper,.letter__paper,.letter__under,.programme__paper,.plate__sheet::before{content:"";position:absolute;inset:0;background:var(--cotton) var(--grain);filter:url(#deckle) var(--paper-shadow)}

/* ---------- hero: invitation + reply card ---------- */
.hero{padding:clamp(1.75rem,.75rem + 2.5vw,3rem) 0 clamp(4rem,3rem + 4vw,7rem)}
.hero__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,27rem);gap:clamp(2.5rem,1rem + 4vw,5rem);align-items:start}
.invite{position:relative;padding:0 0 3.25rem}
.envelope{position:absolute;left:-.5rem;right:-.5rem;bottom:.5rem;height:46%;background:var(--ox-deep) var(--grain);transform:rotate(-2.2deg);transform-origin:center;box-shadow:0 18px 30px rgba(60,20,20,.22),0 2px 3px rgba(60,20,20,.2)}
.envelope__flap{position:absolute;inset:0 0 auto 0;height:46%;background:var(--ox-flap);clip-path:polygon(0 0,100% 0,50% 100%)}
.envelope__to{position:absolute;left:1.5rem;bottom:.8rem;font:italic 400 1.0625rem/1 var(--display);color:var(--gilt);letter-spacing:.02em}
.invite__card{position:relative;z-index:1;padding:clamp(1.25rem,.75rem + 1.5vw,2rem);text-align:center}
.invite__frame{container-type:inline-size;position:relative;padding:clamp(2rem,1rem + 3vw,3.25rem) clamp(1.25rem,.5rem + 3vw,3.25rem) clamp(2rem,1.5rem + 2vw,3rem);border:1px solid var(--frame);box-shadow:0 0 0 5px var(--cotton),0 0 0 6px var(--rule)}
.invite__emblem{display:block;width:3.25rem;height:3.25rem;margin:0 auto 1rem;color:#E9E1D1;filter:drop-shadow(0 1px 0 rgba(255,255,255,.95)) drop-shadow(0 -1px 0 rgba(80,55,30,.4))}
.invite__kicker{margin-bottom:1.25rem}
.invite__title{font-weight:400;text-shadow:0 1px 0 rgba(255,255,255,.7)}
.invite__word{display:block;font:italic 400 clamp(2.25rem,15.5cqi,5.5rem)/1 var(--display);color:var(--ox);letter-spacing:-.01em}
.invite__rest{display:block;max-width:15em;margin:.4em auto 0;font:400 clamp(1.375rem,6.4cqi,2.5rem)/1.16 var(--display);text-wrap:balance}
.invite__line{max-width:25em;margin:1.4rem auto 0;font-size:clamp(1.1875rem,1.05rem + .4vw,1.375rem);font-style:italic;line-height:1.45;color:var(--ink-2);text-wrap:balance}
.fleuron{display:flex;align-items:center;justify-content:center;gap:.9rem;margin:1.75rem auto;color:var(--ox);font-size:.625rem;max-width:16rem}
.fleuron span{flex:1;height:1px;background:var(--frame)}
.invite__when{display:flex;justify-content:center;gap:0}
.invite__when > div{padding:0 1.75rem}
.invite__when > div + div{border-left:1px solid var(--rule-strong)}
.invite__when dt{font:500 .875rem/1.3 var(--text);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-2)}
.invite__when dd{margin-top:.35rem;font:400 clamp(1.375rem,1.1rem + .9vw,1.75rem)/1.15 var(--display)}
.invite__note{margin-top:1.15rem;font-style:italic;font-size:1.0625rem;color:var(--ink-2)}
.invite__from{margin-top:1.5rem;font:500 .875rem/1.4 var(--text);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.invite__seal{position:absolute;z-index:2;right:-1.5rem;bottom:-2.25rem;width:7.5rem;height:7.5rem;transform:rotate(-14deg)}

/* ---------- reply cards (forms) ---------- */
.reply{position:relative;padding:clamp(1.75rem,1.2rem + 1.5vw,2.5rem) clamp(1.35rem,.9rem + 1.5vw,2.25rem) clamp(1.5rem,1rem + 1.2vw,2rem)}
.reply::after{content:"";position:absolute;inset:.7rem;border:1px solid var(--rule);pointer-events:none}
.reply__form,.reply__done{position:relative;z-index:1}
.reply__form{display:grid;gap:.35rem}
.reply__head{text-align:center;padding-bottom:1.1rem;margin-bottom:.6rem;border-bottom:1px solid var(--rule)}
.reply__title{margin-top:.45rem;font:italic 400 clamp(1.75rem,1.4rem + 1vw,2.125rem)/1.1 var(--display);color:var(--ink)}
.reply__sub{margin-top:.45rem;font-size:1rem;line-height:1.4;color:var(--ink-2);text-wrap:balance}

.field{display:grid;gap:.15rem;min-width:0}
.field label,.field legend{font:500 .875rem/1.3 var(--text);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);padding:0}
.opt{margin-left:.35rem;font-style:italic;letter-spacing:.02em;text-transform:none;font-size:.875rem;color:var(--ink-2)}
.field input[type=text],.field input[type=tel],.field textarea{width:100%;min-height:2.75rem;padding:.4rem .15rem .35rem;border:0;border-bottom:1px solid var(--rule-strong);border-radius:0;background:transparent;color:var(--ink);font:400 1.1875rem/1.35 var(--text);transition:border-color .15s,box-shadow .15s}
.field textarea{resize:vertical;min-height:4.75rem;background:repeating-linear-gradient(transparent 0 1.55rem,var(--rule) 1.55rem calc(1.55rem + 1px));line-height:1.6rem;padding-top:.1rem}
.field input::placeholder,.field textarea::placeholder{color:#6A6D78;font-style:italic;opacity:1}
.field input:hover,.field textarea:hover{border-bottom-color:var(--ink)}
.field input[type=text]:focus,.field input[type=tel]:focus,.field textarea:focus{outline:none;background-color:rgba(122,35,49,.06);border-bottom-color:var(--ox);box-shadow:inset 0 -2px 0 var(--ox)}
.field [aria-invalid=true]{border-bottom-color:var(--error);box-shadow:inset 0 -1px 0 var(--error)}
.field [aria-invalid=true]:focus{box-shadow:inset 0 -2px 0 var(--error)}
.field__error{min-height:1.35rem;font:italic 400 .9375rem/1.35 var(--text);color:var(--error)}
.field--opt{padding-bottom:.9rem}
.field-pair{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem}

.ticks legend{margin-bottom:.35rem}
.ticks__row{display:flex;flex-wrap:wrap;gap:.25rem 1.25rem}
.field .tick{display:inline-flex;align-items:center;gap:.55rem;min-height:2.5rem;padding-right:.25rem;font:400 1.1875rem/1.2 var(--text);letter-spacing:0;text-transform:none;color:var(--ink);cursor:pointer}
.tick input,.check input{appearance:none;-webkit-appearance:none;flex:none;margin:0;width:1.2rem;height:1.2rem;border:1.5px solid var(--ink);background:var(--cotton);cursor:pointer;display:grid;place-content:center}
.tick input{border-radius:50%}
.tick input::before{content:"";width:.6rem;height:.6rem;border-radius:50%;background:var(--ox);transform:scale(0);transition:transform .12s var(--ease)}
.tick input:checked::before{transform:scale(1)}
.tick input:checked + span{color:var(--ox)}
.tick:hover input,.check:hover input{border-color:var(--ox)}
.ticks [aria-invalid=true]{border-color:var(--error);box-shadow:0 0 0 1px var(--error)}
.consent{margin-top:.35rem}
.check{display:grid!important;grid-template-columns:auto 1fr;gap:.7rem;align-items:start;font:400 1rem/1.4 var(--text)!important;letter-spacing:0!important;text-transform:none!important;color:var(--ink)!important;cursor:pointer}
.check input{margin-top:.12rem;border-radius:1px}
.check input::before{content:"";width:.7rem;height:.4rem;border-left:2px solid var(--ox);border-bottom:2px solid var(--ox);transform:translateY(-.08rem) rotate(-45deg) scale(0);transition:transform .12s var(--ease)}
.check input:checked::before{transform:translateY(-.08rem) rotate(-45deg) scale(1)}
.check input[aria-invalid=true]{border-color:var(--error);box-shadow:0 0 0 1px var(--error)}
.reply .btn{margin-top:.4rem}
.form__status{min-height:1.4rem;text-align:center;font-style:italic;font-size:.9375rem;color:var(--ink-2)}
.form__status.is-error{color:var(--error)}

.reply__done{display:flex;flex-direction:column;justify-content:flex-start;align-items:center;text-align:center;gap:.8rem;padding:1rem .5rem}
.reply__done:focus{outline:none}
.reply__done:focus-visible{outline:2px solid var(--ox);outline-offset:6px}
.reply__done .seal{width:6.5rem;height:6.5rem;margin-bottom:.25rem}
.done__title{font:italic 400 2rem/1.1 var(--display)}
.reply__done p:not(.smallcaps):not(.done__title){max-width:24rem;font-size:1.125rem;line-height:1.5}
.reply__done .done__note{font-size:1rem!important;font-style:italic;color:var(--ink-2)}
.reply__done b{color:var(--ox)}
.seal--stamp{animation:stamp .55s var(--ease) both}

/* ---------- the round table ---------- */
.meeting{padding:var(--section) 0;background:var(--linen-2) var(--grain);border-block:1px solid var(--rule)}
.meeting__grid{display:grid;grid-template-columns:minmax(0,8fr) minmax(0,4fr);grid-template-areas:"head head" "plate legend";gap:clamp(2rem,1rem + 2vw,3.5rem) clamp(2rem,1rem + 3vw,4.5rem);align-items:center}
.meeting__head{grid-area:head;max-width:46rem}
.plate{grid-area:plate;min-width:0}
.plate__sheet{position:relative;padding:clamp(.9rem,.5rem + 1.5vw,1.75rem)}
.plate__mark{position:relative;background:var(--plate);border-radius:2px;box-shadow:inset 1px 1px 0 rgba(255,255,255,.9),inset -1px -1px 0 rgba(80,55,30,.18),inset 3px 3px 6px rgba(80,55,30,.06),0 0 0 1px rgba(80,55,30,.1);padding:clamp(.5rem,.2rem + 1.5vw,1.5rem)}
.plate__crop{position:relative}
.plate__svg{display:block;width:100%;height:auto;overflow:visible}
.plate__art{position:relative}
.plate__img{display:block;width:100%;height:auto}
.plate__seat{position:absolute;border-radius:3px;transform:rotate(var(--seat-rot,0deg))}
.plate__seat:hover{background:rgba(255,255,255,.35);box-shadow:0 0 0 2px rgba(122,35,49,.35)}
.plate__seat:focus-visible{outline:2px solid var(--ox);outline-offset:3px}
.plate__wax{position:absolute;aspect-ratio:1;border-radius:50%;background:var(--ox);transform:translate(-50%,-50%);pointer-events:none}
.js .meeting .plate__wax{opacity:0}
.js .meeting.is-in .plate__wax{animation:stamp-dot .6s .5s var(--ease) both}
@keyframes stamp-dot{0%{opacity:0;transform:translate(-50%,-50%) scale(1.8)}60%{opacity:1;transform:translate(-50%,-50%) scale(.9)}100%{opacity:1;transform:translate(-50%,-50%)}}
.plate__caption{margin-top:1rem;text-align:center;font-style:italic;font-size:1rem;color:var(--ink-2)}
.meeting__legend{grid-area:legend}
.meeting__lead{font:italic 400 1.375rem/1.3 var(--display);color:var(--ink-2)}
.legend{margin-top:1rem;border-top:1px solid var(--rule-strong)}
.legend li{display:grid;grid-template-columns:2.75rem 1fr;align-items:center;gap:.5rem;padding:.85rem 0;border-bottom:1px dotted var(--rule-strong);font:400 clamp(1.25rem,1.1rem + .5vw,1.5rem)/1.25 var(--display)}
.legend__n{display:grid;place-items:center;width:2.1rem;height:2.1rem;border:1px solid var(--ox);border-radius:50%;font:italic 400 .9375rem/1 var(--display);color:var(--ox)}
.meeting__note{margin:1.5rem 0 1.75rem;font-size:1.25rem;font-style:italic;line-height:1.45}

/* engraving strokes */
:where(.plate__svg,.seat__svg) :where(:not([fill])){fill:none}
.plate__svg .paper,.seat__svg .paper{fill:var(--cotton)}
.plate__svg .ink-1,.plate__svg .ink-2,.plate__svg .ink-h,.seat__svg .ink-1,.seat__svg .ink-2,.seat__svg .ink-h{stroke:var(--ink);stroke-linejoin:round;stroke-linecap:round}
.plate__svg .ink-2,.seat__svg .ink-2{stroke-width:1.9}
.plate__svg .ink-1,.seat__svg .ink-1{stroke-width:1.1}
.plate__svg .ink-h,.seat__svg .ink-h{stroke-width:.7}
.plate__svg .stitch{stroke-dasharray:2 5}
.hl{stroke:var(--ink);stroke-width:.6}
.hl--mid{stroke-width:.85}
.hl--floor{stroke-width:.6}
.plate__svg .shadow,.seat__svg .shadow{opacity:.45}
.plate__svg .tone,.seat__svg .tone{opacity:.75}
:is(.plate__svg,.seat__svg) .rug__field{opacity:.35}
:is(.plate__svg,.seat__svg) .rug__orn{fill:var(--ox);stroke:none;opacity:.55}
:is(.plate__svg,.seat__svg) .floor{opacity:.45}
:is(.plate__svg,.seat__svg) .rays{opacity:.8}
.plate__svg .flame,.seat__svg .flame{fill:var(--ox)}
.card-top{fill:var(--cotton);stroke:var(--ox);stroke-width:1.6}
.shadow-card{fill:rgba(30,37,55,.16)}
.yours__text{font:italic 400 28px var(--display);fill:var(--ox)}
.yours__wax{fill:var(--ox);transform-box:fill-box;transform-origin:center}
.yours{cursor:pointer}
.yours:focus{outline:none}
.yours:focus-visible .card-top{fill:#fff;stroke:var(--ox);stroke-width:5}
.yours:hover .card-top{fill:#fff}
.key__line{stroke:var(--ox);stroke-width:1.1;stroke-dasharray:3 4}
.key__disc{fill:var(--cotton);stroke:var(--ox);stroke-width:1.4}
.key__dot{fill:var(--ox)}
.key__n{font:italic 400 22px var(--display);fill:var(--ox)}
.js .meeting .yours__wax{opacity:0}
.js .meeting.is-in .yours__wax{animation:stamp .6s .5s var(--ease) both}

/* ---------- the rule: sealed envelope ---------- */
.rule{--flap:clamp(8rem,4rem + 14vw,17rem);position:relative;padding:calc(var(--flap) + 4.5rem) 0 var(--section);background:var(--ox-deep) var(--grain);color:var(--on-ox);text-align:center}
.rule__flap{position:absolute;inset:0 0 auto 0;height:var(--flap);filter:drop-shadow(0 6px 8px rgba(20,4,6,.45))}
.rule__flap::before{content:"";position:absolute;inset:0;background:var(--ox-flap) var(--grain);clip-path:polygon(0 0,100% 0,50% 100%)}
.rule__seal{position:absolute;left:50%;top:calc(var(--flap) - 4.25rem);width:8.5rem;height:8.5rem;transform:translateX(-50%) rotate(8deg)}
.rule__kicker{color:var(--gilt)}
.rule__title{max-width:14em;margin:1.1rem auto 0;font:400 clamp(2.25rem,1.3rem + 3.4vw,4.375rem)/1.06 var(--display);text-wrap:balance}
.rule__title em{display:block;color:var(--gilt)}
.rule__confession{margin-top:.8rem;font:italic 400 clamp(1.4rem,1.2rem + .8vw,1.75rem)/1.3 var(--display)}
.rule__answer{font:400 clamp(1.5rem,1.2rem + 1.2vw,2.125rem)/1.3 var(--display)}
.rule__answer em{color:var(--gilt)}

/* seat detail (unused crop kept for the engraving tool) */
.seat__svg{display:block;width:100%;height:auto;overflow:visible}


/* ---------- how to get in ---------- */
.how{padding:calc(var(--section) * .4) 0 var(--section)}
.programme{position:relative;max-width:54rem;margin-inline:auto}
.programme__body{position:relative;padding:clamp(2.25rem,1rem + 4vw,4rem) clamp(1.5rem,.75rem + 4vw,4.5rem);text-align:center}
.programme__body::before{content:"";position:absolute;inset:.8rem;border:1px solid var(--frame);box-shadow:0 0 0 4px var(--cotton),0 0 0 5px var(--rule);pointer-events:none}
.steps{margin-top:2.25rem;text-align:left}
.steps li + li{margin-top:1.6rem}
.steps__row{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 .6rem}
.steps__n{font:italic 400 1.25rem/1 var(--display);color:var(--ox);min-width:2.25rem}
.steps__what{font:400 clamp(1.3rem,1.15rem + .6vw,1.625rem)/1.25 var(--display)}
.steps__dots{flex:1 1 2rem;min-width:2rem;border-bottom:2px dotted var(--rule-strong);transform:translateY(-.3rem)}
.steps__when{font-style:italic;font-size:1.1875rem;color:var(--ox)}
.steps__text{margin:.35rem 0 0 2.85rem;color:var(--ink-2);font-size:1.0625rem}
.qa{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,1rem + 3vw,4rem);max-width:54rem;margin:clamp(3rem,2rem + 2vw,4.5rem) auto 0}
.qa__item{border-top:1px solid var(--rule-strong);padding-top:1.25rem}
.qa h3{font:400 1.5rem/1.2 var(--display)}
.qa p{margin-top:.6rem;color:var(--ink-2)}

/* ---------- footer ---------- */
.foot{padding:2.5rem 0 3rem;border-top:1px solid var(--rule)}
.foot__row{display:flex;align-items:center;gap:1.25rem;font-size:1rem;color:var(--ink-2)}
.foot__emblem{flex:none;width:2.5rem;height:2.5rem;color:var(--ox)}
.foot__right{margin-left:auto;text-align:right;font-style:italic}

/* ---------- motion ---------- */
@keyframes rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes stamp{0%{opacity:0;transform:scale(1.6) rotate(-8deg)}60%{opacity:1;transform:scale(.94)}100%{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .meeting .yours__wax{opacity:1}
  .js .meeting .plate__wax{opacity:1}
}

/* ---------- responsive ---------- */
@media (max-width:1180px){
  .top__nav{display:none}
}
@media (max-width:1023px){
  .meeting__grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "plate" "legend"}
  .meeting__legend{max-width:40rem}
}
@media (max-width:767px){
  .top__row{min-height:3.75rem;gap:1rem}
  .mark__emblem{width:2rem;height:2rem}
  .mark__text{font-size:.9375rem;max-width:12rem}
  .mark__text small{display:none}
  .invite{padding:0 0 1rem}
  .envelope{display:none}
  .invite__emblem{width:2.5rem;height:2.5rem;margin-bottom:.6rem}
  .invite__kicker{margin-bottom:.9rem}
  .invite__line{margin-top:1rem}
  .fleuron{margin:1.25rem auto}
  .invite__when{flex-direction:column;gap:.7rem}
  .invite__when > div + div{border-left:0}
  .btn{letter-spacing:.1em;padding-inline:1.1rem}
  .field .tick{font-size:1.125rem}
  .ticks__row{gap:.1rem 1rem}
  .invite__from{margin-top:1.1rem;font-size:.8125rem}
  .invite__seal{width:5.5rem;height:5.5rem;right:-.5rem;bottom:-1.5rem}
  .field-pair{grid-template-columns:1fr;gap:0}
    .rule__card{text-align:left}
  .qa{grid-template-columns:1fr}
  .steps__text{margin-left:0}
  .foot__row{flex-wrap:wrap}
  .foot__right{margin-left:0;text-align:left;width:100%}
  .plate__crop{aspect-ratio:1/1;overflow:hidden}
  .plate__crop .plate__svg,.plate__crop .plate__art{position:absolute;width:150%;max-width:none;left:-25%;top:-50%}
  .plate__svg .key{display:none}
}
@media (max-width:420px){
  .btn--small{padding:.5rem .85rem;letter-spacing:.12em}
  .invite__card{padding:.9rem}
  .reply::after{inset:.5rem}
}
@media (max-width:360px){
  .top__row{gap:.75rem}
  .mark__text{font-size:.9375rem;max-width:9.5rem}
  .btn--small{padding:.45rem .7rem;letter-spacing:.08em;font-size:.8125rem}
  .invite__word{font-size:clamp(2rem,14cqi,5.5rem)}
}

/* ---------- utilities ---------- */
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

/* ---------- hero: invitation alone ---------- */
.hero--solo .hero__grid{grid-template-columns:minmax(0,46rem);justify-content:center}
.hero--solo{padding-bottom:clamp(3rem,2rem + 3vw,5rem)}

/* ---------- what it is ---------- */
.about{padding:clamp(2.5rem,1.5rem + 3vw,4.5rem) 0 clamp(1rem,.5rem + 2vw,2.5rem);text-align:center}
.about__inner{max-width:52rem}
.about__text{margin-top:1.1rem;font:400 clamp(1.625rem,1.2rem + 1.6vw,2.5rem)/1.22 var(--display);text-wrap:balance}
.about__not{margin-top:1.4rem;font-size:clamp(1.25rem,1.1rem + .5vw,1.4375rem);font-style:italic;color:var(--ink-2);text-wrap:balance}
.about__not em{display:block;color:var(--ox)}

/* ---------- CTA notes ---------- */
.meeting__legend .btn{width:100%;text-align:center}
.cta__note{margin-top:.75rem;font-style:italic;font-size:1rem;color:var(--ink-2)}

/* ---------- how we work: three cards ---------- */
.rule__ban{max-width:34em;margin:1.4rem auto 0;font-size:clamp(1.1875rem,1.05rem + .4vw,1.375rem);font-style:italic;color:var(--on-ox-2)}
.rule__cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.25rem,.75rem + 2vw,2.5rem);max-width:66rem;margin:clamp(3rem,2rem + 3vw,4.5rem) auto 0;text-align:left}
.rule__card{position:relative;padding:1.75rem 1.75rem 2rem;background:var(--cotton) var(--grain);color:var(--ink);box-shadow:0 14px 26px rgba(20,4,6,.35),0 1px 2px rgba(20,4,6,.3)}
.rule__card:nth-child(1){transform:rotate(-1.2deg)}
.rule__card:nth-child(2){transform:rotate(.8deg) translateY(.6rem)}
.rule__card:nth-child(3){transform:rotate(-.6deg)}
.rule__card-text{margin-top:.75rem;font-size:1.1875rem;line-height:1.45}
.rule__confession{font:italic 400 clamp(1.3rem,1.15rem + .5vw,1.5rem)/1.3 var(--display)}
.rule__answer{max-width:30em;margin:clamp(2.5rem,2rem + 2vw,4rem) auto 0}

/* ---------- how to get in: three answers ---------- */
.qa{grid-template-columns:repeat(3,minmax(0,1fr));max-width:66rem}

/* ---------- final CTA card ---------- */
.reply__inner{position:relative;z-index:1;display:grid;gap:1.25rem}
.reply--cta .reply__head{margin-bottom:0}
.cta-steps{display:grid;gap:.1rem}
.cta-steps li{display:flex;align-items:center;gap:.85rem;padding:.55rem 0;border-bottom:1px dotted var(--rule-strong);font:400 1.3125rem/1.25 var(--display)}
.cta-steps__n{display:grid;place-items:center;flex:none;width:2rem;height:2rem;border:1px solid var(--ox);border-radius:50%;font:italic 400 .9375rem/1 var(--display);color:var(--ox)}
.cta-quote{font-style:italic;font-size:1.0625rem;color:var(--ink-2);text-align:center;text-wrap:balance}

/* ---------- header back link (form + thanks pages) ---------- */
.top__back-short{display:none}
.top__back{font:italic 400 1.0625rem/1 var(--text);white-space:nowrap;padding:.5rem 0}

/* ---------- questionnaire page ---------- */
.form-page{padding:clamp(2rem,1rem + 3vw,4rem) 0 var(--section)}
.q-grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7.5fr);gap:clamp(2rem,1rem + 4vw,5rem);align-items:start}
.q-intro{position:sticky;top:6.5rem}
.q-intro__title{margin-top:.9rem}
.q-intro__lead{margin-top:1.1rem;font-size:1.1875rem;font-style:italic;color:var(--ink-2)}
.q-progress{margin-top:2rem;border-top:1px solid var(--rule-strong)}
.q-progress li{display:flex;align-items:center;gap:.85rem;padding:.7rem 0;border-bottom:1px dotted var(--rule-strong);font:400 1.25rem/1.2 var(--display);color:var(--ink-2)}
.q-progress__n{display:grid;place-items:center;flex:none;width:2rem;height:2rem;border:1px solid var(--rule-strong);border-radius:50%;font:italic 400 .9375rem/1 var(--display)}
.q-progress li[aria-current]{color:var(--ink)}
.q-progress li[aria-current] .q-progress__n{background:var(--ox);border-color:var(--ox);color:var(--cotton)}
.q-progress li.is-done .q-progress__n{border-color:var(--ox);color:var(--ox)}
.q-why{margin-top:1.75rem;font-size:1.0625rem;color:var(--ink-2)}
.q-why summary{cursor:pointer;font-style:italic;color:var(--ink);text-decoration:underline;text-decoration-color:var(--frame);text-underline-offset:.3em}
.q-why summary:hover{color:var(--ox)}
.q-why p{margin-top:.8rem}
.q-why b{color:var(--ink);font-weight:500}

.q-card{padding:clamp(1.75rem,1rem + 2.5vw,3.25rem) clamp(1.35rem,.75rem + 3vw,3.25rem) clamp(1.75rem,1rem + 2vw,2.75rem)}
.q-form{position:relative;z-index:1}
.q-trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.q-step__head{padding-bottom:1.1rem;margin-bottom:.5rem;border-bottom:1px solid var(--rule)}
.q-step__title{margin-top:.45rem;font:italic 400 clamp(1.875rem,1.5rem + 1.2vw,2.5rem)/1.1 var(--display)}
.q-step__title:focus{outline:none}
.q{padding:1.5rem 0 .4rem;border-bottom:1px dotted var(--rule)}
.q:last-of-type{border-bottom:0}
.q > legend.q__label{float:left;width:100%}
.q > legend.q__label + *{clear:both}
.q__label{display:block;padding:0;font:400 clamp(1.25rem,1.15rem + .35vw,1.4375rem)/1.3 var(--display);color:var(--ink)}
.q__req{color:var(--ox);margin-left:.15rem}
.q__hint{margin-top:.35rem;font-size:1rem;font-style:italic;line-height:1.45;color:var(--ink-2)}
.q__error{min-height:1.5rem;margin-top:.35rem;font:italic 400 1rem/1.4 var(--text);color:var(--error)}
.q input[type=text],.q input[type=tel],.q textarea{display:block;width:100%;margin-top:.6rem;min-height:3rem;padding:.55rem .75rem;border:1px solid var(--rule-strong);border-radius:2px;background:rgba(255,255,255,.55);color:var(--ink);font:400 1.1875rem/1.4 var(--text);transition:border-color .15s,background-color .15s,box-shadow .15s}
.q textarea{min-height:6.5rem;resize:vertical}
.q .q__input--short{max-width:8rem}
.q input:hover,.q textarea:hover{border-color:var(--ink)}
.q input[type=text]:focus,.q input[type=tel]:focus,.q textarea:focus{outline:none;border-color:var(--ox);background:#fff;box-shadow:0 0 0 2px rgba(122,35,49,.25)}
.q [aria-invalid=true]{border-color:var(--error);box-shadow:0 0 0 1px var(--error)}
.q input::placeholder,.q textarea::placeholder{color:#6A6D78;font-style:italic;opacity:1}

.choices{display:grid;gap:.6rem;margin-top:.85rem}
.choices--inline{grid-template-columns:repeat(auto-fit,minmax(9.5rem,1fr))}
.choice{position:relative;display:grid;grid-template-columns:auto 1fr;gap:.85rem;align-items:start;padding:.85rem 1rem;border:1px solid var(--rule-strong);border-radius:2px;background:rgba(255,255,255,.4);cursor:pointer;transition:border-color .15s,background-color .15s}
.choice:hover{border-color:var(--ink);background:rgba(255,255,255,.75)}
.choice input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.choice__mark{flex:none;width:1.3rem;height:1.3rem;margin-top:.1rem;border:1.5px solid var(--ink);background:var(--cotton);display:grid;place-content:center}
.choice input[type=radio] + .choice__mark{border-radius:50%}
.choice input[type=radio] + .choice__mark::before{content:"";width:.65rem;height:.65rem;border-radius:50%;background:var(--ox);transform:scale(0);transition:transform .12s var(--ease)}
.choice input[type=checkbox] + .choice__mark{border-radius:2px}
.choice input[type=checkbox] + .choice__mark::before{content:"";width:.75rem;height:.42rem;border-left:2px solid var(--ox);border-bottom:2px solid var(--ox);transform:translateY(-.08rem) rotate(-45deg) scale(0);transition:transform .12s var(--ease)}
.choice input[type=radio]:checked + .choice__mark::before{transform:scale(1)}
.choice input[type=checkbox]:checked + .choice__mark::before{transform:translateY(-.08rem) rotate(-45deg) scale(1)}
.choice:has(input:checked){border-color:var(--ox);background:rgba(122,35,49,.06)}
.choice:has(input:checked) .choice__text{color:var(--ox)}
.choice:has(input:focus-visible){outline:2px solid var(--ox);outline-offset:2px}
.choice__text{font-size:1.125rem;line-height:1.4}
.choice__other input{margin-top:0!important}
.q.is-invalid .choice{border-color:rgba(154,28,42,.55)}
.q--agree .check{margin-top:.85rem;font-size:1.125rem!important}
.q__quote{margin:.85rem 0 0;padding:1rem 1.25rem;border-left:3px solid var(--ox);background:rgba(122,35,49,.05);font:italic 400 1.125rem/1.5 var(--text);color:var(--ink)}
.q.is-invalid .check input{border-color:var(--error);box-shadow:0 0 0 1px var(--error)}

.q-nav{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-top:1.75rem;padding-top:1.25rem;border-top:1px solid var(--rule)}
.q-nav .btn{margin-left:auto;min-width:12rem}
.q-nav__back{font-size:1.125rem}
.q-nav__back[disabled]{opacity:.5;cursor:default}
.q-form .form__status{margin-top:1rem}
.q-saved{margin-top:.5rem;text-align:center;font-size:.9375rem;font-style:italic;color:var(--ink-2)}

/* ---------- thank-you page ---------- */
.thanks-page{padding:clamp(2.5rem,1.5rem + 4vw,5rem) 0 var(--section)}
.thanks{display:block}
.thanks__card{position:relative;width:100%;max-width:44rem;margin-inline:auto;padding:clamp(1.25rem,.75rem + 1.5vw,2rem);text-align:center;animation:rise .9s var(--ease) both}
.thanks__frame{display:grid;justify-items:center;gap:1rem}
.thanks__seal{width:7rem;height:7rem;margin-bottom:.25rem}
.thanks__title{font:italic 400 clamp(2.25rem,1.6rem + 2.4vw,3.5rem)/1.05 var(--display);color:var(--ox)}
.thanks__title:focus{outline:none}
.thanks__lead{max-width:30em;font-size:clamp(1.1875rem,1.1rem + .4vw,1.375rem);line-height:1.5;text-wrap:balance}
.thanks .fleuron{margin:.5rem auto}
.thanks__rule-kicker{color:var(--ink-2)}
.thanks__rule{margin-top:-.4rem;font:400 clamp(1.3rem,1.15rem + .6vw,1.625rem)/1.3 var(--display);text-wrap:balance}
.thanks__note{max-width:30em;font-style:italic;color:var(--ink-2)}
.thanks__date{font:italic 400 1.25rem/1.3 var(--display)}
.thanks__actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:1rem 1.75rem;margin-top:.75rem}
.thanks__share-status{min-height:1.4rem;font-style:italic;font-size:1rem;color:var(--ink-2);overflow-wrap:anywhere}

/* ---------- responsive: new blocks ---------- */
@media (max-width:1023px){
  .q-grid{grid-template-columns:minmax(0,1fr);max-width:44rem;margin-inline:auto}
  .q-intro{position:static}
  .q-progress{display:flex;gap:.5rem;border-top:0;margin-top:1.5rem}
  .q-progress li{flex:1;flex-direction:column;align-items:flex-start;gap:.4rem;padding:.6rem 0 0;border-bottom:0;border-top:3px solid var(--rule);font-size:1rem}
  .q-progress li[aria-current],.q-progress li.is-done{border-top-color:var(--ox)}
  .q-progress__n{display:none}
  .rule__cards{grid-template-columns:minmax(0,1fr);max-width:34rem}
  .rule__card:nth-child(n){transform:none}
  .qa{grid-template-columns:minmax(0,1fr);max-width:40rem}
}
@media (max-width:767px){
  .q-progress__title{font-size:.9375rem;line-height:1.2}
  .q-nav .btn{min-width:0;flex:1}
  .choice{padding:.8rem .85rem}
  .top__back{font-size:1rem}
}
@media (max-width:420px){
  .q-progress li{font-size:.875rem}
  .q-card{padding-inline:1.1rem}
}

/* ==================================================================
   v3 — varied rhythm: register / checklist band / letter / typeset run /
   articles / reply card on envelope (decisions A12)
   ================================================================== */
.nowrap{white-space:nowrap}

/* ---------- for whom: guest register ---------- */
.whom{padding:var(--section) 0 calc(var(--section) * .8)}
.whom__head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,27rem);gap:1.25rem clamp(2rem,1rem + 4vw,6rem);align-items:end;padding-bottom:clamp(1.75rem,1.25rem + 1.5vw,2.75rem)}
.whom__lead{font-size:1.3125rem;font-style:italic;line-height:1.45;color:var(--ink-2);text-wrap:pretty}
.roster{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border-top:3px double var(--rule-strong);border-bottom:1px solid var(--rule-strong)}
.roster li{display:grid;align-content:start;gap:.55rem;padding:1.5rem 1.25rem 1.85rem}
.roster li:first-child{padding-left:0}
.roster li:last-child{padding-right:0}
.roster li + li{border-left:1px dotted var(--rule-strong)}
.roster li::before{content:"\25C6";font-size:.625rem;line-height:1;color:var(--ox)}
.roster__name{font:400 clamp(1.3rem,1.1rem + .5vw,1.5625rem)/1.2 var(--display);text-wrap:balance}
.roster__note{font-size:1.0625rem;font-style:italic;line-height:1.4;color:var(--ink-2)}

/* ---------- recognise yourself: its own band, a checklist already marked ---------- */
.mirror{padding:calc(var(--section) * .85) 0;background:var(--linen-2) var(--grain);border-block:1px solid var(--rule)}
.mirror__title{text-align:center;font:italic 400 clamp(2.75rem,1.6rem + 4.2vw,5.25rem)/1 var(--display);color:var(--ox);letter-spacing:-.01em}
.mirror__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));max-width:68rem;margin:clamp(2.25rem,1.75rem + 2vw,3.75rem) auto 0}
.mirror__grid li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:1.35rem;padding:clamp(1.75rem,1rem + 2vw,2.75rem) clamp(1.25rem,.5rem + 2.5vw,3.25rem)}
.mirror__grid li:nth-child(odd){border-right:1px solid var(--rule-strong)}
.mirror__grid li:nth-child(-n+2){border-bottom:1px solid var(--rule-strong)}
.mirror__box{position:relative;width:2.1rem;height:2.1rem;margin-top:.15rem;border:1.5px solid var(--ink);background:var(--cotton)}
.mirror__box svg{position:absolute;left:-.05rem;top:-.7rem;width:2.6rem;height:2.6rem;overflow:visible}
.mirror__box path{fill:none;stroke:var(--ox);stroke-width:3.6;stroke-linecap:round;stroke-linejoin:round}
.mirror h3{font:400 clamp(1.4rem,1.2rem + .7vw,1.8125rem)/1.18 var(--display);text-wrap:balance}
.mirror p{margin-top:.55rem;max-width:30rem;color:var(--ink-2)}
.js .mirror__box path{stroke-dasharray:1;stroke-dashoffset:1}
.js .mirror.is-in .mirror__box path{animation:draw .45s var(--ease) forwards}
.js .mirror.is-in li:nth-child(2) path{animation-delay:.25s}
.js .mirror.is-in li:nth-child(3) path{animation-delay:.5s}
.js .mirror.is-in li:nth-child(4) path{animation-delay:.75s}
@keyframes draw{to{stroke-dashoffset:0}}

/* ---------- pastor's word: a folded letter on letterhead ---------- */
.letter{padding:var(--section) 0 calc(var(--section) * .9)}
.letter__sheet{position:relative;max-width:46rem;margin-inline:auto;transform:rotate(-.5deg)}
.letter__under{transform:rotate(2.6deg) translate(1rem,.9rem);background-color:#F2ECDF}
.letter__body{position:relative;z-index:1;padding:clamp(2.25rem,1rem + 4vw,4.25rem) clamp(1.5rem,.75rem + 4.5vw,5rem) clamp(2.25rem,1rem + 3.5vw,3.75rem);font-size:clamp(1.25rem,1.1rem + .5vw,1.4375rem);font-style:italic;line-height:1.6}
/* two soft folds: the letter was folded in three; shading only, never a line through the text */
.letter__body::before,.letter__body::after{content:"";position:absolute;z-index:-1;left:0;right:0;height:4rem;background:linear-gradient(rgba(90,65,40,0),rgba(90,65,40,.035) 50%,rgba(255,255,255,.22) 56%,rgba(255,255,255,0));pointer-events:none}
.letter__body::before{top:calc(33.3% - 1.75rem)}
.letter__body::after{top:calc(66.6% - 1.75rem)}
.letter__body p + p{margin-top:1.05em}
.letter__head{display:grid;justify-items:center;gap:.65rem;margin-bottom:clamp(1.75rem,1.25rem + 1.5vw,2.5rem);padding-bottom:1.25rem;border-bottom:3px double var(--frame);font-style:normal}
.letter__emblem{width:3rem;height:3rem;color:#E9E1D1;filter:drop-shadow(0 1px 0 rgba(255,255,255,.95)) drop-shadow(0 -1px 0 rgba(80,55,30,.4))}
.letter__title{font:400 clamp(1.75rem,1.45rem + 1vw,2.25rem)/1.1 var(--display);letter-spacing:.02em;color:var(--ink)}
.letter__hello{margin-bottom:.2em;font:italic 400 clamp(2.25rem,1.7rem + 2vw,3.25rem)/1.05 var(--display);color:var(--ox);letter-spacing:-.01em}
.letter__close{font-style:normal;font-family:var(--display);font-size:1.12em}
.letter__sign{display:grid;justify-items:end;margin-top:1.4em!important;font:italic 400 clamp(1.375rem,1.2rem + .5vw,1.625rem)/1.2 var(--display);color:var(--ink-2)}
.letter__swash{width:10.5rem;height:1.35rem;margin-top:.15rem;fill:none;stroke:var(--ox);stroke-width:1.8;stroke-linecap:round;opacity:.85}

/* ---------- values: one typeset run ---------- */
.values{padding:calc(var(--section) * .6) 0 calc(var(--section) * .7);text-align:center}
.values__inner{max-width:64rem}
.values__run{margin-top:clamp(1.75rem,1.25rem + 1.5vw,2.75rem);padding:clamp(1.5rem,1rem + 1.5vw,2.5rem) 0;border-top:3px double var(--rule-strong);border-bottom:3px double var(--rule-strong);font:400 clamp(1.35rem,.9rem + 1.5vw,2.25rem)/1.7 var(--display)}
.values__run li{display:inline;white-space:nowrap}
.values__run li:nth-child(even){font-style:italic;color:var(--ox)}
.values__run li + li::before{content:"\25C6";display:inline-block;margin:0 .7em 0 .4em;font-size:.32em;font-style:normal;color:var(--ox);vertical-align:.5em}
.values__run li:nth-child(4)::before,.values__run li:nth-child(6)::before{content:"\A";display:inline;margin:0;white-space:pre;font-size:inherit;vertical-align:baseline}

/* ---------- aims: five articles, 3 + 2 ---------- */
.aims{padding:calc(var(--section) * .7) 0 var(--section)}
.aims__head{max-width:40rem}
.articles{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(2.25rem,1.5rem + 2vw,3.5rem) clamp(1.5rem,1rem + 2.5vw,3.5rem);margin-top:clamp(2.25rem,1.75rem + 2vw,3.75rem)}
.articles li{grid-column:span 2;padding-top:1.25rem;border-top:1px solid var(--rule-strong)}
.articles li:nth-child(4){grid-column:2 / span 2}
.articles li:nth-child(5){grid-column:4 / span 2}
.articles__no{display:block;margin-bottom:.8rem;font:italic 400 clamp(2.5rem,1.9rem + 2vw,3.75rem)/1 var(--display);color:var(--ox)}
.articles h3{font:400 clamp(1.375rem,1.2rem + .6vw,1.75rem)/1.2 var(--display)}
.articles p{margin-top:.5rem;color:var(--ink-2)}

/* ---------- round table: legend follows the plate ---------- */
.meeting__grid{align-items:start}
.meeting__legend{position:sticky;top:7rem;padding-top:clamp(1rem,.5rem + 2vw,3rem)}

/* ---------- rule: notes keep their own height ---------- */
.rule__cards{align-items:start}

/* ---------- final CTA: the reply card on its envelope ---------- */
.answer{padding:var(--section) 0;background:var(--linen-2) var(--grain);border-top:1px solid var(--rule)}
.answer__inner{display:grid;justify-items:center;text-align:center}
.answer__copy{max-width:46rem}
.answer__copy p{max-width:34rem;margin:1.25rem auto 0;font-size:1.25rem;color:var(--ink-2);text-wrap:balance}
.answer__stage{position:relative;width:100%;max-width:36rem;margin-top:clamp(2.5rem,2rem + 2vw,4rem);padding-bottom:2.75rem;text-align:left}
.envelope--reply{left:-1.75rem;right:-1.75rem;bottom:0;height:44%;transform:rotate(1.8deg)}
.reply--cta{z-index:1}
.answer__ps{max-width:34rem;margin-top:clamp(1.75rem,1.25rem + 1.5vw,2.5rem);font-size:1.0625rem;font-style:italic;color:var(--ink-2);text-wrap:balance}
.answer__ps .smallcaps{font-style:normal;margin-right:.35rem}

/* ---------- thank-you + footer fixes ---------- */
.thanks .fleuron{width:min(16rem,70%)}

@media (max-width:1180px){
  .roster{grid-template-columns:minmax(0,1fr)}
  .roster li{grid-template-columns:1.5rem minmax(0,1fr) minmax(0,1.15fr);align-items:baseline;gap:.25rem 1rem;padding:1.05rem 0}
  .roster li:first-child,.roster li:last-child{padding-inline:0}
  .roster li + li{border-left:0;border-top:1px dotted var(--rule-strong)}
  .roster li::before{transform:translateY(-.2rem)}
}
@media (max-width:1023px){
  .whom__head{grid-template-columns:minmax(0,1fr)}
  .whom__lead{max-width:34rem}
  .meeting__legend{position:static;padding-top:0}
  .articles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .articles li,.articles li:nth-child(n){grid-column:auto}
}
@media (max-width:767px){
  .roster li{grid-template-columns:1.25rem minmax(0,1fr);gap:.2rem .5rem}
  .roster__note{grid-column:2}
  .mirror__grid{grid-template-columns:minmax(0,1fr);border-top:1px solid var(--rule-strong)}
  .mirror__grid li{gap:1rem;padding:1.6rem 0}
  .mirror__grid li:nth-child(odd){border-right:0}
  .mirror__grid li:nth-child(n){border-bottom:1px dotted var(--rule-strong)}
  .mirror__grid li:last-child{border-bottom:1px solid var(--rule-strong)}
  .mirror__box{width:1.75rem;height:1.75rem}
  .mirror__box svg{width:2.2rem;height:2.2rem;top:-.6rem}
  .letter__sheet{transform:none}
  .letter__under{transform:rotate(1.6deg) translate(.35rem,.6rem)}
  .letter__body::before,.letter__body::after{height:2.5rem}
  .values__run{line-height:1.45}
  .values__run li{display:block}
  .values__run li + li::before{display:block;margin:.35em auto;font-size:.3em;vertical-align:baseline}
  .values__run li:nth-child(4)::before,.values__run li:nth-child(6)::before{content:"\25C6";display:block;white-space:normal;font-size:.3em;margin:.35em auto;vertical-align:baseline}
  .articles{grid-template-columns:minmax(0,1fr);gap:0}
  .articles li{display:grid;grid-template-columns:3.25rem minmax(0,1fr);column-gap:.5rem;padding:1.35rem 0 1.5rem}
  .articles li + li{border-top-style:dotted}
  .articles__no{grid-row:span 2;margin:0;font-size:2.125rem}
  .answer__inner{text-align:left;justify-items:stretch}
  .answer__copy p{margin-left:0}
  .answer__stage{padding-bottom:0}
  .foot__row{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:start;gap:.9rem 1rem}
  .foot__right{grid-column:1 / -1}
  .q-intro__lead{font-size:1.0625rem}
  .q-progress{margin-top:1.1rem}
  .q-why{margin-top:1.1rem}
  .form-page{padding-top:1.5rem}
}
@media (prefers-reduced-motion:reduce){
  .js .mirror__box path{stroke-dashoffset:0}
}

/* ==================================================================
   Opening sequence (A13): sealed envelope → seal breaks → flap opens →
   the invitation rises out → the envelope settles behind it.
   The finished hero is the default; everything below runs only while
   html.env-play is set (head gate) and motion is allowed. Transform,
   opacity and clip-path only; the card's clip line follows the
   envelope's bottom edge, the front panel hides the part inside.
   ================================================================== */
.envelope-front{display:none}
.invite{
  --env-ey:clamp(-15rem,55vh - 45rem,-6rem);           /* envelope raised into the middle of the first screen; its open flap stays below the header */
  --env-d0:calc(54% + 3.25rem + var(--env-ey));          /* card start: just below the envelope mouth */
  --env-c0:calc(54% + 2.5rem);                           /* card clip at start: everything below the envelope's bottom edge */
  --env-c1:calc(-1 * var(--env-ey) - .75rem);            /* card clip when it has risen, before the envelope settles */
  --env-f:calc(100% - 2.75rem);                          /* front panel slides down until its mouth meets the card's bottom edge */
  --env-r:-1deg;                                         /* tilt while it is a closed envelope */
  --env-mb:.75rem;                                       /* mask bottom = card bottom + this (= envelope bottom at rest) */
  --env-mend:0rem;                                       /* mask offset at the end: far enough down to clip nothing */
  --env-t:2.8s;
}
@media (prefers-reduced-motion:no-preference){
  .env-play .invite > .envelope,.env-play .envelope-front{will-change:transform,opacity}
  .env-play .invite > .envelope{animation:env-back var(--env-t) both}
  .env-play .invite > .envelope .envelope__flap{inset:auto 0 100% 0;height:52%;background:#3B0F15 var(--grain);clip-path:polygon(0 100%,100% 100%,50% 0);transform-origin:50% 100%;animation:env-flap var(--env-t) both}
  .env-play .envelope-front{display:block;position:absolute;z-index:3;left:-.5rem;right:-.5rem;bottom:.5rem;height:46%;background:var(--ox-deep) var(--grain);transform-origin:center;animation:env-front var(--env-t) both;pointer-events:none}
  .env-play .envelope-front::before,.env-play .envelope-front::after{content:"";position:absolute;inset:0;background:#541820 var(--grain)}
  .env-play .envelope-front::before{clip-path:polygon(0 0,50% 60%,0 100%)}
  .env-play .envelope-front::after{clip-path:polygon(100% 0,50% 60%,100% 100%)}
  .envelope-front__lid{position:absolute;z-index:1;inset:0 0 auto 0;height:52%;transform-origin:50% 0;filter:drop-shadow(0 5px 6px rgba(20,4,6,.45))}
  .envelope-front__lid::before{content:"";position:absolute;inset:0;background:var(--ox-flap) var(--grain);clip-path:polygon(0 0,100% 0,50% 100%)}
  .env-play .envelope-front__lid{animation:env-lid var(--env-t) both}
  .envelope-front__seal{position:absolute;z-index:2;left:50%;top:52%;width:6.5rem;height:6.5rem}
  .env-play .envelope-front__seal{animation:env-seal var(--env-t) both}
  .envelope-front__to{position:absolute;z-index:1;left:0;right:0;bottom:12%;text-align:center;font:italic 400 clamp(1.25rem,1rem + .8vw,1.625rem)/1.2 var(--display);color:var(--gilt);letter-spacing:.02em}
  /* The letter's bottom is hidden by the .invite__mask box (overflow:hidden) whose bottom edge rides on the
     envelope's bottom edge. Both the mask and the letter only translate, so the browser composites the whole
     opening off the main thread — it stays smooth while the page is still laying out and loading fonts. */
  .env-play .invite__mask{position:relative;z-index:1;overflow:hidden;margin:-6rem -6rem calc(-1 * var(--env-mb));padding:6rem 6rem 0;will-change:transform;animation:env-mask var(--env-t) both}
  .env-play .invite__mask > .invite__card{margin-bottom:var(--env-mb);will-change:transform,opacity;animation:env-card var(--env-t) both}
  .env-play .invite > .envelope .envelope__to{animation:env-early-hide var(--env-t) both} /* no doubled address while front and back fade in */
  .env-play .invite__seal{animation:none}
  /* hold the opening (at its blank first frame) until fonts and first layout are done — app.js adds .env-go */
  .env-play:not(.env-go) .invite *,.env-play:not(.env-go) .invite__mask{animation-play-state:paused!important}
}
@keyframes env-back{
  0%{opacity:0;transform:translateY(calc(var(--env-ey) + 2rem)) rotate(var(--env-r));animation-timing-function:cubic-bezier(.2,.7,.2,1)}
  13%,82%{opacity:1;transform:translateY(var(--env-ey)) rotate(var(--env-r));animation-timing-function:cubic-bezier(.45,0,.3,1)}
  97%,100%{opacity:1;transform:rotate(-2.2deg)}
}
/* the front never fades over the card: it slides down off it (the card is held, the envelope pulled away),
   and only fades once it is entirely below the card's bottom edge */
@keyframes env-front{
  0%{opacity:0;transform:translateY(calc(var(--env-ey) + 2rem)) rotate(var(--env-r));animation-timing-function:cubic-bezier(.2,.7,.2,1)}
  13%,82%{opacity:1;transform:translateY(var(--env-ey)) rotate(var(--env-r));animation-timing-function:cubic-bezier(.45,0,.3,1)}
  97%{opacity:1;transform:translateY(var(--env-f)) rotate(var(--env-r))}
  100%{opacity:0;transform:translateY(var(--env-f)) rotate(var(--env-r))}
}
@keyframes env-lid{
  0%,25%{opacity:1;transform:perspective(70rem) rotateX(0);animation-timing-function:cubic-bezier(.5,0,.9,.4)}
  38%{opacity:1;transform:perspective(70rem) rotateX(-90deg)}
  38.5%,100%{opacity:0;transform:perspective(70rem) rotateX(-90deg)}
}
@keyframes env-flap{
  0%,38%{opacity:0;transform:perspective(70rem) rotateX(90deg)}
  38.5%{opacity:1;transform:perspective(70rem) rotateX(90deg);animation-timing-function:cubic-bezier(.15,.6,.3,1)}
  52%,100%{opacity:1;transform:perspective(70rem) rotateX(0)}
}
@keyframes env-seal{
  0%,19%{opacity:1;transform:translate(-50%,-50%) rotate(-8deg) scale(1)}
  24%{opacity:1;transform:translate(-50%,-52%) rotate(-3deg) scale(1.08)}
  31%,100%{opacity:0;transform:translate(-50%,-68%) rotate(6deg) scale(1.16)}
}
@keyframes env-early-hide{0%,13%{opacity:0}14%,100%{opacity:1}}
@keyframes env-mask{
  0%{transform:translateY(calc(var(--env-ey) + 2rem));animation-timing-function:cubic-bezier(.2,.7,.2,1)}
  13%,82%{transform:translateY(var(--env-ey));animation-timing-function:cubic-bezier(.45,0,.3,1)}
  97%,100%{transform:translateY(var(--env-mend))}
}
/* position of the letter inside the mask = its page position minus the mask's offset */
@keyframes env-card{
  /* hidden while the envelope fades in (0–13%), so the letter never shows before its envelope */
  0%,13%{opacity:0}
  14%,100%{opacity:1}
  0%,46%{transform:translateY(calc(var(--env-d0) - var(--env-ey)));animation-timing-function:cubic-bezier(.25,.75,.3,1)}
  82%{transform:translateY(calc(-1 * var(--env-ey)));animation-timing-function:cubic-bezier(.45,0,.3,1)}
  97%,100%{transform:translateY(calc(-1 * var(--env-mend)))}
}
@keyframes env-back-m{
  0%{opacity:0;transform:translateY(calc(var(--env-ey) + 2rem)) rotate(var(--env-r));animation-timing-function:cubic-bezier(.2,.7,.2,1)}
  13%,82%{opacity:1;transform:translateY(var(--env-ey)) rotate(var(--env-r));animation-timing-function:cubic-bezier(.45,0,.3,1)}
  97%{opacity:1;transform:translateY(var(--env-f)) rotate(var(--env-r))}
  100%{opacity:0;transform:translateY(var(--env-f)) rotate(var(--env-r))}
}
@media (max-width:767px){
  .invite{
    --env-ey:clamp(-30rem,52vh - 46rem,-4rem);
    --env-d0:calc(100% - 10.5rem + var(--env-ey));
    --env-c0:calc(100% - 9.5rem);
    --env-c1:calc(1rem - var(--env-ey));
    --env-f:calc(100% - .5rem);
    --env-r:-.6deg;
    --env-mb:-1rem;
    --env-mend:1rem;
  }
}
@media (max-width:767px) and (prefers-reduced-motion:no-preference){
  .env-play .invite > .envelope,.env-play .envelope-front{display:block;left:-.75rem;right:-.75rem;bottom:.5rem;height:13rem}
  .env-play .invite > .envelope{animation-name:env-back-m}
  .envelope-front__seal{width:4.75rem;height:4.75rem}
  .envelope-front__to{bottom:10%;font-size:1.125rem}
}
@media (max-width:767px){
  .q-intro__date{display:block;margin-top:.2rem}
  .q-intro__sep{display:none}
}

/* ---------- mobile readability (client: "в целом ок, но местами мелко, например на первом экране") ----------
   Same typefaces; on phones the small/secondary text gets a higher floor and darker ink,
   and the invitation card gives its text a wider column. */
@media (max-width:767px){
  :root{--ink-2:#3B3F4C}

  /* header */
  .mark__text{font-size:1rem;max-width:none}

  /* first screen: wider text column inside the card */
  .invite__card{padding:.55rem}
  .invite__frame{padding:1.75rem .95rem 1.9rem}
  .invite__kicker{font-size:1rem;letter-spacing:.14em}
  .invite__word{font-size:clamp(2.6rem,17cqi,3.5rem)}
  .invite__rest{font-size:clamp(1.5rem,8cqi,1.85rem);line-height:1.18}
  .invite__line{font-size:1.3125rem;line-height:1.42;color:var(--ink)}
  .invite__when dt{font-size:.9375rem;letter-spacing:.14em}
  .invite__when dd{font-size:1.625rem}
  .invite__note{font-size:1.1875rem;line-height:1.45;color:var(--ink)}
  .invite__from{font-size:.9375rem;letter-spacing:.08em;line-height:1.5}

  /* labels and small print across the page */
  .smallcaps{font-size:.9375rem;letter-spacing:.14em}
  .plate__caption,.cta__note,.reply__sub,.cta-quote,.answer__ps,.roster__note,.steps__text{font-size:1.125rem;line-height:1.5}
  .foot__row,.foot__right{font-size:1.0625rem}
  .btn{font-size:1rem}

  /* questionnaire */
  .top__back{font-size:1.0625rem}
  .top__back-full{display:none}
  .top__back-short{display:inline}
  .q-intro__lead,.q-why{font-size:1.1875rem}
  .q__hint{font-size:1.0625rem;color:var(--ink-2)}
  .choice__text{font-size:1.1875rem}
  .q-saved{font-size:1rem}
}

/* ---------- performance: phones lay out and paint only what is near the screen ----------
   Sections below the first screen are skipped until they approach the viewport; the browser
   remembers their real height after the first render (contain-intrinsic-size:auto). */
main > section:not(.hero){content-visibility:auto;contain-intrinsic-size:auto 900px}

/* ---------- ?lite=1 test mode: no live paper effects (see tools/shell.mjs) ---------- */
html.lite{--grain:none;--paper-shadow:none}
html.lite *,html.lite *::before,html.lite *::after{filter:none!important}