/* LLC Community: Collana in the LUISS Language Café house style.
   Each club is a series with its own jacket colour; the house (chalk, ink,
   café red, Playfair + Inter, from the Café moodboard) binds them. */

@font-face {
  font-family: "Inter";
  src: url("inter-latin.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
  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: "Inter";
  src: url("inter-latin-ext.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
  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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Playfair Display";
  src: url("playfair-latin.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
  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: "Playfair Display";
  src: url("playfair-latin-ext.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
  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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Playfair Display";
  src: url("playfair-italic-latin.woff2") format("woff2");
  font-weight: 400 900;
  font-style: italic;
  font-display: swap;
  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: "Playfair Display";
  src: url("playfair-italic-latin-ext.woff2") format("woff2");
  font-weight: 400 900;
  font-style: italic;
  font-display: swap;
  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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root, [data-club] {
  /* Recomputed per club, since custom properties resolve where declared. */
  --jacket-deep: color-mix(in oklab, var(--jacket) 60%, #000);
}

:root {
  /* House: LUISS Language Café moodboard palette */
  --chalk: #f5ecdc;
  --cafe-red: #b83b32;
  --cafe-red-deep: #93291f;
  --wood: #b78d65;
  --olive: #70785b;
  --olive-deep: #4a5139;
  --ink: #242722;
  --house: var(--ink);
  --on-house: var(--chalk);
  --house-muted: #d3c8b4;
  /* Paper ramp */
  --bg: var(--chalk);
  --sheet: #fdf8ee;
  --fg: var(--ink);
  --muted: #595d55;
  --rule: #e3d7c3;
  --rule-strong: #857862;
  --accent: var(--cafe-red);
  --on-accent: #fff;
  --accent-deep: var(--cafe-red-deep);
  /* Default jacket; each club overrides via /theme.css */
  --jacket: var(--cafe-red);
  --on-jacket: #ffffff;
  /* States */
  --stamp: var(--cafe-red);
  --ok: #4d5a33;
  --gold: #c9a54b;

  --font: "Inter", "Helvetica Neue", Arial, sans-serif;
  --display: "Playfair Display", Georgia, serif;
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 72px;
  --wrap: 1180px;
  --gutter: 24px;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  color-scheme: light;
}

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

html {
  -webkit-text-size-adjust: 100%;
  /* What shows past the page edge when a phone overscrolls: the house colour, so
     the header and footer seem to carry on instead of a strip of page under the footer. */
  background: var(--house);
  scrollbar-color: var(--rule-strong) var(--bg);
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  caret-color: var(--jacket);
  accent-color: var(--jacket-deep);
  font-variant-numeric: tabular-nums;
}

::selection { background: var(--jacket); color: var(--on-jacket); }

:focus-visible {
  outline: 2px solid var(--fg);
  outline-offset: 2px;
}

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

a {
  color: inherit;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
a:hover { text-decoration-thickness: 2px; }

h1, h2, h3 {
  margin: 0;
  line-height: 1.1;
  text-wrap: balance;
}
h1 { font-family: var(--display); font-size: 2.5rem; font-weight: 700; letter-spacing: -0.01em; }
h2 { font-family: var(--display); font-size: 1.5rem; font-weight: 700; margin: var(--s7) 0 var(--s3); }
h3 { font-size: 1.0625rem; font-weight: 700; margin: var(--s5) 0 var(--s2); }
p { margin: 0 0 var(--s3); max-width: 68ch; }
small { font-size: .8125rem; color: var(--muted); }
ul { padding: 0; margin: 0; list-style: none; }

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* ---------- House bar ---------- */

.house {
  background: var(--house);
  color: var(--on-house);
}
.house .wrap {
  display: flex;
  align-items: center;
  gap: var(--s4);
  min-height: 56px;
}
.wordmark {
  display: flex;
  align-items: center;
  gap: var(--s2);
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.25rem;
  text-decoration: none;
  white-space: nowrap;
}
.wordmark::before {
  content: "";
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid currentColor;
  box-shadow: inset 0 0 0 3px var(--house), inset 0 0 0 9px currentColor;
}
.nav {
  display: flex;
  align-items: center;
  gap: var(--s1);
  min-width: 0;
  margin-left: auto;
}
.nav a, .nav button {
  appearance: none;
  background: none;
  border: 0;
  border-radius: 2px;
  color: var(--house-muted);
  font: inherit;
  font-size: .9375rem;
  font-weight: 600;
  min-height: 0;
  padding: var(--s2) 10px;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}
.nav a:hover, .nav button:hover { color: var(--on-house); background: rgb(255 255 255 / .08); }
.nav a[aria-current="page"] { color: var(--on-house); box-shadow: inset 0 -2px 0 var(--on-house); }
.nav form { margin: 0; }
/* Nothing in the bar may be squeezed; only the name may give way, with an ellipsis. */
.nav > * { flex: none; }
.nav > .nav-user { flex: 0 1 auto; min-width: 0; }
.nav-sep { width: 1px; height: 24px; background: rgb(255 255 255 / .2); margin: 0 var(--s1); }
/* Account: the person, not a page name. */
.nav .nav-user {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  padding: 4px var(--s3) 4px 4px;
  border-radius: 999px;
  background: rgb(255 255 255 / .08);
  color: var(--on-house);
  max-width: 22ch;
}
/* Long names end in "…" instead of being cut mid-letter; the full name is in the title. */
.nav-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.nav .nav-user[aria-current="page"] { box-shadow: inset 0 0 0 1.5px var(--on-house); }
.nav-initial {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--cafe-red);
  color: #fff;
  font-family: var(--display);
  font-weight: 700;
  font-size: .875rem;
  flex: none;
  object-fit: cover;
}
/* Sign out and language are switches, not destinations. */
.nav .nav-signout {
  border: 1px solid rgb(255 255 255 / .35);
  color: var(--on-house);
  padding: 6px var(--s3);
  font-size: .875rem;
}
.nav .nav-signout:hover { background: var(--on-house); color: var(--house); border-color: var(--on-house); }
.lang {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid rgb(255 255 255 / .35);
  border-radius: 2px;
  overflow: hidden;
  text-transform: uppercase;
}
.lang-cur {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.25rem;
  padding: 0 var(--s2);
  background: var(--on-house);
  color: var(--house);
  font-size: .8125rem;
  font-weight: 700;
}
.nav .lang button { min-width: 2.25rem; padding: 6px var(--s2); font-size: .8125rem; font-weight: 700; color: var(--house-muted); text-transform: uppercase; border-radius: 0; }
.nav .lang button:hover { color: var(--on-house); }
.nav :focus-visible, .menu :focus-visible { outline-color: var(--on-house); }
.menu { display: none; margin: 0 0 0 auto; }
.menu summary {
  list-style: none;
  padding: var(--s2) var(--s3);
  min-height: 44px;
  display: flex;
  align-items: center;
  color: var(--on-house);
  font-weight: 650;
  border: 1px solid var(--house-muted);
  border-radius: 2px;
}
.menu summary::-webkit-details-marker { display: none; }
.menu[open] summary { background: var(--on-house); color: var(--house); }
.menu .nav { display: flex; flex-direction: column; align-items: stretch; margin: 0; padding: var(--s2) 0 var(--s3); }
.menu .nav a, .menu .nav button { text-align: left; justify-content: flex-start; padding: var(--s3) var(--s2); min-height: 44px; font-size: 1rem; }
.menu .nav-sep { width: 100%; height: 1px; margin: var(--s2) 0; }
.menu .nav .nav-user { align-self: flex-start; padding: 4px var(--s3) 4px 4px; min-height: 0; margin: var(--s1) 0; }
.menu .nav form { margin: var(--s1) 0; align-self: flex-start; }
.menu .nav .nav-signout, .menu .nav .lang button { padding: 6px var(--s3); min-height: 36px; }

/* ---------- Page ---------- */

main.page { flex: 1; padding-bottom: var(--s8); }
main.page > .wrap:first-child { padding-top: var(--s6); }
.page-head { display: flex; align-items: center; gap: var(--s4); margin-bottom: var(--s5); flex-wrap: wrap; }
.back { display: inline-block; margin-bottom: var(--s3); font-weight: 600; font-size: .9375rem; }
.lede { font-size: 1.125rem; color: var(--muted); }

/* ---------- Controls ---------- */

button, .btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  min-height: 40px;
  padding: 0 var(--s4);
  border: 1.5px solid var(--accent);
  border-radius: 2px;
  background: var(--accent);
  color: var(--on-accent);
  font: inherit;
  font-size: .9375rem;
  font-weight: 650;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s var(--ease-out), color .15s var(--ease-out);
}
button:hover, .btn:hover { background: var(--accent-deep); border-color: var(--accent-deep); color: #fff; }
button:disabled { opacity: .45; cursor: not-allowed; }
.quiet:not(form), form.quiet button, li form button, td form button {
  background: transparent;
  color: var(--fg);
  min-height: 32px;
  padding: 0 var(--s3);
  font-size: .875rem;
  border-width: 1px;
}
.quiet:not(form):hover, form.quiet button:hover, li form button:hover, td form button:hover { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.danger:not(form), form.danger button { border-color: var(--stamp); color: var(--stamp); background: transparent; }
.danger:not(form):hover, form.danger button:hover { background: var(--stamp); color: #fff; border-color: var(--stamp); }

form { margin: 0 0 var(--s4); }
li form, td form, .row form { display: inline-block; margin: 0 0 0 var(--s2); vertical-align: middle; }

label {
  display: block;
  margin: var(--s4) 0 var(--s1);
  font-size: .875rem;
  font-weight: 650;
}
input[type=hidden] { display: none; }
input:not([type=checkbox], [type=radio], [type=color], [type=file], [type=hidden]), select, textarea {
  display: block;
  width: 100%;
  max-width: 34rem;
  min-height: 42px;
  padding: var(--s2) var(--s3);
  border: 1px solid var(--rule-strong);
  border-radius: 2px;
  background: var(--sheet);
  color: var(--fg);
  font: inherit;
}
textarea { min-height: 7rem; resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--fg); outline: 2px solid var(--jacket); outline-offset: 0; }
input::placeholder, textarea::placeholder { color: var(--muted); }
input[type=file] { display: block; font: inherit; font-size: .875rem; margin-bottom: var(--s1); color: var(--muted); }
input[type=file]::file-selector-button {
  margin-right: var(--s3);
  min-height: 36px;
  padding: 0 var(--s3);
  border: 1px solid var(--fg);
  border-radius: 2px;
  background: var(--sheet);
  color: var(--fg);
  font: inherit;
  font-weight: 650;
  cursor: pointer;
}
input[type=file]::file-selector-button:hover { background: var(--fg); color: var(--bg); }
input[type=color] { width: 64px; height: 40px; padding: 2px; border: 1px solid var(--rule-strong); border-radius: 2px; background: var(--sheet); }
label:has(> input[type=checkbox]), label:has(> input[type=radio]) {
  display: flex;
  align-items: flex-start;
  gap: var(--s2);
  font-weight: 500;
  margin: var(--s2) 0;
}
label > input[type=checkbox], label > input[type=radio] { margin-top: 4px; width: 16px; height: 16px; flex: none; }
fieldset {
  border: 1px solid var(--rule);
  border-radius: 2px;
  margin: var(--s4) 0;
  padding: var(--s2) var(--s4) var(--s3);
  max-width: 44rem;
}
legend { font-size: .875rem; font-weight: 700; padding: 0 var(--s1); }
form :is(input:not([type=hidden]), select, textarea, fieldset, small, ul) ~ button[type=submit] { margin-top: var(--s4); }

/* Stamped messages: nothing disappears quietly. */
[role=alert], [role=status] {
  display: block;
  max-width: 44rem;
  margin: var(--s4) 0;
  padding: var(--s3) var(--s4);
  border: 2px solid var(--stamp);
  color: var(--stamp);
  font-weight: 650;
  background: var(--sheet);
}
[role=status] { border-color: var(--ok); color: var(--ok); }
/* People picker: a search box with its list dropping below. */
.picker { position: relative; max-width: 34rem; }
.picker ~ button[type=submit] { margin-top: var(--s4); }
.picker-list {
  position: absolute; z-index: 20; left: 0; right: 0; top: 100%;
  max-height: 16rem; overflow-y: auto; margin: 2px 0 0; padding: var(--s1) 0;
  list-style: none; background: var(--sheet); border: 1px solid var(--fg); border-radius: 2px;
  box-shadow: 0 6px 18px rgb(0 0 0 / .12);
}
.picker-list li { padding: var(--s2) var(--s3); cursor: pointer; }
.picker-list li small { color: var(--muted); }
.picker-list li:hover, .picker-list li[aria-selected=true] { background: var(--fg); color: var(--bg); }
.picker-list li:hover small, .picker-list li[aria-selected=true] small { color: inherit; opacity: .75; }
input[readonly] { font-variant-numeric: normal; font-size: .875rem; }

.stamp {
  display: inline-block;
  padding: 0 var(--s2);
  border: 1.5px solid currentColor;
  border-radius: 2px;
  font-size: .75rem;
  font-weight: 750;
  line-height: 1.6;
  color: var(--stamp);
  transform: rotate(-2deg);
  white-space: nowrap;
}
.stamp.calm { color: var(--muted); }

/* ---------- Tables ---------- */

table { width: 100%; border-collapse: collapse; margin: var(--s3) 0 var(--s5); font-size: .9375rem; }
th {
  text-align: left;
  font-size: .8125rem;
  font-weight: 700;
  color: var(--muted);
  padding: var(--s2);
  border-bottom: 2px solid var(--fg);
}
td { padding: var(--s3) var(--s2); border-bottom: 1px solid var(--rule); vertical-align: top; }
.table-scroll { overflow-x: auto; }

/* ---------- Pictures ---------- */

.pic { flex: none; display: inline-block; line-height: 0; border-radius: 50%; overflow: hidden; }
.pic img { object-fit: cover; }
.pic-letter circle { fill: var(--jacket-deep); }
.pic-letter text { fill: #fff; font-family: var(--display); font-weight: 700; }

/* The club picture framed like a cover plate. */
.plate {
  flex: none;
  padding: 10px;
  border: 1px solid currentColor;
  align-self: flex-start;
}
.plate .pic { border-radius: 0; }
.plate .pic-letter circle { fill: var(--on-jacket); }
.plate .pic-letter text { fill: var(--jacket); }

.banner-preview { width: 100%; max-width: 480px; height: auto; aspect-ratio: 8 / 3; object-fit: cover; margin-bottom: var(--s3); }

/* ---------- Shelf of spines (signature) ---------- */

.shelf-wrap { position: relative; margin: var(--s5) 0 var(--s7); border-bottom: 8px solid var(--fg); }
.shelf {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  padding: var(--s6) 0 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.spine {
  --h: 320px;
  position: relative;
  flex: none;
  width: 76px;
  min-height: var(--h);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  padding: var(--s4) 0 var(--s3);
  background: var(--jacket);
  color: var(--on-jacket);
  text-decoration: none;
  transition: transform .45s var(--ease-out);
}
.shelf > li:nth-child(4n+2) > .spine { --h: 352px; width: 84px; }
.shelf > li:nth-child(4n+3) > .spine { --h: 296px; width: 70px; }
.shelf > li:nth-child(4n) > .spine { --h: 336px; }
.spine:hover, .spine:focus-visible { transform: translateY(-18px); }
.spine:focus-visible { outline-color: var(--fg); outline-offset: 4px; }
.spine-title {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: var(--display);
  font-size: 1.3125rem;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1;
  white-space: nowrap;
}
.spine-meta {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: .75rem;
  font-weight: 600;
  opacity: .85;
}
.spine .pic { box-shadow: 0 0 0 2px var(--on-jacket); }
.spine .pic-letter circle { fill: var(--on-jacket); }
.spine .pic-letter text { fill: var(--jacket); }
/* Joined clubs carry a ribbon. */
.spine.joined::before {
  content: "";
  position: absolute;
  top: 0;
  right: 12px;
  width: 10px;
  height: 34px;
  background: var(--on-jacket);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 80%, 0 100%);
}
/* Special editions: clothbound, foil hairlines. */
.spine.special {
  color: var(--gold);
  box-shadow: inset 0 0 0 4px var(--jacket), inset 0 0 0 5px var(--gold);
}
.spine.special .pic { box-shadow: 0 0 0 2px var(--gold); }
.spine.special.joined::before { background: var(--gold); }
.spine.special .pic-letter circle { fill: var(--gold); }
.spine.special .pic-letter text { fill: var(--jacket); }
.shelf-legend { display: flex; gap: var(--s5); margin-top: var(--s3); font-size: .875rem; color: var(--muted); }

/* ---------- Club jacket (signature) ---------- */

.jacket {
  background: var(--jacket);
  color: var(--on-jacket);
}
.jacket ::selection { background: var(--on-jacket); color: var(--jacket); }
.jacket :focus-visible { outline-color: var(--on-jacket); }
.jacket-inner {
  display: flex;
  gap: var(--s6);
  padding-top: var(--s7);
  padding-bottom: var(--s7);
}
.jacket h1 {
  font-size: clamp(2.25rem, 1.4rem + 3vw, 3.75rem);
  font-weight: 800;
  letter-spacing: -0.015em;
  line-height: 1;
}
.jacket h1 { margin-bottom: var(--s3); }
.jacket .series { margin: 0 0 var(--s3); font-weight: 600; opacity: .9; }
.jacket .desc { font-size: 1.125rem; max-width: 58ch; }
.jacket .meta { display: flex; flex-wrap: wrap; gap: var(--s3) var(--s5); font-size: .9375rem; font-weight: 600; margin: var(--s4) 0 var(--s5); }
.jacket a { color: inherit; }
.jacket .actions { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; }
.jacket .actions form { margin: 0; }
.jacket button, .jacket .btn {
  background: var(--on-jacket);
  color: var(--jacket);
  border-color: var(--on-jacket);
}
.jacket button:hover, .jacket .btn:hover { background: transparent; color: var(--on-jacket); }
.jacket .quiet:not(form), .jacket form.quiet button { background: transparent; color: var(--on-jacket); border-color: var(--on-jacket); min-height: 40px; }
.jacket .quiet:not(form):hover, .jacket form.quiet button:hover { background: var(--on-jacket); color: var(--jacket); }
.jacket .links { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); margin-top: var(--s4); }
/* A button that reads as a text link (secondary actions). */
button.textlink, .textlink {
  min-height: 40px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
button.textlink:hover, .jacket button.textlink:hover { background: none; color: inherit; text-decoration-thickness: 2px; }
.manage-line { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); align-items: center; padding: var(--s4) 0 0; font-size: .9375rem; }
.manage-line strong { font-weight: 650; color: var(--muted); }

.club-body {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: var(--s7);
}
.club-body h2:first-child { margin-top: var(--s6); }
.club-body a:not(.btn) { text-decoration-color: var(--jacket); }

/* Outbound links: plain text, the place named. */
.links a.link {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  min-height: 32px;
  font-weight: 650;
  text-decoration: underline;
  text-decoration-color: currentColor;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.links a.link:hover { text-decoration-thickness: 2px; }
.links .stamp { color: inherit; text-decoration: none; }

/* ---------- Events (length drawn to scale) ---------- */

.events > li {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: var(--s4);
  padding: var(--s4) 0;
  border-bottom: 1px solid var(--rule);
}
.events > li:first-child { border-top: 2px solid var(--fg); }
.date { text-align: center; line-height: 1; padding-top: 2px; }
.date b { display: block; font-family: var(--display); font-size: 2.125rem; font-weight: 700; font-variant-numeric: lining-nums; }
.date span { display: block; font-size: .8125rem; font-weight: 600; color: var(--muted); margin-top: 2px; }
.event-title { font-size: 1.125rem; font-weight: 750; text-decoration: none; }
.event-title:hover { text-decoration: underline; }
.event-meta { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s4); font-size: .9375rem; color: var(--muted); margin-top: 2px; }
.event-meta .club-name { color: var(--fg); font-weight: 650; display: inline-flex; align-items: center; gap: 6px; }
.event-meta .club-name::before { content: ""; width: 10px; height: 10px; background: var(--jacket); }
.track { height: 6px; margin-top: var(--s3); background: var(--rule); max-width: 420px; }
.bar { height: 100%; background: var(--jacket); }
.dur-1 { width: 8.333%; } .dur-2 { width: 16.667%; } .dur-3 { width: 25%; } .dur-4 { width: 33.333%; }
.dur-5 { width: 41.667%; } .dur-6 { width: 50%; } .dur-7 { width: 58.333%; } .dur-8 { width: 66.667%; }
.dur-9 { width: 75%; } .dur-10 { width: 83.333%; } .dur-11 { width: 91.667%; } .dur-12 { width: 100%; }
.day-head { margin-top: var(--s6); }
/* Poll result bars, 5% steps (no inline styles under the CSP). */
.pct-0 { width: 0%; } .pct-5 { width: 5%; } .pct-10 { width: 10%; } .pct-15 { width: 15%; } .pct-20 { width: 20%; } .pct-25 { width: 25%; } .pct-30 { width: 30%; } .pct-35 { width: 35%; } .pct-40 { width: 40%; } .pct-45 { width: 45%; } .pct-50 { width: 50%; } .pct-55 { width: 55%; } .pct-60 { width: 60%; } .pct-65 { width: 65%; } .pct-70 { width: 70%; } .pct-75 { width: 75%; } .pct-80 { width: 80%; } .pct-85 { width: 85%; } .pct-90 { width: 90%; } .pct-95 { width: 95%; } .pct-100 { width: 100%; }
.results > li { padding: var(--s3) 0; border-bottom: 1px solid var(--rule); }
.results .track { max-width: none; margin-top: var(--s2); }
.result-line { display: flex; justify-content: space-between; gap: var(--s4); font-weight: 600; }
.polls > li { display: flex; align-items: center; gap: var(--s3); padding: var(--s3) 0; border-bottom: 1px solid var(--rule); }
.polls > li:first-child { border-top: 2px solid var(--fg); }
.empty { color: var(--muted); padding: var(--s4) 0; border-top: 2px solid var(--fg); font-family: var(--display); font-style: italic; font-size: 1.125rem; }
.empty::before { content: "“"; color: var(--accent); margin-right: 2px; }
.empty::after { content: "”"; color: var(--accent); margin-left: 2px; }

/* Poster beside the description on wide screens, above it on phones. */
.event-with-poster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 20rem); gap: var(--s5); align-items: start; margin: var(--s4) 0; }
.event-poster { grid-column: 2; grid-row: 1; width: 100%; height: auto; max-height: 80vh; object-fit: contain; border: 1px solid var(--rule); }
.event-with-poster .event-description { grid-column: 1; grid-row: 1; }
.poster-preview { width: auto; max-width: 240px; max-height: 320px; margin-bottom: var(--s3); }
.event-description { white-space: pre-line; font-size: 1.0625rem; }
.event-actions { display: flex; flex-wrap: wrap; gap: var(--s2); margin: var(--s5) 0; }
.row { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; }
/* A quiet button next to a full one in a row takes the same size. */
.row > .btn.quiet { min-height: 40px; padding: 0 var(--s4); font-size: .9375rem; border-width: 1.5px; }

/* Share cards (Instagram story 9:16, post 4:5): screenshot-ready. */
.card-page { align-items: center; justify-content: center; padding: var(--s5) var(--s4); background: var(--house); }
.share-card {
  position: relative;
  width: min(92vw, 540px);
  display: flex;
  flex-direction: column;
  background: var(--jacket);
  color: var(--on-jacket);
  overflow: hidden;
}
.share-card.story { aspect-ratio: 9 / 16; }
.share-card.post { aspect-ratio: 4 / 5; }
.share-cover { width: 100%; flex: 1 1 45%; min-height: 0; object-fit: cover; }
.share-body { flex: 1 1 55%; display: flex; flex-direction: column; justify-content: flex-end; gap: var(--s3); padding: 8% 8% 7%; }
.share-card h1 { font-size: clamp(2rem, 8vw, 3.5rem); line-height: 1; font-weight: 800; }
.share-club { margin: 0; font-weight: 700; letter-spacing: .02em; }
.share-when { margin: 0; font-size: 1.25rem; }
.share-when b { font-family: var(--display); font-size: 1.6rem; }
.share-where { margin: 0; font-size: 1.125rem; }
.share-house { margin: var(--s4) 0 0; padding-top: var(--s3); border-top: 1px solid currentColor; font-size: .9375rem; }
.share-house i { font-family: var(--display); }
.card-hint { color: var(--on-house); font-size: .875rem; max-width: 540px; text-align: center; margin-top: var(--s4); }
.card-hint a { color: var(--on-house); }
.room-special .share-card { border: 4px double var(--gold); }
/* Card editor (card.js). */
/* Removed items, a poster moved to the background and the file pickers behind their buttons. */
.share-card [hidden], .card-tools [hidden] { display: none !important; }
.share-card.has-bg {
  background-image: linear-gradient(rgb(0 0 0 / var(--card-shade, 0)), rgb(0 0 0 / var(--card-shade, 0))), var(--card-bg);
  background-size: cover;
  background-position: center;
}
.share-card.has-bg .share-body { background: none; }
.card-movable { touch-action: none; cursor: grab; transform-origin: center; }
.card-movable[contenteditable]:focus { outline: 1px dashed currentColor; outline-offset: 4px; cursor: text; }
.card-movable.is-picked { outline: 2px dashed currentColor; outline-offset: 4px; }
.card-tint { background: rgb(0 0 0 / var(--tint, 0)); padding: .2em .45em; width: fit-content; align-self: flex-start; border-radius: 2px; }
.card-text.card-tint { align-self: auto; }
.card-added { position: absolute; left: 25%; top: 35%; width: 50%; margin: 0; }
img.card-added { height: auto; }
.card-text { font-family: var(--display); font-size: 2rem; font-weight: 700; text-align: center; line-height: 1.1; }
.card-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--s2) var(--s3); max-width: 540px; margin-top: var(--s4); color: var(--on-house); font-size: .875rem; }
.card-tools > * { margin: 0; }
.card-tools p { flex-basis: 100%; text-align: center; }
.card-tools label:not(.btn) { display: inline-flex; align-items: center; gap: var(--s2); margin: 0; font-weight: 600; }
.card-tools .quiet:not(form) { color: var(--on-house); border-color: var(--house-muted); }
.card-tools input[type="range"] { width: 7rem; min-height: 0; padding: 0; }
.card-tools input[type="color"] { width: 2.25rem; height: 2rem; min-height: 0; padding: 0; border: 1px solid var(--house-muted); }
@media print { .card-tools, .card-hint { display: none; } }

/* ---------- Poker room ---------- */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: var(--s3); margin: var(--s3) 0; }
.stats > div { border-top: 2px solid var(--fg); padding-top: var(--s2); }
.stats dt { font-size: .8125rem; font-weight: 650; color: var(--muted); }
.stats dd { margin: 0; font-family: var(--display); font-size: 1.75rem; font-weight: 700; font-variant-numeric: lining-nums tabular-nums; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.board td:first-child { width: 3ch; color: var(--muted); }
.poker-table tr.out td { color: var(--muted); }
.poker-table tfoot td { border-top: 2px solid var(--fg); border-bottom: 0; }
.chip-input { width: 7rem !important; min-height: 36px !important; }
.settings-grid { display: grid; grid-template-columns: minmax(12rem, max-content) minmax(0, 14rem); gap: var(--s2) var(--s4); align-items: center; }
.settings-grid small { color: var(--muted); max-width: 52ch; }
.settings-grid:has(small) { grid-template-columns: minmax(12rem, max-content) minmax(0, 10rem) minmax(0, 1fr); }
.settings-grid label { margin: 0; }
.settings-grid button { grid-column: 1 / -1; justify-self: start; margin-top: var(--s4); }
.poker-table tr.to-act td { background: var(--sheet); font-weight: 650; }
.hand-panel { border: 2px solid var(--fg); padding: var(--s3) var(--s4); }
.hand-lines { list-style: none; padding: 0; margin: var(--s2) 0; font-variant-numeric: tabular-nums; }
.hand-lines li { padding: 2px 0; }
.act-row button { min-width: 6rem; }
.zone-green { color: var(--fg); }
.zone-yellow { background: #f3e2a6; color: #3b3000; padding: 0 4px; }
.zone-red { background: var(--accent); color: #fff; padding: 0 4px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.chip-labels { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: var(--s3); }
.chip-label { border: 1px dashed var(--fg); padding: var(--s3); break-inside: avoid; font-variant-numeric: tabular-nums; }
.chip-label b { font-size: 1.25rem; letter-spacing: .05em; }
@media print { header.house, footer.foot, .back, .no-print { display: none !important; } }
.prose code { font-size: .9375rem; background: var(--sheet); padding: 1px 6px; border-radius: 2px; }
@media (max-width: 860px) {
  .settings-grid, .settings-grid:has(small) { grid-template-columns: 1fr; }
  .settings-grid small { margin-bottom: var(--s2); }
  /* Phones: keep stack, chips in and the win box on screen; bought-in and net stay on wider screens. */
  .poker-table .hide-sm { display: none; }
  .poker-table th, .poker-table td { padding-left: 4px; padding-right: 4px; }
  .chip-input { width: 4.5rem !important; }
}

/* ---------- People / members lists ---------- */

.people > li, .members > li {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s2) 0;
  border-bottom: 1px solid var(--rule);
}
.members > li:first-child, .people > li:first-child { border-top: 2px solid var(--fg); }
.people .who-name, .members .who-name { font-weight: 650; text-decoration: none; }
.people .who-name:hover, .members .who-name:hover { text-decoration: underline; }
.people .detail { color: var(--muted); font-size: .875rem; }
.people .line { display: flex; flex-direction: column; min-width: 0; }
.facts-inline { display: flex; flex-wrap: wrap; gap: 0 var(--s3); }
.members .grow, .people .grow { flex: 1; min-width: 0; }
.search { display: flex; gap: var(--s2); align-items: flex-end; flex-wrap: wrap; }
.search label { width: 100%; margin-top: 0; }
.search input { flex: 1; min-width: 14rem; }

/* Person header (profiles) */
.person { display: flex; align-items: center; gap: var(--s5); margin-bottom: var(--s5); }
.facts { margin: 0 0 var(--s4); display: grid; grid-template-columns: max-content 1fr; gap: var(--s1) var(--s4); max-width: 44rem; }
.facts dt { font-weight: 650; color: var(--muted); font-size: .875rem; }
.facts dd { margin: 0; }
.chips { display: flex; flex-wrap: wrap; gap: var(--s2); }
.chips a {
  display: inline-flex; align-items: center; gap: var(--s2);
  padding: var(--s1) var(--s3) var(--s1) var(--s1);
  background: var(--jacket); color: var(--on-jacket);
  font-weight: 650; text-decoration: none; border-radius: 2px;
}
.chips a::before { content: ""; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--on-jacket); }
.role-tag { padding: 0 var(--s2); border-left: 1px solid currentColor; font-weight: 500; font-size: .8125rem; }

/* ---------- Sections and admin ---------- */

.section { border-top: 2px solid var(--fg); padding-top: var(--s4); margin-top: var(--s7); }
.section > h2:first-child { margin-top: 0; }
.subnav { display: flex; flex-wrap: wrap; gap: var(--s2); margin-bottom: var(--s5); }
.subnav a, .subnav strong {
  padding: var(--s1) var(--s3);
  border: 1px solid var(--rule-strong);
  border-radius: 2px;
  font-size: .875rem;
  font-weight: 650;
  text-decoration: none;
}
.subnav strong, .subnav a[aria-current] { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.perm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 0 var(--s4); max-width: none; }
.role { border-top: 2px solid var(--fg); margin-top: var(--s6); padding-top: var(--s3); }
.role h2 { margin: 0 0 var(--s2); display: flex; align-items: baseline; gap: var(--s3); flex-wrap: wrap; }
.role h2 small { font-size: .875rem; font-weight: 600; }
details { margin: var(--s3) 0; }
summary { cursor: pointer; font-weight: 650; padding: var(--s2) 0; }
.devices td:first-child { max-width: 32rem; overflow-wrap: anywhere; font-size: .875rem; }

.prose h2 { margin-top: var(--s6); }
.bullets { list-style: disc; padding-left: 1.25em; max-width: 68ch; }
.bullets li { margin: var(--s1) 0; }

/* Login: a single sheet */
.sheet {
  max-width: 30rem;
  margin: var(--s7) auto 0;
  background: var(--sheet);
  border-top: 8px solid var(--fg);
  padding: var(--s6);
}
.sheet h1 { margin-bottom: var(--s3); }

/* Home */
.home-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s5); flex-wrap: wrap; }
.home-head h1 { font-size: clamp(2.5rem, 1.5rem + 4vw, 4.5rem); line-height: 1; letter-spacing: -0.02em; }
.motto { font-family: var(--display); font-style: italic; font-size: 1.5rem; color: var(--accent); margin: var(--s2) 0 0; }

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

.foot { background: var(--house); color: var(--house-muted); font-size: .875rem; }
.foot .wrap { display: flex; flex-wrap: wrap; gap: var(--s3) var(--s5); align-items: center; padding-top: var(--s5); padding-bottom: var(--s5); }
.foot a { color: var(--on-house); font-weight: 650; }

/* ---------- Special room (poker): clothbound numbered edition ---------- */

body.room-special {
  --bg: #0b1511;
  --sheet: #12211a;
  --fg: #ece6d3;
  --muted: #b3ad9a;
  --rule: #2a3a32;
  --rule-strong: #5c6b62;
  --on-jacket: var(--gold);
  --jacket-deep: var(--gold);
  --house: #050a08;
  color-scheme: dark;
}
.room-special .jacket {
  border-bottom: 4px double var(--gold);
}
.room-special .jacket .plate { border-color: var(--gold); outline: 1px solid var(--gold); outline-offset: 4px; }
.room-special .jacket h1 { font-style: italic; font-weight: 500; letter-spacing: 0; }
.room-special main button:not(.textlink), .room-special main .btn { background: var(--gold); color: #0b1511; border-color: var(--gold); }
.room-special main button:not(.textlink):hover, .room-special main .btn:hover { background: transparent; color: var(--gold); }
.room-special .bar { background: var(--gold); }
.room-special .track { background: var(--rule); }
.room-special .event-meta .club-name::before { background: var(--gold); }
.room-special main .quiet, .room-special main form.quiet button, .room-special li form button, .room-special td form button { background: transparent; color: var(--fg); border-color: var(--rule-strong); }
.room-special .events > li:first-child, .room-special .members > li:first-child, .room-special th { border-color: var(--gold); }
.room-special .members .copy { color: var(--gold); font-family: var(--display); font-style: italic; font-weight: 600; min-width: 4ch; }
.room-special ::selection { background: var(--gold); color: #0b1511; }

/* ---------- Responsive ---------- */

/* The full bar (signed in, with admin links) needs about 1200px on one line;
   narrower windows get the Menu button instead of a squeezed bar. */
@media (max-width: 1240px) {
  .house .wrap > .nav { display: none; }
  .house { position: relative; z-index: 10; }
  .menu { display: block; }
  .menu[open] > .nav {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    background: var(--house);
    padding: var(--s2) var(--gutter) var(--s4);
    box-shadow: 0 12px 24px rgb(0 0 0 / .25);
  }
}

@media (max-width: 860px) {
  :root { --gutter: 16px; }
  .event-with-poster { grid-template-columns: 1fr; }
  .event-poster, .event-with-poster .event-description { grid-column: 1; grid-row: auto; }
  .event-poster { max-height: 70vh; justify-self: start; width: auto; max-width: 100%; }
  .house .wrap { gap: var(--s3); padding-top: var(--s1); padding-bottom: var(--s1); }
  .wordmark { min-height: 44px; }
  .shelf { mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent); }
  .jacket-inner { flex-direction: column; gap: var(--s4); padding-top: var(--s6); padding-bottom: var(--s6); }
  .plate { padding: 6px; }
  .plate .pic > * { width: 96px; height: 96px; }
  .club-body { grid-template-columns: 1fr; gap: 0; }
  .spine { --h: 260px; width: 64px; }
  .shelf > li:nth-child(4n+2) > .spine { --h: 284px; }
  .shelf > li:nth-child(4n+3) > .spine { --h: 244px; }
  .shelf > li:nth-child(4n) > .spine { --h: 272px; }
  .spine-title { font-size: 1.125rem; }
  .sheet { padding: var(--s5) var(--s4); margin-top: var(--s5); }
  h1 { font-size: 1.875rem; }
  .facts { grid-template-columns: 1fr; }
  .events > li { grid-template-columns: 48px minmax(0, 1fr); gap: var(--s3); }
  .date b { font-size: 1.75rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0s !important; }
  .spine:hover, .spine:focus-visible { transform: none; }
}

/* ---------- Home: the café's front door ---------- */

.home-head { align-items: stretch; }
.home-head > div { flex: 1 1 32rem; }
.home-head .lede { max-width: 52ch; margin-bottom: 0; }
.at-cafe { flex: 0 1 22rem; border-top: 2px solid var(--fg); padding-top: var(--s3); align-self: flex-end; }
.at-cafe h2 { font-size: 1.0625rem; font-family: var(--font); font-weight: 700; margin: 0 0 var(--s2); display: flex; align-items: center; gap: var(--s3); }
.at-cafe .stamp { transform: rotate(-2deg); }
.at-cafe p { margin: 0 0 var(--s2); }
.at-cafe-links { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s4); font-weight: 650; font-size: .9375rem; }

.home-split { display: grid; grid-template-columns: 2fr 1fr; gap: var(--s7); }
.home-split h2 { margin-top: 0; }
.word { border-top: 2px solid var(--fg); padding-top: var(--s3); align-self: start; }
.word h2 { font-size: 1.0625rem; font-family: var(--font); font-weight: 700; margin: 0 0 var(--s4); }
.word-big { font-family: var(--display); font-weight: 700; font-size: clamp(2.5rem, 1.5rem + 3vw, 3.75rem); line-height: 1.05; margin: 0; overflow-wrap: anywhere; }
.word-say { color: var(--accent); font-weight: 650; letter-spacing: .02em; margin: var(--s2) 0 var(--s3); }
.word-means { font-family: var(--display); font-style: italic; font-size: 1.125rem; margin: 0 0 var(--s4); }

.home-moments { margin-top: var(--s6); }
/* A swipeable row of photos; snaps photo by photo, no script. */
.moments-strip {
  list-style: none; padding: 0 0 var(--s3); margin: 0 0 var(--s3); display: flex; gap: var(--s4);
  overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: thin; scrollbar-color: var(--rule-strong) transparent;
}
.moments-strip > li { flex: 0 0 min(22rem, 78%); scroll-snap-align: start; }
.moments-strip figure { margin: 0; padding: 8px; border: 1px solid var(--rule-strong); background: var(--sheet); }
.moments-strip img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.moments-strip figcaption { font-family: var(--display); font-style: italic; font-size: 1.0625rem; padding: var(--s2) var(--s1) 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- Languages ---------- */

.lang-index { list-style: none; padding: 0; margin: var(--s6) 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: 0 var(--s6); border-top: 2px solid var(--fg); }
.lang-index a { display: flex; flex-direction: column; padding: var(--s3) 0; border-bottom: 1px solid var(--rule); text-decoration: none; color: var(--fg); }
.lang-index a:hover .lang-native, .lang-index a:focus-visible .lang-native { color: var(--accent); }
.lang-native { font-family: var(--display); font-weight: 700; font-size: 1.5rem; line-height: 1.2; }
.lang-native[dir="rtl"] { align-self: flex-start; }
.lang-name { color: var(--muted); font-size: .875rem; font-weight: 600; }
.lang-title { font-size: clamp(2.5rem, 1.5rem + 4vw, 4.5rem); line-height: 1.1; letter-spacing: -0.01em; }
.words { max-width: 46rem; margin-top: var(--s5); }
.words td { vertical-align: baseline; }
.words-word { font-family: var(--display); font-weight: 700; font-size: 1.375rem; }
.words-say { color: var(--accent); font-weight: 650; }
.lang-pager { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s3); max-width: 46rem; font-weight: 650; }

/* ---------- Moments ---------- */

.moments { list-style: none; padding: 0; margin: var(--s6) 0 0; columns: 3 18rem; column-gap: var(--s5); }
.moments > li { break-inside: avoid; margin-bottom: var(--s5); }
.moments figure { margin: 0; padding: 8px; border: 1px solid var(--rule-strong); background: var(--sheet); }
.moments img { display: block; width: 100%; height: auto; }
.moments figcaption { font-family: var(--display); font-style: italic; font-size: 1.0625rem; padding: var(--s3) var(--s1) var(--s1); }
.moments form { margin: var(--s2) 0 0; }

/* ---------- Events: the month at a glance ---------- */

.cal { margin: var(--s5) 0 var(--s7); }
.cal-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s2) var(--s5); }
.cal-head h2 { margin: 0; }
.cal-nav { display: flex; gap: var(--s4); font-weight: 650; font-size: .9375rem; }
.month { table-layout: fixed; margin-top: var(--s3); }
.month th { text-align: left; }
.month td { height: 6.5rem; padding: var(--s2); border: 1px solid var(--rule); vertical-align: top; }
.month td.out { color: var(--muted); background: transparent; }
.month td.out .cal-day { opacity: .55; }
.month td.today { box-shadow: inset 0 0 0 2px var(--fg); }
.cal-day { display: block; font-family: var(--display); font-weight: 700; font-size: 1.125rem; line-height: 1; margin-bottom: var(--s1); }
.today .cal-day { color: var(--accent); }
.cal-ev { display: block; font-size: .8125rem; font-weight: 600; line-height: 1.3; text-decoration: none; color: var(--fg); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-ev::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 5px; background: var(--jacket); vertical-align: 1px; }
.cal-ev:hover .cal-title, .cal-ev:focus-visible .cal-title { text-decoration: underline; }
.cal-time { color: var(--muted); font-variant-numeric: tabular-nums; }
/* A further month sits under the first with some air between. */
.cal .month + .cal-head { margin-top: var(--s6); }
.cal-count { display: inline-flex; align-items: center; gap: 2px; margin-left: var(--s2); }
.cal-count-label { margin-right: var(--s1); color: var(--muted); font-weight: 500; }
.cal-count > a, .cal-count > strong { min-width: 28px; padding: 2px var(--s1); border: 1px solid var(--rule-strong); text-align: center; text-decoration: none; }
.cal-count strong { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.cal-count a:hover, .cal-count a:focus-visible { border-color: var(--fg); }
/* Days that open a new event. */
a.cal-day { color: var(--fg); text-decoration: none; }
a.cal-day:hover, a.cal-day:focus-visible { color: var(--accent); }
.month:not(.timetable) a.cal-day:hover::after, .month:not(.timetable) a.cal-day:focus-visible::after { content: " +"; }
.repeat-line { font-weight: 600; color: var(--muted); margin-top: calc(-1 * var(--s2)); }
.pick-club { list-style: none; padding: 0; margin: var(--s5) 0; display: grid; gap: var(--s2); max-width: 34rem; }
.pick-club a { display: block; padding: var(--s3) var(--s4); border: 1px solid var(--rule-strong); border-left: 6px solid var(--jacket); font-weight: 650; text-decoration: none; color: var(--fg); }
.pick-club small { font-weight: 500; color: var(--muted); }
.pick-club a:hover, .pick-club a:focus-visible { border-color: var(--fg); border-left-color: var(--jacket); }
@media (max-width: 860px) {
  .month td { height: 3.75rem; padding: var(--s1); }
  .cal-day { font-size: .9375rem; }
  .cal-time, .cal-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .cal-ev { display: inline-block; margin-right: 2px; }
  .cal-ev::before { width: 10px; height: 10px; margin: 0; }
}

/* ---------- Café timetable ---------- */

/* The timetable is a working screen: it takes more of a wide window than reading pages do. */
.wrap.tt-wide { max-width: 1440px; }
.tt-head { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--s4); flex-wrap: wrap; margin-bottom: var(--s5); }
.tt-head h2 { margin: 0; font-size: clamp(2rem, 4vw, 3.25rem); line-height: 1; }
.tt-kicker { margin: 0 0 var(--s1); font-size: .8125rem; font-weight: 650; color: var(--muted); }
.tt-nav { display: flex; gap: var(--s2); align-items: stretch; }
.tt-step { display: inline-flex; border: 1px solid var(--rule-strong); border-radius: 10px; background: var(--sheet); overflow: hidden; }
.tt-step a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 var(--s3); color: var(--fg); text-decoration: none; font-weight: 650; }
.tt-step a + a { border-left: 1px solid var(--rule); }
.tt-step a:hover, .tt-step a:focus-visible { background: var(--rule); }
.tt-nav .btn.quiet { min-height: 44px; border-radius: 10px; background: var(--sheet); font-size: .9375rem; padding: 0 var(--s4); border-width: 1px; }

