/* Muscle Art, Plovdiv. The club's own room in section: white wall, the red band, black skirting, rubber floor.
   Colours: red and ultramarine are the two inks of the club's logo; white, black and grey are the room.
   Display: Dela Gothic One. Text: Sofia Sans (variable). Both self-hosted, SIL OFL. */

@font-face {
    font-family: 'Dela Gothic One';
    src: url('/fonts/dela-gothic-one.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Sofia Sans';
    src: url('/fonts/sofia-sans.woff2') format('woff2');
    font-weight: 1 1000;
    font-style: normal;
    font-display: swap;
}

:root {
    --wall: #f5f5f3;
    --paper: #ffffff;
    --mat: #e8e8e3;
    --line: #cfcfc9;
    --red: #da251d;
    --red-ink: #b91c15;
    --black: #141416;
    --rubber: #26272b;
    --blue: #232393;
    --steel: #d4d7dc;
    --steel-dark: #8d939b;
    --muted: #55575b;
    --muted-dark: #c3c5ca;
    --display: 'Dela Gothic One', 'Sofia Sans', 'Arial Black', sans-serif;
    --text: 'Sofia Sans', system-ui, 'Segoe UI', Arial, sans-serif;
    --radius: 18px;
    --pad: clamp(1.1rem, 4vw, 2.5rem);
    --lb-accent: #da251d;
}

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

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: 7rem;
}

body {
    margin: 0;
    background: var(--wall);
    color: var(--black);
    font-family: var(--text);
    font-size: 1.0625rem;
    line-height: 1.6;
    overflow-wrap: break-word;
}

img,
svg {
    max-width: 100%;
    height: auto;
    display: block;
}

h1,
h2 {
    font-family: var(--display);
    font-weight: 400;
    line-height: 1.02;
    letter-spacing: -0.01em;
    margin: 0 0 0.5em;
    hyphens: auto;
}

h1 {
    font-size: clamp(2.3rem, 10.6vw, 6.4rem);
}

h2 {
    font-size: clamp(1.55rem, 4.6vw, 2.9rem);
    line-height: 1.08;
}

h3,
h4 {
    font-family: var(--text);
    font-weight: 850;
    font-size: 1.25rem;
    line-height: 1.2;
    margin: 0 0 0.35em;
}

h4 {
    font-size: 1.1rem;
}

p {
    margin: 0 0 1em;
}

a {
    color: var(--red-ink);
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}

a:hover {
    color: var(--black);
}

:focus-visible {
    outline: 3px solid var(--blue);
    outline-offset: 3px;
    border-radius: 4px;
}

.wrap {
    width: min(100% - 2 * var(--pad), 1180px);
    margin-inline: auto;
}

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

.skip {
    position: absolute;
    left: 1rem;
    top: -4rem;
    z-index: 30;
    background: var(--black);
    color: #fff;
    padding: 0.7rem 1rem;
    border-radius: 10px;
}

.skip:focus {
    top: 1rem;
    color: #fff;
}

.small {
    font-size: 0.93rem;
    color: var(--muted);
}

small {
    font-family: var(--text);
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--muted);
    white-space: nowrap;
}

.lead {
    font-size: clamp(1.1rem, 2.2vw, 1.35rem);
    line-height: 1.45;
    max-width: 40ch;
}

.lead-small {
    font-size: 1.1rem;
    max-width: 60ch;
}

/* ---- buttons and links ---- */

.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    padding: 0.8em 1.5em;
    border: 2px solid transparent;
    border-radius: 999px;
    font: inherit;
    font-weight: 800;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s, background-color 0.15s;
}

.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 0 rgb(0 0 0 / 0.22);
}

.btn-red {
    background: var(--red);
    color: #fff;
}

.btn-red:hover {
    background: var(--red-ink);
    color: #fff;
}

.btn-white {
    background: #fff;
    color: var(--black);
    font-size: 1.15rem;
}

.btn-white:hover {
    color: var(--black);
}

.btn-line {
    border-color: #fff;
    color: #fff;
}

.btn-line:hover {
    background: #fff;
    color: var(--black);
}

.btn-ink {
    background: var(--black);
    color: #fff;
}

.btn-ink:hover {
    color: #fff;
}

.actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.9rem 1.2rem;
    margin: 1.6rem 0 0;
}

.more {
    font-weight: 800;
    color: var(--black);
    text-decoration-color: var(--red);
    text-decoration-thickness: 3px;
}

.more:hover {
    color: var(--red-ink);
}

/* ---- header ---- */

