/* ==========================================================================
   Jovan Bravo — portfolio
   1. Tokens        2. Reset / base     3. Decoration    4. Nav
   5. Hero          6. Sections         7. Components    8. Footer
   9. Responsive
   ========================================================================== */

/* --- 1. Tokens ----------------------------------------------------------- */
/* The inline script in <head> always resolves data-theme to "light" or "dark"
   before first paint, so the palette lives in exactly two places. */
:root{
  --paper:#f4f7fa;
  --panel:#ffffff;
  --panel-hover:#fbfdff;
  --line:#d7e1ec;
  --ink:#16304f;
  --ink-muted:#5c7690;
  --blueprint:#2f6690;
  --copper:#c97f2b;
  --copper-dim:#c97f2b22;
  --copper-hover:#f0b256;
  --nav-bg:rgba(244,247,250,.86);
  --shadow:0 1px 2px rgba(22,48,79,.05),0 10px 30px -12px rgba(22,48,79,.14);
  --shadow-hover:0 2px 4px rgba(22,48,79,.06),0 18px 44px -14px rgba(22,48,79,.22);

  --font-sans:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --gutter:clamp(16px,4vw,28px);
  --section-y:clamp(48px,8vw,76px);
  --radius:10px;
  --tap:44px; /* minimum touch target */

  color-scheme:light;
}

[data-theme="dark"]{
  --paper:#0d1b2e;
  --panel:#112544;
  --panel-hover:#163057;
  --line:#25456e;
  --ink:#eaf2f7;
  --ink-muted:#8ea6c2;
  --blueprint:#5aa9de;
  --copper:#e8a33d;
  --copper-dim:#e8a33d33;
  --copper-hover:#f4bb63;
  --nav-bg:rgba(13,27,46,.86);
  --shadow:0 1px 2px rgba(0,0,0,.3),0 12px 34px -14px rgba(0,0,0,.55);
  --shadow-hover:0 2px 6px rgba(0,0,0,.35),0 22px 50px -16px rgba(0,0,0,.7);

  color-scheme:dark;
}

/* --- 2. Reset / base ----------------------------------------------------- */
*{margin:0;padding:0;box-sizing:border-box;}

html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
}

body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-sans);
  line-height:1.65;
  position:relative;
  overflow-x:hidden; /* belt-and-braces against a stray decorative overflow */
  transition:background .25s ease,color .25s ease;
}

a{color:inherit;}
img,svg{max-width:100%;}
::selection{background:var(--copper-dim);color:var(--ink);}
:focus-visible{outline:2px solid var(--copper);outline-offset:3px;}

.container{
  width:100%;
  max-width:1180px;
  margin:0 auto;
  padding:0 var(--gutter);
  position:relative;
  z-index:1;
}

.eyebrow{
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--blueprint);
}

.skip-link{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--copper);color:#0d1b2e;
  padding:12px 20px;border-radius:0 0 6px 0;
  font-family:var(--font-mono);font-size:.8rem;text-decoration:none;
}
.skip-link:focus{left:0;}

/* Reveal-on-scroll only engages when JS is present, so a no-script visitor
   never lands on an invisible page. */
.js .reveal{opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s ease;}
.js .reveal.is-visible{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){
  .js .reveal{opacity:1;transform:none;transition:none;}
}

/* --- 3. Decoration ------------------------------------------------------- */
.grid-overlay{
  position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:
    linear-gradient(var(--line) 1px,transparent 1px),
    linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:44px 44px;
  opacity:.12;
}

.crosshair{position:fixed;width:18px;height:18px;z-index:5;pointer-events:none;opacity:.5;}
.crosshair::before,.crosshair::after{content:'';position:absolute;background:var(--blueprint);}
.crosshair::before{top:50%;left:0;width:100%;height:1px;transform:translateY(-50%);}
.crosshair::after{left:50%;top:0;height:100%;width:1px;transform:translateX(-50%);}
.crosshair-tl{top:18px;left:18px;}
.crosshair-tr{top:18px;right:18px;}
.crosshair-bl{bottom:18px;left:18px;}
.crosshair-br{bottom:18px;right:18px;}

