/* A 2004 theme built around the lime "kk" logo: a chevron inside a swooping ring.
   Scoped to html[data-theme="2004"], which js/theme.js sets.
   RECOVERED: the logo (traced from the thumbnail inside kk_avatar_mydefcon-1.ai, 2004-09-12),
   its lime on a black dot grid, and the masthead words "Kris Khaira, New Media Designer"
   (the site's <h1> on 2004-11-29, Wayback Machine).
   RECONSTRUCTED: everything else. The 2004 stylesheet (styles/main.css) was never archived,
   so the layout is a plain small-Verdana column of the period, not a copy of the real page. */
html[data-theme="2004"]{color-scheme:dark;background:#000}
html[data-theme="2004"] body{
  display:block;
  padding:0;
  background:#000 radial-gradient(#333 .7px,transparent .8px) 0 0/4px 4px;
  color:#ccc;
  font:11px/18px Verdana,"Lucida Grande",Tahoma,Helvetica,sans-serif;
  -webkit-font-smoothing:auto;
}
html[data-theme="2004"] .card{
  position:relative;
  width:min(600px,100%);
  min-height:100vh;
  margin:0 auto;
  padding:0 20px;
  background:#000;
  border:0;border-left:1px solid #222;border-right:1px solid #222;
  border-radius:0;
  overflow:hidden;
}
html[data-theme="2004"] .masthead{
  display:block;
  height:112px;
  padding:24px 0 0 80px;
  background:url(/img/2004/kk-2004.svg) left 24px/64px 64px no-repeat;
  font-size:0;line-height:0;
  text-decoration:none;
}
html[data-theme="2004"] .masthead::after{
  content:"Kris Khaira, New Media Designer";
  display:block;
  font:bold 18px/64px Verdana,Tahoma,Helvetica,sans-serif;
  letter-spacing:-.02em;
  color:#fff;
}
html[data-theme="2004"] .portrait,
html[data-theme="2004"] .tags{display:none}
html[data-theme="2004"] .name{
  position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;
}
html[data-theme="2004"] .meta{display:flex;flex-direction:column;padding:0 0 30px}
html[data-theme="2004"] .nav{order:-1}

html[data-theme="2004"] a,
html[data-theme="2004"] .about a,
html[data-theme="2004"] .prose a,
html[data-theme="2004"] .lede a,
html[data-theme="2004"] .list a,
html[data-theme="2004"] .grid a,
html[data-theme="2004"] .pager a{color:#6c3;font-weight:bold;text-decoration:none;border:0}
html[data-theme="2004"] a:hover,
html[data-theme="2004"] .grid a:hover .t{color:#000;background:#6c3;text-decoration:none}

html[data-theme="2004"] .nav{
  margin:0 0 22px;padding:6px 0;gap:0 18px;
  border-top:1px solid #6c3;border-bottom:1px solid #222;
  font:bold 11px/18px Verdana,Tahoma,sans-serif;letter-spacing:0;text-transform:lowercase;
}
html[data-theme="2004"] .nav a{color:#6c3;border:0;padding:0 2px}
html[data-theme="2004"] .nav a:hover,
html[data-theme="2004"] .nav a[aria-current]{color:#000;background:#6c3}
html[data-theme="2004"] .nav .out{gap:0 18px}
html[data-theme="2004"] .nav .out a{color:#999;font-weight:normal}

html[data-theme="2004"] .role{
  margin:0 0 14px;font-size:11px;letter-spacing:0;text-transform:none;color:#999;
}
html[data-theme="2004"] .about,
html[data-theme="2004"] .cv,
html[data-theme="2004"] .page,
html[data-theme="2004"] .pager{border-top:0;color:#ccc;font-size:11px;letter-spacing:0}
html[data-theme="2004"] .about,
html[data-theme="2004"] .page,
html[data-theme="2004"] .cv{margin-top:0;padding-top:0}

html[data-theme="2004"] .title{
  margin:0 0 6px;font:bold 18px/1.3 Verdana,Tahoma,sans-serif;letter-spacing:-.02em;color:#fff;
}
html[data-theme="2004"] .section-title,
html[data-theme="2004"] .cv h2,
html[data-theme="2004"] .year{
  margin:22px 0 8px;padding:0 0 3px;
  border-bottom:1px solid #222;
  font:bold 11px/18px Verdana,Tahoma,sans-serif;
  color:#6c3;text-transform:uppercase;letter-spacing:.1em;
}
html[data-theme="2004"] .cv h3,
html[data-theme="2004"] .prose h3,
html[data-theme="2004"] .prose h4{font:bold 11px/18px Verdana,Tahoma,sans-serif;color:#fff;margin:16px 0 0}
html[data-theme="2004"] .cv .org{color:#ccc}
html[data-theme="2004"] .when,
html[data-theme="2004"] .cv .when,
html[data-theme="2004"] .list time,
html[data-theme="2004"] .grid .y,
html[data-theme="2004"] .pager small{
  color:#777;font-size:10px;font-weight:normal;letter-spacing:0;text-transform:none;
}
html[data-theme="2004"] .about em{color:#999}
html[data-theme="2004"] .list li{border-top:1px dotted #333;padding:5px 0}
html[data-theme="2004"] .list li:first-child{border-top:0}

html[data-theme="2004"] .prose img,
html[data-theme="2004"] .shot,
html[data-theme="2004"] .grid .tn{background:#111;border:1px solid #333;border-radius:0;padding:4px}
html[data-theme="2004"] .grid a:hover .tn{border-color:#6c3}
html[data-theme="2004"] .grid a:hover .t{background:none;color:#fff}
html[data-theme="2004"] .prose blockquote{border-left:3px solid #6c3;margin-left:0;padding:0 0 0 14px;color:#999}
html[data-theme="2004"] .pager{margin-top:20px;padding-top:10px;border-top:1px solid #222}

html[data-theme="2004"] .meta .foot{
  margin:30px 0 0;padding:10px 0 0;border-top:1px solid #222;
  color:#777;font-size:10px;letter-spacing:0;
}
html[data-theme="2004"] .meta .themes{margin:4px 0 0;padding:0 0 20px;color:#777;font-size:10px;letter-spacing:0}
html[data-theme="2004"] .themes button{color:#6c3;border:0}
html[data-theme="2004"] .themes button:hover,
html[data-theme="2004"] .themes button[aria-pressed="true"]{color:#fff}

@media (max-width:640px){
  html[data-theme="2004"] .card{padding:0 16px;border:0}
  html[data-theme="2004"] .masthead{height:88px;padding:16px 0 0 60px;background-size:48px 48px;background-position:left 16px}
  html[data-theme="2004"] .masthead::after{font-size:13px;line-height:48px}
}