@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&family=Inter:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  --bg:#FAF9F5;
  --ink:#1B2622;
  --ink-soft:#4B564F;
  --line:#DEDCD0;
  --teal:#0F6E56;
  --teal-deep:#085041;
  --paper:#FFFFFF;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:'Inter',sans-serif;
  font-size:16px;
  line-height:1.65;
}

::selection{background:var(--teal);color:#fff;}

a{color:inherit;}

.wrap{
  max-width:820px;
  margin:0 auto;
  padding:0 28px;
}

/* Nav */
header.site{
  border-bottom:1px solid var(--line);
  position:sticky;
  top:0;
  background:rgba(250,249,245,0.92);
  backdrop-filter:blur(6px);
  z-index:10;
}
.navrow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:18px 0;
}
.brand{
  font-family:'Fraunces',serif;
  font-weight:600;
  font-size:19px;
  letter-spacing:-0.01em;
  text-decoration:none;
}
.brand span{color:var(--teal);}
nav.links{display:flex;gap:26px;}
nav.links a{
  text-decoration:none;
  font-size:14px;
  color:var(--ink-soft);
  border-bottom:1px solid transparent;
  padding-bottom:2px;
  transition:border-color .15s ease, color .15s ease;
}
nav.links a:hover, nav.links a.active{
  color:var(--ink);
  border-bottom-color:var(--teal);
}

/* Eyebrow / labels */
.eyebrow{
  font-family:'IBM Plex Mono',monospace;
  font-size:12px;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--teal-deep);
  display:flex;
  align-items:center;
  gap:8px;
}
.eyebrow::before{
  content:'';
  width:6px;height:6px;border-radius:50%;
  background:var(--teal);
  display:inline-block;
}

/* Hero */
.hero{padding:64px 0 48px;}
.hero h1{
  font-family:'Fraunces',serif;
  font-weight:500;
  font-size:42px;
  line-height:1.15;
  margin:14px 0 18px;
  letter-spacing:-0.01em;
}
.hero p.lede{
  font-size:17px;
  color:var(--ink-soft);
  max-width:560px;
  margin:0 0 28px;
}
.hero .actions{display:flex;gap:14px;flex-wrap:wrap;}
.btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 18px;
  border-radius:4px;
  font-size:14px;
  text-decoration:none;
  border:1px solid var(--ink);
}
.btn.primary{background:var(--ink);color:var(--paper);}
.btn.ghost{border-color:var(--line);color:var(--ink-soft);}
.btn:hover{opacity:0.85;}

/* Trail: the signature element - a horizontal data-trail timeline */
.trail{
  position:relative;
  padding:34px 0 8px;
  margin:36px 0 8px;
}
.trail-line{
  position:absolute;
  top:47px;
  left:0;right:0;
  height:1px;
  background:var(--line);
}
.trail-points{
  display:flex;
  justify-content:space-between;
  position:relative;
}
.trail-point{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  width:31%;
}
.trail-dot{
  width:9px;height:9px;border-radius:50%;
  background:var(--paper);
  border:2px solid var(--teal);
  margin-bottom:14px;
  z-index:1;
}
.trail-point.current .trail-dot{background:var(--teal);}
.trail-year{
  font-family:'IBM Plex Mono',monospace;
  font-size:11px;
  color:var(--ink-soft);
  margin-bottom:4px;
}
.trail-role{font-weight:600;font-size:14px;margin-bottom:2px;}
.trail-org{font-size:13px;color:var(--ink-soft);}

/* Sections */
section{padding:44px 0;border-top:1px solid var(--line);}
section h2{
  font-family:'Fraunces',serif;
  font-weight:500;
  font-size:24px;
  margin:0 0 22px;
}

/* Cards */
.card{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:6px;
  padding:22px 24px;
  margin-bottom:14px;
}
.card h3{
  font-size:16px;
  margin:0 0 4px;
  font-weight:600;
}
.card .meta{
  font-family:'IBM Plex Mono',monospace;
  font-size:12px;
  color:var(--ink-soft);
  margin-bottom:10px;
}
.card p{margin:0;color:var(--ink-soft);font-size:14.5px;}
.card ul{margin:10px 0 0;padding-left:18px;color:var(--ink-soft);font-size:14.5px;}
.card ul li{margin-bottom:6px;}

/* Skills grid */
.skills{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.skill{
  font-family:'IBM Plex Mono',monospace;
  font-size:12.5px;
  padding:7px 12px;
  border:1px solid var(--line);
  border-radius:4px;
  background:var(--paper);
  color:var(--ink-soft);
}

/* Cert grid */
.certgrid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}
@media (max-width:620px){.certgrid{grid-template-columns:1fr;}}

/* Footer */
footer{
  border-top:1px solid var(--line);
  padding:32px 0 48px;
  margin-top:20px;
}
footer .wrap{
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:14px;
}
footer .flinks{display:flex;gap:20px;}
footer a{font-size:13.5px;color:var(--ink-soft);text-decoration:none;}
footer a:hover{color:var(--teal-deep);}
.flyrank-badge{display:inline-block;line-height:0;opacity:.9;transition:opacity .15s ease;}
.flyrank-badge:hover{opacity:1;}
.flyrank-badge img{display:block;border-radius:8px;}
.small{font-size:12.5px;color:var(--ink-soft);font-family:'IBM Plex Mono',monospace;}

/* Still-ugly note (assignment requirement, kept visible + honest) */
.honest{
  background:#F2EFE4;
  border:1px dashed var(--line);
  border-radius:6px;
  padding:16px 20px;
  font-size:13.5px;
  color:var(--ink-soft);
}
.honest strong{color:var(--ink);}

@media (max-width:640px){
  .hero h1{font-size:32px;}
  .trail-points{flex-direction:column;gap:20px;}
  .trail-point{width:100%;}
  .trail-line{display:none;}
  /* --- Week 3: interactivity & visual rhythm --- */

/* Cards lift subtly on hover — signals "this is worth reading" */
.card{
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.card:hover{
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(15,110,86,0.08);
  border-color: var(--teal);
}

/* Skill tags get a small hover state too, ties accent color through the page */
.skill{
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.skill:hover{
  background: var(--teal);
  color:#fff;
  border-color: var(--teal);
}

/* Trail dots grow slightly on hover — small, tasteful motion on your signature element */
.trail-dot{
  transition: transform .15s ease;
}
.trail-point:hover .trail-dot{
  transform: scale(1.3);
}

/* Gentle fade-and-rise on page load so content doesn't just "appear" */
section, .hero{
  animation: rise .5s ease both;
}
.hero{animation-delay:0s;}
section:nth-of-type(1){animation-delay:.05s;}
section:nth-of-type(2){animation-delay:.1s;}
section:nth-of-type(3){animation-delay:.15s;}
section:nth-of-type(4){animation-delay:.2s;}

@keyframes rise{
  from{opacity:0; transform:translateY(10px);}
  to{opacity:1; transform:translateY(0);}
}

/* Respect users who prefer no motion */
@media (prefers-reduced-motion: reduce){
  .card, .skill, .trail-dot, section, .hero{
    animation:none;
    transition:none;
  }
}
}