/* =========================================================================
   pages.css — the reading pages.

   index.html is a film. These two are documents, and they should not pretend
   otherwise: no scrub, no pin, no chrome that moves. What they share with the
   front page is the ground, the ink, the type scale and the bar, so arriving
   here from the film feels like turning to a different part of the same thing
   rather than landing on another site.

   Tokens come from scrollcraft.css. Everything below is layout.
   ========================================================================= */

:root {
  --sc-canvas:     #F2F0EB;
  --sc-surface:    #FBFAF7;
  --sc-ink:        #14202E;
  --sc-ink-soft:   #5C6675;
  --sc-accent:     #14589B;
  --sc-accent-ink: #FFFFFF;

  --sc-font-display: "Instrument Sans", system-ui, sans-serif;
  --sc-font-text:    "DM Sans", system-ui, sans-serif;
  --sc-font-mono:    "DM Mono", ui-monospace, monospace;

  --sc-shadow-color: 216 34% 34%;
  --sc-e1: 0 1px 2px hsl(var(--sc-shadow-color) / 0.10),
           0 2px 6px -1px hsl(var(--sc-shadow-color) / 0.08);
  --sc-e2: 0 2px 4px hsl(var(--sc-shadow-color) / 0.09),
           0 10px 22px -6px hsl(var(--sc-shadow-color) / 0.14);
  --sc-e3: 0 4px 10px hsl(var(--sc-shadow-color) / 0.10),
           0 22px 48px -12px hsl(var(--sc-shadow-color) / 0.18);
}

body { background: var(--sc-canvas); }
.sc-grain { opacity: 0.038; }

/* ---- bar ----------------------------------------------------------------
   The same bar as the front page, minus the cross-fade: there is no clip
   underneath it here, so it only ever needs its paper treatment. */
.nh-bar {
  position: fixed; inset: 0 0 auto 0; z-index: 60;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sc-5);
  height: 56px; padding-inline: var(--sc-gutter);
  pointer-events: none;
}
.nh-bar::before {
  content: ""; position: absolute; inset: 0 0 -18px 0; z-index: -1;
  background: linear-gradient(to bottom,
    color-mix(in oklab, var(--sc-canvas) 94%, transparent) 0px,
    color-mix(in oklab, var(--sc-canvas) 88%, transparent) 34px,
    color-mix(in oklab, var(--sc-canvas) 26%, transparent) 58px,
    transparent 74px);
}
.nh-bar > * { pointer-events: auto; }
.nh-mark {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--sc-font-display); font-weight: 700;
  font-size: 0.95rem; letter-spacing: 0.02em;
  color: var(--sc-ink); text-decoration: none;
}
.nh-mark__logo { display: block; flex: none; width: auto; height: 22px; }
.nh-mark i { font-style: normal; color: var(--sc-accent); }

.nh-bar__nav { display: flex; align-items: center; gap: clamp(0.9rem, 2.4vw, 2rem); }
.nh-bar__nav > a:not(.nh-bar__cta) {
  font-size: var(--sc-t-sm); font-weight: 500; color: var(--sc-ink);
  text-decoration: none; opacity: 0.72;
  transition: opacity var(--sc-d-base) var(--sc-ease-out), color var(--sc-d-base) var(--sc-ease-out);
}
.nh-bar__nav > a:not(.nh-bar__cta):hover { opacity: 1; color: var(--sc-accent); }
.nh-bar__nav > a[aria-current="page"] { opacity: 1; color: var(--sc-accent); }
.nh-bar__cta {
  font-size: var(--sc-t-sm); font-weight: 500; color: var(--sc-ink);
  text-decoration: none; padding-bottom: 2px;
  border-bottom: 1px solid color-mix(in oklab, var(--sc-ink) 34%, transparent);
  transition: border-color var(--sc-d-base) var(--sc-ease-out);
}
.nh-bar__cta:hover { border-color: var(--sc-accent); }
/* Touch targets. Every link in the bar is set at small type with no padding,
   so its hit box is the height of the text: 22px, against the 44px a thumb
   actually needs. The area is grown with a pseudo-element rather than with
   padding because the CTA carries a border-bottom that padding would push
   down, and because an invisible overlay changes no layout at all. Vertical
   only: the nav gap at this width is 13.6px, so widening sideways would make
   neighbouring targets touch. */
@media (pointer: coarse) {
  .nh-mark, .nh-bar__nav > a { position: relative; }
  .nh-mark::after, .nh-bar__nav > a::after { content: ""; position: absolute; inset: -11px 0; }
}
@media (pointer: coarse) {
  .post__back { position: relative; }
  .post__back::after { content: ""; position: absolute; inset: -11px -8px; }
}
/* Phone: the bar cannot hold a wordmark, two links and a CTA at 390px, so the
   text half of the mark goes and the bean-bolt carries it. Hiding the nav
   links instead was the first cut and it left a phone with no way to reach
   About or Thoughts at all. */
