/* Pumares-specific modal styling lives in modal-pumares.css */
/* Work Modal */
.workModal {
  border: none;
  padding: 0;
  width: 100%;
  max-width: none;
  height: 100svh;
  max-height: none;
  border-radius: 0;
  background: var(--work-bg, var(--cream));
  color: var(--work-fg, #111);
  margin: 0;
  box-sizing: border-box;
}

.workVideo { position: relative; }
.workVideoToggle {
  position: absolute;
  z-index: 8;
  right: 14px;
  bottom: 14px;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(255,255,255,.32);
  border-radius: 50%;
  background: rgba(8,8,8,.46);
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: 0 6px 22px rgba(0,0,0,.22), inset 0 0 0 1px rgba(255,255,255,.05);
  backdrop-filter: blur(12px) saturate(.8);
  -webkit-backdrop-filter: blur(12px) saturate(.8);
  transition: background 180ms var(--ease), border-color 180ms var(--ease), transform 180ms var(--ease);
}
.workVideoToggle:hover,
.workVideoToggle:focus-visible {
  background: rgba(8,8,8,.7);
  border-color: rgba(255,255,255,.68);
  transform: scale(1.04);
  outline: 2px solid rgba(255,255,255,.92);
  outline-offset: 3px;
}
.workVideoIcon{ display: none; position: relative; }
.workVideoToggle[data-state="play"] .workVideoIcon--play{
  display: block;
  width: 0;
  height: 0;
  margin-left: 3px;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-left: 11px solid currentColor;
}
.workVideoToggle[data-state="pause"] .workVideoIcon--pause{
  display: block;
  width: 12px;
  height: 14px;
  border-left: 4px solid currentColor;
  border-right: 4px solid currentColor;
}
.workModal[open] {
  position: fixed;
  inset: 0;
  overflow-y: auto;
  z-index: 1000;
  overscroll-behavior: contain;
}
.workModal::backdrop { background: transparent; }

.workShell {
  --shell-pad: clamp(14px, 1.8vw, 24px);
  --content-max: min(1480px, 96vw);
  --content-narrow: min(1220px, 94vw);
  --work-image-radius: 0px;
  display: grid;
  gap: clamp(18px, 2.6vw, 32px);
  padding: var(--shell-pad);
  min-height: 100svh;
  box-sizing: border-box;
  color: var(--work-fg, #111);
  background: transparent;
  max-width: min(1560px, 100vw);
  margin: 0 auto;
}

.workTopbar{
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: clamp(10px, 2vw, 20px) 0;
  background: transparent;
  backdrop-filter: none;
  border-radius: 0;
  box-shadow: none;
}
.workTopMeta{
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}
.workIndex{
  font: 600 11px/1 var(--sans);
  letter-spacing: .45em;
  text-transform: uppercase;
  opacity: .6;
  font-variant-numeric: tabular-nums;
}
.workMetaInline{
  font: 600 10px/1.2 var(--sans);
  letter-spacing: .32em;
  text-transform: uppercase;
  opacity: .75;
}
.workMetaInline:empty{ display: none; }
.workTopActions{
  display: flex;
  align-items: center;
  gap: 14px;
}
.workTopNav{
  display: none;
  align-items: center;
  gap: 18px;
}
.workPager{
  display: flex;
  gap: 14px;
}
.workPager button,
.workTopNav button,
.workModal .close{
  border: none;
  background: transparent;
  color: currentColor;
  padding: 0;
  cursor: pointer;
  font: 600 11px/1 var(--sans);
  letter-spacing: .34em;
  text-transform: uppercase;
}
.workPager button:focus-visible,
.workModal .close:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

.workScrollIndicator{
  position: fixed;
  left: clamp(12px, 2vw, 26px);
  top: 20vh;
  height: 58vh;
  width: 2px;
  background: color-mix(in oklab, var(--work-fg) 18%, transparent);
  z-index: 6;
  border-radius: 999px;
  overflow: hidden;
  opacity: 0;
  transition: opacity 200ms var(--ease);
}
.workScrollIndicator span{
  display: block;
  width: 100%;
  height: 100%;
  background: color-mix(in oklab, var(--work-fg) 65%, transparent);
  transform-origin: top;
  transform: scaleY(var(--scroll, 0));
  transition: transform 120ms linear;
}

.workArticle{
  display: grid;
  gap: clamp(20px, 3vw, 36px);
  padding-bottom: clamp(40px, 8vw, 80px);
}
.workHeader{ max-width: 70ch; }
.workStatement{
  margin: 0 0 6px;
  font: 600 11px/1.2 var(--sans);
  letter-spacing: .4em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--work-fg) 65%, #666 35%);
}
.workStatement:empty{ display: none; }
#workTitle{
  margin: 0 0 8px;
  font: 600 clamp(30px, 4vw, 60px)/1.05 var(--serif-strong);
  letter-spacing: 0.01em;
}
.workLead{
  margin: 0;
  font: 500 clamp(16px, 1.8vw, 20px)/1.7 var(--serif);
  color: color-mix(in oklab, var(--work-fg) 75%, #666 25%);
}
.workLead:empty{ display:none; }
.workSub{
  margin: 8px 0 0;
  font: 500 13px/1.6 var(--sans);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--work-fg) 60%, #666 40%);
}
.workSub:empty{ display:none; }

