@charset "utf-8";
/* The Punctuation Guide - Typography (2026) */
/* Scope: all font-family, size, weight, spacing, and text-effect settings. */

/* ==========================================================================
   Typography Families
   --------------------------------------------------------------------------
   Kept in this file so all type decisions (families + usage) live together.
   ========================================================================== */

:root {
  --font-serif-a: 'Century Supra', serif;
  --font-serif-b: 'Valkyrie A', Georgia, serif;
  --font-serif-c: "Times New Roman", Times, serif;

  --font-sans-a: 'Concourse', sans-serif;
  --font-sans-b: 'Heliotrope', system-ui, sans-serif;
  --font-sans-c: "Segoe UI", sans-serif;

  --font-code-a: 'Triplicate A Code', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  --font-code-b: "Courier New", Courier, monospace;
}

@media screen {
  /* ==========================================================================
     Global Text Defaults
     ========================================================================== */

  body {
    font-family: var(--font-sans-a);
    font-size: 65.5%; /* 1em ~= 10px */
  }

  p {
    font-size: 2em;
    line-height: 1.6em;
    font-kerning: normal;
    margin: 1.2em 0;
  }

  blockquote {
    font-size: 1.5em;
  }

  h1,
  h2,
  h3,
  h4,
  h5 {
    font-family: var(--font-sans-a);
    line-height: 1.2;
  }

  h1 { font-size: 3em; }
  h2 { font-size: 2.8em; }
  h3 { font-size: 2.5em; }
  h4 { font-size: 2.25em; }

  .error-page h1 {
    font-size: 6em;
  }

  .skip-link {
    font-family: var(--font-serif-a);
    font-size: 1.6em;
  }

  code,
  kbd,
  samp {
    font-family: var(--font-code-a);
  }

  pre {
    font-family: var(--font-code-b);
  }

  /* ==========================================================================
     Header
     ========================================================================== */

  div#site-title {
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4);
  }

  #site-title span {
    font-family: var(--font-sans-a);
    font-size: 8.5vw;
    font-weight: 600;
    line-height: 1em;
  }

  /* ==========================================================================
     Footer
     ========================================================================== */

  footer {
    font-family: var(--font-sans-a);
  }

  #return-to-top-text {
    font-family: var(--font-sans-a);
    font-size: 1.5em;
  }

  #about-guide {
    font-size: 1.75em;
  }

  #copyright {
    font-size: 1.2em;
  }

  /* ==========================================================================
     Site Navigation
     ========================================================================== */

  .site-wide-nav-items a {
    font-family: var(--font-serif-a);
    font-size: 2.5em;
    word-spacing: 2px;
    text-shadow: 0.5px 0.5px 0.5px grey;
  }

  .site-wide-nav-items a:hover,
  .site-wide-nav-items a:focus {
    text-shadow: none;
  }

  .site-wide-nav-items a:link.active,
  .site-wide-nav-items a.active {
    text-shadow: none;
    font-weight: bolder;
  }

  .site-wide-nav-items ul.dropdown-content a {
    font-family: var(--font-sans-a);
    font-size: 1.6em;
    font-weight: 500;
    letter-spacing: 0.01em;
    line-height: 1.35;
    word-spacing: 0;
    text-shadow: none;
  }

  /* ==========================================================================
     Page Navigation (left TOC)
     ========================================================================== */

  #page-navigation a {
    font-family: var(--font-sans-a);
    font-size: 1.75em;
    margin-top: 10px;
    
  }

  div#page-navigation > ul > li {
    font-weight: 600;
  }

  /* ==========================================================================
     Landing Page (index.html)
     ========================================================================== */

  nav#front-page-nav section {
    font-size: 128%;
  }

  nav#front-page-nav section .category {
    font-family: var(--font-sans-a);
    font-size: 2.1em;
    font-weight: 400;
    letter-spacing: .01em;
    text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.9);
  }

  #front-page-nav section > div:nth-child(2) {
    font-family: var(--font-sans-a);
    font-size: 1.5em;
    font-weight: 400;
    line-height: 1.8em;
  }

  nav#front-page-nav a::before {
    font-family: var(--font-sans-a);
    font-size: 1.3em;
    font-weight: 600;
    text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.9);
  }

  /* ==========================================================================
     Main Content
     ========================================================================== */

  .operative-word {
    font-style: italic;
  }

  .recommended-reference {
    font-weight: 700;
  }

  #main-content ul li {
    font-size: 2em;
    line-height: 1.5;
  }

  #titles-container h2 {
    font-size: 2.75em;
  }

  #titles-container li {
    font-family: var(--font-sans-a);
    font-size: 1.75em;
  }

  .example {
    font-family: var(--font-serif-a);
  }

  div.example p {
    line-height: 1.25em;
  }

  div.example > span {
    font-family: var(--font-sans-a);
    font-size: 1.25em;
  }

  .explanation {
    font-size: 1.75em;
  }

  .internal-example {
    font-family: var(--font-serif-a);
    font-size: 80%;
    font-weight: 300;
  }

  th {
    font-family: var(--font-sans-c);
    font-size: 2em;
    font-weight: 600;
  }

  .chart-rule {
    font-family: var(--font-sans-a);
    font-size: 1.75em;
  }

  .chart-example {
    font-family: var(--font-serif-a);
    font-size: 1.75em;
  }
}

@media screen and (max-width: 768px) {
  .end-of-sentence-row {
    font-family: var(--font-sans-a);
    font-size: 2em;
    font-weight: 600;
  }
}

@media screen and (max-width: 480px) {
  nav#front-page-nav {
    font-size: 120%;
  }

  body {
    font-size: 60%;
  }

  #main-content {
    font-size: 90%;
  }

  #site-title span {
    font-size: 9vw;
  }
}

@media screen and (max-width: 359px) {
  body {
    font-size: 50%;
  }
}

@media screen and (min-width: 768px) {
  div#top-ten-tips a {
    font-size: 1.1em;
    font-weight: 600;
    line-height: 1.1em;
    text-shadow: 1px 1px 1px black;
  }
}

@media screen and (min-width: 1050px) {
  #site-title span {
    font-size: 6.5vw;
  }
}

@media screen and (min-width: 1600px) {
  #site-wide-nav {
    font-size: 150%;
  }

  main {
    font-size: 150%;
  }

  #front-page-nav {
    font-size: 100%;
  }

  div#top-ten-tips a {
    font-size: 1.5em;
  }
}

@media print {
  div#site-title:after {
    font-family: var(--font-sans-a);
    font-size: 3em;
  }

  body {
    font-family: var(--font-serif-a);
    font-size: 16px;
  }

  p {
    line-height: 1.5em;
  }

  div.example-text {
    font-family: var(--font-sans-a);
  }

  .explanation {
    font-family: var(--font-sans-a);
    font-size: 12px;
  }

  article:after,
  #site-title:after,
  #terminal-punctuation-table:after {
    font-family: var(--font-sans-a);
    font-size: 1em;
    font-weight: normal;
  }
}