/* ==========================================================================
   Alhora — Release notes, bento
   Loaded only by website/release_notes.html. Everything here is prefixed
   `rn-`; main.css is left alone on purpose, because none of this is reused.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Token deltas
   The Paper & Ink token files carry four custom properties main.css :root does
   not. Only those four are copied here — the rest of the palette, the type
   stack, the spacing scale and the other shadows all come from main.css and
   must keep coming from there, so a rebrand still only has one place to land.
   The site has no dark mode, so the tokens' [data-theme="dark"] block is
   deliberately not brought across.
   -------------------------------------------------------------------------- */

:root {
  --clr-surface:      #FBF7EE;              /* card surface */
  --clr-text-on-dark: #F3ECDD;              /* type on the ink tile */
  --scrim:            rgba(15,12,10,0.5);
  --shadow-modal:     0 8px 32px rgba(15,12,10,0.2);
}

/* --------------------------------------------------------------------------
   Page & masthead
   -------------------------------------------------------------------------- */

.rn-page {
  background-color: var(--clr-bg);
  padding-bottom: var(--space-8);
}

.rn-release {
  max-width: 1180px;
  margin-inline: auto;
  padding-inline: var(--space-8);
}

.rn-masthead {
  text-align: center;
  padding-block: var(--space-16) 44px;
}

.rn-release:first-child .rn-masthead {
  padding-block: 80px 44px;
}

.rn-headline {
  font-family: var(--font-heading);
  font-weight: 300;
  font-size: clamp(2.5rem, 5.5vw, 4rem);
  line-height: 1.05;
  letter-spacing: -0.025em;
  margin: var(--space-4) 0 0;
  color: var(--clr-primary);
  text-wrap: balance;
}

.rn-headline-sm {
  font-size: clamp(1.875rem, 4vw, 2.75rem);
  margin-top: 0;
}

/* Each release heading is a link target. The nav is fixed, so without this a
   jump to #rn-h-1-31-0 parks the headline behind it. */
.rn-headline { scroll-margin-top: calc(var(--nav-h) + var(--space-8)); }

.rn-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 22px;
  flex-wrap: wrap;
}

.rn-version {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--clr-primary);
  border: 1px solid var(--clr-border);
  background: var(--clr-surface);
  border-radius: 999px;
  padding: 5px 14px;
}

.rn-date {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  color: var(--clr-text-muted);
}

.rn-dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--clr-border);
}

.rn-free {
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  color: var(--clr-text-muted);
}

.rn-hint {
  margin: var(--space-4) 0 0;
  font-family: var(--font-ui);
  font-size: 0.875rem;
  color: var(--clr-text-muted);
}

/* --------------------------------------------------------------------------
   The grid
   -------------------------------------------------------------------------- */

.rn-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: 146px;
  gap: 12px;
  margin-bottom: 72px;
}

.rn-s2  { grid-column: span 2; }
.rn-s3  { grid-column: span 3; }
.rn-s6  { grid-column: span 6; }
.rn-s12 { grid-column: span 12; }
.rn-r2  { grid-row: span 2; }
.rn-r3  { grid-row: span 3; }

/* --------------------------------------------------------------------------
   Tiles
   -------------------------------------------------------------------------- */

.rn-tile {
  position: relative;
  overflow: hidden;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 18px;
  text-align: center;
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: 20px;
  cursor: pointer;
  user-select: none;
  transition: transform var(--trans-normal),
              box-shadow var(--trans-normal),
              border-color var(--trans-normal);
}

.rn-tile > * { max-width: 100%; min-height: 0; }

.rn-tile:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
  border-color: rgba(166,58,43,0.4);
}

.rn-tile:focus-visible {
  outline: 2px solid var(--clr-accent);
  outline-offset: 3px;
}

.rn-tone-warm { background: var(--clr-bg-warm); }

.rn-tone-ink {
  background: var(--clr-primary);
  border-color: var(--clr-primary);
}

.rn-tone-ink .rn-label { color: rgba(243,236,221,0.85); }

.rn-tone-ink .rn-chip {
  background: transparent;
  border-color: rgba(243,236,221,0.35);
  color: rgba(243,236,221,0.7);
}

.rn-tone-feature {
  padding: 26px;
  gap: 18px;
  border-color: rgba(166,58,43,0.45);
  box-shadow: var(--shadow-gold);
}

.rn-tone-feature:hover {
  box-shadow: var(--shadow-gold);
  border-color: rgba(166,58,43,0.45);
}

.rn-label {
  font-family: var(--font-ui);
  font-size: 0.84375rem;
  font-weight: 600;
  color: var(--clr-text);
  line-height: 1.3;
  padding-inline: 26px;
}

.rn-s2 .rn-label { font-size: 0.8125rem; padding-inline: 10px; }

.rn-tone-feature .rn-label {
  font-family: var(--font-heading);
  font-size: 1.625rem;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--clr-primary);
  padding-inline: 0;
}

.rn-sub {
  font-family: var(--font-ui);
  font-size: 0.84375rem;
  color: var(--clr-text-muted);
  margin-top: -12px;
}

.rn-chip {
  position: absolute;
  bottom: 10px;
  right: 10px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid var(--clr-border);
  background: var(--clr-surface);
  color: var(--clr-text-muted);
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--trans-normal),
              border-color var(--trans-normal),
              color var(--trans-normal);
}

.rn-tone-feature .rn-chip { bottom: 12px; right: 12px; }

.rn-tile:hover .rn-chip,
.rn-tile:focus-visible .rn-chip {
  background: var(--clr-accent);
  border-color: var(--clr-accent);
  color: var(--clr-bg);
}

/* --------------------------------------------------------------------------
   Tile pictures
   -------------------------------------------------------------------------- */

.rn-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

.rn-tone-feature .rn-visual { flex: 1; align-items: stretch; }

/* A screenshot tile whose file has not been captured yet never reaches this
   rule: release_bentos.shot_url() returns "" and the template draws the CSS
   visual instead. Nothing here has to cope with a broken image. */
.rn-shot {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  width: 100%;
  min-height: 0;
}

/* `contain`, not `cover`, and a box sized to the picture rather than to the
   tile.
 *
 * These are photographs of an interface, not of scenery. Cropping scenery
 * loses background; cropping a panel takes the first row off a list and cuts
 * a button in half, which reads as a broken render rather than as a crop —
 * at 375 `cover` was doing exactly that to the session-health panel.
 *
 * The mat costs nothing where it is not needed: at 1440 every tile box sits
 * within a few per cent of its screenshot's own proportions, so the bands are
 * a pixel or two. It only opens up at narrow widths, where the boxes go
 * landscape and the shots are square — and there a mat is what keeps the
 * whole panel on the page.
 *
 * Sizing the box to the picture (rather than stretching it to the tile and
 * letting `contain` paint inside it) is what lets the frame below hug the
 * pixels instead of floating out in the mat. */
