/* The page that chooses between the rooms: the choir's nave, vellum and gold. */
:root {
  --nave: #0e1015; --stone: #171a21; --stone-2: #20242d; --line: #313744;
  --vellum: #ece3cf; --dim: #9b9485; --gold: #d6a84c; --rubric: #c2452f;
  --display: "Alegreya", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --label: "Alegreya Sans SC", "Gill Sans", "Trebuchet MS", sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { background: var(--nave); }
body { margin: 0; min-height: 100vh; color: var(--vellum); font: 17px/1.5 var(--display);
  background: radial-gradient(ellipse at 50% -10%, #1d2029 0%, var(--nave) 65%); }
main { max-width: 1280px; min-height: 100vh; margin: 0 auto; display: grid; gap: 28px; align-content: center; justify-items: center; text-align: center;
  padding-block: max(40px, env(safe-area-inset-top, 0px)) max(32px, env(safe-area-inset-bottom, 0px));
  padding-inline: max(16px, env(safe-area-inset-left, 0px)) max(16px, env(safe-area-inset-right, 0px)); }
header { display: grid; gap: 6px; justify-items: center; }
h1 { margin: 0; font-size: clamp(34px, 6vw, 52px); font-weight: 700; letter-spacing: 0.01em; line-height: 1.1; }
header p { margin: 0; max-width: 62ch; color: var(--dim); text-wrap: pretty; }
.rooms { display: grid; grid-template-columns: repeat(5, minmax(0, 260px)); justify-content: center; gap: 20px; width: 100%; }
.room { display: grid; gap: 8px; align-content: start; text-align: left; padding: 12px 12px 16px; border: 1px solid var(--line); border-radius: 12px;
  background: var(--stone); color: inherit; text-decoration: none; transition: border-color 0.15s, background 0.15s; }
.room:hover, .room:focus-visible { border-color: var(--gold); background: var(--stone-2); outline: none; }
.room img { display: block; width: 100%; max-width: 100%; height: auto; aspect-ratio: 8 / 5; object-fit: cover; border-radius: 7px; border: 1px solid var(--line); margin-bottom: 6px; }
.name { font-family: var(--label); font-size: 22px; font-weight: 700; letter-spacing: 0.06em; color: var(--gold); }
.what { color: var(--vellum); text-wrap: pretty; }
.go { font-family: var(--label); font-size: 15px; letter-spacing: 0.06em; color: var(--dim); }
.room:hover .go, .room:focus-visible .go { color: var(--gold); }
footer { color: var(--dim); font-size: 14px; }
.room-teach { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 4px 12px; max-width: min(100%, 760px); padding: 10px 18px; border: 1px solid var(--line); border-radius: 12px;
  background: var(--stone); color: inherit; text-decoration: none; text-align: center; transition: border-color 0.15s, background 0.15s; }
.room-teach:hover, .room-teach:focus-visible { border-color: var(--gold); background: var(--stone-2); outline: none; }
.room-teach .name { font-size: 18px; }
@media (prefers-reduced-motion: reduce) { .room { transition: none; } }
@media (max-width: 1400px) { .rooms { grid-template-columns: repeat(3, minmax(0, 340px)); } }
@media (max-width: 1060px) { .rooms { grid-template-columns: repeat(2, minmax(0, 420px)); } }
@media (max-width: 720px) { .rooms { grid-template-columns: minmax(0, 1fr); max-width: 560px; } }
@media (max-width: 560px) {
  body { font-size: 15.5px; }
  main { gap: 16px; align-content: start; padding-block: max(22px, env(safe-area-inset-top, 0px)) max(20px, env(safe-area-inset-bottom, 0px)); }
  .rooms { gap: 12px; }
  .room { gap: 4px; padding: 10px 10px 12px; }
  .room img { aspect-ratio: 2 / 1; object-position: top; margin-bottom: 4px; }
  .name { font-size: 19px; }
}