/* World Moral Organization — site styles */
:root {
  --ink: #12192B;
  --navy: #1B2A4A;
  --navy-2: #24365E;
  --gold: #C9A227;
  --gold-2: #E2C266;
  --gold-soft: #F4E9C6;
  --cream: #FAF7F0;
  --paper: #FFFFFF;
  --line: #E6E1D6;
  --stone: #5F6673;
  --muted: #8A909B;
  --max: 1160px;
  --radius: 14px;
  --serif: "Cormorant Garamond", "Noto Serif SC", "Noto Serif TC", "Noto Serif JP", "Noto Serif KR", "Songti SC", "Hiragino Mincho ProN", "Yu Mincho", "Apple Myungjo", Georgia, "Times New Roman", serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "PingFang TC", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Apple SD Gothic Neo", "Noto Sans CJK SC", "Noto Sans CJK TC", "Noto Sans CJK JP", "Noto Sans CJK KR", "Microsoft YaHei", Roboto, Helvetica, Arial, sans-serif;
}
html[lang^="zh"], html[lang="ja"], html[lang="ko"] {
  --serif: "Noto Serif SC", "Noto Serif TC", "Noto Serif JP", "Noto Serif KR", "Songti SC", "STSong", "Hiragino Mincho ProN", "Yu Mincho", "Apple Myungjo", "Cormorant Garamond", Georgia, serif;
}
html[lang="zh-TW"] { --serif: "Noto Serif TC", "Songti TC", "PingFang TC", "Cormorant Garamond", Georgia, serif; }
html[lang="ja"] { --serif: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", "Cormorant Garamond", Georgia, serif; }
html[lang="ko"] { --serif: "Noto Serif KR", "Apple Myungjo", "Nanum Myeongjo", "Cormorant Garamond", Georgia, serif; }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; display: block; }
a { color: var(--navy); text-decoration: none; }
a:hover { color: var(--gold); }
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 600; line-height: 1.2; margin: 0 0 .5em; color: var(--navy); letter-spacing: -.005em; }
h1 { font-size: clamp(2.3rem, 5vw, 3.9rem); }
h2 { font-size: clamp(1.8rem, 3.2vw, 2.6rem); }
h3 { font-size: 1.35rem; }
p { margin: 0 0 1.1em; }
.wrap { width: min(var(--max), 100% - 2.5rem); margin-inline: auto; }
.eyebrow {
  display: inline-flex; align-items: center; gap: .6rem;
  font-size: .78rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--gold); font-weight: 600; margin-bottom: 1.1rem;
}
.eyebrow::before { content: ""; width: 28px; height: 1px; background: var(--gold); }
.lead { font-size: 1.2rem; color: var(--stone); max-width: 60ch; }
.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .85rem 1.5rem; border-radius: 999px; font-weight: 600; font-size: .95rem;
  border: 1.5px solid var(--navy); color: var(--navy); background: transparent;
  transition: transform .18s ease, background .18s ease, color .18s ease, box-shadow .18s ease;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 10px 24px -14px rgba(27,42,74,.6); color: var(--navy); }
.btn-primary { background: var(--navy); color: #fff; }
.btn-primary:hover { background: var(--navy-2); color: #fff; }
.btn-gold { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.btn-gold:hover { background: var(--gold-2); border-color: var(--gold-2); color: var(--ink); }
.btn-ghost { border-color: rgba(255,255,255,.5); color: #fff; }
.btn-ghost:hover { background: rgba(255,255,255,.1); color: #fff; }

/* Skip link */
.skip { position: absolute; left: -999px; top: 0; background: var(--gold); color: var(--ink); padding: .5rem 1rem; z-index: 100; }
.skip:focus { left: 1rem; top: 1rem; }

/* Header */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(250,247,240,.86);
  backdrop-filter: saturate(160%) blur(12px);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--line);
}
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; height: 74px; }
.brand { display: flex; align-items: center; gap: .8rem; color: var(--navy); min-width: 0; }
.brand img { width: 44px; height: 44px; flex: none; }
.brand-text { display: flex; flex-direction: column; line-height: 1.1; min-width: 0; }
.brand-name { font-family: var(--serif); font-weight: 700; font-size: 1.15rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brand-sub { font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); font-weight: 600; }
.nav { display: flex; align-items: center; gap: 1.6rem; }
.nav a { font-weight: 500; font-size: .95rem; position: relative; padding: .3rem 0; }
.nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform .2s ease; }
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }
.nav a[aria-current="page"] { color: var(--navy); }
.lang { position: relative; }
.lang-btn {
  display: inline-flex; align-items: center; gap: .45rem; cursor: pointer;
  padding: .45rem .9rem; border-radius: 999px; border: 1px solid var(--line);
  background: var(--paper); font: inherit; font-size: .88rem; font-weight: 500; color: var(--navy);
}
.lang-btn svg { width: 16px; height: 16px; }
.lang-menu {
  position: absolute; right: 0; top: calc(100% + 8px); min-width: 190px;
  background: var(--paper); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 20px 40px -20px rgba(18,25,43,.35); padding: .4rem; margin: 0; list-style: none;
  display: none;
}
.lang-menu.open { display: block; }
.lang-menu a { display: flex; justify-content: space-between; align-items: center; padding: .55rem .8rem; border-radius: 8px; font-size: .92rem; }
.lang-menu a:hover { background: var(--cream); color: var(--navy); }
.lang-menu a[aria-current="true"] { color: var(--gold); font-weight: 600; }
.menu-toggle { display: none; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); cursor: pointer; align-items: center; justify-content: center; }
.menu-toggle span { display: block; width: 18px; height: 2px; background: var(--navy); position: relative; }
.menu-toggle span::before, .menu-toggle span::after { content: ""; position: absolute; left: 0; width: 18px; height: 2px; background: var(--navy); }
.menu-toggle span::before { top: -6px; } .menu-toggle span::after { top: 6px; }

