/* =====================================================================
   DJ SLIM DICK :: OFFICIAL WEB SITE
   style.css -- written in notepad, 4am, one hand
   DO NOT CLEAN THIS UP. THE UGLINESS IS THE ART DIRECTION.
   ===================================================================== */

:root {
  --lime: #00ff00;
  --magenta: #ff00ff;
  --cyan: #00ffff;
  --gold: #ffd700;
  --black: #000000;
  --ink: #f0f0f0;
  --dim: #b5b5b5;
  --star: url("assets/starfield.gif");
  --maxw: 780px;

  /* ------------------------------------------------------------------
     FONTS -- "modern 2003"

     Rule: a condensed display face is only legible when it is BIG. So
     --font-display is reserved for headings above ~20px. Everything smaller
     (labels, table headers, captions, form labels) uses --font-body at a
     heavy weight, which reads as emphatic without turning to mush.

     --font-mono leads with screen-legible monos and keeps Courier LAST as a
     period-correct fallback. It is for data only: durations, digits, the
     fake terminal, the "01 //" counters, and inline <code>.
     ------------------------------------------------------------------ */
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
               Arial, "Liberation Sans", sans-serif;
  --font-display: Impact, Haettenschweiler, "Arial Black", "Arial Narrow Bold",
                  "Liberation Sans Narrow", sans-serif;
  --font-mono: "Cascadia Mono", Consolas, "DejaVu Sans Mono", "Liberation Mono",
               Menlo, "Courier New", Courier, monospace;
  /* short decorative serif accents only -- never for UI, never for small text */
  --font-serif: "Bookman Old Style", Georgia, "DejaVu Serif", "Liberation Serif",
                "Times New Roman", serif;
}

/* ---------- the whole cursed page ------------------------------- */
body {
  margin: 0;
  padding: 0 0 60px 0;
  background-color: var(--black);
  background-image: var(--star);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
}

/* the old-school hit counter strip, always on top.
   display face is fine here: it is all-caps with wide tracking, which is
   exactly the case Impact survives. */
marquee {
  background: #12002a;
  color: var(--lime);
  font-family: var(--font-display);
  font-size: 16px;
  letter-spacing: 1px;
  padding: 4px 0;
  border-top: 2px solid var(--magenta);
  border-bottom: 2px solid var(--magenta);
  display: block;
}

/* ---------- the main column ------------------------------------- */
.wrap {
  max-width: var(--maxw);
  margin: 12px auto;
  padding: 14px 18px 26px 18px;
  background: rgba(0, 0, 0, 0.88);
  border: 3px ridge var(--magenta);
  box-shadow: 0 0 26px rgba(255, 0, 255, 0.35);
}

/* ---------- section headings: the spine of the page -------------- */
/* sections are numbered in the html; this is what makes the page
   scannable instead of an undifferentiated pile of boxes */
/* 24px is the smallest size the display face is allowed to appear at.
   letter-spacing is doing a lot of work here to keep Impact open. */
.section-head {
  font-family: var(--font-display);
  font-size: 26px;
  letter-spacing: 3.5px;
  color: var(--cyan);
  margin: 0 0 10px 0;
  padding: 0 0 5px 0;
  border-bottom: 2px solid var(--magenta);
  text-shadow: 2px 2px 0 #000;
}

.section-head::before {
  content: "0" counter(section) " // ";
  color: var(--magenta);
  font-family: var(--font-mono);
  font-size: 18px;
  /* mono on a dark bg at large size is fine, but give it a floor */
  opacity: 0.95;
}

.wrap { counter-reset: section; }
section { counter-increment: section; }

/* ---------- headings: loud, but never illegible ---------------- */
/* NOTE: the gradient only contains high-luminance hues. an earlier version had
   #0040ff in it, which is invisible against a black background. */
