/*
  2003: playful enhanced-CD / Flash-authoring interface.
  Period source material:
  - https://jonuleis.com/tmbgno/ (Ruffle rebuild of the 2002 No! CD-ROM)
  - https://www.chopshop.studio/tmbgno (original studio screengrabs)
  - https://www.chopshopstore.com/blogs/word/the-no-interactive-is-back

  The source interface uses saturated full-screen scenes, cutout characters,
  giant captions and terse MORE / QUIT-style controls. This stylesheet makes
  an original 2003 CD-ROM menu from the site's existing notebook image, flat
  color tiles and CSS-drawn object badges. The supplied 2000 fan-page reference
  informs the loose, object-like menu and ordinary blue links on inner pages.
*/

body[data-year="2003"] {
  --bg:#151321;
  --ink:#161616;
  --link:#0000cc;
  --visited:#6e2586;
  --surface:#fff8d7;
  --page-bg:#fff9df;
  --card-bg:#fffef2;
  --card-border:2px solid #171717;
  --card-radius:0;
  --card-shadow:4px 4px 0 #171717;
  --panel-border:4px solid #171717;
  --panel-radius:0;
  --panel-shadow:8px 8px 0 #ec5d42;
  --soft-edge:#171717;
  --accent:#e94e3d;
  --active:#173cb5;
  --muted:#554d42;
  --font:Verdana,Arial,sans-serif;
  --mono:"Courier New",monospace;
  --title-font:"Arial Black",Arial,sans-serif;
  --page-width:960px;
  --writing-width:960px;
  --map-a:#ffd941;
  --map-b:#ef6548;
  --map-line:#151515;
  --map-node:#fff;
  --map-text:#151515;
  --map-star:#38bdb1;
  margin:0;
  color:#161616;
  background:#151321;
  font:16px/1.65 Verdana,Arial,sans-serif;
}

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

body[data-year="2003"] #timebar {
  width:min(990px,100%);
  margin:0 auto;
  padding:12px 16px;
  color:#fff;
  background:#151321;
  border:0;
  border-bottom:2px solid #443e61;
  box-shadow:none;
  font:13px/1.55 Verdana,Arial,sans-serif;
}

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

body[data-year="2003"] #timebar .year-option span {
  min-height:31px;
  padding:5px 8px;
  color:#171717;
  background:#fff7d2;
  border:2px solid #171717;
  border-radius:0;
  box-shadow:2px 2px 0 #665e80;
  font:700 12px/1.4 Verdana,Arial,sans-serif;
}

body[data-year="2003"] #timebar .year-option input:checked + span {
  color:#171717;
  background:#ffd83f;
  border-color:#171717;
  box-shadow:3px 3px 0 #ed5c43;
}

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

body[data-year="2003"] #home {
  display:block;
  width:min(990px,calc(100% - 30px));
  max-width:990px;
  min-height:0;
  margin:25px auto 60px;
  padding:0;
  color:#161616;
  background:transparent;
  border:0;
  border-radius:0;
  box-shadow:none;
}

body[data-year="2003"] #home > center {
  position:relative;
  isolation:isolate;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:18px;
  width:100%;
  margin:0;
  padding:26px 28px 24px;
  overflow:hidden;
  color:#161616;
  background:
    linear-gradient(135deg,transparent 0 74%,#f26747 74% 79%,transparent 79%) 0 0/190px 190px,
    radial-gradient(circle at 9% 13%,#fff 0 7px,#171717 7px 10px,transparent 10px),
    radial-gradient(circle at 91% 86%,#32b9ad 0 20px,#171717 20px 23px,transparent 23px),
    #ffd83f;
  border:5px solid #171717;
  border-radius:0;
  box-shadow:10px 10px 0 #ef5e43;
  text-align:center;
}

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

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

body[data-year="2003"] #home .site-name {
  order:1;
  display:block!important;
  width:min(760px,94%);
  margin:0 auto 3px;
  padding:20px 28px 17px;
  color:#151515;
  background:#fffef3;
  border:4px solid #151515;
  border-radius:48% 52% 45% 55% / 55% 46% 54% 45%;
  box-shadow:7px 7px 0 #2faea5;
  font:900 clamp(35px,6.2vw,61px)/1 "Arial Black",Arial,sans-serif;
  letter-spacing:-.045em;
  text-transform:none;
  text-shadow:none;
  transform:rotate(-1deg);
  overflow-wrap:normal;
  word-break:normal;
}

body[data-year="2003"] #home .site-name::after {
  content:"CLICK A THING TO BEGIN";
  display:block;
  margin:10px 0 0;
  color:#e44735;
  font:900 12px/1.3 Verdana,Arial,sans-serif;
  letter-spacing:.16em;
  text-transform:uppercase;
}

