/*
 * be.Bold — Traditional Leather vs. Vegan Leather (Sustainability Journal)
 * =======================================================================
 * Extracted with tools/extract-page-css.py. Only 12 rules were dead here, against 168–291 on the
 * other pages: this design file carries just two <style> blocks rather than the four or five the
 * others accumulated, so almost nothing needed discarding.
 *
 * Nothing was promoted to shell.css. Everything below is this page's own — the journal masthead
 * (.jhero*), the article prose (.prose*), the breadcrumb (.crumb*), the material cards (.cmp-mat*)
 * and the whole comparison table (.cmp-*). `.closing` in particular must stay: What Sets Us Apart
 * declares the same selector as a solid green band, and this page uses it as a cream one.
 */

/*
 * ⚑ These three custom properties are page-scoped and MUST stay.
 *
 * The design's page block declares them in its own :root, and .cmp-panel builds its border from
 * `1.5px solid var(--pc)`, where --pc resolves to one of them per material. Dropping the :root as
 * "already in shell.css" — true of the shared tokens, not of these — made var(--pc) invalid, which
 * invalidates the whole border shorthand at computed-value time. Every one of the eighteen panels
 * silently lost its 1px top and bottom border and came out 2px short.
 */
:root{
  --m-animal:#7A5C34;   /* warm leather brown  — Traditional (Animal) */
  --m-plastic:#6E7377;  /* cool synthetic grey — PVC / PU (Plastic)   */
  --m-plant:var(--green); /* brand green       — Plant-based          */
}

