.nav-list {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  background: var(--color-gray);
  list-style: none;

  [popover] {
    /* Override default browser style */
    border: 1px solid var(--border-color);
    border-radius: 3px;
    margin: 0;
    padding: 0;
  }
  
  /* Top level */
  ul {
    position-area: block-end span-inline-end;
    margin: 0;
    min-width: anchor-size();
    width: max-content;

    &:popover-open {
      display: grid;
    }

    li {
      display: flex;
      flex-direction: row;
      align-items: start;
    }
  }

  /*  Second-level  */
  ul ul {
    position-area: span-block-end inline-end;
    position-try: block-end span-inline-end;
  }

  button:has(+ :popover-open)::after {
    --rotate-btn-icon: 90deg;
  }
}

.nav-list-item button::after {
  background: linear-gradient(
    var(--gradient-start) 20%,
    var(--gradient-end) 80%
  );
  background-clip: text;
  color: transparent;
  content: "▶";
  display: inline-block;
  font-size: var(--text-small);
  rotate: var(--rotate-btn-icon, 0);
  transition: rotate 0.3s ease-in-out;
}

.nav-list-item button,
.nav-list-item a {
  border: thin solid transparent;
  gap: var(--quarter-gap);
  padding: 0.5em 0.75em;
  inline-size: 100%;

  &:hover,
  &:focus {
    --link-focus-color: var(--text-color);
    background: var(--accent-color);
  }
}

/* presentational style*/

.page {
  display: grid;
  min-height: 100vh;
  grid: min-content min-content 1fr min-content / 1fr;
}

/*  Header  */
.page header {
  background: var(--color-primary);
  text-align: center;
}

.tagline {
  font-family: var(--serif-font);
  font-size: var(--text-normal);
  font-style: italic;
}

main {
  padding: 1em 5% 5em;
  border-inline: 2px solid var(--color-gray);
}

footer {
  background: var(--color-primary);
  font-family: var(--serif-font);
  font-size: var(--text-small);
  font-style: italic;
  padding: 1em;
}

.nav-list {
  margin: 0;
  padding: 0;
}

a[aria-current],
li:has(a[aria-current]) > button {
  --link-focus-color: var(--highlight-color);

  background: var(--active);
}

@media (forced-colors: active) {
  .disclosure-navigation button svg {
    fill: currentcolor;
    stroke: currentcolor;
  }
}

[data-button] {
  align-items: center;
  background: var(--btn-bg);
  border: thin solid var(--btn-border, transparent);
  border-radius: var(--btn-radius);
  color: var(--btn-text, var(--bg));
  cursor: pointer;
  display: inline-flex;
  font-size: inherit;
  padding: var(--half-shim) var(--btn-padding, var(--double-gutter));
}

@layer reset, base;

:root {
  color-scheme: light dark;
}

@layer base {
  html {
    --text-small: clamp(0.938rem, 0.824rem + 0.568cqi, 1.25rem);
    --text-normal: clamp(1.25rem, 1.023rem + 1.136cqi, 1.875rem);
    --text-large: clamp(1.35rem, 0.818rem + 2.659cqi, 2.813rem);
    --text-xlarge: clamp(1.7rem, 0.784rem + 4.58cqi, 4.219rem);
    --gap: clamp(2cqi, 0.5lh, 5cqi);
    --quarter-gap: calc(var(--gap) / 4);
    --double-gap: calc(var(--gap) * 2);
    --accent-color: light-dark(oklch(88.631% 0.02763 18), oklch(45.2% 0.054 302));
    --active: light-dark(oklch(from var(--accent-color) 90% c h), oklch(45.1% 0.111 272));
    --text-color: light-dark(oklch(0% 0 none), oklch(100% 0 none));
    --highlight-color: light-dark(oklch(63.7% 0.132 340), oklch(60.6% 0.132 340));
    --border-color: light-dark(oklch(62.5% 0 none), oklch(87% 0 none));
    --gradient-start: light-dark(oklch(16.6% 0.19468 280.8), oklch(75.5% 0.19468 280.8));
    --gradient-end: light-dark(oklch(63.7% 0.132 340), oklch(86.1% 0.132 340));

    --color-primary: light-dark(oklch(88.631% 0.02763 225), oklch(48.2% 0.085 269));
    --color-gray: light-dark(#eee, oklch(52.9% 0 none));
    --color-gray-dark: #ccc;
    --color-background: #fff;
    --color-foreground: #000;
    --sans-serif-font: Seravek, "Gill Sans Nova", Ubuntu, Calibri, "DejaVu Sans",
      source-sans-pro, sans-serif;
    --serif-font:  Charter, 'Bitstream Charter', 'Sitka Text', Cambria, serif;
  }

  body {
    background: var(--background);
    color: var(--text-color);
    font-size: var(--text-normal);
    font-family: var(--sans-serif-font);
    margin: 0;
  }

  :focus {
    outline: 1px solid var(--color-secondary);
  }

  :any-link {
    color: var(--link-text-color, currentColor);
    text-decoration: underline;
    text-underline-offset: 0.15em;
    text-decoration-color: var(--link-focus-color, var(--highlight-color));
    text-decoration-thickness: var(--underline-thickness, .1em);
    transition: text-decoration-thickness 0.3s 
ease-in, text-decoration-color 0.3s ease-in;

    &:hover,
    &:focus {
      --link-focus-color: var(--color-background);
      --underline-thickness: .18em;
    }
  }
}

@layer reset {
  * {
    box-sizing: border-box;
  }

  html {
    block-size: 100%;
  }

  body {
    margin: unset;
    min-block-size: 100vh;
  }

  picture {
    display: contents;
  }

  img {
    display: block;
  }

  img,
  svg {
    max-inline-size: 100%;
  }

  input,
  button,
  textarea,
  select {
    font: inherit;
  }
}