/* realityDebug(); — blog.
 *
 * Standalone rather than an extension of site.css, for one hard reason:
 * site.css sets `html, body { overflow: hidden }` because the main site is a
 * single fixed surface that never scrolls. A blog has to scroll, so it
 * cannot inherit that, and unpicking it after the fact would mean fighting
 * the rule the whole site is built on.
 *
 * The tokens below are therefore MIRRORED from css/site.css rather than
 * shared. If a colour changes there, change it here too — the values are
 * duplicated on purpose, so that editing the blog can never break the live
 * site's stylesheet.
 */

@font-face {
  /* Fallback for platforms without system Helvetica Neue. Matches site.css. */
  font-family: 'Helvetica';
  src: url('../fonts/helvetica.ttf') format('truetype');
  font-weight: normal;
  font-display: swap;
}

:root {
  --not-black: #1e1e1e;
  --bg-colour: #dfddd1;
  --menu-text: #e9e9de;
  --ink: #141311;

  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --font: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif;

  --logo-size: 70px;
  --gutter: 40px;
  --measure: 34em;
  --rule: rgba(20, 19, 17, 0.16);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html {
  background: var(--bg-colour);
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--bg-colour);
  color: var(--ink);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.6;
  min-height: 100%;
  padding: 0 var(--gutter) 120px;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

/* ------------------------------------------------------------- chrome */

/* Matches the site's fixed logo box: dark square, cream mark, top left. */
.logo-box {
  position: fixed;
  top: 24px;
  left: 24px;
  z-index: 30;
  width: var(--logo-size);
  height: var(--logo-size);
  background: var(--not-black);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.4s var(--ease-smooth);
}

.logo-box svg { width: 60%; height: auto; fill: var(--bg-colour); }
.logo-box:hover { transform: scale(0.94); }

.topnav {
  display: flex;
  justify-content: flex-end;
  gap: 26px;
  padding: 34px 0 0;
  font-size: 15px;
  font-weight: 700;
}

.topnav a {
  text-decoration: none;
  opacity: 0.62;
  transition: opacity 0.25s var(--ease-smooth);
}

.topnav a:hover { opacity: 1; }

/* Clears the fixed logo box, which would otherwise sit on the headline. */
.wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding-top: 72px;
}

/* ----------------------------------------------------------- headline */

.headline {
  font-weight: 900;
  font-size: clamp(38px, 6.6vw, 66px);
  line-height: 0.9;
  letter-spacing: -0.02em;
  margin-bottom: 56px;
}

/* --------------------------------------------------------- post index */

.posts { list-style: none; }

.post-row { border-top: 1px solid var(--rule); }
.post-row:last-child { border-bottom: 1px solid var(--rule); }

.post-row a {
  display: grid;
  grid-template-columns: 88px 1fr auto;
  gap: 24px;
  align-items: baseline;
  padding: 26px 8px;
  text-decoration: none;
  transition: background-color 0.25s var(--ease-smooth),
              padding-left 0.25s var(--ease-smooth);
}

.post-row a:hover {
  background: rgba(20, 19, 17, 0.05);
  padding-left: 18px;
}

/* Same "01 / 04" counter the lab grid uses. */
.num {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  opacity: 0.5;
  white-space: nowrap;
}

.row-title {
  display: block;
  font-size: clamp(20px, 2.4vw, 27px);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.15;
}

.row-desc {
  display: block;
  margin-top: 6px;
  opacity: 0.62;
  font-size: 15px;
  max-width: 46em;
}

.row-date {
  font-size: 13px;
  opacity: 0.5;
  white-space: nowrap;
}

.empty { opacity: 0.6; }

/* -------------------------------------------------------------- post */

.post-head { margin-bottom: 44px; }

.meta {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.5;
  margin-bottom: 14px;
}

.post-title {
  font-weight: 900;
  font-size: clamp(32px, 5vw, 54px);
  line-height: 0.98;
  letter-spacing: -0.02em;
  max-width: 18em;
}

.standfirst {
  margin-top: 18px;
  font-size: 19px;
  opacity: 0.68;
  max-width: var(--measure);
}

/* Prose is measure-limited; everything else on the page is not. */
.prose { max-width: var(--measure); }
.prose > * + * { margin-top: 1.15em; }

.prose h2 {
  margin-top: 2.2em;
  font-size: 25px;
  font-weight: 800;
  letter-spacing: -0.015em;
}

.prose h3 {
  margin-top: 1.9em;
  font-size: 19px;
  font-weight: 800;
}

.prose a {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(20, 19, 17, 0.4);
}

.prose a:hover { text-decoration-color: var(--ink); }

.prose ul, .prose ol { padding-left: 1.3em; }
.prose li + li { margin-top: 0.4em; }

.prose blockquote {
  border-left: 2px solid var(--ink);
  padding-left: 20px;
  opacity: 0.75;
}

.prose img,
.prose video {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Figures are allowed to break the measure — a diagram needs the room. */
.prose figure { max-width: none; width: min(100%, 900px); }
.prose figcaption { margin-top: 8px; font-size: 13px; opacity: 0.55; }

.prose code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.88em;
  background: rgba(20, 19, 17, 0.07);
  padding: 0.14em 0.36em;
}

.prose pre {
  background: var(--not-black);
  color: var(--menu-text);
  padding: 20px 22px;
  overflow-x: auto;
  /* Code wants more room than prose does. */
  width: min(calc(100vw - var(--gutter) * 2), 900px);
}

.prose pre code {
  background: none;
  padding: 0;
  font-size: 13.5px;
  line-height: 1.6;
}

.prose hr {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: 2.4em 0;
}

.post-foot {
  margin-top: 72px;
  padding-top: 24px;
  border-top: 1px solid var(--rule);
  font-weight: 700;
  font-size: 15px;
}

.post-foot a { text-decoration: none; opacity: 0.62; }
.post-foot a:hover { opacity: 1; }

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

.foot {
  max-width: 1180px;
  margin: 90px auto 0;
  padding-top: 22px;
  border-top: 1px solid var(--rule);
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  opacity: 0.5;
}

.foot a { text-decoration: none; }
.foot a:hover { opacity: 1; }

/* ------------------------------------------------------------- mobile */

@media (max-width: 720px) {
  :root { --gutter: 22px; --logo-size: 54px; }

  body { font-size: 16px; }
  .wrap { padding-top: 60px; }

  /* The three-column row has no room to breathe; stack it and drop the
     counter, which is decoration rather than information. */
  .post-row a { grid-template-columns: 1fr; gap: 8px; padding: 22px 4px; }
  .post-row a:hover { padding-left: 4px; }
  .num { display: none; }
}