/* ==========================================================================
   The navigation layer.

   Every page in work/ declares its own tokens and its own reading column.
   This file adds only the apparatus around that column, so nothing here
   declares a :root. Colours read the host page's tokens and fall back to the
   values the essays already use.

   THREE WAYS OUT. The top bar carries the name and the three contact links.
   The left rail, on wide screens, carries the sections of the piece being
   read and the list of every piece. The bottom bar carries the two
   neighbours and the way home.

   THE RAIL IS DISCOVERED, NOT DISPLAYED. Collapsed it is a column of short
   rules, one per section, with the section you are in drawn long and dark.
   That is enough to read as position without competing with the page, and it
   is narrow enough to clear the widest figure. Hovering it, or tabbing into
   it, opens the full panel on its own paper, over whatever is beneath.

   VOICE. Apparatus, not content: the same face as the prose, at the size and
   tracking the essays already use for an eyebrow, in --ink-faint until
   touched.
   ========================================================================== */

/* --- shared apparatus type ------------------------------------------------ */

.sitenav,
.siderail__tab,
.siderail__year,
.sitefoot__kicker,
.sitefoot__meta,
.sitefoot__bar {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  line-height: 1.4;
  text-transform: uppercase;
  font-variant-numeric: lining-nums;
}

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

.sitenav {
  display: flex;
  max-width: var(--measure, 38rem);
  margin-inline: auto;
  padding: 1.9rem 0 0.85rem;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 1.5rem;
  border-bottom: 1px solid var(--hairline, #deded8);
}

.sitenav__mark {
  flex: 0 0 auto;
  color: var(--ink, #000);
  letter-spacing: 0.1em;
  text-decoration: none;
  transition: color 160ms cubic-bezier(0.4, 0, 0.2, 1);
}

.sitenav__mark:hover,
.sitenav__mark:focus-visible {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
}

.sitenav__mark:focus-visible {
  outline: 2px solid var(--ink, #000);
  outline-offset: 3px;
}

/* The same three marks the rest of the site uses, at the same 18px. */
.sitenav__links {
  display: flex;
  align-items: center;
  gap: 0.95rem;
}

.sitenav__links a {
  display: grid;
  width: 1.5rem;
  height: 1.5rem;
  place-items: center;
  color: var(--ink-faint, #6f6f6f);
  transition: color 160ms cubic-bezier(0.4, 0, 0.2, 1);
}

.sitenav__links a:hover,
.sitenav__links a:focus-visible { color: var(--ink, #000); }

.sitenav__links a:focus-visible {
  outline: 2px solid var(--ink, #000);
  outline-offset: 2px;
}

.sitenav__links svg {
  display: block;
  width: 18px;
  height: 18px;
}

/* --- left rail ------------------------------------------------------------ */

/* Below this width the top and bottom bars carry every move the rail offers,
   so the rail stays out of the way entirely. */
.siderail { display: none; }

@media (min-width: 76rem) {
  .siderail {
    position: fixed;
    top: 7rem;
    left: 0;
    z-index: 5;
    display: block;
    width: 17.5rem;
    /* The container is inert. Only the ticks and the open panel take the
       pointer, so the empty half of this box never eats a click meant for a
       figure underneath. */
    pointer-events: none;
  }
}

/* Collapsed: one rule per item, the current one long and dark. */
.siderail__ticks {
  display: flex;
  width: 3.75rem;
  padding: 0.35rem 0 0.35rem 1.6rem;
  flex-direction: column;
  gap: 0.45rem;
  pointer-events: auto;
  transition: opacity 160ms cubic-bezier(0.4, 0, 0.2, 1);
}

.siderail__ticks i {
  display: block;
  width: 0.85rem;
  height: 1px;
  background: var(--ink-faint, #6f6f6f);
  opacity: 0.5;
  transition: width 160ms cubic-bezier(0.4, 0, 0.2, 1),
              opacity 160ms cubic-bezier(0.4, 0, 0.2, 1);
}

.siderail__ticks i.is-current {
  width: 1.6rem;
  background: var(--ink, #000);
  opacity: 1;
}

/* Open: its own paper, so it reads cleanly over a figure. */
.siderail__panel {
  position: absolute;
  top: -1.15rem;
  left: 0;
  width: 17.5rem;
  padding: 1.15rem 1.35rem 1.35rem 1.6rem;
  /* No frame and no shadow. The panel is the page's own paper brought
     forward, not a card laid on top of it. The background is opaque, so the
     text stays legible on the rare occasion it opens over a wide figure;
     it simply has no edge of its own. */
  background: var(--paper, #fff);
  opacity: 0;
  transform: translateX(-0.45rem);
  pointer-events: none;
  transition: opacity 160ms cubic-bezier(0.4, 0, 0.2, 1),
              transform 160ms cubic-bezier(0.4, 0, 0.2, 1);
}

.siderail:hover .siderail__panel,
.siderail:focus-within .siderail__panel {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.siderail:hover .siderail__ticks,
.siderail:focus-within .siderail__ticks { opacity: 0; }

/* --- rail tabs ------------------------------------------------------------ */

.siderail__tabs {
  display: flex;
  margin-bottom: 0.95rem;
  padding-bottom: 0.55rem;
  gap: 1.1rem;
  border-bottom: 1px solid var(--hairline, #deded8);
}

.siderail__tab {
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink-faint, #6f6f6f);
  cursor: pointer;
  font-family: inherit;
  transition: color 160ms cubic-bezier(0.4, 0, 0.2, 1);
}

.siderail__tab:hover { color: var(--ink, #000); }

.siderail__tab:focus-visible {
  outline: 2px solid var(--ink, #000);
  outline-offset: 3px;
}

.siderail__tab[aria-selected='true'] {
  color: var(--ink, #000);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
}

/* Switching tabs replaced the panel's contents in one frame, inside a panel
   that had just opened with motion. A keyframe rather than a transition,
   honestly: the trigger is an attribute flip on an element returning from
   display:none, so a transition has no start value to interpolate from. At
   120ms a rapid re-click restarting it is imperceptible. The tick column
   rebuilds in the same frame but sits at opacity 0 whenever the panel is
   open, so it needs nothing. */
.siderail__panel [role='tabpanel']:not([hidden]) {
  animation: siderail-tab 120ms cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes siderail-tab {
  from { opacity: 0; }
}

.siderail__year {
  margin: 1.25rem 0 0.5rem 0.95rem;
  color: var(--ink-faint, #6f6f6f);
  font-size: 0.7rem;
  letter-spacing: 0.15em;
}

.siderail__year:first-child { margin-top: 0; }

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

.siderail__list li {
  position: relative;
  margin-bottom: 0.58rem;
  padding-left: 0.95rem;
}

.siderail__list li:last-child { margin-bottom: 0; }

.siderail__list a,
.siderail__list span {
  display: block;
  color: var(--ink-faint, #6f6f6f);
  font-size: 0.92rem;
  line-height: 1.32;
  text-decoration: none;
  transition: color 160ms cubic-bezier(0.4, 0, 0.2, 1);
}

.siderail__list a:hover,
.siderail__list a:focus-visible {
  color: var(--ink, #000);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.16em;
}

.siderail__list a:focus-visible {
  outline: 2px solid var(--ink, #000);
  outline-offset: 3px;
}

/* The section you are in, and the piece you are reading. Both keep their
   place in the list and take the marker. */
.siderail__list .is-current,
.siderail__list [aria-current='page'] { color: var(--ink, #000); }

.siderail__list .is-current::before,
.siderail__list [aria-current='page']::before {
  position: absolute;
  left: 0;
  color: var(--ink, #000);
  content: '\2014';
}

/* --- dateline ------------------------------------------------------------- */

/* Sits under the title, in the masthead, carrying the date the piece was
   written and the two facts a reader wants before committing to it. */
.sitedate {
  display: flex;
  flex-wrap: wrap;
  margin: 1.4rem 0 0;
  align-items: baseline;
  gap: 0.2rem 0.55rem;
  color: var(--ink-faint, #6f6f6f);
  font-size: 0.95rem;
  font-variant-numeric: oldstyle-num;
  line-height: 1.5;
}

.sitedate time { color: var(--ink-quiet, #4e4e4e); }

.sitedate .sep { opacity: 0.55; }

/* --- bottom bar ----------------------------------------------------------- */

.sitefoot {
  max-width: var(--measure, 38rem);
  margin: 6rem auto 0;
  padding-top: 1.4rem;
  border-top: 1px solid var(--hairline, #deded8);
}

.sitefoot__kicker {
  margin: 0 0 1.1rem;
  color: var(--ink-faint, #6f6f6f);
}

/* Two neighbours from the index. Each is labelled with its date rather than
   with a direction, because the 2025 pieces share a month and "older" would
   be a claim the dates do not support. */
.sitefoot__pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem 2.5rem;
}

.sitefoot__link {
  display: block;
  padding: 0.1rem 0.6rem 0.7rem;
  margin: -0.1rem -0.6rem 0;
  color: inherit;
  text-decoration: none;
  transition: background 160ms cubic-bezier(0.4, 0, 0.2, 1);
}

.sitefoot__link:hover,
.sitefoot__link:focus-visible { background: var(--surface, #f5f5f2); }

/* Background only, no transform: these are full-measure rows of prose, and
   scaling a paragraph under the cursor reads as a glitch. Instant on press,
   eased back out on the transition above. */
.sitefoot__link:active {
  background: #ecece7;
  transition-duration: 0s;
}

.sitefoot__link:focus-visible {
  outline: 2px solid var(--ink, #000);
  outline-offset: -2px;
}

.sitefoot__link--next {
  grid-column: 2;
  text-align: right;
}

.sitefoot__meta {
  display: block;
  margin-bottom: 0.45rem;
  color: var(--ink-faint, #6f6f6f);
}

.sitefoot__q {
  display: block;
  color: var(--ink, #000);
  font-size: 1.1rem;
  font-style: italic;
  line-height: 1.34;
}

.sitefoot__t {
  display: block;
  margin-top: 0.3rem;
  color: var(--ink-quiet, #4e4e4e);
  font-size: 0.98rem;
  line-height: 1.4;
}

.sitefoot__link:hover .sitefoot__q,
.sitefoot__link:focus-visible .sitefoot__q {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.16em;
}

/* With no pair above it, the bar is the first thing under the footer rule and
   does not need a second one of its own. */
.sitefoot__bar:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.sitefoot__bar {
  display: flex;
  flex-wrap: wrap;
  margin-top: 2.6rem;
  padding-top: 1.1rem;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem 1.5rem;
  border-top: 1px solid var(--hairline, #deded8);
}

.sitefoot__bar a {
  color: var(--ink-faint, #6f6f6f);
  text-decoration: none;
  transition: color 160ms cubic-bezier(0.4, 0, 0.2, 1);
}

.sitefoot__bar a:hover,
.sitefoot__bar a:focus-visible {
  color: var(--ink, #000);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
}

.sitefoot__bar a:focus-visible {
  outline: 2px solid var(--ink, #000);
  outline-offset: 3px;
}

.sitefoot__set {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.35rem;
}

.sitefoot__colophon {
  margin: 1.3rem 0 0;
  color: var(--ink-faint, #6f6f6f);
  font-size: 0.95rem;
  font-variant-numeric: oldstyle-num;
  line-height: 1.55;
}

/* --- narrow --------------------------------------------------------------- */

@media (max-width: 46rem) {
  .sitenav { padding-top: 1.35rem; }

  .sitenav__links { gap: 0.7rem; }

  /* Stacked, the two neighbours keep their reading order and both align
     left. A right-aligned block under a left-aligned one reads as a mistake
     once they are in one column. */
  .sitefoot__pair { grid-template-columns: 1fr; gap: 1.6rem; }

  .sitefoot__link--next { grid-column: 1; text-align: left; }

  .sitefoot__bar { margin-top: 2rem; }
}

@media (prefers-reduced-motion: reduce) {
  .sitenav__mark,
  .sitenav__links a,
  .siderail__ticks,
  .siderail__ticks i,
  .siderail__panel,
  .siderail__tab,
  .siderail__list a,
  .sitefoot__link,
  .sitefoot__bar a { transition-duration: 0.01ms; }

  .siderail__panel [role='tabpanel']:not([hidden]) { animation-duration: 0.01ms; }
}

@media print {
  .sitenav,
  .siderail,
  .sitefoot__pair,
  .sitefoot__bar { display: none; }
}