/* The Honours Board.
 *
 * Every bowls clubhouse has one on the wall: a dark varnished board with the
 * year and the champions engraved in gilt. This page was called "Honours Board"
 * and rendered as an HTML table with a dark header row. Now it is the board.
 *
 * Flat colour and type only — no wood grain, no texture, no gradient. The
 * restraint is what makes it read as engraved rather than as a skin. Brass on
 * --board is 6.1:1, so the caps carry AA at body size.
 */
.board-page-head { margin: 2rem 0 1.25rem; }
.board-page-head .overline { margin-bottom: .5rem; }
/* .page-title is capped at 2.6rem site-wide to protect the 19 pages that wear
   it untouched; this one was designed against the taller scale. */
.board-page-head .page-title { margin: 0; font-size: clamp(2.2rem, 5vw, 3.6rem); }

.board {
    background: var(--board);
    border-radius: var(--radius);
    padding: 2rem 2rem 2.5rem;
    margin: 1.5rem 0;
    box-shadow: var(--shadow);
}

/* The year sits on its own rule, which runs out to the right edge — the way a
   board is ruled off between seasons. Flex, not a background trick. */
.board-year {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(2.6rem, 7vw, 4.5rem);
    font-weight: 400;
    line-height: 1;
    color: var(--brass);
    font-variant-numeric: tabular-nums;
}
.board-list + .board-year { margin-top: 3rem; }
/* ::after rather than an <hr>: an <h2> takes phrasing content only. */
.board-year::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--brass);
}

.board-list {
    list-style: none;
    margin: 1.75rem 0 0;
    padding: 0;
}
.board-entry + .board-entry {
    margin-top: 1.4rem;
    padding-top: 1.4rem;
    border-top: 1px solid var(--brass-dim);
}

/* The competition, as the engraved plate above the name. */
.board-comp {
    display: block;
    margin-bottom: .35rem;
    color: var(--brass);
}
a.board-comp { text-decoration: underline; text-underline-offset: .25em; }
a.board-comp:hover { color: var(--brass-light); }

.board-name {
    font-family: var(--font-display);
    font-size: 1.5rem;
    line-height: 1.25;
    color: var(--cream);
}
.board-sub {
    margin-top: .25rem;
    font-size: .9rem;
    line-height: 1.5;
    color: rgba(var(--cream-rgb), .65);
}

/* The brass focus ring already reads on this ground (see :focus-visible in
   styles.css); it only needs the offset opening up so it clears the letterforms. */
.board a:focus-visible { outline-offset: 3px; }

@media (max-width: 560px) {
    .board { padding: 1.5rem 1.25rem 2rem; }
    .board-year { gap: .9rem; }
}

/* Printed, this goes on the clubhouse noticeboard, so it inverts completely:
   brass and cream both become black, and the ground becomes paper. */
@media print {
    /* .page-title is blackened by the shared print block in styles.css; the
       overline sets its own colour and is not. */
    .board-page-head .overline { color: #000; }
    .board-page-head { margin: 0 0 .75rem; }

    .board {
        background: none;
        box-shadow: none;
        padding: 0;
        margin: 0 0 1rem;
    }
    .board-year { color: #000; font-size: 2.2rem; }
    .board-year::after { background: #000; }
    .board-comp,
    a.board-comp { color: #000; text-decoration: none; }
    .board-name { color: #000; font-size: 1.15rem; }
    .board-sub { color: #333; }
    .board-entry + .board-entry { border-top-color: #999; }
    /* Keep a champion's whole entry on one page. */
    .board-entry { break-inside: avoid; page-break-inside: avoid; }
}