.article-feed { --article-feed-accent: #b28a31; padding-top: 58px; }
.article-daily__heading,
.article-catchup__heading,
.article-library__heading,
.article-paths__heading { display: grid; grid-template-columns: minmax(0, .82fr) minmax(18rem, .52fr); gap: 34px; align-items: end; margin-bottom: 24px; }
.article-daily__heading h2,
.article-catchup__heading h2,
.article-library__heading h2,
.article-paths__heading h2 { margin: 4px 0 0; font-family: "Fraunces", "Noto Sans JP", serif; font-size: clamp(35px, 5vw, 60px); line-height: 1.04; letter-spacing: -.04em; }
html[lang="ja"] .article-daily__heading h2,
html[lang="ja"] .article-catchup__heading h2,
html[lang="ja"] .article-library__heading h2,
html[lang="ja"] .article-paths__heading h2 { font-family: "Noto Sans JP", sans-serif; line-height: 1.28; }
.article-daily__heading > p,
.article-catchup__heading > div > p:last-child,
.article-library__heading > p,
.article-paths__heading > p { margin: 0; color: var(--ink-soft); line-height: 1.75; }

.article-daily__card { --article-color: var(--article-feed-accent); display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); overflow: hidden; border: 1px solid var(--border); border-radius: 34px; background: var(--white); color: var(--ink); box-shadow: 0 18px 44px rgba(23,59,69,.08); text-decoration: none; transition: transform .18s ease, box-shadow .18s ease; }
.article-daily__card:hover,
.article-daily__card:focus-visible { box-shadow: 0 24px 50px rgba(23,59,69,.14); transform: translateY(-4px); }
.article-daily__media { position: relative; min-width: 0; margin: 0; aspect-ratio: 3 / 2; overflow: hidden; background: color-mix(in srgb, var(--article-color) 16%, #f8f5ed); }
.article-daily__media picture,
.article-daily__media img { display: block; width: 100%; height: 100%; }
.article-daily__media img { object-fit: cover; }
.article-daily__media img[data-fit="contain"] { object-fit: contain; padding: 8%; }
.article-daily__media::after { content: "TODAY"; position: absolute; right: 14px; bottom: 8px; color: rgba(255,255,255,.88); font-size: clamp(38px, 7vw, 82px); font-weight: 900; letter-spacing: -.08em; text-shadow: 0 2px 18px rgba(23,59,69,.35); pointer-events: none; }
.article-graphic { display: grid; width: 100%; height: 100%; min-height: 220px; place-items: center; background: radial-gradient(circle at 22% 18%, rgba(255,255,255,.78), transparent 23%), linear-gradient(138deg, color-mix(in srgb, var(--article-color) 14%, #f8f5ed), color-mix(in srgb, var(--article-color) 38%, #f8f5ed)); }
.article-graphic span { display: grid; width: clamp(112px, 18vw, 190px); aspect-ratio: 1; place-items: center; border: 2px solid var(--ink); border-radius: 50% 50% 16% 50%; background: rgba(255,253,248,.88); font-family: "Noto Sans JP", sans-serif; font-size: clamp(52px, 8vw, 92px); font-weight: 700; transform: rotate(-5deg); }
.article-daily__copy { display: flex; min-width: 0; flex-direction: column; justify-content: center; padding: clamp(28px, 5vw, 54px); }
.article-daily__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 24px; }
.article-daily__meta time,
.article-daily__meta span { border-radius: 999px; padding: 7px 11px; font-size: 11px; font-weight: 850; }
.article-daily__meta time { background: var(--article-color); color: #fff; }
.article-daily__meta span { border: 1px solid color-mix(in srgb, var(--article-color) 45%, var(--border)); color: var(--article-color); }
.article-daily__copy h3 { margin: 0; font-family: "Fraunces", "Noto Sans JP", serif; font-size: clamp(32px, 4.5vw, 57px); line-height: 1.06; letter-spacing: -.04em; }
html[lang="ja"] .article-daily__copy h3 { font-family: "Noto Sans JP", sans-serif; line-height: 1.34; }
.article-daily__copy p { margin: 22px 0 0; color: var(--ink-soft); font-size: 16px; line-height: 1.75; }
.article-daily__copy strong { align-self: flex-start; margin-top: 30px; border-bottom: 2px solid var(--article-color); padding-bottom: 5px; color: var(--article-color); font-size: 13px; }
.article-daily__note { display: flex; justify-content: space-between; gap: 22px; margin: 14px 4px 0; color: var(--ink-soft); font-size: 11px; line-height: 1.6; }
.article-daily__note strong { color: var(--ink); }

.article-catchup { margin-top: 90px; }
.article-catchup__archive { align-self: end; justify-self: end; color: var(--ink); font-size: 12px; font-weight: 800; text-underline-offset: 5px; }
.article-catchup__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.article-catchup__grid:empty { display: none; }
.article-catchup__grid a { --article-color: var(--mint); display: grid; min-height: 150px; grid-template-columns: auto minmax(0, 1fr); gap: 14px; border: 1px solid var(--border); border-top: 6px solid var(--article-color); border-radius: 20px; background: var(--white); padding: 18px; color: var(--ink); text-decoration: none; transition: transform .18s ease, box-shadow .18s ease; }
.article-catchup__grid a:hover,
.article-catchup__grid a:focus-visible { box-shadow: 0 13px 28px rgba(23,59,69,.09); transform: translateY(-3px); }
.article-catchup__grid time { display: flex; flex-direction: column; color: var(--ink-soft); font-size: 10px; line-height: 1.35; }
.article-catchup__grid time strong { color: var(--article-color); font-size: 13px; }
.article-catchup__grid a > div { display: flex; min-width: 0; flex-direction: column; }
.article-catchup__grid small { color: var(--article-color); font-size: 10px; font-weight: 850; }
.article-catchup__grid a > div > strong { margin-top: 9px; font-family: "Fraunces", "Noto Sans JP", serif; font-size: 18px; line-height: 1.35; }
html[lang="ja"] .article-catchup__grid a > div > strong { font-family: "Noto Sans JP", sans-serif; }
.article-catchup__empty { margin: 0; border: 1px dashed #9bb1a9; border-radius: 18px; background: rgba(255,255,255,.55); padding: 20px; color: var(--ink-soft); line-height: 1.7; }

.article-paths { margin-top: 100px; border-radius: 34px; background: var(--ink); padding: clamp(32px, 6vw, 62px); color: #fff; }
.article-paths__heading .eyebrow { color: var(--mint); }
.article-paths__heading > p { color: rgba(255,255,255,.7); }
.article-paths__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.article-paths__grid a { display: flex; min-height: 245px; flex-direction: column; border: 1px solid rgba(255,255,255,.2); border-radius: 22px; padding: 22px; color: #fff; text-decoration: none; transition: background .18s ease, color .18s ease, transform .18s ease; }
.article-paths__grid a:hover,
.article-paths__grid a:focus-visible { background: var(--white); color: var(--ink); transform: translateY(-3px); }
.article-paths__grid span { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 50%; background: var(--mint); color: var(--ink); font-family: "Noto Sans JP", sans-serif; font-weight: 800; }
.article-paths__grid strong { margin-top: 40px; font-family: "Fraunces", "Noto Sans JP", serif; font-size: 24px; line-height: 1.2; }
html[lang="ja"] .article-paths__grid strong { font-family: "Noto Sans JP", sans-serif; line-height: 1.4; }
.article-paths__grid p { margin: 10px 0 0; color: rgba(255,255,255,.68); font-size: 13px; line-height: 1.65; }
.article-paths__grid a:hover p,
.article-paths__grid a:focus-visible p { color: var(--ink-soft); }
.article-paths__grid b { margin-top: auto; padding-top: 22px; font-size: 11px; }

.article-library { margin-top: 105px; }
.article-tools { position: sticky; z-index: 4; top: 10px; margin-bottom: 24px; border: 1px solid var(--border); border-radius: 24px; background: rgba(255,253,248,.94); padding: 18px; box-shadow: 0 12px 28px rgba(23,59,69,.08); backdrop-filter: blur(14px); }
.article-search { display: grid; max-width: 670px; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; border: 2px solid #96aca4; border-radius: 14px; background: #fff; padding: 4px 7px 4px 15px; }
.article-search:focus-within { border-color: var(--ink); box-shadow: 0 0 0 4px rgba(23,59,69,.12); }
.article-search > span:first-child { font-size: 20px; }
.article-search__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.article-search input { min-width: 0; height: 46px; border: 0; outline: 0; background: transparent; color: var(--ink); font: inherit; }
.article-search button { width: 40px; height: 40px; border: 0; border-radius: 10px; background: transparent; color: var(--ink-soft); font-size: 20px; opacity: 0; pointer-events: none; }
.article-search button.is-visible { opacity: 1; pointer-events: auto; }
.article-search button:hover,
.article-search button:focus-visible { background: #eef3f0; }
.article-filters { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; }
.article-filters button { --genre-color: var(--ink); display: inline-flex; min-height: 44px; align-items: center; gap: 8px; border: 1px solid #becbc6; border-radius: 999px; background: #fff; padding: 7px 10px 7px 13px; color: var(--ink); font: inherit; font-size: 12px; font-weight: 800; }
.article-filters button b { display: grid; min-width: 28px; height: 28px; place-items: center; border-radius: 999px; background: color-mix(in srgb, var(--genre-color) 17%, #fff); color: var(--genre-color); font-size: 10px; }
.article-filters button:hover,
.article-filters button:focus-visible { border-color: var(--genre-color); }
.article-filters button.is-active { border-color: var(--genre-color); background: var(--genre-color); color: #fff; }
.article-filters button.is-active b { background: rgba(255,255,255,.2); color: #fff; }
.article-result { margin: 13px 2px 0; color: var(--ink-soft); font-size: 11px; }
.article-result strong { color: var(--ink); font-size: 14px; }
.article-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.article-card { --article-color: #3e8069; display: flex; min-width: 0; min-height: 430px; flex-direction: column; overflow: hidden; border: 1px solid var(--border); border-radius: 24px; background: var(--white); color: var(--ink); text-decoration: none; transition: transform .18s ease, box-shadow .18s ease; }
.article-card[hidden] { display: none; }
.article-card:hover,
.article-card:focus-visible { box-shadow: 0 16px 34px rgba(23,59,69,.1); transform: translateY(-4px); }
.article-card__media { margin: 0; aspect-ratio: 3 / 2; overflow: hidden; background: color-mix(in srgb, var(--article-color) 14%, #f8f5ed); }
.article-card__media picture,
.article-card__media img { display: block; width: 100%; height: 100%; }
.article-card__media img { object-fit: cover; transition: transform .24s ease; }
.article-card__media img[data-fit="contain"] { object-fit: contain; padding: 8%; }
.article-card:hover .article-card__media img { transform: scale(1.02); }
.article-card__media .article-graphic { min-height: 0; }
.article-card__media .article-graphic span { width: 34%; min-width: 88px; max-width: 126px; font-size: clamp(38px, 6vw, 64px); }
.article-card__copy { display: flex; flex: 1; flex-direction: column; padding: 20px; }
.article-card__meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; color: var(--article-color); font-size: 10px; font-weight: 850; }
.article-card__copy h3 { margin: 18px 0 10px; font-family: "Fraunces", "Noto Sans JP", serif; font-size: 24px; line-height: 1.2; }
html[lang="ja"] .article-card__copy h3 { font-family: "Noto Sans JP", sans-serif; font-size: 21px; line-height: 1.45; }
.article-card__copy p { display: -webkit-box; overflow: hidden; margin: 0; color: var(--ink-soft); font-size: 13px; line-height: 1.67; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.article-card__copy > strong { margin-top: auto; padding-top: 22px; color: var(--article-color); font-size: 11px; }
.article-more { text-align: center; }
.article-more button { min-height: 48px; margin-top: 24px; border: 2px solid var(--ink); border-radius: 999px; background: var(--ink); padding: 10px 22px; color: #fff; font: inherit; font-size: 13px; font-weight: 850; }
.article-more button:hover,
.article-more button:focus-visible { background: var(--white); color: var(--ink); }
.article-empty { margin-top: 12px; border: 2px dashed #98ada5; border-radius: 22px; background: #fff; padding: 34px; text-align: center; }
.article-empty h3 { margin: 0 0 8px; font-family: "Fraunces", "Noto Sans JP", serif; font-size: 27px; }
.article-empty p { margin: 0; color: var(--ink-soft); }
.article-empty button { min-height: 44px; margin-top: 17px; border: 0; border-radius: 999px; background: var(--coral); padding: 9px 16px; color: var(--ink); font: inherit; font-weight: 850; }
.article-noscript { margin-top: 18px; border-radius: 14px; background: #fff2c9; padding: 16px; color: #5a4a1e; line-height: 1.65; }

.article-feed-policy { display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); gap: 40px; margin-top: 105px; border-top: 1px solid var(--border); padding-top: 55px; }
.article-feed-policy h2 { margin: 6px 0 0; font-family: "Fraunces", "Noto Sans JP", serif; font-size: clamp(34px, 4vw, 52px); line-height: 1.08; }
html[lang="ja"] .article-feed-policy h2 { font-family: "Noto Sans JP", sans-serif; line-height: 1.35; }
.article-feed-policy > div:last-child { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.article-feed-policy article { border: 1px solid var(--border); border-radius: 20px; background: var(--white); padding: 20px; }
.article-feed-policy article span { color: var(--coral); font-size: 11px; font-weight: 900; }
.article-feed-policy article h3 { margin: 20px 0 8px; font-size: 16px; }
.article-feed-policy article p { margin: 0; color: var(--ink-soft); font-size: 12px; line-height: 1.7; }
.article-feed-reviewed { grid-column: 1 / -1; margin: 3px 0 0; color: var(--ink-soft); font-size: 11px; line-height: 1.7; }

@media (max-width: 980px) {
  .article-daily__card { grid-template-columns: 1fr; }
  .article-daily__media { width: 100%; }
  .article-catchup__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .article-paths__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .article-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .article-feed-policy { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
  .article-feed { padding-top: 42px; }
  .article-daily__heading,
  .article-catchup__heading,
  .article-library__heading,
  .article-paths__heading { grid-template-columns: 1fr; gap: 12px; }
  .article-daily__card { border-radius: 25px; }
  .article-daily__copy { padding: 25px 22px 29px; }
  .article-daily__copy h3 { font-size: 34px; }
  html[lang="ja"] .article-daily__copy h3 { font-size: 29px; }
  .article-daily__note { display: block; }
  .article-daily__note span { display: block; margin-top: 6px; }
  .article-catchup { margin-top: 72px; }
  .article-catchup__archive { justify-self: start; }
  .article-catchup__grid { grid-template-columns: 1fr; }
  .article-catchup__grid a { min-height: 125px; }
  .article-paths { margin-top: 78px; border-radius: 26px; padding: 28px 20px; }
  .article-paths__grid { grid-template-columns: 1fr; }
  .article-paths__grid a { min-height: 190px; }
  .article-paths__grid strong { margin-top: 24px; }
  .article-library { margin-top: 82px; }
  .article-tools { position: static; border-radius: 20px; padding: 14px; }
  .article-filters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .article-filters button { justify-content: space-between; }
  .article-filters button:first-child { grid-column: 1 / -1; }
  .article-grid { grid-template-columns: 1fr; }
  .article-card { min-height: 0; }
  .article-feed-policy { margin-top: 80px; padding-top: 42px; }
  .article-feed-policy > div:last-child { grid-template-columns: 1fr; }
}

@media (max-width: 420px) {
  .article-filters { grid-template-columns: 1fr; }
  .article-filters button:first-child { grid-column: auto; }
  .article-daily__copy h3 { font-size: 30px; }
  .article-card__copy h3 { font-size: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .article-daily__card,
  .article-catchup__grid a,
  .article-paths__grid a,
  .article-card,
  .article-card__media img { transition: none; }
}

@media (forced-colors: active) {
  .article-daily__card,
  .article-catchup__grid a,
  .article-paths__grid a,
  .article-card,
  .article-tools { border: 1px solid CanvasText; }
}