/* ============================================================================
   KiwiScience — Soil Protection Group
   Shared stylesheet for the hub homepage and the reading pages (research,
   Red Zone, publications, students). The sidebar navigation lives in
   sidebar.css (also used by the Tika Tipu app); link both.
   Brand palette and typography match the KiwiScience suite.
   ============================================================================ */
:root{
  --cream:      #FDF6E3;   /* base background            */
  --humus:      #2D2318;   /* primary text & fine lines  */
  --kiwi-brown: #63452B;   /* headings, sidebar          */
  --brown-dark: #503a24;   /* hover / deep brown         */
  --leaf-green: #4A7836;   /* links, active, buttons     */
  --green-dark: #3a6029;
  --subsoil:    #EDE0C8;   /* secondary backgrounds      */
  --clay-rust:  #A55A32;   /* alerts, warnings           */
  --rule:       #d9cdb0;   /* hairlines on cream         */
  --muted:      #6b5c46;
  --font-serif: Georgia, "Times New Roman", Times, serif;
  --font-sans:  -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --maxw: 900px;
  --sidebar-w: 280px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--cream);
  color:var(--humus);
  font-family:var(--font-serif);
  font-size:18px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

a{ color:var(--leaf-green); }
a:hover{ color:var(--green-dark); }

/* ---- Content layout ---- */
.wrap{ max-width:var(--maxw); margin:0 auto; padding:48px 24px 88px; }
.wrap.wide{ max-width:1020px; }

/* ---- Hub homepage ---- */
.lede{
  font-size:1.14rem; line-height:1.6; color:var(--humus);
  border-left:4px solid var(--leaf-green);
  background:var(--subsoil);
  padding:18px 22px; margin:6px 0 34px; border-radius:0 8px 8px 0;
}
h1.page{ font-size:2.15rem; line-height:1.15; margin:0 0 6px; font-weight:700;
  color:var(--kiwi-brown); letter-spacing:-0.01em; }
.eyebrow{ font-family:var(--font-sans); font-size:0.76rem; font-weight:700;
  letter-spacing:0.14em; text-transform:uppercase; color:var(--leaf-green);
  margin:0 0 10px; }

