/* Websight Studios — 02b Work: featured before/after, case study, supporting projects */

.work { overflow: clip; }
.work__head { margin-bottom: var(--s-16); }
.work__title { font-size: var(--fs-h2); max-width: 15ch; }

/* ---------- Featured project ---------- */
.feature { margin-bottom: var(--s-32); }
.feature__intro { display: grid; gap: var(--s-6); margin-bottom: var(--s-12); }
.feature__status { margin: 0; color: var(--c-iris-glow); }
.feature__status span { margin: 0 0.4em; color: var(--text-on-dark-muted); }
.feature__name { margin: 0; font-family: var(--f-display); font-stretch: 122%; font-weight: 800; font-size: clamp(3rem, 12vw, 10rem); line-height: 0.85; letter-spacing: -0.045em; }
.feature__role { margin: 0; color: var(--text-on-dark-muted); }
.feature__role span { margin: 0 0.4em; }
.feature__line { margin: 0; max-width: 44ch; font-size: var(--fs-lg); line-height: 1.4; color: var(--text-on-dark-muted); }
@media (min-width: 900px) {
  .feature__intro { grid-template-columns: auto 1fr; align-items: end; column-gap: var(--s-16); }
  .feature__status, .feature__role { grid-column: 1 / -1; }
  .feature__role { order: 3; }
}

/* ---------- Before / after compare ---------- */
.ba { margin: 0; }
.ba__controls { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-4); margin-bottom: var(--s-5); }
.ba__group { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.ba__group button, .pillbtn {
  min-height: 44px; padding: 0 var(--s-5); border-radius: var(--r-pill);
  border: 1px solid var(--rule-on-dark); font-family: var(--f-mono); font-size: var(--fs-sm); color: var(--c-sclera);
  transition: background-color var(--d-base) var(--ease-out), color var(--d-base), border-color var(--d-base);
}
.ba__group button:hover, .pillbtn:hover { border-color: var(--c-sclera); }
.ba__group button[aria-pressed="true"] { background: var(--c-sclera); color: var(--c-ink); border-color: var(--c-sclera); }

.ba__stage { --pos: 50%; position: relative; border-radius: var(--r-card); overflow: hidden; background: var(--c-graphite); border: 1px solid var(--rule-on-dark); }
.ba__chrome { display: flex; justify-content: space-between; gap: var(--s-4); padding: 12px var(--s-5); font-family: var(--f-mono); font-size: var(--fs-xs); color: var(--text-on-dark-muted); border-bottom: 1px solid var(--rule-on-dark); }
.ba__chrome span { display: inline-flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; white-space: nowrap; }
.ba__chrome i { width: 9px; height: 9px; border: 1px solid currentColor; }
.ba__chrome i:last-of-type { margin-right: var(--s-3); }

.ba__view { position: relative; aspect-ratio: 1440 / 900; touch-action: pan-y; cursor: ew-resize; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
.ba__view img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; pointer-events: none; -webkit-user-drag: none; }
.ba__before { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--pos)) 0 0); }

.ba__handle { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; margin-left: -1px; background: var(--c-iris-glow); pointer-events: none; }
.ba__handle span {
  position: absolute; top: 50%; left: 50%; width: 56px; height: 56px; transform: translate(-50%, -50%);
  display: grid; place-items: center; border-radius: 50%;
  background: var(--c-ink); border: 2px solid var(--c-iris-glow); color: var(--c-iris-glow);
  font-family: var(--f-mono); font-size: 1.6rem; line-height: 1;
}
.ba__view:has(.ba__range:focus-visible) .ba__handle span { outline: 2px solid var(--focus-ring); outline-offset: 4px; }

.ba__tag { position: absolute; top: var(--s-4); display: inline-flex; flex-direction: column; gap: 2px; padding: 8px 12px; border-radius: 12px; background: rgba(11, 11, 11, 0.82); color: var(--c-sclera); pointer-events: none; transition: opacity var(--d-base); }
.ba__tag--before { left: var(--s-4); }
.ba__tag--after { right: var(--s-4); text-align: right; color: var(--c-iris-glow); }
.ba__tag-sub { text-transform: none; letter-spacing: 0; color: var(--text-on-dark-muted); }
.ba__stage.is-after .ba__tag--before, .ba__stage.is-before .ba__tag--after { opacity: 0; }

/* the range input is the accessible control: keyboard and screen readers use it, pointer input is handled on the view */
.ba__range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; pointer-events: none; }

