/* ═══════════════════════════════════════════════════════════════════
   SAMUEL ONWUKA
   Visual world: THE TAPE

   The institutional market terminal and its printed cousin, the
   closing-price table. Samuel's audience (founders, hiring managers,
   agency leads) reads money screens and instrument panels daily, and
   his current work is a payment gateway. So the portfolio is built as
   an instrument: a live tape across the head carrying every product he
   has shipped as a symbol, a dense ruled book of holdings beneath it,
   and three positions broken out at full bleed.

   Two grounds, screen and print. Graphite is the terminal. Newsprint is
   the closing table that gets printed at the end of the session. They
   alternate; nothing else is a ground.

   Named rules:

     THE INSTRUMENT RULE
       Work is tabulated, not carded. Products are rows with a symbol, a
       period and a stack. Density is the point: a person scanning for
       fifteen seconds should be able to read the whole book at once.

     THE ONE MOVING PART RULE
       The tape drifts. That is the page's only authored motion. Every
       other change is a state responding to the pointer or the keyboard,
       never an entrance. A page that animates each section on arrival is
       a slideshow, not an instrument.

     THE FIGURE RULE
       Every number is tabular and monospaced, because it is data. Prose
       is never monospaced. Mono here is measurement, not costume.
   ═══════════════════════════════════════════════════════════════════ */

/* ── tokens ──────────────────────────────────────────────────────── */
:root {
  color-scheme: dark;

  /* two grounds */
  --graphite:    #14161A;
  --graphite-2:  #1A1E24;
  --graphite-3:  #242931;   /* rules and hairlines on the terminal    */
  --newsprint:   #E9E4D8;
  --newsprint-2: #DCD6C6;
  --newsprint-3: #C3BCA8;   /* rules on print                          */

  /* type */
  --bone:      #EDEAE3;
  --bone-dim:  #979EA8;
  --ink:       #16181C;
  --ink-dim:   #5D5B53;

  /* one accent, the terminal amber */
  --amber:      #FFB020;
  --amber-deep: #E29708;
  --amber-ink:  #2A1D02;

  /* measure */
  --page:   84rem;
  --prose:  36rem;
  --gutter: clamp(1.125rem, 3.5vw, 2.75rem);
  --band:   clamp(4rem, 8vw, 7rem);
  --tape-h: 2.25rem;
  --head-h: 3.25rem;

  --out: cubic-bezier(.16, 1, .3, 1);

  --display: 'Saira Condensed', 'Arial Narrow', sans-serif;
  --text:    'Inter Tight', system-ui, sans-serif;
  --figure:  'JetBrains Mono', ui-monospace, monospace;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  background: var(--graphite);
  scroll-padding-top: calc(var(--tape-h) + var(--head-h) + 1rem);
  -webkit-text-size-adjust: 100%;
  /* the parts we did not draw still carry the design */
  scrollbar-color: var(--graphite-3) var(--graphite);
  scrollbar-width: thin;
}
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

body {
  background: var(--graphite);
  color: var(--bone);
  font-family: var(--text);
  font-size: 1.0625rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

::selection { background: var(--amber); color: var(--amber-ink); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--graphite); }
::-webkit-scrollbar-thumb { background: var(--graphite-3); }
::-webkit-scrollbar-thumb:hover { background: var(--bone-dim); }

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul { list-style: none; }
p { text-wrap: pretty; max-width: var(--prose); }

:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.print :focus-visible { outline-color: var(--ink); }

/* every figure is tabular; prose never is */
.fig, .sym, .tape-sym, .period {
  font-family: var(--figure);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

/* ── type scale ──────────────────────────────────────────────────── */
h1, h2, h3 {
  font-family: var(--display);
  font-weight: 600;
  text-wrap: balance;
  letter-spacing: -0.01em;
}

.t-name {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(3.25rem, 13vw, 6rem);
  line-height: 0.85;
  letter-spacing: -0.035em;
  text-transform: uppercase;
}
.t-band {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.875rem, 4.5vw, 3rem);
  line-height: 0.96;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}
