/* =========================================================
   Daphne Barak — In the Room — main.css
   Components, layout and responsive rules.
   Tokens + base reset live in /style.css (loaded first).

   Contents
    1. Layout + typography helpers
    2. Header (desktop nav, burger, mobile overlay)
    3. Buttons
    4. Hero (seal, frame, grain, scroll cue)
    5. Marquee
    6. Split section (portrait + text)
    7. Pull quote
    8. Stat bar
    9. Section rhythm + headings
   10. Roster + featured card
   11. Icon trio
   12. Cards + grids
   13. Library filter bar
   14. Badges, CTA band, charity
   15. Footer
   16. Elementor
   17. Responsive (all breakpoints, widest → narrowest)
   ========================================================= */


/* ---------- 1. Layout + typography helpers ---------- */
.db-wrap{
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.db-eyebrow{
  font-family: var(--db-mono);
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold-lt) !important;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
}
.db-eyebrow::before{
  content: "";
  width: 20px;
  height: 1px;
  background: var(--gold-lt);
}

em, .db-italic{
  font-family: var(--db-display);
  font-style: italic;
  font-weight: 500;
  color: var(--gold-lt);
}

.lede{
  font-size: clamp(1.12rem, 2.4vw, 1.5rem);
  line-height: 1.5;
  color: var(--bone) !important;
  font-weight: 300;
  max-width: 43ch;
}


/* ---------- 2. Header ---------- */
.db-header{
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--bar);
  z-index: 120;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 var(--gutter);
  background: rgba(20, 17, 15, .6);
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  border-bottom: 1px solid var(--line-2);
  transition: background .3s, border-color .3s;
}
.db-header.is-solid{
  background: rgba(17, 14, 12, .92);
  border-color: var(--line);
}

/* Brand (shared by header + footer) */
.db-logo{
  display: flex;
  align-items: center;
  gap: 11px;
  font-family: var(--db-display);
  font-weight: 700;
  font-size: .86rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--bone);
}
.db-header .db-logo{ flex: none; }
.db-header .db-logo svg{ width: 30px; height: 30px; flex: none; }

/* Desktop nav */
.db-nav-list{
  list-style: none;
  display: flex;
  align-items: center;
  gap: clamp(14px, 2vw, 30px);
  margin: 0;
  padding: 0;
}
.db-nav-list a{
  position: relative;
  display: block;
  padding: 6px 0;
  font-family: var(--db-mono);
  font-size: .7rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--txt-mut);
  transition: color .22s;
}
.db-nav-list a:hover,
.db-nav-list a:focus-visible{ color: var(--gold-lt); }

.db-nav-list a.is-active,
.db-nav-list a[aria-current="page"]{ color: var(--bone); }
.db-nav-list a.is-active::after,
.db-nav-list a[aria-current="page"]::after{
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 1px;
  background: var(--gold);
}

/* REC timecode (desktop ≥1240px only — see §17) */
.db-timecode{
  display: none;
  align-items: center;
  gap: 8px;
  font-family: var(--db-mono);
  font-size: .66rem;
  letter-spacing: .12em;
  color: var(--txt-mut);
  white-space: nowrap;
}
.db-timecode .dot{
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--rec);
  animation: rec 2s infinite;
}

@keyframes rec{
  0%   { box-shadow: 0 0 0 0 rgba(212, 51, 43, .55); }
  70%  { box-shadow: 0 0 0 7px rgba(212, 51, 43, 0); }
  100% { box-shadow: 0 0 0 0 rgba(212, 51, 43, 0); }
}

