/* ===================== AESxGRID — brand tokens ===================== */
/* Dark is the default; light is a deliberately designed variant, not an inversion. */

:root {
  --para-font: "Bebas Neue", "Manrope", ui-sans-serif, system-ui, sans-serif;  /* display face for paragraph prose */
  /* Body/paragraph typeface: Manrope (loaded in index.html) over the
     existing system-sans fallback stack. Display headings keep their own
     treatment via the body default + heading rules below. */
  --body-font: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
               Roboto, Helvetica, Arial, sans-serif;
  --display-font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
                  Helvetica, Arial, sans-serif;
}

:root,
html[data-theme="dark"] {
  --bg: #08080a;
  --bg-2: #0e0e12;
  --panel: rgba(255,255,255,.035);
  --panel-line: rgba(255,255,255,.10);
  --text: #f3f3f5;
  --muted: #a6a6b1;
  --red: #e23b3b;
  --yellow: #f5c518;
  --white: #ffffff;
  --gray: #8a8a96;
  /* ambient-only accents: never in copy, buttons, or controls */
  --amb-violet: #7a3cff;
  --amb-magenta: #d81f8f;
  --amb-teal: #1f8f7a;         /* emerald/teal presence */
  --amb-blue: #1f4fd8;         /* deep electric blue */
  --veil-op: 1;
  --shadow: 0 24px 60px rgba(0,0,0,.45);
}

html[data-theme="light"] {
  --bg: #ffffff;           /* true white base */
  --bg-2: #ffffff;
  --panel: rgba(20,18,22,.04);
  --panel-line: rgba(20,18,22,.14);
  --text: #101014;
  --muted: #4c4c58;
  --red: #c4271f;
  --yellow: #b8860b;      /* true gold, deepened so it stays readable on white */
  --white: #101014;       /* re-mapped so text vars stay legible */
  --gray: #5f5c68;
  /* light-theme ambient accents: controlled-saturation hues */
  --amb-violet: #6b4bb8;
  --amb-magenta: #b34a86;
  --amb-teal: #177a5e;
  --amb-blue: #2453c4;
  --veil-op: .8;          /* field clearly visible behind white */
  --shadow: 0 24px 60px rgba(20,30,60,.14);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

/* Scroll lock while the image viewer dialog is open. */
html.lb-open { overflow: hidden; }

body {
  margin: 0;
  overflow-x: hidden;            /* no horizontal overflow */
  background: transparent;       /* let the fixed veil layer show through */
  color: var(--text);
  font-family: var(--body-font);
  font-size: 1.05rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  transition: background .4s ease, color .4s ease;
}

/* ===================== HTML CANVAS COLOR (opaque base for the veil layer) ===================== */
html { background: var(--bg); }

/* ===================== AURORA VEIL ===================== */
/* Full-page fixed layer. Primary technique (from index-2.html): a WebGL
   fbm-noise aurora — domain-warped noise bands that flow, fold, and
   accumulate into filaments. Expanded palette: crimson, gold, violet,
   magenta, cyan, restrained teal. The CSS blob layer below is the static
   fallback: shown when WebGL is unavailable or reduced motion is on
   (script.js drives .veil-static / #veil-canvas visibility). */
.veil {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  background: var(--bg);
  opacity: var(--veil-op);
}
#veil-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: none;               /* script shows it when the WebGL field runs */
}
.veil.veil-live #veil-canvas { display: block; }
.veil.veil-live .veil-static { display: none; }

.veil .blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  mix-blend-mode: screen;
}
/* When motion is allowed the canvas replaces this layer; when it runs in
   static mode these blobs hold a balanced composed pose (see reduced-motion
   block). Varied sizes, anchors, durations, and six-way paths keep the
   fallback breathing gently if it ever animates. */
/* Dominant hues: crimson/red, deep electric blue, emerald/teal, gold/amber.
   Violet and magenta persist only as small secondary fields. */
.b-crimson  { width: 72vmax; height: 72vmax; left: -18vmax; top: -26vmax; opacity: .50;
              background: radial-gradient(circle, var(--red) 0%, transparent 62%);
              animation: drift-a 34s ease-in-out infinite alternate; }
