/* Suzy Sheer — "figure eight" booklet. Shared styles for index + tour. */


:root {
  --paper: #ffffff;
  --ink: #000000;
  --grey: #555555;
  --hair: #000000;
  --violet: #694aba;
  --pink: #f1c6e0;
  --peri: #92b0f4;
  --font: 'Futura PT Book Oblique', 'Jost', 'Futura', 'Century Gothic', Helvetica, Arial, sans-serif;
  --gutter: 24px;
  --lane: 112px;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; background: var(--paper); color: var(--ink); }
html { -webkit-text-size-adjust: 100%; scrollbar-width: none; }
::-webkit-scrollbar { display: none; }
body {
  font-family: var(--font);
  font-style: italic;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.35;
  letter-spacing: -0.01em;
}
img { -webkit-user-drag: none; user-select: none; display: block; }
a { color: inherit; text-decoration: none; }
a:hover, a:focus-visible { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; letter-spacing: inherit; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

/* ---------- chrome: vertical nav top-left, wordmark top-right ---------- */
.mark { position: fixed; top: var(--gutter); left: var(--gutter); z-index: 30; display: flex; flex-direction: column; gap: 10px; }
.mark .bsl img { width: 34px; height: 34px; border: 0; }
.mark nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.mark nav a, .mark nav button { font-size: 17px; line-height: 1.3; background: var(--paper); padding: 0 4px 0 0; }
.mark nav button:hover, .mark nav button:focus-visible { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.mark nav [aria-current="page"] { color: var(--violet); }
.mark nav .on::after { content: ' \25CF'; color: var(--violet); font-size: 11px; vertical-align: 2px; }

.wordmark { position: fixed; top: calc(var(--gutter) - 8px); right: var(--gutter); z-index: 30; display: block; }
.wordmark img { width: 210px; height: auto; }
.wordmark:hover, .wordmark:focus-visible { text-decoration: none; }
.wordmark .tip { position: absolute; right: 0; top: 100%; font-size: 12px; color: var(--grey); white-space: nowrap; opacity: 0; transition: opacity .3s; }
.wordmark:hover .tip, .wordmark:focus-visible .tip { opacity: 1; }

@media (max-width: 700px) {
  :root { --gutter: 16px; --lane: 104px; }
  .mark .bsl img { width: 28px; height: 28px; }
  .mark nav a, .mark nav button { font-size: 15px; }
  .wordmark img { width: 128px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
}