/* Single deliberate look: a walnut writing desk by lamplight. Colours set explicitly. */
:root{
  color-scheme: dark;
  --walnut:#3a2415;
  --walnut-deep:#1d110a;
  --paper:#f1e6cc;
  --paper-edge:#dccaa3;
  --brass-lo:#8f6a2c;
  --brass-hi:#e9d08f;
  --engrave:#3a2810;
  --leather:#22140e;
  --leather-hi:#3a2519;
  --gilt:#d8b86e;
  --ink-black:24,20,28;
  --ink-blue:26,50,122;
  --pw:75vw;
  --fell:"IM Fell English", "Iowan Old Style", Georgia, serif;
  --fellsc:"IM Fell English SC", "Iowan Old Style", Georgia, serif;
}
@media (max-width:640px){ :root{ --pw:calc(100vw - 32px); } }
html,body{ background:var(--walnut-deep); }
body{ color:var(--paper); font-family:var(--fell); overflow-x:hidden; }

.desks{ position:fixed; inset:0; z-index:0; overflow:hidden; }
.desk{ position:absolute; inset:0; background:var(--walnut) center/cover no-repeat;
  transform:translateX(100%); transition:transform 1.6s cubic-bezier(.65,0,.35,1); }
.desk.here{ transform:none; }
.desk.gone{ transform:translateX(-100%); }
.desk.notrans{ transition:none; }
.leather{ position:absolute; top:-2vh; bottom:-2vh; left:50%; transform:translateX(-50%);
  width:min(94vw, calc(var(--pw) + 14vw));
  background:var(--leather-c, #24402a) var(--leather-tex, none);
  box-shadow:0 0 0 1px rgba(0,0,0,.45), inset 0 0 28px rgba(0,0,0,.55), 0 0 18px rgba(0,0,0,.35); }
.leather[hidden]{ display:none; }
.leather::before{ content:""; position:absolute; inset:0 10px; border-left:1px solid rgba(216,184,110,.55); border-right:1px solid rgba(216,184,110,.55); }
.leather::after{ content:""; position:absolute; inset:0 15px; border-left:1px dotted rgba(216,184,110,.4); border-right:1px dotted rgba(216,184,110,.4); }
.lamp{ position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(120% 90% at 18% 0%, rgba(255,196,120,.20), transparent 55%),
    radial-gradient(140% 120% at 50% 50%, transparent 45%, rgba(8,4,2,.72) 100%); }

/* the envelope that carries each letter across London */
.envelope{ --env:#e9dcbd; position:fixed; left:50%; top:46%; z-index:3; width:min(460px, calc(100vw - 48px)); aspect-ratio:1.75;
  background-color:var(--env);
  background-image:var(--paper-tex, none),
    linear-gradient(to top right, transparent calc(50% - 1px), rgba(120,90,50,.13) 50%, transparent calc(50% + 1px)),
    linear-gradient(to top left, transparent calc(50% - 1px), rgba(120,90,50,.13) 50%, transparent calc(50% + 1px));
  background-size:auto, 50% 62%, 50% 62%; background-position:0 0, 0 100%, 100% 100%; background-repeat:repeat, no-repeat, no-repeat;
  box-shadow:0 1px 0 #cdbb92, 0 14px 30px rgba(0,0,0,.5);
  transform:translate(-50%,-50%) scale(.5) rotate(-4deg); opacity:0;
  transition:transform .8s cubic-bezier(.2,.8,.2,1), opacity .5s ease, box-shadow .8s ease; }
.envelope[hidden]{ display:none; }
.envelope.in{ opacity:1; transform:translate(-50%,-50%) rotate(-1.5deg); }
.envelope.lift{ transform:translate(-50%,-56%) rotate(1.2deg) scale(1.07); box-shadow:0 1px 0 #cdbb92, 0 40px 60px rgba(0,0,0,.45); }
.envelope.aside{ opacity:0; transform:translate(-170%,25%) rotate(-24deg) scale(.8); transition:transform 1.1s cubic-bezier(.5,0,.75,.4), opacity 1s ease .2s; }
.env-addr{ position:absolute; left:22%; top:40%; right:6%; margin:0; font-family:var(--hand); font-weight:var(--hw,400);
  font-size:calc(clamp(15px, 3.4vw, 22px) * var(--hs)); line-height:1.35; color:rgb(var(--ink)); }
.env-addr span{ display:block; white-space:nowrap; }
.env-addr span:nth-child(2){ padding-left:1.4em; } .env-addr span:nth-child(3){ padding-left:2.8em; } .env-addr span:nth-child(4){ padding-left:4.2em; }
.env-stamp{ position:absolute; top:9%; right:6%; width:12%; height:25%; background:#8b72ab; overflow:hidden;
  outline:3px dotted var(--env); outline-offset:-2px; box-shadow:0 0 0 1px rgba(90,70,110,.25);
  display:flex; flex-direction:column; align-items:center; justify-content:space-between; padding:6% 0 5%; box-sizing:border-box;
  font:700 5px/1 Georgia, serif; letter-spacing:.04em; color:#efe6f6; white-space:nowrap; }
.env-stamp i{ display:block; width:52%; flex:1; margin:2px 0; border-radius:50%; background:radial-gradient(ellipse at 45% 40%, #c9b8dc, #8b72ab 75%); }
.env-post{ position:absolute; top:3%; right:12%; width:34%; aspect-ratio:2.1; opacity:0; transform:scale(1.5) rotate(-8deg); transition:opacity .08s, transform .12s ease-in; }
.env-post.stamped{ opacity:.8; transform:scale(1) rotate(-8deg); }
.env-post svg{ width:100%; height:100%; display:block; overflow:visible; }

main{ position:relative; z-index:1; overflow-x:clip; padding-block:28px 150px; min-height:100vh; }

.plaque{ width:max-content; max-width:calc(100vw - 32px); margin:0 auto 34px; padding:10px 30px 9px;
  background:linear-gradient(175deg, var(--brass-hi) 0%, #c9a358 38%, var(--brass-lo) 62%, #d8b870 100%);
  border-radius:3px; box-shadow:0 1px 0 rgba(255,240,200,.5) inset, 0 -1px 0 rgba(0,0,0,.35) inset, 0 6px 16px rgba(0,0,0,.55);
  text-align:center; color:var(--engrave); position:relative; transition:opacity .6s ease; }
.plaque.away{ opacity:0; }
.plaque::before,.plaque::after{ content:""; position:absolute; top:50%; width:7px; height:7px; margin-top:-3.5px; border-radius:50%;
  background:radial-gradient(circle at 35% 35%, #fff3c8, #7a5a22 70%); box-shadow:0 1px 1px rgba(0,0,0,.5); }
.plaque::before{ left:10px } .plaque::after{ right:10px }
.plaque h1{ margin:0; font:400 clamp(20px,2.6vw,30px)/1.1 var(--fellsc); letter-spacing:.16em; text-wrap:balance;
  text-shadow:0 1px 0 rgba(255,236,180,.55), 0 -1px 0 rgba(0,0,0,.25); }
.plaque p{ margin:3px 0 0; font:italic 13px/1.3 var(--fell); letter-spacing:.04em; opacity:.85; }

/* ---------- the sheet ---------- */
.stage{ position:relative; min-height:60vh; }
.sheet{ position:relative; width:var(--pw); margin:0 auto; box-sizing:border-box;
  min-height:calc(var(--pw) * 1.28);
  padding:calc(var(--pw)*.065) calc(var(--pw)*.085) calc(var(--pw)*.11);
  background-color:var(--paper);
  background-image:var(--paper-tex, none),
    radial-gradient(130% 100% at 50% 40%, transparent 62%, rgba(150,112,58,.28) 100%),
    linear-gradient(180deg, rgba(255,255,255,.18), transparent 30%);
  box-shadow:0 2px 0 var(--paper-edge), 0 28px 60px rgba(0,0,0,.55), 0 6px 14px rgba(0,0,0,.35);
  font-family:var(--hand); font-weight:var(--hw,400);
  font-size:calc(clamp(20px, 2.05vw, 38px) * var(--hs));
  line-height:var(--lh);
  color:rgb(var(--ink));
  transform:translateY(115vh) rotate(6deg);
  transition:transform 1.6s cubic-bezier(.16,.84,.24,1);
  will-change:transform; }
.sheet.placed{ transform:rotate(var(--tilt)); }
.sheet.fold{ transform:rotate(var(--tilt)) scale(.3,.1); opacity:0; transition:transform .85s cubic-bezier(.5,0,.3,1), opacity .6s ease .25s; }
.letterhead{ font:400 clamp(10px,1.05vw,15px)/1.5 var(--fellsc); letter-spacing:.2em; text-align:center; color:#8d774d;
  text-shadow:0 1px 0 rgba(255,255,255,.7), 0 -1px 0 rgba(90,60,20,.18); margin:0 0 2.2em; }
.letterhead .rule{ display:block; width:6em; height:1px; margin:.5em auto 0; background:linear-gradient(90deg, transparent, #b59d6d, transparent); }
.blk{ margin:0; overflow-wrap:break-word; }
.blk.date{ text-align:right; margin-bottom:1.1em; }
.blk.salut{ margin-bottom:.35em; }
.blk.para{ text-indent:2.2em; margin-bottom:.3em; }
.blk.closing{ margin:1em 0 0 38%; }
.blk.sig{ margin:.1em 0 0 50%; font-size:1.35em; line-height:1.4; position:relative; }
.blk.ps{ margin-top:1.6em; }
.flourish{ display:block; width:min(9em, 100%); height:1.1em; margin:-.15em 0 0 50%; overflow:visible; }
.flourish path{ fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-dasharray:420; stroke-dashoffset:420; transition:stroke-dashoffset 1.1s ease-in-out; }
.flourish.drawn path{ stroke-dashoffset:0; }
.c{ opacity:0; }
.c.on{ opacity:1; animation:inkin .22s ease-out; }
@keyframes inkin{ from{ opacity:0; filter:blur(.6px); } }
.c.x{ text-decoration:line-through; text-decoration-thickness:.09em; text-decoration-skip-ink:none; }
.c.xw{ text-decoration:line-through wavy; text-decoration-thickness:.07em; text-decoration-skip-ink:none; }
.blot{ position:absolute; width:.34em; height:.28em; border-radius:48% 52% 60% 40%/55% 45% 55% 45%; pointer-events:none;
  background:radial-gradient(circle at 45% 45%, rgba(var(--ink),.85), rgba(var(--ink),.55) 60%, transparent 72%); }
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* the dip pen */
.pen{ position:absolute; left:0; top:0; width:4.4em; height:4.4em; pointer-events:none; z-index:3;
  transition:transform .11s linear, opacity .5s ease; opacity:0; }
.pen.show{ opacity:1; }
.pen svg{ width:100%; height:100%; display:block; overflow:visible; filter:drop-shadow(-3px 7px 4px rgba(40,25,10,.35)); transition:transform .45s cubic-bezier(.3,.7,.3,1); }
.pen.lift svg{ transform:translate(1.6em,-2.2em) rotate(8deg); }
.pen.think svg{ animation:ponder 2.6s ease-in-out infinite; }
@keyframes ponder{
  0%,100%{ transform:translate(1.6em,-2.2em) rotate(8deg); }
  30%{ transform:translate(2.1em,-1.8em) rotate(4deg); }
  65%{ transform:translate(1.4em,-2.5em) rotate(10deg); } }

/* ---------- intro card ---------- */
.card-wrap{ position:fixed; inset:0; z-index:5; display:grid; place-items:center; padding:24px 16px; overflow:auto; }
.card-wrap[hidden]{ display:none !important; }
.card{ width:min(540px, 100%); box-sizing:border-box; background:#f6efdd; color:#3b2a18; padding:34px 32px 26px; text-align:center;
  box-shadow:0 30px 70px rgba(0,0,0,.6), 0 0 0 1px #d9c9a2; position:relative; transform:rotate(-.6deg); }
.card::before{ content:""; position:absolute; inset:9px; border:1px solid #bda77a; outline:1px solid #d6c59d; outline-offset:3px; pointer-events:none; }
.card .eyebrow{ font:400 12px/1.3 var(--fellsc); letter-spacing:.24em; color:#8b7348; margin:0; }
.card h2{ font:400 clamp(30px,6vw,44px)/1.05 var(--fellsc); letter-spacing:.06em; margin:.25em 0 .35em; text-wrap:balance; }
.card .being{ font:italic 15px/1.4 var(--fell); margin:0 0 .9em; color:#5a4428; }
.lady{ margin:0 0 .2em; }
.lady .nm{ display:block; font-size:clamp(26px,5.4vw,36px); line-height:1.35; }
.lady .meta{ display:block; font:italic 14px/1.4 var(--fell); color:#6d5634; }
.amp{ font:italic 22px/1 var(--fell); color:#8b7348; margin:.35em 0; }
.card .when{ font:14px/1.5 var(--fell); color:#5a4428; margin:1em 0 1.3em; text-wrap:balance; }
.card .row{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
.card .fine{ font:italic 12.5px/1.45 var(--fell); color:#7a6340; margin:1.3em 0 0; text-wrap:balance; }

button{ font:400 14px/1 var(--fellsc); letter-spacing:.12em; cursor:pointer; border-radius:2px; }
.btn-seal{ background:linear-gradient(180deg,#8e2a22,#6b1c16); color:#f6e3c4; border:1px solid #4d130f; padding:12px 20px;
  box-shadow:0 1px 0 rgba(255,200,170,.3) inset, 0 3px 8px rgba(60,10,5,.35); }
.btn-seal:hover{ background:linear-gradient(180deg,#9c3128,#761f18); }
.btn-plain{ background:transparent; color:#5a4428; border:1px solid #b9a172; padding:12px 18px; }
.btn-plain:hover{ background:rgba(185,161,114,.15); }
button:focus-visible{ outline:2px solid #c9a24a; outline-offset:3px; }

/* ---------- control bar ---------- */
.bar{ position:fixed; left:0; right:0; bottom:0; z-index:4; padding:10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
  background:linear-gradient(180deg, var(--leather-hi), var(--leather)); box-shadow:0 -8px 24px rgba(0,0,0,.45);
  display:flex; align-items:center; gap:10px 18px; flex-wrap:wrap; justify-content:space-between; }
.bar::before{ content:""; position:absolute; left:8px; right:8px; top:5px; border-top:1px dashed rgba(216,184,110,.35); pointer-events:none; }
.status{ min-width:0; flex:1 1 280px; }
.status .now{ font:italic 15px/1.3 var(--fell); color:#f0dfb8; margin:0; }
.status .meta{ font:400 11.5px/1.4 var(--fellsc); letter-spacing:.1em; color:rgba(216,184,110,.8); margin:2px 0 0; }
.controls{ display:flex; gap:8px; flex-wrap:wrap; }
.controls button{ background:linear-gradient(180deg, #c7a45c, #8d6a2e); color:#2a1a0a; border:1px solid #5c4318; padding:8px 12px;
  box-shadow:0 1px 0 rgba(255,236,180,.5) inset; font-size:12.5px; }
.controls button:hover{ background:linear-gradient(180deg, #d6b56e, #9a7536); }
.controls button[aria-pressed="false"]{ filter:saturate(.35) brightness(.85); }

@media (prefers-reduced-motion: reduce){
  .sheet, .sheet.fold, .pen, .pen svg, .desk, .envelope, .envelope.aside{ transition-duration:.01s !important; }
  .c.on, .pen.think svg{ animation:none; }
}