/*
 * Shot-C static site.
 * Look follows the original WordPress/Elementor site (screenshots 2026-11-02):
 * black/white sections with slanted dividers, yellow accents, green button text,
 * Raleway (headings, text) and Roboto (menu, small text), both self-hosted.
 */
@font-face {
  font-family: "Raleway"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("../fonts/raleway-1ptug8zys_skggpnycmit5lu.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Raleway"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("../fonts/raleway-1ptug8zys_skggpnyc0itw.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Roboto"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("../fonts/roboto-kfo7cnqeu92fr1me7ksn66agldtyluama3kubgee.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Roboto"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("../fonts/roboto-kfo7cnqeu92fr1me7ksn66agldtyluama3yuba.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --black: #000;
  --white: #fff;
  --grey-bg: #efefef;
  --yellow: #e8d000;      /* header line, event titles, footer */
  --yellow-2: #eeee22;    /* member names, bio subtitle */
  --green: #1db954;       /* button text, list icons */
  --text: #020101;
  --muted: #c3c3c3;
  --line: #e9e9e9;
  --gutter: 16px;
  --header-h: 76px;
  --raleway: "Raleway", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --roboto: "Roboto", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0; background: var(--black); color: var(--text);
  font-family: var(--roboto); font-size: 1rem; line-height: 1.68;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-underline-offset: 0.18em; }
:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; }
h1, h2, h3, h4 { margin: 0 0 0.5em; line-height: 1.2; font-family: var(--raleway); }
p { margin: 0 0 1em; }
ul, ol { margin: 0; padding: 0; list-style: none; }
.container { width: 100%; max-width: 1170px; margin: 0 auto; padding: 0 var(--gutter); }

.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: var(--gutter); top: -100px; z-index: 100;
  background: var(--yellow); color: var(--black); padding: 0.6em 1em;
}
.skip-link:focus { top: 8px; }

/* ---------- type scale (original: 64 / 40 / 32 px on desktop) ---------- */
.title-xl {
  font-family: var(--raleway); font-weight: 900; text-transform: uppercase;
  font-size: clamp(2rem, 1.2rem + 3.6vw, 4rem); line-height: 1.15; margin: 0 0 0.4em;
}
.title-m {
  font-family: var(--raleway); font-weight: 700; text-transform: uppercase;
  font-size: clamp(1.35rem, 1rem + 1.6vw, 2.5rem); line-height: 1.2;
}
.text-l { font-family: var(--raleway); font-weight: 400; font-size: clamp(1.15rem, 0.9rem + 1.1vw, 2rem); line-height: 1.05; }
.text-muted { color: var(--muted); }

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--black); border-bottom: 3px solid var(--yellow);
}
.header-inner { display: flex; align-items: center; justify-content: space-between; min-height: var(--header-h); gap: 16px; }
.logo { display: inline-flex; align-items: center; padding: 10px 0; }
.logo img { height: 76px; width: auto; }

.site-nav ul { display: flex; flex-wrap: wrap; }
.site-nav a {
  display: block; padding: 0.5em 14px; color: var(--white); text-decoration: none;
  font-family: var(--roboto); font-weight: 500; font-size: 18px;
}
.site-nav a:hover { color: var(--yellow); }

.nav-toggle { display: none; }

@media (max-width: 1024px) {
  :root { --header-h: 72px; }
  .logo img { height: 50px; }
  .js .nav-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; padding: 0; background: transparent; border: 0; cursor: pointer; color: var(--white);
  }
  .nav-toggle-bars, .nav-toggle-bars::before, .nav-toggle-bars::after {
    display: block; width: 18px; height: 2px; background: currentColor; position: relative; content: "";
  }
  .nav-toggle-bars::before { position: absolute; top: -6px; }
  .nav-toggle-bars::after { position: absolute; top: 6px; width: 12px; }
  .js .site-nav {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    background: var(--black); border-bottom: 3px solid var(--yellow); padding: 8px var(--gutter) 16px;
  }
  .js .site-nav.is-open { display: block; }
  .js .site-nav ul { flex-direction: column; }
  .js .site-nav a { padding: 0.7em 0; }
}

