/* ============================================================
   assafdev.io — inspector
   The page is a readout. Amber is the only chromatic accent;
   everything else is neutral so the scan reveal stays the
   one memorable moment.
   ============================================================ */

:root{
  --bg:#0B0B0D;
  --panel:#121216;
  --panel-2:#17171C;
  --line:#26262D;
  --line-soft:#1B1B21;
  --ink:#E9E7E2;
  --muted:#8B8B95;
  --dim:#5E5E68;
  --amber:#FFB020;
  --amber-soft:rgba(255,176,32,.13);

  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --sans:"Instrument Sans",ui-sans-serif,system-ui,-apple-system,sans-serif;

  --rail-w:168px;
  --pad:clamp(1.15rem,3.2vw,2.6rem);
  --maxw:980px;
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--mono);
  font-size:15px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  /* faint grid — reads as a measurement surface, not decoration */
  background-image:
    linear-gradient(var(--line-soft) 1px,transparent 1px),
    linear-gradient(90deg,var(--line-soft) 1px,transparent 1px);
  background-size:64px 64px;
  background-position:-1px -1px;
}

h1,h2,h3,p,dl,dd,ol,ul{margin:0}
ol,ul{padding:0;list-style:none}
a{color:inherit}

.skip{
  position:absolute;left:-9999px;top:0;z-index:99;
  background:var(--amber);color:#0B0B0D;padding:.6rem 1rem;font-weight:700;
}
.skip:focus{left:0}

:focus-visible{outline:2px solid var(--amber);outline-offset:3px;border-radius:2px}

/* ── chrome bar ─────────────────────────────────────────── */
.chrome{
  position:sticky;top:0;z-index:40;
  background:rgba(11,11,13,.88);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.chrome__in{
  max-width:calc(var(--maxw) + var(--rail-w) + var(--pad)*2);
  margin:0 auto;padding:.62rem var(--pad);
  display:flex;align-items:center;gap:.85rem;
}
.chrome__dots{display:flex;gap:5px}
.chrome__dots i{width:9px;height:9px;border-radius:50%;background:var(--line);display:block}
.chrome__url{font-size:12px;color:var(--muted);letter-spacing:.02em}
.chrome__status{
  margin-left:auto;display:flex;align-items:center;gap:.45rem;
  font-size:11px;color:var(--dim);text-transform:uppercase;letter-spacing:.13em;
}
.pulse{width:6px;height:6px;border-radius:50%;background:var(--amber);animation:pulse 2.6s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}

/* ── shell / rail ───────────────────────────────────────── */
.shell{
  max-width:calc(var(--maxw) + var(--rail-w) + var(--pad)*2);
  margin:0 auto;padding:0 var(--pad);
  display:grid;grid-template-columns:var(--rail-w) minmax(0,1fr);gap:var(--pad);
  align-items:start;
}
.rail{position:sticky;top:76px;padding-top:3.2rem}
.rail__list{display:flex;flex-direction:column;gap:.1rem;counter-reset:r}
.rail__a{
  display:block;padding:.42rem 0 .42rem .1rem;
  font-size:12px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--dim);text-decoration:none;
  border-left:2px solid transparent;padding-left:.85rem;
  transition:color .18s ease,border-color .18s ease;
}
.rail__a::before{counter-increment:r;content:counter(r,decimal-leading-zero) "  ";color:var(--line);}
.rail__a:hover{color:var(--muted)}
.rail__a.is-on{color:var(--amber);border-left-color:var(--amber)}
.rail__a.is-on::before{color:var(--amber-soft)}

.main{min-width:0;padding:3.2rem 0 4rem}

