/* Kentucky Chess Association */

:root {
  /* Colours are taken from the KCA logo: black, the crown's gold, and white. */
  --dark: #141414;       /* header, footer, home banner, headings */
  --dark-2: #2b2925;     /* banner gradient, button hover */
  --gold: #937f5b;       /* the logo's gold: stripes, borders, accents */
  --gold-light: #c2ae86; /* gold for text on dark backgrounds */
  --link: #6e5d3e;       /* darker gold for links on light backgrounds (6.4:1 on white) */
  --link-dark: #54472f;
  --ink: #1c1a17;
  --muted: #6b665c;
  --line: #e7e2d8;
  --bg: #f7f5f0;
  --card: #ffffff;
  --tint: #faf8f4;       /* table striping */
  --tint-2: #f1ece2;     /* table row hover, light banners */
  --radius: 12px;
  --shadow: 0 1px 2px rgba(20, 20, 20, .06), 0 4px 16px rgba(20, 20, 20, .06);
  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

a { color: var(--link); text-underline-offset: 2px; text-decoration-thickness: 1px; }
a:hover, a:focus { color: var(--link-dark); text-decoration-thickness: 2px; }

img { max-width: 100%; height: auto; }

.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--gold); color: var(--dark); padding: .5rem 1rem; z-index: 100;
}
.skip-link:focus { left: 1rem; }

/* ---------- Header ---------- */

.site-header {
  background: var(--dark);
  color: #fff;
  border-bottom: 4px solid var(--gold);
  position: relative;
  z-index: 10;
}

