/* ==========================================================================
   YORU — base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html {
  background: var(--bg-0);
  color: var(--ivory);
  -webkit-text-size-adjust: 100%;
  scrollbar-gutter: stable;
}
body {
  margin: 0;
  background: var(--bg-0);
  color: var(--ivory);
  font-family: var(--f-display);
  font-size: 16px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
html.is-locked, html.is-locked body { overflow: hidden; }
img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; letter-spacing: inherit; text-transform: inherit; }
button:disabled { cursor: default; opacity: .35; }
h1, h2, h3, p, ol, ul { margin: 0; }
ol, ul { padding: 0; list-style: none; }
::selection { background: var(--red); color: var(--ivory); }
:focus { outline: none; }
:focus-visible { outline: 1px solid var(--red); outline-offset: 3px; }
.app:focus { outline: none; }

.mono { font-family: var(--f-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; line-height: 1.6; }
.dim { color: var(--grey); }
.red { color: var(--red); }
.eyebrow { color: var(--grey); margin-bottom: 22px; }
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.caret { color: var(--red); animation: blink 1.05s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

.skip { position: fixed; left: 12px; top: -80px; z-index: 999; padding: 10px 14px; background: var(--red); color: var(--ivory); }
.skip:focus { top: 12px; }
.noscript { padding: 40vh var(--gutter); text-align: center; color: var(--grey); }

.view { position: relative; min-height: 100vh; }
.jp { font-family: var(--f-serif); }

/* small square buttons */
.sq-btn {
  width: 46px; height: 46px; display: inline-grid; place-items: center;
  border: 1px solid var(--line); font-family: var(--f-mono); font-size: 14px;
  transition: border-color .3s, color .3s;
}
.sq-btn:hover { border-color: var(--red); color: var(--red); }

/* outline display type */
.featured__outline, .divider__outline span, .run__bgtype span, .pocket__outline, .stack__outline, .latest__outline {
  color: transparent; -webkit-text-stroke: 1px var(--ivory-60);
}