/* ============================================================================
   shi.css — "Among Friends" 詩, the poetry anthology
   The article chrome comes from articles.css; this file sets only the poems.

   A poem is set, not flowed: every line is its own block, so a line too long
   for a phone wraps with a hanging indent instead of looking like a new line.
   Nothing here moves. Themes with the site through the .oa-artview tokens.
   ============================================================================ */

/* The accent lives in articles.css with every other article's (see the note
   there on why it must not be repeated here at ID weight). */

#view-shi .oa-epi { margin: 1.5em 0; padding: .2em 0 .2em 1.1em; border-left: 2px solid var(--acc); font-family: 'Spectral', serif; font-style: italic; color: var(--ink3); font-size: 1.08rem; line-height: 1.7; }
#view-shi .oa-epi .small { font-size: .86em; color: var(--mut); }
#view-shi .oa-epi cite { display: block; font-style: normal; font-size: .8rem; color: var(--mut); margin-top: .5em; }
#view-shi .oa-epi cite::before { content: "— "; }
#view-shi .hanzi { font-family: 'Noto Serif TC', serif; font-style: normal; }

/* ---- the poems: each one a sheet of poem paper (詩箋) on the desk ----
   The section is the desk; every poem lies on it as its own sheet of xuan
   paper, framed like a woodblock page (四周雙邊: a heavy line outside, a
   hairline inside) with a narrow band down the right edge in which the
   poem's place in the series is written upright: 其一, 其二 … the way a
   cycle of Chinese poems is counted. Paper and wood keep their own colour
   (DESIGN.md, the Material Rule); no phase colour, no seal on the sheets. */
#view-shi .shi-poems {
  margin: var(--s8) 0 0; padding: var(--s8) var(--s6);
  display: grid; gap: var(--s8); justify-items: center;
  background: var(--tex-wood), linear-gradient(var(--desk-hi), var(--desk) 30%, var(--desk) 90%, var(--desk-lo));
  background-size: 768px 384px, auto; background-blend-mode: multiply, normal;
  border-radius: var(--r-sm);
}

#view-shi .shi-poem {
  position: relative; width: 100%; max-width: 40rem; box-sizing: border-box;
  display: grid; grid-template-columns: minmax(0, 1fr) 2.6rem; grid-template-rows: auto 1fr; column-gap: var(--s5);
  min-height: 26rem; margin: 0; padding: 3.25rem 1.5rem 3.25rem 2.6rem;
  background-color: var(--sheet); background-image: var(--tex-paper);
  background-size: 384px auto; background-blend-mode: multiply;
  color: var(--sheet-ink); border-radius: var(--r-sheet); box-shadow: var(--lift);
  transform: rotate(-.25deg);
}
#view-shi .shi-poem:nth-child(even) { transform: rotate(.3deg); }
/* the printed frame: heavy outside, hairline inside */
#view-shi .shi-poem::before,
#view-shi .shi-poem::after { content: ""; position: absolute; pointer-events: none; }
#view-shi .shi-poem::before { inset: 14px; border: 2px solid var(--sheet-ink-3); opacity: .55; }
#view-shi .shi-poem::after  { inset: 19px; border: 1px solid var(--sheet-ink-3); opacity: .4; }

#view-shi .shi-poem > :not(.shi-qi) { grid-column: 1; }
#view-shi .shi-poem-hd, #view-shi .shi-poem-body { align-self: start; }
#view-shi .shi-poem-body { align-self: center; padding: var(--s5) 0; }

/* the band down the right edge, ruled off like the centre fold of a page */
#view-shi .shi-qi {
  grid-column: 2; grid-row: 1 / span 2; align-self: stretch;
  margin: -1.45rem 0; padding: 1.45rem 0;
  border-left: 1px solid color-mix(in srgb, var(--sheet-ink-3) 45%, transparent);
  writing-mode: vertical-rl; text-orientation: upright;
  display: flex; align-items: center; justify-content: flex-start;
  font: 500 1.15rem/1 var(--font-han); letter-spacing: .32em; color: var(--sheet-ink-2);
}

#view-shi .shi-poem-hd { margin: 0 0 var(--s5); }
#view-shi .shi-poem-t {
  font-family: 'Spectral', Georgia, serif; font-weight: 600;
  font-size: 1.45rem; line-height: 1.25; letter-spacing: -.01em;
  color: var(--sheet-ink); margin: 0; text-wrap: balance;
}
#view-shi .shi-poem-t.is-untitled { font-weight: 400; font-style: italic; }
#view-shi .shi-poem-by {
  font-family: 'Spectral', Georgia, serif; font-style: italic; font-size: .95rem;
  color: var(--sheet-ink-2); margin: .4rem 0 0;
}

#view-shi .shi-poem-body { font-family: 'Spectral', Georgia, serif; font-size: 1.14rem; line-height: 1.8; color: var(--sheet-ink); }
#view-shi .shi-stanza { margin: 0 0 1.4em; font: inherit; color: inherit; }
#view-shi .shi-stanza:last-child { margin-bottom: 0; }
#view-shi .shi-stanza .l { display: block; padding-left: 1.5em; text-indent: -1.5em; }
#view-shi .shi-stanza .l.in { padding-left: 3em; }   /* an indented line, as the author set it */
#view-shi .shi-poem:lang(zh) .shi-poem-body { font-family: 'Noto Serif TC', serif; letter-spacing: .06em; }

@media (max-width: 640px) {
  /* on a phone the desk shrinks to a rim and the sheet takes the width */
  #view-shi .shi-poems { padding: var(--s5) 6px; gap: var(--s5); margin-left: -14px; margin-right: -14px; }
  #view-shi .shi-poem { min-height: 0; grid-template-columns: minmax(0, 1fr) 1.5rem; column-gap: .6rem; padding: 2.1rem .75rem 2.1rem 1.45rem; transform: none; }
  #view-shi .shi-poem:nth-child(even) { transform: none; }
  #view-shi .shi-poem::before { inset: 6px; border-width: 1.5px; }
  #view-shi .shi-poem::after  { inset: 9px; }
  #view-shi .shi-qi { margin: -.85rem 0; padding: .85rem 0; font-size: .9rem; letter-spacing: .2em; }
  #view-shi .shi-poem-t { font-size: 1.25rem; }
  #view-shi .shi-poem-body { font-size: 1rem; line-height: 1.7; padding: var(--s3) 0 0; }
  #view-shi .shi-stanza .l { padding-left: 1em; text-indent: -1em; }
}

@media print {
  #view-shi .shi-poems { background: none; padding: 0; }
  #view-shi .shi-poem { transform: none; box-shadow: none; background: none; break-inside: avoid; }
}