:root {
  --bg1: lch(from var(--accent-color) 15 3 calc(h + 170));
  --bg2: lch(from var(--accent-color) 20 3 calc(h + 170));
  --fg1: lch(from var(--accent-color) 80 5 calc(h - 60));
  --fg2: lch(from var(--accent-color) 60 5 calc(h - 60));
  --accent1: lch(from var(--accent-color) 10 100 h);
  --accent2: lch(from var(--accent-color) 76 35 h);
  --text: monaspace krypton, sans-serif;
  --display: monaspace krypton, monospace;
  --code: monaspace krypton, monospace;
}

:root {
  max-width: 70ch;
  margin: auto;
  padding-inline-start: 2em;
  background: var(--bg1);
  background-attachment: fixed;
  color: var(--fg1);
  font-family: var(--text);
}

body {
  margin: 0;
  padding: 0;
}

@view-transition {
  navigation: auto;
}

header:has(+ main),
main + footer {
  margin: 3em 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 900;
  line-height: 1.4;
  margin-block-end: 0;
}

h1 {
  font-stretch: expanded;
  font-size: 2em;
}

/* TODO: create class for "main header" */
body > header,
body > article > header {
  margin-inline-start: -2em;
}

header.h-card {
  margin-block-start: 0;
  h1 {
    font-family: var(--display);
  }

  .p-name.u-uid {
    color: currentColor;
    text-decoration: none;
  }

  /* .u-photo */
  /* .big.face {
    display: none;
  } */

  .p-note {
    font-family: var(--display);
    font-stretch: expanded;
    font-weight: 100;
    font-size: 2em;
    line-height: 1.4;
    margin-block-start: 0;
    color: var(--accent2);
  }

  .u-featured {
    display: block;

    /* full bleed */
    width: 100vw;
    margin-left: calc(50% - 50vw);

    max-width: none;
    max-height: 45vh;
    object-fit: cover;
    margin-block: 0;
  }

  &:has(.u-featured) .u-photo {
    font-size: 10rem;
    margin-block-start: -6rem;
    border: .5rem solid var(--bg1);
  }
}

.author-card {
  font-family: var(--display);
  font-stretch: expanded;
}

button,
.\<button\>,
input[type='button'],
input[type='submit'],
input[type='reset'],
::file-selector-button {
  font: inherit;
  font-size: 1rem;
  font-weight: bold;
  font-stretch: expanded;
  text-decoration: none;

  display: inline-block;
  padding: 0 0.4em;
  vertical-align: middle;
  min-width: auto;

  border: none;
  background: var(--accent1);
  color: var(--accent2);

  padding-inline: 1ch;
  border-radius: 0;

  &:hover,
  &:focus-visible {
    text-decoration: none;
    background-color: var(--accent2);
    color: var(--bg1);
  }

  &:active {
    background-color: var(--accent2);
    color: var(--bg2);
  }

  &[aria-pressed=true],
  &:has(:checked) {
    background-color: var(--accent2);
    color: var(--bg2);
  }
}

a,
.\<a\> {
  color: currentColor;
  text-decoration: 1px solid currentColor underline;

  &:hover,
  &:focus-visible {
    color: var(--accent2);
    text-decoration: 2px solid var(--accent2) underline;
  }
}

input:is(
  :not([type]),
  [type='text' i],
  [type='text' i],
  [type='date' i],
  [type='datetime-local' i],
  [type='email' i],
  [type='month' i],
  [type='number' i],
  [type='password' i],
  [type='search' i],
  [type='tel' i],
  [type='time' i],
  [type='url' i],
  [type='week' i]
),
textarea,
select {
  background-color: var(--fg1);
  color: var(--bg1);
  font-weight: 600;
  border-radius: 0;
  border: none;
}

textarea {
  min-height: 4em;
}

td,
th {
  border-block-end: 1px solid var(--bg2);
}

.\<small\> {
  font-family: var(--display);
  font-stretch: calc(100% / 0.8);
  font-weight: 300;
  font-size: 0.8em;
  color: var(--accent2);
}

.lede {
  font-family: var(--display);
  font-stretch: expanded;
  font-size: 2em;
  font-style: normal;
  color: var(--accent2);
}