/* The introduction, as an object: a letter drawn half out of its envelope, the words typed on its
   sheet, the seal blue, notes in the margin. Used on the home page and on /brokers. */
.arrives .intro-letter{margin:clamp(24px,3vw,40px) auto 0;max-width:600px}
.intro-letter .ann{position:absolute;width:min(270px,calc((100vw - 640px) / 2 - 70px));font:400 16.5px/1.42 var(--serif);color:var(--blue);margin:0}
.intro-letter .ann b{display:block;margin-bottom:4px;font:650 12.5px/1.2 var(--sans);letter-spacing:.08em;text-transform:uppercase}
.intro-letter .ann-l{right:calc(100% + 30px);text-align:right}
.intro-letter .ann-r{left:calc(100% + 30px)}
.intro-letter .ann::after{content:"";position:absolute;top:.5em;width:calc(30px + 11.7cqw - 6px);height:9px;
  background:radial-gradient(circle at var(--dot) 50%,var(--blue) 3px,transparent 3.6px),linear-gradient(var(--blue),var(--blue)) var(--run) center/calc(100% - 7px) 1.4px no-repeat}
.intro-letter .ann-l::after{left:calc(100% + 8px);--dot:calc(100% - 3.5px);--run:left}
.intro-letter .ann-r::after{right:calc(100% + 8px);--dot:3.5px;--run:right}
.intro-letter.is-drawing:not(.is-done) .ann{opacity:0;transform:translateY(6px)}
.intro-letter .ann{transition:opacity .6s ease .5s,transform .6s ease .5s}
.intro-letter{position:relative;justify-self:center;width:100%;max-width:540px;margin:0}
.intro-letter svg{display:block;width:100%;height:auto;overflow:visible}
.intro-letter .ink path{fill:none;stroke:var(--ink);stroke-width:var(--pen);vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round}
.intro-letter .sheet-fill{fill:var(--paper-hi)}
.intro-letter .crease{fill:url(#lt-crease)}
.intro-letter .seal{fill:var(--sky);stroke:var(--ink);stroke-width:1.4;vector-effect:non-scaling-stroke;transition:transform .6s cubic-bezier(.3,1.6,.5,1),opacity .4s;transform-box:fill-box;transform-origin:center}
.intro-letter{container-type:inline-size}
.intro-letter .sheet-text{position:absolute;left:14.6%;right:14.8%;top:16.9cqw}
.sheet-h{display:flex;justify-content:space-between;align-items:center;gap:2cqw;height:7.4cqw;border-bottom:1px solid rgba(23,21,15,.22)}
.sheet-h b{font:600 max(15px,3.5cqw)/1 var(--display);white-space:nowrap}
.intro-letter .ill{display:none}
.sheet-h span{font-size:max(12px,2.1cqw);font-weight:650;letter-spacing:.07em;text-transform:uppercase;color:var(--mute);text-align:right;line-height:1.25}
.sheet-text dl div{display:grid;grid-template-columns:30% minmax(0,1fr);gap:2cqw;align-items:center;min-height:6.3cqw;border-bottom:1px dashed rgba(23,21,15,.2)}
.sheet-text dl div:nth-child(4){margin-top:4.6cqw;border-top:1px dashed rgba(23,21,15,.2)}
.sheet-text dt{color:var(--mute);font-size:max(12px,2.25cqw)}
.sheet-text dd{font:400 max(13px,2.7cqw)/1.25 var(--serif);color:var(--ink)}
/* the caption sits on the shaded flap, where --blue measures 4.3:1; this blue reads at 5.4:1 there */
.intro-letter .margin{position:absolute;left:16%;right:16%;top:105cqw;text-align:center;text-wrap:balance;font:400 max(15px,3cqw)/1.35 var(--serif);color:#264F80}
/* the caption keeps a 15px floor while the envelope shrinks with the phone: below ~310px its second line ran over the envelope's
   bottom stroke (320px: caption bottom 335, stroke 331). One size down and a little higher keeps it inside. */
@container (max-width:310px){.intro-letter .margin{top:calc(105cqw - 8px);font-size:14px}}
.intro-letter.is-drawing:not(.is-done) .sheet-text>*,.intro-letter.is-drawing:not(.is-done) .margin{opacity:0;transform:translateY(6px)}
.intro-letter .sheet-text>*,.intro-letter .margin{transition:opacity .6s ease,transform .6s ease}
.intro-letter.is-done .sheet-text>*,.intro-letter.is-done .margin{opacity:1;transform:none}
.intro-letter.is-done .sheet-text>*:nth-child(2){transition-delay:.25s}
.intro-letter.is-done .margin{transition-delay:.6s}
.intro-letter.is-drawing:not(.is-done) .seal{opacity:0;transform:scale(.2)}
/* the margin notes need (viewport - 640) / 2 to sit beside the sheet; below 1100px they get under 160px, wrap to a word a line
   and print over each other (home and /brokers), so they stack under the letter with a blue rule instead */
@media(max-width:1100px){
  .intro-letter .ann{position:static;width:auto;text-align:left;margin-top:16px;padding-left:16px;border-left:1.5px solid var(--blue)}
  .intro-letter .ann::after{display:none}
}
@media(max-width:860px){
  /* on a phone the record stays on the sheet (a separate card under a blank drawing read as a fallback,
     Astra r3); the values carry it, the labels stay for screen readers */
  .intro-letter{max-width:none}
  .sheet-h span{display:none}
  .sheet-text dl div{grid-template-columns:1fr}
  .sheet-text dt{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .sheet-text dd{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .intro-letter .ill{display:block;margin-top:12px;text-align:center;font-size:12.5px;font-weight:650;letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
}
/* /brokers: the letter sits under its section, centred like the home page's, not in the narrow text column */
.part>.intro-letter{grid-column:1/-1;justify-self:center;width:100%;max-width:600px;margin-top:clamp(24px,3vw,40px)}