/* ============================================================
   CHENG MING INTERNAL MARTIAL ARTS — design tokens
   Ink-wash palette: dark ground, rice-paper cards, seal-red stamp
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@400;500;600;700&family=Work+Sans:wght@300;400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  --ink:        #1a1713;   /* ground / primary dark bg */
  --ink-2:      #221d17;   /* slightly lifted panel on ink */
  --paper:      #f2ead9;   /* rice paper */
  --paper-dim:  #e7dcc4;   /* paper shadowed */
  --seal:       #a6371e;   /* cinnabar seal red — accent, used sparingly */
  --seal-dim:   #7e2a17;
  --brass:      #ad8730;   /* aged brass / gold — lineage highlight */
  --jade:       #4c5e46;   /* muted jade — secondary accent */
  --stone:      #8a8172;   /* stone grey — quiet text on paper */
  --stone-dark: #46433c;

  --display: 'Noto Serif TC', 'Songti SC', serif;
  --body:    'Work Sans', -apple-system, sans-serif;
  --mono:    'IBM Plex Mono', monospace;

  --max: 1180px;
  --edge: clamp(1.25rem, 5vw, 4rem);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; }
}

body{
  margin:0;
  background:var(--ink);
  color:var(--paper);
  font-family:var(--body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block; }
a{ color:inherit; }

h1,h2,h3,h4{
  font-family:var(--display);
  font-weight:600;
  line-height:1.15;
  margin:0 0 0.5em;
  letter-spacing:0.01em;
}

.eyebrow{
  font-family:var(--mono);
  font-size:0.72rem;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--seal);
  display:flex;
  align-items:center;
  gap:0.6em;
}
.eyebrow::before{
  content:"";
  width:1.6em; height:1px;
  background:var(--seal);
  display:inline-block;
}

.wrap{ max-width:var(--max); margin:0 auto; padding:0 var(--edge); }

/* ---------- brush divider ---------- */
.brush-divider{ width:100%; height:22px; margin:0; opacity:0.5; }
.brush-divider path{ stroke:var(--brass); stroke-width:2; fill:none; }
.on-paper .brush-divider path{ stroke:var(--stone); }

/* ---------- header / nav ---------- */
header.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(26,23,19,0.92);
  backdrop-filter:blur(6px);
  border-bottom:1px solid rgba(173,135,48,0.25);
}
.nav-row{
  display:flex; align-items:center; justify-content:space-between;
  padding:0.85rem var(--edge);
  max-width:var(--max); margin:0 auto;
}
.brand{ display:flex; align-items:center; gap:0.7rem; text-decoration:none; }
.brand img{ height:40px; width:auto; filter:invert(1) brightness(1.6); }
.brand-text{ font-family:var(--display); font-size:1.05rem; letter-spacing:0.03em; color:var(--paper); }
.brand-text small{ display:block; font-family:var(--mono); font-size:0.6rem; letter-spacing:0.18em; color:var(--stone); text-transform:uppercase; margin-top:2px; }

nav.main-nav{ display:flex; gap:1.7rem; }
nav.main-nav a{
  font-size:0.86rem; text-decoration:none; color:var(--paper-dim);
  letter-spacing:0.02em;
  position:relative; padding:0.2rem 0;
  transition:color 0.2s ease;
}
nav.main-nav a:hover, nav.main-nav a.active{ color:var(--seal); }
nav.main-nav a.active::after{
  content:""; position:absolute; left:0; right:0; bottom:-4px; height:2px; background:var(--seal);
}
.nav-toggle{ display:none; background:none; border:1px solid var(--brass); color:var(--paper); padding:0.4rem 0.7rem; border-radius:2px; font-family:var(--mono); font-size:0.8rem; }

@media (max-width: 860px){
  nav.main-nav{
    position:absolute; top:100%; left:0; right:0;
    background:var(--ink); flex-direction:column; gap:0;
    max-height:0; overflow:hidden; transition:max-height 0.3s ease;
    border-bottom:1px solid rgba(173,135,48,0.25);
  }
  nav.main-nav.open{ max-height:400px; }
  nav.main-nav a{ padding:0.9rem var(--edge); border-top:1px solid rgba(173,135,48,0.12); }
  .nav-toggle{ display:block; }
}

