
:root{
  --bg:#f4f0e8;--paper:#fbf6ee;--text:#2f2924;--brown:#684a38;--copper:#ad6538;
  --blue:#667b7f;--line:#d9cdbd;--shadow:0 12px 30px rgba(61,45,34,.08);
  --radius:26px
}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);font-family:Georgia,"Times New Roman",serif;line-height:1.55}
a{color:inherit}.container{width:min(1100px,calc(100% - 38px));margin:auto}
.site-header{position:sticky;top:0;z-index:20;background:rgba(251,246,238,.96);border-bottom:1px solid var(--line);backdrop-filter:blur(8px)}
.nav-wrap{width:min(1100px,calc(100% - 38px));min-height:96px;margin:auto;display:flex;align-items:center;gap:18px}
.brand{display:flex;align-items:center;gap:14px;text-decoration:none;min-width:0}.brand-mark{width:52px;height:52px;border:3px solid var(--copper);border-radius:50%;position:relative;flex:none}.brand-mark:after{content:"";position:absolute;width:26px;height:3px;background:var(--copper);left:11px;top:23px;transform:rotate(-55deg);border-radius:2px}
.script{font-family:"Brush Script MT","Segoe Script","Snell Roundhand",cursive;color:var(--copper);font-weight:400}
.brand-name{font-size:1.75rem;white-space:nowrap}.menu-btn{margin-left:auto;border:1px solid var(--line);background:var(--paper);padding:14px 20px;border-radius:18px;font:inherit;font-size:1.05rem}.nav-links{display:flex;gap:17px;align-items:center}.nav-links a{text-decoration:none}.nav-links a.active{color:var(--copper)}
.hero{padding:110px 0 70px}.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:50px;align-items:center}.kicker{text-transform:uppercase;letter-spacing:.17em;color:var(--copper);font-weight:700;font-size:.83rem}
h1,h2,h3{line-height:1.04;margin:.2em 0 .35em}h1{font-size:clamp(4rem,9vw,7rem)}h2{font-size:clamp(2.4rem,6vw,4.5rem)}h3{font-size:1.65rem}.lead{font-size:clamp(1.25rem,2.4vw,1.7rem);color:#62584f}
.actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px}.btn{display:inline-block;text-decoration:none;padding:16px 25px;border-radius:18px;border:1px solid var(--brown);font-weight:700}.btn.primary{background:var(--brown);color:white}.btn.secondary{background:transparent}
.hero-art{min-height:390px;border-radius:40px;background:linear-gradient(145deg,#765b49,#78888a);box-shadow:var(--shadow);display:flex;align-items:flex-end;padding:28px}.hero-note{background:rgba(251,246,238,.9);padding:22px;border-radius:22px;width:100%}
.section{padding:80px 0}.alt{background:#efe5d6;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.section-head{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:end;margin-bottom:35px}.section-head p{font-size:1.25rem;color:#695f56}
.quick{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}.quick>a,.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:28px;text-decoration:none;box-shadow:var(--shadow)}.badge{display:inline-block;background:#efe1d3;color:var(--copper);padding:7px 14px;border-radius:999px}
.featured{display:grid;grid-template-columns:1.1fr .9fr;gap:26px}.player{overflow:hidden;border-radius:30px;background:var(--paper);border:1px solid var(--line)}.ratio{aspect-ratio:16/9;background:#222}.ratio iframe{width:100%;height:100%;border:0}.player-meta{padding:24px}.song-list{display:grid;gap:14px}.song-card{display:flex;gap:15px;align-items:center;padding:16px;border:1px solid var(--line);border-radius:20px;background:var(--paper);cursor:pointer}.song-art{width:82px;height:82px;border-radius:16px;background:linear-gradient(145deg,#745842,#718386);display:grid;place-items:end center;color:white;font-weight:700;padding:8px;overflow:hidden;background-size:cover;background-position:center}.song-card strong{display:block;font-size:1.2rem}.small{font-size:.95rem;color:#756b62}.hint{margin-top:18px;padding:18px;border-radius:18px;background:rgba(104,74,56,.07)}
.quote{font-size:clamp(2rem,5vw,3.6rem);border-left:8px solid var(--copper);margin:0;padding-left:28px;max-width:900px}
.list-grid{display:grid;gap:20px}.entry{background:var(--paper);border:1px solid var(--line);padding:25px;border-radius:24px}.entry-body{white-space:pre-wrap}.gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.gallery-card{background:var(--paper);border:1px solid var(--line);border-radius:24px;overflow:hidden}.gallery-img{aspect-ratio:1/1;background:linear-gradient(145deg,#745842,#718386);background-size:cover;background-position:center}.gallery-copy{padding:18px}
.footer{padding:55px 0;background:#e8dccb;border-top:1px solid var(--line)}.footer-grid{display:flex;justify-content:space-between;gap:25px;flex-wrap:wrap}.socials{display:flex;gap:10px;flex-wrap:wrap}.socials a{background:var(--paper);border:1px solid var(--line);padding:10px 15px;border-radius:999px;text-decoration:none}
.page-head{padding:75px 0 35px}.page-copy{font-size:1.18rem;color:#675e56}.contact-card{max-width:700px}
.empty{padding:25px;border:1px dashed var(--line);border-radius:20px;color:#746a62}
@media(max-width:800px){
 .nav-wrap{min-height:92px}.brand-name{font-size:1.45rem}.nav-links{display:none;position:absolute;top:92px;left:0;right:0;background:var(--paper);padding:20px 28px;border-bottom:1px solid var(--line);flex-direction:column;align-items:flex-start}.nav-links.open{display:flex}
 .hero{padding:70px 0 45px}.hero-grid,.section-head,.featured{grid-template-columns:1fr}.hero-art{min-height:280px}.quick{grid-template-columns:1fr}.gallery-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:520px){.gallery-grid{grid-template-columns:1fr}.container,.nav-wrap{width:min(100% - 30px,1100px)}h1{font-size:4.3rem}.brand-mark{width:48px;height:48px}}

.gallery-filters{grid-column:1/-1;display:flex;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.gallery-filter{border:1px solid var(--line);background:var(--paper);color:var(--text);padding:9px 14px;border-radius:999px;font:inherit;cursor:pointer}
.gallery-filter.active{background:var(--brown);color:#fff}
.gallery-grid[data-shape="landscape"] .gallery-img{aspect-ratio:16/10}
.gallery-grid[data-shape="portrait"] .gallery-img{aspect-ratio:4/5}
.gallery-grid[data-shape="square"] .gallery-img{aspect-ratio:1/1}
.gallery-card[hidden]{display:none}

/* CBC visual controls — clean rebuild */
.brand-mark[data-brand-icon]{display:grid;place-items:center;color:var(--copper);overflow:hidden}
.brand-mark[data-brand-icon] svg{width:78%;height:78%;display:block}
.brand-mark.brand-compass{border:0;background:transparent}
.brand-mark.brand-monogram{border:2px solid var(--copper);border-radius:50%;font:800 10px/1 system-ui,sans-serif;background:transparent}
.brand-mark.brand-custom{border-radius:50%;background-size:cover;background-position:center;border:1px solid var(--line)}
.has-photo-background{
 position:relative;
 background-image:linear-gradient(rgba(0,0,0,var(--cbc-bg-overlay,.35)),rgba(0,0,0,var(--cbc-bg-overlay,.35))),var(--cbc-bg-image);
 background-size:cover;
 background-position:var(--cbc-bg-position,center center);
 color:#fff;
}
.has-photo-background .kicker,
.has-photo-background .lead,
.has-photo-background .page-copy{color:inherit}
.has-photo-background h1,
.has-photo-background h2{color:#fff}
.photo-day-section[hidden]{display:none!important}
.photo-day-image{width:100%;min-height:420px;border-radius:30px;background:center/cover no-repeat;border:1px solid var(--line);box-shadow:var(--shadow)}
@media(max-width:760px){.photo-day-image{min-height:280px;border-radius:24px}}

/* Visual image rendering fix */
.brand-mark[data-brand-icon]::before,
.brand-mark[data-brand-icon]::after{content:none!important;display:none!important}
.brand-mark.brand-compass{border:0!important}
.photo-day-image{display:block;width:100%;object-fit:cover;background:none!important}

/* Photo of the Day sizing controls */
.photo-day-section .container{max-width:1180px}
.photo-day-image{
  display:block;
  width:100%;
  height:auto;
  margin:0 auto;
  object-fit:cover;
}
.photo-day-section[data-photo-size="small"] .photo-day-image{
  max-width:420px;
  max-height:420px;
}
.photo-day-section[data-photo-size="medium"] .photo-day-image{
  max-width:700px;
  max-height:560px;
}
.photo-day-section[data-photo-size="large"] .photo-day-image{
  max-width:960px;
  max-height:720px;
}
.photo-day-section[data-photo-size="full"] .photo-day-image{
  max-width:none;
  max-height:none;
}
.photo-day-section[data-photo-fit="contain"] .photo-day-image{
  object-fit:contain;
}
.photo-day-section[data-photo-fit="cover"] .photo-day-image{
  object-fit:cover;
}
.photo-day-section[data-photo-align="left"] .photo-day-image{margin-left:0;margin-right:auto}
.photo-day-section[data-photo-align="center"] .photo-day-image{margin-left:auto;margin-right:auto}
.photo-day-section[data-photo-align="right"] .photo-day-image{margin-left:auto;margin-right:0}

/* v9 forced mobile Photo of the Day sizing */
.photo-day-section[data-photo-size="small"] .photo-day-image{
 width:min(100%,420px)!important;
 max-width:420px!important;
 max-height:420px!important;
 height:auto!important;
}
.photo-day-section[data-photo-size="medium"] .photo-day-image{
 width:min(100%,640px)!important;
 max-width:640px!important;
 max-height:520px!important;
 height:auto!important;
}
.photo-day-section[data-photo-size="large"] .photo-day-image{
 width:min(100%,900px)!important;
 max-width:900px!important;
 max-height:700px!important;
 height:auto!important;
}
.photo-day-section[data-photo-size="full"] .photo-day-image{
 width:100%!important;
 max-width:100%!important;
 height:auto!important;
}
.photo-day-section[data-photo-fit="contain"] .photo-day-image{
 object-fit:contain!important;
}
.photo-day-section[data-photo-fit="cover"] .photo-day-image{
 object-fit:cover!important;
}
/* absolutely eliminate any legacy mark drawn through the SVG compass */
.brand-mark[data-brand-icon]::before,
.brand-mark[data-brand-icon]::after,
.brand-mark.brand-compass::before,
.brand-mark.brand-compass::after{
 content:none!important;
 display:none!important;
 width:0!important;
 height:0!important;
 background:none!important;
 border:0!important;
}
.brand-mark.brand-compass{
 background:none!important;
 border:0!important;
 transform:none!important;
}

/* Stable Visual Merge 14 */
.hero[data-bg-height="compact"]{min-height:auto!important;padding-top:44px!important;padding-bottom:44px!important}
.hero[data-bg-height="medium"]{min-height:440px!important;padding-top:55px!important;padding-bottom:55px!important}
.hero[data-bg-height="tall"]{min-height:580px!important;padding-top:72px!important;padding-bottom:72px!important}
.hero[data-bg-height="full"]{min-height:100vh!important}
.page-head[data-bg-height="compact"]{min-height:auto!important;padding-top:42px!important;padding-bottom:42px!important}
.page-head[data-bg-height="medium"]{min-height:300px!important;padding-top:58px!important;padding-bottom:58px!important}
.page-head[data-bg-height="tall"]{min-height:430px!important;padding-top:74px!important;padding-bottom:74px!important}
.page-head[data-bg-height="full"]{min-height:80vh!important}
.has-photo-background[data-bg-fit="cover"]{background-size:cover!important;background-repeat:no-repeat!important}
.has-photo-background[data-bg-fit="contain"]{background-size:contain!important;background-repeat:no-repeat!important;background-color:var(--paper)}
.has-photo-background[data-bg-fit="auto"]{background-size:auto!important;background-repeat:no-repeat!important}

.hero-art{min-height:0!important;height:auto!important;overflow:hidden!important}
.hero-grid[data-hero-art="hidden"]{grid-template-columns:1fr!important}
.hero-grid[data-hero-art="hidden"] .hero-art{display:none!important}
.hero-grid[data-hero-art-size="small"] .hero-art{width:min(100%,360px)!important;min-height:180px!important;max-height:220px!important;justify-self:end}
.hero-grid[data-hero-art-size="medium"] .hero-art{width:min(100%,520px)!important;min-height:240px!important;max-height:300px!important;justify-self:end}
.hero-grid[data-hero-art-size="large"] .hero-art{width:100%!important;min-height:320px!important;max-height:400px!important}
.hero-grid[data-hero-art-fit="contain"] .hero-art{background-size:contain!important;background-repeat:no-repeat!important;background-color:var(--paper)!important}
.hero-grid[data-hero-art-fit="cover"] .hero-art{background-size:cover!important;background-repeat:no-repeat!important}

.brand-mark[data-brand-icon]::before,.brand-mark[data-brand-icon]::after,
.brand-mark.brand-compass::before,.brand-mark.brand-compass::after{content:none!important;display:none!important}

@media(max-width:800px){
 .hero-grid{grid-template-columns:1fr!important}
 .hero-grid[data-hero-art-size="small"] .hero-art,
 .hero-grid[data-hero-art-size="medium"] .hero-art,
 .hero-grid[data-hero-art-size="large"] .hero-art{width:100%!important;justify-self:stretch!important}
}

/* CBC Visual Fix 15 — CURRENT SPOTLIGHT is independent from hero background */
.hero-grid[data-hero-art-size="small"] .hero-art{
  width:min(100%,340px)!important;
  min-height:170px!important;
  height:170px!important;
  max-height:170px!important;
}
.hero-grid[data-hero-art-size="medium"] .hero-art{
  width:min(100%,480px)!important;
  min-height:240px!important;
  height:240px!important;
  max-height:240px!important;
}
.hero-grid[data-hero-art-size="large"] .hero-art{
  width:100%!important;
  min-height:340px!important;
  height:340px!important;
  max-height:340px!important;
}
.hero-grid[data-hero-art-opacity="soft"] .hero-art{
  background-blend-mode:screen;
}
.hero-grid[data-hero-art-opacity="none"] .hero-art{
  background-image:none!important;
}

/* On phones the hero background height follows CONTENT instead of the photo.
   This is what stops the giant header/background image. */
@media(max-width:800px){
  .hero[data-bg-height="compact"]{
    min-height:0!important;
    height:auto!important;
    padding-top:36px!important;
    padding-bottom:36px!important;
  }
  .hero[data-bg-height="medium"]{min-height:420px!important}
  .hero[data-bg-height="tall"]{min-height:560px!important}
  .hero-grid[data-hero-art-size="small"] .hero-art{
    width:min(100%,340px)!important;
    min-height:170px!important;
    height:170px!important;
    max-height:170px!important;
    justify-self:center!important;
  }
  .hero-grid[data-hero-art-size="medium"] .hero-art{
    width:min(100%,480px)!important;
    min-height:240px!important;
    height:240px!important;
    max-height:240px!important;
  }
  .hero-grid[data-hero-art-size="large"] .hero-art{
    min-height:320px!important;
    height:320px!important;
    max-height:320px!important;
  }
}
