/* blog/blog.css — the whole blog's look, in one place.
   ═══════════════════════════════════════════════════════════════════════
   The writing was set in whatever serif the reader's machine happened to own,
   at one size, with one rule between things. It read as a document that had
   been tidied rather than a publication that had been designed, and the
   difference between those two is not decoration. It is that a designed page
   decides what you look at first, second and third, and an undesigned one
   leaves that to chance.

   So: the product's own typefaces rather than the machine's. A scale with real
   distance in it, so a heading is not merely a larger sentence. Hairlines and
   space doing the work that boxes and shadows were doing. And the small pieces
   of editorial furniture that a reader recognises without ever noticing:
   pieces numbered on the front page, sections numbered inside a piece, the
   opening letter set large, a quotation that hangs into the margin.

   Two typefaces, doing separate jobs and never swapping:
     Lora  — everything that is written: headlines, the writing itself.
     Inter — everything that is machinery: dates, labels, buttons, captions.
   That division is the whole system. If a new thing is words a person wrote,
   it is Lora. If it is a sign telling you about the words, it is Inter.
   (Isaac 2026-08-15: "can you design it so people will notice it went through
   a design agency?".)
   ═══════════════════════════════════════════════════════════════════════ */

:root{
  --paper:#faf7f2;
  --paper-2:#f1ebdc;
  --ink:#131c1d;
  --ink-2:#3d5056;
  --ink-3:#6a6460;
  --terra:#c2754e;
  --terra-deep:#8f4f30;
  --sage:#4a7c59;
  --rule:rgba(20,18,14,.12);
  --hair:rgba(20,18,14,.09);
  --measure:36rem;
  --wide:68rem;

  --serif:'Lora', Georgia, 'Iowan Old Style', 'Times New Roman', serif;
  --sans:'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* The consent notice is the site's own, shared with the landing page, and it
     paints itself from these five names. */
  --clarior-ink:#131c1d;
  --clarior-bg-soft:#f1ebdc;
  --clarior-terra:#7d3e20;
  --clarior-terra-hover:#6a3319;
  --clarior-body:'Inter', ui-sans-serif, system-ui, sans-serif;
}
*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font:400 19px/1.72 var(--serif);
  font-feature-settings:"kern" 1, "liga" 1, "onum" 1;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
.wrap{max-width:var(--measure);margin:0 auto;padding:0 22px;}
.wrap.is-wide{max-width:var(--wide);}

/* ── masthead ─────────────────────────────────────────────
   A rule under it and nothing else. The wordmark is set in the display face at
   a size that lets it be the largest thing on the page until a headline
   overtakes it. */
