/* ============================================
   Lyn Harmony Kung Fu — theme 2.0
   Light paper + ink landscape (default), dark as an option.
   Dynamic variables (hero photo, portrait, art) come from theme.php.
   ============================================ */

:root{
  --bg:#F5F0E6;
  --bg-alt:rgba(236,228,212,.74);
  --bg-deep:#1B2230;
  --surface:rgba(255,253,248,.80);
  --surface-hi:#FFFFFF;
  --text:#22262C;
  --text-soft:#3A3F47;
  --text-mute:#636870;
  --line:rgba(34,38,44,.14);
  --accent:#C2452D;
  --accent-deep:#A23621;
  --accent-on:#FFFFFF;
  --gold:#B8862F;
  --gold-light:#E2B961;
  --ink:#1B2230;
  --ink-2:#232C3D;
  --shadow:0 6px 24px rgba(27,34,48,.10);
  --shadow-hi:0 14px 34px rgba(27,34,48,.16);

  --display:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --body:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --zh:'Noto Serif SC','Songti SC','SimSun',serif;
  --max:1180px;

  /* defaults; theme.php overrides these from the admin settings */
  --hero-img:url('../img/hero-sunset.jpg'); --hero-pos:50% 72%; --hero-zoom:1;
  --hero-ov:rgba(13,20,33,.32); --hero-vig:.3; --hero-blur:0px; --hero-bright:1;
  --hero-text:#ffffff; --hero-accent:#ffd166;
  --hero-ts:0 2px 4px rgba(10,14,24,.45),0 4px 28px rgba(10,14,24,.55); --hero-stroke:0;
  --hero-box:transparent; --hero-box-pad:0;
  --pt-img:url('../img/sifu-lyndon-portrait.jpg'); --pt-pos:50% 16%; --pt-zoom:1; --pt-size:220px;
  --pt-shadow:0 12px 30px rgba(10,14,24,.3); --pt-ring:1; --pt-ring-color:#c9a24b;
  --art-opacity:.7;
}

html[data-theme="dark"]{
  --bg:#141A27;
  --bg-alt:rgba(28,37,56,.72);
  --bg-deep:#0E131C;
  --surface:rgba(241,242,240,.06);
  --surface-hi:rgba(241,242,240,.12);
  --text:#F1F2F0;
  --text-soft:rgba(241,242,240,.86);
  --text-mute:#A9B3C5;
  --line:rgba(241,242,240,.17);
  --accent:#E8673C;
  --accent-deep:#C9502A;
  --gold:#E2B961;
  --gold-light:#F0D088;
  --shadow:0 6px 24px rgba(0,0,0,.30);
  --shadow-hi:0 14px 34px rgba(0,0,0,.42);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; background:var(--bg); }
body{
  background:transparent;
  color:var(--text);
  font-family:var(--body);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
  display:flex; flex-direction:column;
}
body > main, body > section, body > footer{ position:relative; }
body::before{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:var(--art-img, url('../img/bg-bamboo.svg')) center bottom / cover no-repeat;
  opacity:var(--art-opacity);
}
@media (orientation:portrait) and (max-width:900px){
  body::before{ background-size:auto 100%; background-position:var(--art-mpos,50%) bottom; }
}
html[data-theme="dark"] body::before{
  filter:invert(1) hue-rotate(180deg) brightness(.75) saturate(.5);
  opacity:calc(var(--art-opacity) * .42);
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ font-family:var(--display); color:var(--text); line-height:1.15; letter-spacing:-.015em; }
h1{ font-size:clamp(2.2rem,5vw,3.7rem); font-weight:700; }
h2{ font-size:clamp(1.6rem,3vw,2.25rem); font-weight:650; }
h3{ font-size:1.25rem; font-weight:650; }

.eyebrow{
  font-family:var(--body); font-size:.78rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--accent-deep);
}
html[data-theme="dark"] .eyebrow{ color:var(--gold-light); }
.wrap{ max-width:var(--max); margin:0 auto; padding:0 24px; }

