/* The club look: everything here is scoped to .site[data-look="club"]. Appended after base.css (bun run --filter @platform/sections css).

   A club's site, made of what every club has, whatever it does: the
   pennant with its initials in the club colour, the noticeboard in the
   clubhouse (cork in a wooden frame, notices on card and coloured paper,
   felt-pen titles, pins), the weekly schedule taped to the wall, the
   guestbook and the membership card. No stock photos: until the club
   uploads its own, the artefacts carry its facts. The club colour
   (--primary) fills the pennant, the pins and the buttons; text on it is
   always --on-primary. Cork stays on the board; the wall is a cool grey. */

.site[data-look="club"] {
  --c-wall: var(--bg);
  --c-wall-2: var(--surface);
  --c-ink: var(--text);
  --c-muted: var(--muted);
  --c-rule: var(--border);
  --c-shadow: 0 1px 1px rgb(30 20 10 / 0.18), 0 10px 16px -10px rgb(30 20 10 / 0.55);
  --fs-base: 1.125rem;
  --fs-lead: clamp(1.15rem, 1.04rem + 0.45vw, 1.35rem);
  --fs-h2: clamp(2.2rem, 1.35rem + 3.1vw, 4.2rem);
  --section-pad: clamp(4rem, 9vw, 7.5rem);
  --wrap: 76rem;
  background: var(--c-wall);
}
@media (max-width: 40rem) { .site[data-look="club"] { --fs-base: 1.0625rem; } }
.site[data-look="club"] main > .s + .s { border-top: 0; }
.site[data-look="club"] :is(h1, h2) { line-height: 1.02; text-wrap: balance; }
.site[data-look="club"] h2 { font-size: var(--fs-h2); margin: 0 0 0.45em; }
.site[data-look="club"] :is(p, li, dd, figcaption) { hyphens: auto; }

/* Small labels: the printed captions of the club's own paperwork. */
.site[data-look="club"] :is(.c-k, .c-facts dt, .c-card-label, .c-card-field > span:first-child, .c-sheet-what) {
  font-family: var(--font-body); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
}

/* --- Buttons: the club colour, a little rounded like a printed sticker; a
   pin-press on hover. ----------------------------------------------------- */
.site[data-look="club"] .btn { border-radius: 6px; min-height: 3.2rem; padding-inline: 1.5rem; font-weight: 700; transition: transform 140ms ease, box-shadow 140ms ease; }
.site[data-look="club"] .btn-primary { box-shadow: 0 3px 0 rgb(0 0 0 / 0.28); }
.site[data-look="club"] .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 5px 0 rgb(0 0 0 / 0.28); text-decoration: none; }
.site[data-look="club"] .btn-primary:active { transform: translateY(2px); box-shadow: 0 1px 0 rgb(0 0 0 / 0.28); }
.site[data-look="club"] .cta-alt { text-underline-offset: 0.25em; }
.site[data-look="club"] :is(a, button, .btn, input, textarea):focus-visible { outline: 3px solid var(--felt-pen); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .site[data-look="club"] .btn { transition: none; } .site[data-look="club"] .btn:hover { transform: none; } }

/* --- Header: the club's scarf stripes along the top, the name in slab. --- */
.site[data-look="club"] .site-header { background: var(--c-wall); border-top: 6px solid var(--primary); box-shadow: inset 0 3px 0 rgb(255 255 255 / 0.35); border-bottom: 1px solid var(--c-rule); }
.site[data-look="club"] .brand { font-family: var(--font-heading); font-weight: 400; font-size: clamp(1.15rem, 1rem + 0.5vw, 1.45rem); letter-spacing: 0; }
.site[data-look="club"] .site-header nav a { font-weight: 600; }
.site[data-look="club"] .site-header .btn { min-height: 2.75rem; padding-inline: 1.1rem; font-size: 0.95rem; }

