/* =======================
   Base tokens
======================= */
:root{
  --bg:#0b0f1a;
  --fg:#e6e9f2;
  --muted:#9aa3b2;
  --accent:#5eead4;
  --card:#11172a;
  --header-h:72px;

  /* nav hover colours */
  --gold:#f6d365;
  --gold-hero:#ffffff;
  --gold-ink:#d1aa2d;
}

/* =======================
   Resets / basics
======================= */
*{ box-sizing:border-box; }
html,body{
  margin:0; padding:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:var(--bg); color:var(--fg);
}
a{ color:inherit; text-decoration:none; }
.section{ padding:64px 20px; max-width:1100px; margin:0 auto; }

h1,h2,h3{ line-height:1.2; }
h1{ font-size:48px; margin:0 0 8px; }
h2{ font-size:32px; margin:0 0 24px; }

/* =======================
   Header / Nav
======================= */
.site-header{
  position:fixed; top:0; left:0; right:0;
  background:transparent; box-shadow:none; z-index:100;
  transition: background-color .25s ease, box-shadow .25s ease, color .25s ease;
}
.nav{
  max-width:1100px; margin:0 auto;
  display:grid; grid-template-columns:1fr auto; align-items:center;
  padding:27px 29px;
}
.nav-links{
  justify-self:center; display:flex; gap:50px; list-style:none; margin:0; padding:0;
}
.nav-links a{
  text-transform:uppercase; letter-spacing:.05em;
  font-weight:400; font-size:15px;
  transition: color .18s ease;
}
.nav-toggle{ justify-self:end; display:none; background:transparent; border:0; color:var(--fg); font-size:22px; }

/* Colours at top (over hero) */
.site-header:not(.is-scrolled) .nav-links a{ color:var(--gold-hero); }
.site-header:not(.is-scrolled) .nav-links a:hover,
.site-header:not(.is-scrolled) .nav-links a:focus-visible{ color:var(--gold); }

/* After scroll */
.site-header.is-scrolled{
  background:rgba(255,255,255,.98);
  backdrop-filter:saturate(140%) blur(8px);
  box-shadow:0 1px 0 rgba(0,0,0,.12);
}
.site-header.is-scrolled .nav-links a,
.site-header.is-scrolled .nav-toggle{ color:#0b0f1a; }
.site-header.is-scrolled .nav-links a:hover,
.site-header.is-scrolled .nav-links a:focus-visible{ color:var(--gold-ink); }

/* Keep burger white on hero */
.site-header .nav-toggle{ color:#fff; }

/* Mobile menu */
@media (max-width:720px){
  .nav{ grid-template-columns:1fr auto; }
  .nav-links{
    display:none; position:absolute; top:56px; left:0; right:0;
    background:rgba(11,15,26,.95);
    padding:12px 20px; flex-direction:column; align-items:center; gap:12px;
    border-top:1px solid #1a2340;
  }
  .nav-toggle{ display:inline-block; }
}

/* Anchor offsets for fixed header */
.section, .hero, #quote, #portfolio, #resume, #about, #contact { scroll-margin-top: var(--header-h); }

/* =======================
   Cards / grid / buttons
======================= */
.grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(260px,1fr)); gap:20px; }
.card{ background:var(--card); border-radius:16px; overflow:hidden; box-shadow:0 10px 30px rgba(0,0,0,.2); }
.card img{ width:100%; height:180px; object-fit:cover; display:block; }
#portfolio .card img{ height:clamp(220px,26vw,240px); }
.card-body{ padding:16px; }

.btn{ display:inline-block; padding:12px 18px; background:var(--accent); color:#062726; border-radius:12px; font-weight:600; border:0; cursor:pointer; }
.btn-outline{ background:transparent; border:1px solid var(--accent); color:var(--accent); }

/* Neutral grey button style used in the site */
.btn, .btn-outline{
  background:#0b0f1a;
  color:#e6e9f2;
  border:1px solid #1a2340;
  transition: background .2s ease, border-color .2s ease, transform .12s ease;
}
.btn-outline{ background:transparent; }
.btn:hover, .btn:focus-visible,
.btn-outline:hover, .btn-outline:focus-visible{
  background:#18223a; border-color:#3a4a78; transform:translateY(-1px); outline:none;
}
.btn:active, .btn-outline:active{ transform:translateY(0); }
.btn[disabled], button[disabled].btn{ opacity:.6; cursor:not-allowed; transform:none; }

/* Force the Portfolio “View” buttons to match the ghost style */
#portfolio .card .btn,
#portfolio .card .btn-outline{
  background:#0f1523 !important;
  color:#e6e9f2 !important;
  border:1px solid rgba(255,255,255,.12) !important;
  box-shadow:none !important;
}
#portfolio .card .btn:hover,
#portfolio .card .btn:focus-visible,
#portfolio .card .btn-outline:hover,
#portfolio .card .btn-outline:focus-visible{
  background:#18223a !important; border-color:#3a4a78 !important; transform:translateY(-1px);
}
#portfolio .card .btn:active,
#portfolio .card .btn-outline:active{ transform:translateY(0); }

