/* Scrimmy's own clothes, settled 2026-09-19 from design/home-directions-4.html,
   direction M: warm paper, black ink, a serif with real italics for names and
   days, and each club as a tint of its own colour with its mark in a white
   square. The mark is the one stamp of mono type on the page; nothing else
   is set in caps, nothing is tracked tight, nothing casts a shadow. */
:root {
  --paper: #FBFAF7;
  --ink: #161616;
  --coral: #FF6B5A;
  --dim: #6B6660;
  --rule: #161616;
  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
}
* { box-sizing: border-box; margin: 0; }
html, body { background: var(--paper); color: var(--ink); }
body { font: 16px/1.45 var(--serif); -webkit-font-smoothing: antialiased; }
.page { max-width: 460px; margin: 0 auto; min-height: 100vh; padding: 0 16px 60px; }

.top { padding: 26px 4px 6px; }
.scrimmy {
  font-family: "Rubik Mono One", ui-monospace, monospace;
  font-size: 22px; letter-spacing: .02em; line-height: 1;
  color: var(--ink); display: inline-flex; align-items: baseline; gap: .22em;
  white-space: nowrap; text-decoration: none;
}
.scrimmy i { width: .5em; height: .5em; border-radius: 50%; background: var(--coral); flex: none; position: relative; top: -.1em; }

.hdr {
  display: flex; justify-content: space-between; align-items: baseline;
  font: italic 500 22px/1.2 var(--serif);
  padding: 30px 4px 10px; border-bottom: 1px solid var(--rule); margin-bottom: 10px;
}
.hdr a { font: italic 400 15px/1 var(--serif); color: var(--coral); text-decoration: none; }

/* A block is a door; it needs no underline to say so. */
.card {
  display: flex; align-items: center; gap: 14px;
  padding: 15px 16px 15px 14px; border-radius: 14px;
  text-decoration: none; color: inherit; min-height: 84px; margin-bottom: 8px;
}
.card .sq {
  width: 54px; height: 54px; border-radius: 12px; background: #fff; flex: none;
  display: grid; place-items: center; overflow: hidden;
  font: 700 22px/1 var(--sans);
}
.card .sq .emo { font-size: 30px; line-height: 1; }
.card .txt { flex: 1; line-height: 1.15; min-width: 0; }
.card .txt .n { font: 500 20px/1.15 var(--serif); }
.card .txt small { display: block; font: 400 13px/1.3 var(--sans); opacity: .78; margin-top: 4px; }
.card .day { text-align: right; line-height: 1.05; flex: none; }
.card .day b { display: block; font: italic 500 22px/1 var(--serif); }
.card .day span { display: block; font: 400 12.5px/1.3 var(--sans); opacity: .78; margin-top: 3px; }

/* Each club's tint, its full colour kept for the square and the day. */
.card.uvc   { background: #D5D5FF; color: #181A42; }
.card.coral { background: #FFE2DC; }
.card.coral .sq { background: var(--coral); color: #fff; }
.card.coral .day b { color: #D94B3A; }

.empty {
  background: #F0EEE8; color: var(--dim); border-radius: 14px;
  padding: 18px 16px; font: italic 400 17px/1.3 var(--serif); margin-bottom: 8px;
}

.foot { font: italic 400 17px/1.4 var(--serif); color: var(--dim); padding: 34px 4px 0; }
.foot a {
  color: var(--ink); text-decoration: none;
  background: linear-gradient(var(--coral), var(--coral)) no-repeat 0 100% / 100% 2px; padding-bottom: 1px;
}

/* The legal row: name left, Privacy right, no rule. A line here read as a
   fourth section; space does the closing instead. */
.legal {
  display: flex; justify-content: space-between; align-items: baseline;
  font: 400 13px/1.4 var(--sans); color: var(--dim);
  padding: 54px 4px 0;
}
.legal a { color: var(--dim); text-decoration: none; }