*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
  --white:#fff;
  --black:#000;
  --bg:#fff;
  --gray-100:#f9f9f9;
  --gray-200:#d9d9d9;
  --gray-500:#6e6e6e;
  --gray-600:#3f3f3f;
  --accent:#019949;
  --serif:'Source Serif 4','Noto Serif JP',Georgia,serif;
  --sans:'Inter',system-ui,sans-serif;
  --content-w:52.625rem;
}
html{-webkit-font-smoothing:antialiased}
body{background:var(--bg);color:var(--black);font-family:var(--serif);font-size:18px;font-weight:300;line-height:1.444}
a{color:inherit;text-decoration:none}
::selection{background:var(--black);color:var(--white)}
img{max-width:100%;height:auto;display:block}

/* NAV */
.nav{
  display:flex;align-items:center;justify-content:space-between;
  padding:0 2.5rem;height:56px;
  border-bottom:1px solid var(--black);
  position:sticky;top:0;z-index:100;background:var(--bg);
}
.nav-logo-img{height:36px;width:auto}
.nav-links{display:flex;gap:2rem;list-style:none}
.nav-links a{
  font-family:var(--sans);font-size:14px;font-weight:500;
  color:var(--black);transition:color 0.15s;
}
.nav-links a:hover{color:var(--gray-500)}
.nav-lang a{padding:0.3rem 0.7rem;border:1px solid var(--gray-200);font-size:11px;font-weight:500}

/* FOOTER */
.footer{
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:0.5rem;
  padding:1.5rem 2.5rem;
  border-top:1px solid var(--gray-200);
  font-family:var(--sans);font-size:10px;color:var(--gray-500);
  letter-spacing:0.05em;
}
.footer-note{color:var(--gray-500);font-style:normal}

/* SHARED */
.eyebrow{
  font-family:var(--sans);font-size:11px;font-weight:500;
  letter-spacing:0.15em;text-transform:uppercase;color:var(--gray-500);
  margin-bottom:1.5rem;
}
.section-border{border-bottom:4px solid var(--black)}
.section-border-thin{border-bottom:1px solid var(--gray-200)}

/* ============ HOME ============ */
.hero{padding:6rem 2.5rem 5rem;border-bottom:4px solid var(--black)}
.hero-brand-name{font-family:var(--serif);font-size:clamp(1.8rem,4vw,2.8rem);font-weight:700;color:#0047AB;letter-spacing:-0.01em;margin-bottom:1.5rem}
.hero h1{font-size:clamp(1.3rem,2.5vw,1.8rem);}
.hero h1{
  font-family:var(--serif);font-size:clamp(2.5rem,5vw,3.375rem);
  font-weight:300;line-height:1.2;letter-spacing:-0.01em;max-width:18em;
}
.two-col{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid var(--gray-200)}
.two-col-left{padding:4rem 2.5rem;border-right:1px solid var(--gray-200)}
.two-col-right{padding:4rem 2.5rem}
.col-heading{font-family:var(--serif);font-size:1.75rem;font-weight:300;line-height:1.35;margin-bottom:1.5rem}
.col-body{font-family:var(--sans);font-size:15px;line-height:1.9;color:var(--black);font-weight:400}
.col-body p{margin-bottom:1.2rem}
.col-body strong{font-weight:600;color:var(--black)}

.stats-row{display:grid;grid-template-columns:repeat(4,1fr);border-bottom:4px solid var(--black)}
.stat-cell{padding:3rem 2.5rem;border-right:1px solid var(--gray-200);text-align:center}
.stat-cell:last-child{border-right:none}
.stat-num{font-family:var(--serif);font-size:clamp(2rem,4vw,3rem);font-weight:700;line-height:1;letter-spacing:-0.02em}
.stat-label{font-family:var(--sans);font-size:10px;font-weight:500;letter-spacing:0.15em;text-transform:uppercase;color:var(--gray-500);margin-top:0.75rem}

.cards{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px solid var(--gray-200)}
.card{padding:3rem 2.5rem;border-right:1px solid var(--gray-200);transition:background 0.2s}
.card:last-child{border-right:none}
.card:hover{background:var(--gray-100)}
.card-num{font-family:var(--sans);font-size:10px;font-weight:600;letter-spacing:0.15em;color:var(--gray-500);margin-bottom:2rem}
.card h3{font-family:var(--sans);font-size:14px;font-weight:600;letter-spacing:-0.01em;margin-bottom:0.75rem}
.card p{font-size:14px;line-height:1.6;color:var(--gray-500);font-weight:300}

.home-latest{padding:4rem 2.5rem;border-bottom:1px solid var(--gray-200)}
.home-latest-header{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:3rem}
.home-latest-header h2{font-family:var(--sans);font-size:20px;font-weight:600;letter-spacing:-0.01em}
.home-latest-desc{font-family:var(--sans);font-size:15px;color:var(--black);margin-top:0.4rem;font-weight:400}
.home-latest-header a{font-family:var(--sans);font-size:14px;color:var(--gray-500)}
.home-latest-header a:hover{color:var(--black)}
.articles-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1px;background:var(--gray-200);border:1px solid var(--gray-200)}
.article-item{background:var(--white);padding:2rem;transition:background 0.2s}
.article-item:hover{background:var(--gray-100)}
.article-item a{display:block}
.article-pillar{font-family:var(--sans);font-size:10px;font-weight:500;letter-spacing:0.1em;text-transform:uppercase;color:var(--accent);margin-bottom:0.5rem}
.article-item time{font-family:var(--sans);font-size:10px;color:var(--gray-500)}
.article-item h3{font-family:var(--sans);font-size:15px;font-weight:500;margin:0.5rem 0;line-height:1.5}
.article-item p{font-family:var(--sans);font-size:13px;color:var(--gray-500);line-height:1.6;font-weight:400}

