/* rifaki.me
 *
 * One stylesheet, no framework, no build step. The layout is the one the site
 * adopted on 2026-08-21: a module-grid mark beside a lowercase wordmark, a
 * centred purpose line, a feed row, post cards, and a footer that repeats the
 * feed row beside two short navs.
 *
 * Type scale, colour, spacing and the two breakpoints are stated once here as
 * custom properties. Article typography is at the bottom, after the shell, so
 * a note page and a card list read from the same rules.
 */

@font-face {
  font-family: 'Manrope';
  src: url('/manrope.woff2') format('woff2');
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
}

:root {
  --base: #f8f7f5;
  --contrast: #191919;
  --copy: #5f5f5f;
  --rule: rgba(25, 25, 25, 0.2);
  --faint: #adadad;
  --field: #ffffff;
  --page-padding: clamp(30px, 5vw, 50px);
  --measure: 645px;
}

* {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  background: var(--base);
  color: var(--copy);
  font-family: 'Manrope', system-ui, sans-serif;
  font-size: clamp(1.125rem, 1.1rem + 0.18vw, 1.375rem);
  font-weight: 300;
  letter-spacing: -0.1px;
  line-height: 1.4;
}

/* Nothing is underlined at rest. Hover and keyboard focus bring the underline
 * back, and a link inside prose takes the heading black so it is still
 * distinguishable from the grey it sits in: 3.2:1 against the body colour, which
 * clears the 3:1 that WCAG 1.4.1 asks for when colour carries the difference. */

a {
  color: inherit;
  text-decoration: none;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.1em;
}

a:hover,
a:focus-visible {
  text-decoration: underline;
}

.post p a,
.post li a,
.post figcaption a,
.lede a {
  color: var(--contrast);
}

button,
input {
  font: inherit;
}

img,
svg,
picture {
  max-width: 100%;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Keyboard first: the skip link is off-screen until it is focused. */

.skip {
  position: absolute;
  left: -9999px;
  z-index: 20;
  padding: 12px 18px;
  color: var(--base);
  background: var(--contrast);
  text-decoration: none;
}

.skip:focus {
  left: var(--page-padding);
  top: 12px;
}

.desktop-nav a[aria-current='page'],
.mobile-menu nav a[aria-current='page'] {
  color: var(--contrast);
  text-decoration: none;
}

.wide {
  width: min(100%, 1340px);
  margin-inline: auto;
}

.page-padding,
.site-header,
.site-footer {
  padding-inline: var(--page-padding);
}

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

.site-header {
  padding-block: 20px;
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 25px;
}

/* The wordmark beside the mark takes the mark's grey rather than the near-black
 * the rest of the headings use, so the two read as one lockup. */

.identity {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--copy);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.5px;
  text-decoration: none;
}

.identity:hover span {
  text-decoration: underline;
}

/* One alphabet, three placements, inlined as SVG so only fill and scale differ.
 * Module sizes are the reference site's: 8px in the nav mark, 7.33px in the
 * footer strip, which is 22px of height for three rows. The strip is wider than
 * its 311px because the name is longer, and the modules are what match. */

.mark {
  display: block;
  width: 48px;
  height: auto;
  fill: var(--copy);
}

.wordmark {
  display: block;
  width: auto;
  max-width: 100%;
  height: 11px;
  fill: var(--faint);
}

.desktop-nav {
  display: flex;
  align-items: center;
  gap: 20px;
  font-size: clamp(1rem, 0.96rem + 0.18vw, 1.125rem);
}

.desktop-nav a,
.footer-links a,
.mobile-menu nav a {
  padding-block: 4px;
}

@media (pointer: coarse) {
  .desktop-nav a,
  .footer-links a,
  .mobile-menu nav a {
    padding-block: 8px;
  }
}

.mobile-menu {
  display: none;
  position: relative;
}

.mobile-menu summary {
  display: grid;
  width: 44px;
  height: 44px;
  justify-items: end;
  align-content: center;
  gap: 6px;
  cursor: pointer;
  list-style: none;
}

.mobile-menu summary::-webkit-details-marker {
  display: none;
}

.mobile-menu summary span {
  display: block;
  width: 24px;
  height: 1.5px;
  background: var(--contrast);
}

.mobile-menu nav {
  position: absolute;
  z-index: 10;
  top: 38px;
  right: 0;
  display: grid;
  min-width: 150px;
  padding: 18px 20px;
  gap: 12px;
  background: var(--base);
  border: 1px solid var(--rule);
  box-shadow: 0 12px 24px rgba(25, 25, 25, 0.08);
}

/* ----------------------------------------------------------------- the hero */

.hero {
  padding-top: 54px;
  text-align: center;
}

.hero h1 {
  max-width: 1340px;
  margin: 0 auto;
  color: var(--contrast);
  font-size: clamp(2.2rem, 1.93rem + 1.33vw, 3.5rem);
  font-weight: 400;
  letter-spacing: -0.1px;
  line-height: 1.2;
  text-wrap: balance;
}

