/* Amber Langley — "Panel by Panel" comic-book / graphic-novel concept */

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

:root{
  --paper:#F3EEDD;
  --ink:#14120F;
  --ink-soft:#4A453B;
  --ink-faint:#847E6E;
  --red:#E8362B;
  --blue:#2A5FD9;
  --yellow:#F6C443;
  --line:#14120F;
  --shadow:6px 6px 0 var(--ink);
  --shadow-sm:4px 4px 0 var(--ink);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; font-family:'Inter',sans-serif; background:var(--paper); color:var(--ink);
  background-image: radial-gradient(rgba(20,18,15,.06) 1.2px, transparent 1.2px);
  background-size:10px 10px;
}
img{max-width:100%; display:block;}
a{color:inherit;}
.wrap{max-width:1080px; margin:0 auto; padding:0 24px;}
.comic{font-family:'Bangers',cursive; letter-spacing:.02em;}

/* nav */
.topnav{position:sticky; top:0; z-index:50; background:var(--paper); border-bottom:4px solid var(--ink);}
.nav-inner{display:flex; align-items:center; justify-content:space-between; padding:14px 24px; gap:16px; flex-wrap:wrap;}
.nav-logo{font-family:'Bangers',cursive; font-size:1.5rem; text-decoration:none; color:var(--ink); letter-spacing:.03em;}
.nav-logo span{color:var(--red);}
.nav-links{display:flex; align-items:center; gap:22px; font-family:'Comic Neue',cursive; font-weight:700; font-size:.92rem;}
.nav-links a{text-decoration:none; color:var(--ink-soft);}
.nav-links a:hover, .nav-links a.active{color:var(--red);}
.nav-toggle{display:none; flex-direction:column; justify-content:center; gap:5px; width:38px; height:34px; background:var(--paper); border:3px solid var(--ink); cursor:pointer;}
.nav-toggle span{display:block; width:16px; height:2px; background:var(--ink); margin:0 auto;}
@media (max-width:760px){
  .nav-toggle{display:flex;}
  .nav-links{position:absolute; top:100%; left:0; right:0; background:var(--paper); border-bottom:4px solid var(--ink); flex-direction:column; align-items:flex-start; gap:0; max-height:0; overflow:hidden; transition:max-height .25s ease;}
  .nav-links.open{max-height:320px;}
  .nav-links a{width:100%; padding:14px 24px; border-bottom:1px dashed var(--ink);}
}