/* ============ MEMBERS ============ */
.members-header{padding:4rem 2.5rem;border-bottom:4px solid var(--black)}
.members-header h1{font-family:var(--serif);font-size:clamp(2rem,4vw,2.5rem);font-weight:300}
.member-profile{
  display:grid;grid-template-columns:280px 1fr;gap:4rem;
  padding:4rem 2.5rem;border-bottom:1px solid var(--gray-200);
}
.member-photo img{width:100%;aspect-ratio:3/4;object-fit:cover;object-position:center top;filter:grayscale(20%)}
.member-name{font-family:var(--sans);font-size:20px;font-weight:600;margin-bottom:0.25rem}
.member-title{font-family:var(--sans);font-size:14px;color:var(--gray-500);font-weight:400;letter-spacing:0.02em;margin-bottom:2rem}
.member-bio{font-family:var(--sans);font-size:15px;line-height:1.9;color:var(--black);font-weight:400}
.member-bio p{margin-bottom:1rem}
.member-bio a{color:var(--black);text-decoration:underline;text-underline-offset:2px}
.member-bio a:hover{color:var(--gray-500)}
.member-links{display:flex;gap:1rem;align-items:center;margin-top:1.5rem}
.member-social{display:inline-flex;align-items:center;color:var(--black);transition:color 0.15s}
.member-social:hover{color:var(--gray-500)}
.member-social-text{font-family:var(--sans);font-size:14px;font-weight:500;text-decoration:underline;text-underline-offset:2px}

/* ============ BLOG (JIWA) ============ */
.blog-header{padding:4rem 2.5rem;border-bottom:4px solid var(--black)}
.blog-header h1{font-family:var(--serif);font-size:clamp(2rem,4vw,2.5rem);font-weight:300}
.blog-header p{font-family:var(--sans);font-size:15px;color:var(--black);margin-top:0.5rem;font-weight:400}
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--gray-200);border-bottom:1px solid var(--gray-200)}
.blog-item{background:var(--white);padding:2.5rem;transition:background 0.2s}
.blog-item:hover{background:var(--gray-100)}
.blog-item a{display:block}
.blog-item time{font-family:var(--sans);font-size:10px;color:var(--gray-500)}
.blog-item h2{font-family:var(--sans);font-size:16px;font-weight:500;margin:0.5rem 0;line-height:1.5}
.blog-item p{font-family:var(--sans);font-size:13px;color:var(--gray-500);line-height:1.6;font-weight:400}

