/* The 2005 kriskhaira.com design: white, three columns, the teal double-K arrow logo.
   Scoped to html[data-theme="2005"], which js/theme.js sets.
   RECOVERED: the numbers. They come from the site's own stylesheet as the Wayback Machine
   archived it on 2005-03-08 (textpattern/css.php?s=default): 760px white container, 100px head,
   150px menus either side of a centre column ruled in grey, Verdana 11px/18px, grey Helvetica
   headings with teal #179ABA title links, #C00 menu links, #999 footer. The mark is the site's
   real 16px favicon (captured 2005-08-11), whose teal #1899b8 matches that stylesheet.
   LOST: images/logo.gif, the 760x100 header image, was never archived. The head here is the
   favicon enlarged beside the words the header carried ("Muammar Kris Khaira", Aug 2005). */
html[data-theme="2005"]{color-scheme:light;background:#fff}
html[data-theme="2005"] body{
  display:block;
  padding:0;
  background:#fff;
  color:#000;
  font:11px/18px Verdana,"Lucida Grande",Tahoma,Helvetica,sans-serif;
  -webkit-font-smoothing:auto;
}
html[data-theme="2005"] .card{
  position:relative;
  width:min(760px,100%);
  min-height:100vh;
  margin:0 auto;
  background:#fff;
  border:0;border-radius:0;
  overflow:hidden;
}
html[data-theme="2005"] .masthead{
  display:block;
  height:100px;
  padding:26px 0 0 222px;
  background:url(/img/2005/kk-2005.png) 160px 26px/48px 48px no-repeat;
  image-rendering:pixelated;
  font-size:0;line-height:0;
  text-decoration:none;
}
html[data-theme="2005"] .masthead::after{
  content:"Muammar Kris Khaira";
  display:block;
  font:normal 22px/48px Helvetica,Arial,sans-serif;
  color:#179aba;
}
html[data-theme="2005"] .masthead:hover{background-color:transparent}
html[data-theme="2005"] .portrait,
html[data-theme="2005"] .tags{display:none}
html[data-theme="2005"] .name{
  position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;
}
/* #center: margin 155px either side, ruled left and right */
html[data-theme="2005"] .meta{
  margin:0 155px;
  padding:30px 10px 0;
  border-left:1px solid grey;border-right:1px solid grey;
}

html[data-theme="2005"] a,
html[data-theme="2005"] .about a,
html[data-theme="2005"] .prose a,
html[data-theme="2005"] .lede a,
html[data-theme="2005"] .list a,
html[data-theme="2005"] .grid a,
html[data-theme="2005"] .pager a{color:#179aba;font-weight:normal;text-decoration:underline;border:0}
html[data-theme="2005"] a:hover,
html[data-theme="2005"] .grid a:hover .t{color:#333}

/* #menu on the left, right-aligned 10px; #submenu on the right — both in #C00 */
html[data-theme="2005"] .nav{
  position:absolute;top:130px;left:0;width:150px;margin:0;
  display:block;text-align:right;
  font:10px/15px Verdana,Tahoma,sans-serif;letter-spacing:0;text-transform:none;
}
html[data-theme="2005"] .nav a{display:block;padding:0 10px 6px;color:#c00;border:0;text-decoration:none}
html[data-theme="2005"] .nav a:hover,
html[data-theme="2005"] .nav a[aria-current]{color:#333;text-decoration:underline}
html[data-theme="2005"] .nav .out{
  position:absolute;top:0;left:610px;width:150px;margin:0;display:block;text-align:left;
}

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

/* h2: grey Helvetica; the post title inside it was a 1.4em teal link */
html[data-theme="2005"] .title{
  margin:0 0 10px;font:normal 1.4em/1.3 Helvetica,Arial,sans-serif;color:#179aba;letter-spacing:0;
}
html[data-theme="2005"] .section-title,
html[data-theme="2005"] .cv h2,
html[data-theme="2005"] .year{
  margin:20px 0 10px;font:normal 1em/18px Helvetica,Arial,sans-serif;
  color:#999;letter-spacing:0;text-transform:none;
}
html[data-theme="2005"] .cv h3,
html[data-theme="2005"] .prose h3,
html[data-theme="2005"] .prose h4{font:bold 11px/18px Verdana,Tahoma,sans-serif;color:#000;margin:0 0 1em}
html[data-theme="2005"] .cv .org{color:#000}
html[data-theme="2005"] .when,
html[data-theme="2005"] .cv .when,
html[data-theme="2005"] .list time,
html[data-theme="2005"] .grid .y,
html[data-theme="2005"] .pager small{
  color:#999;font-size:10px;font-weight:normal;letter-spacing:.1em;text-transform:none;
}
html[data-theme="2005"] .about em{color:#999}
html[data-theme="2005"] .list li{border-top:1px solid #ccc;padding:5px 0}
html[data-theme="2005"] .list li:first-child{border-top:0}

html[data-theme="2005"] .prose img,
html[data-theme="2005"] .shot,
html[data-theme="2005"] .grid .tn{border:1px solid #ccc;border-radius:0;background:#fff;padding:0}
html[data-theme="2005"] .grid a:hover .tn{border-color:#179aba}
html[data-theme="2005"] .prose blockquote{margin:0 0 1em 20px;padding:0 10px;border:0;color:#000}
html[data-theme="2005"] .pager{margin-top:20px;padding-top:10px;border-top:1px solid #ccc}

/* #footer: clear both, ruled in #ccc, grey words — it ran under all three columns */
html[data-theme="2005"] .meta .foot{
  margin:40px -166px 0;padding:10px 10px 0;border-top:1px solid #ccc;
  background:#fff;color:#999;font-size:11px;letter-spacing:0;
}
html[data-theme="2005"] .meta .themes{
  margin:0 -166px;padding:0 10px 14px;background:#fff;color:#999;font-size:10px;letter-spacing:0;
}
html[data-theme="2005"] .themes button{color:#c00;border:0}
html[data-theme="2005"] .themes button:hover,
html[data-theme="2005"] .themes button[aria-pressed="true"]{color:#333;text-decoration:underline}

@media (max-width:700px){
  html[data-theme="2005"] .masthead{height:76px;padding:14px 0 0 74px;background-position:14px 14px}
  html[data-theme="2005"] .masthead::after{font-size:18px}
  html[data-theme="2005"] .meta{margin:0;padding:14px 14px 0;border:0;border-top:1px solid grey}
  html[data-theme="2005"] .nav{position:static;width:auto;display:flex;gap:0 4px;margin:0 0 14px;text-align:left}
  html[data-theme="2005"] .nav a{padding:0 10px 0 0}
  html[data-theme="2005"] .nav .out{position:static;width:auto;display:flex;margin-left:auto}
  html[data-theme="2005"] .meta .foot{margin:30px 0 0;padding:10px 0 0}
  html[data-theme="2005"] .meta .themes{margin:0;padding:0 0 14px}
}