/* ============================================================
   SITE CHROME — SHARED CSS
   Every page on the site should <link> this file. Contains the
   curtains/opening animation, the bottom movie-screen backdrop, the
   ButtonDown email signup form, the nav bar (all breakpoints), and
   the full game overlay system — the "site chrome" that should look
   and behave identically everywhere.

   Page-specific CSS (carousels, page headings, content grids, etc.)
   stays in that page's own <style> block, not here. This file is
   only for things every page shares.

   To update the nav, curtains, game, or signup form site-wide, edit
   THIS file only — every page picks up the change automatically
   next time it loads, no per-page edits needed.
   ============================================================ */

/* This explicit white background matters more than it looks — it's
   what overrides whatever the WordPress theme's own default
   background is, and it's specifically what makes dark-colored
   headings/text visible at all (see the earlier fix where headings
   were rendering invisible-white-on-white without this rule present
   to guarantee a known, consistent background everywhere). */
html, body {
  background: white;
  margin: 0;
  padding: 0;
}

/* Kill stray <br> in flex layouts */
*[style*="display:flex"] br,
*[class*="flex"] br,
nav br {
  display: none !important;
}

#header, #footer { display: none !important; }

#wrapper, #container, #content { margin: 0 !important; padding: 0 !important; }

#site-header, .site-header, #site-footer, .site-footer { display: none !important; }

p {
  font-family: "zedou" !important;
    --font-min: 18px;
    --font-max: 20px;

    --vw-min: 300px;
    --vw-max: 1400px;

    font-size: calc(
      var(--font-min) +
      (var(--font-max) - var(--font-min)) *
      ((100vw - var(--vw-min)) / (var(--vw-max) - var(--vw-min)))
    ) !important;
}

/* ============================================================
   STAGE / CURTAINS / MOVIE SCREEN
   (theater intro visuals — curtains open to reveal the screen)
   ============================================================ */
#stage {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 9999;
  display: block;
}

.curtain {
  position: absolute;
  top: 0;
  width: 50%;
  height: 100%;
  background: repeating-linear-gradient(
    90deg,
    #8b0000 0px,
    #b30000 20px,
    #8b0000 40px
  );
  background-size: 200% 100%;
  animation: pleatShift 2.8s linear forwards;
  transition: transform 2.8s cubic-bezier(0.25, 1, 0.5, 1);
}

.curtain.left { left: 0; }
.curtain.right { right: 0; }

.curtain.left.open { transform: translateX(-90%) rotateZ(-0.5deg); }
.curtain.right.open { transform: translateX(90%) rotateZ(0.5deg); }

@keyframes pleatShift {
  0% { background-position: 0% 0%; }
  50% { background-position: 20% 0%; }
  100% { background-position: 0% 0%; }
}

#bottom-image {
  background: url('https://clarkmay.com/wp-content/uploads/2026/07/Popcorn-Movie-Screen-2.png') no-repeat bottom center;
  position: fixed;
  bottom: 0;
  width: 100vw;
  height: 65vh;
  background-size: contain;
  z-index: 9500; /* above #game-overlay (9000) so it stays visible on top
                    of the game screen, per spec — only curtains (9999)
                    sit above this */
  pointer-events: none;
}

#bottom-form-container {
  position: fixed;
  bottom: 0; /* adjust to taste */
  left: 50%;
  transform: translateX(-50%);
  z-index: 9600; /* above bottom-image */
  display: flex;
  justify-content: center;
  width: 100%;
  pointer-events: auto; /* important */
}


#bottom-bg {
  background: #8b0000;
  position: fixed;
  bottom: 0;
  width: 100vw;
  height: 24vh;
  background-size: contain;
  z-index: 9499; /* same reasoning as #bottom-image above — stays above
                    the game overlay so it remains visible; still above
                    .carousel-btn (10) so it visually covers the buttons;
                    pointer-events: none below lets clicks pass through
                    to the buttons underneath */
  pointer-events: none;
}

@media (max-width: 600px) {
  /* Much smaller on mobile so it doesn't dominate the screen — since
     width stays 100vw but height shrinks a lot, background-size:contain
     will render the image narrower than the viewport (preserving its
     aspect ratio), leaving blank space on either side. #bottom-bg's
     solid color shows through that gap instead of empty page
     background — kept a few px shorter than #bottom-image so it stays
     tucked behind it rather than peeking out above its top edge. */
  #bottom-image {
    height: 30vh;
  }

  #bottom-bg {
    height: 107px;
  }
}