.inside-header {
  max-width: 1140px;
  margin: 0 auto;
  padding: .75rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.site-branding {
  display: flex;
  align-items: center;
  gap: .85rem;
  color: #fff;
  text-decoration: none;
}
.site-branding:hover, .site-branding:focus { color: #fff; }

.site-logo {
  width: auto;
  height: 56px;
  display: block;
}

.main-title {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.35rem;
  line-height: 1.15;
  letter-spacing: .01em;
}

.menu-toggle {
  display: none;
  align-items: center;
  gap: .5rem;
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 8px;
  padding: .45rem .8rem;
  font: inherit;
  font-size: .95rem;
  cursor: pointer;
}

.main-navigation .menu,
.main-navigation .sub-menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

.main-navigation .menu { display: flex; align-items: center; gap: .15rem; }

.main-navigation .menu-item { position: relative; display: flex; align-items: center; }

.main-navigation .menu > .menu-item > a {
  color: #fff;
  text-decoration: none;
  font-weight: 500;
  font-size: .97rem;
  padding: .55rem .7rem;
  border-radius: 8px;
}
.main-navigation .menu > .menu-item > a:hover,
.main-navigation .menu > .menu-item > a:focus,
.main-navigation .menu > .menu-item.current > a {
  background: rgba(255, 255, 255, .1);
  color: #fff;
}
.main-navigation .menu > .has-children > a { padding-right: .2rem; }

/* Label-only items (no page of their own): the whole label opens the dropdown */
.main-navigation .submenu-toggle.menu-label {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  color: #fff;
  font: inherit;
  font-weight: 500;
  font-size: .97rem;
  line-height: inherit;
  padding: .55rem .7rem;
  border-radius: 8px;
}
.main-navigation .submenu-toggle.menu-label svg { font-size: .75rem; opacity: .8; }
.main-navigation .submenu-toggle.menu-label:hover,
.main-navigation .submenu-toggle.menu-label:focus,
.main-navigation .menu > .menu-item.current > .menu-label { background: rgba(255, 255, 255, .1); }

.menu-toggle svg, .submenu-toggle svg { fill: currentColor; }

.submenu-toggle {
  background: transparent;
  border: 0;
  color: rgba(255, 255, 255, .8);
  padding: .55rem .45rem .55rem .1rem;
  cursor: pointer;
  font-size: .75rem;
  line-height: 1;
}

.main-navigation .sub-menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 260px;
  background: var(--card);
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(20, 20, 20, .18);
  padding: .4rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity .15s ease, transform .15s ease, visibility .15s;
}
.main-navigation .has-children:hover > .sub-menu,
.main-navigation .has-children:focus-within > .sub-menu,
.main-navigation .has-children.open > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.main-navigation .sub-menu a {
  display: block;
  width: 100%;
  color: var(--ink);
  text-decoration: none;
  padding: .5rem .75rem;
  border-radius: 6px;
  font-size: .95rem;
}
.main-navigation .sub-menu a:hover,
.main-navigation .sub-menu a:focus,
.main-navigation .sub-menu .current a {
  background: var(--bg);
  color: var(--link);
}

@media (max-width: 900px) {
  .menu-toggle { display: inline-flex; margin-left: auto; }
  .site-branding { flex: 1 1 0; min-width: 0; }
  .main-navigation { display: none; flex-basis: 100%; }
  .menu-open .main-navigation { display: block; }
  .main-navigation .menu { flex-direction: column; align-items: stretch; padding-bottom: .5rem; }
  .main-navigation .menu-item { flex-wrap: wrap; justify-content: space-between; }
  .main-navigation .menu > .menu-item > a { flex: 1; }
  .submenu-toggle { padding: .55rem .9rem; font-size: .9rem; }
  .main-navigation .submenu-toggle.menu-label svg { font-size: .9rem; }
  .main-navigation .submenu-toggle.menu-label { flex: 1; justify-content: space-between; padding: .55rem .9rem .55rem .7rem; text-align: left; }
  .main-navigation .sub-menu {
    position: static;
    flex-basis: 100%;
    display: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    background: rgba(255, 255, 255, .06);
    box-shadow: none;
    margin: 0 0 .4rem .7rem;
  }
  .main-navigation .has-children:hover > .sub-menu,
  .main-navigation .has-children:focus-within > .sub-menu { display: none; }
  .main-navigation .has-children.open > .sub-menu { display: block; }
  .main-navigation .sub-menu a { color: #fff; }
  .main-navigation .sub-menu a:hover,
  .main-navigation .sub-menu a:focus,
  .main-navigation .sub-menu .current a { background: rgba(255, 255, 255, .1); color: #fff; }
  .has-children.open > .submenu-toggle svg { transform: rotate(180deg); }
}

/* ---------- Content ---------- */

.site {
  flex: 1;
  width: 100%;
  max-width: 940px;
  margin: 0 auto;
  padding: 2.25rem 1.25rem 3rem;
}

.inside-article {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 2.5rem 3rem 3rem;
}

.entry-title {
  font-family: var(--serif);
  font-weight: 600;
  color: var(--dark);
  font-size: clamp(1.8rem, 4vw, 2.5rem);
  line-height: 1.15;
  margin: 0 0 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--line);
}

.entry-content > :first-child { margin-top: 0; }

.entry-content h1, .entry-content h2, .entry-content h3,
.entry-content h4, .entry-content h5, .entry-content h6 {
  font-family: var(--serif);
  color: var(--dark);
  line-height: 1.25;
  font-weight: 600;
  margin: 2rem 0 .75rem;
}
.entry-content h2 { font-size: 1.6rem; }
.entry-content h3 { font-size: 1.3rem; }
.entry-content h4 { font-size: 1.1rem; }
.entry-content h5, .entry-content h6 { font-size: 1rem; }

.entry-content p, .entry-content ul, .entry-content ol { margin: 0 0 1.1rem; }
.entry-content ul, .entry-content ol { padding-left: 1.4rem; }
.entry-content li { margin-bottom: .35rem; }
.entry-content li > ul, .entry-content li > ol { margin: .35rem 0 0; }

.entry-content hr { border: 0; border-top: 1px solid var(--line); margin: 2rem 0; }

.entry-content blockquote {
  margin: 1.5rem 0;
  padding: .5rem 1.25rem;
  border-left: 4px solid var(--gold);
  color: var(--muted);
}

.entry-content iframe { max-width: 100%; border-radius: 8px; }

.has-x-large-font-size { font-size: 1.6rem; }

.wp-block-post-date {
  display: inline-block;
  font-size: .85rem;
  color: var(--muted);
  background: var(--bg);
  border-radius: 999px;
  padding: .2rem .8rem;
  margin-bottom: 1rem;
}
.wp-block-post-date::before { content: "Last updated "; }

/* Images, galleries */

.wp-block-image { margin: 1rem 0 1.5rem; }
.wp-block-image img { border-radius: 8px; display: block; }
.wp-block-image figcaption,
.wp-element-caption { font-size: .88rem; color: var(--muted); margin-top: .4rem; }
.alignleft { float: left; margin: .25rem 1.5rem 1rem 0; }
.alignright { float: right; margin: .25rem 0 1rem 1.5rem; }
.aligncenter { margin-left: auto; margin-right: auto; text-align: center; }
.entry-content::after { content: ""; display: table; clear: both; }

.wp-block-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: .75rem;
  margin: 1.5rem 0;
  padding: 0;
}
.wp-block-gallery .wp-block-image { margin: 0; }
.wp-block-gallery.is-cropped img { width: 100%; height: 100%; aspect-ratio: 3 / 4; object-fit: cover; }

/* Tables */

.wp-block-table { margin: 1.5rem 0; overflow-x: auto; }
.wp-block-table.alignwide { margin-left: 0; margin-right: 0; }
/* An office's e-mail address, shown on its own line under the office name (Governance page).
   A <wbr> before the @ lets a long address wrap there on narrow screens. */
.office-email { display: block; font-size: .88rem; overflow-wrap: break-word; }
.entry-content table {
  width: 100%;
  border-collapse: collapse;
  font-size: .95rem;
  line-height: 1.45;
}
.entry-content th, .entry-content td {
  text-align: left;
  padding: .6rem .8rem;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.entry-content thead th, .entry-content thead td, .entry-content th {
  color: var(--dark);
  font-weight: 600;
  border-bottom: 2px solid var(--dark);
  vertical-align: bottom;
}
.entry-content tbody tr:nth-child(even) { background: var(--tint); }
.entry-content tbody tr:hover { background: var(--tint-2); }
.has-fixed-layout { table-layout: fixed; }

/* Sub-page list on section pages */
.section-links h2 { font-size: 1.1rem; margin-top: 1.5rem; }
.entry-content > .section-links:first-child h2 { margin-top: 0; }
.section-links ul {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: .6rem;
}
.section-links li { margin: 0; }
.section-links a {
  display: block;
  padding: .8rem 1rem;
  border: 1px solid var(--line);
  border-left: 4px solid var(--gold);
  border-radius: 8px;
  text-decoration: none;
  font-weight: 500;
  color: var(--dark);
}
.section-links a:hover, .section-links a:focus { background: var(--bg); color: var(--link); }

/* MailerLite forms sit in a soft panel */
.ml-embedded:not(:empty) { margin: 1.5rem 0; }
/* Restyle the MailerLite form to match the site. MailerLite injects its own CSS with
   ID selectors and !important, so these overrides need an ID (#content) and !important. */
.ml-embedded { clear: both; }
#content .ml-embedded .ml-form-align-center { text-align: left !important; }
#content .ml-embedded .ml-form-embedContainer .ml-form-embedWrapper {
  background-color: var(--tint-2) !important;
  border-radius: var(--radius) !important;
  border-left: 4px solid var(--gold) !important;
}
#content .ml-embedded .ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedContent h4 {
  font-family: var(--serif) !important;
  font-size: 1.45rem !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
  color: var(--dark) !important;
}
#content .ml-embedded .ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedContent p,
#content .ml-embedded .ml-form-embedContainer .ml-form-embedWrapper .ml-form-successContent p,
#content .ml-embedded .ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow input {
  font-family: var(--sans) !important;
  color: var(--ink) !important;
}
#content .ml-embedded .ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedSubmit button {
  background-color: var(--dark) !important;
  font-family: var(--sans) !important;
  font-weight: 500 !important;
  border-radius: 8px !important;
}
#content .ml-embedded .ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedSubmit button:hover,
#content .ml-embedded .ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedSubmit button:focus {
  background-color: var(--dark-2) !important;
}

