/* Section: Base tokens */
:root{
  --bg: #06131e;
  --bg-2: #0b2030;
  --text: #eafff7;
  --muted: #a6f0dd;
  --accent: #d4b000;       /* mustard yellow */
  --accent-2: #2bd0c5;      /* turquoise */
  --glass: rgba(255,255,255,.12);
  --glass-border: rgba(255,255,255,.25);
}

/* Section: Global */
html, body { height: 100%; }
* { box-sizing: border-box; }
html { font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; }
body {
  margin: 0;
  color: var(--text);
  background-color: var(--bg);
  /* Layered background: gradient + grid + subtle glow */
  background-image:
    linear-gradient(135deg, rgba(6,19,30,.95), rgba(6,19,30,.95)),
    radial-gradient(circle at 20% -10%, rgba(43,208,197,.08) 0 40%, transparent 40%),
    radial-gradient(circle at 100% 0%, rgba(212,176,0,.08) 0%, transparent 40%),
    repeating-linear-gradient(0deg, rgba(0,0,0,.25) 0 1px, transparent 1px 32px),
    repeating-linear-gradient(90deg, rgba(0,0,0,.15) 0 1px, transparent 1px 32px);
  background-blend-mode: overlay, overlay, overlay, normal, normal;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* Section: Layout primitives */
header, nav, main, article, aside, footer { display: block; }

/* Section: Interactive & layout utilities */
.container { width: 100%; max-width: clamp(320px, 92vw, 1100px); margin-inline: auto; padding: 0 0.5rem; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; }
.card { background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.25); border-radius: 12px; padding: 1rem; box-shadow: 0 6px 16px rgba(0,0,0,.25); }

/* Section: Glass panels / typography */
.glass { background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.25); border-radius: 14px; box-shadow: 0 10px 25px rgba(0,0,0,.25); padding: 1rem; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }

/* Section: Image frame styling */
.image-frame { aspect-ratio: 16/9; border-radius: 12px; overflow: hidden; border: 1px solid rgba(43,208,197,.4); box-shadow: 0 6px 16px rgba(0,0,0,.25); }
.image-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Section: Content regions */
.content { color: var(--text); }

/* Section: List styling (ul/ol) */
ul, ol { padding-left: 1.25rem; margin-block: .5rem; }
li { margin: .25rem 0; }

/* Section: Core selectors (semantic blocks) */
html, body, header, nav, main, article, aside, footer { }
header { padding: 1rem; position: sticky; top: 0; z-index: 10; backdrop-filter: blur(8px); background: rgba(6,12,22,.55); border-bottom: 1px solid rgba(255,255,255,.08); }
header h1 { margin: 0 0 .25rem; font-size: clamp(1.4rem, 2vw + 1.2rem, 2.4rem); line-height: 1.1; color: var(--text); }
header .meta { color: var(--muted); font-size: .92rem; margin: 0; }
main { padding: 1rem; }
footer { padding: 1rem; }

/* Section: Hero content wrappers */
.featured-image { margin: 0 auto 1rem; border-radius: 12px; overflow: hidden; border: 1px solid rgba(43,208,197,.35); box-shadow: 0 10px 28px rgba(0,0,0,.25); aspect-ratio: 16/9; background: #000; }

/* Section: Links & buttons (interactive) */
a { color: var(--accent-2); text-decoration: none; transition: color .2s ease; }
a:hover { text-decoration: underline; color: #6fffe6; }
a:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; border-radius: 4px; }

/* Button variants */
.btn, .cta { display: inline-block; padding: .65rem 1rem; border-radius: 8px; border: 1px solid rgba(255,255,255,.25); text-decoration: none; cursor: pointer; font-weight: 600; transition: transform .15s ease, background .2s ease; background: linear-gradient(135deg, rgba(212,176,0,.95), rgba(212,176,0,.75)); color: #04100a; }
.btn:hover, .cta:hover { transform: translateY(-1px); }
.btn:active, .cta:active { transform: translateY(0); }
.btn.outline { background: transparent; color: var(--accent-2); border: 1px solid var(--accent-2); }

/* Section: Focus visibility for accessibility */
:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; border-radius: 4px; }

/* Section: Nav/Aside minimal styling (presentational) */
nav { display: flex; gap: .5rem; align-items: center; }

/* Section: Print accessibility */
@media print {
  body { background: #fff; color: #000; }
  a { text-decoration: underline; }
}

/* Section: Motion preferences */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* Section: Responsive tweaks */
@media (min-width: 720px) {
  main { padding: 1.5rem; }
}