/* ============================================================
   Computational Hamster Dynamics — shared stylesheet
   Design concept: a slightly worn field-notebook kept by
   researchers chasing an unobservable hamster inside a
   neural network's weight space. Warm paper tones, a soil/
   banana accent pair, ruled-notebook rhythm, boxed "proofs",
   and monospace log-lines for the hamster's own voice.
   ============================================================ */

:root{
  --paper:      #efe6d4;
  --paper-2:    #e6dac2;
  --ink:        #2f2a1f;
  --ink-soft:   #5b5340;
  --rule:       #c9b98f;
  --hamster:    #8a5a2b;
  --hamster-lt: #b98a4f;
  --banana:     #d9a520;
  --banana-lt:  #f0cf6a;
  --pine:       #3f4a34;
  --alert:      #a4472c;
  --max-w:      760px;
}

*{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  margin:0;
  padding:0;
  background:var(--paper);
  color:var(--ink);
  font-family: Georgia, "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", serif;
  line-height:1.9;
  position:relative;
  overflow-x:hidden;
}

/* ---- faint background image layer (user supplies the image) ---- */
body::before{
  content:"";
  position:fixed;
  inset:0;
  background-image:url("./img/bg.png");
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  opacity:0.07;
  z-index:0;
  pointer-events:none;
}

/* faint graph-paper / weight-matrix grid, sits above the photo, under content */
body::after{
  content:"";
  position:fixed;
  inset:0;
  background-image:
    linear-gradient(var(--rule) 1px, transparent 1px),
    linear-gradient(90deg, var(--rule) 1px, transparent 1px);
  background-size: 28px 28px;
  opacity:0.10;
  z-index:0;
  pointer-events:none;
}

.wrap{
  position:relative;
  z-index:1;
  max-width:var(--max-w);
  margin:0 auto;
  padding: 0 20px 80px;
}

/* ---------------- header / footer nav ---------------- */
.site-nav{
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:space-between;
  max-width:var(--max-w);
  margin:0 auto;
  padding:18px 20px;
  border-bottom:2px solid var(--hamster);
  font-family: -apple-system, "Hiragino Sans", "Noto Sans JP", sans-serif;
}
.site-nav.footer-nav{
  border-bottom:none;
  border-top:2px solid var(--hamster);
  margin-top:56px;
}
.site-nav a.home-link{
  color:var(--hamster);
  text-decoration:none;
  font-weight:700;
  letter-spacing:.02em;
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:0.95rem;
}
.site-nav a.home-link:hover{ color:var(--alert); }
.site-nav a.home-link::before{ content:"🐾"; font-size:.9rem; }
.site-nav .lang-switch{
  font-size:0.85rem;
}
.site-nav .lang-switch a{
  color:var(--ink-soft);
  text-decoration:none;
  border-bottom:1px dotted var(--rule);
}
.site-nav .lang-switch a:hover{ color:var(--hamster); }

/* ---------------- masthead ---------------- */
.masthead{
  position:relative;
  z-index:1;
  max-width:var(--max-w);
  margin:0 auto;
  padding:44px 20px 28px;
  text-align:center;
}
.masthead .eyebrow{
  font-family:"Courier New", monospace;
  font-size:0.78rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--hamster);
}
.masthead h1{
  font-size:clamp(1.6rem, 5vw, 2.5rem);
  margin:.35em 0 .2em;
  color:var(--ink);
  line-height:1.35;
}
.masthead .subtitle{
  color:var(--ink-soft);
  font-size:0.98rem;
  font-style:italic;
}
.masthead .critter-row{
  margin-top:18px;
  font-size:1.4rem;
  letter-spacing:.5em;
  opacity:.85;
}

/* ---------------- typography ---------------- */
h2.chapter{
  font-family: Georgia, "Hiragino Mincho ProN", serif;
  font-size:1.35rem;
  color:var(--hamster);
  border-left:6px solid var(--banana);
  padding:2px 0 2px 14px;
  margin:2.6em 0 .9em;
}
h3.subhead{
  font-family:"Courier New", monospace;
  font-size:1rem;
  color:var(--pine);
  letter-spacing:.03em;
  margin:1.8em 0 .6em;
}
p{ margin:0 0 1em; }
.narr{ color:var(--ink); }
.narr.small{ font-size:.95rem; color:var(--ink-soft); }

