/* ==========================================================================
   geocities.css — the content layer. Maximum 1996.
   Blended from the user's six references:
     Mystical Realm (fractal tile + colored serif on texture)
     Dukem's / Kylie's (cyan sky palette, outlined WordArt headings, mascots)
     PrEttYnPuNK (magenta/lime, dither, collage)
     GameSpot / Pepsi World (chrome bevels, orange-red display type)
   System fonts only. No webfonts, no external requests.
   ========================================================================== */

.page {
  padding: 0;
  background-color: #d9f0ee;
  color: var(--ink);
  font-family: "Comic Sans MS", "Comic Sans", "Chalkboard SE", cursive, sans-serif;
  font-size: 15px;
  line-height: 1.55;
}

/* The tiled background lives on a dedicated layer so text can sit on top of an
   opaque panel — chaos, but the copy still survives contact with a recruiter.
   A scrim sits between the tile and the content: the texture still reads as a
   real GeoCities background, but it never competes with anything you have to
   actually read. Decorative GIFs are all flow elements (dividers, badges,
   icons); nothing is positioned on top of text anywhere on this site. */
.page-tile {
  position: relative;
  background-repeat: repeat;
  background-position: 0 0;
  padding: 14px;
}
.page-tile::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(214, 240, 238, .74);
  pointer-events: none;
}
.page-tile > * { position: relative; }