.hero-email {
  width: min(100%, 500px);
  margin: 54px auto 0;
}

.hero-email > p {
  margin: 18px 0 0;
  font-size: 0.875rem;
}

/* The email row. Two cells, square corners, black button.
 *
 * Named email-row rather than subscription-form, and footer-lead rather than
 * footer-signup, because cosmetic filter lists hide those two selectors and the
 * footer then renders with its whole left column missing. */

.email-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 20px;
}

.email-row input[type='email'] {
  width: 100%;
  min-width: 0;
  padding: 15px 23px;
  color: var(--contrast);
  background: var(--field);
  border: 1px solid var(--contrast);
  border-radius: 0;
  font-size: 1rem;
  line-height: 1.3;
}

.email-row input::placeholder {
  color: rgba(25, 25, 25, 0.55);
  opacity: 1;
}

.email-row button {
  padding: 15px 23px;
  color: var(--base);
  background: var(--contrast);
  border: 1px solid var(--contrast);
  border-radius: 0;
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.3;
  cursor: pointer;
}

.email-row button:hover {
  background: rgba(25, 25, 25, 0.85);
}

.email-row input:focus-visible,
.email-row button:focus-visible,
a:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--copy);
  outline-offset: 2px;
}

/* -------------------------------------------------------------- the content */

.content {
  max-width: calc(var(--measure) + 2 * var(--page-padding));
  margin: clamp(30px, 7vw, 70px) auto 0;
}

.post-preview {
  padding-block: 20px;
}

.post-preview + .post-preview {
  border-top: 1px solid var(--rule);
}

.post-preview h2 {
  margin: 0;
  color: var(--contrast);
  font-size: clamp(1.75rem, 1.67rem + 0.39vw, 2rem);
  font-weight: 400;
  line-height: 1.125;
}

.post-preview h2 a:hover {
  text-decoration: underline;
}

.post-preview time {
  display: block;
  margin-top: 30px;
  color: var(--copy);
  font-size: 0.875rem;
}

.post-preview p {
  margin: 22px 0 0;
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35em;
  margin-top: 22px;
  font-size: 0.8rem;
  font-weight: 200;
}

/* -------------------------------------------------------------- the article */

.post h1 {
  margin: 0;
  color: var(--contrast);
  font-size: clamp(2rem, 1.8rem + 1vw, 2.75rem);
  font-weight: 400;
  letter-spacing: -0.1px;
  line-height: 1.15;
  text-wrap: balance;
}

.post > time {
  display: block;
  margin-top: 30px;
  font-size: 0.875rem;
}

.post h2 {
  margin: 54px 0 0;
  color: var(--contrast);
  font-size: clamp(1.375rem, 1.3rem + 0.35vw, 1.625rem);
  font-weight: 400;
  line-height: 1.2;
}

.post h3 {
  margin: 38px 0 0;
  color: var(--contrast);
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -0.2px;
}

.post p {
  margin: 22px 0 0;
}

.post ul,
.post ol {
  margin: 22px 0 0;
  padding-left: 1.2em;
}

.post li + li {
  margin-top: 10px;
}

.post ul.refs {
  list-style: none;
  padding-left: 0;
  font-size: 0.9rem;
}

.post figure {
  margin: 44px 0 0;
}

.post figure img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--rule);
}

.post figcaption {
  margin-top: 12px;
  font-size: 0.8rem;
  font-weight: 200;
  line-height: 1.35;
}

.post blockquote {
  margin: 30px 0 0;
  padding-left: 20px;
  border-left: 1px solid var(--rule);
}

.post code,
.post pre {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 0.9em;
}

.post pre {
  margin: 22px 0 0;
  padding: 18px 20px;
  overflow-x: auto;
  background: rgba(25, 25, 25, 0.04);
  border: 1px solid var(--rule);
}

.post mjx-container[display='true'] {
  overflow-x: auto;
  overflow-y: hidden;
}

.post table {
  width: 100%;
  margin: 22px 0 0;
  border-collapse: collapse;
  font-size: 0.95rem;
}

.post th,
.post td {
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid var(--rule);
}

.series-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  margin-top: clamp(50px, 7vw, 90px);
  padding-top: 30px;
  border-top: 1px solid var(--rule);
  font-size: 1rem;
}

.series-nav a:hover {
  text-decoration: underline;
}

.series-nav .next {
  text-align: right;
}

.series-nav span {
  font-size: 0.8rem;
  font-weight: 200;
}

/* ---------------------------------------------------------- the contact form */

.contact-form {
  margin-top: 38px;
}

.field {
  display: grid;
  gap: 10px;
  margin: 0 0 22px;
}

.field label {
  color: var(--contrast);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.2px;
}

.lede {
  margin: 30px 0 0;
}

.field label span {
  color: var(--copy);
  font-weight: 300;
}