.top {
    position: sticky;
    top: 0;
    z-index: 20;
    background: rgb(245 245 243 / 0.9);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 4px solid var(--black);
}

.top-row {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    grid-template-areas: 'brand nav lang call';
    align-items: center;
    gap: 0.4rem 1.2rem;
    padding-block: 0.45rem;
}

.brand {
    grid-area: brand;
    display: block;
}

.brand img {
    width: 77px;
    height: 62px;
}

.nav {
    grid-area: nav;
    display: flex;
    justify-content: flex-end;
    gap: 0.2rem;
}

.nav a {
    padding: 0.5rem 0.75rem;
    border-radius: 999px;
    color: var(--black);
    font-weight: 750;
    text-decoration: none;
    white-space: nowrap;
}

.nav a:hover {
    background: var(--mat);
}

.nav a[aria-current='page'] {
    background: var(--black);
    color: #fff;
}

.lang {
    grid-area: lang;
    display: flex;
    border: 2px solid var(--black);
    border-radius: 999px;
    overflow: hidden;
    font-size: 0.85rem;
    font-weight: 800;
}

.lang a,
.lang span {
    padding: 0.25rem 0.6rem;
    text-decoration: none;
    color: var(--black);
}

.lang span {
    background: var(--black);
    color: #fff;
}

.lang a:hover {
    background: var(--mat);
}

.call {
    grid-area: call;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.6rem 1.05rem;
    border-radius: 999px;
    background: var(--red);
    color: #fff;
    font-weight: 850;
    text-decoration: none;
    white-space: nowrap;
}

.call:hover {
    background: var(--red-ink);
    color: #fff;
}

@media (max-width: 1020px) {
    .top-row {
        grid-template-columns: auto 1fr auto;
        grid-template-areas: 'brand lang call' 'nav nav nav';
    }

    .lang {
        justify-self: end;
    }

    .brand img {
        width: 62px;
        height: 50px;
    }

    .nav {
        justify-content: flex-start;
        overflow-x: auto;
        margin-inline: calc(-1 * var(--pad));
        padding-inline: var(--pad);
        scrollbar-width: none;
    }

    .nav::-webkit-scrollbar {
        display: none;
    }

    .nav a {
        padding: 0.35rem 0.7rem;
    }
}

@media (max-width: 400px) {
    .call {
        padding: 0.55rem 0.8rem;
        font-size: 0.95rem;
    }

    .call svg {
        display: none;
    }
}

/* ---- hero: the red wall, the barbell, then the floor ---- */

.hero {
    background: var(--red);
    color: #fff;
    padding-top: clamp(2.2rem, 6vw, 4.5rem);
    overflow: hidden;
}

.hero-kicker {
    font-weight: 750;
    margin-bottom: 0.9rem;
}

.hero h1 {
    margin-bottom: 0.45em;
}

.hero-sub {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-end;
    gap: 1.2rem 3rem;
}

.hero-sub .lead {
    max-width: 46ch;
    margin: 0;
}

.hero-sub .actions {
    margin: 0;
}

@media (min-width: 760px) {
    .hero h1 {
        font-size: clamp(2.6rem, 5.55vw, 4.75rem);
    }
}

.hero :focus-visible,
.page-hero :focus-visible,
.band-black :focus-visible,
.band-blue :focus-visible,
.floor :focus-visible,
.foot :focus-visible {
    outline-color: #fff;
}

.hero-rack {
    width: min(100% - 1rem, 1000px);
    margin: clamp(1.8rem, 4vw, 2.8rem) auto 0;
}

/* barbell: the plates slide onto the sleeves from both ends, then the collars lock */
.barbell {
    width: 100%;
    overflow: visible;
}

.bb-sleeve,
.bb-collar,
.bb-collar-pin {
    fill: #eceef0;
}

.bb-shaft {
    fill: var(--steel);
}

.bb-knurl {
    fill: var(--steel-dark);
}

.bb-stop,
.bb-hub {
    fill: #c2c6cc;
}

.bb-black {
    fill: var(--black);
}

.bb-blue {
    fill: var(--blue);
}

.bb-white {
    fill: #fff;
}

.bb-plate {
    animation: bb-load 0.55s cubic-bezier(0.2, 0.9, 0.25, 1.12) both;
}

.bb-p1 { animation-delay: 0.15s; }
.bb-p2 { animation-delay: 0.32s; }
.bb-p3 { animation-delay: 0.49s; }
.bb-p4 { animation-delay: 0.66s; }
.bb-p5 { animation-delay: 0.8s; }
.bb-p6 { animation-delay: 0.98s; }

