/* =========================================================================
   stylesheet — cream paper, forest green, burnt orange.
   All system fonts on purpose (nothing loads from anywhere else).
   ========================================================================= */

:root{
  --ink:#3a3427;        /* body text */
  --muted:#7a7058;      /* secondary text */
  --cream:#fdf8ec;      /* page paper */
  --paper:#ffffff;      /* post paper */
  --panel:#f4eeda;      /* meta strips */
  --rule:#d6c9a8;       /* hairlines */
  --green:#2f5233;      /* dark bar */
  --green-lt:#4a7040;   /* light bar */
  --green-pale:#eae3cd; /* nav */
  --orange:#c4571f;     /* accent */
  --link:#2f6b3f;
  --visited:#7a5a2a;
}

*{ box-sizing:border-box; }

body{
  margin:0;
  padding-block:14px;
  padding-left:12px;
  padding-right:12px;
  color:var(--ink);
  font:11px Verdana, Geneva, "MS PGothic", "Hiragino Kaku Gothic Pro", sans-serif;
  background-color:#4a5c3d;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48'%3E%3Crect width='48' height='48' fill='%234a5c3d'/%3E%3Cg fill='%23445539'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Ccircle cx='17' cy='15' r='3'/%3E%3Ccircle cx='15' cy='20' r='3'/%3E%3Ccircle cx='9' cy='20' r='3'/%3E%3Ccircle cx='7' cy='15' r='3'/%3E%3C/g%3E%3Ccircle cx='12' cy='16' r='1.6' fill='%23586b48'/%3E%3Cg fill='%23415235'%3E%3Ccircle cx='36' cy='36' r='3'/%3E%3Ccircle cx='41' cy='39' r='3'/%3E%3Ccircle cx='39' cy='44' r='3'/%3E%3Ccircle cx='33' cy='44' r='3'/%3E%3Ccircle cx='31' cy='39' r='3'/%3E%3C/g%3E%3Ccircle cx='36' cy='40' r='1.6' fill='%23536448'/%3E%3C/svg%3E");
}

a{ color:var(--link); }
a:visited{ color:var(--visited); }
a:hover{ color:var(--orange); }

img{ max-width:100%; }

/* ---------- shell ---------- */
#shell{
  max-width:720px;
  margin:0 auto;
  background:var(--cream);
  border:2px solid #1d3320;
  box-shadow:0 0 0 1px #6f8a5a, 0 8px 24px rgba(0,0,0,.45);
}

/* ---------- banner ---------- */
#banner{
  position:relative;
  padding:18px 16px 14px;
  color:var(--cream);
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.05) 0 6px, rgba(255,255,255,0) 6px 12px),
    linear-gradient(180deg, #6f8a5a 0%, #4a7040 45%, #2f5233 100%);
  border-bottom:2px solid #1d3320;
}
#banner h1{
  margin:0;
  font:bold 30px/1.1 "MS PGothic","Hiragino Kaku Gothic Pro", Verdana, sans-serif;
  letter-spacing:2px;
  text-shadow:2px 2px 0 rgba(29,51,32,.9);
}
#banner h1 a{ color:var(--cream); text-decoration:none; }
#banner .sub{
  margin-top:6px;
  font-size:11px;
  color:#e6edd6;
  text-shadow:1px 1px 0 rgba(29,51,32,.7);
}
#banner .est{
  position:absolute; right:10px; top:8px;
  font-size:9px; color:#d7e2c2; letter-spacing:1px;
}

/* ---------- nav ---------- */
#nav{
  background:linear-gradient(180deg,var(--green-pale),#d8cfae);
  border-bottom:1px solid #bdb08c;
  padding:5px 10px;
  font-size:11px;
}
#nav a{
  display:inline-block;
  padding:2px 8px;
  margin-right:2px;
  color:var(--green);
  text-decoration:none;
  border:1px solid transparent;
}
#nav a:hover, #nav a.on{
  background:var(--cream);
  border:1px solid #bdb08c;
  color:var(--orange);
}
#nav .sep{ color:#a89a74; }

