/* andomation.com: Joe Andolina
   Visual system from design-reference.md (dark direction only): charcoal surfaces, Manrope headings,
   Inter body, lime reserved for controls, facet colors always paired with a label and border. No purple. */

:root {
  color-scheme: dark;
  --canvas: #141513;
  --header: #121311;
  --surface: #232422;
  --raised: #2c2e2a;
  --field: #181917;
  --text: #f4f4f4;
  --muted: #a3a5a2;
  --border: #595b58;
  --divider: #363833;
  --primary: #93f43e;
  --primary-hover: #b1ff70;
  --on-primary: #101711;
  --soft: #333338;
  --heading: "Manrope", system-ui, sans-serif;
  --body: "Inter", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  /* Neutral tag, when no facet applies */
  --tag-fx: #c9cbc6;
  --tag-bg: #2e302c;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  /* Chart marks, also used for status: open/failed, closed/fixed, standby */
  --mark-plan: #4a8ae6;
  --mark-make: #d9673f;
  --mark-check: #1fa094;
  --mark-ship: #bf8420;
  --outline: #8a8c88;
  /* Project tiles: the scrim that keeps the title and caption readable over full-color images */
  --scrim: rgba(16, 17, 15, 0.78);
}
::selection { background: color-mix(in srgb, var(--mark-plan) 45%, transparent); color: var(--text); }
html { scrollbar-color: var(--border) var(--canvas); }

body {
  margin: 0;
  background: var(--canvas);
  color: var(--text);
  font: 400 16px/1.6 var(--body);
  -webkit-font-smoothing: antialiased;
}
.wrap {
  max-width: 1080px;
  margin: 0 auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
h1, h2, h3 { font-family: var(--heading); margin: 0; text-wrap: balance; }
h1 { font-weight: 800; font-size: clamp(2.2rem, 5.4vw, 4rem); line-height: 1.02; letter-spacing: -0.02em; }
h2 { font-weight: 700; font-size: clamp(1.4rem, 2.8vw, 2rem); line-height: 1.15; letter-spacing: -0.01em; }
h3 { font-weight: 700; font-size: 15px; line-height: 1.3; }
p { margin: 0; max-width: 62ch; }
.muted { color: var(--muted); }
.eyebrow {
  font: 600 12px/1.4 var(--body);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.num { font-variant-numeric: tabular-nums; }

/* Show facets: text + background pairs, always shown with a label and a border, never color alone */
.tdx { --fx: #a5c9ff; --fbg: #293448; }
.tableau { --fx: #ffb39c; --fbg: #422e28; }
.cnx { --fx: #79dcd4; --fbg: #203b39; }
.df { --fx: #efbe76; --fbg: #382e20; }
/* Chips: square, borderless, tinted by facet. The Idea Engineer keeps its own pills in think.css. */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: 500 12px/1 var(--body);
  color: var(--fx, var(--tag-fx));
  background: var(--fbg, var(--tag-bg));
  border-radius: 3px;
  padding: 6px 8px;
  white-space: nowrap;
}

/* Top bar */
.topbar { background: var(--header); border-bottom: 1px solid var(--divider); }
.topbar .wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 16px;
  padding-block: 14px;
  font-size: 14px;
}
.topbar strong { font: 700 15px/1.4 var(--heading); }

/* Hero */
.hero { padding-block: clamp(36px, 6vw, 72px) 28px; }
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  gap: clamp(24px, 4vw, 48px);
  align-items: end;
}
.hero-copy { display: grid; gap: 18px; min-width: 0; }
.hero-copy .lede { font-size: 1.08rem; color: var(--text); }
.hero figure { max-width: 400px; justify-self: end; width: 100%; }

/* Media cards */
figure { margin: 0; min-width: 0; }
.card {
  background: var(--surface);
  border: 1px solid var(--divider);
  border-radius: 10px;
  overflow: hidden;
}
figure.card img, figure.card video { display: block; width: 100%; height: auto; max-width: 100%; }
figure.card figcaption {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  padding: 10px 14px 12px;
  font-size: 13px;
  color: var(--muted);
}
.media { position: relative; }
.toggle {
  position: absolute;
  right: 10px;
  bottom: 10px;
  min-height: 36px;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  background: var(--primary);
  color: var(--on-primary);
  font: 600 13px/1 var(--body);
  cursor: pointer;
}
.toggle:hover { background: var(--primary-hover); }
.toggle:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }

/* Waveform of the year */
.year { padding-block: 8px 40px; }
.wave-card { padding: 16px 16px 14px; display: grid; gap: 12px; }
.wave-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; align-items: baseline; }
.wave-head span { font-size: 12px; }
.wave-head h2 { font-size: 15px; line-height: 1.3; letter-spacing: 0; }
.wave-legend {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.wave-legend > div { display: grid; gap: 10px; justify-items: start; align-content: start; min-width: 0; }
.wave-legend .bar { width: 100%; height: 4px; border-radius: 999px; background: var(--fx); }
.wave-legend p { font-size: 13px; color: var(--muted); }

/* Section heads and lists */
.section { padding-block: 8px 40px; }
.section-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 12px; }
.rows { list-style: none; margin: 0; padding: 0; }
.rows li {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  gap: 4px 14px;
  align-items: center;
  padding: 12px 16px;
}
.rows li + li { border-top: 1px solid var(--divider); }
.rows .idx { color: var(--muted); font-size: 13px; }
.rows .what { display: grid; gap: 2px; min-width: 0; }
.rows .what span { font-size: 13px; color: var(--muted); }

/* Chapters */
.chapter { padding-block: clamp(36px, 5vw, 64px); border-top: 1px solid var(--divider); }
.chapter-grid {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 6fr);
  gap: clamp(24px, 4vw, 48px);
  align-items: start;
}
.chapter.portrait .chapter-grid { grid-template-columns: minmax(0, 6fr) minmax(0, 4fr); }
.chapter-copy { display: grid; gap: 16px; min-width: 0; }
.chapter-copy .track { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 13px; }

