/*
 * ============================================================================
 * PORTFOLIO — CHILD THEME STYLESHEET
 * Hello Elementor Child · main.css
 *
 * Load order: hello-elementor → elementor-frontend → THIS FILE
 *
 * TABLE OF CONTENTS
 *  0. CSS Custom Properties (Design Tokens)
 *  1. Base / Reset
 *  2. Elementor Layout Overrides       ← Elementor-ID selectors live here only
 *  3. Navigation  (.aether-nav)
 *  4. Hero — Title  (.hero-title, .hero-eyebrow-badge, .title-chip)
 *  5. Hero — Photo  (.hero-circle-panel, .hero-circle-wrap, .hero-circle-desc)
 *  6. Background Canvas  (#canvas-bg)
 *  7. Projects  (.section-title-bar, .projects-*)
 *  8. Cards  (.card)
 *  9. Footer  (.aether-footer)
 * 10. Responsive
 * ============================================================================
 *
 * HOW TO EDIT
 *  • Change a colour?  → Edit Section 0 (CSS variables). One change, site-wide.
 *  • Tweak a component?→ Find its named section below.
 *  • Add Elementor layout hacks? → Section 2 ONLY, with a comment explaining why.
 */

/* ============================================================================
   A. FOCUS RING — keyboard nav in site design language
   ============================================================================ */

/* Global green focus ring — matches --clr-accent system.
   Blackjack / deck elements already have outline:none !important
   in their own rules, so they are unaffected.                       */
:focus-visible {
  outline:        2px solid var(--clr-accent, #1ae627);
  outline-offset: 3px;
  border-radius:  3px;
}

/* ============================================================================
   CUSTOM FONTS
   ============================================================================ */
@font-face {
  font-family: 'OpenSauce';
  src: url('/wp-content/uploads/2026/05/OpenSauceOne-Black.ttf') format('truetype');
  font-weight: normal;
  font-style:  normal;
  font-display: swap;
}

/* ============================================================================
   0. CSS CUSTOM PROPERTIES  —  edit here to restyle the whole site
   ============================================================================ */
:root {

  /* --- Palette --- */
  --clr-bg:            #ffffff;
  --clr-text:          #1c1c1c;
  --clr-text-muted:    #4a4a4a;
  --clr-text-dark:     #1c1c1c;
  --clr-border:        #333333;
  --clr-accent:        #1ae627;   /* electric green  */
  --clr-accent-alt:    #ffd900;   /* golden yellow   */

  /* --- Glassmorphism recipe (reused on nav, cards, desc card) --- */
  --glass-bg:          rgba(255, 255, 255, 0.42);
  --glass-blur:        blur(14px);
  --glass-border:      1px solid rgba(210, 210, 210, 0.50);
  --glass-shadow:      0 4px 18px rgba(0, 0, 0, 0.06),
                       inset 0 1px 0 rgba(255, 255, 255, 0.75);
  --glass-radius:      14px;

  /* --- Typography --- */
  --font-display:      'Inter', -apple-system, sans-serif;
  --font-mono:         'Space Mono', monospace;
  --fs-mono-xs:        9px;
  --fs-mono-sm:        10px;
  --fs-mono-nav:       11px;

  /* --- Layout --- */
  --nav-height:        48px;
  --nav-top:           1rem;
  --content-max:       1400px;
  /* mirrors nav: 4 vw each side up to 1400 px max */
  --content-padding-x: max(4vw, calc((100% - var(--content-max)) / 2));
  --body-top-pad:      4.5rem;

  /* --- Hero --- */
  --hero-title-size:   clamp(2rem, 4vw, 5rem);
  --hero-photo-size:   clamp(200px, 22.5vw, 375px);
  --hero-gap:          4rem;

  /* --- Globe GIF (resize here — also controls the clip-path circle) --- */
  --globe-size:        clamp(2.7rem, 8.55vw, 9.9rem);

  /* --- Photo blob glow (lower = subtler) --- */
  --blob-glow-peak-1:  0.10;
  --blob-glow-peak-2:  0.07;
  --blob-glow-peak-3:  0.05;

  /* --- Pills / Chips --- */
  --chip-radius:       99px;
  --chip-padding:      8px 14px;
  --chip-font-size:    var(--fs-mono-xs);

  /* --- Projects --- */
  --section-title-size: clamp(3rem, 6vw, 6rem);

  /* --- Cards --- */
  --card-min-height:   500px;
}


/* ============================================================================
   1. BASE / RESET
   ============================================================================ */

html { scroll-behavior: smooth; }

body {
  cursor:               crosshair;
  overflow-x:           clip;           /* clip (not hidden) — preserves fixed-pos stacking */
  background:           var(--clr-bg);
  color:                var(--clr-text);
  font-family:          var(--font-display);
  -webkit-font-smoothing: antialiased;
  padding-top:          var(--body-top-pad);  /* clears the fixed nav */
}


/* ============================================================================
   2. ELEMENTOR LAYOUT OVERRIDES
   ── Only Elementor-ID selectors should live in this section ──
   ── If you rename a widget in Elementor the ID changes — update here ──
   ============================================================================ */

/*
 * wr4p001  — outer page wrapper
 * Needs relative + z-index so it sits above the fixed canvas background.
 * min-height keeps short pages from collapsing.
 */
.elementor-element-wr4p001 {
  position:    relative;
  z-index:     10;
  min-height:  100vh;
}

/*
 * wr4p001 inner  — content width constraint
 * Mirrors the nav bar: 4 vw margins until viewport > 1400 px,
 * then margins grow proportionally so content tracks the nav edges.
 */
.elementor-element-wr4p001 > .e-con-inner {
  padding:     0 var(--content-padding-x);
  box-sizing:  border-box;
}

/*
 * her0001  — hero row: title left, photo right, full spread
 * Mirrors nav geometry exactly: centred pill, same width + max-width.
 * e-con-full negative margins are cancelled; padding matches --content-padding-x.
 */
.elementor-element-her0001 {
  justify-content: space-between !important;
  align-items:     center !important;
  margin-left:     auto !important;
  margin-right:    auto !important;
  width:           calc(100% - 8vw) !important;
  max-width:       var(--content-max) !important;
  box-sizing:      border-box !important;
}

/*
 * tit0001  — hero title column: grow to fill the left side
 */
.elementor-element-tit0001 {
  flex:      1 1 auto !important;
  min-width: 0 !important;
}

/*
 * tit0001  — hero title widget container bottom padding
 * Controlled here so Elementor UI padding fields remain free for top/left/right.
 */
.elementor-element-tit0001 > .elementor-widget-container {
  padding-bottom: 3rem;
}


/* ============================================================================
   3. NAVIGATION
   ============================================================================ */

.aether-nav {
  display:          flex;
  justify-content:  space-between;
  align-items:      center;
  height:           var(--nav-height);
  padding:          0 1.5rem;

  /* Floating pill */
  position:         fixed;
  top:              var(--nav-top);
  left:             50%;
  transform:        translateX(-50%);
  width:            calc(100% - 8vw);
  max-width:        var(--content-max);
  z-index:          1000;

  /* Type */
  font-family:      var(--font-mono);
  font-size:        var(--fs-mono-nav);
  text-transform:   uppercase;
  letter-spacing:   0.05em;

  /* Glassmorphism */
  background:       var(--glass-bg);
  backdrop-filter:  var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border:           var(--glass-border);
  border-radius:    var(--glass-radius);
  box-shadow:       var(--glass-shadow);
}

.nav-brand {
  font-family:    var(--font-mono);
  font-size:      var(--fs-mono-nav);
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color:          var(--clr-text);
}

.nav-links {
  display: flex;
  gap:     2rem;
}

.nav-links a {
  color:           var(--clr-text);
  text-decoration: none;
  position:        relative;
}

/* Underline slide-in on hover */
.nav-links a::after {
  content:          '';
  position:         absolute;
  bottom:           -4px;
  left:             0;
  width:            100%;
  height:           1px;
  background:       var(--clr-text);
  transform:        scaleX(0);
  transform-origin: right;
  transition:       transform 0.3s ease;
}
.nav-links a:hover::after {
  transform:        scaleX(1);
  transform-origin: left;
}


/* ============================================================================
   4. HERO — TITLE SIDE
   ============================================================================ */

/* Canvas row gets explicit top padding so it never crowds the text above */
.hero-title .title-row:last-child {
  padding-top: 3rem;
}

/* Keep phrase on a single line regardless of column width */
#hero-phrase {
  white-space: nowrap;
}

/* --- Main heading block --- */
.hero-title {
  width:          100%;
  display:        flex;
  flex-direction: column;
  gap:            0;
  font-family:    'OpenSauce', var(--font-display);
  font-size:      var(--hero-title-size);
  font-weight:    900;
  line-height:    1;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  display:        flex;
  flex-direction: column;
  align-items:    flex-start;
  color:          var(--clr-text);
  margin-bottom:  0;
  gap:            1rem;
}

/*
 * Title rows — fixed height = line-height * 1em
 * Prevents the globe GIF from stretching the row before it collapses.
 */
.title-row {
  display:     flex;
  align-items: center;
  gap:         1rem;
  white-space: nowrap;
  height:      0.85em;
  overflow:    visible;
}

/* --- Graffiti PROUD image --- */
.proud-img {
  width:          clamp(210px, 31.5vw, 560px) !important;
  height:         auto !important;
  display:        inline-block;
  vertical-align: middle;
  margin-bottom:  5rem;
}

/* --- Globe / amoeba GIF --- */
/* To resize: change --globe-size in Section 0 */
.amoeba-gif {
  width:            var(--globe-size);
  height:           var(--globe-size);
  display:          inline-block;
  vertical-align:   middle;
  object-fit:       cover;
  border-radius:    50%;
  clip-path:        circle(34% at 50% 50%);
  filter:
    drop-shadow(0 0 5px  rgba(0, 0, 0, 0.45))
    drop-shadow(0 0 18px rgba(0, 0, 0, 0.18));
}

/* --- A / AN article flip --- */
.hero-article {
  display:     inline-flex;
  align-items: baseline;
}
.article-n {
  display:    inline-block;
  opacity:    0;
  transform:  translateX(7px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}
.hero-article.show-n .article-n {
  opacity:   1;
  transform: translateX(0);
}

/* --- Morph canvas — pre-JS fallback ---
 * Before hero-morph.js fires the canvas is 0×0 and invisible.
 * min-width/height reserves the space so the title row doesn't
 * collapse and reflow once JS sets real dimensions.              */
#morphGlassCanvas {
  min-width:  clamp(180px, 30vw, 480px);
  min-height: 0.85em;
  display:    block;
}

