/* Hallmark · shape: Index-First · genre: atmospheric · theme: Terminal (deal 1/3, seed waliori-hub-directory-listing-9aa1·2f378af2·2026-11-01·r0) · job: listen · draw: 870a77
 * hero: Ledge · nav: masthead · footer: mast · imagery: screenshots 12 and 8 thumbnails (capture.mjs, i.ytimg.com), baked as CRT frames · signature: the mark, four slashes typed in a row, printed from the page's own paths and resolving row by row
 * axes: dark/mono/neutral (white phosphor, the Terminal theme without its green) · posture: committed · contrast: pass · fold: pass · v2.0.0
 * finish-review 3 (the heads, the mark, the commit weeks): subagent · recapture (the full-page pass dropped the mark; measured live at 360px on a 5000px viewport) · 7 findings · 7 resolved (stars on one line on the phone, the cells packed and the quiet week a step dimmer, /github as the head over /github/<name>, the mark 40px shorter so the fourth row sits whole at 1440, the name column at 38%, the hover colour recorded in design.md)
 * finish-review 2 (the videos log and the repositories): subagent · 7 findings · 7 resolved (the phone monitor relative, the facts on one line with their words, the monitor at 4:3 on seven columns, the bar with its own label and no legend, the repos as rows of a tool's output with the name as a path, the OSD on its own strip, the full eleven-character id)
 * finish-review: subagent · 6 findings · 6 resolved · gap: none (sail recaptured on its map view; the contact band 96px under the tool row; the projects head without a count; the year on the ninth column; footer links padded to 24px; the mark 16px shorter at 1280 x 800 so the second row shows)
 * hero-review: fix · 4 findings · 4 resolved (the mark redrawn at 120 columns, row pitch 1.85, 80% of the container wide and left-aligned on the head's axis; the index rows on 3 and 9 columns) */
/* Hallmark · pre-emit critique: P4 H4 E4 S4 R5 V4 · weakest: S, a terminal theme on a terminal channel is the expected pairing; what no other page has is the mark set from its own eight path names and the listing of real paths, so the page leads with those and nothing else */
/* Hallmark · waive 49b · eight video titles in a table on a phone, real phrases of two lines at most · the titles are the videos' own names and the table restacks each row under 60rem */
/* Hallmark · waive 47b · one frame per capture, the live product inside · the captures are the two projects themselves, each a link to its address */
@import url("./tokens.css");
@import url("./base.css");

:root { --mark-h: min(34dvh, 320px); --mark-rows: 29; --row-h: 72px; }
body { font-stretch: var(--stretch-body); font-variant-numeric: tabular-nums; }
h1, h2, h3 { font-weight: var(--display-weight); font-stretch: var(--stretch-display); letter-spacing: var(--tracking-display); line-height: 1.12; }
a { color: var(--color-ink-2); text-decoration-style: dotted; }
a:hover { color: var(--color-accent); }
.skip { position: absolute; left: var(--space-md); top: var(--space-md); z-index: var(--z-toast); padding: var(--space-xs) var(--space-md); background: var(--color-accent); color: var(--color-accent-ink); transform: translateY(-200%); }
.skip:focus-visible { transform: none; }
.container { max-width: var(--container); }

/* masthead */
.mast { border-bottom: var(--rule-hair) solid var(--color-rule); }
.mast .container { display: flex; justify-content: center; align-items: center; min-height: 64px; }
.wordmark { font-weight: var(--display-weight); font-stretch: var(--stretch-display); font-size: var(--text-lg); color: var(--color-ink); text-decoration: none; }
.wordmark:hover { color: var(--color-accent); }

/* hero, a ledge: the mark above, the head at its base, the first row of the index */
.hero .container { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); padding-block: var(--space-xl) 0; }
.mark { grid-column: 1 / -1; margin: 0; display: flex; justify-content: center; container-type: inline-size; overflow: clip; }
.mark pre { margin: 0; font-family: var(--font-display); font-weight: 400; font-stretch: var(--stretch-body); font-size: min(calc(var(--mark-h) / var(--mark-rows) / 1.2), calc(100cqw / 120 / 0.65)); line-height: 1.2; white-space: pre; }
.mark b { display: block; font-weight: inherit; }
.mark i { font-style: normal; }
.mark .g0 { color: var(--glyph-0); } .mark .g1 { color: var(--glyph-1); } .mark .g2 { color: var(--glyph-2); } .mark .g3 { color: var(--glyph-3); }
.mark .g4 { color: var(--glyph-4); } .mark .g5 { color: var(--glyph-5); } .mark .g6 { color: var(--glyph-6); } .mark .g7 { color: var(--glyph-7); }
.mark i.hot { color: var(--color-accent); }

