/* ================================================================
   AnabhiDev-LAB — AnabhiDev Engineering Lab
   HTML · CSS · Vanilla JS · Cloudflare Pages
   Development · Anabhi Dev
   Version   : 1.4
   Generated : 5 September 2026, 14:05:00
   ----------------------------------------------------------------
   Shared components: header, footer, sections, buttons, badges,
   cards, states. Visual grammar mirrors anabhidev.com v2.
   ================================================================ */

/* ══════════════════ HEADER / NAV ══════════════════ */
.nav-outer{
  position:fixed;top:0;left:0;right:0;z-index:200;
  background:rgba(8,17,29,.92);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(232,220,200,.14);
  --ink:#F4EFE5; --muted:rgba(232,220,200,.66); --accent:var(--gold);
  --accent-ink:#08111D; --edge:rgba(201,169,106,.55); --line:rgba(232,220,200,.14);
  --soft:rgba(201,169,106,.10);
  color:var(--ink);
}
main{display:block;margin-top:var(--header-h)}

.nav{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:6px 0}
.nav-logo{height:70px;width:auto;display:block}
/* flex-shrink:0 keeps the logo at its true size instead of being squeezed by
   the nav links. The "Engineering Lab" label that used to sit here was removed
   in v1.3: it wrapped onto two lines and collided with the menu. */
.nav-brand{display:inline-flex;align-items:center;flex-shrink:0;text-decoration:none;background:transparent}

.nav-links{display:flex;align-items:center;gap:2px}
.nav-links a{
  font-family:'Bricolage Grotesque',sans-serif;font-weight:600;font-size:14px;
  letter-spacing:.09em;text-transform:uppercase;text-decoration:none;line-height:1;
  color:var(--ink);padding:9px 14px;border-radius:var(--r-sm);
  transition:opacity .2s var(--ease),color .2s var(--ease);
  display:inline-flex;align-items:center;
}
.nav-links a:hover{opacity:.72}
.nav-links a.on{color:var(--accent);opacity:1}

.nav-right{display:flex;align-items:center;gap:12px}
.lang{display:flex;border:1px solid var(--edge);border-radius:var(--r-sm);overflow:hidden}
.lang button{
  font-family:'Bricolage Grotesque',sans-serif;font-weight:600;font-size:11px;letter-spacing:.08em;
  padding:7px 12px;background:transparent;color:var(--muted);border:0;cursor:pointer;
  min-height:44px;  /* frequently used control — keep it thumb-sized */
  transition:background .2s var(--ease),color .2s var(--ease);
}
.lang button[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink)}

.nav-cta{
  font-family:'Bricolage Grotesque',sans-serif;font-weight:600;font-size:14px;
  color:var(--accent-ink);background:var(--accent);padding:12px 22px;border-radius:var(--r-md);
  text-decoration:none;white-space:nowrap;transition:opacity .2s var(--ease);
}
.nav-cta:hover{opacity:.86}

/* Hamburger sits on the RIGHT, brand on the LEFT (SOP kategori 14 —
   opposite sides so an open drawer can never cover the brand). */
.burger{
  display:none;flex-direction:column;justify-content:center;align-items:center;gap:5px;
  background:none;border:0;cursor:pointer;width:44px;height:44px;border-radius:var(--r-sm);
}
.burger span{display:block;width:22px;height:1.5px;background:var(--ink);border-radius:2px;transition:transform .3s var(--ease),opacity .2s}
.burger[aria-expanded="true"] span:nth-child(1){transform:rotate(45deg) translate(4.5px,4.5px)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:rotate(-45deg) translate(4.5px,-4.5px)}

.mob{
  display:none;flex-direction:column;border-top:1px solid var(--line);padding:8px 0 18px;
  max-height:calc(100vh - var(--header-h));   /* fallback */
  max-height:calc(100dvh - var(--header-h));  /* excludes the collapsing mobile address bar */
  overflow-y:auto;
}
.mob.open{display:flex}
.mob a{
  font-family:'Bricolage Grotesque',sans-serif;font-weight:600;font-size:15px;color:var(--muted);
  text-decoration:none;padding:13px 0;border-bottom:1px solid var(--line);
}
.mob a:last-child{border-bottom:0}
.mob a.on{color:var(--accent)}

