:root{
  --bg:#f3f2ee;
  --ink:#0b0b0b;
  --muted:#6d6962;
  --line:#d9d5cd;
  --red:#d71920;
}

*{
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  overflow-x:hidden;
}

a{
  color:inherit;
  text-decoration:none;
}

img{
  display:block;
}

::selection{
  background:var(--red);
  color:white;
}

.page{
  min-height:100svh;
  padding:clamp(18px,2.5vw,34px);
}

.topbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:24px;
  margin-bottom:clamp(36px,5vh,56px);
  font-size:12px;
  letter-spacing:.2em;
  text-transform:uppercase;
  font-weight:900;
}

.topbar nav{
  margin-left:auto;
  display:flex;
  gap:clamp(18px,3vw,38px);
}

.topbar a:hover{
  color:var(--red);
}

.hero{
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(360px,.92fr);
  gap:clamp(34px,7vw,110px);
  align-items:end;
}

.eyebrow{
  margin:0 0 16px;
  color:var(--red);
  font-size:13px;
  letter-spacing:.26em;
  text-transform:uppercase;
  font-weight:900;
}

h1{
  margin:0;
  font-size:clamp(82px,13vw,210px);
  line-height:.76;
  letter-spacing:-.105em;
  text-transform:uppercase;
  font-weight:900;
}

.descriptor{
  margin:20px 0 0;
  color:var(--ink);
  font-size:clamp(13px,1.25vw,18px);
  letter-spacing:.18em;
  text-transform:uppercase;
  font-weight:800;
}

.descriptor span{
  color:var(--red);
}

.links{
  border-top:1px solid var(--line);
}

.links a{
  display:grid;
  grid-template-columns:118px 1fr auto;
  gap:18px;
  align-items:center;
  padding:clamp(13px,1.8vh,19px) 0;
  border-bottom:1px solid var(--line);
  transition:color .22s ease, padding-left .22s ease;
}

.links a:hover{
  color:var(--red);
  padding-left:8px;
}

.links span,
.label{
  color:var(--muted);
  font-size:11px;
  letter-spacing:.22em;
  text-transform:uppercase;
  font-weight:900;
}

.links a:hover span{
  color:var(--red);
}

.links strong{
  font-size:clamp(22px,2.45vw,44px);
  line-height:.9;
  letter-spacing:-.065em;
  text-transform:uppercase;
  font-weight:900;
}

.links em{
  font-style:normal;
  font-size:22px;
  opacity:.55;
}

.photo-strip{
  margin:clamp(26px,4.2vh,42px) 0 clamp(24px,4vh,42px);
  display:grid;
  grid-template-columns:.82fr 1.08fr .88fr 1.08fr .82fr;
  gap:clamp(8px,1vw,14px);
  align-items:center;
}

.photo{
  margin:0;
  overflow:hidden;
  background:#dedbd4;
}

.photo img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.photo.small{
  height:clamp(170px,21vw,300px);
}

.photo.large{
  height:clamp(220px,27vw,390px);
}

.photo:nth-child(1) img{
  object-position:center 44%;
}

.photo:nth-child(2) img{
  object-position:center 50%;
}

.photo:nth-child(3) img{
  object-position:center 46%;
}

.photo:nth-child(4) img{
  object-position:center 50%;
}

.photo:nth-child(5) img{
  object-position:center 45%;
}

.info{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(36px,7vw,110px);
  padding-top:clamp(18px,3vh,28px);
  border-top:1px solid var(--line);
}

.info p{
  margin:0;
}

.info-block > p:last-child{
  margin-top:16px;
  max-width:640px;
  font-size:clamp(24px,2.9vw,48px);
  line-height:.95;
  letter-spacing:-.065em;
  text-transform:uppercase;
  font-weight:900;
}

.info ul{
  list-style:none;
  padding:0;
  margin:16px 0 0;
}

.info li{
  display:flex;
  justify-content:space-between;
  gap:20px;
  padding:12px 0;
  border-bottom:1px solid var(--line);
  font-size:clamp(17px,1.4vw,24px);
  letter-spacing:.02em;
  text-transform:uppercase;
  font-weight:900;
}

.info li:after{
  content:"↗";
  color:var(--muted);
}

footer{
  display:flex;
  justify-content:space-between;
  gap:24px;
  padding-top:clamp(32px,5vh,58px);
  color:var(--muted);
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
}

@media(max-width:900px){
  .page{
    padding:18px;
  }

  .topbar nav{
    margin-left:0;
    width:100%;
    justify-content:space-between;
  }

  .hero{
    display:block;
  }

  h1{
    font-size:clamp(82px,24vw,150px);
  }

  .descriptor{
    font-size:12px;
    line-height:1.4;
  }

  .links{
    margin-top:36px;
  }

  .links a{
    display:grid;
    grid-template-columns:1fr auto;
    gap:10px;
    padding:20px 0;
  }

  .links span{
    grid-column:1 / -1;
    margin-bottom:2px;
  }

  .links strong{
    font-size:clamp(32px,10vw,54px);
    overflow-wrap:anywhere;
  }

  .photo-strip{
    display:flex;
    gap:10px;
    overflow-x:auto;
    margin-top:32px;
    padding-bottom:8px;
    scroll-snap-type:x mandatory;
  }

  .photo{
    min-width:72vw;
    scroll-snap-align:start;
  }

  .photo.small,
  .photo.large{
    height:360px;
  }

  .info{
    display:block;
  }

  .info-block + .info-block{
    margin-top:42px;
  }

  .info-block > p:last-child{
    font-size:clamp(28px,9vw,52px);
  }

  footer{
    display:block;
  }

  footer span{
    display:block;
    margin-top:10px;
  }
}


