/*
  桃之若 · 自然亲切版
  灵感：温暖纸张、克制的本地应用界面、重复文字节奏，
  以及淡出时同步轻微去饱和的状态变化。
*/

:root {
  --natural-cream: #faf8f2;
  --natural-paper: #fffdf8;
  --natural-oat: #ded7ca;
  --natural-ink: #302f2b;
  --natural-muted: #746f67;
  --natural-green: #4f745d;
  --natural-green-soft: #e4eee6;
  --natural-peach: #d77f68;
  --natural-gold: #d3ad69;
  --natural-shadow: 0 1px 1px rgba(59, 49, 37, .08), 0 18px 48px rgba(59, 49, 37, .055);
}

:root[data-theme="dark"] {
  --natural-cream: #1b1d1a;
  --natural-paper: #222521;
  --natural-oat: #45483f;
  --natural-ink: #ede9df;
  --natural-muted: #b4b0a6;
  --natural-green: #92b09b;
  --natural-green-soft: #29372d;
  --natural-peach: #dc9682;
  --natural-gold: #c7a86d;
  --natural-shadow: 0 1px 1px rgba(0, 0, 0, .22), 0 18px 48px rgba(0, 0, 0, .16);
}

body.natural-room {
  color: var(--natural-ink);
  background-color: var(--natural-cream);
  background-image:
    radial-gradient(circle at 6% 7%, color-mix(in srgb, var(--natural-peach) 8%, transparent), transparent 24rem),
    radial-gradient(circle at 92% 17%, color-mix(in srgb, var(--natural-green) 7%, transparent), transparent 28rem);
}

.natural-room .site-header {
  border-bottom-color: color-mix(in srgb, var(--natural-oat) 84%, transparent);
  background: color-mix(in srgb, var(--natural-cream) 91%, transparent);
}

.natural-room .brand-mark {
  border-radius: 12px 12px 12px 4px;
  background: var(--natural-peach);
  box-shadow: 0 5px 16px color-mix(in srgb, var(--natural-peach) 25%, transparent);
  transform: rotate(-2deg);
}

.natural-room .nav a {
  border-radius: 999px;
  padding: .48rem .78rem;
  white-space: nowrap;
}

.natural-room .nav a:hover,
.natural-room .nav a:focus-visible {
  background: color-mix(in srgb, var(--natural-green-soft) 74%, transparent);
}

.presence-dot {
  width: .48rem;
  height: .48rem;
  border-radius: 50%;
  background: var(--natural-green);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--natural-green) 13%, transparent);
}

.word-ribbon {
  overflow: hidden;
  border-bottom: 1px solid color-mix(in srgb, var(--natural-oat) 75%, transparent);
  background: color-mix(in srgb, var(--natural-paper) 70%, transparent);
}

.word-ribbon__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: max-content;
  padding: .65rem max(1.2rem, calc((100vw - 76rem) / 2));
  color: var(--natural-muted);
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .12em;
  white-space: nowrap;
}

.word-ribbon i {
  margin: 0 .95rem;
  color: var(--natural-peach);
  font-style: normal;
}

.natural-room .cover {
  min-height: clamp(45rem, calc(100svh - 7rem), 55rem);
  background: var(--natural-cream);
}

.natural-room .cover-bg::after {
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--natural-cream) 94%, transparent) 0%, color-mix(in srgb, var(--natural-cream) 72%, transparent) 44%, color-mix(in srgb, var(--natural-cream) 34%, transparent) 100%),
    linear-gradient(0deg, var(--natural-cream) 0%, transparent 26%);
}

.natural-room .cover-bg img {
  opacity: .3;
  filter: saturate(.72) sepia(.08);
}

.natural-room .cover-inner {
  grid-template-columns: minmax(20rem, .78fr) minmax(34rem, 1.22fr);
  gap: clamp(2.2rem, 4.5vw, 5rem);
}

.natural-room .cover-copy {
  max-width: 34rem;
}

.natural-room .cover-eyebrow {
  display: flex;
  align-items: center;
  gap: .7rem;
  color: var(--natural-green);
  letter-spacing: .08em;
}

.natural-room .cover-title {
  margin-top: 1.1rem;
  color: var(--natural-ink);
  font-size: clamp(3.2rem, 5.55vw, 5.25rem);
  font-weight: 500;
  line-height: 1.14;
  letter-spacing: -.055em;
  text-wrap: balance;
}

.natural-room .cover-poem {
  max-width: 29rem;
  color: var(--natural-muted);
  font-size: 1rem;
  line-height: 1.9;
}

.natural-room .cover-poem span {
  display: block;
  margin-top: .25rem;
  color: var(--natural-muted);
}

.natural-room .cover-recent,
.natural-room .cover-room-note {
  border-color: color-mix(in srgb, var(--natural-oat) 88%, transparent);
}

.natural-room .cover-recent,
.natural-room .cover-recent .cr-label {
  color: var(--natural-muted);
  text-shadow: none;
}

.natural-room .cover-recent .cr-label::before {
  background: var(--natural-peach);
}

.natural-room .cover-recent a {
  color: var(--natural-ink);
  border-bottom-color: color-mix(in srgb, var(--natural-ink) 32%, transparent);
}

.natural-room .cover-recent a:hover {
  color: var(--natural-green);
  border-bottom-color: var(--natural-green);
}

.natural-room .cover-room-note span {
  color: var(--natural-green);
}

