/* catocaolan.com - shared styles for the retro pages (/ and /credits/).
   Extracted 2026-07-28 so two pages cannot drift apart. Same-origin, not
   an external asset: still nothing hotlinked and nothing that can rot. */

  :root{
    --void:#000018;
    --star:#ffffff;
    --cyan:#00ffff;   /* 16.7:1 on void  */
    --lime:#00ff00;   /* 15.3:1 on void  */
    --gold:#ffff00;   /* 19.6:1 on void  */
    --pink:#ff66ff;   /*  8.6:1 on void  */
    --text:#e8e8ff;
    --panel:#12123a;
    --bevel-hi:#5a5ac8;
    --bevel-lo:#000000;
  }
  *{box-sizing:border-box}

  body{
    margin:0;
    background-color:var(--void);
    background-image:
      radial-gradient(1px 1px at 20px 30px,  #fff, transparent),
      radial-gradient(1px 1px at 90px 140px, #fff, transparent),
      radial-gradient(1px 1px at 160px 60px, #cfe, transparent),
      radial-gradient(2px 2px at 50px 180px, #fff, transparent),
      radial-gradient(1px 1px at 130px 20px, #ffd, transparent),
      radial-gradient(1px 1px at 190px 110px,#fff, transparent);
    background-size:200px 200px;
    color:var(--text);
    font-family:Verdana,Geneva,"DejaVu Sans",Tahoma,sans-serif;
    font-size:1.05rem;line-height:1.6;
  }

  .page{max-width:44rem;margin:0 auto;padding:1rem 1rem 3rem;text-align:center}

  a{color:var(--cyan)}
  a:hover{color:var(--gold)}
  a:focus-visible{outline:3px solid var(--gold);outline-offset:3px}

  /* ---------- the big welcome bar ---------- */
  /* ⚑ THE DECORATIONS SIT ON THEIR OWN LINES, AT EVERY WIDTH.
     Caolan's mobile pass, 2026-07-29: "header's not centered on phone.
     looks a bit clunky." The banner was one inline run — sparkles, title,
     sparkles — so as soon as it was too narrow it broke wherever it happened
     to fit, orphaning "CORNER ✦ ✦ ✦" onto a second line and leaving the
     leading sparkles stranded at the far left. Centred text, ragged result.

     Deliberately NOT fixed with a breakpoint. I cannot render below ~500px
     CSS width on this machine (Chrome for Windows clamps its window), so any
     media query I picked would be a guess I could not check. Stacking them
     always has no breakpoint to get wrong, reads as a proper banner, and is
     verifiable at every width I CAN reach. */
  .welcome .deco{display:block;line-height:1.4}
  .welcome .wtitle{display:block}

  /* Twinkling sparkles. Every colour below is already in the palette and every
     one of them is a documented AA pass on this background, so the banner never
     dips below contrast mid-cycle — the sparkles are decorative anyway and are
     aria-hidden, but the text beside them is not, and a colour animation that
     wanders into low contrast would be a real defect rather than a flourish.

     The delays are NEGATIVE on purpose: a negative delay starts the animation
     already part-way through, so the six begin out of phase instead of all
     flashing together on page load. Six sparkles pulsing in lockstep reads as
     a broken loop; out of phase it reads as sparkle. */
  @keyframes twinkle{
    0%,100%{color:var(--cyan)}
    20%    {color:var(--gold)}
    40%    {color:var(--pink)}
    60%    {color:var(--lime)}
    80%    {color:var(--star)}
  }
  .welcome .deco .sparkle{animation:twinkle 4.4s linear infinite}
  .welcome .deco:first-of-type .sparkle:nth-child(2){animation-delay:-1.4s}
  .welcome .deco:first-of-type .sparkle:nth-child(3){animation-delay:-2.9s}
  .welcome .deco:last-of-type  .sparkle:nth-child(1){animation-delay:-0.7s}
  .welcome .deco:last-of-type  .sparkle:nth-child(2){animation-delay:-2.1s}
  .welcome .deco:last-of-type  .sparkle:nth-child(3){animation-delay:-3.6s}

  .welcome{
    border:4px ridge var(--pink);
    background:linear-gradient(180deg,#26064a,#0a0a2e);
    padding:1rem .75rem;margin:1rem 0;
    font-weight:bold;font-size:1.2rem;color:var(--gold);
    text-shadow:2px 2px 0 #b1009b;
    letter-spacing:.04em;
  }
  .sparkle{display:inline-block;color:var(--cyan)}

  /* ---------- marquee (CSS, not the dead element) ---------- */
  .marquee{
    overflow:hidden;border-top:2px solid var(--lime);border-bottom:2px solid var(--lime);
    background:#000;padding:.35rem 0;margin:1rem 0;
  }
  .marquee p{
    margin:0;white-space:nowrap;display:inline-block;padding-left:100%;
    color:var(--lime);font-family:monospace;font-size:1rem;
    animation:slide 22s linear infinite;
  }
  .marquee:hover p,.marquee:focus-within p{animation-play-state:paused}
  @keyframes slide{from{transform:translateX(0)}to{transform:translateX(-100%)}}

  /* ---------- header button bar ---------- */
  .navbar{margin:1.1rem 0}
  .navbar ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;
    gap:.4rem;justify-content:center}
  .navbar a,.navbar span{
    display:block;background:#000;border:3px outset var(--bevel-hi);
    padding:.45rem .8rem;text-decoration:none;color:var(--cyan);
    font-family:monospace;font-size:.85rem;font-weight:bold;letter-spacing:.04em;
  }
  .navbar a:hover,.navbar a:focus-visible{border-style:inset;background:#1a1a4d;color:var(--gold)}
  .navbar a[aria-current="page"]{border-style:inset;background:#1a1a4d;color:var(--gold)}
  /* disabled entries: #7a7aa8 on #000 is 5.17:1, still AA, and not focusable on purpose */
  .navbar span{color:#7a7aa8;border-color:#3a3a6a;cursor:default}

  /* ---------- name ---------- */
  h1{
    font-family:monospace;font-size:clamp(1.4rem,6vw,2.6rem);
    margin:1.5rem 0 .25rem;letter-spacing:.12em;color:var(--cyan);
    text-shadow:0 0 12px rgba(0,255,255,.5);
  }
  .tagline{color:var(--pink);font-weight:bold;margin:0 0 1.25rem;font-size:1.05rem}

  /* ---------- rainbow rule ---------- */
  .rule{
    height:6px;border:0;margin:1.5rem 0;border-radius:3px;
    background:linear-gradient(90deg,#ff0040,#ff8c00,#ffff00,#00ff00,#00ffff,#4060ff,#ff66ff);
  }

  /* ---------- content panels ---------- */
  .panel{
    background:var(--panel);border:3px outset var(--bevel-hi);
    padding:1rem 1.25rem;margin:1.25rem 0;text-align:left;
  }
  .credit{border-color:var(--pink);background:#1a0d2e}
  .credit h2{color:var(--pink)}
  /* Easter egg: hidden unless you are actually in Netscape. See the script at the foot. */
  .egg{display:none;border-color:var(--lime);background:#04240a}
  .egg h2{color:var(--lime)}
  .panel h2{
    margin:0 0 .6rem;font-size:1.15rem;color:var(--gold);
    font-family:monospace;letter-spacing:.06em;text-align:center;
  }
  .panel p{margin:0 0 .8rem}
  .panel p:last-child{margin:0}

  /* ---------- the link menu ---------- */
  .menu{list-style:none;margin:0;padding:0}
  .menu li{margin:0 0 .5rem}
  .menu a,.menu span.dead{
    display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;
    background:#000;border:3px outset var(--bevel-hi);
    padding:.7rem .9rem;text-decoration:none;
    font-family:monospace;font-size:1rem;font-weight:bold;
  }
  .menu a:hover,.menu a:focus-visible{border-style:inset;background:#1a1a4d}
  .menu a:active{border-style:inset}
  .menu .arrow{color:var(--lime)}
  /* text-align:left is load-bearing. The label is a flex child sizing to the space
     between the arrow and the right-hand element - and that space differs per row,
     because "GO" is narrow and "UNDER CONSTRUCTION" is wide. Centred text therefore
     landed at a different x on every row. Left-aligning anchors them all to the same
     edge regardless of what sits on the right, now or later. */
  .menu .label{flex:1;min-width:12ch;color:var(--cyan);text-align:left}
  .menu a:hover .label{color:var(--gold)}
  .menu .go{color:var(--gold)}
  .menu span.dead{cursor:default}
  .menu span.dead .label{color:#9a9ac8}
  .menu .soon{
    color:#000;background:var(--gold);padding:.1rem .45rem;
    border-radius:3px;font-size:.72rem;letter-spacing:.06em;
  }

  /* ---------- under construction ---------- */
  .construction{
    margin:1.5rem 0;padding:.85rem;border:3px dashed var(--gold);background:#241a00;
  }
  .barricade{
    height:18px;margin:.5rem 0;border:2px solid #000;border-radius:2px;
    background-image:repeating-linear-gradient(45deg,#ffcc00 0 14px,#221a00 14px 28px);
    background-size:39.6px 39.6px;
    animation:crawl 1.6s linear infinite;
  }
  @keyframes crawl{from{background-position:0 0}to{background-position:39.6px 0}}
  .construction p{margin:0;font-family:monospace;font-size:.9rem;color:var(--gold)}

  /* ---------- visitor counter ---------- */
  .counter{margin:1.5rem 0;font-family:monospace;font-size:.85rem;color:var(--lime)}
  /* Label above the readout, not beside it — it reads like the label on a real
     meter, and it stopped a wide caption wrapping around the number on a phone.

     ⚑ The label is doing HONESTY work, not just layout. This counter is
     localStorage: it counts this browser's loads of this page and nothing
     leaves the machine. "You are visitor number N" is exactly how a 1998 site
     phrased a REAL global counter, so readers reasonably concluded it was one
     — Caolan's friends loved it and none of them understood it was only them.
     The truth was in small print and a hover tooltip, and hover does not exist
     on a phone. "Times you've visited" puts it in the loud text instead, which
     is why the parenthetical below could go entirely. Do not reword this back
     into visitor-counter phrasing; the wording IS the disclosure. */
  .counter .clabel{display:block}
  .counter .odometer{margin:.4rem 0}
  .odometer{
    display:inline-block;background:#000;border:3px inset #666;
    padding:.3rem .5rem;margin:0 .35rem;letter-spacing:.28em;
    font-size:1.25rem;color:var(--lime);text-shadow:0 0 6px var(--lime);
  }

  /* ---------- footer ---------- */
  footer{margin-top:2rem;font-family:monospace;font-size:.82rem;color:#a8a8d8;line-height:1.9}
  footer a{color:var(--pink)}
  .badges{margin:1rem 0;display:flex;gap:.5rem;justify-content:center;flex-wrap:wrap}
  .badge{
    border:2px outset var(--bevel-hi);background:#000;color:var(--cyan);
    padding:.3rem .55rem;font-family:monospace;font-size:.72rem;letter-spacing:.04em;
  }

  /* ---------- accessibility: the whole costume comes off ---------- */
  @media (prefers-reduced-motion:reduce){
    .marquee p{animation:none;padding-left:0;white-space:normal;display:block;text-align:center}
    .barricade{animation:none}
    .welcome .deco .sparkle{animation:none;color:var(--cyan)}
    *{transition:none !important}
  }

  @media print{
    body{background:#fff;color:#000}
    .marquee,.construction,.counter,.badges,.navbar{display:none}
    a{color:#000}
  }