.portfolio-mix-page { min-height: 100vh; background: #0d0908; color: #f1e8df; }
.portfolio-mix-page a { color: inherit; text-decoration: none; }
.portfolio-mix-header { min-height: 76px; padding: 12px clamp(18px, 5vw, 76px); display: flex; align-items: center; justify-content: space-between; gap: 24px; border-bottom: 1px solid rgba(241,210,164,.16); background: rgba(13,9,8,.94); }
.portfolio-mix-brand { display: flex; align-items: center; gap: 11px; flex: 0 0 auto; }
.portfolio-mix-brand img { display: block; width: 42px; height: 42px; flex: 0 0 42px; border: 1px solid rgba(216,172,114,.55); border-radius: 50%; object-fit: contain; }
.portfolio-mix-brand b,.portfolio-mix-brand small { display: block; line-height: 1.35; }
.portfolio-mix-brand b { font: 16px Georgia,serif; letter-spacing: .12em; white-space: nowrap; }
.portfolio-mix-brand small { margin-top: 3px; color: #d8ac72; font: 8px Georgia,serif; letter-spacing: .18em; }
.portfolio-mix-header nav { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: clamp(12px,2.4vw,32px); font-size: 12px; color: #d7c8bb; }
.portfolio-mix-header nav a:hover,.portfolio-mix-footer a:hover { color: #e9c48f; }
.portfolio-mix-shell { width: min(1540px, calc(100% - 48px)); margin: 0 auto; }
.portfolio-mix-breadcrumbs { display: flex; align-items: center; gap: 10px; padding: 25px 0; color: #a99b90; font-size: 12px; }
.portfolio-mix-breadcrumbs a { color: #e7bf87; }
.portfolio-mix-hero { position: relative; overflow: hidden; min-height: 250px; padding: clamp(30px,5vw,68px); border: 1px solid rgba(241,210,164,.18); background: radial-gradient(ellipse at 82% 0%,rgba(216,172,114,.16),transparent 45%),linear-gradient(120deg,#15100e,#201510); }
.portfolio-mix-hero::after { content: "LB"; position: absolute; left: 7%; top: 50%; display: grid; width: 145px; height: 145px; place-items: center; border: 1px solid rgba(216,172,114,.17); border-radius: 50%; color: rgba(216,172,114,.2); font: 60px Georgia,serif; transform: translateY(-50%); pointer-events: none; }
.portfolio-mix-eyebrow { margin: 0 0 12px; color: #d8ac72; font: 10px Georgia,serif; letter-spacing: .18em; }
.portfolio-mix-hero h1 { position: relative; z-index: 1; margin: 0; max-width: 820px; font-size: clamp(34px,5vw,62px); font-weight: 500; line-height: 1.3; }
.portfolio-mix-hero>p:not(.portfolio-mix-eyebrow) { position: relative; z-index: 1; max-width: 760px; margin: 14px 0 0; color: #c8bbb0; line-height: 1.9; }
.portfolio-mix-hero>span { position: relative; z-index: 1; display: inline-block; margin-top: 20px; color: #e9c48f; font-size: 12px; }
.portfolio-mix-controls { display: grid; gap: 18px; padding: 26px 0 22px; border-bottom: 1px solid rgba(241,210,164,.15); }
.portfolio-mix-filter-group { display: flex; align-items: flex-start; gap: 20px; }
.portfolio-mix-filter-group h2 { flex: 0 0 125px; margin: 9px 0 0; color: #a99b90; font-size: 12px; font-weight: 500; }
.portfolio-mix-buttons { display: flex; flex: 1; flex-wrap: wrap; gap: 8px; }
.portfolio-mix-buttons button { min-height: 44px; padding: 8px 16px; border: 1px solid rgba(241,210,164,.2); border-radius: 999px; color: #ded2c8; background: #15100e; font: inherit; font-size: 12px; cursor: pointer; transition: color .2s ease,border-color .2s ease,background .2s ease; }
.portfolio-mix-buttons button:hover,.portfolio-mix-buttons button:focus-visible { border-color: #d8ac72; outline: none; }
.portfolio-mix-buttons button[aria-pressed="true"] { border-color: #d8ac72; color: #1c130d; background: linear-gradient(120deg,#f1d2a4,#c79458); }
.portfolio-mix-results { padding: 30px 0 72px; }
.portfolio-mix-results>h2 { margin: 0 0 20px; font-size: 20px; font-weight: 500; }
.portfolio-mix-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 18px; }
.mix-card { min-width: 0; overflow: hidden; border: 1px solid rgba(241,210,164,.16); border-radius: 18px; background: linear-gradient(145deg,#1b1411,#100c0b); transition: transform .25s ease,border-color .25s ease; }
.mix-card:hover { transform: translateY(-4px); border-color: rgba(241,210,164,.48); }
.mix-card[hidden] { display: none; }
.mix-card__link { display: flex; height: 100%; flex-direction: column; }
.mix-card__media { position: relative; display: block; overflow: hidden; aspect-ratio: 4 / 4.4; background: #211713; }
.mix-card__media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease; }
.mix-card:hover .mix-card__media img { transform: scale(1.035); }
.mix-card__type { position: absolute; top: 12px; left: 12px; min-height: 28px; padding: 5px 10px; border: 1px solid rgba(241,210,164,.4); border-radius: 999px; color: #f6eade; background: rgba(14,10,8,.72); backdrop-filter: blur(10px); font-size: 10px; }
.mix-card__play { width: 50px; height: 50px; font-size: 14px; }
.mix-card__copy { display: flex; flex: 1; flex-direction: column; align-items: flex-start; gap: 9px; padding: 16px; }
.mix-card__copy small { color: #e2b97f; font-size: 10px; }
.mix-card__copy strong { font-size: 15px; font-weight: 500; line-height: 1.8; }
.mix-card__copy>span { display: flex; align-items: center; gap: 7px; margin-top: auto; color: #e2b97f; font-size: 11px; }
.portfolio-mix-empty { padding: 30px; border: 1px solid rgba(241,210,164,.16); color: #c8bbb0; text-align: center; }
.portfolio-mix-footer { display: flex; justify-content: center; flex-wrap: wrap; gap: 24px; padding: 22px; border-top: 1px solid rgba(241,210,164,.15); color: #c8bbb0; font-size: 12px; }
.photo-detail { padding-bottom: 56px; }
.photo-detail__layout { display: grid; grid-template-columns: minmax(0,1.1fr) minmax(300px,.9fr); align-items: center; gap: clamp(28px,6vw,88px); padding: 14px 0 38px; }
.photo-detail__figure { margin: 0; padding: 12px; border: 1px solid rgba(241,210,164,.2); background: linear-gradient(145deg,#1b1411,#100c0b); }
.photo-detail__image { display: block; width: auto; max-width: 100%; height: auto; max-height: min(76vh,900px); margin-inline: auto; object-fit: contain; background: #0a0807; }
.photo-detail__figure figcaption { padding: 12px 8px 2px; color: #c8bbb0; font-size: 12px; }
.photo-detail__copy h1 { margin: 0; font-size: clamp(30px,4vw,52px); font-weight: 500; line-height: 1.45; }
.photo-detail__description { margin: 18px 0 24px; color: #d1c3b7; font-size: 16px; line-height: 2.1; }
.photo-detail__facts { display: grid; gap: 10px; margin: 0; }
.photo-detail__facts div { display: flex; justify-content: space-between; gap: 18px; padding: 12px 14px; border: 1px solid rgba(241,210,164,.14); background: rgba(255,255,255,.025); }
.photo-detail__facts dt { color: #a99b90; }
.photo-detail__facts dd { margin: 0; color: #f1d2a4; text-align: end; }
.photo-detail__booking { display: inline-flex; min-height: 48px; align-items: center; justify-content: center; padding: 10px 22px; border-radius: 999px; color: #1c130d !important; background: linear-gradient(120deg,#f1d2a4,#c79458); font-size: 13px; }
.photo-detail-pagination { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; padding-top: 22px; border-top: 1px solid rgba(241,210,164,.16); }
.photo-detail-pagination a { display: inline-flex; min-height: 46px; align-items: center; gap: 8px; padding: 8px 14px; border: 1px solid rgba(241,210,164,.18); border-radius: 999px; color: #e8c38f; font-size: 12px; }
.photo-detail-pagination a:last-child { justify-self: end; }
.photo-detail-pagination a:hover { border-color: #d8ac72; }
.portfolio-mix-page :focus-visible { outline: 2px solid #e9c48f; outline-offset: 3px; }
@media (max-width: 1100px) { .portfolio-mix-grid { grid-template-columns: repeat(3,minmax(0,1fr)); } }
@media (max-width: 820px) { .portfolio-mix-header { align-items: flex-start; flex-direction: column; } .portfolio-mix-header nav { justify-content: flex-start; } .photo-detail__layout { grid-template-columns: minmax(0,1fr); gap: 26px; } .photo-detail__image { max-height: 72vh; } .portfolio-mix-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; } .portfolio-mix-filter-group { flex-direction: column; gap: 8px; } .portfolio-mix-filter-group h2 { flex-basis: auto; margin: 0; } .portfolio-mix-hero::after { left: -25px; opacity: .55; } }
@media (max-width: 420px) { .portfolio-mix-shell { width: min(100% - 28px,1540px); } .portfolio-mix-grid { gap: 9px; } .mix-card { border-radius: 13px; } .mix-card__copy { padding: 11px; gap: 7px; } .mix-card__copy strong { font-size: 13px; } .mix-card__media { aspect-ratio: 4 / 4.8; } .mix-card__type { top: 8px; left: 8px; min-height: 26px; padding: 4px 8px; } .photo-detail-pagination { grid-template-columns: 1fr 1fr; } .photo-detail-pagination a:nth-child(2) { grid-column: 1 / -1; grid-row: 2; justify-self: center; } .photo-detail-pagination a:last-child { justify-self: end; } .photo-detail__description { font-size: 14px; } }
@media (prefers-reduced-motion: reduce) { .mix-card,.mix-card__media img,.portfolio-mix-buttons button { transition: none; } }