.rn-shot img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 10px;
  /* Alhora photographed on Alhora's own cream: #FBF7EE tiles under shots
     whose own background is within a shade of them. With no edge of its own
     a shot dissolves into the card and stops reading as a picture at all.
     A hairline and a low shadow set it down on the tile. */
  border: 1px solid rgba(33,26,18,0.10);
  box-shadow: 0 1px 3px rgba(33,26,18,0.07),
              0 6px 14px rgba(33,26,18,0.05);
}

/* before / now — the flagship */
.rn-compare {
  display: flex;
  gap: 18px;
  justify-content: center;
  align-items: stretch;
  width: 100%;
  padding: 4px 10px 0;
}

.rn-compare-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 40%;
}

.rn-compare-label {
  font-family: var(--font-ui);
  font-size: 0.65625rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--clr-text-muted);
}

.rn-compare-col-now .rn-compare-label { color: var(--clr-accent); }

.rn-compare-page {
  flex: 1;
  background: var(--clr-bg);
  border: 1px solid rgba(33,26,18,0.1);
  border-radius: 6px;
  padding: 16px 15px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  justify-content: center;
}

.rn-compare-col-now .rn-compare-page { border-color: rgba(166,58,43,0.4); }

.rn-line {
  display: block;
  height: 3.5px;
  border-radius: 2px;
  background: rgba(33,26,18,0.65);
}

/* label / value rows */
.rn-rows {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  max-width: 200px;
  font-family: var(--font-ui);
  font-size: 0.78125rem;
  color: var(--clr-text);
  margin: 0;
}

.rn-row { display: flex; justify-content: space-between; gap: 10px; }
.rn-row dt { text-align: left; }
.rn-row dd { margin: 0; }
.rn-row-mono   { font-family: var(--font-mono); }
.rn-row-muted  { color: var(--clr-text-muted); }
.rn-row-accent { color: var(--clr-accent); }

/* a table with real columns */
.rn-minitable {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 3px 14px;
  font-family: var(--font-heading);
  font-size: 0.71875rem;
  color: var(--clr-text);
  width: 100%;
  max-width: 190px;
}

.rn-minitable-head {
  font-variant: small-caps;
  letter-spacing: 0.06em;
  padding-bottom: 3px;
  border-bottom: 1px solid rgba(33,26,18,0.4);
}

.rn-minitable-right { text-align: right; }
.rn-minitable-num   { font-family: var(--font-mono); font-size: 0.65625rem; }

/* lining vs old-style figures */
.rn-figures {
  font-family: var(--font-heading);
  color: var(--clr-primary);
  line-height: 1.35;
}

.rn-figures-lining   { font-size: 1.375rem; font-variant-numeric: lining-nums; }
.rn-figures-oldstyle { font-size: 1.375rem; font-variant-numeric: oldstyle-nums; }

/* ticked file list */
.rn-checklist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-family: var(--font-mono);
  font-size: 0.71875rem;
  color: var(--clr-text);
}

.rn-checklist li { display: flex; gap: 8px; align-items: center; }
.rn-checklist svg { color: var(--clr-success); flex: none; }

/* a journey and its verdict */
.rn-journey {
  width: 100%;
  max-width: 200px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.rn-journey-road { display: flex; align-items: center; }

.rn-journey-start {
  width: 8px; height: 8px; border-radius: 50%; flex: none;
  background: var(--clr-primary);
}

.rn-journey-line {
  flex: 1;
  border-top: 2px dashed rgba(33,26,18,0.35);
  margin: 0 4px;
}

.rn-journey-end {
  width: 8px; height: 8px; border-radius: 50%; flex: none;
  border: 2px solid var(--clr-accent);
  background: var(--clr-bg);
}

.rn-journey-chip {
  align-self: center;
  font-family: var(--font-ui);
  font-size: 0.71875rem;
  color: var(--clr-fail);
  background: rgba(156,43,29,0.08);
  border: 1px solid rgba(156,43,29,0.3);
  border-radius: 999px;
  padding: 3px 11px;
}

/* one line of type, doing the work */
.rn-display {
  font-family: var(--font-heading);
  color: var(--clr-primary);
  line-height: 1;
  text-align: center;
  overflow-wrap: anywhere;
}

.rn-display-on-ink {
  font-size: 2.375rem;
  font-weight: 500;
  color: var(--clr-text-on-dark);
}

.rn-display-accent-oldstyle {
  font-size: 1.75rem;
  color: var(--clr-accent);
  font-variant-numeric: oldstyle-nums;
}

.rn-display-tracked {
  font-size: 0.9375rem;
  letter-spacing: 0.3em;
  font-variant: small-caps;
  white-space: nowrap;
}

.rn-display-word   { font-size: 1.0625rem; }
.rn-display-italic { font-size: 1.1875rem; font-style: italic; }

.rn-display-struck {
  font-size: 1rem;
  color: var(--clr-text-muted);
  text-decoration: line-through;
}

.rn-display-mono {
  font-family: var(--font-mono);
  font-size: 1.75rem;
  color: var(--clr-accent);
}

.rn-display-duo  { font-size: 1.5rem; }
.rn-duo-arrow    { color: var(--clr-accent); font-style: normal; }

.rn-pill {
  font-family: var(--font-ui);
  font-size: 0.71875rem;
  font-weight: 600;
  color: var(--clr-bg);
  background: var(--clr-primary);
  border-radius: 999px;
  padding: 7px 15px;
  white-space: nowrap;
}

.rn-verse {
  display: flex;
  flex-direction: column;
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 0.78125rem;
  color: var(--clr-text);
  line-height: 1.5;
}

.rn-ornament {
  font-family: var(--font-heading);
  font-size: 1.375rem;
  line-height: 1;
  color: var(--clr-accent);
  opacity: 0.7;
}

/* The flagship gallery uses the six named themes' application palettes. */
.rn-kind-theme_gallery {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  grid-template-rows: auto auto;
  align-content: center;
  column-gap: 32px;
  row-gap: 14px;
  text-align: left;
  background: linear-gradient(120deg, var(--clr-surface), var(--clr-bg-warm));
}

.rn-kind-theme_gallery .rn-visual {
  grid-column: 2;
  grid-row: 1 / span 2;
  width: 100%;
}

.rn-kind-theme_gallery .rn-label {
  grid-column: 1;
  grid-row: 1;
  align-self: end;
  font-size: clamp(2rem, 3.8vw, 2.875rem);
  text-wrap: balance;
}

.rn-kind-theme_gallery .rn-sub {
  grid-column: 1;
  grid-row: 2;
  align-self: start;
  margin: 0;
  max-width: 28ch;
  font-size: 0.9375rem;
  line-height: 1.5;
}

.rn-theme-gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  width: 100%;
}