.b-gold     { width: 58vmax; height: 58vmax; right: -16vmax; top: -10vmax; opacity: .44;
              background: radial-gradient(circle, var(--yellow) 0%, transparent 60%);
              animation: drift-b 41s ease-in-out infinite alternate; }
.b-white    { width: 46vmax; height: 46vmax; left: 24vmax; bottom: -24vmax; opacity: .16;
              background: radial-gradient(circle, #ffffff 0%, transparent 55%);
              animation: drift-c 29s ease-in-out infinite alternate; }
.b-gray     { width: 64vmax; height: 64vmax; right: 4vmax; bottom: -30vmax; opacity: .30;
              background: radial-gradient(circle, var(--gray) 0%, transparent 60%);
              animation: drift-d 47s ease-in-out infinite alternate; }
.b-blue     { width: 66vmax; height: 66vmax; left: -14vmax; top: 34vh; opacity: .42;
              background: radial-gradient(circle, var(--amb-blue) 0%, transparent 62%);
              animation: drift-e 38s ease-in-out infinite alternate; }
.b-teal     { width: 54vmax; height: 54vmax; right: -14vmax; top: 38vh; opacity: .36;
              background: radial-gradient(circle, var(--amb-teal) 0%, transparent 60%);
              animation: drift-f 44s ease-in-out infinite alternate; }
.b-violet   { width: 34vmax; height: 34vmax; left: 34vw; top: -16vmax; opacity: .16;
              background: radial-gradient(circle, var(--amb-violet) 0%, transparent 56%);
              animation: drift-g 31s ease-in-out infinite alternate; }
.b-magenta  { width: 30vmax; height: 30vmax; left: 12vw; bottom: -18vmax; opacity: .14;
              background: radial-gradient(circle, var(--amb-magenta) 0%, transparent 56%);
              animation: drift-h 52s ease-in-out infinite alternate; }

.veil-grain {
  position:absolute; inset:0; opacity:.5;
  /* edge darkening for depth + a quiet band across the hero copy zone
     (left side, vertical middle) so headline/lede/CTA stay readable while
     the field runs visibly right below the fixed nav */
  background:
    linear-gradient(to right,
      color-mix(in srgb, var(--bg) 82%, transparent) 0%,
      color-mix(in srgb, var(--bg) 62%, transparent) 24%,
      color-mix(in srgb, var(--bg) 30%, transparent) 42%,
      transparent 58%),
    radial-gradient(120% 120% at 50% 0%, transparent 55%, var(--bg) 100%);
}

/* Six-way wandering paths (not simple A→B slides). */
@keyframes drift-a {
  0%  {transform:translate(0,0) scale(1)}          20% {transform:translate(6vmax,4vmax) scale(1.08)}
  40% {transform:translate(11vmax,1vmax) scale(1.02)}  60% {transform:translate(7vmax,8vmax) scale(1.12)}
  80% {transform:translate(-2vmax,5vmax) scale(1.05)}  100%{transform:translate(3vmax,10vmax) scale(1.1)}
}
@keyframes drift-b {
  0%  {transform:translate(0,0) scale(1)}          25% {transform:translate(-8vmax,3vmax) scale(1.06)}
  50% {transform:translate(-4vmax,9vmax) scale(1.12)}  75% {transform:translate(-10vmax,6vmax) scale(1.03)}
  100%{transform:translate(-6vmax,12vmax) scale(1.08)}
}
@keyframes drift-c {
  0%  {transform:translate(0,0) scale(1)}          30% {transform:translate(5vmax,-6vmax) scale(1.14)}
  60% {transform:translate(-3vmax,-9vmax) scale(1.05)}  100%{transform:translate(6vmax,-4vmax) scale(1.1)}
}
@keyframes drift-d {
  0%  {transform:translate(0,0) scale(1)}          33% {transform:translate(-6vmax,-4vmax) scale(1.09)}
  66% {transform:translate(-3vmax,-9vmax) scale(1.02)}  100%{transform:translate(-8vmax,-6vmax) scale(1.1)}
}
@keyframes drift-e {
  0%  {transform:translate(0,0) scale(1)}          20% {transform:translate(7vmax,-5vmax) scale(1.1)}
  45% {transform:translate(12vmax,3vmax) scale(1.03)}  70% {transform:translate(5vmax,9vmax) scale(1.12)}
  100%{transform:translate(10vmax,4vmax) scale(1.06)}
}
@keyframes drift-f {
  0%  {transform:translate(0,0) scale(1)}          30% {transform:translate(-9vmax,6vmax) scale(1.08)}
  55% {transform:translate(-5vmax,11vmax) scale(1.14)}  80% {transform:translate(-11vmax,4vmax) scale(1.02)}
  100%{transform:translate(-7vmax,9vmax) scale(1.1)}
}
@keyframes drift-g {
  0%  {transform:translate(0,0) scale(1)}          35% {transform:translate(-7vmax,8vmax) scale(1.12)}
  65% {transform:translate(5vmax,12vmax) scale(1.04)}  100%{transform:translate(-2vmax,7vmax) scale(1.08)}
}
@keyframes drift-h {
  0%  {transform:translate(0,0) scale(1)}          25% {transform:translate(6vmax,-7vmax) scale(1.09)}
  50% {transform:translate(-5vmax,-10vmax) scale(1.03)}  75% {transform:translate(3vmax,-5vmax) scale(1.13)}
  100%{transform:translate(-3vmax,-8vmax) scale(1.06)}
}

/* ===================== AURORA DUST (sparse glowing particles) ===================== */
.dust {
  position: fixed;
  inset: 0;
  z-index: -1;               /* behind content, in front of the veil layer */
  pointer-events: none;      /* fully non-interactive */
  opacity: .85;
}
html[data-theme="light"] .dust { opacity: .5; }  /* dust: fainter on white */

/* ===================== NAV ===================== */
.skip { position:absolute; left:-999px; top:0; background:var(--yellow); color:#000; padding:.5rem .8rem; border-radius:0 0 8px 0; z-index:50 }
.skip:focus { left:0 }

.nav {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 1rem;
  padding: 1rem clamp(1rem, 4vw, 3rem);
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--panel-line);
}
.brand { display:flex; align-items:center; gap:.6rem; text-decoration:none; color:var(--text) }
.mark {
  display:grid; place-items:center; width:34px; height:34px; border-radius:9px;
  background: var(--red);                       /* solid high-contrast, no gradient */
  color:#0a0a0a; font-weight:900; font-size:.85rem; letter-spacing:.02em;
}
.brand-name { font-weight:800; letter-spacing:.14em; font-size:.9rem }
/* Desktop: Home/Work/Contact spread across the space between brand and
   theme toggle as simple text links (no buttons, no backgrounds). */
.links { flex: 1 1 auto; display: flex; justify-content: space-evenly; gap: 1rem }
.links a { color:var(--muted); text-decoration:none; font-weight:600; font-size:1.08rem;
           letter-spacing:.1em; font-family: var(--display-font); transition:color .2s }   /* hero-title display stack, uppercase, evenly distributed */
.links a:hover, .links a:focus-visible { color:var(--text) }
.toggle {
  border:1px solid var(--panel-line); background:var(--panel); color:var(--text);
  width:40px; height:40px; border-radius:10px; cursor:pointer; font-size:1.1rem;
  display:grid; place-items:center; transition:border-color .2s, transform .1s;
}
.toggle:hover { border-color: var(--yellow) }
.toggle:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px }
.toggle .t-ico::after { content: attr(data-on) }
html[data-theme="light"] .toggle .t-ico::after { content: attr(data-off) }

