/*!
  Hatena Cyberpunk Blog Theme — single-file distribution
  Paste this into Hatena Blog → デザイン → カスタマイズ → デザインCSS
  Source files: colors_and_type.css + boilerplate.css
*/
/* ============================================================
   Hatena Cyberpunk Blog — Design Tokens
   blue-black base · neon green main accent + electric blue sub
   japanese gothic-only typography
   ============================================================ */

/* ---------- Fonts (Google Fonts) ---------- */
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700;900&family=JetBrains+Mono:wght@400;700&family=Orbitron:wght@500;700&display=swap");

:root {
  /* ---------- Palette: base (blue-black ramp) ---------- */
  --bg-ink:        oklch(0.09 0.018 252);   /* deepest — page background */
  --bg:            oklch(0.12 0.022 252);   /* canvas */
  --surface-1:     oklch(0.16 0.025 250);   /* cards, entries */
  --surface-2:     oklch(0.20 0.028 250);   /* raised surfaces, header bg */
  --surface-3:     oklch(0.25 0.030 248);   /* hovered cards, input bg */
  --stroke:        oklch(0.32 0.028 245);   /* default 1px border */
  --stroke-strong: oklch(0.44 0.040 240);   /* heavier divider */

  /* ---------- Palette: foreground ---------- */
  --fg:            oklch(0.96 0.015 245);   /* primary text — cool off-white */
  --fg-muted:      oklch(0.78 0.018 242);   /* meta text, captions */
  --fg-dim:        oklch(0.58 0.020 240);   /* timestamps, disabled */
  --fg-faint:      oklch(0.42 0.022 240);   /* lowest-readable chrome */

  /* ---------- Accents: green (primary) + blue (secondary) ---------- */
  --accent-green:      oklch(0.86 0.19 155);   /* #39ff9e-ish — default signal */
  --accent-green-dim:  oklch(0.65 0.16 155);
  --accent-green-glow: color-mix(in oklch, var(--accent-green) 40%, transparent);

  --accent-blue:       oklch(0.72 0.17 240);   /* electric cyan-blue — sub-accent */
  --accent-blue-dim:   oklch(0.55 0.14 240);
  --accent-blue-glow:  color-mix(in oklch, var(--accent-blue) 45%, transparent);

  /* ---------- Semantic ---------- */
  --link:         var(--accent-green);
  --link-hover:   oklch(0.92 0.18 155);
  --selection-bg: color-mix(in oklch, var(--accent-green) 35%, var(--bg));
  --focus-ring:   var(--accent-green);
  --danger:       oklch(0.70 0.20 25);
  --success:      var(--accent-green);
  --info:         var(--accent-blue);

  /* ---------- Type: families (gothic only) ---------- */
  --font-sans:    "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "Yu Gothic", "Meiryo", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", "SF Mono", "Consolas", "Menlo", monospace;
  --font-display: "Orbitron", "Noto Sans JP", sans-serif;

  /* ---------- Type: scale ---------- */
  --fs-xs:   12px;
  --fs-sm:   13px;
  --fs-base: 15px;   /* mobile body */
  --fs-md:   16px;   /* desktop body */
  --fs-lg:   18px;
  --fs-xl:   22px;
  --fs-2xl:  28px;
  --fs-3xl:  36px;
  --fs-4xl:  clamp(32px, 4.5vw, 56px);

  --lh-tight: 1.25;
  --lh-snug:  1.45;
  --lh-body:  1.85;   /* JP body copy */
  --lh-latin: 1.55;

  --tracking-tight:   -0.01em;
  --tracking-normal:   0;
  --tracking-wide:     0.04em;
  --tracking-display:  0.08em;   /* Orbitron all-caps */

  /* ---------- Spacing (4px grid) ---------- */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  20px;
  --s-6:  24px;
  --s-8:  32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;
  --s-20: 80px;
  --s-24: 96px;

  /* ---------- Radii ---------- */
  --r-sm: 2px;
  --r-md: 4px;
  --r-lg: 8px;

  /* ---------- Elevation (glow, not shadow) ---------- */
  --glow-green:   0 0 16px -2px var(--accent-green-glow);
  --glow-blue:    0 0 16px -2px var(--accent-blue-glow);
  --bezel-top:    inset 0 1px 0 color-mix(in oklch, white 8%, transparent);
  --bezel-full:   inset 0 1px 0 color-mix(in oklch, white 10%, transparent),
                  inset 0 -1px 0 color-mix(in oklch, black 30%, transparent);

  /* ---------- Motion ---------- */
  --ease-out-snap: cubic-bezier(.2, .8, .2, 1);
  --dur-fast:  120ms;
  --dur-base:  180ms;
  --dur-slow:  320ms;

  /* ---------- Overlays ---------- */
  --scanline: repeating-linear-gradient(
    0deg,
    transparent 0,
    transparent 2px,
    color-mix(in oklch, var(--accent-blue) 6%, transparent) 3px,
    transparent 4px
  );
  --grid-overlay: linear-gradient(
      color-mix(in oklch, var(--accent-blue) 10%, transparent) 1px, transparent 1px
    ),
    linear-gradient(
      90deg,
      color-mix(in oklch, var(--accent-blue) 10%, transparent) 1px, transparent 1px
    );
}

