/* Type */

:root {
  --font-body: "Hind", var(--pico-font-family-sans-serif);
  --font-heading: "Bebas Neue", var(--pico-font-family-sans-serif);
  --font-entry: var(--font-body);
  --pico-font-family: var(--font-body);
}

/* Short pages have no scrollbar and long ones do; reserve the gutter so the
   centred column does not step sideways between them. */

html {
  scrollbar-gutter: stable;
}

h1, h2, h3, h4, h5, h6 {
  --pico-font-family: var(--font-heading);
  --pico-font-weight: 400;
}

/* Header. The wordmark is an h1 on the home page and a strong elsewhere; as a
   block both measure the same, where an inline strong would sit in a taller
   line box and move the header. */

header nav :is(strong, h1) {
  display: block;
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 2.5rem;
  line-height: 1;
  margin: 0;
}

header nav :is(strong, h1) a,
header nav :is(strong, h1) a:hover,
header nav :is(strong, h1) a:focus {
  --pico-color: var(--pico-contrast);
  color: var(--pico-contrast);
}

.skip-link {
  position: absolute;
  top: 0;
  left: 0;
  padding: calc(var(--pico-spacing) / 2) var(--pico-spacing);
  background: var(--pico-background-color);
  transform: translateY(-120%);
}

.skip-link:focus {
  transform: none;
}

/* Footer */

footer address {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--pico-spacing) / 4) var(--pico-spacing);
}

/* Links cluster left, the location sits on the right edge */

footer address span {
  margin-left: auto;
}

/* On a phone the location takes its own line under the links, flush left,
   rather than wrapping to a lone right-aligned line. */

@media (max-width: 36rem) {
  footer address span {
    flex-basis: 100%;
    margin-left: 0;
  }
}

/* Entries */

main ul {
  padding-left: 0;
}

main li {
  list-style: none;
}

li hgroup > :is(h2, h3, h4) {
  --pico-font-family: var(--font-entry);
  --pico-font-weight: 700;
  --pico-font-size: 1.2rem;
}

li hgroup > :not(:first-child):last-child {
  font-size: 0.8rem;
  letter-spacing: 0.02em;
  line-height: 1.2;
}

.entries li {
  margin-bottom: calc(var(--pico-spacing) * 2);
}

.entries li hgroup {
  margin-bottom: calc(var(--pico-spacing) * 0.5);
}

.entries li > p {
  margin-bottom: 0;
}

/* A citation is the caption above the prose: smaller, tighter, muted. The
   title inside it is the entry's headline, so it reads in the text colour with
   a thin accent underline rather than as a coloured link. */

.citation {
  color: var(--pico-muted-color);
  font-size: 0.9rem;
  line-height: 1.45;
}

.citation strong {
  color: var(--pico-color);
}

.citation a {
  color: var(--pico-color);
  text-decoration-color: var(--pico-primary);
}

.citation a:hover {
  color: var(--pico-primary);
}

.entries li > p + p {
  margin-top: 0.5rem;
}

/* About. The photo sits on the right with the bios wrapping beside it, once
   the column is wide enough to leave a readable measure next to it. */

.headshot {
  max-width: 11rem;
}

@media (min-width: 40rem) {
  .headshot {
    float: right;
    /* The float lands at the h1's bottom margin (1.15rem) while the h2 after it
       starts 2.625rem down; the difference, plus the cap-height offset inside
       the heading's line box, puts the top of the photo level with the caps. */
    margin: 1.75rem 0 1rem 1.75rem;
  }
}

.headshot figcaption {
  font-size: 0.8rem;
  line-height: 1.3;
}

/* Page-foot revision line, set like an hgroup subtitle */

.revised {
  color: var(--pico-muted-color);
  font-size: 0.8rem;
  letter-spacing: 0.02em;
}