/* ---------- Home ---------- */

.home-hero {
  background: linear-gradient(135deg, var(--dark) 0%, var(--dark-2) 100%);
  color: #fff;
  border-radius: var(--radius);
  padding: 2.5rem 3rem;
  margin-bottom: 1.75rem;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow);
}
.home-hero::after {
  /* faint checkerboard */
  content: "";
  position: absolute;
  inset: 0 0 0 auto;
  width: 45%;
  background:
    conic-gradient(rgba(255,255,255,.06) 25%, transparent 0 50%, rgba(255,255,255,.06) 0 75%, transparent 0)
    0 0 / 56px 56px;
  -webkit-mask-image: linear-gradient(to left, #000, transparent);
          mask-image: linear-gradient(to left, #000, transparent);
  pointer-events: none;
}
.home-hero h1 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(2rem, 5vw, 2.9rem);
  line-height: 1.1;
  margin: 0 0 .75rem;
  position: relative;
}
.home-hero p { font-size: 1.15rem; margin: 0; max-width: 34em; opacity: .92; position: relative; }
.home-hero { display: flex; align-items: center; gap: 2rem; }
.hero-logo { flex: none; width: auto; height: 115px; position: relative; }
.hero-text { min-width: 0; }

.home-paths {
  list-style: none;
  padding: 0;
  margin: 0 0 1.75rem;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}
.home-paths a {
  display: flex;
  flex-direction: column;
  gap: .4rem;
  height: 100%;
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.4rem 1.5rem;
  color: var(--ink);
  text-decoration: none;
  border-top: 4px solid var(--gold);
  transition: transform .15s ease, box-shadow .15s ease;
}
.home-paths a:hover, .home-paths a:focus {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(20, 20, 20, .12);
}
.home-paths .path-icon { font-size: 2rem; line-height: 1; color: var(--dark); }
.home-paths .path-title { font-family: var(--serif); font-weight: 600; font-size: 1.2rem; color: var(--dark); }
.home-paths .path-text { font-size: .95rem; color: var(--muted); }

.home-section {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 2rem 2.5rem;
  margin-bottom: 1.75rem;
}
.home-section h2 {
  font-family: var(--serif);
  color: var(--dark);
  font-weight: 600;
  margin: 0 0 .75rem;
  font-size: 1.5rem;
}

.home-section.section-links ul { margin: 0; grid-template-columns: repeat(2, 1fr); }

.button {
  display: inline-block;
  background: var(--dark);
  color: #fff;
  font-weight: 500;
  text-decoration: none;
  padding: .55rem 1.1rem;
  border-radius: 8px;
}
.button:hover, .button:focus { background: var(--dark-2); color: #fff; }

/* ---------- Footer ---------- */

.site-footer {
  background: var(--dark);
  color: rgba(255, 255, 255, .8);
  font-size: .9rem;
  line-height: 1.5;
  border-top: 4px solid var(--gold);
  margin-top: auto;
}
.site-footer a { color: #fff; }
.site-footer a:hover, .site-footer a:focus { color: var(--gold-light); }

.inside-footer {
  max-width: 1140px;
  margin: 0 auto;
  padding: 2rem 1.25rem 1.5rem;
  display: grid;
  grid-template-columns: 1.1fr 1.3fr 1fr;
  gap: 1.5rem 2.5rem;
}
.footer-col { min-width: 0; }

.footer-branding {
  display: flex;
  align-items: center;
  gap: .75rem;
  text-decoration: none;
}
.footer-logo {
  width: auto;
  height: 52px;
  flex: none;
  display: block;
}
.footer-title {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.15rem;
  line-height: 1.2;
}
.footer-tagline { margin: .75rem 0 0; }

.footer-heading {
  font-family: var(--sans);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gold-light);
  margin: 0 0 .65rem;
}
.footer-list { list-style: none; margin: 0; padding: 0; }
.footer-list li { margin: 0 0 .45rem; }
.footer-contact .footer-label { display: block; font-size: .8rem; color: rgba(255, 255, 255, .65); }
.footer-contact a { overflow-wrap: anywhere; }
.footer-more { margin: .6rem 0 0; }

.footer-cta { margin: 0 0 .9rem; }
.site-footer .footer-button {
  display: inline-block;
  background: var(--gold);
  color: var(--dark);
  font-weight: 600;
  text-decoration: none;
  padding: .45rem .9rem;
  border-radius: 6px;
}
.site-footer .footer-button:hover, .site-footer .footer-button:focus { background: #fff; color: var(--dark); }

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, .15);
  max-width: 1140px;
  margin: 0 auto;
  padding: .85rem 1.25rem 1rem;
  font-size: .82rem;
  color: rgba(255, 255, 255, .6);
}
.footer-bottom p { margin: 0; }

@media (max-width: 860px) {
  .inside-footer { grid-template-columns: 1fr 1fr; }
  .footer-about { grid-column: 1 / -1; }
}

@media (max-width: 860px) {
  .home-paths { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .home-paths { grid-template-columns: 1fr; }
  .home-section.section-links ul { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  body { font-size: 16px; }
  .site { padding: 1.25rem 1rem 2rem; }
  .inside-article { padding: 1.5rem 1.25rem 2rem; }
  .home-hero { padding: 2rem 1.5rem; flex-direction: column; align-items: flex-start; gap: 1.25rem; }
  .hero-logo { height: 80px; }
  .home-section { padding: 1.5rem 1.25rem; }
  .alignleft, .alignright { float: none; margin: 1rem 0; }
  .site-logo { height: 44px; }
  .main-title { font-size: 1.05rem; }
  .menu-toggle span { display: none; }
  .menu-toggle { padding: .55rem .65rem; font-size: 1.1rem; }
  .inside-footer { grid-template-columns: 1fr; gap: 1.5rem; padding: 1.75rem 1rem 1.25rem; }
  .footer-bottom { padding-left: 1rem; padding-right: 1rem; }
  .footer-quick { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; }
}

/* ---------- Tournament-day banner ---------- */

.tournament-banner {
  background: var(--gold);
  text-align: center;
  padding: .6rem 1.25rem;
  font-size: .97rem;
}
.tournament-banner a { color: var(--dark); text-decoration: none; }
.tournament-banner a:hover, .tournament-banner a:focus { color: var(--dark); text-decoration: underline; }

/* Site-wide announcement strip (_data/announcement.yml) */
.announcement-banner {
  background: var(--tint-2);
  border-bottom: 1px solid var(--line);
  text-align: center;
  padding: .4rem 1.25rem;
  font-size: .9rem;
  line-height: 1.4;
}
.announcement-banner a { color: var(--dark); text-decoration: none; }
.announcement-banner a:hover, .announcement-banner a:focus { color: var(--dark); text-decoration: underline; }
.announcement-banner .announcement-label {
  font-weight: 600; text-transform: uppercase; letter-spacing: .05em; font-size: .75rem; color: var(--link); margin-right: .4rem;
}

/* Contact list */
.entry-content .contact-list { list-style: none; padding: 0; margin: 1.5rem 0; }
.entry-content .contact-list li {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: .1rem 1rem;
  align-items: baseline;
  padding: .85rem 0;
  border-bottom: 1px solid var(--line);
  margin: 0;
}
.contact-list li:first-child { border-top: 1px solid var(--line); }
.contact-topic { font-weight: 600; color: var(--dark); }
.contact-detail { grid-column: 1; grid-row: 2; font-size: .92rem; color: var(--muted); }
.contact-list a { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-weight: 500; }
@media (max-width: 640px) {
  .entry-content .contact-list li { grid-template-columns: 1fr; }
  .contact-list a { grid-column: 1; grid-row: auto; }
}

/* ---------- Wide tables on small screens ---------- */
/* Results tables whose first column is the Year are marked
   <figure class="wp-block-table sticky-first-col">. On narrow screens such a table
   scrolls sideways inside its figure (overflow-x: auto, above); here the first
   column stays in view while scrolling, and a soft shadow on the right edge shows
   there is more to the right. The shadow uses the background-attachment: local
   trick (no JS): a card-coloured "cover" scrolls with the content and hides the
   fixed shadow once the end of the table is reached. Row striping is made
   translucent so the shadow shows through it, and each sticky cell repaints the
   same tint over an opaque card background so nothing shows through it.
   Desktop is unaffected. */
@media (max-width: 900px) {
  .wp-block-table.sticky-first-col {
    background:
      linear-gradient(to left, var(--card) 40%, transparent) right center / 3rem 100% no-repeat local,
      radial-gradient(farthest-side at 100% 50%, rgba(20, 20, 20, .22), rgba(20, 20, 20, 0)) right center / 1.25rem 100% no-repeat scroll,
      var(--card);
  }
  /* Separate borders so the sticky cells keep their bottom borders while scrolling. */
  .sticky-first-col table { border-collapse: separate; border-spacing: 0; }
  .sticky-first-col tr { --row-tint: transparent; }
  .entry-content .sticky-first-col tbody tr { background: var(--row-tint); }
  .entry-content .sticky-first-col tbody tr:nth-child(even) { --row-tint: rgba(147, 127, 91, .055); }
  .entry-content .sticky-first-col tbody tr:hover { --row-tint: rgba(147, 127, 91, .15); }
  .sticky-first-col tr > :first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    background: linear-gradient(var(--row-tint), var(--row-tint)) var(--card);
    box-shadow: inset -1px 0 var(--line);
  }
}

/* ---------- Tournament calendar (assets/js/tournament-calendar.js) ---------- */

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.tcal { margin: 1.5rem 0 2rem; }
.tcal button { font: inherit; cursor: pointer; }

.tcal-controls { display: grid; gap: .75rem; margin-bottom: 1rem; }
.tcal-row { display: flex; flex-wrap: wrap; gap: .6rem 1rem; align-items: center; justify-content: space-between; }

.tcal-tabs { display: inline-flex; background: var(--bg); border: 1px solid var(--line); border-radius: 999px; padding: 3px; }
.tcal-tabs button {
  border: 0; background: transparent; color: var(--muted); border-radius: 999px;
  padding: .35rem 1rem; font-size: .92rem; font-weight: 500;
}
.tcal-tabs button[aria-pressed="true"] { background: var(--dark); color: #fff; }

.tcal-search {
  flex: 1 1 14rem; max-width: 22rem; font: inherit; font-size: .95rem;
  padding: .45rem .8rem; border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--ink);
}
.tcal-search:focus { outline: 2px solid var(--gold); outline-offset: 1px; border-color: var(--gold); }

.tcal-chips { display: flex; flex-wrap: wrap; gap: .45rem; }
.tcal-chip {
  display: inline-flex; align-items: center; gap: .4rem;
  border: 1px solid var(--line); background: var(--card); color: var(--muted);
  border-radius: 999px; padding: .25rem .75rem .25rem .6rem; font-size: .88rem; line-height: 1.4;
}
.tcal-chip .tcal-dot { width: .7rem; height: .7rem; border-radius: 50%; border: 2px solid var(--cal); }
.tcal-chip[aria-pressed="true"] { color: var(--ink); border-color: var(--cal); background: color-mix(in srgb, var(--cal) 9%, var(--card)); }
.tcal-chip[aria-pressed="true"] .tcal-dot { background: var(--cal); }
.tcal-chip[aria-pressed="false"] { text-decoration: line-through; text-decoration-color: rgba(0, 0, 0, .35); }
.tcal-count { font-size: .78rem; color: var(--muted); font-variant-numeric: tabular-nums; }

.tcal-toggle { font-size: .9rem; color: var(--muted); display: inline-flex; align-items: center; gap: .4rem; cursor: pointer; }
.tcal-toggle[hidden] { display: none; }
.tcal-toggle input { accent-color: var(--dark); width: 1rem; height: 1rem; }

.tcal-status { font-size: .9rem; color: var(--muted); margin: 0 0 .5rem; }
.tcal-error { background: var(--tint-2); border-left: 4px solid var(--gold); border-radius: 6px; padding: .6rem .9rem; font-size: .95rem; }

.entry-content .tcal-month,
.tcal-month {
  font-family: var(--sans); font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--link); margin: 1.6rem 0 .5rem; padding-bottom: .3rem; border-bottom: 1px solid var(--line);
}

.entry-content .tcal-events, .tcal-events { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }
.entry-content .tcal-event, .tcal-event { margin: 0; }
.tcal-event details {
  background: var(--card); border: 1px solid var(--line); border-left: 4px solid var(--cal);
  border-radius: 10px; transition: box-shadow .15s ease;
}
.tcal-event.is-official details {
  border-left-width: 6px; border-color: color-mix(in srgb, var(--gold) 45%, var(--line)); border-left-color: var(--gold);
  background: linear-gradient(90deg, rgba(147, 127, 91, .16), transparent 70%), var(--card);
}
.tcal-event details[open] { box-shadow: var(--shadow); }
.tcal-event summary {
  display: flex; gap: 1rem; align-items: center; padding: .7rem 1rem .7rem .8rem;
  cursor: pointer; list-style: none;
}
.tcal-event summary::-webkit-details-marker { display: none; }
.tcal-event summary::after {
  content: ""; flex: none; margin-left: auto; width: .55rem; height: .55rem;
  border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
  transform: rotate(45deg) translateY(-2px); transition: transform .15s ease; opacity: .7;
}
.tcal-event details[open] summary::after { transform: rotate(225deg) translateY(-2px); }
.tcal-event summary:hover .tcal-title { color: var(--link); }
.tcal-event summary:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 8px; }