.workHero{
  margin: 0;
  display: grid;
  gap: 12px;
  position: relative;
}
.workHero img{
  width: 100%;
  height: auto;
  border-radius: var(--work-image-radius);
  box-shadow: none;
  cursor: zoom-in;
}
.workHero figcaption{
  display: grid;
  gap: 4px;
  font: 600 10px/1.4 var(--sans);
  letter-spacing: .3em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--work-fg) 70%, #666 30%);
}

.workShell[data-layout="saisei"] .workHero{
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  overflow: hidden;
  order: 1;
  margin-top: calc(var(--shell-pad) * -1);
}
.workShell[data-layout="saisei"] .workHero img{
  height: clamp(380px, 64vh, 760px);
  object-fit: cover;
  position: relative;
  z-index: 0;
  opacity: 1;
  filter: brightness(.74) saturate(.9) contrast(1.04);
}
.workShell[data-layout="saisei"] .workHero::before{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(94deg, rgba(0,0,0,.58) 0%, rgba(0,0,0,.2) 48%, rgba(0,0,0,.5) 100%);
  z-index: 1;
}
.workShell[data-layout="saisei"] .workHero::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: clamp(130px, 22vh, 320px);
  background: linear-gradient(
    180deg,
    color-mix(in oklab, var(--work-bg) 6%, transparent) 0%,
    color-mix(in oklab, var(--work-bg) 42%, transparent) 54%,
    var(--work-bg) 100%
  );
  z-index: 2;
}
.workShell[data-layout="saisei"] .workHero figcaption{
  display: none;
}
.workModal.is-hero-past .workScrollIndicator{
  opacity: 1;
}
.workHeroOverlay{
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  align-content: center;
  justify-items: start;
  gap: clamp(10px, 1.6vw, 20px);
  padding: clamp(30px, 6.6vw, 98px);
  color: #f4f1ea;
  pointer-events: none;
}
.workHeroOverlay .heroKicker{
  font: 600 clamp(13px, 1.2vw, 17px)/1.2 var(--sans);
  letter-spacing: .3em;
  text-transform: uppercase;
  opacity: .88;
}
.workHeroOverlay .heroTitle{
  margin: 0;
  font: 800 clamp(42px, 7.4vw, 112px)/.92 var(--display);
  letter-spacing: .035em;
  text-transform: uppercase;
  max-width: 18ch;
}
.workHeroOverlay .heroMeta{
  font: 600 clamp(13px, 1.25vw, 17px)/1.25 var(--sans);
  letter-spacing: .16em;
  text-transform: uppercase;
  opacity: .9;
}

