/* Hallmark · macrostructure: Kinetic Cover + Waterfall · tone: sweet-punk · anchor hue: electric cherry
 * pre-emit critique: P5 H5 E4 S5 R4 V5 · contrast: pass (40–41) · slop: pass (42–45) · mobile: pass (34, 49–57)
 */
@import url("./tokens.css?v=20260801-taste");

* { box-sizing: border-box; }
html, body { min-width: 0; overflow-x: clip; }
html { background: var(--bg); }
body { margin: 0; background: var(--bg); color: var(--text); font: var(--text-md)/1.5 var(--font-body); -webkit-font-smoothing: antialiased; }
button, input, select { font: inherit; }
button, a, label { -webkit-tap-highlight-color: transparent; }
button, a, label.button { white-space: nowrap; }
button:focus-visible, input:focus-visible, select:focus-visible, a:focus-visible, label.button:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 3px; }
button:disabled { cursor: not-allowed; opacity: .42; filter: saturate(.25); }

.ambient-field { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; background: radial-gradient(circle at 50% -15%, rgb(255 255 255 / .08), transparent 35rem), var(--bg); }
.ambient-field::after { content: ""; position: absolute; inset: 0; opacity: .22; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.19'/%3E%3C/svg%3E"); mix-blend-mode: soft-light; }
.ambient-field span { position: absolute; width: min(48rem, 78vw); aspect-ratio: 1; border-radius: 50%; filter: blur(90px); opacity: .11; background: var(--accent); }
.ambient-field span:first-child { inset: -24rem -12rem auto auto; }
.ambient-field span:last-child { inset: auto auto -28rem -18rem; opacity: .07; }
.scroll-progress { position: fixed; inset: 0 auto auto 0; z-index: var(--z-overlay); width: 100%; height: 2px; transform: scaleX(0); transform-origin: left; background: var(--accent); }

.app-shell { min-height: 100dvh; display: grid; position: relative; isolation: isolate; }
.sidebar, .content-tools, .button, .project, .rename-dialog, .image-preview, .asset-actions button, .search input { border: 1px solid var(--glass-edge); background: linear-gradient(135deg, var(--glass-highlight), transparent 42%), var(--surface); box-shadow: inset 0 1px 0 var(--glass-highlight), 0 24px 80px rgb(0 0 0 / .12); backdrop-filter: blur(var(--blur)) saturate(150%); -webkit-backdrop-filter: blur(var(--blur)) saturate(150%); }

.sidebar { position: relative; z-index: var(--z-sticky); padding: var(--space-md); border-width: 0 0 1px; }
.brand { display: flex; align-items: center; gap: var(--space-sm); color: var(--text); text-decoration: none; }
.brand-mark { width: 2.875rem; height: 2.875rem; object-fit: cover; border-radius: var(--radius-sm); box-shadow: 0 0 0 1px rgb(255 255 255 / .15), 0 16px 40px rgb(229 27 43 / .2); }
.brand span { display: grid; gap: 2px; min-width: 0; }
.brand strong { font: 700 var(--text-lg)/1 var(--font-display); letter-spacing: .18em; }
.brand small { color: var(--muted); font: 500 var(--text-xs)/1.2 var(--font-mono); letter-spacing: .08em; }
.projects-heading { display: flex; align-items: center; justify-content: space-between; margin-block-start: var(--space-lg); padding-block-end: var(--space-xs); color: var(--muted); font: 500 var(--text-xs)/1 var(--font-mono); letter-spacing: .12em; }
.icon-button, .more, .project-tools button { border: 0; background: transparent; color: var(--muted); cursor: pointer; }
.icon-button { width: var(--control); height: var(--control); display: grid; place-items: center; border-radius: var(--radius-sm); font-size: var(--text-lg); transition: color var(--dur-fast), background var(--dur-fast), transform var(--dur-fast); }
.project-list { display: flex; gap: var(--space-xs); overflow-x: auto; scrollbar-width: thin; }
.project { position: relative; min-height: var(--control); display: flex; align-items: center; gap: var(--space-xs); flex: 0 0 auto; padding-inline: var(--space-sm); border-radius: var(--radius-sm); color: var(--text-soft); cursor: pointer; transition: color var(--dur-fast), border-color var(--dur-fast), background var(--dur-fast), transform var(--dur-fast); }
.project.active { border-color: rgb(229 27 43 / .52); background: linear-gradient(135deg, rgb(229 27 43 / .22), rgb(229 27 43 / .06)), var(--surface-raised); color: var(--text); box-shadow: inset 0 1px 0 rgb(255 255 255 / .16), 0 14px 32px rgb(229 27 43 / .12); }
.project-name { min-width: 0; flex: 1 1 auto; overflow: visible; color: inherit; line-height: 1.35; text-overflow: clip; white-space: normal; overflow-wrap: anywhere; }
.tree-folder { width: 1rem; height: 1rem; object-fit: contain; filter: grayscale(1) brightness(1.6); opacity: .7; }
.project-toggle, .project-toggle-placeholder { width: .75rem; height: 1rem; flex: 0 0 .75rem; }
.project-toggle { position: relative; padding: 0; border: 0; background: transparent; color: currentColor; cursor: pointer; }
.project-toggle::before { content: "›"; position: absolute; inset: 0; display: grid; place-items: center; transition: transform var(--dur-fast) var(--ease-out); }
.project-toggle.is-expanded::before { transform: rotate(90deg); }
.project-tools { display: flex; flex: 0 0 auto; gap: var(--space-2xs); margin-inline-start: auto; }
.project-tools button { min-width: 1.75rem; min-height: 1.75rem; color: currentColor; }

.content { min-width: 0; padding: var(--space-lg) var(--space-md) var(--space-4xl); }
.topbar { min-height: min(72dvh, 46rem); display: grid; align-content: end; gap: var(--space-2xl); padding-block: var(--space-xl) var(--space-3xl); }
.page-heading { min-width: 0; }
.archive-path { margin: 0 0 var(--space-md); color: var(--muted); font: 500 var(--text-xs)/1.4 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; }
.archive-path span { color: var(--text-soft); }
.page-heading h1 { max-width: 10ch; margin: 0; color: var(--text); font: 800 var(--text-display)/.84 var(--font-display); letter-spacing: -.085em; overflow-wrap: anywhere; min-width: 0; text-wrap: balance; transform-origin: left bottom; }
.page-intro { max-width: 46ch; margin: var(--space-lg) 0 0; color: var(--text-soft); font-size: var(--text-lg); line-height: 1.65; }
.header-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs); }
.button { min-height: var(--control); display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); padding-inline: var(--space-md); border-radius: var(--radius-sm); color: var(--text); cursor: pointer; transition: transform var(--dur-fast) var(--ease-out), border-color var(--dur-fast), background var(--dur-fast), box-shadow var(--dur-fast); }
.button img { width: 1rem; height: 1rem; object-fit: contain; filter: grayscale(1) brightness(2.2); }
.button-primary { border-color: rgb(255 255 255 / .2); background: linear-gradient(135deg, rgb(255 255 255 / .16), transparent 40%), var(--accent); color: var(--accent-ink); box-shadow: inset 0 1px 0 rgb(255 255 255 / .32), 0 18px 48px rgb(229 27 43 / .22); }
.button-primary img { filter: brightness(0) invert(1); }
.button:active { transform: scale(.98); }
.image-action[hidden] { display: none; }