header.top{
  border-block-end:1px solid var(--ink);
  background:var(--paper);
}
header.top .wrap{
  max-width:var(--wide);display:flex;align-items:baseline;gap:18px;
  padding-block:22px 16px;
}
.brand{
  font:600 25px/1 var(--serif);letter-spacing:-.015em;
  color:var(--terra-deep);text-decoration:none;margin-inline-end:auto;
}
.brand span{color:var(--ink);}
.top-link{
  font:600 12px/1 var(--sans);letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-2);text-decoration:none;
  padding:9px 15px;border:1px solid var(--rule);border-radius:999px;
  transition:background .18s ease,border-color .18s ease,color .18s ease;
  white-space:nowrap;
}
.top-link:hover{background:#fff;border-color:rgba(20,18,14,.28);color:var(--ink);}
.top-link.is-primary{
  background:var(--ink);border-color:var(--ink);color:var(--paper);
}
.top-link.is-primary:hover{background:var(--terra-deep);border-color:var(--terra-deep);color:#fff;}

/* ── the head of a piece ──────────────────────────────────
   Label, headline, standfirst, then a row of facts under a hairline. The row
   is machinery, so it is set in the sans at a size that never competes. */
article{padding-block:64px 44px;}
.eyebrow{
  font:700 11px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;
  color:var(--terra-deep);margin:0 0 20px;
}
h1{
  font:600 clamp(38px,5.4vw,56px)/1.08 var(--serif);
  letter-spacing:-.026em;margin:0 0 20px;
  text-wrap:balance;
}
.standfirst{
  font:400 21px/1.55 var(--serif);color:var(--ink-2);margin:0 0 30px;
  text-wrap:pretty;
}
/* The facts about the piece, spaced across a hairline rather than run together
   with dots. Dots are what you use when you have not decided on a hierarchy. */
.byline{
  font:500 11.5px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-3);margin:0 0 40px;
  padding-block:14px;
  border-block:1px solid var(--ink);
  border-block-end-color:var(--hair);
  display:flex;gap:26px;flex-wrap:wrap;
  font-variant-numeric:tabular-nums;
}

/* ── the writing ──────────────────────────────────────────
   Sections count themselves. A reader knows how far in they are without being
   told, and a long piece stops being an undifferentiated wall. */
article{counter-reset:section;}
p{margin:0 0 24px;text-wrap:pretty;}
article h2{
  counter-increment:section;
  font:600 clamp(26px,3vw,31px)/1.2 var(--serif);
  letter-spacing:-.018em;margin:56px 0 18px;
  text-wrap:balance;position:relative;
}
article h2::before{
  content:counter(section,decimal-leading-zero);
  display:block;
  font:700 11px/1 var(--sans);letter-spacing:.18em;
  color:var(--terra);margin-bottom:12px;
}
/* The sources are machinery, not part of the argument, so they are not counted
   and do not wear a number. */
.sources h2{counter-increment:none;}
.sources h2::before{content:none;}
article h3, .panel h3, .closer h3{
  font:600 20px/1.35 var(--serif);letter-spacing:-.008em;margin:36px 0 10px;
}
a{
  color:var(--terra-deep);
  text-decoration-thickness:1px;text-underline-offset:3px;
  text-decoration-color:rgba(143,79,48,.4);
  transition:text-decoration-color .15s ease;
}
a:hover{text-decoration-color:var(--terra-deep);}
strong{font-weight:600;}
em{font-style:italic;}

/* The opening letter, set large. The oldest trick in the trade and still the
   fastest way to say a piece begins here. Only the first paragraph after the
   picture, never anywhere else. */
.hero + p::first-letter{
  float:inline-start;
  font:600 62px/.82 var(--serif);
  color:var(--terra-deep);
  margin:6px 12px 0 0;
}

figure{margin:44px 0;}
figure svg{display:block;width:100%;height:auto;}
figcaption{
  font:400 13px/1.55 var(--sans);color:var(--ink-3);
  margin-top:14px;padding-top:12px;
  border-block-start:1px solid var(--hair);
  max-width:30rem;
}

/* A quotation hangs into the margin and carries a mark, so it reads as
   something lifted out rather than a paragraph in italics. */
blockquote{
  margin:44px 0;padding:0;
  font:500 italic 25px/1.42 var(--serif);
  color:var(--ink);letter-spacing:-.012em;
  position:relative;
}
blockquote::before{
  content:"";position:absolute;
  inset-inline-start:-26px;inset-block-start:.55em;
  inline-size:14px;block-size:2px;background:var(--terra);
}
@media (max-width:700px){
  blockquote::before{inset-inline-start:0;inset-block-start:-14px;}
  blockquote{padding-block-start:16px;}
}

.panel{
  background:var(--paper-2);
  border:1px solid var(--hair);
  border-radius:4px;
  padding:28px 30px 12px;
  margin:44px 0;
}
.panel h3{margin-top:0;font-size:18px;}
.panel ul{margin:0 0 20px;padding-inline-start:20px;font-size:17.5px;}
.panel li{margin-bottom:11px;}
.panel.is-urgent{
  background:rgba(194,117,78,.07);
  border-color:rgba(194,117,78,.3);
  border-inline-start:3px solid var(--terra);
}

ul.plain{list-style:none;margin:0 0 26px;padding:0;}
ul.plain li{position:relative;padding-inline-start:30px;margin-bottom:15px;}
ul.plain li::before{
  content:"";position:absolute;inset-inline-start:0;inset-block-start:.72em;
  inline-size:16px;block-size:1px;background:var(--sage);
}

.rule{border:0;border-block-start:1px solid var(--hair);margin:52px 0;}

/* ── the card at the end ──────────────────────────────────
   The only place the product is named. Flat, ruled, quiet: a card that shouts
   after two thousand honest words undoes them. */
.closer{
  background:transparent;
  border:1px solid var(--ink);
  border-radius:4px;
  padding:34px 34px 32px;margin:56px 0 10px;
}
.closer h3{margin-top:0;font-size:23px;}
.closer p{font-size:18px;}
.cta{
  display:inline-block;margin-top:10px;
  font:600 12px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;
  background:var(--ink);color:var(--paper);text-decoration:none;
  border-radius:999px;padding:15px 28px;
  transition:background .18s ease,transform .18s ease;
}
.cta:hover{background:var(--terra-deep);transform:translateY(-1px);}

/* ── sources ──────────────────────────────────────────── */
.sources{font:400 14.5px/1.65 var(--sans);color:var(--ink-3);}
.sources h2{
  font:700 11px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-3);margin:0 0 18px;
}
.sources ol{padding-inline-start:20px;margin:0;}
.sources li{margin-bottom:12px;}
.sources em{font-style:italic;color:var(--ink-2);}

/* ── the way onward at the foot of a post ───────────────── */
.more{font-family:var(--sans);margin-block-start:56px;}
.more-label{
  font:700 11px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-3);margin:0 0 6px;
}
.more-list{list-style:none;margin:0;padding:0;}
.more-list li{border-block-start:1px solid var(--hair);}
.more-list li:first-child{border-block-start:1px solid var(--ink);}
.more-list a{
  display:block;text-decoration:none;color:inherit;padding-block:20px;
}
.more-list a:hover .more-title{color:var(--terra-deep);}
.more-title{
  display:block;font:600 20px/1.3 var(--serif);letter-spacing:-.012em;
  margin-bottom:5px;transition:color .15s ease;
}
.more-note{display:block;font:400 14px/1.5 var(--sans);color:var(--ink-3);}

/* ── the picture at the top of a piece ──────────────────── */
.hero{margin:0 0 40px;}
.hero img{
  display:block;width:100%;height:auto;
  border-radius:4px;
  background:var(--paper-2);
}

