/* ABOUTME: Layout shell for bitscribbler.com — body frame, banner/nav, content column, footer. */
/* ABOUTME: Builds on colors_and_type.css tokens; styles the Asciidoctor-generated DOM. */

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

/* ---------- Page frame ---------- */
html { font-size: 16px; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

hr {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: var(--sp-6) 0;
}

/* A single reading column, used by the chrome and the content alike. */
:root { --col: 720px; }

/* ---------- Banner / nav ---------- */
.banner {
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
}

.banner__inner {
  max-width: var(--col);
  margin: 0 auto;
  padding: var(--sp-4) var(--sp-5);
  display: flex;
  align-items: center;
  gap: var(--sp-5);
}

.banner__brand {
  display: inline-flex;
  align-items: center;
  line-height: 0;
}

.banner__brand img { height: 26px; width: auto; display: block; }

.banner__nav {
  margin-left: auto;
  display: flex;
  gap: var(--sp-5);
  flex-wrap: wrap;
}

.banner__nav a {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--ink-2);
  text-decoration: none;
  letter-spacing: -0.005em;
  padding: 4px 0;
  border-bottom: 1px solid transparent;
  transition: color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}

.banner__nav a:hover {
  color: var(--ink);
  border-bottom-color: var(--ink);
}

/* ---------- Page header (title + author/email) ---------- */
#header {
  width: 100%;
  max-width: var(--col);
  margin: 0 auto;
  padding: var(--sp-8) var(--sp-5) var(--sp-4);
}

#header .details {
  margin-top: var(--sp-3);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  color: var(--ink-3);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 var(--sp-2);
}

#header .details br { display: none; }
#header .details a { color: var(--ink-3); text-decoration: none; }
#header .details a:hover { color: var(--rust); }
#header .details #email::before { content: "·\00a0"; color: var(--rule-2); }

/* ---------- Content column ---------- */
#content {
  flex: 1 0 auto;
  width: 100%;
  max-width: var(--col);
  margin: 0 auto;
  padding: var(--sp-2) var(--sp-5) var(--sp-8);
}

/* Vertical rhythm — tokens zero out heading margins, so space them here. */
#content .sect1 { margin-top: var(--sp-7); }
#content > .sect1:first-child { margin-top: var(--sp-4); }
.sect1 + .sect1 { border-top: 1px solid var(--rule); padding-top: var(--sp-7); }

#content h2 { margin-bottom: var(--sp-4); }
#content .sect2 { margin-top: var(--sp-6); }
#content h3 { margin-bottom: var(--sp-3); }
#content h4 { margin-bottom: var(--sp-2); }

.paragraph { margin-bottom: var(--sp-4); }
.paragraph > p { color: var(--ink); }

.admonitionblock, .listingblock, .literalblock, .imageblock { margin: var(--sp-5) 0; }

/* Definition lists (services on the homepage) */
.dlist { margin: var(--sp-5) 0; }
.dlist dt { font-weight: 600; color: var(--ink); margin-top: var(--sp-4); }
.dlist dd { margin: var(--sp-1) 0 0; color: var(--ink-2); }
.dlist dd > p { color: inherit; }

/* Bulleted / numbered lists (the article index lives here) */
.ulist, .olist { margin: var(--sp-4) 0; }
.ulist ul, .olist ol { margin: 0; padding-left: var(--sp-5); }
.ulist li, .olist li { margin-bottom: var(--sp-2); }
.ulist li > p, .olist li > p { margin: 0; }

/* ---------- "Last updated" stamp (Asciidoctor #footer) ---------- */
#footer {
  width: 100%;
  max-width: var(--col);
  margin: 0 auto;
  padding: var(--sp-5) var(--sp-5) 0;
}

#footer-text {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.02em;
  color: var(--ink-3);
}

/* ---------- Site footer (mono colophon row) ---------- */
.site-footer {
  border-top: 1px solid var(--rule);
  margin-top: var(--sp-6);
}

.site-footer__inner {
  max-width: var(--col);
  margin: 0 auto;
  padding: var(--sp-5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  flex-wrap: wrap;
}

.site-footer__brand {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--ink-3);
}

.site-footer__links {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
}

.site-footer__links a {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--ink-2);
  text-decoration: none;
}

.site-footer__links a:hover { color: var(--rust); }
.site-footer__links .sep { color: var(--rule-2); }