/* ---------- hero ---------- */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  height: clamp(380px, 56vw, 85vh); display: flex; align-items: flex-end; justify-content: center;
  background: var(--black);
}
.hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 38%; z-index: -1; }
.hero-text { text-align: center; padding: 0 var(--gutter) clamp(30px, 6vw, 80px); color: var(--white); }
.hero h1 {
  font-weight: 900; text-transform: uppercase; margin: 0; line-height: 1;
  font-size: clamp(2.6rem, 1.2rem + 6vw, 6rem); text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}
.hero-sub {
  font-family: var(--raleway); font-weight: 700; text-transform: uppercase; margin: 0.25em 0 0 clamp(2rem, 14vw, 13rem);
  font-size: clamp(1rem, 0.6rem + 2vw, 2.5rem); line-height: 1.2; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

/* ---------- sections and slanted dividers ---------- */
section[id] { scroll-margin-top: calc(var(--header-h) + 3px); }
.section-events { background: var(--white); padding-bottom: clamp(48px, 6vw, 96px); }
.band-dark { background: var(--black); color: var(--white); }
.band-slant-down {
  /* black area under a slanted edge (white triangle top right), like the original divider */
  background: var(--black); clip-path: polygon(0 0, 100% 46%, 100% 100%, 0 100%);
  padding-top: clamp(80px, 16vw, 200px); padding-bottom: clamp(20px, 3vw, 40px);
  margin-top: 20px;
}
.section-light { background: var(--white); color: var(--black); position: relative; }
.section-dark { background: var(--black); color: var(--white); padding: clamp(48px, 8vw, 120px) 0 clamp(32px, 4vw, 48px); }
.section-grey { background: var(--grey-bg); color: var(--text); padding: clamp(40px, 5vw, 64px) 0 clamp(32px, 4vw, 48px); }
.slant-top { height: clamp(48px, 20vw, 250px); background: var(--black); clip-path: polygon(0 0, 100% 0, 100% 100%, 0 6%); }
#recordings .container { padding-top: 16px; padding-bottom: 32px; }

/* ---------- buttons and lists ---------- */
.button {
  display: inline-flex; align-items: center; gap: 0.9em;
  padding: 15px 40px; border-radius: 50px; background: var(--black); color: var(--green);
  font-family: var(--raleway); font-weight: 600; font-size: 16px; line-height: 1.3; text-transform: uppercase; text-decoration: none;
  transition: transform 0.15s ease;
}
.button::after {
  content: ""; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-top: 1.5px solid currentColor;
  transform: rotate(45deg); margin-left: 2px;
}
.button:hover { transform: scale(1.05); }
@media (prefers-reduced-motion: reduce) { .button { transition: none; } .button:hover { transform: none; } }
.button-noarrow::after { display: none; }

.pointer-list { padding-left: clamp(0px, 10vw, 125px); }
.pointer-list li {
  position: relative; padding-left: 54px; margin-bottom: 18px;
  font-family: var(--raleway); font-size: clamp(1.15rem, 0.9rem + 1.1vw, 2rem); line-height: 1;
}
.pointer-list li::before {
  /* green "pointing hand" marker, simplified */
  content: ""; position: absolute; left: 0; top: 0.1em; width: 25px; height: 20px; background: var(--green);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M512 199.652c0 23.625-20.65 43.826-44.8 43.826h-99.851c16.34 17.048 18.346 49.766-6.299 70.944 14.288 22.829 2.147 53.017-16.45 62.315C353.574 425.878 322.654 448 272 448c-2.746 0-13.276-.203-16-.195-61.971.168-76.894-31.065-123.731-38.315C120.596 407.683 112 397.599 112 385.786V214.261l.002-.001c.011-18.366 10.607-35.889 28.464-43.845 28.886-12.994 95.413-49.038 107.534-77.323 7.797-18.194 21.384-29.084 40-29.092 34.222-.014 57.752 35.098 44.119 66.908-3.583 8.359-8.312 16.67-14.153 24.918H467.2c23.45 0 44.8 20.543 44.8 43.826zM96 200v192c0 13.255-10.745 24-24 24H24c-13.255 0-24-10.745-24-24V200c0-13.255 10.745-24 24-24h48c13.255 0 24 10.745 24 24zM68 368c0-11.046-8.954-20-20-20s-20 8.954-20 20 8.954 20 20 20 20-8.954 20-20z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M512 199.652c0 23.625-20.65 43.826-44.8 43.826h-99.851c16.34 17.048 18.346 49.766-6.299 70.944 14.288 22.829 2.147 53.017-16.45 62.315C353.574 425.878 322.654 448 272 448c-2.746 0-13.276-.203-16-.195-61.971.168-76.894-31.065-123.731-38.315C120.596 407.683 112 397.599 112 385.786V214.261l.002-.001c.011-18.366 10.607-35.889 28.464-43.845 28.886-12.994 95.413-49.038 107.534-77.323 7.797-18.194 21.384-29.084 40-29.092 34.222-.014 57.752 35.098 44.119 66.908-3.583 8.359-8.312 16.67-14.153 24.918H467.2c23.45 0 44.8 20.543 44.8 43.826zM96 200v192c0 13.255-10.745 24-24 24H24c-13.255 0-24-10.745-24-24V200c0-13.255 10.745-24 24-24h48c13.255 0 24 10.745 24 24zM68 368c0-11.046-8.954-20-20-20s-20 8.954-20 20 8.954 20 20 20 20-8.954 20-20z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.pointer-list a { color: var(--black); text-decoration: none; }
.pointer-list a:hover { text-decoration: underline; }

/* ---------- events (white area) ---------- */
.events-wrap { padding-top: clamp(24px, 3vw, 40px); }
.events-status { font-family: var(--raleway); font-size: 1.15rem; color: var(--black); }
.events-social a { color: var(--black); }
.event-list { max-width: 1060px; margin: 0 auto; }
.event {
  display: grid; grid-template-columns: 360px 1fr; gap: 16px 24px; align-items: center;
  padding: 20px 0; border-bottom: 1px solid var(--line);
}
.event:last-child { border-bottom: 0; }
.event-date {
  /* calendar sheet like the original icon */
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 150px; height: 150px; margin: 0 auto; padding-top: 26px;
  border: 4px solid #b0b0b0; border-top-width: 10px; border-radius: 10px;
  color: #9a9a9a; font-family: var(--roboto); line-height: 1;
  transform: scale(0.98);
}
.event-date::before, .event-date::after {
  content: ""; position: absolute; top: -22px; width: 12px; height: 26px; border: 4px solid #b0b0b0; border-radius: 6px; background: var(--white);
}
.event-date::before { left: 14px; }
.event-date::after { right: 14px; }
.event-day { font-size: 44px; }
.event-month { font-size: 28px; margin-top: 4px; }
.event-body > * { margin: 0; }
.event-place {
  font-family: var(--raleway); font-weight: 300; color: var(--yellow);
  font-size: clamp(1.4rem, 1rem + 1.4vw, 2.2rem); line-height: 1.2; margin-bottom: 18px;
}
.event-meta { display: flex; flex-wrap: wrap; gap: 6px 48px; font-family: var(--roboto); font-size: 18px; color: var(--black); padding-left: 64px; }
@media (max-width: 1024px) { .event { grid-template-columns: 180px 1fr; } }
.event-meta span { display: inline-flex; align-items: center; gap: 14px; min-width: 200px; }
.event-meta span::before { content: ""; width: 20px; height: 20px; flex: none; background-position: center; background-size: contain; background-repeat: no-repeat; opacity: 0.7; }
.event-meta-date::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Crect x='1.5' y='3' width='17' height='15' rx='1' fill='none' stroke='%23555'/%3E%3Cpath d='M1.5 7h17M5 1.5v3M15 1.5v3M4 10h2M8 10h2M12 10h2M16 10h1M4 13h2M8 13h2M12 13h2M16 13h1M4 16h2M8 16h2' stroke='%23555'/%3E%3C/svg%3E"); }
.event-meta-time::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='8.5' fill='none' stroke='%23555'/%3E%3Cpath d='M10 4.5V10l-3 2' fill='none' stroke='%23555'/%3E%3C/svg%3E"); }
.event-venue, .event-note { font-family: var(--raleway); color: #484848; padding-left: 64px; margin-top: 8px !important; }
.event-link { display: inline-block; margin: 10px 0 0 64px !important; color: #9b8b00; font-weight: 600; font-family: var(--raleway); }
.event-badge {
  display: inline-block; margin-bottom: 10px !important; padding: 0.15em 0.8em; border-radius: 999px;
  font-family: var(--roboto); font-size: 0.8rem; font-weight: 500; background: var(--black); color: var(--yellow);
}
.event.is-past .event-place { color: #b7a700; }
.event.is-past .event-badge { background: #e6e6e6; color: #555; }
.events-more { margin: 40px 0 0; text-align: right; }

/* ---------- album ---------- */
.section-album .container { padding-bottom: 50px; }
.album-grid { display: grid; gap: 28px; align-items: center; }
.album-grid .text-l { margin: 0; color: var(--black); }
.button-stack { display: flex; flex-direction: column; align-items: center; gap: 20px; }

/* ---------- gallery (carousel on the original) ---------- */
.gallery {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory; background: var(--black);
  border-top: 54px solid var(--white); scrollbar-color: #444 var(--black);
}
.gallery li { flex: 0 0 33.3333%; scroll-snap-align: start; }
.gallery img { width: 100%; height: 100%; aspect-ratio: 3 / 2; object-fit: cover; }

/* ---------- bio and members ---------- */
.bio-grid { display: grid; gap: 32px; }
.bio-title { text-align: center; margin-bottom: 0.2em; }
.bio-sub { color: var(--yellow-2); text-align: center; margin-bottom: 0.6em; }
.bio-text h3 { color: var(--white); margin-top: 0.6em; }
.bio-text .text-l { margin: 0; }
.bio-photo { margin: 0; }
.rule { border: 0; border-top: 1px solid var(--white); width: 75%; margin: 0 auto 24px; }
.rule-yellow { border-top-color: var(--yellow); margin: clamp(40px, 6vw, 72px) auto 0; }
.members { display: grid; gap: 0; margin-top: 8px; }
.member { display: flex; flex-direction: column-reverse; gap: 10px; padding: 10px 0 28px; border-bottom: 1px solid var(--white); }
.member:nth-child(even) { border-bottom-color: var(--yellow); }
.member:last-child { border-bottom: 0; }
.member-text { text-align: right; }
.member h4 { color: var(--yellow-2); text-transform: uppercase; font-weight: 700; font-size: clamp(1.25rem, 0.9rem + 1.5vw, 2.5rem); line-height: 1.2; margin: 14px 0 26px; }
.member p { font-family: var(--raleway); color: var(--muted); font-size: clamp(1.15rem, 0.9rem + 1.1vw, 2rem); line-height: 1; margin: 0; }
.member img { width: 100%; filter: grayscale(1); }
.member-portrait img { width: 75%; margin: 0 auto; }

/* ---------- contact ---------- */
.contact { text-align: center; }
.contact .title-m { color: var(--black); margin: 0 0 0.6em; }
.social { display: flex; justify-content: center; gap: 36px; margin-bottom: clamp(48px, 7vw, 96px); }
.social a { display: block; transition: transform 0.15s ease; }
.social a:hover { transform: scale(1.1); }
.social img { width: 40px; height: 40px; }
.contact .button { margin-bottom: clamp(40px, 6vw, 72px); }
.contact-list { display: inline-flex; flex-direction: column; align-items: center; gap: 8px; }
.contact-list li { display: flex; align-items: center; gap: 24px; font-family: var(--raleway); font-size: clamp(1.15rem, 0.9rem + 1.1vw, 2rem); line-height: 1.2; }
.contact-list svg { flex: none; }
.contact-list a { text-decoration: none; }
.contact-list a:hover { text-decoration: underline; }

/* ---------- footer ---------- */
.site-footer { background: var(--black); color: var(--yellow); padding: 20px 0; font-size: 16px; }
.site-footer .container { padding-left: var(--gutter); }
.site-footer p { margin: 0; }

/* ---------- concerts page ---------- */
.page-head { background: var(--black); color: var(--yellow); text-align: center; padding: 28px 0 24px; }
.page-head h1 { font-family: var(--roboto); font-weight: 500; font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.2rem); margin: 0; }
.page-head p { color: var(--muted); margin: 0.4em 0 0; }
.section-page { background: var(--white); padding: 24px 0 64px; min-height: 50vh; }
.year-group { margin-top: 32px; }
.year-heading { font-family: var(--raleway); font-weight: 900; font-size: 2rem; color: var(--black); border-bottom: 3px solid var(--yellow); padding-bottom: 6px; max-width: 1060px; margin: 0 auto 8px; }
.page-404 { background: var(--white); color: var(--black); padding: 64px 0; min-height: 50vh; }
.page-404 h1 { font-weight: 900; text-transform: uppercase; }
.page-404 .events-more { text-align: left; display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- small screens ---------- */
@media (max-width: 767px) {
  .event { grid-template-columns: 110px 1fr; gap: 12px 14px; }
  .event-date { width: 100px; height: 100px; padding-top: 16px; border-width: 3px; border-top-width: 8px; }
  .event-date::before, .event-date::after { top: -16px; width: 9px; height: 18px; border-width: 3px; }
  .event-day { font-size: 32px; }
  .event-month { font-size: 20px; }
  .event-place { margin-bottom: 8px; text-align: center; }
  .event-meta, .event-venue, .event-note { padding-left: 0; font-size: 15px; gap: 4px 16px; }
  .event-meta span { min-width: 0; gap: 8px; }
  .event-meta span::before { width: 16px; height: 16px; }
  .event-link { margin-left: 0 !important; }
  .events-more { text-align: center; }
  .pointer-list li { padding-left: 42px; }
  .album-grid .text-l { text-align: left; }
  .site-footer .container { padding-left: var(--gutter); }
}

/* ---------- larger screens ---------- */
@media (min-width: 768px) {
  .album-grid { grid-template-columns: 1fr 1fr; padding-left: clamp(0px, 7vw, 98px); }
  .album-grid .text-l { max-width: 400px; }
  .bio-grid { grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
  .bio-photo { margin-top: 0; }
  .members { grid-template-columns: 1fr 1fr; gap: 20px 40px; margin-top: 44px; }
  .member, .member:nth-child(even) { flex-direction: row; align-items: flex-start; gap: 20px; padding: 0; border: 0; }
  .member-text { flex: 0 0 30%; }
  .member img { flex: 1; min-width: 0; width: 100%; }
  .member-portrait img { flex: 0 0 auto; width: 52%; margin: 0 auto; }
  .member h4 { margin-top: 0; margin-bottom: 14px; }
}

@media print {
  .site-header, .nav-toggle, .gallery, .slant-top { display: none; }
  body { background: #fff; color: #000; }
}

/* ---------- "under reconstruction" notice ---------- */
.notice { background: #fff4d6; color: #3d2e00; border-bottom: 1px solid #f0c040; font-family: var(--roboto); font-size: 14px; line-height: 1.4; }
.notice-inner { display: flex; align-items: center; gap: 10px; padding-top: 8px; padding-bottom: 8px; }
.notice-icon {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%; background: #f5a300; color: #000; font-weight: 700; font-size: 15px;
}
.notice p { margin: 0; }