/* --- Hero: the club's name and its pennant. ------------------------------ */
.site[data-look="club"] .c-hero { padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(3rem, 7vw, 5.5rem); overflow: hidden; }
@media (min-width: 52rem) { .site[data-look="club"] .c-hero.no-photo .c-hero-grid { min-height: min(40rem, calc(100svh - 9rem)); } }
.site[data-look="club"] .c-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; }
@media (min-width: 52rem) {
  .site[data-look="club"] .c-hero-grid { grid-template-columns: minmax(0, 1.5fr) minmax(16rem, 1fr); }
  .site[data-look="club"] .c-hero.has-photo .c-hero-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
}
.site[data-look="club"] .c-name {
  font-family: var(--font-heading); font-weight: 400; line-height: 0.95; letter-spacing: -0.01em; margin: 0 0 0.9rem;
  overflow-wrap: break-word; hyphens: manual; text-wrap: balance; display: flex; align-items: flex-start; gap: 0.25em;
}
.site[data-look="club"] .c-name-l { font-size: clamp(3.2rem, 1.2rem + 7.6vw, 7.6rem); }
.site[data-look="club"] .c-name-m { font-size: clamp(2.6rem, 1.2rem + 5vw, 5.6rem); }
.site[data-look="club"] .c-name-s { font-size: clamp(2rem, 1.1rem + 3.2vw, 3.9rem); line-height: 1.02; }
.site[data-look="club"] .c-name > span { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 30rem) { .site[data-look="club"] .c-name-s { font-size: 1.85rem; } }
/* Beside the club's own photo the name has half the width: a size down. */
@media (min-width: 52rem) {
  .site[data-look="club"] .c-hero.has-photo .c-name-l { font-size: clamp(2.8rem, 0.8rem + 4.6vw, 5.4rem); }
  .site[data-look="club"] .c-hero.has-photo .c-name-m { font-size: clamp(2.3rem, 0.9rem + 3.2vw, 4.1rem); }
  .site[data-look="club"] .c-hero.has-photo .c-name-s { font-size: clamp(1.8rem, 0.9rem + 2.1vw, 3rem); }
}
.site[data-look="club"] .c-facts-line { margin: 0 0 clamp(1.5rem, 3vw, 2.25rem); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; font-size: 0.85rem; color: var(--c-muted); display: flex; align-items: center; gap: 0.75rem; }
.site[data-look="club"] .c-facts-line::before { content: ''; width: 2.5rem; height: 4px; background: var(--primary); border-radius: 2px; flex: none; }
.site[data-look="club"] .c-headline { font-family: var(--font-body); font-weight: 700; font-size: clamp(1.5rem, 1.15rem + 1.3vw, 2.3rem); line-height: 1.12; letter-spacing: -0.015em; text-transform: none; max-width: 22ch; margin: 0 0 0.6em; }
.site[data-look="club"] .c-lead { font-size: var(--fs-lead); line-height: 1.5; max-width: 36rem; margin: 0; color: var(--c-muted); hyphens: manual; }
.site[data-look="club"] .c-hero .actions { margin-top: clamp(1.5rem, 3vw, 2.25rem); }