/* Make portfolio cards equal height so buttons align */
#portfolio .grid{ grid-auto-rows:1fr; }
#portfolio .card{ height:100%; display:flex; flex-direction:column; }
#portfolio .card-body{ flex:1; display:flex; flex-direction:column; }
#portfolio .card-body .btn{ margin-top:auto; align-self:flex-start; }

/* =======================
   Timeline
======================= */
.timeline .item{ padding:16px; border-left:3px solid #1a2340; margin:0 0 16px; background:#0e1526; border-radius:8px; }
.item-head{ font-weight:600; }
.item-meta{ color:var(--muted); font-size:14px; margin:4px 0 8px; }
.timeline .item .item-points{ margin:8px 0 0; padding-left:18px; color:var(--muted); line-height:1.55; }
.timeline .item .item-points li + li{ margin-top:6px; }

/* =======================
   HERO
======================= */
.hero{
  --hvis:1;
  position:relative; display:grid; place-items:center;
  min-height:100vh; padding:0 20px; overflow:hidden;
}
@supports (height:100svh){ .hero{ min-height:100svh; } }
.hero::before{
  content:""; position:absolute; inset:0; z-index:0;
  background:url("../img/hero.jpeg") center 32% / cover no-repeat;
  opacity:var(--hvis); transition:opacity .15s linear;
}
.hero::after{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(11,15,26,.55), rgba(11,15,26,.65));
  opacity:var(--hvis);
}
.hero-inner{ position:relative; z-index:2; text-align:center; transform:translateY(6vh); }
.hero h1{ font-weight:400; }
.hero h1 .accent{ color:#fff; font-weight:300; }

/* =======================
   QUOTE (parallax + vignette + fuse)
======================= */
#quote{
  position:relative; max-width:none; width:100%; margin:0; color:#fff;
  min-height:calc(100vh - var(--header-h));
  display:grid; place-items:center; text-align:center; padding:0 20px;
  background:none !important; overflow:hidden;
}
@supports (height:100svh){ #quote{ min-height:calc(100svh - var(--header-h)); } }

#quote::before{
  content:""; position:absolute; inset:0; z-index:0;
  background:url("../img/space.jpg") center / cover no-repeat;
  transform: translateY(var(--qparallax, 0px)) scale(1.28); /* zoom headroom */
  will-change: transform;
  opacity:var(--qvis,1); transition:opacity .15s linear;
}

#quote::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(160% 140% at 50% 46%,
      rgba(11,15,26,0) 48%,
      rgba(11,15,26,.22) 66%,
      rgba(11,15,26,.55) 86%,
      rgba(11,15,26,.85) 100%
    ),
    linear-gradient(to bottom,
      rgba(11,15,26,1) 0%,
      rgba(11,15,26,.62) 16%,
      rgba(11,15,26,.36) 50%,
      rgba(11,15,26,.62) 84%,
      rgba(11,15,26,1) 100%
    );
  opacity: calc(.56 + .44 * var(--qvis, 1));
  box-shadow:
    inset 0 0 120px rgba(11,15,26,.55),
    inset 0 0 240px rgba(11,15,26,.35);
}

#quote .quote-box{ position:relative; z-index:3; max-width:900px; padding:clamp(24px,4vw,40px) 20px; }
#quote figcaption{ color:rgba(230,233,242,.85); }
.hero + #quote{ margin-top:0 !important; }
.quote blockquote{ margin:0; font-size:clamp(22px,3vw,36px); line-height:1.35; font-weight:600; }

/* Bottom fuse to remove any seam with next section */
#quote .quote-fuse{
  position:absolute; left:0; right:0; top:0; bottom:-250px;
  z-index:2; pointer-events:none;
  background:linear-gradient(to bottom,
    rgba(11,15,26,0) 58%,
    rgba(11,15,26,.85) 82%,
    rgba(11,15,26,.95) 90%,
    #0b0f1a 100%
  );
}

