:root{
    --card-bg:  rgba(255,255,255,0.08);
    --text:     #313131;
    --muted:    #231a07;
    --accent:   #231a07;
    --shadow:   0 20px 50px rgba(0,0,0,0.35);
    --radius:   18px;
  }

  *{ box-sizing: border-box; }
  html, body { height: 100%; margin: 0; color-scheme: dark; }
  body{
    font-family: "Poppins", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
    color: var(--text);

      linear-gradient(0deg, rgba(9,12,20,0.55), rgba(9,12,20,0.55)),
      url("https://aspirearts.uk/gifs/bck2025.jpg");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed; /* optional “parallax” feel */
background-color: #d7c5ac; /* solid fallback */

  }

  .wrap{
    min-height: 100%;
    display: grid;
    place-items: center;
    padding: 24px;
  }

  .card{
    width: 100%;
    max-width: 970px;
    background: linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.04));
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 20px 18px;
    text-align: center;
    animation: fadeIn 600ms ease-out both;
   margin-top:22px;
  }
/* Size the clickable link */
.logo-link{
  display:inline-block;
  width:60%;
  max-width:290px;
  line-height:0;          /* remove inline gap */
  text-decoration:none;
}

/* Make the image fill the link */
.logo{
  display:block;
  width:100%;
  height:auto;
  filter:drop-shadow(0 6px 18px rgba(0,0,0,0.35));
  user-select:none;
  border:0px solid #000;
  /* optional: ensure border doesn’t increase total box size */
  box-sizing:border-box;
}



  h1{ margin:9px 0 6px; font-size:clamp(21px,4.6vw,35px); line-height:1.1; font-weight:300; letter-spacing:.2px; }
  .tagline{ margin:0 0 18px; font-size:clamp(14px,2.4vw,16px); color:var(--muted); }
  .pill{ display:inline-block; margin-top:16px; padding:10px 16px; border-radius:999px; border:1px solid rgba(255,255,255,0.18); background:var(--card-bg); font-size:14px; }
  .accent{ position:relative; display:inline-block; }
  .accent::after{ content:""; position:absolute; left:0; right:0; bottom:-4px; height:2px; background:linear-gradient(90deg, transparent, var(--accent), transparent); opacity:.85; }
  footer{ margin-top:18px; font-size:12px; color:var(--muted); opacity:.85; }
 /* Social icon styles */
    .social {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      margin-left: 8px;
    }
    .social-link {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 36px;
      height: 36px;
      border-radius: 999px;
      background: var(--card-bg);
      border: 1px solid rgba(255,255,255,0.18);
      text-decoration: none;
      transition: transform 150ms ease, background 150ms ease, border-color 150ms ease;
    }
    .social-link:hover { transform: translateY(-1px); background: rgba(255,255,255,0.14); border-color: rgba(255,255,255,0.28); }
    .social-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
    .social-link svg { width: 20px; height: 20px; display: block; }

.select { 
    border: 1px solid #c4c4c4; 
    width: 275px; 
    font-size: 16px; 
    padding: 4px 4px 4px 4px; 
    border-radius: 4px; 
    -moz-border-radius: 4px; 
    -webkit-border-radius: 4px; 
    box-shadow: 0px 0px 8px #d9d9d9; 
    -moz-box-shadow: 0px 0px 8px #d9d9d9; 
    -webkit-box-shadow: 0px 0px 8px #d9d9d9; 
} 
 
.select:focus { 
    outline: none; 
    border: 1px solid #7bc1f7; 
    box-shadow: 0px 0px 8px #7bc1f7; 
    -moz-box-shadow: 0px 0px 8px #7bc1f7; 
    -webkit-box-shadow: 0px 0px 8px #7bc1f7; 
} 

@media (max-width: 599px){
  .select{ width:90%; }
}

P.clear{
clear:both;
}

.smallselect { 
    border: 1px solid #c4c4c4; 
    width: 135px; 
    font-size: 13px; 
    padding: 4px 4px 4px 4px; 
    border-radius: 4px; 
    -moz-border-radius: 4px; 
    -webkit-border-radius: 4px; 
    box-shadow: 0px 0px 8px #d9d9d9; 
    -moz-box-shadow: 0px 0px 8px #d9d9d9; 
    -webkit-box-shadow: 0px 0px 8px #d9d9d9; 
} 
 
.smallselect:focus { 
    outline: none; 
    border: 1px solid #7bc1f7; 
    box-shadow: 0px 0px 8px #7bc1f7; 
    -moz-box-shadow: 0px 0px 8px #7bc1f7; 
    -webkit-box-shadow: 0px 0px 8px #7bc1f7; 
} 


/* Base button (pairs with your existing --card-bg, --accent, --text vars) */
.button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:12px 18px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.18);
  background: var(--card-bg);
  color: var(--text);
  font-size:14px;
  font-weight:600;
  line-height:1;
  text-decoration:none;
  cursor:pointer;
  user-select:none;
  -webkit-tap-highlight-color: transparent;
  transition:
    transform 150ms ease,
    background 180ms ease,
    border-color 180ms ease,
    box-shadow 200ms ease,
    filter 120ms ease;
  /* make it work for <a> and <button> */
  appearance: none;
  -webkit-appearance: none;
}

.button:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,0.14);
  border-color: rgba(255,255,255,0.28);
  box-shadow: 0 8px 24px rgba(0,0,0,0.35);
}

.button:active{
  transform: translateY(0);
  filter: brightness(0.98);
  box-shadow: 0 4px 16px rgba(0,0,0,0.35);
}

.button:focus-visible{
  outline: none;
  box-shadow:
    0 0 0 3px rgba(56,189,248,0.45), /* accent ring */
    0 8px 24px rgba(0,0,0,0.4);
  border-color: rgba(56,189,248,0.55);
}

