/* ---------------------------------------------------------------
   Minimal layout, soft greys. No animations, no transitions,
   no rules dividing the interface.
   Index on the left, content on the right; stacked on small screens.
   --------------------------------------------------------------- */


@font-face {
  font-family: "Palatino";
  src: url("font/Palatino\ Linotype.ttf") format('truetype');
}
@font-face {
  font-family: "Palatino Italic";
  src: url("font/Palatino\ Linotype\ Italic.ttf") format('truetype');
}
@font-face {
  font-family: "Palatino Bold";
  src: url("font/Palatino\ Linotype\ Bold.ttf") format('truetype');
}
@font-face {
  font-family: "Palatino Bold Italic";
  src: url("font/Palatino\ Linotype\ Bold\ Italic.ttf") format('truetype');
}

:root {
  --ink: #262626;
  --paper: #f7f7f5;
  --muted: #767674;
  --rule: #d8d8d4;
  --index-width: 15rem;
  --edge: 1rem;
  --nav-top: 0.8rem;   /* space above the top bar's text */
  --nav-height: 4.25rem;
  --font: "Palatino", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.2;
  font-weight: 400;
}

a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--ink);
}

a:hover,
a:focus-visible {
  background: var(--ink);
  color: var(--paper);
}

:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

.skip { position: absolute; left: -9999px; }
.skip:focus {
  left: 0.5rem;
  top: 0.5rem;
  z-index: 10;
  background: var(--paper);
  padding: 0.4rem 0.6rem;
}

/* --- top bar -------------------------------------------------- */

.navbar {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  height: var(--nav-height);
  padding: var(--nav-top) var(--edge) 0;
  background: var(--paper);
}

.navbar-title {
  font-size: 0.9375rem;
  font-weight: 700;
  border-bottom: 0;
  font-family: "Palatino Bold";
}

.navbar-title:hover,
.navbar-title:focus-visible { background: none; color: var(--ink); }

.navbar-links {
  display: flex;
  align-items: baseline;
  gap: 1.25rem;
}

.navbar-links a,
.navbar-button {
  font: inherit;
  font-size: 0.875rem;
  color: var(--ink);
  background: none;
  border: 0;
  border-bottom: 1px solid transparent;
  padding: 0;
  cursor: pointer;
}

.navbar-links a:hover,
.navbar-links a:focus-visible,
.navbar-button:hover,
.navbar-button:focus-visible {
  background: none;
  color: var(--ink);
  border-bottom-color: var(--ink);
}

.navbar-links a[aria-current="page"] { border-bottom-color: var(--ink); }

.navbar-button { display: none; }

/* --- contact lines -------------------------------------------- */

.navbar-left {
  display: flex;
  align-items: baseline;
  gap: 1.5rem;
  min-width: 0;
}

.contacts {
  display: flex;
  align-items: baseline;
  gap: 1.5rem;
  font-style: normal;
  font-size: 0.75rem;
  line-height: 1.35;
}

.contact-label { color: var(--muted); }

.contacts a {
  border-bottom: 1px solid transparent;
  white-space: nowrap;
}

.contacts a:hover,
.contacts a:focus-visible {
  background: none;
  color: var(--ink);
  border-bottom-color: var(--ink);
}

/* The bar holds them on a wide screen; the index does on a narrow one. */
.index-contacts { display: none; }

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

.layout {
  display: flex;
  align-items: flex-start;
}

.index {
  position: sticky;
  top: var(--nav-height);
  flex: none;
  width: var(--index-width);
  max-height: calc(100vh - var(--nav-height));
  overflow-y: auto;
  padding: 0.5rem var(--edge) 0.5rem;
  text-align: right;
  font-family: "Palatino Italic";
  line-height: 1.4;
}

.index-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.index-list li {
  margin-bottom: 0.1rem;
}

/* Inline, not inline-block: a title long enough to wrap is then several
   line boxes, so the underline follows every one of them instead of
   drawing under the last line only. */
.index-list a {
  display: inline;
  font-size: 0.9rem;
  line-height: 1.0;
  border-bottom: 0;
  text-decoration: none;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

.index-list a:hover,
.index-list a:focus-visible {
  background: none;
  color: var(--ink);
  text-decoration: underline;
}

.index-list a[aria-current="page"] { text-decoration: underline; }

/* --- content -------------------------------------------------- */

.content {
  flex: 1;
  min-width: 0;
  padding: 0.5rem 2rem 5rem;
}

.page { max-width: 36rem; }

.page-head { margin-bottom: 2rem; }

.page h1 {
  margin: 0;
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1.3;
  font-family: "Palatino Bold";
}

.page-meta {
  margin: 0.35rem 0 0;
  color: var(--muted);
  font-size: 0.8125rem;
}

.page h2,
.page h3 {
  margin: 2rem 0 0.5rem;
  font-size: 1rem;
  font-weight: 700;
  font-family: "Palatino Bold";
}

.page h3 { font-weight: 400; font-family: "Palatino Bold Italic"; }

.page p { margin: 0 0 1.25rem; }

.page ul,
.page ol { margin: 0 0 1.25rem; padding-left: 1.2rem; }

.page li { margin-bottom: 0.25rem; }

.page blockquote {
  margin: 0 0 1.25rem;
  padding-left: 1rem;
  border-left: 1px solid var(--rule);
  color: var(--muted);
}

.page hr {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: 2.5rem 0;
}

.page img { max-width: 100%; height: auto; display: block; }

.page pre {
  overflow-x: auto;
  padding: 0.75rem 0;
  font-size: 0.875rem;
}

.page code {
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 0.875em;
}

.page table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 1.25rem;
  font-size: 0.9375rem;
}