/* =======================
   ABOUT
======================= */
#about{
  --edge-a: calc(0.10 + 0.90 * var(--avis, 0));
  --text-base: .30;
  --text-boost: calc(.55 * var(--avis, 0));
  --text-a: calc(var(--text-base) + var(--text-boost));
  --fade-edge: clamp(8%, 10vh, 16%);

  position:relative; max-width:none; width:100%; margin:0;
  min-height:calc(100vh - var(--header-h));
  display:grid; align-items:center;
  padding:clamp(64px,10vh,120px) 0;
  overflow:hidden;
}
@supports (height:100svh){ #about{ min-height:calc(100svh - var(--header-h)); } }

#about::before{
  content:""; position:absolute; inset:0; z-index:0;
  background:url("../img/code.jpg") center / cover no-repeat;
  opacity:var(--avis,0); transition:opacity .15s linear;
  -webkit-mask-image:linear-gradient(to bottom, transparent 0%, #000 var(--fade-edge), #000 calc(100% - var(--fade-edge)), transparent 100%);
          mask-image:linear-gradient(to bottom, transparent 0%, #000 var(--fade-edge), #000 calc(100% - var(--fade-edge)), transparent 100%);
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-size:100% 100%; mask-size:100% 100%;
}
#about::after{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:linear-gradient(to bottom,
    rgba(11,15,26,var(--edge-a)) 0%,
    rgba(11,15,26,0) 28%,
    rgba(11,15,26,0) 72%,
    rgba(11,15,26,var(--edge-a)) 100%);
}

#about .about-grid{ position:relative; z-index:1; max-width:1100px; width:100%; padding:0 20px; margin:0 auto; }
.about-grid{ display:grid; grid-template-columns:1.2fr 1fr; align-items:start; gap:clamp(28px,5vw,56px); }

.about-title{ margin:0 0 clamp(20px,2.8vw,40px); font-size:clamp(36px,3.8vw,60px); line-height:1.15; font-weight:300; }
.about-title .accent{ font-weight:800; }

.about-lead{ margin:0 0 10px; font-size:clamp(19px,1.6vw,23px); line-height:1.7; color:var(--fg); font-weight:500; }

#about .about-text{ position:relative; z-index:1; isolation:isolate; margin-top:clamp(26px,5vh,64px); font-size:1.02rem; }
#about .about-text::before{
  content:""; position:absolute; inset:-14px -18px; border-radius:16px;
  background:rgba(11,15,26,var(--text-a)); box-shadow:0 0 0 1px rgba(255,255,255,.04) inset; z-index:-1; transition:background .15s linear;
}
@supports (backdrop-filter: blur(3px)) or (-webkit-backdrop-filter: blur(3px)){
  #about .about-text::before{ backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
}
.about-text p{
  max-width:58ch; font-size:clamp(18px,1.45vw,21px); line-height:1.7; color:var(--fg);
  text-shadow:0 1px 2px rgba(0,0,0,.65), 0 10px 32px rgba(0,0,0,.45);
}

.about-media{ margin:0; position:relative; isolation:isolate; }
.about-photo{
  width:100%; max-width:520px; aspect-ratio:4/5; object-fit:cover; justify-self:end;
  border-radius:20px; border:2px solid rgba(255,255,255,.06); box-shadow:0 16px 40px rgba(0,0,0,.35);
}
#about .about-media::before{
  content:""; position:absolute; inset:2px; border-radius:18px;
  background:rgba(11,15,26,var(--text-a)); z-index:-1; box-shadow:none;
}

@media (max-width:900px){
  .about-grid{ grid-template-columns:1fr; }
  .about-photo{ justify-self:center; max-width:560px; }
}

/* Section spacing tweaks */
#resume + #about{ margin-top:clamp(24px,4vh,48px); }
#about + #contact{ margin-top:clamp(24px,4vh,48px); }

/* =======================
   RESUME / Education modules
======================= */
.resume-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(20px,3vw,32px); align-items:start; margin-top:12px; }
.resume-subtitle{ margin:0 0 12px; font-size:clamp(18px,1.6vw,22px); color:var(--fg); opacity:.95; }
.resume-col .timeline{ display:grid; gap:14px; }
@media (max-width:900px){ .resume-grid{ grid-template-columns:1fr; } }