/* --- 4. Nav -------------------------------------------------------------- */
nav{
  position:sticky;top:0;z-index:10;
  background:var(--nav-bg);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.nav-inner{display:flex;align-items:center;justify-content:space-between;min-height:64px;gap:16px;}
.nav-mark{font-family:var(--font-mono);font-weight:600;letter-spacing:.05em;font-size:.95rem;white-space:nowrap;}

.nav-links{
  display:flex;align-items:center;gap:22px;
  font-family:var(--font-mono);font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;
}
.nav-links a{
  display:inline-flex;align-items:center;
  min-height:38px;
  color:var(--ink-muted);text-decoration:none;
  border-bottom:1px solid transparent;
  transition:color .15s ease,border-color .15s ease;
  white-space:nowrap;
}
.nav-links a:hover{color:var(--ink);}
.nav-links a[aria-current="true"]{color:var(--copper);border-bottom-color:var(--copper);}

.nav-right{display:flex;align-items:center;gap:10px;}

.theme-toggle{
  min-height:var(--tap);padding:7px 12px;
  border:1px solid var(--line);border-radius:6px;background:transparent;
  color:var(--ink-muted);font-family:var(--font-mono);font-size:.75rem;letter-spacing:.04em;
  cursor:pointer;
  transition:border-color .15s ease,color .15s ease;
}
.theme-toggle:hover{border-color:var(--blueprint);color:var(--ink);}

.nav-icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:var(--tap);height:var(--tap);
  border:1px solid var(--line);border-radius:6px;
  color:var(--ink-muted);
  transition:border-color .15s ease,color .15s ease;
}
.nav-icon svg{width:15px;height:15px;display:block;}
.nav-icon:hover{border-color:var(--blueprint);color:var(--ink);}

/* --- 5. Hero ------------------------------------------------------------- */
.hero{
  padding:clamp(48px,9vw,96px) 0 clamp(44px,7vw,72px);
  border-bottom:1px solid var(--line);
  position:relative;z-index:1;
  overflow:hidden; /* the accent SVG is oversized and bleeds off-axis on purpose */
}
.hero-accent{
  position:absolute;top:16px;right:-150px;width:560px;height:560px;
  z-index:-1;pointer-events:none;color:var(--blueprint);opacity:.55;
}
.hero-accent circle,.hero-accent line,.hero-accent path{fill:none;stroke:currentColor;stroke-width:1;}
.hero-accent .axis{opacity:.45;}
.hero-accent .ring-grad{stroke-dasharray:2 8;}
.hero-accent .arc{stroke:var(--copper);stroke-width:2.5;opacity:.85;}
.hero-accent .radius{stroke:var(--copper);stroke-width:1.5;opacity:.6;}
.hero-accent .cdot{fill:var(--copper);stroke:none;}

.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(32px,5vw,56px);align-items:center;}
.hero-copy h1{
  font-size:clamp(1.9rem,5.6vw,3rem);
  font-weight:700;letter-spacing:-.03em;line-height:1.08;
  margin:14px 0 22px;
  text-wrap:balance;
}
.hero-copy h1 em{font-style:normal;color:var(--copper);}
/* Keep hyphenated terms whole; the browser would otherwise break at the hyphen. */
.hero-copy h1 .nb{white-space:nowrap;}
.hero-copy p{
  color:var(--ink-muted);
  font-size:clamp(1rem,2.4vw,1.15rem);
  max-width:56ch;margin-bottom:28px;
}