.rn-theme-sample {
  display: flex;
  flex-direction: column;
  gap: 9px;
  min-width: 0;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--sample-ink) 18%, transparent);
  border-radius: 12px;
  background: var(--sample-bg);
  color: var(--sample-ink);
}

.rn-theme-page {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 5px 10px;
  padding: 7px 10px;
  border-radius: 5px;
  background: var(--sample-surface);
}

.rn-theme-page span {
  grid-row: span 2;
  font-family: var(--font-heading);
  font-size: 1.875rem;
  line-height: 1.2;
}

.rn-theme-page i { height: 3px; background: var(--sample-accent); border-radius: 2px; }
.rn-theme-page i:last-child { width: 65%; opacity: 0.4; }
.rn-theme-name { font-family: var(--font-ui); font-size: 0.6875rem; font-weight: 600; line-height: 1.2; }

/* Three listening families around one player. */
.rn-audio-wheel {
  display: flex;
  align-items: center;
  align-self: center;
  justify-content: center;
  gap: 22px;
}

.rn-audio-dial {
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  width: 112px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: conic-gradient(
    var(--clr-success) 0deg 116deg, var(--clr-surface) 116deg 120deg,
    var(--clr-secondary) 120deg 236deg, var(--clr-surface) 236deg 240deg,
    var(--clr-primary) 240deg 356deg, var(--clr-surface) 356deg 360deg
  );
}

.rn-audio-dial::before {
  content: "";
  position: absolute;
  inset: 25%;
  border-radius: 50%;
  background: var(--clr-surface);
}

.rn-audio-dial i {
  position: relative;
  font-size: 2rem;
  font-style: normal;
  color: var(--clr-primary);
}

.rn-audio-families {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  text-align: left;
  font-family: var(--font-ui);
  font-size: 0.8125rem;
}

.rn-audio-families dt { color: var(--clr-text); font-weight: 600; }
.rn-audio-families dd { margin: 2px 0 0; font-size: 0.6875rem; color: var(--clr-text-muted); }

/* a session, its code and the people in it */
.rn-session {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: 100%;
}

.rn-session-code {
  font-family: var(--font-mono);
  font-size: clamp(1.25rem, 3.2vw, 2rem);
  letter-spacing: 0.14em;
  color: var(--clr-primary);
  background: var(--clr-bg);
  border: 1px solid rgba(166,58,43,0.4);
  border-radius: 12px;
  padding: 14px 26px;
}

.rn-session-caption {
  font-family: var(--font-ui);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--clr-text-muted);
}

.rn-session-people { display: flex; align-items: center; gap: 8px; }

.rn-face {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-ui);
  font-size: 0.6875rem;
  font-weight: 600;
  font-style: normal;
  flex: none;
}

.rn-face-ink    { background: var(--clr-primary); color: var(--clr-text-on-dark); }
.rn-face-accent { background: var(--clr-accent);  color: var(--clr-text-on-dark); }

.rn-caret {
  display: inline-block;
  width: 2px;
  height: 22px;
  background: var(--clr-accent);
  animation: rnCaret 1.1s steps(2, jump-none) infinite;
}

/* drafts, one put away */
.rn-stack {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  max-width: 190px;
}

.rn-stack-card {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  background: var(--clr-bg);
  border: 1px solid var(--clr-border);
  border-radius: 8px;
  padding: 6px 10px;
  font-family: var(--font-ui);
  font-size: 0.75rem;
}

.rn-stack-card:first-child { border-color: rgba(166,58,43,0.4); }
.rn-stack-card b { font-weight: 600; color: var(--clr-text); }
.rn-stack-card i { font-style: normal; font-size: 0.6875rem; color: var(--clr-text-muted); }

/* one page, at a chosen distance */
.rn-zoom { display: flex; flex-direction: column; align-items: center; gap: 8px; }

.rn-zoom-page {
  display: block;
  width: 44px;
  height: 56px;
  border: 1px solid var(--clr-border);
  border-radius: 3px;
  background: var(--clr-bg);
  box-shadow: inset 0 0 0 5px var(--clr-surface);
}

.rn-zoom-steps { display: flex; gap: 6px; }

.rn-zoom-steps i {
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  color: var(--clr-text-muted);
  border: 1px solid var(--clr-border);
  border-radius: 999px;
  padding: 2px 8px;
}

.rn-zoom-steps i:nth-child(2) {
  color: var(--clr-accent);
  border-color: rgba(166,58,43,0.4);
}

/* plates crossing the wire */
.rn-plates { display: flex; gap: 5px; align-items: flex-end; }

.rn-plates i {
  display: block;
  border-radius: 3px;
  border: 1px solid var(--clr-border);
  background: rgba(33,26,18,0.12);
}

.rn-plates i:nth-child(1) { width: 22px; height: 30px; }
.rn-plates i:nth-child(2) { width: 30px; height: 22px; background: rgba(166,58,43,0.18); }
.rn-plates i:nth-child(3) { width: 22px; height: 26px; }

/* three families */
.rn-faces { display: flex; gap: 10px; align-items: baseline; color: var(--clr-primary); }
.rn-faces-serif { font-family: var(--font-heading); font-size: 1.375rem; }
.rn-faces-sans  { font-family: var(--font-ui);      font-size: 1.25rem; }
.rn-faces-mono  { font-family: var(--font-mono);    font-size: 1.125rem; }

/* a note and its reply */
.rn-thread {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 100%;
  max-width: 210px;
  text-align: left;
  font-family: var(--font-ui);
  font-size: 0.6875rem;
}

.rn-thread-note {
  background: var(--clr-bg);
  border: 1px solid var(--clr-border);
  border-left: 2px solid var(--clr-accent);
  border-radius: 6px;
  padding: 5px 8px;
  color: var(--clr-text);
}

.rn-thread-reply {
  align-self: flex-end;
  max-width: 88%;
  background: var(--clr-bg);
  border: 1px solid var(--clr-border);
  border-radius: 6px;
  padding: 5px 8px;
  color: var(--clr-text-muted);
}

.rn-thread-done {
  font-size: 0.625rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--clr-success);
}

/* Text-led flagship cards stay legible without a miniature screenshot. */
.rn-tone-feature .rn-stack,
.rn-tone-feature .rn-thread {
  align-self: center;
  max-width: 300px;
  gap: 8px;
}

.rn-tone-feature .rn-stack-card,
.rn-tone-feature .rn-thread-note,
.rn-tone-feature .rn-thread-reply {
  padding: 8px 10px;
  font-size: 0.8125rem;
}