.t-pos {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(2.5rem, 7vw, 4.5rem);
  line-height: 0.88;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}
.t-row {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.125rem, 1.8vw, 1.375rem);
  line-height: 1.15;
  letter-spacing: -0.005em;
  transition: color .18s var(--out);
}
.t-lede { font-size: clamp(1.0625rem, 1.5vw, 1.1875rem); line-height: 1.5; }

/* column heads: the only uppercase small type, and it heads data */
.col {
  font-family: var(--figure);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bone-dim);
}
.print .col { color: var(--ink-dim); }

.dim { color: var(--bone-dim); }
.print .dim { color: var(--ink-dim); }

/* ── grounds ─────────────────────────────────────────────────────── */
.term  { background: var(--graphite); color: var(--bone); }
.print { background: var(--newsprint); color: var(--ink); }
.band  { padding-block: var(--band); }

.page { width: 100%; max-width: var(--page); margin-inline: auto; padding-inline: var(--gutter); }

/* ── the tape ────────────────────────────────────────────────────── */
/* The one moving part. Every product he has shipped, running. */
.tape {
  position: sticky;
  top: 0;
  z-index: 70;
  height: var(--tape-h);
  background: var(--graphite-2);
  border-bottom: 1px solid var(--graphite-3);
  overflow: hidden;
  display: flex;
  align-items: stretch;
}
.tape-track {
  display: flex;
  align-items: stretch;
  flex: none;
  will-change: transform;
  animation: tape 70s linear infinite;
}
@keyframes tape { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } }
.tape:hover .tape-track, .tape:focus-within .tape-track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .tape-track { animation: none; } }

.tape-item {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding-inline: 1.125rem;
  border-right: 1px solid var(--graphite-3);
  white-space: nowrap;
  font-size: 0.75rem;
  color: var(--bone-dim);
  transition: color .2s var(--out), background-color .2s var(--out);
}
.tape-sym { font-size: 0.75rem; font-weight: 600; color: var(--bone); letter-spacing: 0.06em; }
.tape-item.lit { background: var(--amber); color: var(--amber-ink); }
.tape-item.lit .tape-sym { color: var(--amber-ink); }

/* ── header ──────────────────────────────────────────────────────── */
.head {
  position: sticky;
  top: var(--tape-h);
  z-index: 65;
  height: var(--head-h);
  background: color-mix(in srgb, var(--graphite) 92%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--graphite-3);
}
.head-in { height: 100%; display: flex; align-items: center; gap: 1.5rem; }
.head-mark {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.0625rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.head-nav { margin-left: auto; display: flex; gap: 1.5rem; }
.head-nav a {
  font-family: var(--figure);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bone-dim);
  padding-block: 0.375rem;
  border-bottom: 1px solid transparent;
  transition: color .2s var(--out), border-color .2s var(--out);
}
.head-nav a:hover, .head-nav a[aria-current="true"] { color: var(--amber); border-bottom-color: var(--amber); }

/* ── actions ─────────────────────────────────────────────────────── */
.act {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  height: 2.875rem;
  padding-inline: 1.25rem;
  font-family: var(--figure);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid;
  transition: background-color .2s var(--out), color .2s var(--out),
              border-color .2s var(--out), box-shadow .2s var(--out);
}
.act-solid {
  background: var(--amber); color: var(--amber-ink); border-color: var(--amber);
  box-shadow: 0 1px 1px rgb(0 0 0 / .35), 0 6px 14px -8px rgb(0 0 0 / .55);
}
.act-solid:hover { background: var(--amber-deep); border-color: var(--amber-deep); }
.act-line { background: transparent; color: var(--bone); border-color: var(--graphite-3); }
.act-line:hover { border-color: var(--bone-dim); background: var(--graphite-2); }
.print .act-line { color: var(--ink); border-color: var(--newsprint-3); }
.print .act-line:hover { background: var(--newsprint-2); border-color: var(--ink-dim); }