.ledge { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); align-items: end; margin-top: var(--space-xl); padding-bottom: var(--space-lg); }
.ledge h1 { grid-column: 1 / 8; font-size: var(--text-display-s); }
.ledge .lead { grid-column: 8 / -1; color: var(--color-ink-2); }

/* the index: rows, the path on the left, its line on the right */
.index { grid-column: 1 / -1; display: grid; border-top: var(--rule-hair) solid var(--color-rule); }
.row { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); column-gap: var(--gap-columns); align-items: baseline; min-height: var(--row-h); padding-block: var(--space-md); border-bottom: var(--rule-hair) solid var(--color-rule); color: var(--color-ink); text-decoration: none; transition: background-color var(--dur-micro) steps(1); }
.row:hover, .row:focus-visible { background: var(--color-accent); color: var(--color-accent-ink); }
.row:hover .line, .row:focus-visible .line { color: var(--color-accent-ink); }
.row:active { background: var(--glyph-5); }
.row:focus-visible { outline-offset: -2px; outline-color: var(--color-ink); }
.row .path { font-size: var(--text-title); font-weight: var(--display-weight); font-stretch: var(--stretch-display); }
.row .line { color: var(--color-ink-2); }
.row--primary { background: var(--color-accent); color: var(--color-accent-ink); border-bottom-color: var(--color-accent); }
.row--primary .line { color: var(--color-accent-ink); }
.row--primary:hover { background: var(--glyph-6); color: var(--color-accent-ink); }
.row--primary:active { background: var(--glyph-5); }
.row--primary:focus-visible { outline-color: var(--color-ink); }
/* one cursor line at a time: while another row is under the pointer or focused, /youtube gives up its block */
.index:has(.row:not(.row--primary):is(:hover, :focus-visible)) .row--primary:not(:hover, :focus-visible) { background: transparent; color: var(--color-ink); border-bottom-color: var(--color-rule); }
.index:has(.row:not(.row--primary):is(:hover, :focus-visible)) .row--primary:not(:hover, :focus-visible) .line { color: var(--color-ink-2); }

/* videos: the log. Rows on the left, one row per video with its id as a hash; the monitor on the right shows the thumbnail of the row under the pointer, cutting between tapes */
.videos { padding-block: var(--section-gap) 0; }
.videos h2, .repos h2, .projects h2 { margin-bottom: var(--space-md); }
.videos .lead, .repos .lead, .projects .lead { margin-bottom: var(--space-2xl); color: var(--color-ink-2); }
.log { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); align-items: start; }
.log__rows { grid-column: 1 / 6; margin: 0; padding: 0; list-style: none; border-top: var(--rule-hair) solid var(--color-rule); }
.log__rows a { display: grid; grid-template-columns: 11ch minmax(0, 1fr) 4ch; grid-template-rows: auto auto; column-gap: var(--space-md); align-items: baseline; padding-block: var(--space-sm); border-bottom: var(--rule-hair) solid var(--color-rule); color: var(--color-ink); text-decoration: none; transition: background-color var(--dur-micro) steps(1); }
.log__rows a:hover, .log__rows a:focus-visible { background: var(--color-paper-3); color: var(--color-ink); }
.log__rows a:active { background: var(--color-accent-wash); }
.log__rows a:focus-visible { outline-offset: -2px; }
.log__hash { grid-row: 1 / 3; align-self: start; font-size: var(--text-sm); color: var(--color-muted); }
.log__path { font-size: var(--text-title); font-weight: var(--display-weight); font-stretch: var(--stretch-display); }
.log__title { grid-column: 2; font-size: var(--text-sm); color: var(--color-ink-2); }
.log__year { grid-column: 3; grid-row: 1; justify-self: end; color: var(--color-muted); }
.monitor { grid-column: 6 / -1; position: sticky; top: var(--space-2xl); margin: 0; aspect-ratio: 4 / 3; border: var(--rule-hair) solid var(--color-rule); }
.monitor__osd { position: absolute; left: var(--space-md); top: var(--space-md); z-index: 3; padding: var(--space-2xs) var(--space-xs); background: var(--color-paper); color: var(--color-ink); white-space: pre; }
.monitor > img.next { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; z-index: 2; }
.monitor.is-cut > img.next { animation: cut 220ms steps(3) forwards; }
@media (prefers-reduced-motion: reduce) { .monitor.is-cut > img.next { animation: none; opacity: 1; } }

