/* ============================================================================
   jandroid.dev — alternative portfolio: "man jandroid"

   The page is a UNIX manual page. Not as decoration — as structure. A man page
   is the densest, least-decorated document format in computing, its readers
   are exactly this audience, and above all it is a NEUTRAL CONTAINER: every
   project is an entry under FILES, inheriting no visual identity. App two and
   app three can arrive with their own brands and nothing here fights them.

   The risk taken on purpose: it renders as PAPER, not as a terminal. Every
   other developer portfolio is dark, and every "terminal portfolio" is a
   green-on-black cliché. Man pages were written in troff — a TYPESETTING
   system, built to be printed — so paper is the historically correct reading,
   and it makes entering the U-Manager site (dark, orange, hardware) feel like
   walking from the documentation into the machine.

   Type is the whole design here, so it gets the care: measure capped near the
   78 columns a real man page uses, hanging indents on definition lists,
   running heads top and bottom, one second colour used only where a printed
   manual would have used red.
   ========================================================================= */

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

:root {
  /* Paper stock and ink, not "light mode". Warm, slightly aged. */
  --paper: #f2eee4;
  --paper-2: #e7e1d3;
  --ink: #17130d;
  --ink-soft: #4a4237;
  /* 4.9:1 on the paper. The lighter grey this started as measured 3.3:1,
     and it carries the dates and the synopsis brackets — real text. */
  --ink-faint: #6f6659;
  --rule: #cdc5b4;
  /* The second colour a printed technical manual would have been run in. */
  --red: #9e2b25;

  --measure: 74ch;
  --pad: 40px;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* The terminal rendering. Same document, different press. */
body.tty {
  --paper: #0b0d0c;
  --paper-2: #121614;
  --ink: #d6e2d8;
  --ink-soft: #9db0a2;
  --ink-faint: #75897c;
  --rule: #253029;
  --red: #d97757;
}

* {
  box-sizing: border-box;
}

html {
  scroll-padding-top: 24px;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 15.5px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  font-variant-ligatures: none;
}

a {
  color: var(--red);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

a:hover {
  background: var(--red);
  color: var(--paper);
  text-decoration: none;
}

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

.sheet {
  max-width: calc(var(--measure) + var(--pad) * 2);
  margin: 0 auto;
  padding: 0 var(--pad) 64px;
}

/* ---------- running heads ----------
   A real man page carries the same line at the top and the bottom of every
   printed page. Here they bracket the document. */

.runhead {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 0 10px;
  border-bottom: 1px solid var(--rule);
  font-size: 12.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.runhead--foot {
  margin-top: 48px;
  padding: 10px 0 22px;
  border-bottom: 0;
  border-top: 1px solid var(--rule);
}

.runhead b {
  color: var(--ink-soft);
  font-weight: 700;
}

.runhead .mid {
  text-align: center;
  flex: 1 1 auto;
}

/* ---------- sections ---------- */

.man {
  padding-top: 30px;
}

.man h1 {
  /* The document title is the NAME section's job; this stays for screen
     readers and search without shouting on the page. */
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
}

.man h2 {
  font-size: 15.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  margin: 34px 0 8px;
  color: var(--ink);
}

.man h2:first-of-type {
  margin-top: 0;
}

/* Man pages indent the body of every section under its heading. */
.man section > *:not(h2) {
  margin-left: 4ch;
}

.man p {
  margin: 0 0 14px;
  color: var(--ink-soft);
  max-width: 68ch;
}

.man strong {
  color: var(--ink);
  font-weight: 700;
}

/* ---------- synopsis ---------- */

.synopsis {
  color: var(--ink);
}

.synopsis .opt {
  color: var(--ink-faint);
}

/* ---------- definition lists: OPTIONS, FILES, HISTORY ----------
   Hanging indent, the way a manual sets its option list: term on its own
   line, description indented beneath. */

.man dl {
  margin: 0 0 14px;
}

.man dt {
  font-weight: 700;
  color: var(--ink);
  margin-top: 14px;
}

.man dt:first-child {
  margin-top: 0;
}

.man dd {
  margin: 2px 0 0 4ch;
  color: var(--ink-soft);
  max-width: 64ch;
}

.man dd .when {
  color: var(--ink-faint);
}

/* A project entry is a link across its whole term line. */
a.entry {
  color: var(--red);
  font-weight: 700;
  text-decoration: underline;
}

.entry-empty {
  color: var(--ink-faint);
  font-weight: 700;
}

/* ---------- the one piece of chrome: the press switch ---------- */

.press {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 20;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 9px 13px;
  background: var(--paper-2);
  color: var(--ink-soft);
  border: 1px solid var(--rule);
  cursor: pointer;
  transition: none;
}

.press:hover {
  background: var(--red);
  border-color: var(--red);
  color: var(--paper);
}

/* ---------- phones ---------- */

@media (max-width: 640px) {
  :root {
    --pad: 20px;
  }

  body {
    font-size: 14.5px;
    line-height: 1.7;
  }

  /* Indenting by character widths eats the screen at this size. */
  .man section > *:not(h2) {
    margin-left: 0;
  }

  .man dd {
    margin-left: 2ch;
  }

  .runhead {
    font-size: 11px;
    letter-spacing: 0.04em;
  }

  .runhead .mid {
    display: none;
  }

  .synopsis {
    overflow-x: auto;
  }
}

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