/* ==========================================================================
   Tokens
   Four brand colors. Everything else is mixed from them, so the palette
   stays honest. Each mixed value has a flat hex fallback on the line above.
   ========================================================================== */

:root {
  /* Brand */
  --ink:    #0B0B0F;
  --paper:  #F5F3EE;
  --signal: #b80000;
  --mute:   #8A8A93;

  /* Same four, as channels, for the translucent layers below */
  --ink-rgb:    11, 11, 15;
  --paper-rgb:  245, 243, 238;
  --signal-rgb: 184, 0, 0;
  --mute-rgb:   138, 138, 147;

  /* Roles (light) */
  --bg: var(--paper);
  --fg: var(--ink);

  /* Secondary text. Pure --mute on paper is only 3:1, which fails for small
     text, so small copy uses this darkened mix instead. */
  --fg-soft: #56565a;
  --fg-soft: color-mix(in oklab, var(--mute), var(--ink) 42%);

  --rule: #dad8d3;
  --rule: color-mix(in oklab, var(--mute), var(--bg) 64%);

  --link-hover: var(--signal);

  /* Glass. Opaque by default; the @supports block below thins it out once
     we know the browser can actually blur what is behind it. */
  --glass-bg: rgba(var(--paper-rgb), 0.92);
  --glass-edge: rgba(var(--paper-rgb), 0.8);
  --glass-shade:
    0 1px 1px rgba(var(--ink-rgb), 0.03),
    0 14px 36px -14px rgba(var(--ink-rgb), 0.14);

  /* Backdrop blob strength */
  --blob-signal: 0.20;
  --blob-mute: 0.26;

  /* Type */
  --family: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --size-display: clamp(3.65rem, 12.3vw, 7.85rem);
  --size-lead:    clamp(1.26rem, 1.8vw, 1.47rem);
  --size-feature: clamp(1.96rem, 3.8vw, 2.8rem);
  --size-title:   1.33rem;
  --size-body:    1.19rem;
  --size-small:   0.98rem;
  --size-label:   0.91rem;

  /* Rhythm */
  --band-gap: clamp(3rem, 7vw, 4.75rem);
  --col-label: 9rem;
  --panel-pad: clamp(1.5rem, 3.5vw, 2.25rem);
  --radius: 14px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: var(--ink);
    --fg: var(--paper);

    --fg-soft: #a2a2aa;
    --fg-soft: color-mix(in oklab, var(--mute), var(--paper) 28%);

    --rule: #2c2c33;
    --rule: color-mix(in oklab, var(--mute), var(--bg) 76%);

    /* Raw #b80000 on near-black is 2.8:1, too dark to read. Lifted toward
       paper for text; the solid mark and blobs keep the true red. */
    --link-hover: #b8000080;
    --link-hover: var(--signal);

    --glass-bg: rgba(var(--ink-rgb), 0.9);
    --glass-edge: rgba(var(--mute-rgb), 0.2);
    --glass-shade:
      0 1px 1px rgba(var(--ink-rgb), 0.3),
      0 18px 44px -16px rgba(var(--ink-rgb), 0.6);

    --blob-signal: 0.42;
    --blob-mute: 0.2;
  }
}

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  :root {
    --glass-bg: rgba(var(--paper-rgb), 0.58);
  }

  @media (prefers-color-scheme: dark) {
    :root { --glass-bg: rgba(var(--ink-rgb), 0.5); }
  }
}


/* ==========================================================================
   Base
   ========================================================================== */

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