/* ===================== LAYOUT / TYPE ===================== */
.wrap { width:min(1100px, 100% - 2.5rem); margin-inline:auto }
.wrap.narrow { width:min(760px, 100% - 2.5rem) }
.eyebrow { color:var(--red); font-weight:800; letter-spacing:.22em; text-transform:uppercase; font-size:1.02rem; margin:0 }
.focus-label { color:var(--yellow); font-weight:700; letter-spacing:.3em; text-transform:uppercase;
               font-size:.92rem; margin:0 0 .55rem }   /* brand-yellow label; smaller than specialty line */
/* Hero focus strip: two-line label group, centered as one unit above the lockup. */
.focus-strip { text-align:center }
h1, h2, h3 { font-family: var(--display-font) }   /* display-heading treatment unchanged */
.btn { font-family: var(--body-font) }   /* controls keep Manrope */
figcaption { font-family: var(--para-font) }   /* captions use the exact prose stack (Bebas Neue + fallbacks) */
figcaption { font-size:.96rem; line-height:1.5 }   /* legibility bump for Bebas display face at caption size */
p, .headline, .statement { font-family: var(--para-font); font-weight:400; font-size:1.15rem;
                           letter-spacing:.055em; line-height:1.6 }   /* Bebas Neue paragraph prose (modest reduction) */
