/* Technical program manager. After MotionSites "AXON": a black control room, a particle
   cloud stirred by the cursor, thin monospace UI, chips, a scrolling column of cards
   and a bracketed text column. */
:root[data-role] {
  --paper: #000000; --panel: #0a0a0a; --ink: #dddddd; --muted: #8a8a8a; --line: #2a2a2a;
  --signal: #aa88ff; --signal-soft: #1c1c1c; --pass: #7ee2b8;
  --mono: "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  color-scheme: dark;
}
body { font-family: var(--mono); font-size: 0.95rem; line-height: 1.6; }
.section-head h2, .about .bio h2 { font-size: 1rem; font-weight: 400; text-transform: lowercase; color: var(--signal); letter-spacing: 0.02em; }
.section-head h2::before, .about .bio h2::before { content: "["; } .section-head h2::after, .about .bio h2::after { content: "]"; }
.work-item h3 { font-size: clamp(1.15rem, 2vw, 1.5rem); font-weight: 400; text-transform: uppercase; }
.work-item h3 a { color: #fff; }
.contact h2 { font-weight: 400; text-transform: uppercase; font-size: clamp(1.5rem, 3.4vw, 2.6rem); max-width: 22ch; }
.job .when b { font-weight: 400; text-transform: uppercase; color: #fff; }
.tags li { background: var(--signal-soft); color: #cfcfcf; border-radius: 0; }
.receipt { border-radius: 2px; }
.receipt td:last-child { font-weight: 400; color: #fff; }
.receipt .ok { color: var(--pass); }

/* ---------- Hero ---------- */
.ax-hero { position: relative; height: 100vh; height: 100dvh; min-height: 660px; overflow: hidden; background: #000; font-size: 13px; line-height: 1.35; letter-spacing: 0.02em; text-transform: uppercase; color: #ddd; }
.ax-bg { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }
.ax-hero a { color: inherit; text-decoration: none; }
.ax-brand, .ax-counter, .ax-tags, .ax-about { position: absolute; z-index: 1; mix-blend-mode: plus-lighter; }
.ax-brand { top: 24px; left: 24px; display: flex; gap: 14px; align-items: center; }
.ax-brand svg { width: 40px; height: 40px; }
.ax-brand b { display: block; font-size: 20px; font-weight: 400; color: #fff; }
.ax-brand small { display: block; margin-top: 2px; font-size: 11px; color: var(--muted); }
.ax-counter { top: 24px; right: 24px; margin: 0; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: #0a0a0a; display: grid; place-items: center; font-size: 14px; color: #fff; mix-blend-mode: normal; }
.ax-tags { top: 120px; left: 24px; width: 320px; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.ax-tags li { background: #1c1c1c; color: #cfcfcf; padding: 5px 9px; font-size: 11px; }
.ax-tags li.on { background: #e6e6e6; color: #000; }
.ax-list { position: absolute; z-index: 1; top: 250px; left: 24px; bottom: 0; width: 320px; overflow-y: auto; scrollbar-width: none; }
.ax-list::-webkit-scrollbar { display: none; }
.ax-card { display: block; padding: 18px 0; border-top: 1px solid var(--line); }
.ax-card:hover .ax-meta span:first-child { color: var(--signal); }
.ax-thumb { height: 160px; border-radius: 2px; background: #0a0a0a; overflow: hidden; }
.ax-thumb video, .ax-thumb img { width: 100%; height: 100%; max-width: none; object-fit: cover; }
.ax-thumb img { object-fit: contain; padding: 12px; filter: invert(1) brightness(.85); }
.ax-thumb img.ax-shot { object-fit: cover; object-position: left top; padding: 0; filter: none; }
.ax-type { display: flex; flex-direction: column; justify-content: flex-end; padding: 16px; color: var(--muted); }
.ax-type b { font-size: 34px; font-weight: 400; color: #fff; letter-spacing: -0.02em; margin-bottom: 6px; }
.ax-meta { display: flex; justify-content: space-between; gap: 16px; margin-top: 10px; font-size: 12px; }
.ax-meta span { white-space: pre-line; color: #fff; }
.ax-meta span + span { color: var(--muted); text-align: right; }

.ax-about { right: 90px; top: 50%; transform: translateY(-50%); width: 400px; }
.ax-about h1 { font-size: 22px; font-weight: 400; line-height: 1.25; color: #fff; margin-bottom: 2.2em; }
.ax-about h2 { font-size: 13px; font-weight: 400; color: var(--signal); text-transform: lowercase; margin: 0 0 1em; }
.ax-about p, .ax-about ul { margin: 0 0 2.2em; text-align: justify; }
.ax-about ul { list-style: inside; padding: 0; text-align: left; }
.ax-about a { display: block; margin: 4px 0; text-decoration: underline; text-underline-offset: 3px; transition: opacity .3s; text-transform: none; }
.ax-about a:hover { opacity: .7; }

@media (pointer: coarse) { .ax-about a { padding-block: 10px; margin: 0; } }
@media (max-width: 1100px) { .ax-about { right: 24px; width: 340px; } }
@media (max-width: 760px) {
  .ax-hero { height: auto; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; justify-content: flex-end; }
  .ax-list, .ax-tags { display: none; }
  .ax-about { position: relative; right: auto; top: auto; transform: none; width: auto; margin: 120px 24px 32px; }
  .ax-about p { text-align: left; }
}