/* ============================================================
   Semantic element styling (pair with your CSS reset)
   ============================================================ */

::selection { background: var(--selection-bg); color: var(--fg); }

html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  font-feature-settings: "palt" 0;
  -webkit-font-smoothing: antialiased;
}
@media (min-width: 768px) { html, body { font-size: var(--fs-md); } }

h1, h2, h3, h4, h5, h6 {
  color: var(--fg);
  font-family: var(--font-display), var(--font-sans);
  font-weight: 700;
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display);
  font-feature-settings: "palt" 1;
  text-transform: uppercase; /* Latin only — JP ignores */
}
/* Japanese characters shouldn't inherit display tracking */
h1 :lang(ja), h2 :lang(ja), h3 :lang(ja),
h4 :lang(ja), h5 :lang(ja), h6 :lang(ja) {
  letter-spacing: var(--tracking-normal);
  text-transform: none;
}
/* For JP-heavy headings, fall back to gothic sans, not Orbitron */
h2, h3, h4 { font-family: var(--font-sans); }

h1 { font-size: var(--fs-4xl); font-family: var(--font-display), var(--font-sans); }
h2 { font-size: var(--fs-3xl); letter-spacing: var(--tracking-wide); }
h3 { font-size: var(--fs-2xl); letter-spacing: var(--tracking-wide); }
h4 { font-size: var(--fs-xl);  letter-spacing: var(--tracking-wide); }
h5 { font-size: var(--fs-lg);  font-family: var(--font-sans); letter-spacing: var(--tracking-wide); }
h6 { font-size: var(--fs-md);  font-family: var(--font-mono); letter-spacing: var(--tracking-normal); color: var(--fg-muted); text-transform: none; }

p  { margin: 0 0 var(--s-4); color: var(--fg); text-wrap: pretty; }

