/* ==========================================================================
   GLOBAL RESET & BASE
========================================================================== */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body.ps-body {
  /* Moody ambient glow layered over your exact deep navy shade */
  background: 
    radial-gradient(circle at top, rgba(10, 9, 12, 0.15) 0%, transparent 65%),
    linear-gradient(180deg, #04060a 0%, #04060c 100%);
    
  color: #f6f5f2;
  font-family: 'Montserrat', sans-serif;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* ==========================================================================
   HEADER - FIXED POSITIONING (FINAL CLEAN VERSION)
========================================================================== */

.collections-header {
  position: sticky;
  top: 0;
  z-index: 1000;

  width: 100%;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 18px 6%;

  background:
    linear-gradient(rgba(6, 6, 17, 0.315), rgba(4, 6, 17, 0.466));

  border-bottom: 1px solid rgba(214, 197, 135, 0.842);

  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* ==========================================================================
   LOGO STACK
========================================================================== */

.logo-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;

    transform: translateY(-2px); /* subtle luxury lift */
}

.logo-img {
    width: 56px;
    height: auto;
    object-fit: contain;
}

/* ==========================================================================
   BRAND TEXT
========================================================================== */

.brand-text {
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;

    display: inline-block;

    background: linear-gradient(
        to right,
        #bfa76a 0%,
        #e6d49a 20%,
        #fff4c2 45%,
        #f3e2a0 60%,
        #d8c07a 80%,
        #a88a4a 100%
    );

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.18);
    line-height: 1;
}

/* ==========================================================================
   SUBTEXT
========================================================================== */

.brand-subtext {
    margin: 2px 0 0;

    font-size: 9px;
    letter-spacing: 2px;
    text-transform: uppercase;

    color: rgba(245, 230, 163, 0.65);

    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
}

/* ==========================================================================
   VIEW TOGGLE (RIGHT SIDE ELEMENT)
========================================================================== */

.view-mode-toggle {
  position: absolute;
  right: 6%;
  display: flex;
  align-items: center;

  min-width: 0;
}

/* ==========================================================================
   BUTTON - LUXURY UNDERLINE STYLE
========================================================================== */

.toggle-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 8px;
    line-height: 1;
    white-space: nowrap;

    text-decoration: none;
    border: none;
    background: transparent;

    color: #ffffff;

    font-family: 'Cinzel', serif;
    font-size: 0.60rem;
    font-weight: 600;

    letter-spacing: 1px;
    text-transform: uppercase;

    position: relative;
    cursor: pointer;

    white-space: nowrap;

    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;

    -webkit-appearance: none;
    appearance: none;

    transition:
        color 0.4s ease,
        transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Touch area */
.toggle-btn::before {
    content: '';
    position: absolute;
    inset: -15px -10px;
    pointer-events: none;
}

/* underline */
.toggle-btn::after {
    content: '';
    position: absolute;

    bottom: -4px;
    left: 0;

    width: 0;
    height: 1px;

    background-color: #f8e19d;

    transition: width 0.4s ease;
}

/* hover effect */
.toggle-btn:hover {
    color: #f8e19d;
    transform: translateX(-3px);
}

.toggle-btn:hover::after {
    width: 100%;
}

/* reset on touch/focus */
.toggle-btn:focus,
.toggle-btn:active {
    color: #ffffff;
    transform: none;
    outline: none;
}

.toggle-btn:focus::after,
.toggle-btn:active::after {
    width: 0;
}

/* mobile touch behavior */
@media (hover: none) {
    .toggle-btn:active::after {
        width: 100%;
    }
}

/* ==========================================================================
   INTRO (ULTRA-MINIMALIST MICRO-SCALE)
========================================================================== */

.page-intro {
  text-align: center;
  max-width: 470px;
  margin: 40px auto 32px auto; /* Slightly balanced for breathing room */
  padding: 0 24px;
}

.page-intro h1 {
    font-family: 'Cinzel', serif;
    font-weight: 500;

    /* Magazine cover scale (more compact, less “banner”) */
    font-size: clamp(0.90rem, 2vw, 1.35rem);

    margin-bottom: 6px;

    /* Editorial tracking — tight, intentional, premium */
    letter-spacing: 0.6px;

    /* Slightly more controlled line height for stacked readability */
    line-height: 1.15;

    background: linear-gradient(
        90deg,
        #ccaa66 0%,
        #fcf6ba 25%,
        #b8a274 50%,
        #fbf5b7 75%,
        #b18539 100%
    );

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;

    /* subtle polish for print-like sharpness */
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}
.page-intro p {
  color: rgba(246, 245, 242, 0.55);
  line-height: 1.6;
  font-size: 0.74rem;
  letter-spacing: 1px;
}

/* ==========================================================================
   COLLECTION GRID & CARDS (ULTRA-COMPACT EDITORIAL SCALE)
========================================================================== */

.collections-page-wrapper {
  width: min(1120px, 92%);
  margin: auto;
  padding-bottom: 100px;
}
.editorial-collection-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 36px;
}

