.opc-extension-page.is-opc-home .jc-story-entry-list {
  display: grid;
  gap: 16px;
  margin-top: 20px;
}

.opc-extension-page.is-opc-home .jc-story-entry {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 192px;
  overflow: hidden;
  border: 1px solid rgba(20, 58, 51, .13);
  border-radius: 18px;
  color: #fff;
  background: #123a32;
  box-shadow: 0 5px 18px rgba(20, 58, 51, .07);
  text-decoration: none;
  isolation: isolate;
  transition: transform .2s ease, box-shadow .2s ease;
}

.opc-extension-page.is-opc-home .jc-story-entry.is-aigc { background: #071e35; }
.opc-extension-page.is-opc-home .jc-story-entry:hover { transform: translateY(-2px); box-shadow: 0 9px 22px rgba(20, 58, 51, .1); }
.opc-extension-page.is-opc-home .jc-story-entry:focus-visible { outline: 3px solid #d5b471; outline-offset: 3px; }
.jc-story-entry > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; opacity: .8; filter: saturate(.58) contrast(.92) brightness(.82); }
.jc-story-entry.is-aigc > img { opacity: .76; filter: saturate(.47) contrast(.9) brightness(.8); }
.jc-story-entry::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(5, 27, 25, .94) 0%, rgba(5, 27, 25, .76) 36%, rgba(5, 27, 25, .34) 100%); }
.jc-story-entry.is-aigc::after { background: linear-gradient(90deg, rgba(3, 14, 30, .94) 0%, rgba(3, 14, 30, .78) 40%, rgba(3, 14, 30, .43) 100%); }
.jc-story-entry-content { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; width: min(690px, 68%); padding: 23px clamp(22px, 4vw, 58px); }
.jc-story-kicker { color: #d9bf8c; font-size: .73rem; font-weight: 700; letter-spacing: .18em; }
.jc-story-entry-content > strong { font-size: clamp(1.5rem, 2.45vw, 2.4rem); line-height: 1.15; letter-spacing: .015em; }
.jc-story-entry-summary { max-width: 550px; color: rgba(255, 255, 255, .86); font-size: .93rem; line-height: 1.55; }
.jc-story-entry-action { margin-top: 2px; border-bottom: 1px solid #e8c580; color: #f4dfb5; font-size: .84rem; font-weight: 700; }

.opc-extension-page:has(.jc-editorial-page) { min-height: 100vh; color: #1b2723; background: #f6f2e9; }
.opc-extension-page:has(.jc-editorial-page) .opc-extension-header { background: #143a33; border-bottom: 1px solid rgba(223, 195, 144, .25); }
.opc-extension-page .jc-editorial-page { max-width: 1328px; padding: 28px 24px 88px; }
.jc-article { overflow: hidden; border: 1px solid rgba(21, 59, 50, .1); border-radius: 22px; background: #fffdf8; box-shadow: 0 24px 65px rgba(23, 53, 43, .07); }
.jc-article-hero { position: relative; min-height: 440px; display: flex; align-items: center; overflow: hidden; color: #fff; background: #0b3933; isolation: isolate; }
.jc-editorial-aigc .jc-article-hero { background: #071d36; }
.jc-article-hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.jc-article-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(7, 34, 31, .93), rgba(7, 34, 31, .66) 40%, transparent 82%); z-index: -1; }
.jc-editorial-aigc .jc-article-hero::after { background: linear-gradient(90deg, rgba(3, 14, 31, .93), rgba(3, 14, 31, .73) 44%, transparent 90%); }
.jc-article-hero-content { width: min(690px, 70%); padding: clamp(32px, 6vw, 86px); }
.jc-article-hero h1 { margin: 18px 0 18px; color: #fff; font-size: clamp(2.55rem, 5.2vw, 5.3rem); line-height: 1.12; font-weight: 800; letter-spacing: -.035em; }
.jc-article-hero p { max-width: 520px; margin: 0; color: rgba(255, 255, 255, .9); font-size: clamp(1rem, 1.45vw, 1.25rem); line-height: 1.75; }
.jc-article-toc { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 30px; padding: 20px clamp(26px, 7vw, 112px); border-bottom: 1px solid #e7e1d5; background: #faf7ef; }
.jc-article-toc span { margin-right: auto; color: #9c752f; font-size: .75rem; font-weight: 800; letter-spacing: .12em; }
.jc-article-toc a { color: #34564b; font-size: .85rem; font-weight: 700; text-decoration: none; }
.jc-article-toc a:hover, .jc-article-toc a:focus-visible { text-decoration: underline; text-underline-offset: 4px; }
.jc-article-section { padding: clamp(50px, 7vw, 92px) clamp(28px, 10vw, 148px); }
.jc-article-section + .jc-article-section { border-top: 1px solid #ece6da; }
.jc-article-label { margin-bottom: 14px; color: #a47a32; font-size: .76rem; font-weight: 800; letter-spacing: .16em; }
.jc-article-section h2, .jc-article-footer h2 { max-width: 780px; margin: 0 0 28px; color: #173a33; font-size: clamp(2rem, 3.6vw, 3.45rem); line-height: 1.18; letter-spacing: -.025em; }
.jc-article-section h3 { margin: 42px 0 13px; color: #173a33; font-size: 1.38rem; }
.jc-article-section p, .jc-article-footer p { max-width: 760px; margin: 0 0 18px; color: #40534b; font-size: 1.05rem; line-height: 1.95; }
.jc-article-section .jc-article-lead { color: #263d34; font-size: clamp(1.17rem, 1.8vw, 1.4rem); line-height: 1.85; font-weight: 600; }
.jc-article-quote { max-width: 760px; margin: 40px 0; padding: 14px 0 14px 24px; border-left: 4px solid #c4a261; color: #215447; font-size: clamp(1.25rem, 2vw, 1.75rem); line-height: 1.6; font-weight: 700; }
.jc-article-wide { background: #f4f1e9; }
.jc-article-figure { margin: 36px calc(-1 * clamp(28px, 10vw, 148px)) 48px; }
.jc-article-figure img, .jc-article-closing-image img { display: block; width: 100%; height: auto; }
.jc-article-figure figcaption, .jc-article-closing-image figcaption { padding: 12px 28px; color: #5f7065; background: #ebe8dc; font-size: .86rem; line-height: 1.55; text-align: center; }
.jc-article-step-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 30px; }
.jc-article-step-grid > div { padding: 25px 22px; border-top: 3px solid #c6a66e; background: #fffdf8; }
.jc-article-step-grid b { display: block; margin-bottom: 11px; color: #16483b; font-size: 1.11rem; }
.jc-article-step-grid p { margin: 0; font-size: .91rem; line-height: 1.8; }
.jc-article-callout { max-width: 760px; margin: 35px 0; padding: 28px 32px; border: 1px solid #dccdad; border-radius: 14px; background: #f6f0e2; }
.jc-article-callout strong { display: block; margin-bottom: 9px; color: #815d25; font-size: 1.1rem; }
.jc-article-callout p { margin: 0; }
.jc-article-dark { background: #153a32; }
.jc-editorial-aigc .jc-article-dark { background: #0b2740; }
.jc-article-dark h2, .jc-article-dark .jc-article-label, .jc-article-dark p, .jc-article-dark .jc-article-myths strong { color: #fffdf7; }
.jc-article-dark .jc-article-label { color: #dfc188; }
.jc-article-dark > p { color: rgba(255, 253, 247, .78); }
.jc-article-myths { display: grid; gap: 15px; max-width: 780px; margin: 36px 0; }
.jc-article-myths p { margin: 0; padding: 21px 25px; border-left: 3px solid #d6ae65; background: rgba(255, 255, 255, .065); color: rgba(255, 253, 247, .83); }
.jc-article-closing-image { margin: 0; background: #173a32; }
.jc-article-closing-image img { max-height: 580px; object-fit: cover; }
.jc-article-closing-image figcaption { background: #173a32; color: #e4e1d1; }
.jc-editorial-aigc .jc-article-closing-image, .jc-editorial-aigc .jc-article-closing-image figcaption { background: #0b2740; }
.jc-article-footer { padding: clamp(50px, 7vw, 90px) clamp(28px, 10vw, 148px); background: #fffdf8; }
.jc-article-links { display: flex; flex-wrap: wrap; gap: 12px; margin: 34px 0; }
.jc-article-links a { display: inline-flex; min-height: 44px; align-items: center; padding: 10px 19px; border: 1px solid #b8c9bd; border-radius: 999px; color: #194b3e; text-decoration: none; font-weight: 700; }
.jc-article-links a:last-child { border-color: #194b3e; color: #fff; background: #194b3e; }
.jc-article-footer .jc-article-sources { margin: 0; color: #627168; font-size: .82rem; line-height: 1.7; }
.jc-article-sources a { color: #286455; text-underline-offset: 3px; }

@media (max-width: 720px) {
  .opc-extension-page.is-opc-home .jc-story-entry { min-height: 190px; }
  .jc-story-entry > img { object-position: 68% center; }
  .jc-story-entry::after { background: linear-gradient(90deg, rgba(5, 27, 25, .96), rgba(5, 27, 25, .82) 57%, rgba(5, 27, 25, .24)); }
  .jc-story-entry.is-aigc::after { background: linear-gradient(90deg, rgba(3, 14, 30, .97), rgba(3, 14, 30, .82) 58%, rgba(3, 14, 30, .24)); }
  .jc-story-entry-content { width: min(90%, 570px); padding: 22px; }
  .jc-story-entry-summary { font-size: .84rem; }
  .opc-extension-page .jc-editorial-page { padding: 0 0 48px; }
  .jc-article { border: 0; border-radius: 0; box-shadow: none; }
  .jc-article-hero { min-height: 390px; }
  .jc-article-hero > img { object-position: 68% center; }
  .jc-article-hero::after { background: linear-gradient(90deg, rgba(7, 34, 31, .96), rgba(7, 34, 31, .84) 61%, rgba(7, 34, 31, .25)); }
  .jc-editorial-aigc .jc-article-hero::after { background: linear-gradient(90deg, rgba(3, 14, 31, .97), rgba(3, 14, 31, .83) 61%, rgba(3, 14, 31, .25)); }
  .jc-article-hero-content { width: min(100%, 560px); padding: 32px 26px; }
  .jc-article-hero h1 { font-size: clamp(2.35rem, 10vw, 4.15rem); }
  .jc-article-hero p { font-size: .95rem; }
  .jc-article-toc { gap: 12px 18px; padding: 18px 26px; }
  .jc-article-toc span { width: 100%; }
  .jc-article-section { padding: 54px 26px; }
  .jc-article-section p, .jc-article-footer p { font-size: .97rem; line-height: 1.85; }
  .jc-article-figure { margin: 30px -26px 35px; }
  .jc-article-step-grid { grid-template-columns: 1fr; gap: 12px; }
  .jc-article-footer { padding: 56px 26px; }
}

@media (prefers-reduced-motion: reduce) { .opc-extension-page.is-opc-home .jc-story-entry { transition: none; } }