/* ===========================================================================
   Booked Wild — Journal
   Shared styles for /journal/ and article pages.

   Every colour, font, radius and type ramp below is lifted from the homepage
   bundle so the Journal reads as part of the same site. The homepage itself is
   a generated single-file bundle whose styles live inline; this sheet exists
   because the Journal pages are ordinary static HTML and cannot reach them.
   Keep the two in sync if the homepage design changes.
   =========================================================================== */

@font-face {
  font-family: 'Chivo';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("/assets/fonts/chivo-vietnamese.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Chivo';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("/assets/fonts/chivo-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Chivo';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("/assets/fonts/chivo-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Chivo';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("/assets/fonts/chivo-vietnamese.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Chivo';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("/assets/fonts/chivo-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Chivo';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("/assets/fonts/chivo-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Karla';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("/assets/fonts/karla-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Karla';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("/assets/fonts/karla-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Karla';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/karla-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Karla';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/karla-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Karla';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/karla-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Karla';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/karla-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Karla';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/karla-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Karla';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/karla-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/schibsted-grotesk-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/schibsted-grotesk-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/schibsted-grotesk-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/schibsted-grotesk-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/schibsted-grotesk-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/schibsted-grotesk-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/schibsted-grotesk-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/schibsted-grotesk-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("/assets/fonts/schibsted-grotesk-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("/assets/fonts/schibsted-grotesk-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("/assets/fonts/schibsted-grotesk-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("/assets/fonts/schibsted-grotesk-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root{
  /* colours — taken from the homepage */
  --bw-ink:#0C2A1C;          /* deep green: dark sections, headings on light  */
  --bw-ink-2:#0A1F14;        /* darkest: code blocks                          */
  --bw-card:#123626;         /* card green: Our Work cards                    */
  --bw-body:#22452F;         /* body text on light                            */
  --bw-muted:#5A7264;        /* secondary text on light                       */
  --bw-cream:#F2F6EE;        /* page background                               */
  --bw-tint:#E9EFE4;         /* light green tint: browser chrome, callouts    */
  --bw-line:#D3E0CE;         /* borders on light                              */
  --bw-line-2:#C3D3BF;       /* dividers                                      */
  --bw-accent:#3E8E4F;       /* buttons, links                                */
  --bw-accent-soft:#9FDCA9;  /* accents on dark                               */
  --bw-accent-mid:#7FC98B;
  --bw-field:#1E6B3C;
  --bw-white:#FFFFFF;

  --bw-r-pill:999px;
  --bw-r-card:24px;
  --bw-r-md:18px;
  --bw-r-sm:12px;

  --bw-pad-x:40px;           /* section gutter, matches the homepage          */
  --bw-max:1560px;           /* homepage container                            */
  --bw-read:760px;           /* article measure                               */
  --bw-side:300px;           /* article sidebar                               */
  --bw-colgap:64px;          /* gap between article column and sidebar        */
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bw-cream); color:var(--bw-ink);
  font-family:'Schibsted Grotesk',Helvetica,sans-serif;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{max-width:100%;height:auto}
a{color:var(--bw-field);text-decoration:none}
a:hover{color:var(--bw-ink)}
.bw-wrap{max-width:var(--bw-max);margin:0 auto;padding-left:var(--bw-pad-x);padding-right:var(--bw-pad-x)}
.bw-skip{position:fixed;left:12px;top:-80px;background:var(--bw-white);color:var(--bw-ink);
  padding:12px 18px;border-radius:var(--bw-r-sm);z-index:200;font-family:'Karla',sans-serif;font-weight:600;
  transition:top .2s ease}
.bw-skip:focus{top:12px}

/* ---- header: same structure, sizing and scroll behaviour as the homepage -- */
.bw-header{position:fixed;top:0;left:0;right:0;z-index:80;display:flex;align-items:center;
  justify-content:space-between;gap:24px;padding:22px var(--bw-pad-x);background:transparent;
  border-bottom:1px solid transparent;transition:background .3s ease,border-color .3s ease,box-shadow .3s ease}
.bw-header.is-stuck{background:rgba(242,246,238,.94);backdrop-filter:saturate(140%) blur(10px);
  border-bottom-color:var(--bw-line);box-shadow:0 8px 28px rgba(12,42,28,.07)}
.bw-logo{font-family:'Chivo',sans-serif;font-weight:900;font-size:25px;letter-spacing:-.03em;
  line-height:1;color:var(--bw-white);display:block;transition:color .3s ease}
.bw-logo span{color:var(--bw-accent-soft)}
.bw-header.is-stuck .bw-logo{color:var(--bw-ink)}
.bw-header.is-stuck .bw-logo span{color:#2E7D42}
.bw-nav{display:flex;align-items:center;gap:34px}
/* nowrap, for the same reason as .nav a in services.css: six items shrink below
   their content width just above the burger breakpoint and break mid-label. */
.bw-nav a{font-family:'Karla',sans-serif;font-size:15px;font-weight:500;letter-spacing:.01em;
  color:var(--bw-white);white-space:nowrap}
.bw-header.is-stuck .bw-nav a{color:#22452F}
.bw-nav a[aria-current="page"]{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1.5px}
.bw-cta{font-family:'Karla',sans-serif;padding:12px 24px;border-radius:var(--bw-r-pill);
  background:var(--bw-accent);color:var(--bw-white);font-weight:600;font-size:15px;white-space:nowrap}
.bw-cta:hover{background:var(--bw-ink);color:var(--bw-white)}

/* ---- "Who we serve" submenu ---------------------------------------------
   The same disclosure the rest of the site uses, on the Journal's tokens.
   Hover and :focus-within open it in CSS alone; services.js (which these pages
   already load) only mirrors the state onto aria-expanded and adds Escape. */
.bw-nav__grp{position:relative;display:flex;align-items:center;gap:5px}
.bw-nav__tog{display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:22px;padding:0;border:0;border-radius:50%;background:none;
  color:var(--bw-white);cursor:pointer;transition:color .3s ease,background .2s ease}
.bw-header.is-stuck .bw-nav__tog{color:#22452F}
.bw-nav__tog:hover{background:rgba(255,255,255,.18)}
.bw-header.is-stuck .bw-nav__tog:hover{background:var(--bw-tint)}
.bw-nav__tog svg{display:block;width:11px;height:7px;transition:transform .2s ease}
.bw-nav__grp:hover .bw-nav__tog svg,
.bw-nav__grp:focus-within .bw-nav__tog svg,
.bw-nav__grp.is-open .bw-nav__tog svg{transform:rotate(180deg)}
.bw-nav__sub{position:absolute;top:calc(100% + 15px);left:-14px;z-index:90;
  margin:0;padding:10px;list-style:none;min-width:312px;
  background:var(--bw-cream);border:1px solid var(--bw-line);border-radius:var(--bw-r-md);
  box-shadow:0 22px 48px rgba(12,42,28,.20);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .18s ease,transform .18s ease,visibility .18s}
.bw-nav__sub::before{content:"";position:absolute;left:0;right:0;top:-15px;height:15px}
.bw-nav__grp:hover .bw-nav__sub,
.bw-nav__grp:focus-within .bw-nav__sub,
.bw-nav__grp.is-open .bw-nav__sub{opacity:1;visibility:visible;transform:none}
/* Escape parks focus on the toggle, which is inside the group — without this the
   panel would reopen from :focus-within the instant it closed. Cleared again as
   soon as focus or the pointer leaves. */
.bw-nav__grp.is-dismissed:hover .bw-nav__sub,
.bw-nav__grp.is-dismissed:focus-within .bw-nav__sub{opacity:0;visibility:hidden;transform:translateY(-6px)}
.bw-nav__sub a{display:block;padding:9px 12px;border-radius:var(--bw-r-sm);
  font-family:'Karla',sans-serif;font-size:14.5px;font-weight:500;line-height:1.3;
  color:#22452F;white-space:normal}
.bw-header.is-stuck .bw-nav__sub a{color:#22452F}
.bw-nav__sub a:hover,.bw-nav__sub a:focus-visible{background:var(--bw-tint);color:var(--bw-ink)}
.bw-nav__sub a[aria-current="page"]{background:var(--bw-tint);color:var(--bw-ink);
  font-weight:600;text-decoration:none}

/* "Get a Free Homepage Redesign" is 265px against the 125px the old label
   needed. The Journal's nav runs down to 940px, so the gap and the button's own
   padding tighten across two bands rather than letting the row overflow. */
@media (min-width:940px) and (max-width:1240px){
  .bw-header{gap:16px}
  .bw-nav{gap:22px}
  .bw-cta{padding:11px 18px;font-size:14px}
}
@media (min-width:940px) and (max-width:1080px){
  .bw-header{gap:20px}
  .bw-nav{gap:11px}
  .bw-nav a{font-size:13.5px}
  .bw-cta{padding:9px 11px;font-size:13px}
}

/* ---- dark hero band ------------------------------------------------------- */
.bw-hero{background:var(--bw-ink);color:var(--bw-cream);padding:190px var(--bw-pad-x) 96px}
.bw-hero .bw-inner{max-width:var(--bw-max);margin:0 auto}
.bw-eyebrow{font-family:'Karla',sans-serif;font-size:14px;letter-spacing:.2em;text-transform:uppercase;
  font-weight:600;color:rgba(159,220,169,.85);margin:0 0 22px}
.bw-hero h1{font-size:clamp(44px,7.4vw,110px);line-height:.94;letter-spacing:-.04em;font-weight:800;
  margin:0;color:var(--bw-white);max-width:18ch}
.bw-hero.is-index h1{font-size:clamp(48px,7vw,92px)}
.bw-hero.is-index{padding-bottom:80px}
.bw-hero p.lede{font-family:'Karla',sans-serif;font-size:clamp(18px,1.5vw,23px);line-height:1.55;
  color:rgba(242,246,238,.82);margin:26px 0 0;max-width:52ch}

/* ---- article cards: the Our Work card language ---------------------------- */
.bw-section{padding:96px var(--bw-pad-x)}
.bw-grid{max-width:var(--bw-max);margin:0 auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px}
.bw-card{background:var(--bw-card);border-radius:var(--bw-r-card);display:flex;
  flex-direction:column;color:var(--bw-cream);overflow:hidden;
  transition:transform .25s cubic-bezier(.2,.7,.2,1),box-shadow .25s ease}
.bw-card .media{display:block;position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--bw-ink-2)}
.bw-card .media img{width:100%;height:100%;object-fit:cover;object-position:center;display:block;
  transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.bw-card:hover .media img{transform:scale(1.03)}
.bw-card .body{padding:30px 34px 34px;display:flex;flex-direction:column;gap:16px;flex:1}
.bw-card:hover{transform:translateY(-3px);box-shadow:0 26px 60px rgba(0,0,0,.28)}
/* Every card is the same size, whatever its position in the grid: 3 equal
   columns on desktop, 2 at tablet, 1 on mobile (the responsive block at the
   foot of this file steps them down). A short final row is fine — consistent
   cards read better than one article inflated to fill the row. */
.bw-card .kicker{font-family:'Karla',sans-serif;font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  font-weight:600;color:rgba(242,246,238,.5);margin:0}
.bw-card h2{font-size:clamp(22px,1.9vw,30px);line-height:1.15;letter-spacing:-.02em;font-weight:700;
  margin:0;color:var(--bw-white)}
.bw-card h2 a{color:inherit}
.bw-card h2 a:hover{color:var(--bw-accent-soft)}
.bw-card p{font-family:'Karla',sans-serif;font-size:17px;line-height:1.6;color:rgba(242,246,238,.78);margin:0}
.bw-card .more{font-family:'Karla',sans-serif;font-size:15px;font-weight:600;color:var(--bw-white);
  border-bottom:1.5px solid rgba(255,255,255,.45);padding-bottom:3px;align-self:flex-start;margin-top:auto}
.bw-card .more:hover{border-bottom-color:var(--bw-accent-soft);color:var(--bw-accent-soft)}

/* Keep reading and the footer share the same dark ground, so they read as one
   block. Separate them with the same hairline the footer already uses above its
   legal row. Scoped to the adjacent pair, so it appears on article pages only —
   on the Journal index the footer follows a light section and needs no rule. */
.bw-related + .bw-footer{border-top:1px solid rgba(242,246,238,.16)}

/* ---- footer: mirrors the homepage footer ---------------------------------- */
.bw-footer{background:var(--bw-ink);color:var(--bw-cream);padding:84px var(--bw-pad-x) 34px}
.bw-footer .cols{max-width:var(--bw-max);margin:0 auto;display:grid;
  grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:56px}
.bw-footer .brand{font-family:'Chivo',sans-serif;font-weight:900;font-size:29px;letter-spacing:-.03em;
  line-height:1;color:var(--bw-white);display:block}
.bw-footer .brand span{color:var(--bw-accent-soft)}
.bw-footer .blurb{font-family:'Karla',sans-serif;font-size:17px;line-height:1.6;
  color:rgba(242,246,238,.76);margin:22px 0 0;max-width:36ch}
.bw-footer .col-head{font-family:'Karla',sans-serif;font-size:13px;letter-spacing:.14em;text-transform:uppercase;
  font-weight:600;color:rgba(242,246,238,.5);margin:0 0 13px}
.bw-footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:13px}
.bw-footer li a,.bw-footer li span{font-family:'Karla',sans-serif;font-size:16px;color:rgba(242,246,238,.86)}
.bw-footer li a:hover{color:var(--bw-white)}
.bw-footer .legal{max-width:var(--bw-max);margin:0 auto;display:flex;flex-wrap:wrap;gap:20px;
  justify-content:space-between;align-items:center;padding-top:26px;margin-top:56px;
  border-top:1px solid rgba(242,246,238,.16);font-family:'Karla',sans-serif;font-size:14px;color:rgba(242,246,238,.55)}
.bw-footer .legal a{color:rgba(242,246,238,.55)}
.bw-footer .legal .links{display:flex;gap:26px;flex-wrap:wrap}
/* "Cookies" opens the preferences dialog, so it is a button. These rules keep
   it identical to the links beside it whether or not consent.js has loaded. */
.bw-footer .legal .links .bw-cookie-link{font:inherit;color:rgba(242,246,238,.55);
  background:none;border:0;padding:0;margin:0;cursor:pointer;text-align:left}
.bw-footer .legal .links .bw-cookie-link:hover{color:var(--bw-cream)}

/* ---- article page --------------------------------------------------------- */
.bw-article{padding:0 var(--bw-pad-x) 96px}
.bw-article .measure > *:first-child{margin-top:0}

/* One composition: the featured image spans the full width of the grid, and the
   reading column and sidebar sit beneath it on the same outer edges. Previously
   the figure (1100px), key blocks (900px) and prose (760px) were three centred
   blocks of three different widths, which is what made the page read as
   separate slabs rather than one article. */
.bw-layout{max-width:calc(var(--bw-read) + var(--bw-colgap) + var(--bw-side));
  margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) var(--bw-side);
  column-gap:var(--bw-colgap)}
.bw-layout > .bw-figure{grid-column:1 / -1;grid-row:1}
.bw-layout > .bw-keyblocks{grid-column:1;grid-row:2}
.bw-layout > .bw-side{grid-column:2;grid-row:2 / span 2}
.bw-layout > .measure{grid-column:1;grid-row:3;max-width:var(--bw-read);margin:56px 0 0}

.bw-prose{font-family:'Karla',sans-serif;font-size:18px;line-height:1.72;color:var(--bw-body)}
.bw-prose h2{font-family:'Schibsted Grotesk',sans-serif;font-size:clamp(28px,3vw,40px);line-height:1.12;
  letter-spacing:-.03em;font-weight:800;color:var(--bw-ink);margin:64px 0 18px}
.bw-prose h3{font-family:'Schibsted Grotesk',sans-serif;font-size:clamp(19px,1.6vw,23px);line-height:1.3;
  letter-spacing:-.015em;font-weight:700;color:var(--bw-ink);margin:38px 0 12px}
.bw-prose p{margin:0 0 20px}
.bw-prose ul{margin:0 0 22px;padding:0;list-style:none;display:flex;flex-direction:column;gap:12px}
.bw-prose ul li{position:relative;padding-left:26px}
.bw-prose ul li::before{content:"";position:absolute;left:4px;top:.62em;width:7px;height:7px;
  border-radius:50%;background:var(--bw-accent)}
.bw-prose strong{font-weight:700;color:var(--bw-ink)}
.bw-prose code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.88em;
  background:var(--bw-tint);border:1px solid var(--bw-line);border-radius:6px;padding:1px 6px;color:var(--bw-ink)}
.bw-prose a{color:var(--bw-field);border-bottom:1.5px solid rgba(30,107,60,.35);padding-bottom:1px}
.bw-prose a:hover{color:var(--bw-ink);border-bottom-color:var(--bw-ink)}
.bw-prose hr{border:0;border-top:1px solid var(--bw-line-2);margin:56px 0}

/* Featured image on the article, lifted over the hero edge */
.bw-figure{margin:-56px 0 0;border-radius:var(--bw-r-card);overflow:hidden;
  border:1px solid rgba(159,220,169,.28);box-shadow:0 30px 70px rgba(12,42,28,.24);position:relative;z-index:1}
.bw-figure img{display:block;width:100%;aspect-ratio:21/9;object-fit:cover;object-position:center}

/* Quick answer + Key takeaways sit in their own column, wider than the body
   measure, so neither is forced into a narrow box. */
.bw-keyblocks{padding:44px 0 0;display:flex;flex-direction:column;gap:28px}
.bw-blocktitle{font-family:'Schibsted Grotesk',sans-serif;font-size:clamp(24px,2.2vw,30px);line-height:1.15;
  letter-spacing:-.025em;font-weight:800;margin:0 0 20px}
.bw-rule{width:52px;height:3px;border-radius:2px;background:var(--bw-accent);margin:0 0 20px}

/* Quick answer */
.bw-callout{background:var(--bw-tint);border:1px solid var(--bw-line-2);border-radius:var(--bw-r-card);
  padding:48px 52px;margin:0}
.bw-callout .bw-blocktitle{color:var(--bw-ink)}
.bw-callout p{font-family:'Karla',sans-serif;font-size:20px;line-height:1.72;color:var(--bw-body);margin:0 0 22px}
.bw-callout ul{margin:6px 0 22px;padding:0;list-style:none;display:flex;flex-direction:column;gap:16px}
.bw-callout li{position:relative;padding-left:30px;font-family:'Karla',sans-serif;font-size:19px;
  line-height:1.6;color:var(--bw-body)}
.bw-callout li::before{content:"";position:absolute;left:4px;top:.6em;width:8px;height:8px;
  border-radius:50%;background:var(--bw-accent)}
.bw-callout strong{font-weight:700;color:var(--bw-ink)}
.bw-callout > *:last-child{margin-bottom:0}

/* Key takeaways — the dark card, mirroring the Our Work cards */
.bw-takeaways{background:var(--bw-card);border-radius:var(--bw-r-card);padding:48px 52px;margin:0;color:var(--bw-cream)}
.bw-takeaways .bw-blocktitle{color:var(--bw-white)}
.bw-takeaways .bw-rule{background:var(--bw-accent-soft)}
.bw-takeaways ol{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:26px;counter-reset:kt}
.bw-takeaways li{counter-increment:kt;display:grid;grid-template-columns:44px minmax(0,1fr);gap:20px;
  align-items:start;font-family:'Karla',sans-serif;font-size:18px;line-height:1.65;color:rgba(242,246,238,.86)}
.bw-takeaways li::before{content:"0" counter(kt);display:grid;place-items:center;width:44px;height:44px;
  border-radius:50%;border:1.5px solid rgba(159,220,169,.42);color:var(--bw-accent-soft);
  font-size:14px;font-weight:600;letter-spacing:.04em}
.bw-takeaways strong{color:var(--bw-white);font-weight:700}

/* Code blocks — dark, scrollable, never break the page */
.bw-code{background:var(--bw-ink-2);border:1px solid rgba(159,220,169,.22);border-radius:var(--bw-r-md);
  margin:0 0 28px;overflow:hidden}
.bw-code .bar{display:flex;align-items:center;gap:10px;padding:11px 16px;background:rgba(159,220,169,.08);
  border-bottom:1px solid rgba(159,220,169,.18)}
.bw-code .bar .dots{display:flex;gap:6px}
.bw-code .bar .dots i{width:9px;height:9px;border-radius:50%;background:rgba(159,220,169,.35);display:block}
.bw-code .bar .lang{font-family:'Karla',sans-serif;font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  font-weight:600;color:rgba(242,246,238,.55)}
.bw-code pre{margin:0;padding:22px;overflow-x:auto;-webkit-overflow-scrolling:touch}
.bw-code code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13.5px;
  line-height:1.65;color:#D7E8D9;white-space:pre;background:none;border:0;padding:0}

/* FAQ */
.bw-faq{margin:0 0 20px}
.bw-faq .qa{border-top:1px solid var(--bw-line-2);padding:26px 0}
.bw-faq .qa:last-child{border-bottom:1px solid var(--bw-line-2)}
.bw-faq h3{margin:0 0 10px}
.bw-faq p:last-child{margin-bottom:0}

/* Keep reading — two labelled groups, then real navigation. Sized to look
   deliberate with only a handful of entries rather than waiting for a grid
   of article cards to fill up. */
.bw-related{background:var(--bw-ink);color:var(--bw-cream);padding:88px var(--bw-pad-x);
  border-bottom:1px solid rgba(242,246,238,.18)}
.bw-related .inner{max-width:calc(var(--bw-read) + var(--bw-colgap) + var(--bw-side));margin:0 auto}
.bw-related h2{font-family:'Schibsted Grotesk',sans-serif;font-size:clamp(28px,3vw,40px);line-height:1.12;
  letter-spacing:-.03em;font-weight:800;color:var(--bw-white);margin:0 0 44px}
/* Related articles use the Our Work card language the Journal index already
   uses, at a smaller scale so they read as a footnote to the article rather
   than competing with it. The whole card is the link. */
.bw-relgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.bw-relcard{display:flex;flex-direction:column;background:var(--bw-card);color:var(--bw-cream);
  border:1px solid rgba(159,220,169,.16);border-radius:var(--bw-r-md);overflow:hidden;
  transition:transform .25s cubic-bezier(.2,.7,.2,1),border-color .25s ease,box-shadow .25s ease}
.bw-relcard:hover{transform:translateY(-3px);border-color:rgba(159,220,169,.42);
  box-shadow:0 22px 48px rgba(0,0,0,.3)}
.bw-relcard .media{display:block;aspect-ratio:16/9;overflow:hidden;background:var(--bw-ink-2)}
.bw-relcard .media img{width:100%;height:100%;object-fit:cover;object-position:center;display:block;
  transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.bw-relcard:hover .media img{transform:scale(1.04)}
.bw-relcard .body{display:flex;flex-direction:column;gap:9px;padding:18px 20px 22px}
.bw-relcard .kicker{font-family:'Karla',sans-serif;font-size:11.5px;letter-spacing:.14em;
  text-transform:uppercase;font-weight:600;color:rgba(242,246,238,.5)}
.bw-relcard .name{font-family:'Schibsted Grotesk',sans-serif;font-size:18px;line-height:1.28;
  letter-spacing:-.02em;font-weight:700;color:var(--bw-white);transition:color .2s ease}
.bw-relcard:hover .name{color:var(--bw-accent-soft)}

/* the service link and the two buttons close the section on one rule */
.bw-relfoot{margin-top:40px;padding-top:28px;border-top:1px solid rgba(242,246,238,.16);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 32px}
.bw-relfoot .label{font-family:'Karla',sans-serif;font-size:12px;letter-spacing:.16em;
  text-transform:uppercase;font-weight:600;color:rgba(159,220,169,.85);margin:0;
  display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.bw-relfoot .label a{font-family:'Schibsted Grotesk',sans-serif;font-size:17px;letter-spacing:-.015em;
  text-transform:none;font-weight:700;color:var(--bw-white);
  border-bottom:1.5px solid rgba(255,255,255,.4);padding-bottom:2px}
.bw-relfoot .label a:hover{color:var(--bw-accent-soft);border-bottom-color:var(--bw-accent-soft)}
.bw-related .actions{display:flex;flex-wrap:wrap;gap:14px;margin:0}
.bw-related .btn{font-family:'Karla',sans-serif;font-size:16px;font-weight:600;border-radius:var(--bw-r-pill);
  padding:15px 30px}
.bw-related .btn.solid{background:var(--bw-white);color:var(--bw-ink)}
.bw-related .btn.solid:hover{background:var(--bw-accent);color:var(--bw-white)}
.bw-related .btn.ghost{border:1.5px solid rgba(255,255,255,.7);color:var(--bw-white)}
.bw-related .btn.ghost:hover{background:rgba(255,255,255,.14);color:var(--bw-white)}

/* back link */
.bw-back{display:inline-flex;align-items:center;gap:9px;font-family:'Karla',sans-serif;font-size:15px;
  font-weight:600;color:rgba(242,246,238,.8);margin:0 0 26px}
.bw-back:hover{color:var(--bw-white)}

/* ---- article byline -------------------------------------------------------
   Only rendered where the article actually carries the information. */
.bw-byline{font-family:'Karla',sans-serif;font-size:15px;line-height:1.5;
  color:rgba(242,246,238,.62);margin:32px 0 0;display:flex;flex-wrap:wrap;
  align-items:center;gap:8px 16px}
.bw-byline .who{color:rgba(242,246,238,.9);font-weight:600}
.bw-byline .sep{width:4px;height:4px;border-radius:50%;background:rgba(159,220,169,.55);flex:none}

/* ---- article sidebar ------------------------------------------------------
   The aside stretches across the key-blocks and prose rows, so the inner block
   can stick within it and comes to rest naturally at the end of the article —
   it can never reach Keep reading or the footer, which sit outside this grid. */
.bw-side{min-width:0}
.bw-side-inner{position:sticky;top:94px;display:flex;flex-direction:column;gap:18px;
  max-height:calc(100vh - 118px);padding-top:44px}
/* The wrapper itself never scrolls — scrolling it pushed the CTA below the cut
   and made the whole sidebar a nested scroll panel. Instead the contents list
   is the only thing that gives: it shrinks and scrolls internally, and the CTA
   is a fixed-size item that always sits beneath it, inside the viewport. */
.bw-toc{display:flex;flex-direction:column;min-height:0;flex:0 1 auto}
.bw-toc__list{min-height:0;overflow-y:auto;overscroll-behavior:contain}
.bw-sidecta{flex:0 0 auto}

.bw-toc{background:var(--bw-tint);border:1px solid var(--bw-line);
  border-radius:var(--bw-r-md);padding:20px 22px}
.bw-toc__title{font-family:'Karla',sans-serif;font-size:12px;letter-spacing:.16em;
  text-transform:uppercase;font-weight:700;color:var(--bw-muted);margin:0;
  display:flex;align-items:center;justify-content:space-between;gap:12px}
/* only a control once the script has made it one, so no-JS readers are not
   given a button that does nothing */
.bw-toc__title[role="button"]{cursor:pointer}
.bw-toc__title[role="button"]::after{content:"";width:8px;height:8px;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(-135deg);transition:transform .2s ease;flex:none;margin-bottom:-4px}
.bw-toc__title[aria-expanded="false"]::after{transform:rotate(45deg);margin:0 0 2px}
.bw-toc__title:focus-visible{outline:2px solid var(--bw-accent);outline-offset:3px}
.bw-toc__list{margin-top:14px}
.bw-toc.is-collapsed .bw-toc__list{display:none}
.bw-toc ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.bw-toc a{display:block;font-family:'Karla',sans-serif;font-size:14.5px;line-height:1.4;
  color:var(--bw-body);padding:8px 0 8px 14px;border-left:2px solid var(--bw-line-2);
  transition:color .18s ease,border-color .18s ease}
.bw-toc a:hover{color:var(--bw-ink);border-left-color:var(--bw-accent)}
.bw-toc a.is-current{color:var(--bw-ink);font-weight:700;border-left-color:var(--bw-accent)}

.bw-sidecta{background:var(--bw-card);color:var(--bw-cream);border-radius:var(--bw-r-md);padding:24px}
.bw-sidecta p{font-family:'Karla',sans-serif;font-size:15px;line-height:1.55;
  color:rgba(242,246,238,.8);margin:0 0 16px}
.bw-sidecta .btn{display:inline-block;font-family:'Karla',sans-serif;font-size:15px;font-weight:600;
  border-radius:var(--bw-r-pill);padding:12px 22px;background:var(--bw-accent);color:var(--bw-white)}
.bw-sidecta .btn:hover{background:var(--bw-white);color:var(--bw-ink)}

/* the fixed header must not sit on top of a heading jumped to from the TOC */
.bw-prose h2{scroll-margin-top:100px}

/* ---- journal index: a firmer intro and a labelled grid --------------------- */
.bw-hero .bw-rule{background:var(--bw-accent-mid);margin:0 0 26px}
.bw-sectionhead{max-width:var(--bw-max);margin:0 auto 40px;display:flex;align-items:baseline;
  justify-content:space-between;gap:24px;padding-bottom:20px;
  border-bottom:1px solid var(--bw-line-2)}
.bw-sectionhead h2{font-family:'Schibsted Grotesk',sans-serif;font-size:clamp(20px,1.7vw,25px);
  line-height:1.2;letter-spacing:-.02em;font-weight:800;color:var(--bw-ink);margin:0}
.bw-sectionhead .count{font-family:'Karla',sans-serif;font-size:13px;letter-spacing:.14em;
  text-transform:uppercase;font-weight:600;color:var(--bw-muted);white-space:nowrap}

/* ---- responsive: mirrors the homepage breakpoints ------------------------- */

/* Below this the sidebar would squeeze the reading column under ~730px, so the
   article becomes a single centred column and the contents-list moves inline
   above the prose, where it collapses to a disclosure the reader can open. */
@media (max-width:1180px){
  .bw-layout{max-width:var(--bw-read);grid-template-columns:minmax(0,1fr);column-gap:0}
  .bw-layout > .bw-figure,
  .bw-layout > .bw-keyblocks,
  .bw-layout > .bw-side,
  .bw-layout > .measure{grid-column:1;grid-row:auto}
  .bw-layout > .measure{margin-top:40px}
  .bw-side-inner{position:static;max-height:none;overflow:visible;padding-top:32px}
  /* the article already closes with Keep reading and its own CTA */
  .bw-sidecta{display:none}
  .bw-toc{padding:16px 20px}
}
@media (max-width:1100px){
  .bw-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bw-footer .cols{grid-template-columns:repeat(2,minmax(0,1fr));gap:40px}
}
@media (max-width:1024px){
  :root{--bw-pad-x:32px}
  .bw-hero{padding-top:170px;padding-bottom:80px}
  .bw-section{padding-top:80px;padding-bottom:80px}
}
@media (max-width:939px){
  .bw-nav{display:none}          /* matches the homepage nav breakpoint */
}
@media (max-width:900px){
  .bw-relgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:768px){
  :root{--bw-pad-x:24px}
  .bw-figure{margin-top:-36px;border-radius:var(--bw-r-md)}
  .bw-figure img{aspect-ratio:16/9}
  .bw-keyblocks{padding-top:34px;gap:22px}
  .bw-callout,.bw-takeaways{padding:34px 30px}
  .bw-callout p{font-size:18px}
  .bw-callout li{font-size:17px}
  .bw-takeaways li{grid-template-columns:38px minmax(0,1fr);gap:16px;font-size:17px}
  .bw-takeaways li::before{width:38px;height:38px;font-size:13px}
  .bw-related{padding:64px var(--bw-pad-x)}
  .bw-related h2{margin-bottom:32px}
  .bw-relfoot{margin-top:32px}
  .bw-header{padding:14px 20px;gap:12px}
  .bw-logo{font-size:21px}
  .bw-cta{padding:10px 16px;font-size:13px}
  .bw-hero{padding-top:132px;padding-bottom:64px}
  .bw-section{padding-top:64px;padding-bottom:64px}
  .bw-grid{grid-template-columns:minmax(0,1fr)}
  .bw-footer{padding:64px 24px 72px}
  .bw-prose h2{margin-top:52px}
  .bw-callout{padding:24px}
  .bw-takeaways{padding:26px}
}
@media (max-width:560px){
  :root{--bw-pad-x:18px}
  .bw-figure{margin-top:-24px}
  .bw-keyblocks{padding-top:26px;gap:18px}
  .bw-callout,.bw-takeaways{padding:26px 22px;border-radius:var(--bw-r-md)}
  .bw-callout p{font-size:17px;margin-bottom:18px}
  .bw-callout li{font-size:16px;padding-left:26px}
  .bw-takeaways ol{gap:20px}
  .bw-takeaways li{grid-template-columns:34px minmax(0,1fr);gap:14px;font-size:16px}
  .bw-takeaways li::before{width:34px;height:34px;font-size:12px}
  .bw-card .body{padding:22px 24px 26px}
  .bw-related .btn{padding:13px 24px;font-size:15px}
  .bw-relgrid{grid-template-columns:minmax(0,1fr);gap:18px}
  .bw-relfoot{align-items:flex-start;flex-direction:column}
  .bw-header{padding:12px 16px;gap:10px}
  .bw-logo{font-size:19px}
  .bw-cta{padding:9px 13px;font-size:12.5px}
  .bw-hero{padding-top:118px;padding-bottom:52px}
  .bw-hero h1{font-size:clamp(34px,10.5vw,52px)}
  .bw-section{padding-top:52px;padding-bottom:52px}
  .bw-prose{font-size:17px}
  .bw-prose h2{font-size:clamp(25px,7.4vw,32px);margin-top:44px}
  .bw-code pre{padding:16px}
  .bw-code code{font-size:12.5px}
  .bw-footer .cols{grid-template-columns:minmax(0,1fr);gap:34px}
  .bw-related{padding:56px 18px}
}
@media (max-width:390px){
  :root{--bw-pad-x:15px}
  .bw-header{padding:11px 13px;gap:8px}
  .bw-logo{font-size:18px}
  .bw-cta{padding:8px 11px;font-size:11.5px}
}
@media (prefers-reduced-motion:reduce){
  .bw-card{transition:none}
  .bw-card:hover{transform:none}
}

/* ===========================================================================
   Added with the four imported articles (May 2026 back-catalogue).

   Three things the Journal did not previously need:
     1. blockquote — the imported articles quote worked examples of copy;
     2. a burger and mobile panel — .bw-nav simply vanished below 939px, which
        left the Journal with no navigation at all on tablet and phone;
     3. the shared enquiry widget's helper classes, so /assets/services.js can
        drive the same widget here that the rest of the site already uses
        without journal pages having to load services.css.
   =========================================================================== */

/* ---- quoted examples ------------------------------------------------------
   Used for the "OTA copy / direct website copy" pairs and the worked citation
   blocks. Green rule on the left, tinted ground, so a quote never reads as body
   copy that has lost its indent. */
.bw-prose blockquote{margin:0 0 24px;padding:22px 26px;background:var(--bw-tint);
  border-left:3px solid var(--bw-accent);border-radius:0 var(--bw-r-sm) var(--bw-r-sm) 0}
.bw-prose blockquote p{margin:0 0 14px;color:var(--bw-ink);font-size:17.5px;line-height:1.66}
.bw-prose blockquote p:last-child{margin-bottom:0}
.bw-prose blockquote ul{margin-bottom:0}

/* Long pre blocks (the llms.txt templates, the ASCII flow diagrams) scroll
   inside themselves rather than pushing the page sideways. */
.bw-code pre{overflow-x:auto;-webkit-overflow-scrolling:touch}
.bw-code code{white-space:pre}

/* ---- burger + mobile panel ------------------------------------------------
   Same markup, behaviour and breakpoint as /services/ and the contact pages,
   restyled onto the Journal's tokens. */
.burger{display:none;align-items:center;gap:10px;background:none;
  border:1.5px solid rgba(255,255,255,.5);border-radius:var(--bw-r-pill);
  padding:9px 16px 9px 14px;cursor:pointer;font-family:'Karla',sans-serif;
  font-size:14px;font-weight:600;color:var(--bw-white);
  transition:background .2s ease,border-color .2s ease,color .2s ease}
.burger:hover{background:rgba(255,255,255,.14)}
.bw-header.is-stuck .burger{border-color:var(--bw-line-2);color:var(--bw-ink)}
.bw-header.is-stuck .burger:hover{background:var(--bw-tint)}
.burger__bars{display:flex;flex-direction:column;justify-content:center;gap:4px;width:18px;height:14px}
.burger__bars span{display:block;height:2px;border-radius:2px;background:currentColor;
  transition:transform .25s ease,opacity .2s ease}
.burger[aria-expanded="true"] .burger__bars span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] .burger__bars span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] .burger__bars span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* Above the enquiry widget (120) so nothing floats over the open menu. */
.mnav{position:fixed;inset:0;z-index:130;background:var(--bw-ink);overflow-y:auto;
  overscroll-behavior:contain}
html.mnav-open [data-floatwidget]{visibility:hidden}
/* The cookie settings button is fixed at z-index 9998 and so paints over the
   mobile menu panel (z-index 130) at every width. Until now nothing sat at the
   bottom of the panel for it to cover; the social row does, and it lands under
   the button at 1024 and 768. This extends the rule immediately above, which
   already stands the floating help widget down while the menu is open, to the
   other floating control. Presentation only: consent.js, the banner, storage
   and the settings dialog are untouched, and the button returns the moment the
   menu closes. */
html.mnav-open .bw-cc-settings{visibility:hidden}

/* Clears the footer's Privacy/Terms row — see the same rule in services.css,
   which the journal pages do not load. */
[data-floatwidget]{bottom:64px !important}
/* consent.js pins its own cookie-settings button bottom-left at the same
   26px, where it covered the Privacy link on narrow screens once the footer
   was in view. Lifted to match — position only; the button, its behaviour
   and consent.js itself are untouched. */
.bw-cc-settings{bottom:64px !important}
html.mnav-open,html.mnav-open body{overflow:hidden}
.mnav__inner{display:flex;flex-direction:column;align-items:flex-start;gap:4px;
  padding:120px var(--bw-pad-x) 48px;max-width:var(--bw-max);margin:0 auto;min-height:100%}
.mnav__inner a{font-family:'Schibsted Grotesk',sans-serif;font-size:clamp(28px,5vw,42px);
  line-height:1.16;letter-spacing:-.03em;font-weight:800;color:var(--bw-cream);
  padding:12px 0;width:100%;border-bottom:1px solid rgba(242,246,238,.14)}
.mnav__inner a:hover{color:var(--bw-accent-soft)}
.mnav__inner a[aria-current="page"]{color:var(--bw-accent-soft)}
.mnav__inner a[aria-current="page"]::after{content:"";display:block;width:44px;height:3px;
  border-radius:2px;background:var(--bw-accent-mid);margin-top:10px}
/* Seven sector links at the panel's headline size would treble its height, so
   they are a collapsed disclosure set at reading size. With no JS the [hidden]
   is never applied and the full list is simply there. */
.mnav__grp{display:flex;align-items:center;gap:10px;max-width:100%}
.mnav__tog{display:inline-flex;align-items:center;justify-content:center;
  flex:0 0 40px;width:40px;height:40px;padding:0;border:1.5px solid rgba(242,246,238,.42);
  border-radius:50%;background:none;color:var(--bw-cream);cursor:pointer;
  transition:background .2s ease,border-color .2s ease}
.mnav__tog:hover{background:rgba(242,246,238,.14)}
.mnav__tog svg{display:block;width:14px;height:9px;transition:transform .2s ease}
.mnav__tog[aria-expanded="true"] svg{transform:rotate(180deg)}
.mnav__sub{list-style:none;margin:6px 0 10px;padding:0 0 0 2px;
  display:grid;grid-template-columns:minmax(0,1fr);gap:2px;width:100%}
/* an author display beats the UA stylesheet's [hidden]{display:none}, so the
   collapsed state has to be stated here or the attribute does nothing */
.mnav__sub[hidden]{display:none}
/* ...and with no script to set the attribute in the first place, the full list
   is simply there */
html:not(.bw-js) .mnav__sub[hidden]{display:grid}
.mnav__inner .mnav__sub a{font-family:'Karla',sans-serif;font-size:17px;line-height:1.35;
  font-weight:500;letter-spacing:0;color:rgba(242,246,238,.82);padding:9px 0 9px 16px;
  width:auto;border-bottom:0;border-left:2px solid rgba(159,220,169,.34)}
.mnav__inner .mnav__sub a:hover{color:var(--bw-accent-soft);border-left-color:var(--bw-accent-soft)}
.mnav__inner .mnav__sub a[aria-current="page"]{color:var(--bw-accent-soft);
  border-left-color:var(--bw-accent-soft);font-weight:700}
.mnav__inner .mnav__sub a[aria-current="page"]::after{display:none}
@media (min-width:600px){
  .mnav__sub{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:22px}
}
.mnav__cta{margin-top:32px;border-bottom:0 !important;font-family:'Karla',sans-serif !important;
  font-size:16px !important;font-weight:600 !important;letter-spacing:0 !important;
  background:var(--bw-accent);color:var(--bw-white) !important;border-radius:var(--bw-r-pill);
  padding:15px 30px !important;width:auto !important}
.mnav__cta:hover{background:var(--bw-white);color:var(--bw-ink) !important}

/* The panel covers everything, so the header has to come up with it — otherwise
   the burger disappears underneath and there is no visible way to close. It is
   forced back to its transparent-over-dark state so it reads against the panel
   even if the page was scrolled and the header had gone solid. */
html.mnav-open .bw-header{z-index:140;background:transparent;border-bottom-color:transparent;
  box-shadow:none;backdrop-filter:none}
html.mnav-open .bw-logo{color:var(--bw-white)}
html.mnav-open .bw-logo span{color:var(--bw-accent-soft)}
html.mnav-open .bw-cta{background:var(--bw-accent);color:var(--bw-white)}
html.mnav-open .burger{border-color:rgba(255,255,255,.5);color:var(--bw-white)}
html.mnav-open .burger:hover{background:rgba(255,255,255,.14)}

/* Matches the width at which .bw-nav is hidden, so navigation is never absent. */
@media (max-width:939px){
  .burger{display:inline-flex}
  /* The header CTA steps aside here and lives in the panel instead, the same
     hand-over services.css makes at 1024px. Its label no longer fits beside the
     logo and the Menu button on a phone. */
  .bw-cta{display:none}
}
@media (max-width:560px){
  .burger{padding:8px 13px 8px 11px;font-size:13px;gap:8px}
  .mnav__inner{padding-top:104px}
  .bw-prose blockquote{padding:18px 20px}
  .bw-prose blockquote p{font-size:16.5px}
}
@media (max-width:390px){
  .burger__word{display:none}
  .burger{padding:8px 10px}
}

/* ---- enquiry widget ------------------------------------------------------
   The widget's own markup carries its layout inline; these are the states and
   the visually-hidden label class it cannot express inline. */
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.field:focus{border-color:var(--bw-accent)}
.help-close:hover{background:rgba(242,246,238,.26)}
.help-send:hover{background:var(--bw-ink)}
.help-send[disabled]{opacity:.65;cursor:default}
.help-launcher:hover{background:var(--bw-field)}
@media (max-width:560px){
  /* The journal footer's legal row sits higher than the marketing pages',
     so the two pinned controls need more clearance here. Measured minimum 97px. */
  [data-floatwidget]{right:16px !important;bottom:104px !important}
  .bw-cc-settings{bottom:104px !important}
  .help-launcher{padding:12px 18px !important;font-size:14px !important}
}

/* The journal footer's legal row sits higher than the marketing pages', so the
   two pinned controls need more clearance below 900px. Measured minimum 97px. */
@media (max-width:900px){
  [data-floatwidget]{bottom:104px !important}
  .bw-cc-settings{bottom:104px !important}
}

/* The launcher carries an inline box-shadow of 0 16px 34px rgba(12,42,28,.32) —
   a 34px blur in near-black at 32%. Against the dark hero it was invisible, and
   while the widget sat at bottom:26px roughly 50px of it (16px offset + 34px
   blur) fell below the viewport edge and was clipped. Lifting the widget to
   64px to clear the footer legal links put the whole shadow on screen, where
   over cream and white sections it reads as a large dark cloud around a small
   pill. Tightened to a shadow proportionate to the control; the pill still
   lifts off the page. !important because the value is an inline style.
   Covers both launchers: .help-launcher on the hand-built pages and the
   class-less [data-launcher] in the homepage bundle. */
[data-floatwidget] .help-launcher,
[data-floatwidget] [data-launcher]{box-shadow:0 6px 16px rgba(12,42,28,.18) !important}

/* ---- social links -------------------------------------------------------
   Same component as services.css, on the Journal's own tokens. Qualified past
   the rules that would otherwise win: .bw-footer ul (0,1,1) sets the column
   layout, .bw-footer li a (0,1,2) the 16px text, .mnav__inner a (0,1,1) the
   28-42px display size. */
.bw-social{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.bw-footer .bw-social,.mnav__inner .bw-social{
  flex-direction:row;margin:16px 0 0;padding:0;gap:10px}
.bw-footer li .bw-social a,.bw-footer .bw-social li a,.mnav__inner .bw-social a{
  display:inline-flex;align-items:center;justify-content:center;
  width:42px;height:42px;padding:0;border-radius:50%;
  border:1px solid rgba(242,246,238,.22);background:transparent;
  font-family:'Karla',sans-serif;font-size:0;font-weight:400;line-height:0;
  color:rgba(242,246,238,.86);
  transition:color .18s ease,border-color .18s ease,background-color .18s ease}
.bw-footer .bw-social li a:hover,.mnav__inner .bw-social a:hover,
.bw-footer .bw-social li a:focus-visible,.mnav__inner .bw-social a:focus-visible{
  color:var(--bw-white);border-color:var(--bw-accent-soft);background:rgba(242,246,238,.10)}
.bw-footer .bw-social li a:focus-visible,.mnav__inner .bw-social a:focus-visible{
  outline:2px solid var(--bw-accent-soft);outline-offset:3px}
.bw-social svg{display:block;width:18px;height:18px;flex:none}
.mnav__inner .bw-social a::after{display:none}

.mnav__social{margin-top:28px;padding-top:24px;width:100%;
  border-top:1px solid rgba(242,246,238,.16)}
.mnav__inner .mnav__social a{width:48px;height:48px}
.mnav__social-lbl{font-family:'Karla',sans-serif;font-size:12.5px;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(242,246,238,.55);margin:0 0 14px;font-weight:600}

/* ==========================================================================
   Authors
   Markup is generated by .tools/authors.js from .tools/authors.json — edit
   there, not in the pages. Three pieces: the hero byline, the "About the
   author" block that ends each article, and the author page itself.
   ========================================================================== */

/* ---- hero byline: the name becomes a link, with a small portrait ---------
   The link is padded to a 44px touch target and the padding taken back with a
   negative margin, so the byline row keeps its height. */
.bw-byline a.who{display:inline-flex;align-items:center;gap:10px;
  padding:6px 0;margin:-6px 0;color:rgba(242,246,238,.9);font-weight:600;
  border-radius:var(--bw-r-pill)}
.bw-byline a.who:hover{color:var(--bw-white);text-decoration:underline;
  text-decoration-color:rgba(159,220,169,.7);text-underline-offset:4px}
.bw-byline a.who:focus-visible{outline:2px solid var(--bw-accent-soft);outline-offset:4px}
.bw-byline__img{width:32px;height:32px;border-radius:50%;object-fit:cover;flex:none;
  border:1px solid rgba(159,220,169,.35);background:var(--bw-card)}

/* ---- "About the author", the last block of the article column ------------
   It sits inside .bw-prose, whose descendant rules (.bw-prose h2, p and a, all
   (0,1,1)) would otherwise restyle it, so every rule here is (0,2,0). */
.bw-author{display:grid;grid-template-columns:auto minmax(0,1fr);gap:28px;align-items:start;
  margin:64px 0 8px;padding:32px 34px;background:var(--bw-tint);
  border:1px solid var(--bw-line);border-radius:var(--bw-r-card)}
.bw-author .bw-author__img{width:112px;height:112px;border-radius:50%;object-fit:cover;display:block;
  border:3px solid var(--bw-white);box-shadow:0 10px 26px rgba(12,42,28,.14)}
.bw-author .bw-author__label{font-family:'Karla',sans-serif;font-size:12.5px;line-height:1.3;
  letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:var(--bw-field);
  margin:0 0 10px;scroll-margin-top:100px}
.bw-author .bw-author__name{font-family:'Schibsted Grotesk',sans-serif;font-size:clamp(24px,2vw,28px);
  line-height:1.12;letter-spacing:-.02em;font-weight:800;color:var(--bw-ink);margin:0}
.bw-author .bw-author__role{font-size:15px;line-height:1.45;color:var(--bw-muted);margin:6px 0 0}
.bw-author .bw-author__bio{font-size:16.5px;line-height:1.65;color:var(--bw-body);margin:16px 0 0;max-width:60ch}
.bw-author .bw-author__actions{display:flex;flex-wrap:wrap;gap:12px;margin:22px 0 0}
.bw-author .bw-author__btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:46px;padding:0 22px;border-radius:var(--bw-r-pill);border:1.5px solid transparent;
  font-family:'Karla',sans-serif;font-size:15px;font-weight:600;line-height:1;
  transition:background-color .18s ease,border-color .18s ease,color .18s ease}
.bw-author .bw-author__btn svg{display:block;width:16px;height:16px;flex:none}
.bw-author .bw-author__btn.is-solid{background:var(--bw-ink);border-color:var(--bw-ink);color:var(--bw-white)}
.bw-author .bw-author__btn.is-solid:hover{background:var(--bw-accent);border-color:var(--bw-accent);color:var(--bw-white)}
.bw-author .bw-author__btn.is-ghost{background:transparent;border-color:rgba(12,42,28,.32);color:var(--bw-ink)}
.bw-author .bw-author__btn.is-ghost:hover{background:var(--bw-white);border-color:var(--bw-ink);color:var(--bw-ink)}
.bw-author .bw-author__btn:focus-visible{outline:2px solid var(--bw-accent);outline-offset:3px}

/* ---- author page hero ------------------------------------------------------ */
.bw-hero.is-author{padding-bottom:88px}
.bw-authorhero{display:grid;grid-template-columns:auto minmax(0,1fr);gap:48px;align-items:start;max-width:1080px}
/* 132px keeps the 260px portrait sharp on 2x screens */
.bw-authorhero__img{width:132px;height:132px;border-radius:50%;object-fit:cover;display:block;
  border:3px solid rgba(159,220,169,.4);background:var(--bw-card)}
.bw-authorhero__body .bw-eyebrow{margin-bottom:16px}
.bw-hero.is-author h1{font-size:clamp(44px,5.4vw,80px);max-width:none}
.bw-authorhero__role{font-family:'Karla',sans-serif;font-size:16px;line-height:1.5;font-weight:600;
  color:rgba(242,246,238,.72);margin:18px 0 0;display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px}
.bw-authorhero__role .sep{width:4px;height:4px;border-radius:50%;background:rgba(159,220,169,.55);flex:none}
.bw-authorhero__bio p{font-family:'Karla',sans-serif;font-size:clamp(17px,1.3vw,19px);line-height:1.65;
  color:rgba(242,246,238,.82);margin:20px 0 0;max-width:64ch}
.bw-authorhero__actions{margin:32px 0 0}
.bw-authorhero__btn{display:inline-flex;align-items:center;gap:10px;min-height:50px;padding:0 26px;
  border-radius:var(--bw-r-pill);background:var(--bw-white);color:var(--bw-ink);
  font-family:'Karla',sans-serif;font-size:16px;font-weight:600;line-height:1;
  transition:background-color .18s ease,color .18s ease}
.bw-authorhero__btn svg{display:block;width:17px;height:17px;flex:none}
.bw-authorhero__btn:hover{background:var(--bw-accent);color:var(--bw-white)}
.bw-authorhero__btn:focus-visible{outline:2px solid var(--bw-accent-soft);outline-offset:3px}

/* The author page lists the same cards as the Journal, one level down: its
   section has an h2, so the card titles are h3 and need the h2 card styling. */
.bw-card h3{font-size:clamp(22px,1.9vw,30px);line-height:1.15;letter-spacing:-.02em;font-weight:700;
  margin:0;color:var(--bw-white)}
.bw-card h3 a{color:inherit}
.bw-card h3 a:hover{color:var(--bw-accent-soft)}

@media (max-width:768px){
  .bw-authorhero{grid-template-columns:minmax(0,1fr);gap:26px}
  .bw-authorhero__img{width:104px;height:104px}
  .bw-hero.is-author{padding-bottom:64px}
}
@media (max-width:560px){
  .bw-author{grid-template-columns:minmax(0,1fr);gap:18px;padding:26px 22px;margin-top:52px}
  .bw-author .bw-author__img{width:80px;height:80px}
  .bw-author .bw-author__bio{font-size:16px}
  .bw-author .bw-author__btn{flex:1 1 100%}
  .bw-authorhero__img{width:88px;height:88px}
  .bw-authorhero__role{font-size:15px}
  .bw-authorhero__btn{width:100%;justify-content:center}
  .bw-hero.is-author{padding-bottom:52px}
}
@media (prefers-reduced-motion:reduce){
  .bw-author .bw-author__btn,.bw-authorhero__btn{transition:none}
}