/* BLOG SINGLE */
.blog-hero{
  padding:6rem 2.5rem 4rem;color:#fff;position:relative;
}
.blog-hero-inner{max-width:var(--content-w);margin:0 auto;position:relative}
.blog-hero-label{
  display:inline-block;font-family:var(--sans);font-size:11px;font-weight:600;
  letter-spacing:0.1em;text-transform:uppercase;
  padding:0.3rem 0.8rem;border:1px solid rgba(255,255,255,0.3);
  color:rgba(255,255,255,0.8);margin-bottom:1.5rem;
}
.blog-hero-title{
  font-family:var(--sans);font-size:clamp(1.5rem,3vw,2.25rem);
  font-weight:700;line-height:1.4;max-width:20em;
}
.blog-hero-meta{font-family:var(--sans);font-size:13px;color:rgba(255,255,255,0.6);margin-top:1rem}
.blog-single{max-width:var(--content-w);margin:0 auto;padding:4rem 2.5rem}
.blog-single header{margin-bottom:3rem}
.blog-single h1{font-family:var(--serif);font-size:clamp(1.5rem,3vw,2.25rem);font-weight:400;line-height:1.35;margin-bottom:1rem}
.blog-single .meta{font-family:var(--sans);font-size:11px;color:var(--gray-500)}
.blog-single .content{font-family:var(--sans);font-size:16px;line-height:1.9;font-weight:400}
.blog-single .content h2{font-family:var(--sans);font-size:1.375rem;font-weight:600;margin:3rem 0 1rem;padding-bottom:0.5rem;border-bottom:1px solid var(--gray-200)}
.blog-single .content h3{font-family:var(--sans);font-size:1.125rem;font-weight:600;margin:2rem 0 0.75rem}
.blog-single .content p{margin-bottom:1.5rem}
.blog-single .content ul,.blog-single .content ol{margin:1rem 0 1.5rem 1.5rem}
.blog-single .content li{margin-bottom:0.5rem}
.blog-single .content blockquote{border-left:3px solid var(--black);padding:1rem 1.5rem;margin:1.5rem 0;font-style:italic}
.blog-single .content table{width:100%;border-collapse:collapse;margin:1.5rem 0;font-size:14px}
.blog-single .content th,.blog-single .content td{padding:0.6rem 1rem;border:1px solid var(--gray-200);text-align:left}
.blog-single .content th{font-weight:600;background:var(--gray-100)}
.blog-single .content pre{background:#1a1a1a;color:#e5e5e5;padding:1.5rem;overflow-x:auto;margin:1.5rem 0;font-size:14px}
.blog-single .content code{font-size:0.9em;background:var(--gray-100);padding:0.15rem 0.4rem}
.blog-single .content pre code{background:none;padding:0}
.blog-single .back{display:inline-block;margin-top:3rem;font-family:var(--sans);font-size:11px;color:var(--gray-500);letter-spacing:0.05em}

/* HAMBURGER */
.nav-hamburger{display:none}

/* RESPONSIVE */
@media(max-width:768px){
  .nav{padding:0 1.5rem}
  .nav-links{gap:1rem}
  .nav-links a{font-size:13px}
  .hero,.two-col-left,.two-col-right,.home-latest,.members-header,.blog-header{padding-left:1.5rem;padding-right:1.5rem}
  .two-col{grid-template-columns:1fr}
  .two-col-left{border-right:none;border-bottom:1px solid var(--gray-200)}
  .stats-row{grid-template-columns:repeat(2,1fr)}
  .stat-cell:nth-child(2){border-right:none}
  .cards{grid-template-columns:1fr}
  .card{border-right:none;border-bottom:1px solid var(--gray-200)}
  .articles-grid,.blog-grid{grid-template-columns:1fr}
  .members-grid{grid-template-columns:repeat(2,1fr)}
  .member-profile{grid-template-columns:1fr;gap:2rem;padding:2.5rem 1.5rem}
  .member-photo img{max-width:200px}
  .member:nth-child(2n){border-right:none}
  .footer{padding:1.5rem}
}
