/* =========================
   VARIABLES & GLOBAL GUARDS
   ========================= */
   :root {
    --nav-h: 64px;
    --accent-cyan: #62d6ff;
  }
  
  body.about {
    overflow-x: hidden;
    overflow-y: auto;
  }
  
  /* =========================
     LAYOUT
     ========================= */
  .about-page{
    min-height: calc(100svh - var(--nav-h));
    max-width: 840px;
    width: 100%;
    margin: 0 auto;
    padding: clamp(16px, 4vw, 24px);
    display: grid;
    align-content: start;
    gap: 0;
  }
  
  .about-text { 
    font-size: 1rem;
    line-height: 1.75;
  }
  .about-text::after { content:""; display: table; clear: both; }
  
  .about-kicker{
    margin: 3rem 0 8px 0;
    font-size: 1rem;
    letter-spacing: 2px;
    color: var(--text-muted);
    text-transform: uppercase;
  }

  .about-kicker.site-name {
    font-size: clamp(1rem, 1.65vw, 1.35rem);
    letter-spacing: 0.14em;
    line-height: 1.25;
    color: var(--accent-ascii-yellow);
  }
  
  /* =========================
     INLINE PORTRAIT
     ========================= */
  .about-inline-photo{
    float: left;
    width: clamp(150px, 24%, 220px);
    height: auto;
    margin: 0 14px 6px 0;
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 4px;
    filter: grayscale(8%) contrast(105%);
    object-fit: cover;
    shape-outside: margin-box;
    shape-margin: 8px;
  }
  
  /* =========================
     RULE & LINKS
     ========================= */
  .rule{
    border: 0;
    border-top: 1px dotted rgba(255,255,255,0.18);
    margin: 10px 0;
  }
  
  .about-links{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin: 6px auto 0;
    flex-wrap: wrap;
  }
  .about-links a{
    font-family: 'Karla', sans-serif;
    font-size: 1.12rem;
    color: var(--accent-violet);
    text-decoration: none;
    font-weight: 500;
    letter-spacing: 0.4px;
    white-space: nowrap;
    transition: opacity .2s ease;
  }
  .about-links a:hover{ opacity: .7; }
  
  .about-links > span {
    user-select: none;
  }
  .about-links > span:has(+ br),
  .about-links > br + span { display: none; }
  
  /* =========================
     ASCII ART (CENTERED, SAFE)
     ========================= */
  .ascii-wrap {
    display: flex;
    justify-content: center;
    width: 100%;
    margin: 8px auto 0;      
    padding: 0;
    overflow: visible;
    transform: translateX(clamp(-36px, -4vw, -18px));
  }
  
  .ascii-art {
    font-size: clamp(7px, 1.45vw, 10px);
    line-height: 1;
    white-space: pre;
    display: inline-block;
    text-align: left;
    margin: 0;
    max-width: 100%;
  }

  /* Neutralize legacy <font size="+1"> so our responsive sizing wins */
  .ascii-art font { font-size: inherit; }
  
  .ascii-credit {
    font-size: 0.72rem;
    color: var(--text-muted);
    text-align: right;
    margin: 6px 8px 0 0;
    opacity: 0.65;
    letter-spacing: 0.4px;
  }
  .ascii-credit a {
    color: var(--accent-violet);
    text-decoration: none;
  }
  .ascii-credit a:hover { opacity: 0.8; }
    
  /* =========================
     DECORATIVE TEXT STYLES
     ========================= */
  .term-chip {
    background: rgba(0, 195, 255, 0.28);
    padding: 0.02rem 0.35rem;
    border-radius: 6px;
    font-weight: 500;
    color: var(--text);
    white-space: nowrap;
  }
  
  .wavy-key {
    text-decoration: underline;
    text-decoration-style: wavy;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 2px;
    text-decoration-color: var(--accent-violet);
    transition: text-decoration-color .2s ease, color .2s ease;
  }
  .wavy-key:hover {
    color: var(--accent-violet);
    text-decoration-color: var(--accent-violet);
  }
  
  .kw { font-weight: 600; transition: opacity .2s ease; }
  .kw:hover { opacity: .85; }
  .kw-coral { color: var(--accent-coral); }
  .kw-violet { color: var(--accent-violet); }
  .kw-cyan { color: var(--accent-cyan); }
  
  @media (prefers-reduced-motion: reduce) {
    .uni-link, .wavy-key, .kw { transition: none; }
  }
  
  /* =========================
     RESPONSIVE BEHAVIOR
     ========================= */

  @media (min-width: 981px){
    body.about { overflow-y: auto; }
    .about-page{
      min-height: calc(100svh - var(--nav-h));
      align-content: center;
    }
  }
  
  @media (max-width: 980px){
    body.about { overflow-y: auto; }
    .about-page{
      min-height: auto;
      height: auto;
    }
    .about-links{ row-gap: 8px; }
  }
  
  @media (max-width: 700px){
    .about-kicker{ margin: 2rem 0 6px 0; }
    .about-text{ font-size: .98rem; line-height: 1.8; }

    .about-inline-photo{
      float: none;
      display: block;
      width: clamp(140px, 58vw, 260px);
      margin: 6px auto 12px auto;
    }

    .ascii-art{
      font-size: clamp(6px, 1.55vw, 9px);
      max-height: none;
    }

    .ascii-wrap {
      transform: none;
      justify-content: center;
    }

    .about-links{ gap: 8px; }
    .about-links a{ font-size: 1rem; }
  }

  @media (max-width: 480px){
    .about-page{
      padding: 14px;
    }
    .about-kicker.site-name{
      font-size: 0.95rem;
      letter-spacing: 0.12em;
    }
    .about-text{ font-size: .92rem; line-height: 1.7; }
    .about-inline-photo{
      width: clamp(130px, 55vw, 200px);
    }
    .ascii-art{
      font-size: clamp(5px, 1.7vw, 7px);
    }
    .about-links a{ font-size: 0.92rem; }
  }