/* kazaneko.dev: the site's only stylesheet. Design: "Terminal".
   Layout: 1) font  2) colours  3) base  4) header and footer
           5) text  6) post lists  7) code  8) utilities  9) tablet  10) phone */

/* 1) FONT --------------------------------------------------------------
   JetBrains Mono, open licence (static/fonts/OFL.txt). The files live in
   the repo: no requests to external services. */
@font-face {
  font-family: "JetBrains Mono";
  src: url("../fonts/JetBrainsMono-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;   /* show text right away, the font swaps in when loaded */
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("../fonts/JetBrainsMono-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("../fonts/JetBrainsMono-Italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* 2) COLOURS -----------------------------------------------------------
   Every colour lives here. Dark is the main theme; when the system is in
   light mode the "paper" version is used instead. */
:root {
  --bg: #121410;        /* background */
  --fg: #d6dacd;        /* body text */
  --strong: #f0f2ea;    /* headings and bold */
  --dim: #868d7f;       /* prompt, dates, notes */
  --line: #2b3029;      /* divider lines */
  --code-bg: #0b0c0a;   /* code block background */
  --accent: #e3a63d;    /* amber: links and details */
  --bar: #1d201b;       /* footer status bar */
}

@media (prefers-color-scheme: light) {
  :root {
    --bg: #f3f2ec;
    --fg: #24271f;
    --strong: #111310;
    --dim: #5f6558;
    --line: #d3d4ca;
    --code-bg: #e8e7df;
    --accent: #8a5300;  /* darker amber, readable on a light background */
    --bar: #e8e7df;
  }
}

/* 3) BASE ------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  font-family: "JetBrains Mono", ui-monospace, "DejaVu Sans Mono", Menlo, Consolas, monospace;
  font-size: 100%;          /* respects the size the user picked */
  line-height: 1.75;
  color: var(--fg);
  background: var(--bg);
  -webkit-text-size-adjust: 100%;
  /* Always keep room for the scrollbar: long and short pages then line up
     at exactly the same spot, instead of shifting by its width. */
  scrollbar-gutter: stable;
}

body {
  margin: 0 auto;           /* centred column */
  max-width: 72rem;
  padding: 3rem 4.5rem;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main { flex: 1; display: flex; flex-direction: column; gap: 2.5rem; }

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

/* 4) HEADER AND FOOTER ------------------------------------------------ */
.site-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;   /* prompt · menu · [it] */
  align-items: baseline;
  gap: 0.5rem 1.1rem;
  border-bottom: 1px solid var(--line);
  padding-bottom: 1.25rem;
  margin-bottom: 2.5rem;
}

.prompt { color: var(--fg); font-weight: 700; border: 0; justify-self: start; }
.prompt:hover { background: none; color: var(--accent); }
/* A path wraps after a "/"; a single folder name breaks only if it is wider than the line */
.prompt .seg { display: inline-block; max-width: 100%; overflow-wrap: anywhere; }

.site-header ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.1rem;
}

/* The section you are in: solid amber block. */
.site-header a[aria-current="page"] {
  background: var(--accent);
  color: var(--bg);
  border-color: var(--accent);
  /* Widen the block by the same amount on both sides with shadows, not
     padding and margins: it does not move the text and looks the same in
     every browser. */
  box-shadow: -0.4ch 0 0 var(--accent), 0.4ch 0 0 var(--accent);
}

.lang { color: var(--dim); }
/* Menu items and [it]: no underline, it shows up on hover. Less visual noise
   in the bar; the section you are in keeps its amber block. */
.site-header nav a, .lang { border-bottom-color: transparent; }
.site-header nav a:hover, .lang:hover { border-bottom-color: currentColor; }

/* The 404 page */
.error { color: var(--dim); }

/* Footer: a status bar, like tmux at the bottom of a terminal.
   Three slots: "cd .." on the left, the note in the exact centre, contacts
   on the right. On the home page there is no "cd ..", so the note sits left. */
.site-footer {
  margin-top: 4rem;
  background: var(--bar);
  padding: 0.35rem 1.25ch;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: baseline;
  gap: 0.25rem 2ch;
  font-size: 0.8125rem;
  color: var(--dim);
}
.site-footer > *, .site-footer a { white-space: nowrap; }
.footer-back { justify-self: start; }
.footer-contact { justify-self: end; }
.site-footer.is-home { grid-template-columns: 1fr auto; }

/* 5) TEXT ------------------------------------------------------------- */
a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}
a:hover, a:focus-visible {
  background: var(--accent);
  color: var(--bg);
}
/* Keyboard focus: an amber frame, visible even on the highlighted menu item */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* Line length: wide enough for desktop, short enough to stay easy to read */
p, ul, ol, blockquote, pre, table { margin: 0 0 1.25rem; max-width: 84ch; }

/* The "$ command" line above each block */
.cmd { color: var(--dim); margin: 0 0 0.4rem; }

h1, h2, h3 { color: var(--strong); font-weight: 700; line-height: 1.25; }
h1 { font-size: 2.5rem; margin: 0 0 0.75rem; }
h2 { font-size: 1.35rem; margin: 2.5rem 0 0.75rem; }
h3 { font-size: 1.1rem; margin: 2rem 0 0.5rem; }