.small-presence {
  display: grid;
  grid-template-columns: 2.6rem 1fr;
  gap: .9rem;
  max-width: 29rem;
  margin-top: 1.55rem;
  padding: .95rem 1rem;
  border: 1px dashed var(--natural-oat);
  border-radius: 16px;
  background: color-mix(in srgb, var(--natural-paper) 75%, transparent);
}

.small-presence__mark {
  display: grid;
  width: 2.5rem;
  height: 2.5rem;
  place-items: center;
  border-radius: 50%;
  background: var(--natural-green-soft);
  color: var(--natural-green);
  font-family: "Noto Serif SC", serif;
  font-size: 1rem;
}

.small-presence p,
.small-presence strong,
.small-presence small {
  display: block;
  margin: 0;
}

.small-presence strong {
  font-size: .86rem;
  font-weight: 500;
}

.small-presence small {
  margin-top: .28rem;
  color: var(--natural-muted);
  font-size: .72rem;
  line-height: 1.65;
}

.natural-room .room-card {
  border-color: var(--natural-oat);
  border-radius: 26px;
  background:
    linear-gradient(color-mix(in srgb, var(--natural-oat) 16%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--natural-oat) 16%, transparent) 1px, transparent 1px),
    color-mix(in srgb, var(--natural-paper) 92%, transparent);
  background-size: 30px 30px, 30px 30px, auto;
  box-shadow: var(--natural-shadow);
}

.natural-room .room-card::before {
  right: 1.4rem;
  left: 1.4rem;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--natural-peach), var(--natural-gold) 45%, var(--natural-green));
}

.natural-room .room-kicker {
  color: var(--natural-green);
  font-family: inherit;
  font-size: .72rem;
  letter-spacing: .08em;
}

.natural-room .room-status i {
  border-radius: 50%;
  background: var(--natural-green);
}

.natural-room .room-key span,
.natural-room .pc-en {
  color: var(--natural-green);
}

.natural-room .room-key a::after {
  background: var(--natural-peach);
}

.natural-room .portal-wrap {
  max-width: 76rem;
}

.natural-room .portal-lead .label {
  color: var(--natural-muted);
  font-family: inherit;
  font-size: .76rem;
  letter-spacing: .04em;
}

.natural-room .doc-list,
.natural-room .portal-card {
  border-color: var(--natural-oat);
}

.natural-room .doc-row {
  border-radius: 14px;
  transition: transform .35s var(--ease-room), background-color .35s ease;
}

.natural-room .doc-row:hover {
  padding-right: .8rem;
  padding-left: .8rem;
  background: color-mix(in srgb, var(--natural-paper) 72%, transparent);
}

.natural-room .portal {
  gap: 1rem;
}

.natural-room .portal-card {
  border-radius: 24px;
  background: var(--natural-paper);
  box-shadow: 0 1px 1px rgba(59, 49, 37, .06);
  transition: transform .38s var(--ease-room), box-shadow .38s ease;
}

.natural-room .portal-card .pc-frame img {
  transition-property: transform, filter, opacity;
  transition-duration: 1.6s, .38s, .38s;
}

.natural-room .portal:has(.portal-card:hover) .portal-card:not(:hover) .pc-frame img {
  opacity: .62;
  filter: grayscale(.7) saturate(.62);
}

.natural-room .portal-card:hover {
  transform: translateY(-4px) rotate(-.25deg);
  box-shadow: var(--natural-shadow);
}

.natural-room .portal-card::before {
  border-color: rgba(255, 255, 255, .68);
  background: color-mix(in srgb, var(--natural-green) 74%, transparent);
}

.natural-room .closing-scene {
  margin-right: clamp(1rem, 4vw, 3rem);
  margin-left: clamp(1rem, 4vw, 3rem);
  border-radius: 32px;
}

.natural-room .site-footer {
  background: var(--natural-cream);
}

@media (max-width: 1080px) {
  .natural-room .cover-inner {
    grid-template-columns: 1fr;
    max-width: 48rem;
  }
}

@media (max-width: 720px) {
  .word-ribbon__inner {
    justify-content: flex-start;
    padding-right: 1.2rem;
    padding-left: 1.2rem;
  }

  .natural-room .header-inner {
    gap: .35rem;
  }

  .natural-room .brand {
    gap: .4rem;
  }

  .natural-room .nav {
    gap: .18rem;
  }

  .natural-room .nav a {
    padding: .32rem .36rem;
    letter-spacing: .02em;
  }

  .natural-room .theme-toggle {
    margin-left: .1rem;
  }

  .natural-room .cover-title {
    font-size: clamp(2.7rem, 12.5vw, 3.8rem);
    letter-spacing: -.045em;
  }

  .small-presence {
    grid-template-columns: 2.45rem 1fr;
  }

  .natural-room .room-card {
    border-radius: 20px;
  }

  .natural-room .doc-row:hover {
    padding-right: 0;
    padding-left: 0;
  }

  .natural-room .closing-scene {
    margin-right: .7rem;
    margin-left: .7rem;
    border-radius: 24px;
  }
}

@media (hover: none) {
  .natural-room .portal:has(.portal-card:hover) .portal-card:not(:hover) .pc-frame img {
    opacity: 1;
    filter: saturate(.88) contrast(1.01);
  }
}

@media (prefers-reduced-motion: reduce) {
  .natural-room .doc-row,
  .natural-room .portal-card,
  .natural-room .portal-card .pc-frame img {
    transition: none;
  }
}