/* The splash (r1013n5 to r1013n9; app/site/splash.php): the site's password screen (join.css, body.locked), no bar, the
   hero the window's height. The lockup (.lk) in the foot's column: the wordmark as wide as the title (6.9554em of its
   size, from the Q's ink to the 7's) off the plate, 12px over it, in the plate's colour, or the type's on the slides his
   words name (.wmt; splash.php SPLASH_MARK_TYPE); then his title, Q1, his em dash, 2027, held whole (RETURNS out,
   r1013n11, the page's title DEPTHCORE RETURNS 2027); on a phone 40px while it fits the column. Under it the home's newsletter strip (home.css
   .nls, home-68) in the hero's type: his line, Email on the field's line and the address typed (r1013n9, r1013n11) in
   the record line's type (Kode Mono capitals), Newsletter's and Email's heads out; his line, the field and Subscribe one
   30px row, the field's rule 5px under the row's words, their text on one line. As wide as the
   lockup's type (--snr, splash.js), on the slide's plate (splash.js), 12px under the lockup's, the halves as the home's
   12 columns have them; narrower than his line and the form side by side (711px), stacked. The plates 12px apart down
   the left (the lockup's, the strip's, X's and Instagram's) and up the right (the credit's, PROCEED TO 2013 ARCHIVE),
   the first plate on a row reaching the lockup plate's edge (join.js's door) and the archive's the credit plate's right
   edge (splash.js); X and Instagram 30px as the credit's plate, their text on its line. The credit's numbers hidden
   (join.js reads them; Previous and Next press them, splash.js). The hero's foot over the consent bar while it shows
   (--ck, splash.js). */
body.splash .hero{--tfs:clamp(48px,7.4vw,124px)}
@media(max-width:900px){body.splash .hero{--tfs:min(40px,calc((100vw - 32px) / 7.25))}}
body.splash .hero .t{font-size:var(--tfs);margin-top:0}
body.splash .hero .t .dt{white-space:nowrap}
/* the wordmark: its box its ink (the view's viewBox), from the Q's ink to the 7's (Michroma's outlines, .0625em to
   7.0179em at .02em); its marks drawn in currentColor */
body.splash .hero .wm{display:block;width:6.9554em;height:auto;aspect-ratio:528.812/45.887;margin:0 0 calc(18.5px - .1794em) .0625em;overflow:visible;color:var(--plate)}
body.splash .hero.wmt .wm{color:inherit}
body.splash .hero .ft > .lft{min-width:0}
/* no bar: the hero the window's height (the root's --nav .01px for join.js, whose 0 would read as 60; splash.php) */
body.splash{--nav:0px}
body.splash .barwrap{display:none}
/* the newsletter strip: his line, the field (Email on its line, r1013n11) and Subscribe, one 30px row; Newsletter's and
   Email's heads out (his: "we can do away with newsletter and email headers if we just put email on the line in the
   signup field."), Email the field's own label still, for a screen reader alone. Its top 6.5px under its plate's (the
   plate 12px under the lockup's, splash.js): the row's top, stacked his line's capitals */
