/* ============================================================
   PAN WEB 4.0 RC21 — CLEAN MEDIA LOADING + COMPACT JOURNAL
   Dynamic media stays neutral until the real file is ready.
   ============================================================ */

/* Neutral loading state: never expose bundled demo artwork first. */
[data-pan-image-slot]:not(.pan-media-ready),
.pan-media-loading:not(img),
.pan-media-error:not(img),
.pan-media-empty,
.project-image:not(.pan-media-ready){
  background-image:none!important;
  background-color:#e5e4df!important;
}
.hero-visual,
.journal-card-image,
.journal-hero-media,
.case-card,
.pd-image,
.pd-gallery-item,
.product-image-gallery figure,
.sg-hero-visual,
.sg-purpose-visual,
.sg-panorama-visual{
  background-color:#e5e4df!important;
}
img.pan-media-loading{
  opacity:0!important;
}
img.pan-media-ready{
  opacity:1!important;
  transition:opacity .28s ease!important;
}
img.pan-media-error{
  display:none!important;
}

/* Journal index: every item uses the same compact card system. */
.news-page{
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  padding:0!important;
  background:#f4f3ef!important;
}
.journal-index-head{
  width:min(1180px,100%)!important;
  max-width:1180px!important;
  min-height:0!important;
  margin:0 auto!important;
  padding:52px 24px 30px!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) minmax(280px,380px)!important;
  gap:56px!important;
  align-items:end!important;
  border:0!important;
  border-bottom:1px solid #d8d7d2!important;
}
.journal-index-head>div:first-child{padding:0!important}
.journal-index-head .eyebrow{margin:0 0 10px!important}
.journal-index-head .news-title{
  margin:0!important;
  font-size:clamp(40px,4.3vw,58px)!important;
  line-height:1!important;
  letter-spacing:-.04em!important;
  font-weight:360!important;
}
.journal-index-intro{
  max-width:380px!important;
  margin:0!important;
  font-size:13px!important;
  line-height:1.75!important;
  color:#6b6b67!important;
}
.news-list{
  width:min(1180px,100%)!important;
  max-width:1180px!important;
  margin:0 auto!important;
  padding:24px 24px 80px!important;
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:16px!important;
  border:0!important;
}
.journal-card,
.journal-card-featured,
.news-list .journal-card:not(.journal-card-featured),
.journal-card.no-cover{
  width:auto!important;
  min-width:0!important;
  min-height:0!important;
  grid-column:auto!important;
  display:grid!important;
  grid-template-columns:1fr!important;
  grid-template-rows:auto 1fr!important;
  gap:0!important;
  padding:0!important;
  color:#111!important;
  background:#f8f7f4!important;
  border:1px solid #d9d8d3!important;
  border-radius:0!important;
  overflow:hidden!important;
}
.journal-card-image,
.journal-card-featured .journal-card-image,
.news-list .journal-card:not(.journal-card-featured) .journal-card-image{
  width:100%!important;
  min-height:0!important;
  aspect-ratio:16/10!important;
  border:0!important;
  border-bottom:1px solid #d9d8d3!important;
  overflow:hidden!important;
  background:#e5e4df!important;
}
.journal-card-image img,
.journal-card-featured .journal-card-image img{
  width:100%!important;
  height:100%!important;
  display:block!important;
  object-fit:contain!important;
  transform:none!important;
}
.journal-card-placeholder{
  display:flex!important;
  align-items:flex-end!important;
  padding:22px!important;
  background:linear-gradient(145deg,#e8e7e2,#dcdad4)!important;
}
.journal-card-placeholder span{
  font-size:10px;
  line-height:1.55;
  letter-spacing:.2em;
  color:#777;
}
.journal-card-meta,
.journal-card-featured .journal-card-meta,
.news-list .journal-card:not(.journal-card-featured) .journal-card-meta,
.journal-card.no-cover .journal-card-meta{
  grid-column:auto!important;
  min-height:168px!important;
  padding:20px 22px 22px!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:flex-start!important;
  background:#f8f7f4!important;
}
.journal-card-kicker,
.journal-card-featured .journal-card-kicker,
.journal-card.no-cover .journal-card-kicker{
  position:static!important;
  display:flex!important;
  justify-content:space-between!important;
  gap:18px!important;
  margin:0!important;
  font-size:9px!important;
  line-height:1.4!important;
  letter-spacing:.14em!important;
  color:#777!important;
}
.journal-card-meta h2,
.journal-card-featured h2,
.journal-card.no-cover h2{
  grid-column:auto!important;
  max-width:none!important;
  margin:16px 0 0!important;
  font-size:clamp(19px,1.7vw,25px)!important;
  line-height:1.28!important;
  letter-spacing:-.02em!important;
  font-weight:430!important;
  display:-webkit-box!important;
  -webkit-box-orient:vertical!important;
  -webkit-line-clamp:3!important;
  overflow:hidden!important;
}
.journal-card-meta p,
.journal-card-featured p,
.journal-card.no-cover p{
  display:none!important;
}
.journal-card-meta i,
.journal-card-featured i,
.journal-card.no-cover i{
  grid-column:auto!important;
  margin:auto 0 0!important;
  padding-top:20px!important;
  font-size:10px!important;
  font-style:normal!important;
  color:#555!important;
}
.journal-empty,
.journal-loading{
  width:min(1180px,100%);
  margin:0 auto;
  padding:70px 24px 90px;
}
.journal-loading h1{font-size:32px;font-weight:400}

/* Journal detail: one shared desktop grid for title, summary, image and body. */
.journal-detail{
  width:100%!important;
  padding-top:0!important;
  background:#f4f3ef!important;
}
.journal-article,
.journal-article.has-cover,
.journal-article.no-cover{
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  padding:0!important;
  background:#f4f3ef!important;
}
.journal-detail-hero,
.journal-article.has-cover .journal-detail-hero,
.journal-article.no-cover .journal-detail-hero{
  width:min(1260px,calc(100% - 96px))!important;
  max-width:1260px!important;
  min-height:0!important;
  height:auto!important;
  margin:0 auto!important;
  padding:54px 0 32px!important;
  display:block!important;
  border:0!important;
  background:transparent!important;
}
.journal-head,
.journal-article.has-cover .journal-head,
.journal-article.no-cover .journal-head{
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  padding:0!important;
  display:block!important;
  border:0!important;
}
.journal-detail-meta{
  display:flex;
  align-items:center;
  gap:18px;
  margin-bottom:18px;
  font-size:10px;
  line-height:1.4;
  letter-spacing:.16em;
  color:#777;
}
.journal-detail-meta time{letter-spacing:.08em}
.journal-head h1,
.journal-article.has-cover .journal-head h1,
.journal-article.no-cover .journal-head h1{
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  font-size:clamp(34px,3.25vw,48px)!important;
  line-height:1.16!important;
  letter-spacing:-.03em!important;
  font-weight:400!important;
  text-wrap:balance;
}
.journal-deck,
.journal-article.has-cover .journal-deck,
.journal-article.no-cover .journal-deck{
  width:100%!important;
  max-width:none!important;
  margin:26px 0 0!important;
  padding:22px 0 0!important;
  border:0!important;
  border-top:1px solid #d8d7d2!important;
  font-size:16px!important;
  line-height:1.85!important;
  color:#555!important;
}
.journal-hero-media,
.journal-article.has-cover .journal-hero-media{
  width:min(1260px,calc(100% - 96px))!important;
  max-width:1260px!important;
  min-height:0!important;
  max-height:none!important;
  aspect-ratio:auto!important;
  margin:0 auto!important;
  padding:0!important;
  display:block!important;
  border:1px solid #d9d8d3!important;
  background:#e5e4df!important;
  overflow:hidden!important;
}
.journal-cover,
.journal-article.has-cover .journal-cover{
  width:100%!important;
  height:auto!important;
  max-width:none!important;
  max-height:none!important;
  margin:0!important;
  display:block!important;
  object-fit:contain!important;
}
.journal-story,
.journal-article.no-cover .journal-story{
  width:min(1260px,calc(100% - 96px))!important;
  max-width:1260px!important;
  margin:0 auto!important;
  padding:46px 0 96px!important;
  display:block!important;
  border:0!important;
}
.journal-story aside{display:none!important}
.journal-body{
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  font-size:16.5px!important;
  line-height:1.95!important;
  color:#333!important;
}
.journal-body p{
  margin:0 0 20px!important;
  break-inside:avoid;
}
.journal-body h2{
  margin:4px 0 24px!important;
  padding-top:18px!important;
  border-top:1px solid #aaa!important;
  font-size:18px!important;
  line-height:1.45!important;
  letter-spacing:.04em!important;
  font-weight:520!important;
  break-after:avoid;
  break-inside:avoid;
}
.journal-body h3{
  margin:26px 0 12px!important;
  font-size:17px!important;
  line-height:1.5!important;
  font-weight:520!important;
  break-after:avoid;
  break-inside:avoid;
}
.journal-body .journal-fact{
  margin:0 0 24px!important;
  padding:14px 16px!important;
  border-left:2px solid #b88a48!important;
  background:#ebe9e3!important;
  color:#555!important;
}

@media(max-width:760px){
  .journal-index-head{
    padding:36px 18px 24px!important;
    display:block!important;
  }
  .journal-index-head .news-title{font-size:38px!important}
  .journal-index-intro{margin-top:18px!important;font-size:12px!important}
  .news-list{
    padding:16px 18px 56px!important;
    grid-template-columns:1fr!important;
    gap:14px!important;
  }
  .journal-card-meta,
  .journal-card-featured .journal-card-meta,
  .journal-card.no-cover .journal-card-meta{
    min-height:142px!important;
    padding:17px 18px 19px!important;
  }
  .journal-card-meta h2,
  .journal-card-featured h2,
  .journal-card.no-cover h2{
    font-size:20px!important;
    line-height:1.28!important;
    margin-top:13px!important;
  }
  .journal-detail-hero,
  .journal-article.has-cover .journal-detail-hero,
  .journal-article.no-cover .journal-detail-hero{
    width:calc(100% - 36px)!important;
    padding:36px 0 24px!important;
  }
  .journal-head,
  .journal-article.has-cover .journal-head,
  .journal-article.no-cover .journal-head{padding:0!important}
  .journal-head h1,
  .journal-article.has-cover .journal-head h1,
  .journal-article.no-cover .journal-head h1{
    font-size:30px!important;
    line-height:1.15!important;
  }
  .journal-deck,
  .journal-article.has-cover .journal-deck,
  .journal-article.no-cover .journal-deck{
    margin-top:17px!important;
    font-size:14px!important;
    line-height:1.72!important;
  }
  .journal-hero-media,
  .journal-article.has-cover .journal-hero-media{
    width:calc(100% - 36px)!important;
  }
  .journal-story,
  .journal-article.no-cover .journal-story{
    width:calc(100% - 36px)!important;
    padding:30px 0 58px!important;
  }
  .journal-body{font-size:15px!important;line-height:1.86!important}
}