/* repositories: a year of commits as fifty-two glyph cells per row, a dot for a quiet week up to a hash for five commits or more; the name as a path with its line beneath, the stars and the language on the right */
.repos { padding-block: var(--section-gap-l) 0; }
.ls { width: 100%; border-collapse: collapse; }
.ls th { text-align: left; font-weight: 400; }
.ls thead th { padding: 0 var(--space-lg) var(--space-sm) 0; font-size: var(--text-sm); color: var(--color-muted); border-bottom: var(--rule-hair) solid var(--color-rule-2); white-space: nowrap; }
.ls tbody th, .ls td { padding: var(--space-lg) var(--space-lg) var(--space-lg) 0; border-bottom: var(--rule-hair) solid var(--color-rule); vertical-align: baseline; }
.ls tbody th { width: 33%; }
.ls tbody tr { height: 128px; }
.ls tbody th a { display: block; font-size: var(--text-title); font-weight: var(--display-weight); font-stretch: var(--stretch-display); color: var(--color-ink); }
.ls tbody th a:hover { color: var(--color-ink-2); }
.ls__desc { display: block; margin-top: var(--space-2xs); color: var(--color-ink-2); }
.ls__year { width: 47%; }
.weeks { display: block; font-weight: 500; white-space: nowrap; }
.weeks i { font-style: normal; }
.weeks .w0 { color: var(--color-rule); } .weeks .w1 { color: var(--color-muted); } .weeks .w2 { color: var(--color-ink-2); } .weeks .w3 { color: var(--color-ink); }
.ls__sum { display: block; margin-top: var(--space-2xs); font-size: var(--text-sm); color: var(--color-muted); }
.ls td.num { width: 7%; text-align: right; color: var(--color-ink); }
.ls th.num { text-align: right; }
.ls__lang { width: 14%; padding-right: 0; color: var(--color-muted); }

/* projects: three splits. Each capture is baked into a phosphor CRT frame by tools/crt.py (scanlines, bloom, curvature, torn bands); the page only adds a faint flicker and a jitter every four seconds while the frame is in view */
[data-kind="product"]:has(> img) { background: var(--color-paper); }
[data-kind="product"] > img { filter: none; mix-blend-mode: normal; }
[data-kind="product"]:has(> img)::before { content: none; }
.js .shot.is-seen > img { animation: crt 4s steps(1) infinite; }
@keyframes crt { 0% { transform: none; opacity: 1; } 1.5% { transform: translateX(3px); opacity: 0.93; } 2.5% { transform: translateX(-2px); } 3.5% { transform: none; opacity: 1; } 52% { opacity: 0.97; } 54% { opacity: 1; } 100% { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .js .shot.is-seen > img { animation: none; } }
/* the reel: on hover the frame cycles through more screens of the product; the next frame cuts in through three torn slices, then takes over */
.shot { position: relative; }
.shot > img.next { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; z-index: 2; }
.shot.is-cut > img.next { animation: cut 220ms steps(3) forwards; }
@keyframes cut { 0% { opacity: 1; clip-path: inset(0 0 62% 0); transform: translateX(-10px); } 33% { opacity: 1; clip-path: inset(38% 0 22% 0); transform: translateX(8px); } 66% { opacity: 1; clip-path: inset(78% 0 0 0); transform: translateX(-4px); } 100% { opacity: 1; clip-path: inset(0); transform: none; } }
@media (prefers-reduced-motion: reduce) { .shot.is-cut > img.next { animation: none; opacity: 1; } }
/* projects: two splits, then a tool as a row */
.projects { padding-block: var(--section-gap-l) 0; }
.split { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); align-items: center; padding-block: var(--space-2xl); border-top: var(--rule-hair) solid var(--color-rule); }
.split__text { grid-column: 1 / 6; }
.split .shot { grid-column: 6 / -1; }
.split--flip .split__text { grid-column: 8 / -1; grid-row: 1; }
.split--flip .shot { grid-column: 1 / 8; grid-row: 1; }
.split h3 { font-size: var(--text-title); }
.split p { margin-top: var(--space-md); color: var(--color-ink-2); }
.shot { display: block; aspect-ratio: 16 / 10; min-height: 440px; border: var(--rule-hair) solid var(--color-rule); }
.shot:hover { border-color: var(--color-rule-2); }

