/* The dark olive 2005 MOCKUP, listed in the switcher as "2005 mockup".
   Scoped to html[data-theme="2005-mockup"], 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");
}
/* ONE COLOUR MODE, on purpose (Kris, 2026-09-22: "not all themes should have both light
   and dark mode ... only both 2026 themes, and future themes from now on ... for the prev
   ones, revert those to the original colour modes that should work no matter what the
   current system mode is"). This design only ever existed in the palette below, so there
   is no second half to ship and none is invented. `color-scheme:dark` PINS it: a reader
   whose system is set the other way still gets this design, not a browser's guess at it.
   A theme that DOES carry both halves follows the system — see :root in site.css and
   css/2026-coal.css. */
html[data-theme="2005-mockup"]{
  /* site.css's shared tokens, in this theme's own colours. A rule over there that reaches
     for --ink, --body, --dim, --line or --link must land HERE, or it lands on the default's
     palette: `.org-title .org-name{color:var(--dim)}` painted the organisation names on
     /work/ phosphor green inside this page until this mapping existed. */
  --ink:#eee;
  --body:#eee;
  --dim:#808077;
  --line:#3b3a2a;
  --link:#40bde8;
  color-scheme:dark;
  background:#201f0f}
html[data-theme="2005-mockup"] 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="2005-mockup"] .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="2005-mockup"] .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="2005-mockup"] .masthead::before{
  content:"KrisKhaira";
  display:block;
  font:400 38px/44px "Yesteryear","Brush Script MT",cursive;
  color:#fff;
}
html[data-theme="2005-mockup"] .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="2005-mockup"] .portrait,
html[data-theme="2005-mockup"] .wordmark{display:none}
html[data-theme="2005-mockup"] .name{
  position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;
}
html[data-theme="2005-mockup"] .meta{display:flex;flex-direction:column;padding:0 0 40px}
html[data-theme="2005-mockup"] .nav{order:-1}

html[data-theme="2005-mockup"] .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="2005-mockup"] .nav a{color:#eee;border:0}
html[data-theme="2005-mockup"] .nav a:hover,
html[data-theme="2005-mockup"] .nav a[aria-current]{color:#b9d300}
html[data-theme="2005-mockup"] .nav .out{margin-left:0;gap:0 34px}

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

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

html[data-theme="2005-mockup"] .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="2005-mockup"] .section-title,
html[data-theme="2005-mockup"] .cv h2,
html[data-theme="2005-mockup"] .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="2005-mockup"] .cv h3,
html[data-theme="2005-mockup"] .prose h3,
html[data-theme="2005-mockup"] .prose h4{font-weight:bold;font-size:12px;color:#fff;margin:16px 0 0}
html[data-theme="2005-mockup"] .cv .org{color:#eee}
html[data-theme="2005-mockup"] .when,
html[data-theme="2005-mockup"] .cv .when,
html[data-theme="2005-mockup"] .list time,
html[data-theme="2005-mockup"] .grid .y,
html[data-theme="2005-mockup"] .pager small{
  color:#808077;font-size:12px;font-weight:bold;letter-spacing:0;text-transform:none;
}
html[data-theme="2005-mockup"] .about em{color:#808077}
html[data-theme="2005-mockup"] .list li{border-top:1px solid #3b3a2a;padding:6px 0}
html[data-theme="2005-mockup"] .list li:first-child{border-top:0}

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

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

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