.barbell {
    animation: bb-settle 0.45s 1.45s ease-out both;
}

@keyframes bb-load {
    from {
        transform: translateX(-300px);
        opacity: 0;
    }

    60% {
        opacity: 1;
    }
}

@keyframes bb-settle {
    0% { transform: translateY(0); }
    35% { transform: translateY(-7px); }
    100% { transform: translateY(0); }
}

.floor,
.foot {
    background-color: var(--black);
    background-image: radial-gradient(#2d2e33 1px, transparent 1.5px), radial-gradient(#3a3b41 1px, transparent 1.4px);
    background-size: 13px 13px, 19px 19px;
    background-position: 0 0, 7px 11px;
    color: #fff;
}

.floor {
    padding: clamp(1.6rem, 4vw, 2.6rem) 0;
}

.strip {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.4rem 2rem;
    margin: 0;
}

.strip dt {
    font-weight: 750;
    color: var(--muted-dark);
}

.strip dd {
    margin: 0;
    color: var(--muted-dark);
}

.strip strong {
    display: block;
    font-family: var(--display);
    font-weight: 400;
    font-size: clamp(1.4rem, 2.5vw, 1.95rem);
    line-height: 1.15;
    color: #fff;
}

@media (max-width: 760px) {
    .strip {
        grid-template-columns: 1fr;
    }
}

/* ---- bands ---- */

.band {
    padding: clamp(3.2rem, 8vw, 6.2rem) 0;
}

.band-tight {
    padding: clamp(2rem, 5vw, 3.4rem) 0;
}

.band-grey {
    background: var(--mat);
}

.band-black {
    background: var(--black);
    color: #fff;
}

.band-blue {
    background: var(--blue);
    color: #fff;
}

.band-black a,
.band-blue a {
    color: #fff;
}

.band-black a:hover,
.band-blue a:hover {
    color: #fff;
    text-decoration-color: #fff;
}

.band-black .small,
.band-black small,
.band-blue small {
    color: var(--muted-dark);
}

.band-black .btn-red:hover {
    background: #fff;
    color: var(--black);
}

.page-hero {
    background: var(--red);
    color: #fff;
    padding: clamp(2.4rem, 7vw, 5rem) 0 clamp(2rem, 5vw, 3.4rem);
    border-bottom: 16px solid var(--black);
}

.page-hero h1 {
    font-size: clamp(2rem, 9.4vw, 5rem);
}

.page-hero .lead {
    max-width: 52ch;
    margin-bottom: 0;
}

.toc {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin: 1.4rem 0 0;
}

.toc a {
    padding: 0.45rem 1rem;
    border: 2px solid #fff;
    border-radius: 999px;
    color: #fff;
    font-weight: 800;
    text-decoration: none;
}

.toc a:hover {
    background: #fff;
    color: var(--black);
}

.duo {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(1.8rem, 5vw, 4rem);
    align-items: start;
}

.duo-wide {
    grid-template-columns: 5fr 4fr;
}

.duo > * {
    min-width: 0;
}

@media (max-width: 860px) {
    .duo,
    .duo-wide {
        grid-template-columns: 1fr;
    }
}

.prose {
    max-width: 68ch;
}

.prose h3 {
    margin-top: 1.6em;
}

.prose ol {
    padding-left: 1.3em;
}

.prose li {
    margin-bottom: 0.5em;
}

.h-sub {
    margin-top: 2.2rem;
    font-size: 1.45rem;
}

.marks {
    list-style: none;
    padding: 0;
    margin: 0 0 1.4rem;
}

.marks li {
    position: relative;
    padding-left: 1.6rem;
    margin-bottom: 0.4rem;
}

.marks li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.5em;
    width: 0.8rem;
    height: 0.45rem;
    border-radius: 2px;
    background: var(--red);
}

/* ---- home: bento ---- */

.bento {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-areas:
        'big big big big big big big hall hall hall hall hall'
        'big big big big big big big spa spa spa spa spa'
        'bar bar bar bar bar bar team team team team team team';
    gap: 1.1rem;
    margin-top: 1.8rem;
}

.tile {
    display: grid;
    grid-template-columns: 42% 1fr;
    border: 4px solid var(--black);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--paper);
}

.tile img {
    width: 100%;
    height: 100%;
    min-height: 190px;
    object-fit: cover;
}

