.look-closer-page { min-height: 100svh; overflow-x: hidden; background: #080a0c; color: #f0f0ea; }
.look-closer-main { min-height: 100svh; padding: clamp(110px, 13vh, 155px) clamp(20px, 4vw, 72px) 55px; background: radial-gradient(ellipse at 50% 20%, rgba(78, 93, 103, .2), transparent 52%), linear-gradient(#0d1115, #080a0c 70%); }
.look-closer-heading { display: flex; align-items: end; justify-content: space-between; gap: 40px; width: min(100%, 1500px); margin: 0 auto 25px; }
.look-closer-kicker { margin: 0 0 12px; color: #a8afb3; font: 700 10px var(--mono); letter-spacing: .19em; }
.look-closer-heading h1 { margin: 0; font: 900 clamp(68px, 10vw, 155px)/.75 var(--display); letter-spacing: -.022em; white-space: nowrap; }
.look-closer-heading h1 em { color: transparent; font-style: normal; -webkit-text-stroke: 1px #edf0ef; }
.look-closer-heading > p { width: min(400px, 32%); margin: 0 0 3px; color: #c6cbcd; font-size: clamp(15px, 1.15vw, 19px); line-height: 1.45; }
.look-closer-experience { width: min(100%, 1500px); margin: 0 auto; }
.look-closer-scene { position: relative; isolation: isolate; overflow: hidden; border: 1px solid rgba(229, 235, 235, .52); background: #151719; box-shadow: 0 28px 90px rgba(0, 0, 0, .5), inset 0 0 0 1px rgba(255, 255, 255, .14); }
.look-closer-scene canvas { display: block; width: 100%; aspect-ratio: 1672 / 941; background: #242424 url('assets/projects/look-closer-street-color.375349699022.webp') center / cover no-repeat; }
.look-closer-vignette { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at center, transparent 48%, rgba(0, 0, 0, .48) 100%); }
.look-closer-readout { position: absolute; z-index: 1; top: 19px; left: 23px; right: 23px; display: flex; justify-content: space-between; gap: 16px; color: #fff; font: 700 10px var(--mono); letter-spacing: .18em; text-shadow: 0 2px 8px #000, 0 0 13px #000; }
.look-closer-frame-label { position: absolute; z-index: 1; right: 23px; bottom: 17px; color: #fff; font: 700 9px var(--mono); letter-spacing: .18em; text-shadow: 0 2px 8px #000, 0 0 13px #000; }
.look-closer-controls { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 22px 0 18px; border-bottom: 1px solid rgba(221, 228, 229, .28); }
.look-closer-buttons { display: flex; flex-wrap: wrap; gap: 11px; }
.look-closer-buttons button { min-height: 47px; padding: 12px 17px; border: 1px solid #ededeb; background: #ededeb; color: #111; font: 800 11px var(--mono); letter-spacing: .1em; cursor: pointer; transition: background .2s, color .2s, transform .2s; }
.look-closer-buttons button:first-child { min-width: 230px; display: inline-flex; align-items: center; justify-content: space-between; gap: 16px; }
.look-closer-buttons button:first-child span { font-size: 18px; line-height: .5; }
.look-closer-buttons button:nth-child(2) { background: transparent; color: #f2f2ed; }
.look-closer-buttons button:not(:disabled):hover { transform: translateY(-2px); background: #9ecbff; border-color: #9ecbff; color: #07121e; }
.look-closer-buttons button:focus-visible, .look-closer-back:focus-visible, .look-closer-transcript summary:focus-visible { outline: 2px solid #9ecbff; outline-offset: 3px; }
.look-closer-buttons button:disabled { opacity: .43; cursor: default; }
.look-closer-controls p { margin: 0; color: #b8c3c8; font: 600 10px/1.5 var(--mono); letter-spacing: .07em; text-align: right; }
.look-closer-transcript { margin: 15px 0 0; color: #bbc4c7; font: 500 11px/1.55 var(--mono); letter-spacing: .03em; }
.look-closer-transcript summary { width: fit-content; color: #d7dfe1; cursor: pointer; font-weight: 700; letter-spacing: .1em; }
.look-closer-transcript p { max-width: 760px; margin: 10px 0 0; }
.look-closer-back { display: block; width: fit-content; margin: 35px auto 0; padding: 11px 0; color: #cbd6da; font: 700 11px var(--mono); letter-spacing: .12em; text-decoration: none; }
.look-closer-back:hover { color: #fff; text-decoration: underline; text-underline-offset: 5px; }

@media (max-width: 900px) {
  .look-closer-heading { align-items: start; flex-direction: column; gap: 15px; }
  .look-closer-heading > p { width: min(100%, 600px); }
}
@media (max-width: 600px) {
  .look-closer-main { padding: 92px 16px 32px; }
  .look-closer-heading { margin-bottom: 20px; }
  .look-closer-kicker { font-size: 8px; }
  .look-closer-heading h1 { font-size: clamp(62px, 15vw, 88px); white-space: normal; }
  .look-closer-heading > p { font-size: 14px; }
  .look-closer-readout { top: 9px; left: 10px; right: 10px; font-size: 6px; letter-spacing: .08em; }
  .look-closer-frame-label { right: 10px; bottom: 9px; font-size: 6px; }
  .look-closer-controls { align-items: stretch; flex-direction: column; gap: 13px; padding-top: 16px; }
  .look-closer-buttons { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
  .look-closer-buttons button { min-height: 44px; padding: 10px; font-size: 9px; }
  .look-closer-buttons button:first-child { min-width: 0; }
  .look-closer-controls p { text-align: left; }
}
@media (prefers-reduced-motion: reduce) {
  .look-closer-buttons button { transition: none; }
}