/* Reference-led black collection. Shared values are managed in tokens.css. */
.sr-only { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.site-header { position:fixed; top:0; left:0; width:100%; z-index:10; background:var(--color-bg); transform:translateY(-100%); visibility:hidden; pointer-events:none; transition:transform var(--motion-enter) var(--motion-ease),visibility var(--motion-enter); }
.site-header.is-visible { transform:translateY(0); visibility:visible; pointer-events:auto; }
.header-inner { min-height:var(--header-height); }
.wordmark { font-family:var(--font-year); font-size:var(--text-logo); font-style:normal; font-weight:400; letter-spacing:0; }
.header-actions { gap:var(--navigation-group-gap); }
.desktop-nav { display:flex; padding:3px 14px; border-radius:var(--radius-pill); background:var(--color-collection-panel); color:var(--color-collection-ink); }
.desktop-nav a { min-height:44px; display:flex; align-items:center; padding:0 17px; font-size:var(--text-navigation); font-weight:400; border-radius:var(--radius-pill); }
.desktop-nav a:hover { background:var(--color-panel-hover); }
.header-actions .menu-toggle { display:none; }
.nav-contact { min-height:50px; min-width:114px; font-weight:400; font-size:var(--text-navigation); gap:22px; }
.nav-triangle { display:block; width:10px; height:10px; fill:currentColor; flex:0 0 auto; }
.hero-map-talk .nav-triangle { width:clamp(5px,.65vw,13px); height:auto; }
#hero { scroll-margin-top:0; }
.cover-hero { position:relative; isolation:isolate; width:100%; min-height:max(100svh, calc(100vw * 1918 / 3750)); margin:0; padding:0; background:var(--color-bg); }
.portfolio-cover { width:100%; margin:0; background:var(--color-bg); }
.hero-artwork { width:100%; aspect-ratio:3750 / 1918; position:relative; }
.hero-artwork>img { width:100%; height:auto; display:block; }
.hero-image-nav { position:absolute; top:1.25%; right:.5%; z-index:3; display:flex; align-items:center; justify-content:flex-end; gap:var(--hero-navigation-gap); min-width:23.5%; padding:4px; background:var(--color-bg); }
.hero-image-menu { display:flex; align-items:center; border-radius:var(--radius-pill); background:var(--color-collection-panel); padding-inline:clamp(3px,.3vw,8px); }
.hero-image-nav a { display:flex; align-items:center; justify-content:center; min-height:var(--hero-navigation-height); color:var(--color-collection-ink); padding-inline:clamp(5px,.65vw,16px); font-size:var(--hero-navigation-font); font-weight:400; border-radius:var(--radius-pill); white-space:nowrap; }
.hero-image-nav a:hover { background:var(--color-panel-hover); }
.hero-image-nav a.hero-map-avatar { width:var(--hero-navigation-height); height:var(--hero-navigation-height); min-height:0; padding:0; flex:0 0 auto; overflow:hidden; border-radius:50%; background:var(--color-collection-panel); }
.hero-image-nav a.hero-map-talk { gap:clamp(4px,.55vw,12px); background:var(--color-accent); }
.hero-map-avatar img,.header-avatar img { width:100%; height:100%; object-fit:cover; object-position:center; }
.header-avatar { display:block; width:var(--avatar-size); height:var(--avatar-size); flex:0 0 auto; border:2px solid var(--color-collection-panel); border-radius:50%; overflow:hidden; }
.hero-work-target { position:absolute; top:38%; left:23%; width:54%; height:24%; border-radius:8px; }
.hero-image-nav a:focus-visible,.hero-work-target:focus-visible { outline:2px solid var(--color-accent); outline-offset:3px; }
.collection { margin-top:max(var(--collection-heading-space),var(--anchor-offset)); }
#works { scroll-margin-top:var(--collection-anchor-offset); }
.collection-heading { display:flex; align-items:end; justify-content:space-between; gap:24px; padding-bottom:24px; border-bottom:1px solid var(--collection-rule-color); }
.collection-heading h2 { font-family:var(--font-display); font-size:var(--text-collection-title); line-height:1.1; font-weight:400; letter-spacing:-.035em; }
.collection-barcode { width:var(--collection-barcode-width); height:var(--collection-barcode-height); flex:0 0 auto; background:url('/assets/collection/barcode.svg') center / 100% 100% no-repeat; }
.collection-toolbar { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; padding-block:18px 24px; }
.collection-tools { display:flex; align-items:center; gap:var(--collection-tool-gap); margin-left:auto; }
.collection-tools button { display:inline-flex; justify-content:center; align-items:center; gap:8px; height:36px; min-width:36px; padding:8px; border:1px solid var(--collection-rule-color); border-radius:var(--radius-pill); background:transparent; color:var(--color-text); font-family:var(--font-label); font-size:10px; transition:color var(--motion-fast),border-color var(--motion-fast); }
.collection-tools button:hover { color:var(--color-accent); border-color:var(--color-accent); }
.collection-tools svg { width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.collection-tools .collection-favorite { padding-inline:14px; min-width:62px; }
.collection-favorite svg { fill:currentColor; }
.collection-favorite[aria-pressed="true"] { color:var(--color-accent); border-color:var(--color-accent); }
.collection-filters { display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
.collection-filters button { min-height:42px; padding:10px 18px; background:transparent; color:var(--color-text); border:0; border-radius:var(--radius-pill); font-size:var(--text-navigation); font-weight:400; transition:color var(--motion-fast),background var(--motion-fast); }
.collection-filters button span { font-size:10px; margin-left:8px; opacity:.65; }
.collection-filters button[aria-pressed="true"] { background:var(--color-collection-panel); color:var(--color-collection-ink); }
.collection-filters button:hover:not([aria-pressed="true"]) { background:var(--color-surface); }
.collection-grid { display:grid; grid-template-columns:repeat(var(--collection-columns),minmax(0,1fr)); gap:var(--collection-row-gap) var(--collection-gap); align-items:start; }
.collection-grid.is-masonry { grid-auto-rows:var(--collection-masonry-unit); grid-auto-flow:row; row-gap:0; }
.collection-card { min-width:0; align-self:start; }
.collection-card-content { width:100%; }
.collection-cover { position:relative; display:block; width:100%; height:auto; background:transparent; border:0; padding:0; border-radius:var(--collection-cover-radius); overflow:hidden; cursor:pointer; transition:transform var(--motion-page) var(--motion-ease); }
.collection-media-inner { display:block; width:var(--collection-image-width); height:auto; }
.collection-media-inner>img,.collection-media-inner>video { display:block; width:100%; height:auto; object-fit:contain; }
.collection-cover:hover { transform:translateY(var(--collection-hover-shift)); }
.collection-cover:focus-visible { outline-offset:3px; }
.collection-card-info { padding-top:12px; }
.collection-card-info h3 { font-size:var(--text-collection-card); font-weight:400; line-height:1.4; letter-spacing:0; overflow-wrap:anywhere; }
.collection-card-info p { font-size:var(--text-collection-meta); color:var(--color-muted); margin-top:3px; line-height:1.5; }
.collection-card-info .card-main { display:inline-block; transition:color var(--motion-fast); }
.collection-card-info .card-main:hover { color:var(--color-accent); }
.preview-play { position:absolute; bottom:12px; right:12px; display:inline-flex; align-items:center; gap:10px; background:var(--color-play-overlay); color:var(--color-text); border:1px solid var(--color-play-border); padding:9px 15px; min-height:36px; font-size:12px; border-radius:var(--radius-pill); }
.preview-play>span { color:var(--color-accent); font-size:10px; }
.combined-cover { display:grid; gap:12px; }
.combined-cover>img { display:block; width:100%; height:auto; }
.collection-footnote { color:var(--color-muted); font-size:12px; margin-top:8px; padding-top:20px; border-top:1px solid var(--color-border); }
.collection + .about { padding-top:48px; border-top:1px solid var(--color-border); }
.about-copy>p[data-about] { color:var(--color-text); }
.contact-panel { border-top:1px solid var(--color-border); border-radius:0; }
.lightbox { background:var(--color-lightbox-overlay); }
.project-dialog .detail-heading h2 { overflow-wrap:anywhere; }
.full-film { max-width:100%; margin-inline:auto; }
.full-film video { width:100%; height:auto; aspect-ratio:16/9; background:var(--color-bg); }
.film-links { display:flex; justify-content:space-between; flex-wrap:wrap; gap:16px; margin-top:20px; }
.project-cover-summary { max-width:var(--detail-image-max); margin:32px auto; color:var(--color-muted); }
.project-media-stack { display:grid; gap:56px; }
.project-media-stack>.case-figure,.project-media-stack>.full-film { width:100%; max-width:var(--detail-image-max); margin:0 auto; min-width:0; }
.project-media-film video { display:block; height:auto; }
.project-media-video-link { margin-top:8px; font-size:12px; }
.project-media-stack[data-media-layout="triptych-sheets"]>.case-figure { max-width:none; }
.project-media-stack[data-media-layout="triptych-sheets"] .image-button { display:block; width:100%; background:#191919; }
.project-media-stack[data-media-layout="triptych-sheets"] img { display:block; width:100%; height:auto; object-fit:contain; }
.project-media-stack[data-media-layout="triptych-sheets"] figcaption { font-size:11px; }
@media (max-width:767px) { .project-media-stack { gap:32px; } }
@media (min-width:768px) and (max-width:1023px) { .desktop-nav a { padding-inline:13px; } }
@media (max-width:767px) {
  .header-avatar { width:var(--avatar-mobile-size); height:var(--avatar-mobile-size); }
  .wordmark { font-size:24px; }.desktop-nav { display:none; }.header-actions .menu-toggle { display:flex; }
  .header-actions { gap:var(--navigation-mobile-gap); }.nav-contact { min-width:0; min-height:44px; padding:10px 16px; font-size:12px; gap:16px; }
  .collection-heading { gap:8px; padding-bottom:20px; }.collection-count { font-size:clamp(48px,13vw,70px); }
  .collection-toolbar { padding-block:16px 20px; }.collection-filters { gap:3px; }.collection-filters button { font-size:12px; padding:10px 11px; }.collection-filters button span { font-size:9px; margin-left:5px; }
  .collection-tools button { min-height:44px; min-width:44px; }
  .collection-card-info { padding-top:10px; }.collection + .about { padding-top:32px; }
}
@media (max-width:479px) { .header-actions .nav-contact { display:none; } }
@media (prefers-reduced-motion:reduce) { .collection-cover:hover { transform:none; }.site-header { transition:none; } }