/* PRÔPAGANDA — design system + site styles
   Organized so the foundational pieces (tokens, fonts, headings, buttons,
   navigation) live in one predictable place near the top. Change one rule
   there and it applies everywhere. Page/component-specific styles live
   further down, grouped by the page they belong to. */

/* ==========================================================================
   1. Design tokens — colors
   ========================================================================== */

:root {
  --color-brand: #5700ff;
  --color-background: #000000;
  --color-body-text: #bdbdbd;
  --color-white: #ffffff;
}

/* ==========================================================================
   2. Fonts
   ========================================================================== */

@font-face {
  font-family: 'Propaganda';
  src: url('/fonts/propaganda-font-v5.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Brand font: headings, nav/menu items, buttons — anything that's part
     of the title/brand system. Change this one line to swap it later. */
  --font-brand: 'Propaganda', Arial, Helvetica, sans-serif;
  /* Body font: ordinary paragraph/UI text. */
  --font-body: Arial, Helvetica, sans-serif;
}

/* ==========================================================================
   3. Base / reset
   ========================================================================== */

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--font-body);
  background-color: var(--color-background);
  color: var(--color-body-text);
  line-height: 1.5;
  /* The full-bleed hero below breaks out to 100vw, which can trigger a
     tiny horizontal scrollbar on some browsers — this prevents that. */
  overflow-x: hidden;
}

a {
  color: inherit;
}

.container {
  max-width: 960px;
  margin: 0 auto;
  /* Top padding is taller than the others to clear the fixed header,
     which now floats over the page instead of sitting in normal flow
     (see .site-header). The hero section cancels this same amount via
     its own negative margin so it can still start flush at the very
     top of the viewport. */
  padding: 7rem 1rem 2rem;
}

/* Extra breathing room between homepage/page sections. The hero is
   excluded since it's a full-bleed edge-to-edge video block that fades
   directly into the section below it (see .hero, .hero-overlay). */
section {
  padding-top: 3rem;
  padding-bottom: 3rem;
  /* Keeps anchor-jump navigation (nav links, "back to X" links) from
     landing a section's heading underneath the fixed site header, which
     doesn't take up space in normal document flow. Matches the header's
     actual rendered height. */
  scroll-margin-top: 8rem;
}

#hero {
  padding-top: 0;
  padding-bottom: 0;
}

/* Locks background scroll while the mobile nav sidebar is open. */
body.nav-open {
  overflow: hidden;
}

/* ==========================================================================
   4. Headings — central control point
   Change H1/H2/H3 styling here once, rather than per page.
   ========================================================================== */

h1,
h2,
h3 {
  font-family: var(--font-brand);
  color: var(--color-white);
  font-weight: normal;
  text-transform: uppercase;
}

/* ==========================================================================
   5. Forms (generic)
   ========================================================================== */

form {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 1rem;
}

.login-form {
  max-width: 320px;
}

/* --- Admin login screen --- */

.admin-login-page {
  background-color: var(--color-brand);
  background-image: url('/images/brand/background-blue-icon.jpg');
  background-size: cover;
  background-position: center;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.admin-login-box {
  width: 100%;
  max-width: 320px;
  padding: 1rem;
}

.admin-login-page input {
  background-color: var(--color-white);
  color: var(--color-brand);
  border: none;
  border-radius: 999px;
  padding: 0.75rem 1.25rem;
  outline: none;
}

/* Email/Password are shown as placeholder text inside the field instead
   of separate <label> elements — a light grey so it reads clearly as a
   placeholder against the white field, without looking like typed text
   (which is brand blue). */
.admin-login-page input::placeholder {
  color: #cccccc;
  opacity: 1;
}

/* Buttons here use the shared .button system (brand blue by default, white
   on hover) — this is also what wires them up to button-align.js, which
   keeps their label precisely vertically centered regardless of the custom
   font's own metrics. Only the size is overridden, to stay compact. */
.admin-login-page .login-form .button {
  padding: 0.75rem 1.25rem;
  margin: 0;
}

/* Secondary navigation on the auth screens — "Forgot password?", "Back to
   login", "Request a new link" — small, white, centered, brand font. */
.auth-link {
  text-align: center;
}

.auth-link a {
  font-family: var(--font-brand);
  text-transform: uppercase;
  font-size: 0.75rem;
  color: var(--color-white);
  text-decoration: none;
}

label {
  font-weight: bold;
}

input,
select,
textarea,
button {
  padding: 0.5rem;
  font-size: 1rem;
  font-family: inherit;
}

textarea {
  resize: vertical;
  min-height: 3rem;
}

button {
  cursor: pointer;
  font-family: var(--font-brand);
}

.error {
  color: #ff6b6b;
  font-weight: bold;
}

.success {
  color: #4ade80;
  font-weight: bold;
}

/* ==========================================================================
   6. Buttons — central reusable brand buttons
   Three variants for now; add more following the same pattern if ever
   needed.
   ========================================================================== */

.button,
.button-secondary,
.button-tertiary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  text-align: center;
  line-height: 1;
  padding: 1.75rem 3rem;
  margin: 1rem 0;
  text-decoration: none;
  border: none;
  border-radius: 999px;
  text-transform: uppercase;
  font-family: var(--font-brand);
  font-size: 1rem;
  cursor: pointer;
}