/* Burger (≤1024px — see §17) */
.db-burger{
  display: none;
  flex-direction: column;
  gap: 5px;
  margin-right: -10px;            /* optical: line up icon with the page gutter */
  padding: 10px;
  background: none;
  border: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.db-burger span{
  display: block;
  width: 24px;
  height: 1.6px;
  background: var(--bone);
  transition: transform .3s, opacity .3s;
}
.menu-open .db-burger span:nth-child(1){ transform: translateY(6.6px) rotate(45deg); }
.menu-open .db-burger span:nth-child(2){ opacity: 0; }
.menu-open .db-burger span:nth-child(3){ transform: translateY(-6.6px) rotate(-45deg); }

/* Full-screen mobile menu */
.db-overlay{
  position: fixed;
  inset: 0;
  z-index: 115;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--bar) clamp(28px, 8vw, 64px) 8vh;
  padding-bottom: max(8vh, env(safe-area-inset-bottom));
  overflow-y: auto;
  background: linear-gradient(160deg, #14110F, #1a1512 60%, #211a16);
  transform: translateY(-100%);
  visibility: hidden;                         /* keeps closed links out of tab order */
  transition: transform .5s cubic-bezier(.7, 0, .2, 1), visibility 0s linear .5s;
}
.menu-open .db-overlay{
  transform: translateY(0);
  visibility: visible;
  transition-delay: 0s;
}
.menu-open{ overflow: hidden; }

.db-overlay a{
  display: flex;
  align-items: baseline;
  gap: .5em;
  padding: .18em 0;
  font-family: var(--db-display);
  font-weight: 600;
  font-size: clamp(2rem, 9vw, 3rem);
  line-height: 1.15;
  color: var(--bone);
  border-bottom: 1px solid var(--line-2);
  transition: color .25s;
}
.db-overlay a:hover,
.db-overlay a:active,
.db-overlay a.is-active{ color: var(--gold-lt); }
.db-overlay a .n{
  font-family: var(--db-mono);
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .18em;
  color: var(--gold);
}
.db-overlay .om{
  margin-top: auto;
  padding-top: 28px;
  font-family: var(--db-mono);
  font-size: .68rem;
  letter-spacing: .14em;
  color: var(--txt-mut);
}

/* Logged-in WordPress admin bar */
.admin-bar .db-header{ top: 32px; }
.admin-bar .db-overlay{ padding-top: calc(var(--bar) + 32px); }


/* ---------- 3. Buttons ---------- */
.db-btn{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 26px;
  font-family: var(--db-mono);
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  border-radius: 3px;
  transition: transform .2s ease, opacity .2s ease, gap .2s ease, background .2s ease, color .2s ease;
}
.db-btn:hover{ transform: translateY(-2px); gap: 10px; }

.db-btn-solid{ background: var(--gold-lt); color: var(--ink); font-weight: 600; }
.db-btn-solid:hover{ background: var(--gold-br); }

.db-btn-outline{ border: 1px solid var(--line); color: var(--gold-lt); }
.db-btn-outline:hover{ border-color: var(--gold); background: var(--gold-lt); color: var(--ink); }


/* ---------- 4. Hero ---------- */
.hero-bg{
  background:
    radial-gradient(120% 90% at 78% 18%, rgba(70, 32, 31, .5), transparent 55%),
    radial-gradient(80% 70% at 12% 92%, rgba(176, 141, 79, .10), transparent 60%),
    var(--ink);
}
.hero-btm{ position: relative; }

.grain{
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: .04;
  pointer-events: none;
  mix-blend-mode: overlay;
  background-image: url(data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E);
}

.frame{
  position: absolute;
  inset: clamp(14px, 2.4vw, 30px);
  z-index: 3;
  height: 560px;
  pointer-events: none;
}
.frame i{
  position: absolute;
  width: 24px;
  height: 24px;
  border: 1px solid var(--gold);
  opacity: .5;
}
.frame i:nth-child(1){ top: 0;       left: 0;  border-right: 0; border-bottom: 0; }
.frame i:nth-child(2){ top: 0;       right: 0; border-left: 0;  border-bottom: 0; }
.frame i:nth-child(3){ bottom: -210px; left: 0;  border-right: 0; border-top: 0; }
.frame i:nth-child(4){ bottom: -210px; right: 0; border-left: 0;  border-top: 0; }

.db-hero{
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: clamp(24px, 4vw, 60px);
  align-items: center;
  width: 100%;
  padding-block: 90px 75px;       /* block only — keeps the .db-wrap side gutter */
}
.db-hero h1{
  width: 80%;
  margin: .18em 0 0;
  font-size: clamp(2.6rem, 8.5vw, 6rem);
  font-weight: 800;
  line-height: .95;
  letter-spacing: -.02em;
}
.db-hero .db-lede{
  max-width: 22ch;
  margin: .7em 0 0;
  font-family: var(--db-display);
  font-weight: 500;
  font-style: italic;
  font-size: clamp(1.15rem, 3vw, 1.85rem);
  line-height: 1.25;
  color: var(--gold-lt);
}
.db-hero p.db-body-copy{
  max-width: 40ch;
  margin: 1.6em 0 0;
  font-size: 1.05rem;
  font-weight: 300;
  color: var(--bone);
}
.db-hero-actions{ display: flex; flex-wrap: wrap; gap: 16px; margin: 26px 0; }

.db-hero-meta{
  display: flex;
  flex-wrap: wrap;
  gap: 26px;
  margin-top: 2.4em;
  padding-top: 1.4em;
  font-family: var(--db-mono);
  font-size: 12px;
  letter-spacing: .08em;
  color: var(--txt-mut);
  border-top: 1px solid var(--line-2);
}
.db-hero-meta .m .k{
  font-family: var(--db-mono);
  font-size: .6rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--txt-mut);
}
.db-hero-meta .m .v{
  margin-top: 3px;
  font-family: var(--db-display);
  font-size: 1.15rem;
  color: var(--bone);
}

