html, body { height: 100%; }
body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family: "Noto Sans JP", system-ui, -apple-system, BlinkMacSystemFont, "Hiragino Sans", sans-serif;
  line-height:1.9;
  letter-spacing: .02em;
}

a{ color:inherit; text-decoration:none; }
a:hover{ text-decoration:underline; }

.container{
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--space-4);
}

.section{
  padding: var(--space-7) 0;
}

hr.sep{
  border:0;
  border-top:1px solid var(--line);
  margin: var(--space-6) 0;
}


/* ===== Theme tweak: off-white + subtle future gradient ===== */
html, body{
  background:
    radial-gradient(900px 600px at 18% 12%, rgba(240,161,74,.14), transparent 60%),
    radial-gradient(900px 600px at 78% 22%, rgba(80,180,255,.10), transparent 62%),
    linear-gradient(180deg, #f6f4ef 0%, #f1eee6 55%, #efece3 100%);
  color: #121212;
}

/* ===== Density tuning: fit one-screen better (desktop + mobile) ===== */
:root{
  --lh: 1.62;
  --lh-tight: 1.35;
  --sp-1: 8px;
  --sp-2: 12px;
  --sp-3: 16px;
  --sp-4: 20px;
  --sp-5: 28px;
}

body{ line-height: var(--lh); }

/* headings */
h1{ line-height: 1.18; margin: 0 0 var(--sp-3) 0; }
h2{ line-height: 1.22; margin: 0 0 var(--sp-2) 0; }
h3{ line-height: 1.25; margin: 0 0 var(--sp-2) 0; }

/* paragraphs + lists */
p{ margin: 0 0 var(--sp-2) 0; }
ul,ol{ margin: 0 0 var(--sp-2) 1.1em; }
li{ margin: 0 0 6px 0; }

/* generic section spacing (works even if markup differs) */
section{ padding: var(--sp-4) 0; }
hr{ margin: var(--sp-4) 0; opacity:.35; }

/* reduce excessive manual <br><br> spacing */
br + br{ display:none; }

/* container padding */
.container{ padding-left: 18px; padding-right: 18px; }

/* card density */
.card{ padding: 22px !important; }
.card__kicker{ margin-bottom: 10px !important; letter-spacing:.08em; }
.card__title{ margin-bottom: 12px !important; }
.card__text{ margin-top: 0 !important; }

/* buttons row */
.btnrow{ gap: 10px !important; }
.btn{ padding: 10px 14px !important; }

/* media blocks inside cards */
.media{ margin-top: 16px !important; }
.media img{ display:block; width:100%; height:auto; }

/* ===== Mobile tighter ===== */
@media (max-width: 820px){
  :root{
    --lh: 1.55;
    --sp-1: 6px;
    --sp-2: 10px;
    --sp-3: 14px;
    --sp-4: 16px;
    --sp-5: 22px;
  }

  .container{ padding-left: 14px; padding-right: 14px; }
  section{ padding: var(--sp-3) 0; }
  .card{ padding: 18px !important; }
  .btn{ padding: 10px 12px !important; }
}

/* ===== Cyber Blue Theme (Global) ===== */
html, body{
  background:
    radial-gradient(1200px 800px at 70% 20%, rgba(70,140,200,.20), transparent 60%),
    radial-gradient(900px 600px at 20% 10%, rgba(120,200,255,.14), transparent 55%),
    linear-gradient(180deg, #0e1116 0%, #0f1620 45%, #0e1116 100%);
  color: #e6e8eb;
}

/* text contrast */
h1, h2, h3{ color:#f4f7fb; }
p, li{ color: rgba(230,232,235,.84); }
small, .muted{ color: rgba(230,232,235,.60); }