/* =========================================================
   Sadhanala Nischay Prasad — portfolio

   Dark editorial. The page is deliberately near-monochrome
   so the six product screenshots carry all the colour, the
   way a design annual lets the plates do the talking.
   Green appears in exactly one meaning: deployed.
   ========================================================= */

:root{
  --ink:      #0A0A0B;   /* page ground */
  --ink-2:    #0E0E10;   /* alternating band */
  --surface:  #141416;   /* raised panel */
  --surface-2:#1A1A1D;

  --paper:    #F4F4F2;   /* primary text */
  --paper-2:  #B9B9B4;   /* secondary text */
  --paper-3:  #85857F;   /* captions, labels */

  --line:     rgba(255,255,255,.10);
  --line-soft:rgba(255,255,255,.06);

  --live:     #4ADE80;   /* the only chromatic signal on the page */

  --serif: "Instrument Serif", Georgia, "Times New Roman", serif;
  --sans:  "Inter Tight", -apple-system, "Segoe UI", system-ui, sans-serif;
  --mono:  "JetBrains Mono", ui-monospace, Menlo, monospace;

  --shell: 1180px;
  --gut: clamp(20px, 5vw, 60px);
}

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

/* The hidden attribute must beat every author display rule below it.
   .btn is inline-flex, which would otherwise win over the UA sheet. */
[hidden]{ display:none !important; }

html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--ink);
  color:var(--paper);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }
a{ color:inherit; }

.shell{ width:100%; max-width:var(--shell); margin-inline:auto; padding-inline:var(--gut); }
.m{ font-family:var(--mono); font-size:.88em; color:var(--paper); }

.sr{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

.skip{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--paper); color:var(--ink); padding:12px 18px;
  font-family:var(--mono); font-size:14px;
}
.skip:focus{ left:12px; top:12px; }

:where(a,button,[tabindex]):focus-visible{
  outline:2px solid var(--live);
  outline-offset:3px;
  border-radius:3px;
}

/* ---------- type ---------- */
.display{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(42px, 7.2vw, 88px);
  line-height:1.03;
  letter-spacing:-.018em;
  margin:0 0 26px;
  text-wrap:balance;
}
.display em{ font-style:italic; color:var(--paper-2); }
.display-sm{ font-size:clamp(38px, 5.6vw, 64px); margin-bottom:12px; }

.h2{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(30px, 4.2vw, 50px);
  line-height:1.08;
  letter-spacing:-.014em;
  margin:0 0 14px;
  text-wrap:balance;
}

.kicker{
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--paper-3);
  margin:0 0 16px;
}

.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--mono); font-size:12.5px;
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--paper-3); margin:0 0 26px;
}
.pulse{
  width:7px; height:7px; border-radius:50%; background:var(--live); flex:none;
  box-shadow:0 0 0 0 rgba(74,222,128,.6);
}
@media (prefers-reduced-motion:no-preference){
  .pulse{ animation:pulse 2.6s ease-out infinite; }
}
@keyframes pulse{
  0%{ box-shadow:0 0 0 0 rgba(74,222,128,.55); }
  70%{ box-shadow:0 0 0 8px rgba(74,222,128,0); }
  100%{ box-shadow:0 0 0 0 rgba(74,222,128,0); }
}

