@import url("/css/shared/transcription.css");

/* --- TeX Gyre Pagella (Palatino) + Math --- */

@font-face {
  font-family: "TeX Gyre Pagella";
  src: url("/fonts/tex-gyre/texgyrepagella-regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "TeX Gyre Pagella";
  src: url("/fonts/tex-gyre/texgyrepagella-italic.otf") format("opentype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "TeX Gyre Pagella";
  src: url("/fonts/tex-gyre/texgyrepagella-bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "TeX Gyre Pagella";
  src: url("/fonts/tex-gyre/texgyrepagella-bolditalic.otf") format("opentype");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "TeX Gyre Pagella Math";
  src: url("/fonts/tex-gyre/texgyrepagella-math.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* --- SangBleu Empire --- */

@font-face {
  font-family: "SangBleu Empire";
  src: url("/fonts/sangbleu/SangBleuEmpire-Regular-WebS.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "SangBleu Empire";
  src: url("/fonts/sangbleu/SangBleuEmpire-RegularItalic-WebS.woff2")
    format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "SangBleu Empire";
  src: url("/fonts/sangbleu/SangBleuEmpire-Medium-WebS.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "SangBleu Empire";
  src: url("/fonts/sangbleu/SangBleuEmpire-MediumItalic-WebS.woff2")
    format("woff2");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "SangBleu Empire";
  src: url("/fonts/sangbleu/SangBleuEmpire-Bold-WebS.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "SangBleu Empire";
  src: url("/fonts/sangbleu/SangBleuEmpire-BoldItalic-WebS.woff2")
    format("woff2");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "SangBleu Empire";
  src: url("/fonts/sangbleu/SangBleuEmpire-Black-WebS.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "SangBleu Empire";
  src: url("/fonts/sangbleu/SangBleuEmpire-BlackItalic-WebS.woff2")
    format("woff2");
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}

/* --- SangBleu Sunrise --- */

@font-face {
  font-family: "SangBleu Sunrise";
  src: url("/fonts/sangbleu/SangBleuSunrise-Air-WebS.woff2") format("woff2");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "SangBleu Sunrise";
  src: url("/fonts/sangbleu/SangBleuSunrise-AirItalic-WebS.woff2")
    format("woff2");
  font-weight: 100;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "SangBleu Sunrise";
  src: url("/fonts/sangbleu/SangBleuSunrise-Light-WebS.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "SangBleu Sunrise";
  src: url("/fonts/sangbleu/SangBleuSunrise-LightItalic-WebS.woff2")
    format("woff2");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "SangBleu Sunrise";
  src: url("/fonts/sangbleu/SangBleuSunrise-Regular-WebS.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "SangBleu Sunrise";
  src: url("/fonts/sangbleu/SangBleuSunrise-RegularItalic-WebS.woff2")
    format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "SangBleu Sunrise";
  src: url("/fonts/sangbleu/SangBleuSunrise-Medium-WebS.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "SangBleu Sunrise";
  src: url("/fonts/sangbleu/SangBleuSunrise-MediumItalic-WebS.woff2")
    format("woff2");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "SangBleu Sunrise";
  src: url("/fonts/sangbleu/SangBleuSunrise-Bold-WebS.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "SangBleu Sunrise";
  src: url("/fonts/sangbleu/SangBleuSunrise-BoldItalic-WebS.woff2")
    format("woff2");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

:root {
  --font-body: "TeX Gyre Pagella", serif;
  --font-math: "TeX Gyre Pagella Math", math;
  --font-heading: "SangBleu Empire", "TeX Gyre Pagella", serif;
  --font-heading-margin: "SangBleu Sunrise", "TeX Gyre Pagella", serif;
  --color-text: #444;
  --color-link: #000;
  --color-margin: #bbb;
  --color-translation: #777;
  --color-heading: #000;
  --color-series-number-bg: #444;
  --color-series-number-fg: #fff;
  --line-thickness: 2px;
  --line-thickness-hovered: 4px;
  --max-width: 44rem;
  --margin-col: 5rem;
  --margin-gap: 0.5rem;
  --margin-offset: calc(2 * (var(--margin-col) + var(--margin-gap)));
}

body {
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 1.125rem;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 4rem 1rem 2rem 1rem;
}

p,
li,
h3,
blockquote,
.fac {
  line-height: 2rem;
}

p,
ul,
h3,
hr {
  margin: 0 0 2rem 0;
}

h1,
h2,
h3 {
  color: var(--color-heading);
  text-wrap: balance;
}

h1,
h2 {
  font-family: var(--font-heading);
  font-weight: 400;
}

h1 {
  font-size: 4.4rem;
  line-height: 5rem;
  margin: 10rem 0 6rem 0;
  overflow-wrap: break-word;
}

h2 {
  font-size: 3.3rem;
  line-height: 4rem;
  margin: 6rem 0 2rem 0;
}

@media (width < 60rem) {
  h1 {
    font-size: 2.8rem;
    line-height: 3rem;
    margin: 5rem 0 3rem 0;
  }

  h2 {
    font-size: 2rem;
    line-height: 2rem;
    margin: 3rem 0 1rem 0;
  }

  section > h3 {
    display: inline;
    font-style: italic;
  }

  h3 > br,
  .fac > br {
    display: none;
  }

  h3 > a::after,
  .fac > a::after {
    content: " ";
  }

  section .fragment-link {
    opacity: 1;
  }

  .fac {
    display: inline;
    font-style: italic;
  }
}

@media (width >= 60rem) {
  :not(.index, .gallery) > section {
    display: grid;
    grid-template-columns: var(--margin-col) var(--margin-col) 1fr;
    gap: 0 var(--margin-gap);
    margin-left: calc(-1 * var(--margin-offset));
    margin-right: 0;
  }

  :not(.index, .gallery) > section > h3 {
    grid-column: 1;
    color: var(--color-margin);
    text-align: right;
    align-self: baseline;
  }

  :not(.index, .gallery) > section > .fac {
    grid-column: 2;
    grid-row: 1;
    align-self: baseline;
  }

  :not(.index, .gallery) > section > div {
    grid-column: 3;
    align-self: baseline;
  }

  :not(.index, .gallery) > section .fragment-link {
    opacity: 0;
    margin-right: 0.4em;
  }

  .index section,
  .gallery section {
    display: grid;
    grid-template-columns: 0 1fr;
  }

  .index section > h2,
  .gallery section > h2 {
    color: var(--color-margin);
    transform: translateX(-11rem);
    text-align: right;
    align-self: start;
    overflow: visible;
    width: 9rem;
    border-right: var(--line-thickness) solid var(--color-margin);
    padding-right: 1rem;
    margin: 0;
  }

  .index section > h2 {
    padding-top: 0.03em;
    height: calc(100% - 1rem);
  }

  .gallery section > h2 {
    padding-top: 0.75rem;
    height: calc(100% - 2.75rem);
  }
}

.fragment-link {
  text-decoration: none;
  color: var(--color-margin);
}

section:hover .fragment-link {
  opacity: 1;
}

.fragment-link:hover {
  color: var(--color-link);
  text-decoration: none;
}

.index section,
.gallery section {
  margin: 4rem 0 0 0;
}

.index section > h2,
.gallery section > h2 {
  font-family: var(--font-heading-margin);
  font-weight: 300;
  font-variant-numeric: oldstyle-nums;
}

.index ul {
  margin: 0 0 1rem 0;
}

h3 {
  font-size: 1.125rem;
  margin-bottom: 0;
  font-weight: bold;
}

a {
  color: var(--color-link);
  text-decoration: underline;
  text-underline-offset: 0.4rem;
  text-decoration-thickness: 0.1rem;
  text-decoration-color: var(--color-margin);
}

a:hover {
  text-decoration: underline;
  text-underline-offset: 0.35rem;
  text-decoration-thickness: 0.2rem;
}

section > h3,
section > h3 a,
section > .fac,
section > .fac a {
  color: var(--color-margin);
  font-weight: normal;
  font-style: italic;
  text-decoration: none;
}

section > h3 a:hover,
section > .fac a:hover {
  text-decoration: underline;
  text-underline-offset: 0.4rem;
  text-decoration-thickness: 0.1rem;
}

ul {
  padding-left: 0rem;
  list-style: none;
}

/* Restore list markers on the prose About page */
.about ul {
  padding-left: 1.5rem;
  list-style: disc;
}

.about ol {
  padding-left: 1.5rem;
  list-style: decimal;
}

.about ul ul {
  margin: 0;
  list-style: circle;
}

.about li {
  margin-bottom: 0.5rem;
}

strong {
  font-weight: 700;
}

blockquote {
  margin: 0 0 2rem 2rem;
}

nav {
  margin-bottom: 2rem;
}

img {
  max-width: 100%;
  height: auto;
}

img.viz {
  width: 100%;
}

details {
  line-height: 2rem;
  margin-bottom: 1rem;
}

details summary {
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 0.4rem;
  text-decoration-thickness: 0.1rem;
  text-decoration-color: var(--color-margin);
  font-weight: bold;
  color: var(--color-link);
  list-style: none;
  margin-bottom: 1rem;
  user-select: none;
}

details summary:hover {
  text-underline-offset: 0.35rem;
  text-decoration-thickness: 0.2rem;
  text-decoration-color: var(--color-link);
}

details summary::marker {
  content: "";
}

details[open] summary::marker {
  content: "▾ ";
  line-height: 0;
}

/* Site-specific overrides for shared transcription styles */
math {
  overflow-x: auto;
  overflow-y: hidden;
}

math[display="inline"] {
  margin-top: -0.5em;
  margin-bottom: -0.5em;
  overflow: visible;
}

math.stacked[display="inline"] {
  font-size: 1rem;
}

math[display="block"] {
  width: fit-content;
  margin: 0 0 2rem 0;
}

section > div > p:first-child > .series-number:first-child,
section > div > .de > p:first-child > .series-number:first-child,
section > div > .en > p:first-child > .series-number:first-child {
  padding: 0.2em 0.35em 0px 0.35em;
  border-radius: 4px;
  margin-right: 0.2em;
}

section > div > .en > p:first-child > .series-number:first-child {
  background-color: var(--color-margin);
}

footer {
  color: var(--color-margin);
  font-size: 0.8rem;
  line-height: 1rem;
  margin: 4rem 0 2rem 0;
}

footer a {
  color: var(--color-margin);
  text-decoration: underline;
  text-underline-offset: 0.1rem;
  text-decoration-thickness: 0.05rem;
}

footer a:hover {
  text-decoration: underline;
  text-underline-offset: 0.1rem;
  text-decoration-thickness: 0.1rem;
}

.status {
  margin-bottom: 6rem;
}

/* --- Lightbox --- */

.lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: #000;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.lightbox:target {
  display: flex;
}

.lightbox-backdrop {
  position: absolute;
  inset: 0;
}

.lightbox-zoom-toggle {
  display: none;
}

.lightbox-zoom {
  display: block;
  overflow: hidden;
  max-height: 100vh;
  max-width: calc(100vw - 6rem);
  position: relative;
  z-index: 1;
  cursor: zoom-in;
}

.lightbox-zoom img {
  display: block;
  max-height: 100vh;
  max-width: calc(100vw - 6rem);
  object-fit: contain;
}

.lightbox-zoom img[src$=".svg"] {
  height: 100vh;
  width: auto;
  max-width: calc(100vw - 6rem);
}

.lightbox-zoom-toggle:checked ~ .lightbox-zoom {
  overflow: auto;
  cursor: zoom-out;
}

.lightbox-zoom-toggle:checked ~ .lightbox-zoom img {
  max-height: none;
  max-width: none;
}

.lightbox-zoom-toggle:checked ~ .lightbox-zoom img[src$=".svg"] {
  height: auto;
  width: max(200vw, 2000px);
}

.lightbox[id^="viz-"] {
  background: #fff;
}

.lightbox[id^="viz-"] .lightbox-close {
  color: rgba(0, 0, 0, 0.3);
}

.lightbox[id^="viz-"] .lightbox-close:hover {
  color: #000;
}

.lightbox[id^="viz-"] .lightbox-prev,
.lightbox[id^="viz-"] .lightbox-next {
  color: rgba(0, 0, 0, 0.3);
}

.lightbox[id^="viz-"] .lightbox-prev:hover,
.lightbox[id^="viz-"] .lightbox-next:hover {
  color: #000;
}

.lightbox-close {
  position: absolute;
  top: 0.8rem;
  right: 1rem;
  color: rgba(255, 255, 255, 0.5);
  font-size: 2rem;
  text-decoration: none;
  z-index: 3;
  line-height: 1;
}

.lightbox-close:hover {
  color: #fff;
  text-decoration: none;
}

.lightbox-prev,
.lightbox-next {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 3rem;
  flex-shrink: 0;
  color: rgba(255, 255, 255, 0.5);
  font-size: 3rem;
  text-decoration: none;
  z-index: 2;
}

a.lightbox-prev,
a.lightbox-next {
  position: relative;
}

a.lightbox-prev::before,
a.lightbox-next::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
}

a.lightbox-prev::before {
  right: 100%;
  width: 100vw;
}

a.lightbox-next::before {
  left: 100%;
  width: 100vw;
}

.lightbox-prev:hover,
.lightbox-next:hover {
  color: #fff;
  text-decoration: none;
}

@media (max-aspect-ratio: 4/5) {
  .lightbox {
    flex-direction: column;
  }

  .lightbox-zoom {
    max-height: calc(100vh - 7rem);
    max-width: 100vw;
  }

  .lightbox-zoom img {
    max-height: calc(100vh - 7rem);
    max-width: 100vw;
  }

  .lightbox-prev,
  .lightbox-next {
    min-width: auto;
    min-height: 3rem;
    writing-mode: vertical-rl;
  }

  a.lightbox-prev::before,
  a.lightbox-next::before {
    writing-mode: horizontal-tb;
    top: auto;
    bottom: auto;
    left: 0;
    right: 0;
    width: auto;
  }

  a.lightbox-prev::before {
    bottom: 100%;
    height: 100vh;
  }

  a.lightbox-next::before {
    top: 100%;
    height: 100vh;
  }
}

/* --- Bilingual layout --- */

/* Two-column reading pages. Overview/index pages (works with parts) are NOT given
   this class — they are plain single-column pages (default body width, single-column
   footer), so none of the two-column rules below can leak onto them. */
body.bilingual {
  max-width: 70rem;
}

body.bilingual section > div,
body.bilingual .title-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 2rem;
}

body.bilingual .en h2,
.en-title {
  color: var(--color-translation);
}

body.bilingual .en,
body.bilingual .en a {
  color: var(--color-translation);
}

body.bilingual .en a:hover {
  color: var(--color-text);
}

.lang-switcher {
  margin: -6rem 0 6rem 0;
}

.lang-switcher .lang-active,
.home .view-switcher .current {
  color: var(--color-link);
  font-weight: 700;
}

.disclaimer {
  color: var(--color-link);
  font-weight: bold;
  font-style: italic;
  margin: 0 0 2rem 0;
}

.disclaimer strong {
  border-radius: 4px;
  padding: 0.3em;
  background-color: #000;
  color: #fff;
  font-style: normal;
}

body.bilingual .disclaimer,
body.bilingual .preamble,
body.bilingual footer {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 2rem;
}

/* Split disclaimer: explanatory note in the left/German column, the bold warnings
   in the right/English column (the warnings are about the translation). */
.disclaimer-note,
.disclaimer-warning {
  line-height: 2rem;
}

@media (width < 60rem) {
  body.bilingual {
    max-width: var(--max-width);
  }

  body.bilingual section > div,
  body.bilingual .title-row,
  body.bilingual .disclaimer,
  body.bilingual .preamble,
  body.bilingual footer {
    grid-template-columns: 1fr;
  }

  .lang-switcher {
    margin: -3rem 0 3rem 0;
  }
}

@media (width >= 60rem) and (width < 94rem) {
  body.bilingual section {
    display: block;
    margin-left: 0;
    margin-right: 0;
  }

  body.bilingual section > h3 {
    display: inline;
    color: var(--color-translation);
    font-style: italic;
    text-align: left;
  }

  body.bilingual .fac {
    display: inline;
    font-style: italic;
  }

  body.bilingual .fac > br {
    display: none;
  }

  body.bilingual .fac > a::after {
    content: " ";
  }

  body.bilingual section .fragment-link {
    opacity: 1;
  }
}

@media (width >= 94rem) {
  body.bilingual section {
    display: grid;
    grid-template-columns: var(--margin-col) var(--margin-col) 1fr;
    gap: 0 var(--margin-gap);
    margin-left: calc(-1 * var(--margin-offset));
    margin-right: 0;
  }

  body.bilingual section > h3 {
    grid-column: 1;
    color: var(--color-translation);
    text-align: right;
    align-self: start;
  }

  body.bilingual section > .fac {
    grid-column: 2;
    grid-row: 1;
    align-self: start;
  }

  body.bilingual section > div {
    grid-column: 3;
  }
}

/* Gallery pages (epub/pdf) */
.gallery p:has(.cover) {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

/* Tight gap under home section headings (and the note above the switcher); the
   2rem before the cover grid comes from the default paragraph margin. */
.home h2 {
  margin-bottom: 0.5rem;
}
.home .section-note:has(+ .view-switcher) {
  margin-bottom: 0.5rem;
}

@media (width < 60rem) {
  .gallery p:has(.cover) {
    grid-template-columns: repeat(2, 1fr);
  }
}

.gallery a.cover {
  display: block;
  position: relative;
  container-type: inline-size;
}

.gallery a.cover img {
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 3; /* covers are 1600×2400; reserve the box so lazy images don't shift layout */
  display: block;
  outline: 1px solid var(--color-margin);
}

.gallery a.cover:hover img {
  outline: 1px solid var(--color-link);
}

.gallery .cover-info {
  position: absolute;
  bottom: 2.5%;
  left: 4%;
  max-width: 82%;
  font-size: 6cqi;
  line-height: 1.6;
}

.gallery .cover-info > span {
  font-family: var(--font-heading);
  padding: 0.15em 0.3em;
  box-decoration-break: clone;
  color: var(--color-text);
  background: white;
}

/* Real-text copy of the document title, laid over the baked vector-path title but
   with transparent glyphs: invisible (so it can't ghost against the baked text),
   yet still real DOM text. Because it sits on top of the image, the browser's
   find-in-page / selection highlight reappears as a box over the title when matched.
   Positioned/sized to match the baked title (generator metrics in
   tools/covers/src/svg.rs: x=96, text-row top=896, font-size=132); the cover is a
   1600×2400 viewBox scaled to container width, so coordinates map to cqi as px/16. */
.gallery a.cover .cover-title {
  position: absolute;
  left: 6cqi; /* 96/16 */
  top: 56cqi; /* 896/16 */
  margin: 0;
  font-family: var(--font-heading); /* SangBleu Empire */
  font-weight: 700;
  font-size: 8.25cqi; /* 132/16 */
  line-height: 1;
  color: transparent;
  white-space: nowrap;
}

/* --- Search (inline live search on the home and browse pages) --- */

.search-input {
  font-family: var(--font-body);
  font-size: 1.125rem;
  width: 100%;
  box-sizing: border-box;
  padding: 0.4rem 0;
  margin: 0 0 0.5rem 0;
  color: var(--color-text);
  background: transparent;
  border: none;
  border-bottom: var(--line-thickness) solid var(--color-text);
}

.search-input:focus {
  outline: none;
  border-bottom-color: var(--color-link);
}

/* While the search box has text, hide the rest of the page below it (browse links, gallery,
   …). The results stay (they live inside .search) and the footer stays (it's outside <main>);
   clearing the text shows everything again. */
.search:has(.search-input:not(:placeholder-shown)) ~ * {
  display: none;
}

/* Drop the browser's native clear (×) button. */
.search-input::-webkit-search-cancel-button,
.search-input::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
}

/* Language toggle, mirroring the bilingual language switcher: the inactive language is a
   link, the active one is bold. */
.search-langs {
  margin: 0 0 2rem 0;
}

.search-langs button {
  font: inherit;
  margin: 0;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-link);
  text-decoration: underline;
  text-underline-offset: 0.4rem;
  text-decoration-thickness: 0.1rem;
  text-decoration-color: var(--color-margin);
}

.search-langs button:hover {
  text-underline-offset: 0.35rem;
  text-decoration-thickness: 0.2rem;
  text-decoration-color: var(--color-link);
}

.search-langs button.lang-active {
  font-weight: 700;
  text-decoration: none;
  cursor: default;
}

.search-status,
.search-nojs {
  color: var(--color-margin);
  font-style: italic;
}

/* Results reuse the reading layout: reference in the left margin (the only link), cropped
   text in the main column. */
.search-result {
  margin: 0 0 2rem 0;
}

.search-result > h3 {
  margin: 0;
}

.search-result > h3,
.search-result > h3 a,
.search-result > .fac,
.search-result > .fac a {
  color: var(--color-margin);
  font-weight: normal;
  font-style: italic;
  text-decoration: none;
}

.search-result > h3 a:hover,
.search-result > .fac a:hover {
  text-decoration: underline;
  text-underline-offset: 0.4rem;
  text-decoration-thickness: 0.1rem;
}

.search-result > div > p {
  margin: 0;
}

.search-result > div.en > p {
  color: var(--color-translation);
}

/* Matched terms, in the covers' amber. */
.search-result mark {
  background-color: #fbcba4;
  color: var(--color-text);
}

@media (width < 60rem) {
  .search-result > h3 {
    display: inline;
  }
  .search-result > h3::after {
    content: " ";
  }
  .search-result > .fac {
    display: inline;
  }
}

@media (width >= 60rem) {
  .search-result {
    display: grid;
    grid-template-columns: var(--margin-col) var(--margin-col) 1fr;
    gap: 0 var(--margin-gap);
    margin-left: calc(-1 * var(--margin-offset));
    margin-right: 0;
  }
  .search-result > h3 {
    grid-column: 1;
    text-align: right;
    align-self: baseline;
  }
  .search-result > .fac {
    grid-column: 2;
    grid-row: 1;
    align-self: baseline;
  }
  .search-result > div {
    grid-column: 3;
    align-self: baseline;
  }
}