/* =========================================================================
   ZENEL — core
   Black ground, white line. Everything else is restraint.
   ========================================================================= */

:root {
  --bg: #000;
  --ink: #e8e6e2;
  --ink-dim: rgba(232, 230, 226, 0.58);
  --ink-faint: rgba(232, 230, 226, 0.34);
  --rule: rgba(255, 255, 255, 0.16);
  --rule-soft: rgba(255, 255, 255, 0.08);

  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, "Times New Roman", serif;
  --mono: ui-monospace, "Cascadia Mono", "SF Mono", "Segoe UI Mono", Consolas, monospace;

  --gut: clamp(1.25rem, 5vw, 5rem);
  --measure: 34rem;

  /* Small caps labels — the site's only UI voice. */
  --label-size: 0.6875rem;
  --label-track: 0.24em;

  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --slow: 1.2s;

  /* How softly one hand-redrawn frame gives way to the next. Roughly half
     the interval between changes, so the line is always mid-morph. */
  --boil-fade: 240ms;
}

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

html {
  background: var(--bg);
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--serif);
  font-size: clamp(1rem, 0.94rem + 0.3vw, 1.0625rem);
  line-height: 1.65;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

a { color: inherit; }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

::selection {
  background: var(--ink);
  color: #000;
}

/* Visible focus is not optional on a black page. */
:focus-visible {
  outline: 1px solid var(--ink);
  outline-offset: 4px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 200;
  padding: 0.75rem 1.25rem;
  background: #000;
  border: 1px solid var(--ink);
  font-family: var(--mono);
  font-size: var(--label-size);
  letter-spacing: var(--label-track);
  text-transform: uppercase;
  text-decoration: none;
  transform: translate(-50%, -140%);
  transition: transform 0.2s var(--ease);
}
.skip:focus { transform: translate(-50%, 0.5rem); }

.label {
  font-family: var(--mono);
  font-size: var(--label-size);
  font-weight: 400;
  letter-spacing: var(--label-track);
  text-transform: uppercase;
}

/* =========================================================================
   The boil
   Every drawing is a pair of hand-redrawn frames, alternating about twice a
   second and cross-fading rather than cutting. Because the frames are
   `screen`-blended, a half-overlap doesn't wash out — mid-fade the line sits
   near 75% brightness and the two near-identical drawings read as one line
   swimming. The black ground disappears, so frames stack and drift with no
   cutouts.
   ========================================================================= */

.boil {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
}

.boil__f {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  mix-blend-mode: screen;
  transition: opacity var(--boil-fade) linear;
}

.boil__f.is-on { opacity: 1; }

/* The pencil originals arrive as graphite on cream. Inverting puts them in
   the same key as everything else — cream becomes near-black, graphite
   becomes line — and `screen` then drops the ground out. */
.boil--pencil .boil__f { filter: invert(1) grayscale(1) contrast(1.15) brightness(1.08); }

/* =========================================================================
   Chrome — masthead and footer
   ========================================================================= */

.masthead {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: clamp(1rem, 2.5vw, 1.75rem) var(--gut);
  /* Difference keeps the chrome legible wherever a drawing runs bright
     underneath it: white on black stays white, white on line goes black. */
  mix-blend-mode: difference;
  pointer-events: none;
}

.masthead > * { pointer-events: auto; }

.wordmark {
  font-family: var(--mono);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}

.nav {
  display: flex;
  gap: clamp(1rem, 3vw, 2.25rem);
}

.nav a {
  position: relative;
  font-family: var(--mono);
  font-size: var(--label-size);
  letter-spacing: var(--label-track);
  text-transform: uppercase;
  text-decoration: none;
  opacity: 0.75;
  transition: opacity 0.3s var(--ease);
}

.nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.4em;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--ease);
}

.nav a:hover,
.nav a[aria-current] { opacity: 1; }
.nav a:hover::after,
.nav a[aria-current]::after { transform: scaleX(1); }

.colophon {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.25rem 2rem;
  margin-top: clamp(4rem, 12vh, 9rem);
  padding: 2rem var(--gut) clamp(2rem, 6vh, 3.5rem);
  border-top: 1px solid var(--rule-soft);
  background: var(--bg);
}

.colophon__group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.5rem;
}

.colophon a,
.colophon span,
.colophon time {
  font-family: var(--mono);
  font-size: var(--label-size);
  letter-spacing: var(--label-track);
  text-transform: uppercase;
  color: var(--ink-faint);
  text-decoration: none;
  transition: color 0.3s var(--ease);
}

.colophon a:hover { color: var(--ink); }
.colophon .is-strong { color: var(--ink-dim); }

/* =========================================================================
   Touch
   The chrome is set in 11px small caps, which leaves every link about 18px
   tall — fine for a cursor, too small for a thumb. Enlarge the hit areas on
   touch devices only, without moving anything visually.
   ========================================================================= */

@media (pointer: coarse) {
  /* The nav underline is positioned against the link box, so growing that box
     with padding would drag the underline down. An absolutely positioned
     overlay adds hit area and takes up no layout at all. */
  .wordmark,
  .nav a { position: relative; }

  .wordmark::before,
  .nav a::before {
    content: "";
    position: absolute;
    inset: -0.7rem -0.5rem;
  }

  /* The footer has no such constraint, so plain padding is simpler and cannot
     produce overlapping targets. It goes on the spans and time as well, or
     they stop sharing a baseline with the links. */
  .colophon a,
  .colophon span,
  .colophon time { padding-block: 0.55rem; }

  .colophon__group { gap: 0 1.5rem; }
}

/* =========================================================================
   Reduced motion — one switch, everything obeys
   Layout is unchanged; only movement stops.
   ========================================================================= */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    /* The delays matter as much as the durations: without these the
       staggered wordmark letters and Malli's line still arrive a second
       late, just instantly once they do. */
    animation-delay: 0.001ms !important;
    transition-delay: 0.001ms !important;
  }
}