/* Hallmark · macrostructure: Workbench · terminal · phosphor-green */
@import url("tokens.css");

*{box-sizing:border-box;margin:0;padding:0}
html,body{overflow-x:clip}
html{scroll-behavior:smooth}
body{
  background:var(--color-paper);
  color:var(--color-ink);
  font-family:var(--font-mono);
  font-size:var(--text-base);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  font-variant-numeric:tabular-nums;
}
/* faint phosphor scanline field — decorative, disabled under reduced motion */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:1;
  background:repeating-linear-gradient(oklch(100% 0 0 / .015) 0 1px, transparent 1px 3px);
  mix-blend-mode:screen;
}
a{color:var(--color-accent-2);text-decoration:none}
a:hover{color:var(--color-accent)}
a:focus-visible,button:focus-visible{outline:2px solid var(--color-focus);outline-offset:2px}
::selection{background:var(--color-accent);color:var(--color-paper)}

.shell{width:min(1120px,94vw);margin-inline:auto;padding-block:var(--sp-6) var(--sp-16);position:relative;z-index:2}

/* ===== N8 · terminal command bar ===== */
.cmdbar{
  position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:var(--sp-3);
  padding:var(--sp-3) var(--sp-4);margin-bottom:var(--sp-8);
  border:var(--rule-w) solid var(--color-rule);background:oklch(13% 0.018 150 / .9);
  backdrop-filter:blur(6px);
}
.cmdbar .prompt{color:var(--color-accent);white-space:nowrap}
.cmdbar .typed{color:var(--color-ink)}
.cmdbar .caret{display:inline-block;width:.6ch;height:1.1em;background:var(--color-accent);vertical-align:-0.15em;animation:blink 1.05s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.cmdbar nav{margin-left:auto;display:flex;gap:var(--sp-4);flex-wrap:wrap}
.cmdbar nav a{color:var(--color-muted);font-size:var(--text-sm)}
.cmdbar nav a:hover{color:var(--color-accent)}
.cmdbar .exit{color:var(--color-neutral)}

/* ===== hero / whoami ===== */
.hero{border:var(--rule-w) solid var(--color-rule);padding:var(--sp-8);margin-bottom:var(--sp-6);background:linear-gradient(180deg,var(--color-paper-2),var(--color-paper))}
.hero .who{color:var(--color-neutral);font-size:var(--text-sm);margin-bottom:var(--sp-3)}
.hero .who b{color:var(--color-accent)}
.hero h1{font-size:var(--text-display);font-weight:700;line-height:1.05;letter-spacing:-0.02em;overflow-wrap:anywhere;min-width:0}
.hero h1 .g{color:var(--color-accent)}
.hero p{color:var(--color-muted);max-width:64ch;margin-top:var(--sp-4)}
.hero .actions{display:flex;flex-wrap:wrap;gap:var(--sp-3);margin-top:var(--sp-6)}
.btn{
  display:inline-flex;align-items:center;gap:.6ch;padding:var(--sp-2) var(--sp-4);
  border:var(--rule-w) solid var(--color-accent);color:var(--color-accent);background:transparent;
  font-family:inherit;font-size:var(--text-sm);cursor:pointer;border-radius:var(--radius);
  transition:transform var(--dur-micro) var(--ease-out),background var(--dur-micro) var(--ease-out),color var(--dur-micro) var(--ease-out);
}
.btn:hover{transform:translateY(-1px);background:var(--color-accent);color:var(--color-paper)}
.btn:active{transform:translateY(0)}
.btn.ghost{border-color:var(--color-rule);color:var(--color-muted)}
.btn.ghost:hover{border-color:var(--color-accent-2);color:var(--color-accent);background:transparent}

/* ===== workbench bento ===== */
.bento{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--sp-4)}
.panel{border:var(--rule-w) solid var(--color-rule);background:var(--color-paper-2);display:flex;flex-direction:column;min-width:0}
.span-4{grid-column:span 4}.span-5{grid-column:span 5}.span-6{grid-column:span 6}
.span-7{grid-column:span 7}.span-8{grid-column:span 8}.span-12{grid-column:span 12}
@media(max-width:820px){.bento{grid-template-columns:1fr}.panel[class*="span-"]{grid-column:1/-1}}
.panel-head{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);padding:var(--sp-3) var(--sp-4);border-bottom:var(--rule-w) solid var(--color-rule);color:var(--color-neutral)}
.panel-head h2{font-size:var(--text-sm);font-weight:500;letter-spacing:.06em;text-transform:lowercase;color:var(--color-accent-2)}
.panel-head h2::before{content:"~/ "}
.panel-head .meta{font-size:var(--text-xs);color:var(--color-neutral)}
.panel-body{padding:var(--sp-4);color:var(--color-muted)}
.panel-body p{max-width:66ch}