/* contact: a band of one line and an action */
.contact { margin-top: var(--space-3xl); background: var(--color-paper-2); border-top: var(--rule-hair) solid var(--color-rule); }
.contact .container { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--gap-columns); align-items: center; padding-block: var(--section-gap-s); }
.contact__line { font-size: var(--text-section); font-weight: var(--display-weight); font-stretch: var(--stretch-display); letter-spacing: var(--tracking-display); line-height: 1.12; text-wrap: balance; }
.btn { justify-self: start; display: inline-flex; align-items: center; min-height: 48px; padding: 0 var(--space-lg); border: var(--rule-hair) solid var(--color-ink-2); color: var(--color-ink); text-decoration: none; white-space: nowrap; transition: background-color var(--dur-micro) steps(1); }
.btn:hover { background: var(--color-paper-3); color: var(--color-ink); }
.btn:active { background: var(--color-accent-wash); }
.btn:focus-visible { outline-offset: 2px; }
.btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }

/* footer: a mast */
.foot { padding-block: var(--space-3xl) var(--space-2xl); border-top: var(--rule-hair) solid var(--color-rule); }
.foot__mark { font-size: var(--text-display-s); font-weight: var(--display-weight); font-stretch: var(--stretch-display); letter-spacing: var(--tracking-display); line-height: 1; }
.foot__links { display: flex; flex-wrap: wrap; gap: var(--space-md) var(--space-lg); margin: var(--space-2xl) 0 0; padding: 0; list-style: none; }
.foot__links a { display: inline-block; min-inline-size: 24px; padding: var(--space-xs) var(--space-xs); text-align: center; }
.foot__line { margin-top: var(--space-2xl); font-size: var(--text-sm); color: var(--color-muted); }

@media (max-width: 60rem) {
  :root { --mark-h: min(26dvh, 200px); --row-h: 64px; }
  .ledge h1, .ledge .lead { grid-column: 1 / -1; }
  .ledge .lead { margin-top: var(--space-md); }
  .row { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-2xs); }
  .split { grid-template-columns: minmax(0, 1fr); }
  .split .split__text, .split .shot, .split--flip .split__text, .split--flip .shot { grid-column: 1 / -1; grid-row: auto; }
  .split .shot { width: 100%; margin-top: var(--space-lg); min-height: 0; }
  .log { grid-template-columns: minmax(0, 1fr); }
  .log__rows, .monitor { grid-column: 1 / -1; }
  .monitor { grid-row: 1; position: relative; margin-bottom: var(--space-lg); }
  .ls, .ls tbody { display: block; }
  .ls thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .ls tr { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; column-gap: var(--space-md); padding-block: var(--space-md); border-bottom: var(--rule-hair) solid var(--color-rule); }
  .ls tbody th, .ls td { display: block; padding: 0; border: 0; width: auto; }
  .ls tbody th { grid-column: 1 / -1; }
  .ls__year { grid-column: 1 / -1; margin-top: var(--space-xs); }
  .weeks { white-space: normal; }
  .ls td.num { width: auto; text-align: left; white-space: nowrap; }
  .ls td.num::after { content: " stars"; color: var(--color-muted); }
  .contact .container { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-lg); }
}

@media (max-width: 40rem) {
}