/*
  2001: a circular fan-page stage with a vertical bank of image-like buttons.
  Visual reference supplied by the user: TMBG Wompedy fan page screenshot
  (2001), plus the loose object-menu spacing of the supplied TDK fan page
  screenshot (copyright 2000). This is an original composition using only the
  site's existing notebook mascot and CSS geometry.
*/

body[data-year="2001"] {
  --bg:#000;
  --ink:#fff8ed;
  --link:#8eeaff;
  --visited:#f6a5d1;
  --surface:#090909;
  --page-bg:#090909;
  --card-bg:#121212;
  --card-border:1px solid #73492b;
  --card-radius:0;
  --card-shadow:none;
  --panel-border:1px solid #55331f;
  --panel-radius:0;
  --panel-shadow:none;
  --soft-edge:#65442f;
  --accent:#ff4da0;
  --active:#fff26a;
  --muted:#cbbfb4;
  --font:Verdana,Arial,sans-serif;
  --mono:"Courier New",monospace;
  --title-font:"Arial Narrow",Impact,Arial,sans-serif;
  --page-width:920px;
  --writing-width:920px;
  margin:0;
  color:#fff8ed;
  background:#000;
  font:16px/1.65 Verdana,Arial,sans-serif;
}

body[data-year="2001"]::before,
body[data-year="2001"]::after { display:none; }

body[data-year="2001"] #timebar {
  width:min(940px,100%);
  margin:0 auto;
  padding:12px 16px;
  color:#eee4d9;
  background:#000;
  border:0;
  border-bottom:1px solid #66391f;
  box-shadow:none;
  font:13px/1.55 Verdana,Arial,sans-serif;
}

body[data-year="2001"] #timebar fieldset { padding:0; }

body[data-year="2001"] #timebar .year-option span {
  min-height:30px;
  padding:5px 8px;
  color:#fff;
  background:linear-gradient(#6b4a27,#332313);
  border:2px outset #b58a55;
  border-radius:9px;
  box-shadow:none;
  font:12px/1.4 Verdana,Arial,sans-serif;
}

body[data-year="2001"] #timebar .year-option input:checked + span {
  color:#111;
  background:#fff26a;
  border-color:#fff8b5;
  box-shadow:0 0 0 2px #d52d83;
}

body[data-year="2001"] #era-description,
body[data-year="2001"] #era-aesthetic-wrap {
  color:#d9c8bd;
  font:12px/1.55 Verdana,Arial,sans-serif;
}

body[data-year="2001"] #home {
  display:block;
  width:min(960px,calc(100% - 24px));
  max-width:960px;
  min-height:0;
  margin:22px auto 54px;
  padding:0;
  color:#fff8ed;
  background:#000;
  border:0;
  border-radius:0;
  box-shadow:none;
}

body[data-year="2001"] #home > center {
  position:relative;
  isolation:isolate;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:17px;
  width:100%;
  margin:0;
  padding:18px 24px 28px;
  overflow:hidden;
  color:#fff8ed;
  background:#000;
  border:0;
  border-radius:0;
  box-shadow:none;
  text-align:center;
}

body[data-year="2001"] #home > center::before {
  content:"";
  position:absolute;
  z-index:0;
  top:330px;
  left:63%;
  width:min(680px,76vw);
  aspect-ratio:1;
  border:2px solid #25140f;
  border-radius:50%;
  background:radial-gradient(circle,
    #f2eee2 0 8%,
    #111 8.3% 9.1%,
    #d99c25 9.4% 16%,
    #5a6d22 16.3% 23%,
    #23847d 23.3% 30%,
    #2c4a91 30.3% 37%,
    #781b25 37.3% 44%,
    #bd1c77 44.3% 51%,
    transparent 51.3%);
  box-shadow:0 0 34px #000 inset;
  transform:translate(-50%,-50%);
  pointer-events:none;
}

