/* Direction 2: CGA colour, 5153-class.
   True measured palette (VileR/int10h, gun-drive voltages).
   The palette carries STRUCTURE: each service owns an index, and that
   colour follows it from the routing line into its label and its tags. */
:root{
  --unlit:#0A0C0A;      /* powered CRT black, never #000 */
  --bright:#FFFFFF;     /* 15 white   - emphasis */
  --chrome:#4EF3F3;     /* 11 cyan    - default chrome */
  --fg:#C4C4C4;         /*  7 grey    - body prose */
  --dim-fg:#4EDC4E;     /* 10 green   - secondary prose */
  --dim:#4E4E4E;        /*  8 dk grey - decorative only: rules, borders */
  --dim-text:#C4C4C4;   /*  7 grey - smallest text. CGA 8 is far below AA
                           against unlit black once scanlines attenuate it. */

  /* service identities */
  --c-advisory:#4EF3F3; /* 11 cyan */
  --c-coaching:#4EDC4E; /* 10 green */
  --c-speaking:#F3F34E; /* 14 yellow */
  --c-record:#F34EF3;   /* 13 magenta */
  --c-contact:#FFFFFF;  /* 15 white */

  --glow:rgba(78,243,243,.45);
  --glow-far:rgba(78,243,243,.18);
  --scan-gap:2.5px;     /* ~200 lines, chunkier than mono */
  --scan-strength:.11;   /* was .20: scanlines at 2.5px were eating the
                            counters out of 16px glyphs */
}

/* route + section pairing. same index on both ends. */
.r-advisory,#advisory{--accent:var(--c-advisory)}
.r-coaching,#coaching{--accent:var(--c-coaching)}
.r-speaking,#speaking{--accent:var(--c-speaking)}
#record{--accent:var(--c-record)}
#contact{--accent:var(--c-contact)}

/* tags read at full accent, so drop them a step to stay secondary */
.tags{opacity:.78}

/* Shadow mask: CGA only. A single-gun mono monitor has none. */
.mask{
  background:repeating-linear-gradient(
    to right,
    rgba(255,0,0,.055) 0 1px,
    rgba(0,255,0,.055) 1px 2px,
    rgba(0,0,255,.055) 2px 3px
  );
}

/* tay.bio comp base. Palette comes from mono.css or cga.css. */

@font-face{
  font-family:"PC";
  src:url("/assets/Web437_IBM_VGA_8x16.woff") format("woff");
  font-display:block;   /* swap painted fallback metrics into boxes laid out
                           for the real face: clipped labels, wrapped rows */
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--unlit);
  color:var(--fg);
  font-family:"PC",ui-monospace,Menlo,Consolas,monospace;
  font-size:16px;   /* integer steps only, stepped below. A bitmap face is drawn
                       on an 8x16 grid, so a fractional size puts every glyph
                       stem between device pixels. */
  line-height:1.65;
  /* bitmap faces only look right unsmoothed, at integer sizes */
  -webkit-font-smoothing:none;
  font-smooth:never;
  text-rendering:geometricPrecision;
}

/* ---- 66-column measure. 80 was too long to track at this size. ---- */
.wrap{
  max-width:calc(66ch + 2rem);   /* border-box: side padding must be added back
                                    or the "66-column" grid renders at 62.8 */
  margin:0 auto;
  padding:2rem 1rem 3rem;
  position:relative;
  z-index:1;
}

/* ================= CHROME: heavy treatment ================= */
/* Glow lives here and nowhere near body prose. */
.chrome{
  color:var(--chrome);
  text-shadow:0 0 4px var(--glow), 0 0 11px var(--glow-far);
}


.statusbar{
  background:var(--chrome);
  color:var(--unlit);
  font-size:16px;
  padding:.15rem .75rem;
  display:flex;
  justify-content:space-between;
  gap:1rem;
  flex-wrap:wrap;
  text-shadow:none;
}

.kicker{
  margin:1.75rem 0 .25rem;
  font-size:16px;
  color:var(--chrome);
  text-shadow:0 0 4px var(--glow);
}

h1{
  margin:0 0 1.25rem;
  font-size:40px;          /* 2x body. A bitmap face wants exact multiples. */
  line-height:1.1;
  color:var(--bright);
  text-shadow:0 0 5px var(--glow), 0 0 16px var(--glow-far);
}

/* CP437 rule. aria-hidden in markup; decorative only. */
.rule{
  /* Drawn, not typed. 66 literal box characters clipped at every viewport
     narrower than the desktop measure, which is what broke mobile. */
  height:.5em;
  margin:2.25rem 0 .85rem;
  border-top:1px solid var(--dim);
  border-bottom:1px solid var(--dim);
  user-select:none;
}
.rule.minor{height:0;border-bottom:0}

