/* Basic layout and album grid */
:root{
  --bg:#313131;
  --card:#0b1220;
  --muted:#9aa6b2;
  --accent:#facc66;
  /* default hero image (used when a page doesn't override via data-hero) */
  /*--hero-image: url('https://wallpapers.com/images/featured/gay-ebyiurxj03du9idk.jpg');*/
  --top-menu-height: 54px;
}
/* Make box-sizing predictable to avoid width overflow from padding/margins */
html,*,*::before,*::after{box-sizing:border-box}
html{height:100%}
/* Use min-height so body padding doesn't force extra scroll beyond viewport
   and consolidate into a single body rule to avoid duplicate/conflicting
   declarations that could constrain layout. */
body{
  margin:0;
  font-family:'Urbanist', system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial;
  /* Use bold (600) for body per request; headings promoted to 800 elsewhere */
  font-weight:600;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  background:linear-gradient(200deg,#2b2b2b 50%, #453321 100%);
  background-attachment:fixed;
  color:#e6eef6;

  /* Account for the fixed top menu and use a column flex layout so the
     footer naturally sits at the bottom when content is short. */
  padding-top:var(--top-menu-height);
  /* Keep body at least viewport height; the top menu is offset via padding-top. */
  min-height:100vh;
  display:flex;
  flex-direction:column;
}
/* Main page wrapper: flex:1 so footer is pushed to bottom when content is short */
main.page-wrap{flex:1}
.site-header{padding:2rem 1rem 0; text-align:center}
.site-title{margin:0;font-size:clamp(1.6rem,3vw,2.4rem);font-weight:800}
.site-sub{margin:6px 0 2rem;color:var(--muted);font-weight:600;letter-spacing:0.01em;-webkit-font-smoothing:antialiased}
.container{max-width:1100px;margin:0 auto;padding:1rem}
.albums{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem;width:100%}

/* Featured grid: larger, responsive tiles that fill the page. Thumbnails are
  visually constrained to a maximum height to keep layout tight. */
.featured-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1rem;align-items:start;padding:1rem}
.featured-grid .album{padding:8px}
.featured-grid .album-thumb{width:100%;height:400px;max-height:400px;overflow:hidden;border-radius:8px}
.featured-grid .album-thumb img{width:100%;height:100%;object-fit:cover;display:block}

/* New featured mosaic: 4-column CSS Grid with JS masonry (grid-row spans).
  Each thumbnail gets a small internal padding for a light frame. */
.featured{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:1px;gap:3px;padding:3px;width:100%;max-width:100%}
.featured-item{background:transparent;border-radius:0;overflow:visible;padding:0;display:block}
/* Prevent grid children from forcing column expansion when images have
  large intrinsic sizes. Allow grid tracks to shrink by setting min-width:0. */
.featured, .featured-item, .featured .album, .featured .album-thumb{min-width:0}
/* Featured thumbnail container: keep a fixed layout and hide overflow so
  image transforms (scale/translate) don't affect the grid or cause
  layout shifts. */
.featured-item .album-thumb{position:relative;padding:0;border-radius:0;overflow:hidden;background:transparent;width:100%}
/* Make the image absolutely positioned inside the thumb so transforms
  do not change the element's measured size and thus won't push the grid.
  Preserve the existing transform/transition behavior for hover zoom. */
.featured-item .album-thumb img{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:cover;display:block;transform:translate3d(var(--tx,0px),var(--ty,0px),0) scale(var(--scale,1));transition:transform 1.3s cubic-bezier(.22,.9,.3,1),filter .6s ease;transform-origin:var(--fx,50%) var(--fy,50%);will-change:transform;backface-visibility:hidden}

/* Optional per-size tweaks can be added here if needed. */
.featured-item .album-title{display:none}

/* Disable the card lift/translate on hover for the featured mosaic (the
  hover effect is only a slow image zoom). We avoid touching global
  `.album:hover` so other album lists keep their behavior. */
.featured-item{--scale:1}
.featured-item:hover{transform:none !important;box-shadow:none !important;--scale:var(--hover-zoom,1.08)}

