/* DJ Fredo V2 — extensions to the original visual identity. */
:root { --muted: #bbb7c3; }
body { overflow-x: clip; }
h1,h2,.display { line-height: 1.02; }
h2 { overflow-wrap: anywhere; }
:focus-visible { outline: 3px solid var(--lime); outline-offset: 5px; }
.hero-grid > *, .story-grid > *, .adapt > *, .section-head > * { min-width: 0; }
.brand-logo-frame { width: 3.1rem; height: 3.1rem; border-radius: 50%; overflow: hidden; flex: 0 0 auto; }
.brand-logo-frame img { width: 122%; max-width: none; transform: translate(-9%, -9%); }
.brand { gap: .8rem; letter-spacing: .02em; }
.eyebrow { font-size: .875rem; letter-spacing: .1em; flex-wrap: wrap; }
.eyebrow::before { flex: 0 0 1.6rem; }
.hero-photo { filter: none; }
.hero-copy { max-width: 33rem; }
.stamp { font-size: .875rem; }
.stamp b { font-size: 2.35rem; margin-bottom: .25rem; }
.btn { transition: transform .2s, background .2s; min-height: 3.35rem; }
.btn-primary { color: #08080b; }
.marquee-track { font-size: .875rem; }
.video-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
.video-card video, .video-card:first-child video, .video-card:not(:first-child) video { height: auto; aspect-ratio: 9 / 16; object-fit: contain; }
.video-label { align-items: flex-start; gap: .4rem; flex-wrap: wrap; font-size: .875rem; }
.video-label b { font-size: .95rem; }
.video-label span { color: #b8b3c2; }
.listen { padding-top: 1.5rem; }
.listen-heading { max-width: 11ch; }
.audio-card { padding: clamp(1.3rem,4vw,3rem); border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(140deg,#201a28,#101015 70%); position: relative; }
.audio-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.8rem; }
.audio-top h3 { font-size: clamp(1.2rem,3vw,1.8rem); line-height: 1.2; margin: .4rem 0 0; letter-spacing: -.03em; }
.audio-meta { color: #c4bfca; font-size: .875rem; margin: .4rem 0 0; }
.audio-duration { padding: .5rem .8rem; color: var(--lime); border: 1px solid rgba(184,255,91,.35); border-radius: 999px; white-space: nowrap; font-size: .875rem; font-weight: 700; }
audio { width: 100%; display: block; }
.audio-controls { display: grid; grid-template-columns: auto minmax(0,1fr); align-items: center; gap: 1.3rem; }
.audio-controls[hidden], audio[hidden] { display: none; }
.audio-toggle { display: grid; place-items: center; width: 4.2rem; height: 4.2rem; border: 0; border-radius: 50%; background: var(--lime); color: #08080b; cursor: pointer; flex-shrink: 0; }
.audio-toggle svg { width: 1.5rem; height: 1.5rem; fill: currentColor; }
.audio-toggle .pause-icon { display: none; }
.audio-toggle.is-playing .play-icon { display: none; }
.audio-toggle.is-playing .pause-icon { display: block; }
.audio-progress { width: 100%; margin: 0; cursor: pointer; height: 1.5rem; accent-color: var(--lime); }
.audio-time { display: flex; justify-content: space-between; gap: 1rem; color: #c9c5d0; font-size: .875rem; font-variant-numeric: tabular-nums; }
.audio-status { min-height: 1.6em; margin: .75rem 0 0; color: #c4bfca; font-size: .875rem; }
.audio-status:empty { display: none; }
.stat { min-height: 12rem; transform: none !important; }
.stat-number { font-size: clamp(2rem,4.5vw,3.8rem); letter-spacing: -.045em; }
.stat-label { font-size: .875rem; letter-spacing: .04em; }
.stat:nth-child(1) { color: #08080b; }
.stat small { font-size: .875rem; font-family: Inter, sans-serif; font-weight: 600; letter-spacing: 0; }
.references { margin-top: 1.8rem; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.references li { padding: .85rem 0; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; flex-wrap: wrap; gap: .5rem 1rem; font-size: .95rem; }
.references span { color: #bdb8c7; }
.story a { text-underline-offset: .2em; text-decoration-color: #77717f; }
.photo-stack img:first-child { object-position: 22% center; }
.photo-stack img:last-child { object-position: right center; }
.style { font-size: .875rem; }
.availability-card { padding: clamp(1.4rem,5vw,4rem); }
.availability-card h2 { font-size: clamp(2.25rem,5.4vw,4.6rem); max-width: 15ch; line-height: 1.05; overflow-wrap: normal; hyphens: auto; }
.availability-card .eyebrow { color: #d4ff9d; }
.availability-card > * { position: relative; z-index: 1; }
.availability-card .places { font-size: .875rem; letter-spacing: .04em; line-height: 1.7; }
.contact-actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; }
.btn-contact { background: var(--lime); border-color: var(--lime); color: #08080b; }
.contact-details { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1.5rem; border-top: 1px solid rgba(255,255,255,.22); padding-top: 1.6rem; margin: 2rem 0 0; }
.contact-details div { min-width: 0; }
.contact-details dt { font-size: .875rem; color: #d5c9ef; margin-bottom: .35rem; }
.contact-details dd { margin: 0; }
.contact-details a { font-size: 1rem; font-weight: 600; text-decoration: none; overflow-wrap: anywhere; display: inline-block; padding-block: .25rem; }
.contact-details a:hover { text-decoration: underline; text-underline-offset: .25rem; }
.footer-row { font-size: .875rem; align-items: flex-start; }
.footer-legal { color: #aaa5b2; max-width: 26rem; }
.footer-legal span { display: block; }
@media (max-width:900px) {
  .video-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .video-card:first-child { grid-column: auto; }
  .hero-photo { object-position: 50% 37%; }
  .contact-details { grid-template-columns: 1fr 1fr; }
  .contact-details div:last-child { grid-column: 1 / -1; }
}
@media (max-width:620px) {
  .shell { width: calc(100% - 2rem); }
  .hero-media { min-height: 28rem; height: min(62svh,36rem); margin-top: .25rem; }
  .hero-grid { gap: 2rem; }
  .hero { padding-top: 5.5rem; }
  .stamp { right: -.15rem; width: 7.2rem; }
  .hero h1 { font-size: clamp(3.6rem,19vw,6rem); line-height: .95; }
  .hero-copy { font-size: 1.05rem; }
  .eyebrow { letter-spacing: .065em; font-size: .875rem; gap: .5rem; }
  .hero .actions { gap: .7rem; }
  .hero .actions .btn { flex: 1 1 auto; }
  .nav-links { gap: .7rem; }
  .nav-cta { font-size: .875rem; }
  .section-head { gap: 1.25rem; margin-bottom: 1.75rem; }
  h2 { font-size: clamp(2.4rem,10.5vw,4rem); }
  .video-grid { grid-template-columns: 1fr; gap: 1.4rem; max-width: 27rem; margin-inline: auto; }
  .video-card video, .video-card:first-child video, .video-card:not(:first-child) video { height: auto; aspect-ratio: 9 / 16; max-height: none; min-height: 0; }
  .audio-top { align-items: flex-start; flex-wrap: wrap; gap: .75rem; }
  .audio-controls { gap: .85rem; }
  .audio-toggle { width: 3.4rem; height: 3.4rem; }
  .stat { min-height: 10rem; }
  .stat-number { font-size: clamp(1.85rem,8vw,3rem); }
  .stats { gap: .75rem; }
  .availability-card h2 { font-size: clamp(2rem,8vw,3rem); max-width: 100%; }
  .availability-card p { font-size: 1rem; }
  .contact-details { grid-template-columns: 1fr; gap: 1rem; }
  .contact-details div:last-child { grid-column: auto; }
  .contact-actions .btn { width: 100%; }
  .photo-stack { min-height: 27rem; }
}
@media (max-width:360px) {
  .brand { font-size: .875rem; gap: .5rem; }
  .brand-logo-frame { width: 2.6rem; height: 2.6rem; }
  .nav-cta { padding: .55rem .65rem; }
  .eyebrow::before { flex-basis: .9rem; }
}
@media (prefers-reduced-motion:reduce) { .btn:hover { transform:none; } }

/* Final responsive typography and media bounds. */
nav{flex-wrap:wrap;}
.brand-logo-frame img{height:auto;}
h2{font-size:clamp(2.25rem,5vw,4.5rem);overflow-wrap:normal;word-break:normal;}
.story h2,.adapt-copy h2,.listen-heading{max-width:100%;}
.photo-stack{overflow:clip;}
.stats{grid-template-columns:repeat(auto-fit,minmax(min(100%,8rem),1fr));}
@media(max-width:900px){.stamp{right:.25rem;}}
@media(max-width:620px){.hero h1{font-size:min(19vw,6rem);}h2{font-size:min(10.5vw,4rem);}.availability-card h2{font-size:min(8vw,3rem);}}

.audio-controls{display:flex;flex-wrap:wrap;}
.audio-controls>div{flex:1 1 10rem;min-width:0;}
.audio-top>*{min-width:0;}