/* Cinaedus site. Font sizes come from js/fit.js; everything else is here. */

:root {
  --bg: #f2eee3;
  --ink: #000000;
  --max-width: 1000px;
  --pad: clamp(16px, 6vw, 72px);
  --ls: 0.125;          /* letter spacing, em */
  --line-height: 1.01;
  --dot-scale: 0.95;
  --dot-shift: -0.13em; /* raise dots toward cap middle */
  --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: "Forum", "Times New Roman", 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; }

.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: inherit;
  text-decoration: none;
}

/* Visited links: black for now, same as unvisited (was grey #6f685e).
   CINAEDVS (the home link) is excluded: home is always visited. */
a:visited { color: #000000; } /* plain value: browsers restrict what :visited can use */
.row--name a:visited { color: inherit; }

/* The page you're on: its menu item stays underlined and never greys out. */
.row--current a[aria-current="page"]:visited { color: inherit; }

/* 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: clamp(18px, 2.2vw, 24px);
  line-height: 1.45;
}
.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: 2em 0 0.4em;
  font: inherit;
  font-size: 1.15em;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.page-body h2:first-of-type { margin-top: 0; }
.page-body a { background: linear-gradient(currentColor, currentColor) no-repeat 0 calc(100% - 0.1em) / 100% 1px; }

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