a {
  color: var(--link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: color var(--dur-base) var(--ease-out-snap),
              text-shadow var(--dur-base) var(--ease-out-snap);
}
a:hover {
  color: var(--link-hover);
  text-shadow: 0 0 12px var(--accent-green-glow);
}
a:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

code, kbd, pre, samp {
  font-family: var(--font-mono);
  font-size: 0.9em;
}
code {
  background: var(--surface-2);
  color: var(--accent-green);
  padding: 0.1em 0.4em;
  border-radius: var(--r-sm);
  border: 1px solid var(--stroke);
}
pre {
  background: var(--surface-1);
  border: 1px solid var(--stroke);
  border-left: 2px solid var(--accent-green);
  border-radius: var(--r-md);
  padding: var(--s-4);
  overflow-x: auto;
  line-height: 1.55;
  font-size: var(--fs-sm);
  color: var(--fg);
}
pre code {
  background: transparent; border: 0; padding: 0; color: inherit;
}

blockquote {
  margin: var(--s-6) 0;
  padding: var(--s-4) var(--s-6);
  border: 1px solid var(--stroke);
  border-left: 2px solid var(--accent-blue);
  background: color-mix(in oklch, var(--accent-blue) 6%, var(--surface-1));
  color: var(--fg-muted);
}
blockquote cite {
  display: block;
  margin-top: var(--s-2);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-style: normal;
  color: var(--fg-dim);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

hr {
  border: 0;
  height: 5px;
  margin: var(--s-12) auto;
  width: 40%;
  background:
    linear-gradient(to bottom,
      var(--stroke) 0, var(--stroke) 1px,
      transparent 1px, transparent 4px,
      var(--stroke) 4px, var(--stroke) 5px
    );
}

ul, ol { padding-left: 1.5em; margin: 0 0 var(--s-4); }
li { margin-bottom: var(--s-1); }

/* Callouts — `▸ NOTE` (green) / `▸ INFO` (blue) */
.callout {
  border: 1px solid var(--stroke);
  padding: var(--s-4) var(--s-5);
  margin: var(--s-6) 0;
  background: var(--surface-1);
  font-size: var(--fs-sm);
  position: relative;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);
}
.callout::before {
  content: attr(data-label);
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--accent-green);
  margin-right: var(--s-2);
}
.callout--info::before { color: var(--accent-blue); }
.callout--info { border-left: 2px solid var(--accent-blue); }
.callout--note { border-left: 2px solid var(--accent-green); }

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 0.01ms !important; }
}


/* ===== boilerplate ===== */
/*
  Theme: hatena-cyberpunk-android
  Description: サイバーパンクで未来都市風、アンドロイドが執筆しているブログ
  Responsive: yes
  Depends on: colors_and_type.css (import first)
*/

/* ---------- Global canvas ---------- */
body {
  background:
    var(--scanline),
    radial-gradient(ellipse 80% 40% at 50% 0%, color-mix(in oklch, var(--accent-blue) 8%, transparent), transparent 70%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-ink) 100%);
  background-attachment: fixed;
  min-height: 100vh;
}

/* ---------- Hatena global header (leave mostly alone) ---------- */
#globalheader-container { background: var(--bg-ink); }


/* ---------- Container ---------- */
#container, #footer {
  padding-left: var(--s-4);
  padding-right: var(--s-4);
}
@media (min-width: 768px) {
  #container, #footer { width: 720px; margin: auto; padding-left: 0; padding-right: 0; }
}
@media (min-width: 992px) {
  #container, #footer { width: 940px; }
}

/* ---------- Blog title / header ---------- */
#blog-title {
  margin: var(--s-8) 0 var(--s-10);
  padding: var(--s-6) var(--s-6);
  border: 1px solid var(--stroke);
  background:
    var(--grid-overlay) 0 0 / 40px 40px,
    linear-gradient(180deg, var(--surface-2), var(--surface-1));
  clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 24px, 100% 100%, 24px 100%, 0 calc(100% - 24px));
  position: relative;
  box-shadow: var(--bezel-top);
}
#blog-title::before {
  content: "// " attr(data-brand);
  position: absolute; top: var(--s-2); left: var(--s-4);
  font-family: var(--font-mono); font-size: var(--fs-xs);
  color: var(--accent-green); letter-spacing: var(--tracking-wide);
}
#title {
  margin: var(--s-4) 0 0;
  font-size: var(--fs-3xl);
  font-family: var(--font-display);
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
}
#title a { color: var(--fg); text-decoration: none; }
/* Subtle static underline in lieu of a blinking cursor — readable, no motion distraction */
#title a {
  background-image: linear-gradient(to right, var(--accent-green) 0, var(--accent-green) 100%);
  background-repeat: no-repeat;
  background-size: 1.2em 2px;
  background-position: 0 100%;
  padding-bottom: 4px;
}

#blog-description {
  margin-top: var(--s-3);
  color: var(--fg-muted);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

