/* Shared by every page: colors, type, grain and the header. */

/* ---------- colors (follow the device's light/dark setting) ---------- */

:root {
  --bg: #1b1b1a;
  --ink: #dedad1;
  --muted: #7c786f;
  --rule: rgba(222, 218, 209, .08);
  --edge: rgba(222, 218, 209, .12);
  --edge-hi: rgba(222, 218, 209, .5);
  --tweet: rgba(222, 218, 209, .75);
  --card-bg: #242422;
  --card-border: rgba(255, 255, 255, .06);
  --card-shadow: 0 16px 40px -12px rgba(0, 0, 0, .6);
  --vignette: rgba(0, 0, 0, .45);
  --grain: .31;
  --select: #3ee4f2;
  --select-ink: #062124;
}

@media (prefers-color-scheme: light) {
  :root {
    --bg: #e8e7e3;
    --ink: #1f1f1d;
    --muted: #85827b;
    --rule: rgba(31, 31, 29, .09);
    --edge: rgba(31, 31, 29, .14);
    --edge-hi: rgba(31, 31, 29, .55);
    --tweet: rgba(31, 31, 29, .7);
    --card-bg: #f1f0ed;
    --card-border: rgba(31, 31, 29, .07);
    --card-shadow: 0 1px 1px rgba(31, 31, 29, .04), 0 14px 34px -12px rgba(31, 31, 29, .2);
    --vignette: rgba(31, 31, 29, .07);
    --grain: .34;
    --select: #5ad8e6;
    --select-ink: #062124;
  }
}

/* Room the phone keeps for its notch, status bar and home indicator. */
:root {
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
}

/* ---------- base ---------- */

/* Nothing on the site is position: fixed, and pages scroll inside their own
   box instead of the document. Safari on iOS 26 paints the strips behind its
   status bar and toolbar with a colour sampled from fixed layers at the screen
   edges, and keeps that colour when the phone switches between light and dark.
   Without fixed layers it uses the page itself. */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
html { background: var(--bg); }
body {
  overflow: hidden;
  background: var(--bg);
  color: var(--ink);
  font-family: "Geist", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--select); color: var(--select-ink); }

.mono {
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
}

/* The vignette and grain reach past the screen edges so the matte finish
   also fills the area around the toolbar and the home indicator. Safari on
   the iPhone paints the strip behind the status bar itself, in one flat
   colour, so the grain fades in over the top 48px of the page rather than
   stopping at a hard line: the band above is mid-grey, which the overlay
   blend leaves unchanged. */
.ground {
  position: absolute; inset: -120px; z-index: 0; pointer-events: none;
  background: radial-gradient(120% 90% at 50% 45%, transparent 55%, var(--vignette));
}
.grain {
  position: absolute; inset: -120px; z-index: 50; pointer-events: none;
  opacity: var(--grain);
  mix-blend-mode: overlay;
  background-size: auto, 160px;
  background-image: linear-gradient(#808080 calc(120px + var(--safe-top)), transparent calc(168px + var(--safe-top))), url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n' color-interpolation-filters='sRGB'><feTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='.6 .6 .6 0 -.4 .6 .6 .6 0 -.4 .6 .6 .6 0 -.4 0 0 0 0 1'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* ---------- soft edges ----------
   Content scrolling under the header, or toward the bottom of the screen, is
   blurred and faded into the background instead of being cut off. Each edge
   stacks blur layers that get stronger toward the edge. Nothing here may set
   opacity or transform: either would stop the blur from seeing the page. */

.edge { position: absolute; left: 0; right: 0; z-index: 15; pointer-events: none; }
.edge > i { position: absolute; inset: 0; }
.edge-top {
  top: 0; height: calc(var(--top-h, 72px) + 40px);
  background: linear-gradient(var(--bg), color-mix(in srgb, var(--bg) 75%, transparent) calc(100% - 40px), transparent);
}
.edge-bottom {
  bottom: 0; height: calc(72px + var(--safe-bottom, 0px));
  background: linear-gradient(transparent, color-mix(in srgb, var(--bg) 75%, transparent) 60%, var(--bg));
}
.edge > i:nth-child(1) { -webkit-backdrop-filter: blur(1.5px); backdrop-filter: blur(1.5px); }
.edge > i:nth-child(2) { -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); }
.edge > i:nth-child(3) { -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.edge-top > i:nth-child(1) { -webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent); }
.edge-top > i:nth-child(2) { -webkit-mask-image: linear-gradient(#000 50%, transparent 85%); mask-image: linear-gradient(#000 50%, transparent 85%); }
.edge-top > i:nth-child(3) { -webkit-mask-image: linear-gradient(#000 30%, transparent 65%); mask-image: linear-gradient(#000 30%, transparent 65%); }
.edge-bottom > i:nth-child(1) { -webkit-mask-image: linear-gradient(to top, #000 60%, transparent); mask-image: linear-gradient(to top, #000 60%, transparent); }
.edge-bottom > i:nth-child(2) { -webkit-mask-image: linear-gradient(to top, #000 40%, transparent 85%); mask-image: linear-gradient(to top, #000 40%, transparent 85%); }
.edge-bottom > i:nth-child(3) { -webkit-mask-image: linear-gradient(to top, #000 20%, transparent 60%); mask-image: linear-gradient(to top, #000 20%, transparent 60%); }

/* ---------- header ---------- */

.top {
  position: absolute; top: 0; left: 0; right: 0; z-index: 20;
  display: flex; justify-content: space-between; align-items: flex-start; gap: 16px;
  padding: calc(24px + var(--safe-top)) calc(28px + var(--safe-right)) 24px calc(28px + var(--safe-left));
  pointer-events: none;
}
.top > * { pointer-events: auto; }
.name { display: inline-flex; align-items: center; gap: 8px; vertical-align: top; font-size: 15px; font-weight: 500; line-height: 1; letter-spacing: -.01em; }
/* The thread beside the name (mark.js draws it, and turns it once on hover). Its negative margin
   keeps the header as tall as the name. */
.mark { flex: none; width: 19px; height: 19px; margin: -2px 0; overflow: visible; }
.mark path { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }
.mark .line { stroke-width: 8; }
.mark .ghost { stroke-width: 4; opacity: .35; }
.meta { display: block; margin-top: 8px; color: var(--muted); }
.views {
  display: flex; gap: 18px; align-items: center; color: var(--muted);
  text-transform: none; letter-spacing: normal;
}
.views button, .views a { transition: color .2s; }
.views button:hover, .views a:hover,
.views [aria-pressed="true"], .views [aria-current="page"] { color: var(--ink); }
.views [aria-pressed="true"], .views [aria-current="page"] {
  text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px;
}

@media (max-width: 640px) {
  .top { padding: calc(18px + var(--safe-top)) calc(16px + var(--safe-right)) 18px calc(16px + var(--safe-left)); }
  .views { gap: 14px; }
}