/* Keystone — one center stone, courses bearing in. Limestone arch. */
:root {
  --ink: #3c3428; --stone: #8a6a32; --mortar: #ece6d8; --iron: #544a38; --paper: #f3efe6;
  --disp: "Cinzel", Georgia, serif;
  --ui: "Mukta", "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--ui); font-size: 17px; line-height: 1.5; }
a { color: var(--stone); }
.cr-skip { position: absolute; left: -999px; }
.cr-skip:focus { left: 8px; top: 8px; background: #fff; padding: 8px; z-index: 3; }
.cr-hold { max-width: 940px; margin: 0 auto; padding: 0 18px; }
.cr-lintel { background: var(--iron); color: var(--mortar); }
.cr-brand { font-family: var(--disp); font-size: 1.45rem; color: var(--mortar); text-decoration: none; display: block; padding-top: 16px; }
.cr-where { margin: 0; font-size: 0.82rem; }
.cr-nav { display: flex; gap: 16px; padding: 10px 0 14px; }
.cr-nav a { color: var(--mortar); }
.cr-arch { display: none; float: right; margin-top: 16px; font: inherit; background: var(--stone); color: #fff; border: 0; padding: 8px 12px; }
.cr-courses { display: none; background: #2e281e; padding: 8px 18px 14px; }
.cr-courses[hidden] { display: none; }
.cr-courses a { display: block; padding: 8px 0; color: var(--mortar); }
h1, h2, h3 { font-family: var(--disp); line-height: 1.2; }
h1 { font-size: clamp(1.7rem, 3.8vw, 2.3rem); }
.cr-block { padding: 36px 0; border-bottom: 1px solid #d8d0c0; }
.cr-diagram { display: grid; grid-template-columns: 1fr 1.1fr 1fr; gap: 10px; align-items: end; margin: 20px 0; }
.cr-course { background: #e4dcc8; border: 2px solid var(--iron); padding: 14px; min-height: 140px; }
.cr-course--l { clip-path: polygon(12% 0, 100% 0, 100% 100%, 0 100%); }
.cr-course--r { clip-path: polygon(0 0, 88% 0, 100% 100%, 0 100%); }
.cr-key { background: var(--stone); color: #fff; padding: 18px 16px 22px; text-align: center; clip-path: polygon(10% 0, 90% 0, 100% 100%, 0 100%); }
.cr-key-l { font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; margin: 0; }
.cr-key-n { font-family: var(--disp); font-size: 1.5rem; margin: 6px 0; }
.cr-course-n { font-family: var(--disp); margin: 0 0 6px; }
.cr-lower { margin: 0; padding: 0 0 0 18px; }
.cr-aside { background: #fff; border-left: 6px solid var(--stone); padding: 14px 16px; }
.cr-prices { width: 100%; border-collapse: collapse; }
.cr-prices th, .cr-prices td { text-align: left; padding: 8px 10px; border-bottom: 1px dashed #d8d0c0; }
.cr-form { background: #fff; padding: 18px; border: 2px solid var(--iron); }
.cr-f { margin-bottom: 12px; }
.cr-l { display: block; font-weight: 600; }
.cr-in { width: 100%; font: inherit; padding: 8px; border: 1px solid var(--iron); }
.cr-tick { display: grid; grid-template-columns: 22px 1fr; gap: 8px; font-size: 0.88rem; margin: 10px 0; }
.cr-btn { background: var(--stone); color: #fff; border: 0; font: inherit; font-weight: 600; padding: 12px 16px; cursor: pointer; width: 100%; }
.cr-cut { font-weight: 600; }
.cr-cut.is-bad { color: #8e2418; }
.cr-set { background: #e4dcc8; padding: 16px; }
.cr-foot { background: var(--iron); color: #e8e0d0; padding: 28px 0; font-size: 0.9rem; }
.cr-foot a { color: #fff; }
.cr-pair { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 28px; }
@media (max-width: 800px) {
  .cr-nav { display: none; }
  .cr-arch { display: inline-block; }
  .cr-courses { display: block; }
  .cr-pair, .cr-diagram { grid-template-columns: 1fr; }
  .cr-course--l, .cr-course--r, .cr-key { clip-path: none; }
}