/* Icon shown before a button's label (see .btn-icon-* below for specific
   icons). Rendered via mask-image rather than an <img> so it can inherit
   the button's current text color (white by default, brand blue on hover)
   from a single white source SVG. */
.btn-icon {
  display: inline-block;
  width: 1.5em;
  height: 1.5em;
  background-color: currentColor;
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  flex-shrink: 0;
}

.btn-icon-video {
  mask-image: url('/images/icons/media-video-icon-white.svg');
  -webkit-mask-image: url('/images/icons/media-video-icon-white.svg');
}

.btn-icon-gallery {
  mask-image: url('/images/icons/media-gallery-icon-white.svg');
  -webkit-mask-image: url('/images/icons/media-gallery-icon-white.svg');
}

.button {
  background-color: var(--color-brand);
  color: var(--color-white);
}

.button:hover {
  background-color: var(--color-white);
  color: var(--color-brand);
}

.button-secondary {
  background-color: var(--color-white);
  color: var(--color-brand);
}

.button-secondary:hover {
  background-color: var(--color-brand);
  color: var(--color-white);
}

.button-tertiary {
  background-color: var(--color-white);
  color: var(--color-brand);
}

.button-tertiary:hover {
  background-color: #000000;
  color: var(--color-white);
}

/* Wrapped around each button's label by button-align.js, which nudges it
   with a measured transform so the visual ink sits dead-center regardless
   of the custom font's own ascent/descent metrics (see that file for why
   padding/line-height alone can't guarantee this). */
.btn-label {
  display: inline-block;
}

.link-button {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  color: #ff6b6b;
  text-decoration: underline;
  font-size: 1rem;
  cursor: pointer;
}

/* ==========================================================================
   7. Navigation
   ========================================================================== */

.site-header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  /* Extra breathing room on the sides (beyond the top/bottom space) so the
     logo and nav items don't sit flush against the viewport edge. Top/bottom
     padding is bumped slightly to offset the smaller logo below, keeping the
     header's overall height unchanged at 128px. */
  padding: 1.75rem 2.5rem;
  background-color: var(--color-background);
  /* Fixed and full-width so it stays put and spans the viewport on every
     page. Every other page gets .container's top padding (above) to keep
     content clear of it. */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
}

.site-logo {
  display: inline-flex;
  align-items: center;
}

.site-logo-img {
  display: block;
  height: 4.5rem;
  width: auto;
}

.site-logo-img-hover {
  display: none;
}

.site-logo:hover .site-logo-img-default {
  display: none;
}

.site-logo:hover .site-logo-img-hover {
  display: block;
}

.site-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 2.5rem;
}

.site-nav a {
  font-family: var(--font-brand);
  font-size: 1.4rem;
  text-decoration: none;
  text-transform: uppercase;
  color: var(--color-white);
  transition: color 0.3s ease;
}

.site-nav a:hover {
  color: var(--color-brand);
}

.site-nav a.active {
  text-decoration: underline;
}

/* Hamburger button — hidden on desktop, shown by the media query below. */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 32px;
  height: 32px;
  padding: 0;
  background: none;
  border: none;
}

.nav-toggle span {
  display: block;
  width: 100%;
  height: 2px;
  background-color: var(--color-white);
}

/* --- Admin nav --- */

.admin-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.5rem;
  padding-bottom: 1rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid #333;
}

