/* 426LAB — Work page / CSS-only redesign. HTML structure intentionally unchanged. */

.title1 {
  color:var(--ink);
  font-family:var(--f-head);
  font-size:clamp(12px,1vw,14px);
  font-weight:600;
  letter-spacing:.02em;
  text-transform:uppercase;
  margin-top:clamp(58px,8vw,104px);
  text-align:left;
}

.work-index {
  margin-top:clamp(58px,8vw,104px);
  border-top:0;
}
.work-row { border-bottom:1px solid var(--line); }
.work-row > summary {
  list-style:none;
  cursor:none;
  padding:clamp(20px,3.2vw,30px) 0;
  display:grid;
  grid-template-columns:minmax(220px,1.05fr) minmax(260px,1fr) 24px;
  align-items:center;
  gap:clamp(18px,4vw,60px);
  transition:padding var(--fast) var(--ease);
}
.work-row > summary::-webkit-details-marker,.work-row > summary::marker { display:none; content:""; }
.work-row > summary:hover { padding-left:8px; padding-right:8px; }
.work-row-name {
  font-family:var(--f-head);
  font-weight:600;
  font-size:clamp(24px,3.2vw,44px);
  text-transform:none;
  letter-spacing:-.035em;
  line-height:.98;
  transition:opacity var(--fast) var(--ease);
}
.work-row-desc {
  font-family:var(--f-head);
  font-weight:400;
  font-size:12px;
  line-height:1.35;
  color:var(--ink-soft);
  max-width:430px;
}
.work-row-indicator {
  width:20px;height:20px;flex-shrink:0;position:relative;justify-self:end;
}
.work-row-indicator::before,.work-row-indicator::after {
  content:"";position:absolute;top:50%;left:50%;background:var(--ink);
  transition:transform var(--fast) var(--ease);
}
.work-row-indicator::before{width:14px;height:1px;transform:translate(-50%,-50%);}
.work-row-indicator::after{width:1px;height:14px;transform:translate(-50%,-50%);}
.work-row[open] .work-row-indicator::after{transform:translate(-50%,-50%) rotate(90deg) scaleY(0);}
.work-row[open] > summary .work-row-name{opacity:.48;}

.work-row-panel { padding:0 0 clamp(26px,4vw,42px); }
.work-row-images {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(8px,1.2vw,16px);
  padding-left:clamp(0px,8vw,120px);
}
.work-row-images .frame {
  position:relative;display:block;width:100%;padding-top:100%;overflow:hidden;background:#e7e7e5;
}
.work-row-images .frame img { position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s var(--ease); }
.work-row-images .frame:hover img { transform:scale(1.025); }
.work-row-images .frame:only-child { grid-column:1/-1; max-width:620px; }

.work-preview {
  position:fixed;top:0;left:0;width:190px;height:190px;pointer-events:none;z-index:60;opacity:0;overflow:hidden;
  transition:opacity .25s var(--ease); border-radius:0;
}
.work-preview.is-active{opacity:1;}
.work-preview img{width:100%;height:100%;object-fit:cover;display:block;}
@media (hover:none),(pointer:coarse){.work-preview{display:none!important;}.work-row>summary{cursor:pointer;}}

.area-gallery { margin-top:clamp(70px,11vw,130px); }
.area-row { display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid var(--ink); }
.area-row span {
  padding:24px 14px;border-bottom:1px solid var(--ink);border-right:1px solid var(--line);
  display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;text-align:left;gap:12px;min-height:180px;
  transition:background var(--fast) var(--ease),padding var(--fast) var(--ease);
}
.area-row span:last-child{border-right:none;}
.area-row span:hover{background:var(--white);padding-top:20px;}
.area-row span strong{font-family:var(--f-head);font-weight:600;font-size:14px;line-height:1.1;letter-spacing:-.015em;}
.description{font-family:var(--f-head);font-size:11px;color:var(--ink-soft);line-height:1.45;max-width:180px;}

.contactQuote1{color:var(--ink);font-family:var(--f-head);font-weight:600;font-size:clamp(14px,1.7vw,19px);line-height:1.05;text-transform:uppercase;letter-spacing:.015em;}
.contactQuote2{color:var(--ink-soft);font-family:var(--f-head);font-weight:400;font-size:clamp(20px,3vw,30px);line-height:1.05;letter-spacing:-.035em;text-transform:none;margin-top:5px;}

@media (max-width:900px){
  .work-row>summary{grid-template-columns:minmax(190px,1fr) minmax(180px,1fr) 24px;gap:22px;}
  .work-row-images{padding-left:0;}
  .area-row{grid-template-columns:repeat(2,1fr);}
  .area-row span{border-right:none;}
}
@media (max-width:640px){
  .work-row>summary{grid-template-columns:1fr 20px;gap:12px;padding:19px 0;}
  .work-row-desc{display:none;}
  .work-row-name{font-size:clamp(24px,8vw,34px);}
  .work-row-images{grid-template-columns:repeat(2,1fr);gap:6px;}
  .area-row{grid-template-columns:1fr;}
  .area-row span{min-height:0;padding:20px 12px;border-right:none;}
}
@media(max-width:640px){
  .work-index{margin-top:28px}
  .work-row>summary{padding:16px 0;min-height:58px}
  .work-row-name{font-size:clamp(22px,7.6vw,32px);letter-spacing:-.04em}
  .work-row-indicator{width:18px;height:18px}
  .work-row-images{grid-template-columns:1fr 1fr;gap:5px;padding-top:2px}
  .work-row-panel{padding-bottom:24px}
  .area-gallery{margin-top:55px}
  .area-row span{padding:18px 0}
  .area-row span strong{font-size:13px}
  .description{font-size:11px;max-width:none}
}