body[data-year="2001"] #home > center > * {
  position:relative;
  z-index:1;
  min-width:0;
}

body[data-year="2001"] #home > center > br,
body[data-year="2001"] #home > center > hr,
body[data-year="2001"] .home-windowbar,
body[data-year="2001"] .home-index-1992,
body[data-year="2001"] .lj2006-navigation,
body[data-year="2001"] .lj2006-mood,
body[data-year="2001"] #home > center > a:not(.era-on):not(#era-banner) {
  display:none!important;
}

body[data-year="2001"] #home .site-name {
  order:1;
  display:block!important;
  width:100%;
  margin:0;
  padding:4px 10px 8px;
  color:#fff;
  background:transparent;
  border:0;
  font:700 clamp(34px,6.4vw,62px)/.96 "Arial Narrow",Impact,Arial,sans-serif;
  letter-spacing:-.035em;
  text-transform:none;
  text-shadow:3px 3px 0 #711348,5px 5px 0 #173278;
  overflow-wrap:normal;
  word-break:normal;
}

body[data-year="2001"] #home .site-name::after {
  content:"a website about the otherworld behind the screen";
  display:block;
  margin:8px 0 0;
  color:#fff8c3;
  font:700 11px/1.4 Verdana,Arial,sans-serif;
  letter-spacing:.12em;
  text-transform:uppercase;
  text-shadow:1px 1px #000;
}

body[data-year="2001"] #home #period-feature-banner {
  order:2;
  width:min(468px,100%);
  max-width:468px;
  margin:0 auto;
  padding:5px;
  color:#fff;
  background:#090909;
  border:1px solid #8f5530;
  font:11px/1.4 Verdana,Arial,sans-serif;
}

body[data-year="2001"] #home #period-feature-banner img {
  display:block;
  width:100%;
  height:auto;
  image-rendering:auto;
}

body[data-year="2001"] #home table.home-grid {
  order:3;
  display:block;
  width:100%!important;
  margin:0;
  padding:0;
  border:0;
  border-spacing:0;
  background:transparent;
  box-shadow:none;
  transform:none;
}

body[data-year="2001"] #home .home-grid tbody { display:block; width:100%; }

body[data-year="2001"] #home .home-grid tr {
  display:grid;
  grid-template-columns:215px minmax(0,1fr);
  gap:28px;
  align-items:center;
  width:100%;
  min-height:385px;
}

body[data-year="2001"] #home .home-grid td {
  display:block;
  width:100%;
  min-width:0;
  margin:0;
  padding:0;
  background:transparent;
  border:0;
  text-align:center!important;
}

body[data-year="2001"] #home .home-grid td:first-child {
  grid-column:2;
  grid-row:1;
}

body[data-year="2001"] #home .home-nav {
  grid-column:1;
  grid-row:1;
  min-width:0;
}

body[data-year="2001"] #home .home-nav font {
  display:grid;
  grid-template-columns:1fr;
  gap:8px;
  width:100%;
  font:700 13px/1.25 Verdana,Arial,sans-serif;
}

body[data-year="2001"] #home .home-nav br { display:none; }

body[data-year="2001"] #home .home-nav a {
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:43px;
  margin:0;
  padding:7px 10px;
  color:#fff!important;
  background:linear-gradient(#b27a38 0,#8b592b 45%,#563218 52%,#7e4d24 100%);
  border:3px outset #d2a668;
  border-radius:13px;
  box-shadow:3px 4px 0 #050505;
  font:700 13px/1.25 Verdana,Arial,sans-serif;
  letter-spacing:.01em;
  text-align:center;
  text-decoration:none;
  text-shadow:1px 1px #1b0c05;
  text-transform:none;
  white-space:normal;
  overflow-wrap:normal;
}

body[data-year="2001"] #home .home-nav a:nth-of-type(2),
body[data-year="2001"] #home .home-nav a:nth-of-type(6) {
  background:linear-gradient(#297d7c,#155451 49%,#0c302f 51%,#1c6461);
  border-color:#65b8b3;
}