/* ============================================================
   GAME OVERLAY (GBHero)
   Fixed full-screen layer, hidden by default. z-index sits above
   #nav-row (4000) and #overlay-canvas (5000) so it covers those —
   #bottom-image/#bottom-bg were bumped above this (see their rules)
   so they stay visible on top, and #stage (curtains, 9999) is
   already above everything regardless.
   ============================================================ */
#game-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: rgba(10, 10, 10, 0.94);
}

#game-overlay.open {
  display: block;
}

#game-close {
  display: flex;                /* THIS is the missing piece */
  align-items: center;          /* vertical centering */
  justify-content: center;      /* horizontal centering */

  position: absolute;
  top: 30px;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10; /* #game-close comes before #game-modal in the DOM, so
                  without this, #game-modal (painting later/on top)
                  silently intercepted clicks wherever their boxes
                  overlapped — which happens in landscape mode, since
                  the close button sits directly above .game-top-row,
                  itself inside #game-modal's own grid. */
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.25);
  background: rgba(20, 20, 20, 0.85);
  color: white;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  backdrop-filter: blur(4px);
  transition: background 0.2s ease, transform 0.2s ease;
}


#game-close:hover {
  background: #8b0000;
  transform: scale(1.05);
  transform: translate(-50%, -50%);
}

/* Positioned absolutely (rather than flex-centered on the overlay)
   so its CENTER can be pinned to an exact vertical point — 40vh
   instead of the default 50%/dead-center — while staying perfectly
   centered horizontally. */
#game-modal {
  position: absolute;
  top: 40vh;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  padding: 20px;
}

#game-iframe {
  width: 400px;
  max-width: 90vw;
  aspect-ratio: 10 / 9; /* the game's real canvas is 256×224px, not
                          square — forcing a 1:1 box was letterboxing
                          it (the game's own CSS uses object-fit:contain,
                          which pads with its background color rather
                          than stretching), which is what the visible
                          "black bars" actually were */
  height: auto;
  border: none;
  border-radius: 8px;
  background: #202850; /* matches the game's own background so there's
                           no flash of white while it loads */
}

#game-controls {
  display: flex;
  align-items: center;
  gap: 28px;
}

.game-btn-group {
  display: flex;
  gap: 12px;
}

/* Keyboard-style cross layout — Up alone on top, Left/Down/Right in a
   row underneath, matching how arrow keys sit on a real keyboard
   rather than a single flat row of 4. */
.game-dpad {
  display: grid;
  grid-template-columns: repeat(3, 44px);
  grid-template-rows: repeat(2, 44px);
  gap: 6px;
}

.dpad-up    { grid-column: 2; grid-row: 1; }
.dpad-left  { grid-column: 1; grid-row: 2; }
.dpad-down  { grid-column: 2; grid-row: 2; }
.dpad-right { grid-column: 3; grid-row: 2; }

.game-btn {
  width: 52px;
  height: 52px;
  border-radius: 10px;
  border: 2px solid rgba(0, 0, 0, 0.15);
  background: rgba(255, 255, 255, 0.95);
  color: #1a1a1a;
  font-family: "zedou", sans-serif;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 1px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation; /* removes the mobile tap-delay/zoom
                                  gesture so button presses feel
                                  instant rather than laggy */
  transition: background 0.1s ease, transform 0.1s ease;
}

.game-arrow-btn {
  width: 44px;
  height: 44px;
}

/* Real CSS-drawn triangles via the border trick — not the Unicode
   ▲▼◀▶ glyphs, which render as colorful emoji on some platforms
   (iOS in particular) instead of plain arrow shapes. This way it's
   guaranteed to look identical everywhere. */
.tri {
  display: block;
  width: 0;
  height: 0;
}

.tri-up {
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-bottom: 11px solid #1a1a1a;
}

.tri-down {
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 11px solid #1a1a1a;
}

.tri-left {
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-right: 11px solid #1a1a1a;
}

.tri-right {
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-left: 11px solid #1a1a1a;
}

/* Overrides the square sizing above — Start needs room for the word,
   not a single glyph, and sits on its own row above the game rather
   than in the control row below it. */
.game-start-btn {
  width: auto;
  height: auto;
  padding: 10px 28px;
  border-radius: 999px;
  font-size: 16px;
  letter-spacing: 1.5px;
}

/* Transparent by default — .game-top-row behaves exactly as if it
   were a direct child of #game-modal, matching original behavior.
   Only becomes a real container in landscape mode (see media query
   below), where JS also moves .game-btn-group into it. */
.game-left-group {
  display: contents;
}

.game-top-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Round icon button, same size as the arrow buttons — a real link,
   not a game control, so it's excluded from the key-press JS wiring
   (see the :not(.game-headphones-btn) selector where buttons get
   their press/release handlers attached). */