/* Closing */
.proved { padding-block: clamp(40px, 6vw, 72px); border-top: 1px solid var(--divider); }
/* The closing panel spans the page: the takeaway on the left, the explanation beside it. */
.proved .panel { background: var(--raised); border: 1px solid var(--border); border-radius: 10px; padding: clamp(20px, 3vw, 32px); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 12px clamp(24px, 4vw, 56px); align-items: start; }
.proved .panel > .eyebrow, .proved .panel > .panel-img { grid-column: 1 / -1; }
.proved .panel > p { max-width: 60ch; }
@media (max-width: 860px) { .proved .panel { grid-template-columns: minmax(0, 1fr); } }

footer { background: var(--header); border-top: 1px solid var(--divider); }
footer .wrap { padding-block: 24px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 24px; font-size: 14px; }
footer strong { font: 700 15px/1.4 var(--heading); }

@media (max-width: 860px) {
  .hero-grid, .chapter-grid, .chapter.portrait .chapter-grid { grid-template-columns: minmax(0, 1fr); }
  .hero figure, .chapter.portrait figure { justify-self: start; max-width: 420px; }
  .wave-legend { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 14px; }
}
@media (max-width: 520px) {
  .rows li { grid-template-columns: 28px minmax(0, 1fr); }
  .rows li .chip { grid-column: 2; justify-self: start; }
}

/* ---------- Site-wide additions ---------- */

/* Navigation */
.nav { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: var(--header); border-bottom: 1px solid var(--divider); }
.nav .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 20px;
  padding-block: 12px;
}
.nav .brand { font: 700 15px/1.4 var(--heading); color: var(--text); text-decoration: none; }
.nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: 14px; }
.nav a { color: var(--muted); text-decoration: none; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--text); }
.nav a:focus-visible, .tile:focus-visible, .next a:focus-visible, footer a:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; border-radius: 4px; }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 30; background: var(--header); }

/* Text-only chapter and two-up figures (project pages) */
.chapter.text .chapter-grid { grid-template-columns: minmax(0, 1fr); }
.pair { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 4fr); gap: 12px; align-items: start; }

/* Next project */
.next { border-top: 1px solid var(--divider); }
.next a {
  display: grid;
  gap: 6px;
  padding-block: clamp(32px, 5vw, 56px);
  color: var(--text);
  text-decoration: none;
}
.next a:hover h2 { color: var(--primary-hover); }

/* Footer links */
footer a { color: var(--text); }
footer .links { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 14px; }

/* ---------- Home ---------- */

