/* ==========================================================================
   rainepassero.com — goth pass
   Aug 28 2026. Raine asked for goth. Same principle as the cosy pass before it:
   the failure mode is 2016 wearing a costume.

   So this is NOT a modern dark theme. No rounded corners, no soft shadows, no
   restrained single-accent palette, nothing still. It is a 1999 shrine page
   that happens to be black: bevelled ridge borders, a tiled background, a
   marquee, animated gifs, a guestbook, a hit counter. Everything the cosy
   version had, in a different key.

   Kept deliberately from the cosy pass, because they were right the first time:
     - the 1040px measure and 15px body (Raine's call, Aug 7)
     - .main > p max-width 82ch so free prose stays readable
     - every structural element. This is a reskin, not a rewrite.

   Palette note: bone text on near-black, oxblood for the warm accent, cold
   iron for the borders. The one rule I held to is that darkness is the
   background, never the content — nothing here is unreadable for atmosphere.
   ========================================================================== */

:root {
  --void:       #0a090c;
  --crypt:      #131119;
  --stone:      #1a1722;
  --slab:       #211d2b;
  --iron:       #38323f;
  --iron-pale:  #58515f;
  --bone:       #ddd7cd;
  --bone-dim:   #98918c;
  --wine:       #7d2036;
  --wine-deep:  #4f1322;
  --wine-pale:  #c06479;
  --violet:     #453760;
  --brass:      #9a7f43;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 18px 10px 50px;
  font-family: Georgia, "Times New Roman", "DejaVu Serif", serif;
  font-size: 15px;
  line-height: 1.65;
  color: var(--bone);
  background-color: var(--void);
  /* tiled: a faint lattice plus scattered points, same idea as the gingham */
  background-image:
    repeating-linear-gradient(0deg,  rgba(88,81,95,.09) 0 1px, transparent 1px 24px),
    repeating-linear-gradient(90deg, rgba(88,81,95,.09) 0 1px, transparent 1px 24px),
    radial-gradient(circle at 12px 12px, rgba(125,32,54,.34) 1.6px, transparent 2.2px);
  background-size: 24px 24px, 24px 24px, 48px 48px;
}

.page {
  max-width: 1040px;
  margin: 0 auto;
  background: var(--crypt);
  border: 5px ridge var(--iron);
  padding: 0;
}

/* ---------------------------------------------------------------- banner */
.banner {
  background: var(--stone);
  border-bottom: 4px ridge var(--iron);
  text-align: center;
  padding: 16px 10px 12px;
}
.banner h1 {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: normal;
  letter-spacing: .16em;
  margin: 2px 0 6px;
  font-size: 2.2rem;
  color: var(--bone);
  text-shadow: 0 0 14px rgba(192,100,121,.35), 2px 2px 0 #000;
}
.banner .tagline {
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  margin: 0;
  font-size: .95rem;
  color: var(--wine-pale);
  letter-spacing: .03em;
}
.banner img { vertical-align: middle; margin: 0 10px; }

/* marquee, CSS so nothing is deprecated */
.marquee {
  overflow: hidden;
  white-space: nowrap;
  background: var(--wine-deep);
  border-bottom: 3px ridge var(--wine);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 12px;
  letter-spacing: .05em;
  color: #e9c9d1;
  padding: 4px 0;
}
.marquee span {
  display: inline-block;
  padding-left: 100%;
  animation: slide 26s linear infinite;
}
@keyframes slide { to { transform: translateX(-100%); } }

/* --------------------------------------------------------------- columns */
.columns { display: flex; align-items: stretch; }

.sidebar {
  width: 215px; flex: 0 0 215px;
  padding: 12px 10px 22px;
  background: var(--stone);
  border-right: 4px ridge var(--iron);
  font-size: 12px;
  text-align: center;
}
.whoami {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 12px; line-height: 1.55;
  margin: 2px 0 10px;
  padding: 8px 4px;
  background: var(--crypt);
  border: 3px ridge var(--wine);
  color: var(--bone);
}
.whoami b { color: var(--wine-pale); font-size: 15px; letter-spacing: .08em; }
.whoami span { font-size: 10px; color: var(--bone-dim); }

.sidebar h2 {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: normal; letter-spacing: .12em;
  font-size: .95rem; color: var(--wine-pale);
  margin: 14px 0 6px;
  background: var(--crypt);
  border: 2px groove var(--iron);
  padding: 3px 0;
}
.sidebar ul { list-style: none; margin: 0 0 8px; padding: 0; }
.sidebar li { margin: 0 0 5px; }
.sidebar a { color: var(--bone); text-decoration: underline; text-decoration-color: var(--iron-pale); }
.sidebar a:hover { color: var(--void); background: var(--wine-pale); }
.sidebar .note {
  font-size: 11px; line-height: 1.55; color: var(--bone);
  background: var(--crypt); border: 2px inset var(--iron);
  padding: 7px 8px; text-align: left; margin: 0;
}

.main { flex: 1 1 auto; padding: 16px 26px 26px; min-width: 0; }

/* -------------------------------------------------------------- sections */
section { margin: 0 0 8px; }