.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:16px;}
.hero-aside{margin-bottom:40px;}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:var(--tap);
  padding:13px 26px;border-radius:6px;
  font-family:var(--font-sans);font-weight:600;font-size:.95rem;text-decoration:none;
  transition:transform .15s ease,background .15s ease,border-color .15s ease;
}
.btn-primary{background:var(--copper);color:#0d1b2e;box-shadow:0 8px 22px -10px rgba(201,127,43,.75);}
.btn-primary:hover{transform:translateY(-2px);background:var(--copper-hover);box-shadow:0 12px 28px -10px rgba(201,127,43,.85);}
.btn-ghost{border:1px solid var(--line);color:var(--ink);}
.btn-ghost:hover{border-color:var(--blueprint);transform:translateY(-2px);}
@media (prefers-reduced-motion:reduce){
  .btn:hover{transform:none;}
}

.text-link{
  display:inline-flex;align-items:center;gap:8px;
  min-height:var(--tap);
  font-family:var(--font-mono);font-size:.74rem;letter-spacing:.07em;text-transform:uppercase;
  color:var(--ink-muted);text-decoration:none;
  border-bottom:1px solid var(--line);
  transition:color .15s ease,border-color .15s ease;
}
.text-link:hover{color:var(--copper);border-bottom-color:var(--copper);}

/* Metric strips: hero specs and the load-test readout share one mechanic. */
.metrics{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(130px,1fr));
  gap:0;
}
.metrics > *{
  padding-right:16px;margin-right:16px;
  border-right:1px solid var(--line);
}
.metrics > *:last-child{border-right:none;padding-right:0;margin-right:0;}
.metrics .num{
  font-family:var(--font-mono);font-size:clamp(1.25rem,3.4vw,1.5rem);
  font-weight:600;color:var(--blueprint);line-height:1.1;
}
.metrics .num .unit{font-size:.85rem;font-weight:400;margin-left:1px;}
.metrics .label{
  font-family:var(--font-mono);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-muted);margin-top:4px;
}
.spec-row{border-top:1px solid var(--line);padding-top:16px;}
.readout{margin-bottom:14px;}

/* --- Diagram ------------------------------------------------------------- */
.diagram-frame{
  border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);
  padding:18px;position:relative;box-shadow:var(--shadow);
}
.diagram-frame .fig-label{
  font-family:var(--font-mono);font-size:.65rem;color:var(--ink-muted);letter-spacing:.06em;
  text-align:right;margin-top:10px;
}
.diagram-svg{display:block;width:100%;height:auto;}
.diagram-svg text{font-family:var(--font-mono);fill:var(--ink-muted);font-size:11px;pointer-events:none;}
.node-circle{fill:var(--panel);stroke:var(--blueprint);stroke-width:1.5;transition:stroke .2s ease,stroke-width .2s ease;}
.node-circle:hover{stroke:var(--copper);stroke-width:2.5;}
.hub{fill:var(--copper);stroke:none;}
.hub-text{fill:#0d1b2e;font-weight:600;font-size:12px;}
.link{stroke:var(--blueprint);stroke-width:1;opacity:.55;}
@media (prefers-reduced-motion:no-preference){
  .link{stroke-dasharray:220;stroke-dashoffset:220;animation:draw 1.4s ease forwards;}
  .link:nth-of-type(1){animation-delay:.05s;}
  .link:nth-of-type(2){animation-delay:.15s;}
  .link:nth-of-type(3){animation-delay:.25s;}
  .link:nth-of-type(4){animation-delay:.35s;}
  .link:nth-of-type(5){animation-delay:.45s;}
  .link:nth-of-type(6){animation-delay:.55s;}
}
@keyframes draw{to{stroke-dashoffset:0;}}

/* Legible stand-in for the diagram on narrow screens, where 11px SVG text
   would scale down to roughly 5px. */
.stack-compact{display:none;}
.stack-compact ul{
  list-style:none;
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:1px;background:var(--line);border:1px solid var(--line);border-radius:8px;overflow:hidden;
}
.stack-compact li{
  background:var(--paper);padding:12px 14px;
  font-family:var(--font-mono);font-size:.78rem;color:var(--ink);
}
.stack-compact li .sc-role{
  display:block;font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-muted);margin-top:3px;
}
.stack-compact li.sc-hub{grid-column:1/-1;background:var(--copper);color:#0d1b2e;font-weight:600;}
.stack-compact li.sc-hub .sc-role{color:#0d1b2ecc;}

/* --- 6. Sections --------------------------------------------------------- */
section{
  padding:var(--section-y) 0;
  border-bottom:1px solid var(--line);
  scroll-margin-top:88px;
}
.section-head{margin-bottom:clamp(28px,5vw,44px);max-width:640px;}
.section-head .eyebrow{display:inline-flex;align-items:center;gap:10px;}
.section-head .eyebrow::before{content:'';width:26px;height:1px;background:var(--copper);display:inline-block;}
.section-head h2{
  font-size:clamp(1.5rem,4.6vw,2.1rem);
  letter-spacing:-.03em;margin-top:10px;font-weight:700;text-wrap:balance;
}
.section-head p{color:var(--ink-muted);margin-top:12px;}

/* --- 7. Components ------------------------------------------------------- */
/* Value grid */
.value-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
}
@media (max-width:900px){ .value-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:600px){ .value-grid{grid-template-columns:1fr;} }
.value-item{
  background:var(--panel);padding:clamp(20px,4vw,28px) clamp(18px,4vw,26px);position:relative;
  transition:background .2s ease,box-shadow .2s ease;
}
.value-item:hover{background:var(--panel-hover);box-shadow:inset 0 3px 0 var(--copper);}
.value-item .fig{
  font-family:var(--font-mono);font-size:.68rem;color:var(--blueprint);
  letter-spacing:.08em;margin-bottom:12px;transition:color .2s ease;
}
.value-item:hover .fig{color:var(--copper);}
.value-item h3{font-size:1.08rem;margin-bottom:8px;letter-spacing:-.01em;font-weight:600;}
.value-item p{color:var(--ink-muted);font-size:.92rem;}

/* Work panels */
.panel{
  border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);
  padding:clamp(20px,4vw,26px) clamp(18px,4vw,28px);
  margin-bottom:16px;position:relative;overflow:hidden;
  box-shadow:var(--shadow);
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.panel::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--copper);
  transform:scaleY(0);transform-origin:top;transition:transform .3s ease;
}
.panel:hover{transform:translateY(-3px);box-shadow:var(--shadow-hover);border-color:var(--blueprint);}
.panel:hover::before{transform:scaleY(1);}
@media (prefers-reduced-motion:reduce){
  .panel:hover{transform:none;}
}
.panel-head{display:flex;justify-content:space-between;align-items:baseline;gap:14px;margin-bottom:10px;flex-wrap:wrap;}
.panel-head h3{font-size:clamp(1.05rem,3vw,1.2rem);letter-spacing:-.01em;}
.panel-head .tag-line{
  font-family:var(--font-mono);font-size:.68rem;color:var(--ink-muted);letter-spacing:.06em;
  border:1px solid var(--line);padding:3px 9px;border-radius:4px;white-space:nowrap;
  transition:color .2s ease,border-color .2s ease;
}
.panel:hover .tag-line{color:var(--blueprint);border-color:var(--blueprint);}
.panel p.desc{color:var(--ink-muted);font-size:.95rem;margin-bottom:16px;}
.panel p.desc code{font-family:var(--font-mono);font-size:.85em;color:var(--ink);}
.readout-note{color:var(--ink-muted);font-size:.82rem;line-height:1.6;margin-bottom:16px;}
.dim-line{
  height:1px;margin-bottom:14px;
  background:repeating-linear-gradient(90deg,var(--line) 0 6px,transparent 6px 11px);
}