/* Portrait hero: photo left, statement right */
.intro { padding-block: clamp(24px, 5vw, 64px) clamp(32px, 6vw, 72px); }
.intro-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(24px, 5vw, 64px);
  align-items: center;
}
.portrait-frame { border-radius: 10px; overflow: hidden; border: 1px solid var(--divider); background: var(--surface); }
.portrait-frame img { display: block; width: 100%; height: auto; max-width: 100%; }
.statement { display: grid; gap: 22px; min-width: 0; }
.statement .tags { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.statement .tags span { font: 600 12px/1.4 var(--body); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.statement h1 {
  font-size: clamp(2.6rem, 7.4vw, 6rem);
  line-height: 0.95;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}
.statement h1 .light { font-weight: 300; }
.statement .second { font: 600 clamp(1.05rem, 2vw, 1.3rem)/1.4 var(--heading); color: var(--text); max-width: 34ch; }
.statement .what { color: var(--muted); max-width: 52ch; }

/* Scrolling journey: a darkened image holds still while the method scrolls over it */
.journey { position: relative; }
.journey .backdrop {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
}
.journey .backdrop img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.32) saturate(0.9);
}
.journey .backdrop::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(var(--canvas), transparent 22%, transparent 78%, var(--canvas));
}
.journey .content { position: relative; z-index: 1; margin-top: -100vh; }
.journey .panel-block { min-height: 70vh; display: grid; align-content: center; gap: 18px; padding-block: clamp(48px, 8vw, 96px); }
.journey .panel-block h2 { font-size: clamp(2rem, 5vw, 3.4rem); line-height: 1.05; max-width: 16ch; }


/* Projects: sticky intro beside one column of hardware tiles and software cards */
.work { border-top: 1px solid var(--divider); }
.work-grid {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: start;
  padding-block: clamp(48px, 7vw, 88px);
}
.work-intro { position: sticky; top: 88px; display: grid; gap: 16px; min-width: 0; }
.work-intro h2 { font-size: clamp(1.8rem, 3.6vw, 2.6rem); line-height: 1.08; }
.tiles { display: grid; gap: clamp(24px, 3.5vw, 40px); }
.tile {
  display: grid;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--divider);
  color: var(--text);
  text-decoration: none;
  max-width: 100%;
  background: var(--surface);
}
.tile:hover { border-color: var(--border); }
/* Image-first: the still shows in full color and dims on hover, while the project's clip fades in over it (home.js).
   Write-ups and fields live on the project pages; the tile keeps the title and one caption line. */
.tile .shot { position: relative; aspect-ratio: 16 / 10; min-width: 0; }
.tile img, .tile video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tile img { transition: opacity 0.4s var(--ease); }
.tile video { opacity: 0; transition: opacity 0.5s var(--ease); }
.tile:hover img, .tile:focus-visible img { opacity: 0.55; }
.tile.playing video { opacity: 1; }
.tile .shot::after { content: ""; position: absolute; inset: 0; background: linear-gradient(var(--scrim), transparent 42%, transparent 64%, var(--scrim)); }
.tile .cap { position: absolute; z-index: 1; left: clamp(16px, 3vw, 28px); bottom: clamp(14px, 2.4vw, 20px); right: 16px; font: 400 12px/1.4 var(--mono); color: var(--text); letter-spacing: 0.04em; }
.tile h3 { position: absolute; z-index: 1; left: clamp(16px, 3vw, 28px); top: clamp(16px, 3vw, 24px); right: 16px; font-size: clamp(1.2rem, 2.6vw, 1.7rem); line-height: 1.15; max-width: 22ch; }

/* Lab notes and writing */
.notes { border-top: 1px solid var(--divider); padding-block: clamp(48px, 7vw, 88px); }
.notes > .wrap { display: grid; gap: 20px; }
.notes .intro-line { color: var(--muted); max-width: 60ch; }
.note-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.note { padding: 20px; display: grid; gap: 10px; align-content: start; }
.note h3 { font-size: 18px; }
.note p { font-size: 15px; color: var(--muted); }
.note .changed { color: var(--text); }
.writing .rows .what span { font-size: 13px; }

@media (max-width: 860px) {
  .intro-grid, .work-grid { grid-template-columns: minmax(0, 1fr); }
  .portrait-frame { max-width: 420px; }
  .work-intro { position: static; }
  .note-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 520px) {
  .pair { grid-template-columns: minmax(0, 1fr); }
}


