/* ============================================================
   Forrest Li — ME Portfolio — PROJECT PAGE stylesheet
   Load this AFTER style.css:

     <link rel="stylesheet" href="assets/style.css">
     <link rel="stylesheet" href="assets/project.css">

   It reuses style.css's :root variables (--bg, --accent, etc.),
   the .stencil / .mono type classes, .crosshair marks, .site-nav,
   and footer .title-block — so a project page matches the index
   automatically instead of carrying its own copy of the palette.

   Two things this file fixes vs. the old inline <style> block:
   1. COLOR — no more separate navy --bg/--accent set. Everything
      here inherits the index's #5d84aa blue system.
   2. DENSITY — vertical padding/margins are pulled in across the
      board (sections, hero, spec strip, callouts, cards) so pages
      read as documentation sheets, not a slideshow with big gaps
      between every block.
   ============================================================ */

/* A local accent for "status: live/active" readouts. Not in
   style.css's root palette, scoped here so it doesn't leak. */
:root{
  --live: #6fd8a8;
}

/* ===== BREADCRUMB STRIP =====
   Sits directly under .site-nav (from style.css) — a slim,
   drawing-sheet-style line identifying which DWG this is and
   linking back to the index. Not a second full nav bar. */
.topnav{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:14px 8vw;
  border-bottom:1px solid var(--line-faint);
}
.back-link{
  font-size:11.5px;
  color:var(--muted);
  text-decoration:none;
  display:flex;
  align-items:center;
  gap:8px;
  transition:color 0.2s ease;
}
.back-link:hover{color:var(--accent);}
.back-link .arrow{color:var(--accent);}
.topnav .sheet-tag{
  font-size:11px;
  color:var(--muted);
  text-align:right;
  line-height:1.55;
}
.topnav .sheet-tag span{color:var(--accent);}

/* ===== HERO ===== */
.hero{
  padding: 5vh 8vw 3.5vh;
  border-bottom:1px solid var(--line-faint);
  position:relative;
}

.hero h1.stencil{
  font-size:clamp(2.2rem, 5.6vw, 4.4rem);
  font-weight:900;
  line-height:0.92;
  color:var(--ink);
}
.hero h1.stencil .sub{
  display:block;
  -webkit-text-stroke: 1.2px var(--ink);
  color:transparent;
  font-size:0.52em;
  margin-top:2px;
}

.hero .role-line{
  margin-top:16px;
  font-size:clamp(0.95rem, 1.5vw, 1.08rem);
  color:var(--muted);
  max-width:680px;
  font-weight:400;
  line-height:1.65;
}
.hero .role-line b{color:var(--ink); font-weight:600;}

/* meta row — team / timeline / role / status */
.meta-row{
  margin-top:28px;
  display:flex;
  flex-wrap:wrap;
  gap:30px;
}
.meta-item{display:flex;flex-direction:column;gap:5px;}
.meta-item .k{
  font-size:9.5px;
  color:var(--muted);
}
.meta-item .v{
  font-size:13px;
  color:var(--ink);
}
.meta-item .v.live{color:var(--live);}
.meta-item .v.live::before{
  content:"● ";
}

/* ===== SPEC / IMPACT STRIP ===== */
.spec-strip{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  border-top:1px solid var(--line-faint);
  border-bottom:1px solid var(--line-faint);
}
@media(max-width:820px){
  .spec-strip{grid-template-columns:repeat(2, 1fr);}
}
.spec-cell{
  border-right:1px solid var(--line-faint);
  padding:16px 8vw 16px 8vw;
}
@media(min-width:821px){
  .spec-cell{padding:16px 22px;}
  .spec-strip{padding:0 8vw;}
}
.spec-cell:last-child{border-right:none;}
.spec-cell .k{
  display:block;
  font-size:9.5px;
  color:var(--muted);
  margin-bottom:6px;
}
.spec-cell .v{
  font-size:22px;
  color:var(--accent);
  font-weight:700;
  font-family:'Big Shoulders Stencil', sans-serif;
}

/* ===== GENERIC SECTION ===== */
.section{
  padding: 44px 8vw;
  border-bottom:1px solid var(--line-faint);
}
.section-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  margin-bottom:28px;
  flex-wrap:wrap;
  gap:14px;
  border-bottom:1px solid var(--line-faint);
  padding-bottom:14px;
}
.section-head h2.stencil{
  font-size:clamp(1.35rem, 2.4vw, 1.9rem);
  font-weight:700;
}
.section-head .tag{
  font-size:10.5px;
  color:var(--muted);
}