.rainbow {
  font-family: var(--font-display);
  font-size: 38px;
  letter-spacing: 2px;
  margin: 10px 0;
  background: linear-gradient(90deg,
      #ff2b2b, #ff8c00, #ffe600, #39ff14, #3ad0ff, #00ffff, #ff00ff, #ff2b2b);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: hue 9s linear infinite;
  text-align: center;
  /* drop-shadow paints behind the transparent glyphs and buys back the contrast
     that background-clip throws away */
  filter: drop-shadow(0 2px 0 #000) drop-shadow(0 0 6px rgba(0, 0, 0, 0.9));
}

/* if the browser can't do gradient text, fall back to screaming lime */
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .rainbow { color: var(--lime); -webkit-text-fill-color: var(--lime); filter: none; }
}

.title {
  font-family: var(--font-display);
  font-size: 58px;
  letter-spacing: 3px;
  margin: 6px 0 2px 0;
  color: var(--gold);
  text-shadow: 3px 3px 0 var(--magenta), -2px -2px 0 var(--cyan);
  animation: jitter 0.34s steps(2) infinite;
}

/* this is a sentence, not a terminal readout -- it gets the body face.
   an earlier sed had this in Courier, which is why it was so hard to read. */
.sub-title {
  font-family: var(--font-body);
  font-weight: bold;
  font-size: 17px;
  color: var(--gold);
  text-decoration: underline;
  text-decoration-style: wavy;
  text-underline-offset: 3px;
  margin: 0 0 12px 0;
}

.blink { animation: blink 1s steps(1) infinite; }
.blink-lime { color: var(--lime); animation: blink 1.1s steps(1) infinite; }
.blink-cyan { color: var(--cyan); animation: blink 0.9s steps(1) infinite; }
.blink-magenta { color: var(--magenta); animation: blink 1.3s steps(1) infinite; }

@keyframes blink { 50% { opacity: 0; } }
@keyframes hue { to { background-position: 300% 0; } }
@keyframes jitter {
  0% { transform: translate(0, 0); }
  50% { transform: translate(1.5px, -1.5px); }
  100% { transform: translate(-1.5px, 1px); }
}

/* ---------- the nav: chunky buttons that wrap, never overflow ---- */
#nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  padding: 7px;
  margin: 0 0 12px 0;
  background: #1a0033;
  border: 2px outset var(--cyan);
}

#nav .nav-logo {
  height: 34px;
  width: auto;
  margin-right: 6px;
  border: 2px solid var(--magenta);
}

.bevel-btn,
#nav a.bevel-btn {
  /* 15px is too small for a condensed face. heavy body weight + tracking
     reads just as emphatic and stays legible. */
  display: inline-block;
  padding: 7px 12px;
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 15px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: #fff;
  text-decoration: none;
  background: linear-gradient(#5a5a5a, #232323 55%, #3a3a3a);
  border: 2px outset #b9b9b9;
  text-shadow: 1px 1px 0 #000;
  cursor: pointer;
}

.bevel-btn:hover {
  background: linear-gradient(var(--magenta), #5a005a 60%, #7a007a);
  color: var(--lime);
}

.bevel-btn:active,
.bevel-btn:focus {
  border-style: inset;
  box-shadow: inset 2px 2px 0 #000;
}

/* the page you are already on */
#nav a.current {
  background: linear-gradient(var(--lime), #008000 60%, #00a000);
  color: #000;
  border-style: inset;
  text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.5);
}

/* ---------- content panels --------------------------------------- */
/* the inner content panel. NOTE: headings live in <section> as .section-head,
   not as an <h3> inside the box -- a box is a panel, not a section. */
.box {
  background: rgba(0, 0, 0, 0.7);
  border: 2px inset var(--cyan);
  padding: 12px 14px;
  margin: 10px 0;
  box-shadow: inset 0 0 18px rgba(0, 255, 255, 0.13);
}

/* only for boxes that are NOT inside a <section> (i.e. not numbered) */
.box > h3 {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 20px;
  color: var(--cyan);
  letter-spacing: 1.4px;
  text-transform: uppercase;
  margin: 0 0 8px 0;
  border-bottom: 1px dashed var(--cyan);
  padding-bottom: 3px;
}

/* a box nested in a numbered section should not shout a second heading */
section > .box > h3 {
  font-size: 15px;
  letter-spacing: 1px;
  color: var(--lime);
  border-bottom-color: var(--lime);
}

.divider {
  text-align: center;
  margin: 12px 0;
  line-height: 0;
}

.divider img { max-width: 100%; }

.stamp {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 24px;
  letter-spacing: 1.5px;
  color: #ff2b2b;
  border: 3px double #ff2b2b;
  padding: 2px 10px;
  transform: rotate(-11deg);
  animation: blink 1.6s steps(1) infinite;
}

/* ---------- fake-2003 table layout ------------------------------ */
.table-fake {
  width: 100%;
  border-collapse: collapse;
  margin: 10px 0;
  font-size: 14px;
}

.table-fake caption {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 14px;
  color: var(--gold);
  letter-spacing: 0.6px;
  text-align: left;
  padding-bottom: 4px;
}