/* Portrait fade: full color at the top, easing to grayscale, then dissolving into the page at the bottom */
.portrait-frame.fade {
  position: relative;
  border: 0;
  background: none;
  border-radius: 0;
  -webkit-mask-image: linear-gradient(to bottom, #000 75%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 75%, transparent 100%);
}
.portrait-frame.fade .mono { filter: grayscale(1) contrast(1.05); }
.portrait-frame.fade .color {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -webkit-mask-image: linear-gradient(to bottom, #000 45%, transparent 88%);
  mask-image: linear-gradient(to bottom, #000 45%, transparent 88%);
}

/* Landscape hero image (project pages) */
.hero.landscape .hero-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
.hero.landscape figure { max-width: none; }
@media (max-width: 860px) {
  .hero.landscape .hero-grid { grid-template-columns: minmax(0, 1fr); }
  .hero.landscape figure { max-width: 100%; }
}

/* Discoverability: nav link */
.nav a.nav-live { color: var(--text); display: inline-flex; align-items: center; gap: 7px; }
/* The dot is still unless the agent is actually working: it pulses only during a run and goes gray when the lab is offline. */
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--primary); box-shadow: 0 0 0 0 rgba(147, 244, 62, 0.6); flex: none; }
:root[data-lab-offline] .live-dot { background: var(--muted); }
:root[data-lab-running] .live-dot { animation: live-pulse 2s infinite; }
@keyframes live-pulse { 70% { box-shadow: 0 0 0 7px rgba(147, 244, 62, 0); } 100% { box-shadow: 0 0 0 0 rgba(147, 244, 62, 0); } }
@media (prefers-reduced-motion: reduce) { .live-dot { animation: none; } }

/* Full-width image inside a closing panel (blades.html) */
.panel .panel-img { width: 100%; height: auto; border-radius: 10px; margin-top: 8px; display: block; }

/* ---------- Home: built-thing details ----------
   The site borrows how built things look: a headline with its wireframe underneath, a physical key, a cue list,
   failure reports. Only the Idea Engineer is live. Project tiles play a clip on hover, but the still, title, and caption
   are always showing, so nothing is hidden behind the gesture. The interactive versions that hid content (cursor reveal
   that hid the solid headline, hover cue sheet, slide-out plates, breakers that blurred the fix) were cut. */

/* Headline: solid by default. With a mouse, the cursor X-rays a circle of it to show the wireframe underneath.
   The outline comes from an SVG filter (alpha minus eroded alpha), so it traces only the outer contour of the letters.
   -webkit-text-stroke was rejected: it strokes every overlapping contour of the variable font. */
@property --xr { syntax: "<length>"; inherits: false; initial-value: 0px; }
.svg-defs { position: absolute; }
.svg-defs feFlood { flood-color: var(--outline); }
.wire { position: relative; }
.wire .outline { margin: 0; max-width: none; color: var(--text); filter: url(#outline); font: 800 clamp(2.6rem, 7.4vw, 6rem)/0.95 var(--heading); letter-spacing: -0.03em; text-transform: uppercase; }
.wire .outline .light { font-weight: 300; }
.wire .solid {
  position: absolute; inset: 0; z-index: 1;
  -webkit-mask-image: radial-gradient(circle var(--xr) at var(--x, 50%) var(--y, 50%), transparent 97%, #000 100%);
  mask-image: radial-gradient(circle var(--xr) at var(--x, 50%) var(--y, 50%), transparent 97%, #000 100%);
  transition: --xr 0.35s var(--ease);
}
.wire.hot { cursor: crosshair; }
.wire.hot .solid { --xr: 110px; }

/* Call to action: a lime key with a little travel, and a lamp that reports the lab's real state. */
.keyrow { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; }
.key {
  display: grid; gap: 3px; padding: 12px 18px 11px; border-radius: 6px; cursor: pointer;
  background: var(--primary); color: var(--on-primary); text-decoration: none;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4) inset, 0 4px 10px rgba(0, 0, 0, 0.35);
  transform: translateY(-1px); transition: transform 0.09s var(--ease), box-shadow 0.09s var(--ease), background 0.15s;
}
.key:hover { background: var(--primary-hover); }
.key:active, .key.down { transform: translateY(0); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25) inset, 0 1px 3px rgba(0, 0, 0, 0.4); }
.key:focus-visible { outline: 2px solid var(--text); outline-offset: 4px; }
.key .t { font: 700 16px/1.1 var(--heading); }
.key .s { font: 500 11px/1.2 var(--mono); opacity: 0.72; letter-spacing: 0.04em; }
.keyrow .lamp { display: inline-flex; align-items: center; gap: 10px; margin: 0; font-size: 14px; color: var(--text); }
.keyrow .lamp i { width: 9px; height: 9px; border-radius: 50%; background: var(--primary); box-shadow: 0 0 0 3px rgba(147, 244, 62, 0.15); flex: none; }
.keyrow .lamp.offline { color: var(--muted); }
.keyrow .lamp.offline i { background: var(--muted); box-shadow: 0 0 0 3px rgba(163, 165, 162, 0.15); }

/* How I work: a cue list over one still backdrop. */
.cues { position: relative; overflow: hidden; border-top: 1px solid var(--divider); }
.cues .bg { position: absolute; inset: 0; }
.cues .bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(0.36) saturate(0.9); }
.cues .bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, var(--canvas) 30%, rgba(20, 21, 19, 0.25) 75%, var(--canvas)); }
.cue-body { position: relative; display: grid; gap: 22px; padding-block: clamp(48px, 7vw, 88px); }
.cue-body h2 { font-size: clamp(2rem, 5vw, 3.4rem); line-height: 1.05; max-width: 16ch; }
.cue-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--border); }
.cue-list li { display: grid; grid-template-columns: 64px minmax(0, 15rem) minmax(0, 1fr); gap: 4px 20px; align-items: baseline; padding: 16px 12px; border-bottom: 1px solid var(--divider); color: var(--muted); }
.cue-list .q { font: 500 13px/1 var(--mono); }
.cue-list h3 { font-size: 18px; color: var(--text); }
.cue-list p { font-size: 15px; }
@media (max-width: 680px) { .cue-list li { grid-template-columns: 48px minmax(0, 1fr); } .cue-list p { grid-column: 2; } }