.game-headphones-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  text-decoration: none;
}

/* Applied via JS on press, removed on release — the visible
   "pressed" feedback the buttons need. Triangles switch to the same
   red as the rest of the site's active/hover states for consistency. */
.game-btn.active {
  background: #8b0000;
  color: white;
  transform: scale(0.92);
}

.game-arrow-btn.active .tri-up { border-bottom-color: white; }
.game-arrow-btn.active .tri-down { border-top-color: white; }
.game-arrow-btn.active .tri-left { border-right-color: white; }
.game-arrow-btn.active .tri-right { border-left-color: white; }

/* ============================================================
   GAME — LANDSCAPE / SHORT-HEIGHT LAYOUT
   Gated by a JS-added class on <body> (body.game-mode-landscape)
   rather than a plain @media query — see the "smaller dimension wins" JS
   logic further down. A pure @media(max-height:...) query and the
   separate @media(max-width:600px) portrait-mobile rules elsewhere
   are BOTH independently true for most portrait phones (portrait
   phone heights are usually under 824px too), so relying on media
   queries alone made both rule sets fight at once — controls were
   disappearing as a result. JS now measures both dimensions against
   their own threshold and decides which single mode applies.

   IMPORTANT: the grid only has ONE row. An earlier version tried 2
   rows with #game-iframe/.game-dpad spanning both — but per the CSS
   Grid spec, ANY row-sizing keyword (auto, min-content, max-content,
   minmax(0, min-content)) still lets a spanning item force those rows
   open to fit its full height, which was the real cause of a huge gap
   between the two button rows (confirmed by directly measuring
   computed row heights — they were ~230px each, not sized to the
   ~50px buttons at all). Verified empirically with a standalone test
   that NONE of those keywords prevent it.

   The actual fix: .game-left-group holds .game-top-row AND (moved in
   via JS below) .game-btn-group as its own real flex-column, so
   their tight spacing is computed entirely independently of the
   outer grid's row-sizing algorithm — the wrapper is just ONE
   ordinary, non-spanning grid item like everything else.
   ============================================================ */
/* Requires BOTH the landscape mode AND the overlay actually being
   open — game-mode-landscape alone gets set just from viewport
   dimensions (on load, on resize) regardless of whether the game is
   open at all, which was hiding the curtains/background on the main
   site itself whenever the window happened to be short, not just
   while playing. game-overlay-open is toggled directly in
   openGameOverlay()/closeGameOverlay() below. */
body.game-mode-landscape.game-overlay-open #stage,
body.game-mode-landscape.game-overlay-open #bottom-image,
body.game-mode-landscape.game-overlay-open #bottom-bg {
  display: none;
}

body.game-mode-landscape #game-modal {
  /* Anchored to the bottom of the screen instead of vertically
     centered — Safari's collapsible bottom tab bar can reappear and
     eat into the visible area, so anchoring to the bottom (with some
     breathing room) keeps the game from ever being cropped by it,
     rather than centering against a viewport height that may not
     reflect what's actually visible. */
  top: auto;
  bottom: 16px;
  transform: translateX(-50%);
  /* Explicit width is what lets the 1fr middle column below actually
     have leftover space to expand into, pushing the two control
     groups out to the real screen edges instead of clustering near
     the middle. */
  width: 100%;
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-rows: auto;
  align-items: center;
  justify-items: center;
  gap: 16px;
  padding: 10px 20px;
  box-sizing: border-box;
}

/* Becomes a real flex-column here (overriding the display:contents
   used the rest of the time) — this is what holds .game-top-row
   and .game-btn-group tightly stacked, independent of the outer
   grid's sizing. */
body.game-mode-landscape .game-left-group {
  display: flex;
  flex-direction: column;
  gap: 15px;
  grid-column: 1;
  grid-row: 1;
}

/* .game-dpad is the only thing left inside #game-controls once JS
   moves .game-btn-group out into .game-left-group — so flattening
   it here just promotes .game-dpad to be a direct grid item. */
body.game-mode-landscape #game-controls {
  display: contents;
}

body.game-mode-landscape .game-btn-group {
  flex-direction: row; /* Z left of X, not stacked */
}

body.game-mode-landscape #game-iframe {
  grid-column: 2;
  grid-row: 1;
  /* Fixed size, no vh/vw for the base value — width still follows
     automatically from the existing aspect-ratio. clamp(floor,
     preferred, ceiling): stays exactly 400px whenever there's room,
     shrinks smoothly as the viewport gets shorter than that, and
     never goes below 200px even on extremely short screens. dvh
     (dynamic viewport height), not vh, specifically because Safari's
     vh is based on the LARGEST possible viewport (chrome collapsed),
     so a fixed vh value can be taller than what's actually visible
     once the address/tab bar reappears — dvh tracks the real,
     currently-visible height instead. */
  height: clamp(200px, 90dvh, 400px);
  width: auto;
}

