/* Cinaedus site. Font sizes come from js/fit.js; everything else is here.
   alt-visual branch: the menu in Craigslist's listing-title font; CINAEDVS
   and the tagline black, menu items in Craigslist's link colours. */

:root {
  --bg: #ffffff;
  --ink: #222222;
  --link: #0000ee;    /* classic browser blue (Craigslist link colour) */
  --visited: #551a8b; /* Craigslist visited / selected purple */
  --menu-font: "Open Sans", Helvetica, Arial, sans-serif; /* Craigslist listing titles */
  --panel: #eeeeee;   /* grey panels */
  --divider: #cccccc; /* 1px rules */
  --max-width: 1000px;
  --pad: clamp(16px, 6vw, 72px);
  --ls: 0.125;          /* letter spacing, em */
  --line-height: 1.01;
  --dot-scale: 0.95;
  --dot-shift: 0em;     /* Times New Roman centres its dot on the capitals */
  --dot-space: 0.3em;   /* extra space either side of each dot */
}

/* Per-line letter spacing (em). More spacing = smaller letters, since each
   line still fills the full width. Lines not listed use --ls above. */
.row--name .line { --ls: 0.1; }
.row--tagline .line { --ls: 0.2; }
.row--contact .line { --ls: 0.2; }
.row--capabilities .line { --ls: 0.2; }
.row--byline .line { --ls: 0.3; }

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

html, body { margin: 0; }

body {
  min-height: 100svh;
  padding: var(--pad);
  background: var(--bg);
  color: var(--ink);
  font-family: "Times New Roman", Times, serif;
  overflow-x: clip;
}

.inscription {
  max-width: var(--max-width);
  margin-inline: auto;
}

/* Hidden only until the first fit, so the unfitted text never flashes. */
.js .inscription:not(.is-fit) { visibility: hidden; }

.row {
  display: flex;
  justify-content: center;
  margin: 0;
  font: inherit;
}

/* Per-line space above, as % of the inscription width (CSS resolves
   vertical % margins against width). Negative pulls a line up. */
.row.row--tagline { margin-top: -1.3%; }
.row.row--business { margin-top: -0.9%; }
.row.row--capabilities { margin-top: -1%; }

nav { display: block; }

/* Tagline: black until every other menu link has been used (visits.js
   adds .is-complete), then the visited purple. */
.row--tagline { color: #000000; }
.row--tagline.is-complete { color: #551a8b; }

/* Visit numeral (count.js): the replaced letters stay in place, invisible,
   and the numeral is laid over the space they occupied. */
.numeral-slot { position: relative; }
.numeral-ghost { visibility: hidden; }
.numeral { position: absolute; white-space: nowrap; transform-origin: left; }

/* "Page views: N" at the pointer over INNOVATION / the numeral (count.js). */
.views-zone { cursor: default; }
.views-tip {
  position: fixed;
  z-index: 30;
  padding: 2px 6px;
  font: 13px/1.3 var(--menu-font);
  letter-spacing: 0;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--divider);
  white-space: nowrap;
  visibility: hidden;
  pointer-events: none;
}
.views-tip.is-visible { visibility: visible; }

/* The whole menu (and the pinned copy): Craigslist's listing-title font. */
.row { font-family: var(--menu-font); }

.line {
  display: block;
  flex: none;
  white-space: nowrap;
  letter-spacing: calc(var(--ls) * 1em);
  line-height: var(--line-height);
  font-size: clamp(16px, 6vw, 64px); /* no-JS fallback; fit.js overrides */
  font-kerning: normal;
  font-synthesis: none;
}

/* Below the minimum size a line wraps at its <wbr> points instead of shrinking. */
.line.is-wrapped { flex: 1 1 auto; white-space: normal; text-align: center; }
.line.is-wrapped a { white-space: nowrap; }
html:not(.js) .line { flex: 1 1 auto; white-space: normal; text-align: center; }

.dot {
  position: relative;
  top: var(--dot-shift);
  font-size: calc(var(--dot-scale) * 1em);
  line-height: 0;
  margin-inline: var(--dot-space);
}

a {
  color: var(--link);
  text-decoration: none;
}

/* Blue until visited, then Craigslist purple. The selected menu item (the
   page you're on) is purple too. Plain values: :visited is picky about var(). */
a:visited { color: #551a8b; }
a[aria-current="page"],
a[aria-current="page"]:visited { color: var(--visited); }
/* Purple from our own record too (visits.js adds .is-visited), so the
   colours always agree with what counts toward the red tagline. */
a.is-visited { color: #551a8b; }

/* CINAEDVS: blue on arrival, even though the homepage is "visited"; purple
   only once it's been clicked from another page (visits.js). */
.row--name a,
.row--name a:visited,
.row--name a[aria-current="page"],
.row--name a[aria-current="page"]:visited { color: #0000ee; }
.row--name a.is-visited,
.row--name a.is-visited:visited { color: #551a8b; }

/* Inner pages: once the current menu line reaches the top, sticky.js shows
   a copy pinned there while the rest of the menu scrolls away. */
.stuck-bar {
  position: fixed;
  inset: 0 0 auto;
  z-index: 10;
  padding-inline: var(--pad);
  overflow: hidden; /* sticky.js sets the height so the bar ends at the underline */
  background: var(--bg);
  color: var(--ink);
  visibility: hidden;
}
.is-stuck .stuck-bar { visibility: visible; }
.stuck-bar-inner { max-width: var(--max-width); margin-inline: auto; }

/* One unbroken underline across numeral, dots and words; trimmed by the
   trailing letter spacing so it ends at the last letter. */
a:hover,
a:focus-visible,
.row--current a[aria-current="page"] {
  background: linear-gradient(currentColor, currentColor) no-repeat
    0 calc(var(--base, calc(var(--ascent, 0.8) * 1em)) + var(--gap, 0.12em)) / calc(100% - var(--ls) * 1em) var(--rule, max(1px, 0.035em));
  /* fit.js sets these from CAPABILITIES so every underline matches it:
     --rule = thickness, --gap = distance below the baseline,
     --base = this link's measured baseline (fallback: --ascent font metric). */
}

/* Room below each menu link for its underline, however small the line. */
.inscription a,
.stuck-bar a { padding-bottom: calc(var(--gap, 0.12em) + var(--rule, 2px)); }

a:focus-visible {
  outline: max(1px, 0.025em) solid currentColor;
  outline-offset: 0.1em;
}

/* Inner pages: ordinary reading text under the inscription header. */
.page-body {
  /* Exactly the menu's width (fit.js may narrow it to fit the window). */
  max-width: var(--menu-width, var(--max-width));
  margin: 0 auto;
  font-size: 16px;
  line-height: normal;
}
.page-body > * { max-width: 34em; }
.page-body img,
.page-body video,
.page-body iframe { max-width: 100%; height: auto; } /* never wider than the menu */
/* Space under the menu only when there's content (the homepage has none,
   so it adds nothing that could cause a scroll). */
.page-body:has(> :not(.sr)) { margin-top: 2.5em; }
.page-body p { margin: 0 0 1em; }
.page-body h2 {
  margin: 1.5em 0 0.5em;
  padding: 2px 6px;
  font: inherit;
  font-weight: bold;
  background: var(--panel);
  border: 1px solid var(--divider);
}
.page-body h2:first-of-type { margin-top: 0; }
/* Body links: plain, underlined on hover only. */
.page-body a:hover,
.page-body a:focus-visible { background: none; text-decoration: underline; }

.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  user-select: none;
}