/*
  nurgumus.com: the whole stylesheet.
  one file, no preprocessor. change the variables at the top and the
  rest of the site follows along.
*/

/* ---------- colours & fonts ---------- */

:root {
  color-scheme: light dark;

  --paper:   #fbfaf6;
  --ink:     #1d1c1a;
  --muted:   #69655d;
  --rule:    #dcd8cd;
  --link:    #1f4fa8;
  --visited: #6a3d9a;
  --code-bg: #f1eee6;
  --tk-bg:   #fbefbf;
  --tk-ink:  #5f4a00;
  --select:  #efe3a8;

  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --mono:  ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, "Liberation Mono", monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper:   #161513;
    --ink:     #e4dfd4;
    --muted:   #a19b8f;
    --rule:    #38352f;
    --link:    #93b4f2;
    --visited: #c6a6ea;
    --code-bg: #211f1b;
    --tk-bg:   #3a3314;
    --tk-ink:  #f0d98a;
    --select:  #4a4220;
  }
}

/* ---------- base ---------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0 auto;
  max-width: 42rem;
  padding: 2.5rem 1.25rem 3rem;
  background: var(--paper);
  color: var(--ink);
  font: 1.0625rem/1.65 var(--serif);
  overflow-wrap: break-word;
}

::selection { background: var(--select); }

h1, h2, h3 { line-height: 1.25; font-weight: 600; }
h1 { font-size: 1.7rem; margin: 0 0 1rem; }
h1 + .meta { margin-top: -.65rem; }
h2 { font-size: 1.2rem; margin: 2.75rem 0 .6rem; }
h3 { font-size: 1.02rem; margin: 2rem 0 .4rem; }

p, ul, ol, dl, pre, blockquote, table, figure { margin: 0 0 1rem; }
ul, ol { padding-left: 1.4rem; }
li { margin-bottom: .25rem; }
li::marker { color: var(--muted); }

a {
  color: var(--link);
  text-decoration-thickness: 1px;
  text-underline-offset: .16em;
}
a:visited { color: var(--visited); }
a:hover { text-decoration-thickness: 2px; }

:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }

img { display: block; max-width: 100%; height: auto; }

hr { border: 0; margin: 2.75rem 0; text-align: center; color: var(--muted); }
hr::after { content: "*  *  *"; white-space: pre; font-family: var(--mono); font-size: .875rem; }

blockquote {
  margin-left: 0;
  padding-left: 1rem;
  border-left: 2px solid var(--rule);
  font-style: italic;
}

code, kbd, samp, pre { font-family: var(--mono); font-size: .875em; }
:not(pre) > code { background: var(--code-bg); padding: .05em .3em; border-radius: 2px; }
pre {
  background: var(--code-bg);
  border-left: 2px solid var(--rule);
  padding: .8rem 1rem;
  line-height: 1.5;
  overflow-x: auto;
}
pre code { font-size: 1em; }

figure { margin: 1.75rem 0; }
figcaption { margin-top: .4rem; font-size: .875rem; color: var(--muted); }

table { border-collapse: collapse; }
th, td { text-align: left; vertical-align: baseline; padding: .3rem 1rem .3rem 0; }
th { font-weight: normal; color: var(--muted); border-bottom: 1px solid var(--rule); }

sup { line-height: 0; }

/* ---------- small helpers ---------- */

.meta {
  font-family: var(--mono);
  font-size: .8125rem;
  color: var(--muted);
}

.label {
  font-family: var(--mono);
  font-size: .8125rem;
  font-weight: normal;
  color: var(--muted);
  margin: 2.5rem 0 .6rem;
}

/* "TK" = "to come". every placeholder on the site uses this, so
   searching the files for "TK" finds everything left to fill in. */
.tk {
  font-family: var(--mono);
  font-size: .8125em;
  font-style: normal;
  background: var(--tk-bg);
  color: var(--tk-ink);
  padding: .05em .35em;
  border-radius: 2px;
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.skip { position: absolute; left: -9999px; top: .5rem; }
.skip:focus { left: .5rem; background: var(--paper); padding: .2rem .5rem; z-index: 1; }

/* ---------- header & footer ---------- */

.site-header {
  font-family: var(--mono);
  font-size: .8125rem;
  color: var(--muted);
  margin-bottom: 3.25rem;
}
.site-header .path { margin: 0 0 .3rem; }
.site-header .path a { color: inherit; }

.site-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .15rem 1.1rem;
}
.site-nav li { margin: 0; }
.site-nav a[aria-current="page"] { color: var(--ink); text-decoration: none; }
.site-nav a[aria-current="page"]::before { content: "*"; content: "*" / ""; }