/* --- "Available for hire" eyebrow badge --- */
.hero-eyebrow-badge {
  display:        inline-flex;
  align-items:    center;
  gap:            7px;
  background:     rgba(200, 200, 200, 0.20);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border:         1px solid rgba(180, 180, 180, 0.40);
  color:          var(--clr-text-dark);
  padding:        6px 16px;
  border-radius:  var(--chip-radius);
  font-family:    var(--font-mono);
  font-size:      var(--fs-mono-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom:  0.65rem;
  box-shadow:     0 2px 12px rgba(0, 0, 0, 0.06),
                  inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

/* Pulsing green dot */
.eyebrow-dot {
  width:         6px;
  height:        6px;
  background:    var(--clr-accent);
  border-radius: 50%;
  flex-shrink:   0;
  animation:     pulse-dot 2s ease-in-out infinite;
}
@keyframes pulse-dot {
  0%, 100% { opacity: 1;   transform: scale(1);   }
  50%       { opacity: 0.5; transform: scale(1.5); }
}

/* --- CTA chips row (LinkedIn / Download CV) --- */
.hero-title-chips {
  display:    flex;
  gap:        0.6rem;
  margin-top: 2rem;
}

.title-chip {
  display:        inline-flex;
  align-items:    center;
  gap:            6px;
  background:     var(--clr-text);
  color:          var(--clr-bg);
  padding:        var(--chip-padding);
  border-radius:  var(--chip-radius);
  font-family:    var(--font-mono);
  font-size:      var(--chip-font-size);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space:    nowrap;
  text-decoration: none;
  box-shadow:     0 4px 16px rgba(0, 0, 0, 0.2);
  transition:     background 0.2s ease, transform 0.2s ease;
}
.title-chip:hover {
  background: #333333;
  transform:  scale(1.05);
}

/* --- Legacy meta / button wrappers (Elementor widget types) --- */
.hero-meta { max-width: 340px; }
.hero-meta .elementor-widget-container { padding: 0; }
.hero-meta p {
  font-family:    var(--font-mono);
  font-size:      var(--fs-mono-sm);
  line-height:    1.6;
  text-transform: uppercase;
  color:          var(--clr-text-muted);
  margin:         0;
}
/* ── Global glass button — all Elementor buttons site-wide ──────────────
 * Mirrors the hero-eyebrow-badge: frosted glass, mono font, pill shape.
 * More specific rules below can still override padding/alignment per context. */
.elementor-button {
  background:              rgba(200, 200, 200, 0.20) !important;
  backdrop-filter:         blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border:                  1px solid rgba(180, 180, 180, 0.40) !important;
  box-shadow:              0 2px 12px rgba(0,0,0,0.06),
                           inset 0 1px 0 rgba(255,255,255,0.60) !important;
  color:                   var(--clr-text) !important;
  border-radius:           var(--chip-radius) !important;
  font-family:             var(--font-mono) !important;
  font-size:               var(--fs-mono-sm) !important;
  text-transform:          uppercase !important;
  letter-spacing:          0.10em !important;
  transition:              background 0.2s ease, box-shadow 0.2s ease,
                           border-color 0.2s ease !important;
}
.elementor-button:hover,
.elementor-button:focus {
  background:   rgba(200, 200, 200, 0.36) !important;
  border-color: rgba(180, 180, 180, 0.65) !important;
  box-shadow:   0 4px 18px rgba(0,0,0,0.10),
                inset 0 1px 0 rgba(255,255,255,0.75) !important;
  color:        var(--clr-text) !important;
}

.hero-btn { margin-top: 0.5rem; }
.hero-btn .elementor-button-wrapper { text-align: left; }
.hero-btn .elementor-button {
  padding: 8px 20px !important; /* keep hero-specific sizing */
}


/* ============================================================================
   5. HERO — PHOTO SIDE
   ============================================================================ */

.hero-circle-panel {
  align-self:      flex-start;
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  gap:             0;
}

/* Bobbing animation — 6 s, very subtle */
@keyframes hero-bob {
  0%, 100% { transform: translateY(0px);  }
  50%       { transform: translateY(-7px); }
}

.hero-circle-wrap {
  width:      var(--hero-photo-size);
  height:     var(--hero-photo-size);
  position:   relative;
  flex-shrink: 0;
  animation:  hero-bob 6s ease-in-out infinite;
}

/* The SVG fills the wrap and overflows for organic shadow */
#hero-blob-svg {
  position:  absolute;
  top:       0;
  left:      0;
  width:     100%;
  height:    100%;
  overflow:  visible;
  filter:    drop-shadow(0 8px 22px rgba(0, 0, 0, 0.25));
}

/* --- "Based in London" glassmorphic info card --- */
.hero-circle-desc {
  position:   relative;
  z-index:    10;
  text-align: center;
  margin-top: -2.8rem; /* pull up to overlap bottom of circle */
  max-width:  clamp(220px, 28vw, 380px);
  padding:    0.65rem 1.2rem;

  /* Glassmorphism */
  background:           rgba(255, 255, 255, 0.40);
  backdrop-filter:      var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border:               var(--glass-border);
  border-radius:        var(--glass-radius);
  box-shadow:           var(--glass-shadow);
}

.hero-circle-location {
  font-family:    var(--font-mono);
  font-size:      var(--fs-mono-sm);  /* 10 px */
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color:          var(--clr-text);
  margin:         0 0 0.5rem;
}

.hero-circle-tagline {
  font-family:    var(--font-mono);
  font-size:      var(--fs-mono-xs);  /* 9 px */
  line-height:    1.7;
  color:          var(--clr-text-muted);
  margin:         0;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}


/* ============================================================================
   6. BACKGROUND CANVAS
   ============================================================================ */

/* Fixed, behind everything, pointer-events off so it never blocks clicks */
canvas#canvas-bg {
  position:       fixed;
  top:            0;
  left:           0;
  width:          100vw;
  height:         100vh;
  z-index:        0;
  pointer-events: none;
  opacity:        0.2;
}

/* ============================================================================
   7. PROJECTS — TITLE + LAYOUT
   ============================================================================ */

/*
 * Section heading bar
 * Left padding = content indent (5 vw) + standard spacing (2 rem)
 * so text aligns with the hero title left edge.
 */
.section-title-bar {
  font-size:      var(--section-title-size);
  font-weight:    900;
  letter-spacing: -0.05em;
  line-height:    0.9;
  color:          var(--clr-text);
  padding:        2rem 2rem 2rem calc(5vw + 2rem);
  font-family:    var(--font-display);
  margin:         0;
}

/* ── Projects glass panel — PREVIEW ONLY (non-destructive)
 * Apply class "projects-glass-panel" to the Elementor container that
 * wraps the projects section in Elementor → Advanced → CSS Classes.
 * Remove the class to revert with zero side-effects.
 * ──────────────────────────────────────────────────────────────────── */
.projects-glass-panel {
  position:                relative;
  padding:                 3rem 3.5rem 4rem;
  box-sizing:              border-box;
  background:              var(--glass-bg);
  backdrop-filter:         var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border:                  var(--glass-border);
  border-radius:           20px;
  box-shadow:              var(--glass-shadow);
  overflow:                hidden;
}

/* Gilt hairline across the top — mirrors .about-glass::before */
.projects-glass-panel::before {
  content:    '';
  position:   absolute;
  top:        0; left: 4%; right: 4%;
  height:     1.5px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 217, 0, 0.55) 30%,
    rgba(26, 230, 39, 0.45) 70%,
    transparent 100%
  );
  border-radius: 1px;
}

/* Projects section — hidden until card-deck.js marks it ready */
.projects-section-title,
.projects-subtitle,
.deck-scene {
  opacity:    0;
  transition: opacity 0.7s ease;
}

/* Plain-text section heading — matches about-title style */
.projects-section-title {
  font-family:    var(--font-display);
  font-size:      clamp(2rem, 3.2vw, 3.8rem);
  font-weight:    900;
  line-height:    0.9;
  text-transform: uppercase;
  letter-spacing: -0.03em;
  margin:         0 0 0.75rem;
  text-align:     center;
}

/* Subtext below section title — same voice as hero-circle-tagline */
.projects-subtitle {
  font-family:    var(--font-mono);
  font-size:      var(--fs-mono-xs);
  line-height:    1.7;
  color:          var(--clr-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  text-align:     center;
  margin:         0.25rem 0 0;
}

/* Animated SVG title — no panel, just the SVG centered */
.projects-animated-title {
  display:         flex;
  justify-content: center;
  align-items:     center;
  margin:          4rem 0 2rem;
  padding:         0;
  background:      none;
  border:          none;
  box-shadow:      none;
}

#projects-svg-wrap {
  display: block;
  width:   clamp(200px, 40vw, 560px);
}

.projects-wordmark {
  display:    block;
  width:      100%;
  height:     auto;
  opacity:    0;
  transform:  translateY(18px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.projects-wordmark--visible {
  opacity:   1;
  transform: none;
}

/* Two-column layout: sidebar + grid */
.projects-inner {
  display:               grid;
  grid-template-columns: 250px 1fr;
  padding-left:          5vw;
}

.projects-sidebar {
  padding:        2rem;
  border-right:   1px solid var(--clr-border);
  border-top:     1px solid var(--clr-border);
  font-family:    var(--font-mono);
  font-size:      var(--fs-mono-sm);
  line-height:    1.6;
  color:          var(--clr-text-muted);
}

.projects-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  border-top:            1px solid var(--clr-border);
}


/* ============================================================================
   8. CARDS
   ============================================================================ */

.card {
  border-right:    1px solid var(--clr-border);
  border-bottom:   1px solid var(--clr-border);
  padding:         2rem;
  display:         flex;
  flex-direction:  column;
  position:        relative;
  transition:      background-color 0.3s ease;
  min-height:      var(--card-min-height);
  background:      var(--clr-bg);
}

/* Glassmorphic hover */
.card:hover {
  background:           rgba(255, 255, 255, 0.55);
  backdrop-filter:      blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.card:last-child { border-right: none; }

.card-header {
  display:       flex;
  align-items:   flex-start;
  gap:           1rem;
  margin-bottom: auto;
}

.card-num {
  font-size:      2rem;
  font-weight:    900;
  color:          rgba(0, 0, 0, 0.2);
  line-height:    0.8;
  letter-spacing: -0.05em;
  font-family:    var(--font-display);
}

.card-title-text {
  font-size:      2.5rem;
  font-weight:    900;
  letter-spacing: -0.05em;
  line-height:    0.9;
  text-transform: uppercase;
  color:          var(--clr-text);
  font-family:    var(--font-display);
  margin:         0;
}

.card-visual {
  display:         flex;
  justify-content: center;
  align-items:     center;
  flex-grow:       1;
  padding:         2rem 0;
}
.card-visual img {
  width:      220px;
  height:     auto;
  object-fit: cover;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.4s ease;
}
.card:hover .card-visual img {
  transform:  scale(1.05) translateY(-10px);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.2);
}

.card-footer-row {
  display:         flex;
  justify-content: space-between;
  align-items:     flex-end;
  margin-top:      2rem;
  font-family:     var(--font-mono);
}

.card-meta {
  font-size:   var(--fs-mono-sm);
  line-height: 1.6;
  color:       var(--clr-text-muted);
}

/* Pill button on cards */
.card .btn-pill {
  background:     transparent;
  border:         1px solid var(--clr-border);
  color:          var(--clr-text);
  padding:        8px 16px;
  border-radius:  var(--chip-radius);
  font-family:    var(--font-mono);
  font-size:      var(--fs-mono-sm);
  text-transform: uppercase;
  cursor:         pointer;
  transition:     all 0.2s ease;
}
.card .btn-pill:hover {
  background:    var(--clr-text);
  border-color:  var(--clr-text);
  color:         var(--clr-bg);
}

/* Empty/placeholder card */
.card-empty {
  background: repeating-linear-gradient(
    45deg,
    transparent,
    transparent    10px,
    rgba(0,0,0,0.05) 10px,
    rgba(0,0,0,0.05) 20px
  ) !important;
}
.card-empty .card-visual { opacity: 0.2; }


/* ============================================================================
   9A. CONTACT SECTION  (.contact-title, .contact-subtitle, .contact-glass)
   ============================================================================ */

/* Same visual as .projects-section-title — no opacity:0 gating */
.contact-title {
  font-family:    var(--font-display);
  font-size:      clamp(2rem, 3.2vw, 3.8rem);
  font-weight:    900;
  line-height:    0.9;
  text-transform: uppercase;
  letter-spacing: -0.03em;
  margin:         0 0 0.75rem;
  text-align:     center;
}

/* Same as .projects-subtitle */
.contact-subtitle {
  font-family:    var(--font-mono);
  font-size:      var(--fs-mono-xs);
  line-height:    1.7;
  color:          var(--clr-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  text-align:     center;
  margin:         0.25rem 0 0;
}

/* Apply class="contact-glass" to the Elementor container wrapping the form */
.contact-glass,
#portfolio-contact-parent,
#portfolio-contact-parent > .e-con-inner {
  position:                relative;
  padding:                 3rem 3.5rem 3.5rem !important;
  box-sizing:              border-box;
  background:              var(--glass-bg)         !important;
  backdrop-filter:         var(--glass-blur)       !important;
  -webkit-backdrop-filter: var(--glass-blur)       !important;
  border:                  var(--glass-border)     !important;
  border-radius:           20px                    !important;
  box-shadow:              var(--glass-shadow)     !important;
  overflow:                hidden;
}

/* Strip double border from inner wrapper */
#portfolio-contact-parent > .e-con-inner {
  border:     none  !important;
  box-shadow: none  !important;
}

