/* Motion-led article using the established patch-note layout and portal palette. */
.skilling-notes { --article-width: 1280px; }
.skilling-notes .patch-layout { grid-template-columns: 170px minmax(0, 1fr); gap: 36px; }
.skilling-notes .update-status { color: var(--gold-hi); font-size: 14px; font-weight: 600; }
.skilling-notes .patch-deck { max-width: 480px; }
.teleport-update { border-top: 3px solid var(--gold-hi); }
.teleport-update .teleport-kicker { margin: 0 0 12px; color: var(--gold-hi); font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.teleport-rules { padding-left: 22px; }
.teleport-rules li { margin: 12px 0; padding-left: 4px; }
.skilling-relics { margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: center; gap: 16px; }
.skilling-relics img { width: 100%; height: 160px; object-fit: contain; image-rendering: pixelated; }
.skilling-relics figcaption { grid-column: 1 / -1; color: #b6a9c8; font-size: 13px; text-align: center; line-height: 1.6; }
.feature-clip { margin: 26px 0 34px; border: 1px solid var(--article-rule); border-radius: 8px; overflow: hidden; background: #080609; }
.feature-clip-portrait { max-width: 420px; margin-inline: auto; }
.feature-clip video { display: block; width: 100%; height: auto; background: #080609; }
.feature-clip > img { display: block; width: 100%; height: auto; image-rendering: pixelated; }
.mobile-comparison { display: none; }
.mobile-comparison h4 { padding: 14px 12px; margin: 0; color: var(--gold-hi); font: 600 15px/1.4 var(--body); }
.feature-clip figcaption { padding: 14px 17px 17px; color: #b6a9c8; font-size: 13px; line-height: 1.65; }
.cape-showcase { margin: 26px 0 34px; border: 1px solid var(--article-rule); border-radius: 8px; overflow: hidden; background: #121820; }
.cape-pause { margin: 22px 8px 0 22px; accent-color: #dcc391; }
.cape-showcase > label { display: inline-flex; align-items: center; min-height: 44px; color: #c8bbd5; font-size: 13px; cursor: pointer; }
.cape-poses { display: grid; grid-template-columns: 2fr 1fr; align-items: center; max-width: 528px; margin: 0 auto; padding: 0 20px 14px; }
.cape-pose-back { grid-row: span 2; }
.cape-pose img { display: block; width: 100%; height: auto; image-rendering: pixelated; }
.cape-pose .cape-still { display: none; }
.cape-pause:checked ~ .cape-poses .cape-animated { display: none; }
.cape-pause:checked ~ .cape-poses .cape-still { display: block; }
.cape-showcase figcaption { padding: 14px 20px 20px; text-align: center; color: #b6a9c8; font-size: 13px; }
@media (prefers-reduced-motion: reduce) {
  .cape-showcase .cape-animated, .cape-pause, .cape-showcase > label { display: none; }
  .cape-showcase .cape-still { display: block; }
}
.skilling-notes .patch-section h3 { margin-top: 26px; }
.skilling-notes .fury-callout h3, .skilling-notes .rate-panel h3 { margin-top: 0; }
.skilling-notes .patch-ending { padding: 24px 0; color: #b6a9c8; }
@media (max-width: 900px) {
  .skilling-notes .patch-layout { display: block; }
  .skilling-notes .patch-contents { position: static; display: flex; flex-wrap: wrap; gap: 0 22px; padding: 0 0 25px; }
  .skilling-notes .patch-contents h2 { width: 100%; }
  .skilling-notes .patch-contents a { padding: 6px 0; }
  .skilling-relics img { height: 125px; }
}
@media (max-width: 600px) {
  .skilling-notes .patch-heading { padding: 18px 18px 28px; }
  .skilling-notes .patch-layout { padding: 0 18px 32px; }
  .skilling-notes .patch-hero { display: block; }
  .skilling-notes .patch-hero h1 { font-size: 54px; }
  .skilling-relics { margin-top: 30px; gap: 10px; }
  .skilling-relics img { height: 100px; }
  .skilling-notes .patch-section { padding: 28px 0; }
  .skilling-notes .rate-list { grid-template-columns: 1fr; }
  .feature-clip figcaption { padding: 12px; }
  .feature-clip { margin: 22px 0 28px; }
  .feature-clip .desktop-comparison { display: none; }
  .mobile-comparison { display: grid; gap: 10px; }
  .cape-poses { grid-template-columns: 1fr 1fr; padding: 0 12px 12px; }
  .cape-pose-back { grid-column: 1 / -1; grid-row: auto; width: 100%; max-width: 352px; justify-self: center; }
}