.lede{
  font-size:clamp(18px, 1.9vw, 21px);
  line-height:1.5;
  color:var(--paper-2);
  max-width:56ch;
  margin:0 0 34px;
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--mono); font-size:14px;
  padding:13px 22px; border-radius:2px;
  text-decoration:none; border:1px solid transparent;
  transition:background-color .2s ease, color .2s ease, border-color .2s ease;
}
.btn-solid{ background:var(--paper); color:var(--ink); font-weight:500; }
.btn-solid:hover{ background:#fff; }
.btn-line{ border-color:var(--line); color:var(--paper); }
.btn-line:hover{ border-color:var(--paper-2); background:rgba(255,255,255,.04); }
.cta{ display:flex; flex-wrap:wrap; gap:12px; }
.cta-center{ justify-content:center; }

/* ---------- nav ---------- */
.nav{
  position:sticky; top:0; z-index:50;
  background:rgba(10,10,11,.8);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line-soft);
}
.nav-in{
  max-width:var(--shell); margin-inline:auto; padding-inline:var(--gut);
  height:58px; display:flex; align-items:center; gap:26px;
}
.mark{
  display:inline-flex; align-items:center; gap:9px;
  text-decoration:none; font-size:15px; font-weight:500;
  letter-spacing:-.01em; white-space:nowrap;
}
.mark-dot{ width:8px; height:8px; border-radius:50%; background:var(--live); flex:none; }
.nav-links{ display:flex; gap:24px; list-style:none; margin:0 0 0 auto; padding:0; }
.nav-links a{
  font-family:var(--mono); font-size:13px; color:var(--paper-3);
  text-decoration:none; transition:color .18s ease;
}
.nav-links a:hover{ color:var(--paper); }
.nav-gh{
  font-family:var(--mono); font-size:13px; color:var(--paper);
  text-decoration:none; border:1px solid var(--line);
  padding:7px 14px; border-radius:2px; white-space:nowrap;
  transition:border-color .18s ease;
}
.nav-gh:hover{ border-color:var(--paper-2); }
@media (max-width:880px){
  .nav-in{ flex-wrap:wrap; height:auto; padding-top:10px; row-gap:6px; }
  .nav-gh{ margin-left:auto; }
  .nav-links{
    order:3; flex:1 0 100%; margin:0 calc(-1 * var(--gut)); padding:4px var(--gut) 10px;
    gap:20px; overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch;
  }
  .nav-links::-webkit-scrollbar{ display:none; }
  .nav-links a{ display:inline-block; padding:6px 0; white-space:nowrap; font-size:13px; }
}

/* ---------- hero ---------- */
.hero{ padding:clamp(64px, 11vw, 132px) 0 clamp(48px, 7vw, 76px); }

.stats{
  display:grid; grid-template-columns:repeat(4, minmax(0,1fr));
  margin:clamp(48px, 7vw, 76px) 0 0; padding:0;
  border-top:1px solid var(--line);
}
.stats > div{ padding:22px 22px 0 0; }
.stats dt{
  font-family:var(--mono); font-size:12px; letter-spacing:.13em;
  text-transform:uppercase; color:var(--paper-3); margin:0 0 10px;
}
.stats dd{
  margin:0; font-family:var(--serif); font-size:clamp(34px,4.4vw,52px);
  line-height:1; font-variant-numeric:tabular-nums;
}
.live-n{ color:var(--live); }
@media (max-width:760px){
  .stats{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:4px 0; }
}

/* ---------- bands ---------- */
.band{ padding:clamp(64px, 10vw, 124px) 0; }
.band-alt{ background:var(--ink-2); border-block:1px solid var(--line-soft); }
.band-head{ max-width:62ch; margin-bottom:clamp(40px, 5.5vw, 64px); }
.band-sub{ color:var(--paper-2); font-size:17.5px; margin:0; max-width:58ch; }

/* ---------- browser frame: the signature ----------
   The chrome is not decoration — the address bar shows the real
   deployment URL and links to it, so the frame is the evidence. */
.frame{
  margin:0;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:9px;
  overflow:hidden;
  box-shadow:0 30px 60px -32px rgba(0,0,0,.9);
  transition:border-color .25s ease, transform .25s ease;
}
.frame:hover{ border-color:rgba(255,255,255,.2); transform:translateY(-3px); }

.chrome{
  display:flex; align-items:center; gap:12px;
  padding:9px 12px;
  background:var(--surface-2);
  border-bottom:1px solid var(--line-soft);
}
.dots{ display:flex; gap:6px; flex:none; }
.dots i{ width:9px; height:9px; border-radius:50%; background:rgba(255,255,255,.16); }
.addr{
  flex:1; min-width:0;
  font-family:var(--mono); font-size:12px; color:var(--paper-2);
  text-decoration:none;
  background:rgba(0,0,0,.35);
  border:1px solid var(--line-soft);
  border-radius:980px;
  padding:5px 13px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  transition:color .18s ease, border-color .18s ease;
}
.addr:hover{ color:var(--paper); border-color:var(--line); }
.badge{
  flex:none;
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--mono); font-size:12px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--live);
}
.badge::before{
  content:""; width:6px; height:6px; border-radius:50%;
  background:var(--live); box-shadow:0 0 8px rgba(74,222,128,.8);
}
.shot{ display:block; background:var(--ink); }
.shot img{ width:100%; height:auto; }