.lede { font-size:clamp(1.12rem,1.9vw,1.4rem) }                       /* modest reduction, second pass */
.contact-line { font-size:1.1rem }                                    /* inherits prose treatment */
.asset p { font-size:1.1rem }
@media (max-width:720px) { .lede { font-size:1.1rem } .contact-line, .asset p { font-size:1.05rem } }
h1 { font-size: clamp(2.8rem, 8vw, 6.5rem); max-width: 14ch; line-height:.92; margin:.1em 0 .1em; font-weight:900; letter-spacing:-.02em; color:var(--text) }
.headline { color:var(--text); max-width:46ch; font-size: clamp(1.2rem, 2.2vw, 1.65rem) }   /* Bebas prose: modest reduction */
.lede { color:var(--muted); max-width:60ch }                                       /* size from the Bebas bump above */
.statement { font-size:clamp(1.55rem,3vw,2.3rem); line-height:1.45; font-weight:400; color:var(--text); max-width:34ch; text-wrap:balance }
h2 { font-size:clamp(1.9rem,4.2vw,3.1rem); line-height:1.05; margin:.1em 0 .4em; font-weight:900; letter-spacing:-.02em; text-transform:uppercase }
h3 { font-size:clamp(1.2rem,2.4vw,1.7rem); margin:.2em 0; font-weight:800 }
h4 { font-size:1rem; margin:0 0 .4rem; color:var(--yellow); font-weight:800; letter-spacing:.02em }
a { color:inherit }

section { padding: clamp(2.75rem, 7vh, 5.5rem) 0; position:relative }

/* Hero: focus strip centered above one AE/role lockup; lockup centered as a unit. */
.hero { min-height: 62vh; display:flex; align-items:center; justify-content:center }
.hero .wrap { display:flex; flex-direction:column; align-items:center; gap:clamp(2.2rem,5vw,3.6rem) }
.hero-lockup { display:grid; grid-template-columns:auto minmax(0,auto); align-items:center;
               gap:clamp(1.6rem,4vw,3.2rem); justify-content:center }
.ae-mark { font-size:clamp(6rem,26vw,20rem); font-weight:900; line-height:.8;
           letter-spacing:-.04em; color:var(--red); user-select:none }
.hero-lockup h1 { text-align:left }
@media (max-width: 640px) {
  .hero-lockup { grid-template-columns:minmax(0,1fr); justify-items:center }
  .hero-lockup h1 { text-align:center }
}
.hero .cta { margin-top:2rem }

.cta { display:flex; gap:1rem; flex-wrap:wrap }
.btn { display:inline-block; text-decoration:none; font-weight:800; padding:.85rem 1.5rem;
       border-radius:12px; font-size:1rem; border:1px solid var(--panel-line);
       transition:transform .12s ease, box-shadow .2s ease, border-color .2s }
