/* =========================================================
   GLOBAL RESET / VARIABLES
   ========================================================= */

:root {
  --overlay-dark: 0.75;
  --overlay-light: 0.5;

  --pad-top: 16px;
  --pad-side: 16px;

  --page-bg: #d6d7d9;
}

html, body { height: 100%; }
body { margin: 0; background: #000; }
figure { margin: 0; }

html {
  scroll-behavior: smooth;
}

@keyframes overlayPulse {
  0%   { background: rgba(0,0,0,var(--overlay-dark)); }
  50%  { background: rgba(0,0,0,var(--overlay-light)); }
  100% { background: rgba(0,0,0,var(--overlay-dark)); }
}

/* =========================================================
   SHARED NAV / BRAND
   ========================================================= */

.top-left {
  position: absolute;
  top: calc(var(--pad-top) + env(safe-area-inset-top));
  left: calc(var(--pad-side) + env(safe-area-inset-left));
  z-index: 5;

  display: flex;
  flex-direction: column;
  gap: 1px;

  font-family: neue-haas-grotesk-display, sans-serif;
  font-weight: 600;
}

.brand,
.primary-link {
  font-size: 36px;
  line-height: 0.9;
  letter-spacing: -0.015em;
  text-decoration: none;
}

.brand {
  color: #fff;
  transition: opacity 200ms ease;
  opacity: 1;
}

.brand:hover {
  opacity: 0.9;
}

.primary-link {
  color: #fff;
  opacity: 0.5;
  transition: opacity 200ms ease;
}
.primary-link:hover { opacity: 0.8; }

.payjay {
  position: absolute;
  top: calc(var(--pad-top) + env(safe-area-inset-top));
  right: calc(var(--pad-side) + env(safe-area-inset-right));
  z-index: 6;

  width: 53px;
  opacity: 0.55;
  mix-blend-mode: screen;
  pointer-events: none;
}

/* =========================================================
   LANDING HERO
   ========================================================= */

.hero {
  position: relative;
  min-height: 100vh;
  height: 100svh;
  height: 100dvh;
  overflow: hidden;

  background: url("../images/dilla-detroit-stars.jpg") center no-repeat;
}

@media (orientation: portrait)  { .hero { background-size: auto 100%; } }
@media (orientation: landscape) { .hero { background-size: 100% auto; } }

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  animation: overlayPulse 20s ease-in-out infinite;
  pointer-events: none;
}

/* =========================================================
   GALLERY (landing + reuse)
   ========================================================= */

.gallery-section {
  position: relative;
  background: var(--page-bg);
  padding: 40px var(--pad-side) 56px;
}

.gallery-section::before {
  content: "";
  position: absolute;
  inset: 0;
  animation: overlayPulse 20s ease-in-out infinite;
  pointer-events: none;
}

.gallery-inner { position: relative; z-index: 1; }

.grid {
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: 18px;
}
@media (min-width:768px){ .grid{ grid-template-columns:repeat(3,1fr);} }

.card { text-decoration:none; transition:opacity .25s, transform .25s; }
.grid:hover .card{ opacity:.55; }
.grid:hover .card:hover{ opacity:1; transform:translateY(-2px); }

.thumb{ aspect-ratio:4/5; overflow:hidden; }
.thumb img{ width:100%; height:100%; object-fit:cover; }

.caption{
  margin-top:8px;
  font-family: neue-haas-grotesk-display, sans-serif;
  font-weight:600;
  font-size:16px;
  color:#fff;
}

/* =========================================================
   ITEM PAGES BACKGROUND OVERLAY
   ========================================================= */

.page-item{
  background:var(--page-bg);
  position:relative;
}
.page-item::before{
  content:"";
  position:fixed;
  inset:0;
  animation:overlayPulse 20s ease-in-out infinite;
  pointer-events:none;
  z-index:0;
}
.page-item>*{ position:relative; z-index:1; }

/* =========================================================
   ITEM HERO IMAGES
   ========================================================= */

.item-hero{ position:relative; overflow:hidden; }

.item-hero-media img{
  width:100%;
  height:auto;
  display:block;
}

/* dual images: hide second on mobile */
.item-hero-media--second{ display:none; }

/* tablet+ dual layout */
@media (min-width:768px){

  .item-hero-media--second{ display:block; }

  .item-hero--portrait .item-hero-pair{
    display:flex;
    width:100vw;
    margin-left:calc(50% - 50vw);
    margin-right:calc(50% - 50vw);
  }

  .item-hero--portrait .item-hero-media{
    flex:0 0 50vw;
    max-width:50vw;
  }

  .item-hero--portrait .item-hero-media img{
    width:100%;
    height:100%;
    object-fit:cover;
  }
    /* Dual header: force each half to 8:9 */
  .item-hero--portrait .item-hero-pair .item-hero-media {
    aspect-ratio: 8 / 9;
    overflow: hidden;
  }

  .item-hero--portrait .item-hero-pair .item-hero-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
}

