/* ==========================================================================
   药油大全 — Vintage Apothecary / 中药房 theme
   Signature: 百子柜 (herbal-drawer cabinet) homepage grid +
              bordered 药方-label article headers.
   ========================================================================== */

:root{
  --paper:      #F4EEE1;
  --paper-2:    #ECE3D0;   /* slightly deeper paper for cards/drawers */
  --ink:        #2B2019;
  --ink-soft:   #5B4B3C;
  --amber:      #A8611F;
  --amber-dark: #7E4715;
  --teal:       #14625E;
  --vermilion:  #B23A2C;
  --gold:       #C39A3B;
  --line:       rgba(43,32,25,.22);
  --line-strong:rgba(43,32,25,.4);
  --shadow:     0 1px 2px rgba(43,32,25,.08), 0 4px 14px rgba(43,32,25,.06);
  --radius:     3px;

  --font-display: 'Noto Serif SC', 'Songti SC', 'Noto Serif', serif;
  --font-body:    'Noto Sans SC', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-en:      'Noto Serif', 'Noto Serif SC', Georgia, serif;
}

@media (prefers-color-scheme: dark){
  :root{
    --paper:      #1C1712;
    --paper-2:    #241D16;
    --ink:        #EFE6D6;
    --ink-soft:   #C9BBA4;
    --amber:      #E0995A;
    --amber-dark: #F0B27E;
    --teal:       #4FBDB5;
    --vermilion:  #E07A6A;
    --gold:       #D8B860;
    --line:       rgba(239,230,214,.2);
    --line-strong:rgba(239,230,214,.36);
    --shadow:     0 1px 2px rgba(0,0,0,.4), 0 4px 18px rgba(0,0,0,.35);
  }
}
:root[data-theme="dark"]{
  --paper:      #1C1712;
  --paper-2:    #241D16;
  --ink:        #EFE6D6;
  --ink-soft:   #C9BBA4;
  --amber:      #E0995A;
  --amber-dark: #F0B27E;
  --teal:       #4FBDB5;
  --vermilion:  #E07A6A;
  --gold:       #D8B860;
  --line:       rgba(239,230,214,.2);
  --line-strong:rgba(239,230,214,.36);
  --shadow:     0 1px 2px rgba(0,0,0,.4), 0 4px 18px rgba(0,0,0,.35);
}
:root[data-theme="light"]{
  --paper:      #F4EEE1;
  --paper-2:    #ECE3D0;
  --ink:        #2B2019;
  --ink-soft:   #5B4B3C;
  --amber:      #A8611F;
  --amber-dark: #7E4715;
  --teal:       #14625E;
  --vermilion:  #B23A2C;
  --gold:       #C39A3B;
  --line:       rgba(43,32,25,.22);
  --line-strong:rgba(43,32,25,.4);
  --shadow:     0 1px 2px rgba(43,32,25,.08), 0 4px 14px rgba(43,32,25,.06);
}

*{ box-sizing:border-box; }
html{ background:var(--paper); }
body{
  margin:0;
  background:var(--paper);
  background-image:
    radial-gradient(rgba(43,32,25,.035) 1px, transparent 1px);
  background-size:3px 3px;
  color:var(--ink);
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}

a{ color:var(--amber-dark); text-decoration-thickness:1px; text-underline-offset:2px; }
a:hover{ color:var(--vermilion); }

:focus-visible{
  outline:2px solid var(--teal);
  outline-offset:2px;
  border-radius:2px;
}