.btn:active { transform: translateY(1px) }
.btn:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px }
/* ---- One high-contrast action-button system for every primary action:
   Contact email, Contact GitHub, and the featured-card "View on GitHub".
   Interiors are genuinely transparent (the page Aurora shows straight
   through), so no maroon/opaque/translucent/gradient fill remains on any
   of them. A 2px bright perimeter border plus a pronounced accent outer
   glow carries the affordance. Email accent: crimson/red. Both GitHub
   links accent: gold. Hover/focus raise border brightness and outer glow
   only — the interior never fills. ---- */
.btn { border-width: 2px; border-style: solid }
.btn-ghost > span, .featured-card > a > span,
.featured-card > a { text-shadow: 0 1px 3px rgba(0,0,0,.75) }
.aurora-email, .aurora-github, .btn-ghost {
  background: transparent;
  box-shadow: 0 0 18px 2px color-mix(in srgb, var(--red) 45%, transparent);
  transition: transform .12s ease, box-shadow .2s ease, border-color .2s }
/* email accent: crimson/red */
.aurora-email { border-color: var(--red) }
/* gold accent: both GitHub controls (Contact button + featured link) */
.aurora-github { border-color: var(--yellow) }
.btn-ghost { border-color: var(--yellow);
             box-shadow: 0 0 18px 2px color-mix(in srgb, var(--yellow) 45%, transparent) }
/* hover / keyboard focus: brighter border + substantially stronger outer
   glow; interior stays transparent */
.aurora-email:hover, .aurora-email:focus-visible {
  border-color: color-mix(in srgb, var(--red) 100%, var(--white));
  box-shadow: 0 0 34px 8px color-mix(in srgb, var(--red) 75%, transparent) }
.aurora-github:hover, .aurora-github:focus-visible,
.btn-ghost:hover, .btn-ghost:focus-visible {
  border-color: color-mix(in srgb, var(--yellow) 100%, var(--white));
  box-shadow: 0 0 34px 8px color-mix(in srgb, var(--yellow) 75%, transparent) }
/* Light theme: dark label with a soft light halo keeps text legible over
   the Aurora while the interior stays transparent. */
html[data-theme="light"] .btn-ghost > span,
html[data-theme="light"] .featured-card > a > span,
html[data-theme="light"] .featured-card > a { text-shadow: 0 1px 2px rgba(255,255,255,.85) }
/* If color-mix is unsupported, degrade to a readable solid border + glow-free state. */
@supports not (color: color-mix(in srgb, red 50%, transparent)) {
  .aurora-email, .aurora-github, .btn-ghost { box-shadow: none }
  .aurora-email:hover, .aurora-github:hover, .btn-ghost:hover,
  .aurora-email:focus-visible, .aurora-github:focus-visible, .btn-ghost:focus-visible { box-shadow: none }
}

/* positioning */
.positioning { border-block:1px solid var(--panel-line) }
.surfaces { list-style:none; display:flex; flex-wrap:wrap; gap:.6rem; padding:0; margin:1.6rem 0 0 }
.surfaces li { border:1px solid var(--panel-line); border-radius:999px; padding:.4rem 1rem; font-weight:700; color:var(--muted); font-size:.9rem }
.surfaces li:hover { color:var(--text); border-color:var(--red) }

/* work / case */
.work { text-align:center }
.work .wrap { display:flex; flex-direction:column; align-items:center }
.work-title { font-size:clamp(2.2rem,4.6vw,3.6rem); margin:0 0 clamp(1.4rem,3vh,2.4rem) }
.section-head { max-width:64ch; margin-bottom:2.4rem }
.sub { color:var(--muted); font-size:1.15rem }
.case { border:1px solid var(--panel-line); border-radius:20px; padding:clamp(1.2rem,3vw,2.4rem); background:var(--panel); box-shadow:var(--shadow) }
.grid { display:grid; gap:1.4rem 2rem; grid-template-columns:repeat(2,1fr); margin:1.4rem 0 }
.cell p, .cell li { color:var(--muted) }
.tools { padding-left:1.1rem; margin:0 }
.tools li { margin:.2rem 0 }