.admin-nav a {
  font-family: var(--font-brand);
  text-decoration: none;
  text-transform: uppercase;
  color: var(--color-white);
  transition: color 0.3s ease;
}

.admin-nav a:hover {
  color: var(--color-brand);
}

.admin-nav a.active {
  text-decoration: underline;
}

.nav-logout-form {
  margin: 0;
  margin-left: auto;
}

.nav-logout-button {
  background: none;
  border: none;
  padding: 0;
  color: inherit;
  text-decoration: underline;
  font-size: 1rem;
  cursor: pointer;
}

/* ==========================================================================
   8. Responsive navigation (mobile + tablet)
   ========================================================================== */

@media (max-width: 900px) {
  .nav-toggle {
    display: flex;
  }

  .site-nav {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: 260px;
    max-width: 80vw;
    flex-direction: column;
    gap: 1.5rem;
    padding: 5rem 1.5rem 1.5rem;
    background-color: var(--color-background);
    border-left: 1px solid #333;
    transform: translateX(100%);
    transition: transform 0.2s ease;
    z-index: 150;
  }

  .site-nav.is-open {
    transform: translateX(0);
  }
}

/* ==========================================================================
   9. Page and component-specific styles
   ========================================================================== */

/* --- Homepage hero (Section 1) --- */
/* Breaks out to full viewport width regardless of .container's max-width,
   since a background-video hero is meant to be edge-to-edge. Everything
   else on the page stays inside .container as before. */

.hero {
  position: relative;
  left: 50%;
  right: 50%;
  width: 100vw;
  margin-left: -50vw;
  margin-right: -50vw;
  /* Cancels .container's top padding (which exists to clear the fixed
     header on every other page) so the hero still starts flush at the
     very top of the viewport, with the header floating over it. */
  margin-top: -7rem;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.4);
  /* Fades to solid black over the bottom quarter of the hero, so the video
     blends smoothly into the black background below it instead of cutting
     off with a hard edge. */
  background-image: linear-gradient(to bottom, transparent 75%, #000000 100%);
  z-index: 1;
}

.hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 1rem;
}

/* .hero-title-group is left as a plain block div (the default) so it
   always takes its own line — an inline-level display would let the
   button below it sit beside it instead of underneath it. */

.hero-content h1 {
  margin: 0 0 0.5rem;
}

.hero-buttons {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem;
  margin-top: 1rem;
}

.hero-buttons .button,
.hero-buttons .button-secondary {
  margin: 0;
}

.hero-content h2 {
  font-size: clamp(1.2rem, 4vw, 2rem);
  margin: 0 0 1.5rem;
  /* Shrink-wrapped to its own text, not stretched to the block's full
     width — hero.js measures this box to size the logo above it, so it
     must report the text's true rendered width. */
  display: inline-block;
}

.hero-date-arrow {
  height: 0.55em;
  width: auto;
  vertical-align: middle;
  margin: 0 0.5em;
  fill: #ff2fc2;
  filter: drop-shadow(0 0 4px #ff2fc2) drop-shadow(0 0 10px #ff2fc2);
}

/* Default/fallback size before hero.js measures .hero-date and sets an
   exact pixel width — keeps the two lines the same width at all times. */
.hero-logo {
  display: block;
  height: auto;
  width: min(90vw, 32rem);
  margin: 0 auto;
}

/* --- Tables (admin lists) --- */

table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1rem;
}

th,
td {
  text-align: left;
  padding: 0.5rem;
  border-bottom: 1px solid #333;
}

.actions-cell {
  display: flex;
  gap: 1rem;
  align-items: center;
}

.actions-cell form {
  margin: 0;
}

/* --- Event form specifics --- */

.image-preview {
  display: block;
  max-width: 320px;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  margin-bottom: 0.5rem;
}

.image-preview-square {
  aspect-ratio: 1 / 1;
}

.checkbox-label {
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
  display: flex;
}

.checkbox-label input {
  width: auto;
}

.repeatable-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: flex-start;
  padding: 0.5rem 0;
  border-bottom: 1px solid #222;
}

.repeatable-row input,
.repeatable-row textarea {
  flex: 1 1 200px;
}

.form-actions {
  display: flex;
  gap: 1rem;
  align-items: center;
  margin-top: 1.5rem;
}

/* --- Site footer (every public page) --- */

.site-footer {
  margin-top: 4rem;
  padding: 2rem 1rem;
  text-align: center;
}