body.game-mode-landscape .game-dpad {
  grid-column: 3;
  grid-row: 1;
}

/* Buttons scale down alongside the iframe using the same
   clamp(floor, preferred, ceiling) approach — stays at their
   normal size whenever there's room, shrinks smoothly as height
   drops, bottoms out at a size that's still tappable rather than
   shrinking to nothing. */
body.game-mode-landscape .game-btn {
  width: clamp(34px, 9dvh, 52px);
  height: clamp(34px, 9dvh, 52px);
  font-size: clamp(14px, 3dvh, 20px);
}

body.game-mode-landscape .game-arrow-btn {
  width: clamp(28px, 7.5dvh, 44px);
  height: clamp(28px, 7.5dvh, 44px);
}

body.game-mode-landscape .game-headphones-btn {
  width: clamp(28px, 7.5dvh, 44px);
  height: clamp(28px, 7.5dvh, 44px);
}

body.game-mode-landscape .game-headphones-btn svg {
  width: clamp(14px, 4dvh, 22px);
  height: clamp(14px, 4dvh, 22px);
}

body.game-mode-landscape .game-start-btn {
  padding: clamp(4px, 1.5dvh, 10px) clamp(14px, 5dvh, 28px);
  font-size: clamp(11px, 3dvh, 16px);
}

/* ============================================================
   GAME — PORTRAIT / NARROW-WIDTH LAYOUT
   Gated by a JS-added class on <body> (body.game-mode-portrait),
   same reasoning as the landscape block above — this used to be a
   plain @media(max-width:600px) block, which fought with the
   landscape @media(max-height:...) query on portrait phones (most
   are short enough to trigger both at once). This is exactly the
   original narrow-width layout, just re-gated so only one mode can
   ever apply at a time.
   ============================================================ */
body.game-mode-portrait #game-iframe {
  width: 100vw;
  max-width: 510px;
  aspect-ratio: 10 / 9; /* full edge-to-edge width, height follows the
                          game's real canvas ratio automatically —
                          no more forced-square letterboxing */
  align-content: center;
}

/* Horizontal padding removed so the iframe above can actually reach
   both edges of the screen; vertical padding kept for spacing
   against the close button / controls below. */
body.game-mode-portrait #game-modal {
  padding: 20px 0;
}

body.game-mode-portrait #game-controls {
  gap: 20px;
}

body.game-mode-portrait .game-btn-group {
  gap: 8px;
}

body.game-mode-portrait .game-dpad {
  grid-template-columns: repeat(3, 36px);
  grid-template-rows: repeat(2, 36px);
  gap: 5px;
}

body.game-mode-portrait .game-btn {
  width: 42px;
  height: 42px;
  font-size: 16px;
}

body.game-mode-portrait .game-arrow-btn {
  width: 36px;
  height: 36px;
}

body.game-mode-portrait .tri-up,
body.game-mode-portrait .tri-down {
  border-left-width: 6px;
  border-right-width: 6px;
}
body.game-mode-portrait .tri-up { border-bottom-width: 9px; }
body.game-mode-portrait .tri-down { border-top-width: 9px; }

body.game-mode-portrait .tri-left,
body.game-mode-portrait .tri-right {
  border-top-width: 6px;
  border-bottom-width: 6px;
}
body.game-mode-portrait .tri-left { border-right-width: 9px; }
body.game-mode-portrait .tri-right { border-left-width: 9px; }

/* Re-asserts the pill shape — the shared .game-btn rule above would
   otherwise win (equal specificity, later in the cascade) and
   squash Start back into a 42×42 square. */
body.game-mode-portrait .game-start-btn {
  width: auto;
  height: auto;
  padding: 8px 22px;
  font-size: 14px;
}

body.game-mode-portrait #game-close {
  top: 25px;
  width: 38px;
  height: 38px;
  font-size: 16px;
}

/* ============================================================
   NAV GRADIENT BACKDROP
   ============================================================ */
#nav-gradient {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 150px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 85%, rgba(255, 255, 255, 0) 100%);
  z-index: 3999;
  pointer-events: none;
}

/* ============================================================
   NAV ROW — ALWAYS CENTERED
   ============================================================ */
#nav-row {
  position: fixed;
  inset: 50px auto auto 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 40px;
  z-index: 4000;
  width: max-content;
}

