:root { --bg: #08090b; --panel: #101114; --panel-hover: #14161a; --line: rgba(245,245,247,.12); --blue: #49b9e9; letter-spacing: 0; }
html { scroll-padding-top: 100px; }
button, a, input { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, input:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip-link { position: fixed; top: -100px; left: 16px; z-index: 100; background: white; color: black; padding: 12px 20px; }
.skip-link:focus { top: 10px; }
.site-header { background: rgba(8,9,11,.94); }
.site-nav, main, .site-footer { width: min(1280px,100%); padding-inline: 40px; }
.site-nav { height: 96px; }
.brand { width: auto; gap: 14px; text-decoration: none; }
.brand-image { display: block; width: 66px; height: 66px; overflow: hidden; flex-shrink: 0; }
.brand-image img { display: block; width: 90px; height: 90px; max-width: none; margin: -5px 0 0 -13px; }
.brand-name { display: grid; gap: 7px; font-size: 25px; line-height: 1; font-weight: 650; }
.brand-name > span { color: var(--muted); font-size: 11px; font-weight: 400; }
.share-button { display: inline-flex; align-items: center; gap: 9px; padding: 11px 0 11px 16px; border: 0; background: none; color: var(--text); font-size: 13px; cursor: pointer; }
.share-button:hover { color: var(--blue); }
.share-button img, .dialog-controls img { filter: invert(1); }
.portfolio-section { padding: 48px 0 72px; border-bottom: 0; }
.section-heading { align-items: end; margin-bottom: 30px; }
.eyebrow { color: var(--muted); margin-bottom: 14px; font-size: 13px; font-weight: 400; }
.section-heading h1 { margin: 0; font-size: 36px; line-height: 1.25; font-weight: 600; }
.collection-summary { display: flex; gap: 26px; color: var(--muted); font-size: 12px; white-space: nowrap; padding-bottom: 3px; }
.collection-summary strong { color: #dedee3; font-size: 17px; font-weight: 500; margin-right: 4px; }
.collection-tabs, .category-tabs, .work-action { --line: rgba(245,245,247,.14); --line-strong: rgba(245,245,247,.28); --blue: #2997ff; --panel: #0d0d0f; }
.portfolio-tools { grid-template-columns: minmax(0,1fr) 220px; gap: 24px; align-items: start; margin-bottom: 18px; }
.search-field { position: relative; display: block; }
.search-field > img { position: absolute; top: 10px; left: 12px; filter: invert(.6); pointer-events: none; }
.search-field input { padding-left: 38px; font-size: 12px; }
.result-count { margin: 0 0 18px; color: var(--muted); font-size: 12px; }
.portfolio-grid { gap: 26px 20px; }
.work-card { position: relative; background: transparent; border: 0; border-radius: 0; }
.work-card:hover { background: transparent; }
.work-poster { border-radius: 5px; }
.work-meta { position: static; padding: 16px 0 0; }
.work-kicker { color: var(--muted); font-size: 11px; margin-bottom: 8px; }
.work-title { min-height: 44px; font-size: 17px; font-weight: 550; padding-right: 48px; }
/* Extend the native action button across its card, retaining one keyboard target. */
.work-action::after { content: ''; position: absolute; inset: 0; z-index: 1; cursor: pointer; }
.work-card:has(.work-action:focus-visible) { outline: 2px solid var(--blue); outline-offset: 3px; }
.work-card.is-artwork .work-meta { padding: 12px 0 0; }
.portfolio-grid.is-artworks { column-gap: 20px; }
.portfolio-grid.is-artworks .work-card { margin-bottom: 26px; }
.site-footer { min-height: 86px; align-items: center; color: var(--muted); padding-top: 24px; padding-bottom: 24px; }
.site-footer > a { color: var(--text); font-size: 16px; font-weight: 600; }
.dialog-nav, .dialog-close { display: grid; place-items: center; }
.dialog-controls img { width: 18px; height: 18px; }
.dialog-bar h2 { overflow-wrap: anywhere; }
.media-error { padding: 16px 24px; color: #f3a98e; font-size: 14px; }
.share-status { position: fixed; bottom: 28px; left: 50%; z-index: 50; transform: translateX(-50%); margin: 0; max-width: calc(100% - 32px); padding: 12px 20px; border: 1px solid var(--line-strong); border-radius: 6px; background: #202226; color: white; font-size: 14px; opacity: 0; pointer-events: none; transition: opacity .15s; }
.share-status.is-visible { opacity: 1; }
.share-dialog { width: min(520px,calc(100% - 32px)); padding: 24px; background: var(--panel); border: 1px solid var(--line); border-radius: 6px; color: white; }
.share-dialog::backdrop { background: rgba(0,0,0,.7); }
.share-dialog h2 { font-size: 22px; margin: 0 0 20px; }
.share-dialog input { width: 100%; padding: 12px; background: #08090b; color: white; border: 1px solid var(--line); border-radius: 4px; }
.share-dialog button { margin-top: 18px; padding: 10px 20px; color: white; background: #2b2e34; border: 0; border-radius: 4px; cursor: pointer; }
@media (max-width: 1100px) { .portfolio-tools { grid-template-columns: 1fr; gap: 18px; } .search-field { max-width: 320px; } }
@media (max-width: 900px) { .site-nav, main, .site-footer { padding-inline: 24px; } }
@media (max-width: 640px) {
  html { scroll-padding-top: 84px; }
  .site-nav, main, .site-footer { padding-inline: 20px; }
  .site-nav { height: 82px; }
  .brand { gap: 10px; }
  .brand-image { width: 54px; height: 54px; }
  .brand-image img { width: 74px; height: 74px; margin: -4px 0 0 -11px; }
  .brand-name { font-size: 23px; }
  .brand-name > span { font-size: 9px; }
  .share-button { font-size: 12px; gap: 6px; }
  .portfolio-section { padding-top: 34px; padding-bottom: 44px; }
  .section-heading { display: block; margin-bottom: 28px; }
  .section-heading h1 { font-size: 30px; }
  .eyebrow { font-size: 12px; margin-bottom: 12px; }
  .collection-summary { margin-top: 18px; gap: 24px; }
  .category-tabs { margin-right: -20px; padding-right: 20px; }
  .search-field { max-width: none; }
  .search-field input { height: 42px; font-size: 14px; }
  .search-field > img { top: 12px; }
  .work-title { min-height: 0; }
  .portfolio-grid.is-artworks { column-gap: 12px; }
  .portfolio-grid.is-artworks .work-card { margin-bottom: 20px; }
  .work-card.is-artwork .work-title { padding-right: 0; }
  .site-footer { align-items: flex-start; gap: 12px; }
  .dialog-bar { padding: 14px 12px; gap: 10px; }
  .dialog-bar h2 { font-size: 16px; }
  .dialog-controls { gap: 4px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; } }