/*
 * Filename: css/style.css
 * Project: cabibbo.com v2
 * Version: 1.01
 * Description: Dark "amber phosphor" design system — layered blue-black surfaces,
 *              amber terminal accent, Sora / IBM Plex Sans / IBM Plex Mono.
 *              Light theme via html[data-theme="light"].
 * Maintainer: Cloud Box 9 Inc.
 * Last Modified Date: 2026-07-12
 *
 * -----------------------------------------------------------------------------
 * Revision History:
 * -----------------------------------------------------------------------------
 * v1.01 (2026-07-13)
 *   • .stats__grid: fixed 4 columns → auto-fit so the band fills evenly with any
 *     number of stats (band reduced to 2 stats)
 * v1.0 (2026-07-12)
 *   • Initial v2 build — tokens, hero terminal, stats band, timeline, cards,
 *     theme toggle, scroll-reveal states, reduced-motion support
 * -----------------------------------------------------------------------------
 */

/* ---- Tokens ---- */
:root{
  --coal:#0A0F1A;          /* page base */
  --deepslate:#111927;     /* raised surface */
  --slate2:#182234;        /* hover / inset surface */
  --line:#243044;          /* borders */
  --fog:#E9EEF5;           /* headings */
  --steel:#93A2B8;         /* body text */
  --steel-dim:#66738a;     /* muted */
  --phosphor:#F2A33C;      /* amber accent */
  --phosphor-hi:#FFC069;   /* amber hover */
  --phosphor-dim:rgba(242,163,60,.14);
  --ok:#5fbf7a;
  --err:#e0685f;

  --font-display:'Sora',-apple-system,sans-serif;
  --font-body:'IBM Plex Sans',-apple-system,"Segoe UI",sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  --radius:10px;
  --shadow:0 10px 30px rgba(2,6,14,.45);
  --maxw:1120px;
}

html[data-theme="light"]{
  --coal:#F6F3EC;
  --deepslate:#FFFFFF;
  --slate2:#EFEAE0;
  --line:#DCD5C6;
  --fog:#1C2534;
  --steel:#4C5A6E;
  --steel-dim:#8b93a1;
  --phosphor:#A66B12;
  --phosphor-hi:#8a5406;
  --phosphor-dim:rgba(166,107,18,.12);
  --shadow:0 10px 30px rgba(28,37,52,.10);
}

/* ---- Base ---- */
*{box-sizing:border-box;}
html{scroll-behavior:smooth;scroll-padding-top:76px;}
body{
  margin:0;color:var(--steel);background:var(--coal);
  font-family:var(--font-body);font-size:16.5px;line-height:1.65;
  -webkit-font-smoothing:antialiased;
  transition:background-color .25s ease,color .25s ease;
}
h1,h2,h3{font-family:var(--font-display);color:var(--fog);}
a{color:var(--phosphor);text-decoration:none;}
a:hover{color:var(--phosphor-hi);text-decoration:underline;}
:focus-visible{outline:2px solid var(--phosphor);outline-offset:2px;border-radius:3px;}
.container{max-width:var(--maxw);margin:0 auto;padding:0 24px;}
.center{text-align:center;margin-top:30px;}