body[data-year="2001"] #home .home-nav a:nth-of-type(3),
body[data-year="2001"] #home .home-nav a:nth-of-type(7) {
  background:linear-gradient(#8051a1,#51336c 49%,#2e1a40 51%,#64417d);
  border-color:#ad82c8;
}

body[data-year="2001"] #home .home-nav a:nth-of-type(4),
body[data-year="2001"] #home .home-nav a:nth-of-type(8) {
  background:linear-gradient(#b74a52,#7c2630 49%,#46131b 51%,#8c2e38);
  border-color:#d77b80;
}

body[data-year="2001"] #home .home-nav a:hover,
body[data-year="2001"] #home .home-nav a:focus-visible {
  color:#fff9b0!important;
  filter:brightness(1.18);
}

body[data-year="2001"] #home .home-nav a::before,
body[data-year="2001"] #home .home-nav a::after { content:none; }

body[data-year="2001"] #home .logo-keep {
  display:grid;
  place-items:center;
  width:244px;
  height:244px;
  margin:0 auto;
  padding:14px;
  overflow:visible;
  color:#111;
  background:#f7f2e6;
  border:5px solid #fff;
  border-radius:50%;
  outline:3px solid #111;
  box-shadow:8px 10px 0 #0008;
  transform:rotate(-3deg);
}

body[data-year="2001"] #home img.logo {
  display:block;
  width:210px;
  height:210px;
  max-width:100%;
  object-fit:contain;
  opacity:1!important;
  filter:none!important;
  transform:none;
}

body[data-year="2001"] #home .identity-line {
  order:4;
  align-self:flex-end;
  width:min(470px,58%);
  max-width:470px;
  margin:-30px 6% 3px 0;
  padding:15px 18px;
  color:#17120e;
  background:#fff;
  border:3px solid #17120e;
  border-radius:20px;
  box-shadow:4px 5px 0 #000;
  font:700 15px/1.5 Verdana,Arial,sans-serif;
  text-align:left;
}

body[data-year="2001"] #home .identity-line::before {
  content:"";
  position:absolute;
  left:18%;
  bottom:100%;
  border:0 solid transparent;
  border-right-width:23px;
  border-bottom:25px solid #17120e;
  transform:skewX(-12deg);
}

body[data-year="2001"] #home .identity-line::after {
  content:"";
  position:absolute;
  left:calc(18% + 5px);
  bottom:calc(100% - 3px);
  border:0 solid transparent;
  border-right-width:17px;
  border-bottom:20px solid #fff;
  transform:skewX(-12deg);
}

body[data-year="2001"] #home .era-on {
  order:5;
  display:flex;
  width:fit-content;
  min-width:172px;
  min-height:54px;
  margin:5px auto 0;
  padding:9px 14px;
  color:#fff!important;
  background:linear-gradient(#7e293a,#47131f 49%,#24080f 51%,#581625);
  border:3px outset #c06476;
  border-radius:12px;
  box-shadow:3px 4px 0 #000;
  text-decoration:none;
  transform:none;
}

body[data-year="2001"] #home .era-on::before,
body[data-year="2001"] #home .era-on::after { content:none; }

body[data-year="2001"] #home .era-on-eye {
  display:block;
  color:#fff4a6;
  background:#16100d;
  border-color:#fff4a6;
}

body[data-year="2001"] #home .era-on-copy { color:#fff; }

body[data-year="2001"] #home #broadcast-status {
  color:#fff7bb;
  font:700 16px/1.2 Verdana,Arial,sans-serif;
  letter-spacing:.05em;
  white-space:nowrap;
}

body[data-year="2001"] #home #broadcast-detail {
  display:block;
  color:#fff;
  font:12px/1.3 Verdana,Arial,sans-serif;
}

