/* ── 养怡斋 · Xiao Collection — site styles (Direction A · 留白) ──────────
   Built on the Campsite Watcher design system. UI chrome = DM Serif Display
   + DM Sans + desert-paper tokens. Artwork = real brush fonts. CJK = Noto
   Serif SC. */

@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600&family=Noto+Serif+SC:wght@300;400;500;600;700&family=Ma+Shan+Zheng&family=Zhi+Mang+Xing&family=Liu+Jian+Mao+Cao&family=Long+Cang&display=swap');

:root{
  --bg:#ece9e3; --card:#e0dcd4; --card-inner:#d4d0c8; --surface:#f4f1ec; --nav-bg:#f4f1ec;
  --text:#1a1a18; --text-muted:#6b6962; --text-subtle:#9c9890;
  --border:rgba(26,26,24,.10); --border-mid:rgba(26,26,24,.15);
  --green:#0e5073; --green-bg:#cde9f6; --yellow:#7a4a00; --yellow-bg:#f5e3c0;
  --red:#7c1e1e; --red-bg:#f0d9d9; --blue:#1a3566; --blue-bg:#cad8f0; --grey:#4a4845;
  --log-bg:#0f1117; --log-fg:#c9c5bc;
  --r-sm:8px; --r-md:14px; --r-lg:20px; --r-pill:100px;
  --space-1:4px; --space-2:7px; --space-3:10px; --space-4:14px; --space-5:18px; --space-6:22px; --space-7:28px; --space-8:40px;
  --serif:'DM Serif Display', Georgia, 'Times New Roman', serif;
  --sans:'DM Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --mono:"SF Mono","Fira Code", ui-monospace, monospace;
  --t-fast:.12s; --t-press:.07s;
  --cn-serif:'Noto Serif SC', serif;
  --brush-cursive:'Liu Jian Mao Cao','Zhi Mang Xing', cursive;
  --brush-running:'Zhi Mang Xing','Ma Shan Zheng', cursive;
  --brush-kai:'Ma Shan Zheng', serif;
  --seal-font:'Long Cang', serif;
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{ font-family:var(--sans); background:var(--bg); color:var(--text); line-height:1.55; -webkit-font-smoothing:antialiased; }
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
::selection{ background:var(--red); color:var(--surface); }

/* layout container */
.wrap{ max-width:1320px; margin:0 auto; padding:0 56px; }
@media (max-width:1100px){ .wrap{ padding:0 32px; } }
@media (max-width:680px){ .wrap{ padding:0 20px; } }

/* eyebrow */
.eyebrow{ font-size:10.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--text-subtle); }

/* ── nav ─────────────────────────────────────────── */
.nav{ position:sticky; top:0; z-index:40; background:var(--nav-bg); border-bottom:1px solid var(--border); }
.nav-in{ max-width:1320px; margin:0 auto; padding:18px 56px; display:flex; align-items:center; justify-content:space-between; }
.brand{ display:flex; align-items:center; gap:13px; }
.brand-name{ font-family:var(--serif); font-size:19px; letter-spacing:-.01em; line-height:1.1; white-space:nowrap; }
.brand-sub{ font-family:var(--cn-serif); font-size:10.5px; letter-spacing:.26em; color:var(--text-subtle); margin-top:3px; white-space:nowrap; }
.nav-links{ display:flex; align-items:center; gap:28px; }
.nav-links a{ font-size:14px; font-weight:500; color:var(--text); white-space:nowrap; transition:opacity var(--t-fast); }
.nav-links a:hover{ opacity:.62; }
.nav-links a.active{ color:var(--text); position:relative; }
.nav-links a.active::after{ content:''; position:absolute; left:0; right:0; bottom:-6px; height:1.5px; background:var(--red); }
.lang{ display:flex; gap:6px; align-items:center; font-size:12.5px; color:var(--text-subtle); cursor:pointer; user-select:none; background:none; border:none; font-family:inherit; }
.lang b{ color:var(--text); }
@media (max-width:1100px){ .nav-in{ padding:16px 32px; } .nav-links{ gap:16px; } .nav-links a{ font-size:13px; } }
@media (max-width:760px){ .brand-sub{ display:none; } .nav-links{ gap:12px; } }

