:root {
     color-scheme: light;
     font-family: Georgia, "Times New Roman", serif;
     font-size: 16px;
     color: #111;
     background: #fff;
 }

 * {
     box-sizing: border-box;
 }

 body {
     margin: 0;
     background: #fff;
 }

 .page {
     width: min(100% - 2rem, 680px);
     margin: 0 auto;
     padding: 0.7rem 0 1.25rem;
 }

 .site-title {
     margin: 0 0 0.25rem;
     color: #000066;
     font-family: Arial, Helvetica, sans-serif;
     font-size: clamp(2.45rem, 9vw, 4rem);
     font-style: italic;
     line-height: 1;
     letter-spacing: 0.02em;
 }

 nav {
     border-top: 0.3rem solid #000044;
     background: #7777ad;
     font-family: Arial, Helvetica, sans-serif;
 }

 nav ul {
     display: flex;
     flex-wrap: wrap;
     margin: 0;
     padding: 0;
     list-style: none;
 }

 nav a {
     display: block;
     padding: 0.14rem 0.55rem 0.2rem;
     border-right: 1px solid #aaaadd;
     color: #f7f7ff;
     font-size: 0.85rem;
     line-height: 1;
 }

 nav li:first-child a,
 nav a:hover,
 nav a:focus-visible {
     background: #000066;
     color: #fff;
 }

 main {
     padding-top: 1.15rem;
 }

 h2 {
     margin: 0 0 0.2rem;
     color: #b00000;
     font-family: Arial, Helvetica, sans-serif;
     font-size: 1.05rem;
     line-height: 1.2;
 }

 p {
     margin: 0 0 1rem;
     line-height: 1.36;
 }

 a {
     color: #0000aa;
 }

 a:visited {
     color: #551a8b;
 }

 .mascot {
     float: right;
     width: 8.5rem;
     margin: 0.2rem 0 0.75rem 1rem;
     text-align: center;
     font-size: 4.3rem;
     line-height: 1;
 }

 .mascot small {
     display: block;
     margin-top: 0.4rem;
     font-size: 0.9rem;
     font-style: italic;
     line-height: 1.2;
 }

 .feature-link {
     clear: both;
     margin: 1.1rem 0 1.2rem;
     text-align: center;
     font-family: "Courier New", Courier, monospace;
     font-size: 1.45rem;
     font-weight: bold;
 }

 .directory {
     margin-top: 1.2rem;
 }

 .link-grid {
     display: grid;
     grid-template-columns: repeat(2, minmax(0, 1fr));
     gap: 0.35rem 2rem;
     margin: 0.55rem 0 1.35rem;
 }

 .link-card a {
     font-family: "Courier New", Courier, monospace;
     font-size: 1.03rem;
 }

 .link-card p {
     margin: 0.08rem 0 0;
     padding: 0 0.7rem;
     text-align: center;
     font-size: 0.82rem;
     line-height: 1.35;
 }

 footer {
     width: 74%;
     margin: 2rem auto 0;
     padding-top: 0.3rem;
     border-top: 1px solid #000066;
     text-align: center;
     font-size: 0.72rem;
 }

 footer p {
     margin: 0.2rem 0;
 }

 @media (max-width: 520px) {
     .page {
         width: min(100% - 1.25rem, 680px);
     }

     .site-title {
         font-size: clamp(2rem, 12vw, 3rem);
     }

     nav a {
         padding: 0.35rem 0.5rem;
         line-height: 1.1;
     }

     .mascot {
         width: 6rem;
         font-size: 3.2rem;
     }

     .link-grid {
         grid-template-columns: 1fr;
         gap: 0.75rem;
     }

     footer {
         width: 100%;
     }
 }