/* ========= Inflammation Project (board layout + About section) ========= */
:root{
  --ink: #EAF8F6;
  --ink-80: rgba(234,248,246,.82);
  --green: #22e28a;

  --page-top: #16181b;
  --page-btm: #171b1f;

  --board: #1b1c1f;
  --board-stroke: #2a2c30;

  --tile-grad-top: rgba(255,255,255,.10);
  --tile-grad-btm: rgba(255,255,255,.05);
  --tile-stroke: rgba(255,255,255,.10);

  --ic-surface: #1f2937;
  --ic-fill: #97f3ce;

  --shadow: rgba(0,0,0,.35);

  --about-surface: #121418;
  --about-stroke: #25272c;
}

*{ box-sizing:border-box; }
html,body{ height:100%; scroll-behavior:smooth; }
body{ margin:0; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji"; color:var(--ink); }

/* page bg */
.ipv2-page{
  background: linear-gradient(180deg, var(--page-top) 0%, var(--page-btm) 100%);
}

/* top bar */
.ip-topbar{ padding: 16px 18px; }
.ip-logo{
  color:#22e28a; text-decoration:none; font-weight:800; letter-spacing:.2px;
  display:inline-block; transform: translateZ(0);
}
/* --- top bar layout --- */
.ip-topbar { padding: 0; } /* we’ll use padding on the row instead */
.ip-topbar__row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 12px 18px;
}

/* keep your existing .ip-logo style; just make sure it’s an anchor */
.ip-logo{
  color:#22e28a;
  text-decoration:none;
  font-weight:800;
  letter-spacing:.2px;
  display:inline-block;
}

/* Main Site button (right side) */
.ip-mainbtn{
  display:inline-block;
  padding: 8px 14px;
  border-radius: 999px;
  font-weight: 800;
  letter-spacing:.2px;
  text-decoration:none;
  color:#062b3a;
  background: linear-gradient(135deg, #7ae0d6, #38bdf8);
  box-shadow: 0 12px 26px rgba(21,94,117,.35);
  transition: transform .18s ease, filter .18s ease, box-shadow .18s ease;
}
.ip-mainbtn:hover{ transform: translateY(-2px); filter:brightness(1.05); }
.ip-mainbtn:active{ transform: translateY(0); box-shadow: 0 10px 20px rgba(21,94,117,.45); }
.ip-mainbtn:focus-visible{ outline:3px solid #36d399; outline-offset:2px; }


/* header */
.ip-wrap{ max-width:1160px; margin:0 auto; padding:32px 16px 56px; }
.ip-title{ text-align:center; font-size: clamp(26px, 3.2vw, 32px); margin: 10px 0 8px; }
.ip-sub{ text-align:center; max-width:760px; margin:0 auto 14px; line-height:1.55; color:var(--ink-80); }

/* CTA button */
.ip-cta-row{ text-align:center; margin: 8px 0 28px; }
.ip-btn{
  display:inline-block;
  padding: 10px 16px;
  border-radius: 999px;
  font-weight: 800;
  letter-spacing:.2px;
  text-decoration:none;
  color:#062b3a;
  background: linear-gradient(135deg, #7ae0d6, #38bdf8);
  box-shadow: 0 14px 30px rgba(21,94,117,.35);
  transition: transform .18s ease, filter .18s ease, box-shadow .18s ease;
}
.ip-btn:hover{ transform: translateY(-2px); filter:brightness(1.05); }
.ip-btn:active{ transform: translateY(0); box-shadow: 0 10px 22px rgba(21,94,117,.45); }

/* board */
.ip-board{
  background: var(--board);
  border: 1px solid var(--board-stroke);
  border-radius: 14px;
  padding: 26px;
  box-shadow: 0 30px 60px var(--shadow);
}
.ip-grid{
  display:grid; gap:22px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* tile */
.ip-tile{
  display:block;
  text-decoration:none;
  color:var(--ink);
  background: linear-gradient(180deg, var(--tile-grad-top), var(--tile-grad-btm));
  border: 1px solid var(--tile-stroke);
  border-radius: 18px;
  padding: 18px 20px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease;
  will-change: transform;
  cursor: pointer;
}
.ip-tile__head{ display:flex; align-items:center; gap:12px; margin-bottom:8px; }
.ip-ic{
  width:38px; height:38px; border-radius:10px; display:grid; place-items:center;
  background: var(--ic-surface); box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
.ip-ic svg{ width:22px; height:22px; fill: var(--ic-fill); }
.ip-tile h3{ margin:0; font-size:18px; color:var(--green); }
.ip-tile p{ margin:0; color:var(--ink-80); max-width:44ch; }

/* interactions */
.ip-tile:hover{
  transform: translateY(-4px);
  box-shadow: 0 16px 32px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.18);
  background: linear-gradient(0deg, rgba(255,255,255,.10), rgba(255,255,255,.08));
}
.ip-tile:active{ transform: translateY(-1px) scale(.99); box-shadow: 0 10px 20px rgba(0,0,0,.45); }
.ip-tile:focus-visible{ outline: 3px solid #36d399; outline-offset: 2px; }
.ip-tile--wide{ grid-column: 1 / -1; }

/* ===== ABOUT SECTION (scroll target) ===== */
.ip-about{
  margin-top: 36px;
}
.ip-about__shell{
  background: linear-gradient(160deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border: 1px solid var(--about-stroke);
  border-radius: 16px;
  padding: 26px;
  -webkit-backdrop-filter: blur(8px) saturate(130%);
  backdrop-filter: blur(8px) saturate(130%);
}
.ip-about h2{
  margin: 0 0 6px; text-align:center; font-size: clamp(20px, 2.4vw, 24px);
}
.ip-about__lede{
  text-align:center; max-width: 820px; margin: 0 auto 18px; color: var(--ink-80);
}
.ip-about__grid{
  display:grid; gap:14px; grid-template-columns: repeat(3, minmax(0, 1fr));
}
.ip-about__card{
  background: #0f1115; border: 1px solid #23252a; border-radius: 14px;
  padding: 14px 14px 16px;
}
.ip-about__card h3{ margin: 2px 0 6px; color: var(--green); font-size: 16px; }
.ip-about__card p{ margin: 0; color: var(--ink-80); }

/* images */
.ip-photos{
  margin-top: 16px;
  display:grid; gap:12px; grid-template-columns: repeat(3, minmax(0, 1fr));
}
.ip-photo{
  background:#0f1115; border:1px solid #23252a; border-radius:12px; overflow:hidden;
}
.ip-photo img{ display:block; width:100%; height:200px; object-fit:cover; }
.ip-photo figcaption{ padding:8px 10px; color: var(--ink-80); font-size: 13px; }

/* responsive */
@media (max-width: 980px){
  .ip-about__grid{ grid-template-columns: 1fr; }
  .ip-photos{ grid-template-columns: 1fr; }
}
@media (max-width: 780px){
  .ip-grid{ grid-template-columns: 1fr; }
  .ip-board{ padding: 18px; }
}