/* who is where */
.rn-presence { display: flex; flex-direction: column; gap: 7px; }

.rn-presence-person {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-ui);
  font-size: 0.75rem;
  color: var(--clr-text);
}

.rn-presence-person .rn-face { width: 24px; height: 24px; font-size: 0.625rem; }

/* opening art, at the width you chose */
.rn-artwidth {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  width: 100%;
  max-width: 200px;
}

.rn-artwidth-plate {
  display: block;
  width: 60%;
  height: 32px;
  border-radius: 4px;
  background: rgba(166,58,43,0.16);
  border: 1px solid rgba(166,58,43,0.3);
}

.rn-artwidth-scale {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  font-family: var(--font-ui);
  font-size: 0.6875rem;
  color: var(--clr-text-muted);
  white-space: nowrap;
}

.rn-artwidth-track {
  position: relative;
  flex: 1;
  height: 2px;
  border-radius: 2px;
  background: var(--clr-border);
}

.rn-artwidth-track b {
  position: absolute;
  top: 50%;
  left: 60%;
  transform: translate(-50%, -50%);
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--clr-accent);
}

/* a chapter approaching its weight */
.rn-band {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  max-width: 200px;
  font-family: var(--font-ui);
  font-size: 0.75rem;
}

.rn-band-top { display: flex; justify-content: space-between; gap: 10px; }
.rn-band-top b { font-weight: 600; color: var(--clr-text); }
.rn-band-top i { font-style: normal; font-family: var(--font-mono); font-size: 0.6875rem; color: var(--clr-text-muted); }

.rn-band-track {
  display: block;
  height: 6px;
  border-radius: 999px;
  background: rgba(33,26,18,0.1);
  overflow: hidden;
}

.rn-band-track i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--clr-fail), var(--clr-accent) 55%, var(--clr-success));
}

/* the shelf, mid-rearrangement */
.rn-shelf {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  padding-bottom: 6px;
  border-bottom: 2px solid var(--clr-border);
}

.rn-shelf-book { display: block; width: 12px; border-radius: 2px 2px 0 0; }
.rn-shelf-book:nth-child(1) { height: 38px; }
.rn-shelf-book:nth-child(2) { height: 46px; transform: translateY(-7px) rotate(-5deg); }
.rn-shelf-book:nth-child(3) { height: 34px; }
.rn-shelf-book:nth-child(4) { height: 42px; }
.rn-shelf-ink    { background: var(--clr-primary); }
.rn-shelf-accent { background: var(--clr-accent); }
.rn-shelf-warm   { background: var(--clr-secondary); }

/* --------------------------------------------------------------------------
   The one caveat per release
   -------------------------------------------------------------------------- */

.rn-notice {
  background: var(--clr-bg-warm);
  border: 1px solid rgba(166,58,43,0.3);
  border-radius: 20px;
  padding: 20px 28px;
  display: flex;
  gap: 18px;
  align-items: center;
}

.rn-notice-mark {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  line-height: 1;
  color: var(--clr-accent);
  opacity: 0.85;
  flex: none;
}

.rn-notice-heading {
  font-family: var(--font-heading);
  font-size: 1.125rem;
  font-weight: 600;
  margin: 0 0 3px;
  color: var(--clr-primary);
}

.rn-notice-body {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 0.84375rem;
  line-height: 1.55;
  color: var(--clr-secondary);
  max-width: 900px;
}

/* --------------------------------------------------------------------------
   The prose
   On the page for a browser without JavaScript; hidden the moment the page
   knows it has some, because then the modal is the way in.
   -------------------------------------------------------------------------- */

.rn-stories { max-width: 760px; margin: 0 auto 72px; }
.rn-js .rn-stories { display: none; }

.rn-stories-heading {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--clr-primary);
  margin-bottom: var(--space-6);
}

.rn-story + .rn-story {
  margin-top: var(--space-8);
  padding-top: var(--space-8);
  border-top: 1px solid var(--clr-border);
}

.rn-story-kicker {
  display: inline-block;
  font-family: var(--font-ui);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--clr-accent);
}

.rn-story-title {
  font-family: var(--font-heading);
  font-size: 1.5625rem;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 8px 0 16px;
  color: var(--clr-primary);
  text-wrap: balance;
}

.rn-story-para {
  margin: 0 0 12px;
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--clr-text);
  text-wrap: pretty;
}

.rn-story-note {
  margin: 16px 0 0;
  background: var(--clr-bg-warm);
  border: 1px solid rgba(166,58,43,0.3);
  border-radius: 10px;
  padding: 13px 17px;
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--clr-secondary);
}

.rn-story-note strong { color: var(--clr-accent); font-weight: 600; }

/* --------------------------------------------------------------------------
   Modal
   -------------------------------------------------------------------------- */

/* Above .site-nav, which is fixed at z-index 100. The design's mock had no
   real navigation over it, and at the mock's z-index the nav sat on top of
   the scrim: it stayed lit while the dialog was open, and a click on the top
   strip of the page hit the nav instead of dismissing. 1000 is what the
   in-app help overlay in main.css already uses for a full-screen layer. */
.rn-scrim {
  position: fixed;
  inset: 0;
  background: var(--scrim);
  z-index: 1000;
  animation: rnScrimIn 0.2s ease;
}

.rn-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(540px, calc(100vw - 48px));
  max-height: min(76vh, 640px);
  overflow: auto;
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: 16px;
  box-shadow: var(--shadow-modal);
  z-index: 1001;
  padding: 30px 34px 28px;
  animation: rnModalIn 0.22s ease;
}

.rn-scrim[hidden],
.rn-modal[hidden] { display: none; }

/* The nav is behind the scrim for hit-testing — a click on the top strip
   dismisses the dialog — but it went on *painting* over it, so the page read
   as though the nav were still live while a dialog was open. A fixed element
   with a backdrop-filter gets its own compositor layer, and that layer wins
   over ordinary content whatever the z-index says.
   Clearing the filter — both spellings, since main.css sets the -webkit- one
   too — does not release the layer, and neither does dropping the z-index.
   So the nav is faded here rather than covered: it recedes to about what the
   scrim would have made of it, and it comes back the moment the dialog does.
   The blur goes with it, or it spends the fade sampling a half-dimmed page. */
body.rn-modal-open .site-nav {
  opacity: 0.28;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transition: opacity var(--trans-normal);
}

.rn-modal .rn-story-title { padding-right: 28px; }

.rn-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--clr-border);
  background: var(--clr-surface);
  color: var(--clr-text-muted);
  font-family: var(--font-ui);
  font-size: 0.875rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color var(--trans-normal), border-color var(--trans-normal);
}