/* ---- Buttons ---- */
.btn{
  display:inline-block;background:var(--phosphor);color:#0A0F1A;border:1.5px solid var(--phosphor);
  padding:.68em 1.5em;border-radius:8px;font-weight:600;font-size:.95rem;
  font-family:var(--font-display);letter-spacing:.2px;
  cursor:pointer;transition:transform .16s ease,box-shadow .16s ease,background .16s ease;text-decoration:none;
}
.btn:hover{background:var(--phosphor-hi);border-color:var(--phosphor-hi);color:#0A0F1A;text-decoration:none;transform:translateY(-2px);box-shadow:0 8px 22px var(--phosphor-dim);}
.btn--ghost{background:transparent;color:var(--fog);border-color:var(--line);}
.btn--ghost:hover{background:var(--slate2);border-color:var(--steel-dim);color:var(--fog);box-shadow:none;}
.btn--sm{padding:.42em 1em;font-size:.85rem;}

/* ---- Nav ---- */
.nav{
  position:sticky;top:0;z-index:50;
  background:color-mix(in srgb,var(--coal) 86%,transparent);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.nav__inner{display:flex;align-items:center;justify-content:space-between;height:66px;}
.nav__brand{font-family:var(--font-mono);font-weight:500;font-size:1.02rem;color:var(--fog);letter-spacing:.2px;}
.nav__brand:hover{text-decoration:none;color:var(--fog);}
.nav__tilde{color:var(--phosphor);}
.nav__links{display:flex;align-items:center;gap:24px;}
.nav__links a{color:var(--steel);font-weight:500;font-size:.93rem;}
.nav__links a:hover{color:var(--fog);text-decoration:none;}
.nav__links a.btn{color:#0A0F1A;}
.nav__toggle{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:8px;}
.nav__toggle span{width:24px;height:2px;background:var(--fog);transition:.2s;}

/* Theme toggle */
.themeToggle{
  background:none;border:1px solid var(--line);border-radius:999px;
  width:36px;height:36px;cursor:pointer;color:var(--steel);
  font-size:1rem;line-height:1;display:inline-flex;align-items:center;justify-content:center;
  transition:color .16s,border-color .16s;
}
.themeToggle:hover{color:var(--phosphor);border-color:var(--phosphor);}
.themeToggle__light{display:none;}
html[data-theme="light"] .themeToggle__dark{display:none;}
html[data-theme="light"] .themeToggle__light{display:inline;}

/* ---- Hero ---- */
.hero{
  padding:88px 0 72px;position:relative;overflow:hidden;
  background:
    radial-gradient(1100px 480px at 18% -10%,rgba(242,163,60,.07),transparent 60%),
    radial-gradient(900px 500px at 100% 20%,rgba(36,48,68,.55),transparent 65%),
    var(--coal);
}
html[data-theme="light"] .hero{
  background:
    radial-gradient(1100px 480px at 18% -10%,rgba(166,107,18,.08),transparent 60%),
    var(--coal);
}
.hero__inner{display:grid;grid-template-columns:1.6fr 1fr;gap:56px;align-items:center;}
.hero__eyebrow{font-family:var(--font-mono);text-transform:uppercase;letter-spacing:3px;font-size:.74rem;color:var(--phosphor);margin:34px 0 10px;}
.hero__name{font-size:clamp(2.6rem,6vw,4rem);line-height:1.02;margin:0 0 12px;font-weight:800;letter-spacing:-1px;}
.hero__tagline{font-family:var(--font-display);font-size:1.4rem;margin:0;color:var(--fog);font-weight:600;}
.hero__subtag{font-size:1.02rem;margin:.25em 0 18px;color:var(--phosphor);font-weight:500;}
.hero__intro{font-size:1.06rem;color:var(--steel);max-width:640px;margin:0 0 30px;}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;}

/* Terminal (signature) */
.term{
  background:#0D1420;border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);max-width:620px;overflow:hidden;
}
html[data-theme="light"] .term{background:#1C2534;border-color:#2c3850;}
#github .term{margin-bottom:32px;}
.term__bar{display:flex;align-items:center;gap:7px;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,.06);}
.term__dot{width:11px;height:11px;border-radius:50%;background:#2c3850;}
.term__dot:first-child{background:#3d4d6b;}
.term__title{margin-left:8px;font-family:var(--font-mono);font-size:.72rem;color:#5c6b85;letter-spacing:.5px;}
.term__body{margin:0;padding:16px 18px;overflow-x:auto;font-family:var(--font-mono);font-size:.88rem;line-height:1.75;}
.term__body code{font-family:inherit;}
.term__prompt{color:#5c6b85;}
.term__line{color:#F2A33C;}
.term__result{display:block;margin-top:.5em;color:#7fd190;}
.term__cursor{
  display:inline-block;width:.55em;height:1.05em;margin-left:2px;vertical-align:text-bottom;
  background:#F2A33C;animation:blink 1.1s steps(1) infinite;
}
@keyframes blink{50%{opacity:0;}}

/* Portrait / headshot slot */
.hero__side{display:flex;justify-content:center;}
.portrait{position:relative;text-align:center;}
.portrait__img,.portrait__placeholder{
  width:min(300px,64vw);aspect-ratio:4/5;object-fit:cover;border-radius:var(--radius);
  border:1px solid var(--line);display:block;
}
.portrait__placeholder{
  background:linear-gradient(155deg,var(--deepslate),var(--slate2));
  display:flex;align-items:center;justify-content:center;
}
.portrait__monogram{font-family:var(--font-display);font-weight:800;font-size:5rem;color:var(--phosphor);letter-spacing:2px;}
.portrait::before{
  content:"";position:absolute;inset:14px -14px -14px 14px;border:1px solid var(--phosphor);
  border-radius:var(--radius);opacity:.45;z-index:-1;
}
.portrait__caption{display:block;margin-top:26px;font-family:var(--font-mono);font-size:.76rem;color:var(--steel-dim);letter-spacing:.6px;}

/* ---- Stats (result set) ---- */
.stats{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--deepslate);padding:42px 0 30px;}
.stats__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:26px;}
.stat{text-align:center;}
.stat__num{
  display:block;font-family:var(--font-mono);font-weight:500;font-size:2.6rem;line-height:1.1;
  color:var(--phosphor);font-variant-numeric:tabular-nums;
}
.stat__label{display:block;margin-top:4px;font-size:.9rem;color:var(--steel);}
.stats__caption{margin:26px 0 0;text-align:center;font-family:var(--font-mono);font-size:.74rem;color:var(--steel-dim);}
.stats__caption::before{content:"-- ";}

/* ---- Sections ---- */
.section{padding:76px 0;}
.section--alt{background:var(--deepslate);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.section__title{font-size:1.7rem;margin:0 0 10px;font-weight:700;letter-spacing:-.3px;}
.section__hash{color:var(--phosphor);font-family:var(--font-mono);font-weight:400;margin-right:2px;font-size:1.35rem;}
.section__sub{color:var(--steel);margin:0 0 30px;font-size:1.02rem;}
.lede{font-size:1.07rem;color:var(--steel);max-width:840px;}

/* ---- Chips / tags ---- */
.chips{display:flex;flex-wrap:wrap;gap:9px;margin-top:24px;}
.chip{
  font-size:.84rem;font-weight:500;color:var(--fog);
  border:1px solid var(--line);background:var(--deepslate);
  padding:.34em .9em;border-radius:999px;
}
.section--alt .chip{background:var(--coal);}
.tags{display:flex;flex-wrap:wrap;gap:7px;}
.tag{
  font-family:var(--font-mono);font-size:.72rem;color:var(--steel);
  border:1px solid var(--line);padding:.22em .65em;border-radius:5px;letter-spacing:.3px;
}

/* ---- Grid & cards ---- */
/* min-width:0 lets grid items shrink below content width (the hero <pre>
   otherwise forces the page wider than small viewports) */
.hero__inner>*,.grid>*{min-width:0;}
.grid{display:grid;gap:22px;}
.grid--2{grid-template-columns:1fr 1fr;gap:56px;}
.grid--3{grid-template-columns:repeat(3,1fr);}
.grid--4{grid-template-columns:repeat(4,1fr);}
.grid--top{align-items:start;}
.card{
  background:var(--deepslate);border:1px solid var(--line);border-radius:var(--radius);
  padding:24px;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;
}
.section--alt .card{background:var(--coal);}
.card:hover{transform:translateY(-4px);border-color:var(--steel-dim);box-shadow:var(--shadow);}
.card h3{margin:0 0 8px;font-size:1.06rem;font-weight:600;}
.card p{margin:0;font-size:.93rem;color:var(--steel);}

/* Services */
.service__key{
  display:inline-block;font-family:var(--font-mono);font-size:.8rem;color:var(--phosphor);
  background:var(--phosphor-dim);border-radius:6px;padding:.3em .6em;margin-bottom:14px;letter-spacing:.5px;
}

/* Projects */
.project__top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:8px;}
.project__top h3{margin:0;}
.project p{margin-bottom:14px;}
.badge{
  flex-shrink:0;font-family:var(--font-mono);font-size:.68rem;letter-spacing:.4px;
  color:var(--phosphor);border:1px solid var(--phosphor);border-radius:999px;padding:.2em .7em;opacity:.85;
}

/* ---- Timeline ---- */
.timeline{margin-top:34px;}
.tl{display:grid;grid-template-columns:22px 1fr;gap:18px;position:relative;padding-bottom:34px;}
.tl:last-child{padding-bottom:0;}
.tl__rail{position:relative;}
.tl__rail::before{content:"";position:absolute;left:50%;top:8px;bottom:-8px;width:1px;background:var(--line);transform:translateX(-50%);}
.tl:last-child .tl__rail::before{display:none;}
.tl__dot{
  position:absolute;left:50%;top:8px;width:9px;height:9px;border-radius:50%;
  background:var(--coal);border:2px solid var(--phosphor);transform:translateX(-50%);
}
.tl__dates{font-family:var(--font-mono);font-size:.78rem;color:var(--phosphor);letter-spacing:.5px;}
.tl__role{margin:4px 0 10px;font-size:1.12rem;font-weight:600;}
.tl__org{color:var(--steel);font-weight:500;font-family:var(--font-body);font-size:1rem;}
.tl__points{margin:0;padding-left:18px;}
.tl__points li{margin-bottom:7px;font-size:.94rem;color:var(--steel);}

/* ---- Skills / education ---- */
.skillrow{margin-bottom:20px;}
.skillrow__label{display:block;font-family:var(--font-mono);font-size:.76rem;letter-spacing:.8px;text-transform:uppercase;color:var(--phosphor);margin-bottom:8px;}
.edu{margin:10px 0 0;padding-left:18px;}
.edu li{margin-bottom:12px;color:var(--steel);}

/* ---- Contact ---- */
.contactlist{list-style:none;margin:18px 0 0;padding:0;}
.contactlist li{margin-bottom:14px;color:var(--steel);}
.contactlist strong{display:inline-block;min-width:86px;color:var(--fog);font-weight:600;}
.form{background:var(--coal);border:1px solid var(--line);border-radius:var(--radius);padding:26px;}
html[data-theme="light"] .form{background:var(--deepslate);}
.form__row{margin-bottom:16px;}
.form__row label{display:block;font-size:.84rem;font-weight:600;color:var(--fog);margin-bottom:6px;}
.form__row input,.form__row select,.form__row textarea{
  width:100%;background:var(--deepslate);border:1px solid var(--line);border-radius:7px;
  color:var(--fog);padding:.6em .8em;font-family:var(--font-body);font-size:.95rem;
  transition:border-color .15s ease;
}
html[data-theme="light"] .form__row input,
html[data-theme="light"] .form__row select,
html[data-theme="light"] .form__row textarea{background:var(--coal);}
.form__row input:focus,.form__row select:focus,.form__row textarea:focus{outline:none;border-color:var(--phosphor);}
.form__row textarea{resize:vertical;}
.hp{position:absolute;left:-9999px;top:-9999px;}
.form__status{margin:12px 0 0;font-size:.9rem;min-height:1.3em;}
.form__status.ok{color:var(--ok);}
.form__status.err{color:var(--err);}

/* ---- Footer ---- */
.footer{border-top:1px solid var(--line);padding:26px 0;}
.footer__inner{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:.86rem;color:var(--steel-dim);}
.footer__eof{font-family:var(--font-mono);font-size:.76rem;color:var(--steel-dim);}
.footer__links a{color:var(--steel);}
.footer__links a:hover{color:var(--phosphor);}

/* ---- Scroll reveal ---- */
[data-reveal]{opacity:0;transform:translateY(14px);transition:opacity .55s ease,transform .55s ease;}
[data-reveal].isRevealed{opacity:1;transform:none;}
html.noJs [data-reveal]{opacity:1;transform:none;}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  [data-reveal]{opacity:1;transform:none;transition:none;}
  .term__cursor{animation:none;}
  .btn,.card{transition:none;}
}

/* ---- Responsive ---- */
@media (max-width:980px){
  .hero__inner{grid-template-columns:1fr;gap:40px;}
  .hero__side{order:-1;}
  .portrait__img,.portrait__placeholder{width:min(220px,60vw);}
  .grid--4{grid-template-columns:1fr 1fr;}
  .grid--3{grid-template-columns:1fr 1fr;}
  .stats__grid{grid-template-columns:1fr 1fr;row-gap:30px;}
}
@media (max-width:720px){
  .grid--2{grid-template-columns:1fr;gap:44px;}
  .grid--3{grid-template-columns:1fr;}
  .nav__toggle{display:flex;}
  .nav__links{
    display:none;position:absolute;top:66px;left:0;right:0;flex-direction:column;
    background:var(--coal);border-bottom:1px solid var(--line);padding:18px 24px;gap:16px;
    align-items:flex-start;
  }
  .nav__links.open{display:flex;}
  .hero{padding:56px 0 56px;}
  .term__body{font-size:.78rem;}
}
@media (max-width:480px){
  .grid--4{grid-template-columns:1fr;}
  .stats__grid{grid-template-columns:1fr 1fr;gap:18px;}
  .stat__num{font-size:2rem;}
}