/* ---------- Writing index (generated listing) ---------- */
.writing-index__head { margin-bottom: var(--sp-7); }

.writing-index__title {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--fs-3xl);
  letter-spacing: var(--tr-tight);
  line-height: var(--lh-tight);
  color: var(--ink);
  margin: var(--sp-3) 0;
}

.writing-index__lead {
  font-size: var(--fs-md);
  line-height: var(--lh-body);
  color: var(--ink-2);
  max-width: 580px;
  margin: 0;
}

.writing-index__year { margin-bottom: var(--sp-7); }

.writing-index__year-label {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.04em;
  color: var(--ink-3);
  padding: 0 var(--sp-3) var(--sp-3);
  border-bottom: 1px solid var(--rule);
}

.post-row {
  display: grid;
  grid-template-columns: 52px 1fr auto;
  gap: var(--sp-5);
  align-items: baseline;
  padding: var(--sp-4) var(--sp-3);
  border-bottom: 1px solid var(--rule);
  text-decoration: none;
  color: inherit;
  border-radius: var(--r-2);
  transition: background var(--dur-1) var(--ease);
}

.post-row:hover { background: var(--paper-2); }

.post-row__date {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--ink-3);
}

.post-row__title {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 20px;
  letter-spacing: -0.005em;
  line-height: var(--lh-snug);
  color: var(--ink);
  margin: 0 0 var(--sp-2);
}

.post-row__tags { display: flex; gap: var(--sp-2); flex-wrap: wrap; }

.post-row__tags .tag {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-2);
  background: var(--paper-2);
  padding: 2px 8px;
  border-radius: var(--r-pill);
}

.post-row__read {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-3);
  text-align: right;
  white-space: nowrap;
}

/* ---------- Longform article (body.post) ---------- */
/* Articles are tagged role=post at build time; the serif reading treatment
   is scoped here so pages and the writing index stay sans. */

body.post #header h1 {
  font-size: 44px;
  letter-spacing: -0.022em;
  line-height: 1.08;
}

/* Title meta becomes a lowercase mono row: author · email · date */
body.post #header .details {
  text-transform: none;
  font-size: var(--fs-sm);
  letter-spacing: 0;
  gap: 0 var(--sp-3);
}

body.post #header .details #revdate::before,
body.post #header .details #readtime::before,
body.post #header .details .post-tags::before {
  content: "·\00a0";
  color: var(--rule-2);
}

/* Email lives in the footer; keep the byline to author · date · read · tags */
body.post #header .details #email { display: none; }

/* Back-link and tag eyebrow, injected above the title at build time */
body.post .post-back {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--rust);
  text-decoration: none;
  margin-bottom: var(--sp-5);
}

body.post .post-back:hover { color: var(--rust-2); }

body.post .post-eyebrow {
  display: block;
  margin-bottom: var(--sp-3);
}

/* Previous / next nav, injected at the foot of the article */
body.post .post-nav {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-5);
  flex-wrap: wrap;
  max-width: var(--col);
  margin: var(--sp-7) auto 0;
  padding: var(--sp-5) var(--sp-5) 0;
  border-top: 1px solid var(--rule);
}

body.post .post-nav > div { flex: 1 1 0; min-width: 0; }
body.post .post-nav__next { text-align: right; }

body.post .post-nav a {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--rust);
  text-decoration: none;
}

body.post .post-nav a:hover { color: var(--rust-2); }

/* Body prose is set in IBM Plex Serif — the one place it earns its keep. */
body.post #content { font-family: var(--font-serif); }

body.post #content .paragraph > p,
body.post #content li,
body.post #content dd {
  font-family: var(--font-serif);
  font-size: 19px;
  line-height: 1.7;
  color: var(--ink);
}

body.post #content .paragraph { margin-bottom: var(--sp-5); }

body.post #content h2 {
  font-size: 30px;
  letter-spacing: -0.015em;
}

body.post #content h3 { font-size: var(--fs-lg); }

/* Pull-quote — a highlighter wash with a rust margin rule */
body.post blockquote,
body.post .quoteblock blockquote {
  font-family: var(--font-sans);
  font-style: italic;
  font-weight: 500;
  font-size: 22px;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--ink);
  background: var(--rust-wash);
  border-left: 3px solid var(--rust);
  margin: var(--sp-6) 0;
  padding: var(--sp-5);
  border-radius: var(--r-1);
}