.workShell[data-layout="saisei"] .workHeader{
  order: 2;
  width: calc(100% - (var(--shell-pad) * 2));
  max-width: min(1600px, 98vw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(170px, 0.14fr) minmax(0, 0.86fr);
  gap: clamp(10px, 1.4vw, 20px);
  align-items: start;
}
.workShell[data-layout="saisei"] #workTitle{
  display: none;
}
.workShell[data-layout="saisei"] .workLead{
  font: 500 clamp(18px, 1.8vw, 24px)/1.26 var(--serif);
  font-style: italic;
  letter-spacing: 0;
  text-transform: none;
  color: color-mix(in oklab, var(--work-fg) 85%, #666 15%);
  grid-column: 2;
  max-width: none;
  white-space: nowrap;
  text-wrap: balance;
}
.workShell[data-layout="saisei"] .workSub{
  display: none;
}
.workShell[data-layout="saisei"] .workStatement{
  grid-column: 1;
  align-self: start;
  margin: 0;
  padding-left: 16px;
  position: relative;
  max-width: 26ch;
  font-size: 11px;
  line-height: 1.45;
  letter-spacing: .18em;
}
.workShell[data-layout="saisei"] .workStatement::before{
  content: "";
  position: absolute;
  left: 0;
  top: .2em;
  bottom: .2em;
  width: 2px;
  background: color-mix(in oklab, var(--work-fg) 40%, transparent);
}
.workShell[data-layout="saisei"] .workGallery{
  order: 3;
  margin-top: clamp(-8px, -1.1vh, -14px);
  padding-top: clamp(10px, 2.3vh, 28px);
  position: relative;
  z-index: 4;
  isolation: isolate;
}
.workShell[data-layout="saisei"] .workGallery::before{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: clamp(80px, 12vh, 170px);
  background: linear-gradient(
    180deg,
    color-mix(in oklab, var(--work-bg) 8%, transparent) 0%,
    color-mix(in oklab, var(--work-bg) 46%, transparent) 56%,
    var(--work-bg) 100%
  );
  pointer-events: none;
  z-index: 0;
}
.workShell[data-layout="saisei"] .workGallery > *{
  position: relative;
  z-index: 1;
}
.workShell[data-layout="saisei"] .workEnd{ order: 4; }
.workShell[data-layout="saisei"]{
  padding-top: 0;
}
.workShell[data-layout="saisei"] .workTopbar{
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  padding: clamp(16px, 2.4vw, 28px) var(--shell-pad);
  background: transparent;
  backdrop-filter: none;
  color: #f4f1ea;
  text-shadow: 0 2px 12px rgba(0,0,0,.4);
  border-radius: 0;
  box-shadow: none;
}
.workShell[data-layout="saisei"] .workTopMeta{
  display: none;
}
.workShell[data-layout="saisei"] .workTopNav{
  display: flex;
  margin-left: auto;
}
.workShell[data-layout="saisei"] .workTopActions{
  order: -1;
}
.workShell[data-layout="saisei"] .workTopActions .close{
  font: 600 11px/1 var(--sans);
  letter-spacing: .34em;
  text-transform: uppercase;
}
.workShell[data-layout="saisei"] .workTopActions .close::before{
  content: "← ";
  letter-spacing: .34em;
}
.workShell[data-layout="saisei"] .workTopNav button{
  font-size: 12px;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: inherit;
  opacity: .85;
  position: relative;
  background: transparent;
  border: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: left calc(100% + 4px);
  background-size: 0% 1px;
  transition: background-size 200ms var(--ease), opacity 200ms var(--ease);
}
.workShell[data-layout="saisei"] .workTopNav button:hover,
.workShell[data-layout="saisei"] .workTopNav button:focus-visible{
  background-size: 100% 1px;
  opacity: .95;
}
.workShell[data-layout="saisei"] .workTopNav .prev::before{
  content: none;
}
.workShell[data-layout="saisei"] .workTopNav .next::after{
  content: none;
}