/* =========================================================================
   The article pages, brought onto the site's palette.

   LOADED LAST, OVER blog.css RATHER THAN INSTEAD OF IT. blog.css holds
   every bit of the article's typography -- the cover, the body, the
   pull quotes, the related strip -- and rewriting all of that would be
   a rebuild of fifteen live pages to change three colours. What was
   actually wrong is that they were on a different palette: #332C2A
   ground, #242223 card and #E0D2C5 cream against the site's #171413,
   #0F0D0C and #F6F1EA.

   THE BLOOM STAYS. The article's own hero image, blurred behind the
   page, is the light effect and it is the nicest thing about these
   pages. It is only retuned for the darker ground it now sits on.
   ========================================================================= */

/* ON body, NOT ON .post. The related-posts strip is inserted after the
   article by blog.js, so it is .post's SIBLING -- tokens defined on
   .post did not reach it, every var() in that strip fell back to its
   initial value, and the result was a white 1px border round each
   related card and a transparent "back to all posts" button. Three
   symptoms, one scope mistake. */
body{
  --po-ground:#171413;
  --po-ground-dark:#0F0D0C;
  --po-card:#1C1918;
  --po-cream:#F6F1EA;
  --po-accent:#B28479;
  --po-rule:rgba(246,241,234,.10);
}

/* ------------------------------ the ground ------------------------------
   THE BROWN WAS ON <main>, NOT ON .post. blog.css paints
   `body:has(.post) main` with a linear-gradient from #332C2A to #2C2523,
   and html,body sit on #2C2523 behind it -- so setting .post's own
   background dark changed nothing visible, because .post has no
   background at all and the colour was coming from two levels up.

   Same selector, because :has(.post) makes it (0,1,2) and a plain
   `main` would lose; this file loads after blog.css, so equal weight is
   enough. */
