/*!********************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[10].use[3]!./src/components/blog/blog-cards.css ***!
  \********************************************************************************************************************************************************************************************************************************************************************************/
/*
 * The blog index's cards (design/landing-v2/Blog Redesign.dc.html, the
 * `isIndex` branch). Layout is inline-styled from the design's own px values,
 * the same way the landing sections are; this file carries only what an
 * inline style cannot express - hover states, the teaser clamp, and the
 * pillar card's narrow-screen behaviour.
 *
 * The selectors are `.landing-v2 a.lp-…` on purpose: landing-v2.css colours
 * every `.landing-v2 a` with the link brown, and a bare class would lose to
 * it. A card is one big link, so its inner text has to stay ink-coloured.
 */

.landing-v2 a.lp-blog-card,
.landing-v2 a.lp-blog-card:hover,
.landing-v2 a.lp-blog-pillar,
.landing-v2 a.lp-blog-pillar:hover {
  color: var(--lp-ink);
  text-decoration: none;
}

.landing-v2 a.lp-blog-card {
  transition:
    box-shadow 0.18s ease,
    border-color 0.18s ease;
}
.landing-v2 a.lp-blog-card:hover {
  box-shadow: 0 6px 18px rgba(53, 49, 42, 0.09);
  border-color: var(--lp-border-strong);
}

.landing-v2 a.lp-blog-pillar {
  box-shadow: 0 2px 12px rgba(53, 49, 42, 0.05);
  transition: box-shadow 0.18s ease;
}
.landing-v2 a.lp-blog-pillar:hover {
  box-shadow: 0 6px 22px rgba(53, 49, 42, 0.1);
}

/* Teasers come from the article's first paragraph, so their length varies a
 * lot more than the design's samples. Three lines keeps the grid's rows even
 * without touching the content. */
.lp-blog-card-teaser {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}

/* Pillar card: the 220px photo panel sits beside the text on desktop and
 * wraps underneath it, full width, when there is no room, rather than
 * squeezing the headline into a column. */
@media (max-width: 700px) {
  .lp-blog-pillar-panel {
    flex-grow: 1;
  }
  .lp-blog-pillar-body {
    padding: 28px 24px;
  }
}

/* The cream button on the gradient CTA band. Its colours are inline (they are
 * fixed against the gradient, not tokens), so this is only the lift on
 * hover. */
.landing-v2 a.lp-blog-cta-button {
  transition: box-shadow 0.15s ease;
}
.landing-v2 a.lp-blog-cta-button:hover {
  box-shadow: 0 6px 18px rgba(53, 49, 42, 0.22);
}

/*!***************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[10].use[3]!./src/app/[locale]/(landing)/landing-v2.css ***!
  \***************************************************************************************************************************************************************************************************************************************************************************************/
/*
 * Design tokens for the landing page redesign, from
 * design/landing-v2/README.md ("Design tokens"). Scoped under `.landing-v2`
 * so nothing leaks into the game or manage UIs, which have their own token
 * files.
 */
.landing-v2 {
  --lp-bg: #f6f2ea;
  --lp-surface: #fffdf9;
  --lp-border: #e5ded1;
  --lp-border-strong: #d8d0c0;
  --lp-border-warm: #e6ddcc;
  --lp-border-deep: #c9c2b4;
  --lp-ink: #35312a;
  --lp-ink-soft: #55503f;
  --lp-muted: #7d7565;
  --lp-muted-2: #8a8271;
  --lp-muted-3: #a39b88;
  --lp-pink: #b85c7e;
  --lp-pink-dark: #8d4d68;
  --lp-pink-tint: #f5e5eb;
  --lp-blue: #6b7fb0;
  --lp-blue-dark: #4d5d8d;
  --lp-blue-tint: #e8ecf5;
  --lp-link: #8a5a3b;
  --lp-link-hover: #6b4225;
  --lp-warm-tint: #f3ead9;
  --lp-stripe: repeating-linear-gradient(
    45deg,
    #efe8db,
    #efe8db 8px,
    #e6ddcc 8px,
    #e6ddcc 16px
  );
  --lp-cta-shadow: 0 4px 14px rgba(184, 92, 126, 0.35);

  background: var(--lp-bg);
  color: var(--lp-ink);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Helvetica,
    Arial, sans-serif;
}

.landing-v2 a {
  color: var(--lp-link);
}
.landing-v2 a:hover {
  color: var(--lp-link-hover);
}

/* Mono all-caps kicker/eyebrow. Capitalisation happens here, never in the
 * catalogue. */
.lp-kicker {
  font-family: ui-monospace, monospace;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* Hero: rising emoji particles behind the score bar. */
@keyframes lp-rise {
  0% {
    transform: translateY(0) scale(0.8);
    opacity: 0;
  }
  12% {
    opacity: 0.85;
  }
  45% {
    opacity: 0.4;
  }
  70% {
    opacity: 0;
  }
  100% {
    transform: translateY(-84px) scale(1.05);
    opacity: 0;
  }
}

/* Hero: mobile scoring-chips marquee. */
@keyframes lp-marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

/* The marketing headline voice, shared with the blog: the landing's own
 * headings set this inline; the blog reaches it as a class through
 * `components/blog/fonts.ts`. !important because call sites carry per-size
 * inline font-weights from the Playfair era - the voice wins on purpose. */
.lp-headline {
  font-family: inherit;
  font-weight: 800 !important;
  letter-spacing: -0.01em;
}