.footer-sitemap,
.footer-legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem;
  margin: 0 0 1rem;
}

.footer-sitemap a {
  font-family: var(--font-brand);
  text-transform: uppercase;
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  color: var(--color-white);
  text-decoration: none;
  transition: color 0.3s ease;
}

.footer-sitemap a:hover {
  color: var(--color-brand);
}

.footer-legal {
  margin-bottom: 1.5rem;
}

.footer-legal a {
  font-family: var(--font-body);
  font-size: 0.75rem;
  color: #888;
  text-decoration: none;
  transition: color 0.3s ease;
}

.footer-legal a:hover {
  color: var(--color-white);
}

.footer-copyright {
  color: var(--color-brand);
  font-size: 0.75rem;
  margin: 0;
}

/* Fixed bottom-right "back to top" button, present on every page (added
   in the footer partial). Hidden near the top of the page, fades in
   once there's something to scroll back up from. */
.back-to-top {
  position: fixed;
  right: 1.5rem;
  bottom: 1.5rem;
  width: 48px;
  height: 48px;
  background-color: #000;
  color: var(--color-brand);
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  z-index: 500;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, color 0.3s ease;
}

.back-to-top.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.back-to-top:hover {
  color: var(--color-white);
}

.back-to-top svg {
  width: 20px;
  height: 20px;
}

/* --- Public event list --- */
/* Also reused by the Photo Gallery archive (views/gallery/list.ejs) —
   changes scoped to #events below only affect the homepage Events
   section, not Gallery. */

.event-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 2rem;
  margin-top: 1rem;
}

.event-card img,
.event-card-image {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* Homepage Events section: fixed two-column grid on desktop, one column
   on small screens. The first event spans both columns (full section
   width) so it reads as the featured/next event, with the rest falling
   into the normal two-up grid below it. */
#events .event-list {
  grid-template-columns: repeat(2, 1fr);
}

#events .event-list > .event-card:first-child {
  grid-column: 1 / -1;
}

@media (max-width: 600px) {
  #events .event-list {
    grid-template-columns: 1fr;
  }
}

#events .event-card img,
#events .event-card-image {
  border-radius: 5px;
}

.event-card > a {
  text-decoration: none;
}

.event-card h3 {
  margin-bottom: 0.25rem;
}

.event-meta {
  color: #aaa;
  margin-top: 0;
}

.event-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 1rem;
}

.event-buttons .button,
.event-buttons .button-secondary {
  margin: 0;
  /* Same size as the Media section buttons — matched on padding AND height,
     since the Media buttons are taller than padding alone would suggest
     (their icon adds height that these icon-less buttons don't have). This
     is the size used on the event detail page; the homepage teaser cards
     use a smaller override below (#events .event-buttons). */
  padding: 1rem 2rem;
  min-height: 3.5rem;
}

/* Homepage teaser cards only: ~25-28% smaller than the detail-page size
   above, per explicit request — the event detail page is untouched. */
#events .event-buttons .button,
#events .event-buttons .button-secondary {
  padding: 0.75rem 1.5rem;
  min-height: 2.5rem;
}

/* --- Public event detail --- */
/* No max-width here — matches the full .container width used by every
   homepage section, rather than its own narrower column. */

.event-hero-image {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  margin-bottom: 1rem;
}

.lineup-list {
  padding-left: 1.25rem;
}

.faq-item {
  border-bottom: 1px solid #333;
  padding: 0.75rem 0;
}

.faq-item summary {
  cursor: pointer;
  font-weight: bold;
}

/* --- Public releases --- */

.release-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 2rem;
  margin-top: 1rem;
}

.release-card-image {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.release-card h3 {
  margin-bottom: 0.25rem;
}

/* Homepage Releases section only — fixed four-column grid, and a few
   teaser-specific tweaks (smaller title, no underline, rounded + slightly
   scaling artwork) that don't touch the standalone /releases archive
   page's own layout. */
#releases .release-list {
  grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 900px) {
  #releases .release-list {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  #releases .release-list {
    grid-template-columns: 1fr;
  }
}

#releases .release-card > a {
  text-decoration: none;
}

#releases .release-card-artist,
#releases .release-card-title {
  display: block;
  font-size: 0.9rem;
}

#releases .release-card-image {
  border-radius: 5px;
  transition: transform 0.3s ease;
}

