/* ==========================================================================
   site.css — layout and type for pfunder.me

   The terminal look is in the chrome: prompts, brackets, ls-style lists.
   The reading experience is tuned for long text: a ~68 character measure,
   generous leading, and no motion that gets in the way.
   ========================================================================== */

@font-face {
  font-family: "JetBrains Mono";
  src: url("/fonts/jetbrains-mono-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("/fonts/jetbrains-mono-latin-400-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("/fonts/jetbrains-mono-latin-600-normal.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* --- foundation ---------------------------------------------------------- */

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

:root {
  --font: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --measure: 68ch;
  --gap: 1.75rem;
  font-size: clamp(15px, 0.9rem + 0.25vw, 17px);
}

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  /* JetBrains Mono runs large for its size; this brings it in line. */
  font-size: 0.95rem;
  line-height: 1.7;
  font-variant-ligatures: none;
  -webkit-font-smoothing: antialiased;
}

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

.wrap {
  max-width: calc(var(--measure) + 2rem);
  margin: 0 auto;
  padding: 0 1rem;
}

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

a {
  color: var(--link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

a:hover {
  color: var(--bg);
  background: var(--link);
  text-decoration: none;
}

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

/* Bracketed links: [writing] [lab]. The brackets are decoration, so screen
   readers hear only the word. */
.bracket {
  text-decoration: none;
}
.bracket::before {
  content: "[" / "";
  color: var(--dim);
}
.bracket::after {
  content: "]" / "";
  color: var(--dim);
}
.bracket:hover::before,
.bracket:hover::after {
  color: var(--bg);
}
.bracket[aria-current="page"] {
  color: var(--accent);
}

.skip {
  position: absolute;
  left: -999px;
}
.skip:focus {
  left: 1rem;
  top: 1rem;
  background: var(--bg);
  padding: 0.25rem 0.5rem;
  z-index: 10;
}

/* --- header -------------------------------------------------------------- */

.site-header {
  padding: 2rem 0 0;
}

.site-header .wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.5rem;
  align-items: baseline;
}

.site-name {
  color: var(--fg);
  font-weight: 600;
  text-decoration: none;
}

.site-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* --- the prompt above each page title ------------------------------------ */

.prompt {
  margin: 3rem 0 2rem;
  color: var(--dim);
}
.prompt .path {
  color: var(--accent);
}
.prompt .cmd {
  color: var(--fg);
}

.prompt + h1,
.prompt + h2 {
  margin-top: 0;
}

/* A cursor, but only one, and it holds still for people who ask for that. */
.prompt .cmd::after {
  content: "" / "";
  display: inline-block;
  width: 0.6em;
  height: 1.1em;
  margin-left: 0.15em;
  vertical-align: -0.15em;
  background: var(--fg);
  animation: blink 1.2s steps(1) 3;
}
@keyframes blink {
  50% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .prompt .cmd::after { animation: none; }
}

/* --- type ---------------------------------------------------------------- */

h1,
h2,
h3,
h4 {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.4;
  margin: 2.5em 0 0.75em;
  text-wrap: balance;
}

h1 {
  margin-top: 0;
  font-size: 1.6rem;
  line-height: 1.3;
}

/* Markdown-style markers on content headings. Visible, not announced. */
.prose h2::before { content: "## " / ""; color: var(--accent); }
.prose h3::before { content: "### " / ""; color: var(--accent); }
.prose h4::before { content: "#### " / ""; color: var(--accent); }

p,
ul,
ol,
blockquote,
pre,
table,
figure,
details {
  margin: 0 0 var(--gap);
}

.prose {
  text-wrap: pretty;
  hyphens: auto;
}

.prose ul {
  list-style: none;
  padding-left: 2ch;
}
.prose ul > li::before {
  content: "- " / "";
  color: var(--accent);
  margin-left: -2ch;
}
.prose ol {
  padding-left: 3ch;
}
.prose ol > li::marker {
  color: var(--accent);
}
.prose li + li {
  margin-top: 0.35em;
}

.lede {
  color: var(--dim);
}

strong {
  font-weight: 600;
  color: var(--fg);
}

em {
  font-style: italic;
}

blockquote {
  margin-left: 0;
  padding-left: 2ch;
  border-left: 2px solid var(--mark);
  color: var(--fg);
}
blockquote p:last-child {
  margin-bottom: 0;
}

hr {
  border: 0;
  margin: 3rem 0;
  text-align: center;
  color: var(--rule);
}
hr::after {
  content: "· · ·";
  letter-spacing: 1ch;
}

code {
  font-family: inherit;
  background: var(--bg-alt);
  padding: 0.1em 0.35em;
  border-radius: 2px;
}

pre {
  background: var(--bg-alt) !important;
  padding: 1rem 1.25rem;
  overflow-x: auto;
  line-height: 1.55;
  border-left: 2px solid var(--rule);
}
pre code {
  background: none;
  padding: 0;
}

/* Shiki's css-variables theme, mapped onto whichever palette is active. */
:root {
  --astro-code-foreground: var(--fg);
  --astro-code-background: var(--bg-alt);
  --astro-code-token-constant: var(--mark);
  --astro-code-token-string: var(--link);
  --astro-code-token-comment: var(--dim);
  --astro-code-token-keyword: var(--accent);
  --astro-code-token-parameter: var(--fg);
  --astro-code-token-function: var(--mark);
  --astro-code-token-string-expression: var(--link);
  --astro-code-token-punctuation: var(--dim);
  --astro-code-token-link: var(--link);
}

table {
  width: 100%;
  border-collapse: collapse;
}
th,
td {
  text-align: left;
  vertical-align: top;
  padding: 0.3rem 1ch 0.3rem 0;
}
th {
  color: var(--dim);
  font-weight: 400;
  border-bottom: 1px dashed var(--rule);
}

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

figcaption {
  color: var(--dim);
  font-size: 0.9em;
}

/* Collapsible steps: interactive with no JavaScript at all. */
details {
  border-left: 2px solid var(--rule);
  padding-left: 2ch;
}
details[open] {
  border-left-color: var(--accent);
}
summary {
  cursor: pointer;
  list-style: none;
}
summary::-webkit-details-marker {
  display: none;
}
summary::before {
  content: "[+] " / "";
  color: var(--accent);
}
details[open] > summary::before {
  content: "[-] " / "";
}
details > :last-child {
  margin-bottom: 0.5rem;
}

/* --- images and video: folded until opened ------------------------------ */

/* The file line. Overrides the bordered <details> style used for steps. */
details.media {
  border-left: 0;
  padding-left: 0;
}

.media summary {
  display: flex;
  flex-wrap: wrap;
  gap: 0 2ch;
  width: fit-content;
}
.media summary .file {
  color: var(--link);
}
.media summary:hover .file {
  color: var(--bg);
  background: var(--link);
}
.media summary .info {
  color: var(--dim);
}

.media figure {
  margin: 0.75rem 0 0;
  padding: 0.5rem;
  border: 1px dashed var(--rule);
}

/* Duotone in the active theme's colors: the image is made grayscale, its
   lights take --duo-light, and its darks take --duo-dark. The file itself is
   untouched; "view original" shows it as shot. */
.tint {
  position: relative;
  line-height: 0;
  background: var(--duo-light);
}
.tint img {
  display: block;
  width: 100%;
  height: auto;
  filter: grayscale(1) contrast(1.1);
  mix-blend-mode: multiply;
}
.tint::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--duo-dark);
  mix-blend-mode: lighten;
  pointer-events: none;
}

.media video {
  display: block;
  width: 100%;
  height: auto;
  background: var(--bg-alt);
}

.media figcaption {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0 2ch;
  margin-top: 0.5rem;
}

/* --- listings: ls -l, more or less --------------------------------------- */

.ls {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--gap);
}