/* ==========================================================================
   LOOKBOOK CARD
========================================================================== */

.lookbook-card {
  display: flex;
  flex-direction: column;

  background: linear-gradient(145deg, rgba(255, 255, 255, 0.015) 0%, rgba(212, 175, 55, 0.005) 100%);
  border: 1px solid rgba(255, 255, 255, 0.05);

  overflow: hidden;

  max-width: 360px; /* ⬅️ increased from 330px */
  width: 100%;
  margin: 0 auto;

  transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.4s ease,
              box-shadow 0.5s ease;
}

.lookbook-card:hover {
  transform: translateY(-2px);
  border-color: rgba(219, 206, 163, 0.267);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.65), 
              0 0 20px rgba(212, 175, 55, 0.01);
}

/* IMAGE CONTAINER */
.lookbook-img-wrapper {
  position: relative;
  aspect-ratio: 4 / 4.6;
  overflow: hidden;
  background: #020202;
}

.lookbook-img-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1),
              filter 0.8s ease;
}

/* Restored premium zoom effect instead of vertical sliding */
.lookbook-card:hover img {
  transform: scale(1.03); 
  filter: brightness(1.04) contrast(1.02);
}

/* CARD DETAILS */
.lookbook-info {
  padding: 20px 18px 22px 18px; /* Slightly widened frame padding for better word wrap UX */
  display: flex;
  flex-direction: column;
  flex-grow: 1; /* Keeps buttons perfectly aligned along the bottom edge */
}

.lookbook-info h3 {
  font-family: 'Cinzel', serif;
  color: #e7d9a2d2;
  font-size: 0.87rem;
  letter-spacing: 1px;
  line-height: 1.35;
  margin-bottom: 8px;
}

.lookbook-info p {
  color: rgba(206, 201, 185, 0.822);
  line-height: 1.55;
  font-size: 0.74rem;
  margin-bottom: 20px;
  flex-grow: 1; /* Pushes the view link down symmetrically */
}

/* INTERACTION ELEMENT */
.view-collection-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  min-width: 120px;
  padding: 8px 14px;
  
  /* Elegant muted gold base */
  border: 1px solid rgba(184, 162, 116, 0.4); 
  color: #d3c4a4; 
  background: transparent; /* Ensure background stays transparent */
  
  font-family: 'Cinzel', serif;
  font-size: 0.56rem;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.view-collection-link:hover {
  background: transparent; /* No solid fill so text remains perfectly readable against the dark card */
  border-color: #fcf6ba; /* Border lights up with the bright gold tint */
  color: #fcf6ba; /* Text transitions to clear, readable bright gold */
  
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(252, 246, 186, 0.08);
}

/* ==========================================
   GLOBAL MOBILE + SAFARI IMPROVEMENTS
========================================== */

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

* {
  box-sizing: border-box;
}

/* ==========================
   HEADER BASE (ALL DEVICES)
========================== */


/* LOGO → RIGHT CORNER */
.site-logo {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);

  display: flex;
  align-items: center;

  max-height: 26px;

  -webkit-transform: translateY(-50%);
}

/* ==========================
   TABLET + MOBILE (≤900px)
========================== */

@media (max-width: 900px) {

  .collections-header {
    padding: 10px 14px;
  }

  .editorial-collection-grid {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .lookbook-info {
    padding: 14px 12px;
  }
}

/* ==========================
   SMALL TABLET (≤768px)
========================== */

@media (max-width: 768px) {

  .brand-text {
    font-size: .64rem;
  }

  .toggle-btn {
    font-size: .56rem;
  }

  .collections-header {
    padding: 8px 12px;
  }
}

/* ==========================
   MOBILE (≤640px)
========================== */

@media (max-width: 640px) {

  .collections-header {
    padding: 7px 10px;
  }

  .editorial-collection-grid {
    gap: 18px;
  }
}

/* ==========================
   SMALL MOBILE (≤480px)
========================== */

@media (max-width: 480px) {

  .page-intro h1 {
    font-size: 1.2rem;
  }

  .brand-text {
    font-size: .58rem;
  }

  .toggle-btn {
    font-size: .52rem;
  }

  .site-logo {
    max-height: 18px;
  }
}