.discipline-page { background: radial-gradient(ellipse at 70% 6%,rgba(23,43,77,.65),transparent 40%),var(--ink); }
.discipline-page .studio-glow { opacity: .22; }
.discipline-page .site-header { background: var(--ink); }
.discipline-page main { display: block; place-items: normal; width: min(100%,1144px); min-height: calc(100svh - 60px); margin: 0 auto; padding: 112px 32px 64px; }
.discipline-page footer { position: relative; }
.text-link { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; min-width: 44px; color: #a9bdd3; font-size: 12px; text-decoration: none; }
.text-link:hover { color: var(--cyan); }
.discipline-intro { padding: 47px 0 45px; }
.section-kicker { margin: 0 0 16px; color: #92a9c4; font: 10px/1.5 var(--mono); text-transform: uppercase; letter-spacing: .16em; }
.discipline-intro h1 { margin: 0; color: var(--paper); font: 400 clamp(32px,4.7vw,62px)/1.08 var(--sans); letter-spacing: -.035em; text-wrap: balance; }
.discipline-line { color: #ccdae9; font-size: clamp(17px,2vw,23px); margin: 22px 0 14px; font-weight: 350; }
.discipline-lede { color: #9eafc4; max-width: 605px; font-size: 15px; line-height: 1.85; margin: 0; text-wrap: pretty; }
.discipline-overview { display: grid; grid-template-columns: 1.2fr 1fr; gap: 100px; padding: 30px 0 32px; border-top: 1px solid rgba(183,202,225,.17); border-bottom: 1px solid rgba(183,202,225,.17); }
.discipline-overview h2 { font-size: 14px; font-weight: 500; margin: 0 0 12px; }
.discipline-overview p { margin: 0; color: #9eafc4; font-size: 14px; line-height: 1.85; }
.service-list { padding: 0; margin: 0; list-style: none; }
.service-list li { padding: 12px 0; border-bottom: 1px solid rgba(183,202,225,.12); color: #c8d7e7; font-size: 13px; }
.service-list li:first-child { padding-top: 0; }.service-list li:last-child { border: none; padding-bottom: 0; }
.discipline-gallery { padding-top: 58px; }
.gallery-heading { display: flex; justify-content: space-between; align-items: end; gap: 48px; margin-bottom: 26px; }
.gallery-heading .section-kicker { margin-bottom: 10px; }
.gallery-heading h2 { margin: 0; font: 400 clamp(22px,2.6vw,30px)/1.2 var(--sans); letter-spacing: -.02em; }
.gallery-heading > p { color: #9eafc4; margin: 0; max-width: 370px; font-size: 12px; line-height: 1.75; }
.gallery-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 22px; }
.gallery-item { margin: 0; min-width: 0; }
.gallery-open { position: relative; display: block; width: 100%; min-height: 44px; border: 1px solid rgba(183,202,225,.19); border-radius: 5px; padding: 0; overflow: hidden; background: #0c1625; cursor: zoom-in; color: var(--paper); transition: border-color 180ms ease; }
.gallery-open:hover { border-color: rgba(140,238,255,.65); }
.gallery-open:disabled { cursor: default; }
.gallery-open:disabled .gallery-affordance { display:none; }
.gallery-affordance { position: absolute; display: flex; align-items: center; justify-content: space-between; gap: 12px; right: 12px; bottom: 12px; padding: 7px 10px; background: #0b1523; border: 1px solid #354b63; border-radius: 3px; color: #d7e9f8; font: 10px var(--sans); }
.gallery-media { width: 100%; aspect-ratio: 3 / 2; overflow: hidden; position: relative; background: #0b1422; }
.gallery-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.website-capture { padding: 14px; background: #101c2c; }
.website-capture img { object-fit: contain; }
.item-label { display: block; color: #8ea4bf; font: 9px/1.6 var(--mono); margin-top: 17px; letter-spacing: .06em; }
.gallery-item h3 { font-size: 16px; font-weight: 450; margin: 8px 0; }
.gallery-item figcaption p { color: #9eafc4; font-size: 12px; line-height: 1.75; margin: 0; }
.sibling-nav { margin-top: 64px; padding-top: 28px; border-top: 1px solid rgba(183,202,225,.17); }
.sibling-nav > div { display: flex; gap: 42px; flex-wrap: wrap; }
.sibling-link { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; gap: 24px; font-size: 13px; color: #d7e7f6; text-decoration: none; }
.sibling-link:hover { color: var(--cyan); }.sibling-link > span:last-child { color: var(--cyan); }
.gallery-dialog { width: min(1020px,calc(100vw - 32px)); max-height: calc(100svh - 32px); padding: 0; border: 1px solid #3c536e; border-radius: 7px; background: #0b1422; color: var(--paper); overflow: hidden; }
.gallery-dialog::backdrop { background: rgba(3,8,15,.91); }
.gallery-dialog[open] { display: flex; flex-direction: column; }
.dialog-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 18px; border-bottom: 1px solid #233449; flex: none; }
.dialog-top .section-kicker { margin: 0; }
.gallery-close { display: inline-flex; align-items: center; gap: 14px; min-height: 44px; min-width: 44px; flex: none; color: #d7e7f6; background: transparent; border: 0; font: 12px var(--sans); cursor: pointer; }
.gallery-close span { font-size: 25px; color: var(--cyan); }
.dialog-body { min-height: 0; overflow-y: auto; }
.dialog-art .gallery-media { height: min(53svh,510px); aspect-ratio: auto; }
.dialog-art img { object-fit: contain; }
.dialog-caption { padding: 20px 24px 25px; }
.dialog-caption h2 { margin: 0 0 8px; font-size: 20px; font-weight: 450; }
.dialog-caption p { margin: 0; color: #9eafc4; font-size: 13px; line-height: 1.7; }
.motion-toggle { margin-top: 16px; min-height: 44px; min-width: 100px; color: var(--cyan); border: 1px solid #607e94; border-radius: 3px; background: transparent; font: 12px var(--sans); cursor: pointer; }
.motion-note { padding-top: 12px; }
html:has(.gallery-dialog[open]) { overflow: hidden; }
/* Original preview studies. Static in the grid; movement starts only on request. */
.study { display: flex; align-items: center; justify-content: center; }
.study-mark { background: radial-gradient(ellipse at center,#203556,#0b1422 70%); }
.study-mark svg { width: 52%; height: 78%; filter: drop-shadow(0 0 12px rgba(140,238,255,.3)); }
.study-sweep { position: absolute; width: 25%; height: 200%; background: linear-gradient(90deg,transparent,rgba(183,255,232,.23),transparent); transform: translateX(-250%) rotate(25deg); animation: study-sweep 4.5s ease-in-out infinite paused; }
.study-type { flex-direction: column; font: 400 clamp(22px,3vw,38px)/1.2 var(--sans); letter-spacing: -.04em; }
.study-type span:first-child { color: #e3edf7; animation: study-type 4s ease-in-out infinite paused; }
.study-type span:nth-child(2) { color: var(--cyan); animation: study-type 4s .4s ease-in-out infinite paused; }
.study-type i { display: block; position: absolute; bottom: 21%; width: 38px; height: 1px; background: var(--cyan); animation: study-rule 4s ease-in-out infinite paused; }
.study-lines { flex-direction: column; gap: 12px; }
.study-lines span { display: block; width: 62%; height: 1px; background: linear-gradient(90deg,transparent,#8ceeff,transparent); transform: rotate(-16deg); animation: study-flow 5s ease-in-out infinite paused; }
.study-lines span:nth-child(2) { animation-delay: -.3s; opacity: .8; }.study-lines span:nth-child(3) { animation-delay: -.6s; opacity: .65; }.study-lines span:nth-child(4) { animation-delay: -.9s; opacity: .5; }.study-lines span:nth-child(5) { animation-delay: -1.2s; opacity: .35; }.study-lines span:nth-child(6) { animation-delay: -1.5s; opacity: .2; }
.study.is-playing * { animation-play-state: running; }
@keyframes study-sweep { 70%,100% { transform: translateX(250%) rotate(25deg); } }
@keyframes study-type { 35% { opacity: .32; translate: 0 6px; } 65%,100% { opacity: 1; translate: 0 0; } }
@keyframes study-rule { 50% { width: 90px; } }
@keyframes study-flow { 50% { transform: translateX(13%) rotate(13deg); } }
@media (max-width: 760px) { .discipline-page main { padding: 96px 24px 44px; } .discipline-intro { padding: 30px 0; } .discipline-overview { gap: 30px; } .gallery-heading { display: block; } .gallery-heading > p { margin-top: 15px; max-width: 500px; } .gallery-grid { gap: 16px; } .gallery-media { aspect-ratio: 1; } .gallery-item h3 { font-size: 15px; } }
@media (max-width: 540px) { .discipline-page main { padding-inline: 22px; } .discipline-intro h1 { max-width: 340px; } .discipline-overview { grid-template-columns: 1fr; gap: 24px; padding-block: 25px; } .discipline-gallery { padding-top: 38px; } .gallery-grid { grid-template-columns: 1fr; gap: 30px; } .gallery-media { aspect-ratio: 3/2; } .gallery-heading h2 { font-size: 24px; } .sibling-nav { margin-top: 40px; }.sibling-nav > div { gap: 8px; flex-direction: column; }.sibling-link { justify-content: space-between; }.dialog-top { padding-inline: 13px; }.dialog-caption { padding: 18px; }.study-type { font-size: 32px; } }
@media (max-height: 500px) and (orientation: landscape) { .dialog-body { display: grid; grid-template-columns: 1.2fr 1fr; align-items: start; }.dialog-art .gallery-media { height: calc(100svh - 112px); }.dialog-caption { padding: 18px; }.discipline-intro { padding-top: 20px; } }
@media (prefers-reduced-motion: reduce) { .study *, .study.is-playing * { animation: none !important; }.study-sweep { display: none; } }