/* base: reset, chrome (header/footer/hud), typography, textures */
*,
*::before,
*::after { box-sizing: border-box; margin: 0; padding: 0; }

/* No smooth scroll-behavior: it also eases keyboard and space-bar scrolling,
   which makes moving down the page feel heavy. */

body {
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: 1.55;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }

a { color: inherit; }

::selection { background: var(--vermilion); color: var(--paper); }

/* ---- paper grain over everything ---- */
/* Paper grain as a small repeating tile the browser rasterises once.
   A full-screen live SVG filter (or a mix-blend-mode layer) re-renders on
   every scrolled frame and is the single most expensive thing on the page. */
.grain {
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
  opacity: 0.3;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' seed='11'/><feColorMatrix type='matrix' values='0 0 0 0 0.09 0 0 0 0 0.07 0 0 0 0 0.06 0 0 0 0.5 0'/></filter><rect width='140' height='140' filter='url(%23n)'/></svg>");
  background-size: 140px 140px;
}

/* ---- fixed chrome ---- */
.site-head {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(var(--frame-gap) * 0.9) calc(var(--frame-gap) * 1.4);
  pointer-events: none;
}

.site-head > * { pointer-events: auto; }

.brand {
  display: flex;
  align-items: baseline;
  gap: 0.55em;
  text-decoration: none;
  background: var(--ink);
  color: var(--paper);
  padding: 0.35em 0.9em 0.45em;
  box-shadow: 4px 4px 0 rgb(201 39 28 / 85%);
  rotate: -1deg;
}

.brand__script {
  font-family: var(--font-script);
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem);
  line-height: 1;
  transform: rotate(-4deg);
}

.brand__word {
  font-family: var(--font-display-sc);
  font-size: 0.7rem;
  letter-spacing: 0.42em;
  opacity: 0.85;
  translate: 0 -0.2em;
}

.head-right {
  display: flex;
  align-items: center;
  gap: clamp(0.5rem, 1.4vw, 1.2rem);
}

.site-nav { display: flex; gap: clamp(0.5rem, 1.2vw, 1rem); }

/* language picker, cut from the same stamped chip as the nav */
.lang-pick {
  appearance: none;
  font-family: var(--font-display-sc);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  color: var(--paper);
  background: var(--ink);
  border: 0;
  border-radius: 0;
  padding: 0.55em 1.9em 0.6em 0.9em;
  cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'><path d='M0 0 L5 6 L10 0 Z' fill='%23f2e8d5'/></svg>");
  background-repeat: no-repeat;
  background-position: right 0.7em center;
  background-size: 8px auto;
  transition: background-color 0.25s var(--ease-brush);
}

.lang-pick:hover { background-color: var(--vermilion); }

/* the dropdown list is painted by the OS; keep it legible */
.lang-pick option {
  font-family: var(--font-body);
  letter-spacing: normal;
  background: var(--ink);
  color: var(--paper);
}

.site-nav a {
  font-family: var(--font-display-sc);
  font-size: 0.72rem;
  letter-spacing: 0.26em;
  text-decoration: none;
  background: var(--ink);
  color: var(--paper);
  padding: 0.55em 0.95em 0.6em;
  transition: background 0.25s var(--ease-brush), rotate 0.25s var(--ease-brush);
}

.site-nav a:nth-child(2) { rotate: 1deg; }

.site-nav a:hover,
.site-nav a:focus-visible {
  background: var(--vermilion);
  rotate: -1.5deg;
}

/* ---- reading progress + chapter mark ---- */
.hud-progress {
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 85;
  width: 100%;
  height: 4px;
  background: rgb(0 0 0 / 25%);
}

.hud-progress i {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--gold);
  transform-origin: left;
  transform: scaleX(var(--scroll, 0));
}

.hud-chapter {
  position: fixed;
  right: calc(var(--frame-gap) * 1.4);
  bottom: calc(var(--frame-gap) * 1.5);
  z-index: 80;
  font-family: var(--font-display-sc);
  font-size: 0.66rem;
  letter-spacing: 0.32em;
  background: var(--ink);
  color: var(--paper);
  padding: 0.5em 0.9em 0.55em;
  rotate: 1deg;
  transition: opacity 0.4s;
}
body.at-end .hud-chapter { opacity: 0; }

/* ---- shared ink components ---- */
.caption-box {
  font-family: var(--font-body);
  font-size: var(--text-caption);
  line-height: 1.5;
  letter-spacing: 0.02em;
  background: var(--paper);
  color: var(--ink);
  border: var(--panel-border) solid var(--ink);
  box-shadow: 5px 6px 0 rgb(23 18 16 / 85%);
  padding: 0.8em 1em;
  max-width: 34ch;
}

.caption-box strong {
  font-family: var(--font-display-sc);
  letter-spacing: 0.14em;
  font-weight: 400;
}

.panel {
  border: var(--panel-border) solid var(--ink);
  background: var(--paper);
  box-shadow: 6px 7px 0 rgb(23 18 16 / 85%);
  overflow: hidden;
}

.panel > svg { width: 100%; height: 100%; }

/* rough ink edge for big display type */
.rough { filter: url(#roughen); }
.rough-strong { filter: url(#roughen-strong); }

/* utility */
.sc { font-family: var(--font-display-sc); font-weight: 400; }

/* focus */
:focus-visible { outline: 3px solid var(--vermilion); outline-offset: 3px; }

/* skip link */
.skip {
  position: fixed;
  top: -4rem;
  left: 1rem;
  z-index: 200;
  background: var(--paper);
  color: var(--ink);
  padding: 0.6em 1em;
  border: 3px solid var(--ink);
  font-family: var(--font-display-sc);
  letter-spacing: 0.2em;
  transition: top 0.2s;
}
.skip:focus { top: 1rem; }

@media (max-width: 720px) {
  .site-nav { gap: 0.9rem; }
  .site-nav a { font-size: 0.62rem; letter-spacing: 0.2em; }
  .brand__word { display: none; }
}