@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;600;700&display=swap');

:root{
  --black:#000;
  --ink:#171717;
  --grey:#666;
  --light-grey:#f5f5f2;
  --paper:#fafaf7;
  --yellow:#fff19a;
  --green:#c9f3c5;
  --pink:#ffc9d8;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:"Fira Code",monospace;
  color:var(--ink);
  background:var(--paper);
  min-height:100vh;
  overflow-x:hidden;
  background-image:radial-gradient(#00000012 .7px,transparent .7px);
  background-size:7px 7px;
}
.topbar{
  background:#fff;
  position:sticky;
  top:0;
  z-index:100;
  color:var(--black);
  border-bottom:3px solid #000;
  padding:2px 0;
}
.nav-wrap{
  max-width:1240px;min-height:76px;margin:auto;padding:0 28px;
  display:flex;justify-content:space-between;align-items:center;gap:30px
}
.brand{color:#000;text-decoration:none;display:flex;align-items:center;gap:13px;font-size:17px;font-weight:700}
.brand-icon{
  width:42px;height:42px;display:grid;place-items:center;
  border:3px solid #000;border-radius:4px;background:#fff;
  box-shadow:3px 3px 0 #000;font-size:14px
}
.nav-links{display:flex;gap:8px}
.nav-links a{display:flex;align-items:center;gap:6px;min-height:44px;padding:8px 12px;border:2px solid #000;border-radius:3px 5px 4px 2px;background:var(--yellow);box-shadow:2px 2px 0 #000;color:#000;text-decoration:none;font-size:18px;font-weight:600;line-height:1.2;transition:transform .18s ease,box-shadow .18s ease,background .18s ease}
.nav-links a:hover,.nav-links a:focus-visible{background:var(--pink);box-shadow:1px 1px 0 #000;color:#000;text-decoration:none;transform:translate(1px,1px)}
.nav-icon{display:inline-grid;min-width:1.15em;height:1em;place-items:center;color:#000;font-size:1em;font-weight:700;line-height:1}

.hero{
  position:relative;max-width:1240px;margin:34px auto 0;min-height:430px;
  padding:70px 50px;overflow:hidden;background:#fff;
  border:3px solid #000;border-radius:3px;
  box-shadow:8px 8px 0 #000;
  display:flex;align-items:center;justify-content:center;text-align:center
}
.hero-content{position:relative;z-index:2;max-width:850px}
.eyebrow,.section-label{font-size:13px;font-weight:700;letter-spacing:2px}
.eyebrow{color:#555;margin-bottom:18px}
.hero h1{
  color:#000;font-family:"Fira Code",monospace;font-size:clamp(42px,6vw,70px);
  line-height:1.08;letter-spacing:-3px;font-weight:800
}
.hero h1 span{color:#000}
.hero p{max-width:700px;margin:25px auto 0;color:#555;font-size:18px;line-height:1.8}
.hero-line{width:90px;height:3px;background:#000;margin:30px auto 0}
.hero-note{margin-top:20px;color:#555;font-size:16px;display:flex;align-items:center;justify-content:center;gap:9px}
.note-dot{width:10px;height:10px;border:2px solid #000;background:#fff;display:inline-block}

.hero-glow{position:absolute;pointer-events:none;border:0!important;box-shadow:none!important;border-radius:0}
.hero-glow-one{width:240px;height:240px;right:-70px;top:-70px;background:var(--yellow);opacity:.35;transform:rotate(14deg)}
.hero-glow-two{width:170px;height:90px;left:-50px;bottom:-25px;background:var(--green);opacity:.4;transform:rotate(-9deg)}

.hl-yellow,.hl-green,.hl-pink{
  color:#000;padding:0 .12em;
  -webkit-box-decoration-break:clone;box-decoration-break:clone
}
.hl-yellow,.hl-green,.hl-pink{background:transparent}

.resources{max-width:1240px;margin:70px auto 80px;padding:0 8px}
.section-heading{
  display:flex;align-items:end;justify-content:space-between;gap:30px;
  margin-bottom:28px;padding:0 18px
}
.section-label{display:block;color:#555;margin-bottom:9px}
.section-heading h2{font-family:"Fira Code",monospace;font-size:35px;letter-spacing:-1px;color:#000}
.section-heading p{color:#666;font-size:14px;text-align:right}

.cards-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.resource-card{
  position:relative;min-height:245px;padding:25px;overflow:hidden;
  border:3px solid #000!important;border-radius:3px!important;
  background:#fff!important;box-shadow:5px 5px 0 #000!important;
  display:flex;flex-direction:column;transition:transform .18s,box-shadow .18s
}
.resource-card:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 #000!important}
.card-top{display:flex;align-items:center;justify-content:space-between}
.card-number{font-size:18px;font-weight:700;letter-spacing:1.5px;color:#777}
.card-icon{
  min-width:48px;height:40px;padding:0 8px;border:2px solid #000;
  border-radius:2px;display:grid;place-items:center;
  font-family:"Fira Code",monospace;font-size:11px;font-weight:700;
  background:#f1f1ed!important;color:#000!important
}
.card-content{margin-top:auto;padding-bottom:42px}
.card-title{
  position:relative;
  display:inline-block;
  isolation:isolate;
  color:#111;
  text-decoration:none;
  font-family:"Fira Code",monospace;
  font-size:21px;
  line-height:1.3;
  font-weight:800;
  letter-spacing:-.6px;
  z-index:0;
}

.card-title::before{
  content:"";
  position:absolute;
  z-index:-1;
  left:-5px;
  right:-5px;
  bottom:3px;
  height:58%;
  border-radius:2px 5px 3px 4px;
  transform:rotate(-1.2deg);
  opacity:.82;
}

.resource-card:nth-child(1) .card-title::before{background:#FFF2A8;}
.resource-card:nth-child(2) .card-title::before{background:#CFF5D2;}
.resource-card:nth-child(3) .card-title::before{background:#FFD6E7;}
.resource-card:nth-child(4) .card-title::before{background:#D9EFFF;}
.resource-card:nth-child(5) .card-title::before{background:#E7D8FF;}
.resource-card:nth-child(6) .card-title::before{background:#FFDDB8;}
.resource-card:nth-child(7) .card-title::before{background:#CDEFEA;}
.resource-card:nth-child(8) .card-title::before{background:#E5E5E5;}

.card-title:hover::before{
  opacity:1;
  transform:rotate(-1.2deg) scaleX(1.015);
}

.card-title span{
  position:relative;
  font-size:15px;
  font-weight:700;
  letter-spacing:-.2px;
}
.card-title:hover{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
.card-content p{margin-top:12px;max-width:250px;color:#666;font-size:15px;line-height:1.7}
.card-arrow{
  position:absolute;right:20px;bottom:18px;width:40px;height:36px;
  border:2px solid #000;display:grid;place-items:center;text-decoration:none;
  color:#000;background:#fff;font-size:19px;transition:transform .18s
}
.card-arrow:hover{transform:translateX(4px)}
.green,.blue,.purple,.orange,.cyan,.pink,.indigo,.teal{background:#fff!important}


.inspiration-quote{
  max-width:1240px;
  margin:0 auto 58px;
  padding:0 28px;
  text-align:center;
}

.inspiration-quote blockquote{
  position:relative;
  max-width:900px;
  margin:0 auto;
  padding:30px 42px;
  border-top:3px solid #111;
  border-bottom:3px solid #111;
  color:#222;
  font-family:"Fira Code",monospace;
  font-size:19px;
  line-height:1.7;
  font-weight:500;
}

.inspiration-quote .quote-mark{
  font-family:Georgia,serif;
  font-size:44px;
  line-height:0;
  vertical-align:-14px;
  margin-right:5px;
}

.inspiration-quote cite{
  display:block;
  margin-top:13px;
  font-family:"Fira Code",monospace;
  font-size:15px;
  font-style:normal;
  font-weight:700;
  color:#666;
}

@media(max-width:700px){
  .inspiration-quote{
    margin-bottom:45px;
    padding:0 20px;
  }
  .inspiration-quote blockquote{
    padding:25px 18px;
    font-size:16px;
    line-height:1.65;
  }
  .inspiration-quote .quote-mark{
    font-size:36px;
  }
  .inspiration-quote cite{
    font-size:14px;
  }
}

footer.igcs-footer{
  max-width:none;
  margin:0;
  padding:calc(var(--igcs-space-5) - 11px) clamp(16px,3vw,34px);
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:var(--igcs-space-4);
  background:var(--igcs-white);
  color:var(--igcs-grey);
  font-size:14px;
  font-weight:600;
  border-top:var(--igcs-border);
}

.footer-author{
  position:relative;
  display:inline-block;
  isolation:isolate;
  color:#111;
  z-index:0;
}

.footer-author::before{
  content:"";
  position:absolute;
  z-index:-1;
  left:-5px;
  right:-5px;
  bottom:1px;
  height:58%;
  background:#FFF2A8;
  border-radius:2px 5px 3px 4px;
  transform:rotate(-1.2deg);
  opacity:.9;
}
@media(max-width:1100px){
  .hero{margin-left:22px;margin-right:22px}
  .resources{margin-left:20px;margin-right:20px}
  .cards-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:700px){
  .nav-wrap{min-height:64px;padding:0 18px}.brand{font-size:17px}.brand-icon{width:36px;height:36px}
  .nav-wrap{flex-wrap:wrap;padding-block:10px}
  .nav-links{display:flex;order:3;width:100%;justify-content:space-between;gap:6px;border-top:2px solid #000;padding-top:8px}
  .nav-links a{min-height:42px;padding:7px 9px;font-size:16px}
  .hero{min-height:390px;margin:18px 14px 0;padding:48px 24px;box-shadow:6px 6px 0 #000}
  .hero h1{font-size:clamp(38px,11vw,55px);letter-spacing:-2px}
  .hero p{font-size:18px}
  .resources{margin:50px 14px 60px;padding:0}
  .section-heading{display:block;padding:0 7px}
  .section-heading h2{font-size:35px}
  .section-heading p{text-align:left;margin-top:9px}
  .cards-grid{gap:18px}
  .resource-card{min-height:225px;padding:21px}
}
@media(max-width:450px){
  .cards-grid{grid-template-columns:1fr}
  .resource-card{min-height:205px}
  .hero{min-height:370px;padding:43px 20px}
  .hero h1{font-size:40px}
  footer{display:block}footer span:last-child{display:block;margin-top:7px}
}