/* ---------------- dialogue lines ---------------- */
.dlg{
  font-family: -apple-system, "Hiragino Sans", "Noto Sans JP", sans-serif;
  margin:.35em 0;
  padding-left:1.6em;
  position:relative;
}
.dlg .who{
  font-weight:700;
  margin-right:.4em;
}
.dlg.hamster .who{ color:var(--hamster); }
.dlg.reviewer .who{ color:var(--alert); }
.dlg.researcher .who{ color:var(--pine); }
.dlg.crowd .who{ color:var(--ink-soft); }
.dlg::before{
  content:"·";
  position:absolute;
  left:.3em;
  color:var(--rule);
}

/* action / SFX lines (ｶｻｯ, ﾁｮﾛﾁｮﾛ, ぽろっ...) */
.sfx{
  font-family:"Courier New", monospace;
  color:var(--hamster-lt);
  letter-spacing:.15em;
  margin:.6em 0;
}

/* ---------------- boxed equations / laws ---------------- */
.math{
  font-family:"Courier New", "SFMono-Regular", monospace;
  background:var(--paper-2);
  border:1px solid var(--rule);
  border-radius:4px;
  padding:12px 16px;
  margin:1.1em 0;
  font-size:0.92rem;
  color:var(--ink);
  overflow-x:auto;
  white-space:pre;
}
.math.boxed{
  border:2px solid var(--pine);
  box-shadow:3px 3px 0 var(--rule);
}

/* ---------------- ascii-art diagrams ---------------- */
.ascii{
  font-family:"Courier New", monospace;
  font-size:0.78rem;
  line-height:1.35;
  background: #fbf6ea;
  border:1px dashed var(--hamster-lt);
  border-radius:4px;
  padding:14px;
  margin:1.2em 0;
  overflow-x:auto;
  white-space:pre;
  color:var(--pine);
}

/* ---------------- quoted review excerpts ---------------- */
blockquote.review{
  font-family:"Courier New", monospace;
  font-size:0.9rem;
  border-left:4px solid var(--alert);
  margin:1em 0;
  padding:.4em 0 .4em 1em;
  color:var(--ink-soft);
  background:rgba(164,71,44,0.05);
}

/* ---------------- section divider (paw prints) ---------------- */
.divider{
  text-align:center;
  margin:2.6em 0;
  letter-spacing:.6em;
  color:var(--hamster-lt);
  font-size:1rem;
}

/* ---------------- footnote / caption style ---------------- */
.caption{
  font-size:0.85rem;
  color:var(--ink-soft);
  font-style:italic;
  margin:.3em 0 1.2em;
}

/* ---------------- the four laws, closing block ---------------- */
.laws{
  background:var(--paper-2);
  border:1px solid var(--rule);
  border-radius:6px;
  padding:22px 22px 8px;
  margin:1.6em 0;
}
.laws h4{
  margin:0 0 .3em;
  font-family:"Courier New", monospace;
  color:var(--hamster);
  font-size:0.95rem;
}
.laws p{ margin:0 0 1.1em; }

.margin-note{
  font-family: "Comic Sans MS", "Yu Mincho", cursive, sans-serif;
  color:var(--alert);
  transform:rotate(-1deg);
  display:inline-block;
  border-bottom:1px dashed var(--alert);
  font-size:0.95rem;
}

.the-end{
  text-align:center;
  margin:3em 0 1em;
  font-size:1.3rem;
  color:var(--hamster);
  letter-spacing:.3em;
}

/* ---------------- responsive / mobile ---------------- */
@media (max-width: 640px){
  .wrap{ padding: 0 14px 60px; }
  .masthead{ padding:32px 14px 20px; }
  .masthead h1{ font-size:1.4rem; }
  .site-nav{ padding:14px; }
  h2.chapter{ font-size:1.15rem; margin-top:2em; }
  .ascii{ font-size:0.68rem; padding:10px; }
  .math{ font-size:0.82rem; padding:10px 12px; }
  .dlg{ padding-left:1.2em; font-size:0.96rem; }
  body{ line-height:1.8; }
  .divider{ letter-spacing:.4em; }
}

@media (max-width: 400px){
  .ascii{ font-size:0.6rem; }
}