/*
 * Sirkku Igloo · Natural Cabin + Japanese bibliophile edition
 * Warm paper, pale wood, moss, muted ink blue and a quiet bookish atmosphere.
 */

:root,
:root[data-theme="light"] {
  --background: #F3EEE2;
  --card: #FAF6ED;
  --block: rgba(99, 112, 89, 0.075);
  --block-border: rgba(111, 128, 104, 0.15);
  --text: #3E403C;
  --text-p1: rgba(62, 64, 60, 0.86);
  --text-p2: rgba(62, 64, 60, 0.72);
  --text-p3: rgba(62, 64, 60, 0.55);
  --text-p4: rgba(62, 64, 60, 0.42);
  --bg-a20: rgba(250, 246, 237, 0.34);
  --bg-a50: rgba(250, 246, 237, 0.64);
  --bg-a60: rgba(250, 246, 237, 0.74);
  --bg-a75: rgba(250, 246, 237, 0.86);
  --bg-a100: #FAF6ED;
  --cabin-moss: #6F8068;
  --cabin-moss-dark: #556251;
  --cabin-wood: #A48668;
  --cabin-wood-dark: #7C6753;
  --cabin-linen: #E7DDCC;
  --cabin-paper: #FAF6ED;
  --cabin-forest-wash: #E4E9DE;
  --cabin-ink: #6E7786;
  --cabin-ink-soft: #929AA6;
  --cabin-seal: #9A6C58;
}

:root[data-theme="dark"] {
  --background: #1D201A;
  --card: #28291F;
  --block: rgba(223, 215, 195, 0.07);
  --block-border: rgba(202, 185, 153, 0.13);
  --text: #E7E0D2;
  --text-p1: rgba(231, 224, 210, 0.86);
  --text-p2: rgba(231, 224, 210, 0.72);
  --text-p3: rgba(231, 224, 210, 0.55);
  --text-p4: rgba(231, 224, 210, 0.42);
  --cabin-moss: #9AAA90;
  --cabin-moss-dark: #BBC6B3;
  --cabin-wood: #B99A79;
  --cabin-wood-dark: #D1B28F;
  --cabin-linen: #413B30;
  --cabin-paper: #28291F;
  --cabin-forest-wash: #30362C;
  --cabin-ink: #A8B0C0;
  --cabin-ink-soft: #7F8897;
  --cabin-seal: #C08F78;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --background: #1D201A;
    --card: #28291F;
    --block: rgba(223, 215, 195, 0.07);
    --block-border: rgba(202, 185, 153, 0.13);
  }
}

body {
  letter-spacing: 0.004em;
  background-color: var(--background);
  background-image:
    radial-gradient(circle at 18% 8%, rgba(111, 128, 104, 0.055), transparent 26rem),
    radial-gradient(circle at 84% 18%, rgba(164, 134, 104, 0.05), transparent 24rem),
    linear-gradient(transparent 0%, rgba(124, 103, 83, 0.014) 100%),
    repeating-linear-gradient(0deg, rgba(95, 80, 61, 0.009) 0, rgba(95, 80, 61, 0.009) 1px, transparent 1px, transparent 4px),
    repeating-linear-gradient(90deg, rgba(110, 119, 134, 0.006) 0, rgba(110, 119, 134, 0.006) 1px, transparent 1px, transparent 6px);
  background-attachment: fixed;
}

.header .logo-wrap .title,
.post-list .post-card .post-title,
article.md-text h1,
article.md-text h2,
article.md-text h3,
.md-text.content h1,
.md-text.content h2,
.md-text.content h3 {
  font-family: "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", "Noto Serif CJK SC", "Songti SC", "STSong", Georgia, serif;
}

.header .logo-wrap .title {
  letter-spacing: 0.04em;
  color: var(--cabin-moss-dark);
}

.header .logo-wrap .subtitle {
  letter-spacing: 0.08em;
  color: var(--text-p2);
}

.post-list .post-card-wrap,
.widget-wrapper,
.l_left .widget-wrapper,
.l_right .widget-wrapper {
  filter: none;
}

.post-list .post-card-wrap {
  box-shadow:
    0 10px 30px rgba(74, 63, 49, 0.055),
    0 2px 7px rgba(74, 63, 49, 0.035);
}

.post-list .post-card {
  border: 1px solid rgba(133, 111, 83, 0.12);
  background-image:
    linear-gradient(155deg, rgba(255, 255, 255, 0.12), rgba(130, 112, 85, 0.012)),
    linear-gradient(180deg, rgba(110, 119, 134, 0.02), transparent 35%);
}

.post-list .post-card:hover {
  transform: translateY(-1px);
}

.post-list .post-card:hover .post-title::after {
  height: 6px;
  opacity: 0.22;
  background: linear-gradient(90deg, var(--cabin-moss), var(--cabin-ink));
}

.widget-wrapper .widget-header,
.widget-wrapper .widget-title {
  letter-spacing: 0.05em;
}

.widget-wrapper.markdown .widget-body {
  position: relative;
}