#main-nav {
  position: relative;
  display: flex;
  align-items: center;
  gap: 30px;
  padding: 18px 48px;
  border-radius: 0px;
  border: 2px solid rgba(255,255,255,0.15);
  backdrop-filter: blur(4px);
  background: rgba(20,20,20,0.85);
  overflow: visible;

  -webkit-mask:
    radial-gradient(circle 12px at left center, transparent 12px, black 13px),
    radial-gradient(circle 12px at right center, transparent 12px, black 13px),
    linear-gradient(black, black);
  -webkit-mask-composite: source-over;
  mask-composite: intersect;
}

#main-nav .nav-item,
#main-nav a {
  color: white;
  font-size: 22px;
  font-family: "zedou", sans-serif;
  font-weight: 700;
  text-decoration: none;
  letter-spacing: 1px;
  cursor: pointer;
  transition: color 0.25s ease, transform 0.25s ease;
}

#main-nav a,
#nav-row #main-nav a {
  opacity: 1;
  visibility: visible;
  mix-blend-mode: normal;
}

#main-nav .nav-item:hover,
#main-nav a:hover {
  color: #ffd27f;
  transform: translateY(-2px);
}

/* HOME is the one item that's a real, permanently-styled link back
   to the homepage — yellow instead of white to stand out from the
   other (currently inert) nav items as a distinct action. */
#main-nav .nav-item.home-link {
  color: #ffd27f;
}

#main-nav .nav-item.home-link:hover {
  color: white;
}

.separator {
  position: relative;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  pointer-events: none;
}

.separator::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: white;
}

#social-nav {
  display: flex;
  gap: 10px;
  align-items: center;
}

.social-circle {
  width: 70px;
  height: 70px;
  background: rgba(20,20,20,0.85);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 2px solid rgba(255,255,255,0.15);
  backdrop-filter: blur(4px);
  transition: transform 0.25s ease, background 0.25s ease;
}

/* #game-toggle reuses .social-circle but is a <button>, not an <a> —
   buttons carry extra browser-default styling (padding, font,
   appearance) that the other icons don't have to fight, so this
   strips that out to match them exactly. */
button.social-circle {
  padding: 0;
  font: inherit;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.social-circle img {
  width: 35px;
  height: 35px;
  object-fit: contain;
}

.social-circle:hover {
  background: #ffd27f;
  transform: translateY(-3px);
}

@media (max-width: 1380px) {
  #nav-row {
    --nav-gap-min: 20px;
    --nav-gap-max: 40px;
    --vw-min: 1105px;
    --vw-max: 1380px;

    transform: translateX(-50%);
    gap: calc(
      var(--nav-gap-min) +
      (var(--nav-gap-max) - var(--nav-gap-min)) *
      ((100vw - var(--vw-min)) / (var(--vw-max) - var(--vw-min)))
    );
  }

  #main-nav {
    --main-gap-min: 18px;
    --main-gap-max: 20px;

    --pad-y-min: 16px;
    --pad-y-max: 18px;

    --pad-x-min: 32px;
    --pad-x-max: 48px;

    --vw-min: 1105px;
    --vw-max: 1380px;

    gap: calc(
      var(--main-gap-min) +
      (var(--main-gap-max) - var(--main-gap-min)) *
      ((100vw - var(--vw-min)) / (var(--vw-max) - var(--vw-min)))
    );

    padding: calc(
      var(--pad-y-min) +
      (var(--pad-y-max) - var(--pad-y-min)) *
      ((100vw - var(--vw-min)) / (var(--vw-max) - var(--vw-min)))
    )
    calc(
      var(--pad-x-min) +
      (var(--pad-x-max) - var(--pad-x-min)) *
      ((100vw - var(--vw-min)) / (var(--vw-max) - var(--vw-min)))
    );

    --circle-max: 12px;
    --circle-min: 8px;

    --circle-r: calc(
      var(--circle-min) +
      (var(--circle-max) - var(--circle-min)) *
      ((100vw - var(--vw-min)) / (var(--vw-max) - var(--vw-min)))
    );

    -webkit-mask:
      radial-gradient(circle var(--circle-r) at left center,
                      transparent var(--circle-r),
                      black var(--circle-r)),
      radial-gradient(circle var(--circle-r) at right center,
                      transparent var(--circle-r),
                      black var(--circle-r)),
      linear-gradient(black, black);
    -webkit-mask-composite: source-over;
    mask-composite: intersect;
  }

  #main-nav .nav-item,
  #main-nav a {
    --font-min: 18px;
    --font-max: 20px;
    --vw-min: 1105px;
    --vw-max: 1380px;

    font-size: calc(
      var(--font-min) +
      (var(--font-max) - var(--font-min)) *
      ((100vw - var(--vw-min)) / (var(--vw-max) - var(--vw-min)))
    );
  }

  #social-nav {
    --social-gap-min: 6px;
    --social-gap-max: 10px;
    --vw-min: 1105px;
    --vw-max: 1380px;

    gap: calc(
      var(--social-gap-min) +
      (var(--social-gap-max) - var(--social-gap-min)) *
      ((100vw - var(--vw-min)) / (var(--vw-max) - var(--vw-min)))
    );
  }

  .social-circle {
    --circle-min: 50px;
    --circle-max: 70px;
    --vw-min: 1105px;
    --vw-max: 1380px;

    width: calc(
      var(--circle-min) +
      (var(--circle-max) - var(--circle-min)) *
      ((100vw - var(--vw-min)) / (var(--vw-max) - var(--vw-min)))
    );
    height: calc(
      var(--circle-min) +
      (var(--circle-max) - var(--circle-min)) *
      ((100vw - var(--vw-min)) / (var(--vw-max) - var(--vw-min)))
    );
  }

  .social-circle img {
    --icon-min: 24px;
    --icon-max: 35px;
    --vw-min: 1105px;
    --vw-max: 1380px;

    width: calc(
      var(--icon-min) +
      (var(--icon-max) - var(--icon-min)) *
      ((100vw - var(--vw-min)) / (var(--vw-max) - var(--vw-min)))
    );
    height: calc(
      var(--icon-min) +
      (var(--icon-max) - var(--icon-min)) *
      ((100vw - var(--vw-min)) / (var(--vw-max) - var(--vw-min)))
    );
  }

  .separator {
    --sep-min: 16px;
    --sep-max: 24px;
    --vw-min: 1105px;
    --vw-max: 1380px;

    width: calc(
      var(--sep-min) +
      (var(--sep-max) - var(--sep-min)) *
      ((100vw - var(--vw-min)) / (var(--vw-max) - var(--vw-min)))
    );
    height: calc(
      var(--sep-min) +
      (var(--sep-max) - var(--sep-min)) *
      ((100vw - var(--vw-min)) / (var(--vw-max) - var(--vw-min)))
    );
  }
}

