@charset "utf-8";
/* The Punctuation Guide - Base Styles (2026) */
/* Scope: global document defaults, element resets, and accessibility primitives. */

/* ==========================================================================
   Screen: Global Base
   ========================================================================== */

@media screen {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  html {
    scroll-behavior: smooth;
  }

  body {
    margin: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow-x: hidden;
  }

  main {
    -webkit-box-flex: 1;
    -ms-flex: 1 0 auto;
    flex: 1 0 auto;
    margin: 1%;
  }

  h1,
  h2,
  h3,
  h4,
  h5 {
    color: var(--color-text-dark);
  }

  .error-page h1 {
    text-align: center;
  }

  /* Baseline list reset; content-area lists are restored below. */
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  #main-content ul {
    list-style: disc;
    padding-left: 2em;
    margin: 1em 0;
  }

  #main-content ul li { margin-bottom: 0.75em; }

  /* titles-of-works page has custom list presentation. */
  #titles-container ul {
    list-style: none;
    padding-left: 0;
  }

  a:link,
  a:visited,
  a:hover,
  a:active {
    text-decoration: none;
    color: black;
    outline: none;
  }

  /* Shared link treatment for content, front-page cards, and footer links. */
  #main-content a:link,
  nav#front-page-nav a:link,
  footer a:link,
  #main-content a:visited,
  nav#front-page-nav a:visited,
  footer a:visited {
    color: var(--color-text-muted);
    border-bottom: 2px solid var(--color-border-light);
  }

  #main-content a:hover,
  nav#front-page-nav a:hover,
  footer a:hover,
  #main-content a:focus,
  nav#front-page-nav a:focus,
  footer a:focus {
    color: var(--color-text);
    border-bottom: 4px solid grey;
    transition: var(--transition-fast);
  }

  /* Skip link and focus states for keyboard users. */
  .skip-link {
    position: absolute;
    top: -100px;
    left: 0;
    z-index: 1000;
    padding: 8px 16px;
    background: var(--color-text-dark);
    color: #FFFFFF;
    text-decoration: none;
  }

  .skip-link:focus {
    top: 0;
    outline: 3px solid var(--color-primary);
    outline-offset: 2px;
  }

  a:focus-visible,
  button:focus-visible,
  input:focus-visible,
  select:focus-visible,
  textarea:focus-visible {
    outline: 3px solid var(--color-primary);
    outline-offset: 2px;
  }

  a:focus:not(:focus-visible),
  button:focus:not(:focus-visible) {
    outline: none;
  }

  ::selection {
    color: var(--color-text);
    background: var(--color-primary);
  }
}