/* Mobile drawer: keep the backdrop below the header/drawer so its links receive taps. */
.df-nav-backdrop{ z-index:10; }
/* Mobile drawer: keep the backdrop below the header/drawer so its links receive taps. */
.df-nav-backdrop{ z-index:10 !important; }
/* D. FOUNTAIN -- NOIR COUTURE DESIGN SYSTEM -- GLOBAL TOKENS */
:root{
	  --df-black:#141010;
	  --df-bone:#EFE7DA;
	  --df-crimson:#8C1B28;
}
.df-section{ padding-block: clamp(64px, 8vw, 120px); }
.df-section--expansive{ padding-block: clamp(96px, 12vw, 180px); }
.df-section--intimate{ padding-block: clamp(48px, 6vw, 72px); }
.df-container{ max-width: clamp(1200px, 90vw, 1400px); margin-inline: auto; padding-inline: clamp(20px, 5vw, 40px); box-sizing: border-box; }
@media (max-width: 1024px){ .df-container{ max-width: 92%; } }
@media (max-width: 600px){ .df-container{ max-width: 94%; } }
.df-btn{ display:inline-block; padding:14px 30px; font-size:11px; letter-spacing:3px; text-transform:uppercase; border:1px solid var(--df-bone); color:var(--df-bone) !important; text-decoration:none; transition: background-color .3s ease; }
.df-btn:hover, .df-btn:focus-visible{ background-color: rgba(239,231,218,0.08); }
.df-btn--crimson{ border-color:var(--df-crimson); color:var(--df-crimson) !important; }
a.df-btn:focus-visible, .df-nav a:focus-visible, button:focus-visible{ outline:2px solid var(--df-crimson); outline-offset:3px; }
.df-caption{ font-size:11px; letter-spacing:3px; text-transform:uppercase; color:#a89a8f; }
.df-nav a{ color:var(--df-bone) !important; text-decoration:none; font-size:11px; letter-spacing:3px; text-transform:uppercase; opacity:.85; transition:opacity .2s ease; }
.df-nav a:hover, .df-nav a:focus-visible{ opacity:1; }
.df-fade{ opacity:0; transform:translateY(14px); transition:opacity .7s ease, transform .7s ease; }
.df-fade.is-visible{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .df-fade{ opacity:1 !important; transform:none !important; transition:none !important; } }
.df-progress{ position:fixed; top:0; left:0; height:2px; background:var(--df-crimson); z-index:9999; width:0%; }
.df-home-page{ background:var(--df-black); color:var(--df-bone); }
.df-home-page a{ color:inherit; }

}

/* ================================
   DF MOBILE NAVIGATION — Phase 1
   Hamburger + overlay menu, added 2026-07-25
   Reversible: safe to delete this block to restore prior behavior.
   ================================ */
.df-nav-toggle{ display:none; position:relative; width:44px; height:44px; background:transparent; border:none; cursor:pointer; padding:0; z-index:1001; -webkit-tap-highlight-color:transparent; }
.df-nav-toggle span{ position:absolute; left:9px; right:9px; height:2px; background:var(--df-bone); border-radius:2px; transition:transform .25s ease, opacity .25s ease, top .25s ease; }
.df-nav-toggle span:nth-child(1){ top:15px; }
.df-nav-toggle span:nth-child(2){ top:22px; }
.df-nav-toggle span:nth-child(3){ top:29px; }
.df-nav-toggle[aria-expanded="true"] span:nth-child(1){ top:22px; transform:rotate(45deg); }
.df-nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.df-nav-toggle[aria-expanded="true"] span:nth-child(3){ top:22px; transform:rotate(-45deg); }
.df-nav-toggle:focus-visible{ outline:2px solid var(--df-crimson); outline-offset:3px; }
.df-nav-backdrop{ position:fixed; inset:0; background:rgba(20,16,16,.6); opacity:0; pointer-events:none; transition:opacity .3s ease; z-index:998; }
.df-nav-backdrop.is-open{ opacity:1; pointer-events:auto; }
@media (max-width: 640px){
  .df-nav-toggle{ display:inline-block; }
  .df-nav-links-panel{
    position:fixed; top:0; right:0; height:100vh; width:min(78vw,320px);
    background:var(--df-black); display:flex; flex-direction:column;
    align-items:flex-start; justify-content:center; gap:26px;
    padding:32px; margin:0; list-style:none;
    transform:translateX(100%); transition:transform .3s ease;
    box-shadow:-8px 0 40px rgba(0,0,0,.5); z-index:999;
  }
  .df-nav-links-panel.is-open{ transform:translateX(0); }
  .df-nav-links-panel a{
    font-size:16px; min-height:44px; width:100%;
    display:flex; align-items:center; padding:10px 4px; opacity:1;
  }
  body.df-nav-open{ overflow:hidden; }
}


/* --- MOBILE COMPOSITION REFINEMENT --- */
@media (max-width: 768px) {

  /* Hero section: cinematic, not cramped */
  .df-hero,
  [class*="df-hero"] {
    min-height: 85vh;
  }

  /* Section spacing: breathing room */
  .df-section {
    padding-block: clamp(40px, 6vw, 80px);
  }

  /* Section headings: scale down gracefully */
  .df-section-title,
  .df-heading,
  [class*="df-section"] h2 {
    font-size: clamp(1.5rem, 5vw, 2.5rem) !important;
    line-height: 1.2;
    word-break: break-word;
  }

  /* Music player / audio section */
  .df-music-section iframe,
  .df-music-section embed,
  [class*="music"] iframe {
    max-width: 100% !important;
    width: 100% !important;
  }

  /* Video embeds: 16:9 responsive */
  .df-video-wrap,
  [class*="df-video"] {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
  }
  .df-video-wrap iframe,
  [class*="df-video"] iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
  }


}

/* --- TABLET (768-1024px) --- */
@media (min-width: 769px) and (max-width: 1024px) {

  #df-ig-grid,
  #df-tt-grid,
  #df-shorts-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .df-container {
    max-width: 100% !important;
    padding-inline: clamp(20px, 4vw, 40px) !important;
  }

}

/* Mobile drawer scrolling: keep the locked page separate from the scrollable panel. */
@media (max-width: 640px) {
  .df-nav-links-panel {
    height: 100dvh;
    max-height: 100dvh;
    box-sizing: border-box;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    justify-content: flex-start;
  }
}