/* =========================================================================
   /blog, the listing. On the site's own palette and rhythm.

   THE PROBLEM WAS HIERARCHY, NOT QUALITY. The page was a hero and then
   fifteen rectangles of identical weight -- a very attractive filing
   cabinet. It now has a featured article, a named grid, and an ending.

   site.css, home-extra.css and blog.css are not loaded here any more.
   The fifteen ARTICLE pages still load all three, so none of them are
   deleted; this file replaces them for the listing only.
   ========================================================================= */

.bl12{
  --bl-ground:#171413;
  --bl-ground-dark:#0F0D0C;
  --bl-cream:#F6F1EA;
  --bl-accent:#B28479;
  --bl-inset:clamp(44px,8vw,120px);
  --bl-rule:rgba(246,241,234,.10);
  /* one colour per service, the same three the pricing cards use */
  --bl-planning:#A9B8C6;
  --bl-software:#C7B299;
  --bl-automation:#B28479;
  background:var(--bl-ground-dark);
  color:var(--bl-cream);
}
.bl12 *{box-sizing:border-box}
.bl12-wrap{width:100%;padding:0 var(--bl-inset)}

/* ONE GUTTER FOR THE WHOLE SITE BELOW 1024.
   Measured at 390: home, planning, software and automation all start
   their body copy at 20px, pricing at 20, and blog, about, contact and
   privacy at 44 -- so half the site had a gutter twice as wide as the
   other half and switching pages moved every line sideways. 32 then 20
   is the ladder pricing and the masthead's --n12-gutter already use;
   this is the other four joining it. The desktop clamp is unchanged. */
@media(max-width:1024px){ .bl12{--bl-inset:32px} }
@media(max-width:640px){  .bl12{--bl-inset:20px} }

.bl12-eyebrow{
  display:block;
  font-family:'Questrial',sans-serif;
  font-size:12px;font-weight:700;letter-spacing:.17em;text-transform:uppercase;
  color:rgba(246,241,234,.7);margin:0;
}
.bl12 h2{
  font-family:'League Spartan',sans-serif;font-weight:700;
  font-size:clamp(30px,3.2vw,38px);line-height:1.04;letter-spacing:-.035em;
  text-transform:lowercase;color:var(--bl-cream);
  margin:14px 0 20px;
}

/* ------------------------------- the hero -------------------------------
   The lightbulb stays. It is clever without trying too hard and it is
   the only moving thing on the page. */
.bl12-hero{
  position:relative;display:flex;align-items:flex-start;overflow:hidden;
  min-height:470px;
  padding:128px var(--bl-inset) 78px;
  background:var(--bl-ground-dark);
}
.bl12-hero-video{
  position:absolute;inset:0;z-index:0;
  width:100%;height:100%;object-fit:cover;
  /* 78% DOWN THE FRAME, not centred. cover on a 1440x400 hero renders
     the 16:9 video at 1440x810, so 410px of it is outside the box and
     the centred crop cut the bulb off across its middle -- the glass
     was in frame and the base was not. At 78% the whole bulb sits in
     the sand where it is meant to. The hero coming down from 470 to 400
     is what exposed it. */
  object-position:50% 71%;
  filter:saturate(.62) brightness(.6);
}
/* NO POOL. The radial that used to sit under the type read as a dark
   smudge floating on the picture rather than as lighting -- it was
   positioned for a crop the hero no longer uses, and on a phone it
   landed beside the words instead of behind them.

   What is left is the vertical scrim only: dark at the very top so the
   logo and the menu button have something to sit on, clear through the
   middle, and closing into the band below. That is structural, not
   decorative -- without the top stop the masthead loses contrast
   against a bright frame of the video. */
/* AND A CORNER, not a pool. The radial that used to sit under the type
   was centred in the frame, which read as a smudge floating on the
   picture. This one is anchored in the top-left corner where the
   wordmark and the masthead copy are, so it works as the dark the page
   opens out of rather than as a shape sitting on a photograph -- the
   ellipse is 78% x 96% at 0% 0%, so it only ever thins outwards and
   never has a visible far edge inside the hero. */
