/* The dark olive 2005 MOCKUP, listed in the switcher as "2005 mockup".
   Scoped to html[data-theme="2005b"], which js/theme.js sets.
   Source: design-3.png in Google Drive (KrisKhaira - KKE/design-2), a flat image, never a web
   page. It reads "Powered by WordPress", its sample post is dated 24 February 2005 and its
   footer says 2004-2005 - and by 2005-03-08 the live site was on Textpattern with the white
   design (css/2005.css). So it was drawn around late February 2005 and probably never shipped.
   Colours are sampled from the image. Fonts are the closest available to what it shows:
   a bold brush script for the wordmark (Yesteryear), an old-style serif for the tagline and
   nav (Goudy Bookletter 1911), Lucida Grande for everything else - the Mac face it was drawn in.
   Both web fonts are SIL OFL and self-hosted in /fonts. */
@font-face{
  font-family:"Yesteryear";font-style:normal;font-weight:400;font-display:swap;
  src:url(/fonts/yesteryear.woff2) format("woff2");
}
@font-face{
  font-family:"Goudy Bookletter 1911";font-style:normal;font-weight:400;font-display:swap;
  src:url(/fonts/goudy-bookletter-1911.woff2) format("woff2");
}
html[data-theme="2005b"]{color-scheme:dark;background:#201f0f}
html[data-theme="2005b"] body{
  display:block;
  padding:0;
  background:#201f0f;
  color:#eee;
  font:12px/1.62 "Lucida Grande","Lucida Sans Unicode","Lucida Sans",Verdana,sans-serif;
  -webkit-font-smoothing:antialiased;
}
html[data-theme="2005b"] .card{
  position:relative;
  width:min(462px,100%);
  min-height:100vh;
  margin:0 auto;
  background:transparent;
  border:0;border-radius:0;
  overflow:visible;
}
/* wordmark: "KrisKhaira" in brush script, "since 1984" under it, a hairline, then the nav */
html[data-theme="2005b"] .masthead{
  display:block;
  padding:22px 0 8px;
  border-bottom:1px solid #3b3a2a;
  text-align:center;
  font-size:0;line-height:0;
  text-decoration:none;
}
html[data-theme="2005b"] .masthead::before{
  content:"KrisKhaira";
  display:block;
  font:400 38px/44px "Yesteryear","Brush Script MT",cursive;
  color:#fff;
}
html[data-theme="2005b"] .masthead::after{
  content:"since 1984";
  display:block;
  font:400 16px/18px "Goudy Bookletter 1911","Goudy Old Style",Garamond,Georgia,serif;
  letter-spacing:.03em;
  color:#ddd;
}
html[data-theme="2005b"] .portrait,
html[data-theme="2005b"] .tags{display:none}
html[data-theme="2005b"] .name{
  position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;
}
html[data-theme="2005b"] .meta{display:flex;flex-direction:column;padding:0 0 40px}
html[data-theme="2005b"] .nav{order:-1}

html[data-theme="2005b"] .nav{
  justify-content:center;
  margin:8px 0 48px;gap:0 34px;
  font:400 20px/28px "Goudy Bookletter 1911","Goudy Old Style",Garamond,Georgia,serif;
  letter-spacing:.02em;text-transform:lowercase;
}
html[data-theme="2005b"] .nav a{color:#eee;border:0}
html[data-theme="2005b"] .nav a:hover,
html[data-theme="2005b"] .nav a[aria-current]{color:#b9d300}
html[data-theme="2005b"] .nav .out{margin-left:0;gap:0 34px}

/* links: cyan in the text, lime for lists and "more", orange for feeds */
html[data-theme="2005b"] a,
html[data-theme="2005b"] .about a,
html[data-theme="2005b"] .prose a,
html[data-theme="2005b"] .lede a{color:#40bde8;font-weight:bold;text-decoration:none;border:0}
html[data-theme="2005b"] .list a,
html[data-theme="2005b"] .grid a{color:#b9d300;font-weight:bold;text-decoration:none;border:0}
html[data-theme="2005b"] .pager a{color:#ff9a00;font-weight:bold;text-decoration:none;border:0}
html[data-theme="2005b"] a:hover,
html[data-theme="2005b"] .grid a:hover .t{color:#fff}

html[data-theme="2005b"] .role{
  margin:0 0 12px;font-size:12px;font-weight:bold;letter-spacing:0;text-transform:none;color:#808077;
}
html[data-theme="2005b"] .about,
html[data-theme="2005b"] .cv,
html[data-theme="2005b"] .page,
html[data-theme="2005b"] .pager{border-top:0;color:#eee;font-size:12px;letter-spacing:0}
html[data-theme="2005b"] .about,
html[data-theme="2005b"] .page,
html[data-theme="2005b"] .cv{margin-top:0;padding-top:0}
html[data-theme="2005b"] .about p,
html[data-theme="2005b"] .prose p{margin:0 0 19px}

html[data-theme="2005b"] .title{
  margin:0 0 2px;
  font:bold 22px/1.25 "Lucida Grande","Lucida Sans Unicode","Lucida Sans",Verdana,sans-serif;
  letter-spacing:0;color:#fff;
}
html[data-theme="2005b"] .section-title,
html[data-theme="2005b"] .cv h2,
html[data-theme="2005b"] .year{
  margin:26px 0 6px;
  font:bold 15px/1.3 "Lucida Grande","Lucida Sans Unicode","Lucida Sans",Verdana,sans-serif;
  color:#fff;letter-spacing:0;text-transform:none;
}
html[data-theme="2005b"] .cv h3,
html[data-theme="2005b"] .prose h3,
html[data-theme="2005b"] .prose h4{font-weight:bold;font-size:12px;color:#fff;margin:16px 0 0}
html[data-theme="2005b"] .cv .org{color:#eee}
html[data-theme="2005b"] .when,
html[data-theme="2005b"] .cv .when,
html[data-theme="2005b"] .list time,
html[data-theme="2005b"] .grid .y,
html[data-theme="2005b"] .pager small{
  color:#808077;font-size:12px;font-weight:bold;letter-spacing:0;text-transform:none;
}
html[data-theme="2005b"] .about em{color:#808077}
html[data-theme="2005b"] .list li{border-top:1px solid #3b3a2a;padding:6px 0}
html[data-theme="2005b"] .list li:first-child{border-top:0}

html[data-theme="2005b"] .prose img,
html[data-theme="2005b"] .shot,
html[data-theme="2005b"] .grid .tn{border:1px solid #3b3a2a;border-radius:0;background:#2a2917;padding:4px}
html[data-theme="2005b"] .grid a:hover .tn{border-color:#b9d300}
html[data-theme="2005b"] .prose blockquote{border-left:2px solid #3b3a2a;margin-left:0;padding:0 0 0 16px;color:#bbb}
html[data-theme="2005b"] .pager{margin-top:24px;padding-top:10px;border-top:1px solid #3b3a2a}

/* centred footer: small grey, lime link */
html[data-theme="2005b"] .meta .foot{
  margin:70px 0 0;padding:0;border:0;text-align:center;
  color:#808077;font-size:10px;letter-spacing:0;
}
html[data-theme="2005b"] .meta .themes{margin:2px 0 0;padding:0 0 30px;text-align:center;color:#808077;font-size:10px;letter-spacing:0}
html[data-theme="2005b"] .themes button{color:#b9d300;font-weight:bold;border:0}
html[data-theme="2005b"] .themes button:hover,
html[data-theme="2005b"] .themes button[aria-pressed="true"]{color:#fff}

@media (max-width:520px){
  html[data-theme="2005b"] .card{padding:0 16px}
  html[data-theme="2005b"] .nav{gap:0 18px;font-size:17px;margin-bottom:32px}
  html[data-theme="2005b"] .nav .out{gap:0 18px}
  html[data-theme="2005b"] .masthead::before{font-size:32px}
}