/* Responsive columns: max 4, then 3/2/1 depending on viewport width */
@media (max-width:1200px){
  .featured{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:900px){
  .featured{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:520px){
  .featured{grid-template-columns:repeat(1,1fr)}
}

/* Slow, subtle zoom on the image itself when hovering the item.
  Use the per-tile `--hover-zoom` variable (written by JS) so each tile
  zooms by a different amount. Remove the hard-coded transform so the
  var-driven scale isn't overridden. */
.featured-item:hover .album-thumb img{--scale:var(--hover-zoom,1.12)}

/* Ensure `.featured` tiles are not constrained by the earlier
  `.featured-grid .album-thumb` 400px rule. Inline heights from JS
  should control the thumbnail height; allow auto/max to be none. */
.featured .album-thumb{height:auto;max-height:none}

/* Hide the per-tile count for featured grid; the viewer shows a top-center counter when opened */
.featured-grid .album-count{display:none}

/* HERO section for HOME */
.hero{height:60vh;min-height:500px;max-height:640px;position:relative;overflow:hidden;display:flex;align-items:center;margin-top:0;}
.hero-inner{position:absolute;inset:0;background-image:linear-gradient(rgba(10,10,10,0.25), rgba(10,10,10,0.35)), var(--hero-image);background-size:cover;background-position:center center;filter:contrast(1.02);will-change:transform;transform:translate3d(0,0,0);}
.hero-overlay{position:relative;z-index:2;max-width:1100px;margin:0 auto;padding:3rem 1rem 3rem;color:#fff;text-align:right;}
.hero-title{font-size:clamp(2rem,6vw,4rem);margin:0 0 .25rem;color:var(--accent);font-weight:800}
.hero-sub{margin:0;color:rgba(255,255,255,0.9);font-weight:600}


/* subtle vignette so text reads over the image */
.hero::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg, rgba(0,0,0,0.18) 0%, rgba(0,0,0,0.45) 70%);mix-blend-mode:multiply}

/* Intro section: two-column layout with fade-in */
.intro-section{display:grid;grid-template-columns:220px 1fr;gap:2rem;align-items:start;margin-top:2rem}
.intro-left h3{font-size:2.25rem;margin:0;color:var(--accent);font-weight:800}
.intro-right p{color:#eef3fb;line-height:1.6;margin:0 0 1rem;padding:12px}

.textbox-section{display:grid;grid-template-columns:220px 1fr;gap:2rem;align-items:start;margin-top:2rem}

.textbox-left h3{font-size:2.25rem;margin:0;color:var(--accent);font-weight:800}
.textbox-right p{color:#eef3fb;line-height:1.6;margin:0 0 1rem;background:rgba(0,0,0,0.3);border-radius:8px;padding:12px}

/* Fade-in utility */
.fade-in{opacity:0;transform:translateY(18px);transition:opacity 2.6s ease, transform 2.6s cubic-bezier(.22,.9,.3,1)}
.fade-in.visible{opacity:1;transform:none}

@media (max-width:860px){
  .intro-section{grid-template-columns:1fr;}
  .textbox-section{grid-template-columns:1fr;}
  .hero-overlay{text-align:center}
  .hero-title{font-size:clamp(1.8rem,7vw,3rem)}
}

/* Make sure the hero image performs well while translating on scroll */
.hero-inner{backface-visibility:hidden}

.album{background:rgba(0, 0, 0, 0.15);border-radius:10px;padding:10px;cursor:pointer;transition:transform .18s ease, box-shadow .18s ease;display:flex;flex-direction:column;align-items:center}
.album:hover{transform:translateY(-6px);box-shadow:0 8px 30px rgba(250, 204, 102, 0.6)}
.album-thumb{width:100%;aspect-ratio:3/2;overflow:hidden;border-radius:8px}
.album-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.album-title{margin:10px 0 0;font-size:1.05rem;font-weight:800}
.album-count{margin:4px 0 8px;color:var(--muted);font-size:.9rem;font-weight:600;letter-spacing:0.01em;-webkit-font-smoothing:antialiased}

/* Site Logo, top left corner floating, 200px wide */
.site-logo{position:fixed;top:2px;left:2px;height:50px;z-index:1100;pointer-events:none;opacity:0.8}

/* Ensure fixed top menu doesn't cover content; menu height accounted for in the consolidated body rule above */

/* Top menu (floating, text-only) */
.top-menu{position:fixed;left:0;right:0;top:0;height:var(--top-menu-height);display:flex;align-items:center;justify-content:center;z-index:900;/* gradient: solid black at top fading to transparent at bottom */
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.8) 0%, #2b2b2b 100%);
}
.menu-list{display:flex;gap:75px;list-style:none;margin:0;padding:0}
.menu-item{position:relative;height:var(--top-menu-height);display:flex;align-items:center}
.menu-link{color:#ffffff;text-decoration:none;padding:8px 6px;font-weight:600;display:inline-block}
.menu-link:hover{color:var(--accent);}
.menu-link:focus{outline:2px solid rgba(255,255,255,0.12);outline-offset:3px}

/* Dropdown (hidden by default) */
.dropdown{position:absolute;top:100%;left:0;min-width:160px;border-radius:0 0 6px 6px;padding:8px 0;box-shadow:0 8px 30px rgba(0,0,0,0.6);display:none;
background: linear-gradient(to bottom,rgba(43,43,43,1) 0%, rgba(43,43,43,.9) 100%);
}
.dropdown li{list-style:none}
.dropdown a{display:block;padding:8px 14px;color:#a67c52;text-decoration:none;font-weight:500;transition:color .12s ease, text-shadow .18s ease}
.dropdown a:hover, .dropdown a:focus{color:var(--accent);}

/* Show dropdown on hover or when focused for accessibility */
.menu-item:hover > .dropdown, .menu-item:focus-within > .dropdown{display:block}

/* Top menu: make menu usable on small screens.
   Reduce spacing and allow horizontal scrolling so items remain accessible
   without collapsing into the page content. Also ensure each menu item
   doesn't flex-grow and instead stays its intrinsic size. */
@media (max-width:720px){
  /* allow horizontal scrolling but keep vertical overflow visible so
     dropdowns are not clipped by the scroll container */
  /* hide the desktop horizontal menu on small screens (we use the hamburger) */
  .top-menu .menu-list{display:none}
  .menu-list{gap:12px;padding:0 12px;overflow-x:auto;overflow-y:visible;justify-content:flex-start;-webkit-overflow-scrolling:touch}
  .menu-list::-webkit-scrollbar{height:6px}
  .menu-list::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.06);border-radius:4px}
  /* prevent items from stretching and avoid creating a positioned
     containing block that would clip absolutely-positioned dropdowns */
  .menu-item{flex:0 0 auto;position:static}
  .menu-link{padding:8px 10px;font-size:0.95rem}
  /* ensure dropdowns float above the scroll frame and top menu */
  .dropdown{position:absolute;z-index:3000}
  .top-menu{overflow:visible}
}

/* Mobile panel styles for hamburger menu */
.menu-toggle{display:none;background:transparent;border:0;color:#fff;font-size:22px;padding:6px 8px;cursor:pointer}
.menu-toggle .hamburger{font-size:20px;line-height:1}
/* hide mobile panel by default (desktop) — it will be shown via media query */
.mobile-menu-panel{display:none}

@media (max-width:720px){
  .menu-toggle{display:block;position:absolute;right:10px;top:6px;z-index:1200}
  .mobile-menu-panel{display:block;position:fixed;right:0;top:0;height:100vh;width:min(320px,82vw);background:linear-gradient(180deg,#111,#1b1b1b);color:#fff;padding:18px 12px;box-shadow:-20px 0 40px rgba(0,0,0,0.6);transform:translateX(110%);transition:transform .28s cubic-bezier(.22,.9,.3,1);z-index:1199;overflow:auto}
  .mobile-menu-panel.open{transform:translateX(0)}
  .mobile-menu-panel .menu-list{display:block;gap:0;padding:0;margin:0}
    /* ensure mobile top-level links match desktop (white) and remove underlines/borders
       Submenu (mobile) links are styled in the rules below to use the accent/brown color. */
    .mobile-menu-panel a, .mobile-menu-panel .menu-link{color:#fff !important; text-decoration:none}
    .mobile-menu-panel a:hover, .mobile-menu-panel .menu-link:hover{color:var(--accent)}
  .mobile-menu-panel .menu-list > li{list-style:none;margin:0;padding:6px 0;border-bottom:none}
  /* Submenu links (flattened dropdowns) should use the same brown/accent color
     and remain that color even when visited. They should not show underlines. */
  .mobile-menu-panel .mobile-submenu a,
  .mobile-menu-panel .mobile-submenu .menu-link{color:#a67c52 !important; text-decoration:none}
  .mobile-menu-panel .mobile-submenu a:visited,
  .mobile-menu-panel .mobile-submenu .menu-link:visited{color:#a67c52 !important}
  .mobile-menu-panel .mobile-submenu a:hover,
  .mobile-menu-panel .mobile-submenu .menu-link:hover{color:#a67c52}
  .mobile-menu-panel .menu-link{display:inline-block;padding:6px 2px}
  .mobile-submenu{list-style:none;padding-left:12px;margin:6px 0 12px}
  .mobile-submenu li{padding:6px 0}
  /* header rows (original dropdown headers) */
  .mobile-menu-header{padding:8px 0;font-weight:700}
  /* ensure the desktop menu is visually hidden but still available for desktop; we simply keep it but the toggle covers it on mobile */
  .top-menu{padding-right:52px}
}

/* Viewer overlay */
.viewer{position:fixed;inset:0;display:none;align-items:center;justify-content:center;z-index:1000}
.viewer.visible{display:flex}
.viewer-backdrop{position:absolute;inset:0;background:rgba(0,0,0,0.9)}
.viewer-panel{position:relative;display:flex;align-items:center;gap:12px;max-width:95%;max-height:92%;padding:18px}
.viewer-media{width:80vw;max-width:1200px;height:70vh;display:flex;align-items:center;justify-content:center}
.viewer-media{width:80vw;max-width:1200px;height:70vh;display:flex;align-items:center;justify-content:center;position:relative}
.viewer-media img{max-width:100%;max-height:100%;border-radius:6px;box-shadow:0 20px 60px rgba(0,0,0,0.6);position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);transition:transform .42s cubic-bezier(.22,.9,.3,1),opacity .28s ease;z-index:100}

/* Animation helper classes for swiping */
.anim-enter-right{transform:translate(120%,-50%);opacity:0}
.anim-enter-left{transform:translate(-120%,-50%);opacity:0}
.anim-enter-active{transform:translate(-50%,-50%);opacity:1}
.anim-exit-left{transform:translate(-220%,-50%);opacity:0}
.anim-exit-right{transform:translate(220%,-50%);opacity:0}

/* Details shown below the photo */
.viewer-details{margin-top:10px;color:#dfe8f2;background:rgba(0,0,0,0.75);padding:10px;border-radius:6px;max-width:1200px;text-align:left;font-size:0.95rem;position:relative;z-index:200}
.viewer-details .meta-row{display:flex;gap:12px;flex-wrap:wrap}
.viewer-details .meta-item{color:var(--muted);font-size:0.9rem}

/* When viewer-details is inside .viewer-media, ensure it appears over the image
   as a semi-transparent panel anchored near the bottom. On narrow viewports the
   details remain full-width below the image. */
.viewer-media .viewer-details{
  /* Anchor the details panel to the bottom of the viewport so it never
     floats over the image unpredictably. Use fixed positioning so the
     panel stays visible even while the image content may be vertically
     centered or transformed. */
  position:fixed;
  left:50%;
  transform:translateX(-50%);
  bottom:18px;
  width:calc(100% - 40px);
  max-width:1100px;
  z-index:1300; /* above viewer image but below controls if needed */
  box-sizing:border-box;
  /* allow the details to scroll if it grows taller than available space */
  max-height:40vh;
  overflow:auto;
  padding:12px;
}

/* Also apply the fixed-bottom details behavior when the details element is
   a sibling inside the overall `#viewer` (some pages place it outside
   `.viewer-media`). This ensures consistent placement across album and
   featured pages. */
.viewer .viewer-details{
  position:fixed;
  left:50%;
  transform:translateX(-50%);
  bottom:18px;
  width:calc(100% - 40px);
  max-width:1100px;
  z-index:1300;
  box-sizing:border-box;
  max-height:40vh;
  overflow:auto;
  padding:12px;
}

@media (max-width:520px){
  .viewer .viewer-details{width:calc(100% - 24px);max-width:calc(100% - 24px);max-height:36vh;padding:10px}
}

@media (max-width:520px){
  /* on very narrow screens use almost-full width and reduce max-height */
  .viewer-media .viewer-details{width:calc(100% - 24px);max-width:calc(100% - 24px);max-height:36vh;padding:10px}
}

/* Top-center counter */
.viewer-top-center{position:fixed;left:50%;top:18px;transform:translateX(-50%);z-index:1100}
.viewer-counter{color:var(--muted);font-size:0.95rem;background:rgba(255,255,255,0.02);padding:6px 10px;border-radius:6px;text-align:center}

/* Small label shown below the count to indicate the collection (album title or FEATURED) */
.viewer-collection-label{display:block;color:var(--muted);font-size:0.75rem;margin-top:6px;letter-spacing:0.06em;text-transform:uppercase;text-align:center}

/* Close button in top-right */
.viewer-close{position:fixed;right:18px;top:12px;background:rgba(6,10,14,0.05);color:#fff;font-size:50px;width:44px;height:44px;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:1100;transition:background .12s ease,transform .12s ease}

/* Remove any focus border/outline for the close button specifically. */
.viewer-close:focus,
.viewer-close:focus-visible{
  outline: none !important;
  box-shadow: none !important;
  border-color: transparent !important;
}

/* Prev/Next buttons positioned near the viewport edges, rounded square background */
.viewer-prev, .viewer-next{position:fixed;top:50%;transform:translateY(-50%);border:2px solid transparent;background:rgba(6,10,14,0.05);color:#fff;font-size:200px;width:56px;height:56px;border-radius:10px;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:1100;transition:background .12s ease,border-color .12s ease,transform .12s ease}
.viewer-prev{left:18px}
.viewer-next{right:18px}

/* Hover: light grey border */
.viewer-prev:hover, .viewer-next:hover{color:var(--accent);transform:translateY(-50%) scale(1.03)}
.viewer-close:hover{color:var(--accent);transform:scale(1.03)}

/* Responsive tweaks */
@media (max-width:720px){
  .viewer-media{width:92vw;height:64vh}
  .viewer-prev,.viewer-next{font-size:125px;width:48px;height:48px}
  .viewer-close{width:40px;height:40px;right:12px;top:10px}
  .viewer-top-center{top:12px}
}

/* small accessibility helper */
.visually-hidden{position:absolute!important;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}

/* Footer styles (used by includes/footer.html) */
.site-footer{background:linear-gradient(180deg, rgba(0,0,0,0.06), rgba(0,0,0,0.12));padding:28px 0;color:#dfe8f2;margin-top:auto;position:relative;bottom:500;width:100%}
/* Instead of a fixed footer, use a full-height flex layout so the footer
  naturally sits at the bottom when content is short, and flows after the
  content when the page is long. This avoids floating the footer over page
  content and doesn't require editing the HTML. */
/* Allow main content to take remaining space and push footer down */
main, main.container, .page-wrap{flex:1;min-width:0}
.site-footer .footer-grid{max-width:1100px;margin:0 auto;padding:0 1rem}
.site-footer .footer-grid{display:flex;flex-wrap:wrap;gap:1rem;align-items:center;justify-content:space-between}
.site-footer .footer-item{font-size:0.95rem;color:var(--muted)}
.site-footer a{color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,0.03);padding-bottom:2px}
.site-footer a:hover{color:var(--accent)}
.site-footer .footer-copyright{margin-left:auto;font-size:0.9rem;color:rgba(255,255,255,0.65)}
@media (max-width:700px){
  .site-footer .footer-grid{flex-direction:column;align-items:flex-start}
  .site-footer .footer-copyright{margin-left:0}
}

/* social icon helpers used in the footer include */
.social-link{display:inline-flex;align-items:center;gap:0.6rem;color:inherit}
/* inline SVGs: use current palette colors (muted by default, accent on hover) */
.social-link svg.social-icon{width:20px;height:20px;flex:0 0 20px;fill:var(--muted);transition:fill .12s ease, transform .12s ease}
.social-link img.social-icon{width:20px;height:20px;flex:0 0 20px}
.social-text{color:var(--muted);font-weight:600}
.site-footer .footer-item a.social-link:hover svg.social-icon{fill:var(--accent);transform:translateY(-1px)}
.site-footer .footer-item a.social-link:focus svg.social-icon{fill:var(--accent);transform:translateY(-1px)}

.site-social .social-item a.social-link:hover svg.social-icon{fill:var(--accent);transform:translateY(-1px)}
.site-social .social-item a.social-link:focus svg.social-icon{fill:var(--accent);transform:translateY(-1px)}
.site-social .social-item{font-size:0.95rem;color:var(--muted)}
.site-social a{color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,0.03);padding-bottom:2px}
.site-social a:hover{color:var(--accent)}


/* When the footer is injected via the include placeholder, the actual
  `.site-footer` element lives inside a wrapper `div[data-include="includes/footer.html"]`.
  Make that wrapper consume remaining space so the footer sits at the
  bottom of the viewport even on pages without a `main` element. */
body > div[data-include="includes/footer.html"]{margin-top:auto;display:flex;flex-direction:column}

/* Ensure the top-menu include wrapper and main.container stretch to the
   available width inside the body flex flow. This prevents an include
   placeholder or other ancestor from unintentionally constraining the
   `.container` width and collapsing the albums grid. */
body > div[data-include="includes/top-menu.html"], main.container{width:100%;align-self:stretch}
main.container{max-width:1100px;margin:0 auto}

/* Featured-specific override: `.album` has a general padding rule, which
  can push featured columns beyond their track. Ensure featured albums
  have no extra padding so grid columns fill evenly and don't cause
  horizontal scrolling. This must come after the generic `.album` rule. */
.featured .album{padding:0;margin:0}

/* Debug helpers: visual outlines to help locate which ancestor is
  constraining the albums grid. Remove or comment these when done. */
/*
  .container{outline: 2px dashed rgba(250, 1, 1, 0.995)}
.albums{outline: 2px dashed rgba(255,204,102,0.12)}
.album{outline: 1px dashed rgba(255,204,102,0.16)}
*/