:root {
  --orange: #ff8a16;
  --dark: #fff;
  --panel: #fff;
  --line: #e6e8e8;
  --text: #151a1d;
  --muted: #5c646a;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--dark); color: var(--text); font: 16px Manrope, Arial, sans-serif; }
.detail-header { height: 76px; display: flex; align-items: center; background: #fff; border-bottom: 1px solid var(--line); }
.detail-header .wrap, .project-detail-page { width: min(1380px, calc(100% - 48px)); margin: auto; }
.detail-header .wrap { display: flex; align-items: center; justify-content: space-between; }
.detail-header img { width: 205px; height: 63px; object-fit: contain; }
.detail-back { color: #252b2e; text-decoration: none; font-weight: 800; font-size: 13px; }
.detail-back:hover { color: var(--orange); }
.project-detail-page { padding: 56px 0 72px; }
.detail-kicker { margin: 0 0 12px; color: var(--orange); font-size: 13px; font-weight: 800; letter-spacing: 2px; }
.project-detail-page h1 { font: 800 clamp(36px, 5vw, 63px)/1.05 'Plus Jakarta Sans'; letter-spacing: -2px; margin: 0 0 16px; }
.detail-summary { max-width: 760px; color: var(--muted); font-size: 18px; line-height: 1.55; margin: 0 0 43px; }
.detail-layout { display: grid; grid-template-columns: minmax(0, 1.9fr) minmax(320px, .9fr); gap: 28px; align-items: start; }
.gallery-widget { min-width: 0; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; box-shadow: 0 8px 25px #1a202812; }
.gallery-stage { width: min(100%, 600px); aspect-ratio: 1 / 1; margin-inline: auto; position: relative; background: #f5f6f5; display: grid; place-items: center; cursor: pointer; }
.gallery-stage img { display: block; width: 100%; height: 100%; object-fit: contain; }
.gallery-tag, .gallery-count, .gallery-fullscreen { position: absolute; z-index: 1; top: 16px; border-radius: 6px; background: #ffffffeb; color: #252b2e; font-weight: 800; font-size: 12px; box-shadow: 0 2px 9px #0001; }
.gallery-tag { left: 16px; padding: 8px 12px; color: var(--orange); }
.gallery-count { right: 62px; padding: 8px 12px; }
.gallery-fullscreen { right: 16px; width: 35px; height: 35px; border: 0; cursor: pointer; color: var(--orange); font-size: 18px; }
.gallery-thumbs { width: min(100%, 600px); margin-inline: auto; display: flex; flex-wrap: nowrap; gap: 10px; overflow-x: auto; overflow-y: hidden; padding: 12px; border-top: 1px solid var(--line); scroll-snap-type: x proximity; scrollbar-width: thin; }
.gallery-thumbs button { flex: 0 0 84px; width: 84px; height: 62px; padding: 0; border: 2px solid transparent; border-radius: 6px; overflow: hidden; background: #f1f3f2; cursor: pointer; scroll-snap-align: start; }
.gallery-thumbs button.active { border-color: var(--orange); }
.gallery-thumbs img { display: block; width: 100%; height: 100%; object-fit: contain; }
.work-card { padding: 30px; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 8px 25px #1a202812; }
.work-card h2 { font: 800 29px 'Plus Jakarta Sans'; color: var(--orange); letter-spacing: -1px; margin: 0 0 16px; }
.work-card p { color: var(--muted); font-size: 15px; line-height: 1.6; margin: 0 0 20px; }
.work-card ul { padding-left: 21px; margin: 0; color: #30373a; }
.work-card li { margin: 0 0 15px; line-height: 1.5; }
.detail-footer { border-top: 1px solid var(--line); padding: 24px; text-align: center; color: #626a6d; font-size: 12px; background: #f8f9f8; }

@media (max-width: 850px) {
  .project-detail-page { padding-top: 38px; }
  .detail-layout { grid-template-columns: 1fr; }
  .work-card { padding: 25px; }
}

@media (max-width: 520px) {
  .detail-header { height: 65px; }
  .detail-header .wrap, .project-detail-page { width: calc(100% - 28px); }
  .detail-header img { width: 158px; height: 52px; }
  .detail-back { font-size: 11px; }
  .project-detail-page h1 { font-size: 38px; }
  .detail-summary { font-size: 16px; margin-bottom: 28px; }
  .gallery-thumbs button { flex-basis: 70px; width: 70px; height: 53px; }
  .work-card h2 { font-size: 25px; }
  .project-detail-page { padding-bottom: 45px; }
}