@media (max-width: 1105px) {
  #nav-row {
    transform: translateX(-50%);
    gap: 20px;
    width: 100%;
  }

  #main-nav {
    gap: 18px;
    padding: 14px 24px;
    width: max-content;
    margin: 0 auto;

    -webkit-mask:
    radial-gradient(circle 8px at left center, transparent 8px, black 9px),
    radial-gradient(circle 8px at right center, transparent 8px, black 9px),
    linear-gradient(black, black);
    -webkit-mask-composite: source-over;
    mask-composite: intersect;
  }

  #main-nav .nav-item,
  #main-nav a {
    font-size: 18px;
  }

  .separator {
    width: 16px;
    height: 16px;
  }

  #social-nav {
    gap: 6px;
  }

  .social-circle {
    width: 50px;
    height: 50px;
  }

  .social-circle img {
    width: 26px;
    height: 26px;
  }
}

@media (max-width: 970px) {
  #nav-row {
    flex-direction: column;
    inset: 30px auto auto 50%;
    transform: translateX(-50%);
    gap: 20px;
    width: 100%;
  }

  #main-nav {
    padding: 12px 18px;
    gap: 18px;
  }

  #main-nav .nav-item,
  #main-nav a {
    font-size: 16px;
  }

  #social-nav {
    gap: 4px;
  }

  .social-circle {
    width: 42px;
    height: 42px;
  }

  .social-circle img {
    width: 22px;
    height: 22px;
  }
}