.db-hero-emblem{
  width: 100%;
  max-width: 260px;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-inline: auto;
  border: 1px solid var(--gold);
  border-radius: 50%;
}
.db-hero-emblem svg{ width: 55%; height: 55%; }

/* Animated seal */
.seal-hero{ display: flex; justify-content: center; align-items: center; }
.seal-hero svg{
  width: min(92%, 420px);
  height: auto;
  overflow: visible;
  filter: drop-shadow(0 18px 50px rgba(0, 0, 0, .5));
}
.seal-iris,
.seal-db,
.seal-rule{ transform-box: fill-box; transform-origin: center; }

.draw{ stroke-dasharray: 1; stroke-dashoffset: 1; }

.seal-hero.go .ringline{ animation: draw 1.5s cubic-bezier(.5, 0, .2, 1) forwards; }
.seal-hero.go .lid1{ animation: draw 1.3s cubic-bezier(.6, .05, .2, 1) forwards .55s; }
.seal-hero.go .lid2{ animation: draw 1.1s cubic-bezier(.6, .05, .2, 1) forwards .85s; }
.seal-hero.go .seal-iris{ opacity: 0; animation: pop .5s ease forwards 1.4s; }
.seal-hero.go .seal-db,
.seal-hero.go .seal-rule{ opacity: 0; animation: fadeup .8s ease forwards 1.55s; }

