/* ---------------- TRIBES SINGLE LOCATION ---------------- */

:root {
--tri-loc-bg: #0e0c0a;
--tri-loc-white: #ffffff;
--tri-loc-line: rgba(236, 231, 224, 0.12);
--tri-loc-guide: rgba(236, 231, 224, 0.18);
}

/* ---------------- Arena Hero ---------------- */
.tri-loc-location-hero,
.tri-loc-location-hero * {
box-sizing: border-box;
}

.tri-loc-location-hero {
position: relative;
width: 100%;
height: 100vh;
min-height: 100vh;
max-height: 100vh;
overflow: hidden;
background: var(--tri-loc-bg);
color: var(--tri-loc-white);
}

.tri-loc-location-hero__media {
position: absolute;
inset: 0;
z-index: 0;
overflow: hidden;
background: transparent;
}

.tri-loc-location-hero__media img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
display: block;
object-fit: cover;
object-position: center center;
transform-origin: center center;
will-change: transform;
backface-visibility: hidden;
}

.tri-loc-location-hero__shade {
position: absolute;
inset: 0;
z-index: 1;
background:
linear-gradient(
to bottom,
rgba(8, 7, 6, 0.12) 0%,
rgba(8, 7, 6, 0.18) 22%,
rgba(8, 7, 6, 0.34) 64%,
rgba(8, 7, 6, 0.52) 100%
),
linear-gradient(
to right,
rgba(8, 7, 6, 0.16) 0%,
rgba(8, 7, 6, 0.04) 20%,
rgba(8, 7, 6, 0.06) 52%,
rgba(8, 7, 6, 0.28) 100%
);
pointer-events: none;
}

.tri-loc-location-hero__guide {
position: absolute;
left: 0;
right: 0;
top: 32%;
z-index: 2;
height: 1px;
background: var(--tri-loc-guide);
transform: scaleX(0);
transform-origin: left center;
}

.tri-loc-location-hero__content {
position: absolute;
inset: 0;
z-index: 3;
height: 100%;
}

.tri-loc-location-hero__side {
position: absolute;
top: 50%;
z-index: 4;
transform: translateY(-50%);
}

.tri-loc-location-hero__side.is-left {
left: 20px;
}

.tri-loc-location-hero__side.is-right {
right: 20px;
}

.tri-loc-location-hero__side-text,
.tri-loc-location-hero__side-link {
font-size: clamp(1.1rem, 3vw, 1.2rem);
font-weight: 400;
line-height: 1;
letter-spacing: 0.02em;
color: var(--tri-loc-white);
white-space: nowrap;
text-decoration: none;
}

.tri-loc-location-hero__side-link {
display: inline-flex;
align-items: center;
gap: 7px;
}

.tri-loc-location-hero__side-link svg {
width: 13px;
height: 13px;
display: block;
}

.tri-loc-location-hero__copy {
position: absolute;
left: 50%;
top: 45.8%;
z-index: 4;
width: clamp(280px, 46vw, 960px);
max-width: calc(100% - 20px);
transform: translate(-50%, -50%);
}

.tri-loc-location-hero__text {
display: block;
width: 100%;
margin: 0;
padding: 0;
font-family: var(--dh-sans, inherit);
font-size: clamp(18px, 2.15vw, 33px);
line-height: 1.15;
letter-spacing: -0.015em;
color: var(--tri-loc-white);
text-align: left;
}

.tri-loc-location-hero__indent {
display: inline-block;
width: 3.5em;
height: 1px;
pointer-events: none;
}

.tri-loc-location-hero__bottom {
position: absolute;
left: 0;
right: 0;
bottom: clamp(12px, 2vh, 18px);
z-index: 4;
pointer-events: none;
}

.tri-loc-location-hero__title {
position: absolute;
bottom: 0;
margin: 0;
font-weight: 300;
color: var(--tri-loc-white);
letter-spacing: -0.02em;
line-height: 1;
white-space: nowrap;
font-size: clamp(2.4rem, 12vw, 12rem);
}

.tri-loc-location-hero__title.is-left {
left: clamp(12px, 1.5vw, 18px);
}

.tri-loc-location-hero__title.is-right {
right: clamp(8px, 1vw, 10px);
}

.tri-loc-location-hero__bottom-line {
position: absolute;
left: 0;
right: 0;
bottom: 0;
z-index: 3;
height: 1px;
background: var(--tri-loc-line);
transform: scaleX(0);
transform-origin: left center;
}

/* ---------------- FOUC prevention ---------------- */
.tri-loc-splitter,
.tri-loc-splitchar,
.tri-loc-fade {
visibility: hidden;
}

.tri-loc-line-mask {
overflow: hidden;
display: block;
}

