/* ============================================================
   clean.css — type-system + density layer, loaded after style.css
   Sets the Inter heading hierarchy, reference-sized dock and photo,
   and strips the decorative gradients from the earlier direction.
   ============================================================ */

:root{
  --sans:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --serif:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --display:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
}
body{font-family:var(--sans);font-size:16px;line-height:1.5}
/* 952 - 2x28 gutter = 896px of content, matching the reference column exactly */
.wrap{max-width:952px}

/* ---------- boot sequence: live-terminal colouring ----------
   blue = the command being run, green = its success status.
   Same convention a real init log uses ([ok] green, [FAILED] would be red). */
/* flat and fully opaque, no glow — editor syntax colours (One Dark):
   blue #61afef for the command, green #98c379 for its success status. */
.boot-line{color:#61afef;text-shadow:none}                /* command lines — blue   */
.boot-line .ok{color:#98c379;font-weight:500;text-shadow:none}  /* [ok] / [ready] — green */
.boot-bar{background:rgba(97,175,239,.2)}                 /* track — blue           */
.boot-bar i{background:#98c379;box-shadow:none}           /* fill — green           */
.boot-pct{color:#61afef}                                  /* label — blue           */
.boot-pct #bootPct{color:#98c379}                         /* counter — green        */

/* ---------- header ---------- */
/* type scale + spacing measured off the reference: h1 24/700/32, tag 14/20 at 6px,
   icons 32sq r6 at 6px, section gap 32, h2 20/700/28, body 14/20 */
#hero.head{min-height:0;padding:70px 28px 0;display:block;text-align:left;overflow:visible}
.head-row{display:flex;justify-content:space-between;align-items:flex-start;gap:44px}
.head-copy{flex:1;min-width:0}
.head h1{font-size:24px;font-weight:700;letter-spacing:-.02em;line-height:32px}
/* balance keeps the two lines even instead of orphaning the last word */
.head-tag{margin-top:6px;font-family:var(--mono);font-size:14px;line-height:20px;color:var(--muted);text-wrap:balance}
/* bare icons — no boxes, no fills */
.head-links{margin-top:10px;display:flex;flex-wrap:wrap;align-items:center;gap:16px}
.head-links a{display:inline-flex;align-items:center;justify-content:center;gap:7px;
  border:0;background:none;padding:0;color:var(--ink);opacity:.78;transition:opacity .2s,transform .2s}
.head-links a.wide{font-family:var(--mono);font-size:13px;font-weight:500}
.head-links a:hover{opacity:1;transform:translateY(-1px)}
.head-links svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.head-links svg.fill{fill:currentColor;stroke:none}

/* ---------- photo: reference size, bordered + glossy, no paperclip ---------- */
.head-photo{position:relative;flex:0 0 auto;line-height:0}
.head-photo img{width:128px;height:128px;object-fit:cover;object-position:center 30%;border-radius:50%;
  border:1px solid rgba(17,19,21,.10);
  box-shadow:0 8px 22px rgba(17,19,21,.13),0 1px 2px rgba(17,19,21,.07)}
/* the gloss sheen */
.head-photo::after{content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;
  background:linear-gradient(158deg,rgba(255,255,255,.38),rgba(255,255,255,.06) 40%,rgba(255,255,255,0) 62%)}

/* ---------- sections + heading hierarchy ---------- */
.sec{padding-top:32px}   /* padding-top only — .wrap owns the 28px side gutters */
#about{padding-top:26px} /* the photo is the tallest header element; 26px below it, as on the reference */
.sec h2{font-family:var(--sans);font-size:20px;font-weight:700;letter-spacing:-.01em;line-height:28px}
.sec>h2+.prose{margin-top:12px}
.sec>h2+.edu{margin-top:28px}
.sec>h2+.filters,.sec>h2+.proj-grid,.sec>h2+.tiles{margin-top:32px}
.sec>h2+.xp{margin-top:36px}

.prose{font-family:var(--mono);font-size:14px;line-height:20px;color:var(--muted)}
.prose p+p{margin-top:12px}
.prose b{color:var(--ink);font-weight:500}

/* ---------- drop the decorative gradients + 3D ---------- */
.card::before,.tile::before,.clink::before,.skcol::before,.pager a::before,.btn::before,
.card::after,.tile::after,.tl-item::before,.tl-item::after,.skill-tile::before{display:none}

/* ---------- project cards: reference format (3-up, title + copy + tags) ---------- */
.proj-grid{grid-template-columns:repeat(3,1fr);gap:14px}
.card{border-radius:8px;padding:16px 18px;transform:none !important;box-shadow:none;
  background:rgba(255,255,255,.55);border:1px solid var(--line);backdrop-filter:none;
  display:flex;flex-direction:column}
.card:hover{background:#fff;border-color:rgba(17,19,21,.22)}
.card .ptitle{font-family:var(--sans);font-size:16px;font-weight:600;line-height:24px;letter-spacing:-.01em;
  display:flex;align-items:center;gap:7px}
.card .live-dot{width:6px;height:6px;border-radius:50%;background:#22c55e;flex:0 0 auto}
.card .pdesc{margin-top:8px;font-family:var(--mono);font-size:12.5px;line-height:1.65;min-height:0;color:var(--muted)}
.card .pstack{margin-top:auto;padding-top:14px;gap:6px}
@media(max-width:960px){.proj-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:660px){.proj-grid{grid-template-columns:1fr}}
.proj-grid.collapsed .card:nth-child(n+7){display:none}

/* ---------- tags ---------- */
.tag,.card .pstack b,.skill-tile{font-family:var(--mono);font-size:10.5px;text-transform:none;letter-spacing:0;
  border-radius:6px;padding:3px 9px;background:rgba(17,19,21,.045);border:1px solid transparent;color:var(--muted)}
.skill-tile{font-size:12px;padding:6px 11px;min-height:0;box-shadow:none}
.skill-tile:hover{transform:none;background:rgba(17,19,21,.085);border-color:transparent;color:var(--ink)}
/* .skill-tile sets display, which would otherwise beat the [hidden] default — filters need this */
.skill-tile[hidden]{display:none}
.skill-list{gap:7px}
.filters button{border-radius:6px;text-transform:none;font-family:var(--sans);font-size:12.5px;font-weight:500;letter-spacing:0;padding:7px 12px}
.filters .n{font-family:var(--mono);font-size:10.5px}
.skill-count{font-size:11.5px}

/* ---------- circular org marks ---------- */
.tl-logo{width:46px;height:46px;border-radius:50%;overflow:hidden;flex:0 0 auto;
  border:1px solid var(--line);background:#fff;box-shadow:0 1px 3px rgba(17,19,21,.09)}
.tl-logo img{padding:0;object-fit:cover;border-radius:50%}
.tl-logo .ini{font-size:14px}

/* ---------- experience: rail + cards ---------- */
.xp{margin-top:20px}
.xp-item{position:relative;display:grid;grid-template-columns:46px 1fr;gap:18px;align-items:start;padding-bottom:14px}

/* the vertical rail between the logos, as it was before the curve experiment */
.xp{position:relative}
.xp-item:not(:last-child)::after{content:"";position:absolute;left:23px;top:52px;bottom:0;
  width:1px;background:var(--line)}
.xp-card{position:relative;border:1px solid var(--line);border-radius:9px;padding:16px 18px;
  background:rgba(255,255,255,.62);transition:background .25s,border-color .25s;
  transform-origin:left center;will-change:transform}
.xp-card:hover{background:#fff}
.tl-logo{transform-origin:center;will-change:transform}

/* company name is the link — inherits colour, only reveals itself on hover */
.xp-org a{color:inherit;text-decoration:none}
.xp-org a:hover{text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px}
.xp-row{display:flex;justify-content:space-between;align-items:baseline;gap:14px;flex-wrap:wrap}
.xp-row+.xp-row{margin-top:5px}
.xp-org{font-family:var(--sans);font-size:16px;font-weight:600;line-height:24px;letter-spacing:-.01em;display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.xp-date{font-family:var(--sans);font-size:13px;color:var(--muted);white-space:nowrap}
.xp-role{font-family:var(--mono);font-size:13px;color:var(--ink)}
.xp-card .badge{color:var(--ink)}
.xp-meta{display:flex;gap:6px;flex-wrap:wrap}
.xp-desc{margin-top:10px;font-family:var(--sans);font-size:13.5px;line-height:1.6;color:var(--muted)}
.xp-tags{margin-top:12px;display:flex;flex-wrap:wrap;gap:6px}
.chip{font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.01em;
  color:#5b4bb7;background:rgba(124,101,224,.11);border-radius:6px;padding:3px 8px}

/* current role: gradient edge + jump button, like the reference */
.xp-card.featured{border-color:transparent;
  background-image:linear-gradient(#fff,#fff),linear-gradient(100deg,#a78bfa,#e9a5e0);
  background-origin:border-box;background-clip:padding-box,border-box}
.xp.collapsed .xp-item:nth-child(n+4){display:none}

/* ---------- tiles ---------- */
.tiles{grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.tile{border-radius:8px;padding:18px;box-shadow:none;background:rgba(255,255,255,.55);
  border:1px solid var(--line);backdrop-filter:none}
.tile:hover{transform:none;background:#fff;border-color:rgba(17,19,21,.22)}
.tile-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.tile .big{font-family:var(--sans);font-size:1.35rem;font-weight:700;letter-spacing:-.02em}
.tile .h{font-family:var(--sans);font-size:16px;font-weight:600;margin-top:12px;line-height:24px}
.tile .d{margin-top:7px;font-size:12.5px;line-height:1.6}

/* ---------- education ---------- */
.edu{border-radius:8px;padding:20px;gap:18px;box-shadow:none;background:rgba(255,255,255,.55)}
.tl-logo.lg{width:46px;height:46px;border-radius:50%;margin-bottom:0}
.edu-name{font-family:var(--sans);font-size:16px;font-weight:600;line-height:24px}
.edu-when{font-family:var(--mono);font-size:14px;color:var(--ink)}
.edu-degree{margin-top:6px;font-size:13px}

/* ---------- current-loop note + terminal ---------- */
.signal-note{position:static;width:auto;max-width:830px;margin-top:20px;border-radius:8px;padding:14px 16px;
  box-shadow:none;background:rgba(255,255,255,.55)}
.signal-note span{font-size:9.5px}
.signal-note b{margin-top:6px;font-family:var(--mono);font-size:13px;font-weight:500;line-height:1.6}
.term{max-width:830px;margin-top:22px;border-radius:10px;box-shadow:0 18px 44px rgba(28,30,26,.14);backdrop-filter:none}
.term .body{min-height:0;padding:18px;font-size:12.5px;line-height:1.8}

/* ---------- contact ---------- */
.contact-links{grid-template-columns:repeat(3,1fr);gap:12px;max-width:830px}
.clink{border-radius:8px;padding:16px;min-height:0;gap:6px;box-shadow:none;
  background:rgba(255,255,255,.55);backdrop-filter:none}
.clink:hover{transform:none;background:#fff;border-color:rgba(17,19,21,.22)}
.clink .k{font-size:10px}
.clink .v{font-family:var(--mono);font-size:13px;font-weight:400;margin-top:4px}
.clink .ar{margin-top:6px;font-size:1rem}
.btn{font-family:var(--sans);font-size:13px;font-weight:500;letter-spacing:0;text-transform:none;
  padding:10px 18px;border-radius:8px;box-shadow:none;background:#fff;backdrop-filter:none}
.btn:hover{background:var(--void-2)}
.hero-cta{margin-top:22px;gap:10px}

/* show-more: plain text link, like the reference */
.more-wrap{margin-top:22px}
.more-wrap.left{justify-content:flex-start;margin-top:16px}
.more-btn i{font-style:normal}
.more-btn{font-family:var(--sans);font-size:13px;font-weight:500;letter-spacing:0;text-transform:none;
  border:0;background:transparent;color:var(--muted);padding:8px 12px}
.more-btn:hover{background:transparent;color:var(--ink);border:0}

/* ---------- dock: matched to the reference ---------- */
/* frosted glass — genuinely translucent, page blurs through it */
.dock{bottom:16px;gap:4px;padding:8px 10px;border:1px solid rgba(255,255,255,.5);
  background:rgba(255,255,255,.1);
  backdrop-filter:blur(34px) saturate(2.3);-webkit-backdrop-filter:blur(34px) saturate(2.3);
  box-shadow:0 14px 40px rgba(17,19,21,.13),0 2px 8px rgba(17,19,21,.05),
    inset 0 1px 1px rgba(255,255,255,.9),inset 0 -1px 1px rgba(255,255,255,.35)}
.dock a,.dock button{display:inline-flex;align-items:center;gap:8px;font-family:var(--sans);
  font-size:16px;font-weight:400;line-height:1;letter-spacing:0;text-transform:none;
  color:#030712;padding:9px 12px}
.dock svg{width:20px;height:20px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.dock a:hover,.dock button:hover{background:rgba(17,19,21,.055)}
.dock a.active{background:rgba(17,19,21,.075)}
/* the menu item reads like every other item — no dark pill */
.dock .cmd{background:transparent;color:#030712;font-family:var(--sans);font-size:16px;font-weight:400;padding:9px 12px}
.dock .cmd .gl{font-size:17px;line-height:1;width:20px;text-align:center}

.cmd-panel{border-radius:10px}
.cmd-panel input{font-family:var(--sans);font-size:14px}
.cmd-results a,.cmd-results button{border-radius:7px;font-family:var(--sans);font-size:13px}
.cmd-results a span+span{font-family:var(--mono);font-size:11px;color:var(--dim)}

/* needs footer.wrap — a bare `footer` selector loses to .wrap's padding shorthand */
footer.wrap{margin-top:62px;font-family:var(--mono);font-size:11px;letter-spacing:0;
  padding:30px 28px 104px;position:relative;border-top:0}
/* divider inset to the gutters so it lines up with the 896px column, not the padding box */
footer.wrap::before{content:"";position:absolute;left:28px;right:28px;top:0;height:1px;background:var(--line)}

@media(max-width:760px){
  #hero.head{padding-top:64px}
  .head-row{flex-direction:column;gap:26px}
  .head-photo .paper-card{width:168px}
  .contact-links{grid-template-columns:1fr}
  .sec{padding-top:44px}
  .xp-item{grid-template-columns:38px 1fr;gap:12px}
  .tl-logo{width:38px;height:38px}
  .xp-date{font-size:12px}
}