/* The big name on the home page, with the amber cursor */
.name { font-size: 4rem; letter-spacing: -0.01em; margin-bottom: 0.5rem; }
.cursor { color: var(--accent); animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }   /* stopped for people who ask for less motion (see below) */

/* Headings inside articles: "## Heading", like in Markdown */
.home-now .prose h2:first-of-type { margin-top: 1.25rem; }
article h2::before, .prose h2::before { content: "## "; color: var(--accent); }
article h3::before, .prose h3::before { content: "### "; color: var(--accent); }

strong { color: var(--strong); }

/* Bullet lists with an amber dash instead of a dot */
article ul, .prose ul { list-style: none; padding-left: 0; }
article ul li, .prose ul li { position: relative; padding-left: 2ch; }
article ul li::before, .prose ul li::before { content: "-"; color: var(--accent); position: absolute; left: 0; }
article ol li::marker, .prose ol li::marker { color: var(--accent); }

blockquote {
  padding-left: 1.1rem;
  border-left: 2px solid var(--accent);
  font-style: italic;
  color: var(--dim);
}
blockquote p { margin: 0; }

hr { border: 0; border-top: 1px solid var(--line); margin: 2.5rem 0; }

table { border-collapse: collapse; display: block; overflow-x: auto; }
th, td { border: 1px solid var(--line); padding: 0.3rem 0.75rem; text-align: left; }

.meta { color: var(--dim); font-size: 0.875rem; margin-bottom: 2rem; }
.more { margin-top: 1.5rem; }
.dim { color: var(--dim); }

/* 6) POST LISTS ("ls -lt" style) ------------------------------------- */
.ls { list-style: none; padding: 0; margin: 0; }
.ls li {
  display: grid;
  grid-template-columns: 11ch 11ch minmax(0, 1fr);
  column-gap: 1.5rem;
  margin: 0.2rem 0;
  font-variant-numeric: tabular-nums;
}
.ls a { justify-self: start; align-self: start; overflow-wrap: anywhere; }
/* Post title as a comment, under the file name */
.ls .post-title { grid-column: 3; padding-left: 2ch; text-indent: -2ch; margin-bottom: 0.5rem; }  /* underline stays under the name, even when the comment wraps */

/* Pages of a section (and tags): name + comment */
.ls-pages li, .ls-tags li { grid-template-columns: 18ch minmax(0, 1fr); }
/* A wrapped comment lines up after the "# ", like a hanging indent */
.ls-pages .dim { padding-left: 2ch; text-indent: -2ch; }
/* Pages of a section get an amber "- " in front, like a Markdown list */
.ls-pages li { grid-template-columns: 2ch 18ch minmax(0, 1fr); column-gap: 0; }
.ls-pages .dim { margin-left: 1.5rem; }
.ls-pages li::before { content: "-"; color: var(--accent); }

/* 7) CODE ------------------------------------------------------------- */
code, pre { font-family: inherit; font-size: 0.9375em; }
code { color: var(--strong); }
/* Inline code: a light box so it stands out in a sentence */
:not(pre) > code { background: var(--code-bg); border: 1px solid var(--line); padding: 0 0.35ch; border-radius: 2px; }
pre {
  background: var(--code-bg);
  border: 1px solid var(--line);
  padding: 1rem 1.25rem;
  overflow-x: auto;         /* long lines scroll instead of breaking the page */
  line-height: 1.6;
  max-width: none;
}

/* 8) UTILITIES -------------------------------------------------------- */
/* "Skip to content": hidden until reached with the Tab key */
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 1rem; top: 1rem; background: var(--accent); color: var(--bg); padding: 0.25rem 0.5rem; }

::selection { background: var(--accent); color: var(--bg); }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* 9) TABLET ----------------------------------------------------------- */
@media (max-width: 64rem) {
  body { padding: 2.5rem 2rem; }
  /* Footer bar on two lines: "cd .." and contacts first, the note centred below */
  .site-footer:not(.is-home) { grid-template-columns: auto 1fr; }
  .site-footer:not(.is-home) .footer-note { grid-row: 2; grid-column: 1 / -1; justify-self: center; }
}

/* Narrow tablets: prompt and [it] on the first line, the menu below */
@media (max-width: 56rem) {
  .site-header { grid-template-columns: minmax(0, 1fr) auto; }
  .site-header nav { grid-row: 2; grid-column: 1 / -1; }
}

/* 10) PHONE ----------------------------------------------------------- */
@media (max-width: 40rem) {
  body { padding: 1.5rem 1rem; }
  /* Footer bar: "cd .." and contacts on the first line, the note centred below */
  .footer-note { white-space: normal; text-align: center; }
  .site-footer.is-home { grid-template-columns: 1fr; }
  .site-footer.is-home .footer-note { text-align: left; }
  .site-footer.is-home .footer-contact { justify-self: start; }
  .name { font-size: 2.75rem; }
  h1 { font-size: 1.9rem; }
  .ls li { grid-template-columns: 11ch minmax(0, 1fr); column-gap: 1rem; }
  .ls .perms { display: none; }   /* on narrow screens the permissions column is hidden */
  .ls .post-title { grid-column: 2; }
  .ls-pages li { grid-template-columns: 2ch minmax(0, 1fr); column-gap: 0; margin-bottom: 0.6rem; }  /* comment below the name */
  .ls-pages .dim { grid-column: 2; margin-left: 0; }
}