body[data-year="2001"] #home .dreamland-copy {
  order:6;
  display:block;
  width:min(640px,100%);
  margin:0;
  padding:13px 16px;
  color:#f4e7da;
  background:#080808;
  border-block:1px solid #754323;
  font:14px/1.65 Verdana,Arial,sans-serif;
  text-align:center;
}

body[data-year="2001"] #home .dreamland-copy::before { content:none; }

body[data-year="2001"] #home .home-quote {
  order:7;
  display:block;
  width:min(650px,100%);
  margin:0;
  padding:8px 12px;
  color:#fff5c6;
  font:italic 15px/1.65 Georgia,"Times New Roman",serif;
}

body[data-year="2001"] #home .home-dad {
  order:8;
  display:block;
  margin:0;
  color:#f4bdde;
  font:13px/1.5 Verdana,Arial,sans-serif;
}

body[data-year="2001"] #home .home-status {
  order:9;
  display:block;
  width:100%;
  max-width:100%;
  margin:3px 0 0;
  padding:10px 12px;
  color:#bcb1a9;
  background:#050505;
  border-top:1px solid #573620;
  box-shadow:none;
  font:11px/1.6 Verdana,Arial,sans-serif;
  text-align:center;
}

body[data-year="2001"] #home .home-status span { color:inherit; }

body[data-year="2001"] #home #era-banner,
body[data-year="2001"] #home .banner-help { display:none!important; }

body[data-year="2001"] #home a { color:#8eeaff; }

body[data-year="2001"] .page,
body[data-year="2001"] #writing {
  width:min(920px,calc(100% - 24px));
  max-width:920px;
  margin:22px auto 52px;
  padding:28px;
  overflow:hidden;
  color:#f7efe5;
  background:#090909;
  border:2px solid #754326;
  border-top:9px solid #b91b72;
  border-radius:0;
  box-shadow:7px 7px 0 #241009;
  font:16px/1.72 Verdana,Arial,sans-serif;
}