.tri-loc-char-mask {
overflow: hidden;
display: inline-block;
vertical-align: top;
line-height: 1;
}

/* ---------------- Mobile ---------------- */
@media (max-width: 767px) {
html,
body {
margin: 0;
padding: 0;
}



p.sub-intro{
    font-size: 1rem;
    line-height: 1.2;
    opacity: .5;
    display: flex;
    align-items: center;
    margin-bottom:1.75rem;
}    




.tri-loc-location-hero {
height: 100vh;
min-height: 100vh;
max-height: 100vh;
overflow: hidden;
background: var(--tri-loc-bg);
}

.tri-loc-location-hero__media {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100vh;
overflow: hidden;
background: transparent;
}

.tri-loc-location-hero__media img {
position: absolute;
top: 0;
right: 0;
bottom: auto;
left: 0;
width: 100%;
height: 100vh;
min-width: 100%;
min-height: 100vh;
display: block;
object-fit: cover;
object-position: center center;
transform: none;
will-change: auto;
backface-visibility: hidden;
}

.tri-loc-location-hero__shade {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
height: 100vh;
background:
linear-gradient(
to bottom,
rgba(8, 7, 6, 0.18) 0%,
rgba(8, 7, 6, 0.24) 35%,
rgba(8, 7, 6, 0.56) 100%
),
linear-gradient(
to right,
rgba(8, 7, 6, 0.18) 0%,
rgba(8, 7, 6, 0.02) 45%,
rgba(8, 7, 6, 0.24) 100%
);
}

.tri-loc-location-hero__guide {
top: 34%;
}

.tri-loc-location-hero__side {
display: none;
}

.tri-loc-location-hero__copy {
left: 50%;
top: 48%;
width: calc(100% - 40px);
max-width: calc(100% - 40px);
transform: translate(-50%, -50%);
}

.tri-loc-location-hero__text {
font-size: clamp(16px, 5.2vw, 23px);
line-height: 1.08;
letter-spacing: -0.035em;
}

.tri-loc-location-hero__indent {
width: 0;
}

.tri-loc-location-hero__bottom {
bottom: 20vh;
display: flex;
justify-content: space-between;
align-items: flex-end;
gap: 10px;
padding: 0 14px;
}

.tri-loc-location-hero__title {
position: static;
display: inline-block;
font-size: clamp(2.2rem, 12vw, 4.5rem);
line-height: 0.88;
}

.tri-loc-location-hero__bottom-line {
bottom: 0;
}
}

:root {
--black: #0f0f0f;
--mist: #d4d4d4;
--gutter: 24px;
--page-px: 0px;
}

.section-light {
position: relative;
z-index: 1;
min-height: 85vh;
background: #fffdf9;
padding: 5vw 5vw 0vw 5vw;
}

.project-details {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 0 var(--gutter);
padding: 80px var(--page-px) 100px;
margin: 0 auto;
}

/* Content */

.content {
grid-column: 4 / 8;
}

.content-intro {
font-size: 2rem;
font-weight: 400;
line-height: 110%;
letter-spacing: -0.01em;
}

/* Detail rows */

.details {
display: flex;
flex-direction: column;
gap: 20px;
margin-top: 48px;
}

.detail-row {
display: grid;
grid-template-columns: 25% 1fr;
gap: 0 var(--gutter);
padding-top: 20px;
position: relative;
}

.detail-row::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: var(--mist);
}

.detail-label {
font-size: 1.2rem;
font-weight: 400;
color: var(--black);
display: flex;
align-items: center;
}

.detail-value {
font-size: 1rem;
line-height: 1.2;
opacity: .5;
display: flex;
align-items: center;
}

.detail-pills {
display: flex;
flex-wrap: wrap;
gap: 0.7rem;
opacity: 1;
}

.detail-pill {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
width: fit-content;
padding: 0.7rem 1rem;
border-radius: 0.25em;
background: #f1f1f1;
color: var(--black);
font-size: 0.9rem;
line-height: 1;
opacity: .5;
white-space: nowrap;
}

.detail-pill svg {
width: 1rem;
height: 1rem;
display: block;
flex: 0 0 auto;
stroke: currentColor;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}

.tribes-about-heading {
grid-column: 1 / 3;
align-self: start;
}

/* Responsive */

@media (max-width: 768px) {
:root {
--page-px: 24px;
}

.project-details {
grid-template-columns: 1fr;
padding: 60px var(--page-px) 80px;
}

.tribes-about-heading {
grid-column: 1 / -1;
}

.content {
grid-column: 1 / -1;
}

.content-intro {
font-size: 17px;
}

.detail-row {
grid-template-columns: 1fr;
gap: 8px;
}

.detail-pills {
margin-top: 4px;
}
}