/* Collapses at 1100px rather than the main site's 980px: the Lab carries
   seven nav items instead of six, which overflows between 980–1100px. */
@media(max-width:1100px){
  .nav-links{display:none}
  .burger{display:flex}
  .nav-logo{height:68px}
  .nav-cta{display:none}
  .lang button{padding:6px 8px;font-size:10px}
}

/* ══════════════════ SECTION SHELL ══════════════════ */
.sec{padding:clamp(58px,7.5vw,104px) 0;scroll-margin-top:calc(var(--header-h) + 16px)}
.sec + .sec{border-top:1px solid var(--line)}
section[id]{scroll-margin-top:calc(var(--header-h) + 16px)}

.lbl{
  font-family:'Bricolage Grotesque',sans-serif;font-weight:600;font-size:11px;
  letter-spacing:.20em;text-transform:uppercase;color:var(--accent);
  display:inline-flex;align-items:center;gap:11px;margin-bottom:16px;
}
.lbl::before{content:'';width:22px;height:1px;background:var(--accent);flex-shrink:0}

.eyebrow{
  display:inline-flex;align-items:center;gap:12px;
  font-family:'Bricolage Grotesque',sans-serif;font-weight:600;font-size:11px;
  letter-spacing:.20em;text-transform:uppercase;color:var(--accent);margin-bottom:22px;
}
.eyebrow::before{content:'';width:30px;height:1px;background:var(--accent);flex-shrink:0}

.sec-p{color:var(--muted);max-width:540px;font-size:16px;margin-bottom:44px}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:32px;flex-wrap:wrap}
.sec-head .sec-p{margin-bottom:0}

.subsec{margin-top:clamp(48px,6vw,72px);padding-top:clamp(40px,5vw,56px);border-top:1px solid var(--line)}

/* ══════════════════ BUTTONS & LINKS ══════════════════ */
.btn-p,.btn-g{
  font-family:'Bricolage Grotesque',sans-serif;font-weight:600;font-size:14px;
  padding:13px 26px;border-radius:var(--r-md);text-decoration:none;
  display:inline-flex;align-items:center;gap:8px;cursor:pointer;border:1px solid transparent;
  transition:opacity .2s var(--ease),background .2s var(--ease),border-color .2s var(--ease);
}
.btn-p{background:var(--accent);color:var(--accent-ink)}
.btn-p:hover{opacity:.86}
.btn-g{border-color:var(--edge);color:var(--ink);background:transparent}
.btn-g:hover{background:var(--soft)}
.btns{display:flex;gap:12px;flex-wrap:wrap}

.link-a{
  font-family:'Bricolage Grotesque',sans-serif;font-weight:600;font-size:13px;color:var(--accent);
  text-decoration:none;border-bottom:1px solid var(--accent);padding-bottom:2px;display:inline-block;
}

/* ══════════════════ BADGES, CHIPS, DOTS ══════════════════ */
.tag{
  display:inline-block;font-family:'Bricolage Grotesque',sans-serif;font-weight:600;font-size:10px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--accent);
  border:1px solid var(--edge);padding:5px 11px;border-radius:var(--r-sm);
}
.chip{font-size:11.5px;letter-spacing:.04em;color:var(--muted);border:1px solid var(--line);padding:5px 10px;border-radius:var(--r-sm)}
/* A chip is a chip whether or not it links anywhere. tokens.css sets only
   `a{color:inherit}`, so without this the technology chips on the detail page
   render underlined while the identical-looking span chips beside them do not.
   The border and hover colour carry the affordance instead. */
a.chip{text-decoration:none;transition:border-color .2s var(--ease),color .2s var(--ease)}
a.chip:hover,a.chip:focus-visible{border-color:var(--edge);color:var(--ink)}
.chips{display:flex;flex-wrap:wrap;gap:7px;align-items:center}

.dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;display:inline-block}
.dot.live{background:var(--live)}
.dot.wip{background:var(--wip)}
.dot.idle{background:var(--idle)}

.status{display:inline-flex;align-items:center;gap:8px;font-size:12px;color:var(--muted);white-space:nowrap}
.pnum{
  font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:12px;
  letter-spacing:.08em;color:var(--accent);opacity:.9;
}