@media (max-width: 620px) {
  .nh-mark > span { display: none; }
  .nh-bar__nav { gap: 0.85rem; }
  .nh-bar__nav > a { font-size: var(--sc-t-xs); white-space: nowrap; }
}

/* ---- shared page furniture ---------------------------------------------- */
.pg { padding: clamp(7rem, 16vh, 10rem) 0 var(--sc-9); }
.pg-wrap { width: 100%; max-width: 72rem; margin-inline: auto; padding-inline: var(--sc-gutter); }
.pg-narrow { max-width: 48rem; }

.nh-eyebrow {
  font-family: var(--sc-font-mono); font-size: var(--sc-t-xs);
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--sc-accent); margin: 0 0 var(--sc-4);
}
.pg h1 {
  font-family: var(--sc-font-display); font-weight: 700;
  font-size: clamp(2.4rem, 1.4rem + 3.4vw, 4.2rem);
  letter-spacing: var(--sc-track-tight); line-height: 1.02;
  margin: 0; color: var(--sc-ink); text-wrap: balance;
}
.pg-lede {
  margin: var(--sc-6) 0 0; max-width: 42rem;
  font-size: var(--sc-t-lg); line-height: 1.5; color: var(--sc-ink);
}
.pg-body { margin: var(--sc-5) 0 0; max-width: 42rem; color: var(--sc-ink-soft); line-height: 1.62; }

.pg-rule { height: 1px; border: 0; background: var(--sc-hairline-strong); margin: var(--sc-9) 0; }

/* section headings below the h1 */
.pg-h2 {
  margin: 0; color: var(--sc-ink);
  font-family: var(--sc-font-display); font-weight: 700;
  font-size: var(--sc-t-2xl); letter-spacing: var(--sc-track-snug);
  line-height: 1.06; text-wrap: balance;
}

.nh-btn {
  display: inline-flex; align-items: center; gap: 0.55rem;
  padding: 0.85rem 1.5rem;
  background: var(--sc-accent); color: var(--sc-accent-ink);
  font-family: var(--sc-font-text); font-weight: 500;
  font-size: var(--sc-t-sm); line-height: 1; white-space: nowrap;
  text-decoration: none; border-radius: var(--sc-r-sm); box-shadow: var(--sc-e1);
  transition: background var(--sc-d-fast) var(--sc-ease-out), box-shadow var(--sc-d-base) var(--sc-ease-out);
}
.nh-btn:hover { background: #10487F; box-shadow: var(--sc-e2); }
.nh-btn--quiet {
  background: transparent; color: var(--sc-ink); box-shadow: inset 0 0 0 1px var(--sc-hairline-strong);
}
.nh-btn--quiet:hover { background: transparent; color: var(--sc-accent); box-shadow: inset 0 0 0 1px var(--sc-accent); }
.pg-ctas { margin-top: var(--sc-7); display: flex; flex-wrap: wrap; gap: var(--sc-4); }

/* ---- about --------------------------------------------------------------- */
.ab-head { display: grid; gap: var(--sc-8); align-items: center; }
@media (min-width: 900px) { .ab-head { grid-template-columns: 1fr 22rem; gap: var(--sc-9); } }
.ab-head__fig { margin: 0; }
.ab-head__fig > div {
  border-radius: var(--sc-r-md); overflow: clip; box-shadow: var(--sc-e3);
  aspect-ratio: 3 / 4; background: var(--sc-surface);
}
.ab-head__fig img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; }
.ab-head__fig figcaption,
.ab-plate figcaption {
  margin-top: var(--sc-3); font-size: var(--sc-t-sm); font-style: italic;
  color: var(--sc-ink-soft); max-width: 34ch;
}

/* Row-major, never CSS multicolumn: a column that runs the height of a long
   page finishes two screens down and sends the reader back up to start the
   next one. */
