/* Second direction: sculptural objects and image-led editorial composition. */
:root { --art-paper: #edeae4; --art-ink: #29232d; --art-lilac: #c7a6ef; --art-muted: #8f8198; }
body > nav { background: #17131bdc; border-bottom-color: #e5d9f20a; }
.nav-links { gap: 24px; }
.nav-links a { font-size: 12px; }
.nav-cta { background: #d1b7ed; border: 1px solid #e7d5fc25; }
.hero { min-height: 880px; padding-top: 128px; padding-bottom: 110px; background: #17131b; }
.hero-atmosphere { background: radial-gradient(ellipse at 72% 44%, #8a589d25, transparent 48%), radial-gradient(ellipse at 90% -10%, #e3b4940d, transparent 60%); }
.studio-hero-top { padding-bottom: 23px; border-bottom: 1px solid #d0bddb12; color: #a394af; font-size: 8px; }
.hero-composition { grid-template-columns: 1fr 1.13fr; margin-top: 39px; align-items: center; }
.hero-small-label { margin-bottom: 20px; font-size: 8px; letter-spacing: 1.6px; color: #a08cad; }
.hero-small-label > span::before { content: ''; display: inline-block; height: 1px; width: 23px; background: #a68cb9; margin: 0 10px 3px 0; }
.hero h1 { font-size: clamp(83px, 8.7vw, 145px); letter-spacing: -7px; line-height: .89; }
.hero-line { padding-bottom: .17em; margin-bottom: -.17em; }
.hero h1 em { font-family: Georgia, serif; font-size: 1.04em; letter-spacing: -8px; color: #d0b5ed; }
.hero-line:nth-child(2) { padding-left: 14%; }
.hero-line:nth-child(3) { position: relative; z-index: 4; }
.hero-description { margin-top: 34px; line-height: 1.9; font-size: 11px; color: #a697b0; }
.studio-hero-actions > a { font-size: 9px; min-height: 43px; gap: 35px; }
.studio-hero-actions .hero-work-link { background: #d8c3ed; color: #34263e; }
.studio-hero-actions .hero-contact-link { color: #b49bc5; }
.hero-visual { width: 114%; margin-left: -7%; }
.hero-stage { height: clamp(460px, 38vw, 610px); aspect-ratio: auto; }
.scene-halo { inset: 12%; border-color: #ddc3ef12; }
.scene-halo::before { inset: 8%; border-color: #ddc3ef0b; }
.scene-label { top: -9px; letter-spacing: 1.7px; color: #9b84ab; font-size: 8px; }
.scene-parallax { z-index: 1; }
.scene-fallback { transform: rotate(var(--fallback-spin, 0rad)); }
.scene-floor { background: radial-gradient(ellipse, #a26dc12a, transparent 63%); }
.scene-coordinate { color: #a17eb7; }
.hero-fragment { position: absolute; margin: 0; border: 4px solid #d7c8dd; background: #d7c8dd; box-shadow: 0 15px 40px #05020855; width: 22%; max-width: 150px; z-index: 2; transform-style: preserve-3d; pointer-events: none; }
.hero-fragment img { display: block; width: 100%; height: auto; aspect-ratio: 1.2; object-fit: cover; }
.hero-fragment figcaption { padding: 5px 2px 1px; color: #695775; font-size: 5px; letter-spacing: 1.7px; }
.fragment-product { top: 8%; right: -1%; transform: rotate(10deg); }
.fragment-editorial { bottom: 14%; left: -2%; width: 19%; transform: rotate(-11deg); }
.fragment-editorial img { aspect-ratio: .95; object-position: 40% center; }
.scene-footer { padding-inline: 18% 10%; margin-top: 1px; }
.scene-object-name { font-size: 7px; letter-spacing: 2px; color: #c1a6d1; }
.scene-object-sub { font-size: 8px; margin-top: 4px; color: #826b91; }
#scene-rotate { margin-left: auto; margin-right: 17px; border: 1px solid #b998d02e; width: 27px; height: 27px; border-radius: 50%; background: transparent; color: #ab8cbe; cursor: pointer; font: 17px Georgia, serif; }
#scene-rotate:hover { border-color: #d3b1ed; color: #e4c7fb; }
.scene-drag-hint { display: none; position: absolute; left: 18%; bottom: -28px; color: #675472; letter-spacing: 1.7px; font-size: 5px; }
.hero-visual:has([data-scene-ready]) .scene-drag-hint { display: block; }
.hero-colophon { border-top-color: #e8c8fa14; }
.discipline-strip { background: #c4a8df; padding: 18px 0; border-color: #dac0ef; }
.discipline-track { font-size: 23px; color: #493353; gap: 38px; }
.discipline-track i { color: #765287; font-size: 24px; }

.concepts-section { padding: 92px 6vw 75px; background: var(--art-paper); color: var(--art-ink); overflow: clip; }
.concepts-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 45px; margin-bottom: 42px; }
.concepts-heading .section-eyebrow { color: #8a7596; display: block; font-size: 9px; letter-spacing: 1.8px; margin-bottom: 23px; }
.concepts-heading h2 { font: 400 clamp(48px, 6vw, 86px)/.94 'Space Grotesk', sans-serif; letter-spacing: -4.8px; }
.concepts-heading h2 em { font-family: Georgia, serif; font-weight: 400; color: #95749e; letter-spacing: -4.2px; }
.concepts-intro { padding-bottom: 4px; min-width: 265px; }
.concepts-index { font-size: 8px; letter-spacing: 1.6px; color: #927d9d; }
.concepts-intro p { font-size: 13px; line-height: 1.9; color: #86738e; margin: 15px 0 12px; }
.concept-disclosure { font-size: 10px; color: #927d9e; display: inline-flex; align-items: center; gap: 6px; }
.concept-disclosure::before { content: ''; width: 3px; height: 3px; border-radius: 50%; background: #a17db0; }
.concept-card { min-width: 0; }
.concept-open { display: block; position: relative; width: 100%; padding: 0; border: 0; border-radius: 3px; text-align: left; overflow: hidden; background: #c1b5c8; cursor: pointer; color: white; transform-style: preserve-3d; }
.concept-image-wrap { display: block; position: relative; overflow: hidden; }
.concept-image { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 1s cubic-bezier(.2,.7,.2,1), filter .8s; }
.concept-open:hover .concept-image { transform: scale(1.045); }
.concept-open:focus-visible { outline: 3px solid #7f5b9b; outline-offset: 5px; }
.concept-wide .concept-image-wrap { aspect-ratio: 2.1; }
.concept-wide .concept-image { object-position: center 55%; }
.concept-wide .concept-open::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, #15121b20, transparent 40%, #15121b80); pointer-events: none; }
.concept-image-top { position: absolute; top: 21px; left: 25px; right: 25px; z-index: 1; display: flex; justify-content: space-between; font-size: 9px; letter-spacing: 1.5px; color: #e6d6ec; }
.concept-image-top > span:first-child { background: #241e2d24; border: 1px solid #e4ccf244; border-radius: 100px; padding: 5px 9px; backdrop-filter: blur(10px); }
.concept-wide-title { position: absolute; bottom: 25px; left: 30px; right: 30px; display: flex; align-items: flex-end; justify-content: space-between; font: 400 clamp(42px, 6.5vw, 90px)/1 'Space Grotesk', sans-serif; letter-spacing: -5px; z-index: 1; color: #f2e7f6; }
.concept-wide-title > span { width: 49px; height: 49px; border: 1px solid #e8c9ff77; border-radius: 50%; display: grid; place-items: center; font: 24px 'Inter', sans-serif; letter-spacing: 0; margin-bottom: 6px; }
.concept-caption { display: flex; justify-content: space-between; gap: 15px; font-size: 9px; letter-spacing: 1px; color: #907a9c; padding-top: 14px; }
.concept-caption > span:last-child:not(:first-child) { color: #a190a8; letter-spacing: 0; font-size: 9px; }
.concept-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-top: 48px; align-items: start; }
.concept-editorial { margin-top: 85px; }
.concept-pair .concept-image-wrap { aspect-ratio: 1.16; }
.concept-product .concept-image { object-position: 41% center; }
.concept-editorial .concept-image { object-position: 43% center; }
.concept-product .concept-image-top { color: #715a7e; }
.concept-product .concept-image-top > span:first-child { background: #f7f0fa66; border-color: #927c9e44; }
.concept-corner-arrow { position: absolute; right: 20px; bottom: 20px; width: 39px; height: 39px; border-radius: 50%; display: grid; place-items: center; background: #f7eff9ec; color: #5d426e; font-size: 18px; }
.concept-card-title { display: flex; align-items: center; justify-content: space-between; margin-top: 19px; gap: 12px; }
.concept-card-title h3 { font: 400 clamp(20px, 2.4vw, 32px) 'Space Grotesk', sans-serif; letter-spacing: -1px; }
.concept-card-title > span { font-size: 7px; color: #a18baa; letter-spacing: 1px; }
.concept-pair .concept-caption { padding-top: 6px; font-size: 8px; }
.concepts-footnote { display: flex; justify-content: space-between; align-items: center; margin-top: 55px; padding-top: 22px; border-top: 1px solid #d4cad9; gap: 20px; }
.concepts-footnote > span { font-size: 7px; letter-spacing: 1.4px; color: #a08ca9; }
.concepts-footnote > a { color: #775a87; font-size: 10px; display: flex; gap: 26px; text-decoration: none; }
.concept-dialog .work-media img { width: 100%; max-height: 70vh; object-fit: contain; }
.concept-dialog .work-details h2 { font-size: 34px; }
.concept-dialog .work-details p { font-size: 12px; }
#portfolio { border-top: 1px solid #e7e0e9; padding-top: 80px; }
.portfolio-section-heading .section-title { font-size: clamp(35px, 4vw, 55px); }
.portfolio-empty { padding: 45px 20px; }
.studio-story { background: #e8e1eb; }
.story-heading em { color: #9a75ab; }

@media (min-width: 1600px) {
  .hero { min-height: 1000px; padding-top: 145px; }
  .hero-composition { max-width: 1600px; }
  .hero h1 { font-size: clamp(145px, 8.5vw, 180px); }
  .hero-visual { max-width: 820px; }
  .hero-fragment { max-width: 175px; }
}
@media (max-width: 1100px) {
  .nav-links { gap: 18px; }
  .hero { min-height: 820px; }
  .hero h1 { font-size: 9.4vw; letter-spacing: -5px; }
  .hero h1 em { letter-spacing: -5px; }
  .hero-visual { width: 119%; margin-left: -10%; }
  .hero-description { font-size: 10px; }
  .hero-small-label { font-size: 5px; letter-spacing: 1.6px; }
  .scene-footer { padding-inline: 22% 7%; }
  .scene-object-name { font-size: 6px; letter-spacing: 1.4px; }
  .scene-object-sub { font-size: 7px; }
  .fragment-product { right: 2%; }
  .fragment-editorial { left: 0; }
  #scene-rotate { margin-right: 8px; }
  .finish-picker { gap: 2px; }
  .concepts-heading h2 { font-size: 65px; letter-spacing: -3.8px; }
  .concepts-heading h2 em { letter-spacing: -3.5px; }
  .concepts-intro { min-width: 235px; }
  .concept-pair { gap: 24px; }
  .concept-wide-title { letter-spacing: -3px; }
}
@media (max-width: 680px) {
  .nav-links { gap: 22px; }
  .hero { min-height: 0; padding-top: 133px; padding-bottom: 88px; }
  .studio-hero-top { padding-bottom: 18px; font-size: 5px; }
  .hero-composition { margin-top: 30px; }
  .hero h1 { font-size: 20vw; letter-spacing: -4.5px; line-height: .85; }
  .hero h1 em { letter-spacing: -4.5px; }
  .hero-line:nth-child(2) { padding-left: 17%; }
  .hero-small-label { margin-bottom: 25px; font-size: 5px; letter-spacing: 1.3px; }
  .hero-description { margin-top: 30px; font-size: 10px; line-height: 1.8; }
  .studio-hero-actions > a { font-size: 9px; gap: 25px; }
  .hero-visual { width: 100%; margin: 37px 0 22px; max-width: 440px; }
  .hero-stage { height: auto; aspect-ratio: 1.08; }
  .scene-label { top: -4px; font-size: 5px; letter-spacing: 1.5px; }
  .hero-fragment { width: 21%; border-width: 3px; }
  .hero-fragment figcaption { font-size: 4px; letter-spacing: 1.1px; padding: 4px 1px 0; }
  .fragment-product { right: -1%; top: 12%; }
  .fragment-editorial { bottom: 18%; left: -1%; width: 19%; }
  .scene-footer { padding-inline: 13% 8%; }
  .scene-object-name { font-size: 6px; letter-spacing: 1.2px; }
  .scene-object-sub { font-size: 7px; }
  .finish-picker { gap: 4px; }
  .scene-drag-hint { left: 13%; bottom: -20px; font-size: 4px; letter-spacing: 1.2px; }
  #scene-rotate { width: 23px; height: 23px; font-size: 15px; margin-right: 12px; }
  .discipline-track { font-size: 18px; gap: 25px; }
  .discipline-strip { padding: 17px 0; }
  .concepts-section { padding: 59px 6vw 45px; }
  .concepts-heading { display: block; margin-bottom: 27px; }
  .concepts-heading .section-eyebrow { font-size: 8px; margin-bottom: 18px; letter-spacing: 1.2px; }
  .concepts-heading h2 { font-size: 60px; letter-spacing: -3.5px; }
  .concepts-heading h2 em { letter-spacing: -3px; }
  .concepts-intro { margin-top: 23px; padding: 0; }
  .concepts-index { font-size: 8px; }
  .concepts-intro p { font-size: 12px; margin: 10px 0; line-height: 1.8; }
  .concept-disclosure { font-size: 9px; }
  .concept-wide .concept-image-wrap { aspect-ratio: 1.23; }
  .concept-wide .concept-image { object-position: 65% center; }
  .concept-image-top { top: 14px; left: 14px; right: 14px; font-size: 7px; letter-spacing: 1.1px; }
  .concept-image-top > span:first-child { padding: 4px 7px; }
  .concept-wide-title { font-size: 41px; bottom: 18px; left: 18px; right: 18px; letter-spacing: -2.8px; }
  .concept-wide-title > span { width: 31px; height: 31px; font-size: 16px; margin-bottom: 1px; }
  .concept-caption { font-size: 7px; letter-spacing: .5px; gap: 10px; padding-top: 11px; }
  .concept-caption > span:last-child:not(:first-child) { font-size: 7px; }
  .concept-pair { grid-template-columns: 1fr; gap: 30px; margin-top: 29px; }
  .concept-editorial { margin-top: 0; }
  .concept-pair .concept-image-wrap { aspect-ratio: 1.13; }
  .concept-card-title { margin-top: 14px; }
  .concept-card-title h3 { font-size: 25px; letter-spacing: -.9px; }
  .concept-card-title > span { font-size: 6px; }
  .concept-pair .concept-caption { font-size: 7px; }
  .concept-corner-arrow { width: 31px; height: 31px; right: 14px; bottom: 14px; font-size: 15px; }
  .concepts-footnote { margin-top: 34px; padding-top: 18px; display: block; }
  .concepts-footnote > span { display: block; font-size: 5px; letter-spacing: 1.2px; margin-bottom: 12px; }
  .concepts-footnote > a { font-size: 10px; justify-content: space-between; }
  #portfolio { padding-top: 55px; }
  .portfolio-section-heading .section-title { font-size: 36px; }
  .concept-dialog .work-dialog-top { font-size: 5px; letter-spacing: 1px; }
  .concept-dialog .work-details h2 { font-size: 28px; }
  .concept-dialog .work-details p { font-size: 11px; }
}