/* Ivan I. Garibay — personal site. "Civic Modern": Public Sans, navy + red accent,
   white/light-gray bands. Responsive, light/dark. */
:root{
  --bg:#ffffff; --fg:#1b1b1b; --muted:#565c65; --line:#dfe1e2; --band:#f0f0f0; --card:#ffffff;
  --navy:#162e51; --link:#162e51; --red:#b50909;
  --hero-bg:#162e51; --hero-fg:#ffffff; --hero-sub:#dce4f2; --hero-list:#c9d4e8; --hero-eyebrow:#a9bce0; --hero-line:#5b78a8;
  --maxw:960px;
}
:root[data-theme="dark"]{
    --bg:#0e1621; --fg:#e6eaf0; --muted:#9aa5b5; --line:#243244; --band:#141f2e; --card:#172333;
    --navy:#dbe6f7; --link:#8fb0e8; --red:#e04b4b;
    --hero-bg:#0a1322; --hero-fg:#ffffff; --hero-sub:#c9d6ea; --hero-list:#b8c6dc; --hero-eyebrow:#8fa6cc; --hero-line:#3a5280;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--fg);
  font:16px/1.65 "Public Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased}
a{color:var(--link);text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
h1,h2,h3{color:var(--navy);letter-spacing:-.01em}

/* top bar + nav */
.topbar{height:4px;background:var(--red)}
nav{position:sticky;top:0;z-index:10;background:color-mix(in srgb,var(--bg) 92%,transparent);
  backdrop-filter:saturate(1.2) blur(8px);border-bottom:1px solid var(--line)}
nav .wrap{display:flex;gap:28px;align-items:center;height:64px}
nav .brand{font-weight:700;margin-right:auto;color:var(--navy);font-size:1rem}
nav a{color:var(--fg);font-size:.95rem;font-weight:500;padding:20px 0;border-bottom:3px solid transparent}
nav a:hover{text-decoration:none;border-bottom-color:var(--line)}
nav a.active{color:var(--navy);border-bottom-color:var(--red)}
nav a.cta{color:#fff;background:var(--navy);padding:8px 16px;border-radius:4px;font-weight:600;border:none}
nav a.cta:hover{background:var(--red)}
.theme-toggle{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;
  border:1px solid var(--line);border-radius:4px;background:transparent;color:var(--fg);cursor:pointer;padding:0}
.theme-toggle:hover{border-color:var(--navy)}
.theme-toggle svg{width:18px;height:18px}
.theme-toggle .moon{display:none}
:root[data-theme="dark"] .theme-toggle .sun{display:none}
:root[data-theme="dark"] .theme-toggle .moon{display:block}
:root[data-theme="dark"] nav a.cta{color:#0e1621}
:root[data-theme="dark"] nav a.cta:hover{color:#fff}

/* hero */
header.hero{background:var(--hero-bg);color:var(--hero-fg);padding:72px 0}
header.hero h1{margin:0;font-size:3rem;font-weight:700;line-height:1.08;letter-spacing:-.02em;color:var(--hero-fg)}
header.hero .eyebrow{font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--hero-eyebrow);font-weight:600;margin:0 0 16px}
header.hero .headline{color:var(--hero-sub);font-weight:500;font-size:1.25rem;margin:16px 0 18px;line-height:1.45}
header.hero ul.titles{list-style:none;margin:0 0 24px;padding:0;color:var(--hero-list);font-size:.93rem;line-height:1.6}
header.hero ul.titles li{margin:0}
header.hero ul.titles a{color:var(--hero-list);text-decoration:none;border-bottom:1px solid transparent}
header.hero ul.titles a:hover{color:var(--hero-fg);text-decoration:none;border-bottom-color:var(--hero-line)}
.hero-grid{display:flex;gap:48px;align-items:center}
.hero-text{min-width:0;flex:1}
.headshot{width:240px;height:240px;border-radius:50%;object-fit:cover;flex-shrink:0;border:4px solid #fff}
.linkrow{display:flex;flex-wrap:wrap;gap:12px}
.linkrow a{display:inline-block;color:#fff;border:1px solid var(--hero-line);padding:10px 18px;border-radius:4px;font-size:.95rem;font-weight:600}
.linkrow a:first-child{background:var(--red);border-color:var(--red)}
.linkrow a:hover{text-decoration:none;border-color:#fff}
header.hero.compact{padding:56px 0}
header.hero.compact h1{font-size:2.4rem}

/* sections */
section{padding:64px 0}
section.band{background:var(--band)}
section h2{font-size:1.65rem;font-weight:700;margin:0 0 24px}
.split{display:flex;gap:48px;flex-wrap:wrap}
.split h2{flex:0 0 200px;margin:0}
.split .body{flex:1 1 520px;min-width:0}
.lead{font-size:1.06rem;line-height:1.65;margin:0}
.sechead{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:12px}
.sechead h2{margin:0 0 24px}
.sechead a{font-weight:600;font-size:.95rem}

/* metrics strip */
section.metrics-strip{padding:40px 0;border-bottom:1px solid var(--line)}
.metrics{display:grid;grid-template-columns:repeat(6,1fr);gap:24px}
.metric .num{font-size:1.9rem;font-weight:700;letter-spacing:-.02em;line-height:1;color:var(--navy)}
.metric .lab{color:var(--muted);font-size:.82rem;margin-top:6px;line-height:1.35}

/* cards grid */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.card{background:var(--card);border:1px solid var(--line);border-radius:6px;padding:24px}
.card h3{margin:0 0 8px;font-size:1.1rem;font-weight:700}
.card p{margin:0;color:var(--muted);font-size:.95rem;line-height:1.6}
.card .reps{list-style:none;margin:14px 0 0;padding:14px 0 0;border-top:1px solid var(--line);font-size:.86rem;line-height:1.45;display:flex;flex-direction:column;gap:8px}
.card .reps .y{color:var(--red);font-weight:700;font-size:.78rem;margin-right:4px;font-variant-numeric:tabular-nums}
.card .reps a{color:var(--navy);font-weight:600}
.card .reps .v{color:var(--muted)}
.grid2 .card:last-child:nth-child(odd){grid-column:1/-1}

/* lists */
ul.clean{list-style:none;margin:0;padding:0}
ul.clean li{padding:10px 0;border-bottom:1px solid var(--line);display:flex;gap:16px;align-items:baseline}
ul.clean li:last-child{border-bottom:none}
.pill{display:inline-block;font-size:.75rem;font-weight:700;color:var(--navy);background:var(--card);
  border:1px solid var(--line);border-radius:3px;padding:2px 8px;flex-shrink:0;font-variant-numeric:tabular-nums}
ul.clean.dots li{display:list-item;padding-left:1.2em;position:relative}
ul.clean.dots li::before{content:"";position:absolute;left:0;top:1.05em;width:6px;height:6px;border-radius:50%;background:var(--red)}

/* publications */
.publist{border-top:1px solid var(--line)}
.pubitem{display:flex;gap:24px;padding:18px 0;border-bottom:1px solid var(--line)}
.pubitem .y{color:var(--red);font-weight:700;font-size:.82rem;width:48px;flex-shrink:0;padding-top:4px;font-variant-numeric:tabular-nums}
.pubitem .pubbody{min-width:0;font-size:.95rem;line-height:1.55}
.pubitem .t{color:var(--navy);font-weight:600}
.pubitem .t a{color:var(--navy)}
.pubitem .v{color:var(--muted)}
strong.me{color:var(--fg)}
.catnav{display:flex;flex-wrap:wrap;gap:10px}
.catnav a{color:#fff;border:1px solid var(--hero-line);padding:7px 14px;border-radius:4px;font-size:.88rem;font-weight:600}
.catnav a:hover{text-decoration:none;border-color:#fff}
section h2 .v{color:var(--muted);font-weight:500;font-size:1rem}

footer{background:var(--hero-bg);color:var(--hero-list);padding:28px 0;font-size:.85rem}
footer .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px 24px}
footer a{color:#fff}

@media (max-width:900px){
  .metrics{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:640px){
  header.hero{padding:48px 0}
  header.hero h1{font-size:2.1rem}
  .hero-grid{flex-direction:column-reverse;align-items:flex-start;gap:24px}
  .hero-text{width:100%}
  .headshot{width:160px;height:160px}
  nav .wrap{flex-wrap:wrap;height:auto;min-height:56px;gap:4px 20px;padding-top:4px;padding-bottom:4px}
  nav a{padding:10px 0}
  nav a.cta{padding:8px 16px;margin:6px 0}
  section{padding:48px 0}
  .metrics{grid-template-columns:repeat(2,1fr);gap:18px}
  .grid2{grid-template-columns:1fr}
  .split{gap:12px 48px}
  .split h2{flex-basis:100%;margin-bottom:4px}
  .pubitem{gap:16px}
}