/* =====================================================================
   ANDRES SAMPER — Offensive Security
   Plain academic style, inspired by nicholas.carlini.com
   ===================================================================== */

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; }
img { display: block; max-width: 100%; }

/* ---------- Tokens ---------- */
:root {
  --bg:          #FEFEFE;
  --bar:         #FFFFFF;
  --text:        #222222;
  --muted:       #555555;
  --link:        #A02020;
  --link-hover:  #C03030;
  --rule:        #DDDDDD;
  --rule-strong: #D0D0D0;
  --code-bg:     #F8F8F8;
  --code-bar:    #EFEFEF;
  --btn:         #663333;
  --btn-hover:   #884444;
  --mark:        #FFFFBB;

  --serif: "Lora", Georgia, "Times New Roman", serif;
  --mono:  ui-monospace, "SF Mono", "Menlo", "Consolas", "Liberation Mono", monospace;
  --col: 60em;
}

/* ---------- Base ---------- */
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--serif);
  line-height: 1.7;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  font-size: 18px;
}
@media (max-width: 40em) { body { font-size: 17px; } }

p { margin: 0 0 .75em; }
a { color: var(--link); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
a:hover { color: var(--link-hover); }
strong, b { font-weight: 700; }
mark { background: var(--mark); padding: 0 .1em; }
hr { border: none; border-top: 1px solid var(--rule); margin: 2em 0; }
::selection { background: #f4d9d9; }

/* =====================================================================
   TOP BAR
   ===================================================================== */
.topbar {
  position: sticky; top: 0; z-index: 10;
  width: 100%;
  background: var(--bar);
  border-bottom: 1px solid var(--rule-strong);
  box-shadow: 0 0 12px rgba(0,0,0,.10);
}
.topbar-inner {
  max-width: var(--col);
  margin: 0 auto;
  padding: .85em 1em;
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1em; flex-wrap: wrap;
}
.brand {
  font-size: 1.4em;
  font-variant: small-caps;
  letter-spacing: .15em;
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
}
.brand:hover { color: var(--text); }
.nav { display: flex; align-items: baseline; gap: 1.1em; flex-wrap: wrap; font-size: 1.02em; }
.nav a { text-decoration: none; }
.nav a:hover { text-decoration: underline; }
.nav a.current { color: var(--text); font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }
.nav .button { text-decoration: none; }

/* ---------- Maroon button ---------- */
.button {
  display: inline-block; text-align: center; white-space: nowrap;
  border: 1px solid #000; border-radius: .25em;
  padding: .15em .55em;
  color: #fff !important; background: var(--btn);
  font-size: .9em; transition: background .35s;
}
.button:hover { color: #fff !important; background: var(--btn-hover); }

/* =====================================================================
   LAYOUT
   ===================================================================== */
.container { max-width: var(--col); margin: 0 auto; padding: 1.8em 1em 3em; }

/* ---------- Profile / intro ---------- */
.intro { display: grid; grid-template-columns: 1fr 285px; gap: 2.6em; align-items: start; margin-bottom: 1.6em; }
.intro-body { min-width: 0; }

/* ---------- Photo card: portrait + name + position + links ---------- */
.photo-card {
  border: 1px solid var(--rule-strong); border-radius: 6px; overflow: hidden;
  background: #fff; box-shadow: 0 2px 24px rgba(0,0,0,.06);
}
.photo-img { position: relative; width: 100%; aspect-ratio: 1; background: #f3f3f3; }
.photo-img img { width: 100%; height: 100%; object-fit: cover; display: block; position: relative; z-index: 1; }
.portrait-ph {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: .5em; color: #aaa;
}
.portrait-ph svg { width: 34%; max-width: 66px; }
.portrait-ph span { font-family: var(--mono); font-size: .62rem; letter-spacing: .18em; text-transform: uppercase; }
.photo-info { padding: 16px 26px 18px; text-align: center; border-top: 1px solid var(--rule); }
.photo-name {
  font-variant: small-caps; letter-spacing: .08em; font-weight: 700;
  font-size: 1.2em; color: var(--text); margin-bottom: 3px;
}
.photo-title { font-style: normal; font-size: .92em; color: var(--muted); line-height: 1.5; margin-bottom: 11px; }
.photo-links { display: flex; justify-content: center; align-items: center; gap: 9px; }
.photo-links a {
  font-family: var(--serif); font-size: .82em; letter-spacing: .05em;
  text-transform: uppercase; color: var(--link); text-decoration: none; font-weight: 600;
}
.photo-links a:hover { color: var(--text); text-decoration: underline; }
.photo-links .sep { color: var(--rule-strong); }

/* ---------- Simulated terminal (light, cohesive) ---------- */
.terminal {
  max-width: 40em; margin: 1.4em 0;
  border: 1px solid var(--rule); border-radius: 6px; overflow: hidden;
  background: var(--code-bg);
  box-shadow: 0 0 12px rgba(0,0,0,.05);
}
.terminal-bar {
  display: flex; align-items: center; gap: .45em;
  padding: .5em .75em; background: var(--code-bar); border-bottom: 1px solid #E4E4E4;
}
.tdot { width: 11px; height: 11px; border-radius: 50%; background: #cfcfcf; }
.tdot:nth-child(1) { background: #ff5f57; }
.tdot:nth-child(2) { background: #febc2e; }
.tdot:nth-child(3) { background: #28c840; }
.ttitle { margin-left: .5em; font-family: var(--mono); font-size: .74em; color: #999; }
.terminal-body {
  padding: .85em 1em; font-family: var(--mono);
  font-size: .82em; line-height: 1.75; color: #333; min-height: 130px;
}
.terminal-body .prompt { color: var(--link); }
.terminal-body .path { color: #2a7a4f; }
.terminal-body .out { color: #555; }
.terminal-body .out b { color: #222; font-weight: 600; }
.cursor {
  display: inline-block; width: .55em; height: 1.05em; background: #444;
  transform: translateY(.16em); animation: blink 1.05s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .cursor { animation: none; } }

/* =====================================================================
   SECTIONS
   ===================================================================== */
section { margin-top: 2.2em; scroll-margin-top: 4.5em; }
.section-header {
  font-size: 1.55em; font-weight: 600; line-height: 1.2;
  border-bottom: 2px solid var(--rule);
  padding-bottom: .25em; margin: 0 0 .9em;
}
.lead { margin-bottom: 1.2em; }

/* ---------- Entry list (experience etc.) ---------- */
.entries { list-style: none; margin: 0; padding: 0; }
.entries > li { padding-bottom: 1.3em; margin-bottom: 1.3em; border-bottom: 1px solid #ECECEC; }
.entries > li:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.entry-head { margin-bottom: .35em; }
.entry-title { font-weight: 700; font-size: 1.08em; }
.entry-meta { color: var(--muted); }
.entry-when { float: right; color: var(--muted); font-style: italic; font-size: .95em; margin-left: 1em; }
.bullets { margin: .5em 0 0; padding-left: 1.3em; }
.bullets li { padding-bottom: .25em; }

/* ---------- Detailed certification entries (logo + description) ---------- */
.cert-list { list-style: none; margin: 0; padding: 0; }
.cert-list > li {
  display: flex; gap: 1.3em; align-items: flex-start;
  padding: 1.3em 0; border-bottom: 1px solid var(--rule);
}
.cert-list > li:first-child { padding-top: 0; }
.cert-list > li:last-child { border-bottom: none; padding-bottom: 0; }
.cert-logo {
  flex: 0 0 auto; width: 66px; height: 66px; position: relative;
  border: 1px solid var(--rule-strong); border-radius: 8px; overflow: hidden; background: #fff;
}
.cert-logo img { width: 100%; height: 100%; object-fit: contain; padding: 7px; display: block; position: relative; z-index: 1; }
.cert-logo-ph {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: .64rem; font-weight: 700; letter-spacing: .03em;
  color: var(--link); text-align: center; padding: 4px; line-height: 1.2;
}
.cert-item-body { flex: 1 1 auto; min-width: 0; }
.cert-item-name { font-weight: 700; font-size: 1.06em; margin-bottom: .3em; }
.cert-item-name .issuer { color: var(--muted); font-weight: 400; }
.cert-item-desc { color: var(--muted); margin: 0; font-size: .95em; line-height: 1.6; }
@media (max-width: 32em) {
  .cert-logo { width: 54px; height: 54px; }
}

/* ---------- Definition-style rows (skills) ---------- */
.deflist { margin: 0; }
.deflist .row { display: flex; gap: .7em; padding: .35em 0; border-bottom: 1px solid #ECECEC; flex-wrap: wrap; }
.deflist .row:last-child { border-bottom: none; }
.deflist dt { flex: 0 0 11em; font-weight: 700; }
.deflist dd { margin: 0; flex: 1 1 16em; color: #333; }
@media (max-width: 40em) { .deflist dt { flex-basis: 100%; } }

/* ---------- Inline note / aside ---------- */
.note { color: var(--muted); font-size: .95em; }

/* ---------- Cert inline list ---------- */
.certs { margin: 0; padding-left: 1.3em; }
.certs li { padding-bottom: .35em; }
.certs b { font-weight: 700; }

/* =====================================================================
   FOOTER
   ===================================================================== */
.footer {
  max-width: var(--col); margin: 0 auto; padding: 1.5em 1em 2.5em;
  border-top: 1px solid var(--rule); color: var(--muted); font-size: .92em;
  display: flex; gap: 1em; justify-content: space-between; flex-wrap: wrap;
}
.footer a { text-decoration: none; }
.footer a:hover { text-decoration: underline; }

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width: 44em) {
  .intro { grid-template-columns: 1fr; gap: 1.6em; }
  .photo-col { order: -1; max-width: 270px; margin: 0 auto; }
  .entry-when { float: none; display: block; margin: 0 0 .2em; }
}