.rn-modal-close:hover,
.rn-modal-close:focus-visible {
  color: var(--clr-accent);
  border-color: var(--clr-accent);
}

@keyframes rnScrimIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes rnModalIn {
  from { opacity: 0; transform: translate(-50%, -47%) scale(0.97); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

@keyframes rnCaret {
  0%, 49%   { opacity: 1; }
  50%, 100% { opacity: 0; }
}

/* --------------------------------------------------------------------------
   Earlier releases — the old list, folded away
   -------------------------------------------------------------------------- */

.rn-archive-wrap {
  background-color: var(--clr-bg);
  padding-block: var(--space-4) var(--space-24);
}

.rn-archive { border-top: 1px solid var(--clr-border); }

.rn-archive-summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-6);
  cursor: pointer;
  list-style: none;
}

.rn-archive-summary::-webkit-details-marker { display: none; }

.rn-archive-summary:focus-visible {
  outline: 2px solid var(--clr-accent);
  outline-offset: 3px;
}

.rn-archive-summary-label {
  font-family: var(--font-heading);
  font-size: 1.375rem;
  font-weight: 500;
  color: var(--clr-primary);
}

.rn-archive-summary-label::after { content: " \25BE"; color: var(--clr-accent); }
.rn-archive[open] .rn-archive-summary-label::after { content: " \25B4"; }

.rn-archive-count {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--clr-text-muted);
}

.rn-archive-body .release { padding-block: var(--space-10); }
.rn-archive-body .release:first-child { padding-top: 0; }
.rn-archive-body .release-title { font-size: clamp(1.375rem, 2.4vw, 1.75rem); }

/* --------------------------------------------------------------------------
   Narrower
   -------------------------------------------------------------------------- */

@media (max-width: 1080px) {
  .rn-release { padding-inline: var(--space-6); }
  .rn-grid { grid-template-columns: repeat(6, 1fr); }
  .rn-s6, .rn-s12 { grid-column: span 6; }
}

@media (max-width: 700px) {
  .rn-release { padding-inline: var(--space-5); }
  .rn-masthead,
  .rn-release:first-child .rn-masthead { padding-block: var(--space-12) var(--space-8); }

  .rn-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 132px;
    gap: 10px;
    margin-bottom: var(--space-12);
  }

  .rn-s2 { grid-column: span 1; }
  .rn-s3, .rn-s6, .rn-s12 { grid-column: span 2; }
  /* Full width already gives the flagship its weight; three rows of it just
     leaves air between the picture and the title. */
  .rn-r3 { grid-row: span 2; }

  .rn-tile { padding: 14px 12px; gap: 8px; }
  .rn-label { padding-inline: 6px; }
  .rn-s2 .rn-label { font-size: 0.75rem; padding-inline: 0; }
  .rn-tone-feature { padding: 18px; gap: 14px; }
  .rn-tone-feature .rn-label { font-size: 1.375rem; }

  .rn-kind-theme_gallery {
    display: flex;
    grid-row: span 3;
    gap: 14px;
    text-align: center;
  }
  .rn-kind-theme_gallery .rn-label { order: -2; align-self: center; font-size: 2rem; }
  .rn-kind-theme_gallery .rn-sub { order: -1; align-self: center; font-size: 0.84375rem; }
  .rn-theme-gallery { gap: 8px; }
  .rn-theme-sample { padding: 8px; }
  .rn-theme-page { grid-template-columns: 1fr; padding: 5px 8px; }
  .rn-theme-page span { grid-row: auto; font-size: 1.5rem; }
  .rn-theme-page i { display: none; }

  .rn-display-on-ink { font-size: 1.875rem; }
  .rn-display-accent-oldstyle,
  .rn-display-mono { font-size: 1.375rem; }
  .rn-display-word { font-size: 0.8125rem; }
  .rn-display-tracked { font-size: 0.8125rem; letter-spacing: 0.22em; }
  .rn-display-duo { font-size: 1.25rem; }

  .rn-pill { font-size: 0.625rem; padding: 6px 10px; white-space: normal; }
  .rn-faces-serif { font-size: 1.125rem; }
  .rn-faces-sans  { font-size: 1rem; }
  .rn-faces-mono  { font-size: 0.9375rem; }
  .rn-figures-lining, .rn-figures-oldstyle { font-size: 1.125rem; }
  .rn-checklist { font-size: 0.65625rem; }

  .rn-notice {
    grid-row: span 2;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 18px 20px;
  }

  .rn-stories { margin-bottom: var(--space-12); }
  .rn-modal { padding: 26px 22px 24px; width: calc(100vw - 32px); max-height: 82vh; }
}

@media (prefers-reduced-motion: reduce) {
  .rn-scrim, .rn-modal { animation: none; }
  .rn-caret { animation: none; }
  .rn-tile, .rn-chip, .rn-modal-close { transition: none; }
  .rn-tile:hover { transform: none; }
}

