/* The letter's own pages: signup form, issue archive, one issue on the web.
   Its own file rather than lines added to site.css, because site.css is shared
   ground and this is four pages. Tokens all come from site.css. */

.signup{display:flex; flex-wrap:wrap; gap:calc(var(--u)*1.25);
  align-items:flex-end; margin:0 0 calc(var(--u)*3); max-width:34rem}
.signup label{flex:1 0 100%; font-size:var(--t-cap); color:var(--grey)}
.signup input[type=email]{flex:1 1 16rem; min-width:0; font:inherit;
  padding:calc(var(--u)*1.25) calc(var(--u)*1.5);
  border:1px solid var(--hair); background:var(--paper); color:var(--ink);
  border-radius:0}
.signup input[type=email]:focus{outline:2px solid var(--link); outline-offset:-1px;
  border-color:var(--link)}
.signup button{font:inherit; font-size:var(--t-small);
  padding:calc(var(--u)*1.25) calc(var(--u)*2.5);
  background:var(--ink); color:var(--paper); border:0; cursor:pointer;
  border-radius:0; transition:background .18s ease}
.signup button:hover{background:var(--link)}
@media (prefers-reduced-motion:reduce){ .signup button{transition:none} }
.err{flex:1 0 100%; margin:0; color:var(--alert); font-size:var(--t-small)}
/* The consent note sits between the form and the archive and needs air on
   both sides; without it the table reads as part of the small print. */
.signup + .note{margin:0 0 calc(var(--u)*5); max-width:64ch}

/* An issue reads as prose, so it gets a measure and nothing else does. */
.letter{max-width:66ch; margin:0 0 calc(var(--u)*5)}
.letter h2{font-size:26px; line-height:1.15; margin:0 0 calc(var(--u)*2);
  padding-top:calc(var(--u)*2); border-top:2px solid var(--ink)}
.letter p{font-size:18px; line-height:1.65; margin:0 0 calc(var(--u)*2.25)}
.letter .note{font-size:var(--t-cap); line-height:1.5; color:var(--grey)}
.letter .sub{font-size:var(--t-cap); letter-spacing:.06em;
  text-transform:uppercase; color:var(--grey)}

/* Corrections. The one colour block, matching the block in the email, and the
   only place on the site where the green carries the whole field rather than
   just the links. It is the section that prints every month whether or not
   there is anything in it. */
/* A literal green, not `var(--link)`. The token flips to the light mint
   #4FC79E in dark mode, and this block always carries paper-coloured text —
   which on mint is 1.6:1 and unreadable. The field is the same #0A6E55 in
   both schemes, exactly as it is in the email. */
.letter-block{max-width:none; background:#0A6E55; color:#FBFAF7;
  padding:calc(var(--u)*4) calc(var(--u)*4) calc(var(--u)*2.5);
  width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw)}
/* Element selectors, not `> *`. `.letter p` is (0,1,1) and beats a bare
   `.letter-block > *` at (0,1,0), so the auto margins lost and the whole
   block sat hard against the left edge of the viewport.
   `rem`, not `ch`: ch is relative to the element's own font size, so the same
   66ch gave the 26px heading a measure 40% wider than the 18px paragraphs and
   the rule over the heading overhung the text by 200px. */
.letter-block > h2, .letter-block > p{max-width:41rem;
  margin-left:auto; margin-right:auto}
.letter-block > h2{margin-bottom:calc(var(--u)*2);
  border-top-color:#FBFAF7; color:#FBFAF7}
.letter-block > p{margin-bottom:calc(var(--u)*2.25)}
.letter-block a{color:#FBFAF7}
@media (max-width:640px){
  .letter-block{padding-left:calc(var(--u)*3); padding-right:calc(var(--u)*3)}
  .letter h2{font-size:22px}
  .letter p{font-size:17px}
}