.tile-body {
    padding: 1.2rem 1.3rem 1.3rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.tile-body h3 {
    font-family: var(--display);
    font-weight: 400;
    font-size: clamp(1.2rem, 2.2vw, 1.5rem);
    line-height: 1.12;
    margin-bottom: 0.5rem;
}

.tile-body p {
    font-size: 0.98rem;
    line-height: 1.45;
}

.tile-body .more {
    margin-top: auto;
}

.tile-big { grid-area: big; grid-template-columns: 1fr; grid-template-rows: 1fr auto; }
.tile-hall { grid-area: hall; }
.tile-spa { grid-area: spa; }
.tile-bar { grid-area: bar; }
.tile-team { grid-area: team; }

.tile-big .tile-body {
    background: var(--red);
    color: #fff;
    padding: 1.5rem 1.6rem 1.7rem;
}

.tile-big .tile-body h3 {
    font-size: clamp(1.6rem, 3.4vw, 2.4rem);
}

.tile-big .tile-body p {
    font-size: 1.08rem;
    max-width: 46ch;
}

.tile-big .more,
.tile-team .more {
    color: #fff;
    text-decoration-color: #fff;
}

.tile-big .more:hover,
.tile-team .more:hover {
    color: #fff;
    text-decoration-thickness: 5px;
}

.tile-team .tile-body {
    background: var(--black);
    color: #fff;
}

@media (max-width: 980px) {
    .bento {
        grid-template-columns: 1fr 1fr;
        grid-template-areas: 'big big' 'hall spa' 'bar team';
    }

    .tile {
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr;
    }

    .tile img {
        aspect-ratio: 16 / 10;
        min-height: 0;
    }
}

@media (max-width: 620px) {
    .bento {
        grid-template-columns: 1fr;
        grid-template-areas: 'big' 'hall' 'spa' 'bar' 'team';
    }
}

/* the club's own list of what it offers, as a band of words */
.words {
    background: var(--red);
    color: #fff;
    border-block: 12px solid var(--black);
    padding: clamp(1.3rem, 3vw, 2.2rem) var(--pad);
}

.words p {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem 1.6rem;
    margin: 0;
    font-family: var(--display);
    font-size: clamp(1.05rem, 2.5vw, 1.9rem);
    line-height: 1.2;
    text-align: center;
}

.words span + span::before {
    content: '';
    display: inline-block;
    width: 0.32em;
    height: 0.9em;
    margin-right: 1.6rem;
    border-radius: 3px;
    background: var(--black);
    vertical-align: -0.08em;
}

@media (max-width: 620px) {
    .words span + span::before {
        display: none;
    }
}

/* ---- the club band ---- */

.club-row {
    display: grid;
    grid-template-columns: 5fr 7fr;
    gap: clamp(1.8rem, 5vw, 4rem);
    align-items: start;
}

.club-row > * {
    min-width: 0;
}

.wordmark {
    width: min(100%, 440px);
    margin: 0 0 1.4rem -1.2rem;
}

.club-photo img,
.find-photo img {
    width: 100%;
    border-radius: var(--radius);
}

.club-photo img {
    border: 4px solid #fff;
}

.find-photo img {
    border: 4px solid var(--black);
}

.roster-strip {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: clamp(140px, 30vw, 200px);
    gap: 0.8rem;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    list-style: none;
    margin: 0;
    padding: 0.3rem 0.3rem 1rem;
    scrollbar-color: var(--red) var(--rubber);
}

.roster-strip li {
    scroll-snap-align: start;
}

.roster-strip img,
.roster img,
.people img {
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    object-position: 50% 12%;
    border-radius: 12px;
    background: var(--rubber);
}

.roster-strip span {
    display: block;
    margin-top: 0.45rem;
    font-weight: 750;
    font-size: 0.95rem;
    line-height: 1.25;
}

@media (max-width: 900px) {
    .club-row {
        grid-template-columns: 1fr;
    }
}

/* ---- the week of the universal hall ---- */

.week {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0.6rem;
    list-style: none;
    margin: 1.8rem 0 1.2rem;
    padding: 0;
}

.week > li {
    border: 3px solid var(--black);
    border-radius: 14px;
    padding: 0.8rem 0.75rem 0.9rem;
    background: var(--paper);
    min-width: 0;
}

.week h3 {
    font-size: 1rem;
    margin-bottom: 0.7rem;
    padding-bottom: 0.5rem;
    border-bottom: 3px solid var(--red);
}

.week ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.week ul li + li {
    margin-top: 0.9rem;
}

.week time {
    display: block;
    font-family: var(--display);
    font-size: 1.35rem;
    line-height: 1.1;
}

.week span {
    display: block;
    font-size: 0.93rem;
    line-height: 1.3;
    margin: 0.2rem 0;
}

.week b {
    font-size: 0.9rem;
    color: var(--red-ink);
}

.week-off {
    border-style: dashed !important;
    border-color: var(--line) !important;
    background: transparent !important;
    color: var(--muted);
}

.week-off h3 {
    border-bottom-color: var(--line);
}

.week-off p {
    margin: 0;
    font-size: 0.9rem;
}

.week-note {
    max-width: 70ch;
}

@media (max-width: 1080px) {
    .week {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 560px) {
    .week {
        grid-template-columns: 1fr;
    }

    .week > li {
        display: grid;
        grid-template-columns: 7.2rem 1fr;
        gap: 0.8rem;
        align-items: start;
    }

    .week h3 {
        border-bottom: 0;
        margin: 0;
        padding: 0;
    }

    .week ul li {
        display: grid;
        grid-template-columns: 4.2rem 1fr;
        column-gap: 0.5rem;
    }

    .week time {
        font-size: 1.1rem;
        grid-row: span 2;
    }

    .week span {
        margin: 0;
    }
}

/* ---- large figures (only numbers the club states) ---- */

.figures {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.6rem 2rem;
    margin: 1.8rem 0 1.4rem;
}

.figures div {
    display: flex;
    flex-direction: column-reverse;
    justify-content: flex-end;
    border-top: 5px solid currentColor;
    padding-top: 0.8rem;
}

.figures dd {
    margin: 0;
    font-family: var(--display);
    font-size: clamp(2rem, 5.4vw, 3.9rem);
    line-height: 1.05;
}

.figures dt {
    margin-top: 0.45rem;
    font-weight: 600;
    max-width: 24ch;
}

.figures-ink dd {
    color: var(--red-ink);
    font-size: clamp(1.8rem, 4.4vw, 2.9rem);
}

.figures-ink {
    grid-template-columns: repeat(2, 1fr);
}

.figures-wide {
    grid-template-columns: repeat(3, 1fr);
    max-width: 920px;
}

.figures-note {
    max-width: 70ch;
    margin: 0;
}

@media (max-width: 700px) {
    .figures,
    .figures-wide {
        grid-template-columns: 1fr;
    }
}

/* ---- where to find us ---- */

.find {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(1.8rem, 5vw, 4rem);
    align-items: center;
}

.find > * {
    min-width: 0;
}

@media (max-width: 860px) {
    .find {
        grid-template-columns: 1fr;
    }
}

.contact-list {
    margin: 1.4rem 0;
}

.contact-list div {
    display: grid;
    grid-template-columns: 9.5rem 1fr;
    gap: 0.3rem 1rem;
    padding: 0.8rem 0;
    border-top: 2px solid var(--line);
}

.contact-list dt {
    font-weight: 800;
}

.contact-list dd {
    margin: 0;
}

@media (max-width: 480px) {
    .contact-list div {
        grid-template-columns: 1fr;
    }
}

.big-phone-line {
    display: flex;
    flex-wrap: wrap;
    gap: 0.2rem 2rem;
    margin-bottom: 0.6rem;
}

.big-phone {
    font-family: var(--display);
    font-size: clamp(1.55rem, 6vw, 2.5rem);
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
}

.big-phone:hover {
    text-decoration: underline;
}

.contact-list + .find-photo {
    display: block;
    margin-top: 1.6rem;
}

/* ---- the dumbbell rack of the fitness page ---- */

.rack-band {
    background: var(--paper);
    border-bottom: 2px solid var(--line);
}

.rack-scroll {
    overflow: hidden;
}

.rack {
    width: 100%;
}

.rk-head {
    fill: var(--black);
}

.rk-handle {
    fill: var(--steel-dark);
}

.rk-rail,
.rk-leg {
    fill: var(--blue);
}

.rk-d {
    animation: rk-drop 0.4s cubic-bezier(0.3, 1.4, 0.5, 1) both;
}

.rk-d1 { animation-delay: 0.05s; }
.rk-d2 { animation-delay: 0.12s; }
.rk-d3 { animation-delay: 0.19s; }
.rk-d4 { animation-delay: 0.26s; }
.rk-d5 { animation-delay: 0.33s; }
.rk-d6 { animation-delay: 0.4s; }
.rk-d7 { animation-delay: 0.47s; }
.rk-d8 { animation-delay: 0.54s; }
.rk-d9 { animation-delay: 0.61s; }
.rk-d10 { animation-delay: 0.68s; }
.rk-d11 { animation-delay: 0.75s; }
.rk-d12 { animation-delay: 0.82s; }

@keyframes rk-drop {
    from {
        transform: translateY(-40px);
        opacity: 0;
    }
}

.rack-ends {
    display: flex;
    justify-content: space-between;
    margin: 0.5rem 0 0;
    font-family: var(--display);
    font-size: clamp(1.3rem, 4vw, 2.4rem);
    line-height: 1.1;
}

.rack-ends span:last-child {
    color: var(--red-ink);
}

.rack-cap {
    margin: 0.3rem 0 0;
    color: var(--muted);
}

/* ---- lists of things: equipment, classes ---- */

.spec {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.6rem 2rem;
    list-style: none;
    margin: 1.8rem 0;
    padding: 0;
}

.spec li {
    border-top: 6px solid var(--black);
    padding-top: 0.9rem;
}

.spec p {
    margin: 0;
}

.spec-dark li {
    border-top-color: var(--red);
}

.spec .spec-who {
    margin-top: 0.6rem;
    font-weight: 700;
    color: var(--muted-dark);
}

/* ---- photos ---- */

.shots {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 0.7rem;
    list-style: none;
    margin: 1.6rem 0 0;
    padding: 0;
}

.shots a,
.people a,
.roster a,
.roster-strip a,
.founder-photos a,
.doc a,
.club-photo,
.find-photo {
    display: block;
    overflow: hidden;
    border-radius: 12px;
}

.shots img {
    width: 100%;
    height: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    transition: transform 0.25s;
}

.shots a:hover img,
.roster a:hover img,
.roster-strip a:hover img,
.people a:hover img {
    transform: scale(1.04);
}

.roster img,
.roster-strip img,
.people img {
    transition: transform 0.25s;
}

@media (min-width: 760px) {
    .shots-mosaic li:first-child {
        grid-column: span 2;
        grid-row: span 2;
    }
}

.shots-2 {
    grid-template-columns: 1fr 1fr;
    margin-top: 0;
}

.shots-3 {
    grid-template-columns: 1fr 1fr;
    margin-top: 0;
}

.shots-3 li:last-child {
    grid-column: span 2;
}

.shots-1 {
    grid-template-columns: 1fr;
    margin-top: 0;
}

@media (max-width: 480px) {
    .shots:not(.shots-1) {
        grid-template-columns: 1fr 1fr;
    }
}

/* ---- people ---- */

.founder {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: clamp(1.4rem, 4vw, 3rem);
    align-items: center;
    margin: 1.8rem 0 2.6rem;
    padding: clamp(1rem, 3vw, 1.8rem);
    border: 4px solid var(--black);
    border-radius: var(--radius);
    background: var(--paper);
}

.founder-photos {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.7rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.founder-photos img {
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    object-position: 50% 15%;
}

.founder h3 {
    font-family: var(--display);
    font-weight: 400;
    font-size: clamp(1.5rem, 3.6vw, 2.3rem);
}

.role {
    font-weight: 800;
    color: var(--red-ink);
}

@media (max-width: 760px) {
    .founder {
        grid-template-columns: 1fr;
    }
}

.people {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 2rem 1.2rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.people li {
    display: grid;
    grid-template-columns: 1fr;
    align-content: start;
}

.people li > a {
    grid-area: 1 / 1;
}

.people .people-extra {
    align-self: end;
    justify-self: end;
    width: 34%;
    margin: 0 0.5rem 0.5rem 0;
    border: 3px solid #fff;
    border-radius: 10px;
    z-index: 1;
}

.people h3 {
    margin-top: 0.8rem;
}

.people p {
    margin: 0;
    font-size: 0.98rem;
    line-height: 1.45;
}

.roster {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(165px, 1fr));
    gap: 1.8rem 1rem;
    list-style: none;
    margin: 1.8rem 0 0;
    padding: 0;
}

.roster li {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: 0.4rem;
}

.roster li > a {
    flex: 0 0 100%;
}

.roster li > .roster-extra {
    flex: 0 0 calc((100% - 1.6rem) / 5);
    border-radius: 8px;
}

.roster-extra img {
    aspect-ratio: 1;
    border-radius: 8px;
}

.roster h3 {
    flex: 0 0 100%;
    margin: 0.3rem 0 0;
    font-size: 1.05rem;
}

.roster-team {
    grid-column: span 2;
}

.roster-team img {
    aspect-ratio: 3 / 2;
    object-position: 50% 50%;
}

@media (max-width: 420px) {
    .roster {
        grid-template-columns: 1fr 1fr;
    }
}

/* ---- documents: shown unchanged, on white ---- */

.docs {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.6rem;
    list-style: none;
    margin: 1.8rem 0 0;
    padding: 0;
}

.doc {
    margin: 0;
}

.doc a {
    border: 4px solid var(--black);
    background: #fff;
}

.doc img {
    width: 100%;
}

.doc figcaption {
    margin-top: 0.7rem;
    font-size: 0.95rem;
    line-height: 1.45;
}

.tt-doc {
    margin-top: 2.4rem;
    grid-template-columns: minmax(0, 300px) 1fr;
    align-items: center;
}

@media (max-width: 860px) {
    .tt-doc {
        grid-template-columns: 1fr;
    }

    .tt-doc .doc {
        max-width: 320px;
    }
}

/* ---- prices ---- */

.price-list {
    margin: 1.2rem 0;
}

.price-list div {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    padding: 0.75rem 0;
    border-bottom: 2px solid var(--line);
}

.band-black .price-list div {
    border-bottom-color: #46474d;
}

.price-list dt {
    font-weight: 600;
}

.price-list dd {
    margin: 0;
    font-family: var(--display);
    font-size: 1.25rem;
    white-space: nowrap;
    text-align: right;
}

.price-list-big dd {
    font-size: clamp(1.6rem, 4.6vw, 2.4rem);
    color: var(--red-ink);
}

@media (min-width: 860px) {
    .price-list-cols {
        columns: 2;
        column-gap: 3.5rem;
    }

    .price-list-cols div {
        break-inside: avoid;
    }
}

@media (max-width: 480px) {
    .price-list dd small {
        display: block;
    }
}

.price-table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.2rem 0;
}

.price-table th,
.price-table td {
    padding: 0.75rem 0.6rem;
    border-bottom: 2px solid var(--line);
    text-align: right;
    vertical-align: bottom;
}

.price-table th:first-child {
    text-align: left;
    padding-left: 0;
}

.price-table thead th {
    font-size: 0.9rem;
    font-weight: 800;
    border-bottom: 4px solid var(--black);
}

.price-table tbody th {
    font-weight: 600;
}

.price-table td {
    font-family: var(--display);
    font-size: clamp(1rem, 3.6vw, 1.25rem);
    white-space: nowrap;
}

/* ---- contact form ---- */

.form-card {
    padding: clamp(1.2rem, 3.5vw, 2rem);
    border: 4px solid var(--black);
    border-radius: var(--radius);
    background: var(--paper);
}

.form-card h2 {
    font-size: clamp(1.4rem, 3.4vw, 2rem);
}

.contact-form > div {
    margin-bottom: 1rem;
}

.contact-form label {
    display: block;
    margin-bottom: 0.3rem;
    font-weight: 800;
}

.contact-form input,
.contact-form textarea {
    width: 100%;
    padding: 0.7rem 0.85rem;
    border: 2px solid var(--black);
    border-radius: 10px;
    background: var(--wall);
    color: var(--black);
    font: inherit;
}

.contact-form textarea {
    resize: vertical;
}

.contact-form ::placeholder {
    color: var(--muted);
    opacity: 1;
}

.contact-form ul {
    margin: 0 0 0.3rem;
    padding: 0;
    list-style: none;
    color: var(--red-ink);
    font-weight: 700;
}

.form-hint {
    margin: 0.9rem 0 0;
    font-size: 0.9rem;
    color: var(--muted);
}

.contact-sent {
    margin-bottom: 1.2rem;
    padding: 1rem 1.2rem;
    border: 3px solid var(--blue);
    border-radius: 12px;
    background: #ececfa;
}

.contact-sent strong {
    display: block;
}

/* ---- footer ---- */

.foot {
    padding: clamp(2.6rem, 6vw, 4.4rem) 0 1.6rem;
    border-top: 16px solid var(--red);
}

.foot a {
    color: #fff;
}

.foot a:hover {
    color: #fff;
    text-decoration-color: var(--red);
}

.foot-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: 2rem 2.4rem;
}

.foot-logo {
    width: 150px;
    margin-bottom: 1rem;
}

.foot-name {
    font-weight: 850;
    margin-bottom: 0.4rem;
}

.foot-brand p:last-child {
    color: var(--muted-dark);
    max-width: 34ch;
}

.foot h2 {
    font-family: var(--text);
    font-weight: 850;
    font-size: 1rem;
    letter-spacing: 0;
    margin: 0 0 0.5rem;
    color: var(--muted-dark);
}

.foot address {
    font-style: normal;
    margin-bottom: 1.3rem;
}

.foot-phone {
    font-family: var(--display);
    font-size: 1.2rem;
    text-decoration: none;
    white-space: nowrap;
}

.foot-links {
    list-style: none;
    margin: 0;
    padding: 0;
}

.foot-links li {
    margin-bottom: 0.3rem;
}

.foot-bottom {
    margin-top: 2.4rem;
    padding-top: 1.2rem;
    border-top: 2px solid #3d3e44;
    font-size: 0.9rem;
    color: var(--muted-dark);
}

.foot-bottom p {
    margin: 0;
}

@media (max-width: 900px) {
    .foot-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 520px) {
    .foot-grid {
        grid-template-columns: 1fr;
    }
}

/* ---- 404 ---- */

.not-found {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 2rem var(--pad);
    background: var(--red);
    color: #fff;
    border-bottom: 18px solid var(--black);
}

.not-found > div {
    max-width: 620px;
}

.not-found img {
    width: 184px;
    margin-bottom: 1.6rem;
}

.not-found h1 {
    font-size: clamp(2rem, 8vw, 3.6rem);
}

.not-found h2 {
    margin-top: 2.4rem;
    font-size: 1.5rem;
}

.not-found a {
    color: #fff;
}

.not-found :focus-visible {
    outline-color: #fff;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation: none !important;
        transition: none !important;
    }

    html {
        scroll-behavior: auto;
    }
}

