/*
 * Homepage redesign, stage 1: navigation, hero and resident works only.
 * Loaded after style.css on index.html; no shared tokens or interior pages change.
 */
.facet-editorial-stage1 {
    --editorial-bg: #0c0c0c;
    --editorial-text: #ecebe6;
    --editorial-muted: #8a8984;
    --editorial-line: #2a2a28;
    --editorial-red: #c8361f;
    --editorial-gutter: clamp(20px, 4.445vw, 64px);
    --editorial-serif: 'Noto Serif SC', 'Songti SC', 'STSong', serif;
    --editorial-latin: 'Cormorant Garamond', 'Times New Roman', var(--editorial-serif);
}

.facet-editorial-stage1 .navbar,
.facet-editorial-stage1 .navbar.scrolled {
    height: 100px;
    background: var(--editorial-bg);
    color: var(--editorial-text);
    border: 0;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.facet-editorial-stage1 .nav-container {
    max-width: none;
    padding-inline: var(--editorial-gutter);
}

.facet-editorial-stage1 .nav-logo {
    gap: 22px;
    flex-shrink: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    color: inherit;
    transform: none;
    font-family: var(--editorial-serif);
    font-size: 16px;
    letter-spacing: .12em;
}

.editorial-nav-gem {
    display: block;
    width: 63px;
    height: 76px;
    object-fit: contain;
}

.facet-editorial-stage1 .nav-links { gap: 20px; }
.facet-editorial-stage1 .nav-link {
    display: inline-block;
    padding: 10px 0;
    background: none;
    border: 0;
    border-radius: 0;
    color: #bdbcb6;
    font-size: 13px;
    letter-spacing: .04em;
    white-space: nowrap;
}
.facet-editorial-stage1 .nav-link:hover,
.facet-editorial-stage1 .nav-link.active { color: var(--editorial-text); background: none; }
.facet-editorial-stage1 .nav-link::after { display: none; }
.facet-editorial-stage1 .nav-toggle { color: var(--editorial-text); }
.facet-editorial-stage1 .nav-toggle span { background: currentColor; border-radius: 0; }

.facet-editorial-stage1 .editorial-hero {
    display: block;
    height: auto;
    min-height: 0;
    overflow: visible;
    padding: 204px var(--editorial-gutter) 264px;
    background: var(--editorial-bg);
    color: var(--editorial-text);
}

.editorial-hero-layout {
    display: grid;
    grid-template-columns: minmax(0, 384fr) minmax(0, 894fr);
    align-items: center;
    gap: 34px;
}
.editorial-hero-copy { min-width: 0; }
.editorial-hero-copy h1 {
    margin: 0;
    font-family: var(--editorial-serif);
    font-size: clamp(52px, 6.667vw, 96px);
    font-weight: 900;
    line-height: 1.05;
    letter-spacing: -.055em;
}
.editorial-hero-description,
.editorial-hero-location {
    max-width: 320px;
    font-family: var(--editorial-serif);
    font-size: 14px;
    line-height: 1.9;
    color: var(--editorial-muted);
}
.editorial-hero-description { margin-top: 38px; }
.editorial-hero-location { margin-top: 4px; }
.editorial-cover-wall {
    display: grid;
    grid-template-columns: repeat(9, minmax(0, 1fr));
    gap: 6px;
    min-width: 0;
}
.editorial-cover-wall .hero-cover {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    object-fit: contain;
    border: 0;
    border-radius: 0;
}

.facet-editorial-stage1 .editorial-works {
    padding: 0 var(--editorial-gutter) 140px;
    background: var(--editorial-bg);
    color: var(--editorial-text);
    scroll-margin-top: 116px;
}
.editorial-section-heading {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 24px;
    border-top: 1px solid #a5a49e;
    padding-top: 10px;
    margin-bottom: 52px;
}
.editorial-section-heading h2 {
    font-family: var(--editorial-serif);
    font-size: clamp(64px, 8.889vw, 128px);
    line-height: 1.15;
    font-weight: 900;
    letter-spacing: -.04em;
}
.editorial-section-heading p {
    padding-bottom: 10px;
    font-size: 12px;
    color: var(--editorial-muted);
}
.editorial-works-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 42px 26px;
}
.editorial-works-grid .hana-cut-card {
    position: relative;
    min-width: 0;
    overflow: visible;
    background: none;
    border: 0;
    border-radius: 0;
    transform: none;
    box-shadow: none;
}
.editorial-works-grid .hana-cut-cover {
    display: block;
    position: relative;
    width: 100%;
    aspect-ratio: 1;
    padding: 0;
    border: 0;
    border-radius: 0;
    overflow: hidden;
    background: var(--editorial-line);
    color: inherit;
    cursor: pointer;
    clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);
}
.editorial-works-grid .hana-cut-cover img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform 220ms ease;
}
@media (hover: hover) {
    .editorial-works-grid .hana-cut-cover:hover img { transform: scale(1.03); }
}
.editorial-works-grid .hana-cut-play {
    left: 14px;
    right: auto;
    bottom: 14px;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 0;
    background: var(--editorial-text);
    color: var(--editorial-bg);
    font-size: 12px;
    opacity: 0;
    transition: opacity 160ms ease;
}
.editorial-works-grid .hana-cut-cover:hover .hana-cut-play,
.editorial-works-grid .hana-cut-cover:focus-visible .hana-cut-play,
.editorial-works-grid .is-playing .hana-cut-play,
.editorial-works-grid .is-loading .hana-cut-play { opacity: 1; }
.editorial-works-grid .is-playing .hana-cut-play { color: var(--editorial-text); background: var(--editorial-red); }
.editorial-works-grid .hana-cut-body { padding: 12px 0 0; }
.editorial-works-grid .hana-cut-title {
    font-family: var(--editorial-latin);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.35;
    white-space: normal;
    overflow-wrap: anywhere;
    color: var(--editorial-text);
}
.editorial-works-grid .is-playing .hana-cut-title { color: var(--editorial-red); }
.editorial-works-grid .hana-cut-meta {
    margin-top: 3px;
    font-size: 12px;
    line-height: 1.5;
    color: var(--editorial-muted);
    white-space: normal;
    overflow-wrap: anywhere;
}
.editorial-works-grid .hana-cut-progress {
    height: 2px;
    margin-top: 9px;
    opacity: 0;
    background: var(--editorial-line);
}
.editorial-works-grid .hana-cut-progress span { background: var(--editorial-red); }
.editorial-works-grid .hana-cut-time {
    margin-top: 4px;
    min-height: 14px;
    opacity: 0;
    font-size: 10px;
    color: var(--editorial-muted);
}
.editorial-works-grid :is(.has-progress, .is-loading, .has-error) :is(.hana-cut-progress, .hana-cut-time) { opacity: 1; }
.editorial-works-grid .has-error .hana-cut-time { color: #e78d7e; }
.editorial-works-grid .is-unavailable .hana-cut-time { opacity: 1; }
.editorial-works-grid .is-unavailable .hana-cut-cover { cursor: default; }
.editorial-works-grid .hana-cut-card:focus-within { outline: 2px solid var(--editorial-text); outline-offset: 5px; }
.editorial-works-grid .hana-cut-cover:focus-visible { outline: none; }
.editorial-works-loading { grid-column: 1 / -1; color: var(--editorial-muted); }
.editorial-work-notes {
    max-width: 800px;
    margin-top: 36px;
    color: var(--editorial-muted);
    font-size: 12px;
    line-height: 1.9;
}
.editorial-work-notes strong { font-weight: 500; color: #bdbcb6; }

@media (max-width: 1100px) and (min-width: 901px) {
    .facet-editorial-stage1 .nav-links { gap: 12px; }
    .facet-editorial-stage1 .nav-logo { gap: 12px; font-size: 14px; }
    .facet-editorial-stage1 .nav-link { font-size: 12px; }
    .editorial-hero-layout { gap: 24px; }
    .facet-editorial-stage1 .editorial-hero { padding-top: 170px; padding-bottom: 170px; }
}

@media (max-width: 900px) {
    .facet-editorial-stage1 .navbar,
    .facet-editorial-stage1 .navbar.scrolled { height: 74px; }
    .facet-editorial-stage1 .nav-logo { gap: 16px; font-size: 13px; }
    .editorial-nav-gem { width: 44px; height: 54px; }
    .facet-editorial-stage1 .nav-toggle { display: flex; }
    .facet-editorial-stage1 .nav-links {
        display: none;
        position: absolute;
        top: 74px;
        left: 0;
        right: 0;
        flex-direction: column;
        gap: 0;
        padding: 16px var(--editorial-gutter) 24px;
        border: 0;
        border-bottom: 1px solid var(--editorial-line);
        border-radius: 0;
        background: var(--editorial-bg);
        box-shadow: none;
        max-height: calc(100dvh - 74px);
        overflow-y: auto;
        overscroll-behavior: contain;
    }
    .facet-editorial-stage1 .nav-links.open { display: flex; }
    .facet-editorial-stage1 .nav-link { display: block; padding: 12px 0; font-size: 14px; }
    .facet-editorial-stage1 .editorial-hero { padding-top: 104px; padding-bottom: 88px; }
    .editorial-hero-layout { grid-template-columns: minmax(0, 1fr); gap: 28px; }
    .editorial-hero-copy h1 { font-size: clamp(50px, 8vw, 72px); line-height: 1.08; letter-spacing: -.04em; }
    .editorial-hero-description { margin-top: 22px; max-width: 400px; font-size: 12px; line-height: 1.8; }
    .editorial-hero-location { font-size: 12px; line-height: 1.8; }
    .editorial-cover-wall {
        grid-template-columns: repeat(6, minmax(0, 1fr));
        width: min(100%, max(240px, calc((100svh - 380px) * .75)));
        justify-self: center;
    }
    .editorial-cover-wall .hero-cover--desktop { display: none; }
    .facet-editorial-stage1 .editorial-works { padding-bottom: 84px; scroll-margin-top: 90px; }
    .editorial-section-heading { gap: 12px; margin-bottom: 28px; }
    .editorial-section-heading h2 { font-size: 64px; }
    .editorial-section-heading p { max-width: 120px; font-size: 11px; line-height: 1.6; padding-bottom: 7px; }
    .editorial-works-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 14px; }
    .editorial-works-grid .hana-cut-title { font-size: 18px; }
    .editorial-works-grid .hana-cut-meta { font-size: 11px; }
    .editorial-works-grid .hana-cut-play { opacity: 1; width: 30px; height: 30px; left: 10px; bottom: 10px; font-size: 10px; }
    .editorial-work-notes { margin-top: 24px; font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
    .editorial-works-grid .hana-cut-cover img,
    .editorial-works-grid .hana-cut-play { transition: none; }
    .editorial-works-grid .hana-cut-cover:hover img { transform: none; }
}

/* Short screens keep every cover visible; very short landscape screens may scroll. */
@media (min-width: 901px) and (max-height: 800px) {
    .facet-editorial-stage1 .editorial-hero { padding-top: 140px; padding-bottom: 150px; }
    .editorial-cover-wall { width: min(100%, calc((100svh - 180px) * 1.5)); justify-self: end; }
}
@media (max-width: 900px) and (max-height: 740px) {
    .facet-editorial-stage1 .editorial-hero { padding-top: 94px; padding-bottom: 64px; }
    .editorial-hero-copy h1 { font-size: 46px; }
    .editorial-hero-description { margin-top: 16px; }
    .editorial-hero-layout { gap: 20px; }
    .editorial-cover-wall { width: min(100%, max(180px, calc((100svh - 310px) * .75))); justify-self: center; }
}