/* Hero */
.hero { position: relative; overflow: hidden; background: var(--navy); color: #fff; }
.hero::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(900px 500px at 85% 20%, rgba(201,162,39,.25), transparent 60%),
    radial-gradient(700px 500px at 10% 100%, rgba(255,255,255,.08), transparent 60%);
  pointer-events: none;
}
.hero-inner { position: relative; display: grid; grid-template-columns: 1.15fr .85fr; gap: 3rem; align-items: center; padding: clamp(4rem, 9vw, 7.5rem) 0; }
.hero h1 { color: #fff; margin-bottom: 1.2rem; }
.hero .eyebrow { color: var(--gold-2); }
.hero .eyebrow::before { background: var(--gold-2); }
.hero .lead { color: rgba(255,255,255,.8); font-size: 1.22rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; }
.hero-art { position: relative; aspect-ratio: 1; max-width: 420px; margin-inline: auto; width: 100%; }
.hero-art svg { width: 100%; height: 100%; }
.hero-art .rot { transform-origin: 50% 50%; animation: spin 90s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .hero-art .rot { animation: none; } }
.hero-quote { border-top: 1px solid rgba(255,255,255,.15); position: relative; }
.hero-quote blockquote { margin: 0; padding: 1.6rem 0; font-family: var(--serif); font-size: 1.25rem; font-style: italic; color: rgba(255,255,255,.85); }
.hero-quote cite { display: block; font-style: normal; font-family: var(--sans); font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-2); margin-top: .5rem; }

/* Sections */
.section { padding: clamp(3.5rem, 7vw, 6rem) 0; }
.section-head { max-width: 62ch; margin-bottom: 2.6rem; }
.section-head .lead { margin-bottom: 0; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.4rem; }
.card {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.8rem; position: relative; overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease;
}
.card:hover { transform: translateY(-4px); box-shadow: 0 30px 50px -30px rgba(27,42,74,.35); }
.card h3 { margin-top: .9rem; }
.card p { color: var(--stone); margin-bottom: 0; font-size: .98rem; }
.card-num { font-family: var(--serif); font-size: 2.4rem; line-height: 1; color: var(--gold); font-weight: 600; }
.icon { width: 44px; height: 44px; border-radius: 12px; background: var(--gold-soft); color: var(--navy); display: grid; place-items: center; }
.icon svg { width: 22px; height: 22px; }

.chapters { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.chapter { background: var(--paper); padding: 1.5rem 1.6rem; transition: background .2s ease; }
.chapter:hover { background: var(--cream); }
.chapter .n { font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); font-weight: 600; }
.chapter h3 { font-size: 1.15rem; margin: .35rem 0 .4rem; }
.chapter p { font-size: .93rem; color: var(--stone); margin: 0; }