/* The pennant: felt in the club colour on a rod, hung from a nail. */
.site[data-look="club"] .c-hero-art { display: flex; flex-direction: column; align-items: center; align-self: stretch; }
/* The picture rail of the clubhouse wall the pennant hangs from. */
.site[data-look="club"] .c-hero.no-photo .c-hero-art::before {
  content: ''; align-self: stretch; height: 14px; margin-inline: -2rem -100vw; border-radius: 3px 0 0 3px;
  background: linear-gradient(to bottom, #8a6040 0 30%, var(--frame) 30% 78%, #3f2a19 78%);
  box-shadow: 0 6px 8px -4px rgb(30 20 10 / 0.35);
}
.site[data-look="club"] .c-hero.no-photo .c-hero-art .c-pennant { margin-top: -0.5rem; }
.site[data-look="club"] .c-pennant { width: min(100%, 23rem); height: auto; overflow: visible; filter: drop-shadow(0 18px 18px rgb(20 20 20 / 0.22)); transform-origin: 50% 2%; }
.site[data-look="club"] .c-pn-felt { fill: var(--primary); }
.site[data-look="club"] .c-pn-shade { fill: rgb(0 0 0 / 0.18); }
.site[data-look="club"] .c-pn-stripe { fill: var(--on-primary); opacity: 0.85; }
.site[data-look="club"] .c-pn-line { fill: none; stroke: var(--on-primary); stroke-width: 2; stroke-dasharray: 5 4; opacity: 0.6; }
.site[data-look="club"] .c-pn-rod { fill: var(--frame); }
.site[data-look="club"] .c-pn-cord { fill: none; stroke: #3b2a1c; stroke-width: 2; }
.site[data-look="club"] .c-pn-nail { fill: #6f6f6a; }
.site[data-look="club"] .c-pn-tassel { fill: none; stroke: #c9a24a; stroke-width: 2.5; stroke-linecap: round; }
.site[data-look="club"] .c-pn-initials { font-family: var(--font-heading); fill: var(--on-primary); letter-spacing: 0.02em; }
.site[data-look="club"] .c-pn-small { font-family: var(--font-body); font-weight: 700; fill: var(--on-primary); letter-spacing: 0.18em; }
@media (prefers-reduced-motion: no-preference) {
  .site[data-look="club"] .c-hero-art .c-pennant { animation: c-swing 2.4s cubic-bezier(0.3, 0.6, 0.3, 1) both; }
  .site[data-look="club"] .c-hero-art .c-pennant:hover { animation: c-sway 1.6s ease-in-out; }
}
@keyframes c-swing { 0% { transform: rotate(5deg); } 35% { transform: rotate(-3deg); } 65% { transform: rotate(1.5deg); } 100% { transform: rotate(0); } }
@keyframes c-sway { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(-2.5deg); } 70% { transform: rotate(1.5deg); } }
/* With the club's own photo: a small pennant before the name, the photo
   pinned up as a print. */
.site[data-look="club"] .c-pennant-s { width: 0.62em; flex: none; margin-top: -0.12em; filter: none; }
.site[data-look="club"] .c-name-s .c-pennant-s { width: 0.8em; }
@media (max-width: 51.99rem) {
  .site[data-look="club"] .c-hero.no-photo .c-hero-art { order: -1; align-items: flex-start; padding-left: 0.5rem; }
  .site[data-look="club"] .c-hero.no-photo .c-hero-art::before { margin-inline: -2rem -2rem; }
  .site[data-look="club"] .c-hero.no-photo .c-pennant { width: 5.75rem; }
  .site[data-look="club"] .c-hero.no-photo { padding-top: 1.25rem; }
  .site[data-look="club"] .c-hero.no-photo .c-hero-grid { gap: 1rem; }
}

/* Prints: the club's own photos with a white border, pinned up straight. */
.site[data-look="club"] .c-print { position: relative; margin: 0; background: #fff; padding: 0.6rem 0.6rem 0.9rem; box-shadow: var(--c-shadow); }
.site[data-look="club"] .c-print-img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--c-wall-2); }
.site[data-look="club"] .c-hero-print { width: min(100%, 34rem); }
.site[data-look="club"] .c-hero-print .c-print-img { aspect-ratio: 5 / 4; }
.site[data-look="club"] .c-print figcaption { font-family: var(--font-hand); color: var(--felt-pen); font-size: 1.05rem; line-height: 1.3; margin-top: 0.5rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Pins: a plastic push pin, its head in the club colour (or red, yellow). */
.site[data-look="club"] .c-pin {
  --pin-c: var(--primary);
  position: absolute; z-index: 2; top: -0.55rem; left: 50%; width: 1.25rem; height: 1.25rem; margin-left: -0.625rem; border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, rgb(255 255 255 / 0.7) 0 12%, transparent 30%), radial-gradient(circle at 50% 50%, var(--pin-c) 0 62%, rgb(0 0 0 / 0.35) 100%);
  box-shadow: 2px 4px 3px -1px rgb(0 0 0 / 0.35);
}
.site[data-look="club"] .c-pin-red { --pin-c: var(--pin); }
.site[data-look="club"] .c-pin-yellow { --pin-c: #e8b923; }

/* --- What they do: the noticeboard. Cork in a wooden frame, a notice per
   activity on white card or coloured paper, written with a felt pen. ---- */
.site[data-look="club"] .c-board-band { background: var(--c-wall-2); }
.site[data-look="club"] .c-board-head { display: grid; gap: 0.75rem 4rem; align-items: end; margin-bottom: clamp(1.75rem, 4vw, 3rem); }
.site[data-look="club"] .c-board-head h2 { margin: 0; max-width: 16ch; }
.site[data-look="club"] .c-intro { font-size: var(--fs-lead); line-height: 1.5; max-width: 36rem; margin: 0; color: var(--c-muted); }
@media (min-width: 52rem) { .site[data-look="club"] .c-board-head { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.site[data-look="club"] .c-board {
  position: relative; padding: clamp(1.75rem, 4vw, 3.25rem) clamp(1rem, 3vw, 2.75rem) clamp(2rem, 4vw, 3.5rem);
  border: clamp(10px, 1.4vw, 16px) solid var(--frame); border-radius: 6px;
  background-color: var(--cork);
  /* Cork: pressed granules, as specks on grids of co-prime sizes (so they
     never line up into a weave) over the board's own light and shade.
     Gradients only: the stylesheet references no images. Confined to the board. */
  background-image:
    radial-gradient(circle at 46% 24%, rgb(255 234 215 / 0.3) 0 0.8px, transparent 1.6px),
    radial-gradient(circle at 73% 17%, rgb(66 31 18 / 0.35) 0 0.8px, transparent 1.6px),
    radial-gradient(circle at 16% 60%, rgb(68 32 13 / 0.35) 0 1.5px, transparent 2.3px),
    radial-gradient(circle at 12% 77%, rgb(58 37 20 / 0.55) 0 0.8px, transparent 1.6px),
    radial-gradient(circle at 78% 79%, rgb(67 31 13 / 0.35) 0 1px, transparent 1.8px),
    radial-gradient(circle at 42% 58%, rgb(255 230 212 / 0.3) 0 1.2px, transparent 2.0px),
    radial-gradient(circle at 76% 92%, rgb(255 230 198 / 0.3) 0 1.2px, transparent 2.0px),
    radial-gradient(circle at 17% 75%, rgb(77 32 19 / 0.35) 0 1px, transparent 1.8px),
    radial-gradient(circle at 68% 92%, rgb(72 43 15 / 0.45) 0 1.5px, transparent 2.3px),
    radial-gradient(circle at 51% 43%, rgb(62 35 13 / 0.35) 0 1.2px, transparent 2.0px),
    radial-gradient(circle at 72% 68%, rgb(65 44 14 / 0.55) 0 0.8px, transparent 1.6px),
    radial-gradient(circle at 20% 70%, rgb(255 234 200 / 0.4) 0 1px, transparent 1.8px),
    radial-gradient(circle at 67% 58%, rgb(255 228 197 / 0.4) 0 1.2px, transparent 2.0px),
    radial-gradient(circle at 93% 49%, rgb(74 45 19 / 0.45) 0 0.8px, transparent 1.6px),
    radial-gradient(circle at 16% 39%, rgb(70 32 10 / 0.55) 0 1.2px, transparent 2.0px),
    radial-gradient(circle at 87% 78%, rgb(76 44 14 / 0.55) 0 1.5px, transparent 2.3px),
    radial-gradient(ellipse at 20% 10%, var(--cork-light), transparent 55%),
    radial-gradient(ellipse at 90% 100%, var(--cork-dark), transparent 60%);
  background-size: 37px 41px, 37px 41px, 43px 31px, 43px 31px, 53px 47px, 53px 47px, 29px 61px, 29px 61px, 67px 53px, 67px 53px, 41px 73px, 41px 73px, 59px 37px, 59px 37px, 31px 43px, 31px 43px, 100% 100%, 100% 100%;
  box-shadow: inset 0 2px 8px rgb(40 22 8 / 0.45), 0 1px 0 rgb(255 255 255 / 0.4), 0 22px 30px -24px rgb(20 12 4 / 0.6);
}
.site[data-look="club"] .c-notices { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16.5rem), 1fr)); gap: clamp(1.75rem, 3vw, 2.5rem) clamp(1.25rem, 2.5vw, 2rem); align-items: start; }
.site[data-look="club"] .c-board[data-count="1"] { max-width: 36rem; }
.site[data-look="club"] .c-board[data-count="1"] .c-notices { grid-template-columns: minmax(0, 26rem); justify-content: center; }
.site[data-look="club"] .c-board[data-count="2"] .c-notices { grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); }
.site[data-look="club"] .c-notice {
  --paper: var(--card); --ink: var(--on-card); --soft: var(--card-muted);
  position: relative; min-width: 0; padding: 1.6rem 1.35rem 1.35rem; background: var(--paper); color: var(--ink);
  box-shadow: var(--c-shadow); transform: rotate(var(--tilt, 0deg)); transition: transform 180ms ease, box-shadow 180ms ease;
}
/* A notice a little lower than its neighbour, as people pin them. */
.site[data-look="club"] .c-notice:nth-child(3n + 2) { margin-top: 0.9rem; }
.site[data-look="club"] .c-notice:nth-child(4n + 3) { margin-top: 0.35rem; }
.site[data-look="club"] .c-paper-yellow { --paper: var(--paper-yellow); --ink: var(--on-paper); --soft: var(--paper-muted); }
.site[data-look="club"] .c-paper-blue { --paper: var(--paper-blue); --ink: var(--on-paper); --soft: var(--paper-muted); }
.site[data-look="club"] .c-paper-green { --paper: var(--paper-green); --ink: var(--on-paper); --soft: var(--paper-muted); }
/* The index card: a red line under the title, blue lines under the text. */
.site[data-look="club"] .c-paper-card {
  background-image: linear-gradient(to bottom, transparent 3.9rem, rgb(210 58 44 / 0.55) 3.9rem, rgb(210 58 44 / 0.55) calc(3.9rem + 1px), transparent calc(3.9rem + 1px)),
    repeating-linear-gradient(to bottom, transparent 0 calc(1.6rem - 1px), var(--card-line) calc(1.6rem - 1px) 1.6rem);
  background-position: 0 0, 0 0.85rem;
}
.site[data-look="club"] .c-notice-name { font-family: var(--font-hand); font-weight: 400; font-size: clamp(1.55rem, 1.3rem + 0.8vw, 1.95rem); line-height: 1.12; color: var(--felt-pen); margin: 0 0 0.55rem; text-transform: none; letter-spacing: 0; overflow-wrap: break-word; hyphens: auto; }
.site[data-look="club"] .c-notice-note { margin: 0; font-size: 1.02rem; line-height: 1.55; color: var(--ink); }
.site[data-look="club"] .c-notice-price { margin: 0.9rem 0 0; font-family: var(--font-hand); font-size: 1.55rem; line-height: 1.1; color: var(--felt-pen); font-variant-numeric: tabular-nums; }
.site[data-look="club"] .c-notice-price .price-unit, .site[data-look="club"] .c-notice-price .price-from { font-size: 0.75em; }
/* Reaching for a notice: it straightens and comes off the cork a little. */
.site[data-look="club"] .c-notice:hover { transform: rotate(0deg) translateY(-3px); box-shadow: 0 2px 2px rgb(30 20 10 / 0.2), 0 18px 24px -14px rgb(30 20 10 / 0.6); }
@media (prefers-reduced-motion: reduce) { .site[data-look="club"] .c-notice { transition: none; } .site[data-look="club"] .c-notice:hover { transform: rotate(var(--tilt, 0deg)); } }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .site[data-look="club"] .c-notice { animation: c-pin-up linear both; animation-timeline: view(); animation-range: entry 0% entry 60%; }
  }
}
/* Pinned up without a fade: a page captured before it is scrolled (full-page
   screenshots) still shows the notices, not an empty board. */
