/* 奥付 / Colophon: the same paper as the case studies: Garamond, margins, italic subheads. No monospaced all-caps labels. */
@layer layout {
  /* Definition lists: the name on the left, a sentence or two on the right, a hairline between entries */
  .col-list { margin: 14px 0 18px; border-top: 1px solid var(--kei); }
  .col-list > div { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: 4px 22px; padding: 10px 0 11px; border-bottom: 1px solid color-mix(in srgb, var(--kei) 55%, transparent); }
  .col-list dt { font-style: italic; color: var(--sumi); line-height: 1.4; }
  .col-list dt .dsp { font-style: normal; font-size: .92em; margin-right: .35em; }
  .col-list dt code, .col-list dd code { font-family: var(--f-mono); font-style: normal; font-size: .72em; letter-spacing: 0; }
  .col-list dd { font-size: 1rem; line-height: 1.5; color: var(--sumi); hyphens: manual; }
  .col-list dd kbd { font-family: var(--f-mono); font-size: .72em; border: 1px solid var(--kei); border-radius: 3px; padding: 0 .35em; }

  .weigh { display: grid; grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr)); gap: 14px 24px; margin: 16px 0 12px; }
  .weigh dt { font-style: italic; color: var(--usu); font-size: .95rem; }
  .weigh dd { font-size: 1.9rem; line-height: 1.15; font-variant-numeric: tabular-nums; }
  .weigh dd small { display: block; font-size: .95rem; font-style: italic; color: var(--usu); }
  .colophon-note { color: var(--usu); font-size: .95rem; }

  .swatches { display: flex; flex-wrap: wrap; gap: 12px 22px; margin: 14px 0 6px; padding: 0; list-style: none; }
  .swatches li { display: flex; align-items: center; gap: 8px; color: var(--usu); font-style: italic; }
  .swatches i { width: 20px; height: 20px; border: 1px solid var(--kei); display: block; }

  .storage { margin: 12px 0 6px; padding: 0; list-style: none; font-size: .95rem; border-top: 1px solid var(--kei); }
  .storage li { padding: 8px 0; border-bottom: 1px solid color-mix(in srgb, var(--kei) 55%, transparent); display: grid; grid-template-columns: 14rem minmax(0, 1fr); gap: 4px 18px; overflow-wrap: anywhere; }
  .storage li span:first-child { color: var(--usu); font-style: italic; }
  .storage [data-storage-empty] { display: block; color: var(--usu); font-style: italic; }
  .text-btn { background: none; border: 0; padding: 0; min-height: 44px; font: inherit; color: var(--ai); cursor: pointer;
              text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; }
  .text-btn:hover { color: var(--sumi); }

  /* 奥付: the small block at the end of a book, set in Japanese Mincho */
  .okuzuke { font-family: var(--f-mincho); }
  .okuzuke > h2 { font-family: var(--f-mincho); font-style: normal; font-weight: 700; letter-spacing: .1em; }
  .okuzuke dl { max-width: var(--text); border-top: 1px solid var(--sumi); border-bottom: 1px solid var(--sumi); padding: 10px 0; margin-top: 14px; font-size: .95rem; }
  .okuzuke dl > div { display: grid; grid-template-columns: 5em minmax(0, 1fr); gap: 12px; padding: 5px 0; }
  .okuzuke dt { color: var(--usu); letter-spacing: .2em; }
  .okuzuke dd { letter-spacing: .04em; }
  .okuzuke dd:lang(en) { font-family: var(--f-serif); letter-spacing: 0; }
  .okuzuke dd:lang(en) :lang(ja) { font-family: var(--f-mincho); letter-spacing: .04em; }
  /* The 蔵書印: the library’s seal, 鈴奈庵蔵 read down the right column then the left, in 朱 (the only vermilion on the public side).
     Pressed a little askew and let through to the paper, as a stamp is; at night the ink sits on top instead. */
  .okuzuke__row { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 1.5rem 3.5rem; }
  .okuzuke__row dl { flex: 1 1 24em; }
  .zoushoin { flex: none; margin-top: 1.1rem; color: var(--shu); transform: rotate(-2.5deg); opacity: .9; mix-blend-mode: multiply; }
  @media (max-width: 40em) { .zoushoin { margin: 0 .5rem 0 auto; } }   /* wrapped under the list: pressed at the foot of the page, on the right */
  .zoushoin text { font-family: var(--f-mincho); font-weight: 700; }
  @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .zoushoin { mix-blend-mode: normal; } }
  :root[data-theme="dark"] .zoushoin { mix-blend-mode: normal; }

  @media (max-width: 560px) {
    .col-list > div, .storage li { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  }
}