/* ═══════════════════════════════════════════════════════════
   THE FRONT PAGE
   Pieces are numbered and ruled rather than boxed. Cards floating on a page
   is what a template does; a publication uses a grid and lets the space
   between things do the separating.
   ═══════════════════════════════════════════════════════════ */
.index-head{padding-block:72px 10px;}
.page-grid.index-head{grid-template-columns:minmax(0,1fr);padding-block-end:0;}
.index-head .eyebrow{margin-bottom:16px;}
.index-head h1{font-size:clamp(46px,7vw,74px);letter-spacing:-.03em;margin-bottom:18px;}
.index-lede{
  font:400 21px/1.55 var(--serif);color:var(--ink-2);margin:0;
  max-width:32rem;text-wrap:pretty;
}

.posts{
  list-style:none;margin:0;padding:0 14px;
  padding-block:44px 10px;
  counter-reset:piece;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0 40px;
}
.posts li{
  counter-increment:piece;
  border-block-start:1px solid var(--hair);
}
.posts li:first-child,.posts li:nth-child(2){border-block-start:1px solid var(--ink);}

.post-link{
  display:flex;flex-direction:column;height:100%;
  text-decoration:none;color:inherit;
  padding-block:30px 34px;
  transition:opacity .2s ease;
}
.post-link:hover .post-title{color:var(--terra-deep);}
.post-link:hover .post-art{transform:scale(1.015);}

.post-art{
  display:block;width:100%;height:auto;aspect-ratio:1200/520;object-fit:cover;
  background:var(--paper-2);border-radius:3px;
  margin-bottom:22px;
  transition:transform .35s cubic-bezier(.2,0,.2,1);
}
.post-body{display:flex;flex-direction:column;}

/* The number of the piece, sitting where a page number would. */
.post-meta{
  font:600 11px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);margin:0 0 14px;
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  font-variant-numeric:tabular-nums;
}
.post-meta::before{
  content:counter(piece,decimal-leading-zero);
  color:var(--terra);font-weight:700;letter-spacing:.1em;
}
.post-meta .dot{display:none;}
.post-meta .when{color:var(--ink-3);font-weight:500;}
.post-meta .cat{color:var(--ink-2);font-weight:600;}
.post-title{
  font:600 25px/1.22 var(--serif);letter-spacing:-.018em;
  margin:0 0 12px;transition:color .18s ease;text-wrap:balance;
}
.post-standfirst{
  font:400 17px/1.6 var(--serif);color:var(--ink-2);margin:0;text-wrap:pretty;
}

/* The newest piece runs the full width and lays its picture beside its words. */
.posts li.is-lead{grid-column:1 / -1;}
@media (min-width:900px){
  .posts li.is-lead .post-link{
    flex-direction:row;align-items:center;gap:48px;padding-block:38px 42px;
  }
  .posts li.is-lead .post-art{inline-size:54%;margin-bottom:0;}
  .posts li.is-lead .post-body{inline-size:46%;}
  .posts li.is-lead .post-title{font-size:36px;line-height:1.14;}
  .posts li.is-lead .post-standfirst{font-size:18.5px;}
}

.no-hits{
  font:400 15px/1.6 var(--sans);color:var(--ink-3);
  padding-block:36px;margin:0;grid-column:1 / -1;
}

@media (max-width:820px){
  .posts{grid-template-columns:minmax(0,1fr);}
  .posts li:nth-child(2){border-block-start:1px solid var(--hair);}
}

/* ── colophon ─────────────────────────────────────────────
   The wordmark again, the line the whole thing is for, and the ways out. */
footer.foot{
  border-block-start:1px solid var(--ink);margin-top:70px;
  padding-block:34px 60px;
  font:400 13.5px/1.6 var(--sans);color:var(--ink-3);
}
footer.foot .wrap{max-width:var(--wide);}
footer.foot a{color:var(--ink-2);text-decoration:none;}
footer.foot a:hover{color:var(--ink);text-decoration:underline;}
.foot-links{
  margin-block-start:14px;display:flex;gap:24px;flex-wrap:wrap;
  font-size:12.5px;
}
/* Reopens the notice that asks whether you may be counted. A button rather
   than a link, because it goes nowhere: written as a link it advertised an
   address that does not exist. Dressed as its neighbours. */
.foot-links button{
  font:inherit;color:var(--ink-2);background:none;border:0;padding:0;
  cursor:pointer;
}
.foot-links button:hover{color:var(--ink);text-decoration:underline;}

@media (max-width:640px){
  body{font-size:18px;}
  article{padding-block:44px 34px;}
  .index-head{padding-block:48px 6px;}
  .byline{gap:16px;font-size:10.5px;}
  .hero + p::first-letter{font-size:54px;}
}

/* Anybody who has asked their machine to stop moving things gets a page that
   does not move. */
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important;}
}

/* ═══════════════════════════════════════════════════════════
   THE SIDE RAIL
   ───────────────────────────────────────────────────────────
   What separated this from a blog was not the writing, it was that every page
   was a single column with nothing beside it. A publication has furniture: a
   way to search, a way to see the subjects, a way to know where you are in a
   long piece, a way to pass it on.

   The rail is that furniture. On a post it holds the contents of the piece and
   the ways to share it. On the index it holds search, topics and the way in.
   Below 1080px it stops being a rail and becomes a band under the words, which
   is the only honest thing to do with a column on a phone.
   (Isaac 2026-08-15: "add more functions to the sides so it looks like blog".)
   ═══════════════════════════════════════════════════════════ */