/* ---------- Top editarea / breadcrumb ---------- */
#top-editarea { margin-bottom: var(--s-4); }
.breadcrumb {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--fg-dim);
  letter-spacing: var(--tracking-wide);
}
.breadcrumb a { color: var(--fg-muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--accent-green); }

/* ---------- Layout columns ---------- */
#content-inner {
  display: flex;
  flex-direction: column;
  gap: var(--s-8);
}
@media (min-width: 768px) {
  #content-inner { flex-direction: row; gap: var(--s-8); }
  #wrapper { width: 480px; }
  #box2    { width: 200px; }
}
@media (min-width: 992px) {
  #wrapper { width: 600px; }
  #box2    { width: 280px; }
}

/* ---------- Entry ---------- */
.entry {
  position: relative;
  margin-bottom: var(--s-16);
  background: var(--surface-1);
  border: 1px solid var(--stroke);
  border-radius: var(--r-md);
  padding: var(--s-6) var(--s-6) var(--s-4);
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%);
  box-shadow: var(--bezel-top);
}
.entry-header {
  padding-bottom: var(--s-4);
  margin-bottom: var(--s-6);
  border-bottom: 1px solid var(--stroke);
}
.date {
  margin-bottom: var(--s-2);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--accent-green);
  letter-spacing: var(--tracking-wide);
}
.date a { color: inherit; text-decoration: none; }
.date a::before { content: "[ "; color: var(--fg-dim); }
.date a::after  { content: " ]"; color: var(--fg-dim); }
.date .hyphen { color: var(--fg-dim); }

.entry-title {
  margin: 0 0 var(--s-2);
  font-size: var(--fs-2xl);
  font-family: var(--font-sans);
  letter-spacing: var(--tracking-normal);
  text-transform: none;
  line-height: var(--lh-snug);
}
.entry-title a { color: var(--fg); text-decoration: none; }
.entry-title a:hover { color: var(--accent-green); text-shadow: 0 0 12px var(--accent-green-glow); }

.categories { font-size: var(--fs-xs); font-family: var(--font-mono); margin: var(--s-2) 0; }
.categories a {
  display: inline-block;
  padding: 2px 8px;
  margin-right: var(--s-1);
  background: color-mix(in oklch, var(--accent-blue) 12%, var(--surface-2));
  color: var(--accent-blue);
  border: 1px solid var(--accent-blue-dim);
  border-radius: var(--r-sm);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}
.categories a::before { content: "#"; opacity: 0.6; margin-right: 2px; }
.categories a:hover { box-shadow: var(--glow-blue); color: var(--accent-blue); }

/* ---------- Entry content ---------- */
.entry-content {
  font-size: var(--fs-md);
  line-height: var(--lh-body);
}
.entry-content img, .entry-content video {
  max-width: 100%; height: auto;
  border: 1px solid var(--stroke);
  border-radius: var(--r-sm);
}
.entry-content h1, .entry-content h2, .entry-content h3,
.entry-content h4, .entry-content h5, .entry-content h6 {
  margin: var(--s-8) 0 var(--s-3);
  font-family: var(--font-sans);
  letter-spacing: var(--tracking-normal);
  text-transform: none;
  position: relative;
  padding-left: var(--s-4);
}
.entry-content h1::before,
.entry-content h2::before,
.entry-content h3::before {
  content: "";
  position: absolute; left: 0; top: 0.3em; bottom: 0.3em;
  width: 3px;
  background: var(--accent-green);
  box-shadow: 0 0 8px var(--accent-green-glow);
}
.entry-content h4::before { content: "▸ "; color: var(--accent-green); font-family: var(--font-mono); }
.entry-content h5::before { content: "▹ "; color: var(--accent-blue); font-family: var(--font-mono); }
.entry-content h6 { font-family: var(--font-mono); color: var(--fg-muted); text-transform: uppercase; letter-spacing: var(--tracking-wide); }
.entry-content h4, .entry-content h5 { padding-left: 0; }
.entry-content h1 { font-size: var(--fs-2xl); }
.entry-content h2 { font-size: var(--fs-xl); }
.entry-content h3 { font-size: var(--fs-lg); }
.entry-content h4 { font-size: var(--fs-md); }
.entry-content h5 { font-size: var(--fs-md); color: var(--fg-muted); }