.ls li {
  display: grid;
  grid-template-columns: 11ch 9ch 1fr;
  gap: 0 1ch;
  padding: 0.15rem 0;
}

.ls time,
.ls .kind {
  color: var(--dim);
}

.ls .desc {
  grid-column: 3;
  color: var(--dim);
  font-size: 0.9em;
  margin-bottom: 0.5rem;
}

/* Without the kind column (inside one section). */
.ls.no-kind li {
  grid-template-columns: 11ch 1fr;
}
.ls.no-kind .desc {
  grid-column: 2;
}

/* The row the keyboard is on. */
.ls li.is-active > a {
  color: var(--bg);
  background: var(--link);
  text-decoration: none;
}
.ls li.is-active > a::before {
  content: "> " / "";
}

@media (max-width: 34rem) {
  .ls li,
  .ls.no-kind li {
    grid-template-columns: 1fr;
  }
  .ls .kind {
    display: none;
  }
  .ls time {
    font-size: 0.85em;
  }
  .ls .desc,
  .ls.no-kind .desc {
    grid-column: 1;
  }
}

/* --- entry metadata ------------------------------------------------------ */

.meta {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0 2ch;
  margin: 0 0 var(--gap);
  color: var(--dim);
}
.meta dt::after {
  content: ":" / "";
}
.meta dd {
  margin: 0;
  color: var(--fg);
}

.tracklist td:first-child {
  color: var(--dim);
  width: 4ch;
}

/* --- footer -------------------------------------------------------------- */

.site-footer {
  margin-top: 5rem;
  padding: 1.5rem 0 3rem;
  border-top: 1px dashed var(--rule);
  color: var(--dim);
}

/* Smaller text on the children, not the wrapper, so the column (measured
   in ch) lines up with the page above. */
.site-footer .wrap > * {
  font-size: 0.9rem;
}

.site-footer p {
  margin: 0 0 0.5rem;
}

.theme-picker {
  margin: 0 0 0.5rem;
  padding: 0;
  border: 0;
}
.theme-picker legend {
  display: inline;
  float: left;
  margin-right: 1ch;
  padding: 0;
}
.theme-picker button {
  font: inherit;
  color: var(--link);
  background: none;
  border: 0;
  padding: 0;
  margin-right: 1ch;
  cursor: pointer;
}
.theme-picker button::before { content: "[" / ""; color: var(--dim); }
.theme-picker button::after { content: "]" / ""; color: var(--dim); }
.theme-picker button[aria-pressed="true"] {
  color: var(--accent);
}
.theme-picker button:hover {
  color: var(--bg);
  background: var(--link);
}

/* No keyboard, no keyboard hints. */
@media (hover: none) {
  .keys { display: none; }
}

.keys kbd {
  font-family: inherit;
  color: var(--fg);
}

/* Things only the printer should see. */
.print-only {
  display: none;
}