@font-face {
  font-family: 'Inconsolata', monospace;
  src: url('https://fonts.googleapis.com/css?family=Inconsolata');
}

body {
  margin: 0;
  padding: 5%;
  height: 100%;
  max-height: 100%;
  background: transparent;
  color: #d0d0d0;
  font-family: 'Inconsolata', monospace;
  overflow-x: hidden;
  font-size: 14px;
  overflow: scroll;
  -webkit-overflow-scrolling: touch;
}

a { color: #0099ff; }
a:visited { color: #0077cc; }
b, strong { color: #e8e8e8; }
i, em { color: #b0b0b0; }
code { color: #0099ff; background: rgba(0,153,255,0.1); padding: 1px 4px; }
table { border-collapse: collapse; }
td { padding: 4px 8px; border: 1px solid rgba(255,255,255,0.1); color: #d0d0d0; }

#images {
  width: 95%;
  padding: 2.5%;
}

#right { text-align: right; }
#left  { text-align: left; }

img   { max-width: 100%; max-height: 100%; }
video { max-width: 100%; max-height: 100%; }

#projects_menu { display: none; }
#writing_menu  { display: none; }
#games_menu    { display: none; }
#archive_menu  { display: none; }
#about_menu    { display: none; }

/* ── Dithered Hero — ocean-matched tint ── */

.hero-dither {
  background: #0A363C !important;
}

.hero-dither as-dithered-image,
.hero-dither canvas {
  mix-blend-mode: multiply;
}

/* ── Article Hero Image (Hermes-style) ── */

/*
 * Layer stack (adapted from hermes-agent.nousresearch.com):
 * 1. Base image — inverted via CSS filter
 * 2. Color layer — mix-blend-mode: difference (tints the inverted image)
 * 3. Grain overlay — SVG noise, mix-blend-mode: color-dodge
 * 4. Warm glow — radial gradient, mix-blend-mode: lighten
 */

.hero {
  position: relative;
  width: 100%;
  max-width: 1000px;
  height: 420px;
  overflow: hidden;
  margin: 0 0 20px 0;
  background: #0a0a0a;
}

.hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: grayscale(1);
}

/* Color tint layer — difference blend over inverted image */
.hero .hero-tint {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: #1a1a1a;
  mix-blend-mode: difference;
  opacity: 0.85;
  pointer-events: none;
  z-index: 1;
}

/* Grain overlay — color-dodge for that Hermes glow */
.hero::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.25'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 512px 512px;
  pointer-events: none;
  mix-blend-mode: color-dodge;
  z-index: 2;
}

/* Warm glow — subtle radial from top-left */
.hero::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: radial-gradient(
    at 0% 0%,
    rgba(200, 180, 150, 0) 60%,
    rgba(200, 180, 150, 0.25) 100%
  );
  mix-blend-mode: lighten;
  opacity: 0.2;
  pointer-events: none;
  z-index: 3;
}

/* ── Parallax variant ── */
.hero-parallax {
  position: relative;
  width: 100%;
  max-width: 1000px;
  height: 420px;
  overflow: hidden;
  margin: 0 0 20px 0;
  background-color: #0a0a0a;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  background-repeat: no-repeat;
}

/* Invert the parallax bg image via an overlay trick */
.hero-parallax .hero-invert {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: white;
  mix-blend-mode: difference;
  pointer-events: none;
  z-index: 1;
}

.hero-parallax .hero-tint {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: #1a1a1a;
  mix-blend-mode: difference;
  opacity: 0.85;
  pointer-events: none;
  z-index: 2;
}

.hero-parallax::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.25'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 512px 512px;
  pointer-events: none;
  mix-blend-mode: color-dodge;
  z-index: 3;
}

.hero-parallax::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: radial-gradient(
    at 0% 0%,
    rgba(200, 180, 150, 0) 60%,
    rgba(200, 180, 150, 0.25) 100%
  );
  mix-blend-mode: lighten;
  opacity: 0.2;
  pointer-events: none;
  z-index: 4;
}