/* ---------- seal stamp motif ---------- */
.seal-stamp{
  position:relative;
  width:64px; height:64px;
  opacity:0.9;
}
.seal-stamp img{
  width:100%; height:100%;
  filter: invert(20%) sepia(70%) saturate(1800%) hue-rotate(340deg) brightness(0.75);
}
.seal-stamp.on-dark img{
  filter: invert(60%) sepia(20%) saturate(500%) hue-rotate(340deg) brightness(1.1);
}

/* ---------- hero ---------- */
.hero{
  position:relative;
  min-height:92vh;
  display:flex; align-items:flex-end;
  overflow:hidden;
  border-bottom:1px solid rgba(173,135,48,0.25);
}
.hero-media{
  position:absolute; inset:0;
  background:url('../img/pushhands.jpg') center 22% / cover no-repeat;
  filter:grayscale(0.55) contrast(1.05) brightness(0.55) sepia(0.15);
}
.hero-media::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(26,23,19,0.35) 0%, rgba(26,23,19,0.55) 55%, rgba(26,23,19,0.96) 100%);
}
.hero-content{
  position:relative; z-index:2;
  padding:0 var(--edge) 4.5rem;
  max-width:var(--max); margin:0 auto; width:100%;
}
.hero-seal{
  position:absolute; top:6vh; right:var(--edge);
  width:min(160px, 20vw); opacity:0.85;
  animation:fadein-slow 1.4s ease both;
}
.hero-seal img{ filter:invert(1) brightness(1.4); }
.hero h1{
  font-size:clamp(2.4rem, 6vw, 4.4rem);
  color:var(--paper);
  max-width:16ch;
  animation:rise 0.9s ease both 0.15s;
}
.hero h1 em{ color:var(--seal); font-style:normal; }
.hero p.lede{
  font-size:clamp(1.02rem, 1.6vw, 1.25rem);
  color:var(--paper-dim);
  max-width:52ch;
  margin-top:1.1rem;
  animation:rise 0.9s ease both 0.3s;
}
.hero-quote{
  margin-top:2.2rem;
  font-family:var(--display);
  font-style:italic;
  font-size:1.05rem;
  color:var(--brass);
  animation:rise 0.9s ease both 0.45s;
}
.hero-cta{ margin-top:2rem; display:flex; gap:1rem; flex-wrap:wrap; animation:rise 0.9s ease both 0.6s; }

@keyframes rise{ from{ opacity:0; transform:translateY(18px); } to{ opacity:1; transform:none; } }
@keyframes fadein-slow{ from{ opacity:0; } to{ opacity:0.85; } }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:0.5rem;
  padding:0.78rem 1.5rem;
  font-family:var(--body); font-weight:600; font-size:0.88rem;
  letter-spacing:0.02em;
  border-radius:1px;
  text-decoration:none;
  border:1px solid transparent;
  cursor:pointer;
  transition:transform 0.15s ease, background 0.2s ease, border-color 0.2s ease;
}
.btn:hover{ transform:translateY(-1px); }
.btn-seal{ background:var(--seal); color:var(--paper); }
.btn-seal:hover{ background:#bd4324; }
.btn-outline{ border-color:var(--brass); color:var(--paper); }
.btn-outline:hover{ border-color:var(--paper); }
.btn-dark{ border-color:var(--stone-dark); color:var(--ink); background:transparent; }

/* ---------- sections ---------- */
section{ padding:5.5rem 0; position:relative; }
section.on-paper{ background:var(--paper); color:var(--ink); }
section.on-ink-2{ background:var(--ink-2); }
.section-head{ max-width:60ch; margin-bottom:3rem; }
.section-head h2{ font-size:clamp(1.8rem, 3.4vw, 2.6rem); margin-top:0.4rem; }
.on-paper .section-head h2{ color:var(--ink); }
.on-paper .eyebrow{ color:var(--seal-dim); }
.on-paper .eyebrow::before{ background:var(--seal-dim); }

.reveal{ opacity:0; transform:translateY(24px); transition:opacity 0.7s ease, transform 0.7s ease; }
.reveal.in{ opacity:1; transform:none; }

/* ---------- grids / cards ---------- */
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; }
.grid-2{ display:grid; grid-template-columns:1.1fr 0.9fr; gap:3rem; align-items:center; }
@media (max-width:820px){ .grid-3{ grid-template-columns:1fr; } .grid-2{ grid-template-columns:1fr; } }