html {
  font-size: 115%;
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

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

body {
  position: relative;
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--family);
  font-size: var(--size-body);
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, p, ul { margin: 0; }
ul { padding: 0; list-style: none; }

a {
  color: inherit;
  text-decoration-color: var(--rule);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  transition: color 120ms ease, text-decoration-color 120ms ease;
}

a:hover {
  color: var(--link-hover);
  text-decoration-color: currentColor;
}

:focus-visible {
  outline: 2px solid var(--link-hover);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  padding: 0.75rem 1rem;
  background: var(--fg);
  color: var(--bg);
  font-size: var(--size-small);
  text-decoration: none;
  z-index: 20;
}

.skip-link:focus {
  left: 0;
  color: var(--bg);
}


/* ==========================================================================
   Animated backdrop
   Three soft blobs in the brand colors, drifting on long offset cycles. They
   never repeat the same arrangement, and they give the glass panels above
   something real to refract.
   ========================================================================== */

.backdrop {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(40px);
  will-change: transform;
}

.blob--1 {
  width: 62vmax;
  height: 62vmax;
  top: -22vmax;
  left: -14vmax;
  background: radial-gradient(circle at 50% 50%,
    rgba(var(--signal-rgb), var(--blob-signal)) 0%,
    rgba(var(--signal-rgb), 0) 68%);
}

.blob--2 {
  width: 54vmax;
  height: 54vmax;
  top: 26vmax;
  right: -20vmax;
  background: radial-gradient(circle at 50% 50%,
    rgba(var(--mute-rgb), var(--blob-mute)) 0%,
    rgba(var(--mute-rgb), 0) 70%);
}

.blob--3 {
  width: 40vmax;
  height: 40vmax;
  bottom: -18vmax;
  left: 18vmax;
  background: radial-gradient(circle at 50% 50%,
    rgba(var(--signal-rgb), calc(var(--blob-signal) * 0.65)) 0%,
    rgba(var(--signal-rgb), 0) 72%);
}

@media (prefers-reduced-motion: no-preference) {
  .blob--1 { animation: drift-1 34s ease-in-out infinite alternate; }
  .blob--2 { animation: drift-2 43s ease-in-out infinite alternate; }
  .blob--3 { animation: drift-3 51s ease-in-out infinite alternate; }
}

@keyframes drift-1 {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(14vmax, 9vmax, 0) scale(1.18); }
}

@keyframes drift-2 {
  from { transform: translate3d(0, 0, 0) scale(1.1); }
  to   { transform: translate3d(-13vmax, -14vmax, 0) scale(0.9); }
}

@keyframes drift-3 {
  from { transform: translate3d(0, 0, 0) scale(0.95); }
  to   { transform: translate3d(20vmax, -10vmax, 0) scale(1.25); }
}


/* ==========================================================================
   Page frame
   Centered, with a fixed measure. Keeps the layout's position independent
   of window width, so it looks the same regardless of browser/window size.
   ========================================================================== */

.page {
  position: relative;
  max-width: 64rem;
  margin: 0 auto;
  padding: clamp(1rem, 2.5vw, 1.5rem) clamp(1.5rem, 7vw, 6rem) clamp(4rem, 10vw, 7rem);
}

/* The glass recipe, in one place. */
.glass {
  background: var(--glass-bg);
  border: 1px solid var(--glass-edge);
  box-shadow: var(--glass-shade);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  backdrop-filter: blur(20px) saturate(160%);
}


/* --- Masthead -------------------------------------------------------------- */

.masthead {
  position: sticky;
  top: clamp(0.75rem, 2vw, 1.25rem);
  z-index: 10;
  display: flex;
  justify-content: flex-end;
  margin-bottom: clamp(4rem, 12vw, 8rem);
}

.nav {
  display: flex;
  flex-wrap: wrap;
  gap: 1.375rem;
  padding: 0.6rem 1.25rem;
  border-radius: 999px;
  font-size: var(--size-small);
}

.nav a {
  color: var(--fg-soft);
  text-decoration: none;
}

.nav a:hover { color: var(--link-hover); }


/* --- Hero ------------------------------------------------------------------ */
/* Sits directly on the backdrop. Nothing between the name and the gradient. */

.hero { margin-bottom: clamp(4.5rem, 12vw, 8rem); }

.hero-name {
  font-size: var(--size-display);
  font-weight: 600;
  line-height: 0.92;
  letter-spacing: -0.035em;
  max-width: 14ch;
}

.hero-line {
  margin-top: 1.75rem;
  max-width: 34ch;
  font-size: var(--size-lead);
  line-height: 1.45;
  color: var(--fg-soft);
  text-wrap: pretty;
}

/* The one loud thing on the page. */
.mark {
  display: block;
  width: 104px;
  height: 7px;
  margin-top: 2.75rem;
  background: var(--signal);
  transform-origin: left center;
}


/* --- Bands ----------------------------------------------------------------- */
/* Two columns: the section name sits on the raw backdrop in the margin, the
   content floats above it on glass. */

.band {
  display: grid;
  grid-template-columns: var(--col-label) minmax(0, 1fr);
  gap: 0 clamp(1.25rem, 3vw, 2.5rem);
  padding-top: var(--band-gap);
}

.band-label {
  font-size: var(--size-label);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.01em;
  color: var(--fg-soft);
  padding-top: calc(var(--panel-pad) + 0.15rem);
}

.band-body {
  min-width: 0;
  padding: var(--panel-pad);
  border-radius: var(--radius);
}

.band-intro {
  max-width: 48ch;
  margin-bottom: 1.75rem;
  color: var(--fg-soft);
  text-wrap: pretty;
}


