@import url("https://fonts.googleapis.com/css2?family=Bodoni+Moda:opsz,ital,wght@6..96,400;6..96,500;6..96,600;6..96,700;6..96,400;6..96,500&family=DM+Sans:wght@300;400;500;600&display=swap");

:root {
  --ivory: #f4efe8;
  --paper: #fffaf5;
  --ink: #171416;
  --wine: #641d2c;
  --wine-deep: #39101b;
  --blush: #e7b6bc;
  --pink: #ff4771;
  --blue: #384d72;
  --sage: #9ba78f;
  --line: rgba(23,20,22,.17);
  --serif: "Bodoni Moda", Didot, "Times New Roman", serif;
  --sans: "DM Sans", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--ivory); color: var(--ink); font-family: var(--sans); overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
button { color: inherit; font: inherit; }
::selection { background: var(--pink); color: white; }
.official-logo img,.hero-photo img,.course-photo img,.look-card--image > img,.final-photo > img { position: absolute; inset: 0; width: 100%; height: 100%; }

.top-ribbon { position: fixed; inset: 0 0 auto; z-index: 60; height: 29px; overflow: hidden; background: var(--wine); color: #fff7f2; font-size: 8px; font-weight: 600; letter-spacing: .2em; }
.top-ribbon > div { width: max-content; height: 100%; display: flex; align-items: center; gap: 32px; animation: ribbon 22s linear infinite; }
.top-ribbon i { color: var(--blush); font-style: normal; }

.fashion-nav { position: fixed; inset: 29px 0 auto; z-index: 55; height: 84px; padding: 0 clamp(22px,4.6vw,72px); display: flex; align-items: center; justify-content: space-between; transition: height .35s ease, background .35s ease, border .35s ease; }
.fashion-nav--solid { height: 68px; background: rgba(244,239,232,.86); backdrop-filter: blur(20px); border-bottom: 1px solid rgba(100,29,44,.12); }
.official-logo { position: relative; width: 154px; height: 44px; display: block; overflow: hidden; border-radius: 999px; background: white; box-shadow: 0 9px 30px rgba(47,16,23,.09); z-index: 57; }
.official-logo img { object-fit: cover; object-position: center; }
.fashion-links { display: flex; align-items: center; gap: clamp(23px,3vw,48px); font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: .18em; }
.fashion-links > a:not(.nav-membership) { position: relative; }
.fashion-links > a:not(.nav-membership)::after { content: ""; position: absolute; height: 1px; background: var(--wine); left: 0; right: 100%; bottom: -7px; transition: right .3s ease; }
.fashion-links > a:hover::after { right: 0; }
.nav-membership { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center; gap: 18px; padding: 8px 9px 8px 19px; border: 1px solid rgba(255,255,255,.32); border-radius: 999px; background: linear-gradient(120deg,var(--wine-deep),var(--wine) 52%,#9b2d4b); color: white; box-shadow: 0 10px 28px rgba(100,29,44,.24), inset 0 1px rgba(255,255,255,.16); transition: transform .3s ease, box-shadow .3s ease; }
.nav-membership::before { content: ""; position: absolute; z-index: -1; inset: -2px; background: linear-gradient(105deg,transparent 25%,rgba(255,255,255,.22) 45%,transparent 63%); transform: translateX(-115%); transition: transform .65s ease; }
.nav-membership span { width: 29px; height: 29px; border-radius: 50%; background: rgba(255,255,255,.95); color: var(--wine); display: grid; place-items: center; font-size: 13px; transition: transform .3s ease; }
.nav-membership:hover { color: white; transform: translateY(-3px); box-shadow: 0 15px 38px rgba(100,29,44,.33), 0 0 0 4px rgba(255,71,113,.08); }
.nav-membership:hover::before { transform: translateX(115%); }.nav-membership:hover span { transform: rotate(45deg); }
.fashion-menu { display: none; border: 0; background: none; width: 40px; height: 40px; padding: 10px; z-index: 57; }
.fashion-menu span { display: block; width: 20px; height: 1px; background: currentColor; margin: 6px 0; }

.fashion-hero { position: relative; min-height: 100svh; padding: 150px clamp(22px,5.8vw,92px) 65px; display: grid; grid-template-columns: minmax(430px,.9fr) minmax(500px,1.1fr); align-items: center; gap: clamp(32px,5vw,90px); overflow: hidden; isolation: isolate; }
.fashion-hero::before { content: ""; position: absolute; inset: 0; z-index: -3; background: radial-gradient(circle at 78% 20%, rgba(255,255,255,.95), transparent 26%), linear-gradient(115deg,#f8f3ed 0 52%,#dfc2c5 52% 100%); }
.hero-grain { position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .24; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.1'/%3E%3C/svg%3E"); }
.issue-mark { position: absolute; left: 22px; top: 50%; transform: translateY(-30%); display: flex; flex-direction: column; align-items: center; color: var(--wine); }
.issue-mark span,.issue-mark small { font-size: 7px; letter-spacing: .2em; }.issue-mark strong { font: 400 36px/1 var(--serif); }.issue-mark::after { content: ""; width: 1px; height: 70px; margin-top: 15px; background: currentColor; }
.fashion-copy { position: relative; z-index: 3; }
.kicker { margin: 0; font-size: 9px; letter-spacing: .25em; text-transform: uppercase; font-weight: 600; }
.hero-kicker { margin: 0 0 29px 5px; color: var(--wine); }
.fashion-copy h1 { margin: 0; font: 500 clamp(72px,7.2vw,122px)/.72 var(--serif); letter-spacing: -.065em; text-transform: uppercase; }
.fashion-copy h1 span,.fashion-copy h1 em { display: block; }.fashion-copy h1 em { color: var(--pink); font-weight: 400; text-transform: none; margin-left: 16%; }
.hero-bottom { margin: 48px 0 0 16%; max-width: 510px; }
.hero-bottom > p { max-width: 470px; margin: 0 0 27px; color: #534b50; font-size: 13px; line-height: 1.8; }
.hero-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.fashion-button { position: relative; isolation: isolate; overflow: hidden; min-height: 59px; border: 1px solid transparent; border-radius: 999px; padding: 0 12px 0 27px; display: inline-flex; align-items: center; justify-content: center; gap: 23px; font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: .17em; box-shadow: 0 13px 34px rgba(57,16,27,.13); transition: transform .3s ease, background .3s ease, color .3s ease, box-shadow .3s ease; }
.fashion-button::before { content: ""; position: absolute; z-index: -1; inset: -2px; background: linear-gradient(105deg,transparent 25%,rgba(255,255,255,.25) 45%,transparent 65%); transform: translateX(-120%); transition: transform .7s ease; }
.fashion-button > span { width: 35px; height: 35px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.94); color: var(--wine); font-size: 13px; transition: transform .3s ease; }
.fashion-button:hover { transform: translateY(-4px); box-shadow: 0 18px 42px rgba(57,16,27,.22); }.fashion-button:hover::before { transform: translateX(120%); }.fashion-button:hover > span { transform: translateY(2px); }
.fashion-button--wine { background: linear-gradient(120deg,var(--wine-deep),var(--wine) 48%,#9b2d4b); color: white; border-color: rgba(255,255,255,.14); }.fashion-button--wine:hover { background: linear-gradient(120deg,var(--wine),#a32e50 55%,var(--pink)); }
.fashion-button--light { background: var(--paper); color: var(--wine-deep); border-color: rgba(255,255,255,.65); }.fashion-button--light:hover { background: var(--blush); }
.text-action { min-height: 59px; border: 1px solid rgba(100,29,44,.2); border-radius: 999px; background: rgba(255,250,245,.7); box-shadow: 0 10px 30px rgba(57,16,27,.07); display: inline-flex; gap: 14px; align-items: center; padding: 8px 21px 8px 9px; font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: .15em; cursor: pointer; transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease, background .3s ease; }
.text-action i { display: grid; place-items: center; width: 39px; height: 39px; border: 0; background: var(--pink); color: white; box-shadow: 0 7px 18px rgba(255,71,113,.28); border-radius: 50%; font-size: 8px; font-style: normal; transition: transform .3s ease, background .3s ease; }.text-action:hover { transform: translateY(-4px); border-color: rgba(255,71,113,.45); background: var(--paper); box-shadow: 0 16px 38px rgba(57,16,27,.13); }.text-action:hover i { background: var(--wine); transform: scale(1.08); }
.fashion-button:focus-visible,.text-action:focus-visible,.nav-membership:focus-visible { outline: 3px solid rgba(255,71,113,.38); outline-offset: 4px; }
.hero-collage { position: relative; width: min(47vw,700px); height: min(70vw,720px); max-height: 73vh; justify-self: center; }
.hero-photo { position: absolute; overflow: hidden; box-shadow: 0 35px 100px rgba(57,16,27,.16); }.hero-photo img { object-fit: cover; transition: transform 1.2s cubic-bezier(.2,.8,.2,1), filter .8s ease; }
.hero-photo--main { inset: 2% 9% 6% 12%; border-radius: 48% 48% 7px 7px; }
.hero-depth { isolation: isolate; perspective: 900px; transform-style: preserve-3d; background: #d8c7bb; box-shadow: 0 40px 105px rgba(57,16,27,.2), 0 0 0 1px rgba(255,255,255,.28); }
.hero-layer--back { z-index: 0; object-position: 50% center; transform: scale(1.045); }
.hero-depth-glow { position: absolute; z-index: 1; width: 76%; aspect-ratio: .8; left: 14%; top: 13%; border-radius: 50%; background: radial-gradient(circle,rgba(255,238,221,.42),rgba(255,207,215,.09) 55%,transparent 72%); filter: blur(18px); transform: translateZ(18px); pointer-events: none; }
.hero-layer--model { z-index: 2; object-position: 50% 2%; transform: translate3d(0,1.5%,36px) scale(.965); filter: drop-shadow(0 26px 28px rgba(61,16,28,.22)) saturate(.95) contrast(1.02); }
.hero-depth::after { content: ""; position: absolute; z-index: 3; inset: 0; pointer-events: none; background: linear-gradient(125deg,rgba(255,255,255,.23),transparent 25% 70%,rgba(100,29,44,.13)); box-shadow: inset 0 0 45px rgba(255,255,255,.12); }
.hero-collage:hover .hero-layer--back { transform: translate3d(-1.1%,0,0) scale(1.075); }
.hero-collage:hover .hero-layer--model { transform: translate3d(1.4%,-.6%,52px) scale(.99); filter: drop-shadow(0 32px 34px rgba(61,16,28,.26)) saturate(.98) contrast(1.04); }
.hero-photo--detail { width: 31%; height: 35%; right: 0; top: 4%; z-index: 5; border: 8px solid var(--paper); transform-origin: 70% 20%; will-change: transform,box-shadow; animation: detailFloat 5.8s ease-in-out infinite; }.hero-photo--detail img { object-position: 62% center; animation: detailPortrait 8s ease-in-out infinite alternate; }.hero-photo--detail:hover { animation-play-state: paused; transform: translate3d(-5px,-12px,70px) rotate(-1.5deg) scale(1.025); box-shadow: 0 42px 90px rgba(57,16,27,.28); }.hero-photo--detail:hover img { transform: scale(1.075); }
.editorial-seal { position: absolute; left: 0; bottom: 1%; width: 138px; height: 138px; border-radius: 50%; background: var(--pink); color: white; display: grid; place-content: center; text-align: center; transform: rotate(-8deg); animation: sealFloat 5s ease-in-out infinite; box-shadow: 0 20px 50px rgba(100,29,44,.23); }
.editorial-seal span { font-size: 8px; letter-spacing: .28em; }.editorial-seal strong { font: 600 34px/.9 var(--serif); }.editorial-seal em { font: italic 16px/1 var(--serif); }
.hero-caption { position: absolute; right: 3%; bottom: 0; writing-mode: vertical-rl; transform: rotate(180deg); display: flex; gap: 18px; font-size: 7px; letter-spacing: .18em; text-transform: uppercase; }.hero-caption small { color: #77676d; }
.scroll-note { position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); display: flex; gap: 13px; align-items: center; font-size: 7px; letter-spacing: .18em; text-transform: uppercase; }.scroll-note i { font-style: normal; color: var(--pink); animation: arrowBounce 1.8s infinite; }

.section-index { margin: 0; font-size: 8px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; }
.fashion-statement { position: relative; min-height: 770px; padding: 100px clamp(24px,7vw,110px); background: var(--wine-deep); color: #fff7f2; display: grid; grid-template-columns: 1fr 3fr .8fr; align-items: center; overflow: hidden; isolation: isolate; }
.fashion-statement .section-index { position: absolute; top: 65px; left: clamp(24px,7vw,110px); color: var(--blush); }
.statement-copy { grid-column: 2; position: relative; z-index: 2; }.statement-copy .kicker { color: var(--blush); margin-bottom: 30px; }.statement-copy h2 { margin: 0; font: 500 clamp(72px,8vw,135px)/.78 var(--serif); letter-spacing: -.06em; }.statement-copy h2 em { color: var(--pink); font-weight: 400; }.statement-lead { max-width: 500px; margin: 45px 0 0 34%; color: #d8c6c6; font-size: 13px; line-height: 1.9; }
.statement-side { grid-column: 3; display: flex; flex-direction: column; align-items: flex-end; gap: 22px; color: #b99099; font-size: 8px; letter-spacing: .22em; writing-mode: vertical-rl; }.statement-side span::after { content: " / "; color: var(--pink); }
.statement-monogram { position: absolute; left: -2vw; bottom: -19vw; z-index: -1; color: rgba(255,255,255,.025); font: 500 72vw/1 var(--serif); }
.statement-orbit { position: absolute; width: 520px; aspect-ratio: 1; border: 1px solid rgba(231,182,188,.12); border-radius: 50%; left: -240px; top: 100px; }.statement-orbit::after { content: ""; position: absolute; inset: 18%; border: 1px solid rgba(255,71,113,.15); border-radius: 50%; }

.course-edit { padding: 105px clamp(20px,5.8vw,92px) 115px; background: var(--ivory); scroll-margin-top: 95px; }
.edit-heading { display: grid; grid-template-columns: 1fr 1.55fr 1fr; align-items: center; gap: 45px; margin-bottom: 72px; }.edit-heading > div .kicker { margin-top: 18px; color: var(--wine); }.edit-heading h2 { margin: 0; text-align: center; font: 500 clamp(72px,7.5vw,125px)/.75 var(--serif); letter-spacing: -.065em; }.edit-heading h2 em { display: block; margin-left: 17%; color: var(--pink); font-weight: 400; }.edit-heading > p { justify-self: end; margin: 0; max-width: 340px; color: #675e62; font-size: 12px; line-height: 1.85; }
.editorial-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 28px 22px; align-items: stretch; }
.course-card { min-width: 0; height: 100%; display: flex; flex-direction: column; }
.course-photo { position: relative; aspect-ratio: .76; overflow: hidden; background: var(--blush); }
.course-card--lead .course-photo { border-radius: 48% 48% 8px 8px; }
.course-card--blue .course-photo { border-radius: 8px 8px 48% 48%; }
.course-card--wine .course-photo { border-radius: 48% 8px 48% 8px; }
.course-card--sage .course-photo { border-radius: 8px 48% 8px 48%; }
.course-photo img { object-fit: cover; transition: transform .8s cubic-bezier(.2,.8,.2,1), filter .8s ease; }.course-card:hover .course-photo img { transform: scale(1.045); filter: saturate(1.08); }.course-card--lead .course-photo img { object-position: 50% 35%; }.course-card--blue .course-photo img { object-position: 50% 47%; }.course-card--wine .course-photo img { object-position: 50% 36%; }.course-card--sage .course-photo img { object-position: 50% 46%; }
.course-number { position: absolute; top: 15px; left: 16px; width: 38px; height: 38px; border-radius: 50%; background: rgba(255,250,245,.84); backdrop-filter: blur(10px); display: grid; place-items: center; font: 500 11px/1 var(--serif); }
.free-tag { position: absolute; left: 14px; right: 14px; bottom: 14px; min-height: 34px; border-radius: 999px; background: rgba(255,250,245,.9); backdrop-filter: blur(10px); display: grid; place-items: center; font-size: 7px; letter-spacing: .19em; }
.course-meta { flex: 1; padding: 19px 3px 0; display: flex; flex-direction: column; }.course-meta > p { min-height: 30px; margin: 0; font-size: 7px; letter-spacing: .14em; text-transform: uppercase; color: #786b70; }.course-meta h3 { min-height: 82px; margin: 7px 0 20px; font: 500 clamp(27px,2.35vw,42px)/.9 var(--serif); letter-spacing: -.04em; }.course-meta button { width: 100%; margin-top: auto; padding: 12px 0; border: 0; border-bottom: 1px solid var(--line); background: none; display: flex; justify-content: space-between; font-size: 8px; font-weight: 600; text-transform: uppercase; letter-spacing: .17em; cursor: pointer; transition: color .25s ease, padding .25s ease; }.course-meta button:hover { color: var(--pink); padding-left: 8px; }
.wide-link { margin-top: 90px; padding: 20px 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); display: flex; justify-content: space-between; align-items: center; text-transform: uppercase; font-size: 9px; letter-spacing: .21em; }.wide-link i { font: 400 30px/1 var(--serif); transition: transform .3s ease; }.wide-link:hover i { transform: translateX(10px); }

.membership { min-height: 900px; padding: 105px clamp(24px,6.5vw,100px); background: var(--blue); color: white; display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(50px,8vw,130px); align-items: center; overflow: hidden; }
.membership-copy .section-index { color: #c5ccdc; margin-bottom: 85px; }.membership-copy .kicker { color: var(--blush); margin-bottom: 28px; }.membership-copy h2 { margin: 0; font: 500 clamp(75px,7vw,120px)/.75 var(--serif); letter-spacing: -.06em; }.membership-copy h2 em { color: var(--blush); font-weight: 400; margin-left: 15%; }.membership-copy > p:not(.section-index,.kicker) { max-width: 480px; margin: 45px 0 35px; color: #d4dae7; font-size: 13px; line-height: 1.9; }
.membership-look { position: relative; min-height: 660px; }.look-card { position: absolute; overflow: hidden; }.look-card--image { inset: 3% 8% 14% 4%; border-radius: 170px 170px 4px 4px; box-shadow: 0 50px 120px rgba(13,22,39,.34); }.look-card--image img { object-fit: cover; object-position: 50% 46%; }.look-card--image::after { content: ""; position: absolute; inset: 50% 0 0; background: linear-gradient(transparent,rgba(8,15,29,.72)); }.look-card--image > div { position: absolute; left: 32px; bottom: 28px; z-index: 2; display: flex; flex-direction: column; gap: 7px; }.look-card--image span { font-size: 7px; letter-spacing: .2em; color: #cad1de; }.look-card--image strong { font: 500 clamp(27px,3vw,45px)/.9 var(--serif); }.look-card--image button { position: absolute; z-index: 3; right: 25px; bottom: 25px; width: 57px; height: 57px; border: 0; border-radius: 50%; background: var(--pink); color: white; cursor: pointer; transition: transform .3s ease; }.look-card--image button:hover { transform: scale(1.08); }
.look-card--access { right: 0; bottom: 4%; z-index: 4; width: 255px; padding: 26px; background: rgba(255,250,245,.93); backdrop-filter: blur(18px); color: var(--wine-deep); box-shadow: 0 28px 70px rgba(13,22,39,.25); }.look-card--access small { display: block; margin: 12px 0 24px; font-size: 7px; letter-spacing: .2em; }.look-card--access strong { font: 500 28px/.95 var(--serif); }.look-card--access p { margin: 18px 0 0; color: #7a6670; font-size: 9px; }.access-pulse { display: block; width: 9px; height: 9px; border-radius: 50%; background: #67a776; box-shadow: 0 0 0 8px rgba(103,167,118,.13); }
.look-note { position: absolute; left: -35px; top: 20%; z-index: 5; width: 112px; aspect-ratio: 1; border-radius: 50%; background: var(--blush); color: var(--wine-deep); display: grid; place-content: center; text-align: center; transform: rotate(-10deg); box-shadow: 0 18px 45px rgba(13,22,39,.2); }.look-note i { font-style: normal; font-size: 16px; }.look-note span { font-size: 7px; font-weight: 600; letter-spacing: .16em; line-height: 1.5; }

.club-index { padding: 115px clamp(24px,6vw,92px) 130px; background: var(--paper); }.club-index-head { display: grid; grid-template-columns: .55fr 1.45fr; align-items: start; margin-bottom: 85px; }.club-index-head h2 { margin: 0; max-width: 1050px; font: 500 clamp(65px,7vw,118px)/.78 var(--serif); letter-spacing: -.06em; }.club-index-head h2 em { color: var(--pink); font-weight: 400; }
.benefit-list { border-top: 1px solid var(--ink); }.benefit-row { min-height: 114px; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 80px 1.4fr 1fr 60px; align-items: center; gap: 20px; transition: color .25s ease, padding .25s ease; }.benefit-row > span { font: 500 16px/1 var(--serif); }.benefit-row h3 { margin: 0; font: 500 clamp(30px,3.3vw,54px)/1 var(--serif); letter-spacing: -.04em; }.benefit-row p { margin: 0; color: #746a6f; font-size: 11px; }.benefit-row i { justify-self: end; font: 400 27px/1 var(--serif); font-style: normal; }.benefit-row:hover { color: var(--pink); padding-left: 12px; }

.final-fashion { position: relative; min-height: 870px; color: white; display: grid; place-items: center; overflow: hidden; }.final-photo,.final-overlay { position: absolute; inset: 0; }.final-photo .final-photo-back { object-fit: cover; object-position: center; filter: saturate(.78); }.final-photo .final-photo-model { object-fit: contain; object-position: center bottom; filter: drop-shadow(0 30px 45px rgba(36,7,15,.35)) saturate(.82); }.final-overlay { background: linear-gradient(90deg,rgba(36,7,15,.88),rgba(36,7,15,.35)), linear-gradient(0deg,rgba(57,16,27,.4),transparent); }.final-copy { position: relative; z-index: 2; text-align: center; }.final-copy .kicker { color: var(--blush); margin-bottom: 35px; }.final-copy h2 { margin: 0 0 48px; font: 500 clamp(72px,8.5vw,145px)/.74 var(--serif); letter-spacing: -.065em; }.final-copy h2 em { color: var(--blush); font-weight: 400; }.final-vertical { position: absolute; z-index: 3; right: 25px; writing-mode: vertical-rl; font-size: 7px; letter-spacing: .22em; }

.fashion-footer { min-height: 180px; padding: 48px clamp(24px,5.8vw,92px) 27px; background: var(--ink); color: #f7efe9; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: end; }.official-logo--footer { width: 180px; height: 51px; }.fashion-footer > p { justify-self: end; margin: 0; color: #ad9ba1; font: italic 18px/1 var(--serif); }.fashion-footer > div { display: flex; gap: 30px; font-size: 8px; letter-spacing: .17em; text-transform: uppercase; }.fashion-footer small { justify-self: end; color: #776a6e; font-size: 7px; letter-spacing: .15em; text-transform: uppercase; }

.preview-modal { position: fixed; inset: 0; z-index: 100; padding: 20px; background: rgba(28,8,14,.83); backdrop-filter: blur(18px); display: grid; place-items: center; animation: modalIn .25s ease; }.preview-shell { position: relative; width: min(1050px,96vw); max-height: 94vh; overflow: auto; background: var(--paper); color: var(--ink); padding: clamp(22px,4vw,55px); display: grid; grid-template-columns: .8fr 1.2fr; gap: 40px; align-items: center; }.preview-close { position: absolute; z-index: 3; right: 18px; top: 15px; width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 50%; background: var(--paper); font-size: 25px; cursor: pointer; }.preview-heading .kicker { color: var(--pink); margin-bottom: 30px; }.preview-heading h2 { margin: 0; font: 500 clamp(52px,5vw,78px)/.78 var(--serif); letter-spacing: -.05em; }.preview-heading h2 em { color: var(--pink); font-weight: 400; }.preview-heading > p:last-child { color: #6e6267; font-size: 11px; line-height: 1.8; }.preview-shell video { width: 100%; background: #120f10; aspect-ratio: 16/10; object-fit: cover; }
.preview-modal[hidden] { display: none; }

[data-reveal] { opacity: 0; transform: translateY(36px); transition: opacity .9s cubic-bezier(.2,.8,.2,1), transform .9s cubic-bezier(.2,.8,.2,1); }.is-visible { opacity: 1; transform: translateY(0); }
@keyframes ribbon { to { transform: translateX(-50%); } }
@keyframes sealFloat { 50% { transform: rotate(-3deg) translateY(-9px); } }
@keyframes arrowBounce { 50% { transform: translateY(5px); } }
@keyframes modalIn { from { opacity: 0; } }
@keyframes detailFloat { 0%,100% { transform: translate3d(0,0,42px) rotate(.7deg); box-shadow: 0 24px 65px rgba(57,16,27,.19); } 50% { transform: translate3d(-4px,-13px,58px) rotate(-1.3deg); box-shadow: 0 39px 88px rgba(57,16,27,.27); } }
@keyframes detailPortrait { from { transform: scale(1.015); } to { transform: scale(1.065) translate3d(-1.5%,0,0); } }

@media (max-width: 1050px) {
  .fashion-hero { grid-template-columns: .95fr 1.05fr; }.fashion-copy h1 { font-size: clamp(67px,8vw,94px); }.hero-bottom { margin-left: 8%; }.issue-mark { display: none; }
  .edit-heading { grid-template-columns: .6fr 1.4fr; }.edit-heading h2 { text-align: left; }.edit-heading > p { grid-column: 2; justify-self: start; }.editorial-grid { grid-template-columns: 1fr 1fr; }.course-photo { aspect-ratio: .82; }
  .membership { grid-template-columns: 1fr 1fr; gap: 30px; }.membership-look { min-height: 590px; }.look-note { left: -10px; }
}

@media (max-width: 760px) {
  .top-ribbon { height: 26px; }.fashion-nav { inset-block-start: 26px; height: 71px; padding: 0 18px; }.fashion-nav--solid { height: 62px; }.official-logo { width: 133px; height: 38px; }.fashion-menu { display: block; }
  .fashion-links { position: fixed; inset: 26px 0 0; z-index: 56; padding: 120px 25px 35px; background: rgba(244,239,232,.98); backdrop-filter: blur(20px); flex-direction: column; align-items: flex-start; gap: 28px; font: 500 35px/1 var(--serif); text-transform: none; letter-spacing: -.04em; transform: translateY(-110%); opacity: 0; transition: .4s ease; }.fashion-links--open { transform: translateY(0); opacity: 1; }.nav-membership { margin-top: 15px; font: 600 9px/1 var(--sans); text-transform: uppercase; letter-spacing: .15em; }
  .fashion-hero { min-height: auto; padding: 126px 18px 75px; grid-template-columns: 1fr; gap: 45px; }.fashion-copy h1 { font-size: clamp(62px,20.5vw,83px); }.fashion-copy h1 em { margin-left: 10%; }.hero-bottom { margin: 35px 0 0 10%; }.hero-actions { align-items: flex-start; flex-direction: column; }.hero-actions .fashion-button,.hero-actions .text-action { min-width: 255px; }.hero-collage { width: 100%; height: auto; aspect-ratio: .83; max-height: none; }.hero-photo--main { inset: 0 8% 7% 4%; }.hero-photo--detail { width: 38%; height: 32%; }.editorial-seal { width: 105px; height: 105px; left: 1%; }.editorial-seal strong { font-size: 27px; }.hero-caption { right: 0; }.scroll-note { display: none; }
  .fashion-statement { min-height: 680px; padding: 105px 20px 80px; grid-template-columns: 1fr; }.fashion-statement .section-index { left: 20px; top: 55px; }.statement-copy { grid-column: 1; }.statement-copy h2 { font-size: clamp(66px,20vw,90px); }.statement-lead { margin: 36px 0 0 9%; }.statement-side { display: none; }.statement-monogram { bottom: -5vw; font-size: 125vw; }
  .course-edit { padding: 85px 18px 90px; }.edit-heading { grid-template-columns: 1fr; gap: 35px; margin-bottom: 55px; }.edit-heading h2,.edit-heading > p { grid-column: 1; }.edit-heading h2 { text-align: left; font-size: 75px; }.edit-heading > p { justify-self: start; }.editorial-grid { grid-template-columns: 1fr; gap: 55px; }.course-photo { aspect-ratio: .9; }.course-meta h3 { min-height: auto; font-size: 39px; }.wide-link { margin-top: 70px; }
  .membership { min-height: auto; padding: 90px 20px; grid-template-columns: 1fr; gap: 70px; }.membership-copy .section-index { margin-bottom: 55px; }.membership-copy h2 { font-size: 79px; }.membership-look { min-height: 580px; }.look-card--image { inset: 0 4% 12% 2%; }.look-card--access { width: 225px; right: -5px; }.look-note { width: 92px; top: 11%; left: -5px; }
  .club-index { padding: 90px 20px; }.club-index-head { grid-template-columns: 1fr; gap: 40px; margin-bottom: 65px; }.club-index-head h2 { font-size: 65px; }.benefit-row { min-height: 130px; grid-template-columns: 38px 1fr 25px; gap: 12px; }.benefit-row h3 { font-size: 34px; }.benefit-row p { grid-column: 2; }.benefit-row i { grid-column: 3; grid-row: 1/3; }
  .final-fashion { min-height: 720px; padding: 70px 20px; }.final-copy h2 { font-size: clamp(62px,18vw,85px); }.final-copy .fashion-button { width: 100%; }.final-vertical { display: none; }
  .fashion-footer { grid-template-columns: 1fr; padding: 50px 20px 28px; }.official-logo--footer { width: 170px; height: 48px; }.fashion-footer > p,.fashion-footer small { justify-self: start; }.fashion-footer > div { flex-wrap: wrap; }
  .preview-shell { grid-template-columns: 1fr; gap: 25px; padding: 50px 16px 18px; }.preview-heading h2 { font-size: 54px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,*::before,*::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
