/* Credly button styles */
.btn-credly {
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  padding: 0.22em 0.75em;
  font-weight: 600;
  font-size: 0.97em;
  border-radius: 1.1em;
  border: none;
  background: var(--accent, #02b875);
  color: var(--accent-contrast, #fff);
  box-shadow: 0 1px 4px rgba(0,0,0,0.07);
  text-decoration: none;
  transition: background 0.2s, color 0.2s, box-shadow 0.2s;
  margin: 0.38em 0;
}
.btn-credly:hover,
.btn-credly:focus {
  background: var(--link, #02675a);
  color: var(--text, #fff);
  box-shadow: 0 4px 24px rgba(0,0,0,0.12);
  text-decoration: none;
}
.btn-credly__icon {
  width: 1.05em;
  height: 1.05em;
  vertical-align: middle;
  flex-shrink: 0;
  fill: currentColor;
  opacity: 0.82;
  transition: opacity 0.2s;
}
/* --------- Color system (Light / Dark) --------- */
:root {
  --bg: #f7fafc;              /* soft sky blue-white */
  --text: #23304a;            /* deep blue for contrast */
  --muted: #6b8bbd;           /* gentle blue-grey */
  --card: #ffffffcc;          /* translucent white for glass effect */
  --border: #b7d4f8;          /* light blue border */
  --accent: #ffb300;          /* warm golden sun */
  --accent-contrast: #23304a; /* for buttons on yellow */
  --link: #1e88e5;            /* sky blue link */
  --summer-sky: #a7e9ff;      /* for gradients or highlights */
  --summer-grass: #b6e6a7;    /* optional: for accents or tags */
  --summer-shadow: rgba(30, 136, 229, 0.08); /* soft blue shadow */
}

:root .hero {
  background: 
    linear-gradient(120deg, rgba(255,255,255,0.65) 60%, rgba(220,240,255,0.35) 100%);
  border: 1px solid rgba(180, 200, 255, 0.22);
  border-radius: .7rem;
  box-shadow: 0 8px 32px rgba(60,100,180,0.10), 0 0 0 1px rgba(180,200,255,0.10) inset;
  backdrop-filter: blur(12px) saturate(120%);
  -webkit-backdrop-filter: blur(12px) saturate(120%);
  padding: 3.2rem 1.2rem 1.8rem;
  position: relative;
  transition: background 0.3s, box-shadow 0.3s;
}

:root.dark {
  --bg: #10182a;              /* deep twilight blue */
  --text: #e9edf5;            /* soft moonlight white */
  --muted: #aab4c0;           /* gentle dusk grey */
  --card: rgba(24, 32, 48, 0.82); /* glassy night panel */
  --border: #22314d;          /* shadowy blue border */
  --accent: #7ecbff;          /* cool starlight blue */
  --accent-contrast: #081120; /* for buttons on blue */
  --link: #a7c7ff;            /* pale blue link */
  --twilight-violet: #6c5ecf; /* for gradients or highlights */
  --twilight-pink: #ffb6d5;   /* optional: for accents or tags */
  --twilight-shadow: rgba(30, 40, 80, 0.14); /* soft night shadow */
}

:root.dark .hero {
  background:
    linear-gradient(120deg, rgba(24,32,48,0.65) 60%, rgba(40,60,90,0.35) 100%);
  border: 1px solid rgba(80, 120, 180, 0.18);
  border-radius: .7rem;
  box-shadow: 0 8px 32px rgba(0,40,80,0.18), 0 0 0 1px rgba(80,120,180,0.10) inset;
  backdrop-filter: blur(12px) saturate(120%);
  -webkit-backdrop-filter: blur(12px) saturate(120%);
  padding: 3.2rem 1.2rem 1.8rem;
  position: relative;
  transition: background 0.3s, box-shadow 0.3s;
}

:root.dark body {
  background: linear-gradient(180deg, #10182a 0%, #1a2340 100%);
}

/* --------- NEW: N7 (Mass Effect-inspired) --------- */
:root.n7 {
  --bg: #060b12;            /* deep space navy */
  --text: #e6f0ff;          /* high-contrast cool white */
  --muted: #9fb0c6;         /* desaturated steel */
  --card: rgba(12, 24, 44, 0.55);  /* glass panel */
  --border: #1a2a40;        /* hull steel */
  --accent: #00d1ff;        /* omni-cyan */
  --accent-contrast: #001018;
  --link: #00d1ff;

  --n7-red: #e03c31;        /* N7 stripe red */
  --n7-blue: #0b5fff;       /* deep citadel blue */
  --glow: rgba(0, 209, 255, 0.55);
  --grid: rgba(0, 180, 255, 0.10);
  --scan: rgba(255,255,255,0.025);
}

/* --------- Époque theme --------- */
:root.epoque {
  --bg: #181c2b;            /* deep indigo night */
  --text: #f7efe2;          /* parchment white */
  --muted: #b6a98c;         /* antique gold-grey */
  --card: #23263aee;        /* translucent marble/stone */
  --border: #bfa76a;        /* gilded gold */
  --accent: #e6c97b;        /* candlelight gold */
  --accent-contrast: #181c2b;
  --link: #7ea7e0;          /* faded royal blue */
  --gilding: #e6c97b;       /* for lines and ornaments */
  --shadow-warm: rgba(230, 201, 123, 0.08); /* candlelight shadow */
  --epoque-blue: #2d3a5a;   /* for gradients or highlights */
  --epoque-vignette: rgba(24, 28, 43, 0.85); /* vignette overlay */
}

/* --------- Base --------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  color: var(--text);
  background-color: var(--bg);
  line-height: 1.6;
}

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

/* ===== N7 starfield / grid / scanlines ===== */
:root.n7 body {
  background-color: var(--bg);
  background-image:
    radial-gradient(1200px 700px at 70% -10%, rgba(11,95,255,0.25), transparent 60%),  /* nebula glow */
    radial-gradient(1200px 700px at 10% 110%, rgba(224,60,49,0.18), transparent 50%),  /* N7 red glow */
    linear-gradient(0deg, var(--scan), var(--scan)),                                   /* faint scanlines */
    linear-gradient(180deg, rgba(0,0,0,0.25), rgba(0,0,0,0.0));                        /* depth vignette */
  background-size: auto, auto, 100% 2px, 100% 100%;
  background-repeat: no-repeat, no-repeat, repeat, no-repeat;
  background-blend-mode: screen, screen, multiply, normal;
}

/* ===== Époque dramatic background ===== */
:root.epoque body {
  background:
    radial-gradient(ellipse at 60% 0%, #23263a 0%, transparent 70%),
    linear-gradient(180deg, #181c2b 0%, #23263a 100%);
}

.container { max-width: 980px; margin: 0 auto; padding: 0 1.2rem; }

.header {
  display:flex; align-items:center; justify-content:space-between;
  padding: 1.2rem 0; border-bottom:1px solid var(--border);
  position: sticky; top: 0; background: var(--bg); z-index: 10;
}
.brand { font-weight: 800; letter-spacing: .3px; }

.nav a { color: var(--text); margin-left: 1rem; opacity: .85; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--accent); opacity: 1; }

.theme-toggle {
  border:1px solid var(--border); background:var(--card); color:var(--text);
  padding:.42rem .6rem; border-radius:.6rem; cursor:pointer; margin-left: .8rem;
}

.hero { padding: 3.2rem 0 1.8rem; }
.hero h1 { font-size: 2.1rem; margin: 0 0 .4rem; }
.hero p { color: var(--muted); margin: 0; }

/* ===== N7 typography + hero stripe ===== */
:root.n7 h1, :root.n7 h2, :root.n7 .brand {
  font-family: "Orbitron", system-ui, sans-serif;
  letter-spacing: .04em;
  text-transform: uppercase;
}
:root.n7 .brand { color: var(--accent); }
:root.n7 .hero {
  position: relative;
  background:
    linear-gradient(180deg, rgba(0, 209, 255, 0.08), rgba(0, 209, 255, 0.0)),
    linear-gradient(180deg, rgba(11,95,255,0.08), rgba(11,95,255,0));
  border: 1px solid var(--border);
  border-radius: .6rem;
  box-shadow: 0 16px 48px rgba(0,0,0,.35), 0 0 0 1px rgba(0, 209, 255, 0.06) inset;
  padding: 3.2rem 1.5rem 1.8rem; /* added: equal L/R padding for a symmetric box */
}

:root.n7 .hero::before {
  /* N7 diagonal stripe */
  content:"";
  position:absolute; top:0; left:-10%; width: 140%; height: 6px;
  background:
    linear-gradient(90deg, var(--n7-red) 0 20%, transparent 20% 80%, var(--n7-red) 80% 100%);
  transform: skewY(-8deg) translateY(-2px);
  box-shadow: 0 0 12px rgba(224,60,49,.35);
}


:root.epoque .hero {
  position: relative;
  background:
    radial-gradient(120% 100% at 50% 20%, rgba(230,201,123,0.10), transparent 55%),
    linear-gradient(180deg, rgba(46,58,90,0.22), rgba(24,28,43,0.92)),
    var(--card);
  border: 1.5px solid var(--border);
  border-radius: .7rem;
  box-shadow: 0 16px 48px var(--shadow-warm), 0 0 0 2px var(--gilding) inset;
  padding: 2.8rem 1.4rem 2.2rem;
  overflow: hidden;
}

:root.epoque .hero::after {
  content:"";
  position:absolute; inset:0; pointer-events:none;
  box-shadow: 0 0 120px 40px var(--epoque-vignette) inset;
  border-radius: inherit;
  opacity: 0.9;
}

:root.epoque .hero h1 {
  position: relative;
  padding-bottom: .5rem;
  color: var(--accent);
  text-shadow: 0 2px 16px #181c2b, 0 1px 0 var(--gilding);
  font-family: "Playfair Display", Georgia, serif;
  letter-spacing: .04em;
}

:root.epoque .hero h1::after {
  content:"";
  display:block; height: 2px;
  background: linear-gradient(to right, transparent, var(--gilding), transparent);
  margin-top: .5rem; opacity: .85;
}

/* --------- Grid & Cards --------- */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1rem;
}

.card {
  background: var(--card);
  border:1px solid var(--border);
  border-radius: .8rem;
  padding: 1rem;
  transition: transform .2s ease, box-shadow .2s ease;
}
.card:hover { transform: translateY(-2px); box-shadow: 0 10px 20px rgba(0,0,0,.06); }

/* ===== N7: glass holo cards ===== */
:root.n7 .card {
  border-radius: .5rem;
  border: 1px solid color-mix(in oklab, var(--accent) 30%, var(--border));
  background:
    linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02)) padding-box,
    linear-gradient(180deg, rgba(0,209,255,0.25), rgba(0,209,255,0.0)) border-box;
  box-shadow:
    0 12px 32px rgba(0,0,0,.35),
    0 0 24px var(--glow);
  backdrop-filter: saturate(120%) blur(6px);
}
@supports not (backdrop-filter: blur(1px)) {
  :root.n7 .card { background: rgba(12,24,44,0.75); }
}
:root.n7 .card:hover {
  transform: translateY(-3px);
  box-shadow:
    0 16px 40px rgba(0,0,0,.45),
    0 0 30px var(--glow);
}

/* --------- Tags & Buttons --------- */
.tag {
  display:inline-block; font-size:.75rem; padding:.15rem .5rem;
  border-radius: 999px; border:1px solid var(--border); margin-right:.3rem;
  color: var(--muted); background: transparent;
}
.btn {
  display:inline-block; padding:.55rem .9rem; border-radius:.6rem;
  color: var(--accent-contrast); background: var(--accent);
  text-decoration:none; border:1px solid transparent;
}
.btn:hover { filter: brightness(0.96); }

/* ===== N7: neon tags & thruster buttons ===== */
:root.n7 .tag {
  color: var(--text);
  border-color: color-mix(in oklab, var(--accent) 60%, var(--border));
  background: linear-gradient(180deg, rgba(0,209,255,0.15), rgba(0,209,255,0.05));
  box-shadow: 0 0 8px var(--glow) inset, 0 0 8px var(--glow);
}
:root.n7 .btn {
  background:
    linear-gradient(180deg, color-mix(in oklab, var(--accent) 92%, white), var(--n7-blue));
  border: 1px solid color-mix(in oklab, var(--accent) 40%, black);
  box-shadow: 0 10px 26px rgba(0,0,0,.35), 0 0 16px var(--glow);
  text-shadow: 0 0 6px rgba(0,0,0,.35);
}
:root.n7 .btn:hover {
  filter: brightness(1.04);
  box-shadow: 0 12px 30px rgba(0,0,0,.45), 0 0 22px var(--glow);
}

/* --------- Footer --------- */
.footer { margin-top: 3rem; padding: 2rem 0; color: var(--muted); border-top:1px solid var(--border); }

/* --------- Controls / Inputs --------- */
.controls { display:flex; gap:.6rem; flex-wrap: wrap; margin:.8rem 0 1rem; }
input[type="search"], select, input[type="text"], input[type="email"], textarea {
  padding:.5rem .6rem; border-radius:.6rem; border:1px solid var(--border);
  background: var(--bg); color: var(--text); width: 100%;
}
input:focus, select:focus, textarea:focus, .btn:focus, .theme-toggle:focus {
  outline: 3px solid color-mix(in oklab, var(--accent) 60%, transparent);
  outline-offset: 2px;
}

/* --------- Lists --------- */
.list { list-style:none; padding:0; margin:0; }
.list li { padding: .9rem 0; border-bottom:1px solid var(--border); }
.list li:last-child { border-bottom: none; }
.list a { color: var(--text); }
.list a:hover { color: var(--accent); text-decoration: none; }

/* --------- Utility --------- */
.kicker { text-transform: uppercase; letter-spacing: .1em; font-size:.75rem; color: var(--muted); }

/* --------- Époque hero embellishments (if you added them earlier) --------- */
.ornament { display: none; margin: .4rem 0; }
:root.epoque .ornament { display: none !important; }
:root.epoque .vignette { position: relative; }
:root.epoque .vignette::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  box-shadow: inset 0 0 110px rgba(50, 32, 21, 0.25); border-radius: .5rem;
}
:root.epoque .hero {
  position: relative;
  background:
    radial-gradient(120% 100% at 50% 20%, rgba(0,0,0,0.08), transparent 55%),
    linear-gradient(180deg, rgba(201,168,106,0.08), rgba(201,168,106,0.0)),
    var(--card);
  border: 1px solid var(--border);
  border-radius: .6rem;
  box-shadow: 0 16px 48px var(--shadow-warm);
  padding: 2.6rem 1.2rem 2.2rem; overflow: hidden;
}
:root.epoque .hero::after {
  content:""; position:absolute; inset:0; pointer-events:none;
  box-shadow: inset 0 0 80px rgba(0,0,0,.25); border-radius: inherit;
}
:root.epoque .hero h1 { position: relative; padding-bottom: .5rem; }
:root.epoque .hero h1::after {
  content:""; display:block; height: 2px;
  background: linear-gradient(to right, transparent, var(--gilding), transparent);
  margin-top: .5rem; opacity: .8;
}
/* If you added 'poster-grid' earlier, those styles remain below */
:root.epoque .poster-grid .card {
  text-align: center;
  border-radius: .5rem;
  background:
    linear-gradient(180deg, rgba(36,38,58,0.18) 0%, rgba(255,255,255,0.18) 60%, rgba(255,255,255,0) 100%) padding-box,
    linear-gradient(180deg, rgba(201,168,106,0.18), rgba(201,168,106,0.06)) border-box;
  border: 2px solid var(--border);
  box-shadow:
    0 10px 28px var(--shadow-warm),
    inset 0 0 0 1px color-mix(in oklab, var(--gilding) 30%, transparent);
  position: relative;
}
:root.epoque .poster-grid .card::before {
  content:""; position:absolute; left: 10%; right:10%; top: .6rem; height: 4px;
  background:
    linear-gradient(to right, transparent, var(--gilding), transparent),
    repeating-linear-gradient(90deg, transparent 0 8px, rgba(0,0,0,.06) 8px 9px);
  border-radius: 2px; opacity:.9;
}
:root.epoque .poster-grid .card::after {
  content:""; position:absolute; inset: 6px;
  border:1px solid color-mix(in oklab, var(--gilding) 45%, transparent);
  border-radius: .35rem; pointer-events:none;
}
:root.epoque .poster-grid .card h3 {
  font-family: "Playfair Display", Georgia, serif;
  text-transform: uppercase; letter-spacing: .06em; margin-top: .8rem;
}
:root.epoque .poster-grid .btn {
  background: linear-gradient(180deg, color-mix(in oklab, var(--accent) 92%, white), var(--accent));
  border: 1px solid color-mix(in oklab, var(--accent) 40%, black);
  box-shadow: 0 4px 10px var(--shadow-warm);
}
:root.epoque .poster-grid .tag { border-color: var(--gilding); color: var(--text); }
:root.epoque .poster-grid { gap: 1.15rem; }

/* --------- Accessibility tweaks --------- */
:root.dark a, :root.n7 a, :root.epoque a {
  text-decoration-thickness: .08em; text-underline-offset: .18em;
}
/* Optional: thin cyan scanline instead of red stripe */
:root.n7 .hero::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(0,209,255,0.6), transparent);
  box-shadow: 0 0 10px rgba(0,209,255,0.35);
  transform: none;
}

