/* =========================================
   Damp Co – external stylesheet (final-final)
   ========================================= */

/* Let thumbnail hover shadows show */
#projects .grid .tile { overflow: visible; }

/* ---- Project thumbnails: orange border + hover ----
   Targets ALL images inside the Projects grid (no reliance on filename).
*/
#projects .grid .tile img {
  border: 2px solid #F15A24 !important;   /* force on-brand border */
  border-radius: 8px;
  transition:
    border-color .18s ease,
    box-shadow   .18s ease,
    transform    .18s ease;
  display: block;
}

#projects .grid .tile img:hover {
  border-color: #ff7a47 !important;       /* brighter orange on hover */
  box-shadow:
    0 8px 24px rgba(241, 90, 36, 0.35),
    0 2px  6px rgba(0, 0, 0, 0.20);
  transform: translateY(-2px) scale(1.02);
  cursor: pointer;
}

/* ---- Hero image: matching orange frame + hover ---- */
.hero .panel > img {
  border: 4px solid #F15A24 !important;
  border-radius: 12px;
  transition: border-color .2s ease, box-shadow .2s ease;
}

.hero .panel > img:hover {
  border-color: #ff6a33 !important;
  box-shadow: none !important;
}

/* Remove white panel gutter/background around hero image */
.hero .panel{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* ---- Hero text spacing (tight + consistent) ----
   HTML should be:
   <p class="tag hero-subtitle-top">YOUR SOURCE FOR</p>
   <h1 class="hero-title">GLOBAL<br>THERMONUCLEAR<br>WARFARE</h1>
   <p class="tag hero-subtitle-bottom">WHEN YOU NEED IT MOST</p>
*/
.hero-title{
  line-height: 0.82;   /* a touch tighter than before */
  margin: 0;           /* no extra gaps above/below */
  font-family: "DDC Hardware", "DDC Hardware Regular", system-ui, -apple-system,
               Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  /* Smaller, still responsive */
  font-size: clamp(40px, 6vw, 76px);
}

/* Make the two small lines use identical spacing and size */
.tag.hero-subtitle-top,
.tag.hero-subtitle-bottom{
  margin: 0.06em 0;         /* base tighter spacing */
  font-size: var(--size-tag);
  display: block;
}
/* Pull top line closer to GLOBAL */
.tag.hero-subtitle-top{ margin: 0 0 0.02em; }
/* Pull bottom line closer to WARFARE */
.tag.hero-subtitle-bottom{ margin: 0.02em 0 0; }

/* === ABOUT SECTION CLEANUP === */

/* Remove white background + shadows from about section container */
.about-section,
.about-section .tile {
  background: none !important;
  box-shadow: none !important;
  border: none !important;
}

/* Tighten spacing for heading */
.about-section h2 {
  margin-top: 1.5rem;   /* less gap above */
  margin-bottom: 1rem;  /* less gap below */
  line-height: 1.1;     /* slightly tighter line height */
}

/* Align text + image like mock-up */
.about-section .grid {
  align-items: center;
  gap: 1.5rem; /* space between text and image */
}

/* Remove rounded corners from about-section images */
.about-section img {
  border-radius: 0 !important;
}



/* ===== ABOUT SECTION — remove card look & tighten spacing ===== */
#about .panel{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;          /* kills the white “gutter” */
  border-radius: 0 !important;
  display: grid;                   /* ensure grid even if inline style changes */
  grid-template-columns: 1fr 1.2fr;
  gap: 24px;
  align-items: center;
}

#about .panel img{
  border: 4px solid var(--accent) !important;   /* orange border visible */
  border-radius: 12px !important;               /* rounded corners */
  box-sizing: border-box;
}

/* Heading spacing for this section */
#about h2{
  margin-top: 0.75rem;             /* less gap above */
  margin-bottom: 1rem;             /* less gap below */
  line-height: 0.86;               /* even tighter between lines */
}

/* ===== Lightbox ===== */
.lightbox{
  position: fixed;
  inset: 0;
  background: color-mix(in oklab, #000 60%, var(--bg) 40%);
  display: none;
  align-items: center;
  justify-content: center;
  gap: 12px;
  z-index: 1000;
}
.lightbox.open{ display: flex; }
.lightbox-main{ display: grid; justify-items: center; max-width: 90vw; }
.lightbox-figure{ margin: 0; text-align: center; max-width: 90vw; max-height: 86vh; display: grid; gap: 10px; }
.lightbox-image{ max-width: 90vw; max-height: 72vh; width: auto; height: auto; border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.4); }
.lightbox-caption{
  color: #fff;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial,
               "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
}
.lightbox-count{
  color: #fff;
  opacity: 0.85;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: none;
  font-size: 14px;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial,
               "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
}
.lightbox-desc{
  max-width: 90vw;
  color: #fff;
  text-align: center;
  margin-top: 12px;
  font-weight: 500;
  white-space: pre-line;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial,
               "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
}

.lightbox button{
  appearance: none;
  border: 2px solid var(--accent);
  background: var(--accent);
  color: #fff;
  border-radius: 999px;
  width: 44px; height: 44px;
  font-size: 28px;
  line-height: 1;
  display: grid; place-items: center;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0,0,0,.25);
}
.lightbox-close{ position: absolute; top: 18px; right: 18px; width: 40px; height: 40px; font-size: 24px; }
/* Arrows: fixed, vertically centered regardless of image size */
.lightbox-prev,
.lightbox-next{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.lightbox-prev{ left: 18px; }
.lightbox-next{ right: 18px; }

@media (max-width: 700px){
  .lightbox{ gap: 6px; }
  .lightbox button{ width: 38px; height: 38px; font-size: 22px; }
  .lightbox-image{ max-width: 92vw; max-height: 60vh; }
}

/* About grid responsive stacking */
@media (max-width: 900px){
  .about-grid{ grid-template-columns: 1fr !important; }
}

/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce){
  * { animation: none !important; transition: none !important; }
}

/* ===== Subtle Background Texture ===== */
/* Adds a very light noise over the page background to give it a tactile feel. */
body{
  /* Tiled SVG noise. Low opacity keeps it tasteful. */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%' height='100%' filter='url(#n)' opacity='0.35'/></svg>");
  background-size: 200px 200px;
  background-blend-mode: multiply;
  /* Allow quick tuning site-wide via CSS var if set inline */
  opacity: var(--texture-opacity, 1);
}