.table-fake th {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--black);
  background: linear-gradient(var(--lime), #00a000);
  border: 1px outset #ddd;
  padding: 6px 8px;
  text-align: left;
}

.table-fake td {
  border: 1px inset #666;
  padding: 5px 7px;
  background: rgba(0, 0, 0, 0.55);
}

.table-fake tr:nth-child(even) td { background: rgba(40, 0, 40, 0.6); }
.table-fake tr:hover td { background: rgba(255, 0, 255, 0.18); }

/* ---------- mixtape tracklist ------------------------------------ */
.tracklist { width: 100%; border-collapse: collapse; margin: 10px 0; }
.tracklist td { padding: 6px 6px; border-bottom: 1px dotted #5a5a5a; font-size: 15px; }
.tracklist .trk-dur, .tracklist .trk-plays { font-size: 14px; }
.tracklist .trk-no { font-family: var(--font-body); font-weight: 800; color: var(--magenta); width: 26px; }
/* track titles are prose. durations and play counts are data, so they stay mono
   -- that is the one legitimate use of a monospaced face on this site. */
.tracklist .trk-name { font-family: var(--font-body); font-weight: bold; color: var(--lime); }
.tracklist .trk-dur { font-family: var(--font-mono); color: var(--gold); width: 58px; text-align: right; }
.tracklist .trk-plays { font-family: var(--font-mono); color: var(--cyan); width: 78px; text-align: right; }
.tracklist tr:hover td { background: rgba(0, 255, 0, 0.12); }

/* ---------- the visitor counter ---------------------------------- */
.counter {
  display: inline-block;
  margin: 12px 0;
  padding: 6px 12px;
  background: #000;
  border: 2px ridge var(--gold);
  font-family: var(--font-body);
  font-size: 14.5px;
  color: var(--gold);
  letter-spacing: 1px;
}

/* digits only -- this is the one place a monospaced face is correct,
   because the number must not shift width as it counts up */
.counter-digits {
  display: inline-block;
  padding: 1px 6px;
  background: #1a0000;
  border: 1px inset var(--gold);
  color: #00ff66;
  font-weight: bold;
  font-family: var(--font-mono);
  font-size: 17px;
}

/* ---------- audio: hide the ugly native player chrome ----------- */
.audio-bar {
  margin: 10px 0;
  padding: 8px;
  background: #1a0033;
  border: 2px outset var(--magenta);
}

.audio-bar audio { width: 100%; max-width: 460px; display: block; margin: 4px auto; }

.audio-bar .now-playing {
  font-family: var(--font-body);
  font-weight: bold;
  color: var(--lime);
  text-align: center;
  font-size: 15px;
  margin-top: 6px;
}

/* ---------- the entry splash ------------------------------------ */
#splash {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #000 url("assets/starfield.gif") repeat;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 20px;
}

#splash .splash-logo {
  max-width: 320px;
  width: 80%;
  margin-bottom: 18px;
  border: 3px solid var(--magenta);
  box-shadow: 0 0 30px var(--magenta);
}

#splash h1 {
  font-family: var(--font-display);
  font-size: 46px;
  letter-spacing: 4px;
  color: var(--gold);
  text-shadow: 4px 4px 0 var(--magenta), -3px -3px 0 var(--cyan);
  margin: 0 0 6px 0;
}

#splash p {
  color: var(--cyan);
  font-size: 13px;
  margin: 4px;
}

#splash button {
  font-family: var(--font-display);
  font-size: 30px;
  letter-spacing: 4px;
  padding: 14px 44px;
  margin: 18px 0 6px 0;
  color: var(--black);
  background: linear-gradient(var(--lime), #00a000);
  border: 4px outset #ddd;
  text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.4);
  cursor: pointer;
}

#splash button:hover {
  background: linear-gradient(var(--cyan), #008080);
  color: #000;
}

#splash button:active { border-style: inset; }

/* ---------- the loud call to action ----------------------------- */
.btn-ugly {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 26px;
  letter-spacing: 3px;
  text-decoration: none;
  color: #000;
  padding: 12px 26px;
  margin: 12px 0;
  background: linear-gradient(var(--gold), var(--magenta) 55%, var(--cyan));
  border: 4px ridge #fff;
  text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.45);
  box-shadow: 0 0 20px var(--magenta);
  /* never blink to fully invisible -- a CTA you cannot see is a broken CTA */
  animation: pulse 2.4s ease-in-out infinite;
}

.btn-ugly:hover {
  color: #fff;
  background: linear-gradient(var(--magenta), var(--lime) 55%, var(--gold));
}