/* Gilt hairline — matches about-glass and projects panel */
.contact-glass::before,
#portfolio-contact-parent::before {
  content:       '';
  position:      absolute;
  top:           0; left: 5%; right: 5%;
  height:        1.5px;
  background:    linear-gradient(90deg,
    transparent, var(--clr-accent-alt) 25%,
    var(--clr-accent-alt) 75%, transparent);
  border-radius: 2px;
  opacity:       0.6;
  pointer-events: none;
}

/* ============================================================================
   9. FOOTER
   ============================================================================ */

.aether-footer {
  display:          flex;
  justify-content:  space-between;
  align-items:      center;
  height:           var(--nav-height);
  padding:          0 1.5rem;

  /* Mirror nav pill */
  margin:           0 auto var(--nav-top);
  width:            calc(100% - 8vw);
  max-width:        var(--content-max);

  /* Type */
  font-family:      var(--font-mono);
  font-size:        var(--fs-mono-nav);
  text-transform:   uppercase;
  letter-spacing:   0.05em;
  color:            var(--clr-text-muted);

  /* Glassmorphism */
  background:       var(--glass-bg);
  backdrop-filter:  var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border:           var(--glass-border);
  border-radius:    var(--glass-radius);
  box-shadow:       var(--glass-shadow);
  overflow:         hidden;
}

.footer-copy {
  flex:        1;
  white-space: nowrap;
}

.footer-links {
  flex:       1;
  display:    flex;
  justify-content: center;
  gap:        1.5rem;
}

.footer-links a {
  color:           var(--clr-text-muted);
  text-decoration: none;
  position:        relative;
  transition:      color 0.2s;
}

.footer-links a:hover { color: var(--clr-text); }

.footer-links a::after {
  content:          '';
  position:         absolute;
  bottom:           -3px;
  left:             0;
  width:            100%;
  height:           1px;
  background:       currentColor;
  transform:        scaleX(0);
  transform-origin: right;
  transition:       transform 0.3s ease;
}

.footer-links a:hover::after {
  transform:        scaleX(1);
  transform-origin: left;
}

.footer-gif-slot {
  flex:            1;
  display:         flex;
  justify-content: flex-end;
  align-items:     center;
  overflow:        hidden;
  max-height:      calc(var(--nav-height) - 1rem);
}

.footer-gif {
  height:     100%;
  max-height: 28px;
  width:      auto;
  display:    block;
  object-fit: contain;
  /* Invert black to white, then tint to match muted text */
  filter:     invert(1) opacity(0.5);
}

/* ============================================================================
   10. CONTACT SECTION
   ============================================================================ */

/* ── Outer container — match content width ── */
#portfolio-contact {
  display:        grid;
  grid-template-columns: 1fr 1fr;
  align-items:    start;
  gap:            1rem 1.5rem;
  width:          100%;
  text-align:     left;
}

/* ── Labels ── */
#portfolio-contact .e-form-label-base {
  display:        block;
  font-family:    var(--font-mono);
  font-size:      var(--fs-mono-sm);
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color:          var(--clr-text-muted);
  margin-bottom:  0.35rem;
}

/* ── Inputs & textarea ── */
#portfolio-contact .e-form-input-base,
#portfolio-contact .e-form-textarea-base {
  width:         100%;
  background:    rgba(255, 255, 255, 0.10)                    !important;
  border:        1px solid rgba(0, 0, 0, 0.08)               !important;
  border-radius: 6px;
  padding:       0.65rem 0.85rem;
  font-family:   var(--font-mono);
  font-size:     var(--fs-mono-sm);
  color:         var(--clr-text);
  outline:       none;
  box-sizing:    border-box;
  /* Sunken — inset shadow on top, faint light on bottom edge */
  box-shadow:    inset 0 2px 6px rgba(0, 0, 0, 0.10),
                 inset 0 1px 2px rgba(0, 0, 0, 0.07),
                 0 1px 0   rgba(255, 255, 255, 0.55)         !important;
  transition:    box-shadow 0.2s, border-color 0.2s, background 0.2s;
}

#portfolio-contact .e-form-input-base::placeholder,
#portfolio-contact .e-form-textarea-base::placeholder {
  color:   var(--clr-text-muted);
  opacity: 0.6;
}

#portfolio-contact .e-form-input-base:focus,
#portfolio-contact .e-form-textarea-base:focus {
  border-color: rgba(26, 230, 39, 0.35)                      !important;
  background:   rgba(255, 255, 255, 0.10)                     !important;
  box-shadow:   inset 0 2px 6px rgba(0, 0, 0, 0.12),
                inset 0 1px 2px rgba(0, 0, 0, 0.08),
                0 0 0 2px rgba(26, 230, 39, 0.12)            !important;
  outline:      none;
}

/* ── Explicit grid placement ──────────────────────────────────────────────
 * Form children in DOM order:
 *  1 = first name label   2 = first name input
 *  3 = last name label    4 = last name input
 *  5 = email label        6 = email input
 *  7 = message label      8 = textarea
 *  9 = honeypot row (hidden)
 * 10 = submit button     11 = success message
 * ─────────────────────────────────────────────────────────────────────── */

/* First name — col 1, rows 1–2 */
#portfolio-contact > :nth-child(1) { grid-column: 1; grid-row: 1; }
#portfolio-contact > :nth-child(2) { grid-column: 1; grid-row: 2; }

/* Last name — col 2, rows 1–2 */
#portfolio-contact > :nth-child(3) { grid-column: 2; grid-row: 1; }
#portfolio-contact > :nth-child(4) { grid-column: 2; grid-row: 2; }

/* Email — full width, rows 3–4 */
#portfolio-contact > :nth-child(5) { grid-column: 1 / -1; grid-row: 3; }
#portfolio-contact > :nth-child(6) { grid-column: 1 / -1; grid-row: 4; }

/* Message — full width, rows 5–6 */
#portfolio-contact > :nth-child(7) { grid-column: 1 / -1; grid-row: 5; }
#portfolio-contact > :nth-child(8) { grid-column: 1 / -1; grid-row: 6; }

/* Honeypot — hidden, takes no visual space */
#portfolio-contact > :nth-child(9) { grid-column: 1 / -1; grid-row: 7; }

/* Submit — full width, row 8 */
#portfolio-contact > :nth-child(10) { grid-column: 1 / -1; grid-row: 8; }

/* Textarea — taller, no resize handle */
#portfolio-contact .e-form-textarea-base {
  resize:     none;
  min-height: 130px;
}

/* ── Submit button — matches .bj-entry__btn glass pill ── */
#portfolio-contact .e-form-submit-button-base {
  justify-self:                start;
  -webkit-appearance:          none;
  appearance:                  none;
  -webkit-tap-highlight-color: transparent;
  font-family:                 var(--font-mono);
  font-size:                   var(--fs-mono-sm);
  text-transform:              uppercase;
  letter-spacing:              0.1em;
  padding:                     0.45rem 1.4rem;
  border-radius:               99px;
  cursor:                      pointer;
  background:                  rgba(200, 200, 200, 0.20);
  backdrop-filter:             blur(10px);
  -webkit-backdrop-filter:     blur(10px);
  border:                      1px solid rgba(180, 180, 180, 0.40);
  box-shadow:                  0 2px 12px rgba(0, 0, 0, 0.06),
                               inset 0 1px 0 rgba(255, 255, 255, 0.60);
  color:                       var(--clr-text);
  transition:                  background 0.2s, border-color 0.2s, box-shadow 0.2s, transform 0.15s;
  outline:                     none;
}

#portfolio-contact .e-form-submit-button-base:hover {
  background:   rgba(200, 200, 200, 0.36);
  border-color: rgba(180, 180, 180, 0.65);
  box-shadow:   0 4px 18px rgba(0, 0, 0, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.75);
  transform:    translateY(-2px);
}

#portfolio-contact .e-form-submit-button-base:active {
  background:  rgba(200, 200, 200, 0.28) !important;
  transform:   translateY(1px);
}

/* ── Honeypot checkbox — hidden from real users ── */
#portfolio-contact .e-form-checkbox-row {
  display:    none !important;
  visibility: hidden;
  position:   absolute;
  left:       -9999px;
}

/* ── Submission messages ── */
#portfolio-contact .e-form-success-message-base,
#portfolio-contact .e-form-error-message-base,
#portfolio-contact > :nth-child(11) {
  grid-column:    1 / -1;
  font-family:    var(--font-mono);
  font-size:      var(--fs-mono-sm);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding:        0.75rem 0;
  text-align:     left;
}

