/* ========== 山海 · Dalian mountain-sea layer ========== */
/* Extends base styles with coastal motifs. Loaded after styles.css. */

:root {
  --sea: #3a8580;
  --sea-deep: #1f5e58;
  --sea-foam: #b8e0d4;
  --sand: #e6cfa0;
  --rock: #4a4944;
}

[data-theme="forest"] { --sea: #3a8580; --sea-deep: #1f5e58; --sea-foam: #b8e0d4; }
[data-theme="mono"] { --sea: #3a3e40; --sea-deep: #1f2223; --sea-foam: #c2bdb4; }
[data-dark="true"] { --sea: #4a8580; --sea-deep: #2e6058; --sea-foam: #6a9a90; --sand: #8a7c5a; }

/* Wave rule — horizontal decorative divider */
.wave-rule {
  height: 14px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 12' preserveAspectRatio='none'><path d='M0 8 Q 10 2 20 8 T 40 8 T 60 8 T 80 8' fill='none' stroke='%23b8653a' stroke-width='.9' stroke-linecap='round'/></svg>");
  background-repeat: repeat-x;
  background-size: 80px 12px;
  opacity: .55;
  border: 0;
  margin: 0;
}
[data-theme="forest"] .wave-rule { filter: hue-rotate(-10deg); }

/* Sea pattern fill (used in cards / hero backdrop) */
.sea-pattern {
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 20'><path d='M0 14 Q 5 9 10 14 T 20 14 T 30 14 T 40 14' fill='none' stroke='%23244a55' stroke-width='.6' opacity='.5'/><path d='M0 6 Q 5 1 10 6 T 20 6 T 30 6 T 40 6' fill='none' stroke='%23244a55' stroke-width='.4' opacity='.28'/></svg>");
  background-size: 40px 20px;
}

/* Landmark chip */
.landmark {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 6px 10px;
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  letter-spacing: .12em;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 0;
}
.landmark::before {
  content: "";
  width: 7px; height: 7px;
  border: 1px solid var(--accent);
  transform: rotate(45deg);
  background: var(--paper);
}
.landmark.sea::before { background: var(--sea); border-color: var(--sea-deep); }
.landmark.mount::before { background: var(--accent); border-color: var(--accent-2); }

/* 山海 strip — horizontal ink-drawn skyline */
.shanhai-strip {
  position: relative;
  height: 160px;
  background: linear-gradient(180deg, var(--paper) 0%, var(--paper-2) 100%);
  overflow: hidden;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.shanhai-strip svg { position: absolute; inset: 0; width: 100%; height: 100%; }

/* Sea-fog overlay over images */
.hero-art.with-sea::before {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, transparent 0%, transparent 55%, rgba(120,150,155,.35) 75%, rgba(80,110,120,.55) 100%),
    repeating-linear-gradient(0deg, transparent 0 20px, rgba(255,255,255,.04) 20px 21px);
  pointer-events: none;
}

/* Compass / coords plate */
.coord-plate {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 12px;
  border: 1px solid var(--rule);
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  letter-spacing: .12em;
  color: var(--ink-soft);
  background: var(--paper);
}
.coord-plate .n { color: var(--accent); font-weight: 600; }

/* Seal — red accent stamp */
.seal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  background: var(--accent);
  color: var(--paper);
  font-family: "Noto Serif SC", serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .1em;
  transform: rotate(-4deg);
  writing-mode: vertical-rl;
  text-orientation: upright;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.28);
}

/* Section head ornament */
.kicker-shanhai::before {
  content: "";
  display: inline-block;
  width: 36px; height: 6px;
  margin-right: 14px;
  vertical-align: middle;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 6'><path d='M0 3 Q 4.5 0 9 3 T 18 3 T 27 3 T 36 3' fill='none' stroke='%23b8653a' stroke-width='1'/></svg>");
  background-repeat: no-repeat;
  background-size: contain;
}

/* Small seabird mark */
.bird-mark {
  display: inline-block;
  width: 18px; height: 10px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 10'><path d='M1 8 Q 4 3 7 6 Q 9 4 11 6 Q 14 3 17 8' fill='none' stroke='%231c1f1a' stroke-width='.9' stroke-linecap='round'/></svg>");
  background-size: contain;
  background-repeat: no-repeat;
  opacity: .6;
}
[data-dark="true"] .bird-mark { filter: invert(1); opacity: .7; }

/* Hero backdrop — 山海 layered silhouette */
.hero-backdrop {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 220px;
  pointer-events: none;
  opacity: .38;
  z-index: 0;
}
.hero { position: relative; overflow: hidden; }
.hero > * { position: relative; z-index: 1; }