/* ==========================================================================
   vein.pub — base + chrome (reset, canvas, grain, cursor, header, rail)
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  background: var(--ink-deep);
}
html.motion { scroll-behavior: smooth; }

body {
  min-height: 100svh;
  background: var(--ink);
  color: var(--bone);
  font-family: var(--font-grotesk);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 400;
  letter-spacing: 0.01em;
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overscroll-behavior-y: none;
}

img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
a { color: inherit; text-decoration: none; }

::selection { background: var(--vein); color: var(--bone-hi); }

/* --- focus: visible, editorial, never removed --------------------------- */
:focus-visible {
  outline: 1px solid var(--bone);
  outline-offset: 4px;
}
:where(a, button, [tabindex]):focus:not(:focus-visible) { outline: none; }

/* --- utilities ---------------------------------------------------------- */
.u-vh {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}
.u-label {
  font-family: var(--font-grotesk);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ash);
}
.u-micro {
  font-size: var(--fs-micro);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ash-dim);
}
.u-vein { color: var(--vein); }

/* --- filmic grain: one fixed static layer over the whole canvas --------- */
.grain {
  position: fixed;
  inset: -50%;
  z-index: var(--z-grain);
  pointer-events: none;
  opacity: 0.38;
  mix-blend-mode: overlay;
  background-image: var(--grain-src);
  background-size: 128px 128px;
  will-change: transform;
}
.motion .grain { animation: grainshift 6s steps(6) infinite; }
@keyframes grainshift {
  0%   { transform: translate3d(0, 0, 0); }
  20%  { transform: translate3d(-6%, 4%, 0); }
  40%  { transform: translate3d(4%, -5%, 0); }
  60%  { transform: translate3d(-3%, 3%, 0); }
  80%  { transform: translate3d(5%, 2%, 0); }
  100% { transform: translate3d(0, 0, 0); }
}

/* --- custom cursor: a thin lens/reticle (fine pointers only) ------------ */
.cursor {
  position: fixed;
  top: 0; left: 0;
  z-index: var(--z-cursor);
  pointer-events: none;
  mix-blend-mode: difference;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.cursor__ring {
  width: 26px; height: 26px;
  margin: -13px 0 0 -13px;
  border: 1px solid var(--bone);
  border-radius: 50%;
  transition: width 0.35s var(--ease-out-expo),
              height 0.35s var(--ease-out-expo),
              margin 0.35s var(--ease-out-expo),
              opacity 0.35s ease;
}
.cursor__dot {
  position: absolute;
  top: -1px; left: -1px;
  width: 2px; height: 2px;
  background: var(--bone);
  border-radius: 50%;
}
body.has-cursor.is-fine { cursor: none; }
body.has-cursor.is-fine a,
body.has-cursor.is-fine button,
body.has-cursor.is-fine [data-cursor] { cursor: none; }
.cursor.is-active { opacity: 1; }
.cursor.is-hot .cursor__ring { width: 54px; height: 54px; margin: -27px 0 0 -27px; }
.cursor.is-grab .cursor__ring { width: 64px; height: 64px; margin: -32px 0 0 -32px; opacity: 0.5; }
input, textarea, select { cursor: auto; }

/* --- chrome: minimal editorial header (no navbar) ----------------------- */
.masthead {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--z-chrome);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: clamp(1rem, 2.4vw, 1.9rem) var(--gutter);
  mix-blend-mode: difference;
  pointer-events: none;
}
.masthead a, .masthead button { pointer-events: auto; }
.masthead__mark {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1.7vw, 1.5rem);
  letter-spacing: 0.02em;
  color: var(--bone);
  line-height: 1;
}
.bat {
  display: inline-block;
  color: var(--vein-red);
}
.masthead__mark .bat { width: 1.7em; height: auto; }
.masthead__nav {
  display: inline-flex;
  align-items: baseline;
  gap: clamp(1rem, 2.6vw, 2.2rem);
}
.masthead__lang,
.masthead__forum {
  font-family: var(--font-grotesk);
  font-size: var(--fs-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ash);
  transition: color var(--dur-1) var(--ease-out-expo);
}
.masthead__lang:hover, .masthead__lang:focus-visible,
.masthead__forum:hover, .masthead__forum:focus-visible { color: var(--bone); }
.masthead__access {
  position: relative;
  font-family: var(--font-grotesk);
  font-size: var(--fs-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--bone);
  padding-bottom: 3px;
}
.masthead__access::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--bone);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--dur-1) var(--ease-out-expo);
}
.masthead__access:hover::after,
.masthead__access:focus-visible::after { transform: scaleX(1); transform-origin: left; }

/* --- chapter rail: vertical index + progress (desktop) ------------------ */
.rail {
  position: fixed;
  top: 50%;
  right: clamp(0.9rem, 2vw, 2.1rem);
  transform: translateY(-50%);
  z-index: var(--z-rail);
  display: flex;
  flex-direction: column;
  gap: 1.05rem;
  mix-blend-mode: difference;
}
.rail__item {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  justify-content: flex-end;
}
.rail__num {
  font-family: var(--font-grotesk);
  font-size: var(--fs-micro);
  letter-spacing: 0.2em;
  color: var(--bone);
  opacity: 0;
  transform: translateX(6px);
  transition: opacity var(--dur-1) var(--ease-out-expo),
              transform var(--dur-1) var(--ease-out-expo);
}
.rail__tick {
  width: 22px; height: 1px;
  background: var(--bone);
  opacity: 0.32;
  transform-origin: right;
  transition: opacity var(--dur-1) var(--ease-out-expo),
              width var(--dur-1) var(--ease-out-expo);
}
.rail__item:hover .rail__num,
.rail__item.is-active .rail__num { opacity: 0.85; transform: none; }
.rail__item.is-active .rail__tick { width: 40px; opacity: 1; }
.rail__item:hover .rail__tick { width: 34px; opacity: 0.7; }

/* --- skip link ---------------------------------------------------------- */
.skip {
  position: fixed;
  top: 0; left: 0;
  z-index: var(--z-veil);
  padding: 0.7rem 1.1rem;
  background: var(--ink-raise);
  color: var(--bone);
  font-size: var(--fs-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  transform: translateY(-130%);
  transition: transform var(--dur-1) var(--ease-out-expo);
}
.skip:focus { transform: none; outline: 1px solid var(--bone); outline-offset: 0; }


@media (max-width: 860px) {
  .rail { display: none; }
}