/* =====================================================================
   YGD — black & gold grunge Y2K theme
   Modeled on the reference profile: near-black background, mustard-gold
   highlighter headers, typewriter type, hand-drawn stars, splatter,
   skull, safety pin and halftone dots.
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Special+Elite&family=Satisfy&family=VT323&family=Oswald:wght@600;700&display=swap');

:root {
  --bg:        #0b0b09;
  --panel:     #050504;
  --ink:       #ece7d6;   /* off-white text            */
  --dim:       #9c9684;   /* muted grey text           */
  --gold:      #d8c84a;   /* highlighter / accents      */
  --gold-2:    #b7a53c;   /* darker gold                */
  --gold-splat:#e2d43a;
  --border:    #d8d3c2;   /* thin off-white panel edge  */
  --border-dim:#6f6a5b;
  --hot:       #e7d94a;
  --mono: "Special Elite", "Courier New", monospace;
  --script: "Satisfy", cursive;
  --display: "Oswald", "Arial Narrow", sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 16px;
  line-height: 1.5;
  /* grungy black canvas */
  background-image:
    radial-gradient(circle at 12% 8%,  rgba(216,200,74,.06), transparent 30%),
    radial-gradient(circle at 90% 92%, rgba(216,200,74,.05), transparent 30%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E");
  background-attachment: fixed;
}