body[data-year="2003"] #home #period-feature-banner {
  order:2;
  width:min(500px,100%);
  max-width:500px;
  margin:0 auto;
  padding:6px;
  color:#fff;
  background:#171717;
  border:3px solid #171717;
  box-shadow:4px 4px 0 #2faea5;
  font:11px/1.4 Verdana,Arial,sans-serif;
}

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

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

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

body[data-year="2003"] #home .home-grid tr {
  display:grid;
  grid-template-columns:minmax(220px,270px) minmax(0,1fr);
  gap:25px;
  align-items:center;
  width:100%;
}

body[data-year="2003"] #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="2003"] #home .logo-keep {
  position:relative;
  display:grid;
  place-items:center;
  width:250px;
  height:230px;
  margin:0 auto;
  padding:20px 20px 34px;
  overflow:hidden;
  color:#151515;
  background:conic-gradient(from 8deg,#ef5f43 0 12.5%,#fff4b7 12.5% 25%,#2fb4aa 25% 37.5%,#fff 37.5% 50%,#6a52ae 50% 62.5%,#fff4b7 62.5% 75%,#ef5f43 75% 87.5%,#fff 87.5%);
  border:4px solid #151515;
  border-radius:0;
  box-shadow:7px 7px 0 #744e9d;
  transform:rotate(-2deg);
}

body[data-year="2003"] #home .logo-keep::after {
  content:"CLICK THE NOTEBOOK";
  position:absolute;
  right:0;
  bottom:0;
  left:0;
  padding:7px 5px;
  color:#fff;
  background:#151515;
  font:900 10px/1.25 Verdana,Arial,sans-serif;
  letter-spacing:.08em;
}

body[data-year="2003"] #home img.logo {
  display:block;
  width:178px;
  height:178px;
  max-width:100%;
  object-fit:contain;
  opacity:1!important;
  filter:none!important;
  transform:rotate(2deg);
}

body[data-year="2003"] #home .home-nav { min-width:0; }

body[data-year="2003"] #home .home-nav font {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:13px;
  width:100%;
  font:700 11px/1.25 Verdana,Arial,sans-serif;
}

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

body[data-year="2003"] #home .home-nav a {
  position:relative;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  min-width:0;
  min-height:98px;
  margin:0;
  padding:52px 6px 9px;
  color:#161616!important;
  background:#fffdf0;
  border:3px solid #161616;
  border-radius:0;
  box-shadow:4px 4px 0 #161616;
  font:700 11px/1.25 Verdana,Arial,sans-serif;
  letter-spacing:0;
  text-align:center;
  text-decoration:none;
  text-transform:none;
  white-space:normal;
  overflow-wrap:normal;
  transform:rotate(-1deg);
}

body[data-year="2003"] #home .home-nav a:nth-of-type(even) {
  background:#32b8ad;
  transform:rotate(1deg);
}

body[data-year="2003"] #home .home-nav a:nth-of-type(3n) { background:#f26a4d; }
body[data-year="2003"] #home .home-nav a:nth-of-type(4n) { background:#a78bd1; }

body[data-year="2003"] #home .home-nav a::before {
  content:"i";
  position:absolute;
  top:9px;
  left:50%;
  display:grid;
  place-items:center;
  width:38px;
  height:38px;
  color:#151515;
  background:#fff;
  border:2px solid #151515;
  border-radius:50%;
  box-shadow:2px 2px 0 #151515;
  font:900 24px/1 Arial,sans-serif;
  transform:translateX(-50%);
}

body[data-year="2003"] #home .home-nav a:nth-of-type(2)::before { content:"≡"; border-radius:0; }
body[data-year="2003"] #home .home-nav a:nth-of-type(3)::before { content:"★"; border-radius:0; }
body[data-year="2003"] #home .home-nav a:nth-of-type(4)::before { content:"?"; }
body[data-year="2003"] #home .home-nav a:nth-of-type(5)::before { content:"●"; }
body[data-year="2003"] #home .home-nav a:nth-of-type(6)::before { content:"✉"; border-radius:0; font-size:22px; }
body[data-year="2003"] #home .home-nav a:nth-of-type(7)::before { content:"⌂"; border-radius:0; }
body[data-year="2003"] #home .home-nav a:nth-of-type(8)::before { content:"→"; border-radius:0; }

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