/* --- Prose ----------------------------------------------------------------- */

.prose {
  max-width: 58ch;
  text-wrap: pretty;
}

.prose + .prose { margin-top: 1.25rem; }

.feature {
  font-size: var(--size-feature);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: 1.125rem;
}

.feature a { text-decoration-color: var(--signal); }

.aside {
  max-width: 48ch;
  margin-top: 1.5rem;
  font-size: var(--size-small);
  color: var(--fg-soft);
}


/* --- Rows ------------------------------------------------------------------ */
/* One structural device for every list on the site: essays, notes, accounts.
   The rule is there to separate rows, not to decorate them. */

.row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.25rem 2rem;
  align-items: baseline;
  padding: 1.0625rem 0;
  border-bottom: 1px solid var(--rule);
}

.row:first-child { padding-top: 0; }
.rows > .row:last-child { padding-bottom: 0; border-bottom: 0; }

.row-main { min-width: 0; }

.row-title {
  display: inline-block;
  max-width: 44ch;
  font-size: var(--size-title);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.012em;
  text-decoration: none;
  text-wrap: pretty;
}

.row-title::after {
  content: "";
  display: block;
  height: 2px;
  margin-top: 0.3rem;
  background: var(--link-hover);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 180ms ease;
}

.row-title:hover::after,
.row-title:focus-visible::after { transform: scaleX(1); }

.row-note {
  max-width: 46ch;
  margin-top: 0.3rem;
  font-size: var(--size-small);
  line-height: 1.5;
  color: var(--fg-soft);
  text-wrap: pretty;
}

.row-meta {
  font-size: var(--size-small);
  font-variant-numeric: tabular-nums;
  color: var(--fg-soft);
  white-space: nowrap;
  text-align: right;
}


/* --- Footer ---------------------------------------------------------------- */

.footer {
  margin-top: clamp(4rem, 10vw, 6rem);
  padding: 1.125rem var(--panel-pad);
  border-radius: var(--radius);
  font-size: var(--size-small);
  color: var(--fg-soft);
}


/* ==========================================================================
   Article (note.html)
   ========================================================================== */

.article {
  max-width: 40rem;
  padding: clamp(1.75rem, 4vw, 3rem);
  border-radius: var(--radius);
}

.article-meta {
  font-size: var(--size-small);
  color: var(--fg-soft);
}

.article-title {
  margin-top: 0.75rem;
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.028em;
  text-wrap: balance;
}

.article-body {
  margin-top: 2.25rem;
  font-size: 1.125rem;
  line-height: 1.65;
  text-wrap: pretty;
}

.article-body > * + * { margin-top: 1.4em; }

.article-body h2 {
  margin-top: 2.5em;
  font-size: 1.1875rem;
  font-weight: 600;
  letter-spacing: -0.012em;
}

.article-body a { text-decoration-color: var(--signal); }

.article-body blockquote {
  margin: 2em 0;
  padding-left: 1.25rem;
  border-left: 3px solid var(--signal);
  color: var(--fg-soft);
}

.article-body ul {
  padding-left: 1.1rem;
  list-style: disc;
}

.article-body li + li { margin-top: 0.4em; }

.article-body code {
  padding: 0.1em 0.3em;
  background: rgba(var(--mute-rgb), 0.18);
  border-radius: 3px;
  font-size: 0.9em;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.article-back {
  display: inline-block;
  margin-top: 3rem;
  font-size: var(--size-small);
  color: var(--fg-soft);
  text-decoration: none;
}

.article-back:hover { color: var(--link-hover); }


/* ==========================================================================
   Load sequence
   One orchestrated moment: the name, the line, then the mark draws itself.
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
  .hero-name,
  .hero-line {
    animation: rise 700ms cubic-bezier(0.2, 0.7, 0.3, 1) both;
  }

  .hero-name { animation-delay: 80ms; }
  .hero-line { animation-delay: 220ms; }

  .mark {
    animation: draw 520ms cubic-bezier(0.2, 0.7, 0.3, 1) 420ms both;
  }
}

@keyframes rise {
  from { opacity: 0; transform: translateY(0.5rem); }
  to   { opacity: 1; transform: none; }
}

@keyframes draw {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}


/* ==========================================================================
   Narrow screens
   The margin column folds on top of the content it labels.
   ========================================================================== */

@media (max-width: 44rem) {
  .band {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .band-label {
    padding-top: 0;
    margin-bottom: 0.875rem;
    padding-left: 0.125rem;
  }
}

@media (max-width: 30rem) {
  .row {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .row-meta { text-align: left; margin-top: 0.5rem; }
}