@font-face {
  font-family: 'IBMPlexMono';
  src: url('../fonts/IBMPlexMono-Light.woff2') format('woff2'),
       url('../fonts/IBMPlexMono-Light.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

.term-type {
font-style: italic;
font-size: 0.85rem;
}

.desc {font-style:italic; color:#666; margin-top:-10px}
.titleLink {font-size:18px}

 .field-nav {
          text-align: center;
            font-size: 20px;
            color: #1A1A1A;
            z-index: 100;
            opacity: 1;
            transition: opacity 0.3s ease;
        }
        .field-nav:hover {
            opacity: 1;
        }
        .field-nav a {
            color: #1A1A1A;
            text-decoration: none;
        }
        .node {
            font-family: 'IBMPlexMono';
            font-size: 14px;
            margin-left: 24px
        }

.pathway {
    font-family: 'IBMPlexMono', monospace;
    background-color: #f5f5f5;
    padding: 3px 7px;
    border-radius: 4px;
    font-size: 14px;
    border: 1px solid #e0e0e0;
    letter-spacing: -0.02em;
    color: #666;
    font-weight:300;
}

.pathway a {
    text-decoration: none;
    color: inherit;
}

.pathway a:hover {
    text-decoration: underline;
}

.pathway a:focus {
    outline: 1px dotted #666;
    outline-offset: 1px;
}


             .signal-coordinate {
            
            left: 20px;
            font-family: 'IBMPlexMono', monospace;
            font-size: 1rem;
            color: #666;
            z-index: 100;
            letter-spacing: -0.02em;
        }
        
        .contextual-nav {
           
            right: 50%;
            font-family: 'IBMPlexMono', monospace;
            font-size: 14px;
            font-weight:300;
            color: #666;
            z-index: 100;
            opacity: 1;
            transition: opacity 0.3s ease;
        }
        
        .contextual-nav:hover {
            opacity: 1;
        }
        
        .contextual-nav a {
            color: #666;
            text-decoration: none;
            margin-right: 12px;
        }
        
        @media (max-width: 767px) {
     .contextual-nav a {
            margin-right: 8px;
        }
        }
        .contextual-nav a:hover {
            color: #666;
        }
        
        .contextual-nav .separator {
            color: #666;
            margin: 0 4px;
        }

    .page-path {
        font-family: 'IBMPlexMono', monospace;
        font-size: 14px;
        color: #666;
        /*margin-top: 0.2em;*/
        margin-bottom: 3em;
        }
        
body {
            font-family: Georgia, serif;
            background-color: #FAFAF9;
            color: #1A1A1A;
            line-height: 1.7;
            max-width: 650px;
            margin: 0 auto;
            padding: 60px 24px;
        }
        
        h1 {
            font-size: 24px;
            font-weight: normal;
            margin-bottom: 16px;
        }
        
        .subtitle {
            font-style: italic;
            color: #555;
            margin-bottom: 32px;
            font-size: 16px;
        }
        
        h2 {
            font-size: 18px;
            font-weight: normal;
            margin-top: 40px;
            margin-bottom: 16px;
            color: #333;
        }
        
        p {
            margin-bottom: 16px;
        }
        
        blockquote {
            font-style: italic;
            margin: 24px 0;
            padding-left: 16px;
            border-left: 2px solid #BFBFBF;
            color: #555;
        }
        
        ul {
            margin: 16px 0;
            padding-left: 0;
            list-style: none;
        }
        
        ul li {
            margin-bottom: 8px;
            position: relative;
            padding-left: 20px;
        }
        
        ul li::before {
            content: '—';
            position: absolute;
            left: 0;
            color: #999;
        }
        
        
        .terrain {
            margin: 32px 0;
            padding: 24px;
            background-color: #f9f9f9;
            border-left: 3px solid #ddd;
        }
        
        .terrain h3 {
            font-size: 18px;
            font-weight: normal;
            margin-top: 0;
            margin-bottom: 8px;
            color: #333;
        }
        
        .terrain .description {
            font-style: italic;
            color: #555;
            margin-bottom: 16px;
            font-size: 15px;
        }
        
        .terrain p {
            margin-bottom: 12px;
        }
        
        .terrain blockquote {
            margin: 16px 0;
            font-size: 15px;
            border-left-color: #ccc;
        }
        
        a {
            color: #1A1A1A;
            text-decoration: underline;
        }
        
        a:hover {
            color: #555;
        }
        
        .note {
            font-size: 14px;
            color: #555;
            margin: 16px 0;
            font-style: italic;
        }
        
        .connections {
            font-size: 14px;
            color: #777;
            margin-top: 12px;
            padding-top: 12px;
            border-top: 1px solid #eee;
        }
        
        hr {
            border: none;
            border-top: 1px solid #DDDDDD;
            margin: 40px 0;
        }
        
        .footer {
            font-size: 14px;
            color: #666;
            margin-top: 60px;
            text-align: left;
        }
        
        .expandable {
            color: inherit;
            text-decoration: underline;
            text-decoration-style: dotted;
            text-decoration-color: #777;
            text-decoration-thickness: 1.5px;
            cursor: pointer;
            transition: text-decoration-color 0.2s ease;
        }
        
        .expandable:hover {
            text-decoration-color: #333;
        }
        
        .explanation {
            max-height: 0;
            overflow: hidden;
            margin: 0;
            padding: 0 0 0 20px;
            border-left: 1px solid #eee;
            font-style: italic;
            color: #555;
            font-size: 0.95rem;
            transition: max-height 0.3s ease, margin 0.3s ease;
        }
        
        .explanation.show {
            max-height: 500px;
            margin: 1rem 0;
        }
        
        @media (max-width: 600px) {
            body {
                padding: 40px 15px;
            }
            h1 {
                font-size: 20px;
            }
        }
        
        .infoText {
        font-family: 'DM Sans', sans-serif;
        font-size: 12px;
        color: #666;
        text-align: left;
      }


/* Navigation-specific heading styles */
h3 {
    font-size: 16px;
    font-weight: normal;
    font-style: italic;
    margin-top: 32px;
    margin-bottom: 12px;
    color: #555;
}

/* Season indicators */
.season-indicator {
    font-size: 12px;
    color: #888;
    font-style: italic;
}

/* Enhanced focus styles for accessibility */
a:focus {
    outline: 1px dotted #666;
    outline-offset: 1px;
    background-color: rgba(0, 0, 0, 0.02);
}

.expandable:focus {
    outline: 1px dotted #666;
    outline-offset: 1px;
    text-decoration-color: #333;
    background-color: rgba(0, 0, 0, 0.02);
}

/* ARIA support for expandable content */
.expandable[aria-expanded="true"] {
    text-decoration-color: #333;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .pathway {
        border: 2px solid #000;
        background-color: #fff;
    }
    
    a:focus, .expandable:focus {
        outline: 2px solid #000;
        background-color: #fff;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .explanation {
        transition: none;
    }
    
    .expandable {
        transition: none;
    }
}