.btn{display:inline-flex;align-items:center;gap:26px;background:var(--green);color:var(--cream);padding:15px 22px;font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;border:1px solid var(--green);border-radius:6px;transition:background .35s,color .35s}
.btn:hover{background:transparent;color:var(--green)}
.jhero{padding:calc(var(--hdr-h) + clamp(14px,1.8vw,22px)) var(--pad) clamp(16px,2vw,26px);background:var(--cream)}
.jhero .wrap{max-width:1240px;display:grid;grid-template-columns:1.06fr .94fr;gap:clamp(30px,4.8vw,76px);align-items:center}
.jhero-copy{min-width:0}
.jhero-media{margin:0;border-radius:12px;overflow:hidden;aspect-ratio:3/2;background:var(--cream-alt);box-shadow:0 26px 60px rgba(0,40,22,.16)}
.jhero-media img{width:100%;height:100%;object-fit:cover;display:block}
@media(max-width:860px){
  .jhero .wrap{grid-template-columns:1fr;gap:clamp(24px,6vw,34px)}
  .jhero-media{aspect-ratio:16/10}
}
.crumb{display:flex;flex-wrap:wrap;align-items:center;gap:9px;margin:0 0 clamp(20px,2.6vw,32px);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.crumb a{color:var(--muted);transition:color .25s}
.crumb a:hover{color:var(--green)}
.crumb .sep{opacity:.45}
.crumb .here{color:var(--green)}
.jhero .eyebrow{color:var(--gold)}
.jhero h1{font-family:'Poppins',system-ui,-apple-system,'Segoe UI',sans-serif;font-weight:500;color:var(--green);font-size:clamp(1.66rem,4.07vw,2.9rem);line-height:1.08;letter-spacing:-.012em;margin:16px 0 0}
.jhero .rule{margin:clamp(22px,2.6vw,30px) 0 0}
.jhero .dek{font-family:'Poppins',system-ui,-apple-system,'Segoe UI',sans-serif;font-style:italic;font-weight:400;color:var(--muted);font-size:clamp(.95rem,1.66vw,1.33rem);line-height:1.5;margin:clamp(20px,2.6vw,30px) 0 0;max-width:34ch}
.jmeta{display:flex;flex-wrap:wrap;gap:12px;margin:clamp(24px,3vw,34px) 0 0}
.jmeta span{font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--green);border:1px solid var(--hair);border-radius:999px;padding:7px 15px}
.article{padding:clamp(18px,2.2vw,28px) var(--pad)}
.prose{max-width:1040px;margin:0 auto}
.prose p{font-size:clamp(.95rem,1.2vw,1.09rem);line-height:1.9;color:var(--ink);margin:0}
.prose p+p{margin-top:22px}
.prose .lede{font-size:clamp(1.05rem,1.43vw,1.26rem);line-height:1.7;color:var(--ink);font-family:'Poppins',system-ui,-apple-system,'Segoe UI',sans-serif;font-weight:400}
.prose .quiet{color:var(--ink)}
.cmp-lead{padding-top:clamp(12px,1.6vw,20px)}
.cmp-lead .inner{max-width:1040px;margin:0 auto;text-align:center}
.cmp-lead .eyebrow{color:var(--gold)}
.cmp-lead h2{margin-top:14px}
.cmp-lead .rule{margin:clamp(18px,2vw,24px) auto 0}
.cmp-lead p{font-size:clamp(.94rem,1.15vw,1.05rem);line-height:1.9;color:var(--muted);margin:clamp(22px,2.6vw,30px) auto 0}
.cmp-materials{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.4vw,20px);margin:clamp(30px,3.6vw,48px) auto 0;max-width:1240px}
.cmp-mat{margin:0}
.cmp-mat--animal{--pc:var(--m-animal)}
.cmp-mat--plastic{--pc:var(--m-plastic)}
.cmp-mat--plant{--pc:var(--m-plant)}
.cmp-mat-img{display:block;overflow:hidden;border-radius:9px;aspect-ratio:4/3;background:var(--cream-alt);border-top:3px solid var(--pc)}
.cmp-mat-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.1s cubic-bezier(.2,.7,.3,1)}
.cmp-mat:hover .cmp-mat-img img{transform:scale(1.05)}
.cmp-mat figcaption{text-align:center;margin-top:clamp(11px,1.3vw,15px)}
.cmp-mat-name{display:block;font-family:'Poppins',system-ui,-apple-system,'Segoe UI',sans-serif;font-weight:500;color:var(--pc);font-size:clamp(.85rem,1.12vw,1.01rem);line-height:1.15}
.cmp-mat-type{display:block;font-size:.58rem;letter-spacing:.15em;text-transform:uppercase;color:var(--muted);margin-top:4px}
@media(max-width:600px){
  .cmp-materials{grid-template-columns:1fr;max-width:340px;gap:22px}
}
.compare{padding:0 var(--pad) clamp(16px,2vw,26px)}
.cmp{max-width:1240px;margin:0 auto}
.cmp-group{text-align:left;margin:clamp(18px,2.4vw,30px) 0 clamp(12px,1.6vw,20px)}
.cmp-group .eyebrow{color:var(--gold);font-size:clamp(.72rem,.92vw,.84rem);letter-spacing:.26em}
.cmp-group .rule{margin:15px 0 0}
.cmp-cat+.cmp-cat{margin-top:clamp(12px,1.6vw,20px)}
.cmp-cat-head{font-family:'Poppins',system-ui,-apple-system,'Segoe UI',sans-serif;font-weight:500;color:var(--green);text-align:left;font-size:clamp(1.08rem,1.74vw,1.49rem);line-height:1.2;margin:0 0 clamp(10px,1.2vw,14px)}
.cmp-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.4vw,20px);align-items:stretch}
.cmp-panel{background:var(--tint,var(--sand-hi));border:1.5px solid var(--pc);border-radius:9px;padding:clamp(18px,2vw,26px) clamp(16px,1.8vw,24px)}
/*
 * ⚑ THE TINT IS PER COLUMN, NOT PER ROW — client review, 15 Sep 2026: "the traditional leather
 * column should be #D5CFC1, the pvc pu column #CBC1B9 and the plant based column a lighter green,
 * so the table reads clearly on mobile."
 *
 * The design tinted the six CATEGORY rows, alternating #D5CFC1 and #CBC1B9 down the table, and set
 * it on each `.cmp-cat--*` for `.cmp-panel`'s background to inherit. That works on desktop, where
 * the three material columns are side by side under their chips and the banding guides the eye
 * ACROSS a row.
 *
 * On mobile it is the wrong axis. `.cmp-cols` collapses to one column at 860px, so the three
 * materials STACK — and only the first category prints the chips, every later one inheriting the
 * column order from it. Eighteen panels then arrive as six pairs of identical colours with no
 * label, and by the third category there is nothing on screen saying which material is being read.
 * The two colours were marking the one distinction the reader could already see (which category
 * they were in, from the heading directly above) and not the one they had lost.
 *
 * Moving the same two values onto the material classes fixes the axis with no new machinery: the
 * declarations sit beside the `--pc` border colours they belong with, and a custom property set on
 * the element itself beats the one it would otherwise inherit from `.cmp-cat--*` — which is why
 * the six row rules had to GO rather than be overridden. Leaving even one would have kept that
 * category banded across all three materials.
 *
 * The property was `--row`; it is `--tint` now. A name for the axis it no longer runs along is the
 * kind of small lie that outlives whoever wrote it. `.cmp-cat--source` and its five siblings stay
 * in the markup as category hooks, but nothing styles them any more.
 *
 * The third value is new: the design never needed a third tint because it only ever had two rows
 * to alternate. #C3D2BC is --green at the same lightness as the two supplied colours (relative
 * luminance .61, against .63 and .54), so the three columns read as one set rather than two
 * neutrals and a swatch from somewhere else. --ink on it measures 9.8:1 and --green 6.9:1, both
 * past AA. ⚠ PENDING SIGN-OFF — the client asked for "a lighter green" without naming one.
 */