.asset { margin:1.6rem 0 }
.asset-slot { border:1.5px dashed var(--panel-line); border-radius:14px; padding:clamp(1.6rem,5vw,3rem);
              text-align:center; color:var(--muted); background:repeating-linear-gradient(45deg, transparent, transparent 14px, rgba(226,59,59,.05) 14px, rgba(226,59,59,.05) 28px) }
.asset-tag { display:inline-block; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--yellow); border:1px solid var(--panel-line); padding:.25rem .6rem; border-radius:6px; margin-bottom:.6rem }
.asset p { margin:.2rem 0; font-weight:700; color:var(--text) }
.asset p { font-size:1.1rem }   /* Bebas prose size */
.asset figcaption { margin-top:.6rem; font-size:.85rem; color:var(--gray) }

.limits { margin-top:1.6rem; border-left:3px solid var(--red); padding:.4rem 0 .4rem 1rem }
.limits p { color:var(--muted); margin:0 }
.limits h4 { color:var(--red) }
.repo-note { margin-top:1.4rem; color:var(--gray); font-size:.92rem }
.more-work { margin-top:2rem; color:var(--gray); font-style:italic }

/* about */
.pending { margin-top:2rem; border:1px solid var(--panel-line); border-radius:14px; padding:1.2rem 1.4rem; background:var(--panel) }
.pending h3 { color:var(--yellow); font-size:1rem; text-transform:uppercase; letter-spacing:.08em }
.pending ul { margin:.6rem 0 0; padding-left:1.2rem; color:var(--muted) }
.pending code { background:var(--bg-2); padding:.1rem .4rem; border-radius:5px }

/* contact (holds the approved About paragraph) */
.contact { text-align:center }
.contact .wrap.narrow { display:flex; flex-direction:column; align-items:center }
.contact .lede { text-wrap:balance }
.contact-line { color:var(--muted); font-size:1.05rem; margin:1.2rem 0 0 }
@media (min-width: 721px) { .contact-line { font-size:1.1rem } }   /* Bebas prose size (desktop) */
@media (max-width: 720px) { .contact-line { font-size:1.05rem } }  /* Bebas prose size (mobile) */
.contact .cta { justify-content:center; margin-top:1.6rem }

/* Evidence gallery: user-approved assets. Architecture diagram is the
   lead image, then the CALDERA pair as one centered equal-width row, then
   each Wazuh screenshot in its own centered row. Every figure and caption
   is centered; images keep natural aspect ratios (no crops, no object-fit
   frames, no dark media backgrounds — the page Aurora shows around them).
   Triggers are semantic buttons opening the in-page viewer dialog. */
.evidence-gallery { display:grid; gap:1.6rem; width:100%; max-width:900px;
                    margin:2rem auto 0; justify-items:center }
.evidence-gallery[hidden] { display:none }
.evidence-gallery figure { margin:0; width:100%; display:flex; flex-direction:column;
                           align-items:center }
.ev-trigger { display:block; width:100%; max-width:100%; padding:0; border:0;
              background:none; cursor:zoom-in; border-radius:14px }
.ev-trigger:focus-visible { outline:3px solid var(--yellow); outline-offset:3px }
/* subtle border + separation from the aurora background, no dark frame */
.evidence-gallery img { display:block; width:100%; max-width:100%; height:auto;
                        border-radius:14px; border:1px solid var(--panel-line);
                        box-shadow: 0 10px 30px rgba(0,0,0,.28) }
/* Lead image: full gallery width, desktop cap ~900px (source untouched) */
.ev-primary img { border-width:1.5px }
/* CALDERA pair: centered single-column stack, one figure per full-width row */
.ev-caldera-stack { display:grid; gap:1.6rem; width:100% }
/* Wazuh pair: separate centered rows, shared ~900px cap, natural ratios */
.ev-wazuh-stack { display:grid; gap:1.6rem; width:100% }
/* The 4104 Alert figure alone is capped at 680px on desktop and centered
   in the 900px track; at 720px or below it returns to full width. */
@media (min-width:721px) {
  .ev-wazuh-stack { justify-items:center }
  .ev-alert-cap { max-width:680px }
}
.evidence-gallery figcaption { margin-top:.55rem; text-align:center; color:var(--muted);
                               font-size:.96rem; letter-spacing:.05em; line-height:1.5 }   /* Bebas legibility bump */