/* ---------- case study ---------- */
.case{
  display:grid; grid-template-columns:1.12fr .88fr;
  gap:clamp(30px, 4.5vw, 62px);
  align-items:center;
  margin-bottom:clamp(56px, 8vw, 104px);
}
.case-flip .case-media{ order:2; }

.case-tag{
  font-family:var(--mono); font-size:12px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--live); margin:0 0 10px;
}
.case-name{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(30px, 3.6vw, 42px); line-height:1.05;
  letter-spacing:-.014em; margin:0 0 12px;
}
.case-line{ color:var(--paper-2); font-size:17.5px; margin:0 0 20px; max-width:46ch; }

.tags{ display:flex; flex-wrap:wrap; gap:6px; list-style:none; margin:0 0 24px; padding:0; }
.tags li{
  font-family:var(--mono); font-size:12px; color:var(--paper-3);
  border:1px solid var(--line-soft); border-radius:2px; padding:4px 9px;
}

.notes{ margin:0 0 24px; padding:0; }
.notes > div{ padding:14px 0; border-top:1px solid var(--line-soft); }
.notes > div:first-child{ border-top:1px solid var(--line); }
.notes dt{
  font-size:14.5px; font-weight:600; letter-spacing:-.008em;
  margin:0 0 5px; color:var(--paper);
}
.notes dd{ margin:0; font-size:15px; line-height:1.55; color:var(--paper-2); }

.case-links{ display:flex; flex-wrap:wrap; gap:8px 22px; margin:0; font-size:14.5px; }
.case-links a{
  font-family:var(--mono); font-size:13.5px; text-decoration:none;
  color:var(--paper); border-bottom:1px solid var(--line);
  padding-bottom:2px; transition:border-color .18s ease, color .18s ease;
}
.case-links a:hover{ color:var(--live); border-bottom-color:var(--live); }

/* ---------- grids ---------- */
.grid-2{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:clamp(28px,3.6vw,48px); }
.grid-3{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:clamp(20px,2.6vw,30px); }

.mini-name{
  font-family:var(--serif); font-weight:400; font-size:28px;
  letter-spacing:-.012em; margin:22px 0 8px; line-height:1.1;
}
.mini-line{ color:var(--paper-2); font-size:16.5px; margin:0 0 16px; }
.mini-note{ color:var(--paper-2); font-size:15px; line-height:1.6; margin:0 0 20px; }
.mini-note em{ color:var(--paper); font-style:italic; }
.mini .tags{ margin-bottom:18px; }
.mini{ scroll-margin-top:80px; }
.mini .mini-tag{ margin:22px 0 0; }
.mini .mini-tag + .mini-name{ margin-top:6px; }
.mini-credit{
  font-size:14.5px; line-height:1.55; color:var(--paper-2);
  margin:0 0 16px; padding-left:12px; border-left:2px solid var(--line);
}

/* ---------- slab (non-deployed) ---------- */
.slab{
  background:var(--surface);
  border:1px solid var(--line-soft);
  border-radius:9px;
  padding:clamp(26px,3vw,36px);
}
.slab-head{ display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; margin-bottom:14px; }
.slab-head h3{
  font-family:var(--serif); font-weight:400; font-size:32px;
  letter-spacing:-.014em; margin:0; line-height:1.1;
}
.chip{
  font-family:var(--mono); font-size:12px; color:var(--paper-3);
  border:1px solid var(--line-soft); border-radius:2px; padding:4px 9px;
}
.slab > p{ color:var(--paper-2); font-size:16.5px; margin:0 0 20px; }
.slab .tags{ margin:0 0 18px; }

/* a full-width slab; its notes sit side by side on wide screens */
.slab-wide{ grid-column:1 / -1; }
@media (min-width:761px){
  .slab-wide .notes{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); column-gap:clamp(24px,3vw,44px); }
  .slab-wide .notes > div{ border-top:1px solid var(--line); }
}

