@media all {
  html,
  body {
    font-family: "Times New Roman", Times, serif;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-family: "Times New Roman", Times, serif;
  }

  .brand-script {
    font-family: "Tangerine", "Times New Roman", Times, serif;
    font-weight: 700;
    font-size: 1.35em;
    line-height: 1;
    display: inline-block;
    vertical-align: baseline;
  }

  input,
  button,
  select,
  textarea {
    font-family: inherit;
  }

  .visually-hidden {
    position: absolute !important;
    height: 1px;
    width: 1px;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
    white-space: nowrap;
  }

  /* Lightweight site-specific styling on top of YAML.
     Keep structure similar to common docs sites: logo + primary nav + footer columns. */

  .site-brand {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
  }

  .site-logo {
    font-size: 1.25rem;
    line-height: 1.2;
    font-weight: bold;
    margin: 0;
  }

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

  .site-logo a:hover,
  .site-logo a:focus {
    color: #4d87c7;
    background: transparent;
    text-decoration: none;
    outline: none;
  }

  .site-tagline {
    margin: 0.25rem 0 0;
    font-size: 0.95rem;
    opacity: 0.85;
  }

  .auth-portal {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3.75rem 0 4.25rem;
  }

  body.portal-page .auth-portal,
  body.register-page .auth-portal {
    padding: 4.75rem 0 5.75rem;
  }

  .auth-title {
    margin: 0 0 1.5rem;
    font-size: 1.5rem;
    text-align: center;
    white-space: pre-line;
  }

  .auth-card {
    width: min(92vw, 26rem);
    aspect-ratio: 1.618 / 1;
    box-sizing: border-box;
    background: #f6f6f6;
    border: 1px solid #e6e6e6;
    padding: 1.25rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .auth-welcome,
  .auth-welcome-title,
  .auth-welcome-name {
    display: none;
  }

  .auth-form {
    display: grid;
    gap: 0.9rem;
    justify-items: stretch;
    text-align: left;
  }

  .auth-label {
    text-align: left;
    display: block;
    margin-bottom: 0.45rem;
    font-weight: bold;
    color: #003365;
  }

  .auth-label-note {
    font-weight: normal;
    font-style: italic;
  }

  .auth-input {
    width: 100%;
    box-sizing: border-box;
    padding: 0.5rem 0.6rem;
    border: 1px solid #cfcfcf;
    background: #fff;
  }

  .auth-input.ck-flash {
    animation: ck-flash-border 700ms ease;
  }

  @keyframes ck-flash-border {
    0% {
      border-color: #cfcfcf;
    }
    35% {
      border-color: #4d87c7;
    }
    70% {
      border-color: #4d87c7;
    }
    100% {
      border-color: #cfcfcf;
    }
  }

  .auth-input-wrap {
    position: relative;
  }

  .auth-input-wrap .auth-input {
    padding-right: 3.25rem;
  }

  .auth-toggle {
    position: absolute;
    right: 0.55rem;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    border: 0;
    background: transparent;
    color: #003365;
    padding: 0;
    line-height: 1;
    font: inherit;
  }

  .auth-toggle:hover,
  .auth-toggle:focus {
    color: #4d87c7;
    text-decoration: underline;
    outline: none;
  }


  .auth-submit {
    cursor: pointer;
    width: 100%;
    box-sizing: border-box;
    padding: 0.55rem 0.8rem;
    border: 1px solid #29547e;
    background: #29547e;
    color: #fff;
  }

  .auth-back {
    cursor: pointer;
    width: 100%;
    box-sizing: border-box;
    padding: 0.55rem 0.8rem;
    border: 1px solid #cfcfcf;
    background: #fff;
  }

  .auth-back:hover,
  .auth-back:focus {
    background: rgba(0, 0, 0, 0.05);
    color: #4d87c7;
    outline: none;
  }

  .auth-hint {
    margin-top: 0.6rem;
    text-align: left;
  }

  .auth-hint a {
    color: #003365;
    text-decoration: none;
    background: transparent;
  }

  .auth-hint a:hover,
  .auth-hint a:focus {
    color: #4d87c7;
    text-decoration: underline;
    background: transparent;
    outline: none;
  }

  .auth-submit:hover,
  .auth-submit:focus {
    background: #003365;
    color: #fff;
    outline: none;
  }

  .auth-register {
    margin: 0.9rem 0 0;
    text-align: center;
  }

  .auth-register a {
    color: #003365;
    font-weight: bold;
    text-decoration: none;
    background: transparent;
  }

  .auth-register a:hover,
  .auth-register a:focus {
    color: #4d87c7;
    text-decoration: underline;
    background: transparent;
    outline: none;
  }

  header.site-header {
    background: #fff;
    color: #111;
    border-bottom: 1px solid #e6e6e6;
    padding: 1rem 0;
  }

  /* Welcome paragraph only */
  .site-main h1 + p {
    text-align: justify;
    text-justify: inter-word;
  }

  /* Smooth theme transitions (outer to inner via staggered delays) */
  body {
    background-color: #fafafa;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    transition: background-color 650ms ease 0ms, color 650ms ease 0ms;
  }

  header.site-header {
    transition: background-color 650ms ease 80ms, color 650ms ease 80ms, border-color 650ms ease 80ms;
  }

  .utility-bar {
    transition: background-color 650ms ease 140ms, color 650ms ease 140ms, border-color 650ms ease 140ms;
  }

  footer.site-footer {
    transition: background-color 650ms ease 220ms, color 650ms ease 220ms, border-color 650ms ease 220ms;
  }

  .tod-box {
    transition: background-color 650ms ease 300ms, color 650ms ease 300ms, border-color 650ms ease 300ms;
  }

  .utility-icon-btn {
    transition: background-color 650ms ease 340ms, color 650ms ease 340ms, border-color 650ms ease 340ms;
  }

  @media (prefers-reduced-motion: reduce) {
    body,
    header.site-header,
    .utility-bar,
    footer.site-footer,
    .tod-box,
    .utility-icon-btn {
      transition: none;
    }
  }

  /* Make the YAML nav feel more like a modern “global nav” bar */
  nav.site-nav {
    background: #003365;
  }

  nav.site-nav .ym-hlist {
    background: transparent;
  }

  /* Align nav items with the .ym-wbox padding used in header/content (10px) */
  nav.site-nav .ym-hlist ul {
    padding-left: 10px;
    padding-right: 10px;
  }

  nav.site-nav .ym-hlist ul li a,
  nav.site-nav .ym-hlist ul li strong {
    color: #d6d6d6;
  }

  nav.site-nav .ym-hlist ul li {
    background: transparent;
  }

  /* Default nav items: no button highlight; background shows navbar color */
  nav.site-nav .ym-hlist ul li a {
    background: transparent;
    border-radius: 0.2em;
  }

  /* No hover highlight for non-visited items */
  nav.site-nav .ym-hlist ul li a:hover,
  nav.site-nav .ym-hlist ul li a:focus,
  nav.site-nav .ym-hlist ul li a:active {
    background: transparent;
  }

  /* Only show button background for navigated (visited) or current item */
  nav.site-nav .ym-hlist ul li a:visited {
    background: rgba(255, 255, 255, 0.16);
    color: #ffffff;
  }

  nav.site-nav .ym-hlist ul li.active a {
    background: rgba(255, 255, 255, 0.16);
    color: #ffffff;
  }

  .utility-bar {
    background: #f6f6f6;
    border-bottom: 1px solid #e6e6e6;
  }

  .utility-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.5rem 10px;
  }

  .utility-left,
  .utility-right {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
  }

  .utility-sep {
    opacity: 0.6;
  }

  .lang-link {
    text-decoration: none;
  }

  .lang-link:hover,
  .lang-link:focus {
    text-decoration: none;
    background: transparent;
    color: inherit;
  }

  .lang-link.active {
    font-weight: bold;
  }

  /* Align first language link under first nav item text */
  .utility-left {
    margin-left: 0.5em;
  }

  .utility-date {
    white-space: nowrap;
  }

  .utility-btn {
    cursor: pointer;
    background: transparent;
    border: 1px solid #cfcfcf;
    padding: 0.15rem 0.4rem;
    line-height: 1.2;
  }

  .utility-btn:hover,
  .utility-btn:focus {
    background: rgba(0, 0, 0, 0.05);
    outline: none;
  }

  .utility-icon-btn {
    cursor: pointer;
    background: transparent;
    border: 1px solid #cfcfcf;
    border-radius: 9999px;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    line-height: 1;
  }

  .utility-icon-btn:hover,
  .utility-icon-btn:focus {
    background: rgba(0, 0, 0, 0.05);
    outline: none;
  }

  .utility-icon {
    width: 15px;
    height: 15px;
    fill: currentColor;
    display: block;
  }

  .page-actions-inner {
    display: flex;
    justify-content: flex-end;
    padding: 0.5rem 10px 0.75rem;
  }

  .page-actions-stack {
    display: flex;
    flex-direction: row;
    gap: 0.5rem;
    align-items: center;
  }

  .page-actions-sep {
    opacity: 0.6;
    line-height: 1;
  }

  a.utility-icon-btn {
    text-decoration: none;
    color: inherit;
  }

  /* Theme toggle shows the action icon (moon when light, sun when dark) */
  #theme-toggle .utility-icon[data-icon="sun"] {
    display: none;
  }

  html[data-theme="dark"] #theme-toggle .utility-icon[data-icon="moon"] {
    display: none;
  }

  html[data-theme="dark"] #theme-toggle .utility-icon[data-icon="sun"] {
    display: block;
  }

  html[data-theme="dark"] body {
    background: #111;
    color: #eee;
  }

  html[data-theme="dark"] header.site-header {
    background: #111;
    color: #eee;
    border-bottom-color: #2b2b2b;
  }

  html[data-theme="dark"] .utility-bar {
    background: #1a1a1a;
    border-bottom-color: #2b2b2b;
  }

  html[data-theme="dark"] footer.site-footer {
    background: #1a1a1a;
    border-top-color: #2b2b2b;
  }

  html[data-theme="dark"] .footer-meta {
    border-top-color: #2b2b2b;
  }

  html[data-theme="dark"] .tod-box {
    background: #1a1a1a;
    border-color: #2b2b2b;
  }

  html[data-theme="dark"] body.portal-page .auth-card,
  html[data-theme="dark"] body.register-page .auth-card {
    background: #1a1a1a;
    border-color: #2b2b2b;
  }

  html[data-theme="dark"] a {
    color: inherit;
  }

  html[data-theme="dark"] .utility-btn {
    border-color: #5a5a5a;
    color: inherit;
  }

  html[data-theme="dark"] .utility-icon-btn {
    border-color: #5a5a5a;
    color: inherit;
  }

  html[data-theme="dark"] .utility-btn:hover,
  html[data-theme="dark"] .utility-btn:focus {
    background: rgba(255, 255, 255, 0.08);
  }

  html[data-theme="dark"] .utility-icon-btn:hover,
  html[data-theme="dark"] .utility-icon-btn:focus {
    background: rgba(255, 255, 255, 0.08);
  }

  html[data-theme="dark"] h1,
  html[data-theme="dark"] h2,
  html[data-theme="dark"] h3,
  html[data-theme="dark"] h4,
  html[data-theme="dark"] h5,
  html[data-theme="dark"] h6 {
    color: #b5b5b5;
  }

  html[data-theme="dark"] body.portal-page .auth-label,
  html[data-theme="dark"] body.register-page .auth-label {
    color: #b5b5b5;
  }

  html[data-theme="dark"] footer.site-footer .footer-meta a,
  html[data-theme="dark"] footer.site-footer .footer-contact a,
  html[data-theme="dark"] footer.site-footer .footer-sep-line {
    color: #bfe3ff;
  }

  html[data-theme="dark"] nav.site-nav .ym-hlist ul li a:hover,
  html[data-theme="dark"] nav.site-nav .ym-hlist ul li a:focus,
  html[data-theme="dark"] nav.site-nav .ym-hlist ul li a:active {
    background: #003365;
    color: #bfe3ff;
  }

  main.site-main {
    padding: 2rem 0;
    flex: 1 0 auto;
  }

  .flourish {
    display: flex;
    justify-content: center;
    padding: 1.25rem 0 0.75rem;
    flex-shrink: 0;
  }

  .flourish-svg {
    width: min(66vw, 52rem);
    height: 48px;
  }

  .flourish-svg path {
    fill: none;
    stroke: currentColor;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0.45;
  }

  .flourish-svg path:last-child {
    fill: currentColor;
    stroke: none;
    opacity: 0.35;
  }

  footer.site-footer {
    background: #f6f6f6;
    border-top: 1px solid #e6e6e6;
    flex-shrink: 0;
  }

  .footer-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
  }

  .footer-col {
    flex: 1 1 14rem;
    min-width: 12rem;
  }

  .footer-col h2 {
    font-size: 1rem;
    margin: 0 0 0.5rem;
  }

  .footer-links {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .footer-links li {
    margin: 0.25rem 0;
  }

  .footer-links a {
    text-decoration: none;
  }

  .footer-meta {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid #e2e2e2;
    font-size: 0.9rem;
    opacity: 0.9;
    text-align: center;
  }

  .footer-meta a {
    color: inherit;
    text-decoration: none;
    background: transparent;
  }

  .footer-meta a:hover,
  .footer-meta a:focus {
    color: #4d87c7;
    text-decoration: none;
    background: transparent;
    outline: none;
  }

  .footer-sep-line {
    margin: 0.25rem 0;
    text-align: center;
    opacity: 0.9;
  }

  .footer-contact {
    margin: 0;
    text-align: center;
  }

  .footer-contact a,
  .footer-contact a:visited,
  .footer-contact a:active {
    color: inherit;
    background: transparent;
  }

  .footer-contact a:hover,
  .footer-contact a:focus {
    color: #4d87c7;
    background: transparent;
    text-decoration: none;
    outline: none;
  }

  footer.site-footer .footer-meta a,
  footer.site-footer .footer-contact a,
  footer.site-footer .footer-contact a:visited,
  footer.site-footer .footer-contact a:active,
  footer.site-footer .footer-sep-line {
    color: #29547e;
  }

  footer.site-footer .footer-meta a:hover,
  footer.site-footer .footer-meta a:focus,
  footer.site-footer .footer-contact a:hover,
  footer.site-footer .footer-contact a:focus {
    color: #003365;
  }

  .tod {
    margin-top: 2.5rem;
  }

  .tod h2 {
    font-size: 1.1rem;
    margin: 0 0 0.5rem;
  }

  .tod-box {
    background: #f6f6f6;
    border: 1px solid #e6e6e6;
    padding: 0.75rem;
    text-align: center;
  }

  .tod-box p {
    margin: 0.5rem 0;
  }

  .tod-box p:first-child {
    color: #666;
  }

  .tod-box p:first-child strong {
    font-weight: normal;
  }

  .tod-goodday {
    margin-top: 0.75rem;
    color: #666;
  }

  .triangle-wrap {
    margin: 2.25rem 0 0;
    display: flex;
    justify-content: center;
  }

  .triangle-svg {
    width: min(82vw, 52rem);
    height: auto;
    overflow: visible;
  }

  .tri-glow-outer {
    fill: none;
    stroke: #2ea2ff;
    stroke-width: 22;
    opacity: 0.22;
    filter: url(#saberGlowOuter);
    stroke-linecap: butt;
    stroke-linejoin: miter;
    stroke-miterlimit: 6;
  }

  .tri-glow-mid {
    fill: none;
    stroke: #2ea2ff;
    stroke-width: 14;
    opacity: 0.35;
    filter: url(#saberGlowMid);
    stroke-linecap: butt;
    stroke-linejoin: miter;
    stroke-miterlimit: 6;
  }

  .tri-core {
    fill: none;
    stroke: rgba(235, 250, 255, 0.98);
    stroke-width: 6;
    opacity: 0.98;
    stroke-linecap: butt;
    stroke-linejoin: miter;
    stroke-miterlimit: 6;
  }

  .tri-label {
    font-family: "Times New Roman", Times, serif;
    font-size: 18px;
    fill: #003365;
  }

  .shield-wrap {
    display: none;
  }

  .shield-svg {
    display: none;
  }

  .shield-in-triangle {
    pointer-events: none;
    display: none;
  }

  .shield-glow {
    fill: none;
    stroke: #2ea2ff;
    stroke-width: 14;
    opacity: 0.25;
    filter: url(#shieldGlow);
    stroke-linejoin: miter;
    stroke-miterlimit: 8;
  }

  .shield-body {
    fill: #003365;
    stroke: rgba(235, 250, 255, 0.35);
    stroke-width: 2;
    filter: url(#shieldGlow);
    stroke-linejoin: miter;
    stroke-miterlimit: 8;
  }

  .shield-keyhole {
    fill: rgba(235, 250, 255, 0.75);
    filter: url(#shieldGlow);
  }

  html[data-theme="dark"] .tod-box p:first-child,
  html[data-theme="dark"] .tod-goodday {
    color: #b5b5b5;
  }

  html[data-theme="dark"] .tri-label {
    fill: #bfe3ff;
  }

}

@media screen and (max-width: 760px) {
  header.site-header {
    padding: 0.75rem 0;
  }

  .site-brand {
    flex-direction: column;
    align-items: flex-start;
  }

  .utility-inner {
    flex-direction: column;
    align-items: flex-start;
  }
}