/* 1.34: manuscript journeys and readable ink-card illustrations. */
.rn-cloud-art { width: min(100%, 760px); height: 160px; color: var(--clr-primary); }
.rn-kind-cloud_devices .rn-visual { align-items: center; min-height: 0; }
.rn-ios-art { width: min(92%, 380px); height: 160px; color: #e5dac5; }
.rn-tone-ink .rn-sub,
.rn-tone-ink .rn-figures { color: #f3ecdd; }
.rn-kind-ios_writing .rn-sub { padding-inline: 20px; margin-top: 0; }
@media (max-width: 640px) {
  .rn-cloud-art { height: auto; max-height: 150px; }
  .rn-ios-art { height: 130px; }
}

/* 1.35 — a small editorial atlas. Scoped so earlier editions keep their design. */
.rn-edition-worlds { --rn-forest: #233f35; --rn-gold: #b68c50; --rn-paper: #fbf7ee; max-width: 1280px; }
.rn-edition-worlds .rn-masthead { position: relative; padding-bottom: 46px; }
.rn-edition-worlds .rn-masthead::before { content: "✦"; display: block; color: var(--rn-gold); font-size: 28px; margin-bottom: 20px; }
.rn-edition-worlds .rn-headline { max-width: 840px; margin-inline: auto; font-size: clamp(3rem, 6.3vw, 5.6rem); letter-spacing: -.045em; color: var(--rn-forest); }
.rn-intro { max-width: 550px; margin: 24px auto 0; font-size: 1.0625rem; line-height: 1.75; color: var(--clr-text-muted); text-wrap: balance; }
.rn-edition-worlds .rn-grid { grid-auto-rows: 128px; gap: 16px; }
.rn-edition-worlds .rn-s8 { grid-column: span 8; }
.rn-edition-worlds .rn-s4 { grid-column: span 4; }
.rn-edition-worlds .rn-tile { align-items: flex-start; justify-content: flex-end; padding: 28px; text-align: left; border-radius: 14px; gap: 10px; border-color: #dfd8ca; box-shadow: none; }
.rn-edition-worlds .rn-tile:hover { border-color: var(--rn-gold); box-shadow: 0 10px 28px #233f3510; }
.rn-edition-worlds .rn-tone-feature { background: #eee8da; }
.rn-edition-worlds .rn-tone-warm { background: #eee7d8; }
.rn-edition-worlds .rn-tone-ink { background: var(--rn-forest); border-color: var(--rn-forest); }
.rn-edition-worlds .rn-eyebrow { position: absolute; top: 24px; left: 28px; z-index: 1; font-family: var(--font-mono); font-size: .625rem; font-weight: 500; letter-spacing: .11em; text-transform: uppercase; color: #5c685a; }
.rn-edition-worlds .rn-label { position: relative; z-index: 1; padding: 0; font-family: var(--font-heading); font-size: clamp(1.5rem, 2.3vw, 2.1rem); line-height: 1.1; font-weight: 400; letter-spacing: -.025em; color: var(--rn-forest); max-width: 94%; text-wrap: balance; }
.rn-edition-worlds .rn-kind-workspace .rn-label { font-size: clamp(2rem, 3vw, 2.75rem); }
.rn-edition-worlds .rn-sub { position: relative; z-index: 1; margin: 0; padding: 0 20px 0 0; max-width: 480px; font-size: .8125rem; line-height: 1.6; color: #626254; text-wrap: pretty; }
.rn-edition-worlds .rn-tone-ink .rn-label { color: #fbf7ee; }
.rn-edition-worlds .rn-tone-ink .rn-sub { color: #d3d8c8; }
.rn-edition-worlds .rn-tone-ink .rn-eyebrow { color: #d3bd8f; }
.rn-edition-worlds .rn-chip { right: 18px; bottom: 20px; width: 28px; height: 28px; font-size: 1rem; background: transparent; color: #526250; border-color: #bbb6a5; }
.rn-edition-worlds .rn-tone-ink .rn-chip { color: #e2d6bc; border-color: #788878; }
.rn-edition-worlds .rn-visual { display: flex; align-items: center; justify-content: center; position: absolute; inset: 52px 20px 132px; width: auto; height: auto; max-width: none; }
.rn-edition-worlds .rn-r2 .rn-visual { inset: 48px 24px 106px; }
.rn-edition-worlds .rn-notice { border-color: #dfd8ca; background: transparent; border-radius: 14px; }
.rn-edition-worlds .rn-notice-heading { color: var(--rn-forest); }
.rn-edition-worlds .rn-notice-mark { color: var(--rn-gold); }
.rn-workspace { width: 100%; max-width: 600px; border-radius: 7px; border: 1px solid #c6c8b7; background: #fbf7ee; box-shadow: 0 14px 28px #263b2f15; transform: rotate(-1deg); }
.rn-workspace-bar { height: 25px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 12px; background: #e1e5d8; font-size: 7px; color: #53614e; border-bottom: 1px solid #d2d6c9; }
.rn-window-dots { color: #a7b09a; letter-spacing: 2px; }
.rn-workspace-body { display: grid; grid-template-columns: 100px 1fr 110px; min-height: 185px; }
.rn-workspace-nav { display: flex; flex-direction: column; gap: 6px; padding: 12px 10px; color: #52604d; background: #eef0e7; font-size: 8px; }
.rn-workspace-nav small { margin-top: 3px; font-size: 5px; letter-spacing: 1px; color: #7d876f; }
.rn-workspace-nav b { background: #dce3d2; padding: 5px; border-radius: 3px; }
.rn-workspace-page { padding: 16px 22px; color: #344234; font-family: Georgia, serif; text-align: left; }
.rn-paper-running { display: block; font-size: 5px; letter-spacing: 1.1px; text-align: center; }
.rn-paper-chapter { display: block; margin: 16px 0 6px; font-size: 7px; color: #8a806b; }
.rn-workspace-page strong { font-size: 20px; font-weight: 400; line-height: 1.08; }
.rn-workspace-page p { font-size: 7px; line-height: 1.6; margin: 10px 0 6px; }
.rn-ink-lines { display: grid; gap: 4px; }
.rn-ink-lines i { height: 1px; width: 100%; background: #d5d1c1; }
.rn-ink-lines i:last-child { width: 68%; }
.rn-workspace-note { align-self: center; margin-right: 13px; padding: 12px 8px; display: flex; flex-direction: column; gap: 7px; border: 1px solid #ded8c5; background: #f0ecdf; transform: rotate(3deg); color: #5e6955; font-size: 7px; }
.rn-workspace-note small { font-size: 5px; letter-spacing: 1px; }
.rn-note-icon { font-size: 32px; text-align: center; color: #a48853; }
.rn-workspace-note strong { font: 12px Georgia, serif; }
.rn-workspace-note i { height: 1px; background: #d2ccb9; }
.rn-workspace-caption { display: block; padding: 5px; border-top: 1px solid #e1dfd3; font-size: 6px; text-align: center; letter-spacing: .6px; color: #828675; }
.rn-world-orbit { position: relative; width: 250px; height: 210px; color: #d9d2b7; }
.rn-orbit { position: absolute; inset: 28px 45px; border: 1px solid #78907980; border-radius: 50%; }
.rn-orbit-two { inset: 9px 25px; border-style: dashed; border-color: #78907950; }
.rn-orbit-centre { position: absolute; inset: 70px 0 auto; text-align: center; font: 22px/1.15 Georgia, serif; }
.rn-orbit-centre em { font-size: 36px; color: #f2ead8; }
.rn-orbit-tag { position: absolute; padding: 6px 10px; font-size: 8px; border: 1px solid #75856b; border-radius: 20px; background: #233f35; }
.rn-orbit-north { top: 9px; left: 91px; }.rn-orbit-east { right: 8px; top: 96px; }.rn-orbit-south { bottom: 8px; left: 100px; }.rn-orbit-west { left: 8px; top: 96px; }.rn-orbit-star { position: absolute; left: 54px; top: 40px; color: #d1ae68; }
.rn-board-art { position: relative; width: 100%; height: 220px; background-image: radial-gradient(#b8b19b 1px, transparent 1px); background-size: 14px 14px; }
.rn-board-art svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.rn-board-card { position: absolute; display: flex; flex-direction: column; text-align: left; box-shadow: 0 5px 12px #4a45221a; border: 1px solid #ddd3b8; }
.rn-board-note { left: 5%; top: 17px; width: 38%; height: 110px; padding: 16px; background: #f6e8b8; transform: rotate(-5deg); }
.rn-board-card small { font-size: 6px; letter-spacing: 1px; color: #706b4f; }
.rn-board-card strong { font: 19px/1.15 Georgia, serif; color: #3c4633; margin-top: 8px; }
.rn-board-note i { margin-top: 8px; height: 1px; background: #d3c799; width: 76%; }
.rn-board-landscape { overflow: hidden; right: 7%; top: 2px; width: 37%; height: 120px; background: #9eb6a1; transform: rotate(5deg); border: 7px solid #fbf7ee; }
.rn-landscape-sun { position: absolute; border-radius: 50%; width: 28px; height: 28px; background: #f7df9a; right: 18px; top: 13px; }
.rn-landscape-mountain { position: absolute; inset: 42px -5px -20px; background: #395b49; clip-path: polygon(0 75%, 30% 0, 59% 57%, 73% 25%, 100% 74%, 100% 100%, 0 100%); }
.rn-board-landscape small { position: absolute; bottom: 0; background: #fbf7ee; width: 100%; padding: 4px; font: 8px Georgia, serif; text-align: center; }
.rn-board-person { bottom: 2px; left: 31%; width: 37%; padding: 10px 12px; background: #fbf7ee; transform: rotate(2deg); }
.rn-board-person > span { position: absolute; right: 12px; color: #b68c50; font-size: 26px; }
.rn-board-person strong { font-size: 15px; }
.rn-board-swatch { position: absolute; bottom: 12px; left: 4%; display: flex; transform: rotate(-6deg); padding: 4px; background: #fffaf0; }
.rn-board-swatch i { height: 22px; width: 17px; background: #35584a; }.rn-board-swatch i:nth-child(2) { background: #8ba08b; }.rn-board-swatch i:nth-child(3) { background: #c6a66b; }.rn-board-swatch i:nth-child(4) { background: #deceb0; }
.rn-map-art { width: 100%; max-height: 245px; }
.rn-rooms-art { display: flex; flex-direction: column; gap: 2px; width: 220px; transform: rotate(-5deg); color: #3c5541; font: 15px Georgia, serif; }
.rn-rooms-art span { padding: 6px 10px; border: 1px solid #c5cbb8; background: #eef0e5; width: 150px; box-shadow: 3px 3px 0 #e2e4d8; }.rn-rooms-art span:nth-of-type(2) { align-self: center; }.rn-rooms-art span:nth-of-type(3) { align-self: flex-end; }.rn-rooms-art small { font: 8px var(--font-mono); color: #8a7c53; margin-right: 6px; }.rn-rooms-art i { align-self: center; font-size: 10px; line-height: 7px; color: #b68c50; }
.rn-lens-art { display: flex; align-items: center; justify-content: center; position: relative; height: 120px; width: 230px; }
.rn-lens-art > span { display: grid; place-items: center; width: 112px; height: 112px; border-radius: 50%; font: italic 15px Georgia, serif; border: 1px solid #84987c; background: #83977426; color: #3c5541; }.rn-lens-front { margin-left: -26px; border-color: #b68c50 !important; background: #c8a56526 !important; }.rn-lens-art i { position: absolute; color: #a38242; left: 108px; top: 10px; }
.rn-mood-art { display: flex; position: relative; align-items: center; gap: 18px; width: 225px; height: 115px; padding: 12px 18px; background: #eae9dc; transform: rotate(3deg); border: 1px solid #d3d5c3; }
.rn-mood-type { color: #345140; font: 52px Georgia, serif; }.rn-mood-type small { display: block; font: italic 8px Georgia, serif; }.rn-mood-colours { display: grid; grid-template-columns: repeat(2, 25px); gap: 4px; }.rn-mood-colours i { height: 25px; background: #304d3d; }.rn-mood-colours i:nth-child(2) { background: #91a386; }.rn-mood-colours i:nth-child(3) { background: #c4a466; }.rn-mood-colours i:nth-child(4) { background: #d6c6a5; }.rn-mood-mark { position: absolute; right: -9px; bottom: -12px; font-size: 40px; color: #b68c50; }
.rn-writing-art { display: flex; gap: 24px; align-items: center; color: #3a5140; }.rn-writing-slash { font: 80px Georgia, serif; color: #b68c50; }.rn-writing-menu { display: flex; flex-direction: column; padding: 8px; gap: 6px; background: #fffdf5; border: 1px solid #dedaca; width: 110px; box-shadow: 0 8px 15px #243e3310; font-size: 9px; transform: rotate(-3deg); }.rn-writing-menu b { padding: 6px; background: #e6ecdc; }.rn-writing-menu > span { padding-inline: 6px; }.rn-writing-verse { font: 18px/1.4 Georgia, serif; }
.rn-cover-art { display: flex; height: 126px; transform: rotate(-4deg); box-shadow: 0 7px 18px #233f3526; color: #e5d7b2; background: #304d3d; border: 1px solid #aa956b; }.rn-cover-back { width: 82px; display: flex; flex-direction: column; gap: 6px; padding: 24px 13px; }.rn-cover-back i { height: 1px; background: #e5d7b244; }.rn-cover-back small { margin-top: 28px; font-size: 5px; letter-spacing: 2px; }.rn-cover-spine { writing-mode: vertical-rl; border-inline: 1px solid #a6986b66; padding: 12px 5px; font: 5px Georgia, serif; letter-spacing: 1px; }.rn-cover-front { width: 115px; padding: 12px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 7px; }.rn-cover-front small { font-size: 5px; letter-spacing: 2px; }.rn-cover-front strong { font: 14px/1.15 Georgia, serif; }.rn-cover-front > span { font-size: 23px; }
@media (max-width: 1080px) and (min-width: 701px) {
  .rn-edition-worlds .rn-grid { grid-template-columns: repeat(12, minmax(0,1fr)); }
  .rn-edition-worlds .rn-s6 { grid-column: span 6; }
  .rn-edition-worlds .rn-s12 { grid-column: span 12; }
  .rn-edition-worlds .rn-tile { padding: 22px; }
  .rn-edition-worlds .rn-eyebrow { left: 22px; font-size: .55rem; letter-spacing: .04em; }
  .rn-edition-worlds .rn-label { font-size: 1.65rem; }
  .rn-edition-worlds .rn-r2 .rn-visual { inset-inline: 12px; }
  .rn-workspace-body { grid-template-columns: 76px 1fr; }.rn-workspace-note { display: none; }
  .rn-edition-worlds .rn-kind-world_orbit .rn-visual { inset-inline: 0; }
  .rn-mood-art { width: 180px; padding-inline: 8px; gap: 8px; }.rn-mood-type { font-size: 40px; }
  .rn-writing-art { gap: 12px; }.rn-writing-slash { display: none; }.rn-writing-verse { font-size: 16px; }
}
@media (max-width: 700px) {
  .rn-edition-worlds { padding-inline: 16px; }
  .rn-edition-worlds .rn-masthead { padding-top: 40px; }.rn-edition-worlds .rn-headline { font-size: clamp(2.9rem, 10vw, 4rem); }
  .rn-intro { font-size: .9375rem; }.rn-edition-worlds .rn-meta { gap: 10px; }.rn-edition-worlds .rn-free { flex-basis: 100%; }.rn-edition-worlds .rn-dot { display: none; }
  .rn-edition-worlds .rn-grid { grid-template-columns: 1fr; grid-auto-rows: auto; gap: 14px; }
  .rn-edition-worlds .rn-s4, .rn-edition-worlds .rn-s6, .rn-edition-worlds .rn-s8, .rn-edition-worlds .rn-s12 { grid-column: 1; }
  .rn-edition-worlds .rn-tile { grid-row: auto; min-height: 370px; padding: 56px 24px 24px; }
  .rn-edition-worlds .rn-r2 { min-height: 285px; }
  .rn-edition-worlds .rn-label { font-size: 1.9rem; }.rn-edition-worlds .rn-sub { font-size: .8125rem; }
  .rn-edition-worlds .rn-eyebrow { left: 24px; }
  /* Let wrapped copy determine the card height. Keeping the illustration in
     flow reserves its space even when a heading takes two or three lines. */
  .rn-edition-worlds .rn-visual { position: relative; inset: auto; flex: 0 0 220px; width: 100%; height: 220px; margin-bottom: 14px; }
  .rn-edition-worlds .rn-r2 .rn-visual { inset: auto; flex-basis: 156px; height: 156px; }
  .rn-workspace-body { grid-template-columns: 72px 1fr; min-height: 150px; }.rn-workspace-note { display: none; }.rn-workspace-page { padding: 12px; }.rn-workspace-page strong { font-size: 18px; }.rn-workspace-nav { font-size: 6px; padding: 8px; gap: 5px; }.rn-workspace-nav small { font-size: 4px; }.rn-workspace-page p { font-size: 6px; }
  .rn-workspace-bar { font-size: 5px; }.rn-workspace-bar > span:last-child { display: none; }
  .rn-board-art { height: 195px; }.rn-board-card strong { font-size: 16px; }.rn-board-note { padding: 12px; }
  .rn-edition-worlds .rn-notice { grid-row: auto; padding: 24px; }
}
@media (prefers-reduced-motion: reduce) { .rn-edition-worlds .rn-tile:hover { transform: none; } }

/* 1.36 — the author's workspace and public home, in the same paper palette. */
.rn-edition-author-home .rn-eyebrow { font-family: var(--font-mono); font-size: .625rem; letter-spacing: .09em; text-transform: uppercase; color: var(--clr-text-muted); }
.rn-edition-author-home .rn-label { font-family: var(--font-heading); font-size: clamp(1.2rem, 2vw, 1.65rem); font-weight: 500; letter-spacing: -.02em; text-wrap: balance; }
.rn-edition-author-home .rn-tone-feature { gap: 12px; }
.rn-edition-author-home .rn-tone-feature .rn-label { font-size: clamp(1.5rem, 3vw, 2rem); }
.rn-edition-author-home .rn-sub { margin: 0; }
.rn-edition-author-home .rn-kind-theme_gallery { display: flex; text-align: center; gap: 10px; }
.rn-edition-author-home .rn-kind-theme_gallery .rn-label { align-self: center; order: 0; }
.rn-edition-author-home .rn-theme-gallery { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 460px; }
.rn-edition-author-home .rn-theme-page { grid-template-columns: 1fr; }
.rn-edition-author-home .rn-theme-page i { display: none; }
.rn-edition-author-home .rn-kind-checklist .rn-checklist { display: flex; flex-direction: row; justify-content: center; flex-wrap: wrap; gap: 8px 24px; width: 100%; max-width: none; }
.rn-edition-author-home .rn-kind-author_page .rn-visual { overflow: visible; }
.rn-author-page { align-self: center; width: min(100%, 480px); border: 1px solid #d3c7b7; border-radius: 8px; overflow: hidden; background: #faf5ed; color: #503d30; box-shadow: 0 8px 20px #503d3012; }
.rn-author-address { display: flex; justify-content: space-between; gap: 8px; padding: 6px 12px; border-bottom: 1px solid #e2d7c8; font: 8px var(--font-ui); color: #877565; }
.rn-author-address > span:first-child { letter-spacing: 2px; color: #b89e83; }
.rn-author-introduction { display: flex; align-items: center; justify-content: center; gap: 24px; padding: 13px 20px; }
.rn-author-portrait { position: relative; flex: 0 0 68px; height: 82px; overflow: hidden; border-radius: 40px 40px 5px 5px; background: #e4d4b8; }
.rn-author-portrait::before { content: ''; position: absolute; width: 31px; height: 38px; border-radius: 45%; top: 13px; left: 19px; background: #947759; }
.rn-author-portrait i { position: absolute; width: 72px; height: 60px; border-radius: 50% 50% 0 0; top: 48px; left: -2px; background: #71816b; }
.rn-author-words { display: flex; flex-direction: column; gap: 6px; text-align: left; }
.rn-author-words small { font: 6px var(--font-mono); letter-spacing: 1.3px; color: #8b6a52; }
.rn-author-words strong { font: 21px/1.05 var(--font-heading); }
.rn-author-words strong em { color: #97644b; }
.rn-author-words > span { font: 8px var(--font-ui); color: #88745f; }
.rn-author-sections { display: flex; justify-content: center; gap: 30px; padding: 7px 12px; border-top: 1px solid #e2d7c8; font: 8px var(--font-ui); color: #79624c; }
@media (max-width: 700px) {
  .rn-edition-author-home .rn-grid { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .rn-edition-author-home .rn-s6, .rn-edition-author-home .rn-s12 { grid-column: 1; }
  .rn-edition-author-home .rn-tile { grid-row: auto; min-height: 240px; }
  .rn-edition-author-home .rn-tone-feature { padding: 18px 14px; }
  .rn-edition-author-home .rn-sub { font-size: .75rem; }
  .rn-edition-author-home .rn-kind-checklist { min-height: 190px; }
  .rn-edition-author-home .rn-kind-checklist .rn-checklist { flex-direction: column; }
  .rn-author-introduction { gap: 14px; padding: 12px; }
  .rn-author-words strong { font-size: 17px; }
  .rn-author-sections { gap: 16px; font-size: 7px; }
}