/* Base — shared reset + page chrome, loaded by every page site-wide. */

/* Cross-document view transitions — a quick, restrained cross-fade
   between full page navigations (this is a multi-page site, not a SPA,
   so this is the MPA/"navigation: auto" flavor of the API, not
   document.startViewTransition()). Pure progressive enhancement: browsers
   without support just navigate normally, no JS, no fallback needed. */
@view-transition {
  navigation: auto;
}
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.15s;
}

/* Fallback for browsers without cross-document view transitions (Firefox/
   Zen as of this writing — it's still a mostly-Chromium feature). Gated
   behind an @supports check on view-transition-name so it only runs
   where the real thing above doesn't, rather than layering a second
   animation on top of it in browsers that do support it. .page-frame
   already wraps every page's content (see grid.css), so this needs no
   extra markup. */
@supports not (view-transition-name: none) {
  @keyframes site-fade-in {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
  .page-frame {
    animation: site-fade-in 0.25s ease;
  }
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-base);
}

body {
  background-color: var(--color-page-bg);
  /* A barely-there paper-grain hairline weave — "leaves as... texture"
     from the brief, addressed honestly rather than left unfulfilled.
     data: URIs can't read custom properties, so the dark and light
     variants are two literal SVGs (stroke color baked in), swapped by
     the [data-theme="light"] override below rather than one CSS var. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48'%3E%3Cpath d='M0 48L48 0' stroke='%236d7059' stroke-width='0.6' opacity='0.4'/%3E%3C/svg%3E");
  background-repeat: repeat;
}
[data-theme="light"] body {
  /* Round 5: resynced to the new, darker border color. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48'%3E%3Cpath d='M0 48L48 0' stroke='%23837d55' stroke-width='0.5' opacity='0.1'/%3E%3C/svg%3E");
}

a {
  color: inherit;
  text-decoration: none;
}

::selection {
  background: color-mix(in srgb, var(--color-accent) 30%, var(--color-bg));
  color: var(--color-ink);
}

/* Scanline overlay — inverted to light lines now that the ground is
   dark (the original dark-on-light version would have gone nearly
   invisible against a near-black background, losing the effect
   entirely). Same idea, same weight, just flipped polarity. */
.vhs {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  background: repeating-linear-gradient(
    0deg,
    rgba(255, 255, 255, 0.05) 0px,
    rgba(255, 255, 255, 0.05) 1px,
    transparent 1px,
    transparent 2px
  );
}

/* Carried over from style.css's scrollbar theme, retokenized. */
::-webkit-scrollbar {
  width: 14px;
}
::-webkit-scrollbar-track {
  background: var(--color-surface);
}
::-webkit-scrollbar-thumb {
  background: var(--color-moss);
  border-radius: var(--radius);
  border: 3px solid var(--color-surface);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--color-olive);
}
html {
  scrollbar-width: thin;
  scrollbar-color: var(--color-moss) var(--color-surface);
}

/* Corner registration marks — a print/technical-drawing convention
   (crop marks at the sheet corners), reinforcing "closer to a well-set
   technical document" as a genuine structural detail rather than
   decoration. Same data:-URI-can't-read-vars situation as the texture
   above — --crop-mark is redefined per theme, not the stroke color alone. */
.crop-marks {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9997;
  background-repeat: no-repeat;
  background-size: 12px 12px;
  --crop-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Cpath d='M6 0V12M0 6H12' stroke='%234b5638' stroke-width='1' opacity='0.8'/%3E%3C/svg%3E");
  background-image: var(--crop-mark), var(--crop-mark), var(--crop-mark), var(--crop-mark);
  background-position:
    10px 10px,
    calc(100% - 22px) 10px,
    10px calc(100% - 22px),
    calc(100% - 22px) calc(100% - 22px);
}
[data-theme="light"] .crop-marks {
  --crop-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Cpath d='M6 0V12M0 6H12' stroke='%2347432b' stroke-width='1' opacity='0.8'/%3E%3C/svg%3E");
}

/* Below ~480px the full-bleed button wall (grid.css) reaches into the
   same corners these marks occupy — on a wide page they sit in true
   margin space, but there's no margin left to sit in at phone width. */
@media (max-width: 480px) {
  .crop-marks {
    display: none;
  }
}

/* Colophon — the small production note under the footer nav on every
   page, the way a well-set printed document credits its own typefaces. */
.site-colophon {
  padding: var(--space-4) var(--space-5);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-wide);
  color: var(--color-text-faint);
}