
/* Cardiff shared masthead + anchor offsets */
:root{
  --hdr-bg:#3d2810;
  --hdr-rule:rgba(255,215,140,0.09);
  --hdr-text:#f5ead8;
  --hdr-dim:rgba(245,234,216,0.82);
  --hdr-dimmer:rgba(245,234,216,0.65);
  --hdr-nav:rgba(245,234,216,0.82);
}
html{scroll-behavior:smooth;}
[id]{scroll-margin-top:var(--masthead-offset,150px);}
.cardiff-masthead{background:var(--hdr-bg)!important;border-bottom:3px solid var(--red)!important;position:sticky!important;top:0!important;z-index:100!important;}
.mh-identity{display:grid!important;grid-template-columns:1fr auto 1fr!important;align-items:center!important;padding:0.75rem 1.5rem!important;gap:1rem!important;border-bottom:1px solid var(--hdr-rule)!important;min-height:72px!important;}
.mh-left-info{font-family:var(--mono)!important;font-size:0.75rem!important;letter-spacing:0.07em!important;color:var(--hdr-dim)!important;line-height:1.75!important;}
.mh-brand{text-align:center!important;}
.mh-brand-link{text-decoration:none!important;display:inline-block!important;}
.mh-brand-name{font-family:var(--sans)!important;font-size:clamp(2rem,5vw,4rem)!important;font-weight:800!important;letter-spacing:-0.02em!important;line-height:1!important;color:var(--hdr-text)!important;text-shadow:0 1px 4px rgba(0,0,0,0.35)!important;white-space:nowrap!important;}
.mh-brand-name .comma{color:var(--hdr-dimmer)!important;font-weight:300!important;}
.mh-brand-sub{font-family:var(--mono)!important;font-size:0.62rem!important;letter-spacing:0.12em!important;text-transform:uppercase!important;color:var(--hdr-dimmer)!important;margin-top:0.22rem!important;display:block!important;}
.mh-right-info{font-family:var(--mono)!important;font-size:0.75rem!important;letter-spacing:0.06em!important;color:var(--hdr-dim)!important;text-align:right!important;line-height:1.75!important;}
.mh-right-info .wx-hi{color:rgba(245,234,216,0.88)!important;font-weight:500!important;font-size:0.88rem!important;}
.mh-tabs{display:flex!important;overflow-x:auto!important;scrollbar-width:none!important;border-bottom:1px solid var(--hdr-rule)!important;}
.mh-tabs::-webkit-scrollbar{display:none!important;}
.mh-tabs a{font-family:var(--sans)!important;font-size:0.68rem!important;font-weight:600!important;letter-spacing:0.07em!important;text-transform:uppercase!important;color:var(--hdr-nav)!important;text-decoration:none!important;padding:0.52rem 1.05rem!important;border-right:1px solid var(--hdr-rule)!important;white-space:nowrap!important;flex-shrink:0!important;transition:color 200ms ease,background 200ms ease!important;position:relative!important;scroll-snap-align:center!important;}
.mh-tabs a:hover{color:var(--hdr-text)!important;background:rgba(255,215,140,0.05)!important;}
.mh-tabs a.active{color:var(--red)!important;}
.mh-tabs a.active::after{content:""!important;position:absolute!important;bottom:0!important;left:0!important;right:0!important;height:2px!important;background:var(--red)!important;}
.announce-strip{background:var(--red)!important;color:#fff!important;height:26px!important;display:flex!important;align-items:center!important;overflow:hidden!important;flex-shrink:0!important;}
.announce-strip-scroll{flex:1!important;overflow:hidden!important;position:relative!important;padding:0 1rem!important;}
.announce-strip-text{display:inline-block!important;white-space:nowrap!important;font-family:var(--mono)!important;font-size:0.63rem!important;letter-spacing:0.05em!important;animation:marquee 30s linear infinite!important;padding-left:100%!important;}
@keyframes marquee{0%{transform:translateX(0);}100%{transform:translateX(-100%);}}
@media(max-width:600px){
  .mh-identity{grid-template-columns:1fr!important;justify-items:center!important;gap:0.25rem!important;padding:0.6rem 1rem!important;min-height:unset!important;}
  .mh-left-info,.mh-right-info{display:none!important;}
  .mh-brand-name{font-size:clamp(1.8rem,8vw,2.8rem)!important;}
  .mh-tabs a{padding:0.48rem 0.75rem!important;font-size:0.62rem!important;}
  .mh-tabs{scroll-snap-type:x proximity!important;padding-inline:max(0px, calc(50vw - 84px))!important;}
}

/* Shared infobox treatment */
.info-box[data-kicker]{
  --ibox-pad-x:1.25rem;
  padding-top:2.2rem !important;
}
.info-box[data-kicker]::before{
  content:attr(data-kicker);
  position:absolute;
  top:0.58rem;
  left:var(--ibox-pad-x);
  right:var(--ibox-pad-x);
  font-family:var(--mono);
  font-size:0.58rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--red);
  line-height:1.3;
  padding-left:0.95rem;
  background:linear-gradient(var(--red),var(--red)) left center/8px 2px no-repeat;
}
.info-box[data-kicker]::after{
  content:none;
}
.site-card .site-kicker,
.list-kicker,
.detail-kicker,
.contact-note{
  font-family:var(--mono) !important;
  font-size:0.58rem !important;
  letter-spacing:0.14em !important;
  text-transform:uppercase !important;
  color:var(--red) !important;
  display:flex !important;
  align-items:center !important;
  gap:0.35rem !important;
  padding-bottom:0 !important;
  margin-bottom:0.35rem !important;
  border-bottom:none !important;
}
.list-kicker,
.detail-kicker{
  padding-bottom:0 !important;
  margin-bottom:0 !important;
  border-bottom:none !important;
}
.site-card .site-kicker::before,
.list-kicker::before,
.detail-kicker::before,
.contact-note::before{
  content:"" !important;
  width:8px !important;
  height:2px !important;
  border-radius:999px !important;
  background:var(--red) !important;
  display:inline-block !important;
  flex-shrink:0;
}
.hero-kicker,
.section-kicker,
.mini-kicker{
  padding-bottom:0 !important;
  margin-bottom:0.35rem !important;
  border-bottom:none !important;
}
.site-card .card-title,
.photo-shell .photo-title,
.hero-panel .card-title,
.quick-card .quick-title,
.section-card .card-title,
.plain-card .card-title,
.project-card .card-title,
.fact-card .card-title,
.step-card .card-title,
.watch-card .card-title,
.card .card-title,
.footer-band .footer-title,
.info-box[data-kicker] > :is(.role-name,.vision-title,.cat-name,.sub-title,.contact-body,.tip-title){
  display:block;
  grid-column:1 / -1;
  width:100%;
  margin-top:0 !important;
  padding-bottom:0.5rem;
  margin-bottom:0.45rem !important;
  border-bottom:1px solid var(--rule);
}
.hero-card .hero-title,
.lead-card .lead-title{
  display:block;
  margin-top:0 !important;
  padding-bottom:0.5rem;
  margin-bottom:0.45rem !important;
  border-bottom:1px solid var(--rule);
}
.list-head,
.detail-head{
  padding-bottom:0;
  margin-bottom:0.5rem !important;
  border-bottom:none;
}

/* Shared button treatment */
.btn,
.btn.primary,
.btn.ghost,
.cta-btn,
.cs-btn,
.sub-btn,
.donate-btn,
.donate-btn-primary,
.donate-btn-ghost,
.icon-btn,
.notify-form button,
.sub-form button{
  background:var(--red) !important;
  color:#fff !important;
  border:1px solid var(--red) !important;
  box-shadow:none !important;
}

.btn:hover,
.btn.primary:hover,
.btn.ghost:hover,
.cta-btn:hover,
.cs-btn:hover,
.sub-btn:hover,
.donate-btn:hover,
.donate-btn-primary:hover,
.donate-btn-ghost:hover,
.icon-btn:hover,
.notify-form button:hover,
.sub-form button:hover{
  background:var(--red-mid) !important;
  color:#fff !important;
  border-color:var(--red-mid) !important;
}

.btn:focus-visible,
.cta-btn:focus-visible,
.cs-btn:focus-visible,
.sub-btn:focus-visible,
.donate-btn:focus-visible,
.icon-btn:focus-visible,
.notify-form button:focus-visible,
.sub-form button:focus-visible{
  outline:2px solid rgba(200,16,46,0.24) !important;
  outline-offset:2px !important;
}
