@layer reset, tokens, layout, prose, parts;

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

  body {
    margin: 0;
  }

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

@layer tokens {
  :root {
    --trk-surface: #fbfaf7;
    --trk-card: #ffffff;
    --trk-edge: #e0ddd4;
    --trk-text: #26241f;
    --trk-quiet: #6f6b60;
    --trk-mark: #4a6b52;
    --trk-mark-soft: #eaf1ea;
    --trk-warm: #9a6a3c;
    --trk-flow: 1.05rem;
    --trk-reading: 40rem;
    --trk-serif: "Charter", "Georgia", "Times New Roman", serif;
    --trk-sans: "Segoe UI", "Noto Sans", Arial, sans-serif;
  }
}

@layer layout {
  body {
    background: var(--trk-surface);
    color: var(--trk-text);
    font-family: var(--trk-serif);
    font-size: 1.02rem;
    line-height: 1.68;
  }

  .trk-wrap {
    margin-inline: auto;
    max-inline-size: var(--trk-reading);
    padding-block: 2rem 4.5rem;
    padding-inline: 1.15rem;
  }

  .trk-top {
    border-block-end: 1px solid var(--trk-edge);
    padding-block-end: 0.9rem;
  }

  .trk-top__name {
    font-size: 1.42rem;
    letter-spacing: -0.01em;
    margin-block: 0 0.15rem;
  }

  .trk-top__line {
    color: var(--trk-quiet);
    font-family: var(--trk-sans);
    font-size: 0.83rem;
    margin-block: 0 0.85rem;
  }

  .trk-menu {
    display: flex;
    flex-wrap: wrap;
    font-family: var(--trk-sans);
    font-size: 0.86rem;
    gap: 0.2rem 1.05rem;
    list-style: none;
    margin-block: 0;
    padding-inline-start: 0;
  }

  .trk-menu a {
    color: var(--trk-mark);
    text-decoration: none;
  }

  .trk-menu a:hover {
    text-decoration: underline;
  }

  .trk-menu [aria-current="page"] {
    color: var(--trk-text);
    font-weight: 600;
  }
}

@layer prose {
  h1 {
    font-size: 1.62rem;
    line-height: 1.28;
    margin-block: 2rem 0.3rem;
  }

  h2 {
    font-size: 1.16rem;
    margin-block: 1.9rem 0.35rem;
  }

  h3 {
    font-size: 1rem;
    margin-block: 1.4rem 0.25rem;
  }

  p {
    margin-block: 0 var(--trk-flow);
  }

  a {
    color: var(--trk-mark);
  }

  ul,
  ol {
    margin-block: 0 var(--trk-flow);
    padding-inline-start: 1.35rem;
  }

  li {
    margin-block-end: 0.3rem;
  }
}

@layer parts {
  .trk-stamp {
    color: var(--trk-quiet);
    font-family: var(--trk-sans);
    font-size: 0.8rem;
    letter-spacing: 0.03em;
  }

  .trk-entry {
    border-block-end: 1px solid var(--trk-edge);
    margin-block-end: 1.6rem;
    padding-block-end: 1.4rem;
  }

  .trk-entry:last-of-type {
    border-block-end: 0;
  }

  .trk-entry__title {
    font-size: 1.2rem;
    margin-block: 0.25rem 0.3rem;
  }

  .trk-entry__title a {
    text-decoration: none;
  }

  .trk-entry__title a:hover {
    text-decoration: underline;
  }

  .trk-card {
    background: var(--trk-card);
    border: 1px solid var(--trk-edge);
    border-radius: 3px;
    margin-block: 1.6rem;
    padding-block: 0.9rem;
    padding-inline: 1.1rem;
  }

  .trk-card__label {
    color: var(--trk-warm);
    display: block;
    font-family: var(--trk-sans);
    font-size: 0.72rem;
    letter-spacing: 0.09em;
    margin-block-end: 0.35rem;
    text-transform: uppercase;
  }

  .trk-tally {
    border-collapse: collapse;
    font-family: var(--trk-sans);
    font-size: 0.87rem;
    inline-size: 100%;
    margin-block: 1.4rem;
  }

  .trk-tally th {
    border-block-end: 1px solid var(--trk-mark);
    padding-block: 0.35rem;
    padding-inline-end: 0.7rem;
    text-align: start;
  }

  .trk-tally td {
    border-block-end: 1px solid var(--trk-edge);
    padding-block: 0.35rem;
    padding-inline-end: 0.7rem;
  }

  .trk-tally tr:hover td {
    background: var(--trk-mark-soft);
  }

  .trk-aside {
    border-inline-start: 3px solid var(--trk-mark);
    color: var(--trk-quiet);
    font-size: 0.95rem;
    margin-block: 1.5rem;
    padding-inline-start: 0.95rem;
  }

  .trk-foot {
    border-block-start: 1px solid var(--trk-edge);
    color: var(--trk-quiet);
    font-family: var(--trk-sans);
    font-size: 0.82rem;
    margin-block-start: 3rem;
    padding-block-start: 0.9rem;
  }
}