/* 1998 net.goth homepage.
   Primary owner-supplied reference: Cryptie's Family of Darkness, online since 1997.
   https://web.archive.org/web/20001119220400/http://members1.visualcities.com/cryptie/
   Its original BODY used #000000 and #FF0000 for text, links and visited links.
   Stone edging also draws on the Web Design Museum's 1998 Unreal exhibit.
   Original composition; no reference artwork or prose is reproduced. */
body[data-year="1998"] {
  --bg:#000; --ink:#ff0000; --link:#ff0000; --visited:#ff0000;
  --surface:#000; --page-bg:#000; --card-bg:#000;
  --font:"Times New Roman",Times,serif; --title-font:"Times New Roman",Times,serif;
  --muted:#bcbcbc; --accent:#ff0000; --active:#ff0000;
  --stone:linear-gradient(110deg,#727e8e 0%,#27303f 15%,#546375 31%,#151c28 48%,#68788d 64%,#222a38 81%,#455267 100%);
  color:#ff0000; background:#000;
  font:18px/1.6 "Times New Roman",Times,serif;
}
body[data-year="1998"]::before,
body[data-year="1998"]::after { display:none; }
body[data-year="1998"] #timebar {
  position:relative; top:auto; width:min(850px,100%); margin:0 auto;
  padding:14px 12px 17px; color:#ff0000; background:#000;
  border:0; border-bottom:3px double #8f0000; border-radius:0; box-shadow:none;
  font:16px/1.5 "Times New Roman",Times,serif;
}
body[data-year="1998"] #timebar fieldset { padding:0; }
body[data-year="1998"] #timebar .year-option span {
  padding:4px 8px; color:#ff0000; background:#000; border:1px solid #660000;
  border-radius:0; box-shadow:none; font:16px/1.5 "Times New Roman",Times,serif;
}
body[data-year="1998"] #timebar .year-option input:checked + span {
  color:#fff; background:#a00000; border:2px outset #ff0000; box-shadow:none;
  font-weight:bold;
}
body[data-year="1998"] #era-description,
body[data-year="1998"] #era-aesthetic-wrap {
  color:#ff0000; font:16px/1.55 "Times New Roman",Times,serif;
}
body[data-year="1998"] #home {
  width:min(800px,calc(100% - 24px)); max-width:800px; margin:26px auto 55px;
  padding:0 7px; color:#ff0000; background:var(--stone);
  border:2px ridge #444; border-radius:0; box-shadow:none;
}
body[data-year="1998"] #home > center {
  position:relative; display:flex; flex-direction:column; align-items:center;
  gap:24px; width:100%; margin:0; padding:30px 30px 24px;
  color:#ff0000; background:#000; border:0; border-radius:0; box-shadow:none;
  text-align:center;
}
body[data-year="1998"] #home > center > br,
body[data-year="1998"] #home > center > hr,
body[data-year="1998"] .home-windowbar,
body[data-year="1998"] .home-index-1992,
body[data-year="1998"] .lj2006-navigation,
body[data-year="1998"] .lj2006-mood,
body[data-year="1998"] #home > center > a:not(.era-on):not(#era-banner) { display:none!important; }
body[data-year="1998"] #home .site-name {
  position:relative; order:1; display:block!important; width:100%; max-width:650px;
  margin:0; padding:23px 0 20px; color:#ff0000; background:#000;
  border:0; border-block:5px double #b00000; border-radius:0; box-shadow:none;
  font:700 clamp(34px,5.6vw,52px)/1.12 "Times New Roman",Times,serif;
  letter-spacing:.015em; text-shadow:2px 2px #400000; text-transform:uppercase;
  overflow-wrap:normal; word-break:normal;
}
body[data-year="1998"] #home .site-name::before,
body[data-year="1998"] #home .site-name::after { content:none; }
body[data-year="1998"] #home table.home-grid {
  order:3; display:block; width:100%!important; max-width:610px; margin:0;
  padding:0; border:0; background:transparent; box-shadow:none; transform:none;
}
body[data-year="1998"] #home .home-grid tbody { display:block; }
body[data-year="1998"] #home .home-grid tr {
  display:grid; grid-template-columns:210px minmax(0,1fr); gap:30px; align-items:center;
}
body[data-year="1998"] #home .home-grid td {
  display:block; width:100%; min-width:0; margin:0; padding:0;
  border:0; background:transparent; text-align:center!important;
}
body[data-year="1998"] #home .home-grid td:first-child { order:0; }
body[data-year="1998"] #home .home-nav { order:1; }
body[data-year="1998"] #home .home-nav font {
  display:flex; flex-direction:column; align-items:flex-start; gap:7px;
  width:100%; margin:0; padding:0; border:0;
  font:700 21px/1.55 "Times New Roman",Times,serif;
}
body[data-year="1998"] #home .home-nav br { display:none; }
body[data-year="1998"] #home .home-nav a {
  display:block; max-width:100%; margin:0; padding:3px 0;
  color:#ff0000!important; background:transparent; border:0; border-radius:0;
  box-shadow:none; font:700 21px/1.5 "Times New Roman",Times,serif;
  text-transform:none; text-decoration:underline; text-underline-offset:3px;
  letter-spacing:0; white-space:normal; overflow-wrap:normal; word-break:normal;
}
body[data-year="1998"] #home .home-nav a::before,
body[data-year="1998"] #home .home-nav a::after { content:none; }
body[data-year="1998"] #home .logo-keep {
  display:inline-block; width:210px; max-width:100%; margin:0; padding:0;
  background:#000; border:0; border-radius:0; box-shadow:none;
}
body[data-year="1998"] #home .logo {
  display:block; width:210px; height:210px; max-width:100%; margin:0;
  object-fit:contain; opacity:1; filter:none; transform:none; background:transparent;
}
body[data-year="1998"] #home .identity-line {
  order:2; max-width:620px; margin:0; padding:0; color:#ff0000;
  background:transparent; border:0; box-shadow:none;
  font:19px/1.6 "Times New Roman",Times,serif; text-align:left;
}
body[data-year="1998"] #home .identity-line::before,
body[data-year="1998"] #home .identity-line::after { content:none; }
body[data-year="1998"] #home #period-feature-banner {
  order:4; max-width:468px; width:100%; margin:8px auto; padding:0;
  background:#000; border:0; color:#ff0000;
}
body[data-year="1998"] #home .era-on {
  order:5; display:flex; width:180px; min-width:0; min-height:0; height:auto;
  margin:0; padding:10px 14px; color:#ff0000; background:#000;
  border:4px ridge #555; border-radius:0; box-shadow:inset 0 0 0 2px #000;
  transform:none; justify-content:center;
}
body[data-year="1998"] #home .era-on::before,
body[data-year="1998"] #home .era-on::after,
body[data-year="1998"] .era-on-eye { display:none; }
body[data-year="1998"] #home .era-on-copy { display:block; min-width:0; }
body[data-year="1998"] #home .era-on-copy #broadcast-status {
  display:block; color:#ff0000; font:bold 22px/1.3 "Courier New",monospace;
  letter-spacing:1px; white-space:nowrap;
}
body[data-year="1998"] #home .era-on-copy #broadcast-detail {
  display:block; color:#ff0000; font:16px/1.4 "Times New Roman",Times,serif;
}
body[data-year="1998"] #home .dreamland-copy {
  order:6; display:block; width:100%; max-width:620px; margin:0; padding:0;
  color:#ff0000; font:18px/1.6 "Times New Roman",Times,serif; text-align:left;
}
body[data-year="1998"] #home .dreamland-copy::before { content:none; }
body[data-year="1998"] #home .home-quote {
  order:7; display:block; width:100%; max-width:620px; margin:8px 0 0; padding:20px 8px;
  color:#ff0000; background:#000; font:18px/1.65 "Times New Roman",Times,serif;
  border:0; border-block:5px ridge #3d3d3d;
}
body[data-year="1998"] #home .home-dad {
  order:8; display:block; margin:0; color:#ff0000;
  font:18px/1.5 "Times New Roman",Times,serif;
}
body[data-year="1998"] #home .home-status {
  order:9; display:block; margin:0; padding:8px 0 0; color:#ff0000; background:#000;
  border:0; box-shadow:none; font:14px/1.6 "Times New Roman",Times,serif;
}
body[data-year="1998"] #home .home-status span { color:inherit; }
body[data-year="1998"] #home #era-banner,
body[data-year="1998"] #home .banner-help { display:none!important; }
body[data-year="1998"] #home a,
body[data-year="1998"] #home a:visited { color:#ff0000; }
body[data-year="1998"] .page {
  width:min(860px,calc(100% - 24px)); max-width:860px; margin:26px auto 50px; padding:28px;
  color:#ff0000; background:#000; border:5px ridge #494949;
  border-radius:0; clip-path:none; box-shadow:none; font:18px/1.65 "Times New Roman",Times,serif;
}
body[data-year="1998"] .page h3 {
  margin:8px 0 24px; padding:0 0 17px; color:#ff0000; background:#000;
  border:0; border-bottom:5px double #a00000;
  font:700 clamp(29px,5vw,42px)/1.18 "Times New Roman",Times,serif;
  letter-spacing:0; text-transform:uppercase; overflow-wrap:normal; word-break:normal;
}
body[data-year="1998"] .page h4 {
  color:#ff0000; font:bold 24px/1.4 "Times New Roman",Times,serif; letter-spacing:0;
}
body[data-year="1998"] .page p,
body[data-year="1998"] .page li,
body[data-year="1998"] .page font { font-size:18px; line-height:1.65; }
body[data-year="1998"] .page a,
body[data-year="1998"] .page a:visited { color:#ff0000; text-decoration:underline; }
body[data-year="1998"] .quiet { color:#bcbcbc; }
body[data-year="1998"] .room-illustration {
  margin:18px 0; padding:0; border:4px ridge #555; background:#000; box-shadow:none;
}
body[data-year="1998"] .room-stage > img { border:0; image-rendering:pixelated; }
body[data-year="1998"] .room-stage > .room-map-gateway { left:57%; right:auto; top:8%; width:27%; height:36%; }
body[data-year="1998"] .room-fax { left:75%; top:57%; }
body[data-year="1998"] .room-illustration::after { clip-path:inset(2% 60% 59% 21%); }
body[data-year="1998"] :is(.room-cards,.era-card,#favorite-sites,.work-section,.traveler-faq,.publication-audio) {
  color:#ff0000; background:#000; border:1px solid #650000; border-radius:0; box-shadow:none;
}
body[data-year="1998"] #favorite-sites-list { columns:2 220px; }
body[data-year="1998"] .candle-era--1997 { display:block; }
body[data-year="1998"] .find-banner {
  color:#ff0000!important; background:#000; border:4px ridge #555;
  border-radius:0; box-shadow:none; font:bold 18px/1.5 "Times New Roman",Times,serif;
}
body[data-year="1998"] :focus-visible { outline:2px solid #ffff00; outline-offset:3px; }
body[data-year="1998"] #home .home-nav a:hover,
body[data-year="1998"] #home .home-nav a:focus-visible,
body[data-year="1998"] .page a:hover { color:#ffff00!important; }
@media(max-width:620px) {
  body[data-year="1998"] #home { width:calc(100% - 12px); margin-top:18px; padding-inline:4px; }
  body[data-year="1998"] #home > center { padding:22px 15px; gap:22px; }
  body[data-year="1998"] #home .site-name { font-size:clamp(29px,8.6vw,42px); padding:20px 0; }
  body[data-year="1998"] #home .home-grid tr { display:flex; flex-direction:column; gap:16px; }
  body[data-year="1998"] #home .logo-keep { width:172px; }
  body[data-year="1998"] #home .logo { width:172px; height:172px; }
  body[data-year="1998"] #home .home-nav font { align-items:center; gap:8px; }
  body[data-year="1998"] #home .home-nav a { text-align:center; font-size:21px; }
  body[data-year="1998"] .page { padding:20px 17px; }
}

/* Painted castle-stone title plaque, inspired by the owner's 1991 title-sequence reference. */
body[data-year="1998"] #home .site-name {
  display:flex!important; align-items:center; justify-content:center;
  box-sizing:border-box; width:100%; max-width:700px; min-height:158px;
  aspect-ratio:4 / 1; padding:24px 16% 34px;
  background:transparent url("assets/goth-stone-header-v22.webp") center / 100% 100% no-repeat;
  border:0; color:#ff0000; font-size:clamp(24px,4vw,37px); line-height:1.06;
  text-shadow:1px 2px 0 #000,-1px -1px 0 #180000;
}
@media(max-width:600px){
  body[data-year="1998"] #home .site-name { min-height:125px; padding:22px 14% 27px; font-size:clamp(21px,6.2vw,30px); }
}