/* =========================================================================
   制作実績 (Works) — screenshot grid of the live client sites, filterable by
   industry. Each card is one <a> straight out to the published site, so the
   whole tile is the hit area and the hover state reads as "this opens a site"
   rather than "this opens a case study we don't have".
   ========================================================================= */

/* ---- Hero ---- */
/* The oversized Archivo wordmark from the prototype. Same treatment as the
   ABOUT / COLUMN heroes: an English display h1 with the Japanese framing
   sentence carrying the actual message underneath it. */
.ms-works-hero__h1 {
  font-family: var(--ms-font-display);
  font-size: clamp(48px, 12vw, 180px);
  font-weight: 900;
  line-height: .9;
  letter-spacing: -.045em;
  color: var(--ms-dark);
}

.ms-works-hero__statement {
  font-family: var(--ms-font-head);
  font-size: clamp(19px, 2.6vw, 34px);
  font-weight: 800;
  line-height: 1.5;
  letter-spacing: -.02em;
  color: var(--ms-dark);
  margin-top: clamp(14px, 1.8vw, 24px);
}

/* ---- Industry filter ---- */
.ms-work-filter {
  display: flex; flex-wrap: wrap; gap: 8px;
  padding-bottom: clamp(20px, 2.4vw, 30px);
  border-bottom: 1px solid rgba(17,17,17,.16);
}
.ms-work-filter__btn {
  min-height: 40px; padding: 9px 15px;
  font-size: 12px; font-weight: 600;
  border: 1px solid rgba(17,17,17,.22);
  background: transparent; color: #333029;
  border-radius: 0; cursor: pointer;
  transition: background .25s ease, color .25s ease, border-color .25s ease;
}
.ms-work-filter__btn:hover { border-color: var(--ms-dark); }
.ms-work-filter__btn[aria-pressed="true"] {
  background: var(--ms-dark); border-color: var(--ms-dark); color: var(--ms-bg);
}

/* ---- Grid ---- */
.ms-works-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 2.6vw, 40px);
}

.ms-work { display: flex; flex-direction: column; min-width: 0; color: var(--ms-dark); }
/* The filter hides cards with the `hidden` attribute; an author `display` rule
   outranks the UA stylesheet's [hidden] rule, so restate it here. */
.ms-work[hidden] { display: none; }

/* 16:10 (1.6) rather than the prototype's 4:3. The screenshots sit at 1.58
   (400x253 / 1425x902), so a 4:3 tile cropped ~16% off their sides and cut into
   the site headers; at 16:10 the crop is ~1% off the top/bottom instead and the
   full-width shot survives. Card proportions stay landscape, so the grid still
   reads the way the Claude Design page does.
   The tile drives the geometry, not the file: aspect-ratio + object-fit:cover
   means a higher-resolution replacement of any screenshot needs no CSS change. */
.ms-work__shot {
  position: relative; display: block; width: 100%; aspect-ratio: 16/10;
  overflow: hidden; background: var(--ms-placeholder-bg);
  border: 1px solid var(--ms-hairline-light);
}
.ms-work__img {
  position: absolute; inset: 0; display: block;
  transition: transform .7s cubic-bezier(.16,1,.3,1);
}
.ms-work__img img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.ms-work:hover .ms-work__img { transform: scale(1.04); }

/* Shown until the site's screenshot lands in assets/img/works/. */
.ms-work__placeholder {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 16px; text-align: center;
  font-size: 11.5px; line-height: 1.8; color: var(--ms-note);
}

.ms-work__veil {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(17,17,17,.55);
  opacity: 0; transition: opacity .45s ease;
}
.ms-work:hover .ms-work__veil, .ms-work:focus-visible .ms-work__veil { opacity: 1; }
.ms-work__veil span {
  font-family: var(--ms-font-display);
  font-size: 12px; font-weight: 700; letter-spacing: .18em;
  color: var(--ms-bg);
  border: 1px solid rgba(245,244,240,.7);
  padding: 11px 20px;
}

.ms-work__foot {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; padding-top: 14px;
}
.ms-work__cat { font-family: var(--ms-font-head); font-size: 14px; font-weight: 700; line-height: 1.5; }
.ms-work__link {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px;
  font-size: 12.5px; font-weight: 600; color: #6E6B63; white-space: nowrap;
  transition: color .3s ease;
}
.ms-work__link span { font-family: var(--ms-font-display); }
.ms-work:hover .ms-work__link { color: var(--ms-accent); }

.ms-works-grid__empty { grid-column: 1 / -1; padding-block: 32px; }

.ms-works-foot-links { display: flex; flex-wrap: wrap; gap: 14px; margin-top: clamp(20px, 2.4vw, 30px); }

/* Breakpoints follow the theme's own: 1000px is where the header swaps to its
   mobile skin and the bottom bar appears, 640px is the theme's phone cutoff. */
@media (max-width: 1000px) {
  .ms-works-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .ms-works-grid { grid-template-columns: 1fr; }
}

/* Hover-driven affordances don't exist on touch, so keep the veil off and let
   the caption row carry the "opens the live site" cue instead. */
@media (hover: none) {
  .ms-work__veil { display: none; }
}