/* unfinished work: deliberately neutral, never the green that means deployed */
.chip-wip{ border-style:dashed; color:var(--paper-2); }

/* ---------- brick (hardware) ---------- */
.brick{
  border-top:1px solid var(--line);
  padding:22px 0 0;
}
.brick h3{
  font-family:var(--serif); font-weight:400; font-size:25px;
  letter-spacing:-.012em; margin:0 0 6px; line-height:1.12;
}
.brick-bom{
  font-family:var(--mono); font-size:12px; color:var(--paper-3);
  margin:0 0 14px;
}
.brick p{ color:var(--paper-2); font-size:15.5px; line-height:1.58; margin:0 0 16px; }
.brick a{
  font-family:var(--mono); font-size:13px; text-decoration:none;
  color:var(--paper); border-bottom:1px solid var(--line); padding-bottom:2px;
}
.brick a:hover{ color:var(--live); border-bottom-color:var(--live); }

/* ---------- table ---------- */
/* position:relative makes this the containing block for the absolutely
   positioned .sr labels inside the table. Without it they escape the
   overflow clip and widen the page to the table's 680px on phones. */
.table-wrap{ overflow-x:auto; position:relative; }
table{ border-collapse:collapse; width:100%; min-width:680px; }
th,td{ text-align:left; vertical-align:top; padding:16px 20px 16px 0; border-bottom:1px solid var(--line-soft); }
thead th{
  font-family:var(--mono); font-size:12px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--paper-3); font-weight:400;
  border-bottom:1px solid var(--line); padding-top:0;
}
tbody tr:last-child th, tbody tr:last-child td{ border-bottom:0; }
tbody th{ font-size:16px; font-weight:600; letter-spacing:-.01em; white-space:nowrap; padding-right:30px; }
td.plat{ font-family:var(--mono); font-size:12px; color:var(--paper-3); white-space:nowrap; padding-right:30px; }
td{ color:var(--paper-2); font-size:15px; line-height:1.55; }
td:nth-child(3){ max-width:46ch; }
td.src{ text-align:right; padding-right:0; white-space:nowrap; }
td.src a{
  font-family:var(--mono); font-size:12.5px; color:var(--paper);
  text-decoration:none; border-bottom:1px solid var(--line); padding-bottom:2px;
}
td.src a:hover{ color:var(--live); border-bottom-color:var(--live); }

/* ---------- stack rows ---------- */
.rows{ border-top:1px solid var(--line); }
.row{
  display:grid; grid-template-columns:160px minmax(0,1fr);
  gap:0 30px; padding:20px 0;
  border-bottom:1px solid var(--line-soft);
  align-items:baseline;
}
.row-h{ margin:0; font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--paper-3); }
.pills{ display:flex; flex-wrap:wrap; gap:7px; list-style:none; margin:0; padding:0; }
.pills li{
  font-size:14px; color:var(--paper-2);
  border:1px solid var(--line-soft); border-radius:2px; padding:5px 11px;
  transition:border-color .18s ease, color .18s ease;
}
.pills li:hover{ border-color:var(--line); color:var(--paper); }
@media (max-width:700px){ .row{ grid-template-columns:minmax(0,1fr); gap:12px 0; } }

/* ---------- about ---------- */
.about-big{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(26px, 3.4vw, 40px); line-height:1.22;
  letter-spacing:-.012em; margin:0 0 38px; max-width:30ch;
  text-wrap:balance;
}
.about-cols{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:clamp(24px,3.4vw,52px); }
.about-cols p{ margin:0; color:var(--paper-2); font-size:16.5px; line-height:1.65; }
@media (max-width:760px){ .about-cols{ grid-template-columns:minmax(0,1fr); } }
.about-note{
  margin:36px 0 0; padding-top:22px; border-top:1px solid var(--line);
  color:var(--paper-2); font-size:16.5px; line-height:1.65; max-width:72ch;
}
.about-note-k{
  display:block; margin-bottom:8px;
  font-family:var(--mono); font-size:12px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--live);
}
.about-note a{ color:var(--paper); text-decoration:none; border-bottom:1px solid var(--line); }
.about-note a:hover{ color:var(--live); border-bottom-color:var(--live); }