/* Mobile optimisation pass */

.mobile-email{
  display:none;
}

@media(max-width:900px){
  .mobile-email{
    display:inline;
  }

  .desktop-email{
    display:none;
  }

  .topbar{
    margin-bottom:32px;
  }

  .topbar nav{
    gap:18px;
    justify-content:flex-end;
    font-size:11px;
  }

  .hero-copy{
    max-width:100%;
  }

  .eyebrow{
    font-size:12px;
    margin-bottom:12px;
  }

  h1{
    font-size:clamp(76px,23vw,128px);
    line-height:.78;
  }

  .descriptor{
    max-width:360px;
    font-size:11px;
    letter-spacing:.14em;
  }

  .links{
    margin-top:30px;
  }

  .links a{
    grid-template-columns:1fr auto;
    padding:17px 0;
  }

  .links span{
    font-size:10px;
    letter-spacing:.2em;
  }

  .links strong{
    font-size:clamp(34px,11vw,58px);
    line-height:.88;
    letter-spacing:-.075em;
    overflow-wrap:normal;
    word-break:normal;
  }

  .links em{
    font-size:21px;
    align-self:end;
    padding-bottom:3px;
  }

  .photo-strip{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
    overflow:visible;
    margin-top:30px;
    padding-bottom:0;
  }

  .photo{
    min-width:0;
    width:100%;
  }

  .photo.small,
  .photo.large{
    height:240px;
  }

  .photo:nth-child(2),
  .photo:nth-child(4){
    height:310px;
  }

  .photo:nth-child(5){
    grid-column:1 / -1;
    height:260px;
  }

  .photo:nth-child(1) img{
    object-position:center 38%;
  }

  .photo:nth-child(2) img{
    object-position:center 45%;
  }

  .photo:nth-child(3) img{
    object-position:center 44%;
  }

  .photo:nth-child(4) img{
    object-position:center 50%;
  }

  .photo:nth-child(5) img{
    object-position:center 42%;
  }

  .info{
    margin-top:32px;
  }

  .info-block > p:last-child{
    font-size:clamp(27px,8.6vw,46px);
    line-height:.98;
  }

  .info li{
    font-size:15px;
    padding:11px 0;
  }
}

@media(max-width:430px){
  .page{
    padding:16px;
  }

  .topbar nav{
    width:100%;
    justify-content:space-between;
  }

  h1{
    font-size:clamp(72px,22vw,108px);
  }

  .links strong{
    font-size:clamp(31px,10vw,46px);
  }

  .photo-strip{
    grid-template-columns:1fr;
  }

  .photo.small,
  .photo.large,
  .photo:nth-child(2),
  .photo:nth-child(4),
  .photo:nth-child(5){
    height:330px;
    grid-column:auto;
  }

  .photo:nth-child(3){
    height:260px;
  }
}


@media (max-width: 768px) {
  .link-value {
    font-size: 1.6rem !important;
    letter-spacing: -0.03em;
  }

  .links-grid {
    gap: 0.5rem;
  }

  .link-row {
    grid-template-columns: 90px 1fr 24px;
    align-items: center;
  }
}


