/* Inter – self-hosted variable font */
@font-face {
  font-family: "Inter";
  src: url("/fonts/inter/InterVariable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("/fonts/inter/InterVariable-Italic.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

/* Noto Sans JP – self-hosted */
@font-face {
  font-family: "Noto Sans JP";
  src: url("/fonts/noto-sans-jp/noto-sans-jp-japanese-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Noto Sans JP";
  src: url("/fonts/noto-sans-jp/noto-sans-jp-japanese-500-normal.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Noto Sans JP";
  src: url("/fonts/noto-sans-jp/noto-sans-jp-japanese-700-normal.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root{
 --font-sans: "Inter", system-ui, -apple-system, BlinkMacSystemFont,
               "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --bg:#fafafa;
  --fg:#111111;
  --muted:#666666;
  --accent:#1f3a5f;
  --max:70ch;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--fg);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

html[lang="en"] body {
  font-family: var(--font-sans);
}

html[lang="ja"] body {
  font-family: "Noto Sans JP", var(--font-sans);
}


a{ color:var(--accent); text-decoration:none; }
a:hover{ text-decoration:underline; }

.wrap{ max-width: calc(var(--max) + 6rem); margin:0 auto; padding: 2.5rem 1.5rem; }
main{ max-width: var(--max); }

header.site{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid rgba(0,0,0,.08);
  margin-bottom: 2rem;
}

.brand{
  font-weight:500;
  letter-spacing:.2px;
  font-size: 1.05rem;
}

nav a{ margin-left: 1rem; color: var(--fg); opacity:.85; }
nav a:hover{ opacity:1; }

.hero h1{
  font-size: clamp(2.1rem, 4vw, 2.8rem);
  line-height:1.2;
  font-weight:500;
  letter-spacing:-0.02em;
  margin: 0 0 1rem 0;
}

.hero p.lead{
  margin:0 0 1.75rem 0;
  color: var(--muted);
  font-size: 1.05rem;
}

.grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  margin-top: 2rem;
}

.card{
  padding: 1.25rem 1.25rem;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 14px;
  background: rgba(255,255,255,.55);
}

.card h2{
  font-size: 1.25rem;
  font-weight:500;
  margin:0 0 .5rem 0;
}

.card p{ margin:0; color: var(--muted); }

.section-title{
  margin-top: 2.5rem;
  font-size: 1.4rem;
  font-weight:500;
}

ul.philo{
  padding-left: 1.2rem;
  color: var(--muted);
}

footer.site{
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(0,0,0,.08);
  color: var(--muted);
  font-size:.9rem;
  display:flex;
  justify-content:space-between;
  gap:1rem;
  flex-wrap:wrap;
}

/* Japanese typography fallback */
:lang(ja) {
  font-family: var(--font-sans), "Hiragino Sans", "Yu Gothic", "Noto Sans JP", system-ui, sans-serif;
}