.edu-mods{ display:grid; grid-template-columns:repeat(5,1fr); gap:12px; margin-top:12px; }
@media (max-width:1200px){ .edu-mods{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:780px){ .edu-mods{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .edu-mods{ grid-template-columns:1fr; } }

.edu-mods a.mod,.edu-mods .mod{
  display:flex; flex-direction:column; justify-content:space-between;
  background:#0b0f1a; border:1px solid #1a2340; border-radius:12px; padding:12px; min-height:110px;
  color:inherit; text-decoration:none; cursor:pointer; transition:background .2s ease, border-color .2s ease, transform .12s ease;
}
.edu-mods .mod.pending{ cursor:default; opacity:.75; }
.edu-mods .mod:not(.pending):hover{ background:#131b2e; border-color:#2a3558; transform:translateY(-1px); }
.mod-head{ font-weight:600; font-size:14px; line-height:1.3; }

.mod-meta{
  margin-top:auto; display:inline-flex; align-items:center; gap:8px;
  white-space:nowrap; line-height:1; font-size:12px; color:var(--muted);
}
.mod-meta::before{ content:""; width:8px; height:8px; border-radius:50%; display:inline-block; background:var(--accent); }
.mod.complete .mod-meta{ color:var(--accent); }
.mod.pending .mod-meta::before{ background:#7a8193; }

/* Dropdown trigger (modules) */
.item details summary.edu-summary{
  display:inline-block; padding:12px 18px; border-radius:12px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.02);
  color:#e6e9f2; font-weight:700; cursor:pointer; user-select:none; list-style:none;
  transition: background .18s ease, border-color .18s ease, box-shadow .18s ease, transform .08s ease, color .18s ease;
}
.item details summary.edu-summary::-webkit-details-marker{ display:none; }
.item details summary.edu-summary::after{ content:"▾"; margin-left:8px; opacity:.9; transition:transform .18s ease; }
.item details[open] summary.edu-summary::after{ transform:rotate(180deg); }
.item details summary.edu-summary:hover{
  background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.22);
  box-shadow:0 8px 24px rgba(0,0,0,.28); transform:translateY(-1px);
}
.item details summary.edu-summary:active{ transform:translateY(0); }
.item details summary.edu-summary:focus{ outline:none; }
.item details summary.edu-summary:focus-visible{
  outline:none; box-shadow:0 0 0 2px rgba(255,255,255,.16), 0 8px 28px rgba(0,0,0,.35);
}
.edu-mods-wrap[open] .edu-mods{ margin-top:10px; }

/* =======================
   CONTACT
======================= */
#contact{
  position: relative;
  max-width: none;
  width: 100%;
  margin: 0;
  padding: clamp(64px, 12vh, 120px) 0 clamp(56px, 10vh, 96px);
  overflow: hidden;
}
#contact::before{
  content:""; position:absolute; inset:0; z-index:0;
  background:
    linear-gradient(
      to bottom,
      rgba(11,15,26, .95) 0%,
      rgba(11,15,26, .45) 16%,
      rgba(11,15,26,  0) 48%,
      rgba(11,15,26, .55) 82%,
      rgba(11,15,26, .95) 100%
    ),
    url("../img/contact.jpg") center / cover no-repeat;
  opacity: var(--cvis, 0);
  transition: opacity .15s linear;
  pointer-events: none;
}
#contact::after{
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(11,15,26,1) 0%,
    rgba(11,15,26,.70) 12%,
    rgba(11,15,26,.40) 26%,
    rgba(11,15,26,0) 46%
  );
}

/* Title */
#contact .about-title{
  position: relative; z-index: 2; color: #fff; font-weight: 300;
  margin: clamp(24px, 10vh, 48px) 0 16px;
  text-shadow: 0 8px 30px rgba(0,0,0,.35); text-align:center;
}
#contact .about-title .accent{ color:#fff; font-weight:800; }

/* Layout: form | socials */
#contact .contact-inner{
  position: relative; z-index: 2; max-width: 1200px; margin: 0 auto; padding: 0 16px;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: clamp(28px, 4vw, 64px);
  align-items: center; justify-content: center;
}
@media (max-width: 1023px){
  #contact .contact-inner{ grid-template-columns: 1fr; row-gap: 16px; justify-items: center; }
}

