/* ═══════════════════════════════════════════════
   THREECO INSTITUTE — Shared Stylesheet
   3coprinciples.com
═══════════════════════════════════════════════ */
:root {
  --ink:     #0e0e0e;
  --paper:   #f5f0e8;
  --gold:    #b8922a;
  --gold-lt: #d4aa4a;
  --rust:    #8b3a2a;
  --mist:    #e8e3d8;
  --serif:   'Cormorant Garamond','Noto Serif SC',Georgia,serif;
  --zh:      'Noto Serif SC',serif;
  --mono:    'Space Mono',monospace;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font-family:var(--serif);line-height:1.75;overflow-x:hidden}
::-webkit-scrollbar{width:3px}
::-webkit-scrollbar-thumb{background:var(--gold)}

/* ── Nav ── */
nav{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;justify-content:space-between;padding:1.1rem 4rem;background:rgba(245,240,232,.94);backdrop-filter:blur(12px);border-bottom:1px solid rgba(184,146,42,.18);transition:border-color .3s}
.nav-logo{font-family:var(--zh);font-weight:700;font-size:1rem;letter-spacing:.12em;color:var(--ink);text-decoration:none}
.nav-logo span{color:var(--gold)}
.nav-links{display:flex;gap:2rem;list-style:none;align-items:center}
.nav-links a{font-family:var(--mono);font-size:.67rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);text-decoration:none;opacity:.6;transition:opacity .25s,color .25s}
.nav-links a:hover,.nav-links a.active{opacity:1;color:var(--gold)}
.nav-lang{font-family:var(--mono);font-size:.65rem;letter-spacing:.1em;color:var(--ink);text-decoration:none;opacity:.5;padding:.2rem .5rem;border:1px solid rgba(184,146,42,.3);transition:all .25s}
.nav-lang:hover,.nav-lang.active{opacity:1;color:var(--gold);border-color:var(--gold)}
.nav-lang-sep{color:rgba(184,146,42,.4);margin:0 .2rem;font-size:.7rem}
.nav-hamburger{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:4px;background:none;border:none}
.nav-hamburger span{display:block;width:22px;height:1.5px;background:var(--ink);transition:all .3s}

/* ── Shared layout ── */
section{padding:7rem 0}
.container{max-width:1060px;margin:0 auto;padding:0 4rem}
.label{font-family:var(--mono);font-size:.67rem;letter-spacing:.28em;text-transform:uppercase;color:var(--gold);margin-bottom:1rem}
.label-lt{color:var(--gold-lt)}
.h2{font-family:var(--zh);font-weight:300;font-size:clamp(1.9rem,3.5vw,2.8rem);line-height:1.3;letter-spacing:.04em;margin-bottom:.6rem}
.h2-en{font-family:var(--serif);font-style:italic;font-size:1rem;color:var(--gold);margin-bottom:2.5rem}
.h2-lt{color:var(--paper)}
.h2-en-lt{color:var(--gold-lt)}
.rule{width:48px;height:1px;background:var(--gold);margin:1.8rem 0}
.rule-lt{background:var(--gold-lt)}
.body-zh{font-family:var(--zh);font-size:.95rem;line-height:2;color:#3a3a3a}
.dark-section{background:var(--ink);color:var(--paper)}
.mist-section{background:var(--mist)}

/* ── Reveal ── */
.r{opacity:0;transform:translateY(28px);transition:opacity .75s,transform .75s}
.r.v{opacity:1;transform:none}
.r1{transition-delay:.1s}.r2{transition-delay:.2s}.r3{transition-delay:.3s}.r4{transition-delay:.4s}

/* ── Buttons ── */
.btns{display:flex;gap:.9rem;flex-wrap:wrap}
.btn{display:inline-block;padding:.8rem 2rem;font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;transition:all .28s;border:none;cursor:pointer}
.btn-dark{background:var(--ink);color:var(--paper)}
.btn-dark:hover{background:var(--gold)}
.btn-outline{background:transparent;color:var(--ink);border:1.5px solid var(--ink)}
.btn-outline:hover{border-color:var(--gold);color:var(--gold)}
.btn-outline-lt{background:transparent;color:var(--paper);border:1.5px solid rgba(245,240,232,.4)}
.btn-outline-lt:hover{border-color:var(--gold-lt);color:var(--gold-lt)}
.btn-ghost{background:transparent;color:var(--gold);border:1px solid rgba(184,146,42,.35);font-size:.63rem}
.btn-ghost:hover{border-color:var(--gold);background:rgba(184,146,42,.06)}

/* ── Footer ── */
footer{background:#070707;color:rgba(245,240,232,.35);padding:2.5rem 4rem;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem}
.footer-brand{font-family:var(--zh);font-size:.88rem;color:rgba(245,240,232,.55)}
.footer-links{display:flex;gap:1.8rem;list-style:none;flex-wrap:wrap}
.footer-links a{font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(245,240,232,.3);text-decoration:none;transition:color .25s}
.footer-links a:hover{color:var(--gold)}
.footer-contact{font-family:var(--mono);font-size:.65rem;letter-spacing:.08em}
.footer-contact a{color:var(--gold);text-decoration:none}

/* ── Keyframes ── */
@keyframes fadeUp{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes gridShift{from{background-position:0 0}to{background-position:56px 56px}}

/* ── Page hero (inner pages) ── */
.page-hero{padding:9rem 0 5rem;border-bottom:1px solid rgba(184,146,42,.15)}
.page-hero .label{margin-bottom:1.5rem}
.page-hero .h2{font-size:clamp(2.2rem,4vw,3.4rem)}

/* ── Mobile ── */
@media(max-width:860px){
  nav{padding:1rem 1.5rem}
  .nav-links{display:none}
  .nav-links.open{display:flex;flex-direction:column;position:fixed;top:56px;left:0;right:0;background:rgba(245,240,232,.97);backdrop-filter:blur(12px);padding:1.5rem 2rem 2rem;gap:1.2rem;border-bottom:1px solid rgba(184,146,42,.2);z-index:99}
  .nav-hamburger{display:flex}
  .container{padding:0 1.5rem}
  section{padding:4.5rem 0}
  footer{padding:2rem 1.5rem;flex-direction:column;align-items:flex-start;gap:1.2rem}
}