h2{
  display:table;            /* shrink-to-fit that respects inline content */
  width:auto;
  margin:0 0 .9rem;
  font-size:1em;            /* Section labels sit AT body size. A text terminal
                               had one cell size; hierarchy came from inverse
                               video, not scale. 22px against 20px body read as
                               noise and the detector flagged it. */
  font-weight:400;
  background:var(--accent,var(--chrome));
  color:var(--unlit);
  padding:.2rem 1ch;
  white-space:nowrap;
}

/* ================= PROSE: clean, no glow ================= */
p{margin:0 0 1.15rem;color:var(--fg)}
b{color:var(--bright);font-weight:400}

/* ---- routing rows. flex, not grid: a wrapping dd was colliding
       with the next row and the column gap collapsed. ---- */
.routes{margin:0 0 1.75rem}
.route{
  display:flex;
  gap:0;
  margin:0 0 .55rem;
  align-items:baseline;
}
.route dt{flex:0 0 12ch;margin:0}   /* fixed, not min-width: dd must start on a whole cell */
.route dd{margin:0;color:var(--fg)}   /* was --dim-fg: collided with the coaching accent when stacked */
.route a{
  color:var(--accent,var(--bright));
  text-decoration:none;
  border-bottom:1px solid var(--dim);
}
.route a:hover,.route a:focus-visible{
  background:var(--accent,var(--chrome));
  color:var(--unlit);
  border-bottom-color:transparent;
}

/* ---- reach line, plain destination, no imperative ---- */
.reach{
  margin:0 0 2rem;
  color:var(--dim-fg);
}

.tags{
  color:var(--accent,var(--dim-text));
  font-size:16px;
  margin:.4rem 0 0;
}

a{color:var(--bright)}
a:focus-visible,summary:focus-visible{
  outline:2px solid var(--bright);
  outline-offset:2px;
}

/* ---- contact ---- */
.contact{
  border:1px solid var(--dim);
  padding:1rem 1.1rem;
  margin:.5rem 0 0;
}
.handle{display:flex;align-items:baseline;gap:1ch;flex-wrap:wrap}
.handle .lbl{color:var(--dim-text);font-size:16px}
.note{color:var(--dim-fg);margin:.75rem 0 0}

/* blinking block cursor, hardware rate ~1.9Hz */
.cur{
  display:inline-block;
  width:.5em;       /* was 1.1 cells */
  height:1em;
  margin-left:.25em;
  background:var(--bright);
  vertical-align:text-bottom;
  animation:blink .53s steps(1,end) infinite;
}
@keyframes blink{0%,50%{opacity:1}50.01%,100%{opacity:0}}

footer{
  margin-top:2.5rem;
  padding-top:.85rem;
  border-top:1px solid var(--dim);
  color:var(--dim-text);
  font-size:16px;
  display:flex;
  justify-content:space-between;
  gap:1rem;
  flex-wrap:wrap;
}
footer a{color:var(--dim-text)}
footer a:hover{color:var(--bright)}

/* ---- stat panel: breaks the wall, carries the lead claim ---- */
.stat{
  /* --dim, not --accent: an accent border means clickable on these pages.
     This is a panel, so it reads as structure rather than a control. */
  border:3px double var(--dim);
  padding:1rem calc(2ch - 3px);   /* border sits inside border-box; subtract it
                                     so content still starts on a whole cell */
  margin:0 0 1.4rem;
  display:grid;
  grid-template-columns:4ch 1fr;
  gap:.5rem 2ch;
  align-items:baseline;
}
/* the marker is a bullet, not a figure: it should not out-shout the prose */
.stat b{
  font-size:20px;   /* was 1.9em -> 30.4/34.2/38px. Integer-Size Rule. */
  line-height:1;
  color:var(--accent,var(--chrome));
  font-weight:400;
  text-shadow:0 0 6px var(--glow);
  white-space:nowrap;
}
.stat span{color:var(--fg)}

/* ---- inline emphasis. CGA text mode carried an attribute per
       character; colour belongs in the prose, not only around it. ---- */
/* Numbers read as brighter phosphor: a real mono tube blooms where it is
   driven harder. Hue shift alone measured 1.24:1 against body text and was
   perceptually nil (Gate 5, 2026-08-02); the glow is what separates them. */
.n{color:var(--bright);text-shadow:0 0 5px var(--glow),0 0 12px var(--glow-far)}
/* Two emphasis weights, deliberately unequal in cost.
   .w  bright text  - cheap, may repeat within a paragraph
   .hi inverse block - expensive, at most once per paragraph */