body[data-year="2003"] #home .home-nav a:hover,
body[data-year="2003"] #home .home-nav a:focus-visible {
  color:#0000a8!important;
  background:#fff;
  transform:translate(2px,2px);
  box-shadow:2px 2px 0 #161616;
  text-decoration:underline;
}

body[data-year="2003"] #home .identity-line {
  order:4;
  width:min(770px,100%);
  max-width:770px;
  margin:3px auto 0;
  padding:16px 18px;
  color:#151515;
  background:#fffef4;
  border:3px solid #151515;
  border-radius:0;
  box-shadow:5px 5px 0 #2faea5;
  font:700 15px/1.5 Verdana,Arial,sans-serif;
  text-align:left;
}

body[data-year="2003"] #home .identity-line::before {
  content:"ABOUT THIS DISC";
  display:block;
  margin:-16px -18px 13px;
  padding:6px 10px;
  color:#fff;
  background:#171717;
  font:900 10px/1.3 Verdana,Arial,sans-serif;
  letter-spacing:.12em;
  text-align:center;
}

body[data-year="2003"] #home .identity-line::after { content:none; }

body[data-year="2003"] #home .era-on {
  order:5;
  display:flex;
  width:fit-content;
  min-width:205px;
  min-height:55px;
  margin:2px auto 0;
  padding:8px 14px;
  color:#fff!important;
  background:#171717;
  border:3px solid #171717;
  border-radius:0;
  box-shadow:5px 5px 0 #ef6045;
  text-decoration:none;
  transform:none;
}

body[data-year="2003"] #home .era-on::before {
  content:"▶";
  display:grid;
  place-items:center;
  flex:0 0 35px;
  width:35px;
  height:35px;
  color:#171717;
  background:#ffd83f;
  border:2px solid #fff;
  font:900 16px/1 Arial,sans-serif;
}

body[data-year="2003"] #home .era-on::after { content:none; }
body[data-year="2003"] #home .era-on-eye { display:none; }
body[data-year="2003"] #home .era-on-copy { color:#fff; }

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

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

body[data-year="2003"] #home .dreamland-copy {
  order:6;
  display:block;
  width:min(770px,100%);
  margin:0;
  padding:15px 18px;
  color:#151515;
  background:#32b8ad;
  border:3px solid #151515;
  font:14px/1.65 Verdana,Arial,sans-serif;
  text-align:left;
}

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

body[data-year="2003"] #home .dreamland-copy a,
body[data-year="2003"] #home .identity-line a { color:#0000a8!important; text-decoration:underline; }

body[data-year="2003"] #home .home-quote {
  order:7;
  display:block;
  width:min(770px,100%);
  margin:0;
  padding:15px 18px;
  color:#151515;
  background:#fffef4;
  border:3px solid #151515;
  box-shadow:5px 5px 0 #a78bd1;
  font:16px/1.65 Georgia,"Times New Roman",serif;
  text-align:left;
}

body[data-year="2003"] #home .home-quote a { color:#0000a8!important; }

body[data-year="2003"] #home .home-dad {
  order:8;
  display:block;
  margin:2px 0 0;
  padding:7px 12px;
  color:#151515;
  background:#fff;
  border:2px solid #151515;
  font:12px/1.45 Verdana,Arial,sans-serif;
}

body[data-year="2003"] #home .home-dad a { color:#0000a8!important; }

body[data-year="2003"] #home .home-status {
  order:9;
  display:block;
  width:100%;
  max-width:100%;
  margin:4px 0 0;
  padding:9px 10px;
  color:#171717;
  background:transparent;
  border:0;
  border-top:2px solid #171717;
  box-shadow:none;
  font:10px/1.6 Verdana,Arial,sans-serif;
  text-align:center;
}

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

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

body[data-year="2003"] .page,
body[data-year="2003"] #writing {
  width:min(960px,calc(100% - 30px));
  max-width:960px;
  margin:25px auto 58px;
  padding:30px;
  color:#171717;
  background:#fff9df;
  border:4px solid #171717;
  border-radius:0;
  box-shadow:8px 8px 0 #ef5e43;
  font:16px/1.72 Verdana,Arial,sans-serif;
}