/* ---- lightbox: /js/lightbox.js opens a linked image enlarged over the page, in a <dialog> ----
   Paste this block into the site's css/site.css. The overlay is dark in every theme and brings its own
   colours and box sizing, so it does not depend on the rest of the stylesheet. To recolour it to the
   site, set these on .lightbox (or on :root): --lb-bg, --lb-text, --lb-accent (focus ring),
   --lb-accent-soft (hover). */

[data-lightbox] {
    cursor: zoom-in;
}

.lightbox,
.lightbox * {
    box-sizing: border-box;
}

html:has(.lightbox[open]) {
    overflow: hidden;
    scrollbar-gutter: stable;
}

.lightbox {
    position: fixed;
    inset: 0;
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: none;
    margin: 0;
    padding: 68px 12px 14px;
    border: 0;
    background: var(--lb-bg, rgba(12, 14, 16, 0.95));
    color: var(--lb-text, #f2f2f2);
    color-scheme: dark;
    overscroll-behavior: contain;
}

.lightbox[open] {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    gap: 12px;
}

.lightbox::backdrop {
    background: none;
}

.lightbox-stage {
    display: grid;
    place-items: center;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}

.lightbox-stage img {
    display: block;
    max-width: none;
    border-radius: 4px;
    background: #fff;
}

.lightbox-caption {
    display: grid;
    place-items: center;
    min-height: 44px;
    max-width: none;
    margin: 0;
    padding: 0 56px;
    color: var(--lb-text, #f2f2f2);
    font-size: 0.92rem;
    line-height: 1.35;
    text-align: center;
}

.lightbox-button {
    position: absolute;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / 20px no-repeat;
    cursor: pointer;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

.lightbox-button:hover {
    border-color: #ffffff;
    background-color: var(--lb-accent-soft, rgba(255, 255, 255, 0.16));
}

.lightbox-button:focus-visible {
    outline: 3px solid var(--lb-accent, #ffffff);
    outline-offset: 3px;
    border-radius: 50%;
}

.lightbox-button[hidden] {
    display: none;
}

.lightbox-close {
    top: 12px;
    right: 12px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E");
}

.lightbox-prev,
.lightbox-next {
    bottom: 14px;
}

.lightbox-prev {
    left: 12px;
    rotate: 180deg;
}

.lightbox-next {
    right: 12px;
}

@media (min-width: 760px) {
    .lightbox {
        padding: 24px 84px 18px;
    }

    .lightbox-caption {
        padding: 0;
    }

    .lightbox-prev,
    .lightbox-next {
        top: calc(50% - 22px);
        bottom: auto;
    }

    .lightbox-prev {
        left: 20px;
    }

    .lightbox-next,
    .lightbox-close {
        right: 20px;
    }

    .lightbox-close {
        top: 20px;
    }
}

@media (prefers-reduced-motion: no-preference) {
    .lightbox[open] {
        animation: lightbox-in 0.2s ease;
    }
}

@keyframes lightbox-in {
    from {
        opacity: 0;
    }
}