.w{color:var(--bright)}
.hi{
  color:var(--unlit);
  background:var(--accent,var(--dim-fg));
  padding:0;        /* .25ch put every following glyph a quarter-cell off */
}

@media (max-width:520px){
  /* Stacking gave each single '>' glyph its own 32px line: 305px of panel on a
     phone, which pushed the first CTA to 1144px. Keep two columns, shrink the
     marker. */
  .stat{grid-template-columns:3ch 1fr;gap:.5rem 1ch;padding:.85rem calc(2ch - 3px)}
  .stat b{font-size:20px;text-shadow:none}
}

/* ================= CRT LAYERS ================= */
/* fixed, pointer-events:none, never intercept input */
.scan,.mask,.vig{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:2;
}

/* scanlines sized to a virtual line count, not a fixed 2px,
   so they do not moire on hidpi. Count set per palette file. */
.scan{
  background:repeating-linear-gradient(
    to bottom,
    rgba(0,0,0,0) 0,
    rgba(0,0,0,0) var(--scan-gap),
    rgba(0,0,0,var(--scan-strength)) var(--scan-gap),
    rgba(0,0,0,var(--scan-strength)) calc(var(--scan-gap) * 2)
  );
}

/* vignette + faint curvature cue */
.vig{
  background:radial-gradient(
    ellipse 88% 76% at 50% 42%,
    rgba(0,0,0,0) 28%,
    rgba(0,0,0,.10) 62%,
    rgba(0,0,0,.42) 100%
  );
}

@media (prefers-reduced-motion:reduce){
  .cur{animation:none}
}

@media (min-width:700px){ body{font-size:18px} }
@media (min-width:1100px){ body{font-size:20px} }

@media (max-width:680px){
  .wrap{padding:1.5rem 1rem 2.5rem}
  h1{font-size:32px}
  .route{flex-direction:column;gap:0;margin-bottom:.5rem}
  /* flex-basis applies to HEIGHT once the direction is column, so the 12ch
     basis was making every label 96px tall. min-width cannot override it. */
  .route dt{flex:0 0 auto}
}

/* ---- the board question: opens Advisory, carries the diagnostic ---- */
/* Opening line. A left accent border was the detector's `side-tab` finding,
   the most recognisable AI-UI tell; size and phosphor brightness carry the
   emphasis instead, which is what a real mono terminal had anyway. */
.ask{
  font-size:1em;            /* differentiated by peak phosphor, not size */
  line-height:1.45;
  color:var(--bright);
  margin:0 0 1.15rem;
}

/* ---- per-section CTA ---- */
.cta{margin:1.3rem 0 .3rem}
.cta a{
  display:inline-block;
  color:var(--bright);
  background:transparent;
  border:2px solid var(--accent,var(--chrome));
  text-decoration:none;
  padding:.4rem 2ch;
}
.cta a:hover,.cta a:focus-visible{
  background:var(--accent,var(--chrome));
  color:var(--unlit);
}

/* ---- signal handle as a live signal.me link ---- */
.sig{color:var(--bright);text-decoration:none;border-bottom:1px solid var(--dim)}
.sig:hover,.sig:focus-visible{background:var(--chrome);color:var(--unlit);border-bottom-color:transparent}

/* ---- contact block with QR ---- */
.reachbox{display:flex;gap:1.5ch;align-items:center;justify-content:space-between;flex-wrap:wrap}
.reachtext{flex:1 1 20ch}
.qr{flex:0 0 auto;line-height:0;border:0}
.qr img{display:block;width:94px;height:94px;image-rendering:pixelated}   /* 47x2 exactly; 112 was 2.383x and broke the modules */
@media (max-width:520px){
  .reachbox{flex-direction:column;align-items:flex-start;gap:1rem}
}
/* ---- callout: a bracketed line that breaks a long prose run. Repeatable
       device, built from the cell grid rather than a CSS box. ---- */
/* Three emphasis languages, deliberately unalike:
     .quote     someone else's words  -> '>' marker, mail convention
     .callout   his own emphasis      -> no marker, peak phosphor, more air
     .callout.key  the buying argument -> full inverse video
   The CTA keeps the only border. Nothing else may use one. */
.callout{
  color:var(--bright);
  margin:1.9rem 0;
  text-shadow:0 0 5px var(--glow);
}

/* Inverse video is what a text terminal did when it needed to shout. Reserved
   for the single line that makes the case for hiring at all. */
.callout.key{
  background:var(--accent,var(--chrome));
  color:var(--unlit);
  text-shadow:none;
  padding:.6rem 1ch;
  margin:1.9rem 0;
}
/* Capacity and the reply promise, directly under the ask. Both were live
   elsewhere on the page or in llms.txt and doing no conversion work there
   (Gate 1 independent re-score, 2026-08-02). */