.tt-tools { display: flex; justify-content: space-between; align-items: center; gap: var(--s3) var(--s5); flex-wrap: wrap; margin-bottom: var(--s4); }
.tt-pick { display: flex; align-items: center; gap: var(--s3); margin: 0; font-size: .9375rem; font-weight: 500; color: var(--muted); }
.tt-pick select { width: auto; min-width: 12rem; min-height: 40px; border-radius: 10px; color: var(--fg); }
.cover-key { display: flex; align-items: center; gap: var(--s1) var(--s3); flex-wrap: wrap; margin: 0; font-size: .8125rem; color: var(--muted); }
.cover-key span { display: inline-flex; align-items: center; gap: 5px; }
.dot { display: inline-block; width: 12px; height: 10px; border-radius: 3px; }

/* Hours on shift: one olive hue, light to dark; a gap is café red, a different colour on purpose. */
:is(.cover i, .dot).c1 { background: color-mix(in oklab, var(--olive) 28%, var(--sheet)); }
:is(.cover i, .dot).c2 { background: color-mix(in oklab, var(--olive) 52%, var(--sheet)); }
:is(.cover i, .dot).c3 { background: color-mix(in oklab, var(--olive) 78%, var(--sheet)); color: #fff; }
:is(.cover i, .dot).c4 { background: var(--olive-deep); color: #fff; }
:is(.cover i, .dot).gap { background: color-mix(in oklab, var(--cafe-red) 50%, var(--sheet)); color: #fff; }

.tt-board { display: grid; grid-template-columns: minmax(0, 1fr) 26rem; gap: var(--s5); align-items: start; margin-bottom: var(--s8); }
.tt-cal { border: 1px solid var(--rule); border-radius: 14px; overflow: hidden; background: var(--sheet); }
.timetable { margin: 0; table-layout: fixed; border-collapse: collapse; }
.timetable th { padding: var(--s3) var(--s3); font-size: .75rem; font-weight: 650; color: var(--muted); border-bottom: 1px solid var(--rule); }
.timetable th:nth-child(n+6) { width: 10%; }
.timetable td { height: 7.25rem; padding: var(--s3); border: 0; border-top: 1px solid var(--rule); border-left: 1px solid var(--rule); vertical-align: top; transition: opacity .15s var(--ease-out); }
.timetable td:first-child { border-left: 0; }
.timetable td.weekend, .timetable td.out { background: color-mix(in oklab, var(--rule) 40%, var(--bg)); }
.timetable td.out .num { visibility: hidden; }
.timetable td.weekend .num { color: var(--muted); }
.timetable .cal-day { display: flex; justify-content: space-between; align-items: center; color: var(--fg); text-decoration: none; margin-bottom: var(--s2); }
.timetable .num { font-family: var(--display); font-weight: 700; font-size: 1.25rem; line-height: 1; }
.timetable td.today .num { display: inline-grid; place-items: center; width: 34px; height: 34px; margin: -6px 0; border-radius: 50%; background: var(--fg); color: var(--bg); font-size: 1.0625rem; }
.today-tag { font-family: var(--font); font-size: .6875rem; font-weight: 700; color: var(--muted); }
.timetable a.cal-day:hover .num, .timetable a.cal-day:focus-visible .num { color: var(--accent); }
.timetable td.today a.cal-day:hover .num { color: var(--bg); background: var(--accent); }
.timetable td.today { box-shadow: none; }
.timetable td:has(a.cal-day[aria-current]) { box-shadow: inset 0 0 0 2px var(--fg); background: var(--sheet); }
.timetable a.cal-day:focus { outline: none; }
.timetable a.cal-day:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.cover { display: flex; flex-wrap: nowrap; gap: 3px; }
.cover i { display: block; flex: 0 1 11px; min-width: 4px; height: 11px; border-radius: 3px; background: var(--rule); }
.cover-count { display: block; margin-top: var(--s2); font-size: .8125rem; color: var(--fg); }
.cover-count .you { color: var(--accent); }
.cover-gap { display: block; font-size: .8125rem; font-weight: 650; color: var(--cafe-red-deep); white-space: nowrap; }
/* Highlight a person: their days stay, the rest step back. */
.timetable.dim td:not(.hl):not(.out):not(.weekend) { opacity: .35; }
.timetable td.hl .num { color: var(--accent); }

.tt-panel-wrap { position: sticky; top: var(--s4); }
.dayview { border: 1px solid var(--rule); border-radius: 14px; background: var(--sheet); padding: var(--s5); }
.day-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s3); margin: 0; }
.day-head h3 { margin: 0; font-family: var(--display); font-weight: 700; font-size: 2rem; line-height: 1.05; }
.day-head .btn { border-radius: 10px; min-height: 44px; white-space: nowrap; }
.day-chips { display: flex; flex-wrap: wrap; gap: var(--s2); margin: var(--s4) 0; }
.day-chips span { padding: 4px var(--s3); border-radius: 999px; background: color-mix(in oklab, var(--rule) 70%, var(--sheet)); font-size: .875rem; font-variant-numeric: tabular-nums; }
.day-chips .gap { color: var(--cafe-red-deep); background: color-mix(in oklab, var(--cafe-red) 16%, var(--sheet)); font-weight: 650; }
.day-cover { display: grid; grid-template-columns: 6rem 1fr; align-items: center; gap: var(--s2); padding-bottom: var(--s3); border-bottom: 1px solid var(--rule); font-size: .875rem; font-weight: 650; }
.cover.big { display: grid; grid-template-columns: repeat(12, 1fr); gap: 3px; }
.cover.big i { width: auto; height: 24px; display: grid; place-items: center; border-radius: 5px; font-style: normal; font-size: .6875rem; font-weight: 700; color: var(--fg); }
.cover.big i.c3, .cover.big i.c4, .cover.big i.gap { color: #fff; }
.gantt-rows { list-style: none; margin: 0; padding: 0; }
.gantt-rows li { display: grid; grid-template-columns: 32px minmax(0, 8rem) 1fr; gap: var(--s2) var(--s3); align-items: center; padding: var(--s3) 0; border-bottom: 1px solid var(--rule); transition: background-color .15s var(--ease-out); }
.gantt-rows li.hl { background: color-mix(in oklab, var(--accent) 8%, transparent); }
.initial { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: color-mix(in oklab, var(--wood) 35%, var(--sheet)); font-size: .8125rem; font-weight: 700; }
.gantt-rows li.mine .initial { background: var(--accent); color: #fff; }
.gantt-who { font-size: .875rem; line-height: 1.3; overflow-wrap: anywhere; }
.gantt-who b { display: block; font-weight: 650; }
.gantt-time { display: flex; align-items: center; flex-wrap: wrap; gap: 0 var(--s1); color: var(--muted); font-variant-numeric: tabular-nums; }
.gantt-event, .gantt-note { flex-basis: 100%; font-size: .75rem; }
.gantt-svg { display: block; width: 100%; overflow: visible; }
.gantt-bg { fill: color-mix(in oklab, var(--rule) 55%, var(--sheet)); }
.gantt-tick { stroke: var(--sheet); stroke-width: 1.5; }
.gantt-bar { fill: var(--olive); }
.gantt-rows li.mine .gantt-bar { fill: var(--accent); }
.gantt-svg a:hover .gantt-bar { fill: var(--olive-deep); }
.gantt-rows li.mine .gantt-svg a:hover .gantt-bar { fill: var(--accent-deep); }
.row-del { display: inline-flex; margin: 0; }
.row-del button { min-height: 24px; min-width: 24px; padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--muted); font-size: 1.0625rem; font-weight: 400; line-height: 1; }
.row-del button.armed, .row-del button.armed:hover, .row-del button.armed:focus-visible { min-width: 0; padding: 0 var(--s2); min-height: 24px; font-size: .8125rem; font-weight: 700; background: var(--cafe-red); color: #fff; }
.row-del button:hover, .row-del button:focus-visible { background: color-mix(in oklab, var(--cafe-red) 14%, transparent); color: var(--cafe-red-deep); }

.tt-split { display: grid; grid-template-columns: 2fr 1fr; gap: var(--s7); }
.tt-split h2 { margin-top: 0; }
.tt-split.solo { grid-template-columns: minmax(0, 40rem); }
.tt-side { display: flex; flex-direction: column; gap: var(--s5); align-items: stretch; }
.tt-side > form { margin: 0; }
.hours td { padding: var(--s1) var(--s2); }
.hours tbody tr:nth-child(odd) { background: color-mix(in oklab, var(--rule) 30%, transparent); }
.tt-panel summary { cursor: pointer; font-weight: 650; padding: var(--s2) 0; }
.tt-panel p { font-size: .875rem; color: var(--muted); }
.link-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s3); }
.link-list form { margin: 0; }
.link-list label { margin: 0 0 var(--s1); }
.link-row { display: flex; gap: var(--s2); align-items: center; }
.link-row input { min-width: 0; height: 40px; min-height: 0; margin: 0; padding: var(--s1) var(--s2); font-size: .9375rem; }
@media (max-width: 1080px) {
  .tt-board { grid-template-columns: 1fr; }
  .tt-panel-wrap { position: static; }
}
@media (max-width: 860px) {
  .tt-split { grid-template-columns: 1fr; gap: var(--s6); }
  .timetable th { padding: var(--s2) var(--s1); }
  .timetable td { height: auto; min-height: 4.5rem; padding: var(--s2) 4px; }
  .timetable .num { font-size: 1rem; }
  .timetable td.today .num { width: 26px; height: 26px; margin: -4px 0; font-size: .875rem; }
  .today-tag { display: none; }
  /* One bar per hour, sharing the cell's width, so a day never spills into the next. */
  .cover { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 1px; }
  .cover i { min-width: 0; width: auto; height: 6px; border-radius: 1px; }
  .cover-count { font-size: .8125rem; font-weight: 650; }
  .cover-count .tt-word, .cover-count .you { display: none; }
  /* The red bars already mark gaps; the cell keeps only a short count. */
  .cover-gap { font-size: .6875rem; white-space: normal; }
  .cover-gap .tt-word { display: none; }
  .dayview { padding: var(--s4); }
  .gantt-rows li { grid-template-columns: 32px 1fr; }
  .gantt-rows li .gantt-svg { grid-column: 1 / -1; }
  .day-cover { grid-template-columns: 1fr; }
}

/* ---------- Screening discs ---------- */

/* The showcase: one disc turning over its own night. Colours come from
   /discs/{id}/colors.css (--night, --glow, --ink). */
@property --t { syntax: '<angle>'; inherits: true; initial-value: 0deg; }
body.disc-room {
  min-height: 100vh; margin: 0; display: grid; place-items: center; align-content: center; gap: 28px;
  padding: 16px max(16px, env(safe-area-inset-left, 0px)); overflow: hidden; user-select: none;
  background: radial-gradient(ellipse at 50% 35%, var(--glow), var(--night) 70%); color: var(--ink); color-scheme: dark;
}
.disc-room ::selection { background: var(--ink); color: var(--night); }
.disc-nav { position: fixed; top: 16px; left: max(16px, env(safe-area-inset-left, 0px)); display: flex; gap: var(--s4); font-weight: 650; font-size: .9375rem; }
.disc-nav a { color: var(--ink); opacity: .8; text-decoration-color: currentColor; }
.disc-nav a:hover, .disc-nav a:focus-visible { opacity: 1; }
.export .disc-nav, :root:fullscreen .disc-nav { display: none; }
:root:-webkit-full-screen .disc-nav { display: none; }
.stage { perspective: 1600px; width: min(70vmin, 540px); max-width: 100%; aspect-ratio: 1; position: relative; cursor: pointer; border-radius: 50%; }
.export .stage { width: 82vmin; }
:root:fullscreen .stage { width: 72vmin; }
.stage:focus-visible { outline: 2px solid var(--ink); outline-offset: 10px; }
.tilt { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateZ(-10deg) rotateX(8deg); }
.spin { position: absolute; inset: 0; transform-style: preserve-3d; animation: spin 12s linear infinite; }
@keyframes spin { to { transform: rotateY(360deg); --t: 360deg; } }
.paused .spin { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .spin { animation-play-state: paused; } }
/* Thickness: stacked rims for the edge and the hole wall, 2 px either side. */
.edge { position: absolute; inset: 0; border-radius: 50%; border: 1.2px solid #8fa3a0; }
.edge.hole { inset: 43.75%; }
.edge.z0 { transform: translateZ(-2px); } .edge.z1 { transform: translateZ(-1.5px); } .edge.z2 { transform: translateZ(-1px); }
.edge.z3 { transform: translateZ(-.5px); } .edge.z4 { transform: translateZ(0); } .edge.z5 { transform: translateZ(.5px); }
.edge.z6 { transform: translateZ(1px); } .edge.z7 { transform: translateZ(1.5px); } .edge.z8 { transform: translateZ(2px); }
.edge.z8:not(.hole) { border-color: var(--glow); }
.face { position: absolute; inset: 0; border-radius: 50%; backface-visibility: hidden; transform: translateZ(2.25px); }
.face.back { margin: 0; transform: rotateY(180deg) translateZ(2.25px); }
.face > * { position: absolute; inset: 0; border-radius: 50%; }
.face svg { width: 100%; height: 100%; display: block; }
.disc-night { fill: var(--night); }
.fade-0 { stop-color: var(--night); stop-opacity: 0; }
.fade-1 { stop-color: var(--night); stop-opacity: .85; }
.disc-hub-ring { stroke: var(--night); }
.disc-arc { fill: var(--ink); font-family: var(--font); font-weight: 700; }
/* Bare aluminium and rainbow on the read side; the rainbow slides as the disc turns. */
.foil {
  background:
    repeating-radial-gradient(closest-side, #fff0 0 1.1%, #ffffff1a 1.3%, #fff0 1.5%),
    conic-gradient(from calc(var(--t) * 1.5),
      #d5dfe0 0deg, #f6c3df 14deg, #fbe6a2 24deg, #bdf0c6 34deg, #a6dbf6 44deg, #ccbcf7 54deg, #dde5e6 72deg, #fafcfc 110deg, #aebcbf 150deg,
      #d5dfe0 172deg, #f6c3df 194deg, #fbe6a2 204deg, #bdf0c6 214deg, #a6dbf6 224deg, #ccbcf7 234deg, #dde5e6 252deg, #fafcfc 290deg, #aebcbf 330deg, #d5dfe0 360deg);
  -webkit-mask: radial-gradient(closest-side, #0000 22.6%, #000 23% 98%, #0000 98.4%);
          mask: radial-gradient(closest-side, #0000 22.6%, #000 23% 98%, #0000 98.4%);
  filter: saturate(1.35) brightness(.97);
}
.gloss { pointer-events: none;
  background: conic-gradient(from calc(var(--t) * -1 + 30deg), #fff0 0 40deg, #ffffff30 50deg, #fff0 60deg 220deg, #ffffff24 230deg, #fff0 240deg);
  -webkit-mask: radial-gradient(closest-side, #0000 12.4%, #000 12.8% 99.2%, #0000 100%);
          mask: radial-gradient(closest-side, #0000 12.4%, #000 12.8% 99.2%, #0000 100%); }
.shadow { position: absolute; left: 18%; right: 18%; bottom: -10%; height: 6%; border-radius: 50%;
  background: radial-gradient(ellipse, #00000080, #0000 70%); filter: blur(6px); }
.disc-room .event { text-align: center; display: grid; gap: 4px; }
.disc-room .event .when { font-family: var(--display); font-weight: 700; font-size: clamp(26px, 5vmin, 40px); line-height: 1.1; text-wrap: balance; }
.disc-room .event .what { font-size: 13px; font-weight: 650; letter-spacing: .18em; text-transform: uppercase; opacity: .75; }
.export .event .when { font-size: 7.5vmin; }
.export .event .what { font-size: 2.8vmin; }

/* On the club page: the discs as a row of still pressings. */
.discs { list-style: none; padding: 0; margin: 0 0 var(--s4); display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: var(--s5) var(--s4); }
.discs a { display: block; text-decoration: none; color: var(--fg); }
.discs img {
  display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 50%;
  -webkit-mask: radial-gradient(closest-side, #0000 18.5%, #000 19%);
          mask: radial-gradient(closest-side, #0000 18.5%, #000 19%);
  box-shadow: 0 6px 14px rgb(0 0 0 / .18);
  transition: transform .45s cubic-bezier(.16, 1, .3, 1);
}
.discs img.f-top { object-position: 50% 0; }
.discs img.f-bottom { object-position: 50% 100%; }
.discs a:hover img, .discs a:focus-visible img { transform: rotate(-24deg); }
.discs-title { display: block; font-family: var(--display); font-weight: 700; font-size: 1.0625rem; line-height: 1.2; margin-top: var(--s2); }
.discs-when { display: block; color: var(--muted); font-size: .8125rem; font-weight: 600; }
.disc-colours label { display: inline-flex; align-items: center; gap: var(--s2); margin-right: var(--s5); }
@media (prefers-reduced-motion: reduce) { .discs img { transition: none; } }

/* ---------- About: the house's own jacket, masthead and imprint ---------- */

.about-jacket .jacket-inner { padding-top: var(--s8); padding-bottom: var(--s7); }
.about-jacket h1 { font-size: clamp(2.5rem, 1.5rem + 4vw, 4.5rem); letter-spacing: -0.02em; }
.about-jacket .stamp { color: var(--on-jacket); transform: rotate(-2deg); }
.about-jacket .textlink { font-weight: 650; margin-left: var(--s3); }

/* Spoken lines: Playfair italic between café-red quotes. */
.said { font-family: var(--display); font-style: italic; font-size: 1.125rem; line-height: 1.45; margin: 0; }
.said::before { content: "\201C"; color: var(--accent); margin-right: 2px; }
.said::after { content: "\201D"; color: var(--accent); margin-left: 2px; }

.values { list-style: none; padding: 0; margin: var(--s7) 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s6); }
.values li { border-top: 2px solid var(--fg); padding-top: var(--s4); }
.values .said { font-size: 1.5rem; line-height: 1.2; margin-bottom: var(--s2); }
.values p:last-child { color: var(--muted); margin: 0; max-width: 40ch; }

.masthead-section { margin-top: var(--s8); }
.masthead-section > h2 { font-size: 2.5rem; letter-spacing: -0.01em; margin: 0 0 var(--s2); }
.masthead-section > .lede { margin: 0 0 var(--s6); max-width: 60ch; }
.masthead { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(16.5rem, 1fr)); gap: var(--s7) var(--s6); }
.masthead > li { border-top: 2px solid var(--fg); padding-top: var(--s4); display: flex; flex-direction: column; }
/* Framed like the club cover plate: paper mat inside a hairline. */
.portrait { padding: 8px; border: 1px solid var(--rule-strong); background: var(--sheet); margin-bottom: var(--s4); }
.portrait .pic { display: block; border-radius: 0; width: 100%; }
.portrait img, .portrait svg { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 25%; }
.masthead h3 { font-family: var(--display); font-size: 1.5rem; font-weight: 700; line-height: 1.1; margin: 0; }
.masthead-role { color: var(--accent); font-weight: 650; font-size: .9375rem; margin: var(--s1) 0 var(--s3); }
.masthead-facts { display: grid; grid-template-columns: max-content 1fr; gap: var(--s1) var(--s3); margin: 0 0 var(--s4); font-size: .875rem; }
.masthead-facts dt { font-weight: 650; color: var(--muted); }
.masthead-facts dd { margin: 0; }
.masthead .said { padding-top: var(--s3); border-top: 1px solid var(--rule); }
.masthead form { margin: var(--s4) 0 0; }

.card-sheet { margin: var(--s8) 0 0; max-width: 34rem; }

/* The imprint: an ink band closing the page into the footer. */
main.page:has(> .visit:last-child) { padding-bottom: 0; }
.visit { background: var(--house); color: var(--on-house); margin-top: var(--s8); border-bottom: 1px solid var(--rule-strong); }
.visit ::selection { background: var(--on-house); color: var(--house); }
.visit-inner { display: grid; grid-template-columns: 1fr 1.25fr; gap: var(--s7); padding-top: var(--s8); padding-bottom: var(--s8); align-items: end; }
.visit-call { font-family: var(--display); font-style: italic; font-size: clamp(2.5rem, 1.5rem + 4vw, 4.5rem); line-height: 1; margin: 0 0 var(--s4); }
.visit-call::before { content: "\201C"; color: var(--accent); }
.visit-call::after { content: "\201D"; color: var(--accent); }
.visit h2 { margin: 0 0 var(--s2); }
.visit-inner > div > p:last-child { color: var(--house-muted); margin: 0; max-width: 40ch; }
.visit-facts { margin: 0; }
.visit-facts > div { display: grid; grid-template-columns: 9rem 1fr; gap: var(--s4); border-top: 1px solid var(--rule-strong); padding: var(--s3) 0; }
.visit-facts > div:last-child { border-bottom: 1px solid var(--rule-strong); }
.visit-facts dt { font-size: .8125rem; font-weight: 650; color: var(--house-muted); padding-top: 2px; }
.visit-facts dd { margin: 0; }
.visit a { color: var(--on-house); }

@media (max-width: 860px) {
  .about-jacket .jacket-inner { padding-top: var(--s7); }
  .values { grid-template-columns: 1fr; gap: var(--s5); }
  .values .said { font-size: 1.25rem; }
  .masthead-section > h2 { font-size: 1.875rem; }
  .visit-inner { grid-template-columns: 1fr; gap: var(--s6); padding-top: var(--s7); padding-bottom: var(--s7); }
  .visit-facts > div { grid-template-columns: 1fr; gap: var(--s1); }
  .home-split { grid-template-columns: 1fr; gap: var(--s6); }
  .lang-native { font-size: 1.25rem; }
}

/* The owner trying the site from a test account, and the way back. */
form.inline { display: inline-block; margin: 0 .5rem .5rem 0; }
.view-as { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); margin-inline: auto; }
.moments-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); }
.carousel-nav { display: flex; gap: var(--s2); margin: 0; }
.carousel-nav[hidden] { display: none; }
.carousel-nav button { min-width: 44px; }
.members .role-tag { color: var(--accent); white-space: nowrap; }
.members.team { margin-bottom: var(--s5); }
.roles-line { margin: var(--s2) 0 0; color: var(--accent); }
.roles-line .role-tag:first-child { border-left: 0; padding-left: 0; }
.link-list .link-row button[type=submit] { margin: 0; min-height: 40px; flex: none; }
.my-hours-total { font-size: 1.125rem; }
.my-hours-total b { font-family: var(--display); font-size: 2.5rem; line-height: 1; margin-right: var(--s1); font-variant-numeric: tabular-nums; }
.my-hours-total span { color: var(--muted); }

/* ---------- Home: the 3D shelf (shelf3d.js) ----------
   Collana in motion: the same club spines, standing on the ink plank. The centred one turns out to show
   its jacket. No shadows, 2px corners, Playfair for titles, Inter for what is operated. Without JS
   (or under .cs-fallback) the plain shelf above stays as it was. */

.cs { --H: clamp(250px, min(44vh, 30vw), 400px); margin: var(--s6) 0 var(--s7); overflow: hidden; }
.cs.cs-on .cs-fallback { display: none; }
.cs-view {
  position: relative;
  height: calc(var(--H) + 80px);
  perspective: 2200px;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.cs-plank { position: absolute; left: 0; right: 0; top: calc(50% + var(--H) / 2); height: 8px; background: var(--fg); }
.cs-stage { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform-style: preserve-3d; }
.cs-tape { position: absolute; left: 0; top: 0; width: 0; height: 0; transform-style: preserve-3d; will-change: transform; }
@media (hover: hover) { .cs-tape { transition: translate .2s; } .cs-tape:not(.mid):hover { translate: 0 calc(var(--H) * -.03); } }
.cs-f {
  position: absolute;
  top: calc(var(--H) / -2);
  height: var(--H);
  border-radius: 2px;
  backface-visibility: hidden;
  background: var(--j);
  color: var(--oj);
  cursor: pointer;
}
.cs-f::after { content: ""; position: absolute; inset: 0; background: #000; opacity: var(--shade, 0); pointer-events: none; }
.cs-sp {
  width: var(--ws);
  left: calc(var(--ws) / -2);
  transform: translateZ(calc(var(--d) / 2));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  padding: var(--s4) 0 var(--s3);
}
.cs-sp .spine-title { font-size: clamp(1rem, calc(var(--ws) * .3), 1.3125rem); max-height: 70%; overflow: hidden; }
.cs-sp .spine-meta { max-height: 30%; overflow: hidden; white-space: nowrap; }
.cs-cv {
  width: var(--d);
  left: calc(var(--d) / -2);
  transform: rotateY(90deg) translateZ(calc(var(--ws) / 2));
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: calc(var(--d) * .09);
}
.cs-ct { margin: 0; font-size: calc(var(--d) * .15); font-weight: 800; line-height: 1; letter-spacing: -0.015em; overflow-wrap: anywhere; }
.cs-cm { margin: 0; padding-top: var(--s2); border-top: 2px solid currentColor; font-size: .8125rem; font-weight: 600; }
.cs-tape.special .cs-f { box-shadow: inset 0 0 0 4px var(--j), inset 0 0 0 5px var(--gold); color: var(--gold); }
.cs-tape.joined .cs-sp::before {
  content: "";
  position: absolute;
  top: 0;
  right: 5%;
  width: 8px;
  height: 28px;
  background: var(--oj);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 80%, 0 100%);
}
.cs-cap { display: flex; align-items: center; justify-content: center; gap: var(--s4); padding: var(--s5) var(--gutter) 0; }
.cs-txt { width: min(100%, 560px); text-align: center; }
.cs-m { overflow: hidden; display: grid; }
.cs-m > * { display: block; grid-area: 1 / 1; }
.cs-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.cs-t { font-family: var(--display); font-weight: 700; font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem); line-height: 1.2; letter-spacing: -0.01em; }
.cs-t a { text-decoration-thickness: 2px; }
.cs-s { color: var(--muted); font-size: .875rem; font-weight: 600; min-height: 1.5em; }
.cs-arr { flex: none; min-width: 44px; min-height: 44px; padding: 0; font-size: 1.125rem; }

@media (max-width: 860px) {
  .cs { --H: clamp(230px, min(62vw, 42svh), 340px); margin: var(--s5) 0 var(--s6); }
  .cs-cap { gap: var(--s3); }
  .cs-ct { font-size: calc(var(--d) * .17); }
}
@media (prefers-reduced-motion: reduce) { .cs-tape { will-change: auto; } }

/* club picture / letter on the turning books (cloned from the flat spine) */
.cs-f .pic { display: block; flex: none; line-height: 0; box-shadow: 0 0 0 2px var(--oj); }
.cs-f .pic > * { width: calc(var(--ws) * .62); height: calc(var(--ws) * .62); object-fit: cover; }
.cs-cv .pic > * { width: calc(var(--d) * .26); height: calc(var(--d) * .26); }
.cs-f .pic-letter circle { fill: var(--oj); }
.cs-f .pic-letter text { fill: var(--j); }
.cs-tape.special .cs-f .pic { box-shadow: 0 0 0 2px var(--gold); }
.cs-top { display: flex; flex-direction: column; gap: var(--s3); align-items: flex-start; }

/* a club with a real picture: it sits on the cover as a ruled plate */
.cs-cv .pic.has-photo { width: 100%; }
.cs-cv .pic.has-photo > img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 0; }

/* poster clubs: the club's poster is the whole cover (data-poster on the spine link); a crop of it tops the spine */
.cs-tape.poster .cs-cv { background-size: cover; background-repeat: no-repeat; padding: 0; }
.cs-art { flex: none; width: 84%; aspect-ratio: 1 / 1.15; border-radius: 2px; background-size: cover; background-repeat: no-repeat; box-shadow: 0 0 0 1px rgba(0, 0, 0, .35); }
.cs-tape.poster.special .cs-art { box-shadow: 0 0 0 1px var(--gold); }
.cs-tape.poster .cs-sp .spine-title { max-height: 56%; }
.cs-tape.poster .cs-sp .spine-meta { max-height: 26%; }
@media (max-width: 860px) { .cs-art { width: 78%; aspect-ratio: 1 / 1.05; } }
@media (max-width: 860px) {
  .cs-art { width: 70%; aspect-ratio: 1; }
  .cs-tape.poster .cs-sp .spine-title { max-height: 60%; font-size: .9375rem; }
  .cs-tape.poster .cs-sp .spine-meta { max-height: 30%; font-size: .6875rem; }
}

/* finished spine artwork (data-spine): the image is the whole spine */
.cs-tape.has-spine .cs-sp { padding: 0; background-size: 100% 100%; background-repeat: no-repeat; background-color: transparent; }


/* stand-in cover and spine for clubs without finished artwork: same layout as the artwork, drawn from live text and the club icon */
.cs-cv .cs-eye { font-size: calc(var(--d) * .032); letter-spacing: .3em; font-weight: 700; text-align: center; opacity: .85; }
.cs-cv .cs-rule { display: block; height: 2px; background: currentColor; margin: calc(var(--d) * .03) 0 calc(var(--d) * .05); opacity: .9; }
.cs-cv .cs-ct { text-transform: uppercase; font-size: calc(var(--d) * .2 * var(--fit, 1)); line-height: .95; font-weight: 800; letter-spacing: -.01em; text-align: center; overflow-wrap: normal; hyphens: auto; }
.cs-cv .cs-ico { margin: auto 0; align-self: center; width: 62%; }
.cs-cv .cs-ico .pic { box-shadow: 0 0 0 3px var(--oj); width: 100%; }
.cs-cv .cs-ico .pic > * { width: 100%; height: auto; aspect-ratio: 1; }
.cs-cv .cs-badge { align-self: flex-end; border: 2px solid currentColor; padding: .15em .5em; font-family: var(--display); font-weight: 700; font-size: calc(var(--d) * .06); letter-spacing: .06em; }
.cs-sb { display: flex; flex-direction: column; align-items: center; gap: 3px; font-family: var(--display); font-weight: 700; font-size: calc(var(--ws) * .1); letter-spacing: .25em; opacity: .9; }
.cs-sb b { border: 2px solid currentColor; padding: .2em .5em; font-size: calc(var(--ws) * .14); letter-spacing: .12em; }

.cs-sheet { position: fixed; inset: 0; z-index: 80; visibility: hidden; pointer-events: none; }

/* poster clubs with an icon: the icon alone tops the spine */
.cs-art.cs-ico-top { aspect-ratio: auto; width: auto; background: none; box-shadow: none; }
.cs-art.cs-ico-top .pic { box-shadow: 0 0 0 2px var(--oj); }
.cs-art.cs-ico-top .pic > * { width: calc(var(--ws) * .62); height: calc(var(--ws) * .62); object-fit: cover; }

/* member mark, VHS style: a rental "REC" sticker instead of the ribbon */
.cs-tape.joined .cs-sp::before {
  content: "REC"; top: 2px; left: 50%; right: auto; transform: translateX(-50%); width: auto; height: auto; clip-path: none;
  padding: 1px 4px 1px calc(.9em + 5px); background: #efe3c8 radial-gradient(circle at .6em 50%, #d8402b .28em, transparent .3em) no-repeat;
  color: #141414; font: 700 max(9.5px, calc(var(--ws) * .17))/1.35 var(--body, Inter, sans-serif); letter-spacing: .1em; border-radius: 2px; z-index: 2;
}

/* /clubs flat shelf: spines drawn like the 3D ones (shelf-flat.js) */
.shelf.fl .spine { --ws: 76px; width: var(--ws); min-height: 0; aspect-ratio: 142 / 840; background: none; box-shadow: none; padding: 0; align-items: stretch; }   /* artwork's own proportions, so it never stretches */
.shelf.fl > li:nth-child(4n+2) > .spine { --ws: 84px; }
.shelf.fl > li:nth-child(4n+3) > .spine { --ws: 70px; }
.shelf.fl .spine::before, .shelf.fl .spine.joined::before { content: none; }
.shelf.fl .cs-tape { position: relative; width: auto; height: auto; flex: 1; display: flex; will-change: auto; }
.shelf.fl .cs-f { position: relative; top: 0; left: 0; transform: none; width: 100%; height: auto; flex: 1; cursor: inherit; }
@media (max-width: 860px) { .shelf.fl .spine, .shelf.fl > li:nth-child(n) > .spine { --ws: 64px; } }