@keyframes draw{ 100%{ stroke-dashoffset: 0; } }
@keyframes pop{
  0%   { opacity: 0; transform: scale(.4); }
  60%  { opacity: 1; transform: scale(1.12); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes fadeup{
  0%   { opacity: 0; transform: translateY(8px); }
  100% { opacity: 1; transform: none; }
}

/* Scroll cue */
.scrollcue{
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-family: var(--db-mono);
  font-size: .6rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--txt-mut);
}
.scrollcue .line{
  width: 1px;
  height: 34px;
  background: linear-gradient(var(--gold), transparent);
  animation: cue 2s infinite;
}
@keyframes cue{
  0%, 100%{ opacity: .3; transform: scaleY(.6); }
  50%     { opacity: 1;  transform: scaleY(1); }
}


/* ---------- 5. Marquee ---------- */
.db-marquee{
  padding: 15px 0;
  overflow: hidden;
  background: var(--ink-2);
  border-block: 1px solid var(--line);
}
.db-marquee-row{
  display: flex;
  gap: 30px;
  width: max-content;
  white-space: nowrap;
  font-family: var(--db-display);
  font-style: italic;
  font-size: clamp(1.1rem, 2.4vw, 1.7rem);
  opacity: .62;
  animation: db-marquee-left 40s linear infinite;
}
.db-marquee-row.reverse{
  margin-top: 14px;
  font-size: clamp(.95rem, 2vw, 1.4rem);
  color: var(--gold-lt);
  opacity: .5;
  animation: db-marquee-right 40s linear infinite;
}
.db-marquee-row span::after{ content: "·"; margin-left: 30px; color: var(--gold); }

@keyframes db-marquee-left { from{ transform: translateX(0); }    to{ transform: translateX(-50%); } }
@keyframes db-marquee-right{ from{ transform: translateX(-50%); } to{ transform: translateX(0); } }


/* ---------- 6. Split section (portrait + text) ---------- */
.db-split{
  position: relative;
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  gap: 60px;
  align-items: center;
  padding-block: 110px;
}
.db-split.reverse{ grid-template-columns: 1.15fr .85fr; }
.db-split.reverse .db-split-media{ order: 2; }
.db-split h2{
  max-width: 14ch;
  margin: .32em 0 .5em;
  font-size: clamp(2rem, 6vw, 3.6rem);
}
.db-split p{ max-width: 50ch; margin: 18px 0 26px; color: var(--txt-mut); }

.db-split-media{
  display: flex;
  flex-direction: column;
  align-items: center;
}
.db-split-media::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 58%, rgba(20, 17, 15, .6));
  pointer-events: none;
}
.db-split-media img{ width: 80%; border-radius: 4px; filter: grayscale(1) contrast(1.05); }
.db-split-media figcaption{ font-family: var(--db-mono); font-size: 10px; letter-spacing: .06em; }

.db-split-media .pcorner{
    position: absolute;
    bottom: 90px;
    left: 70px;
    z-index: 2;
    pointer-events: none;
}
.db-split-media .pcorner i{
  position: absolute;
  width: 18px;
  height: 18px;
  border: 1px solid var(--gold);
  opacity: .6;
}
.db-split-media .pcorner i:nth-child(1) {
    bottom: 460px;
    left: 40px;
    border-right: 0;
    border-bottom: 0;
}
.db-split-media .pcorner i:nth-child(2) {
    bottom: 460px;
    left: 360px;
    border-left: 0;
    border-bottom: 0;
}
.db-split-media .pcorner i:nth-child(3) {
    bottom: 45px;
    left: 40px;
    border-right: 0;
    border-top: 0;
}
.db-split-media .pcorner i:nth-child(4) {
    bottom: 45px;
    left: 365px;
    border-left: 0;
    border-top: 0;
}

.db-split-media .ptag {
    position: absolute;
    bottom: 128px;
    left: 95px;
    z-index: 3;
    width: 30%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    font-family: var(--db-mono);
    font-size: .6rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--bone);
}
.db-split-media .ptag .rd{
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--rec);
}


/* ---------- 7. Pull quote ---------- */
.db-quote{ padding-block: 100px; text-align: center; }
.db-quote .db-eyebrow{ justify-content: center; }
.db-quote blockquote{
  display: block;
  max-width: 10ch;
  margin: 0 auto;
  quotes: none;
  font-family: var(--db-display);
  font-weight: 500;
  font-style: italic;
  font-size: clamp(1.5rem, 4.4vw, 2.9rem);
  line-height: 1.28;
  color: var(--bone);
}
.db-quote cite{
  display: block;
  margin-top: 22px;
  font-family: var(--db-mono);
  font-style: normal;
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--txt-mut);
}


