/* Canes Nobiles. One stylesheet. The page is set like the books:
   Junicode, black on white, and the only color is a series' cover field. */

/* block, not swap: a stand-in face is larger, and the rows visibly shrank when Junicode arrived */
@font-face { font-family: "Junicode"; src: url("fonts/junicode-regular.woff2") format("woff2"); font-display: block; }
@font-face { font-family: "Junicode"; font-style: italic; src: url("fonts/junicode-italic.woff2") format("woff2"); font-display: block; }
/* GFS Porson, served whole and unmodified under the OFL */
@font-face { font-family: "GFS Porson"; src: url("fonts/gfs-porson.woff2") format("woff2"); font-display: block; }

:root {
  --paper: #fff;
  --ink: #111;
  --muted: #6a6a6a;
  --hair: #d9d9d9;
  --field: #e4e4e4;
  --page: 62rem;
  --measure: 36rem;
  --gutter: clamp(1.1rem, 4vw, 2.5rem);
  color-scheme: only light;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 1.1875rem/1.55 "Junicode", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  font-variant-numeric: oldstyle-nums;
  text-rendering: optimizeLegibility;
}
.greek { font-family: "GFS Porson", "Junicode", serif; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
h1, h2 { font-weight: 400; line-height: 1.25; margin: 0; }
p { margin: 0 0 1em; }
main, .top, .foot { max-width: var(--page); margin: 0 auto; padding-inline: var(--gutter); }

/* ---- head and foot ---- */
.top { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding-block: 1.1rem; }
.imprint { display: flex; align-items: center; gap: 0.6rem; text-decoration: none;
  font-variant-caps: all-small-caps; letter-spacing: 0.14em; font-size: 1.15rem; }
.imprint svg { height: 2.3rem; width: auto; }
.top nav { display: flex; gap: 1.4rem; font-size: 1rem; }
.top nav a { text-decoration: none; }
.top nav a:hover { text-decoration: underline; }
.foot { margin-top: 3rem; padding-block: 1rem 2.5rem; text-align: center; color: var(--muted); font-size: 0.95rem; }
.foot .seal svg { width: 8.5rem; height: auto; color: var(--ink); font-family: "Junicode", serif; }

/* ---- the interlinear, as live text ---- */
.il { margin: 0; line-height: 1.2; }
.il .row { display: block; }
.il .w { display: inline-flex; flex-direction: column; margin: 0 0.55em 0.55em 0; vertical-align: top; }
.il .g { font-family: "Junicode", serif; font-size: 0.6em; color: var(--muted); margin-top: 0.25em; white-space: nowrap; }

/* ---- home ---- */
.quiet { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

/* the languages as tabs: no script, the URL's fragment picks the shelf. Nine equal
   cells, each under a bar of its cover color, like boards on a shelf; the open one fills. */
.chips { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 0.35rem; margin-top: 1.3rem;
  padding-bottom: 0.9rem; border-bottom: 1px solid var(--ink); font-size: 0.95rem; line-height: 1.25; }
.chips a { display: flex; align-items: center; justify-content: center; text-align: center; min-height: 3.4rem;
  padding: 0.45rem 0.3rem; border-top: 0.45rem solid var(--field); text-decoration: none; text-wrap: balance; }
.chips a:hover { background: color-mix(in srgb, var(--field) 30%, transparent); }

.shelf { display: none; margin-top: 0.4rem; scroll-margin-top: 100vh; }
.shelf:target, .shelf:has(:target), main:not(:has(.shelf:target, .shelf :target)) .shelf:first-of-type { display: block; }
.shelf h2 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
/* search: a small box over the table; while it holds a query every series shows */
.find { margin: 1.2rem 0 0; }
.find input { font: inherit; font-size: 1rem; color: var(--ink); background: transparent; width: 16rem; max-width: 100%;
  border: 0; border-bottom: 1px solid var(--muted); border-radius: 0; padding: 0.25rem 0; -webkit-appearance: none; appearance: none; }
.find input::placeholder { color: var(--muted); font-style: italic; }
.find input:focus { outline: none; border-bottom-color: var(--ink); box-shadow: 0 1px 0 var(--ink); }
.searching .shelf { display: block; }
.searching .shelf.empty { display: none !important; }
.searching .shelf h2 { position: static; width: auto; height: auto; clip-path: none; margin-top: 1.6rem;
  background: var(--field); color: #000; padding: 0.4rem 0.9rem; font-size: 1rem;
  font-variant-caps: all-small-caps; letter-spacing: 0.16em; }
.searching .chips a { background: none !important; color: inherit !important; }
.nothing { color: var(--muted); margin-top: 1.5rem; }
.shelf ol { list-style: none; margin: 0; padding: 0; }
.shelf li { border-bottom: 1px solid var(--hair); }
.shelf summary { display: grid; grid-template-columns: 2.1rem minmax(0, 1.15fr) minmax(0, 1fr) 4.2rem 1rem;
  column-gap: 1.1rem; align-items: baseline; padding: 0.7rem 0; cursor: pointer; list-style: none; }
.shelf details { scroll-margin-top: 1.5rem; }
.shelf summary::-webkit-details-marker { display: none; }
.shelf summary::after { content: "+"; color: var(--muted); text-align: right; }
.shelf details[open] > summary::after { content: "\2212"; }
.shelf summary:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
/* an unfolded row is compact: the printed page as a thumbnail, the facts beside it */
.unfold { padding: 0.1rem 0 1.3rem 3.2rem; }
.unfold .facts p { margin-bottom: 0.45rem; }
.unfold .sub { font-style: italic; }
.unfold p:has(> .get) { display: inline; }
.unfold .meta { display: inline; font-size: 0.92rem; }
.unfold .print { margin-top: 0.7rem; font-size: 1rem; }
.shelf .num { align-self: start; display: grid; place-items: center; width: 2.1rem; height: 2.1rem;
  background: var(--field); color: #000; font-variant-numeric: lining-nums; font-size: 1rem; }
.shelf .title { font-style: italic; font-size: 1.08rem; }
.shelf summary:hover .title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
.shelf .author { display: block; color: var(--muted); font-size: 0.9rem; }
.shelf .orig { font-size: 1rem; }
.shelf .state { text-align: right; color: var(--muted); font-size: 0.95rem; font-variant-caps: all-small-caps; letter-spacing: 0.08em; white-space: nowrap; }

.cols { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: 1.4rem; align-items: start; }
.get { display: inline-block; background: var(--ink); color: var(--paper); text-decoration: none;
  padding: 0.35rem 0.95rem; margin-right: 0.9rem; font-variant-caps: all-small-caps; letter-spacing: 0.14em; font-size: 1rem; }
.get:hover { background: var(--field); color: #000; }
.meta, .print.none { color: var(--muted); font-size: 0.98rem; max-width: 30rem; }
.print .buy { display: block; width: fit-content; margin-bottom: 0.2rem; }
.buy .out { width: 0.62em; height: 0.62em; margin-left: 0.35em; fill: none; stroke: currentColor; stroke-width: 1.1; vertical-align: 0.05em; }
/* the +1: a tile like a volume's number tile, in the series color */
.print.none { display: flex; align-items: center; gap: 0.8rem; }
.plus { flex: none; width: 2.1rem; height: 2.1rem; display: grid; place-items: center; padding: 0; border: 0; border-radius: 0;
  background: var(--field); color: #000; font: inherit; font-size: 0.95rem; font-variant-numeric: lining-nums;
  cursor: pointer; transition: background-color 0.15s, color 0.15s; }
.plus:hover, .plus:focus-visible { background: var(--ink); color: var(--paper); outline: none; }
.plus:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.plus:disabled { background: transparent; color: var(--muted); box-shadow: inset 0 0 0 1px var(--hair); cursor: default; }
@media (prefers-reduced-motion: reduce) { .plus { transition: none; } }
.leaf { margin: 0; order: -1; }
.leaf img { display: block; width: 100%; height: auto; border: 1px solid var(--hair); background: #fff; }

/* ---- about ---- */
/* the page opens on the epigraph, where the search box sits on the catalog */
.prose { padding-top: 1.2rem; }
.prose > p { font-size: 1.08rem; }
.prose .press { font-variant-caps: all-small-caps; letter-spacing: 0.12em; font-size: 1.08em; }
/* the epigraph may run past the text measure so that it holds one line where the page has room */
.epigraph { margin: 0 0 2.2rem; width: max-content; max-width: calc(min(var(--page), 100vw) - 2 * var(--gutter)); }
.prose .epigraph .il { font-size: 1.5rem; }
.epigraph .il .w { margin-right: 0.5em; margin-bottom: 0.2em; }
.prose .il { font-size: 1.5rem; padding-left: 1.1rem; border-left: 1px solid var(--ink); }
.epigraph figcaption { color: var(--muted); font-size: 0.92rem; margin-top: 0.5rem; padding-left: 1.1rem; }

@media (max-width: 46rem) {
  body { font-size: 1.125rem; }
  .chips { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .chips a { min-height: 2.6rem; }
  .chips br.wide { display: none; }
  .shelf summary { grid-template-columns: 2.1rem minmax(0, 1fr) auto 1rem; row-gap: 0.15rem; }
  .unfold { padding-left: 0; }
  .cols { grid-template-columns: 5rem minmax(0, 1fr); gap: 1rem; }
  .unfold .meta { display: block; margin-top: 0.5rem; }
  .shelf .num { grid-row: 1 / span 2; }
  .shelf .orig { grid-column: 2 / 4; grid-row: 2; color: var(--muted); font-size: 0.92rem; }
  .shelf .state { grid-column: 3; grid-row: 1; }
}