h2.plaque {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: normal; letter-spacing: .14em;
  display: block;
  margin: 0 0 12px;
  padding: 5px 10px;
  font-size: 1.1rem;
  color: var(--bone);
  background: var(--wine-deep);
  border: 3px outset var(--wine);
  text-align: center;
  text-shadow: 1px 1px 0 #000;
}
h3 {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: normal; letter-spacing: .08em;
  font-size: 1rem; color: var(--wine-pale);
  margin: 18px 0 5px;
  border-bottom: 2px dotted var(--iron);
}
h4 { margin: 0 0 1px; font-size: .95rem; color: var(--bone); letter-spacing: .04em; }
p { margin: 0 0 9px; }
a { color: var(--wine-pale); }
a:hover { color: var(--bone); }

.card {
  background: var(--slab);
  border: 3px ridge var(--iron);
  padding: 10px 13px;
  margin: 0 0 12px;
}
.card.pink { border-color: var(--wine); background: #1d1119; }

.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.tag {
  display: inline-block; font-size: 10px;
  padding: 2px 8px; margin: 3px 3px 0 0;
  letter-spacing: .06em;
  color: var(--bone); background: var(--slab);
  border: 2px outset var(--iron);
}
.tag.pink { color: #edc3ce; background: var(--wine-deep); border-color: var(--wine); }

/* gif bullets */
ul.leaf { list-style: none; padding-left: 2px; margin: 0 0 10px; }
ul.leaf li {
  padding-left: 24px; margin-bottom: 5px;
  background: url("gifs/moth.gif") no-repeat left 3px;
  background-size: 16px 14px;
}
ul.leaf.green li { background-image: url("gifs/bat.gif"); background-size: 17px 11px; }

.job { margin: 0 0 12px; }
.job .where { font-size: .82rem; color: var(--bone-dim); margin: 0 0 4px; }

/* divider strip */
.divider {
  border: 0; height: 16px; margin: 18px 0;
  background: url("gifs/ember.gif") repeat-x center;
  background-size: 16px 16px;
  opacity: .55;
}

/* ---------------------------------------------------------------- footer */
.footer {
  border-top: 4px ridge var(--iron);
  background: var(--stone);
  padding: 12px 14px 16px;
  text-align: center;
  font-size: 11px;
  color: var(--bone-dim);
}
.guestbook {
  display: inline-block;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 13px; letter-spacing: .08em;
  background: var(--wine);
  color: #f2dde2;
  border: 3px outset var(--wine-pale);
  padding: 5px 16px;
  text-decoration: none;
  margin: 4px 0 10px;
}
.guestbook:hover { background: var(--wine-pale); color: var(--void); }

.buttons { margin: 8px 0 6px; }
.btn88 {
  display: inline-block; width: 88px; height: 31px;
  line-height: 1.05; margin: 2px; padding: 3px 2px;
  font-size: 9px; text-align: center;
  color: var(--bone); background: var(--slab);
  border: 2px outset var(--iron);
  vertical-align: middle; overflow: hidden;
}
.btn88.pink { background: var(--wine-deep); border-color: var(--wine); color: #edc3ce; }
.btn88.cream { background: var(--violet); border-color: var(--iron-pale); }

.counter {
  display: inline-block; font-family: "Courier New", monospace;
  background: #05040a; color: var(--wine-pale);
  padding: 2px 8px; border: 3px inset var(--iron);
  letter-spacing: .2em; font-size: 13px;
  text-shadow: 0 0 6px rgba(192,100,121,.6);
}

.best-viewed { margin-top: 8px; color: var(--iron-pale); font-size: 10px; }

@media (max-width: 640px) {
  .columns { flex-direction: column; }
  .sidebar { width: auto; flex: 1 1 auto; border-right: 0; border-bottom: 4px ridge var(--iron); }
  .grid2 { grid-template-columns: 1fr; }
  .banner h1 { font-size: 1.6rem; }
}

/* photos + collapsed jobs */
.photo {
  display: block; max-width: 100%; height: auto;
  margin: 0 auto 6px;
  border: 4px ridge var(--iron);
  background: var(--stone); padding: 3px;
}
.photo.cat { float: left; width: 210px; margin: 0 14px 8px 0; border-color: var(--wine); }
.catbox::after { content: ""; display: block; clear: both; }
.caption {
  font-size: 12px; color: var(--bone-dim); font-style: italic;
  text-align: center; margin: 0 0 4px;
}
.catbox .caption { text-align: left; font-style: normal; font-size: 13px; color: var(--bone); }
.oldjob {
  font-size: 12px; line-height: 1.5;
  border-left: 4px solid var(--wine-deep);
  padding: 2px 0 2px 10px; margin: 0 0 9px;
}
.oldjob b { color: var(--bone); font-size: 13px; }
.oldjob span { color: var(--bone-dim); font-size: 11px; }

.nowjob { font-size: 13.5px; margin: 4px 0 14px; }

/* Aug 7: 1040 measure, 15px body, prose capped so the line length stays sane */
.main > p { max-width: 82ch; }
.caption { max-width: 70ch; margin-left: auto; margin-right: auto; }
.catbox .caption { margin-left: 0; }

/* a single candle in the sidebar Now box, because a shrine page should have one */
.sidebar .vigil { margin: 10px 0 0; }