/* Form */
#contact .contact-form{
  width: 100%; max-width: 480px; /* 50% of earlier 960px */
  margin: 0 auto; display: grid; gap: 12px; padding: clamp(20px, 3vw, 28px);
  background: rgba(11,15,26,.55); border: 1px solid rgba(255,255,255,.06);
  border-radius: 16px; box-shadow: 0 16px 48px rgba(0,0,0,.35);
}
@supports (backdrop-filter: blur(6px)) or (-webkit-backdrop-filter: blur(6px)){
  #contact .contact-form{ backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); background: rgba(11,15,26,.45); }
}
#contact .contact-form label{ display: grid; gap: 6px; font-weight: 600; color: var(--fg); }
#contact .contact-form input,
#contact .contact-form textarea,
#contact .contact-form button{
  width: 100%; box-sizing: border-box; background: rgba(14,21,38,.8);
  border: 1px solid #1a2340; border-radius: 10px; color: var(--fg); padding: 12px;
}
@media (max-width: 640px){
  #contact .contact-form{ max-width: 600px; border-radius: 14px; }
  #contact .contact-form textarea{ min-height: 140px; }
}

/* Socials panel */
#contact .socials-panel{
  align-self: start; width: fit-content; max-width: 100%;
  display: grid; align-content: start; gap: 10px; padding: 14px 16px;
  border-radius: 16px; background: rgba(11,15,26,.42);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 16px 48px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.03) inset;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}

/* Panel title */
#contact .socials-title{
  margin: 0 0 10px; font-size: clamp(18px, 1.6vw, 24px); font-weight: 600; color:#fff; text-align:center;
}

/* Icons: force a 2×2 grid (LinkedIn | YouTube on top, Medium | GitHub under) */
#contact .socials-icons{
  display: grid;
  grid-template-columns: repeat(2, auto);
  gap: 14px 16px;
  justify-content: center;
  justify-items: center;
  align-items: center;
}

/* Icon tiles */
#contact .socials-panel .social{
  display:inline-flex; align-items:center; justify-content:center;
  width:100px; height:100px; border-radius:16px;
  background: rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.10);
  box-shadow: 0 10px 28px rgba(0,0,0,.28) inset, 0 8px 24px rgba(0,0,0,.26);
  transition: transform .12s ease, background .18s ease, border-color .18s ease;
}
#contact .socials-panel .social--wide{ width:145px; height:100px; }
#contact .socials-panel .social img{ width:80%; height:80%; object-fit:contain; }
#contact .socials-panel .social:hover,
#contact .socials-panel .social:focus-visible{
  transform:translateY(-1px); background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.18); outline:none;
}

/* Mobile tweaks */
@media (max-width: 1023px){
  #contact .socials-panel{ justify-self: center; margin-top: 6px; }
}
@media (max-width: 640px){
  #contact .socials-panel .social{ width:56px; height:56px; border-radius:12px; }
  #contact .socials-panel .social--wide{ width:104px; height:56px; }
}

/* =======================
   Footer
======================= */
.site-footer{ text-align:center; padding:12px 20px; color:var(--muted); border-top:1px solid #1a2340; margin-top:20px; }
.site-footer p{ margin:0; line-height:1.4; }

/* ===== Resume: split modules into two neat columns ===== */
.modules-grid{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(14px,2.4vw,20px); margin-top:12px;
}
.module-card{
  background:#0b0f1a; border:1px solid #1a2340; border-radius:12px; padding:14px 16px;
}
.module-card h4{
  margin:0 0 8px; font-size:clamp(15px,1.3vw,18px); font-weight:700; color:#e6e9f2;
}
.module-list{
  list-style:none; margin:0; padding:0; display:grid; gap:8px;
}
.module-list li{
  position:relative; padding-left:22px; line-height:1.45;
}
.module-list li::before{
  content:"✓"; position:absolute; left:0; top:0; color:var(--accent); opacity:.9;
}

/* Stack on small screens */
@media (max-width: 720px){
  .modules-grid{ grid-template-columns:1fr; }
}

/* ---- reset ---- */ body{ margin:0; font:normal 75% Arial, Helvetica, sans-serif; } canvas{ display: block; vertical-align: bottom; } /* ---- particles.js container ---- */ #particles-js{ position:absolute; width: 100%; height: 100%; background-color: #0b0f1a; background-image: url(""); background-repeat: no-repeat; background-size: cover; background-position: 50% 50%; } /* ---- stats.js ---- */ .count-particles{ background: #000022; position: absolute; top: 48px; left: 0; width: 80px; color: #13E8E9; font-size: .8em; text-align: left; text-indent: 4px; line-height: 14px; padding-bottom: 2px; font-family: Helvetica, Arial, sans-serif; font-weight: bold; } .js-count-particles{ font-size: 1.1em; } #stats, .count-particles{ -webkit-user-select: none; margin-top: 5px; margin-left: 5px; } #stats{ border-radius: 3px 3px 0 0; overflow: hidden; } .count-particles{ border-radius: 0 0 3px 3px; }

#particles-js{
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;  /* important: don’t eat clicks */
}
body > * { position: relative; z-index: 1; }


