.work-layout { width: min(92%, 1460px); margin: 0 auto; padding: 1rem 0 3rem; font-family: Almarai, sans-serif; }
.work-heading, .gallery-heading { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.work-heading { margin-bottom: 1.5rem; flex-wrap: wrap; }
.work-heading h1 { text-transform: none; letter-spacing: -.035em; font-size: clamp(2.6rem, 5.1vw, 5rem); }
.download-portfolio {
  background: transparent;
  color: var(--accent);
  border: 1px solid currentColor;
  border-radius: .65rem;
  padding: .7rem 1rem;
  font: 700 .85rem Almarai, sans-serif;
  text-transform: uppercase;
  letter-spacing: .07em;
}
.download-portfolio:hover { background: #291b19; }
.download-portfolio:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.categories { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .85rem; }
.category {
  position: relative;
  isolation: isolate;
  display: grid;
  gap: .3rem;
  min-height: 8.25rem;
  padding: clamp(.8rem, 1.7vw, 1.55rem) clamp(.75rem, 2.5vw, 2.75rem);
  overflow: hidden;
  border: 1px solid #525053;
  border-radius: .65rem;
  background: #141315;
  color: var(--ink);
  text-align: left;
  font-family: inherit;
  cursor: pointer;
}
.category[aria-pressed="true"], .category:hover { border-color: var(--accent); background: #291b19; }
.category:focus-visible, .gallery button:focus-visible, .project-track:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.category-number, .category-arrow { color: var(--accent); font-weight: 700; }
.category-number { font-size: 1.15rem; }
.category-name { font-size: clamp(1.15rem, 2.7vw, 2.4rem); font-weight: 700; }
.category-arrow { font-size: 1.4rem; }
.category svg {
  position: absolute;
  z-index: -1;
  top: 8%;
  right: 6%;
  width: 30%;
  height: 84%;
  fill: none;
  stroke: #aaa2a7;
  stroke-width: 1;
  opacity: .32;
}
.gallery { border: 1px solid #525053; border-radius: .65rem; margin-top: 1rem; padding: clamp(.8rem, 1.5vw, 1.4rem); }
.gallery h2 { color: var(--accent); font-size: 1.05rem; letter-spacing: .1em; margin: 0; text-transform: uppercase; }
.gallery-controls, .gallery-dots { display: flex; align-items: center; gap: .65rem; }
.gallery [hidden] { display: none; }
.gallery button { cursor: pointer; color: var(--ink); background: transparent; border: 1px solid #777277; border-radius: 50%; }
.gallery button:disabled { opacity: .35; cursor: default; }
.gallery-controls button { width: 2.25rem; height: 2.25rem; font-size: 1.3rem; }
.project-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 1.5rem) / 3);
  gap: .75rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  margin-top: .9rem;
}
.project-track::-webkit-scrollbar { display: none; }
.project-tile { scroll-snap-align: start; min-width: 0; }
.project-tile img { width: 100%; aspect-ratio: 2 / 1; object-fit: cover; border-radius: .25rem; }
.project-tile span { display: block; padding: .55rem .1rem; font-weight: 700; }
.project-tile span::after { content: " ↗"; color: var(--accent); }
.gallery-dots { justify-content: center; margin-top: .4rem; }
.gallery-dots button { padding: 0; width: .9rem; height: .9rem; }
.gallery-dots button[aria-current="true"] { background: var(--accent); border-color: var(--accent); }
@media (max-width: 650px) {
  .category svg { opacity: .18; }
  .project-track { grid-auto-columns: 100%; }
}

.category[data-category="identity"][aria-pressed="true"] { border-color: var(--accent); }
.gallery:is([data-category="identity"], [data-category="print"], [data-category="social"], [data-category="3d"]) .project-tile img {
  aspect-ratio: 1160 / 993;
  object-fit: contain;
  background: #141315;
}
.gallery[data-category="3d"] .project-tile img { aspect-ratio: 16 / 9; }
.category-arrow, .project-tile span::after { font-family: Arial, sans-serif; }
.project-dialog {
  width: min(94vw, 75rem);
  max-height: 94dvh;
  padding: clamp(1rem, 3vw, 2rem);
  border: 1px solid #525053;
  border-radius: .65rem;
  color: var(--ink);
  background: #141315;
}
.project-dialog::backdrop { background: #000c; }
body:has(.project-dialog[open]) { overflow: hidden; }
.viewer-heading, .viewer-controls { display: flex; align-items: center; gap: .75rem; }
.viewer-heading { justify-content: space-between; }
.viewer-heading h2 { margin: 0; font-size: clamp(.95rem, 2vw, 1.35rem); }
.viewer-heading form { flex-shrink: 0; }
.viewer-controls { justify-content: center; margin-top: .75rem; }
.viewer-controls button { min-width: 3rem; font-size: 1.2rem; }
.project-dialog button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.project-dialog button:disabled { opacity: .35; cursor: default; }
.project-dialog button {
  padding: .5rem .75rem;
  border: 1px solid var(--accent);
  border-radius: .3rem;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}
.viewer-image {
  display: block;
  width: 100%;
  height: min(70dvh, 52rem);
  margin-top: .75rem;
  object-fit: contain;
}
@media (max-height: 500px) {
  .viewer-image { height: 55dvh; }
}