@keyframes c-pin-up { from { translate: 0 -0.8rem; } to { translate: 0 0; } }
@media (max-width: 40rem) {
  .site[data-look="club"] .c-notice:nth-child(n) { margin-top: 0; }
  .site[data-look="club"] .c-board { border-width: 9px; padding-inline: 0.9rem; }
}

/* --- When we meet: the weekly schedule taped to the wall. ---------------- */
.site[data-look="club"] .c-schedule { background: var(--c-wall); }
.site[data-look="club"] .c-schedule-grid { display: grid; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
@media (min-width: 52rem) { .site[data-look="club"] .c-schedule-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); } }
.site[data-look="club"] .c-schedule-intro h2 { max-width: 13ch; }
.site[data-look="club"] .c-where { display: grid; gap: 0.25rem; margin: 1.5rem 0 0; padding-top: 1rem; border-top: 3px solid var(--c-ink); max-width: 26rem; font-size: 1.1rem; line-height: 1.5; }
.site[data-look="club"] .c-where .c-k { color: var(--c-muted); }
.site[data-look="club"] .c-sheet { position: relative; justify-self: center; width: min(100%, 38rem); padding: 0 0 1.5rem; background: var(--card); color: var(--on-card); box-shadow: var(--c-shadow); transform: rotate(-0.6deg); }
.site[data-look="club"] .c-tape { position: absolute; top: -0.85rem; width: 6.5rem; height: 1.7rem; background: rgb(236 230 205 / 0.78); box-shadow: 0 1px 2px rgb(0 0 0 / 0.12); }
.site[data-look="club"] .c-tape-l { left: 1.2rem; transform: rotate(-4deg); }
.site[data-look="club"] .c-tape-r { right: 1.2rem; transform: rotate(3deg); }
.site[data-look="club"] .c-sheet-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0.25rem 1rem; margin: 0; padding: 1.35rem 1.5rem 1.1rem; background: var(--primary); color: var(--on-primary); }
.site[data-look="club"] .c-sheet-name { font-family: var(--font-heading); font-size: clamp(1.2rem, 1rem + 0.7vw, 1.6rem); line-height: 1.1; overflow-wrap: break-word; min-width: 0; }
.site[data-look="club"] .c-sheet-what { opacity: 0.9; }
.site[data-look="club"] .c-sheet-table { width: 100%; border-collapse: collapse; margin: 0.4rem 0 0; }
.site[data-look="club"] .c-sheet-table tr { border-bottom: 1px solid var(--card-line); }
.site[data-look="club"] .c-sheet-table :is(th, td) { padding: 0.78rem 1.5rem; text-align: left; vertical-align: baseline; font-size: 1.2rem; }
.site[data-look="club"] .c-sheet-table th { font-weight: 700; position: relative; width: 45%; }
.site[data-look="club"] .c-sheet-table td { font-variant-numeric: tabular-nums; text-align: right; }
.site[data-look="club"] .c-time { display: block; white-space: nowrap; font-weight: 700; }
.site[data-look="club"] .c-sheet-table tr.is-off th { font-weight: 400; color: var(--card-muted); }
.site[data-look="club"] .c-off { color: var(--card-muted); }
.site[data-look="club"] .c-sheet-table tr.is-on th::before { content: ''; display: inline-block; width: 0.6rem; height: 0.6rem; margin-right: 0.7rem; border-radius: 50%; background: var(--primary); vertical-align: 0.1em; }
.site[data-look="club"] .c-sheet-table tr.is-off th { padding-left: calc(1.5rem + 1.3rem); }
/* Today, marked by hand: a felt-pen ring round the day and the word. */
.site[data-look="club"] .c-today { display: none; font-family: var(--font-hand); font-weight: 400; color: var(--felt-pen); font-size: 1.15rem; margin-left: 0.6rem; }
:root[data-today="mon"] .site[data-look="club"] tr[data-day="mon"],
:root[data-today="tue"] .site[data-look="club"] tr[data-day="tue"],
:root[data-today="wed"] .site[data-look="club"] tr[data-day="wed"],
:root[data-today="thu"] .site[data-look="club"] tr[data-day="thu"],
:root[data-today="fri"] .site[data-look="club"] tr[data-day="fri"],
:root[data-today="sat"] .site[data-look="club"] tr[data-day="sat"],
:root[data-today="sun"] .site[data-look="club"] tr[data-day="sun"] { background: linear-gradient(transparent 12%, rgb(251 240 166 / 0.85) 12% 88%, transparent 88%); }
:root[data-today="mon"] .site[data-look="club"] tr[data-day="mon"] .c-today,
:root[data-today="tue"] .site[data-look="club"] tr[data-day="tue"] .c-today,
:root[data-today="wed"] .site[data-look="club"] tr[data-day="wed"] .c-today,
:root[data-today="thu"] .site[data-look="club"] tr[data-day="thu"] .c-today,
:root[data-today="fri"] .site[data-look="club"] tr[data-day="fri"] .c-today,
:root[data-today="sat"] .site[data-look="club"] tr[data-day="sat"] .c-today,
:root[data-today="sun"] .site[data-look="club"] tr[data-day="sun"] .c-today { display: inline; }
@media (max-width: 30rem) { .site[data-look="club"] .c-sheet-table :is(th, td) { padding-inline: 1.1rem; font-size: 1.08rem; } .site[data-look="club"] .c-sheet-table tr.is-off th { padding-left: calc(1.1rem + 1.3rem); } }

