@font-face { font-family: "DieGrotesk"; src: url("../fonts/die_grotesk_a.otf") format("opentype"); font-weight: 100 900; font-display: swap; } @font-face { font-family: "DieGroteskC"; src: url("../fonts/die_grotesk_c.otf") format("opentype"); font-weight: 100 900; font-display: swap; } :root { --black: #050505; --white: #f7f5f0; --line: #232323; --muted: #787878; --soft: #bdb9b0; --fa: "DieGrotesk", "Helvetica Neue", sans-serif; --fc: "DieGroteskC", "Helvetica Neue", sans-serif; --ease: cubic-bezier(0.16, 1, 0.3, 1); } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; scroll-behavior: smooth; } body { background: var(--black); color: var(--white); font-family: var(--fa); font-weight: 300; -webkit-font-smoothing: antialiased; overflow-x: hidden; cursor: crosshair; } img { display: block; width: 100%; height: 100%; object-fit: cover; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: none; cursor: crosshair; } ::selection { background: var(--white); color: var(--black); } nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; display: flex; align-items: center; justify-content: space-between; padding: 24px 32px; border-bottom: 1px solid rgba(247, 245, 240, 0.12); background: rgba(5, 5, 5, 0.82); backdrop-filter: blur(12px); } .nav-logo, .foot-big, .e-mark { font-family: var(--fa); font-weight: 900; letter-spacing: -0.05em; text-transform: uppercase; } .nav-logo { font-size: 16px; color: var(--white); } .nav-links { display: flex; gap: 30px; list-style: none; } .nav-links a, .lbl, .txt-link, .btn-inquire, .piece-type { font-family: var(--fc); text-transform: uppercase; } .nav-links a { font-size: 13px; letter-spacing: 0.08em; color: var(--white); opacity: 0.45; transition: opacity 0.2s ease; } .nav-links a:hover, .nav-links a.is-active { opacity: 1; } .lbl, .piece-type { font-size: 10px; letter-spacing: 0.11em; color: var(--muted); } .txt-link { display: inline-block; width: fit-content; padding-bottom: 5px; border-bottom: 1px solid var(--line); font-size: 10px; letter-spacing: 0.1em; color: var(--soft); transition: color 0.2s ease, border-color 0.2s ease; } .txt-link:hover { color: var(--white); border-color: var(--white); } .btn-inquire { display: inline-flex; align-items: center; gap: 10px; padding: 14px 32px; border: 1px solid var(--white); font-size: 10px; letter-spacing: 0.12em; color: var(--white); transition: background 0.32s ease, color 0.32s ease; } .btn-inquire:hover { background: var(--white); color: var(--black); } .btn-inquire.is-sold { color: var(--muted); border-color: var(--line); cursor: default; pointer-events: none; } .btn-inquire.is-sold:hover { background: none; color: var(--muted); } .fade-in { opacity: 0; transform: translateY(18px); transition: opacity 0.9s ease, transform 0.9s ease; } .fade-in.on { opacity: 1; transform: translateY(0); } @keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @keyframes letterReveal { 0% { opacity: 0; transform: translateY(20px) scale(0.86); filter: blur(10px); } 55% { opacity: 1; filter: blur(0px); } 78% { transform: translateY(-3px) scale(1.01); } 100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0px); } } #enter { position: fixed; inset: 0; z-index: 999; display: flex; align-items: center; justify-content: center; background: var(--black); overflow: hidden; transition: opacity 0.8s ease, visibility 0.8s ease; } #enter.out { opacity: 0; visibility: hidden; pointer-events: none; } /* Hash-based nav skip — set by inline script in before paint */ .skip-gate #enter { display: none; } .e-video { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.85; filter: grayscale(100%) contrast(0.92) brightness(1.25); } .e-bg { position: absolute; inset: 0; z-index: 1; background: linear-gradient(rgba(5, 5, 5, 0.38), rgba(5, 5, 5, 0.58)), radial-gradient(ellipse at 50% 55%, rgba(247, 245, 240, 0.05), transparent 62%), repeating-linear-gradient(0deg, rgba(247, 245, 240, 0.012) 0 1px, transparent 1px 4px); } .e-corner { position: absolute; z-index: 2; font-family: var(--fc); font-size: 9px; letter-spacing: 0.11em; text-transform: uppercase; color: var(--muted); opacity: 0; animation: fadeUp 0.5s ease 1.4s forwards; } .e-corner.tl { top: 24px; left: 24px; } .e-corner.tr { top: 24px; right: 24px; } .e-corner.bl { bottom: 24px; left: 24px; } .e-corner.br { bottom: 24px; right: 24px; } .e-stack { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; } .e-mark { display: flex; gap: 0; font-size: clamp(112px, 21vw, 290px); line-height: 0.82; } .e-mark span { display: inline-block; font-weight: 900; opacity: 0; animation: letterReveal 0.75s var(--ease) forwards; animation-play-state: paused; } .e-mark.go span { animation-play-state: running; } .e-mark span:nth-child(1) { animation-delay: 0s; } .e-mark span:nth-child(2) { animation-delay: 0.1s; } .e-mark span:nth-child(3) { animation-delay: 0.2s; } .e-mark span:nth-child(4) { animation-delay: 0.3s; } .e-mark span:nth-child(5) { animation-delay: 0.4s; } .e-mark span:nth-child(6) { animation-delay: 0.5s; } .e-sub { font-family: var(--fc); font-size: clamp(10px, 1.1vw, 14px); font-weight: 300; letter-spacing: 0.28em; text-transform: uppercase; color: var(--muted); margin-top: 32px; opacity: 0; animation: fadeUp 0.6s ease 1.5s forwards; } .e-btn { position: relative; margin-top: 48px; padding: 22px 72px; border: 1px solid var(--white); color: var(--white); font-size: clamp(14px, 1.4vw, 18px); font-weight: 900; letter-spacing: 0.11em; text-transform: uppercase; overflow: hidden; opacity: 0; animation: fadeUp 0.7s ease 2.0s forwards; transition: color 0.35s ease, letter-spacing 0.35s ease; } .e-btn::before { content: ""; position: absolute; inset: 0; background: var(--white); transform: translateY(101%); transition: transform 0.45s cubic-bezier(0.6, 0.05, 0.3, 1); } .e-btn span { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 16px; } .e-btn:hover { color: var(--black); letter-spacing: 0.18em; } .e-btn:hover::before { transform: translateY(0); } #site { opacity: 0; transition: opacity 0.8s ease 0.1s; } #site.on { opacity: 1; } #site.page-out { opacity: 0; transition: opacity 0.3s ease; } .collection-intro { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; min-height: 14vh; padding: 96px 32px 24px; border-bottom: 1px solid var(--line); } .collection-intro p { max-width: 640px; font-size: clamp(20px, 2.4vw, 34px); font-weight: 700; line-height: 1.3; letter-spacing: -0.01em; text-transform: uppercase; } .collection-intro > span { flex: 0 0 auto; font-family: var(--fc); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); } .nowrap { white-space: nowrap; } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .sec-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 15px 32px; border-bottom: 1px solid var(--line); } .products { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(52px, 6.5vw, 88px); padding: clamp(36px, 5vw, 72px) clamp(48px, 6vw, 96px) clamp(64px, 8vw, 112px); background: var(--black); border-bottom: 1px solid var(--line); align-items: start; } .product-card { position: relative; display: flex; flex-direction: column; min-height: auto; background: var(--black); overflow: hidden; } .span-3 { grid-column: span 3; } .span-4 { grid-column: span 4; } .span-5 { grid-column: span 5; } .span-7 { grid-column: span 7; } .span-12 { grid-column: span 12; } .product-card-wide { display: grid; grid-template-columns: 1.55fr 0.45fr; min-height: auto; } .product-media { position: relative; width: 100%; height: clamp(260px, 48vh, 520px); overflow: hidden; background: var(--black); } .product-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: center center; transition: opacity 0.45s ease, transform 1.2s var(--ease); } .product-media img.is-hover { opacity: 0; } .product-card:hover .product-media img:first-child { opacity: 0; } .product-card:hover .product-media img.is-hover { opacity: 1; transform: scale(1.025); } .product-info { display: flex; flex-direction: column; gap: 2px; padding: 14px 0 8px; text-align: center; align-items: center; } .product-card-wide .product-info { justify-content: flex-end; min-height: auto; padding: 28px 0 8px 28px; border-top: none; border-left: 1px solid rgba(247, 245, 240, 0.08); } .product-info h2, .piece-hero h1, .editorial-band h2 { font-weight: 900; line-height: 0.88; letter-spacing: -0.015em; text-transform: uppercase; } .product-info h2 { font-size: clamp(13px, 1.4vw, 20px); } .editorial-band h2 { font-size: clamp(24px, 3.2vw, 52px); } .product-info p, .editorial-band p, .piece-copy p { max-width: 36ch; font-family: var(--fc); font-size: 13px; line-height: 1.8; letter-spacing: 0.02em; color: var(--soft); } .piece-copy p { font-style: italic; font-size: 14px; } .editorial-band { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--line); } .editorial-band .editorial-left { display: flex; flex-direction: column; gap: 18px; padding: 52px 32px; border-right: 1px solid var(--line); } .editorial-band .editorial-right { display: flex; flex-direction: column; justify-content: flex-end; padding: 52px 32px; } .editorial-band .editorial-right .txt-link { font-size: 16px; letter-spacing: 0.06em; } .foot { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; padding: 56px 32px 28px; } .foot-big { grid-column: 1 / -1; margin-bottom: 34px; font-size: clamp(88px, 18vw, 270px); line-height: 0.76; } .foot h5, .foot-base { font-family: var(--fc); font-size: 13px; font-weight: 300; letter-spacing: 0.11em; text-transform: uppercase; color: var(--muted); } .foot h5 { margin-bottom: 12px; } .foot a, .foot p { display: block; margin-bottom: 6px; font-family: var(--fc); font-size: 16px; font-weight: 300; letter-spacing: 0.02em; } .foot a:hover { color: var(--muted); } .foot-base { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 18px; padding-top: 18px; margin-top: 28px; border-top: 1px solid var(--line); } .piece-page #site { opacity: 1; } .piece-hero { display: grid; grid-template-columns: 0.8fr 1.2fr; padding-top: 72px; } .piece-copy { display: flex; flex-direction: column; justify-content: center; gap: 20px; padding: clamp(80px, 9vw, 112px) 40px clamp(40px, 5vw, 60px) 32px; } .piece-hero h1 { max-width: 10ch; font-size: clamp(36px, 4.8vw, 72px); } .piece-specs { list-style: none; display: flex; flex-direction: column; border-top: 1px solid var(--line); } .piece-specs li { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); font-family: var(--fc); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); } .piece-specs li span:last-child { color: var(--white); } .piece-actions { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; margin-top: 10px; } .piece-visual { margin: 0 32px 0 0; display: flex; flex-direction: column; gap: 12px; overflow: hidden; } .piece-cover { position: relative; overflow: hidden; height: clamp(300px, 40vw, 520px); cursor: zoom-in; } .piece-cover img { position: absolute; inset: 0; object-fit: contain; object-position: 15% center; transition: opacity 0.15s ease, transform 1s var(--ease); } .piece-cover:hover img { transform: scale(1.02); } .piece-main-vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: none; opacity: 0; transition: opacity 0.15s ease; } .piece-thumbs { display: flex; gap: 6px; padding: 18px 28px 16px; overflow-x: auto; scrollbar-width: none; flex-shrink: 0; } .piece-thumbs::-webkit-scrollbar { display: none; } .piece-thumb { flex: 0 0 auto; width: 58px; height: 78px; overflow: hidden; cursor: crosshair; opacity: 0.38; transition: opacity 0.22s ease; } .piece-thumb img, .piece-thumb video { width: 100%; height: 100%; object-fit: cover; display: block; } .piece-thumb.is-active, .piece-thumb:hover { opacity: 1; } .piece-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(18px, 2.2vw, 34px); padding: clamp(18px, 2.6vw, 40px) 32px 54px; background: var(--black); } .piece-grid figure { min-height: clamp(320px, 44vw, 560px); max-height: 620px; background: #101010; overflow: hidden; } .piece-grid.three { grid-template-columns: repeat(3, 1fr); } .piece-grid.five { grid-template-columns: repeat(6, 1fr); } .piece-grid.five figure { grid-column: span 2; } .piece-grid.five figure:nth-child(4), .piece-grid.five figure:nth-child(5) { grid-column: span 3; } .piece-foot { margin-top: clamp(52px, 6vw, 88px); } @media (max-width: 1020px) { .span-5, .span-7 { grid-column: span 6; } .span-3 { grid-column: span 4; } .product-card-wide, .editorial-band, .piece-hero { grid-template-columns: 1fr; } .product-card-wide .product-info, .editorial-band div, .piece-visual { border-left: none; } .editorial-band .editorial-left { border-right: none; border-bottom: 1px solid var(--line); } .product-card-wide .product-info { border-top: 1px solid var(--line); } } @media (max-width: 760px) { nav { padding: 18px 20px; } .nav-links { gap: 18px; } .collection-intro { align-items: flex-start; flex-direction: column; gap: 20px; min-height: auto; padding: 100px 20px 28px; } .sec-head, .product-info, .editorial-band div, .piece-copy { padding-left: 20px; padding-right: 20px; } .products { grid-template-columns: repeat(6, 1fr); gap: 12px; padding-left: 20px; padding-right: 20px; } .span-3, .span-4, .span-5, .span-7, .span-12 { grid-column: span 6; } .editorial-band { grid-template-columns: 1fr; } .piece-hero { min-height: auto; } .piece-visual { order: 1; margin: 0 20px 0; border-left: none; flex-direction: row; align-items: flex-start; gap: 10px; } .piece-copy { order: 2; } .piece-cover { flex: 1; min-width: 0; height: clamp(260px, 62vw, 460px); order: 1; } .piece-thumbs { order: 2; flex-direction: column; flex-shrink: 0; width: 66px; max-height: clamp(260px, 62vw, 460px); overflow-x: visible; overflow-y: auto; padding: 0; } .piece-thumb { width: 66px; height: 66px; } .piece-grid, .piece-grid.three, .piece-grid.five { grid-template-columns: 1fr; } .piece-grid figure, .piece-grid.five figure, .piece-grid.five figure:nth-child(4), .piece-grid.five figure:nth-child(5) { grid-column: auto; min-height: 78vw; } .foot { grid-template-columns: 1fr; padding: 42px 20px 24px; } .foot-base { flex-direction: column; } } /* ── Lightbox ─────────────────────────────────────────────────────── */ #lb { position: fixed; inset: 0; z-index: 900; background: rgba(5, 5, 5, 0.96); display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: opacity 0.28s ease, visibility 0.28s ease; cursor: zoom-out; } #lb.on { opacity: 1; visibility: visible; } #lb-inner { display: flex; align-items: center; justify-content: center; cursor: zoom-out; } #lb-inner img, #lb-inner video { display: block; max-width: 90vw; max-height: 88vh; width: auto; height: auto; object-fit: contain; } #lb-close { position: fixed; top: 20px; right: 24px; z-index: 901; font-family: var(--fc); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--white); opacity: 0.45; padding: 10px; transition: opacity 0.2s ease; line-height: 1; } #lb-close:hover { opacity: 1; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } }