/* ============================================================
   Built from Style Guide v5 — LOCKED. If you want to change the
   look, change the values under :root — nothing else — so the
   whole site stays consistent.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@500;600;700;800&family=Inter:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  --bg:        #0C0E12;
  --panel:     #16181D;
  --ink:       #F1F0EE;
  --ink-soft:  #9A9EA8;
  --line:      #2A2C31;
  --scarlet:   #D21414;
  --gray:      #8A8A8A;
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  background:var(--bg);
  color:var(--ink);
  font-family:'Inter', sans-serif;
  line-height:1.65;
}
a{ color:inherit; text-decoration:none; }
::selection{ background:var(--scarlet); color:#fff; }

/* ---------- NAV ---------- */
nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; justify-content:space-between; align-items:center;
  padding:1.1rem clamp(1.5rem, 5vw, 4rem);
  background:rgba(12,14,18,0.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.nav-mark{ font-family:'Manrope', sans-serif; font-weight:800; font-size:0.95rem; letter-spacing:0.02em; color:var(--ink); }
.nav-mark span{ color:var(--scarlet); }
.nav-links{ display:flex; gap:clamp(1rem, 3vw, 2.4rem); }
.nav-links a{
  font-family:'Inter', sans-serif; font-weight:500; font-size:0.86rem;
  color:var(--ink-soft); transition:color 0.2s; padding-bottom:0.25rem; border-bottom:1px solid transparent;
}
.nav-links a:hover{ color:var(--ink); }
.nav-links a.active{ color:var(--scarlet); border-color:var(--scarlet); }
.nav-links a:focus-visible{ outline:2px solid var(--scarlet); outline-offset:3px; }
#nav-toggle{ display:none; }
.burger{ display:none; cursor:pointer; font-family:'IBM Plex Mono',monospace; color:var(--ink); background:none; border:1px solid var(--line); padding:0.4rem 0.7rem; font-size:0.82rem; }

/* ---------- PAGE HEADER (non-home pages) ---------- */
.page-header{ padding:9rem clamp(1.5rem,5vw,4rem) 3rem; max-width:1200px; margin:0 auto; border-bottom:1px solid var(--line); }
.page-header .callsign{
  font-family:'IBM Plex Mono', monospace; font-size:0.72rem; color:var(--scarlet);
  text-transform:uppercase; letter-spacing:0.1em; margin-bottom:1.1rem; display:block;
}
.page-header h1{ font-family:'Manrope', sans-serif; font-weight:800; font-size:clamp(2.2rem, 5vw, 3.2rem); letter-spacing:-0.01em; margin-bottom:0.9rem; }
.page-header p{ color:var(--ink-soft); max-width:54ch; font-size:0.98rem; }

/* ---------- HERO (home page) ---------- */
header.hero{ min-height:100vh; display:flex; flex-direction:column; justify-content:center; padding:6rem clamp(1.5rem, 5vw, 4rem) 4rem; position:relative; }
.hero-inner{ display:grid; grid-template-columns:1.3fr 1fr; gap:3rem; align-items:center; max-width:1200px; margin:0 auto; width:100%; }
.callsign{
  font-family:'IBM Plex Mono', monospace; font-size:0.72rem; color:var(--scarlet);
  text-transform:uppercase; letter-spacing:0.1em; display:block; margin-bottom:1.3rem;
}
h1.name{ font-family:'Manrope', sans-serif; font-weight:800; font-size:clamp(2.6rem, 6vw, 4.4rem); line-height:1.04; letter-spacing:-0.015em; margin-bottom:1.1rem; }
h1.name .accent{ color:var(--scarlet); }
.role-line{ font-family:'Manrope', sans-serif; font-weight:600; font-size:clamp(1rem, 1.6vw, 1.2rem); color:var(--ink-soft); margin-bottom:1.8rem; max-width:34ch; }
.hero-tagline{ font-size:1.05rem; color:var(--ink); max-width:46ch; margin-bottom:2.2rem; opacity:0.92; }
.cta-row{ display:flex; gap:1rem; flex-wrap:wrap; }
.btn{ font-family:'Inter', sans-serif; font-weight:600; font-size:0.88rem; padding:0.85rem 1.6rem; display:inline-block; }
.btn.primary{ background:var(--scarlet); color:#fff; border:1px solid var(--scarlet); }
.btn.primary:hover{ background:#e82424; border-color:#e82424; }
.btn.ghost{ color:var(--ink); border:1px solid var(--line); }
.btn.ghost:hover{ border-color:var(--scarlet); color:var(--scarlet); }

/* framed media — corner-frame motif, used ONLY on media */
.framed{ position:relative; border:1px solid var(--line); background:var(--panel); }
.framed .corner{ position:absolute; width:16px; height:16px; }
.framed .corner.tl{ top:-1px; left:-1px; border-top:1px solid var(--scarlet); border-left:1px solid var(--scarlet); }
.framed .corner.tr{ top:-1px; right:-1px; border-top:1px solid var(--scarlet); border-right:1px solid var(--scarlet); }
.framed .corner.bl{ bottom:-1px; left:-1px; border-bottom:1px solid var(--scarlet); border-left:1px solid var(--scarlet); }
.framed .corner.br{ bottom:-1px; right:-1px; border-bottom:1px solid var(--scarlet); border-right:1px solid var(--scarlet); }
.framed .frame-label{
  position:absolute; bottom:0.7rem; left:0.7rem; right:0.7rem; display:flex; justify-content:space-between;
  font-family:'IBM Plex Mono', monospace; font-size:0.6rem; letter-spacing:0.06em; color:var(--gray); text-transform:uppercase;
}

/* Ensures images show in full, uncropped and unstretched, inside the frame */
.framed img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.schematic{ aspect-ratio:1/1; display:flex; align-items:center; justify-content:center; }
.schematic svg{ width:80%; height:80%; }

.framed.schematic .system-photo {
  width: 100%;
  height: auto;
  display: block;
  padding: 20px; /* Gives the image breathing room inside the frame so it doesn't cover the corners */
  box-sizing: border-box; /* Ensures padding doesn't break the container width */
}

/* ---------- SECTION SHELL ---------- */
section{ padding:5rem clamp(1.5rem, 5vw, 4rem) 7rem; max-width:1200px; margin:0 auto; }
section.tight-top{ padding-top:3rem; }
.section-head{ margin-bottom:3rem; max-width:60ch; }
.section-title{ font-family:'Manrope', sans-serif; font-weight:800; font-size:clamp(1.9rem, 4vw, 2.5rem); }

/* ---------- ABOUT ---------- */
.about-grid{ display:grid; grid-template-columns:0.9fr 1.4fr; gap:3rem; align-items:start; }
.photo-frame{ aspect-ratio:4/5; display:flex; align-items:center; justify-content:center; }
.photo-frame .placeholder-txt{ font-family:'IBM Plex Mono', monospace; font-size:0.68rem; color:var(--gray); text-align:center; padding:1rem; letter-spacing:0.05em; }
.about-body p{ margin-bottom:1.1rem; color:var(--ink); opacity:0.92; max-width:62ch; }
.stat-row{ display:flex; gap:2.2rem; margin-top:2rem; flex-wrap:wrap; }
.stat{ font-family:'Manrope', sans-serif; }
.stat .num{ font-size:1.9rem; font-weight:800; color:var(--scarlet); display:block; }
.stat .lbl{ font-family:'IBM Plex Mono', monospace; font-size:0.66rem; letter-spacing:0.06em; text-transform:uppercase; color:var(--gray); }

/* ---------- PROJECT SHEETS ---------- */
.sheet{ border:1px solid var(--line); background:var(--panel); margin-bottom:2.5rem; }
.sheet-body{ padding:2.2rem clamp(1.4rem,3vw,2.8rem) 1.2rem; display:grid; grid-template-columns:1fr 1.6fr; gap:2.2rem; }
.sheet-tag{ font-family:'IBM Plex Mono', monospace; font-size:0.66rem; color:var(--gray); text-transform:uppercase; letter-spacing:0.08em; margin-bottom:0.6rem; }
.sheet h3{ font-family:'Manrope', sans-serif; font-weight:700; font-size:1.4rem; margin-bottom:0.8rem; color:var(--ink); }
.sheet .status{ display:inline-block; font-family:'IBM Plex Mono',monospace; font-size:0.64rem; letter-spacing:0.06em; text-transform:uppercase; padding:0.25rem 0.6rem; border:1px solid var(--scarlet); color:var(--scarlet); margin-bottom:1rem; }
.sheet p.desc{ color:var(--ink); opacity:0.9; margin-bottom:1.2rem; max-width:60ch; }
.tag-list{ display:flex; flex-wrap:wrap; gap:0.5rem; margin-bottom:0.5rem; }
.tag-list span{ font-family:'IBM Plex Mono', monospace; font-size:0.66rem; color:var(--ink-soft); border:1px solid var(--line); padding:0.3rem 0.6rem; }
.spec-col{ border-left:1px solid var(--line); padding-left:1.6rem; }
.spec-col dl{ font-family:'IBM Plex Mono', monospace; font-size:0.76rem; }
.spec-col dt{ color:var(--gray); margin-top:0.7rem; text-transform:uppercase; letter-spacing:0.05em; font-size:0.64rem; }
.spec-col dt:first-child{ margin-top:0; }
.spec-col dd{ color:var(--ink); margin-top:0.15rem; }
.title-block{
  display:flex; justify-content:space-between; align-items:center; border-top:1px solid var(--line);
  padding:0.7rem clamp(1.4rem,3vw,2.8rem); font-family:'IBM Plex Mono', monospace; font-size:0.62rem;
  color:var(--gray); text-transform:uppercase; letter-spacing:0.06em; flex-wrap:wrap; gap:0.5rem;
}
.title-block .link-out{ color:var(--scarlet); }
.title-block .link-out:hover{ text-decoration:underline; }
.media-row{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-top:1.2rem; }

/* ---------- SKILLS ---------- */
.skills-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:1.6rem; }
.skill-card{ border:1px solid var(--line); background:var(--panel); padding:1.6rem; }
.skill-card .cat{ font-family:'IBM Plex Mono', monospace; font-size:0.68rem; color:var(--scarlet); text-transform:uppercase; letter-spacing:0.08em; margin-bottom:0.9rem; }
.skill-card ul{ list-style:none; }
.skill-card li{ font-family:'Inter', sans-serif; font-size:0.9rem; padding:0.4rem 0; border-bottom:1px solid var(--line); color:var(--ink); opacity:0.92; }
.skill-card li:last-child{ border-bottom:none; }

/* ---------- PROJECT DETAIL PAGES ---------- */
.back-link{ display:inline-block; font-family:'IBM Plex Mono', monospace; font-size:0.72rem; color:var(--ink-soft); text-transform:uppercase; letter-spacing:0.06em; margin-bottom:1.3rem; border-bottom:1px solid transparent; }
.back-link:hover{ color:var(--scarlet); border-color:var(--scarlet); }
.detail-top{ display:grid; grid-template-columns:1.5fr 1fr; gap:2.5rem; align-items:start; }
.detail-overview ul{ list-style:none; margin-top:0.6rem; }
.detail-overview li{ font-size:0.98rem; color:var(--ink); opacity:0.92; padding-left:1.1rem; position:relative; margin-bottom:0.7rem; max-width:66ch; }
.detail-overview li::before{ content:"—"; position:absolute; left:0; color:var(--gray); }
.detail-skills .skill-card{ width:100%; }

/* ---------- BUILD GALLERY ---------- */
.gallery-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(260px,1fr)); gap:1.6rem; margin-top:1.5rem; }
.gallery-grid figure{ margin:0; }
.gallery-grid .framed{ aspect-ratio:4/3; overflow:hidden; }
.gallery-grid figcaption{ font-family:'Inter', sans-serif; font-size:0.85rem; color:var(--ink-soft); margin-top:0.8rem; line-height:1.5; }
.gallery-grid .cap-num{ font-family:'IBM Plex Mono', monospace; font-size:0.72rem; color:var(--scarlet); margin-right:0.5rem; }

/* ---------- EXPERIENCE TIMELINE ---------- */
.timeline{ position:relative; padding-left:2.2rem; border-left:1px solid var(--line); }
.t-item{ position:relative; margin-bottom:3rem; }
.t-item:last-child{ margin-bottom:0; }
.t-item::before{ content:""; position:absolute; left:-2.55rem; top:0.3rem; width:9px; height:9px; background:var(--scarlet); border:2px solid var(--bg); box-shadow:0 0 0 1px var(--scarlet); }
.t-date{ font-family:'IBM Plex Mono', monospace; font-size:0.68rem; color:var(--scarlet); text-transform:uppercase; letter-spacing:0.06em; margin-bottom:0.4rem; }
.t-item h3{ font-family:'Manrope', sans-serif; font-weight:700; font-size:1.2rem; margin-bottom:0.2rem; }
.t-item .t-org{ font-family:'Inter', sans-serif; font-size:0.9rem; color:var(--ink-soft); margin-bottom:0.7rem; }
.t-item p{ color:var(--ink); opacity:0.9; max-width:60ch; margin-bottom:0.6rem; }
.t-item ul{ list-style:none; }
.t-item li{ font-size:0.9rem; color:var(--ink); opacity:0.9; padding-left:1.1rem; position:relative; margin-bottom:0.3rem; }
.t-item li::before{ content:"—"; position:absolute; left:0; color:var(--gray); }