.undercta{
  color:var(--dim-fg);
  font-size:16px;   /* was .85em -> 13.6/15.3/17px */
  margin:.55rem 0 0;
}

/* ---- progressive disclosure. native <details>, no JS, works under CSP.
       Each section shows one line and its CTA; the rest is one click away. ---- */
details{margin:0 0 .5rem}
summary{
  cursor:pointer;
  list-style:none;
  display:inline-block;
  color:var(--accent,var(--chrome));
  padding:.15rem 0;
  margin:0 0 .3rem;
}
summary::-webkit-details-marker{display:none}
summary::before{content:"[+] ";font-weight:400}
details[open] > summary::before{content:"[-] "}
summary:hover,summary:focus-visible{color:var(--bright)}
summary:focus-visible{outline:2px solid var(--bright);outline-offset:2px}
details[open] > summary{margin-bottom:.9rem}
details > *:not(summary){animation:none}


/* ---- CRT effect is a display treatment, not a body treatment. Anything at
       or below 16px loses the glow; the scanline layer is already lighter. ---- */
.statusbar,.tags,.kicker,footer,.handle .lbl,.undercta,.rule{text-shadow:none}

/* ---- timeline. One axis, so the numbers cohere by construction. ---- */
.timeline{
  display:grid;
  grid-template-columns:max-content 1fr;
  gap:.45rem 2ch;
  margin:0 0 1.4rem;
  align-items:baseline;
}
.timeline dt{
  margin:0;
  color:var(--accent,var(--chrome));
  text-shadow:0 0 5px var(--glow);
  white-space:nowrap;
}
/* CP437 spine. Connects the years into one axis instead of a list, and puts
   real box-drawing on the page rather than only horizontal rules. */
.timeline dt::after{content:" \2502";color:var(--dim)}
.timeline dt:first-of-type::after{content:" \250C"}
.timeline dt:last-of-type::after{content:" \2514"}
.timeline dd{margin:0;color:var(--fg)}
@media (max-width:520px){
  /* Keep two columns so it still reads as an axis; just narrow the date rail. */
  .timeline{grid-template-columns:7ch 1fr;gap:.5rem 1ch}
  .timeline dd{margin:0}
  /* The 7ch rail is sized for 4-digit years. Word labels plus the CP437 spine
     run 9 cells and spill ink under the definition text, so lists with word
     labels keep a content-sized rail. */
  .timeline.terms{grid-template-columns:max-content 1fr}
}
/* Third statusbar fact is the first thing cut when the bar would wrap. A
   two-line status bar reads as a layout failure; a shorter one does not. */
@media (max-width:374px){.statusbar .wide{display:none}}

/* ---- attributed quote. Bordered on the accent, never italic: a text-mode
       display has no oblique face. ---- */
/* Quotes use the mail/usenet convention: a hanging '>' marker, no box.
   Boxing them put an accent-bordered rectangle directly above accent-bordered
   CTAs, so the button stopped reading as a button. A bordered box on this page
   now means exactly one thing: something you can click. */
.quote{
  margin:1.4rem 0;
  padding:0 0 0 2ch;
  border:0;
}
.quote p{
  margin:0 0 .5rem;
  color:var(--bright);
  text-indent:-2ch;
}
.quote p::before{content:"> ";color:var(--dim)}
.quote cite{
  font-style:normal;
  color:var(--accent,var(--chrome));
  font-size:16px;
}
.quote cite::before{content:"— "}

/* ---- /speaking ---- */
.back{color:var(--chrome);text-decoration:none;border-bottom:1px solid var(--dim)}
.back:hover,.back:focus-visible{background:var(--chrome);color:var(--unlit);border-bottom-color:transparent}
.bioblock{
  border:1px solid var(--dim);
  padding:1rem calc(2ch - 1px);
  color:var(--fg);
}
.bioblock p{margin:0}
/* the mail span is swapped for a real anchor by app.js; style both */
.mail{color:var(--bright);cursor:text}

/* ---- talk titles carry their own colour. The page is otherwise cyan chrome
       on grey prose; if the talks are the product they cannot read as more
       cyan words. Yellow is CGA 14, and it is the speaking accent already. ---- */
.talk > summary{
  color:var(--c-speaking);
  font-size:1em;
}
.talk > summary::before{content:"[+] ";color:var(--c-speaking)}
.talk[open] > summary::before{content:"[-] "}
.talk > summary:hover,.talk > summary:focus-visible{color:var(--bright)}

/* section headings need air when they follow a bordered block */
section + section > h2,
.contact + section > h2,
#bio > h2{margin-top:2.25rem}