.cards{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:18px; margin:32px 0 12px;
}
.card{
  display:flex; flex-direction:column;
  background:#fff; border:1px solid var(--rule); border-radius:12px;
  padding:22px 22px 20px; text-decoration:none; color:var(--humus);
  transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.card:hover{ transform:translateY(-2px); box-shadow:0 8px 22px rgba(45,35,24,0.12);
  border-color:var(--leaf-green); }
.card .ico{ font-size:1.7rem; line-height:1; margin-bottom:12px; }
.card h3{ margin:0 0 6px; font-size:1.24rem; color:var(--kiwi-brown); }
.card p{ margin:0; font-size:0.98rem; color:var(--muted); line-height:1.5; }
.card .go{ margin-top:14px; font-family:var(--font-sans); font-size:0.82rem;
  font-weight:700; letter-spacing:0.04em; color:var(--leaf-green); }
.card.feature{ grid-column:1 / -1; background:var(--kiwi-brown); border-color:var(--brown-dark); }
.card.feature h3, .card.feature .ico{ color:var(--cream); }
.card.feature p{ color:rgba(253,246,227,0.85); }
.card.feature .go{ color:#e9d9b8; }
.card.feature:hover{ border-color:var(--leaf-green); }

h2.block{ font-size:1.5rem; color:var(--kiwi-brown); margin:52px 0 10px;
  padding-top:16px; border-top:1px solid var(--rule); }

.contact{ font-size:1rem; line-height:1.5; }
.contact .name{ font-weight:700; color:var(--kiwi-brown); }

/* ---- Reading pages (methods manual, publication guidelines) ---- */
.masthead{ border-bottom:2px solid var(--kiwi-brown); padding-bottom:20px; margin-bottom:6px; }
.masthead h1{ font-size:2rem; line-height:1.18; margin:0 0 10px; color:var(--kiwi-brown); font-weight:700; }
.masthead .meta{ font-family:var(--font-sans); font-size:0.88rem; color:var(--muted); margin:0; }
.masthead .meta strong{ color:var(--humus); font-weight:600; }
.living{ font-style:italic; color:var(--muted); margin:14px 0 0; }

.content h2.method{
  font-size:1.55rem; color:var(--kiwi-brown); font-weight:700;
  margin:56px 0 12px; padding-top:20px; border-top:2px solid var(--rule);
  display:flex; align-items:baseline; gap:14px; scroll-margin-top:76px;
}
.content h2.method:first-of-type{ border-top:none; margin-top:20px; }
.content h2.method .mnum{
  font-family:var(--font-sans); font-size:0.95rem; font-weight:700;
  background:var(--leaf-green); color:#fff; border-radius:50%;
  width:1.9em; height:1.9em; min-width:1.9em; display:inline-flex;
  align-items:center; justify-content:center; letter-spacing:0;
}
.content h3{ font-size:1.22rem; color:var(--kiwi-brown); margin:30px 0 6px; font-weight:700; }
.content h4{ font-size:1.02rem; color:var(--humus); margin:22px 0 4px;
  font-family:var(--font-sans); font-weight:700; letter-spacing:0.01em; }
.content p{ margin:10px 0; }
.content ul, .content ol{ margin:10px 0 14px; padding-left:1.35em; }
.content li{ margin:5px 0; }
.content .figref{ font-size:0.9rem; color:var(--muted); font-style:italic; margin:6px 0 2px; }

figure{ margin:22px 0; text-align:center; }
figure img{ max-width:100%; height:auto; border:1px solid var(--rule);
  border-radius:8px; background:#fff; }
figcaption{ font-family:var(--font-sans); font-size:0.85rem; color:var(--muted);
  margin-top:8px; }

.warn{
  background:#fbeee6; border-left:4px solid var(--clay-rust);
  padding:12px 16px; border-radius:0 7px 7px 0; margin:14px 0;
  font-size:0.98rem;
}
.warn::before{ content:"⚠ "; color:var(--clay-rust); font-weight:700; }
.warn strong{ font-weight:600; }

/* Companions to .warn, used by the Kiwistat guides: .tip is a practical hint,
   .stat a statistical aside. Same geometry as .warn, different accent. */
.tip, .stat{
  padding:12px 16px; border-radius:0 7px 7px 0; margin:14px 0;
  font-size:0.98rem;
}
.tip{ background:#eef3e6; border-left:4px solid var(--leaf-green); }
.stat{ background:#e9eef5; border-left:4px solid #3a5a8c; }
.tip p:first-child, .stat p:first-child{ margin-top:0; }
.tip p:last-child, .stat p:last-child{ margin-bottom:0; }

/* Keystrokes, and the yellow-cell swatch the User Guide shows inline. */
kbd{
  font-family:var(--font-sans); font-size:0.78em; white-space:nowrap;
  background:#fff; border:1px solid #c9bda0; border-bottom-width:2px;
  border-radius:4px; padding:0 5px;
}
.yellow-demo{ background:#ffe97a; color:#6b5900; padding:0 6px; border-radius:3px; }

/* Definition lists — glossaries and the FAQ. */
.content dl{ margin:12px 0 16px; }
.content dt{ font-weight:700; color:var(--kiwi-brown); margin-top:12px; }
.content dd{ margin:2px 0 8px; }

/* Closing note at the foot of each guide. */
.guidefoot{
  margin-top:44px; padding-top:16px; border-top:1px solid var(--rule);
  font-family:var(--font-sans); font-size:0.86rem; color:var(--muted);
}

.table-wrap{ overflow-x:auto; margin:16px 0; }
table{ border-collapse:collapse; width:100%; font-size:0.95rem; background:#fff; }
th,td{ border:1px solid var(--rule); padding:8px 12px; text-align:left; vertical-align:top; }
thead th, tr:first-child th{ background:var(--subsoil); color:var(--kiwi-brown); }

.backtop{ display:inline-block; margin:8px 0 0; font-family:var(--font-sans);
  font-size:0.82rem; color:var(--muted); text-decoration:none; }
.backtop:hover{ color:var(--leaf-green); }

/* ---- Publication-guidelines components ---- */
code, .mono{ font-family:"SF Mono", ui-monospace, Menlo, Consolas, monospace;
  background:#f2ead6; padding:1px 6px; border-radius:4px; font-size:0.86em; }

.example{
  font-family:var(--font-sans);
  background:#fff; border:1px solid var(--rule); border-radius:8px;
  padding:16px 18px; margin:18px 0; font-size:0.95rem;
}
.example p{ margin:8px 0; }

.tag{ display:inline-block; font-family:var(--font-sans);
  font-size:0.72rem; font-weight:700; text-transform:uppercase; letter-spacing:0.05em;
  padding:2px 8px; border-radius:4px; margin-right:8px; vertical-align:middle; }
.tag.yes{ background:#e6efdd; color:var(--green-dark); }
.tag.no{ background:#f7e5dd; color:var(--clay-rust); }
.doubt{ color:var(--clay-rust); }
.good{ color:var(--green-dark); }

.callout{
  background:var(--subsoil); border:1px solid var(--rule); border-radius:8px;
  padding:16px 20px; margin:22px 0;
  font-family:var(--font-sans); font-size:0.95rem;
}
.callout strong{ color:var(--kiwi-brown); }

ol.steps{ counter-reset:step; list-style:none; padding-left:0; }
ol.steps>li{ position:relative; padding:2px 0 14px 46px; margin:0; }
ol.steps>li::before{
  counter-increment:step; content:counter(step);
  position:absolute; left:0; top:0;
  width:30px; height:30px; border-radius:50%;
  background:var(--leaf-green); color:#fff; font-weight:700;
  font-family:var(--font-sans);
  display:flex; align-items:center; justify-content:center; font-size:0.9rem;
}

/* ---- Footer ---- */
footer.site{
  border-top:1px solid var(--rule); background:var(--subsoil);
  color:var(--muted); font-size:0.9rem; font-family:var(--font-sans);
}
footer.site .inner{ max-width:1020px; margin:0 auto; padding:26px 24px;
  display:flex; flex-wrap:wrap; gap:14px 30px; align-items:center; }
footer.site a{ color:var(--leaf-green); text-decoration:none; }
footer.site a:hover{ text-decoration:underline; }
footer.site .private{ font-style:italic; }
footer.site .spacer{ margin-left:auto; }

/* ---- Responsive ---- */
@media (max-width:640px){
  body{ font-size:17px; }
  h1.page{ font-size:1.8rem; }
  .masthead h1{ font-size:1.7rem; }
  .wrap{ padding:32px 18px 64px; }
}

/* ---- Print ---- */
@media print{
  footer.site, .backtop{ display:none; }
  body{ font-size:11pt; }
  .card:hover{ transform:none; box-shadow:none; }
  a{ color:var(--humus); }
}