:root { --log: #6e4b32; --end: #c4a27a; --wash: #f4efe6; --ink: #2a2118; --red: #8c2f2f; }
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: repeating-linear-gradient(90deg, #5c3e2a 0 18px, #6e4b32 18px 22px);
  color: var(--ink);
  font-family: "Palatino Linotype", Palatino, "Times New Roman", serif;
}
.beam {
  background: #3e291c;
  color: #f4efe6;
  padding: 16px 6vw 10px;
  display: flex;
  align-items: flex-end;
  gap: 18px;
}
.beam svg { width: 54px; height: 54px; flex: none; }
.beam h1 { margin: 0; font-size: 26px; font-weight: 600; letter-spacing: 0.03em; }
.notches { display: flex; gap: 0; margin-left: auto; }
.notches a {
  color: #f4efe6;
  text-decoration: none;
  padding: 10px 14px 12px;
  border-left: 1px solid #6e4b32;
  font-size: 15px;
}
.notches a.on { background: var(--wash); color: var(--ink); }
.wall { max-width: 880px; margin: 0 auto; padding: 22px 0 40px; }
.course { display: grid; grid-template-columns: 72px 1fr; gap: 0; margin: 0 16px 18px; }
.ends { background: var(--log); display: flex; flex-direction: column; justify-content: space-around; align-items: center; }
.ends i {
  width: 36px; height: 36px; border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, #e6d2b0, #8a6840 70%);
  display: block;
}
.chink { background: var(--wash); padding: 16px 18px 8px; }
.chink img { width: 100%; height: 240px; object-fit: cover; display: block; }
.chink h2 { margin: 14px 0 8px; font-size: 28px; line-height: 1.2; font-weight: 600; }
.chink p { margin: 0 0 12px; font-size: 17px; line-height: 1.55; }
.chink svg { width: 100%; height: 120px; display: block; background: #efe6d6; margin-bottom: 8px; }
.foot { color: #f4efe6; padding: 8px 6vw 28px; font-size: 14px; max-width: 70ch; }
@media (max-width: 760px) {
  .beam { flex-wrap: wrap; }
  .notches { margin-left: 0; width: 100%; flex-wrap: wrap; }
  .course { grid-template-columns: 1fr; margin: 0 10px 14px; }
  .ends { flex-direction: row; padding: 8px; }
  .chink img { height: 190px; }
}