.entry-content table {
  border-collapse: collapse;
  width: 100%;
  margin-bottom: var(--s-4);
  font-size: var(--fs-sm);
}
.entry-content table th, .entry-content table td {
  border: 1px solid var(--stroke);
  padding: var(--s-2) var(--s-3);
}
.entry-content table th {
  background: var(--surface-2);
  color: var(--accent-green);
  font-family: var(--font-mono);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  font-size: var(--fs-xs);
  text-align: left;
}
.entry-content hr {
  width: 50%; margin: var(--s-10) auto;
}
.entry-content .table-of-contents {
  padding: var(--s-4) var(--s-4) var(--s-4) var(--s-6);
  margin: var(--s-6) 0;
  border: 1px solid var(--stroke);
  background: var(--surface-2);
  font-size: var(--fs-sm);
  position: relative;
}
.entry-content .table-of-contents::before {
  content: "// CONTENTS";
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--accent-green);
  letter-spacing: var(--tracking-wide);
  margin-bottom: var(--s-2);
  margin-left: -12px;
}
.entry-content .table-of-contents a { color: var(--fg-muted); }
.entry-content .table-of-contents a:hover { color: var(--accent-green); }

/* ---------- keyword links (dotted underline, amber-ish) ---------- */
a.keyword {
  color: var(--fg);
  border-bottom: 1px dotted var(--accent-blue-dim);
  text-decoration: none;
}
a.keyword:hover {
  color: var(--accent-blue);
  border-bottom-color: var(--accent-blue);
  text-shadow: 0 0 8px var(--accent-blue-glow);
}

/* ---------- Entry footer ---------- */
.entry-footer {
  margin-top: var(--s-6);
  padding-top: var(--s-4);
  border-top: 1px solid var(--stroke);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--fg-dim);
  letter-spacing: var(--tracking-wide);
}
.entry-footer-section { color: var(--fg-dim); }
.entry-footer-section a { color: var(--fg-muted); text-decoration: none; }
.entry-footer-section a:hover { color: var(--accent-green); }

.social-buttons { display: flex; gap: var(--s-2); margin-top: var(--s-3); }
.social-button-item {
  border: 1px solid var(--stroke);
  background: var(--surface-2);
  padding: 4px 6px;
  border-radius: var(--r-sm);
  transition: all var(--dur-base) var(--ease-out-snap);
}
.social-button-item:hover { border-color: var(--accent-green); box-shadow: var(--glow-green); }

/* ---------- Pager ---------- */
.pager {
  margin: var(--s-8) 0;
  display: flex;
  justify-content: space-between;
  gap: var(--s-4);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  letter-spacing: var(--tracking-wide);
}
.pager a, .pager-prev a, .pager-next a {
  display: inline-block;
  padding: var(--s-2) var(--s-4);
  border: 1px solid var(--stroke);
  background: var(--surface-1);
  color: var(--fg);
  text-decoration: none;
  border-radius: var(--r-sm);
  text-transform: uppercase;
  transition: all var(--dur-base) var(--ease-out-snap);
}
.pager a:hover { border-color: var(--accent-green); color: var(--accent-green); box-shadow: var(--glow-green); }
.pager-arrow { color: var(--accent-green); }

/* ---------- Sidebar modules ---------- */
.hatena-module {
  margin-bottom: var(--s-8);
  background: var(--surface-1);
  border: 1px solid var(--stroke);
  border-radius: var(--r-md);
  padding: var(--s-4);
  font-size: var(--fs-sm);
  box-shadow: var(--bezel-top);
}
.hatena-module-title {
  margin: calc(var(--s-4) * -1) calc(var(--s-4) * -1) var(--s-3);
  padding: var(--s-2) var(--s-4);
  border-bottom: 1px solid var(--stroke);
  background: var(--surface-2);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--accent-green);
  position: relative;
}
.hatena-module-title::before { content: "▸ "; }
.hatena-module-title a { color: inherit; text-decoration: none; }