.page-grid{
  max-width:var(--wide);margin:0 auto;padding:0 22px;
  display:grid;
  grid-template-columns:minmax(0,1fr) 15.5rem;
  gap:0 64px;
  align-items:start;
}
.page-grid > .col-main{min-width:0;max-width:var(--measure);}
.page-grid.is-wide > .col-main{max-width:none;}

/* The rail sticks, because a table of contents that scrolls away is a list. */
.rail{
  position:sticky;inset-block-start:28px;
  font-family:var(--sans);
  padding-block:64px 0;
}
.rail-card{
  border-block-start:1px solid var(--hair);
  padding-block:22px;
}
.rail-card:first-child{border-block-start:0;padding-block-start:0;}
.rail-label{
  font:700 10.5px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-3);margin:0 0 14px;
}

/* ── contents of the piece, with the section you are in marked ── */
.toc{list-style:none;margin:0;padding:0;}
.toc li{margin-bottom:2px;}
.toc a{
  display:block;text-decoration:none;
  font:400 13.5px/1.45 var(--sans);color:var(--ink-2);
  padding:5px 0 5px 12px;
  border-inline-start:2px solid var(--rule);
  transition:color .15s ease,border-color .15s ease;
}
.toc a:hover{color:var(--ink);}
.toc a.is-here{
  color:var(--terra-deep);font-weight:600;
  border-inline-start-color:var(--terra);
}

/* ── pass it on ── */
.share{display:flex;flex-wrap:wrap;gap:8px;}
.share button,.share a{
  font:600 12px/1 var(--sans);cursor:pointer;
  background:none;color:var(--ink-2);text-decoration:none;
  border:1px solid var(--rule);border-radius:999px;
  padding:8px 14px;
  transition:background .15s ease,border-color .15s ease,color .15s ease;
}
.share button:hover,.share a:hover{
  background:#fff;border-color:rgba(20,18,14,.24);color:var(--ink);
}
.share button.is-done{
  color:var(--sage);border-color:rgba(74,124,89,.45);
}

/* ── search and topics, on the index ── */
.rail-search{position:relative;}
.rail-search input{
  inline-size:100%;font:400 14px/1.2 var(--sans);color:var(--ink);
  background:#fff;border:1px solid var(--rule);border-radius:999px;
  padding:11px 16px;
}
.rail-search input:focus{
  outline:none;border-color:rgba(74,124,89,.55);
}
.rail-search input::placeholder{color:var(--ink-3);}

