/* ============================================================
   Magnetic blog: /blog and /blog/<slug>
   ------------------------------------------------------------
   A port of chrisgarin.com's Field Notes: title + category chips,
   a featured post beside a "Latest posts" rail, then one 2-row
   carousel per category, all built from the same tone-panel card
   (shine sweep on hover, avatar straddling the panel seam).

   Recoloured to Magnetic: cream canvas with white cards, ink for
   controls (chips, arrows, dots), charcoal-to-black tone panels,
   and blue kept rare: link hovers and in-article links only.
   Lora carries headlines, Inter carries the card component, the
   same split as the homepage.

   Loaded AFTER styles.css, so the header, dropdown, mobile menu
   and footer are the main site's, untouched. Pages are generated
   by blog-src/build.py; this file is hand-written.
   ============================================================ */

.page-blog {
  --fn-sans: "Inter", "Helvetica Neue", Arial, sans-serif;
  --fn-muted: #55585a;
  --fn-faint: #86888a;
  --fn-line: rgba(15, 15, 15, .12);
  background: var(--cream);
  color: var(--ink);
}

/* main.js runs the homepage's COLLINS colour wash on every page: it
   prepends a fixed ink .page-backdrop (z-index -1, so it paints OVER the
   body's cream) and makes the footer transparent via .fx-wash. The blog
   has no wash, so switch both off here rather than branching main.js. */
.page-blog .page-backdrop { display: none; }
.page-blog .footer.fx-wash { background: var(--gunmetal) !important; }

/* The header starts over cream here, not the homepage's black hero,
   so the white burger bars need ink until the bar condenses into the
   dark pill (or sits over the dark footer, or the menu is open). */
.page-blog .header:not(.is-pill):not(.is-dark) .mburger:not(.is-open) span { background: var(--ink); }

.nav__link[aria-current] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 8px; }
.mmenu__nav a[aria-current] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 10px; }

/* Blog content aligns to the header's 1400px / --gutter container. */
.fn-head,
.fn-lead,
.fn-section {
  max-width: var(--container);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

/* --- Header row: title + description, then filters --- */
.fn-head { padding-top: 168px; }

.fn-head__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 28px;
}

.fn-head__title {
  font-family: "Lora", Georgia, serif;
  font-size: clamp(2.8rem, 6vw, 4.6rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--ink);
}

.fn-head__desc {
  margin-top: 16px;
  max-width: 640px;
  font-family: var(--fn-sans);
  font-size: 17px;
  line-height: 1.55;
  color: var(--fn-muted);
}

.fn-head__cats { display: flex; flex-wrap: wrap; gap: 8px; }

.fn-chip {
  font-family: var(--fn-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #4a4c4e;
  background: transparent;
  border: 1px solid rgba(15, 15, 15, .18);
  border-radius: 999px;
  padding: 8px 15px;
  cursor: pointer;
  transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}
.fn-chip:hover { border-color: rgba(15, 15, 15, .45); color: var(--ink); transform: translateY(-1px); }
.fn-chip[aria-pressed="true"] { color: var(--cream); background: var(--ink); border-color: var(--ink); }

/* --- Card: coloured tone panel standing in for a photo --- */
.fn-item.is-hidden { display: none; }

.fn-card,
.fn-card:visited {
  --tone: #262626;
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #fff;
  border-radius: 18px;
  overflow: hidden;
  color: var(--ink);
  text-decoration: none;
  box-shadow: 0 1px 2px rgba(15, 15, 15, .06);
  transition: transform .55s cubic-bezier(.33, 1, .68, 1), box-shadow .55s cubic-bezier(.33, 1, .68, 1);
}
.fn-card:hover { transform: translateY(-4px); box-shadow: 0 22px 46px rgba(15, 15, 15, .16); }

/* Shine sweep on hover: a skewed light band that crosses the whole card. */
.fn-card::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 75%;
  height: 100%;
  z-index: 5;
  pointer-events: none;
  background: linear-gradient(100deg, transparent 0%, rgba(255,255,255,.10) 30%, rgba(255,255,255,.24) 44%, rgba(255,255,255,.4) 50%, rgba(255,255,255,.24) 56%, rgba(255,255,255,.10) 70%, transparent 100%);
  transform: skewX(-16deg) translateX(-180%);
}
.fn-card:hover::after { animation: fn-shine 2.1s cubic-bezier(.37, 0, .28, 1); }

