/* Hall House stationery. One card shape for every scene: heavy cream stock bound in an evergreen
   border with a double brass rule. Landscape on wide screens, portrait on phones.
   The page behind it is slate, like the front steps. Loaded after globals.css. */

.stationery-mode{background:#4a2616;position:relative;isolation:isolate}
/* the desk: real mahogany (ambientCG Wood026, graded), lit from a window at the upper left */
.stationery-mode:before{
  content:'';position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:url('/media/mahogany.webp') center/1200px 1200px;
}
.stationery-mode:after{
  content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    linear-gradient(116deg,transparent 22%,rgba(255,230,195,.05) 40%,rgba(255,230,195,.12) 49%,rgba(255,230,195,.05) 58%,transparent 76%),
    radial-gradient(ellipse 120% 100% at 50% 45%,rgba(20,8,5,.08) 35%,rgba(10,4,2,.62) 100%),
    linear-gradient(180deg,rgba(10,4,2,.3),rgba(10,4,2,.04) 35%,rgba(10,4,2,.38));
}
/* the desk pad: aged brown leather (ambientCG Leather014, graded), gilt-tooled like Christian's desk:
   a trefoil roll on a fine rule at the edge, mitred at the corners */
.desk-pad{
  width:100%;max-width:470px;margin:0 auto;padding:38px 30px;position:relative;border-radius:2px;
  background:#3a2015 url('/media/leather-brown.webp') center/700px 700px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),inset 0 -1px 0 rgba(0,0,0,.5),inset 0 0 40px rgba(0,0,0,.25),
    0 1px 2px rgba(0,0,0,.6),0 10px 20px -6px rgba(0,0,0,.55),0 40px 60px -20px rgba(0,0,0,.55);
}
.desk-pad:before{content:'';position:absolute;inset:5px;pointer-events:none;
  border:8px solid transparent;border-image:url('/media/tooling-trefoil.svg') 16 round;opacity:.92}
.quiet-nav,.stationery-stage{position:relative;z-index:1}
.quiet-nav{color:#ecdfc8;justify-content:flex-start}.quiet-nav .back-link,.quiet-nav button:first-child.back-link{text-transform:none;letter-spacing:.02em;font-size:13px;font-style:italic;letter-spacing:.02em;text-transform:none;color:#e6d9bf;opacity:.8;text-shadow:0 1px 2px rgba(0,0,0,.6)}.back-link:hover{opacity:1}.quiet-nav .back-link span{display:inline;font-style:normal;font-size:inherit;letter-spacing:0;margin:0 5px 0 0;color:inherit}
.stationery-stage{padding:10px 16px 28px}

/* ---------- the card: heavy cream stock, a double brass rule inside the edge ---------- */
.card{
  width:100%;margin:0 auto;padding:0;position:relative;
  /* Already resting on the leather pad when the complete desk scene is revealed. */
}
/* the sheet itself: cut edges that wander a hair off true, a slight bow, and a shadow that is
   tighter where the card sits flat and softer at the lower right where it lifts a little */
.paper-sheet-wrap{position:absolute;inset:0;z-index:1;pointer-events:none;
  filter:drop-shadow(0 1px .6px rgba(0,0,0,.55)) drop-shadow(2px 4px 4px rgba(0,0,0,.30)) drop-shadow(7px 16px 18px rgba(0,0,0,.38))}
.paper-sheet{position:absolute;inset:0;
  background:#f1ebdd url('/media/paper-stock.webp') center/1024px 1024px;
  box-shadow:inset 0 0 0 1px rgba(122,100,70,.22),inset 0 1px 0 rgba(255,255,255,.7),inset -2px -2px 6px rgba(90,70,40,.06);
  clip-path:polygon(.14% .16%,11% .03%,24% .21%,39% .05%,53% .16%,67% .04%,83% .19%,99.84% .11%,99.95% 18%,99.76% 35%,99.96% 53%,99.79% 72%,99.91% 99.85%,78% 99.94%,52% 99.78%,27% 99.92%,.14% 99.83%,.03% 81%,.19% 61%,.02% 42%,.14% 20%)}
.card:before{content:'';position:absolute;inset:10px;border:1px solid rgba(168,138,84,.8);pointer-events:none;z-index:3}
.card:after{content:'';position:absolute;inset:13px;border:1px solid rgba(168,138,84,.3);pointer-events:none;z-index:3}
.card-face{
  position:relative;z-index:2;min-height:100%;
  background:transparent;
  color:#2b2420;text-align:center;padding:38px 26px 34px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
}
.card-face:before{content:'';position:absolute;inset:3px;pointer-events:none;
  background:linear-gradient(180deg,rgba(60,45,25,.06),rgba(60,45,25,0) 14%,rgba(255,255,255,.22) 60%)}
.card-face>*{position:relative}
/* letterpress: SVG filter (#letterpress in Experience.tsx) mottles the ink, blurs it a hair,
   shades the upper lip of the impression and lights the lower lip. Ink multiplies into the stock. */
.pressed{filter:url(#letterpress);mix-blend-mode:multiply}
.card-face h1,.card-face p,.card-face legend,.card-face label,.card-face .ink-button,.card-face .fanlight{filter:url(#letterpress)}
.card-face h1,.card-face p,.card-face legend,.card-face .fanlight{mix-blend-mode:multiply}
.card-face p,.card-face h1,.card-face label,.card-face legend{text-shadow:none}
.where:before{box-shadow:0 1px 0 rgba(255,255,255,.7),inset 0 1px 0 rgba(0,0,0,.15)}
.card:before{box-shadow:0 1px 0 rgba(255,255,255,.6),inset 0 1px 0 rgba(255,255,255,.4)}
.ink-button{box-shadow:inset 0 0 0 3px #f1ebdd,inset 0 0 0 4px rgba(142,31,38,.35)}
.ink-button:hover{filter:none}

/* ornaments */
.fanlight{display:block;width:84px;height:auto;margin:0 auto 16px}
.dot{color:#8e1f26;padding:0 .45em}

/* invitation: a classic At Home card. The hosts are the headline. */
.personal-greeting{font-style:italic;font-size:12px;margin:0 0 14px;color:#6b5a46}
.hosts{
  font-weight:400;margin:0;display:flex;flex-direction:column;align-items:center;
  font-size:clamp(22px,6.2vw,30px);line-height:1.15;letter-spacing:-.01em;color:#1f2a21;
}
.hosts span{white-space:nowrap}
.hosts em{font-style:italic;color:#8e1f26;font-size:.8em;line-height:1.1;padding:2px 0}
.at-home{font-style:italic;font-size:clamp(13px,3.6vw,15px);margin:12px 0 2px;color:#5a4c3d}
.occasion{font-style:italic;font-size:clamp(16px,4.5vw,20px);line-height:1.25;margin:0 0 22px;color:#2b2420}
.when{font-size:clamp(15px,4.2vw,17px);line-height:1.5;margin:0}
.when span{font-style:italic;font-size:.92em;color:#4a3e32}
.where{font-size:13.5px;line-height:1.6;margin:14px 0 24px;color:#4a3e32;padding-top:12px;position:relative}
.where:before{content:'';position:absolute;top:0;left:50%;width:26px;height:1px;background:#a89066;transform:translateX(-50%)}
.colophon em{display:block;font-style:italic;letter-spacing:.02em;font-size:10px;margin-top:6px;text-transform:none;color:#cdc3a8}

.ink-button{
  display:inline-flex;justify-content:center;align-items:center;min-height:44px;width:auto;max-width:none;
  padding:11px 30px 11px calc(30px + .24em);text-transform:uppercase;letter-spacing:.24em;font-size:10px;
  border:1px solid #8e1f26;color:#8e1f26;background:transparent;
  box-shadow:inset 0 0 0 3px #f1ebdd,inset 0 0 0 4px rgba(142,31,38,.35);
  transition:background .2s,color .2s,box-shadow .2s;
}
.ink-button:hover{background:#8e1f26;color:#f6efe2;box-shadow:inset 0 0 0 3px #8e1f26,inset 0 0 0 4px rgba(222,190,120,.7)}

@font-face{font-family:Pen;src:url('/fonts/Delafield.ttf') format('truetype');font-display:swap}
/* reply: a printed reply card with a pen line, a blank to tick, and a blank for the number. */
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.reply-card{width:100%;max-width:440px;margin:0 auto;text-align:center}
.reply-card .fanlight{margin-bottom:14px}
.card-heading{letter-spacing:.12em;font-size:12.5px;line-height:1.6;margin:0}
.reply-intro{font-style:italic;font-size:13px;margin:2px 0 26px;color:#5a4c3d}
.reply-form{margin:0;max-width:none;width:100%;text-align:left}
.reply-form .m-line{display:flex;align-items:baseline;gap:10px;margin:0 0 26px;font-size:16px;position:relative}
.reply-form .m-line:after{content:'';position:absolute;left:0;right:0;bottom:11px;height:1px;background:#6b5a46;pointer-events:none}
.reply-form .m-line:focus-within:after{background:#8e1f26}
.reply-form .m-line input{
  flex:1;border:0;border-bottom:1px solid #6b5a46;border-radius:0;background:transparent;box-shadow:none;
  font-family:Pen,cursive;font-style:normal;font-size:34px;line-height:1;color:#1d2b4f;padding:14px 10px 0;border-bottom:0;margin:0;min-height:0;
  caret-color:#1d2b4f;
}
.reply-form .m-line input::placeholder{font-family:var(--serif);color:#9c8f7c;font-size:14px;font-style:italic;letter-spacing:.02em}
.reply-form .m-line input:focus{outline:none;border-bottom-color:#8e1f26}
.reply-form .field-error:not([hidden]){align-self:flex-start;margin:-17px 0 18px 2px;padding:5px 10px;border-left:2px solid #8e1f26;background:rgba(142,31,38,.045);color:#762831;font-size:12px;font-style:italic;line-height:1.35}
.reply-form .attendance-error:not([hidden]){margin:-10px 0 17px 2px}
.tick-set{border:0;padding:0;margin:0 0 18px;min-width:0}
.reply-form .tick-line{display:flex;align-items:baseline;gap:16px;cursor:pointer;margin:0 0 14px;font-size:16px;line-height:1.4;color:#2b2420;padding-left:2px;position:relative}
.tick-line input{position:absolute;opacity:0;width:1px;height:1px}
.blank{position:relative;flex:0 0 38px;height:1px;background:#6b5a46;transform:translateY(1px)}
.blank svg{position:absolute;left:2px;bottom:-5px;width:38px;height:26px;fill:none;stroke:#1d2b4f;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.blank .pen-a{stroke-width:1.6;stroke-dasharray:20;stroke-dashoffset:20;transition:stroke-dashoffset .18s ease}
.blank .pen-b{stroke-width:2.1;stroke-dasharray:40;stroke-dashoffset:40;transition:stroke-dashoffset .3s ease .15s}
.tick-line.selected .pen-a,.tick-line.selected .pen-b{stroke-dashoffset:0}
.tick-line:hover .blank{background:#8e1f26}
.tick-line input:focus-visible~.tick-label{outline:2px solid #735833;outline-offset:4px}
.tick-label{font-style:italic}
.reply-form .party-line{display:flex;align-items:baseline;gap:12px;font-size:15px;padding-left:2px;position:relative}
.reply-form .party-line:after{content:'';position:absolute;left:150px;width:56px;bottom:10px;height:1px;background:#6b5a46;pointer-events:none}.reply-form .party-line label{font-size:15px;display:inline}.reply-form .party-line{padding-left:2px;margin:0 0 26px;color:#2b2420;transition:opacity .25s}
.reply-form .party-line.is-hidden{opacity:0;pointer-events:none;height:0;margin:0;overflow:hidden}
.reply-form .party-line select{
  width:56px;min-height:0;margin:0;padding:12px 2px 0;border:0;border-radius:0;background:transparent;box-shadow:none;
  font-family:Pen,cursive;font-style:normal;font-size:30px;color:#1d2b4f;text-align:center;text-align-last:center;cursor:pointer;
}
.reply-form .party-line select:focus{outline:none;border-bottom-color:#8e1f26}
.reply-form .ink-button{display:inline-flex;margin:4px auto 0}
.reply-form{display:flex;flex-direction:column}
.reply-form .ink-button{align-self:center}
.form-error{font-family:inherit;text-align:center}
.reply-card .friend-line{margin:26px auto 0;font-size:13.5px;max-width:none;font-style:italic;color:#4a3e32}

/* confirmation */
.confirmation-heading{margin-top:14px}
.confirmation-heading~.ink-button{margin-top:8px}
.ornament{color:#8e1f26}
.colophon{color:#d6c7a8;position:relative;z-index:1;text-shadow:0 1px 2px rgba(0,0,0,.6)}

@media(max-width:759px){.card-invitation .card-face{min-height:600px}}

/* landscape card on wide screens */
@media(min-width:760px){
  .stationery-stage{padding:18px 32px 40px}
  .desk-pad{max-width:1060px;padding:60px 76px}
  .desk-pad:before{inset:10px;border-width:13px}
  .card:before{inset:12px}.card:after{inset:15px}
  .card-face{min-height:540px;padding:44px 56px 40px}
  .fanlight{width:96px;margin-bottom:20px}
  .hosts{flex-direction:row;align-items:baseline;gap:.25em;font-size:clamp(27px,3.1vw,40px)}
  .hosts em{font-size:.8em;padding:0}
  .at-home{font-size:16px;margin-top:16px}
  .occasion{font-size:27px;margin-bottom:26px}
  .when{font-size:19px}
  .where{font-size:14.5px;margin-bottom:28px}

  .card-reply .card-face{justify-content:center}
}
/* Desk, leather pad and paper are revealed as one stationary composition. */
@media(min-width:760px) and (max-height:800px){
  .quiet-nav{padding:13px 30px 7px}
  .stationery-stage{padding:4px 22px 16px}
  .desk-pad{padding:25px 54px}
  .card-face{min-height:495px}
}