.bl12-hero::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(ellipse 78% 96% at 0% 0%,
      rgba(15,13,12,.96) 0%, rgba(15,13,12,.74) 28%,
      rgba(15,13,12,.34) 56%, rgba(15,13,12,0) 82%),
    linear-gradient(180deg,
      rgba(15,13,12,.72) 0%, rgba(15,13,12,.22) 28%,
      rgba(15,13,12,0) 56%, rgba(23,20,19,.88) 100%);
}
.bl12-hero-copy{
  position:relative;z-index:2;align-self:flex-start;
  max-width:900px;margin:0 auto;text-align:center;
}
.bl12-hero h1{
  font-family:'League Spartan',sans-serif;font-weight:700;
  font-size:clamp(40px,4.9vw,60px);line-height:.99;letter-spacing:-.04em;
  text-transform:lowercase;color:var(--bl-cream);
  margin:12px 0 0;
}
/* A FORCED BREAK, not a hope. display:block on a zero-height span ends
   the line wherever the measure happens to be, so "a less chaotic
   business." starts its own line at every width instead of only at the
   ones where it happened to wrap there anyway. */
.bl12-break{display:block;height:0}

/* ------------------------------ the bands ------------------------------ */
.bl12-band{padding:118px 0;position:relative}
.bl12-band--lift{background:var(--bl-ground)}
.bl12-band--dark{background:var(--bl-ground-dark)}

/* --------------------------- category + meta ---------------------------
   THREE CATEGORIES, EVERYWHERE. The cards carried five labels --
   "Business Planning", "Business Systems", "AI + Automation",
   "Automation", "Software" -- against three filters. AI is a secondary
   tag now, not a fourth category. */
/* ONE TREATMENT FOR EVERY LABEL.

   .bl12-cat was eyebrow type in the card's accent colour and .bl12-tag
   was a cream pill, so a card with one category showed an eyebrow, a
   card with two showed an eyebrow and a pill, and the index read as
   two different designs interleaved. They are the same thing now: a
   pill, in one colour, whichever class the markup happens to use.

   --bl-cat still exists and still does its real job -- the hover
   border, the focus ring and the "read article" link -- it just stops
   colouring the label. */