/* ── panel ──────────────────────────────────────────────── */
.panel{
  border:1px solid var(--line);
  background:var(--panel);
  margin-bottom:1.15rem;
  scroll-margin-top:76px;
}
.panel__bar{
  display:flex;align-items:center;gap:1rem;
  padding:.6rem 1.05rem;
  border-bottom:1px solid var(--line);
  background:var(--panel-2);
}
.panel__label{
  font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--amber);
}
.panel__meta{
  margin-left:auto;font-size:11px;letter-spacing:.06em;color:var(--dim);
  text-align:right;
}
.panel__body{padding:clamp(1.25rem,3vw,2.1rem) clamp(1.05rem,3vw,2.1rem)}

/* ── hero ───────────────────────────────────────────────── */
.panel--hero{position:relative;overflow:hidden}
.hero{position:relative}
.hero__name{
  font-family:var(--mono);font-weight:700;
  font-size:clamp(2.1rem,7.2vw,4rem);line-height:1.02;letter-spacing:-.035em;
  margin-bottom:.55rem;
}
.hero__role{
  font-size:12px;letter-spacing:.15em;text-transform:uppercase;color:var(--amber);
  margin-bottom:1.5rem;
}
.hero__lede{
  font-family:var(--sans);font-size:clamp(1rem,2.1vw,1.16rem);line-height:1.65;
  color:var(--muted);max-width:56ch;margin-bottom:2rem;
}
.hero__lede strong{color:var(--ink);font-weight:500}

/* the scan — Koala Inspector populating a readout */
.scan{
  position:absolute;left:-2rem;right:-2rem;top:0;height:120px;pointer-events:none;
  background:linear-gradient(180deg,transparent,var(--amber-soft) 55%,rgba(255,176,32,.5) 82%,transparent 84%);
  animation:sweep 1250ms cubic-bezier(.5,.05,.35,1) 120ms forwards;
  opacity:0;
}
@keyframes sweep{
  0%{transform:translateY(-120px);opacity:0}
  12%{opacity:1}
  85%{opacity:1}
  100%{transform:translateY(min(560px,72vh));opacity:0}
}

/* staggered field reveal */
[data-r]{opacity:0;transform:translateY(9px);animation:rowIn .5s cubic-bezier(.2,.7,.3,1) forwards}
[data-r="0"]{animation-delay:.16s}
[data-r="1"]{animation-delay:.30s}
[data-r="2"]{animation-delay:.44s}
[data-r="3"]{animation-delay:.58s}
[data-r="4"]{animation-delay:.76s}
@keyframes rowIn{to{opacity:1;transform:none}}

/* ── hero layout + captures ─────────────────────────────── */
.hero__grid{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(1.4rem,4vw,2.8rem);align-items:start}
.hero__main{min-width:0}

/* Two matched captures, framed like inspector evidence. */
.caps{margin:0;display:flex;flex-direction:column;gap:6px;align-items:flex-end}
.caps__img{
  display:block;width:142px;height:142px;object-fit:cover;
  border:1px solid var(--line);filter:saturate(.92) contrast(1.02);
}
.caps__img--sm{width:142px;height:142px;opacity:.86}
.caps__cap{
  font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--dim);
  padding-top:.15rem;
}