@keyframes fn-shine {
  from { transform: skewX(-16deg) translateX(-180%); }
  to   { transform: skewX(-16deg) translateX(340%); }
}

.fn-card__panel {
  position: relative;
  height: clamp(115px, 11.5vw, 146px);
  background: var(--tone);
  background-image: linear-gradient(150deg, rgba(255,255,255,.10), rgba(0,0,0,.16));
  overflow: hidden;
}

.fn-card__cat {
  position: absolute;
  top: 16px;
  left: 16px;
  font-family: var(--fn-sans);
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(255, 255, 255, .18);
  border: 1px solid rgba(255, 255, 255, .28);
  padding: 5px 10px;
  border-radius: 999px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.fn-card__date {
  position: absolute;
  top: 20px;
  right: 18px;
  font-family: var(--fn-sans);
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: .03em;
  color: rgba(255, 255, 255, .82);
}

.fn-card__body {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 0 22px 24px;
}

/* Avatar is centred on the panel/body seam and layered above the panel,
   so exactly half of it sits over the colour. Row height = the circle's
   radius, so flex-end drops the name onto its bottom edge. */
.fn-card__by {
  display: flex;
  align-items: flex-end;
  height: 25px;
  padding-left: 56px;
  margin-bottom: 18px;
}

.fn-card__avatar {
  position: absolute;
  top: 0;
  left: 22px;
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 3px solid #fff;
  box-shadow: 0 5px 16px rgba(0, 0, 0, .30);
  z-index: 3;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--canvas-deep), var(--canvas));
  color: var(--ink);
  font-family: var(--fn-sans);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .02em;
}

.fn-card__byname {
  margin-bottom: 5px;
  font-family: var(--fn-sans);
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  color: #4a4c4e;
}

.fn-card__foot { margin-top: auto; }

.fn-card__title {
  font-family: "Lora", Georgia, serif;
  font-size: 1.32rem;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -.01em;
  color: var(--ink);
}

.fn-card__excerpt {
  margin-top: 11px;
  font-family: var(--fn-sans);
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--fn-muted);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* --- Featured post + "Latest posts" rail --- */
.fn-lead { padding-top: 40px; }
.fn-lead.is-hidden { display: none; }

.fn-lead__inner { display: grid; grid-template-columns: 1fr; gap: 26px; }

.fn-hero,
.fn-hero:visited {
  --tone: #262626;
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #fff;
  border-radius: 20px;
  overflow: hidden;
  color: var(--ink);
  box-shadow: 0 1px 2px rgba(15, 15, 15, .06);
  transition: transform .55s cubic-bezier(.33, 1, .68, 1), box-shadow .55s cubic-bezier(.33, 1, .68, 1);
}
.fn-hero:hover { transform: translateY(-4px); box-shadow: 0 24px 50px rgba(15, 15, 15, .17); }

.fn-hero__panel {
  position: relative;
  min-height: 210px;
  flex: 1;
  background: var(--tone);
  background-image: linear-gradient(150deg, rgba(255,255,255,.10), rgba(0,0,0,.20));
}

.fn-hero__body { padding: 24px 28px 28px; }

.fn-hero__title {
  font-family: "Lora", Georgia, serif;
  font-size: clamp(1.6rem, 2.6vw, 2.15rem);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -.01em;
  color: var(--ink);
}

.fn-hero__excerpt {
  margin-top: 12px;
  font-family: var(--fn-sans);
  font-size: 15.5px;
  line-height: 1.62;
  color: var(--fn-muted);
}

.fn-hero__meta {
  display: block;
  margin-top: 16px;
  font-family: var(--fn-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--fn-faint);
}

.fn-latest {
  background: #fff;
  border-radius: 20px;
  padding: 24px 26px 10px;
  box-shadow: 0 1px 2px rgba(15, 15, 15, .06);
}

