.sw-p33 { box-sizing: border-box; font-family: 'Inter', sans-serif; background: #FFFFFF; color: #111111; }
.sw-p33 *, .sw-p33 *::before, .sw-p33 *::after { box-sizing: inherit; }
.sw-p33-wrap { position: relative; z-index: 1; max-width: 1180px; margin: 0 auto; padding: 0 clamp(1.6rem, 4vw, 3rem); }
.sw-p33-section { position: relative; padding: 7rem 0; }
.sw-p33-spreadbar { display: flex; align-items: baseline; gap: 1.3rem; border-top: 2px solid #111111; padding-top: 0.9rem; margin-bottom: 2.8rem; flex-wrap: wrap; }
.sw-p33-spreadbar b { font-size: 0.62rem; letter-spacing: 0.3em; text-transform: uppercase; font-weight: 800; color: #D32F2F; }
.sw-p33-spreadbar span { font-size: 0.62rem; letter-spacing: 0.26em; text-transform: uppercase; font-weight: 600; color: #6B6B6B; }
.sw-p33-spreadbar i { margin-left: auto; font-style: normal; font-size: 0.62rem; letter-spacing: 0.26em; text-transform: uppercase; font-weight: 700; color: #111111; }
.sw-p33-ghostbox { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.sw-p33-ghost { position: absolute; top: 0.6rem; right: -1.2rem; font-family: 'Playfair Display', Georgia, serif; font-weight: 500; font-size: clamp(9rem, 24vw, 17rem); line-height: 0.8; color: rgba(17, 17, 17, 0.05); pointer-events: none; user-select: none; }
.sw-p33-h2 { font-family: 'Playfair Display', Georgia, serif; font-weight: 500; font-size: clamp(2.5rem, 5.4vw, 4.1rem); line-height: 1.02; letter-spacing: -0.8px; margin: 0 0 1.1rem; color: #111111; }
.sw-p33-h2 em { font-style: italic; color: #D32F2F; }
.sw-p33-lead { font-size: 1rem; line-height: 1.72; color: #6B6B6B; max-width: 56ch; margin: 0; }
.sw-p33-index { list-style: none; margin: 3.2rem 0 0; padding: 0; border-top: 2px solid #111111; }
.sw-p33-index li { display: grid; grid-template-columns: 120px 1fr auto; gap: 1.6rem; align-items: baseline; padding: 2rem 0.4rem; border-bottom: 1px solid rgba(17, 17, 17, 0.18); }
.sw-p33-idx-num { display: inline-flex; align-items: center; gap: 10px; font-size: 0.66rem; letter-spacing: 0.26em; font-weight: 800; color: #D32F2F; }
.sw-p33-idx-num::before { content: ''; width: 11px; height: 11px; background: #D32F2F; transform: scale(0); transition: transform 0.3s ease; }
.sw-p33-index h3 { font-family: 'Playfair Display', Georgia, serif; font-weight: 500; font-size: clamp(1.9rem, 4.4vw, 3.1rem); margin: 0; color: #111111; transition: transform 0.35s cubic-bezier(0.2, 0.65, 0.2, 1); }
.sw-p33-index h3 em { font-style: italic; }
.sw-p33-idx-meta { font-size: 0.64rem; letter-spacing: 0.22em; text-transform: uppercase; color: #6B6B6B; white-space: nowrap; transition: color 0.3s ease; }
.sw-p33-index li:hover .sw-p33-idx-num::before { transform: scale(1); }
.sw-p33-index li:hover h3 { transform: translateX(14px); }
.sw-p33-index li:hover .sw-p33-idx-meta { color: #D32F2F; }
.sw-p33-atelier { background: #F7F5F2; border-top: 1px solid rgba(17, 17, 17, 0.14); border-bottom: 1px solid rgba(17, 17, 17, 0.14); }
.sw-p33-atelier-grid { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: clamp(2.6rem, 5vw, 5rem); align-items: center; }
.sw-p33-mask { position: relative; height: 480px; border: 1px solid #111111; overflow: hidden; box-shadow: 16px 16px 0 -1px #F7F5F2, 16px 16px 0 0 #111111; }
.sw-p33-maskimg { position: absolute; inset: 0; background: url('/studio/components/images/pages/retail-1/s2.jpg') 50% 32% / cover; transition: transform 0.9s cubic-bezier(0.2, 0.65, 0.2, 1); }
.sw-p33-mask:hover .sw-p33-maskimg { transform: scale(1.07); }
.sw-p33-img-credit { position: absolute; z-index: 1; left: 12px; bottom: 12px; font-size: 0.56rem; letter-spacing: 0.24em; text-transform: uppercase; font-weight: 600; color: #FFFFFF; background: rgba(17, 17, 17, 0.78); padding: 5px 10px; }
.sw-p33-atelier-facts { list-style: none; margin: 2rem 0 0; padding: 0; }
.sw-p33-atelier-facts li { display: grid; grid-template-columns: 110px 1fr; gap: 1.3rem; padding: 0.8rem 0; border-top: 1px solid rgba(17, 17, 17, 0.16); font-size: 0.9rem; line-height: 1.6; color: #6B6B6B; }
.sw-p33-atelier-facts b { font-size: 0.62rem; letter-spacing: 0.22em; text-transform: uppercase; color: #111111; font-weight: 700; padding-top: 4px; }
.sw-p33-act { position: relative; background: #111111; color: #FFFFFF; min-height: 100vh; display: flex; align-items: center; padding: 6rem 0 10rem; }
.sw-p33-act-grid { display: grid; grid-template-columns: auto 1fr; gap: clamp(2.4rem, 7vw, 6rem); align-items: center; }
.sw-p33-vert { writing-mode: vertical-rl; transform: rotate(180deg); font-family: 'Playfair Display', Georgia, serif; font-weight: 500; font-size: clamp(2.4rem, 6vh, 5rem); line-height: 1; letter-spacing: 0.08em; color: rgba(255, 255, 255, 0.16); margin: 0; white-space: nowrap; }
.sw-p33-vert i { font-style: italic; color: rgba(255, 255, 255, 0.36); }
.sw-p33-sale { display: inline-flex; align-items: center; gap: 14px; font-size: 0.66rem; letter-spacing: 0.32em; text-transform: uppercase; font-weight: 800; color: #FFFFFF; margin-bottom: 2rem; }
.sw-p33-sale-dot { position: relative; width: 13px; height: 13px; border-radius: 50%; background: #D32F2F; }
.sw-p33-sale-dot::after { content: ''; position: absolute; inset: -7px; border: 1px solid #D32F2F; border-radius: 50%; opacity: 0; }
.sw-p33-act-h { font-family: 'Playfair Display', Georgia, serif; font-weight: 500; font-size: clamp(2.8rem, 8vw, 6.4rem); line-height: 0.98; letter-spacing: -1px; margin: 0 0 1.8rem; color: #FFFFFF; }
.sw-p33-act-h em { font-style: italic; color: rgba(255, 255, 255, 0.82); }
.sw-p33-act-h .sw-p33-red { color: #D32F2F; }
.sw-p33-act-meta { display: flex; flex-wrap: wrap; gap: 0.7rem 2rem; margin: 0; font-size: 0.68rem; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255, 255, 255, 0.55); }
.sw-p33-act-meta b { color: #FFFFFF; font-weight: 700; }
.sw-p33-rail { position: absolute; left: 0; right: 0; bottom: 3rem; border-top: 1px solid rgba(255, 255, 255, 0.45); overflow: hidden; }
.sw-p33-rail-track { display: flex; width: max-content; }
.sw-p33-hangers { display: flex; }
.sw-p33-hanger { position: relative; width: 84px; height: 44px; margin: 20px 26px 8px; background: linear-gradient(to top right, transparent calc(50% - 0.5px), rgba(255, 255, 255, 0.6) 50%, transparent calc(50% + 0.5px)) left / 50.5% 100% no-repeat, linear-gradient(to top left, transparent calc(50% - 0.5px), rgba(255, 255, 255, 0.6) 50%, transparent calc(50% + 0.5px)) right / 50.5% 100% no-repeat; transform-origin: 50% -13px; transition: transform 0.45s cubic-bezier(0.34, 1.4, 0.4, 1); }
.sw-p33-hanger::before { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: rgba(255, 255, 255, 0.6); }
.sw-p33-hanger::after { content: ''; position: absolute; left: 50%; top: -13px; width: 9px; height: 9px; border: 1px solid rgba(255, 255, 255, 0.6); border-radius: 50%; transform: translateX(-50%); }
.sw-p33-hanger:hover { transform: rotate(7deg); }
.sw-p33-mat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: 3rem; }
.sw-p33-mat { position: relative; padding: 2.4rem clamp(1.3rem, 2.4vw, 2.2rem) 0.4rem; border-top: 2px solid #111111; border-right: 1px solid rgba(17, 17, 17, 0.18); }
.sw-p33-mat:last-child { border-right: 0; }
.sw-p33-mat::before { content: ''; position: absolute; top: -2px; left: 0; width: 100%; height: 2px; background: #D32F2F; transform: scaleX(0); transform-origin: left; transition: transform 0.5s cubic-bezier(0.2, 0.65, 0.2, 1); }
.sw-p33-mat:hover::before { transform: scaleX(1); }
.sw-p33-mat-num { display: block; font-size: 0.64rem; letter-spacing: 0.26em; font-weight: 800; color: #D32F2F; margin-bottom: 1rem; }
.sw-p33-mat h3 { font-family: 'Playfair Display', Georgia, serif; font-weight: 500; font-size: 1.7rem; margin: 0 0 0.7rem; }
.sw-p33-mat p { margin: 0; font-size: 0.88rem; line-height: 1.7; color: #6B6B6B; }
.sw-p33-visit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem; margin-top: 3rem; }
.sw-p33-store { position: relative; border: 1px solid #111111; padding: 2.4rem 2.2rem 2.2rem; background: #FFFFFF; transition: box-shadow 0.4s cubic-bezier(0.2, 0.65, 0.2, 1); }
.sw-p33-store:hover { box-shadow: 12px 12px 0 -1px #FFFFFF, 12px 12px 0 0 #D32F2F; }
.sw-p33-store-kicker { display: block; font-size: 0.6rem; letter-spacing: 0.26em; text-transform: uppercase; font-weight: 800; color: #D32F2F; margin-bottom: 0.8rem; }
.sw-p33-store h3 { font-family: 'Playfair Display', Georgia, serif; font-weight: 500; font-size: 1.8rem; margin: 0 0 1.2rem; }
.sw-p33-store-rows { list-style: none; margin: 0; padding: 0; }
.sw-p33-store-rows li { display: flex; justify-content: space-between; gap: 1.4rem; padding: 0.65rem 0; border-top: 1px solid rgba(17, 17, 17, 0.14); font-size: 0.88rem; }
.sw-p33-store-rows b { font-weight: 600; color: #111111; }
.sw-p33-store-rows span { color: #6B6B6B; text-align: right; }
.sw-p33-contact { text-align: center; border-top: 1px solid rgba(17, 17, 17, 0.16); }
.sw-p33-masthead { font-family: 'Playfair Display', Georgia, serif; font-weight: 500; font-size: clamp(4.2rem, 14vw, 10rem); letter-spacing: 0.16em; line-height: 0.9; margin: 0 0 1.6rem; color: #111111; }
.sw-p33-masthead i { position: relative; font-style: normal; color: #D32F2F; }
.sw-p33-address { font-style: normal; font-size: 0.94rem; line-height: 1.85; color: #6B6B6B; margin: 0 0 2.2rem; }
.sw-p33-address strong { color: #111111; font-weight: 600; }
.sw-p33-cta { display: inline-flex; align-items: center; gap: 10px; background: #111111; color: #FFFFFF; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; padding: 18px 42px; text-decoration: none; transition: background 0.25s ease, letter-spacing 0.25s ease; }
.sw-p33-cta:hover { background: #D32F2F; letter-spacing: 0.26em; }
.sw-p33-contact-note { margin: 1.8rem 0 0; font-size: 0.76rem; line-height: 1.65; color: #6B6B6B; }
.sw-p33-footer { border-top: 2px solid #111111; padding: 4.2rem 0 6.5rem; text-align: center; background: #FFFFFF; }
.sw-p33-f-brand { font-family: 'Playfair Display', Georgia, serif; font-weight: 500; font-size: 1.9rem; letter-spacing: 0.3em; margin: 0 0 0.5rem; color: #111111; }
.sw-p33-f-tagline { display: block; font-size: 0.6rem; letter-spacing: 0.3em; text-transform: uppercase; color: #6B6B6B; margin-bottom: 2.2rem; }
.sw-p33-f-dot { display: block; width: 8px; height: 8px; border-radius: 50%; background: #D32F2F; margin: 0 auto 2.2rem; }
.sw-p33-f-nav { list-style: none; display: flex; justify-content: center; gap: 2rem; margin: 0 0 2.2rem; padding: 0; flex-wrap: wrap; }
.sw-p33-f-nav a { font-size: 0.66rem; letter-spacing: 0.24em; text-transform: uppercase; font-weight: 600; color: #111111; text-decoration: none; transition: color 0.2s; }
.sw-p33-f-nav a:hover { color: #D32F2F; }
.sw-p33-f-bottom { font-size: 0.74rem; line-height: 1.9; color: #6B6B6B; }
.sw-p33-f-bottom a { color: #111111; text-decoration: none; }
.sw-p33-f-bottom a:hover { color: #D32F2F; }
@media (prefers-reduced-motion: no-preference) {
.sw-p33-rail-track { animation: sw-p33-slide 30s linear infinite; }
.sw-p33-sale-dot { animation: sw-p33-beat 2.2s ease-in-out infinite; }
.sw-p33-sale-dot::after { animation: sw-p33-ring 2.2s ease-out infinite; }
.sw-p33-masthead i { animation: sw-p33-beat 2.2s ease-in-out infinite; display: inline-block; }
@keyframes sw-p33-slide { to { transform: translateX(-50%); } }
@keyframes sw-p33-beat { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.18); } }
@keyframes sw-p33-ring { 0% { transform: scale(0.6); opacity: 0.9; } 80% { transform: scale(1.7); opacity: 0; } 100% { transform: scale(1.7); opacity: 0; } }
@supports (animation-timeline: view()) {
.sw-p33-rev { animation: sw-p33-rise linear both; animation-timeline: view(); animation-range: entry 0% entry 42%; }
.sw-p33-d1 { animation-range: entry 5% entry 50%; }
.sw-p33-d2 { animation-range: entry 10% entry 58%; }
.sw-p33-d3 { animation-range: entry 15% entry 66%; }
.sw-p33-d4 { animation-range: entry 20% entry 74%; }
@keyframes sw-p33-rise { from { opacity: 0; transform: translateY(46px); } to { opacity: 1; transform: translateY(0); } }
}
}
@media (max-width: 960px) { .sw-p33-atelier-grid { grid-template-columns: 1fr; } .sw-p33-mask { height: 380px; } .sw-p33-mat-grid { grid-template-columns: 1fr; } .sw-p33-mat { border-right: 0; padding: 1.9rem 0 0.4rem; } .sw-p33-visit-grid { grid-template-columns: 1fr; } .sw-p33-act-grid { grid-template-columns: 1fr; } .sw-p33-vert { writing-mode: horizontal-tb; transform: none; white-space: normal; font-size: clamp(1.8rem, 6vw, 3rem); } }
@media (max-width: 720px) { .sw-p33-section { padding: 4.5rem 0; } .sw-p33-index li { grid-template-columns: 1fr; gap: 0.45rem; } .sw-p33-idx-meta { white-space: normal; } .sw-p33-mask { height: 300px; box-shadow: 8px 8px 0 -1px #F7F5F2, 8px 8px 0 0 #111111; } .sw-p33-store { padding: 1.8rem 1.4rem; } .sw-p33-act { padding: 5rem 0 9rem; } .sw-p33-rail { bottom: 2.4rem; } .sw-p33-masthead { letter-spacing: 0.1em; } }
.sw-p33-cover { position: relative; min-height: 92vh; display: flex; align-items: flex-end; padding: 7rem 0 4.5rem; background: #111111; color: #FFFFFF; }
.sw-p33-cover-media { position: absolute; inset: 0; overflow: hidden; }
.sw-p33-cover-media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 38%; display: block; filter: saturate(0.92) contrast(1.04); }
.sw-p33-cover-shade { position: absolute; inset: 0; background: linear-gradient(to top, rgba(17, 17, 17, 0.88) 0%, rgba(17, 17, 17, 0.38) 46%, rgba(17, 17, 17, 0.18) 100%); }
.sw-p33-cover-inner { width: 100%; }
.sw-p33-cover-bar { border-top-color: #FFFFFF; }
.sw-p33-cover-bar span { color: rgba(255, 255, 255, 0.72); }
.sw-p33-cover-bar i { color: #FFFFFF; }
.sw-p33-cover-h { font-family: 'Playfair Display', Georgia, serif; font-weight: 500; font-size: clamp(3rem, 9vw, 7.4rem); line-height: 0.96; letter-spacing: -1px; margin: 0 0 1.2rem; color: #FFFFFF; }
.sw-p33-cover-h em { font-style: italic; color: rgba(255, 255, 255, 0.85); }
.sw-p33-cover-sub { font-size: 1rem; line-height: 1.7; color: rgba(255, 255, 255, 0.8); max-width: 48ch; margin: 0 0 1.7rem; }
.sw-p33-cover-credit { display: inline-block; font-size: 0.6rem; letter-spacing: 0.28em; text-transform: uppercase; font-weight: 700; color: #FFFFFF; background: rgba(17, 17, 17, 0.65); border: 1px solid rgba(255, 255, 255, 0.35); padding: 7px 14px; }
.sw-p33-look-grid { display: grid; grid-template-columns: 1.15fr 0.95fr 0.95fr; gap: clamp(1.2rem, 2.4vw, 2rem); margin-top: 3rem; align-items: start; }
.sw-p33-look-fig { margin: 0; }
.sw-p33-look-b { margin-top: 2.6rem; }
.sw-p33-look-c { margin-top: 5rem; }
.sw-p33-look-imgbox { position: relative; overflow: hidden; border: 1px solid #111111; box-shadow: 12px 12px 0 -1px #FFFFFF, 12px 12px 0 0 #111111; }
.sw-p33-look-imgbox::after { content: ''; position: absolute; inset: 0; background: linear-gradient(160deg, rgba(211, 47, 47, 0.14), rgba(17, 17, 17, 0.2)); mix-blend-mode: multiply; pointer-events: none; }
.sw-p33-look-imgbox img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: 50% 30%; filter: saturate(0.92) contrast(1.03); transition: transform 0.9s cubic-bezier(0.2, 0.65, 0.2, 1); }
.sw-p33-look-b .sw-p33-look-imgbox img { aspect-ratio: 1 / 1; object-position: 50% 40%; }
.sw-p33-look-c .sw-p33-look-imgbox img { aspect-ratio: 4 / 5; object-position: 50% 35%; }
.sw-p33-look-fig:hover .sw-p33-look-imgbox img { transform: scale(1.06); }
.sw-p33-look-fig figcaption { display: flex; align-items: baseline; gap: 1rem; padding-top: 0.85rem; }
.sw-p33-look-fig figcaption b { font-size: 0.62rem; letter-spacing: 0.26em; text-transform: uppercase; font-weight: 800; color: #D32F2F; white-space: nowrap; }
.sw-p33-look-fig figcaption span { font-size: 0.64rem; letter-spacing: 0.2em; text-transform: uppercase; color: #6B6B6B; }
.sw-p33-look-note { margin: 2.6rem 0 0; font-size: 0.9rem; line-height: 1.7; color: #6B6B6B; max-width: 52ch; }
.sw-p33-band { position: relative; padding: 0; background: #F7F5F2; border-top: 1px solid rgba(17, 17, 17, 0.14); border-bottom: 1px solid rgba(17, 17, 17, 0.14); }
.sw-p33-band-fig { position: relative; margin: 0; height: clamp(340px, 56vh, 560px); overflow: hidden; }
.sw-p33-band-fig img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; display: block; filter: grayscale(0.22) contrast(1.05); }
.sw-p33-band-fig::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to right, rgba(17, 17, 17, 0.42), rgba(17, 17, 17, 0) 55%); pointer-events: none; }
.sw-p33-band-cap { position: absolute; z-index: 1; left: clamp(1.6rem, 4vw, 3rem); bottom: 22px; display: inline-flex; align-items: baseline; gap: 0.9rem; background: rgba(17, 17, 17, 0.78); padding: 8px 14px; }
.sw-p33-band-cap b { font-size: 0.6rem; letter-spacing: 0.26em; text-transform: uppercase; font-weight: 800; color: #D32F2F; }
.sw-p33-band-cap span { font-size: 0.6rem; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 600; color: #FFFFFF; }
@media (prefers-reduced-motion: no-preference) {
.sw-p33-cover-media img { animation: sw-p33-coverzoom 18s ease-in-out infinite alternate; }
@keyframes sw-p33-coverzoom { from { transform: scale(1); } to { transform: scale(1.05); } }
}
@media (max-width: 960px) { .sw-p33-look-grid { grid-template-columns: 1fr 1fr; } .sw-p33-look-c { margin-top: 0; grid-column: 1 / -1; } .sw-p33-look-c .sw-p33-look-imgbox img { aspect-ratio: 16 / 9; } }
@media (max-width: 720px) { .sw-p33-cover { min-height: 76vh; padding: 5.5rem 0 3.2rem; } .sw-p33-cover-h { letter-spacing: -0.5px; } .sw-p33-look-grid { grid-template-columns: 1fr; gap: 2.2rem; } .sw-p33-look-b, .sw-p33-look-c { margin-top: 0; } .sw-p33-look-imgbox { box-shadow: 8px 8px 0 -1px #FFFFFF, 8px 8px 0 0 #111111; } .sw-p33-look-b .sw-p33-look-imgbox img, .sw-p33-look-c .sw-p33-look-imgbox img { aspect-ratio: 3 / 4; } .sw-p33-band-fig { height: 300px; } .sw-p33-band-cap { bottom: 14px; } }