#releases .release-card-image:hover {
  transform: scale(1.04);
}

.releases-load-more {
  text-align: center;
  margin-top: 2rem;
}

.releases-load-more .button {
  padding: 0.75rem 1.5rem;
  min-height: 2.5rem;
}

.release-detail {
  max-width: 480px;
}

.release-hero-image {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  margin-bottom: 1rem;
}

/* --- Video embeds (admin preview + public list/detail) --- */

.video-embed {
  position: relative;
  aspect-ratio: 16 / 9;
  margin-bottom: 1rem;
}

.video-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.video-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 2rem;
  margin-top: 1rem;
}

.video-card h3 {
  margin-bottom: 0.25rem;
}

.video-detail {
  max-width: 720px;
}

/* --- Admin gallery photo rows --- */

.gallery-thumb {
  width: 100px;
  height: 100px;
  object-fit: cover;
}

/* --- Public photo gallery --- */

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}

.gallery-grid-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
}

/* --- Public livesets --- */

.liveset-list {
  list-style: none;
  padding: 0;
  margin-top: 1rem;
}

.liveset-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1rem 0;
  border-bottom: 1px solid #333;
}

.liveset-row .button {
  margin: 0;
}

/* --- Homepage media section --- */

/* Same 2-column grid + gap as #events .event-list, for visual consistency
   between the two "pair of cards" layouts on the homepage. */
.media-links {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
  margin-top: 1rem;
}

@media (max-width: 600px) {
  .media-links {
    grid-template-columns: 1fr;
  }
}

.media-card {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16 / 9;
  background-size: cover;
  background-position: center;
  text-decoration: none;
  overflow: hidden;
  border-radius: 5px;
}

.media-card-recaps {
  background-image: url('/images/photos/media-section-thumbnail-recaps.jpg');
}

.media-card-gallery {
  background-image: url('/images/photos/media-section-thumbnail-gallery.jpg');
}

/* Subtle darken-on-hover, via a pseudo-element rather than an extra div so
   the markup stays a plain <a> per card. */
.media-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0);
  transition: background-color 0.3s ease;
  z-index: 1;
}

.media-card:hover::before {
  background-color: rgba(0, 0, 0, 0.35);
}

.media-card h3 {
  position: relative;
  z-index: 2;
  margin: 0;
  /* Smaller than the shared .button default — scoped here so it doesn't
     shrink PRE-REGISTER or any other button using the same class. */
  padding: 1rem 2rem;
}

/* --- Static statement pages/sections (About, Contact): deliberately more
   spacious typography than the rest of the site --- */

/* .static-page itself carries no width constraint — the homepage's About
   and Contact sections stay the same width as every other section this
   way. The standalone /about and /contact pages add .static-page-narrow
   below for their own centered, narrower column. */

.static-page-narrow {
  max-width: 640px;
  margin: 2rem auto;
  padding: 2rem 0;
}

.page-kicker {
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: #aaa;
  font-size: 0.85rem;
  margin: 0 0 0.5rem;
}

.static-page h1 {
  font-size: 3.5rem;
  letter-spacing: 0.03em;
  margin: 0 0 2rem;
}

.static-page p {
  font-size: 1.25rem;
  line-height: 1.6;
  margin: 0 0 1.75rem;
}

.static-page .statement {
  font-size: 1.5rem;
  font-weight: bold;
  letter-spacing: 0.03em;
  margin: 2rem 0;
}

/* --- Homepage About section: full-bleed blue "feature" panel with a
   subtle parallax background (background-attachment: fixed) and
   two-column body copy. Text styling intentionally matches the plain
   paragraph text in the Contact section (same font, size, line-height —
   just recolored to pure black for legibility on the blue background). */

.about-feature {
  position: relative;
  left: 50%;
  right: 50%;
  width: 100vw;
  margin-left: -50vw;
  margin-right: -50vw;
  background-image: url('/images/brand/background-blue.jpg');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  padding-top: 6rem;
  padding-bottom: 6rem;
}

.about-feature-inner {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 1rem;
}

.about-feature h2 {
  color: #000;
  margin: 0 0 2rem;
}

.about-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
}

.about-column p {
  color: #000;
  font-weight: 600;
  margin: 0;
}