.field input,
.field textarea {
  width: 100%;
  min-width: 0;
  padding: 15px 18px;
  color: var(--contrast);
  background: var(--field);
  border: 1px solid rgba(25, 25, 25, 0.35);
  border-radius: 5px;
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.4;
}

.field textarea {
  resize: vertical;
  min-height: 160px;
}

.field input:focus-visible,
.field textarea:focus-visible {
  outline: 2px solid var(--copy);
  outline-offset: 2px;
}

.field-actions {
  margin-top: 30px;
}

.field-actions button {
  width: 100%;
  padding: 17px 23px;
  color: var(--base);
  background: var(--contrast);
  border: 1px solid var(--contrast);
  border-radius: 8px;
  box-shadow: 0 6px 16px rgba(25, 25, 25, 0.14);
  cursor: pointer;
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.3;
}

.field-actions button:hover {
  background: rgba(25, 25, 25, 0.85);
}

/* Long tokens in prose, references and captions wrap rather than pushing the
 * column sideways, and a wide table scrolls inside its own box. */

.post p,
.post li,
.post figcaption,
.post h1,
.post h2 {
  overflow-wrap: anywhere;
}

.post table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
}

#top {
  scroll-margin-top: 20px;
}

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

.site-footer {
  margin-top: clamp(30px, 7vw, 70px);
  border-top: 1px solid var(--rule);
}

.footer-content {
  padding-block: clamp(30px, 7vw, 70px) clamp(30px, 5vw, 50px);
}

.footer-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: clamp(70px, 10vw, 140px);
}

.footer-lead {
  flex: 0 1 645px;
}

.footer-title {
  display: inline-block;
  color: var(--contrast);
  font-size: clamp(1.75rem, 1.67rem + 0.39vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.5px;
  line-height: 1.125;
  text-decoration: none;
}

.footer-title:hover {
  text-decoration: underline;
}

.footer-lead > p {
  margin: 30px 0;
}

.footer-lead .email-row {
  max-width: 500px;
  gap: 10px;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: clamp(70px, 10vw, 140px);
}

.footer-links nav {
  display: grid;
  align-items: start;
  gap: 10px;
  min-width: 76px;
  font-size: clamp(1rem, 0.96rem + 0.18vw, 1.125rem);
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: clamp(50px, 7vw, 90px);
}

.footer-bottom .wordmark {
  flex: 0 0 auto;
}

.footer-bottom p {
  margin: 0;
  font-size: 0.875rem;
  white-space: nowrap;
}

/* ----------------------------------------------------------- the two widths */

@media (max-width: 760px) {
  .desktop-nav {
    display: none;
  }

  .mobile-menu {
    display: block;
  }

  .hero {
    padding-top: 38px;
  }

  .hero-email {
    margin-top: 44px;
  }

  .email-row {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .email-row button {
    width: 100%;
  }

  .footer-top {
    display: grid;
  }

  .footer-links {
    width: 100%;
    gap: 60px;
  }


  .footer-lead {
    flex: 1 1 auto;
  }

  .series-nav {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .series-nav .next {
    text-align: left;
  }
}

@media (max-width: 480px) {
  .identity {
    font-size: 0.95rem;
  }

  .footer-bottom {
    align-items: flex-end;
  }

  .footer-bottom .wordmark {
    width: min(100%, 200px);
    height: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

@media (max-width: 380px) {
  :root {
    --page-padding: 24px;
  }

  .hero h1 {
    font-size: clamp(1.9rem, 1.6rem + 3vw, 2.2rem);
  }

  .footer-bottom .wordmark {
    width: 100%;
    height: auto;
  }

  .field-actions button {
    width: 100%;
  }
}

/* ------------------------------------------------------------------- on paper
 *
 * The notes are essays, and essays get printed. Chrome, nav, forms and the
 * footer go; the text runs black on white at a reading size; and every external
 * link prints its address, so a citation survives the trip to paper.
 */

@media print {
  :root {
    --base: #ffffff;
    --contrast: #000000;
    --copy: #1a1a1a;
    --rule: #999999;
    --page-padding: 0;
  }

  body {
    font-size: 11pt;
    line-height: 1.45;
  }

  .site-header,
  .site-footer,
  .skip,
  .email-row,
  .contact-form,
  .series-nav,
  .mobile-menu {
    display: none;
  }

  .content {
    max-width: none;
    margin-top: 0;
  }

  .hero {
    padding-top: 0;
    text-align: left;
  }

  .hero h1,
  .post h1 {
    font-size: 20pt;
  }

  .post h2 {
    font-size: 13pt;
    margin-top: 18pt;
    break-after: avoid;
  }

  .post p,
  .post li {
    orphans: 3;
    widows: 3;
  }

  .post figure,
  .post table,
  .post pre {
    break-inside: avoid;
  }

  .post figure img {
    border: 1px solid var(--rule);
  }

  .post a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 9pt;
    word-break: break-all;
  }

  .post-preview + .post-preview {
    break-before: auto;
  }
}