#portfolio-contact .e-form-success-message-base,
#portfolio-contact .e-form-success-message-base .e-paragraph-base {
  color: var(--clr-accent);   /* electric green */
}

#portfolio-contact .e-form-error-message-base,
#portfolio-contact .e-form-error-message-base .e-paragraph-base {
  color:      #c47f00 !important;  /* amber — darker than ffd900, not full orange */
  background: transparent !important;
}

#portfolio-contact .e-form-error-message-base .e-paragraph-base,
#portfolio-contact .e-form-success-message-base .e-paragraph-base {
  text-align: left;
  margin:     0;
}


/* ============================================================================
   11. CARD DECK SHOWCASE  (.deck-scene, .deck-card, .deck-panel)
   ============================================================================ */

:root {
  --card-w:      200px;
  --card-h:      calc(var(--card-w) * 1.616);   /* 533:861 — both SVGs same ratio ≈ 323px */
  --card-radius: calc(var(--card-w) * 0.0275);  /* proportional corner ≈ 5.5px (halved) */
  --card-pad:    0.6rem;
}

/* Scene container — clips cards flying in from the left */
.deck-scene {
  position:   relative;
  width:       100%;
  overflow-x: hidden;
}

/* Card floor — absolute-positioned arena */
.deck-floor {
  position: relative;
  width:    100%;
  height:   820px;
}

/* ── Base card ─────────────────────────────────────────────────────── */
.deck-card {
  position:        absolute;
  width:           var(--card-w);
  height:          var(--card-h);
  cursor:          pointer;
  transform-style: preserve-3d;
  will-change:     transform, opacity;
  user-select:     none;
  -webkit-user-select: none;
  transition:      transform 0.18s ease;
}

/* 3-D flip container */
.deck-card__inner {
  position:         relative;
  width:            100%;
  height:           100%;
  transform-style:  preserve-3d;
  transition:       transform 0.48s cubic-bezier(0.4, 0, 0.2, 1);
}
.deck-card.is-flipped .deck-card__inner {
  transform: rotateY(180deg);
}

/* Shared face styles */
.deck-card__back,
.deck-card__front {
  position:             absolute;
  inset:                0;
  border-radius:        var(--card-radius);
  backface-visibility:  hidden;
  -webkit-backface-visibility: hidden;
  overflow:             hidden;
  padding:              var(--card-pad);
  box-sizing:           border-box;
  /* Layered shadow — card resting on a surface */
  box-shadow:
    3px  6px  16px rgba(0, 0, 0, 0.24),
    1px  2px   5px rgba(0, 0, 0, 0.15),
    0    0   0.5px rgba(255, 255, 255, 0.10) inset;
}

/* ── Back face ─────────────────────────────────────────────────────── */
.deck-card__back                     { background: #ffffff; }       /* plain cards — lime SVG */
.deck-card--special .deck-card__back { background: #c8c8c8; }      /* special cards — light grey */
.deck-card__back-img {
  position:      absolute;
  inset:         0;
  width:         100%;
  height:        100%;
  object-fit:    cover;
  border-radius: inherit;
  display:       block;
  pointer-events: none;
}

/* ── Dimple texture — linen / air-cushion card feel ────────────────── */
.deck-card__dimple {
  position:       absolute;
  inset:          0;
  border-radius:  inherit;
  background-size: 3px 3px;
  pointer-events: none;
  z-index:        3;
}
/* Plain cards — light SVG back: dark dots, multiply */
.deck-card--plain .deck-card__dimple {
  background-image: radial-gradient(circle, rgba(0, 0, 0, 0.28) 0.8px, transparent 0.8px);
  opacity:          0.55;
  mix-blend-mode:   multiply;
}
/* Special cards — dark SVG back: light dots, screen */
.deck-card--special .deck-card__dimple {
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.35) 0.8px, transparent 0.8px);
  opacity:          0.5;
  mix-blend-mode:   screen;
}


/* ── Front face ────────────────────────────────────────────────────── */
.deck-card__front {
  background: #ffffff;
  transform:  rotateY(180deg);
  /* Subtle inner border gives a real card feel */
  outline:    1px solid rgba(0, 0, 0, 0.06);
  outline-offset: -3px;
}

/* Plain playing card face */
.deck-card__playing {
  color:       #42E21C;   /* red suits — neon green */
  font-family: var(--font-display);
}
.deck-card__playing.is-black { color: #1c1c1c; }

.playing-corner {
  position:        absolute;
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  line-height:     1;
  gap:             2px;
}
.playing-corner.tl { top: var(--card-pad); left: var(--card-pad); }
.playing-corner.br {
  bottom:    var(--card-pad);
  right:     var(--card-pad);
  transform: rotate(180deg);
}
.playing-val  { font-size: 1.1rem; font-weight: 900; line-height: 1; }
.playing-suit { font-size: 0.85rem; line-height: 1; }

.playing-center {
  position:   absolute;
  top:        50%;
  left:       50%;
  transform:  translate(-50%, -50%);
  font-size:  3.8rem;
  line-height: 1;
  /* Slight emboss feel */
  filter: drop-shadow(0 1px 0 rgba(0,0,0,0.08));
}

/* Linen dimple on plain card front — same dot grid as back face */
.playing-dimple {
  position:          absolute;
  inset:             0;
  border-radius:     inherit;
  background-image:  radial-gradient(circle, rgba(0, 0, 0, 0.18) 0.8px, transparent 0.8px);
  background-size:   3px 3px;
  pointer-events:    none;
  opacity:           0.45;
  mix-blend-mode:    multiply;
  z-index:           3;
}

/* Project card face */
.deck-card__project {
  display:        flex;
  flex-direction: column;
  gap:            0.4rem;
}
.project-card-img {
  flex:          1;
  border-radius: calc(var(--card-radius) - var(--card-pad));
  overflow:      hidden;
  background:    #f0f0f0;
  min-height:    0;
}
.project-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 4px; }

/* Placeholder hatching when no image set */
.project-card-placeholder {
  width:  100%;
  height: 100%;
  background: repeating-linear-gradient(
    45deg,
    #f0f0f0,          #f0f0f0     4px,
    rgba(0,0,0,0.05)  4px,
    rgba(0,0,0,0.05)  8px
  );
}
.project-card-meta  { flex-shrink: 0; }
.project-card-title {
  font-family:    var(--font-display);
  font-weight:    900;
  font-size:      0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin:         0 0 0.15rem;
  color:          var(--clr-text);
}
.project-card-tags {
  font-family:    var(--font-mono);
  font-size:      0.5rem;
  text-transform: uppercase;
  color:          var(--clr-text-muted);
  margin:         0;
}

/* ── Blur overlay ──────────────────────────────────────────────────── */
.deck-overlay {
  position:        fixed;
  inset:           0;
  z-index:         500;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  background:      rgba(255, 255, 255, 0.12);
  opacity:         0;
  pointer-events:  none;
  transition:      opacity 0.35s ease;
}
.deck-overlay.is-active {
  opacity:        1;
  pointer-events: all;
}

/* ── Mute button ───────────────────────────────────────────────────── */
.deck-mute-btn {
  position:           absolute;
  top:                0;       /* overridden by JS after deal */
  right:              var(--content-padding-x);
  z-index:            500;     /* above all cards (plain: 20–99, special: 100+) */
  width:              60px;
  height:             60px;
  background:         transparent;
  border:             none;
  outline:            none;
  cursor:             pointer;
  padding:            0;
  z-index:            200;
  -webkit-appearance: none;
  appearance:         none;
  opacity:            0;
  transition:         opacity 0.5s ease;
}
.deck-mute-btn:hover,
.deck-mute-btn:focus,
.deck-mute-btn:active { background: transparent; outline: none; }

.deck-mute__on,
.deck-mute__off {
  position:   absolute;
  object-fit: contain;
}
.deck-mute__on {
  top:        50%;
  left:       50%;
  width:      100%;
  height:     100%;
  transform:  translate(-50%, -50%);
  transition: filter 0.25s ease;
}
/* Shift lime-green SVG toward #A6FF00 (chartreuse) on hover */
.deck-mute-btn:hover .deck-mute__on {
  filter: hue-rotate(-4deg) brightness(1.08) saturate(1.05);
}
/* No-symbol: 110% of button, shares same centre anchor as megaphone */
.deck-mute__off {
  top:        50%;
  left:       50%;
  width:      110%;
  height:     110%;
  transform:  translate(-50%, -50%) rotate(40deg);
  opacity:    0;
  transition: opacity 0.15s ease;
  filter:     invert(11%); /* #000 → #1c1c1c */
}
.deck-mute-btn.is-muted .deck-mute__off { opacity: 1; }

/* ── Project panel ─────────────────────────────────────────────────── */
.deck-panel {
  position:        fixed;
  right:           -440px;      /* default off-screen; JS overrides with left */
  top:             50%;
  transform:       translateY(-50%);
  width:           400px;
  max-height:      80vh;
  overflow-y:      auto;
  z-index:         600;
  padding:         2rem;
  box-sizing:      border-box;

  /* Hidden until .is-open */
  opacity:         0;
  pointer-events:  none;
  translate:       24px 0;   /* slight offset — slides in from the right */

  background:               rgba(255, 255, 255, 0.45);
  backdrop-filter:          blur(16px);
  -webkit-backdrop-filter:  blur(16px);
  border:                   var(--glass-border);
  border-radius:            var(--glass-radius);
  box-shadow:               var(--glass-shadow);

  transition: opacity 0.38s cubic-bezier(0.4, 0, 0.2, 1),
              translate 0.38s cubic-bezier(0.4, 0, 0.2, 1);
}
.deck-panel.is-open {
  opacity:        1;
  pointer-events: auto;
  translate:      0 0;
}

