/* The gallery introduces each project's real visual world before the full exhibit. */
.work { border-top:0; }
.work .section-heading { margin-bottom:30px; align-items:end; gap:24px; }
.gallery-intro { max-width:24rem; color:var(--muted); font-size:.9375rem; line-height:1.55; }
.gallery-intro .text-link { margin-top:10px; font-size:.8125rem; color:var(--ink); }
.work .work-explorer { display:flex; flex-direction:column; gap:0; }
.gallery-index { margin-bottom:24px; min-width:0; container-type:inline-size; }
.gallery-index-label { color:var(--muted); font-size:.75rem; margin-bottom:12px; }
.work .work-tabs { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); width:100%; gap:0; margin:0; padding:0; border-block:1px solid var(--line); }
.work .work-tab,.work .work-tab:last-child { display:flex; align-items:flex-start; gap:12px; min-width:0; min-height:84px; padding:18px 14px; border:0; border-right:1px solid var(--line); color:var(--muted); background:none; text-align:left; transition:background .2s,color .2s; position:relative; }
.work .work-tab:last-child { border-right:0; }
.work .work-tab::after { content:''; position:absolute; bottom:-1px; left:14px; right:14px; height:2px; background:var(--accent); transform:scaleX(0); transform-origin:left; transition:transform .25s; }
.work .work-tab:hover { color:var(--ink); background:#b697ff08; }
.work .work-tab[aria-selected=true] { color:var(--ink); background:#b697ff0b; box-shadow:none; }
.work .work-tab[aria-selected=true]::after { transform:scaleX(1); }
.work .tab-index { display:block; flex:none; font-size:.6875rem; font-variant-numeric:tabular-nums; line-height:1.8; color:var(--muted); }
.work .tab-caption { display:block; min-width:0; width:auto; padding:0; }
.work .tab-brand { display:block; font-size:.9375rem; line-height:1.4; font-weight:500; text-transform:none; letter-spacing:0; margin:0; overflow-wrap:anywhere; }
.work .tab-title { display:block; color:var(--muted); font-size:.6875rem; line-height:1.5; margin-top:5px; }
.work .work-panel { --project-light:#744a982c; padding:0; margin:0; border:0; background:none; min-width:0; container-type:inline-size; scroll-margin-top:calc(var(--header-height) + 16px); }
.work [data-project=gameon] { --project-light:#805db63d; }
.work [data-project=partisia] { --project-light:#a19faf24; }
.work [data-project=aethir-social] { --project-light:#4e43d535; }
.work [data-project=iggalaxy] { --project-light:#9656412b; }
.work [data-project=blockgames] { --project-light:#8b45932f; }
.work [data-project=writing] { --project-light:#4946b335; }
.work .work-panel .work-stage { display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:clamp(28px,4vw,64px); align-items:center; min-height:480px; padding:0; border:0; background:none; border-radius:0; overflow:visible; position:relative; isolation:isolate; }
.work-stage::before,.work-stage::after { display:none; }
.work .work-panel .stage-artifact { display:block; min-width:0; position:relative; margin:0; max-width:none; }
.work .work-panel .stage-image-link { display:block; position:relative; width:100%; height:auto; min-height:0; max-height:none; max-width:none; aspect-ratio:6/5; padding:0; border:1px solid #b697ff20; border-radius:var(--radius); overflow:hidden; background:radial-gradient(ellipse at var(--gallery-x,45%) 65%,var(--project-light),transparent 75%),#0d0b13; }
.gallery-mount { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; padding:32px; perspective:1200px; }
.gallery-art { display:block; position:relative; width:100%; aspect-ratio:var(--art-ratio,16/9); overflow:hidden; border-radius:4px; box-shadow:0 20px 55px #0009,0 0 0 1px #ffffff16; transform:rotateY(-5deg) rotateZ(-1deg); transition:transform .4s; }
.work .work-panel .stage-image-link img,.work .fallback-project .gallery-art img { display:block; position:static; height:auto; width:100%; max-width:none; max-height:none; object-fit:contain; border-radius:0; box-shadow:none; filter:none; transform:none; transition:none; }
.work .work-panel .stage-image-link .is-cropped img,.work .fallback-project .is-cropped img { position:absolute; width:var(--art-width); left:var(--art-left); top:var(--art-top); height:auto; }
.work .stage-image-link:hover .gallery-art { transform:rotateY(0) rotateZ(0) scale(1.02); }
.gallery-art-edge { position:absolute; bottom:14%; left:10%; right:10%; height:1px; background:linear-gradient(90deg,transparent,#b697ff45,transparent); pointer-events:none; }
.work [data-project=partisia] .gallery-art { transform:rotateY(7deg); }
.work [data-project=aethir-social] .gallery-art { transform:none; border-radius:8px; }
.work [data-project=iggalaxy] .gallery-mount { padding:20px; }
.work [data-project=iggalaxy] .gallery-art { transform:none; }
.work [data-project=blockgames] .gallery-art { transform:rotateZ(-2deg); }
.work [data-project=writing] .gallery-art { transform:rotateY(-4deg); }
.work .stage-artifact figcaption { font-size:.6875rem; line-height:1.6; color:var(--muted); margin-top:12px; }
.work .media-status { position:absolute; top:50%; left:12%; right:12%; margin:0; padding:16px; font-size:.875rem; line-height:1.6; color:var(--ink); background:#0d0b13; text-align:center; transform:translateY(-50%); pointer-events:none; }
.work .work-panel .stage-story { min-width:0; max-width:30rem; padding:0; margin:0; border:0; background:none; position:relative; }
.work .case-heading { margin:0; }
.work .case-heading .eyebrow { color:var(--accent); margin-bottom:16px; font-size:.75rem; line-height:1.6; }
.work .case-heading h3 { font:500 clamp(2rem,3.7vw,3.5rem)/1.05 var(--display); letter-spacing:-.04em; margin:0 0 22px; max-width:14ch; overflow-wrap:anywhere; }
.work #stage-move { font-size:1rem; line-height:1.65; color:var(--ink); max-width:40ch; margin:0; }
.work .contribution { margin-top:22px; }
.work .contribution .eyebrow { font-size:.6875rem; margin-bottom:5px; color:var(--muted); }
.work #stage-role { font-size:.875rem; line-height:1.6; color:var(--muted); margin:0; }
.stage-actions { display:flex; margin-top:26px; }
.work .stage-actions .button { display:inline-flex; align-items:center; gap:24px; min-height:48px; font-size:.875rem; }
.gallery-entry-mark { display:block; width:12px; height:17px; border:1px solid currentColor; border-bottom:0; box-shadow:3px -3px 0 -1px #6e39ca; transform:skewY(-8deg); flex:none; }
.work .stage-evidence { border:0; border-top:1px solid var(--line); margin-top:24px; background:none; }
.work .stage-evidence summary { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 0; min-height:48px; color:var(--muted); font-size:.8125rem; }
.work .stage-evidence>div { padding:4px 0 16px; font-size:.875rem; line-height:1.65; }
.work .evidence-qualifier { font-size:.8125rem; color:var(--muted); margin-top:8px; }
.gallery-toolbar { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; font-size:.75rem; gap:12px; margin-top:16px; color:var(--muted); }
.gallery-toolbar p span { margin-left:10px; color:var(--ink); font-variant-numeric:tabular-nums; }
.gallery-toolbar>div { display:flex; gap:20px; }
.gallery-toolbar .text-button { min-height:44px; font-size:.8125rem; text-decoration:none; }
.panel-enter { animation:gallery-reveal .35s ease both; }
@keyframes gallery-reveal { from { opacity:.35; translate:0 6px; } to { opacity:1; translate:0 0; } }
.work .work-fallback { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:32px; }
.work .fallback-project { display:block; padding:0; border:0; min-width:0; }
.work .fallback-project>.gallery-mount { position:relative; aspect-ratio:16/10; background:radial-gradient(ellipse at center,var(--project-light),transparent 80%),#0d0b13; border:1px solid var(--line); border-radius:var(--radius); }
.work .fallback-copy { display:block; padding-top:20px; }
.work .fallback-copy small { color:var(--muted); font-size:.75rem; line-height:1.5; }
.work .fallback-project h3 { font:500 2rem/1.15 var(--display); margin:12px 0; letter-spacing:-.03em; }
.work .fallback-project p { line-height:1.6; color:var(--muted); font-size:.9375rem; }
.work .fallback-action { display:block; color:var(--accent); font-size:.8125rem; margin-top:16px; text-decoration:underline; text-underline-offset:5px; }
@container(max-width:66rem) { .work .work-tabs { grid-template-columns:repeat(3,minmax(0,1fr)); } .work .work-tab:nth-child(3) { border-right:0; } .work .work-tab:nth-child(-n+3) { border-bottom:1px solid var(--line); } }
@container(max-width:48rem) { .work .work-panel .work-stage { grid-template-columns:1fr; gap:28px; min-height:0; } .work .work-panel .stage-story { max-width:none; } .work .work-panel .stage-image-link { aspect-ratio:16/10; } .work .case-heading h3 { max-width:18ch; } }
@container(max-width:18rem) { .work .work-tabs { grid-template-columns:repeat(2,minmax(0,1fr)); } .work .work-tab:nth-child(3) { border-right:1px solid var(--line); } .work .work-tab:nth-child(2n) { border-right:0; } .work .work-tab:nth-child(-n+4) { border-bottom:1px solid var(--line); } }
@container(max-width:15rem) { .work .work-tabs { grid-template-columns:1fr; } .work .work-tab { border-right:0!important; border-bottom:1px solid var(--line); } }
@media(max-width:760px) { .work .section-heading { align-items:start; } .gallery-intro { max-width:none; } .work .work-fallback { grid-template-columns:1fr; } }
@media(max-width:600px) { .work .section-heading { margin-bottom:24px; } .gallery-intro { display:block; margin-top:10px; font-size:.8125rem; } .gallery-intro .text-link { margin-top:8px; } .gallery-index { margin-bottom:20px; } .work .work-tab,.work .work-tab:last-child { padding:12px 10px; min-height:56px; gap:9px; } .work .tab-brand { font-size:.8125rem; } .work .tab-index,.work .tab-title { display:none; } .work .work-tab::after { left:10px; right:10px; } .gallery-mount { padding:22px; } .work .case-heading h3 { font-size:2.25rem; margin-bottom:18px; } .work .case-heading .eyebrow { margin-bottom:12px; } .work .contribution { margin-top:18px; } .stage-actions { margin-top:22px; } .work .stage-evidence { margin-top:20px; } .gallery-toolbar { margin-top:8px; } }
@media(prefers-reduced-motion:reduce) { .panel-enter { animation:none; } .gallery-art,.work .work-tab,.work .work-tab::after { transition:none; } .work .stage-image-link:hover .gallery-art { transform:none; } }
@media(forced-colors:active) { .work .work-tab[aria-selected=true] { outline:2px solid Highlight; outline-offset:-3px; } .gallery-entry-mark { box-shadow:none; } }

.proof {
  border-block:0;
  padding-top:64px
}

.proof-heading {
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:24px;
  margin-bottom:24px
}

.proof-heading .eyebrow {
  margin:0
}

.proof .proof-heading h2 {
  font-size:clamp(1.875rem,3vw,2.75rem)
}

.proof .metrics {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:0;
  border-block:1px solid var(--line)
}

.proof .metric {
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  min-width:0;
  background:none;
  padding:30px 24px;
  min-height:0;
  border:0;
  border-right:1px solid var(--line);
  color:var(--ink);
  transition:background .25s
}

.proof .metric:first-child {
  padding-left:0
}

.proof .metric:last-child {
  border-right:0
}

.proof .metric:hover {
  background:#b697ff06;
  transform:none
}

.proof .metric>strong {
  font:500 clamp(2.5rem,4.7vw,4rem)/1.1 var(--display);
  letter-spacing:-.06em;
  color:var(--ink);
  margin-bottom:18px
}

.proof .metric>strong span {
  font-size:.6em;
  letter-spacing:-.03em
}

.proof .metric p {
  font-size:.9375rem;
  line-height:1.65;
  color:var(--muted);
  margin:0 0 18px
}

.metric-action {
  font-size:.8125rem;
  text-decoration:underline;
  text-underline-offset:5px;
  margin-top:auto;
  color:var(--ink)
}

.proof .source-note {
  font-size:.8125rem;
  color:var(--muted);
  line-height:1.65;
  margin-top:16px
}

.archive {
  border-top:1px solid var(--line)
}

.archive-browser {
  display:grid;
  grid-template-columns:210px minmax(0,1fr);
  gap:40px;
  align-items:start
}

.archive .collection-index {
  position:sticky;
  top:calc(var(--header-height) + 24px);
  border:0;
  background:none
}

.collection-index>summary {
  display:flex;
  gap:8px;
  align-items:center;
  font-size:.8125rem;
  min-height:44px;
  color:var(--muted)
}

.collection-index>summary .disclosure-mark,#collection-selection {
  display:none
}

.collection-exhibit { display:flex; align-items:center; gap:20px; margin-bottom:24px; padding:20px; border:1px solid var(--line); background:radial-gradient(ellipse at right,#683b9120,transparent 75%); }
.collection-exhibit>img { width:64px; height:64px; flex-shrink:0; object-fit:contain; }
.collection-exhibit>span:not(:last-child) { min-width:0; }
.collection-exhibit small,.collection-exhibit strong,.collection-exhibit>span>span { display:block; overflow-wrap:anywhere; }
.collection-exhibit small { color:var(--muted); font-size:.6875rem; line-height:1.6; }
.collection-exhibit strong { font:500 1.375rem/1.3 var(--display); margin-top:6px; }
.collection-exhibit>span>span { color:var(--accent); font-size:.75rem; margin-top:8px; }
.collection-exhibit>span:last-child { margin-left:auto; color:var(--accent); font-size:1.5rem; }
.collection-exhibit:hover { border-color:var(--accent); }
@media(max-width:600px) { .collection-exhibit { padding:16px; gap:12px; } .collection-exhibit>img { width:48px; height:48px; } .collection-exhibit strong { font-size:1.125rem; } }
.collection-options {
  display:flex;
  flex-direction:column
}

.archive .collection-button {
  display:flex;
  gap:12px;
  justify-content:space-between;
  align-items:center;
  padding:16px 12px 16px 0;
  min-height:60px;
  border:0;
  border-bottom:1px solid var(--line);
  background:transparent;
  color:var(--muted);
  text-align:left;
  line-height:1.4;
  font-size:.875rem
}

.archive .collection-button strong {
  font-size:.8125rem;
  font-weight:400;
  font-variant-numeric:tabular-nums
}

.archive .collection-button[aria-pressed=true] {
  color:var(--ink);
  border-bottom-color:var(--accent);
  background:#b697ff07
}

.archive .collection-button:hover {
  color:var(--ink)
}

.collection-unit {
  display:none
}

.archive-catalog {
  min-width:0
}

.archive .archive-controls {
  display:grid;
  grid-template-columns:minmax(0,1fr) 180px;
  gap:16px;
  margin:0;
  padding:0;
  border:0
}

.archive .archive-controls>div:has(#brand-filter) {
  display:none
}

.archive .archive-controls label {
  display:block;
  font-size:.8125rem;
  line-height:1.4;
  color:var(--muted);
  margin-bottom:8px
}

.archive .archive-controls input,.archive .archive-controls select {
  width:100%;
  min-width:0;
  height:48px;
  padding:11px 14px;
  border:1px solid var(--line);
  background:#100d17;
  color:var(--ink);
  font-size:.9375rem;
  box-shadow:none
}

.archive .archive-meta {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  min-height:60px;
  font-size:.8125rem;
  color:var(--muted);
  margin:6px 0 12px
}

.archive .archive-meta p {
  margin:0
}

.archive .archive-meta button {
  font-size:.8125rem
}

.archive-empty {
  padding:40px 20px;
  border:1px solid var(--line);
  border-radius:var(--radius)
}

.archive .load-more {
  margin-top:24px;
  min-height:48px
}

@media(max-width:1000px) {
  .archive-browser {
    grid-template-columns:180px minmax(0,1fr);
    gap:24px
  }
}

@media(max-width:760px) {
  .archive-browser {
    grid-template-columns:1fr
  }
  .archive .collection-index {
    position:static
  }
  .collection-options {
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:12px
  }
  .archive .collection-button {
    font-size:.8125rem;
    min-height:60px;
    padding:12px 8px
  }
  .proof .metric {
    padding:24px 16px
  }
  .proof .metric p br {
    display:none
  }
}

@media(max-width:600px) {
  .stage-actions {
    gap:12px;
    margin-top:18px;
    justify-content:space-between
  }
  .proof {
    padding-top:48px
  }
  .proof-heading {
    display:block
  }
  .proof-heading .eyebrow {
    margin-bottom:10px
  }
  .proof .metrics {
    grid-template-columns:1fr
  }
  .proof .metric,.proof .metric:first-child {
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(min(100%,6.875rem),1fr));
    gap:8px 18px;
    padding:22px 0;
    border-right:0;
    border-bottom:1px solid var(--line)
  }
  .proof .metric:last-child {
    border-bottom:0
  }
  .proof .metric>strong {
    grid-row:auto;
    font-size:2.5rem;
    margin:0
  }
  .proof .metric p {
    font-size:.875rem;
    margin:0
  }
  .metric-action {
    grid-column:auto;
    font-size:.75rem
  }
  .archive-browser {
    gap:16px
  }
  .archive .section-heading {
    margin-bottom:20px
  }
  .archive .collection-index {
    border:1px solid var(--line);
    border-radius:var(--radius)
  }
  .collection-index>summary {
    padding:10px 14px;
    color:var(--ink);
    font-size:.875rem;
    gap:10px
  }
  #collection-selection {
    display:block;
    color:var(--muted);
    margin-left:auto;
    font-size:.8125rem
  }
  .collection-index>summary .disclosure-mark {
    display:block
  }
  .collection-options {
    grid-template-columns:repeat(auto-fit,minmax(min(100%,7rem),1fr));
    gap:0 14px;
    padding:0 14px 14px;
    border-top:1px solid var(--line)
  }
  .archive .collection-button {
    padding:12px 0;
    min-height:52px
  }
  .archive .archive-controls {
    display:flex;
    flex-wrap:wrap;
    gap:10px
  }
  .archive .archive-controls input,.archive .archive-controls select {
    font-size:.8125rem;
    height:auto;
    min-height:48px;
    padding:10px
  }
  .archive .archive-controls label {
    font-size:.75rem
  }
  .archive .archive-meta {
    min-height:44px;
    margin-bottom:14px
  }
}

@media(prefers-reduced-motion:reduce) {
}

.archive .archive-controls .search-wrap {
  grid-column:auto
}

.archive .collection-index>summary {
  width:100%;
  max-width:none
}

.exhibition-ready[data-library-view=true] #archive {
  padding-top:20px;
  border-top:0
}

@media(max-width:600px) {
  .exhibition-ready[data-library-view=true] #archive {
    padding-top:14px
  }
}

.archive .collection-index {
  display:block
}

.metric-copy {
  min-width:0;
}

@media(max-width:600px) {
  .metric-copy {
    display:flex;
    flex-direction:column;
    gap:8px;
  }
  .archive .archive-controls > div {
    min-width:0;
    flex:1 1 6.875rem;
  }
  .archive .archive-controls .search-wrap {
    flex-basis:10rem;
  }
  .collection-index > summary {
    flex-wrap:wrap;
  }
  .collection-button > span:first-child {
    min-width:0;
    overflow-wrap:anywhere;
  }
  .collection-button strong {
    flex-shrink:0;
  }
}

/* Let the project, rather than its navigation, lead the gallery. */
.work .section-heading {margin-bottom:18px;}
.gallery-index {margin-bottom:20px;}
.work .work-tab,.work .work-tab:last-child {min-height:64px; padding:12px 14px;}
.work .work-panel .work-stage {grid-template-rows:auto 1fr; align-items:start; row-gap:18px; min-height:0;}
.work .work-stage>.case-heading {grid-column:2; grid-row:1; max-width:30rem;}
.work .work-stage>.stage-artifact {grid-column:1; grid-row:1 / span 2; align-self:center;}
.work .work-stage>.stage-story {grid-column:2; grid-row:2;}
.work .case-heading h3 {margin-bottom:0;}
.gallery-proof {border-left:2px solid var(--accent); padding-left:16px; margin-top:22px;}
.gallery-proof .eyebrow {font-size:.6875rem; color:var(--muted); margin-bottom:6px; line-height:1.6;}
.gallery-proof #stage-evidence-summary {font:500 .9375rem/1.6 var(--display); color:var(--ink); margin:0;}
.work .stage-evidence {margin-top:12px;}
@container(max-width:48rem) {
 .work .work-stage>.case-heading {grid-column:1; grid-row:1; max-width:none;}
 .work .work-stage>.stage-artifact {grid-column:1; grid-row:2;}
 .work .work-stage>.stage-story {grid-column:1; grid-row:3;}
 .work .work-panel .work-stage {grid-template-rows:auto auto auto; gap:20px;}
 .work .case-heading h3 {max-width:22ch;}
}
@media(max-width:600px) {
 .work .work-tab,.work .work-tab:last-child {min-height:44px; padding:10px;}
 .gallery-index {margin-bottom:18px;}
 .work .case-heading h3 {font-size:clamp(1.875rem,7.8vw,2.25rem); line-height:1.1;}
 .work .work-panel .work-stage {gap:18px;}
 .gallery-proof {margin-top:18px;}
 .work .contribution {margin-top:18px;}
}