a { color: var(--gold); text-decoration: none; }
a:hover { color: #fff; text-decoration: underline; }
img { image-rendering: auto; max-width: 100%; }

html, body { overflow-x: hidden; }
.page { max-width: 1900px; margin: 0 auto; padding: 0 clamp(18px, 3.2vw, 68px) 40px; }

/* latest-blog block on the home page */
.latest-wrap { position: relative; z-index: 2; margin-top: 18px; }
.latest-head { display: flex; align-items: center; gap: 10px; margin: 0 0 6px; }
.latest-head .mk { margin: 0; font-size: 19px; }
.viewmore {
  display: inline-block; margin: 12px auto 0;
  font-family: var(--display); font-weight: 700; font-size: 18px;
  color: #12110a; background: var(--gold); border: 1px solid #000;
  border-radius: 6px; padding: 8px 22px; box-shadow: 3px 3px 0 rgba(0,0,0,.6);
  transform: rotate(-.6deg);
}
.viewmore:hover { background: #fff; text-decoration: none; }
.latest-empty { color: var(--dim); }

/* ---------- grunge decorations (reusable) ---------- */
.splatter {
  position: absolute; pointer-events: none; z-index: 0;
  background-repeat: no-repeat; background-size: contain;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cdefs%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.045' numOctaves='2' seed='7'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.88 0 0 0 0 0.80 0 0 0 0 0.20 0 0 0 14 -6'/%3E%3C/filter%3E%3C/defs%3E%3Crect width='300' height='300' filter='url(%23f)'/%3E%3C/svg%3E");
  opacity: .85;
}
.halftone {
  position: absolute; pointer-events: none; z-index: 0;
  background-image: radial-gradient(var(--gold) 22%, transparent 24%);
  background-size: 11px 11px;
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000, transparent 70%);
          mask-image: radial-gradient(circle at 50% 50%, #000, transparent 70%);
  opacity: .8;
}
.doodle { position: absolute; z-index: 2; pointer-events: none; }
.doodle svg { display: block; }

/* ---------- inline icon system (drawn line-art masks — no emoji) ---------- */
.ico {
  display: inline-block; width: 13px; height: 13px;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
  vertical-align: -2px; margin-right: 5px;
}
.ico-clock  { -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9' fill='none' stroke='%23fff' stroke-width='2'/%3E%3Cpath d='M12 7v5l4 2' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
              mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9' fill='none' stroke='%23fff' stroke-width='2'/%3E%3Cpath d='M12 7v5l4 2' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); }
.ico-lock   { -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 10V7a5 5 0 0 1 10 0v3' fill='none' stroke='%23fff' stroke-width='2'/%3E%3Crect x='5' y='10' width='14' height='10' rx='2' fill='%23fff'/%3E%3C/svg%3E");
              mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 10V7a5 5 0 0 1 10 0v3' fill='none' stroke='%23fff' stroke-width='2'/%3E%3Crect x='5' y='10' width='14' height='10' rx='2' fill='%23fff'/%3E%3C/svg%3E"); }
.ico-pin    { -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='7' r='5' fill='%23fff'/%3E%3Crect x='11' y='11' width='2' height='10' fill='%23fff'/%3E%3C/svg%3E");
              mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='7' r='5' fill='%23fff'/%3E%3Crect x='11' y='11' width='2' height='10' fill='%23fff'/%3E%3C/svg%3E"); }
.ico-pencil { -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 20l1-5L16 4l4 4L9 19l-5 1z' fill='%23fff'/%3E%3C/svg%3E");
              mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 20l1-5L16 4l4 4L9 19l-5 1z' fill='%23fff'/%3E%3C/svg%3E"); }
.ico-upload { -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3l5 5h-3v7h-4v-7H7z' fill='%23fff'/%3E%3Crect x='4' y='18' width='16' height='2' fill='%23fff'/%3E%3C/svg%3E");
              mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3l5 5h-3v7h-4v-7H7z' fill='%23fff'/%3E%3Crect x='4' y='18' width='16' height='2' fill='%23fff'/%3E%3C/svg%3E"); }

/* dynamic-content icons (used as ::before so JS templates stay text-only) */
.blog-entry .meta-time::before {
  content: ""; display: inline-block; width: 12px; height: 12px;
  margin-right: 5px; vertical-align: -1px;
  background-color: #12110a;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9' fill='none' stroke='%23fff' stroke-width='2'/%3E%3Cpath d='M12 7v5l4 2' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
              mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9' fill='none' stroke='%23fff' stroke-width='2'/%3E%3Cpath d='M12 7v5l4 2' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}
.entry-head::before {
  content: ""; display: inline-block; width: 12px; height: 12px;
  margin-right: 6px; vertical-align: -1px;
  background-color: #fff;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 20l1-5L16 4l4 4L9 19l-5 1z' fill='%23fff'/%3E%3C/svg%3E");
              mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 20l1-5L16 4l4 4L9 19l-5 1z' fill='%23fff'/%3E%3C/svg%3E");
}

/* barbed-wire grunge divider */
.wire-divider {
  position: relative; z-index: 2;
  height: 18px; margin: 20px 0 6px; opacity: .6;
  background-repeat: repeat-x; background-position: center;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='18'%3E%3Cline x1='0' y1='9' x2='40' y2='9' stroke='%23554f3d' stroke-width='2'/%3E%3Cg stroke='%23d8c84a' stroke-width='2'%3E%3Cline x1='8' y1='2' x2='14' y2='16'/%3E%3Cline x1='14' y1='2' x2='8' y2='16'/%3E%3Cline x1='28' y1='2' x2='34' y2='16'/%3E%3Cline x1='34' y1='2' x2='28' y2='16'/%3E%3C/g%3E%3C/svg%3E");
}

/* ---------- top brand bar ---------- */
.topbar {
  position: relative; z-index: 3;
  display: flex; align-items: flex-start; gap: 14px;
  padding: 10px 6px 12px;
  border-bottom: 2px solid #1c1c18;
}
.brand-left { display: flex; align-items: center; gap: 10px; }
.brand-name {
  font-family: var(--display);
  font-weight: 700; font-size: 42px; line-height: .9;
  color: #fff; letter-spacing: -1px;
}
.ygd-text {
  display: inline-block;
  filter: url(#distress);
  transform: skewX(-2deg);
  text-shadow:
    2px 2px 0 rgba(0,0,0,.65),
    -2px 0 0 rgba(216,200,74,.5),
    0 0 16px rgba(216,200,74,.3);
}
.brand-name small {
  display: block; font-family: var(--display); font-weight: 600;
  font-size: 17px; color: #cfcabb; letter-spacing: 0;
}
.brand-right { margin-left: auto; text-align: right; position: relative; padding-right: 30px; }
.handle-script { font-family: var(--script); font-size: 36px; color: var(--gold);
  text-shadow: 0 1px 0 #000, 0 0 12px rgba(216,200,74,.35); line-height: 1; }
.online { display: block; color: #fff; font-family: var(--mono); font-size: 16px; margin-top: 2px; }
.brand-right .star-top { position: absolute; right: -4px; top: -6px; }

/* ---------- nav ---------- */
.nav {
  position: relative; z-index: 3;
  display: flex; align-items: stretch; gap: 0;
  background: linear-gradient(180deg, #e6e6e6, #b9b9b9 45%, #8f8f8f);
  border-top: 1px solid #fff; border-bottom: 1px solid #4a4a4a;
  box-shadow: 0 2px 6px rgba(0,0,0,.6);
  margin-bottom: 12px;
}
.nav a {
  padding: 8px 26px;
  color: #1a1a1a; font-family: var(--display); font-weight: 600;
  font-size: 17px; letter-spacing: .3px;
  border-right: 1px solid rgba(0,0,0,.25);
  box-shadow: inset -1px 0 0 rgba(255,255,255,.5);
}
.nav a:hover { background: #111; color: var(--gold); text-decoration: none; }
.nav a.active { background: #111; color: var(--gold); }
.nav .search {
  position: relative;
  margin-left: auto; display: flex; align-items: center; gap: 4px;
  padding: 0 10px; border-left: 1px solid rgba(0,0,0,.25);
}
.nav .search input {
  background: #111; color: var(--gold); border: 1px solid #000;
  font-family: var(--mono); font-size: 16px; padding: 4px 8px; width: 190px;
}
.nav .search button {
  font-family: var(--display); font-weight: 600; cursor: pointer;
  background: #111; color: var(--gold); border: 1px solid #000; padding: 4px 10px;
  font-size: 15px;
}
@media (max-width: 560px) {
  .nav { flex-wrap: wrap; }
  .nav .search {
    flex: 1 1 100%; margin-left: 0; border-left: none;
    border-top: 1px solid rgba(0,0,0,.25); padding: 6px 8px;
  }
  .nav .search input { flex: 1 1 auto; width: auto; min-width: 0; }
}

/* live search-as-you-type dropdown */
.search-dropdown {
  position: absolute; top: calc(100% + 6px); right: 10px; z-index: 20;
  width: 320px; max-width: 80vw;
  background: var(--panel); border: 1px solid var(--border-dim);
  border-radius: 8px; box-shadow: 0 8px 20px rgba(0,0,0,.7);
  overflow: hidden;
}
.search-dropdown a {
  display: block; padding: 8px 12px; text-decoration: none;
  border-bottom: 1px solid #24241f; color: var(--ink);
}
.search-dropdown a:last-child { border-bottom: none; }
.search-dropdown a:hover { background: #17170f; text-decoration: none; }
.search-dropdown .sd-title { display: block; color: var(--gold); font-weight: 700; }
.search-dropdown .sd-time { display: block; font-size: 12px; color: var(--dim); }
.search-dropdown .sd-snip { display: block; font-size: 13px; color: var(--dim); margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.search-dropdown .sd-empty { padding: 10px 12px; color: var(--dim); font-size: 13px; }

/* ---------- generic panel (dark, rounded, thin edge) ---------- */
.panel {
  position: relative; z-index: 2;
  background: var(--panel);
  border: 1px solid var(--border-dim);
  border-radius: 12px;
  box-shadow: 0 0 0 1px rgba(0,0,0,.6), 0 6px 18px rgba(0,0,0,.5);
  margin-bottom: 14px;
  overflow: hidden;
}
.panel > .head {
  font-family: var(--display); font-weight: 700; letter-spacing: .5px;
  color: #fff; padding: 9px 14px; font-size: 18px;
  border-bottom: 1px solid #24241f;
  background: linear-gradient(180deg, #17170f, #0c0c08);
}
.panel > .body { padding: 14px; }

/* gold highlighter marker header (like the "About Me" swipe) */
.mk {
  display: inline-block; position: relative;
  font-family: var(--mono); font-weight: 700; font-size: 18px;
  color: #12110a; padding: 2px 12px; margin: 2px 0 6px;
  background: var(--gold);
  transform: rotate(-1.2deg);
  box-shadow: 2px 2px 0 rgba(0,0,0,.5);
  clip-path: polygon(2% 8%, 99% 0, 98% 92%, 1% 100%);
}

/* ---------- home layout ---------- */
/* photo + info stay on the SAME ROW at every width (incl. phones),
   and the photo stretches to match the info panel's height. */
.home-cols {
  position: relative;
  display: grid; grid-template-columns: 1fr 2fr; gap: 14px;
  align-items: stretch;
}
.pcol > .panel { height: 100%; margin-bottom: 0; }
@media (max-width: 560px){
  body { font-size: 13px; }
  .home-cols { grid-template-columns: 46% 1fr; gap: 8px; }
  .mk { font-size: 14px; }
  .pcol .head-name { font-size: 17px; }
  .flags { font-size: 22px; gap: 6px; }
}

/* left profile column */
.pcol .head-name { font-family: var(--mono); font-weight: 700; font-size: 25px; color: var(--ink); margin: 0 0 8px; }
.pquote { color: var(--ink); font-style: normal; margin: 0 0 10px; }
.pquote .q { color: var(--gold); }
.plist { list-style: none; margin: 0 0 6px; padding: 0; }
.plist li { padding: 3px 0; color: var(--ink); }
.plist li::before { content: "\00B7  "; color: var(--gold); }
.plist .gstar { color: var(--gold); }

.psec { margin-top: 18px; }
.about-txt { color: var(--ink); margin: 6px 0 0; }
.ilist { list-style: none; margin: 6px 0 0; padding: 0; position: relative; }
.ilist li { color: var(--ink); padding: 3px 0; }
.ilist li::before { content: "+ "; color: var(--gold); font-weight: 700; }
.ilist .goated { color: var(--gold); }
.big-star { position: absolute; right: 4px; top: -6px; }
.socials { list-style: none; margin: 6px 0 0; padding: 0; color: var(--ink); }
.socials li { padding: 3px 0; }
.socials .k { color: var(--gold); }
.socials a { color: var(--ink); }
.socials a:hover { color: var(--gold); }
.flags { margin-top: 10px; font-size: 28px; letter-spacing: 6px; }

/* main / photo area — square Y2K polaroid frame, with the rest of the
   (info-panel-matched) column height filled by scattered grunge doodles */
.pmain { position: relative; min-height: 560px; }
.photo-wrap {
  --cream-h: 46px; /* height of the polaroid's bottom cream strip */
  position: relative; z-index: 2;
  width: 98%; max-width: 900px;
  aspect-ratio: 5 / 4;
  margin: 26px auto 0;
  transform: rotate(-1.6deg);
}
@media (max-width: 560px){ .photo-wrap { --cream-h: 30px; aspect-ratio: 1 / 1.3; } }
.photo-frame {
  display: block;
  position: relative; height: 100%;
  padding: 16px 16px var(--cream-h);
  background: #f2efe2;
  box-shadow: 0 10px 26px rgba(0,0,0,.7);
  /* torn / distressed edge (viewBox matches the frame's 5:4 aspect) */
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='500' height='400'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.012' numOctaves='3' seed='4' result='n'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='n' scale='10'/%3E%3C/filter%3E%3Crect x='6' y='6' width='488' height='388' fill='%23fff' filter='url(%23r)'/%3E%3C/svg%3E");
  -webkit-mask-size: 100% 100%;
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='500' height='400'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.012' numOctaves='3' seed='4' result='n'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='n' scale='10'/%3E%3C/filter%3E%3Crect x='6' y='6' width='488' height='388' fill='%23fff' filter='url(%23r)'/%3E%3C/svg%3E");
          mask-size: 100% 100%;
}
.photo-frame .pic {
  display: block;
  position: relative; width: 100%; height: 100%; overflow: hidden;
  border: 1px solid rgba(0,0,0,.25);
}
.photo-frame img {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 22%;
  filter: contrast(1.06) saturate(.92) brightness(1.02);
}
.photo-frame .pic::after { /* grain over photo */
  content:""; position:absolute; inset:0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.12'/%3E%3C/svg%3E");
  mix-blend-mode: overlay; pointer-events:none;
}
/* sits as a sibling of .photo-frame (not inside its mask) so the torn
   edge never clips the caption text */
.polaroid-caption {
  position: absolute; left: 0; right: 0; bottom: calc(var(--cream-h) * .28); z-index: 3;
  text-align: center; pointer-events: none;
  font-family: var(--script); font-size: 22px; color: #2a2a26;
}
@media (max-width: 560px){ .polaroid-caption { font-size: 14px; } }
.tape {
  position: absolute; z-index: 3; width: 92px; height: 26px;
  background: rgba(226,212,120,.32);
  border: 1px dashed rgba(0,0,0,.25);
  box-shadow: 0 2px 5px rgba(0,0,0,.4);
}
.tape.tl { top: -10px; left: 24px; transform: rotate(-16deg); }
.tape.br { bottom: 30px; right: -14px; transform: rotate(74deg); }

/* "Not your average." + the player both overlay the photo itself,
   anchored to .photo-wrap (not the taller info-matched column). The
   player sits a fixed gap above the cream strip (var(--cream-h)) so it
   never collides with the polaroid caption at any screen size; "Not
   your average." stacks above the player and is dropped on very short
   (mobile) photos where there's no room for all three. */
.not-avg {
  position: absolute; left: 50%; bottom: calc(var(--cream-h) + 44px); z-index: 4;
  font-family: var(--script); font-size: 32px; color: var(--gold);
  text-shadow: 0 2px 8px rgba(0,0,0,.9); transform: translateX(-50%) rotate(-4deg);
  pointer-events: none; white-space: nowrap;
}
@media (max-width: 560px){ .not-avg { display: none; } }
.not-avg .heart { color: var(--gold); }

/* media player strip — pinned over the image, above the polaroid's
   cream caption strip so the two never overlap */
.player {
  position: absolute; left: 6%; right: 6%; bottom: calc(var(--cream-h) + 8px); z-index: 5;
  display: flex; align-items: center; gap: 10px;
  padding: 6px 12px; border-radius: 6px;
  background: rgba(0,0,0,.55); border: 1px solid var(--border-dim);
  color: var(--gold);
  font-family: var(--mono); font-size: 13px;
}
.player .now-playing {
  flex: 1 1 auto; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  color: var(--ink); opacity: .85;
}
.player .ctrl { cursor: pointer; display: inline-flex; align-items: center; flex: 0 0 auto; }
.player .ctrl svg { display: block; }
.player .eq { flex: 0 0 auto; }
@media (max-width: 560px){
  .player { gap: 6px; padding: 4px 8px; }
  .player .now-playing { display: none; }
  .player .ctrl svg { width: 13px; height: 13px; }
  .player .eq { display: none; }
}
.player .eq { display: inline-flex; align-items: flex-end; gap: 2px; height: 20px; }
.player .eq i { width: 4px; background: var(--gold); display: inline-block; animation: eq 900ms ease-in-out infinite; }
.player .eq i:nth-child(1){height:8px;  animation-delay:0ms}
.player .eq i:nth-child(2){height:16px; animation-delay:120ms}
.player .eq i:nth-child(3){height:6px;  animation-delay:240ms}
.player .eq i:nth-child(4){height:14px; animation-delay:80ms}
.player .eq i:nth-child(5){height:10px; animation-delay:300ms}
.player .eq i:nth-child(6){height:18px; animation-delay:160ms}
.player .eq i:nth-child(7){height:7px;  animation-delay:220ms}
@keyframes eq { 0%,100%{ transform: scaleY(.4);} 50%{ transform: scaleY(1);} }
.player .eq.live i { animation: none; transform: none; transition: height 80ms linear; }

/* ---------- blog page ---------- */
.blog-cols { position: relative; display: grid; grid-template-columns: 1fr 280px; gap: 16px; }
@media (max-width: 820px){ .blog-cols { grid-template-columns: 1fr; } }

.blog-entry .meta-time {
  font-family: var(--mono); font-size: 13px; color: #12110a;
  background: var(--gold); padding: 1px 8px; display: inline-block;
  transform: rotate(-1deg); box-shadow: 1px 1px 0 rgba(0,0,0,.5);
}
.blog-entry h3.title { margin: 8px 0; color: #fff; font-family: var(--mono);
  font-weight: 700; font-size: 20px; }
.blog-media { margin: 8px 0; }
.blog-media img, .blog-media video, .blog-media iframe {
  display: block; max-width: 100%;
  border: 1px solid var(--border-dim);
  box-shadow: 0 6px 16px rgba(0,0,0,.6);
  filter: contrast(1.04) saturate(.95);
}
.blog-desc { margin: 8px 0 0; color: var(--ink); }
.tag-line { margin-top: 10px; color: var(--dim); }
.tag-line .kudos { color: var(--gold); }
.tag-line a { color: var(--gold); }

/* stack navigator */
.stack .body { padding: 8px; }
.stack .hint { color: var(--dim); font-size: 12px; margin: 0 0 8px; }
.stack ol { margin: 0; padding: 0; list-style: none; counter-reset: b; }
.stack li { counter-increment: b; margin: 0 0 8px; }
.stack li a {
  display: block; text-decoration: none; color: var(--ink);
  background: #0c0c08; border: 1px solid var(--border-dim);
  border-radius: 8px; padding: 7px 9px 7px 30px; position: relative;
  transform: rotate(-.6deg); box-shadow: 2px 2px 0 rgba(0,0,0,.5);
}
.stack li:nth-child(even) a { transform: rotate(.8deg); }
.stack li a::before {
  content: counter(b); position: absolute; left: 6px; top: 7px;
  width: 18px; height: 18px; line-height: 18px; text-align: center;
  font-family: var(--mono); font-size: 12px; color: #12110a;
  background: var(--gold); border-radius: 3px;
}
.stack li a:hover { border-color: var(--gold); }
.stack .s-time { display: block; font-family: var(--mono); font-size: 12px; color: var(--gold); }
.stack .s-title { display: block; color: var(--ink); font-weight: 700; }

/* ---------- admin ---------- */
.admin-wrap { max-width: 620px; margin: 16px auto; position: relative; }
.gate { text-align: center; }
.gsign {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--display); font-weight: 700; font-size: 15px;
  padding: 9px 20px; cursor: pointer; color: #111;
  background: var(--gold); border: 1px solid #000; border-radius: 6px;
  box-shadow: 3px 3px 0 rgba(0,0,0,.6);
}
.gsign:hover { background: #fff; }
form.blogform label { display: block; margin: 10px 0 3px; color: var(--gold); font-family: var(--mono); font-weight: 700; }
form.blogform input[type=text], form.blogform input[type=url],
form.blogform textarea, form.blogform select {
  width: 100%; padding: 7px; background: #111; color: var(--ink);
  border: 1px solid var(--border-dim); border-radius: 6px;
  font-family: var(--mono); font-size: 15px;
}
form.blogform textarea { min-height: 96px; resize: vertical; }
form.blogform input[type=file] { color: var(--dim); font-family: var(--mono); }
form.blogform .submit {
  margin-top: 14px; font-family: var(--display); font-weight: 700; font-size: 15px;
  padding: 9px 24px; cursor: pointer; color: #111;
  background: var(--gold); border: 1px solid #000; border-radius: 6px;
  box-shadow: 3px 3px 0 rgba(0,0,0,.6);
}
form.blogform .submit:hover { background: #fff; }
form.blogform .submit:disabled { opacity: .6; cursor: default; }
.who { font-family: var(--mono); color: var(--gold); }
.signout { cursor: pointer; text-decoration: underline; color: var(--dim); background: none; border: none; font-family: var(--mono); font-size: 12px; }
.notice { padding: 9px 12px; border: 1px dashed var(--border-dim); border-radius: 6px; margin: 8px 0; font-family: var(--mono); }
.notice.ok  { background: rgba(120,200,80,.12); border-color: #7ac850; color: #cfeeb6; }
.notice.err { background: rgba(220,80,80,.12); border-color: #d05050; color: #f0c0c0; }
.notice.warn{ background: rgba(216,200,74,.10); border-color: var(--gold-2); color: #efe6b0; }
.hidden { display: none !important; }

/* ---------- footer ---------- */
.foot { text-align: center; margin-top: 22px; color: var(--dim); font-family: var(--mono); }
.foot a { color: var(--gold); }
.counter { display: inline-block; background: #000; color: var(--gold);
  padding: 0 6px; border: 1px solid var(--gold-2); letter-spacing: 3px; }