.tech-tags{display:flex;gap:8px;flex-wrap:wrap;}
.tag{
  background:var(--paper);border:1px solid var(--line);padding:4px 11px;border-radius:5px;
  font-family:var(--font-mono);font-size:.78rem;color:var(--ink-muted);
  transition:border-color .15s ease,color .15s ease;
}
.tag:hover{border-color:var(--copper);color:var(--ink);}

/* Bill of materials — the table is wider than a phone, so it scrolls in place
   instead of dragging the whole document sideways. */
.table-scroll{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;
  border:1px solid var(--line);border-radius:var(--radius);
}
.bom{width:100%;min-width:560px;border-collapse:collapse;font-family:var(--font-mono);font-size:.87rem;}
.bom th{
  text-align:left;padding:10px 14px;border-bottom:1px solid var(--line);
  color:var(--blueprint);font-weight:500;letter-spacing:.06em;font-size:.72rem;text-transform:uppercase;
}
.bom td{padding:12px 14px;border-bottom:1px solid var(--line);color:var(--ink-muted);}
.bom tbody tr:last-child td{border-bottom:none;}
.bom tr td:first-child{color:var(--blueprint);font-weight:500;width:60px;}
.bom tr td:nth-child(2){color:var(--ink);white-space:nowrap;}
.bom tbody tr{transition:background .15s ease;}
.bom tbody tr:hover{background:var(--copper-dim);}
.bom tbody tr:hover td{color:var(--ink);}
.scroll-hint{
  display:none;
  font-family:var(--font-mono);font-size:.66rem;letter-spacing:.07em;text-transform:uppercase;
  color:var(--ink-muted);margin-top:10px;
}