.deck-panel__close {
  position:        absolute;
  top:             1rem;
  right:           1rem;
  width:           28px;
  height:          28px;
  background:      transparent;
  border:          1.5px solid #7a9e00;
  color:           #7a9e00;
  border-radius:   50%;
  cursor:          pointer;
  outline:         none;
  font-family:     var(--font-mono);
  font-size:       0.6rem;
  display:         flex;
  align-items:     center;
  justify-content: center;
  line-height:     1;
  transition:      background 0.2s, color 0.2s, border-color 0.2s;
}
.deck-panel__close:hover,
.deck-panel__close:active { background: #1c1c1c; color: #7a9e00; border-color: #1c1c1c; }
.deck-panel__close:focus  { outline: none; }

.deck-panel__eyebrow {
  font-family:    var(--font-mono);
  font-size:      var(--fs-mono-xs);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color:          var(--clr-text-muted);
  margin:         0 0 0.35rem;
}
.deck-panel__title {
  font-family:    var(--font-display);
  font-weight:    900;
  font-size:      1.6rem;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  line-height:    0.9;
  margin:         0 0 0.85rem;
}
.deck-panel__desc {
  font-family:    var(--font-mono);
  font-size:      var(--fs-mono-sm);
  line-height:    1.75;
  color:          var(--clr-text);
  text-transform: uppercase;
  margin:         0 0 1.25rem;
}
.deck-panel__tags {
  display:       flex;
  flex-wrap:     wrap;
  gap:           0.4rem;
  margin-bottom: 1.5rem;
}
.deck-panel__tag {
  font-family:    var(--font-mono);
  font-size:      var(--fs-mono-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding:        4px 10px;
  border:         1px solid currentColor;
  border-radius:  var(--chip-radius);
}
/* Colour cycle — brand palette: lime green + golden yellow + charcoal */
.deck-panel__tag--0 { color: #0d6b12; background: rgba(26, 230, 39, 0.10);  }  /* lime green     */
.deck-panel__tag--1 { color: #7a6400; background: rgba(255, 217, 0, 0.15);  }  /* golden yellow  */
.deck-panel__tag--2 { color: #1c1c1c; background: rgba(28, 28, 28, 0.07);   }  /* charcoal       */
.deck-panel__tag--3 { color: #1a6e1f; background: rgba(26, 110, 31, 0.09);  }  /* deep green     */
.deck-panel__link { display: inline-flex; }


/* ============================================================================
   11. BLACKJACK
   ============================================================================ */

/* ── Entry point ── */
.bj-entry {
  display:         flex;
  justify-content: center;
  /* Negative margin pulls the button up into the canvas breathing room */
  margin-top:      -2.5rem;
  padding:         0 var(--content-padding-x);
}
.bj-entry__eyebrow {
  font-family:     var(--font-mono);
  font-size:       var(--fs-mono-sm);
  text-transform:  uppercase;
  letter-spacing:  0.08em;
  color:           var(--clr-text-muted);
}
.bj-entry__btn {
  -webkit-appearance:          none;
  appearance:                  none;
  -webkit-tap-highlight-color: transparent;
  font-family:                 var(--font-mono);
  font-size:                   var(--fs-mono-sm);
  text-transform:              uppercase;
  letter-spacing:              0.1em;
  padding:                     0.45rem 1.1rem;
  border-radius:               99px;
  cursor:                      pointer;
  /* Glass — matches .hero-eyebrow-badge */
  background:                  rgba(200, 200, 200, 0.20);
  backdrop-filter:             blur(10px);
  -webkit-backdrop-filter:     blur(10px);
  border:                      1px solid rgba(180, 180, 180, 0.40);
  box-shadow:                  0 2px 12px rgba(0, 0, 0, 0.06),
                               inset 0 1px 0 rgba(255, 255, 255, 0.60);
  color:                       var(--clr-text);
  transition:                  background 0.2s, border-color 0.2s, box-shadow 0.2s, transform 0.15s;
}
.bj-entry__btn:focus  { outline: none; }
.bj-entry__btn:hover  {
  background:    rgba(200, 200, 200, 0.36);
  border-color:  rgba(180, 180, 180, 0.65);
  box-shadow:    0 4px 18px rgba(0, 0, 0, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.75);
  color:         var(--clr-text);
  transform:     translateY(-2px);
}
.bj-entry__btn:active {
  background:    rgba(200, 200, 200, 0.28);
  transform:     translateY(1px);
}

/* ── Overlay — brand accent override ── */
#bj-overlay { --clr-accent: #42E21C; }

/* ── Overlay ── */
#bj-overlay {
  position:        fixed;
  inset:           0;
  background:      var(--clr-bg);
  z-index:         9999;
  display:         flex;
  align-items:     stretch;
  justify-content: center;
  overflow:        hidden;
  opacity:         0;
  transition:      opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
#bj-overlay.bj-overlay--open { opacity: 1; }

/* ── Kill Elementor's #cc3366 pink bleed — three vectors ────────────────
   1. outline / box-shadow  — covered below with !important
   2. background-color      — Elementor sets this on :active at high specificity
   3. ::selection highlight — fires when click-dragging across button text
   ──────────────────────────────────────────────────────────────────────── */

/* Vector 1 + 2: outline, box-shadow, AND background-color on all states  */
#bj-overlay *:focus,
#bj-overlay *:focus-visible,
#bj-overlay *:active,
.bj-entry__btn:focus,
.bj-entry__btn:focus-visible,
.bj-entry__btn:active,
.about-next-btn:focus,
.about-next-btn:focus-visible,
.about-next-btn:active,
.deck-mute-btn:focus,
.deck-mute-btn:focus-visible,
.deck-mute-btn:active,
#deck-panel-close:focus,
#deck-panel-close:focus-visible,
#deck-panel-close:active,
.deck-panel__link:focus,
.deck-panel__link:focus-visible,
.deck-panel__link:active,
.bj-btn:focus,
.bj-btn:active {
  outline:                     none !important;
  box-shadow:                  none !important;
  background-color:            transparent !important;
  -webkit-tap-highlight-color: transparent !important;
}

/* Restore our own glass background-color on :active (overrides the transparent above
   with higher specificity — own class beats the generic list above)       */
.bj-entry__btn:active   { background-color: rgba(200, 200, 200, 0.28) !important; }
.about-next-btn:active  { background-color: rgba(200, 200, 200, 0.30) !important; }
.bj-btn--primary:active { background-color: rgba(200, 200, 200, 0.30) !important; }
.bj-btn--secondary:active { background-color: rgba(200, 200, 200, 0.20) !important; }

/* Vector 3: kill the pink ::selection highlight caused by click-dragging  */
.bj-entry__btn::selection,
.about-next-btn::selection,
.deck-mute-btn::selection,
#deck-panel-close::selection,
.bj-btn::selection {
  background-color: transparent;
}

/* Also prevent text selection entirely on buttons — drag should never select */
.bj-entry__btn,
.about-next-btn,
.deck-mute-btn,
.bj-btn,
#deck-panel-close {
  -webkit-user-select: none;
  user-select:         none;
}

/* ── Table (inner container) ── */
#bj-table {
  width:           100%;
  max-width:       var(--content-max);
  height:          100%;
  padding:         min(4vh, 2rem) var(--content-padding-x) min(4vh, 2rem);
  display:         flex;
  flex-direction:  column;
  justify-content: space-between;
  align-items:     center;
  box-sizing:      border-box;
}

/* Every direct child that holds content stretches full width */
#bj-table > .bj-area,
#bj-table > .bj-mid,
#bj-table > .bj-player-zone,
#bj-table > .bj-controls {
  width: 100%;
}

/* ── Player zone — tracker + cards, tightly spaced ── */
.bj-player-zone {
  display:        flex;
  flex-direction: column;
  gap:            1rem;
  width:          100%;
}

/* Mute — absolute bottom-right, direct overlay child.
   right: calc(padding - 12px) centres the 60px button on the same X as the 36px swatches:
   swatch centre from right = padding + 18px; mute centre from right = right + 30px
   → right = padding + 18 - 30 = padding - 12px  */
#bj-overlay > .bj-mute-btn {
  position:   absolute;
  bottom:     min(4vh, 2rem);   /* matches table bottom padding */
  right:      calc(var(--content-padding-x) - 12px);
  width:      60px;
  height:     60px;
  background: none;
  border:     none;
  cursor:     pointer;
  padding:    0;
}
#bj-overlay > .bj-mute-btn .bj-mute__on,
#bj-overlay > .bj-mute-btn .bj-mute__off {
  position: absolute;
  top:      50%;
  left:     50%;
}
#bj-overlay > .bj-mute-btn .bj-mute__on {
  width:      100%;
  height:     100%;
  transform:  translate(-50%, -50%);
  transition: filter 0.25s ease;
}
#bj-overlay > .bj-mute-btn .bj-mute__off {
  width:      45px;
  height:     45px;
  transform:  translate(-50%, -50%) rotate(40deg);
  opacity:    0;
  filter:     invert(11%);
  transition: opacity 0.15s ease;
}
#bj-overlay > .bj-mute-btn.is-muted .bj-mute__off { opacity: 1; }
#bj-overlay > .bj-mute-btn:hover .bj-mute__on { filter: hue-rotate(-4deg) brightness(1.08) saturate(1.05); }


/* ── Hand areas ── */
.bj-area {
  width:          100%;
  display:        flex;
  flex-direction: column;
  gap:            0.6rem;
}
.bj-area__label {
  font-family:    var(--font-mono);
  font-size:      var(--fs-mono-sm);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color:          var(--clr-text-muted);
  display:        flex;
  align-items:    baseline;
  gap:            0.5rem;
  min-height:     1.4rem;  /* prevents row from collapsing before totals appear */
}
.bj-area__label span {
  font-family:  var(--font-display);
  font-size:    1.1rem;
  font-weight:  900;
  color:        var(--clr-text);
  display:      inline-block;
  min-width:    2ch;  /* reserves space so the number appearing doesn't reflow */
}

/* ── Scroll wrapper — handles overflow so the inner row stays visible ── */
.bj-cards-scroll {
  width:           100%;
  overflow-x:      auto;
  overflow-y:      visible;
  /* Large padding gives card shadows room; negative margin keeps layout flush */
  padding:         20px 8px;
  margin:          -20px -8px;
  scrollbar-width: none;
  box-sizing:      content-box;
  /* Prevent the forced overflow-y:auto from clipping the shadow */
  clip-path:       none;
}
.bj-cards-scroll::-webkit-scrollbar { display: none; }

/* ── Cards row — nowrap, overflow visible so box-shadows aren't clipped ── */
.bj-cards-row {
  display:    flex;
  flex-wrap:  nowrap;
  gap:        16px;
  min-height: calc(var(--bj-card-h) + 4px);
  overflow:   visible;
}

/* Card height fills available space.
   Chrome ≈ 420px (padding × 2 + labels + mid + controls + gaps).
   Two card rows share (100dvh - 420px) equally.
   Width derived from height / aspect-ratio 1.616. */
:root {
  --bj-card-h: clamp(100px, calc((100dvh - 420px) / 2), 260px);
  --bj-card-w: calc(var(--bj-card-h) / 1.616);
}

.bj-game-card {
  position:        relative  !important;
  width:           var(--bj-card-w) !important;
  height:          var(--bj-card-h) !important;
  flex-shrink:     0          !important;  /* JS fitCards() handles scaling; flex must not squish */
  cursor:          default    !important;
  transform-style: preserve-3d;
}
.bj-game-card .deck-card__inner {
  transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}
.bj-game-card .playing-val    { font-size: calc(var(--bj-card-w) * 0.10); }
.bj-game-card .playing-suit   { font-size: calc(var(--bj-card-w) * 0.08); }
.bj-game-card .playing-center { font-size: calc(var(--bj-card-w) * 0.22); }