.two-col{
  display:grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap:36px;
}
@media(max-width:900px){
  .two-col{grid-template-columns:1fr;}
}
.body-copy p{
  font-size:14.5px;
  line-height:1.7;
  color:var(--muted);
  max-width:62ch;
}
.body-copy p + p{margin-top:14px;}
.body-copy b{color:var(--ink); font-weight:600;}

.callout{
  border:1px solid var(--line-faint);
  border-left:3px solid var(--accent);
  padding:20px 22px;
  height:fit-content;
  background:var(--line-faint2);
}
.callout .mono.label{
  font-size:10.5px;
  color:var(--accent);
  display:block;
  margin-bottom:10px;
}
.callout p{
  font-size:13.5px;
  line-height:1.65;
  color:var(--muted);
}
.callout p b{color:var(--ink); font-weight:600;}

.callout.wide{margin-top:26px;}

/* ===== PROCESS — vertical stepped list ===== */
.process-list{
  display:flex;
  flex-direction:column;
}
.process-step{
  display:grid;
  grid-template-columns:44px 1fr;
  gap:0;
}
.step-rail{
  display:flex;
  flex-direction:column;
  align-items:center;
}
.step-no{
  width:32px;height:32px;
  border:1px solid var(--line-faint);
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:11px;
  color:var(--accent);
  flex-shrink:0;
}
.step-line{
  flex:1;
  width:1px;
  background:var(--line-faint);
  margin:6px 0;
}
.process-step:last-child .step-line{display:none;}
.step-body{
  padding:1px 0 26px 18px;
}
.step-body h4.stencil{
  font-size:1.05rem;
  font-weight:700;
  margin-bottom:7px;
}
.step-body p{
  font-size:13px;
  line-height:1.68;
  color:var(--muted);
  max-width:66ch;
}

/* ===== GALLERY ===== */
.gallery{
  display:grid;
  grid-template-columns:2fr 1fr 1fr;
  gap:1px;
  background:var(--line-faint);
  border:1px solid var(--line-faint);
  margin-bottom:2px;
}
@media(max-width:820px){
  .gallery{grid-template-columns:1fr;}
}
.plate{
  background:var(--bg-deep);
  aspect-ratio: 16/10;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:16px;
}
.gallery .plate:first-child{aspect-ratio:16/9;}
.plate svg{
  width:40px;height:40px;
  stroke:var(--line);
  fill:none;
  stroke-width:1.3;
}
.plate .fname{
  font-size:10px;
  color:var(--muted);
  text-align:center;
}
.fig-caption{
  font-size:10.5px;
  color:var(--muted);
  text-align:center;
  margin-top:8px;
  margin-bottom:24px;
}

/* ===== LESSONS GRID ===== */
.lessons-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:1px;
  background:var(--line-faint);
  border:1px solid var(--line-faint);
}
@media(max-width:820px){
  .lessons-grid{grid-template-columns:1fr;}
}
.lesson-card{
  background:var(--bg);
  padding:22px 22px;
  transition:background 0.25s ease;
}
.lesson-card:hover{background:var(--bg-deep);}
.lesson-card .no{
  font-size:10.5px;
  color:var(--accent);
  display:block;
  margin-bottom:9px;
}
.lesson-card h4.stencil{
  font-size:1.02rem;
  font-weight:700;
  margin-bottom:8px;
}
.lesson-card p{
  font-size:12.5px;
  line-height:1.65;
  color:var(--muted);
}

/* ===== SKILLS ===== */
.skills-used{
  display:flex;
  flex-wrap:wrap;
  gap:9px;
}
.skill-tag{
  font-size:10.5px;
  color:var(--line);
  border:1px solid var(--line-faint);
  padding:7px 14px;
  letter-spacing:0.04em;
}

/* ===== NEXT / PREV PROJECT NAV ===== */
.next-nav{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:24px 8vw;
  gap:16px;
  flex-wrap:wrap;
  border-bottom:1px solid var(--line-faint);
}
.next-nav a{
  font-size:11.5px;
  color:var(--muted);
  text-decoration:none;
  display:flex;
  align-items:center;
  gap:8px;
  transition:color 0.2s ease;
}
.next-nav a:hover{color:var(--accent);}
.next-nav .arrow{color:var(--accent);}

/* ============================================================
   Notes on markup compatibility:
   - Uses the exact same class names as the draft project page
     (.topnav, .hero, .meta-row, .spec-strip, .section,
     .two-col/.body-copy/.callout, .process-list, .gallery/.plate,
     .lessons-grid, .skills-used, .next-nav) so you can delete the
     old inline <style> block, add the two <link> tags above, and
     the page should render with no HTML changes needed.
   - footer/.title-block, .crosshair, .stencil, .mono, and
     .site-nav all come from style.css — don't duplicate them here.
   ============================================================ */