.band { background: var(--navy); color: #fff; }
.band h2 { color: #fff; }
.band p { color: rgba(255,255,255,.8); }
.band .eyebrow { color: var(--gold-2); } .band .eyebrow::before { background: var(--gold-2); }
.band-inner { display: grid; grid-template-columns: 1.1fr .9fr; gap: 3rem; align-items: center; }
.org-list { display: grid; gap: .8rem; margin: 0; padding: 0; list-style: none; }
.org-list li { display: flex; gap: 1rem; align-items: flex-start; padding: 1rem 1.2rem; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: 12px; }
.org-list b { display: block; color: #fff; font-family: var(--serif); font-size: 1.1rem; }
.org-list span { font-size: .9rem; color: rgba(255,255,255,.72); }
.org-list .tag { flex: none; font-size: .7rem; letter-spacing: .12em; font-weight: 700; color: var(--gold-2); border: 1px solid rgba(226,194,102,.5); border-radius: 6px; padding: .2rem .45rem; margin-top: .25rem; }

.cta { text-align: center; padding: clamp(3.5rem, 7vw, 6rem) 0; }
.cta h2 { max-width: 24ch; margin-inline: auto; }
.cta .lead { margin-inline: auto; }

/* Page header (inner pages) */
.page-head { background: var(--paper); border-bottom: 1px solid var(--line); padding: clamp(3rem, 6vw, 5rem) 0 clamp(2rem, 4vw, 3rem); }
.page-head h1 { max-width: 22ch; font-size: clamp(2rem, 4vw, 3.2rem); }
.page-head .meta { display: flex; flex-wrap: wrap; gap: .6rem 1.4rem; margin-top: 1.2rem; font-size: .88rem; color: var(--muted); }
.page-head .meta b { color: var(--stone); font-weight: 600; }

/* Document layout (standard page) */
.doc { display: grid; grid-template-columns: 260px 1fr; gap: 3.5rem; align-items: start; padding: clamp(2.5rem, 5vw, 4rem) 0; }
.toc { position: sticky; top: 94px; font-size: .9rem; }
.toc-title { font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); font-weight: 700; margin-bottom: .8rem; }
.toc ol { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--line); }
.toc li a { display: block; padding: .4rem .9rem; color: var(--stone); border-left: 2px solid transparent; margin-left: -1px; line-height: 1.35; }
.toc li a:hover, .toc li a.active { color: var(--navy); border-left-color: var(--gold); }
.prose { max-width: 72ch; }
.prose h2 { scroll-margin-top: 100px; padding-top: 1.2rem; margin-top: 1.4rem; border-top: 1px solid var(--line); font-size: 1.7rem; }
.prose h2:first-of-type { border-top: 0; margin-top: 0; padding-top: 0; }
.prose h3 { font-size: 1.12rem; margin-top: 1.6rem; color: var(--navy); font-family: var(--sans); font-weight: 700; }
.prose p, .prose li { color: #2E3542; }
.prose ol, .prose ul { padding-left: 1.4rem; }
.prose li { margin-bottom: .45rem; }
.prose ol.roman { list-style: none; padding-left: 0; counter-reset: c; }
.prose ol.roman li { counter-increment: c; padding-left: 2.4rem; position: relative; }
.prose ol.roman li::before { content: "(" counter(c) ")"; position: absolute; left: 0; color: var(--gold); font-weight: 600; font-family: var(--serif); }
.callout { background: var(--paper); border: 1px solid var(--line); border-left: 4px solid var(--gold); border-radius: 10px; padding: 1.1rem 1.3rem; margin: 1.4rem 0; }
.callout p:last-child { margin-bottom: 0; }
.callout-dark { background: var(--navy); border-color: var(--navy); color: #fff; }
.callout-dark p { color: rgba(255,255,255,.88); }
.callout-dark a { color: var(--gold-2); text-decoration: underline; }
.principle { display: grid; grid-template-columns: 56px 1fr; gap: 1rem; padding: 1.2rem 0; border-bottom: 1px dashed var(--line); }
.principle:last-child { border-bottom: 0; }
.principle .k { font-family: var(--serif); font-size: 1.8rem; color: var(--gold); line-height: 1; font-weight: 600; }
.principle p { margin: 0; }
.principle b { display: block; color: var(--navy); margin-bottom: .2rem; }

/* About */
.facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-top: 2rem; }
.fact { background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: 1.2rem; }
.fact .v { font-family: var(--serif); font-size: 2rem; color: var(--navy); font-weight: 600; line-height: 1.1; }
.fact .l { font-size: .85rem; color: var(--stone); margin-top: .3rem; }
.timeline { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--gold-soft); }
.timeline li { position: relative; padding: 0 0 1.4rem 1.6rem; }
.timeline li::before { content: ""; position: absolute; left: -7px; top: .45rem; width: 12px; height: 12px; border-radius: 50%; background: var(--gold); border: 2px solid var(--cream); }
.timeline b { display: block; color: var(--navy); }
.timeline span { color: var(--stone); font-size: .95rem; }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: start; }