/* hero panel */
.hero{padding:56px 0; border-bottom:4px solid var(--ink);}
.hero-panel{
  border:4px solid var(--ink); border-radius:6px; background:var(--paper); box-shadow:var(--shadow);
  display:grid; grid-template-columns:1fr 1.15fr; overflow:hidden; position:relative;
}
.hero-photo-frame{
  position:relative; border-right:4px solid var(--ink); overflow:hidden; min-height:340px;
  background-image: radial-gradient(rgba(20,18,15,.35) 1.6px, transparent 1.6px);
  background-size:6px 6px;
}
.hero-photo-frame img{width:100%; height:100%; object-fit:cover; filter:grayscale(.15) contrast(1.15) saturate(1.05); mix-blend-mode:multiply;}
.hero-text{padding:34px 32px; display:flex; flex-direction:column; justify-content:center; position:relative;}
.hero-kicker{font-family:'Comic Neue',cursive; font-weight:700; font-size:.85rem; text-transform:uppercase; letter-spacing:.06em; color:var(--red); margin:0 0 10px;}
.hero-name{font-family:'Bangers',cursive; font-size:clamp(2.4rem,6vw,3.6rem); margin:0 0 14px; letter-spacing:.02em; line-height:1;}
.speech-bubble{
  position:relative; background:#fff; border:3px solid var(--ink); border-radius:16px; padding:16px 20px;
  font-family:'Comic Neue',cursive; font-weight:700; font-size:1.05rem; line-height:1.4; max-width:440px; margin:0 0 20px;
}
.speech-bubble::after{
  content:''; position:absolute; left:36px; bottom:-16px; width:0; height:0;
  border:10px solid transparent; border-top-color:#fff; border-bottom:0;
}
.speech-bubble::before{
  content:''; position:absolute; left:34px; bottom:-20px; width:0; height:0;
  border:12px solid transparent; border-top-color:var(--ink); border-bottom:0;
}
.hero-tags{display:flex; flex-wrap:wrap; gap:10px;}
.tag{font-family:'Comic Neue',cursive; font-weight:700; font-size:.8rem; border:2px solid var(--ink); border-radius:6px; padding:5px 12px; background:var(--yellow); box-shadow:2px 2px 0 var(--ink);}
.tag.tag-blue{background:#DCE6FF;}
@media (max-width:820px){ .hero-panel{grid-template-columns:1fr;} .hero-photo-frame{border-right:none; border-bottom:4px solid var(--ink); min-height:260px;} }
@media (max-width:480px){ .hero-text{padding:26px 22px;} .speech-bubble{font-size:.92rem; padding:14px 16px;} }

/* section shell */
section{padding:64px 0; border-bottom:4px solid var(--ink);}
.kicker{font-family:'Comic Neue',cursive; font-weight:700; font-size:.85rem; text-transform:uppercase; letter-spacing:.04em; color:var(--red); margin:0 0 8px;}
h2{font-family:'Bangers',cursive; font-size:clamp(1.8rem,4vw,2.6rem); letter-spacing:.02em; margin:0 0 16px;}
.lede{color:var(--ink-soft); max-width:640px; line-height:1.6; font-size:1.02rem; font-family:'Comic Neue',cursive; font-weight:700;}

/* panel grid */
.panel-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:30px;}
.comic-panel{
  position:relative; background:#fff; border:4px solid var(--ink); border-radius:6px; padding:24px 20px 22px; box-shadow:var(--shadow-sm);
  background-image: radial-gradient(rgba(20,18,15,.05) 1.2px, transparent 1.2px); background-size:8px 8px;
}
.pow{
  position:absolute; top:-16px; right:-10px; font-family:'Bangers',cursive; font-size:1.3rem; color:var(--ink);
  background:var(--yellow); border:3px solid var(--ink); border-radius:50%; width:64px; height:64px;
  display:flex; align-items:center; justify-content:center; transform:rotate(-8deg); box-shadow:2px 2px 0 var(--ink);
  text-align:center; line-height:1;
}
.comic-panel h3{margin:0 0 8px; font-size:1.1rem;}
.comic-panel p{margin:0; font-size:.92rem; color:var(--ink-soft); font-family:'Comic Neue',cursive; font-weight:700; line-height:1.45;}
@media (max-width:820px){ .panel-grid{grid-template-columns:1fr;} }

/* stat bursts */
.burst-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:30px;}
.burst{
  background:var(--red); color:#fff; border:4px solid var(--ink); border-radius:50%; aspect-ratio:1/1;
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; box-shadow:var(--shadow-sm);
  padding:10px;
}
.burst:nth-child(2){background:var(--blue);}
.burst:nth-child(3){background:var(--yellow); color:var(--ink);}
.burst:nth-child(4){background:var(--ink); color:var(--yellow);}
.burst b{font-family:'Bangers',cursive; font-size:1.7rem; letter-spacing:.02em;}
.burst span{font-family:'Comic Neue',cursive; font-weight:700; font-size:.68rem; text-transform:uppercase;}
@media (max-width:700px){
  .burst-grid{grid-template-columns:repeat(2,1fr);}
  .burst b{font-size:1.4rem;}
  .burst span{font-size:.6rem;}
}

/* quote panel */
.quote-panel{margin-top:30px; max-width:640px;}
.quote-panel .speech-bubble{max-width:100%; font-size:1.05rem;}
.quote-attrib{margin-top:22px; font-family:'Comic Neue',cursive; font-weight:700; color:var(--ink-faint); font-size:.86rem;}