/* ══════════════════ METRIC / STATS ══════════════════ */
.stats{display:flex;gap:clamp(22px,4vw,46px);flex-wrap:wrap;margin-bottom:32px}
.stat{padding-top:13px;border-top:1px solid var(--edge);min-width:92px}
.stat-n{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:clamp(30px,3.4vw,42px);line-height:1;letter-spacing:-.02em}
.stat-l{font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);margin-top:9px}

/* 6 metrics on Insights. Only column counts that divide 6 exactly are used
   (3 / 2 / 1), so the last row is never left with an empty slot. */
.metric-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media(max-width:1000px){.metric-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.metric-grid{grid-template-columns:1fr}}
.metric{border:1px solid var(--line);border-radius:var(--r-md);padding:20px;background:var(--surface)}
.metric-n{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:clamp(26px,3vw,38px);line-height:1;letter-spacing:-.02em}
.metric-l{font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);margin-top:10px}
.metric-note{font-size:13px;color:var(--muted);margin-top:8px}

/* ══════════════════ PROJECT CARD ══════════════════ */
/* Registry results. The length changes with every filter, so a partial last row
   cannot be designed away here without inventing filler cards. Capping the
   columns keeps the remainder small and the cards readable, instead of
   scattering into seven thin columns on an ultrawide screen. */
.project-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}

/* The Home page grids have a KNOWN item count, so their columns are chosen to
   divide it exactly and every row stays full at every breakpoint.
   --4 = the 4 featured projects.   --3 = the 6 latest entries. */
.project-grid--4{grid-template-columns:repeat(4,1fr)}
.project-grid--3{grid-template-columns:repeat(3,1fr)}

@media(max-width:1280px){
  .project-grid{grid-template-columns:repeat(3,1fr)}
  .project-grid--4{grid-template-columns:repeat(2,1fr)}  /* 4 -> 2 x 2 */
  .project-grid--3{grid-template-columns:repeat(3,1fr)}  /* 6 -> 2 x 3 */
}
@media(max-width:1000px){
  .project-grid{grid-template-columns:repeat(2,1fr)}
  .project-grid--4{grid-template-columns:repeat(2,1fr)}  /* 4 -> 2 x 2 */
  .project-grid--3{grid-template-columns:repeat(2,1fr)}  /* 6 -> 3 x 2 */
}
@media(max-width:620px){
  .project-grid,.project-grid--4,.project-grid--3{grid-template-columns:1fr}
}

.pcard{
  display:flex;flex-direction:column;gap:12px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(18px,2.2vw,24px);text-decoration:none;color:inherit;
  transition:border-color .25s var(--ease),transform .25s var(--ease);
}
.pcard:hover,.pcard:focus-visible{border-color:var(--accent);transform:translateY(-3px)}
.pcard-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.pcard h3{font-size:19px;line-height:1.25}
.pcard-cat{font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
.pcard-desc{font-size:14.5px;color:var(--muted);line-height:1.7}
/* Deliberately NOT italic: only the roman Inter axis is loaded, so an italic
   here would be a browser-synthesised oblique. Opacity carries the same
   "placeholder text" meaning without the extra font download. */
.pcard-desc.is-empty{opacity:.7}
.pcard-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:auto;padding-top:12px;border-top:1px solid var(--line)}
.pcard-star{color:var(--accent);font-size:12px;letter-spacing:.1em;text-transform:uppercase;font-family:'Bricolage Grotesque',sans-serif;font-weight:600}