.skip-link{
  position:absolute;
  left:1rem;
  top:1rem;
  transform:translateY(-200%);
  background:var(--ink);
  color:var(--paper);
  padding:.58rem .88rem;
  border:1px solid var(--ink-soft);
  border-radius:var(--radius);
  font-size:.86rem;
  text-decoration:none;
  z-index:1200;
  transition:transform .15s ease;
}
.skip-link:focus-visible{
  outline:none;
  transform:translateY(0);
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

/* ---------- language switcher bar ---------- */
.lang-bar{
  position:sticky; top:0; z-index:999;
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem;
  background:var(--paper);
  border-bottom:1px solid var(--line-strong);
  padding:.6rem 1.1rem;
  backdrop-filter:saturate(1.3) blur(4px);
}
.lang-bar__brand{
  font-family:var(--font-display);
  font-weight:700;
  font-size:1rem;
  color:var(--amber-dark);
  text-decoration:none;
  letter-spacing:.04em;
}
.lang-bar__brand:hover{ color:var(--vermilion); }
.lang-bar__links{ display:flex; gap:.3rem; font-size:.82rem; }
.lang-bar__links a{
  color:var(--ink-soft);
  text-decoration:none;
  padding:.3rem .6rem;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:44px;
  min-height:44px;
  border-radius:var(--radius);
  border:1px solid transparent;
  transition:background .15s ease, color .15s ease, border-color .15s ease;
}
.lang-bar__links a:hover{ background:var(--paper-2); color:var(--amber-dark); }
.lang-bar__links a.active{
  color:var(--amber-dark);
  border-color:var(--line);
  background:var(--paper-2);
  font-weight:500;
}

/* ---------- footer ---------- */
.site-footer{
  border-top:1px solid var(--line);
  margin-top:3rem;
  padding:1.4rem 1.1rem 2.4rem;
  text-align:center;
}
.site-footer__credit{
  font-size:.78rem;
  color:var(--ink-soft);
  margin:0;
}
.site-footer__credit a{ color:var(--ink-soft); text-decoration:underline; }

/* ---------- main content wrapper ---------- */
.site-main{ display:block; }

/* Headings, general */
h1,h2,h3,h4{ font-family:var(--font-display); color:var(--ink); line-height:1.35; }
h2{ color:var(--amber-dark); border-bottom:1px solid var(--line); padding-bottom:.35rem; margin-top:2.4rem; }
h3{ color:var(--ink); }
blockquote{
  border-left:3px solid var(--gold);
  margin:1.2rem 0;
  padding:.4rem 1rem;
  background:var(--paper-2);
  color:var(--ink-soft);
}
hr{ border:none; border-top:1px solid var(--line); margin:2rem 0; }
code{ background:var(--paper-2); padding:.1em .35em; border-radius:2px; font-size:.9em; }

/* ==========================================================================
   HOMEPAGE — 百子柜 drawer-cabinet grid
   ========================================================================== */
body.is-home .site-main{
  max-width:1180px;
  margin:0 auto;
  padding:2.2rem 1.2rem 1rem;
}

body.is-home .site-main > h1{
  font-family:var(--font-display);
  font-weight:900;
  font-size:clamp(1.7rem, 4vw, 2.5rem);
  text-align:center;
  border:2px solid var(--ink);
  border-radius:2px;
  padding:1.1rem 1.4rem;
  margin:0 auto 1rem;
  max-width:640px;
  position:relative;
  background:
    linear-gradient(var(--paper), var(--paper)) padding-box,
    repeating-linear-gradient(45deg, var(--gold) 0 2px, transparent 2px 10px) border-box;
  border-image: repeating-linear-gradient(45deg, var(--gold) 0 2px, transparent 2px 10px) 2;
}
body.is-home .site-main > h1::before,
body.is-home .site-main > h1::after{
  content:"药";
  position:absolute;
  top:50%; transform:translateY(-50%);
  font-size:1.3rem;
  color:var(--vermilion);
  opacity:.55;
}
body.is-home .site-main > h1::before{ left:.6rem; }
body.is-home .site-main > h1::after{ content:"油"; right:.6rem; }

body.is-home .site-main > blockquote{
  text-align:center;
  max-width:560px;
  margin:0 auto 2rem;
  border-left:none;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:transparent;
  padding:.8rem 0;
  font-family:var(--font-display);
  color:var(--ink-soft);
}

body.is-home .site-main > hr{ display:none; }

body.is-home .site-main > h2{
  text-align:center;
  border-bottom:none;
  font-size:1.15rem;
  color:var(--ink-soft);
  letter-spacing:.08em;
  margin:1.6rem 0 1.1rem;
}

/* the cabinet grid */
.cabinet{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(250px, 1fr));
  gap:14px;
  align-items:start;
  margin:0 0 1.6rem;
}