/* CTA */
.cta-section{text-align:center;padding:clamp(64px,11vw,100px) 0;border-bottom:none;position:relative;}
.cta-section .eyebrow{display:block;margin-bottom:14px;}
.cta-section h2{font-size:clamp(1.7rem,5.6vw,2.6rem);letter-spacing:-.03em;max-width:680px;margin:0 auto 18px;text-wrap:balance;}
.cta-section p{color:var(--ink-muted);font-size:clamp(1rem,2.4vw,1.1rem);max-width:520px;margin:0 auto 32px;}

/* --- 8. Footer ----------------------------------------------------------- */
footer{padding:0 0 40px;}
.title-block{
  border:1px solid var(--line);border-radius:8px;
  display:grid;grid-template-columns:repeat(5,1fr);
  font-family:var(--font-mono);font-size:.75rem;overflow:hidden;
}
.tb-cell{padding:14px 16px;border-right:1px solid var(--line);}
.tb-cell:last-child{border-right:none;}
.tb-cell .tb-label{color:var(--ink-muted);font-size:.65rem;letter-spacing:.06em;text-transform:uppercase;margin-bottom:4px;}
.tb-cell .tb-value{color:var(--ink);}

.footer-meta{
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;
  margin-top:16px;
  font-family:var(--font-mono);font-size:.72rem;letter-spacing:.06em;color:var(--ink-muted);
}
.footer-actions{display:flex;gap:10px;flex-wrap:wrap;}
.footer-link{
  display:inline-flex;align-items:center;gap:8px;min-height:var(--tap);
  padding:7px 13px;border:1px solid var(--line);border-radius:6px;
  color:var(--ink-muted);text-decoration:none;
  transition:border-color .15s ease,color .15s ease;
}
.footer-link svg{width:14px;height:14px;display:block;}
.footer-link:hover{border-color:var(--blueprint);color:var(--ink);}

/* --- 9. Responsive ------------------------------------------------------- */
@media (max-width:1024px){
  .hero-accent{width:460px;height:460px;right:-180px;opacity:.4;}
}

@media (max-width:860px){
  .hero-grid{grid-template-columns:1fr;}
  .hero-accent{opacity:.22;top:0;right:-200px;}
  .title-block{grid-template-columns:repeat(2,1fr);}
  .tb-cell{border-bottom:1px solid var(--line);}
  .tb-cell:nth-last-child(-n+1){border-bottom:none;}
}

/* Swap the node diagram for the legible compact list. */
@media (max-width:768px){
  .diagram-frame{display:none;}
  .stack-compact{display:block;}
  .scroll-hint{display:block;}
  section{scroll-margin-top:76px;}
}

@media (max-width:640px){
  .crosshair{display:none;}
  .grid-overlay{opacity:.08;}
  .nav-inner{
    flex-wrap:wrap;
    padding:10px 0;
    row-gap:4px;
  }
  .nav-mark{order:1;}
  .nav-right{order:2;}
  /* Links drop to their own full-width row and scroll if they run out of space. */
  .nav-links{
    order:3;flex:1 0 100%;
    gap:18px;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    padding-bottom:2px;
  }
  .nav-links::-webkit-scrollbar{display:none;}
  .nav-links a{min-height:var(--tap);}
  section{scroll-margin-top:104px;}
  .metrics{grid-template-columns:repeat(2,1fr);row-gap:18px;}
  .metrics > *{border-right:1px solid var(--line);}
  .metrics > *:nth-child(2n){border-right:none;padding-right:0;margin-right:0;}
  .btn{width:100%;}
  .hero-actions{gap:10px;}
}

@media (max-width:420px){
  .title-block{grid-template-columns:1fr;}
  .tb-cell{border-right:none;}
  .tb-cell:last-child{border-bottom:none;}
  .nav-mark{font-size:.85rem;}
  .footer-meta{justify-content:flex-start;}
  .footer-actions{width:100%;}
  .footer-link{flex:1;justify-content:center;}
}

@media (max-width:359px){
  .metrics{grid-template-columns:1fr;row-gap:14px;}
  .metrics > *{border-right:none;padding-right:0;margin-right:0;}
}