/* Blog v2 (jbl-frontend, 2026-11-01). Loaded on the blog home, the category pages and every post (pageKey blog / post).
   1) the blog tokens: ONLY additions to the events tokens (docs/blog-v2/design/tokens.css), scoped .bl2
   2) reduced motion: the story stands still (fan, sheet tilt, film strip, flip book, chapter rail, fade-ins)
   3) phase 1 block-post pieces in today's story look: captions under pictures, the wide picture, own-block scenes,
      the divider mark, link cards, the newsletter block, the grid gallery, "Skip the pictures", "This story is in English."
   Everything is scoped to .bl2 (the blog's <main>), so nothing reaches the events pages, PuffiNova or the shop.
   Colours only through tokens (with the same value as fallback where the events tokens are not loaded); pictures always whole. */

/* ---------- 1) tokens ---------- */
.bl2 {
  --bl2-measure: 68ch;
  --bl2-fs-body: 1.125rem;
  --bl2-lh-body: 1.7;
  --bl2-para-gap: 1em;
  --bl2-fs-lead: clamp(1.15rem, 1vw + .9rem, 1.35rem);
  --bl2-fs-note: 1.3rem;
  --bl2-fs-h1: clamp(2rem, 3vw + 1rem, 3.4rem);
  --bl2-fs-h2: clamp(1.5rem, 2vw + 1rem, 2.2rem);
  --bl2-fs-card-title: 1.2rem;
  --bl2-fs-feat-title: clamp(1.6rem, 2.4vw + .8rem, 2.4rem);
  --bl2-dropcap: 3.1em;
  --bl2-sheet: var(--ev2-paper, #FFFAF3);
  --bl2-frame: var(--ev2-frame, #FFFFFF);
  --bl2-card-ratio: 16 / 10;
  --bl2-feat-ratio: 16 / 10;
  --bl2-cover-max-h: 68vh;
  --bl2-print-pad: 10px;
  --bl2-ink: var(--ev2-ink, #2A2418);
  --bl2-ink-soft: var(--ev2-ink-soft, #5E5646);
  --bl2-heading: var(--ev2-heading-on-paper, #3B4E00);
  --bl2-link: var(--ev2-accent-ink, #8E5300);
  --bl2-on-page: var(--ev2-on-page, #F3EFE4);
  --bl2-on-page-soft: var(--ev2-on-page-soft, #CFC8B6);
  --bl2-heading-on-page: var(--ev2-heading-on-page, #F0A848);
  --bl2-tag-bg: var(--ev2-accent-wash, #E4E9D0);
  --bl2-tag-ink: var(--ev2-heading-on-paper, #3B4E00);
  --bl2-btn: var(--ev2-btn, #A35F00);
  --bl2-btn-hover: var(--ev2-btn-hover, #2C3A00);
  --bl2-chip-on: var(--ev2-btn, #A35F00);
  --bl2-chip-off: rgba(255, 255, 255, .06);
  --bl2-chip-line: rgba(255, 255, 255, .35);
  --bl2-tilt-a: -2deg;
  --bl2-tilt-b: 2deg;
  --bl2-strip-h: clamp(240px, 46vh, 460px);
  --bl2-scene-pad: clamp(34px, 5vw, 70px);
  --bl2-flip-btn: var(--ev2-live, #3B4E00);
  --bl2-end-mark: var(--ev2-logo-orange, #BA6C00);
  --bl2-focus: var(--ev2-focus, #1F5FBF);
  --bl2-focus-on-page: var(--ev2-focus-on-page, #F0A848);
  --bl2-line: var(--ev2-line, #E2D8C6);
  --bl2-scene-info: #5E5646;
  --bl2-scene-info-bg: #F3EBDD;
}

/* ---------- 2) reduced motion: nothing moves on its own or on hover ---------- */
@media (prefers-reduced-motion: reduce) {
  .bl2 .fan__card, .bl2 .pic--sheet img, .bl2 .filmstrip__item img, .bl2 .st__rail, .bl2 .st__rail span, .bl2 .mosaic__item img,
  .bl2 .flip__leaf, .bl2 .flip__book, .bl2 .post, .bl2 .st__nextcard, .bl2 .share__btn, .bl2 .blcard { transition: none !important; animation: none !important; }
  /* the fan does not spread on hover: it stays as it rests (already open a little), so every card can be seen */
  .bl2 .fan:hover .fan__card--1 { transform: translate(-17%, 2%) rotate(-8deg); }
  .bl2 .fan:hover .fan__card--2 { transform: translate(17%, -3%) rotate(6deg); }
  .bl2 .fan:hover .fan__card--3 { transform: translate(0, 13%) rotate(-1deg); }
  .bl2 .fan--2:hover .fan__card--2 { transform: translate(18%, 8%) rotate(6deg); }
  .bl2 .pic--sheet:hover img { transform: rotate(var(--bl2-tilt-a)); }
  .bl2 .sc--flip .pic--sheet:hover img { transform: rotate(var(--bl2-tilt-b)); }
  .bl2 .filmstrip__item:hover img { transform: none; }
  .bl2 .mosaic__item:hover img { transform: none; }
  .bl2 .post:hover, .bl2 .st__nextcard:hover, .bl2 .share__btn:hover, .bl2 .share__btn:focus-visible { transform: none; }
  .bl2 .filmstrip__track { scroll-behavior: auto; }
  .bl2 .reveal { opacity: 1 !important; transform: none !important; }
}

/* Edit mode (editors only; body.ie-on is set by inline-edit.js). Nothing here floats or sticks. */
body.ie-on .bl2 .st__rail { display: none; }
body.ie-on .bl2 .reveal { opacity: 1 !important; transform: none !important; }

/* ---------- blog home: the search box sits in a real search form (looks as before) ---------- */
.bl2 .blogsearch { margin: 0; display: flex; }
.bl2 .blogsearch .search { flex: 1 1 auto; }
@media (max-width: 560px) { .bl2 .blogsearch { width: 100%; } .bl2 .blogsearch .search { min-width: 0; width: 100%; } }

/* ---------- 3) block posts (v2) in today's story look ---------- */
/* "This story is in English." under the meta row on FI/SV pages */
.bl2 .bl-inen { margin: 0 0 12px; font-size: .92rem; color: var(--bl2-ink-soft); }
/* a caption under a picture (split, wide, grid); the lightbox shows it too */
.bl2 .sc__fig { margin: 0; }
.bl2 .sc__cap { margin-top: 12px; text-align: center; font-size: .92rem; line-height: 1.5; color: inherit; opacity: .9; }
/* the wide picture: under the text, centred, whole, no tilt */
.bl2 .sc__wide { max-width: 1000px; }
.bl2 .sc__wide a.pic { display: flex; justify-content: center; }
.bl2 .sc__wide a.pic img { width: auto; max-width: 100%; max-height: 80vh; object-fit: contain; background: var(--bl2-frame); border-radius: 10px; border: 6px solid var(--bl2-frame); box-shadow: var(--sh-lift); }
/* text and pictures that fell back to English on a FI/SV page keep the same look */
.bl2 .sc blockquote footer { margin-top: 8px; font: 600 .95rem var(--body); font-style: normal; text-align: right; }
.bl2 .sc__text h3, .bl2 .sc__lead h3, .bl2 .sc__note h3 { margin: 1.2em 0 .4em; }
/* "Skip the pictures" (strips and grids with 12+ pictures): visible when it has keyboard focus */
.bl2 .bl-skip { display: inline-block; margin: 0 0 10px 20px; padding: 8px 14px; border-radius: 999px; background: var(--bl2-frame); color: var(--bl2-link); font-weight: 600; text-decoration: underline; box-shadow: var(--sh-card); }
.bl2 .bl-skip:not(:focus) { position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.bl2 .bl-skip:focus { outline: 3px solid var(--bl2-focus); outline-offset: 2px; }
/* own-block scenes (buttons, products, link card, newsletter, divider): a centred column */
.bl2 .sc__block { max-width: 760px; }
.bl2 .sc__block > h2 { margin-top: 0; }
.bl2 .sc--block .evprods { margin-top: 8px; }
.bl2 .sc--block .wrap.evtp { max-width: 1200px; }
.bl2 .sc--divider { padding: 0; }
.bl2 .bl-div { display: block; width: 46px; height: 32px; margin: 34px auto; background: var(--bl2-end-mark); -webkit-mask: url('../img/brand/jww-mark-white.png') center / contain no-repeat; mask: url('../img/brand/jww-mark-white.png') center / contain no-repeat; }
/* the video under a scene uses the shared Video block (events.css .evvid), as wide as today's frame */
.bl2 .sc__video .evvid { max-width: 900px; }
.bl2 .sc__video .evj__note { margin: 10px 0 0; font-size: .9rem; }
/* link card: a link to another website without its scripts */
.bl2 .blcard { display: grid; grid-template-columns: 1fr; gap: 6px; max-width: 560px; margin: 0 auto; padding: 18px 20px; border: 1px solid var(--bl2-line); border-radius: 16px; background: var(--bl2-frame); color: var(--bl2-ink); text-decoration: none; box-shadow: var(--sh-card); transition: transform .15s, box-shadow .15s; }
.bl2 .blcard--pic { grid-template-columns: 96px 1fr; column-gap: 16px; align-items: center; }
.bl2 .blcard__pic { grid-row: span 3; width: 96px; height: 96px; display: grid; place-items: center; background: var(--bl2-frame); }
.bl2 .blcard__pic img { max-width: 96px; max-height: 96px; width: auto; height: auto; object-fit: contain; }
.bl2 .blcard__dom { font-size: .85rem; color: var(--bl2-ink-soft); }
.bl2 .blcard__title { font: 600 1.15rem/1.3 var(--display); color: var(--bl2-heading); }
.bl2 .blcard__text { color: var(--bl2-ink-soft); font-size: .98rem; }
.bl2 .blcard:hover { transform: translateY(-3px); box-shadow: var(--sh-lift); }
.bl2 .blcard:focus-visible { outline: 3px solid var(--bl2-focus-on-page); outline-offset: 3px; }
/* the newsletter block (the shop's own sign-up box) */
.bl2 .bl-nl { max-width: 640px; }
.bl2 .bl-nl__kick { margin: 0 0 10px; text-align: center; font: 600 1.15rem var(--display); }
/* grid gallery: the events Photos grid (events.css .evphotos), links open today's lightbox */
.bl2 .sc--grid .evphotos { margin-top: 6px; }
.bl2 .sc--grid .evph__frame { cursor: zoom-in; }
.bl2 .sc--grid .evph figcaption { text-align: center; }
/* a gallery's own short line above the pictures (new posts) */
.bl2 .sc__line { margin: 0 0 12px; }
@media (max-width: 820px) {
  .bl2 .bl-skip { margin-left: 12px; }
  .bl2 .blcard--pic { grid-template-columns: 72px 1fr; }
  .bl2 .blcard__pic, .bl2 .blcard__pic img { width: 72px; height: 72px; max-width: 72px; max-height: 72px; }
}

/* ---------- Edit mode on the blog (jbl-editmode, editors only; public/js/inline-posts.js). In the page flow, never sticky. ---------- */
.bl2 .ie-band { margin: 0; padding: 12px 16px; background: repeating-linear-gradient(-45deg, #F3EBDD 0 14px, #EFE4D2 14px 28px); border-bottom: 1px solid #e0d3bd; color: #3b3326; font: 500 15px/1.45 system-ui, sans-serif; }
.bl2 .ie-band[hidden] { display: none; }
.bl2 .ie-band__msg { max-width: var(--wrap, 1180px); margin: 0 auto 6px; }
.bl2 .ie-band__row { max-width: var(--wrap, 1180px); margin: 0 auto; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.bl2 .ie-band__row:empty { display: none; }
.bl2 .ie-band a, .bl2 .ie-band button { min-height: 40px; display: inline-flex; align-items: center; padding: 6px 14px; border-radius: 999px; border: 1px solid #c0392b; background: #fff; color: #c0392b; font: 700 14px/1 system-ui, sans-serif; text-decoration: none; cursor: pointer; }
.bl2 .ie-band .ie-band__go { background: #c0392b; color: #fff; }
.bl2 .ie-band a:focus-visible, .bl2 .ie-band button:focus-visible { outline: 3px solid #c0392b; outline-offset: 2px; }
.bl2 .ie-posttool { max-width: var(--wrap, 1180px); margin: 8px auto 0; }
.bl2 .ie-scene { max-width: var(--wrap, 1180px); margin: 0 auto 10px; padding: 6px 12px; border-radius: 8px; background: #F3EBDD; color: #5E5646; font: 600 13px/1.3 system-ui, sans-serif; }
.bl2 .ie-pick { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.bl2 .ie-pick__l { font-weight: 500; font-size: 13px; color: #5E5646; margin: 0 2px 0 6px; }
.bl2 .ie-pick button[aria-pressed="true"] { background: #c0392b; color: #fff; border-color: #c0392b; }
.bl2 .sc__two > .ie-addrow, .bl2 .sc__two > .ie-strip { grid-column: 1 / -1; }
.bl2 h2 > .ie-btool, .bl2 h3 > .ie-btool, .bl2 p > .ie-btool, .bl2 blockquote > .ie-btool, .bl2 ul > .ie-btool, .bl2 ol > .ie-btool { font: 600 14px/1.2 system-ui, sans-serif; letter-spacing: 0; text-transform: none; text-align: left; }