.topics{display:flex;flex-wrap:wrap;gap:7px;}
.topic{
  font:600 12px/1 var(--sans);cursor:pointer;
  background:none;color:var(--ink-2);
  border:1px solid var(--rule);border-radius:999px;
  padding:8px 13px;
  transition:background .15s ease,border-color .15s ease,color .15s ease;
}
.topic:hover{background:#fff;border-color:rgba(20,18,14,.24);}
.topic.is-on{
  background:var(--sage);border-color:var(--sage);color:#fff;
}
.topic .n{opacity:.65;margin-inline-start:5px;font-weight:600;}
.topic.is-on .n{opacity:.8;}

/* Said out loud when a search matches nothing, rather than an empty page. */
.no-hits{
  font-family:var(--sans);
  font-size:14.5px;color:var(--ink-3);
  padding-block:30px;margin:0;
}

/* ── the short lists in the rail ── */
.rail-list{list-style:none;margin:0;padding:0;}
.rail-list li{margin-bottom:12px;}
.rail-list a{
  text-decoration:none;color:var(--ink-2);
  font:600 13.5px/1.45 var(--sans);
  display:block;
  transition:color .15s ease;
}
.rail-list a:hover{color:var(--terra-deep);}

/* ── the small card that sells nothing until you have read something ── */
.rail-about{
  background:var(--paper-2);border:1px solid var(--hair);border-radius:4px;
  padding:20px;margin-block-start:24px;
}
.rail-about p{font:400 14px/1.55 var(--serif);color:var(--ink-2);margin:0 0 16px;}
.rail-about .cta{margin:0;font-size:10.5px;padding:11px 18px;}

/* ── how far through you are ── */
/* Thicker on a phone, because two pixels at arm's length is nothing. */
@media (max-width:1080px){ .progress{block-size:3px;} }
.progress{
  position:fixed;inset-block-start:0;inset-inline-start:0;
  block-size:2px;inline-size:0;
  background:var(--ink);
  z-index:50;
  transition:inline-size .08s linear;
}

/* The picture no longer runs wider than the words, because there is now a rail
   beside them and the space it used to borrow belongs to that. */

@media (max-width:1080px){
  .page-grid{grid-template-columns:minmax(0,1fr);gap:0;max-width:40rem;}
  .page-grid.is-wide{max-width:64rem;}
  .page-grid > .col-main{max-width:none;}
  .rail{
    position:static;padding-block:0 40px;
    border-block-start:1px solid var(--rule);margin-block-start:20px;
  }
  /* On a narrow screen the contents of the piece are noise: you have already
     scrolled past them by the time you reach them. */
  .rail-card.is-toc{display:none;}
  .rail-card:first-child{border-block-start:1px solid var(--hair);padding-block-start:22px;}
}

/* ── Saying what you agreed to, and letting you change it ────────────────
   Dressed as the site's own notice, because it is the same conversation:
   dark band across the foot of the screen, terra line along its top. It only
   appears when the word in the footer is pressed. */
.cookie-state{
  position:fixed;inset-inline:0;inset-block-end:0;z-index:2147483645;
  background:var(--clarior-ink);color:var(--clarior-bg-soft);
  border-block-start:2px solid var(--clarior-terra);
  font-family:var(--sans);
  font-size:13.5px;line-height:1.55;
  padding:16px 24px;
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;flex-wrap:wrap;
}
.cookie-state p{margin:0;flex:1;min-width:220px;}
.cookie-state-btns{display:flex;gap:10px;flex-shrink:0;}
.cookie-state button{
  font:600 12px/1 var(--sans);cursor:pointer;border-radius:999px;
  padding:9px 20px;white-space:nowrap;
}
.cookie-state .is-main{
  background:var(--clarior-terra);color:var(--clarior-bg-soft);border:0;
}
.cookie-state .is-main:hover{background:var(--clarior-terra-hover);}
.cookie-state .is-quiet{
  background:none;color:var(--clarior-bg-soft);
  border:1px solid rgba(255,255,255,.35);opacity:.85;
}
.cookie-state .is-quiet:hover{opacity:1;}

/* ── Somewhere to go that is not the end ─────────────────────────────────
   Most readers on a phone never reach the bottom of a long piece, and every
   onward link lived there. So the person who was enjoying it left without ever
   learning there were seven more. This is one link, partway down, on phones
   only, put there by the script rather than written into every piece.
   (Isaac 2026-08-15: on why visitors leave.) */
.mid-next{display:none;}
@media (max-width:1080px){
  .mid-next{
    display:block;margin:44px 0;padding-block:20px;
    border-block:1px solid var(--hair);
    text-decoration:none;color:inherit;
  }
  .mid-next .mid-label{
    display:block;font:700 10.5px/1 var(--sans);letter-spacing:.18em;
    text-transform:uppercase;color:var(--terra);margin-bottom:10px;
  }
  .mid-next .mid-title{
    display:block;font:600 20px/1.28 var(--serif);letter-spacing:-.012em;
    color:var(--ink);
  }
}

/* The lighter of the two doors at the end. The card asks somebody to consider
   the product; this asks nothing and keeps a reader who simply liked the
   writing. Without it the only move after two thousand words was to leave. */
.closer-alt{
  display:inline-block;margin-inline-start:22px;
  font:600 12px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3);text-decoration:none;
  border-bottom:1px solid var(--rule);padding-bottom:4px;
  transition:color .15s ease,border-color .15s ease;
}
.closer-alt:hover{color:var(--ink);border-color:var(--ink);}
@media (max-width:520px){
  .closer-alt{display:block;margin:20px 0 0;}
}

/* ═══════════════════════════════════════════════════════════
   COLOUR THAT MEANS SOMETHING
   ───────────────────────────────────────────────────────────
   One accent was doing every job on every page, so eight pieces about eight
   different things all looked like the same piece. The answer is not colour
   sprinkled about for relief, which is how a page starts looking like a
   brochure. It is colour carrying information: each subject owns a hue, and
   that hue then marks every piece of furniture on a page about that subject.
   The label at the top, the number beside each section, the opening letter, the
   mark against a quotation, the edge of a pulled-out box, the line showing how
   far through you are. All one colour, and a different one on the next piece.

   A reader never has to be told this. Two pieces in, they know that terra means
   being stuck and green means goals, and the front page becomes eight coloured
   markers rather than a list.

   The hues are all earth: umber, moss, slate, sea, mulberry, night. Nothing
   here is a bright accent on a white page. The writing itself stays ink, always,
   because coloured body text is unreadable and always has been. Only the
   furniture takes the colour.
   (Isaac 2026-08-15: "add some different bg colors, section bg colors, font
   colors, all look very monochromatic".)
   ═══════════════════════════════════════════════════════════ */