/* Index row — compact list variant, same data, no hover dependency */
.idx{border-top:1px solid var(--line)}
.idx-row{
  display:grid;grid-template-columns:auto 1fr auto auto;gap:16px;align-items:center;
  padding:15px 2px;border-bottom:1px solid var(--line);text-decoration:none;color:inherit;
  transition:padding-left .25s var(--ease),border-color .2s var(--ease);
}
.idx-row:hover,.idx-row:focus-visible{padding-left:10px;border-bottom-color:var(--accent)}
.idx-name{font-family:'Bricolage Grotesque',sans-serif;font-weight:600;font-size:16px;letter-spacing:-.01em}
.idx-cat{font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
@media(max-width:640px){ .idx-row{grid-template-columns:auto 1fr auto} .idx-cat{display:none} }

/* ══════════════════ STATES ══════════════════ */
.state{
  border:1px dashed var(--line);border-radius:var(--r-lg);
  padding:clamp(28px,5vw,52px);text-align:center;color:var(--muted);
}
/* h1 is included for the <noscript> panel on project.html: with scripting off
   that page has no other heading, so its fallback must start the outline. */
.state h1,.state h3{font-size:19px;line-height:1.35;letter-spacing:-.01em;color:var(--ink);margin-bottom:8px}
.state p{font-size:15px;max-width:46ch;margin:0 auto}
.state .btns{justify-content:center;margin-top:20px}
.state-error{border-style:solid;border-color:var(--edge)}

.skeleton{border:1px solid var(--line);border-radius:var(--r-lg);padding:24px;background:var(--surface)}
.skeleton span{display:block;height:11px;border-radius:4px;background:var(--soft);margin-bottom:12px}
.skeleton span:nth-child(1){width:34%}
.skeleton span:nth-child(2){width:82%;height:17px}
.skeleton span:nth-child(3){width:64%}
.skeleton span:last-child{margin-bottom:0;width:46%}

/* ══════════════════ COMPLETENESS METER ══════════════════ */
.meter{margin-top:14px}
.meter-track{height:6px;border-radius:3px;background:var(--soft);overflow:hidden}
.meter-fill{height:100%;background:var(--accent);border-radius:3px;transition:width .6s var(--ease)}
.meter-l{display:flex;justify-content:space-between;gap:12px;font-size:12px;color:var(--muted);margin-top:9px}

/* ══════════════════ FOOTER ══════════════════ */
.foot{
  background:#060C15;border-top:1px solid rgba(232,220,200,.14);padding:clamp(48px,6vw,72px) 0 32px;
  --ink:#F4EFE5; --muted:rgba(232,220,200,.66); --accent:var(--gold);
  --accent-ink:#08111D; --edge:rgba(201,169,106,.55); --line:rgba(232,220,200,.14);
  color:var(--ink);
}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:clamp(28px,4vw,56px);margin-bottom:48px}
@media(max-width:900px){.foot-grid{grid-template-columns:1fr 1fr;gap:36px}}
@media(max-width:520px){.foot-grid{grid-template-columns:1fr}}
.foot-mark{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:26px;letter-spacing:-.02em;margin-bottom:8px}
.foot-mark em{font-style:normal;color:var(--accent)}
.foot-tag{font-size:14px;color:var(--muted);margin-bottom:14px}
.foot-loc{font-size:12.5px;letter-spacing:.03em;color:var(--muted);margin-bottom:22px}
.foot h3{
  font-family:'Bricolage Grotesque',sans-serif;font-weight:600;font-size:11px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:18px;
}
.foot li{margin-bottom:11px}
.foot li a{font-size:14px;color:var(--muted);text-decoration:none;transition:color .2s var(--ease)}
.foot li a:hover{color:var(--ink)}
.foot-bot{
  border-top:1px solid var(--line);padding-top:26px;display:flex;flex-direction:column;
  align-items:center;gap:6px;text-align:center;font-size:13px;color:var(--muted);
}
.foot-bot em{font-style:normal;color:var(--accent)}
.socials{display:flex;gap:9px}
.soc{
  width:44px;height:44px;border:1px solid var(--edge);border-radius:var(--r-md);
  display:flex;align-items:center;justify-content:center;color:var(--muted);
  text-decoration:none;transition:color .2s var(--ease),background .2s var(--ease),border-color .2s var(--ease);
}
.soc:hover{color:var(--accent-ink);background:var(--accent);border-color:var(--accent)}
/* ══════════════════ GLOBAL COMMAND PALETTE ══════════════════ */
.nav-search-btn{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(232,220,200,.08);border:1px solid rgba(232,220,200,.16);
  padding:7px 12px;border-radius:var(--r-sm);color:var(--ink);cursor:pointer;
  font-family:'Bricolage Grotesque',sans-serif;font-weight:600;font-size:13px;
  line-height:1;min-height:44px;transition:all .2s var(--ease);
}
.nav-search-btn:hover{background:rgba(201,169,106,.15);border-color:var(--edge);color:var(--accent)}
.nav-search-btn svg{width:15px;height:15px;opacity:.85;flex-shrink:0}
.nav-search-kbd{
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;
  font-size:10px;padding:2px 5px;border-radius:4px;
  background:rgba(232,220,200,.12);color:var(--muted);border:1px solid rgba(232,220,200,.18);
}
@media(max-width:640px){
  .nav-search-text,.nav-search-kbd{display:none}
  .nav-search-btn{padding:8px;min-height:44px;min-width:44px;justify-content:center}
}