.widget-wrapper.markdown .widget-body::before {
  content: "";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.8rem;
  height: 1.8rem;
  margin: 0.1rem 0 0.9rem;
  color: var(--cabin-wood-dark);
  background: rgba(164, 134, 104, 0.08);
  border: 1px solid rgba(164, 134, 104, 0.14);
  border-radius: 999px;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
  font-size: 0.88rem;
}

.widget-wrapper.markdown .widget-body p {
  line-height: 1.76;
}

.nav-area .nav-item,
.menubar .nav-item,
.menubar .menu-item {
  transition: background-color .2s ease, color .2s ease, transform .2s ease;
}

.nav-area .nav-item:hover,
.menubar .nav-item:hover,
.menubar .menu-item:hover {
  transform: translateY(-1px);
}

.menubar .nav-item.active,
.menubar .menu-item.active {
  box-shadow: inset 0 -2px 0 rgba(110, 119, 134, 0.22);
}

.md-text.content {
  line-height: 1.88;
}

.md-text.content > p,
.md-text.content > ul,
.md-text.content > ol {
  max-width: 45rem;
}

.md-text.content h1,
.md-text.content h2,
.md-text.content h3 {
  letter-spacing: 0.015em;
  color: var(--text);
}

.md-text.content h1 {
  margin-bottom: 1.1em;
}

.md-text.content h2 {
  margin-top: 2.65em;
  padding-bottom: 0.38em;
  border-bottom: 1px solid rgba(111, 128, 104, 0.14);
  position: relative;
}

.md-text.content h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 3.2rem;
  height: 1px;
  background: linear-gradient(90deg, var(--cabin-wood), var(--cabin-ink));
}

.md-text.content h3::before {
  content: "◆";
  display: inline-block;
  margin-right: 0.46rem;
  color: var(--cabin-wood);
  font-size: 0.78em;
  vertical-align: 0.12em;
  opacity: 0.84;
}

.md-text.content p code,
.md-text.content li code,
.md-text.content td code {
  border: 1px solid rgba(110, 119, 134, 0.12);
  background: rgba(110, 119, 134, 0.055);
}

.md-text.content blockquote {
  border-left: 3px solid var(--cabin-moss);
  background:
    linear-gradient(90deg, rgba(111, 128, 104, 0.085), rgba(164, 134, 104, 0.025)),
    linear-gradient(180deg, rgba(110, 119, 134, 0.02), transparent 90%);
  border-radius: 0 11px 11px 0;
  box-shadow: inset 0 0 0 1px rgba(111, 128, 104, 0.045);
}

.md-text.content a:not(.tag-plugin):not(.button) {
  text-decoration-thickness: 0.07em;
  text-underline-offset: 0.19em;
  text-decoration-color: rgba(110, 119, 134, 0.42);
}

.md-text.content strong {
  color: var(--cabin-moss-dark);
}

.md-text.content em {
  color: var(--cabin-wood-dark);
}

.md-text.content table {
  font-size: 0.94em;
  border-color: rgba(133, 111, 83, 0.12);
}

.md-text.content th {
  font-weight: 650;
  background: linear-gradient(180deg, rgba(111, 128, 104, 0.065), rgba(110, 119, 134, 0.03));
}

.md-text.content tr:nth-child(even) td {
  background: rgba(164, 134, 104, 0.018);
}

a.tag-plugin.tag,
.tag-list a,
.post-meta a {
  border-color: rgba(133, 111, 83, 0.15);
}

.tag-list a:hover,
.post-meta a:hover {
  color: var(--cabin-ink);
}

.md-text.content pre,
.md-text.content figure.highlight {
  border: 1px solid rgba(133, 111, 83, 0.12);
  box-shadow: 0 7px 18px rgba(74, 63, 49, 0.035);
}

.toc-wrapper .toc .active,
.l_right .toc-wrapper .toc .active {
  color: var(--cabin-ink);
}

.tcf-layout {
  display: flex;
  gap: 2rem;
  margin: 2rem 0;
  align-items: flex-start;
}

.tcf-left {
  flex: 65;
  min-width: 0;
}

.tcf-right {
  flex: 35;
  min-width: 14rem;
  background:
    linear-gradient(145deg, var(--block), rgba(164, 134, 104, 0.035)),
    linear-gradient(180deg, rgba(110, 119, 134, 0.02), transparent 95%);
  padding: 1rem 1.1rem;
  border: 1px solid var(--block-border);
  border-radius: 12px;
  box-shadow: 0 7px 18px rgba(74, 63, 49, 0.035);
}

footer,
.footer {
  color: var(--text-p2);
}

.footer a {
  text-decoration-color: rgba(164, 134, 104, 0.32);
}

::selection {
  background: rgba(164, 134, 104, 0.24);
}

@media (max-width: 768px) {
  body {
    background-image:
      radial-gradient(circle at 15% 5%, rgba(111, 128, 104, 0.05), transparent 17rem),
      repeating-linear-gradient(0deg, rgba(95, 80, 61, 0.01) 0, rgba(95, 80, 61, 0.01) 1px, transparent 1px, transparent 4px);
  }

  .tcf-layout {
    flex-direction: column;
    gap: 1.25rem;
  }

  .tcf-right {
    min-width: 0;
    width: 100%;
    font-size: 1em;
    opacity: 1;
    box-sizing: border-box;
  }
}