.card{
  background:rgba(242,234,217,0.04);
  border:1px solid rgba(173,135,48,0.25);
  padding:2rem 1.8rem;
  border-radius:2px;
}
.on-paper .card{
  background:#fff; border-color:var(--paper-dim);
  box-shadow:0 10px 30px -18px rgba(26,23,19,0.25);
}
.card .icon-ring{
  width:46px; height:46px; border-radius:50%;
  border:1px solid var(--brass);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--display); color:var(--brass); font-size:1.1rem;
  margin-bottom:1.1rem;
}

/* ---------- lineage timeline ---------- */
.lineage{ position:relative; padding-left:2.6rem; }
.lineage::before{
  content:""; position:absolute; left:11px; top:6px; bottom:6px; width:2px;
  background:linear-gradient(var(--brass), var(--seal));
  opacity:0.55;
}
.lineage-item{ position:relative; padding-bottom:2.6rem; }
.lineage-item:last-child{ padding-bottom:0; }
.lineage-node{
  position:absolute; left:-2.6rem; top:0.15rem;
  width:24px; height:24px;
}
.lineage-node img{ width:100%; filter:invert(60%) sepia(30%) saturate(600%) hue-rotate(340deg); }
.lineage-item h4{ font-size:1.05rem; color:var(--brass); margin-bottom:0.2rem; }
.on-paper .lineage-item h4{ color:var(--seal-dim); }
.lineage-item .role{ font-family:var(--mono); font-size:0.72rem; text-transform:uppercase; letter-spacing:0.1em; color:var(--stone); margin-bottom:0.5rem; display:block; }
.lineage-item p{ margin:0; max-width:60ch; }

/* ---------- generation names ---------- */
.gen-table{
  font-family:var(--mono); font-size:0.85rem;
  display:grid; grid-template-columns:repeat(auto-fill, minmax(90px,1fr));
  gap:0.6rem 1rem;
}
.gen-table span{
  border-bottom:1px dashed rgba(173,135,48,0.4);
  padding-bottom:0.35rem;
}
/* numbered generation flow with lineage holders */
.gen-flow{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(160px,1fr));
  gap:1rem;
}
.gen-cell{
  border:1px solid rgba(173,135,48,0.25);
  border-radius:2px;
  padding:0.9rem 1rem 1rem;
  display:flex; flex-direction:column;
}
.gen-cell .gen-no{
  font-family:var(--mono); font-size:0.64rem; letter-spacing:0.16em;
  text-transform:uppercase; color:var(--stone); margin-bottom:0.35rem;
}
.gen-cell .gen-char{
  font-family:var(--display); font-size:2rem; line-height:1.15; color:var(--paper);
}
.gen-cell .gen-pinyin{
  font-family:var(--mono); font-size:0.75rem; color:var(--brass);
  letter-spacing:0.1em; margin-top:0.1rem;
}
.gen-cell .gen-meaning{
  font-family:var(--display); font-style:italic; font-size:0.82rem;
  color:var(--stone); margin-top:0.2rem;
}
.gen-cell .gen-holder{
  font-size:0.8rem; color:var(--paper-dim); line-height:1.45;
  margin-top:0.6rem; padding-top:0.6rem;
  border-top:1px dashed rgba(173,135,48,0.3);
}
.gen-cell.known{
  border-color:rgba(173,135,48,0.65);
  background:rgba(173,135,48,0.07);
}
.gen-cell.current{
  border-color:var(--seal);
  background:rgba(166,55,30,0.12);
}
.gen-cell.current .gen-no{ color:var(--seal); }
.gen-pill{
  display:inline-block; align-self:flex-start;
  font-family:var(--mono); font-size:0.6rem; letter-spacing:0.1em; text-transform:uppercase;
  border:1px solid var(--seal); color:var(--seal);
  border-radius:20px; padding:0.15rem 0.5rem; margin-top:0.6rem;
}

