/* ===== Design System ===== */
:root{
  --navy:#183255;
  --cream:#FCEEDB;
  --pale:#DBEAF5;
  --gutter:16px;
  --container:1136px;
  --side-pad-desktop:48px;
  --side-pad-mobile:16px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
img{max-width:100%;height:auto;display:block}
a{text-decoration:none;color:inherit}
ul{padding-left:1.1rem;margin:0}
li{margin:.25rem 0}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Typography */
body{font-family:"Adamina"; color:var(--navy); font-size:20px; font-weight:400; line-height:1.2; background:#fff}
.Display{font-family:"Barlow Semi Condensed", sans-serif; font-weight:900; font-size:60px; line-height:1.05; text-transform:uppercase; color:var(--navy); letter-spacing:.5px}
.Headline{font-family:"Barlow Semi Condensed", sans-serif; font-weight:900; font-size:48px; line-height:1.1; text-transform:uppercase; color:var(--navy); letter-spacing:.5px; margin:.25rem 0 1rem}
.Subheadline{font-family:"Barlow Semi Condensed", sans-serif; font-weight:900; font-size:20px; line-height:1.2; text-transform:uppercase; color:var(--navy); margin:1rem 0 .5rem}
.Body{font-size:20px; line-height:1.2;}
.BodySmall{font-size:16px; line-height:1.3; margin:.5rem 0 1rem}
.nav-link{font-size:18px; line-height:1.2; font-family:"Adamina"}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;padding:.9rem 1.25rem;border-radius:10px;transition:transform .12s ease,opacity .2s ease;border:2px solid var(--navy)}
.btn.primary{background:var(--navy);color:#fff}
.btn.small{padding:.6rem .9rem}
.btn:active{transform:translateY(1px)}

/* Layout / Grid */
.container{max-width:var(--container); margin:0 auto; padding:0 var(--side-pad-desktop)}
@media (max-width:1024px){
  .container{padding:0 var(--side-pad-mobile)}
}
.section{padding:64px 0}
.grid-12{display:grid; grid-template-columns:repeat(12,1fr); gap:var(--gutter)}
.col{min-width:0}
/* span helper */
[class*="span-"]{grid-column-end:span 12}
@media (min-width:1025px){
  .span-1{grid-column-end:span 1}
  .span-2{grid-column-end:span 2}
  .span-3{grid-column-end:span 3}
  .span-4{grid-column-end:span 4}
  .span-5{grid-column-end:span 5}
  .span-6{grid-column-end:span 6}
  .span-7{grid-column-end:span 7}
  .span-8{grid-column-end:span 8}
  .span-9{grid-column-end:span 9}
  .span-10{grid-column-end:span 10}
  .span-11{grid-column-end:span 11}
  .span-12{grid-column-end:span 12}
}

/* Header / Nav */
.site-header{
  position:absolute; inset:0 0 auto 0; height:72px; display:flex; align-items:center;
  z-index:20; transition: transform .25s ease;
}
.site-header.nav-hidden{ transform: translateY(-100%); }
.header-inner{display:flex; align-items:center; gap:16px;width:100%;}
.brand{display:flex; align-items:center}
.brand-mark{ position:absolute; width: 124px; height: 124px; top:0px; margin:24px;}
.primary-nav{margin-left:auto}
.primary-nav ul{list-style:none;display:flex;gap:24px;align-items:center}
.primary-nav .nav-toggle{display:none}
.site-header .btn{margin-left:16px}

@media (max-width:1024px){
  .primary-nav ul{position:fixed; top:72px; right:0; left:0; background:#fff; padding:16px var(--side-pad-mobile); display:none; flex-direction:column; gap:12px; border-bottom:1px solid rgba(0,0,0,.08)}
  .primary-nav .nav-toggle{display:inline-flex; flex-direction:column; gap:4px; width:36px; height:36px; background:transparent; border:0; margin-left:auto}
  .primary-nav .bar{display:block; height:3px; background:var(--navy); border-radius:3px}
  .primary-nav.open ul{display:flex}
  .site-header .btn.small{margin-left:8px}
  .brand-mark{ position:absolute; width: 90px; height: 90px; margin:8px;}
}

/* HERO */
.hero{ padding-top:96px; padding-bottom:48px}
.hero-card{background:var(--cream); border-radius:16px; overflow:hidden;}
.hero-grid{align-items:center}
.hero-copy{padding-left:24px}
@media (max-width:1024px){ .hero-copy{padding-left: 24px;
        padding-top: 24px;} }
.hero-copy .Display{margin:0}
.hero-media img{border-radius:12px}
.hero-card .hero-media img{border-radius:0}

/* MISSION */
.mission-grid{align-items:center}
.mission-graphic img{width:220px; max-width:100%}

/* THE BAG */
.bag-grid{align-items:start}
.media-grid{display:grid; gap:var(--gutter)}
.media-grid .tall{margin:0}
.media-pair{display:grid; grid-template-columns:1fr 1fr; gap:var(--gutter)}
.media-item{margin:0}
.media-item img{border-radius:12px}
.bag-details{position:sticky; top:96px; margin-left:48px; align-self:start} /* Desktop sticky */
.price-row{display:flex; align-items:baseline; gap:12px; margin:.25rem 0 .5rem}
.price{font-family:"Barlow Semi Condensed", sans-serif; font-weight:900; font-size:32px}
.each{font-size:16px}

/* ABOUT */
.about{background:var(--pale)}
.about-grid{align-items:center}
.about-photo{border-radius:999px; aspect-ratio:1 / 1; object-fit:cover; width:min(100%, 480px); margin-left:auto}

/* FOOTER */
.site-footer{padding:32px 0}
.footer-inner{display:flex;justify-content:space-between;gap:16px;align-items:center}
.footer-inner small{opacity:.8}

/* ===== Mobile adjustments <1024px ===== */
@media (max-width:1024px){
  .Display{font-size:36px}
  body{font-size:16px}
  .Headline{font-size:32px}
  .hero{padding-top:88px}
  /* Mission: hide image on mobile */
  .mission-graphic{display:none}
  /* About: center image */
  .about-photo{width:72vw;margin:0 auto}
  /* The Bag: stack details first, images second; lists last (JS enforces order) */
  .bag-grid{display:flex; flex-direction:column; gap:24px; overflow:hidden}
  .bag-details{position:static; order:1; text-align:center; margin-left: 0;
        text-align: -webkit-center;}
  .price-row{align-items:baseline; gap:12px; margin:.25rem 0 .5rem;      display: -webkit-inline-box}
.mission{padding:0 0}
  /* Horizontal scroller */
  .media-grid{
    order:2;
    display:flex;
    gap:16px;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scroll-snap-type:x mandatory;
    padding-bottom:8px;
    width:100%;
    margin:0;
    padding:0;
    overscroll-behavior-x:contain;
  }
  .media-grid > *{
    flex:0 0 100%;
    min-width:100%;
    scroll-snap-align:center;
  }
  .media-pair{display:flex; gap:16px}

  .two-col-lists{order:3; text-align:left; max-width:1136px; width:100%; margin:16px auto 0; padding:0 var(--side-pad-mobile)}
}

/* Decorative */
.hero-media img, .media-item img, .about-photo{}

/* ======= Folded-in Peek Override (mobile only) ======= */
@media (max-width:1024px){
  .media-grid{
    scroll-padding-left: var(--side-pad-mobile);
    scroll-padding-right: var(--side-pad-mobile);
  }
  .media-grid > *{
    flex:0 0 calc(100% - 64px) !important;
    min-width:calc(100% - 64px) !important;
    scroll-snap-align:start !important;
  }
}

/* ======= Safari/iOS hamburger visibility fix ======= */
@media (max-width:1024px){
  .primary-nav .nav-toggle .bar{
    width:28px;
    height:3px;
    display:block;
    background:var(--navy);
    border-radius:3px;
    align-self:center;
  }
}
@supports not (gap: 1px){
  @media (max-width:1024px){
    .primary-nav .nav-toggle .bar + .bar{ margin-top:4px; }
  }
}

/* ======= Confetti overlay (on-load burst) ======= */
.confetti-container{
  position:fixed; inset:0 0 auto 0;
  width:100%; height:100vh; pointer-events:none;
  overflow:hidden; z-index:1000;
}
.confetti{
  position:absolute; top:-16px; left:0;
  background:var(--confetti-color); color:var(--confetti-color);
  animation-name: confetti-fall;
  animation-timing-function: cubic-bezier(.15,.5,.45,1);
  animation-fill-mode: both;
  transform-origin:center;
}
.confetti.circle{ border-radius:999px; }
.confetti.bar{ border-radius:6px; }
.confetti.squiggle svg{ display:block; width:100%; height:100%; }
@keyframes confetti-fall{
  0%   { transform: translate3d(0,-20px,0) scale(.9); opacity:0; }
  10%  { opacity:1; }
  100% { transform: translate3d(var(--drift,0),110vh,0) rotate(var(--rot,0)); opacity:0; }
}
@media (prefers-reduced-motion: reduce){
  .confetti, .confetti *{ animation:none !important; }
}

/* ======= Page background image (anchored top-left, no tiling, scroll) ======= */
body{
  background-image: url('/img/confettibg.png');
  background-repeat: no-repeat;
  background-position: left top;
  background-attachment: scroll; /* default; explicit for clarity */
  background-size: auto; /* use intrinsic size; change to contain/cover if desired */
}



/* =====================================================
   GALLERY — FINAL ONE-FILE OVERRIDE
   Desktop (>=1025px): restore grid layout
   Mobile (<=1024px): every gallery item is 500×500 with peek
   ===================================================== */
@media (min-width:1025px){
  .bag-grid .media-grid{
    display:grid !important;
    grid-auto-flow:row !important;
    gap:var(--gutter) !important;
    overflow:visible !important;
    padding:0 !important;
    margin:0 !important;
  }
  .bag-grid .media-pair{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:var(--gutter) !important;
  }
  .bag-grid .media-grid > *{
    flex:none !important;
    min-width:auto !important;
    width:auto !important;
    height:auto !important;
    
    scroll-snap-align:none !important;
  }
  .bag-grid .media-grid img{
    width:100% !important;
    height:auto !important;
    object-fit:initial !important;
    border-radius:12px;
  }
}





/* =====================================================
   MOBILE GALLERY — FULL-WIDTH SQUARE IMAGES
   Each image fills viewport width and keeps a 1:1 square ratio
   ===================================================== */
@media (max-width:1024px){
  .bag-grid .media-grid{
    display:flex !important;
    gap:16px !important;
    overflow-x:auto !important;
    scroll-snap-type:x mandatory !important;
    -webkit-overflow-scrolling:touch !important;
    padding:0 !important;
    margin:0 !important;
    overscroll-behavior-x:contain !important;
    scroll-padding-left: var(--side-pad-mobile) !important;
    scroll-padding-right: calc(var(--side-pad-mobile) + 64px) !important; /* right peek */
  }

  /* Flatten pairs so each image is its own slide */
  .bag-grid .media-grid > .media-pair{ display: contents !important; }

  /* Each gallery item fills the width of the screen as a square */
  .bag-grid .media-grid > .tall,
  .bag-grid .media-grid > .media-item,
  .bag-grid .media-grid > .media-pair > .media-item{
    width: 70vw !important;      /* fills most of viewport width */
    height: 70vw !important;     /* perfect square */
    flex: 0 0 70vw !important;   /* ensures consistent scroll spacing */
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    scroll-snap-align:start !important;
    border-radius:12px;
    overflow:hidden;
  }

  .bag-grid .media-grid img{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
  }
}