/* ---------- 8. Stat bar ---------- */
/* Element also carries .db-wrap: it keeps its own border, so the gutter is
   applied as width instead of padding. */
.db-stats{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  width: calc(100% - 2 * var(--gutter));
  max-width: calc(var(--maxw) - 2 * var(--gutter));
  padding: 0;
  border: 1px solid var(--line);
}
.db-stat{ padding: 20px var(--gutter); border-left: 1px solid var(--line); }
.db-stat:first-child{ border-left: 0; }
.db-stat .num{
  margin-top: .3em;
  font-family: var(--db-display);
  font-weight: 700;
  font-size: clamp(1.9rem, 5vw, 3.2rem);
  line-height: 1;
  color: var(--gold-lt);
}
.db-stat .label{
  max-width: 25ch;
  margin-top: 5px;
  font-size: 14px;
  color: var(--txt-mut);
}


/* ---------- 9. Section rhythm + headings ---------- */
.db-section{ padding-block: 100px; }
.db-section-head{ max-width: 60ch; margin-bottom: 50px; }
.db-section-head h2{ font-size: clamp(30px, 3.6vw, 46px); }

.db_record_head h2,
.signture_head h2{
  max-width: 50%;
  margin: .32em 0 .5em;
  font-family: var(--db-display);
  font-size: clamp(2rem, 6vw, 3.6rem);
  line-height: 1.04;
  letter-spacing: -.01em;
}
.signture_head h2{ max-width: 100% !important; }

.signture-sec,
.statics_sec{
  padding-block: clamp(48px, 7vw, 84px);
  border-top: 1px solid var(--line);
}

.db-tags{ display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 22px; }
.db-tag{
  padding: 6px 14px;
  font-family: var(--db-mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--txt-mut);
  border: 1px solid var(--line);
  border-radius: 100px;
}

.library_btn{ padding: 30px 0; }


/* ---------- 10. Roster + featured card ---------- */
.db-roster{
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  align-items: start;
}
.db-roster p{ max-width: 60ch; margin-top: 90px; color: var(--bone); }

.db-feature-card{
  position: relative;
  padding: clamp(26px, 4vw, 46px);
  overflow: hidden;
  background: linear-gradient(150deg, var(--bordeaux), #2c1413);
  border: 1px solid var(--line);
  border-radius: 4px;
}
.db-feature-card::before{
  content: "";
  position: absolute;
  top: -40%;
  right: -30%;
  width: 70%;
  height: 140%;
  background: radial-gradient(circle, rgba(230, 204, 147, .12), transparent 70%);
}
.db-feature-card .rd{
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--rec);
  animation: rec 2s infinite;
}
.db-feature-card .db-tag{
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 12px;
  font-size: .62rem;
  letter-spacing: .16em;
  color: var(--gold-br);
  border-radius: 2px;
}
.db-feature-card h3{
  position: relative;
  max-width: 90%;
  margin: .7em 0 .4em;
  font-weight: 600;
  font-size: clamp(1.5rem, 3.6vw, 2.3rem);
  line-height: 1.16;
  color: var(--bone);
}
.db-feature-card p{ margin-bottom: 22px; color: #E8CFC4; }
.db-feature-card .fc_content{
  position: relative;
  max-width: 46ch;
  margin: 10px 0 22px;
  font-size: .98rem;
  color: var(--txt);
}


/* ---------- 11. Icon trio ---------- */
.db-trio{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2.4vw, 30px);
}
.db-trio-item{
  padding: clamp(22px, 3vw, 34px);
  background: linear-gradient(180deg, var(--ink-2), var(--ink));
  border: 1px solid var(--line);
  border-radius: 4px;
  transition: .35s;
}
.db-trio-item .pv{
  height: 88px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
}
.db-trio-item .pv svg{ height: 70px; width: auto; overflow: visible; }
.db-trio-item h3{
  margin: 0 0 .6em;
  font-weight: 600;
  font-size: 1.5rem;
  color: var(--bone);
}
.db-trio-item p{ margin: 8px 0 0; font-size: 14px; line-height: 1.55; }