.content-tools { position: sticky; top: var(--space-sm); z-index: var(--z-sticky); display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); padding: var(--space-xs); border-radius: var(--radius); }
.search { position: relative; flex: 1; max-width: 32rem; }
.search > span { position: absolute; inset-inline-start: var(--space-sm); top: 50%; color: var(--muted); transform: translateY(-50%); pointer-events: none; }
.search input { width: 100%; min-height: var(--control); padding: 0 var(--space-md) 0 var(--space-xl); border-radius: var(--radius-sm); outline: 2px solid transparent; outline-offset: 1px; color: var(--text); transition: border-color var(--dur-fast), background var(--dur-fast); }
.search input::placeholder { color: var(--muted); }
.count { flex: 0 0 auto; padding-inline-end: var(--space-sm); color: var(--muted); font: 500 var(--text-xs)/1 var(--font-mono); font-variant-numeric: tabular-nums; }

.gallery { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2xl); padding-block-start: var(--space-2xl); perspective: 1200px; }
.asset-card { --rx: 0deg; --ry: 0deg; --mx: 50%; --my: 50%; position: relative; min-width: 0; display: grid; gap: var(--space-sm); opacity: 0; transform: translateY(42px) scale(.96) rotateX(var(--rx)) rotateY(var(--ry)); transform-style: preserve-3d; transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); }
.asset-card.is-visible { opacity: 1; transform: translateY(0) scale(1) rotateX(var(--rx)) rotateY(var(--ry)); }
.image-frame { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border: 1px solid var(--glass-edge); border-radius: var(--radius); background: var(--surface-solid); cursor: zoom-in; box-shadow: inset 0 1px 0 var(--glass-highlight), 0 26px 65px rgb(0 0 0 / .22); }
.image-frame::before { content: ""; position: absolute; z-index: 1; inset: 0; opacity: 0; background: radial-gradient(circle at var(--mx) var(--my), rgb(255 255 255 / .24), transparent 30%); mix-blend-mode: soft-light; pointer-events: none; transition: opacity var(--dur-base); }
.image-frame::after { content: ""; position: absolute; z-index: 2; inset: 0; border-radius: inherit; border: 1px solid rgb(255 255 255 / .08); pointer-events: none; }
.image-frame img { width: 100%; height: 100%; display: block; object-fit: cover; filter: saturate(.92) contrast(1.03); transition: transform var(--dur-slow) var(--ease-out), filter var(--dur-slow); }
.asset-meta { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-sm); align-items: baseline; }
.asset-name { margin: 0; overflow: hidden; color: var(--text); font-weight: 600; letter-spacing: -.02em; text-overflow: ellipsis; white-space: nowrap; }
.asset-info { margin: 0; color: var(--muted); font: 400 var(--text-xs)/1.4 var(--font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.asset-select { position: absolute; z-index: 4; inset-block-start: var(--space-sm); inset-inline-start: var(--space-sm); width: var(--control); height: var(--control); padding: 0; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--image-scrim); color: var(--text); backdrop-filter: blur(12px); cursor: pointer; transition: transform var(--dur-fast), background var(--dur-fast), border-color var(--dur-fast); }
.asset-select::after { content: ""; position: absolute; inset: .9rem; border-radius: .25rem; background: transparent; }
.asset-select.selected { border-color: var(--accent); background: var(--accent); color: var(--accent-ink); box-shadow: 0 12px 30px rgb(229 27 43 / .3); }
.asset-select.selected::after { background: var(--accent-ink); }
.asset-actions { display: flex; flex-wrap: wrap; gap: var(--space-2xs); }
.asset-actions button { min-height: 2.35rem; padding-inline: var(--space-sm); border-radius: var(--radius-sm); color: var(--muted); font-size: var(--text-xs); cursor: pointer; transition: transform var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast), background var(--dur-fast); }
.asset-delete { color: var(--danger) !important; }
.empty { grid-column: 1 / -1; padding: var(--space-4xl) var(--space-xl); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); color: var(--muted); text-align: center; backdrop-filter: blur(var(--blur)); }

.rename-dialog, .image-preview { position: fixed; inset: 0; margin: auto; border-radius: var(--radius); color: var(--text); }
.rename-dialog::backdrop, .image-preview::backdrop { background: var(--backdrop); backdrop-filter: blur(14px); }
.rename-dialog { width: min(28rem, calc(100% - 2rem)); height: fit-content; padding: var(--space-lg); }
.rename-dialog[open], .image-preview[open] { animation: dialog-in var(--dur-base) var(--ease-out) both; }
.rename-dialog form { display: grid; gap: var(--space-md); }
.rename-dialog p { margin: 0; font: 700 var(--text-xl)/1.1 var(--font-display); letter-spacing: -.04em; }
.rename-dialog input, .rename-dialog select, .asset-detail-panel input { width: 100%; min-height: var(--control); padding-inline: var(--space-sm); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); outline: 2px solid transparent; outline-offset: 1px; background: var(--surface-solid); color: var(--text); }
.dialog-actions { display: flex; justify-content: flex-end; align-items: center; gap: var(--space-xs); }
.dialog-actions button, .detail-export { min-height: var(--control); padding-inline: var(--space-md); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); cursor: pointer; }
.dialog-cancel { background: var(--surface-raised); color: var(--text); }
.dialog-confirm, .detail-export { border-color: var(--accent); background: var(--accent); color: var(--accent-ink); }

