/* Shared shell for the secondary pages (404 and the journal references).
   index.html deliberately keeps its CSS inline for fastest first paint;
   these pages share one cached file instead of repeating it four times. */

@font-face{
  font-family:"Newsreader";
  src:url("/fonts/newsreader-var.woff2") format("woff2-variations");
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Plex Mono";
  src:url("/fonts/plexmono.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap;
}

:root{
  --parchment:#f4f1ec;--paper:#fbf9f6;--ink:#1c1b18;--graphite:#4b4842;
  --smoke:#6b665c;--rule:#ddd6cb;--signal:#1f4ba8;--stamp:#b3271e;
  --serif:"Newsreader",Iowan Old Style,Georgia,serif;
  --mono:"Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --pad-x:clamp(1.25rem,5vw,2.5rem);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}

body{
  margin:0;min-height:100dvh;background:var(--parchment);color:var(--graphite);
  font-family:var(--serif);font-size:clamp(1.0625rem,.98rem + .4vw,1.1875rem);
  line-height:1.65;font-optical-sizing:auto;
  display:flex;flex-direction:column;
}
::selection{background:var(--stamp);color:var(--paper)}

a{color:var(--signal);text-underline-offset:.18em;text-decoration-thickness:from-font}
a:focus-visible{outline:2px solid var(--signal);outline-offset:3px;border-radius:2px}

.masthead{
  display:flex;justify-content:space-between;align-items:baseline;gap:1rem;flex-wrap:wrap;
  padding:.7rem var(--pad-x);padding-top:calc(.7rem + env(safe-area-inset-top));
  border-bottom:1px solid var(--rule);
  font-family:var(--mono);font-size:.6875rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--smoke);
}
.masthead b{font-weight:400;color:var(--ink)}

main{
  flex:1;display:flex;flex-direction:column;justify-content:center;
  padding:clamp(3rem,10vh,7rem) var(--pad-x);
  max-width:64ch;margin:0 auto;width:100%;
}

.eyebrow{
  font-family:var(--mono);font-size:.6875rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--smoke);margin:0 0 1.6rem;
}

/* The line that does the work. Sized off the character count so a long
   sentence never overflows, same technique as the verdict stamp. */
h1{
  font-family:var(--serif);font-weight:400;color:var(--ink);
  font-size:clamp(1.9rem,1.1rem + 3.6vw,4rem);
  line-height:1.04;letter-spacing:-.022em;
  margin:0 0 1.6rem;text-wrap:balance;
}
h1 em{font-style:italic;color:var(--stamp)}

.code{
  font-family:var(--serif);font-weight:400;color:var(--stamp);
  font-size:clamp(5rem,3rem + 14vw,10rem);line-height:.85;
  letter-spacing:-.035em;margin:0 0 .5rem;transform:rotate(-3deg);
  transform-origin:12% 62%;display:inline-block;mix-blend-mode:multiply;
}

p{margin:0 0 1.1rem;text-wrap:pretty}
p:last-of-type{margin-bottom:0}

.note{
  font-family:var(--mono);font-size:.75rem;line-height:1.8;
  letter-spacing:.06em;color:var(--smoke);
  border-top:1px solid var(--rule);padding-top:1.1rem;margin-top:2rem;
}

.back{
  align-self:flex-start;
  display:inline-flex;align-items:center;min-height:2.75rem;
  font-family:var(--mono);font-size:.8125rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--paper);background:var(--ink);
  border:1px solid var(--ink);padding:1rem 1.6rem;text-decoration:none;
  margin-top:2rem;
  transition:background .18s ease,border-color .18s ease;
}
.back:hover{background:var(--signal);border-color:var(--signal)}

footer{
  border-top:1px solid var(--rule);background:var(--paper);
  padding:1.5rem var(--pad-x);padding-bottom:calc(1.5rem + env(safe-area-inset-bottom));
  font-family:var(--mono);font-size:.6875rem;letter-spacing:.11em;
  text-transform:uppercase;color:var(--smoke);text-align:center;
}

/* Entrance: resting state is visible, @starting-style only supplies the
   value to transition FROM. Never hide content pending an animation. */
@media (prefers-reduced-motion:no-preference){
  main > *{
    opacity:1;transform:none;
    transition:opacity .6s cubic-bezier(.22,1,.36,1),
               transform .6s cubic-bezier(.22,1,.36,1);
  }
  @starting-style{
    main > *{opacity:0;transform:translateY(1rem)}
  }
  main > :nth-child(2){transition-delay:.07s}
  main > :nth-child(3){transition-delay:.13s}
  main > :nth-child(4){transition-delay:.19s}
  main > :nth-child(5){transition-delay:.25s}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    transition-duration:.001ms !important;animation-duration:.001ms !important;
  }
}