.slab {
  background: linear-gradient(160deg, #0b6a63 0%, #0a606d 100%);
  color: #f2fffc;
  border: 3px double var(--geo-seafoam);
  padding: 16px 18px;
  margin: 0 0 16px;
}
.slab-light { background: var(--geo-sand); color: var(--ink); border-color: var(--geo-palm); }
.slab-black { background: var(--sea-deep); color: var(--geo-sand-lt); border-color: var(--geo-yellow); }




/* --------------------------------------------------------------------------
   HEADINGS — outlined WordArt, straight off Kylie's Home-Dog Page
   -------------------------------------------------------------------------- */

.page h1, .page h2, .page h3, .page h4 {
  font-family: "Comic Sans MS", "Comic Sans", cursive, sans-serif;
  margin: 0 0 12px;
  line-height: 1.15;
}

/* The h1 is the most important text on any page and the one heading that sits
   directly on the tiled background, so it gets its own dark plate and never has
   to fight the texture, whatever tile is behind it. */
.page h1 {
  font-size: clamp(28px, 6vw, 46px);
  text-align: center;
  color: var(--geo-palm);
  letter-spacing: 1px;
  -webkit-text-stroke: 1.5px #000;
  paint-order: stroke fill;
  font-weight: 700;
  text-shadow: 3px 3px 0 var(--geo-yellow), 0 2px 3px rgba(20,66,74,.35);
  background: rgba(228, 248, 246, .90);
  border-top: 3px ridge var(--geo-palm);
  border-bottom: 3px ridge var(--geo-palm);
  padding: 12px 14px;
  margin-bottom: 16px;
}
.page h2 {
  font-size: clamp(21px, 3.6vw, 30px);
  color: #0e7a6b;
  text-shadow: 2px 2px 0 var(--geo-sand);
  border-bottom: 3px ridge var(--geo-lime);
  padding-bottom: 4px;
}
.page h3 {
  font-size: clamp(17px, 2.6vw, 21px);
  color: #14603a;
  font-weight: 700;
}
.page h4 { font-size: 16px; color: #b06a24; text-shadow: none; }

.slab-light h2 { color: #0a6b78; text-shadow: 1px 1px 0 #fff, 2px 2px 0 var(--geo-seafoam); }
.slab-light h3 { color: #0e5c49; text-shadow: none; }
.slab-light h4 { color: #0d6070; text-shadow: none; }

/* The animated rainbow the whole era ran on */
.rainbow {
  background-image: linear-gradient(90deg,
    #0d6f5f, #17864a, #3f8c25, #a8761f, #b0552a, #17864a, #0d6f5f);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: rainbow-slide 6s linear infinite;
}
@keyframes rainbow-slide { to { background-position: -200% 0; } }

.blink { animation: blink-step 1.1s steps(1) infinite; }
@keyframes blink-step { 50% { opacity: 0; } }

.glow { text-shadow: 0 0 6px currentColor, 0 0 14px currentColor, 1px 1px 0 #000; }

/* --------------------------------------------------------------------------
   TEXT + LINKS
   -------------------------------------------------------------------------- */

.page p { margin: 0 0 13px; }
.page a { color: #0a6f8c; text-decoration: underline; }
.page a:visited { color: #56807a; }
.page a:hover { color: var(--ink); background: var(--geo-yellow); }
.page a:focus-visible { outline: 2px dotted var(--geo-palm); outline-offset: 2px; }
.slab-light a { color: #0a5f8f; }
.slab-light a:visited { color: #17706b; }
.slab-light a:hover { color: #053d47; background: var(--geo-seafoam); }

.page ul, .page ol { margin: 0 0 14px; padding-left: 26px; }
.page li { margin-bottom: 5px; }

.page strong, .page b { color: #b06a24; }
.slab-light strong, .slab-light b { color: #0a6b78; }

.small-print { font-size: 12px; font-family: "Times New Roman", Times, serif; opacity: .9; }

/* --------------------------------------------------------------------------
   MARQUEE — CSS reimplementation. The real <marquee> is deprecated and does
   not respect prefers-reduced-motion; this does.
   -------------------------------------------------------------------------- */

.marquee {
  overflow: hidden;
  white-space: nowrap;
  background: var(--sea-deep);
  border-top: 3px ridge var(--geo-yellow);
  border-bottom: 3px ridge var(--geo-yellow);
  padding: 5px 0;
  margin: 0 0 14px;
}
.marquee > span {
  display: inline-block;
  padding-left: 100%;
  font-weight: 700;
  color: var(--geo-sand-lt);
  animation: marquee-scroll 26s linear infinite;
}
.marquee-reverse > span { animation-direction: reverse; }
@keyframes marquee-scroll { to { transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce) {
  .marquee { white-space: normal; }
  .marquee > span { padding-left: 0; animation: none; display: block; text-align: center; }
}

/* --------------------------------------------------------------------------
   DIVIDERS + BADGES + GIF FURNITURE
   -------------------------------------------------------------------------- */

.divider { display: block; margin: 16px auto; max-width: 100%; height: auto; image-rendering: pixelated; }
.hr-rainbow {
  height: 6px; border: 0; margin: 18px 0;
  background: linear-gradient(90deg,
    var(--geo-seafoam), var(--geo-cyan), var(--geo-lagoon), var(--geo-sand), var(--geo-lime));
}

.gif { image-rendering: pixelated; vertical-align: middle; }
.gif-row {
  display: flex; flex-wrap: wrap; gap: 8px;
  align-items: center; justify-content: center;
  margin: 12px 0;
}

.construction {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 10px;
  background: var(--geo-yellow);
  color: var(--ink);
  border: 4px ridge var(--geo-orange);
  padding: 10px 14px;
  margin: 16px 0;
  font-weight: 700;
  text-align: center;
}
.construction img { image-rendering: pixelated; }

.counter {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--sea-deep); color: var(--geo-yellow);
  font-family: "Courier New", Courier, monospace;
  font-weight: 700; font-size: 19px; letter-spacing: 4px;
  padding: 4px 10px;
  border: 3px inset #8fd4c4;
}

.award-shelf {
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: center;
  margin: 14px 0;
}

/* --------------------------------------------------------------------------
   TABLES — the only layout tool anyone trusted in 1996
   -------------------------------------------------------------------------- */

.geo-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 16px;
  background: var(--geo-sand);
  color: #06303a;
  font-family: "Times New Roman", Times, serif;
  font-size: 15px;
}
.geo-table caption {
  caption-side: top;
  font-family: "Comic Sans MS", cursive, sans-serif;
  font-weight: 700; font-size: 16px;
  color: var(--geo-palm);
  text-shadow: 1px 1px 0 var(--geo-shell);
  padding: 6px 0;
  text-align: left;
}
.geo-table th, .geo-table td {
  border: 2px ridge #999;
  padding: 7px 10px;
  text-align: left;
  vertical-align: top;
}
.geo-table th {
  background: var(--geo-palm); color: var(--geo-shell);
  font-family: "Comic Sans MS", cursive, sans-serif;
  letter-spacing: .5px;
}
.geo-table tbody tr:nth-child(odd)  { background: var(--geo-sand); }
.geo-table tbody tr:nth-child(even) { background: var(--geo-shell); }
.geo-table tbody tr:hover { background: var(--geo-seafoam); }
.geo-table .role { font-weight: 700; color: #14603a; white-space: nowrap; }
.geo-table .director { white-space: nowrap; }
.geo-table .tbd { color: #4a3c14; font-style: italic; }
.geo-table .feature-row td { background: #fdf0c9; }
.geo-table .feature-row td:first-child::before {
  content: "\2605 "; color: var(--geo-orange);
}
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* --------------------------------------------------------------------------
   CARDS / PANELS
   -------------------------------------------------------------------------- */

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
  margin: 0 0 16px;
}
.card {
  background: var(--geo-shell);
  color: var(--ink);
  border: 3px ridge var(--geo-lime);
  padding: 13px 15px;
}
.card h3 { color: #0e5c49; text-shadow: none; margin-bottom: 8px; }
.card p:last-child { margin-bottom: 0; }
.card a { color: #0a5f8f; }

.fieldset {
  border: 3px groove var(--geo-palm);
  padding: 12px 15px;
  margin: 0 0 16px;
}
.fieldset > .legend {
  font-family: "Comic Sans MS", cursive, sans-serif;
  font-weight: 700; color: var(--geo-shell);
  background: var(--geo-palm); padding: 2px 9px;
  display: inline-block; margin: -22px 0 8px;
  border: 2px outset #666;
}

.notice {
  border: 4px double var(--geo-palm);
  background: #eef8ec;
  color: var(--ink);
  padding: 12px 15px;
  margin: 0 0 16px;
  font-size: 14px;
}
.notice strong { color: #1f7a4d; }
.notice-warn { background: #fdf3dc; border-color: var(--geo-orange); }
.notice-warn strong { color: #a8600f; }

.placeholder-box {
  border: 4px dashed var(--geo-orange);
  background: repeating-linear-gradient(45deg,
    #fbf0d6 0 10px, #f4e6c4 10px 20px);
  color: #6b4c12;
  padding: 18px;
  margin: 0 0 16px;
  text-align: center;
}
.placeholder-box strong { color: #7d4708; display: block; margin-bottom: 6px; font-size: 17px; }

/* --------------------------------------------------------------------------
   NAVIGATION
   -------------------------------------------------------------------------- */

.navbar {
  display: flex; flex-wrap: wrap; gap: 4px; justify-content: center;
  background: var(--sea-deep); padding: 6px; margin: 0 0 14px;
  border-top: 3px ridge var(--geo-yellow);
  border-bottom: 3px ridge var(--geo-yellow);
}
.navbar a {
  display: inline-block;
  padding: 5px 12px;
  font-family: "Comic Sans MS", cursive, sans-serif;
  font-weight: 700; font-size: 13px;
  color: #000; text-decoration: none;
  background: linear-gradient(180deg, var(--geo-sand-lt), var(--geo-sand));
  color: var(--ink);
  border: 2px outset #d9c397;
}
.navbar a:hover { background: linear-gradient(180deg, var(--geo-yellow), var(--geo-orange)); color: var(--ink); }
.navbar a[aria-current="page"] {
  /* Both stops have to stay light enough for the dark label: the previous
     gradient bottomed out on palm green and dropped the text to 2.5:1. */
  background: linear-gradient(180deg, #b6f2cd, #5fd98c);
  color: #06301b;
  font-weight: 700;
  border-style: inset;
}

.breadcrumb {
  font-size: 12px; font-family: "Times New Roman", Times, serif;
  margin: 0 0 12px; color: var(--ink-soft);
}
.breadcrumb a { color: #0a6f8c; }
.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; }
.breadcrumb li + li::before { content: "\00bb"; margin-right: 6px; color: var(--geo-palm); }

.related-links {
  background: var(--geo-sand);
  border: 3px ridge var(--geo-palm);
  padding: 12px 15px;
  margin: 16px 0 0;
}
.related-links h2 { font-size: 19px; border: 0; }
.related-links ul { columns: 2; column-gap: 22px; }
@media (max-width: 560px) { .related-links ul { columns: 1; } }

/* --------------------------------------------------------------------------
   MEDIA — video slots and Pro Tools screenshots
   -------------------------------------------------------------------------- */

.video-slot {
  background: var(--sea-deep);
  border: 4px inset #8fd4c4;
  padding: 8px;
  margin: 0 0 14px;
}
.video-slot video { width: 100%; height: auto; display: block; background: #000; }
.video-caption {
  font-size: 12px; color: var(--geo-sand-lt); padding: 7px 2px 0;
  font-family: "Times New Roman", Times, serif;
}
.shot-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.shot-grid figure { margin: 0; background: var(--geo-shell); border: 3px ridge var(--geo-palm); padding: 6px; }
.shot-grid img { width: 100%; height: auto; display: block; image-rendering: auto; }
.shot-grid figcaption { font-size: 12px; color: var(--ink-soft); padding-top: 5px; font-family: "Times New Roman", serif; }

/* --------------------------------------------------------------------------
   PROFILE
   -------------------------------------------------------------------------- */

.profile {
  display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start;
  margin: 0 0 16px;
}
.profile-photo {
  flex: 0 0 auto;
  border: 5px ridge var(--geo-palm);
  background: var(--geo-shell);
  padding: 5px;
}
.profile-photo img { display: block; width: 185px; height: auto; image-rendering: auto; }
.profile-body { flex: 1 1 260px; min-width: 0; }

.stat-strip {
  display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px;
  list-style: none; padding: 0;
}
.stat-strip li {
  background: var(--sea-deep); border: 2px ridge var(--geo-yellow);
  color: var(--geo-sand-lt); padding: 7px 12px;
  font-family: "Courier New", monospace; font-size: 13px;
  margin: 0;
}
.stat-strip b { color: var(--geo-yellow); font-size: 18px; }

/* --------------------------------------------------------------------------
   FOOTER
   -------------------------------------------------------------------------- */

.site-footer {
  background: var(--sea-deep);
  border-top: 3px ridge var(--geo-yellow);
  padding: 14px 16px 18px;
  color: var(--geo-sand-lt);
  font-size: 12px;
  font-family: "Times New Roman", Times, serif;
  text-align: center;
}
.site-footer a { color: var(--geo-yellow); }
.site-footer nav ul {
  list-style: none; padding: 0; margin: 0 0 10px;
  display: flex; flex-wrap: wrap; gap: 6px 14px; justify-content: center;
}
.webring {
  border: 2px ridge #8fd4c4; display: inline-block;
  padding: 7px 12px; margin: 10px 0; background: var(--sea-ink);
}

@media (max-width: 700px) {
  .page { font-size: 14px; }
  .page-tile { padding: 10px; }
  .slab { padding: 12px; }
}

/* ==========================================================================
   SLAB OVERRIDES — must stay last in this file.
   These have the same specificity as the general .page rules above, so
   source order is what decides. Moving them earlier silently loses.
   ========================================================================== */
/* The main text box is a tropical blue-green, so everything inside it flips to
   light-on-dark. Cards and the sand panels stay dark-on-light for contrast. */
.slab { color: #f2fffc; }
.slab h2 { color: var(--geo-yellow); text-shadow: 2px 2px 0 rgba(8,58,62,.55); }
.slab h3 { color: var(--geo-seafoam); }
.slab h4 { color: var(--geo-sand); }
.slab p, .slab li { color: #eafffb; }
.slab a { color: #d6fbf3; }
.slab a:visited { color: #b4e8dd; }
.slab a:hover { color: var(--ink); background: var(--geo-yellow); }
.slab strong, .slab b { color: var(--geo-yellow); }
.slab .small-print { color: #cdefe8; }
/* ...but the sand and deep variants keep their own treatment. */
.slab-light, .slab-light p, .slab-light li { color: var(--ink); }
.slab-light a { color: #0a6f8c; }
.slab-light .small-print { color: var(--ink-soft); }
.slab-black, .slab-black p, .slab-black li { color: var(--geo-sand-lt); }

/* --------------------------------------------------------------------------
   VARIANT CORRECTIONS — must stay after the .slab block above.
   .slab-light and .slab-black also carry the .slab class, so they inherited
   the tropical light-on-dark treatment. On the sand variant that produced a
   yellow h2 at 1.14:1, which is why these are pinned back explicitly.
   -------------------------------------------------------------------------- */
.slab-light h2 { color: #0a5f6a; text-shadow: 1px 1px 0 var(--geo-shell); }
.slab-light h3 { color: #0e5c49; text-shadow: none; }
.slab-light h4 { color: #8a4e0c; text-shadow: none; }
.slab-light strong, .slab-light b { color: #0a5f6a; }
.slab-light a:hover { color: var(--ink); background: var(--geo-yellow); }

.slab-black h2 { color: var(--geo-yellow); }
.slab-black h3 { color: var(--geo-seafoam); }
.slab-black a { color: #b6f5e8; }
.slab-black strong, .slab-black b { color: var(--geo-yellow); }

/* The photo slot and every placeholder set their own ink; the slab's light
   small-print colour must not bleed into them. */
.placeholder-box .small-print,
.placeholder-box p { color: inherit; }
.construction, .construction * { color: var(--ink); }

/* --------------------------------------------------------------------------
   COLLABORATOR CREDIT (Brady Schaffer, boom operator)
   -------------------------------------------------------------------------- */
.collab {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  background: var(--geo-sand);
  color: var(--ink);
  border: 2px ridge var(--geo-palm);
  padding: 8px 10px;
  margin: 0 0 12px;
  font-size: 13px;
}
.collab-photo { flex: 0 0 auto; border: 2px ridge var(--geo-cyan); background: var(--geo-shell); padding: 3px; }
.collab-photo img { display: block; width: 75px; height: auto; }
.collab-body { flex: 1 1 220px; min-width: 0; }
.collab-body h3 { color: #14603a; margin-bottom: 4px; font-size: 15px; }
.collab-body p { margin-bottom: 5px; font-size: 13px; line-height: 1.4; }
.collab-body p:last-child { margin-bottom: 0; }

/* Contact details */
.contact-line { font-size: 16px; margin-bottom: 10px; }
.contact-email { word-break: break-all; }

/* --------------------------------------------------------------------------
   DECK LINK — one click through to a project's slides, so the project page
   itself stays short.
   -------------------------------------------------------------------------- */
.deck-link {
  display: flex; align-items: center; gap: 14px;
  background: var(--geo-sand);
  color: var(--ink) !important;
  border: 3px ridge var(--geo-palm);
  padding: 14px 16px;
  margin: 0 0 16px;
  text-decoration: none;
}
.deck-link:hover, .deck-link:focus-visible {
  background: var(--geo-yellow);
  outline: 2px solid var(--geo-palm);
}
.deck-icon { font-size: 30px; flex: 0 0 auto; line-height: 1; }
.deck-text { flex: 1 1 auto; min-width: 0; }
.deck-text strong {
  display: block; font-family: "Comic Sans MS", cursive, sans-serif;
  font-size: 18px; color: #14603a; text-decoration: underline;
}
.deck-note { display: block; font-size: 13px; color: var(--ink-soft); margin-top: 3px; }
.deck-go { font-size: 26px; color: var(--geo-palm); flex: 0 0 auto; }
@media (max-width: 560px) { .deck-link { gap: 10px; padding: 12px; } .deck-icon { font-size: 24px; } }

/* Audio-only projects */
.audio-slot {
  background: var(--sea-deep);
  border: 4px inset #8fd4c4;
  padding: 12px;
  margin: 0 0 14px;
}
.audio-slot audio { width: 100%; display: block; }
.audio-caption {
  font-size: 12px; color: var(--geo-sand-lt); padding-top: 8px; margin: 0;
  font-family: "Times New Roman", Times, serif;
}