/* phone frame for the mobile pair */
.ba__stage[data-device="mobile"] { width: min(100%, 360px); margin: 0 auto; border: 10px solid var(--c-graphite); border-radius: 40px; }
.ba__stage[data-device="mobile"] .ba__chrome { display: none; }
.ba__stage[data-device="mobile"] .ba__view { aspect-ratio: 720 / 1400; }
.ba__stage[data-device="mobile"] .ba__tag { top: var(--s-3); padding: 6px 9px; }
.ba__stage[data-device="mobile"] .ba__tag-sub { display: none; }

.ba__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin-top: var(--s-5); }
.ba__hint { margin-left: auto; color: var(--text-on-dark-muted); }
.ba__caption { margin-top: var(--s-4); max-width: 70ch; font-family: var(--f-mono); font-size: var(--fs-sm); color: var(--text-on-dark-muted); }
@media (max-width: 640px) { .ba__hint { margin-left: 0; width: 100%; } }

/* no JavaScript: both screenshots stacked, nothing hidden */
html:not(.js) .ba__controls, html:not(.js) .ba__actions, html:not(.js) .ba__handle, html:not(.js) .ba__range { display: none; }
html:not(.js) .ba__view { aspect-ratio: auto; display: grid; gap: var(--s-2); cursor: auto; }
html:not(.js) .ba__view img, html:not(.js) .ba__before { position: relative; clip-path: none; height: auto; }
html:not(.js) .ba__tag { position: static; }

/* ---------- Case study ---------- */
.case { display: grid; gap: var(--s-10); margin-top: var(--s-16); padding-top: var(--s-12); border-top: 1px solid var(--rule-on-dark); }
.case__h { margin: 0 0 var(--s-3); color: var(--c-iris-glow); font-weight: 400; }
.case__col p { margin: 0; color: var(--text-on-dark-muted); max-width: 46ch; }
@media (min-width: 900px) {
  .case { grid-template-columns: repeat(3, 1fr); column-gap: var(--s-12); }
  .case__col--wide { grid-column: 1 / -1; order: 4; }
}
.navmap { display: grid; gap: var(--s-4); padding: var(--s-6); border-radius: var(--r-card); border: 1px solid var(--rule-on-dark); margin-bottom: var(--s-8); }
.navmap__row { display: grid; gap: var(--s-3); }
.navmap__k { color: var(--text-on-dark-muted); }
.navmap__items { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-2); }
.navmap__items li { padding: 6px 12px; border-radius: var(--r-pill); border: 1px solid var(--rule-on-dark); font-family: var(--f-mono); font-size: var(--fs-sm); color: var(--text-on-dark-muted); }
.navmap__row--after .navmap__items li { border-color: var(--c-iris-glow); color: var(--c-iris-glow); }
.navmap__note { margin: 0; font-size: var(--fs-sm); color: var(--text-on-dark); }
@media (min-width: 700px) { .navmap__row { grid-template-columns: 80px 1fr; align-items: center; } }
.changes { overflow-x: auto; }
.changes table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.changes caption { text-align: left; margin-bottom: var(--s-4); color: var(--text-on-dark-muted); }
.changes th, .changes td { text-align: left; vertical-align: top; padding: var(--s-4) var(--s-4) var(--s-4) 0; border-bottom: 1px solid var(--rule-on-dark); }
.changes thead th { font-family: var(--f-mono); font-weight: 400; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-on-dark-muted); }
.changes thead th:last-child { color: var(--c-iris-glow); }
.changes tbody th { font-weight: 600; color: var(--c-sclera); width: 18%; }
.changes tbody td { color: var(--text-on-dark-muted); }
.changes tbody td:last-child { color: var(--c-sclera); }
@media (max-width: 640px) {
  .changes thead { display: none; }
  .changes tr { display: grid; gap: var(--s-1); padding: var(--s-4) 0; border-bottom: 1px solid var(--rule-on-dark); }
  .changes th, .changes td { padding: 0; border: 0; width: auto !important; }
  .changes tbody td:nth-of-type(1)::before { content: 'Before: '; font-family: var(--f-mono); font-size: var(--fs-xs); color: var(--text-on-dark-muted); }
  .changes tbody td:nth-of-type(2)::before { content: 'After: '; font-family: var(--f-mono); font-size: var(--fs-xs); color: var(--c-iris-glow); }
}
.case__why { margin: var(--s-6) 0 0; max-width: 64ch; color: var(--text-on-dark); }
.case__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-4); color: var(--text-on-dark-muted); }
.case__list li { position: relative; padding-left: 1.4em; max-width: 52ch; }
.case__list li::before { content: '/'; position: absolute; left: 0; color: var(--c-iris-glow); font-family: var(--f-mono); }
@media (min-width: 900px) { .case__list { grid-template-columns: 1fr 1fr; column-gap: var(--s-12); } }