.page th,
.page td {
  border-bottom: 1px solid var(--rule);
  padding: 0.4rem 0.5rem 0.4rem 0;
  text-align: left;
  vertical-align: top;
}

.page em {
  font-family: "Palatino Italic";
}

.page strong {
  font-family: "Palatino Bold";
}


/* --- the letter hunt ------------------------------------------------ */

/* A letter waiting in a corner of the poem area. The corners are the
   margins of the content column, so a letter never lands on the text:
   the left ones sit in the left padding, the right ones past the 36rem
   text column, the bottom ones under it. Narrow windows have no such
   margins, so there the letter goes after the poem instead. */
.glyph {
  display: block;
  margin: 3rem 0 0 auto;
  font-family: "Palatino Bold";
  font-size: 0.8125rem;
  line-height: 1;
  color: var(--muted);
  background: none;
  border: 0;
  padding: 0.35rem;
  cursor: pointer;
}

.glyph:hover,
.glyph:focus-visible { color: var(--ink); }

/* Left-hand corners keep to the left when stacked under the poem. */
.glyph-tl,
.glyph-bl { margin-right: auto; margin-left: 0; }

@media (min-width: 58rem) {
  /* Tall enough that the four corners spread over the whole window, even
     under a short poem. The bar's height is subtracted so this adds no
     scrolling of its own. */
  .content {
    position: relative;
    min-height: calc(100vh - var(--nav-height));
  }

  .glyph {
    position: absolute;
    margin: 0;
  }

  .glyph-tl { top: 0.25rem; left: 0.25rem; }
  .glyph-tr { top: 0.25rem; right: 0.5rem; }
  .glyph-bl { bottom: 1.25rem; left: 0.25rem; }
  .glyph-br { bottom: 1.25rem; right: 0.5rem; }
}

/* The copy that travels to the index. */
.glyph-ghost {
  position: fixed;
  z-index: 9;
  margin: 0;
  padding: 0.35rem;
  font-family: "Palatino Italic";
  font-size: 0.8125rem;
  line-height: 1;
  color: var(--ink);
  pointer-events: none;
}

/* The blanks at the end of the index. */
.index-secrets { margin-top: 1.25rem; }

.secret {
  display: inline-block;
  font-family: "Palatino Italic";
  font-size: 0.875rem;
  line-height: 1.4;
  color: var(--muted);
  cursor: default;
  user-select: none;
}

.secret-slot { display: inline-block; min-width: 0.7em; text-align: center; }

.secret-slot.is-found { color: var(--ink); }

.secret-gap { display: inline-block; min-width: 0.4em; }

.secret-found { font-size: 0.9375rem; line-height: 1.4; }

/* --- small screens -------------------------------------------- */

@media (max-width: 52rem) {
  .navbar { gap: 1rem; }
  .navbar-links { gap: 1rem; }
  .navbar-button { display: inline; }

  /* No room beside the title here, so the lines move under the index. */
  .navbar-contacts { display: none; }

  .index-contacts {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.05rem;
    margin-top: 1.25rem;
  }

  .layout { display: block; }

  .index {
    position: static;
    width: auto;
    max-height: none;
    overflow: visible;
    padding: 0.25rem var(--edge) 1.25rem;
  }

  .js .index { display: none; }

  /* Open: cover the page below the bar, so the poem is out of sight
     entirely. The bar keeps a higher z-index, so its button stays
     reachable to close this again. */
  .js .index.open {
    display: block;
    position: fixed;
    top: var(--nav-height);
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 4;
    overflow-y: auto;
    background: var(--paper);
    padding: 1rem var(--edge) 2rem;
  }

  /* Nothing scrolls behind the overlay while it is open. */
  body.index-open { overflow: hidden; }

  .index-list li { margin-bottom: 0.1rem; }
  .index-list a { line-height: 1.5; }

  .content { padding: 0.75rem var(--edge) 4rem; }


  .page { max-width: none; }
}

@media print {
  .index, .navbar, .skip, .glyph { display: none; }
  .content { padding: 0; }
  a { border-bottom: 0; }
}