/* From the blog: "The reading room" — a dark band with tall article covers on a shelf you scroll sideways */
  #blog.rr { background: #1C1810; color: #F2EBDD; padding: 88px 0 64px; overflow: hidden; isolation: isolate; }
  #blog.rr::before { content: ""; position: absolute; z-index: -1; right: -12%; bottom: -45%; width: 760px; height: 760px; border-radius: 50%; background: radial-gradient(circle, rgba(233,201,143,.15), transparent 65%); pointer-events: none; }
  .rr-top { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 20px 32px; }
  .rr-top h2 { margin: 0; font: 300 clamp(42px, 5vw, 72px)/1 var(--display); letter-spacing: -.02em; color: #F2EBDD; }
  .rr-top h2 em { font-style: italic; color: #E9C98F; }
  .rr-lede { margin: 14px 0 0; max-width: 46ch; font-size: 16px; line-height: 1.55; color: rgba(242,235,221,.72); }
  .rr-acts { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; text-align: right; }
  .rr-all { padding: 13px 22px; border-radius: 999px; background: #E9C98F; color: #1C1810; font: 800 14.5px var(--sans); text-decoration: none; white-space: nowrap; transition: background .2s ease; }
  .rr-all:hover { background: #F2D9A8; }
  .rr-all:focus-visible, .rr-write a:focus-visible, .rr-card:focus-visible, .rr-arr:focus-visible { outline: 2px solid #E9C98F; outline-offset: 3px; }
  .rr-acts-m { display: none; }
  .rr-write { font-size: 14px; color: rgba(242,235,221,.7); }
  .rr-write a { color: #E9C98F; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
  /* cards start in line with the heading and run off the right edge */
  .rr-shelf { display: flex; gap: 18px; margin-top: 40px; padding: 0 calc((100% - min(1280px, 92vw)) / 2) 6px; scroll-padding-inline: calc((100% - min(1280px, 92vw)) / 2); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .rr-shelf::-webkit-scrollbar { display: none; }
  .rr-card { flex: 0 0 260px; scroll-snap-align: start; display: flex; flex-direction: column; border-radius: 20px; overflow: hidden; background: #2A2219; border: 1px solid rgba(242,235,221,.08); color: inherit; text-decoration: none; transition: transform .3s ease, border-color .3s ease; }
  .rr-card:first-child { flex-basis: 340px; }
  .rr-card:hover { transform: translateY(-4px); border-color: rgba(233,201,143,.4); }
  .rr-ph { position: relative; height: 420px; overflow: hidden; background: #3E352B; }
  .rr-ph img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s ease; }
  .rr-card:hover .rr-ph img { transform: scale(1.05); }
  .rr-ph::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(28,24,16,.92) 8%, rgba(28,24,16,.35) 48%, transparent 70%); }
  .rr-cat { position: absolute; z-index: 1; left: 16px; top: 16px; padding: 5px 11px; border-radius: 999px; background: var(--c, #E9C98F); color: #FBF7EE; font: 700 11.5px var(--sans); }
  .rr-new { position: absolute; z-index: 1; right: 16px; top: 16px; padding: 5px 10px; border-radius: 999px; background: #FBF7EE; color: #1C1810; font: 700 11px var(--sans); }
  .rr-card h3 { position: absolute; z-index: 1; left: 16px; right: 16px; bottom: 14px; margin: 0; font: 400 21px/1.16 var(--display); color: #FBF7EE; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
  .rr-card:first-child h3 { font-size: 27px; }
  .rr-meta { display: flex; justify-content: space-between; gap: 10px; padding: 12px 16px 14px; font-size: 12.5px; color: rgba(242,235,221,.6); }
  .rr-nav { display: flex; justify-content: flex-end; gap: 8px; margin-top: 22px; }
  .rr-arr { width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(242,235,221,.28); background: transparent; color: #F2EBDD; font-size: 18px; cursor: pointer; transition: background .2s ease, border-color .2s ease; }
  .rr-arr:hover { background: rgba(242,235,221,.08); border-color: rgba(242,235,221,.6); }
  .rr-arr:disabled { opacity: .3; cursor: default; }
  @media (max-width: 760px) {
    #blog.rr { padding: 56px 0 44px; }
    .rr-top { grid-template-columns: 1fr; }
    /* phones: the button and the write link sit under the cards */
    .rr-top > .rr-acts { display: none; }
    .rr-acts-m { display: flex; flex-direction: column; align-items: stretch; text-align: center; gap: 14px; margin-top: 26px; }
    .rr-acts-m .rr-all { text-align: center; padding: 15px 22px; }
    .rr-acts-m .rr-write { font-size: 12.5px; }
    .rr-acts-m { gap: 12px; }
    .rr-shelf { gap: 12px; margin-top: 28px; }
    .rr-card, .rr-card:first-child { flex-basis: 76vw; }
    .rr-ph { height: 360px; }
    .rr-card h3, .rr-card:first-child h3 { font-size: 22px; }
    .rr-nav { display: none; }
  }
  @media (prefers-reduced-motion: reduce) { .rr-card, .rr-ph img { transition: none; } }