/* reviewed list */
.review-strip{display:flex; flex-direction:column; gap:12px; margin-top:28px;}
.review-item{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 14px; background:#fff; border:3px solid var(--ink); border-radius:6px; padding:14px 18px; box-shadow:var(--shadow-sm);}
.review-item .ri-name{font-weight:800; font-family:'Comic Neue',cursive;}
.review-item .ri-score{font-family:'Bangers',cursive; color:var(--red); font-size:1.1rem;}

/* CTA panels */
.cta-duo{display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:30px;}
.origin-panel, .signal-panel{
  border:4px solid var(--ink); border-radius:6px; padding:28px 24px; text-decoration:none; display:block;
  box-shadow:var(--shadow-sm); position:relative; overflow:hidden;
}
.origin-panel{background:#fff;}
.origin-panel .op-tag{font-family:'Comic Neue',cursive; font-weight:700; font-size:.78rem; text-transform:uppercase; color:var(--ink-faint); margin:0 0 8px;}
.origin-panel h3{font-family:'Bangers',cursive; font-size:1.4rem; margin:0 0 10px;}
.origin-panel p{margin:0; font-family:'Comic Neue',cursive; font-weight:700; color:var(--ink-soft);}

.signal-panel{background:var(--ink); color:var(--paper);}
.signal-beam{
  position:absolute; top:-40px; left:50%; margin-left:-70px; width:140px; height:140px; border-radius:50%;
  background:radial-gradient(circle, rgba(246,196,67,.5), transparent 70%);
}
.signal-panel .sp-tag{position:relative; font-family:'Comic Neue',cursive; font-weight:700; font-size:.78rem; text-transform:uppercase; color:var(--yellow); margin:0 0 8px;}
.signal-panel h3{position:relative; font-family:'Bangers',cursive; font-size:1.4rem; margin:0 0 10px; color:#fff;}
.signal-panel p{position:relative; margin:0; font-family:'Comic Neue',cursive; font-weight:700; color:#D9D6C8;}
@media (max-width:700px){ .cta-duo{grid-template-columns:1fr;} }

/* footer */
footer{padding:36px 0; text-align:center; font-size:.85rem; color:var(--ink-faint); font-family:'Comic Neue',cursive; font-weight:700;}
footer .links{margin-bottom:10px;}
footer .links a{margin:0 10px; text-decoration:none; color:var(--ink-soft);}
footer .links a:hover{color:var(--red);}

/* shared page bits */
.page-hero{padding:56px 0 40px; border-bottom:4px solid var(--ink);}
.btn{display:inline-block; font-family:'Comic Neue',cursive; font-weight:700; font-size:.92rem; padding:12px 22px; border:3px solid var(--ink); border-radius:6px; text-decoration:none; box-shadow:var(--shadow-sm);}
.btn-solid{background:var(--red); color:#fff;}
.btn-solid:hover{background:var(--ink);}
.btn-ghost{background:#fff; color:var(--ink);}
.btn-ghost:hover{background:var(--yellow);}
.contact-form{max-width:560px; margin-top:24px;}
.form-row{margin-bottom:20px;}
.form-row label{display:block; font-family:'Comic Neue',cursive; font-weight:700; font-size:.82rem; color:var(--ink-faint); margin-bottom:6px;}
.form-row input, .form-row textarea{width:100%; border:3px solid var(--ink); border-radius:6px; padding:12px 14px; font-family:'Inter',sans-serif; font-size:1rem; background:#fff; color:var(--ink);}
.form-row input:focus, .form-row textarea:focus{outline:none; border-color:var(--red);}
.form-note{font-size:.8rem; color:var(--ink-faint); margin-top:10px; font-family:'Comic Neue',cursive;}
.contact-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:18px; margin-top:28px;}
.contact-card{border:3px solid var(--ink); border-radius:6px; padding:20px; background:#fff; box-shadow:var(--shadow-sm);}
.contact-card h3{margin:0 0 8px; font-size:1.05rem; font-family:'Bangers',cursive;}
.contact-card p{font-size:.9rem; color:var(--ink-soft); margin:0 0 12px; font-family:'Comic Neue',cursive; font-weight:700;}
@media (max-width:640px){ .contact-grid{grid-template-columns:1fr;} }

/* education / career blocks (career.html) */
.timeline{display:flex; flex-direction:column; gap:14px; margin-top:28px;}
.t-row{display:grid; grid-template-columns:44px 1fr; gap:16px; align-items:start; background:#fff; border:3px solid var(--ink); border-radius:6px; padding:16px 18px; box-shadow:var(--shadow-sm);}
.t-logo{width:36px; height:36px; object-fit:contain; border:2px solid var(--ink); border-radius:6px; background:#fff; padding:2px;}
.t-when{font-family:'Comic Neue',cursive; font-weight:700; font-size:.78rem; color:var(--ink-faint); margin-bottom:2px;}
.t-role{font-weight:800; margin-bottom:2px;}
.t-org{font-family:'Comic Neue',cursive; font-weight:700; color:var(--ink-soft); font-size:.9rem;}