/* ---------- 12. Cards + grids ---------- */
.db-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2.4vw, 30px);
}
.db-grid.db-grid-2{ grid-template-columns: repeat(2, 1fr); }
.db-grid.db-grid-4{ grid-template-columns: repeat(4, 1fr); }

.db-card{
  padding: clamp(22px, 3vw, 34px);
  background: linear-gradient(180deg, var(--ink-2), var(--ink));
  border: 1px solid var(--line);
  border-radius: 4px;
  transition: .35s;
}
.db-card.is-featured{ border-color: var(--gold); }
.db-card.db-card-compact{ min-height: 130px; padding: 20px; }
.db-card.db-card-compact h3{ font-size: 17px; }

/* shared hover lift (cards + trio) */
.db-card:hover,
.db-trio-item:hover{ border-color: var(--gold); transform: translateY(-4px); }

.db-card-top{ display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 14px; }
.db-card-cat{
  font-family: var(--db-mono);
  font-size: .56rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--txt-mut);
}
.db-card-date{ font-family: var(--db-mono); font-size: 11px; color: var(--txt-mut); }
span.db-card-ix{
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--db-mono);
  font-size: .58rem;
  letter-spacing: .14em;
  color: var(--gold);
}
.db-card h3{
  margin: .5em 0 .3em;
  font-weight: 600;
  font-size: clamp(1.25rem, 2.4vw, 1.7rem);
  line-height: 1.12;
  color: var(--bone);
}
.db-card .role{
  margin-bottom: 10px;
  font-family: var(--db-mono);
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--txt-mut);
}
.db-card p{ margin-top: .5em; font-size: .84rem; line-height: 1.45; color: var(--txt-mut); }
.db-card .db-card-link{
  margin-top: 18px;
  font-family: var(--db-mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gold);
}

/* Library-style compact grid */
.db-grid.db-libgrid{ grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.db-libgrid .db-card{
  display: flex;
  flex-direction: column;
  min-height: 118px;
  padding: 18px 18px 16px;
  background: linear-gradient(160deg, var(--ink-2), var(--ink));
  border-radius: 3px;
  transition: .28s;
}
.db-libgrid .db-card-top{ margin: 0; }
.db-libgrid .db-card-cat{ display: block; }
.db-libgrid .db-card-ix{ width: 100%; }
.db-libgrid .db-card-ix .ar{ color: var(--gold-lt); opacity: 0; transition: .25s; }
.db-libgrid a.db-card:hover .db-card-ix .ar{ opacity: 1; }
.db-libgrid div.db-card:hover{ border-color: var(--line); transform: none; }
.db-libgrid .db-card h3{ margin: .5em 0 .2em; font-size: 1.3rem; line-height: 1.1; }


/* ---------- 13. Library filter bar ---------- */
.filter_bar{
  padding: 14px 0;
  background: rgba(20, 17, 15, .86);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-block: 1px solid var(--line);
}
.db-filter-bar{ display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }

.db-search{
  width: 100%;
  margin-bottom: 18px;
  padding: 14px 18px;
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: 4px;
  font-family: var(--db-body);
  font-size: 14px;
  color: var(--bone);
}
.db-search::placeholder{ color: var(--txt-mut); }

.db-search-wrap{
  flex: 1;
  min-width: 200px;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 10px 14px;
  background: var(--ink);
  border: 1px solid var(--line);
  border-radius: 3px;
}
.db-search-wrap:focus-within{ border-color: var(--gold); }
.db-search-wrap svg{ width: 15px; height: 15px; flex: none; stroke: var(--gold-lt); }
.db-search-wrap .db-search{
  flex: 1;
  width: auto;
  min-width: 0;
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  outline: 0;
  font-family: var(--db-mono);
  font-size: .8rem;
  letter-spacing: .04em;
  -webkit-appearance: none;
  appearance: none;
}

.db-filter-pills{ display: flex; flex-wrap: wrap; gap: 8px; }
.db-filter-pill{
  padding: 9px 13px;
  font-family: var(--db-mono);
  font-size: .62rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--txt-mut);
  background: none;
  border: 1px solid var(--line);
  border-radius: 2px;
  cursor: pointer;
  transition: .22s;
}
.db-filter-pill:hover{ color: var(--gold-lt); }
.db-filter-pill.is-active{ background: var(--gold); color: var(--ink); border-color: var(--gold); }