.ab-sections { display: grid; gap: 0; }
@media (min-width: 900px) {
  .ab-sections { grid-template-columns: 1fr 1fr; column-gap: var(--sc-9); align-items: start; }
}
.ab-sections > article { padding: var(--sc-6) 0; border-top: 1px solid var(--sc-hairline); }
@media (min-width: 900px) { .ab-sections > article:nth-child(-n+2) { border-top-color: var(--sc-hairline-strong); } }
@media (max-width: 899px) { .ab-sections > article:first-child { border-top-color: var(--sc-hairline-strong); } }
.ab-sections h2 {
  margin: 0 0 var(--sc-3);
  font-family: var(--sc-font-display); font-weight: 600;
  font-size: var(--sc-t-lg); letter-spacing: var(--sc-track-snug);
  line-height: 1.16; color: var(--sc-ink); text-wrap: balance;
}
.ab-sections p { margin: 0 0 var(--sc-3); color: var(--sc-ink-soft); font-size: var(--sc-t-sm); line-height: 1.62; }
.ab-sections p:last-child { margin-bottom: 0; }
/* :not(.nh-btn) matters. A bare `.ab-sections a` is more specific than
   `.nh-btn` and sits later in the file, so it repainted every button label
   accent-blue on an accent-blue fill: the Join free and Buy on Amazon buttons
   rendered as solid rectangles with invisible text. */
.ab-sections a:not(.nh-btn),
.ab-faq a:not(.nh-btn),
.pg-body a:not(.nh-btn) {
  color: var(--sc-accent);
  text-underline-offset: 2px;
  text-decoration-color: color-mix(in oklab, var(--sc-accent) 40%, transparent);
}
.ab-sections a:not(.nh-btn):hover,
.pg-body a:not(.nh-btn):hover { text-decoration-color: var(--sc-accent); }
.ab-sections .nh-btn { margin-top: var(--sc-4); }

/* Capped to the reading measure. At the full 72rem wrap this photograph is the
   loudest thing on a page that is mostly prose, which is the wrong ranking. */
.ab-plate { margin: var(--sc-8) 0 0; max-width: 48rem; }
.ab-plate > div { border-radius: var(--sc-r-md); overflow: clip; box-shadow: var(--sc-e2); }
.ab-plate img { width: 100%; height: auto; display: block; }

.ab-opts { margin: var(--sc-7) 0 0; padding: 0; list-style: none; display: grid; gap: var(--sc-4); }
@media (min-width: 760px) { .ab-opts { grid-template-columns: repeat(3, 1fr); } }
.ab-opts li {
  padding: var(--sc-5) var(--sc-6);
  background: var(--sc-surface); border: 1px solid var(--sc-hairline);
  border-radius: var(--sc-r-md);
}
.ab-opts h3 { margin: 0 0 var(--sc-2); font-family: var(--sc-font-display); font-weight: 600; font-size: var(--sc-t-base); color: var(--sc-ink); }
.ab-opts p { margin: 0; font-size: var(--sc-t-sm); color: var(--sc-ink-soft); line-height: 1.6; }

.ab-faq { margin: var(--sc-7) 0 0; }
.ab-faq > div { padding: var(--sc-5) 0; border-top: 1px solid var(--sc-hairline); }
.ab-faq > div:first-child { border-top-color: var(--sc-hairline-strong); }
.ab-faq dt { font-family: var(--sc-font-display); font-weight: 600; font-size: var(--sc-t-base); color: var(--sc-ink); margin-bottom: var(--sc-2); }
.ab-faq dd { margin: 0; font-size: var(--sc-t-sm); color: var(--sc-ink-soft); line-height: 1.62; max-width: 62ch; }

.ab-press { display: flex; flex-wrap: wrap; gap: var(--sc-4); margin-top: var(--sc-6); }

/* ---- thoughts ------------------------------------------------------------ */
.th-list { margin: var(--sc-8) 0 0; padding: 0; list-style: none; border-top: 1px solid var(--sc-hairline-strong); }
.th-item a {
  display: grid; gap: 0.35rem var(--sc-6); align-items: baseline;
  grid-template-areas: "d" "t" "e";
  padding: var(--sc-6) 0; border-bottom: 1px solid var(--sc-hairline);
  color: inherit; text-decoration: none;
}
@media (min-width: 820px) {
  .th-item a {
    grid-template-columns: 8.5rem minmax(0, 1fr) auto;
    grid-template-areas: "d t go" "d e go";
    padding: var(--sc-6) 0;
  }
}
.th-item time {
  grid-area: d; font-family: var(--sc-font-mono); font-size: var(--sc-t-xs);
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--sc-ink-soft);
}
.th-item h2 {
  grid-area: t; margin: 0;
  font-family: var(--sc-font-display); font-weight: 600;
  font-size: var(--sc-t-xl); letter-spacing: var(--sc-track-snug);
  line-height: 1.1; color: var(--sc-ink); text-wrap: balance;
  transition: color var(--sc-d-base) var(--sc-ease-out);
}
.th-item p { grid-area: e; margin: var(--sc-2) 0 0; color: var(--sc-ink-soft); font-size: var(--sc-t-sm); line-height: 1.58; max-width: 64ch; }
.th-item span {
  grid-area: go; color: var(--sc-ink-soft); display: flex; align-items: center;
  transition: transform var(--sc-d-base) var(--sc-ease-out), color var(--sc-d-base) var(--sc-ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .th-item a:hover h2 { color: var(--sc-accent); }
  .th-item a:hover span { color: var(--sc-accent); transform: translate3d(3px, -3px, 0); }
}

/* ---- a post -------------------------------------------------------------
   One column, one measure, nothing decorative. A piece of writing is the one
   thing on this site that should look like nothing at all. */
.post { max-width: 40rem; }
.post__back {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-size: var(--sc-t-sm); color: var(--sc-ink-soft); text-decoration: none;
  margin-bottom: var(--sc-6);
}
.post__back:hover { color: var(--sc-accent); }
.post__meta {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem var(--sc-4);
  margin: var(--sc-5) 0 0;
  font-family: var(--sc-font-mono); font-size: var(--sc-t-xs);
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--sc-ink-soft);
}
.post h1 { font-size: clamp(2rem, 1.2rem + 2.6vw, 3.2rem); }