/* ── location map ───────────────────────────────────────── */
.map{margin:0}
.map__svg{display:block;width:100%;height:auto}
.map__land{fill:#1E1E25;stroke:#34343E;stroke-width:.7;stroke-linejoin:round}
.map__hi{fill:rgba(255,176,32,.3);stroke:var(--amber);stroke-width:.8;stroke-linejoin:round}
.map__ring{
  fill:none;stroke:var(--amber);stroke-width:1.1;opacity:.5;
  transform-box:fill-box;transform-origin:center;
  animation:ping 3.4s ease-in-out infinite;
}
@keyframes ping{0%,100%{opacity:.5;transform:scale(.72)}50%{opacity:.12;transform:scale(1)}}
.map__dot{fill:var(--amber)}
.map__dot--home{fill:none;stroke:var(--amber);stroke-width:1.5}

.map__cap{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:1.35rem}
.map__key{
  font-size:11px;letter-spacing:.05em;color:var(--muted);
  border:1px solid var(--line);background:var(--panel-2);padding:.3rem .62rem;
}
.map__key--on{color:var(--amber);border-color:rgba(255,176,32,.4)}
.map__key--home{color:var(--ink)}

/* ── key/value rows with dot leaders ────────────────────── */
.rows{display:flex;flex-direction:column;gap:.15rem;margin-bottom:2rem}
.row{display:flex;align-items:baseline;gap:.7rem;padding:.36rem 0}
.row__k{font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--dim);white-space:nowrap}
.row__lead{flex:1 1 auto;min-width:1.5rem;border-bottom:1px dotted var(--line);transform:translateY(-3px)}
.row__v{margin:0;font-weight:500;white-space:nowrap;font-variant-numeric:tabular-nums}
.rows--lg{margin-bottom:0}
.rows--lg .row__v{font-size:clamp(.95rem,2.2vw,1.1rem)}

.lnk{color:var(--amber);text-decoration:none;border-bottom:1px solid transparent;transition:border-color .18s ease}
.lnk:hover{border-bottom-color:var(--amber)}

/* ── buttons ────────────────────────────────────────────── */
.cta{display:flex;flex-wrap:wrap;gap:.55rem}
.btn{
  display:inline-flex;align-items:center;gap:.45rem;
  padding:.62rem 1.05rem;border:1px solid var(--line);
  font-size:12px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--muted);text-decoration:none;background:transparent;
  transition:color .18s ease,border-color .18s ease,background .18s ease;
}
.btn:hover{color:var(--ink);border-color:var(--dim);background:var(--panel-2)}
.btn--go{border-color:var(--amber);color:var(--amber)}
.btn--go:hover{background:var(--amber);color:#0B0B0D;border-color:var(--amber)}

/* ── prose / notes ──────────────────────────────────────── */
.prose{
  font-family:var(--sans);font-size:1.02rem;line-height:1.68;color:var(--muted);
  max-width:62ch;margin-bottom:1.7rem;
}
.prose strong{color:var(--ink);font-weight:500}
.note{
  font-size:12px;color:var(--dim);line-height:1.65;margin-top:1.4rem;
  padding-top:1.1rem;border-top:1px solid var(--line-soft);
}

/* ── cards ──────────────────────────────────────────────── */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(228px,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.card{background:var(--panel);padding:1.15rem 1.1rem;position:relative;transition:background .2s ease}
.card:hover{background:var(--panel-2)}
.card--lead{grid-column:1/-1;background:var(--panel-2)}
.card__tag{
  display:inline-block;font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--amber);border:1px solid var(--amber);padding:.12rem .45rem;margin-bottom:.7rem;
}
.card__h{font-size:.98rem;font-weight:700;letter-spacing:-.01em;margin-bottom:.42rem}
.card--lead .card__h{font-size:1.28rem}
.card__p{font-family:var(--sans);font-size:.9rem;line-height:1.6;color:var(--muted)}
.card__stat{
  display:block;margin-top:.85rem;font-size:12px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--amber);
}