@media (max-width: 600px) {
  #nav-row {
    --vw-max: 600px;
    --vw-min: 330px;

    --nav-gap-max: 20px;
    --nav-gap-min: 5px;

    flex-direction: column;
    transform: translateX(-50%);
    width: 100%;

    gap: calc(
      var(--nav-gap-min) +
      (var(--nav-gap-max) - var(--nav-gap-min)) *
      ((100vw - var(--vw-min)) / (var(--vw-max) - var(--vw-min)))
    );
  }

  #main-nav {
    --vw-max: 600px;
    --vw-min: 330px;

    --pad-y-max: 12px;
    --pad-y-min: 6px;

    --pad-x-max: 18px;
    --pad-x-min: 18px;

    padding: calc(
      var(--pad-y-min) +
      (var(--pad-y-max) - var(--pad-y-min)) *
      ((100vw - var(--vw-min)) / (var(--vw-max) - var(--vw-min)))
    )
    calc(
      var(--pad-x-min) +
      (var(--pad-x-max) - var(--pad-x-min)) *
      ((100vw - var(--vw-min)) / (var(--vw-max) - var(--vw-min)))
    );

    --nav-gap-max: 18px;
    --nav-gap-min: 5px;

    gap: calc(
      var(--nav-gap-min) +
      (var(--nav-gap-max) - var(--nav-gap-min)) *
      ((100vw - var(--vw-min)) / (var(--vw-max) - var(--vw-min)))
    );

    --circle-max: 8px;
    --circle-min: 2.5px;

    --circle-r: calc(
      var(--circle-min) +
      (var(--circle-max) - var(--circle-min)) *
      ((100vw - var(--vw-min)) / (var(--vw-max) - var(--vw-min)))
    );

    -webkit-mask:
      radial-gradient(circle var(--circle-r) at left center,
                      transparent var(--circle-r),
                      black var(--circle-r)),
      radial-gradient(circle var(--circle-r) at right center,
                      transparent var(--circle-r),
                      black var(--circle-r)),
      linear-gradient(black, black);
    -webkit-mask-composite: source-over;
    mask-composite: intersect;
  }

  #main-nav .nav-item,
  #main-nav a {
    --vw-max: 600px;
    --vw-min: 330px;

    --font-max: 16px;
    --font-min: 13px;

    font-size: calc(
      var(--font-min) +
      (var(--font-max) - var(--font-min)) *
      ((100vw - var(--vw-min)) / (var(--vw-max) - var(--vw-min)))
    );
  }

  #social-nav {
    --vw-max: 600px;
    --vw-min: 330px;

    --social-gap-max: 4px;
    --social-gap-min: 2px;

    gap: calc(
      var(--social-gap-min) +
      (var(--social-gap-max) - var(--social-gap-min)) *
      ((100vw - var(--vw-min)) / (var(--vw-max) - var(--vw-min)))
    );
  }

  .social-circle {
    --vw-max: 600px;
    --vw-min: 330px;

    --circle-max: 42px;
    --circle-min: 28px;

    width: calc(
      var(--circle-min) +
      (var(--circle-max) - var(--circle-min)) *
      ((100vw - var(--vw-min)) / (var(--vw-max) - var(--vw-min)))
    );
    height: calc(
      var(--circle-min) +
      (var(--circle-max) - var(--circle-min)) *
      ((100vw - var(--vw-min)) / (var(--vw-max) - var(--vw-min)))
    );
  }

  .social-circle img {
    --vw-max: 600px;
    --vw-min: 330px;

    --icon-max: 22px;
    --icon-min: 14px;

    width: calc(
      var(--icon-min) +
      (var(--icon-max) - var(--icon-min)) *
      ((100vw - var(--vw-min)) / (var(--vw-max) - var(--vw-min)))
    );
    height: calc(
      var(--icon-min) +
      (var(--icon-max) - var(--icon-min)) *
      ((100vw - var(--vw-min)) / (var(--vw-max) - var(--vw-min)))
    );
  }

  .separator {
    --vw-max: 600px;
    --vw-min: 330px;

    --sep-min: 5px;
    --sep-max: 16px;

    width: calc(
      var(--sep-min) +
      (var(--sep-max) - var(--sep-min)) *
      ((100vw - var(--vw-min)) / (var(--vw-max) - var(--vw-min)))
    );
    height: calc(
      var(--sep-min) +
      (var(--sep-max) - var(--sep-min)) *
      ((100vw - var(--vw-min)) / (var(--vw-max) - var(--vw-min)))
    );
  }
}

@media (max-width: 330px) {
  #nav-row {
    flex-direction: column;
    transform: translateX(-50%);
    gap: 5px;
    width: 100%;
  }

  #main-nav {
    padding: 6px 18px;
    gap: 5px;

    -webkit-mask:
    radial-gradient(circle 2.5px at left center, transparent 2.5px, black 3px),
    radial-gradient(circle 2.5px at right center, transparent 2.5px, black 3px),
    linear-gradient(black, black);
    -webkit-mask-composite: source-over;
    mask-composite: intersect;
  }

  #main-nav .nav-item,
  #main-nav a {
    font-size: 13px;
  }

  #social-nav {
    gap: 2px;
  }

  .social-circle {
    width: 28px;
    height: 28px;
  }

  .social-circle img {
    width: 14px;
    height: 14px;
  }
}

/* ================================
   BUTTONDOWN FORM — CLARK MAY STYLE (NEW MAIN LAYOUT)
   ================================ */

