/* The writing surfaces: the Start here shelf, the own-writing switch and the labels on other people's words.
   Tokens only (assets/tokens.css), Besley / Hanken Grotesk / Martian Mono as loaded. Loaded after site.css. */

/* ===== msayla/writing-shelf: the front table. Nine best face-out (12-column grid, 4 wide: three rows of three),
   eight runner-ups beside them (3 wide: two rows of four). Tablet: two columns, the first best spans both so
   neither tier ends on an orphan. Phone: one column. ===== */
.p-writing-shelf { padding-top: var(--space-34); padding-bottom: var(--space-55); }
.p-writing-shelf .shelf-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-21); }
.p-shelf-card { position: relative; display: flex; flex-direction: column; box-sizing: border-box; min-height: 44px; }
.p-shelf-card.best { grid-column: span 4; padding: var(--space-21) var(--space-21) var(--space-34); background: var(--surface-raised); border-top: 4px solid var(--marigold); min-height: 233px; }
.p-shelf-card.runner { grid-column: span 3; padding: var(--space-13) 0 var(--space-21); border-top: 1.5px solid var(--ink); }
.p-shelf-card .meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-3) var(--space-13); margin: 0 0 var(--space-13); font: 400 13px/1.4 var(--font-text); color: var(--ink-muted); }
.p-shelf-card .meta .ms-fig { font-size: 12.5px; color: var(--ink-muted); }
.p-shelf-card .meta .s { font-weight: 600; }
.p-shelf-card .t { margin: 0; font-family: var(--font-display); font-weight: 700; letter-spacing: -.01em; overflow-wrap: break-word; hyphens: auto; text-wrap: balance; }
.p-shelf-card.best .t { font-size: 27px; line-height: 1.14; }
.p-shelf-card.runner .t { font-size: 20px; line-height: 1.2; }
.p-shelf-card .t a { color: var(--ink); text-decoration: none; }
.p-shelf-card .t a::after { content: ""; position: absolute; inset: 0; }
.p-shelf-card:hover .t a { color: var(--indigo); text-decoration: underline; text-underline-offset: 3px; }
.p-shelf-card:focus-within { outline: 2px solid var(--focus); outline-offset: 3px; }
.p-shelf-card .t a:focus-visible { outline: none; }
.p-shelf-card .dek { margin: var(--space-13) 0 0; font: 400 16px/1.55 var(--font-text); color: var(--ink); max-width: 46ch; }
.p-shelf-card.runner .dek { font-size: 15px; color: var(--ink-muted); }

@media (max-width: 900px) {
  .p-writing-shelf .shelf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .p-shelf-card.best, .p-shelf-card.runner { grid-column: span 1; }
  .p-shelf-card.best:first-child { grid-column: 1 / -1; }
  .p-shelf-card.best:first-child .t { font-size: 31px; }
}
@media (max-width: 560px) {
  .p-writing-shelf .shelf-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-13); }
  .p-shelf-card.best:first-child { grid-column: auto; }
  .p-shelf-card.best, .p-shelf-card.best:first-child { min-height: 0; padding: var(--space-21) var(--space-13) var(--space-21); }
  .p-shelf-card.best .t, .p-shelf-card.best:first-child .t { font-size: 24px; }
}

/* ===== the own-writing switch: one plain line and one plain link ===== */
.ms-view { margin: 0 0 var(--space-21); font: 400 15px/1.55 var(--font-text); color: var(--ink-muted); }
.ms-view .ms-fig { font-size: 13.5px; color: var(--ink); }
.ms-view a { display: inline-block; padding: 10px 0; min-height: 24px; color: var(--indigo); font-weight: 600; text-underline-offset: 3px; }
.ms-view.ms-wrap { margin-inline: auto; padding-top: var(--space-13); }

/* ===== labels on other people's words: small, plain ===== */
.p-writing-card .k.label { margin-left: var(--space-8); font: 600 12px/1 var(--font-text); letter-spacing: .02em; color: var(--marigold-ink); white-space: nowrap; }
.ms-index-label { font: 600 13px/1.45 var(--font-text); color: var(--marigold-ink); white-space: nowrap; }
.ms-index-label:empty { display: none; }
@media (min-width: 761px) {
  .ms-index-row { grid-template-columns: 144px minmax(0, 1fr) 104px 174px; }
  .ms-index-label:empty { display: block; }
}