/* Hide the header + white belt on phones */
@media (max-width: 720px){
  :root{ --header-h: 0px; }  /* no anchor offset */
  .site-header{ display:none !important; }
  /* make sure anchors don't reserve space for the fixed header */
  .section, .hero, #quote, #portfolio, #resume, #about, #contact{
    scroll-margin-top: 0 !important;
  }
}





/* ===== Resume typography tweaks ===== */

/* Section title “Resume” */
#resume h2{
  font-size: clamp(30px, 3vw, 38px);
  line-height: 1.15;
}

/* Column subtitles “Education”, “Experience” */
#resume .resume-subtitle{
  font-size: clamp(20px, 2.2vw, 26px);
  font-weight: 700;
}

/* Card/item heading lines (e.g., program / role) */
#resume .item-head{
  font-size: clamp(21px, 1.6vw, 18px);
  font-weight: 700;
}

/* Dates line under headings */
#resume .item-meta{
  font-size: clamp(13px, 1.3vw, 15px);
}

/* Paragraph copy inside items */
#resume .timeline .item p{
  font-size: clamp(19px, 1.5vw, 16px);
  line-height: 1.6;
}

/* Bullet lists inside items */
#resume .timeline .item .item-points{
  font-size: clamp(19px, 1.5vw, 16px);
  line-height: 1.55;
}

/* Module dropdown trigger buttons */
#resume .item details summary.edu-summary{
  font-size: clamp(14px, 1.4vw, 16px);
}

/* Module cards (left column list) */
#resume .module-card h4{
  font-size: clamp(16px, 1.5vw, 18px);
}
#resume .module-list{
  font-size: clamp(14px, 1.5vw, 16px);
}

/* Quote typography */
#quote blockquote{
  font-size: clamp(28px, 3.6vw, 44px);   /* title size (optional bump) */
  line-height: 1.25;
}

/* “— Martin MacFeliks” */
#quote figcaption{
  font-size: clamp(14px, 1.6vw, 18px);   /* <- increase here */
  font-weight: 300;
  letter-spacing: .01em;
  color: rgba(230,233,242,.92);          /* a touch brighter */
  margin-top: 10px;
}

/* Hero subtitle (under the big name) */
.hero .hero-inner p{
  font-size: clamp(16px, 1.6vw, 22px); /* bump size */
  font-weight: 300;                    /* crisper */
  letter-spacing: .02em;
  color: rgba(255,255,255,.92);
  text-shadow: 0 1px 2px rgba(0,0,0,.55);
  margin-top: 8px;                     /* keep spacing tidy */
}



#contact .contact-form label {
  display: grid;
  gap: 6px;
  font-weight: 600;
  color: var(--fg);
}




/* === Unify section headings ("Projects", "Resume", etc.) === */
.section > h2{
  font-size: clamp(30px, 3vw, 38px);  /* bigger & consistent */
  font-weight: 800;
  letter-spacing: .2px;
  margin: 0 0 24px;
}

/* === Projects card typography tweaks === */
#portfolio .card-body h3{
  font-size: clamp(21px, 1.6vw, 20px);
  font-weight: 700;
  margin: 0 0 10px;
}

#portfolio .card-body p{
  font-size: clamp(19px, 1.25vw, 16px);
  line-height: 1.55;
  color: rgba(230,233,242,.92);
}


#contact .contact-form label {
  display: grid;
  gap: 6px;
  font-weight: 600;
  font-size: clamp(20px, 1.4vw, 15px);

  color: var(--fg);
}

/* Bigger "Get In Touch" heading only */
#contact .about-title{
  font-size: clamp(44px, 5.2vw, 62px);
  line-height: 1.08;
  letter-spacing: -0.02em;
}


/* 80% size for "View" buttons on project cards */
#portfolio .card .btn,
#portfolio .card .btn-outline{
  font-size: clamp(12.8px, 1.08vw, 16px);

  border-radius: 11px;
  line-height: 1;
  min-height: 36px; /* ~80% of 44px */
}