body[data-year="2003"] .page h3 {
  margin:5px 0 24px;
  padding:13px 16px;
  color:#171717;
  background:#ffd83f;
  border:3px solid #171717;
  border-radius:0;
  box-shadow:4px 4px 0 #2faea5;
  font:900 clamp(27px,4.8vw,43px)/1.15 "Arial Black",Arial,sans-serif;
  letter-spacing:-.035em;
  text-transform:none;
  text-shadow:none;
  overflow-wrap:normal;
  word-break:normal;
}

body[data-year="2003"] .page h4 {
  display:block;
  width:fit-content;
  max-width:100%;
  margin:26px 0 11px;
  padding:4px 7px;
  color:#171717;
  background:#32b8ad;
  border:2px solid #171717;
  font:900 19px/1.35 Verdana,Arial,sans-serif;
  letter-spacing:0;
}

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

body[data-year="2003"] .page a {
  color:#0000cc!important;
  text-decoration:underline;
  text-underline-offset:2px;
}

body[data-year="2003"] .page a:visited { color:#6e2586!important; }
body[data-year="2003"] .page .quiet,
body[data-year="2003"] .quiet { color:#554d42; }

body[data-year="2003"] :is(.era-card,.work-section,.publication-audio,.traveler-faq,#favorite-sites) {
  color:#171717;
  background:#fffef2;
  border:2px solid #171717;
  border-radius:0;
  box-shadow:4px 4px 0 #ffd83f;
}

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

body[data-year="2003"] #writing > ul > li {
  margin-bottom:13px;
  padding-bottom:13px;
  border-bottom:1px dotted #171717;
}

body[data-year="2003"] .speaking-invite {
  color:#171717;
  background:#fff;
  border:3px solid #e94e3d;
  box-shadow:4px 4px 0 #171717;
}

body[data-year="2003"] .room-illustration {
  margin:16px 0;
  padding:0;
  overflow:hidden;
  background:#171717;
  border:4px solid #171717;
  border-radius:0;
  box-shadow:6px 6px 0 #2faea5;
}

body[data-year="2003"] .room-stage > img { border:0; }
body[data-year="2003"] #favorite-sites-list { columns:2 220px; }

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

body[data-year="2003"] .find-banner {
  min-width:0;
  min-height:82px;
  color:#171717!important;
  background:#ffd83f;
  border:3px solid #171717;
  border-radius:0;
  box-shadow:4px 4px 0 #171717;
  font:12px/1.4 Verdana,Arial,sans-serif;
  text-transform:none;
}

body[data-year="2003"] .find-banner:nth-child(3n + 2) { background:#32b8ad; }
body[data-year="2003"] .find-banner:nth-child(3n) { background:#f26a4d; }

body[data-year="2003"] #web-neighbors {
  color:#171717;
  border-top:2px solid #171717;
}

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

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

body[data-year="2003"] #dad .candle-graphic {
  display:block;
  padding:8px;
  background:#fff;
  border:3px solid #171717;
  box-shadow:4px 4px 0 #ffd83f;
}

body[data-year="2003"] #dad .candle-era { display:none; }
body[data-year="2003"] #dad .candle-era--2002 { display:block; }
body[data-year="2003"] :is(audio,iframe) { max-width:100%; }

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

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

  body[data-year="2003"] #home > center {
    gap:15px;
    padding:18px 10px 20px;
    border-width:4px;
    box-shadow:5px 5px 0 #ef5e43;
  }

  body[data-year="2003"] #home .site-name {
    width:96%;
    padding:16px 12px 14px;
    font-size:clamp(29px,10vw,44px);
    box-shadow:4px 4px 0 #2faea5;
  }

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

  body[data-year="2003"] #home .home-grid tr {
    display:flex;
    flex-direction:column;
    gap:22px;
  }

  body[data-year="2003"] #home .home-grid td,
  body[data-year="2003"] #home .home-nav { width:100%; }

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

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

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

  body[data-year="2003"] #home .home-nav a {
    min-height:91px;
    padding-inline:5px;
  }

  body[data-year="2003"] #home .identity-line,
  body[data-year="2003"] #home .dreamland-copy,
  body[data-year="2003"] #home .home-quote {
    width:100%;
    max-width:none;
  }

  body[data-year="2003"] .page,
  body[data-year="2003"] #writing {
    width:calc(100% - 14px);
    margin:15px auto 38px;
    padding:18px 15px;
    border-width:3px;
    box-shadow:5px 5px 0 #ef5e43;
  }

  body[data-year="2003"] .page h3 {
    margin-top:2px;
    padding:11px 10px;
    font-size:29px;
  }

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