/* By the numbers: one sentence, each figure in its facet color; the digits roll up once when it first comes into view. */
.tally-band { padding-block: clamp(40px, 6vw, 72px); border-top: 1px solid var(--divider); }
.tally { font: 300 clamp(1.4rem, 2.7vw, 2.15rem)/1.35 var(--heading); letter-spacing: -0.015em; max-width: 52ch; }
.tally .fig-n { font-weight: 700; white-space: nowrap; color: var(--fx); font-variant-numeric: tabular-nums; }
.roll { display: inline-block; height: 1.15em; line-height: 1.15em; overflow: hidden; vertical-align: bottom; }
.roll > span { display: block; transition: transform 1.6s var(--ease); transition-delay: var(--d, 0s); }
.roll > span > span { display: block; height: 1.15em; }


/* Software projects: the stack reads as plain text on labelled rows, no tinted pills. */
.layer-card { border-radius: 10px; }
.layer-card .name { font: 500 12px/1.4 var(--mono); color: var(--muted); }
.layer-card .meta { font: 700 16px/1.35 var(--heading); color: var(--text); letter-spacing: -0.005em; }
.layers { display: grid; grid-template-columns: 78px minmax(0, 1fr); gap: 8px 12px; margin: 6px 0 0; padding-top: 14px; border-top: 1px solid var(--divider); }
.layers dt { font: 500 11px/24px var(--mono); color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }
.layers dd { margin: 0; font: 400 14px/24px var(--body); color: var(--text); }
.tag { white-space: nowrap; }
.tag + .tag::before { content: "·"; color: var(--muted); margin: 0 8px; }
.layers .via { font: 400 12px/1 var(--mono); color: var(--muted); margin-left: 8px; }

/* Lab notes: failure reports. The fix and the lesson are always visible; the stamps show how it started and how it ended. */
.reports { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.report { position: relative; background: var(--surface); border: 1px solid var(--divider); border-radius: 3px; padding: 20px; display: grid; gap: 14px; align-content: start; }
.report .hd { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px 12px; font: 400 12px/1.4 var(--mono); color: var(--muted); padding-bottom: 12px; border-bottom: 1px dashed var(--border); }
.report h3 { font-size: 20px; line-height: 1.2; }
.report dl { margin: 0; display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 10px 14px; font-size: 15px; }
.report dt { font: 500 11px/1.9 var(--mono); color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }
.report dd { margin: 0; color: var(--muted); }
.report dd.now { color: var(--text); }
.stamps { display: inline-flex; align-items: center; gap: 10px; }
.stamp { font: 500 12px/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; padding: 7px 9px; border: 1.5px solid currentColor; border-radius: 2px; color: var(--mark-check); transform: rotate(-6deg); }
.stamp.was { color: var(--muted); border-color: var(--mark-make); text-decoration: line-through 1.5px var(--mark-make); transform: rotate(3deg); }

/* Writing: published essays link out; drafts are listed but not linked. */
.writing .rows h3 a { color: var(--text); text-decoration: underline; text-decoration-color: var(--border); text-underline-offset: 4px; }
.writing .rows h3 a:hover { text-decoration-color: var(--text); }
.writing .rows a.chip { text-decoration: none; }
.writing .rows a.chip:hover { color: var(--text); }
.writing .rows h3 a:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; border-radius: 2px; }

@media (max-width: 760px) { .reports { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) {
  .wire .solid, .roll > span { transition: none; }
}