/* On-demand details, kept separate from the page's scrolling/layout. */
.hero-action-compact { display: none; }
.explore-launcher {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    min-width: 36px;
    min-height: 36px;
    padding: .35rem .6rem;
    margin-right: .3rem;
    border-radius: 8px;
    color: var(--body);
    font: 600 .64rem/1.2 var(--display);
    transition: background .2s, color .2s;
}
.explore-launcher:hover { background: var(--panel-3); color: var(--white); }
.explore-search-icon {
    display: inline-block;
    position: relative;
    width: 12px;
    height: 12px;
    flex: 0 0 12px;
    margin: 0 3px 3px 0;
    border: 1.5px solid currentColor;
    border-radius: 50%;
}
.explore-search-icon::after {
    content: "";
    position: absolute;
    right: -4px;
    bottom: -2px;
    width: 5px;
    height: 1.5px;
    background: currentColor;
    transform: rotate(45deg);
    transform-origin: left center;
}
.explore-launcher kbd, .explore-close kbd {
    padding: .2rem .3rem;
    border: 1px solid var(--line-strong);
    border-radius: 4px;
    font: 500 .6rem/1 var(--copy);
    white-space: nowrap;
}
.explore-brand-trigger { display: inline-flex; vertical-align: middle; text-align: left; font: inherit; line-height: inherit; border-radius: 8px; }
.explore-brand-trigger .wordmark { transition: opacity .2s; }
.explore-brand-trigger:hover .wordmark { opacity: .8; }
html.explore-is-open, html.explore-is-open body { overflow: hidden; }
.explore-dialog {
    position: fixed;
    inset: 0;
    width: min(900px, calc(100vw - 2rem));
    max-width: none;
    max-height: calc(100vh - 3rem);
    max-height: calc(100dvh - 3rem);
    margin: auto;
    padding: 0;
    border: 1px solid var(--line-strong);
    border-radius: 20px;
    background: #111;
    color: var(--body);
    font: 400 1rem/1.6 var(--copy);
    overflow: auto;
    overscroll-behavior: contain;
    scrollbar-color: #4a4a4a transparent;
    box-shadow: 0 24px 100px #0009;
}
.explore-dialog::backdrop { background: rgb(0 0 0 / 78%); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.explore-dialog[open] { animation: explore-enter .2s ease-out; }
.explore-dialog-palette { width: min(610px, calc(100vw - 2rem)); }
.explore-bar {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 58px;
    padding: .55rem 1.5rem;
    border-bottom: 1px solid var(--line);
    background: #111;
}
.explore-back, .explore-close { display: inline-flex; gap: .6rem; align-items: center; min-height: 36px; font-size: .75rem; }
.explore-back:hover, .explore-close:hover { color: var(--white); }
.explore-eyebrow { display: block; color: var(--muted); font: 600 .61rem/1.5 var(--display); letter-spacing: .12em; text-transform: uppercase; }
.explore-heading { padding: 1.8rem 2rem 1.5rem; }
.explore-heading h2 { margin: .35rem 0 .65rem; color: var(--white); font: 600 clamp(1.7rem, 4vw, 2.7rem)/1.15 var(--display); letter-spacing: -.055em; }
.explore-heading h2:focus { outline: none; }
.explore-role { color: var(--muted); font-size: .78rem; }
.explore-heading .explore-intro { max-width: 660px; padding-top: .5rem; }
.explore-project-media { margin: 0; background: #171717; }
.explore-project-media > img { width: 100%; aspect-ratio: 16 / 9; object-fit: contain; }
.explore-project-media figcaption { border-top: 1px solid var(--line); padding: .65rem 2rem; font-size: .68rem; color: var(--muted); }
.explore-project-copy { padding: 1.7rem 2rem 2rem; }
.explore-intro { color: #d4d4d4; font-size: .96rem; line-height: 1.7; }
.explore-story-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; margin-top: 1.6rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.explore-story-block h3 { margin-bottom: .6rem; color: var(--white); font: 600 .82rem/1.4 var(--display); }
.explore-story-block p { font-size: .85rem; line-height: 1.75; }
.explore-project-links { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.5rem; margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--line); }
.explore-link { display: inline-flex; align-items: center; min-height: 40px; color: var(--white); font-size: .78rem; font-weight: 600; text-decoration: none; text-align: left; text-underline-offset: 4px; }
.explore-link:hover { text-decoration: underline; }
.explore-events { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 1.6rem; padding-top: 1.4rem; border-top: 1px solid var(--line); }
.explore-events .explore-link { gap: .65rem; }
.explore-events img { width: 38px; height: 38px; border-radius: 9px; }
.explore-caption { margin-top: .9rem; font-size: .72rem; color: var(--muted); }
.explore-status-tag { display: inline-block; margin-bottom: .9rem; padding: .3rem .6rem; border: 1px solid var(--line-strong); border-radius: 6px; color: var(--white); font-size: .68rem; }
.explore-flow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 1.5rem; border: 1px solid var(--line-strong); border-radius: 10px; list-style: none; overflow: hidden; }
.explore-flow li { display: grid; gap: .75rem; padding: .85rem; background: var(--panel-2); }
.explore-flow li + li { border-left: 1px solid var(--line-strong); }
.explore-flow small { font-size: .6rem; color: var(--muted); }
.explore-flow strong { font-size: .72rem; color: #d6d6d6; font-weight: 500; }
.explore-dialog-palette .explore-heading { padding: 1.35rem 1.5rem .75rem; }
.explore-dialog-palette h2 { font-size: 1.5rem; letter-spacing: -.045em; }
.explore-search-wrap { display: flex; align-items: center; gap: .8rem; margin: 0 1.5rem 1rem; padding: .75rem .85rem; border: 1px solid var(--line-strong); border-radius: 10px; background: #191919; }
.explore-search-wrap:focus-within { border-color: #aaa; }
.explore-search { width: 100%; min-width: 0; padding: .1rem 0; border: 0; outline: none; background: none; color: var(--white); font: 400 16px/1.5 var(--copy); }
.explore-search::placeholder { color: #949494; }
.explore-search:focus-visible { outline: none; }
.explore-results { position: relative; max-height: min(350px, 43vh); max-height: min(350px, 43dvh); overflow: auto; overscroll-behavior: contain; list-style: none; margin: 0 .6rem; padding: .25rem; }
.explore-result { display: flex; align-items: center; justify-content: space-between; gap: .8rem; min-height: 58px; padding: .55rem .85rem; margin: .1rem 0; border: 1px solid transparent; border-radius: 8px; cursor: pointer; }
.explore-result[aria-selected="true"] { color: var(--white); background: #232323; border-color: var(--line); }
.explore-result-content { min-width: 0; display: grid; gap: .1rem; }
.explore-result strong { font-size: .83rem; font-weight: 500; }
.explore-result small { color: var(--muted); font-size: .65rem; }
.explore-result-arrow { font-size: 1.1rem; color: var(--muted); }
.explore-feedback { padding: .7rem 1.5rem 0; color: var(--muted); font-size: .72rem; min-height: 1.85rem; }
.explore-palette-hint { margin-top: .7rem; border-top: 1px solid var(--line); padding: .75rem 1.5rem; color: var(--muted); font-size: .63rem; }
.explore-copy-manual { display: block; width: 100%; margin-top: .6rem; padding: .55rem; border: 1px solid var(--line-strong); border-radius: 6px; background: #1b1b1b; color: var(--white); font: inherit; font-size: 16px; }
.explore-gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; padding: 0 2rem; }
.explore-gallery-item { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: #171717; }
.explore-gallery-item:first-child { grid-column: 1 / -1; }
.explore-gallery-item > img { width: 100%; aspect-ratio: 16 / 10; object-fit: contain; }
.explore-gallery-mark > img { padding: 3.5rem; }
.explore-gallery-item figcaption { padding: 1.1rem; border-top: 1px solid var(--line); }
.explore-gallery-item h3 { margin: .35rem 0; color: var(--white); font: 600 .9rem/1.5 var(--display); }
.explore-gallery-item p { font-size: .8rem; }
.explore-gallery-note { padding: 1.5rem 2rem; color: var(--muted); font-size: .7rem; }
@keyframes explore-enter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 900px) {
    .explore-launcher-label, .explore-launcher kbd { display: none; }
}
@media (max-width: 560px) {
    .hero-actions { min-width: 0; justify-content: flex-start; }
    .hero-actions a { padding-inline: .4rem; font-size: .65rem; }
    .hero-actions small, .hero-actions b { display: none; }
    .hero-actions .hero-action-full { display: none; }
    .hero-actions .hero-action-compact { display: inline; }
    .hero-utilities { flex: none; margin-left: 2px; padding-left: 2px; }
    .explore-dialog { width: calc(100vw - 1rem); max-height: calc(100vh - 1rem); max-height: calc(100dvh - 1rem); border-radius: 14px; }
    .explore-bar { padding-inline: 1rem; }
    .explore-heading, .explore-project-copy { padding: 1.25rem; }
    .explore-story-grid { grid-template-columns: 1fr; gap: 1.25rem; }
    .explore-events { grid-template-columns: 1fr; }
    .explore-flow { grid-template-columns: 1fr 1fr; }
    .explore-flow li:nth-child(3) { border-left: 0; }
    .explore-flow li:nth-child(n + 3) { border-top: 1px solid var(--line-strong); }
    .explore-gallery { grid-template-columns: 1fr; padding: 0 1.25rem; }
    .explore-gallery-item:first-child { grid-column: auto; }
    .explore-gallery-mark > img { padding: 4.5rem; }
    .explore-gallery-note, .explore-project-media figcaption { padding-inline: 1.25rem; }
    .explore-search-wrap { margin-inline: 1rem; }
    .explore-palette-hint { display: none; }
    .explore-feedback { padding: .8rem 1.25rem; }
    .explore-close kbd { display: none; }
    .explore-launcher { min-height: 44px; min-width: 44px; padding-inline: .5rem; margin-right: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .explore-dialog[open] { animation: none; }
    .explore-launcher, .explore-brand-trigger .wordmark { transition: none; }
}