/* ---------- contact ---------- */
.contact{ text-align:center; }
.contact-sub{ color:var(--paper-2); font-size:17.5px; margin:0 0 32px; }

/* ---------- footer ---------- */
.foot{ border-top:1px solid var(--line-soft); padding:26px 0 52px; }
.foot-in{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px 24px;
  font-family:var(--mono); font-size:12px; color:var(--paper-3);
}
.foot-dim a{ color:var(--paper-3); }
.foot-dim a:hover{ color:var(--paper); }

/* ---------- reveal ----------
   Hidden state is scoped to .js-reveal, which index.html sets only once
   it has confirmed the browser can undo it. */
.js-reveal .case,
.js-reveal .mini,
.js-reveal .slab,
.js-reveal .band-head,
.js-reveal .brick,
.js-reveal .rows,
.js-reveal .table-wrap,
.js-reveal .about-big,
.js-reveal .about-cols{ opacity:0; transform:translateY(18px); }
.in{
  opacity:1 !important; transform:none !important;
  transition:opacity .7s cubic-bezier(.22,.68,.35,1), transform .7s cubic-bezier(.22,.68,.35,1);
}

/* ---------- responsive ---------- */
@media (max-width:920px){
  .case{ grid-template-columns:minmax(0,1fr); }
  .case-flip .case-media{ order:0; }
  .grid-3{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (max-width:760px){
  body{ font-size:16px; }
  .grid-2{ grid-template-columns:minmax(0,1fr); }
  .grid-3{ grid-template-columns:minmax(0,1fr); }
  .addr{ font-size:12px; padding:4px 10px; }
  .badge{ font-size:12px; }
}
@media (max-width:460px){
  .stats{ grid-template-columns:minmax(0,1fr); }
  .btn{ width:100%; justify-content:center; }
  .dots{ display:none; }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .js-reveal .case,.js-reveal .mini,.js-reveal .slab,.js-reveal .band-head,
  .js-reveal .brick,.js-reveal .rows,.js-reveal .table-wrap,
  .js-reveal .about-big,.js-reveal .about-cols{ opacity:1; transform:none; }
  .frame:hover{ transform:none; }
}

@media print{
  .nav,.skip{ display:none; }
  body{ background:#fff; color:#000; }
  .band-alt{ background:#fff; }
  .case,.mini,.slab,.brick{ break-inside:avoid; }
}

/* ---------- H1: name and role first (SEO audit fix 2) ---------- */
.h1-name{
  display:block; margin:0 0 14px;
  font-family:var(--sans); font-size:clamp(15px,1.6vw,18px); font-weight:500;
  letter-spacing:-.005em; line-height:1.4; color:var(--paper-2);
}

/* ---------- digital marketing ---------- */
.mk-feature{ padding-inline:0; margin-bottom:clamp(44px,6vw,72px); }
.mk-sub{
  font-family:var(--serif); font-weight:400; font-size:clamp(24px,2.6vw,30px);
  letter-spacing:-.012em; margin:0 0 18px;
}

/* keep jumped-to sections clear of the sticky nav (two rows on phones) */
section[id], article[id]{ scroll-margin-top:72px; }
@media (max-width:880px){ section[id], article[id]{ scroll-margin-top:108px; } }

/* ---------- experience ---------- */
.xp{ list-style:none; margin:0; padding:0; border-top:1px solid var(--line); }
.xp-item{
  display:grid; grid-template-columns:260px minmax(0,1fr); gap:6px 40px;
  padding:26px 0; border-bottom:1px solid var(--line-soft);
}
.xp-meta{ grid-row:1 / span 3; display:flex; flex-direction:column; gap:6px; }
.xp-org{ font-size:16px; font-weight:600; letter-spacing:-.01em; }
.xp-when{ font-family:var(--mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--paper-3); }
.xp-role{ font-family:var(--serif); font-weight:400; font-size:clamp(24px,2.6vw,30px); letter-spacing:-.012em; margin:0; line-height:1.15; }
.xp-item > p{ margin:0; color:var(--paper-2); font-size:16px; line-height:1.6; max-width:62ch; }
.xp-item > p.case-links{ margin-top:6px; }
@media (max-width:760px){ .xp-item{ grid-template-columns:minmax(0,1fr); } .xp-meta{ grid-row:auto; flex-direction:row; justify-content:space-between; } }
.xp-where{ font-size:13px; color:var(--paper-3); }

/* ---------- certifications ---------- */
.certs{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 40px; border-top:1px solid var(--line); }
.cert{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:4px 16px; align-items:baseline; padding:18px 0; border-bottom:1px solid var(--line-soft); }
.cert-name{ margin:0; font-size:16px; font-weight:600; letter-spacing:-.01em; }
.cert-org{ margin:0; grid-column:1; font-size:14px; color:var(--paper-3); }
.cert-link{ grid-column:2; grid-row:1 / span 2; align-self:center; font-family:var(--mono); font-size:13px; color:var(--paper); text-decoration:none; border-bottom:1px solid var(--line); padding-bottom:2px; white-space:nowrap; }
.cert-link:hover{ color:var(--live); border-bottom-color:var(--live); }
@media (max-width:760px){ .certs{ grid-template-columns:minmax(0,1fr); } }

/* ---------- compact cards (script adds .is-compact) ---------- */
.slab.is-compact:not(.is-open) .notes,
.slab.is-compact:not(.is-open) .tags{ display:none; }
.slab.is-compact > p:not(.case-links){ margin-bottom:16px; }
.slab.is-compact{ padding-block:clamp(22px,2.4vw,28px); }
.slab.is-compact.is-open .notes{ margin-top:4px; }
.slab .case-links{ align-items:center; }
.more{
  font-family:var(--mono); font-size:13px; color:var(--paper);
  background:none; border:1px solid var(--line); border-radius:2px;
  padding:6px 12px; cursor:pointer;
  transition:border-color .18s ease, color .18s ease;
}
.more:hover{ border-color:var(--paper-2); }
.more[aria-expanded="true"]{ color:var(--paper-2); }
.more:focus-visible{ outline:2px solid var(--live); outline-offset:3px; }
.more-lg{ padding:10px 16px; font-size:14px; }
#cert-list{ margin-top:22px; }
#certifications .band-head{ margin-bottom:22px; }

/* ---------- work filter ---------- */
.filter{
  display:flex; flex-wrap:wrap; align-items:center; gap:12px 18px;
  padding-top:clamp(36px,5vw,56px); padding-bottom:4px;
}
.filter-label{ margin:0; font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--paper-3); }
.filter-chips{ display:flex; flex-wrap:wrap; gap:8px; }
.fchip{
  font-family:var(--mono); font-size:13px; color:var(--paper-2);
  background:none; border:1px solid var(--line); border-radius:980px;
  padding:8px 15px; cursor:pointer; transition:all .18s ease;
}
.fchip:hover{ color:var(--paper); border-color:var(--paper-2); }
.fchip[aria-pressed="true"]{ background:var(--paper); color:var(--ink); border-color:var(--paper); }
.fchip:focus-visible{ outline:2px solid var(--live); outline-offset:3px; }
.filter-count{ margin:0; font-family:var(--mono); font-size:13px; color:var(--live); }
.filter + .band{ padding-top:clamp(36px,5vw,56px); }

/* ---------- nav: current section ---------- */
.nav-links a[aria-current]{ color:var(--paper); box-shadow:inset 0 -1px 0 var(--live); }

/* ---------- back to top ---------- */
.to-top{
  position:fixed; right:18px; bottom:18px; z-index:60;
  width:44px; height:44px; display:grid; place-items:center;
  background:var(--surface-2); color:var(--paper); text-decoration:none;
  border:1px solid var(--line); border-radius:50%; font-size:18px;
  box-shadow:0 10px 24px -10px rgba(0,0,0,.9);
}
.to-top:hover{ border-color:var(--paper-2); }
.slab > p.case-links{ margin-bottom:0; }
#certifications{ padding-block:clamp(44px,6vw,76px); }
#experience{ padding-bottom:clamp(44px,6vw,76px); }