/* ---------- PAGE HEADER WITH PHOTO (e.g. Experience) ---------- */
.page-header-hero{ display:grid; grid-template-columns:1.4fr 1fr; gap:3rem; align-items:center; max-width:1200px; margin:0 auto; padding:9rem clamp(1.5rem,5vw,4rem) 3rem; border-bottom:1px solid var(--line); }
.page-header-hero .page-header{ padding:0; margin:0; border-bottom:none; max-width:none; }
.page-header-hero .page-header-photo{ aspect-ratio:2/3; max-width:280px; justify-self:end; }
@media (max-width:820px){
  .page-header-hero{ grid-template-columns:1fr; padding-top:7rem; }
  .page-header-hero .page-header-photo{ justify-self:center; margin-top:2rem; }
}

/* ---------- CONTACT / FOOTER ---------- */
.contact-page-body{ padding-top:1rem; }
.contact-grid{ display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:2rem; margin-bottom:3rem; }
.contact-big{ font-family:'Manrope', sans-serif; font-weight:800; font-size:clamp(1.7rem, 5vw, 2.8rem); max-width:17ch; line-height:1.15; }
.contact-links{ display:flex; flex-direction:column; gap:0.9rem; }
.contact-links a{ font-family:'Inter', sans-serif; font-weight:500; font-size:1rem; color:var(--ink-soft); border-bottom:1px solid transparent; }
.contact-links a:hover{ color:var(--scarlet); border-color:var(--scarlet); }
.contact-form{ display:grid; gap:1.2rem; max-width:520px; margin-top:2rem; }
.contact-form label{ font-family:'IBM Plex Mono', monospace; font-size:0.66rem; text-transform:uppercase; letter-spacing:0.06em; color:var(--gray); display:block; margin-bottom:0.4rem; }
.contact-form input, .contact-form textarea{
  width:100%; background:var(--panel); border:1px solid var(--line); color:var(--ink);
  padding:0.7rem 0.9rem; font-family:'Inter', sans-serif; font-size:0.92rem;
}
.contact-form input:focus, .contact-form textarea:focus{ outline:2px solid var(--scarlet); outline-offset:1px; }