.cmp-panel--animal{--pc:var(--m-animal);--tint:#D5CFC1}
.cmp-panel--plastic{--pc:var(--m-plastic);--tint:#CBC1B9}
.cmp-panel--plant{--pc:var(--m-plant);--tint:#C3D2BC}
.cmp-chip{margin:0 0 clamp(13px,1.5vw,17px);text-align:center}
.cmp-chip-name{display:block;font-family:'Poppins',system-ui,-apple-system,'Segoe UI',sans-serif;font-weight:500;color:var(--pc);font-size:clamp(.85rem,1.08vw,.98rem);line-height:1.15}
.cmp-chip-type{display:block;font-size:.58rem;letter-spacing:.15em;text-transform:uppercase;color:var(--muted);margin-top:5px}
.cmp-body{font-size:clamp(.85rem,1vw,.94rem);line-height:1.75;color:var(--ink)}
.cmp-body>*:first-child{margin-top:0}
.cmp-body strong{color:var(--pc);font-weight:600}
.cmp-body ol,.cmp-body ul{margin:0;padding-left:20px}
.cmp-body li+li{margin-top:9px}
.cmp-body .cmp-sub{margin-top:9px;padding-left:18px;list-style:disc}
.cmp-body .cmp-sub li{color:var(--muted)}
.cmp-src p{margin:0}
.cmp-src p+p{margin-top:6px}
.cmp-src .faint{color:var(--muted)}
.cmp-single{margin:0}
@media(max-width:860px){
  .cmp-cols{grid-template-columns:1fr}
}
.shopband{background:var(--cream);padding:clamp(10px,1.4vw,18px) var(--pad) clamp(18px,2.4vw,32px)}
.closing{background:var(--cream);color:var(--ink);text-align:center;padding:clamp(20px,2.6vw,32px) var(--pad)}
.closing .wrap{max-width:1240px}
.closing .dsp{color:var(--green);font-size:clamp(.91rem,1.45vw,1.29rem);line-height:1.55;max-width:840px;margin-left:auto;margin-right:auto}
.closing .rule{margin:clamp(24px,3vw,32px) auto 0}
.closing p{max-width:none;text-wrap:pretty;margin:clamp(24px,2.8vw,32px) auto 0;color:var(--muted);font-size:clamp(.94rem,1.2vw,1.09rem);line-height:1.95}
.closing .cta-btns{display:flex;flex-wrap:wrap;gap:16px;justify-content:center;margin-top:clamp(30px,3.6vw,44px)}

/* ---- the client's own articles, the listing, and every posts archive ---- 17 Sep 2026 ----
 *
 * ⚑ THIS FILE IS SHARED NOW, WHICH IS WHY IT WAS RENAMED. Everything above it was written for one
 * hand-built article; the masthead, the crumb, the meta pills and `.prose` above are exactly what a
 * client-written article needs, so the new templates reuse them rather than restating them. A
 * second stylesheet with its own copy of `.jhero` is how two mastheads end up drifting apart.
 *
 * inc/assets.php maps the article template, the listing template and any single post onto this one
 * slug. The legacy template keeps its CSS through that map rather than through its page slug, so
 * renaming the page cannot take its styling away.
 */

/*
 * An article with no featured image. The masthead is a two-column grid, and a missing image left
 * the copy in a 1.06fr column with dead space beside it — nothing is required on a post, and the
 * first thing a client publishes is a title and a paragraph.
 */
.jhero--nomedia .wrap{grid-template-columns:1fr;max-width:1040px}

/*
 * Editor images inside an article. `img{max-width:100%}` in shell.css already stops one breaking
 * the column; this is the design's treatment on top — rounded, full measure, breathing room — so
 * an image the client drops in mid-article looks placed rather than pasted.
 */
.article .page-body img{border-radius:9px;height:auto;margin:clamp(24px,3vw,38px) 0}
.article .page-body figure{margin:clamp(24px,3vw,38px) 0}
.article .page-body figure img{margin:0}
.article .page-body figcaption{
  margin-top:11px;font-size:.78rem;line-height:1.7;color:var(--muted);text-align:center;
}
/* A pull quote is a blockquote in the editor — the one piece of long-form furniture the policy
 * pages never needed, and the one an article always does. */
.article .page-body blockquote{
  margin:clamp(28px,3.4vw,44px) 0;padding:0 0 0 clamp(18px,2.2vw,28px);
  border-left:2px solid var(--gold);
}
.article .page-body blockquote p{
  font-family:'Poppins',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-style:italic;font-size:clamp(1.02rem,1.4vw,1.22rem);line-height:1.6;color:var(--green);
}

/* ---- previous / next ---- */
.jnav{padding:clamp(30px,4vw,52px) var(--pad) 0}
.jnav .wrap{
  max-width:1040px;display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,2vw,26px);
  border-top:1px solid var(--hair);padding-top:clamp(22px,2.6vw,32px);
}
.jnav-item{display:block;padding:clamp(14px,1.8vw,20px);border:1px solid var(--hair);border-radius:8px;
  background:var(--sand-hi);transition:border-color .3s}
.jnav-item:hover{border-color:var(--green)}
.jnav-next{text-align:right}
.jnav-label{display:block;font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.jnav-title{display:block;margin-top:8px;font-size:.95rem;line-height:1.5;color:var(--green)}
/* One of the two is often absent — the newest and the oldest article each have only one neighbour.
 * Pinning Next to the right keeps the pair anchored to the measure instead of a lone card
 * stretching across it. */
.jnav-item:only-child{max-width:calc(50% - clamp(7px,1vw,13px))}
.jnav-item.jnav-next:only-child{margin-left:auto}
@media(max-width:600px){
  .jnav .wrap{grid-template-columns:1fr}
  .jnav-next{text-align:left}
  .jnav-item:only-child,.jnav-item.jnav-next:only-child{max-width:none;margin-left:0}
}

/* ---- the listing, and every posts archive ---- */
.jindex{padding:calc(var(--hdr-h) + clamp(40px,5vw,70px)) var(--pad) clamp(40px,5vw,72px)}
.jindex .wrap{max-width:1240px}
.jindex-head{margin:0 0 clamp(32px,4vw,54px)}
.jindex-head .eyebrow{color:var(--gold)}
.jindex-head h1{margin:14px 0 0}
.jindex-head .rule{margin:clamp(18px,2vw,24px) 0 0}
.jindex-intro{max-width:64ch;margin:clamp(20px,2.4vw,28px) 0 0}
.jindex-empty{font-size:.95rem;line-height:1.9;color:var(--muted);margin:0}

/*
 * auto-fill, not auto-fit: with one article a row of auto-fit tracks collapses and the single card
 * stretches the full 1240px, which reads as a banner rather than as the first of a series. The
 * client WILL activate this with one or two articles on the page.
 */
.jgrid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:clamp(20px,2.6vw,36px);
}
.jcard{margin:0}
.jcard-link{display:flex;flex-direction:column;height:100%;
  background:var(--sand-hi);border:1px solid var(--hair);border-radius:9px;overflow:hidden;
  transition:border-color .3s,box-shadow .3s,transform .3s}
.jcard-link:hover{border-color:var(--green);box-shadow:0 22px 50px rgba(0,40,22,.12);transform:translateY(-2px)}
.jcard-media{aspect-ratio:3/2;background:var(--cream-alt);overflow:hidden}
.jcard-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.1s cubic-bezier(.2,.7,.3,1)}
.jcard-link:hover .jcard-media img{transform:scale(1.05)}
.jcard-body{padding:clamp(18px,2.2vw,26px);display:flex;flex-direction:column;flex:1}
.jcard-body .eyebrow{color:var(--gold)}
.jcard-title{
  font-family:'Poppins',system-ui,-apple-system,'Segoe UI',sans-serif;font-weight:500;
  color:var(--green);font-size:clamp(1.02rem,1.4vw,1.22rem);line-height:1.3;margin:12px 0 0;
}
.jcard-dek{font-size:.88rem;line-height:1.8;color:var(--muted);margin:12px 0 0}
/* Pushed to the bottom so the date sits on one line across a row of cards whose titles wrap to
 * different heights. */
.jcard-meta{
  margin:clamp(14px,1.8vw,20px) 0 0;padding-top:clamp(12px,1.4vw,16px);border-top:1px solid var(--hair);
  font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
  display:flex;align-items:center;gap:8px;margin-top:auto;
}
.jcard-meta .sep{opacity:.5}

/* ---- pagination, shared by the listing and the archives ---- */
.jindex .navigation,
.jindex .page-numbers{margin-top:clamp(32px,4vw,52px)}
.jindex .nav-links,
.jindex>.wrap>.page-numbers{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:center}
.jindex .page-numbers{
  display:inline-flex;align-items:center;justify-content:center;min-width:38px;min-height:38px;
  padding:0 12px;border:1px solid var(--hair);border-radius:6px;
  font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
  transition:border-color .3s,color .3s;
}
.jindex a.page-numbers:hover{border-color:var(--green);color:var(--green)}
.jindex .page-numbers.current{border-color:var(--green);color:var(--green);background:var(--sand-hi)}
.jindex .page-numbers.dots{border-color:transparent}

/* ---- the photo-led article layout ---- 17 Sep 2026 ----
 *
 * The second of the two layouts a client can choose in the editor (Post → Template). Only the
 * masthead differs; everything below it is the same part, so there is nothing here about the body.
 */

/*
 * ⚑ THE GRID IS CANCELLED, NOT RESTATED. `.jhero .wrap` above is a two-column grid with the
 * copy in the first track and the picture in the second — which is the whole of the side layout.
 * Here the plate and the copy are stacked, so the wrap goes back to block flow and each child gets
 * its own measure.
 */
.jhero--photo .wrap{display:block;max-width:1240px}
.jhero--photo .crumb{margin-bottom:clamp(16px,2vw,24px)}
.jhero-plate{
  margin:0 0 clamp(26px,3.2vw,44px);border-radius:12px;overflow:hidden;
  aspect-ratio:21/9;background:var(--cream-alt);box-shadow:0 26px 60px rgba(0,40,22,.16);
}
.jhero-plate img{width:100%;height:100%;object-fit:cover;display:block}

/*
 * Centred beneath the plate, which is what makes the two layouts read as an editorial decision
 * rather than a rearrangement. `.dek` has `max-width:34ch` from the side layout, where it sits in
 * a narrow column; centred under a 1240px plate it needs the auto margins or it hugs the left.
 */
.jhero--photo .jhero-copy{max-width:980px;margin:0 auto;text-align:center}
.jhero--photo .jhero-copy .rule{margin-left:auto;margin-right:auto}
.jhero--photo .dek{max-width:56ch;margin-left:auto;margin-right:auto}
.jhero--photo .jmeta{justify-content:center}

/*
 * 21:9 is a letterbox on a phone — at 375px it is 160px tall, which is a strip rather than a
 * photograph. The plate is the point of this layout, so it squares up as the viewport narrows.
 */
@media(max-width:700px){
  .jhero-plate{aspect-ratio:3/2}
}