html,body{background:#0F0D0C}

/* ================== THE WASH: blog.css's MECHANISM, THIS PALETTE ==================

   I rebuilt this twice and both attempts were wrong, in opposite
   directions. The first replaced the moving gradient with a static one,
   so the page stopped changing entirely -- measured, a warmth swing of
   ZERO over 28 seconds against the old page's 22 to 24. The second put
   two big radials on top with their own drift, which does swing, and
   also paints two finite rectangles that slide around behind the
   article: a radial-gradient is only painted inside its own background
   box, and with background-repeat:no-repeat and a size that does not
   cover the element the edges of that box are hard. That is the
   "choppy floating squares".

   The original never had that problem because it is ONE linear
   gradient at 260% of the element, sliding diagonally. A linear
   gradient has no box edge to see -- it fills its tile completely --
   and at 260% there is 160% of travel in both axes. The warm band in
   the middle of the ramp sweeps across the page over 32 seconds, which
   is exactly the "it goes orange if you sit on it" she is describing.

   So this is blog.css's rule, byte for byte in structure, with the six
   stops moved onto the new ground: #2A2320 where it had #332C2A,
   #1D1A1B where it had #2C2523, and a warm band at #46301F where it had
   #493128. Nothing else changes.

   main::before and main::after go back to display:none, as the original
   has them -- they are 240px bands under 90px of blur and measured two
   values out of 255, and every visible artefact this section has had
   came from something I added on top of a gradient that was already
   doing the job. */
body:has(.post) main{
  background:linear-gradient(128deg,
    #2A2320  0%,
    #2C2422 22%,
    /* CLAY, not amber. #42302C is the site's #B28479 pulled down to a
       background value -- same hue family as every accent on the site,
       where the old page's #493128 was a straight orange that belonged
       to the brown ground it sat on. Chosen from three renders of this
       exact keyframe.

       #402E1F was the amber version and #46301F the first try at it,
       which measured a 29-point warmth swing against the original's 22
       to 24 -- the right effect, a quarter too strong. */
    #42302C 43%,
    #2B2423 62%,
    #1D1A1B 82%,
    #2A2320 100%);
  background-size:260% 260%;
  background-repeat:no-repeat;
  animation:n12ArticleWarm 32s ease-in-out infinite alternate;
}
body:has(.post) main::before,
body:has(.post) main::after{display:none}
/* blog.css's articleColourField keyframes, unchanged */
@keyframes n12ArticleWarm{
  0%   {background-position:0% 12%}
  50%  {background-position:52% 72%}
  100% {background-position:100% 28%}
}
@media(prefers-reduced-motion:reduce){
  body:has(.post) main{animation:none;background-position:50% 50%}
}
/* ALL FOUR BORDERS. blog.css draws the sides and the top and explicitly
   drops the bottom, so the card ran off the foot of the article looking
   like the rule had been cut short. Either four or none; three is how a
   container looks when the CSS forgot to finish. */
.post-wrap{
  background:var(--po-card);
  border:1px solid var(--po-rule);
  border-bottom:1px solid var(--po-rule);
  /* 1040, up from blog.css's 940. The card was 940 wide holding a 750
     measure on a 1440 screen -- the article occupied just over half the
     window. The related strip below it keeps its own width, so this
     only widens the reading column. */
  max-width:1040px;
}

/* THE TWO GLOWS ARE THE LIGHT EFFECT. A warm one drifting at the top
   left and a cream one on the right, both 130px blurred and animated on
   a 30-second loop -- the alternating wash between grey and orange that
   made these pages look lit rather than printed.

   THEY WENT MISSING WHEN THE GROUND GOT DARKER, and .40 was not enough
   to bring them back: a glow is only visible as the difference between
   itself and what is under it, and the ground had dropped 18 points at
   the same time. .78, with both colours carried up with it -- the warm
   from .20 to .40 and the cream from .11 to .20.

   Measured rather than judged: sampled at the two glow centres against
   the middle of the page, the warm corner now sits about 14 8-bit
   values above the ground and the cream edge about 9. At .40 it was 4
   and 2, which is under the threshold where a gradient reads as
   anything at all. */
/* AND THE TWO WASHES ARE MADE VISIBLE RATHER THAN LEFT RUNNING FOR
   NOTHING. They animate on a 30-second loop, which is real compositor
   work for a layer that measured two values out of 255. Less blur so
   the band keeps some of its own density, and enough alpha to register
   against the gradient -- now they add the slow drift the gradient
   alone cannot. */
body:has(.post) main::before,
body:has(.post) main::after{opacity:1}
body:has(.post) main::before{
  background:rgba(198,104,58,.55);
  filter:blur(90px);
  height:min(420px,30vw);
}
body:has(.post) main::after{
  background:rgba(246,241,234,.22);
  filter:blur(100px);
  height:min(380px,28vw);
}

/* The article's own hero, blurred behind the page. A third light source
   on top of the two glows above, and a subtle one -- .42 rather than
   .62 only because the ground beneath it is darker now. */
.post::before{
  filter:blur(26px) saturate(.5) !important;
  opacity:.42 !important;
}

/* ------------------------------ the type ------------------------------ */
.post-body{color:rgba(246,241,234,.8)}
.post-body h2,
.post-body h3,
.post-wrap h1{color:var(--po-cream)}
.post-body a{color:var(--po-accent)}
.post-body strong,.post-body b{color:var(--po-cream)}
.post-date{color:rgba(246,241,234,.72)}

.post-cover{border-bottom-color:var(--po-rule)}
/* the cover scrim was mixed on #181617; same shape, the site's ground */
.post-cover::before{
  background:
    linear-gradient(90deg, rgba(15,13,12,.94) 0%, rgba(15,13,12,.78) 60%, rgba(15,13,12,.5) 100%),
    linear-gradient(0deg,  rgba(15,13,12,.8) 0%, rgba(15,13,12,.1) 75%) !important;
}

.post-category-nav a{color:rgba(246,241,234,.6)}
.post-category-nav a:hover,
.post-category-nav a[aria-current="page"]{color:var(--po-cream)}

.post-share{
  color:rgba(246,241,234,.72);
  border-color:var(--po-rule);
}
.post-share:hover{color:var(--po-cream)}

/* --------------------------- the related strip ---------------------------
   SMALLER. Three 150px images with 176px of copy under each read as a
   second article library at the foot of every piece, and there was
   about 70px of air between the article and the heading on top of it.
   110px images, tighter copy, 20px under the heading, 38px off the
   article. */
.blog-related{
  background:var(--po-ground);
  padding-top:38px;
}
.blog-related h2{color:var(--po-cream);margin:12px 0 20px;font-size:32px}
.blog-related .blog-eyebrow{color:rgba(246,241,234,.7)}
/* SHORTER CARDS. 115px of picture plus a 176px minimum on the copy is
   a 293px card carrying a label, a three-word title and an arrow --
   most of it was empty. blog.css sets that min-height twice, so it is
   restated here rather than hunted down. 104 + 112 is 216. */
.blog-related-image{height:104px}
.blog-related-copy{padding:15px 17px 16px;min-height:112px}
.blog-related-copy h3{font-size:19px;line-height:1.14}
.blog-related-copy span{font-size:10.5px;letter-spacing:.14em}
.blog-related-card{
  border-color:var(--po-rule);
  background:rgba(246,241,234,.022);
}
.blog-related-card:hover{border-color:rgba(178,132,121,.5)}
.blog-related-copy span{color:var(--po-accent)}
.blog-related-copy h3{color:var(--po-cream)}
.blog-related-copy b{color:var(--po-accent)}
.post-back,.post-back--bottom{color:rgba(246,241,234,.72)}
.post-back:hover{color:var(--po-cream)}

/* ------------------------------ the masthead ------------------------------
   THE REAL COMPONENT, not a copy. hero-v1.css and mobile-n12.css are
   loaded ahead of site.css on these pages, so .n12-head, .n12-nav, the
   toggle and the full-screen phone menu are literally the same elements
   the other eight pages use.

   Ahead of site.css rather than after it on purpose: site.css's reset
   then still wins on *, html, body and a, so nothing about the ARTICLE
   changes. Only the masthead is new, and site.css has no rules for it. */
/* IT FLOATS OVER THE PAGE, like it does on the other eight. Given its
   own 104px band it was a solid black bar with a hard seam against the
   article -- the one place on the site where the masthead is a strip
   rather than something sitting on the page. Absolute, transparent, and
   the article's own top padding is what clears it. */
.post-top{
  position:absolute;top:0;left:0;right:0;
  height:auto;background:transparent;
  z-index:70;
}
/* site.css sets a{color:...} after hero-v1, so the nav's own colours are
   restated here where they can win. */
.post-top .n12-nav a{color:rgba(246,241,234,.72)}
.post-top .n12-nav a:hover,
.post-top .n12-nav a[aria-current="page"]{color:var(--po-cream)}
.post-top .n12-logo{color:var(--po-cream);text-decoration:none}
.post-top .n12-menu a{color:var(--po-cream);text-decoration:none}

/* the article clears the floating masthead */
.post{padding-top:148px}
@media(max-width:640px){
  .post{padding-top:126px}
}

/* ------------------------------- the footer ------------------------------- */
.blog-footer,.site-footer{background:var(--po-ground-dark)}

/* =========================================================================
   ON THIS PAGE — a contents list built from the article's own h2s.
   ========================================================================= */
.post-toc{
  margin:0 0 34px;
  padding:0 0 4px;
  border:1px solid var(--po-rule);
  background:rgba(246,241,234,.022);
}
.post-toc summary{
  display:flex;align-items:center;justify-content:space-between;
  gap:10px;cursor:pointer;list-style:none;
  padding:15px 18px;min-height:48px;
  font-family:'Questrial',sans-serif;
  font-size:12px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  color:rgba(246,241,234,.72);
  transition:color .18s ease;
}
.post-toc summary::-webkit-details-marker{display:none}
.post-toc summary::after{
  content:"+";font-size:17px;line-height:1;color:var(--po-accent);
}
.post-toc[open] summary::after{content:"\2013"}
.post-toc summary:hover{color:var(--po-cream)}
.post-toc summary:focus-visible{outline:2px solid var(--po-accent);outline-offset:-2px}
.post-toc ol{
  margin:0;padding:0 18px 12px;
  list-style:none;counter-reset:toc;
}
.post-toc li{counter-increment:toc;margin:0 0 2px}
.post-toc a{
  display:flex;gap:11px;align-items:baseline;
  padding:9px 0;
  font-family:'Questrial',sans-serif;
  font-size:15px;line-height:1.4;
  color:rgba(246,241,234,.78);text-decoration:none;
  border-bottom:0;
}
.post-toc a::before{
  content:counter(toc,decimal-leading-zero);
  flex:0 0 auto;
  font-size:11px;letter-spacing:.1em;color:var(--po-accent);
}
.post-toc a:hover{color:var(--po-cream)}
/* the heading you jump to should not land under the floating masthead */
.post-body h2{scroll-margin-top:96px}

/* THE SHARE BUTTON'S ARROW, turned up and to the right. It is the site's
   one arrow rather than a character, because U+2197 renders as a colour
   emoji on iOS. */
.n12-arw--ne{transform:rotate(-45deg)}
.post-share{
  display:inline-flex;align-items:center;gap:8px;
  min-height:44px;
}
.post-share svg{width:15px;height:15px}

/* ------------------------- the closing CTA -------------------------
   A SECONDARY CTA, NOT A PRIMARY ONE. It was a solid cream button --
   the same weight the site gives "book a 15-minute call" -- for a link
   that goes back to an index. The last thing on an article should not
   be the loudest control on the page.

   This is .n12-cta-3's construction: no fill, no box, a clay underline
   that brightens on hover, and the arrow before the words because it
   points backwards. !important throughout, because blog.css styles
   .post-back--bottom five separate times further down its file. */
.post-back--bottom{
  /* flex + max-content + auto margins, not inline-flex: the auto
     margins are what centre it under the three cards, and an
     inline-flex box ignores them. */
  display:flex !important;align-items:center;justify-content:flex-start;
  width:max-content !important;margin:44px auto 0 !important;
  gap:9px !important;
  min-height:44px;padding:0 0 2px !important;
  border:0 !important;border-bottom:1px solid rgba(178,132,121,.32) !important;
  border-radius:0 !important;
  background:none !important;
  color:#B28479 !important;
  font-family:'Questrial',sans-serif;
  font-size:16px !important;font-weight:400 !important;letter-spacing:0;
  text-transform:none !important;white-space:nowrap;
  transition:color .16s ease,border-color .16s ease;
}
.post-back--bottom:hover{
  background:none !important;color:#C99084 !important;
  border-bottom-color:#C99084 !important;transform:none;
}
.post-back--bottom svg{width:16px;height:16px;flex:0 0 auto;transition:transform .18s ease}
.post-back--bottom:hover svg{transform:translateX(-4px)}

/* =========================================================================
   THE ARTICLE ON A PHONE.
   ========================================================================= */
@media(max-width:700px){
  /* Type down a step. 38/30 was set for a 940px measure; at 350px the
     h1 ran five lines. */
  .post-wrap h1{font-size:35px !important;line-height:1.06 !important}
  /* h2 AND h3: the articles disagree about which level a section
     heading is, so both get the step down. */
  .post-body h2{font-size:27px !important;margin:34px 0 13px !important}
  .post-body h3{font-size:21px !important;margin:30px 0 11px !important}
  /* body stays at 17 -- that size is right */

  /* THE ANIMATED FIELD COMES OFF. Two 130px-blurred circles the size of
     the screen, each running a 30-second transform loop, on a device
     that has to composite them every frame while you scroll. The glow
     stays; only the animation goes. */
  /* THE ANIMATION COMES OFF, NOT THE GLOW. Two screen-sized circles at
     130px of blur running a 30-second transform loop is real compositor
     work on a phone. The light stays -- it is the page's whole
     character -- it just stops moving. */
  body:has(.post) main::before,
  body:has(.post) main::after{
    animation:none !important;
    opacity:.62 !important;
  }

  /* IT WRAPS. 435px of links in a 358px row meant the last category
     was off the right edge behind a sideways scroll nobody performs on
     a page that is already scrolling down. Two rows, both visible. */
  .post-category-nav{
    flex-wrap:wrap;overflow:visible;
    margin-left:0;margin-right:0;
    padding:0 22px 2px;
    gap:4px 18px;
  }
  .post-category-nav a{flex:0 0 auto;padding:7px 0;font-size:12px;letter-spacing:.11em}

  /* RELATED POSTS AS ROWS, not three more full-bleed cards. Three
     180px-tall images stacked is most of a screen each and turns the
     end of every article into a second index. */
  .blog-related{padding:56px 20px 72px}
  .blog-related h2{font-size:30px;margin:14px 0 22px}
  .blog-related-grid{grid-template-columns:1fr;gap:12px}
  .blog-related-card{
    display:grid !important;
    grid-template-columns:104px minmax(0,1fr);
    align-items:stretch;
    /* NOT a white border. rgba(255,255,255,.12) reads as a grey hairline
       on the old brown and as a visible white edge on this ground. */
    border:1px solid var(--po-rule) !important;
    background:rgba(246,241,234,.022) !important;
  }
  .blog-related-image{height:100% !important;min-height:96px}
  .blog-related-image img{opacity:.9;filter:none}
  /* min-height:0, because blog.css's 176px was still in force and it
     is what made each row 178px tall next to a 104px thumbnail. */
  .blog-related-copy{
    display:flex;flex-direction:column;justify-content:center;
    padding:13px 15px;min-height:0;
  }
  .blog-related-copy span{font-size:10.5px;letter-spacing:.14em}
  .blog-related-copy h3{font-size:17px;line-height:1.14;margin:7px 0 0}
  /* the big decorative arrow in each card has no room in a 104px row */
  .blog-related-copy b{display:none}

  .post-back--bottom{margin:30px auto 0 !important}

  .post-toc{margin-bottom:28px}
  .post-toc a{padding:11px 0}
}

/* =========================================================================
   THE PROSE: measure, headings, author.
   ========================================================================= */

/* 860px AND 16.5px, up from 750 and 16.

   750 was set against a 940px card and left 95px of empty gutter down
   both sides of every paragraph inside a container that was already
   inset from the page -- the article was reading narrow because it
   WAS narrow, twice over. 860 inside a 940 card is a 40px inner margin,
   which is a measure rather than a moat, and 16.5/1.68 keeps the line
   count per paragraph roughly where it was. */
.post-body{max-width:860px;font-size:16.5px;line-height:1.68}
.post-body p{font-size:16.5px;line-height:1.68}
.post-body li{font-size:16.5px;line-height:1.64}
.post-body > .post-toc{max-width:none}

/* THE SECTION HEADINGS ARE h2 NOW, in the markup as well as in the
   styling. Twelve of the fifteen articles set them as h3 directly under
   the h1 -- a skipped level, and rendered barely larger than the body,
   which is why the middle of an article read as one grey slab. */
.post-body h2{
  font-family:'League Spartan',sans-serif;font-weight:700;
  font-size:29px;line-height:1.08;letter-spacing:-.03em;
  color:var(--po-cream);
  margin:52px 0 14px;
  scroll-margin-top:96px;
}
/* the three articles that already used both levels keep a real
   sub-heading, a clear step below the section above it */
.post-body h3{
  font-family:'League Spartan',sans-serif;font-weight:700;
  font-size:21px;line-height:1.12;letter-spacing:-.025em;
  color:var(--po-cream);
  margin:34px 0 11px;
}

/* ------------------------------ the byline ------------------------------ */
.post-meta-row{flex-wrap:wrap;gap:0 14px}
.post-by{
  font-family:'Questrial',sans-serif;
  font-size:13px;letter-spacing:.06em;
  color:rgba(246,241,234,.72);
}
.post-by a{
  color:var(--po-cream);text-decoration:none;
  border-bottom:1px solid rgba(246,241,234,.34);
}
.post-by a:hover{border-bottom-color:var(--po-cream)}
/* the printed date sits after the byline as the second item of the
   same line, separated by a middot rather than by a gap */
.post-by + .post-date::before{
  content:"\00B7";
  margin-right:13px;
  color:rgba(246,241,234,.4);
}

/* --------------------------- the comparison table ---------------------------
   No borders round every cell. One rule under the head, hairlines
   between rows, and the first column carrying the label. */
.post-table{margin:30px 0 34px;overflow-x:auto}
/* a <p>, not a <caption>: a caption has to be a child of the table, and
   one sitting in the wrapper div beside it is invalid and gets
   reparented or dropped depending on the browser */
.post-table-title{
  margin:0 0 12px !important;
  font-family:'Questrial',sans-serif;
  font-size:11.5px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  color:rgba(246,241,234,.7);
}
.post-table table{
  width:100%;border-collapse:collapse;
  font-family:'Questrial',sans-serif;
}
.post-table caption{
  caption-side:bottom;margin-top:12px;text-align:left;
  font-size:12.5px;color:rgba(246,241,234,.55);
}
.post-table th,
.post-table td{
  padding:13px 16px 13px 0;
  text-align:left;vertical-align:top;
  border-bottom:1px solid var(--po-rule);
}
.post-table thead th{
  padding-bottom:11px;
  border-bottom:1px solid rgba(246,241,234,.26);
  font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(246,241,234,.7);
}
.post-table tbody th{
  width:23%;font-weight:400;
  font-size:14.5px;line-height:1.45;color:var(--po-cream);
}
.post-table td{
  font-size:15px;line-height:1.5;color:rgba(246,241,234,.78);
}
/* the Next 12 column is the one the reader is here to look at */
.post-table td:last-child{color:var(--po-cream)}
.post-table tr:last-child th,
.post-table tr:last-child td{border-bottom:0}

@media(max-width:700px){
  .post-body h2{font-size:25px !important;margin:40px 0 12px !important}
  .post-body h3{font-size:19px !important;margin:28px 0 10px !important}
  .post-body{max-width:none}
  .post-table{margin:24px -22px 28px;padding:0 22px}
  .post-table th,.post-table td{padding:11px 14px 11px 0}
  .post-table tbody th{width:38%;font-size:13.5px}
  .post-table td{font-size:14px}
  .post-meta-row{gap:4px 12px}
}