/* -------------------------------------------------------
   Student Science Journal — style.css  (FULL FILE)
   Notebook theme + notebook form + sketch accents
-------------------------------------------------------- */

/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&family=Patrick+Hand&display=swap');

/* ====== Tokens ====== */
:root{
  --ink:#1f2937;
  --muted:#64748b;
  --accent:#0ea5e9;
  --hi-blue:#bfe6ff;
  --hi-green:#c9f7c9;
  --paper:#fffbe6;
  --grid:#ece6c8;
  --radius:6px;
}

/* ====== Base ====== */
*{ box-sizing:border-box }
html,body{ height:100% }
html{ -webkit-text-size-adjust:100% }

/* IMPORTANT: restore readable base size */
body {
  margin: 0;
  font-family:'Patrick Hand','Kalam',cursive, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  font-size:19px;
  line-height:1.75;
  color:var(--ink);
  background:
    linear-gradient(var(--grid) 1px, transparent 1px) 0 0/24px 24px,
    linear-gradient(90deg, var(--grid) 1px, transparent 1px) 0 0/24px 24px,
    var(--paper);
}
/* Notebook punch-holes on left */
body:before{
  content:"";
  position:fixed;
  top:0; left:0; height:100vh; width:18px;
  background: radial-gradient(circle at 9px 42px,#e0dcc6 0 6px, transparent 6.5px) repeat-y;
  background-size:18px 84px;
  opacity:.55;
  pointer-events:none;
  z-index:-1;
}

/* ====== Typography ====== */
h1,h2,h3{ font-weight:600; margin:0 0 10px }
p{ margin:0 0 14px }
.small{ font-size:.85rem; color:var(--muted) }

/* Marker utilities */
.marker{ position:relative; display:inline-block; padding:0 .18em }
.marker::after{
  content:""; position:absolute; left:0; right:0; bottom:.10em; height:.80em;
  background:var(--hi-blue); border-radius:2px; transform:skewX(-6deg);
  z-index:-1; box-shadow:0 1px 0 rgba(0,0,0,.04) inset;
}
.marker-green::after{ background:var(--hi-green) }

/* FIX: taller highlight for page titles */
.marker-tall::after{ height:1.12em; bottom:-.02em }

/* Section titles */
.section-title{ margin:0 0 18px; font-size:2.2rem; line-height:1.12; letter-spacing:.3px }

/* ====== Layout (CENTERED WRAPPERS) ====== */
.container,
.section,
.hero,
.journal-header,
.mission{ max-width:1100px; margin-left:auto; margin-right:auto }

.container{ padding:14px 20px; display:flex; align-items:center; gap:18px }
.section{ padding:0 20px; margin-top:22px; margin-bottom:64px }
.hero{ padding:0 20px; margin-top:28px; margin-bottom:16px }

/* ====== Sticky top nav ====== */
.header{
  position:sticky;
  top:0; left:0; width:100%;
  z-index:1000;
  margin:0;
  background:#92ddd5;
  border-top:0;
  border-bottom:1px solid rgba(0,0,0,.10);
  box-shadow:0 1px 2px rgba(0,0,0,.08);
}
.header::before{
  content:"";
  position:absolute;
  top:-2px; left:0; right:0; height:2px;
  background:inherit;
}
.brand{ display:flex; align-items:center; gap:10px; text-decoration:none; color:inherit }
.brand img{ width:36px; height:36px; border-radius:10px; object-fit:cover }
.brand-title { font-size: 1.6rem; font-weight: 800; }
.brand-sub{ font-size:1rem; color:var(--muted); margin-top:-6px }
.nav {
  margin-left: auto;
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: flex-end;
  flex-grow: 1;
}
.nav a {
  position:relative;
  display:inline-block;
  padding:12px 16px;
  font-size:1.55rem;
  border-radius:var(--radius);
  text-decoration:none;
  color:inherit;
  font-weight:700;
}
.nav a:hover{ background:rgba(2,132,199,.06) }
.nav a.active::after{
  content:""; position:absolute; left:2px; right:2px; bottom:3px; height:8px;
  background:var(--hi-blue); border-radius:2px; transform:skewX(-6deg); z-index:-1;
}

/* ====== Journal banner ====== */
.journal-header{ text-align:center; padding:46px 20px 28px; border-bottom:2px solid rgba(0,0,0,.08) }
.journal-header h1 { font-size:3.2rem; line-height:1.15; }
.journal-header .sub { font-size:1.5rem; margin:14px 0 0; color:#374151; }

/* ====== Mission ====== */
.mission{ padding:0 20px; margin-top:34px; margin-bottom:40px }
.mission-title,
.mission-body{ max-width:75ch; margin-left:auto; margin-right:auto }

/* ====== Notebook FORM styles ====== */
.form-notebook{ --pen:#111; font:inherit }
.form-notebook label{ font-weight:800; margin:18px 0 6px; font:inherit }

.form-notebook input[type="text"],
.form-notebook input[type="email"],
.form-notebook input[type="url"],
.form-notebook select{
  width:100%; background:transparent; color:inherit; font:inherit;
  border:none; border-bottom:2px solid var(--pen); padding:10px 2px 8px;
  border-radius:0; filter:url(#rough-edge);
  outline:none; box-shadow:none; caret-color:var(--ink);
}
.form-notebook textarea{
  width:100%; background:
    repeating-linear-gradient(to bottom, transparent 0 26px, rgba(0,0,0,.18) 26px 28px);
  color:inherit; font:inherit;
  border:2px solid var(--pen); border-radius:3px; padding:12px 10px;
  min-height:160px; resize:vertical; filter:url(#rough-edge);
  outline:none; box-shadow:none; caret-color:var(--ink);
}
.btn-notebook{
  appearance:none; -webkit-appearance:none; background:transparent;
  color:inherit; font:inherit; font-weight:700; cursor:pointer;
  border:2px solid #111; border-radius:3px; padding:10px 14px; filter:url(#rough-edge);
}
.btn-notebook:hover{ background:rgba(0,0,0,.04) }
.btn-notebook:focus{ outline:none }

/* ====== Articles ====== */
.articles-grid{ display:grid; gap:28px; grid-template-columns:repeat(3,minmax(0,1fr)); padding:0 20px }
@media (max-width:1000px){ .articles-grid{ grid-template-columns:1fr 1fr } }
@media (max-width:640px){  .articles-grid{ grid-template-columns:1fr } }
.sketch-article{ background:transparent; border:2px solid #111; border-radius:3px; padding:12px; filter:url(#rough-edge) }
.sketch-article img{ width:100%; height:200px; object-fit:cover; display:block; margin:0 0 10px; border:2px solid #111; border-radius:2px; filter:url(#rough-edge) }
.sketch-article h3{ margin:4px 0 6px; font-size:1.15rem; line-height:1.35 }
.sketch-article a{ color:inherit; text-decoration:none }
.sketch-article a:hover{ text-decoration:underline }
.sketch-article .byline{ font-size:.9rem; color:#4b5563 }

/* ====== Footer ====== */
.footer{ padding:40px 20px; border-top:1px solid rgba(0,0,0,.06); margin-top:80px;
  background:linear-gradient(180deg, rgba(255,255,255,.65), rgba(255,255,255,.92)) }
.footer .container{ justify-content:space-between; flex-wrap:wrap; gap:10px }

/* ====== Utilities ====== */
.mt-3{ margin-top:12px } .mt-4{ margin-top:16px } .mt-6{ margin-top:24px }

/* ===== Sticky-note style ===== */
.articles-grid { align-items:start; }
.articles-grid .sketch-article{
  background:#fff8bf;
  border:none;
  border-radius:6px;
  padding:14px;
  box-shadow:0 10px 18px rgba(0,0,0,.08), 0 2px 0 rgba(0,0,0,.08) inset;
  transform:rotate(-0.6deg);
  position:relative;
  filter:none;
}
.articles-grid .sketch-article:nth-child(2){ transform:rotate(0.7deg) }
.articles-grid .sketch-article:nth-child(3){ transform:rotate(-0.3deg) }
.articles-grid .sketch-article:nth-child(4){ transform:rotate(0.4deg) }
.articles-grid .sketch-article::before{
  content:"";
  position:absolute;
  top:-10px; left:50%;
  width:80px; height:18px;
  transform:translateX(-50%) rotate(-2deg);
  background:linear-gradient(180deg, #fcfbf4 0%, #efe9c9 100%);
  box-shadow:0 4px 8px rgba(0,0,0,.10);
  opacity:.9; border-radius:3px;
}
.articles-grid .sketch-article img{
  width:100%; height:180px; object-fit:cover; display:block;
  border-radius:4px; border:none; box-shadow:0 1px 0 rgba(0,0,0,.08) inset;
}
.articles-grid .sketch-article h3{ margin:8px 0 6px; font-size:1.05rem; line-height:1.35 }
.articles-grid .sketch-article .byline{ font-size:.9rem; color:#5b6b7a }

/* Sticky note link style */
.sticky-link {
  position: relative;
  display: inline-block;
  padding: 6px 12px;
  margin-right: 8px;
  font-weight: 700;
  text-decoration: none;
  color: var(--ink);
  background: var(--hi-blue);
  border-radius: 3px;
  transform: skewX(-4deg);
  box-shadow: 2px 2px 0 rgba(0,0,0,0.2);
}
.sticky-link:hover { background: #a3dfff; }

/* ====== Follow Us Section ====== */
.follow-us { text-align: center; margin: 40px auto; }
.social-links { display: flex; justify-content: center; gap: 20px; margin-top: 14px; }
.social { display: flex; align-items: center; gap: 8px; font-weight: 700; }
.social .icon { width: 22px; height: 22px; filter: drop-shadow(1px 1px 0 rgba(0,0,0,0.15)); }

/* === NEW: Center Mission description & buttons === */
.mission p {
  text-align: center;
  max-width: 75ch;
  margin-left: auto;
  margin-right: auto;
}
.mission .mt-4 {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 20px;
}