/* Focused refinements layered over the original Hybrid Modern design. */
.skip-link {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 100;
  padding: 12px 16px;
  border-radius: 5px;
  background: var(--sage);
  color: #162019;
  font-weight: 800;
  transform: translateY(-150%);
  transition: transform .2s;
}

.skip-link:focus { transform: translateY(0); }
:focus-visible { outline: 3px solid #315f43; outline-offset: 4px; }
.dark :focus-visible,
.header :focus-visible { outline-color: var(--sage); }
#main-content:focus { outline: none; }

.language button {
  min-width: 44px;
  min-height: 44px;
  padding: 8px;
  border-radius: 4px;
  color: #87938d;
}

.btn-ghost { border-color: #65736e; }
.portrait-frame picture,
.travel-feature picture { display: block; width: 100%; height: 100%; }
.travel-feature picture { position: absolute; inset: 0; }

.section-tag { color: #4f6b57; }
.quick-num { color: #53675d; }
.section-heading p { color: #596861; }
.article-category { color: #506a58; }
.article-meta { color: #596861; }

.coming,
.upcoming,
.article-status { display: inline-flex; align-items: center; gap: 8px; }
.coming { color: #4f6b57; }
.upcoming { color: #c4dab9; }
.status-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: currentColor;
}
.article-status {
  padding: 10px 14px;
  border: 1px solid #9baa9f;
  border-radius: 30px;
  color: #4f6b57;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.4px;
  white-space: nowrap;
}

.article-card {
  border-radius: 5px;
  transition: background-color .2s, border-color .2s;
}
.article-card:hover {
  border-color: #aebbb1;
  background: #ecefe8;
}
.article-card:hover h3,
.article-card:focus-visible h3 { color: #315f43; }
.article-card:focus-visible { outline-offset: 6px; }

@media (max-width: 720px) {
  .header-actions { gap: 8px; }
  .language { gap: 2px; }
  .journal-entry { align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  .skip-link { transition: none; }
}