.post__hero { margin: var(--sc-8) 0 0; }
.post__hero > div { border-radius: var(--sc-r-md); overflow: clip; box-shadow: var(--sc-e2); }
.post__hero img { display: block; width: 100%; height: auto; }

.post__body { margin-top: var(--sc-8); }
.post__body > * { margin: 0 0 var(--sc-5); }
.post__body > :last-child { margin-bottom: 0; }
.post__body p { color: var(--sc-ink); font-size: var(--sc-t-base); line-height: 1.68; }
.post__body strong { font-weight: 600; color: var(--sc-ink); }
.post__body a { color: var(--sc-accent); text-underline-offset: 2px; }
.post__body h2 {
  margin-top: var(--sc-8);
  font-family: var(--sc-font-display); font-weight: 600;
  font-size: var(--sc-t-xl); letter-spacing: var(--sc-track-snug);
  line-height: 1.15; color: var(--sc-ink);
}
.post__body blockquote {
  margin: var(--sc-7) 0; padding: 0 0 0 var(--sc-6);
  border-left: 2px solid var(--sc-accent);
  font-family: var(--sc-font-display); font-weight: 500;
  font-size: var(--sc-t-lg); line-height: 1.4; color: var(--sc-ink);
}
.post__body blockquote p { font: inherit; color: inherit; margin: 0 0 var(--sc-3); }
.post__body blockquote p:last-child { margin: 0; }
.post__body ul { padding-left: 1.2rem; }
.post__body li { color: var(--sc-ink); font-size: var(--sc-t-base); line-height: 1.68; margin-bottom: var(--sc-2); }
.post__body figure { margin: var(--sc-7) 0; }
.post__body figure > div { border-radius: var(--sc-r-md); overflow: clip; box-shadow: var(--sc-e1); background: var(--sc-surface); }
.post__body figure img { display: block; width: 100%; height: auto; }
.post__body figcaption { margin-top: var(--sc-3); font-size: var(--sc-t-sm); font-style: italic; color: var(--sc-ink-soft); }

.post__next { margin-top: var(--sc-9); padding-top: var(--sc-6); border-top: 1px solid var(--sc-hairline-strong); }
.post__next p { margin: 0 0 var(--sc-4); font-size: var(--sc-t-sm); color: var(--sc-ink-soft); }
/* .nh-btn is nowrap, which is right for a two-word CTA and wrong for a button
   whose label is a post title. This one wraps. */
.post__next .nh-btn { white-space: normal; text-align: left; line-height: 1.35; max-width: 100%; }

/* ---- footer -------------------------------------------------------------- */
.pg-foot {
  margin-top: var(--sc-10);
  padding: var(--sc-6) var(--sc-gutter) var(--sc-8);
  border-top: 1px solid var(--sc-hairline-strong);
  display: flex; flex-wrap: wrap; gap: var(--sc-4) var(--sc-6);
  align-items: center; justify-content: space-between;
  max-width: 72rem; margin-inline: auto;
}
.pg-foot .nh-social { display: flex; flex-wrap: wrap; gap: var(--sc-5); }
.pg-foot .nh-social a { color: var(--sc-ink-soft); font-size: var(--sc-t-sm); text-decoration: none; }
.pg-foot .nh-social a:hover { color: var(--sc-accent); }
.pg-foot small { color: var(--sc-ink-soft); font-size: var(--sc-t-xs); }

.sc-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---- arrival ------------------------------------------------------------
   scrollcraft.css already styles [data-sc-in] and the engine already runs the
   observer that adds .sc-in, so these pages reuse both rather than shipping a
   second reveal with slightly different timing. Mounting the engine on a page
   with no acts costs one layout pass and nothing else. */