/* ─────────────────────────────────────────────────────────────
   Yiyue Zhang — shared styles
   Palette: deep slate ink, warm parchment, hex-editor amber
   Type:    IBM Plex Mono (structure) + IBM Plex Sans (prose)

   Address convention throughout: this page is laid out as a hex
   dump / readelf section table. Addresses ASCEND downward —
   low address at the top, high address at the bottom.
   ───────────────────────────────────────────────────────────── */

:root{
  --ink:        #0F141A;
  --ink-raised: #161D26;
  --ink-hi:     #1E2732;
  --rule:       #26303C;
  --parchment:  #E6E2D8;
  --body-text:  #CFCBC2;
  --muted:      #8A97A6;
  --dim:        #5E6B7A;
  --amber:      #E9A63C;
  --amber-dim:  #6B4E1E;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --sans: "IBM Plex Sans", system-ui, -apple-system, sans-serif;
  --gutter: 8.5rem;
  --measure: 40rem;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--ink);
  color:var(--parchment);
  font-family:var(--sans);
  font-size:1.0125rem;
  line-height:1.72;
  -webkit-font-smoothing:antialiased;
}

.shell{
  position:relative;
  z-index:2;
  width:min(60rem, 100% - 4rem);
  margin-inline:auto;
  padding-block:2rem 6rem;
}

/* ── background: a sparse memory view ────────────────────────
   A field of hex bytes that never moves. Every half-second or
   so a couple of cells are rewritten and briefly glow amber,
   then fade back — the way a live process looks in a hex
   editor. No drift, no rain, no parallax.                     */

.bgfield{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  z-index:0;
  pointer-events:none;
}

/* keeps the reading column calm; the texture only shows at the
   edges where there is no text */
.bgveil{
  position:fixed;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:radial-gradient(ellipse 58% 46% at 50% 40%,
    rgba(15,20,26,.97) 0%,
    rgba(15,20,26,.88) 42%,
    rgba(15,20,26,.42) 74%,
    rgba(15,20,26,0) 100%);
}

/* ── address rail ────────────────────────────────────────────
   The vertical divider between the address column and the data
   column, exactly as a hex editor draws it. Labelled so the
   direction of travel is unambiguous.                          */

.rail{
  position:absolute;
  top:9.5rem; bottom:7rem;
  left:calc(var(--gutter) - 1.9rem);
  width:1px;
  background:linear-gradient(to bottom,
    transparent, var(--rule) 3rem, var(--rule) calc(100% - 3rem), transparent);
  pointer-events:none;
}
.rail-label{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  font-family:var(--mono);
  font-size:.5625rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--dim);
  white-space:nowrap;
  background:var(--ink);
  padding:.25rem 0;
}
.rail-label.top{ top:-1.6rem; }
.rail-label.bottom{ bottom:-1.6rem; }

/* the cursor block tracks scroll position, like the caret in a
   hex editor moving through the file */
.rail-cursor{
  position:absolute;
  left:-2px;
  width:5px; height:2.25rem;
  background:var(--amber);
  opacity:.75;
  border-radius:1px;
  transition:top .12s linear;
  will-change:top;
}

/* ── top bar ─────────────────────────────────────────────── */

.topbar{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  justify-content:space-between;
  gap:.9rem 1.5rem;
  padding-bottom:1.1rem;
  margin-bottom:3.25rem;
  border-bottom:1px solid var(--rule);
}

.mark{
  font-family:var(--mono);
  font-size:.8125rem;
  font-weight:500;
  color:var(--parchment);
  border-bottom:0;
}
.mark span{ color:var(--amber); }
.mark:hover{ color:#fff; }

.topbar nav{ display:flex; flex-wrap:wrap; gap:.35rem 1.35rem; }
.topbar nav a{
  font-family:var(--mono);
  font-size:.75rem;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--muted);
  border-bottom:1px solid transparent;
  padding-bottom:2px;
}
.topbar nav a:hover{ color:var(--parchment); border-bottom-color:var(--rule); }
.topbar nav a[aria-current="page"]{ color:var(--amber); border-bottom-color:var(--amber); }

/* ── section scaffolding ─────────────────────────────────── */

.block{
  display:grid;
  grid-template-columns:var(--gutter) minmax(0,1fr);
  padding-block:3.25rem;
  border-top:1px solid var(--rule);
  scroll-margin-top:2rem;
}
.block:first-of-type{ border-top:0; padding-top:0; }

.offset{
  font-family:var(--mono);
  font-size:.6875rem;
  letter-spacing:.04em;
  color:var(--muted);
  opacity:.62;
  padding-top:.42rem;
  user-select:none;
  line-height:1.5;
}
.offset .flags{ display:block; font-size:.5625rem; color:var(--dim); letter-spacing:.1em; margin-top:.2rem; }

.body-col{ max-width:var(--measure); }

