/*
Theme Name: mixbyfred
Theme URI: http://139.59.113.186/mixbyfred-wp/
Author: Vanilla Killer
Author URI: https://vanillakiller.com
Description: Custom one-page site for Fred Ruddick (mixbyfred). Tailwind CDN + WaveSurfer player, content driven by Pods.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 7.0
Requires PHP: 8.0
License: Proprietary
License URI:
Text Domain: mixbyfred
*/

html{scroll-behavior:smooth}
html,body{overflow-x:hidden;max-width:100vw}
body{font-family:Inter,system-ui,sans-serif;color:#111;background:#fafaf7;-webkit-font-smoothing:antialiased}
.display{font-family:"Cormorant Garamond",Georgia,serif;font-weight:300;letter-spacing:-.01em;line-height:1.05}
.eyebrow{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:#6b6b66}
.btn{display:inline-flex;align-items:center;justify-content:center;height:48px;padding:0 22px;border-radius:10px;font-weight:500;font-size:14px;letter-spacing:.02em;white-space:nowrap;transition:transform .15s ease,background .15s ease,color .15s ease,border-color .15s ease}
.btn-primary{background:#111;color:#fafaf7}
.btn-primary:hover{transform:translateY(-1px);background:#000}
.btn-ghost{background:transparent;color:#111;border:1px solid #111}
.btn-ghost:hover{background:#111;color:#fafaf7}
.rule{border-top:1px solid #e5e3dc}

/* Hero player */
.ab-btn{color:#6b6b66;font-weight:500;line-height:1;transition:background .15s ease,color .15s ease}
.ab-btn.ab-before.active{background:#a8a395;color:#fafaf7}
.ab-btn.ab-after.active{background:#111;color:#fafaf7}
.play-btn{transition:transform .15s ease,opacity .15s ease}
.play-btn:hover{transform:scale(1.06)}
.play-btn[disabled]{opacity:.45;cursor:not-allowed}
.play-btn[disabled]:hover{transform:none}

.featured-artwork{position:relative;display:block;width:100%;aspect-ratio:1/1;overflow:hidden;cursor:zoom-in;background:#efece4}
.featured-artwork img{width:100%;height:100%;object-fit:cover;transition:opacity .5s ease}
.featured-artwork.fading img{opacity:0}
.featured-artwork::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.18) 0%,transparent 35%);opacity:0;transition:opacity .15s ease;pointer-events:none}
.featured-artwork:hover::after{opacity:1}
.featured-badge{position:absolute;top:10px;right:10px;background:#111;color:#fafaf7;padding:4px 8px;font-size:9px;letter-spacing:.18em;text-transform:uppercase;border-radius:999px}

.wave-loading{position:relative;pointer-events:none}
.wave-loading::after{content:"";position:absolute;top:50%;left:50%;width:20px;height:20px;margin:-10px 0 0 -10px;border:2px solid rgba(214,211,202,.6);border-top-color:#111;border-radius:50%;animation:waveSpin .8s linear infinite;z-index:3}
@keyframes waveSpin{to{transform:rotate(360deg)}}

.wave-stack{position:relative}
.wave-pos{position:absolute;inset:0;transition:opacity .15s ease}
.wave-hidden{opacity:0;pointer-events:none}

.thumb-rail{scrollbar-width:thin}
.thumb-rail::-webkit-scrollbar{width:4px;height:4px}
.thumb-rail::-webkit-scrollbar-thumb{background:#d6d3ca;border-radius:4px}
.thumb{flex:0 0 auto;width:80px;height:80px;border-radius:10px;overflow:hidden;border:2px solid transparent;cursor:pointer;transition:border-color .15s ease,transform .15s ease;background:#efece4;position:relative}
@media (min-width:768px){
  #thumb-rail .thumb{width:100%;height:100%}
}
.thumb.active{border-color:#fafaf7}
.thumb img{width:100%;height:100%;object-fit:cover;display:block}
.thumb:hover{transform:translateY(-1px)}
.thumb.active{border-color:#111}
.thumb.is-tbd::after{content:"TBD";position:absolute;inset:auto 0 0 0;background:rgba(17,17,17,.72);color:#fafaf7;font-size:8px;letter-spacing:.16em;text-align:center;padding:2px 0}
.thumb.has-ab::before{content:"A/B";position:absolute;top:4px;left:4px;background:rgba(17,17,17,.78);color:#fafaf7;font-size:7px;letter-spacing:.14em;font-weight:600;padding:2px 4px;border-radius:3px;line-height:1;z-index:2}

.is-placeholder{position:relative}
.is-placeholder>img{visibility:hidden}
.is-placeholder::before{content:attr(data-title);position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:repeating-linear-gradient(45deg,#efece4 0 12px,#e8e4d9 12px 24px);font-family:"Cormorant Garamond",Georgia,serif;font-weight:300;color:#6b6b66;text-align:center;padding:12px}
.featured-artwork.is-placeholder::before{font-size:36px;letter-spacing:-.01em;line-height:1.05}
#player-img-wrap.is-placeholder::before{font-size:42px;letter-spacing:-.01em;line-height:1.05}
.thumb.is-placeholder::before{font-size:8px;letter-spacing:.14em;text-transform:uppercase;padding:4px}

/* Modal */
.modal{position:fixed;inset:0;background:rgba(17,17,17,.6);display:none;align-items:center;justify-content:center;padding:16px;z-index:50;opacity:0;transition:opacity .2s ease}
.modal.open{display:flex;opacity:1}
.modal-card{background:#fafaf7;border-radius:14px;max-width:520px;width:100%;max-height:92vh;overflow-y:auto;padding:28px;position:relative;transform:translateY(8px);transition:transform .2s ease}
.modal.open .modal-card{transform:translateY(0)}
.modal-card-wide{max-width:920px}
.modal-thumb-rail{scrollbar-width:thin}
.modal-thumb-rail::-webkit-scrollbar{height:4px}
.modal-thumb-rail::-webkit-scrollbar-thumb{background:#d6d3ca;border-radius:4px}

@media (prefers-reduced-motion: reduce){
  .featured-artwork img{transition:none}
}
.modal-close{position:absolute;top:14px;right:14px;width:36px;height:36px;border-radius:999px;background:transparent;border:none;cursor:pointer;font-size:18px;color:#6b6b66}
.modal-close:hover{color:#111}
.input{width:100%;height:44px;padding:0 12px;border:1px solid #d6d3ca;border-radius:8px;background:#fff;font-family:inherit;font-size:14px}
.input:focus{outline:none;border-color:#111}
textarea.input{height:auto;padding:12px;min-height:96px;resize:vertical}

.ph{position:relative;background:repeating-linear-gradient(45deg,#efece4 0 12px,#e8e4d9 12px 24px);border:1px solid #e0dccf;border-radius:12px;display:flex;align-items:center;justify-content:center;color:#a8a395;font-size:11px;letter-spacing:.18em;text-transform:uppercase;text-align:center;padding:24px}

/* Scrolling logo marquee */
.logo-marquee{overflow:hidden;-webkit-mask-image:linear-gradient(to right,transparent,black 6%,black 94%,transparent);mask-image:linear-gradient(to right,transparent,black 6%,black 94%,transparent)}
.logo-track{display:flex;align-items:center;gap:3.5rem;width:max-content;animation:logo-scroll 50s linear infinite}
.logo-track:hover{animation-play-state:paused}
.logo-track img{height:30px;width:auto;flex:0 0 auto;opacity:.55;filter:grayscale(100%);transition:opacity .25s ease,filter .25s ease}
.logo-track img:hover{opacity:1;filter:grayscale(0)}
@keyframes logo-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(min-width:768px){
  .logo-track{gap:4.5rem}
  .logo-track img{height:40px}
}
@media(prefers-reduced-motion:reduce){
  .logo-track{animation:none}
}

.reveal{opacity:0;transform:translateY(12px);transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:none}

/* Lightbox */
.expandable{cursor:zoom-in}
.lb{position:fixed;inset:0;background:rgba(10,10,10,.92);display:none;align-items:center;justify-content:center;z-index:60;opacity:0;transition:opacity .2s ease;padding:24px}
.lb.open{display:flex;opacity:1}
.lb-img{max-width:100%;max-height:100%;object-fit:contain;border-radius:6px;box-shadow:0 30px 80px rgba(0,0,0,.5);transform:scale(.98);transition:transform .2s ease}
.lb.open .lb-img{transform:scale(1)}
.lb-btn{position:absolute;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);color:#fafaf7;width:48px;height:48px;border-radius:999px;display:flex;align-items:center;justify-content:center;font-size:20px;cursor:pointer;transition:background .15s ease,transform .15s ease;backdrop-filter:blur(8px)}
.lb-btn:hover{background:rgba(255,255,255,.18)}
.lb-close{top:20px;right:20px}
.lb-prev{left:20px;top:50%;transform:translateY(-50%)}
.lb-next{right:20px;top:50%;transform:translateY(-50%)}
.lb-prev:hover,.lb-next:hover{transform:translateY(-50%) scale(1.06)}
.lb-counter{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);color:rgba(255,255,255,.6);font-size:12px;letter-spacing:.18em;text-transform:uppercase}
.lb[data-group-size="1"] .lb-prev,.lb[data-group-size="1"] .lb-next,.lb[data-group-size="1"] .lb-counter{display:none}
@media (max-width: 640px){
  .lb-prev{left:8px} .lb-next{right:8px} .lb-close{top:12px;right:12px}
  .lb-btn{width:40px;height:40px;font-size:18px}
}

/* Player additions (added after sign-off) */
.featured-caption{position:absolute;left:0;right:0;bottom:0;padding:14px 16px;background:linear-gradient(to top,rgba(0,0,0,.7) 0%,rgba(0,0,0,.35) 65%,transparent 100%);color:#fafaf7;pointer-events:none}

.thumb{width:64px;height:64px}
@media (min-width:768px){ #thumb-rail .thumb{width:64px;height:64px} }

.thumb.is-placeholder{background:repeating-linear-gradient(45deg,#efece4 0 12px,#e8e4d9 12px 24px)}
.thumb.is-placeholder.has-ab::before{display:none}

#modal-player #player-img-wrap{background:#efece4}

/* Blog post (Note) content — Tailwind CDN ships without the typography
   plugin, so .prose does nothing on its own. Style the rendered Gutenberg
   image/gallery blocks explicitly: rounded corners + room around them. */
.prose img{border-radius:12px}
.prose .wp-block-image,
.prose figure{margin-top:2.25rem;margin-bottom:2.25rem}
.prose .wp-block-image img{display:block;width:100%;height:auto}
/* In-post galleries: honour the column count chosen in the block editor
   (WordPress adds a .columns-N class). Default to 2 when no class is set. */
.prose .wp-block-gallery{margin-top:2.25rem;margin-bottom:2.25rem;display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}
.prose .wp-block-gallery.columns-1{grid-template-columns:1fr}
.prose .wp-block-gallery.columns-2{grid-template-columns:repeat(2,1fr)}
.prose .wp-block-gallery.columns-3{grid-template-columns:repeat(3,1fr)}
.prose .wp-block-gallery.columns-4{grid-template-columns:repeat(4,1fr)}
.prose .wp-block-gallery.columns-5{grid-template-columns:repeat(5,1fr)}
.prose .wp-block-gallery.columns-6{grid-template-columns:repeat(6,1fr)}
.prose .wp-block-gallery figure{margin:0}
.prose figcaption{margin-top:.6rem;font-size:.8rem;color:#6b6b66;text-align:center}

/* Comments on Notes */
.comment-list{list-style:none;margin:0;padding:0}
.comment-list ol.children{list-style:none;margin:1.25rem 0 0;padding:0 0 0 1.5rem;border-left:1px solid #e5e3dc}
.comment-list li.comment{margin:0 0 1.75rem}
.comment-list .comment-author.vcard{margin-bottom:.15rem}
.comment-list .comment-author .fn{font-style:normal;font-weight:600;font-size:14px;color:#111}
.comment-list .comment-author .says{display:none}
.comment-list .comment-meta{font-size:11px;letter-spacing:.04em;color:#6b6b66;margin-bottom:.5rem}
.comment-list .comment-meta a{color:#6b6b66}
.comment-list .comment-content{font-size:15px;line-height:1.65;color:rgba(17,17,17,.85)}
.comment-list .comment-content p{margin:0 0 .75rem}
.comment-list .reply{margin-top:.5rem;font-size:12px}
.comment-list .reply a{color:#111;border-bottom:1px solid #e5e3dc;padding-bottom:1px}
.comment-list .reply a:hover{opacity:.6}
.comment-awaiting-moderation{display:inline-block;font-size:11px;letter-spacing:.04em;color:#6b6b66;font-style:italic;margin-bottom:.4rem}

.comment-respond label{display:block}
.comment-respond input[type=text],
.comment-respond input[type=email],
.comment-respond input[type=url],
.comment-respond textarea{width:100%;background:#fff;border:1px solid #e5e3dc;border-radius:10px;padding:12px 14px;font-family:inherit;font-size:14px;color:#111;margin-top:.35rem}
.comment-respond input:focus,
.comment-respond textarea:focus{outline:none;border-color:#111}
.comment-respond .comment-form-author,
.comment-respond .comment-form-email,
.comment-respond .comment-form-url,
.comment-respond .comment-form-comment{margin-bottom:1.1rem}
.comment-respond .comment-form-author label,
.comment-respond .comment-form-email label,
.comment-respond .comment-form-url label{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:#6b6b66;margin-bottom:.15rem}
.comment-respond .comment-form-cookies-consent{display:flex;align-items:center;gap:.55rem;font-size:13px;color:#6b6b66;margin-bottom:1.2rem}
.comment-respond .comment-form-cookies-consent input{margin:0}
.comment-respond .form-submit{margin:0}
@media (min-width:640px){
  .comment-respond .comment-form-author,
  .comment-respond .comment-form-email{display:inline-block;width:calc(50% - .5rem)}
  .comment-respond .comment-form-author{margin-right:1rem}
}

/* Section thumb rows (Jardin Acoustique, The Music Room): only the first
   three show; 4+ stay in the DOM so the lightbox can page through them. */
.thumb-row > :nth-child(n+4){display:none}

/* Lightbox caption */
.lb-caption{position:absolute;left:50%;bottom:54px;transform:translateX(-50%);width:calc(100% - 112px);max-width:680px;margin:0;text-align:center;color:rgba(255,255,255,.92);font-size:13px;line-height:1.5;text-shadow:0 1px 10px rgba(0,0,0,.65)}
.lb-caption[hidden]{display:none}
@media (max-width:640px){
  .lb-caption{bottom:48px;width:calc(100% - 80px);font-size:12px}
}

/* Contact form honeypot — visually and semantically hidden, off-screen so
   bots that ignore CSS still see a fillable field. */
.mbf-hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}