/* ============================================================
   AAP — "Hands" concept theme (shared)
   Warm paper-gray monochrome + editorial serif display.
   Overrides the blue token system. Link AFTER tokens.css + components.css.
   ============================================================ */
:root{
  --ink-900:#1B1813; --ink-700:#332E27; --ink-500:#5B544A; --ink-400:#7C7568;
  --paper-0:#FAF6EE; --paper-50:#F1EBDF; --paper-100:#E6DDCC; --paper-200:#D6CAB4;
  --slate-400:#8E8676; --slate-300:#B3AB9A;
  --action-500:#2A251E; --action-600:#000000; --action-100:rgba(42,37,30,.07);
  --accent:#1F1B15; --accent-600:#000; --accent-100:rgba(31,27,21,.08);
  --font-latin:"Hanken Grotesk", system-ui, -apple-system, sans-serif;
  --font-display:"Playfair Display","Noto Serif TC", Georgia, serif;
  --font-cjk:"Noto Sans TC","PingFang TC","Microsoft JhengHei", sans-serif;
  --font-cjk-serif:"Noto Serif TC","Songti TC", serif;
  --cream:#EAE3D5; --cream-deep:#E2DACB;
}
body{ font-family:var(--font-cjk); background:var(--cream); color:var(--ink-500); }
.latin,.num{ font-family:var(--font-latin); }
h1,h2{ font-family:var(--font-display); font-weight:800; letter-spacing:-.018em; }
h3{ font-family:var(--font-display); font-weight:700; letter-spacing:-.01em; }
.eyebrow{ color:var(--action-500); font-weight:700; }
.eyebrow::before{ background:currentColor; width:30px; }
.bg-paper50{ background:var(--paper-50); }
.imgslot img.ph{ filter:grayscale(1) brightness(1.04) contrast(.96) sepia(.16); }

/* dark sections → warm bone accents instead of light-blue */
.bg-ink, .cta-band, .site-footer{ --action-500:#D9CFBC; --action-600:#F0E9DB; --action-100:rgba(217,207,188,.16); }

/* primary buttons on dark → bone-on-charcoal */
.on-charcoal .btn-primary, .cta-band .btn-primary{ background:#F4EEE1; color:var(--ink-900); border-color:#F4EEE1; }
.on-charcoal .btn-primary:hover, .cta-band .btn-primary:hover{ background:#fff; border-color:#fff; }

/* section eyebrow index (latin caps) */
.idx{ font-family:var(--font-latin); font-size:13px; font-weight:700; letter-spacing:.18em; color:var(--slate-400); }

/* CTA band */
.cta-band{ background:var(--ink-900); color:#fff; }
.cta-band h2{ color:#fff; font-size:clamp(2rem,1.3rem+2.4vw,3rem); }

/* shared page hero (sub-pages) */
.page-hero{ position:relative; overflow:hidden; background:var(--cream); color:var(--ink-900); padding-top:150px; padding-bottom:clamp(48px,6vw,80px); }
.page-hero .hands-bg{ position:absolute; inset:0; z-index:0; background:url('assets/photos/hero-hands.png') center/cover no-repeat; opacity:.05; mix-blend-mode:multiply; }
.page-hero .wrap{ position:relative; z-index:2; }
.page-hero h1{ font-family:var(--font-display); font-weight:900; color:var(--ink-900); font-size:clamp(2.3rem,1.5rem+3vw,3.9rem); line-height:1.05; letter-spacing:-.015em; }
.page-hero .lede{ color:var(--ink-500); }

/* simple self-reveal helper for above-the-fold (doesn't depend on observer) */
.selfreveal{ opacity:0; transform:translateY(16px); animation:selfReveal .8s var(--ease) .1s both; }
@keyframes selfReveal{ to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce){ .selfreveal{ animation:none; opacity:1; transform:none; } }