:root {
  --paper: #F5F1E8;
  --paper-2: #EFEADE;
  --ink: #1A1A1A;
  --ink-soft: #4A4640;
  --gold: #B8932E;
  --gold-soft: #D4A93A;
  --rule: #C9C2B0;
}

* { -webkit-font-smoothing: antialiased; }

html, body { background: var(--paper); color: var(--ink); }

body {
  font-family: "Fraunces", "Noto Serif TC", Georgia, serif;
  font-weight: 400;
  letter-spacing: 0.005em;
}

.font-hand { font-family: "Caveat", "Klee One", cursive; font-weight: 700; }
.font-serif { font-family: "Fraunces", "Noto Serif TC", serif; }

.gold { color: var(--gold); }
.ink-soft { color: var(--ink-soft); }

.hairline { height: 1px; background: var(--ink); opacity: .85; }
.hairline-gold { height: 1px; background: var(--gold); }
.dotted-rule {
  height: 1px;
  background-image: linear-gradient(to right, var(--ink) 33%, transparent 0%);
  background-size: 6px 1px;
  background-repeat: repeat-x;
}

.eyebrow {
  font-family: "Fraunces", serif;
  font-size: 12px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold);
}

.kicker-hand { color: var(--gold); font-family: "Caveat", cursive; font-weight: 700; font-size: 22px; }

.art-frame {
  background: #fff;
  padding: 14px;
  box-shadow:
    0 1px 0 rgba(0,0,0,.04),
    0 20px 40px -20px rgba(20,20,20,.18),
    0 4px 12px -4px rgba(20,20,20,.08);
  transition: transform .5s cubic-bezier(.2,.7,.3,1), box-shadow .5s;
}
.art-frame:hover {
  transform: translateY(-4px);
  box-shadow:
    0 1px 0 rgba(0,0,0,.04),
    0 32px 60px -24px rgba(20,20,20,.28),
    0 8px 20px -6px rgba(20,20,20,.12);
}

.art-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--paper-2);
}

.work-meta { color: var(--ink-soft); font-size: 13px; letter-spacing: 0.05em; }

.quote-pull {
  font-family: "Noto Serif TC", "Fraunces", serif;
  font-size: 22px;
  line-height: 2;
  color: #1f1c18;
}
.quote-pull::before { content: "「"; color: var(--gold); margin-right: 2px; }
.quote-pull::after { content: "」"; color: var(--gold); margin-left: 2px; }

.btn-ghost {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 22px;
  border: 1px solid var(--ink);
  color: var(--ink);
  font-family: "Fraunces", serif;
  font-size: 14px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background .25s, color .25s;
}
.btn-ghost:hover { background: var(--ink); color: var(--paper); }

.btn-gold {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 26px;
  background: var(--ink);
  color: var(--paper);
  font-family: "Fraunces", serif;
  font-size: 14px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid var(--ink);
}
.btn-gold:hover { background: var(--gold); border-color: var(--gold); }

.swatch {
  display: inline-block; width: 14px; height: 14px; border-radius: 999px;
  border: 1px solid rgba(0,0,0,.15);
  vertical-align: middle; margin-right: 6px;
}

.no-1 { font-feature-settings: "lnum", "tnum"; }