/* ── buttons (system pills) ──────────────────────── */
.btn{ font-family:var(--sans); font-size:14px; font-weight:500; letter-spacing:-.01em; border:none; border-radius:var(--r-pill);
  padding:11px 24px; cursor:pointer; display:inline-flex; align-items:center; gap:8px; transition:opacity var(--t-fast),transform var(--t-press); }
.btn:active{ transform:scale(.97); }
.btn-p{ background:var(--text); color:var(--bg); } .btn-p:hover{ opacity:.82; }
.btn-s{ background:var(--card-inner); color:var(--text); } .btn-s:hover{ background:rgba(26,26,24,.14); }
.btn-ghost{ background:transparent; color:var(--text); box-shadow:inset 0 0 0 1.5px var(--border-mid); } .btn-ghost:hover{ background:rgba(26,26,24,.05); }
.btn.light{ background:var(--surface); color:var(--text); }
.btn-lg{ padding:14px 30px; font-size:15px; }

/* ── badges ──────────────────────────────────────── */
.badge{ display:inline-flex; align-items:center; gap:7px; font-size:12px; font-weight:500; padding:4px 11px; border-radius:var(--r-pill); white-space:nowrap; }
.badge::before{ content:''; width:6px; height:6px; border-radius:50%; background:currentColor; }
.badge-avail{ background:var(--green-bg); color:var(--green); }
.badge-sold{ background:var(--red-bg); color:var(--red); }
.badge-reserved{ background:var(--yellow-bg); color:var(--yellow); }

/* ── seal ────────────────────────────────────────── */
.seal{ display:inline-flex; align-items:center; justify-content:center; font-family:var(--seal-font);
  color:var(--surface); background:var(--red); line-height:.95; text-align:center;
  writing-mode:vertical-rl; box-shadow:inset 0 0 0 1.5px rgba(244,241,236,.5); border-radius:3px; }
.vcol{ writing-mode:vertical-rl; }

/* ── museum mat ──────────────────────────────────── */
.mat{ background:var(--surface); box-shadow:inset 0 0 0 1px var(--border); }
.mat-in{ box-shadow:inset 0 0 0 1px var(--border-mid); }

/* ── headings ────────────────────────────────────── */
.h-display{ font-family:var(--serif); font-weight:400; letter-spacing:-.025em; line-height:1.08; color:var(--text); }
.h2{ font-family:var(--serif); font-weight:400; font-size:40px; letter-spacing:-.02em; color:var(--text); }
.lead{ font-family:var(--cn-serif); font-weight:300; line-height:1.95; color:var(--text-muted); }
.cn-serif{ font-family:var(--cn-serif); }
.mono{ font-family:var(--mono); }

/* ── forms (system) ──────────────────────────────── */
.field{ display:flex; flex-direction:column; gap:8px; }
.field label{ font-size:11.5px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--text-muted); }
.field .hint{ font-size:12px; color:var(--text-subtle); line-height:1.5; }
.input, .textarea, .select{ font-family:var(--sans); font-size:14px; color:var(--text); background:var(--surface);
  border:1.5px solid var(--border-mid); border-radius:var(--r-sm); padding:11px 13px; transition:border-color var(--t-fast),box-shadow var(--t-fast); width:100%; }
.input:focus,.textarea:focus,.select:focus{ outline:none; border-color:var(--text); box-shadow:0 0 0 3px rgba(26,26,24,.07); }
.textarea{ font-family:var(--mono); font-size:12.5px; line-height:1.6; min-height:120px; resize:vertical; }

/* chips / segmented */
.chips{ display:flex; flex-wrap:wrap; gap:8px; }
.chip{ font-size:13px; font-weight:500; padding:7px 15px; border-radius:var(--r-pill); background:var(--card-inner); color:var(--text-muted); cursor:pointer; border:none; font-family:inherit; transition:all var(--t-fast); }
.chip:hover{ color:var(--text); }
.chip.on{ background:var(--text); color:var(--bg); }

/* footer */
.foot{ background:var(--nav-bg); border-top:1px solid var(--border); }
.foot-in{ max-width:1320px; margin:0 auto; padding:30px 56px; display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; }

