/* Reset */
  * { box-sizing: border-box; }
  html, body { height: 100%; }
  body {
    margin: 0;
    background: #fcfaf6;
    color: #111;
    font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  }

  #app { position: relative; min-height: 100svh; }

  .site-header {
    position: relative;
    z-index: 30; /* Always on top */
    max-width: 56rem;
    padding: 48px 56px;
  }
  .site-header h1 {
    margin: 0 0 12px 0;
    font-family: "Lora", serif;
    font-size: 42px;
    letter-spacing: 0.5px;
    font-weight: 300;
  }
  .site-header p { 
    line-height: 1.4; 
    max-width: 50ch; 
    margin-bottom: 16px; 
    font-family: "Courier New", monospace;
    font-size: 14px;
  }
  .site-header a { color: inherit; font-weight: 700; text-decoration: underline; text-decoration-thickness: 1px; }

  .social-links { 
    margin: 16px 0; 
    font-size: 14px; 
    color: #000000; 
  }
  .social-links a { 
    color: #000000; 
    text-decoration: none; 
    font-weight: 400; 
  }
  .social-links a:hover { 
    color: #111; 
    text-decoration: underline; 
  }

  .links { display: grid; gap: 8px; margin-top: 24px; }
  .links h3 { 
    margin: 20px 0 8px 0; 
    font-size: 16px; 
    font-family: "Courier New", monospace;
    color: #749AAD; 
    font-weight: 600; 
    /*text-transform: uppercase; */
    letter-spacing: 0.5px; 
  }
  .links h3:first-child { margin-top: 0; }
  .links a { 
    text-decoration: none; 
    border-left: 3px solid transparent; 
    padding-left: 10px; 
    font-size: 13px;
    font-family: "Courier New", monospace;
    line-height: 1.3;
    display: flex;
    align-items: flex-start;
  }
  .links a:hover { border-color: #111; text-decoration: underline; }

  .link-content {
    flex: 1;
    margin-right: 6px;
  }

  .link-date {
    font-size: 12px;
    color: #888;
    font-weight: 400;
    font-family: "Courier New", monospace;
    white-space: nowrap;
    margin-top: 1px;
  }

  #scene { position: fixed; inset: 0; overflow: hidden; z-index: 0; }
  #water, #fish { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
  #water { z-index: 5; opacity: 0.18; }
  #fish { z-index: 10; }
  #pads { position: absolute; inset: 0; z-index: 20; pointer-events: none; }

  /* Lilypad sprites */
  .pad { position: absolute; transform-origin: 50% 50%; will-change: transform; filter: drop-shadow(0 2px 0 rgba(0,0,0,0.02)); }
  .pad img { display: block; width: 180px; height: auto; }

  @media (max-width: 680px) {
    .site-header { padding: 28px 24px; }
    .site-header h1 { font-size: 32px; }
    .pad img { width: 140px; }
    
    /* Hide fish pond elements on mobile */
    #scene {
      display: none;
    }
    
    /* Ensure body has a solid background when scene is hidden */
    body {
      background: #FAF5EC;
    }
  }