body[data-year="2001"] .page::before {
  content:"";
  position:absolute;
  top:0;
  right:0;
  left:0;
  height:5px;
  background:linear-gradient(90deg,#bd1c77 0 20%,#781b25 20% 40%,#2c4a91 40% 60%,#23847d 60% 80%,#d99c25 80%);
}

body[data-year="2001"] .page h3 {
  margin:8px 0 24px;
  padding:0 0 13px;
  color:#fff;
  background:transparent;
  border:0;
  border-bottom:1px solid #8f5733;
  font:700 clamp(28px,5vw,43px)/1.15 "Arial Narrow",Impact,Arial,sans-serif;
  letter-spacing:-.02em;
  text-transform:none;
  text-shadow:2px 2px #701b50;
  overflow-wrap:normal;
  word-break:normal;
}

body[data-year="2001"] .page h4 {
  margin:25px 0 10px;
  color:#fff4a7;
  font:700 20px/1.4 Verdana,Arial,sans-serif;
  letter-spacing:0;
}

body[data-year="2001"] .page p,
body[data-year="2001"] .page li,
body[data-year="2001"] .page font {
  font-size:16px;
  line-height:1.72;
}

body[data-year="2001"] .page a { color:#8eeaff!important; text-decoration:underline; }
body[data-year="2001"] .page a:visited { color:#f6a5d1!important; }
body[data-year="2001"] .page .quiet,
body[data-year="2001"] .quiet { color:#cbbfb4; }

body[data-year="2001"] :is(.era-card,.work-section,.publication-audio,.traveler-faq,#favorite-sites) {
  color:#f7efe5;
  background:#131313;
  border:1px solid #6f4830;
  border-radius:0;
  box-shadow:none;
}

body[data-year="2001"] :is(.era-card,.work-section,.publication-audio,.traveler-faq) {
  padding:16px;
}

body[data-year="2001"] #writing > ul > li {
  margin-bottom:14px;
  padding-bottom:14px;
  border-bottom:1px dotted #79553d;
}

body[data-year="2001"] .room-illustration {
  margin:16px 0;
  padding:0;
  overflow:hidden;
  background:#000;
  border:3px outset #8d603b;
  border-radius:0;
  box-shadow:none;
}

body[data-year="2001"] .room-stage > img { border:0; }

body[data-year="2001"] #favorite-sites-list { columns:2 220px; }

body[data-year="2001"] .find-grid {
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}

body[data-year="2001"] .find-banner {
  min-width:0;
  color:#fff!important;
  background:linear-gradient(#7f5630,#452a17);
  border:3px outset #ba8b5a;
  border-radius:11px;
  box-shadow:3px 4px 0 #000;
  font:13px/1.45 Verdana,Arial,sans-serif;
  text-transform:none;
}

body[data-year="2001"] .find-banner:nth-child(even) {
  background:linear-gradient(#2f7775,#173e3d);
  border-color:#65aaa6;
}

body[data-year="2001"] #web-neighbors {
  color:#f5e8dc;
  border-top:1px solid #754326;
}

body[data-year="2001"] #web-neighbors img { image-rendering:pixelated; }

body[data-year="2001"] #dad .candle--ascii { display:none; }

body[data-year="2001"] #dad .candle-graphic {
  display:block;
  padding:8px;
  background:#080808;
  border:3px outset #8d603b;
  box-shadow:none;
}

body[data-year="2001"] #dad .candle-era { display:none; }
body[data-year="2001"] #dad .candle-era--2002 { display:block; }

body[data-year="2001"] :is(audio,iframe) { max-width:100%; }

body[data-year="2001"] :focus-visible {
  outline:3px solid #fff26a;
  outline-offset:3px;
}

@media(max-width:720px) {
  body[data-year="2001"] #home {
    width:calc(100% - 12px);
    margin-top:14px;
  }

  body[data-year="2001"] #home > center {
    gap:14px;
    padding:14px 10px 22px;
  }

  body[data-year="2001"] #home > center::before {
    top:315px;
    left:50%;
    width:min(520px,118vw);
  }

  body[data-year="2001"] #home .site-name {
    padding-inline:4px;
    font-size:clamp(31px,11vw,48px);
  }

  body[data-year="2001"] #home .site-name::after {
    font-size:9px;
    letter-spacing:.08em;
  }

  body[data-year="2001"] #home .home-grid tr {
    display:flex;
    flex-direction:column;
    gap:20px;
    min-height:0;
  }

  body[data-year="2001"] #home .home-grid td:first-child {
    order:1;
    width:100%;
  }

  body[data-year="2001"] #home .home-nav {
    order:2;
    width:100%;
  }

  body[data-year="2001"] #home .logo-keep {
    width:205px;
    height:205px;
    padding:12px;
  }

  body[data-year="2001"] #home img.logo {
    width:178px;
    height:178px;
  }

  body[data-year="2001"] #home .home-nav font {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:7px;
  }

  body[data-year="2001"] #home .home-nav a {
    min-width:0;
    min-height:48px;
    padding:7px 6px;
    font-size:11px;
  }

  body[data-year="2001"] #home .identity-line {
    align-self:center;
    width:min(430px,calc(100% - 20px));
    max-width:none;
    margin:4px auto 0;
    font-size:13px;
  }

  body[data-year="2001"] #home .identity-line::before,
  body[data-year="2001"] #home .identity-line::after { display:none; }

  body[data-year="2001"] #home .home-status { padding-inline:6px; }

  body[data-year="2001"] .page,
  body[data-year="2001"] #writing {
    width:calc(100% - 12px);
    margin:14px auto 36px;
    padding:18px 15px;
    box-shadow:4px 4px 0 #241009;
  }

  body[data-year="2001"] .page h3 { font-size:30px; }

  body[data-year="2001"] .find-grid { grid-template-columns:1fr; }
}