/* ============================================================
   可可的道伽笔记 — shared foundation
   东方禅意 / 道家留白 · warm neutral (米白·原木·茶色)
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@300;400;500;600;700&family=Noto+Sans+SC:wght@300;400;500&family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400&display=swap');

:root{
  /* paper / ink */
  --paper:        #f3eee2;   /* 米白 */
  --paper-2:      #ece4d4;   /* 略深米白 */
  --paper-3:      #e3d8c3;   /* 原木浅 */
  --card:         #f8f4ea;
  --ink:          #2c2620;   /* 墨 */
  --ink-soft:     #4a4136;
  --muted:        #897c66;   /* 茶灰 */
  --muted-2:      #a89a82;
  --line:         #d3c7af;   /* hairline */
  --line-soft:    #e0d6c2;
  /* wood / tea accents (shared chroma, warm) */
  --wood:         #b89a6a;   /* 原木 */
  --tea:          #7c6644;   /* 茶色 */
  --tea-deep:     #5b4a30;
  --seal:         #9a5a44;   /* 印泥 (used very sparingly) */

  --serif:  "Noto Serif SC", "Songti SC", serif;
  --sans:   "Noto Sans SC", system-ui, sans-serif;
  --latin:  "Cormorant Garamond", Georgia, serif;
  --mono:   ui-monospace, "SF Mono", Menlo, monospace;

  --maxw: 1180px;
}

*{ box-sizing:border-box; }
html{ -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:300;
  line-height:1.85;
  letter-spacing:.01em;
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }

/* ---- latin display helper ---- */
.latin{ font-family:var(--latin); font-weight:500; letter-spacing:.06em; }
.eyebrow{
  font-family:var(--mono);
  font-size:11px; letter-spacing:.34em; text-transform:uppercase;
  color:var(--muted);
}
.cn-vertical{ writing-mode:vertical-rl; text-orientation:upright; }

/* ---- image placeholder (striped) used where no real asset ---- */
.ph{
  position:relative;
  background-color:var(--paper-2);
  background-image:repeating-linear-gradient(
     -45deg, transparent 0 11px,
     rgba(124,102,68,.06) 11px 12px);
  border:1px solid var(--line);
  display:flex; align-items:flex-end;
  overflow:hidden;
}
.ph::after{
  content:attr(data-label);
  font-family:var(--mono); font-size:11px; letter-spacing:.18em;
  color:var(--muted); padding:12px 14px; text-transform:uppercase;
}

/* ---- image-slot baseline look ---- */
image-slot{
  background:var(--card);
}
.qr image-slot,
image-slot.portrait,
image-slot.framed{
  border:1px solid var(--line);
  box-shadow:0 1px 0 rgba(124,102,68,.04), 0 14px 30px -22px rgba(43,38,32,.4);
}

/* ---- enso / hairline circle (simple) ---- */
.enso{
  border-radius:50%;
  border:1px solid var(--wood);
}

/* ---- QR block (shared) ---- */
.qr-grid{ display:flex; gap:34px; flex-wrap:wrap; }
.qr{
  display:flex; flex-direction:column; align-items:center; gap:14px;
  width:148px;
}
.qr image-slot{ width:148px; height:148px; }
.qr .qr-name{ font-family:var(--serif); font-weight:500; font-size:15px; color:var(--ink); }
.qr .qr-sub{ font-family:var(--mono); font-size:10px; letter-spacing:.2em; color:var(--muted); text-transform:uppercase; margin-top:-8px; }

/* ---- generic pill link ---- */
.pill{
  display:inline-flex; align-items:center; gap:10px;
  padding:13px 26px; border:1px solid var(--ink);
  border-radius:999px; font-size:13px; letter-spacing:.16em;
  color:var(--ink); transition:.45s cubic-bezier(.2,.7,.2,1);
}
.pill:hover{ background:var(--ink); color:var(--paper); gap:16px; }
.pill .latin{ letter-spacing:.1em; }

/* fade-in on scroll */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity 1.1s ease, transform 1.1s cubic-bezier(.2,.7,.2,1); }
.reveal.in{ opacity:1; transform:none; }

::selection{ background:rgba(124,102,68,.22); }