/* ---------- syllabus ---------- */
/* masonry-style columns — cards of uneven height pack tightly */
.syllabus-grid{ columns:3 300px; column-gap:1.5rem; }
.syllabus-card{ break-inside:avoid; margin-bottom:1.5rem; }
.syllabus-card h4{ font-size:1.05rem; color:var(--brass); margin-bottom:0.5rem; }
.syllabus-card ul{ margin:0; padding-left:1.1rem; font-size:0.9rem; color:var(--paper-dim); }
.syllabus-card li{ margin-bottom:0.4rem; line-height:1.5; }
/* warm, softened card treatment on the light paper background */
.on-paper .syllabus-card{
  background:#f8f2e2;                       /* a shade lighter than the paper, not stark white */
  border:1px solid rgba(138,129,114,0.35);
  border-top:2px solid var(--brass);
  border-radius:2px;
  padding:1.5rem 1.4rem 1.6rem;
}
.on-paper .syllabus-card h4{
  color:var(--seal-dim);
  padding-bottom:0.65rem; margin-bottom:0.9rem;
  border-bottom:1px dashed rgba(138,129,114,0.45);
}
.on-paper .syllabus-card ul{ color:var(--ink); }
.syl-sub{
  display:block; font-family:var(--mono); font-size:0.66rem;
  letter-spacing:0.14em; text-transform:uppercase; color:var(--stone);
  margin:1.1rem 0 0.5rem;
}
.syllabus-card .syl-sub:first-of-type{ margin-top:0; }
.syllabus-card li em{ color:var(--stone-dark); font-style:normal; font-size:0.82rem; }

/* ---------- schedule ---------- */
.schedule-table{ width:100%; border-collapse:collapse; font-family:var(--body); }
.schedule-table th, .schedule-table td{
  text-align:left; padding:1rem 1.2rem; border-bottom:1px solid var(--paper-dim);
}
.schedule-table th{
  font-family:var(--mono); font-size:0.72rem; text-transform:uppercase; letter-spacing:0.1em; color:var(--stone);
}
.schedule-table td.price{ font-family:var(--mono); color:var(--seal-dim); font-weight:600; }
.day-pill{
  display:inline-block; font-family:var(--mono); font-size:0.68rem; letter-spacing:0.08em; text-transform:uppercase;
  padding:0.2rem 0.55rem; border:1px solid var(--seal-dim); color:var(--seal-dim); border-radius:20px;
}

/* ---------- forms ---------- */
.form-panel{
  background:#fff; color:var(--ink); border-radius:2px; padding:2.5rem;
  border:1px solid var(--paper-dim);
}
.form-panel h3{ color:var(--ink); }
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; }
@media (max-width:640px){ .form-grid{ grid-template-columns:1fr; } }
.field{ display:flex; flex-direction:column; gap:0.35rem; }
.field.full{ grid-column:1/-1; }
.field label{ font-family:var(--mono); font-size:0.72rem; text-transform:uppercase; letter-spacing:0.08em; color:var(--stone-dark); }
.field input, .field select, .field textarea{
  font-family:var(--body); font-size:0.95rem; padding:0.65rem 0.8rem;
  border:1px solid #cfc6b0; border-radius:1px; background:var(--paper);
}
.field input:focus, .field select:focus, .field textarea:focus{
  outline:2px solid var(--seal); outline-offset:1px;
}
.radio-row{ display:flex; gap:1.4rem; align-items:center; font-size:0.92rem; }
.form-note{ font-size:0.85rem; color:var(--stone); border-left:2px solid var(--brass); padding-left:1rem; margin:1.6rem 0; }
.doc-list{ list-style:none; padding:0; margin:0; display:grid; gap:0.8rem; }
.doc-list li{
  display:flex; align-items:center; justify-content:space-between;
  padding:1rem 1.3rem; border:1px solid var(--paper-dim); background:#fff;
}
.doc-list .doc-name{ font-weight:600; }
.doc-list .doc-desc{ font-size:0.85rem; color:var(--stone); font-weight:400; display:block; margin-top:0.2rem; }

