/* ─── Font Loading ─── */
@import url('https://fonts.googleapis.com/css2?family=Host+Grotesk:wght@300..800&family=Newsreader:ital,opsz,wght@0,6..72,400;1,6..72,400&family=Fragment+Mono&display=swap');

/* ─── Body ─── */
/* The drawn cursor (js/cursor.js) stands in for the native one only once
   it is running — if the script never starts, the native cursor stays */
.has-cursor body {
  cursor: none;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-text);
  background-color: var(--color-bg);
  overflow-x: hidden;
  position: relative;
}

/* Paper grain texture overlay — heavy, like cheap newsprint.
   --grain-clip is the one handle: the Grain demo on craft.html cuts a hole
   in both layers over its own box, and lays its own grain inside it.
   Unset, nothing is clipped. */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: var(--z-overlay);
  opacity: 0.14;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='6' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 512px 512px;
  clip-path: var(--grain-clip, none);
}

/* Second grain layer — coarser, like paper fibre under a loupe */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: var(--z-overlay);
  opacity: 0.07;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='coarse'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23coarse)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 256px 256px;
  mix-blend-mode: multiply;
  clip-path: var(--grain-clip, none);
}

/* ─── Rauschenberg: Color wash blocks ─── */
.color-wash {
  position: absolute;
  border-radius: 2px;
  pointer-events: none;
  mix-blend-mode: multiply;
  opacity: 0.07;
}

.color-wash--orange {
  background-color: var(--orange);
}

.color-wash--blue {
  background-color: var(--blue);
}

.color-wash--red {
  background-color: var(--red);
}

/* ─── Rauschenberg: Ink bleed ───
   The washes above are clean rectangles. This is their wet sibling:
   the same block of colour pushed through a turbulence displacement,
   so the edge feathers and creeps the way ink does when it hits
   uncoated stock. The silhouette is carried as an alpha mask, which
   lets the modifiers below tint it from the palette without a
   separate SVG per colour. The grain sits inside the mask — the sheet
   drinking the ink, not a texture laid over the top of it. */
.ink-bleed {
  --bleed-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400' preserveAspectRatio='none'%3E%3Cfilter id='b' x='-30%25' y='-30%25' width='160%25' height='160%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.013' numOctaves='4' seed='9' result='n'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='n' scale='62' xChannelSelector='R' yChannelSelector='G'/%3E%3CfeGaussianBlur stdDeviation='1.4'/%3E%3C/filter%3E%3Crect x='62' y='50' width='276' height='300' rx='6' fill='%23000' filter='url(%23b)'/%3E%3C/svg%3E");
  position: absolute;
  pointer-events: none;
  mix-blend-mode: multiply;
  opacity: 0.09;
  -webkit-mask-image: var(--bleed-shape);
          mask-image: var(--bleed-shape);
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
}

/* A blot is never flat — grain reads as absorption into the paper. */
.ink-bleed::after {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.55;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}

.ink-bleed--orange {
  background-color: var(--orange);
}

.ink-bleed--blue {
  background-color: var(--blue);
}

.ink-bleed--red {
  background-color: var(--red);
}

/* ─── Rauschenberg: Silkscreen image treatment ─── */
.silkscreen {
  position: relative;
}

.silkscreen img {
  mix-blend-mode: multiply;
  filter: contrast(1.1) saturate(0.85);
}

/* Ghost offset — misregistered print layer */
.silkscreen::before {
  content: '';
  position: absolute;
  inset: 0;
  background: inherit;
  opacity: 0.12;
  mix-blend-mode: multiply;
  transform: translate(4px, 3px);
  pointer-events: none;
  border-radius: inherit;
}

/* ─── Selection ─── */
::selection {
  background-color: var(--orange);
  color: var(--white);
}

/* ─── Headings ─── */
h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
  color: var(--color-text);
}

h1 {
  font-size: var(--text-display);
  line-height: 0.95;
}

h2 {
  font-size: var(--text-3xl);
  line-height: var(--leading-tight);
}

h3 {
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
}

/* ─── Body Text ─── */
p {
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-text);
}

.text-lg {
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
}

.text-muted {
  color: var(--color-text-muted);
}

/* ─── Mono / Labels ─── */
.mono {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
}

.label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* ─── Links ─── */
a {
  text-decoration: none;
  position: relative;
}

a.underline-draw {
  display: inline-block;
}

a.underline-draw::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 1.5px;
  background-color: var(--color-text);
  transition: width var(--duration-normal) var(--ease-out);
}

a.underline-draw:hover::after {
  width: 100%;
}

/* ─── Images ─── */
img {
  user-select: none;
  -webkit-user-drag: none;
}

/* ─── Reveal Animation Base ─── */
[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
}

[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ─── Cursor (hidden on touch) ─── */
@media (pointer: coarse) {
  body {
    cursor: auto;
  }
}

/* ─── Smooth scroll ─── */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}