/* Obsidian Workshop Classroom — v4 考古地層視覺
   2026-05-22 注入 stratigraphy 視覺系統
   隱喻：學科觀察者的桌面 / 地質剖面圖
   每段內容 = 一層沉積，新疊上去舊不會消失 */

@import url("https://fonts.googleapis.com/css2?family=Spectral:ital,wght@0,400;0,500;0,600;0,700;0,800;1,500&family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&family=Noto+Serif+TC:wght@400;500;700&display=swap");

:root {
  --motto-front: '先丟進來，再談分類';
  --motto-back: '沒被翻出來，等於沒寫過';

  --shale: #1F1B16;
  --shale-deep: #14110D;
  --rust: #B25D2E;
  --rust-deep: #8C4520;
  --clay: #94897A;
  --sand: #D9C896;
  --bone: #EDE3D0;
  --line: rgba(217, 200, 150, 0.18);
  --line-strong: rgba(217, 200, 150, 0.35);
}

* { border-color: var(--line); }

html { background: var(--shale); }

body {
  background: var(--shale);
  color: var(--bone);
  font-family: 'IBM Plex Sans', 'Noto Serif TC', sans-serif;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.6 0 0 0 0 0.55 0 0 0 0 0.4 0 0 0 0.18 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-attachment: fixed;
}

.display { font-family: 'Spectral', 'Noto Serif TC', serif; }
.mono { font-family: 'IBM Plex Mono', monospace; }

/* ============ Stratum 沉積層帶 ============ */
.stratum {
  position: relative;
  padding: 56px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.stratum::before {
  content: ''; position: absolute;
  inset: 0;
  pointer-events: none; z-index: 0;
}
.stratum-rust::before {
  background: linear-gradient(180deg, rgba(178, 93, 46, 0.20) 0%, rgba(178, 93, 46, 0.04) 100%);
}
.stratum-clay::before {
  background: linear-gradient(180deg, rgba(148, 137, 122, 0.16) 0%, rgba(148, 137, 122, 0.04) 100%);
}
.stratum-sand::before {
  background: linear-gradient(180deg, rgba(217, 200, 150, 0.14) 0%, rgba(217, 200, 150, 0.04) 100%);
}
.stratum-bone::before {
  background: linear-gradient(180deg, rgba(237, 227, 208, 0.10) 0%, rgba(237, 227, 208, 0.02) 100%);
}
.stratum-shale::before {
  background: linear-gradient(180deg, rgba(20, 17, 13, 0.45) 0%, rgba(20, 17, 13, 0.18) 100%);
}
.stratum > * { position: relative; z-index: 1; }

/* ============ 左側深度刻度 ============ */
.depth-marker {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 56px;
  border-right: 1px solid var(--line);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  color: var(--clay);
  padding-top: 18px;
  text-align: center;
  letter-spacing: 0.1em;
}
.depth-marker .label {
  margin-top: 4px;
  font-size: 9px;
  opacity: 0.75;
}

/* ============ 地層標籤 ============ */
.stratum-tag {
  display: inline-block;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 4px 12px;
  border: 1px solid currentColor;
}
.tag-rust { color: var(--rust); }
.tag-clay { color: var(--clay); }
.tag-sand { color: var(--sand); }
.tag-bone { color: var(--bone); }

/* ============ 化石符號 ============ */
.fossil-mark {
  display: inline-block;
  font-size: 0.85em;
  margin: 0 6px;
  color: var(--sand);
  opacity: 0.7;
  vertical-align: 0.05em;
}

/* ============ 按鈕 ============ */
.btn-primary {
  background: var(--rust);
  color: var(--bone) !important;
  border: none !important;
  padding: 14px 32px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: center;
  display: inline-block;
}
.btn-primary:hover {
  background: var(--rust-deep);
  box-shadow: 0 4px 0 var(--shale-deep);
  transform: translateY(-2px);
}
.btn-primary:active { transform: translateY(0); box-shadow: 0 2px 0 var(--shale-deep); }
.btn-primary:focus-visible { outline: 2px solid var(--sand); outline-offset: 4px; }

.btn-secondary {
  background: transparent;
  color: var(--sand) !important;
  border: 1px solid var(--clay) !important;
  padding: 10px 22px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-block;
  text-align: center;
}
.btn-secondary:hover {
  border-color: var(--sand) !important;
  background: rgba(217, 200, 150, 0.06);
}

/* ============ Input ============ */
input[type="text"] {
  background: transparent;
  border: 1px solid var(--clay);
  border-radius: 0;
  padding: 14px 16px;
  font-family: 'Spectral', serif;
  font-size: 18px;
  color: var(--bone);
  width: 100%;
}
input[type="text"]:focus {
  outline: none;
  border-color: var(--sand);
  background: rgba(217, 200, 150, 0.04);
}
input[type="text"]::placeholder { color: rgba(237, 227, 208, 0.35); }

/* ============ 連結 ============ */
a {
  color: var(--sand);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
  transition: border-color 0.2s ease, color 0.2s ease;
}
a:hover {
  border-bottom-color: var(--sand);
  color: var(--bone);
}
a.no-underline, .nav-link, nav a {
  border-bottom: none;
}
nav a:hover { color: var(--sand); }

/* ============ Code / Pre ============ */
code {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.92em;
  background: rgba(217, 200, 150, 0.08);
  padding: 2px 6px;
  color: var(--sand);
}

.prompt-block {
  white-space: pre-wrap;
  word-break: break-word;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.92rem;
  line-height: 1.65;
  background: rgba(20, 17, 13, 0.45);
  border: 1px solid var(--line);
  color: var(--bone);
  padding: 18px 20px;
}

/* ============ Blockquote ============ */
blockquote {
  border-left: 2px solid var(--rust);
  padding-left: 24px;
  font-family: 'Spectral', serif;
  color: var(--bone);
}

/* ============ Section 內邊框卡片 (深底適配) ============ */
.card-inset {
  background: rgba(20, 17, 13, 0.35);
  border: 1px solid var(--line);
  padding: 20px;
}

/* ============ Skip link ============ */
.skip-link:focus { outline: 2px solid var(--sand); }

/* ============ 表單 label ============ */
form label > span {
  color: var(--clay);
}

/* ============ Heading 預設字體 ============ */
h1, h2, h3 {
  font-family: 'Spectral', 'Noto Serif TC', serif;
  color: var(--bone);
}
h1 strong, h2 strong, h3 strong { color: var(--rust); }

/* ============ ol/ul 列表 marker 色 ============ */
ol > li::marker, ul > li::marker { color: var(--rust); }

/* ============ 響應式 ============ */
@media (max-width: 640px) {
  .stratum { padding: 40px 0; }
  .depth-marker { width: 44px; font-size: 9px; padding-top: 14px; }
}

/* ============ scroll-snap 一屏一焦點（全頁面）============ */
/* 焦點 dim 是「降濃度」功能，永遠生效；只有漸變/位移動畫才尊重 reduced-motion */
html { scroll-snap-type: y proximity; }
.stratum { scroll-snap-align: start; }
.stratum.is-dim { opacity: .5; }

@media (prefers-reduced-motion: no-preference) {
  .stratum { transition: opacity .5s ease, transform .5s ease; }
  .stratum.is-focus { transform: translateY(-3px); }
}