/* ---------- ticker ("marquee") ---------- */
#ticker{
  overflow:hidden; white-space:nowrap;
  background:#23301f; color:#e0ad57;
  font:10px "Courier New", monospace;
  padding:4px 0;
  border-bottom:2px solid #1d3320;
}
#ticker span{
  display:inline-block;
  padding-left:100%;
  animation:tick 26s linear infinite;
}
@keyframes tick{ to{ transform:translateX(-100%); } }

.blink{ animation:blink 1.1s steps(2,start) infinite; }
@keyframes blink{ 50%{ opacity:0; } }

@media (prefers-reduced-motion:reduce){
  #ticker span{ animation:none; padding-left:8px; }
  .blink{ animation:none; }
}

/* ---------- single column ---------- */
#main{ padding:14px; }

@media (max-width:480px){
  #banner h1{ font-size:22px; }
  #main{ padding:10px; }
}

/* ---------- posts ---------- */
.post{
  border:1px solid var(--rule);
  background:var(--paper);
  margin-bottom:16px;
  box-shadow:2px 2px 0 rgba(47,82,51,.12);
}
.post h2{
  margin:0;
  padding:5px 9px;
  font:bold 13px Verdana, sans-serif;
  color:var(--cream);
  background:linear-gradient(180deg,var(--green-lt),var(--green));
  border-bottom:1px solid #1d3320;
}
.post h2 a{ color:var(--cream); text-decoration:none; }
.post h2 a:hover{ color:#f5d9b0; text-decoration:underline; }
.post .meta{
  background:var(--panel);
  border-bottom:1px dotted var(--rule);
  padding:4px 9px;
  font-size:10px;
  color:var(--muted);
}
.post .meta b{ color:var(--green); }
.post .body{ padding:12px 14px; font-size:11.5px; line-height:1.8; }
.post .body p{ margin:0 0 .95em; }
.post .body p:last-child{ margin-bottom:0; }
.post .body code{
  background:var(--panel); border:1px solid var(--rule);
  padding:0 3px; font:11px "Courier New", monospace;
}
.post .body .jp{
  font-size:15px;
  font-family:"MS PGothic","Hiragino Kaku Gothic Pro",sans-serif;
}
.post .foot{
  border-top:1px dotted var(--rule);
  padding:4px 9px;
  font-size:10px;
  color:var(--muted);
  text-align:right;
}
.tag{
  display:inline-block;
  background:var(--panel); border:1px solid var(--rule);
  padding:0 4px; margin-right:3px;
  font-size:9px; color:var(--green);
  text-decoration:none;
}
.tag:hover{ background:var(--cream); color:var(--orange); }

/* ---------- generic page box ---------- */
.box{
  border:1px solid var(--rule);
  background:var(--paper);
  margin-bottom:16px;
}
.box > h2{
  margin:0; padding:5px 9px;
  font:bold 12px Verdana,sans-serif; color:var(--cream);
  background:linear-gradient(180deg,var(--green-lt),var(--green));
}
.box .inner{ padding:12px 14px; font-size:11.5px; line-height:1.8; }
.box .inner p{ margin:0 0 .95em; }
.box .inner p:last-child{ margin-bottom:0; }

.postnav{
  display:flex; gap:14px; justify-content:space-between; flex-wrap:wrap;
}

.sub-note{ color:var(--muted); }

/* empty state */
.empty{
  text-align:center; color:var(--muted);
  padding:26px 16px; line-height:1.9;
}
.empty b{ display:block; color:var(--green); font-size:13px; margin-bottom:5px; }

/* archive list */
.arc-month{
  margin:12px 0 4px;
  font:bold 11px Verdana,sans-serif;
  color:var(--green);
  border-bottom:1px solid var(--rule);
  padding-bottom:2px;
}
.arc-month:first-child{ margin-top:0; }
ul.arc{ list-style:none; margin:0; padding:0; }
ul.arc li{
  padding:3px 0 3px 14px;
  border-bottom:1px dotted #e8e0c8;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M2 1 L6 4 L2 7 Z' fill='%23c4571f'/%3E%3C/svg%3E") no-repeat 2px 8px;
}
ul.arc .d{ color:var(--muted); font-size:10px; }

hr.dots{
  border:0; border-top:1px dotted var(--rule); margin:10px 0;
}