/* Face-card icon — WebP, transparent bg, dark (#1c1c1c) artwork */
.bj-face-icon {
  display:    block;
  width:      calc(var(--bj-card-w) * 1.026); /* new faces — 95% of legacy size */
  height:     auto;
  max-width:  none;
}
.bj-face-icon--legacy {
  width:      calc(var(--bj-card-w) * 1.08);  /* QC / KC originals — keep original size */
}
.bj-face-icon--kd {
  width:      calc(var(--bj-card-w) * 0.975); /* KD artwork runs large — 95% correction */
}
/* Portfolio cards (outside overlay) — CSS filter chains */
.bj-face-icon--black { filter: brightness(0.9); }
.bj-face-icon--red   { filter: brightness(0) invert(78%) sepia(1) saturate(3) hue-rotate(22deg) brightness(0.81); }
/* Overlay face icons: filter set inline by JS via per-colour SVG filters — no CSS filter needed here */

/* ── Pip grid — numbered cards 2-10 ───────────────────────────────────── */
.bj-pip-grid {
  position:       absolute;
  top:            var(--card-pad);
  left:           var(--card-pad);
  right:          var(--card-pad);
  bottom:         var(--card-pad);
  pointer-events: none;
}
.bj-pip-sym {
  position:    absolute;
  transform:   translate(-50%, -50%);
  font-size:   calc(var(--bj-card-w) * 0.175);
  line-height: 1;
  user-select: none;
}
.bj-pip-sym--inv {
  transform: translate(-50%, -50%) rotate(180deg);
}

/* ── Ace of Spades — oversized center symbol ── */
.bj-ace-spades {
  font-size: calc(var(--bj-card-w) * 0.88) !important;
}

/* ── Deck plain cards — share pip/face CSS with BJ by aliasing the variable ── */
/* :not(.bj-game-card) prevents this from overriding the BJ card sizing */
.deck-card--plain:not(.bj-game-card) {
  --bj-card-w: var(--card-w);
  --bj-card-h: var(--card-h);
}


/* ── Mid section (dealer line + result) — fixed height prevents layout shift ── */
.bj-mid {
  width:          100%;
  display:        flex;
  flex-direction: column;
  gap:            0.25rem;
  min-height:     5rem;   /* holds dealer line + largest result message */
}
.bj-dealer-line {
  font-family:    var(--font-mono);
  font-size:      var(--fs-mono-sm);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color:          var(--clr-text-muted);
  margin:         0;
}
.bj-message {
  font-family:    'OpenSauce', var(--font-display);
  font-size:      clamp(1.4rem, 4vw, 2rem);
  font-weight:    900;
  letter-spacing: -0.04em;
  color:          var(--clr-text);
  margin:         0;
  min-height:     2.4rem;
}
.bj-message--win  {
  background:              linear-gradient(90deg, #42E21C, #7FFF00, #42E21C);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip:         text;
}
/* Draw-mode win: individual letter <span>s carry their own colour */
.bj-message--win-draw { -webkit-text-fill-color: initial; color: inherit; }
.bj-message--win-draw span { display: inline; }
.bj-message--lose  { color: var(--clr-text); }
.bj-message--push  { color: var(--clr-text-muted); }
.bj-message--ready { color: var(--clr-text); }

/* ── Controls ── */
.bj-controls {
  position:       relative;
  display:        flex;
  gap:            0.6rem;
  flex-wrap:      wrap;
  align-items:    center;
}

/* Back button pinned to the centre of the controls row */
#bj-back {
  position:  absolute;
  left:      50%;
  transform: translateX(-50%);
}
.bj-btn {
  -webkit-appearance:      none;
  appearance:              none;
  -webkit-tap-highlight-color: transparent;
  display:                 inline-flex;
  align-items:             center;
  justify-content:         center;
  font-family:             var(--font-mono);
  font-size:               var(--fs-mono-sm);
  text-transform:          uppercase;
  letter-spacing:          0.1em;
  padding:                 0.55rem 1.3rem;
  border-radius:           99px;
  cursor:                  pointer;
  transition:              background 0.2s, color 0.2s, border-color 0.2s, transform 0.15s;
  line-height:             1;
  text-align:              center;
  -webkit-user-select:     none;
  user-select:             none;
}
.bj-btn:focus                { outline: none; }
.bj-btn:focus-visible        { outline: 2px solid var(--clr-text); outline-offset: 3px; }
.bj-btn:active               { transform: translateY(1px); }

.bj-btn--primary {
  background:              rgba(200, 200, 200, 0.22);
  backdrop-filter:         blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border:                  1px solid rgba(180, 180, 180, 0.45);
  box-shadow:              0 2px 12px rgba(0, 0, 0, 0.08),
                           inset 0 1px 0 rgba(255, 255, 255, 0.65);
  color:                   var(--clr-text);
}
.bj-btn--primary:hover {
  background:   rgba(200, 200, 200, 0.38);
  border-color: rgba(180, 180, 180, 0.70);
  box-shadow:   0 4px 18px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.80);
  color:        var(--clr-text);
  transform:    translateY(-2px);
}
.bj-btn--primary:active { background: rgba(200, 200, 200, 0.30); transform: translateY(1px); }

.bj-btn--secondary {
  background:              rgba(200, 200, 200, 0.10);
  backdrop-filter:         blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border:                  1px solid rgba(180, 180, 180, 0.35);
  box-shadow:              0 2px 12px rgba(0, 0, 0, 0.05),
                           inset 0 1px 0 rgba(255, 255, 255, 0.50);
  color:                   var(--clr-text);
}
.bj-btn--secondary:hover {
  background:   rgba(200, 200, 200, 0.28);
  border-color: rgba(180, 180, 180, 0.60);
  box-shadow:   0 4px 18px rgba(0, 0, 0, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.70);
  color:        var(--clr-text);
  transform:    translateY(-2px);
}
.bj-btn--secondary:active { background: rgba(200, 200, 200, 0.20); color: var(--clr-text); transform: translateY(1px); }

.bj-btn--ghost {
  background:              transparent;
  background-color:        transparent;
  color:                   var(--clr-text-muted);
  border:                  1.5px solid transparent;
}
.bj-btn--ghost:hover  { color: var(--clr-text); background: transparent; background-color: transparent; }
.bj-btn--ghost:active { transform: translateY(1px); background: transparent; background-color: transparent; }