@media (max-width: 900px) {
  .about-columns {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  /* background-attachment: fixed doesn't work on iOS Safari and can be
     janky on other mobile browsers — fall back to a normal scrolling
     background below the desktop breakpoint. */
  .about-feature {
    background-attachment: scroll;
  }
}

.contact-block {
  margin: 0 0 2.5rem;
}

.contact-block h2 {
  font-size: 1.1rem;
  letter-spacing: 0.05em;
  margin: 0 0 0.5rem;
  color: var(--color-brand);
}

/* The email paragraph's own default <p> top margin (not the h2's margin)
   was what created the visible gap here — collapsed with the h2's smaller
   margin-bottom, the browser default won out. Zero it so the email sits
   close under its title. */
.contact-block h2 + p {
  margin-top: 0;
}

/* --- Homepage Contact section: Contact info + Demos form side by side --- */

.contact-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  margin-top: 1rem;
}

/* Grid items stretch to match the taller column by default — combined
   with .contact-address's margin-top: auto below, this pins the address
   to the bottom of the Contact column so it lines up with the bottom of
   the Demos card alongside it. */
.contact-column {
  display: flex;
  flex-direction: column;
}

@media (max-width: 900px) {
  .contact-columns {
    grid-template-columns: 1fr;
  }
}

/* Demos side of the Contact section: the blue card wraps only the <form>
   itself (title/intro copy above it stays on the plain background, matching
   the Contact column) — scoped here rather than in .demos-form's shared
   partial so the standalone /demos page keeps its plain look. */
.contact-column-demos .demos-form {
  background-color: var(--color-brand);
  background-image: url('/images/brand/background-blue.jpg');
  background-size: cover;
  background-position: center;
  padding: 2rem;
  border-radius: 5px;
  /* Matches the gap above (the title-to-text spacing set on
     .contact-column > h2), so title-to-text and text-to-form read as
     the same rhythm. */
  margin-top: 1.5rem;
}

.contact-column-demos label {
  font-family: var(--font-brand);
  text-transform: uppercase;
  color: var(--color-white);
}

/* Homepage demo card only — its blue textured background already gives
   the black fields enough contrast on its own, so the border can go
   (unlike the standalone /demos page, which sits on a black background
   and still needs that border to stay visible). Square corners, and a
   visible border only while actively focused. */
.contact-column-demos .demos-form input {
  border: 1px solid transparent;
  border-radius: 0;
}

.contact-column-demos .demos-form input:focus {
  border-color: var(--color-white);
  outline: none;
}

/* Demos form: same button size as the Media section cards (scoped here so
   it doesn't touch .button-tertiary's shared base size), and pure black
   fields instead of the browser-default white. Scoped to .demos-form so
   both the homepage card and the standalone /demos page match. */
.demos-form .button-tertiary {
  padding: 1rem 2rem;
  /* Reset the shared button's own margin so the space above/below is
     controlled entirely by .form-actions below, not doubled up here. */
  margin: 0;
}

.demos-form input {
  background-color: #000000;
  color: var(--color-white);
  border: 1px solid #333;
  border-radius: 5px;
}

/* Field groups: more space above each label (separating it from the
   previous field) than below it (staying close to its own input) — the
   form's default flex gap is uniform, so it's turned off here and replaced
   with explicit, asymmetric margins instead. */
.demos-form {
  gap: 0;
}

.demos-form label {
  margin-top: 1.25rem;
  margin-bottom: 0.4rem;
}

.demos-form label:first-of-type {
  margin-top: 0;
}

/* Space above and below the submit button matches the form's own 2rem
   padding — the same gap already visible beside the fields. */
.demos-form .form-actions {
  margin-top: 2rem;
}

/* "Contact" / "Drop Your Demo" column titles: explicit, equal space above
   and below (previously relied on the browser's default h2 margin, which
   made the gap above feel inconsistent with the gap below). */
.contact-column > h2 {
  margin: 1.5rem 0;
}

/* Reusable round social icon buttons — add more by dropping another
   .social-button link inside .social-buttons. */

.social-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin: 1rem 0;
}

.social-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  position: relative;
}

.social-button-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.social-button-img-hover {
  display: none;
}

.social-button:hover .social-button-img-default {
  display: none;
}

.social-button:hover .social-button-img-hover {
  display: block;
}

.contact-address {
  font-style: normal;
  margin-top: auto;
  padding-top: 1.5rem;
  color: var(--color-brand);
}