/* card */
.card{ background:var(--card); border-radius:var(--r-lg); box-shadow:inset 0 0 0 1px var(--border); }

/* link hover */
.ulink{ border-bottom:1px solid var(--text); padding-bottom:4px; transition:opacity var(--t-fast); }
.ulink:hover{ opacity:.6; }

/* reveal: intentionally inert. Some hosts PAUSE css animations, which makes
   an opacity:0→1 animation hold at 0 forever and hide content. Content is
   always visible; .reveal/.in are kept only so markup/JS stay valid. */
.reveal{ }

/* ── responsive / touch ──────────────────────────────────────────────────
   Helper classes added to the page grids. The !important media rules override
   the inline grid-template-columns on small screens so multi-column layouts
   stack on phones/tablets without rewriting every inline style. */

/* 3-col grids (works, journal): 3 → 2 (tablet) → 1 (phone) */
@media (max-width:920px){ .xc-grid3{ grid-template-columns:repeat(2,1fr) !important; } }
@media (max-width:600px){ .xc-grid3{ grid-template-columns:1fr !important; } }

/* 4-col grids (commission steps): 4 → 2 → 1 */
@media (max-width:920px){ .xc-grid4{ grid-template-columns:repeat(2,1fr) !important; } }
@media (max-width:560px){ .xc-grid4{ grid-template-columns:1fr !important; } }

/* two-column splits (hero, artist, work detail, contact, etc.): stack on phone */
@media (max-width:760px){ .xc-split{ grid-template-columns:1fr !important; gap:32px !important; } }

/* grid children must be allowed to shrink below their content's intrinsic
   width — otherwise a wide inner table (min-width:600px below) forces the
   whole column wider than the viewport instead of scrolling inside its card.
   This is the root-cause guard for admin horizontal overflow on phones. */
.xc-admin-grid > *{ min-width:0; }
/* admin sidebar layout: stack on phone, sidebar becomes a wrapping row */
@media (max-width:760px){
  .xc-admin-grid{ grid-template-columns:1fr !important; padding-left:16px !important; padding-right:16px !important; padding-top:22px !important; }
  .xc-admin-side{ position:static !important; flex-direction:row !important; flex-wrap:wrap !important; }
  .xc-admin-head{ padding:12px 16px !important; flex-wrap:wrap; gap:10px 14px; }
}
/* wide admin tables: scroll horizontally instead of squishing (rows get a
   min-width so the fixed columns stay readable and the card scrolls) */
@media (max-width:760px){
  .xc-scroll-x{ overflow-x:auto !important; -webkit-overflow-scrolling:touch; }
  .xc-scroll-x > div{ min-width:600px; }
}
/* "swipe me" cue above scrollable tables — only shown where the table actually
   scrolls (phones). Hidden on desktop where the full table fits. */
.xc-scroll-hint{ display:none; }
@media (max-width:760px){
  .xc-scroll-hint{ display:block; font-size:12px; color:var(--text-subtle); margin:18px 2px -2px; letter-spacing:.02em; }
}

/* tighten oversized inline section padding on phones */
@media (max-width:600px){ .wrap{ padding-left:18px; padding-right:18px; } .foot-in{ padding:24px 18px; } }
/* safety net: never let a stray wide child force horizontal drag on mobile */
@media (max-width:760px){ html, body{ overflow-x:hidden; } }

/* scale down the big display type on phones (override inline font-size) */
@media (max-width:600px){
  .h-display{ font-size:clamp(34px,11vw,52px) !important; line-height:1.1 !important; }
  .h2{ font-size:30px !important; }
}

/* nav: wrap links + bigger tap targets on phones */
@media (max-width:760px){
  .nav-in{ flex-wrap:wrap; row-gap:6px; padding:12px 18px; }
  .nav-links{ flex-wrap:wrap; gap:14px; row-gap:6px; }
  .nav-links a{ padding:4px 0; }
}

/* comfortable touch targets on touch devices */
@media (hover:none){ .btn,.btn-lg{ min-height:44px; } .chip{ min-height:36px; } }