body.splash .hero .snl{container-type:inline-size;box-sizing:border-box;padding-right:var(--snr,0px);margin-top:0}
body.splash .hero .snl .sg{display:grid;grid-template-columns:calc(50% - 12px) minmax(0,1fr) auto;column-gap:24px;row-gap:14px;grid-template-rows:30px;align-items:baseline;margin-top:calc(25px + .0544 * var(--tfs))}
body.splash .hero .snl .ln{grid-area:1/1;margin:0 0 0 var(--ld,0px);font:500 11px/11px var(--mono);letter-spacing:.05em;text-transform:uppercase}
body.splash .hero .snl .ln span{white-space:nowrap}
body.splash .hero .snf{display:contents}
body.splash .hero .snl .L{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
/* the field from the row's top, the address in the record line's type, its text on Subscribe's line (19.24px down), its
   rule 5px under that (the field's line box the type's own height, 14px at 11px, whatever its line-height); Email on the
   line as the label was, at 70% */
body.splash .hero .snl .fld{grid-area:1/2;align-self:start;display:block;width:100%;box-sizing:border-box;background:transparent;border:0;border-bottom:1px solid color-mix(in srgb,currentColor 35%,transparent);color:inherit;font:500 11px/11px var(--mono);letter-spacing:.05em;text-transform:uppercase;padding:8px 0 2.24px;margin:0;outline:none;border-radius:0}
body.splash .hero .snl .fld::placeholder{color:color-mix(in srgb,currentColor 70%,transparent);opacity:1}
body.splash .hero .snl .fld:focus{border-bottom-color:currentColor}
body.splash .hero .snf.err .fld::placeholder{color:var(--cc)}
body.splash .hero .snf.err .fld{border-bottom-color:var(--cc)}
body.splash .hero .snf .hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
body.splash .hero .snl .btn{grid-area:1/3;margin:0}
body.splash .hero .snl .sn{grid-area:1/2/2/4;align-self:end;display:none;margin:0 0 7px;font:500 11px/15px var(--mono);letter-spacing:.05em;text-transform:uppercase}
/* sent (or the way off's Newsletter off): the sent line's last line on Subscribe's text line, its lines 15px apart,
   everything else held where it was */
body.splash .hero .snf.sent .fld,body.splash .hero .snf.sent .btn{visibility:hidden}
body.splash .hero .snf.sent .sn{display:block}
/* narrower than his line and the form side by side: his line, then the field and Subscribe */
@container (max-width:711px){
  body.splash .hero .snl .sg{grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto 30px;margin-top:calc(21.76px + .0544 * var(--tfs))}
  body.splash .hero .snl .ln{grid-area:1/1/2/3;line-height:15px}
  body.splash .hero .snl .fld{grid-area:2/1}
  body.splash .hero .snl .btn{grid-area:2/2}
  body.splash .hero .snl .sn{grid-area:2/1/3/3}
}
/* a phone the same, 11px: an iPhone does not zoom to it (the shell's maximum-scale=1 for iOS, his 29 Sept: "stop the zoom
   please"), Android never did */
/* X and Instagram: 30px, as the credit's plate */
body.splash .hero .socs{display:flex;flex-wrap:wrap;gap:12px;margin-top:18.5px}
body.splash .hero .socs .soc .ico{margin-top:-.5px;margin-bottom:-.5px}
/* the right: PROCEED TO 2013 ARCHIVE over the credit, the credit's Previous and Next where its numbers were */
body.splash .hero .rgt{display:flex;flex-direction:column;align-items:flex-end;gap:22px;flex:none}
body.splash .hero.credunder .rgt{align-items:flex-start}
body.splash .hero.credunder .ft{gap:12px}
@media(max-width:900px){body.splash .hero .rgt{align-items:flex-start} body.splash .hero .ft{gap:12px}}
/* under 561px the credit's lines 15px apart (join.css has them at 1.4), the archive 12px over its plate */
@media(max-width:560px){body.splash #jh .hcap .cl{line-height:15px} body.splash .hero .rgt{gap:20px}}
body.splash #jh .hcap .idx{display:none}
body.splash #jh .hcap .pn{display:inline-flex;gap:14px;margin-left:6px}
body.splash #jh .hcap .pn button{position:relative;font:500 11px/1 var(--mono);letter-spacing:.05em;color:inherit;background:none;border:0;padding:0;margin:0;cursor:pointer;opacity:.7}
body.splash #jh .hcap .pn button:after{content:"";position:absolute;inset:-9px -7px}
body.splash #jh .hcap .pn button:hover,body.splash #jh .hcap .pn button:focus-visible{opacity:1;color:var(--cc)}
/* the foot over the consent bar while it shows */
body.splash .hero .ft{padding-bottom:calc(44px + var(--ck,0px))}
@media(max-width:900px){body.splash .hero .ft{padding-bottom:calc(28px + var(--ck,0px))}}