.fn-latest__title {
  margin-bottom: 6px;
  font-family: "Lora", Georgia, serif;
  font-size: 1.36rem;
  font-weight: 500;
  color: var(--ink);
}

.fn-latest__item { border-bottom: 1px solid #ebe8e1; }
.fn-latest__item:last-child { border-bottom: 0; }

.fn-latest__link { display: flex; gap: 14px; align-items: flex-start; padding: 15px 0; }

.fn-latest__thumb {
  flex: 0 0 auto;
  width: 62px;
  height: 62px;
  border-radius: 12px;
  background: var(--tone);
  background-image: linear-gradient(150deg, rgba(255,255,255,.12), rgba(0,0,0,.18));
}

.fn-latest__headline {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-family: var(--fn-sans);
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--ink);
  transition: color .18s ease;
}
.fn-latest__link:hover .fn-latest__headline { color: var(--blue); }

.fn-latest__meta {
  display: block;
  margin-top: 5px;
  font-family: var(--fn-sans);
  font-size: 12px;
  color: var(--fn-faint);
}

/* --- Category sections --- */
.fn-section { padding-top: 56px; }
.fn-section.is-hidden { display: none; }
main > .fn-section:last-of-type { padding-bottom: 110px; }

.fn-section__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 22px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--fn-line);
}
.fn-section__heading { display: flex; flex-direction: column; gap: 4px; }

.fn-section__title {
  font-family: "Lora", Georgia, serif;
  font-size: 1.85rem;
  font-weight: 500;
  letter-spacing: -.01em;
  color: var(--ink);
}

.fn-section__blurb {
  font-family: var(--fn-sans);
  font-size: 15px;
  line-height: 1.55;
  color: var(--fn-muted);
}

/* --- 2-row horizontal carousel ---
   Each section scrolls sideways instead of growing downward. The track
   is a 2-row grid flowing in COLUMNS, so cards-per-view falls out of the
   breakpoint: 3 columns on desktop, 2 on tablet, ~1 on a phone. Page
   count and dots come from scroll metrics (blog.js). */
.fn-carousel { position: relative; }

.fn-track {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(2, auto);
  grid-auto-columns: calc((100% - 2 * 26px) / 3);
  gap: 26px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  padding-bottom: 4px;
  scrollbar-width: none;
}
/* Until a section has more posts than one row holds, a 2-row track would
   stack its cards down the first column. Keep short sections to one row. */
.fn-track:not(:has(> .fn-item:nth-child(4))) { grid-template-rows: auto; }
.fn-track::-webkit-scrollbar { display: none; }
.fn-track:focus-visible { outline: 2px solid var(--ink); outline-offset: 6px; border-radius: 18px; }
.fn-track > .fn-item { scroll-snap-align: start; }

.fn-section__nav { display: flex; gap: 8px; flex: 0 0 auto; }
.fn-section__nav[hidden] { display: none; }

.fn-arrow {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(15, 15, 15, .20);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease, color .18s ease, opacity .18s ease;
}
.fn-arrow svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.fn-arrow:hover:not(:disabled) { background: var(--ink); border-color: var(--ink); color: var(--cream); }
.fn-arrow:disabled { opacity: .3; cursor: default; }

.fn-dots { display: flex; justify-content: center; gap: 9px; margin-top: 22px; }
.fn-dots[hidden] { display: none; }

.fn-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(15, 15, 15, .22);
  cursor: pointer;
  transition: background .2s ease, width .2s ease;
}
.fn-dot:hover { background: rgba(15, 15, 15, .42); }
.fn-dot[aria-selected="true"] { background: var(--ink); width: 22px; border-radius: 999px; }

/* --- Plain grid (post pages' "Keep reading") --- */
.fn-grid { display: grid; grid-template-columns: 1fr; gap: 26px; }

@media (min-width: 900px) {
  .fn-lead__inner { grid-template-columns: 1.55fr 1fr; align-items: stretch; }
  .fn-hero__panel { min-height: 260px; }
}