.btn-ugly:active { transform: translateY(2px); }

@keyframes pulse {
  50% { filter: brightness(1.35); box-shadow: 0 0 30px var(--cyan); }
}

/* ---------- guestbook: fake forum posts -------------------------- */
.guestbook-entry {
  border: 1px dotted #6a6a6a;
  border-left: 4px solid var(--magenta);
  background: rgba(0, 0, 0, 0.6);
  padding: 8px 11px;
  margin: 9px 0;
  font-size: 14px;
}

/* The empty guestbook. Same box as a real entry so the page does not change
   shape when the first person signs, but dashed and dimmed to make clear
   nothing has been written yet. */
.guestbook-entry.gb-empty {
  border-style: dashed;
  border-left-style: dashed;
  border-left-color: var(--cyan);
  color: #b8b8b8;
  text-align: center;
  padding: 18px 14px;
}

.gb-empty-line {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
  margin: 5px 0;
  color: #b8b8b8;
}

.gb-empty-line:first-child {
  font-weight: 800;
  font-size: 19px;
  letter-spacing: 1.5px;
  color: var(--cyan);
  text-transform: uppercase;
  margin-bottom: 9px;
}

/* a byline is prose. mono only for the mood in brackets */
.guestbook-entry .gb-head {
  font-family: var(--font-body);
  font-size: 14.5px;
  color: var(--gold);
  border-bottom: 1px dotted #4a4a4a;
  padding-bottom: 4px;
  margin-bottom: 6px;
}

.guestbook-entry .gb-name { color: var(--magenta); font-weight: bold; }
.guestbook-entry .gb-mood { color: var(--lime); }
.guestbook-entry .gb-date { color: var(--dim); float: right; }
.guestbook-entry .gb-msg { color: var(--ink); white-space: pre-wrap; word-break: break-word; }

/* ---------- forms ------------------------------------------------ */
form label {
  display: block;
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--cyan);
  margin: 12px 0 4px 0;
}

/* form fields: the owner types real sentences into these. body face, readable
   size. The border/inset treatment is where the terminal flavour comes from. */
form input[type="text"],
form input[type="email"],
form input[type="date"],
form select,
form textarea {
  width: 100%;
  max-width: 460px;
  box-sizing: border-box;
  padding: 7px;
  background: #000;
  color: var(--lime);
  border: 2px inset var(--lime);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
}