.hatena-urllist { list-style: none; margin: 0; padding: 0; }
.hatena-urllist li {
  padding: var(--s-2) 0;
  border-bottom: 1px dashed var(--stroke);
}
.hatena-urllist li:last-child { border-bottom: 0; }
.hatena-urllist a { color: var(--fg-muted); text-decoration: none; }
.hatena-urllist a:hover { color: var(--accent-green); }

/* ---------- Profile module ---------- */
.hatena-module-profile .profile-icon {
  float: left;
  width: 48px; height: 48px;
  margin: 0 var(--s-3) var(--s-2) 0;
  border: 1px solid var(--accent-green);
  border-radius: var(--r-sm);
  box-shadow: var(--glow-green);
  filter: saturate(0.85) contrast(1.1) hue-rotate(-10deg);
}
.hatena-module-profile .id {
  display: block;
  font-family: var(--font-mono);
  color: var(--accent-green);
  font-weight: 700;
  margin-bottom: var(--s-1);
  letter-spacing: var(--tracking-wide);
}
.hatena-module-profile .id::before { content: "> "; color: var(--fg-dim); }

/* ---------- Archive module ---------- */
.archive-module-button { display: inline-block; margin-right: var(--s-1); color: var(--fg-dim); cursor: pointer; }
.archive-module-year-title {
  font-family: var(--font-mono);
  color: var(--accent-green);
  letter-spacing: var(--tracking-wide);
}
.archive-module-months { list-style: none; padding-left: var(--s-4); margin: var(--s-1) 0 0; }
.archive-module-months li { border: 0; padding: var(--s-1) 0; }

/* ---------- Comments ---------- */
.comment-box { margin: var(--s-6) 0; }
.comment-box .comment { list-style: none; margin: 0; padding: 0; }
.entry-comment {
  padding: var(--s-3) 0 var(--s-3) 60px;
  border-bottom: 1px solid var(--stroke);
  position: relative;
  font-size: var(--fs-sm);
}
.entry-comment:first-child { border-top: 1px solid var(--stroke); }
.hatena-id-icon {
  position: absolute; top: var(--s-3); left: 0;
  width: 48px !important; height: 48px !important;
  border-radius: var(--r-sm);
  border: 1px solid var(--stroke);
}
.comment-user-name { font-family: var(--font-mono); color: var(--accent-green); margin: 0 0 var(--s-1); }
.comment-metadata { color: var(--fg-dim); font-family: var(--font-mono); font-size: var(--fs-xs); }
.leave-comment-title {
  display: block;
  padding: var(--s-2) var(--s-4);
  border: 1px dashed var(--stroke);
  color: var(--fg-muted);
  text-align: center;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
}
.leave-comment-title:hover { border-color: var(--accent-green); color: var(--accent-green); }

/* ---------- About page ---------- */
.page-about .entry-content dt {
  font-family: var(--font-mono);
  color: var(--accent-green);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  border-bottom: 1px solid var(--stroke);
  padding-bottom: var(--s-1);
  margin-bottom: var(--s-2);
}
.page-about .entry-content dd { margin: 0 0 var(--s-6); }

/* ---------- Archive page ---------- */
.page-archive .archive-entry { margin-bottom: var(--s-6); }
.page-archive .entry-thumb {
  width: 96px; height: 96px;
  background-size: cover; background-position: center;
  border: 1px solid var(--stroke);
  filter: saturate(0.8) contrast(1.1);
}

/* ---------- Footer ---------- */
#footer {
  margin-top: var(--s-16);
  padding: var(--s-8) var(--s-4);
  border-top: 1px solid var(--stroke);
  text-align: center;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--fg-dim);
  letter-spacing: var(--tracking-wide);
}
#footer a { color: var(--fg-muted); text-decoration: none; }
#footer a:hover { color: var(--accent-green); }

.footer-address img { vertical-align: middle; border-radius: var(--r-sm); }
.services { margin-top: var(--s-2); }