footer{ border-top:1px solid var(--line); padding:3rem clamp(1.5rem,5vw,4rem) 2.5rem; }
.footer-strip{
  max-width:1200px; margin:0 auto; display:flex; justify-content:space-between; flex-wrap:wrap; gap:1rem;
  font-family:'IBM Plex Mono', monospace; font-size:0.64rem; color:var(--gray); letter-spacing:0.05em; text-transform:uppercase;
}

@media (max-width:820px){
  .hero-inner{ grid-template-columns:1fr; }
  .about-grid{ grid-template-columns:1fr; }
  .detail-top{ grid-template-columns:1fr; }
  .schematic{ max-width:320px; margin:0 auto; }
  .sheet-body{ grid-template-columns:1fr; }
  .spec-col{ border-left:none; border-top:1px solid var(--line); padding-left:0; padding-top:1.2rem; }
  .media-row{ grid-template-columns:1fr; }
  .nav-links{
    position:fixed; top:60px; right:0; bottom:0; width:min(78vw,320px);
    background:var(--bg); flex-direction:column; padding:2rem 1.6rem;
    border-left:1px solid var(--line); transform:translateX(100%); transition:transform 0.3s ease; gap:1.6rem;
  }
  #nav-toggle:checked ~ .nav-links{ transform:translateX(0); }
  .burger{ display:block; }
}

/* =========================================
   PROJECTS GRID & CARD LAYOUT UPDATES
   ========================================= */

/* 1. Main Grid Layout (2 columns down the screen) */
#projects {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
}

/* 2. Sheet Setup */
.sheet {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* 3. Inside the Card Layout (Side-by-side text and images) */
.sheet-body {
  display: flex;
  gap: 2rem;
  align-items: flex-start;
}

/* Left side (Text) */
.project-text {
  flex: 1; 
}

/* Right side (Images stacked vertically) */
.media-row {
  flex: 1; 
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Consistent thumbnail shape at any width — no stretching, no odd crops */
.media-row .framed{
  aspect-ratio: 4 / 3;
  height: auto;
  flex: 1;
  overflow: hidden;
}

/* 4. Responsive Design for smaller screens (Laptops/Tablets/Phones) */
@media (max-width: 1024px) {
  /* Revert back to 1 column for the main page layout */
  #projects {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  /* Revert the inside of the cards to stack vertically on mobile */
  .sheet-body {
    flex-direction: column;
  }
  
  /* Put the images side-by-side again when stacked under the text */
  .media-row {
    flex-direction: row;
    width: 100%;
  }
}

/* Removes the padding and background box from the headshot frame */
.hero .framed.schematic {
  padding: 0;
  background: transparent;
  border: none;
}

/* Makes sure the image fills the framed container completely */
.hero .framed.schematic img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}