/* FINAL LINK SIZE FIX */
.link-value,
.link-value.email,
.link-value.large,
.link-value.small {
  font-size: clamp(1.7rem, 2.4vw, 3rem) !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

/* MOBILE FIXES */
@media (max-width: 768px) {

  .link-row {
    grid-template-columns: 78px 1fr 20px !important;
    gap: 10px !important;
    align-items: center !important;
  }

  .link-label {
    font-size: 0.8rem !important;
    letter-spacing: 0.18em !important;
  }

  .link-value,
  .link-value.email,
  .link-value.large,
  .link-value.small {
    font-size: 1.45rem !important;
    white-space: nowrap !important;
  }

  .hero-subtitle {
    font-size: 0.95rem !important;
    line-height: 1.5 !important;
  }
}


/* FINAL ABSOLUTE DESKTOP + MOBILE FIX */

/* Hide any remaining eyebrow/creator label above the name */
.eyebrow,
.hero-tag {
  display: none !important;
}

/* Make every link value, including email, identical */
.links strong,
.links strong span,
.links a strong,
.links a:nth-child(4) strong,
.links a:nth-child(4) strong span,
.desktop-email,
.mobile-email {
  display: inline !important;
  color: var(--ink) !important;
  opacity: 1 !important;
  font-size: clamp(22px, 2.45vw, 44px) !important;
  line-height: .9 !important;
  letter-spacing: -0.065em !important;
  text-transform: uppercase !important;
  font-weight: 900 !important;
  white-space: nowrap !important;
}

/* Make sure email does not inherit muted/small styling */
.links a:nth-child(4),
.links a:nth-child(4) strong,
.links a:nth-child(4) span:not(:first-child) {
  color: var(--ink) !important;
}

/* Keep labels muted only, not the email value */
.links a > span:first-child {
  color: var(--muted) !important;
}

.links a:hover > span:first-child {
  color: var(--red) !important;
}

.links a:hover strong,
.links a:hover strong span {
  color: var(--red) !important;
}

@media(max-width:900px) {
  .links strong,
  .links strong span,
  .links a strong,
  .links a:nth-child(4) strong,
  .links a:nth-child(4) strong span,
  .desktop-email,
  .mobile-email {
    font-size: clamp(25px, 8.4vw, 42px) !important;
    line-height: .92 !important;
    white-space: nowrap !important;
    letter-spacing: -0.07em !important;
  }
}

@media(max-width:430px) {
  .links strong,
  .links strong span,
  .links a strong,
  .links a:nth-child(4) strong,
  .links a:nth-child(4) strong span,
  .desktop-email,
  .mobile-email {
    font-size: clamp(22px, 7.3vw, 34px) !important;
  }
}


/* Slightly smaller link text across desktop + mobile */

.links strong,
.links strong span,
.links a strong,
.desktop-email,
.mobile-email {
  font-size: clamp(18px, 2vw, 36px) !important;
}

@media(max-width:900px) {
  .links strong,
  .links strong span,
  .links a strong,
  .desktop-email,
  .mobile-email {
    font-size: clamp(20px, 6.4vw, 30px) !important;
  }
}

@media(max-width:430px) {
  .links strong,
  .links strong span,
  .links a strong,
  .desktop-email,
  .mobile-email {
    font-size: clamp(18px, 5.8vw, 26px) !important;
  }
}


/* Smaller featured collaboration text */

.info-block > p:last-child{
  font-size: clamp(18px, 2vw, 34px) !important;
  line-height: 1.02 !important;
  letter-spacing: -0.05em !important;
}

@media(max-width:900px){
  .info-block > p:last-child{
    font-size: clamp(20px, 5.8vw, 30px) !important;
  }
}

@media(max-width:430px){
  .info-block > p:last-child{
    font-size: clamp(18px, 5vw, 24px) !important;
  }
}


/* FINAL SIZE + MOBILE NAV POLISH */

/* Reduce all social/email handle sizes by ~20% */
.links strong,
.links strong span,
.links a strong,
.desktop-email,
.mobile-email {
  font-size: clamp(16px, 1.7vw, 29px) !important;
  line-height: .92 !important;
}

@media(max-width:900px){
  .links strong,
  .links strong span,
  .links a strong,
  .desktop-email,
  .mobile-email {
    font-size: clamp(18px, 5vw, 24px) !important;
  }

  /* Proper centered mobile nav */
  .topbar nav{
    width:100% !important;
    display:grid !important;
    grid-template-columns:1fr 1fr 1fr !important;
    align-items:center !important;
    gap:0 !important;
  }

  .topbar nav a:nth-child(1){
    text-align:left !important;
  }

  .topbar nav a:nth-child(2){
    text-align:center !important;
  }

  .topbar nav a:nth-child(3){
    text-align:right !important;
  }
}

@media(max-width:430px){
  .links strong,
  .links strong span,
  .links a strong,
  .desktop-email,
  .mobile-email {
    font-size: clamp(16px, 4.8vw, 22px) !important;
  }
}


/* ACTUALLY smaller social handle sizing */

.links strong,
.links strong span,
.links a strong,
.desktop-email,
.mobile-email {
  font-size: clamp(14px, 1.25vw, 22px) !important;
  line-height: 1 !important;
  letter-spacing: -0.04em !important;
}

@media(max-width:900px){
  .links strong,
  .links strong span,
  .links a strong,
  .desktop-email,
  .mobile-email {
    font-size: clamp(14px, 4vw, 18px) !important;
  }
}

@media(max-width:430px){
  .links strong,
  .links strong span,
  .links a strong,
  .desktop-email,
  .mobile-email {
    font-size: 16px !important;
    line-height: 1 !important;
  }
}


/* FORCE ALL FOUR LINES TO IDENTICAL SIZE */

.links a strong,
.links a strong span,
.links .desktop-email,
.links .mobile-email,
.links a:nth-child(4) strong,
.links a:nth-child(4) strong span {
  font-size: 16px !important;
  font-weight: 900 !important;
  color: #000 !important;
  line-height: 1 !important;
  letter-spacing: -0.04em !important;
  white-space: nowrap !important;
}

@media(min-width:768px){
  .links a strong,
  .links a strong span,
  .links .desktop-email,
  .links .mobile-email,
  .links a:nth-child(4) strong,
  .links a:nth-child(4) strong span {
    font-size: 22px !important;
  }
}