/* style.css — site-wide styles for yorkshire.systems.
   Light, monochrome aesthetic: pure black ink on warm white paper.
   Inter for text, IBM Plex Mono for code — matching viewer.css. */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&family=Inter:wght@400;500;600;700&display=swap');

:root {
    --paper: #E6E6E6;
    --header: #373640;
    --ink: #0c0c0c;
    --muted: #8a887f;
    --line: #d7d4c9;
    --hover: #ebe9e0;
    --selected: #e3e0d4;
    --sans: "Inter", system-ui, -apple-system, Arial, sans-serif;
    --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

* { box-sizing: border-box; }
html { font-size: 16px; }

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--sans);
    line-height: 1.6;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}



/* Header --------------------------------------------------------------- */

header {
    background: var(--header);
    /* border-bottom: 1px solid var(--ink); */
    padding: 1.1rem 2rem;
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}
header h1 {
    font-size: 0.95rem;
    margin: 0;
    font-weight: 700;
    letter-spacing: -0.01em;
}
header h1 .icon { color: var(--ink); }

.header_logo{
    width: 112px;
    height: auto;
    flex-shrink: 0;
    padding-top: 12px;
}

.header__id {
    font-weight: 600;
}

/* Markdown content ----------------------------------------------------- */

.content { max-width: 820px; margin: 0 auto; padding: 2.5rem 2rem 6rem; width: 100%; }
.content img { max-width: 100%; height: auto; border-radius: 9px; }
/* Embedded HTML (e.g. <iframe>, <video>) authored directly in the markdown. */
.content iframe, .content video { max-width: 100%; border: 1px solid var(--line); border-radius: 9px; }
.content iframe { width: 100%; aspect-ratio: 16 / 9; height: auto; }
.content h1, .content h2 { border-bottom: 1px solid var(--line); padding-bottom: .3em; }
.content h1 { font-size: 2rem; margin-top: 0; font-weight: 700; letter-spacing: -0.01em; }
.content h2 { font-size: 1.5rem; margin-top: 1.8rem; font-weight: 700; }
.content h3 { font-size: 1.25rem; font-weight: 600; }
.content h4 { font-size: 1rem; font-weight: 600; }
.content a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }

.content a:hover { background: var(--hover); }

.content a.no_underline  { color: var(--ink); text-decoration: none; }


.content code {
    background: var(--hover);
    padding: .15em .4em;
    border-radius: 9px;
    font-size: .85em;
    font-family: var(--mono);
}
.content pre {
    background: var(--paper);
    padding: 1rem 1.1rem;
    border-radius: 9px;
    overflow: auto;
    border: 1px solid var(--ink);
}
/* highlight.js paints its own bg/padding on .hljs — strip them so paper shows
   through, and keep every token in our mono face. */
.content pre code { background: none; padding: 0; font-size: .82rem; font-family: var(--mono); }
.content pre code.hljs { background: transparent; padding: 0; }
.content .hljs, .content .hljs span { font-family: var(--mono); }

.content blockquote {
    margin: 1rem 0;
    padding: 0 1rem;
    color: var(--muted);
    border-left: .25rem solid var(--line);
}
.content table { border-collapse: collapse; width: 100%; margin: 1rem 0; display: block; overflow: auto; }
.content th, .content td { border: 1px solid var(--line); padding: .5rem .75rem; }
.content th { background: var(--hover); }
.content tr:nth-child(even) td { background: var(--paper); }
.content hr { border: none; border-top: 1px solid var(--line); margin: 2rem 0; }
.content ul, .content ol { padding-left: 1.6rem; }
.content li { margin: .25rem 0; }
.content li > input[type=checkbox] { margin-right: .4rem; }

.file-index { list-style: none; padding: 0; font-family: var(--mono); }
.file-index li { margin: .4rem 0; }

/* GRID */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
  grid-auto-rows: 1fr;
}

.grid::before {
  content: '';
  width: 0;
  padding-bottom: 100%;
  grid-row: 1 / 1;
  grid-column: 1 / 1;
}

.grid > *:first-child {
  grid-row: 1 / 1;
  grid-column: 1 / 1;
}

.grid > * {
  background: rgba(0,0,0,0.1);
  border-radius: 9px;
  border: 2px var(--paper) solid;
  text-decoration: none;
  padding: 8px;
  font-size: small;

}