/* Version 23, Advisory letter (round 5): identity, the one contact pair and the career marks first, then the letter in two type
   tiers (Newsreader paragraphs and question headings), closed with Jeremy's signature. Phone: H1, sender line, contacts, marks,
   letter. Desktop: a portrait column beside a 640px letter set directly on the ground. Shared layer: r5.css. */
@font-face{font-family:Newsreader;src:url("assets/fonts/newsreader/newsreader-latin-standard-normal.woff2") format("woff2");font-weight:200 800;font-display:swap}
@font-face{font-family:"Newsreader fallback";src:local("Georgia");font-weight:100 449;size-adjust:90%}
@font-face{font-family:"Newsreader fallback";src:local("Georgia");font-weight:450 900;size-adjust:94.1%}
.v23 .page{max-width:calc(280px + 64px + 640px + 2 * var(--gut))}
.v23 main{padding:68px var(--gut) 96px}
.v23 h1{font:800 clamp(36px,10vw,56px)/1.04 var(--sans);letter-spacing:-.02em;max-width:7.5em}
.v23 .sender{display:grid;grid-template-columns:88px minmax(0,1fr);column-gap:16px;align-items:center;margin-top:22px}
.v23 .pf{width:88px;height:88px;border-radius:50%;overflow:hidden;background:#2B2B2E;box-shadow:0 0 0 1px var(--rule)}
.v23 .pf picture{display:block;width:100%;height:100%}
/* held a little closer so the face reads at this size, with the top of the head still inside the circle */
.v23 .avatar{width:100%;height:100%;object-fit:cover;object-position:50% 0%;transform:scale(1.25);transform-origin:50% 25%}
.v23 .name{font:700 20px/1.2 var(--sans)}
.v23 .role{margin-top:2px;font-size:16px;line-height:1.4;color:var(--quiet)}
.v23 .sender .contact,.v23 .sender .logo-box{grid-column:1 / -1}
.v23 .sender .contact{margin-top:22px}
.v23 .sender .logo-box{margin-top:26px}

.v23 .letter{margin-top:40px;font-family:Newsreader,"Newsreader fallback",Georgia,serif}
.v23 .letter p{font-size:19px;line-height:1.6;color:var(--ink);max-width:36em}
.v23 .letter p+p{margin-top:16px}
.v23 .q{margin-top:40px}
.v23 .q h2{margin:0 0 10px;font:500 26px/1.25 Newsreader,"Newsreader fallback",Georgia,serif;letter-spacing:-.005em;color:var(--ink)}
.v23 .bridge{margin-top:24px!important}
.v23 .x1{margin-top:40px!important}
/* Jeremy's own JPEG, unchanged: the paper drops into the ground by blending (multiply on light, inverted and screened on navy) */
.v23 .signature{width:220px;height:auto;margin-top:16px;filter:var(--sig-filter);mix-blend-mode:var(--sig-blend)}

@media (min-width:900px){
  .v23 main{padding:72px var(--gut) 104px}
  .v23 .tt{top:72px;right:var(--gut)}
  .v23 .l23{display:grid;grid-template-columns:280px minmax(0,640px);column-gap:64px;grid-template-rows:auto 1fr}
  .v23 h1{grid-column:2;grid-row:1;font-size:56px;padding-right:56px}
  .v23 .sender{grid-column:1;grid-row:1 / span 2;align-self:start;display:block;margin-top:0}
  .v23 .pf{width:260px;height:325px;border-radius:6px}
  .v23 .avatar{transform:none;object-position:50% 10%}
  .v23 .who{margin-top:16px}
  .v23 .sender .contact{margin-top:18px}
  .v23 .sender .logo-box{margin-top:28px}
  /* the marks as two columns of four rows, Dell centred on the last; heights compressed to 16 to 24px */
  .v23 .sender .logos{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 16px}
  .v23 .sender .logos li,.v23 .sender .logos li:nth-child(-n+3),.v23 .sender .logos li:nth-child(n+5){grid-column:auto}
  .v23 .sender .logos li:last-child{grid-column:1 / -1}
  .v23 .sender .logos img{height:calc((16 + (var(--b) - 20) * .4444) * 1px)}
  .v23 .letter{grid-column:2;grid-row:2;margin-top:30px}
  .v23 .signature{width:240px}
}
/* the column stays in view while the letter scrolls, where the window is tall enough to show all of it */
@media (min-width:900px) and (min-height:820px){.v23 .sender{position:sticky;top:24px}}