/* ═══════════════════════════════════════════════
   THREE-CO INSTITUTE — English Edition Stylesheet
   Academic-Press aesthetic · MIT Press × Foreign Affairs
═══════════════════════════════════════════════ */
:root {
  --bg:      #ffffff;
  --bg-off:  #f8f7f5;
  --bg-mist: #f0ede8;
  --ink:     #0f0f0f;
  --ink-2:   #2d2d2d;
  --ink-3:   #5a5a5a;
  --ink-4:   #999999;
  --ink-5:   #cccccc;
  --accent:  #1a3a5c;
  --accent-2:#2a5080;
  --gold:    #7d5a1e;
  --gold-lt: #b8922a;
  --rule:    rgba(15,15,15,0.1);
  --rule-2:  rgba(15,15,15,0.15);
  --serif:   'Cormorant Garamond','Libre Baskerville',Georgia,serif;
  --sans:    'Source Serif 4','Libre Baskerville',Georgia,serif;
  --mono:    'Space Mono','Courier New',monospace;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-weight:300;line-height:1.75;overflow-x:hidden;-webkit-font-smoothing:antialiased}
::-webkit-scrollbar{width:3px}
::-webkit-scrollbar-thumb{background:var(--ink-4)}

/* ── Nav ── */
nav{position:fixed;top:0;left:0;right:0;z-index:100;background:rgba(255,255,255,.97);border-bottom:2px solid var(--ink);display:flex;align-items:stretch;justify-content:space-between;height:60px}
.nav-logo{font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);text-decoration:none;display:flex;align-items:center;padding:0 2rem;border-right:1px solid var(--rule-2)}
.nav-links{display:flex;align-items:stretch;list-style:none}
.nav-links li{border-right:1px solid var(--rule)}
.nav-links a{font-family:var(--mono);font-size:.65rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);text-decoration:none;display:flex;align-items:center;padding:0 1.3rem;height:100%;transition:background .15s,color .15s}
.nav-links a:hover,.nav-links a.active{background:var(--ink);color:var(--bg)}
.nav-lang{font-family:var(--mono);font-size:.65rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);text-decoration:none;display:flex;align-items:center;padding:0 1.5rem;border-left:1px solid var(--rule-2);transition:background .15s,color .15s}
.nav-lang:hover{background:var(--ink);color:var(--bg)}
.nav-hamburger{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:0 1.2rem;background:none;border:none;border-left:1px solid var(--rule-2);align-self:stretch;justify-content:center}
.nav-hamburger span{display:block;width:20px;height:1.5px;background:var(--ink);transition:all .3s}

/* ── Shared layout ── */
section{padding:6rem 0}
.container{max-width:1060px;margin:0 auto;padding:0 4rem}
.section-num{font-family:var(--mono);font-size:.6rem;letter-spacing:.25em;text-transform:uppercase;color:var(--ink-5);margin-bottom:.5rem}
.h2{font-family:var(--serif);font-size:clamp(1.8rem,3.5vw,2.8rem);font-weight:400;line-height:1.15;letter-spacing:-.01em;color:var(--ink);margin-bottom:.5rem}
.h2-sub{font-family:var(--mono);font-size:.68rem;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-4);margin-bottom:2.5rem}
.rule{width:48px;height:2px;background:var(--ink);margin:1.8rem 0}
.rule-lt{background:rgba(255,255,255,.3)}
.body-en{font-family:var(--sans);font-size:.95rem;line-height:1.85;color:var(--ink-2);margin-bottom:1.2rem}
.pullquote{border-top:2px solid var(--ink);border-bottom:1px solid var(--rule-2);padding:1.5rem 0;margin:2.5rem 0;font-family:var(--serif);font-size:1.15rem;font-style:italic;color:var(--ink);line-height:1.6}
.dark-section{background:var(--ink);color:var(--bg)}
.mist-section{background:var(--bg-mist)}

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

/* ── Buttons ── */
.btns{display:flex;gap:.9rem;flex-wrap:wrap}
.btn{display:inline-block;padding:.75rem 1.8rem;font-family:var(--mono);font-size:.65rem;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;transition:all .15s;border:none;cursor:pointer}
.btn-dark{background:var(--ink);color:var(--bg)}
.btn-dark:hover{background:var(--accent)}
.btn-outline{background:transparent;color:var(--ink);border:1.5px solid var(--ink)}
.btn-outline:hover{background:var(--ink);color:var(--bg)}
.btn-outline-lt{background:transparent;color:var(--bg);border:1.5px solid rgba(255,255,255,.35)}
.btn-outline-lt:hover{border-color:rgba(255,255,255,.7);color:rgba(255,255,255,.9)}

/* ── Footer ── */
footer{background:#070707;color:rgba(255,255,255,.3);padding:2.5rem 4rem;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem}
.footer-brand{font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;color:rgba(255,255,255,.5)}
.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(255,255,255,.28);text-decoration:none;transition:color .2s}
.footer-links a:hover{color:rgba(255,255,255,.7)}
.footer-contact{font-family:var(--mono);font-size:.65rem;letter-spacing:.08em}
.footer-contact a{color:var(--gold-lt);text-decoration:none}

/* ── Page hero (inner pages) ── */
.page-hero{padding:7rem 0 4rem;border-bottom:2px solid var(--ink)}
.page-hero .container{padding-top:60px}

/* ── Mobile nav open ── */
@media(max-width:860px){
  .nav-links{display:none;flex-direction:column;position:fixed;top:60px;left:0;right:0;background:var(--bg);border-bottom:2px solid var(--ink);z-index:99}
  .nav-links.open{display:flex}
  .nav-links li{border-right:none;border-bottom:1px solid var(--rule)}
  .nav-links a{padding:1rem 2rem}
  .nav-hamburger{display:flex}
  .nav-lang{display:none}
  section{padding:4rem 0}
  .container{padding:0 1.5rem}
  footer{padding:2rem 1.5rem;flex-direction:column;align-items:flex-start;gap:1.5rem}
}

@keyframes fadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}