/* ── timeline (a real sequence: years carry meaning) ────── */
.tl{display:flex;flex-direction:column}
.tl__i{display:grid;grid-template-columns:88px minmax(0,1fr);gap:1.15rem;padding:1.05rem 0;border-bottom:1px solid var(--line-soft)}
.tl__i:last-child{border-bottom:0;padding-bottom:0}
.tl__i:first-child{padding-top:0}
.tl__i--faint .tl__h,.tl__i--faint .tl__p{color:var(--dim)}
.tl__y{font-size:12px;color:var(--dim);letter-spacing:.04em;padding-top:.18rem;white-space:nowrap}
.tl__h{font-size:1rem;font-weight:700;margin-bottom:.3rem;display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.tl__badge{
  font-size:10px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  color:var(--amber);background:var(--amber-soft);padding:.14rem .45rem;
}
.tl__p{font-family:var(--sans);font-size:.92rem;line-height:1.62;color:var(--muted);max-width:60ch}

/* clients nested under the consultancy that carried them */
.tl__sub{
  margin-top:.75rem;padding-left:.95rem;border-left:1px solid var(--line);
  display:flex;flex-direction:column;gap:.5rem;max-width:60ch;
}
/* grid, not inline-block — keeps wrapped lines off the year column */
.tl__sub li{
  display:grid;grid-template-columns:62px minmax(0,1fr);gap:.6rem;
  font-family:var(--sans);font-size:.86rem;line-height:1.55;color:var(--muted);
}
.tl__sub strong{font-family:var(--mono);font-size:.82rem;font-weight:700;color:var(--ink)}
.tl__sy{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.04em;
  color:var(--dim);padding-top:.2rem;
}

/* ── chips ──────────────────────────────────────────────── */
.grp{margin-bottom:1.85rem}
.grp:last-child{margin-bottom:0}
.grp__h{font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--dim);margin-bottom:.8rem}
.chips{display:flex;flex-wrap:wrap;gap:.4rem}
.chip{
  font-size:12px;padding:.34rem .68rem;border:1px solid var(--line);
  color:var(--muted);background:var(--panel-2);
}
.chip--on{color:var(--amber);border-color:rgba(255,176,32,.36)}

/* ── footer ─────────────────────────────────────────────── */
.foot{
  display:flex;gap:.6rem;flex-wrap:wrap;
  padding:1.6rem .2rem 0;font-size:11px;color:var(--dim);
  letter-spacing:.06em;
}
.foot__d{color:var(--line)}

/* ── responsive ─────────────────────────────────────────── */
@media (max-width:820px){
  /* Padding moves off .shell and onto the children, so the sticky rail can go
     edge-to-edge without negative margins pushing the page sideways. */
  /* minmax(0,1fr), not 1fr — plain 1fr keeps an auto minimum, and the
     nowrap nav forces the track (and the page) wider than the viewport. */
  .shell{grid-template-columns:minmax(0,1fr);gap:0;padding:0}
  .rail{
    position:sticky;top:41px;z-index:30;padding:0;margin:0;min-width:0;
    background:rgba(11,11,13,.94);backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line);
  }
  .rail__list{
    flex-direction:row;gap:0;overflow-x:auto;padding:0 var(--pad);
    scrollbar-width:none;
  }
  .rail__list::-webkit-scrollbar{display:none}
  .rail__a{
    border-left:0;border-bottom:2px solid transparent;
    padding:.7rem .8rem;white-space:nowrap;
  }
  .rail__a::before{content:none}
  .rail__a.is-on{border-bottom-color:var(--amber)}
  .main{padding:1.6rem var(--pad) 3rem}
  .panel{scroll-margin-top:96px}
  .tl__i{grid-template-columns:1fr;gap:.3rem}
  .tl__y{padding-top:0}
  .panel__meta{display:none}

  /* captures lead the hero on small screens */
  .hero__grid{grid-template-columns:1fr;gap:1.3rem}
  .hero__main{order:2}
  .caps{order:1;flex-direction:row;align-items:flex-start;gap:6px;flex-wrap:wrap}
  .caps__img,.caps__img--sm{width:104px;height:104px}
  .caps__cap{width:100%;padding-top:0}

  .map__cap{gap:.3rem;margin-top:1rem}
  .map__key{font-size:10px;padding:.26rem .5rem}
}

@media (prefers-reduced-motion:reduce){
  .scan{display:none}
  .map__ring{animation:none;transform:scale(.85)}
  [data-r]{opacity:1;transform:none;animation:none}
  .pulse{animation:none}
  *{transition-duration:.01ms!important;scroll-behavior:auto!important}
}

.tl__dim{color:var(--dim)}