/* --- About: the club's own page; the facts on a card beside it. --------- */
.site[data-look="club"] .c-about { background: var(--c-wall); border-top: 1px solid var(--c-rule); }
.site[data-look="club"] .c-about-grid { display: grid; gap: clamp(2rem, 5vw, 4.5rem); }
@media (min-width: 52rem) {
  .site[data-look="club"] .c-about-grid { grid-template-columns: minmax(0, 2fr) minmax(15rem, 0.9fr); align-items: start; }
  .site[data-look="club"] .c-about-side { padding-top: 0.6rem; }
}
.site[data-look="club"] .c-about-text :is(h1, h2) { max-width: 16ch; }
.site[data-look="club"] .c-about-text .is-long { font-size: clamp(1.9rem, 1.3rem + 2.2vw, 3.2rem); max-width: 22ch; }
.site[data-look="club"] .c-about-body { max-width: 42rem; }
.site[data-look="club"] .c-about-body.is-columns { max-width: none; }
@media (min-width: 64rem) { .site[data-look="club"] .c-about-body.is-columns { columns: 2; column-gap: 3rem; column-rule: 1px solid var(--c-rule); } }
.site[data-look="club"] .c-about-body p { margin: 0 0 1em; font-size: var(--fs-lead); line-height: 1.6; }
/* The opening letter set like a club newsletter's, in the slab. */
.site[data-look="club"] .c-about-body.has-drop p:first-child::first-letter { font-family: var(--font-heading); float: left; font-size: 3.6em; line-height: 0.82; margin: 0.06em 0.1em 0 0; }
.site[data-look="club"] .c-facts { margin: 0; background: var(--card); color: var(--on-card); padding: 0.4rem 1.25rem; box-shadow: var(--c-shadow); border-top: 6px solid var(--primary); }
.site[data-look="club"] .c-facts > div { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: 0.9rem; padding: 0.85rem 0; border-bottom: 1px solid var(--card-line); align-items: baseline; }
.site[data-look="club"] .c-facts > div:last-child { border-bottom: 0; }
.site[data-look="club"] .c-facts dt { color: var(--card-muted); }
.site[data-look="club"] .c-facts dd { margin: 0; overflow-wrap: anywhere; font-size: 1.05rem; }
.site[data-look="club"] .c-facts a { text-decoration: none; }
.site[data-look="club"] .c-facts a:hover { text-decoration: underline; }
.site[data-look="club"] .c-about-print { margin: 0.9rem 0 2rem; }
@media (max-width: 51.99rem) { .site[data-look="club"] .c-about-side { max-width: 30rem; } }