.embeddable-buttondown-form {
  position: relative;

  width: 100%;
  max-width: 610px;
  height: 130px;
  left: 8px;                 /* ← taller version of the 600px bar */

  margin: 0 auto;                /* ← centered on page */
  padding: 20px 24px;

  display: flex;
  flex-direction: row;           /* ← horizontal layout */
  align-items: center;           /* ← vertical centering */
  justify-content: center;       /* ← horizontal centering */

  gap: 20px;                     /* ← spacing between left + right */

  background: rgba(20,20,20,0.85);
  border: 2px solid rgba(255,255,255,0.15);
  border-radius: 12px;
  backdrop-filter: blur(6px);
}

/* LEFT SIDE: label + input stacked */
.embeddable-buttondown-form .email-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;

  width: 60%;                    /* ← balanced width */
  min-width: 0;
}

.embeddable-buttondown-form label {
  font-family: "zedou", sans-serif;
  font-weight: 700;
  letter-spacing: 1px;
  color: white;

  font-size: 16px;
  margin: 0 0 6px 0;
  line-height: 1;
}

.embeddable-buttondown-form input[type="email"] {
  width: 100%;
  padding: 10px 14px;

  border-radius: 8px;
  border: 2px solid rgba(255,255,255,0.15);
  background: rgba(255,255,255,0.95);

  font-family: "zedou", sans-serif;
  font-size: 18px;
  color: #1a1a1a;

  outline: none;
  transition: border-color 0.25s ease;
}

.embeddable-buttondown-form input[type="email"]:focus {
  border-color: #ffd27f;
}

/* RIGHT SIDE: subscribe button */
.embeddable-buttondown-form input[type="submit"] {
  width: 140px;                  /* ← fixed width, looks balanced */
  padding: 12px 18px;

  border-radius: 999px;
  border: 2px solid rgba(255,255,255,0.25);
  background: rgba(20,20,20,0.85);

  color: white;
  font-family: "zedou", sans-serif;
  font-weight: 700;
  letter-spacing: 1px;
  font-size: 18px;

  cursor: pointer;
  transition: background 0.25s ease, transform 0.25s ease;
}

.embeddable-buttondown-form input[type="submit"]:hover {
  background: #8b0000;
  transform: translateY(-2px);
}

/* Footer centered at bottom */
.embeddable-buttondown-form p {
  position: absolute;
  bottom: 10px;
  right: -4%;
  transform: translateX(-50%);

  margin: 0;
  padding: 0;

  font-size: 14px;
  opacity: 0.7;
  white-space: nowrap;
}

.embeddable-buttondown-form p a {
  font-family: "zedou", sans-serif;
  color: #ffd27f;
  text-decoration: none;
  font-size: 14px;
}

.embeddable-buttondown-form p a:hover {
  text-decoration: underline;
}


@media (max-width: 600px) {

  .embeddable-buttondown-form {
    position: fixed;
    bottom: 0;
    left: 0;

    width: 100vw;
    height: 100px;

    margin: 0;
    padding: 8px 10px;

    display: flex;
    flex-direction: row;
    align-items: center;          /* ← vertical centering */
    justify-content: center;      /* ← horizontal centering */

    gap: 14px;                    /* ← spacing between items */

    border-radius: 0;
    background: rgba(20,20,20,0.9);
    backdrop-filter: blur(6px);

    z-index: 9999;
  }

  /* LEFT SIDE: label + input stacked */
  .embeddable-buttondown-form .email-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;

    width: 48%;                   /* ← balanced width */
    min-width: 0;
  }

  .embeddable-buttondown-form label {
    font-size: 12px;
    margin: 0 0 2px 0;
    padding: 0;
    line-height: 1;
  }

  .embeddable-buttondown-form input[type="email"] {
    width: 100%;
    padding: 6px 8px;
    font-size: 14px;
    border-radius: 6px;
  }

  /* RIGHT SIDE: subscribe button */
  .embeddable-buttondown-form input[type="submit"] {
    width: 90px;                  /* ← fixed, safe width */
    flex-shrink: 0;
    flex-grow: 0;

    padding: 8px 10px;
    font-size: 14px;
    border-radius: 999px;
  }

  /* Footer centered horizontally */
  .embeddable-buttondown-form p {
    display: block;
    position: absolute;
    bottom: 4px;
    left: 50%;                    /* ← center horizontally */
    transform: translateX(-50%);  /* ← perfect centering */
    margin: 0;
    padding: 0;
    font-size: 10px;
    opacity: 0.7;
    white-space: nowrap;          /* ← prevents wrapping */
  }

  .embeddable-buttondown-form p a {
    font-size: 10px;
  }
}