.bl12-cats{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.bl12-cat,
.bl12-tag{
  padding:2px 8px;border-radius:999px;
  border:1px solid rgba(246,241,234,.22);
  font-family:'Questrial',sans-serif;
  font-size:10.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:rgba(246,241,234,.72);
}
.bl12-meta{
  font-family:'Questrial',sans-serif;
  font-size:11.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  /* was .42 cream at 13px with the full year in it. Contrast up, noise
     down: AUG 31 rather than August 31, 2026. */
  color:rgba(246,241,234,.62);
}

/* ------------------------------ all articles ------------------------------ */
.bl12-all-head{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:24px;flex-wrap:wrap;margin:0 0 30px;
}
.bl12-all-head h2{margin:14px 0 0}

.bl12-filters{display:flex;gap:8px;flex-wrap:wrap}
.bl12-filters button{
  cursor:pointer;padding:9px 17px;
  background:none;border:1px solid rgba(246,241,234,.16);
  font-family:'Questrial',sans-serif;
  font-size:13px;font-weight:700;letter-spacing:.04em;
  color:rgba(246,241,234,.72);
  transition:color .18s ease,border-color .18s ease,background-color .18s ease;
}
.bl12-filters button:hover{color:var(--bl-cream);border-color:rgba(246,241,234,.34)}
.bl12-filters button[aria-pressed="true"]{
  color:var(--bl-ground-dark);background:var(--bl-cream);border-color:var(--bl-cream);
}
.bl12-filters button:focus-visible{outline:2px solid var(--bl-accent);outline-offset:3px}

.bl12-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(20px,2.4vw,30px);
}
.bl12-card{
  display:flex;flex-direction:column;
  text-decoration:none;color:inherit;
  border:1px solid var(--bl-rule);
  background:rgba(246,241,234,.022);
  transition:border-color .2s ease,background-color .2s ease;
}
.bl12-card[hidden]{display:none}
.bl12-card:hover{
  border-color:color-mix(in srgb, var(--bl-cat,#B28479) 52%, transparent);
  background:rgba(246,241,234,.04);
}
.bl12-card:focus-visible{outline:2px solid var(--bl-cat,#B28479);outline-offset:3px}
/* A FIXED RATIO, so the row does not reflow as the pictures arrive.
   The images are different shapes and nothing was reserving their
   space. */
.bl12-card-img{position:relative;overflow:hidden;aspect-ratio:16/10}
.bl12-card-img img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .4s cubic-bezier(.16,1,.3,1);
}
.bl12-card:hover .bl12-card-img img{transform:scale(1.04)}
.bl12-card-body{
  display:flex;flex-direction:column;flex:1;
  padding:20px 22px 18px;
}
.bl12-card h3{
  font-family:'League Spartan',sans-serif;font-weight:700;
  font-size:21px;line-height:1.08;letter-spacing:-.03em;
  color:var(--bl-cream);
  margin:12px 0 0;
}
.bl12-card-foot{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-top:auto;padding-top:20px;
}
/* CLAY, not the card's own accent. --bl-cat is #A9B8C6 on every
   planning card, so a third of the index had pale blue arrows in it
   while the rest were clay -- the labels were unified to one colour
   and the arrows were left behind. */
.bl12-card-foot svg{
  width:16px;height:16px;flex:0 0 auto;
  stroke:var(--bl-accent);
  transition:transform .2s ease;
}
.bl12-card:hover .bl12-card-foot svg{transform:translateX(4px)}

/* ------------------------- the featured card -------------------------
   The same card, two columns wide, with the picture beside the copy
   instead of above it. It used to be a band of its own above the grid,
   with its own eyebrow and its own layout, which read as a different
   page rather than as the best thing in the library.

   Turning the flow sideways rather than just making it bigger is what
   keeps it the same height as the ordinary card next to it: as a
   single-column card at double width its picture alone would be taller
   than the whole card beside it. */
.bl12-card--wide{
  grid-column:span 2;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  align-items:stretch;
}
.bl12-card--wide .bl12-card-img{aspect-ratio:auto;height:100%}
.bl12-card--wide .bl12-card-body{padding:26px 28px 22px}
.bl12-card--wide h3{font-size:27px;margin-top:14px}
.bl12-excerpt{
  margin:12px 0 0;max-width:44ch;
  font-family:'Questrial',sans-serif;
  font-size:15px;line-height:1.6;color:rgba(246,241,234,.8);
}
/* the one chip that is not a category */
.bl12-flag{
  padding:2px 9px;border-radius:999px;
  background:var(--bl-cat,#B28479);
  font-family:'Questrial',sans-serif;
  font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--bl-ground-dark);
}

.bl12-more{display:flex;justify-content:center;margin:38px 0 0}
.bl12-more button{
  cursor:pointer;padding:14px 26px;
  background:none;border:1px solid rgba(246,241,234,.28);
  font-family:'Questrial',sans-serif;font-size:14px;font-weight:700;
  letter-spacing:.04em;color:var(--bl-cream);
  transition:background-color .2s ease,border-color .2s ease;
}
.bl12-more button:hover{background:rgba(246,241,234,.08);border-color:var(--bl-cream)}
.bl12-more[hidden]{display:none}

.bl12-empty{
  margin:30px 0 0;
  font-family:'Questrial',sans-serif;
  font-size:16px;color:rgba(246,241,234,.72);
}
.bl12-empty[hidden]{display:none}

/* ------------------------------- the close -------------------------------
   The page used to end on the last card and drop into the footer. */
.bl12-close{text-align:center}
.bl12-close .bl12-eyebrow,.bl12-close h2,.bl12-close p{margin-left:auto;margin-right:auto}
.bl12-close h2{max-width:18ch;font-size:clamp(32px,4.2vw,46px);line-height:1.0}
.bl12-close p{
  max-width:58ch;margin:0 auto 30px;
  font-family:'Questrial',sans-serif;
  font-size:16px;line-height:1.6;color:rgba(246,241,234,.8);
}
.bl12-close-actions{
  display:flex;align-items:center;justify-content:center;gap:26px;flex-wrap:wrap;
}
.bl12-close-actions .n12-cta-3{
  color:var(--bl-cream);border-bottom-color:rgba(246,241,234,.32);
}
.bl12-close-actions .n12-cta-3 svg{stroke:var(--bl-cream)}
.bl12-close-actions .n12-cta-3:hover{color:#fff;border-bottom-color:rgba(255,255,255,.6)}
.bl12-close-actions .n12-cta-3:hover svg{stroke:#fff}
.bl12-finder-btn{
  display:inline-flex;align-items:center;gap:10px;cursor:pointer;
  padding:14px 24px;
  background:none;border:1px solid rgba(246,241,234,.34);
  font-family:'Questrial',sans-serif;font-size:14.5px;font-weight:700;
  letter-spacing:.03em;color:var(--bl-cream);
  transition:background-color .2s ease,border-color .2s ease;
}
.bl12-finder-btn svg{width:18px;height:18px;transition:transform .2s ease}
.bl12-finder-btn:hover{background:rgba(246,241,234,.08);border-color:var(--bl-cream)}
.bl12-finder-btn:hover svg{transform:translateX(5px)}

/* ------------------------------- narrower ------------------------------- */
@media(max-width:1080px){
  .bl12-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:700px){
  /* one column, so "two columns wide" and "picture beside the copy" both
     stop meaning anything -- it becomes an ordinary card carrying a
     featured chip and an excerpt */
  .bl12-card--wide{grid-column:auto;grid-template-columns:1fr}
  .bl12-card--wide .bl12-card-img{aspect-ratio:16/10;height:auto}
  .bl12-card--wide .bl12-card-body{padding:20px 22px 18px}
  .bl12-card--wide h3{font-size:21px}
  .bl12-band{padding:76px 0}
  .bl12-hero{min-height:0;padding:128px var(--bl-inset) 64px}
  /* THE BULB IS THE PICTURE, so it has to be big enough to read as one.
     cover on a 390-wide frame fits the 16:9 video by height and crops
     263px off the sides, and the bulb -- right of centre in a wide
     frame -- fell outside the crop entirely. object-position:88% brings
     it in.

     AND transform-origin GOES WITH IT. A plain scale() magnifies about
     the element's CENTRE, which re-centres the crop and undoes the
     object-position -- the first attempt was scaled 1.55 and still
     showed nothing but sand. Anchoring the scale at the same 88% keeps
     the bulb where object-position put it. */
  .bl12-hero-video{
    object-position:88% 50%;
    transform:scale(1.5);
    transform-origin:88% 50%;
  }
  .bl12-grid{grid-template-columns:1fr}
  .bl12-all-head{align-items:stretch}
  /* THE FILTERS WRAP. They used to run off the right edge on a scroll
     strip, which hid "automation" behind a gesture nobody makes on a
     page that is already scrolling vertically. Four chips over two
     rows costs 40px and shows all four. */
  /* FOUR EQUAL COLUMNS, NOT FOUR WRAPPING CHIPS. Measured at 440 the
     four came to 393px against 400 available -- fitting by seven
     pixels, which is not fitting, it is luck, and on a device whose
     text metrics round the other way they wrapped. A grid divides the
     row instead of filling it, so they are on one line at any width. */
  .bl12-filters{
    display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
    overflow:visible;margin:0;padding:0;gap:6px;
  }
  .bl12-filters button{
    padding:9px 4px;font-size:11.5px;letter-spacing:.02em;
    white-space:nowrap;overflow:hidden;
  }
  .bl12-filters button b{margin-left:4px;font-size:10.5px}
  .bl12-close-actions{flex-direction:column;align-items:stretch;gap:18px}
  .bl12-finder-btn{justify-content:center}
  .bl12-close-actions .n12-cta-3{align-self:center}
}

/* =========================================================================
   THE LIBRARY: masthead, search, featured, topics, index, outro.

   Structure is what makes this read as a reference shelf rather than a
   feed -- not a different brand. Same nav, same two typefaces, same dark
   ground, same three accents, same sharp corners.
   ========================================================================= */

/* ------------------------------ the masthead ------------------------------
   LEFT, and shorter. Centred over a full-bleed video is a landing page's
   opening; a library's nameplate is something you read past on the way
   to the index. */
/* TOP-ANCHORED AT A MEASURED NUMBER. This hero used to bottom-align its
   copy inside a 400px box, which put the eyebrow at 151px from the top
   of the document -- but only because the copy happened to be that
   tall. Pricing, about and contact do the same thing with copy of
   different heights and landed at 165, 184 and 112.

   151px of top padding with the copy at flex-start reproduces exactly
   what this hero already looked like, and now the number is the thing
   the other three can copy. All four start their type on the same
   line regardless of how many lines of copy follow it. */
.bl12-hero{min-height:400px;padding:151px var(--bl-inset) 56px}
/* CENTRED. It was a left-hung masthead because a library's nameplate is
   something you read past -- but every other hero on the site centres
   its type, and one page doing it differently reads as a mistake rather
   than as a decision when you move between them. */
.bl12-hero-copy{
  align-self:flex-start;
  max-width:820px;margin:0 auto;
  text-align:center;
}
.bl12-hero h1{
  font-size:var(--n12-h1);
  margin:12px 0 14px;
}
.bl12-hero p{
  margin:0 auto;max-width:56ch;
  font-family:'Questrial',sans-serif;
  font-size:15px;line-height:24px;color:rgba(246,241,234,.68);
}
/* 68px out of the hero into the library, not 118 */
.bl12-hero + .bl12-band{padding-top:68px}
.bl12-library{padding-bottom:88px}

/* -------------------------------- search --------------------------------
   The single loudest signal that this is a reference page rather than a
   feed, which is why it sits above everything else in the band. */
/* NARROWER, AND HELD OFF THE TOPICS ROW. Full-bleed it read as another
   band of the page rather than as one control, and it sat right on the
   heels of the topics it is an alternative to. Inset rather than
   shrunk, though: at 620 it was so much narrower than the index above
   and below it that it read as a different column. 86% keeps it clearly
   inside them without looking unrelated to them. */
.bl12-search{
  position:relative;display:flex;align-items:center;
  width:86%;max-width:none;
  margin:38px auto 46px;
  border:1px solid rgba(246,241,234,.16);
  background:rgba(246,241,234,.03);
  transition:border-color .18s ease,background-color .18s ease;
}
.bl12-search:focus-within{
  border-color:rgba(246,241,234,.4);
  background:rgba(246,241,234,.05);
}
.bl12-search-ico{
  flex:0 0 auto;width:19px;height:19px;
  margin:0 0 0 18px;color:rgba(246,241,234,.5);
}
.bl12-search input{
  flex:1;min-width:0;
  padding:16px 16px 16px 14px;
  border:0;background:none;outline:none;
  font-family:'Questrial',sans-serif;
  /* 16, so iOS does not zoom the page when it takes focus */
  font-size:16px;line-height:1.4;color:var(--bl-cream);
}
/* THE PLACEHOLDER IS SMALLER THAN THE INPUT. The field itself stays at
   16px because anything under that makes iOS zoom the page when it
   takes focus -- but the prompt is a hint, not content, and at 16px it
   ran past the right edge of the box on a phone. Sizing the
   pseudo-element does not affect the zoom trigger, which reads the
   input's own computed font-size. */
.bl12-search input::placeholder{color:rgba(246,241,234,.44);font-size:13.5px}
.bl12-search input::-webkit-search-cancel-button{display:none}
.bl12-search-clear{
  flex:0 0 auto;
  width:44px;height:44px;margin-right:6px;
  display:grid;place-items:center;cursor:pointer;
  background:none;border:0;
  font-size:22px;line-height:1;color:rgba(246,241,234,.6);
}
.bl12-search-clear:hover{color:var(--bl-cream)}
.bl12-search-clear[hidden]{display:none}
.bl12-sr{
  position:absolute;width:1px;height:1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;
}

/* ----------------------------- section heads ----------------------------- */
.bl12-section-head{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:20px;margin:0 0 18px;
}
.bl12-section-head[hidden]{display:none}
/* the featured label takes the clay accent -- the same colour as the
   rule across the top of the card it introduces, so the two read as one
   object rather than as a grey caption above a peach box */
.bl12-section-head--featured .bl12-eyebrow{color:var(--bl-accent)}
/* the topic row needs air off the featured card, which ends 8px above */
.bl12-feature + .bl12-section-head{margin-top:46px}
/* NO RULE. The search field sits directly above this now and a bordered
   box 20px under a hairline is two separators doing one job -- the
   field IS the divider. */
.bl12-section-head--all{
  margin-top:26px;padding-top:0;
  border-top:0;
}
.bl12-showing{
  font-family:'Questrial',sans-serif;
  font-size:12px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:rgba(246,241,234,.5);
}

/* --------------------------- the featured article ---------------------------
   OUT OF THE GRID ENTIRELY. As one cell among nine it lost the attention
   contest to whichever neighbour had the brightest photograph, however
   much wider it was. A 58/42 split, a peach rule across the top, and a
   ground one step lighter than the cards. */
/* 44/56, NOT 58/42. At 58 the picture was doing the same job the hero
   above it already does, and between the two of them a reader travelled
   most of a screen before reaching a single index entry. The copy leads
   now and the card is still unmistakably the biggest thing on the page. */
.bl12-feature{
  display:grid;grid-template-columns:minmax(0,44fr) minmax(0,56fr);
  align-items:stretch;
  margin:0 0 8px;
  border:1px solid var(--bl-rule);
  border-top:2px solid var(--bl-accent);
  background:rgba(246,241,234,.04);
  text-decoration:none;color:inherit;
  transition:background-color .2s ease,border-color .2s ease;
}
.bl12-feature[hidden]{display:none}
.bl12-feature:hover{
  background:rgba(246,241,234,.06);
  border-color:rgba(246,241,234,.18);
  border-top-color:var(--bl-accent);
}
.bl12-feature-img{position:relative;overflow:hidden;min-height:295px}
.bl12-feature-img img{
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .45s cubic-bezier(.16,1,.3,1);
}
.bl12-feature:hover .bl12-feature-img img{transform:scale(1.03)}
.bl12-feature-copy{
  display:flex;flex-direction:column;
  padding:28px clamp(26px,2.6vw,36px) 26px;
}
/* text-transform:none, because .bl12 h2 lowercases every heading on the
   page and this one is a title -- it was rendering "eos vs. next 12."
   Same trap the cards had before their h3 rule was fixed. */
.bl12-feature h2{
  font-size:clamp(28px,2.7vw,33px);line-height:1.02;letter-spacing:-.035em;
  text-transform:none;
  color:var(--bl-cream);margin:15px 0 14px;
}
/* 56ch, not 46. The right column is wide enough now, and the cap was
   still breaking the preview to four lines in a space built for two or
   three. */
.bl12-feature p{
  margin:0 0 22px;max-width:56ch;
  font-family:'Questrial',sans-serif;
  font-size:16px;line-height:1.6;color:rgba(246,241,234,.8);
}
.bl12-feature-foot{
  display:flex;align-items:center;justify-content:space-between;
  gap:18px;flex-wrap:wrap;margin-top:auto;
}
.bl12-read{
  display:inline-flex;align-items:center;gap:9px;
  font-family:'Questrial',sans-serif;font-size:14px;font-weight:700;
  letter-spacing:.03em;color:var(--bl-cat,#B28479);
  border-bottom:1px solid color-mix(in srgb, var(--bl-cat,#B28479) 40%, transparent);
  padding-bottom:3px;
  transition:border-color .2s ease;
}
.bl12-feature:hover .bl12-read{border-bottom-color:var(--bl-cat,#B28479)}
.bl12-read svg{width:16px;height:16px;transition:transform .2s ease}
.bl12-feature:hover .bl12-read svg{transform:translateX(4px)}

/* ------------------------------ topic filters ------------------------------ */
.bl12-filters{margin:0 0 4px}
.bl12-filters button b{
  font-weight:400;
  font-size:11.5px;
  color:rgba(246,241,234,.45);
  margin-left:5px;
}
.bl12-filters button[aria-pressed="true"] b{color:rgba(23,20,19,.55)}

/* -------------------------------- the outro --------------------------------
   One line. The band that was here returned the page to landing-page
   mode at the exact moment a reader had been browsing an index. */
.bl12-outro{
  padding:56px 0;
  background:var(--bl-ground);
  border-top:1px solid var(--bl-rule);
}
/* CENTRED. One sentence sitting hard left under a full-width index read
   as an orphaned line of body copy rather than as the page signing off. */
.bl12-outro p{
  margin:0;text-align:center;
  font-family:'Questrial',sans-serif;
  font-size:15px;line-height:24px;color:rgba(246,241,234,.68);
}
/* the question on its own line, the link under it -- two lines at every
   width instead of one long sentence that breaks wherever it likes */
.bl12-outro-q{display:block;margin:0 0 6px}
.bl12-outro a{
  display:inline-flex;align-items:center;gap:8px;
  color:var(--bl-cream);text-decoration:none;
  border-bottom:1px solid rgba(246,241,234,.3);
  padding-bottom:2px;
  transition:border-color .2s ease;
}
.bl12-outro a:hover{border-bottom-color:var(--bl-cream)}
.bl12-outro a svg{width:15px;height:15px;transition:transform .2s ease}
.bl12-outro a:hover svg{transform:translateX(3px)}

/* ------------------------- the index, text-led -------------------------
   THE PICTURES COME DOWN AND A PREVIEW GOES IN. A 16:9 image on a
   383px column is 215px tall, which with no description under the title
   made the index an image gallery with captions. A fixed 148px and two
   lines of preview inverts it: category, then title, then something
   worth reading, then the date.

   A fixed height rather than an aspect ratio, so the row does not
   change shape with the column width. */
.bl12-card-img{aspect-ratio:auto;height:148px}
.bl12-card-img img{opacity:.88;transition:opacity .3s ease,transform .4s cubic-bezier(.16,1,.3,1)}
.bl12-card:hover .bl12-card-img img{opacity:1}

/* TWO LINES, AND ONLY TWO. line-clamp rather than a character budget,
   because the copy is written to about 110 characters but the column
   width is a clamp -- the same sentence is two lines at 1440 and three
   at 1100, and a third line makes the rows disagree about their height. */
.bl12-excerpt{
  margin:9px 0 0;
  font-family:'Questrial',sans-serif;
  font-size:14px;line-height:1.48;color:rgba(246,241,234,.62);
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;
  overflow:hidden;
}

@media(max-width:1080px){
  .bl12-feature{grid-template-columns:minmax(0,42fr) minmax(0,58fr)}
  .bl12-feature-img{min-height:275px}
  .bl12-card-img{height:132px}
}

@media(max-width:860px){
  /* IMAGE FIRST, then the copy -- and the excerpt and the 27px title
     stay. Dropping it to the same typography as every other card is
     exactly what made it stop reading as featured.

     2:1, not 16:9. Stacked at tablet width the picture is the full
     column, and 16:9 of 700px is 394px of photograph before a word. */
  .bl12-feature{grid-template-columns:1fr}
  .bl12-feature-img{min-height:0;aspect-ratio:2/1;height:auto}
  .bl12-feature-copy{padding:24px 22px 26px}
  .bl12-feature h2{font-size:27px;margin:13px 0 12px}
  .bl12-feature p{font-size:15.5px;margin-bottom:18px}
}

@media(max-width:700px){
  .bl12-hero{min-height:0;padding:128px var(--bl-inset) 44px}
  /* no phone override: --n12-h1 already lands at 33px here */
  /* --- the hero p is already 15 at every width now --- */
  .bl12-hero + .bl12-band{padding-top:48px}
  /* the 620px cap is wider than the phone anyway; this just keeps the
     rhythm tighter than the desktop 38/46 */
  .bl12-search{margin-top:28px;margin-bottom:34px}
  .bl12-section-head--all{margin-top:38px}

  /* THE INDEX BECOMES ROWS, EDGE TO EDGE. Fourteen 16:9 photographs
     stacked is most of a screen each and turns an index into a scroll.
     A 96px thumbnail tells the rows apart, and the heading leads.

     And the rows run the full width of the screen. Inside the 44px
     gutter each one was 302px of card carrying a 96px picture and a
     title -- the list looked like a sidebar. Bleeding the grid out of
     the wrap gives the titles 48px back, which is most of a word per
     line. The gutter still applies to the hero, the search and
     everything else, so the page has not lost its margins; the index
     is simply the one element that reads better without them.

     INSIDE THE GUTTER AGAIN. The index and the featured card were the
     only two blocks on the phone running edge to edge, so the page had
     two left margins: 20px for the hero, the topics and the search, and
     0 for the content between them. Matching everything else costs each
     title about a word per line and buys one alignment down the whole
     screen, which is the trade worth making. */
  .bl12-grid{
    grid-template-columns:1fr;gap:10px;
    margin-left:0;margin-right:0;
  }
  /* EVERY ROW THE SAME HEIGHT, which they were not: the picture was
     height:100% inside a row whose height came from whatever the body
     happened to be, so a two-line title made a 132px thumbnail and a
     one-line title made a 96px one, down the same list. A fixed 128px
     on the row and on the body fixes the picture too, and the two
     clamps below guarantee nothing can push past it. */
  .bl12-card{
    display:grid;
    grid-template-columns:104px minmax(0,1fr);
    align-items:stretch;
    /* 148, up from 128: three lines of preview need the room, and the
       thumbnail grows with the row */
    min-height:148px;
  }
  /* THE PICTURE MUST NOT BE ABLE TO SET THE ROW'S HEIGHT, which is what
     it was doing. height:100% inside a grid row whose height is
     indefinite resolves to auto, and so does the img's own height:100%
     inside it -- so each thumbnail fell back to ITS OWN intrinsic
     ratio. Measured: identical body content, rows of 130px and 169px
     down the same list, purely because one source image is squarer than
     the next.

     Absolutely positioned it contributes nothing to layout, the row's
     height comes from the body alone, and every thumbnail is whatever
     the row turns out to be. */
  .bl12-card-img{position:relative;aspect-ratio:auto;height:auto;min-height:148px}
  .bl12-card-img img{position:absolute;inset:0;width:100%;height:100%}
  .bl12-card-body{
    padding:13px 15px;
    min-height:148px;justify-content:center;
  }
  /* .bl12-card--wide's phone block is (0,2,0) and sits earlier in this
     file, so its 20/22 padding and 21px heading survived the row
     treatment above and four of the fourteen entries came out 50px
     taller than the rest. In one column "wide" means nothing; the
     modifier is neutralised rather than deleted, because the class is
     still doing its job at tablet width and up. */
  .bl12-card--wide .bl12-card-body{padding:13px 15px}
  .bl12-card--wide .bl12-card-img{aspect-ratio:auto;height:100%}
  .bl12-card--wide h3{font-size:16.5px}
  /* CLAMPED, so a long title cannot make its row taller than the rest */
  .bl12-card h3{
    font-size:16.5px;line-height:1.16;margin:6px 0 0;
    display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;
    overflow:hidden;
  }
  /* THE PREVIEW COMES BACK. It was hidden here because the old row was
     96px of thumbnail and a heading, and two lines of description under
     it turned the row back into a card. At 148px there is room for it,
     and desktop having a preview that the phone does not is the kind of
     difference nobody chooses on purpose -- three lines, clamped, which
     is enough to finish a sentence instead of stopping mid-clause. */
  .bl12-card-foot{padding-top:8px}
  .bl12-card-foot svg{display:none}
  .bl12-cats{gap:6px}
  .bl12-cat{font-size:10px;letter-spacing:.13em}
  .bl12-tag{font-size:9.5px;padding:1px 6px}
  .bl12-meta{font-size:10.5px}
  .bl12-excerpt{
    display:-webkit-box;-webkit-line-clamp:3;
    margin:5px 0 0;font-size:12.5px;line-height:1.4;
  }

  /* THE FEATURED CARD SITS IN THE GUTTER TOO, for the same reason the
     index now does -- one left edge down the page. */
  .bl12-feature{margin-left:0;margin-right:0}
  /* SHORTER. A 16:9 picture at full width is 248px of photograph before
     you reach a word of the piece it belongs to; 2.1:1 keeps it a
     banner rather than a screen. */
  .bl12-feature .bl12-feature-img{aspect-ratio:2.1/1;height:auto;overflow:hidden}
  .bl12-feature .bl12-feature-img img{width:100%;height:100%;object-fit:cover;display:block}
  .bl12-feature-copy{padding:18px 16px 20px}
  .bl12-feature h2{font-size:25px;margin:12px 0 10px}
  .bl12-feature p{font-size:15px;margin-bottom:16px}

  .bl12-outro{padding:44px 0}
  .bl12-outro p{font-size:15px}
}