/* stack chips */
.chips{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-top:var(--sp-3)}
.chip{border:var(--rule-w) solid var(--color-rule);padding:.2rem .6rem;font-size:var(--text-xs);color:var(--color-muted);border-radius:var(--radius)}
.chip:hover{border-color:var(--color-accent-2);color:var(--color-accent)}

/* process table (projects) */
.tbl{width:100%;border-collapse:collapse;font-size:var(--text-sm)}
.tbl th,.tbl td{text-align:left;padding:var(--sp-2) var(--sp-3);border-bottom:var(--rule-w) solid var(--color-rule);vertical-align:top}
.tbl th{color:var(--color-neutral);font-weight:500;font-size:var(--text-xs);letter-spacing:.06em;text-transform:uppercase}
.tbl td.pid{color:var(--color-neutral)}
.tbl tr:last-child td{border-bottom:none}
.tbl .name{color:var(--color-ink)}
.tbl .name a{color:var(--color-ink)}
.tbl .name a:hover{color:var(--color-accent)}
.tbl .desc{color:var(--color-neutral);font-size:var(--text-xs);display:block;margin-top:2px;max-width:52ch}
.state{display:inline-flex;align-items:center;gap:.5ch;font-size:var(--text-xs)}
.state::before{content:"";width:7px;height:7px;border-radius:50%}
.state.live{color:var(--color-accent)}
.state.live::before{background:var(--color-accent);box-shadow:0 0 8px var(--color-accent)}
.state.repo{color:var(--color-amber)}
.state.repo::before{background:var(--color-amber)}
.tbl .open a{color:var(--color-accent-2);font-size:var(--text-xs)}

/* mission log */
.log{list-style:none;display:flex;flex-direction:column;gap:var(--sp-3)}
.log li{display:grid;grid-template-columns:5.5rem 1fr;gap:var(--sp-3);align-items:baseline}
.log .t{color:var(--color-neutral);font-size:var(--text-xs)}
.log .x b{color:var(--color-ink);font-weight:500}
.log .x span{display:block;color:var(--color-neutral);font-size:var(--text-xs);margin-top:2px;max-width:56ch}

/* reveal */
.reveal{opacity:0;transform:translateY(10px);transition:opacity var(--dur-long) var(--ease-out),transform var(--dur-long) var(--ease-out)}
.reveal.in{opacity:1;transform:none}

/* contact CTA panel */
.hire{border:var(--rule-w) solid var(--color-accent);background:oklch(16% 0.03 150)}
.hire .panel-body{color:var(--color-ink)}
.hire p{color:var(--color-muted)}

/* ===== Ft2 · inline-rule single-line footer ===== */
.foot{margin-top:var(--sp-16);border-top:var(--rule-w) solid var(--color-rule);padding-top:var(--sp-4);
  display:flex;flex-wrap:wrap;gap:var(--sp-3) var(--sp-6);align-items:center;color:var(--color-neutral);font-size:var(--text-sm)}
.foot .brand{color:var(--color-accent)}
.foot .sp{flex:1}
.foot a{color:var(--color-muted)}
.foot a:hover{color:var(--color-accent)}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  body::before{display:none}
  .caret{animation:none}
  .reveal{opacity:1;transform:none;transition:none}
  *{transition-duration:1ms!important;animation-duration:1ms!important}
}