.site-footer {
  margin-top: 5rem;
  padding-top: .9rem;
  border-top: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: .75rem;
  color: var(--muted);
}
.site-footer p { margin: 0 0 .2rem; }

/* ---------- homepage: index of / ---------- */

.listing { width: 100%; margin-top: 2.5rem; font-size: .9375rem; }
.listing caption {
  text-align: left;
  font-family: var(--mono);
  font-size: .8125rem;
  color: var(--muted);
  padding-bottom: .35rem;
}
.listing th { font-family: var(--mono); font-size: .75rem; }
.listing td:first-child { font-family: var(--mono); font-size: .875rem; white-space: nowrap; }
.listing .date { font-family: var(--mono); font-size: .8125rem; color: var(--muted); white-space: nowrap; }

@media (max-width: 34rem) {
  .listing .date { display: none; }
}

/* ---------- dated lists (notes, "recently", rabbit holes) ---------- */

.log { list-style: none; padding: 0; }
.log li {
  display: grid;
  grid-template-columns: 6.5rem 1fr;
  gap: 0 1rem;
  align-items: baseline;
  margin-bottom: .4rem;
}
.log time, .log .when { font-family: var(--mono); font-size: .8125rem; color: var(--muted); }
.tags { font-family: var(--mono); font-size: .75rem; color: var(--muted); margin-left: .35rem; }

@media (max-width: 30rem) {
  .log li { grid-template-columns: 1fr; margin-bottom: .8rem; }
}

/* ---------- projects index ---------- */

.projects { list-style: none; padding: 0; }
.projects li {
  display: grid;
  grid-template-columns: 2.4rem 3.5rem 1fr;
  gap: 0 .75rem;
  align-items: baseline;
  margin-bottom: .75rem;
}
.projects .status, .projects .year { font-family: var(--mono); font-size: .8125rem; color: var(--muted); white-space: nowrap; }

@media (max-width: 30rem) {
  .projects li { grid-template-columns: 2.4rem 1fr; }
  .projects .what { grid-column: 1 / -1; }
}

/* ---------- notes & project pages ---------- */

.doc-header { margin-bottom: 2.25rem; }
.doc-header .meta { margin: 0; }

.aside {
  margin: 1.5rem 0;
  padding-left: 1rem;
  border-left: 2px solid var(--rule);
  font-size: .9375rem;
  color: var(--muted);
}

/* on wide screens, asides move out into the margin like pencil notes */
@media (min-width: 80rem) {
  .aside {
    float: right;
    clear: right;
    width: 14rem;
    margin: .3rem -17rem 1rem 0;
    padding-left: .75rem;
    font-size: .875rem;
  }
}

.footnotes {
  margin-top: 3rem;
  padding-top: .75rem;
  border-top: 1px solid var(--rule);
  font-size: .9rem;
  color: var(--muted);
}

.back { margin-top: 3rem; }

/* ---------- links page ---------- */

.elsewhere { display: grid; grid-template-columns: max-content 1fr; gap: .4rem 1.5rem; }
.elsewhere dt { font-family: var(--mono); font-size: .875rem; color: var(--muted); }
.elsewhere dd { margin: 0; }

/* ---------- drawings ---------- */

.gallery {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
  gap: 2rem 1.5rem;
  align-items: start;
}
.gallery li, .gallery figure { margin: 0; }
.gallery img { border: 1px solid var(--rule); }
.empty-frame {
  aspect-ratio: 4 / 5;
  display: grid;
  place-items: center;
  border: 1px dashed var(--rule);
  font-family: var(--mono);
  font-size: .75rem;
  color: var(--muted);
}

/* ---------- the cat (see main.js) ---------- */

.meow {
  position: fixed;
  left: 1rem;
  right: 1rem;
  bottom: 1rem;
  max-width: max-content;
  margin: 0;
  padding: .45rem .75rem;
  background: var(--paper);
  border: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: .8125rem;
}