/* ============================================================================
   ju.css: the shared layer for jamesustby.com

   Everything every page on the site agrees on. Tokens, the two faces, the
   paper ground, and the handful of utilities that are not page specific.
   Page grammars (the chaptered spine, the split-stage instruments) live in
   their own files and never redefine what is here.
   ========================================================================== */


:root {
  --sc-canvas:      #0A0B0C;
  --sc-surface:     #12151A;
  --sc-ink:         #EFEAE1;
  --sc-ink-soft:    #9AA2A6;
  --sc-accent:      #E2603A;
  --sc-accent-ink:  #0A0B0C;

  --sc-font-display: "Newsreader", Georgia, "Times New Roman", serif;
  --sc-font-text:    "Instrument Sans", system-ui, -apple-system, sans-serif;
  --sc-font-mono:    "Instrument Sans", system-ui, sans-serif;

  --sc-measure: 56ch;
  --sc-maxw: 76rem;
  --sc-shadow-color: 210 30% 2%;

  /* the paper ground a page may hard-cut to. One hue, two stops, which is what
     a page that inverts its ground is allowed. */
  --ju-paper:        #EDE7DB;
  --ju-paper-ink:    #16130F;
  --ju-paper-soft:   #5A5348;
  --ju-paper-accent: #A83D18;

  --ju-rule: color-mix(in oklab, var(--sc-ink) 14%, transparent);
}

body { background: var(--sc-canvas); }

/* the display face wants a touch more weight and leading on a dark ground */
.sc-display { font-weight: 400; font-optical-sizing: auto; }
.sc-body { line-height: 1.66; }

.ju-skip {
  position: fixed; z-index: 90; top: 0.5rem; left: 0.5rem;
  padding: 0.6rem 1rem; background: var(--sc-accent); color: var(--sc-accent-ink);
  text-decoration: none; border-radius: var(--sc-r-sm); font-size: 0.85rem;
  transform: translateY(-160%);
}
.ju-skip:focus-visible { transform: none; }

.ju-sr { position: absolute; width: 1px; height: 1px; overflow: hidden;
         clip-path: inset(50%); white-space: nowrap; margin: 0; }

.sc-grain { transition: opacity 400ms var(--sc-ease-out); }