/* ---------- Header (ink, in both themes) ---------- */
header.site{
  position:sticky; top:0; z-index:60;
  background:linear-gradient(180deg,#1B2230,#171D2A);
  border-bottom:2px solid transparent;
  border-image:linear-gradient(90deg,transparent,var(--gold) 20%,var(--gold-light) 50%,var(--gold) 80%,transparent) 1;
  box-shadow:0 6px 22px rgba(10,14,24,.25);
}
.nav-inner{
  max-width:1320px; margin:0 auto; padding:10px 24px;
  display:flex; align-items:center; justify-content:space-between; gap:22px;
}
.brand{ display:flex; align-items:center; flex:0 0 auto; }
.brand img{ height:68px; width:auto; filter:drop-shadow(0 2px 6px rgba(0,0,0,.35)); }
nav.links{ display:flex; gap:clamp(12px,1.6vw,26px); align-items:center; flex-wrap:nowrap; }
nav.links a{
  font-size:.92rem; font-weight:500; color:rgba(245,240,230,.88);
  position:relative; padding:6px 0; white-space:nowrap; transition:color .15s;
}
nav.links a:hover{ color:#fff; }
nav.links a.active{ color:#fff; }
nav.links a.active::after{
  content:""; position:absolute; left:0; right:0; bottom:-3px; height:2px;
  background:var(--gold-light); border-radius:2px;
}
.nav-tools{ display:flex; align-items:center; gap:10px; flex:0 0 auto; }
.lang-switch{ display:flex; gap:3px; font-size:.75rem; font-weight:600; }
.lang-switch button{
  background:none; border:1px solid rgba(245,240,230,.25); color:rgba(245,240,230,.75);
  padding:5px 9px; cursor:pointer; border-radius:4px; font:inherit; letter-spacing:.04em;
}
.lang-switch button:hover{ border-color:var(--gold-light); color:#fff; }
.lang-switch button.active{ background:var(--gold-light); color:#1B2230; border-color:var(--gold-light); }
.theme-toggle{
  width:34px; height:30px; display:grid; place-items:center; cursor:pointer;
  background:none; border:1px solid rgba(245,240,230,.25); border-radius:4px; color:rgba(245,240,230,.85);
}
.theme-toggle:hover{ border-color:var(--gold-light); color:#fff; }
.theme-toggle svg{ width:17px; height:17px; }
.theme-toggle .i-sun{ display:none; }
html[data-theme="dark"] .theme-toggle .i-sun{ display:block; }
html[data-theme="dark"] .theme-toggle .i-moon{ display:none; }
.menu-toggle{ display:none; background:none; border:none; font-size:1.7rem; cursor:pointer; color:#F5F0E6; line-height:1; }

/* ---------- Hero (photo controlled from the admin) ---------- */
.hero{
  position:relative; isolation:isolate; overflow:hidden;
  padding:40px 0 !important; text-align:center; color:var(--hero-text);
  min-height:580px; display:flex; align-items:center;   /* every page: same hero size */
}
.hero .wrap{ width:100%; }
.hero::before{
  content:""; position:absolute; inset:-2px; z-index:-2;
  background:var(--hero-img) var(--hero-pos) / cover no-repeat;
  transform:scale(var(--hero-zoom)); transform-origin:var(--hero-pos);
  filter:blur(var(--hero-blur)) brightness(var(--hero-bright));
}
.hero::after{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(ellipse at 50% 45%, rgba(0,0,0,0) 38%, rgba(0,0,0,var(--hero-vig)) 100%),
    linear-gradient(var(--hero-ov),var(--hero-ov));
}
.hero .wrap{ position:relative; z-index:2; }
.hero .hero-text{
  display:inline-block; max-width:860px; width:100%;
  background:var(--hero-box); padding:var(--hero-box-pad); border-radius:14px;
}
.hero .eyebrow{ display:block; margin-bottom:14px; color:var(--hero-accent); text-shadow:var(--hero-ts); }
.hero h1{
  max-width:820px; margin:0 auto 20px; color:var(--hero-text);
  text-shadow:var(--hero-ts); -webkit-text-stroke:var(--hero-stroke); paint-order:stroke fill;
}
.hero p.lead{
  max-width:620px; margin:0 auto 30px; font-size:1.15rem; color:var(--hero-accent);
  text-shadow:var(--hero-ts); font-weight:500;
}
.hero .hero-logo{ height:clamp(96px,14vw,150px); width:auto; margin:0 auto 18px; filter:drop-shadow(0 4px 14px rgba(0,0,0,.45)); }
.hero .chapter-logos{ display:flex; align-items:center; justify-content:center; gap:28px; flex-wrap:wrap; margin-bottom:18px; }
.hero .chapter-logo{ height:clamp(84px,11vw,120px); width:auto; filter:drop-shadow(0 4px 14px rgba(0,0,0,.45)); margin:0; }
.hero .cta-row{ display:flex; gap:14px; flex-wrap:wrap; justify-content:center; }
.hero .vert{
  position:absolute; right:clamp(18px,5vw,80px); top:50%; transform:translateY(-50%);
  writing-mode:vertical-rl; font-family:var(--zh); font-size:clamp(1.6rem,2.6vw,2.4rem); font-weight:600;
  letter-spacing:.5em; color:rgba(255,255,255,.62); text-shadow:0 2px 12px rgba(0,0,0,.45); z-index:2;
  display:flex; align-items:center; gap:18px;
}
.hero .vert .seal{
  writing-mode:horizontal-tb; letter-spacing:0; width:34px; height:34px; display:grid; place-items:center;
  background:#C2452D; color:#fff; font-size:1.15rem; font-weight:700; border-radius:3px; transform:rotate(-4deg);
  box-shadow:0 3px 10px rgba(0,0,0,.35);
}
@media (max-width:1000px){ .hero .vert{ display:none; } }
@media (max-width:700px){ .hero{ min-height:570px; } }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:8px; font-family:var(--body); font-weight:600; font-size:.95rem;
  padding:14px 28px; border:1px solid transparent; border-radius:8px; cursor:pointer;
  transition:background .15s,color .15s,transform .15s,box-shadow .15s,border-color .15s;
}
.btn-primary{ background:var(--accent); color:var(--accent-on); border-color:var(--accent); box-shadow:0 6px 18px rgba(194,69,45,.30); }
.btn-primary:hover{ background:var(--accent-deep); border-color:var(--accent-deep); transform:translateY(-1px); box-shadow:0 10px 24px rgba(194,69,45,.38); }
.btn-ghost{ background:transparent; color:var(--text); border-color:var(--line); }
.btn-ghost:hover{ background:var(--surface); border-color:var(--accent); }
.hero .btn-ghost{ background:rgba(255,255,255,.14); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); border-color:rgba(255,255,255,.6); color:#fff; }
.hero .btn-ghost:hover{ background:rgba(255,255,255,.26); border-color:#fff; }
.btn-gold{ background:linear-gradient(135deg,#E2B961,#B8862F); color:#1B2230; border-color:#B8862F; }
.btn-gold:hover{ filter:brightness(1.06); transform:translateY(-1px); }
.btn-sm{ padding:9px 18px; font-size:.86rem; }

/* ---------- Sections ---------- */
main{ flex:1 0 auto; }
section{ padding:56px 0; }
section.alt{ background:var(--bg-alt); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); }
section.dark{ background:linear-gradient(180deg,#1B2230,#151B27); color:#F1F2F0; }
section.dark h2{ color:#fff; }
section.dark p{ color:rgba(241,242,240,.82); }
.section-head{ margin-bottom:28px; max-width:700px; }
.section-head p{ color:var(--text-mute); margin-top:10px; }
.section-head .eyebrow{ display:block; margin-bottom:8px; }

.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:26px; }
.card{
  position:relative; border:1px solid var(--line); border-radius:14px; padding:26px 24px;
  background:var(--surface); box-shadow:var(--shadow);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  transition:transform .18s,box-shadow .18s,background .18s,border-color .18s;
}
a.card:hover,.card.lift:hover{ transform:translateY(-3px); box-shadow:var(--shadow-hi); background:var(--surface-hi); border-color:var(--gold); }
.card h3{ margin-bottom:10px; }
.card p{ color:var(--text-mute); font-size:.98rem; }
.card .label{ font-size:.74rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--accent-deep); margin-bottom:8px; display:block; }
html[data-theme="dark"] .card .label{ color:var(--gold-light); }
.card .stretched::after{ content:""; position:absolute; inset:0; z-index:1; border-radius:inherit; }
.card .subtle-link{ position:relative; z-index:2; display:inline-block; margin-top:14px; font-size:.88rem; font-weight:600; color:var(--accent-deep); }
html[data-theme="dark"] .card .subtle-link{ color:var(--gold-light); }
.card .subtle-link:hover{ text-decoration:underline; }

/* logo plaque: the gold logos sit on a dark ink tile so they read on light paper */
.logo-tile{
  display:flex; align-items:center; justify-content:center; gap:14px;
  background:linear-gradient(145deg,#232C3D,#151B27); border-radius:12px;
  padding:14px 18px; min-height:92px; margin-bottom:18px;
  box-shadow:inset 0 0 0 1px rgba(226,185,97,.25);
}
.logo-tile img{ height:64px; width:auto; max-width:100%; object-fit:contain; }
.logo-tile.sm{ min-height:0; padding:10px 14px; }
@media (max-width:760px){
  .logo-tile{ gap:10px; padding:12px 12px; min-height:0; }
  .logo-tile img{ height:52px; width:auto; flex:1 1 0; min-width:0; max-width:48%; object-fit:contain; }
  .logo-tile img:only-child{ max-width:100%; flex:0 1 auto; }
}
.logo-tile.plain{ background:transparent; box-shadow:none; }
/* gold logos on light paper */
html:not([data-theme=dark]) .logo-tile.plain.gold img{ filter:brightness(.6) saturate(1.3) contrast(1.05); }

/* ---------- Portrait: gold brush ring ---------- */
.portrait{ position:relative; width:var(--pt-size); height:var(--pt-size); margin:0 auto 26px; }
.portrait .pt-clip{ position:absolute; inset:0; border-radius:50%; overflow:hidden; box-shadow:var(--pt-shadow); background:#2b3447; }
.portrait .pt-photo{
  position:absolute; inset:0; background:var(--pt-img) var(--pt-pos) / cover no-repeat;
  transform:scale(var(--pt-zoom)); transform-origin:var(--pt-pos);
}
.portrait::after{
  content:""; position:absolute; inset:-7%; pointer-events:none; opacity:var(--pt-ring);
  background:url('../img/brush-ring.svg') center / contain no-repeat;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.25));
}
.portrait.tinted::after{ filter:drop-shadow(0 2px 6px rgba(0,0,0,.25)) hue-rotate(var(--ring-hue,0deg)); }

/* ---------- Schedule ---------- */
.schedule{ border:1px solid var(--line); border-radius:14px; background:var(--surface); overflow:hidden; box-shadow:var(--shadow); }
.schedule-row{ display:flex; justify-content:space-between; align-items:center; padding:20px 26px; border-bottom:1px solid var(--line); font-size:.98rem; }
.schedule-row:last-child{ border-bottom:none; }
.schedule-row .day{ font-weight:600; font-size:1.02rem; }
.schedule-row .time{ color:var(--accent-deep); font-weight:600; font-variant-numeric:tabular-nums; }
html[data-theme="dark"] .schedule-row .time{ color:var(--gold-light); }
.schedule-row .closed{ color:var(--text-mute); }
.addr{ white-space:pre-line; }

/* ---------- Testimonials ---------- */
.testimonial-track{ display:flex; gap:20px; overflow-x:auto; padding:8px 6px 10px; -webkit-overflow-scrolling:touch; scrollbar-width:thin; scrollbar-color:var(--gold) transparent; }
.testimonial-track::-webkit-scrollbar{ height:6px; }
.testimonial-track::-webkit-scrollbar-thumb{ background:var(--gold); border-radius:3px; }
.testimonial-card{ flex:0 0 82%; background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:26px 24px; display:flex; flex-direction:column; box-shadow:var(--shadow); }
.testimonial-card p{ font-style:italic; font-size:1.02rem; color:var(--text-soft); line-height:1.6; flex-grow:1; }
.testimonial-card cite{ display:block; margin-top:16px; font-size:.82rem; font-style:normal; font-weight:600; color:var(--accent-deep); }
html[data-theme="dark"] .testimonial-card cite{ color:var(--gold-light); }
.testimonial-hint{ font-size:.78rem; color:var(--text-mute); margin-top:8px; }
@media (min-width:640px){ .testimonial-card{ flex-basis:350px; } }

/* ---------- Links page ---------- */
.link-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }
.link-card{ display:flex; gap:18px; align-items:flex-start; }
.link-card .logo-tile{ flex:0 0 120px; min-height:0; margin:0; padding:10px 12px; align-self:stretch; }
.link-card .logo-tile img{ height:auto; max-height:56px; width:100%; }
.link-card .lc-body{ flex:1; min-width:0; }
.link-card h3{ font-size:1.12rem; margin-bottom:6px; }
.link-card .lc-go{ display:inline-block; margin-top:10px; font-size:.82rem; font-weight:600; color:var(--accent-deep); }
html[data-theme="dark"] .link-card .lc-go{ color:var(--gold-light); }
.social-list{ border-top:1px solid var(--line); }
.social-item{ display:flex; align-items:center; gap:18px; padding:18px 6px; border-bottom:1px solid var(--line); transition:background .15s,padding-left .15s; }
.social-item:hover{ background:var(--surface); padding-left:14px; }
.social-mark{ width:44px; height:44px; flex:0 0 44px; display:flex; align-items:center; justify-content:center; border-radius:8px; background:#fff; box-shadow:0 1px 6px rgba(0,0,0,.12); }
.social-meta{ flex:1 1 auto; min-width:0; }
.social-name{ display:block; font-weight:600; font-size:1.05rem; }
.social-handle{ display:block; font-size:.82rem; color:var(--text-mute); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.social-go{ font-size:.82rem; font-weight:600; color:var(--accent-deep); white-space:nowrap; }
html[data-theme="dark"] .social-go{ color:var(--gold-light); }
.social-mark[data-brand="youtube"] svg{ fill:#FF0033; }
.social-mark[data-brand="instagram"] svg{ fill:#E1306C; }
.social-mark[data-brand="facebook"] svg{ fill:#1877F2; }
.social-mark[data-brand="tiktok"] svg{ fill:#010101; }
@media (max-width:520px){ .social-go{ display:none; } }

/* ---------- NSR highlight ---------- */
.nsr-box{ display:grid; grid-template-columns:auto 1fr auto; gap:28px; align-items:center; }
.nsr-box .logo-tile{ margin:0; min-height:0; }
.nsr-box .logo-tile img{ height:72px; }
.nsr-box h2{ margin-bottom:8px; font-size:clamp(1.4rem,2.4vw,1.9rem); }
.nsr-box p{ color:var(--text-mute); max-width:640px; }
@media (max-width:860px){ .nsr-box{ grid-template-columns:1fr; text-align:left; } }

/* ---------- Contact ---------- */
.contact-grid{ display:grid; grid-template-columns:1fr 1.2fr; gap:48px; }
.contact-item{ margin-bottom:22px; }
.contact-item .label{ font-size:.74rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--text-mute); display:block; margin-bottom:4px; }
form.contact-form input,form.contact-form textarea{
  width:100%; background:var(--surface); border:1px solid var(--line); border-radius:8px;
  padding:13px 14px; font-family:var(--body); font-size:1rem; color:var(--text); margin-bottom:16px;
}
form.contact-form input::placeholder,form.contact-form textarea::placeholder{ color:var(--text-mute); }
form.contact-form input:focus,form.contact-form textarea:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(194,69,45,.15); }
form.contact-form textarea{ min-height:130px; resize:vertical; }

/* ---------- Blog ---------- */
.post-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.post-card{ padding:0; overflow:hidden; display:flex; flex-direction:column; }
.post-card .pc-cover{ aspect-ratio:16/9; background:linear-gradient(145deg,#2b3447,#1B2230); overflow:hidden; }
.post-card .pc-cover img{ width:100%; height:100%; object-fit:cover; transition:transform .4s; }
.post-card:hover .pc-cover img{ transform:scale(1.04); }
.post-card .pc-body{ padding:20px 22px 24px; display:flex; flex-direction:column; flex:1; }
.post-card .pc-date{ font-size:.78rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--accent-deep); margin-bottom:8px; }
html[data-theme="dark"] .post-card .pc-date{ color:var(--gold-light); }
.post-card h3{ font-size:1.15rem; margin-bottom:8px; }
.post-card p{ font-size:.94rem; }
.post-card .pc-more{ margin-top:auto; padding-top:14px; font-size:.86rem; font-weight:600; color:var(--accent-deep); }
html[data-theme="dark"] .post-card .pc-more{ color:var(--gold-light); }
.empty-note{ color:var(--text-mute); text-align:center; padding:40px 0; }
.post{ max-width:740px; margin:0 auto; }
.post .post-meta{ font-size:.84rem; color:var(--text-mute); margin-bottom:10px; font-weight:500; }
.post .post-cover{ margin:26px 0; border-radius:14px; overflow:hidden; box-shadow:var(--shadow-hi); }
.post .post-cover img{ width:100%; }
.post-body{ font-size:1.06rem; line-height:1.75; color:var(--text-soft); }
.post-body > * + *{ margin-top:1.15em; }
.post-body h2{ margin-top:1.8em; font-size:1.6rem; }
.post-body h3{ margin-top:1.5em; font-size:1.3rem; }
.post-body a{ color:var(--accent-deep); text-decoration:underline; text-underline-offset:3px; }
html[data-theme="dark"] .post-body a{ color:var(--gold-light); }
.post-body ul,.post-body ol{ padding-left:1.4em; }
.post-body li + li{ margin-top:.4em; }
.post-body blockquote{ border-left:3px solid var(--gold); padding:4px 0 4px 22px; font-style:italic; color:var(--text); }
.post-body img{ border-radius:10px; margin-inline:auto; }
.post-body figure{ margin:1.6em 0; }
.post-body figcaption{ font-size:.86rem; color:var(--text-mute); text-align:center; margin-top:8px; }
.post-body .video{ position:relative; aspect-ratio:16/9; border-radius:12px; overflow:hidden; background:#000; }
.post-body .video iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.post-body hr{ border:0; height:1px; background:var(--line); margin:2em 0; }
.back-link{ display:inline-block; margin-bottom:22px; font-size:.9rem; font-weight:600; color:var(--accent-deep); }
html[data-theme="dark"] .back-link{ color:var(--gold-light); }
.lang-note-bar{ font-size:.8rem; color:var(--text-mute); margin-top:6px; }

/* ---------- Footer (ink) ---------- */
footer.site{ background:linear-gradient(180deg,#1B2230,#121823); color:rgba(241,242,240,.72); padding:54px 0 28px; border-top:2px solid var(--gold); }
footer.site .footer-top{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:32px; }
footer.site a{ color:rgba(241,242,240,.88); }
footer.site a:hover{ color:var(--gold-light); }
footer.site .f-logo{ height:76px; width:auto; margin-bottom:18px; }
footer .f-label{ font-size:.72rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--gold-light); margin-bottom:4px; }
footer .f-text{ font-size:.92rem; color:rgba(241,242,240,.85); max-width:280px; margin-bottom:18px; }
.social-row{ display:flex; gap:10px; }
.social-btn{ width:40px; height:40px; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.18); border-radius:8px; transition:background .15s,border-color .15s,transform .15s; }
.social-btn:hover{ background:var(--accent); border-color:var(--accent); transform:translateY(-2px); color:#fff; }
.foot-nsr{ margin-top:16px; font-size:.86rem; }
.foot-nsr a{ color:var(--gold-light); text-decoration:underline; text-underline-offset:3px; }
footer.site .foot-bottom{ margin-top:38px; padding-top:20px; border-top:1px solid rgba(255,255,255,.14); font-size:.78rem; color:rgba(241,242,240,.6); }

/* ---------- Focus / motion ---------- */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{ outline:2px solid var(--gold-light); outline-offset:2px; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } *{ transition:none !important; } }

/* ---------- Responsive ---------- */
@media (max-width:1120px){
  .menu-toggle{ display:block; }
  nav.links{
    display:none; position:absolute; top:100%; left:0; right:0; background:#171D2A;
    border-bottom:2px solid var(--gold); flex-direction:column; align-items:stretch; gap:0; padding:8px 24px 18px;
  }
  nav.links.open{ display:flex; }
  nav.links a{ padding:13px 0; border-bottom:1px solid rgba(245,240,230,.12); font-size:1rem; }
  nav.links a.active::after{ display:none; }
  nav.links a.active{ color:var(--gold-light); }
  .nav-inner{ position:relative; }
}
@media (max-width:980px){
  .grid-3,.post-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:760px){
  .grid-3,.grid-2,.contact-grid,.post-grid,.link-grid{ grid-template-columns:1fr; }
  .contact-grid{ gap:32px; }
  .brand img{ height:56px; }
  section{ padding:44px 0; }
  .hero{ padding:48px 0 44px; }
  .hero.home{ padding:60px 0 64px; }
  footer.site .wrap{ flex-direction:column; }
  .link-card{ flex-direction:column; }
  .link-card .logo-tile{ flex:none; width:100%; }
}


/* ---------- Chapter pages (Yan Shou Gong / WuJi) ---------- */
.prose{ font-size:1.06rem; margin-bottom:16px; line-height:1.7; }
.card.person .label{ margin-bottom:6px; }
.card.person h3{ font-size:1.3rem; }
.faq{ border:1px solid var(--line); border-radius:12px; background:var(--surface); margin-bottom:12px; overflow:hidden; }
.faq summary{ cursor:pointer; padding:16px 20px; font-weight:600; list-style:none; position:relative; padding-right:48px; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; position:absolute; right:20px; top:50%; transform:translateY(-50%); font-size:1.3rem; color:var(--accent-deep); }
.faq[open] summary::after{ content:"–"; }
.faq p{ padding:0 20px 18px; color:var(--text-mute); }
.logo-tile a{ display:flex; align-items:center; justify-content:center; position:relative; z-index:2; min-width:0; flex:1 1 0; }
.logo-tile a img{ max-width:100%; }


/* ---------- Phones: keep the header inside the screen ---------- */
@media (max-width:560px){
  .nav-inner{ padding:8px 12px; gap:8px; }
  .brand img{ height:44px; max-width:40vw; object-fit:contain; }
  .nav-tools{ gap:6px; }
  .lang-switch{ gap:2px; }
  .lang-switch button{ padding:5px 7px; font-size:.72rem; }
  .theme-toggle{ width:30px; }
  .menu-toggle{ padding:0 2px; }
}
html,body{ overflow-x:clip; }

.tick-list{ list-style:none; padding:0; margin:0; display:grid; gap:12px; }
.tick-list li{ position:relative; padding:14px 18px 14px 48px; background:var(--surface); border:1px solid var(--line); border-radius:12px; }
.tick-list li::before{ content:"✓"; position:absolute; left:18px; top:50%; transform:translateY(-50%); color:var(--accent-deep); font-weight:700; }

/* gold divider between the Yan Shou Gong and WuJi logos (90% of the tile height) */
.logo-tile{ position:relative; }
.logo-tile:has(> a + a)::after{
  content:""; position:absolute; left:50%; top:5%; height:90%; width:2px; transform:translateX(-50%);
  background:linear-gradient(180deg, rgba(184,134,47,0), #B8862F 14%, #E2B961 50%, #B8862F 86%, rgba(184,134,47,0));
  box-shadow:0 0 8px rgba(226,185,97,.35); border-radius:2px; pointer-events:none;
}

/* home chapter cards: back to the dark ink plaque with the original gold logos */
article.card > .logo-tile{ background:linear-gradient(145deg,#232C3D,#151B27) !important; box-shadow:inset 0 0 0 1px rgba(226,185,97,.25) !important; border:0 !important; min-height:124px; padding:10px 12px; gap:8px; }
article.card > .logo-tile img{ height:96px; max-height:96px; width:auto; max-width:100%; object-fit:contain; filter:none !important; }