.image-preview { z-index: var(--z-modal); width: min(94rem, calc(100% - 1rem)); height: min(94dvh, 66rem); padding: 0; overflow: hidden; }
.preview-close { position: absolute; z-index: 5; inset-block-start: var(--space-sm); inset-inline-end: var(--space-sm); width: var(--control); height: var(--control); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface-raised); color: var(--text); backdrop-filter: blur(16px); cursor: pointer; }
.asset-detail-layout { height: 100%; display: grid; overflow: auto; }
.asset-detail-preview { min-height: 20rem; display: grid; place-items: center; padding: var(--space-lg); background: radial-gradient(circle at 50% 40%, rgb(255 255 255 / .07), transparent 30rem), var(--bg); color: var(--text); overflow: hidden; }
.asset-detail-preview img, .asset-detail-preview video { max-width: 100%; max-height: 72dvh; border-radius: var(--radius-sm); object-fit: contain; filter: drop-shadow(0 32px 48px rgb(0 0 0 / .32)); }
.asset-detail-preview video:not([src]), .asset-detail-preview img:not([src]) { display: none; }
.asset-detail-panel { display: grid; align-content: start; gap: var(--space-lg); padding: var(--space-2xl) var(--space-lg); border-block-start: 1px solid var(--line); background: var(--surface); overflow: auto; }
.asset-detail-panel label { display: grid; gap: var(--space-xs); color: var(--text-soft); font-size: var(--text-sm); }
.asset-detail-panel h3 { margin: 0 0 var(--space-sm); color: var(--muted); font: 500 var(--text-xs)/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
.link-field { display: grid; grid-template-columns: minmax(0, 1fr) var(--control); gap: var(--space-xs); }
.link-field a { display: grid; place-items: center; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); color: var(--text); text-decoration: none; }
.detail-tags { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.detail-tags span { padding: var(--space-xs) var(--space-sm); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); color: var(--text-soft); }
.detail-basic dl { margin: 0; border-block-start: 1px solid var(--line); }
.detail-basic dl > div { display: grid; grid-template-columns: 1fr auto; gap: var(--space-md); padding-block: var(--space-sm); border-block-end: 1px solid var(--line); }
.detail-basic dt { color: var(--muted); }
.detail-basic dd { margin: 0; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.detail-save-state { min-height: 1lh; margin: 0; color: var(--success); font-size: var(--text-sm); }

@keyframes dialog-in { from { opacity: 0; transform: translateY(24px) scale(.96); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes progress-scroll { to { transform: scaleX(1); } }
@keyframes title-drift { to { transform: translateY(7rem) scale(.88); opacity: .12; } }
@supports (animation-timeline: scroll()) {
  .scroll-progress { animation: progress-scroll linear both; animation-timeline: scroll(root block); }
  .page-heading h1 { animation: title-drift linear both; animation-timeline: scroll(root block); animation-range: 0% 18%; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .sidebar, .content-tools, .button, .project, .rename-dialog, .image-preview, .asset-actions button, .search input { background: var(--surface-solid); }
}

@media (hover: hover) and (pointer: fine) {
  .icon-button:hover { color: var(--text); background: var(--surface-hover); transform: rotate(90deg); }
  .project:hover { border-color: var(--line-strong); background: var(--surface-hover); color: var(--text); transform: translateX(3px); }
  .button:hover { border-color: var(--line-strong); background: var(--surface-hover); transform: translateY(-2px); }
  .button-primary:hover { border-color: rgb(255 255 255 / .3); background: linear-gradient(135deg, rgb(255 255 255 / .2), transparent 42%), var(--accent-hover); box-shadow: inset 0 1px 0 rgb(255 255 255 / .36), 0 22px 58px rgb(229 27 43 / .3); }
  .asset-card:hover .image-frame::before, .asset-card:focus-within .image-frame::before { opacity: 1; }
  .asset-card:hover .image-frame img, .asset-card:focus-within .image-frame img { transform: scale(1.035); filter: saturate(1.04) contrast(1.05); }
  .asset-actions button:hover { border-color: var(--line-strong); background: var(--surface-hover); color: var(--text); transform: translateY(-1px); }
}

@media (min-width: 40rem) {
  .sidebar { padding: var(--space-lg); }
  .content { padding-inline: var(--space-xl); }
  .topbar { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
  .header-actions { justify-content: flex-end; }
  .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 60rem) {
  .app-shell { grid-template-columns: var(--sidebar) minmax(0, 1fr); }
  .sidebar { position: sticky; top: 0; width: var(--sidebar); height: 100dvh; padding: var(--space-xl) var(--space-lg); border-width: 0 1px 0 0; overflow: hidden; background: linear-gradient(145deg, rgb(255 255 255 / .07), transparent 34%), rgb(22 22 27 / .88); }
  .brand { padding-block-end: var(--space-xl); border-block-end: 1px solid var(--line); }
  .projects-heading { margin-block-start: var(--space-2xl); }
  .project-list { width: 100%; display: grid; gap: var(--space-2xs); overflow-x: hidden; overflow-y: auto; }
  .project { width: 100%; min-width: 0; min-height: var(--control); flex: none; padding-block: var(--space-xs); background: transparent; border-color: transparent; }
  .project-child { padding-inline-start: var(--space-md); background: rgb(255 255 255 / .035); }
  .content { padding: var(--space-xl) clamp(2rem, 4vw, 5rem) var(--space-4xl); }
  .topbar { min-height: min(78dvh, 52rem); padding-block: var(--space-2xl) var(--space-4xl); }
  .gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3xl) var(--space-lg); }
  .gallery .asset-card:nth-child(6n + 1) { margin-block-start: var(--space-3xl); }
  .gallery .asset-card:nth-child(6n + 3) { margin-block-start: var(--space-xl); }
  .asset-detail-layout { grid-template-columns: minmax(0, 1.55fr) minmax(20rem, .65fr); overflow: hidden; }
  .asset-detail-panel { border-block-start: 0; border-inline-start: 1px solid var(--line); }
}

/* 2026-08 visual vault: digital darkroom, native CSS, no external design system. */
html, body { background: var(--bg); }
body { color: var(--text); }
.ambient-field { display: block; background: radial-gradient(circle at 78% 5%, rgb(200 255 46 / .09), transparent 28rem), radial-gradient(circle at 10% 90%, rgb(200 255 46 / .04), transparent 36rem), var(--bg); }
.ambient-field::after { display: block; opacity: .12; mix-blend-mode: overlay; }
.ambient-field span { background: var(--accent); opacity: .035; }
.scroll-progress { display: block; height: 2px; background: var(--accent); box-shadow: 0 0 16px rgb(200 255 46 / .55); }
.sidebar, .content-tools, .button, .project, .rename-dialog, .image-preview, .asset-actions button, .search input { border-color: var(--glass-edge); background: linear-gradient(135deg, rgb(255 255 255 / .07), transparent 40%), var(--surface); box-shadow: inset 0 1px 0 var(--glass-highlight), 0 24px 80px rgb(0 0 0 / .18); }
.brand-mark { border-radius: var(--radius-sm); background: var(--accent); color: var(--accent-ink); box-shadow: 0 0 0 1px rgb(200 255 46 / .35), 0 18px 42px rgb(200 255 46 / .16); }
.brand small, .projects-heading { color: var(--muted); font-family: var(--font-mono); }
.icon-button { color: var(--accent); background: transparent; }
.project.active { border-color: rgb(200 255 46 / .45); background: linear-gradient(100deg, rgb(200 255 46 / .14), transparent), var(--surface-raised); box-shadow: inset 3px 0 0 var(--accent); }
.tree-folder { filter: grayscale(1) brightness(1.8); opacity: .62; }
.content { padding-top: var(--space-xl); }
.topbar { min-height: min(76dvh, 52rem); align-content: end; padding-block: var(--space-2xl) var(--space-4xl); }
.archive-path { margin-bottom: var(--space-md); color: var(--accent); font-family: var(--font-mono); letter-spacing: .12em; text-transform: uppercase; }
.page-heading h1 { max-width: 9ch; color: var(--text); font-weight: 800; line-height: .84; letter-spacing: -.085em; text-transform: uppercase; }
.page-intro { max-width: 32ch; margin-top: var(--space-lg); color: var(--text-soft); font-size: var(--text-lg); }
.button { color: var(--text); font-weight: 600; }
.button img { filter: grayscale(1) brightness(2.1); opacity: .8; }
.button-primary { border-color: var(--accent); background: var(--accent); color: var(--accent-ink); box-shadow: 0 18px 46px rgb(200 255 46 / .16); }
.button-primary img { filter: brightness(0); }
.content-tools { background: rgb(14 16 18 / .82); box-shadow: inset 0 1px 0 var(--glass-highlight), 0 20px 60px rgb(0 0 0 / .3); }
.search input { box-shadow: none; }
.gallery { gap: var(--space-3xl) var(--space-lg); padding-top: var(--space-3xl); perspective: 1200px; }
.asset-card { transform: translateY(42px) scale(.96) rotateX(var(--rx)) rotateY(var(--ry)); }
.asset-card.is-visible { transform: translateY(0) scale(1) rotateX(var(--rx)) rotateY(var(--ry)); }
.image-frame { border-radius: var(--radius); border-color: var(--glass-edge); background: var(--surface-solid); box-shadow: inset 0 1px 0 var(--glass-highlight), 0 30px 80px rgb(0 0 0 / .35); }
.image-frame::before { display: block; background: radial-gradient(circle at var(--mx) var(--my), rgb(200 255 46 / .22), transparent 26%); mix-blend-mode: screen; }
.image-frame img { filter: saturate(.86) contrast(1.08); }
.asset-name { color: var(--text); }
.asset-actions { opacity: 1; }
.asset-actions button { background: var(--surface); color: var(--muted); box-shadow: inset 0 1px 0 var(--glass-highlight); }
.asset-select { background: var(--image-scrim); }
.asset-select.selected { border-color: var(--accent); background: var(--accent); box-shadow: 0 0 28px rgb(200 255 46 / .3); }
.empty { background: var(--surface); color: var(--muted); }
.asset-detail-preview { background: radial-gradient(circle at 50% 40%, rgb(200 255 46 / .06), transparent 28rem), var(--bg); }
.asset-detail-panel { background: var(--surface-solid); }
.detail-tags span { background: var(--surface-raised); }
@media (hover: hover) and (pointer: fine) {
  .button:hover { border-color: var(--line-strong); background: var(--surface-hover); color: var(--text); transform: translateY(-2px); }
  .button-primary:hover { border-color: var(--accent-hover); background: var(--accent-hover); color: var(--accent-ink); box-shadow: 0 20px 54px rgb(200 255 46 / .22); }
  .asset-card:hover .image-frame img, .asset-card:focus-within .image-frame img { transform: scale(1.045); filter: saturate(1.08) contrast(1.08); }
}
@media (min-width: 60rem) {
  .sidebar { background: linear-gradient(160deg, rgb(255 255 255 / .055), transparent 36%), rgb(14 16 18 / .92); }
  .topbar { min-height: min(76dvh, 52rem); padding-block: var(--space-2xl) var(--space-4xl); }
  .gallery { grid-template-columns: 1.18fr .88fr 1fr; }
  .gallery .asset-card:nth-child(6n + 1) { margin-block-start: var(--space-4xl); }
  .gallery .asset-card:nth-child(6n + 3) { margin-block-start: var(--space-xl); }
}
@media (min-width: 90rem) {
  .gallery { grid-template-columns: 1.2fr .85fr 1.05fr .9fr; }
}
@media (max-width: 59.999rem) {
  .topbar { min-height: auto; padding-block: var(--space-3xl); }
  .page-heading h1 { max-width: none; font-size: clamp(3rem, 15vw, 5.5rem); }
}

/* 2026-08 dream gallery: cool-cute full-width masonry, one pink accent. */
.sidebar { display: none !important; }
.app-shell { display: block; }
.content { width: min(100%, 118rem); margin-inline: auto; padding-inline: clamp(1rem, 4vw, 5rem); }
.ambient-field { background: radial-gradient(circle at 14% 0%, rgb(255 111 167 / .13), transparent 30rem), radial-gradient(circle at 88% 22%, rgb(255 111 167 / .07), transparent 38rem), var(--bg); }
.ambient-field span { background: var(--accent); opacity: .045; }
.scroll-progress { background: var(--accent); box-shadow: 0 0 18px rgb(255 111 167 / .6); }
.topbar { min-height: auto; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: var(--space-xl); padding-block: clamp(3rem, 8vw, 7rem) var(--space-2xl); }
.page-heading h1 { max-width: none; font-size: clamp(3.5rem, 9vw, 9rem); line-height: .86; letter-spacing: -.09em; text-transform: none; }
.archive-path { color: var(--accent); }
.page-intro { margin-top: var(--space-md); color: var(--text-soft); }
.button-primary { border-color: var(--accent); background: var(--accent); color: var(--accent-ink); box-shadow: 0 18px 48px rgb(255 111 167 / .2); }
.button-primary:hover { border-color: var(--accent-hover) !important; background: var(--accent-hover) !important; color: var(--accent-ink) !important; box-shadow: 0 22px 56px rgb(255 111 167 / .28) !important; }
.content-tools { background: rgb(24 15 22 / .8); }
.gallery { display: block; columns: 1; column-gap: var(--space-lg); padding-top: var(--space-2xl); perspective: 1200px; }
.asset-card { width: 100%; display: inline-grid; break-inside: avoid; margin: 0 0 var(--space-2xl); transform: translateY(28px) scale(.97) rotateX(var(--rx)) rotateY(var(--ry)); }
.asset-card.is-visible { transform: translateY(0) scale(1) rotateX(var(--rx)) rotateY(var(--ry)); }
.image-frame { aspect-ratio: 4 / 5; border-color: rgb(255 255 255 / .12); border-radius: 1.25rem; box-shadow: 0 28px 75px rgb(5 0 4 / .38); }
.asset-card:nth-child(5n + 2) .image-frame { aspect-ratio: 1 / 1; }
.asset-card:nth-child(5n + 3) .image-frame { aspect-ratio: 3 / 4; }
.asset-card:nth-child(5n + 4) .image-frame { aspect-ratio: 4 / 3; }
.asset-card:nth-child(5n) .image-frame { aspect-ratio: 9 / 12; }
.image-frame::before { background: radial-gradient(circle at var(--mx) var(--my), rgb(255 111 167 / .25), transparent 27%); }
.asset-select.selected { border-color: var(--accent); background: var(--accent); box-shadow: 0 0 28px rgb(255 111 167 / .34); }
.asset-rename, .asset-delete { display: none !important; }
.asset-actions { gap: var(--space-xs); }
.asset-actions button { flex: 1; color: var(--text-soft); }
@media (min-width: 42rem) { .gallery { columns: 2; } }
@media (min-width: 68rem) { .gallery { columns: 3; } }
@media (min-width: 92rem) { .gallery { columns: 4; } }
@media (max-width: 47.999rem) {
  .topbar { display: grid; grid-template-columns: 1fr; padding-block: 2.75rem 2rem; }
  .header-actions { justify-content: flex-start; }
  .page-heading h1 { font-size: clamp(3rem, 17vw, 5rem); }
  .content-tools { top: .5rem; }
}

/* Hallmark · pre-emit critique: P5 H5 E4 S5 R5 V5
 * macrostructure: Portfolio Grid · genre: fashion editorial · theme: custom cherry-paper
 * contrast: pass · responsive: pass · slop: pass
 */
.ambient-field { background: var(--bg); }
.ambient-field::after, .ambient-field span, .scroll-progress { display: none; }
body { background: var(--bg); color: var(--text); }
.content { width: min(100%, 110rem); padding-inline: clamp(1rem, 4vw, 4.5rem); }
.topbar { min-height: auto; grid-template-columns: minmax(0, 1fr) auto; align-items: end; padding-block: clamp(4rem, 10vw, 9rem) clamp(5rem, 12vw, 11rem); }
.page-heading { min-width: 0; }
.archive-path { margin-bottom: var(--space-lg); color: var(--accent); font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: .14em; }
.page-heading h1 { max-width: 7ch; min-width: 0; color: var(--text); font-family: var(--font-display); font-size: var(--text-display); font-style: normal; font-weight: 800; line-height: .84; letter-spacing: -.085em; overflow-wrap: anywhere; text-transform: none; }
.page-intro { max-width: 22ch; margin-top: var(--space-xl); color: var(--text-soft); font-size: var(--text-lg); }
.header-actions { padding-bottom: var(--space-sm); }
.button { border-color: var(--line-strong); background: transparent; color: var(--text); box-shadow: none; backdrop-filter: none; }
.button img { filter: none; opacity: .55; }
.button-primary { border-color: var(--accent); background: var(--accent); color: var(--accent-ink); box-shadow: none; }
.button-primary img { filter: brightness(0) invert(1); opacity: 1; }
.content-tools { display: none; }
.gallery { columns: 1; column-gap: clamp(1rem, 2vw, 2rem); padding: 0 0 clamp(5rem, 10vw, 10rem); }
.asset-card { margin-bottom: clamp(2.5rem, 5vw, 5rem); transform: translateY(20px); }
.asset-card.is-visible { transform: translateY(0); }
.image-frame { border: 0; border-radius: 0; background: var(--bg-soft); box-shadow: none; }
.image-frame::before, .image-frame::after { display: none; }
.image-frame img { filter: saturate(.9) contrast(1.02); }
.asset-meta { margin-top: var(--space-sm); padding-inline: 1px; }
.asset-name { color: var(--text); font-size: var(--text-sm); font-weight: 600; }
.asset-info { color: var(--muted); }
.asset-select { inset: var(--space-sm); width: 2.5rem; height: 2.5rem; border-color: var(--glass-highlight); border-radius: 50%; background: var(--image-scrim); opacity: 0; transform: scale(.85); backdrop-filter: blur(12px); }
.asset-select.selected { border-color: var(--accent); background: var(--accent); box-shadow: none; opacity: 1; transform: scale(1); }
.asset-actions { position: absolute; z-index: 3; inset: auto var(--space-sm) 4.25rem; display: flex; opacity: 0; transform: translateY(8px); transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); }
.asset-actions button { min-height: 2.5rem; border-color: var(--glass-highlight); border-radius: 999px; background: var(--image-scrim); color: var(--surface-solid); box-shadow: none; backdrop-filter: blur(12px); }
.asset-rename, .asset-delete { display: none; }
.empty { background: transparent; border-color: var(--line); color: var(--muted); box-shadow: none; }
@media (hover: hover) and (pointer: fine) {
  .button:hover { border-color: var(--accent); background: transparent; color: var(--accent); transform: none; }
  .button-primary:hover { border-color: var(--accent-hover) !important; background: var(--accent-hover) !important; color: var(--accent-ink) !important; box-shadow: none !important; }
  .asset-card:hover .image-frame img { transform: scale(1.015); filter: saturate(1) contrast(1.02); }
  .asset-card:hover .asset-select, .asset-card:focus-within .asset-select { opacity: 1; transform: scale(1); }
  .asset-card:hover .asset-actions, .asset-card:focus-within .asset-actions { opacity: 1; transform: translateY(0); }
}
@media (min-width: 44rem) { .gallery { columns: 2; } }
@media (min-width: 72rem) { .gallery { columns: 3; } }
@media (min-width: 96rem) { .gallery { columns: 4; } }
@media (max-width: 47.999rem) {
  .content { padding-inline: 1rem; }
  .topbar { grid-template-columns: minmax(0, 1fr); padding-block: 3.5rem 5rem; }
  .page-heading h1 { max-width: 6ch; font-size: clamp(4rem, 24vw, 6.8rem); line-height: .88; }
  .header-actions { padding-bottom: 0; }
  .asset-select { opacity: 1; transform: scale(1); }
  .asset-actions { position: static; opacity: 1; transform: none; }
  .asset-actions button { border-color: var(--line-strong); background: transparent; color: var(--text-soft); backdrop-filter: none; }
}
@media (min-width: 90rem) { .gallery { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (pointer: coarse) { .button, .asset-actions button, .project { min-height: 3rem; } }
@media (prefers-reduced-transparency: reduce) { .sidebar, .content-tools, .button, .project, .rename-dialog, .image-preview, .asset-actions button, .search input { background: var(--surface-solid); backdrop-filter: none; -webkit-backdrop-filter: none; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .asset-card { opacity: 1; transform: none !important; }
  .page-heading h1, .scroll-progress { animation: none !important; }
}

/* 2026-08 cute refresh: light, calm and quick to scan. */
.ambient-field { background: radial-gradient(circle at 7% 4%, #ffe7ef 0, transparent 23rem), radial-gradient(circle at 92% 18%, #fff0d9 0, transparent 20rem), var(--bg); }
.ambient-field::after, .scroll-progress { display: none; }
.ambient-field span { opacity: .05; filter: blur(110px); }
.sidebar, .content-tools, .button, .project, .rename-dialog, .image-preview, .asset-actions button, .search input { box-shadow: 0 10px 30px rgb(121 76 92 / .06); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.brand-mark { width: 2.75rem; height: 2.75rem; display: grid; place-items: center; flex: 0 0 auto; border-radius: 14px; background: linear-gradient(145deg, #f28aab, #df618e); color: white; font: 800 1.25rem/1 var(--font-display); box-shadow: 0 10px 24px rgb(214 93 137 / .2); }
.brand strong { letter-spacing: .12em; }
.brand small { color: var(--accent); font-family: var(--font-body); letter-spacing: .08em; }
.projects-heading { font-family: var(--font-body); letter-spacing: .04em; }
.icon-button { color: var(--accent); background: var(--surface-raised); }
.project.active { border-color: #efb6ca; background: #fff0f5; box-shadow: none; }
.tree-folder { filter: sepia(.2) saturate(.7) hue-rotate(290deg); opacity: .65; }
.content { padding-top: var(--space-md); }
.topbar { min-height: auto; align-content: center; gap: var(--space-lg); padding-block: clamp(2.5rem, 7vw, 5.5rem) var(--space-2xl); }
.archive-path { margin-bottom: var(--space-sm); color: var(--accent); font-family: var(--font-body); letter-spacing: .06em; text-transform: none; }
.page-heading h1 { max-width: none; font-weight: 700; line-height: 1.12; letter-spacing: -.055em; }
.page-intro { margin-top: var(--space-sm); color: var(--muted); font-size: var(--text-md); }
.button { font-weight: 600; box-shadow: none; }
.button img { filter: sepia(.3) saturate(.5); opacity: .72; }
.button-primary { border-color: transparent; background: var(--accent); box-shadow: 0 10px 22px rgb(220 93 138 / .2); }
.button-primary img { filter: brightness(0) invert(1); opacity: 1; }
.content-tools { top: var(--space-sm); box-shadow: 0 10px 28px rgb(121 76 92 / .08); }
.search input { box-shadow: none; }
.gallery { gap: var(--space-2xl) var(--space-lg); padding-top: var(--space-xl); perspective: none; }
.asset-card { gap: var(--space-xs); transform: translateY(16px); }
.asset-card.is-visible { transform: translateY(0); }
.image-frame { border-radius: 18px; border-color: #f0dbe3; background: #f7edf1; box-shadow: 0 12px 30px rgb(93 59 72 / .09); }
.image-frame::before { display: none; }
.image-frame img { filter: none; }
.asset-name { padding-left: 2px; font-weight: 600; }
.asset-actions { opacity: .72; }
.asset-actions button { min-height: 2.15rem; background: transparent; box-shadow: none; }
.asset-select { width: 2.4rem; height: 2.4rem; border-radius: 12px; }
.asset-select.selected { box-shadow: 0 8px 20px rgb(220 93 138 / .25); }
.empty { background: #fff; color: var(--muted); box-shadow: none; }
.rename-dialog, .image-preview { box-shadow: 0 30px 90px rgb(75 46 58 / .2); }
.asset-detail-preview { background: #fff5f8; }
.asset-detail-panel { background: #fff; }
.detail-tags span { background: #fff4f7; }
@media (hover: hover) and (pointer: fine) {
  .project:hover { transform: translateX(2px); }
  .button:hover { background: #fff3f7; transform: translateY(-1px); }
  .button-primary:hover { background: var(--accent-hover); box-shadow: 0 12px 26px rgb(220 93 138 / .24); }
  .asset-card:hover .image-frame img, .asset-card:focus-within .image-frame img { transform: scale(1.02); filter: none; }
}
@media (min-width: 60rem) {
  .sidebar { background: rgb(255 252 253 / .9); }
  .topbar { min-height: auto; padding-block: clamp(3.5rem, 8vw, 7rem) var(--space-2xl); }
  .gallery { gap: var(--space-2xl) var(--space-lg); }
  .gallery .asset-card:nth-child(6n + 1), .gallery .asset-card:nth-child(6n + 3) { margin-block-start: 0; }
}

/* Sweet-punk cover · black lacquer, chrome type, electric cherry. */
html { background: var(--bg); }
body { min-height: 100dvh; background: var(--bg); color: var(--text); }
body::before { content: ""; position: fixed; inset: 0; z-index: -3; pointer-events: none; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 4.5rem 4.5rem; mask-image: linear-gradient(to bottom, black, transparent 72%); opacity: .22; }
.ambient-field { display: block; background: radial-gradient(circle at 76% 14%, oklch(66% .25 352 / .18), transparent 25rem), radial-gradient(circle at 10% 70%, oklch(66% .25 352 / .09), transparent 32rem), var(--bg); }
.ambient-field::after { display: block; opacity: .15; mix-blend-mode: soft-light; }
.ambient-field span { display: block; width: min(42rem, 70vw); opacity: .12; filter: blur(90px); animation: float-glow 12s var(--ease-smooth) infinite alternate; }
.ambient-field span:last-child { animation-delay: -5s; animation-direction: alternate-reverse; }
.scroll-progress { display: block; height: 3px; background: var(--accent); box-shadow: 0 0 18px var(--accent); }
.content { width: min(100%, 118rem); padding: 0 clamp(1rem, 4vw, 5rem) var(--space-4xl); }
.topbar { position: relative; min-height: min(88dvh, 58rem); grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: var(--space-xl); padding-block: clamp(5rem, 11vw, 10rem) clamp(4rem, 8vw, 7rem); border-bottom: 1px solid var(--line); }
.topbar::before { content: "KAKA\A VISUAL\A CLUB"; position: absolute; inset: 8% 0 auto auto; color: var(--text); font: 800 clamp(.7rem, 1vw, .9rem)/1.65 var(--font-mono); letter-spacing: .16em; text-align: right; white-space: pre; opacity: .58; }
.topbar::after { content: "K"; position: absolute; inset: 18% 12% auto auto; width: clamp(6rem, 12vw, 11rem); aspect-ratio: 1; display: grid; place-items: center; border: 1px solid var(--line-strong); border-radius: 50%; color: var(--accent); font: 900 clamp(2rem, 5vw, 4rem)/1 var(--font-display); box-shadow: inset 0 0 0 1rem oklch(66% .25 352 / .035), 0 0 80px oklch(66% .25 352 / .18); animation: spin-star 14s linear infinite; }
.page-heading { position: relative; z-index: 1; }
.archive-path { display: flex; align-items: center; gap: var(--space-sm); margin-bottom: var(--space-lg); color: var(--text-soft); font: 600 var(--text-xs)/1 var(--font-mono); letter-spacing: .18em; }
.archive-path i { width: 4rem; height: 1px; background: var(--accent); box-shadow: 0 0 10px var(--accent); }
.page-heading h1 { max-width: 7ch; min-width: 0; margin: 0; color: var(--text); font-family: var(--font-display); font-size: var(--text-display); font-style: normal; font-weight: 900; line-height: .82; letter-spacing: -.105em; overflow-wrap: anywhere; text-transform: none; text-wrap: balance; }
.page-heading h1 span, .page-heading h1 em { display: block; font: inherit; }
.page-heading h1 span { color: transparent; -webkit-text-stroke: 1px var(--text); filter: drop-shadow(0 0 22px oklch(97% .015 326 / .12)); }
.page-heading h1 em { margin-left: .5ch; color: var(--text); text-shadow: 0 0 36px oklch(66% .25 352 / .32); transform: skewX(-8deg); }
.page-intro { max-width: 48ch; margin-top: var(--space-xl); color: var(--text-soft); font-size: var(--text-lg); letter-spacing: .02em; }
.hero-notes { display: flex; flex-wrap: wrap; gap: var(--space-sm) var(--space-xl); margin-top: var(--space-2xl); color: var(--muted); font: 500 var(--text-xs)/1 var(--font-mono); letter-spacing: .12em; }
.hero-notes span:first-child { color: var(--accent); }
.header-actions { position: sticky; bottom: var(--space-lg); z-index: 10; align-self: end; padding-bottom: 0; }
.button { min-height: 3.25rem; border: 1px solid var(--line-strong); border-radius: 999px; background: oklch(14% .02 326 / .72); color: var(--text); box-shadow: inset 0 1px 0 var(--glass-highlight); backdrop-filter: blur(18px) saturate(140%); transition: transform var(--dur-fast) var(--ease-out), border-color var(--dur-fast), color var(--dur-fast), background-color var(--dur-fast); }
.button img { filter: grayscale(1) brightness(2.4); opacity: .9; }
.button-primary { border-color: var(--accent); background: var(--accent); color: var(--accent-ink); box-shadow: 0 0 0 4px oklch(66% .25 352 / .1), 0 18px 60px oklch(66% .25 352 / .26); }
.button-primary img { filter: brightness(0) invert(1); }
.gallery { columns: 1; column-gap: clamp(1rem, 2vw, 2rem); padding: clamp(4rem, 8vw, 8rem) 0; perspective: 1200px; }
.gallery.is-sparse { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); align-items: start; gap: clamp(2rem, 4vw, 4rem) clamp(1rem, 2vw, 2rem); }
.gallery.is-sparse.is-single { grid-template-columns: minmax(0, 30rem); }
.gallery.is-sparse .asset-card { margin-bottom: 0; }
.asset-card { width: 100%; display: inline-grid; break-inside: avoid; margin: 0 0 clamp(2.5rem, 5vw, 5rem); transform: translateY(46px) scale(.94) rotateZ(var(--entry-rotate, 0deg)) rotateX(var(--rx)) rotateY(var(--ry)); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); }
.asset-card.is-visible { transform: translateY(0) scale(1) rotateZ(0deg) rotateX(var(--rx)) rotateY(var(--ry)); }
.image-frame { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-soft); box-shadow: 0 28px 80px oklch(3% .01 326 / .5); }
.image-frame::before { display: block; background: radial-gradient(circle at var(--mx) var(--my), oklch(66% .25 352 / .24), transparent 28%); mix-blend-mode: screen; }
.image-frame img { filter: saturate(.88) contrast(1.06); }
.asset-card:nth-child(5n + 2) .image-frame { aspect-ratio: 1; }
.asset-card:nth-child(5n + 3) .image-frame { aspect-ratio: 3 / 4; }
.asset-card:nth-child(5n + 4) .image-frame { aspect-ratio: 4 / 3; }
.asset-meta { margin-top: var(--space-sm); }
.asset-name { color: var(--text); }
.asset-info { color: var(--muted); }
.asset-select { border-radius: 50%; }
.asset-select.selected { background: var(--accent); box-shadow: 0 0 28px var(--accent); }
.asset-actions button { border-radius: 999px; background: oklch(12% .02 326 / .82); color: var(--text-soft); }
.empty { position: relative; min-height: min(62dvh, 42rem); display: grid; place-items: center; align-content: center; gap: var(--space-lg); overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(135deg, oklch(19% .035 326), oklch(12% .015 326)); color: var(--text); text-align: center; box-shadow: inset 0 1px 0 var(--glass-highlight); }
.empty::before { content: "✦"; position: absolute; inset: 2rem auto auto 2rem; color: var(--accent); font-size: 1.5rem; animation: pulse-star 2.8s var(--ease-smooth) infinite alternate; }
.empty::after { content: "DROP YOUR CRUSHES HERE  ·  DROP YOUR CRUSHES HERE  ·  DROP YOUR CRUSHES HERE"; position: absolute; inset: auto 0 1.25rem; color: var(--muted); font: 500 var(--text-xs)/1 var(--font-mono); letter-spacing: .12em; white-space: nowrap; }
.empty p { position: relative; z-index: 1; margin: 0; color: transparent; font: 900 clamp(3.25rem, 9vw, 8rem)/.8 var(--font-display); letter-spacing: -.08em; -webkit-text-stroke: 1px var(--text); }
.empty-upload { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: var(--space-md); min-height: 3.5rem; padding-inline: var(--space-xl); border: 0; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font-weight: 700; cursor: pointer; box-shadow: 0 18px 60px oklch(66% .25 352 / .28); transition: transform var(--dur-fast) var(--ease-out); }
.empty-upload span { transition: transform var(--dur-fast) var(--ease-out); }
.empty-upload:active { transform: scale(.98); }
.empty small { position: relative; z-index: 1; color: var(--muted); }
.empty-orbit { position: absolute; width: min(36rem, 72vw); aspect-ratio: 1; border: 1px solid oklch(66% .25 352 / .35); border-radius: 50%; box-shadow: inset 0 0 80px oklch(66% .25 352 / .08), 0 0 80px oklch(66% .25 352 / .08); animation: orbit-breathe 5s var(--ease-smooth) infinite alternate; }
@keyframes float-glow { to { transform: translate3d(8vw, 5vh, 0) scale(1.08); } }
@keyframes spin-star { to { transform: rotate(360deg); } }
@keyframes pulse-star { to { transform: scale(1.35) rotate(12deg); opacity: .5; } }
@keyframes orbit-breathe { to { transform: scale(1.08) rotate(8deg); opacity: .55; } }
@media (hover: hover) and (pointer: fine) {
  .button:hover { border-color: var(--accent); color: var(--text); }
  .button-primary:hover { border-color: var(--accent-hover) !important; background: var(--accent-hover) !important; color: var(--accent-ink) !important; box-shadow: 0 0 0 6px oklch(66% .25 352 / .12), 0 24px 72px oklch(66% .25 352 / .36) !important; }
  .empty-upload:hover { transform: translateY(-3px); }
  .empty-upload:hover span { transform: translate(3px, -3px); }
  .asset-card:hover .image-frame img { transform: scale(1.045); filter: saturate(1.08) contrast(1.06); }
}
@media (min-width: 44rem) { .gallery { columns: 2; } }
@media (min-width: 72rem) { .gallery { columns: 3; } }
@media (min-width: 96rem) { .gallery { columns: 4; } }
@media (max-width: 47.999rem) {
  .content { padding-inline: 1rem; }
  .topbar { min-height: 78dvh; grid-template-columns: 1fr; align-content: end; padding-block: 7rem 3rem; }
  .topbar::before { inset: 2rem 0 auto auto; }
  .topbar::after { inset: 11% 0 auto auto; width: 6rem; }
  .page-heading h1 { max-width: 6ch; font-size: clamp(4.5rem, 26vw, 7rem); }
  .header-actions { position: relative; bottom: auto; }
  .hero-notes span:nth-child(2) { display: none; }
  .empty { min-height: 66dvh; }
  .empty p { font-size: clamp(3.25rem, 17vw, 5.5rem); }
}
@media (prefers-reduced-motion: reduce) {
  .ambient-field span, .topbar::after, .empty::before, .empty-orbit { animation: none !important; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; }
}

/* Image preview is intentionally image-only; detail fields stay mounted for existing JS. */
.image-preview { width: min(96rem, calc(100% - 1rem)); height: min(96dvh, 72rem); border-color: var(--line-strong); background: var(--bg); }
.asset-detail-layout { grid-template-columns: minmax(0, 1fr) !important; overflow: hidden; }
.asset-detail-preview { min-height: 100%; padding: clamp(1rem, 3vw, 3rem); background: radial-gradient(circle at 50% 42%, oklch(66% .25 352 / .1), transparent 34rem), var(--bg); }
.asset-detail-preview img, .asset-detail-preview video { width: auto; max-width: 100%; height: auto; max-height: calc(96dvh - 2rem); border-radius: var(--radius); object-fit: contain; }
.asset-detail-panel { display: none !important; }
.preview-close { inset-block-start: var(--space-md); inset-inline-end: var(--space-md); border-radius: 999px; background: var(--image-scrim); }
.preview-download { position: absolute; z-index: 5; inset-block-start: var(--space-md); inset-inline-end: calc(var(--space-md) + var(--control) + var(--space-xs)); min-width: 5rem; height: var(--control); padding-inline: var(--space-md); border: 1px solid var(--line-strong); border-radius: 999px; background: var(--image-scrim); color: var(--text); backdrop-filter: blur(16px); cursor: pointer; }
.preview-download:active { transform: scale(.98); }
@media (hover: hover) and (pointer: fine) { .preview-download:hover { border-color: var(--accent); color: var(--accent); } }
::view-transition-old(root) { animation: preview-out 240ms var(--ease-in) both; }
::view-transition-new(root) { animation: preview-in 420ms var(--ease-out) both; }
@keyframes preview-out { to { opacity: .35; transform: scale(.985); } }
@keyframes preview-in { from { opacity: 0; transform: scale(1.018); } }
@media (max-width: 47.999rem) {
  .image-preview { width: 100%; height: 100dvh; max-width: none; max-height: none; border: 0; border-radius: 0; }
  .asset-detail-preview img, .asset-detail-preview video { max-height: calc(100dvh - 2rem); }
}

/* Edge drawer + selectable gallery actions. */
.asset-select { display: grid !important; }
.image-frame { isolation: isolate; }
.image-frame > .asset-select { z-index: 6; pointer-events: auto !important; opacity: 1 !important; transform: none !important; }
.asset-move { display: block !important; order: 1; }
.asset-delete { display: flex !important; order: 2; }
.asset-download { order: 3; }
.image-frame > .asset-actions { inset: auto var(--space-sm) var(--space-sm); width: auto; display: flex; opacity: 1; visibility: visible; transform: none; }
.image-frame > .asset-actions .asset-move,
.image-frame > .asset-actions .asset-delete,
.image-frame > .asset-actions .asset-download { display: flex !important; flex: 1 1 0; align-items: center; justify-content: center; min-width: 0; }

@media (hover: hover) and (pointer: fine) {
  .sidebar {
    position: fixed !important;
    inset: 0 auto 0 0;
    z-index: var(--z-overlay);
    width: min(20rem, 88vw) !important;
    height: 100dvh !important;
    display: flex !important;
    flex-direction: column;
    padding: var(--space-xl) var(--space-lg) !important;
    overflow: hidden;
    border: 0;
    border-inline-end: 1px solid var(--line-strong);
    background: oklch(14% .025 326 / .94) !important;
    box-shadow: 2rem 0 6rem oklch(3% .01 326 / .55);
    backdrop-filter: blur(24px) saturate(140%);
    transform: translateX(calc(-100% + .75rem));
    transition: transform var(--dur-base) var(--ease-out);
  }
  .sidebar::after { content: ""; position: absolute; inset: 0 0 0 auto; width: .75rem; background: var(--accent); opacity: .68; }
  .sidebar:hover, .sidebar:focus-within { transform: translateX(0); }
  .sidebar .brand { padding-block-end: var(--space-xl); border-block-end: 1px solid var(--line); }
  .sidebar .projects-heading { margin-block-start: var(--space-2xl); }
  .sidebar .project-list { width: 100%; display: grid; gap: var(--space-2xs); overflow-x: hidden; overflow-y: auto; }
  .sidebar .project { width: 100%; min-width: 0; flex: none; padding-block: var(--space-xs); background: transparent; }
}

/* Five-column aligned collection grid. */
.gallery, .gallery.is-sparse { display: grid; columns: auto; grid-template-columns: minmax(0, 1fr); align-items: start; gap: clamp(2rem, 4vw, 4rem) clamp(.75rem, 1.4vw, 1.5rem); }
.gallery .asset-card, .gallery.is-sparse .asset-card { margin: 0; }
@media (min-width: 44rem) { .gallery, .gallery.is-sparse { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .gallery, .gallery.is-sparse { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 80rem) { .gallery, .gallery.is-sparse { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.gallery.is-sparse.is-single { grid-template-columns: minmax(0, 30rem); }
.button-danger { border-color: oklch(66% .2 25 / .55); color: oklch(78% .16 25); }
.button-danger:not(:disabled) { background: oklch(25% .08 25 / .72); }
.asset-select.selected::after { inset: .72rem; border-radius: 50%; background: var(--accent-ink); box-shadow: 0 0 0 .28rem var(--accent); }

/* Public board: viewing is public; editing appears only after session login. */
.is-guest .admin-only,
.is-guest .asset-select,
.is-guest .image-frame > .asset-actions .asset-move,
.is-guest .image-frame > .asset-actions .asset-delete,
.is-guest .project-tools { display: none !important; }
.is-guest .image-frame > .asset-actions .asset-download { flex-basis: 100%; }
.auth-dialog form { display: grid; gap: var(--space-md); }
.auth-dialog form > p:first-child { margin: 0; color: var(--text); font: 800 var(--text-xl)/1 var(--font-display); }
.auth-dialog label { display: grid; gap: var(--space-xs); color: var(--text-soft); font-size: var(--text-sm); }
.auth-error { min-height: 1lh; margin: 0; color: var(--danger); font-size: var(--text-sm); }
#auth-button { margin-inline-start: auto; }