@media (max-width: 959px) {
  .fn-track { grid-auto-columns: calc((100% - 22px) / 2); gap: 22px; }
}

@media (max-width: 639px) {
  .fn-track { grid-auto-columns: 84%; gap: 18px; }
  .fn-section__head { align-items: flex-start; }
}

@media (max-width: 560px) {
  .fn-head { padding-top: 124px; }
  .fn-lead { padding-top: 28px; }
  .fn-section { padding-top: 40px; }
  main > .fn-section:last-of-type { padding-bottom: 72px; }
  .fn-hero__body { padding: 20px 20px 22px; }
  .fn-latest { padding: 20px 20px 8px; }
}

/* ============================================================
   Post page
   ============================================================ */
.article-page { padding: 160px var(--gutter) 110px; }
.page-post .article-page { overflow-x: clip; }

.article-container { max-width: 700px; margin: 0 auto; }

.article-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  font-family: var(--fn-sans);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--fn-faint);
}
.article-meta a { color: #4a4c4e; transition: color .18s ease; }
.article-meta a:hover { color: var(--blue); }

.article-title {
  font-family: "Lora", Georgia, serif;
  font-size: clamp(2.1rem, 4.6vw, 3.4rem);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -.02em;
  color: var(--ink);
}

/* Byline strip: avatar, name, date, read time between hairlines */
.article-byline {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 28px;
  padding: 14px 0;
  border-top: 1px solid var(--fn-line);
  border-bottom: 1px solid var(--fn-line);
  font-family: var(--fn-sans);
}

.article-byline__avatar {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--canvas-deep), var(--canvas));
  color: var(--ink);
  font-size: 11px;
  font-weight: 600;
}
img.fn-card__avatar,
img.article-byline__avatar { object-fit: cover; background: var(--canvas); }
.article-byline__name { font-size: 14.5px; font-weight: 600; color: var(--ink); }
.article-byline__meta { font-size: 13.5px; color: var(--fn-faint); }
.article-byline__dot { font-size: 10px; color: #b3b4ae; }

.article-content {
  margin-top: 38px;
  font-family: "Lora", Georgia, serif;
  font-size: 1.2rem;
  line-height: 1.75;
  color: #2a2c2e;
}
.article-content p { margin: 0 0 1.25em; }
.article-content a { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }
.article-content h2 {
  margin: 1.9em 0 .6em;
  font-size: 1.7rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink);
}
.article-content h3 {
  margin: 1.8em 0 .5em;
  font-size: 1.32rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink);
}
.article-content ul,
.article-content ol { margin: 0 0 1.4em; padding-left: 1.25em; }
.article-content ul { list-style: disc; }
.article-content ol { list-style: decimal; }
.article-content li { margin: 0 0 .6em; line-height: 1.65; }
.article-content strong { font-weight: 600; color: var(--ink); }

/* "Keep reading": breaks out of the 700px reading column to card width. */
.post-related {
  --pr-width: min(1152px, calc(100vw - 2 * var(--gutter)));
  position: relative;
  left: 50%;
  width: var(--pr-width);
  margin: 80px 0 0 calc(var(--pr-width) / -2);
  padding-top: 34px;
  border-top: 1px solid var(--fn-line);
}

.post-related__heading {
  font-family: "Lora", Georgia, serif;
  font-size: 1.85rem;
  font-weight: 500;
  letter-spacing: -.01em;
  color: var(--ink);
}

.post-related__grid { margin-top: 24px; }

/* White cards on cream need a touch more edge when they sit in a plain grid. */
.post-related .fn-card { box-shadow: 0 8px 26px rgba(15, 15, 15, .07); }

@media (min-width: 760px) {
  .post-related__grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 767px) {
  .article-page { padding-top: 128px; padding-bottom: 80px; }
  .article-content { font-size: 1.08rem; }
  .article-content h2 { font-size: 1.4rem; }
  .article-content h3 { font-size: 1.2rem; }
}

@media (prefers-reduced-motion: reduce) {
  .fn-card:hover::after { animation: none; }
  .fn-card, .fn-hero { transition: none; }
  .fn-track { scroll-behavior: auto; }
}