body.post .quoteblock .attribution {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-style: normal;
  color: var(--ink-3);
  margin-top: var(--sp-3);
}

/* Code blocks keep the annotated-margin motif from colors_and_type.css */
body.post .listingblock,
body.post .literalblock { margin: var(--sp-6) 0; }

/* The prev/next nav carries the article-end rule; keep the stamp quiet below it */
body.post #footer { margin-top: var(--sp-5); }

/* ---------- Notebook pages (body.notebook: about, now) ---------- */
/* The kit's marginalia treatment: eyebrow + headline + lead, then sections
   numbered § 01… in a left gutter. Shared here; each page sets its eyebrow. */
body.notebook #header h1 {
  font-size: clamp(36px, 5vw, 56px);
  letter-spacing: -0.022em;
  line-height: 1.05;
}

/* Rust eyebrow above the headline — text is per page */
body.notebook #header h1::before {
  display: block;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--fs-xs);
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  color: var(--rust);
  margin-bottom: var(--sp-3);
}

body.about #header h1::before { content: "about"; }
body.now #header h1::before { content: "now"; }
body.contact #header h1::before { content: "contact"; }

/* The author/date byline isn't wanted on these pages */
body.notebook #header .details { display: none; }

/* Lead — the preamble paragraph between headline and the first section */
body.notebook #content #preamble .paragraph > p {
  font-size: var(--fs-md);
  line-height: var(--lh-body);
  color: var(--ink-2);
  max-width: 580px;
}

/* Sections numbered § 01 … in a left marginalia gutter */
body.notebook #content { counter-reset: section; }

body.notebook #content .sect1 {
  counter-increment: section;
  padding-left: 72px;
}

body.notebook #content .sect1 > h2 { position: relative; }

body.notebook #content .sect1 > h2::before {
  content: "§ " counter(section, decimal-leading-zero);
  position: absolute;
  left: -72px;
  top: 0.2em;
  width: 60px;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.04em;
  color: var(--ink-3);
}

/* ---------- Contact card (body.contact) ---------- */
.contact-lead {
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  line-height: var(--lh-body);
  color: var(--ink-2);
  max-width: 580px;
  margin: 0 0 var(--sp-6);
}

.contact-cta-row {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  flex-wrap: wrap;
}

.contact-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 500;
  color: var(--paper);
  background: var(--ink);
  padding: 12px 22px;
  border-radius: var(--r-1);
  text-decoration: none;
  box-shadow: var(--sh-1);
  transition: background var(--dur-1) var(--ease), transform var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
}

.contact-cta:hover {
  background: var(--rust-2);
  color: var(--paper);
  transform: translateY(-1px);
  box-shadow: var(--sh-2);
}

.contact-cta span { color: var(--rust-3); }
.contact-cta:hover span { color: var(--paper); }

.contact-cta-note {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--ink-3);
}

.contact-methods {
  margin: var(--sp-7) 0 0;
  border-top: 1px solid var(--rule);
}

.contact-methods > div {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: var(--sp-4);
  align-items: baseline;
  padding: var(--sp-4) 0;
  border-bottom: 1px solid var(--rule);
}

.contact-methods dt {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  color: var(--ink-3);
}

.contact-methods dd { margin: 0; }

.contact-methods dd a {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
}

/* ---------- Small screens ---------- */
@media (max-width: 600px) {
  .banner__inner { flex-wrap: wrap; gap: var(--sp-3); }
  .banner__nav { margin-left: 0; gap: var(--sp-4); }
  #header { padding-top: var(--sp-6); }
  body.post #header h1 { font-size: 34px; }
  body.post #content .paragraph > p,
  body.post #content li,
  body.post #content dd { font-size: 18px; }
  body.post #content h2 { font-size: 26px; }
  /* Drop the gutter; the section number sits above its heading */
  body.notebook #content .sect1 { padding-left: 0; }
  body.notebook #content .sect1 > h2::before {
    position: static;
    display: block;
    left: auto;
    top: auto;
    width: auto;
    margin-bottom: var(--sp-2);
  }
}

@media (max-width: 480px) {
  .post-row { grid-template-columns: 44px 1fr; }
  .post-row__read { display: none; }
}

@media (max-width: 480px) {
  .post-row { grid-template-columns: 44px 1fr; }
  .post-row__read { display: none; }
}