/* Contact */
.contact-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
.contact-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.8rem; }
.contact-card h3 { font-family: var(--sans); font-size: 1rem; font-weight: 700; margin-top: .9rem; }
.contact-card p { color: var(--stone); margin-bottom: 0; font-size: .96rem; }
.contact-card a { word-break: break-all; }

/* Footer */
.site-footer { background: var(--ink); color: rgba(255,255,255,.75); padding: 3.5rem 0 2rem; font-size: .92rem; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 2.5rem; }
.site-footer h4 { color: #fff; font-family: var(--sans); font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; margin-bottom: 1rem; }
.site-footer a { color: rgba(255,255,255,.75); }
.site-footer a:hover { color: var(--gold-2); }
.site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }
.footer-brand { display: flex; align-items: center; gap: .8rem; color: #fff; font-family: var(--serif); font-size: 1.15rem; font-weight: 700; margin-bottom: 1rem; }
.footer-brand img { width: 40px; height: 40px; }
.footer-bottom { margin-top: 2.5rem; padding-top: 1.4rem; border-top: 1px solid rgba(255,255,255,.12); display: flex; flex-wrap: wrap; gap: .8rem 1.5rem; justify-content: space-between; font-size: .82rem; color: rgba(255,255,255,.5); }
.footer-langs { display: flex; flex-wrap: wrap; gap: .4rem 1rem; }

/* Landing (language chooser) */
.landing { min-height: 100vh; display: grid; place-items: center; background: var(--navy); color: #fff; padding: 2rem 1rem; text-align: center; }
.landing img { width: 88px; height: 88px; margin: 0 auto 1.2rem; }
.landing h1 { color: #fff; font-size: clamp(1.8rem, 4vw, 2.6rem); }
.landing p { color: rgba(255,255,255,.7); }
.landing-langs { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .7rem; max-width: 720px; margin: 2rem auto 0; }
.landing-langs a { display: block; padding: .9rem 1rem; border: 1px solid rgba(255,255,255,.2); border-radius: 12px; color: #fff; background: rgba(255,255,255,.05); transition: background .2s ease, border-color .2s ease; }
.landing-langs a:hover { background: rgba(201,162,39,.2); border-color: var(--gold-2); color: #fff; }
.landing-langs small { display: block; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-2); margin-top: .2rem; }

/* Reveal animation */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

/* Responsive */
@media (max-width: 1024px) {
  .hero-inner { grid-template-columns: 1fr; text-align: left; }
  .hero-art { max-width: 300px; }
  .grid-3, .chapters, .contact-grid { grid-template-columns: repeat(2, 1fr); }
  .facts { grid-template-columns: repeat(2, 1fr); }
  .band-inner, .split { grid-template-columns: 1fr; gap: 2rem; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .doc { grid-template-columns: 1fr; gap: 2rem; }
  .toc { position: static; }
  .toc ol { display: flex; flex-wrap: wrap; gap: .3rem; border: 0; }
  .toc li a { border: 1px solid var(--line); border-radius: 999px; padding: .35rem .8rem; margin: 0; background: var(--paper); }
  .toc li a.active { border-color: var(--gold); }
}
@media (max-width: 760px) {
  body { font-size: 16px; }
  .header-inner { height: 66px; }
  .brand img { width: 38px; height: 38px; }
  .brand-name { font-size: 1rem; }
  .menu-toggle { display: inline-flex; }
  .nav { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch; gap: 0; background: var(--paper); border-bottom: 1px solid var(--line); padding: .5rem 1.25rem 1rem; }
  .nav.open { display: flex; }
  .nav a { padding: .8rem 0; border-bottom: 1px solid var(--line); }
  .nav a::after { display: none; }
  .grid-3, .grid-2, .chapters, .contact-grid, .facts, .footer-grid { grid-template-columns: 1fr; }
  .hero-actions .btn { width: 100%; justify-content: center; }
  .hero-art { max-width: 220px; }
  .principle { grid-template-columns: 44px 1fr; }
}

/* Timeline inside dark band */
.band .timeline b { color: #fff; }
.band .timeline span { color: rgba(255,255,255,.72); }
.band .timeline li::before { border-color: var(--navy); }

/* 2026-09-12: family links, trademark line */
.org-list b a { color: #fff; }
.org-list b a:hover { color: var(--gold-2); }
.footer-brand small { display: block; font-size: .72rem; font-weight: 400; font-family: var(--sans); letter-spacing: .04em; color: rgba(255,255,255,.55); margin-top: .15rem; }
a.card { display: block; color: inherit; }
a.card:hover h3 { color: var(--gold); }