/* ── Card back colour variants ── */
/* Black: uses playing-card-black.svg natively — no CSS filter needed */
/* Gold: white background, lime SVG hue-shifted to gold */
.bj-back--gold .deck-card__back         { background: #ffffff; }
.bj-back--gold .deck-card__back-img     { filter: sepia(1) saturate(2.5) brightness(0.99); }
/* Purple: cool blue-ice filter — intentional */
.bj-back--purple .deck-card__back       { filter: hue-rotate(152deg) saturate(0.62) brightness(0.88); }
/* Draw mode: white paper background, SVG hidden so strokes are clearly visible */
.bj-drawable .deck-card__back           { background: #ffffff !important; filter: none !important; }
.bj-drawable .deck-card__back-img       { opacity: 0 !important; }

/* ── Pip tracker ── */
.bj-tracker {
  display:     flex;
  gap:         7px;
  align-items: center;
  width:       100%;
}
.bj-pip {
  width:            10px;
  height:           10px;
  border:           1.5px solid var(--clr-text-muted);
  border-radius:    2px;
  background:       transparent;
  transition:       background 0.2s, border-color 0.2s;
}
.bj-pip--filled {
  background:   var(--clr-text);
  border-color: var(--clr-text);
}
@keyframes bj-pip-pop {
  0%   { transform: scale(1);   }
  45%  { transform: scale(1.6); }
  100% { transform: scale(1);   }
}
.bj-pip--pop { animation: bj-pip-pop 0.42s ease-out; }

/* ── Effects panel — center-right vertical strip (swatches only) ── */
.bj-effects-panel {
  position:        absolute;
  right:           var(--content-padding-x);
  top:             50%;
  transform:       translateY(-50%);
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  gap:             14px;
  pointer-events:  auto;
}

/* ── Swatches (vertical inside effects panel) ── */
.bj-swatches {
  display:        none;
  flex-direction: column;
  gap:            10px;   /* +4px vs base to give breathing room for the scale(1.12) grow */
  align-items:    center;
}
.bj-swatches--visible { display: flex; }

.bj-swatch {
  -webkit-appearance: none;
  appearance:         none;
  width:              36px;
  height:             36px;
  border-radius:      50%;
  border:             none;
  cursor:             default;
  opacity:            0.28;
  transition:         opacity 0.2s, transform 0.15s;
  padding:            0;
  -webkit-tap-highlight-color: transparent;
  flex-shrink:        0;
}
.bj-swatch:focus { outline: none; }
/* Locked swatches — dim, no pointer interaction at all */
.bj-swatch:not(.bj-swatch--unlocked) { cursor: default; pointer-events: none; }
.bj-swatch--unlocked             { cursor: pointer; opacity: 1; }
/* Hover and active both stay at scale(1.12) — active stays grown */
.bj-swatch--unlocked:hover,
.bj-swatch--active               { transform: scale(1.12); }
/* ── Per-deck suit colours ─────────────────────────────────────────────── */
/* Per-deck pip/text colours (face icon filters are handled inline by JS) */
#bj-overlay.bj-deck--black  .deck-card__playing:not(.is-black) { color: #1c1c1c; }
#bj-overlay.bj-deck--gold   .deck-card__playing:not(.is-black) { color: #FFCC00; }
#bj-overlay.bj-deck--purple .deck-card__playing:not(.is-black) { color: #60A5FA; }

/* Pencil icon states */
.bj-swatch-pencil {
  font-size:      14px;
  line-height:    1;
  pointer-events: none;
  filter:         brightness(0) invert(30%);   /* locked: dark grey (#4a4a4a) */
  transition:     filter 0.25s;
}
.bj-swatch--unlocked .bj-swatch-pencil {
  filter: brightness(0);                        /* unlocked idle: #1c1c1c black */
}
.bj-swatch--unlocked:hover .bj-swatch-pencil {
  /* hover: #C6CC00 yellow-green */
  filter: brightness(0) invert(78%) sepia(1) saturate(8) hue-rotate(7deg) brightness(0.88);
}
.bj-swatch--active .bj-swatch-pencil {
  filter: brightness(0);                        /* selected: solid black */
}

/* ── Swatch hover tooltips ── */
.bj-swatch {
  overflow: visible; /* allow tooltip to escape button bounds */
}
.bj-swatch-tip {
  position:               absolute;
  right:                  calc(100% + 10px);
  top:                    50%;
  transform:              translateY(-50%);
  white-space:            nowrap;
  pointer-events:         none;
  /* Glass badge — mirrors .hero-eyebrow-badge */
  background:             rgba(200, 200, 200, 0.20);
  backdrop-filter:        blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border:                 1px solid rgba(180, 180, 180, 0.40);
  border-radius:          99px;
  padding:                5px 12px;
  font-family:            var(--font-mono);
  font-size:              var(--fs-mono-xs);
  letter-spacing:         0.1em;
  text-transform:         uppercase;
  color:                  var(--clr-text);
  box-shadow:             0 2px 10px rgba(0, 0, 0, 0.08),
                          inset 0 1px 0 rgba(255, 255, 255, 0.55);
  /* Fade */
  opacity:                0;
  transition:             opacity 0.18s ease, transform 0.18s ease;
  transform:              translateY(-50%) translateX(4px);
}
.bj-swatch--unlocked:hover .bj-swatch-tip {
  opacity:   1;
  transform: translateY(-50%) translateX(0);
}

/* ── Draw toggle button ── */
.bj-draw-btn {
  display:    none;
  align-items:     center;
  justify-content: center;
  -webkit-appearance: none;
  appearance:    none;
  -webkit-tap-highlight-color: transparent;
  width:         36px;
  height:        36px;
  border-radius: 50%;
  border:        1.5px solid var(--clr-text-muted);
  background:    transparent;
  color:         var(--clr-text-muted);
  cursor:        pointer;
  padding:       0;
  transition:    background 0.2s, color 0.2s, border-color 0.2s, transform 0.15s;
}
.bj-draw-btn:focus        { outline: none; }
.bj-draw-btn:hover        { background: transparent; background-color: transparent; border-color: var(--clr-text); color: var(--clr-text); transform: scale(1.08); }
.bj-draw-btn:active       { background: transparent; background-color: transparent; transform: scale(0.94); }
.bj-draw-btn--visible { display: inline-flex; }
.bj-draw-btn--on {
  background:   var(--clr-text);
  border-color: var(--clr-text);
  color:        #fff;
}

/* ── Toast notification ── */
.bj-toast {
  position:    absolute;
  top:         28px;
  left:        50%;
  transform:   translateX(-50%) translateY(-6px);
  background:  var(--clr-text);
  color:       #fff;
  font-family: var(--font-mono);
  font-size:   var(--fs-mono-sm);
  text-transform:  uppercase;
  letter-spacing:  0.1em;
  padding:         0.45rem 1.1rem;
  border-radius:   99px;
  white-space:     nowrap;
  opacity:         0;
  pointer-events:  none;
  transition:      opacity 0.25s ease, transform 0.25s ease;
  z-index:         1;
}
.bj-toast--show {
  opacity:   1;
  transform: translateX(-50%) translateY(0);
}

/* ── "draw on me" hint text — shows on the white back before any strokes ── */
.bj-drawable .deck-card__back::before {
  content:        'draw\Aon\Ame';
  white-space:    pre;
  position:       absolute;
  top:            50%;
  left:           50%;
  transform:      translate(-50%, -50%);
  z-index:        1;  /* above white bg, below canvas (z-index:5) */
  color:          rgba(0, 0, 0, 0.10);
  font-family:    var(--font-mono);
  font-size:      calc(var(--bj-card-w) * 0.13);
  text-align:     center;
  line-height:    1.7;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  pointer-events: none;
  user-select:    none;
}

/* ── Freehand draw canvas (sits over .deck-card__back hint text) ── */
.bj-draw-canvas {
  position:       absolute;
  top:            0;
  left:           0;
  width:          100%;
  height:         100%;
  border-radius:  inherit;
  cursor:         crosshair;
  pointer-events: auto;
  z-index:        5;
}
.bj-drawable { cursor: crosshair !important; }


/* ============================================================================
   §A. ABOUT — abt0001
   ============================================================================ */

.about-section {
  padding: 6rem var(--content-padding-x);
}

.about-bio {
  max-width:            720px;
  padding:              2.4rem 2.8rem;
  opacity:              0;
  transform:            translateY(20px);
  transition:           opacity 0.55s ease, transform 0.55s ease;

  /* Glassmorphism — matches .hero-circle-desc */
  background:           rgba(255, 255, 255, 0.40);
  backdrop-filter:      var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border:               var(--glass-border);
  border-radius:        var(--glass-radius);
  box-shadow:           var(--glass-shadow);
}
.about-bio.about--visible {
  opacity:   1;
  transform: none;
}

.about-bio__eyebrow {
  font-family:    var(--font-mono);
  font-size:      0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color:          var(--clr-accent);
  margin:         0 0 1.1rem;
}
.about-bio__heading {
  font-family: var(--font-display);
  font-size:   clamp(1.8rem, 3.5vw, 2.8rem);
  font-weight: 900;
  line-height: 1.1;
  margin:      0 0 1.2rem;
  color:       var(--clr-text);
}
.about-bio__text {
  font-family: var(--font-mono);
  font-size:   0.9rem;
  line-height: 1.9;
  color:       var(--clr-text-muted);
  margin:      0;
}


/* ============================================================================
   §A. ABOUT — 60/40 panel layout, auto-advancing stories
   ============================================================================
 * .about-wrap          flex row: 60% glass panel + 40% globe panel
 * .about-glass         glassmorphic story panel (left)
 * .about-globe-panel   globe canvas container (right)
 * .about-progress-*    timer progress bar at foot of glass
 * ========================================================================= */

/* ── Outer wrapper ─────────────────────────────────────────────────────── */
/* Full-bleed breakout: escapes Elementor's inner-container max-width,
   then re-applies our own content padding so it aligns with the nav.    */
.about-wrap {
  display:         flex;
  align-items:     stretch;
  gap:             2rem;
  width:           100vw;
  margin-left:     calc(50% - 50vw);
  padding:         0 var(--content-padding-x);
  box-sizing:      border-box;
}

/* ── Glass panel (left, 60%) ───────────────────────────────────────────── */
.about-glass {
  position:                relative;
  flex:                    0 0 60%;
  min-height:              60vh;
  display:                 flex;
  flex-direction:          column;
  padding:                 3rem 3.5rem 3.5rem;   /* bottom: 56px (3.5rem) */
  box-sizing:              border-box;
  overflow:                hidden;               /* clips .about-bg-num at edge */
  background:              var(--glass-bg);
  backdrop-filter:         var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border:                  var(--glass-border);
  border-radius:           20px;
  box-shadow:              var(--glass-shadow);
}

/* Gilt hairline top */
.about-glass::before {
  content:       '';
  position:      absolute;
  top:           0; left: 5%; right: 5%;
  height:        1.5px;
  background:    linear-gradient(90deg,
    transparent, var(--clr-accent-alt) 25%,
    var(--clr-accent-alt) 75%, transparent);
  border-radius: 2px;
  opacity:       0.6;
}

/* ── Eyebrow bar ───────────────────────────────────────────────────────── */
.about-eyebrow-bar {
  display:         flex;
  align-items:     center;
  gap:             0.5rem;
  margin-bottom:   4.4rem;   /* +2rem extra pushes title/body down */
  flex-shrink:     0;
}

.about-num {
  font-family:    var(--font-mono);
  font-size:      0.68rem;
  font-weight:    700;
  color:          var(--clr-accent);
  letter-spacing: 0.12em;
}

.about-label {
  font-family:    var(--font-mono);
  font-size:      0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  flex:           1;
  color:          transparent;   /* invisible spacer — layout preserved */
  user-select:    none;
  pointer-events: none;
}

/* ── Content wrapper — clipping box for z-depth transitions ────────────── */
.about-content-wrap {
  flex:            1;           /* fills space, pushing dots to panel bottom */
  position:        relative;
  overflow:        hidden;
  min-height:      220px;
}

/* ── Individual content layers — stacked, GSAP owns visibility ────────── */
.about-content {
  position:        absolute;
  inset:           0;
  display:         flex;
  flex-direction:  column;
  justify-content: center;
  will-change:     transform, opacity, filter;
}

/* Title — Inter 900, same as hero */
.about-title {
  font-family:     var(--font-display);
  font-size:       clamp(2rem, 3.2vw, 3.8rem);
  font-weight:     900;
  line-height:     0.95;
  text-transform:  uppercase;
  letter-spacing:  -0.03em;
  margin:          0 0 1.4rem;
}

/* Body — Space Mono, matches Origin chip */
.about-body {
  font-family:     var(--font-mono);
  font-size:       0.78rem;
  line-height:     2;
  color:           var(--clr-text-muted);
  max-width:       52ch;
  margin:          0;
}

/* ── Progress tabs — sit 2rem below body text ───────────────────────────
   Total row = 75% of content width (align-self prevents flex stretch).
   Active tab is wider than inactive via flex-grow transition.
   The active tab contains a fill animating left→right over PANEL_DURATION. */
.about-dots {
  display:         flex;
  gap:             8px;
  /* Match body font context so ch resolves against Space Mono at 0.78rem,
     identical to the max-width: 52ch on .about-body                       */
  font-family:     var(--font-mono);
  font-size:       0.78rem;
  width:           calc(52ch * 0.75);
  align-self:      flex-start;
  flex-shrink:     0;
}

.about-dot {
  flex:            1;
  height:          3px;
  border-radius:   2px;
  background:      rgba(0, 0, 0, 0.10);
  position:        relative;
  overflow:        hidden;
  cursor:          pointer;
  /* Duration matches TRANS_IN + TRANS_OUT (0.42 + 0.52 = 0.94s) */
  transition:      flex-grow 0.94s ease-in-out;
}

/* Active tab is visibly wider */
.about-dot.is-active {
  flex-grow:       2;
}

/* Fill bar — GSAP animates scaleX 0→1 over PANEL_DURATION */
.about-dot-fill {
  position:        absolute;
  inset:           0;
  border-radius:   2px;
  background:      linear-gradient(90deg,
    var(--clr-accent) 0%,
    var(--clr-accent-alt) 100%);
  transform:       scaleX(0);
  transform-origin: left center;
}

/* ── Next-panel button — sits half on/half off the right edge of .about-glass
   Vertical position is set by about-scroll.js using the dots row bounding rect */
.about-next-btn {
  position:                absolute;
  /* left + top set by about-scroll.js from glass bounding rect;
     transform centres the button on that point (half on / half off) */
  transform:               translateX(-50%) translateY(-50%);
  /* circular */
  width:                   2.8rem;
  height:                  2.8rem;
  border-radius:           50%;
  /* glass recipe — matches .bj-entry__btn / .hero-eyebrow-badge */
  background:              rgba(200, 200, 200, 0.22);
  backdrop-filter:         blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border:                  1px solid rgba(180, 180, 180, 0.45);
  box-shadow:              0 2px 12px rgba(0, 0, 0, 0.08),
                           inset 0 1px 0 rgba(255, 255, 255, 0.65);
  color:                   var(--clr-text);
  font-size:               1.3rem;
  line-height:             1;
  display:                 flex;
  align-items:             center;
  justify-content:         center;
  cursor:                  pointer;
  z-index:                 20;
  transition:              background 0.2s, border-color 0.2s, box-shadow 0.2s, transform 0.15s;
  font-family:             inherit;
  padding:                 0;
}
.about-next-btn:hover {
  background:   rgba(200, 200, 200, 0.38);
  border-color: rgba(180, 180, 180, 0.70);
  box-shadow:   0 4px 18px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.80);
  transform:    translateX(-50%) translateY(calc(-50% - 2px));
}
.about-next-btn:active {
  background: rgba(200, 200, 200, 0.30);
  transform:  translateX(-50%) translateY(calc(-50% + 1px));
}

/* ── Globe panel (right, 40%) ──────────────────────────────────────────── */
.about-globe-panel {
  flex:            0 0 40%;
  position:        relative;
  display:         flex;
  align-items:     center;
  justify-content: center;
  overflow:        visible; /* allow wide GIFs to bleed left into glass panel */
  border-radius:   20px;
  min-height:      60vh;
}

/* Globe canvas — sits in flex centre, scale(1.2) for fill */
.svgfuzz-stage--globe {
  position:        relative;
  z-index:         1;
  flex-shrink:     0;
}

.svgfuzz-stage--globe canvas {
  display:          block;
  transform:        scale(1.2);
  transform-origin: center center;
}

/* Radial vignette fades globe edges */
.about-globe-vignette {
  position:        absolute;
  inset:           0;
  z-index:         2;
  background:      radial-gradient(
    ellipse 55% 60% at center,
    transparent 25%,
    rgba(255,255,255,0.5) 58%,
    rgba(255,255,255,0.92) 80%
  );
  pointer-events:  none;
}

/* ── Comparison variant: no eyebrow chip, heavy top padding, bg number ─── */
.about-glass--cmp {
  overflow:        hidden;          /* clips the decorative number at right edge */
}

/* Large decorative panel number — anchored at title top, fills downward.
   glass overflow:hidden clips it at the panel edges.
   top ≈ panel padding-top (3rem) + eyebrow-bar + its margin (4.4rem) = 7.4rem
   Container has no background — each child span owns the gradient so that
   blur/opacity animations on a span can't sever the parent's clip.        */
.about-bg-num {
  position:             absolute;
  right:                -0.04em;
  top:                  7.4rem;
  font-family:          var(--font-display);
  font-size:            clamp(22rem, 36vw, 44rem);
  font-weight:          900;
  line-height:          1;
  letter-spacing:       -0.04em;
  font-variant-numeric: tabular-nums; /* prevents "0" shifting when 1 ↔ 2 ↔ 3 */
  pointer-events:       none;
  user-select:          none;
  z-index:              0;
}

/* .about-bg-a stays in flow → sizes the container.
   .about-bg-b stacks on top of it absolutely.
   Both carry the gradient so their own filter animations stay self-contained. */
.about-bg-a,
.about-bg-b {
  display:                 block;
  white-space:             nowrap;
  background:              linear-gradient(
    to top,
    rgba(0, 0, 0, 0.15)  0%,
    rgba(0, 0, 0, 0.030) 55%,
    transparent          100%
  );
  -webkit-background-clip: text;
  background-clip:         text;
  color:                   transparent;
}
.about-bg-b {
  position: absolute;
  top:      0;
  left:     0;
}

/* Content + dots sit above the decorative number */
.about-glass--cmp .about-content,
.about-glass--cmp .about-dots {
  position:        relative;
  z-index:         1;
}

/* Pseudo-spacer replicates the eyebrow bar height so title + body
   centre at the same vertical position as the original panel.
   eyebrow line (~1rem) + updated margin-bottom (4.4rem) ≈ 5.4rem      */
.about-glass--cmp .about-content::before {
  content:         '';
  display:         block;
  height:          5.4rem;
  flex-shrink:     0;
}

/* ============================================================================
   §B. SVG FUZZ PANELS — Ghiberti rilievo schiacciato
   ============================================================================
 *
 * The glass card is the bronze door — flat, reflective surface.
 * The canvas is the sculpted figure — it EMERGES from the door.
 *
 * Lower ~55% of the canvas sits behind the frosted glass (embedded,
 * recessed — like background figures in shallow relief).
 * Upper ~45% projects freely above the glass top edge (foreground,
 * fully visible — like the primary figures breaking out of the surface).
 *
 * The glass backdrop-filter blurs the recessed portion, reinforcing
 * the illusion of depth without any 3D transform.
 *
 * --right  figure projects from the right side of the glass
 * --left   figure projects from the left side
 * ========================================================================= */

/* ── Panel container ──────────────────────────────────────────────────────
 * Canvas: absolute, top corner, z-index 1 (behind glass).
 * Glass:  normal flow, z-index 2, pushed down 220px so canvas
 *         emerges prominently above and to the side of the glass.
 *
 * Overlap anatomy (--right, 1200px viewport):
 *   Canvas  right edge = section right − content-padding
 *   Glass   right edge ≈ content-padding + 680px
 *   Horizontal overlap ≈ 60px (canvas left corner dips behind glass)
 *   Vertical overlap   ≈ 180px (canvas bottom behind glass top half)
 *   → Most of canvas sits above and outside; only its inner corner
 *     is behind the glass — "slightly behind"                        */
.svgfuzz-panel {
  position:   relative;
  padding:    0 var(--content-padding-x) 6rem;
  overflow:   visible;
  min-height: calc(220px + 400px + 4rem);
}

/* ── Glass card ─────────────────────────────────────────────────────────── */
.svgfuzz-panel-glass {
  position:                relative;
  z-index:                 2;
  max-width:               680px;
  margin-top:              220px;   /* canvas emerges 220px above glass top */
  padding:                 3.5rem 4rem;
  background:              var(--glass-bg);
  backdrop-filter:         var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border:                  var(--glass-border);
  border-radius:           20px;
  box-shadow:              var(--glass-shadow);
}

/* Glass centred — JS pins canvas to whichever corner matches --right/--left */
.svgfuzz-panel--right .svgfuzz-panel-glass,
.svgfuzz-panel--left  .svgfuzz-panel-glass {
  margin-left:  auto;
  margin-right: auto;
}

/* Gilt hairline at glass top — draws in left→right on scroll entry */
.svgfuzz-panel-glass::before {
  content:       '';
  position:      absolute;
  top:           0; left: 8%; right: 8%;
  height:        1.5px;
  background:    linear-gradient(90deg,
    transparent,
    var(--clr-accent-alt) 30%,
    var(--clr-accent-alt) 70%,
    transparent);
  border-radius: 2px;
  opacity:       0.55;
  clip-path:     inset(0 100% 0 0);
  transition:    clip-path 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.svgfuzz-panel.is-visible .svgfuzz-panel-glass::before {
  clip-path: inset(0 0% 0 0);
}

/* Plinth — base of the door frame */
.svgfuzz-panel-glass::after {
  content:       '';
  position:      absolute;
  bottom:        0; left: 12%; right: 12%;
  height:        1px;
  background:    linear-gradient(90deg,
    transparent,
    var(--clr-accent-alt) 35%,
    var(--clr-accent-alt) 65%,
    transparent);
  border-radius: 2px;
  opacity:       0.28;
  clip-path:     inset(0 100% 0 0);
  transition:    clip-path 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.15s;
}
.svgfuzz-panel.is-visible .svgfuzz-panel-glass::after {
  clip-path: inset(0 0% 0 0);
}

/* ── Canvas — pinned to glass corner by JS (see about.js positionCanvases)
 * CSS provides the base; JS sets exact top/left after render so the
 * canvas centre lands precisely on the glass top-right / top-left corner.
 * OVERLAP constant in about.js controls how much dips behind the glass. */
.svgfuzz-stage {
  position: absolute;
  top:      0;       /* JS overrides this */
  left:     0;       /* JS overrides this */
  z-index:  3;       /* above glass so visible portion is never clipped */
  width:    400px;
  height:   400px;
}

.svgfuzz-stage canvas {
  display: block;
}

/* Globe stage sits in flex parent — override the absolute positioning above */
.svgfuzz-stage--globe {
  position: relative;
  top:      auto;
  left:     auto;
  z-index:  1;
  width:    auto;
  height:   auto;
}

/* Panel text */
.svgfuzz-panel-eyebrow {
  display:        block;
  font-family:    var(--font-mono);
  font-size:      0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color:          var(--clr-accent);
  margin:         0 0 1rem;
}

.svgfuzz-panel-title {
  font-family:    var(--font-display);
  font-size:      clamp(2rem, 4.5vw, 3.4rem);
  font-weight:    900;
  line-height:    0.95;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  margin:         0 0 1.5rem;
}

.svgfuzz-panel-body {
  font-size:   1rem;
  line-height: 1.8;
  color:       var(--clr-text-muted, #4a4a4a);
}

/* ============================================================================
  10. RESPONSIVE
   ============================================================================ */

@media (max-width: 1024px) {
  .projects-inner {
    grid-template-columns: 1fr;
  }
  .projects-sidebar {
    border-right:  none;
    border-bottom: 1px solid var(--clr-border);
  }
  .projects-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .card:nth-child(even) {
    border-right: none;
  }
}

@media (max-width: 768px) {
  .nav-links {
    display: none;
  }
  .projects-grid {
    grid-template-columns: 1fr;
  }
  .card {
    border-right:  none;
    min-height:    400px;
  }
  .title-row {
    flex-wrap: wrap;
  }
}

/* ============================================================================
   11. PRINT
   Ghiberti finished the back of the door too.
   ============================================================================ */
@media print {
  /* Strip decoration — black on white */
  *,
  *::before,
  *::after {
    background:  transparent !important;
    color:       #000 !important;
    box-shadow:  none !important;
    text-shadow: none !important;
  }

  /* Hide interactive / animated elements */
  #canvas-bg,
  #morphGlassCanvas,
  .svgfuzz-stage,
  .aether-nav,
  .hero-eyebrow-badge,
  .hero-title-chips,
  #bj-overlay,
  .deck-scene,
  .deck-mute-btn,
  .amoeba-gif {
    display: none !important;
  }

  /* Name + contact at top */
  body::before {
    content:     "Portfolio — kredm.com";
    display:     block;
    font-family: 'Space Mono', monospace;
    font-size:   9pt;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 1.5rem;
    border-bottom: 1pt solid #000;
    padding-bottom: 0.4rem;
  }

  /* Show link URLs inline */
  a[href]::after {
    content: " (" attr(href) ")";
    font-size: 8pt;
    color: #555 !important;
  }

  /* Suppress anchor decoration on nav / buttons */
  .aether-nav a::after,
  .btn-pill::after,
  .bj-entry__btn::after {
    content: none;
  }

  /* Readable card grid — single column */
  .projects-grid,
  .projects-inner {
    display:     block !important;
  }
  .card {
    page-break-inside: avoid;
    border:            1pt solid #ccc;
    margin-bottom:     1rem;
    padding:           0.75rem;
  }

  /* About panels — stack as readable text blocks */
  .svgfuzz-panel {
    margin-bottom: 1.5rem;
    padding:       0;
  }
  .svgfuzz-panel-glass {
    margin:  0 !important;
    padding: 0 !important;
    border:  none !important;
    backdrop-filter: none !important;
  }

  /* Page break hints */
  .svgfuzz-panel,
  .card {
    page-break-inside: avoid;
  }
}