/* underline offset is a design decision, not a default */
.link {
  color: var(--amber);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  transition: color .2s var(--out);
}
.link:hover { color: var(--bone); }
.print .link { color: #8A4F00; }
.print .link:hover { color: var(--ink); }

/* ── opening ─────────────────────────────────────────────────────── */
.open-in { padding-block: clamp(3rem, 7vw, 5.5rem) clamp(2.5rem, 5vw, 4rem); }
.t-name { margin-bottom: clamp(1.25rem, 2.5vw, 1.75rem); }
.t-name .amb { color: var(--amber); }

.open-lede {
  font-size: clamp(1.125rem, 1.9vw, 1.5rem);
  line-height: 1.4;
  max-width: 46ch;
  color: var(--bone);
}
.open-lede b { font-weight: 600; }

.open-foot {
  margin-top: clamp(2.25rem, 4vw, 3rem);
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.25rem;
}

/* the status strip, real facts, read as a terminal status line */
.status {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  border-top: 1px solid var(--graphite-3);
  display: grid;
}
@media (min-width: 720px) { .status { grid-template-columns: repeat(3, 1fr); } }
.status > div { padding: 1.125rem 0; border-bottom: 1px solid var(--graphite-3); }
@media (min-width: 720px) {
  .status > div { padding: 1.125rem clamp(1rem, 2vw, 1.75rem); border-bottom: 0; border-left: 1px solid var(--graphite-3); }
  .status > div:first-child { padding-left: 0; border-left: 0; }
  .status > div + div { padding-left: clamp(1.25rem, 2.2vw, 2rem); }
}
.status dt { margin-bottom: 0.4rem; }
.status dd { font-size: 1rem; line-height: 1.35; }
.status dd.fig { font-size: 0.9375rem; }

/* ── the book: a dense ruled table of every product ──────────────── */
.book { width: 100%; border-collapse: collapse; table-layout: fixed; }
.book col.w-sym    { width: 4.5rem; }
.book col.w-name   { width: 13.5rem; }
.book col.w-period { width: 7.5rem; }
@media (max-width: 1100px) { .book col.w-name { width: 11.5rem; } }
.book th, .book td { text-align: left; vertical-align: baseline; padding: 0.875rem 0.75rem; }
.book th:first-child, .book td:first-child { padding-left: 0; }
.book th:last-child,  .book td:last-child  { padding-right: 0; text-align: right; }
.book thead th { border-bottom: 2px solid var(--ink); padding-bottom: 0.5rem; }
.book tbody tr { border-bottom: 1px solid var(--newsprint-3); transition: background-color .18s var(--out); }
.book tbody tr:hover, .book tbody tr:focus-within { background: var(--newsprint-2); }
.book .sym { font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.06em; }
.book .what { color: var(--ink-dim); font-size: 0.9375rem; max-width: 46ch; }
.book .period { font-size: 0.8125rem; color: var(--ink-dim); white-space: nowrap; }
.book .open-mark {
  display: inline-block; width: 0.5rem; height: 0.5rem;
  background: var(--amber); margin-left: 0.5rem; vertical-align: 0.05em;
}
.book tbody tr a:hover .t-row, .book tbody tr a:focus-visible .t-row { color: #8A4F00; }

/* on a phone the table becomes stacked records, not a scroll box */
@media (max-width: 860px) {
  .book, .book tbody, .book tr, .book td { display: block; width: 100%; }
  .book thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .book tbody tr { padding: 1.125rem 0; }
  .book td { padding: 0; }
  .book td.c-sym { margin-bottom: 0.3rem; }
  .book td.c-name { margin-bottom: 0.375rem; }
  .book td.c-what { margin-bottom: 0.5rem; }
  .book td.c-period { text-align: left !important; }
  .book .what { max-width: none; }
}

/* ── position breakouts ──────────────────────────────────────────── */
.pos { border-top: 1px solid var(--graphite-3); }
.pos-in { padding-block: clamp(3rem, 6vw, 5rem); display: grid; gap: clamp(2rem, 4vw, 3.5rem); }
@media (min-width: 1000px) {
  .pos-in { grid-template-columns: 26rem minmax(0, 1fr); gap: clamp(3rem, 5vw, 4.5rem); align-items: start; }
}

/* the plate: an authored data graphic, not a fake screenshot */
.plate {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--graphite-2);
  border: 1px solid var(--graphite-3);
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  display: flex; flex-direction: column; justify-content: space-between;
  overflow: hidden;
}
@media (min-width: 1000px) { .plate { aspect-ratio: auto; min-height: 20rem; } }
.plate::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, var(--graphite-3) 1px, transparent 1px),
    linear-gradient(to bottom, var(--graphite-3) 1px, transparent 1px);
  background-size: 2.25rem 2.25rem;
  -webkit-mask-image: linear-gradient(to top, #000 10%, transparent 88%);
  mask-image: linear-gradient(to top, #000 10%, transparent 88%);
}
.plate > * { position: relative; }
.plate-sym {
  font-family: var(--figure);
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.14em;
  color: var(--amber);
}
.plate-fig {
  font-family: var(--figure);
  font-variant-numeric: tabular-nums;
  font-size: clamp(2rem, 4.4vw, 3rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.035em;
}
/* mono belongs to numbers; a word takes the display face */
.plate-fig.word {
  font-family: var(--display);
  font-size: clamp(2.25rem, 5vw, 3.5rem);
  text-transform: uppercase;
  letter-spacing: -0.025em;
}
.plate-cap { margin-top: 0.5rem; font-size: 0.875rem; color: var(--bone-dim); max-width: 28ch; }

.pos-body > * + * { margin-top: 1.125rem; }
.pos-body .t-pos { margin-bottom: 0.625rem; }
.pos-what { font-size: 1.0625rem; color: #C6C9CC; max-width: 62ch; }
.pos-what strong { color: var(--bone); font-weight: 500; }

.spec { margin-top: 1.75rem; border-top: 1px solid var(--graphite-3); display: grid; }
@media (min-width: 560px) { .spec { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.spec > div { padding: 0.875rem 0; border-bottom: 1px solid var(--graphite-3); }
@media (min-width: 560px) {
  .spec > div { padding-right: 1.5rem; }
  .spec > div:nth-child(2n) { padding-right: 0; padding-left: 1.75rem; border-left: 1px solid var(--graphite-3); }
}
.spec dt { margin-bottom: 0.3rem; }
.spec dd { font-size: 0.9375rem; line-height: 1.4; }

/* ── the ledger: roles, with concurrency shown ───────────────────── */
.ledger { border-top: 2px solid var(--ink); }
.led-row {
  display: grid;
  gap: 0.5rem 1.5rem;
  padding-block: 1.5rem;
  border-bottom: 1px solid var(--newsprint-3);
}
@media (min-width: 880px) { .led-row { grid-template-columns: 13rem minmax(0, 1fr); } }
.led-when { display: flex; flex-direction: column; gap: 0.35rem; align-items: flex-start; }
.led-when .period { font-size: 0.8125rem; color: var(--ink-dim); }
.led-live {
  font-family: var(--figure);
  font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase;
  background: var(--amber); color: var(--amber-ink);
  padding: 0.15rem 0.4rem;
}
.led-org { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 0.75rem; margin-bottom: 0.5rem; }
.led-org .col, .led-when .col { text-transform: none; letter-spacing: 0.01em; font-size: 0.8125rem; }
.led-what { font-size: 0.9375rem; color: var(--ink-dim); max-width: 68ch; }
.led-what + .led-what { margin-top: 0.5rem; }
.led-stack {
  margin-top: 0.75rem;
  font-family: var(--figure);
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  color: var(--ink-dim);
}

/* ── the panel: stack as a keyed legend ──────────────────────────── */
.panel { display: grid; border-top: 1px solid var(--graphite-3); }
@media (min-width: 700px)  { .panel { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .panel { grid-template-columns: repeat(4, 1fr); } }
.panel > div { padding: 1.5rem 0; border-bottom: 1px solid var(--graphite-3); }
@media (min-width: 700px) {
  .panel > div { padding: 1.5rem clamp(1rem, 2vw, 1.75rem); border-left: 1px solid var(--graphite-3); }
  .panel > div:nth-child(2n+1) { padding-left: 0; border-left: 0; }
  .panel > div + div { padding-left: clamp(1.25rem, 2.2vw, 2rem); }
}
@media (min-width: 1080px) {
  .panel > div:nth-child(2n+1) { padding-left: clamp(1rem, 2vw, 1.75rem); border-left: 1px solid var(--graphite-3); }
  .panel > div:nth-child(4n+1) { padding-left: 0; border-left: 0; }
}
.panel h3 { font-size: 1.125rem; margin-bottom: 0.875rem; letter-spacing: 0; }
.panel ul { display: flex; flex-wrap: wrap; gap: 0.3rem 0.4rem; }
.panel li {
  font-family: var(--figure);
  font-size: 0.75rem;
  color: var(--bone-dim);
  padding: 0.2rem 0.45rem;
  border: 1px solid var(--graphite-3);
  white-space: nowrap;
}

/* ── close ───────────────────────────────────────────────────────── */
.close { background: var(--amber); color: var(--amber-ink); }
.close ::selection { background: var(--amber-ink); color: var(--amber); }
.close-grid { display: grid; gap: clamp(2rem, 4vw, 3rem); }
@media (min-width: 900px) { .close-grid { grid-template-columns: 1.1fr 1fr; gap: clamp(3rem, 5vw, 4.5rem); } }
.close .t-band { max-width: 16ch; }
.close p { color: color-mix(in srgb, var(--amber-ink) 78%, var(--amber)); max-width: 42ch; }
.close .col { color: color-mix(in srgb, var(--amber-ink) 68%, var(--amber)); }
.reach { border-top: 1px solid color-mix(in srgb, var(--amber-ink) 38%, transparent); }
.reach a, .reach div {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding: 0.875rem 0.625rem;
  margin-inline: -0.625rem;
  border-bottom: 1px solid color-mix(in srgb, var(--amber-ink) 24%, transparent);
  transition: background-color .2s var(--out);
}
.reach a:hover { background: color-mix(in srgb, var(--amber-ink) 12%, transparent); }
.reach .v { font-family: var(--figure); font-size: 0.9375rem; font-weight: 500; }
.close .act-solid {
  background: var(--amber-ink); color: var(--amber); border-color: var(--amber-ink);
  box-shadow: 0 1px 1px rgb(0 0 0 / .2), 0 6px 14px -8px rgb(0 0 0 / .35);
}
.close .act-solid:hover { background: #100B01; border-color: #100B01; }
.close .act-line { color: var(--amber-ink); border-color: color-mix(in srgb, var(--amber-ink) 42%, transparent); }
.close .act-line:hover { background: color-mix(in srgb, var(--amber-ink) 12%, transparent); border-color: var(--amber-ink); }

/* ── foot ────────────────────────────────────────────────────────── */
.foot { background: var(--graphite); border-top: 1px solid var(--graphite-3); }
.foot-in { display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; align-items: center; padding-block: 1.75rem; }
.foot-in p, .foot-in a { font-family: var(--figure); font-size: 0.75rem; color: var(--bone-dim); letter-spacing: 0.04em; }
.foot-in nav { margin-left: auto; display: flex; flex-wrap: wrap; gap: 1.25rem; }
.foot-in a:hover { color: var(--amber); }

/* ── mobile ──────────────────────────────────────────────────────── */
@media (max-width: 760px) {
  .head-nav { display: none; }
  .head-in { justify-content: space-between; }
  .head .act { height: 2.25rem; padding-inline: 0.875rem; font-size: 0.6875rem; }
  .open-foot .act { flex: 1 1 12rem; justify-content: center; }
  .plate { aspect-ratio: 16 / 10; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}