/* ===================== IMAGE VIEWER DIALOG ===================== */
/* Native <dialog>: showModal() traps focus and adds the inert backdrop.
   Scroll lock is applied on <html> by script.js while open. */
.lightbox { border:0; padding:0; background:transparent; max-width:none; max-height:none;
            width:100%; height:100%; overflow:hidden }
.lightbox::backdrop { background: rgba(4,4,8,.86) }
.lightbox-inner { position:absolute; inset:0; overflow:auto; padding: clamp(1rem,4vh,3rem);
                  display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
                  background:transparent }
.lightbox-inner > * { flex:0 0 auto }
.lightbox img { max-width: min(1500px, 92vw); max-height: calc(100vh - 160px);
                width:auto; height:auto; object-fit:contain;
                border-radius:12px; border:1px solid var(--panel-line);
                background: color-mix(in srgb, var(--bg-2) 90%, transparent) }
.lightbox-caption { margin-top:.9rem; color:#f3f3f5; font-size:1rem; text-align:center;
                    text-shadow:0 1px 3px rgba(0,0,0,.8) }
.lightbox-close { position:fixed; top: clamp(.6rem,2.5vh,1.4rem); right: clamp(.6rem,2.5vw,1.4rem);
                  z-index:2; display:inline-flex; align-items:center; gap:.5rem;
                  background: rgba(8,8,12,.88); color:#f3f3f5; border:2px solid #f5c518;
                  border-radius:10px; padding:.55rem .9rem; font-weight:800; font-size:.95rem;
                  cursor:pointer; transition: box-shadow .2s, border-color .2s }
.lightbox-close:hover, .lightbox-close:focus-visible {
                  border-color: color-mix(in srgb, #f5c518 100%, #ffffff);
                  box-shadow: 0 0 24px 6px color-mix(in srgb, #f5c518 65%, transparent) }
.lightbox-close:focus-visible { outline:3px solid #f5c518; outline-offset:3px }
.lightbox-close-x { font-size:1.05rem; line-height:1 }
html[data-theme="light"] .lightbox img { background:#0e0e12 }
@media (prefers-reduced-motion: reduce) {
  .lightbox-close { transition:none }
}

/* footer */
.foot { border-top:1px solid var(--panel-line); padding:2rem 0 }
.foot-in { display:flex; justify-content:center; flex-wrap:wrap; gap:.6rem; color:var(--muted); font-size:.9rem }

/* ===================== RESPONSIVE ===================== */
@media (max-width: 720px) {
  .grid { grid-template-columns:1fr }
  .links { gap:.9rem }
  .nav { flex-wrap: wrap; row-gap: .75rem }   /* 320px: toggle wraps to a second row instead of overflowing */
}

/* ===================== REDUCED MOTION ===================== */
/* Composed static version: fields hold a balanced pose, dust holds still. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto }
  .veil .blob { animation:none !important }
  .b-crimson  {transform:translate(4vmax,3vmax)}  .b-gold    {transform:translate(-4vmax,2vmax)}
  .b-white    {transform:translate(3vmax,-3vmax)} .b-gray    {transform:translate(-3vmax,-2vmax)}
  .b-blue     {transform:translate(5vmax,-2vmax)} .b-teal    {transform:translate(-5vmax,3vmax)}
  .b-violet   {transform:translate(-2vmax,5vmax)} .b-magenta {transform:translate(2vmax,-4vmax)}
  .dust { animation:none !important }
  .btn, .toggle { transition:none }
}
/* Compact featured entry and long contact URL. */
.featured-card { max-width: 880px; margin-inline:auto; text-align:center }
.featured-card .lede { margin: .8rem auto 1.5rem; max-width:64ch; }
.featured-card > a { display:inline-block }
.contact .btn { overflow-wrap: anywhere; max-width: 100%; }
@media (max-width: 720px) {
  .hero .eyebrow { letter-spacing: .1em; }
}