/* ======================================================
   Design Tokens (2026-ready)
====================================================== */
:root {
  color-scheme: light dark;

  --bg: #ffffff;
  --fg: #555555;
  --muted: #777777;

  --primary: #669900;
  --link: #0099ff;

  --radius-sm: 0.313em;
  --radius-md: 0.625em;
  --radius-lg: 0.938em;

  --shadow-sm: 0 2px 6px rgba(0,0,0,0.12);
  --shadow-md: 0 8px 20px rgba(0,0,0,0.18);

  --font-mono: "Courier New", Courier, "Lucida Sans Typewriter",
               "Lucida Typewriter", monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0e1116;
    --fg: #d6d9df;
    --muted: #9aa0aa;
    --shadow-sm: 0 2px 8px rgba(0,0,0,0.4);
    --shadow-md: 0 12px 30px rgba(0,0,0,0.6);
  }
}

/* ======================================================
   Base
====================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  background-color: var(--bg);
  color: var(--fg);
  font-size: 1em;
  line-height: 1.6;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

/* ======================================================
   Layout Wrapper
====================================================== */
.jae1982 {
  background-color: var(--bg);
  max-width: 64em;
  margin-inline: auto;
  padding-inline: 1em;
  font-family: var(--font-mono);
}

/* ======================================================
   Header
====================================================== */
.jae1982__header {
  background: center / cover no-repeat;
}


.jae1982__header__img {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  position: relative;
}

/* ======================================================
   Containers
====================================================== */
.jae1982__container {
  padding-top: 0.625em;
  margin-bottom: 0.625em;
}

.jae1982__container__topbox {
  background-color: #ccc;
  color: #333;
  border-radius: var(--radius-lg);
  margin-bottom: 0.625em;
  padding: 0.625em;
}

.jae1982__container__bottombox {
  background-color: #333;
  color: #ccc;
  border-radius: var(--radius-lg);
  padding: 0.625em;
}

.jae1982__container__widebox {
  background-color: var(--bg);
  border-radius: var(--radius-lg);
  border: 1px solid var(--primary);
  padding: 0.625em;
}

.jae1982__container__lefthalf {
  margin-right: 0.625em !important;
}

/* ======================================================
   Media
====================================================== */
img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* ======================================================
   Card Component
====================================================== */
.card {
  border-radius: var(--radius-md);
  padding: 0.625em;
  margin-bottom: 0.938em;
  background-color: var(--bg);
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.25s ease, transform 0.2s ease;
}

.card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.card--noeffect {
  box-shadow: none;
  transform: none;
}

.card__color--green {
  background-color: var(--primary);
  color: #fff;
}

/* ======================================================
   Container Utility
====================================================== */
.container {
  padding: 0.5em 1em;
  background-color: var(--bg);
  border-radius: var(--radius-sm);
}

.container--footer {
  text-align: center;
  color: var(--muted);
  font-size: 0.9em;
}

.container--underconstruction {
  width: 100%;
  min-height: 70vh;
  border-radius: var(--radius-sm);
  margin-bottom: 0.625em;
  background: 
    linear-gradient(
      rgba(0,0,0,0.25),
      rgba(0,0,0,0.25)
    ),
    url("../image/under_construction.jpg") center / cover no-repeat;
}

/* ======================================================
   Utilities
====================================================== */
.transparentBackground {
  background-color: transparent;
}

/* ======================================================
   Typography & Links
====================================================== */
a {
  color: var(--link);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

h1 {
  color: #ffffff;
  text-shadow:
    1px 1px 0.125em black,
    0 0 1.25em #ff9900,
    0 0 0.313em #cc6600;
}

/* ======================================================
   Reduced Motion
====================================================== */
@media (prefers-reduced-motion: reduce) {
  .card {
    transition: none;
  }
}