.tcal-date {
  flex: none; width: 3.4rem; text-align: center; line-height: 1.1;
  display: flex; flex-direction: column; align-items: center;
}
.tcal-dow, .tcal-mon { font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.tcal-day { font-family: var(--serif); font-size: 1.6rem; font-weight: 600; color: var(--dark); line-height: 1.05; }

.tcal-main { min-width: 0; display: flex; flex-direction: column; gap: .1rem; }
.tcal-title { font-weight: 600; color: var(--dark); line-height: 1.35; }
.tcal-meta { font-size: .88rem; color: var(--muted); line-height: 1.45; }
.tcal-badge {
  display: inline-block; font-size: .72rem; font-weight: 600; letter-spacing: .02em; line-height: 1.5;
  padding: 0 .5rem; border-radius: 999px; white-space: nowrap; vertical-align: 1px;
  color: color-mix(in srgb, var(--cal) 75%, #000); background: color-mix(in srgb, var(--cal) 14%, #fff);
}

/* KCA official: solid gold with the logo mark, so it doesn't read as one more calendar. */
.tcal-badge.is-official { background: var(--gold); color: #fff; padding-left: .4rem; }
.tcal-mark {
  display: inline-block; width: 1em; height: 1.05em; margin-right: .25rem; vertical-align: -1px;
  background: currentColor; -webkit-mask: url(/assets/images/kca-logo-mark.svg) center / contain no-repeat;
  mask: url(/assets/images/kca-logo-mark.svg) center / contain no-repeat;
}
/* Scholastic / open label: outlined, unlike the filled calendar badges. */
.tcal-kind {
  display: inline-block; font-size: .72rem; font-weight: 600; letter-spacing: .02em; line-height: 1.5;
  padding: 0 .45rem; margin-right: .3rem; border-radius: 4px; white-space: nowrap; vertical-align: 1px;
  border: 1px solid currentColor; color: var(--dark);
}
.tcal-kind-scholastic { color: #2d5a99; }
.tcal-kind-open { color: #7a3a0c; }
.tcal-legend { font-size: .88rem; color: var(--muted); margin: -.25rem 0 .6rem; }

.tcal-body { padding: .1rem 1.2rem 1rem 5.2rem; font-size: .95rem; }
.entry-content .tcal-body p, .tcal-body p { margin: 0 0 .6rem; }
.tcal-when { font-weight: 600; color: var(--dark); }
.tcal-repeat { font-weight: 400; color: var(--muted); }
.tcal-where { color: var(--muted); }
.tcal-desc {
  white-space: pre-line; overflow-wrap: anywhere; line-height: 1.55;
  max-height: 22rem; overflow: auto; margin: 0 0 .9rem; padding: .6rem .8rem; background: var(--tint); border-radius: 8px;
}
.entry-content .tcal-actions, .tcal-actions { display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; align-items: center; margin: .2rem 0 0; }
.tcal-actions .button { padding: .4rem 1rem; font-size: .92rem; }
.tcal-link {
  background: none; border: 0; padding: 0; color: var(--link); font-size: .92rem;
  text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px;
}
.tcal-link:hover, .tcal-link:focus { color: var(--link-dark); text-decoration-thickness: 2px; }
.tcal-more { text-align: center; margin: 1.25rem 0 0; }
.tcal-more .button { border: 0; }

.tcal-series { margin-top: 2rem; padding: 1rem 1.2rem; border: 1px dashed var(--line); border-radius: 10px; background: var(--tint); }
.entry-content .tcal-series h3, .tcal-series h3 { font-family: var(--sans); font-size: 1rem; margin: 0 0 .2rem; }
.entry-content .tcal-series .tcal-series-intro { font-size: .88rem; color: var(--muted); margin: 0 0 .7rem; }
.entry-content .tcal-series > .tcal-events { margin-bottom: .8rem; gap: .4rem; }
.tcal-series-item summary { padding: .55rem 1rem; }
.tcal-series-item .tcal-title { font-size: .97rem; }
.tcal-series-item .tcal-body { padding: .1rem 1.1rem .9rem; }
.entry-content .tcal-series > p:last-child { margin: 0; }
.tcal-next { font-size: .92rem; }
.entry-content .tcal-body .tcal-source, .tcal-source { font-size: .85rem; color: var(--muted); }

.tcal-subscribe { margin: 0 0 2rem; border: 1px solid var(--line); border-radius: 10px; padding: .2rem 1.1rem; background: var(--card); }
.tcal-subscribe summary { cursor: pointer; font-weight: 600; color: var(--dark); padding: .55rem 0; }
.tcal-subscribe[open] { padding-bottom: .9rem; }
.entry-content .tcal-subscribe ul, .tcal-subscribe ul { list-style: none; padding: 0; margin: 0 0 .8rem; display: grid; gap: .4rem; }
.entry-content .tcal-subscribe li, .tcal-subscribe li {
  margin: 0; display: flex; flex-wrap: wrap; gap: .2rem 1rem; align-items: baseline;
  padding: .45rem 0 .45rem .7rem; border-left: 3px solid var(--cal);
}
.tcal-sub-name { font-weight: 500; flex: 1 1 14rem; }
.tcal-subscribe li a { font-size: .92rem; }
.entry-content .tcal-subscribe p, .tcal-subscribe p { font-size: .92rem; color: var(--muted); margin: 0 0 .7rem; }
.entry-content .tcal-subscribe .tcal-sub-note { margin: 0; font-size: .85rem; }

/* Home page: next few KCA events */
.home-upcoming .tcal-short { margin: 0 0 1rem; }
.home-upcoming-more { margin: 0; font-size: .95rem; }

@media (max-width: 640px) {
  .tcal-row { flex-direction: column; align-items: stretch; }
  .tcal-tabs { align-self: flex-start; }
  .tcal-search { flex: none; width: 100%; max-width: none; }
  .tcal-event summary { gap: .7rem; padding: .6rem .75rem .6rem .5rem; }
  .tcal-date { width: 2.8rem; }
  .tcal-day { font-size: 1.35rem; }
  .tcal-body { padding: .1rem .9rem .9rem; }
}

/* ---------- Hall of Fame (about/hall-of-fame.html) ---------- */

.entry-content .hof-intro { font-size: 1.08rem; }

.hof-index { margin: 1.5rem 0 2.5rem; padding: 1rem 1.2rem; background: var(--tint); border-radius: 10px; }
.entry-content .hof-index ol {
  list-style: none; margin: 0; padding: 0;
  columns: 3 9rem; column-gap: 1.5rem;
}
.entry-content .hof-index li { margin: 0 0 .3rem; break-inside: avoid; }

/* Photo in a fixed left column, name and bio beside it; on phones the bio
   runs full width under a smaller photo. */
.hof-entry {
  display: grid;
  grid-template-columns: 160px 1fr;
  grid-template-areas: "photo head" "photo bio";
  grid-template-rows: auto 1fr;
  column-gap: 1.5rem;
  padding: 1.75rem 0;
  border-top: 1px solid var(--line);
  scroll-margin-top: 1rem;
}
.hof-photo {
  grid-area: photo;
  width: 100%; height: auto;
  aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 0;
  border-radius: 8px;
}
.hof-head { grid-area: head; }
.entry-content .hof-head h2 { margin: 0; }
.entry-content .hof-summary { margin: .2rem 0 .8rem; font-style: italic; color: var(--muted); }
.hof-bio { grid-area: bio; }
.entry-content .hof-bio p:last-child { margin-bottom: 0; }

@media (max-width: 640px) {
  .hof-entry {
    grid-template-columns: 96px 1fr;
    grid-template-areas: "photo head" "bio bio";
    grid-template-rows: auto;
    column-gap: 1rem;
    row-gap: .9rem;
  }
  .entry-content .hof-summary { margin-bottom: 0; font-size: .95rem; }
}