/*
SPDX-FileCopyrightText: © 2026 Justin Burdine <justin@cyburdine.com>
SPDX-License-Identifier: BSD-3-Clause

about.css: the professional one-pager. Deliberately OUTSIDE the terminal
booth: no CRT chrome, no boot cinematic, no rails. This page is served both
at cyburdine.com/about and at justinburdine.com, and has to stand on its own
in front of an executive who has never seen the rest of the site.

It keeps only two things from style.css: the cold blue-graphite ground and
amber as the single signal colour. Everything else is quieter and squarer.

Density rule: this page is a résumé first. One rhythm unit (--s) drives the
vertical spacing, each section draws exactly one rule under its header, and
the career timeline gives the bullets the wide column, not the job title.
*/

/* ── self-hosted faces (CSP: font-src 'self') ─────────────────────────── */
@font-face{font-family:'Plex Sans';src:url('/assets/fonts/IBMPlexSans-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Plex Sans';src:url('/assets/fonts/IBMPlexSans-Medium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Plex Sans';src:url('/assets/fonts/IBMPlexSans-SemiBold.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Plex Cond';src:url('/assets/fonts/IBMPlexSansCondensed-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Plex Mono';src:url('/assets/fonts/IBMPlexMono-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Plex Mono';src:url('/assets/fonts/IBMPlexMono-Medium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}

:root{
  color-scheme:dark;

  /* ground, deeper and cleaner than the terminal's #0a0f14 */
  --ink:      #07090d;
  --surface:  #0c1016;
  --surface-2:#11161e;
  --line:     #1a212b;
  --line-2:   #2a3542;

  /* text: tx-3 lifted so small labels clear 4.5:1 on --ink */
  --tx:   #e9eef4;
  --tx-2: #9eadbc;
  --tx-3: #7b8b9b;

  /* one accent, inherited: amber = signal */
  --sig:  #ffb020;
  --sig-soft: rgba(255,176,32,.12);

  --sans:'Plex Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --cond:'Plex Cond','Plex Sans',system-ui,sans-serif;
  --mono:'Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  --gut:clamp(20px,4.5vw,56px);
  --maxw:1180px;
  --bar:56px;
  --s:clamp(16px,2vw,24px);   /* rhythm unit */
  --meta:280px;               /* timeline left column */
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;background:var(--ink);color:var(--tx);
  font-family:var(--sans);font-size:16px;line-height:1.55;font-weight:400;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:clip;
}
a{color:inherit;text-decoration:none}
p{margin:0}
h1,h2,h3{margin:0;font-weight:600;letter-spacing:-.02em;line-height:1.12}
:focus-visible{outline:2px solid var(--sig);outline-offset:3px}

.shell{max-width:var(--maxw);margin:0 auto;padding-left:var(--gut);padding-right:var(--gut)}

/* micro-label: the only mono in the design */
.ml{
  font-family:var(--mono);font-weight:500;font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--tx-3);
}

/* ══ top bar ═══════════════════════════════════════════════════════════ */
.bar{
  position:sticky;top:0;z-index:50;height:var(--bar);
  background:rgba(7,9,13,.86);
  -webkit-backdrop-filter:saturate(160%) blur(14px);
  backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid var(--line);
}
.bar-in{height:var(--bar);display:flex;align-items:center;gap:20px}
.mark{font-family:var(--cond);font-size:17px;letter-spacing:.02em;color:var(--tx);white-space:nowrap}
.mark b{font-weight:600}
.mark i{font-style:normal;color:var(--tx-3);margin:0 8px}
.mark-sub{letter-spacing:.14em}

/* the one instrument: a year readout that tracks the timeline */
.readout{
  display:flex;align-items:center;gap:9px;
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--tx-3);
  opacity:0;transform:translateY(3px);
  transition:opacity .3s ease,transform .3s ease;
  pointer-events:none;white-space:nowrap;
}
.readout.on{opacity:1;transform:none}
.readout::before{content:"";width:5px;height:5px;background:var(--sig);flex:none}
.readout b{color:var(--tx);font-weight:500;font-variant-numeric:tabular-nums}

.bar-nav{margin-left:auto;display:flex;align-items:center;gap:clamp(14px,2.2vw,26px)}
.bar-nav a{
  font-family:var(--mono);font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--tx-2);transition:color .18s ease;
}
.bar-nav a:hover{color:var(--tx)}
.bar-nav .cta{
  color:var(--ink);background:var(--sig);padding:8px 14px;
  font-weight:500;letter-spacing:.1em;transition:filter .18s ease;
}
.bar-nav .cta:hover{color:var(--ink);filter:brightness(1.12)}
@media (max-width:760px){.bar-nav .hide-sm{display:none}}
@media (max-width:420px){.readout{display:none}.mark-sub,.mark i{display:none}}

/* ══ hero ══════════════════════════════════════════════════════════════ */
.hero{padding-top:clamp(40px,6vw,76px);padding-bottom:0}
.hero-kick{display:block;margin-bottom:clamp(14px,2vw,20px)}
.hero-name{
  font-family:var(--cond);font-weight:600;
  font-size:clamp(48px,9vw,104px);line-height:.9;letter-spacing:-.03em;
  color:#fff;text-transform:uppercase;
}
.hero-rule{height:1px;background:var(--line);margin:clamp(20px,3vw,32px) 0}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:clamp(24px,4.5vw,64px);align-items:start}
.hero-lede{
  font-size:clamp(21px,2.4vw,29px);line-height:1.26;font-weight:500;
  letter-spacing:-.022em;color:#fff;
}
.hero-lede em{font-style:normal;color:var(--sig)}
.hero-sum{color:var(--tx-2);font-size:16px;line-height:1.6;max-width:62ch}
.hero-sum + .hero-sum{margin-top:12px}
.hero-sum strong{color:var(--tx);font-weight:500}
@media (max-width:860px){.hero-grid{grid-template-columns:1fr;gap:18px}}

/* primary actions: the résumé is the thing most visitors came for */
.hero-act{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.btn{
  display:inline-flex;align-items:center;gap:10px;min-height:42px;padding:0 16px;
  border:1px solid var(--line-2);color:var(--tx);font-size:14.5px;font-weight:500;
  transition:border-color .18s ease,background .18s ease,filter .18s ease;
}
.btn:hover{border-color:var(--tx-3);background:var(--surface)}
.btn-sig{background:var(--sig);border-color:var(--sig);color:var(--ink)}
.btn-sig:hover{background:var(--sig);border-color:var(--sig);filter:brightness(1.1)}
.btn-sig .ml{color:rgba(7,9,13,.6);font-size:10px}

/* metric strip */
.metrics{
  display:grid;grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  margin-top:clamp(32px,4.5vw,52px);
}
.metric{padding:clamp(16px,2vw,22px) clamp(14px,2vw,22px);border-left:1px solid var(--line)}
.metric:first-child{border-left:0;padding-left:0}
.metric-n{
  font-family:var(--cond);font-weight:600;font-size:clamp(28px,3.8vw,40px);
  line-height:1;letter-spacing:-.02em;color:var(--sig);
}
.metric-n.sm{font-size:clamp(22px,2.9vw,31px);line-height:1.29}
.metric-l{display:block;margin-top:8px;line-height:1.45;letter-spacing:.1em}
@media (max-width:760px){
  .metrics{grid-template-columns:repeat(2,1fr)}
  .metric:nth-child(3){border-left:0;padding-left:0}
  .metric:nth-child(-n+2){border-bottom:1px solid var(--line)}
}

/* ══ section furniture ═════════════════════════════════════════════════ */
.sec{padding-top:calc(var(--s) * 3.25);scroll-margin-top:var(--bar)}
.sec-hd{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);
  gap:clamp(16px,4vw,56px);align-items:end;
  padding-bottom:var(--s);border-bottom:1px solid var(--line);
}
.sec-t{font-size:clamp(26px,3.4vw,38px);letter-spacing:-.026em;color:#fff;margin-top:8px}
.sec-note{color:var(--tx-2);font-size:15.5px;line-height:1.55;max-width:62ch}
@media (max-width:760px){.sec-hd{grid-template-columns:1fr;align-items:start;gap:10px}}

/* ══ timeline ══════════════════════════════════════════════════════════ */
/* Two columns: who/when/where on the left, the evidence gets the width. */
.row{
  display:grid;grid-template-columns:var(--meta) minmax(0,1fr);
  gap:clamp(18px,3.5vw,48px);
  padding:var(--s) 0;border-bottom:1px solid var(--line);
  position:relative;scroll-margin-top:calc(var(--bar) + 24px);
}
.row::before{
  content:"";position:absolute;left:0;top:-1px;width:0;height:1px;
  background:var(--sig);transition:width .45s cubic-bezier(.4,0,.2,1);
}
.row.on::before{width:var(--meta)}
.row-when{
  display:block;font-family:var(--mono);font-size:12px;letter-spacing:.04em;
  color:var(--tx-3);margin-bottom:6px;transition:color .3s ease;
}
.row.on .row-when{color:var(--sig)}
.row-tag{display:inline-block;margin-bottom:6px;color:var(--sig);letter-spacing:.12em}
.row-tag + .row-role{margin-top:0}
.row-role{font-size:clamp(18px,1.8vw,21px);letter-spacing:-.018em;color:#fff}
.row-org{font-size:14px;color:var(--tx-2);margin-top:4px;line-height:1.45}
.row-body{color:var(--tx-2);font-size:15.5px;line-height:1.55;max-width:74ch}
.row-body strong{color:var(--tx);font-weight:500}
.row-body > p + .row-pts{margin-top:8px}
.row-pts{margin:0;padding:0;list-style:none}
.row-pts li{position:relative;padding-left:16px}
.row-pts li + li{margin-top:5px}
.row-pts li::before{content:"";position:absolute;left:0;top:.8em;width:6px;height:1px;background:var(--tx-3)}
.row-award{
  display:inline-block;margin-top:12px;padding:5px 10px;
  background:var(--sig-soft);color:var(--sig);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
}
@media (max-width:860px){
  :root{--meta:0px}
  .row{grid-template-columns:1fr;gap:10px}
  .row.on::before{width:64px}
}

/* ══ cards: capabilities, properties, recognition ══════════════════════ */
.cards{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);margin-top:var(--s);
}
.cards-4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1040px){.cards-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.cards,.cards-4{grid-template-columns:1fr}}
.card{background:var(--ink);padding:clamp(18px,2vw,24px);display:flex;flex-direction:column;transition:background .22s ease}
.card:hover{background:var(--surface)}
.card-t{font-size:18px;letter-spacing:-.015em;color:#fff;margin:10px 0 8px}
.card-d{color:var(--tx-2);font-size:15px;line-height:1.55;flex:1}
.card-m{margin-top:14px;letter-spacing:.1em;line-height:1.6}
.cards-sm .card-t{font-size:17px;margin:8px 0 4px}
.cards-sm .card-d{font-size:14.5px}

/* outbound property tiles */
a.card{position:relative}
a.card:hover .card-t{color:var(--sig)}
a.card .card-go{
  position:absolute;top:clamp(18px,2vw,24px);right:clamp(18px,2vw,24px);
  color:var(--tx-3);font-family:var(--mono);font-size:14px;line-height:1;transition:color .2s ease,transform .2s ease;
}
a.card:hover .card-go{color:var(--sig);transform:translate(2px,-2px)}
.card.soon{opacity:.62}
.card.soon:hover{background:var(--ink)}
.card-url{font-family:var(--mono);font-size:12px;letter-spacing:.02em;color:var(--tx-3);margin-top:12px;word-break:break-word}
a.card:hover .card-url{color:var(--tx-2)}

/* ══ film credits ══════════════════════════════════════════════════════ */
/* The short rows read as a two-column credit list, not a full-width table. */
.film{columns:2;column-gap:clamp(24px,4vw,56px);margin-top:4px}
.film-row{
  display:grid;grid-template-columns:52px minmax(0,1fr) auto;gap:12px;align-items:baseline;
  padding:10px 0;border-bottom:1px solid var(--line);break-inside:avoid;
}
.film-y{font-family:var(--mono);font-size:12px;color:var(--tx-3);font-variant-numeric:tabular-nums}
.film-t{font-size:16.5px;letter-spacing:-.012em;color:var(--tx-2);font-weight:500}
.film-row.star .film-t{color:#fff}
.film-row.star .film-y{color:var(--sig)}
.film-n{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--sig);white-space:nowrap}
.film-n::before{content:"";display:inline-block;width:5px;height:5px;background:var(--sig);margin-right:7px;vertical-align:.1em}
@media (max-width:640px){
  .film{columns:1}
  .film-row{grid-template-columns:52px minmax(0,1fr)}
  .film-n{grid-column:2;text-align:left;margin-top:-6px}
}

/* ══ closing / contact ═════════════════════════════════════════════════ */
.close{padding-top:calc(var(--s) * 3.5);padding-bottom:var(--s);scroll-margin-top:var(--bar)}
.close-t{
  font-family:var(--cond);font-weight:600;text-transform:uppercase;
  font-size:clamp(32px,5vw,58px);line-height:.95;letter-spacing:-.028em;color:#fff;
  max-width:20ch;
}
.close-t em{font-style:normal;color:var(--sig)}
.close-sub{color:var(--tx-2);font-size:16px;max-width:60ch;margin-top:14px}
.contact{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);margin-top:calc(var(--s) * 1.25)}
.ct{background:var(--ink);padding:16px clamp(16px,2vw,22px) 18px;transition:background .22s ease}
.ct:hover{background:var(--surface)}
.ct-v{display:block;font-family:var(--mono);font-size:14px;color:var(--tx);margin-top:6px;word-break:break-word;transition:color .18s ease}
.ct:hover .ct-v{color:var(--sig)}

.foot{
  border-top:1px solid var(--line);margin-top:calc(var(--s) * 2);
  padding:18px 0 28px;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
}
.foot a{color:var(--tx-3);transition:color .18s ease}
.foot a:hover{color:var(--sig)}

/* ══ reveal ════════════════════════════════════════════════════════════ */
.rv{opacity:0;transform:translateY(10px);transition:opacity .5s ease,transform .5s cubic-bezier(.2,.7,.3,1)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}
@media print{
  .bar,.hero-act,.readout{display:none}
  .rv{opacity:1;transform:none}
}