/* ---------- Supporting projects ---------- */
.projects { display: grid; gap: var(--s-24); }
.projects > * { min-width: 0; } /* a wide child must never stretch the whole column */
.project { display: grid; gap: var(--s-8); align-items: center; }
.project__media { position: relative; padding: 0 18% var(--s-10) 0; }
.win { border-radius: 16px; overflow: hidden; background: var(--c-graphite); border: 1px solid var(--rule-on-dark); }
.win__bar { display: flex; align-items: center; gap: 6px; padding: 9px 14px; font-family: var(--f-mono); font-size: var(--fs-xs); color: var(--text-on-dark-muted); border-bottom: 1px solid var(--rule-on-dark); }
.win__bar i { width: 8px; height: 8px; border: 1px solid currentColor; }
.win__bar em { font-style: normal; margin-left: var(--s-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.win img { width: 100%; height: auto; aspect-ratio: 1440 / 900; object-fit: cover; object-position: top; }
.phone { position: absolute; right: 0; bottom: 0; width: 28%; border: 5px solid var(--c-graphite); border-radius: 20px; overflow: hidden; background: var(--c-graphite); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5); }
.phone img { width: 100%; height: auto; aspect-ratio: 720 / 1400; object-fit: cover; object-position: top; }
.project__status { margin: 0 0 var(--s-3); color: var(--c-iris-glow); }
.project__status span { margin: 0 0.4em; color: var(--text-on-dark-muted); }
.project__name { margin: 0; font-family: var(--f-display); font-stretch: 118%; font-weight: 780; font-size: clamp(2.25rem, 5vw, 4rem); line-height: 0.92; letter-spacing: -0.035em; }
.project__sector { margin: var(--s-3) 0 var(--s-6); color: var(--text-on-dark-muted); }
.project__desc { margin: 0; max-width: 42ch; color: var(--text-on-dark); }
.project__sub { margin: var(--s-8) 0 var(--s-3); color: var(--text-on-dark-muted); font-weight: 400; }
.project__decisions { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); color: var(--text-on-dark-muted); }
.project__decisions li { position: relative; padding-left: 1.4em; max-width: 46ch; }
.project__decisions li::before { content: '/'; position: absolute; left: 0; color: var(--c-iris-glow); font-family: var(--f-mono); }
.project__note { margin: var(--s-5) 0 0; font-family: var(--f-mono); font-size: var(--fs-xs); color: var(--text-on-dark-muted); }
@media (min-width: 900px) {
  .project { grid-template-columns: 1.35fr 1fr; gap: var(--s-16); }
  .project:nth-of-type(even) .project__media { order: 2; padding: 0 0 var(--s-10) 18%; }
  .project:nth-of-type(even) .phone { right: auto; left: 0; }
}

/* ---------- Your project here (was the [ void ] section) ---------- */
.next { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--s-4); padding-top: var(--s-16); border-top: 1px solid var(--rule-on-dark); text-align: center; }
.next__br { font-family: var(--f-mono); font-weight: 300; font-size: clamp(5rem, 20vw, 16rem); line-height: 0.8; letter-spacing: -0.1em; color: var(--c-sclera); }
.next__inner { min-width: 0; display: grid; gap: var(--s-6); justify-items: center; }
.next__inner p { margin: 0; font-size: var(--fs-lg); max-width: 20ch; }
.next__caret { width: 3px; height: clamp(40px, 8vw, 96px); background: var(--c-iris-glow); animation: ws-blink 1.1s steps(1) infinite; }
@media (max-width: 480px) { .next .btn { padding: 0 var(--s-4); white-space: normal; text-align: center; } }

/* ---------- Services: platforms line ---------- */
.stack { margin-top: var(--s-12); }
.stack p { margin: 0; color: var(--text-on-light-muted); }
.stack__chips { list-style: none; padding: 0; margin: var(--s-4) 0 0; }

/* ---------- Dev-only markers (stripped by scripts/build.mjs, never deployed) ---------- */
.dev-marker { display: inline-block; max-width: 100%; overflow-wrap: anywhere; margin: 0 0 var(--s-6); padding: 6px 10px; font-family: var(--f-mono); font-size: var(--fs-xs); letter-spacing: 0.04em; color: #ff8a7a; background: rgba(192, 57, 43, 0.12); outline: 1px dashed #c0392b; outline-offset: 2px; }
.light .dev-marker { color: #a5291c; }