/* Single hero image: crop to 16:9 on desktop only */
@media (min-width: 1200px) {
  /* target only the single-image hero (no pair present) */
  .item-hero:not(.item-hero--portrait) .item-hero-media {
    aspect-ratio: 16 / 9;
    overflow: hidden;
  }

  .item-hero:not(.item-hero--portrait) .item-hero-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
}


/* =========================================================
   PHOTO CREDIT
   ========================================================= */

.photo-credit{
  margin:10px auto 18px;
  max-width:600px;
  padding:0 var(--pad-side);
  font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size:14px;
  color:#a9a9a9;
}

/* =========================================================
   ITEM TEXT COLUMN
   ========================================================= */

.item-content{ padding:34px var(--pad-side) 44px; }

.item-inner{
  max-width:600px;
  margin:0 auto;
}

.item-title{
  font-family: neue-haas-grotesk-display, sans-serif;
  font-weight:600;
  font-size:36px;
  color:#fff;
  margin:0 0 10px;
}

.item-divider{
  height:1px;
  background:rgba(255,255,255,.85);
  margin:14px 0 18px;
}

.item-body{
  font-family: neue-haas-grotesk-text, sans-serif;
  font-weight: 300;
  font-size: 20px;      
  line-height: 1.25;
  color: #fff;
  opacity: 0.95;
  letter-spacing: -0.01em;
}
.item-body strong{
  font-family: neue-haas-grotesk-display, sans-serif;
  font-weight: 600;   /* display weight you’re using for titles */
  color: #fff;    
  letter-spacing: 0.015em;
}
@media (min-width:768px){
  .item-body{ font-size:22px; }
}
.item-body a{
  color: #ffcc00;
  text-decoration: none;
  opacity: 0.85;
  transition: opacity 200ms ease, filter 200ms ease;
}

.item-body a:hover{
  opacity: 1;
  filter: brightness(1.1);
}

/* =========================================================
   ADDITIONAL PHOTOS (two variants)
   ========================================================= */

/* default = 600px centered */
.item-photos{ margin-top:32px; }

.item-photos .item-photo{
  max-width:600px;
  margin:0 auto 24px;
}
.item-photos img{
  width:100%;
  height:auto;
  display:block;
}

/* wide breakout version */
.item-photos--wide{
  width:calc(100vw - (var(--pad-side)*2));
  margin-left:calc(50% - 50vw + var(--pad-side));
  margin-right:calc(50% - 50vw + var(--pad-side));
}
.item-photos--wide .item-photo{
  max-width:none;
}

/* =========================================================
   FOOTER
   ========================================================= */

.site-footer{
  background:#333;
  padding:44px var(--pad-side) 56px;
}
.site-footer a{
  text-decoration:none;
  opacity:.85;
  transition: opacity 200ms ease, filter 200ms ease;
}

/* center footer column */
.footer-inner{
  max-width:1100px;
  margin:0 auto;
}

/* footer text column */
.footer-text{
  max-width:600px;
  margin:0 auto;
  font-family: neue-haas-grotesk-display, sans-serif;
  font-size:20px;
  line-height:1.25;
  color:#a9a9a9;
}

.footer-text .white{ color:#fff; }

@media (min-width:768px){
  .footer-text{ font-size:22px; }
}

/* colored footer links */
.site-footer a{ text-decoration:none; opacity:.85; }
.site-footer a:hover{ opacity:1; filter:brightness(1.1); }

.site-footer .ig{ color:#ff0069; }
.site-footer .fb{ color:#3399ff; }
.site-footer .sp{ color:#1ed760; }
.site-footer .bio-link{ color:#fff; }

/* =========================================================
   BREAKPOINT SIZING
   ========================================================= */

@media(min-width:768px){
  :root{ --pad-top:22px; --pad-side:22px; }
  .brand,.primary-link{ font-size:42px; }
  .payjay{ width:62px; }
}

@media(min-width:1200px){
  :root{ --pad-top:28px; --pad-side:28px; }
  .brand,.primary-link{ font-size:50px; }
  .payjay{ width:72px; }
}

 
/* BOOST TEST */

.hero::after,
.gallery-section::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
}

.page-item::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  z-index: 0;
}

/* Activate boost when <html> has .is-boosting */
html.is-boosting .hero::after,
html.is-boosting .gallery-section::after,
html.is-boosting .page-item::after {
  background: rgba(255, 255, 255, 0.22); /* tweak color if you like */
  animation: overlayBoost 1.2s ease-out forwards;
}

@keyframes overlayBoost {
  0%   { opacity: 0; }
  10%  { opacity: 1; }
  100% { opacity: 0; }
}