.eyebrow{
  font-family:var(--mono);
  font-size:.6875rem;
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:.2em;
  color:var(--amber);
  margin:0 0 .35rem;
}
.eyebrow-note{
  font-family:var(--mono);
  font-size:.625rem;
  letter-spacing:.08em;
  color:var(--dim);
  margin:0 0 1.35rem;
  text-transform:none;
}

h2{
  font-family:var(--mono);
  font-size:1.0625rem;
  font-weight:600;
  letter-spacing:-.01em;
  color:var(--parchment);
  margin:0 0 1.1rem;
}

p{ margin:0 0 1.15rem; color:var(--body-text); }
p:last-child{ margin-bottom:0; }
strong{ color:var(--parchment); font-weight:500; }

a{
  color:var(--parchment);
  text-decoration:none;
  border-bottom:1px solid var(--rule);
  transition:border-color .18s, color .18s;
}
a:hover{ border-bottom-color:var(--amber); color:#fff; }
a:focus-visible{ outline:2px solid var(--amber); outline-offset:3px; border-radius:2px; }

/* ── scroll reveal ───────────────────────────────────────── */

.reveal{ opacity:0; transform:translateY(14px); transition:opacity .55s ease, transform .55s cubic-bezier(.2,.7,.3,1); }
.reveal.in{ opacity:1; transform:none; }

/* ── hero hex dump ───────────────────────────────────────── */

.hero{ padding-block:0 3.5rem; }

.dump{
  font-family:var(--mono);
  font-size:.75rem;
  line-height:1.95;
  color:var(--muted);
  background:var(--ink-raised);
  border:1px solid var(--rule);
  border-radius:3px;
  padding:.9rem 1.05rem;
  margin:0 0 2rem;
  overflow-x:auto;
  white-space:pre;
  letter-spacing:.02em;
}
.dump .addr{ color:var(--dim); }
.dump .b{ color:var(--amber); cursor:default; border-radius:2px; }
.dump .b.nul{ color:#3E4956; }
.dump .a{ color:var(--parchment); cursor:default; border-radius:2px; }
.dump .a.nul{ color:#3E4956; }
.dump .bar{ color:var(--dim); }
/* hovering a byte lights its ASCII twin, and vice versa —
   the linkage a real hex editor gives you */
.dump .lit{ background:var(--amber); color:var(--ink); }

.dump-cap{
  font-family:var(--mono);
  font-size:.625rem;
  letter-spacing:.09em;
  color:var(--dim);
  margin:-1.5rem 0 2rem;
}

h1{
  font-family:var(--mono);
  font-size:clamp(2.3rem, 7vw, 4.15rem);
  font-weight:600;
  letter-spacing:-.045em;
  line-height:1.02;
  margin:0 0 1.35rem;
  color:var(--parchment);
}
.caret{
  display:inline-block;
  width:.5em; height:.82em;
  background:var(--amber);
  margin-left:.12em;
  vertical-align:-.02em;
  animation:blink 1.15s steps(1,end) infinite;
}
@keyframes blink{ 0%,50%{opacity:1} 50.01%,100%{opacity:0} }

.page-title{ font-size:clamp(1.75rem, 4vw, 2.4rem); letter-spacing:-.035em; margin-bottom:1rem; }

.thesis{ font-size:1.1875rem; line-height:1.62; color:var(--parchment); max-width:32rem; margin:0 0 .9rem; }
.standfirst{ color:var(--muted); max-width:33rem; margin:0; }

/* ── readelf-style section table ─────────────────────────── */

.sectab-wrap{ overflow-x:auto; border:1px solid var(--rule); border-radius:3px; background:var(--ink-raised); }
.sectab{
  font-family:var(--mono);
  font-size:.6875rem;
  line-height:1.9;
  border-collapse:collapse;
  width:100%;
  min-width:44rem;
  white-space:nowrap;
}
.sectab caption{
  font-family:var(--mono);
  font-size:.625rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--dim);
  text-align:left;
  padding:.7rem 1rem .35rem;
}
.sectab th{
  font-weight:400;
  color:var(--dim);
  text-align:left;
  padding:.15rem .7rem;
  border-bottom:1px solid var(--rule);
}
.sectab th:first-child, .sectab td:first-child{ padding-left:1rem; }
.sectab td{ padding:.1rem .7rem; color:var(--muted); }
.sectab tbody tr{ transition:background .15s; }
.sectab tbody tr:hover{ background:var(--ink-hi); }
.sectab tbody tr:last-child td{ padding-bottom:.7rem; }
.sectab .nm a{ color:var(--amber); border-bottom:0; }
.sectab .nm a:hover{ color:#fff; text-decoration:underline; }
.sectab .zero{ color:#3E4956; }

/* ── symbol / timeline lists ─────────────────────────────── */

.symbols{ list-style:none; margin:0; padding:0; }
.symbols li{
  display:grid;
  grid-template-columns:6.5rem minmax(0,1fr);
  gap:0 1.5rem;
  padding:1.15rem 0;
  border-top:1px dashed var(--rule);
}
.symbols li:first-child{ border-top:0; padding-top:0; }
.sym-tag{ font-family:var(--mono); font-size:.75rem; color:var(--amber); padding-top:.3rem; letter-spacing:.03em; }
.sym-name{ font-weight:500; color:var(--parchment); margin:0 0 .3rem; }
.sym-desc{ font-size:.9375rem; color:var(--muted); margin:0; line-height:1.6; }

.timeline li{ grid-template-columns:9.5rem minmax(0,1fr); }
.timeline .sym-tag{ font-size:.6875rem; letter-spacing:.04em; white-space:nowrap; }
.timeline .sym-place{ font-family:var(--mono); font-size:.8125rem; color:var(--muted); margin:.3rem 0 0; }

/* ── pipeline (lab's binary analysis stages) ─────────────── */

.pipeline{ list-style:none; margin:0; padding:0 0 0 1.35rem; position:relative; counter-reset:stage; }
.pipeline::before{
  content:"";
  position:absolute;
  left:.28rem; top:.75rem; bottom:.75rem;
  width:1px;
  background:var(--rule);
}
.pipeline li{
  position:relative;
  padding:.62rem 0;
  counter-increment:stage;
}
.pipeline li::before{
  content:"";
  position:absolute;
  left:-1.35rem; top:1.28rem;
  width:.6rem; height:.6rem;
  border:1px solid var(--rule);
  background:var(--ink);
  border-radius:50%;
  transform:translateX(-.02rem);
}
.pipeline .stage{
  font-family:var(--mono);
  font-size:.8125rem;
  color:var(--muted);
  transition:color .2s;
}
.pipeline .stage::before{
  content:"[" counter(stage) "] ";
  color:var(--dim);
}
.pipeline .stage-note{ font-size:.875rem; color:var(--dim); margin:.1rem 0 0; line-height:1.55; }

/* the stages this person actually works on */
.pipeline li.mine::before{ background:var(--amber); border-color:var(--amber); box-shadow:0 0 0 3px rgba(233,166,60,.14); }
.pipeline li.mine .stage{ color:var(--amber); }
.pipeline li.mine .stage-note{ color:var(--muted); }

/* ── entries ─────────────────────────────────────────────── */

.entry{ padding:1.6rem 0; border-top:1px dashed var(--rule); }
.entry:first-of-type{ border-top:0; padding-top:0; }
.entry h3{ font-family:var(--sans); font-size:1.0125rem; font-weight:500; line-height:1.45; margin:0 0 .45rem; color:var(--parchment); }
.entry h3 a{ border-bottom-color:var(--dim); }
.entry-meta{ font-family:var(--mono); font-size:.6875rem; letter-spacing:.11em; text-transform:uppercase; color:var(--amber); margin:0 0 .55rem; }
.entry p{ font-size:.9375rem; color:var(--muted); margin:0 0 .55rem; }
.entry p:last-child{ margin-bottom:0; }

.tag{
  display:inline-block;
  font-family:var(--mono);
  font-size:.625rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--dim);
  border:1px solid var(--rule);
  border-radius:2px;
  padding:.1rem .4rem;
  margin-left:.5rem;
  vertical-align:1px;
}

.empty{ border:1px dashed var(--rule); border-radius:3px; padding:1.5rem 1.6rem; background:var(--ink-raised); }
.empty p{ margin-bottom:.75rem; }
.empty p:last-child{ margin-bottom:0; }

/* ── key / value ─────────────────────────────────────────── */

.kv{ display:grid; grid-template-columns:6.5rem minmax(0,1fr); gap:.55rem 1.5rem; margin:0; }
.kv dt{ font-family:var(--mono); font-size:.75rem; color:var(--muted); letter-spacing:.05em; padding-top:.1rem; }
.kv dd{ margin:0; }

footer{
  margin-top:3.5rem;
  padding-top:1.6rem;
  border-top:1px solid var(--rule);
  font-family:var(--mono);
  font-size:.6875rem;
  letter-spacing:.06em;
  color:var(--dim);
}

/* ── mobile ──────────────────────────────────────────────── */

@media (max-width:46rem){
  :root{ --gutter:0; }
  .shell{ width:min(100% - 2.5rem, 34rem); padding-block:1.5rem 4rem; }
  .rail{ display:none; }
  .topbar{ margin-bottom:2.5rem; }
  .block{ grid-template-columns:1fr; padding-block:2.5rem; }
  .offset{ padding-top:0; margin-bottom:.9rem; }
  .offset .flags{ display:inline; margin-left:.6rem; }
  .symbols li{ grid-template-columns:1fr; gap:.35rem; }
  .timeline li{ grid-template-columns:1fr; }
  .sym-tag{ padding-top:0; }
  .kv{ grid-template-columns:1fr; gap:.15rem; }
  .kv dd{ margin-bottom:.7rem; }
  .dump{ font-size:.625rem; }
}

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