.drawer{
  border:1px solid var(--line-strong);
  border-radius:var(--radius);
  background:var(--paper-2);
  box-shadow:var(--shadow);
  padding:0 .95rem .85rem;
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.drawer:hover,
.drawer:focus-within{
  transform:translateY(-3px);
  border-color:var(--amber);
  box-shadow:0 6px 20px rgba(43,32,25,.14);
}

/* the drawer "label" — its first heading, styled as an amber apothecary tag */
.drawer > h3{
  font-family:var(--font-display);
  font-size:.98rem;
  font-weight:700;
  color:var(--paper);
  background:var(--amber);
  display:inline-block;
  margin:0 0 .7rem;
  padding:.32rem .7rem;
  border-radius:0 0 4px 4px;
  transform:translateY(-1px);
}

.drawer > ul{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:.42rem;
}
.drawer > ul > li{
  font-size:.87rem;
  line-height:1.45;
  padding-left:.85rem;
  position:relative;
}
.drawer > ul > li::before{
  content:"—";
  position:absolute;
  left:0;
  color:var(--gold);
}
.drawer > ul > li > a{
  color:var(--ink);
  text-decoration:none;
  border-bottom:1px solid transparent;
}
.drawer > ul > li > a:hover{
  color:var(--vermilion);
  border-bottom-color:var(--vermilion);
}

@media (max-width:720px){
  .cabinet{ grid-template-columns:repeat(2, 1fr); gap:10px; }
}
@media (max-width:460px){
  .cabinet{ grid-template-columns:1fr; }
}

/* ==========================================================================
   ARTICLE PAGES — centered reading column + bordered 药方-label title
   ========================================================================== */
body.is-article .site-main{
  max-width:720px;
  margin:0 auto;
  padding:2.4rem 1.3rem 2rem;
  background:var(--paper);
}
body.is-article .site-main p,
body.is-article .site-main li{
  font-size:1rem;
  line-height:1.9;
}
body.is-article .site-main h1{
  font-family:var(--font-display);
  font-size:clamp(1.4rem, 3.4vw, 1.9rem);
  font-weight:700;
  text-align:center;
  border:1px solid var(--ink);
  border-radius:2px;
  padding:1.1rem 1.3rem;
  margin:0 0 1.8rem;
  position:relative;
  background:
    linear-gradient(var(--paper-2), var(--paper-2)) padding-box,
    repeating-linear-gradient(45deg, var(--gold) 0 2px, transparent 2px 9px) border-box;
  border-image: repeating-linear-gradient(45deg, var(--gold) 0 2px, transparent 2px 9px) 1;
}
body.is-article .site-main h1::after{
  content:"药方";
  display:block;
  font-size:.62rem;
  letter-spacing:.5em;
  color:var(--vermilion);
  margin-top:.55rem;
  font-family:var(--font-en);
}
body.is-article .site-main h2{ font-size:1.25rem; }
body.is-article .site-main h3{ font-size:1.05rem; color:var(--amber-dark); }
body.is-article .site-main table{
  width:100%; border-collapse:collapse; margin:1.2rem 0; font-size:.92rem;
  display:block; overflow-x:auto;
}
body.is-article .site-main th,
body.is-article .site-main td{
  border:1px solid var(--line); padding:.5rem .7rem; text-align:left;
}
body.is-article .site-main th{ background:var(--paper-2); color:var(--amber-dark); }
body.is-article .site-main img{ max-width:100%; height:auto; border-radius:var(--radius); }

/* English-language pages: swap display face for headings */
html[lang="en"] h1, html[lang="en"] h2{ font-family:var(--font-en); }

/* utility: ensure no element overflows viewport width */
img, table, pre{ max-width:100%; }
pre{ overflow-x:auto; }