/* KROSSA Journal — Dark Ice editorial system, intentionally distinct from VELO. */
.krossa-journal,
.krossa-story {
  overflow: clip;
  background: #edf0f1;
}

.krossa-journal__masthead {
  position: relative;
  min-height: clamp(350px, 38vw, 540px);
  display: flex;
  align-items: end;
  overflow: hidden;
  color: #fff;
  background: #080c10 url("../images/editorial-science.webp") 75% 50% / cover no-repeat;
}
.krossa-journal__masthead::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(4, 7, 10, .95), rgba(4, 7, 10, .78) 47%, rgba(4, 7, 10, .12));
}
.krossa-journal__masthead .krossa-shell {
  position: relative;
  z-index: 1;
  padding-block: 70px 74px;
}
.krossa-journal__masthead h1,
.krossa-story__hero h1,
.krossa-story__products h2,
.krossa-story__related h2 {
  margin: 0;
  font: 800 clamp(68px, 9.2vw, 154px)/.84 "Krossa Condensed", Impact, sans-serif;
  letter-spacing: -.037em;
  text-transform: uppercase;
}
.krossa-journal__masthead h1 span { color: #ff1836; }
.krossa-journal__masthead .krossa-shell > p:last-child {
  max-width: 560px;
  margin: 30px 0 0;
  color: #d9dfe2;
  font-size: clamp(16px, 1.45vw, 20px);
}
.krossa-journal__body { padding-block: 40px 110px; }
.krossa-journal__filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-bottom: 34px;
  border-bottom: 1px solid #bdc3c5;
}
.krossa-journal__filters a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 8px 15px;
  border: 1px solid #bfc5c7;
  color: #22282b;
  background: transparent;
  font: 700 14px/1 "Krossa Condensed", sans-serif;
  letter-spacing: .04em;
  text-transform: uppercase;
  transition: background .2s, border-color .2s, color .2s;
}
.krossa-journal__filters a:hover,
.krossa-journal__filters a:focus-visible,
.krossa-journal__filters a[aria-current="page"] {
  border-color: #101417;
  color: #fff;
  background: #101417;
}
.krossa-journal__heading-row {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
  margin: 34px 0 24px;
}
.krossa-journal__heading-row h2 {
  margin: 0;
  font: 800 clamp(38px, 4vw, 62px)/.94 "Krossa Condensed", sans-serif;
  text-transform: uppercase;
}
.krossa-journal__heading-row p {
  margin: 0 0 4px;
  color: #626a6e;
  font: 700 14px "Krossa Condensed", sans-serif;
  text-transform: uppercase;
}
.krossa-journal__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}
.krossa-journal-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: #fff;
  border: 1px solid #d8dfe1;
  transition: transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s;
}
.krossa-journal-card:hover,
.krossa-journal-card:focus-within {
  transform: translateY(-5px);
  box-shadow: 0 20px 42px rgba(4, 13, 19, .12);
}
.krossa-journal-card__image {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 1.31;
  background: #101419;
}
.krossa-journal-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .55s cubic-bezier(.16,1,.3,1);
}
.krossa-journal-card:hover img { transform: scale(1.045); }
.krossa-journal-card__index {
  position: absolute;
  right: 16px;
  bottom: 16px;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  color: #fff;
  background: #ff1836;
  font-size: 24px;
}
.krossa-journal-card__content {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: clamp(19px, 2.2vw, 32px);
}
.krossa-journal-card__eyebrow {
  margin: 0 0 16px;
  color: #d40025;
  font: 700 13px "Krossa Condensed", sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.krossa-journal-card__eyebrow span { color: #9aa1a4; padding-inline: 5px; }
.krossa-journal-card h3 {
  margin: 0;
  font: 800 clamp(27px, 2.3vw, 39px)/.95 "Krossa Condensed", sans-serif;
  text-transform: uppercase;
}
.krossa-journal-card__content > p:not(.krossa-journal-card__eyebrow) {
  margin: 17px 0 24px;
  color: #4c575c;
  font-size: 15px;
  line-height: 1.5;
}
.krossa-journal-card__read {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  margin-top: auto;
  padding-top: 15px;
  border-top: 1px solid #dce1e3;
  color: #11171a;
  font: 700 15px "Krossa Condensed", sans-serif;
  text-transform: uppercase;
}
.krossa-journal-card__read span { color: #e40028; font-size: 24px; line-height: .8; }
.krossa-journal__pagination { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 38px; }
.krossa-journal__pagination .page-numbers {
  min-width: 42px;
  min-height: 42px;
  display: inline-grid;
  place-items: center;
  padding: 8px 12px;
  border: 1px solid #aeb6b9;
  font: 700 15px "Krossa Condensed", sans-serif;
}
.krossa-journal__pagination .page-numbers:hover,
.krossa-journal__pagination .page-numbers.current { color: #fff; border-color: #111719; background: #111719; }
.krossa-journal__empty { padding: 50px 0; color: #455055; }
.krossa-journal__empty a { text-decoration: underline; text-underline-offset: 4px; }

/* Article hero: a visual cover and an honest reading promise. */
.krossa-story__hero { color: #fff; background: #090c0f; }
.krossa-story__hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .96fr);
  min-height: min(680px, 68vw);
}
.krossa-story__hero-copy {
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: center;
  padding: 72px clamp(30px, 5vw, 80px) 72px 0;
}
.krossa-story__hero .krossa-kicker { margin-bottom: 26px; }
.krossa-story__hero .krossa-kicker a:hover { text-decoration: underline; }
.krossa-story__hero .krossa-kicker span { color: #6a7278; padding-inline: 7px; }
.krossa-story__hero h1 { font-size: clamp(65px, 7.5vw, 126px); overflow-wrap: anywhere; }
.krossa-story__dek { max-width: 540px; margin: 26px 0 0; color: #d0d8dc; font-size: clamp(17px, 1.5vw, 21px); line-height: 1.45; }
.krossa-story__meta { display: flex; flex-wrap: wrap; gap: 22px; margin: 28px 0 0; color: #b8c2c6; font: 700 13px "Krossa Condensed", sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.krossa-story__meta span + span::before { content: "/"; color: #ff1836; margin-right: 22px; }
.krossa-story__jump { display: inline-flex; align-items: center; gap: 28px; margin-top: 35px; padding: 13px 0; border-bottom: 2px solid #ff1836; font: 700 16px "Krossa Condensed", sans-serif; text-transform: uppercase; }
.krossa-story__jump span { color: #ff1836; font-size: 24px; }
.krossa-story__cover { position: relative; align-self: stretch; min-height: 420px; margin: 0; overflow: hidden; background: #151c21; }
.krossa-story__cover img { width: 100%; height: 100%; object-fit: cover; }
.krossa-story__cover::after { content: ""; position: absolute; inset: auto 0 0; height: 30%; background: linear-gradient(transparent, rgba(0,0,0,.54)); pointer-events: none; }
.krossa-story__cover figcaption { position: absolute; z-index: 1; bottom: 22px; left: 25px; color: #fff; font: 700 13px "Krossa Condensed", sans-serif; letter-spacing: .14em; }
.krossa-story__body { display: grid; grid-template-columns: minmax(180px, 240px) minmax(0, 1fr); gap: clamp(32px, 5vw, 90px); padding-top: 64px; padding-bottom: 90px; }
.krossa-story__chapters { position: sticky; top: 132px; align-self: start; display: grid; gap: 0; border-top: 3px solid #ff1836; }
.krossa-story__chapters > span { padding: 18px 0 16px; color: #7c868a; font: 700 13px "Krossa Condensed", sans-serif; letter-spacing: .14em; }
.krossa-story__chapters a { display: flex; gap: 12px; padding: 12px 0; border-top: 1px solid #cad1d4; color: #232b2e; font: 700 16px/1.18 "Krossa Condensed", sans-serif; text-transform: uppercase; }
.krossa-story__chapters a:hover,
.krossa-story__chapters a:focus-visible { color: #d90020; }
.krossa-story__chapters a b { color: #d90020; }
.krossa-story__main { min-width: 0; }
.krossa-story__slides { display: grid; gap: 28px; }
.krossa-story-slide {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .9fr);
  min-height: clamp(360px, 35vw, 500px);
  overflow: hidden;
  scroll-margin-top: 120px;
  color: #fff;
  background: #11181c;
}
.krossa-story-slide:nth-of-type(even) { grid-template-columns: minmax(0, .9fr) minmax(0, 1fr); }
.krossa-story-slide:nth-of-type(even) .krossa-story-slide__copy { order: 2; }
.krossa-story-slide:nth-of-type(even) .krossa-story-slide__visual { order: 1; }
.krossa-story-slide__copy { display: flex; flex-direction: column; align-items: start; justify-content: center; padding: clamp(27px, 3.5vw, 60px); }
.krossa-story-slide__number { margin: 0 0 auto; color: #ff5066; font: 700 13px "Krossa Condensed", sans-serif; letter-spacing: .12em; }
.krossa-story-slide h2 { max-width: 11ch; margin: 22px 0 20px; font: 800 clamp(39px, 4.1vw, 72px)/.9 "Krossa Condensed", sans-serif; letter-spacing: -.025em; text-transform: uppercase; overflow-wrap: anywhere; }
.krossa-story-slide__copy > p:not(.krossa-story-slide__number, .krossa-story-slide__takeaway) { max-width: 46ch; margin: 0 0 22px; color: #c9d3d7; font-size: clamp(15px, 1.13vw, 18px); line-height: 1.48; }
.krossa-story-slide__takeaway { display: flex; gap: 11px; margin: auto 0 0; padding-top: 17px; border-top: 1px solid rgba(255,255,255,.21); color: #fff; font: 700 clamp(16px, 1.3vw, 21px)/1.2 "Krossa Condensed", sans-serif; text-transform: uppercase; }
.krossa-story-slide__takeaway span { color: #ff1836; font-size: 22px; }
.krossa-story-slide__visual { position: relative; min-height: 360px; margin: 0; overflow: hidden; background: #1d3036; }
.krossa-story-slide__visual img { width: 100%; height: 100%; object-fit: cover; }
.krossa-story-slide__visual figcaption { position: absolute; right: 18px; bottom: 18px; left: 18px; max-width: 48ch; padding: 8px 10px; color: #fff; background: rgba(4,8,11,.74); font: 700 12px "Krossa Condensed", sans-serif; letter-spacing: .025em; }
.krossa-story-slide--2 { background: #1a2227; }
.krossa-story-slide--3 { background: #17303a; }
.krossa-story-slide--4 { background: #231b22; }
.krossa-story-slide--2 .krossa-story-slide__number { color: #7bd5eb; }
.krossa-story-slide--3 .krossa-story-slide__number { color: #a2e9d1; }
.krossa-story-slide--4 .krossa-story-slide__number { color: #ff9da9; }
.krossa-story-fact { display: grid; grid-template-columns: minmax(135px, .35fr) 1fr; gap: 20px; padding: 27px 32px; border-left: 4px solid #e40028; background: #fff; }
.krossa-story-fact__eyebrow { margin: 0; color: #d90020; font: 800 18px "Krossa Condensed", sans-serif; letter-spacing: .07em; }
.krossa-story-fact ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 24px; padding: 0; margin: 0; list-style: none; }
.krossa-story-fact li { position: relative; padding-left: 15px; color: #263035; font-size: 14px; }
.krossa-story-fact li::before { content: "•"; position: absolute; left: 0; color: #d90020; }
.krossa-story-warning { display: grid; grid-template-columns: minmax(180px, .4fr) 1fr; gap: 16px; margin-top: 28px; padding: 23px 28px; color: #e8f1f3; background: #0d161b; border-top: 3px solid #ff1836; }
.krossa-story-warning strong { font: 800 22px/1 "Krossa Condensed", sans-serif; text-transform: uppercase; }
.krossa-story-warning span { font-size: 14px; line-height: 1.4; }
.krossa-story__sources { margin-top: 42px; padding-top: 27px; border-top: 1px solid #b9c2c5; scroll-margin-top: 120px; }
.krossa-story__sources h2 { margin: 0 0 14px; font: 800 36px/.95 "Krossa Condensed", sans-serif; text-transform: uppercase; }
.krossa-story__sources p { max-width: 70ch; margin: 0 0 12px; color: #536065; font-size: 14px; }
.krossa-story__sources ul { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 15px 0; padding: 0; }
.krossa-story__sources li a { display: inline-flex; gap: 16px; padding: 8px 12px; border: 1px solid #adb9bd; color: #202b2f; background: #fff; font: 700 13px "Krossa Condensed", sans-serif; }
.krossa-story__sources li a:hover { border-color: #e40028; }
.krossa-story__sources li span { color: #d90020; }
.krossa-story__review-note { margin-top: 15px !important; color: #667175 !important; font-size: 12px !important; }
.krossa-story__products { padding: clamp(45px, 5vw, 85px) 0; color: #fff; background: #10171c; }
.krossa-story__products h2,
.krossa-story__related h2 { font-size: clamp(55px, 5.8vw, 94px); }
.krossa-story__product-links,
.krossa-story__related > div { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 28px; }
.krossa-story__product-links a,
.krossa-story__related > div a { display: flex; min-height: 90px; align-items: end; justify-content: space-between; gap: 15px; padding: 19px 22px; border: 1px solid rgba(255,255,255,.3); font: 800 24px/.95 "Krossa Condensed", sans-serif; text-transform: uppercase; transition: background .2s, border-color .2s; }
.krossa-story__product-links a:hover,
.krossa-story__product-links a:focus-visible { border-color: #ff1836; background: #ff1836; }
.krossa-story__product-links a span,
.krossa-story__related > div a span { font-size: 25px; }
.krossa-story__related { padding-block: clamp(50px, 6vw, 95px); }
.krossa-story__related > div a { border-color: #aeb9bd; color: #172026; background: #fff; }
.krossa-story__related > div a:hover,
.krossa-story__related > div a:focus-visible { border-color: #ff1836; }
.krossa-story__related > div a span { color: #e40028; }
.krossa-article-shell { max-width: 980px; padding-block: 75px 110px; }
.krossa-article-header h1 { font: 800 clamp(65px, 8vw, 120px)/.85 "Krossa Condensed", sans-serif; text-transform: uppercase; }
.krossa-article-featured img { width: 100%; }
.krossa-prose .entry-content { max-width: 70ch; margin-top: 30px; }

@media (max-width: 1100px) {
  .krossa-journal__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .krossa-story__body { grid-template-columns: 170px minmax(0, 1fr); gap: 30px; }
  .krossa-story-slide { grid-template-columns: 1fr; }
  .krossa-story-slide:nth-of-type(even) { grid-template-columns: 1fr; }
  .krossa-story-slide:nth-of-type(even) .krossa-story-slide__copy { order: 0; }
  .krossa-story-slide:nth-of-type(even) .krossa-story-slide__visual { order: 0; }
  .krossa-story-slide__copy { min-height: 300px; }
  .krossa-story-slide__visual { height: 340px; min-height: 0; }
}
@media (max-width: 760px) {
  .krossa-journal__masthead { min-height: 400px; background-position: 66% 50%; }
  .krossa-journal__masthead::after { background: linear-gradient(90deg, rgba(4,7,10,.94), rgba(4,7,10,.45)); }
  .krossa-journal__masthead .krossa-shell { padding-block: 58px; }
  .krossa-journal__masthead h1 { font-size: clamp(66px, 16vw, 104px); }
  .krossa-journal__body { padding-block: 24px 70px; }
  .krossa-journal__filters { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 19px; scrollbar-width: thin; }
  .krossa-journal__filters a { white-space: nowrap; }
  .krossa-journal__heading-row { display: block; }
  .krossa-journal__heading-row p { margin-top: 8px; }
  .krossa-journal__grid { grid-template-columns: 1fr; gap: 15px; }
  .krossa-journal-card__image { aspect-ratio: 1.45; }
  .krossa-story__hero-grid { grid-template-columns: 1fr; }
  .krossa-story__hero-copy { padding: 50px 0 43px; }
  .krossa-story__hero h1 { font-size: clamp(59px, 15vw, 90px); }
  .krossa-story__cover { min-height: 260px; max-height: 440px; aspect-ratio: 1.35; }
  .krossa-story__body { display: block; padding-block: 25px 65px; }
  .krossa-story__chapters { position: static; display: flex; gap: 8px; overflow-x: auto; margin-bottom: 20px; border-top: 0; }
  .krossa-story__chapters > span { display: none; }
  .krossa-story__chapters a { flex: 0 0 auto; max-width: 180px; gap: 8px; min-height: 46px; align-items: center; padding: 6px 12px; border: 1px solid #bbc4c8; font-size: 13px; }
  .krossa-story__slides { gap: 18px; }
  .krossa-story-slide__copy { min-height: 335px; padding: 26px; }
  .krossa-story-slide h2 { font-size: clamp(42px, 12vw, 61px); }
  .krossa-story-slide__visual { height: 275px; }
  .krossa-story-fact,
  .krossa-story-warning { grid-template-columns: 1fr; padding: 22px; }
  .krossa-story-fact ul { grid-template-columns: 1fr; }
  .krossa-story__product-links,
  .krossa-story__related > div { grid-template-columns: 1fr; }
  .krossa-story__product-links a,
  .krossa-story__related > div a { min-height: 68px; }
}
@media (prefers-reduced-motion: reduce) {
  .krossa-journal-card,
  .krossa-journal-card__image img,
  .krossa-journal__filters a { transition: none; }
  .krossa-journal-card:hover { transform: none; }
}
