/* Raul A. Sosa — personal academic site (v6)
   Wider layout, larger type, dark header (blacks + blues), classic serif
   headings (Source Serif 4) + clean sans body, classic-blue accent. */

/* ---------- fonts (Montserrat, self-hosted — same family Hnilo uses) ---------- */
@font-face{ font-family:"Montserrat"; src:url("assets/fonts/montserrat-400.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; }
@font-face{ font-family:"Montserrat"; src:url("assets/fonts/montserrat-600.woff2") format("woff2"); font-weight:600; font-style:normal; font-display:swap; }
@font-face{ font-family:"Montserrat"; src:url("assets/fonts/montserrat-700.woff2") format("woff2"); font-weight:700; font-style:normal; font-display:swap; }
@font-face{ font-family:"Montserrat"; src:url("assets/fonts/montserrat-400-italic.woff2") format("woff2"); font-weight:400; font-style:italic; font-display:swap; }

/* ---------- tokens ---------- */
:root{
  --bg:        #ffffff;
  --ink:       #16181d;
  --body-2:    #43454c;
  --faint:     #8a8a8a;
  --rule:      #e4e6ea;
  --rule-mid:  #cfd2d8;

  --accent:      #1155cc;
  --accent-dark: #0b3d99;
  --accent-tint: rgba(17,85,204,.14);

  --header-bg:    #0f1826;   /* near-black navy */
  --header-fg:    #f3f6fb;
  --header-muted: #a9b4c6;
  --header-blue:  #7fa8ff;

  --serif: "Montserrat", Arial, sans-serif;   /* headings (700) */
  --sans:  "Montserrat", Arial, sans-serif;   /* body (400) */

  --maxw: 1000px;
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--sans); font-size:19px; line-height:1.6; font-weight:400;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
p{ margin:0 0 20px; } p:last-child{ margin-bottom:0; }
strong{ font-weight:600; } em,i{ font-style:italic; }

a{ color:var(--accent); text-decoration:none; }
a:hover{ color:var(--accent-dark); text-decoration:underline; text-underline-offset:2px; }

/* ---------- dark header (full width) ---------- */
.masthead{ background:var(--header-bg); }
.masthead-inner{
  max-width:var(--maxw); margin:0 auto; padding:22px 32px;
  display:flex; align-items:center; justify-content:space-between;
  gap:12px 26px; flex-wrap:wrap;
}
.brand{
  font-family:var(--serif); font-size:23px; font-weight:700; letter-spacing:-.01em;
  color:var(--header-fg); text-decoration:none;
}
.brand:hover{ color:#fff; text-decoration:none; }
.nav{ display:flex; gap:30px; }
.nav a{
  font-family:var(--sans); font-size:15.5px; color:var(--header-muted); text-decoration:none;
  padding-bottom:3px;
}
.nav a:hover{ color:#fff; text-decoration:none; }
.nav a.active{ color:#fff; font-weight:600; border-bottom:2px solid var(--accent); }

/* ---------- split hero ---------- */
.hero{
  max-width:var(--maxw); margin:0 auto; padding:64px 32px 52px;
  display:grid; grid-template-columns:1fr 300px; gap:58px; align-items:center;
}
.hero-main{ min-width:0; }
.hero h1{
  font-family:var(--serif); font-size:clamp(46px, 6vw, 66px); font-weight:700;
  letter-spacing:-.022em; line-height:1.04; margin:0 0 18px;
}
.hero .tagline{ font-size:20px; line-height:1.5; margin:0 0 16px; }
.hero .tagline b{ font-weight:600; color:var(--ink); }
.hero .tagline .org{ color:var(--body-2); }
.hero .fields{ font-size:16px; color:var(--body-2); line-height:1.55; margin:0 0 4px; }
.hero .fields b{ color:var(--ink); font-weight:600; }
.quicklinks{ margin:22px 0 0; font-size:16px; display:flex; flex-wrap:wrap; gap:8px 22px; }
.hero-cta{ margin:24px 0 0; }
.btn{
  display:inline-block; font-family:var(--sans); font-size:15px; font-weight:600;
  color:#fff; background:var(--accent); padding:12px 22px; border-radius:6px;
  text-decoration:none; letter-spacing:.01em;
}
.btn:hover{ background:var(--accent-dark); color:#fff; text-decoration:none; }

.hero-portrait{ margin:0; }
.hero-portrait img{
  width:300px; height:auto; display:block;
  border-radius:6px; border:1px solid var(--rule-mid);
}

/* ---------- sections ---------- */
main{ padding:6px 0 0; }
.section{
  max-width:var(--maxw); margin:0 auto; padding:38px 32px;
  border-top:1px solid var(--rule);
}
.section:first-child{ border-top:0; }
.section h2{
  font-family:var(--serif); font-size:31px; font-weight:700; letter-spacing:-.015em;
  margin:0 0 20px;
}
.lead{ font-size:21px; line-height:1.55; }
.statement{ font-size:20px; font-weight:600; color:var(--accent-dark); margin-top:6px; }

/* ---------- page head (inner pages) ---------- */
.page-head{ max-width:var(--maxw); margin:0 auto; padding:56px 32px 6px; }
.page-head h1{
  font-family:var(--serif); font-size:clamp(40px, 5.5vw, 52px); font-weight:700;
  letter-spacing:-.02em; margin:0;
}

/* ---------- research entries ---------- */
.entry{ margin:0 0 38px; }
.entry:last-child{ margin-bottom:0; }
.entry .title{
  font-family:var(--serif); font-size:23px; font-weight:600; line-height:1.28; margin:0;
}
.entry .title a{ color:var(--accent); }
.entry .title a:hover{ color:var(--accent-dark); }
.entry .title.book{ font-style:italic; color:var(--ink); }
.entry .meta{ font-size:15.5px; color:var(--body-2); margin:7px 0 0; line-height:1.5; }
.entry .meta.highlight{ color:var(--accent); font-weight:600; }
/* Home "featured" section: black titles, larger status line */
.highlights .entry .title a{ color:var(--ink); }
.highlights .entry .title a:hover{ color:var(--accent); }
.highlights .entry .meta.highlight{ font-size:19px; margin-top:8px; }
.entry .abstract{ font-size:17.5px; line-height:1.62; color:#2f3136; margin:14px 0 0; }
.entry .plinks{ font-size:15px; margin:14px 0 0; display:flex; gap:22px; }
.badge{
  display:inline-block; font-family:var(--sans); font-size:11.5px; font-weight:600;
  letter-spacing:.05em; text-transform:uppercase; color:var(--accent);
  border:1px solid var(--accent-tint); background:rgba(17,85,204,.05);
  border-radius:3px; padding:3px 8px; margin-left:11px; vertical-align:middle;
  position:relative; top:-3px; white-space:nowrap;
}

/* ---------- footer ---------- */
footer{ background:var(--header-bg); margin-top:52px; }
.footer-inner{
  max-width:var(--maxw); margin:0 auto; padding:28px 32px;
  font-size:14px; color:var(--header-muted); font-family:var(--sans);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px 20px;
}
.footer-inner a{ color:var(--header-blue); }
.footer-inner a:hover{ color:#fff; }

/* ---------- responsive ---------- */
@media (max-width:760px){
  body{ font-size:18px; }
  .hero{ grid-template-columns:1fr; gap:28px; padding-top:44px; }
  .hero-portrait{ order:-1; }
  .hero-portrait img{ width:210px; }
  .nav{ gap:20px; }
  .section h2{ font-size:27px; }
}