:root{
  --bg: #f7f1e3;
  --bg-alt: #edf1de;
  --panel: #ffffff;
  --ink: #2b2a1f;
  --ink-soft: #5a5744;
  --forest: #2f6b4f;
  --forest-deep: #1f4d38;
  --amber: #d98c1f;
  --amber-soft: #f3c56a;
  --ocean: #2f7797;
  --clay: #bd5b2a;
  --border: rgba(43,42,31,0.10);
  --shadow: 0 10px 30px rgba(31,77,56,0.10);
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg: #101d16;
    --bg-alt: #16261c;
    --panel: #17281f;
    --ink: #eef2e4;
    --ink-soft: #b7c2ab;
    --forest: #6fbf94;
    --forest-deep: #8fd6ac;
    --amber: #f0b955;
    --amber-soft: #a97a2c;
    --ocean: #7fc4e6;
    --clay: #e08c5f;
    --border: rgba(238,242,228,0.10);
    --shadow: 0 10px 30px rgba(0,0,0,0.35);
  }
}

*{ box-sizing: border-box; }
html,body{ margin:0; padding:0; }
body{
  background: var(--bg);
  color: var(--ink);
  font-family: ui-sans-serif, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
h1,h2,h3{
  font-family: Georgia, "Iowan Old Style", "Palatino Linotype", serif;
  color: var(--forest-deep);
  line-height: 1.15;
  margin: 0 0 .4em;
}
a{ color: var(--ocean); }
.wrap{ max-width: 880px; margin: 0 auto; padding: 0 24px; }

/* ---------- Language switcher ---------- */
.langs{
  position: relative;
  z-index: 4;
  display: flex;
  justify-content: center;
  gap: 4px;
  padding-top: 22px;
  font-size: .82rem;
}
.langs a{
  padding: 4px 10px;
  border-radius: 999px;
  color: var(--ink-soft);
  text-decoration: none;
  border: 1px solid transparent;
}
.langs a[aria-current="true"]{
  color: var(--forest-deep);
  border-color: var(--border);
  background: var(--panel);
  font-weight: 700;
}
.langs a.disabled{
  opacity: .45;
  pointer-events: none;
}

/* ---------- Hero ---------- */
.hero{
  position: relative;
  overflow: hidden;
  padding: 28px 0 140px;
  background: linear-gradient(180deg, var(--bg) 0%, var(--bg-alt) 100%);
}
.hero-decor{
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.hero-inner{
  position: relative;
  z-index: 2;
  text-align: center;
  padding-top: 46px;
}
.sun{
  margin: 0 auto 28px;
  width: 74px; height: 74px;
}
.hero h1{
  font-size: clamp(2.6rem, 6vw, 4rem);
  letter-spacing: .01em;
}
.hero .role{
  color: var(--ink-soft);
  font-size: 1.05rem;
  margin-bottom: 22px;
}
.tags{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 6px;
}
.tag{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 999px;
  background: var(--panel);
  border: 1px solid var(--border);
  color: var(--forest-deep);
  font-size: .88rem;
  box-shadow: var(--shadow);
}
.hills{
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  width: 100%; height: auto;
  display: block;
}

/* ---------- Sections ---------- */
section.block{ padding: 64px 0; }
.card{
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 22px;
  box-shadow: var(--shadow);
  padding: 40px clamp(20px, 5vw, 48px);
}
.eyebrow{
  display: inline-block;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--forest);
  font-weight: 700;
  margin-bottom: 10px;
}
.about-card{ margin-top: -84px; position: relative; z-index: 3; }
.about-card p{ font-size: 1.08rem; color: var(--ink); margin: 0; }
.leaf{
  width: 34px; height: 34px;
  margin-bottom: 14px;
}

/* ---------- Notice banner (e.g. "translation coming") ---------- */
.notice{
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--amber-soft);
  color: var(--forest-deep);
  border-radius: 14px;
  padding: 12px 18px;
  font-size: .92rem;
  margin-bottom: 28px;
}

/* ---------- Yui ---------- */
.yui{
  background:
    radial-gradient(1200px 400px at 10% -10%, rgba(47,119,151,0.10), transparent 60%),
    var(--bg-alt);
  border-radius: 28px;
  padding: 56px clamp(20px, 5vw, 56px);
  border: 1px solid var(--border);
}
.yui-head{ text-align: center; margin-bottom: 8px; }
.badge{
  display: inline-block;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-weight: 700;
  color: var(--ocean);
  border: 1px solid var(--ocean);
  border-radius: 999px;
  padding: 3px 10px;
  margin-bottom: 12px;
}
.yui h2{ font-size: clamp(1.8rem, 4vw, 2.4rem); }
blockquote.pull{
  margin: 22px auto 8px;
  max-width: 620px;
  text-align: center;
  font-family: Georgia, "Iowan Old Style", serif;
  font-style: italic;
  font-size: 1.25rem;
  color: var(--forest-deep);
  border: none;
  padding: 0;
}
.yui-lead{
  max-width: 640px;
  margin: 18px auto 36px;
  text-align: center;
  color: var(--ink-soft);
}
.pillars{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin: 8px 0 32px;
}
@media (max-width: 720px){ .pillars{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px){ .pillars{ grid-template-columns: 1fr; } }
.pillar{
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 18px 18px;
}
.pillar h3{
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: .98rem;
  color: var(--ink);
  margin-bottom: 6px;
}
.pillar p{
  font-size: .88rem;
  color: var(--ink-soft);
  margin: 0;
}
.dot{
  display:inline-block; width:8px; height:8px; border-radius:50%;
  margin-right:8px;
}
.dot.forest{ background: var(--forest); }
.dot.amber{ background: var(--amber); }
.dot.ocean{ background: var(--ocean); }
.dot.clay{ background: var(--clay); }

.chips{
  display: flex; flex-wrap: wrap; gap: 8px;
  justify-content: center;
  margin: 6px 0 18px;
}
.chip{
  font-size: .78rem;
  padding: 5px 11px;
  border-radius: 8px;
  background: var(--panel);
  border: 1px solid var(--border);
  color: var(--ink-soft);
}
.status{
  text-align: center;
  font-size: .92rem;
  color: var(--ink-soft);
}
.status strong{ color: var(--clay); }

footer{
  text-align: center;
  padding: 48px 24px 64px;
  color: var(--ink-soft);
  font-size: .88rem;
}