/* --- The gallery: the club's own prints, pinned up straight. ------------ */
.site[data-look="club"] .c-prints-band { background: var(--c-wall-2); }
.site[data-look="club"] .c-prints { display: grid; gap: clamp(2rem, 4vw, 3rem) clamp(1.25rem, 3vw, 2.25rem); grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: clamp(1.5rem, 4vw, 2.5rem); align-items: start; }
.site[data-look="club"] .c-prints li:first-child { grid-column: 1 / -1; }
.site[data-look="club"] .c-n4 .c-prints li:first-child { grid-column: auto; }
@media (min-width: 52rem) {
  .site[data-look="club"] .c-prints { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .site[data-look="club"] .c-prints li:first-child { grid-column: span 2; grid-row: span 2; }
  .site[data-look="club"] :is(.c-n2, .c-n4) .c-prints li:first-child, .site[data-look="club"] :is(.c-n2, .c-n4) .c-prints li { grid-column: span 1; grid-row: auto; }
  .site[data-look="club"] :is(.c-n2, .c-n4) .c-prints { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --- What members say: the guestbook, written by hand on lined paper. --- */
.site[data-look="club"] .c-book-band { background: var(--c-wall); border-top: 1px solid var(--c-rule); }
.site[data-look="club"] .c-book-grid { display: grid; gap: clamp(1.5rem, 4vw, 3.5rem); }
@media (min-width: 52rem) { .site[data-look="club"] .c-book-grid { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.6fr); align-items: start; } }
.site[data-look="club"] .c-book-grid h2 { max-width: 12ch; }
.site[data-look="club"] .c-book {
  --line: 2.4rem;
  margin: 0; padding: 1.2rem clamp(1.25rem, 3vw, 2.25rem) 1.2rem clamp(3rem, 6vw, 4.5rem);
  background-color: var(--card); color: var(--on-card); box-shadow: var(--c-shadow);
  background-image: linear-gradient(to right, transparent clamp(2.1rem, 4.6vw, 3.4rem), rgb(210 58 44 / 0.5) clamp(2.1rem, 4.6vw, 3.4rem), rgb(210 58 44 / 0.5) calc(clamp(2.1rem, 4.6vw, 3.4rem) + 1px), transparent calc(clamp(2.1rem, 4.6vw, 3.4rem) + 1px)),
    repeating-linear-gradient(to bottom, transparent 0 calc(var(--line) - 1px), var(--card-line) calc(var(--line) - 1px) var(--line));
  background-position: 0 0, 0 1.2rem;
}
.site[data-look="club"] .c-book li + li { margin-top: var(--line); }
.site[data-look="club"] .c-book figure { margin: 0; }
.site[data-look="club"] .c-book blockquote { margin: 0; }
.site[data-look="club"] .c-book blockquote p { font-family: var(--font-hand); color: var(--felt-pen); font-size: clamp(1.35rem, 1.15rem + 0.7vw, 1.7rem); line-height: var(--line); margin: 0; hyphens: manual; }
.site[data-look="club"] .c-book figcaption { font-family: var(--font-hand); color: var(--on-card); font-size: 1.2rem; line-height: var(--line); text-align: right; }
.site[data-look="club"] .c-book figcaption::before { content: '— '; }

/* --- Come along / join: the membership card beside the form. ------------ */
.site[data-look="club"] .c-join { background: var(--c-wall-2); border-top: 1px solid var(--c-rule); }
.site[data-look="club"] .c-join-grid { display: grid; gap: clamp(2.5rem, 5vw, 4.5rem); align-items: start; }
@media (min-width: 52rem) { .site[data-look="club"] .c-join.has-form .c-join-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.site[data-look="club"] .c-join-text h2 { max-width: 13ch; }
.site[data-look="club"] .c-join-text .c-intro { margin-bottom: clamp(1.75rem, 4vw, 2.5rem); }
.site[data-look="club"] .c-card {
  display: grid; grid-template-columns: 30% minmax(0, 1fr); width: min(100%, 25rem); aspect-ratio: 85.6 / 54; overflow: hidden;
  border-radius: 12px; background: var(--card); color: var(--on-card); box-shadow: 0 1px 1px rgb(0 0 0 / 0.15), 0 22px 30px -22px rgb(20 20 20 / 0.6);
  transform: rotate(-2deg); transition: transform 220ms ease;
}
.site[data-look="club"] .c-card:hover { transform: rotate(0deg) translateY(-3px); }
@media (prefers-reduced-motion: reduce) { .site[data-look="club"] .c-card { transition: none; } .site[data-look="club"] .c-card:hover { transform: rotate(-2deg); } }
.site[data-look="club"] .c-card-band { background: var(--primary); color: var(--on-primary); display: flex; align-items: center; justify-content: center; position: relative; }
.site[data-look="club"] .c-card-band::after { content: ''; position: absolute; inset: auto 0 18% 0; height: 6px; background: var(--on-primary); opacity: 0.8; }
.site[data-look="club"] .c-card-initials { font-family: var(--font-heading); font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.2rem); line-height: 1; margin-bottom: 1rem; }
.site[data-look="club"] .c-card-body { display: flex; flex-direction: column; padding: 0.9rem 1.1rem 1rem; min-width: 0; }
.site[data-look="club"] .c-card-label { color: var(--card-muted); font-size: 0.68rem; }
.site[data-look="club"] .c-card-name { font-family: var(--font-heading); font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.3rem); line-height: 1.1; margin: 0.3rem 0 auto; overflow-wrap: break-word; }
.site[data-look="club"] .c-card-name.is-long { font-size: 0.95rem; }
.site[data-look="club"] .c-card-field { display: flex; align-items: flex-end; gap: 0.5rem; margin-top: 0.55rem; }
.site[data-look="club"] .c-card-field > span:first-child { color: var(--card-muted); font-size: 0.62rem; white-space: nowrap; }
.site[data-look="club"] .c-card-blank { flex: 1; border-bottom: 1px dotted var(--card-muted); height: 1px; margin-bottom: 0.25rem; }
.site[data-look="club"] .c-lines { margin: clamp(2rem, 4vw, 2.75rem) 0 0; border-top: 3px solid var(--c-ink); max-width: 32rem; }
.site[data-look="club"] .c-lines li { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: 1rem; align-items: baseline; padding: 0.8rem 0; border-bottom: 1px solid var(--c-rule); }
.site[data-look="club"] .c-k { color: var(--c-muted); }
.site[data-look="club"] .c-lines a { font-size: 1.12rem; text-decoration: none; overflow-wrap: anywhere; }
.site[data-look="club"] .c-lines a:hover { text-decoration: underline; }
/* The form, on white card pinned beside the membership card. */
.site[data-look="club"] .c-form { position: relative; background: var(--card); color: var(--on-card); padding: clamp(1.75rem, 3.5vw, 2.5rem); box-shadow: var(--c-shadow); border-top: 6px solid var(--primary); }
.site[data-look="club"] .c-form :is(input, textarea) { border-radius: 4px; border: 1px solid var(--c-rule); background: #fff; }
.site[data-look="club"] .c-form label { font-weight: 600; }

/* --- The rest (FAQ, booking, request form, cta band) on the same wall. -- */
.site[data-look="club"] :is(.s-faq, .s-booking, .s-request) { background: var(--c-wall); border-top: 1px solid var(--c-rule); }

/* --- Footer: the club's stripes again, above the colophon. --------------- */
.site[data-look="club"] .site-footer { border-top: 6px solid var(--primary); }
.site[data-look="club"] .footer-name { font-family: var(--font-heading); font-weight: 400; font-size: clamp(1.4rem, 1.2rem + 0.8vw, 1.9rem); }