/* ---------- footer ---------- */
footer.site-footer{
  background:var(--ink-2); border-top:1px solid rgba(173,135,48,0.25);
  padding:3.5rem 0 2rem;
}
/* footer brand lockup — transparent seal emblem with wordmark around it */
.footer-brand{
  display:flex; flex-direction:column; align-items:flex-start;
  gap:0.35rem; margin-bottom:1.2rem; text-decoration:none;
}
.footer-brand .fb-name{
  font-family:var(--display); font-size:1.4rem; letter-spacing:0.06em;
  color:var(--paper); line-height:1.15;
}
.footer-brand img{
  width:84px; height:84px; margin:0.45rem 0;
  filter:invert(1) brightness(1.5);
  opacity:0.9;
}
.footer-brand .fb-sub{
  font-family:var(--mono); font-size:0.64rem; letter-spacing:0.34em;
  text-transform:uppercase; color:var(--brass);
}
/* social links */
.social-links{ display:flex; gap:0.7rem; margin-top:1.3rem; }
.social-links a{
  width:38px; height:38px; border-radius:50%;
  border:1px solid rgba(173,135,48,0.45);
  display:inline-flex; align-items:center; justify-content:center;
  color:var(--paper-dim); text-decoration:none;
  transition:border-color 0.2s ease, color 0.2s ease, transform 0.15s ease;
}
.social-links a:hover{ border-color:var(--seal); color:var(--seal); transform:translateY(-1px); }
.social-links svg{ width:17px; height:17px; fill:currentColor; display:block; }
.on-paper .social-links a{ border-color:var(--stone); color:var(--stone-dark); }
.on-paper .social-links a:hover{ border-color:var(--seal-dim); color:var(--seal-dim); }
.footer-grid{ display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:2.5rem; }
@media (max-width:760px){ .footer-grid{ grid-template-columns:1fr; } }
.footer-grid h5{ font-family:var(--mono); font-size:0.72rem; text-transform:uppercase; letter-spacing:0.14em; color:var(--brass); margin-bottom:1rem; }
.footer-grid p, .footer-grid a{ color:var(--paper-dim); font-size:0.92rem; text-decoration:none; }
.footer-grid ul{ list-style:none; padding:0; margin:0; display:grid; gap:0.6rem; }
.footer-bottom{
  margin-top:3rem; padding-top:1.5rem; border-top:1px solid rgba(173,135,48,0.15);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:0.6rem;
  font-family:var(--mono); font-size:0.72rem; color:var(--stone);
}

/* ---------- page hero (interior pages) ---------- */
.page-hero{
  padding:7rem 0 3.5rem;
  border-bottom:1px solid rgba(173,135,48,0.25);
  background:radial-gradient(ellipse at top right, rgba(166,55,30,0.12), transparent 60%);
}
.page-hero .eyebrow{ margin-bottom:0.9rem; }
.page-hero h1{ font-size:clamp(2rem,4.4vw,3.2rem); max-width:20ch; }

.quote-block{
  font-family:var(--display); font-style:italic; font-size:1.3rem;
  border-left:3px solid var(--seal); padding-left:1.5rem; margin:2rem 0;
  color:var(--brass);
}
.on-paper .quote-block{ color:var(--seal-dim); }

.two-col{ display:grid; grid-template-columns:1fr 1fr; gap:3rem; }
@media (max-width:800px){ .two-col{ grid-template-columns:1fr; } }

.tag-list{ display:flex; flex-wrap:wrap; gap:0.6rem; }
.tag{
  font-family:var(--mono); font-size:0.72rem; padding:0.35rem 0.8rem;
  border:1px solid var(--stone); border-radius:20px; color:var(--stone);
}

.branch-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; }
@media (max-width:760px){ .branch-grid{ grid-template-columns:repeat(2,1fr); } }
.branch-card{
  border:1px solid var(--paper-dim); padding:1.3rem; background:#fff;
  color:var(--ink); /* dark, readable text on the white cards */
}
.branch-card h4{ color:var(--ink); }
.branch-card .flag{ font-family:var(--mono); font-size:0.7rem; text-transform:uppercase; letter-spacing:0.1em; color:var(--seal-dim); }
.branch-card a{ font-size:0.85rem; text-decoration:underline; color:var(--stone-dark); }

.admin-note{
  border:1px dashed var(--brass); padding:1.4rem 1.6rem; font-size:0.9rem; color:var(--paper-dim);
  background:rgba(173,135,48,0.06);
}