.db-catalogue-meta{
  margin-bottom: 20px;
  font-family: var(--db-mono);
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--txt-mut);
}


/* ---------- 14. Badges, CTA band, charity ---------- */
.db-badge-row{ display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.db-badge{
  padding: 8px 14px;
  font-family: var(--db-mono);
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--txt-mut);
  border: 1px solid var(--line);
  border-radius: 4px;
}

.db-cta-band{
  padding: 90px 0;
  text-align: center;
  background: radial-gradient(90% 130% at 50% 0%, rgba(70, 32, 31, .45), transparent 60%);
  border-top: 1px solid var(--line);
}
.db-cta-band .db-eyebrow{ justify-content: center; font-size: 12px; }
.db-cta-band h2{
  margin: 0 0 .5em;
  font-family: var(--db-display);
  font-weight: 700;
  font-size: clamp(2rem, 6vw, 3.6rem);
  line-height: 1.05;
  color: var(--bone);
}
.db-cta-band .db-btn{ margin-top: 0; }

.charity_sec{ border-top: 1px solid var(--line); }
.charity_sec h2{ width: 62% !important; }
.charity_sec p{ max-width: 60ch !important; }
.charity_sec .des{ color: var(--bone); }
.charity_sec figure{
  position: relative;
  aspect-ratio: 5 / 3;
  overflow: hidden;
  border-radius: 6px;
}
.charity_sec img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 1px solid var(--gold-lt);
  filter: none !important;
}
.charity_sec figcaption{
  position: absolute;
  bottom: 10px;
  left: 50px;
  z-index: 1;
  padding: 5px 10px;
  text-transform: uppercase;
}


/* ---------- 15. Footer ---------- */
.footer{
  background: var(--ink-2);
  border-top: 1px solid var(--line);
}
.db-footer{
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 32px;
  padding-block: clamp(46px, 7vw, 80px) 36px;   /* block only — keeps the .db-wrap gutter */
}
.db-footer .db-logo{ gap: 12px; margin-bottom: 14px; font-size: 1rem; color: var(--bone); }
.db-footer .db-logo svg{ width: 46px; height: 46px; flex: none; }
.db-footer-brand > p{ max-width: 34ch; font-size: .9rem; color: var(--txt-mut); }

.db-footer h4{
  margin-bottom: 16px;
  font-family: var(--db-mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gold);
}
.db-footer ul{ list-style: none; margin: 0; padding: 0; }
.db-footer li{ margin-bottom: 10px; }
.db-footer a{ font-size: 14px; color: var(--txt-mut); transition: color .2s; }
.db-footer a:hover{ color: var(--bone); }

.db-footer-bottom{
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  margin-top: 44px;
  padding-top: 22px;
  font-family: var(--db-mono);
  font-size: .64rem;
  letter-spacing: .1em;
  color: var(--txt-mut);
  border-top: 1px solid var(--line-2);
}


/* ---------- 16. Elementor ---------- */
.elementor-widget-container{ color: inherit; }


/* ---------- 17. Responsive (widest → narrowest) ---------- */