body{
  --accent:#8f4f30;                    /* umber, the house colour */
  --accent-soft:rgba(143,79,48,.08);
  --accent-line:rgba(143,79,48,.28);
  --band:#f4efe4;
}
body.t-stuck      { --accent:#8f4f30; --accent-soft:rgba(143,79,48,.08);  --accent-line:rgba(143,79,48,.3);  --band:#f5eee2; }
body.t-goals      { --accent:#3f6b4c; --accent-soft:rgba(63,107,76,.08);  --accent-line:rgba(63,107,76,.28); --band:#eef2ec; }
body.t-choosing   { --accent:#3d5056; --accent-soft:rgba(61,80,86,.075);  --accent-line:rgba(61,80,86,.26);  --band:#edf0f0; }
body.t-coaching   { --accent:#40606b; --accent-soft:rgba(64,96,107,.075); --accent-line:rgba(64,96,107,.26); --band:#ecf1f2; }
body.t-comparison { --accent:#7a4a5a; --accent-soft:rgba(122,74,90,.075); --accent-line:rgba(122,74,90,.26); --band:#f4ecee; }
body.t-nights     { --accent:#3c4663; --accent-soft:rgba(60,70,99,.075);  --accent-line:rgba(60,70,99,.26);  --band:#eceef4; }

/* The page takes the faintest wash of its own colour, so two pieces open
   differently before a word has been read. Barely there on purpose: any more
   and it stops being paper. */
body[class*="t-"]{ background:var(--band); }

/* ── the furniture takes the colour ── */
.eyebrow                    { color:var(--accent); }
h2::before                  { color:var(--accent); }
.hero + p::first-letter     { color:var(--accent); }
blockquote::before          { background:var(--accent); }
.progress                   { background:var(--accent); }
.panel                      { background:var(--accent-soft); border-color:var(--accent-line); }
.panel.is-urgent            { border-inline-start-color:var(--accent); }
.toc a.is-here              { color:var(--accent); border-inline-start-color:var(--accent); }
.mid-next .mid-label        { color:var(--accent); }
.rail-about                 { background:var(--accent-soft); border-color:var(--accent-line); }
a                           { color:var(--accent); text-decoration-color:var(--accent-line); }
a:hover                     { text-decoration-color:var(--accent); }
.cta:hover                  { background:var(--accent); }
.closer                     { border-color:var(--accent-line); background:rgba(255,255,255,.5); }
.post-link:hover .post-title{ color:var(--accent); }
.more-list a:hover .more-title{ color:var(--accent); }
.rail-list a:hover          { color:var(--accent); }
header.top                  { background:var(--band); border-block-end-color:var(--accent-line); }
.brand                      { color:var(--accent); }
.top-link.is-primary:hover  { background:var(--accent); border-color:var(--accent); }
.share button.is-done       { color:var(--accent); border-color:var(--accent-line); }

/* ── on the front page, the colour belongs to each card ──
   Eight subjects on one screen, so the page cannot take one wash. Each card
   carries its own instead: the number, the label, and the rule above it. */
body.t-index{ background:var(--paper); }
body.t-index header.top{ background:var(--paper); border-block-end-color:var(--ink); }
body.t-index .brand{ color:var(--terra-deep); }
body.t-index .index-head .eyebrow{ color:var(--terra-deep); }

.posts li[data-topic="stuck"]      { --accent:#8f4f30; --accent-soft:rgba(143,79,48,.07); }
.posts li[data-topic="goals"]      { --accent:#3f6b4c; --accent-soft:rgba(63,107,76,.07); }
.posts li[data-topic="choosing"]   { --accent:#3d5056; --accent-soft:rgba(61,80,86,.06); }
.posts li[data-topic="coaching"]   { --accent:#40606b; --accent-soft:rgba(64,96,107,.06); }
.posts li[data-topic="comparison"] { --accent:#7a4a5a; --accent-soft:rgba(122,74,90,.06); }
.posts li[data-topic="nights"]     { --accent:#3c4663; --accent-soft:rgba(60,70,99,.06); }

.posts li{ border-block-start-width:1px; }
.post-meta::before{ color:var(--accent); }
.post-meta .cat{ color:var(--accent); }
/* A card washes faintly in its own colour when you point at it, so the
   relationship between colour and subject is learned rather than explained. */
.post-link{ transition:background .25s ease; padding-inline:14px; margin-inline:-14px; border-radius:3px; }
.post-link:hover{ background:var(--accent-soft); }

/* The subject chips carry their colour too, so the row is a legend. */
.topic[data-topic-filter="stuck"].is-on      { background:#8f4f30; border-color:#8f4f30; }
.topic[data-topic-filter="goals"].is-on      { background:#3f6b4c; border-color:#3f6b4c; }
.topic[data-topic-filter="choosing"].is-on   { background:#3d5056; border-color:#3d5056; }
.topic[data-topic-filter="coaching"].is-on   { background:#40606b; border-color:#40606b; }
.topic[data-topic-filter="comparison"].is-on { background:#7a4a5a; border-color:#7a4a5a; }
.topic[data-topic-filter="nights"].is-on     { background:#3c4663; border-color:#3c4663; }
.topic[data-topic-filter="all"].is-on        { background:var(--ink); border-color:var(--ink); }

/* ── COLOUR ON THE FRONT PAGE ────────────────────────────────────────────
   The pieces had their colours and the page that lists them did not, so the
   one screen where all six subjects meet was the flattest thing on the site.
   Three changes, all of them the same idea as inside a piece: the colour is
   the subject, never decoration.

     · the rule above each card is that piece's colour, so the grid reads as a
       set of coloured markers from across the room
     · the lead story is washed in its own, and its picture sits on it
     · the subject chips carry a dot of their colour before you press them, so
       the row is a legend at rest rather than only once it is used

   And the top of the page sits on a band of warm stone, which gives the front
   page a head rather than starting it with a headline floating on paper.
   (Isaac 2026-08-15: "also in main blog page".) */
body.t-index{ background:var(--paper); }
body.t-index header.top{
  background:var(--paper-2);
  border-block-end-color:var(--rule);
}
/* The band runs the full width of the window and the title sits in it. */
body.t-index .index-head{
  background:var(--paper-2);
  border-block-end:1px solid var(--rule);
  max-width:none;padding-inline:0;
  margin-block-end:0;
  box-shadow:0 0 0 100vmax var(--paper-2);
  clip-path:inset(0 -100vmax);
}
body.t-index .index-head > .col-main{
  max-width:var(--wide);margin:0 auto;padding-inline:22px;
}
body.t-index .index-head{ padding-block:66px 54px; }

/* Each card is topped by its own colour. Two pixels, the full width of the
   card, and nothing else: enough to group the grid by subject at a glance. */
.posts li{
  border-block-start:2px solid var(--accent);
  padding-block-start:2px;
}
.posts li:first-child,.posts li:nth-child(2){ border-block-start:2px solid var(--accent); }

/* The lead story carries its colour across the whole card rather than only on
   its edge, because it is the one thing on the page that should be looked at
   first and colour is the cheapest way to say so. */
.posts li.is-lead .post-link{
  background:var(--accent-soft);
  padding-inline:22px;margin-inline:-22px;
}
.posts li.is-lead .post-link:hover{
  background:color-mix(in srgb, var(--accent) 11%, transparent);
}

/* The chips say what they are before they are used. */
.topic{ display:inline-flex;align-items:center;gap:8px; }
.topic::before{
  content:"";inline-size:7px;block-size:7px;border-radius:999px;
  background:var(--chip,var(--ink-3));flex:0 0 auto;
}
.topic[data-topic-filter="all"]        { --chip:#6a6460; }
.topic[data-topic-filter="stuck"]      { --chip:#8f4f30; }
.topic[data-topic-filter="goals"]      { --chip:#3f6b4c; }
.topic[data-topic-filter="choosing"]   { --chip:#3d5056; }
.topic[data-topic-filter="coaching"]   { --chip:#40606b; }
.topic[data-topic-filter="comparison"] { --chip:#7a4a5a; }
.topic[data-topic-filter="nights"]     { --chip:#3c4663; }
.topic.is-on::before{ background:#fff; }

/* The rail on the front page is the one place all six colours sit together, so
   it stays quiet and lets the cards carry them. */
body.t-index .rail-about{
  background:var(--paper-2);border-color:var(--rule);
}

/* ── COLOUR INSIDE A PIECE ───────────────────────────────────────────────
   The head of a piece now sits in its own colour: label, headline, standfirst
   and the row of facts, all on a wash of the subject's hue with a line under
   it. So a piece opens in its colour rather than announcing it in one small
   label, and the eye has somewhere to start.
   (Isaac 2026-08-15: "also inside posts".) */
.piece-head{
  background:var(--accent-soft);
  border-block-end:2px solid var(--accent);
  border-radius:4px 4px 0 0;
  padding:38px 34px 30px;
  margin-block-end:40px;
}
.piece-head .byline{
  border-block:1px solid var(--accent-line);
  border-block-end-color:transparent;
  margin-block-end:0;padding-block-end:0;padding-block-start:16px;
}
.piece-head h1{margin-bottom:18px;}
.piece-head .standfirst{margin-bottom:22px;}

/* The rest of the furniture follows the same colour rather than keeping the
   green it inherited from before there was a system. */
ul.plain li::before{background:var(--accent);}
figcaption{border-block-start-color:var(--accent-line);}
.closer{background:var(--accent-soft);}
.more-list li:first-child{border-block-start:2px solid var(--accent);}

@media (max-width:640px){
  .piece-head{padding:26px 20px 22px;margin-inline:-4px;}
}

/* ── THE RAIL, TOLD APART FROM THE WRITING ───────────────────────────────
   The two columns sat on the same paper with nothing between them, so the rail
   read as a stray third column of the article rather than as the furniture
   around it. A hairline down the full height of the page separates them, the
   way a margin column is separated in print, and the rail's own ground is a
   shade off the page so the boundary is felt even where the line runs out.
   (Isaac 2026-08-15: "side bar isnt differentiated from main area".) */
@media (min-width:1081px){
  .page-grid{gap:0 0;}
  .page-grid > .col-main{padding-inline-end:52px;}
  .rail{
    border-inline-start:1px solid var(--rule);
    padding-inline-start:30px;
    padding-block:64px 40px;
    background:linear-gradient(to right, rgba(20,18,14,.022), rgba(20,18,14,0) 60%);
  }
}

/* ── SMOOTH SCROLLING ────────────────────────────────────────────────────
   Pressing a heading in the contents used to jump, which loses your place: you
   arrive somewhere with no sense of how far you travelled. It glides now, and
   stops a little short of the heading so it is not welded to the top edge.
   Anybody whose machine is set to reduce motion still gets the jump, because
   for some people the glide is the problem rather than the fix.
   (Isaac 2026-08-15: "make smooth scrolling".) */
html{
  scroll-behavior:smooth;
  scroll-padding-block-start:28px;
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
}

/* ── THE MASTHEAD STAYS ──────────────────────────────────────────────────
   It scrolled away at the first paragraph, so from then on a reader was on a
   page with no name on it and no way back to the rest of the writing without
   returning to the top first. It holds now, on its own ground so the words
   passing underneath never show through, with a hairline under it.

   Its height is handed to the browser as scroll-padding, so pressing a heading
   in the contents lands the heading below the bar rather than behind it.
   (Isaac 2026-08-15: "top nav bar".) */
header.top{
  position:sticky;inset-block-start:0;z-index:40;
  backdrop-filter:saturate(1.1) blur(6px);
}
header.top .wrap{padding-block:16px 14px;}
html{scroll-padding-block-start:88px;}
@media (max-width:640px){
  header.top .wrap{padding-block:13px 11px;}
  .brand{font-size:22px;}
  html{scroll-padding-block-start:74px;}
}
/* The rail begins below the bar rather than under it. */
@media (min-width:1081px){
  .rail{inset-block-start:92px;}
}

/* ═══════════════════════════════════════════════════════════
   THE REST OF THE FURNITURE
   The things a reader never asks for and notices the absence of.
   (Isaac 2026-08-15: "you know all the perks normal blog have".)
   ═══════════════════════════════════════════════════════════ */

/* ── back to the top ──
   Out of the way at the corner, and only once there is a way back worth
   offering. Sits above the consent notice rather than under it. */
.to-top{
  position:fixed;inset-block-end:26px;inset-inline-end:26px;z-index:39;
  inline-size:44px;block-size:44px;border-radius:999px;
  display:grid;place-items:center;cursor:pointer;
  background:var(--paper);color:var(--accent);
  border:1px solid var(--accent-line);
  box-shadow:0 6px 20px rgba(20,18,14,.10);
  opacity:0;transform:translateY(10px);pointer-events:none;
  transition:opacity .25s ease, transform .25s ease, background .15s ease;
}
.to-top svg{inline-size:19px;block-size:19px;}
.to-top.is-on{opacity:1;transform:none;pointer-events:auto;}
.to-top:hover{background:#fff;}
@media (max-width:640px){
  .to-top{inset-block-end:18px;inset-inline-end:16px;inline-size:40px;block-size:40px;}
}

/* ── the trail at the top of a piece ── */
.crumbs{
  font:600 11px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);margin:0 0 20px;
  display:flex;align-items:center;gap:10px;
}
.crumbs a{color:var(--accent);text-decoration:none;}
.crumbs a:hover{text-decoration:underline;}
.crumbs span[aria-hidden]{opacity:.45;}

/* ── before and after ── */
.prevnext{
  display:grid;grid-template-columns:1fr 1fr;gap:0;
  margin-block-start:56px;
  border-block-start:1px solid var(--ink);
}
.pn-slot{
  display:block;padding:24px 0;text-decoration:none;color:inherit;min-inline-size:0;
}
.pn-slot.is-older{
  text-align:end;border-inline-start:1px solid var(--hair);padding-inline-start:26px;
}
.pn-slot.is-newer{padding-inline-end:26px;}
.pn-label{
  display:block;font:700 10.5px/1 var(--sans);letter-spacing:.18em;
  text-transform:uppercase;color:var(--accent);margin-bottom:9px;
}
.pn-title{
  display:block;font:600 18px/1.3 var(--serif);letter-spacing:-.012em;
  color:var(--ink);transition:color .15s ease;
}
.pn-slot:hover .pn-title{color:var(--accent);}
@media (max-width:640px){
  .prevnext{grid-template-columns:1fr;}
  .pn-slot.is-older{
    text-align:start;border-inline-start:0;padding-inline-start:0;
    border-block-start:1px solid var(--hair);
  }
  .pn-slot.is-newer{padding-inline-end:0;}
}

/* ── a link to any heading ──
   Kept out of sight until the heading is pointed at, so it is there for
   somebody who wants it and invisible to everybody else. */
article h2{position:relative;}
.h-link{
  font:600 20px/1 var(--sans);color:var(--accent);
  background:none;border:0;cursor:pointer;padding:0 0 0 10px;
  opacity:0;transition:opacity .15s ease;
  vertical-align:baseline;
}
article h2:hover .h-link,.h-link:focus-visible{opacity:.5;}
.h-link:hover{opacity:1 !important;}
.h-link.is-done{opacity:1 !important;color:var(--sage);}
@media (hover:none){ .h-link{display:none;} }

/* ── anybody moving by keyboard can see where they are ── */
a:focus-visible,button:focus-visible,input:focus-visible{
  outline:2px solid var(--accent);outline-offset:3px;border-radius:2px;
}

/* ── printed ──
   Somebody printing a piece wants the piece, not the machinery around it. */
@media print{
  header.top,.rail,.progress,.to-top,.prevnext,.mid-next,
  .closer,.closer-alt,.h-link,.crumbs,footer.foot{display:none !important;}
  body{background:#fff;font-size:11.5pt;}
  .page-grid{display:block;max-width:none;}
  .page-grid > .col-main{max-width:none;padding:0;}
  .piece-head{background:none;border:0;padding:0;}
  a{text-decoration:none;color:#000;}
  .sources a::after{content:" (" attr(href) ")";font-size:9pt;word-break:break-all;}
  h2,h3{break-after:avoid;}
  figure,.panel,blockquote{break-inside:avoid;}
}