/* Smaller, compact Medium button */
/* Extra small, minimal Medium button */
/* Extra tiny Medium button */
/* Slightly larger, more readable Medium button */
.btn-medium {
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  padding: 0.22em 0.75em;
  font-weight: 600;
  font-size: 0.97em;
  border-radius: 1.1em;
  border: none;
  background: var(--accent, #02b875);
  color: var(--accent-contrast, #fff);
  box-shadow: 0 1px 4px rgba(0,0,0,0.07);
  text-decoration: none;
  transition: background 0.2s, color 0.2s, box-shadow 0.2s;
  margin: 0.38em 0;
}
.btn-medium:hover,
.btn-medium:focus {
  background: var(--link, #02675a);
  color: var(--text, #fff);
  box-shadow: 0 4px 24px rgba(0,0,0,0.12);
  text-decoration: none;
}

.btn-medium__emoji {
  font-size: 1rem;
  line-height: 1;
  transform: translateX(0);
  transition: transform .15s ease;
}

/* Make the Medium button icon smaller for compact layout */
.btn-medium__icon {
  width: 1.05em;
  height: 1.05em;
  vertical-align: middle;
  flex-shrink: 0;
  fill: currentColor;
  opacity: 0.82;
  transition: opacity 0.2s;
}
.btn-medium:hover .btn-medium__emoji {
  transform: translateX(2px);
}