form textarea { min-height: 82px; resize: vertical; }
form select option { background: #000; color: var(--lime); }

/* submit buttons. a <button> is styled explicitly because the UA default is
   much smaller than an <input type=submit> with the same font-size. */
form input[type="submit"],
form button[type="submit"] {
  margin-top: 12px;
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 19px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  line-height: 1.2;
  padding: 11px 24px;
  color: #000;
  background: linear-gradient(var(--lime), #00a000);
  border: 3px outset #ddd;
  cursor: pointer;
}

form input[type="submit"]:hover,
form button[type="submit"]:hover { background: linear-gradient(var(--cyan), #008080); }

form input[type="submit"]:active,
form button[type="submit"]:active { border-style: inset; }

/* a disabled submit must not look clickable, or the visitor presses it twice
   and wonders why nothing happened. */
form button[type="submit"]:disabled {
  cursor: progress;
  opacity: 0.6;
  background: linear-gradient(#555, #333);
  color: #999;
}

/* contact form outcome. three states, and they are not interchangeable: green
   means it was stored server-side, red means the visitor must fix their input,
   amber means it is only in their browser and never left it. */
#contact-thanks { margin-top: 10px; }

#contact-thanks p {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 17px;
  line-height: 1.5;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  padding: 10px 12px;
  border: 2px inset currentColor;
  margin: 0;
}

.contact-good { color: var(--lime); background: #041a04; }
.contact-bad  { color: #ff5555; background: #1a0404; }
.contact-warn { color: var(--amber, #ffb000); background: #1a1200; }

/* the honeypot must be invisible but still focusable-by-script only. it is
   positioned off-screen rather than display:none, because some bots skip
   display:none fields. */
#cf-website {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* ---------- links ------------------------------------------------ */
a { color: var(--cyan); }
a:hover { color: var(--magenta); }

a.external::after {
  content: " [ext]";
  font-size: 11px;
  color: var(--magenta);
}

.link-list { list-style: none; padding: 0; margin: 8px 0; }

.link-list li {
  padding: 4px 0;
  border-bottom: 1px dotted #4a4a4a;
}

.link-list img { vertical-align: middle; margin-right: 5px; }

/* These are the swap instructions -- the one piece of text on the site the owner
   is guaranteed to read. So: body face, not mono, generous size, high contrast.
   Only the inline `code` bits go mono, where it actually helps. */
.placeholder-note {
  font-size: 15px;
  line-height: 1.7;
  color: #c8c8c8;
  font-style: italic;
  font-family: var(--font-body);
}

.placeholder-note code {
  color: var(--lime);
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 14px;
}

/* ---------- footer ------------------------------------------------ */
/* The footer is running prose. Body face, one step up in size, generous
   line-height. Mono here was pure self-sabotage. */
footer {
  text-align: center;
  font-family: var(--font-body);
  font-size: 15px;
  color: #d0d0d0;
  margin-top: 22px;
  padding-top: 12px;
  border-top: 2px ridge var(--magenta);
  line-height: 1.85;
}

footer p { margin: 4px 0; }

footer a { color: var(--cyan); }

/* short decorative accent only */
footer .fancy {
  font-family: var(--font-serif);
  font-weight: bold;
  color: var(--magenta);
}

/* ---------- the cursor sparkle trail (pooled divs) --------------- */
.sparkle {
  position: fixed;
  top: 0;
  left: 0;
  width: 7px;
  height: 7px;
  pointer-events: none;
  z-index: 9000;
  border-radius: 50%;
  will-change: transform, opacity;
}

/* ===================================================================
   DEV-SIDE STYLES (added when this became a personal page)
   =================================================================== */

/* a fake terminal window */
.terminal {
  background: #020a02;
  border: 3px ridge #00aa00;
  box-shadow: inset 0 0 24px rgba(0, 255, 0, 0.16);
  padding: 10px 12px;
  margin: 12px 0;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.5;
  color: #00e000;
  white-space: pre-wrap;
  word-break: break-word;
}

.terminal .t-dim { color: #00a000; }
.terminal .t-hot { color: var(--lime); font-weight: bold; }
.terminal .t-warn { color: var(--gold); }
.terminal .t-bad { color: #ff5555; }
.terminal .t-cursor {
  display: inline-block;
  width: 8px;
  height: 14px;
  background: #00e000;
  vertical-align: -2px;
  animation: blink 1s steps(1) infinite;
}

/* the janky "skill" bar. percentages are opinions, not measurements. */
.skill-row {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 6px 0;
  font-size: 15px;
}

/* wide enough that "SQL (WITH TEARS)" and "SYSADMIN / LINUX" do not wrap onto
   two lines and throw the bars out of alignment */
.skill-row .skill-name {
  width: 168px;
  flex: 0 0 168px;
  font-family: var(--font-body);
  font-weight: bold;
  color: var(--cyan);
  white-space: nowrap;
}

.skill-bar {
  flex: 1 1 auto;
  height: 15px;
  background: #111;
  border: 2px inset #555;
  overflow: hidden;
  min-width: 40px;
}

.skill-bar span {
  display: block;
  height: 100%;
  background: repeating-linear-gradient(90deg,
      var(--lime) 0 6px, #008000 6px 9px);
  animation: slide 1.6s linear infinite;
}

.skill-row .skill-pct {
  width: 38px;
  flex: 0 0 38px;
  text-align: right;
  font-family: var(--font-mono);
  color: var(--gold);
}

@keyframes slide { to { background-position: 18px 0; } }

/* tool names are labels a human reads, not code */
.chip {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: bold;
  font-size: 14.5px;
  color: var(--lime);
  background: #001a00;
  border: 2px outset #0a5a0a;
  padding: 3px 9px;
  margin: 3px 4px 3px 0;
  text-decoration: none;
}

/* Only the real links get the hover flip. Most chips are <span> labels, and a
   hover state on something that cannot be clicked is a lie about the UI. */
a.chip:hover { background: var(--magenta); color: #fff; border-style: inset; }

/* A label chip still needs to not look like a broken link: no underline, and a
   cursor that does not promise a destination. */
span.chip { cursor: default; }

/* project cards */
.project {
  border: 2px inset var(--cyan);
  background: rgba(0, 0, 0, 0.7);
  padding: 11px 13px;
  margin: 11px 0;
}

.project h4 {
  font-family: var(--font-display);
  font-size: 22px;
  letter-spacing: 1px;
  color: var(--lime);
  margin: 0 0 5px 0;
}

.project p { margin: 5px 0; font-size: 15.5px; }

.project .proj-meta {
  font-family: var(--font-body);
  font-size: 14.5px;
  color: var(--dim);
  margin-top: 6px;
}

/* 13px is well under the floor for a condensed face */
.status {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  padding: 1px 8px;
  margin-left: 7px;
  border: 2px solid;
  vertical-align: middle;
}

.status-shipped { color: var(--lime); border-color: var(--lime); }
.status-wip { color: #ff8c00; border-color: #ff8c00; animation: wip-pulse 2.2s ease-in-out infinite; }
.status-abandoned { color: #999; border-color: #777; text-decoration: line-through; }

/* a status label must stay readable. pulse the colour, never the opacity. */
@keyframes wip-pulse {
  50% { color: #000; background: #ff8c00; }
}

/* the two-mode header: DEV vs MUSIC */
.modes {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 14px 0;
}

.modes .mode {
  flex: 1 1 260px;
  border: 3px ridge;
  padding: 12px;
  text-align: center;
  background: rgba(0, 0, 0, 0.75);
}

.modes .mode-dev { border-color: var(--cyan); }
.modes .mode-music { border-color: var(--magenta); }

.modes .mode h3 {
  font-family: var(--font-display);
  font-size: 30px;
  letter-spacing: 2px;
  margin: 0 0 4px 0;
  border: 0;
  padding: 0;
}

.modes .mode-dev h3 { color: var(--cyan); }
.modes .mode-music h3 { color: var(--magenta); }
.modes .mode p { font-size: 13px; margin: 6px 0 10px 0; }

/* little gifs used as inline icons */
.gifline { text-align: center; margin: 10px 0; }
.gifline img { vertical-align: middle; margin: 0 5px; }

.learned-list { margin: 6px 0; padding-left: 20px; font-size: 14px; }
.learned-list li { margin: 4px 0; }
.learned-list li::marker { color: var(--magenta); }

/* ---------- phones: ugly but usable ----------------------------- */
@media (max-width: 700px) {
  body { font-size: 14px; }
  .wrap { margin: 0; border-left: none; border-right: none; padding: 10px 12px 20px 12px; }
  .title { font-size: 38px; }
  .rainbow { font-size: 28px; }
  #nav { padding: 5px; }
  #nav a.bevel-btn { font-size: 13px; padding: 5px 8px; }
  #nav .nav-logo { display: none; }
  .btn-ugly { font-size: 19px; letter-spacing: 2px; }

  /* the tracklist has 5 columns; at 390px it must not push the page wide.
     drop the two numeric columns and let the title take the space. */
  .tracklist .trk-plays { display: none; }
  .tracklist .trk-dur { width: 46px; font-size: 13px; }
  .tracklist .trk-no { width: 22px; }
  .tracklist td { padding: 5px 3px; }
  /* "DOWNLOAD" is a word, not a number -- let it shrink instead of overflowing */
  .tracklist td:last-child a { font-size: 11.5px; }
  #splash h1 { font-size: 30px; }
  #splash button { font-size: 22px; padding: 11px 30px; }
  /* dev-side: these all need to survive a 390px screen */
  .modes .mode { flex: 1 1 100%; }
  /* narrow screens: allow wrapping again rather than truncating the label */
  .skill-row .skill-name { width: 104px; flex: 0 0 104px; font-size: 12px; white-space: normal; }
  .skill-row .skill-pct { width: 32px; flex: 0 0 32px; font-size: 12px; }
  .project h4 { font-size: 18px; }
  .terminal { font-size: 11.5px; padding: 8px; }
}

/* ---------- accessibility: the joke stays, the seizure stops ---- */
@media (prefers-reduced-motion: reduce) {
  .blink, .blink-lime, .blink-cyan, .blink-magenta,
  .stamp, .rainbow, .title, .status-wip,
  .terminal .t-cursor, .skill-bar span {
    animation: none !important;
  }
  .btn-ugly { animation: none !important; }
  .rainbow { -webkit-text-fill-color: var(--lime); color: var(--lime); }
  .terminal .t-cursor { background: var(--lime); }
  .status-wip { color: #ff8c00; }
  marquee { /* native marquee still animates; the script swaps it for a static div */ }
}

/* The guestbook honeypot. Positioned off-screen rather than hidden outright:
   display:none or visibility:hidden are skipped by some automated fillers, and
   a honeypot they can see through is not a honeypot. Off-screen keeps it in the
   layout tree where a bot will happily fill it in. */
#gb-website {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}