.lab-palette-backdrop{
  position:fixed;inset:0;z-index:9999;
  background:rgba(4,9,16,.78);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  display:flex;justify-content:center;align-items:flex-start;
  padding:clamp(20px,10vh,80px) 16px 20px;opacity:0;pointer-events:none;
  transition:opacity .2s var(--ease);
}
.lab-palette-backdrop.is-open{opacity:1;pointer-events:auto}
.lab-palette-dialog{
  width:min(680px,100%);background:#0B1626;border:1px solid rgba(201,169,106,.32);
  border-radius:var(--r-lg);box-shadow:0 24px 60px rgba(0,0,0,.7),0 0 0 1px rgba(201,169,106,.15);
  overflow:hidden;display:flex;flex-direction:column;max-height:80vh;
  transform:translateY(-12px) scale(.98);transition:transform .2s var(--ease);
}
.lab-palette-backdrop.is-open .lab-palette-dialog{transform:translateY(0) scale(1)}
.lab-palette-header{
  display:flex;align-items:center;gap:12px;padding:16px 20px;
  border-bottom:1px solid rgba(232,220,200,.12);background:rgba(8,17,29,.85);
}
.lab-palette-header svg{width:18px;height:18px;color:var(--gold);flex-shrink:0}
.lab-palette-input{
  flex:1;background:none;border:none;outline:none;font-size:16px;
  font-family:'Bricolage Grotesque',sans-serif;color:var(--ink);width:100%;
}
.lab-palette-input::placeholder{color:rgba(232,220,200,.42)}
.lab-palette-esc{
  font-family:ui-monospace,SFMono-Regular,monospace;font-size:11px;
  padding:3px 7px;border-radius:4px;background:rgba(232,220,200,.1);
  color:var(--muted);border:1px solid rgba(232,220,200,.14);cursor:pointer;
}
.lab-palette-results{
  overflow-y:auto;max-height:54vh;padding:8px;display:flex;flex-direction:column;gap:4px;
}
.lab-palette-item{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px 14px;border-radius:var(--r-md);text-decoration:none;
  color:var(--ink);transition:background .15s,transform .15s;border:1px solid transparent;
}
.lab-palette-item:hover,.lab-palette-item.is-active{
  background:rgba(201,169,106,.12);border-color:rgba(201,169,106,.28);
}
.lab-palette-item-left{display:flex;flex-direction:column;gap:3px;min-width:0}
.lab-palette-item-num{font-size:11px;font-family:'Bricolage Grotesque',sans-serif;font-weight:600;letter-spacing:.08em;color:var(--accent)}
.lab-palette-item-title{font-size:14.5px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lab-palette-item-desc{font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lab-palette-item-right{display:flex;align-items:center;gap:8px;flex-shrink:0}
.lab-palette-footer{
  display:flex;align-items:center;justify-content:space-between;padding:10px 18px;
  border-top:1px solid rgba(232,220,200,.1);background:rgba(6,12,21,.9);
  font-size:11.5px;color:var(--muted);
}
.lab-palette-keys{display:flex;align-items:center;gap:12px}
.lab-palette-empty{padding:36px 20px;text-align:center;color:var(--muted);font-size:14px}

/* ══════════════════ PRINT ══════════════════ */
@media print{
  .nav-outer,.mob,.burger,.lang,.skip,.filters,.btns,.socials{display:none !important}
  main{margin-top:0}
  .band-dark,.band-light,.foot{background:#fff !important;color:#000 !important}
  .sec{padding:18px 0;break-inside:avoid}
  .pcard,.metric,.idx-row{break-inside:avoid}
  a{text-decoration:none;color:#000 !important}
}