/* REC timecode shows only when there is room (matches reference) */
@media (min-width: 1240px){
  .db-timecode{ display: flex; }
}

/* Nav collapses to burger + overlay (matches reference) */
@media (max-width: 1024px){
  .db-nav{ display: none; }
  .db-burger{ display: flex; }
}

@media (max-width: 980px){
  .db-hero{ grid-template-columns: 1fr; padding-block: 45px 75px; }
  .db-hero-emblem{ display: none; }
  .db-split,
  .db-split.reverse{ grid-template-columns: 1fr; }
  .db-split.reverse .db-split-media{ order: 0; }
  .db-roster{ grid-template-columns: 1fr; }
  .db-roster p{ margin-top: 24px; }
  .db-stats{ grid-template-columns: repeat(2, 1fr); }
  .db-stat:nth-child(odd){ border-left: 0; }
  .db-stat:nth-child(n+3){ border-top: 1px solid var(--line); }
  .db-trio{ grid-template-columns: 1fr; }
  .db-grid,
  .db-grid.db-grid-2,
  .db-grid.db-grid-4{ grid-template-columns: repeat(2, 1fr); }
  .db_record_head h2{ max-width: 100%; }
  .charity_sec h2{ width: 100% !important; }
}

/* WordPress admin bar is taller on small screens */
@media (max-width: 782px){
  .admin-bar .db-header{ top: 46px; }
  .admin-bar .db-overlay{ padding-top: calc(var(--bar) + 46px); }
}

@media (max-width: 760px){
  .db-footer{ grid-template-columns: 1fr 1fr; }
  .db-footer-brand{ grid-column: 1 / -1; }
}

@media (max-width: 600px){
  .db-section{ padding-block: 70px; }
  .db-grid,
  .db-grid.db-grid-2,
  .db-grid.db-grid-4{ grid-template-columns: 1fr; }
  .db-hero-actions .db-btn{ flex: 1 1 100%; justify-content: center; }
  .db-footer-bottom{ flex-direction: column; }
  .frame { height: 975px;}
  .db-split-media .pcorner i:nth-child(1) {
    bottom: 720px;
    left: 0px;
    border-right:0;
    border-bottom: 0;
  }
  .db-split-media .pcorner i:nth-child(2) {
    bottom: 720px;
    left: 235px;
    border-left: 0;
      border-bottom: 0;
  }

  .db-split-media .pcorner i:nth-child(3) {
    bottom: 415px;
    left: 0px;
    border-right: 0;
    border-top: 0;
}
.db-split-media .pcorner i:nth-child(4) {
    bottom: 415px;
    left: 235px;
    border-left: 0;
    border-top: 0;
}
  .db-split-media .ptag {
    position: absolute;
    bottom: 495px;
    left: 55px;
    z-index: 3;
    width: 70%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    font-family: var(--db-mono);
    font-size: .6rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--bone);
}
}

@media (max-width: 360px){
  .db-logo{ letter-spacing: .14em; }
  .db-footer{ grid-template-columns: 1fr; }
  .frame { height: 975px;}
  .db-split-media .pcorner i:nth-child(1) {
    bottom: 720px;
    left: 0px;
    border-right:0;
    border-bottom: 0;
  }
  .db-split-media .pcorner i:nth-child(2) {
    bottom: 720px;
    left: 235px;
    border-left: 0;
      border-bottom: 0;
  }

  .db-split-media .pcorner i:nth-child(3) {
    bottom: 415px;
    left: 0px;
    border-right: 0;
    border-top: 0;
}
.db-split-media .pcorner i:nth-child(4) {
    bottom: 415px;
    left: 235px;
    border-left: 0;
    border-top: 0;
}
.db-split-media .ptag {
    position: absolute;
    bottom: 495px;
    left: 55px;
    z-index: 3;
    width: 70%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    font-family: var(--db-mono);
    font-size: .6rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--bone);
}


}