/* Nuhwa-only layout and behavior. Shared appearance lives in contemporary.css.
   See docs/design-decisions.md for source proposals and additional choices. */

[hidden] { display: none !important; }
.skip-link:not(:focus) { position: absolute; width: 1px; height: 1px; clip-path: inset(50%); overflow: hidden; white-space: nowrap; }
.skip-link:focus { position: fixed; top: .5rem; left: .5rem; z-index: 1000; padding: .75rem; background: white; }

/* Source proposal: navigation left, name right. Keep the existing mobile menu. */
.header-nav { order: 2; }
.header-title { margin-left: auto; }
.header-logo { display: block; width: auto; height: 1rem; }
@media (min-width: 900px) {
  .header-nav { order: 0; }
}

/* Source proposal: a sentence introduces Nuhwa, followed by its programs. */
.hero { justify-content: space-between; min-height: calc(100svh - 3.5rem); align-items: flex-start; }
.hero h1 { animation: appear .7s ease-out both; }
.section-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 1.5rem; }
@media (min-width: 900px) {
  .columns .section-title { position: relative; top: -.125em; }
}
.language-note { font-size: .75rem; }
.text-link { text-decoration: underline; text-underline-offset: .25em; text-decoration-color: rgba(0, 0, 0, .1); }
.text-link:hover { text-decoration-color: currentColor; }

/* Source proposals: expandable programs and project previews. */
summary { list-style: none; cursor: pointer; }
summary::-webkit-details-marker { display: none; }
.program, .project-preview { border-bottom: 1px solid rgba(0, 0, 0, .1); }
.program:hover, .project-preview:hover { border-bottom-color: currentColor; }
.program summary { padding: .75rem 0; }
.program-body { display: flex; flex-direction: column; align-items: flex-start; gap: 1.5rem; padding: .75rem 0 1.5rem; }
@media (min-width: 900px) {
  .program-body { margin-left: calc(50% + .75rem); }
}
.filters { display: flex; }
.filters a[aria-current] { opacity: 1; }
.project-preview summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: .25rem 1.5rem; padding: .75rem 0; }
.project-preview .artist { grid-column: 1 / -1; font-size: 1rem; }
.project-title, .project-year { font-size: clamp(1.5rem, 3vw, 3rem); line-height: 1.25; }
.project-institution { font-size: 1rem; line-height: 1.5; }
.project-list:lang(ko) .project-title, .project-list:lang(ko) .project-year { line-height: 1.375; }
.project-year { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.preview-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; padding: .75rem 0 1.5rem; }
.preview-image img { display: block; width: 100%; height: auto; }
.preview-info { display: flex; flex-direction: column; align-items: flex-start; gap: 1.5rem; }
@media (min-width: 900px) {
  .preview-body { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.program-tags { display: flex; flex-wrap: wrap; gap: .25rem 1rem; font-size: .75rem; }
.program-tags a { text-decoration: underline; text-underline-offset: .25em; text-decoration-color: rgba(0, 0, 0, .1); }
.name-list { list-style: none; margin-top: -.75rem; }
.name-list li { border-bottom: 1px solid rgba(0, 0, 0, .1); }
.name-list li:hover { border-bottom-color: currentColor; }
.name-list a { display: block; padding: .75rem 0; font-size: clamp(1.25rem, 2vw, 2rem); line-height: 1.25; }
.name-list:lang(ko) a { line-height: 1.375; }
.contact-links { display: flex; flex-direction: column; align-items: flex-start; gap: .25rem; }
.project-page .media > figcaption { display: none; }

/* Search input is an explicitly retained exception. */
.search-form { display: flex; align-items: center; gap: 1.5rem; border-bottom: 1px solid rgba(0, 0, 0, .1); }
.search-form input { min-width: 0; }
.search-form input:focus-visible { outline: none; }
.search-form button { flex-shrink: 0; border: 0; padding: .5rem 0; color: inherit; background: transparent; font: inherit; cursor: pointer; }
@keyframes appear { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .hero h1 { animation: none; }
}

/* The embedded map uses Contemporary's existing .map component. */
.contact-location { display: flex; flex-direction: column; gap: 1.5rem; }