.button:disabled,
.button[disabled],
.button[aria-disabled="true"]{
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Primary (accented) variant */
.button--primary{
  background: linear-gradient(180deg, rgba(56,189,248,0.22), rgba(56,189,248,0.08));
  border-color: rgba(56,189,248,0.45);
}
.button--primary:hover{
  background: linear-gradient(180deg, rgba(56,189,248,0.28), rgba(56,189,248,0.12));
  border-color: rgba(56,189,248,0.6);
}

/* Sizes & helpers */
.button--sm{ padding:8px 14px; font-size:13px; }
.button--lg{ padding:14px 22px; font-size:15px; }
.button--block{ display:flex; width:100%; }

/* Optional: icon sizing if you drop an SVG inside */
.button svg{ width:1.05em; height:1.05em; display:block; }


/* Gallery grid */
.gallerygrid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:14px;
  margin:24px auto 8px;
  width:100%;
  max-width:1200px; /* stretch wider if you like */
  padding:0 16px;
}

/* Each tile */
/* Update .gallerybox to hold image + caption */
.gallerybox{
  display:flex;
  flex-direction:column;
  width:100%;
  border-radius:16px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,0.14);
  background: var(--card-bg, rgba(255,255,255,0.08));
  box-shadow: 0 10px 24px rgba(0,0,0,0.28);
  cursor:pointer;
  padding:0;
  transition: transform 150ms ease, border-color 150ms ease, box-shadow 200ms ease, background 150ms ease;
}
.gallerybox:hover{ transform: translateY(-2px); border-color: rgba(255,255,255,0.28); background: rgba(255,255,255,0.14); }
.gallerybox:focus-visible{ outline:2px solid var(--accent, #38bdf8); outline-offset:2px; }

/* Ensure pointer cursor even when hovering child elements */
.gallerybox,
.gallerybox * {
  cursor: pointer;
}


/* Square thumbnail area */
.gallerythumb{
  aspect-ratio: 1 / 1;
  width:100%;
  overflow:hidden;
}
.gallerythumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* Caption under each tile */
.gallerycaption{
  padding:10px 12px;
  font-size: 13px;
  color: var(--muted, #cbd5e1);
  line-height:1.35;
  background: linear-gradient(180deg, rgba(0,0,0,0.08), rgba(0,0,0,0.16));
  border-top: 1px solid rgba(255,255,255,0.12);
  /* clamp to two lines */
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

/* Lightbox overlay */
.lightbox{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.78);
  backdrop-filter: blur(2px);
  display: grid;                 /* centers content and plays nice with overflow */
  place-items: center;
  padding: 24px;
  z-index: 9999;
  overflow: auto;              
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.lightbox[hidden]{ display:none; }

.lightbox__img{
  display: block;
  max-width: min(92vw, 1400px);
  /* Use dynamic viewport units so Chrome/Safari account for UI bars */
  max-height: calc(100dvh - 120px); /* leaves room for padding & the close button */
  width: auto;
  height: auto;
  object-fit: contain;     
  border-radius: 16px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.55);
  border: 1px solid rgba(255,255,255,0.18);
  background:#111;
}

/* Fallback for older browsers that don't support dvh */
@supports not (height: 100dvh) {
  .lightbox__img { max-height: calc(100vh - 120px); }
}

/* Close button (X) — top-left to avoid menus */
.lightbox__close{
  position:fixed;
  top:14px; left:14px;
  width:42px; height:42px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.24);
  background: rgba(0,0,0,0.45);
  color:#fff;
  font-size:24px; line-height:1;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  transition: transform 120ms ease, background 150ms ease, border-color 150ms ease;
}
.lightbox__close:hover{ transform: translateY(-1px); background: rgba(255,255,255,0.14); border-color: rgba(255,255,255,0.32); }
.lightbox__close:focus-visible{ outline:2px solid var(--accent, #38bdf8); outline-offset:2px; }

/* Prevent background scroll when lightbox is open */
.noscroll{ overflow:hidden; }

/* Responsive columns */
@media (max-width: 1024px){
  .gallerygrid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 599px){
  .gallerygrid{ grid-template-columns: 1fr; padding:0 12px; }
}
  @keyframes fadeIn{ from{ transform:translateY(8px); opacity:0; } to{ transform:translateY(0); opacity:1; } }

/* If tiles are <button> elements, reset native look so Chrome shows pointer reliably */
button.gallerybox{
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: 0;
}

/* Absolutely force the hand on the tile and all its children */
.gallerybox,
.gallerybox *, 
.gallerybox::before, 
.gallerybox::after{
  cursor: pointer !important;
  pointer-events: auto;
}



a {
color:#000;
background:transparent;
text-decoration:none;
}

a:visited {
color:#333;
background:transparent;
text-decoration:none;
}

a:active {
color:#333;
background:transparent;
text-decoration:none;
}

a:hover {
color:#000;
text-decoration:underline;
}

a[href] {
  cursor: pointer;
}

/* 1) Force the hand on links and anything inside them */
a[href],
a[href] *{
  cursor: pointer !important;
}

/* 2) Make purely decorative pseudo-elements ignore the mouse */
.accent::after{
  pointer-events: none;
}

/* 3) Make sure your “link components” are actually blocks */
a.logo-link,
a.social-link,
a.button{
  display: inline-flex; /* you already use inline-flex for social/button */
}

/* 4) If you ever mark a link as disabled, prevent hover confusion */
a[aria-disabled="true"],
a[disabled]{
  pointer-events: none;
  cursor: not-allowed !important;
}

a[href] img {
  cursor: pointer;
}

.popup-gallery a {
  display:block;
  cursor:pointer;
}