:root { --ink: #2b2620; --faint: #b9b0a3; --paper: #fbf8f2; --accent: #7a2e1f; --rule: #e4ddd0; }
* { box-sizing: border-box; }
html { background: var(--paper); color: var(--ink); }
body { font-family: 'EB Garamond', Garamond, 'Times New Roman', serif; font-size: 20px; line-height: 1.45;
       max-width: 46rem; margin: 0 auto; padding: 3rem 1.25rem 4rem; }
header { text-align: center; margin-bottom: 2.5rem; }
h1 { font-weight: 400; font-size: 2.6rem; letter-spacing: .04em; margin: 0; }
.sub { font-style: italic; margin: .2rem 0 0; color: #6b6257; }
h2 { font-weight: 400; font-size: 1.35rem; font-variant: small-caps; letter-spacing: .06em;
     border-bottom: 1px solid var(--rule); padding-bottom: .3rem; margin: 3rem 0 1rem; }
h3 { font-weight: 500; font-size: 1.05rem; margin: 1.6rem 0 .5rem; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
.intro { font-size: 1.1rem; }
.legend { font-size: .85rem; color: #6b6257; }
.sw { display: inline-block; width: .8em; height: .8em; border: 1px solid var(--faint); margin: 0 .25em 0 .8em; vertical-align: -.05em; }
.sw:first-child { margin-left: 0; }
.sw.pub { background: var(--accent); border-color: var(--accent); }
.sw.rec { border-color: var(--ink); }
.grid { display: grid; gap: 6px; margin: 1rem 0 1.5rem; }
.grid.wtc { grid-template-columns: repeat(12, 1fr); }
.grid.bee { grid-template-columns: repeat(8, 1fr); }
.cell { border: 1px solid var(--rule); padding: .25rem .2rem .3rem; text-align: center; color: var(--faint);
        line-height: 1.15; display: block; }
.cell .no { font-size: .95rem; }
.cell .key { font-size: .8rem; font-style: italic; }
.cell .op { font-size: .62rem; letter-spacing: .02em; }
.cell.rec { color: var(--ink); border-color: var(--ink); }
.cell.pub { color: var(--paper); background: var(--accent); border-color: var(--accent); }
a.cell.pub:hover { text-decoration: none; filter: brightness(1.12); }
.wtc .cell { color: var(--ink); }
.halves { display: flex; gap: 2px; margin-top: .2rem; }
.half { flex: 1; font-size: .7rem; border: 1px solid var(--rule); color: var(--faint); }
.half.rec { border-color: var(--ink); color: var(--ink); }
a.half.pub { background: var(--accent); border-color: var(--accent); color: var(--paper); }
a.half.pub:hover { text-decoration: none; filter: brightness(1.12); }
.videos { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: .9rem; }
.video { display: block; color: var(--ink); }
.video img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; background: #e9e3d8; }
.video .vt { display: block; font-size: .9rem; margin-top: .25rem; }
.video .vm { display: block; font-size: .75rem; color: #6b6257; }
footer { margin-top: 4rem; text-align: center; font-size: .85rem; color: #6b6257; }
a.home { color: inherit; }
a.home:hover { text-decoration: none; }
.sgroup h3 { margin: 1.4rem 0 .3rem; }
.takes { list-style: none; padding: 0; margin: 0; }
.takes li { font-size: .95rem; }
.takes .vm { font-size: .78rem; color: #6b6257; }
@media (max-width: 560px) {
  body { font-size: 18px; }
  .grid.wtc { grid-template-columns: repeat(6, 1fr); }
  .grid.bee { grid-template-columns: repeat(4, 1fr); }
}